@m3ui-vue/m3ui-vue 0.2.0 → 0.2.1
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/dist/{MMenuItem-CIDblhtb.js → MMenuItem-DpoEsH91.js} +195 -114
- package/dist/MMenuItem-DpoEsH91.js.map +1 -0
- package/dist/components/MAlert.vue.d.ts +1 -0
- package/dist/components/MButton.vue.d.ts +1 -1
- package/dist/components/MCalendar.vue.d.ts +3 -0
- package/dist/components/MChip.vue.d.ts +3 -3
- package/dist/components/MCommandPalette.vue.d.ts +3 -2
- package/dist/components/MConfirmDialog.vue.d.ts +0 -2
- package/dist/components/MDataTable.vue.d.ts +8 -2
- package/dist/components/MDatePicker.vue.d.ts +2 -0
- package/dist/components/MDateRangePicker.vue.d.ts +5 -0
- package/dist/components/MDialog.vue.d.ts +1 -0
- package/dist/components/MFileUpload.vue.d.ts +15 -1
- package/dist/components/MInfiniteScroll.vue.d.ts +7 -5
- package/dist/components/MMultiSelect.vue.d.ts +13 -1
- package/dist/components/MRichTextEditor.vue.d.ts +28 -1
- package/dist/components/MScheduler.vue.d.ts +5 -0
- package/dist/components/MSnackbar.vue.d.ts +4 -1
- package/dist/components/MSpinner.vue.d.ts +1 -0
- package/dist/components/MSpotlightSearch.vue.d.ts +3 -2
- package/dist/components/MTable.vue.d.ts +2 -1
- package/dist/components/MTimePicker.vue.d.ts +1 -0
- package/dist/components/MTour.vue.d.ts +3 -0
- package/dist/components/MTransferList.vue.d.ts +19 -3
- package/dist/components/MTree.vue.d.ts +1 -1
- package/dist/composables/useLocale.d.ts +74 -0
- package/dist/index.d.ts +2 -0
- package/dist/locales/de.d.ts +2 -0
- package/dist/locales/es.d.ts +2 -0
- package/dist/locales/fr.d.ts +2 -0
- package/dist/locales/index.d.ts +8 -0
- package/dist/locales/ja.d.ts +2 -0
- package/dist/locales/ko.d.ts +2 -0
- package/dist/locales/pt.d.ts +2 -0
- package/dist/locales/zh.d.ts +2 -0
- package/dist/m3ui-vue.css +1 -1
- package/dist/m3ui.js +2734 -2647
- package/dist/m3ui.js.map +1 -1
- package/dist/plugin.d.ts +3 -1
- package/dist/rich-text-editor.d.ts +1 -0
- package/dist/rich-text-editor.js +141 -113
- package/dist/rich-text-editor.js.map +1 -1
- package/dist/styles/palettes.css +660 -0
- package/dist/styles.css +1 -1
- package/package.json +6 -2
- package/src/components/MAlert.vue +5 -1
- package/src/components/MCalendar.vue +14 -5
- package/src/components/MCommandPalette.vue +11 -7
- package/src/components/MConfirmDialog.vue +6 -5
- package/src/components/MDataTable.vue +18 -9
- package/src/components/MDatePicker.vue +11 -4
- package/src/components/MDateRangePicker.vue +15 -5
- package/src/components/MDialog.vue +5 -1
- package/src/components/MFileUpload.vue +22 -10
- package/src/components/MInfiniteScroll.vue +14 -9
- package/src/components/MMultiSelect.vue +11 -7
- package/src/components/MRichTextEditor.vue +95 -34
- package/src/components/MScheduler.vue +12 -4
- package/src/components/MSnackbar.vue +8 -1
- package/src/components/MSpinner.vue +5 -1
- package/src/components/MSpotlightSearch.vue +11 -7
- package/src/components/MTable.vue +8 -4
- package/src/components/MTimePicker.vue +5 -1
- package/src/components/MTour.vue +12 -9
- package/src/components/MTransferList.vue +30 -15
- package/src/composables/useColorPalette.ts +30 -20
- package/src/composables/useLocale.ts +181 -0
- package/src/index.ts +2 -0
- package/src/locales/de.ts +93 -0
- package/src/locales/es.ts +93 -0
- package/src/locales/fr.ts +93 -0
- package/src/locales/index.ts +8 -0
- package/src/locales/ja.ts +93 -0
- package/src/locales/ko.ts +93 -0
- package/src/locales/pt.ts +93 -0
- package/src/locales/zh.ts +93 -0
- package/src/plugin.ts +7 -1
- package/src/rich-text-editor.ts +1 -0
- package/src/styles/palettes.css +660 -0
- package/dist/MMenuItem-CIDblhtb.js.map +0 -1
package/dist/styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.code-editor-container[data-v-b0a66a4b] .cm-editor{height:100%;min-height:inherit;font-family:Roboto Mono,Fira Code,Consolas,monospace;font-size:.8125rem;line-height:1.6}.code-editor-container[data-v-b0a66a4b] .cm-editor.cm-focused{outline:none}.code-editor-container[data-v-b0a66a4b] .cm-scroller{min-height:inherit}.code-editor-container[data-v-b0a66a4b] .cm-content{padding:12px 0}.code-editor-container[data-v-b0a66a4b] .cm-line{padding:0 16px}.code-editor-container[data-v-b0a66a4b] .cm-gutters{background:var(--color-surface-container);border-right:1px solid var(--color-outline-variant);color:var(--color-outline);padding:0 4px;font-size:.75rem}.code-editor-container[data-v-b0a66a4b] .cm-activeLineGutter{background:var(--color-surface-container-high);color:var(--color-on-surface-variant)}.code-editor-container[data-v-b0a66a4b] .cm-activeLine{background:var(--color-surface-container-lowest)}.code-editor-container[data-v-b0a66a4b] .cm-selectionBackground{background:var(--color-primary-container)!important}.code-editor-container[data-v-b0a66a4b] .cm-cursor{border-left-color:var(--color-primary);border-left-width:2px}.code-editor-container[data-v-b0a66a4b] .cm-matchingBracket{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px}.code-editor-container[data-v-b0a66a4b] .cm-foldGutter span{color:var(--color-on-surface-variant)}@keyframes m3-wavy-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes m3-wavy-travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--m3-wave-len) * -1px)}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wavy-spin_2\.8s_linear_infinite\]{animation:2.8s linear infinite m3-wavy-spin}.animate-\[m3-wavy-travel_2s_linear_infinite\]{animation:none!important}}.m3-dialog-enter-active[data-v-e7dfca29],.m3-dialog-leave-active[data-v-e7dfca29]{transition:opacity .15s}.m3-dialog-enter-from[data-v-e7dfca29],.m3-dialog-leave-to[data-v-e7dfca29]{opacity:0}.m3-dialog-enter-active .dialog-box[data-v-e7dfca29],.m3-dialog-leave-active .dialog-box[data-v-e7dfca29]{transition:transform .15s}.m3-dialog-enter-from .dialog-box[data-v-e7dfca29],.m3-dialog-leave-to .dialog-box[data-v-e7dfca29]{transform:scale(.95)}.bs-scrim[data-v-5b1fb748]{transition:opacity .3s}.bs-enter-from .bs-scrim[data-v-5b1fb748],.bs-leave-to .bs-scrim[data-v-5b1fb748]{opacity:0}.bs-panel[data-v-5b1fb748]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.bs-enter-from .bs-panel[data-v-5b1fb748]{opacity:0;transform:translateY(40%)}.bs-leave-to .bs-panel[data-v-5b1fb748]{opacity:0;transform:translateY(100%)!important}.m3-carousel-right-enter-active,.m3-carousel-right-leave-active,.m3-carousel-left-enter-active,.m3-carousel-left-leave-active{transition:transform .5s cubic-bezier(.2,0,0,1),opacity .5s cubic-bezier(.2,0,0,1)}.m3-carousel-right-enter-from{opacity:0;transform:translate(100%)}.m3-carousel-right-leave-to,.m3-carousel-left-enter-from{opacity:0;transform:translate(-100%)}.m3-carousel-left-leave-to{opacity:0;transform:translate(100%)}.hue-slider[data-v-872ab758]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-872ab758]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.hue-slider[data-v-872ab758]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.m3-cmd-enter-active[data-v-da578f14],.m3-cmd-leave-active[data-v-da578f14]{transition:opacity .15s}.m3-cmd-enter-from[data-v-da578f14],.m3-cmd-leave-to[data-v-da578f14]{opacity:0}.m3-cmd-enter-active .cmd-box[data-v-da578f14],.m3-cmd-leave-active .cmd-box[data-v-da578f14]{transition:transform .15s}.m3-cmd-enter-from .cmd-box[data-v-da578f14],.m3-cmd-leave-to .cmd-box[data-v-da578f14]{transform:scale(.95)translateY(-10px)}.dt-expand-grid[data-v-891083a3]{grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.2,0,0,1);display:grid}.dt-expand-grid.dt-expand-open[data-v-891083a3]{grid-template-rows:1fr}.dt-expand-body[data-v-891083a3]{min-height:0;overflow:hidden}.expand-grid[data-v-89e4475b]{grid-template-rows:1fr;display:grid}.expand-body[data-v-89e4475b]{min-height:0;overflow:hidden}.expand-enter-active[data-v-89e4475b]{transition:grid-template-rows .28s cubic-bezier(.2,0,0,1)}.expand-enter-active>.expand-body[data-v-89e4475b]{transition:opacity .22s}.expand-enter-from[data-v-89e4475b]{grid-template-rows:0fr}.expand-enter-from>.expand-body[data-v-89e4475b]{opacity:0}.expand-leave-active[data-v-89e4475b]{transition:grid-template-rows .22s cubic-bezier(.4,0,1,1)}.expand-leave-active>.expand-body[data-v-89e4475b]{transition:opacity .15s}.expand-leave-to[data-v-89e4475b]{grid-template-rows:0fr}.expand-leave-to>.expand-body[data-v-89e4475b]{opacity:0}.m3-file-enter-active[data-v-34a862f0],.m3-file-leave-active[data-v-34a862f0]{transition:all .2s}.m3-file-enter-from[data-v-34a862f0],.m3-file-leave-to[data-v-34a862f0]{opacity:0;transform:translateY(-8px)}.mli-expand-grid{grid-template-rows:1fr;display:grid}.mli-expand-body{min-height:0;padding-left:2rem;overflow:hidden}.mli-expand-enter-active{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1)}.mli-expand-enter-active>.mli-expand-body{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.mli-expand-enter-from{grid-template-rows:0fr}.mli-expand-enter-from>.mli-expand-body{opacity:0}.mli-expand-leave-active{transition:grid-template-rows .25s cubic-bezier(.4,0,1,1)}.mli-expand-leave-active>.mli-expand-body{transition:opacity .12s cubic-bezier(.4,0,1,1)}.mli-expand-leave-to{grid-template-rows:0fr}.mli-expand-leave-to>.mli-expand-body{opacity:0}input[type=number][data-v-9068433a]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-9068433a]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-9068433a]{-moz-appearance:textfield}.nd-scrim[data-v-51e30965]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-51e30965],.nd-leave-to .nd-scrim[data-v-51e30965]{opacity:0}.nd-panel[data-v-51e30965]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-51e30965],.nd-leave-to .nd-panel[data-v-51e30965]{transform:translate(-100%)}.nd-section-grid[data-v-51e30965]{grid-template-rows:1fr;display:grid}.nd-section-body[data-v-51e30965]{min-height:0;overflow:hidden}.nd-section-enter-active[data-v-51e30965]{transition:grid-template-rows .35s cubic-bezier(.2,0,0,1)}.nd-section-enter-active>.nd-section-body[data-v-51e30965]{transition:opacity .25s cubic-bezier(.2,0,0,1) 80ms}.nd-section-enter-from[data-v-51e30965]{grid-template-rows:0fr}.nd-section-enter-from>.nd-section-body[data-v-51e30965]{opacity:0}.nd-section-leave-active[data-v-51e30965]{transition:grid-template-rows .28s cubic-bezier(.4,0,1,1)}.nd-section-leave-active>.nd-section-body[data-v-51e30965]{transition:opacity .15s cubic-bezier(.4,0,1,1)}.nd-section-leave-to[data-v-51e30965]{grid-template-rows:0fr}.nd-section-leave-to>.nd-section-body[data-v-51e30965]{opacity:0}.nd-inline[data-v-51e30965]{transition:width .3s cubic-bezier(.2,0,0,1);overflow:hidden}.nd-inline[data-v-51e30965]>*{min-width:18rem}.nd-inline.nd-collapsed[data-v-51e30965]>*{min-width:0}.nd-label[data-v-51e30965]{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.nd-inline.nd-collapsed .nd-label[data-v-51e30965],.nd-inline.nd-collapsed[data-v-51e30965] .nd-label{opacity:0;transition:opacity .1s cubic-bezier(.2,0,0,1)}.nd-inline .nd-collapse-h[data-v-51e30965]{max-height:80px;transition:max-height .3s cubic-bezier(.2,0,0,1)}.nd-inline.nd-collapsed .nd-collapse-h[data-v-51e30965]{max-height:0}.nd-inline .nd-section-body[data-v-51e30965]>*,.nd-inline[data-v-51e30965] .nd-section-body>*{transition:padding .3s cubic-bezier(.2,0,0,1)}.nd-children-divider[data-v-51e30965]{border-top:1px solid #0000;height:0;margin:0 .75rem;transition:border-color .1s,margin .1s}.nd-inline.nd-collapsed .nd-children-divider[data-v-51e30965]{border-top-color:var(--color-outline-variant);margin:.25rem .75rem;transition:border-color .2s .3s,margin .2s .3s}@keyframes m3-wave-flow{0%{transform:translate(0)}to{transform:translate(-20px)}}@keyframes m3-progress-indeterminate{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wave-flow_1\.2s_linear_infinite\],.animate-\[m3-wave-flow_0\.9s_linear_infinite\],.animate-\[m3-progress-indeterminate_1\.6s_ease-in-out_infinite\]{animation:none!important}}.m3-radio-dot[data-v-cdb650b5]{transform-box:fill-box;transform-origin:50%;transition:transform .15s;transform:scale(0)}.m3-radio-dot.is-checked[data-v-cdb650b5]{transform:scale(1)}.ss-scrim[data-v-ba5b6f4b]{transition:opacity .28s}.ss-enter-from .ss-scrim[data-v-ba5b6f4b],.ss-leave-to .ss-scrim[data-v-ba5b6f4b]{opacity:0}.ss-panel[data-v-ba5b6f4b]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.ss-enter-from .ss-panel[data-v-ba5b6f4b]{opacity:0;transform:translate(40%)}.ss-leave-to .ss-panel[data-v-ba5b6f4b]{opacity:0;transform:translate(100%)!important}@keyframes skeleton-wave-move-32ecf05b{0%{transform:translate(-100%)}60%{transform:translate(100%)}to{transform:translate(100%)}}.skeleton-wave[data-v-32ecf05b]{position:relative;overflow:hidden}.skeleton-wave[data-v-32ecf05b]:after{content:"";background:linear-gradient(90deg, transparent 0%, var(--color-on-surface) 50%, transparent 100%);opacity:.06;animation:1.8s ease-in-out infinite skeleton-wave-move-32ecf05b;position:absolute;inset:0}.toast-row[data-v-746fa345]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-746fa345]{min-height:0}.m3-toast-bot-enter-active[data-v-746fa345]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-enter-active>.toast-inner[data-v-746fa345]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-746fa345]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-746fa345]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-leave-active>.toast-inner[data-v-746fa345]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-746fa345]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-746fa345]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-enter-active>.toast-inner[data-v-746fa345]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-746fa345]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-746fa345]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-leave-active>.toast-inner[data-v-746fa345]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-746fa345]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-746fa345{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.m3-spot-enter-active[data-v-51b103ff],.m3-spot-leave-active[data-v-51b103ff]{transition:opacity .15s}.m3-spot-enter-from[data-v-51b103ff],.m3-spot-leave-to[data-v-51b103ff]{opacity:0}.m3-spot-enter-active .spot-box[data-v-51b103ff],.m3-spot-leave-active .spot-box[data-v-51b103ff]{transition:transform .15s,opacity .15s}.m3-spot-enter-from .spot-box[data-v-51b103ff]{opacity:0;transform:scale(.96)translateY(-8px)}.m3-spot-leave-to .spot-box[data-v-51b103ff]{opacity:0;transform:scale(.98)}.m3-tour-highlight{box-shadow:0 0 0 4px var(--color-primary);border-radius:8px;position:relative;z-index:201!important}.m3-tour-enter-active,.m3-tour-leave-active{transition:opacity .2s}.m3-tour-enter-from,.m3-tour-leave-to{opacity:0}.m3-markdown[data-v-23db2c2c] h1{font-size:var(--text-headline-large);line-height:var(--text-headline-large--line-height);color:var(--color-on-surface);margin:1em 0 .5em;font-weight:600}.m3-markdown[data-v-23db2c2c] h2{font-size:var(--text-headline-medium);line-height:var(--text-headline-medium--line-height);color:var(--color-on-surface);margin:1em 0 .5em;font-weight:600}.m3-markdown[data-v-23db2c2c] h3{font-size:var(--text-headline-small);line-height:var(--text-headline-small--line-height);color:var(--color-on-surface);margin:.75em 0 .25em;font-weight:600}.m3-markdown[data-v-23db2c2c] h4{font-size:var(--text-title-large);line-height:var(--text-title-large--line-height);color:var(--color-on-surface);margin:.75em 0 .25em;font-weight:600}.m3-markdown[data-v-23db2c2c] p{margin:.5em 0}.m3-markdown[data-v-23db2c2c] a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.m3-markdown[data-v-23db2c2c] a:hover{opacity:.8}.m3-markdown[data-v-23db2c2c] strong{color:var(--color-on-surface);font-weight:600}.m3-markdown[data-v-23db2c2c] em{font-style:italic}.m3-markdown[data-v-23db2c2c] ul{margin:.5em 0;padding-left:1.5em;list-style-type:disc}.m3-markdown[data-v-23db2c2c] ol{margin:.5em 0;padding-left:1.5em;list-style-type:decimal}.m3-markdown[data-v-23db2c2c] li{margin:.25em 0}.m3-markdown[data-v-23db2c2c] li::marker{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] blockquote{border-left:3px solid var(--color-primary);background:var(--color-surface-container);color:var(--color-on-surface-variant);border-radius:0 8px 8px 0;margin:.75em 0;padding:.5em 1em}.m3-markdown[data-v-23db2c2c] code{background:var(--color-surface-container-highest);color:var(--color-primary);border-radius:4px;padding:.15em .4em;font-family:Roboto Mono,Fira Code,Consolas,monospace;font-size:.875em}.m3-markdown[data-v-23db2c2c] pre{background:var(--color-surface-container-highest);border:1px solid var(--color-outline-variant);border-radius:12px;margin:.75em 0;padding:1em;overflow-x:auto}.m3-markdown[data-v-23db2c2c] pre code{color:var(--color-on-surface);background:0 0;padding:0;font-size:.8125rem;line-height:1.6}.m3-markdown[data-v-23db2c2c] .hljs-keyword,.m3-markdown[data-v-23db2c2c] .hljs-selector-tag,.m3-markdown[data-v-23db2c2c] .hljs-built_in,.m3-markdown[data-v-23db2c2c] .hljs-tag .hljs-keyword{color:var(--color-primary)}.m3-markdown[data-v-23db2c2c] .hljs-string,.m3-markdown[data-v-23db2c2c] .hljs-regexp,.m3-markdown[data-v-23db2c2c] .hljs-template-variable{color:var(--color-tertiary)}.m3-markdown[data-v-23db2c2c] .hljs-number,.m3-markdown[data-v-23db2c2c] .hljs-literal{color:var(--color-error)}.m3-markdown[data-v-23db2c2c] .hljs-title.function_,.m3-markdown[data-v-23db2c2c] .hljs-title.function_>.hljs-keyword{color:var(--color-secondary);font-weight:500}.m3-markdown[data-v-23db2c2c] .hljs-type,.m3-markdown[data-v-23db2c2c] .hljs-title.class_{color:var(--color-primary);font-style:italic}.m3-markdown[data-v-23db2c2c] .hljs-comment,.m3-markdown[data-v-23db2c2c] .hljs-quote{color:var(--color-outline);font-style:italic}.m3-markdown[data-v-23db2c2c] .hljs-attr,.m3-markdown[data-v-23db2c2c] .hljs-attribute{color:var(--color-tertiary)}.m3-markdown[data-v-23db2c2c] .hljs-tag{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] .hljs-name{color:var(--color-primary)}.m3-markdown[data-v-23db2c2c] .hljs-punctuation,.m3-markdown[data-v-23db2c2c] .hljs-operator,.m3-markdown[data-v-23db2c2c] .hljs-meta,.m3-markdown[data-v-23db2c2c] .hljs-meta .hljs-keyword{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] .hljs-variable,.m3-markdown[data-v-23db2c2c] .hljs-property,.m3-markdown[data-v-23db2c2c] .hljs-symbol,.m3-markdown[data-v-23db2c2c] .hljs-params{color:var(--color-on-surface)}.m3-markdown[data-v-23db2c2c] .m3-code-block{position:relative}.m3-markdown[data-v-23db2c2c] .m3-code-copy{background:var(--color-surface-container);width:28px;height:28px;color:var(--color-on-surface-variant);cursor:pointer;opacity:0;z-index:1;border:none;border-radius:6px;justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;top:8px;right:8px}.m3-markdown[data-v-23db2c2c] .m3-code-block:hover .m3-code-copy{opacity:1}.m3-markdown[data-v-23db2c2c] .m3-code-copy:hover{background:var(--color-surface-container-high);color:var(--color-on-surface)}.m3-markdown[data-v-23db2c2c] .m3-code-line{display:block}.m3-markdown[data-v-23db2c2c] .m3-line-hl{background:color-mix(in srgb, var(--color-primary) 8%, transparent);border-left:2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);margin:0 -1em;padding:0 1em 0 calc(1em - 2px)}.m3-markdown[data-v-23db2c2c] hr{border:none;border-top:1px solid var(--color-outline-variant);margin:1.5em 0}.m3-markdown[data-v-23db2c2c] table{border-collapse:collapse;width:100%;margin:.75em 0}.m3-markdown[data-v-23db2c2c] th{background:var(--color-surface-container);text-align:left;border-bottom:2px solid var(--color-outline-variant);font-weight:600;font-size:var(--text-label-large);color:var(--color-on-surface);padding:.5em .75em}.m3-markdown[data-v-23db2c2c] td{border-bottom:1px solid var(--color-outline-variant);padding:.5em .75em}.m3-markdown[data-v-23db2c2c] img{border-radius:12px;max-width:100%;height:auto;margin:.5em 0}.rte-content[data-v-c59a60e3] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-c59a60e3] .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--color-on-surface-variant);opacity:.5;pointer-events:none;height:0}.rte-content[data-v-c59a60e3] h1{font-size:var(--text-headline-large);line-height:var(--text-headline-large--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-c59a60e3] h2{font-size:var(--text-headline-medium);line-height:var(--text-headline-medium--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-c59a60e3] h3{font-size:var(--text-headline-small);line-height:var(--text-headline-small--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-c59a60e3] p{margin:.5em 0}.rte-content[data-v-c59a60e3] ul{margin:.5em 0;padding-left:1.5em;list-style-type:disc}.rte-content[data-v-c59a60e3] ol{margin:.5em 0;padding-left:1.5em;list-style-type:decimal}.rte-content[data-v-c59a60e3] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-c59a60e3] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-c59a60e3] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-c59a60e3] pre code{background:0 0;padding:0}.rte-content[data-v-c59a60e3] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-c59a60e3] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-c59a60e3] img{border-radius:8px;max-width:100%;height:auto;margin:.5em 0}
|
|
1
|
+
.code-editor-container[data-v-b0a66a4b] .cm-editor{height:100%;min-height:inherit;font-family:Roboto Mono,Fira Code,Consolas,monospace;font-size:.8125rem;line-height:1.6}.code-editor-container[data-v-b0a66a4b] .cm-editor.cm-focused{outline:none}.code-editor-container[data-v-b0a66a4b] .cm-scroller{min-height:inherit}.code-editor-container[data-v-b0a66a4b] .cm-content{padding:12px 0}.code-editor-container[data-v-b0a66a4b] .cm-line{padding:0 16px}.code-editor-container[data-v-b0a66a4b] .cm-gutters{background:var(--color-surface-container);border-right:1px solid var(--color-outline-variant);color:var(--color-outline);padding:0 4px;font-size:.75rem}.code-editor-container[data-v-b0a66a4b] .cm-activeLineGutter{background:var(--color-surface-container-high);color:var(--color-on-surface-variant)}.code-editor-container[data-v-b0a66a4b] .cm-activeLine{background:var(--color-surface-container-lowest)}.code-editor-container[data-v-b0a66a4b] .cm-selectionBackground{background:var(--color-primary-container)!important}.code-editor-container[data-v-b0a66a4b] .cm-cursor{border-left-color:var(--color-primary);border-left-width:2px}.code-editor-container[data-v-b0a66a4b] .cm-matchingBracket{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px}.code-editor-container[data-v-b0a66a4b] .cm-foldGutter span{color:var(--color-on-surface-variant)}@keyframes m3-wavy-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes m3-wavy-travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--m3-wave-len) * -1px)}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wavy-spin_2\.8s_linear_infinite\]{animation:2.8s linear infinite m3-wavy-spin}.animate-\[m3-wavy-travel_2s_linear_infinite\]{animation:none!important}}.m3-dialog-enter-active[data-v-4ccfbc3c],.m3-dialog-leave-active[data-v-4ccfbc3c]{transition:opacity .15s}.m3-dialog-enter-from[data-v-4ccfbc3c],.m3-dialog-leave-to[data-v-4ccfbc3c]{opacity:0}.m3-dialog-enter-active .dialog-box[data-v-4ccfbc3c],.m3-dialog-leave-active .dialog-box[data-v-4ccfbc3c]{transition:transform .15s}.m3-dialog-enter-from .dialog-box[data-v-4ccfbc3c],.m3-dialog-leave-to .dialog-box[data-v-4ccfbc3c]{transform:scale(.95)}.bs-scrim[data-v-5b1fb748]{transition:opacity .3s}.bs-enter-from .bs-scrim[data-v-5b1fb748],.bs-leave-to .bs-scrim[data-v-5b1fb748]{opacity:0}.bs-panel[data-v-5b1fb748]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.bs-enter-from .bs-panel[data-v-5b1fb748]{opacity:0;transform:translateY(40%)}.bs-leave-to .bs-panel[data-v-5b1fb748]{opacity:0;transform:translateY(100%)!important}.m3-carousel-right-enter-active,.m3-carousel-right-leave-active,.m3-carousel-left-enter-active,.m3-carousel-left-leave-active{transition:transform .5s cubic-bezier(.2,0,0,1),opacity .5s cubic-bezier(.2,0,0,1)}.m3-carousel-right-enter-from{opacity:0;transform:translate(100%)}.m3-carousel-right-leave-to,.m3-carousel-left-enter-from{opacity:0;transform:translate(-100%)}.m3-carousel-left-leave-to{opacity:0;transform:translate(100%)}.hue-slider[data-v-872ab758]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-872ab758]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.hue-slider[data-v-872ab758]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.m3-cmd-enter-active[data-v-4d6cca63],.m3-cmd-leave-active[data-v-4d6cca63]{transition:opacity .15s}.m3-cmd-enter-from[data-v-4d6cca63],.m3-cmd-leave-to[data-v-4d6cca63]{opacity:0}.m3-cmd-enter-active .cmd-box[data-v-4d6cca63],.m3-cmd-leave-active .cmd-box[data-v-4d6cca63]{transition:transform .15s}.m3-cmd-enter-from .cmd-box[data-v-4d6cca63],.m3-cmd-leave-to .cmd-box[data-v-4d6cca63]{transform:scale(.95)translateY(-10px)}.dt-expand-grid[data-v-857139c7]{grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.2,0,0,1);display:grid}.dt-expand-grid.dt-expand-open[data-v-857139c7]{grid-template-rows:1fr}.dt-expand-body[data-v-857139c7]{min-height:0;overflow:hidden}.expand-grid[data-v-89e4475b]{grid-template-rows:1fr;display:grid}.expand-body[data-v-89e4475b]{min-height:0;overflow:hidden}.expand-enter-active[data-v-89e4475b]{transition:grid-template-rows .28s cubic-bezier(.2,0,0,1)}.expand-enter-active>.expand-body[data-v-89e4475b]{transition:opacity .22s}.expand-enter-from[data-v-89e4475b]{grid-template-rows:0fr}.expand-enter-from>.expand-body[data-v-89e4475b]{opacity:0}.expand-leave-active[data-v-89e4475b]{transition:grid-template-rows .22s cubic-bezier(.4,0,1,1)}.expand-leave-active>.expand-body[data-v-89e4475b]{transition:opacity .15s}.expand-leave-to[data-v-89e4475b]{grid-template-rows:0fr}.expand-leave-to>.expand-body[data-v-89e4475b]{opacity:0}.m3-file-enter-active[data-v-6b150427],.m3-file-leave-active[data-v-6b150427]{transition:all .2s}.m3-file-enter-from[data-v-6b150427],.m3-file-leave-to[data-v-6b150427]{opacity:0;transform:translateY(-8px)}.mli-expand-grid{grid-template-rows:1fr;display:grid}.mli-expand-body{min-height:0;padding-left:2rem;overflow:hidden}.mli-expand-enter-active{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1)}.mli-expand-enter-active>.mli-expand-body{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.mli-expand-enter-from{grid-template-rows:0fr}.mli-expand-enter-from>.mli-expand-body{opacity:0}.mli-expand-leave-active{transition:grid-template-rows .25s cubic-bezier(.4,0,1,1)}.mli-expand-leave-active>.mli-expand-body{transition:opacity .12s cubic-bezier(.4,0,1,1)}.mli-expand-leave-to{grid-template-rows:0fr}.mli-expand-leave-to>.mli-expand-body{opacity:0}input[type=number][data-v-9068433a]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-9068433a]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-9068433a]{-moz-appearance:textfield}.nd-scrim[data-v-51e30965]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-51e30965],.nd-leave-to .nd-scrim[data-v-51e30965]{opacity:0}.nd-panel[data-v-51e30965]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-51e30965],.nd-leave-to .nd-panel[data-v-51e30965]{transform:translate(-100%)}.nd-section-grid[data-v-51e30965]{grid-template-rows:1fr;display:grid}.nd-section-body[data-v-51e30965]{min-height:0;overflow:hidden}.nd-section-enter-active[data-v-51e30965]{transition:grid-template-rows .35s cubic-bezier(.2,0,0,1)}.nd-section-enter-active>.nd-section-body[data-v-51e30965]{transition:opacity .25s cubic-bezier(.2,0,0,1) 80ms}.nd-section-enter-from[data-v-51e30965]{grid-template-rows:0fr}.nd-section-enter-from>.nd-section-body[data-v-51e30965]{opacity:0}.nd-section-leave-active[data-v-51e30965]{transition:grid-template-rows .28s cubic-bezier(.4,0,1,1)}.nd-section-leave-active>.nd-section-body[data-v-51e30965]{transition:opacity .15s cubic-bezier(.4,0,1,1)}.nd-section-leave-to[data-v-51e30965]{grid-template-rows:0fr}.nd-section-leave-to>.nd-section-body[data-v-51e30965]{opacity:0}.nd-inline[data-v-51e30965]{transition:width .3s cubic-bezier(.2,0,0,1);overflow:hidden}.nd-inline[data-v-51e30965]>*{min-width:18rem}.nd-inline.nd-collapsed[data-v-51e30965]>*{min-width:0}.nd-label[data-v-51e30965]{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.nd-inline.nd-collapsed .nd-label[data-v-51e30965],.nd-inline.nd-collapsed[data-v-51e30965] .nd-label{opacity:0;transition:opacity .1s cubic-bezier(.2,0,0,1)}.nd-inline .nd-collapse-h[data-v-51e30965]{max-height:80px;transition:max-height .3s cubic-bezier(.2,0,0,1)}.nd-inline.nd-collapsed .nd-collapse-h[data-v-51e30965]{max-height:0}.nd-inline .nd-section-body[data-v-51e30965]>*,.nd-inline[data-v-51e30965] .nd-section-body>*{transition:padding .3s cubic-bezier(.2,0,0,1)}.nd-children-divider[data-v-51e30965]{border-top:1px solid #0000;height:0;margin:0 .75rem;transition:border-color .1s,margin .1s}.nd-inline.nd-collapsed .nd-children-divider[data-v-51e30965]{border-top-color:var(--color-outline-variant);margin:.25rem .75rem;transition:border-color .2s .3s,margin .2s .3s}@keyframes m3-wave-flow{0%{transform:translate(0)}to{transform:translate(-20px)}}@keyframes m3-progress-indeterminate{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wave-flow_1\.2s_linear_infinite\],.animate-\[m3-wave-flow_0\.9s_linear_infinite\],.animate-\[m3-progress-indeterminate_1\.6s_ease-in-out_infinite\]{animation:none!important}}.m3-radio-dot[data-v-cdb650b5]{transform-box:fill-box;transform-origin:50%;transition:transform .15s;transform:scale(0)}.m3-radio-dot.is-checked[data-v-cdb650b5]{transform:scale(1)}.ss-scrim[data-v-ba5b6f4b]{transition:opacity .28s}.ss-enter-from .ss-scrim[data-v-ba5b6f4b],.ss-leave-to .ss-scrim[data-v-ba5b6f4b]{opacity:0}.ss-panel[data-v-ba5b6f4b]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.ss-enter-from .ss-panel[data-v-ba5b6f4b]{opacity:0;transform:translate(40%)}.ss-leave-to .ss-panel[data-v-ba5b6f4b]{opacity:0;transform:translate(100%)!important}@keyframes skeleton-wave-move-32ecf05b{0%{transform:translate(-100%)}60%{transform:translate(100%)}to{transform:translate(100%)}}.skeleton-wave[data-v-32ecf05b]{position:relative;overflow:hidden}.skeleton-wave[data-v-32ecf05b]:after{content:"";background:linear-gradient(90deg, transparent 0%, var(--color-on-surface) 50%, transparent 100%);opacity:.06;animation:1.8s ease-in-out infinite skeleton-wave-move-32ecf05b;position:absolute;inset:0}.toast-row[data-v-64ce9e7c]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-64ce9e7c]{min-height:0}.m3-toast-bot-enter-active[data-v-64ce9e7c]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-enter-active>.toast-inner[data-v-64ce9e7c]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-64ce9e7c]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-leave-active>.toast-inner[data-v-64ce9e7c]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-64ce9e7c]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-enter-active>.toast-inner[data-v-64ce9e7c]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-64ce9e7c]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-leave-active>.toast-inner[data-v-64ce9e7c]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-64ce9e7c{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.m3-spot-enter-active[data-v-1fa0da82],.m3-spot-leave-active[data-v-1fa0da82]{transition:opacity .15s}.m3-spot-enter-from[data-v-1fa0da82],.m3-spot-leave-to[data-v-1fa0da82]{opacity:0}.m3-spot-enter-active .spot-box[data-v-1fa0da82],.m3-spot-leave-active .spot-box[data-v-1fa0da82]{transition:transform .15s,opacity .15s}.m3-spot-enter-from .spot-box[data-v-1fa0da82]{opacity:0;transform:scale(.96)translateY(-8px)}.m3-spot-leave-to .spot-box[data-v-1fa0da82]{opacity:0;transform:scale(.98)}.m3-tour-highlight{box-shadow:0 0 0 4px var(--color-primary);border-radius:8px;position:relative;z-index:201!important}.m3-tour-enter-active,.m3-tour-leave-active{transition:opacity .2s}.m3-tour-enter-from,.m3-tour-leave-to{opacity:0}.m3-markdown[data-v-23db2c2c] h1{font-size:var(--text-headline-large);line-height:var(--text-headline-large--line-height);color:var(--color-on-surface);margin:1em 0 .5em;font-weight:600}.m3-markdown[data-v-23db2c2c] h2{font-size:var(--text-headline-medium);line-height:var(--text-headline-medium--line-height);color:var(--color-on-surface);margin:1em 0 .5em;font-weight:600}.m3-markdown[data-v-23db2c2c] h3{font-size:var(--text-headline-small);line-height:var(--text-headline-small--line-height);color:var(--color-on-surface);margin:.75em 0 .25em;font-weight:600}.m3-markdown[data-v-23db2c2c] h4{font-size:var(--text-title-large);line-height:var(--text-title-large--line-height);color:var(--color-on-surface);margin:.75em 0 .25em;font-weight:600}.m3-markdown[data-v-23db2c2c] p{margin:.5em 0}.m3-markdown[data-v-23db2c2c] a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.m3-markdown[data-v-23db2c2c] a:hover{opacity:.8}.m3-markdown[data-v-23db2c2c] strong{color:var(--color-on-surface);font-weight:600}.m3-markdown[data-v-23db2c2c] em{font-style:italic}.m3-markdown[data-v-23db2c2c] ul{margin:.5em 0;padding-left:1.5em;list-style-type:disc}.m3-markdown[data-v-23db2c2c] ol{margin:.5em 0;padding-left:1.5em;list-style-type:decimal}.m3-markdown[data-v-23db2c2c] li{margin:.25em 0}.m3-markdown[data-v-23db2c2c] li::marker{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] blockquote{border-left:3px solid var(--color-primary);background:var(--color-surface-container);color:var(--color-on-surface-variant);border-radius:0 8px 8px 0;margin:.75em 0;padding:.5em 1em}.m3-markdown[data-v-23db2c2c] code{background:var(--color-surface-container-highest);color:var(--color-primary);border-radius:4px;padding:.15em .4em;font-family:Roboto Mono,Fira Code,Consolas,monospace;font-size:.875em}.m3-markdown[data-v-23db2c2c] pre{background:var(--color-surface-container-highest);border:1px solid var(--color-outline-variant);border-radius:12px;margin:.75em 0;padding:1em;overflow-x:auto}.m3-markdown[data-v-23db2c2c] pre code{color:var(--color-on-surface);background:0 0;padding:0;font-size:.8125rem;line-height:1.6}.m3-markdown[data-v-23db2c2c] .hljs-keyword,.m3-markdown[data-v-23db2c2c] .hljs-selector-tag,.m3-markdown[data-v-23db2c2c] .hljs-built_in,.m3-markdown[data-v-23db2c2c] .hljs-tag .hljs-keyword{color:var(--color-primary)}.m3-markdown[data-v-23db2c2c] .hljs-string,.m3-markdown[data-v-23db2c2c] .hljs-regexp,.m3-markdown[data-v-23db2c2c] .hljs-template-variable{color:var(--color-tertiary)}.m3-markdown[data-v-23db2c2c] .hljs-number,.m3-markdown[data-v-23db2c2c] .hljs-literal{color:var(--color-error)}.m3-markdown[data-v-23db2c2c] .hljs-title.function_,.m3-markdown[data-v-23db2c2c] .hljs-title.function_>.hljs-keyword{color:var(--color-secondary);font-weight:500}.m3-markdown[data-v-23db2c2c] .hljs-type,.m3-markdown[data-v-23db2c2c] .hljs-title.class_{color:var(--color-primary);font-style:italic}.m3-markdown[data-v-23db2c2c] .hljs-comment,.m3-markdown[data-v-23db2c2c] .hljs-quote{color:var(--color-outline);font-style:italic}.m3-markdown[data-v-23db2c2c] .hljs-attr,.m3-markdown[data-v-23db2c2c] .hljs-attribute{color:var(--color-tertiary)}.m3-markdown[data-v-23db2c2c] .hljs-tag{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] .hljs-name{color:var(--color-primary)}.m3-markdown[data-v-23db2c2c] .hljs-punctuation,.m3-markdown[data-v-23db2c2c] .hljs-operator,.m3-markdown[data-v-23db2c2c] .hljs-meta,.m3-markdown[data-v-23db2c2c] .hljs-meta .hljs-keyword{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] .hljs-variable,.m3-markdown[data-v-23db2c2c] .hljs-property,.m3-markdown[data-v-23db2c2c] .hljs-symbol,.m3-markdown[data-v-23db2c2c] .hljs-params{color:var(--color-on-surface)}.m3-markdown[data-v-23db2c2c] .m3-code-block{position:relative}.m3-markdown[data-v-23db2c2c] .m3-code-copy{background:var(--color-surface-container);width:28px;height:28px;color:var(--color-on-surface-variant);cursor:pointer;opacity:0;z-index:1;border:none;border-radius:6px;justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;top:8px;right:8px}.m3-markdown[data-v-23db2c2c] .m3-code-block:hover .m3-code-copy{opacity:1}.m3-markdown[data-v-23db2c2c] .m3-code-copy:hover{background:var(--color-surface-container-high);color:var(--color-on-surface)}.m3-markdown[data-v-23db2c2c] .m3-code-line{display:block}.m3-markdown[data-v-23db2c2c] .m3-line-hl{background:color-mix(in srgb, var(--color-primary) 8%, transparent);border-left:2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);margin:0 -1em;padding:0 1em 0 calc(1em - 2px)}.m3-markdown[data-v-23db2c2c] hr{border:none;border-top:1px solid var(--color-outline-variant);margin:1.5em 0}.m3-markdown[data-v-23db2c2c] table{border-collapse:collapse;width:100%;margin:.75em 0}.m3-markdown[data-v-23db2c2c] th{background:var(--color-surface-container);text-align:left;border-bottom:2px solid var(--color-outline-variant);font-weight:600;font-size:var(--text-label-large);color:var(--color-on-surface);padding:.5em .75em}.m3-markdown[data-v-23db2c2c] td{border-bottom:1px solid var(--color-outline-variant);padding:.5em .75em}.m3-markdown[data-v-23db2c2c] img{border-radius:12px;max-width:100%;height:auto;margin:.5em 0}.rte-content[data-v-e6829e5c] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-e6829e5c] .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--color-on-surface-variant);opacity:.5;pointer-events:none;height:0}.rte-content[data-v-e6829e5c] h1{font-size:var(--text-headline-large);line-height:var(--text-headline-large--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-e6829e5c] h2{font-size:var(--text-headline-medium);line-height:var(--text-headline-medium--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-e6829e5c] h3{font-size:var(--text-headline-small);line-height:var(--text-headline-small--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-e6829e5c] p{margin:.5em 0}.rte-content[data-v-e6829e5c] ul{margin:.5em 0;padding-left:1.5em;list-style-type:disc}.rte-content[data-v-e6829e5c] ol{margin:.5em 0;padding-left:1.5em;list-style-type:decimal}.rte-content[data-v-e6829e5c] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-e6829e5c] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-e6829e5c] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-e6829e5c] pre code{background:0 0;padding:0}.rte-content[data-v-e6829e5c] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-e6829e5c] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-e6829e5c] img{border-radius:8px;max-width:100%;height:auto;margin:.5em 0}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m3ui-vue/m3ui-vue",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Material 3 component library for Vue 3 + Tailwind CSS v4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -49,7 +49,11 @@
|
|
|
49
49
|
},
|
|
50
50
|
"./styles": "./dist/styles.css",
|
|
51
51
|
"./theme": "./src/styles/theme.css",
|
|
52
|
-
"./palettes": "./src/styles/palettes.css"
|
|
52
|
+
"./palettes": "./src/styles/palettes.css",
|
|
53
|
+
"./locales": {
|
|
54
|
+
"types": "./dist/locales/index.d.ts",
|
|
55
|
+
"import": "./dist/locales/index.js"
|
|
56
|
+
}
|
|
53
57
|
},
|
|
54
58
|
"files": [
|
|
55
59
|
"dist",
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import MIcon from './MIcon.vue'
|
|
3
|
+
import { useLocale } from '../composables/useLocale'
|
|
3
4
|
|
|
4
5
|
const props = withDefaults(
|
|
5
6
|
defineProps<{
|
|
6
7
|
type?: 'info' | 'success' | 'warning' | 'error'
|
|
7
8
|
title?: string
|
|
8
9
|
closeable?: boolean
|
|
10
|
+
closeAriaLabel?: string
|
|
9
11
|
}>(),
|
|
10
12
|
{
|
|
11
13
|
type: 'info',
|
|
@@ -13,6 +15,8 @@ const props = withDefaults(
|
|
|
13
15
|
},
|
|
14
16
|
)
|
|
15
17
|
|
|
18
|
+
const locale = useLocale()
|
|
19
|
+
|
|
16
20
|
const emit = defineEmits<{ close: [] }>()
|
|
17
21
|
|
|
18
22
|
const config = {
|
|
@@ -60,7 +64,7 @@ const config = {
|
|
|
60
64
|
v-if="closeable"
|
|
61
65
|
type="button"
|
|
62
66
|
class="-mr-1 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-on-surface/8"
|
|
63
|
-
aria-label="
|
|
67
|
+
:aria-label="closeAriaLabel ?? locale.close"
|
|
64
68
|
@click="emit('close')"
|
|
65
69
|
>
|
|
66
70
|
<MIcon name="close" :size="18" />
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { computed, ref } from 'vue'
|
|
3
3
|
import MIcon from './MIcon.vue'
|
|
4
4
|
import MIconButton from './MIconButton.vue'
|
|
5
|
+
import { useLocale } from '../composables/useLocale'
|
|
5
6
|
|
|
6
7
|
export interface CalendarEvent {
|
|
7
8
|
id: string | number
|
|
@@ -14,7 +15,15 @@ export interface CalendarEvent {
|
|
|
14
15
|
const props = withDefaults(defineProps<{
|
|
15
16
|
events?: CalendarEvent[]
|
|
16
17
|
locale?: string
|
|
17
|
-
|
|
18
|
+
todayLabel?: string
|
|
19
|
+
prevMonthLabel?: string
|
|
20
|
+
nextMonthLabel?: string
|
|
21
|
+
}>(), {
|
|
22
|
+
events: () => [],
|
|
23
|
+
locale: 'es-ES',
|
|
24
|
+
})
|
|
25
|
+
|
|
26
|
+
const localeStrings = useLocale()
|
|
18
27
|
|
|
19
28
|
const emit = defineEmits<{
|
|
20
29
|
dateClick: [string]
|
|
@@ -96,8 +105,8 @@ const eventColor: Record<string, string> = {
|
|
|
96
105
|
<!-- Header -->
|
|
97
106
|
<div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-3">
|
|
98
107
|
<div class="flex items-center gap-1">
|
|
99
|
-
<MIconButton icon="chevron_left" label="
|
|
100
|
-
<MIconButton icon="chevron_right" label="
|
|
108
|
+
<MIconButton icon="chevron_left" :label="prevMonthLabel ?? localeStrings.previousMonth" :size="36" @click="prevMonth" />
|
|
109
|
+
<MIconButton icon="chevron_right" :label="nextMonthLabel ?? localeStrings.nextMonth" :size="36" @click="nextMonth" />
|
|
101
110
|
</div>
|
|
102
111
|
<h3 class="text-title-medium font-medium capitalize text-on-surface">{{ monthLabel }}</h3>
|
|
103
112
|
<button
|
|
@@ -105,7 +114,7 @@ const eventColor: Record<string, string> = {
|
|
|
105
114
|
class="cursor-pointer rounded-full border border-outline px-3 py-1 text-label-medium text-on-surface transition-colors hover:bg-on-surface/8"
|
|
106
115
|
@click="goToday"
|
|
107
116
|
>
|
|
108
|
-
|
|
117
|
+
{{ todayLabel ?? localeStrings.today }}
|
|
109
118
|
</button>
|
|
110
119
|
</div>
|
|
111
120
|
|
|
@@ -164,7 +173,7 @@ const eventColor: Record<string, string> = {
|
|
|
164
173
|
v-if="day.events.length > 2"
|
|
165
174
|
class="px-1 text-label-small text-on-surface-variant"
|
|
166
175
|
>
|
|
167
|
-
+{{ day.events.length - 2 }}
|
|
176
|
+
+{{ day.events.length - 2 }} {{ localeStrings.more }}
|
|
168
177
|
</span>
|
|
169
178
|
</div>
|
|
170
179
|
</div>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
|
|
3
3
|
import MIcon from './MIcon.vue'
|
|
4
|
+
import { useLocale } from '../composables/useLocale'
|
|
5
|
+
|
|
6
|
+
const locale = useLocale()
|
|
4
7
|
|
|
5
8
|
export interface CommandItem {
|
|
6
9
|
id: string
|
|
@@ -19,10 +22,11 @@ const props = withDefaults(
|
|
|
19
22
|
placeholder?: string
|
|
20
23
|
noResultsText?: string
|
|
21
24
|
hotkey?: string
|
|
25
|
+
navigateHint?: string
|
|
26
|
+
selectHint?: string
|
|
27
|
+
closeHint?: string
|
|
22
28
|
}>(),
|
|
23
29
|
{
|
|
24
|
-
placeholder: 'Buscar comando...',
|
|
25
|
-
noResultsText: 'Sin resultados',
|
|
26
30
|
hotkey: 'k',
|
|
27
31
|
},
|
|
28
32
|
)
|
|
@@ -136,7 +140,7 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onGlobalKeydown))
|
|
|
136
140
|
ref="inputRef"
|
|
137
141
|
v-model="query"
|
|
138
142
|
type="text"
|
|
139
|
-
:placeholder="placeholder"
|
|
143
|
+
:placeholder="placeholder ?? locale.searchCommand"
|
|
140
144
|
class="h-12 flex-1 bg-transparent text-body-large text-on-surface outline-none placeholder:text-on-surface-variant/50"
|
|
141
145
|
@keydown="onKeydown"
|
|
142
146
|
/>
|
|
@@ -171,20 +175,20 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onGlobalKeydown))
|
|
|
171
175
|
</template>
|
|
172
176
|
</template>
|
|
173
177
|
<p v-else class="px-4 py-6 text-center text-body-medium text-on-surface-variant">
|
|
174
|
-
{{ noResultsText }}
|
|
178
|
+
{{ noResultsText ?? locale.noResults }}
|
|
175
179
|
</p>
|
|
176
180
|
</div>
|
|
177
181
|
|
|
178
182
|
<!-- Footer -->
|
|
179
183
|
<div class="flex items-center gap-4 border-t border-outline-variant px-4 py-2">
|
|
180
184
|
<span class="flex items-center gap-1 text-label-small text-on-surface-variant">
|
|
181
|
-
<kbd class="rounded bg-surface-container px-1 py-0.5">↑↓</kbd>
|
|
185
|
+
<kbd class="rounded bg-surface-container px-1 py-0.5">↑↓</kbd> {{ navigateHint ?? locale.navigateHint }}
|
|
182
186
|
</span>
|
|
183
187
|
<span class="flex items-center gap-1 text-label-small text-on-surface-variant">
|
|
184
|
-
<kbd class="rounded bg-surface-container px-1 py-0.5">↵</kbd>
|
|
188
|
+
<kbd class="rounded bg-surface-container px-1 py-0.5">↵</kbd> {{ selectHint ?? locale.selectHint }}
|
|
185
189
|
</span>
|
|
186
190
|
<span class="flex items-center gap-1 text-label-small text-on-surface-variant">
|
|
187
|
-
<kbd class="rounded bg-surface-container px-1 py-0.5">esc</kbd>
|
|
191
|
+
<kbd class="rounded bg-surface-container px-1 py-0.5">esc</kbd> {{ closeHint ?? locale.closeHint }}
|
|
188
192
|
</span>
|
|
189
193
|
</div>
|
|
190
194
|
</div>
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import MDialog from './MDialog.vue'
|
|
3
3
|
import MButton from './MButton.vue'
|
|
4
|
+
import { useLocale } from '../composables/useLocale'
|
|
4
5
|
|
|
5
|
-
withDefaults(
|
|
6
|
+
const props = withDefaults(
|
|
6
7
|
defineProps<{
|
|
7
8
|
modelValue: boolean
|
|
8
9
|
title: string
|
|
@@ -13,13 +14,13 @@ withDefaults(
|
|
|
13
14
|
loading?: boolean
|
|
14
15
|
}>(),
|
|
15
16
|
{
|
|
16
|
-
confirmLabel: 'Confirmar',
|
|
17
|
-
cancelLabel: 'Cancelar',
|
|
18
17
|
danger: false,
|
|
19
18
|
loading: false,
|
|
20
19
|
},
|
|
21
20
|
)
|
|
22
21
|
|
|
22
|
+
const locale = useLocale()
|
|
23
|
+
|
|
23
24
|
const emit = defineEmits<{ 'update:modelValue': [boolean]; confirm: [] }>()
|
|
24
25
|
</script>
|
|
25
26
|
|
|
@@ -33,10 +34,10 @@ const emit = defineEmits<{ 'update:modelValue': [boolean]; confirm: [] }>()
|
|
|
33
34
|
<p class="text-body-medium text-on-surface-variant">{{ message }}</p>
|
|
34
35
|
<template #actions>
|
|
35
36
|
<MButton variant="text" :disabled="loading" @click="emit('update:modelValue', false)">
|
|
36
|
-
{{ cancelLabel }}
|
|
37
|
+
{{ cancelLabel ?? locale.cancel }}
|
|
37
38
|
</MButton>
|
|
38
39
|
<MButton :color="danger ? 'error' : 'primary'" :loading="loading" @click="emit('confirm')">
|
|
39
|
-
{{ confirmLabel }}
|
|
40
|
+
{{ confirmLabel ?? locale.confirm }}
|
|
40
41
|
</MButton>
|
|
41
42
|
</template>
|
|
42
43
|
</MDialog>
|
|
@@ -5,6 +5,9 @@ import MIcon from './MIcon.vue'
|
|
|
5
5
|
import MIconButton from './MIconButton.vue'
|
|
6
6
|
import MPagination from './MPagination.vue'
|
|
7
7
|
import MChip from './MChip.vue'
|
|
8
|
+
import { useLocale } from '../composables/useLocale'
|
|
9
|
+
|
|
10
|
+
const locale = useLocale()
|
|
8
11
|
|
|
9
12
|
export interface DataTableColumn {
|
|
10
13
|
key: string
|
|
@@ -46,9 +49,15 @@ const props = withDefaults(defineProps<{
|
|
|
46
49
|
serverSide?: boolean
|
|
47
50
|
total?: number
|
|
48
51
|
page?: number
|
|
52
|
+
searchPlaceholder?: string
|
|
53
|
+
selectedText?: string
|
|
54
|
+
recordsText?: string
|
|
55
|
+
expandLabel?: string
|
|
56
|
+
columnsLabel?: string
|
|
57
|
+
exportLabel?: string
|
|
58
|
+
noGroupText?: string
|
|
49
59
|
}>(), {
|
|
50
60
|
loading: false,
|
|
51
|
-
emptyText: 'Sin resultados',
|
|
52
61
|
rowKey: 'id',
|
|
53
62
|
selectable: false,
|
|
54
63
|
modelValue: () => [],
|
|
@@ -137,7 +146,7 @@ const groupedRows = computed(() => {
|
|
|
137
146
|
if (!props.groupBy) return null
|
|
138
147
|
const map = new Map<string, Record<string, any>[]>()
|
|
139
148
|
for (const row of processedRows.value) {
|
|
140
|
-
const key = String(row[props.groupBy] ??
|
|
149
|
+
const key = String(row[props.groupBy] ?? (props.noGroupText ?? locale.noGroup))
|
|
141
150
|
if (!map.has(key)) map.set(key, [])
|
|
142
151
|
map.get(key)!.push(row)
|
|
143
152
|
}
|
|
@@ -269,7 +278,7 @@ function colStyle(col: DataTableColumn) {
|
|
|
269
278
|
>
|
|
270
279
|
<div v-if="searchable" class="flex min-w-48 flex-1 items-center gap-2 rounded-full border border-outline-variant bg-surface-container px-3 py-1.5 transition-[border-color,box-shadow] duration-150 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/30">
|
|
271
280
|
<MIcon name="search" :size="16" class="shrink-0 text-on-surface-variant" />
|
|
272
|
-
<input v-model="search" type="text" placeholder="
|
|
281
|
+
<input v-model="search" type="text" :placeholder="searchPlaceholder ?? locale.search" class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant" />
|
|
273
282
|
<button v-if="search" class="text-on-surface-variant transition-colors hover:text-on-surface" @click="search = ''">
|
|
274
283
|
<MIcon name="close" :size="14" />
|
|
275
284
|
</button>
|
|
@@ -279,13 +288,13 @@ function colStyle(col: DataTableColumn) {
|
|
|
279
288
|
|
|
280
289
|
<Transition enter-active-class="transition-[opacity,transform] duration-150" enter-from-class="opacity-0 scale-90" leave-active-class="transition-[opacity,transform] duration-100" leave-to-class="opacity-0 scale-90">
|
|
281
290
|
<span v-if="selectable && selected.length > 0" class="rounded-full bg-primary/12 px-3 py-1 text-label-small font-medium text-primary">
|
|
282
|
-
{{ selected.length }}
|
|
291
|
+
{{ selected.length }} {{ selectedText ?? locale.selectedCount }}{{ selected.length !== 1 ? 's' : '' }}
|
|
283
292
|
</span>
|
|
284
293
|
</Transition>
|
|
285
294
|
|
|
286
295
|
<!-- Column toggle -->
|
|
287
296
|
<div v-if="columnToggle" class="relative">
|
|
288
|
-
<MIconButton icon="view_column" label="
|
|
297
|
+
<MIconButton icon="view_column" :label="columnsLabel ?? locale.columns" :size="36" @click="showColMenu = !showColMenu" />
|
|
289
298
|
<div v-if="showColMenu" class="absolute right-0 top-full z-10 mt-1 min-w-40 rounded-lg bg-surface-container py-2 shadow-elevation-3">
|
|
290
299
|
<label v-for="col in columns" :key="col.key" class="flex cursor-pointer items-center gap-2 px-3 py-1.5 hover:bg-on-surface/4">
|
|
291
300
|
<MCheckbox
|
|
@@ -297,7 +306,7 @@ function colStyle(col: DataTableColumn) {
|
|
|
297
306
|
</div>
|
|
298
307
|
</div>
|
|
299
308
|
|
|
300
|
-
<MIconButton v-if="exportable" icon="download" label="
|
|
309
|
+
<MIconButton v-if="exportable" icon="download" :label="exportLabel ?? locale.exportCsv" :size="36" @click="exportCSV" />
|
|
301
310
|
</div>
|
|
302
311
|
|
|
303
312
|
<!-- Table -->
|
|
@@ -363,7 +372,7 @@ function colStyle(col: DataTableColumn) {
|
|
|
363
372
|
<td :colspan="visibleColumns.length + extraCols" class="border-t border-outline-variant px-4 py-14 text-center">
|
|
364
373
|
<slot name="empty">
|
|
365
374
|
<MIcon name="search_off" :size="36" class="mb-2 text-on-surface-variant opacity-30" />
|
|
366
|
-
<p class="text-body-medium text-on-surface-variant">{{ emptyText }}</p>
|
|
375
|
+
<p class="text-body-medium text-on-surface-variant">{{ emptyText ?? locale.noResults }}</p>
|
|
367
376
|
</slot>
|
|
368
377
|
</td>
|
|
369
378
|
</tr>
|
|
@@ -385,7 +394,7 @@ function colStyle(col: DataTableColumn) {
|
|
|
385
394
|
<td v-if="hasExpand" class="px-2" :class="dense ? 'py-1' : 'py-2'" @click.stop>
|
|
386
395
|
<MIconButton
|
|
387
396
|
icon="expand_more"
|
|
388
|
-
label="
|
|
397
|
+
:label="expandLabel ?? locale.expand"
|
|
389
398
|
:size="28"
|
|
390
399
|
:class="isExpanded(row) ? 'rotate-180' : ''"
|
|
391
400
|
class="transition-transform duration-200"
|
|
@@ -429,7 +438,7 @@ function colStyle(col: DataTableColumn) {
|
|
|
429
438
|
<!-- Footer -->
|
|
430
439
|
<div class="flex items-center justify-between gap-4 border-t border-outline-variant bg-surface-container-lowest px-4 py-2">
|
|
431
440
|
<span class="text-label-small text-on-surface-variant">
|
|
432
|
-
{{ totalCount }}
|
|
441
|
+
{{ totalCount }} {{ recordsText ?? locale.recordCount }}{{ totalCount !== 1 ? 's' : '' }}
|
|
433
442
|
</span>
|
|
434
443
|
<MPagination :page="currentPage" :per-page="perPage" :total="totalCount" @update:page="currentPage = $event" />
|
|
435
444
|
</div>
|
|
@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
|
3
3
|
import MIcon from './MIcon.vue'
|
|
4
4
|
import MIconButton from './MIconButton.vue'
|
|
5
5
|
import { useFieldBg } from '../composables/useFieldBg'
|
|
6
|
+
import { useLocale } from '../composables/useLocale'
|
|
6
7
|
|
|
7
8
|
const props = withDefaults(defineProps<{
|
|
8
9
|
modelValue: string | null
|
|
@@ -15,7 +16,13 @@ const props = withDefaults(defineProps<{
|
|
|
15
16
|
hint?: string
|
|
16
17
|
locale?: string
|
|
17
18
|
fieldBg?: string
|
|
18
|
-
|
|
19
|
+
prevMonthLabel?: string
|
|
20
|
+
nextMonthLabel?: string
|
|
21
|
+
}>(), {
|
|
22
|
+
locale: 'es-ES',
|
|
23
|
+
})
|
|
24
|
+
|
|
25
|
+
const localeStrings = useLocale()
|
|
19
26
|
|
|
20
27
|
const emit = defineEmits<{ 'update:modelValue': [string | null] }>()
|
|
21
28
|
|
|
@@ -173,7 +180,7 @@ onUnmounted(() => {
|
|
|
173
180
|
>
|
|
174
181
|
<MIcon name="calendar_today" :size="20" class="shrink-0 text-on-surface-variant" />
|
|
175
182
|
<span v-if="displayValue" class="flex-1 text-on-surface">{{ displayValue }}</span>
|
|
176
|
-
<span v-else class="flex-1 text-on-surface-variant">{{ placeholder || label ||
|
|
183
|
+
<span v-else class="flex-1 text-on-surface-variant">{{ placeholder || label || localeStrings.selectDate }}</span>
|
|
177
184
|
<MIcon
|
|
178
185
|
v-if="modelValue"
|
|
179
186
|
name="close"
|
|
@@ -210,9 +217,9 @@ onUnmounted(() => {
|
|
|
210
217
|
>
|
|
211
218
|
<!-- Header -->
|
|
212
219
|
<div class="mb-3 flex items-center justify-between">
|
|
213
|
-
<MIconButton icon="chevron_left" label="
|
|
220
|
+
<MIconButton icon="chevron_left" :label="prevMonthLabel ?? localeStrings.previousMonth" :size="36" @click="prevMonth" />
|
|
214
221
|
<span class="text-title-small font-medium capitalize text-on-surface">{{ monthLabel }}</span>
|
|
215
|
-
<MIconButton icon="chevron_right" label="
|
|
222
|
+
<MIconButton icon="chevron_right" :label="nextMonthLabel ?? localeStrings.nextMonth" :size="36" @click="nextMonth" />
|
|
216
223
|
</div>
|
|
217
224
|
|
|
218
225
|
<!-- Weekday headers -->
|
|
@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
|
3
3
|
import MIcon from './MIcon.vue'
|
|
4
4
|
import MIconButton from './MIconButton.vue'
|
|
5
5
|
import { useFieldBg } from '../composables/useFieldBg'
|
|
6
|
+
import { useLocale } from '../composables/useLocale'
|
|
6
7
|
|
|
7
8
|
export interface DateRange {
|
|
8
9
|
start: string | null
|
|
@@ -12,6 +13,7 @@ export interface DateRange {
|
|
|
12
13
|
const props = withDefaults(defineProps<{
|
|
13
14
|
modelValue: DateRange
|
|
14
15
|
label?: string
|
|
16
|
+
placeholder?: string
|
|
15
17
|
min?: string
|
|
16
18
|
max?: string
|
|
17
19
|
disabled?: boolean
|
|
@@ -19,7 +21,15 @@ const props = withDefaults(defineProps<{
|
|
|
19
21
|
hint?: string
|
|
20
22
|
locale?: string
|
|
21
23
|
fieldBg?: string
|
|
22
|
-
|
|
24
|
+
prevMonthLabel?: string
|
|
25
|
+
nextMonthLabel?: string
|
|
26
|
+
pickStartText?: string
|
|
27
|
+
pickEndText?: string
|
|
28
|
+
}>(), {
|
|
29
|
+
locale: 'es-ES',
|
|
30
|
+
})
|
|
31
|
+
|
|
32
|
+
const localeStrings = useLocale()
|
|
23
33
|
|
|
24
34
|
const emit = defineEmits<{ 'update:modelValue': [DateRange] }>()
|
|
25
35
|
|
|
@@ -184,7 +194,7 @@ onUnmounted(() => {
|
|
|
184
194
|
>
|
|
185
195
|
<MIcon name="date_range" :size="20" class="shrink-0 text-on-surface-variant" />
|
|
186
196
|
<span v-if="displayValue" class="flex-1 text-on-surface">{{ displayValue }}</span>
|
|
187
|
-
<span v-else class="flex-1 text-on-surface-variant">{{ label ||
|
|
197
|
+
<span v-else class="flex-1 text-on-surface-variant">{{ label || placeholder || localeStrings.selectRange }}</span>
|
|
188
198
|
<MIcon
|
|
189
199
|
v-if="modelValue.start || modelValue.end"
|
|
190
200
|
name="close"
|
|
@@ -219,13 +229,13 @@ onUnmounted(() => {
|
|
|
219
229
|
:style="dropPos"
|
|
220
230
|
>
|
|
221
231
|
<p class="mb-2 text-center text-label-medium text-on-surface-variant">
|
|
222
|
-
{{ picking === 'start' ?
|
|
232
|
+
{{ picking === 'start' ? (pickStartText ?? localeStrings.pickStart) : (pickEndText ?? localeStrings.pickEnd) }}
|
|
223
233
|
</p>
|
|
224
234
|
|
|
225
235
|
<div class="mb-3 flex items-center justify-between">
|
|
226
|
-
<MIconButton icon="chevron_left" label="
|
|
236
|
+
<MIconButton icon="chevron_left" :label="prevMonthLabel ?? localeStrings.previousMonth" :size="36" @click="prevMonth" />
|
|
227
237
|
<span class="text-title-small font-medium capitalize text-on-surface">{{ monthLabel }}</span>
|
|
228
|
-
<MIconButton icon="chevron_right" label="
|
|
238
|
+
<MIconButton icon="chevron_right" :label="nextMonthLabel ?? localeStrings.nextMonth" :size="36" @click="nextMonth" />
|
|
229
239
|
</div>
|
|
230
240
|
|
|
231
241
|
<div class="mb-1 grid grid-cols-7 gap-0.5 text-center">
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { watch } from 'vue'
|
|
3
3
|
import MIconButton from './MIconButton.vue'
|
|
4
|
+
import { useLocale } from '../composables/useLocale'
|
|
4
5
|
|
|
5
6
|
const props = withDefaults(
|
|
6
7
|
defineProps<{
|
|
@@ -8,6 +9,7 @@ const props = withDefaults(
|
|
|
8
9
|
title?: string
|
|
9
10
|
maxWidth?: string
|
|
10
11
|
persistent?: boolean
|
|
12
|
+
closeLabel?: string
|
|
11
13
|
}>(),
|
|
12
14
|
{
|
|
13
15
|
maxWidth: 'max-w-md',
|
|
@@ -15,6 +17,8 @@ const props = withDefaults(
|
|
|
15
17
|
},
|
|
16
18
|
)
|
|
17
19
|
|
|
20
|
+
const locale = useLocale()
|
|
21
|
+
|
|
18
22
|
const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
|
|
19
23
|
|
|
20
24
|
function close() {
|
|
@@ -56,7 +60,7 @@ watch(
|
|
|
56
60
|
<h2 class="text-headline-small text-on-surface">
|
|
57
61
|
<slot name="title">{{ title }}</slot>
|
|
58
62
|
</h2>
|
|
59
|
-
<MIconButton v-if="!persistent" icon="close" label="
|
|
63
|
+
<MIconButton v-if="!persistent" icon="close" :label="closeLabel ?? locale.close" @click="close" />
|
|
60
64
|
</div>
|
|
61
65
|
<div class="overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant">
|
|
62
66
|
<slot />
|
|
@@ -3,6 +3,9 @@ import { ref, computed } from 'vue'
|
|
|
3
3
|
import MIcon from './MIcon.vue'
|
|
4
4
|
import MIconButton from './MIconButton.vue'
|
|
5
5
|
import MSpinner from './MSpinner.vue'
|
|
6
|
+
import { useLocale } from '../composables/useLocale'
|
|
7
|
+
|
|
8
|
+
const locale = useLocale()
|
|
6
9
|
|
|
7
10
|
export interface UploadFile {
|
|
8
11
|
file: File
|
|
@@ -18,8 +21,15 @@ const props = withDefaults(
|
|
|
18
21
|
multiple?: boolean
|
|
19
22
|
maxSize?: number
|
|
20
23
|
disabled?: boolean
|
|
24
|
+
dropText?: string
|
|
25
|
+
selectText?: string
|
|
26
|
+
maxSizePrefix?: string
|
|
27
|
+
removeLabel?: string
|
|
21
28
|
}>(),
|
|
22
|
-
{
|
|
29
|
+
{
|
|
30
|
+
multiple: false,
|
|
31
|
+
disabled: false,
|
|
32
|
+
},
|
|
23
33
|
)
|
|
24
34
|
|
|
25
35
|
const emit = defineEmits<{
|
|
@@ -128,14 +138,16 @@ function openPicker() {
|
|
|
128
138
|
class="text-on-surface-variant"
|
|
129
139
|
/>
|
|
130
140
|
<div class="text-center">
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
141
|
+
<slot name="dropzone">
|
|
142
|
+
<p class="text-body-large text-on-surface">
|
|
143
|
+
{{ dropText ?? locale.dropText }} <span class="font-medium text-primary">{{ selectText ?? locale.selectText }}</span>
|
|
144
|
+
</p>
|
|
145
|
+
<p v-if="accept || maxSize" class="mt-1 text-body-small text-on-surface-variant">
|
|
146
|
+
<span v-if="accept">{{ accept }}</span>
|
|
147
|
+
<span v-if="accept && maxSize"> · </span>
|
|
148
|
+
<span v-if="maxSize">{{ maxSizePrefix ?? locale.maxSizePrefix }} {{ formatSize(maxSize) }}</span>
|
|
149
|
+
</p>
|
|
150
|
+
</slot>
|
|
139
151
|
</div>
|
|
140
152
|
</div>
|
|
141
153
|
|
|
@@ -187,7 +199,7 @@ function openPicker() {
|
|
|
187
199
|
<MIcon v-else-if="entry.status === 'done'" name="check_circle" :size="20" class="text-success" />
|
|
188
200
|
<MIcon v-else-if="entry.status === 'error'" name="error" :size="20" class="text-error" />
|
|
189
201
|
|
|
190
|
-
<MIconButton icon="close" label="
|
|
202
|
+
<MIconButton icon="close" :label="removeLabel ?? locale.remove" :size="32" @click="removeFile(entry)" />
|
|
191
203
|
</div>
|
|
192
204
|
</TransitionGroup>
|
|
193
205
|
</div>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
|
|
3
3
|
import MSpinner from './MSpinner.vue'
|
|
4
|
+
import { useLocale } from '../composables/useLocale'
|
|
5
|
+
|
|
6
|
+
const locale = useLocale()
|
|
4
7
|
|
|
5
8
|
const props = withDefaults(
|
|
6
9
|
defineProps<{
|
|
@@ -15,8 +18,6 @@ const props = withDefaults(
|
|
|
15
18
|
loading: false,
|
|
16
19
|
disabled: false,
|
|
17
20
|
threshold: 100,
|
|
18
|
-
loadingText: 'Cargando...',
|
|
19
|
-
endText: 'No hay más elementos',
|
|
20
21
|
ended: false,
|
|
21
22
|
},
|
|
22
23
|
)
|
|
@@ -55,13 +56,17 @@ onBeforeUnmount(() => observer?.disconnect())
|
|
|
55
56
|
<slot />
|
|
56
57
|
|
|
57
58
|
<div ref="sentinelRef" class="flex items-center justify-center py-4">
|
|
58
|
-
<
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
59
|
+
<slot v-if="loading" name="loading">
|
|
60
|
+
<div class="flex items-center gap-3">
|
|
61
|
+
<MSpinner :size="20" class="text-primary" />
|
|
62
|
+
<span class="text-body-medium text-on-surface-variant">{{ loadingText ?? locale.loadingMore }}</span>
|
|
63
|
+
</div>
|
|
64
|
+
</slot>
|
|
65
|
+
<slot v-else-if="ended" name="end">
|
|
66
|
+
<p class="text-body-small text-on-surface-variant">
|
|
67
|
+
{{ endText ?? locale.noMoreItems }}
|
|
68
|
+
</p>
|
|
69
|
+
</slot>
|
|
65
70
|
<slot v-else name="idle" />
|
|
66
71
|
</div>
|
|
67
72
|
</div>
|