├── .gitattributes ├── .github └── workflows │ ├── kotlin-multiplatform-ci.yml │ └── site-gh-pages.yml ├── .gitignore ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── build.gradle.kts ├── buildSrc ├── build.gradle.kts └── src │ └── main │ └── kotlin │ ├── VersionsAndDependencies.kt │ ├── lib-conventions-without-publishing.gradle.kts │ └── lib-conventions.gradle.kts ├── compose-html-common ├── api │ └── compose-html-common.klib.api ├── build.gradle.kts └── src │ └── jsMain │ └── kotlin │ └── com │ └── huanshankeji │ └── compose │ └── web │ ├── Layouts.kt │ ├── PreferringKobwebComposeLayoutApi.kt │ ├── Types.kt │ ├── attributes │ ├── AttrBuilderContext.kt │ ├── AttrConversion.kt │ ├── Attrs.kt │ ├── Types.kt │ └── ext │ │ ├── Attrs.kt │ │ └── EventAttrs.kt │ ├── css │ ├── CSS.kt │ ├── StyleScope.kt │ └── Styles.kt │ └── dom │ └── ext │ └── dom.kt ├── compose-html-material-legacy ├── api │ └── compose-html-material-legacy.klib.api ├── build.gradle.kts └── src │ └── jsMain │ └── kotlin │ └── com │ └── huanshankeji │ ├── compose │ └── web │ │ └── material │ │ ├── Components.kt │ │ ├── Layouts.kt │ │ ├── MwcRequires.kt │ │ └── Styles.kt │ └── material │ └── Colors.kt ├── compose-html-material3 ├── api │ └── compose-html-material3.klib.api ├── build.gradle.kts └── src │ └── jsMain │ └── kotlin │ └── com │ └── huanshankeji │ └── compose │ └── html │ └── material3 │ ├── MaterialWebLabsApi.kt │ ├── MdButton.kt │ ├── MdCard.kt │ ├── MdCheckbox.kt │ ├── MdFab.kt │ ├── MdIcon.kt │ ├── MdIconButton.kt │ ├── MdList.kt │ ├── MdMenu.kt │ ├── MdNavigationBar.kt │ ├── MdNavigationTab.kt │ ├── MdProgress.kt │ ├── MdSwitch.kt │ ├── MdTextField.kt │ ├── Require.kt │ └── attributes │ └── Attrs.kt ├── gradle-plugins ├── README.md ├── api │ └── compose-html-material-gradle-plugins-legacy.api ├── build.gradle.kts └── src │ └── main │ └── kotlin │ └── com │ └── huanshankeji │ ├── Versions.kt │ └── compose-html-material-conventions-legacy.gradle.kts ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── kotlin-js-store └── yarn.lock ├── legacy ├── README.md └── demo │ ├── html │ └── demo.html │ └── webpack.config.d │ └── further_adjustments.js ├── settings.gradle.kts └── site └── index.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # 2 | # https://help.github.com/articles/dealing-with-line-endings/ 3 | # 4 | # These are explicitly windows files and should use crlf 5 | *.bat text eol=crlf 6 | 7 | -------------------------------------------------------------------------------- /.github/workflows/kotlin-multiplatform-ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | workflow_dispatch: 5 | push: 6 | branches: ["*"] 7 | # pull_request: 8 | # branches: [ "*" ] 9 | 10 | jobs: 11 | test-and-check: 12 | runs-on: ubuntu-latest 13 | permissions: 14 | contents: read 15 | 16 | steps: 17 | - uses: huanshankeji/.github/actions/gradle-test-and-check@v0.1.0 18 | with: 19 | jdk-versions: 11-temurin 20 | 21 | dependency-submission: 22 | runs-on: ubuntu-latest 23 | permissions: 24 | contents: write 25 | 26 | steps: 27 | - uses: huanshankeji/.github/actions/dependency-submission@v0.1.0 28 | with: 29 | java-version: 11 30 | distribution: temurin 31 | -------------------------------------------------------------------------------- /.github/workflows/site-gh-pages.yml: -------------------------------------------------------------------------------- 1 | name: Deploy the site to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: [ "release" ] 6 | pull_request: 7 | branches: [ "release" ] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Build job 26 | build: 27 | runs-on: ubuntu-latest 28 | steps: 29 | - name: Checkout 30 | uses: actions/checkout@v4 31 | - name: Setup Pages 32 | uses: actions/configure-pages@v5 33 | 34 | - name: Set up JDK 11 35 | uses: actions/setup-java@v4 36 | with: 37 | java-version: "11" 38 | distribution: "temurin" 39 | 40 | - name: Setup Gradle 41 | uses: gradle/actions/setup-gradle@v4 42 | 43 | - name: Build the distribution with Gradle Wrapper 44 | run: ./gradlew :generateSite 45 | 46 | - name: Upload artifact 47 | uses: actions/upload-pages-artifact@v3 48 | with: 49 | path: build/site/ 50 | 51 | # Deployment job 52 | deploy: 53 | environment: 54 | name: github-pages 55 | url: ${{ steps.deployment.outputs.page_url }} 56 | runs-on: ubuntu-latest 57 | needs: build 58 | steps: 59 | - name: Deploy to GitHub Pages 60 | id: deployment 61 | uses: actions/deploy-pages@v4 62 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .gradle 2 | .kotlin 3 | build 4 | .idea 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change log 2 | 3 | ## v0.4.0 / 2014-10-19 4 | 5 | * bump Kotlin to 2.0.10 and Compose to 1.7.0 6 | * Add the menu composables `MdMenu`, `MdMenuItem`, and `MdSubMenu` 7 | * Add the progress composables `MdLinearProgress` and `MdCircularProgress` 8 | * `LoadingState` is removed and moved to [compose-multiplatform-material](https://github.com/huanshankeji/compose-multiplatform-material) 9 | * add a `TextareaInputType` for the text field 10 | * the legacy modules are no longer published 11 | * fix a bug that the `AttrsScope<*>.disabled` function recursively calls itself 12 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | shreckye@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing guidelines 2 | 3 | Hello, thank you for your interest in contributing to our project. 4 | 5 | ## Issues and Discussions 6 | 7 | You are welcome to submit issues on bugs or feature requests. If you have questions, please ask them in GitHub Discussions. 8 | 9 | ## Pull requests 10 | 11 | If you want to contribute to the code of our project, you are welcome to open pull requests. However, it's always a good idea to open a related issue or talk with us in Discussions first. 12 | 13 | ## Development 14 | 15 | Please make sure you have a valid JDK installed. Some projects may require multiple JDKs of different versions. The JDK version we use can be found in the [GitHub Actions workflow files](.github/workflows). 16 | 17 | We recommend developing with IntelliJ IDEA. In IntelliJ IDEA, select the correct [Project SDK in Project Structure](https://www.jetbrains.com/help/idea/project-settings-and-structure.html#project-sdk) and it's recommended to set [Gradle JVM](https://www.jetbrains.com/help/idea/gradle-jvm-selection.html#jvm_settings) to "Project SDK". 18 | 19 | Run the `publishToMavenLocal` Gradle task to publish the libraries to your machine's Maven Local Repository so your projects can depend on the changes you have made, run `check` to ensure our limited number of tests pass. 20 | 21 | ## Furthur notice 22 | 23 | We are currently a small team with limited effort. While we may not always implement your requested features, merge your pull requests, or do such things in time, you are always welcome to create your own fork and make any changes you like. 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Compose HTML Material 2 | 3 | [![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-html-material3)](https://search.maven.org/artifact/com.huanshankeji/compose-html-material3) 4 | 5 | Material 3 wrapper components for Compose HTML based on [Material Web](https://github.com/material-components/material-web) 6 | 7 | For unified multiplatform APIs which are more akin to those in `androidx.compose`, check out [Compose Multiplatform HTML Unified](https://github.com/huanshankeji/compose-multiplatform-html-unified) which also depends on this library. Also see its [side-by-side demo site](https://huanshankeji.github.io/compose-multiplatform-html-unified/) for the visual effects of the components. 8 | 9 | For Material 2, you are recommended to check out [KMDC](https://github.com/mpetuska/kmdc) instead. For information on our obsolete work on legacy Material 2 components, check out [the legacy README](/legacy/README.md). 10 | 11 | [Check out the API documentation here.](https://huanshankeji.github.io/compose-html-material/api-documentation/index.html) 12 | 13 | ## Supported components 14 | 15 | Not all components of Material Web are supported yet (see [#11](https://github.com/huanshankeji/compose-html-material/issues/11)). Also, not all Material Design components are supported by Material Web yet (see [their roadmap](https://github.com/material-components/material-web/blob/main/docs/roadmap.md)). 16 | 17 | Here is a list of supported compoent APIs: 18 | 19 | - `MdElevatedButton`, `MdFilledButton`, `MdFilledTonalButton`, `MdOutlinedButton`, `MdTextButton` 20 | - `MdCheckbox` 21 | - `MdFab`, `MdBrandedFab` 22 | - `MdIcon` 23 | - `MdIconButton`, `MdFilledIconButton`, `MdFilledTonalIconButton`, `MdOutlinedIconButton` 24 | - `MdList`, `MdListItem` 25 | - `MdMenu`, `MdMenuItem`, `MdSubMenu` 26 | - `MdLinearProgress`, `MdCircularProgress` 27 | - `MdSwitch`, `LabelWithMdSwitch` 28 | - `MdFilledTextField`, `MdOutlinedTextField` 29 | 30 | ### "labs" components 31 | 32 | Here is a list of supported component APIs in the [Material Web "labs" directory](https://github.com/material-components/material-web/tree/main/labs), which "contains experimental features that are not recommended for production" as they state: 33 | 34 | - `MdElevatedCard`, `MdOutlinedCard` 35 | - `MdNavigationBar` 36 | - `MdNavigationTab` 37 | 38 | You should opt-in to `@MaterialWebLabsApi` to use them. 39 | 40 | ## Brief Instructions 41 | 42 | ### Add the dependency 43 | 44 | With Gradle: 45 | 46 | ```kotlin 47 | kotlin { 48 | sourceSets { 49 | jsMain { 50 | dependencies { 51 | // ... 52 | implementation("com.huanshankeji:compose-html-material3:$version") 53 | } 54 | } 55 | } 56 | } 57 | ``` 58 | 59 | This project depends on [Kobweb](https://github.com/varabyte/kobweb) which is not published to Maven Central yet, so you have to add the following Maven repository: 60 | 61 | ```kotlin 62 | repositories { 63 | mavenCentral() 64 | maven("https://us-central1-maven.pkg.dev/varabyte-repos/public") 65 | } 66 | ``` 67 | 68 | ### Material Symbols & Icons 69 | 70 | The Material 3 module uses [Material Symbols & Icons](https://fonts.google.com/icons), but doesn't depend on the stylesheet directly. For Material Icons to work properly, you may need to configure your project following the quick instructions below or [the developer guide](https://developers.google.com/fonts/docs/material_symbols). 71 | 72 | #### Quick instructions 73 | 74 | In short, there are 3 ways to add the Material Symbols & Icons dependency: 75 | 76 | 1. Add the stylesheet hosted by Google directly in your HTML file `head`: 77 | 78 | ```html 79 | 80 | ``` 81 | 82 | 1. Use [Marella's self-hosted Material Symbols](https://www.npmjs.com/package/material-symbols). 83 | 84 | First add the dependency in your build script: 85 | 86 | ```kotlin 87 | implementation(npm("material-symbols", "0.17.4")) 88 | ``` 89 | 90 | And then import the icons in your program. For example you can use CommonJS `require`: 91 | 92 | ```kotlin 93 | external fun require(module: String): dynamic 94 | fun main() { 95 | require("material-symbols/outlined.css") 96 | renderComposableInBody { App() } 97 | } 98 | ``` 99 | 100 | If you are familiar with web development and Kotlin/JS, you can depend on the stylesheet in any way that works and you prefer. For example, you can use `@JsModule` corresponding to the UMD import, or configure it as a Webpack entry point. See the following docs fore more details: 101 | 1. [JavaScript modules | Kotlin Documentation](https://kotlinlang.org/docs/js-modules.html) 102 | 1. [the "webpack configuration file" section in Set up a Kotlin/JS project | Kotlin Documentation](https://kotlinlang.org/docs/js-project-setup.html#webpack-configuration-file) 103 | 1. [Code Splitting | webpack](https://webpack.js.org/guides/code-splitting/) 104 | 1. [Advanced entry | webpack](https://webpack.js.org/guides/entry-advanced/) 105 | 106 | 1. [Download and self-host the latest font](https://developers.google.com/fonts/docs/material_symbols#self-hosting_the_font). 107 | -------------------------------------------------------------------------------- /build.gradle.kts: -------------------------------------------------------------------------------- 1 | import org.jetbrains.dokka.gradle.tasks.DokkaGeneratePublicationTask 2 | 3 | tasks.wrapper { 4 | distributionType = Wrapper.DistributionType.ALL 5 | } 6 | 7 | plugins { 8 | id("org.jetbrains.dokka") 9 | id("org.jetbrains.kotlinx.binary-compatibility-validator") version "0.16.3" 10 | } 11 | 12 | dependencies { 13 | listOf( 14 | "compose-html-common", 15 | "compose-html-material3" 16 | ).forEach { 17 | dokka(project(":$it")) 18 | } 19 | } 20 | 21 | val dokkaGeneratePublicationHtml by tasks.getting(DokkaGeneratePublicationTask::class) 22 | tasks.register("generateSite") { 23 | group = "site" 24 | 25 | val destRootDir = layout.buildDirectory.dir("site") 26 | into(destRootDir) 27 | from(dokkaGeneratePublicationHtml) { 28 | into("api-documentation") 29 | } 30 | from(layout.projectDirectory.dir("site")) 31 | } 32 | 33 | apiValidation { 34 | @OptIn(kotlinx.validation.ExperimentalBCVApi::class) 35 | klib { 36 | enabled = true 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /buildSrc/build.gradle.kts: -------------------------------------------------------------------------------- 1 | plugins { 2 | `kotlin-dsl` 3 | } 4 | repositories { 5 | //mavenLocal() // comment out when not needed 6 | gradlePluginPortal() 7 | //maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") 8 | } 9 | 10 | dependencies { 11 | val kotlinVersion = "2.1.0" 12 | implementation(kotlin("gradle-plugin", kotlinVersion)) 13 | implementation("org.jetbrains.kotlin:compose-compiler-gradle-plugin:$kotlinVersion") 14 | implementation("org.jetbrains.compose:compose-gradle-plugin:1.7.1") 15 | val huanshankejiGradlePluginsVersion = "0.9.0" // don't use a snapshot version in a main branch 16 | implementation("com.huanshankeji:kotlin-common-gradle-plugins:$huanshankejiGradlePluginsVersion") 17 | implementation("com.huanshankeji.team:gradle-plugins:$huanshankejiGradlePluginsVersion") 18 | implementation("com.huanshankeji:common-gradle-dependencies:0.9.0-20241203") // don't use a snapshot version in a main branch 19 | implementation("org.jetbrains.dokka:dokka-gradle-plugin:2.0.0-Beta") 20 | } 21 | -------------------------------------------------------------------------------- /buildSrc/src/main/kotlin/VersionsAndDependencies.kt: -------------------------------------------------------------------------------- 1 | import com.huanshankeji.CommonDependencies 2 | 3 | const val projectVersion = "0.4.1-SNAPSHOT" 4 | 5 | object DependencyVersions { 6 | val kobweb = "0.20.0" 7 | val materialWeb = "2.2.0" 8 | 9 | 10 | // legacy versions that don't need to be updated 11 | 12 | val webcomponents = "2.6.0" 13 | val mwc = "0.25.3" 14 | 15 | val mdc = "13.0.0" 16 | } 17 | 18 | val commonDependencies = CommonDependencies() 19 | -------------------------------------------------------------------------------- /buildSrc/src/main/kotlin/lib-conventions-without-publishing.gradle.kts: -------------------------------------------------------------------------------- 1 | plugins { 2 | id("com.huanshankeji.kotlin-multiplatform-js-browser-conventions") 3 | kotlin("plugin.compose") 4 | id("org.jetbrains.compose") 5 | id("com.huanshankeji.kotlin-multiplatform-sonatype-ossrh-publish-conventions") 6 | } 7 | 8 | repositories { 9 | mavenCentral() 10 | maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") 11 | maven("https://us-central1-maven.pkg.dev/varabyte-repos/public") // for Kobweb 12 | } 13 | 14 | group = "com.huanshankeji" 15 | version = projectVersion 16 | -------------------------------------------------------------------------------- /buildSrc/src/main/kotlin/lib-conventions.gradle.kts: -------------------------------------------------------------------------------- 1 | plugins { 2 | id("lib-conventions-without-publishing") 3 | id("com.huanshankeji.kotlin-multiplatform-sonatype-ossrh-publish-conventions") 4 | id("com.huanshankeji.team.dokka.github-dokka-convention") 5 | } 6 | -------------------------------------------------------------------------------- /compose-html-common/api/compose-html-common.klib.api: -------------------------------------------------------------------------------- 1 | // Klib ABI Dump 2 | // Targets: [js] 3 | // Rendering settings: 4 | // - Signature version: 2 5 | // - Show manifest properties: true 6 | // - Show declarations: true 7 | 8 | // Library unique name: 9 | open annotation class com.huanshankeji.compose.web/PreferringKobwebComposeLayoutApi : kotlin/Annotation { // com.huanshankeji.compose.web/PreferringKobwebComposeLayoutApi|null[0] 10 | constructor () // com.huanshankeji.compose.web/PreferringKobwebComposeLayoutApi.|(){}[0] 11 | } 12 | 13 | final enum class com.huanshankeji.compose.web.attributes/AutoCapitalize : kotlin/Enum { // com.huanshankeji.compose.web.attributes/AutoCapitalize|null[0] 14 | enum entry Characters // com.huanshankeji.compose.web.attributes/AutoCapitalize.Characters|null[0] 15 | enum entry None // com.huanshankeji.compose.web.attributes/AutoCapitalize.None|null[0] 16 | enum entry Sentences // com.huanshankeji.compose.web.attributes/AutoCapitalize.Sentences|null[0] 17 | enum entry Words // com.huanshankeji.compose.web.attributes/AutoCapitalize.Words|null[0] 18 | 19 | final val alternativeStrValue // com.huanshankeji.compose.web.attributes/AutoCapitalize.alternativeStrValue|{}alternativeStrValue[0] 20 | final fun (): kotlin/String? // com.huanshankeji.compose.web.attributes/AutoCapitalize.alternativeStrValue.|(){}[0] 21 | final val entries // com.huanshankeji.compose.web.attributes/AutoCapitalize.entries|#static{}entries[0] 22 | final fun (): kotlin.enums/EnumEntries // com.huanshankeji.compose.web.attributes/AutoCapitalize.entries.|#static(){}[0] 23 | final val strValue // com.huanshankeji.compose.web.attributes/AutoCapitalize.strValue|{}strValue[0] 24 | final fun (): kotlin/String // com.huanshankeji.compose.web.attributes/AutoCapitalize.strValue.|(){}[0] 25 | 26 | final fun valueOf(kotlin/String): com.huanshankeji.compose.web.attributes/AutoCapitalize // com.huanshankeji.compose.web.attributes/AutoCapitalize.valueOf|valueOf#static(kotlin.String){}[0] 27 | final fun values(): kotlin/Array // com.huanshankeji.compose.web.attributes/AutoCapitalize.values|values#static(){}[0] 28 | 29 | final object Companion { // com.huanshankeji.compose.web.attributes/AutoCapitalize.Companion|null[0] 30 | final val valueSet // com.huanshankeji.compose.web.attributes/AutoCapitalize.Companion.valueSet|{}valueSet[0] 31 | final fun (): kotlin.collections/Set // com.huanshankeji.compose.web.attributes/AutoCapitalize.Companion.valueSet.|(){}[0] 32 | } 33 | } 34 | 35 | final enum class com.huanshankeji.compose.web.attributes/EnterKeyHint : kotlin/Enum { // com.huanshankeji.compose.web.attributes/EnterKeyHint|null[0] 36 | enum entry Done // com.huanshankeji.compose.web.attributes/EnterKeyHint.Done|null[0] 37 | enum entry Enter // com.huanshankeji.compose.web.attributes/EnterKeyHint.Enter|null[0] 38 | enum entry Go // com.huanshankeji.compose.web.attributes/EnterKeyHint.Go|null[0] 39 | enum entry Next // com.huanshankeji.compose.web.attributes/EnterKeyHint.Next|null[0] 40 | enum entry Previous // com.huanshankeji.compose.web.attributes/EnterKeyHint.Previous|null[0] 41 | enum entry Search // com.huanshankeji.compose.web.attributes/EnterKeyHint.Search|null[0] 42 | enum entry Send // com.huanshankeji.compose.web.attributes/EnterKeyHint.Send|null[0] 43 | 44 | final val entries // com.huanshankeji.compose.web.attributes/EnterKeyHint.entries|#static{}entries[0] 45 | final fun (): kotlin.enums/EnumEntries // com.huanshankeji.compose.web.attributes/EnterKeyHint.entries.|#static(){}[0] 46 | final val strValue // com.huanshankeji.compose.web.attributes/EnterKeyHint.strValue|{}strValue[0] 47 | final fun (): kotlin/String // com.huanshankeji.compose.web.attributes/EnterKeyHint.strValue.|(){}[0] 48 | 49 | final fun valueOf(kotlin/String): com.huanshankeji.compose.web.attributes/EnterKeyHint // com.huanshankeji.compose.web.attributes/EnterKeyHint.valueOf|valueOf#static(kotlin.String){}[0] 50 | final fun values(): kotlin/Array // com.huanshankeji.compose.web.attributes/EnterKeyHint.values|values#static(){}[0] 51 | 52 | final object Companion { // com.huanshankeji.compose.web.attributes/EnterKeyHint.Companion|null[0] 53 | final val valueSet // com.huanshankeji.compose.web.attributes/EnterKeyHint.Companion.valueSet|{}valueSet[0] 54 | final fun (): kotlin.collections/Set // com.huanshankeji.compose.web.attributes/EnterKeyHint.Companion.valueSet.|(){}[0] 55 | } 56 | } 57 | 58 | abstract interface com.huanshankeji.compose.web.css/Visibility : org.jetbrains.compose.web.css/StylePropertyEnum { // com.huanshankeji.compose.web.css/Visibility|null[0] 59 | final object Companion { // com.huanshankeji.compose.web.css/Visibility.Companion|null[0] 60 | final val Collapse // com.huanshankeji.compose.web.css/Visibility.Companion.Collapse|{}Collapse[0] 61 | final inline fun (): com.huanshankeji.compose.web.css/Visibility // com.huanshankeji.compose.web.css/Visibility.Companion.Collapse.|(){}[0] 62 | final val Hidden // com.huanshankeji.compose.web.css/Visibility.Companion.Hidden|{}Hidden[0] 63 | final inline fun (): com.huanshankeji.compose.web.css/Visibility // com.huanshankeji.compose.web.css/Visibility.Companion.Hidden.|(){}[0] 64 | final val Visible // com.huanshankeji.compose.web.css/Visibility.Companion.Visible|{}Visible[0] 65 | final inline fun (): com.huanshankeji.compose.web.css/Visibility // com.huanshankeji.compose.web.css/Visibility.Companion.Visible.|(){}[0] 66 | } 67 | } 68 | 69 | final const val com.huanshankeji.compose.web.css/FIT_CONTENT // com.huanshankeji.compose.web.css/FIT_CONTENT|{}FIT_CONTENT[0] 70 | final fun (): kotlin/String // com.huanshankeji.compose.web.css/FIT_CONTENT.|(){}[0] 71 | final const val com.huanshankeji.compose.web/WITH_STYLES_DEPRECATED_MESSAGE // com.huanshankeji.compose.web/WITH_STYLES_DEPRECATED_MESSAGE|{}WITH_STYLES_DEPRECATED_MESSAGE[0] 72 | final fun (): kotlin/String // com.huanshankeji.compose.web/WITH_STYLES_DEPRECATED_MESSAGE.|(){}[0] 73 | 74 | final val com.huanshankeji.compose.web/DivComposable // com.huanshankeji.compose.web/DivComposable|{}DivComposable[0] 75 | final fun (): kotlin/Function4, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>?, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit> // com.huanshankeji.compose.web/DivComposable.|(){}[0] 76 | 77 | final var com.huanshankeji.compose.web.dom.ext/value // com.huanshankeji.compose.web.dom.ext/value|@org.w3c.dom.HTMLElement{}value[0] 78 | final fun (org.w3c.dom/HTMLElement).(): kotlin/String // com.huanshankeji.compose.web.dom.ext/value.|@org.w3c.dom.HTMLElement(){}[0] 79 | final fun (org.w3c.dom/HTMLElement).(kotlin/String) // com.huanshankeji.compose.web.dom.ext/value.|@org.w3c.dom.HTMLElement(kotlin.String){}[0] 80 | 81 | final fun (kotlin/Boolean).com.huanshankeji.compose.web.attributes/isFalseOrNull(): kotlin/Boolean? // com.huanshankeji.compose.web.attributes/isFalseOrNull|isFalseOrNull@kotlin.Boolean(){}[0] 82 | final fun (kotlin/Boolean).com.huanshankeji.compose.web.attributes/isTrueOrNull(): kotlin/Boolean? // com.huanshankeji.compose.web.attributes/isTrueOrNull|isTrueOrNull@kotlin.Boolean(){}[0] 83 | final fun (kotlin/Boolean).com.huanshankeji.compose.web.attributes/toOnOrOff(): kotlin/String // com.huanshankeji.compose.web.attributes/toOnOrOff|toOnOrOff@kotlin.Boolean(){}[0] 84 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/ariaLabel(kotlin/String): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes.ext/ariaLabel|ariaLabel@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String){}[0] 85 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/autoCapitalize(kotlin/String?): org.jetbrains.compose.web.attributes/AttrsScope? // com.huanshankeji.compose.web.attributes.ext/autoCapitalize|autoCapitalize@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 86 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/autoCapitalizeRequiringValid(kotlin/String) // com.huanshankeji.compose.web.attributes.ext/autoCapitalizeRequiringValid|autoCapitalizeRequiringValid@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String){}[0] 87 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/autoComplete(org.jetbrains.compose.web.attributes/AutoComplete?) // com.huanshankeji.compose.web.attributes.ext/autoComplete|autoComplete@org.jetbrains.compose.web.attributes.AttrsScope<*>(org.jetbrains.compose.web.attributes.AutoComplete?){}[0] 88 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/disabled(kotlin/Boolean?) // com.huanshankeji.compose.web.attributes.ext/disabled|disabled@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.Boolean?){}[0] 89 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/enterKeyHintIfValid(kotlin/String) // com.huanshankeji.compose.web.attributes.ext/enterKeyHintIfValid|enterKeyHintIfValid@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String){}[0] 90 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/form(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/form|form@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 91 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/href(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/href|href@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 92 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/label(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/label|label@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 93 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/max(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/max|max@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 94 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/maxLength(kotlin/Int?) // com.huanshankeji.compose.web.attributes.ext/maxLength|maxLength@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.Int?){}[0] 95 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/min(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/min|min@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 96 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/minLength(kotlin/Int?) // com.huanshankeji.compose.web.attributes.ext/minLength|minLength@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.Int?){}[0] 97 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/multiple(kotlin/Boolean?) // com.huanshankeji.compose.web.attributes.ext/multiple|multiple@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.Boolean?){}[0] 98 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/name(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/name|name@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 99 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/pattern(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/pattern|pattern@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 100 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/placeholder(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/placeholder|placeholder@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 101 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/readOnly(kotlin/Boolean?) // com.huanshankeji.compose.web.attributes.ext/readOnly|readOnly@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.Boolean?){}[0] 102 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/required(kotlin/Boolean?) // com.huanshankeji.compose.web.attributes.ext/required|required@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.Boolean?){}[0] 103 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/selected(kotlin/Boolean?) // com.huanshankeji.compose.web.attributes.ext/selected|selected@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.Boolean?){}[0] 104 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/step(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/step|step@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 105 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/target(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/target|target@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 106 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/type(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/type|type@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 107 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/type(org.jetbrains.compose.web.attributes/InputType<*>?) // com.huanshankeji.compose.web.attributes.ext/type|type@org.jetbrains.compose.web.attributes.AttrsScope<*>(org.jetbrains.compose.web.attributes.InputType<*>?){}[0] 108 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes.ext/value(kotlin/String?) // com.huanshankeji.compose.web.attributes.ext/value|value@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String?){}[0] 109 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/attr(kotlin/String, kotlin/Boolean = ...): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/attr|attr@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String;kotlin.Boolean){}[0] 110 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/attr(kotlin/String, kotlin/Int): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/attr|attr@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String;kotlin.Int){}[0] 111 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/attr(kotlin/String, kotlin/Number): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/attr|attr@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String;kotlin.Number){}[0] 112 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/attrIfNotNull(kotlin/String, kotlin/Boolean?) // com.huanshankeji.compose.web.attributes/attrIfNotNull|attrIfNotNull@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String;kotlin.Boolean?){}[0] 113 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/attrIfNotNull(kotlin/String, kotlin/Int?) // com.huanshankeji.compose.web.attributes/attrIfNotNull|attrIfNotNull@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String;kotlin.Int?){}[0] 114 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/attrIfNotNull(kotlin/String, kotlin/Number?) // com.huanshankeji.compose.web.attributes/attrIfNotNull|attrIfNotNull@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String;kotlin.Number?){}[0] 115 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/attrIfNotNull(kotlin/String, kotlin/String?) // com.huanshankeji.compose.web.attributes/attrIfNotNull|attrIfNotNull@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String;kotlin.String?){}[0] 116 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/autoCapitalize(com.huanshankeji.compose.web.attributes/AutoCapitalize): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/autoCapitalize|autoCapitalize@org.jetbrains.compose.web.attributes.AttrsScope<*>(com.huanshankeji.compose.web.attributes.AutoCapitalize){}[0] 117 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/autoCapitalize(kotlin/String): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/autoCapitalize|autoCapitalize@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String){}[0] 118 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/autocorrect(kotlin/Boolean): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/autocorrect|autocorrect@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.Boolean){}[0] 119 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/autocorrect(kotlin/String): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/autocorrect|autocorrect@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String){}[0] 120 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/booleanAttr(kotlin/String, kotlin/Boolean): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/booleanAttr|booleanAttr@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String;kotlin.Boolean){}[0] 121 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/enterKeyHint(com.huanshankeji.compose.web.attributes/EnterKeyHint): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/enterKeyHint|enterKeyHint@org.jetbrains.compose.web.attributes.AttrsScope<*>(com.huanshankeji.compose.web.attributes.EnterKeyHint){}[0] 122 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/enterKeyHint(kotlin/String): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/enterKeyHint|enterKeyHint@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String){}[0] 123 | final fun (org.jetbrains.compose.web.attributes/AttrsScope<*>).com.huanshankeji.compose.web.attributes/slot(kotlin/String): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.attributes/slot|slot@org.jetbrains.compose.web.attributes.AttrsScope<*>(kotlin.String){}[0] 124 | final fun (org.jetbrains.compose.web.css/StyleScope).com.huanshankeji.compose.web.css/height(kotlin/String) // com.huanshankeji.compose.web.css/height|height@org.jetbrains.compose.web.css.StyleScope(kotlin.String){}[0] 125 | final fun (org.jetbrains.compose.web.css/StyleScope).com.huanshankeji.compose.web.css/visibility(com.huanshankeji.compose.web.css/Visibility) // com.huanshankeji.compose.web.css/visibility|visibility@org.jetbrains.compose.web.css.StyleScope(com.huanshankeji.compose.web.css.Visibility){}[0] 126 | final fun (org.jetbrains.compose.web.css/StyleScope).com.huanshankeji.compose.web.css/width(kotlin/String) // com.huanshankeji.compose.web.css/width|width@org.jetbrains.compose.web.css.StyleScope(kotlin.String){}[0] 127 | final fun <#A: org.w3c.dom/Element> (kotlin/Function1, kotlin/Unit>).com.huanshankeji.compose.web.attributes/plus(kotlin/Function1, kotlin/Unit>?): kotlin/Function1, kotlin/Unit> // com.huanshankeji.compose.web.attributes/plus|plus@kotlin.Function1,kotlin.Unit>(kotlin.Function1,kotlin.Unit>?){0§}[0] 128 | final fun <#A: org.w3c.dom/Element> (kotlin/Function1?).com.huanshankeji.compose.web.css/wrapInAttrs(): kotlin/Function1, kotlin/Unit>? // com.huanshankeji.compose.web.css/wrapInAttrs|wrapInAttrs@kotlin.Function1?(){0§}[0] 129 | final fun <#A: org.w3c.dom/HTMLElement> (org.jetbrains.compose.web.attributes/AttrsScope<#A>).com.huanshankeji.compose.web.attributes.ext/onInput(kotlin/Function1, kotlin/Unit>) // com.huanshankeji.compose.web.attributes.ext/onInput|onInput@org.jetbrains.compose.web.attributes.AttrsScope<0:0>(kotlin.Function1,kotlin.Unit>){0§}[0] 130 | final fun com.huanshankeji.compose.web/Centered(kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/Centered|Centered(kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 131 | final fun com.huanshankeji.compose.web/CenteredInViewport(kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/CenteredInViewport|CenteredInViewport(kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 132 | final fun com.huanshankeji.compose.web/Column(kotlin/Function1, kotlin/Unit>?, kotlin/Boolean, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/Column|Column(kotlin.Function1,kotlin.Unit>?;kotlin.Boolean;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 133 | final fun com.huanshankeji.compose.web/ColumnS(kotlin/Function1?, kotlin/Boolean, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/ColumnS|ColumnS(kotlin.Function1?;kotlin.Boolean;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 134 | final fun com.huanshankeji.compose.web/ColumnWithGaps(kotlin/Function1, kotlin/Unit>?, org.jetbrains.compose.web.css/CSSNumericValue, kotlin/Boolean, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/ColumnWithGaps|ColumnWithGaps(kotlin.Function1,kotlin.Unit>?;org.jetbrains.compose.web.css.CSSNumericValue;kotlin.Boolean;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 135 | final fun com.huanshankeji.compose.web/ColumnWithSpaceBetween(kotlin/Function1, kotlin/Unit>?, kotlin/Boolean, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/ColumnWithSpaceBetween|ColumnWithSpaceBetween(kotlin.Function1,kotlin.Unit>?;kotlin.Boolean;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 136 | final fun com.huanshankeji.compose.web/Flexbox(kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/Flexbox|Flexbox(kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 137 | final fun com.huanshankeji.compose.web/FlexboxS(kotlin/Function1?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/FlexboxS|FlexboxS(kotlin.Function1?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 138 | final fun com.huanshankeji.compose.web/FrGrid(kotlin/Int, org.jetbrains.compose.web.css/CSSNumericValue, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int) // com.huanshankeji.compose.web/FrGrid|FrGrid(kotlin.Int;org.jetbrains.compose.web.css.CSSNumericValue;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int){}[0] 139 | final fun com.huanshankeji.compose.web/Row(kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/Row|Row(kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 140 | final fun com.huanshankeji.compose.web/RowS(kotlin/Function1?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/RowS|RowS(kotlin.Function1?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 141 | final fun com.huanshankeji.compose.web/RowWithGaps(kotlin/Function1, kotlin/Unit>?, org.jetbrains.compose.web.css/CSSNumericValue, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/RowWithGaps|RowWithGaps(kotlin.Function1,kotlin.Unit>?;org.jetbrains.compose.web.css.CSSNumericValue;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 142 | final fun com.huanshankeji.compose.web/RowWithSpaceBetween(kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web/RowWithSpaceBetween|RowWithSpaceBetween(kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 143 | final fun com.huanshankeji.compose.web/Spacer(kotlin/Int, androidx.compose.runtime/Composer?, kotlin/Int) // com.huanshankeji.compose.web/Spacer|Spacer(kotlin.Int;androidx.compose.runtime.Composer?;kotlin.Int){}[0] 144 | final inline fun <#A: org.w3c.dom/Element> com.huanshankeji.compose.web.attributes/attrs(noinline kotlin/Function1, kotlin/Unit>): kotlin/Function1, kotlin/Unit> // com.huanshankeji.compose.web.attributes/attrs|attrs(kotlin.Function1,kotlin.Unit>){0§}[0] 145 | final inline fun com.huanshankeji.compose.web.css/Visibility(kotlin/String): com.huanshankeji.compose.web.css/Visibility // com.huanshankeji.compose.web.css/Visibility|Visibility(kotlin.String){}[0] 146 | -------------------------------------------------------------------------------- /compose-html-common/build.gradle.kts: -------------------------------------------------------------------------------- 1 | import com.huanshankeji.team.`Shreck Ye` 2 | import com.huanshankeji.team.pomForTeamDefaultOpenSource 3 | 4 | plugins { 5 | `lib-conventions` 6 | } 7 | 8 | kotlin { 9 | sourceSets { 10 | val jsMain by getting { 11 | dependencies { 12 | implementation(compose.html.core) 13 | implementation(compose.runtime) 14 | api("com.varabyte.kobweb:compose-html-ext:${DependencyVersions.kobweb}") 15 | //implementation(commonDependencies.kotlinx.coroutines.core()) 16 | } 17 | } 18 | } 19 | } 20 | 21 | publishing.publications.withType { 22 | pomForTeamDefaultOpenSource( 23 | project, 24 | "Huanshankeji Compose HTML common", 25 | "Huanshankeji's common code for Compose HTML" 26 | ) { 27 | `Shreck Ye`() 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/Layouts.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.attributes.attrs 5 | import com.huanshankeji.compose.web.attributes.plus 6 | import com.huanshankeji.compose.web.css.Styles 7 | import com.huanshankeji.compose.web.css.wrapInAttrs 8 | import com.varabyte.kobweb.compose.css.Width 9 | import com.varabyte.kobweb.compose.css.width 10 | import org.jetbrains.compose.web.css.* 11 | import org.jetbrains.compose.web.dom.AttrBuilderContext 12 | import org.jetbrains.compose.web.dom.ContentBuilder 13 | import org.jetbrains.compose.web.dom.Div 14 | import org.w3c.dom.HTMLDivElement 15 | 16 | // try to follow names in Android Jetpack Compose 17 | 18 | // TODO: remove these deprecated functions 19 | 20 | const val WITH_STYLES_DEPRECATED_MESSAGE = "The functions with `withStyles` suffixes are deprecated." 21 | 22 | @Composable 23 | fun Flexbox( 24 | attrs: AttrBuilderContext? = null, 25 | content: ContentBuilder 26 | ) = 27 | Div(attrs { 28 | style { 29 | display(DisplayStyle.Flex) 30 | } 31 | } + attrs, content) 32 | 33 | @PreferringKobwebComposeLayoutApi 34 | @Deprecated(WITH_STYLES_DEPRECATED_MESSAGE) 35 | @Composable 36 | fun FlexboxS(styles: Styles? = null, content: ContentBuilder) = 37 | Flexbox(styles.wrapInAttrs(), content) 38 | 39 | @PreferringKobwebComposeLayoutApi 40 | @Composable 41 | fun Column( 42 | attrs: AttrBuilderContext? = null, 43 | fitContent: Boolean = true, 44 | content: ContentBuilder 45 | ) = 46 | Flexbox(attrs { 47 | style { 48 | flexDirection(FlexDirection.Column) 49 | if (fitContent) width(Width.FitContent) 50 | } 51 | } + attrs, content) 52 | 53 | @PreferringKobwebComposeLayoutApi 54 | @Deprecated(WITH_STYLES_DEPRECATED_MESSAGE) 55 | @Composable 56 | fun ColumnS(styles: Styles? = null, fitContent: Boolean = true, content: ContentBuilder) = 57 | Column(styles.wrapInAttrs(), fitContent, content) 58 | 59 | @PreferringKobwebComposeLayoutApi 60 | @Composable 61 | fun ColumnWithSpaceBetween( 62 | attrs: AttrBuilderContext? = null, 63 | fitContent: Boolean = true, 64 | content: ContentBuilder 65 | ) = 66 | Column(attrs { 67 | style { 68 | justifyContent(JustifyContent.SpaceBetween) 69 | } 70 | } + attrs, fitContent, content) 71 | 72 | 73 | @PreferringKobwebComposeLayoutApi 74 | @Composable 75 | fun Row( 76 | attrs: AttrBuilderContext? = null, 77 | content: ContentBuilder 78 | ) = 79 | Flexbox(attrs { 80 | style { 81 | flexDirection(FlexDirection.Row) 82 | } 83 | } + attrs, content) 84 | 85 | @PreferringKobwebComposeLayoutApi 86 | @Deprecated(WITH_STYLES_DEPRECATED_MESSAGE) 87 | @Composable 88 | fun RowS( 89 | styles: Styles? = null, 90 | content: ContentBuilder 91 | ) = 92 | Row(styles.wrapInAttrs(), content) 93 | 94 | @PreferringKobwebComposeLayoutApi 95 | @Composable 96 | fun RowWithSpaceBetween( 97 | attrs: AttrBuilderContext? = null, 98 | content: ContentBuilder 99 | ) = 100 | Row(attrs { 101 | style { 102 | justifyContent(JustifyContent.SpaceBetween) 103 | } 104 | } + attrs, content) 105 | 106 | @PreferringKobwebComposeLayoutApi 107 | @Composable 108 | fun ColumnWithGaps( 109 | attrs: AttrBuilderContext? = null, 110 | gap: CSSNumeric, 111 | fitContent: Boolean = true, 112 | content: ContentBuilder 113 | ) = 114 | Column(attrs { 115 | style { 116 | gap(gap) 117 | } 118 | } + attrs, fitContent, content) 119 | 120 | @PreferringKobwebComposeLayoutApi 121 | @Composable 122 | fun RowWithGaps( 123 | attrs: AttrBuilderContext? = null, 124 | gap: CSSNumeric, 125 | content: ContentBuilder 126 | ) = 127 | Row(attrs { 128 | style { 129 | gap(gap) 130 | } 131 | } + attrs, content) 132 | 133 | @Composable 134 | fun Centered( 135 | attrs: AttrBuilderContext? = null, 136 | content: ContentBuilder 137 | ) = 138 | Flexbox(attrs { 139 | style { 140 | alignItems(AlignItems.Center) 141 | justifyContent(JustifyContent.Center) 142 | } 143 | } + attrs, content) 144 | 145 | @Composable 146 | fun CenteredInViewport( 147 | attrs: AttrBuilderContext? = null, 148 | content: ContentBuilder 149 | ) = 150 | Centered(attrs { 151 | style { 152 | minHeight(100.vh) 153 | } 154 | } + attrs, content) 155 | 156 | @Composable 157 | fun FrGrid( 158 | numColumns: Int, 159 | gap: CSSNumeric, 160 | content: HTMLElementContent 161 | ) = 162 | Div({ 163 | style { 164 | display(DisplayStyle.Grid) 165 | gridTemplateColumns("repeat($numColumns, 1fr)") 166 | gap(gap) 167 | } 168 | }, content) 169 | 170 | @PreferringKobwebComposeLayoutApi 171 | @Deprecated("This API is not implemented yet.") 172 | @Composable 173 | fun Spacer(numPxs: Int) = 174 | TODO() as Unit 175 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/PreferringKobwebComposeLayoutApi.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web 2 | 3 | @RequiresOptIn( 4 | "You are recommend to use the similar layout APIs in Kobweb Compose. See \"https://github.com/varabyte/kobweb/tree/main/frontend/kobweb-compose/src/jsMain/kotlin/com/varabyte/kobweb/compose/foundation/layout\".", 5 | RequiresOptIn.Level.WARNING 6 | ) 7 | @Retention(AnnotationRetention.BINARY) 8 | @Target(AnnotationTarget.FUNCTION) 9 | annotation class PreferringKobwebComposeLayoutApi -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/Types.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web 2 | 3 | import androidx.compose.runtime.Composable 4 | import org.jetbrains.compose.web.dom.AttrBuilderContext 5 | import org.jetbrains.compose.web.dom.ContentBuilder 6 | import org.jetbrains.compose.web.dom.Div 7 | import org.jetbrains.compose.web.dom.ElementScope 8 | import org.w3c.dom.HTMLDivElement 9 | import org.w3c.dom.HTMLElement 10 | 11 | typealias ElementComposable = @Composable ( 12 | attrs: AttrBuilderContext?, 13 | content: ContentBuilder? 14 | ) -> Unit 15 | 16 | typealias DivElementComposable = ElementComposable 17 | 18 | // `::Div` cannot be used directly because "Function References of @Composable functions are not currently supported" 19 | val DivComposable: ElementComposable = { attrs, content -> Div(attrs, content) } 20 | 21 | typealias HTMLElementContent = (@Composable ElementScope.() -> Unit)? 22 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/attributes/AttrBuilderContext.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.attributes 2 | 3 | import org.jetbrains.compose.web.dom.AttrBuilderContext 4 | import org.w3c.dom.Element 5 | 6 | operator fun AttrBuilderContext.plus(other: AttrBuilderContext?): AttrBuilderContext = 7 | if (other === null) this 8 | else { 9 | { 10 | this@plus() 11 | other() 12 | } 13 | } 14 | 15 | /** A helper function to create [AttrBuilderContext]s where type inference doesn't work */ 16 | @Suppress("NOTHING_TO_INLINE") 17 | inline fun attrs(noinline attrs: AttrBuilderContext) = 18 | attrs 19 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/attributes/AttrConversion.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.attributes 2 | 3 | // consider moving to a "web-common" or "html-common" module 4 | 5 | fun Boolean.isTrueOrNull(): Boolean? = 6 | if (this) true else null 7 | 8 | fun Boolean.isFalseOrNull(): Boolean? = 9 | if (this) null else false 10 | 11 | fun Boolean.toOnOrOff(): String = 12 | if (this) "on" else "off" 13 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/attributes/Attrs.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.attributes 2 | 3 | import org.jetbrains.compose.web.attributes.AttrsScope 4 | 5 | /** 6 | * Adds an attribute that is made present by its key aka [attr]. 7 | * @see AttrsScope.attr 8 | */ 9 | fun AttrsScope<*>.attr(attr: String, value: Boolean = true) = 10 | attr(attr, value.toString()) 11 | 12 | /** 13 | * [Int] attributes are used in Compose HTML. See [org.jetbrains.compose.web.attributes.maxLength] for example. 14 | */ 15 | fun AttrsScope<*>.attr(attr: String, value: Int) = 16 | attr(attr, value.toString()) 17 | 18 | fun AttrsScope<*>.attr(attr: String, value: Number) = 19 | attr(attr, value.toString()) 20 | 21 | /** 22 | * Adds an attribute that has an explicit [Boolean] value unlike [attr]. 23 | */ 24 | fun AttrsScope<*>.booleanAttr(attr: String, value: Boolean) = 25 | attr(attr, value.toString()) 26 | 27 | 28 | fun AttrsScope<*>.attrIfNotNull(attr: String, value: String?) { 29 | value?.let { attr(attr, it) } 30 | } 31 | 32 | fun AttrsScope<*>.attrIfNotNull(attr: String, value: Boolean?) { 33 | value?.let { attr(attr, it) } 34 | } 35 | 36 | fun AttrsScope<*>.attrIfNotNull(attr: String, value: Int?) { 37 | value?.let { attr(attr, it) } 38 | } 39 | 40 | fun AttrsScope<*>.attrIfNotNull(attr: String, value: Number?) { 41 | value?.let { attr(attr, it) } 42 | } 43 | 44 | 45 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot 46 | fun AttrsScope<*>.slot(value: String) = 47 | attr("slot", value) 48 | 49 | 50 | enum class AutoCapitalize(val strValue: String, val alternativeStrValue: String? = null) { 51 | None("none", "off"), Sentences("sentences", "on"), Words("words"), Characters("characters"); 52 | 53 | companion object { 54 | val valueSet = entries.asSequence().map { it.strValue }.toSet() 55 | } 56 | } 57 | 58 | // This is actually a global attribute 59 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize 60 | fun AttrsScope<*>.autoCapitalize(value: String) = 61 | attr("autocapitalize", value) 62 | 63 | fun AttrsScope<*>.autoCapitalize(value: AutoCapitalize) = 64 | autoCapitalize(value.strValue) 65 | 66 | 67 | // Safari only 68 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-autocorrect 69 | fun AttrsScope<*>.autocorrect(value: String) = 70 | attr("autocorrect", value) 71 | 72 | fun AttrsScope<*>.autocorrect(onOrOff: Boolean) = 73 | attr("autocorrect", onOrOff.toOnOrOff()) 74 | 75 | 76 | enum class EnterKeyHint(val strValue: String) { 77 | Enter("enter"), Done("done"), Go("go"), Next("next"), Previous("previous"), Search("search"), Send("send"); 78 | 79 | companion object { 80 | val valueSet = entries.map { it.strValue }.toSet() 81 | } 82 | } 83 | 84 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint 85 | fun AttrsScope<*>.enterKeyHint(value: String) = 86 | attr("enterkeyhint", value) 87 | 88 | fun AttrsScope<*>.enterKeyHint(value: EnterKeyHint) = 89 | enterKeyHint(value.strValue) 90 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/attributes/Types.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.attributes 2 | 3 | import org.jetbrains.compose.web.attributes.AttrsScope 4 | 5 | typealias Attrs = AttrsScope.() -> Unit 6 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/attributes/ext/Attrs.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.attributes.ext 2 | 3 | import com.huanshankeji.compose.web.attributes.AutoCapitalize 4 | import com.huanshankeji.compose.web.attributes.EnterKeyHint 5 | import com.huanshankeji.compose.web.attributes.attrIfNotNull 6 | import com.huanshankeji.compose.web.attributes.autoCapitalize 7 | import com.huanshankeji.compose.web.attributes.enterKeyHint 8 | import org.jetbrains.compose.web.attributes.AttrsScope 9 | import org.jetbrains.compose.web.attributes.AutoComplete 10 | import org.jetbrains.compose.web.attributes.InputType 11 | 12 | /* 13 | Attributes in the `ext` package are one of 2 kinds: 14 | 1. Those for `HTMLElement`s which don't implement the interfaces (such as `HTMLInputElement`) of the elements they behave like, 15 | such as the `HTMLElement`s of those components in Material Web. 16 | These attributes should not be universally available on most elements. 17 | 1. Those taking nullable values. 18 | 19 | Also consider moving to a `compose-html-material-common` module and depend on them with `implementation`. 20 | Consider reordering them. 21 | */ 22 | 23 | 24 | // https://www.w3schools.com/accessibility/accessibility_labels.php 25 | // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label 26 | fun AttrsScope<*>.ariaLabel(value: String) = 27 | attr("aria-label", value) 28 | 29 | 30 | // https://www.w3schools.com/tags/att_disabled.asp 31 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled 32 | fun AttrsScope<*>.disabled(value: Boolean?) = 33 | attrIfNotNull("disabled", value) 34 | 35 | // https://www.w3schools.com/tags/att_href.asp 36 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href 37 | fun AttrsScope<*>.href(value: String?) = 38 | attrIfNotNull("href", value) 39 | 40 | // https://www.w3schools.com/tags/att_target.asp 41 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target 42 | fun AttrsScope<*>.target(value: String?) = 43 | attrIfNotNull("target", value) 44 | 45 | 46 | // https://www.w3schools.com/tags/att_input_type.asp 47 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type 48 | fun AttrsScope<*>.type(value: String?) = 49 | attrIfNotNull("type", value) 50 | 51 | // https://www.w3schools.com/tags/att_value.asp 52 | fun AttrsScope<*>.value(value: String?) = 53 | attrIfNotNull("value", value) 54 | 55 | 56 | // https://www.w3schools.com/tags/att_name.asp 57 | fun AttrsScope<*>.name(value: String?) = 58 | attrIfNotNull("name", value) 59 | 60 | 61 | // https://www.w3schools.com/tags/att_form.asp 62 | fun AttrsScope<*>.form(value: String?) = 63 | attrIfNotNull("form", value) 64 | 65 | // https://www.w3schools.com/tags/att_required.asp 66 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required 67 | fun AttrsScope<*>.required(value: Boolean?) = 68 | attrIfNotNull("required", value) 69 | 70 | // https://www.geeksforgeeks.org/html-label-attribute/ 71 | // https://www.w3schools.com/tags/att_label.asp 72 | fun AttrsScope<*>.label(value: String?) = 73 | attrIfNotNull("label", value) 74 | 75 | // copied and adapted from `Attrs.kt` in `org.jetbrains.compose.web.attributes` 76 | 77 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max 78 | fun AttrsScope<*>.max(value: String?) = 79 | attrIfNotNull("max", value) 80 | 81 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength 82 | fun AttrsScope<*>.maxLength(value: Int?) = 83 | attrIfNotNull("maxlength", value) 84 | 85 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min 86 | fun AttrsScope<*>.min(value: String?) = 87 | attrIfNotNull("min", value) 88 | 89 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength 90 | fun AttrsScope<*>.minLength(value: Int?) = 91 | attrIfNotNull("minlength", value) 92 | 93 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern 94 | fun AttrsScope<*>.pattern(value: String?) = 95 | attrIfNotNull("pattern", value) 96 | 97 | // https://www.w3schools.com/tags/att_input_placeholder.asp 98 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder 99 | fun AttrsScope<*>.placeholder(value: String?) = 100 | attrIfNotNull("placeholder", value) 101 | 102 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly 103 | fun AttrsScope<*>.readOnly(value: Boolean?) = 104 | attrIfNotNull("readonly", value) 105 | 106 | 107 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple 108 | fun AttrsScope<*>.multiple(value: Boolean?) = 109 | attrIfNotNull("multiple", value) 110 | 111 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step 112 | fun AttrsScope<*>.step(value: String?) = 113 | attrIfNotNull("step", value) 114 | 115 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types 116 | fun AttrsScope<*>.type(value: InputType<*>?) { 117 | value?.let { attr("type", it.typeStr) } 118 | } 119 | 120 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete 121 | fun AttrsScope<*>.autoComplete(value: AutoComplete?) { 122 | value?.let { attr("autocomplete", it.unsafeCast()) } 123 | } 124 | 125 | 126 | // This is actually a global attribute 127 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize 128 | fun AttrsScope<*>.autoCapitalize(value: String?) = 129 | value?.let { this@autoCapitalize.autoCapitalize(value) } 130 | 131 | fun AttrsScope<*>.autoCapitalizeRequiringValid(value: String) { 132 | require(value in AutoCapitalize.valueSet) 133 | autoCapitalize(value) 134 | } 135 | 136 | 137 | fun AttrsScope<*>.enterKeyHintIfValid(value: String) { 138 | if (value in EnterKeyHint.valueSet) enterKeyHint(value) 139 | } 140 | 141 | 142 | // https://www.w3schools.com/tags/att_selected.asp 143 | fun AttrsScope<*>.selected(value: Boolean?) = 144 | attrIfNotNull("selected", value) 145 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/attributes/ext/EventAttrs.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.attributes.ext 2 | 3 | import androidx.compose.web.events.SyntheticEvent 4 | import org.jetbrains.compose.web.attributes.AttrsScope 5 | import org.jetbrains.compose.web.attributes.EventsListenerScope 6 | import org.w3c.dom.HTMLElement 7 | 8 | /** 9 | * @see com.huanshankeji.compose.web.dom.ext.value 10 | */ 11 | //fun EventsListenerScope.onInput( 12 | fun AttrsScope.onInput( 13 | listener: (SyntheticEvent) -> Unit 14 | ) = 15 | addEventListener(EventsListenerScope.INPUT, listener) 16 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/css/CSS.kt: -------------------------------------------------------------------------------- 1 | @file:Suppress("NOTHING_TO_INLINE") 2 | 3 | package com.huanshankeji.compose.web.css 4 | 5 | import org.jetbrains.compose.web.css.StylePropertyEnum 6 | import org.jetbrains.compose.web.css.StyleScope 7 | 8 | fun StyleScope.visibility(visibility: Visibility) = 9 | property("visibility", visibility) 10 | 11 | interface Visibility : StylePropertyEnum { 12 | companion object { 13 | inline val Visible get() = Visibility("visible") 14 | inline val Hidden get() = Visibility("hidden") 15 | inline val Collapse get() = Visibility("collapse") 16 | } 17 | } 18 | 19 | inline fun Visibility(value: String) = value.unsafeCast() 20 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/css/StyleScope.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.css 2 | 3 | import org.jetbrains.compose.web.css.StyleScope 4 | 5 | fun StyleScope.width(value: String) = 6 | property("width", value) 7 | 8 | fun StyleScope.height(value: String) = 9 | property("height", value) 10 | 11 | const val FIT_CONTENT = "fit-content" 12 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/css/Styles.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.css 2 | 3 | import org.jetbrains.compose.web.css.StyleScope 4 | import org.jetbrains.compose.web.dom.AttrBuilderContext 5 | import org.w3c.dom.Element 6 | 7 | typealias Styles = StyleScope.() -> Unit 8 | 9 | fun Styles?.wrapInAttrs(): AttrBuilderContext? = 10 | this?.let { { style { it() } } } 11 | -------------------------------------------------------------------------------- /compose-html-common/src/jsMain/kotlin/com/huanshankeji/compose/web/dom/ext/dom.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.dom.ext 2 | 3 | import org.w3c.dom.HTMLElement 4 | 5 | /** 6 | * @see com.huanshankeji.compose.web.attributes.ext.onInput 7 | */ 8 | var HTMLElement.value: String 9 | get() = asDynamic().value as String 10 | set(value) { 11 | asDynamic().value = value 12 | } 13 | -------------------------------------------------------------------------------- /compose-html-material-legacy/api/compose-html-material-legacy.klib.api: -------------------------------------------------------------------------------- 1 | // Klib ABI Dump 2 | // Targets: [js] 3 | // Rendering settings: 4 | // - Signature version: 2 5 | // - Show manifest properties: true 6 | // - Show declarations: true 7 | 8 | // Library unique name: 9 | final class com.huanshankeji.compose.web.material/MwcButtonAttrsScopeBuilder : com.huanshankeji.compose.web.material/MwcSimpleComponentAttrsScopeBuilder { // com.huanshankeji.compose.web.material/MwcButtonAttrsScopeBuilder|null[0] 10 | constructor (org.jetbrains.compose.web.attributes/AttrsScope) // com.huanshankeji.compose.web.material/MwcButtonAttrsScopeBuilder.|(org.jetbrains.compose.web.attributes.AttrsScope){}[0] 11 | 12 | final fun dense(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcButtonAttrsScopeBuilder.dense|dense(kotlin.Boolean){}[0] 13 | final fun disabled(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcButtonAttrsScopeBuilder.disabled|disabled(kotlin.Boolean){}[0] 14 | final fun outlined(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcButtonAttrsScopeBuilder.outlined|outlined(kotlin.Boolean){}[0] 15 | final fun raised(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcButtonAttrsScopeBuilder.raised|raised(kotlin.Boolean){}[0] 16 | final fun unelevated(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcButtonAttrsScopeBuilder.unelevated|unelevated(kotlin.Boolean){}[0] 17 | } 18 | 19 | final class com.huanshankeji.compose.web.material/MwcCircularProgressAttrsScopeBuilder : com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder { // com.huanshankeji.compose.web.material/MwcCircularProgressAttrsScopeBuilder|null[0] 20 | constructor (org.jetbrains.compose.web.attributes/AttrsScope) // com.huanshankeji.compose.web.material/MwcCircularProgressAttrsScopeBuilder.|(org.jetbrains.compose.web.attributes.AttrsScope){}[0] 21 | 22 | final fun indeterminate(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcCircularProgressAttrsScopeBuilder.indeterminate|indeterminate(kotlin.Boolean){}[0] 23 | final fun progress(org.jetbrains.compose.web.css/CSSNumericValue) // com.huanshankeji.compose.web.material/MwcCircularProgressAttrsScopeBuilder.progress|progress(org.jetbrains.compose.web.css.CSSNumericValue){}[0] 24 | } 25 | 26 | final class com.huanshankeji.compose.web.material/MwcIconButtonAttrsScopeBuilder : com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder { // com.huanshankeji.compose.web.material/MwcIconButtonAttrsScopeBuilder|null[0] 27 | constructor (org.jetbrains.compose.web.attributes/AttrsScope) // com.huanshankeji.compose.web.material/MwcIconButtonAttrsScopeBuilder.|(org.jetbrains.compose.web.attributes.AttrsScope){}[0] 28 | 29 | final fun ariaLabel(kotlin/String) // com.huanshankeji.compose.web.material/MwcIconButtonAttrsScopeBuilder.ariaLabel|ariaLabel(kotlin.String){}[0] 30 | final fun disabled(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcIconButtonAttrsScopeBuilder.disabled|disabled(kotlin.Boolean){}[0] 31 | final fun icon(kotlin/String) // com.huanshankeji.compose.web.material/MwcIconButtonAttrsScopeBuilder.icon|icon(kotlin.String){}[0] 32 | } 33 | 34 | final class com.huanshankeji.compose.web.material/MwcListItemAttrsScopeBuilder : com.huanshankeji.compose.web.material/MwcSimpleComponentAttrsScopeBuilder { // com.huanshankeji.compose.web.material/MwcListItemAttrsScopeBuilder|null[0] 35 | constructor (org.jetbrains.compose.web.attributes/AttrsScope) // com.huanshankeji.compose.web.material/MwcListItemAttrsScopeBuilder.|(org.jetbrains.compose.web.attributes.AttrsScope){}[0] 36 | 37 | final fun graphicEqIcon() // com.huanshankeji.compose.web.material/MwcListItemAttrsScopeBuilder.graphicEqIcon|graphicEqIcon(){}[0] 38 | final fun selected(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcListItemAttrsScopeBuilder.selected|selected(kotlin.Boolean){}[0] 39 | final fun value(kotlin/String) // com.huanshankeji.compose.web.material/MwcListItemAttrsScopeBuilder.value|value(kotlin.String){}[0] 40 | } 41 | 42 | final class com.huanshankeji.compose.web.material/MwcSelectAttrsScopeBuilder : com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder { // com.huanshankeji.compose.web.material/MwcSelectAttrsScopeBuilder|null[0] 43 | constructor (org.jetbrains.compose.web.attributes/AttrsScope) // com.huanshankeji.compose.web.material/MwcSelectAttrsScopeBuilder.|(org.jetbrains.compose.web.attributes.AttrsScope){}[0] 44 | 45 | final fun onSelected(kotlin/Function1, kotlin/Unit>) // com.huanshankeji.compose.web.material/MwcSelectAttrsScopeBuilder.onSelected|onSelected(kotlin.Function1,kotlin.Unit>){}[0] 46 | final fun onSelectedWithIndex(kotlin/Function1) // com.huanshankeji.compose.web.material/MwcSelectAttrsScopeBuilder.onSelectedWithIndex|onSelectedWithIndex(kotlin.Function1){}[0] 47 | } 48 | 49 | final class com.huanshankeji.compose.web.material/MwcSnackbarAttrsScopeBuilder : com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder { // com.huanshankeji.compose.web.material/MwcSnackbarAttrsScopeBuilder|null[0] 50 | constructor (org.jetbrains.compose.web.attributes/AttrsScope) // com.huanshankeji.compose.web.material/MwcSnackbarAttrsScopeBuilder.|(org.jetbrains.compose.web.attributes.AttrsScope){}[0] 51 | 52 | final fun labelText(kotlin/String) // com.huanshankeji.compose.web.material/MwcSnackbarAttrsScopeBuilder.labelText|labelText(kotlin.String){}[0] 53 | final fun open(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcSnackbarAttrsScopeBuilder.open|open(kotlin.Boolean){}[0] 54 | final fun timeoutMs(kotlin/Number) // com.huanshankeji.compose.web.material/MwcSnackbarAttrsScopeBuilder.timeoutMs|timeoutMs(kotlin.Number){}[0] 55 | } 56 | 57 | final class com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate : org.jetbrains.compose.web.dom/ElementScope { // com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate|null[0] 58 | constructor (org.jetbrains.compose.web.dom/ElementScope) // com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate.|(org.jetbrains.compose.web.dom.ElementScope){}[0] 59 | 60 | final val scopeElement // com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate.scopeElement|@androidx.compose.runtime.DisposableEffectScope{}scopeElement[0] 61 | final fun (androidx.compose.runtime/DisposableEffectScope).(): org.w3c.dom/HTMLElement // com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate.scopeElement.|@androidx.compose.runtime.DisposableEffectScope(){}[0] 62 | 63 | final fun (com.huanshankeji.compose.web.material/MwcButtonAttrsScopeBuilder).slot(kotlin/String) // com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate.slot|slot@com.huanshankeji.compose.web.material.MwcButtonAttrsScopeBuilder(kotlin.String){}[0] 64 | final fun (com.huanshankeji.compose.web.material/MwcIconButtonAttrsScopeBuilder).slot(kotlin/String) // com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate.slot|slot@com.huanshankeji.compose.web.material.MwcIconButtonAttrsScopeBuilder(kotlin.String){}[0] 65 | final fun DisposableRefEffect(kotlin/Any?, kotlin/Function2, androidx.compose.runtime/Composer?, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate.DisposableRefEffect|DisposableRefEffect(kotlin.Any?;kotlin.Function2;androidx.compose.runtime.Composer?;kotlin.Int){}[0] 66 | final fun DisposableRefEffect(kotlin/Function2, androidx.compose.runtime/Composer?, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate.DisposableRefEffect|DisposableRefEffect(kotlin.Function2;androidx.compose.runtime.Composer?;kotlin.Int){}[0] 67 | final fun DomSideEffect(kotlin/Any?, kotlin/Function2, androidx.compose.runtime/Composer?, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate.DomSideEffect|DomSideEffect(kotlin.Any?;kotlin.Function2;androidx.compose.runtime.Composer?;kotlin.Int){}[0] 68 | final fun DomSideEffect(kotlin/Function2, androidx.compose.runtime/Composer?, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSnackbarElementScopeDelegate.DomSideEffect|DomSideEffect(kotlin.Function2;androidx.compose.runtime.Composer?;kotlin.Int){}[0] 69 | } 70 | 71 | final class com.huanshankeji.compose.web.material/MwcTextfieldAttrsScopeBuilder : com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder { // com.huanshankeji.compose.web.material/MwcTextfieldAttrsScopeBuilder|null[0] 72 | constructor (org.jetbrains.compose.web.attributes/AttrsScope) // com.huanshankeji.compose.web.material/MwcTextfieldAttrsScopeBuilder.|(org.jetbrains.compose.web.attributes.AttrsScope){}[0] 73 | 74 | final fun maxLength(kotlin/Int) // com.huanshankeji.compose.web.material/MwcTextfieldAttrsScopeBuilder.maxLength|maxLength(kotlin.Int){}[0] 75 | final fun type(kotlin/String) // com.huanshankeji.compose.web.material/MwcTextfieldAttrsScopeBuilder.type|type(kotlin.String){}[0] 76 | } 77 | 78 | final class com.huanshankeji.compose.web.material/SnackbarData { // com.huanshankeji.compose.web.material/SnackbarData|null[0] 79 | constructor (kotlin/String, kotlinx.coroutines/CancellableContinuation) // com.huanshankeji.compose.web.material/SnackbarData.|(kotlin.String;kotlinx.coroutines.CancellableContinuation){}[0] 80 | 81 | final val continuation // com.huanshankeji.compose.web.material/SnackbarData.continuation|{}continuation[0] 82 | final fun (): kotlinx.coroutines/CancellableContinuation // com.huanshankeji.compose.web.material/SnackbarData.continuation.|(){}[0] 83 | final val message // com.huanshankeji.compose.web.material/SnackbarData.message|{}message[0] 84 | final fun (): kotlin/String // com.huanshankeji.compose.web.material/SnackbarData.message.|(){}[0] 85 | 86 | final fun component1(): kotlin/String // com.huanshankeji.compose.web.material/SnackbarData.component1|component1(){}[0] 87 | final fun component2(): kotlinx.coroutines/CancellableContinuation // com.huanshankeji.compose.web.material/SnackbarData.component2|component2(){}[0] 88 | final fun copy(kotlin/String = ..., kotlinx.coroutines/CancellableContinuation = ...): com.huanshankeji.compose.web.material/SnackbarData // com.huanshankeji.compose.web.material/SnackbarData.copy|copy(kotlin.String;kotlinx.coroutines.CancellableContinuation){}[0] 89 | final fun equals(kotlin/Any?): kotlin/Boolean // com.huanshankeji.compose.web.material/SnackbarData.equals|equals(kotlin.Any?){}[0] 90 | final fun hashCode(): kotlin/Int // com.huanshankeji.compose.web.material/SnackbarData.hashCode|hashCode(){}[0] 91 | final fun toString(): kotlin/String // com.huanshankeji.compose.web.material/SnackbarData.toString|toString(){}[0] 92 | } 93 | 94 | final class com.huanshankeji.compose.web.material/SnackbarHostState { // com.huanshankeji.compose.web.material/SnackbarHostState|null[0] 95 | constructor () // com.huanshankeji.compose.web.material/SnackbarHostState.|(){}[0] 96 | 97 | final var currentSnackbarData // com.huanshankeji.compose.web.material/SnackbarHostState.currentSnackbarData|{}currentSnackbarData[0] 98 | final fun (): com.huanshankeji.compose.web.material/SnackbarData? // com.huanshankeji.compose.web.material/SnackbarHostState.currentSnackbarData.|(){}[0] 99 | 100 | final fun mainAsyncShowSnackbar(kotlin/String): kotlinx.coroutines/Deferred // com.huanshankeji.compose.web.material/SnackbarHostState.mainAsyncShowSnackbar|mainAsyncShowSnackbar(kotlin.String){}[0] 101 | final fun mainLaunchShowSnackbar(kotlin/String): kotlinx.coroutines/Job // com.huanshankeji.compose.web.material/SnackbarHostState.mainLaunchShowSnackbar|mainLaunchShowSnackbar(kotlin.String){}[0] 102 | final suspend fun showSnackbar(kotlin/String) // com.huanshankeji.compose.web.material/SnackbarHostState.showSnackbar|showSnackbar(kotlin.String){}[0] 103 | } 104 | 105 | open class com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder { // com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder|null[0] 106 | constructor (org.jetbrains.compose.web.attributes/AttrsScope) // com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder.|(org.jetbrains.compose.web.attributes.AttrsScope){}[0] 107 | 108 | final val htmlAttrsScope // com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder.htmlAttrsScope|{}htmlAttrsScope[0] 109 | final fun (): org.jetbrains.compose.web.attributes/AttrsScope // com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder.htmlAttrsScope.|(){}[0] 110 | 111 | final fun <#A1: androidx.compose.web.events/SyntheticEvent> addEventListener(kotlin/String, kotlin/Function1<#A1, kotlin/Unit>) // com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder.addEventListener|addEventListener(kotlin.String;kotlin.Function1<0:0,kotlin.Unit>){0§>}[0] 112 | final fun attr(kotlin/String, kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder.attr|attr(kotlin.String;kotlin.Boolean){}[0] 113 | final fun attr(kotlin/String, kotlin/String) // com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder.attr|attr(kotlin.String;kotlin.String){}[0] 114 | } 115 | 116 | open class com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder : com.huanshankeji.compose.web.material/MwcSimpleComponentAttrsScopeBuilder { // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder|null[0] 117 | constructor (org.jetbrains.compose.web.attributes/AttrsScope) // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder.|(org.jetbrains.compose.web.attributes.AttrsScope){}[0] 118 | 119 | final fun disabled(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder.disabled|disabled(kotlin.Boolean){}[0] 120 | final fun helper(kotlin/String) // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder.helper|helper(kotlin.String){}[0] 121 | final fun onChange(kotlin/Function1, kotlin/Unit>) // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder.onChange|onChange(kotlin.Function1,kotlin.Unit>){}[0] 122 | final fun onChangeWithValue(kotlin/Function1) // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder.onChangeWithValue|onChangeWithValue(kotlin.Function1){}[0] 123 | final fun outlined(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder.outlined|outlined(kotlin.Boolean){}[0] 124 | final fun required(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder.required|required(kotlin.Boolean){}[0] 125 | final fun requiredWithValidationMessage(kotlin/String) // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder.requiredWithValidationMessage|requiredWithValidationMessage(kotlin.String){}[0] 126 | final fun validationMessage(kotlin/String) // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder.validationMessage|validationMessage(kotlin.String){}[0] 127 | final fun value(kotlin/String) // com.huanshankeji.compose.web.material/MwcInputComponentAttrsScopeBuilder.value|value(kotlin.String){}[0] 128 | } 129 | 130 | open class com.huanshankeji.compose.web.material/MwcSimpleComponentAttrsScopeBuilder : com.huanshankeji.compose.web.material/MwcAttrsScopeBuilder { // com.huanshankeji.compose.web.material/MwcSimpleComponentAttrsScopeBuilder|null[0] 131 | constructor (org.jetbrains.compose.web.attributes/AttrsScope) // com.huanshankeji.compose.web.material/MwcSimpleComponentAttrsScopeBuilder.|(org.jetbrains.compose.web.attributes.AttrsScope){}[0] 132 | 133 | final fun icon(kotlin/String) // com.huanshankeji.compose.web.material/MwcSimpleComponentAttrsScopeBuilder.icon|icon(kotlin.String){}[0] 134 | final fun label(kotlin/String) // com.huanshankeji.compose.web.material/MwcSimpleComponentAttrsScopeBuilder.label|label(kotlin.String){}[0] 135 | final fun trailingIcon(kotlin/Boolean = ...) // com.huanshankeji.compose.web.material/MwcSimpleComponentAttrsScopeBuilder.trailingIcon|trailingIcon(kotlin.Boolean){}[0] 136 | } 137 | 138 | final const val com.huanshankeji.material/GREEN_500 // com.huanshankeji.material/GREEN_500|{}GREEN_500[0] 139 | final fun (): kotlin/String // com.huanshankeji.material/GREEN_500.|(){}[0] 140 | 141 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcAttrsScopeBuilder$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcAttrsScopeBuilder$stableprop|#static{}com_huanshankeji_compose_web_material_MwcAttrsScopeBuilder$stableprop[0] 142 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcButtonAttrsScopeBuilder$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcButtonAttrsScopeBuilder$stableprop|#static{}com_huanshankeji_compose_web_material_MwcButtonAttrsScopeBuilder$stableprop[0] 143 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcCircularProgressAttrsScopeBuilder$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcCircularProgressAttrsScopeBuilder$stableprop|#static{}com_huanshankeji_compose_web_material_MwcCircularProgressAttrsScopeBuilder$stableprop[0] 144 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcIconButtonAttrsScopeBuilder$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcIconButtonAttrsScopeBuilder$stableprop|#static{}com_huanshankeji_compose_web_material_MwcIconButtonAttrsScopeBuilder$stableprop[0] 145 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcInputComponentAttrsScopeBuilder$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcInputComponentAttrsScopeBuilder$stableprop|#static{}com_huanshankeji_compose_web_material_MwcInputComponentAttrsScopeBuilder$stableprop[0] 146 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcListItemAttrsScopeBuilder$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcListItemAttrsScopeBuilder$stableprop|#static{}com_huanshankeji_compose_web_material_MwcListItemAttrsScopeBuilder$stableprop[0] 147 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSelectAttrsScopeBuilder$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSelectAttrsScopeBuilder$stableprop|#static{}com_huanshankeji_compose_web_material_MwcSelectAttrsScopeBuilder$stableprop[0] 148 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSimpleComponentAttrsScopeBuilder$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSimpleComponentAttrsScopeBuilder$stableprop|#static{}com_huanshankeji_compose_web_material_MwcSimpleComponentAttrsScopeBuilder$stableprop[0] 149 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSnackbarAttrsScopeBuilder$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSnackbarAttrsScopeBuilder$stableprop|#static{}com_huanshankeji_compose_web_material_MwcSnackbarAttrsScopeBuilder$stableprop[0] 150 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSnackbarElementScopeDelegate$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSnackbarElementScopeDelegate$stableprop|#static{}com_huanshankeji_compose_web_material_MwcSnackbarElementScopeDelegate$stableprop[0] 151 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcTextfieldAttrsScopeBuilder$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcTextfieldAttrsScopeBuilder$stableprop|#static{}com_huanshankeji_compose_web_material_MwcTextfieldAttrsScopeBuilder$stableprop[0] 152 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_SnackbarData$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_SnackbarData$stableprop|#static{}com_huanshankeji_compose_web_material_SnackbarData$stableprop[0] 153 | final val com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_SnackbarHostState$stableprop // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_SnackbarHostState$stableprop|#static{}com_huanshankeji_compose_web_material_SnackbarHostState$stableprop[0] 154 | final val com.huanshankeji.compose.web.material/defaultSpacing // com.huanshankeji.compose.web.material/defaultSpacing|{}defaultSpacing[0] 155 | final fun (): org.jetbrains.compose.web.css/CSSSizeValue // com.huanshankeji.compose.web.material/defaultSpacing.|(){}[0] 156 | 157 | final fun (org.w3c.dom/HTMLElement).com.huanshankeji.compose.web.material/snackbarShow(): dynamic // com.huanshankeji.compose.web.material/snackbarShow|snackbarShow@org.w3c.dom.HTMLElement(){}[0] 158 | final fun (org.w3c.dom/HTMLElement).com.huanshankeji.compose.web.material/snackbarShow(kotlin/String) // com.huanshankeji.compose.web.material/snackbarShow|snackbarShow@org.w3c.dom.HTMLElement(kotlin.String){}[0] 159 | final fun <#A: kotlin/Enum<#A>> com.huanshankeji.compose.web.material/MwcSelectWithEnumItems(kotlin/Array<#A>, kotlin/Function1<#A, kotlin/String>?, #A?, kotlin/Function1<#A?, kotlin/Unit>, kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSelectWithEnumItems|MwcSelectWithEnumItems(kotlin.Array<0:0>;kotlin.Function1<0:0,kotlin.String>?;0:0?;kotlin.Function1<0:0?,kotlin.Unit>;kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){0§>}[0] 160 | final fun com.huanshankeji.compose.web.material/CenteredCardInViewport(kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/CenteredCardInViewport|CenteredCardInViewport(kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 161 | final fun com.huanshankeji.compose.web.material/MdcCard(kotlin/Function1, kotlin/Unit>?, org.jetbrains.compose.web.css/CSSNumericValue?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MdcCard|MdcCard(kotlin.Function1,kotlin.Unit>?;org.jetbrains.compose.web.css.CSSNumericValue?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 162 | final fun com.huanshankeji.compose.web.material/MwcButton(kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcButton|MwcButton(kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 163 | final fun com.huanshankeji.compose.web.material/MwcCircularProgress(kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcCircularProgress|MwcCircularProgress(kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 164 | final fun com.huanshankeji.compose.web.material/MwcCircularProgressFourColor(kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcCircularProgressFourColor|MwcCircularProgressFourColor(kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 165 | final fun com.huanshankeji.compose.web.material/MwcIconButton(kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcIconButton|MwcIconButton(kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 166 | final fun com.huanshankeji.compose.web.material/MwcListItem(kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcListItem|MwcListItem(kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 167 | final fun com.huanshankeji.compose.web.material/MwcSelect(kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSelect|MwcSelect(kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 168 | final fun com.huanshankeji.compose.web.material/MwcSelectWithItemTexts(kotlin.collections/List, kotlin/Int?, kotlin/Function1, kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSelectWithItemTexts|MwcSelectWithItemTexts(kotlin.collections.List;kotlin.Int?;kotlin.Function1;kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 169 | final fun com.huanshankeji.compose.web.material/MwcSelectWithItems(kotlin/Int, kotlin/Function3, kotlin/Int?, kotlin/Function1, kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSelectWithItems|MwcSelectWithItems(kotlin.Int;kotlin.Function3;kotlin.Int?;kotlin.Function1;kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 170 | final fun com.huanshankeji.compose.web.material/MwcSnackbar(kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function3?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSnackbar|MwcSnackbar(kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function3?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 171 | final fun com.huanshankeji.compose.web.material/MwcSnackbarHost(com.huanshankeji.compose.web.material/SnackbarHostState, kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function3?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSnackbarHost|MwcSnackbarHost(com.huanshankeji.compose.web.material.SnackbarHostState;kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function3?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 172 | final fun com.huanshankeji.compose.web.material/MwcSnackbarHostWithCloseButton(com.huanshankeji.compose.web.material/SnackbarHostState, androidx.compose.runtime/Composer?, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSnackbarHostWithCloseButton|MwcSnackbarHostWithCloseButton(com.huanshankeji.compose.web.material.SnackbarHostState;androidx.compose.runtime.Composer?;kotlin.Int){}[0] 173 | final fun com.huanshankeji.compose.web.material/MwcSnackbarWithRef(kotlin/Function1, kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function3?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcSnackbarWithRef|MwcSnackbarWithRef(kotlin.Function1;kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function3?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 174 | final fun com.huanshankeji.compose.web.material/MwcTextfield(kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function3, androidx.compose.runtime/Composer, kotlin/Int, kotlin/Unit>?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/MwcTextfield|MwcTextfield(kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function3,androidx.compose.runtime.Composer,kotlin.Int,kotlin.Unit>?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 175 | final fun com.huanshankeji.compose.web.material/OpenMwcSnackbar(kotlin/Boolean, kotlin/Function1?, kotlin/Function1, kotlin/Unit>?, kotlin/Function3?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // com.huanshankeji.compose.web.material/OpenMwcSnackbar|OpenMwcSnackbar(kotlin.Boolean;kotlin.Function1?;kotlin.Function1,kotlin.Unit>?;kotlin.Function3?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] 176 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcAttrsScopeBuilder$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcAttrsScopeBuilder$stableprop_getter|com_huanshankeji_compose_web_material_MwcAttrsScopeBuilder$stableprop_getter(){}[0] 177 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcButtonAttrsScopeBuilder$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcButtonAttrsScopeBuilder$stableprop_getter|com_huanshankeji_compose_web_material_MwcButtonAttrsScopeBuilder$stableprop_getter(){}[0] 178 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcCircularProgressAttrsScopeBuilder$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcCircularProgressAttrsScopeBuilder$stableprop_getter|com_huanshankeji_compose_web_material_MwcCircularProgressAttrsScopeBuilder$stableprop_getter(){}[0] 179 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcIconButtonAttrsScopeBuilder$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcIconButtonAttrsScopeBuilder$stableprop_getter|com_huanshankeji_compose_web_material_MwcIconButtonAttrsScopeBuilder$stableprop_getter(){}[0] 180 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcInputComponentAttrsScopeBuilder$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcInputComponentAttrsScopeBuilder$stableprop_getter|com_huanshankeji_compose_web_material_MwcInputComponentAttrsScopeBuilder$stableprop_getter(){}[0] 181 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcListItemAttrsScopeBuilder$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcListItemAttrsScopeBuilder$stableprop_getter|com_huanshankeji_compose_web_material_MwcListItemAttrsScopeBuilder$stableprop_getter(){}[0] 182 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSelectAttrsScopeBuilder$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSelectAttrsScopeBuilder$stableprop_getter|com_huanshankeji_compose_web_material_MwcSelectAttrsScopeBuilder$stableprop_getter(){}[0] 183 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSimpleComponentAttrsScopeBuilder$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSimpleComponentAttrsScopeBuilder$stableprop_getter|com_huanshankeji_compose_web_material_MwcSimpleComponentAttrsScopeBuilder$stableprop_getter(){}[0] 184 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSnackbarAttrsScopeBuilder$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSnackbarAttrsScopeBuilder$stableprop_getter|com_huanshankeji_compose_web_material_MwcSnackbarAttrsScopeBuilder$stableprop_getter(){}[0] 185 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSnackbarElementScopeDelegate$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcSnackbarElementScopeDelegate$stableprop_getter|com_huanshankeji_compose_web_material_MwcSnackbarElementScopeDelegate$stableprop_getter(){}[0] 186 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcTextfieldAttrsScopeBuilder$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_MwcTextfieldAttrsScopeBuilder$stableprop_getter|com_huanshankeji_compose_web_material_MwcTextfieldAttrsScopeBuilder$stableprop_getter(){}[0] 187 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_SnackbarData$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_SnackbarData$stableprop_getter|com_huanshankeji_compose_web_material_SnackbarData$stableprop_getter(){}[0] 188 | final fun com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_SnackbarHostState$stableprop_getter(): kotlin/Int // com.huanshankeji.compose.web.material/com_huanshankeji_compose_web_material_SnackbarHostState$stableprop_getter|com_huanshankeji_compose_web_material_SnackbarHostState$stableprop_getter(){}[0] 189 | final fun com.huanshankeji.compose.web.material/mwcRequires() // com.huanshankeji.compose.web.material/mwcRequires|mwcRequires(){}[0] 190 | final fun com.huanshankeji.compose.web.material/require(kotlin/String): dynamic // com.huanshankeji.compose.web.material/require|require(kotlin.String){}[0] 191 | -------------------------------------------------------------------------------- /compose-html-material-legacy/build.gradle.kts: -------------------------------------------------------------------------------- 1 | import com.huanshankeji.team.`Shreck Ye` 2 | import com.huanshankeji.team.pomForTeamDefaultOpenSource 3 | 4 | plugins { 5 | `lib-conventions-without-publishing` 6 | } 7 | 8 | kotlin { 9 | sourceSets { 10 | jsMain { 11 | dependencies { 12 | implementation(compose.html.core) 13 | implementation(compose.runtime) 14 | implementation(project(":compose-html-common")) 15 | 16 | implementation(npm("@webcomponents/webcomponentsjs", DependencyVersions.webcomponents)) 17 | 18 | fun mwcImplementation(module: String) = 19 | implementation(npm("@material/mwc-$module", DependencyVersions.mwc)) 20 | 21 | fun mwcImplementations(vararg modules: String) { 22 | for (module in modules) mwcImplementation(module) 23 | } 24 | 25 | mwcImplementations( 26 | "button", 27 | "textfield", 28 | "select", 29 | "icon-button", 30 | "snackbar", 31 | "circular-progress", 32 | "circular-progress-four-color" 33 | ) 34 | 35 | implementation(npm("@material/card", DependencyVersions.mdc)) 36 | 37 | implementation(commonDependencies.kotlinx.coroutines.core()) 38 | } 39 | } 40 | } 41 | } 42 | 43 | publishing.publications.withType { 44 | pomForTeamDefaultOpenSource( 45 | project, 46 | "Compose HTML Material 2", 47 | "Legacy Material 2 components for Compose HTML" 48 | ) { 49 | `Shreck Ye`() 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /compose-html-material-legacy/src/jsMain/kotlin/com/huanshankeji/compose/web/material/Components.kt: -------------------------------------------------------------------------------- 1 | @file:OptIn(ExperimentalComposeWebApi::class) 2 | 3 | package com.huanshankeji.compose.web.material 4 | 5 | import androidx.compose.runtime.* 6 | import androidx.compose.web.events.SyntheticEvent 7 | import com.huanshankeji.compose.web.HTMLElementContent 8 | import com.huanshankeji.compose.web.attributes.attr 9 | import kotlinx.coroutines.* 10 | import kotlinx.coroutines.sync.Mutex 11 | import kotlinx.coroutines.sync.withLock 12 | import org.jetbrains.compose.web.ExperimentalComposeWebApi 13 | import org.jetbrains.compose.web.attributes.AttrsScope 14 | import org.jetbrains.compose.web.attributes.EventsListenerScope 15 | import org.jetbrains.compose.web.css.CSSNumeric 16 | import org.jetbrains.compose.web.css.padding 17 | import org.jetbrains.compose.web.dom.* 18 | import org.jetbrains.compose.web.events.SyntheticChangeEvent 19 | import org.w3c.dom.HTMLDivElement 20 | import org.w3c.dom.HTMLElement 21 | import org.w3c.dom.HTMLSelectElement 22 | import org.w3c.dom.events.EventTarget 23 | import kotlin.coroutines.resume 24 | 25 | open class MwcAttrsScopeBuilder(val htmlAttrsScope: AttrsScope) { 26 | fun attr(attr: String, value: String) { 27 | htmlAttrsScope.attr(attr, value) 28 | } 29 | 30 | fun attr(attr: String, isPresent: Boolean = true) { 31 | htmlAttrsScope.attr(attr, isPresent) 32 | } 33 | 34 | fun > addEventListener(eventName: String, listener: (T) -> Unit) = 35 | htmlAttrsScope.addEventListener(eventName, listener) 36 | } 37 | 38 | open class MwcSimpleComponentAttrsScopeBuilder(htmlAttrsScope: AttrsScope) : 39 | MwcAttrsScopeBuilder(htmlAttrsScope) { 40 | fun label(value: String) = attr("label", value) 41 | fun icon(value: String) = attr("icon", value) 42 | fun trailingIcon(isPresent: Boolean = true) = attr("trailingIcon", isPresent) 43 | } 44 | 45 | open class MwcInputComponentAttrsScopeBuilder(htmlAttrsScope: AttrsScope) : 46 | MwcSimpleComponentAttrsScopeBuilder(htmlAttrsScope) { 47 | fun helper(value: String) = attr("helper", value) 48 | fun outlined(isPresent: Boolean = true) = attr("outlined", isPresent) 49 | fun disabled(isPresent: Boolean = true) = attr("disabled", isPresent) 50 | 51 | /** 52 | * @see androidx.compose.web.attributes.SelectAttrsScope.onChange 53 | */ 54 | fun onChange(listener: (SyntheticChangeEvent) -> Unit) = 55 | addEventListener(EventsListenerScope.CHANGE, listener) 56 | 57 | fun onChangeWithValue(onValueChange: (String) -> Unit) = 58 | onChange { onValueChange(it.target.value) } 59 | 60 | fun value(value: String) = attr("value", value) 61 | 62 | fun required(isPresent: Boolean = true) = attr("required", isPresent) 63 | fun validationMessage(value: String) = attr("validationMessage", value) 64 | fun requiredWithValidationMessage(validationMessage: String) { 65 | required() 66 | validationMessage(validationMessage) 67 | } 68 | } 69 | 70 | 71 | // https://github.com/material-components/material-web/tree/master/packages/button 72 | 73 | class MwcButtonAttrsScopeBuilder(htmlAttrsScope: AttrsScope) : 74 | MwcSimpleComponentAttrsScopeBuilder(htmlAttrsScope) { 75 | fun outlined(isPresent: Boolean = true) = attr("outlined", isPresent) 76 | fun raised(isPresent: Boolean = true) = attr("raised", isPresent) 77 | fun unelevated(isPresent: Boolean = true) = attr("unelevated", isPresent) 78 | fun dense(isPresent: Boolean = true) = attr("dense", isPresent) 79 | fun disabled(isPresent: Boolean = true) = attr("disabled", isPresent) 80 | } 81 | 82 | 83 | @Composable 84 | fun MwcButton( 85 | mwcAttrs: (MwcButtonAttrsScopeBuilder.() -> Unit)? = null, 86 | htmlAttrs: AttrBuilderContext? = null, 87 | content: HTMLElementContent = null 88 | ) = 89 | TagElement("mwc-button", { 90 | mwcAttrs?.invoke(MwcButtonAttrsScopeBuilder(this)) 91 | htmlAttrs?.invoke(this) 92 | }, content) 93 | 94 | 95 | // https://github.com/material-components/material-web/tree/master/packages/textfield 96 | 97 | class MwcTextfieldAttrsScopeBuilder(htmlAttrsScope: AttrsScope) : 98 | MwcInputComponentAttrsScopeBuilder(htmlAttrsScope) { 99 | fun type(value: String) = attr("type", value) 100 | fun maxLength(value: Int) = attr("maxLength", value.toString()) 101 | } 102 | 103 | 104 | @Composable 105 | fun MwcTextfield( 106 | mwcAttrs: (MwcTextfieldAttrsScopeBuilder.() -> Unit)? = null, 107 | htmlAttrs: AttrBuilderContext? = null, 108 | content: HTMLElementContent = null 109 | ) = 110 | TagElement("mwc-textfield", { 111 | mwcAttrs?.invoke(MwcTextfieldAttrsScopeBuilder(this)) 112 | htmlAttrs?.invoke(this) 113 | }, content) 114 | 115 | 116 | // https://github.com/material-components/material-web/tree/master/packages/select 117 | 118 | class MwcSelectAttrsScopeBuilder(htmlAttrsScope: AttrsScope) : 119 | MwcInputComponentAttrsScopeBuilder(htmlAttrsScope) { 120 | // I am not sure whether `trailingIcon` is supported here. 121 | 122 | fun onSelected(listener: (SyntheticEvent) -> Unit) = 123 | htmlAttrsScope.addEventListener("selected", listener) 124 | 125 | fun onSelectedWithIndex(listener: (index: Int) -> Unit) = 126 | onSelected { 127 | val index = it.nativeEvent.asDynamic().detail.index as Int 128 | listener(index) 129 | } 130 | 131 | // Setting the index property doesn't work 132 | //fun index(value: Int) = attr("index", value.toString()) 133 | } 134 | 135 | @Composable 136 | fun MwcSelect( 137 | mwcAttrs: (MwcSelectAttrsScopeBuilder.() -> Unit)? = null, 138 | htmlAttrs: AttrBuilderContext? = null, 139 | content: HTMLElementContent 140 | /*content: (@Composable ElementScope.( 141 | DefaultMwcListItem: (content: HTMLElementContent) -> Unit 142 | ) -> Unit)? = null*/ 143 | ) = 144 | TagElement("mwc-select", { 145 | mwcAttrs?.invoke(MwcSelectAttrsScopeBuilder(this)) 146 | htmlAttrs?.invoke(this) 147 | }, content) 148 | 149 | class MwcListItemAttrsScopeBuilder(htmlAttrsScope: AttrsScope) : 150 | MwcSimpleComponentAttrsScopeBuilder(htmlAttrsScope) { 151 | @Suppress("DeprecatedCallableAddReplaceWith") 152 | @Deprecated( 153 | "It's recommended to use the `value` attribute on the parent component." 154 | ) 155 | fun selected(isPresent: Boolean = true) = attr("selected", isPresent) 156 | fun value(value: String) = attr("value", value) 157 | fun graphicEqIcon() = attr("graphic", "icon") 158 | } 159 | 160 | @Composable 161 | fun MwcListItem( 162 | mwcAttrs: (MwcListItemAttrsScopeBuilder.() -> Unit)? = null, 163 | htmlAttrs: AttrBuilderContext? = null, 164 | content: HTMLElementContent = null 165 | ) = 166 | TagElement("mwc-list-item", { 167 | mwcAttrs?.invoke(MwcListItemAttrsScopeBuilder(this)) 168 | htmlAttrs?.invoke(this) 169 | }, content) 170 | 171 | @Composable 172 | fun MwcSelectWithItems( 173 | numSelections: Int, 174 | itemContent: @Composable (Int) -> Unit, 175 | selectedIndex: Int?, onIndexSelected: (Int?) -> Unit, 176 | 177 | selectAttrs: (MwcSelectAttrsScopeBuilder.() -> Unit)? = null, 178 | selectHtmlAttrs: AttrBuilderContext? = null, 179 | listItemAttrs: (MwcListItemAttrsScopeBuilder.() -> Unit)? = null, 180 | listItemHtmlAttrs: AttrBuilderContext? = null 181 | ) = 182 | MwcSelect({ 183 | // Setting the index property doesn't work 184 | //index(selectedIndex?.let { it + 1 } ?: 0) 185 | value(selectedIndex?.toString() ?: "") 186 | 187 | onSelectedWithIndex { 188 | onIndexSelected(if (it == 0) null else it - 1) 189 | } 190 | selectAttrs?.invoke(this) 191 | }, selectHtmlAttrs) { 192 | MwcListItem({ 193 | //value("unselected") // comment this out for `required` and `validationMessage` to work 194 | listItemAttrs?.invoke(this) 195 | }) 196 | 197 | for (i in 0 until numSelections) 198 | MwcListItem({ 199 | value(i.toString()) 200 | listItemAttrs?.invoke(this) 201 | }, listItemHtmlAttrs) { 202 | itemContent(i) 203 | } 204 | } 205 | 206 | @Composable 207 | fun MwcSelectWithItemTexts( 208 | itemTexts: List, 209 | selectedIndex: Int?, onIndexSelected: (Int?) -> Unit, 210 | 211 | selectAttrs: (MwcSelectAttrsScopeBuilder.() -> Unit)? = null, 212 | selectHtmlAttrs: AttrBuilderContext? = null, 213 | listItemAttrs: (MwcListItemAttrsScopeBuilder.() -> Unit)? = null, 214 | listItemHtmlAttrs: AttrBuilderContext? = null 215 | ) = 216 | MwcSelectWithItems( 217 | itemTexts.size, { Text(itemTexts[it]) }, selectedIndex, onIndexSelected, 218 | selectAttrs, selectHtmlAttrs, listItemAttrs, listItemHtmlAttrs 219 | ) 220 | 221 | @Composable 222 | fun > MwcSelectWithEnumItems( 223 | values: Array, text: (E) -> String = { it.name }, 224 | selected: E?, onSelected: (E?) -> Unit, 225 | 226 | selectAttrs: (MwcSelectAttrsScopeBuilder.() -> Unit)? = null, 227 | selectHtmlAttrs: AttrBuilderContext? = null, 228 | listItemAttrs: (MwcListItemAttrsScopeBuilder.() -> Unit)? = null, 229 | listItemHtmlAttrs: AttrBuilderContext? = null 230 | ) = 231 | MwcSelectWithItemTexts( 232 | values.map(text), selected?.ordinal, { onSelected(if (it !== null) values[it] else null) }, 233 | selectAttrs, selectHtmlAttrs, listItemAttrs, listItemHtmlAttrs 234 | ) 235 | 236 | @Composable 237 | fun MdcCard( 238 | attrs: (AttrsScope.() -> Unit)? = null, 239 | padding: CSSNumeric = defaultSpacing, 240 | content: ContentBuilder? = null 241 | ) = 242 | Div({ 243 | classes("mdc-card") 244 | style { 245 | padding(padding) 246 | } 247 | attrs?.invoke(this) 248 | }, content) 249 | 250 | 251 | class MwcIconButtonAttrsScopeBuilder(htmlAttrsScope: AttrsScope) : MwcAttrsScopeBuilder(htmlAttrsScope) { 252 | fun icon(value: String) = attr("icon", value) 253 | fun disabled(isPresent: Boolean = true) = attr("disabled", isPresent) 254 | fun ariaLabel(value: String) = attr("aria-label", value) 255 | } 256 | 257 | @Composable 258 | fun MwcIconButton( 259 | mwcAttrs: (MwcIconButtonAttrsScopeBuilder.() -> Unit)? = null, 260 | htmlAttrs: AttrBuilderContext? = null, 261 | content: HTMLElementContent = null 262 | ) = 263 | TagElement("mwc-button", { 264 | mwcAttrs?.invoke(MwcIconButtonAttrsScopeBuilder(this)) 265 | htmlAttrs?.invoke(this) 266 | }, content) 267 | 268 | 269 | // https://github.com/material-components/material-web/tree/master/packages/snackbar 270 | 271 | class MwcSnackbarAttrsScopeBuilder(htmlAttrsScope: AttrsScope) : 272 | MwcAttrsScopeBuilder(htmlAttrsScope) { 273 | fun labelText(value: String) = attr("labelText", value) 274 | 275 | fun open(isPresent: Boolean = true) = attr("open", isPresent) 276 | fun timeoutMs(value: Number) = attr("open", value.toString()) 277 | } 278 | 279 | class MwcSnackbarElementScopeDelegate(elementScope: ElementScope) : 280 | ElementScope by elementScope { 281 | fun MwcButtonAttrsScopeBuilder.slot(value: String) = attr("slot", value) 282 | fun MwcIconButtonAttrsScopeBuilder.slot(value: String) = attr("slot", value) 283 | } 284 | 285 | @Composable 286 | fun MwcSnackbar( 287 | mwcAttrs: (MwcSnackbarAttrsScopeBuilder.() -> Unit)? = null, 288 | htmlAttrs: AttrBuilderContext? = null, 289 | content: (@Composable MwcSnackbarElementScopeDelegate.() -> Unit)? = null 290 | ) = 291 | TagElement("mwc-snackbar", { 292 | mwcAttrs?.invoke(MwcSnackbarAttrsScopeBuilder(this)) 293 | htmlAttrs?.invoke(this) 294 | }) { 295 | content?.invoke(MwcSnackbarElementScopeDelegate(this)) 296 | } 297 | 298 | @Composable 299 | fun OpenMwcSnackbar( 300 | open: Boolean = true, 301 | mwcAttrs: (MwcSnackbarAttrsScopeBuilder.() -> Unit)? = null, 302 | htmlAttrs: AttrBuilderContext? = null, 303 | content: (@Composable MwcSnackbarElementScopeDelegate.() -> Unit)? = null 304 | ) = 305 | MwcSnackbar({ 306 | if (open) open() 307 | mwcAttrs?.invoke(this) 308 | }, htmlAttrs, content) 309 | 310 | /** 311 | * Use with [snackbarShow]. 312 | */ 313 | @Composable 314 | fun MwcSnackbarWithRef( 315 | setRef: (HTMLElement?) -> Unit, 316 | 317 | mwcAttrs: (MwcSnackbarAttrsScopeBuilder.() -> Unit)? = null, 318 | htmlAttrs: AttrBuilderContext? = null, 319 | content: (@Composable MwcSnackbarElementScopeDelegate.() -> Unit)? = null 320 | ) = 321 | MwcSnackbar(mwcAttrs, { 322 | ref { 323 | setRef(it) 324 | onDispose { setRef(null) } 325 | } 326 | htmlAttrs?.invoke(this) 327 | }, content) 328 | 329 | fun HTMLElement.snackbarShow() = 330 | asDynamic().show() 331 | 332 | fun HTMLElement.snackbarShow(labelText: String) { 333 | setAttribute("labelText", labelText) 334 | snackbarShow() 335 | } 336 | 337 | 338 | // follows the Jetpack Compose way 339 | // see: https://android.googlesource.com/platform/frameworks/support/+/androidx-main/compose/material/material/src/commonMain/kotlin/androidx/compose/material/SnackbarHost.kt 340 | 341 | @Stable 342 | class SnackbarHostState { 343 | private val mutex = Mutex() 344 | 345 | var currentSnackbarData by mutableStateOf(null) 346 | private set 347 | 348 | suspend fun showSnackbar( 349 | message: String 350 | ): SnackbarResult = mutex.withLock { 351 | try { 352 | return suspendCancellableCoroutine { 353 | currentSnackbarData = SnackbarData(message, it) 354 | } 355 | } finally { 356 | currentSnackbarData = null 357 | } 358 | } 359 | 360 | fun mainLaunchShowSnackbar(message: String) = 361 | MainScope().launch { showSnackbar(message) } 362 | 363 | fun mainAsyncShowSnackbar(message: String) = 364 | MainScope().async { showSnackbar(message) } 365 | } 366 | 367 | @Stable 368 | data class SnackbarData( 369 | val message: String, 370 | val continuation: CancellableContinuation 371 | ) 372 | 373 | typealias SnackbarResult = Unit 374 | 375 | @Composable 376 | fun MwcSnackbarHost( 377 | hostState: SnackbarHostState, 378 | mwcAttrs: (MwcSnackbarAttrsScopeBuilder.() -> Unit)? = null, 379 | htmlAttrs: AttrBuilderContext? = null, 380 | content: (@Composable MwcSnackbarElementScopeDelegate.() -> Unit)? = null 381 | ) { 382 | val currentSnackbarData = hostState.currentSnackbarData 383 | 384 | MwcSnackbar({ 385 | currentSnackbarData?.let { labelText(it.message) } 386 | mwcAttrs?.invoke(this) 387 | }, htmlAttrs) { 388 | DisposableEffect(currentSnackbarData) { 389 | if (currentSnackbarData !== null) { 390 | scopeElement.snackbarShow() 391 | scopeElement.addEventListener("MDCSnackbar:closed", { 392 | currentSnackbarData.continuation.run { 393 | if (isActive) resume(Unit) 394 | } 395 | }) 396 | } 397 | 398 | onDispose { } 399 | } 400 | 401 | content?.invoke(this) 402 | } 403 | } 404 | 405 | @Composable 406 | fun MwcSnackbarHostWithCloseButton(snackbarHostState: SnackbarHostState) = 407 | MwcSnackbarHost(snackbarHostState) { 408 | MwcIconButton({ 409 | icon("close") 410 | slot("dismiss") 411 | }) 412 | } 413 | 414 | 415 | // see: https://github.com/material-components/material-web/tree/master/packages/circular-progress 416 | // see: https://github.com/material-components/material-web/tree/master/packages/circular-progress-four-color 417 | 418 | class MwcCircularProgressAttrsScopeBuilder(htmlAttrsScope: AttrsScope) : 419 | MwcAttrsScopeBuilder(htmlAttrsScope) { 420 | fun progress(value: CSSNumeric) = attr("progress", value.toString()) 421 | fun indeterminate(isPresent: Boolean = true) = attr("indeterminate", isPresent) 422 | } 423 | 424 | @Composable 425 | fun MwcCircularProgress( 426 | mwcAttrs: (MwcCircularProgressAttrsScopeBuilder.() -> Unit)? = null, 427 | htmlAttrs: AttrBuilderContext? = null 428 | ) = 429 | TagElement("mwc-circular-progress", { 430 | mwcAttrs?.invoke(MwcCircularProgressAttrsScopeBuilder(this)) 431 | htmlAttrs?.invoke(this) 432 | }, null) 433 | 434 | @Composable 435 | fun MwcCircularProgressFourColor( 436 | mwcAttrs: (MwcCircularProgressAttrsScopeBuilder.() -> Unit)? = null, 437 | htmlAttrs: AttrBuilderContext? = null 438 | ) = 439 | TagElement("mwc-circular-progress-four-color", { 440 | mwcAttrs?.invoke(MwcCircularProgressAttrsScopeBuilder(this)) 441 | htmlAttrs?.invoke(this) 442 | }, null) 443 | 444 | 445 | // TODO: CSS and style 446 | -------------------------------------------------------------------------------- /compose-html-material-legacy/src/jsMain/kotlin/com/huanshankeji/compose/web/material/Layouts.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.material 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.CenteredInViewport 5 | import com.huanshankeji.compose.web.css.Styles 6 | import org.jetbrains.compose.web.attributes.AttrsScope 7 | import org.jetbrains.compose.web.dom.ContentBuilder 8 | import org.w3c.dom.HTMLDivElement 9 | 10 | @Composable 11 | fun CenteredCardInViewport( 12 | viewportDivStyles: Styles? = null, 13 | cardAttrs: (AttrsScope.() -> Unit)? = null, 14 | content: ContentBuilder 15 | ) = 16 | CenteredInViewport({ viewportDivStyles?.let { style { it() } } }) { 17 | MdcCard(cardAttrs, content = content) 18 | } 19 | -------------------------------------------------------------------------------- /compose-html-material-legacy/src/jsMain/kotlin/com/huanshankeji/compose/web/material/MwcRequires.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.material 2 | 3 | external fun require(module: String): dynamic 4 | 5 | fun mwcRequires() { 6 | require("@material/mwc-button") 7 | require("@material/mwc-textfield") 8 | require("@material/mwc-select") 9 | require("@material/mwc-list/mwc-list-item") 10 | require("@material/mwc-snackbar") 11 | require("@material/mwc-circular-progress") 12 | require("@material/mwc-circular-progress-four-color") 13 | } 14 | -------------------------------------------------------------------------------- /compose-html-material-legacy/src/jsMain/kotlin/com/huanshankeji/compose/web/material/Styles.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.web.material 2 | 3 | import org.jetbrains.compose.web.css.px 4 | 5 | val defaultSpacing = 16.px 6 | -------------------------------------------------------------------------------- /compose-html-material-legacy/src/jsMain/kotlin/com/huanshankeji/material/Colors.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.material 2 | 3 | const val GREEN_500 = "#4CAF50" 4 | -------------------------------------------------------------------------------- /compose-html-material3/build.gradle.kts: -------------------------------------------------------------------------------- 1 | import com.huanshankeji.team.`Shreck Ye` 2 | import com.huanshankeji.team.pomForTeamDefaultOpenSource 3 | 4 | plugins { 5 | `lib-conventions` 6 | } 7 | 8 | kotlin { 9 | sourceSets { 10 | jsMain { 11 | dependencies { 12 | implementation(compose.html.core) 13 | implementation(compose.runtime) 14 | implementation(project(":compose-html-common")) 15 | 16 | implementation(npm("@material/web", DependencyVersions.materialWeb)) 17 | } 18 | } 19 | } 20 | } 21 | 22 | publishing.publications.withType { 23 | pomForTeamDefaultOpenSource( 24 | project, 25 | "Compose HTML Material 3", 26 | "Material 3 components for Compose HTML" 27 | ) { 28 | `Shreck Ye`() 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MaterialWebLabsApi.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | @RequiresOptIn( 4 | "This API depends on components in the Material Web \"labs\" directory, which contains experimental features that are not recommended for production. " + 5 | "See https://github.com/material-components/material-web/tree/main/labs for more details.", 6 | RequiresOptIn.Level.WARNING 7 | ) 8 | @Retention(AnnotationRetention.BINARY) 9 | annotation class MaterialWebLabsApi -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdButton.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.attributes.Attrs 5 | import com.huanshankeji.compose.web.attributes.ext.* 6 | import com.huanshankeji.compose.web.attributes.slot 7 | import org.jetbrains.compose.web.attributes.AttrsScope 8 | import org.jetbrains.compose.web.dom.ElementScope 9 | import org.jetbrains.compose.web.dom.TagElement 10 | import org.w3c.dom.HTMLElement 11 | 12 | /* 13 | https://github.com/material-components/material-web/blob/main/docs/components/button.md 14 | https://material-web.dev/components/button/ 15 | https://material-web.dev/components/button/stories/ 16 | */ 17 | 18 | /* 19 | // TODO not working 20 | @JsModule("@material/web/button/elevated-button.js") 21 | external class MdElevatedButton /* : Element */ // TODO 22 | 23 | private var toImport = true 24 | */ 25 | 26 | private fun commonButtonAttrs( 27 | disabled: Boolean?, 28 | href: String?, 29 | target: String?, 30 | trailingIcon: Boolean?, 31 | hasIcon: Boolean?, 32 | type: String?, 33 | value: String?, 34 | name: String?, 35 | form: String?, 36 | attrs: Attrs? 37 | ): Attrs = 38 | { 39 | disabled(disabled) 40 | href(href) 41 | target(target) 42 | trailingIcon?.let { attr("trailing-icon", it.toString()) } 43 | hasIcon?.let { attr("has-icon", it.toString()) } 44 | type(type) 45 | value(value) 46 | name(name) 47 | form(form) 48 | 49 | attrs?.invoke(this) 50 | } 51 | 52 | private fun (@Composable MdButtonScope.() -> Unit)?.toElementScopeContent(): (@Composable ElementScope.() -> Unit)? = 53 | this?.let { 54 | { MdButtonScope(this).it() } 55 | } 56 | 57 | @Composable 58 | private fun CommonButton( 59 | tagName: String, 60 | disabled: Boolean?, 61 | href: String?, 62 | target: String?, 63 | trailingIcon: Boolean?, 64 | hasIcon: Boolean?, 65 | type: String?, 66 | value: String?, 67 | name: String?, 68 | form: String?, // The form ID 69 | attrs: Attrs?, 70 | content: (@Composable MdButtonScope.() -> Unit)? 71 | ) = 72 | //TagElement({ MdElevatedButton().asDynamic() }, { TODO() }) { TODO() } 73 | TagElement( 74 | tagName, 75 | commonButtonAttrs(disabled, href, target, trailingIcon, hasIcon, type, value, name, form, attrs), 76 | content.toElementScopeContent() 77 | ) 78 | 79 | @Composable 80 | fun MdElevatedButton( 81 | disabled: Boolean? = null, 82 | href: String? = null, 83 | target: String? = null, 84 | trailingIcon: Boolean? = null, 85 | hasIcon: Boolean? = null, 86 | type: String? = null, 87 | value: String? = null, 88 | name: String? = null, 89 | form: String? = null, 90 | attrs: Attrs?, 91 | content: (@Composable MdButtonScope.() -> Unit)? 92 | ) { 93 | /* 94 | // TODO not working 95 | if (toImport) { 96 | MdElevatedButton() 97 | toImport = false 98 | } 99 | */ 100 | // `require` can't be wrapped in `CommonButton` taken a `module` parameter because it seems to be processed by Webpack, JS `require` only takes constants. 101 | // It seems there is no need to put this in an effect block, because it seems on Compose HTML recomposition happens exactly when there is a need to re-invoke a composable. 102 | require("@material/web/button/elevated-button.js") 103 | 104 | CommonButton( 105 | "md-elevated-button", 106 | disabled, href, target, trailingIcon, hasIcon, type, value, name, form, 107 | attrs, content 108 | ) 109 | } 110 | 111 | @Composable 112 | fun MdFilledButton( 113 | disabled: Boolean? = null, 114 | href: String? = null, 115 | target: String? = null, 116 | trailingIcon: Boolean? = null, 117 | hasIcon: Boolean? = null, 118 | type: String? = null, 119 | value: String? = null, 120 | name: String? = null, 121 | form: String? = null, // The form ID 122 | attrs: Attrs?, 123 | content: (@Composable MdButtonScope.() -> Unit)? 124 | ) { 125 | require("@material/web/button/filled-button.js") 126 | 127 | CommonButton( 128 | "md-filled-button", 129 | disabled, href, target, trailingIcon, hasIcon, type, value, name, form, 130 | attrs, content 131 | ) 132 | } 133 | 134 | @Composable 135 | fun MdFilledTonalButton( 136 | disabled: Boolean? = null, 137 | href: String? = null, 138 | target: String? = null, 139 | trailingIcon: Boolean? = null, 140 | hasIcon: Boolean? = null, 141 | type: String? = null, 142 | value: String? = null, 143 | name: String? = null, 144 | form: String? = null, // The form ID 145 | attrs: Attrs?, 146 | content: (@Composable MdButtonScope.() -> Unit)? 147 | ) { 148 | require("@material/web/button/filled-tonal-button.js") 149 | 150 | CommonButton( 151 | "md-filled-tonal-button", 152 | disabled, href, target, trailingIcon, hasIcon, type, value, name, form, 153 | attrs, content 154 | ) 155 | } 156 | 157 | @Composable 158 | fun MdOutlinedButton( 159 | disabled: Boolean? = null, 160 | href: String? = null, 161 | target: String? = null, 162 | trailingIcon: Boolean? = null, 163 | hasIcon: Boolean? = null, 164 | type: String? = null, 165 | value: String? = null, 166 | name: String? = null, 167 | form: String? = null, // The form ID 168 | attrs: Attrs?, 169 | content: (@Composable MdButtonScope.() -> Unit)? 170 | ) { 171 | require("@material/web/button/outlined-button.js") 172 | 173 | CommonButton( 174 | "md-outlined-button", 175 | disabled, href, target, trailingIcon, hasIcon, type, value, name, form, 176 | attrs, content 177 | ) 178 | } 179 | 180 | @Composable 181 | fun MdTextButton( 182 | disabled: Boolean? = null, 183 | href: String? = null, 184 | target: String? = null, 185 | trailingIcon: Boolean? = null, 186 | hasIcon: Boolean? = null, 187 | type: String? = null, 188 | value: String? = null, 189 | name: String? = null, 190 | form: String? = null, // The form ID 191 | attrs: Attrs?, 192 | content: (@Composable MdButtonScope.() -> Unit)? 193 | ) { 194 | require("@material/web/button/text-button.js") 195 | 196 | CommonButton( 197 | "md-text-button", 198 | disabled, href, target, trailingIcon, hasIcon, type, value, name, form, 199 | attrs, content 200 | ) 201 | } 202 | 203 | 204 | class MdButtonScope(val elementScope: ElementScope) { 205 | fun AttrsScope<*>.slotEqIcon() = 206 | slot("icon") 207 | } 208 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdCard.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.attributes.Attrs 5 | import org.jetbrains.compose.web.dom.ElementScope 6 | import org.jetbrains.compose.web.dom.TagElement 7 | import org.w3c.dom.HTMLElement 8 | 9 | /* 10 | https://github.com/material-components/material-web/blob/main/labs/card/internal/card.ts 11 | https://github.com/material-components/material-web/blob/main/labs/card/demo/stories.ts 12 | */ 13 | 14 | @MaterialWebLabsApi 15 | @Composable 16 | fun MdElevatedCard( 17 | attrs: Attrs? = null, 18 | content: @Composable (ElementScope.() -> Unit)? 19 | ) { 20 | require("@material/web/labs/card/elevated-card.js") 21 | 22 | TagElement("md-elevated-card", attrs, content) 23 | } 24 | 25 | @MaterialWebLabsApi 26 | @Composable 27 | fun MdFilledCard( 28 | attrs: Attrs? = null, 29 | content: @Composable (ElementScope.() -> Unit)? 30 | ) { 31 | require("@material/web/labs/card/filled-card.js") 32 | 33 | TagElement("md-filled-card", attrs, content) 34 | } 35 | 36 | @MaterialWebLabsApi 37 | @Composable 38 | fun MdOutlinedCard( 39 | attrs: Attrs? = null, 40 | content: @Composable (ElementScope.() -> Unit)? 41 | ) { 42 | require("@material/web/labs/card/outlined-card.js") 43 | 44 | TagElement("md-outlined-card", attrs, content) 45 | } 46 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdCheckbox.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.html.material3.attributes.indeterminate 5 | import com.huanshankeji.compose.web.attributes.Attrs 6 | import com.huanshankeji.compose.web.attributes.attr 7 | import com.huanshankeji.compose.web.attributes.ext.* 8 | import org.jetbrains.compose.web.dom.TagElement 9 | import org.w3c.dom.HTMLElement 10 | 11 | /* 12 | https://github.com/material-components/material-web/blob/main/docs/components/checkbox.md 13 | https://material-web.dev/components/checkbox/ 14 | https://material-web.dev/components/checkbox/stories/ 15 | */ 16 | @Composable 17 | fun MdCheckbox( 18 | checked: Boolean? = null, 19 | disabled: Boolean? = null, 20 | indeterminate: Boolean? = null, 21 | required: Boolean? = null, 22 | value: String? = null, 23 | name: String? = null, 24 | form: String? = null, 25 | attrs: Attrs? = null 26 | ) { 27 | require("@material/web/checkbox/checkbox.js") 28 | 29 | TagElement("md-checkbox", { 30 | attr("touch-target", "wrapper") 31 | checked?.let { attr("checked", it) } 32 | disabled(disabled) 33 | indeterminate(indeterminate) 34 | required(required) 35 | value(value) 36 | name(name) 37 | form(form) 38 | 39 | attrs?.invoke(this) 40 | }, null) 41 | } 42 | 43 | 44 | enum class MdCheckboxState { 45 | Unchecked, Checked, Indeterminate 46 | } 47 | 48 | @Composable 49 | fun MdCheckbox( 50 | state: MdCheckboxState, 51 | disabled: Boolean? = null, 52 | required: Boolean? = null, 53 | value: String? = null, 54 | name: String? = null, 55 | form: String? = null, 56 | attrs: Attrs? = null 57 | ) { 58 | val checked: Boolean? 59 | val indeterminate: Boolean? 60 | when (state) { 61 | MdCheckboxState.Unchecked -> { 62 | checked = null 63 | indeterminate = null 64 | } 65 | 66 | MdCheckboxState.Checked -> { 67 | checked = true 68 | indeterminate = null 69 | } 70 | 71 | MdCheckboxState.Indeterminate -> { 72 | checked = null 73 | indeterminate = true 74 | } 75 | } 76 | 77 | MdCheckbox(checked, disabled, indeterminate, required, value, name, form, attrs) 78 | } 79 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdFab.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.attributes.Attrs 5 | import com.huanshankeji.compose.web.attributes.attr 6 | import com.huanshankeji.compose.web.attributes.ext.label 7 | import com.huanshankeji.compose.web.attributes.slot 8 | import org.jetbrains.compose.web.attributes.AttrsScope 9 | import org.jetbrains.compose.web.dom.ElementScope 10 | import org.jetbrains.compose.web.dom.TagElement 11 | import org.w3c.dom.HTMLElement 12 | 13 | /* 14 | https://github.com/material-components/material-web/blob/main/docs/components/fab.md 15 | https://material-web.dev/components/fab/ 16 | https://material-web.dev/components/fab/stories/ 17 | */ 18 | 19 | // a workaround for probably a bug, needed since Kotlin 2.0.0 because of "Cannot infer type for this parameter. Please specify it explicitly." 20 | private fun (@Composable MdFabScope.() -> Unit).toHTMLElementContent(): @Composable ElementScope.() -> Unit = 21 | { MdFabScope(this).this@toHTMLElementContent() } 22 | 23 | @Composable 24 | private fun CommonMdFab( 25 | tagName: String, 26 | variant: String?, 27 | size: String?, 28 | label: String?, 29 | lowered: Boolean?, 30 | attrs: Attrs?, 31 | content: @Composable (MdFabScope.() -> Unit)? 32 | ) = 33 | TagElement(tagName, { 34 | variant?.let { attr("variant", it) } 35 | size?.let { attr("size", it) } 36 | label?.let { label(it) } 37 | lowered?.let { attr("lowered", it) } 38 | 39 | attrs?.invoke(this) 40 | }, content?.toHTMLElementContent()) 41 | 42 | @Composable 43 | fun MdFab( 44 | variant: String? = null, 45 | size: String? = null, 46 | label: String? = null, 47 | lowered: Boolean? = null, 48 | attrs: Attrs? = null, 49 | content: @Composable (MdFabScope.() -> Unit)? 50 | ) { 51 | require("@material/web/fab/fab.js") 52 | 53 | CommonMdFab("md-fab", variant, size, label, lowered, attrs, content) 54 | } 55 | 56 | @Composable 57 | fun MdBrandedFab( 58 | variant: String? = null, 59 | size: String? = null, 60 | label: String? = null, 61 | lowered: Boolean? = null, 62 | attrs: Attrs? = null, 63 | content: @Composable (MdFabScope.() -> Unit)? 64 | ) { 65 | require("@material/web/fab/branded-fab.js") 66 | 67 | CommonMdFab("md-branded-fab", variant, size, label, lowered, attrs, content) 68 | } 69 | 70 | 71 | class MdFabScope(val elementScope: ElementScope) { 72 | fun AttrsScope<*>.slotEqIcon() = 73 | slot("icon") 74 | } 75 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdIcon.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.runtime.DisposableEffect 5 | import com.huanshankeji.compose.web.attributes.Attrs 6 | import com.huanshankeji.compose.web.attributes.attr 7 | import org.jetbrains.compose.web.dom.TagElement 8 | import org.jetbrains.compose.web.dom.Text 9 | import org.w3c.dom.HTMLElement 10 | 11 | // https://github.com/material-components/material-web/blob/main/docs/components/icon.md 12 | 13 | /** 14 | * @param content see https://github.com/material-components/material-web/blob/main/docs/components/icon.md#usage 15 | */ 16 | @Composable 17 | fun MdIcon(filled: Boolean? = null, attrs: Attrs?, content: @Composable () -> Unit) { 18 | require("@material/web/icon/icon.js") 19 | 20 | @Suppress("RemoveExplicitTypeArguments") 21 | TagElement("md-icon", { 22 | filled?.let { attr("filled", it) } 23 | 24 | attrs?.invoke(this) 25 | }) { 26 | content() 27 | } 28 | } 29 | 30 | @Composable 31 | fun MdIcon(filled: Boolean? = null, attrs: Attrs?, materialIconName: String) = 32 | MdIcon(filled, attrs) { Text(materialIconName) } 33 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdIconButton.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.attributes.Attrs 5 | import com.huanshankeji.compose.web.attributes.attr 6 | import com.huanshankeji.compose.web.attributes.ext.* 7 | import com.huanshankeji.compose.web.attributes.slot 8 | import org.jetbrains.compose.web.attributes.AttrsScope 9 | import org.jetbrains.compose.web.dom.ElementScope 10 | import org.jetbrains.compose.web.dom.TagElement 11 | import org.w3c.dom.HTMLElement 12 | 13 | 14 | /* 15 | https://github.com/material-components/material-web/blob/main/docs/components/icon-button.md 16 | https://material-web.dev/components/icon-button/ 17 | https://material-web.dev/components/icon-button/stories/ 18 | */ 19 | 20 | 21 | @Composable 22 | private fun CommonMdIconButton( 23 | tagName: String, 24 | disabled: Boolean?, 25 | flipIconInRtl: Boolean?, 26 | href: String?, 27 | target: String?, 28 | ariaLabelSelected: String?, 29 | toggle: Boolean?, 30 | selected: Boolean?, 31 | type: String?, 32 | value: String?, 33 | attrs: Attrs?, 34 | content: @Composable MdIconButtonScope.() -> Unit 35 | ) = 36 | @Suppress("RemoveExplicitTypeArguments") 37 | TagElement( 38 | tagName, 39 | { 40 | disabled(disabled) 41 | flipIconInRtl?.let { attr("flip-icon-in-rtl", it) } 42 | href(href) 43 | target(target) 44 | ariaLabelSelected?.let { attr("aria-label-selected", it) } 45 | toggle?.let { attr("toggle", it) } 46 | selected(selected) 47 | type(type) 48 | value(value) 49 | 50 | attrs?.invoke(this) 51 | } 52 | ) { 53 | MdIconButtonScope(this).content() 54 | } 55 | 56 | 57 | @Composable 58 | fun MdIconButton( 59 | disabled: Boolean? = null, 60 | flipIconInRtl: Boolean? = null, 61 | href: String? = null, 62 | target: String? = null, 63 | ariaLabelSelected: String? = null, 64 | toggle: Boolean? = null, 65 | selected: Boolean? = null, 66 | type: String? = null, 67 | value: String? = null, 68 | attrs: Attrs? = null, 69 | content: @Composable MdIconButtonScope.() -> Unit 70 | ) { 71 | require("@material/web/iconbutton/icon-button.js") 72 | 73 | CommonMdIconButton( 74 | "md-icon-button", 75 | disabled, 76 | flipIconInRtl, 77 | href, 78 | target, 79 | ariaLabelSelected, 80 | toggle, 81 | selected, 82 | type, 83 | value, 84 | attrs, 85 | content 86 | ) 87 | } 88 | 89 | @Composable 90 | fun MdFilledIconButton( 91 | disabled: Boolean? = null, 92 | flipIconInRtl: Boolean? = null, 93 | href: String? = null, 94 | target: String? = null, 95 | ariaLabelSelected: String? = null, 96 | toggle: Boolean? = null, 97 | selected: Boolean? = null, 98 | type: String? = null, 99 | value: String? = null, 100 | attrs: Attrs? = null, 101 | content: @Composable MdIconButtonScope.() -> Unit 102 | ) { 103 | require("@material/web/iconbutton/filled-icon-button.js") 104 | 105 | CommonMdIconButton( 106 | "md-filled-icon-button", 107 | disabled, 108 | flipIconInRtl, 109 | href, 110 | target, 111 | ariaLabelSelected, 112 | toggle, 113 | selected, 114 | type, 115 | value, 116 | attrs, 117 | content 118 | ) 119 | } 120 | 121 | @Composable 122 | fun MdFilledTonalIconButton( 123 | disabled: Boolean? = null, 124 | flipIconInRtl: Boolean? = null, 125 | href: String? = null, 126 | target: String? = null, 127 | ariaLabelSelected: String? = null, 128 | toggle: Boolean? = null, 129 | selected: Boolean? = null, 130 | type: String? = null, 131 | value: String? = null, 132 | attrs: Attrs? = null, 133 | content: @Composable MdIconButtonScope.() -> Unit 134 | ) { 135 | require("@material/web/iconbutton/filled-tonal-icon-button.js") 136 | 137 | CommonMdIconButton( 138 | "md-filled-tonal-icon-button", 139 | disabled, 140 | flipIconInRtl, 141 | href, 142 | target, 143 | ariaLabelSelected, 144 | toggle, 145 | selected, 146 | type, 147 | value, 148 | attrs, 149 | content 150 | ) 151 | } 152 | 153 | @Composable 154 | fun MdOutlinedIconButton( 155 | disabled: Boolean? = null, 156 | flipIconInRtl: Boolean? = null, 157 | href: String? = null, 158 | target: String? = null, 159 | ariaLabelSelected: String? = null, 160 | toggle: Boolean? = null, 161 | selected: Boolean? = null, 162 | type: String? = null, 163 | value: String? = null, 164 | attrs: Attrs? = null, 165 | content: @Composable MdIconButtonScope.() -> Unit 166 | ) { 167 | require("@material/web/iconbutton/outlined-icon-button.js") 168 | 169 | CommonMdIconButton( 170 | "md-outlined-icon-button", 171 | disabled, 172 | flipIconInRtl, 173 | href, 174 | target, 175 | ariaLabelSelected, 176 | toggle, 177 | selected, 178 | type, 179 | value, 180 | attrs, 181 | content 182 | ) 183 | } 184 | 185 | 186 | class MdIconButtonScope(val elementScope: ElementScope) { 187 | fun AttrsScope<*>.slotEqSelected() = 188 | slot("selected") 189 | } 190 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdList.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.attributes.Attrs 5 | import com.huanshankeji.compose.web.attributes.ext.disabled 6 | import com.huanshankeji.compose.web.attributes.ext.href 7 | import com.huanshankeji.compose.web.attributes.ext.target 8 | import com.huanshankeji.compose.web.attributes.ext.type 9 | import com.huanshankeji.compose.web.attributes.slot 10 | import org.jetbrains.compose.web.attributes.AttrsScope 11 | import org.jetbrains.compose.web.dom.ElementScope 12 | import org.jetbrains.compose.web.dom.TagElement 13 | import org.w3c.dom.HTMLElement 14 | 15 | /* 16 | https://github.com/material-components/material-web/blob/main/docs/components/list.md 17 | https://material-web.dev/components/list/ 18 | https://material-web.dev/components/list/stories/ 19 | */ 20 | 21 | @Composable 22 | fun MdList(attrs: Attrs? = null, content: @Composable MdListScope.() -> Unit) { 23 | require("@material/web/list/list.js") 24 | 25 | TagElement("md-list", attrs) { 26 | MdListScope(this).content() 27 | } 28 | } 29 | 30 | class MdListScope(val elementScope: ElementScope) { 31 | @Composable 32 | fun MdListItem( 33 | disabled: Boolean? = null, 34 | type: MdListItemType? = null, 35 | href: String? = null, 36 | target: String? = null, 37 | attrs: Attrs? = null, 38 | content: @Composable MdListItemScope.() -> Unit 39 | ) = 40 | @OptIn(ExposedMdListApi::class) 41 | com.huanshankeji.compose.html.material3.MdListItem(disabled, type, href, target, attrs, content) 42 | } 43 | 44 | 45 | @RequiresOptIn( 46 | "An `MdListItem` is usually in an `MdList`. This component is exposed and should be used carefully. In most cases try to use the one in `MdListScope` instead.", 47 | RequiresOptIn.Level.WARNING 48 | ) 49 | @Retention(AnnotationRetention.BINARY) 50 | annotation class ExposedMdListApi 51 | 52 | @ExposedMdListApi 53 | @Composable 54 | fun MdListItem( 55 | disabled: Boolean? = null, 56 | type: MdListItemType? = null, 57 | href: String? = null, 58 | target: String? = null, 59 | attrs: Attrs? = null, 60 | content: @Composable MdListItemScope.() -> Unit 61 | ) { 62 | require("@material/web/list/list-item.js") 63 | 64 | //@Suppress("RemoveExplicitTypeArguments") 65 | TagElement("md-list-item", { 66 | disabled(disabled) 67 | type(type?.stringValue) 68 | href(href) 69 | target(target) 70 | 71 | attrs?.invoke(this) 72 | }) { 73 | MdListItemScope(this).content() 74 | } 75 | } 76 | 77 | enum class MdListItemType(val stringValue: String) { 78 | Text("text"), Link("link"), Button("button") 79 | } 80 | 81 | class MdListItemScope(val elementScope: ElementScope) { 82 | enum class Slot(val stringValue: String) { 83 | Headline("headline"), 84 | Start("start"), End("end"), 85 | SupportingText("supporting-text"), TrailingSupportingText("trailing-supporting-text"), 86 | Overline("overline") 87 | } 88 | 89 | fun AttrsScope<*>.slot(value: Slot) = 90 | slot(value.stringValue) 91 | } 92 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdMenu.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.web.events.SyntheticEvent 5 | import com.huanshankeji.compose.web.attributes.Attrs 6 | import com.huanshankeji.compose.web.attributes.attrIfNotNull 7 | import com.huanshankeji.compose.web.attributes.ext.* 8 | import com.huanshankeji.compose.web.attributes.slot 9 | import org.jetbrains.compose.web.attributes.AttrsScope 10 | import org.jetbrains.compose.web.dom.ElementScope 11 | import org.jetbrains.compose.web.dom.TagElement 12 | import org.w3c.dom.HTMLElement 13 | import org.w3c.dom.events.EventTarget 14 | 15 | /* 16 | https://github.com/material-components/material-web/blob/main/docs/components/menu.md 17 | https://material-web.dev/components/menu/ 18 | https://material-web.dev/components/menu/stories/ 19 | */ 20 | 21 | 22 | private fun AttrsScope.anchorCorner(anchorCorner: String?) { 23 | attrIfNotNull("anchor-corner", anchorCorner) 24 | } 25 | 26 | private fun AttrsScope.menuCorner(menuCorner: String?) { 27 | attrIfNotNull("menu-corner", menuCorner) 28 | } 29 | 30 | 31 | // made abstract so there is no need to add the implemented methods 32 | @JsModule("@material/web/menu/menu.js") 33 | @JsName("MdMenu") 34 | abstract external class MdMenuElement : HTMLElement { 35 | var anchorElement: HTMLElement? 36 | // ... 37 | } 38 | 39 | @Composable 40 | fun MdMenu( 41 | anchor: String? = null, 42 | positioning: String? = null, 43 | quick: Boolean? = null, 44 | hasOverflow: Boolean? = null, 45 | open: Boolean? = null, 46 | // see https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected 47 | xOffset: Number? = null, 48 | yOffset: Number? = null, 49 | typeheadDelay: Number? = null, 50 | anchorCorner: String? = null, 51 | menuCorner: String? = null, 52 | stayOpenOnOutsideClick: Boolean? = null, 53 | stayOpenOnFocusout: Boolean? = null, 54 | skipRestoreFocus: Boolean? = null, 55 | defaultFocus: Boolean? = null, 56 | attrs: Attrs? = null, 57 | content: @Composable ElementScope.() -> Unit 58 | ) { 59 | require("@material/web/menu/menu.js") 60 | 61 | TagElement("md-menu", { 62 | attrIfNotNull("anchor", anchor) 63 | attrIfNotNull("positioning", positioning) 64 | attrIfNotNull("quick", quick) 65 | attrIfNotNull("has-overflow", hasOverflow) 66 | attrIfNotNull("open", open) 67 | attrIfNotNull("x-offset", xOffset) 68 | attrIfNotNull("y-offset", yOffset) 69 | attrIfNotNull("typehead-delay", typeheadDelay) 70 | anchorCorner(anchorCorner) 71 | menuCorner(menuCorner) 72 | attrIfNotNull("stay-open-on-outside-click", stayOpenOnOutsideClick) 73 | attrIfNotNull("stay-open-on-focusout", stayOpenOnFocusout) 74 | attrIfNotNull("skip-restore-focus", skipRestoreFocus) 75 | attrIfNotNull("default-focus", defaultFocus) 76 | 77 | attrs?.invoke(this) 78 | }) { 79 | content() 80 | } 81 | } 82 | 83 | // events 84 | 85 | fun > AttrsScope.onOpening(listener: (T) -> Unit) = 86 | addEventListener("opening", listener) 87 | 88 | fun > AttrsScope.onOpened(listener: (T) -> Unit) = 89 | addEventListener("opened", listener) 90 | 91 | fun > AttrsScope.onClosing(listener: (T) -> Unit) = 92 | addEventListener("closing", listener) 93 | 94 | fun > AttrsScope.onClosed(listener: (SyntheticEvent) -> Unit) = 95 | addEventListener("closed", listener) 96 | 97 | class MdMenuArgs( 98 | val anchor: String? = null, 99 | val positioning: String? = null, 100 | val quick: Boolean? = null, 101 | val hasOverflow: Boolean? = null, 102 | val open: Boolean? = null, 103 | val xOffset: Int? = null, 104 | val yOffset: Int? = null, 105 | val typeheadDelay: Number? = null, 106 | val anchorCorner: String? = null, 107 | val menuCorner: String? = null, 108 | val stayOpenOnOutsideClick: Boolean? = null, 109 | val stayOpenOnFocusout: Boolean? = null, 110 | val skipRestoreFocus: Boolean? = null, 111 | val defaultFocus: Boolean? = null, 112 | val attrs: Attrs? = null, 113 | val content: @Composable ElementScope.() -> Unit 114 | ) 115 | 116 | 117 | @Composable 118 | fun MdMenuItem( 119 | disabled: Boolean? = null, 120 | type: String? = null, 121 | href: String? = null, 122 | target: String? = null, 123 | keepOpen: Boolean? = null, 124 | selected: Boolean? = null, 125 | attrs: Attrs? = null, 126 | content: @Composable MdMenuItemScope.() -> Unit 127 | ) { 128 | require("@material/web/menu/menu-item.js") 129 | 130 | TagElement("md-menu-item", { 131 | disabled(disabled) 132 | type(type) 133 | href(href) 134 | target(target) 135 | attrIfNotNull("keep-open", keepOpen) 136 | selected(selected) 137 | 138 | attrs?.invoke(this) 139 | }) { 140 | MdMenuItemScope(this).content() 141 | } 142 | } 143 | 144 | class MdMenuItemScope(val elementScope: ElementScope) { 145 | enum class Slot(val stringValue: String) { 146 | Headline("headline"), Start("start"), End("end") 147 | } 148 | 149 | fun AttrsScope<*>.slot(value: Slot) = 150 | slot(value.stringValue) 151 | } 152 | 153 | class MdMenuItemArgs( 154 | val disabled: Boolean? = null, 155 | val type: String? = null, 156 | val href: String? = null, 157 | val target: String? = null, 158 | val keepOpen: Boolean? = null, 159 | val selected: Boolean? = null, 160 | val attrs: Attrs? = null, 161 | val content: @Composable MdMenuItemScope.() -> Unit 162 | ) 163 | 164 | 165 | @Composable 166 | fun MdSubMenu( 167 | anchorCorner: String? = null, 168 | menuCorner: String? = null, 169 | hoverOpenDelay: Number? = null, 170 | hoverCloseDelay: Number? = null, 171 | //isSubMenu : Boolean? = null, // `md-sub-menu`, read-only 172 | attrs: Attrs? = null, 173 | content: @Composable MdSubMenuScope.() -> Unit 174 | ) { 175 | require("@material/web/menu/sub-menu.js") 176 | 177 | TagElement("md-sub-menu", { 178 | anchorCorner(anchorCorner) 179 | menuCorner(menuCorner) 180 | attrIfNotNull("hover-open-delay", hoverOpenDelay) 181 | attrIfNotNull("hover-close-delay", hoverCloseDelay) 182 | 183 | attrs?.invoke(this) 184 | }) { 185 | MdSubMenuScope(this).content() 186 | } 187 | } 188 | 189 | class MdSubMenuScope(val elementScope: ElementScope) { 190 | enum class Slot(val stringValue: String) { 191 | Item("item"), Menu("menu") 192 | } 193 | 194 | fun AttrsScope<*>.slot(value: Slot) = 195 | slot(value.stringValue) 196 | } 197 | 198 | @Composable 199 | fun MdSubMenu( 200 | anchorCorner: String? = null, 201 | menuCorner: String? = null, 202 | hoverOpenDelay: Number? = null, 203 | hoverCloseDelay: Number? = null, 204 | //isSubMenu : Boolean? = null, // `md-sub-menu` 205 | attrs: Attrs? = null, 206 | mdMenuItemArgs: MdMenuItemArgs, 207 | mdMenuArgs: MdMenuArgs 208 | ) = 209 | MdSubMenu(anchorCorner, menuCorner, hoverOpenDelay, hoverCloseDelay, attrs) { 210 | with(mdMenuItemArgs) { 211 | MdMenuItem(disabled, type, href, target, keepOpen, selected, { 212 | slot(MdSubMenuScope.Slot.Item) 213 | 214 | attrs?.invoke(this) 215 | }, content) 216 | } 217 | with(mdMenuArgs) { 218 | MdMenu( 219 | anchor, 220 | positioning, 221 | quick, 222 | hasOverflow, 223 | open, 224 | xOffset, 225 | yOffset, 226 | typeheadDelay, 227 | this.anchorCorner, 228 | this.menuCorner, 229 | stayOpenOnOutsideClick, 230 | stayOpenOnFocusout, 231 | skipRestoreFocus, 232 | defaultFocus, 233 | { 234 | slot(MdSubMenuScope.Slot.Menu) 235 | 236 | attrs?.invoke(this) 237 | }, 238 | content 239 | ) 240 | } 241 | } 242 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdNavigationBar.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.attributes.Attrs 5 | import com.huanshankeji.compose.web.attributes.attrIfNotNull 6 | import org.jetbrains.compose.web.dom.ElementScope 7 | import org.jetbrains.compose.web.dom.TagElement 8 | import org.w3c.dom.HTMLElement 9 | 10 | /* 11 | https://github.com/material-components/material-web/blob/main/labs/navigationbar/internal/navigation-bar.ts 12 | https://github.com/material-components/material-web/blob/main/labs/navigationbar/demo/stories.ts 13 | */ 14 | 15 | @MaterialWebLabsApi 16 | @Composable 17 | fun MdNavigationBar( 18 | activeIndex: Int? = null, 19 | hideInactiveLabels: Boolean? = null, 20 | attrs: Attrs? = null, 21 | content: @Composable (ElementScope.() -> Unit)? 22 | ) { 23 | require("@material/web/labs/navigationbar/navigation-bar.js") 24 | 25 | TagElement("md-navigation-bar", { 26 | attrIfNotNull("active-index", activeIndex) 27 | attrIfNotNull("hide-inactive-labels", hideInactiveLabels) 28 | 29 | attrs?.invoke(this) 30 | }, content) 31 | } 32 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdNavigationTab.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.attributes.Attrs 5 | import com.huanshankeji.compose.web.attributes.attrIfNotNull 6 | import com.huanshankeji.compose.web.attributes.ext.disabled 7 | import com.huanshankeji.compose.web.attributes.ext.label 8 | import com.huanshankeji.compose.web.attributes.slot 9 | import org.jetbrains.compose.web.attributes.AttrsScope 10 | import org.jetbrains.compose.web.dom.ElementScope 11 | import org.jetbrains.compose.web.dom.TagElement 12 | import org.w3c.dom.HTMLElement 13 | 14 | /* 15 | https://github.com/material-components/material-web/blob/main/labs/navigationtab/internal/navigation-tab.ts 16 | https://github.com/material-components/material-web/blob/main/labs/navigationbar/demo/stories.ts (navigation bar storybook) 17 | */ 18 | 19 | // a workaround for probably a bug, needed since Kotlin 2.0.0 because of "Cannot infer type for this parameter. Please specify it explicitly." 20 | private fun (@Composable MdNavigationTabScope.() -> Unit).toHTMLElementContent(): @Composable ElementScope.() -> Unit = 21 | { MdNavigationTabScope(this).(this@toHTMLElementContent)() } 22 | 23 | @MaterialWebLabsApi 24 | @Composable 25 | fun MdNavigationTab( 26 | disabled: Boolean? = null, 27 | active: Boolean? = null, 28 | hideInactiveLabel: Boolean? = null, 29 | label: String? = null, 30 | badgeValue: String? = null, 31 | showBadge: Boolean? = null, 32 | attrs: Attrs? = null, 33 | content: @Composable (MdNavigationTabScope.() -> Unit)? 34 | ) { 35 | require("@material/web/labs/navigationtab/navigation-tab.js") 36 | 37 | TagElement("md-navigation-tab", { 38 | disabled(disabled) 39 | attrIfNotNull("active", active) 40 | attrIfNotNull("hide-inactive-label", hideInactiveLabel) 41 | label(label) 42 | attrIfNotNull("badge-value", badgeValue) 43 | attrIfNotNull("show-badge", showBadge) 44 | 45 | attrs?.invoke(this) 46 | }, content?.toHTMLElementContent()) 47 | } 48 | 49 | class MdNavigationTabScope(val elementScope: ElementScope) { 50 | enum class Slot(val stringValue: String) { 51 | ActiveIcon("active-icon"), InactiveIcon("inactive-icon") 52 | } 53 | 54 | fun AttrsScope<*>.slot(value: Slot) = 55 | slot(value.stringValue) 56 | } 57 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdProgress.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.html.material3.attributes.indeterminate 5 | import com.huanshankeji.compose.web.attributes.Attrs 6 | import com.huanshankeji.compose.web.attributes.attrIfNotNull 7 | import org.jetbrains.compose.web.dom.ElementScope 8 | import org.jetbrains.compose.web.dom.TagElement 9 | import org.w3c.dom.HTMLElement 10 | 11 | /* 12 | https://github.com/material-components/material-web/blob/main/docs/components/progress.md 13 | https://material-web.dev/components/progress/ 14 | https://material-web.dev/components/progress/stories/ 15 | */ 16 | 17 | @Composable 18 | private fun CommonMdProgress( 19 | tagName: String, 20 | attrsBefore: Attrs?, 21 | value: Number?, 22 | max: Number?, 23 | indeterminate: Boolean?, 24 | fourColor: Boolean?, 25 | attrs: Attrs?, 26 | content: @Composable (ElementScope.() -> Unit)? 27 | ) = 28 | TagElement(tagName, { 29 | attrsBefore?.invoke(this) 30 | 31 | attrIfNotNull("value", value) 32 | attrIfNotNull("max", max) 33 | indeterminate(indeterminate) 34 | attrIfNotNull("four-color", fourColor) 35 | 36 | attrs?.invoke(this) 37 | }, content) 38 | 39 | @Composable 40 | fun MdLinearProgress( 41 | buffer: Number? = null, 42 | value: Number? = null, 43 | max: Number? = null, 44 | indeterminate: Boolean? = null, 45 | fourColor: Boolean? = null, 46 | attrs: Attrs? = null, 47 | content: @Composable (ElementScope.() -> Unit)? = null 48 | ) { 49 | require("@material/web/progress/linear-progress.js") 50 | 51 | CommonMdProgress( 52 | "md-linear-progress", 53 | { attrIfNotNull("buffer", buffer) }, 54 | value, max, indeterminate, fourColor, attrs, content 55 | ) 56 | } 57 | 58 | @Composable 59 | fun MdCircularProgress( 60 | value: Number? = null, 61 | max: Number? = null, 62 | indeterminate: Boolean? = null, 63 | fourColor: Boolean? = null, 64 | attrs: Attrs? = null, 65 | content: @Composable (ElementScope.() -> Unit)? = null 66 | ) { 67 | require("@material/web/progress/circular-progress.js") 68 | 69 | CommonMdProgress( 70 | "md-circular-progress", 71 | null, 72 | value, max, indeterminate, fourColor, attrs, content 73 | ) 74 | } 75 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdSwitch.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.attributes.Attrs 5 | import com.huanshankeji.compose.web.attributes.attr 6 | import com.huanshankeji.compose.web.attributes.ext.* 7 | import org.jetbrains.compose.web.dom.Label 8 | import org.jetbrains.compose.web.dom.TagElement 9 | import org.jetbrains.compose.web.dom.Text 10 | import org.w3c.dom.HTMLElement 11 | 12 | /* 13 | https://github.com/material-components/material-web/blob/main/docs/components/switch.md 14 | https://material-web.dev/components/switch/ 15 | https://material-web.dev/components/switch/stories/ 16 | */ 17 | @Composable 18 | fun MdSwitch( 19 | disabled: Boolean? = null, 20 | selected: Boolean? = null, // `false` won't work here 21 | icons: Boolean? = null, 22 | showOnlySelectedIcon: Boolean? = null, 23 | required: Boolean? = null, 24 | value: String? = null, 25 | name: String? = null, 26 | form: String? = null, 27 | attrs: Attrs? = null 28 | ) { 29 | require("@material/web/switch/switch.js") 30 | 31 | TagElement("md-switch", { 32 | disabled(disabled) 33 | selected?.let { attr("selected", it) } 34 | icons?.let { attr("icons", it) } 35 | showOnlySelectedIcon?.let { attr("show-only-selected-icon", it) } 36 | required(required) 37 | value(value) 38 | name(name) 39 | form(form) 40 | 41 | attrs?.invoke(this) 42 | }, null) 43 | } 44 | 45 | // https://github.com/material-components/material-web/blob/main/docs/components/switch.md#label 46 | @Composable 47 | fun LabelWithMdSwitch( 48 | label: String, 49 | disabled: Boolean? = null, 50 | selected: Boolean? = null, 51 | icons: Boolean? = null, 52 | showOnlySelectedIcon: Boolean? = null, 53 | required: Boolean? = null, 54 | value: String? = null, 55 | name: String? = null, 56 | form: String? = null, 57 | attrs: Attrs? = null 58 | ) = 59 | Label { 60 | Text(label) 61 | MdSwitch(disabled, selected, icons, showOnlySelectedIcon, required, value, name, form, attrs) 62 | } 63 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/MdTextField.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.huanshankeji.compose.web.attributes.Attrs 5 | import com.huanshankeji.compose.web.attributes.attr 6 | import com.huanshankeji.compose.web.attributes.ext.* 7 | import com.huanshankeji.compose.web.attributes.slot 8 | import org.jetbrains.compose.web.attributes.AttrsScope 9 | import org.jetbrains.compose.web.attributes.AutoComplete 10 | import org.jetbrains.compose.web.attributes.InputMode 11 | import org.jetbrains.compose.web.attributes.InputType 12 | import org.jetbrains.compose.web.dom.ElementScope 13 | import org.jetbrains.compose.web.dom.TagElement 14 | import org.w3c.dom.HTMLElement 15 | 16 | /* 17 | https://github.com/material-components/material-web/blob/main/docs/components/text-field.md 18 | https://material-web.dev/components/text-field/ 19 | https://material-web.dev/components/text-field/stories/ 20 | */ 21 | 22 | // a workaround for probably a bug, needed since Kotlin 2.0.0 because of "Cannot infer type for this parameter. Please specify it explicitly." 23 | private fun (@Composable MdTextFieldScope.() -> Unit).toHTMLElementContent(): @Composable ElementScope.() -> Unit = 24 | { MdTextFieldScope(this).(this@toHTMLElementContent)() } 25 | 26 | @Composable 27 | private fun CommonTextField( 28 | tagName: String, 29 | disabled: Boolean?, 30 | error: Boolean?, 31 | errorText: String?, 32 | label: String?, // This attribute seems to have different semantics here from its original semantics in HTML. 33 | required: Boolean?, 34 | value: String?, 35 | prefixText: String?, 36 | suffixText: String?, 37 | hasLeadingIcon: Boolean?, 38 | hasTrailingIcon: Boolean?, 39 | supportingText: String?, 40 | textDirection: String?, 41 | rows: Int?, // The JavaScript `number` is actually a `Double`. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number. 42 | cols: Int?, 43 | inputMode: InputMode?, 44 | max: String?, 45 | maxLength: Int?, 46 | min: String?, 47 | minLength: Int?, 48 | pattern: String?, 49 | placeholder: String?, 50 | readOnly: Boolean?, 51 | multiple: Boolean?, 52 | step: String?, 53 | type: InputType<*>?, 54 | autocomplete: AutoComplete?, 55 | attrs: Attrs?, 56 | content: @Composable (MdTextFieldScope.() -> Unit)? 57 | ) = 58 | TagElement(tagName, { 59 | disabled(disabled) 60 | error?.let { attr("error", it) } 61 | errorText?.let { attr("error-text", it) } 62 | label(label) 63 | required(required) 64 | value(value) 65 | prefixText?.let { attr("prefix-text", it) } 66 | suffixText?.let { attr("suffix-text", it) } 67 | hasLeadingIcon?.let { attr("has-leading-icon", it) } 68 | hasTrailingIcon?.let { attr("has-trailing-icon", it) } 69 | supportingText?.let { attr("supporting-text", it) } 70 | textDirection?.let { attr("text-direction", it) } 71 | rows?.let { attr("rows", it) } 72 | cols?.let { attr("cols", it) } 73 | inputMode?.let { inputMode(it) } 74 | max(max) 75 | maxLength(maxLength) 76 | min(min) 77 | minLength(minLength) 78 | pattern(pattern) 79 | placeholder(placeholder) 80 | readOnly(readOnly) 81 | multiple(multiple) 82 | step(step) 83 | type(type) 84 | autoComplete(autocomplete) 85 | 86 | attrs?.invoke(this) 87 | }, content?.toHTMLElementContent()) 88 | 89 | @Composable 90 | fun MdFilledTextField( 91 | disabled: Boolean? = null, 92 | error: Boolean? = null, 93 | errorText: String? = null, 94 | label: String? = null, 95 | required: Boolean? = null, 96 | value: String? = null, 97 | prefixText: String? = null, 98 | suffixText: String? = null, 99 | hasLeadingIcon: Boolean? = null, 100 | hasTrailingIcon: Boolean? = null, 101 | supportingText: String? = null, 102 | textDirection: String? = null, 103 | rows: Int? = null, 104 | cols: Int? = null, 105 | inputMode: InputMode? = null, 106 | max: String? = null, 107 | maxLength: Int? = null, 108 | min: String? = null, 109 | minLength: Int? = null, 110 | pattern: String? = null, 111 | placeholder: String? = null, 112 | readOnly: Boolean? = null, 113 | multiple: Boolean? = null, 114 | step: String? = null, 115 | type: InputType<*>? = null, 116 | autocomplete: AutoComplete? = null, 117 | attrs: Attrs? = null, 118 | content: (@Composable MdTextFieldScope.() -> Unit)? = null 119 | ) { 120 | require("@material/web/textfield/filled-text-field.js") 121 | 122 | CommonTextField( 123 | "md-filled-text-field", 124 | disabled, 125 | error, 126 | errorText, 127 | label, 128 | required, 129 | value, 130 | prefixText, 131 | suffixText, 132 | hasLeadingIcon, 133 | hasTrailingIcon, 134 | supportingText, 135 | textDirection, 136 | rows, 137 | cols, 138 | inputMode, 139 | max, 140 | maxLength, 141 | min, 142 | minLength, 143 | pattern, 144 | placeholder, 145 | readOnly, 146 | multiple, 147 | step, 148 | type, 149 | autocomplete, 150 | attrs, 151 | content 152 | ) 153 | } 154 | 155 | @Composable 156 | fun MdOutlinedTextField( 157 | disabled: Boolean? = null, 158 | error: Boolean? = null, 159 | errorText: String? = null, 160 | label: String? = null, 161 | required: Boolean? = null, 162 | value: String? = null, 163 | prefixText: String? = null, 164 | suffixText: String? = null, 165 | hasLeadingIcon: Boolean? = null, 166 | hasTrailingIcon: Boolean? = null, 167 | supportingText: String? = null, 168 | textDirection: String? = null, 169 | rows: Int? = null, 170 | cols: Int? = null, 171 | inputMode: InputMode? = null, 172 | max: String? = null, 173 | maxLength: Int? = null, 174 | min: String? = null, 175 | minLength: Int? = null, 176 | pattern: String? = null, 177 | placeholder: String? = null, 178 | readOnly: Boolean? = null, 179 | multiple: Boolean? = null, 180 | step: String? = null, 181 | type: InputType<*>? = null, 182 | autocomplete: AutoComplete? = null, 183 | attrs: Attrs? = null, 184 | content: (@Composable MdTextFieldScope.() -> Unit)? = null 185 | ) { 186 | require("@material/web/textfield/outlined-text-field.js") 187 | 188 | CommonTextField( 189 | "md-outlined-text-field", 190 | disabled, 191 | error, 192 | errorText, 193 | label, 194 | required, 195 | value, 196 | prefixText, 197 | suffixText, 198 | hasLeadingIcon, 199 | hasTrailingIcon, 200 | supportingText, 201 | textDirection, 202 | rows, 203 | cols, 204 | inputMode, 205 | max, 206 | maxLength, 207 | min, 208 | minLength, 209 | pattern, 210 | placeholder, 211 | readOnly, 212 | multiple, 213 | step, 214 | type, 215 | autocomplete, 216 | attrs, 217 | content 218 | ) 219 | } 220 | 221 | 222 | class MdTextFieldScope(val elementScope: ElementScope) { 223 | enum class Slot(val value: String) { 224 | LeadingIcon("leading-icon"), TrailingIcon("trailing-icon") 225 | } 226 | 227 | fun AttrsScope<*>.slot(value: Slot) = 228 | slot(value.value) 229 | } 230 | 231 | object TextareaInputType : InputType.InputTypeWithStringValue("textarea") 232 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/Require.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3 2 | 3 | // TODO use the one in "kotlin-common" 4 | external fun require(module: String): dynamic 5 | -------------------------------------------------------------------------------- /compose-html-material3/src/jsMain/kotlin/com/huanshankeji/compose/html/material3/attributes/Attrs.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji.compose.html.material3.attributes 2 | 3 | import com.huanshankeji.compose.web.attributes.attr 4 | import org.jetbrains.compose.web.attributes.AttrsScope 5 | 6 | fun AttrsScope<*>.indeterminate(indeterminate: Boolean?) { 7 | indeterminate?.let { attr("indeterminate", it) } 8 | } 9 | -------------------------------------------------------------------------------- /gradle-plugins/README.md: -------------------------------------------------------------------------------- 1 | # Gradle plugins 2 | TODO: find a way to [make further adjustments to the webpack configuration](https://kotlinlang.org/docs/js-project-setup.html#webpack-configuration-file) in the target project. 3 | -------------------------------------------------------------------------------- /gradle-plugins/api/compose-html-material-gradle-plugins-legacy.api: -------------------------------------------------------------------------------- 1 | public final class GeneratedVersionsKt { 2 | public static final field projectVersion Ljava/lang/String; 3 | } 4 | 5 | public final class com/huanshankeji/ComposeHtmlMaterialConventionsLegacyPlugin : org/gradle/api/Plugin { 6 | public fun ()V 7 | public synthetic fun apply (Ljava/lang/Object;)V 8 | public fun apply (Lorg/gradle/api/Project;)V 9 | } 10 | 11 | public final class com/huanshankeji/Compose_html_material_conventions_legacy_gradle : org/gradle/kotlin/dsl/precompile/v1/PrecompiledProjectScript { 12 | public fun (Lorg/gradle/api/Project;Lorg/gradle/api/Project;)V 13 | public static final fun main ([Ljava/lang/String;)V 14 | } 15 | 16 | public final class com/huanshankeji/NpmDevDependencyVersions { 17 | public static final field INSTANCE Lcom/huanshankeji/NpmDevDependencyVersions; 18 | public final fun getCssLoader ()Ljava/lang/String; 19 | public final fun getExtractLoader ()Ljava/lang/String; 20 | public final fun getFileLoader ()Ljava/lang/String; 21 | public final fun getSass ()Ljava/lang/String; 22 | public final fun getSassLoader ()Ljava/lang/String; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /gradle-plugins/build.gradle.kts: -------------------------------------------------------------------------------- 1 | import com.huanshankeji.SourceFile 2 | import com.huanshankeji.generateKotlinSources 3 | 4 | plugins { 5 | `kotlin-dsl` 6 | //id("com.gradle.plugin-publish") version "1.2.1" 7 | } 8 | 9 | //kotlin.jvmToolchain(8) 10 | 11 | repositories { 12 | mavenCentral() 13 | } 14 | 15 | dependencies { 16 | implementation(kotlin("gradle-plugin")) 17 | } 18 | 19 | 20 | generateKotlinSources( 21 | sourceFiles = listOf( 22 | SourceFile( 23 | "GeneratedVersions.kt", 24 | "const val projectVersion = \"$projectVersion\"\n" 25 | ) 26 | ) 27 | ) 28 | 29 | 30 | group = "com.huanshankeji" 31 | version = projectVersion 32 | 33 | gradlePlugin { 34 | website.set("https://github.com/huanshankeji/compose-html-material") 35 | vcsUrl.set("${website.get()}.git") 36 | 37 | plugins { 38 | getByName("com.huanshankeji.compose-html-material-conventions-legacy") { 39 | displayName = "Compose HTML Material conventions" 40 | description = 41 | "This plugin adds the needed Maven dependencies and npm devDependencies (mainly for Webpack) for a Compose HTML project with Material components." 42 | tags.set(listOf("kotlin", "kotlin-js", "compose-multiplatform", "compose-html")) 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /gradle-plugins/src/main/kotlin/com/huanshankeji/Versions.kt: -------------------------------------------------------------------------------- 1 | package com.huanshankeji 2 | 3 | object NpmDevDependencyVersions { 4 | val cssLoader = "^6.5.1" 5 | val extractLoader = "^5.1.0" 6 | val fileLoader = "^6.2.0" 7 | val sass = "^1.47.0" 8 | val sassLoader = "^12.4.0" 9 | } -------------------------------------------------------------------------------- /gradle-plugins/src/main/kotlin/com/huanshankeji/compose-html-material-conventions-legacy.gradle.kts: -------------------------------------------------------------------------------- 1 | package com.huanshankeji 2 | 3 | import projectVersion 4 | 5 | plugins { 6 | kotlin("multiplatform") 7 | } 8 | 9 | kotlin { 10 | sourceSets { 11 | val jsMain by getting { 12 | dependencies { 13 | implementation("com.huanshankeji:compose-html-material-legacy:$projectVersion") 14 | 15 | implementation(devNpm("css-loader", NpmDevDependencyVersions.cssLoader)) 16 | implementation(devNpm("extract-loader", NpmDevDependencyVersions.extractLoader)) 17 | implementation(devNpm("file-loader", NpmDevDependencyVersions.fileLoader)) 18 | implementation(devNpm("sass", NpmDevDependencyVersions.sass)) 19 | implementation(devNpm("sass-loader", NpmDevDependencyVersions.sassLoader)) 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | # for Dokka 2 | org.jetbrains.dokka.experimental.gradle.pluginMode=V2Enabled 3 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huanshankeji/compose-html-material/ccb951c6814d0ee2f48706d56e43698c1e5ae0f6/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | # SPDX-License-Identifier: Apache-2.0 19 | # 20 | 21 | ############################################################################## 22 | # 23 | # Gradle start up script for POSIX generated by Gradle. 24 | # 25 | # Important for running: 26 | # 27 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 28 | # noncompliant, but you have some other compliant shell such as ksh or 29 | # bash, then to run this script, type that shell name before the whole 30 | # command line, like: 31 | # 32 | # ksh Gradle 33 | # 34 | # Busybox and similar reduced shells will NOT work, because this script 35 | # requires all of these POSIX shell features: 36 | # * functions; 37 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 38 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 39 | # * compound commands having a testable exit status, especially «case»; 40 | # * various built-in commands including «command», «set», and «ulimit». 41 | # 42 | # Important for patching: 43 | # 44 | # (2) This script targets any POSIX shell, so it avoids extensions provided 45 | # by Bash, Ksh, etc; in particular arrays are avoided. 46 | # 47 | # The "traditional" practice of packing multiple parameters into a 48 | # space-separated string is a well documented source of bugs and security 49 | # problems, so this is (mostly) avoided, by progressively accumulating 50 | # options in "$@", and eventually passing that to Java. 51 | # 52 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 53 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 54 | # see the in-line comments for details. 55 | # 56 | # There are tweaks for specific operating systems such as AIX, CygWin, 57 | # Darwin, MinGW, and NonStop. 58 | # 59 | # (3) This script is generated from the Groovy template 60 | # https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 61 | # within the Gradle project. 62 | # 63 | # You can find Gradle at https://github.com/gradle/gradle/. 64 | # 65 | ############################################################################## 66 | 67 | # Attempt to set APP_HOME 68 | 69 | # Resolve links: $0 may be a link 70 | app_path=$0 71 | 72 | # Need this for daisy-chained symlinks. 73 | while 74 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 75 | [ -h "$app_path" ] 76 | do 77 | ls=$( ls -ld "$app_path" ) 78 | link=${ls#*' -> '} 79 | case $link in #( 80 | /*) app_path=$link ;; #( 81 | *) app_path=$APP_HOME$link ;; 82 | esac 83 | done 84 | 85 | # This is normally unused 86 | # shellcheck disable=SC2034 87 | APP_BASE_NAME=${0##*/} 88 | # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036) 89 | APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s 90 | ' "$PWD" ) || exit 91 | 92 | # Use the maximum available, or set MAX_FD != -1 to use that value. 93 | MAX_FD=maximum 94 | 95 | warn () { 96 | echo "$*" 97 | } >&2 98 | 99 | die () { 100 | echo 101 | echo "$*" 102 | echo 103 | exit 1 104 | } >&2 105 | 106 | # OS specific support (must be 'true' or 'false'). 107 | cygwin=false 108 | msys=false 109 | darwin=false 110 | nonstop=false 111 | case "$( uname )" in #( 112 | CYGWIN* ) cygwin=true ;; #( 113 | Darwin* ) darwin=true ;; #( 114 | MSYS* | MINGW* ) msys=true ;; #( 115 | NONSTOP* ) nonstop=true ;; 116 | esac 117 | 118 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 119 | 120 | 121 | # Determine the Java command to use to start the JVM. 122 | if [ -n "$JAVA_HOME" ] ; then 123 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 124 | # IBM's JDK on AIX uses strange locations for the executables 125 | JAVACMD=$JAVA_HOME/jre/sh/java 126 | else 127 | JAVACMD=$JAVA_HOME/bin/java 128 | fi 129 | if [ ! -x "$JAVACMD" ] ; then 130 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 131 | 132 | Please set the JAVA_HOME variable in your environment to match the 133 | location of your Java installation." 134 | fi 135 | else 136 | JAVACMD=java 137 | if ! command -v java >/dev/null 2>&1 138 | then 139 | die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 140 | 141 | Please set the JAVA_HOME variable in your environment to match the 142 | location of your Java installation." 143 | fi 144 | fi 145 | 146 | # Increase the maximum file descriptors if we can. 147 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 148 | case $MAX_FD in #( 149 | max*) 150 | # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked. 151 | # shellcheck disable=SC2039,SC3045 152 | MAX_FD=$( ulimit -H -n ) || 153 | warn "Could not query maximum file descriptor limit" 154 | esac 155 | case $MAX_FD in #( 156 | '' | soft) :;; #( 157 | *) 158 | # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked. 159 | # shellcheck disable=SC2039,SC3045 160 | ulimit -n "$MAX_FD" || 161 | warn "Could not set maximum file descriptor limit to $MAX_FD" 162 | esac 163 | fi 164 | 165 | # Collect all arguments for the java command, stacking in reverse order: 166 | # * args from the command line 167 | # * the main class name 168 | # * -classpath 169 | # * -D...appname settings 170 | # * --module-path (only if needed) 171 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 172 | 173 | # For Cygwin or MSYS, switch paths to Windows format before running java 174 | if "$cygwin" || "$msys" ; then 175 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 176 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 177 | 178 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 179 | 180 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 181 | for arg do 182 | if 183 | case $arg in #( 184 | -*) false ;; # don't mess with options #( 185 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 186 | [ -e "$t" ] ;; #( 187 | *) false ;; 188 | esac 189 | then 190 | arg=$( cygpath --path --ignore --mixed "$arg" ) 191 | fi 192 | # Roll the args list around exactly as many times as the number of 193 | # args, so each arg winds up back in the position where it started, but 194 | # possibly modified. 195 | # 196 | # NB: a `for` loop captures its iteration list before it begins, so 197 | # changing the positional parameters here affects neither the number of 198 | # iterations, nor the values presented in `arg`. 199 | shift # remove old arg 200 | set -- "$@" "$arg" # push replacement arg 201 | done 202 | fi 203 | 204 | 205 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 206 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 207 | 208 | # Collect all arguments for the java command: 209 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments, 210 | # and any embedded shellness will be escaped. 211 | # * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be 212 | # treated as '${Hostname}' itself on the command line. 213 | 214 | set -- \ 215 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 216 | -classpath "$CLASSPATH" \ 217 | org.gradle.wrapper.GradleWrapperMain \ 218 | "$@" 219 | 220 | # Stop when "xargs" is not available. 221 | if ! command -v xargs >/dev/null 2>&1 222 | then 223 | die "xargs is not available" 224 | fi 225 | 226 | # Use "xargs" to parse quoted args. 227 | # 228 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 229 | # 230 | # In Bash we could simply go: 231 | # 232 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 233 | # set -- "${ARGS[@]}" "$@" 234 | # 235 | # but POSIX shell has neither arrays nor command substitution, so instead we 236 | # post-process each arg (as a line of input to sed) to backslash-escape any 237 | # character that might be a shell metacharacter, then use eval to reverse 238 | # that process (while maintaining the separation between arguments), and wrap 239 | # the whole thing up as a single "set" statement. 240 | # 241 | # This will of course break if any of these variables contains a newline or 242 | # an unmatched quote. 243 | # 244 | 245 | eval "set -- $( 246 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 247 | xargs -n1 | 248 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 249 | tr '\n' ' ' 250 | )" '"$@"' 251 | 252 | exec "$JAVACMD" "$@" 253 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | @rem SPDX-License-Identifier: Apache-2.0 17 | @rem 18 | 19 | @if "%DEBUG%"=="" @echo off 20 | @rem ########################################################################## 21 | @rem 22 | @rem Gradle startup script for Windows 23 | @rem 24 | @rem ########################################################################## 25 | 26 | @rem Set local scope for the variables with windows NT shell 27 | if "%OS%"=="Windows_NT" setlocal 28 | 29 | set DIRNAME=%~dp0 30 | if "%DIRNAME%"=="" set DIRNAME=. 31 | @rem This is normally unused 32 | set APP_BASE_NAME=%~n0 33 | set APP_HOME=%DIRNAME% 34 | 35 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 36 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 37 | 38 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 39 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 40 | 41 | @rem Find java.exe 42 | if defined JAVA_HOME goto findJavaFromJavaHome 43 | 44 | set JAVA_EXE=java.exe 45 | %JAVA_EXE% -version >NUL 2>&1 46 | if %ERRORLEVEL% equ 0 goto execute 47 | 48 | echo. 1>&2 49 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2 50 | echo. 1>&2 51 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 52 | echo location of your Java installation. 1>&2 53 | 54 | goto fail 55 | 56 | :findJavaFromJavaHome 57 | set JAVA_HOME=%JAVA_HOME:"=% 58 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 59 | 60 | if exist "%JAVA_EXE%" goto execute 61 | 62 | echo. 1>&2 63 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2 64 | echo. 1>&2 65 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 66 | echo location of your Java installation. 1>&2 67 | 68 | goto fail 69 | 70 | :execute 71 | @rem Setup the command line 72 | 73 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 74 | 75 | 76 | @rem Execute Gradle 77 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 78 | 79 | :end 80 | @rem End local scope for the variables with windows NT shell 81 | if %ERRORLEVEL% equ 0 goto mainEnd 82 | 83 | :fail 84 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 85 | rem the _cmd.exe /c_ return code! 86 | set EXIT_CODE=%ERRORLEVEL% 87 | if %EXIT_CODE% equ 0 set EXIT_CODE=1 88 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% 89 | exit /b %EXIT_CODE% 90 | 91 | :mainEnd 92 | if "%OS%"=="Windows_NT" endlocal 93 | 94 | :omega 95 | -------------------------------------------------------------------------------- /legacy/README.md: -------------------------------------------------------------------------------- 1 | # Compose HTML Material (legacy Material 2) 2 | 3 | [![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-html-material-legacy)](https://search.maven.org/artifact/com.huanshankeji/compose-html-material-legacy) 4 | [![Gradle Plugin Portal](https://img.shields.io/gradle-plugin-portal/v/com.huanshankeji.compose-html-material-conventions-legacy)](https://plugins.gradle.org/plugin/com.huanshankeji.compose-html-material-conventions-legacy) 5 | 6 | Some legacy Material 2 components for Compose HTML, based on [the obsolete `mwc` branch of Material Web](https://github.com/material-components/material-web/tree/mwc) (preferred) and [Material Components for the web (or material-components-web, or `mdc`)](https://github.com/material-components/material-components-web) (fallback) 7 | 8 | **There will be no further development effort in this legacy Material 2 portion of this project. Here is a list of reasons and alternatives:** 9 | 10 | 1. The [material-web](https://github.com/material-components/material-web) team is working on Material 3 support and [the Material 2 branch (`mwc`)](https://github.com/material-components/material-web/tree/mwc) is no longer under active development. Existing Compose wrappers of their Material 2 components are still kept in [the `:compose-html-material-legacy` subproject](/compose-html-material-legacy) but not updated. 11 | 1. [KMDC](https://github.com/mpetuska/kmdc) wrapping around [material-components-web (`mdc`)](https://github.com/material-components/material-components-web) provides a much more complete set of Material Design components for Compose HTML. 12 | 13 | ## Instructions on how to use 14 | 15 | Some configurations are needed to use this library due to the immaturities of this project and Kotlin/JS. 16 | 17 | ### Add the dependency 18 | 19 | Prior to v0.3.0: 20 | 21 | ```kotlin 22 | implementation("com.huanshankeji:compose-web-material:$version") 23 | ``` 24 | 25 | Since v0.3.0: 26 | 27 | ```kotlin 28 | implementation("com.huanshankeji:compose-html-material-legacy:$version") 29 | ``` 30 | 31 | ### In code 32 | 33 | Call `mwcRequires()` in your `main` function before calling any component Composable functions. 34 | 35 | ### Kotlin/JS Webpack configuration 36 | 37 | If you use this library in an app project with Webpack [which Kotlin/JS currently uses](https://kotlinlang.org/docs/js-project-setup.html), you might want to configure it as recommended by Material Web and Material Components for the web. Some instructions on how to do this simply are as below. 38 | 39 | If you use a version prior to v0.3.0, this plugin helps add the dependency to this project (if you do this you can skip the "Add the dependency" step above) and the `devNpm` dependencies: 40 | 41 | Prior to v0.3.0: 42 | 43 | ```kotlin 44 | plugins { 45 | id("com.huanshankeji.compose-web-material-conventions") version someVersion 46 | } 47 | ``` 48 | 49 | Since v0.3.0: 50 | 51 | ```kotlin 52 | plugins { 53 | id("com.huanshankeji.compose-web-material-conventions-legacy") version someVersion 54 | } 55 | ``` 56 | 57 | However, the plugin doesn't [make further adjustments to the webpack configuration](https://kotlinlang.org/docs/js-project-setup.html#webpack-configuration-file), so you also need to refer to [the demo further adjustments](demo/webpack.config.d/further_adjustments.js) and [the demo HTML page](demo/html/demo.html) to add your own. Just copy and possibly adapt them as you like. 58 | 59 | Also note that there is [a new approach to adding CSS and SCSS support in the Kotlin Gradle Plugin since 1.8](https://kotlinlang.org/docs/whatsnew18.html#new-approach-to-adding-css-support-to-your-project), which replaces the function of this plugin. 60 | -------------------------------------------------------------------------------- /legacy/demo/html/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo page 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /legacy/demo/webpack.config.d/further_adjustments.js: -------------------------------------------------------------------------------- 1 | // for both webpack.config.js and karma.conf.js 2 | 3 | const extraEntry = { 4 | 'webcomponents-loader': '@webcomponents/webcomponentsjs/webcomponents-loader.js', 5 | }; 6 | 7 | config.entry = config.entry != null ? Object.assign(config.entry, extraEntry) : extraEntry; 8 | 9 | if (config.output != null) { 10 | const kotlinJsFilename = config.output.filename; 11 | config.output.filename = chunkData => 12 | chunkData.chunk.name in extraEntry ? "[name].js" : kotlinJsFilename(chunkData); 13 | } 14 | else 15 | config.output = { filename: "[name].js" }; 16 | 17 | // see: https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md 18 | 19 | const mainEntryExtras = ['./kotlin/app.scss',]; 20 | if (config.entry.main != null) 21 | config.entry.main.push(...mainEntryExtras); 22 | else 23 | config.entry.main = mainEntryExtras; 24 | 25 | config.module.rules.push({ 26 | test: /\.scss$/, 27 | use: [ 28 | { 29 | loader: 'file-loader', 30 | options: { 31 | name: 'app.css', 32 | }, 33 | }, 34 | { loader: 'extract-loader' }, 35 | { loader: 'css-loader' }, 36 | { loader: 'sass-loader' }, 37 | ], 38 | }); 39 | -------------------------------------------------------------------------------- /settings.gradle.kts: -------------------------------------------------------------------------------- 1 | rootProject.name = "compose-html-material" 2 | 3 | include("compose-html-common") 4 | include("compose-html-material-legacy") 5 | include("compose-html-material3") 6 | include("gradle-plugins") 7 | project(":gradle-plugins").name = "compose-html-material-gradle-plugins-legacy" 8 | 9 | // for Dokka 10 | @Suppress("UnstableApiUsage") 11 | dependencyResolutionManagement { 12 | repositories { 13 | mavenCentral() 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Compose HTML Material 8 | 9 | 18 | 19 | 20 | 21 | 29 | 30 | 31 | --------------------------------------------------------------------------------