@eos-ui/vue 0.5.1 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Avatar/EAvatar.js.map +1 -1
- package/dist/components/Avatar/EAvatar.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Button/EButton.js.map +1 -1
- package/dist/components/Button/EButton.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Combobox/EComboboxBase.js.map +1 -1
- package/dist/components/Combobox/EComboboxBase.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/DataGrid/EDataGrid.js.map +1 -1
- package/dist/components/DataGrid/EDataGrid.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/NavList/ENavList.js.map +1 -1
- package/dist/components/NavList/ENavList.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Notice/ENotice.js.map +1 -1
- package/dist/components/Notice/ENotice.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Progress/EProgress.js.map +1 -1
- package/dist/components/Progress/EProgress.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/SearchBar/ESearchBar.js.map +1 -1
- package/dist/components/SearchBar/ESearchBar.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Segmented/ESegmented.js.map +1 -1
- package/dist/components/Segmented/ESegmented.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Select/ESelectControl.js.map +1 -1
- package/dist/components/Select/ESelectControl.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/SignaturePad/ESignaturePad.js.map +1 -1
- package/dist/components/SignaturePad/ESignaturePad.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Stepper/EStepper.js.map +1 -1
- package/dist/components/Stepper/EStepper.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Switch/ESwitch.js.map +1 -1
- package/dist/components/Switch/ESwitch.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Tabs/ETabs.js.map +1 -1
- package/dist/components/Tabs/ETabs.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Textarea/ETextarea.js.map +1 -1
- package/dist/components/Textarea/ETextarea.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/style.css +147 -124
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ENavList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","LinkNav","_normalizeClass","_withCtx","EIcon","_createCommentVNode","_createElementVNode","_toDisplayString","_createElementBlock","EIcon_default","LinkNav_default","_hoisted_1","_hoisted_2","ENavList_vue_vue_type_script_setup_true_lang_default","props","__props","groups","computed","openBlock","createBlock","normalizeClass","withCtx","item","createCommentVNode","createElementVNode","toDisplayString","createElementBlock"],"sources":["../../../src/components/NavList/ENavList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport LinkNav, { type LinkItem, type LinkSection } from \"./LinkNav.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nexport interface NavItem extends LinkItem {\n /** An icon before the label. */\n icon?: IconProp;\n /** A count of things waiting on the person (bills to pay, forms to sign). */\n count?: number;\n}\n\nexport type NavSection = LinkSection<NavItem>;\n\nconst props = withDefaults(\n defineProps<{\n /** The destinations, in order: `{ label, href?, to?, icon?, count?, current? }`. With no `href` or `to` a link goes to `#`. Set `current` yourself. */\n items?: NavItem[];\n /** Destinations in labelled groups, instead of `items`: `{ label?, items }`. Give a label only when there is more than one section. */\n sections?: NavSection[];\n /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header, with a hairline between each. Items look the same as in the vertical list: a tint on hover, and a primary outline with a heavier bottom edge on the current page. */\n orientation?: \"vertical\" | \"horizontal\";\n /** The landmark's name; give each navigation on a page its own. @default \"Main\" */\n label?: string;\n /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). Give items `to`; it receives `to` or `href`, the class `e-nav-item` and `aria-current`. */\n linkComponent?: string | Component;\n }>(),\n { orientation: \"vertical\", linkComponent: \"a\" },\n);\n\nconst groups = computed<NavSection[]>(() => props.sections ?? [{ items: props.items ?? [] }]);\n</script>\n\n<template>\n <LinkNav\n class=\"e-nav\"\n :class=\"orientation === 'horizontal' && 'e-nav--horizontal'\"\n :groups=\"groups\"\n :label=\"label\"\n :link-component=\"linkComponent\"\n item-class=\"e-nav-item\"\n heading-class=\"e-nav-heading\"\n >\n <template #item=\"{ item }\">\n <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n <span class=\"e-nav-label\">{{ item.label }}</span>\n <span v-if=\"item.count != null\" class=\"e-nav-count\">{{ item.count }}</span>\n </template>\n </LinkNav>\n</template>\n\n<style>\n@layer e.page {\n .e-nav ul {\n display: grid;\n gap: calc(var(--e-space-1) / 2);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .e-nav:not(.e-nav--horizontal) ul {\n gap: 0;\n }\n\n .e-nav:not(.e-nav--horizontal) li + li::before {\n content: \"\";\n display: block;\n height: var(--e-stroke-hair);\n margin-block: var(--e-space-2);\n background: color-mix(in srgb, var(--e-border) 60%, transparent);\n }\n\n .e-nav-item {\n display: flex;\n align-items: center;\n gap: var(--e-space-3);\n height: var(--e-control-height);\n box-sizing: border-box;\n padding: 0 var(--e-space-3) var(--e-
|
|
1
|
+
{"version":3,"file":"ENavList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","LinkNav","_normalizeClass","_withCtx","EIcon","_createCommentVNode","_createElementVNode","_toDisplayString","_createElementBlock","EIcon_default","LinkNav_default","_hoisted_1","_hoisted_2","ENavList_vue_vue_type_script_setup_true_lang_default","props","__props","groups","computed","openBlock","createBlock","normalizeClass","withCtx","item","createCommentVNode","createElementVNode","toDisplayString","createElementBlock"],"sources":["../../../src/components/NavList/ENavList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport LinkNav, { type LinkItem, type LinkSection } from \"./LinkNav.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nexport interface NavItem extends LinkItem {\n /** An icon before the label. */\n icon?: IconProp;\n /** A count of things waiting on the person (bills to pay, forms to sign). */\n count?: number;\n}\n\nexport type NavSection = LinkSection<NavItem>;\n\nconst props = withDefaults(\n defineProps<{\n /** The destinations, in order: `{ label, href?, to?, icon?, count?, current? }`. With no `href` or `to` a link goes to `#`. Set `current` yourself. */\n items?: NavItem[];\n /** Destinations in labelled groups, instead of `items`: `{ label?, items }`. Give a label only when there is more than one section. */\n sections?: NavSection[];\n /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header, with a hairline between each. Items look the same as in the vertical list: a tint on hover, and a primary outline with a heavier bottom edge on the current page. */\n orientation?: \"vertical\" | \"horizontal\";\n /** The landmark's name; give each navigation on a page its own. @default \"Main\" */\n label?: string;\n /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). Give items `to`; it receives `to` or `href`, the class `e-nav-item` and `aria-current`. */\n linkComponent?: string | Component;\n }>(),\n { orientation: \"vertical\", linkComponent: \"a\" },\n);\n\nconst groups = computed<NavSection[]>(() => props.sections ?? [{ items: props.items ?? [] }]);\n</script>\n\n<template>\n <LinkNav\n class=\"e-nav\"\n :class=\"orientation === 'horizontal' && 'e-nav--horizontal'\"\n :groups=\"groups\"\n :label=\"label\"\n :link-component=\"linkComponent\"\n item-class=\"e-nav-item\"\n heading-class=\"e-nav-heading\"\n >\n <template #item=\"{ item }\">\n <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n <span class=\"e-nav-label\">{{ item.label }}</span>\n <span v-if=\"item.count != null\" class=\"e-nav-count\">{{ item.count }}</span>\n </template>\n </LinkNav>\n</template>\n\n<style>\n@layer e.page {\n .e-nav ul {\n display: grid;\n gap: calc(var(--e-space-1) / 2);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .e-nav:not(.e-nav--horizontal) ul {\n gap: 0;\n }\n\n .e-nav:not(.e-nav--horizontal) li + li::before {\n content: \"\";\n display: block;\n height: var(--e-stroke-hair);\n margin-block: var(--e-space-2);\n background: color-mix(in srgb, var(--e-border) 60%, transparent);\n }\n\n .e-nav-item {\n display: flex;\n align-items: center;\n gap: var(--e-space-3);\n height: var(--e-control-height);\n box-sizing: border-box;\n padding: 0 calc(var(--e-space-3) - var(--e-stroke-edge));\n\n --e-lift: 0px;\n\n /* The current page is outlined with a border and its fill stops inside it, so the corner carries the edge colour alone; the other items have no edge and fill to the box. */\n border: var(--e-stroke-edge) solid transparent;\n border-bottom-width: calc(var(--e-stroke-edge) + var(--e-lift));\n border-radius: var(--e-radius-md);\n color: var(--e-ink);\n font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n text-decoration: none;\n transition:\n background-color var(--e-duration-tap) var(--e-easing-out),\n border-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-nav-item:hover {\n background-color: var(--e-surface-hover);\n }\n\n .e-nav-item:focus-visible {\n outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n outline-offset: var(--e-focus-gap);\n }\n\n .e-nav-item[aria-current=\"page\"] {\n background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n font-weight: 600;\n\n --e-lift: var(--e-depth);\n --e-slab: var(--e-primary);\n\n border-color: var(--e-primary);\n border-bottom-color: var(--e-slab);\n background-clip: padding-box;\n }\n\n .e-nav-item[aria-current=\"page\"]:hover {\n --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n }\n\n .e-nav-label {\n flex: 1;\n min-width: 0;\n }\n\n .e-nav--horizontal {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--e-space-2) var(--e-space-4);\n }\n\n /* The separator sits inside the next item's li, so the list has no gap of its own: the margins on the separator space both sides equally. */\n .e-nav--horizontal ul {\n display: flex;\n flex-wrap: wrap;\n gap: 0;\n }\n\n .e-nav--horizontal li {\n display: flex;\n align-items: center;\n }\n\n .e-nav--horizontal li + li::before {\n content: \"\";\n width: var(--e-stroke-hair);\n height: 1.75rem;\n margin-inline: var(--e-space-2);\n background: color-mix(in srgb, var(--e-border) 60%, transparent);\n }\n\n .e-nav--horizontal .e-nav-heading {\n margin: 0;\n padding-inline: 0;\n }\n\n .e-nav-count {\n min-width: var(--e-space-6);\n padding: 0 var(--e-space-2);\n border-radius: var(--e-radius-pill);\n background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n text-align: center;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .e-nav-item {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .e-nav-item[aria-current=\"page\"] {\n border-color: Highlight;\n }\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,IAAMe,IAAQC,GAgBRC,IAASC,QAA6BH,EAAM,YAAY,CAAC,EAAE,OAAOA,EAAM,SAAS,CAAC,EAAE,CAAC,CAAC;E,kBAI1Ff,EAAA,GAAAC,EAcUC,GAAA;GAbR,OAAKC,EAAA,CAAC,SACEa,EAAA,gBAAW,gBAAA,mBAAA,CAAA;GAClB,QAAQC,EAAA;GACR,OAAOD,EAAA;GACP,kBAAgBA,EAAA;GACjB,cAAW;GACX,iBAAc;;GAEH,MAAIZ,GAC+B,EAD3B,cAAI;IACRmB,EAAK,QAAlBvB,EAAA,GAAAC,EAA4CI,GAAA;;KAAnB,MAAMkB,EAAK;;IACpChB,EAAiD,QAAjDK,GAAiDJ,EAApBe,EAAK,KAAK,GAAA,CAAA;IAC3BA,EAAK,SAAK,O,aAAtBvB,EAAA,GAAAS,EAA2E,QAA3EI,GAA2EL,EAApBe,EAAK,KAAK,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ENotice.js","names":["_sfc_main","ENotice_vue_vue_type_script_setup_true_lang_default","ENotice_default"],"sources":["../../../src/components/Notice/ENotice.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type NoticeTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"./notice.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */\n tone?: NoticeTone;\n /** What happened, in one short line. */\n title: string;\n /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading; without it the title is a paragraph. */\n headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n /** The id of the title element, for a parent that labels itself by it. */\n titleId?: string;\n /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */\n role?: string | false;\n /** Replaces the icon of the tone. */\n icon?: IconProp;\n /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */\n closable?: boolean;\n }>(),\n { tone: \"info\", role: undefined, closable: undefined },\n);\n\nconst emit = defineEmits<{\n /** The close button was pressed. The button only shows when a listener is attached. */\n close: [];\n}>();\n\ndefineSlots<{\n /** One sentence of detail under the title. */\n default?(): unknown;\n /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */\n actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON: Record<NoticeTone, string> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\nconst role = computed(() =>\n props.role === false ? undefined : props.role || (props.tone === \"danger\" ? \"alert\" : \"status\"),\n);\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n <div\n class=\"e-notice\"\n :class=\"[tone !== 'info' && `e-notice--${tone}`, $slots.actions && 'e-notice--actions']\"\n :role=\"role\"\n >\n <div class=\"e-notice-grid\">\n <span class=\"e-notice-icon\"><EIcon :name=\"icon ?? TONE_ICON[tone]\" /></span>\n <div class=\"e-notice-body\">\n <component :is=\"headingLevel ? `h${headingLevel}` : 'p'\" :id=\"titleId\" class=\"e-notice-title\">\n {{ title }}\n </component>\n <div v-if=\"$slots.default\" class=\"e-notice-text\"><slot /></div>\n </div>\n <EActions v-if=\"$slots.actions\" class=\"e-notice-actions\"><slot name=\"actions\" /></EActions>\n <span v-if=\"hasClose()\" class=\"e-notice-close\">\n <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n </span>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.containers {\n .e-notice {\n --e-tone: var(--e-primary);\n --e-bg: var(--e-surface-tint);\n\n container-type: inline-size;\n padding: var(--e-space-3) var(--e-space-4);\n padding-left: calc(var(--e-space-4) + 2 * var(--e-depth));\n border:
|
|
1
|
+
{"version":3,"file":"ENotice.js","names":["_sfc_main","ENotice_vue_vue_type_script_setup_true_lang_default","ENotice_default"],"sources":["../../../src/components/Notice/ENotice.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type NoticeTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"./notice.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */\n tone?: NoticeTone;\n /** What happened, in one short line. */\n title: string;\n /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading; without it the title is a paragraph. */\n headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n /** The id of the title element, for a parent that labels itself by it. */\n titleId?: string;\n /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */\n role?: string | false;\n /** Replaces the icon of the tone. */\n icon?: IconProp;\n /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */\n closable?: boolean;\n }>(),\n { tone: \"info\", role: undefined, closable: undefined },\n);\n\nconst emit = defineEmits<{\n /** The close button was pressed. The button only shows when a listener is attached. */\n close: [];\n}>();\n\ndefineSlots<{\n /** One sentence of detail under the title. */\n default?(): unknown;\n /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */\n actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON: Record<NoticeTone, string> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\nconst role = computed(() =>\n props.role === false ? undefined : props.role || (props.tone === \"danger\" ? \"alert\" : \"status\"),\n);\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n <div\n class=\"e-notice\"\n :class=\"[tone !== 'info' && `e-notice--${tone}`, $slots.actions && 'e-notice--actions']\"\n :role=\"role\"\n >\n <div class=\"e-notice-grid\">\n <span class=\"e-notice-icon\"><EIcon :name=\"icon ?? TONE_ICON[tone]\" /></span>\n <div class=\"e-notice-body\">\n <component :is=\"headingLevel ? `h${headingLevel}` : 'p'\" :id=\"titleId\" class=\"e-notice-title\">\n {{ title }}\n </component>\n <div v-if=\"$slots.default\" class=\"e-notice-text\"><slot /></div>\n </div>\n <EActions v-if=\"$slots.actions\" class=\"e-notice-actions\"><slot name=\"actions\" /></EActions>\n <span v-if=\"hasClose()\" class=\"e-notice-close\">\n <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n </span>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.containers {\n .e-notice {\n --e-tone: var(--e-primary);\n --e-bg: var(--e-surface-tint);\n\n container-type: inline-size;\n padding: calc(var(--e-space-3) - var(--e-stroke-edge)) calc(var(--e-space-4) - var(--e-stroke-edge));\n padding-left: calc(var(--e-space-4) - var(--e-stroke-edge) + 2 * var(--e-depth));\n border: var(--e-stroke-edge) solid var(--e-tone);\n border-radius: var(--e-radius-md);\n background-color: var(--e-bg);\n background-image: linear-gradient(to right, var(--e-tone) calc(2 * var(--e-depth)), transparent calc(2 * var(--e-depth)));\n background-repeat: no-repeat;\n background-clip: padding-box;\n color: var(--e-ink);\n }\n\n .e-notice--success {\n --e-tone: var(--e-secondary);\n --e-bg: var(--e-secondary-soft);\n }\n\n .e-notice--warning {\n --e-tone: var(--e-warning-strong);\n --e-bg: var(--e-warning-soft);\n }\n\n .e-notice--danger {\n --e-tone: var(--e-danger);\n --e-bg: var(--e-danger-soft);\n }\n\n .e-notice-title {\n margin: 0;\n font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n }\n\n .e-notice-text {\n margin: 0;\n font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n color: var(--e-ink);\n }\n\n @media (forced-colors: active) {\n .e-notice {\n border: var(--e-stroke-edge) solid CanvasText;\n }\n }\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ENotice.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","EIcon","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_renderSlot","_createCommentVNode","EActions","EIconButton","_unref","EActions_default","EIcon_default","EIconButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ENotice_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useMessages","instance","getCurrentInstance","TONE_ICON","role","computed","hasClose","openBlock","createElementBlock","normalizeClass","_ctx","createElementVNode","createVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","renderSlot","createCommentVNode","unref","_cache"],"sources":["../../../src/components/Notice/ENotice.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type NoticeTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"./notice.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */\n tone?: NoticeTone;\n /** What happened, in one short line. */\n title: string;\n /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading; without it the title is a paragraph. */\n headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n /** The id of the title element, for a parent that labels itself by it. */\n titleId?: string;\n /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */\n role?: string | false;\n /** Replaces the icon of the tone. */\n icon?: IconProp;\n /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */\n closable?: boolean;\n }>(),\n { tone: \"info\", role: undefined, closable: undefined },\n);\n\nconst emit = defineEmits<{\n /** The close button was pressed. The button only shows when a listener is attached. */\n close: [];\n}>();\n\ndefineSlots<{\n /** One sentence of detail under the title. */\n default?(): unknown;\n /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */\n actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON: Record<NoticeTone, string> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\nconst role = computed(() =>\n props.role === false ? undefined : props.role || (props.tone === \"danger\" ? \"alert\" : \"status\"),\n);\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n <div\n class=\"e-notice\"\n :class=\"[tone !== 'info' && `e-notice--${tone}`, $slots.actions && 'e-notice--actions']\"\n :role=\"role\"\n >\n <div class=\"e-notice-grid\">\n <span class=\"e-notice-icon\"><EIcon :name=\"icon ?? TONE_ICON[tone]\" /></span>\n <div class=\"e-notice-body\">\n <component :is=\"headingLevel ? `h${headingLevel}` : 'p'\" :id=\"titleId\" class=\"e-notice-title\">\n {{ title }}\n </component>\n <div v-if=\"$slots.default\" class=\"e-notice-text\"><slot /></div>\n </div>\n <EActions v-if=\"$slots.actions\" class=\"e-notice-actions\"><slot name=\"actions\" /></EActions>\n <span v-if=\"hasClose()\" class=\"e-notice-close\">\n <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n </span>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.containers {\n .e-notice {\n --e-tone: var(--e-primary);\n --e-bg: var(--e-surface-tint);\n\n container-type: inline-size;\n padding: var(--e-space-3) var(--e-space-4);\n padding-left: calc(var(--e-space-4) + 2 * var(--e-depth));\n border:
|
|
1
|
+
{"version":3,"file":"ENotice.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","EIcon","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_renderSlot","_createCommentVNode","EActions","EIconButton","_unref","EActions_default","EIcon_default","EIconButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ENotice_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useMessages","instance","getCurrentInstance","TONE_ICON","role","computed","hasClose","openBlock","createElementBlock","normalizeClass","_ctx","createElementVNode","createVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","renderSlot","createCommentVNode","unref","_cache"],"sources":["../../../src/components/Notice/ENotice.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type NoticeTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"./notice.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */\n tone?: NoticeTone;\n /** What happened, in one short line. */\n title: string;\n /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading; without it the title is a paragraph. */\n headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n /** The id of the title element, for a parent that labels itself by it. */\n titleId?: string;\n /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */\n role?: string | false;\n /** Replaces the icon of the tone. */\n icon?: IconProp;\n /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */\n closable?: boolean;\n }>(),\n { tone: \"info\", role: undefined, closable: undefined },\n);\n\nconst emit = defineEmits<{\n /** The close button was pressed. The button only shows when a listener is attached. */\n close: [];\n}>();\n\ndefineSlots<{\n /** One sentence of detail under the title. */\n default?(): unknown;\n /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */\n actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON: Record<NoticeTone, string> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\nconst role = computed(() =>\n props.role === false ? undefined : props.role || (props.tone === \"danger\" ? \"alert\" : \"status\"),\n);\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n <div\n class=\"e-notice\"\n :class=\"[tone !== 'info' && `e-notice--${tone}`, $slots.actions && 'e-notice--actions']\"\n :role=\"role\"\n >\n <div class=\"e-notice-grid\">\n <span class=\"e-notice-icon\"><EIcon :name=\"icon ?? TONE_ICON[tone]\" /></span>\n <div class=\"e-notice-body\">\n <component :is=\"headingLevel ? `h${headingLevel}` : 'p'\" :id=\"titleId\" class=\"e-notice-title\">\n {{ title }}\n </component>\n <div v-if=\"$slots.default\" class=\"e-notice-text\"><slot /></div>\n </div>\n <EActions v-if=\"$slots.actions\" class=\"e-notice-actions\"><slot name=\"actions\" /></EActions>\n <span v-if=\"hasClose()\" class=\"e-notice-close\">\n <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n </span>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.containers {\n .e-notice {\n --e-tone: var(--e-primary);\n --e-bg: var(--e-surface-tint);\n\n container-type: inline-size;\n padding: calc(var(--e-space-3) - var(--e-stroke-edge)) calc(var(--e-space-4) - var(--e-stroke-edge));\n padding-left: calc(var(--e-space-4) - var(--e-stroke-edge) + 2 * var(--e-depth));\n border: var(--e-stroke-edge) solid var(--e-tone);\n border-radius: var(--e-radius-md);\n background-color: var(--e-bg);\n background-image: linear-gradient(to right, var(--e-tone) calc(2 * var(--e-depth)), transparent calc(2 * var(--e-depth)));\n background-repeat: no-repeat;\n background-clip: padding-box;\n color: var(--e-ink);\n }\n\n .e-notice--success {\n --e-tone: var(--e-secondary);\n --e-bg: var(--e-secondary-soft);\n }\n\n .e-notice--warning {\n --e-tone: var(--e-warning-strong);\n --e-bg: var(--e-warning-soft);\n }\n\n .e-notice--danger {\n --e-tone: var(--e-danger);\n --e-bg: var(--e-danger-soft);\n }\n\n .e-notice-title {\n margin: 0;\n font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n }\n\n .e-notice-text {\n margin: 0;\n font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n color: var(--e-ink);\n }\n\n @media (forced-colors: active) {\n .e-notice {\n border: var(--e-stroke-edge) solid CanvasText;\n }\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,IAAM4B,IAAQC,GAoBRC,IAAOH,GAYPI,IAAIC,EAAY,GAChBC,IAAWC,EAAmB,GAC9BC,IAAwC;GAAE,MAAM;GAAQ,SAAS;GAAS,SAAS;GAAS,QAAQ;EAAQ,GAC5GC,IAAOC,QACXT,EAAM,SAAS,KAAQ,KAAA,IAAYA,EAAM,SAASA,EAAM,SAAS,WAAW,UAAU,SACxF,GACMU,UAAiBV,EAAM,YAAY,CAAC,CAACK,GAAU,MAAM,OAAO;E,kBAIhEhC,EAAA,GAAAC,EAkBM,OAAA;GAjBJ,OAAKC,EAAA,CAAC,YAAU,CACP0B,EAAA,SAAI,UAAA,aAA4BA,EAAA,QAAQ7B,EAAAA,OAAO,WAAO,mBAAA,CAAA,CAAA;GAC9D,MAAMoC,EAAA;E,IAEPhC,EAYM,OAZNiB,GAYM;GAXJjB,EAA4E,QAA5EkB,GAA4E,CAAhDjB,EAAyCC,GAAA,EAAjC,MAAMuB,EAAA,QAAQM,EAAUN,EAAA,M;GAC5DzB,EAKM,OALNmB,GAKM,EAJJtB,EAAA,GAAAM,EAEYC,EAFIqB,EAAA,eAAY,IAAOA,EAAA,iBAAY,GAAA,GAAA;IAAW,IAAIA,EAAA;IAAS,OAAM;;IAC3E,SAAApB,QAAW,CAARC,EAAAC,EAAAkB,EAAA,KAAK,GAAA,CAAA,C;;G,gBAEC7B,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAA+D,OAA/DsB,GAA+D,CAAdZ,EAAQ8B,EAAA,QAAA,SAAA,C;GAE3C1C,EAAAA,OAAO,WAAvBC,EAAA,GAAAM,EAA2FO,GAAA;;IAA3D,OAAM;;IAAmB,SAAAL,QAAuB,CAAvBG,EAAuB8B,EAAA,QAAA,SAAA,C;;;GACpEJ,EAAQ,KAApBrC,EAAA,GAAAC,EAEO,QAFPuB,GAEO,CADLpB,EAAqEU,GAAA;IAAxD,MAAK;IAAK,OAAOC,EAAAe,CAAA,CAAC,CAAA,SAAA;IAAc,SAAK,AAAAsB,EAAA,QAAA,MAAEvB,EAAI,OAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EProgress.js","names":["_sfc_main","EProgress_vue_vue_type_script_setup_true_lang_default","EProgress_default"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** What is progressing. Also the bar's accessible name. @default \"Loading\" */\n label?: string;\n /** How far along, from 0 to `max`; the fill is clamped. Leave it out while the length is unknown: the bar slides back and forth instead (indeterminate). */\n value?: number;\n /** The value that means finished. */\n max?: number;\n /** Text shown at the end of the row. @default percent */\n valueText?: string;\n }>(),\n { max: 100 },\n);\n\nconst t = useMessages();\nconst indeterminate = computed(() => props.value === undefined);\nconst percent = computed(() => Math.max(0, Math.min(100, ((props.value ?? 0) / (props.max || 100)) * 100)));\nconst showHead = computed(() => !!props.label || !indeterminate.value || !!props.valueText);\n</script>\n\n<template>\n <div class=\"e-progress\" :class=\"indeterminate && 'e-progress--indeterminate'\">\n <div v-if=\"showHead\" class=\"e-progress-head\">\n <span class=\"e-progress-label\">{{ label || t(\"loading\") }}</span>\n <span class=\"e-progress-value\">{{ valueText || (indeterminate ? \"\" : Math.round(percent) + \"%\") }}</span>\n </div>\n <div\n class=\"e-progress-track\"\n role=\"progressbar\"\n :aria-label=\"label || t('loading')\"\n aria-valuemin=\"0\"\n :aria-valuemax=\"indeterminate ? undefined : max || 100\"\n :aria-valuenow=\"indeterminate ? undefined : value\"\n :aria-busy=\"indeterminate ? 'true' : undefined\"\n >\n <div class=\"e-progress-fill\" :style=\"indeterminate ? undefined : { width: percent + '%' }\"></div>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.primitives {\n .e-progress {\n display: grid;\n gap: var(--e-space-2);\n }\n\n .e-progress-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--e-space-3);\n }\n\n .e-progress-label {\n font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n }\n\n .e-progress-value {\n font: 500 var(--e-text-sm) / 1.3 var(--e-font-mono);\n font-variant-numeric: tabular-nums;\n color: var(--e-muted);\n }\n\n .e-progress-track {\n position: relative;\n height: 10px;\n border-radius: var(--e-radius-pill);\n background: var(--e-surface-tint);\n box-
|
|
1
|
+
{"version":3,"file":"EProgress.js","names":["_sfc_main","EProgress_vue_vue_type_script_setup_true_lang_default","EProgress_default"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** What is progressing. Also the bar's accessible name. @default \"Loading\" */\n label?: string;\n /** How far along, from 0 to `max`; the fill is clamped. Leave it out while the length is unknown: the bar slides back and forth instead (indeterminate). */\n value?: number;\n /** The value that means finished. */\n max?: number;\n /** Text shown at the end of the row. @default percent */\n valueText?: string;\n }>(),\n { max: 100 },\n);\n\nconst t = useMessages();\nconst indeterminate = computed(() => props.value === undefined);\nconst percent = computed(() => Math.max(0, Math.min(100, ((props.value ?? 0) / (props.max || 100)) * 100)));\nconst showHead = computed(() => !!props.label || !indeterminate.value || !!props.valueText);\n</script>\n\n<template>\n <div class=\"e-progress\" :class=\"indeterminate && 'e-progress--indeterminate'\">\n <div v-if=\"showHead\" class=\"e-progress-head\">\n <span class=\"e-progress-label\">{{ label || t(\"loading\") }}</span>\n <span class=\"e-progress-value\">{{ valueText || (indeterminate ? \"\" : Math.round(percent) + \"%\") }}</span>\n </div>\n <div\n class=\"e-progress-track\"\n role=\"progressbar\"\n :aria-label=\"label || t('loading')\"\n aria-valuemin=\"0\"\n :aria-valuemax=\"indeterminate ? undefined : max || 100\"\n :aria-valuenow=\"indeterminate ? undefined : value\"\n :aria-busy=\"indeterminate ? 'true' : undefined\"\n >\n <div class=\"e-progress-fill\" :style=\"indeterminate ? undefined : { width: percent + '%' }\"></div>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.primitives {\n .e-progress {\n display: grid;\n gap: var(--e-space-2);\n }\n\n .e-progress-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--e-space-3);\n }\n\n .e-progress-label {\n font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n }\n\n .e-progress-value {\n font: 500 var(--e-text-sm) / 1.3 var(--e-font-mono);\n font-variant-numeric: tabular-nums;\n color: var(--e-muted);\n }\n\n .e-progress-track {\n position: relative;\n height: 10px;\n box-sizing: border-box;\n padding: calc(var(--e-stroke-card) / 2);\n border-radius: var(--e-radius-pill);\n background: var(--e-surface-tint);\n background-clip: content-box;\n overflow: hidden;\n }\n\n /* The outline lies over the track and bar, which stop half a stroke inside its outer edge: nothing shows outside the curve or in a gap inside it. */\n .e-progress-track::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--e-stroke-card) solid var(--e-border-strong);\n border-radius: inherit;\n pointer-events: none;\n }\n\n .e-progress-fill {\n height: 100%;\n border-radius: var(--e-radius-pill);\n background: var(--e-primary);\n transition: width var(--e-duration-move) var(--e-easing-out);\n }\n\n .e-progress--indeterminate .e-progress-fill {\n position: absolute;\n inset: calc(var(--e-stroke-card) / 2) auto calc(var(--e-stroke-card) / 2) calc(var(--e-stroke-card) / 2);\n width: 40%;\n transition: none;\n animation: e-progress-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n }\n\n @keyframes e-progress-slide {\n from {\n transform: translateX(-100%);\n }\n\n to {\n transform: translateX(250%);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .e-progress-fill {\n transition: none;\n }\n\n .e-progress--indeterminate .e-progress-fill {\n width: 100%;\n animation: none;\n background: repeating-linear-gradient(\n 135deg,\n var(--e-primary) 0 var(--e-space-2),\n transparent var(--e-space-2) calc(2 * var(--e-space-2))\n );\n }\n }\n\n @media (forced-colors: active) {\n .e-progress-track::after {\n border-color: CanvasText;\n }\n\n .e-progress-fill {\n forced-color-adjust: none;\n background: Highlight;\n }\n\n .e-progress--indeterminate .e-progress-fill {\n background: Highlight;\n }\n }\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EProgress.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_unref","_createCommentVNode","_normalizeStyle","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EProgress_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","indeterminate","computed","percent","showHead","openBlock","createElementBlock","normalizeClass","createElementVNode","toDisplayString","unref","createCommentVNode","normalizeStyle"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** What is progressing. Also the bar's accessible name. @default \"Loading\" */\n label?: string;\n /** How far along, from 0 to `max`; the fill is clamped. Leave it out while the length is unknown: the bar slides back and forth instead (indeterminate). */\n value?: number;\n /** The value that means finished. */\n max?: number;\n /** Text shown at the end of the row. @default percent */\n valueText?: string;\n }>(),\n { max: 100 },\n);\n\nconst t = useMessages();\nconst indeterminate = computed(() => props.value === undefined);\nconst percent = computed(() => Math.max(0, Math.min(100, ((props.value ?? 0) / (props.max || 100)) * 100)));\nconst showHead = computed(() => !!props.label || !indeterminate.value || !!props.valueText);\n</script>\n\n<template>\n <div class=\"e-progress\" :class=\"indeterminate && 'e-progress--indeterminate'\">\n <div v-if=\"showHead\" class=\"e-progress-head\">\n <span class=\"e-progress-label\">{{ label || t(\"loading\") }}</span>\n <span class=\"e-progress-value\">{{ valueText || (indeterminate ? \"\" : Math.round(percent) + \"%\") }}</span>\n </div>\n <div\n class=\"e-progress-track\"\n role=\"progressbar\"\n :aria-label=\"label || t('loading')\"\n aria-valuemin=\"0\"\n :aria-valuemax=\"indeterminate ? undefined : max || 100\"\n :aria-valuenow=\"indeterminate ? undefined : value\"\n :aria-busy=\"indeterminate ? 'true' : undefined\"\n >\n <div class=\"e-progress-fill\" :style=\"indeterminate ? undefined : { width: percent + '%' }\"></div>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.primitives {\n .e-progress {\n display: grid;\n gap: var(--e-space-2);\n }\n\n .e-progress-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--e-space-3);\n }\n\n .e-progress-label {\n font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n }\n\n .e-progress-value {\n font: 500 var(--e-text-sm) / 1.3 var(--e-font-mono);\n font-variant-numeric: tabular-nums;\n color: var(--e-muted);\n }\n\n .e-progress-track {\n position: relative;\n height: 10px;\n border-radius: var(--e-radius-pill);\n background: var(--e-surface-tint);\n box-
|
|
1
|
+
{"version":3,"file":"EProgress.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_unref","_createCommentVNode","_normalizeStyle","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EProgress_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","indeterminate","computed","percent","showHead","openBlock","createElementBlock","normalizeClass","createElementVNode","toDisplayString","unref","createCommentVNode","normalizeStyle"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** What is progressing. Also the bar's accessible name. @default \"Loading\" */\n label?: string;\n /** How far along, from 0 to `max`; the fill is clamped. Leave it out while the length is unknown: the bar slides back and forth instead (indeterminate). */\n value?: number;\n /** The value that means finished. */\n max?: number;\n /** Text shown at the end of the row. @default percent */\n valueText?: string;\n }>(),\n { max: 100 },\n);\n\nconst t = useMessages();\nconst indeterminate = computed(() => props.value === undefined);\nconst percent = computed(() => Math.max(0, Math.min(100, ((props.value ?? 0) / (props.max || 100)) * 100)));\nconst showHead = computed(() => !!props.label || !indeterminate.value || !!props.valueText);\n</script>\n\n<template>\n <div class=\"e-progress\" :class=\"indeterminate && 'e-progress--indeterminate'\">\n <div v-if=\"showHead\" class=\"e-progress-head\">\n <span class=\"e-progress-label\">{{ label || t(\"loading\") }}</span>\n <span class=\"e-progress-value\">{{ valueText || (indeterminate ? \"\" : Math.round(percent) + \"%\") }}</span>\n </div>\n <div\n class=\"e-progress-track\"\n role=\"progressbar\"\n :aria-label=\"label || t('loading')\"\n aria-valuemin=\"0\"\n :aria-valuemax=\"indeterminate ? undefined : max || 100\"\n :aria-valuenow=\"indeterminate ? undefined : value\"\n :aria-busy=\"indeterminate ? 'true' : undefined\"\n >\n <div class=\"e-progress-fill\" :style=\"indeterminate ? undefined : { width: percent + '%' }\"></div>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.primitives {\n .e-progress {\n display: grid;\n gap: var(--e-space-2);\n }\n\n .e-progress-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--e-space-3);\n }\n\n .e-progress-label {\n font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n }\n\n .e-progress-value {\n font: 500 var(--e-text-sm) / 1.3 var(--e-font-mono);\n font-variant-numeric: tabular-nums;\n color: var(--e-muted);\n }\n\n .e-progress-track {\n position: relative;\n height: 10px;\n box-sizing: border-box;\n padding: calc(var(--e-stroke-card) / 2);\n border-radius: var(--e-radius-pill);\n background: var(--e-surface-tint);\n background-clip: content-box;\n overflow: hidden;\n }\n\n /* The outline lies over the track and bar, which stop half a stroke inside its outer edge: nothing shows outside the curve or in a gap inside it. */\n .e-progress-track::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--e-stroke-card) solid var(--e-border-strong);\n border-radius: inherit;\n pointer-events: none;\n }\n\n .e-progress-fill {\n height: 100%;\n border-radius: var(--e-radius-pill);\n background: var(--e-primary);\n transition: width var(--e-duration-move) var(--e-easing-out);\n }\n\n .e-progress--indeterminate .e-progress-fill {\n position: absolute;\n inset: calc(var(--e-stroke-card) / 2) auto calc(var(--e-stroke-card) / 2) calc(var(--e-stroke-card) / 2);\n width: 40%;\n transition: none;\n animation: e-progress-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n }\n\n @keyframes e-progress-slide {\n from {\n transform: translateX(-100%);\n }\n\n to {\n transform: translateX(250%);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .e-progress-fill {\n transition: none;\n }\n\n .e-progress--indeterminate .e-progress-fill {\n width: 100%;\n animation: none;\n background: repeating-linear-gradient(\n 135deg,\n var(--e-primary) 0 var(--e-space-2),\n transparent var(--e-space-2) calc(2 * var(--e-space-2))\n );\n }\n }\n\n @media (forced-colors: active) {\n .e-progress-track::after {\n border-color: CanvasText;\n }\n\n .e-progress-fill {\n forced-color-adjust: none;\n background: Highlight;\n }\n\n .e-progress--indeterminate .e-progress-fill {\n background: Highlight;\n }\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAKA,IAAMa,IAAQC,GAcRC,IAAIC,EAAY,GAChBC,IAAgBC,QAAeL,EAAM,UAAU,KAAA,CAAS,GACxDM,IAAUD,QAAe,KAAK,IAAI,GAAG,KAAK,IAAI,MAAOL,EAAM,SAAS,MAAMA,EAAM,OAAO,OAAQ,GAAG,CAAC,CAAC,GACpGO,IAAWF,QAAe,CAAC,CAACL,EAAM,SAAS,CAACI,EAAc,SAAS,CAAC,CAACJ,EAAM,SAAS;E,kBAIxFb,EAAA,GAAAC,EAgBM,OAAA,EAhBD,OAAKC,EAAA,CAAC,cAAqBe,EAAA,SAAa,2BAAA,CAAA,E,IAChCG,EAAA,SAAXpB,EAAA,GAAAC,EAGM,OAHNO,GAGM,CAFJL,EAAiE,QAAjEM,GAAiEL,EAA/BU,EAAA,SAAST,EAAAU,CAAA,CAAC,CAAA,SAAA,CAAA,GAAA,CAAA,GAC5CZ,EAAyG,QAAzGO,GAAyGN,EAAvEU,EAAA,cAAcG,EAAA,QAAa,KAAQ,KAAK,MAAME,EAAA,KAAO,IAAA,IAAA,GAAA,CAAA,C,iBAEzFhB,EAUM,OAAA;GATJ,OAAM;GACN,MAAK;GACJ,cAAYW,EAAA,SAAST,EAAAU,CAAA,CAAC,CAAA,SAAA;GACvB,iBAAc;GACb,iBAAeE,EAAA,QAAgB,KAAA,IAAYH,EAAA,OAAG;GAC9C,iBAAeG,EAAA,QAAgB,KAAA,IAAYH,EAAA;GAC3C,aAAWG,EAAA,QAAa,SAAY,KAAA;E,IAErCd,EAAiG,OAAA;GAA5F,OAAM;GAAmB,OAAKI,EAAEU,EAAA,QAAgB,KAAA,IAAS,EAAA,OAAYE,EAAA,QAAO,IAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ESearchBar.js","names":["_sfc_main","ESearchBar_vue_vue_type_script_setup_true_lang_default","ESearchBar_default"],"sources":["../../../src/components/SearchBar/ESearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { ref } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n defineProps<{\n /** Names the box and the search landmark; there is no visible label. @default \"Search\" */\n label?: string;\n /** Say what can be searched, briefly. @default \"Search\" */\n placeholder?: string;\n /** The text on the button. @default \"Search\" */\n action?: string;\n /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */\n hideAction?: boolean;\n /** The clear button, shown when there is text. */\n clearable?: boolean;\n /** The name submitted with a form. @default \"q\" */\n name?: string;\n /** Disables the box and button. Say why in an `ENotice`. */\n disabled?: boolean;\n }>(),\n { clearable: true },\n);\n\nconst emit = defineEmits<{\n /** The person pressed Enter or the button. */\n submit: [value: string];\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst box = ref<HTMLInputElement | null>(null);\n\nfunction clear() {\n model.value = \"\";\n box.value?.focus();\n}\n\ndefineExpose({\n input: box,\n focus: () => box.value?.focus(),\n});\n</script>\n\n<template>\n <form\n class=\"e-search\"\n v-bind=\"attrs.wrapper()\"\n role=\"search\"\n :aria-label=\"label || t('search')\"\n @submit.prevent=\"emit('submit', model)\"\n >\n <span class=\"e-search-lead\"><EIcon name=\"search\" /></span>\n <input\n ref=\"box\"\n v-bind=\"attrs.input()\"\n class=\"e-input\"\n :name=\"name || 'q'\"\n :aria-label=\"label || t('search')\"\n :placeholder=\"placeholder || t('search')\"\n :value=\"model\"\n :disabled=\"disabled\"\n @input=\"model = ($event.target as HTMLInputElement).value\"\n />\n <button\n v-if=\"clearable && model && !disabled\"\n type=\"button\"\n class=\"e-search-clear\"\n :aria-label=\"t('clear')\"\n @mousedown.prevent\n @click=\"clear\"\n >\n <EIcon name=\"x\" />\n </button>\n <EButton v-if=\"!hideAction\" type=\"submit\" :disabled=\"disabled\">{{ action || t(\"search\") }}</EButton>\n </form>\n</template>\n\n<style>\n@layer e.controls {\n .e-search {\n --e-ring: var(--e-border-strong);\n\n display: flex;\n align-items: center;\n gap: var(--e-space-1);\n height: var(--e-control-height);\n padding: 0 var(--e-space-1) 0 var(--e-space-2);\n border-
|
|
1
|
+
{"version":3,"file":"ESearchBar.js","names":["_sfc_main","ESearchBar_vue_vue_type_script_setup_true_lang_default","ESearchBar_default"],"sources":["../../../src/components/SearchBar/ESearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { ref } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n defineProps<{\n /** Names the box and the search landmark; there is no visible label. @default \"Search\" */\n label?: string;\n /** Say what can be searched, briefly. @default \"Search\" */\n placeholder?: string;\n /** The text on the button. @default \"Search\" */\n action?: string;\n /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */\n hideAction?: boolean;\n /** The clear button, shown when there is text. */\n clearable?: boolean;\n /** The name submitted with a form. @default \"q\" */\n name?: string;\n /** Disables the box and button. Say why in an `ENotice`. */\n disabled?: boolean;\n }>(),\n { clearable: true },\n);\n\nconst emit = defineEmits<{\n /** The person pressed Enter or the button. */\n submit: [value: string];\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst box = ref<HTMLInputElement | null>(null);\n\nfunction clear() {\n model.value = \"\";\n box.value?.focus();\n}\n\ndefineExpose({\n input: box,\n focus: () => box.value?.focus(),\n});\n</script>\n\n<template>\n <form\n class=\"e-search\"\n v-bind=\"attrs.wrapper()\"\n role=\"search\"\n :aria-label=\"label || t('search')\"\n @submit.prevent=\"emit('submit', model)\"\n >\n <span class=\"e-search-lead\"><EIcon name=\"search\" /></span>\n <input\n ref=\"box\"\n v-bind=\"attrs.input()\"\n class=\"e-input\"\n :name=\"name || 'q'\"\n :aria-label=\"label || t('search')\"\n :placeholder=\"placeholder || t('search')\"\n :value=\"model\"\n :disabled=\"disabled\"\n @input=\"model = ($event.target as HTMLInputElement).value\"\n />\n <button\n v-if=\"clearable && model && !disabled\"\n type=\"button\"\n class=\"e-search-clear\"\n :aria-label=\"t('clear')\"\n @mousedown.prevent\n @click=\"clear\"\n >\n <EIcon name=\"x\" />\n </button>\n <EButton v-if=\"!hideAction\" type=\"submit\" :disabled=\"disabled\">{{ action || t(\"search\") }}</EButton>\n </form>\n</template>\n\n<style>\n@layer e.controls {\n .e-search {\n --e-ring: var(--e-border-strong);\n\n display: flex;\n align-items: center;\n gap: var(--e-space-1);\n height: var(--e-control-height);\n padding: 0 calc(var(--e-space-1) - var(--e-stroke-edge)) 0 calc(var(--e-space-2) - var(--e-stroke-edge));\n box-sizing: border-box;\n border: var(--e-stroke-edge) solid var(--e-ring);\n border-radius: var(--e-radius-md);\n background: var(--e-surface);\n background-clip: padding-box;\n box-shadow: var(--e-well);\n transition: border-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-search:hover {\n background: var(--e-surface-hover);\n }\n\n .e-search .e-btn {\n position: relative;\n height: calc(var(--e-control-height) - 6px);\n padding: 0 calc(var(--e-space-3) - var(--e-stroke-edge));\n font-size: var(--e-text-md);\n }\n\n .e-search .e-btn::after {\n content: \"\";\n position: absolute;\n inset: -3px;\n }\n\n .e-search-clear {\n display: inline-grid;\n place-items: center;\n position: relative;\n flex: none;\n width: calc(var(--e-control-height) - 9px);\n height: calc(var(--e-control-height) - 9px);\n padding: 0;\n border: 0;\n border-radius: var(--e-radius-sm);\n background: transparent;\n color: var(--e-ink);\n cursor: pointer;\n transition: background-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-search-clear::after {\n content: \"\";\n position: absolute;\n inset: -5px;\n }\n\n .e-search-clear:hover {\n background: var(--e-wash-hover);\n box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-wash-ring);\n }\n\n .e-search-clear:active {\n background: var(--e-wash-press);\n box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n }\n\n .e-search-clear:focus-visible {\n outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n outline-offset: calc(-1 * var(--e-stroke-focus));\n }\n\n .e-search-lead {\n display: grid;\n place-items: center;\n flex: none;\n width: var(--e-space-8);\n color: var(--e-muted);\n }\n\n .e-search .e-input {\n flex: 1;\n text-overflow: ellipsis;\n height: 100%;\n border: 0;\n outline: 0;\n background: transparent;\n box-shadow: none;\n font-size: var(--e-text-md);\n padding-inline: var(--e-space-2);\n }\n\n .e-search .e-input:hover,\n .e-search .e-input:focus {\n border: 0;\n background: transparent;\n }\n\n .e-search .e-input:focus-visible {\n outline: none;\n }\n\n .e-search:focus-within {\n --e-ring: var(--e-focus-field);\n\n background: var(--e-surface);\n outline: max(var(--e-stroke-focus), calc(2 * var(--e-stroke-edge))) solid var(--e-focus-field);\n outline-offset: var(--e-focus-gap-field);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .e-search {\n transition: none;\n }\n }\n\n @media print {\n .e-search {\n display: none;\n }\n }\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ESearchBar.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_withModifiers","_createElementVNode","_createVNode","EIcon","_createCommentVNode","_createBlock","EButton","_withCtx","_createTextVNode","_toDisplayString","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESearchBar_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","emit","model","useModel","__props","t","useMessages","attrs","useFieldAttrs","box","ref","clear","openBlock","createElementBlock","mergeProps","unref","_cache","withModifiers","createElementVNode","createVNode","$event","createCommentVNode","createBlock","withCtx","createTextVNode","toDisplayString"],"sources":["../../../src/components/SearchBar/ESearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { ref } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n defineProps<{\n /** Names the box and the search landmark; there is no visible label. @default \"Search\" */\n label?: string;\n /** Say what can be searched, briefly. @default \"Search\" */\n placeholder?: string;\n /** The text on the button. @default \"Search\" */\n action?: string;\n /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */\n hideAction?: boolean;\n /** The clear button, shown when there is text. */\n clearable?: boolean;\n /** The name submitted with a form. @default \"q\" */\n name?: string;\n /** Disables the box and button. Say why in an `ENotice`. */\n disabled?: boolean;\n }>(),\n { clearable: true },\n);\n\nconst emit = defineEmits<{\n /** The person pressed Enter or the button. */\n submit: [value: string];\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst box = ref<HTMLInputElement | null>(null);\n\nfunction clear() {\n model.value = \"\";\n box.value?.focus();\n}\n\ndefineExpose({\n input: box,\n focus: () => box.value?.focus(),\n});\n</script>\n\n<template>\n <form\n class=\"e-search\"\n v-bind=\"attrs.wrapper()\"\n role=\"search\"\n :aria-label=\"label || t('search')\"\n @submit.prevent=\"emit('submit', model)\"\n >\n <span class=\"e-search-lead\"><EIcon name=\"search\" /></span>\n <input\n ref=\"box\"\n v-bind=\"attrs.input()\"\n class=\"e-input\"\n :name=\"name || 'q'\"\n :aria-label=\"label || t('search')\"\n :placeholder=\"placeholder || t('search')\"\n :value=\"model\"\n :disabled=\"disabled\"\n @input=\"model = ($event.target as HTMLInputElement).value\"\n />\n <button\n v-if=\"clearable && model && !disabled\"\n type=\"button\"\n class=\"e-search-clear\"\n :aria-label=\"t('clear')\"\n @mousedown.prevent\n @click=\"clear\"\n >\n <EIcon name=\"x\" />\n </button>\n <EButton v-if=\"!hideAction\" type=\"submit\" :disabled=\"disabled\">{{ action || t(\"search\") }}</EButton>\n </form>\n</template>\n\n<style>\n@layer e.controls {\n .e-search {\n --e-ring: var(--e-border-strong);\n\n display: flex;\n align-items: center;\n gap: var(--e-space-1);\n height: var(--e-control-height);\n padding: 0 var(--e-space-1) 0 var(--e-space-2);\n border-
|
|
1
|
+
{"version":3,"file":"ESearchBar.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_withModifiers","_createElementVNode","_createVNode","EIcon","_createCommentVNode","_createBlock","EButton","_withCtx","_createTextVNode","_toDisplayString","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESearchBar_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","emit","model","useModel","__props","t","useMessages","attrs","useFieldAttrs","box","ref","clear","openBlock","createElementBlock","mergeProps","unref","_cache","withModifiers","createElementVNode","createVNode","$event","createCommentVNode","createBlock","withCtx","createTextVNode","toDisplayString"],"sources":["../../../src/components/SearchBar/ESearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { ref } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n defineProps<{\n /** Names the box and the search landmark; there is no visible label. @default \"Search\" */\n label?: string;\n /** Say what can be searched, briefly. @default \"Search\" */\n placeholder?: string;\n /** The text on the button. @default \"Search\" */\n action?: string;\n /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */\n hideAction?: boolean;\n /** The clear button, shown when there is text. */\n clearable?: boolean;\n /** The name submitted with a form. @default \"q\" */\n name?: string;\n /** Disables the box and button. Say why in an `ENotice`. */\n disabled?: boolean;\n }>(),\n { clearable: true },\n);\n\nconst emit = defineEmits<{\n /** The person pressed Enter or the button. */\n submit: [value: string];\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst box = ref<HTMLInputElement | null>(null);\n\nfunction clear() {\n model.value = \"\";\n box.value?.focus();\n}\n\ndefineExpose({\n input: box,\n focus: () => box.value?.focus(),\n});\n</script>\n\n<template>\n <form\n class=\"e-search\"\n v-bind=\"attrs.wrapper()\"\n role=\"search\"\n :aria-label=\"label || t('search')\"\n @submit.prevent=\"emit('submit', model)\"\n >\n <span class=\"e-search-lead\"><EIcon name=\"search\" /></span>\n <input\n ref=\"box\"\n v-bind=\"attrs.input()\"\n class=\"e-input\"\n :name=\"name || 'q'\"\n :aria-label=\"label || t('search')\"\n :placeholder=\"placeholder || t('search')\"\n :value=\"model\"\n :disabled=\"disabled\"\n @input=\"model = ($event.target as HTMLInputElement).value\"\n />\n <button\n v-if=\"clearable && model && !disabled\"\n type=\"button\"\n class=\"e-search-clear\"\n :aria-label=\"t('clear')\"\n @mousedown.prevent\n @click=\"clear\"\n >\n <EIcon name=\"x\" />\n </button>\n <EButton v-if=\"!hideAction\" type=\"submit\" :disabled=\"disabled\">{{ action || t(\"search\") }}</EButton>\n </form>\n</template>\n\n<style>\n@layer e.controls {\n .e-search {\n --e-ring: var(--e-border-strong);\n\n display: flex;\n align-items: center;\n gap: var(--e-space-1);\n height: var(--e-control-height);\n padding: 0 calc(var(--e-space-1) - var(--e-stroke-edge)) 0 calc(var(--e-space-2) - var(--e-stroke-edge));\n box-sizing: border-box;\n border: var(--e-stroke-edge) solid var(--e-ring);\n border-radius: var(--e-radius-md);\n background: var(--e-surface);\n background-clip: padding-box;\n box-shadow: var(--e-well);\n transition: border-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-search:hover {\n background: var(--e-surface-hover);\n }\n\n .e-search .e-btn {\n position: relative;\n height: calc(var(--e-control-height) - 6px);\n padding: 0 calc(var(--e-space-3) - var(--e-stroke-edge));\n font-size: var(--e-text-md);\n }\n\n .e-search .e-btn::after {\n content: \"\";\n position: absolute;\n inset: -3px;\n }\n\n .e-search-clear {\n display: inline-grid;\n place-items: center;\n position: relative;\n flex: none;\n width: calc(var(--e-control-height) - 9px);\n height: calc(var(--e-control-height) - 9px);\n padding: 0;\n border: 0;\n border-radius: var(--e-radius-sm);\n background: transparent;\n color: var(--e-ink);\n cursor: pointer;\n transition: background-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-search-clear::after {\n content: \"\";\n position: absolute;\n inset: -5px;\n }\n\n .e-search-clear:hover {\n background: var(--e-wash-hover);\n box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-wash-ring);\n }\n\n .e-search-clear:active {\n background: var(--e-wash-press);\n box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n }\n\n .e-search-clear:focus-visible {\n outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n outline-offset: calc(-1 * var(--e-stroke-focus));\n }\n\n .e-search-lead {\n display: grid;\n place-items: center;\n flex: none;\n width: var(--e-space-8);\n color: var(--e-muted);\n }\n\n .e-search .e-input {\n flex: 1;\n text-overflow: ellipsis;\n height: 100%;\n border: 0;\n outline: 0;\n background: transparent;\n box-shadow: none;\n font-size: var(--e-text-md);\n padding-inline: var(--e-space-2);\n }\n\n .e-search .e-input:hover,\n .e-search .e-input:focus {\n border: 0;\n background: transparent;\n }\n\n .e-search .e-input:focus-visible {\n outline: none;\n }\n\n .e-search:focus-within {\n --e-ring: var(--e-focus-field);\n\n background: var(--e-surface);\n outline: max(var(--e-stroke-focus), calc(2 * var(--e-stroke-edge))) solid var(--e-focus-field);\n outline-offset: var(--e-focus-gap-field);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .e-search {\n transition: none;\n }\n }\n\n @media print {\n .e-search {\n display: none;\n }\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,IAAM0B,IAAOD,GAMPE,IAAQ3B,EAAmB6B,GAAA,YAAgB,GAE3CC,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAMC,EAA6B,IAAI;EAE7C,SAASC,IAAQ;GAEf,AADA,EAAM,QAAQ,IACdF,EAAI,OAAO,MAAM;EACnB;E,OAEAV,EAAa;GACX,OAAOU;GACP,aAAaA,EAAI,OAAO,MAAM;EAChC,CAAC,I,UAICjC,EAAA,GAAAC,EA8BO,QA9BPC,EA8BO,EA7BL,OAAM,WAAU,GACRC,EAAA4B,CAAA,CAAK,CAAC,QAAO,GAAA;GACrB,MAAK;GACJ,cAAYH,EAAA,SAASzB,EAAA0B,CAAA,CAAC,CAAA,QAAA;GACtB,UAAM,AAAAW,EAAA,OAAApC,GAAA,MAAUqB,EAAI,UAAWC,EAAA,KAAK,GAAA,CAAA,SAAA,CAAA;;GAErCrB,EAA0D,QAA1DY,GAA0D,CAA9BX,EAAuBC,GAAA,EAAhB,MAAK,SAAQ,CAAA,C;GAChDF,EAUE,SAVFH,EAUE;IATI,SAAA;IAAJ,KAAI+B;GACI,GAAA9B,EAAA4B,CAAA,CAAK,CAAC,MAAK,GAAA;IACnB,OAAM;IACL,MAAMH,EAAA,QAAI;IACV,cAAYA,EAAA,SAASzB,EAAA0B,CAAA,CAAC,CAAA,QAAA;IACtB,aAAaD,EAAA,eAAezB,EAAA0B,CAAA,CAAC,CAAA,QAAA;IAC7B,OAAOH,EAAA;IACP,UAAUE,EAAA;IACV,SAAK,AAAAY,EAAA,QAAA,MAAE,EAAA,QAASI,EAAO,OAA4B;;GAG9ChB,EAAA,aAAaF,EAAA,SAAK,CAAKE,EAAA,YAD/B5B,EAAA,GAAAC,EASS,UAAA;;IAPP,MAAK;IACL,OAAM;IACL,cAAYE,EAAA0B,CAAA,CAAC,CAAA,OAAA;IACb,aAAS,AAAAW,EAAA,OAAApC,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;IACjB,SAAO+B;G,IAER7B,EAAkBC,GAAA,EAAX,MAAK,IAAG,CAAA,C;GAEDqB,EAAA,a,aAAhB5B,EAAA,GAAAS,EAAoGC,GAAA;;IAAxE,MAAK;IAAU,UAAUkB,EAAA;;IAAU,SAAAjB,QAA2B,CAAxBC,EAAAC,EAAAe,EAAA,UAAUzB,EAAA0B,CAAA,CAAC,CAAA,QAAA,CAAA,GAAA,CAAA,C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ESegmented.js","names":["_sfc_main","ESegmented_vue_vue_type_script_setup_true_lang_default","ESegmented_default"],"sources":["../../../src/components/Segmented/ESegmented.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { IconProp } from \"../../icons/types.js\";\n\nexport interface SegmentedOption {\n value: string;\n label: string;\n /** An icon before the label. */\n icon?: IconProp;\n disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n /** Read by screen readers as the name of the group. */\n label: string;\n /** Two to five. A string is both value and label. `SegmentedOption` is `{ value, label, icon?, disabled? }`. */\n options: (string | SegmentedOption)[];\n /** Help under the control, linked with `aria-describedby`. */\n hint?: string;\n /** What to fix. Replaces the hint and is announced. */\n error?: string;\n /** Adds the word \"Optional\" to the group's accessible name; nothing is shown. Flag whichever is rarer. */\n optional?: boolean;\n /** Disables every option. */\n disabled?: boolean;\n /** The name the radios share, submitted with a form. @default generated */\n name?: string;\n}>();\n\n/** The active value. @default first option */\nconst model = defineModel<string>();\n\nconst t = useMessages();\nconst name = useUid(() => props.name);\nconst hintId = computed(() => `${name.value}-hint`);\nconst options = computed<SegmentedOption[]>(() =>\n props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o)),\n);\nconst current = computed(() => model.value ?? options.value[0]?.value);\nconst attrs = useFieldAttrs();\nconst groupAttrs = () => ({\n role: \"radiogroup\",\n \"aria-label\": props.optional ? `${props.label}, ${t(\"optional\")}` : props.label,\n \"aria-invalid\": props.error ? (\"true\" as const) : undefined,\n ...attrs.input(props.error || props.hint ? hintId.value : undefined),\n});\n</script>\n\n<template>\n <div v-if=\"hint || error\" class=\"e-seg-field\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\">\n <div class=\"e-seg\" v-bind=\"groupAttrs()\">\n <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n <input\n type=\"radio\"\n class=\"e-seg-input\"\n :name=\"name\"\n :value=\"o.value\"\n :checked=\"current === o.value\"\n :disabled=\"o.disabled || disabled\"\n @change=\"model = o.value\"\n />\n <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n </label>\n </div>\n <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n </div>\n <div v-else class=\"e-seg\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\" v-bind=\"groupAttrs()\">\n <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n <input\n type=\"radio\"\n class=\"e-seg-input\"\n :name=\"name\"\n :value=\"o.value\"\n :checked=\"current === o.value\"\n :disabled=\"o.disabled || disabled\"\n @change=\"model = o.value\"\n />\n <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n </label>\n </div>\n</template>\n\n<style>\n@layer e.controls {\n /* A pressed-in track. The chosen option fills its cell edge to edge in the primary colour, covering the track's outline there so the outline turns primary where it is chosen, and the track clips it, so only the pieces at either end take the track's rounded corners: a value you set, not a place you go (that is Tabs). */\n .e-seg {\n display: inline-flex;\n box-sizing: border-box;\n height: var(--e-control-height);\n position: relative;\n border-radius: var(--e-radius-md);\n background: var(--e-surface-tint);\n box-shadow:\n inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong),\n var(--e-well);\n overflow: hidden;\n max-width: 100%;\n width: fit-content;\n }\n\n .e-seg-opt {\n position: relative;\n display: inline-flex;\n cursor: pointer;\n }\n\n .e-seg-input {\n position: absolute;\n inset: 0;\n opacity: 0;\n margin: 0;\n cursor: pointer;\n }\n\n .e-seg-text {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--e-space-2);\n box-sizing: border-box;\n min-width: 4rem;\n padding: 0 var(--e-space-4);\n background: transparent;\n color: var(--e-ink);\n font: 500 var(--e-text-md)/1 var(--e-font-sans);\n white-space: nowrap;\n transition: background-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-seg-opt:hover .e-seg-text {\n background: var(--e-wash-hover);\n }\n\n .e-seg-input:checked + .e-seg-text,\n .e-seg-opt:hover .e-seg-input:checked + .e-seg-text {\n background-color: var(--e-primary);\n\n /* The darker band along the bottom is the slab, drawn inside the piece and the track clips it to the corners. */\n background-image: linear-gradient(to top, color-mix(in srgb, var(--e-primary), var(--e-shade-slab)) var(--e-depth), transparent var(--e-depth));\n color: var(--e-on-primary);\n font-weight: 600;\n }\n\n .e-seg-input:focus-visible + .e-seg-text {\n outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n outline-offset: calc(-1 * var(--e-space-1));\n }\n\n .e-seg-input:disabled + .e-seg-text {\n color: var(--e-muted);\n cursor: not-allowed;\n }\n\n .e-seg-opt:has(:disabled):hover .e-seg-text {\n background: transparent;\n }\n\n /* Chosen but unavailable: a flat piece with ink text, so it stays readable. */\n .e-seg-input:disabled:checked + .e-seg-text,\n .e-seg-opt:has(:disabled:checked):hover .e-seg-text {\n background-color: var(--e-surface);\n background-image: none;\n
|
|
1
|
+
{"version":3,"file":"ESegmented.js","names":["_sfc_main","ESegmented_vue_vue_type_script_setup_true_lang_default","ESegmented_default"],"sources":["../../../src/components/Segmented/ESegmented.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { IconProp } from \"../../icons/types.js\";\n\nexport interface SegmentedOption {\n value: string;\n label: string;\n /** An icon before the label. */\n icon?: IconProp;\n disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n /** Read by screen readers as the name of the group. */\n label: string;\n /** Two to five. A string is both value and label. `SegmentedOption` is `{ value, label, icon?, disabled? }`. */\n options: (string | SegmentedOption)[];\n /** Help under the control, linked with `aria-describedby`. */\n hint?: string;\n /** What to fix. Replaces the hint and is announced. */\n error?: string;\n /** Adds the word \"Optional\" to the group's accessible name; nothing is shown. Flag whichever is rarer. */\n optional?: boolean;\n /** Disables every option. */\n disabled?: boolean;\n /** The name the radios share, submitted with a form. @default generated */\n name?: string;\n}>();\n\n/** The active value. @default first option */\nconst model = defineModel<string>();\n\nconst t = useMessages();\nconst name = useUid(() => props.name);\nconst hintId = computed(() => `${name.value}-hint`);\nconst options = computed<SegmentedOption[]>(() =>\n props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o)),\n);\nconst current = computed(() => model.value ?? options.value[0]?.value);\nconst attrs = useFieldAttrs();\nconst groupAttrs = () => ({\n role: \"radiogroup\",\n \"aria-label\": props.optional ? `${props.label}, ${t(\"optional\")}` : props.label,\n \"aria-invalid\": props.error ? (\"true\" as const) : undefined,\n ...attrs.input(props.error || props.hint ? hintId.value : undefined),\n});\n</script>\n\n<template>\n <div v-if=\"hint || error\" class=\"e-seg-field\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\">\n <div class=\"e-seg\" v-bind=\"groupAttrs()\">\n <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n <input\n type=\"radio\"\n class=\"e-seg-input\"\n :name=\"name\"\n :value=\"o.value\"\n :checked=\"current === o.value\"\n :disabled=\"o.disabled || disabled\"\n @change=\"model = o.value\"\n />\n <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n </label>\n </div>\n <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n </div>\n <div v-else class=\"e-seg\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\" v-bind=\"groupAttrs()\">\n <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n <input\n type=\"radio\"\n class=\"e-seg-input\"\n :name=\"name\"\n :value=\"o.value\"\n :checked=\"current === o.value\"\n :disabled=\"o.disabled || disabled\"\n @change=\"model = o.value\"\n />\n <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n </label>\n </div>\n</template>\n\n<style>\n@layer e.controls {\n /* A pressed-in track. The chosen option fills its cell edge to edge in the primary colour, covering the track's outline there so the outline turns primary where it is chosen, and the track clips it, so only the pieces at either end take the track's rounded corners: a value you set, not a place you go (that is Tabs). */\n .e-seg {\n display: inline-flex;\n box-sizing: border-box;\n height: var(--e-control-height);\n position: relative;\n border-radius: var(--e-radius-md);\n background: var(--e-surface-tint);\n box-shadow:\n inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong),\n var(--e-well);\n overflow: hidden;\n max-width: 100%;\n width: fit-content;\n }\n\n .e-seg-opt {\n position: relative;\n display: inline-flex;\n cursor: pointer;\n }\n\n .e-seg-input {\n position: absolute;\n inset: 0;\n opacity: 0;\n margin: 0;\n cursor: pointer;\n }\n\n .e-seg-text {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--e-space-2);\n box-sizing: border-box;\n min-width: 4rem;\n padding: 0 var(--e-space-4);\n background: transparent;\n color: var(--e-ink);\n font: 500 var(--e-text-md)/1 var(--e-font-sans);\n white-space: nowrap;\n transition: background-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-seg-opt:hover .e-seg-text {\n background: var(--e-wash-hover);\n }\n\n .e-seg-input:checked + .e-seg-text,\n .e-seg-opt:hover .e-seg-input:checked + .e-seg-text {\n background-color: var(--e-primary);\n\n /* The darker band along the bottom is the slab, drawn inside the piece and the track clips it to the corners. */\n background-image: linear-gradient(to top, color-mix(in srgb, var(--e-primary), var(--e-shade-slab)) var(--e-depth), transparent var(--e-depth));\n color: var(--e-on-primary);\n font-weight: 600;\n }\n\n .e-seg-input:focus-visible + .e-seg-text {\n outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n outline-offset: calc(-1 * var(--e-space-1));\n }\n\n .e-seg-input:disabled + .e-seg-text {\n color: var(--e-muted);\n cursor: not-allowed;\n }\n\n .e-seg-opt:has(:disabled):hover .e-seg-text {\n background: transparent;\n }\n\n /* Chosen but unavailable: a flat piece with ink text, so it stays readable. */\n .e-seg-input:disabled:checked + .e-seg-text,\n .e-seg-opt:has(:disabled:checked):hover .e-seg-text {\n background-color: var(--e-surface);\n background-image: none;\n outline: var(--e-stroke-edge) solid var(--e-border-strong);\n outline-offset: calc(-1 * var(--e-stroke-edge));\n color: var(--e-ink);\n }\n\n .e-seg-field {\n display: grid;\n gap: var(--e-space-2);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .e-seg-text {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .e-seg-input:checked + .e-seg-text {\n forced-color-adjust: none;\n background: Highlight;\n color: HighlightText;\n }\n }\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ESegmented.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_Fragment","_renderList","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_createVNode","EFieldMessage","EIcon_default","EFieldMessage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESegmented_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","t","useMessages","name","useUid","hintId","computed","options","o","current","attrs","useFieldAttrs","groupAttrs","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","Fragment","renderList","createBlock","createCommentVNode","createTextVNode","toDisplayString","createVNode"],"sources":["../../../src/components/Segmented/ESegmented.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { IconProp } from \"../../icons/types.js\";\n\nexport interface SegmentedOption {\n value: string;\n label: string;\n /** An icon before the label. */\n icon?: IconProp;\n disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n /** Read by screen readers as the name of the group. */\n label: string;\n /** Two to five. A string is both value and label. `SegmentedOption` is `{ value, label, icon?, disabled? }`. */\n options: (string | SegmentedOption)[];\n /** Help under the control, linked with `aria-describedby`. */\n hint?: string;\n /** What to fix. Replaces the hint and is announced. */\n error?: string;\n /** Adds the word \"Optional\" to the group's accessible name; nothing is shown. Flag whichever is rarer. */\n optional?: boolean;\n /** Disables every option. */\n disabled?: boolean;\n /** The name the radios share, submitted with a form. @default generated */\n name?: string;\n}>();\n\n/** The active value. @default first option */\nconst model = defineModel<string>();\n\nconst t = useMessages();\nconst name = useUid(() => props.name);\nconst hintId = computed(() => `${name.value}-hint`);\nconst options = computed<SegmentedOption[]>(() =>\n props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o)),\n);\nconst current = computed(() => model.value ?? options.value[0]?.value);\nconst attrs = useFieldAttrs();\nconst groupAttrs = () => ({\n role: \"radiogroup\",\n \"aria-label\": props.optional ? `${props.label}, ${t(\"optional\")}` : props.label,\n \"aria-invalid\": props.error ? (\"true\" as const) : undefined,\n ...attrs.input(props.error || props.hint ? hintId.value : undefined),\n});\n</script>\n\n<template>\n <div v-if=\"hint || error\" class=\"e-seg-field\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\">\n <div class=\"e-seg\" v-bind=\"groupAttrs()\">\n <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n <input\n type=\"radio\"\n class=\"e-seg-input\"\n :name=\"name\"\n :value=\"o.value\"\n :checked=\"current === o.value\"\n :disabled=\"o.disabled || disabled\"\n @change=\"model = o.value\"\n />\n <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n </label>\n </div>\n <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n </div>\n <div v-else class=\"e-seg\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\" v-bind=\"groupAttrs()\">\n <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n <input\n type=\"radio\"\n class=\"e-seg-input\"\n :name=\"name\"\n :value=\"o.value\"\n :checked=\"current === o.value\"\n :disabled=\"o.disabled || disabled\"\n @change=\"model = o.value\"\n />\n <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n </label>\n </div>\n</template>\n\n<style>\n@layer e.controls {\n /* A pressed-in track. The chosen option fills its cell edge to edge in the primary colour, covering the track's outline there so the outline turns primary where it is chosen, and the track clips it, so only the pieces at either end take the track's rounded corners: a value you set, not a place you go (that is Tabs). */\n .e-seg {\n display: inline-flex;\n box-sizing: border-box;\n height: var(--e-control-height);\n position: relative;\n border-radius: var(--e-radius-md);\n background: var(--e-surface-tint);\n box-shadow:\n inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong),\n var(--e-well);\n overflow: hidden;\n max-width: 100%;\n width: fit-content;\n }\n\n .e-seg-opt {\n position: relative;\n display: inline-flex;\n cursor: pointer;\n }\n\n .e-seg-input {\n position: absolute;\n inset: 0;\n opacity: 0;\n margin: 0;\n cursor: pointer;\n }\n\n .e-seg-text {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--e-space-2);\n box-sizing: border-box;\n min-width: 4rem;\n padding: 0 var(--e-space-4);\n background: transparent;\n color: var(--e-ink);\n font: 500 var(--e-text-md)/1 var(--e-font-sans);\n white-space: nowrap;\n transition: background-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-seg-opt:hover .e-seg-text {\n background: var(--e-wash-hover);\n }\n\n .e-seg-input:checked + .e-seg-text,\n .e-seg-opt:hover .e-seg-input:checked + .e-seg-text {\n background-color: var(--e-primary);\n\n /* The darker band along the bottom is the slab, drawn inside the piece and the track clips it to the corners. */\n background-image: linear-gradient(to top, color-mix(in srgb, var(--e-primary), var(--e-shade-slab)) var(--e-depth), transparent var(--e-depth));\n color: var(--e-on-primary);\n font-weight: 600;\n }\n\n .e-seg-input:focus-visible + .e-seg-text {\n outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n outline-offset: calc(-1 * var(--e-space-1));\n }\n\n .e-seg-input:disabled + .e-seg-text {\n color: var(--e-muted);\n cursor: not-allowed;\n }\n\n .e-seg-opt:has(:disabled):hover .e-seg-text {\n background: transparent;\n }\n\n /* Chosen but unavailable: a flat piece with ink text, so it stays readable. */\n .e-seg-input:disabled:checked + .e-seg-text,\n .e-seg-opt:has(:disabled:checked):hover .e-seg-text {\n background-color: var(--e-surface);\n background-image: none;\n
|
|
1
|
+
{"version":3,"file":"ESegmented.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_Fragment","_renderList","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_createVNode","EFieldMessage","EIcon_default","EFieldMessage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESegmented_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","t","useMessages","name","useUid","hintId","computed","options","o","current","attrs","useFieldAttrs","groupAttrs","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","Fragment","renderList","createBlock","createCommentVNode","createTextVNode","toDisplayString","createVNode"],"sources":["../../../src/components/Segmented/ESegmented.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { IconProp } from \"../../icons/types.js\";\n\nexport interface SegmentedOption {\n value: string;\n label: string;\n /** An icon before the label. */\n icon?: IconProp;\n disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n /** Read by screen readers as the name of the group. */\n label: string;\n /** Two to five. A string is both value and label. `SegmentedOption` is `{ value, label, icon?, disabled? }`. */\n options: (string | SegmentedOption)[];\n /** Help under the control, linked with `aria-describedby`. */\n hint?: string;\n /** What to fix. Replaces the hint and is announced. */\n error?: string;\n /** Adds the word \"Optional\" to the group's accessible name; nothing is shown. Flag whichever is rarer. */\n optional?: boolean;\n /** Disables every option. */\n disabled?: boolean;\n /** The name the radios share, submitted with a form. @default generated */\n name?: string;\n}>();\n\n/** The active value. @default first option */\nconst model = defineModel<string>();\n\nconst t = useMessages();\nconst name = useUid(() => props.name);\nconst hintId = computed(() => `${name.value}-hint`);\nconst options = computed<SegmentedOption[]>(() =>\n props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o)),\n);\nconst current = computed(() => model.value ?? options.value[0]?.value);\nconst attrs = useFieldAttrs();\nconst groupAttrs = () => ({\n role: \"radiogroup\",\n \"aria-label\": props.optional ? `${props.label}, ${t(\"optional\")}` : props.label,\n \"aria-invalid\": props.error ? (\"true\" as const) : undefined,\n ...attrs.input(props.error || props.hint ? hintId.value : undefined),\n});\n</script>\n\n<template>\n <div v-if=\"hint || error\" class=\"e-seg-field\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\">\n <div class=\"e-seg\" v-bind=\"groupAttrs()\">\n <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n <input\n type=\"radio\"\n class=\"e-seg-input\"\n :name=\"name\"\n :value=\"o.value\"\n :checked=\"current === o.value\"\n :disabled=\"o.disabled || disabled\"\n @change=\"model = o.value\"\n />\n <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n </label>\n </div>\n <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n </div>\n <div v-else class=\"e-seg\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\" v-bind=\"groupAttrs()\">\n <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n <input\n type=\"radio\"\n class=\"e-seg-input\"\n :name=\"name\"\n :value=\"o.value\"\n :checked=\"current === o.value\"\n :disabled=\"o.disabled || disabled\"\n @change=\"model = o.value\"\n />\n <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n </label>\n </div>\n</template>\n\n<style>\n@layer e.controls {\n /* A pressed-in track. The chosen option fills its cell edge to edge in the primary colour, covering the track's outline there so the outline turns primary where it is chosen, and the track clips it, so only the pieces at either end take the track's rounded corners: a value you set, not a place you go (that is Tabs). */\n .e-seg {\n display: inline-flex;\n box-sizing: border-box;\n height: var(--e-control-height);\n position: relative;\n border-radius: var(--e-radius-md);\n background: var(--e-surface-tint);\n box-shadow:\n inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong),\n var(--e-well);\n overflow: hidden;\n max-width: 100%;\n width: fit-content;\n }\n\n .e-seg-opt {\n position: relative;\n display: inline-flex;\n cursor: pointer;\n }\n\n .e-seg-input {\n position: absolute;\n inset: 0;\n opacity: 0;\n margin: 0;\n cursor: pointer;\n }\n\n .e-seg-text {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--e-space-2);\n box-sizing: border-box;\n min-width: 4rem;\n padding: 0 var(--e-space-4);\n background: transparent;\n color: var(--e-ink);\n font: 500 var(--e-text-md)/1 var(--e-font-sans);\n white-space: nowrap;\n transition: background-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-seg-opt:hover .e-seg-text {\n background: var(--e-wash-hover);\n }\n\n .e-seg-input:checked + .e-seg-text,\n .e-seg-opt:hover .e-seg-input:checked + .e-seg-text {\n background-color: var(--e-primary);\n\n /* The darker band along the bottom is the slab, drawn inside the piece and the track clips it to the corners. */\n background-image: linear-gradient(to top, color-mix(in srgb, var(--e-primary), var(--e-shade-slab)) var(--e-depth), transparent var(--e-depth));\n color: var(--e-on-primary);\n font-weight: 600;\n }\n\n .e-seg-input:focus-visible + .e-seg-text {\n outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n outline-offset: calc(-1 * var(--e-space-1));\n }\n\n .e-seg-input:disabled + .e-seg-text {\n color: var(--e-muted);\n cursor: not-allowed;\n }\n\n .e-seg-opt:has(:disabled):hover .e-seg-text {\n background: transparent;\n }\n\n /* Chosen but unavailable: a flat piece with ink text, so it stays readable. */\n .e-seg-input:disabled:checked + .e-seg-text,\n .e-seg-opt:has(:disabled:checked):hover .e-seg-text {\n background-color: var(--e-surface);\n background-image: none;\n outline: var(--e-stroke-edge) solid var(--e-border-strong);\n outline-offset: calc(-1 * var(--e-stroke-edge));\n color: var(--e-ink);\n }\n\n .e-seg-field {\n display: grid;\n gap: var(--e-space-2);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .e-seg-text {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .e-seg-input:checked + .e-seg-text {\n forced-color-adjust: none;\n background: Highlight;\n color: HighlightText;\n }\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,IAAM0B,IAAQC,GAkBRC,IAAQ5B,EAAmB2B,GAAA,YAAC,GAE5BG,IAAIC,EAAY,GAChBC,IAAOC,QAAaP,EAAM,IAAI,GAC9BQ,IAASC,QAAe,GAAGH,EAAK,MAAM,MAAM,GAC5CI,IAAUD,QACdT,EAAM,QAAQ,KAAK,MAAO,OAAOW,KAAM,WAAW;GAAE,OAAOA;GAAG,OAAOA;EAAE,IAAIA,CAAE,CAC/E,GACMC,IAAUH,QAAeP,EAAM,SAASQ,EAAQ,MAAM,EAAE,EAAE,KAAK,GAC/DG,IAAQC,EAAc,GACtBC,WAAoB;GACxB,MAAM;GACN,cAAcf,EAAM,WAAW,GAAGA,EAAM,MAAM,IAAII,EAAE,UAAU,MAAMJ,EAAM;GAC1E,gBAAgBA,EAAM,QAAS,SAAmB,KAAA;GAClD,GAAGa,EAAM,MAAMb,EAAM,SAASA,EAAM,OAAOQ,EAAO,QAAQ,KAAA,CAAS;EACrE;E,iBAIaP,EAAA,QAAQA,EAAA,SAAnB1B,EAAA,GAAAC,EAgBM,OAAA;;GAhBoB,OAAKC,EAAA,CAAC,eAAsBC,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK,CAAA;GAAG,OAAKlC,EAAED,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;E,IACxGjC,EAaM,OAbNC,EAaM,EAbD,OAAM,QAAO,GAASkC,EAAU,CAAA,GAAA,EACnCxC,EAAA,EAAA,GAAAC,EAWQM,GAAA,MAAAC,EAXW2B,EAAA,QAAL,OAAdnC,EAAA,GAAAC,EAWQ,SAAA;GAXqB,KAAKmC,EAAE;GAAO,OAAM;E,IAC/C/B,EAQE,SAAA;GAPA,MAAK;GACL,OAAM;GACL,MAAMF,EAAA4B,CAAA;GACN,OAAOK,EAAE;GACT,SAASC,EAAA,UAAYD,EAAE;GACvB,UAAUA,EAAE,YAAYV,EAAA;GACxB,WAAM,MAAE,EAAA,QAAQU,EAAE;E,iBAErB/B,EAAmF,QAAnFc,GAAmF,CAA7CiB,EAAE,QAAfpC,EAAA,GAAAS,EAAsCC,GAAA;;GAAhB,MAAM0B,EAAE;E,oCAAWxB,EAAAC,EAAAuB,EAAE,KAAK,GAAA,CAAA,C,qBAG7EtB,EAA0DC,GAAA;GAA1C,IAAIkB,EAAA;GAAS,OAAOP,EAAA;GAAQ,MAAMA,EAAA;;;;;E,YAEpD1B,EAAA,GAAAC,EAaM,OAbNK,EAaM;;GAbM,OAAK,CAAC,SAAgBH,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;GAAG,OAAOnC,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG;EAAe,GAAAE,EAAU,CAAA,GAAA,EACxGxC,EAAA,EAAA,GAAAC,EAWQM,GAAA,MAAAC,EAXW2B,EAAA,QAAL,OAAdnC,EAAA,GAAAC,EAWQ,SAAA;GAXqB,KAAKmC,EAAE;GAAO,OAAM;E,IAC/C/B,EAQE,SAAA;GAPA,MAAK;GACL,OAAM;GACL,MAAMF,EAAA4B,CAAA;GACN,OAAOK,EAAE;GACT,SAASC,EAAA,UAAYD,EAAE;GACvB,UAAUA,EAAE,YAAYV,EAAA;GACxB,WAAM,MAAE,EAAA,QAAQU,EAAE;E,iBAErB/B,EAAmF,QAAnFgB,GAAmF,CAA7Ce,EAAE,QAAfpC,EAAA,GAAAS,EAAsCC,GAAA;;GAAhB,MAAM0B,EAAE;E,oCAAWxB,EAAAC,EAAAuB,EAAE,KAAK,GAAA,CAAA,C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ESelectControl.js","names":["_sfc_main","ESelectControl_vue_vue_type_script_setup_true_lang_default","ESelectControl_default"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n SelectContent,\n SelectGroup,\n SelectLabel,\n SelectPortal,\n SelectRoot,\n SelectTrigger,\n SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n /** The normalised options. */\n options: EOption[];\n placeholder?: string | undefined;\n disabled?: boolean | undefined;\n required?: boolean | undefined;\n name?: string | undefined;\n /** Names the list. */\n label?: string | undefined;\n /** Attributes for the button: id, aria-*, data-*, listeners. */\n triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n isOpen,\n (now) => {\n if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n },\n { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n quiet.intent();\n typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n if (e.key === \" \" && !typed) return;\n const now = Date.now();\n typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n typedAt = now;\n const list = props.options;\n const from = list.findIndex((o) => o.value === model.value);\n for (let j = 0; j < list.length; j++) {\n const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n model.value = o.value;\n break;\n }\n }\n}\n</script>\n\n<template>\n <div class=\"e-sel\">\n <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n <SelectTrigger\n class=\"e-input e-sel-trigger\"\n :tabindex=\"isOpen ? -1 : undefined\"\n v-bind=\"triggerAttrs\"\n @pointerdown=\"quiet.intent\"\n @keydown=\"keydown\"\n >\n <span v-if=\"selected\" class=\"e-sel-value\">\n <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n </span>\n <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n <EIcon name=\"chevron-down\" bold />\n </SelectTrigger>\n <SelectPortal :to=\"portal\">\n <SelectContent\n position=\"popper\"\n align=\"start\"\n :side-offset=\"6\"\n :collision-padding=\"8\"\n :body-lock=\"false\"\n class=\"e-popover e-listpanel e-root\"\n :aria-label=\"label\"\n @close-auto-focus=\"closeFocus\"\n >\n <SelectViewport>\n <template v-for=\"(section, i) in sections\" :key=\"i\">\n <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </SelectGroup>\n <template v-else>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </template>\n </template>\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n </SelectRoot>\n <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n </div>\n</template>\n\n<style>\n@layer e.controls {\n .e-sel {\n position: relative;\n }\n\n .e-sel-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2);\n padding-inline-end: var(--e-space-3);\n text-align: start;\n cursor: pointer;\n }\n\n .e-sel-trigger[aria-expanded=\"true\"] {\n --e-ring: var(--e-
|
|
1
|
+
{"version":3,"file":"ESelectControl.js","names":["_sfc_main","ESelectControl_vue_vue_type_script_setup_true_lang_default","ESelectControl_default"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n SelectContent,\n SelectGroup,\n SelectLabel,\n SelectPortal,\n SelectRoot,\n SelectTrigger,\n SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n /** The normalised options. */\n options: EOption[];\n placeholder?: string | undefined;\n disabled?: boolean | undefined;\n required?: boolean | undefined;\n name?: string | undefined;\n /** Names the list. */\n label?: string | undefined;\n /** Attributes for the button: id, aria-*, data-*, listeners. */\n triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n isOpen,\n (now) => {\n if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n },\n { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n quiet.intent();\n typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n if (e.key === \" \" && !typed) return;\n const now = Date.now();\n typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n typedAt = now;\n const list = props.options;\n const from = list.findIndex((o) => o.value === model.value);\n for (let j = 0; j < list.length; j++) {\n const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n model.value = o.value;\n break;\n }\n }\n}\n</script>\n\n<template>\n <div class=\"e-sel\">\n <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n <SelectTrigger\n class=\"e-input e-sel-trigger\"\n :tabindex=\"isOpen ? -1 : undefined\"\n v-bind=\"triggerAttrs\"\n @pointerdown=\"quiet.intent\"\n @keydown=\"keydown\"\n >\n <span v-if=\"selected\" class=\"e-sel-value\">\n <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n </span>\n <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n <EIcon name=\"chevron-down\" bold />\n </SelectTrigger>\n <SelectPortal :to=\"portal\">\n <SelectContent\n position=\"popper\"\n align=\"start\"\n :side-offset=\"6\"\n :collision-padding=\"8\"\n :body-lock=\"false\"\n class=\"e-popover e-listpanel e-root\"\n :aria-label=\"label\"\n @close-auto-focus=\"closeFocus\"\n >\n <SelectViewport>\n <template v-for=\"(section, i) in sections\" :key=\"i\">\n <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </SelectGroup>\n <template v-else>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </template>\n </template>\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n </SelectRoot>\n <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n </div>\n</template>\n\n<style>\n@layer e.controls {\n .e-sel {\n position: relative;\n }\n\n .e-sel-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2);\n padding-inline-end: calc(var(--e-space-3) - var(--e-stroke-edge));\n text-align: start;\n cursor: pointer;\n }\n\n /* Open, the trigger looks focused: focus moves into the list, so the field's own :focus no longer applies. */\n .e-sel-trigger[aria-expanded=\"true\"] {\n --e-ring: var(--e-focus-field);\n\n background-color: var(--e-surface);\n outline: max(var(--e-stroke-focus), calc(2 * var(--e-stroke-edge))) solid var(--e-focus-field);\n outline-offset: var(--e-focus-gap-field);\n }\n\n .e-sel-trigger[aria-expanded=\"true\"][aria-invalid=\"true\"] {\n --e-ring: var(--e-danger);\n\n outline-color: var(--e-danger);\n }\n\n .e-sel-value {\n display: inline-flex;\n align-items: center;\n gap: var(--e-space-2);\n min-width: 0;\n overflow: hidden;\n line-height: 1.4;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .e-sel-placeholder {\n color: var(--e-muted);\n }\n\n .e-sel-trigger > .e-icon {\n flex: none;\n }\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ESelectControl.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","_mergeProps","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_Fragment","_renderList","ESelectOption","EIcon_default","ESelectOption_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESelectControl_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","model","useModel","t","useMessages","portal","usePortalTarget","sections","computed","sectionOptions","selected","o","typed","typedAt","open","isOpen","quiet","useQuietFocus","el","now","closeFocus","keydown","typeahead","list","from","j","openBlock","createElementBlock","createVNode","unref","SelectRoot","_cache","$event","withCtx","SelectTrigger","mergeProps","createBlock","createCommentVNode","createTextVNode","toDisplayString","SelectPortal","SelectContent","SelectViewport","Fragment","renderList","i","section","SelectGroup","SelectLabel"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n SelectContent,\n SelectGroup,\n SelectLabel,\n SelectPortal,\n SelectRoot,\n SelectTrigger,\n SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n /** The normalised options. */\n options: EOption[];\n placeholder?: string | undefined;\n disabled?: boolean | undefined;\n required?: boolean | undefined;\n name?: string | undefined;\n /** Names the list. */\n label?: string | undefined;\n /** Attributes for the button: id, aria-*, data-*, listeners. */\n triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n isOpen,\n (now) => {\n if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n },\n { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n quiet.intent();\n typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n if (e.key === \" \" && !typed) return;\n const now = Date.now();\n typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n typedAt = now;\n const list = props.options;\n const from = list.findIndex((o) => o.value === model.value);\n for (let j = 0; j < list.length; j++) {\n const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n model.value = o.value;\n break;\n }\n }\n}\n</script>\n\n<template>\n <div class=\"e-sel\">\n <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n <SelectTrigger\n class=\"e-input e-sel-trigger\"\n :tabindex=\"isOpen ? -1 : undefined\"\n v-bind=\"triggerAttrs\"\n @pointerdown=\"quiet.intent\"\n @keydown=\"keydown\"\n >\n <span v-if=\"selected\" class=\"e-sel-value\">\n <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n </span>\n <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n <EIcon name=\"chevron-down\" bold />\n </SelectTrigger>\n <SelectPortal :to=\"portal\">\n <SelectContent\n position=\"popper\"\n align=\"start\"\n :side-offset=\"6\"\n :collision-padding=\"8\"\n :body-lock=\"false\"\n class=\"e-popover e-listpanel e-root\"\n :aria-label=\"label\"\n @close-auto-focus=\"closeFocus\"\n >\n <SelectViewport>\n <template v-for=\"(section, i) in sections\" :key=\"i\">\n <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </SelectGroup>\n <template v-else>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </template>\n </template>\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n </SelectRoot>\n <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n </div>\n</template>\n\n<style>\n@layer e.controls {\n .e-sel {\n position: relative;\n }\n\n .e-sel-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2);\n padding-inline-end: var(--e-space-3);\n text-align: start;\n cursor: pointer;\n }\n\n .e-sel-trigger[aria-expanded=\"true\"] {\n --e-ring: var(--e-
|
|
1
|
+
{"version":3,"file":"ESelectControl.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","_mergeProps","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_Fragment","_renderList","ESelectOption","EIcon_default","ESelectOption_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESelectControl_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","model","useModel","t","useMessages","portal","usePortalTarget","sections","computed","sectionOptions","selected","o","typed","typedAt","open","isOpen","quiet","useQuietFocus","el","now","closeFocus","keydown","typeahead","list","from","j","openBlock","createElementBlock","createVNode","unref","SelectRoot","_cache","$event","withCtx","SelectTrigger","mergeProps","createBlock","createCommentVNode","createTextVNode","toDisplayString","SelectPortal","SelectContent","SelectViewport","Fragment","renderList","i","section","SelectGroup","SelectLabel"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n SelectContent,\n SelectGroup,\n SelectLabel,\n SelectPortal,\n SelectRoot,\n SelectTrigger,\n SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n /** The normalised options. */\n options: EOption[];\n placeholder?: string | undefined;\n disabled?: boolean | undefined;\n required?: boolean | undefined;\n name?: string | undefined;\n /** Names the list. */\n label?: string | undefined;\n /** Attributes for the button: id, aria-*, data-*, listeners. */\n triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n isOpen,\n (now) => {\n if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n },\n { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n quiet.intent();\n typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n if (e.key === \" \" && !typed) return;\n const now = Date.now();\n typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n typedAt = now;\n const list = props.options;\n const from = list.findIndex((o) => o.value === model.value);\n for (let j = 0; j < list.length; j++) {\n const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n model.value = o.value;\n break;\n }\n }\n}\n</script>\n\n<template>\n <div class=\"e-sel\">\n <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n <SelectTrigger\n class=\"e-input e-sel-trigger\"\n :tabindex=\"isOpen ? -1 : undefined\"\n v-bind=\"triggerAttrs\"\n @pointerdown=\"quiet.intent\"\n @keydown=\"keydown\"\n >\n <span v-if=\"selected\" class=\"e-sel-value\">\n <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n </span>\n <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n <EIcon name=\"chevron-down\" bold />\n </SelectTrigger>\n <SelectPortal :to=\"portal\">\n <SelectContent\n position=\"popper\"\n align=\"start\"\n :side-offset=\"6\"\n :collision-padding=\"8\"\n :body-lock=\"false\"\n class=\"e-popover e-listpanel e-root\"\n :aria-label=\"label\"\n @close-auto-focus=\"closeFocus\"\n >\n <SelectViewport>\n <template v-for=\"(section, i) in sections\" :key=\"i\">\n <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </SelectGroup>\n <template v-else>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </template>\n </template>\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n </SelectRoot>\n <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n </div>\n</template>\n\n<style>\n@layer e.controls {\n .e-sel {\n position: relative;\n }\n\n .e-sel-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2);\n padding-inline-end: calc(var(--e-space-3) - var(--e-stroke-edge));\n text-align: start;\n cursor: pointer;\n }\n\n /* Open, the trigger looks focused: focus moves into the list, so the field's own :focus no longer applies. */\n .e-sel-trigger[aria-expanded=\"true\"] {\n --e-ring: var(--e-focus-field);\n\n background-color: var(--e-surface);\n outline: max(var(--e-stroke-focus), calc(2 * var(--e-stroke-edge))) solid var(--e-focus-field);\n outline-offset: var(--e-focus-gap-field);\n }\n\n .e-sel-trigger[aria-expanded=\"true\"][aria-invalid=\"true\"] {\n --e-ring: var(--e-danger);\n\n outline-color: var(--e-danger);\n }\n\n .e-sel-value {\n display: inline-flex;\n align-items: center;\n gap: var(--e-space-2);\n min-width: 0;\n overflow: hidden;\n line-height: 1.4;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .e-sel-placeholder {\n color: var(--e-muted);\n }\n\n .e-sel-trigger > .e-icon {\n flex: none;\n }\n}\n</style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ESignaturePad.js","names":["_sfc_main","ESignaturePad_vue_vue_type_script_setup_true_lang_default","ESignaturePad_default"],"sources":["../../../src/components/SignaturePad/ESignaturePad.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** The height of the drawing area in pixels. */\n height?: number;\n /** Ignores drawing and disables Clear. */\n disabled?: boolean;\n /** The id of the canvas. @default generated */\n id?: string;\n }>(),\n { height: 160 },\n);\n\n/** A PNG data URL (black on transparent); empty while clear. Set `\"\"` to clear. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst id = useUid(() => props.id);\nconst canvas = ref<HTMLCanvasElement | null>(null);\nconst empty = ref(!model.value);\n\ninterface Point {\n x: number;\n y: number;\n}\nconst strokes: Point[][] = [];\nlet current: Point[] | null = null;\n\nfunction paint(ctx: CanvasRenderingContext2D, color: string) {\n ctx.lineWidth = 2.5;\n ctx.lineCap = \"round\";\n ctx.lineJoin = \"round\";\n ctx.strokeStyle = color;\n ctx.fillStyle = color;\n for (const stroke of strokes) {\n const [first, ...rest] = stroke;\n if (!first) continue;\n ctx.beginPath();\n ctx.arc(first.x, first.y, 1.2, 0, 6.3);\n ctx.fill();\n ctx.beginPath();\n ctx.moveTo(first.x, first.y);\n for (const p of rest) ctx.lineTo(p.x, p.y);\n ctx.stroke();\n }\n}\n\nfunction setup() {\n const cv = canvas.value;\n if (!cv) return;\n const dpr = window.devicePixelRatio || 1;\n cv.width = Math.round((cv.clientWidth || 320) * dpr);\n cv.height = Math.round(props.height * dpr);\n const ctx = cv.getContext(\"2d\");\n if (!ctx) return;\n ctx.scale(dpr, dpr);\n paint(ctx, getComputedStyle(cv).color);\n}\nonMounted(setup);\nuseResizeObserver(canvas, setup);\n\nfunction point(e: PointerEvent): Point {\n const r = canvas.value!.getBoundingClientRect();\n return { x: e.clientX - r.left, y: e.clientY - r.top };\n}\n\nfunction down(e: PointerEvent) {\n if (props.disabled) return;\n e.preventDefault();\n try {\n canvas.value!.setPointerCapture(e.pointerId);\n } catch {}\n const p = point(e);\n current = [p];\n strokes.push(current);\n const ctx = canvas.value!.getContext(\"2d\")!;\n ctx.fillStyle = getComputedStyle(canvas.value!).color;\n ctx.beginPath();\n ctx.arc(p.x, p.y, 1.2, 0, 6.3);\n ctx.fill();\n}\n\nfunction move(e: PointerEvent) {\n if (!current) return;\n const from = current[current.length - 1]!;\n const p = point(e);\n current.push(p);\n const ctx = canvas.value!.getContext(\"2d\")!;\n ctx.strokeStyle = getComputedStyle(canvas.value!).color;\n ctx.beginPath();\n ctx.moveTo(from.x, from.y);\n ctx.lineTo(p.x, p.y);\n ctx.stroke();\n}\n\nfunction exportImage(): string {\n const cv = canvas.value!;\n const out = document.createElement(\"canvas\");\n out.width = cv.width;\n out.height = cv.height;\n const ctx = out.getContext(\"2d\")!;\n ctx.scale(cv.width / (cv.clientWidth || 320), cv.height / props.height);\n paint(ctx, \"black\");\n return out.toDataURL(\"image/png\");\n}\n\nfunction up() {\n if (!current) return;\n current = null;\n empty.value = false;\n model.value = exportImage();\n}\n\nfunction wipe() {\n strokes.length = 0;\n current = null;\n empty.value = true;\n const cv = canvas.value;\n const ctx = cv?.getContext(\"2d\");\n if (cv && ctx) {\n ctx.save();\n ctx.setTransform(1, 0, 0, 1, 0, 0);\n ctx.clearRect(0, 0, cv.width, cv.height);\n ctx.restore();\n }\n}\n\nfunction clear() {\n wipe();\n model.value = \"\";\n}\n\nwatch(model, (v) => {\n if (!v && !empty.value) wipe();\n});\n\ndefineExpose({\n clear,\n canvas,\n});\n</script>\n\n<template>\n <div class=\"e-pad\">\n <div class=\"e-pad-surface\" :data-empty=\"empty ? '' : undefined\">\n <canvas\n :id=\"id\"\n ref=\"canvas\"\n class=\"e-pad-canvas\"\n role=\"img\"\n :style=\"{ height: `${height}px`, color: 'var(--e-ink)' }\"\n :aria-label=\"t('drawSignature')\"\n :aria-describedby=\"`${id}-hint`\"\n @pointerdown=\"down\"\n @pointermove=\"move\"\n @pointerup=\"up\"\n @pointercancel=\"up\"\n />\n <span v-if=\"empty\" class=\"e-pad-placeholder\" aria-hidden=\"true\">\n <EIcon name=\"signature\" />\n {{ t(\"signEmpty\") }}\n </span>\n </div>\n <div class=\"e-pad-foot\">\n <p :id=\"`${id}-hint`\" class=\"e-field-hint\">{{ t(\"signDrawHint\") }}</p>\n <EButton variant=\"quiet\" icon=\"eraser\" :disabled=\"empty || disabled\" @click=\"clear\">\n {{ t(\"signClear\") }}\n </EButton>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.composites {\n .e-pad {\n display: grid;\n gap: var(--e-space-2);\n }\n\n .e-pad-surface {\n position: relative;\n overflow: hidden;\n border
|
|
1
|
+
{"version":3,"file":"ESignaturePad.js","names":["_sfc_main","ESignaturePad_vue_vue_type_script_setup_true_lang_default","ESignaturePad_default"],"sources":["../../../src/components/SignaturePad/ESignaturePad.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** The height of the drawing area in pixels. */\n height?: number;\n /** Ignores drawing and disables Clear. */\n disabled?: boolean;\n /** The id of the canvas. @default generated */\n id?: string;\n }>(),\n { height: 160 },\n);\n\n/** A PNG data URL (black on transparent); empty while clear. Set `\"\"` to clear. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst id = useUid(() => props.id);\nconst canvas = ref<HTMLCanvasElement | null>(null);\nconst empty = ref(!model.value);\n\ninterface Point {\n x: number;\n y: number;\n}\nconst strokes: Point[][] = [];\nlet current: Point[] | null = null;\n\nfunction paint(ctx: CanvasRenderingContext2D, color: string) {\n ctx.lineWidth = 2.5;\n ctx.lineCap = \"round\";\n ctx.lineJoin = \"round\";\n ctx.strokeStyle = color;\n ctx.fillStyle = color;\n for (const stroke of strokes) {\n const [first, ...rest] = stroke;\n if (!first) continue;\n ctx.beginPath();\n ctx.arc(first.x, first.y, 1.2, 0, 6.3);\n ctx.fill();\n ctx.beginPath();\n ctx.moveTo(first.x, first.y);\n for (const p of rest) ctx.lineTo(p.x, p.y);\n ctx.stroke();\n }\n}\n\nfunction setup() {\n const cv = canvas.value;\n if (!cv) return;\n const dpr = window.devicePixelRatio || 1;\n cv.width = Math.round((cv.clientWidth || 320) * dpr);\n cv.height = Math.round(props.height * dpr);\n const ctx = cv.getContext(\"2d\");\n if (!ctx) return;\n ctx.scale(dpr, dpr);\n paint(ctx, getComputedStyle(cv).color);\n}\nonMounted(setup);\nuseResizeObserver(canvas, setup);\n\nfunction point(e: PointerEvent): Point {\n const r = canvas.value!.getBoundingClientRect();\n return { x: e.clientX - r.left, y: e.clientY - r.top };\n}\n\nfunction down(e: PointerEvent) {\n if (props.disabled) return;\n e.preventDefault();\n try {\n canvas.value!.setPointerCapture(e.pointerId);\n } catch {}\n const p = point(e);\n current = [p];\n strokes.push(current);\n const ctx = canvas.value!.getContext(\"2d\")!;\n ctx.fillStyle = getComputedStyle(canvas.value!).color;\n ctx.beginPath();\n ctx.arc(p.x, p.y, 1.2, 0, 6.3);\n ctx.fill();\n}\n\nfunction move(e: PointerEvent) {\n if (!current) return;\n const from = current[current.length - 1]!;\n const p = point(e);\n current.push(p);\n const ctx = canvas.value!.getContext(\"2d\")!;\n ctx.strokeStyle = getComputedStyle(canvas.value!).color;\n ctx.beginPath();\n ctx.moveTo(from.x, from.y);\n ctx.lineTo(p.x, p.y);\n ctx.stroke();\n}\n\nfunction exportImage(): string {\n const cv = canvas.value!;\n const out = document.createElement(\"canvas\");\n out.width = cv.width;\n out.height = cv.height;\n const ctx = out.getContext(\"2d\")!;\n ctx.scale(cv.width / (cv.clientWidth || 320), cv.height / props.height);\n paint(ctx, \"black\");\n return out.toDataURL(\"image/png\");\n}\n\nfunction up() {\n if (!current) return;\n current = null;\n empty.value = false;\n model.value = exportImage();\n}\n\nfunction wipe() {\n strokes.length = 0;\n current = null;\n empty.value = true;\n const cv = canvas.value;\n const ctx = cv?.getContext(\"2d\");\n if (cv && ctx) {\n ctx.save();\n ctx.setTransform(1, 0, 0, 1, 0, 0);\n ctx.clearRect(0, 0, cv.width, cv.height);\n ctx.restore();\n }\n}\n\nfunction clear() {\n wipe();\n model.value = \"\";\n}\n\nwatch(model, (v) => {\n if (!v && !empty.value) wipe();\n});\n\ndefineExpose({\n clear,\n canvas,\n});\n</script>\n\n<template>\n <div class=\"e-pad\">\n <div class=\"e-pad-surface\" :data-empty=\"empty ? '' : undefined\">\n <canvas\n :id=\"id\"\n ref=\"canvas\"\n class=\"e-pad-canvas\"\n role=\"img\"\n :style=\"{ height: `${height}px`, color: 'var(--e-ink)' }\"\n :aria-label=\"t('drawSignature')\"\n :aria-describedby=\"`${id}-hint`\"\n @pointerdown=\"down\"\n @pointermove=\"move\"\n @pointerup=\"up\"\n @pointercancel=\"up\"\n />\n <span v-if=\"empty\" class=\"e-pad-placeholder\" aria-hidden=\"true\">\n <EIcon name=\"signature\" />\n {{ t(\"signEmpty\") }}\n </span>\n </div>\n <div class=\"e-pad-foot\">\n <p :id=\"`${id}-hint`\" class=\"e-field-hint\">{{ t(\"signDrawHint\") }}</p>\n <EButton variant=\"quiet\" icon=\"eraser\" :disabled=\"empty || disabled\" @click=\"clear\">\n {{ t(\"signClear\") }}\n </EButton>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.composites {\n .e-pad {\n display: grid;\n gap: var(--e-space-2);\n }\n\n .e-pad-surface {\n position: relative;\n overflow: hidden;\n border: var(--e-stroke-edge) solid var(--e-border-strong);\n border-radius: var(--e-radius-md);\n background: var(--e-surface);\n background-clip: padding-box;\n box-shadow: var(--e-well);\n }\n\n .e-pad-surface::after {\n content: \"\";\n position: absolute;\n inset-inline: var(--e-space-4);\n bottom: 36px;\n border-bottom: var(--e-stroke-edge) solid var(--e-ink);\n pointer-events: none;\n }\n\n .e-pad-canvas {\n display: block;\n width: 100%;\n touch-action: none;\n cursor: crosshair;\n }\n\n .e-pad-placeholder {\n position: absolute;\n inset: 0;\n display: grid;\n place-content: center;\n justify-items: center;\n gap: var(--e-space-2);\n color: var(--e-muted);\n font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n pointer-events: none;\n }\n\n .e-pad-foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2) var(--e-space-4);\n }\n\n .e-pad-foot .e-field-hint {\n margin: 0;\n flex: 1 1 14rem;\n }\n}\n</style>\n"],"mappings":""}
|
package/dist/components/SignaturePad/ESignaturePad.vue_vue_type_script_setup_true_lang.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ESignaturePad.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_unref","_normalizeStyle","_createVNode","EIcon","_createTextVNode","_toDisplayString","_createCommentVNode","EButton","_withCtx","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ESignaturePad_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","id","useUid","canvas","ref","empty","strokes","current","paint","color","stroke","first","rest","ctx","p","setup","cv","dpr","onMounted","useResizeObserver","point","r","down","move","from","exportImage","out","up","wipe","clear","watch","v","openBlock","createElementBlock","createElementVNode","unref","normalizeStyle","createVNode","createTextVNode","toDisplayString","createCommentVNode","withCtx"],"sources":["../../../src/components/SignaturePad/ESignaturePad.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** The height of the drawing area in pixels. */\n height?: number;\n /** Ignores drawing and disables Clear. */\n disabled?: boolean;\n /** The id of the canvas. @default generated */\n id?: string;\n }>(),\n { height: 160 },\n);\n\n/** A PNG data URL (black on transparent); empty while clear. Set `\"\"` to clear. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst id = useUid(() => props.id);\nconst canvas = ref<HTMLCanvasElement | null>(null);\nconst empty = ref(!model.value);\n\ninterface Point {\n x: number;\n y: number;\n}\nconst strokes: Point[][] = [];\nlet current: Point[] | null = null;\n\nfunction paint(ctx: CanvasRenderingContext2D, color: string) {\n ctx.lineWidth = 2.5;\n ctx.lineCap = \"round\";\n ctx.lineJoin = \"round\";\n ctx.strokeStyle = color;\n ctx.fillStyle = color;\n for (const stroke of strokes) {\n const [first, ...rest] = stroke;\n if (!first) continue;\n ctx.beginPath();\n ctx.arc(first.x, first.y, 1.2, 0, 6.3);\n ctx.fill();\n ctx.beginPath();\n ctx.moveTo(first.x, first.y);\n for (const p of rest) ctx.lineTo(p.x, p.y);\n ctx.stroke();\n }\n}\n\nfunction setup() {\n const cv = canvas.value;\n if (!cv) return;\n const dpr = window.devicePixelRatio || 1;\n cv.width = Math.round((cv.clientWidth || 320) * dpr);\n cv.height = Math.round(props.height * dpr);\n const ctx = cv.getContext(\"2d\");\n if (!ctx) return;\n ctx.scale(dpr, dpr);\n paint(ctx, getComputedStyle(cv).color);\n}\nonMounted(setup);\nuseResizeObserver(canvas, setup);\n\nfunction point(e: PointerEvent): Point {\n const r = canvas.value!.getBoundingClientRect();\n return { x: e.clientX - r.left, y: e.clientY - r.top };\n}\n\nfunction down(e: PointerEvent) {\n if (props.disabled) return;\n e.preventDefault();\n try {\n canvas.value!.setPointerCapture(e.pointerId);\n } catch {}\n const p = point(e);\n current = [p];\n strokes.push(current);\n const ctx = canvas.value!.getContext(\"2d\")!;\n ctx.fillStyle = getComputedStyle(canvas.value!).color;\n ctx.beginPath();\n ctx.arc(p.x, p.y, 1.2, 0, 6.3);\n ctx.fill();\n}\n\nfunction move(e: PointerEvent) {\n if (!current) return;\n const from = current[current.length - 1]!;\n const p = point(e);\n current.push(p);\n const ctx = canvas.value!.getContext(\"2d\")!;\n ctx.strokeStyle = getComputedStyle(canvas.value!).color;\n ctx.beginPath();\n ctx.moveTo(from.x, from.y);\n ctx.lineTo(p.x, p.y);\n ctx.stroke();\n}\n\nfunction exportImage(): string {\n const cv = canvas.value!;\n const out = document.createElement(\"canvas\");\n out.width = cv.width;\n out.height = cv.height;\n const ctx = out.getContext(\"2d\")!;\n ctx.scale(cv.width / (cv.clientWidth || 320), cv.height / props.height);\n paint(ctx, \"black\");\n return out.toDataURL(\"image/png\");\n}\n\nfunction up() {\n if (!current) return;\n current = null;\n empty.value = false;\n model.value = exportImage();\n}\n\nfunction wipe() {\n strokes.length = 0;\n current = null;\n empty.value = true;\n const cv = canvas.value;\n const ctx = cv?.getContext(\"2d\");\n if (cv && ctx) {\n ctx.save();\n ctx.setTransform(1, 0, 0, 1, 0, 0);\n ctx.clearRect(0, 0, cv.width, cv.height);\n ctx.restore();\n }\n}\n\nfunction clear() {\n wipe();\n model.value = \"\";\n}\n\nwatch(model, (v) => {\n if (!v && !empty.value) wipe();\n});\n\ndefineExpose({\n clear,\n canvas,\n});\n</script>\n\n<template>\n <div class=\"e-pad\">\n <div class=\"e-pad-surface\" :data-empty=\"empty ? '' : undefined\">\n <canvas\n :id=\"id\"\n ref=\"canvas\"\n class=\"e-pad-canvas\"\n role=\"img\"\n :style=\"{ height: `${height}px`, color: 'var(--e-ink)' }\"\n :aria-label=\"t('drawSignature')\"\n :aria-describedby=\"`${id}-hint`\"\n @pointerdown=\"down\"\n @pointermove=\"move\"\n @pointerup=\"up\"\n @pointercancel=\"up\"\n />\n <span v-if=\"empty\" class=\"e-pad-placeholder\" aria-hidden=\"true\">\n <EIcon name=\"signature\" />\n {{ t(\"signEmpty\") }}\n </span>\n </div>\n <div class=\"e-pad-foot\">\n <p :id=\"`${id}-hint`\" class=\"e-field-hint\">{{ t(\"signDrawHint\") }}</p>\n <EButton variant=\"quiet\" icon=\"eraser\" :disabled=\"empty || disabled\" @click=\"clear\">\n {{ t(\"signClear\") }}\n </EButton>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.composites {\n .e-pad {\n display: grid;\n gap: var(--e-space-2);\n }\n\n .e-pad-surface {\n position: relative;\n overflow: hidden;\n border-radius: var(--e-radius-md);\n background: var(--e-surface);\n box-shadow:\n inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong),\n var(--e-well);\n }\n\n .e-pad-surface::after {\n content: \"\";\n position: absolute;\n inset-inline: var(--e-space-4);\n bottom: 36px;\n border-bottom: var(--e-stroke-edge) solid var(--e-ink);\n pointer-events: none;\n }\n\n .e-pad-canvas {\n display: block;\n width: 100%;\n touch-action: none;\n cursor: crosshair;\n }\n\n .e-pad-placeholder {\n position: absolute;\n inset: 0;\n display: grid;\n place-content: center;\n justify-items: center;\n gap: var(--e-space-2);\n color: var(--e-muted);\n font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n pointer-events: none;\n }\n\n .e-pad-foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2) var(--e-space-4);\n }\n\n .e-pad-foot .e-field-hint {\n margin: 0;\n flex: 1 1 14rem;\n }\n}\n</style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ESignaturePad.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_unref","_normalizeStyle","_createVNode","EIcon","_createTextVNode","_toDisplayString","_createCommentVNode","EButton","_withCtx","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ESignaturePad_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","id","useUid","canvas","ref","empty","strokes","current","paint","color","stroke","first","rest","ctx","p","setup","cv","dpr","onMounted","useResizeObserver","point","r","down","move","from","exportImage","out","up","wipe","clear","watch","v","openBlock","createElementBlock","createElementVNode","unref","normalizeStyle","createVNode","createTextVNode","toDisplayString","createCommentVNode","withCtx"],"sources":["../../../src/components/SignaturePad/ESignaturePad.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** The height of the drawing area in pixels. */\n height?: number;\n /** Ignores drawing and disables Clear. */\n disabled?: boolean;\n /** The id of the canvas. @default generated */\n id?: string;\n }>(),\n { height: 160 },\n);\n\n/** A PNG data URL (black on transparent); empty while clear. Set `\"\"` to clear. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst id = useUid(() => props.id);\nconst canvas = ref<HTMLCanvasElement | null>(null);\nconst empty = ref(!model.value);\n\ninterface Point {\n x: number;\n y: number;\n}\nconst strokes: Point[][] = [];\nlet current: Point[] | null = null;\n\nfunction paint(ctx: CanvasRenderingContext2D, color: string) {\n ctx.lineWidth = 2.5;\n ctx.lineCap = \"round\";\n ctx.lineJoin = \"round\";\n ctx.strokeStyle = color;\n ctx.fillStyle = color;\n for (const stroke of strokes) {\n const [first, ...rest] = stroke;\n if (!first) continue;\n ctx.beginPath();\n ctx.arc(first.x, first.y, 1.2, 0, 6.3);\n ctx.fill();\n ctx.beginPath();\n ctx.moveTo(first.x, first.y);\n for (const p of rest) ctx.lineTo(p.x, p.y);\n ctx.stroke();\n }\n}\n\nfunction setup() {\n const cv = canvas.value;\n if (!cv) return;\n const dpr = window.devicePixelRatio || 1;\n cv.width = Math.round((cv.clientWidth || 320) * dpr);\n cv.height = Math.round(props.height * dpr);\n const ctx = cv.getContext(\"2d\");\n if (!ctx) return;\n ctx.scale(dpr, dpr);\n paint(ctx, getComputedStyle(cv).color);\n}\nonMounted(setup);\nuseResizeObserver(canvas, setup);\n\nfunction point(e: PointerEvent): Point {\n const r = canvas.value!.getBoundingClientRect();\n return { x: e.clientX - r.left, y: e.clientY - r.top };\n}\n\nfunction down(e: PointerEvent) {\n if (props.disabled) return;\n e.preventDefault();\n try {\n canvas.value!.setPointerCapture(e.pointerId);\n } catch {}\n const p = point(e);\n current = [p];\n strokes.push(current);\n const ctx = canvas.value!.getContext(\"2d\")!;\n ctx.fillStyle = getComputedStyle(canvas.value!).color;\n ctx.beginPath();\n ctx.arc(p.x, p.y, 1.2, 0, 6.3);\n ctx.fill();\n}\n\nfunction move(e: PointerEvent) {\n if (!current) return;\n const from = current[current.length - 1]!;\n const p = point(e);\n current.push(p);\n const ctx = canvas.value!.getContext(\"2d\")!;\n ctx.strokeStyle = getComputedStyle(canvas.value!).color;\n ctx.beginPath();\n ctx.moveTo(from.x, from.y);\n ctx.lineTo(p.x, p.y);\n ctx.stroke();\n}\n\nfunction exportImage(): string {\n const cv = canvas.value!;\n const out = document.createElement(\"canvas\");\n out.width = cv.width;\n out.height = cv.height;\n const ctx = out.getContext(\"2d\")!;\n ctx.scale(cv.width / (cv.clientWidth || 320), cv.height / props.height);\n paint(ctx, \"black\");\n return out.toDataURL(\"image/png\");\n}\n\nfunction up() {\n if (!current) return;\n current = null;\n empty.value = false;\n model.value = exportImage();\n}\n\nfunction wipe() {\n strokes.length = 0;\n current = null;\n empty.value = true;\n const cv = canvas.value;\n const ctx = cv?.getContext(\"2d\");\n if (cv && ctx) {\n ctx.save();\n ctx.setTransform(1, 0, 0, 1, 0, 0);\n ctx.clearRect(0, 0, cv.width, cv.height);\n ctx.restore();\n }\n}\n\nfunction clear() {\n wipe();\n model.value = \"\";\n}\n\nwatch(model, (v) => {\n if (!v && !empty.value) wipe();\n});\n\ndefineExpose({\n clear,\n canvas,\n});\n</script>\n\n<template>\n <div class=\"e-pad\">\n <div class=\"e-pad-surface\" :data-empty=\"empty ? '' : undefined\">\n <canvas\n :id=\"id\"\n ref=\"canvas\"\n class=\"e-pad-canvas\"\n role=\"img\"\n :style=\"{ height: `${height}px`, color: 'var(--e-ink)' }\"\n :aria-label=\"t('drawSignature')\"\n :aria-describedby=\"`${id}-hint`\"\n @pointerdown=\"down\"\n @pointermove=\"move\"\n @pointerup=\"up\"\n @pointercancel=\"up\"\n />\n <span v-if=\"empty\" class=\"e-pad-placeholder\" aria-hidden=\"true\">\n <EIcon name=\"signature\" />\n {{ t(\"signEmpty\") }}\n </span>\n </div>\n <div class=\"e-pad-foot\">\n <p :id=\"`${id}-hint`\" class=\"e-field-hint\">{{ t(\"signDrawHint\") }}</p>\n <EButton variant=\"quiet\" icon=\"eraser\" :disabled=\"empty || disabled\" @click=\"clear\">\n {{ t(\"signClear\") }}\n </EButton>\n </div>\n </div>\n</template>\n\n<style>\n@layer e.composites {\n .e-pad {\n display: grid;\n gap: var(--e-space-2);\n }\n\n .e-pad-surface {\n position: relative;\n overflow: hidden;\n border: var(--e-stroke-edge) solid var(--e-border-strong);\n border-radius: var(--e-radius-md);\n background: var(--e-surface);\n background-clip: padding-box;\n box-shadow: var(--e-well);\n }\n\n .e-pad-surface::after {\n content: \"\";\n position: absolute;\n inset-inline: var(--e-space-4);\n bottom: 36px;\n border-bottom: var(--e-stroke-edge) solid var(--e-ink);\n pointer-events: none;\n }\n\n .e-pad-canvas {\n display: block;\n width: 100%;\n touch-action: none;\n cursor: crosshair;\n }\n\n .e-pad-placeholder {\n position: absolute;\n inset: 0;\n display: grid;\n place-content: center;\n justify-items: center;\n gap: var(--e-space-2);\n color: var(--e-muted);\n font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n pointer-events: none;\n }\n\n .e-pad-foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2) var(--e-space-4);\n }\n\n .e-pad-foot .e-field-hint {\n margin: 0;\n flex: 1 1 14rem;\n }\n}\n</style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EStepper.js","names":["_sfc_main","EStepper_vue_vue_type_script_setup_true_lang_default","EStepper_default"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n /** The name of the step. */\n label: string;\n /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n /** The steps in order: `{ label, state }`; `state` is `done`, `current` or `upcoming` (`todo` is an alias). Exactly one is normally `current`. Keep labels to one or two words. */\n steps: Step[];\n /** The list's accessible name. @default \"Progress\" */\n label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n <li\n v-for=\"(step, i) in steps\"\n :key=\"i\"\n class=\"e-step\"\n :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n >\n <span class=\"e-step-dot\">\n <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n <template v-else>{{ i + 1 }}</template>\n </span>\n <span class=\"e-step-label\">\n {{ step.label }}\n <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n </span>\n </li>\n </ol>\n</template>\n\n<style>\n@layer e.page {\n .e-steps {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n gap: var(--e-space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n counter-reset: s;\n }\n\n .e-step {\n --e-dot: 28px;\n\n display: grid;\n justify-items: center;\n align-content: start;\n gap: var(--e-space-2);\n position: relative;\n text-align: center;\n min-width: 0;\n }\n\n .e-step::before {\n content: \"\";\n position: absolute;\n top: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n inset-inline-end: 50%;\n width: 100%;\n border-top: var(--e-stroke-focus) solid var(--e-border-strong);\n z-index: 0;\n }\n\n .e-step:first-child::before {\n display: none;\n }\n\n .e-step[data-state=\"done\"]::before {\n border-top-color: var(--e-primary);\n }\n\n .e-step[data-state=\"current\"]::before {\n border-top-color: var(--e-primary);\n }\n\n .e-step-dot {\n position: relative;\n z-index: var(--e-z-raised);\n display: grid;\n place-items: center;\n width: var(--e-dot);\n height: var(--e-dot);\n border-radius: 50%;\n outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n outline-offset: calc(-1 * var(--e-stroke-edge));\n background: var(--e-surface);\n color: var(--e-muted);\n font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n }\n\n .e-step[data-state=\"done\"] .e-step-dot {\n outline: 0;\n background: var(--e-primary);\n color: var(--e-on-primary);\n }\n\n .e-step[data-state=\"current\"] .e-step-dot {\n outline: 0;\n
|
|
1
|
+
{"version":3,"file":"EStepper.js","names":["_sfc_main","EStepper_vue_vue_type_script_setup_true_lang_default","EStepper_default"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n /** The name of the step. */\n label: string;\n /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n /** The steps in order: `{ label, state }`; `state` is `done`, `current` or `upcoming` (`todo` is an alias). Exactly one is normally `current`. Keep labels to one or two words. */\n steps: Step[];\n /** The list's accessible name. @default \"Progress\" */\n label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n <li\n v-for=\"(step, i) in steps\"\n :key=\"i\"\n class=\"e-step\"\n :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n >\n <span class=\"e-step-dot\">\n <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n <template v-else>{{ i + 1 }}</template>\n </span>\n <span class=\"e-step-label\">\n {{ step.label }}\n <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n </span>\n </li>\n </ol>\n</template>\n\n<style>\n@layer e.page {\n .e-steps {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n gap: var(--e-space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n counter-reset: s;\n }\n\n .e-step {\n --e-dot: 28px;\n\n display: grid;\n justify-items: center;\n align-content: start;\n gap: var(--e-space-2);\n position: relative;\n text-align: center;\n min-width: 0;\n }\n\n .e-step::before {\n content: \"\";\n position: absolute;\n top: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n inset-inline-end: 50%;\n width: 100%;\n border-top: var(--e-stroke-focus) solid var(--e-border-strong);\n z-index: 0;\n }\n\n .e-step:first-child::before {\n display: none;\n }\n\n .e-step[data-state=\"done\"]::before {\n border-top-color: var(--e-primary);\n }\n\n .e-step[data-state=\"current\"]::before {\n border-top-color: var(--e-primary);\n }\n\n .e-step-dot {\n position: relative;\n z-index: var(--e-z-raised);\n display: grid;\n place-items: center;\n width: var(--e-dot);\n height: var(--e-dot);\n box-sizing: border-box;\n border: var(--e-stroke-edge) solid transparent;\n border-radius: 50%;\n outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n outline-offset: calc(-1 * var(--e-stroke-edge));\n background: var(--e-surface);\n background-clip: padding-box;\n color: var(--e-muted);\n font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n }\n\n .e-step[data-state=\"done\"] .e-step-dot {\n outline: 0;\n border-color: var(--e-primary);\n background: var(--e-primary);\n color: var(--e-on-primary);\n }\n\n .e-step[data-state=\"current\"] .e-step-dot {\n outline: 0;\n border: var(--e-stroke-focus) solid var(--e-primary);\n color: var(--e-primary);\n background: var(--e-surface);\n background-clip: padding-box;\n }\n\n .e-step-label {\n font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);\n color: var(--e-muted);\n overflow-wrap: anywhere;\n }\n\n .e-step[data-state=\"current\"] .e-step-label {\n color: var(--e-ink);\n font-weight: 600;\n }\n\n .e-step[data-state=\"done\"] .e-step-label {\n color: var(--e-ink);\n }\n\n /* stylelint-disable declaration-block-no-redundant-longhand-properties -- the longhands stay separate */\n @media (max-width: 32rem) {\n .e-steps {\n grid-auto-flow: row;\n gap: var(--e-space-3);\n }\n\n .e-step {\n grid-template-columns: auto 1fr;\n justify-items: start;\n align-items: center;\n text-align: start;\n }\n\n .e-step::before {\n display: block;\n top: calc(-1 * var(--e-space-3));\n inset-inline-end: auto;\n inset-inline-start: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n width: 0;\n height: var(--e-space-3);\n border-top: 0;\n border-inline-start: var(--e-stroke-focus) solid var(--e-border-strong);\n }\n\n .e-step:first-child::before {\n display: none;\n }\n\n .e-step[data-state=\"done\"]::before {\n border-inline-start-color: var(--e-primary);\n }\n\n .e-step[data-state=\"current\"]::before {\n border-inline-start-color: var(--e-primary);\n }\n }\n\n /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n\n @media (forced-colors: active) {\n .e-step[data-state=\"done\"] .e-step-dot {\n forced-color-adjust: none;\n background: Highlight;\n color: HighlightText;\n }\n }\n}\n</style>\n"],"mappings":""}
|