Merge pull request #529 from Manriif/module/material

Add support for Material 3

Module.md

@@ -109,6 +109,78 @@ Bootstrap navbar components.
 
 Bootstrap offcanvas component.
 
+# Package io.kvision.material.button
+
+Material web button components (elevated, filled, filled tonal, outlined, text).
+
+# Package io.kvision.material.checkbox
+
+Material web checkbox component.
+
+# Package io.kvision.material.chips
+
+Material web chips components (chip set, chip).
+
+# Package io.kvision.material.dialog
+
+Material web dialog component.
+
+# Package io.kvision.material.divider
+
+Material web divider component.
+
+# Package io.kvision.material.fab
+
+Material web fab components (fab, branded fab).
+
+# Package io.kvision.material.icon
+
+Material web icon component.
+
+# Package io.kvision.material.iconbutton
+
+Material web icon button components (filled, filled tonal, outlined, standard).
+
+# Package io.kvision.material.list
+
+Material web list components (list, list item).
+
+# Package io.kvision.material.menu
+
+Material web menu components (menu, menu item, submenu).
+
+# Package io.kvision.material.progress
+
+Material web progress components (circular, linear).
+
+# Package io.kvision.material.radio
+
+Material web radio component.
+
+# Package io.kvision.material.ripple
+
+Material web ripple component.
+
+# Package io.kvision.material.select
+
+Material web select components (filled, outlined, select option).
+
+# Package io.kvision.material.slider
+
+Material web slider components (slider, range slider).
+
+# Package io.kvision.material.switch
+
+Material web switch component.
+
+# Package io.kvision.material.tabs
+
+Material web tabs components (tabs, primary tab, secondary tab).
+
+# Package io.kvision.material.textfield
+
+Material web text field component (filled, outlined).
+
 # Package io.kvision.onsenui
 
 Onsen UI helper utility functions.

build.gradle.kts

@@ -49,6 +49,7 @@ val jqueryVersion: String by project
 val leafletVersion: String by project
 val geojsonVersion: String by project
 val geojsonTypesVersion: String by project
+val materialVersion: String by project
 val onsenuiVersion: String by project
 val paceProgressbarVersion: String by project
 val printjsVersion: String by project
@@ -93,6 +94,7 @@ rootProject.plugins.withType<org.jetbrains.kotlin.gradle.targets.js.yarn.YarnPlu
         resolution("leaflet", leafletVersion)
         resolution("geojson", geojsonVersion)
         resolution("@types/geojson", geojsonTypesVersion)
+        resolution("@material/web", materialVersion)
         resolution("onsenui", onsenuiVersion)
         resolution("pace-progressbar", paceProgressbarVersion)
         resolution("print-js", printjsVersion)
