@m3ui-vue/m3ui-vue 0.1.3 → 0.1.4
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/m3ui-vue.css +1 -1
- package/dist/m3ui.js +69 -67
- package/dist/m3ui.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/components/MTour.vue +57 -56
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)}.bs-scrim[data-v-941a89e7]{transition:opacity .3s}.bs-enter-from .bs-scrim[data-v-941a89e7],.bs-leave-to .bs-scrim[data-v-941a89e7]{opacity:0}.bs-panel[data-v-941a89e7]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.bs-enter-from .bs-panel[data-v-941a89e7]{opacity:0;transform:translateY(40%)}.bs-leave-to .bs-panel[data-v-941a89e7]{opacity:0;transform:translateY(100%)!important}@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}}.hue-slider[data-v-9ee0043f]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-9ee0043f]::-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-9ee0043f]::-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)}.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)}.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)}.nd-scrim[data-v-98c11a62]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-98c11a62],.nd-leave-to .nd-scrim[data-v-98c11a62]{opacity:0}.nd-panel[data-v-98c11a62]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-98c11a62],.nd-leave-to .nd-panel[data-v-98c11a62]{transform:translate(-100%)}@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-f8751672]{transition:opacity .28s}.ss-enter-from .ss-scrim[data-v-f8751672],.ss-leave-to .ss-scrim[data-v-f8751672]{opacity:0}.ss-panel[data-v-f8751672]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.ss-enter-from .ss-panel[data-v-f8751672]{opacity:0;transform:translate(40%)}.ss-leave-to .ss-panel[data-v-f8751672]{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-e83a5c10]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-e83a5c10]{min-height:0}.m3-toast-bot-enter-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-e83a5c10]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-e83a5c10]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-e83a5c10]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-e83a5c10]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-e83a5c10{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), 0 0 0 9999px #0006;border-radius:8px;position:relative;z-index:101!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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] p{margin:.5em 0}.m3-markdown[data-v-6e4dc2b6] a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.m3-markdown[data-v-6e4dc2b6] a:hover{opacity:.8}.m3-markdown[data-v-6e4dc2b6] strong{color:var(--color-on-surface);font-weight:600}.m3-markdown[data-v-6e4dc2b6] em{font-style:italic}.m3-markdown[data-v-6e4dc2b6] ul,.m3-markdown[data-v-6e4dc2b6] ol{margin:.5em 0;padding-left:1.5em}.m3-markdown[data-v-6e4dc2b6] li{margin:.25em 0}.m3-markdown[data-v-6e4dc2b6] li::marker{color:var(--color-on-surface-variant)}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] code{background:var(--color-surface-container-highest);color:var(--color-primary);border-radius:4px;padding:.15em .4em;font-family:JetBrains Mono,Fira Code,monospace;font-size:.875em}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] pre code{color:var(--color-on-surface);background:0 0;padding:0}.m3-markdown[data-v-6e4dc2b6] hr{border:none;border-top:1px solid var(--color-outline-variant);margin:1.5em 0}.m3-markdown[data-v-6e4dc2b6] table{border-collapse:collapse;width:100%;margin:.75em 0}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] td{border-bottom:1px solid var(--color-outline-variant);padding:.5em .75em}.m3-markdown[data-v-6e4dc2b6] img{border-radius:12px;max-width:100%;height:auto;margin:.5em 0}.rte-content[data-v-89c08c83] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-89c08c83] .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-89c08c83] 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-89c08c83] 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-89c08c83] 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-89c08c83] p{margin:.5em 0}.rte-content[data-v-89c08c83] ul,.rte-content[data-v-89c08c83] ol{margin:.5em 0;padding-left:1.5em}.rte-content[data-v-89c08c83] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-89c08c83] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-89c08c83] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-89c08c83] pre code{background:0 0;padding:0}.rte-content[data-v-89c08c83] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-89c08c83] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-89c08c83] 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)}.bs-scrim[data-v-941a89e7]{transition:opacity .3s}.bs-enter-from .bs-scrim[data-v-941a89e7],.bs-leave-to .bs-scrim[data-v-941a89e7]{opacity:0}.bs-panel[data-v-941a89e7]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.bs-enter-from .bs-panel[data-v-941a89e7]{opacity:0;transform:translateY(40%)}.bs-leave-to .bs-panel[data-v-941a89e7]{opacity:0;transform:translateY(100%)!important}@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}}.hue-slider[data-v-9ee0043f]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-9ee0043f]::-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-9ee0043f]::-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)}.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)}.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)}.nd-scrim[data-v-98c11a62]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-98c11a62],.nd-leave-to .nd-scrim[data-v-98c11a62]{opacity:0}.nd-panel[data-v-98c11a62]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-98c11a62],.nd-leave-to .nd-panel[data-v-98c11a62]{transform:translate(-100%)}@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-f8751672]{transition:opacity .28s}.ss-enter-from .ss-scrim[data-v-f8751672],.ss-leave-to .ss-scrim[data-v-f8751672]{opacity:0}.ss-panel[data-v-f8751672]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.ss-enter-from .ss-panel[data-v-f8751672]{opacity:0;transform:translate(40%)}.ss-leave-to .ss-panel[data-v-f8751672]{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-e83a5c10]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-e83a5c10]{min-height:0}.m3-toast-bot-enter-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-e83a5c10]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-e83a5c10]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-e83a5c10]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-e83a5c10]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-e83a5c10{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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] p{margin:.5em 0}.m3-markdown[data-v-6e4dc2b6] a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.m3-markdown[data-v-6e4dc2b6] a:hover{opacity:.8}.m3-markdown[data-v-6e4dc2b6] strong{color:var(--color-on-surface);font-weight:600}.m3-markdown[data-v-6e4dc2b6] em{font-style:italic}.m3-markdown[data-v-6e4dc2b6] ul,.m3-markdown[data-v-6e4dc2b6] ol{margin:.5em 0;padding-left:1.5em}.m3-markdown[data-v-6e4dc2b6] li{margin:.25em 0}.m3-markdown[data-v-6e4dc2b6] li::marker{color:var(--color-on-surface-variant)}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] code{background:var(--color-surface-container-highest);color:var(--color-primary);border-radius:4px;padding:.15em .4em;font-family:JetBrains Mono,Fira Code,monospace;font-size:.875em}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] pre code{color:var(--color-on-surface);background:0 0;padding:0}.m3-markdown[data-v-6e4dc2b6] hr{border:none;border-top:1px solid var(--color-outline-variant);margin:1.5em 0}.m3-markdown[data-v-6e4dc2b6] table{border-collapse:collapse;width:100%;margin:.75em 0}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] td{border-bottom:1px solid var(--color-outline-variant);padding:.5em .75em}.m3-markdown[data-v-6e4dc2b6] img{border-radius:12px;max-width:100%;height:auto;margin:.5em 0}.rte-content[data-v-89c08c83] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-89c08c83] .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-89c08c83] 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-89c08c83] 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-89c08c83] 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-89c08c83] p{margin:.5em 0}.rte-content[data-v-89c08c83] ul,.rte-content[data-v-89c08c83] ol{margin:.5em 0;padding-left:1.5em}.rte-content[data-v-89c08c83] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-89c08c83] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-89c08c83] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-89c08c83] pre code{background:0 0;padding:0}.rte-content[data-v-89c08c83] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-89c08c83] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-89c08c83] img{border-radius:8px;max-width:100%;height:auto;margin:.5em 0}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
package/src/components/MTour.vue
CHANGED
|
@@ -45,7 +45,7 @@ function positionTooltip() {
|
|
|
45
45
|
|
|
46
46
|
el.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
47
47
|
|
|
48
|
-
const s: Record<string, string> = {
|
|
48
|
+
const s: Record<string, string> = {}
|
|
49
49
|
const a: Record<string, string> = { position: 'absolute' }
|
|
50
50
|
|
|
51
51
|
switch (p) {
|
|
@@ -147,60 +147,61 @@ onBeforeUnmount(clearHighlight)
|
|
|
147
147
|
|
|
148
148
|
<template>
|
|
149
149
|
<Teleport to="body">
|
|
150
|
+
<!-- Overlay -->
|
|
150
151
|
<Transition name="m3-tour">
|
|
151
|
-
<div v-if="modelValue && step" class="fixed inset-0 z-[
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
</
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
</
|
|
152
|
+
<div v-if="modelValue && step" class="fixed inset-0 z-[200] bg-black/40" @click="close" />
|
|
153
|
+
</Transition>
|
|
154
|
+
|
|
155
|
+
<!-- Tooltip -->
|
|
156
|
+
<Transition name="m3-tour">
|
|
157
|
+
<div
|
|
158
|
+
v-if="modelValue && step"
|
|
159
|
+
class="fixed z-[202] w-80 rounded-xl bg-surface-container-high p-5 shadow-elevation-3"
|
|
160
|
+
:style="tooltipStyle"
|
|
161
|
+
>
|
|
162
|
+
<!-- Arrow -->
|
|
163
|
+
<div class="h-0 w-0" :style="arrowStyle" />
|
|
164
|
+
|
|
165
|
+
<!-- Step indicator -->
|
|
166
|
+
<div class="mb-2 flex items-center justify-between">
|
|
167
|
+
<span class="text-label-small text-on-surface-variant">
|
|
168
|
+
{{ currentStep + 1 }} / {{ steps.length }}
|
|
169
|
+
</span>
|
|
170
|
+
<button
|
|
171
|
+
type="button"
|
|
172
|
+
class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8"
|
|
173
|
+
@click="close"
|
|
174
|
+
>
|
|
175
|
+
<MIcon name="close" :size="16" />
|
|
176
|
+
</button>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<h3 class="mb-1 text-title-medium font-medium text-on-surface">{{ step.title }}</h3>
|
|
180
|
+
<p class="mb-4 text-body-medium text-on-surface-variant">{{ step.content }}</p>
|
|
181
|
+
|
|
182
|
+
<!-- Progress dots -->
|
|
183
|
+
<div class="mb-4 flex justify-center gap-1.5">
|
|
184
|
+
<div
|
|
185
|
+
v-for="(_, i) in steps"
|
|
186
|
+
:key="i"
|
|
187
|
+
class="h-1.5 rounded-full transition-all duration-200"
|
|
188
|
+
:class="i === currentStep ? 'w-6 bg-primary' : 'w-1.5 bg-outline-variant'"
|
|
189
|
+
/>
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<!-- Actions -->
|
|
193
|
+
<div class="flex justify-between">
|
|
194
|
+
<MButton
|
|
195
|
+
v-if="!isFirst"
|
|
196
|
+
variant="text"
|
|
197
|
+
@click="goPrev"
|
|
198
|
+
>
|
|
199
|
+
Anterior
|
|
200
|
+
</MButton>
|
|
201
|
+
<span v-else />
|
|
202
|
+
<MButton @click="goNext">
|
|
203
|
+
{{ isLast ? 'Finalizar' : 'Siguiente' }}
|
|
204
|
+
</MButton>
|
|
204
205
|
</div>
|
|
205
206
|
</div>
|
|
206
207
|
</Transition>
|
|
@@ -210,8 +211,8 @@ onBeforeUnmount(clearHighlight)
|
|
|
210
211
|
<style>
|
|
211
212
|
.m3-tour-highlight {
|
|
212
213
|
position: relative;
|
|
213
|
-
z-index:
|
|
214
|
-
box-shadow: 0 0 0 4px var(--color-primary)
|
|
214
|
+
z-index: 201 !important;
|
|
215
|
+
box-shadow: 0 0 0 4px var(--color-primary);
|
|
215
216
|
border-radius: 8px;
|
|
216
217
|
}
|
|
217
218
|
|