microui-wc 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +71 -71
- package/CHANGELOG.md +1 -1
- package/README.md +14 -9
- package/dist/AGENTS.md +71 -71
- package/dist/README.md +14 -9
- package/dist/microui.css +1 -1
- package/dist/microui.esm.js.map +1 -1
- package/dist/microui.min.js.map +1 -1
- package/docs/getting-started.md +3 -3
- package/package.json +39 -11
- package/src/components/mu-schema-form.js +1 -1
- package/.github/ISSUE_TEMPLATE/bug_report.md +0 -40
- package/.github/ISSUE_TEMPLATE/feature_request.md +0 -33
- package/.github/PULL_REQUEST_TEMPLATE.md +0 -28
- package/.github/workflows/ci.yml +0 -42
- package/.github/workflows/deploy-pages.yml +0 -112
- package/CODE_OF_CONDUCT.md +0 -59
- package/CONTRIBUTING.md +0 -156
- package/SECURITY.md +0 -58
- package/app/.generated/routes/alerts.js +0 -8
- package/app/.generated/routes/avatars.js +0 -8
- package/app/.generated/routes/badges.js +0 -8
- package/app/.generated/routes/buttons.js +0 -10
- package/app/.generated/routes/cards.js +0 -10
- package/app/.generated/routes/checkboxes.js +0 -9
- package/app/.generated/routes/chips.js +0 -8
- package/app/.generated/routes/dropdowns.js +0 -9
- package/app/.generated/routes/home.js +0 -7
- package/app/.generated/routes/icons.js +0 -9
- package/app/.generated/routes/inputs.js +0 -10
- package/app/.generated/routes/installation.js +0 -7
- package/app/.generated/routes/layout.js +0 -9
- package/app/.generated/routes/modals.js +0 -9
- package/app/.generated/routes/navbar.js +0 -7
- package/app/.generated/routes/progress.js +0 -9
- package/app/.generated/routes/radios.js +0 -9
- package/app/.generated/routes/switches.js +0 -9
- package/app/.generated/routes/tabs.js +0 -8
- package/app/.generated/routes/toasts.js +0 -9
- package/app/index.html +0 -67
- package/app/pages/alerts.html +0 -23
- package/app/pages/avatars.html +0 -22
- package/app/pages/badges.html +0 -22
- package/app/pages/buttons.html +0 -71
- package/app/pages/cards.html +0 -54
- package/app/pages/checkboxes.html +0 -39
- package/app/pages/chips.html +0 -23
- package/app/pages/dropdowns.html +0 -41
- package/app/pages/home.html +0 -59
- package/app/pages/icons.html +0 -29
- package/app/pages/inputs.html +0 -66
- package/app/pages/installation.html +0 -34
- package/app/pages/layout.html +0 -30
- package/app/pages/modals.html +0 -21
- package/app/pages/navbar.html +0 -22
- package/app/pages/progress.html +0 -35
- package/app/pages/radios.html +0 -40
- package/app/pages/switches.html +0 -39
- package/app/pages/tabs.html +0 -30
- package/app/pages/toasts.html +0 -22
- package/app-dist/index.html +0 -67
- package/app-dist/pages/alerts.html +0 -23
- package/app-dist/pages/avatars.html +0 -22
- package/app-dist/pages/badges.html +0 -22
- package/app-dist/pages/buttons.html +0 -71
- package/app-dist/pages/cards.html +0 -54
- package/app-dist/pages/checkboxes.html +0 -39
- package/app-dist/pages/chips.html +0 -23
- package/app-dist/pages/dropdowns.html +0 -41
- package/app-dist/pages/home.html +0 -59
- package/app-dist/pages/icons.html +0 -29
- package/app-dist/pages/inputs.html +0 -66
- package/app-dist/pages/installation.html +0 -34
- package/app-dist/pages/layout.html +0 -30
- package/app-dist/pages/modals.html +0 -21
- package/app-dist/pages/navbar.html +0 -22
- package/app-dist/pages/progress.html +0 -35
- package/app-dist/pages/radios.html +0 -40
- package/app-dist/pages/switches.html +0 -39
- package/app-dist/pages/tabs.html +0 -30
- package/app-dist/pages/toasts.html +0 -22
- package/app-dist/pages.json +0 -217
- package/app-dist/routes/alerts.js +0 -5
- package/app-dist/routes/avatars.js +0 -1
- package/app-dist/routes/badges.js +0 -1
- package/app-dist/routes/buttons.js +0 -1
- package/app-dist/routes/cards.js +0 -1
- package/app-dist/routes/checkboxes.js +0 -9
- package/app-dist/routes/chips.js +0 -4
- package/app-dist/routes/chunk-019e5e2f.js +0 -5
- package/app-dist/routes/chunk-0m4j19yd.js +0 -2
- package/app-dist/routes/chunk-0tmmp5q0.js +0 -1
- package/app-dist/routes/chunk-10xn709r.js +0 -1
- package/app-dist/routes/chunk-15m2qcda.js +0 -2
- package/app-dist/routes/chunk-1bh8g23n.js +0 -1
- package/app-dist/routes/chunk-1vg0v937.js +0 -1
- package/app-dist/routes/chunk-1zvcgy3j.js +0 -1
- package/app-dist/routes/chunk-2afb0861.js +0 -1
- package/app-dist/routes/chunk-2c6ttpzt.js +0 -5
- package/app-dist/routes/chunk-3dy30fhs.js +0 -1
- package/app-dist/routes/chunk-426dnces.js +0 -13
- package/app-dist/routes/chunk-44kgxery.js +0 -1
- package/app-dist/routes/chunk-47fdnejd.js +0 -33
- package/app-dist/routes/chunk-49a6t2vq.js +0 -1
- package/app-dist/routes/chunk-4fe1rm5b.js +0 -1
- package/app-dist/routes/chunk-4ggmvkta.js +0 -33
- package/app-dist/routes/chunk-4vkz81q7.js +0 -33
- package/app-dist/routes/chunk-4w4tmj8f.js +0 -31
- package/app-dist/routes/chunk-532s62kr.js +0 -31
- package/app-dist/routes/chunk-5hm3bssy.js +0 -33
- package/app-dist/routes/chunk-5vrh24hc.js +0 -1
- package/app-dist/routes/chunk-61pcg25a.js +0 -1
- package/app-dist/routes/chunk-6nfhygvf.js +0 -1
- package/app-dist/routes/chunk-700e7je6.js +0 -33
- package/app-dist/routes/chunk-7fsn17kg.js +0 -1
- package/app-dist/routes/chunk-7k789b32.js +0 -1
- package/app-dist/routes/chunk-7r46q0ys.js +0 -36
- package/app-dist/routes/chunk-86fmc1fr.js +0 -5
- package/app-dist/routes/chunk-8qth37vw.js +0 -1
- package/app-dist/routes/chunk-924wv8n0.js +0 -1
- package/app-dist/routes/chunk-9mbhgxk9.js +0 -1
- package/app-dist/routes/chunk-a216hyd9.js +0 -1
- package/app-dist/routes/chunk-akzxykh9.js +0 -33
- package/app-dist/routes/chunk-b3dcvy8c.js +0 -1
- package/app-dist/routes/chunk-b74zahz5.js +0 -31
- package/app-dist/routes/chunk-bftj53p2.js +0 -5
- package/app-dist/routes/chunk-c01hnz3e.js +0 -1
- package/app-dist/routes/chunk-d8pvv5km.js +0 -1
- package/app-dist/routes/chunk-dev0aezr.js +0 -2
- package/app-dist/routes/chunk-dh6vnv0e.js +0 -1
- package/app-dist/routes/chunk-dn2cbpva.js +0 -36
- package/app-dist/routes/chunk-dvn0my90.js +0 -1
- package/app-dist/routes/chunk-dvq8mnve.js +0 -36
- package/app-dist/routes/chunk-e8c2gc4d.js +0 -5
- package/app-dist/routes/chunk-ejf9ak2x.js +0 -1
- package/app-dist/routes/chunk-f083m55s.js +0 -1
- package/app-dist/routes/chunk-fnrj28s1.js +0 -31
- package/app-dist/routes/chunk-fvg3yjdp.js +0 -31
- package/app-dist/routes/chunk-g7k381n1.js +0 -1
- package/app-dist/routes/chunk-h01kq2ae.js +0 -13
- package/app-dist/routes/chunk-h4dk761v.js +0 -5
- package/app-dist/routes/chunk-hmx91z2x.js +0 -5
- package/app-dist/routes/chunk-hxbg4m42.js +0 -36
- package/app-dist/routes/chunk-jbjnfp2b.js +0 -2
- package/app-dist/routes/chunk-jxtz5vv6.js +0 -36
- package/app-dist/routes/chunk-jxzcs0ey.js +0 -36
- package/app-dist/routes/chunk-kt7wwhcx.js +0 -1
- package/app-dist/routes/chunk-kzptszyc.js +0 -33
- package/app-dist/routes/chunk-mhgca4w4.js +0 -2
- package/app-dist/routes/chunk-mhswxa20.js +0 -1
- package/app-dist/routes/chunk-n8zfeex6.js +0 -1
- package/app-dist/routes/chunk-pee47b2r.js +0 -1
- package/app-dist/routes/chunk-pesmw829.js +0 -1
- package/app-dist/routes/chunk-pgc4c6f3.js +0 -36
- package/app-dist/routes/chunk-q8egegm1.js +0 -1
- package/app-dist/routes/chunk-q9mn2qyq.js +0 -36
- package/app-dist/routes/chunk-qh0rtaf3.js +0 -5
- package/app-dist/routes/chunk-qqhmk6ye.js +0 -2
- package/app-dist/routes/chunk-qrxygmf7.js +0 -33
- package/app-dist/routes/chunk-r46yzksx.js +0 -36
- package/app-dist/routes/chunk-rgpbw2w0.js +0 -5
- package/app-dist/routes/chunk-rnpzv3d8.js +0 -2
- package/app-dist/routes/chunk-s5v8cv05.js +0 -2
- package/app-dist/routes/chunk-sbwn5bpc.js +0 -1
- package/app-dist/routes/chunk-sqbg8jbt.js +0 -33
- package/app-dist/routes/chunk-sv8dqnf7.js +0 -1
- package/app-dist/routes/chunk-t67sw3za.js +0 -1
- package/app-dist/routes/chunk-tjdpqwdf.js +0 -31
- package/app-dist/routes/chunk-tq2mfghg.js +0 -1
- package/app-dist/routes/chunk-ttn10vt6.js +0 -1
- package/app-dist/routes/chunk-v2hzpjxr.js +0 -1
- package/app-dist/routes/chunk-wfjjkw9y.js +0 -1
- package/app-dist/routes/chunk-wt8cxzmf.js +0 -31
- package/app-dist/routes/chunk-x45d372k.js +0 -5
- package/app-dist/routes/chunk-y3wsazkt.js +0 -1
- package/app-dist/routes/chunk-y7pmgc7t.js +0 -33
- package/app-dist/routes/chunk-zefdt2q3.js +0 -31
- package/app-dist/routes/dropdowns.js +0 -6
- package/app-dist/routes/home.js +0 -1
- package/app-dist/routes/icons.js +0 -1
- package/app-dist/routes/inputs.js +0 -12
- package/app-dist/routes/installation.js +0 -1
- package/app-dist/routes/layout.js +0 -1
- package/app-dist/routes/modals.js +0 -7
- package/app-dist/routes/navbar.js +0 -1
- package/app-dist/routes/progress.js +0 -1
- package/app-dist/routes/radios.js +0 -6
- package/app-dist/routes/switches.js +0 -6
- package/app-dist/routes/tabs.js +0 -1
- package/app-dist/routes/toasts.js +0 -16
- package/assets/fonts/material-symbols-mini.woff2 +0 -0
- package/assets/fonts/material-symbols.woff2 +0 -0
- package/assets/fonts/roboto-400.woff2 +0 -0
- package/assets/fonts/roboto-500.woff2 +0 -0
- package/assets/fonts/roboto-700.woff2 +0 -0
- package/assets/logo-banner-400.jpg +0 -0
- package/assets/logo-banner-400.webp +0 -0
- package/assets/logo-banner-800.webp +0 -0
- package/assets/logo-banner.jpg +0 -0
- package/assets/logo-icon-64.jpg +0 -0
- package/assets/logo-icon-64.webp +0 -0
- package/assets/logo-icon.jpg +0 -0
- package/assets/logo-square.jpg +0 -0
- package/bun.lock +0 -312
- package/bunfig.toml +0 -4
- package/custom-elements.json +0 -1916
- package/demo/api/sample-data.json +0 -38
- package/demo/content/alerts.html +0 -115
- package/demo/content/avatars.html +0 -70
- package/demo/content/badges.html +0 -65
- package/demo/content/buttons.html +0 -188
- package/demo/content/callouts.html +0 -91
- package/demo/content/cards.html +0 -121
- package/demo/content/checkboxes.html +0 -178
- package/demo/content/chips.html +0 -67
- package/demo/content/codeblocks.html +0 -101
- package/demo/content/confirms.html +0 -115
- package/demo/content/datatables.html +0 -149
- package/demo/content/dividers.html +0 -119
- package/demo/content/dropdowns.html +0 -89
- package/demo/content/enterprise.html +0 -252
- package/demo/content/home.html +0 -149
- package/demo/content/icons.html +0 -89
- package/demo/content/inputs.html +0 -135
- package/demo/content/installation.html +0 -16
- package/demo/content/layout.html +0 -136
- package/demo/content/modals.html +0 -141
- package/demo/content/navbar.html +0 -70
- package/demo/content/progress.html +0 -119
- package/demo/content/radios.html +0 -88
- package/demo/content/skeletons.html +0 -109
- package/demo/content/spinners.html +0 -96
- package/demo/content/switches.html +0 -84
- package/demo/content/tables.html +0 -124
- package/demo/content/tabs.html +0 -85
- package/demo/content/toasts.html +0 -116
- package/demo/content/tooltips.html +0 -107
- package/demo/content/virtual-lists.html +0 -233
- package/demo/favicon.ico +0 -0
- package/demo/favicon.png +0 -0
- package/demo/full.html +0 -52
- package/demo/iife.html +0 -46
- package/demo/manifest.json +0 -34
- package/demo/pages/datatable-demo.html +0 -237
- package/demo/pages/prompt-ui-demo.html +0 -218
- package/demo/pages/responsive-demo.html +0 -122
- package/demo/pages/schema-form-demo.html +0 -270
- package/demo/robots.txt +0 -6
- package/demo/shell.html +0 -712
- package/demo/sw.js +0 -387
- package/lighthouse-audit.mjs +0 -113
- package/scripts/analyze-components.js +0 -105
- package/scripts/build-app.js +0 -193
- package/scripts/build-framework.js +0 -444
- package/scripts/build-utils.js +0 -101
- package/scripts/test-isolated.js +0 -151
- package/server.js +0 -256
- package/tests/agents/agent-integration.test.js +0 -76
- package/tests/benchmark.html +0 -296
- package/tests/build/scan-components.test.js +0 -173
- package/tests/components/all-components.test.js +0 -245
- package/tests/components/all-missing-components.test.js +0 -574
- package/tests/components/mu-alert.test.js +0 -113
- package/tests/components/mu-avatar.test.js +0 -148
- package/tests/components/mu-badge.test.js +0 -92
- package/tests/components/mu-button.test.js +0 -112
- package/tests/components/mu-card.test.js +0 -89
- package/tests/components/mu-checkbox.test.js +0 -158
- package/tests/components/mu-chip.test.js +0 -118
- package/tests/components/mu-container.test.js +0 -120
- package/tests/components/mu-divider.test.js +0 -98
- package/tests/components/mu-drawer-item.test.js +0 -199
- package/tests/components/mu-drawer.test.js +0 -96
- package/tests/components/mu-dropdown.test.js +0 -125
- package/tests/components/mu-form.test.js +0 -138
- package/tests/components/mu-grid.test.js +0 -135
- package/tests/components/mu-icon.test.js +0 -110
- package/tests/components/mu-input.test.js +0 -131
- package/tests/components/mu-lazy.test.js +0 -103
- package/tests/components/mu-modal.test.js +0 -275
- package/tests/components/mu-navbar.test.js +0 -101
- package/tests/components/mu-progress.test.js +0 -115
- package/tests/components/mu-radio.test.js +0 -114
- package/tests/components/mu-repeat.test.js +0 -106
- package/tests/components/mu-sidebar.test.js +0 -126
- package/tests/components/mu-skeleton.test.js +0 -162
- package/tests/components/mu-stack.test.js +0 -143
- package/tests/components/mu-switch.test.js +0 -292
- package/tests/components/mu-table.test.js +0 -124
- package/tests/components/mu-tabs.test.js +0 -104
- package/tests/components/mu-textarea.test.js +0 -115
- package/tests/components/mu-toast.test.js +0 -321
- package/tests/components/mu-tooltip.test.js +0 -133
- package/tests/components/mu-virtual-list.test.js +0 -109
- package/tests/core/MuElement.test.js +0 -120
- package/tests/core/agent-api.test.js +0 -125
- package/tests/core/all-core-modules.test.js +0 -442
- package/tests/core/bus.test.js +0 -364
- package/tests/core/component-schema.test.js +0 -160
- package/tests/core/feature-registry.test.js +0 -198
- package/tests/core/form-state.test.js +0 -167
- package/tests/core/http.test.js +0 -119
- package/tests/core/keyboard.test.js +0 -319
- package/tests/core/layers.test.js +0 -129
- package/tests/core/namespaced-stores.test.js +0 -114
- package/tests/core/render.test.js +0 -121
- package/tests/core/ripple.test.js +0 -131
- package/tests/core/router.test.js +0 -89
- package/tests/core/scheduler.test.js +0 -121
- package/tests/core/signals.test.js +0 -128
- package/tests/core/store.test.js +0 -171
- package/tests/core/transitions.test.js +0 -82
- package/tests/e2e/accessibility-harness.html +0 -58
- package/tests/e2e/accessibility.test.js +0 -401
- package/tests/e2e/agent-features.test.js +0 -372
- package/tests/e2e/card-spacing.test.js +0 -287
- package/tests/e2e/components.test.js +0 -439
- package/tests/e2e/demo-routes.test.js +0 -478
- package/tests/e2e/layout-css-fallback.test.js +0 -334
- package/tests/e2e/mu-alert.e2e.test.js +0 -111
- package/tests/e2e/mu-checkbox.test.js +0 -489
- package/tests/e2e/mu-chip.test.js +0 -347
- package/tests/e2e/mu-form.test.js +0 -499
- package/tests/e2e/mu-icon.test.js +0 -114
- package/tests/e2e/mu-radio.test.js +0 -113
- package/tests/e2e/mu-skeleton.test.js +0 -140
- package/tests/e2e/mu-switch.test.js +0 -415
- package/tests/e2e/mu-tabs.test.js +0 -494
- package/tests/e2e/mu-textarea.test.js +0 -242
- package/tests/e2e/mu-virtual-list.test.js +0 -427
- package/tests/e2e/perf-memory.test.js +0 -161
- package/tests/e2e/puppeteer-helper.js +0 -137
- package/tests/e2e/puppeteer.test.js +0 -226
- package/tests/e2e/pwa.test.js +0 -261
- package/tests/e2e/test-harness.html +0 -319
- package/tests/manual/test-components.html +0 -120
- package/tests/memory-test.html +0 -309
- package/tests/setup-dom.js +0 -93
- package/tests/visual-test.html +0 -301
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
Checkboxes Page
|
|
3
|
-
-->
|
|
4
|
-
<mu-page route="checkboxes" title="Checkboxes">
|
|
5
|
-
<script type="x-dependencies">
|
|
6
|
-
mu-checkbox
|
|
7
|
-
mu-stack
|
|
8
|
-
mu-tabs
|
|
9
|
-
mu-example
|
|
10
|
-
mu-code
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<template>
|
|
14
|
-
<h1 class="page-title">Checkbox</h1>
|
|
15
|
-
<p class="page-subtitle">
|
|
16
|
-
<code><mu-checkbox></code> allows selection of multiple options.
|
|
17
|
-
</p>
|
|
18
|
-
|
|
19
|
-
<mu-tabs>
|
|
20
|
-
<mu-tab label="Examples" active>
|
|
21
|
-
<section class="component-section">
|
|
22
|
-
<h2 class="section-title">States</h2>
|
|
23
|
-
<mu-example>
|
|
24
|
-
<mu-stack gap="md">
|
|
25
|
-
<mu-checkbox label="Unchecked"></mu-checkbox>
|
|
26
|
-
<mu-checkbox label="Checked" checked></mu-checkbox>
|
|
27
|
-
<mu-checkbox label="Disabled" disabled></mu-checkbox>
|
|
28
|
-
</mu-stack>
|
|
29
|
-
</mu-example>
|
|
30
|
-
</section>
|
|
31
|
-
</mu-tab>
|
|
32
|
-
|
|
33
|
-
<mu-tab label="Code">
|
|
34
|
-
<mu-code language="html"><mu-checkbox label="Option 1"></mu-checkbox>
|
|
35
|
-
<mu-checkbox label="Selected" checked></mu-checkbox></mu-code>
|
|
36
|
-
</mu-tab>
|
|
37
|
-
</mu-tabs>
|
|
38
|
-
</template>
|
|
39
|
-
</mu-page>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
<mu-page route="chips" title="Chips">
|
|
2
|
-
<script type="x-dependencies">mu-chip, mu-stack, mu-example, mu-code</script>
|
|
3
|
-
<template>
|
|
4
|
-
<h1 class="page-title">Chip</h1>
|
|
5
|
-
<p class="page-subtitle"><code><mu-chip></code> displays compact interactive elements.</p>
|
|
6
|
-
<mu-tabs>
|
|
7
|
-
<mu-tab label="Examples" active>
|
|
8
|
-
<mu-example>
|
|
9
|
-
<mu-stack direction="row" gap="sm" wrap>
|
|
10
|
-
<mu-chip>Default</mu-chip>
|
|
11
|
-
<mu-chip variant="outlined">Outlined</mu-chip>
|
|
12
|
-
<mu-chip removable>Removable</mu-chip>
|
|
13
|
-
<mu-chip selected>Selected</mu-chip>
|
|
14
|
-
</mu-stack>
|
|
15
|
-
</mu-example>
|
|
16
|
-
</mu-tab>
|
|
17
|
-
<mu-tab label="Code">
|
|
18
|
-
<mu-code language="html"><mu-chip>Tag</mu-chip>
|
|
19
|
-
<mu-chip removable>Removable</mu-chip></mu-code>
|
|
20
|
-
</mu-tab>
|
|
21
|
-
</mu-tabs>
|
|
22
|
-
</template>
|
|
23
|
-
</mu-page>
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
Dropdowns Page
|
|
3
|
-
-->
|
|
4
|
-
<mu-page route="dropdowns" title="Dropdowns">
|
|
5
|
-
<script type="x-dependencies">
|
|
6
|
-
mu-dropdown
|
|
7
|
-
mu-stack
|
|
8
|
-
mu-tabs
|
|
9
|
-
mu-example
|
|
10
|
-
mu-code
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<template>
|
|
14
|
-
<h1 class="page-title">Dropdown</h1>
|
|
15
|
-
<p class="page-subtitle">
|
|
16
|
-
<code><mu-dropdown></code> displays a list of options when clicked.
|
|
17
|
-
</p>
|
|
18
|
-
|
|
19
|
-
<mu-tabs>
|
|
20
|
-
<mu-tab label="Examples" active>
|
|
21
|
-
<section class="component-section">
|
|
22
|
-
<h2 class="section-title">Basic Usage</h2>
|
|
23
|
-
<mu-example>
|
|
24
|
-
<mu-dropdown label="Select option">
|
|
25
|
-
<mu-option value="opt1">Option 1</mu-option>
|
|
26
|
-
<mu-option value="opt2">Option 2</mu-option>
|
|
27
|
-
<mu-option value="opt3">Option 3</mu-option>
|
|
28
|
-
</mu-dropdown>
|
|
29
|
-
</mu-example>
|
|
30
|
-
</section>
|
|
31
|
-
</mu-tab>
|
|
32
|
-
|
|
33
|
-
<mu-tab label="Code">
|
|
34
|
-
<mu-code language="html"><mu-dropdown label="Choose">
|
|
35
|
-
<mu-option value="a">Option A</mu-option>
|
|
36
|
-
<mu-option value="b">Option B</mu-option>
|
|
37
|
-
</mu-dropdown></mu-code>
|
|
38
|
-
</mu-tab>
|
|
39
|
-
</mu-tabs>
|
|
40
|
-
</template>
|
|
41
|
-
</mu-page>
|
package/app-dist/pages/home.html
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
Home Page
|
|
3
|
-
Dependencies: mu-stack, mu-card, mu-icon
|
|
4
|
-
-->
|
|
5
|
-
<mu-page route="home" title="Home">
|
|
6
|
-
<script type="x-dependencies">
|
|
7
|
-
mu-stack
|
|
8
|
-
mu-card
|
|
9
|
-
mu-icon
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<template>
|
|
13
|
-
<mu-stack gap="lg" align="center" style="text-align: center; padding: 40px 20px;">
|
|
14
|
-
<img src="/assets/logo-banner-400.webp" alt="microUI" style="max-width: 300px;">
|
|
15
|
-
|
|
16
|
-
<h1>microUI v2</h1>
|
|
17
|
-
<p style="color: var(--md-sys-color-on-surface-variant); max-width: 500px;">
|
|
18
|
-
AI-First Web Components Library
|
|
19
|
-
</p>
|
|
20
|
-
|
|
21
|
-
<mu-stack direction="row" gap="md" wrap>
|
|
22
|
-
<mu-card variant="filled" style="text-align: center; padding: 16px;">
|
|
23
|
-
<strong style="color: var(--md-sys-color-primary); font-size: 24px;">100%</strong>
|
|
24
|
-
<p>Performance</p>
|
|
25
|
-
</mu-card>
|
|
26
|
-
<mu-card variant="filled" style="text-align: center; padding: 16px;">
|
|
27
|
-
<strong style="color: var(--md-sys-color-primary); font-size: 24px;">100%</strong>
|
|
28
|
-
<p>Accessibility</p>
|
|
29
|
-
</mu-card>
|
|
30
|
-
<mu-card variant="filled" style="text-align: center; padding: 16px;">
|
|
31
|
-
<strong style="color: var(--md-sys-color-primary); font-size: 24px;">100%</strong>
|
|
32
|
-
<p>SEO</p>
|
|
33
|
-
</mu-card>
|
|
34
|
-
</mu-stack>
|
|
35
|
-
|
|
36
|
-
<mu-card variant="outlined">
|
|
37
|
-
<h3>Features</h3>
|
|
38
|
-
<mu-stack gap="sm">
|
|
39
|
-
<mu-stack direction="row" gap="sm" align="center">
|
|
40
|
-
<mu-icon name="check"></mu-icon>
|
|
41
|
-
<span><strong>40+ Components</strong> - Complete UI toolkit</span>
|
|
42
|
-
</mu-stack>
|
|
43
|
-
<mu-stack direction="row" gap="sm" align="center">
|
|
44
|
-
<mu-icon name="check"></mu-icon>
|
|
45
|
-
<span><strong>75 KB Bundle</strong> - Lightweight & fast</span>
|
|
46
|
-
</mu-stack>
|
|
47
|
-
<mu-stack direction="row" gap="sm" align="center">
|
|
48
|
-
<mu-icon name="check"></mu-icon>
|
|
49
|
-
<span><strong>MD3 Compliant</strong> - Material Design 3</span>
|
|
50
|
-
</mu-stack>
|
|
51
|
-
<mu-stack direction="row" gap="sm" align="center">
|
|
52
|
-
<mu-icon name="check"></mu-icon>
|
|
53
|
-
<span><strong>Zero Dependencies</strong> - Native Web Components</span>
|
|
54
|
-
</mu-stack>
|
|
55
|
-
</mu-stack>
|
|
56
|
-
</mu-card>
|
|
57
|
-
</mu-stack>
|
|
58
|
-
</template>
|
|
59
|
-
</mu-page>
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
<mu-page route="icons" title="Icons">
|
|
2
|
-
<script type="x-dependencies">mu-icon, mu-grid, mu-stack, mu-example, mu-code</script>
|
|
3
|
-
<template>
|
|
4
|
-
<h1 class="page-title">Icons</h1>
|
|
5
|
-
<p class="page-subtitle"><code><mu-icon></code> displays SVG icons from the built-in set.</p>
|
|
6
|
-
<mu-tabs>
|
|
7
|
-
<mu-tab label="Gallery" active>
|
|
8
|
-
<mu-grid cols="6" gap="md" style="text-align: center;">
|
|
9
|
-
<mu-stack align="center"><mu-icon name="check"></mu-icon><small>check</small></mu-stack>
|
|
10
|
-
<mu-stack align="center"><mu-icon name="close"></mu-icon><small>close</small></mu-stack>
|
|
11
|
-
<mu-stack align="center"><mu-icon name="plus"></mu-icon><small>plus</small></mu-stack>
|
|
12
|
-
<mu-stack align="center"><mu-icon name="minus"></mu-icon><small>minus</small></mu-stack>
|
|
13
|
-
<mu-stack align="center"><mu-icon name="edit"></mu-icon><small>edit</small></mu-stack>
|
|
14
|
-
<mu-stack align="center"><mu-icon name="delete"></mu-icon><small>delete</small></mu-stack>
|
|
15
|
-
<mu-stack align="center"><mu-icon name="search"></mu-icon><small>search</small></mu-stack>
|
|
16
|
-
<mu-stack align="center"><mu-icon name="menu"></mu-icon><small>menu</small></mu-stack>
|
|
17
|
-
<mu-stack align="center"><mu-icon name="home"></mu-icon><small>home</small></mu-stack>
|
|
18
|
-
<mu-stack align="center"><mu-icon name="settings"></mu-icon><small>settings</small></mu-stack>
|
|
19
|
-
<mu-stack align="center"><mu-icon name="user"></mu-icon><small>user</small></mu-stack>
|
|
20
|
-
<mu-stack align="center"><mu-icon name="sun"></mu-icon><small>sun</small></mu-stack>
|
|
21
|
-
</mu-grid>
|
|
22
|
-
</mu-tab>
|
|
23
|
-
<mu-tab label="Code">
|
|
24
|
-
<mu-code language="html"><mu-icon name="check"></mu-icon>
|
|
25
|
-
<mu-icon name="home" size="24"></mu-icon></mu-code>
|
|
26
|
-
</mu-tab>
|
|
27
|
-
</mu-tabs>
|
|
28
|
-
</template>
|
|
29
|
-
</mu-page>
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
Inputs Page - Performance optimized
|
|
3
|
-
-->
|
|
4
|
-
<mu-page route="inputs" title="Text Fields">
|
|
5
|
-
<script type="x-dependencies">
|
|
6
|
-
mu-input
|
|
7
|
-
mu-stack
|
|
8
|
-
mu-tabs
|
|
9
|
-
mu-example
|
|
10
|
-
mu-code
|
|
11
|
-
mu-api-table
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<template>
|
|
15
|
-
<h1 class="page-title">Text Field</h1>
|
|
16
|
-
<p class="page-subtitle">
|
|
17
|
-
<code><mu-input></code> captures text input with MD3 styling and floating labels.
|
|
18
|
-
</p>
|
|
19
|
-
|
|
20
|
-
<mu-tabs>
|
|
21
|
-
<mu-tab label="Examples" active>
|
|
22
|
-
<section class="component-section">
|
|
23
|
-
<h2 class="section-title">Variants</h2>
|
|
24
|
-
<mu-example>
|
|
25
|
-
<mu-stack gap="md">
|
|
26
|
-
<mu-input label="Filled (default)" placeholder="Enter text"></mu-input>
|
|
27
|
-
<mu-input variant="outlined" label="Outlined" placeholder="Enter text"></mu-input>
|
|
28
|
-
</mu-stack>
|
|
29
|
-
</mu-example>
|
|
30
|
-
</section>
|
|
31
|
-
|
|
32
|
-
<section class="component-section">
|
|
33
|
-
<h2 class="section-title">Types</h2>
|
|
34
|
-
<mu-example>
|
|
35
|
-
<mu-stack gap="md">
|
|
36
|
-
<mu-input type="text" label="Text" placeholder="Username"></mu-input>
|
|
37
|
-
<mu-input type="email" label="Email" placeholder="email@example.com"></mu-input>
|
|
38
|
-
<mu-input type="password" label="Password" placeholder="********"></mu-input>
|
|
39
|
-
<mu-input type="number" label="Number" placeholder="0"></mu-input>
|
|
40
|
-
</mu-stack>
|
|
41
|
-
</mu-example>
|
|
42
|
-
</section>
|
|
43
|
-
|
|
44
|
-
<section class="component-section">
|
|
45
|
-
<h2 class="section-title">States</h2>
|
|
46
|
-
<mu-example>
|
|
47
|
-
<mu-stack gap="md">
|
|
48
|
-
<mu-input label="Normal"></mu-input>
|
|
49
|
-
<mu-input label="Disabled" disabled></mu-input>
|
|
50
|
-
</mu-stack>
|
|
51
|
-
</mu-example>
|
|
52
|
-
</section>
|
|
53
|
-
</mu-tab>
|
|
54
|
-
|
|
55
|
-
<mu-tab label="Code">
|
|
56
|
-
<mu-code language="html"><mu-input label="Username" placeholder="Enter username"></mu-input>
|
|
57
|
-
<mu-input variant="outlined" label="Email"></mu-input>
|
|
58
|
-
<mu-input type="password" label="Password"></mu-input></mu-code>
|
|
59
|
-
</mu-tab>
|
|
60
|
-
|
|
61
|
-
<mu-tab label="API">
|
|
62
|
-
<mu-api-table component="mu-input"></mu-api-table>
|
|
63
|
-
</mu-tab>
|
|
64
|
-
</mu-tabs>
|
|
65
|
-
</template>
|
|
66
|
-
</mu-page>
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
Installation Page - Performance optimized
|
|
3
|
-
Uses minimal DOM, CSS classes > inline styles
|
|
4
|
-
-->
|
|
5
|
-
<mu-page route="installation" title="Installation">
|
|
6
|
-
<script type="x-dependencies">
|
|
7
|
-
mu-stack
|
|
8
|
-
mu-card
|
|
9
|
-
mu-code
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<template>
|
|
13
|
-
<h1 class="page-title">Installation</h1>
|
|
14
|
-
<p class="page-subtitle">Get started with microUI</p>
|
|
15
|
-
|
|
16
|
-
<section class="component-section">
|
|
17
|
-
<h2 class="section-title">NPM</h2>
|
|
18
|
-
<mu-code language="bash">npm install microui</mu-code>
|
|
19
|
-
</section>
|
|
20
|
-
|
|
21
|
-
<section class="component-section">
|
|
22
|
-
<h2 class="section-title">CDN</h2>
|
|
23
|
-
<mu-code language="html"><link rel="stylesheet" href="dist/microui.css">
|
|
24
|
-
<script type="module" src="dist/microui.esm.js"></script></mu-code>
|
|
25
|
-
</section>
|
|
26
|
-
|
|
27
|
-
<section class="component-section">
|
|
28
|
-
<h2 class="section-title">Per-Component Import</h2>
|
|
29
|
-
<mu-code language="javascript">// Only load what you need
|
|
30
|
-
import '/dist/components/mu-button.js';
|
|
31
|
-
import '/dist/components/mu-card.js';</mu-code>
|
|
32
|
-
</section>
|
|
33
|
-
</template>
|
|
34
|
-
</mu-page>
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<mu-page route="layout" title="Stack & Grid">
|
|
2
|
-
<script type="x-dependencies">mu-stack, mu-grid, mu-card, mu-example, mu-code</script>
|
|
3
|
-
<template>
|
|
4
|
-
<h1 class="page-title">Layout</h1>
|
|
5
|
-
<p class="page-subtitle"><code><mu-stack></code> and <code><mu-grid></code> for flexible layouts.
|
|
6
|
-
</p>
|
|
7
|
-
<mu-tabs>
|
|
8
|
-
<mu-tab label="Stack" active>
|
|
9
|
-
<mu-example>
|
|
10
|
-
<mu-stack gap="md">
|
|
11
|
-
<mu-card variant="outlined">Item 1</mu-card>
|
|
12
|
-
<mu-card variant="outlined">Item 2</mu-card>
|
|
13
|
-
<mu-card variant="outlined">Item 3</mu-card>
|
|
14
|
-
</mu-stack>
|
|
15
|
-
</mu-example>
|
|
16
|
-
<mu-code language="html"><mu-stack direction="row" gap="md">...</mu-stack></mu-code>
|
|
17
|
-
</mu-tab>
|
|
18
|
-
<mu-tab label="Grid">
|
|
19
|
-
<mu-example>
|
|
20
|
-
<mu-grid cols="3" gap="md">
|
|
21
|
-
<mu-card variant="outlined">1</mu-card>
|
|
22
|
-
<mu-card variant="outlined">2</mu-card>
|
|
23
|
-
<mu-card variant="outlined">3</mu-card>
|
|
24
|
-
</mu-grid>
|
|
25
|
-
</mu-example>
|
|
26
|
-
<mu-code language="html"><mu-grid cols="3" gap="md">...</mu-grid></mu-code>
|
|
27
|
-
</mu-tab>
|
|
28
|
-
</mu-tabs>
|
|
29
|
-
</template>
|
|
30
|
-
</mu-page>
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
<mu-page route="modals" title="Modals">
|
|
2
|
-
<script type="x-dependencies">mu-modal, mu-button, mu-stack, mu-example, mu-code</script>
|
|
3
|
-
<template>
|
|
4
|
-
<h1 class="page-title">Modal</h1>
|
|
5
|
-
<p class="page-subtitle"><code><mu-modal></code> displays content in a dialog overlay.</p>
|
|
6
|
-
<mu-tabs>
|
|
7
|
-
<mu-tab label="Examples" active>
|
|
8
|
-
<mu-example>
|
|
9
|
-
<mu-button onclick="document.getElementById('demo-modal').open()">Open Modal</mu-button>
|
|
10
|
-
<mu-modal id="demo-modal" title="Example Modal">
|
|
11
|
-
<p>This is modal content.</p>
|
|
12
|
-
</mu-modal>
|
|
13
|
-
</mu-example>
|
|
14
|
-
</mu-tab>
|
|
15
|
-
<mu-tab label="Code">
|
|
16
|
-
<mu-code language="html"><mu-button onclick="modal.open()">Open</mu-button>
|
|
17
|
-
<mu-modal id="modal" title="Title">Content</mu-modal></mu-code>
|
|
18
|
-
</mu-tab>
|
|
19
|
-
</mu-tabs>
|
|
20
|
-
</template>
|
|
21
|
-
</mu-page>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
<mu-page route="navbar" title="Navbar">
|
|
2
|
-
<script type="x-dependencies">mu-navbar, mu-example, mu-code</script>
|
|
3
|
-
<template>
|
|
4
|
-
<h1 class="page-title">Navbar</h1>
|
|
5
|
-
<p class="page-subtitle"><code><mu-navbar></code> is a top navigation bar.</p>
|
|
6
|
-
<mu-tabs>
|
|
7
|
-
<mu-tab label="Examples" active>
|
|
8
|
-
<mu-example>
|
|
9
|
-
<mu-navbar title="My App">
|
|
10
|
-
<mu-nav-item href="#">Home</mu-nav-item>
|
|
11
|
-
<mu-nav-item href="#">About</mu-nav-item>
|
|
12
|
-
</mu-navbar>
|
|
13
|
-
</mu-example>
|
|
14
|
-
</mu-tab>
|
|
15
|
-
<mu-tab label="Code">
|
|
16
|
-
<mu-code language="html"><mu-navbar title="App">
|
|
17
|
-
<mu-nav-item href="/">Home</mu-nav-item>
|
|
18
|
-
</mu-navbar></mu-code>
|
|
19
|
-
</mu-tab>
|
|
20
|
-
</mu-tabs>
|
|
21
|
-
</template>
|
|
22
|
-
</mu-page>
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
<mu-page route="progress" title="Progress">
|
|
2
|
-
<script type="x-dependencies">mu-progress, mu-spinner, mu-stack, mu-example, mu-code</script>
|
|
3
|
-
<template>
|
|
4
|
-
<h1 class="page-title">Progress</h1>
|
|
5
|
-
<p class="page-subtitle">Progress indicators show loading state.</p>
|
|
6
|
-
<mu-tabs>
|
|
7
|
-
<mu-tab label="Examples" active>
|
|
8
|
-
<section class="component-section">
|
|
9
|
-
<h2 class="section-title">Linear Progress</h2>
|
|
10
|
-
<mu-example>
|
|
11
|
-
<mu-stack gap="md">
|
|
12
|
-
<mu-progress value="30"></mu-progress>
|
|
13
|
-
<mu-progress value="60"></mu-progress>
|
|
14
|
-
<mu-progress indeterminate></mu-progress>
|
|
15
|
-
</mu-stack>
|
|
16
|
-
</mu-example>
|
|
17
|
-
</section>
|
|
18
|
-
<section class="component-section">
|
|
19
|
-
<h2 class="section-title">Spinner</h2>
|
|
20
|
-
<mu-example>
|
|
21
|
-
<mu-stack direction="row" gap="md" align="center">
|
|
22
|
-
<mu-spinner size="sm"></mu-spinner>
|
|
23
|
-
<mu-spinner size="md"></mu-spinner>
|
|
24
|
-
<mu-spinner size="lg"></mu-spinner>
|
|
25
|
-
</mu-stack>
|
|
26
|
-
</mu-example>
|
|
27
|
-
</section>
|
|
28
|
-
</mu-tab>
|
|
29
|
-
<mu-tab label="Code">
|
|
30
|
-
<mu-code language="html"><mu-progress value="50"></mu-progress>
|
|
31
|
-
<mu-spinner size="md"></mu-spinner></mu-code>
|
|
32
|
-
</mu-tab>
|
|
33
|
-
</mu-tabs>
|
|
34
|
-
</template>
|
|
35
|
-
</mu-page>
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
Radios Page
|
|
3
|
-
-->
|
|
4
|
-
<mu-page route="radios" title="Radio Buttons">
|
|
5
|
-
<script type="x-dependencies">
|
|
6
|
-
mu-radio
|
|
7
|
-
mu-stack
|
|
8
|
-
mu-tabs
|
|
9
|
-
mu-example
|
|
10
|
-
mu-code
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<template>
|
|
14
|
-
<h1 class="page-title">Radio</h1>
|
|
15
|
-
<p class="page-subtitle">
|
|
16
|
-
<code><mu-radio></code> allows selection of one option from a set.
|
|
17
|
-
</p>
|
|
18
|
-
|
|
19
|
-
<mu-tabs>
|
|
20
|
-
<mu-tab label="Examples" active>
|
|
21
|
-
<section class="component-section">
|
|
22
|
-
<h2 class="section-title">Radio Group</h2>
|
|
23
|
-
<mu-example>
|
|
24
|
-
<mu-stack gap="md">
|
|
25
|
-
<mu-radio name="color" value="red" label="Red" checked></mu-radio>
|
|
26
|
-
<mu-radio name="color" value="green" label="Green"></mu-radio>
|
|
27
|
-
<mu-radio name="color" value="blue" label="Blue"></mu-radio>
|
|
28
|
-
</mu-stack>
|
|
29
|
-
</mu-example>
|
|
30
|
-
</section>
|
|
31
|
-
</mu-tab>
|
|
32
|
-
|
|
33
|
-
<mu-tab label="Code">
|
|
34
|
-
<mu-code language="html"><mu-radio name="size" value="sm" label="Small"></mu-radio>
|
|
35
|
-
<mu-radio name="size" value="md" label="Medium" checked></mu-radio>
|
|
36
|
-
<mu-radio name="size" value="lg" label="Large"></mu-radio></mu-code>
|
|
37
|
-
</mu-tab>
|
|
38
|
-
</mu-tabs>
|
|
39
|
-
</template>
|
|
40
|
-
</mu-page>
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
Switches Page
|
|
3
|
-
-->
|
|
4
|
-
<mu-page route="switches" title="Switches">
|
|
5
|
-
<script type="x-dependencies">
|
|
6
|
-
mu-switch
|
|
7
|
-
mu-stack
|
|
8
|
-
mu-tabs
|
|
9
|
-
mu-example
|
|
10
|
-
mu-code
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<template>
|
|
14
|
-
<h1 class="page-title">Switch</h1>
|
|
15
|
-
<p class="page-subtitle">
|
|
16
|
-
<code><mu-switch></code> toggles a single option on or off.
|
|
17
|
-
</p>
|
|
18
|
-
|
|
19
|
-
<mu-tabs>
|
|
20
|
-
<mu-tab label="Examples" active>
|
|
21
|
-
<section class="component-section">
|
|
22
|
-
<h2 class="section-title">States</h2>
|
|
23
|
-
<mu-example>
|
|
24
|
-
<mu-stack gap="md">
|
|
25
|
-
<mu-switch label="Off"></mu-switch>
|
|
26
|
-
<mu-switch label="On" checked></mu-switch>
|
|
27
|
-
<mu-switch label="Disabled" disabled></mu-switch>
|
|
28
|
-
</mu-stack>
|
|
29
|
-
</mu-example>
|
|
30
|
-
</section>
|
|
31
|
-
</mu-tab>
|
|
32
|
-
|
|
33
|
-
<mu-tab label="Code">
|
|
34
|
-
<mu-code language="html"><mu-switch label="Notifications"></mu-switch>
|
|
35
|
-
<mu-switch label="Dark mode" checked></mu-switch></mu-code>
|
|
36
|
-
</mu-tab>
|
|
37
|
-
</mu-tabs>
|
|
38
|
-
</template>
|
|
39
|
-
</mu-page>
|
package/app-dist/pages/tabs.html
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<mu-page route="tabs" title="Tabs">
|
|
2
|
-
<script type="x-dependencies">mu-tabs, mu-stack, mu-example, mu-code</script>
|
|
3
|
-
<template>
|
|
4
|
-
<h1 class="page-title">Tabs</h1>
|
|
5
|
-
<p class="page-subtitle"><code><mu-tabs></code> organizes content into sections.</p>
|
|
6
|
-
<mu-tabs>
|
|
7
|
-
<mu-tab label="Examples" active>
|
|
8
|
-
<mu-example>
|
|
9
|
-
<mu-tabs>
|
|
10
|
-
<mu-tab label="Tab 1" active>
|
|
11
|
-
<p>Content 1</p>
|
|
12
|
-
</mu-tab>
|
|
13
|
-
<mu-tab label="Tab 2">
|
|
14
|
-
<p>Content 2</p>
|
|
15
|
-
</mu-tab>
|
|
16
|
-
<mu-tab label="Tab 3">
|
|
17
|
-
<p>Content 3</p>
|
|
18
|
-
</mu-tab>
|
|
19
|
-
</mu-tabs>
|
|
20
|
-
</mu-example>
|
|
21
|
-
</mu-tab>
|
|
22
|
-
<mu-tab label="Code">
|
|
23
|
-
<mu-code language="html"><mu-tabs>
|
|
24
|
-
<mu-tab label="First" active>Content</mu-tab>
|
|
25
|
-
<mu-tab label="Second">Content</mu-tab>
|
|
26
|
-
</mu-tabs></mu-code>
|
|
27
|
-
</mu-tab>
|
|
28
|
-
</mu-tabs>
|
|
29
|
-
</template>
|
|
30
|
-
</mu-page>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
<mu-page route="toasts" title="Toasts">
|
|
2
|
-
<script type="x-dependencies">mu-toast, mu-button, mu-stack, mu-example, mu-code</script>
|
|
3
|
-
<template>
|
|
4
|
-
<h1 class="page-title">Toast</h1>
|
|
5
|
-
<p class="page-subtitle"><code><mu-toast></code> shows brief notifications.</p>
|
|
6
|
-
<mu-tabs>
|
|
7
|
-
<mu-tab label="Examples" active>
|
|
8
|
-
<mu-example>
|
|
9
|
-
<mu-stack direction="row" gap="md">
|
|
10
|
-
<mu-button onclick="window.showToast('Info toast', {variant:'info'})">Info</mu-button>
|
|
11
|
-
<mu-button onclick="window.showToast('Success!', {variant:'success'})">Success</mu-button>
|
|
12
|
-
<mu-button onclick="window.showToast('Warning', {variant:'warning'})">Warning</mu-button>
|
|
13
|
-
<mu-button onclick="window.showToast('Error!', {variant:'error'})">Error</mu-button>
|
|
14
|
-
</mu-stack>
|
|
15
|
-
</mu-example>
|
|
16
|
-
</mu-tab>
|
|
17
|
-
<mu-tab label="Code">
|
|
18
|
-
<mu-code language="javascript">showToast('Message', { variant: 'success' });</mu-code>
|
|
19
|
-
</mu-tab>
|
|
20
|
-
</mu-tabs>
|
|
21
|
-
</template>
|
|
22
|
-
</mu-page>
|