@@ -181,6 +183,7 @@ tasks.dokkaHtml.configure {
             sourceRoots.from(file("kvision-modules/kvision-imask/src/jsMain/kotlin"))
             sourceRoots.from(file("kvision-modules/kvision-jquery/src/jsMain/kotlin"))
             sourceRoots.from(file("kvision-modules/kvision-maps/src/jsMain/kotlin"))
+            sourceRoots.from(file("kvision-modules/kvision-material/src/jsMain/kotlin"))
             sourceRoots.from(file("kvision-modules/kvision-onsenui/src/jsMain/kotlin"))
             sourceRoots.from(file("kvision-modules/kvision-pace/src/jsMain/kotlin"))
             sourceRoots.from(file("kvision-modules/kvision-react/src/jsMain/kotlin"))

gradle.properties

@@ -63,6 +63,7 @@ jqueryVersion=3.7.1
 leafletVersion=1.9.4
 geojsonVersion=0.5.0
 geojsonTypesVersion=7946.0.10
+materialVersion=1.4.1
 onsenuiVersion=2.12.8
 paceProgressbarVersion=1.0.10
 printjsVersion=1.6.0

kvision-modules/kvision-material/build.gradle.kts

@@ -0,0 +1,36 @@
+plugins {
+    kotlin("multiplatform")
+    id("maven-publish")
+    id("signing")
+    id("org.jetbrains.dokka")
+}
+
+val materialVersion: String by project
+
+kotlin {
+    kotlinJsTargets()
+    sourceSets {
+        val jsMain by getting {
+            dependencies {
+                api(rootProject)
+                implementation(npm("@material/web", materialVersion))
+            }
+        }
+        val jsTest by getting {
+            dependencies {
+                implementation(kotlin("test-js"))
+                implementation(project(":kvision-modules:kvision-testutils"))
+            }
+        }
+    }
+}
+
+val javadocJar by tasks.registering(Jar::class) {
+    dependsOn("dokkaHtml")
+    archiveClassifier.set("javadoc")
+    from(layout.buildDirectory.dir("dokka/html"))
+}
+
+setupSigning()
+setupPublication()
+setupDokkaMpp()

kvision-modules/kvision-material/karma.config.d/karma.conf.js

@@ -0,0 +1,11 @@
+config.set({
+    reporters: ['karma-kotlin-reporter', 'junit'],
+    junitReporter: {
+        outputDir: '../../../reports/junit',
+        outputFile: 'kvision-material.xml',
+        useBrowserName: false
+    },
+    captureTimeout: 360000,
+    browserDisconnectTimeout: 360000,
+    browserNoActivityTimeout: 360000
+});

kvision-modules/kvision-material/src/jsMain/kotlin/io/kvision/material/ExperimentalMaterialApi.kt

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ * Copyright (c) 2024 Maanrifa Bacar Ali <[email protected]>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package io.kvision.material
+
+@RequiresOptIn(
+    message = "This material API is experimental. It may be changed in the future without notice."
+)
+@Retention(AnnotationRetention.BINARY)
+@Target(AnnotationTarget.CLASS, AnnotationTarget.FUNCTION)
+annotation class ExperimentalMaterialApi

kvision-modules/kvision-material/src/jsMain/kotlin/io/kvision/material/MaterialModule.kt

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ * Copyright (c) 2024 Maanrifa Bacar Ali <[email protected]>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package io.kvision.material
+
+import io.kvision.ModuleInitializer
+import io.kvision.require
+import kotlinx.browser.document
+
+/**
+ * @author Maanrifa Bacar Ali <[email protected]>
+ */
+object MaterialModule : ModuleInitializer {
+
+    override fun initialize() {
+        require("@material/web/all.js")
+        val typescaleStyles = require("@material/web/typography/md-typescale-styles.js")
+        document.asDynamic().adoptedStyleSheets.push(typescaleStyles.styles.styleSheet)
+    }
+}

kvision-modules/kvision-material/src/jsMain/kotlin/io/kvision/material/button/MdButton.kt

@@ -0,0 +1,145 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ * Copyright (c) 2024 Maanrifa Bacar Ali <[email protected]>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package io.kvision.material.button
+
+import io.kvision.material.ExperimentalMaterialApi
+import io.kvision.material.form.MdFormWidget
+import io.kvision.material.slot.HasIconSlot
+import io.kvision.material.util.addBool
+import io.kvision.material.widget.LinkTarget
+import io.kvision.material.widget.Slot
+import io.kvision.core.AttributeSetBuilder
+import io.kvision.core.Component
+import io.kvision.snabbdom.VNode
+
+enum class ButtonType(internal val value: String) {
+    Button("button"),
+    Submit("submit"),
+    Reset("reset")
+}
+
+/**
+ * Buttons help people initiate actions, from sending an email, to sharing a document,
+ * to liking a post.
+ *
+ * See https://material-web.dev/components/button/
+ *
+ * @author Maanrifa Bacar Ali <[email protected]>
+ */
+@ExperimentalMaterialApi
+abstract class MdButton internal constructor(
+    tag: String,
+    text: String? = null,
+    disabled: Boolean = false,
+    href: String? = null,
+    target: LinkTarget? = null,
+    trailingIcon: Boolean = false,
+    type: ButtonType = ButtonType.Submit,
+    value: String? = null,
+    name: String? = null,
+    className: String? = null,
+    init: (MdButton.() -> Unit)? = null
+) : MdFormWidget<String?>(
+    tag = tag,
+    disabled = disabled,
+    value = value,
+    name = name,
+    className = className
+), HasIconSlot {
+
+    /**
+     * Button text.
+     */
+    var text: String? by refreshOnUpdate(text)
+
+    /**
+     * The URL that the link button points to.
+     */
+    var href by refreshOnUpdate(href)
+
+    /**
+     * Where to display the linked href URL for a link button.
+     * Common options include _blank to open in a new tab.
+     */
+    var target by refreshOnUpdate(target)
+
+    /**
+     * Whether to render the icon at the inline end of the label rather than the inline start.
+     * Note: Link buttons cannot have trailing icons.
+     */
+    var trailingIcon by refreshOnUpdate(trailingIcon)
+
+    /**
+     * Button type.
+     */
+    var type by refreshOnUpdate(type)
+
+    init {
+        init?.let { this.it() }
+    }
+
+    ///////////////////////////////////////////////////////////////////////////
+    // Rendering
+    ///////////////////////////////////////////////////////////////////////////
+
+    override fun render(): VNode {
+        return renderWithTranslatableText(text)
+    }
+
+    ///////////////////////////////////////////////////////////////////////////
+    // Attributes
+    ///////////////////////////////////////////////////////////////////////////
+
+    override fun buildAttributeSet(attributeSetBuilder: AttributeSetBuilder) {
+        super.buildAttributeSet(attributeSetBuilder)
+        attributeSetBuilder.add("type", type.value)
+
+        href?.let {
+            attributeSetBuilder.add("href", it)
+        }
+
+        target?.let {
+            attributeSetBuilder.add("target", it.value)
+        }
+
+        if (trailingIcon) {
+            attributeSetBuilder.addBool("trailing-icon")
+        }
+    }
+
+    ///////////////////////////////////////////////////////////////////////////
+    // Slots
+    ///////////////////////////////////////////////////////////////////////////
+
+    override fun icon(component: Component?) {
+        Slot.Icon(component)
+    }
+
+    ///////////////////////////////////////////////////////////////////////////
+    // Events
+    ///////////////////////////////////////////////////////////////////////////
+
+    override fun hasChangeEvent(): Boolean = false
+
+    override fun hasInputEvent(): Boolean = false
+}