2022-01-12 10:27:49 +00:00
|
|
|
package dev.inmo.jsuikit.elements
|
2021-12-22 08:38:12 +00:00
|
|
|
|
|
|
|
import androidx.compose.runtime.Composable
|
2022-01-12 13:58:52 +00:00
|
|
|
import dev.inmo.jsuikit.modifiers.*
|
2022-01-13 05:55:08 +00:00
|
|
|
import org.jetbrains.compose.web.dom.*
|
|
|
|
import org.w3c.dom.*
|
2021-12-22 08:38:12 +00:00
|
|
|
import org.w3c.dom.events.Event
|
|
|
|
|
|
|
|
sealed class Icon(val name: String) {
|
|
|
|
sealed class App(iconName: String) : Icon(iconName) {
|
|
|
|
object Home : App("home")
|
|
|
|
sealed class Sign(iconName: String) : App("sign-$iconName") {
|
|
|
|
object In : Sign("in")
|
|
|
|
object Out : Sign("out")
|
|
|
|
}
|
|
|
|
object User : App("user")
|
|
|
|
object Users : App("users")
|
|
|
|
object Lock : App("lock")
|
|
|
|
object Unlock : App("unlock")
|
|
|
|
object Settings : App("settings")
|
|
|
|
object Cog : App("cog")
|
|
|
|
object Nut : App("nut")
|
|
|
|
object Comment : App("comment")
|
|
|
|
object Commenting : App("commenting")
|
|
|
|
object Comments : App("comments")
|
|
|
|
object Hashtag : App("hashtag")
|
|
|
|
object Tag : App("tag")
|
|
|
|
object Cart : App("cart")
|
|
|
|
object Bag : App("bag")
|
|
|
|
sealed class Credit(iconName: String) : App("credit-$iconName") {
|
|
|
|
object Card : Credit("card")
|
|
|
|
}
|
|
|
|
object Mail : App("mail")
|
|
|
|
object Receiver : App("receiver")
|
|
|
|
object Print : App("print")
|
|
|
|
object Search : App("search")
|
|
|
|
object Location : App("location")
|
|
|
|
object Bookmark : App("bookmark")
|
|
|
|
object Code : App("code")
|
|
|
|
sealed class Paint(iconName: String) : App("paint-$iconName") {
|
|
|
|
object Bucket : Paint("bucket")
|
|
|
|
}
|
|
|
|
object Camera : App("camera")
|
|
|
|
sealed class Video(iconName: String) : App("video-$iconName") {
|
|
|
|
object Camera : Video("camera")
|
|
|
|
}
|
|
|
|
object Bell : App("bell")
|
|
|
|
object Microphone : App("microphone")
|
|
|
|
object Bolt : App("bolt")
|
|
|
|
object Star : App("star")
|
|
|
|
object Heart : App("heart")
|
|
|
|
object Happy : App("happy")
|
|
|
|
object Lifesaver : App("lifesaver")
|
|
|
|
object Rss : App("rss")
|
|
|
|
object Social : App("social")
|
|
|
|
sealed class Git(iconName: String) : App("git-$iconName") {
|
|
|
|
object Branch : Git("branch")
|
|
|
|
object Fork : Git("fork")
|
|
|
|
}
|
|
|
|
object World : App("world")
|
|
|
|
object Calendar : App("calendar")
|
|
|
|
object Clock : App("clock")
|
|
|
|
object History : App("history")
|
|
|
|
object Future : App("future")
|
|
|
|
object Pencil : App("pencil")
|
|
|
|
object Trash : App("trash")
|
|
|
|
object Move : App("move")
|
|
|
|
object Link : App("link")
|
|
|
|
object Question : App("question")
|
|
|
|
object Info : App("info")
|
|
|
|
object Warning : App("warning")
|
|
|
|
object Image : App("image")
|
|
|
|
object Thumbnails : App("thumbnails")
|
|
|
|
object Table : App("table")
|
|
|
|
object List : App("list")
|
|
|
|
object Menu : App("menu")
|
|
|
|
object Grid : App("grid")
|
|
|
|
sealed class More(iconName: String) : App("more${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
|
|
|
|
object Vertical : More("vertical")
|
2022-03-25 13:27:02 +00:00
|
|
|
companion object : More("")
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
sealed class Plus(iconName: String) : App("plus${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
|
|
|
|
object Circle : Plus("circle")
|
2022-03-25 13:27:02 +00:00
|
|
|
companion object : Plus("")
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
sealed class Minus(iconName: String) : App("minus${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
|
|
|
|
object Circle : Minus("circle")
|
2022-03-25 13:27:02 +00:00
|
|
|
companion object : Minus("")
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
object Close : App("close")
|
|
|
|
object Check : App("check")
|
|
|
|
object Ban : App("ban")
|
|
|
|
object Refresh : App("refresh")
|
|
|
|
sealed class Play(iconName: String) : App("play${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
|
|
|
|
object Circle : Play("circle")
|
2022-03-25 13:27:02 +00:00
|
|
|
companion object : Play("")
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
sealed class Devices(iconName: String) : Icon(iconName) {
|
|
|
|
object Tv : Devices("tv")
|
|
|
|
object Desktop : Devices("desktop")
|
|
|
|
object Laptop : Devices("laptop")
|
|
|
|
sealed class Tablet(iconName: String) : Devices("tablet${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
|
|
|
|
object Landscape : Tablet("landscape")
|
2022-03-25 13:27:02 +00:00
|
|
|
companion object : Tablet("")
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
sealed class Phone(iconName: String) : Devices("phone${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
|
|
|
|
object Landscape : Phone("landscape")
|
2022-03-25 13:27:02 +00:00
|
|
|
companion object : Phone("")
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
sealed class Storage(iconName: String) : Icon(iconName) {
|
|
|
|
sealed class File(iconName: String) : Storage("file${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
|
|
|
|
object Text : File("text")
|
|
|
|
object Pdf : File("pdf")
|
|
|
|
object Edit : File("edit")
|
2022-03-25 13:27:02 +00:00
|
|
|
companion object : File("")
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
object Copy : Storage("copy")
|
|
|
|
object Folder : Storage("folder")
|
|
|
|
object Album : Storage("album")
|
|
|
|
object Push : Storage("push")
|
|
|
|
object Pull : Storage("pull")
|
|
|
|
object Server : Storage("server")
|
|
|
|
object Database : Storage("database")
|
|
|
|
sealed class Cloud(iconName: String) : Storage("cloud-$iconName") {
|
|
|
|
object Upload : Cloud("upload")
|
|
|
|
object Download : Cloud("download")
|
|
|
|
}
|
|
|
|
object Download : Storage("download")
|
|
|
|
object Upload : Storage("upload")
|
|
|
|
}
|
|
|
|
sealed class Direction(iconName: String) : Icon(iconName) {
|
|
|
|
object Reply : Direction("reply")
|
|
|
|
object Forward : Direction("forward")
|
|
|
|
object Expand : Direction("expand")
|
|
|
|
object Shrink : Direction("shrink")
|
|
|
|
sealed class Arrow(iconName: String) : Direction("arrow-$iconName") {
|
|
|
|
object Up : Arrow("up")
|
|
|
|
object Down : Arrow("down")
|
|
|
|
object Left : Arrow("left")
|
|
|
|
object Right : Arrow("right")
|
|
|
|
}
|
|
|
|
sealed class Chevron(iconName: String) : Direction("chevron-$iconName") {
|
|
|
|
object Up : Chevron("up")
|
|
|
|
object Down : Chevron("down")
|
|
|
|
object Left : Chevron("left")
|
|
|
|
object Right : Chevron("right")
|
|
|
|
sealed class Double(iconName: String) : Chevron("double-$iconName") {
|
|
|
|
object Left : Double("left")
|
|
|
|
object Right : Double("right")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
sealed class Triangle(iconName: String) : Direction("triangle-$iconName") {
|
|
|
|
object Up : Triangle("up")
|
|
|
|
object Down : Triangle("down")
|
|
|
|
object Left : Triangle("left")
|
|
|
|
object Right : Triangle("right")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
sealed class Editor(iconName: String) : Icon(iconName) {
|
|
|
|
object Bold : Editor("bold")
|
|
|
|
object Italic : Editor("italic")
|
|
|
|
object Strikethrough : Editor("strikethrough")
|
|
|
|
sealed class Quote(iconName: String) : Editor("quote-$iconName") {
|
|
|
|
object Right : Quote("right")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
sealed class Brands(iconName: String) : Icon(iconName) {
|
|
|
|
object _500px : Brands("500px")
|
|
|
|
object Behance : Brands("behance")
|
|
|
|
object Discord : Brands("discord")
|
|
|
|
object Dribbble : Brands("dribbble")
|
|
|
|
object Etsy : Brands("etsy")
|
|
|
|
object Facebook : Brands("facebook")
|
|
|
|
object Flickr : Brands("flickr")
|
|
|
|
object Foursquare : Brands("foursquare")
|
|
|
|
sealed class Github(iconName: String) : Brands("github${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
|
|
|
|
object Alt : Github("alt")
|
2022-03-25 13:27:02 +00:00
|
|
|
companion object : Github("")
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
object Gitter : Brands("gitter")
|
|
|
|
object Google : Brands("google")
|
|
|
|
object Instagram : Brands("instagram")
|
|
|
|
object Joomla : Brands("joomla")
|
|
|
|
object Linkedin : Brands("linkedin")
|
|
|
|
object Pagekit : Brands("pagekit")
|
|
|
|
object Pinterest : Brands("pinterest")
|
|
|
|
object Reddit : Brands("reddit")
|
|
|
|
object Soundcloud : Brands("soundcloud")
|
|
|
|
object Tiktok : Brands("tiktok")
|
|
|
|
object Tripadvisor : Brands("tripadvisor")
|
|
|
|
object Tumblr : Brands("tumblr")
|
|
|
|
object Twitch : Brands("twitch")
|
|
|
|
object Twitter : Brands("twitter")
|
|
|
|
object Uikit : Brands("uikit")
|
|
|
|
object Vimeo : Brands("vimeo")
|
|
|
|
object Whatsapp : Brands("whatsapp")
|
|
|
|
object Wordpress : Brands("wordpress")
|
|
|
|
object Xing : Brands("xing")
|
|
|
|
object Yelp : Brands("yelp")
|
|
|
|
object Youtube : Brands("youtube")
|
|
|
|
}
|
|
|
|
|
|
|
|
@Composable
|
|
|
|
operator fun invoke(
|
2022-01-13 13:56:39 +00:00
|
|
|
vararg modifiers: UIKitModifier,
|
2021-12-22 08:38:12 +00:00
|
|
|
type: UIKitIconType = UIKitIconType.Default,
|
|
|
|
ratio: Float? = null,
|
2022-01-13 05:55:08 +00:00
|
|
|
attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
|
2021-12-22 08:38:12 +00:00
|
|
|
onClick: ((Event) -> Unit)? = null
|
|
|
|
) {
|
2022-01-13 05:55:08 +00:00
|
|
|
val configurer: AttrBuilderContext<out HTMLElement> = {
|
2022-02-09 09:28:47 +00:00
|
|
|
include(*modifiers, type, UIKitIcon)
|
2022-01-13 05:55:08 +00:00
|
|
|
attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}")
|
|
|
|
onClick ?.let { _ ->
|
|
|
|
onClick { onClick(it.nativeEvent) }
|
|
|
|
}
|
|
|
|
attributesCustomizer()
|
|
|
|
}
|
2022-01-21 16:41:26 +00:00
|
|
|
when (type) {
|
|
|
|
UIKitIconType.Default -> Span(configurer)
|
|
|
|
UIKitIconType.Link -> A(href = "#", configurer)
|
|
|
|
UIKitIconType.Button -> Button(configurer)
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-21 15:37:16 +00:00
|
|
|
class Custom(name: String) : Icon(name)
|
|
|
|
|
2021-12-22 08:38:12 +00:00
|
|
|
@Composable
|
|
|
|
fun drawAsButton(
|
2022-01-13 13:56:39 +00:00
|
|
|
vararg modifiers: UIKitModifier,
|
2021-12-22 08:38:12 +00:00
|
|
|
ratio: Float? = null,
|
2022-01-13 05:55:08 +00:00
|
|
|
attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
|
2021-12-22 08:38:12 +00:00
|
|
|
onClick: ((Event) -> Unit)? = null
|
2022-01-13 13:56:39 +00:00
|
|
|
) = invoke(*modifiers, type = UIKitIconType.Button, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
|
2021-12-22 08:38:12 +00:00
|
|
|
|
|
|
|
@Composable
|
|
|
|
fun drawAsIcon(
|
2022-01-13 13:56:39 +00:00
|
|
|
vararg modifiers: UIKitModifier,
|
2021-12-22 08:38:12 +00:00
|
|
|
ratio: Float? = null,
|
2022-01-13 05:55:08 +00:00
|
|
|
attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
|
2021-12-22 08:38:12 +00:00
|
|
|
onClick: ((Event) -> Unit)? = null
|
2022-01-13 13:56:39 +00:00
|
|
|
) = invoke(*modifiers, type = UIKitIconType.Default, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
|
2022-01-21 16:41:26 +00:00
|
|
|
|
|
|
|
@Composable
|
|
|
|
fun drawAsLink(
|
|
|
|
vararg modifiers: UIKitModifier,
|
|
|
|
ratio: Float? = null,
|
|
|
|
attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
|
|
|
|
onClick: ((Event) -> Unit)? = null
|
|
|
|
) = invoke(*modifiers, type = UIKitIconType.Link, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
|
2022-02-17 13:31:31 +00:00
|
|
|
|
|
|
|
@Composable
|
|
|
|
fun drawAsFormInputPart(
|
|
|
|
vararg modifiers: UIKitModifier,
|
|
|
|
ratio: Float? = null,
|
|
|
|
attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
|
|
|
|
onClick: ((Event) -> Unit)? = null
|
|
|
|
) = invoke(*modifiers, UIKitForm.Icon, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|