diff --git a/README.md b/README.md index 1389720b..ee40c29e 100644 --- a/README.md +++ b/README.md @@ -21,8 +21,7 @@ is also available, which brings in all KMDC modules as transitive dependencies u Either approach can be installed by declaring relevant dependencies in your `jsMain` sourceSet. Additionally, you need to enable SCSS support. This is done by adding required npm dev dependencies to your sourceSet -and then -enabling them via [`webpack.config.d/scss.js`](gradle/webpack.config.d/scss.js) file. +and then enabling them via [`webpack.config.d/scss.js`](gradle/webpack.config.d/scss.js) file. ```kotlin plugins { @@ -58,8 +57,8 @@ kotlin { Most of the API maps closely to MDC JS API, making all examples there semi-valid. KMDC components follow a specific naming convention to make its components more discoverable as well. The convention is `MDC[UpperCamelCaseMDCComponentName]` (e.g. `MDCTopAppBar`) for the top-level component -and `UpperCamelCaseLogicalName` for all subcomponents. -Most of the components also follow the same argument order schema: +and `UpperCamelCaseLogicalName` for all subcomponents. Most of the components also follow the same argument order +schema: 1. `...requiredMdcOptions` - MDC-specific options with no default values 2. `...optionalMdcOptions` - MDC-specific options with default values @@ -93,59 +92,59 @@ fun Showcase() { Here's a tracker list of currently completed [material-components-web] modules: -- [ ] mdc-animation (SASS) -- [x] mdc-auto-init (won't wrap) -- [x] mdc-banner -- [x] mdc-base (won't wrap) -- [x] mdc-button -- [x] mdc-card -- [x] mdc-checkbox -- [x] mdc-chips -- [x] mdc-circular-progress -- [x] mdc-data-table -- [x] mdc-density (won't wrap) -- [x] mdc-dialog -- [x] mdc-dom (won't wrap) -- [x] mdc-drawer -- [x] mdc-elevation -- [x] mdc-fab -- [x] mdc-feature-targeting (won't wrap) -- [x] mdc-floating-label -- [x] mdc-form-field -- [x] mdc-icon-button -- [x] mdc-image-list -- [x] mdc-layout-grid -- [x] mdc-line-ripple -- [x] mdc-linear-progress -- [x] mdc-list -- [x] mdc-menu-surface -- [x] mdc-menu -- [ ] mdc-notched-outline -- [x] mdc-progress-indicator (won't wrap) -- [x] mdc-radio -- [x] mdc-ripple -- [ ] mdc-rtl (SASS) -- [x] mdc-segmented-button -- [x] mdc-select -- [ ] mdc-shape (SASS) -- [x] mdc-slider -- [x] mdc-snackbar -- [x] mdc-switch -- [x] mdc-tab-bar -- [x] mdc-tab-indicator -- [x] mdc-tab-scroller -- [x] mdc-tab -- [x] mdc-textfield -- [ ] mdc-theme (SASS) -- [x] mdc-tokens (won't wrap) -- [x] mdc-tooltip -- [x] mdc-top-app-bar -- [x] mdc-touch-target -- [x] mdc-typography +- [ ] kmdc-animation (SASS) +- [ ] kmdc-auto-init (won't wrap) +- [x] kmdc-banner +- [ ] kmdc-base (won't wrap) +- [x] kmdc-button +- [x] kmdc-card +- [x] kmdc-checkbox +- [x] kmdc-chips +- [x] kmdc-circular-progress +- [x] kmdc-data-table +- [ ] kmdc-density (won't wrap) +- [x] kmdc-dialog +- [ ] kmdc-dom (won't wrap) +- [x] kmdc-drawer +- [x] kmdc-elevation +- [x] kmdc-fab +- [ ] kmdc-feature-targeting (won't wrap) +- [x] kmdc-floating-label +- [x] kmdc-form-field +- [x] kmdc-icon-button +- [x] kmdc-image-list +- [x] kmdc-layout-grid +- [x] kmdc-line-ripple +- [x] kmdc-linear-progress +- [x] kmdc-list +- [x] kmdc-menu-surface +- [x] kmdc-menu +- [x] kmdc-notched-outline +- [ ] kmdc-progress-indicator (won't wrap) +- [x] kmdc-radio +- [x] kmdc-ripple +- [ ] kmdc-rtl (SASS) +- [x] kmdc-segmented-button +- [x] kmdc-select +- [ ] kmdc-shape (SASS) +- [x] kmdc-slider +- [x] kmdc-snackbar +- [x] kmdc-switch +- [x] kmdc-tab-bar +- [x] kmdc-tab-indicator +- [x] kmdc-tab-scroller +- [x] kmdc-tab +- [x] kmdc-textfield +- [ ] kmdc-theme (SASS) +- [ ] kmdc-tokens (won't wrap) +- [x] kmdc-tooltip +- [x] kmdc-top-app-bar +- [x] kmdc-touch-target +- [x] kmdc-typography Other libraries and extensions: -- [x] material-icons +- [x] kmdc-icons ### Module Structure diff --git a/build-conventions/src/main/kotlin/convention.kmdc.gradle.kts b/build-conventions/src/main/kotlin/convention.kmdc.gradle.kts index eef61db3..e19b01d5 100644 --- a/build-conventions/src/main/kotlin/convention.kmdc.gradle.kts +++ b/build-conventions/src/main/kotlin/convention.kmdc.gradle.kts @@ -28,7 +28,7 @@ afterEvaluate { extensions.configure(KotlinMultiplatformExtension::class.java) { sourceSets.jsMain.configure { dependencies { - api(kmdc("base")) + if (project.name != "kmdc-base") api(kmdc("base")) api(npm(kmdc.module.get(), kmdc.version.get())) } } diff --git a/katalog/katalog-runtime/src/jsMain/kotlin/domain/Katalog.kt b/katalog/katalog-runtime/src/jsMain/kotlin/domain/Katalog.kt index ac5bd5b8..ce2f403e 100644 --- a/katalog/katalog-runtime/src/jsMain/kotlin/domain/Katalog.kt +++ b/katalog/katalog-runtime/src/jsMain/kotlin/domain/Katalog.kt @@ -1,20 +1,23 @@ package dev.petuska.katalog.runtime.domain -import dev.petuska.katalog.runtime.theme.* +import dev.petuska.katalog.runtime.theme.KatalogTheme public data class Katalog internal constructor( val id: String, val title: String, val subtitle: String?, val contentRootUrl: String?, + val debug: Boolean, val showcases: List, - public val theme: KatalogTheme, + val theme: KatalogTheme, ) { + @Suppress("LongParameterList") public class Builder( public var id: String = "katalog", public var title: String = "Katalog", public var subtitle: String? = null, public var contentRootUrl: String? = null, + public var debug: Boolean = false, public var theme: KatalogTheme = KatalogTheme(), public var showcases: MutableList ) { @@ -23,6 +26,7 @@ public data class Katalog internal constructor( title = title, subtitle = subtitle, contentRootUrl = contentRootUrl, + debug = debug, theme = theme, showcases = showcases, ) diff --git a/katalog/katalog-runtime/src/jsMain/kotlin/ui/ShowcaseBox.kt b/katalog/katalog-runtime/src/jsMain/kotlin/ui/ShowcaseBox.kt index 2bdd5b67..e4207be2 100644 --- a/katalog/katalog-runtime/src/jsMain/kotlin/ui/ShowcaseBox.kt +++ b/katalog/katalog-runtime/src/jsMain/kotlin/ui/ShowcaseBox.kt @@ -23,8 +23,9 @@ private object ShowcaseBoxStyle : StyleSheet() { @Composable internal fun ShowcaseBox(showcase: Showcase) = with(showcase) { + val debug = katalog.debug LaunchedEffect(showcase) { - console.asDynamic().clear(); Unit + if (!debug) console.asDynamic().clear() } val contentRootUrl = katalog.contentRootUrl val location = contentRootUrl?.let { diff --git a/kmdc/kmdc-banner/src/jsMain/kotlin/Actions.kt b/kmdc/kmdc-banner/src/jsMain/kotlin/Actions.kt index 662784e6..c105bcf5 100644 --- a/kmdc/kmdc-banner/src/jsMain/kotlin/Actions.kt +++ b/kmdc/kmdc-banner/src/jsMain/kotlin/Actions.kt @@ -15,7 +15,7 @@ public interface MDCBannerActionsScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBannerScope.Actions( attrs: MDCAttrsRaw? = null, @@ -35,18 +35,20 @@ public interface MDCBannerActionScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable private fun MDCBannerActionsScope.Action( primary: Boolean, type: MDCButtonType, icon: MDCButtonIconType, + touch: Boolean, attrs: MDCAttrsRaw?, content: MDCContent>?, ) { MDCButton( type = type, icon = icon, + touch = touch, attrs = { classes("mdc-banner__${if (primary) "primary" else "secondary"}-action") type(ButtonType.Button) @@ -59,29 +61,31 @@ private fun MDCBannerActionsScope.Action( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBannerActionsScope.PrimaryAction( type: MDCButtonType = MDCButtonType.Text, icon: MDCButtonIconType = MDCButtonIconType.None, + touch: Boolean = false, attrs: MDCAttrsRaw? = null, content: MDCContent>? = null, ) { - Action(true, type, icon, attrs, content) + Action(primary = true, type = type, icon = icon, touch = touch, attrs = attrs, content = content) } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBannerActionsScope.PrimaryAction( text: String, type: MDCButtonType = MDCButtonType.Text, icon: MDCButtonIconType = MDCButtonIconType.None, + touch: Boolean = false, attrs: MDCAttrsRaw? = null, ) { - Action(true, type, icon, attrs) { + Action(primary = true, type = type, icon = icon, touch = touch, attrs = attrs) { Label(text) } } @@ -89,29 +93,31 @@ public fun MDCBannerActionsScope.PrimaryAction( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBannerActionsScope.SecondaryAction( type: MDCButtonType = MDCButtonType.Text, icon: MDCButtonIconType = MDCButtonIconType.None, + touch: Boolean = false, attrs: MDCAttrsRaw? = null, content: MDCContent>? = null, ) { - Action(false, type, icon, attrs, content) + Action(primary = false, type = type, icon = icon, touch = touch, attrs = attrs, content = content) } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBannerActionsScope.SecondaryAction( text: String, type: MDCButtonType = MDCButtonType.Text, icon: MDCButtonIconType = MDCButtonIconType.None, + touch: Boolean = false, attrs: MDCAttrsRaw? = null, ) { - Action(false, type, icon, attrs) { + Action(primary = false, type = type, icon = icon, touch = touch, attrs = attrs) { Label(text) } } diff --git a/kmdc/kmdc-banner/src/jsMain/kotlin/Content.kt b/kmdc/kmdc-banner/src/jsMain/kotlin/Content.kt index 6fddbc57..445888df 100644 --- a/kmdc/kmdc-banner/src/jsMain/kotlin/Content.kt +++ b/kmdc/kmdc-banner/src/jsMain/kotlin/Content.kt @@ -11,7 +11,7 @@ public interface MDCBannerContentScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBannerScope.Content( attrs: MDCAttrsRaw? = null, @@ -29,7 +29,7 @@ public fun MDCBannerScope.Content( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBannerContentScope.Text( attrs: MDCAttrsRaw? = null, @@ -47,7 +47,7 @@ public fun MDCBannerContentScope.Text( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBannerContentScope.Text( text: String, @@ -61,7 +61,7 @@ public interface MDCBannerGraphicScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBannerContentScope.Graphic( attrs: MDCAttrsRaw? = null, @@ -81,7 +81,7 @@ public fun MDCBannerContentScope.Graphic( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBannerGraphicScope.Icon( attrs: MDCAttrsRaw? = null, diff --git a/kmdc/kmdc-banner/src/jsMain/kotlin/MDCBanner.kt b/kmdc/kmdc-banner/src/jsMain/kotlin/MDCBanner.kt index 5eb69812..b6a92fd1 100644 --- a/kmdc/kmdc-banner/src/jsMain/kotlin/MDCBanner.kt +++ b/kmdc/kmdc-banner/src/jsMain/kotlin/MDCBanner.kt @@ -1,10 +1,11 @@ package dev.petuska.kmdc.banner -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import org.jetbrains.compose.web.attributes.AttrsScope +import org.jetbrains.compose.web.dom.Div +import org.jetbrains.compose.web.dom.ElementScope +import org.w3c.dom.HTMLDivElement @JsModule("@material/banner/styles.scss") private external val Style: dynamic @@ -15,7 +16,7 @@ public interface MDCBannerScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCBanner( open: Boolean, @@ -34,7 +35,7 @@ public fun MDCBanner( applyAttrs(attrs) }) { MDCProvider(::MDCBanner) { - MDCSideEffectNew(open, centered, mobileStacked) { + MDCSideEffectNew(open, centered, mobileStacked) { if (open) open() else close(CloseReason.UNSPECIFIED) } if (fixed) { diff --git a/kmdc/kmdc-banner/src/jsMain/kotlin/events.kt b/kmdc/kmdc-banner/src/jsMain/kotlin/_events.kt similarity index 80% rename from kmdc/kmdc-banner/src/jsMain/kotlin/events.kt rename to kmdc/kmdc-banner/src/jsMain/kotlin/_events.kt index 79f13bd6..4956b3ff 100644 --- a/kmdc/kmdc-banner/src/jsMain/kotlin/events.kt +++ b/kmdc/kmdc-banner/src/jsMain/kotlin/_events.kt @@ -1,6 +1,13 @@ package dev.petuska.kmdc.banner -import dev.petuska.kmdc.core.* +import dev.petuska.kmdc.core.MDCAttrsDsl +import dev.petuska.kmdc.core.MDCEventListener +import dev.petuska.kmdc.core.addMdcEventListener +import kotlin.js.Json + +public external interface MDCBannerCloseEventDetail { + public val reason: CloseReason +} /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner) @@ -22,7 +29,7 @@ public fun MDCBannerAttrsScope.onClosed(listener: MDCEventListener) { +public fun MDCBannerAttrsScope.onOpening(listener: MDCEventListener) { addMdcEventListener("MDCBanner:opening", listener) } @@ -30,6 +37,6 @@ public fun MDCBannerAttrsScope.onOpening(listener: MDCEventListener) { +public fun MDCBannerAttrsScope.onOpened(listener: MDCEventListener) { addMdcEventListener("MDCBanner:opened", listener) } diff --git a/kmdc/kmdc-banner/src/jsMain/kotlin/_module.kt b/kmdc/kmdc-banner/src/jsMain/kotlin/_module.kt index 59a6885a..d01a633a 100644 --- a/kmdc/kmdc-banner/src/jsMain/kotlin/_module.kt +++ b/kmdc/kmdc-banner/src/jsMain/kotlin/_module.kt @@ -4,10 +4,11 @@ package dev.petuska.kmdc.banner import dev.petuska.kmdc.core.MDCComponent import dev.petuska.kmdc.core.MDCExternalAPI +import dev.petuska.kmdc.core.MDCLayoutComponent import org.w3c.dom.Element @MDCExternalAPI -public external class MDCBanner(element: Element) : MDCComponent { +public external class MDCBanner(element: Element) : MDCComponent, MDCLayoutComponent { public val isOpen: Boolean public fun open() public fun close(closeReason: CloseReason) @@ -17,7 +18,7 @@ public external class MDCBanner(element: Element) : MDCComponent { public fun setPrimaryActionText(actionButtonText: String) public fun getSecondaryActionText(): String public fun setSecondaryActionText(actionButtonText: String) - public fun layout() + public override fun layout() } public external enum class CloseReason { @@ -25,7 +26,3 @@ public external enum class CloseReason { SECONDARY, UNSPECIFIED } - -public external interface MDCBannerCloseEventDetail { - public val reason: CloseReason -} diff --git a/kmdc/kmdc-base/build.gradle.kts b/kmdc/kmdc-base/build.gradle.kts index e523f58d..fe21e7af 100644 --- a/kmdc/kmdc-base/build.gradle.kts +++ b/kmdc/kmdc-base/build.gradle.kts @@ -1,26 +1,13 @@ -import de.fayard.refreshVersions.core.versionFor - plugins { - id("convention.library") - id("convention.publishing") + id("convention.kmdc") } -description = "Compose Multiplatform Kotlin/JS wrappers for @material/base" - -kotlin { - sourceSets { - configureEach { - languageSettings { - optIn("dev.petuska.kmdc.core.KMDCInternalAPI") - optIn("dev.petuska.kmdc.core.MDCExternalAPI") - } - } - jsMain { - dependencies { - api(npm("@material/base", versionFor("version.npm.material-components-web"))) - api(compose.runtime) - api(compose.web.core) - } +kmdc { + mdc by "base" + dependencies { + main { + api(compose.runtime) + api(compose.web.core) } } } diff --git a/kmdc/kmdc-base/src/jsMain/kotlin/MDCProvider.kt b/kmdc/kmdc-base/src/jsMain/kotlin/MDCProvider.kt index 528cb4aa..884cabab 100644 --- a/kmdc/kmdc-base/src/jsMain/kotlin/MDCProvider.kt +++ b/kmdc/kmdc-base/src/jsMain/kotlin/MDCProvider.kt @@ -5,7 +5,7 @@ import org.jetbrains.compose.web.dom.ElementScope import org.w3c.dom.Element @KMDCInternalAPI -private val MDCLocal: ProvidableCompositionLocal?> = strictCompositionLocalOf() +private val MDCLocal: ProvidableCompositionLocal?> = compositionLocalOf { null } @KMDCInternalAPI public external interface MDCProviderScope> @@ -22,7 +22,7 @@ public fun , E : Element> ElementScope.MDCProvider( DisposableEffect(keys = keys) { mdc?.run { destroy() } mdc = init(scopeElement) - scopeElement.mdc = mdc + if (debug) scopeElement.mdc = mdc onDispose { mdc?.run { onDispose?.invoke(this, scopeElement) diff --git a/kmdc/kmdc-base/src/jsMain/kotlin/_module.kt b/kmdc/kmdc-base/src/jsMain/kotlin/_module.kt index 685afb8f..54251b02 100644 --- a/kmdc/kmdc-base/src/jsMain/kotlin/_module.kt +++ b/kmdc/kmdc-base/src/jsMain/kotlin/_module.kt @@ -10,3 +10,7 @@ public abstract external class MDCComponent { public fun getDefaultFoundation(): F public val foundation: F } + +public external interface MDCLayoutComponent { + public fun layout() +} diff --git a/kmdc/kmdc-base/src/jsMain/kotlin/annotations.kt b/kmdc/kmdc-base/src/jsMain/kotlin/annotations.kt index b5eac30d..99dc855e 100644 --- a/kmdc/kmdc-base/src/jsMain/kotlin/annotations.kt +++ b/kmdc/kmdc-base/src/jsMain/kotlin/annotations.kt @@ -1,11 +1,11 @@ package dev.petuska.kmdc.core -@Target(AnnotationTarget.FUNCTION, AnnotationTarget.TYPE, AnnotationTarget.CLASS) +@Target(AnnotationTarget.FUNCTION, AnnotationTarget.TYPE) @DslMarker @KMDCInternalAPI -public annotation class MDCDsl +public annotation class MDCContentDsl -@Target(AnnotationTarget.FUNCTION, AnnotationTarget.TYPE, AnnotationTarget.CLASS) +@Target(AnnotationTarget.FUNCTION, AnnotationTarget.TYPE) @DslMarker @KMDCInternalAPI public annotation class MDCAttrsDsl diff --git a/kmdc/kmdc-base/src/jsMain/kotlin/attrs.kt b/kmdc/kmdc-base/src/jsMain/kotlin/attrs.kt index 7fd6c880..9195c25c 100644 --- a/kmdc/kmdc-base/src/jsMain/kotlin/attrs.kt +++ b/kmdc/kmdc-base/src/jsMain/kotlin/attrs.kt @@ -2,8 +2,9 @@ package dev.petuska.kmdc.core -import org.jetbrains.compose.web.attributes.* -import org.w3c.dom.* +import org.jetbrains.compose.web.attributes.AttrsScope +import org.w3c.dom.Element +import org.w3c.dom.HTMLElement @KMDCInternalAPI public inline fun AttrsScope.aria(key: String, value: Any) { @@ -15,8 +16,6 @@ public inline fun AttrsScope.data(key: String, value: Any) { attr("data-$key", "$value") } -public typealias Classes = Array - @KMDCInternalAPI public inline fun AttrsScope.classes(classes: Array) { classes.forEach { classes(it) } diff --git a/kmdc/kmdc-base/src/jsMain/kotlin/effects.kt b/kmdc/kmdc-base/src/jsMain/kotlin/effects.kt index 73b28280..51d51194 100644 --- a/kmdc/kmdc-base/src/jsMain/kotlin/effects.kt +++ b/kmdc/kmdc-base/src/jsMain/kotlin/effects.kt @@ -21,6 +21,7 @@ import kotlin.reflect.KMutableProperty1 */ @Composable @KMDCInternalAPI +@Deprecated(message = "To be removed") public fun > ElementScope.MDCInitEffect( mdcInit: (E) -> MDC, vararg keys: Any?, @@ -40,6 +41,7 @@ public fun > ElementScope.MDCInitEffect( @Composable @KMDCInternalAPI +@Deprecated(message = "To be removed") public fun > ElementScope<*>.MDCSideEffect( vararg keys: Any?, onDispose: Builder? = null, @@ -57,6 +59,7 @@ public fun > ElementScope<*>.MDCSideEffect( @Composable @KMDCInternalAPI +@Deprecated(message = "To be removed") public fun > ElementScope<*>.MDCStateEffect( value: V, setter: MDC.(V) -> Unit @@ -64,6 +67,7 @@ public fun > ElementScope<*>.MDCStateEffect( @Composable @KMDCInternalAPI +@Deprecated(message = "To be removed") public fun > ElementScope<*>.MDCStateEffect( value: V, property: KMutableProperty1 @@ -104,6 +108,15 @@ public inline fun > MDCStateEffectNew( crossinline setter: MDC.(V) -> Unit ): Unit = MDCSideEffectNew(value) { setter(value) } +@Composable +@KMDCInternalAPI +public inline fun > MDCProviderScope.MDCStateEffectNew( + value: V, + crossinline setter: MDC.(V) -> Unit +) { + dev.petuska.kmdc.core.MDCStateEffectNew(value = value, setter = setter) +} + @Composable @KMDCInternalAPI public inline fun > MDCStateEffectNew( diff --git a/kmdc/kmdc-base/src/jsMain/kotlin/events.kt b/kmdc/kmdc-base/src/jsMain/kotlin/events.kt index aafc5b4a..39920c2a 100644 --- a/kmdc/kmdc-base/src/jsMain/kotlin/events.kt +++ b/kmdc/kmdc-base/src/jsMain/kotlin/events.kt @@ -1,7 +1,7 @@ package dev.petuska.kmdc.core -import org.jetbrains.compose.web.attributes.* -import org.w3c.dom.events.* +import org.jetbrains.compose.web.attributes.AttrsScope +import org.w3c.dom.events.Event public external class MDCEvent internal constructor() : Event { public val detail: T @@ -10,7 +10,6 @@ public external class MDCEvent internal constructor() : Event { public typealias MDCEventListener = @MDCAttrsDsl (event: MDCEvent) -> Unit @KMDCInternalAPI -@Suppress("FunctionName") public fun , D> A.addMdcEventListener( eventName: String, listener: MDCEventListener diff --git a/kmdc/kmdc-base/src/jsMain/kotlin/mdc.kt b/kmdc/kmdc-base/src/jsMain/kotlin/mdc.kt index 9a40c5f4..8f3f728b 100644 --- a/kmdc/kmdc-base/src/jsMain/kotlin/mdc.kt +++ b/kmdc/kmdc-base/src/jsMain/kotlin/mdc.kt @@ -10,5 +10,6 @@ internal var Element.mdc: dynamic } @KMDCInternalAPI +@Deprecated(message = "To be removed") public fun > Element.mdc(action: MDCAttrs? = null): MDC? = mdc.unsafeCast()?.also { action?.invoke(it) } diff --git a/kmdc/kmdc-base/src/jsMain/kotlin/util.kt b/kmdc/kmdc-base/src/jsMain/kotlin/util.kt index b867f2d0..fc433168 100644 --- a/kmdc/kmdc-base/src/jsMain/kotlin/util.kt +++ b/kmdc/kmdc-base/src/jsMain/kotlin/util.kt @@ -10,10 +10,16 @@ import org.w3c.dom.Element public typealias AttrsBuilder = AttrBuilderContext public typealias ContentBuilder = org.jetbrains.compose.web.dom.ContentBuilder public typealias MDCAttrsRaw = @MDCAttrsDsl AttrsBuilder -public typealias MDCContentRaw = @MDCDsl ContentBuilder +public typealias MDCContentRaw = @MDCContentDsl ContentBuilder public typealias Builder = T.() -> Unit public typealias MDCAttrs = @MDCAttrsDsl Builder -public typealias MDCContent = @Composable @MDCDsl Builder +public typealias MDCContent = @Composable @MDCContentDsl Builder +public typealias MDCComponentInit = @Composable S.( + content: @Composable S.() -> Unit +) -> Unit + +private external val process: dynamic +internal val debug = process.env.NODE_ENV == "development" /** * Reinterprets [MDCContent] lambda as a parent [ContentBuilder] lambda, @@ -90,7 +96,7 @@ public inline fun > ElementScope.applyConten } @KMDCInternalAPI -public inline fun jsObject(builder: MDCAttrs = { }): T = js("({})").unsafeCast().apply(builder) +public inline fun jsObject(builder: Builder = { }): T = js("({})").unsafeCast().apply(builder) internal const val KmdcCounterKey = "_kmdcCounter" // NEVER EVER CHANGE THIS @@ -128,4 +134,6 @@ public fun rememberUniqueDomElementId(suffix: String? = null): String = @KMDCInternalAPI public fun rememberMutableStateOf(initial: T): MutableState = remember { mutableStateOf(initial) } -public fun strictCompositionLocalOf(): ProvidableCompositionLocal = compositionLocalOf { error("undefined") } +@KMDCInternalAPI +public fun strictCompositionLocalOf(): ProvidableCompositionLocal = + compositionLocalOf { error("CompositionLocal undefined") } diff --git a/kmdc/kmdc-button/src/jsMain/kotlin/Icon.kt b/kmdc/kmdc-button/src/jsMain/kotlin/Icon.kt index f5bbcf94..f3bdbf25 100644 --- a/kmdc/kmdc-button/src/jsMain/kotlin/Icon.kt +++ b/kmdc/kmdc-button/src/jsMain/kotlin/Icon.kt @@ -1,12 +1,11 @@ package dev.petuska.kmdc.button import androidx.compose.runtime.Composable -import dev.petuska.kmdc.core.AttrsBuilder -import dev.petuska.kmdc.core.MDCDsl +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw import dev.petuska.kmdc.core.applyAttrs import org.jetbrains.compose.web.ExperimentalComposeWebSvgApi -import org.jetbrains.compose.web.dom.AttrBuilderContext -import org.jetbrains.compose.web.dom.ContentBuilder import org.jetbrains.compose.web.dom.I import org.jetbrains.compose.web.svg.Svg import org.w3c.dom.HTMLElement @@ -15,11 +14,11 @@ import org.w3c.dom.svg.SVGElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-button#icon) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCButtonScope<*>.Icon( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { I( attrs = { @@ -34,13 +33,13 @@ public fun MDCButtonScope<*>.Icon( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-button#icon) */ -@MDCDsl +@MDCContentDsl @Composable @ExperimentalComposeWebSvgApi public fun MDCButtonScope<*>.Icon( viewBox: String?, - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { Svg( viewBox = viewBox, diff --git a/kmdc/kmdc-button/src/jsMain/kotlin/Label.kt b/kmdc/kmdc-button/src/jsMain/kotlin/Label.kt index 759335cb..07304d41 100644 --- a/kmdc/kmdc-button/src/jsMain/kotlin/Label.kt +++ b/kmdc/kmdc-button/src/jsMain/kotlin/Label.kt @@ -2,8 +2,8 @@ package dev.petuska.kmdc.button import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl import dev.petuska.kmdc.core.MDCContentRaw -import dev.petuska.kmdc.core.MDCDsl import org.jetbrains.compose.web.dom.Span import org.jetbrains.compose.web.dom.Text import org.w3c.dom.HTMLSpanElement @@ -11,7 +11,7 @@ import org.w3c.dom.HTMLSpanElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCButtonScope<*>.Label( attrs: MDCAttrsRaw? = null, @@ -29,7 +29,7 @@ public fun MDCButtonScope<*>.Label( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCButtonScope<*>.Label( text: String, diff --git a/kmdc/kmdc-button/src/jsMain/kotlin/MDCButton.kt b/kmdc/kmdc-button/src/jsMain/kotlin/MDCButton.kt index 1676c1cf..6d53256c 100644 --- a/kmdc/kmdc-button/src/jsMain/kotlin/MDCButton.kt +++ b/kmdc/kmdc-button/src/jsMain/kotlin/MDCButton.kt @@ -1,16 +1,19 @@ package dev.petuska.kmdc.button import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider import dev.petuska.kmdc.core.* import dev.petuska.kmdc.elevation.MDCElevationOverlay -import dev.petuska.kmdc.ripple.MDCRipple +import dev.petuska.kmdc.ripple.MDCRippleLayout +import org.jetbrains.compose.web.dom.A import org.jetbrains.compose.web.dom.Button import org.jetbrains.compose.web.dom.ElementScope import org.jetbrains.compose.web.dom.Span import org.w3c.dom.Element +import org.w3c.dom.HTMLAnchorElement import org.w3c.dom.HTMLButtonElement -@JsModule("@material/button/styles.scss") +@JsModule("@material/button/mdc-button.scss") private external val Style: dynamic public enum class MDCButtonType(public vararg val classes: String) { @@ -23,10 +26,12 @@ public enum class MDCButtonIconType(public vararg val classes: String) { public interface MDCButtonScope : ElementScope +private val MDCButtonTypeLocal = strictCompositionLocalOf() + /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCButton( type: MDCButtonType = MDCButtonType.Text, @@ -35,7 +40,6 @@ public fun MDCButton( attrs: MDCAttrsRaw? = null, content: MDCContent>? = null ) { - Style Button( attrs = { classes("mdc-button") @@ -45,14 +49,16 @@ public fun MDCButton( attrs?.invoke(this) } ) { - MDCButtonContent(content) + CompositionLocalProvider(MDCButtonTypeLocal provides type) { + MDCButtonContent(content) + } } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCButton( text: String, @@ -72,9 +78,59 @@ internal fun > ElementScope.MDCButtonContent content: MDCContent? = null ) { Style + val type = MDCButtonTypeLocal.current MDCElevationOverlay() Span(attrs = { classes("mdc-button__ripple") }) Span(attrs = { classes("mdc-button__focus-ring") }) - MDCRipple() + MDCRippleLayout(keys = arrayOf(type)) applyContent(content) } + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-button) + */ +@MDCContentDsl +@Composable +public fun MDCButtonLink( + href: String? = null, + type: MDCButtonType = MDCButtonType.Text, + icon: MDCButtonIconType = MDCButtonIconType.None, + touch: Boolean = false, + attrs: MDCAttrsRaw? = null, + content: MDCContent>? = null +) { + A( + href = href, + attrs = { + classes("mdc-button") + classes(type.classes) + classes(icon.classes) + if (touch) classes("mdc-button--touch") + attrs?.invoke(this) + } + ) { + MDCButtonContent(content) + } +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-button) + */ +@MDCContentDsl +@Composable +public fun MDCButtonLink( + text: String, + href: String? = null, + type: MDCButtonType = MDCButtonType.Text, + icon: MDCButtonIconType = MDCButtonIconType.None, + touch: Boolean = false, + attrs: MDCAttrsRaw? = null, +) { + MDCButtonLink( + href = href, + type = type, + icon = icon, + touch = touch, + attrs = attrs + ) { Label(text) } +} diff --git a/kmdc/kmdc-button/src/jsMain/kotlin/MDCButtonLink.kt b/kmdc/kmdc-button/src/jsMain/kotlin/MDCButtonLink.kt deleted file mode 100644 index 5675cd05..00000000 --- a/kmdc/kmdc-button/src/jsMain/kotlin/MDCButtonLink.kt +++ /dev/null @@ -1,58 +0,0 @@ -package dev.petuska.kmdc.button - -import androidx.compose.runtime.Composable -import dev.petuska.kmdc.core.MDCContent -import dev.petuska.kmdc.core.MDCDsl -import dev.petuska.kmdc.core.classes -import org.jetbrains.compose.web.dom.A -import org.jetbrains.compose.web.dom.AttrBuilderContext -import org.w3c.dom.HTMLAnchorElement - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-button) - */ -@MDCDsl -@Composable -public fun MDCButtonLink( - href: String? = null, - type: MDCButtonType = MDCButtonType.Text, - icon: MDCButtonIconType = MDCButtonIconType.None, - touch: Boolean = false, - attrs: AttrBuilderContext? = null, - content: MDCContent>? = null -) { - A( - href = href, - attrs = { - classes("mdc-button") - classes(type.classes) - classes(icon.classes) - if (touch) classes("mdc-button--touch") - attrs?.invoke(this) - } - ) { - MDCButtonContent(content) - } -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-button) - */ -@MDCDsl -@Composable -public fun MDCButtonLink( - text: String, - href: String? = null, - type: MDCButtonType = MDCButtonType.Text, - icon: MDCButtonIconType = MDCButtonIconType.None, - touch: Boolean = false, - attrs: AttrBuilderContext? = null, -) { - MDCButtonLink( - href = href, - type = type, - icon = icon, - touch = touch, - attrs = attrs - ) { Label(text) } -} diff --git a/kmdc/kmdc-card/src/jsMain/kotlin/Actions.kt b/kmdc/kmdc-card/src/jsMain/kotlin/Actions.kt index 64a60371..2caccd34 100644 --- a/kmdc/kmdc-card/src/jsMain/kotlin/Actions.kt +++ b/kmdc/kmdc-card/src/jsMain/kotlin/Actions.kt @@ -4,7 +4,7 @@ import androidx.compose.runtime.Composable import dev.petuska.kmdc.button.* import dev.petuska.kmdc.core.MDCAttrsRaw import dev.petuska.kmdc.core.MDCContent -import dev.petuska.kmdc.core.MDCDsl +import dev.petuska.kmdc.core.MDCContentDsl import dev.petuska.kmdc.core.reinterpret import dev.petuska.kmdc.icon.button.MDCIconButton import dev.petuska.kmdc.icon.button.MDCIconButtonScope @@ -20,7 +20,7 @@ public interface MDCCardActionsScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardScope.Actions( fullBleed: Boolean = false, @@ -40,7 +40,7 @@ public fun MDCCardScope.Actions( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardActionsScope.ActionButtons( attrs: MDCAttrsRaw? = null, @@ -58,7 +58,7 @@ public fun MDCCardActionsScope.ActionButtons( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardActionsScope.ActionButton( type: MDCButtonType = MDCButtonType.Text, @@ -82,7 +82,7 @@ public fun MDCCardActionsScope.ActionButton( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardActionsScope.ActionButtonLink( href: String? = null, @@ -108,7 +108,7 @@ public fun MDCCardActionsScope.ActionButtonLink( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardActionsScope.ActionIcons( attrs: MDCAttrsRaw? = null, @@ -126,7 +126,7 @@ public fun MDCCardActionsScope.ActionIcons( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardActionsScope.ActionIconButton( on: Boolean = false, @@ -146,7 +146,7 @@ public fun MDCCardActionsScope.ActionIconButton( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardActionsScope.ActionIconLink( on: Boolean? = null, diff --git a/kmdc/kmdc-card/src/jsMain/kotlin/Content.kt b/kmdc/kmdc-card/src/jsMain/kotlin/Content.kt index e1d84b73..a739c0c1 100644 --- a/kmdc/kmdc-card/src/jsMain/kotlin/Content.kt +++ b/kmdc/kmdc-card/src/jsMain/kotlin/Content.kt @@ -2,15 +2,15 @@ package dev.petuska.kmdc.card import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl import dev.petuska.kmdc.core.MDCContentRaw -import dev.petuska.kmdc.core.MDCDsl import org.jetbrains.compose.web.dom.Div import org.w3c.dom.HTMLDivElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardScope.Content( attrs: MDCAttrsRaw? = null, diff --git a/kmdc/kmdc-card/src/jsMain/kotlin/MDCCard.kt b/kmdc/kmdc-card/src/jsMain/kotlin/MDCCard.kt index 4a62f8a4..00666578 100644 --- a/kmdc/kmdc-card/src/jsMain/kotlin/MDCCard.kt +++ b/kmdc/kmdc-card/src/jsMain/kotlin/MDCCard.kt @@ -1,11 +1,7 @@ package dev.petuska.kmdc.card import androidx.compose.runtime.Composable -import dev.petuska.kmdc.core.MDCContent -import dev.petuska.kmdc.core.MDCDsl -import dev.petuska.kmdc.core.classes -import dev.petuska.kmdc.core.reinterpret -import org.jetbrains.compose.web.dom.AttrBuilderContext +import dev.petuska.kmdc.core.* import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope import org.w3c.dom.HTMLDivElement @@ -23,11 +19,11 @@ public interface MDCCardScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCard( type: MDCCardType = MDCCardType.Elevated, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { Style diff --git a/kmdc/kmdc-card/src/jsMain/kotlin/Media.kt b/kmdc/kmdc-card/src/jsMain/kotlin/Media.kt index 1fcbab9a..8d6a211c 100644 --- a/kmdc/kmdc-card/src/jsMain/kotlin/Media.kt +++ b/kmdc/kmdc-card/src/jsMain/kotlin/Media.kt @@ -1,12 +1,7 @@ package dev.petuska.kmdc.card import androidx.compose.runtime.Composable -import dev.petuska.kmdc.core.MDCContent -import dev.petuska.kmdc.core.MDCDsl -import dev.petuska.kmdc.core.classes -import dev.petuska.kmdc.core.reinterpret -import org.jetbrains.compose.web.dom.AttrBuilderContext -import org.jetbrains.compose.web.dom.ContentBuilder +import dev.petuska.kmdc.core.* import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope import org.w3c.dom.HTMLDivElement @@ -22,11 +17,11 @@ public interface MDCCardMediaScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardScope.Media( type: MDCCardMediaType = MDCCardMediaType.Free, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { Div( @@ -42,11 +37,11 @@ public fun MDCCardScope.Media( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardMediaScope.MediaContent( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Div( attrs = { diff --git a/kmdc/kmdc-card/src/jsMain/kotlin/PrimaryAction.kt b/kmdc/kmdc-card/src/jsMain/kotlin/PrimaryAction.kt index 3643b8e9..c25f42bc 100644 --- a/kmdc/kmdc-card/src/jsMain/kotlin/PrimaryAction.kt +++ b/kmdc/kmdc-card/src/jsMain/kotlin/PrimaryAction.kt @@ -1,9 +1,10 @@ package dev.petuska.kmdc.card import androidx.compose.runtime.Composable -import dev.petuska.kmdc.core.MDCDsl -import org.jetbrains.compose.web.dom.AttrBuilderContext -import org.jetbrains.compose.web.dom.ContentBuilder +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContent +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.applyContent import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Span import org.w3c.dom.HTMLDivElement @@ -11,11 +12,11 @@ import org.w3c.dom.HTMLDivElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCardScope.PrimaryAction( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContent? = null ) { Div( attrs = { @@ -24,7 +25,7 @@ public fun MDCCardScope.PrimaryAction( attrs?.invoke(this) }, ) { - content?.invoke(this) + applyContent(content) Span(attrs = { classes("mdc-card__ripple") }) } } diff --git a/kmdc/kmdc-checkbox/src/jsMain/kotlin/MDCCheckbox.kt b/kmdc/kmdc-checkbox/src/jsMain/kotlin/MDCCheckbox.kt index a4e3f509..3b75ea7e 100644 --- a/kmdc/kmdc-checkbox/src/jsMain/kotlin/MDCCheckbox.kt +++ b/kmdc/kmdc-checkbox/src/jsMain/kotlin/MDCCheckbox.kt @@ -2,7 +2,7 @@ package dev.petuska.kmdc.checkbox import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.form.field.MDCFormFieldScope +import dev.petuska.kmdc.form.field.MDCFormField import org.jetbrains.compose.web.ExperimentalComposeWebSvgApi import org.jetbrains.compose.web.attributes.InputType import org.jetbrains.compose.web.attributes.builders.InputAttrsScope @@ -17,101 +17,86 @@ public external val Style: dynamic public interface MDCCheckboxScope : ElementScope -@MDCDsl -@Composable -public fun MDCCheckbox( - disabled: Boolean = false, - indeterminate: Boolean = false, - touch: Boolean = false, - attrs: MDCAttrsRaw? = null, - content: MDCContent? = null, -) { - Style - Div(attrs = { - classes("mdc-checkbox") - if (touch) classes("mdc-checkbox--touch") - applyAttrs(attrs) - }) { - MDCInitEffect(::MDCCheckbox) - MDCStateEffect(indeterminate, MDCCheckbox::indeterminate) - MDCStateEffect(disabled, MDCCheckbox::disabled) - applyContent(content) - } -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-checkbox) - */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCheckbox( checked: Boolean?, disabled: Boolean = false, + indeterminate: Boolean = false, touch: Boolean = false, label: String? = null, attrs: MDCAttrs>? = null, ) { val checkboxId = rememberUniqueDomElementId() - MDCCheckbox( - touch = touch, + MDCCheckboxLayoutFull( + id = checkboxId, + checked = checked == true, disabled = disabled, - indeterminate = checked == null, + touch = touch, + attrs = attrs, ) { - MDCCheckboxInput( - checked = checked, - disabled = disabled, - attrs = { - id(checkboxId) - applyAttrs(attrs) + val formField = localMDC() + MDCProvider(::MDCCheckbox) { + MDCSideEffectNew(formField, onDispose = { formField?.input = null }) { + formField?.input = this } - ) - MDCCheckboxBackground() - MDCCheckboxRipple() + MDCStateEffectNew(indeterminate, MDCCheckbox::indeterminate) + MDCStateEffectNew(disabled, MDCCheckbox::disabled) + it() + } } label?.let { Label(forId = checkboxId, attrs = { id("$checkboxId-label") }) { Text(it) } } } -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-checkbox) - */ -@MDCDsl @Composable -public fun MDCFormFieldScope.MDCCheckbox( - checked: Boolean?, - disabled: Boolean = false, +@KMDCInternalAPI +public fun MDCCheckboxLayoutFull( + id: String, + checked: Boolean = false, touch: Boolean = false, - label: String? = null, + disabled: Boolean = false, attrs: MDCAttrs>? = null, + init: MDCComponentInit = { it() }, ) { - val checkboxId = rememberUniqueDomElementId() - MDCCheckbox( + MDCCheckboxLayout( touch = touch, - disabled = disabled, - indeterminate = checked == null, ) { - MDCCheckboxInput( - checked = checked, - disabled = disabled, - attrs = { - ref { - it.mdc { setInput(it, this) } - onDispose { } + unsafeCast().init { + MDCCheckboxInput( + checked = checked, + disabled = disabled, + attrs = { + id(id) + applyAttrs(attrs) } - id(checkboxId) - applyAttrs(attrs) - } - ) - MDCCheckboxBackground() - MDCCheckboxRipple() - } - label?.let { - Label(forId = checkboxId, attrs = { id("$checkboxId-label") }) { Text(it) } + ) + MDCCheckboxBackground() + MDCCheckboxRipple() + } } } -@MDCDsl +@Composable +@KMDCInternalAPI +public fun MDCCheckboxLayout( + touch: Boolean = false, + attrs: MDCAttrsRaw? = null, + content: MDCContent? = null, +) { + Style + Div( + attrs = { + classes("mdc-checkbox") + if (touch) classes("mdc-checkbox--touch") + applyAttrs(attrs) + }, + content = content.reinterpret() + ) +} + +@MDCContentDsl @Composable public fun MDCCheckboxScope.MDCCheckboxInput( checked: Boolean?, @@ -130,7 +115,7 @@ public fun MDCCheckboxScope.MDCCheckboxInput( } @OptIn(ExperimentalComposeWebSvgApi::class) -@MDCDsl +@MDCContentDsl @Composable public fun MDCCheckboxScope.MDCCheckboxBackground( attrs: MDCAttrsRaw? = null, @@ -155,7 +140,7 @@ public fun MDCCheckboxScope.MDCCheckboxBackground( } } -@MDCDsl +@MDCContentDsl @Composable public fun MDCCheckboxScope.MDCCheckboxRipple( attrs: MDCAttrsRaw? = null diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/Chip.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/Chip.kt index bef0162b..792a5afd 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/Chip.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/Chip.kt @@ -1,9 +1,12 @@ package dev.petuska.kmdc.chips -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.compositionLocalOf import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import org.jetbrains.compose.web.dom.ElementScope +import org.jetbrains.compose.web.dom.Span +import org.w3c.dom.HTMLSpanElement public interface MDCChipScope : ElementScope @@ -12,7 +15,7 @@ internal val MDCChipDisabledLocal = compositionLocalOf { false } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable internal fun MDCChipsScope.Chip( id: String, @@ -20,20 +23,22 @@ internal fun MDCChipsScope.Chip( withPrimaryGraphic: Boolean, withPrimaryIcon: Boolean, touch: Boolean, - attrs: AttrsBuilder?, + attrs: MDCAttrsRaw?, content: MDCContent? ) { - Span(attrs = { - classes("mdc-evolution-chip") - if (disabled) classes("mdc-evolution-chip--disabled") - if (withPrimaryGraphic || withPrimaryIcon) classes("mdc-evolution-chip--with-primary-graphic") - if (withPrimaryIcon) classes("mdc-evolution-chip--with-primary-icon") - if (touch) classes("mdc-evolution-chip--touch") - id(id) - applyAttrs(attrs) - }, content = { - CompositionLocalProvider(MDCChipDisabledLocal provides disabled) { - applyContent(content) - } - }) + Span( + attrs = { + classes("mdc-evolution-chip") + if (disabled) classes("mdc-evolution-chip--disabled") + if (withPrimaryGraphic || withPrimaryIcon) classes("mdc-evolution-chip--with-primary-graphic") + if (withPrimaryIcon) classes("mdc-evolution-chip--with-primary-icon") + if (touch) classes("mdc-evolution-chip--touch") + id(id) + applyAttrs(attrs) + }, + ) { + CompositionLocalProvider(MDCChipDisabledLocal provides disabled) { + applyContent(content) + } + } } diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/MDCChips.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/MDCChips.kt index 5828e026..28062285 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/MDCChips.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/MDCChips.kt @@ -11,12 +11,13 @@ import org.w3c.dom.HTMLSpanElement private external val Style: dynamic public interface MDCChipsAttrsScope : AttrsScope + public interface MDCChipsScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable internal fun MDCChips( overflow: Boolean = false, @@ -24,17 +25,20 @@ internal fun MDCChips( content: MDCContent? = null ) { Style - Span(attrs = { - classes("mdc-evolution-chip-set") - if (overflow) classes("mdc-evolution-chip-set--overflow") - applyAttrs(attrs) - }, content = { - MDCInitEffect(::MDCChipSet) + Span( + attrs = { + classes("mdc-evolution-chip-set") + if (overflow) classes("mdc-evolution-chip-set--overflow") + applyAttrs(attrs) + }, + ) { + MDCProvider(::MDCChipSet) { Span( attrs = { classes("mdc-evolution-chip-set__chips") role("presentation") }, content = content.reinterpret() ) - }) + } + } } diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/events.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/_events.kt similarity index 100% rename from kmdc/kmdc-chips/src/jsMain/kotlin/events.kt rename to kmdc/kmdc-chips/src/jsMain/kotlin/_events.kt diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/action/Graphic.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/action/Graphic.kt index ad47f278..ec69f8cf 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/action/Graphic.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/action/Graphic.kt @@ -1,21 +1,22 @@ package dev.petuska.kmdc.chips.action -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.svg.* -import org.w3c.dom.* +import org.jetbrains.compose.web.ExperimentalComposeWebSvgApi +import org.jetbrains.compose.web.dom.Span +import org.jetbrains.compose.web.svg.Path +import org.jetbrains.compose.web.svg.Svg +import org.w3c.dom.HTMLSpanElement public interface MDCFilterChipGraphicScope : MDCChipActionIconScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCChipActionScope<*>.Graphic( - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { Span( @@ -31,33 +32,31 @@ public fun MDCChipActionScope<*>.Graphic( * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ @OptIn(ExperimentalComposeWebSvgApi::class) -@MDCDsl +@MDCContentDsl @Composable public fun MDCFilterChipGraphicScope.Checkmark( - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, ) { Span( attrs = { classes("mdc-evolution-chip__checkmark") applyAttrs(attrs) }, - content = { - Svg( - viewBox = "-2 -3 30 30", + ) { + Svg( + viewBox = "-2 -3 30 30", + attrs = { + classes("mdc-evolution-chip__checkmark-svg") + }, + ) { + Path( + d = "M1.73,12.91 8.1,19.28 22.79,4.59", attrs = { - classes("mdc-evolution-chip__checkmark-svg") - }, - content = { - Path( - d = "M1.73,12.91 8.1,19.28 22.79,4.59", - attrs = { - attr("fill", "none") - attr("stroke", "black") - classes("mdc-evolution-chip__checkmark-path") - } - ) + attr("fill", "none") + attr("stroke", "black") + classes("mdc-evolution-chip__checkmark-path") } ) } - ) + } } diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/action/Icon.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/action/Icon.kt index c1e206b3..5546c1b1 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/action/Icon.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/action/Icon.kt @@ -1,21 +1,23 @@ package dev.petuska.kmdc.chips.action -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.core.ContentBuilder -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import dev.petuska.kmdc.core.applyAttrs +import org.jetbrains.compose.web.dom.I +import org.w3c.dom.HTMLElement public interface MDCChipActionIconScope : MDCChipActionScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCChipActionIconScope<*>.Icon( - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { val type = MDCChipActionTypeLocal.current I( diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/action/Label.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/action/Label.kt index 51694212..404e1a65 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/action/Label.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/action/Label.kt @@ -1,20 +1,22 @@ package dev.petuska.kmdc.chips.action -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.core.ContentBuilder -import org.jetbrains.compose.web.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import dev.petuska.kmdc.core.applyAttrs +import org.jetbrains.compose.web.dom.Span import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLSpanElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCChipActionScope<*>.Label( - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Span( attrs = { @@ -28,11 +30,11 @@ public fun MDCChipActionScope<*>.Label( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCChipActionScope<*>.Label( text: String, - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, ) { Label(attrs) { Text(text) } } diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/action/Ripple.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/action/Ripple.kt index dbb8cf54..cb754a3d 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/action/Ripple.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/action/Ripple.kt @@ -4,7 +4,7 @@ import androidx.compose.runtime.* import dev.petuska.kmdc.core.* import org.jetbrains.compose.web.dom.* -@MDCDsl +@MDCContentDsl @Composable internal fun MDCChipActionScope<*>.Ripple() { val type = MDCChipActionTypeLocal.current diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/grid/ActionChip.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/grid/ActionChip.kt index 32159fbf..01d1be99 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/grid/ActionChip.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/grid/ActionChip.kt @@ -1,15 +1,17 @@ package dev.petuska.kmdc.chips.grid -import androidx.compose.runtime.* -import dev.petuska.kmdc.chips.* -import dev.petuska.kmdc.chips.action.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import dev.petuska.kmdc.chips.Chip +import dev.petuska.kmdc.chips.action.MDCChipActionScope +import dev.petuska.kmdc.chips.action.MDCChipActionTypeLocal import dev.petuska.kmdc.core.* -import org.w3c.dom.* +import org.w3c.dom.HTMLButtonElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCChipsGridScope.ActionChip( id: String, @@ -29,15 +31,14 @@ public fun MDCChipsGridScope.ActionChip( attrs = { role("row") }, - content = { - CompositionLocalProvider(MDCChipActionTypeLocal provides "primary") { - ChipCell( - attrs = { - applyAttrs(attrs) - }, - content = content, - ) - } + ) { + CompositionLocalProvider(MDCChipActionTypeLocal provides "primary") { + ChipCell( + attrs = { + applyAttrs(attrs) + }, + content = content, + ) } - ) + } } diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/grid/ChipCell.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/grid/ChipCell.kt index 75a1bff2..66a16540 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/grid/ChipCell.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/grid/ChipCell.kt @@ -1,19 +1,23 @@ package dev.petuska.kmdc.chips.grid -import androidx.compose.runtime.* -import dev.petuska.kmdc.chips.* -import dev.petuska.kmdc.chips.action.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.chips.MDCChipScope +import dev.petuska.kmdc.chips.action.MDCChipActionScope +import dev.petuska.kmdc.chips.action.MDCChipActionTypeLocal +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContent +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.role +import org.jetbrains.compose.web.dom.Span +import org.w3c.dom.HTMLButtonElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable internal fun MDCChipScope.ChipCell( - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent>? = null ) { val type = MDCChipActionTypeLocal.current @@ -22,8 +26,7 @@ internal fun MDCChipScope.ChipCell( classes("mdc-evolution-chip__cell", "mdc-evolution-chip__cell--$type") role("gridcell") }, - content = { - GridAction(attrs, content) - } - ) + ) { + GridAction(attrs, content) + } } diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/grid/GridAction.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/grid/GridAction.kt index 913c9ff8..3b21bb3b 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/grid/GridAction.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/grid/GridAction.kt @@ -1,18 +1,21 @@ package dev.petuska.kmdc.chips.grid -import androidx.compose.runtime.* -import dev.petuska.kmdc.chips.* -import dev.petuska.kmdc.chips.action.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.chips.MDCChipDisabledLocal +import dev.petuska.kmdc.chips.action.MDCChipActionScope +import dev.petuska.kmdc.chips.action.MDCChipActionTypeLocal +import dev.petuska.kmdc.chips.action.Ripple import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.core.AttrsBuilder -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import org.jetbrains.compose.web.attributes.ButtonType +import org.jetbrains.compose.web.attributes.disabled +import org.jetbrains.compose.web.attributes.type +import org.jetbrains.compose.web.dom.Button +import org.w3c.dom.HTMLButtonElement -@MDCDsl +@MDCContentDsl @Composable internal fun GridAction( - attrs: AttrsBuilder?, + attrs: MDCAttrsRaw?, content: MDCContent>? ) { val type = MDCChipActionTypeLocal.current @@ -24,8 +27,8 @@ internal fun GridAction( disabled() } applyAttrs(attrs) - }, content = { - unsafeCast>().Ripple() - applyContent(content) - }) + }) { + unsafeCast>().Ripple() + applyContent(content) + } } diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/grid/InputChip.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/grid/InputChip.kt index 2e0c3074..ebce6331 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/grid/InputChip.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/grid/InputChip.kt @@ -1,10 +1,16 @@ package dev.petuska.kmdc.chips.grid -import androidx.compose.runtime.* -import dev.petuska.kmdc.chips.* -import dev.petuska.kmdc.chips.action.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.compositionLocalOf +import dev.petuska.kmdc.chips.Chip +import dev.petuska.kmdc.chips.MDCChipScope +import dev.petuska.kmdc.chips.action.MDCChipActionIconScope +import dev.petuska.kmdc.chips.action.MDCChipActionScope +import dev.petuska.kmdc.chips.action.MDCChipActionTypeLocal import dev.petuska.kmdc.core.* -import org.w3c.dom.* +import org.w3c.dom.HTMLButtonElement +import org.w3c.dom.HTMLSpanElement public interface MDCInputChipScope : MDCChipScope @@ -13,7 +19,7 @@ private val NavigableTrailLocal = compositionLocalOf { true } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCChipsGridScope.InputChip( id: String, @@ -23,7 +29,7 @@ public fun MDCChipsGridScope.InputChip( touch: Boolean = false, withTrailingAction: Boolean = false, navigableTrailingAction: Boolean = true, - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { Chip( @@ -37,21 +43,20 @@ public fun MDCChipsGridScope.InputChip( if (withTrailingAction) classes("mdc-evolution-chip--with-trailing-action") applyAttrs(attrs) }, - content = { - CompositionLocalProvider(NavigableTrailLocal provides navigableTrailingAction) { - applyContent(content) - } + ) { + CompositionLocalProvider(NavigableTrailLocal provides navigableTrailingAction) { + applyContent(content) } - ) + } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCInputChipScope.PrimaryAction( - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent>? = null ) { val navigableTrail = NavigableTrailLocal.current @@ -71,10 +76,10 @@ public fun MDCInputChipScope.PrimaryAction( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCInputChipScope.TrailingAction( - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent>? = null ) { val navigableTrail = NavigableTrailLocal.current diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/grid/MDCChipsGrid.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/grid/MDCChipsGrid.kt index 68f0c7dd..b7364acf 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/grid/MDCChipsGrid.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/grid/MDCChipsGrid.kt @@ -9,7 +9,7 @@ public interface MDCChipsGridScope : MDCChipsScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCChipsGrid( overflow: Boolean = false, diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/listbox/FilterChip.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/listbox/FilterChip.kt index bb918580..2197ee24 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/listbox/FilterChip.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/listbox/FilterChip.kt @@ -1,18 +1,21 @@ package dev.petuska.kmdc.chips.listbox -import androidx.compose.runtime.* -import dev.petuska.kmdc.chips.* -import dev.petuska.kmdc.chips.action.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import dev.petuska.kmdc.chips.Chip +import dev.petuska.kmdc.chips.action.MDCChipActionScope +import dev.petuska.kmdc.chips.action.MDCChipActionTypeLocal +import dev.petuska.kmdc.chips.action.Ripple import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import org.jetbrains.compose.web.dom.Span +import org.w3c.dom.HTMLSpanElement public interface MDCFilterChipScope : MDCChipActionScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCChipsListboxScope.FilterChip( id: String, @@ -21,7 +24,7 @@ public fun MDCChipsListboxScope.FilterChip( withPrimaryGraphic: Boolean = false, withPrimaryIcon: Boolean = false, touch: Boolean = false, - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { CompositionLocalProvider(MDCChipActionTypeLocal provides "primary") { @@ -37,8 +40,9 @@ public fun MDCChipsListboxScope.FilterChip( if (selected) classes("mdc-evolution-chip--selected") role("presentation") }, - content = { - Span(attrs = { + ) { + Span( + attrs = { classes("mdc-evolution-chip__action", "mdc-evolution-chip__action--$type") role("option") aria("selected", selected) @@ -46,11 +50,11 @@ public fun MDCChipsListboxScope.FilterChip( aria("disabled", disabled) } applyAttrs(attrs) - }, content = { - unsafeCast().Ripple() - applyContent(content) - }) + } + ) { + unsafeCast().Ripple() + applyContent(content) } - ) + } } } diff --git a/kmdc/kmdc-chips/src/jsMain/kotlin/listbox/MDCChipsListbox.kt b/kmdc/kmdc-chips/src/jsMain/kotlin/listbox/MDCChipsListbox.kt index 78a6b0f2..c9bb7427 100644 --- a/kmdc/kmdc-chips/src/jsMain/kotlin/listbox/MDCChipsListbox.kt +++ b/kmdc/kmdc-chips/src/jsMain/kotlin/listbox/MDCChipsListbox.kt @@ -9,7 +9,7 @@ public interface MDCChipsListboxScope : MDCChipsScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCChipsListbox( overflow: Boolean = false, diff --git a/kmdc/kmdc-circular-progress/src/jsMain/kotlin/MDCCircularProgress.kt b/kmdc/kmdc-circular-progress/src/jsMain/kotlin/MDCCircularProgress.kt index 2dd9e5b6..404fcbac 100644 --- a/kmdc/kmdc-circular-progress/src/jsMain/kotlin/MDCCircularProgress.kt +++ b/kmdc/kmdc-circular-progress/src/jsMain/kotlin/MDCCircularProgress.kt @@ -6,19 +6,18 @@ import org.jetbrains.compose.web.ExperimentalComposeWebSvgApi import org.jetbrains.compose.web.css.height import org.jetbrains.compose.web.css.px import org.jetbrains.compose.web.css.width -import org.jetbrains.compose.web.dom.AttrBuilderContext import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.svg.Circle import org.jetbrains.compose.web.svg.Svg import org.w3c.dom.HTMLDivElement @JsModule("@material/circular-progress/mdc-circular-progress.scss") -private external val MDCCircularProgressCSS: dynamic +private external val Style: dynamic /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-circular-progress) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCCircularProgress( progress: Double = 0.0, @@ -27,9 +26,9 @@ public fun MDCCircularProgress( label: String? = null, size: Int = 48, fourColor: Boolean = false, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, ) { - MDCCircularProgressCSS + Style Div(attrs = { classes("mdc-circular-progress") role("progressbar") @@ -45,16 +44,18 @@ public fun MDCCircularProgress( } applyAttrs(attrs) }) { - MDCInitEffect(::MDCCircularProgress, size, fourColor) - MDCStateEffect(determinate, MDCCircularProgress::determinate) - MDCStateEffect(progress.coerceIn(0.0, 1.0), MDCCircularProgress::progress) - MDCCircularProgressDeterminateContainer(size) - MDCCircularProgressIndeterminateContainer(size, fourColor) + MDCProvider(::MDCCircularProgress, size, fourColor) { + MDCStateEffectNew(determinate, MDCCircularProgress::determinate) + MDCStateEffectNew(progress.coerceIn(0.0, 1.0), MDCCircularProgress::progress) + + MDCCircularProgressDeterminateContainer(size) + MDCCircularProgressIndeterminateContainer(size, fourColor) + } } } @OptIn(ExperimentalComposeWebSvgApi::class) -@MDCDsl +@MDCContentDsl @Composable private fun MDCCircularProgressDeterminateContainer(size: Int) { val cSize = size / 2 @@ -80,10 +81,10 @@ private fun MDCCircularProgressDeterminateContainer(size: Int) { } } -@MDCDsl +@MDCContentDsl @Composable private fun MDCCircularProgressIndeterminateContainer(size: Int, fourColor: Boolean) { - Div({ classes("mdc-circular-progress__indeterminate-container") }) { + Div(attrs = { classes("mdc-circular-progress__indeterminate-container") }) { if (fourColor) { repeat(4) { MDCCircularProgressSpinnerLayer(size, it + 1) @@ -94,7 +95,7 @@ private fun MDCCircularProgressIndeterminateContainer(size: Int, fourColor: Bool } } -@MDCDsl +@MDCContentDsl @Composable private fun MDCCircularProgressSpinnerLayer(size: Int, color: Int?) { val sSize1 = size / 12.0 @@ -115,7 +116,7 @@ private fun MDCCircularProgressSpinnerLayer(size: Int, color: Int?) { } } -@MDCDsl +@MDCContentDsl @Composable @OptIn(ExperimentalComposeWebSvgApi::class) private fun MDCCircularProgressIndeterminateGraphic(size: Int, sSize: Number) { diff --git a/kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTableBody.kt b/kmdc/kmdc-data-table/src/jsMain/kotlin/Body.kt similarity index 60% rename from kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTableBody.kt rename to kmdc/kmdc-data-table/src/jsMain/kotlin/Body.kt index acbf3627..a06fa16b 100644 --- a/kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTableBody.kt +++ b/kmdc/kmdc-data-table/src/jsMain/kotlin/Body.kt @@ -1,26 +1,27 @@ -@file:Suppress("NOTHING_TO_INLINE") - package dev.petuska.kmdc.data.table -import androidx.compose.runtime.* -import dev.petuska.kmdc.checkbox.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.checkbox.MDCCheckboxBackground +import dev.petuska.kmdc.checkbox.MDCCheckboxInput +import dev.petuska.kmdc.checkbox.MDCCheckboxLayout +import dev.petuska.kmdc.checkbox.MDCCheckboxRipple import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.core.AttrsBuilder -import dev.petuska.kmdc.core.ContentBuilder -import org.jetbrains.compose.web.attributes.* +import org.jetbrains.compose.web.attributes.Scope +import org.jetbrains.compose.web.attributes.scope import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLTableCellElement +import org.w3c.dom.HTMLTableRowElement +import org.w3c.dom.HTMLTableSectionElement -public sealed interface MDCDataTableBodyScope : ElementScope +public interface MDCDataTableBodyScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCDataTableContainerScope.MDCDataTableBody( - attrs: AttrsBuilder? = null, +public fun MDCDataTableContainerScope.Body( + attrs: MDCAttrsRaw? = null, content: MDCContent? = null, ) { Tbody( @@ -28,7 +29,7 @@ public fun MDCDataTableContainerScope.MDCDataTableBody( classes("mdc-data-table__content") applyAttrs(attrs) }, - content = content?.reinterpret() + content = content.reinterpret() ) } @@ -37,11 +38,11 @@ public sealed interface MDCDataTableRowScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCDataTableBodyScope.MDCDataTableRow( - attrs: AttrsBuilder? = null, +public fun MDCDataTableBodyScope.Row( selected: Boolean = false, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null, ) { Tr( @@ -58,12 +59,12 @@ public fun MDCDataTableBodyScope.MDCDataTableRow( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCDataTableRowScope.MDCDataTableCell( - attrs: AttrsBuilder? = null, +public fun MDCDataTableRowScope.Cell( numeric: Boolean = false, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { Td( attrs = { @@ -78,35 +79,37 @@ public fun MDCDataTableRowScope.MDCDataTableCell( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable -public inline fun MDCDataTableRowScope.MDCDataTableCell( +public fun MDCDataTableRowScope.Cell( text: String, numeric: Boolean = false, - noinline attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, ) { - MDCDataTableCell(attrs, numeric) { Text(text) } + Cell(numeric = numeric, attrs = attrs) { Text(text) } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCDataTableRowScope.MDCDataTableHeaderCell( - attrs: AttrsBuilder? = null, +public fun MDCDataTableRowScope.HeaderCell( numeric: Boolean = false, selected: Boolean? = null, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { val id = rememberUniqueDomElementId() if (selected != null) { - MDCDataTableCell(attrs = { + Cell(attrs = { classes("mdc-data-table__cell--checkbox") }) { - MDCCheckbox(attrs = { - classes("mdc-data-table__row-checkbox") - }) { + MDCCheckboxLayout( + attrs = { + classes("mdc-data-table__row-checkbox") + } + ) { MDCCheckboxInput(selected, attrs = { aria("labeledby", id) }) @@ -123,22 +126,22 @@ public fun MDCDataTableRowScope.MDCDataTableHeaderCell( if (selected != null) id(id) applyAttrs(attrs) }, - content = content?.reinterpret() + content = content.reinterpret() ) } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable -public inline fun MDCDataTableRowScope.MDCDataTableHeaderCell( +public fun MDCDataTableRowScope.HeaderCell( text: String, numeric: Boolean = false, selected: Boolean? = null, - noinline attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, ) { - MDCDataTableHeaderCell( + HeaderCell( attrs = attrs, numeric = numeric, selected = selected diff --git a/kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTableHeader.kt b/kmdc/kmdc-data-table/src/jsMain/kotlin/Header.kt similarity index 73% rename from kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTableHeader.kt rename to kmdc/kmdc-data-table/src/jsMain/kotlin/Header.kt index 70513bfa..ab66589f 100644 --- a/kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTableHeader.kt +++ b/kmdc/kmdc-data-table/src/jsMain/kotlin/Header.kt @@ -1,22 +1,26 @@ -@file:Suppress("NOTHING_TO_INLINE") - package dev.petuska.kmdc.data.table -import androidx.compose.runtime.* -import dev.petuska.kmdc.checkbox.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.checkbox.MDCCheckboxBackground +import dev.petuska.kmdc.checkbox.MDCCheckboxInput +import dev.petuska.kmdc.checkbox.MDCCheckboxLayout +import dev.petuska.kmdc.checkbox.MDCCheckboxRipple import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.icon.button.* -import org.jetbrains.compose.web.attributes.* +import dev.petuska.kmdc.icon.button.MDCIconButton +import dev.petuska.kmdc.icon.button.MDCIconButtonScope +import org.jetbrains.compose.web.attributes.Scope +import org.jetbrains.compose.web.attributes.scope import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLButtonElement +import org.w3c.dom.HTMLTableCellElement +import org.w3c.dom.HTMLTableRowElement -public sealed interface MDCDataTableHeaderScope : ElementScope +public interface MDCDataTableHeaderScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDataTableContainerScope.MDCDataTableHeader( attrs: MDCAttrsRaw? = null, @@ -36,9 +40,9 @@ public fun MDCDataTableContainerScope.MDCDataTableHeader( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCDataTableHeaderScope.MDCDataTableCell( +public fun MDCDataTableHeaderScope.Cell( numeric: Boolean = false, attrs: MDCAttrsRaw? = null, content: MDCContentRaw? = null, @@ -58,37 +62,39 @@ public fun MDCDataTableHeaderScope.MDCDataTableCell( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable -public inline fun MDCDataTableHeaderScope.MDCDataTableCell( +public fun MDCDataTableHeaderScope.Cell( text: String, numeric: Boolean = false, - noinline attrs: MDCAttrsRaw? = null, + attrs: MDCAttrsRaw? = null, ) { - MDCDataTableCell(numeric, attrs) { Text(text) } + Cell(numeric, attrs) { Text(text) } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable -public inline fun MDCDataTableHeaderScope.MDCDataTableCheckCell( +public fun MDCDataTableHeaderScope.MDCDataTableCheckCell( selected: Boolean?, numeric: Boolean = false, label: String? = null, - noinline attrs: MDCAttrsRaw? = null, + attrs: MDCAttrsRaw? = null, ) { - MDCDataTableCell( + Cell( numeric = numeric, attrs = { classes("mdc-data-table__header-cell--checkbox") applyAttrs(attrs) } ) { - MDCCheckbox(attrs = { - classes("mdc-data-table__header-row-checkbox") - }) { + MDCCheckboxLayout( + attrs = { + classes("mdc-data-table__header-row-checkbox") + } + ) { MDCCheckboxInput( checked = selected, attrs = { @@ -104,7 +110,7 @@ public inline fun MDCDataTableHeaderScope.MDCDataTableCheckCell( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDataTableHeaderScope.MDCDataTableSortCell( columnId: String, @@ -115,7 +121,7 @@ public fun MDCDataTableHeaderScope.MDCDataTableSortCell( buttonContent: MDCContent>? = null, ) { val id = rememberUniqueDomElementId() - MDCDataTableCell( + Cell( attrs = { classes("mdc-data-table__header-cell--with-sort") aria("sort", "none") diff --git a/kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTable.kt b/kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTable.kt index 85adee23..57c777a1 100644 --- a/kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTable.kt +++ b/kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTable.kt @@ -9,52 +9,35 @@ import org.jetbrains.compose.web.dom.Table import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLTableElement -@JsModule("@material/data-table/dist/mdc.data-table.css") -private external val MDCDataTableCSS: dynamic +@JsModule("@material/data-table/mdc-data-table.scss") +private external val Style: dynamic -public sealed interface MDCDataTableAttrsScope : AttrsScope -public sealed interface MDCDataTableScope : ElementScope +public interface MDCDataTableAttrsScope : AttrsScope +public interface MDCDataTableScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDataTable( + loading: Boolean = false, attrs: MDCAttrs? = null, content: MDCContent? = null, ) { - MDCDataTableCSS - Div( - attrs = { - classes("mdc-data-table") - applyAttrs(attrs) - }, - ) { - MDCSideEffect(effect = MDCDataTable::layout) - applyContent(content) - } -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) - */ -@MDCDsl -@Composable -public fun MDCDataTable( - loading: Boolean, - attrs: MDCAttrs? = null, - content: MDCContent? = null, -) { - MDCDataTable(attrs = { + Style + Div(attrs = { + classes("mdc-data-table") applyAttrs(attrs) }) { - MDCInitEffect(::MDCDataTable) - MDCSideEffect(loading) { - if (loading) showProgress() else hideProgress() + MDCProvider(::MDCDataTable) { + MDCSideEffectNew(effect = MDCDataTable::layout) + MDCSideEffectNew(loading) { + if (loading) showProgress() else hideProgress() + } + applyContent(content) + unsafeCast().ProgressIndicator() } - applyContent(content) - MDCDataTableProgressIndicator() } } @@ -63,10 +46,10 @@ public sealed interface MDCDataTableContainerScope : ElementScope? = null, +public fun MDCDataTableScope.Container( + attrs: MDCAttrsRaw? = null, content: MDCContent? = null, ) { Div( @@ -79,7 +62,7 @@ public fun MDCDataTableScope.MDCDataTableContainer( classes("mdc-data-table__table") applyAttrs(attrs) }, - content = content?.reinterpret() + content = content.reinterpret() ) } } diff --git a/kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTableProgressIndicator.kt b/kmdc/kmdc-data-table/src/jsMain/kotlin/ProgressIndicator.kt similarity index 52% rename from kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTableProgressIndicator.kt rename to kmdc/kmdc-data-table/src/jsMain/kotlin/ProgressIndicator.kt index 3a25e60c..ee050e27 100644 --- a/kmdc/kmdc-data-table/src/jsMain/kotlin/MDCDataTableProgressIndicator.kt +++ b/kmdc/kmdc-data-table/src/jsMain/kotlin/ProgressIndicator.kt @@ -1,20 +1,20 @@ -@file:Suppress("NOTHING_TO_INLINE") - package dev.petuska.kmdc.data.table -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.linear.progress.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.applyAttrs +import dev.petuska.kmdc.linear.progress.MDCLinearProgress +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLDivElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCDataTableScope.MDCDataTableProgressIndicator( - attrs: AttrsBuilder? = null, +public fun MDCDataTableScope.ProgressIndicator( + attrs: MDCAttrsRaw? = null, ) { Div( attrs = { @@ -28,7 +28,7 @@ public fun MDCDataTableScope.MDCDataTableProgressIndicator( } ) MDCLinearProgress( - opts = { determinate = false }, + determinate = false, attrs = { classes("mdc-data-table__linear-progress") }, diff --git a/kmdc/kmdc-data-table/src/jsMain/kotlin/events.kt b/kmdc/kmdc-data-table/src/jsMain/kotlin/_events.kt similarity index 100% rename from kmdc/kmdc-data-table/src/jsMain/kotlin/events.kt rename to kmdc/kmdc-data-table/src/jsMain/kotlin/_events.kt diff --git a/kmdc/kmdc-dialog/src/jsMain/kotlin/Actions.kt b/kmdc/kmdc-dialog/src/jsMain/kotlin/Actions.kt index 2e81e9a4..c4e840fe 100644 --- a/kmdc/kmdc-dialog/src/jsMain/kotlin/Actions.kt +++ b/kmdc/kmdc-dialog/src/jsMain/kotlin/Actions.kt @@ -17,7 +17,7 @@ public interface MDCDialogActionsScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-dialog) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDialogScope.Actions( attrs: MDCAttrsRaw? = null, @@ -35,7 +35,7 @@ public fun MDCDialogScope.Actions( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-dialog) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDialogActionsScope.Action( action: String, @@ -54,7 +54,7 @@ public fun MDCDialogActionsScope.Action( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-dialog) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDialogActionsScope.Action( action: String, @@ -71,7 +71,7 @@ public fun MDCDialogActionsScope.Action( } } -@MDCDsl +@MDCContentDsl @Composable internal fun ActionImpl( action: String, diff --git a/kmdc/kmdc-dialog/src/jsMain/kotlin/Content.kt b/kmdc/kmdc-dialog/src/jsMain/kotlin/Content.kt index a43dd9f5..92327157 100644 --- a/kmdc/kmdc-dialog/src/jsMain/kotlin/Content.kt +++ b/kmdc/kmdc-dialog/src/jsMain/kotlin/Content.kt @@ -11,7 +11,7 @@ public interface MDCDialogContentScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-dialog) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDialogScope.Content( attrs: MDCAttrsRaw? = null, diff --git a/kmdc/kmdc-dialog/src/jsMain/kotlin/Header.kt b/kmdc/kmdc-dialog/src/jsMain/kotlin/Header.kt index 059c3a5e..e3420379 100644 --- a/kmdc/kmdc-dialog/src/jsMain/kotlin/Header.kt +++ b/kmdc/kmdc-dialog/src/jsMain/kotlin/Header.kt @@ -12,7 +12,7 @@ public interface MDCDialogHeaderScope : ElementScope, MDCDialogT /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-dialog) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDialogScope.Header( attrs: MDCAttrsRaw? = null, @@ -31,7 +31,7 @@ public fun MDCDialogScope.Header( * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-dialog) */ @Suppress("unused") -@MDCDsl +@MDCContentDsl @Composable public fun MDCDialogHeaderScope.CloseButton( attrs: MDCAttrsRaw? = null, @@ -51,7 +51,7 @@ public fun MDCDialogHeaderScope.CloseButton( * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-dialog) */ @Suppress("unused") -@MDCDsl +@MDCContentDsl @Composable public fun MDCDialogHeaderScope.CloseButton( text: String, diff --git a/kmdc/kmdc-dialog/src/jsMain/kotlin/MDCDialog.kt b/kmdc/kmdc-dialog/src/jsMain/kotlin/MDCDialog.kt index 91eb91d7..ab43066f 100644 --- a/kmdc/kmdc-dialog/src/jsMain/kotlin/MDCDialog.kt +++ b/kmdc/kmdc-dialog/src/jsMain/kotlin/MDCDialog.kt @@ -20,7 +20,7 @@ internal val OpenLocal = strictCompositionLocalOf() /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-dialog) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDialog( open: Boolean, diff --git a/kmdc/kmdc-dialog/src/jsMain/kotlin/Title.kt b/kmdc/kmdc-dialog/src/jsMain/kotlin/Title.kt index 83552f30..5f088326 100644 --- a/kmdc/kmdc-dialog/src/jsMain/kotlin/Title.kt +++ b/kmdc/kmdc-dialog/src/jsMain/kotlin/Title.kt @@ -11,7 +11,7 @@ public interface MDCDialogTitleScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-dialog) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDialogTitleScope<*>.Title( attrs: MDCAttrsRaw? = null, @@ -31,7 +31,7 @@ public fun MDCDialogTitleScope<*>.Title( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-dialog) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDialogTitleScope<*>.Title( title: String, diff --git a/kmdc/kmdc-dialog/src/jsMain/kotlin/events.kt b/kmdc/kmdc-dialog/src/jsMain/kotlin/_events.kt similarity index 100% rename from kmdc/kmdc-dialog/src/jsMain/kotlin/events.kt rename to kmdc/kmdc-dialog/src/jsMain/kotlin/_events.kt diff --git a/kmdc/kmdc-dialog/src/jsMain/kotlin/_module.kt b/kmdc/kmdc-dialog/src/jsMain/kotlin/_module.kt index 5530673e..5467b20c 100644 --- a/kmdc/kmdc-dialog/src/jsMain/kotlin/_module.kt +++ b/kmdc/kmdc-dialog/src/jsMain/kotlin/_module.kt @@ -4,16 +4,17 @@ package dev.petuska.kmdc.dialog import dev.petuska.kmdc.core.MDCComponent import dev.petuska.kmdc.core.MDCExternalAPI +import dev.petuska.kmdc.core.MDCLayoutComponent import org.w3c.dom.Element @MDCExternalAPI -public external class MDCDialog(element: Element) : MDCComponent { +public external class MDCDialog(element: Element) : MDCComponent, MDCLayoutComponent { public val isOpen: Boolean public var escapeKeyAction: String public var scrimClickAction: String public var autoStackButtons: Boolean - public fun layout() + public override fun layout() public fun open() public fun close(action: String = definedExternally) } diff --git a/kmdc/kmdc-drawer/src/jsMain/kotlin/Content.kt b/kmdc/kmdc-drawer/src/jsMain/kotlin/Content.kt new file mode 100644 index 00000000..748c73c4 --- /dev/null +++ b/kmdc/kmdc-drawer/src/jsMain/kotlin/Content.kt @@ -0,0 +1,26 @@ +package dev.petuska.kmdc.drawer + +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLDivElement + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) + */ +@MDCContentDsl +@Composable +public fun MDCDrawerScope.Content( + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null +) { + Div( + attrs = { + classes("mdc-drawer__content") + attrs?.invoke(this) + }, + content = content, + ) +} diff --git a/kmdc/kmdc-drawer/src/jsMain/kotlin/Header.kt b/kmdc/kmdc-drawer/src/jsMain/kotlin/Header.kt new file mode 100644 index 00000000..f91273c4 --- /dev/null +++ b/kmdc/kmdc-drawer/src/jsMain/kotlin/Header.kt @@ -0,0 +1,83 @@ +package dev.petuska.kmdc.drawer + +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.* +import org.jetbrains.compose.web.dom.* +import org.w3c.dom.HTMLDivElement +import org.w3c.dom.HTMLHeadingElement + +public interface MDCDrawerHeaderScope : ElementScope + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) + */ +@MDCContentDsl +@Composable +public fun MDCDrawerScope.Header( + attrs: MDCAttrsRaw? = null, + content: MDCContent? = null, +) { + Div( + attrs = { + classes("mdc-drawer__header") + attrs?.invoke(this) + }, + content = content.reinterpret(), + ) +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) + */ +@MDCContentDsl +@Composable +public fun MDCDrawerHeaderScope.Title( + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null +) { + H3( + attrs = { + classes("mdc-drawer__title") + attrs?.invoke(this) + }, + content = content, + ) +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) + */ +@MDCContentDsl +@Composable +public fun MDCDrawerHeaderScope.Title( + text: String, + attrs: MDCAttrsRaw? = null, +): Unit = Title(attrs) { Text(text) } + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) + */ +@MDCContentDsl +@Composable +public fun MDCDrawerHeaderScope.Subtitle( + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null +) { + H6( + attrs = { + classes("mdc-drawer__subtitle") + attrs?.invoke(this) + }, + content = content, + ) +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) + */ +@MDCContentDsl +@Composable +public fun MDCDrawerHeaderScope.Subtitle( + text: String, + attrs: MDCAttrsRaw? = null, +): Unit = Subtitle(attrs) { Text(text) } diff --git a/kmdc/kmdc-drawer/src/jsMain/kotlin/MDCDrawer.kt b/kmdc/kmdc-drawer/src/jsMain/kotlin/MDCDrawer.kt index 471b54a5..d3bbcb45 100644 --- a/kmdc/kmdc-drawer/src/jsMain/kotlin/MDCDrawer.kt +++ b/kmdc/kmdc-drawer/src/jsMain/kotlin/MDCDrawer.kt @@ -1,73 +1,62 @@ package dev.petuska.kmdc.drawer -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.Aside -import org.jetbrains.compose.web.dom.AttrBuilderContext -import org.jetbrains.compose.web.dom.ContentBuilder import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLElement -@JsModule("@material/drawer/dist/mdc.drawer.css") -private external val MDCDrawerCSS: dynamic +@JsModule("@material/drawer/mdc-drawer.scss") +private external val Style: dynamic -public data class MDCDrawerOpts( - var type: Type = Type.Dismissible, - var state: State = State.Closed, - var isOpen: Boolean = false, -) { - public enum class Type(public vararg val classes: String) { - Dismissible("mdc-drawer--dismissible"), - Modal("mdc-drawer--modal"), - } - - public enum class State(public vararg val classes: String) { - Closed, - Open("mdc-drawer--open"), - Opening("mdc-drawer--opening"), - Closing("mdc-drawer--closing"), - } +public enum class MDCDrawerType(public vararg val classes: String) { + Dismissible("mdc-drawer--dismissible"), + Modal("mdc-drawer--modal"), } -public class MDCDrawerScope(scope: ElementScope) : ElementScope by scope +public interface MDCDrawerAttrsScope : AttrsScope +public interface MDCDrawerScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCDrawer( - opts: MDCAttrs? = null, - attrs: AttrBuilderContext? = null, + open: Boolean, + type: MDCDrawerType = MDCDrawerType.Dismissible, + attrs: MDCAttrs? = null, content: MDCContent? = null ) { - MDCDrawerCSS - val options = MDCDrawerOpts().apply { opts?.invoke(this) } + Style Aside( attrs = { classes("mdc-drawer") - classes(options.type.classes) - classes(options.state.classes) - attrs?.invoke(this) + classes(type.classes) + applyAttrs(attrs) }, ) { - MDCInitEffect(::MDCDrawer) - MDCStateEffect(options.isOpen, MDCDrawer::open) - content?.let { MDCDrawerScope(this).it() } + MDCProvider(::MDCDrawer, type) { + MDCStateEffectNew(open, MDCDrawer::open) + applyContent(content) + } + } + if (type == MDCDrawerType.Modal) { + MDCDrawerScrim() } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) */ -@MDCDsl @Composable -public fun MDCDrawerScrim( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null +@MDCContentDsl +private fun MDCDrawerScrim( + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Div( attrs = { @@ -81,7 +70,17 @@ public fun MDCDrawerScrim( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) */ -@MDCAttrsDsl -public fun AttrsScope<*>.mdcDrawerAppContent() { - classes("mdc-drawer-app-content") +@MDCContentDsl +@Composable +public fun MDCDrawerAppContent( + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, +) { + Div( + attrs = { + classes("mdc-drawer-app-content") + applyAttrs(attrs) + }, + content = content + ) } diff --git a/kmdc/kmdc-drawer/src/jsMain/kotlin/MDCDrawerContent.kt b/kmdc/kmdc-drawer/src/jsMain/kotlin/MDCDrawerContent.kt deleted file mode 100644 index fa2c8012..00000000 --- a/kmdc/kmdc-drawer/src/jsMain/kotlin/MDCDrawerContent.kt +++ /dev/null @@ -1,25 +0,0 @@ -package dev.petuska.kmdc.drawer - -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder -import org.w3c.dom.* - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) - */ -@MDCDsl -@Composable -public fun MDCDrawerScope.MDCDrawerContent( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null -) { - Div( - attrs = { - classes("mdc-drawer__content") - attrs?.invoke(this) - }, - content = content, - ) -} diff --git a/kmdc/kmdc-drawer/src/jsMain/kotlin/MDCDrawerHeader.kt b/kmdc/kmdc-drawer/src/jsMain/kotlin/MDCDrawerHeader.kt deleted file mode 100644 index b80b6f5c..00000000 --- a/kmdc/kmdc-drawer/src/jsMain/kotlin/MDCDrawerHeader.kt +++ /dev/null @@ -1,94 +0,0 @@ -package dev.petuska.kmdc.drawer - -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder -import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* - -public class MDCDrawerHeaderScope(scope: ElementScope) : ElementScope by scope - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) - */ -@MDCDsl -@Composable -public fun MDCDrawerScope.MDCDrawerHeader( - attrs: AttrBuilderContext? = null, - content: MDCContent? = null, -) { - Div( - attrs = { - classes("mdc-drawer__header") - attrs?.invoke(this) - }, - content = content?.let { { MDCDrawerHeaderScope(this).it() } }, - ) -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) - */ -@MDCDsl -@Composable -public fun MDCDrawerScope.MDCDrawerHeader( - text: String, - attrs: AttrBuilderContext? = null, -): Unit = MDCDrawerHeader(attrs) { Text(text) } - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) - */ -@MDCDsl -@Composable -public fun MDCDrawerScope.MDCDrawerTitle( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null -) { - H3( - attrs = { - classes("mdc-drawer__title") - attrs?.invoke(this) - }, - content = content, - ) -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) - */ -@MDCDsl -@Composable -public fun MDCDrawerScope.MDCDrawerTitle( - text: String, - attrs: AttrBuilderContext? = null, -): Unit = MDCDrawerTitle(attrs) { Text(text) } - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) - */ -@MDCDsl -@Composable -public fun MDCDrawerScope.MDCDrawerSubtitle( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null -) { - H6( - attrs = { - classes("mdc-drawer__subtitle") - attrs?.invoke(this) - }, - content = content, - ) -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) - */ -@MDCDsl -@Composable -public fun MDCDrawerScope.MDCDrawerSubtitle( - text: String, - attrs: AttrBuilderContext? = null, -): Unit = MDCDrawerSubtitle(attrs) { Text(text) } diff --git a/kmdc/kmdc-drawer/src/jsMain/kotlin/_events.kt b/kmdc/kmdc-drawer/src/jsMain/kotlin/_events.kt new file mode 100644 index 00000000..59f1651b --- /dev/null +++ b/kmdc/kmdc-drawer/src/jsMain/kotlin/_events.kt @@ -0,0 +1,22 @@ +package dev.petuska.kmdc.drawer + +import dev.petuska.kmdc.core.MDCAttrsDsl +import dev.petuska.kmdc.core.MDCEventListener +import dev.petuska.kmdc.core.addMdcEventListener +import kotlin.js.Json + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) + */ +@MDCAttrsDsl +public fun MDCDrawerAttrsScope.onOpened(listener: MDCEventListener) { + addMdcEventListener("MDCDrawer:opened", listener) +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-drawer) + */ +@MDCAttrsDsl +public fun MDCDrawerAttrsScope.onClosed(listener: MDCEventListener) { + addMdcEventListener("MDCDrawer:closed", listener) +} diff --git a/kmdc/kmdc-elevation/src/jsMain/kotlin/Elevation.kt b/kmdc/kmdc-elevation/src/jsMain/kotlin/MDCElevation.kt similarity index 54% rename from kmdc/kmdc-elevation/src/jsMain/kotlin/Elevation.kt rename to kmdc/kmdc-elevation/src/jsMain/kotlin/MDCElevation.kt index 4fe571f9..2c50a642 100644 --- a/kmdc/kmdc-elevation/src/jsMain/kotlin/Elevation.kt +++ b/kmdc/kmdc-elevation/src/jsMain/kotlin/MDCElevation.kt @@ -1,25 +1,27 @@ package dev.petuska.kmdc.elevation -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.core.ContentBuilder -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import dev.petuska.kmdc.core.applyAttrs +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLDivElement @JsModule("@material/elevation/mdc-elevation.scss") -private external val Styles: dynamic +private external val Style: dynamic /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-elevation) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCElevation( z: Int, - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { - Styles + Style Div( attrs = { classes("mdc-elevation--z$z") @@ -32,13 +34,13 @@ public fun MDCElevation( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-elevation) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCElevationOverlay( - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { - Styles + Style Div( attrs = { classes("mdc-elevation-overlay") diff --git a/kmdc/kmdc-fab/src/jsMain/kotlin/MDCFab.kt b/kmdc/kmdc-fab/src/jsMain/kotlin/MDCFab.kt index 77a240ae..e3c46b77 100644 --- a/kmdc/kmdc-fab/src/jsMain/kotlin/MDCFab.kt +++ b/kmdc/kmdc-fab/src/jsMain/kotlin/MDCFab.kt @@ -1,15 +1,14 @@ package dev.petuska.kmdc.fab -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.core.ContentBuilder -import dev.petuska.kmdc.ripple.* +import dev.petuska.kmdc.ripple.MDCRippleLayout import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLButtonElement +import org.w3c.dom.HTMLSpanElement @JsModule("@material/fab/mdc-fab.scss") -private external val MDCFabStyles: dynamic +private external val Style: dynamic public enum class MDCFabType(public vararg val classes: String) { Regular, Mini("mdc-fab--mini"), Extended("mdc-fab--extended") @@ -20,16 +19,16 @@ public interface MDCFabScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-fab) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCFab( type: MDCFabType = MDCFabType.Regular, exited: Boolean = false, touch: Boolean = false, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { - MDCFabStyles + Style Button( attrs = { classes("mdc-fab") @@ -40,7 +39,7 @@ public fun MDCFab( } ) { Div(attrs = { classes("mdc-fab__ripple") }) - MDCRipple() + MDCRippleLayout(keys = arrayOf(type, touch)) applyContent(content) if (touch) Div(attrs = { classes("mdc-fab__touch") }) } @@ -49,11 +48,11 @@ public fun MDCFab( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-fab) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCFabScope.Icon( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Span( attrs = { @@ -67,11 +66,11 @@ public fun MDCFabScope.Icon( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-fab) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCFabScope.Label( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Span( attrs = { @@ -85,11 +84,11 @@ public fun MDCFabScope.Label( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-fab) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCFabScope.Label( text: String, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, ) { Label( attrs = attrs, diff --git a/kmdc/kmdc-floating-label/build.gradle.kts b/kmdc/kmdc-floating-label/build.gradle.kts index 7952719a..2513c754 100644 --- a/kmdc/kmdc-floating-label/build.gradle.kts +++ b/kmdc/kmdc-floating-label/build.gradle.kts @@ -4,8 +4,4 @@ plugins { kmdc { mdc by "floating-label" - dependencies { - main { - } - } } diff --git a/kmdc/kmdc-floating-label/src/jsMain/kotlin/MDCFloatingLabel.kt b/kmdc/kmdc-floating-label/src/jsMain/kotlin/MDCFloatingLabel.kt index 22633e2d..c09f05d1 100644 --- a/kmdc/kmdc-floating-label/src/jsMain/kotlin/MDCFloatingLabel.kt +++ b/kmdc/kmdc-floating-label/src/jsMain/kotlin/MDCFloatingLabel.kt @@ -2,29 +2,17 @@ package dev.petuska.kmdc.floating.label import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.ElementScope import org.jetbrains.compose.web.dom.Span import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.HTMLButtonElement import org.w3c.dom.HTMLSpanElement @JsModule("@material/floating-label/mdc-floating-label.scss") private external val Style: dynamic -public enum class MDCButtonType(public vararg val classes: String) { - Text, Outlined("mdc-button--outlined"), Raised("mdc-button--raised"), Unelevated("mdc-button--unelevated") -} - -public enum class MDCButtonIconType(public vararg val classes: String) { - None, Leading("mdc-button--icon-leading"), Trailing("mdc-button--icon-trailing") -} - -public interface MDCButtonScope : ElementScope - /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-floating-label) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCFloatingLabel( id: String, @@ -50,7 +38,7 @@ public fun MDCFloatingLabel( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-floating-label) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCFloatingLabel( text: String, @@ -73,11 +61,11 @@ public fun MDCFloatingLabel( @KMDCInternalAPI public fun MDCFloatingLabelLayout( id: String, - float: Boolean, - required: Boolean, - shake: Boolean, - attrs: MDCAttrsRaw?, - content: MDCContentRaw?, + float: Boolean = false, + required: Boolean = false, + shake: Boolean = false, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { Style Span( diff --git a/kmdc/kmdc-form-field/src/jsMain/kotlin/MDCFormField.kt b/kmdc/kmdc-form-field/src/jsMain/kotlin/MDCFormField.kt index 32057c64..62627a59 100644 --- a/kmdc/kmdc-form-field/src/jsMain/kotlin/MDCFormField.kt +++ b/kmdc/kmdc-form-field/src/jsMain/kotlin/MDCFormField.kt @@ -1,60 +1,42 @@ package dev.petuska.kmdc.form.field import androidx.compose.runtime.Composable -import androidx.compose.runtime.DisposableEffectScope import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope -import org.w3c.dom.Element import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLElement -@JsModule("@material/form-field/dist/mdc.form-field.css") -public external val MDCFormFieldStyle: dynamic +@JsModule("@material/form-field/mdc-form-field.scss") +public external val Style: dynamic -public data class MDCFormFieldOpts( - public var align: Align = Align.Start, - public var nowrap: Boolean = false, -) { - public enum class Align(public vararg val classes: String) { - Start, End("mdc-form-field--align-end") - } +public enum class MDCFormFieldAlign(public vararg val classes: String) { + Start, End("mdc-form-field--align-end") } -public class MDCFormFieldScope(scope: ElementScope) : ElementScope by scope { - @KMDCInternalAPI - public fun DisposableEffectScope.setInput(htmlInput: Element, mdcInput: MDCFormFieldInput) { - htmlInput.parentElement?.let { - if (it.classList.contains("mdc-form-field")) { - it.mdc { input = mdcInput } - } else { - setInput(it, mdcInput) - } - } - } -} +public interface MDCFormFieldScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-form-field) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCFormField( - opts: MDCAttrs? = null, - attrs: MDCAttrs>? = null, + align: MDCFormFieldAlign = MDCFormFieldAlign.Start, + noWrap: Boolean = false, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null, ) { - MDCFormFieldStyle - val options = MDCFormFieldOpts().apply { opts?.invoke(this) } + Style Div(attrs = { classes("mdc-form-field") - classes(options.align.classes) - if (options.nowrap) classes("mdc-form-field--nowrap") - attrs?.invoke(this) + classes(align.classes) + if (noWrap) classes("mdc-form-field--nowrap") + applyAttrs(attrs) }) { - MDCInitEffect(::MDCFormField) - content?.let { MDCFormFieldScope(this).it() } + MDCProvider(::MDCFormField) { + applyContent(content) + } } } diff --git a/kmdc/kmdc-form-field/src/jsMain/kotlin/_module.kt b/kmdc/kmdc-form-field/src/jsMain/kotlin/_module.kt index f93078fe..5607bfe2 100644 --- a/kmdc/kmdc-form-field/src/jsMain/kotlin/_module.kt +++ b/kmdc/kmdc-form-field/src/jsMain/kotlin/_module.kt @@ -9,9 +9,10 @@ import org.w3c.dom.Element @MDCExternalAPI public external class MDCFormField(element: Element) : MDCComponent { - public var input: MDCFormFieldInput + public var input: MDCFormFieldInput? } +@MDCExternalAPI public external interface MDCFormFieldInput { public val ripple: MDCRipple? } diff --git a/kmdc/kmdc-icon-button/src/jsMain/kotlin/Icon.kt b/kmdc/kmdc-icon-button/src/jsMain/kotlin/Icon.kt index 680459f4..782818b8 100644 --- a/kmdc/kmdc-icon-button/src/jsMain/kotlin/Icon.kt +++ b/kmdc/kmdc-icon-button/src/jsMain/kotlin/Icon.kt @@ -1,20 +1,23 @@ package dev.petuska.kmdc.icon.button -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.svg.* -import org.w3c.dom.* -import org.w3c.dom.svg.* +import org.jetbrains.compose.web.ExperimentalComposeWebSvgApi +import org.jetbrains.compose.web.dom.I +import org.jetbrains.compose.web.dom.Img +import org.jetbrains.compose.web.svg.Svg +import org.w3c.dom.Element +import org.w3c.dom.HTMLElement +import org.w3c.dom.HTMLImageElement +import org.w3c.dom.svg.SVGElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-icon-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCIconButtonScope<*>.Icon( - on: Boolean? = null, + on: Boolean, attrs: MDCAttrsRaw? = null, content: MDCContentRaw? = null, ) { @@ -25,11 +28,11 @@ public fun MDCIconButtonScope<*>.Icon( * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-icon-button) */ @OptIn(ExperimentalComposeWebSvgApi::class) -@MDCDsl +@MDCContentDsl @Composable public fun MDCIconButtonScope<*>.SvgIcon( viewBox: String, - on: Boolean? = null, + on: Boolean, attrs: MDCAttrsRaw? = null, content: MDCContentRaw? = null, ) { @@ -39,21 +42,21 @@ public fun MDCIconButtonScope<*>.SvgIcon( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-icon-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCIconButtonScope<*>.ImgIcon( src: String, alt: String = "", - on: Boolean? = null, + on: Boolean, attrs: MDCAttrsRaw? = null, ) { Img(src = src, alt = alt, attrs = attrs.build(on)) } private fun MDCAttrsRaw?.build( - on: Boolean?, + on: Boolean, ): AttrsBuilder = { classes("mdc-icon-button__icon") - if (on == true) classes("mdc-icon-button__icon--on") + if (on) classes("mdc-icon-button__icon--on") applyAttrs(this@build) } diff --git a/kmdc/kmdc-icon-button/src/jsMain/kotlin/MDCIconButton.kt b/kmdc/kmdc-icon-button/src/jsMain/kotlin/MDCIconButton.kt index b1fdda45..6f05e8ca 100644 --- a/kmdc/kmdc-icon-button/src/jsMain/kotlin/MDCIconButton.kt +++ b/kmdc/kmdc-icon-button/src/jsMain/kotlin/MDCIconButton.kt @@ -1,72 +1,80 @@ package dev.petuska.kmdc.icon.button -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.ripple.* -import org.jetbrains.compose.web.attributes.* +import dev.petuska.kmdc.ripple.MDCRippleLayout +import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import org.w3c.dom.HTMLAnchorElement +import org.w3c.dom.HTMLButtonElement +import org.w3c.dom.HTMLElement @JsModule("@material/icon-button/mdc-icon-button.scss") private external val Style: dynamic +public interface MDCIconButtonAttrsScope : AttrsScope public interface MDCIconButtonScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-icon-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCIconButton( - on: Boolean = false, - attrs: MDCAttrsRaw? = null, + on: Boolean? = null, + touch: Boolean = false, + attrs: MDCAttrs>? = null, content: MDCContent>? = null ) { Button(attrs = { attrs(on, attrs) }) { - Content(on, content) + Content(on = on, touch = touch, content = content) } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-icon-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCIconLink( on: Boolean? = null, - attrs: MDCAttrsRaw? = null, + touch: Boolean = false, + attrs: MDCAttrs>? = null, content: MDCContent>? = null ) { A(attrs = { attrs(on == true, attrs) }) { - Content(on, content) + Content(on = on, touch = touch, content = content) } } private fun AttrsScope.attrs( - on: Boolean, - attrs: MDCAttrsRaw? = null, + on: Boolean?, + attrs: MDCAttrs>? = null, ) { classes("mdc-icon-button") - if (on) classes("mdc-icon-button--on") + if (on == true) classes("mdc-icon-button--on") applyAttrs(attrs) } @Composable private fun ElementScope.Content( on: Boolean?, + touch: Boolean, content: MDCContent>? = null, ) { Style val render = @Composable { - Span(attrs = { classes("mdc-icon-button__ripple") }) + Div(attrs = { classes("mdc-icon-button__ripple") }) + Span(attrs = { classes("mdc-icon-button__focus-ring") }) applyContent(content) + if (touch) Div(attrs = { classes("mdc-icon-button__touch") }) } if (on == null) { - MDCRipple(unbounded = true) + MDCRippleLayout(unbounded = true) render() } else { MDCProvider(::MDCIconButtonToggle) { - MDCStateEffect(on, MDCIconButtonToggle::on) + MDCStateEffectNew(on, MDCIconButtonToggle::on) render() } } diff --git a/kmdc/kmdc-icon-button/src/jsMain/kotlin/_events.kt b/kmdc/kmdc-icon-button/src/jsMain/kotlin/_events.kt new file mode 100644 index 00000000..d5cb8d97 --- /dev/null +++ b/kmdc/kmdc-icon-button/src/jsMain/kotlin/_events.kt @@ -0,0 +1,17 @@ +package dev.petuska.kmdc.icon.button + +import dev.petuska.kmdc.core.MDCAttrsDsl +import dev.petuska.kmdc.core.MDCEventListener +import dev.petuska.kmdc.core.addMdcEventListener + +public external interface MDCIconButtonToggleChangeEventDetail { + public val isOn: Boolean +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-icon-button) + */ +@MDCAttrsDsl +public fun MDCIconButtonAttrsScope<*>.onChange(listener: MDCEventListener) { + addMdcEventListener("MDCIconButtonToggle:change", listener) +} diff --git a/kmdc/kmdc-image-list/src/jsMain/kotlin/MDCImageList.kt b/kmdc/kmdc-image-list/src/jsMain/kotlin/MDCImageList.kt index 08d12d6c..d72e63d3 100644 --- a/kmdc/kmdc-image-list/src/jsMain/kotlin/MDCImageList.kt +++ b/kmdc/kmdc-image-list/src/jsMain/kotlin/MDCImageList.kt @@ -1,14 +1,16 @@ package dev.petuska.kmdc.image.list -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.core.ContentBuilder import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLImageElement +import org.w3c.dom.HTMLLIElement +import org.w3c.dom.HTMLSpanElement +import org.w3c.dom.HTMLUListElement @JsModule("@material/image-list/mdc-image-list.scss") -private external val MDCImageListStyles: dynamic +private external val Style: dynamic public enum class MDCImageListType(public vararg val classes: String) { Standard, Masonry("mdc-image-list--masonry") @@ -16,20 +18,20 @@ public enum class MDCImageListType(public vararg val classes: String) { public interface MDCImageListScope : ElementScope -private val MDCImageListTypeLocal = compositionLocalOf { error("undefined") } +private val MDCImageListTypeLocal = strictCompositionLocalOf() /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-image-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCImageList( type: MDCImageListType = MDCImageListType.Standard, withTextProtection: Boolean = false, - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { - MDCImageListStyles + Style CompositionLocalProvider(MDCImageListTypeLocal provides type) { Ul( attrs = { @@ -47,10 +49,10 @@ public interface MDCImageListItemScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-image-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCImageListScope.Item( - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { Li( @@ -64,12 +66,12 @@ public fun MDCImageListScope.Item( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-image-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCImageListItemScope.Image( src: String, alt: String = "", - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, ) { val innerContent = @Composable { Img(src = src, alt = alt, attrs = { @@ -91,11 +93,11 @@ public fun MDCImageListItemScope.Image( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-image-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCImageListItemScope.Label( - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { Div( attrs = { @@ -116,11 +118,11 @@ public fun MDCImageListItemScope.Label( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-image-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCImageListItemScope.Label( text: String, - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, ) { Label(attrs) { Text(text) } } diff --git a/kmdc/kmdc-layout-grid/src/jsMain/kotlin/Cell.kt b/kmdc/kmdc-layout-grid/src/jsMain/kotlin/Cell.kt new file mode 100644 index 00000000..c1761cbb --- /dev/null +++ b/kmdc/kmdc-layout-grid/src/jsMain/kotlin/Cell.kt @@ -0,0 +1,51 @@ +package dev.petuska.kmdc.layout.grid + +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCContent +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.classes +import dev.petuska.kmdc.core.reinterpret +import org.jetbrains.compose.web.dom.AttrBuilderContext +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLDivElement + +public data class SpanMap(val desktop: UInt, val tablet: UInt, val phone: UInt) + +public enum class MDCLayoutGridCellAlign(public vararg val classes: String) { + Stretch, + Top("mdc-layout-grid__cell--align-top"), + Middle("mdc-layout-grid__cell--align-middle"), + Bottom("mdc-layout-grid__cell--align-bottom") +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-layout-grid) + */ +@MDCContentDsl +@Composable +public fun MDCLayoutGridCellsScope.Cell( + span: UInt? = null, + spanMap: SpanMap? = null, + order: UInt? = null, + align: MDCLayoutGridCellAlign = MDCLayoutGridCellAlign.Stretch, + attrs: AttrBuilderContext? = null, + content: MDCContent? = null +) { + Div( + attrs = { + classes("mdc-layout-grid__cell") + classes(align.classes) + order?.let { classes("mdc-layout-grid__cell--order-$it") } + span?.let { classes("mdc-layout-grid__cell--span-$it") } + spanMap?.let { + classes( + "mdc-layout-grid__cell--span-${it.desktop}-desktop", + "mdc-layout-grid__cell--span-${it.tablet}-tablet", + "mdc-layout-grid__cell--span-${it.phone}-phone", + ) + } + attrs?.invoke(this) + }, + content = content.reinterpret() + ) +} diff --git a/kmdc/kmdc-layout-grid/src/jsMain/kotlin/MDCLayoutGrid.kt b/kmdc/kmdc-layout-grid/src/jsMain/kotlin/MDCLayoutGrid.kt index fb8ad5f6..009273b1 100644 --- a/kmdc/kmdc-layout-grid/src/jsMain/kotlin/MDCLayoutGrid.kt +++ b/kmdc/kmdc-layout-grid/src/jsMain/kotlin/MDCLayoutGrid.kt @@ -1,61 +1,56 @@ package dev.petuska.kmdc.layout.grid -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCContent +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.classes +import dev.petuska.kmdc.core.reinterpret +import org.jetbrains.compose.web.dom.AttrBuilderContext +import org.jetbrains.compose.web.dom.Div +import org.jetbrains.compose.web.dom.ElementScope +import org.w3c.dom.HTMLDivElement -@JsModule("@material/layout-grid/dist/mdc.layout-grid.css") -private external val MDCLayoutGridCSS: dynamic +@JsModule("@material/layout-grid/mdc-layout-grid.scss") +private external val Style: dynamic -public data class MDCLayoutGridOpts( - var columnWidth: ColumnWidth = ColumnWidth.Default, - var align: Align = Align.Center, -) { - public enum class ColumnWidth(public vararg val classes: String) { - Default, - Fixed("mdc-layout-grid--fixed-column-width") - } - - public enum class Align(public vararg val classes: String) { - Center, - Left("mdc-layout-grid--align-left"), - Right("mdc-layout-grid--align-right"), - } +public enum class MDCLayoutGridAlign(public vararg val classes: String) { + Center, + Left("mdc-layout-grid--align-left"), + Right("mdc-layout-grid--align-right"), } -public open class MDCLayoutGridScope(scope: ElementScope) : ElementScope by scope -public class MDCLayoutGridCellsScope(scope: ElementScope) : MDCLayoutGridScope(scope) +public interface MDCLayoutGridScope : ElementScope +public interface MDCLayoutGridCellsScope : MDCLayoutGridScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-layout-grid) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCLayoutGrid( - opts: MDCAttrs? = null, + align: MDCLayoutGridAlign = MDCLayoutGridAlign.Center, + fixedColumnWidth: Boolean = false, attrs: AttrBuilderContext? = null, content: MDCContent? = null ) { - MDCLayoutGridCSS - val options = MDCLayoutGridOpts().apply { opts?.invoke(this) } + Style Div( attrs = { classes("mdc-layout-grid") - classes(options.align.classes) - classes(options.columnWidth.classes) + classes(align.classes) + if (fixedColumnWidth) classes("mdc-layout-grid--fixed-column-width") attrs?.invoke(this) }, - content = content?.let { { MDCLayoutGridScope(this).it() } } + content = content.reinterpret() ) } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-layout-grid) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCLayoutGridScope.MDCLayoutGridCells( +public fun MDCLayoutGridScope.Cells( attrs: AttrBuilderContext? = null, content: MDCContent? = null ) { @@ -64,6 +59,6 @@ public fun MDCLayoutGridScope.MDCLayoutGridCells( classes("mdc-layout-grid__inner") attrs?.invoke(this) }, - content = content?.let { { MDCLayoutGridCellsScope(this).it() } } + content = content.reinterpret() ) } diff --git a/kmdc/kmdc-layout-grid/src/jsMain/kotlin/MDCLayoutGridCell.kt b/kmdc/kmdc-layout-grid/src/jsMain/kotlin/MDCLayoutGridCell.kt deleted file mode 100644 index 418b748e..00000000 --- a/kmdc/kmdc-layout-grid/src/jsMain/kotlin/MDCLayoutGridCell.kt +++ /dev/null @@ -1,51 +0,0 @@ -package dev.petuska.kmdc.layout.grid - -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* - -public data class MDCLayoutGridCellOpts( - var span: UInt? = null, - var spanMap: SpanMap? = null, - var order: UInt? = null, - var align: Align = Align.Stretch, -) { - public data class SpanMap(val desktop: UInt, val tablet: UInt, val phone: UInt) - public enum class Align(public vararg val classes: String) { - Stretch, - Top("mdc-layout-grid__cell--align-top"), - Middle("mdc-layout-grid__cell--align-middle"), - Bottom("mdc-layout-grid__cell--align-bottom") - } -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-layout-grid) - */ -@MDCDsl -@Composable -public fun MDCLayoutGridCellsScope.MDCLayoutGridCell( - opts: MDCAttrs? = null, - attrs: AttrBuilderContext? = null, - content: MDCContent? = null -) { - val options = MDCLayoutGridCellOpts().apply { opts?.invoke(this) } - Div( - attrs = { - classes("mdc-layout-grid__cell") - classes(options.align.classes) - options.order?.let { classes("mdc-layout-grid__cell--order-$it") } - options.span?.let { classes("mdc-layout-grid__cell--span-$it") } - options.spanMap?.let { - classes( - "mdc-layout-grid__cell--span-${it.desktop}-desktop", - "mdc-layout-grid__cell--span-${it.tablet}-tablet", - "mdc-layout-grid__cell--span-${it.phone}-phone", - ) - } - attrs?.invoke(this) - }, - content = content?.let { { MDCLayoutGridCellsScope(this).it() } } - ) -} diff --git a/kmdc/kmdc-line-ripple/src/jsMain/kotlin/MDCLineRipple.kt b/kmdc/kmdc-line-ripple/src/jsMain/kotlin/MDCLineRipple.kt index 9815fcfa..11093111 100644 --- a/kmdc/kmdc-line-ripple/src/jsMain/kotlin/MDCLineRipple.kt +++ b/kmdc/kmdc-line-ripple/src/jsMain/kotlin/MDCLineRipple.kt @@ -11,12 +11,12 @@ private external val Style: dynamic /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-line-ripple) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCLineRipple( active: Boolean, - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { MDCLineRippleLayout( attrs = attrs, @@ -33,8 +33,8 @@ public fun MDCLineRipple( @Composable @KMDCInternalAPI public fun MDCLineRippleLayout( - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Style Span( diff --git a/kmdc/kmdc-linear-progress/src/jsMain/kotlin/MDCLinearProgress.kt b/kmdc/kmdc-linear-progress/src/jsMain/kotlin/MDCLinearProgress.kt index 2f2b10ad..7ce06fc4 100644 --- a/kmdc/kmdc-linear-progress/src/jsMain/kotlin/MDCLinearProgress.kt +++ b/kmdc/kmdc-linear-progress/src/jsMain/kotlin/MDCLinearProgress.kt @@ -3,63 +3,56 @@ package dev.petuska.kmdc.linear.progress import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* import org.jetbrains.compose.web.dom.Div -import org.jetbrains.compose.web.dom.ElementScope import org.jetbrains.compose.web.dom.Span import org.w3c.dom.HTMLDivElement -@JsModule("@material/linear-progress/dist/mdc.linear-progress.css") -private external val MDCLinearProgressCSS: dynamic - -public data class MDCLinearProgressOpts( - var progress: Number = 0, - var buffer: Number = 0, - var determinate: Boolean = false, - var closed: Boolean = false, - var label: String? = null, -) - -public class MDCLinearProgressScope(scope: ElementScope) : ElementScope by scope +@JsModule("@material/linear-progress/mdc-linear-progress.scss") +private external val Style: dynamic /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-linear-progress) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCLinearProgress( - opts: MDCAttrs? = null, - attrs: AttrsBuilder? = null, - content: MDCContent? = null + progress: Number = 0, + buffer: Number = 0, + determinate: Boolean = false, + closed: Boolean = false, + label: String? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { - MDCLinearProgressCSS - val options = MDCLinearProgressOpts().apply { opts?.invoke(this) } + Style Div(attrs = { classes("mdc-linear-progress") - if (!options.determinate) classes("mdc-linear-progress--indeterminate") - if (options.closed) classes("mdc-linear-progress--closed") + if (!determinate) classes("mdc-linear-progress--indeterminate") + if (closed) classes("mdc-linear-progress--closed") attr("role", "progressbar") attr("aria-valuemin", "0") attr("aria-valuemax", "1") attr("aria-valuenow", "0") - options.label?.let { attr("aria-label", it) } + label?.let { attr("aria-label", it) } attrs?.invoke(this) }) { - MDCInitEffect(::MDCLinearProgress) - MDCStateEffect(options.determinate, MDCLinearProgress::determinate) - MDCStateEffect(options.progress, MDCLinearProgress::progress) - MDCStateEffect(options.buffer, MDCLinearProgress::buffer) - MDCSideEffect(options.closed) { - if (options.closed) close() else open() - } - Div({ classes("mdc-linear-progress__buffer") }) { - Div({ classes("mdc-linear-progress__buffer-bar") }) - Div({ classes("mdc-linear-progress__buffer-dots") }) - } - Div({ classes("mdc-linear-progress__bar", "mdc-linear-progress__primary-bar") }) { - Span({ classes("mdc-linear-progress__bar-inner") }) - } - Div({ classes("mdc-linear-progress__bar", "mdc-linear-progress__secondary-bar") }) { - Span({ classes("mdc-linear-progress__bar-inner") }) + MDCProvider(::MDCLinearProgress) { + MDCStateEffectNew(determinate, MDCLinearProgress::determinate) + MDCStateEffectNew(progress, MDCLinearProgress::progress) + MDCStateEffectNew(buffer, MDCLinearProgress::buffer) + MDCSideEffectNew(closed) { + if (closed) close() else open() + } + Div({ classes("mdc-linear-progress__buffer") }) { + Div({ classes("mdc-linear-progress__buffer-bar") }) + Div({ classes("mdc-linear-progress__buffer-dots") }) + } + Div({ classes("mdc-linear-progress__bar", "mdc-linear-progress__primary-bar") }) { + Span({ classes("mdc-linear-progress__bar-inner") }) + } + Div({ classes("mdc-linear-progress__bar", "mdc-linear-progress__secondary-bar") }) { + Span({ classes("mdc-linear-progress__bar-inner") }) + } + applyContent(content) } - content?.let { MDCLinearProgressScope(this).it() } } } diff --git a/kmdc/kmdc-list/src/jsMain/kotlin/Divider.kt b/kmdc/kmdc-list/src/jsMain/kotlin/Divider.kt index c5fcfd82..7a008132 100644 --- a/kmdc/kmdc-list/src/jsMain/kotlin/Divider.kt +++ b/kmdc/kmdc-list/src/jsMain/kotlin/Divider.kt @@ -16,7 +16,7 @@ public enum class MDCListDividerInset(public vararg var classes: String) { /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListScope<*>.Divider( inset: MDCListDividerInset = MDCListDividerInset.None, @@ -37,7 +37,7 @@ public fun MDCListScope<*>.Divider( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListGroupScope.Divider( inset: MDCListDividerInset = MDCListDividerInset.None, diff --git a/kmdc/kmdc-list/src/jsMain/kotlin/MDCList.kt b/kmdc/kmdc-list/src/jsMain/kotlin/MDCList.kt index 9adec4be..ba4416d8 100644 --- a/kmdc/kmdc-list/src/jsMain/kotlin/MDCList.kt +++ b/kmdc/kmdc-list/src/jsMain/kotlin/MDCList.kt @@ -2,7 +2,6 @@ package dev.petuska.kmdc.list import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider -import androidx.compose.runtime.compositionLocalOf import dev.petuska.kmdc.core.* import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.ElementScope @@ -19,7 +18,7 @@ public enum class MDCListSize(public vararg val classes: String) { } public enum class MDCListType(public vararg val classes: String) { - Generic, + Default, Textual("mdc-deprecated-list--textual-list"), Avatar("mdc-deprecated-list--avatar-list"), Icon("mdc-deprecated-list--icon-list"), @@ -35,22 +34,23 @@ public enum class MDCListSelection(public val listRole: String?, public val item Multi(null, null), } -@MDCDsl +public interface MDCListAttrsScope : AttrsScope public interface MDCListScope : ElementScope -internal val MDCListSelectionLocal = compositionLocalOf { error("undefined") } +internal val MDCListSelectionLocal = strictCompositionLocalOf() /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCList( - type: MDCListType = MDCListType.Generic, + type: MDCListType = MDCListType.Default, size: MDCListSize = MDCListSize.SingleLine, - dense: Boolean = false, selection: MDCListSelection = MDCListSelection.Single, - attrs: MDCAttrs>? = null, + dense: Boolean = false, + wrapFocus: Boolean = false, + attrs: MDCAttrs>? = null, content: MDCContent>? = null, ) { MDCListLayout( @@ -60,25 +60,24 @@ public fun MDCList( selection = selection, attrs = attrs ) { - MDCInitEffect(::MDCList) - MDCSideEffect(selection) { - singleSelection = selection != MDCListSelection.Multi && selection != MDCListSelection.MultiCheckbox + MDCProvider(::MDCList, selection) { + MDCSideEffectNew(selection) { + singleSelection = selection != MDCListSelection.Multi && selection != MDCListSelection.MultiCheckbox + } + MDCStateEffectNew(wrapFocus, MDCList::wrapFocus) + applyContent(content) } - applyContent(content) } } -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) - */ @KMDCInternalAPI @Composable public fun MDCListLayout( - type: MDCListType = MDCListType.Generic, + type: MDCListType = MDCListType.Default, size: MDCListSize = MDCListSize.SingleLine, dense: Boolean = false, selection: MDCListSelection = MDCListSelection.Single, - attrs: MDCAttrs>? = null, + attrs: MDCAttrs>? = null, content: MDCContent>? = null, ) { Style @@ -99,28 +98,55 @@ public fun MDCListLayout( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCNavList( - type: MDCListType = MDCListType.Generic, + type: MDCListType = MDCListType.Default, size: MDCListSize = MDCListSize.SingleLine, + selection: MDCListSelection = MDCListSelection.Single, dense: Boolean = false, - singleSelection: Boolean = false, - attrs: MDCAttrs>? = null, + wrapFocus: Boolean = false, + attrs: MDCAttrs>? = null, content: MDCContent>? = null, ) { - Style + MDCNavListLayout( + type = type, + size = size, + dense = dense, + selection = selection, + attrs = attrs + ) { + MDCProvider(::MDCList, selection) { + MDCSideEffectNew(selection) { + singleSelection = selection != MDCListSelection.Multi && selection != MDCListSelection.MultiCheckbox + } + MDCStateEffectNew(wrapFocus, MDCList::wrapFocus) + applyContent(content) + } + } +} +@KMDCInternalAPI +@Composable +public fun MDCNavListLayout( + type: MDCListType = MDCListType.Default, + size: MDCListSize = MDCListSize.SingleLine, + dense: Boolean = false, + selection: MDCListSelection = MDCListSelection.Single, + attrs: MDCAttrs>? = null, + content: MDCContent>? = null, +) { + Style Nav(attrs = { classes("mdc-deprecated-list") classes(size.classes) classes(type.classes) - if (singleSelection) attr("role", "listbox") + if (dense) classes("mdc-deprecated-list--dense") if (dense) classes("mdc-deprecated-list--dense") applyAttrs(attrs) }) { - MDCInitEffect(::MDCList) - MDCStateEffect(singleSelection, MDCList::singleSelection) - applyContent(content) + CompositionLocalProvider(MDCListSelectionLocal provides selection) { + applyContent(content) + } } } diff --git a/kmdc/kmdc-list/src/jsMain/kotlin/MDCListGroup.kt b/kmdc/kmdc-list/src/jsMain/kotlin/MDCListGroup.kt index ba61d4f9..08b9e07d 100644 --- a/kmdc/kmdc-list/src/jsMain/kotlin/MDCListGroup.kt +++ b/kmdc/kmdc-list/src/jsMain/kotlin/MDCListGroup.kt @@ -1,25 +1,22 @@ package dev.petuska.kmdc.list -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder +import org.jetbrains.compose.web.attributes.AttrsScope +import org.jetbrains.compose.web.dom.Div +import org.jetbrains.compose.web.dom.ElementScope +import org.jetbrains.compose.web.dom.H3 import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLDivElement +import org.w3c.dom.HTMLHeadingElement -@MDCDsl public interface MDCListGroupScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable -@Deprecated( - "Based on already deprecated MDC List. New implementation is still in the works.", - level = DeprecationLevel.WARNING -) public fun MDCListGroup( attrs: MDCAttrs>? = null, content: MDCContent? = null, @@ -35,11 +32,11 @@ public fun MDCListGroup( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListGroupScope.Subheader( attrs: MDCAttrs>? = null, - content: ContentBuilder? = null, + content: MDCContentRaw? = null, ) { H3(attrs = { classes("mdc-deprecated-list-group__subheader") @@ -50,7 +47,7 @@ public fun MDCListGroupScope.Subheader( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListGroupScope.Subheader( text: String, diff --git a/kmdc/kmdc-list/src/jsMain/kotlin/_events.kt b/kmdc/kmdc-list/src/jsMain/kotlin/_events.kt new file mode 100644 index 00000000..4af58b85 --- /dev/null +++ b/kmdc/kmdc-list/src/jsMain/kotlin/_events.kt @@ -0,0 +1,29 @@ +package dev.petuska.kmdc.list + +import dev.petuska.kmdc.core.MDCAttrsDsl +import dev.petuska.kmdc.core.MDCEventListener +import dev.petuska.kmdc.core.addMdcEventListener + +public external interface MDCListActionEventDetail { + public val index: Int +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-list) + */ +@MDCAttrsDsl +public fun MDCListAttrsScope<*>.onAction(listener: MDCEventListener) { + addMdcEventListener("MDCList:action", listener) +} + +public external interface MDCListSelectionChangedEventDetail { + public val changedIndices: IntArray +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-list) + */ +@MDCAttrsDsl +public fun MDCListAttrsScope<*>.onSelectionChanged(listener: MDCEventListener) { + addMdcEventListener("MDCList:selectionChange", listener) +} diff --git a/kmdc/kmdc-list/src/jsMain/kotlin/_module.kt b/kmdc/kmdc-list/src/jsMain/kotlin/_module.kt index aa69f7b8..37551685 100644 --- a/kmdc/kmdc-list/src/jsMain/kotlin/_module.kt +++ b/kmdc/kmdc-list/src/jsMain/kotlin/_module.kt @@ -4,10 +4,11 @@ package dev.petuska.kmdc.list import dev.petuska.kmdc.core.MDCComponent import dev.petuska.kmdc.core.MDCExternalAPI +import dev.petuska.kmdc.core.MDCLayoutComponent import org.w3c.dom.Element @MDCExternalAPI -public external class MDCList(element: Element) : MDCComponent { +public external class MDCList(element: Element) : MDCComponent, MDCLayoutComponent { public var vertical: Boolean public val listElements: Array public var wrapFocus: Boolean @@ -20,12 +21,8 @@ public external class MDCList(element: Element) : MDCComponent { */ public var selectedIndex: dynamic - public fun layout() + public override fun layout() public fun getPrimaryText(item: Element): String public fun initializeListType() public fun setEnabled(itemIndex: Int, isEnabled: Boolean) } - -public external interface MDCListActionEventDetail { - public val index: Int -} diff --git a/kmdc/kmdc-list/src/jsMain/kotlin/item/Graphic.kt b/kmdc/kmdc-list/src/jsMain/kotlin/item/Graphic.kt index f0315225..faa2fbe2 100644 --- a/kmdc/kmdc-list/src/jsMain/kotlin/item/Graphic.kt +++ b/kmdc/kmdc-list/src/jsMain/kotlin/item/Graphic.kt @@ -1,18 +1,20 @@ package dev.petuska.kmdc.list.item -import androidx.compose.runtime.* -import dev.petuska.kmdc.checkbox.* -import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.radio.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.attributes.builders.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.checkbox.MDCCheckboxLayoutFull +import dev.petuska.kmdc.core.MDCAttrs +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import dev.petuska.kmdc.radio.MDCRadioLayout +import org.jetbrains.compose.web.attributes.AttrsScope +import org.jetbrains.compose.web.attributes.builders.InputAttrsScope +import org.jetbrains.compose.web.dom.Span +import org.w3c.dom.HTMLSpanElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemScope<*>.Graphic( attrs: MDCAttrs>? = null, @@ -27,40 +29,45 @@ public fun MDCListItemScope<*>.Graphic( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemScope<*>.RadioGraphic( checked: Boolean, + id: String, touch: Boolean = false, disabled: Boolean = false, - label: String? = null, attrs: MDCAttrs>? = null, ) { - val radioId = rememberUniqueDomElementId() Graphic { MDCRadioLayout( - id = radioId, + id = id, checked = checked, touch = touch, disabled = disabled, attrs = attrs, ) } - if (label != null) { - Label(label, radioId) - } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemScope<*>.CheckboxGraphic( checked: Boolean, - attrs: MDCAttrsRaw? = null, + id: String, + touch: Boolean = false, + disabled: Boolean = false, + attrs: MDCAttrs>? = null, ) { - Graphic(attrs) { - MDCCheckbox(checked = checked) + Graphic { + MDCCheckboxLayoutFull( + checked = checked, + id = id, + touch = touch, + disabled = disabled, + attrs = attrs, + ) } } diff --git a/kmdc/kmdc-list/src/jsMain/kotlin/item/Label.kt b/kmdc/kmdc-list/src/jsMain/kotlin/item/Label.kt index f154a940..3d00b8be 100644 --- a/kmdc/kmdc-list/src/jsMain/kotlin/item/Label.kt +++ b/kmdc/kmdc-list/src/jsMain/kotlin/item/Label.kt @@ -1,43 +1,51 @@ package dev.petuska.kmdc.list.item -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* +import org.jetbrains.compose.web.attributes.AttrsScope +import org.jetbrains.compose.web.attributes.forId import org.jetbrains.compose.web.dom.ContentBuilder +import org.jetbrains.compose.web.dom.ElementScope +import org.jetbrains.compose.web.dom.Span import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLLabelElement +import org.w3c.dom.HTMLSpanElement -public class MDCListItemLabelScope(scope: ElementScope) : ElementScope by scope +public interface MDCListItemLabelScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemScope<*>.Label( + forId: String? = null, attrs: MDCAttrs>? = null, content: MDCContent? = null, ) { - org.jetbrains.compose.web.dom.Label(attrs = { - classes("mdc-deprecated-list-item__text") - attrs?.invoke(this) - }, content = content?.let { { MDCListItemLabelScope(this).it() } }) + org.jetbrains.compose.web.dom.Label( + attrs = { + classes("mdc-deprecated-list-item__text") + forId?.let(::forId) + attrs?.invoke(this) + }, + content = content.reinterpret() + ) } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemScope<*>.Label( text: String, - forId: String, + forId: String? = null, attrs: MDCAttrs>? = null, ) { - this@Label.Label( + Label( + forId = forId, attrs = { - forId(forId) applyAttrs(attrs) }, content = { Text(text) } @@ -47,7 +55,7 @@ public fun MDCListItemScope<*>.Label( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemLabelScope.Primary( attrs: MDCAttrs>? = null, @@ -62,7 +70,7 @@ public fun MDCListItemLabelScope.Primary( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemLabelScope.Primary( text: String, @@ -74,7 +82,7 @@ public fun MDCListItemLabelScope.Primary( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemLabelScope.Secondary( attrs: MDCAttrs>? = null, @@ -89,7 +97,7 @@ public fun MDCListItemLabelScope.Secondary( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemLabelScope.Secondary( text: String, diff --git a/kmdc/kmdc-list/src/jsMain/kotlin/item/ListItem.kt b/kmdc/kmdc-list/src/jsMain/kotlin/item/ListItem.kt index 21021cfb..6dce0739 100644 --- a/kmdc/kmdc-list/src/jsMain/kotlin/item/ListItem.kt +++ b/kmdc/kmdc-list/src/jsMain/kotlin/item/ListItem.kt @@ -4,7 +4,7 @@ import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* import dev.petuska.kmdc.list.MDCListScope import dev.petuska.kmdc.list.MDCListSelectionLocal -import dev.petuska.kmdc.ripple.MDCRipple +import dev.petuska.kmdc.ripple.MDCRippleLayout import org.jetbrains.compose.web.dom.A import org.jetbrains.compose.web.dom.ContentBuilder import org.jetbrains.compose.web.dom.ElementScope @@ -17,7 +17,7 @@ public interface MDCListItemScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListScope.ListItem( disabled: Boolean = false, @@ -39,9 +39,8 @@ public fun MDCListScope.ListItem( selection.itemRole?.let(::role) attrs?.invoke(this) }) { - Span(attrs = { classes("mdc-deprecated-list-item__ripple") }) { - MDCRipple() - } + Span(attrs = { classes("mdc-deprecated-list-item__ripple") }) + MDCRippleLayout() applyContent(content) } } @@ -49,7 +48,7 @@ public fun MDCListScope.ListItem( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListScope.ListItem( text: String, @@ -71,7 +70,7 @@ public fun MDCListScope.ListItem( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListScope.ListItem( disabled: Boolean = false, @@ -97,7 +96,7 @@ public fun MDCListScope.ListItem( attrs?.invoke(this) }) { Span(attrs = { classes("mdc-deprecated-list-item__ripple") }) { - MDCRipple() + MDCRippleLayout() } applyContent(content) } @@ -106,7 +105,7 @@ public fun MDCListScope.ListItem( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListScope.ListItem( text: String, @@ -128,7 +127,7 @@ public fun MDCListScope.ListItem( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemScope<*>.Meta( attrs: MDCAttrsRaw? = null, diff --git a/kmdc/kmdc-list/src/jsMain/kotlin/item/Text.kt b/kmdc/kmdc-list/src/jsMain/kotlin/item/Text.kt index c4359999..558d3f23 100644 --- a/kmdc/kmdc-list/src/jsMain/kotlin/item/Text.kt +++ b/kmdc/kmdc-list/src/jsMain/kotlin/item/Text.kt @@ -13,7 +13,7 @@ public interface MDCListItemTextScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemScope<*>.Text( attrs: MDCAttrs>? = null, @@ -31,7 +31,7 @@ public fun MDCListItemScope<*>.Text( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemScope<*>.Text( text: String, @@ -43,7 +43,7 @@ public fun MDCListItemScope<*>.Text( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemTextScope.Primary( attrs: MDCAttrs>? = null, @@ -58,7 +58,7 @@ public fun MDCListItemTextScope.Primary( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemTextScope.Primary( text: String, @@ -70,7 +70,7 @@ public fun MDCListItemTextScope.Primary( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemTextScope.Secondary( attrs: MDCAttrs>? = null, @@ -85,7 +85,7 @@ public fun MDCListItemTextScope.Secondary( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-deprecated-list) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCListItemTextScope.Secondary( text: String, diff --git a/kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurface.kt b/kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurface.kt index 8557e849..f644fc87 100644 --- a/kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurface.kt +++ b/kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurface.kt @@ -1,23 +1,22 @@ package dev.petuska.kmdc.menu.surface -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.core.domain.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* +import dev.petuska.kmdc.core.domain.Point +import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.ContentBuilder -import org.w3c.dom.* +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLDivElement @JsModule("@material/menu-surface/mdc-menu-surface.scss") private external val Style: dynamic -@MDCAttrsDsl public interface MDCMenuSurfaceAttrsScope : AttrsScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-menu-surface) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCMenuSurface( open: Boolean = false, @@ -29,21 +28,22 @@ public fun MDCMenuSurface( absolutePosition: Point? = null, restoreFocusOnClose: Boolean = true, attrs: MDCAttrs? = null, - content: ContentBuilder? = null, + content: MDCContentRaw? = null, ) { MDCMenuSurfaceLayout(fixed = fixed, fullWidth = fullWidth, attrs = attrs) { - MDCInitEffect(::MDCMenuSurface) - MDCStateEffect(fixed, MDCMenuSurface::setFixedPosition) - MDCStateEffect(quickOpen, MDCMenuSurface::quickOpen) - MDCStateEffect(anchorCorner, MDCMenuSurface::setAnchorCorner) - MDCStateEffect(hoisted, MDCMenuSurface::setIsHoisted) - MDCSideEffect(absolutePosition) { - absolutePosition?.let { (x, y) -> setAbsolutePosition(x, y) } - } - MDCSideEffect(open) { - if (open) open() else close(!restoreFocusOnClose) + MDCProvider(::MDCMenuSurface) { + MDCStateEffectNew(fixed, MDCMenuSurface::setFixedPosition) + MDCStateEffectNew(quickOpen, MDCMenuSurface::quickOpen) + MDCStateEffectNew(anchorCorner, MDCMenuSurface::setAnchorCorner) + MDCStateEffectNew(hoisted, MDCMenuSurface::setIsHoisted) + MDCSideEffectNew(absolutePosition) { + absolutePosition?.let { (x, y) -> setAbsolutePosition(x, y) } + } + MDCSideEffectNew(open) { + if (open) open() else close(!restoreFocusOnClose) + } + applyContent(content) } - applyContent(content) } } diff --git a/kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurfaceAnchor.kt b/kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurfaceAnchor.kt index 332c484b..b68dd879 100644 --- a/kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurfaceAnchor.kt +++ b/kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurfaceAnchor.kt @@ -1,16 +1,18 @@ package dev.petuska.kmdc.menu.surface -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import dev.petuska.kmdc.core.applyAttrs +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLDivElement -@MDCDsl +@MDCContentDsl @Composable public fun MDCMenuSurfaceAnchor( attrs: MDCAttrsRaw? = null, - content: ContentBuilder? = null, + content: MDCContentRaw? = null, ) { Div( attrs = { diff --git a/kmdc/kmdc-menu-surface/src/jsMain/kotlin/events.kt b/kmdc/kmdc-menu-surface/src/jsMain/kotlin/_events.kt similarity index 100% rename from kmdc/kmdc-menu-surface/src/jsMain/kotlin/events.kt rename to kmdc/kmdc-menu-surface/src/jsMain/kotlin/_events.kt diff --git a/kmdc/kmdc-menu/src/jsMain/kotlin/MDCMenu.kt b/kmdc/kmdc-menu/src/jsMain/kotlin/MDCMenu.kt index d28cbed4..600f0e90 100644 --- a/kmdc/kmdc-menu/src/jsMain/kotlin/MDCMenu.kt +++ b/kmdc/kmdc-menu/src/jsMain/kotlin/MDCMenu.kt @@ -23,7 +23,7 @@ public interface MDCMenuScope : MDCListScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-menu) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCMenu( open: Boolean = false, @@ -77,7 +77,7 @@ public fun MDCMenuLayout( singleSelect: Boolean, fullWidth: Boolean, fixed: Boolean, - init: @Composable ElementScope.(MDCContentRaw) -> Unit = { it() }, + init: MDCComponentInit> = { it() }, attrs: MDCAttrs?, content: MDCContent?, ) { diff --git a/kmdc/kmdc-menu/src/jsMain/kotlin/MenuItem.kt b/kmdc/kmdc-menu/src/jsMain/kotlin/MenuItem.kt index bb1e06a8..84a30db5 100644 --- a/kmdc/kmdc-menu/src/jsMain/kotlin/MenuItem.kt +++ b/kmdc/kmdc-menu/src/jsMain/kotlin/MenuItem.kt @@ -9,7 +9,7 @@ import org.w3c.dom.* /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-menu) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCMenuScope.MenuItem( disabled: Boolean = false, diff --git a/kmdc/kmdc-menu/src/jsMain/kotlin/SelectionGroup.kt b/kmdc/kmdc-menu/src/jsMain/kotlin/SelectionGroup.kt index e968101e..868f9a11 100644 --- a/kmdc/kmdc-menu/src/jsMain/kotlin/SelectionGroup.kt +++ b/kmdc/kmdc-menu/src/jsMain/kotlin/SelectionGroup.kt @@ -8,7 +8,7 @@ import org.w3c.dom.* /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-menu) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCMenuScope.SelectionGroup( attrs: MDCAttrsRaw? = null, diff --git a/kmdc/kmdc-menu/src/jsMain/kotlin/events.kt b/kmdc/kmdc-menu/src/jsMain/kotlin/_events.kt similarity index 100% rename from kmdc/kmdc-menu/src/jsMain/kotlin/events.kt rename to kmdc/kmdc-menu/src/jsMain/kotlin/_events.kt diff --git a/kmdc/kmdc-menu/src/jsMain/kotlin/module.kt b/kmdc/kmdc-menu/src/jsMain/kotlin/_module.kt similarity index 100% rename from kmdc/kmdc-menu/src/jsMain/kotlin/module.kt rename to kmdc/kmdc-menu/src/jsMain/kotlin/_module.kt diff --git a/kmdc/kmdc-notched-outline/build.gradle.kts b/kmdc/kmdc-notched-outline/build.gradle.kts index db710e63..d035cee5 100644 --- a/kmdc/kmdc-notched-outline/build.gradle.kts +++ b/kmdc/kmdc-notched-outline/build.gradle.kts @@ -4,8 +4,4 @@ plugins { kmdc { mdc by "notched-outline" - dependencies { - main { - } - } } diff --git a/kmdc/kmdc-notched-outline/src/jsMain/kotlin/MDCNotchedOutline.kt b/kmdc/kmdc-notched-outline/src/jsMain/kotlin/MDCNotchedOutline.kt index e1b20779..0423ff04 100644 --- a/kmdc/kmdc-notched-outline/src/jsMain/kotlin/MDCNotchedOutline.kt +++ b/kmdc/kmdc-notched-outline/src/jsMain/kotlin/MDCNotchedOutline.kt @@ -14,7 +14,7 @@ public interface MDCNotchedOutlineScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-notched-outline) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCNotchedOutline( notched: Boolean = false, @@ -59,7 +59,7 @@ public fun MDCNotchedOutlineLayout( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-notched-outline) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCNotchedOutlineScope.Leading( attrs: MDCAttrsRaw? = null, @@ -74,7 +74,7 @@ public fun MDCNotchedOutlineScope.Leading( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-notched-outline) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCNotchedOutlineScope.Notch( attrs: MDCAttrsRaw? = null, @@ -89,7 +89,7 @@ public fun MDCNotchedOutlineScope.Notch( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-notched-outline) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCNotchedOutlineScope.Trailing( attrs: MDCAttrsRaw? = null, diff --git a/kmdc/kmdc-radio/src/jsMain/kotlin/MDCRadio.kt b/kmdc/kmdc-radio/src/jsMain/kotlin/MDCRadio.kt index 83c676a1..2aa2694b 100644 --- a/kmdc/kmdc-radio/src/jsMain/kotlin/MDCRadio.kt +++ b/kmdc/kmdc-radio/src/jsMain/kotlin/MDCRadio.kt @@ -1,21 +1,21 @@ package dev.petuska.kmdc.radio -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.form.field.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.attributes.builders.* +import dev.petuska.kmdc.form.field.MDCFormField +import org.jetbrains.compose.web.attributes.InputType +import org.jetbrains.compose.web.attributes.builders.InputAttrsScope +import org.jetbrains.compose.web.attributes.disabled import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLDivElement @JsModule("@material/radio/mdc-radio.scss") -public external val MDCRadioStyle: dynamic +public external val Style: dynamic /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-radio) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCRadio( checked: Boolean, @@ -23,39 +23,6 @@ public fun MDCRadio( disabled: Boolean = false, label: String? = null, attrs: MDCAttrs>? = null, -) { - MDCRadioBody(checked = checked, touch = touch, label = label, disabled = disabled, attrs = attrs) -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-radio) - */ -@MDCDsl -@Composable -public fun MDCFormFieldScope.MDCRadio( - checked: Boolean, - touch: Boolean = false, - disabled: Boolean = false, - label: String? = null, - attrs: MDCAttrs>? = null, -) { - MDCRadioBody(checked = checked, touch = touch, disabled = disabled, label = label, attrs = { - ref { - it.mdc { setInput(it, this) } - onDispose { } - } - attrs?.invoke(this) - }) -} - -@MDCDsl -@Composable -private fun MDCRadioBody( - checked: Boolean, - touch: Boolean, - disabled: Boolean = false, - label: String? = null, - attrs: MDCAttrs>? = null, ) { val radioId = rememberUniqueDomElementId() MDCRadioLayout( @@ -65,8 +32,12 @@ private fun MDCRadioBody( disabled = disabled, attrs = attrs, ) { + val formField = localMDC() MDCProvider(::MDCRadio) { - it() + MDCSideEffectNew(formField, onDispose = { formField?.input = null }) { + formField?.input = this + } + applyContent(it) } } label?.let { @@ -82,9 +53,9 @@ public fun MDCRadioLayout( touch: Boolean, disabled: Boolean, attrs: MDCAttrs>?, - init: @Composable ElementScope.(content: @Composable () -> Unit) -> Unit = { it() }, + init: MDCComponentInit> = { it() }, ) { - MDCRadioStyle + Style Div(attrs = { classes("mdc-radio") if (disabled) classes("mdc-radio--disabled") diff --git a/kmdc/kmdc-ripple/src/jsMain/kotlin/MDCRipple.kt b/kmdc/kmdc-ripple/src/jsMain/kotlin/MDCRipple.kt index 5d073569..f9cb8656 100644 --- a/kmdc/kmdc-ripple/src/jsMain/kotlin/MDCRipple.kt +++ b/kmdc/kmdc-ripple/src/jsMain/kotlin/MDCRipple.kt @@ -1,18 +1,56 @@ package dev.petuska.kmdc.ripple -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.KMDCInternalAPI +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCProvider +import dev.petuska.kmdc.core.MDCStateEffectNew +import kotlinx.dom.addClass +import kotlinx.dom.removeClass +import org.jetbrains.compose.web.dom.ElementScope +import org.w3c.dom.Element + +@JsModule("@material/ripple/mdc-ripple.scss") +private external val Style: dynamic /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-ripple) */ -@MDCDsl +@MDCContentDsl @Composable public fun ElementScope<*>.MDCRipple( - unbounded: Boolean = false + unbounded: Boolean = false, + disabled: Boolean = false, +) { + MDCRippleLayout( + unbounded = unbounded, + disabled = disabled, + init = { + it.addClass("mdc-ripple-surface") + }, + onDispose = { it.removeClass("mdc-ripple-surface") } + ) +} + +@Composable +@KMDCInternalAPI +public fun ElementScope<*>.MDCRippleLayout( + unbounded: Boolean = false, + disabled: Boolean = false, + vararg keys: Any?, + init: (Element) -> Unit = {}, + onDispose: (Element) -> Unit = {}, ) { - MDCProvider(::MDCRipple) { + Style + MDCProvider( + init = { + init(it) + MDCRipple(it) + }, + keys = keys + unbounded, + onDispose = { onDispose(it) } + ) { MDCStateEffectNew(unbounded, MDCRipple::unbounded) + MDCStateEffectNew(disabled, MDCRipple::disabled) } } diff --git a/kmdc/kmdc-ripple/src/jsMain/kotlin/_module.kt b/kmdc/kmdc-ripple/src/jsMain/kotlin/_module.kt index b5b76325..d98c1e5f 100644 --- a/kmdc/kmdc-ripple/src/jsMain/kotlin/_module.kt +++ b/kmdc/kmdc-ripple/src/jsMain/kotlin/_module.kt @@ -4,6 +4,7 @@ package dev.petuska.kmdc.ripple import dev.petuska.kmdc.core.MDCComponent import dev.petuska.kmdc.core.MDCExternalAPI +import dev.petuska.kmdc.core.MDCLayoutComponent import org.w3c.dom.Element @MDCExternalAPI @@ -13,9 +14,12 @@ public external interface MDCRippleAttachOpts { @MDCExternalAPI public external class MDCRipple(element: Element, opts: MDCRippleAttachOpts = definedExternally) : - MDCComponent { + MDCComponent, MDCLayoutComponent { public var unbounded: Boolean public var disabled: Boolean public fun activate() public fun deactivate() + public fun handleFocus() + public fun handleBlur() + override fun layout() } diff --git a/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Icon.kt b/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Icon.kt index 91aaa2ed..53d451ca 100644 --- a/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Icon.kt +++ b/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Icon.kt @@ -1,19 +1,20 @@ package dev.petuska.kmdc.segmented.button -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import org.jetbrains.compose.web.dom.I +import org.w3c.dom.HTMLElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-segmented-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSegmentedButtonSegmentScope.Icon( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { I( attrs = { diff --git a/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Label.kt b/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Label.kt index 4db51fd8..a985ed48 100644 --- a/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Label.kt +++ b/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Label.kt @@ -1,20 +1,21 @@ package dev.petuska.kmdc.segmented.button -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLDivElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-segmented-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSegmentedButtonSegmentScope.Label( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { Div( attrs = { @@ -28,11 +29,11 @@ public fun MDCSegmentedButtonSegmentScope.Label( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-segmented-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSegmentedButtonSegmentScope.Label( text: String, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, ) { Label(attrs) { Text(text) diff --git a/kmdc/kmdc-segmented-button/src/jsMain/kotlin/MDCSegmentedButton.kt b/kmdc/kmdc-segmented-button/src/jsMain/kotlin/MDCSegmentedButton.kt index 79ccfe8a..5cc5cdff 100644 --- a/kmdc/kmdc-segmented-button/src/jsMain/kotlin/MDCSegmentedButton.kt +++ b/kmdc/kmdc-segmented-button/src/jsMain/kotlin/MDCSegmentedButton.kt @@ -1,33 +1,32 @@ package dev.petuska.kmdc.segmented.button import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider import dev.petuska.kmdc.core.* import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope import org.w3c.dom.HTMLDivElement -@JsModule("@material/segmented-button/dist/mdc.segmented-button.css") -private external val MDCSegmentedButtonStyle: dynamic +@JsModule("@material/segmented-button/styles.scss") +private external val Style: dynamic -public class MDCSegmentedButtonAttrsScope(scope: AttrsScope) : AttrsScope by scope -public class MDCSegmentedButtonScope( - scope: ElementScope, - internal val singleSelect: Boolean, -) : - ElementScope by scope +public interface MDCSegmentedButtonAttrsScope : AttrsScope +public interface MDCSegmentedButtonScope : ElementScope + +internal val MDCSegmentedButtonSingleSelectLocal = strictCompositionLocalOf() /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-segmented-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSegmentedButton( singleSelect: Boolean = false, attrs: MDCAttrs? = null, content: MDCContent? = null ) { - MDCSegmentedButtonStyle + Style Div( attrs = { classes("mdc-segmented-button") @@ -37,11 +36,13 @@ public fun MDCSegmentedButton( } else { attr("role", "group") } - attrs?.invoke(MDCSegmentedButtonAttrsScope(this)) + applyAttrs(attrs) }, - content = { - MDCInitEffect(::MDCSegmentedButton) - applyContent(content) { MDCSegmentedButtonScope(this, singleSelect) } + ) { + CompositionLocalProvider(MDCSegmentedButtonSingleSelectLocal provides singleSelect) { + MDCProvider(::MDCSegmentedButton) { + applyContent(content) + } } - ) + } } diff --git a/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Segment.kt b/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Segment.kt index 5f4231f8..92224372 100644 --- a/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Segment.kt +++ b/kmdc/kmdc-segmented-button/src/jsMain/kotlin/Segment.kt @@ -1,21 +1,21 @@ package dev.petuska.kmdc.segmented.button -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import org.jetbrains.compose.web.attributes.AttrsScope +import org.jetbrains.compose.web.dom.Button +import org.jetbrains.compose.web.dom.Div +import org.jetbrains.compose.web.dom.ElementScope +import org.w3c.dom.HTMLButtonElement -public class MDCSegmentedButtonSegmentAttrsScope(scope: AttrsScope) : - AttrsScope by scope +public interface MDCSegmentedButtonSegmentAttrsScope : AttrsScope -public class MDCSegmentedButtonSegmentScope(scope: ElementScope) : - ElementScope by scope +public interface MDCSegmentedButtonSegmentScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-segmented-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSegmentedButtonScope.Segment( selected: Boolean = false, @@ -24,6 +24,7 @@ public fun MDCSegmentedButtonScope.Segment( attrs: MDCAttrs? = null, content: MDCContent? = null, ) { + val singleSelect = MDCSegmentedButtonSingleSelectLocal.current Button( attrs = { classes("mdc-segmented-button__segment") @@ -34,13 +35,13 @@ public fun MDCSegmentedButtonScope.Segment( classes("mdc-segmented-button__segment--selected") } segmentId?.let { data("segment-id", it) } - if (this@Segment.singleSelect) { + if (singleSelect) { aria("checked", "$selected") role("radio") } else { aria("pressed", "$selected") } - attrs?.invoke(MDCSegmentedButtonSegmentAttrsScope(this)) + applyAttrs(attrs) } ) { if (touch) { @@ -49,14 +50,14 @@ public fun MDCSegmentedButtonScope.Segment( }) } Div(attrs = { classes("mdc-segmented-button__ripple") }) - content?.invoke(MDCSegmentedButtonSegmentScope(this)) + applyContent(content) } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-segmented-button) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSegmentedButtonScope.Segment( text: String, diff --git a/kmdc/kmdc-segmented-button/src/jsMain/kotlin/events.kt b/kmdc/kmdc-segmented-button/src/jsMain/kotlin/_events.kt similarity index 100% rename from kmdc/kmdc-segmented-button/src/jsMain/kotlin/events.kt rename to kmdc/kmdc-segmented-button/src/jsMain/kotlin/_events.kt diff --git a/kmdc/kmdc-select/build.gradle.kts b/kmdc/kmdc-select/build.gradle.kts index 043033a6..4b3df0ac 100644 --- a/kmdc/kmdc-select/build.gradle.kts +++ b/kmdc/kmdc-select/build.gradle.kts @@ -10,6 +10,8 @@ kmdc { api(kmdc("list")) api(kmdc("menu")) api(kmdc("line-ripple")) + api(kmdc("floating-label")) + api(kmdc("notched-outline")) } } } diff --git a/kmdc/kmdc-select/src/jsMain/kotlin/MDCSelect.kt b/kmdc/kmdc-select/src/jsMain/kotlin/MDCSelect.kt index 5c6bf10b..9915b135 100644 --- a/kmdc/kmdc-select/src/jsMain/kotlin/MDCSelect.kt +++ b/kmdc/kmdc-select/src/jsMain/kotlin/MDCSelect.kt @@ -34,7 +34,7 @@ internal val MDCSelectLeadingIconLocal = strictCompositionLocalOf() /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-select) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSelect( type: MDCSelectType = MDCSelectType.Filled, diff --git a/kmdc/kmdc-select/src/jsMain/kotlin/anchor/Anchor.kt b/kmdc/kmdc-select/src/jsMain/kotlin/anchor/Anchor.kt index d162175c..57372d3a 100644 --- a/kmdc/kmdc-select/src/jsMain/kotlin/anchor/Anchor.kt +++ b/kmdc/kmdc-select/src/jsMain/kotlin/anchor/Anchor.kt @@ -2,7 +2,12 @@ package dev.petuska.kmdc.select.anchor import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* +import dev.petuska.kmdc.floating.label.MDCFloatingLabelLayout import dev.petuska.kmdc.line.ripple.MDCLineRippleLayout +import dev.petuska.kmdc.notched.outline.Leading +import dev.petuska.kmdc.notched.outline.MDCNotchedOutlineLayout +import dev.petuska.kmdc.notched.outline.Notch +import dev.petuska.kmdc.notched.outline.Trailing import dev.petuska.kmdc.select.* import org.jetbrains.compose.web.dom.* import org.w3c.dom.HTMLDivElement @@ -13,7 +18,7 @@ public interface MDCSelectAnchorScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-select) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSelectScope.Anchor( label: String, @@ -39,10 +44,7 @@ public fun MDCSelectScope.Anchor( } ) { val floatingLabel = @Composable { - Span(attrs = { - id(labelId) - classes("mdc-floating-label") - }) { Text(label) } + MDCFloatingLabelLayout(id = labelId) { Text(label) } } when (type) { @@ -50,10 +52,10 @@ public fun MDCSelectScope.Anchor( Span(attrs = { classes("mdc-select__ripple") }) floatingLabel() } - MDCSelectType.Outlined -> Span(attrs = { classes("mdc-notched-outline") }) { - Span(attrs = { classes("mdc-notched-outline__leading") }) - Span(attrs = { classes("mdc-notched-outline__notch") }) { floatingLabel() } - Span(attrs = { classes("mdc-notched-outline__trailing") }) + MDCSelectType.Outlined -> MDCNotchedOutlineLayout { + Leading() + Notch { floatingLabel() } + Trailing() } } applyContent(leadingIcon) @@ -71,7 +73,7 @@ public fun MDCSelectScope.Anchor( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-select) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSelectAnchorScope.LeadingIcon( clickable: Boolean = true, diff --git a/kmdc/kmdc-select/src/jsMain/kotlin/anchor/DropDownIcon.kt b/kmdc/kmdc-select/src/jsMain/kotlin/anchor/DropDownIcon.kt index fe8581b1..229972ef 100644 --- a/kmdc/kmdc-select/src/jsMain/kotlin/anchor/DropDownIcon.kt +++ b/kmdc/kmdc-select/src/jsMain/kotlin/anchor/DropDownIcon.kt @@ -2,7 +2,7 @@ package dev.petuska.kmdc.select.anchor import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.MDCAttrsRaw -import dev.petuska.kmdc.core.MDCDsl +import dev.petuska.kmdc.core.MDCContentDsl import dev.petuska.kmdc.core.applyAttrs import org.jetbrains.compose.web.ExperimentalComposeWebSvgApi import org.jetbrains.compose.web.dom.Span @@ -10,7 +10,7 @@ import org.jetbrains.compose.web.svg.Polygon import org.jetbrains.compose.web.svg.Svg import org.w3c.dom.HTMLSpanElement -@MDCDsl +@MDCContentDsl @Composable @OptIn(ExperimentalComposeWebSvgApi::class) internal fun DownDownIcon( diff --git a/kmdc/kmdc-select/src/jsMain/kotlin/menu/Menu.kt b/kmdc/kmdc-select/src/jsMain/kotlin/menu/Menu.kt index becaa96c..42c4d43b 100644 --- a/kmdc/kmdc-select/src/jsMain/kotlin/menu/Menu.kt +++ b/kmdc/kmdc-select/src/jsMain/kotlin/menu/Menu.kt @@ -14,7 +14,7 @@ public interface MDCSelectMenuScope : MDCListScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-select) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSelectScope.Menu( fullWidth: Boolean = true, diff --git a/kmdc/kmdc-select/src/jsMain/kotlin/menu/SelectItem.kt b/kmdc/kmdc-select/src/jsMain/kotlin/menu/SelectItem.kt index 6c64dc30..db7df2ff 100644 --- a/kmdc/kmdc-select/src/jsMain/kotlin/menu/SelectItem.kt +++ b/kmdc/kmdc-select/src/jsMain/kotlin/menu/SelectItem.kt @@ -12,7 +12,7 @@ import org.w3c.dom.HTMLLIElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-select) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSelectMenuScope.SelectItem( value: String, @@ -37,7 +37,7 @@ public fun MDCSelectMenuScope.SelectItem( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-select) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSelectMenuScope.SelectItem( text: String, diff --git a/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSlider.kt b/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSlider.kt index e13dc73e..cc7923ba 100644 --- a/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSlider.kt +++ b/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSlider.kt @@ -1,38 +1,23 @@ package dev.petuska.kmdc.slider -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import org.jetbrains.compose.web.attributes.AttrsScope +import org.jetbrains.compose.web.dom.Div +import org.jetbrains.compose.web.dom.ElementScope +import org.w3c.dom.HTMLDivElement @JsModule("@material/slider/styles.scss") private external val Style: dynamic -public class MDCSliderAttrsScope(scope: AttrsScope) : AttrsScope by scope +public interface MDCSliderAttrsScope : AttrsScope -public class MDCSliderScope(scope: ElementScope, public val options: MDCSliderOpts) : - ElementScope by scope - -public data class MDCSliderOpts( - var disabled: Boolean = false, - var discrete: Boolean = false, - var tickMarks: Boolean = false, - var value: Number = 0, - var label: String? = null, - var value2: Number? = null, - var label2: String? = null, - var min: Number = 0, - var max: Number = 100, - var step: Number = 1, -) { - val range: Boolean get() = value2 != null -} +public interface MDCSliderScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-slider) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSlider( value: Number, @@ -56,7 +41,7 @@ public fun MDCSlider( if (discrete) classes("mdc-slider--discrete") if (tickMarks) classes("mdc-slider--tick-marks") if (disabled) classes("mdc-slider--disabled") - attrs?.invoke(MDCSliderAttrsScope(this)) + applyAttrs(attrs) } ) { MDCProvider(::MDCSlider, discrete, tickMarks, range, step, min, max) { diff --git a/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderInput.kt b/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderInput.kt index add401c3..afed76f0 100644 --- a/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderInput.kt +++ b/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderInput.kt @@ -9,7 +9,7 @@ import org.jetbrains.compose.web.dom.* /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-slider) */ -@MDCDsl +@MDCContentDsl @Composable internal fun MDCSliderInput( value: Number, diff --git a/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderThumb.kt b/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderThumb.kt index 4f5307bf..bc714c16 100644 --- a/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderThumb.kt +++ b/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderThumb.kt @@ -1,20 +1,22 @@ package dev.petuska.kmdc.slider -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.aria +import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLDivElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-slider) */ -@MDCDsl +@MDCContentDsl @Composable internal fun MDCSliderThumb( value: Number?, discrete: Boolean, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, ) { Div(attrs = { classes("mdc-slider__thumb") diff --git a/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderTrack.kt b/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderTrack.kt index 9f888827..2e961858 100644 --- a/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderTrack.kt +++ b/kmdc/kmdc-slider/src/jsMain/kotlin/MDCSliderTrack.kt @@ -1,18 +1,19 @@ package dev.petuska.kmdc.slider -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLDivElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-slider) */ -@MDCDsl +@MDCContentDsl @Composable internal fun MDCSliderTrack( tickMarks: Boolean, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, ) { Div(attrs = { classes("mdc-slider__track") @@ -35,10 +36,10 @@ internal fun MDCSliderTrack( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-slider) */ -@MDCDsl +@MDCContentDsl @Composable private fun MDCSliderTickMarks( - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, ) { Div( attrs = { diff --git a/kmdc/kmdc-slider/src/jsMain/kotlin/events.kt b/kmdc/kmdc-slider/src/jsMain/kotlin/_events.kt similarity index 100% rename from kmdc/kmdc-slider/src/jsMain/kotlin/events.kt rename to kmdc/kmdc-slider/src/jsMain/kotlin/_events.kt diff --git a/kmdc/kmdc-slider/src/jsMain/kotlin/_module.kt b/kmdc/kmdc-slider/src/jsMain/kotlin/_module.kt index e4b04362..c5e7ac45 100644 --- a/kmdc/kmdc-slider/src/jsMain/kotlin/_module.kt +++ b/kmdc/kmdc-slider/src/jsMain/kotlin/_module.kt @@ -4,6 +4,7 @@ package dev.petuska.kmdc.slider import dev.petuska.kmdc.core.MDCComponent import dev.petuska.kmdc.core.MDCExternalAPI +import dev.petuska.kmdc.core.MDCLayoutComponent import org.w3c.dom.Element import org.w3c.dom.HTMLElement @@ -11,10 +12,10 @@ import org.w3c.dom.HTMLElement public external class MDCSlider( element: Element, options: MDCSliderOptions = definedExternally -) : MDCComponent { +) : MDCComponent, MDCLayoutComponent { public var root: HTMLElement public fun initialize(options: MDCSliderOptions = definedExternally): dynamic - public fun layout() + public override fun layout() public fun getValueStart(): Number public fun setValueStart(valueStart: Number) public fun getValue(): Number diff --git a/kmdc/kmdc-snackbar/src/jsMain/kotlin/MDCSnackbarActions.kt b/kmdc/kmdc-snackbar/src/jsMain/kotlin/Actions.kt similarity index 78% rename from kmdc/kmdc-snackbar/src/jsMain/kotlin/MDCSnackbarActions.kt rename to kmdc/kmdc-snackbar/src/jsMain/kotlin/Actions.kt index d1421bc3..12aa647e 100644 --- a/kmdc/kmdc-snackbar/src/jsMain/kotlin/MDCSnackbarActions.kt +++ b/kmdc/kmdc-snackbar/src/jsMain/kotlin/Actions.kt @@ -7,7 +7,6 @@ import dev.petuska.kmdc.icon.button.MDCIconButton import dev.petuska.kmdc.icon.button.MDCIconButtonScope import org.jetbrains.compose.web.attributes.ButtonType import org.jetbrains.compose.web.attributes.type -import org.jetbrains.compose.web.dom.AttrBuilderContext import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope import org.w3c.dom.HTMLButtonElement @@ -18,10 +17,10 @@ public interface MDCSnackbarActionsScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-snackbar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCSnackbarScope.MDCSnackbarActions( - attrs: AttrBuilderContext? = null, +public fun MDCSnackbarScope.Actions( + attrs: MDCAttrsRaw? = null, content: MDCContent? = null, ) { Div( @@ -37,12 +36,12 @@ public fun MDCSnackbarScope.MDCSnackbarActions( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-snackbar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCSnackbarActionsScope.MDCSnackbarAction( +public fun MDCSnackbarActionsScope.Action( type: MDCButtonType = MDCButtonType.Text, icon: MDCButtonIconType = MDCButtonIconType.None, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent>? = null, ) { MDCButton( @@ -60,29 +59,27 @@ public fun MDCSnackbarActionsScope.MDCSnackbarAction( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-snackbar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCSnackbarActionsScope.MDCSnackbarAction( +public fun MDCSnackbarActionsScope.Action( text: String, type: MDCButtonType = MDCButtonType.Text, icon: MDCButtonIconType = MDCButtonIconType.None, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, ) { - MDCSnackbarAction(type, icon, attrs) { Label(text) } + Action(type, icon, attrs) { Label(text) } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-snackbar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCSnackbarActionsScope.MDCSnackbarDismiss( - on: Boolean = false, +public fun MDCSnackbarActionsScope.Dismiss( attrs: MDCAttrsRaw? = null, content: MDCContent>? = null, ) { MDCIconButton( - on = on, attrs = { classes("mdc-snackbar__dismiss") attrs?.invoke(this) diff --git a/kmdc/kmdc-snackbar/src/jsMain/kotlin/MDCSnackbarLabel.kt b/kmdc/kmdc-snackbar/src/jsMain/kotlin/Label.kt similarity index 50% rename from kmdc/kmdc-snackbar/src/jsMain/kotlin/MDCSnackbarLabel.kt rename to kmdc/kmdc-snackbar/src/jsMain/kotlin/Label.kt index 0b3321fb..bd988c18 100644 --- a/kmdc/kmdc-snackbar/src/jsMain/kotlin/MDCSnackbarLabel.kt +++ b/kmdc/kmdc-snackbar/src/jsMain/kotlin/Label.kt @@ -1,20 +1,21 @@ package dev.petuska.kmdc.snackbar -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLDivElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-snackbar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCSnackbarScope.MDCSnackbarLabel( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null, +public fun MDCSnackbarScope.Label( + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { Div( attrs = { @@ -29,11 +30,11 @@ public fun MDCSnackbarScope.MDCSnackbarLabel( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-snackbar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCSnackbarScope.MDCSnackbarLabel( +public fun MDCSnackbarScope.Label( text: String, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, ) { - MDCSnackbarLabel(attrs) { Text(text) } + Label(attrs) { Text(text) } } diff --git a/kmdc/kmdc-snackbar/src/jsMain/kotlin/MDCSnackbar.kt b/kmdc/kmdc-snackbar/src/jsMain/kotlin/MDCSnackbar.kt index cdf5fe70..d11d4238 100644 --- a/kmdc/kmdc-snackbar/src/jsMain/kotlin/MDCSnackbar.kt +++ b/kmdc/kmdc-snackbar/src/jsMain/kotlin/MDCSnackbar.kt @@ -23,12 +23,11 @@ public interface MDCSnackbarScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-snackbar) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSnackbar( type: MDCSnackbarType = MDCSnackbarType.Default, open: Boolean = false, -// TODO dismissible: Boolean = false, timeoutMs: Int? = 5000, closeOnEscape: Boolean = true, attrs: MDCAttrs? = null, @@ -40,11 +39,12 @@ public fun MDCSnackbar( classes(type.classes) applyAttrs(attrs) }) { - MDCInitEffect(::MDCSnackbar, type) - MDCStateEffect(timeoutMs?.coerceIn(4000, 10000) ?: -1, MDCSnackbar::timeoutMs) - MDCStateEffect(closeOnEscape, MDCSnackbar::closeOnEscape) - MDCSideEffect(open) { - if (open) open() else close() + MDCProvider(::MDCSnackbar, type) { + MDCStateEffectNew(timeoutMs?.coerceIn(4000, 10000) ?: -1, MDCSnackbar::timeoutMs) + MDCStateEffectNew(closeOnEscape, MDCSnackbar::closeOnEscape) + MDCSideEffectNew(open) { + if (open) open() else close() + } } Div( attrs = { diff --git a/kmdc/kmdc-snackbar/src/jsMain/kotlin/events.kt b/kmdc/kmdc-snackbar/src/jsMain/kotlin/_events.kt similarity index 100% rename from kmdc/kmdc-snackbar/src/jsMain/kotlin/events.kt rename to kmdc/kmdc-snackbar/src/jsMain/kotlin/_events.kt diff --git a/kmdc/kmdc-switch/src/jsMain/kotlin/MDCSwitch.kt b/kmdc/kmdc-switch/src/jsMain/kotlin/MDCSwitch.kt index 25fc1428..9f4e27e0 100644 --- a/kmdc/kmdc-switch/src/jsMain/kotlin/MDCSwitch.kt +++ b/kmdc/kmdc-switch/src/jsMain/kotlin/MDCSwitch.kt @@ -1,12 +1,14 @@ package dev.petuska.kmdc.switch -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.* -import org.jetbrains.compose.web.attributes.* +import org.jetbrains.compose.web.ExperimentalComposeWebSvgApi +import org.jetbrains.compose.web.attributes.ButtonType +import org.jetbrains.compose.web.attributes.type import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.svg.* -import org.w3c.dom.* +import org.jetbrains.compose.web.svg.Path +import org.jetbrains.compose.web.svg.Svg +import org.w3c.dom.HTMLButtonElement @JsModule("@material/switch/styles.scss") private external val Style: dynamic @@ -14,14 +16,18 @@ private external val Style: dynamic /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-switch) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCSwitch( - selected: Boolean = false, - attrs: AttrBuilderContext? = null, + selected: Boolean, + label: String? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { Style + val switchId = rememberUniqueDomElementId("switch") Button(attrs = { + id(switchId) classes("mdc-switch") type(ButtonType.Button) role("switch") @@ -34,30 +40,25 @@ public fun MDCSwitch( attrs?.invoke(this) }) { MDCProvider(::MDCSwitch) { - Div(attrs = { - classes("mdc-switch__track") - }) - Div(attrs = { - classes("mdc-switch__handle-track") - }) { - Div(attrs = { - classes("mdc-switch__handle") - }) { - Div(attrs = { - classes("mdc-switch__shadow") - }) { - Div(attrs = { - classes("mdc-elevation-overlay") - }) + Div(attrs = { classes("mdc-switch__track") }) + Div(attrs = { classes("mdc-switch__handle-track") }) { + Div(attrs = { classes("mdc-switch__handle") }) { + Div(attrs = { classes("mdc-switch__shadow") }) { + Div(attrs = { classes("mdc-elevation-overlay") }) } - Div(attrs = { - classes("mdc-switch__ripple") - }) + Div(attrs = { classes("mdc-switch__ripple") }) MDCSwitchIcons() } } + Span(attrs = { classes("mdc-switch__focus-ring-wrapper") }) { + Div(attrs = { classes("mdc-switch__focus-ring") }) + } + applyContent(content) } } + label?.let { + Label(forId = switchId) { Text(it) } + } } @Composable diff --git a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/Content.kt b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/Content.kt index dbd7fbc4..0e6cc046 100644 --- a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/Content.kt +++ b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/Content.kt @@ -1,21 +1,21 @@ package dev.petuska.kmdc.tab -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.core.ContentBuilder -import org.jetbrains.compose.web.dom.* +import org.jetbrains.compose.web.dom.ElementScope +import org.jetbrains.compose.web.dom.Span import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLSpanElement public interface MDCTabContentScope : ElementScope, MDCTabBaseScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabScope.Content( - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { Span( @@ -30,11 +30,11 @@ public fun MDCTabScope.Content( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabContentScope.Icon( - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Span( attrs = { @@ -49,11 +49,11 @@ public fun MDCTabContentScope.Icon( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabContentScope.Label( - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Span( attrs = { @@ -67,11 +67,11 @@ public fun MDCTabContentScope.Label( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabContentScope.Label( text: String, - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, ) { Label(attrs = attrs, content = { Text(text) }) } diff --git a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/Tab.kt b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/Tab.kt index aa49ee78..5c359f3d 100644 --- a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/Tab.kt +++ b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/Tab.kt @@ -2,6 +2,7 @@ package dev.petuska.kmdc.tab import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* +import dev.petuska.kmdc.tab.bar.MDCTabBarContextLocal import dev.petuska.kmdc.tab.scroller.MDCTabScrollerScope import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.Button @@ -9,8 +10,8 @@ import org.jetbrains.compose.web.dom.ElementScope import org.jetbrains.compose.web.dom.Span import org.w3c.dom.HTMLButtonElement -@JsModule("@material/tab/dist/mdc.tab.css") -private external val MDCTabCSS: dynamic +@JsModule("@material/tab/mdc-tab.scss") +private external val Style: dynamic public interface MDCTabAttrsScope : AttrsScope public interface MDCTabBaseScope @@ -19,7 +20,7 @@ public interface MDCTabScope : ElementScope, MDCTabBaseScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabScrollerScope.Tab( active: Boolean = false, @@ -28,8 +29,8 @@ public fun MDCTabScrollerScope.Tab( attrs: MDCAttrs? = null, content: MDCContent? = null ) { - MDCTabCSS - context.tabs++ + Style + MDCTabBarContextLocal.current.tabs++ Button( attrs = { classes("mdc-tab") @@ -42,9 +43,10 @@ public fun MDCTabScrollerScope.Tab( applyAttrs(attrs) }, content = { - MDCInitEffect(::MDCTab, stacked, minWidth) - applyContent(content) - Span(attrs = { classes("mdc-tab__ripple") }) + MDCProvider(::MDCTab, stacked, minWidth) { + applyContent(content) + Span(attrs = { classes("mdc-tab__ripple") }) + } } ) } diff --git a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/events.kt b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/_events.kt similarity index 100% rename from kmdc/kmdc-tab-bar/src/jsMain/kotlin/events.kt rename to kmdc/kmdc-tab-bar/src/jsMain/kotlin/_events.kt diff --git a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/bar/MDCTabBar.kt b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/bar/MDCTabBar.kt index 500715e1..a1513d84 100644 --- a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/bar/MDCTabBar.kt +++ b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/bar/MDCTabBar.kt @@ -7,35 +7,29 @@ import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope import org.w3c.dom.HTMLDivElement -@JsModule("@material/tab-bar/dist/mdc.tab-bar.css") -private external val MDCTabBarCSS: dynamic +@JsModule("@material/tab-bar/mdc-tab-bar.scss") +private external val Style: dynamic public interface MDCTabBarAttrsScope : AttrsScope internal class MDCTabBarContext { internal var tabs: Int by mutableStateOf(0) - - fun applyFrom(other: MDCTabBarContext) { - tabs = other.tabs - } } -public class MDCTabBarScope internal constructor( - scope: ElementScope, - internal val context: MDCTabBarContext -) : - ElementScope by scope +internal val MDCTabBarContextLocal = strictCompositionLocalOf() + +public interface MDCTabBarScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab-bar) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabBar( attrs: MDCAttrs? = null, content: MDCContent? = null ) { - MDCTabBarCSS + Style val context = remember { MDCTabBarContext() } Div( attrs = { @@ -44,8 +38,12 @@ public fun MDCTabBar( applyAttrs(attrs) }, content = { - applyContent(content) { MDCTabBarScope(it, context) } - MDCInitEffect(::MDCTabBar, context.tabs) + CompositionLocalProvider(MDCTabBarContextLocal provides context) { + MDCProvider(::MDCTabBar, context.tabs) { + context.tabs = 0 + applyContent(content) + } + } }, ) } diff --git a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/bar/events.kt b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/bar/_events.kt similarity index 100% rename from kmdc/kmdc-tab-bar/src/jsMain/kotlin/bar/events.kt rename to kmdc/kmdc-tab-bar/src/jsMain/kotlin/bar/_events.kt diff --git a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/indicator/Content.kt b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/indicator/Content.kt index 643d525c..37ef2d1c 100644 --- a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/indicator/Content.kt +++ b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/indicator/Content.kt @@ -13,18 +13,18 @@ public enum class MDCTabIndicatorType(public vararg val classes: String) { /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab-indicator) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabIndicatorScope.Content( - indicator: MDCTabIndicatorType, - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + indicatorType: MDCTabIndicatorType, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Span( attrs = { classes("mdc-tab-indicator__content") - classes(indicator.classes) - if (indicator == MDCTabIndicatorType.Icon) aria("hidden", true) + classes(indicatorType.classes) + if (indicatorType == MDCTabIndicatorType.Icon) aria("hidden", true) attrs?.invoke(this) }, content = content @@ -34,11 +34,11 @@ public fun MDCTabIndicatorScope.Content( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab-indicator) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabIndicatorScope.Icon( - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Content(MDCTabIndicatorType.Icon, attrs, content) } @@ -46,11 +46,11 @@ public fun MDCTabIndicatorScope.Icon( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab-indicator) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabIndicatorScope.Underline( - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { Content(MDCTabIndicatorType.Underline, attrs, content) } diff --git a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/indicator/Indicator.kt b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/indicator/Indicator.kt index 2ffae788..7237accb 100644 --- a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/indicator/Indicator.kt +++ b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/indicator/Indicator.kt @@ -7,8 +7,8 @@ import org.jetbrains.compose.web.dom.ElementScope import org.jetbrains.compose.web.dom.Span import org.w3c.dom.HTMLSpanElement -@JsModule("@material/tab-indicator/dist/mdc.tab-indicator.css") -private external val MDCTabIndicatorCSS: dynamic +@JsModule("@material/tab-indicator/mdc-tab-indicator.scss") +private external val Style: dynamic public enum class MDCTabIndicatorTransition(public vararg val classes: String) { Slide, Fade("mdc-tab-indicator--fade") @@ -19,15 +19,15 @@ public interface MDCTabIndicatorScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab-indicator) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabBaseScope.Indicator( active: Boolean = false, transition: MDCTabIndicatorTransition = MDCTabIndicatorTransition.Slide, - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { - MDCTabIndicatorCSS + Style Span( attrs = { classes("mdc-tab-indicator") @@ -36,8 +36,9 @@ public fun MDCTabBaseScope.Indicator( attrs?.invoke(this) }, content = { - MDCInitEffect(::MDCTabIndicator) - applyContent(content) + MDCProvider(::MDCTabIndicator) { + applyContent(content) + } } ) } diff --git a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/scroller/Scroller.kt b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/scroller/Scroller.kt index 510313e8..84ba19ca 100644 --- a/kmdc/kmdc-tab-bar/src/jsMain/kotlin/scroller/Scroller.kt +++ b/kmdc/kmdc-tab-bar/src/jsMain/kotlin/scroller/Scroller.kt @@ -9,24 +9,21 @@ import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope import org.w3c.dom.HTMLDivElement -@JsModule("@material/tab-scroller/dist/mdc.tab-scroller.css") -private external val MDCTabScrollerCSS: dynamic +@JsModule("@material/tab-scroller/mdc-tab-scroller.scss") +private external val Style: dynamic -public class MDCTabScrollerScope internal constructor( - scope: ElementScope, - internal val context: MDCTabBarContext -) : ElementScope by scope +public interface MDCTabScrollerScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab-scroller) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTabBarScope.Scroller( - attrs: AttrsBuilder? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null ) { - MDCTabScrollerCSS + Style val context = remember { MDCTabBarContext() } Div( attrs = { @@ -34,15 +31,15 @@ public fun MDCTabBarScope.Scroller( applyAttrs(attrs) } ) { - Div( - attrs = { classes("mdc-tab-scroller__scroll-area") } - ) { + MDCProvider(::MDCTabScroller, context.tabs) { Div( - attrs = { classes("mdc-tab-scroller__scroll-content") }, - content = content.reinterpret { MDCTabScrollerScope(it, context) } - ) + attrs = { classes("mdc-tab-scroller__scroll-area") } + ) { + Div( + attrs = { classes("mdc-tab-scroller__scroll-content") }, + content = content.reinterpret() + ) + } } - this@Scroller.context.applyFrom(context) - MDCInitEffect(::MDCTabScroller, context.tabs) } } diff --git a/kmdc/kmdc-textfield/src/jsMain/kotlin/MDCTextArea.kt b/kmdc/kmdc-textfield/src/jsMain/kotlin/MDCTextArea.kt index 99860629..4f0220c9 100644 --- a/kmdc/kmdc-textfield/src/jsMain/kotlin/MDCTextArea.kt +++ b/kmdc/kmdc-textfield/src/jsMain/kotlin/MDCTextArea.kt @@ -16,7 +16,7 @@ import org.jetbrains.compose.web.dom.* /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-textfield) */ -@MDCDsl +@MDCContentDsl @Composable @Suppress("LongMethod") public fun MDCTextArea( @@ -112,9 +112,9 @@ private fun MDCTextAreaInput( helperText: String?, rows: UInt, columns: UInt, - attrs: MDCAttrs?, labelId: String, helperId: String, + attrs: MDCAttrs?, ) { TextArea(value, attrs = { classes("mdc-text-field__input") diff --git a/kmdc/kmdc-textfield/src/jsMain/kotlin/MDCTextField.kt b/kmdc/kmdc-textfield/src/jsMain/kotlin/MDCTextField.kt index e04c07f9..b945da6b 100644 --- a/kmdc/kmdc-textfield/src/jsMain/kotlin/MDCTextField.kt +++ b/kmdc/kmdc-textfield/src/jsMain/kotlin/MDCTextField.kt @@ -12,7 +12,6 @@ import org.jetbrains.compose.web.attributes.builders.InputAttrsScope import org.jetbrains.compose.web.attributes.disabled import org.jetbrains.compose.web.attributes.maxLength import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLLabelElement @@ -23,12 +22,12 @@ public enum class MDCTextFieldType(public vararg val classes: String) { Filled("mdc-text-field--filled"), Outlined("mdc-text-field--outlined") } -public class MDCTextFieldScope(scope: ElementScope) : ElementScope by scope +public interface MDCTextFieldScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-textfield) */ -@MDCDsl +@MDCContentDsl @Composable @Suppress("LongMethod") public fun MDCTextField( @@ -139,7 +138,7 @@ private fun ElementScope.MDCTextFieldCore( leadingIcon: MDCContent?, trailingIcon: MDCContent? ) { - leadingIcon?.invoke(MDCTextFieldScope(this)) + applyContent(leadingIcon) prefix?.let { Span(attrs = { classes("mdc-text-field__affix", "mdc-text-field__affix--prefix") @@ -163,16 +162,16 @@ private fun ElementScope.MDCTextFieldCore( Text(it) } } - trailingIcon?.invoke(MDCTextFieldScope(this)) + applyContent(trailingIcon) } -@MDCDsl +@MDCContentDsl @Composable internal fun MDCTextFieldHelperLine( helperText: String?, maxLength: UInt?, helperId: String, - content: ContentBuilder? = null, + content: MDCContentRaw? = null, ) { if (helperText != null || maxLength != null) { Div(attrs = { classes("mdc-text-field-helper-line") }) { @@ -190,7 +189,7 @@ internal fun MDCTextFieldHelperLine( } } -@MDCDsl +@MDCContentDsl @Composable private fun MDCTextFieldInput( value: String, diff --git a/kmdc/kmdc-textfield/src/jsMain/kotlin/_module.kt b/kmdc/kmdc-textfield/src/jsMain/kotlin/_module.kt index 565eae55..c6bc8bd7 100644 --- a/kmdc/kmdc-textfield/src/jsMain/kotlin/_module.kt +++ b/kmdc/kmdc-textfield/src/jsMain/kotlin/_module.kt @@ -4,11 +4,12 @@ package dev.petuska.kmdc.textfield import dev.petuska.kmdc.core.MDCComponent import dev.petuska.kmdc.core.MDCExternalAPI +import dev.petuska.kmdc.core.MDCLayoutComponent import dev.petuska.kmdc.ripple.MDCRipple import org.w3c.dom.Element @MDCExternalAPI -public external class MDCTextField(element: Element) : MDCComponent { +public external class MDCTextField(element: Element) : MDCComponent, MDCLayoutComponent { public var value: String public var disabled: Boolean public var valid: Boolean @@ -34,5 +35,5 @@ public external class MDCTextField(element: Element) : MDCComponent { public var trailingIconContent: String public fun focus() - public fun layout() + public override fun layout() } diff --git a/kmdc/kmdc-textfield/src/jsMain/kotlin/icon/MDCTextFieldIcon.kt b/kmdc/kmdc-textfield/src/jsMain/kotlin/icon/MDCTextFieldIcon.kt index aa2a82c7..ba92b8cc 100644 --- a/kmdc/kmdc-textfield/src/jsMain/kotlin/icon/MDCTextFieldIcon.kt +++ b/kmdc/kmdc-textfield/src/jsMain/kotlin/icon/MDCTextFieldIcon.kt @@ -3,8 +3,6 @@ package dev.petuska.kmdc.textfield.icon import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* import dev.petuska.kmdc.textfield.MDCTextFieldScope -import org.jetbrains.compose.web.dom.AttrBuilderContext -import org.jetbrains.compose.web.dom.ContentBuilder import org.jetbrains.compose.web.dom.I import org.w3c.dom.HTMLElement @@ -13,8 +11,8 @@ import org.w3c.dom.HTMLElement internal fun MDCTextFieldScope.MDCTextFieldIcon( leading: Boolean, clickable: Boolean = false, - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { I( attrs = { @@ -37,12 +35,12 @@ internal fun MDCTextFieldScope.MDCTextFieldIcon( ) } -@MDCDsl +@MDCContentDsl @Composable public fun MDCTextFieldScope.MDCTextFieldLeadingIcon( clickable: Boolean = false, - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { MDCTextFieldIcon( leading = true, @@ -52,12 +50,12 @@ public fun MDCTextFieldScope.MDCTextFieldLeadingIcon( ) } -@MDCDsl +@MDCContentDsl @Composable public fun MDCTextFieldScope.MDCTextFieldTrailingIcon( clickable: Boolean = false, - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { MDCTextFieldIcon( leading = false, diff --git a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipActions.kt b/kmdc/kmdc-tooltip/src/jsMain/kotlin/Actions.kt similarity index 77% rename from kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipActions.kt rename to kmdc/kmdc-tooltip/src/jsMain/kotlin/Actions.kt index def8ec0c..b48c473a 100644 --- a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipActions.kt +++ b/kmdc/kmdc-tooltip/src/jsMain/kotlin/Actions.kt @@ -5,25 +5,25 @@ import dev.petuska.kmdc.button.MDCButton import dev.petuska.kmdc.button.MDCButtonIconType import dev.petuska.kmdc.button.MDCButtonScope import dev.petuska.kmdc.button.MDCButtonType +import dev.petuska.kmdc.core.MDCAttrsRaw import dev.petuska.kmdc.core.MDCContent -import dev.petuska.kmdc.core.MDCDsl -import org.jetbrains.compose.web.dom.AttrBuilderContext +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.reinterpret import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope import org.jetbrains.compose.web.dom.Text import org.w3c.dom.HTMLButtonElement import org.w3c.dom.HTMLDivElement -public class MDCTooltipRichActionsScope(scope: ElementScope) : - ElementScope by scope +public interface MDCTooltipRichActionsScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCRichTooltipScope.MDCTooltipActions( - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent? = null, ) { Div( @@ -31,19 +31,19 @@ public fun MDCRichTooltipScope.MDCTooltipActions( classes("mdc-tooltip--rich-actions") attrs?.invoke(this) }, - content = content?.let { { MDCTooltipRichActionsScope(this).it() } } + content = content.reinterpret() ) } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTooltipRichActionsScope.MDCTooltipAction( type: MDCButtonType = MDCButtonType.Text, icon: MDCButtonIconType = MDCButtonIconType.None, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, content: MDCContent>? = null, ) { MDCButton(type = type, icon = icon, attrs = attrs, content = content) @@ -52,13 +52,13 @@ public fun MDCTooltipRichActionsScope.MDCTooltipAction( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTooltipRichActionsScope.MDCTooltipAction( text: String, type: MDCButtonType = MDCButtonType.Text, icon: MDCButtonIconType = MDCButtonIconType.None, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, ) { MDCTooltipAction(type, icon, attrs) { Text(text) diff --git a/kmdc/kmdc-tooltip/src/jsMain/kotlin/Content.kt b/kmdc/kmdc-tooltip/src/jsMain/kotlin/Content.kt new file mode 100644 index 00000000..cc2a6ed9 --- /dev/null +++ b/kmdc/kmdc-tooltip/src/jsMain/kotlin/Content.kt @@ -0,0 +1,45 @@ +package dev.petuska.kmdc.tooltip + +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContent +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.reinterpret +import org.jetbrains.compose.web.dom.ElementScope +import org.jetbrains.compose.web.dom.P +import org.jetbrains.compose.web.dom.Text +import org.w3c.dom.HTMLParagraphElement + +public interface MDCTooltipRichContentScope : ElementScope + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) + */ +@MDCContentDsl +@Composable +public fun MDCRichTooltipScope.Content( + attrs: MDCAttrsRaw? = null, + content: MDCContent? = null, +) { + P( + attrs = { + classes("mdc-tooltip__content") + attrs?.invoke(this) + }, + content = content.reinterpret() + ) +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) + */ +@MDCContentDsl +@Composable +public fun MDCRichTooltipScope.Content( + text: String, + attrs: MDCAttrsRaw? = null, +) { + Content(attrs) { + Text(text) + } +} diff --git a/kmdc/kmdc-tooltip/src/jsMain/kotlin/Link.kt b/kmdc/kmdc-tooltip/src/jsMain/kotlin/Link.kt new file mode 100644 index 00000000..cf2f7a34 --- /dev/null +++ b/kmdc/kmdc-tooltip/src/jsMain/kotlin/Link.kt @@ -0,0 +1,46 @@ +package dev.petuska.kmdc.tooltip + +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import org.jetbrains.compose.web.attributes.href +import org.jetbrains.compose.web.dom.A +import org.jetbrains.compose.web.dom.Text +import org.w3c.dom.HTMLAnchorElement + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) + */ +@MDCContentDsl +@Composable +public fun MDCTooltipRichContentScope.Link( + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, +) { + A( + attrs = { + classes("mdc-tooltip__content-link") + attrs?.invoke(this) + }, + content = content + ) +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) + */ +@MDCContentDsl +@Composable +public fun MDCTooltipRichContentScope.Link( + text: String, + href: String, + attrs: MDCAttrsRaw? = null, +) { + Link(attrs = { + href(href) + attrs?.invoke(this) + }) { + Text(text) + } +} diff --git a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCRichTooltip.kt b/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCRichTooltip.kt index d6e2e5cc..1b935aad 100644 --- a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCRichTooltip.kt +++ b/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCRichTooltip.kt @@ -1,11 +1,8 @@ package dev.petuska.kmdc.tooltip import androidx.compose.runtime.Composable -import dev.petuska.kmdc.core.MDCAttrsDsl -import dev.petuska.kmdc.core.MDCContent -import dev.petuska.kmdc.core.MDCDsl +import dev.petuska.kmdc.core.* import org.jetbrains.compose.web.attributes.AttrsScope -import org.jetbrains.compose.web.dom.AttrBuilderContext import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope import org.w3c.dom.Element @@ -16,7 +13,8 @@ public class MDCRichTooltipOpts( public var interactive: Boolean = false, ) -public class MDCRichTooltipScope(scope: ElementScope) : ElementScope by scope +public interface MDCRichTooltipScope : ElementScope + public class MDCRichTooltipAnchorScope( public val persistent: Boolean = false, public var interactive: Boolean = false, @@ -40,15 +38,15 @@ public class MDCRichTooltipAnchorScope( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCRichTooltip( id: String, persistent: Boolean = false, interactive: Boolean = false, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, anchorContent: MDCContent? = null, - tooltipContent: MDCContent? = null, + content: MDCContent? = null, ) { Div( attrs = { @@ -71,7 +69,7 @@ public fun MDCRichTooltip( if (interactive) attr("role", "dialog") attrs?.invoke(this) }, - content = tooltipContent?.let { { MDCRichTooltipScope(this).it() } } + content = content.reinterpret() ) } } diff --git a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltip.kt b/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltip.kt index ab9ff619..c700e46e 100644 --- a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltip.kt +++ b/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltip.kt @@ -2,32 +2,31 @@ package dev.petuska.kmdc.tooltip import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.* +import dev.petuska.kmdc.core.applyAttrs import org.jetbrains.compose.web.attributes.AttrsScope -import org.jetbrains.compose.web.dom.AttrBuilderContext -import org.jetbrains.compose.web.dom.ContentBuilder import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.ElementScope import org.jetbrains.compose.web.dom.Text import org.w3c.dom.Element import org.w3c.dom.HTMLDivElement -@JsModule("@material/tooltip/dist/mdc.tooltip.css") -private external val MDCTooltipStyle: dynamic +@JsModule("@material/tooltip/styles.scss") +private external val Style: dynamic public interface MDCTooltipScope : ElementScope /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTooltip( id: String, persistent: Boolean = false, - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null, + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, ) { - MDCTooltipStyle + Style Div( attrs = { id(id) @@ -41,24 +40,25 @@ public fun MDCTooltip( applyAttrs(attrs) } ) { - MDCInitEffect(::MDCTooltip, persistent) - Div( - attrs = { classes("mdc-tooltip__surface", "mdc-tooltip__surface-animation") }, - content = content.reinterpret() - ) + MDCProvider(::MDCTooltip, persistent) { + Div( + attrs = { classes("mdc-tooltip__surface", "mdc-tooltip__surface-animation") }, + content = content.reinterpret() + ) + } } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTooltip( id: String, text: String, persistent: Boolean = false, - attrs: AttrBuilderContext? = null, + attrs: MDCAttrsRaw? = null, ) { MDCTooltip( id = id, diff --git a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipContent.kt b/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipContent.kt deleted file mode 100644 index f2796877..00000000 --- a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipContent.kt +++ /dev/null @@ -1,42 +0,0 @@ -package dev.petuska.kmdc.tooltip - -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* - -public class MDCTooltipRichContentScope(scope: ElementScope) : - ElementScope by scope - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) - */ -@MDCDsl -@Composable -public fun MDCRichTooltipScope.MDCTooltipContent( - attrs: AttrBuilderContext? = null, - content: MDCContent? = null, -) { - P( - attrs = { - classes("mdc-tooltip__content") - attrs?.invoke(this) - }, - content = content?.let { { MDCTooltipRichContentScope(this).it() } } - ) -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) - */ -@MDCDsl -@Composable -public fun MDCRichTooltipScope.MDCTooltipContent( - text: String, - attrs: AttrBuilderContext? = null, -) { - MDCTooltipContent(attrs) { - Text(text) - } -} diff --git a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipLink.kt b/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipLink.kt deleted file mode 100644 index c9509fa6..00000000 --- a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipLink.kt +++ /dev/null @@ -1,45 +0,0 @@ -package dev.petuska.kmdc.tooltip - -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder -import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) - */ -@MDCDsl -@Composable -public fun MDCTooltipRichContentScope.MDCTooltipLink( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null, -) { - A( - attrs = { - classes("mdc-tooltip__content-link") - attrs?.invoke(this) - }, - content = content - ) -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) - */ -@MDCDsl -@Composable -public fun MDCTooltipRichContentScope.MDCTooltipLink( - text: String, - href: String, - attrs: AttrBuilderContext? = null, -) { - MDCTooltipLink(attrs = { - href(href) - attrs?.invoke(this) - }) { - Text(text) - } -} diff --git a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipTitle.kt b/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipTitle.kt deleted file mode 100644 index c0a035d0..00000000 --- a/kmdc/kmdc-tooltip/src/jsMain/kotlin/MDCTooltipTitle.kt +++ /dev/null @@ -1,40 +0,0 @@ -package dev.petuska.kmdc.tooltip - -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder -import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) - */ -@MDCDsl -@Composable -public fun MDCRichTooltipScope.MDCTooltipTitle( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null, -) { - H2( - attrs = { - classes("mdc-tooltip__title") - attrs?.invoke(this) - }, - content = content - ) -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) - */ -@MDCDsl -@Composable -public fun MDCRichTooltipScope.MDCTooltipTitle( - text: String, - attrs: AttrBuilderContext? = null, -) { - MDCTooltipTitle(attrs) { - Text(text) - } -} diff --git a/kmdc/kmdc-tooltip/src/jsMain/kotlin/Title.kt b/kmdc/kmdc-tooltip/src/jsMain/kotlin/Title.kt new file mode 100644 index 00000000..11467eae --- /dev/null +++ b/kmdc/kmdc-tooltip/src/jsMain/kotlin/Title.kt @@ -0,0 +1,41 @@ +package dev.petuska.kmdc.tooltip + +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import org.jetbrains.compose.web.dom.H2 +import org.jetbrains.compose.web.dom.Text +import org.w3c.dom.HTMLHeadingElement + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) + */ +@MDCContentDsl +@Composable +public fun MDCRichTooltipScope.Title( + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null, +) { + H2( + attrs = { + classes("mdc-tooltip__title") + attrs?.invoke(this) + }, + content = content + ) +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tooltip) + */ +@MDCContentDsl +@Composable +public fun MDCRichTooltipScope.Title( + text: String, + attrs: MDCAttrsRaw? = null, +) { + Title(attrs) { + Text(text) + } +} diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarAction.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Action.kt similarity index 64% rename from kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarAction.kt rename to kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Action.kt index cfba7733..413a5329 100644 --- a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarAction.kt +++ b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Action.kt @@ -1,16 +1,20 @@ package dev.petuska.kmdc.top.app.bar -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.icon.button.* -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import dev.petuska.kmdc.icon.button.MDCIconButton +import dev.petuska.kmdc.icon.button.MDCIconLink +import org.w3c.dom.HTMLAnchorElement +import org.w3c.dom.HTMLButtonElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCTopAppBarSectionScope.MDCTopAppBarActionButton( +public fun MDCTopAppBarSectionScope.ActionButton( on: Boolean = false, attrs: MDCAttrsRaw? = null, content: MDCContentRaw? = null, @@ -28,9 +32,9 @@ public fun MDCTopAppBarSectionScope.MDCTopAppBarActionButton( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCTopAppBarSectionScope.MDCTopAppBarActionLink( +public fun MDCTopAppBarSectionScope.ActionLink( on: Boolean = false, attrs: MDCAttrsRaw? = null, content: MDCContentRaw? = null diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBar.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBar.kt index dc23fb31..5fc416f1 100644 --- a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBar.kt +++ b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBar.kt @@ -2,53 +2,45 @@ package dev.petuska.kmdc.top.app.bar import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider -import androidx.compose.runtime.ProvidableCompositionLocal -import androidx.compose.runtime.compositionLocalOf import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.AttrBuilderContext -import org.jetbrains.compose.web.dom.ContentBuilder +import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.ElementScope import org.jetbrains.compose.web.dom.Header import org.jetbrains.compose.web.dom.Main import org.w3c.dom.HTMLElement -@JsModule("@material/top-app-bar/dist/mdc.top-app-bar.css") -private external val MDCTopAppBarStyle: dynamic +@JsModule("@material/top-app-bar/mdc-top-app-bar.scss") +private external val Style: dynamic -public data class MDCTopAppBarContextOpts( - var type: Type = Type.Default, -) { - public enum class Type(public val mainAdjustClass: String, public vararg val classes: String) { - Default("mdc-top-app-bar--fixed-adjust"), - Short("mdc-top-app-bar--short-fixed-adjust", "mdc-top-app-bar--short"), - ShortCollapsed("mdc-top-app-bar--short-fixed-adjust", "mdc-top-app-bar--short", "mdc-top-app-bar--short-collapsed"), - Fixed("mdc-top-app-bar--fixed-adjust", "mdc-top-app-bar--fixed"), - Prominent("mdc-top-app-bar--prominent-fixed-adjust", "mdc-top-app-bar--prominent"), - Dense("mdc-top-app-bar--dense-fixed-adjust", "mdc-top-app-bar--dense") - } +public enum class MDCTopAppBarType(public val mainAdjustClass: String, public vararg val classes: String) { + Default("mdc-top-app-bar--fixed-adjust"), + Short("mdc-top-app-bar--short-fixed-adjust", "mdc-top-app-bar--short"), + ShortCollapsed("mdc-top-app-bar--short-fixed-adjust", "mdc-top-app-bar--short", "mdc-top-app-bar--short-collapsed"), + Fixed("mdc-top-app-bar--fixed-adjust", "mdc-top-app-bar--fixed"), + Prominent("mdc-top-app-bar--prominent-fixed-adjust", "mdc-top-app-bar--prominent"), + Dense("mdc-top-app-bar--dense-fixed-adjust", "mdc-top-app-bar--dense") } -public val MDCTopAppBarType: ProvidableCompositionLocal = - compositionLocalOf { MDCTopAppBarContextOpts.Type.Default } +internal val MDCTopAppBarTypeLocal = strictCompositionLocalOf() public class MDCTopAppBarContextScope +public interface MDCTopAppBarAttrsScope : AttrsScope public interface MDCTopAppBarScope : ElementScope /** - * If using this [MDCTopAppBar] component, all the page content must be placed into [MDCTopAppBarMain] container. + * If using this [TopAppBar] component, all the page content must be placed into [Main] container. * * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCTopAppBarContext( - opts: MDCAttrs? = null, +public fun MDCTopAppBar( + type: MDCTopAppBarType = MDCTopAppBarType.Default, content: MDCContent? = null ) { - MDCTopAppBarStyle - val options = MDCTopAppBarContextOpts().apply { opts?.invoke(this) } - CompositionLocalProvider(MDCTopAppBarType provides options.type) { + Style + CompositionLocalProvider(MDCTopAppBarTypeLocal provides type) { content?.let { MDCTopAppBarContextScope().it() } } } @@ -56,36 +48,37 @@ public fun MDCTopAppBarContext( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCTopAppBarContextScope.MDCTopAppBar( - attrs: AttrBuilderContext? = null, +public fun MDCTopAppBarContextScope.TopAppBar( + attrs: MDCAttrs? = null, content: MDCContent? = null ) { - val type = MDCTopAppBarType.current + val type = MDCTopAppBarTypeLocal.current Header( attrs = { classes("mdc-top-app-bar") classes(type.classes) - attrs?.invoke(this) + applyAttrs(attrs) }, ) { - MDCInitEffect(::MDCTopAppBar) - applyContent(content) + MDCProvider(::MDCTopAppBar) { + applyContent(content) + } } } /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCTopAppBarContextScope.MDCTopAppBarMain( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null +public fun MDCTopAppBarContextScope.Main( + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { - val type = MDCTopAppBarType.current - Main( + val type = MDCTopAppBarTypeLocal.current + org.jetbrains.compose.web.dom.Main( attrs = { classes(type.mainAdjustClass) attrs?.invoke(this) diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarNavigation.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarNavigation.kt deleted file mode 100644 index 80e546f5..00000000 --- a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarNavigation.kt +++ /dev/null @@ -1,46 +0,0 @@ -package dev.petuska.kmdc.top.app.bar - -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.icon.button.* -import org.w3c.dom.* - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) - */ -@MDCDsl -@Composable -public fun MDCTopAppBarSectionScope.MDCTopAppBarNavigationButton( - on: Boolean = false, - attrs: MDCAttrsRaw? = null, - content: MDCContentRaw? = null, -) { - MDCIconButton( - on = on, - attrs = { - classes("mdc-top-app-bar__navigation-icon") - attrs?.invoke(this) - }, - content = content - ) -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) - */ -@MDCDsl -@Composable -public fun MDCTopAppBarSectionScope.MDCTopAppBarNavigationLink( - on: Boolean = false, - attrs: MDCAttrsRaw? = null, - content: MDCContentRaw? = null, -) { - MDCIconLink( - on = on, - attrs = { - classes("mdc-top-app-bar__navigation-icon") - attrs?.invoke(this) - }, - content = content - ) -} diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarRow.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarRow.kt deleted file mode 100644 index 2d53e294..00000000 --- a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarRow.kt +++ /dev/null @@ -1,26 +0,0 @@ -package dev.petuska.kmdc.top.app.bar - -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* - -public class MDCTopAppBarRowScope(scope: ElementScope) : ElementScope by scope - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) - */ -@MDCDsl -@Composable -public fun MDCTopAppBarScope.MDCTopAppBarRow( - attrs: AttrBuilderContext? = null, - content: MDCContent? = null -) { - Div( - attrs = { - classes("mdc-top-app-bar__row") - attrs?.invoke(this) - }, - content = content?.let { { MDCTopAppBarRowScope(this).it() } } - ) -} diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarSection.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarSection.kt deleted file mode 100644 index 82e44fde..00000000 --- a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarSection.kt +++ /dev/null @@ -1,42 +0,0 @@ -package dev.petuska.kmdc.top.app.bar - -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* - -public class MDCTopAppBarSectionScope(scope: ElementScope) : ElementScope by scope - -public data class MDCTopAppBarSectionOpts( - var align: Align = Align.Start, - var role: String? = null, -) { - public enum class Align(public vararg val classes: String) { - Start("mdc-top-app-bar__section--align-start"), - End("mdc-top-app-bar__section--align-end"), - } -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) - */ -@MDCDsl -@Composable -public fun MDCTopAppBarRowScope.MDCTopAppBarSection( - opts: MDCAttrs? = null, - attrs: AttrBuilderContext? = null, - content: MDCContent? = null -) { - val options = MDCTopAppBarSectionOpts().apply { opts?.invoke(this) } - Section( - attrs = { - classes("mdc-top-app-bar__section") - classes(options.align.classes) - options.role?.let { - attr("role", it) - } - attrs?.invoke(this) - }, - content = content?.let { { MDCTopAppBarSectionScope(this).it() } } - ) -} diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarTitle.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarTitle.kt deleted file mode 100644 index f5673297..00000000 --- a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/MDCTopAppBarTitle.kt +++ /dev/null @@ -1,40 +0,0 @@ -package dev.petuska.kmdc.top.app.bar - -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.dom.ContentBuilder -import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) - */ -@MDCDsl -@Composable -public fun MDCTopAppBarSectionScope.MDCTopAppBarTitle( - attrs: AttrBuilderContext? = null, - content: ContentBuilder? = null -) { - Span( - attrs = { - classes("mdc-top-app-bar__title") - attrs?.invoke(this) - }, - content = content - ) -} - -/** - * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) - */ -@MDCDsl -@Composable -public fun MDCTopAppBarSectionScope.MDCTopAppBarTitle( - text: String, - attrs: AttrBuilderContext? = null, -) { - MDCTopAppBarTitle(attrs = attrs) { - Text(text) - } -} diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Navigation.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Navigation.kt new file mode 100644 index 00000000..4a2cb7d8 --- /dev/null +++ b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Navigation.kt @@ -0,0 +1,52 @@ +package dev.petuska.kmdc.top.app.bar + +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrs +import dev.petuska.kmdc.core.MDCContent +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.icon.button.MDCIconButton +import dev.petuska.kmdc.icon.button.MDCIconButtonAttrsScope +import dev.petuska.kmdc.icon.button.MDCIconButtonScope +import dev.petuska.kmdc.icon.button.MDCIconLink +import org.w3c.dom.HTMLAnchorElement +import org.w3c.dom.HTMLButtonElement + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) + */ +@MDCContentDsl +@Composable +public fun MDCTopAppBarSectionScope.NavButton( + touch: Boolean = false, + attrs: MDCAttrs>? = null, + content: MDCContent>? = null +) { + MDCIconButton( + touch = touch, + attrs = { + classes("mdc-top-app-bar__navigation-icon") + attrs?.invoke(this) + }, + content = content + ) +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) + */ +@MDCContentDsl +@Composable +public fun MDCTopAppBarSectionScope.NavLink( + touch: Boolean = false, + attrs: MDCAttrs>? = null, + content: MDCContent>? = null +) { + MDCIconLink( + touch = touch, + attrs = { + classes("mdc-top-app-bar__navigation-icon") + attrs?.invoke(this) + }, + content = content + ) +} diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Row.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Row.kt new file mode 100644 index 00000000..25898e89 --- /dev/null +++ b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Row.kt @@ -0,0 +1,30 @@ +package dev.petuska.kmdc.top.app.bar + +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContent +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.reinterpret +import org.jetbrains.compose.web.dom.Div +import org.jetbrains.compose.web.dom.ElementScope +import org.w3c.dom.HTMLDivElement + +public interface MDCTopAppBarRowScope : ElementScope + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) + */ +@MDCContentDsl +@Composable +public fun MDCTopAppBarScope.Row( + attrs: MDCAttrsRaw? = null, + content: MDCContent? = null +) { + Div( + attrs = { + classes("mdc-top-app-bar__row") + attrs?.invoke(this) + }, + content = content.reinterpret() + ) +} diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Section.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Section.kt new file mode 100644 index 00000000..7abb08be --- /dev/null +++ b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Section.kt @@ -0,0 +1,41 @@ +package dev.petuska.kmdc.top.app.bar + +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCContent +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.classes +import dev.petuska.kmdc.core.reinterpret +import org.jetbrains.compose.web.dom.AttrBuilderContext +import org.jetbrains.compose.web.dom.ElementScope +import org.w3c.dom.HTMLElement + +public interface MDCTopAppBarSectionScope : ElementScope + +public enum class MDCTopAppBarSectionAlign(public vararg val classes: String) { + Start("mdc-top-app-bar__section--align-start"), + End("mdc-top-app-bar__section--align-end"), +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) + */ +@MDCContentDsl +@Composable +public fun MDCTopAppBarRowScope.Section( + align: MDCTopAppBarSectionAlign = MDCTopAppBarSectionAlign.Start, + role: String? = null, + attrs: AttrBuilderContext? = null, + content: MDCContent? = null +) { + org.jetbrains.compose.web.dom.Section( + attrs = { + classes("mdc-top-app-bar__section") + classes(align.classes) + role?.let { + attr("role", it) + } + attrs?.invoke(this) + }, + content = content.reinterpret() + ) +} diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Title.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Title.kt new file mode 100644 index 00000000..cda3c247 --- /dev/null +++ b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/Title.kt @@ -0,0 +1,41 @@ +package dev.petuska.kmdc.top.app.bar + +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import org.jetbrains.compose.web.dom.Span +import org.jetbrains.compose.web.dom.Text +import org.w3c.dom.HTMLSpanElement + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) + */ +@MDCContentDsl +@Composable +public fun MDCTopAppBarSectionScope.Title( + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null +) { + Span( + attrs = { + classes("mdc-top-app-bar__title") + attrs?.invoke(this) + }, + content = content + ) +} + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) + */ +@MDCContentDsl +@Composable +public fun MDCTopAppBarSectionScope.Title( + text: String, + attrs: MDCAttrsRaw? = null, +) { + Title(attrs = attrs) { + Text(text) + } +} diff --git a/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/_events.kt b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/_events.kt new file mode 100644 index 00000000..5cf2067a --- /dev/null +++ b/kmdc/kmdc-top-app-bar/src/jsMain/kotlin/_events.kt @@ -0,0 +1,14 @@ +package dev.petuska.kmdc.top.app.bar + +import dev.petuska.kmdc.core.MDCAttrsDsl +import dev.petuska.kmdc.core.MDCEventListener +import dev.petuska.kmdc.core.addMdcEventListener +import kotlin.js.Json + +/** + * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-top-app-bar) + */ +@MDCAttrsDsl +public fun MDCTopAppBarAttrsScope.onNav(listener: MDCEventListener) { + addMdcEventListener("MDCTopAppBar:nav", listener) +} diff --git a/kmdc/kmdc-touch-target/src/jsMain/kotlin/MDCTouchTarget.kt b/kmdc/kmdc-touch-target/src/jsMain/kotlin/MDCTouchTarget.kt index 9fbf3170..bcff6c50 100644 --- a/kmdc/kmdc-touch-target/src/jsMain/kotlin/MDCTouchTarget.kt +++ b/kmdc/kmdc-touch-target/src/jsMain/kotlin/MDCTouchTarget.kt @@ -1,24 +1,26 @@ package dev.petuska.kmdc.touch.target -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import dev.petuska.kmdc.core.ContentBuilder -import org.jetbrains.compose.web.dom.* -import org.w3c.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw +import dev.petuska.kmdc.core.applyAttrs +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLDivElement @JsModule("@material/touch-target/mdc-touch-target.scss") -private external val MDCTouchTargetStyles: dynamic +private external val Style: dynamic /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-touch-target) */ -@MDCDsl +@MDCContentDsl @Composable public fun MDCTouchTarget( - attrs: AttrsBuilder? = null, - content: ContentBuilder? = null + attrs: MDCAttrsRaw? = null, + content: MDCContentRaw? = null ) { - MDCTouchTargetStyles + Style Div( attrs = { classes("mdc-touch-target-wrapper") diff --git a/kmdc/kmdc-typography/src/jsMain/kotlin/Header.kt b/kmdc/kmdc-typography/src/jsMain/kotlin/Heading.kt similarity index 67% rename from kmdc/kmdc-typography/src/jsMain/kotlin/Header.kt rename to kmdc/kmdc-typography/src/jsMain/kotlin/Heading.kt index e7f7eae5..e1f22bd1 100644 --- a/kmdc/kmdc-typography/src/jsMain/kotlin/Header.kt +++ b/kmdc/kmdc-typography/src/jsMain/kotlin/Heading.kt @@ -1,16 +1,17 @@ package dev.petuska.kmdc.typography import androidx.compose.runtime.Composable -import dev.petuska.kmdc.core.MDCDsl +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl import org.jetbrains.compose.web.dom.* import org.w3c.dom.HTMLHeadingElement /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-typography) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCH1(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCH1(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Headline1, text, attrs) { a, c -> H1(a, c) } @@ -18,9 +19,9 @@ public fun MDCH1(text: String, attrs: AttrBuilderContext? = /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-typography) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCH2(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCH2(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Headline2, text, attrs) { a, c -> H2(a, c) } @@ -28,9 +29,9 @@ public fun MDCH2(text: String, attrs: AttrBuilderContext? = /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-typography) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCH3(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCH3(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Headline3, text, attrs) { a, c -> H3(a, c) } @@ -38,9 +39,9 @@ public fun MDCH3(text: String, attrs: AttrBuilderContext? = /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-typography) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCH4(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCH4(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Headline4, text, attrs) { a, c -> H4(a, c) } @@ -48,9 +49,9 @@ public fun MDCH4(text: String, attrs: AttrBuilderContext? = /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-typography) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCH5(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCH5(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Headline5, text, attrs) { a, c -> H5(a, c) } @@ -58,9 +59,9 @@ public fun MDCH5(text: String, attrs: AttrBuilderContext? = /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-typography) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCH6(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCH6(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Headline6, text, attrs) { a, c -> H6(a, c) } diff --git a/kmdc/kmdc-typography/src/jsMain/kotlin/MDCTypography.kt b/kmdc/kmdc-typography/src/jsMain/kotlin/MDCTypography.kt index c72f9f3d..21af4ed6 100644 --- a/kmdc/kmdc-typography/src/jsMain/kotlin/MDCTypography.kt +++ b/kmdc/kmdc-typography/src/jsMain/kotlin/MDCTypography.kt @@ -2,9 +2,14 @@ package dev.petuska.kmdc.typography import androidx.compose.runtime.Composable import dev.petuska.kmdc.core.MDCAttrsDsl -import dev.petuska.kmdc.core.MDCDsl +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.MDCContentRaw import org.jetbrains.compose.web.attributes.AttrsScope -import org.jetbrains.compose.web.dom.* +import org.jetbrains.compose.web.dom.H6 +import org.jetbrains.compose.web.dom.P +import org.jetbrains.compose.web.dom.Span +import org.jetbrains.compose.web.dom.Text import org.w3c.dom.HTMLElement import org.w3c.dom.HTMLHeadingElement import org.w3c.dom.HTMLParagraphElement @@ -24,13 +29,13 @@ public fun AttrsScope<*>.mdcTypography() { /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-typography) */ -@MDCDsl +@MDCContentDsl @Composable internal fun MDCText( style: MDCTypographyStyle, text: String, - attrs: AttrBuilderContext?, - element: @Composable (attrs: AttrBuilderContext?, content: ContentBuilder?) -> Unit, + attrs: MDCAttrsRaw?, + element: @Composable (attrs: MDCAttrsRaw?, content: MDCContentRaw?) -> Unit, ) { Style val clazz = "mdc-typography--${style.style}" @@ -45,9 +50,9 @@ internal fun MDCText( /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-typography) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCSubtitle1(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCSubtitle1(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Subtitle1, text, attrs) { a, c -> H6(a, c) } @@ -55,9 +60,9 @@ public fun MDCSubtitle1(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCSubtitle2(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Subtitle2, text, attrs) { a, c -> H6(a, c) } @@ -65,9 +70,9 @@ public fun MDCSubtitle2(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCBody1(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Body1, text, attrs) { a, c -> P(a, c) } @@ -75,9 +80,9 @@ public fun MDCBody1(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCBody2(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Body2, text, attrs) { a, c -> P(a, c) } @@ -85,9 +90,9 @@ public fun MDCBody2(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCCaption(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Caption, text, attrs) { a, c -> Span(a, c) } @@ -95,9 +100,9 @@ public fun MDCCaption(text: String, attrs: AttrBuilderContext? /** * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-typography) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCButtonText(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCButtonText(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Button, text, attrs) { a, c -> Span(a, c) } @@ -105,9 +110,9 @@ public fun MDCButtonText(text: String, attrs: AttrBuilderContext? = null): Unit = +public fun MDCOverline(text: String, attrs: MDCAttrsRaw? = null): Unit = MDCText(MDCTypographyStyle.Overline, text, attrs) { a, c -> Span(a, c) } diff --git a/kmdcx/kmdcx-icons/src/jsMain/kotlin/MDCIcon.kt b/kmdcx/kmdcx-icons/src/jsMain/kotlin/MDCIcon.kt index c9d3b404..43a65307 100644 --- a/kmdcx/kmdcx-icons/src/jsMain/kotlin/MDCIcon.kt +++ b/kmdcx/kmdcx-icons/src/jsMain/kotlin/MDCIcon.kt @@ -1,1879 +1,90 @@ package dev.petuska.kmdcx.icons -import androidx.compose.runtime.* -import dev.petuska.kmdc.core.* -import org.jetbrains.compose.web.dom.* +import androidx.compose.runtime.Composable +import dev.petuska.kmdc.core.MDCAttrsDsl +import dev.petuska.kmdc.core.MDCAttrsRaw +import dev.petuska.kmdc.core.MDCContentDsl +import dev.petuska.kmdc.core.classes +import org.jetbrains.compose.web.attributes.AttrsScope +import org.jetbrains.compose.web.dom.AttrBuilderContext +import org.jetbrains.compose.web.dom.I +import org.jetbrains.compose.web.dom.Span import org.jetbrains.compose.web.dom.Text -import org.w3c.dom.* +import org.w3c.dom.HTMLElement +import org.w3c.dom.HTMLSpanElement @JsModule("material-icons/iconfont/material-icons.css") -private external val MDCIconStyle: dynamic +private external val Style: dynamic /** * [JS API](https://github.com/marella/material-icons/tree/v1.10.4) */ -@MDCDsl +@MDCAttrsDsl +public fun AttrsScope<*>.mdcIcon(type: MDCIconType = MDCIconType.Filled) { + classes(type.classes) +} + +/** + * [JS API](https://github.com/marella/material-icons/tree/v1.10.4) + */ +@MDCContentDsl @Composable -public fun MDCIconSpan( - opts: MDCAttrs? = null, - attrs: AttrBuilderContext? = null +public fun MDCIcon( + base: MDCIconBase, + icon: MDCIcon, + type: MDCIconType = MDCIconType.Filled, + attrs: MDCAttrsRaw? = null ) { - MDCIconStyle - val options = MDCIconOpts().apply { opts?.invoke(this) } - - Span(attrs = { - classes(options.type.classes) - attrs?.invoke(this) - }) { - Text(options.icon.iconType) + when (base) { + MDCIconBase.Span -> MDCIconSpan(icon, type, attrs) + MDCIconBase.I -> MDCIconI(icon, type, attrs) } } /** * [JS API](https://github.com/marella/material-icons/tree/v1.10.4) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCIconI( - opts: MDCAttrs? = null, - attrs: AttrBuilderContext? = null +public fun MDCIconSpan( + icon: MDCIcon, + type: MDCIconType = MDCIconType.Filled, + attrs: MDCAttrsRaw? = null ) { - MDCIconStyle - val options = MDCIconOpts().apply { opts?.invoke(this) } - - I(attrs = { - classes(options.type.classes) + Style + Span(attrs = { + mdcIcon(type) attrs?.invoke(this) }) { - Text(options.icon.iconType) + Text(icon.type) } } /** * [JS API](https://github.com/marella/material-icons/tree/v1.10.4) */ -@MDCDsl +@MDCContentDsl @Composable -public fun MDCIcon(opts: MDCAttrs? = null, attrs: AttrBuilderContext? = null) { - val options = MDCIconOpts().apply { opts?.invoke(this) } - when (options.base) { - MDCIconOpts.MDCIconBase.Span -> MDCIconSpan(opts, attrs) - MDCIconOpts.MDCIconBase.I -> MDCIconI(opts, attrs) - } -} - -public data class MDCIconOpts( - var type: Type = Type.Filled, - var icon: MDCIconType = MDCIconType.None, - var base: MDCIconBase = MDCIconBase.Span +public fun MDCIconI( + icon: MDCIcon, + type: MDCIconType = MDCIconType.Filled, + attrs: AttrBuilderContext? = null ) { - public enum class Type(public vararg val classes: String) { - Filled("material-icons"), - Outlined("material-icons-outlined"), - Round("material-icons-round"), - Sharp("material-icons-sharp"), - TwoTone("material-icons-two-tone") + Style + I(attrs = { + mdcIcon(type) + attrs?.invoke(this) + }) { + Text(icon.type) } +} - public enum class MDCIconBase { Span, I } +public enum class MDCIconBase { I, Span } - public enum class MDCIconType(public val iconType: String) { - None("None"), - TenMp("10mp"), - ElevenMp("11mp"), - TwelveMp("12mp"), - ThirteenMp("13mp"), - FourteenMp("14mp"), - FifteenMp("15mp"), - SixteenMp("16mp"), - SeventeenMp("17mp"), - EighteenMp("18mp"), - NineteenMp("19mp"), - OneK("1k"), - OneKPlus("1k_plus"), - OneXMobiledata("1x_mobiledata"), - TwentyMp("20mp"), - TwentyOneMp("21mp"), - TwentyTwoMp("22mp"), - TwentyThreeMp("23mp"), - TwentyFourMp("24mp"), - TwoK("2k"), - TwoKPlus("2k_plus"), - TwoMp("2mp"), - ThirtyFps("30fps"), - ThirtyFpsSelect("30fps_select"), - ThreeSixty("360"), - ThreeDRotation("3d_rotation"), - ThreeGMobiledata("3g_mobiledata"), - ThreeK("3k"), - ThreeKPlus("3k_plus"), - ThreeMp("3mp"), - ThreeP("3p"), - FourGMobiledata("4g_mobiledata"), - FourGPlusMobiledata("4g_plus_mobiledata"), - FourK("4k"), - FourKPlus("4k_plus"), - FourMp("4mp"), - FiveG("5g"), - FiveK("5k"), - FiveKPlus("5k_plus"), - FiveMp("5mp"), - SixtyFps("60fps"), - SixtyFpsSelect("60fps_select"), - SixFtApart("6_ft_apart"), - SixK("6k"), - SixKPlus("6k_plus"), - SixMp("6mp"), - SevenK("7k"), - SevenKPlus("7k_plus"), - SevenMp("7mp"), - EightK("8k"), - EightKPlus("8k_plus"), - EightMp("8mp"), - NineK("9k"), - NineKPlus("9k_plus"), - NineMp("9mp"), - AcUnit("ac_unit"), - AccessAlarm("access_alarm"), - AccessAlarms("access_alarms"), - AccessTime("access_time"), - AccessTimeFilled("access_time_filled"), - Accessibility("accessibility"), - AccessibilityNew("accessibility_new"), - Accessible("accessible"), - AccessibleForward("accessible_forward"), - AccountBalance("account_balance"), - AccountBalanceWallet("account_balance_wallet"), - AccountBox("account_box"), - AccountCircle("account_circle"), - AccountTree("account_tree"), - AdUnits("ad_units"), - Adb("adb"), - Add("add"), - AddAPhoto("add_a_photo"), - AddAlarm("add_alarm"), - AddAlert("add_alert"), - AddBox("add_box"), - AddBusiness("add_business"), - AddChart("add_chart"), - AddCircle("add_circle"), - AddCircleOutline("add_circle_outline"), - AddComment("add_comment"), - AddIcCall("add_ic_call"), - AddLink("add_link"), - AddLocation("add_location"), - AddLocationAlt("add_location_alt"), - AddModerator("add_moderator"), - AddPhotoAlternate("add_photo_alternate"), - AddReaction("add_reaction"), - AddRoad("add_road"), - AddShoppingCart("add_shopping_cart"), - AddTask("add_task"), - AddToDrive("add_to_drive"), - AddToHomeScreen("add_to_home_screen"), - AddToPhotos("add_to_photos"), - AddToQueue("add_to_queue"), - Addchart("addchart"), - Adjust("adjust"), - AdminPanelSettings("admin_panel_settings"), - AdsClick("ads_click"), - Agriculture("agriculture"), - Air("air"), - AirlineSeatFlat("airline_seat_flat"), - AirlineSeatFlatAngled("airline_seat_flat_angled"), - AirlineSeatIndividualSuite("airline_seat_individual_suite"), - AirlineSeatLegroomExtra("airline_seat_legroom_extra"), - AirlineSeatLegroomNormal("airline_seat_legroom_normal"), - AirlineSeatLegroomReduced("airline_seat_legroom_reduced"), - AirlineSeatReclineExtra("airline_seat_recline_extra"), - AirlineSeatReclineNormal("airline_seat_recline_normal"), - AirplaneTicket("airplane_ticket"), - AirplanemodeActive("airplanemode_active"), - AirplanemodeInactive("airplanemode_inactive"), - Airplay("airplay"), - AirportShuttle("airport_shuttle"), - Alarm("alarm"), - AlarmAdd("alarm_add"), - AlarmOff("alarm_off"), - AlarmOn("alarm_on"), - Album("album"), - AlignHorizontalCenter("align_horizontal_center"), - AlignHorizontalLeft("align_horizontal_left"), - AlignHorizontalRight("align_horizontal_right"), - AlignVerticalBottom("align_vertical_bottom"), - AlignVerticalCenter("align_vertical_center"), - AlignVerticalTop("align_vertical_top"), - AllInbox("all_inbox"), - AllInclusive("all_inclusive"), - AllOut("all_out"), - AltRoute("alt_route"), - AlternateEmail("alternate_email"), - Analytics("analytics"), - Anchor("anchor"), - Android("android"), - Animation("animation"), - Announcement("announcement"), - Aod("aod"), - Apartment("apartment"), - Api("api"), - AppBlocking("app_blocking"), - AppRegistration("app_registration"), - AppSettingsAlt("app_settings_alt"), - Approval("approval"), - Apps("apps"), - Architecture("architecture"), - Archive("archive"), - AreaChart("area_chart"), - ArrowBack("arrow_back"), - ArrowBackIos("arrow_back_ios"), - ArrowBackIosNew("arrow_back_ios_new"), - ArrowCircleDown("arrow_circle_down"), - ArrowCircleUp("arrow_circle_up"), - ArrowDownward("arrow_downward"), - ArrowDropDown("arrow_drop_down"), - ArrowDropDownCircle("arrow_drop_down_circle"), - ArrowDropUp("arrow_drop_up"), - ArrowForward("arrow_forward"), - ArrowForwardIos("arrow_forward_ios"), - ArrowLeft("arrow_left"), - ArrowRight("arrow_right"), - ArrowRightAlt("arrow_right_alt"), - ArrowUpward("arrow_upward"), - ArtTrack("art_track"), - Article("article"), - AspectRatio("aspect_ratio"), - Assessment("assessment"), - Assignment("assignment"), - AssignmentInd("assignment_ind"), - AssignmentLate("assignment_late"), - AssignmentReturn("assignment_return"), - AssignmentReturned("assignment_returned"), - AssignmentTurnedIn("assignment_turned_in"), - Assistant("assistant"), - AssistantDirection("assistant_direction"), - AssistantPhoto("assistant_photo"), - Atm("atm"), - AttachEmail("attach_email"), - AttachFile("attach_file"), - AttachMoney("attach_money"), - Attachment("attachment"), - Attractions("attractions"), - Attribution("attribution"), - Audiotrack("audiotrack"), - AutoAwesome("auto_awesome"), - AutoAwesomeMosaic("auto_awesome_mosaic"), - AutoAwesomeMotion("auto_awesome_motion"), - AutoDelete("auto_delete"), - AutoFixHigh("auto_fix_high"), - AutoFixNormal("auto_fix_normal"), - AutoFixOff("auto_fix_off"), - AutoGraph("auto_graph"), - AutoStories("auto_stories"), - AutofpsSelect("autofps_select"), - Autorenew("autorenew"), - AvTimer("av_timer"), - BabyChangingStation("baby_changing_station"), - BackHand("back_hand"), - Backpack("backpack"), - Backspace("backspace"), - Backup("backup"), - BackupTable("backup_table"), - Badge("badge"), - BakeryDining("bakery_dining"), - Balcony("balcony"), - Ballot("ballot"), - BarChart("bar_chart"), - BatchPrediction("batch_prediction"), - Bathroom("bathroom"), - Bathtub("bathtub"), - BatteryAlert("battery_alert"), - BatteryChargingFull("battery_charging_full"), - BatteryFull("battery_full"), - BatterySaver("battery_saver"), - BatteryStd("battery_std"), - BatteryUnknown("battery_unknown"), - BeachAccess("beach_access"), - Bed("bed"), - BedroomBaby("bedroom_baby"), - BedroomChild("bedroom_child"), - BedroomParent("bedroom_parent"), - Bedtime("bedtime"), - Beenhere("beenhere"), - Bento("bento"), - BikeScooter("bike_scooter"), - Biotech("biotech"), - Blender("blender"), - Block("block"), - Bloodtype("bloodtype"), - Bluetooth("bluetooth"), - BluetoothAudio("bluetooth_audio"), - BluetoothConnected("bluetooth_connected"), - BluetoothDisabled("bluetooth_disabled"), - BluetoothDrive("bluetooth_drive"), - BluetoothSearching("bluetooth_searching"), - BlurCircular("blur_circular"), - BlurLinear("blur_linear"), - BlurOff("blur_off"), - BlurOn("blur_on"), - Bolt("bolt"), - Book("book"), - BookOnline("book_online"), - Bookmark("bookmark"), - BookmarkAdd("bookmark_add"), - BookmarkAdded("bookmark_added"), - BookmarkBorder("bookmark_border"), - BookmarkRemove("bookmark_remove"), - Bookmarks("bookmarks"), - BorderAll("border_all"), - BorderBottom("border_bottom"), - BorderClear("border_clear"), - BorderColor("border_color"), - BorderHorizontal("border_horizontal"), - BorderInner("border_inner"), - BorderLeft("border_left"), - BorderOuter("border_outer"), - BorderRight("border_right"), - BorderStyle("border_style"), - BorderTop("border_top"), - BorderVertical("border_vertical"), - BrandingWatermark("branding_watermark"), - BreakfastDining("breakfast_dining"), - Brightness1("brightness_1"), - Brightness2("brightness_2"), - Brightness3("brightness_3"), - Brightness4("brightness_4"), - Brightness5("brightness_5"), - Brightness6("brightness_6"), - Brightness7("brightness_7"), - BrightnessAuto("brightness_auto"), - BrightnessHigh("brightness_high"), - BrightnessLow("brightness_low"), - BrightnessMedium("brightness_medium"), - BrokenImage("broken_image"), - BrowserNotSupported("browser_not_supported"), - BrunchDining("brunch_dining"), - Brush("brush"), - BubbleChart("bubble_chart"), - BugReport("bug_report"), - Build("build"), - BuildCircle("build_circle"), - Bungalow("bungalow"), - BurstMode("burst_mode"), - BusAlert("bus_alert"), - Business("business"), - BusinessCenter("business_center"), - Cabin("cabin"), - Cable("cable"), - Cached("cached"), - Cake("cake"), - Calculate("calculate"), - CalendarToday("calendar_today"), - CalendarViewDay("calendar_view_day"), - CalendarViewMonth("calendar_view_month"), - CalendarViewWeek("calendar_view_week"), - Call("call"), - CallEnd("call_end"), - CallMade("call_made"), - CallMerge("call_merge"), - CallMissed("call_missed"), - CallMissedOutgoing("call_missed_outgoing"), - CallReceived("call_received"), - CallSplit("call_split"), - CallToAction("call_to_action"), - Camera("camera"), - CameraAlt("camera_alt"), - CameraEnhance("camera_enhance"), - CameraFront("camera_front"), - CameraIndoor("camera_indoor"), - CameraOutdoor("camera_outdoor"), - CameraRear("camera_rear"), - CameraRoll("camera_roll"), - Cameraswitch("cameraswitch"), - Campaign("campaign"), - Cancel("cancel"), - CancelPresentation("cancel_presentation"), - CancelScheduleSend("cancel_schedule_send"), - CarRental("car_rental"), - CarRepair("car_repair"), - CardGiftcard("card_giftcard"), - CardMembership("card_membership"), - CardTravel("card_travel"), - Carpenter("carpenter"), - Cases("cases"), - Casino("casino"), - Cast("cast"), - CastConnected("cast_connected"), - CastForEducation("cast_for_education"), - CatchingPokemon("catching_pokemon"), - Category("category"), - Celebration("celebration"), - CellWifi("cell_wifi"), - CenterFocusStrong("center_focus_strong"), - CenterFocusWeak("center_focus_weak"), - Chair("chair"), - ChairAlt("chair_alt"), - Chalet("chalet"), - ChangeCircle("change_circle"), - ChangeHistory("change_history"), - ChargingStation("charging_station"), - Chat("chat"), - ChatBubble("chat_bubble"), - ChatBubbleOutline("chat_bubble_outline"), - Check("check"), - CheckBox("check_box"), - CheckBoxOutlineBlank("check_box_outline_blank"), - CheckCircle("check_circle"), - CheckCircleOutline("check_circle_outline"), - Checklist("checklist"), - ChecklistRtl("checklist_rtl"), - Checkroom("checkroom"), - ChevronLeft("chevron_left"), - ChevronRight("chevron_right"), - ChildCare("child_care"), - ChildFriendly("child_friendly"), - ChromeReaderMode("chrome_reader_mode"), - Circle("circle"), - CircleNotifications("circle_notifications"), - Class("class"), - CleanHands("clean_hands"), - CleaningServices("cleaning_services"), - Clear("clear"), - ClearAll("clear_all"), - Close("close"), - CloseFullscreen("close_fullscreen"), - ClosedCaption("closed_caption"), - ClosedCaptionDisabled("closed_caption_disabled"), - ClosedCaptionOff("closed_caption_off"), - Cloud("cloud"), - CloudCircle("cloud_circle"), - CloudDone("cloud_done"), - CloudDownload("cloud_download"), - CloudOff("cloud_off"), - CloudQueue("cloud_queue"), - CloudUpload("cloud_upload"), - Co2("co2"), - Code("code"), - CodeOff("code_off"), - Coffee("coffee"), - CoffeeMaker("coffee_maker"), - Collections("collections"), - CollectionsBookmark("collections_bookmark"), - ColorLens("color_lens"), - Colorize("colorize"), - Comment("comment"), - CommentBank("comment_bank"), - CommentsDisabled("comments_disabled"), - Commute("commute"), - Compare("compare"), - CompareArrows("compare_arrows"), - CompassCalibration("compass_calibration"), - Compost("compost"), - Compress("compress"), - Computer("computer"), - ConfirmationNumber("confirmation_number"), - ConnectWithoutContact("connect_without_contact"), - ConnectedTv("connected_tv"), - Construction("construction"), - ContactMail("contact_mail"), - ContactPage("contact_page"), - ContactPhone("contact_phone"), - ContactSupport("contact_support"), - Contactless("contactless"), - Contacts("contacts"), - ContentCopy("content_copy"), - ContentCut("content_cut"), - ContentPaste("content_paste"), - ContentPasteOff("content_paste_off"), - ControlCamera("control_camera"), - ControlPoint("control_point"), - ControlPointDuplicate("control_point_duplicate"), - CopyAll("copy_all"), - Copyright("copyright"), - Coronavirus("coronavirus"), - CorporateFare("corporate_fare"), - Cottage("cottage"), - Countertops("countertops"), - Create("create"), - CreateNewFolder("create_new_folder"), - CreditCard("credit_card"), - CreditCardOff("credit_card_off"), - CreditScore("credit_score"), - Crib("crib"), - Crop("crop"), - Crop169("crop_16_9"), - Crop32("crop_3_2"), - Crop54("crop_5_4"), - Crop75("crop_7_5"), - CropDin("crop_din"), - CropFree("crop_free"), - CropLandscape("crop_landscape"), - CropOriginal("crop_original"), - CropPortrait("crop_portrait"), - CropRotate("crop_rotate"), - CropSquare("crop_square"), - CrueltyFree("cruelty_free"), - Dangerous("dangerous"), - DarkMode("dark_mode"), - Dashboard("dashboard"), - DashboardCustomize("dashboard_customize"), - DataExploration("data_exploration"), - DataSaverOff("data_saver_off"), - DataSaverOn("data_saver_on"), - DataUsage("data_usage"), - DateRange("date_range"), - Deck("deck"), - Dehaze("dehaze"), - Delete("delete"), - DeleteForever("delete_forever"), - DeleteOutline("delete_outline"), - DeleteSweep("delete_sweep"), - DeliveryDining("delivery_dining"), - DepartureBoard("departure_board"), - Description("description"), - DesignServices("design_services"), - DesktopAccessDisabled("desktop_access_disabled"), - DesktopMac("desktop_mac"), - DesktopWindows("desktop_windows"), - Details("details"), - DeveloperBoard("developer_board"), - DeveloperBoardOff("developer_board_off"), - DeveloperMode("developer_mode"), - DeviceHub("device_hub"), - DeviceThermostat("device_thermostat"), - DeviceUnknown("device_unknown"), - Devices("devices"), - DevicesOther("devices_other"), - DialerSip("dialer_sip"), - Dialpad("dialpad"), - Dining("dining"), - DinnerDining("dinner_dining"), - Directions("directions"), - DirectionsBike("directions_bike"), - DirectionsBoat("directions_boat"), - DirectionsBoatFilled("directions_boat_filled"), - DirectionsBus("directions_bus"), - DirectionsBusFilled("directions_bus_filled"), - DirectionsCar("directions_car"), - DirectionsCarFilled("directions_car_filled"), - DirectionsOff("directions_off"), - DirectionsRailway("directions_railway"), - DirectionsRailwayFilled("directions_railway_filled"), - DirectionsRun("directions_run"), - DirectionsSubway("directions_subway"), - DirectionsSubwayFilled("directions_subway_filled"), - DirectionsTransit("directions_transit"), - DirectionsTransitFilled("directions_transit_filled"), - DirectionsWalk("directions_walk"), - DirtyLens("dirty_lens"), - DisabledByDefault("disabled_by_default"), - DisabledVisible("disabled_visible"), - DiscFull("disc_full"), - Dns("dns"), - DoDisturb("do_disturb"), - DoDisturbAlt("do_disturb_alt"), - DoDisturbOff("do_disturb_off"), - DoDisturbOn("do_disturb_on"), - DoNotDisturb("do_not_disturb"), - DoNotDisturbAlt("do_not_disturb_alt"), - DoNotDisturbOff("do_not_disturb_off"), - DoNotDisturbOn("do_not_disturb_on"), - DoNotDisturbOnTotalSilence("do_not_disturb_on_total_silence"), - DoNotStep("do_not_step"), - DoNotTouch("do_not_touch"), - Dock("dock"), - DocumentScanner("document_scanner"), - Domain("domain"), - DomainDisabled("domain_disabled"), - DomainVerification("domain_verification"), - Done("done"), - DoneAll("done_all"), - DoneOutline("done_outline"), - DonutLarge("donut_large"), - DonutSmall("donut_small"), - DoorBack("door_back"), - DoorFront("door_front"), - DoorSliding("door_sliding"), - Doorbell("doorbell"), - DoubleArrow("double_arrow"), - DownhillSkiing("downhill_skiing"), - Download("download"), - DownloadDone("download_done"), - DownloadForOffline("download_for_offline"), - Downloading("downloading"), - Drafts("drafts"), - DragHandle("drag_handle"), - DragIndicator("drag_indicator"), - Draw("draw"), - DriveEta("drive_eta"), - DriveFileMove("drive_file_move"), - DriveFileMoveRtl("drive_file_move_rtl"), - DriveFileRenameOutline("drive_file_rename_outline"), - DriveFolderUpload("drive_folder_upload"), - Dry("dry"), - DryCleaning("dry_cleaning"), - Duo("duo"), - Dvr("dvr"), - DynamicFeed("dynamic_feed"), - DynamicForm("dynamic_form"), - EMobiledata("e_mobiledata"), - Earbuds("earbuds"), - EarbudsBattery("earbuds_battery"), - East("east"), - EdgesensorHigh("edgesensor_high"), - EdgesensorLow("edgesensor_low"), - Edit("edit"), - EditAttributes("edit_attributes"), - EditCalendar("edit_calendar"), - EditLocation("edit_location"), - EditLocationAlt("edit_location_alt"), - EditNote("edit_note"), - EditNotifications("edit_notifications"), - EditOff("edit_off"), - EditRoad("edit_road"), - Eject("eject"), - Elderly("elderly"), - ElectricBike("electric_bike"), - ElectricCar("electric_car"), - ElectricMoped("electric_moped"), - ElectricRickshaw("electric_rickshaw"), - ElectricScooter("electric_scooter"), - ElectricalServices("electrical_services"), - Elevator("elevator"), - Email("email"), - Emergency("emergency"), - EmojiEmotions("emoji_emotions"), - EmojiEvents("emoji_events"), - EmojiFlags("emoji_flags"), - EmojiFoodBeverage("emoji_food_beverage"), - EmojiNature("emoji_nature"), - EmojiObjects("emoji_objects"), - EmojiPeople("emoji_people"), - EmojiSymbols("emoji_symbols"), - EmojiTransportation("emoji_transportation"), - Engineering("engineering"), - EnhancedEncryption("enhanced_encryption"), - Equalizer("equalizer"), - Error("error"), - ErrorOutline("error_outline"), - Escalator("escalator"), - EscalatorWarning("escalator_warning"), - Euro("euro"), - EuroSymbol("euro_symbol"), - EvStation("ev_station"), - Event("event"), - EventAvailable("event_available"), - EventBusy("event_busy"), - EventNote("event_note"), - EventSeat("event_seat"), - ExitToApp("exit_to_app"), - Expand("expand"), - ExpandLess("expand_less"), - ExpandMore("expand_more"), - Explicit("explicit"), - Explore("explore"), - ExploreOff("explore_off"), - Exposure("exposure"), - ExposureNeg1("exposure_neg_1"), - ExposureNeg2("exposure_neg_2"), - ExposurePlus1("exposure_plus_1"), - ExposurePlus2("exposure_plus_2"), - ExposureZero("exposure_zero"), - Extension("extension"), - ExtensionOff("extension_off"), - Face("face"), - FaceRetouchingNatural("face_retouching_natural"), - FaceRetouchingOff("face_retouching_off"), - Facebook("facebook"), - FactCheck("fact_check"), - FamilyRestroom("family_restroom"), - FastForward("fast_forward"), - FastRewind("fast_rewind"), - Fastfood("fastfood"), - Favorite("favorite"), - FavoriteBorder("favorite_border"), - FeaturedPlayList("featured_play_list"), - FeaturedVideo("featured_video"), - Feed("feed"), - Feedback("feedback"), - Female("female"), - Fence("fence"), - Festival("festival"), - FiberDvr("fiber_dvr"), - FiberManualRecord("fiber_manual_record"), - FiberNew("fiber_new"), - FiberPin("fiber_pin"), - FiberSmartRecord("fiber_smart_record"), - FileCopy("file_copy"), - FileDownload("file_download"), - FileDownloadDone("file_download_done"), - FileDownloadOff("file_download_off"), - FilePresent("file_present"), - FileUpload("file_upload"), - Filter("filter"), - Filter1("filter_1"), - Filter2("filter_2"), - Filter3("filter_3"), - Filter4("filter_4"), - Filter5("filter_5"), - Filter6("filter_6"), - Filter7("filter_7"), - Filter8("filter_8"), - Filter9("filter_9"), - Filter9Plus("filter_9_plus"), - FilterAlt("filter_alt"), - FilterBAndW("filter_b_and_w"), - FilterCenterFocus("filter_center_focus"), - FilterDrama("filter_drama"), - FilterFrames("filter_frames"), - FilterHdr("filter_hdr"), - FilterList("filter_list"), - FilterNone("filter_none"), - FilterTiltShift("filter_tilt_shift"), - FilterVintage("filter_vintage"), - FindInPage("find_in_page"), - FindReplace("find_replace"), - Fingerprint("fingerprint"), - FireExtinguisher("fire_extinguisher"), - Fireplace("fireplace"), - FirstPage("first_page"), - FitScreen("fit_screen"), - FitnessCenter("fitness_center"), - Flag("flag"), - Flaky("flaky"), - Flare("flare"), - FlashAuto("flash_auto"), - FlashOff("flash_off"), - FlashOn("flash_on"), - FlashlightOff("flashlight_off"), - FlashlightOn("flashlight_on"), - Flatware("flatware"), - Flight("flight"), - FlightLand("flight_land"), - FlightTakeoff("flight_takeoff"), - Flip("flip"), - FlipCameraAndroid("flip_camera_android"), - FlipCameraIos("flip_camera_ios"), - FlipToBack("flip_to_back"), - FlipToFront("flip_to_front"), - Flourescent("flourescent"), - FlutterDash("flutter_dash"), - FmdBad("fmd_bad"), - FmdGood("fmd_good"), - Folder("folder"), - FolderOpen("folder_open"), - FolderShared("folder_shared"), - FolderSpecial("folder_special"), - FollowTheSigns("follow_the_signs"), - FontDownload("font_download"), - FontDownloadOff("font_download_off"), - FoodBank("food_bank"), - FormatAlignCenter("format_align_center"), - FormatAlignJustify("format_align_justify"), - FormatAlignLeft("format_align_left"), - FormatAlignRight("format_align_right"), - FormatBold("format_bold"), - FormatClear("format_clear"), - FormatColorFill("format_color_fill"), - FormatColorReset("format_color_reset"), - FormatColorText("format_color_text"), - FormatIndentDecrease("format_indent_decrease"), - FormatIndentIncrease("format_indent_increase"), - FormatItalic("format_italic"), - FormatLineSpacing("format_line_spacing"), - FormatListBulleted("format_list_bulleted"), - FormatListNumbered("format_list_numbered"), - FormatListNumberedRtl("format_list_numbered_rtl"), - FormatPaint("format_paint"), - FormatQuote("format_quote"), - FormatShapes("format_shapes"), - FormatSize("format_size"), - FormatStrikethrough("format_strikethrough"), - FormatTextdirectionLToR("format_textdirection_l_to_r"), - FormatTextdirectionRToL("format_textdirection_r_to_l"), - FormatUnderlined("format_underlined"), - Forum("forum"), - Forward("forward"), - Forward10("forward_10"), - Forward30("forward_30"), - Forward5("forward_5"), - ForwardToInbox("forward_to_inbox"), - Foundation("foundation"), - FreeBreakfast("free_breakfast"), - FreeCancellation("free_cancellation"), - FrontHand("front_hand"), - Fullscreen("fullscreen"), - FullscreenExit("fullscreen_exit"), - Functions("functions"), - GMobiledata("g_mobiledata"), - GTranslate("g_translate"), - Gamepad("gamepad"), - Games("games"), - Garage("garage"), - Gavel("gavel"), - GeneratingTokens("generating_tokens"), - Gesture("gesture"), - GetApp("get_app"), - Gif("gif"), - GifBox("gif_box"), - Gite("gite"), - GolfCourse("golf_course"), - GppBad("gpp_bad"), - GppGood("gpp_good"), - GppMaybe("gpp_maybe"), - GpsFixed("gps_fixed"), - GpsNotFixed("gps_not_fixed"), - GpsOff("gps_off"), - Grade("grade"), - Gradient("gradient"), - Grading("grading"), - Grain("grain"), - GraphicEq("graphic_eq"), - Grass("grass"), - Grid3X3("grid_3x3"), - Grid4X4("grid_4x4"), - GridGoldenratio("grid_goldenratio"), - GridOff("grid_off"), - GridOn("grid_on"), - GridView("grid_view"), - Group("group"), - GroupAdd("group_add"), - GroupOff("group_off"), - GroupRemove("group_remove"), - GroupWork("group_work"), - Groups("groups"), - HMobiledata("h_mobiledata"), - HPlusMobiledata("h_plus_mobiledata"), - Hail("hail"), - Handyman("handyman"), - Hardware("hardware"), - Hd("hd"), - HdrAuto("hdr_auto"), - HdrAutoSelect("hdr_auto_select"), - HdrEnhancedSelect("hdr_enhanced_select"), - HdrOff("hdr_off"), - HdrOffSelect("hdr_off_select"), - HdrOn("hdr_on"), - HdrOnSelect("hdr_on_select"), - HdrPlus("hdr_plus"), - HdrStrong("hdr_strong"), - HdrWeak("hdr_weak"), - Headphones("headphones"), - HeadphonesBattery("headphones_battery"), - Headset("headset"), - HeadsetMic("headset_mic"), - HeadsetOff("headset_off"), - Healing("healing"), - HealthAndSafety("health_and_safety"), - Hearing("hearing"), - HearingDisabled("hearing_disabled"), - Height("height"), - Help("help"), - HelpCenter("help_center"), - HelpOutline("help_outline"), - Hevc("hevc"), - HideImage("hide_image"), - HideSource("hide_source"), - HighQuality("high_quality"), - Highlight("highlight"), - HighlightAlt("highlight_alt"), - HighlightOff("highlight_off"), - Hiking("hiking"), - History("history"), - HistoryEdu("history_edu"), - HistoryToggleOff("history_toggle_off"), - HolidayVillage("holiday_village"), - Home("home"), - HomeMax("home_max"), - HomeMini("home_mini"), - HomeRepairService("home_repair_service"), - HomeWork("home_work"), - HorizontalDistribute("horizontal_distribute"), - HorizontalRule("horizontal_rule"), - HorizontalSplit("horizontal_split"), - HotTub("hot_tub"), - Hotel("hotel"), - HotelClass("hotel_class"), - HourglassBottom("hourglass_bottom"), - HourglassDisabled("hourglass_disabled"), - HourglassEmpty("hourglass_empty"), - HourglassFull("hourglass_full"), - HourglassTop("hourglass_top"), - House("house"), - HouseSiding("house_siding"), - Houseboat("houseboat"), - HowToReg("how_to_reg"), - HowToVote("how_to_vote"), - Http("http"), - Https("https"), - Hvac("hvac"), - IceSkating("ice_skating"), - Icecream("icecream"), - Image("image"), - ImageAspectRatio("image_aspect_ratio"), - ImageNotSupported("image_not_supported"), - ImageSearch("image_search"), - ImagesearchRoller("imagesearch_roller"), - ImportContacts("import_contacts"), - ImportExport("import_export"), - ImportantDevices("important_devices"), - Inbox("inbox"), - IncompleteCircle("incomplete_circle"), - IndeterminateCheckBox("indeterminate_check_box"), - Info("info"), - Input("input"), - InsertChart("insert_chart"), - InsertChartOutlined("insert_chart_outlined"), - InsertComment("insert_comment"), - InsertDriveFile("insert_drive_file"), - InsertEmoticon("insert_emoticon"), - InsertInvitation("insert_invitation"), - InsertLink("insert_link"), - InsertPhoto("insert_photo"), - Insights("insights"), - IntegrationInstructions("integration_instructions"), - Inventory("inventory"), - Inventory2("inventory_2"), - InvertColors("invert_colors"), - InvertColorsOff("invert_colors_off"), - IosShare("ios_share"), - Iron("iron"), - Iso("iso"), - Kayaking("kayaking"), - Keyboard("keyboard"), - KeyboardAlt("keyboard_alt"), - KeyboardArrowDown("keyboard_arrow_down"), - KeyboardArrowLeft("keyboard_arrow_left"), - KeyboardArrowRight("keyboard_arrow_right"), - KeyboardArrowUp("keyboard_arrow_up"), - KeyboardBackspace("keyboard_backspace"), - KeyboardCapslock("keyboard_capslock"), - KeyboardHide("keyboard_hide"), - KeyboardReturn("keyboard_return"), - KeyboardTab("keyboard_tab"), - KeyboardVoice("keyboard_voice"), - KingBed("king_bed"), - Kitchen("kitchen"), - Kitesurfing("kitesurfing"), - Label("label"), - LabelImportant("label_important"), - LabelOff("label_off"), - Landscape("landscape"), - Language("language"), - Laptop("laptop"), - LaptopChromebook("laptop_chromebook"), - LaptopMac("laptop_mac"), - LaptopWindows("laptop_windows"), - LastPage("last_page"), - Launch("launch"), - Layers("layers"), - LayersClear("layers_clear"), - Leaderboard("leaderboard"), - LeakAdd("leak_add"), - LeakRemove("leak_remove"), - LegendToggle("legend_toggle"), - Lens("lens"), - LensBlur("lens_blur"), - LibraryAdd("library_add"), - LibraryAddCheck("library_add_check"), - LibraryBooks("library_books"), - LibraryMusic("library_music"), - Light("light"), - LightMode("light_mode"), - Lightbulb("lightbulb"), - LineStyle("line_style"), - LineWeight("line_weight"), - LinearScale("linear_scale"), - Link("link"), - LinkOff("link_off"), - LinkedCamera("linked_camera"), - Liquor("liquor"), - List("list"), - ListAlt("list_alt"), - LiveHelp("live_help"), - LiveTv("live_tv"), - Living("living"), - LocalActivity("local_activity"), - LocalAirport("local_airport"), - LocalAtm("local_atm"), - LocalBar("local_bar"), - LocalCafe("local_cafe"), - LocalCarWash("local_car_wash"), - LocalConvenienceStore("local_convenience_store"), - LocalDining("local_dining"), - LocalDrink("local_drink"), - LocalFireDepartment("local_fire_department"), - LocalFlorist("local_florist"), - LocalGasStation("local_gas_station"), - LocalGroceryStore("local_grocery_store"), - LocalHospital("local_hospital"), - LocalHotel("local_hotel"), - LocalLaundryService("local_laundry_service"), - LocalLibrary("local_library"), - LocalMall("local_mall"), - LocalMovies("local_movies"), - LocalOffer("local_offer"), - LocalParking("local_parking"), - LocalPharmacy("local_pharmacy"), - LocalPhone("local_phone"), - LocalPizza("local_pizza"), - LocalPlay("local_play"), - LocalPolice("local_police"), - LocalPostOffice("local_post_office"), - LocalPrintshop("local_printshop"), - LocalSee("local_see"), - LocalShipping("local_shipping"), - LocalTaxi("local_taxi"), - LocationCity("location_city"), - LocationDisabled("location_disabled"), - LocationOff("location_off"), - LocationOn("location_on"), - LocationSearching("location_searching"), - Lock("lock"), - LockClock("lock_clock"), - LockOpen("lock_open"), - Login("login"), - Logout("logout"), - Looks("looks"), - Looks3("looks_3"), - Looks4("looks_4"), - Looks5("looks_5"), - Looks6("looks_6"), - LooksOne("looks_one"), - LooksTwo("looks_two"), - Loop("loop"), - Loupe("loupe"), - LowPriority("low_priority"), - Loyalty("loyalty"), - LteMobiledata("lte_mobiledata"), - LtePlusMobiledata("lte_plus_mobiledata"), - Luggage("luggage"), - LunchDining("lunch_dining"), - Mail("mail"), - MailOutline("mail_outline"), - Male("male"), - ManageAccounts("manage_accounts"), - ManageSearch("manage_search"), - Map("map"), - MapsHomeWork("maps_home_work"), - MapsUgc("maps_ugc"), - Margin("margin"), - MarkAsUnread("mark_as_unread"), - MarkChatRead("mark_chat_read"), - MarkChatUnread("mark_chat_unread"), - MarkEmailRead("mark_email_read"), - MarkEmailUnread("mark_email_unread"), - Markunread("markunread"), - MarkunreadMailbox("markunread_mailbox"), - Masks("masks"), - Maximize("maximize"), - MediaBluetoothOff("media_bluetooth_off"), - MediaBluetoothOn("media_bluetooth_on"), - Mediation("mediation"), - MedicalServices("medical_services"), - Medication("medication"), - MeetingRoom("meeting_room"), - Memory("memory"), - Menu("menu"), - MenuBook("menu_book"), - MenuOpen("menu_open"), - MergeType("merge_type"), - Message("message"), - Mic("mic"), - MicExternalOff("mic_external_off"), - MicExternalOn("mic_external_on"), - MicNone("mic_none"), - MicOff("mic_off"), - Microwave("microwave"), - MilitaryTech("military_tech"), - Minimize("minimize"), - MiscellaneousServices("miscellaneous_services"), - MissedVideoCall("missed_video_call"), - Mms("mms"), - MobileFriendly("mobile_friendly"), - MobileOff("mobile_off"), - MobileScreenShare("mobile_screen_share"), - MobiledataOff("mobiledata_off"), - Mode("mode"), - ModeComment("mode_comment"), - ModeEdit("mode_edit"), - ModeEditOutline("mode_edit_outline"), - ModeNight("mode_night"), - ModeStandby("mode_standby"), - ModelTraining("model_training"), - MonetizationOn("monetization_on"), - Money("money"), - MoneyOff("money_off"), - MoneyOffCsred("money_off_csred"), - Monitor("monitor"), - MonitorWeight("monitor_weight"), - MonochromePhotos("monochrome_photos"), - Mood("mood"), - MoodBad("mood_bad"), - Moped("moped"), - More("more"), - MoreHoriz("more_horiz"), - MoreTime("more_time"), - MoreVert("more_vert"), - MotionPhotosAuto("motion_photos_auto"), - MotionPhotosOff("motion_photos_off"), - MotionPhotosOn("motion_photos_on"), - MotionPhotosPause("motion_photos_pause"), - MotionPhotosPaused("motion_photos_paused"), - Mouse("mouse"), - MoveToInbox("move_to_inbox"), - Movie("movie"), - MovieCreation("movie_creation"), - MovieFilter("movie_filter"), - Moving("moving"), - Mp("mp"), - MultilineChart("multiline_chart"), - MultipleStop("multiple_stop"), - Museum("museum"), - MusicNote("music_note"), - MusicOff("music_off"), - MusicVideo("music_video"), - MyLocation("my_location"), - Nat("nat"), - Nature("nature"), - NaturePeople("nature_people"), - NavigateBefore("navigate_before"), - NavigateNext("navigate_next"), - Navigation("navigation"), - NearMe("near_me"), - NearMeDisabled("near_me_disabled"), - NearbyError("nearby_error"), - NearbyOff("nearby_off"), - NetworkCell("network_cell"), - NetworkCheck("network_check"), - NetworkLocked("network_locked"), - NetworkWifi("network_wifi"), - NewLabel("new_label"), - NewReleases("new_releases"), - NextPlan("next_plan"), - NextWeek("next_week"), - Nfc("nfc"), - NightShelter("night_shelter"), - Nightlife("nightlife"), - Nightlight("nightlight"), - NightlightRound("nightlight_round"), - NightsStay("nights_stay"), - NoAccounts("no_accounts"), - NoBackpack("no_backpack"), - NoCell("no_cell"), - NoDrinks("no_drinks"), - NoEncryption("no_encryption"), - NoEncryptionGmailerrorred("no_encryption_gmailerrorred"), - NoFlash("no_flash"), - NoFood("no_food"), - NoLuggage("no_luggage"), - NoMeals("no_meals"), - NoMeetingRoom("no_meeting_room"), - NoPhotography("no_photography"), - NoSim("no_sim"), - NoStroller("no_stroller"), - NoTransfer("no_transfer"), - NordicWalking("nordic_walking"), - North("north"), - NorthEast("north_east"), - NorthWest("north_west"), - NotAccessible("not_accessible"), - NotInterested("not_interested"), - NotListedLocation("not_listed_location"), - NotStarted("not_started"), - Note("note"), - NoteAdd("note_add"), - NoteAlt("note_alt"), - Notes("notes"), - NotificationAdd("notification_add"), - NotificationImportant("notification_important"), - Notifications("notifications"), - NotificationsActive("notifications_active"), - NotificationsNone("notifications_none"), - NotificationsOff("notifications_off"), - NotificationsPaused("notifications_paused"), - OfflineBolt("offline_bolt"), - OfflinePin("offline_pin"), - OfflineShare("offline_share"), - OndemandVideo("ondemand_video"), - OnlinePrediction("online_prediction"), - Opacity("opacity"), - OpenInBrowser("open_in_browser"), - OpenInFull("open_in_full"), - OpenInNew("open_in_new"), - OpenInNewOff("open_in_new_off"), - OpenWith("open_with"), - OtherHouses("other_houses"), - Outbound("outbound"), - Outbox("outbox"), - OutdoorGrill("outdoor_grill"), - Outlet("outlet"), - OutlinedFlag("outlined_flag"), - Padding("padding"), - Pages("pages"), - Pageview("pageview"), - Paid("paid"), - Palette("palette"), - PanTool("pan_tool"), - Panorama("panorama"), - PanoramaFishEye("panorama_fish_eye"), - PanoramaHorizontal("panorama_horizontal"), - PanoramaHorizontalSelect("panorama_horizontal_select"), - PanoramaPhotosphere("panorama_photosphere"), - PanoramaPhotosphereSelect("panorama_photosphere_select"), - PanoramaVertical("panorama_vertical"), - PanoramaVerticalSelect("panorama_vertical_select"), - PanoramaWideAngle("panorama_wide_angle"), - PanoramaWideAngleSelect("panorama_wide_angle_select"), - Paragliding("paragliding"), - Park("park"), - PartyMode("party_mode"), - Password("password"), - Pattern("pattern"), - Pause("pause"), - PauseCircle("pause_circle"), - PauseCircleFilled("pause_circle_filled"), - PauseCircleOutline("pause_circle_outline"), - PausePresentation("pause_presentation"), - Payment("payment"), - Payments("payments"), - PedalBike("pedal_bike"), - Pending("pending"), - PendingActions("pending_actions"), - People("people"), - PeopleAlt("people_alt"), - PeopleOutline("people_outline"), - PermCameraMic("perm_camera_mic"), - PermContactCalendar("perm_contact_calendar"), - PermDataSetting("perm_data_setting"), - PermDeviceInformation("perm_device_information"), - PermIdentity("perm_identity"), - PermMedia("perm_media"), - PermPhoneMsg("perm_phone_msg"), - PermScanWifi("perm_scan_wifi"), - Person("person"), - PersonAdd("person_add"), - PersonAddAlt("person_add_alt"), - PersonAddAlt1("person_add_alt_1"), - PersonAddDisabled("person_add_disabled"), - PersonOff("person_off"), - PersonOutline("person_outline"), - PersonPin("person_pin"), - PersonPinCircle("person_pin_circle"), - PersonRemove("person_remove"), - PersonRemoveAlt1("person_remove_alt_1"), - PersonSearch("person_search"), - PersonalInjury("personal_injury"), - PersonalVideo("personal_video"), - PestControl("pest_control"), - PestControlRodent("pest_control_rodent"), - Pets("pets"), - Phone("phone"), - PhoneAndroid("phone_android"), - PhoneBluetoothSpeaker("phone_bluetooth_speaker"), - PhoneCallback("phone_callback"), - PhoneDisabled("phone_disabled"), - PhoneEnabled("phone_enabled"), - PhoneForwarded("phone_forwarded"), - PhoneInTalk("phone_in_talk"), - PhoneIphone("phone_iphone"), - PhoneLocked("phone_locked"), - PhoneMissed("phone_missed"), - PhonePaused("phone_paused"), - Phonelink("phonelink"), - PhonelinkErase("phonelink_erase"), - PhonelinkLock("phonelink_lock"), - PhonelinkOff("phonelink_off"), - PhonelinkRing("phonelink_ring"), - PhonelinkSetup("phonelink_setup"), - Photo("photo"), - PhotoAlbum("photo_album"), - PhotoCamera("photo_camera"), - PhotoCameraBack("photo_camera_back"), - PhotoCameraFront("photo_camera_front"), - PhotoFilter("photo_filter"), - PhotoLibrary("photo_library"), - PhotoSizeSelectActual("photo_size_select_actual"), - PhotoSizeSelectLarge("photo_size_select_large"), - PhotoSizeSelectSmall("photo_size_select_small"), - Piano("piano"), - PianoOff("piano_off"), - PictureAsPdf("picture_as_pdf"), - PictureInPicture("picture_in_picture"), - PictureInPictureAlt("picture_in_picture_alt"), - PieChart("pie_chart"), - PieChartOutline("pie_chart_outline"), - Pin("pin"), - PinDrop("pin_drop"), - PinEnd("pin_end"), - PinInvoke("pin_invoke"), - PivotTableChart("pivot_table_chart"), - Place("place"), - Plagiarism("plagiarism"), - PlayArrow("play_arrow"), - PlayCircle("play_circle"), - PlayCircleFilled("play_circle_filled"), - PlayCircleOutline("play_circle_outline"), - PlayDisabled("play_disabled"), - PlayForWork("play_for_work"), - PlayLesson("play_lesson"), - PlaylistAdd("playlist_add"), - PlaylistAddCheck("playlist_add_check"), - PlaylistPlay("playlist_play"), - Plumbing("plumbing"), - PlusOne("plus_one"), - Podcasts("podcasts"), - PointOfSale("point_of_sale"), - Policy("policy"), - Poll("poll"), - Polymer("polymer"), - Pool("pool"), - PortableWifiOff("portable_wifi_off"), - Portrait("portrait"), - PostAdd("post_add"), - Power("power"), - PowerInput("power_input"), - PowerOff("power_off"), - PowerSettingsNew("power_settings_new"), - PrecisionManufacturing("precision_manufacturing"), - PregnantWoman("pregnant_woman"), - PresentToAll("present_to_all"), - Preview("preview"), - PriceChange("price_change"), - PriceCheck("price_check"), - Print("print"), - PrintDisabled("print_disabled"), - PriorityHigh("priority_high"), - PrivacyTip("privacy_tip"), - PrivateConnectivity("private_connectivity"), - ProductionQuantityLimits("production_quantity_limits"), - Psychology("psychology"), - Public("public"), - PublicOff("public_off"), - Publish("publish"), - PublishedWithChanges("published_with_changes"), - PushPin("push_pin"), - QrCode("qr_code"), - QrCode2("qr_code_2"), - QrCodeScanner("qr_code_scanner"), - QueryBuilder("query_builder"), - QueryStats("query_stats"), - QuestionAnswer("question_answer"), - Queue("queue"), - QueueMusic("queue_music"), - QueuePlayNext("queue_play_next"), - Quickreply("quickreply"), - Quiz("quiz"), - RMobiledata("r_mobiledata"), - Radar("radar"), - Radio("radio"), - RadioButtonChecked("radio_button_checked"), - RadioButtonUnchecked("radio_button_unchecked"), - RailwayAlert("railway_alert"), - RamenDining("ramen_dining"), - RateReview("rate_review"), - RawOff("raw_off"), - RawOn("raw_on"), - ReadMore("read_more"), - RealEstateAgent("real_estate_agent"), - Receipt("receipt"), - ReceiptLong("receipt_long"), - RecentActors("recent_actors"), - Recommend("recommend"), - RecordVoiceOver("record_voice_over"), - Recycling("recycling"), - Redeem("redeem"), - Redo("redo"), - ReduceCapacity("reduce_capacity"), - Refresh("refresh"), - RememberMe("remember_me"), - Remove("remove"), - RemoveCircle("remove_circle"), - RemoveCircleOutline("remove_circle_outline"), - RemoveDone("remove_done"), - RemoveFromQueue("remove_from_queue"), - RemoveModerator("remove_moderator"), - RemoveRedEye("remove_red_eye"), - RemoveShoppingCart("remove_shopping_cart"), - Reorder("reorder"), - Repeat("repeat"), - RepeatOn("repeat_on"), - RepeatOne("repeat_one"), - RepeatOneOn("repeat_one_on"), - Replay("replay"), - Replay10("replay_10"), - Replay30("replay_30"), - Replay5("replay_5"), - ReplayCircleFilled("replay_circle_filled"), - Reply("reply"), - ReplyAll("reply_all"), - Report("report"), - ReportGmailerrorred("report_gmailerrorred"), - ReportOff("report_off"), - ReportProblem("report_problem"), - RequestPage("request_page"), - RequestQuote("request_quote"), - ResetTv("reset_tv"), - RestartAlt("restart_alt"), - Restaurant("restaurant"), - RestaurantMenu("restaurant_menu"), - Restore("restore"), - RestoreFromTrash("restore_from_trash"), - RestorePage("restore_page"), - Reviews("reviews"), - RiceBowl("rice_bowl"), - RingVolume("ring_volume"), - Roofing("roofing"), - Room("room"), - RoomPreferences("room_preferences"), - RoomService("room_service"), - Rotate90DegreesCcw("rotate_90_degrees_ccw"), - RotateLeft("rotate_left"), - RotateRight("rotate_right"), - RoundedCorner("rounded_corner"), - Router("router"), - Rowing("rowing"), - RssFeed("rss_feed"), - Rsvp("rsvp"), - Rtt("rtt"), - Rule("rule"), - RuleFolder("rule_folder"), - RunCircle("run_circle"), - RunningWithErrors("running_with_errors"), - RvHookup("rv_hookup"), - SafetyDivider("safety_divider"), - Sailing("sailing"), - Sanitizer("sanitizer"), - Satellite("satellite"), - Save("save"), - SaveAlt("save_alt"), - SavedSearch("saved_search"), - Savings("savings"), - Scanner("scanner"), - ScatterPlot("scatter_plot"), - Schedule("schedule"), - ScheduleSend("schedule_send"), - Schema("schema"), - School("school"), - Science("science"), - Score("score"), - ScreenLockLandscape("screen_lock_landscape"), - ScreenLockPortrait("screen_lock_portrait"), - ScreenLockRotation("screen_lock_rotation"), - ScreenRotation("screen_rotation"), - ScreenSearchDesktop("screen_search_desktop"), - ScreenShare("screen_share"), - Screenshot("screenshot"), - Sd("sd"), - SdCard("sd_card"), - SdCardAlert("sd_card_alert"), - SdStorage("sd_storage"), - Search("search"), - SearchOff("search_off"), - Security("security"), - SecurityUpdate("security_update"), - SecurityUpdateGood("security_update_good"), - SecurityUpdateWarning("security_update_warning"), - Segment("segment"), - SelectAll("select_all"), - SelfImprovement("self_improvement"), - Sell("sell"), - Send("send"), - SendAndArchive("send_and_archive"), - SendToMobile("send_to_mobile"), - SensorDoor("sensor_door"), - SensorWindow("sensor_window"), - Sensors("sensors"), - SensorsOff("sensors_off"), - SentimentDissatisfied("sentiment_dissatisfied"), - SentimentNeutral("sentiment_neutral"), - SentimentSatisfied("sentiment_satisfied"), - SentimentSatisfiedAlt("sentiment_satisfied_alt"), - SentimentVeryDissatisfied("sentiment_very_dissatisfied"), - SentimentVerySatisfied("sentiment_very_satisfied"), - SetMeal("set_meal"), - Settings("settings"), - SettingsAccessibility("settings_accessibility"), - SettingsApplications("settings_applications"), - SettingsBackupRestore("settings_backup_restore"), - SettingsBluetooth("settings_bluetooth"), - SettingsBrightness("settings_brightness"), - SettingsCell("settings_cell"), - SettingsEthernet("settings_ethernet"), - SettingsInputAntenna("settings_input_antenna"), - SettingsInputComponent("settings_input_component"), - SettingsInputComposite("settings_input_composite"), - SettingsInputHdmi("settings_input_hdmi"), - SettingsInputSvideo("settings_input_svideo"), - SettingsOverscan("settings_overscan"), - SettingsPhone("settings_phone"), - SettingsPower("settings_power"), - SettingsRemote("settings_remote"), - SettingsSuggest("settings_suggest"), - SettingsSystemDaydream("settings_system_daydream"), - SettingsVoice("settings_voice"), - Share("share"), - ShareLocation("share_location"), - Shield("shield"), - Shop("shop"), - Shop2("shop_2"), - ShopTwo("shop_two"), - ShoppingBag("shopping_bag"), - ShoppingBasket("shopping_basket"), - ShoppingCart("shopping_cart"), - ShortText("short_text"), - Shortcut("shortcut"), - ShowChart("show_chart"), - Shower("shower"), - Shuffle("shuffle"), - ShuffleOn("shuffle_on"), - ShutterSpeed("shutter_speed"), - Sick("sick"), - SignalCellular0Bar("signal_cellular_0_bar"), - SignalCellular4Bar("signal_cellular_4_bar"), - SignalCellularAlt("signal_cellular_alt"), - SignalCellularConnectedNoInternet0Bar("signal_cellular_connected_no_internet_0_bar"), - SignalCellularConnectedNoInternet4Bar("signal_cellular_connected_no_internet_4_bar"), - SignalCellularNoSim("signal_cellular_no_sim"), - SignalCellularNodata("signal_cellular_nodata"), - SignalCellularNull("signal_cellular_null"), - SignalCellularOff("signal_cellular_off"), - SignalWifi0Bar("signal_wifi_0_bar"), - SignalWifi4Bar("signal_wifi_4_bar"), - SignalWifi4BarLock("signal_wifi_4_bar_lock"), - SignalWifiBad("signal_wifi_bad"), - SignalWifiConnectedNoInternet4("signal_wifi_connected_no_internet_4"), - SignalWifiOff("signal_wifi_off"), - SignalWifiStatusbar4Bar("signal_wifi_statusbar_4_bar"), - SignalWifiStatusbarConnectedNoInternet4("signal_wifi_statusbar_connected_no_internet_4"), - SignalWifiStatusbarNull("signal_wifi_statusbar_null"), - SimCard("sim_card"), - SimCardAlert("sim_card_alert"), - SimCardDownload("sim_card_download"), - SingleBed("single_bed"), - Sip("sip"), - Skateboarding("skateboarding"), - SkipNext("skip_next"), - SkipPrevious("skip_previous"), - Sledding("sledding"), - Slideshow("slideshow"), - SlowMotionVideo("slow_motion_video"), - SmartButton("smart_button"), - SmartDisplay("smart_display"), - SmartScreen("smart_screen"), - SmartToy("smart_toy"), - Smartphone("smartphone"), - SmokeFree("smoke_free"), - SmokingRooms("smoking_rooms"), - Sms("sms"), - SmsFailed("sms_failed"), - SnippetFolder("snippet_folder"), - Snooze("snooze"), - Snowboarding("snowboarding"), - Snowmobile("snowmobile"), - Snowshoeing("snowshoeing"), - Soap("soap"), - SocialDistance("social_distance"), - Sort("sort"), - SortByAlpha("sort_by_alpha"), - Source("source"), - South("south"), - SouthEast("south_east"), - SouthWest("south_west"), - Spa("spa"), - SpaceBar("space_bar"), - SpaceDashboard("space_dashboard"), - Speaker("speaker"), - SpeakerGroup("speaker_group"), - SpeakerNotes("speaker_notes"), - SpeakerNotesOff("speaker_notes_off"), - SpeakerPhone("speaker_phone"), - Speed("speed"), - Spellcheck("spellcheck"), - Splitscreen("splitscreen"), - Sports("sports"), - SportsBar("sports_bar"), - SportsBaseball("sports_baseball"), - SportsBasketball("sports_basketball"), - SportsCricket("sports_cricket"), - SportsEsports("sports_esports"), - SportsFootball("sports_football"), - SportsGolf("sports_golf"), - SportsHandball("sports_handball"), - SportsHockey("sports_hockey"), - SportsKabaddi("sports_kabaddi"), - SportsMma("sports_mma"), - SportsMotorsports("sports_motorsports"), - SportsRugby("sports_rugby"), - SportsScore("sports_score"), - SportsSoccer("sports_soccer"), - SportsTennis("sports_tennis"), - SportsVolleyball("sports_volleyball"), - SquareFoot("square_foot"), - StackedBarChart("stacked_bar_chart"), - StackedLineChart("stacked_line_chart"), - Stairs("stairs"), - Star("star"), - StarBorder("star_border"), - StarBorderPurple500("star_border_purple500"), - StarHalf("star_half"), - StarOutline("star_outline"), - StarPurple500("star_purple500"), - StarRate("star_rate"), - Stars("stars"), - StayCurrentLandscape("stay_current_landscape"), - StayCurrentPortrait("stay_current_portrait"), - StayPrimaryLandscape("stay_primary_landscape"), - StayPrimaryPortrait("stay_primary_portrait"), - StickyNote2("sticky_note_2"), - Stop("stop"), - StopCircle("stop_circle"), - StopScreenShare("stop_screen_share"), - Storage("storage"), - Store("store"), - StoreMallDirectory("store_mall_directory"), - Storefront("storefront"), - Storm("storm"), - Straighten("straighten"), - Stream("stream"), - Streetview("streetview"), - StrikethroughS("strikethrough_s"), - Stroller("stroller"), - Style("style"), - SubdirectoryArrowLeft("subdirectory_arrow_left"), - SubdirectoryArrowRight("subdirectory_arrow_right"), - Subject("subject"), - Subscript("subscript"), - Subscriptions("subscriptions"), - Subtitles("subtitles"), - SubtitlesOff("subtitles_off"), - Subway("subway"), - Summarize("summarize"), - Superscript("superscript"), - SupervisedUserCircle("supervised_user_circle"), - SupervisorAccount("supervisor_account"), - Support("support"), - SupportAgent("support_agent"), - Surfing("surfing"), - SurroundSound("surround_sound"), - SwapCalls("swap_calls"), - SwapHoriz("swap_horiz"), - SwapHorizontalCircle("swap_horizontal_circle"), - SwapVert("swap_vert"), - SwapVerticalCircle("swap_vertical_circle"), - Swipe("swipe"), - SwitchAccount("switch_account"), - SwitchCamera("switch_camera"), - SwitchLeft("switch_left"), - SwitchRight("switch_right"), - SwitchVideo("switch_video"), - Sync("sync"), - SyncAlt("sync_alt"), - SyncDisabled("sync_disabled"), - SyncProblem("sync_problem"), - SystemSecurityUpdate("system_security_update"), - SystemSecurityUpdateGood("system_security_update_good"), - SystemSecurityUpdateWarning("system_security_update_warning"), - SystemUpdate("system_update"), - SystemUpdateAlt("system_update_alt"), - Tab("tab"), - TabUnselected("tab_unselected"), - TableChart("table_chart"), - TableRows("table_rows"), - TableView("table_view"), - Tablet("tablet"), - TabletAndroid("tablet_android"), - TabletMac("tablet_mac"), - Tag("tag"), - TagFaces("tag_faces"), - TakeoutDining("takeout_dining"), - TapAndPlay("tap_and_play"), - Tapas("tapas"), - Task("task"), - TaskAlt("task_alt"), - TaxiAlert("taxi_alert"), - Terrain("terrain"), - TextFields("text_fields"), - TextFormat("text_format"), - TextRotateUp("text_rotate_up"), - TextRotateVertical("text_rotate_vertical"), - TextRotationAngledown("text_rotation_angledown"), - TextRotationAngleup("text_rotation_angleup"), - TextRotationDown("text_rotation_down"), - TextRotationNone("text_rotation_none"), - TextSnippet("text_snippet"), - Textsms("textsms"), - Texture("texture"), - TheaterComedy("theater_comedy"), - Theaters("theaters"), - Thermostat("thermostat"), - ThermostatAuto("thermostat_auto"), - ThumbDown("thumb_down"), - ThumbDownAlt("thumb_down_alt"), - ThumbDownOffAlt("thumb_down_off_alt"), - ThumbUp("thumb_up"), - ThumbUpAlt("thumb_up_alt"), - ThumbUpOffAlt("thumb_up_off_alt"), - ThumbsUpDown("thumbs_up_down"), - TimeToLeave("time_to_leave"), - Timelapse("timelapse"), - Timeline("timeline"), - Timer("timer"), - Timer10("timer_10"), - Timer10Select("timer_10_select"), - Timer3("timer_3"), - Timer3Select("timer_3_select"), - TimerOff("timer_off"), - TipsAndUpdates("tips_and_updates"), - Title("title"), - Toc("toc"), - Today("today"), - ToggleOff("toggle_off"), - ToggleOn("toggle_on"), - Toll("toll"), - Tonality("tonality"), - Topic("topic"), - TouchApp("touch_app"), - Tour("tour"), - Toys("toys"), - TrackChanges("track_changes"), - Traffic("traffic"), - Train("train"), - Tram("tram"), - TransferWithinAStation("transfer_within_a_station"), - Transform("transform"), - Transgender("transgender"), - TransitEnterexit("transit_enterexit"), - Translate("translate"), - TravelExplore("travel_explore"), - TrendingDown("trending_down"), - TrendingFlat("trending_flat"), - TrendingUp("trending_up"), - TripOrigin("trip_origin"), - Try("try"), - Tty("tty"), - Tune("tune"), - Tungsten("tungsten"), - TurnedIn("turned_in"), - TurnedInNot("turned_in_not"), - Tv("tv"), - TvOff("tv_off"), - TwoWheeler("two_wheeler"), - Umbrella("umbrella"), - Unarchive("unarchive"), - Undo("undo"), - UnfoldLess("unfold_less"), - UnfoldMore("unfold_more"), - Unpublished("unpublished"), - Unsubscribe("unsubscribe"), - Upcoming("upcoming"), - Update("update"), - UpdateDisabled("update_disabled"), - Upgrade("upgrade"), - Upload("upload"), - UploadFile("upload_file"), - Usb("usb"), - UsbOff("usb_off"), - Verified("verified"), - VerifiedUser("verified_user"), - VerticalAlignBottom("vertical_align_bottom"), - VerticalAlignCenter("vertical_align_center"), - VerticalAlignTop("vertical_align_top"), - VerticalDistribute("vertical_distribute"), - VerticalSplit("vertical_split"), - Vibration("vibration"), - VideoCall("video_call"), - VideoCameraBack("video_camera_back"), - VideoCameraFront("video_camera_front"), - VideoLabel("video_label"), - VideoLibrary("video_library"), - VideoSettings("video_settings"), - VideoStable("video_stable"), - Videocam("videocam"), - VideocamOff("videocam_off"), - VideogameAsset("videogame_asset"), - VideogameAssetOff("videogame_asset_off"), - ViewAgenda("view_agenda"), - ViewArray("view_array"), - ViewCarousel("view_carousel"), - ViewColumn("view_column"), - ViewComfy("view_comfy"), - ViewCompact("view_compact"), - ViewDay("view_day"), - ViewHeadline("view_headline"), - ViewInAr("view_in_ar"), - ViewList("view_list"), - ViewModule("view_module"), - ViewQuilt("view_quilt"), - ViewSidebar("view_sidebar"), - ViewStream("view_stream"), - ViewWeek("view_week"), - Vignette("vignette"), - Villa("villa"), - Visibility("visibility"), - VisibilityOff("visibility_off"), - VoiceChat("voice_chat"), - VoiceOverOff("voice_over_off"), - Voicemail("voicemail"), - VolumeDown("volume_down"), - VolumeMute("volume_mute"), - VolumeOff("volume_off"), - VolumeUp("volume_up"), - VolunteerActivism("volunteer_activism"), - VpnKey("vpn_key"), - VpnLock("vpn_lock"), - Vrpano("vrpano"), - Wallpaper("wallpaper"), - Warning("warning"), - WarningAmber("warning_amber"), - Wash("wash"), - Watch("watch"), - WatchLater("watch_later"), - Water("water"), - WaterDamage("water_damage"), - WaterDrop("water_drop"), - WaterfallChart("waterfall_chart"), - Waves("waves"), - WavingHand("waving_hand"), - WbAuto("wb_auto"), - WbCloudy("wb_cloudy"), - WbIncandescent("wb_incandescent"), - WbIridescent("wb_iridescent"), - WbShade("wb_shade"), - WbSunny("wb_sunny"), - WbTwilight("wb_twilight"), - Wc("wc"), - Web("web"), - WebAsset("web_asset"), - WebAssetOff("web_asset_off"), - Weekend("weekend"), - West("west"), - Whatshot("whatshot"), - WheelchairPickup("wheelchair_pickup"), - WhereToVote("where_to_vote"), - Widgets("widgets"), - Wifi("wifi"), - WifiCalling("wifi_calling"), - WifiCalling3("wifi_calling_3"), - WifiLock("wifi_lock"), - WifiOff("wifi_off"), - WifiProtectedSetup("wifi_protected_setup"), - WifiTethering("wifi_tethering"), - WifiTetheringErrorRounded("wifi_tethering_error_rounded"), - WifiTetheringOff("wifi_tethering_off"), - Window("window"), - WineBar("wine_bar"), - Work("work"), - WorkOff("work_off"), - WorkOutline("work_outline"), - WorkspacePremium("workspace_premium"), - Workspaces("workspaces"), - WrapText("wrap_text"), - WrongLocation("wrong_location"), - Wysiwyg("wysiwyg"), - Yard("yard"), - YoutubeSearchedFor("youtube_searched_for"), - ZoomIn("zoom_in"), - ZoomOut("zoom_out"), - ZoomOutMap("zoom_out_map") - } +public enum class MDCIconType(public vararg val classes: String) { + Filled("material-icons"), + Outlined("material-icons-outlined"), + Round("material-icons-round"), + Sharp("material-icons-sharp"), + TwoTone("material-icons-two-tone") } diff --git a/kmdcx/kmdcx-icons/src/jsMain/kotlin/_icons.kt b/kmdcx/kmdcx-icons/src/jsMain/kotlin/_icons.kt new file mode 100644 index 00000000..de1f9230 --- /dev/null +++ b/kmdcx/kmdcx-icons/src/jsMain/kotlin/_icons.kt @@ -0,0 +1,1803 @@ +package dev.petuska.kmdcx.icons + +/** + * [JS API](https://github.com/marella/material-icons/tree/v1.10.4) + */ +public enum class MDCIcon(public val type: String) { + TenMp("10mp"), + ElevenMp("11mp"), + TwelveMp("12mp"), + ThirteenMp("13mp"), + FourteenMp("14mp"), + FifteenMp("15mp"), + SixteenMp("16mp"), + SeventeenMp("17mp"), + EighteenMp("18mp"), + NineteenMp("19mp"), + OneK("1k"), + OneKPlus("1k_plus"), + OneXMobiledata("1x_mobiledata"), + TwentyMp("20mp"), + TwentyOneMp("21mp"), + TwentyTwoMp("22mp"), + TwentyThreeMp("23mp"), + TwentyFourMp("24mp"), + TwoK("2k"), + TwoKPlus("2k_plus"), + TwoMp("2mp"), + ThirtyFps("30fps"), + ThirtyFpsSelect("30fps_select"), + ThreeSixty("360"), + ThreeDRotation("3d_rotation"), + ThreeGMobiledata("3g_mobiledata"), + ThreeK("3k"), + ThreeKPlus("3k_plus"), + ThreeMp("3mp"), + ThreeP("3p"), + FourGMobiledata("4g_mobiledata"), + FourGPlusMobiledata("4g_plus_mobiledata"), + FourK("4k"), + FourKPlus("4k_plus"), + FourMp("4mp"), + FiveG("5g"), + FiveK("5k"), + FiveKPlus("5k_plus"), + FiveMp("5mp"), + SixtyFps("60fps"), + SixtyFpsSelect("60fps_select"), + SixFtApart("6_ft_apart"), + SixK("6k"), + SixKPlus("6k_plus"), + SixMp("6mp"), + SevenK("7k"), + SevenKPlus("7k_plus"), + SevenMp("7mp"), + EightK("8k"), + EightKPlus("8k_plus"), + EightMp("8mp"), + NineK("9k"), + NineKPlus("9k_plus"), + NineMp("9mp"), + AcUnit("ac_unit"), + AccessAlarm("access_alarm"), + AccessAlarms("access_alarms"), + AccessTime("access_time"), + AccessTimeFilled("access_time_filled"), + Accessibility("accessibility"), + AccessibilityNew("accessibility_new"), + Accessible("accessible"), + AccessibleForward("accessible_forward"), + AccountBalance("account_balance"), + AccountBalanceWallet("account_balance_wallet"), + AccountBox("account_box"), + AccountCircle("account_circle"), + AccountTree("account_tree"), + AdUnits("ad_units"), + Adb("adb"), + Add("add"), + AddAPhoto("add_a_photo"), + AddAlarm("add_alarm"), + AddAlert("add_alert"), + AddBox("add_box"), + AddBusiness("add_business"), + AddChart("add_chart"), + AddCircle("add_circle"), + AddCircleOutline("add_circle_outline"), + AddComment("add_comment"), + AddIcCall("add_ic_call"), + AddLink("add_link"), + AddLocation("add_location"), + AddLocationAlt("add_location_alt"), + AddModerator("add_moderator"), + AddPhotoAlternate("add_photo_alternate"), + AddReaction("add_reaction"), + AddRoad("add_road"), + AddShoppingCart("add_shopping_cart"), + AddTask("add_task"), + AddToDrive("add_to_drive"), + AddToHomeScreen("add_to_home_screen"), + AddToPhotos("add_to_photos"), + AddToQueue("add_to_queue"), + Addchart("addchart"), + Adjust("adjust"), + AdminPanelSettings("admin_panel_settings"), + AdsClick("ads_click"), + Agriculture("agriculture"), + Air("air"), + AirlineSeatFlat("airline_seat_flat"), + AirlineSeatFlatAngled("airline_seat_flat_angled"), + AirlineSeatIndividualSuite("airline_seat_individual_suite"), + AirlineSeatLegroomExtra("airline_seat_legroom_extra"), + AirlineSeatLegroomNormal("airline_seat_legroom_normal"), + AirlineSeatLegroomReduced("airline_seat_legroom_reduced"), + AirlineSeatReclineExtra("airline_seat_recline_extra"), + AirlineSeatReclineNormal("airline_seat_recline_normal"), + AirplaneTicket("airplane_ticket"), + AirplanemodeActive("airplanemode_active"), + AirplanemodeInactive("airplanemode_inactive"), + Airplay("airplay"), + AirportShuttle("airport_shuttle"), + Alarm("alarm"), + AlarmAdd("alarm_add"), + AlarmOff("alarm_off"), + AlarmOn("alarm_on"), + Album("album"), + AlignHorizontalCenter("align_horizontal_center"), + AlignHorizontalLeft("align_horizontal_left"), + AlignHorizontalRight("align_horizontal_right"), + AlignVerticalBottom("align_vertical_bottom"), + AlignVerticalCenter("align_vertical_center"), + AlignVerticalTop("align_vertical_top"), + AllInbox("all_inbox"), + AllInclusive("all_inclusive"), + AllOut("all_out"), + AltRoute("alt_route"), + AlternateEmail("alternate_email"), + Analytics("analytics"), + Anchor("anchor"), + Android("android"), + Animation("animation"), + Announcement("announcement"), + Aod("aod"), + Apartment("apartment"), + Api("api"), + AppBlocking("app_blocking"), + AppRegistration("app_registration"), + AppSettingsAlt("app_settings_alt"), + Approval("approval"), + Apps("apps"), + Architecture("architecture"), + Archive("archive"), + AreaChart("area_chart"), + ArrowBack("arrow_back"), + ArrowBackIos("arrow_back_ios"), + ArrowBackIosNew("arrow_back_ios_new"), + ArrowCircleDown("arrow_circle_down"), + ArrowCircleUp("arrow_circle_up"), + ArrowDownward("arrow_downward"), + ArrowDropDown("arrow_drop_down"), + ArrowDropDownCircle("arrow_drop_down_circle"), + ArrowDropUp("arrow_drop_up"), + ArrowForward("arrow_forward"), + ArrowForwardIos("arrow_forward_ios"), + ArrowLeft("arrow_left"), + ArrowRight("arrow_right"), + ArrowRightAlt("arrow_right_alt"), + ArrowUpward("arrow_upward"), + ArtTrack("art_track"), + Article("article"), + AspectRatio("aspect_ratio"), + Assessment("assessment"), + Assignment("assignment"), + AssignmentInd("assignment_ind"), + AssignmentLate("assignment_late"), + AssignmentReturn("assignment_return"), + AssignmentReturned("assignment_returned"), + AssignmentTurnedIn("assignment_turned_in"), + Assistant("assistant"), + AssistantDirection("assistant_direction"), + AssistantPhoto("assistant_photo"), + Atm("atm"), + AttachEmail("attach_email"), + AttachFile("attach_file"), + AttachMoney("attach_money"), + Attachment("attachment"), + Attractions("attractions"), + Attribution("attribution"), + Audiotrack("audiotrack"), + AutoAwesome("auto_awesome"), + AutoAwesomeMosaic("auto_awesome_mosaic"), + AutoAwesomeMotion("auto_awesome_motion"), + AutoDelete("auto_delete"), + AutoFixHigh("auto_fix_high"), + AutoFixNormal("auto_fix_normal"), + AutoFixOff("auto_fix_off"), + AutoGraph("auto_graph"), + AutoStories("auto_stories"), + AutofpsSelect("autofps_select"), + Autorenew("autorenew"), + AvTimer("av_timer"), + BabyChangingStation("baby_changing_station"), + BackHand("back_hand"), + Backpack("backpack"), + Backspace("backspace"), + Backup("backup"), + BackupTable("backup_table"), + Badge("badge"), + BakeryDining("bakery_dining"), + Balcony("balcony"), + Ballot("ballot"), + BarChart("bar_chart"), + BatchPrediction("batch_prediction"), + Bathroom("bathroom"), + Bathtub("bathtub"), + BatteryAlert("battery_alert"), + BatteryChargingFull("battery_charging_full"), + BatteryFull("battery_full"), + BatterySaver("battery_saver"), + BatteryStd("battery_std"), + BatteryUnknown("battery_unknown"), + BeachAccess("beach_access"), + Bed("bed"), + BedroomBaby("bedroom_baby"), + BedroomChild("bedroom_child"), + BedroomParent("bedroom_parent"), + Bedtime("bedtime"), + Beenhere("beenhere"), + Bento("bento"), + BikeScooter("bike_scooter"), + Biotech("biotech"), + Blender("blender"), + Block("block"), + Bloodtype("bloodtype"), + Bluetooth("bluetooth"), + BluetoothAudio("bluetooth_audio"), + BluetoothConnected("bluetooth_connected"), + BluetoothDisabled("bluetooth_disabled"), + BluetoothDrive("bluetooth_drive"), + BluetoothSearching("bluetooth_searching"), + BlurCircular("blur_circular"), + BlurLinear("blur_linear"), + BlurOff("blur_off"), + BlurOn("blur_on"), + Bolt("bolt"), + Book("book"), + BookOnline("book_online"), + Bookmark("bookmark"), + BookmarkAdd("bookmark_add"), + BookmarkAdded("bookmark_added"), + BookmarkBorder("bookmark_border"), + BookmarkRemove("bookmark_remove"), + Bookmarks("bookmarks"), + BorderAll("border_all"), + BorderBottom("border_bottom"), + BorderClear("border_clear"), + BorderColor("border_color"), + BorderHorizontal("border_horizontal"), + BorderInner("border_inner"), + BorderLeft("border_left"), + BorderOuter("border_outer"), + BorderRight("border_right"), + BorderStyle("border_style"), + BorderTop("border_top"), + BorderVertical("border_vertical"), + BrandingWatermark("branding_watermark"), + BreakfastDining("breakfast_dining"), + Brightness1("brightness_1"), + Brightness2("brightness_2"), + Brightness3("brightness_3"), + Brightness4("brightness_4"), + Brightness5("brightness_5"), + Brightness6("brightness_6"), + Brightness7("brightness_7"), + BrightnessAuto("brightness_auto"), + BrightnessHigh("brightness_high"), + BrightnessLow("brightness_low"), + BrightnessMedium("brightness_medium"), + BrokenImage("broken_image"), + BrowserNotSupported("browser_not_supported"), + BrunchDining("brunch_dining"), + Brush("brush"), + BubbleChart("bubble_chart"), + BugReport("bug_report"), + Build("build"), + BuildCircle("build_circle"), + Bungalow("bungalow"), + BurstMode("burst_mode"), + BusAlert("bus_alert"), + Business("business"), + BusinessCenter("business_center"), + Cabin("cabin"), + Cable("cable"), + Cached("cached"), + Cake("cake"), + Calculate("calculate"), + CalendarToday("calendar_today"), + CalendarViewDay("calendar_view_day"), + CalendarViewMonth("calendar_view_month"), + CalendarViewWeek("calendar_view_week"), + Call("call"), + CallEnd("call_end"), + CallMade("call_made"), + CallMerge("call_merge"), + CallMissed("call_missed"), + CallMissedOutgoing("call_missed_outgoing"), + CallReceived("call_received"), + CallSplit("call_split"), + CallToAction("call_to_action"), + Camera("camera"), + CameraAlt("camera_alt"), + CameraEnhance("camera_enhance"), + CameraFront("camera_front"), + CameraIndoor("camera_indoor"), + CameraOutdoor("camera_outdoor"), + CameraRear("camera_rear"), + CameraRoll("camera_roll"), + Cameraswitch("cameraswitch"), + Campaign("campaign"), + Cancel("cancel"), + CancelPresentation("cancel_presentation"), + CancelScheduleSend("cancel_schedule_send"), + CarRental("car_rental"), + CarRepair("car_repair"), + CardGiftcard("card_giftcard"), + CardMembership("card_membership"), + CardTravel("card_travel"), + Carpenter("carpenter"), + Cases("cases"), + Casino("casino"), + Cast("cast"), + CastConnected("cast_connected"), + CastForEducation("cast_for_education"), + CatchingPokemon("catching_pokemon"), + Category("category"), + Celebration("celebration"), + CellWifi("cell_wifi"), + CenterFocusStrong("center_focus_strong"), + CenterFocusWeak("center_focus_weak"), + Chair("chair"), + ChairAlt("chair_alt"), + Chalet("chalet"), + ChangeCircle("change_circle"), + ChangeHistory("change_history"), + ChargingStation("charging_station"), + Chat("chat"), + ChatBubble("chat_bubble"), + ChatBubbleOutline("chat_bubble_outline"), + Check("check"), + CheckBox("check_box"), + CheckBoxOutlineBlank("check_box_outline_blank"), + CheckCircle("check_circle"), + CheckCircleOutline("check_circle_outline"), + Checklist("checklist"), + ChecklistRtl("checklist_rtl"), + Checkroom("checkroom"), + ChevronLeft("chevron_left"), + ChevronRight("chevron_right"), + ChildCare("child_care"), + ChildFriendly("child_friendly"), + ChromeReaderMode("chrome_reader_mode"), + Circle("circle"), + CircleNotifications("circle_notifications"), + Class("class"), + CleanHands("clean_hands"), + CleaningServices("cleaning_services"), + Clear("clear"), + ClearAll("clear_all"), + Close("close"), + CloseFullscreen("close_fullscreen"), + ClosedCaption("closed_caption"), + ClosedCaptionDisabled("closed_caption_disabled"), + ClosedCaptionOff("closed_caption_off"), + Cloud("cloud"), + CloudCircle("cloud_circle"), + CloudDone("cloud_done"), + CloudDownload("cloud_download"), + CloudOff("cloud_off"), + CloudQueue("cloud_queue"), + CloudUpload("cloud_upload"), + Co2("co2"), + Code("code"), + CodeOff("code_off"), + Coffee("coffee"), + CoffeeMaker("coffee_maker"), + Collections("collections"), + CollectionsBookmark("collections_bookmark"), + ColorLens("color_lens"), + Colorize("colorize"), + Comment("comment"), + CommentBank("comment_bank"), + CommentsDisabled("comments_disabled"), + Commute("commute"), + Compare("compare"), + CompareArrows("compare_arrows"), + CompassCalibration("compass_calibration"), + Compost("compost"), + Compress("compress"), + Computer("computer"), + ConfirmationNumber("confirmation_number"), + ConnectWithoutContact("connect_without_contact"), + ConnectedTv("connected_tv"), + Construction("construction"), + ContactMail("contact_mail"), + ContactPage("contact_page"), + ContactPhone("contact_phone"), + ContactSupport("contact_support"), + Contactless("contactless"), + Contacts("contacts"), + ContentCopy("content_copy"), + ContentCut("content_cut"), + ContentPaste("content_paste"), + ContentPasteOff("content_paste_off"), + ControlCamera("control_camera"), + ControlPoint("control_point"), + ControlPointDuplicate("control_point_duplicate"), + CopyAll("copy_all"), + Copyright("copyright"), + Coronavirus("coronavirus"), + CorporateFare("corporate_fare"), + Cottage("cottage"), + Countertops("countertops"), + Create("create"), + CreateNewFolder("create_new_folder"), + CreditCard("credit_card"), + CreditCardOff("credit_card_off"), + CreditScore("credit_score"), + Crib("crib"), + Crop("crop"), + Crop169("crop_16_9"), + Crop32("crop_3_2"), + Crop54("crop_5_4"), + Crop75("crop_7_5"), + CropDin("crop_din"), + CropFree("crop_free"), + CropLandscape("crop_landscape"), + CropOriginal("crop_original"), + CropPortrait("crop_portrait"), + CropRotate("crop_rotate"), + CropSquare("crop_square"), + CrueltyFree("cruelty_free"), + Dangerous("dangerous"), + DarkMode("dark_mode"), + Dashboard("dashboard"), + DashboardCustomize("dashboard_customize"), + DataExploration("data_exploration"), + DataSaverOff("data_saver_off"), + DataSaverOn("data_saver_on"), + DataUsage("data_usage"), + DateRange("date_range"), + Deck("deck"), + Dehaze("dehaze"), + Delete("delete"), + DeleteForever("delete_forever"), + DeleteOutline("delete_outline"), + DeleteSweep("delete_sweep"), + DeliveryDining("delivery_dining"), + DepartureBoard("departure_board"), + Description("description"), + DesignServices("design_services"), + DesktopAccessDisabled("desktop_access_disabled"), + DesktopMac("desktop_mac"), + DesktopWindows("desktop_windows"), + Details("details"), + DeveloperBoard("developer_board"), + DeveloperBoardOff("developer_board_off"), + DeveloperMode("developer_mode"), + DeviceHub("device_hub"), + DeviceThermostat("device_thermostat"), + DeviceUnknown("device_unknown"), + Devices("devices"), + DevicesOther("devices_other"), + DialerSip("dialer_sip"), + Dialpad("dialpad"), + Dining("dining"), + DinnerDining("dinner_dining"), + Directions("directions"), + DirectionsBike("directions_bike"), + DirectionsBoat("directions_boat"), + DirectionsBoatFilled("directions_boat_filled"), + DirectionsBus("directions_bus"), + DirectionsBusFilled("directions_bus_filled"), + DirectionsCar("directions_car"), + DirectionsCarFilled("directions_car_filled"), + DirectionsOff("directions_off"), + DirectionsRailway("directions_railway"), + DirectionsRailwayFilled("directions_railway_filled"), + DirectionsRun("directions_run"), + DirectionsSubway("directions_subway"), + DirectionsSubwayFilled("directions_subway_filled"), + DirectionsTransit("directions_transit"), + DirectionsTransitFilled("directions_transit_filled"), + DirectionsWalk("directions_walk"), + DirtyLens("dirty_lens"), + DisabledByDefault("disabled_by_default"), + DisabledVisible("disabled_visible"), + DiscFull("disc_full"), + Dns("dns"), + DoDisturb("do_disturb"), + DoDisturbAlt("do_disturb_alt"), + DoDisturbOff("do_disturb_off"), + DoDisturbOn("do_disturb_on"), + DoNotDisturb("do_not_disturb"), + DoNotDisturbAlt("do_not_disturb_alt"), + DoNotDisturbOff("do_not_disturb_off"), + DoNotDisturbOn("do_not_disturb_on"), + DoNotDisturbOnTotalSilence("do_not_disturb_on_total_silence"), + DoNotStep("do_not_step"), + DoNotTouch("do_not_touch"), + Dock("dock"), + DocumentScanner("document_scanner"), + Domain("domain"), + DomainDisabled("domain_disabled"), + DomainVerification("domain_verification"), + Done("done"), + DoneAll("done_all"), + DoneOutline("done_outline"), + DonutLarge("donut_large"), + DonutSmall("donut_small"), + DoorBack("door_back"), + DoorFront("door_front"), + DoorSliding("door_sliding"), + Doorbell("doorbell"), + DoubleArrow("double_arrow"), + DownhillSkiing("downhill_skiing"), + Download("download"), + DownloadDone("download_done"), + DownloadForOffline("download_for_offline"), + Downloading("downloading"), + Drafts("drafts"), + DragHandle("drag_handle"), + DragIndicator("drag_indicator"), + Draw("draw"), + DriveEta("drive_eta"), + DriveFileMove("drive_file_move"), + DriveFileMoveRtl("drive_file_move_rtl"), + DriveFileRenameOutline("drive_file_rename_outline"), + DriveFolderUpload("drive_folder_upload"), + Dry("dry"), + DryCleaning("dry_cleaning"), + Duo("duo"), + Dvr("dvr"), + DynamicFeed("dynamic_feed"), + DynamicForm("dynamic_form"), + EMobiledata("e_mobiledata"), + Earbuds("earbuds"), + EarbudsBattery("earbuds_battery"), + East("east"), + EdgesensorHigh("edgesensor_high"), + EdgesensorLow("edgesensor_low"), + Edit("edit"), + EditAttributes("edit_attributes"), + EditCalendar("edit_calendar"), + EditLocation("edit_location"), + EditLocationAlt("edit_location_alt"), + EditNote("edit_note"), + EditNotifications("edit_notifications"), + EditOff("edit_off"), + EditRoad("edit_road"), + Eject("eject"), + Elderly("elderly"), + ElectricBike("electric_bike"), + ElectricCar("electric_car"), + ElectricMoped("electric_moped"), + ElectricRickshaw("electric_rickshaw"), + ElectricScooter("electric_scooter"), + ElectricalServices("electrical_services"), + Elevator("elevator"), + Email("email"), + Emergency("emergency"), + EmojiEmotions("emoji_emotions"), + EmojiEvents("emoji_events"), + EmojiFlags("emoji_flags"), + EmojiFoodBeverage("emoji_food_beverage"), + EmojiNature("emoji_nature"), + EmojiObjects("emoji_objects"), + EmojiPeople("emoji_people"), + EmojiSymbols("emoji_symbols"), + EmojiTransportation("emoji_transportation"), + Engineering("engineering"), + EnhancedEncryption("enhanced_encryption"), + Equalizer("equalizer"), + Error("error"), + ErrorOutline("error_outline"), + Escalator("escalator"), + EscalatorWarning("escalator_warning"), + Euro("euro"), + EuroSymbol("euro_symbol"), + EvStation("ev_station"), + Event("event"), + EventAvailable("event_available"), + EventBusy("event_busy"), + EventNote("event_note"), + EventSeat("event_seat"), + ExitToApp("exit_to_app"), + Expand("expand"), + ExpandLess("expand_less"), + ExpandMore("expand_more"), + Explicit("explicit"), + Explore("explore"), + ExploreOff("explore_off"), + Exposure("exposure"), + ExposureNeg1("exposure_neg_1"), + ExposureNeg2("exposure_neg_2"), + ExposurePlus1("exposure_plus_1"), + ExposurePlus2("exposure_plus_2"), + ExposureZero("exposure_zero"), + Extension("extension"), + ExtensionOff("extension_off"), + Face("face"), + FaceRetouchingNatural("face_retouching_natural"), + FaceRetouchingOff("face_retouching_off"), + Facebook("facebook"), + FactCheck("fact_check"), + FamilyRestroom("family_restroom"), + FastForward("fast_forward"), + FastRewind("fast_rewind"), + Fastfood("fastfood"), + Favorite("favorite"), + FavoriteBorder("favorite_border"), + FeaturedPlayList("featured_play_list"), + FeaturedVideo("featured_video"), + Feed("feed"), + Feedback("feedback"), + Female("female"), + Fence("fence"), + Festival("festival"), + FiberDvr("fiber_dvr"), + FiberManualRecord("fiber_manual_record"), + FiberNew("fiber_new"), + FiberPin("fiber_pin"), + FiberSmartRecord("fiber_smart_record"), + FileCopy("file_copy"), + FileDownload("file_download"), + FileDownloadDone("file_download_done"), + FileDownloadOff("file_download_off"), + FilePresent("file_present"), + FileUpload("file_upload"), + Filter("filter"), + Filter1("filter_1"), + Filter2("filter_2"), + Filter3("filter_3"), + Filter4("filter_4"), + Filter5("filter_5"), + Filter6("filter_6"), + Filter7("filter_7"), + Filter8("filter_8"), + Filter9("filter_9"), + Filter9Plus("filter_9_plus"), + FilterAlt("filter_alt"), + FilterBAndW("filter_b_and_w"), + FilterCenterFocus("filter_center_focus"), + FilterDrama("filter_drama"), + FilterFrames("filter_frames"), + FilterHdr("filter_hdr"), + FilterList("filter_list"), + FilterNone("filter_none"), + FilterTiltShift("filter_tilt_shift"), + FilterVintage("filter_vintage"), + FindInPage("find_in_page"), + FindReplace("find_replace"), + Fingerprint("fingerprint"), + FireExtinguisher("fire_extinguisher"), + Fireplace("fireplace"), + FirstPage("first_page"), + FitScreen("fit_screen"), + FitnessCenter("fitness_center"), + Flag("flag"), + Flaky("flaky"), + Flare("flare"), + FlashAuto("flash_auto"), + FlashOff("flash_off"), + FlashOn("flash_on"), + FlashlightOff("flashlight_off"), + FlashlightOn("flashlight_on"), + Flatware("flatware"), + Flight("flight"), + FlightLand("flight_land"), + FlightTakeoff("flight_takeoff"), + Flip("flip"), + FlipCameraAndroid("flip_camera_android"), + FlipCameraIos("flip_camera_ios"), + FlipToBack("flip_to_back"), + FlipToFront("flip_to_front"), + Flourescent("flourescent"), + FlutterDash("flutter_dash"), + FmdBad("fmd_bad"), + FmdGood("fmd_good"), + Folder("folder"), + FolderOpen("folder_open"), + FolderShared("folder_shared"), + FolderSpecial("folder_special"), + FollowTheSigns("follow_the_signs"), + FontDownload("font_download"), + FontDownloadOff("font_download_off"), + FoodBank("food_bank"), + FormatAlignCenter("format_align_center"), + FormatAlignJustify("format_align_justify"), + FormatAlignLeft("format_align_left"), + FormatAlignRight("format_align_right"), + FormatBold("format_bold"), + FormatClear("format_clear"), + FormatColorFill("format_color_fill"), + FormatColorReset("format_color_reset"), + FormatColorText("format_color_text"), + FormatIndentDecrease("format_indent_decrease"), + FormatIndentIncrease("format_indent_increase"), + FormatItalic("format_italic"), + FormatLineSpacing("format_line_spacing"), + FormatListBulleted("format_list_bulleted"), + FormatListNumbered("format_list_numbered"), + FormatListNumberedRtl("format_list_numbered_rtl"), + FormatPaint("format_paint"), + FormatQuote("format_quote"), + FormatShapes("format_shapes"), + FormatSize("format_size"), + FormatStrikethrough("format_strikethrough"), + FormatTextdirectionLToR("format_textdirection_l_to_r"), + FormatTextdirectionRToL("format_textdirection_r_to_l"), + FormatUnderlined("format_underlined"), + Forum("forum"), + Forward("forward"), + Forward10("forward_10"), + Forward30("forward_30"), + Forward5("forward_5"), + ForwardToInbox("forward_to_inbox"), + Foundation("foundation"), + FreeBreakfast("free_breakfast"), + FreeCancellation("free_cancellation"), + FrontHand("front_hand"), + Fullscreen("fullscreen"), + FullscreenExit("fullscreen_exit"), + Functions("functions"), + GMobiledata("g_mobiledata"), + GTranslate("g_translate"), + Gamepad("gamepad"), + Games("games"), + Garage("garage"), + Gavel("gavel"), + GeneratingTokens("generating_tokens"), + Gesture("gesture"), + GetApp("get_app"), + Gif("gif"), + GifBox("gif_box"), + Gite("gite"), + GolfCourse("golf_course"), + GppBad("gpp_bad"), + GppGood("gpp_good"), + GppMaybe("gpp_maybe"), + GpsFixed("gps_fixed"), + GpsNotFixed("gps_not_fixed"), + GpsOff("gps_off"), + Grade("grade"), + Gradient("gradient"), + Grading("grading"), + Grain("grain"), + GraphicEq("graphic_eq"), + Grass("grass"), + Grid3X3("grid_3x3"), + Grid4X4("grid_4x4"), + GridGoldenratio("grid_goldenratio"), + GridOff("grid_off"), + GridOn("grid_on"), + GridView("grid_view"), + Group("group"), + GroupAdd("group_add"), + GroupOff("group_off"), + GroupRemove("group_remove"), + GroupWork("group_work"), + Groups("groups"), + HMobiledata("h_mobiledata"), + HPlusMobiledata("h_plus_mobiledata"), + Hail("hail"), + Handyman("handyman"), + Hardware("hardware"), + Hd("hd"), + HdrAuto("hdr_auto"), + HdrAutoSelect("hdr_auto_select"), + HdrEnhancedSelect("hdr_enhanced_select"), + HdrOff("hdr_off"), + HdrOffSelect("hdr_off_select"), + HdrOn("hdr_on"), + HdrOnSelect("hdr_on_select"), + HdrPlus("hdr_plus"), + HdrStrong("hdr_strong"), + HdrWeak("hdr_weak"), + Headphones("headphones"), + HeadphonesBattery("headphones_battery"), + Headset("headset"), + HeadsetMic("headset_mic"), + HeadsetOff("headset_off"), + Healing("healing"), + HealthAndSafety("health_and_safety"), + Hearing("hearing"), + HearingDisabled("hearing_disabled"), + Height("height"), + Help("help"), + HelpCenter("help_center"), + HelpOutline("help_outline"), + Hevc("hevc"), + HideImage("hide_image"), + HideSource("hide_source"), + HighQuality("high_quality"), + Highlight("highlight"), + HighlightAlt("highlight_alt"), + HighlightOff("highlight_off"), + Hiking("hiking"), + History("history"), + HistoryEdu("history_edu"), + HistoryToggleOff("history_toggle_off"), + HolidayVillage("holiday_village"), + Home("home"), + HomeMax("home_max"), + HomeMini("home_mini"), + HomeRepairService("home_repair_service"), + HomeWork("home_work"), + HorizontalDistribute("horizontal_distribute"), + HorizontalRule("horizontal_rule"), + HorizontalSplit("horizontal_split"), + HotTub("hot_tub"), + Hotel("hotel"), + HotelClass("hotel_class"), + HourglassBottom("hourglass_bottom"), + HourglassDisabled("hourglass_disabled"), + HourglassEmpty("hourglass_empty"), + HourglassFull("hourglass_full"), + HourglassTop("hourglass_top"), + House("house"), + HouseSiding("house_siding"), + Houseboat("houseboat"), + HowToReg("how_to_reg"), + HowToVote("how_to_vote"), + Http("http"), + Https("https"), + Hvac("hvac"), + IceSkating("ice_skating"), + Icecream("icecream"), + Image("image"), + ImageAspectRatio("image_aspect_ratio"), + ImageNotSupported("image_not_supported"), + ImageSearch("image_search"), + ImagesearchRoller("imagesearch_roller"), + ImportContacts("import_contacts"), + ImportExport("import_export"), + ImportantDevices("important_devices"), + Inbox("inbox"), + IncompleteCircle("incomplete_circle"), + IndeterminateCheckBox("indeterminate_check_box"), + Info("info"), + Input("input"), + InsertChart("insert_chart"), + InsertChartOutlined("insert_chart_outlined"), + InsertComment("insert_comment"), + InsertDriveFile("insert_drive_file"), + InsertEmoticon("insert_emoticon"), + InsertInvitation("insert_invitation"), + InsertLink("insert_link"), + InsertPhoto("insert_photo"), + Insights("insights"), + IntegrationInstructions("integration_instructions"), + Inventory("inventory"), + Inventory2("inventory_2"), + InvertColors("invert_colors"), + InvertColorsOff("invert_colors_off"), + IosShare("ios_share"), + Iron("iron"), + Iso("iso"), + Kayaking("kayaking"), + Keyboard("keyboard"), + KeyboardAlt("keyboard_alt"), + KeyboardArrowDown("keyboard_arrow_down"), + KeyboardArrowLeft("keyboard_arrow_left"), + KeyboardArrowRight("keyboard_arrow_right"), + KeyboardArrowUp("keyboard_arrow_up"), + KeyboardBackspace("keyboard_backspace"), + KeyboardCapslock("keyboard_capslock"), + KeyboardHide("keyboard_hide"), + KeyboardReturn("keyboard_return"), + KeyboardTab("keyboard_tab"), + KeyboardVoice("keyboard_voice"), + KingBed("king_bed"), + Kitchen("kitchen"), + Kitesurfing("kitesurfing"), + Label("label"), + LabelImportant("label_important"), + LabelOff("label_off"), + Landscape("landscape"), + Language("language"), + Laptop("laptop"), + LaptopChromebook("laptop_chromebook"), + LaptopMac("laptop_mac"), + LaptopWindows("laptop_windows"), + LastPage("last_page"), + Launch("launch"), + Layers("layers"), + LayersClear("layers_clear"), + Leaderboard("leaderboard"), + LeakAdd("leak_add"), + LeakRemove("leak_remove"), + LegendToggle("legend_toggle"), + Lens("lens"), + LensBlur("lens_blur"), + LibraryAdd("library_add"), + LibraryAddCheck("library_add_check"), + LibraryBooks("library_books"), + LibraryMusic("library_music"), + Light("light"), + LightMode("light_mode"), + Lightbulb("lightbulb"), + LineStyle("line_style"), + LineWeight("line_weight"), + LinearScale("linear_scale"), + Link("link"), + LinkOff("link_off"), + LinkedCamera("linked_camera"), + Liquor("liquor"), + List("list"), + ListAlt("list_alt"), + LiveHelp("live_help"), + LiveTv("live_tv"), + Living("living"), + LocalActivity("local_activity"), + LocalAirport("local_airport"), + LocalAtm("local_atm"), + LocalBar("local_bar"), + LocalCafe("local_cafe"), + LocalCarWash("local_car_wash"), + LocalConvenienceStore("local_convenience_store"), + LocalDining("local_dining"), + LocalDrink("local_drink"), + LocalFireDepartment("local_fire_department"), + LocalFlorist("local_florist"), + LocalGasStation("local_gas_station"), + LocalGroceryStore("local_grocery_store"), + LocalHospital("local_hospital"), + LocalHotel("local_hotel"), + LocalLaundryService("local_laundry_service"), + LocalLibrary("local_library"), + LocalMall("local_mall"), + LocalMovies("local_movies"), + LocalOffer("local_offer"), + LocalParking("local_parking"), + LocalPharmacy("local_pharmacy"), + LocalPhone("local_phone"), + LocalPizza("local_pizza"), + LocalPlay("local_play"), + LocalPolice("local_police"), + LocalPostOffice("local_post_office"), + LocalPrintshop("local_printshop"), + LocalSee("local_see"), + LocalShipping("local_shipping"), + LocalTaxi("local_taxi"), + LocationCity("location_city"), + LocationDisabled("location_disabled"), + LocationOff("location_off"), + LocationOn("location_on"), + LocationSearching("location_searching"), + Lock("lock"), + LockClock("lock_clock"), + LockOpen("lock_open"), + Login("login"), + Logout("logout"), + Looks("looks"), + Looks3("looks_3"), + Looks4("looks_4"), + Looks5("looks_5"), + Looks6("looks_6"), + LooksOne("looks_one"), + LooksTwo("looks_two"), + Loop("loop"), + Loupe("loupe"), + LowPriority("low_priority"), + Loyalty("loyalty"), + LteMobiledata("lte_mobiledata"), + LtePlusMobiledata("lte_plus_mobiledata"), + Luggage("luggage"), + LunchDining("lunch_dining"), + Mail("mail"), + MailOutline("mail_outline"), + Male("male"), + ManageAccounts("manage_accounts"), + ManageSearch("manage_search"), + Map("map"), + MapsHomeWork("maps_home_work"), + MapsUgc("maps_ugc"), + Margin("margin"), + MarkAsUnread("mark_as_unread"), + MarkChatRead("mark_chat_read"), + MarkChatUnread("mark_chat_unread"), + MarkEmailRead("mark_email_read"), + MarkEmailUnread("mark_email_unread"), + Markunread("markunread"), + MarkunreadMailbox("markunread_mailbox"), + Masks("masks"), + Maximize("maximize"), + MediaBluetoothOff("media_bluetooth_off"), + MediaBluetoothOn("media_bluetooth_on"), + Mediation("mediation"), + MedicalServices("medical_services"), + Medication("medication"), + MeetingRoom("meeting_room"), + Memory("memory"), + Menu("menu"), + MenuBook("menu_book"), + MenuOpen("menu_open"), + MergeType("merge_type"), + Message("message"), + Mic("mic"), + MicExternalOff("mic_external_off"), + MicExternalOn("mic_external_on"), + MicNone("mic_none"), + MicOff("mic_off"), + Microwave("microwave"), + MilitaryTech("military_tech"), + Minimize("minimize"), + MiscellaneousServices("miscellaneous_services"), + MissedVideoCall("missed_video_call"), + Mms("mms"), + MobileFriendly("mobile_friendly"), + MobileOff("mobile_off"), + MobileScreenShare("mobile_screen_share"), + MobiledataOff("mobiledata_off"), + Mode("mode"), + ModeComment("mode_comment"), + ModeEdit("mode_edit"), + ModeEditOutline("mode_edit_outline"), + ModeNight("mode_night"), + ModeStandby("mode_standby"), + ModelTraining("model_training"), + MonetizationOn("monetization_on"), + Money("money"), + MoneyOff("money_off"), + MoneyOffCsred("money_off_csred"), + Monitor("monitor"), + MonitorWeight("monitor_weight"), + MonochromePhotos("monochrome_photos"), + Mood("mood"), + MoodBad("mood_bad"), + Moped("moped"), + More("more"), + MoreHoriz("more_horiz"), + MoreTime("more_time"), + MoreVert("more_vert"), + MotionPhotosAuto("motion_photos_auto"), + MotionPhotosOff("motion_photos_off"), + MotionPhotosOn("motion_photos_on"), + MotionPhotosPause("motion_photos_pause"), + MotionPhotosPaused("motion_photos_paused"), + Mouse("mouse"), + MoveToInbox("move_to_inbox"), + Movie("movie"), + MovieCreation("movie_creation"), + MovieFilter("movie_filter"), + Moving("moving"), + Mp("mp"), + MultilineChart("multiline_chart"), + MultipleStop("multiple_stop"), + Museum("museum"), + MusicNote("music_note"), + MusicOff("music_off"), + MusicVideo("music_video"), + MyLocation("my_location"), + Nat("nat"), + Nature("nature"), + NaturePeople("nature_people"), + NavigateBefore("navigate_before"), + NavigateNext("navigate_next"), + Navigation("navigation"), + NearMe("near_me"), + NearMeDisabled("near_me_disabled"), + NearbyError("nearby_error"), + NearbyOff("nearby_off"), + NetworkCell("network_cell"), + NetworkCheck("network_check"), + NetworkLocked("network_locked"), + NetworkWifi("network_wifi"), + NewLabel("new_label"), + NewReleases("new_releases"), + NextPlan("next_plan"), + NextWeek("next_week"), + Nfc("nfc"), + NightShelter("night_shelter"), + Nightlife("nightlife"), + Nightlight("nightlight"), + NightlightRound("nightlight_round"), + NightsStay("nights_stay"), + NoAccounts("no_accounts"), + NoBackpack("no_backpack"), + NoCell("no_cell"), + NoDrinks("no_drinks"), + NoEncryption("no_encryption"), + NoEncryptionGmailerrorred("no_encryption_gmailerrorred"), + NoFlash("no_flash"), + NoFood("no_food"), + NoLuggage("no_luggage"), + NoMeals("no_meals"), + NoMeetingRoom("no_meeting_room"), + NoPhotography("no_photography"), + NoSim("no_sim"), + NoStroller("no_stroller"), + NoTransfer("no_transfer"), + NordicWalking("nordic_walking"), + North("north"), + NorthEast("north_east"), + NorthWest("north_west"), + NotAccessible("not_accessible"), + NotInterested("not_interested"), + NotListedLocation("not_listed_location"), + NotStarted("not_started"), + Note("note"), + NoteAdd("note_add"), + NoteAlt("note_alt"), + Notes("notes"), + NotificationAdd("notification_add"), + NotificationImportant("notification_important"), + Notifications("notifications"), + NotificationsActive("notifications_active"), + NotificationsNone("notifications_none"), + NotificationsOff("notifications_off"), + NotificationsPaused("notifications_paused"), + OfflineBolt("offline_bolt"), + OfflinePin("offline_pin"), + OfflineShare("offline_share"), + OndemandVideo("ondemand_video"), + OnlinePrediction("online_prediction"), + Opacity("opacity"), + OpenInBrowser("open_in_browser"), + OpenInFull("open_in_full"), + OpenInNew("open_in_new"), + OpenInNewOff("open_in_new_off"), + OpenWith("open_with"), + OtherHouses("other_houses"), + Outbound("outbound"), + Outbox("outbox"), + OutdoorGrill("outdoor_grill"), + Outlet("outlet"), + OutlinedFlag("outlined_flag"), + Padding("padding"), + Pages("pages"), + Pageview("pageview"), + Paid("paid"), + Palette("palette"), + PanTool("pan_tool"), + Panorama("panorama"), + PanoramaFishEye("panorama_fish_eye"), + PanoramaHorizontal("panorama_horizontal"), + PanoramaHorizontalSelect("panorama_horizontal_select"), + PanoramaPhotosphere("panorama_photosphere"), + PanoramaPhotosphereSelect("panorama_photosphere_select"), + PanoramaVertical("panorama_vertical"), + PanoramaVerticalSelect("panorama_vertical_select"), + PanoramaWideAngle("panorama_wide_angle"), + PanoramaWideAngleSelect("panorama_wide_angle_select"), + Paragliding("paragliding"), + Park("park"), + PartyMode("party_mode"), + Password("password"), + Pattern("pattern"), + Pause("pause"), + PauseCircle("pause_circle"), + PauseCircleFilled("pause_circle_filled"), + PauseCircleOutline("pause_circle_outline"), + PausePresentation("pause_presentation"), + Payment("payment"), + Payments("payments"), + PedalBike("pedal_bike"), + Pending("pending"), + PendingActions("pending_actions"), + People("people"), + PeopleAlt("people_alt"), + PeopleOutline("people_outline"), + PermCameraMic("perm_camera_mic"), + PermContactCalendar("perm_contact_calendar"), + PermDataSetting("perm_data_setting"), + PermDeviceInformation("perm_device_information"), + PermIdentity("perm_identity"), + PermMedia("perm_media"), + PermPhoneMsg("perm_phone_msg"), + PermScanWifi("perm_scan_wifi"), + Person("person"), + PersonAdd("person_add"), + PersonAddAlt("person_add_alt"), + PersonAddAlt1("person_add_alt_1"), + PersonAddDisabled("person_add_disabled"), + PersonOff("person_off"), + PersonOutline("person_outline"), + PersonPin("person_pin"), + PersonPinCircle("person_pin_circle"), + PersonRemove("person_remove"), + PersonRemoveAlt1("person_remove_alt_1"), + PersonSearch("person_search"), + PersonalInjury("personal_injury"), + PersonalVideo("personal_video"), + PestControl("pest_control"), + PestControlRodent("pest_control_rodent"), + Pets("pets"), + Phone("phone"), + PhoneAndroid("phone_android"), + PhoneBluetoothSpeaker("phone_bluetooth_speaker"), + PhoneCallback("phone_callback"), + PhoneDisabled("phone_disabled"), + PhoneEnabled("phone_enabled"), + PhoneForwarded("phone_forwarded"), + PhoneInTalk("phone_in_talk"), + PhoneIphone("phone_iphone"), + PhoneLocked("phone_locked"), + PhoneMissed("phone_missed"), + PhonePaused("phone_paused"), + Phonelink("phonelink"), + PhonelinkErase("phonelink_erase"), + PhonelinkLock("phonelink_lock"), + PhonelinkOff("phonelink_off"), + PhonelinkRing("phonelink_ring"), + PhonelinkSetup("phonelink_setup"), + Photo("photo"), + PhotoAlbum("photo_album"), + PhotoCamera("photo_camera"), + PhotoCameraBack("photo_camera_back"), + PhotoCameraFront("photo_camera_front"), + PhotoFilter("photo_filter"), + PhotoLibrary("photo_library"), + PhotoSizeSelectActual("photo_size_select_actual"), + PhotoSizeSelectLarge("photo_size_select_large"), + PhotoSizeSelectSmall("photo_size_select_small"), + Piano("piano"), + PianoOff("piano_off"), + PictureAsPdf("picture_as_pdf"), + PictureInPicture("picture_in_picture"), + PictureInPictureAlt("picture_in_picture_alt"), + PieChart("pie_chart"), + PieChartOutline("pie_chart_outline"), + Pin("pin"), + PinDrop("pin_drop"), + PinEnd("pin_end"), + PinInvoke("pin_invoke"), + PivotTableChart("pivot_table_chart"), + Place("place"), + Plagiarism("plagiarism"), + PlayArrow("play_arrow"), + PlayCircle("play_circle"), + PlayCircleFilled("play_circle_filled"), + PlayCircleOutline("play_circle_outline"), + PlayDisabled("play_disabled"), + PlayForWork("play_for_work"), + PlayLesson("play_lesson"), + PlaylistAdd("playlist_add"), + PlaylistAddCheck("playlist_add_check"), + PlaylistPlay("playlist_play"), + Plumbing("plumbing"), + PlusOne("plus_one"), + Podcasts("podcasts"), + PointOfSale("point_of_sale"), + Policy("policy"), + Poll("poll"), + Polymer("polymer"), + Pool("pool"), + PortableWifiOff("portable_wifi_off"), + Portrait("portrait"), + PostAdd("post_add"), + Power("power"), + PowerInput("power_input"), + PowerOff("power_off"), + PowerSettingsNew("power_settings_new"), + PrecisionManufacturing("precision_manufacturing"), + PregnantWoman("pregnant_woman"), + PresentToAll("present_to_all"), + Preview("preview"), + PriceChange("price_change"), + PriceCheck("price_check"), + Print("print"), + PrintDisabled("print_disabled"), + PriorityHigh("priority_high"), + PrivacyTip("privacy_tip"), + PrivateConnectivity("private_connectivity"), + ProductionQuantityLimits("production_quantity_limits"), + Psychology("psychology"), + Public("public"), + PublicOff("public_off"), + Publish("publish"), + PublishedWithChanges("published_with_changes"), + PushPin("push_pin"), + QrCode("qr_code"), + QrCode2("qr_code_2"), + QrCodeScanner("qr_code_scanner"), + QueryBuilder("query_builder"), + QueryStats("query_stats"), + QuestionAnswer("question_answer"), + Queue("queue"), + QueueMusic("queue_music"), + QueuePlayNext("queue_play_next"), + Quickreply("quickreply"), + Quiz("quiz"), + RMobiledata("r_mobiledata"), + Radar("radar"), + Radio("radio"), + RadioButtonChecked("radio_button_checked"), + RadioButtonUnchecked("radio_button_unchecked"), + RailwayAlert("railway_alert"), + RamenDining("ramen_dining"), + RateReview("rate_review"), + RawOff("raw_off"), + RawOn("raw_on"), + ReadMore("read_more"), + RealEstateAgent("real_estate_agent"), + Receipt("receipt"), + ReceiptLong("receipt_long"), + RecentActors("recent_actors"), + Recommend("recommend"), + RecordVoiceOver("record_voice_over"), + Recycling("recycling"), + Redeem("redeem"), + Redo("redo"), + ReduceCapacity("reduce_capacity"), + Refresh("refresh"), + RememberMe("remember_me"), + Remove("remove"), + RemoveCircle("remove_circle"), + RemoveCircleOutline("remove_circle_outline"), + RemoveDone("remove_done"), + RemoveFromQueue("remove_from_queue"), + RemoveModerator("remove_moderator"), + RemoveRedEye("remove_red_eye"), + RemoveShoppingCart("remove_shopping_cart"), + Reorder("reorder"), + Repeat("repeat"), + RepeatOn("repeat_on"), + RepeatOne("repeat_one"), + RepeatOneOn("repeat_one_on"), + Replay("replay"), + Replay10("replay_10"), + Replay30("replay_30"), + Replay5("replay_5"), + ReplayCircleFilled("replay_circle_filled"), + Reply("reply"), + ReplyAll("reply_all"), + Report("report"), + ReportGmailerrorred("report_gmailerrorred"), + ReportOff("report_off"), + ReportProblem("report_problem"), + RequestPage("request_page"), + RequestQuote("request_quote"), + ResetTv("reset_tv"), + RestartAlt("restart_alt"), + Restaurant("restaurant"), + RestaurantMenu("restaurant_menu"), + Restore("restore"), + RestoreFromTrash("restore_from_trash"), + RestorePage("restore_page"), + Reviews("reviews"), + RiceBowl("rice_bowl"), + RingVolume("ring_volume"), + Roofing("roofing"), + Room("room"), + RoomPreferences("room_preferences"), + RoomService("room_service"), + Rotate90DegreesCcw("rotate_90_degrees_ccw"), + RotateLeft("rotate_left"), + RotateRight("rotate_right"), + RoundedCorner("rounded_corner"), + Router("router"), + Rowing("rowing"), + RssFeed("rss_feed"), + Rsvp("rsvp"), + Rtt("rtt"), + Rule("rule"), + RuleFolder("rule_folder"), + RunCircle("run_circle"), + RunningWithErrors("running_with_errors"), + RvHookup("rv_hookup"), + SafetyDivider("safety_divider"), + Sailing("sailing"), + Sanitizer("sanitizer"), + Satellite("satellite"), + Save("save"), + SaveAlt("save_alt"), + SavedSearch("saved_search"), + Savings("savings"), + Scanner("scanner"), + ScatterPlot("scatter_plot"), + Schedule("schedule"), + ScheduleSend("schedule_send"), + Schema("schema"), + School("school"), + Science("science"), + Score("score"), + ScreenLockLandscape("screen_lock_landscape"), + ScreenLockPortrait("screen_lock_portrait"), + ScreenLockRotation("screen_lock_rotation"), + ScreenRotation("screen_rotation"), + ScreenSearchDesktop("screen_search_desktop"), + ScreenShare("screen_share"), + Screenshot("screenshot"), + Sd("sd"), + SdCard("sd_card"), + SdCardAlert("sd_card_alert"), + SdStorage("sd_storage"), + Search("search"), + SearchOff("search_off"), + Security("security"), + SecurityUpdate("security_update"), + SecurityUpdateGood("security_update_good"), + SecurityUpdateWarning("security_update_warning"), + Segment("segment"), + SelectAll("select_all"), + SelfImprovement("self_improvement"), + Sell("sell"), + Send("send"), + SendAndArchive("send_and_archive"), + SendToMobile("send_to_mobile"), + SensorDoor("sensor_door"), + SensorWindow("sensor_window"), + Sensors("sensors"), + SensorsOff("sensors_off"), + SentimentDissatisfied("sentiment_dissatisfied"), + SentimentNeutral("sentiment_neutral"), + SentimentSatisfied("sentiment_satisfied"), + SentimentSatisfiedAlt("sentiment_satisfied_alt"), + SentimentVeryDissatisfied("sentiment_very_dissatisfied"), + SentimentVerySatisfied("sentiment_very_satisfied"), + SetMeal("set_meal"), + Settings("settings"), + SettingsAccessibility("settings_accessibility"), + SettingsApplications("settings_applications"), + SettingsBackupRestore("settings_backup_restore"), + SettingsBluetooth("settings_bluetooth"), + SettingsBrightness("settings_brightness"), + SettingsCell("settings_cell"), + SettingsEthernet("settings_ethernet"), + SettingsInputAntenna("settings_input_antenna"), + SettingsInputComponent("settings_input_component"), + SettingsInputComposite("settings_input_composite"), + SettingsInputHdmi("settings_input_hdmi"), + SettingsInputSvideo("settings_input_svideo"), + SettingsOverscan("settings_overscan"), + SettingsPhone("settings_phone"), + SettingsPower("settings_power"), + SettingsRemote("settings_remote"), + SettingsSuggest("settings_suggest"), + SettingsSystemDaydream("settings_system_daydream"), + SettingsVoice("settings_voice"), + Share("share"), + ShareLocation("share_location"), + Shield("shield"), + Shop("shop"), + Shop2("shop_2"), + ShopTwo("shop_two"), + ShoppingBag("shopping_bag"), + ShoppingBasket("shopping_basket"), + ShoppingCart("shopping_cart"), + ShortText("short_text"), + Shortcut("shortcut"), + ShowChart("show_chart"), + Shower("shower"), + Shuffle("shuffle"), + ShuffleOn("shuffle_on"), + ShutterSpeed("shutter_speed"), + Sick("sick"), + SignalCellular0Bar("signal_cellular_0_bar"), + SignalCellular4Bar("signal_cellular_4_bar"), + SignalCellularAlt("signal_cellular_alt"), + SignalCellularConnectedNoInternet0Bar("signal_cellular_connected_no_internet_0_bar"), + SignalCellularConnectedNoInternet4Bar("signal_cellular_connected_no_internet_4_bar"), + SignalCellularNoSim("signal_cellular_no_sim"), + SignalCellularNodata("signal_cellular_nodata"), + SignalCellularNull("signal_cellular_null"), + SignalCellularOff("signal_cellular_off"), + SignalWifi0Bar("signal_wifi_0_bar"), + SignalWifi4Bar("signal_wifi_4_bar"), + SignalWifi4BarLock("signal_wifi_4_bar_lock"), + SignalWifiBad("signal_wifi_bad"), + SignalWifiConnectedNoInternet4("signal_wifi_connected_no_internet_4"), + SignalWifiOff("signal_wifi_off"), + SignalWifiStatusbar4Bar("signal_wifi_statusbar_4_bar"), + SignalWifiStatusbarConnectedNoInternet4("signal_wifi_statusbar_connected_no_internet_4"), + SignalWifiStatusbarNull("signal_wifi_statusbar_null"), + SimCard("sim_card"), + SimCardAlert("sim_card_alert"), + SimCardDownload("sim_card_download"), + SingleBed("single_bed"), + Sip("sip"), + Skateboarding("skateboarding"), + SkipNext("skip_next"), + SkipPrevious("skip_previous"), + Sledding("sledding"), + Slideshow("slideshow"), + SlowMotionVideo("slow_motion_video"), + SmartButton("smart_button"), + SmartDisplay("smart_display"), + SmartScreen("smart_screen"), + SmartToy("smart_toy"), + Smartphone("smartphone"), + SmokeFree("smoke_free"), + SmokingRooms("smoking_rooms"), + Sms("sms"), + SmsFailed("sms_failed"), + SnippetFolder("snippet_folder"), + Snooze("snooze"), + Snowboarding("snowboarding"), + Snowmobile("snowmobile"), + Snowshoeing("snowshoeing"), + Soap("soap"), + SocialDistance("social_distance"), + Sort("sort"), + SortByAlpha("sort_by_alpha"), + Source("source"), + South("south"), + SouthEast("south_east"), + SouthWest("south_west"), + Spa("spa"), + SpaceBar("space_bar"), + SpaceDashboard("space_dashboard"), + Speaker("speaker"), + SpeakerGroup("speaker_group"), + SpeakerNotes("speaker_notes"), + SpeakerNotesOff("speaker_notes_off"), + SpeakerPhone("speaker_phone"), + Speed("speed"), + Spellcheck("spellcheck"), + Splitscreen("splitscreen"), + Sports("sports"), + SportsBar("sports_bar"), + SportsBaseball("sports_baseball"), + SportsBasketball("sports_basketball"), + SportsCricket("sports_cricket"), + SportsEsports("sports_esports"), + SportsFootball("sports_football"), + SportsGolf("sports_golf"), + SportsHandball("sports_handball"), + SportsHockey("sports_hockey"), + SportsKabaddi("sports_kabaddi"), + SportsMma("sports_mma"), + SportsMotorsports("sports_motorsports"), + SportsRugby("sports_rugby"), + SportsScore("sports_score"), + SportsSoccer("sports_soccer"), + SportsTennis("sports_tennis"), + SportsVolleyball("sports_volleyball"), + SquareFoot("square_foot"), + StackedBarChart("stacked_bar_chart"), + StackedLineChart("stacked_line_chart"), + Stairs("stairs"), + Star("star"), + StarBorder("star_border"), + StarBorderPurple500("star_border_purple500"), + StarHalf("star_half"), + StarOutline("star_outline"), + StarPurple500("star_purple500"), + StarRate("star_rate"), + Stars("stars"), + StayCurrentLandscape("stay_current_landscape"), + StayCurrentPortrait("stay_current_portrait"), + StayPrimaryLandscape("stay_primary_landscape"), + StayPrimaryPortrait("stay_primary_portrait"), + StickyNote2("sticky_note_2"), + Stop("stop"), + StopCircle("stop_circle"), + StopScreenShare("stop_screen_share"), + Storage("storage"), + Store("store"), + StoreMallDirectory("store_mall_directory"), + Storefront("storefront"), + Storm("storm"), + Straighten("straighten"), + Stream("stream"), + Streetview("streetview"), + StrikethroughS("strikethrough_s"), + Stroller("stroller"), + Style("style"), + SubdirectoryArrowLeft("subdirectory_arrow_left"), + SubdirectoryArrowRight("subdirectory_arrow_right"), + Subject("subject"), + Subscript("subscript"), + Subscriptions("subscriptions"), + Subtitles("subtitles"), + SubtitlesOff("subtitles_off"), + Subway("subway"), + Summarize("summarize"), + Superscript("superscript"), + SupervisedUserCircle("supervised_user_circle"), + SupervisorAccount("supervisor_account"), + Support("support"), + SupportAgent("support_agent"), + Surfing("surfing"), + SurroundSound("surround_sound"), + SwapCalls("swap_calls"), + SwapHoriz("swap_horiz"), + SwapHorizontalCircle("swap_horizontal_circle"), + SwapVert("swap_vert"), + SwapVerticalCircle("swap_vertical_circle"), + Swipe("swipe"), + SwitchAccount("switch_account"), + SwitchCamera("switch_camera"), + SwitchLeft("switch_left"), + SwitchRight("switch_right"), + SwitchVideo("switch_video"), + Sync("sync"), + SyncAlt("sync_alt"), + SyncDisabled("sync_disabled"), + SyncProblem("sync_problem"), + SystemSecurityUpdate("system_security_update"), + SystemSecurityUpdateGood("system_security_update_good"), + SystemSecurityUpdateWarning("system_security_update_warning"), + SystemUpdate("system_update"), + SystemUpdateAlt("system_update_alt"), + Tab("tab"), + TabUnselected("tab_unselected"), + TableChart("table_chart"), + TableRows("table_rows"), + TableView("table_view"), + Tablet("tablet"), + TabletAndroid("tablet_android"), + TabletMac("tablet_mac"), + Tag("tag"), + TagFaces("tag_faces"), + TakeoutDining("takeout_dining"), + TapAndPlay("tap_and_play"), + Tapas("tapas"), + Task("task"), + TaskAlt("task_alt"), + TaxiAlert("taxi_alert"), + Terrain("terrain"), + TextFields("text_fields"), + TextFormat("text_format"), + TextRotateUp("text_rotate_up"), + TextRotateVertical("text_rotate_vertical"), + TextRotationAngledown("text_rotation_angledown"), + TextRotationAngleup("text_rotation_angleup"), + TextRotationDown("text_rotation_down"), + TextRotationNone("text_rotation_none"), + TextSnippet("text_snippet"), + Textsms("textsms"), + Texture("texture"), + TheaterComedy("theater_comedy"), + Theaters("theaters"), + Thermostat("thermostat"), + ThermostatAuto("thermostat_auto"), + ThumbDown("thumb_down"), + ThumbDownAlt("thumb_down_alt"), + ThumbDownOffAlt("thumb_down_off_alt"), + ThumbUp("thumb_up"), + ThumbUpAlt("thumb_up_alt"), + ThumbUpOffAlt("thumb_up_off_alt"), + ThumbsUpDown("thumbs_up_down"), + TimeToLeave("time_to_leave"), + Timelapse("timelapse"), + Timeline("timeline"), + Timer("timer"), + Timer10("timer_10"), + Timer10Select("timer_10_select"), + Timer3("timer_3"), + Timer3Select("timer_3_select"), + TimerOff("timer_off"), + TipsAndUpdates("tips_and_updates"), + Title("title"), + Toc("toc"), + Today("today"), + ToggleOff("toggle_off"), + ToggleOn("toggle_on"), + Toll("toll"), + Tonality("tonality"), + Topic("topic"), + TouchApp("touch_app"), + Tour("tour"), + Toys("toys"), + TrackChanges("track_changes"), + Traffic("traffic"), + Train("train"), + Tram("tram"), + TransferWithinAStation("transfer_within_a_station"), + Transform("transform"), + Transgender("transgender"), + TransitEnterexit("transit_enterexit"), + Translate("translate"), + TravelExplore("travel_explore"), + TrendingDown("trending_down"), + TrendingFlat("trending_flat"), + TrendingUp("trending_up"), + TripOrigin("trip_origin"), + Try("try"), + Tty("tty"), + Tune("tune"), + Tungsten("tungsten"), + TurnedIn("turned_in"), + TurnedInNot("turned_in_not"), + Tv("tv"), + TvOff("tv_off"), + TwoWheeler("two_wheeler"), + Umbrella("umbrella"), + Unarchive("unarchive"), + Undo("undo"), + UnfoldLess("unfold_less"), + UnfoldMore("unfold_more"), + Unpublished("unpublished"), + Unsubscribe("unsubscribe"), + Upcoming("upcoming"), + Update("update"), + UpdateDisabled("update_disabled"), + Upgrade("upgrade"), + Upload("upload"), + UploadFile("upload_file"), + Usb("usb"), + UsbOff("usb_off"), + Verified("verified"), + VerifiedUser("verified_user"), + VerticalAlignBottom("vertical_align_bottom"), + VerticalAlignCenter("vertical_align_center"), + VerticalAlignTop("vertical_align_top"), + VerticalDistribute("vertical_distribute"), + VerticalSplit("vertical_split"), + Vibration("vibration"), + VideoCall("video_call"), + VideoCameraBack("video_camera_back"), + VideoCameraFront("video_camera_front"), + VideoLabel("video_label"), + VideoLibrary("video_library"), + VideoSettings("video_settings"), + VideoStable("video_stable"), + Videocam("videocam"), + VideocamOff("videocam_off"), + VideogameAsset("videogame_asset"), + VideogameAssetOff("videogame_asset_off"), + ViewAgenda("view_agenda"), + ViewArray("view_array"), + ViewCarousel("view_carousel"), + ViewColumn("view_column"), + ViewComfy("view_comfy"), + ViewCompact("view_compact"), + ViewDay("view_day"), + ViewHeadline("view_headline"), + ViewInAr("view_in_ar"), + ViewList("view_list"), + ViewModule("view_module"), + ViewQuilt("view_quilt"), + ViewSidebar("view_sidebar"), + ViewStream("view_stream"), + ViewWeek("view_week"), + Vignette("vignette"), + Villa("villa"), + Visibility("visibility"), + VisibilityOff("visibility_off"), + VoiceChat("voice_chat"), + VoiceOverOff("voice_over_off"), + Voicemail("voicemail"), + VolumeDown("volume_down"), + VolumeMute("volume_mute"), + VolumeOff("volume_off"), + VolumeUp("volume_up"), + VolunteerActivism("volunteer_activism"), + VpnKey("vpn_key"), + VpnLock("vpn_lock"), + Vrpano("vrpano"), + Wallpaper("wallpaper"), + Warning("warning"), + WarningAmber("warning_amber"), + Wash("wash"), + Watch("watch"), + WatchLater("watch_later"), + Water("water"), + WaterDamage("water_damage"), + WaterDrop("water_drop"), + WaterfallChart("waterfall_chart"), + Waves("waves"), + WavingHand("waving_hand"), + WbAuto("wb_auto"), + WbCloudy("wb_cloudy"), + WbIncandescent("wb_incandescent"), + WbIridescent("wb_iridescent"), + WbShade("wb_shade"), + WbSunny("wb_sunny"), + WbTwilight("wb_twilight"), + Wc("wc"), + Web("web"), + WebAsset("web_asset"), + WebAssetOff("web_asset_off"), + Weekend("weekend"), + West("west"), + Whatshot("whatshot"), + WheelchairPickup("wheelchair_pickup"), + WhereToVote("where_to_vote"), + Widgets("widgets"), + Wifi("wifi"), + WifiCalling("wifi_calling"), + WifiCalling3("wifi_calling_3"), + WifiLock("wifi_lock"), + WifiOff("wifi_off"), + WifiProtectedSetup("wifi_protected_setup"), + WifiTethering("wifi_tethering"), + WifiTetheringErrorRounded("wifi_tethering_error_rounded"), + WifiTetheringOff("wifi_tethering_off"), + Window("window"), + WineBar("wine_bar"), + Work("work"), + WorkOff("work_off"), + WorkOutline("work_outline"), + WorkspacePremium("workspace_premium"), + Workspaces("workspaces"), + WrapText("wrap_text"), + WrongLocation("wrong_location"), + Wysiwyg("wysiwyg"), + Yard("yard"), + YoutubeSearchedFor("youtube_searched_for"), + ZoomIn("zoom_in"), + ZoomOut("zoom_out"), + ZoomOutMap("zoom_out_map") +} diff --git a/sandbox/src/jsMain/kotlin/config.kt b/sandbox/src/jsMain/kotlin/config.kt index 66228049..17273dd2 100644 --- a/sandbox/src/jsMain/kotlin/config.kt +++ b/sandbox/src/jsMain/kotlin/config.kt @@ -18,11 +18,14 @@ import org.jetbrains.compose.web.css.marginBottom import org.jetbrains.compose.web.dom.A import sandbox.util.requireModule +private external val process: dynamic + @KatalogConfig fun Katalog.Builder.config() { requireModule("./sandbox.scss") document.body?.addClass("mdc-typography") + debug = process.env.NODE_ENV == "development" title = "KMDC Katalog" subtitle = "Play around with various KMDC components" contentRootUrl = "https://github.com/mpetuska/kmdc/blob/master" diff --git a/sandbox/src/jsMain/showcases/MDCBanner.kt b/sandbox/src/jsMain/showcases/MDCBanner.kt index 7433da7e..3753d36a 100644 --- a/sandbox/src/jsMain/showcases/MDCBanner.kt +++ b/sandbox/src/jsMain/showcases/MDCBanner.kt @@ -1,10 +1,15 @@ package showcases -import androidx.compose.runtime.* -import dev.petuska.katalog.runtime.* -import dev.petuska.katalog.runtime.layout.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase import dev.petuska.kmdc.banner.* -import sandbox.control.* +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon +import sandbox.control.BooleanControl import org.jetbrains.compose.web.dom.Text as ComposeText private class MDCBannerVM { @@ -30,7 +35,7 @@ fun MDCBanner() = InteractiveShowcase( }) { Content { Graphic { - Icon(attrs = { classes("material-icons") }) { ComposeText("error_outline") } + Icon(attrs = { mdcIcon() }) { ComposeText(MDCIcon.ErrorOutline.type) } } Text("There was a problem processing a transaction on your credit card.") } diff --git a/sandbox/src/jsMain/showcases/MDCButton.kt b/sandbox/src/jsMain/showcases/MDCButton.kt index 2d4c2ee8..0886cdb7 100644 --- a/sandbox/src/jsMain/showcases/MDCButton.kt +++ b/sandbox/src/jsMain/showcases/MDCButton.kt @@ -1,12 +1,19 @@ package showcases -import androidx.compose.runtime.* -import dev.petuska.katalog.runtime.* -import dev.petuska.katalog.runtime.layout.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase import dev.petuska.kmdc.button.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import sandbox.control.* +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon +import org.jetbrains.compose.web.attributes.disabled +import org.jetbrains.compose.web.dom.Text +import sandbox.control.BooleanControl +import sandbox.control.ChoiceControl +import sandbox.control.TextControl private class MDCButtonVM { var type by mutableStateOf(MDCButtonType.Text) @@ -32,7 +39,7 @@ fun MDCButton() = InteractiveShowcase( if (disabled) disabled() }) { val renderIcon = @Composable { - Icon(attrs = { classes("material-icons") }) { Text("star") } + Icon(attrs = { mdcIcon() }) { Text(MDCIcon.Star.type) } } if (icon == MDCButtonIconType.Leading) renderIcon() Label(label) diff --git a/sandbox/src/jsMain/showcases/MDCCard.kt b/sandbox/src/jsMain/showcases/MDCCard.kt index b1437d1c..0f7e4cff 100644 --- a/sandbox/src/jsMain/showcases/MDCCard.kt +++ b/sandbox/src/jsMain/showcases/MDCCard.kt @@ -14,7 +14,8 @@ import dev.petuska.kmdc.card.* import dev.petuska.kmdc.typography.MDCBody1 import dev.petuska.kmdc.typography.MDCH4 import dev.petuska.kmdc.typography.MDCSubtitle1 -import dev.petuska.kmdcx.icons.MDCIconOpts +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon import org.jetbrains.compose.web.css.backgroundImage import org.jetbrains.compose.web.dom.Text import sandbox.control.BooleanControl @@ -70,13 +71,13 @@ fun MDCCard() = InteractiveShowcase( } ActionIcons { ActionIconButton(attrs = { - classes("material-icons") + mdcIcon() title("Share") - }) { Text(MDCIconOpts.MDCIconType.Share.iconType) } + }) { Text(MDCIcon.Share.type) } ActionIconButton(attrs = { - classes("material-icons") + mdcIcon() title("More options") - }) { Text(MDCIconOpts.MDCIconType.MoreVert.iconType) } + }) { Text(MDCIcon.MoreVert.type) } } } } diff --git a/sandbox/src/jsMain/showcases/MDCChips.kt b/sandbox/src/jsMain/showcases/MDCChips.kt index a269fd95..846dc528 100644 --- a/sandbox/src/jsMain/showcases/MDCChips.kt +++ b/sandbox/src/jsMain/showcases/MDCChips.kt @@ -1,21 +1,33 @@ package showcases import androidx.compose.runtime.* -import dev.petuska.katalog.runtime.* -import dev.petuska.katalog.runtime.layout.* -import dev.petuska.kmdc.chips.* -import dev.petuska.kmdc.chips.action.* +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.chips.MDCChipsAttrsScope +import dev.petuska.kmdc.chips.action.Checkmark +import dev.petuska.kmdc.chips.action.Graphic +import dev.petuska.kmdc.chips.action.Icon +import dev.petuska.kmdc.chips.action.Label import dev.petuska.kmdc.chips.grid.* -import dev.petuska.kmdc.chips.listbox.* -import org.jetbrains.compose.web.dom.* -import sandbox.control.* -import sandbox.util.* +import dev.petuska.kmdc.chips.listbox.FilterChip +import dev.petuska.kmdc.chips.listbox.MDCChipsListbox +import dev.petuska.kmdc.chips.onInteraction +import dev.petuska.kmdc.chips.onRemoval +import dev.petuska.kmdc.chips.onSelection +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon +import org.jetbrains.compose.web.dom.Text +import sandbox.control.BooleanControl +import sandbox.util.NamedBlock private class MDCChipsVM { var disabled by mutableStateOf(false) var multiselectable by mutableStateOf(false) var overflow by mutableStateOf(false) var touch by mutableStateOf(false) + + var removed1 by mutableStateOf(false) + var removed2 by mutableStateOf(false) } @Composable @@ -32,41 +44,49 @@ fun MDCChips() = InteractiveShowcase( NamedBlock("Grid") { MDCChipsGrid(overflow = overflow, attrs = { registerEvents() + onRemoval { + if (it.detail.chipID == "1") removed1 = true + if (it.detail.chipID == "2") removed2 = true + } }) { ActionChip( - "1", disabled = disabled, withPrimaryIcon = true, touch = touch, + "0", disabled = disabled, withPrimaryIcon = true, touch = touch, ) { Graphic { - Icon(attrs = { classes("material-icons") }) { Text("favorite") } + Icon(attrs = { mdcIcon() }) { Text(MDCIcon.Favorite.type) } Checkmark() } Label("ActionChip") } - InputChip( - "2", withPrimaryIcon = true, withTrailingAction = true, disabled = disabled, touch = touch, - ) { - PrimaryAction { - Graphic { - Icon(attrs = { classes("material-icons") }) { Text("favorite") } - Checkmark() + if (!removed1) { + InputChip( + "1", withPrimaryIcon = true, withTrailingAction = true, disabled = disabled, touch = touch, + ) { + PrimaryAction { + Graphic { + Icon(attrs = { mdcIcon() }) { Text(MDCIcon.Favorite.type) } + Checkmark() + } + Label("InputChip with leading icon and trailing action") + } + TrailingAction { + Icon(attrs = { mdcIcon() }) { Text(MDCIcon.Close.type) } } - Label("InputChip with leading icon and trailing action") - } - TrailingAction { - Icon(attrs = { classes("material-icons") }) { Text("close") } } } - InputChip( - "3", disabled = disabled, withTrailingAction = true, navigableTrailingAction = false, touch = touch, - ) { - PrimaryAction { - Label("InputChip with non-navigable trailing action") - } - TrailingAction { - Icon(attrs = { classes("material-icons") }) { Text("close") } + if (!removed2) { + InputChip( + "2", disabled = disabled, withTrailingAction = true, navigableTrailingAction = false, touch = touch, + ) { + PrimaryAction { + Label("InputChip with non-navigable trailing action") + } + TrailingAction { + Icon(attrs = { mdcIcon() }) { Text(MDCIcon.Close.type) } + } } } - InputChip("4", disabled = disabled, touch = touch) { + InputChip("3", disabled = disabled, touch = touch) { PrimaryAction { Label("InputChip without trailing action") } @@ -74,7 +94,7 @@ fun MDCChips() = InteractiveShowcase( } } NamedBlock("Listbox") { - val selected = remember { mutableStateListOf("1") } + val selected = remember { mutableStateListOf("1") } MDCChipsListbox(overflow = overflow, multiselectable = multiselectable, attrs = { registerEvents() onSelection { @@ -95,7 +115,7 @@ fun MDCChips() = InteractiveShowcase( touch = touch, ) { Graphic { - Icon(attrs = { classes("material-icons") }) { Text("favorite") } + Icon(attrs = { mdcIcon() }) { Text(MDCIcon.Favorite.type) } Checkmark() } Label("FilterChip - $id") diff --git a/sandbox/src/jsMain/showcases/MDCDataTable.kt b/sandbox/src/jsMain/showcases/MDCDataTable.kt index 9703288d..4db2bae5 100644 --- a/sandbox/src/jsMain/showcases/MDCDataTable.kt +++ b/sandbox/src/jsMain/showcases/MDCDataTable.kt @@ -7,6 +7,8 @@ import dev.petuska.kmdc.core.KMDCInternalAPI import dev.petuska.kmdc.core.MDCExternalAPI import dev.petuska.kmdc.core.rememberUniqueDomElementId import dev.petuska.kmdc.data.table.* +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon import org.jetbrains.compose.web.dom.Text import sandbox.control.BooleanControl import sandbox.util.NamedBlock @@ -44,31 +46,31 @@ fun MDCDataTable() = InteractiveShowcase( registerEvents() } ) { - MDCDataTableContainer { + Container { MDCDataTableHeader { - MDCDataTableCell(text = "Dessert") - MDCDataTableCell(text = "Carbs (g)", numeric = true) - MDCDataTableCell(text = "Protein (g)", numeric = true) - MDCDataTableCell(text = "Comments") + Cell(text = "Dessert") + Cell(text = "Carbs (g)", numeric = true) + Cell(text = "Protein (g)", numeric = true) + Cell(text = "Comments") } - MDCDataTableBody { - MDCDataTableRow { - MDCDataTableHeaderCell(text = "Frozen yogurt") - MDCDataTableCell(text = "24", numeric = true) - MDCDataTableCell(text = "4.0", numeric = true) - MDCDataTableCell(text = "Super tasty") + Body { + Row { + HeaderCell(text = "Frozen yogurt") + Cell(text = "24", numeric = true) + Cell(text = "4.0", numeric = true) + Cell(text = "Super tasty") } - MDCDataTableRow { - MDCDataTableHeaderCell(text = "Ice cream sandwich") - MDCDataTableCell(text = "37", numeric = true) - MDCDataTableCell(text = "4.33333333333", numeric = true) - MDCDataTableCell(text = "I like ice cream more") + Row { + HeaderCell(text = "Ice cream sandwich") + Cell(text = "37", numeric = true) + Cell(text = "4.33333333333", numeric = true) + Cell(text = "I like ice cream more") } - MDCDataTableRow { - MDCDataTableHeaderCell(text = "Eclair") - MDCDataTableCell(text = "24", numeric = true) - MDCDataTableCell(text = "6.0", numeric = true) - MDCDataTableCell(text = "New filing flavor") + Row { + HeaderCell(text = "Eclair") + Cell(text = "24", numeric = true) + Cell(text = "6.0", numeric = true) + Cell(text = "New filing flavor") } } } @@ -111,31 +113,31 @@ fun MDCDataTable() = InteractiveShowcase( } } ) { - MDCDataTableContainer { + Container { @OptIn(KMDCInternalAPI::class) val id = rememberUniqueDomElementId() MDCDataTableHeader { MDCDataTableCheckCell(selected = items.all(MDCDataTableVM.Item::selected), label = "Toggle All") MDCDataTableSortCell(columnId = "$id-0", label = "Dessert", buttonAttrs = { - classes("material-icons") - }) { Text("arrow_upward") } + mdcIcon() + }) { Text(MDCIcon.ArrowUpward.type) } MDCDataTableSortCell(columnId = "$id-1", label = "Carbs (g)", numeric = true, buttonAttrs = { - classes("material-icons") - }) { Text("arrow_upward") } + mdcIcon() + }) { Text(MDCIcon.ArrowUpward.type) } MDCDataTableSortCell(columnId = "$id-2", label = "Protein (g)", numeric = true, buttonAttrs = { - classes("material-icons") - }) { Text("arrow_upward") } + mdcIcon() + }) { Text(MDCIcon.ArrowUpward.type) } MDCDataTableSortCell(columnId = "$id-3", label = "Comments", buttonAttrs = { - classes("material-icons") - }) { Text("arrow_upward") } + mdcIcon() + }) { Text(MDCIcon.ArrowUpward.type) } } - MDCDataTableBody { + Body { items.forEach { - MDCDataTableRow(selected = it.selected) { - MDCDataTableHeaderCell(text = it.dessert, selected = it.selected) - MDCDataTableCell(text = it.carbs, numeric = true) - MDCDataTableCell(text = it.proteins, numeric = true) - MDCDataTableCell(text = it.comments) + Row(selected = it.selected) { + HeaderCell(text = it.dessert, selected = it.selected) + Cell(text = it.carbs, numeric = true) + Cell(text = it.proteins, numeric = true) + Cell(text = it.comments) } } } diff --git a/sandbox/src/jsMain/showcases/MDCDialog.kt b/sandbox/src/jsMain/showcases/MDCDialog.kt index 50cdaba9..4a98166e 100644 --- a/sandbox/src/jsMain/showcases/MDCDialog.kt +++ b/sandbox/src/jsMain/showcases/MDCDialog.kt @@ -11,9 +11,11 @@ import dev.petuska.kmdc.dialog.* import dev.petuska.kmdc.list.MDCList import dev.petuska.kmdc.list.MDCListSelection import dev.petuska.kmdc.list.MDCListType +import dev.petuska.kmdc.list.item.Label import dev.petuska.kmdc.list.item.ListItem import dev.petuska.kmdc.list.item.RadioGraphic -import dev.petuska.kmdcx.icons.MDCIconOpts +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon import org.jetbrains.compose.web.dom.Text import sandbox.control.BooleanControl import sandbox.control.TextControl @@ -65,7 +67,7 @@ fun MDCDialog() = InteractiveShowcase( ) { Header { Title("Dialog Title") - if (fullscreen) CloseButton(MDCIconOpts.MDCIconType.Close.iconType, attrs = { classes("material-icons") }) + if (fullscreen) CloseButton(MDCIcon.Close.type, attrs = { mdcIcon() }) } Content { Text(LoremIpsum) @@ -109,7 +111,9 @@ fun MDCDialog() = InteractiveShowcase( } } ) { - RadioGraphic(checked = selected == item, label = item) + val id = "mdc-dialog-item-$index" + RadioGraphic(checked = selected == item, id = id) + Label(text = item, forId = id) } } } diff --git a/sandbox/src/jsMain/showcases/MDCDrawer.kt b/sandbox/src/jsMain/showcases/MDCDrawer.kt new file mode 100644 index 00000000..49ec5d6b --- /dev/null +++ b/sandbox/src/jsMain/showcases/MDCDrawer.kt @@ -0,0 +1,77 @@ +package showcases + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.drawer.* +import dev.petuska.kmdc.list.MDCNavList +import dev.petuska.kmdc.list.item.Graphic +import dev.petuska.kmdc.list.item.ListItem +import dev.petuska.kmdc.list.item.Text +import dev.petuska.kmdc.typography.MDCBody1 +import dev.petuska.kmdcx.icons.mdcIcon +import sandbox.control.BooleanControl +import sandbox.control.ChoiceControl +import org.jetbrains.compose.web.dom.Text as ComposeText + +private class MDCDrawerVM { + var type by mutableStateOf(MDCDrawerType.Dismissible) + var open by mutableStateOf(false) +} + +@Composable +@Showcase(id = "MDCDrawer") +fun MDCDrawer() = InteractiveShowcase( + viewModel = { MDCDrawerVM() }, + controls = { + ChoiceControl("Type", MDCDrawerType.values().associateBy(MDCDrawerType::name), ::type) + BooleanControl("Open", ::open) + }, +) { + MDCDrawer( + open = open, + type = type, + attrs = { + registerEvents() + onOpened { open = true } + onClosed { open = false } + style { + property("height", "fit-content") + } + } + ) { + Header { + Title("Title") + Subtitle("Subtitle") + } + Content { + MDCNavList( + wrapFocus = true, + ) { + ListItem(selected = true) { + Graphic(attrs = { mdcIcon() }) { ComposeText(dev.petuska.kmdcx.icons.MDCIcon.Inbox.type) } + Text("Inbox") + } + ListItem { + Graphic(attrs = { mdcIcon() }) { ComposeText(dev.petuska.kmdcx.icons.MDCIcon.Send.type) } + Text("Outgoing") + } + ListItem { + Graphic(attrs = { mdcIcon() }) { ComposeText(dev.petuska.kmdcx.icons.MDCIcon.Drafts.type) } + Text("Drafts") + } + } + } + } + MDCDrawerAppContent { + MDCBody1("App Content") + } +} + +private fun MDCDrawerAttrsScope.registerEvents() { + onOpened { console.log("MDCDrawer#onOpened", it.detail) } + onClosed { console.log("MDCDrawer#onClosed", it.detail) } +} diff --git a/sandbox/src/jsMain/showcases/MDCFab.kt b/sandbox/src/jsMain/showcases/MDCFab.kt index 3b13f568..2283b9e5 100644 --- a/sandbox/src/jsMain/showcases/MDCFab.kt +++ b/sandbox/src/jsMain/showcases/MDCFab.kt @@ -1,12 +1,21 @@ package showcases -import androidx.compose.runtime.* -import dev.petuska.katalog.runtime.* -import dev.petuska.katalog.runtime.layout.* -import dev.petuska.kmdc.fab.* -import dev.petuska.kmdc.touch.target.* -import org.jetbrains.compose.web.dom.* -import sandbox.control.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.fab.Icon +import dev.petuska.kmdc.fab.Label +import dev.petuska.kmdc.fab.MDCFab +import dev.petuska.kmdc.fab.MDCFabType +import dev.petuska.kmdc.touch.target.MDCTouchTarget +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon +import org.jetbrains.compose.web.dom.Text +import sandbox.control.BooleanControl +import sandbox.control.ChoiceControl private class MDCFabVM { var exited by mutableStateOf(false) @@ -29,7 +38,7 @@ fun MDCFab() = InteractiveShowcase( attr("aria-label", "Favorite") }) { if (type == MDCFabType.Extended) Label("Favorite") - Icon(attrs = { classes("material-icons") }) { Text("favorite") } + Icon(attrs = { mdcIcon() }) { Text(MDCIcon.Favorite.type) } } } if (touch) { diff --git a/sandbox/src/jsMain/showcases/MDCFormField.kt b/sandbox/src/jsMain/showcases/MDCFormField.kt new file mode 100644 index 00000000..13221095 --- /dev/null +++ b/sandbox/src/jsMain/showcases/MDCFormField.kt @@ -0,0 +1,52 @@ +package showcases + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.checkbox.MDCCheckbox +import dev.petuska.kmdc.form.field.MDCFormField +import dev.petuska.kmdc.form.field.MDCFormFieldAlign +import dev.petuska.kmdc.radio.MDCRadio +import sandbox.control.BooleanControl +import sandbox.control.ChoiceControl + +private class MDCFormFieldVM { + var align by mutableStateOf(MDCFormFieldAlign.Start) + var noWrap by mutableStateOf(false) + + var checked by mutableStateOf(false) +} + +@Composable +@Showcase(id = "MDCFormField") +fun MDCFormField() = InteractiveShowcase( + viewModel = { MDCFormFieldVM() }, + controls = { + ChoiceControl("Align", MDCFormFieldAlign.values().associateBy(MDCFormFieldAlign::name), ::align) + BooleanControl("No Wrap", ::noWrap) + }, +) { + MDCFormField( + align = align, + noWrap = noWrap, + ) { + MDCCheckbox( + checked = checked, + label = "Sample Checkbox", + attrs = { onInput { checked = !checked } }, + ) + } + MDCFormField( + align = align, + noWrap = noWrap, + ) { + MDCRadio( + checked = checked, + label = "Sample Radio", + attrs = { onInput { checked = !checked } }, + ) + } +} diff --git a/sandbox/src/jsMain/showcases/MDCIcon.kt b/sandbox/src/jsMain/showcases/MDCIcon.kt new file mode 100644 index 00000000..21b66b98 --- /dev/null +++ b/sandbox/src/jsMain/showcases/MDCIcon.kt @@ -0,0 +1,65 @@ +package showcases + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.typography.MDCCaption +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.MDCIconBase +import dev.petuska.kmdcx.icons.MDCIconType +import org.jetbrains.compose.web.css.* +import org.jetbrains.compose.web.dom.Div +import sandbox.control.ChoiceControl +import sandbox.control.RangeControl + +private class MDCIconVM { + var base by mutableStateOf(MDCIconBase.I) + var type by mutableStateOf(MDCIconType.Filled) + var size by mutableStateOf(24) +} + +@Composable +@Showcase(id = "MDCIcon") +fun MDCIcon() = InteractiveShowcase( + viewModel = { MDCIconVM() }, + controls = { + ChoiceControl("Base", MDCIconBase.values().associateBy(MDCIconBase::name), ::base) + ChoiceControl("Type", MDCIconType.values().associateBy(MDCIconType::name), ::type) + RangeControl("Size", size, min = 12, max = 240, step = 12) { size = it.toInt() } + }, +) { + Div(attrs = { + style { + display(DisplayStyle.Flex) + flexFlow(FlexDirection.Row, FlexWrap.Wrap) + } + }) { + MDCIcon.values().forEach { icon -> + Div(attrs = { + style { + padding(0.5.em) + display(DisplayStyle.Flex) + flexDirection(FlexDirection.Column) + alignItems(AlignItems.Center) + justifyContent(JustifyContent.Center) + } + }) { + MDCIcon( + base = base, + type = type, + icon = icon, + attrs = { + style { + fontSize(size.px) + } + } + ) + MDCCaption(icon.name) + MDCCaption("(${icon.type})") + } + } + } +} diff --git a/sandbox/src/jsMain/showcases/MDCIconButton.kt b/sandbox/src/jsMain/showcases/MDCIconButton.kt new file mode 100644 index 00000000..9c385847 --- /dev/null +++ b/sandbox/src/jsMain/showcases/MDCIconButton.kt @@ -0,0 +1,72 @@ +package showcases + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.icon.button.Icon +import dev.petuska.kmdc.icon.button.MDCIconButton +import dev.petuska.kmdc.icon.button.MDCIconButtonAttrsScope +import dev.petuska.kmdc.icon.button.onChange +import dev.petuska.kmdc.touch.target.MDCTouchTarget +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon +import org.jetbrains.compose.web.attributes.disabled +import org.jetbrains.compose.web.dom.Text +import sandbox.control.BooleanControl +import sandbox.control.ChoiceControl + +private class MDCIconButtonVM { + var disabled by mutableStateOf(false) + var on by mutableStateOf(true) + var touch by mutableStateOf(false) +} + +@Composable +@Showcase(id = "MDCIconButton") +fun MDCIconButton() = InteractiveShowcase( + viewModel = { MDCIconButtonVM() }, + controls = { + ChoiceControl( + title = "On", + options = mapOf( + "true" to true, + "false" to false, + "null" to null, + ), + selected = ::on + ) + BooleanControl("Disabled", ::disabled) + BooleanControl("Touch", ::touch) + }, +) { + MDCTouchTarget { + MDCIconButton( + on = on, + touch = touch, + attrs = { + if (disabled) disabled() + if (on == null) mdcIcon() + registerEvents() + onChange { on = it.detail.isOn } + } + ) { + if (on != null) { + Icon(on = true, attrs = { mdcIcon() }) { + Text(MDCIcon.Favorite.type) + } + Icon(on = false, attrs = { mdcIcon() }) { + Text(MDCIcon.FavoriteBorder.type) + } + } else { + Text(MDCIcon.Favorite.type) + } + } + } +} + +private fun MDCIconButtonAttrsScope<*>.registerEvents() { + onChange { console.log("MDCIconButton#onChange", it.detail) } +} diff --git a/sandbox/src/jsMain/showcases/MDCLinearProgress.kt b/sandbox/src/jsMain/showcases/MDCLinearProgress.kt new file mode 100644 index 00000000..59aa89fb --- /dev/null +++ b/sandbox/src/jsMain/showcases/MDCLinearProgress.kt @@ -0,0 +1,54 @@ +package showcases + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.linear.progress.MDCLinearProgress +import sandbox.control.BooleanControl +import sandbox.control.RangeControl +import sandbox.control.TextControl + +private class MDCLinearProgressVM { + var progress by mutableStateOf(0.5) + var buffer by mutableStateOf(0.5) + var determinate by mutableStateOf(false) + var closed by mutableStateOf(false) + var label by mutableStateOf("My Label") +} + +@Composable +@Showcase(id = "MDCLinearProgress") +fun MDCLinearProgress() = InteractiveShowcase( + viewModel = { MDCLinearProgressVM() }, + controls = { + BooleanControl("Determinate", ::determinate) + BooleanControl("Closed", ::closed) + TextControl("Label", ::label) + RangeControl( + name = "Progress", + value = ::progress, + max = 1, + step = 0.05, + converter = Number::toDouble + ) + RangeControl( + name = "Buffer", + value = ::buffer, + min = progress, + max = 1, + step = 0.05, + converter = Number::toDouble + ) + }, +) { + MDCLinearProgress( + progress = progress, + buffer = buffer, + determinate = determinate, + closed = closed, + label = label.takeIf(String::isNotBlank), + ) +} diff --git a/sandbox/src/jsMain/showcases/MDCList.kt b/sandbox/src/jsMain/showcases/MDCList.kt new file mode 100644 index 00000000..7d5a2441 --- /dev/null +++ b/sandbox/src/jsMain/showcases/MDCList.kt @@ -0,0 +1,91 @@ +package showcases + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.list.* +import dev.petuska.kmdc.list.item.* +import sandbox.control.BooleanControl +import sandbox.control.ChoiceControl +import sandbox.util.NamedGroup + +private class MDCListVM { + var type by mutableStateOf(MDCListType.Default) + var size by mutableStateOf(MDCListSize.SingleLine) + var selection by mutableStateOf(MDCListSelection.Single) + var dense by mutableStateOf(false) + var wrapFocus by mutableStateOf(false) + + var divider by mutableStateOf(false) + var inset by mutableStateOf(MDCListDividerInset.None) + + val items = listOf("Java", "Kotlin", "Scala", "Groovy", "JavaScript", "TypeScript") +} + +@Composable +@Showcase(id = "MDCList") +fun MDCList() = InteractiveShowcase( + viewModel = { MDCListVM() }, + controls = { + ChoiceControl("Type", MDCListType.values().associateBy(MDCListType::name), ::type) + ChoiceControl("Size", MDCListSize.values().associateBy(MDCListSize::name), ::size) + ChoiceControl("Selection", MDCListSelection.values().associateBy(MDCListSelection::name), ::selection) + BooleanControl("Dense", ::dense) + BooleanControl("Wrap Focus", ::wrapFocus) + NamedGroup("Divider") { + BooleanControl("Enabled", ::divider) + ChoiceControl("Inset", MDCListDividerInset.values().associateBy(MDCListDividerInset::name), ::inset) + } + }, +) { + MDCList( + type = type, + size = size, + selection = selection, + attrs = { + registerEvents() + } + ) { + items.chunked(2).forEachIndexed { i, group -> + MDCListGroup { + Subheader("Group $i") + MDCList( + type = type, + size = size, + selection = selection, + dense = dense, + wrapFocus = wrapFocus, + ) { + group.forEachIndexed { j, item -> + ListItem { + val id = "kmdc-list-item-${i * 2 + j}" + when (selection) { + MDCListSelection.SingleRadio -> RadioGraphic(false, id) + MDCListSelection.MultiCheckbox -> CheckboxGraphic(false, id) + else -> {} + } + if (size == MDCListSize.TwoLine) { + Label(forId = id) { + Primary(item) + Secondary("$item description") + } + } else { + Label(text = item, forId = id) + } + } + if (divider && j == 0) Divider(inset = inset) + } + } + if (divider && i % 2 == 0) Divider(inset = inset) + } + } + } +} + +private fun MDCListAttrsScope<*>.registerEvents() { + onAction { console.log("MDCList#onAction", it.detail) } + onSelectionChanged { console.log("MDCList#onSelectionChanged", it.detail) } +} diff --git a/sandbox/src/jsMain/showcases/MDCMenu.kt b/sandbox/src/jsMain/showcases/MDCMenu.kt index 608e92e0..0029bd89 100644 --- a/sandbox/src/jsMain/showcases/MDCMenu.kt +++ b/sandbox/src/jsMain/showcases/MDCMenu.kt @@ -7,13 +7,15 @@ import dev.petuska.kmdc.core.KMDCInternalAPI import dev.petuska.kmdc.core.domain.Point import dev.petuska.kmdc.core.rememberMutableStateOf import dev.petuska.kmdc.list.item.CheckboxGraphic +import dev.petuska.kmdc.list.item.Label import dev.petuska.kmdc.list.item.Text import dev.petuska.kmdc.menu.* import dev.petuska.kmdc.menu.surface.* import dev.petuska.kmdc.textfield.MDCTextField import dev.petuska.kmdc.textfield.MDCTextFieldType import dev.petuska.kmdc.textfield.icon.MDCTextFieldTrailingIcon -import dev.petuska.kmdcx.icons.MDCIconOpts +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon import org.jetbrains.compose.web.dom.Text import sandbox.control.BooleanControl import sandbox.control.ChoiceControl @@ -105,8 +107,9 @@ fun MDCMenu() = InteractiveShowcase( MenuItem( disabled = disabled, ) { - CheckboxGraphic(i1 * 2 + i2 in selectedIds) - Text(it) + val id = "mdc-menu-item-${i1 * 2 + i2}" + CheckboxGraphic(checked = i1 * 2 + i2 in selectedIds, id = id) + Label(text = it, forId = id) } } } @@ -145,13 +148,13 @@ fun MDCMenu() = InteractiveShowcase( trailingIcon = { MDCTextFieldTrailingIcon(clickable = true, attrs = { onClick { open = !open } - classes("material-icons") + mdcIcon() }) { Text( if (open) { - MDCIconOpts.MDCIconType.ArrowDropUp.iconType + MDCIcon.ArrowDropUp.type } else { - MDCIconOpts.MDCIconType.ArrowDropDown.iconType + MDCIcon.ArrowDropDown.type } ) } diff --git a/sandbox/src/jsMain/showcases/MDCMenuSurface.kt b/sandbox/src/jsMain/showcases/MDCMenuSurface.kt new file mode 100644 index 00000000..a860b34a --- /dev/null +++ b/sandbox/src/jsMain/showcases/MDCMenuSurface.kt @@ -0,0 +1,117 @@ +package showcases + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.button.MDCButton +import dev.petuska.kmdc.core.KMDCInternalAPI +import dev.petuska.kmdc.core.domain.Point +import dev.petuska.kmdc.menu.surface.* +import dev.petuska.kmdc.typography.MDCBody1 +import sandbox.control.BooleanControl +import sandbox.control.ChoiceControl +import sandbox.util.NamedBlock +import sandbox.util.NamedGroup + +private class MDCMenuSurfaceVM { + var anchorCorner by mutableStateOf(Corner.BOTTOM_START) + var fullWidth by mutableStateOf(true) + var fixed by mutableStateOf(false) + var quickOpen by mutableStateOf(false) + var hoisted by mutableStateOf(false) + var restoreFocusOnClose by mutableStateOf(false) + + var open1 by mutableStateOf(false) + var open2 by mutableStateOf(false) +} + +@Composable +@Showcase(id = "MDCMenuSurface") +fun MDCMenuSurface() = InteractiveShowcase( + viewModel = { MDCMenuSurfaceVM() }, + controls = { + ChoiceControl( + title = "Anchor Corner", + options = mapOf( + "TOP_LEFT" to Corner.TOP_LEFT, + "TOP_RIGHT" to Corner.TOP_RIGHT, + "BOTTOM_LEFT" to Corner.BOTTOM_LEFT, + "BOTTOM_RIGHT" to Corner.BOTTOM_RIGHT, + "TOP_START" to Corner.TOP_START, + "TOP_END" to Corner.TOP_END, + "BOTTOM_START" to Corner.BOTTOM_START, + "BOTTOM_END" to Corner.BOTTOM_END, + ), + selected = ::anchorCorner + ) + BooleanControl("Full Width", ::fullWidth) + BooleanControl("Fixed", ::fixed) + BooleanControl("Quick Open", ::quickOpen) + BooleanControl("Hoisted", ::hoisted) + BooleanControl("Restore Focus on Close", ::restoreFocusOnClose) + NamedGroup("Absolute") { + BooleanControl("Open", ::open1) + } + NamedGroup("Anchored") { + BooleanControl("Open", ::open2) + } + }, +) { + NamedBlock("Absolute") { + MDCMenuSurface( + open = open1, + fullWidth = fullWidth, + fixed = fixed, + anchorCorner = anchorCorner, + quickOpen = quickOpen, + hoisted = hoisted, + restoreFocusOnClose = restoreFocusOnClose, + absolutePosition = Point(0.0, 0.0), + attrs = { + registerEvents() + onClosed { open1 = false } + } + ) { + MDCBody1("Menu Content...") + } + } + @OptIn(KMDCInternalAPI::class) + NamedBlock("Anchored") { + MDCMenuSurfaceAnchor(attrs = { + style { + property("width", "fit-content") + } + }) { + MDCButton( + text = "Anchor", + attrs = { + onClick { open2 = !open2 } + } + ) + MDCMenuSurface( + open = open2, + fullWidth = fullWidth, + fixed = fixed, + anchorCorner = anchorCorner, + quickOpen = quickOpen, + hoisted = hoisted, + restoreFocusOnClose = restoreFocusOnClose, + attrs = { + registerEvents() + onClosed { open2 = false } + } + ) { + MDCBody1("Menu Content...") + } + } + } +} + +private fun MDCMenuSurfaceAttrsScope.registerEvents() { + onOpened { console.log("MDCMenuSurface#onOpened", it.detail) } + onClosing { console.log("MDCMenuSurface#onClosing", it.detail) } + onClosed { console.log("MDCMenuSurface#onClosed", it.detail) } +} diff --git a/sandbox/src/jsMain/showcases/MDCRipple.kt b/sandbox/src/jsMain/showcases/MDCRipple.kt new file mode 100644 index 00000000..1e46e20d --- /dev/null +++ b/sandbox/src/jsMain/showcases/MDCRipple.kt @@ -0,0 +1,45 @@ +package showcases + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.ripple.MDCRipple +import dev.petuska.kmdc.typography.MDCBody1 +import org.jetbrains.compose.web.css.* +import org.jetbrains.compose.web.dom.Div +import sandbox.control.BooleanControl + +private class MDCRippleVM { + var disabled by mutableStateOf(false) + var unbounded by mutableStateOf(false) +} + +@Composable +@Showcase(id = "MDCRipple") +fun MDCRipple() = InteractiveShowcase( + viewModel = { MDCRippleVM() }, + controls = { + BooleanControl("Disabled", ::disabled) + BooleanControl("Unbounded", ::unbounded) + }, +) { + Div(attrs = { + classes("kmdc-ripple") + style { + padding(1.em) + property("width", "fit-content") + border(0.05.em, LineStyle.Solid, Color.black) + cursor("pointer") + overflow(if (unbounded) "visible" else "hidden") + } + }) { + MDCRipple( + unbounded = unbounded, + disabled = disabled, + ) + MDCBody1("Click Me!") + } +} diff --git a/sandbox/src/jsMain/showcases/MDCSegmentedButton.kt b/sandbox/src/jsMain/showcases/MDCSegmentedButton.kt index c34c290f..b6dee98d 100644 --- a/sandbox/src/jsMain/showcases/MDCSegmentedButton.kt +++ b/sandbox/src/jsMain/showcases/MDCSegmentedButton.kt @@ -1,18 +1,21 @@ package showcases import androidx.compose.runtime.* -import dev.petuska.katalog.runtime.* -import dev.petuska.katalog.runtime.layout.* +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase import dev.petuska.kmdc.segmented.button.* -import dev.petuska.kmdc.touch.target.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import sandbox.control.* +import dev.petuska.kmdc.touch.target.MDCTouchTarget +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon +import org.jetbrains.compose.web.attributes.disabled +import org.jetbrains.compose.web.dom.Text +import sandbox.control.BooleanControl private class MDCSegmentedButtonVM { var disabled by mutableStateOf(false) var singleSelect by mutableStateOf(false) var touch by mutableStateOf(false) + var selected = mutableStateListOf() } @@ -52,8 +55,8 @@ fun MDCSegmentedButton() = InteractiveShowcase( } ) { Icon(attrs = { - classes("material-icons") - }) { Text("favorite") } + mdcIcon() + }) { Text(MDCIcon.Favorite.type) } } Segment( text = "One", @@ -75,8 +78,8 @@ fun MDCSegmentedButton() = InteractiveShowcase( } ) { Icon(attrs = { - classes("material-icons") - }) { Text("favorite") } + mdcIcon() + }) { Text(MDCIcon.Favorite.type) } Label("Two") } } diff --git a/sandbox/src/jsMain/showcases/MDCSelect.kt b/sandbox/src/jsMain/showcases/MDCSelect.kt index 8e6cbce6..c40198b7 100644 --- a/sandbox/src/jsMain/showcases/MDCSelect.kt +++ b/sandbox/src/jsMain/showcases/MDCSelect.kt @@ -11,7 +11,8 @@ import dev.petuska.kmdc.select.anchor.Anchor import dev.petuska.kmdc.select.anchor.LeadingIcon import dev.petuska.kmdc.select.menu.Menu import dev.petuska.kmdc.select.menu.SelectItem -import dev.petuska.kmdcx.icons.MDCIconOpts +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon import org.jetbrains.compose.web.dom.Text import sandbox.control.BooleanControl import sandbox.control.ChoiceControl @@ -79,12 +80,12 @@ fun MDCSelect() = InteractiveShowcase( LeadingIcon( clickable = leadingIconClickable, attrs = { - classes("material-icons") + mdcIcon() onClick { console.log("MDCSelectLeadingIcon#onClick") } } - ) { Text(MDCIconOpts.MDCIconType.Event.iconType) } + ) { Text(MDCIcon.Event.type) } } } else null ) diff --git a/sandbox/src/jsMain/showcases/MDCSnackbar.kt b/sandbox/src/jsMain/showcases/MDCSnackbar.kt index eb5a5eae..13dded83 100644 --- a/sandbox/src/jsMain/showcases/MDCSnackbar.kt +++ b/sandbox/src/jsMain/showcases/MDCSnackbar.kt @@ -7,6 +7,8 @@ import androidx.compose.runtime.setValue import dev.petuska.katalog.runtime.Showcase import dev.petuska.katalog.runtime.layout.InteractiveShowcase import dev.petuska.kmdc.snackbar.* +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon import org.jetbrains.compose.web.dom.Text import sandbox.control.BooleanControl import sandbox.control.ChoiceControl @@ -26,14 +28,13 @@ fun MDCSnackbar() = InteractiveShowcase( viewModel = { MDCSnackbarVM() }, controls = { ChoiceControl("Type", MDCSnackbarType.values().associateBy(MDCSnackbarType::name), ::type) -// BooleanControl("Dismissible", ::dismissible) + BooleanControl("Dismissible", ::dismissible) BooleanControl("Close on Escape", ::closeOnEscape) RangeControl("Timeout MS", ::timeoutMs, min = 3999, max = 10000, converter = Number::toInt) BooleanControl("Open", ::open) }, ) { MDCSnackbar( -// dismissible = dismissible, closeOnEscape = closeOnEscape, timeoutMs = timeoutMs.takeIf { it >= 4000 }, open = open, @@ -43,15 +44,17 @@ fun MDCSnackbar() = InteractiveShowcase( onClosed { open = false } } ) { - MDCSnackbarLabel("Can't send photo.${if (timeoutMs >= 4000) " Closing in ${timeoutMs / 1000} seconds." else ""}") - MDCSnackbarActions { - MDCSnackbarAction("Retry", attrs = { + Label("Can't send photo.${if (timeoutMs >= 4000) " Closing in ${timeoutMs / 1000} seconds." else ""}") + Actions { + Action("Retry", attrs = { onClick { console.log("MDCSnackbar#Retried") } }) - MDCSnackbarDismiss(attrs = { - classes("material-icons") - title("Dismiss") - }) { Text("close") } + if (dismissible) { + Dismiss(attrs = { + mdcIcon() + title("Dismiss") + }) { Text(MDCIcon.Close.type) } + } } } } diff --git a/sandbox/src/jsMain/showcases/MDCSwitch.kt b/sandbox/src/jsMain/showcases/MDCSwitch.kt index a76c25c9..fbdb90d1 100644 --- a/sandbox/src/jsMain/showcases/MDCSwitch.kt +++ b/sandbox/src/jsMain/showcases/MDCSwitch.kt @@ -1,15 +1,21 @@ package showcases -import androidx.compose.runtime.* -import dev.petuska.katalog.runtime.* -import dev.petuska.katalog.runtime.layout.* -import dev.petuska.kmdc.switch.* -import org.jetbrains.compose.web.attributes.* -import sandbox.control.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.form.field.MDCFormField +import dev.petuska.kmdc.switch.MDCSwitch +import org.jetbrains.compose.web.attributes.disabled +import sandbox.control.BooleanControl +import sandbox.control.TextControl private class MDCSwitchVM { var disabled by mutableStateOf(false) var selected by mutableStateOf(false) + var label by mutableStateOf("on/off") } @Composable @@ -19,15 +25,17 @@ fun MDCSwitch() = InteractiveShowcase( controls = { BooleanControl("Disabled", ::disabled) BooleanControl("Selected", ::selected) + TextControl("Label", ::label) }, ) { - MDCSwitch( - selected = selected, - attrs = { - if (disabled) disabled() - onClick { - selected = !selected + MDCFormField { + MDCSwitch( + selected = selected, + label = label.takeIf(String::isNotBlank), + attrs = { + if (disabled) disabled() + onClick { selected = !selected } } - } - ) + ) + } } diff --git a/sandbox/src/jsMain/showcases/MDCTabBar.kt b/sandbox/src/jsMain/showcases/MDCTabBar.kt index bce20e1f..2f48da82 100644 --- a/sandbox/src/jsMain/showcases/MDCTabBar.kt +++ b/sandbox/src/jsMain/showcases/MDCTabBar.kt @@ -12,6 +12,8 @@ import dev.petuska.kmdc.tab.bar.MDCTabBarAttrsScope import dev.petuska.kmdc.tab.bar.onActivated import dev.petuska.kmdc.tab.indicator.* import dev.petuska.kmdc.tab.scroller.Scroller +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon import org.jetbrains.compose.web.attributes.disabled import org.jetbrains.compose.web.dom.Text import sandbox.control.BooleanControl @@ -58,13 +60,13 @@ fun MDCTabBar() = InteractiveShowcase( if (disabled) disabled() }) { Content { - Icon(attrs = { classes("material-icons") }) { Text("dark_mode") } + Icon(attrs = { mdcIcon() }) { Text(MDCIcon.DarkMode.type) } Label("Tab $id") } Indicator(active = active == "mdc-tab-$id", transition = transition) { when (indicator) { MDCTabIndicatorType.Underline -> Underline() - MDCTabIndicatorType.Icon -> Icon(attrs = { classes("material-icons") }) { Text("star") } + MDCTabIndicatorType.Icon -> Icon(attrs = { mdcIcon() }) { Text(MDCIcon.Star.type) } } } } diff --git a/sandbox/src/jsMain/showcases/MDCTextField.kt b/sandbox/src/jsMain/showcases/MDCTextField.kt index 2faaa4d7..4f77f5d4 100644 --- a/sandbox/src/jsMain/showcases/MDCTextField.kt +++ b/sandbox/src/jsMain/showcases/MDCTextField.kt @@ -8,6 +8,8 @@ import dev.petuska.kmdc.textfield.MDCTextField import dev.petuska.kmdc.textfield.MDCTextFieldType import dev.petuska.kmdc.textfield.icon.MDCTextFieldLeadingIcon import dev.petuska.kmdc.textfield.icon.MDCTextFieldTrailingIcon +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon import org.jetbrains.compose.web.dom.Text import sandbox.control.BooleanControl import sandbox.control.ChoiceControl @@ -72,12 +74,12 @@ fun MDCTextField() = InteractiveShowcase( }, leadingIcon = if (leadingIcon) { { - MDCTextFieldLeadingIcon(attrs = { classes("material-icons") }) { Text("phone") } + MDCTextFieldLeadingIcon(attrs = { mdcIcon() }) { Text(MDCIcon.Phone.type) } } } else null, trailingIcon = if (trailingIcon) { { - MDCTextFieldTrailingIcon(attrs = { classes("material-icons") }) { Text("event") } + MDCTextFieldTrailingIcon(attrs = { mdcIcon() }) { Text(MDCIcon.Event.type) } } } else null ) diff --git a/sandbox/src/jsMain/showcases/MDCTooltip.kt b/sandbox/src/jsMain/showcases/MDCTooltip.kt index 90c68255..b6866056 100644 --- a/sandbox/src/jsMain/showcases/MDCTooltip.kt +++ b/sandbox/src/jsMain/showcases/MDCTooltip.kt @@ -28,8 +28,8 @@ private class MDCTooltipVM { fun MDCTooltip() = InteractiveShowcase( viewModel = { MDCTooltipVM() }, controls = { - BooleanControl("Interactive", ::interactive) BooleanControl("Persistent", ::persistent) + BooleanControl("Interactive", ::interactive) }, ) { NamedBlock("Simple") { @@ -51,10 +51,10 @@ fun MDCTooltip() = InteractiveShowcase( AnchorButton(tid, if (persistent) "Click me" else "Hover over me") } ) { - MDCTooltipTitle("Lorem Ipsum") - MDCTooltipContent { + Title("Lorem Ipsum") + Content { Text(LoremIpsum) - MDCTooltipLink("link", RickRollUrl, attrs = { + Link("link", RickRollUrl, attrs = { target(ATarget.Blank) }) } diff --git a/sandbox/src/jsMain/showcases/MDCTopAppBar.kt b/sandbox/src/jsMain/showcases/MDCTopAppBar.kt new file mode 100644 index 00000000..7c8c773e --- /dev/null +++ b/sandbox/src/jsMain/showcases/MDCTopAppBar.kt @@ -0,0 +1,67 @@ +package showcases + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.katalog.runtime.util.LoremIpsum +import dev.petuska.kmdc.top.app.bar.* +import dev.petuska.kmdc.typography.MDCBody1 +import dev.petuska.kmdcx.icons.MDCIcon +import dev.petuska.kmdcx.icons.mdcIcon +import org.jetbrains.compose.web.css.Position +import org.jetbrains.compose.web.css.position +import org.jetbrains.compose.web.dom.Text +import sandbox.control.ChoiceControl + +private class MDCTopAppBarVM { + var type by mutableStateOf(MDCTopAppBarType.Default) + + var open by mutableStateOf(false) +} + +@Composable +@Showcase(id = "MDCTopAppBar") +fun MDCTopAppBar() = InteractiveShowcase( + viewModel = { MDCTopAppBarVM() }, + controls = { + ChoiceControl("Type", MDCTopAppBarType.values().associateBy(MDCTopAppBarType::name), ::type) + }, +) { + MDCTopAppBar(type = type) { + TopAppBar(attrs = { + registerEvents() + onNav { open = !open } + style { + position(Position.Relative) + if (open) variable("--mdc-theme-primary", "#494451") + } + }) { + Row { + Section(align = MDCTopAppBarSectionAlign.Start) { + NavButton(attrs = { mdcIcon() }) { Text(if (open) MDCIcon.Close.type else MDCIcon.Menu.type) } + Title("Contextual Title") + } + Section( + align = MDCTopAppBarSectionAlign.End, + attrs = { + attr("role", "toolbar") + } + ) { + ActionButton(attrs = { mdcIcon() }) { Text(MDCIcon.Share.type) } + ActionButton(attrs = { mdcIcon() }) { Text(MDCIcon.Delete.type) } + ActionButton(attrs = { mdcIcon() }) { Text(MDCIcon.MoreVert.type) } + } + } + } + Main { + MDCBody1(LoremIpsum) + } + } +} + +private fun MDCTopAppBarAttrsScope.registerEvents() { + onNav { console.log("MDCTopAppBar#onNav", it.detail) } +} diff --git a/sandbox/src/jsMain/showcases/MDCTouchTarget.kt b/sandbox/src/jsMain/showcases/MDCTouchTarget.kt new file mode 100644 index 00000000..cb79d71c --- /dev/null +++ b/sandbox/src/jsMain/showcases/MDCTouchTarget.kt @@ -0,0 +1,36 @@ +package showcases + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import dev.petuska.katalog.runtime.Showcase +import dev.petuska.katalog.runtime.layout.InteractiveShowcase +import dev.petuska.kmdc.fab.MDCFab +import dev.petuska.kmdc.fab.MDCFabType +import dev.petuska.kmdc.touch.target.MDCTouchTarget +import sandbox.control.BooleanControl + +private class MDCTouchTargetVM { + var enabled by mutableStateOf(true) +} + +@Composable +@Showcase(id = "MDCTouchTarget") +fun MDCTouchTarget() = InteractiveShowcase( + viewModel = { MDCTouchTargetVM() }, + controls = { + BooleanControl("Enabled", ::enabled) + }, +) { + val render = @Composable { + MDCFab(type = MDCFabType.Mini, touch = enabled) + } + if (enabled) { + MDCTouchTarget { + render() + } + } else { + render() + } +}