@eos-ui/vue 0.1.1 → 0.2.0

package/dist/components/NavList/ENavList.vue.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'vue';
-import { LinkItem, LinkSection } from '../Tabs/LinkNav.vue.js';
+import { LinkItem, LinkSection } from './LinkNav.vue.js';
 import { IconProp } from '../../icons/types.js';
 export interface NavItem extends LinkItem {
     /** An icon before the label. */
@@ -9,22 +9,20 @@ export interface NavItem extends LinkItem {
 }
 export type NavSection = LinkSection<NavItem>;
 type __VLS_Props = {
-    /** The destinations, in order. */
+    /** The destinations, in order: `{ label, href?, to?, icon?, count?, current? }`. With no `href` or `to` a link goes to `#`. Set `current` yourself. */
     items?: NavItem[];
-    /** Destinations in labelled groups, instead of `items`. Give a heading only when there is more than one section. */
+    /** Destinations in labelled groups, instead of `items`: `{ label?, items }`. Give a label only when there is more than one section. */
     sections?: NavSection[];
-    /** Shorter rows and smaller words, for a long list such as the pages of a documentation site. */
-    dense?: boolean;
-    /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header: muted words, a bar under each, a heavier bar under the current page. */
+    /** `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. */
     orientation?: "vertical" | "horizontal";
-    /** The landmark's name, so a page with two navigations tells them apart. Defaults to "Main". */
+    /** The landmark's name; give each navigation on a page its own. @default "Main" */
     label?: string;
-    /** What renders each link: `"a"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). */
+    /** 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`. */
     linkComponent?: string | Component;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    orientation: "vertical" | "horizontal";
     linkComponent: string | Component;
+    orientation: "vertical" | "horizontal";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/NavList/ENavList.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 /* empty css                */
 import e from "../Icon/EIcon.js";
-import t from "../Tabs/LinkNav.js";
+import t from "./LinkNav.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, toDisplayString as u, withCtx as d } from "vue";
 //#region src/components/NavList/ENavList.vue?vue&type=script&setup=true&lang.ts
 var f = { class: "e-nav-label" }, p = {
@@ -11,7 +11,6 @@ var f = { class: "e-nav-label" }, p = {
 	props: {
 		items: {},
 		sections: {},
-		dense: { type: Boolean },
 		orientation: { default: "vertical" },
 		label: {},
 		linkComponent: { default: "a" }
@@ -19,7 +18,7 @@ var f = { class: "e-nav-label" }, p = {
 	setup(s) {
 		let m = s, h = n(() => m.sections ?? [{ items: m.items ?? [] }]);
 		return (n, m) => (l(), r(t, {
-			class: c(["e-nav", [s.dense && "e-nav--dense", s.orientation === "horizontal" && "e-nav--horizontal"]]),
+			class: c(["e-nav", s.orientation === "horizontal" && "e-nav--horizontal"]),
 			groups: h.value,
 			label: s.label,
 			"link-component": s.linkComponent,

package/dist/components/NavList/ENavList.vue_vue_type_script_setup_true_lang.js.map

@@ -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 \"../Tabs/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. */\n    items?: NavItem[];\n    /** Destinations in labelled groups, instead of `items`. Give a heading only when there is more than one section. */\n    sections?: NavSection[];\n    /** Shorter rows and smaller words, for a long list such as the pages of a documentation site. */\n    dense?: boolean;\n    /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header: muted words, a bar under each, a heavier bar under the current page. */\n    orientation?: \"vertical\" | \"horizontal\";\n    /** The landmark's name, so a page with two navigations tells them apart. Defaults to \"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). */\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=\"[dense && 'e-nav--dense', 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: 2px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\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    padding: 0 var(--e-space-3);\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: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-nav-item:hover {\n    background: var(--e-surface-tint);\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:not(.e-nav--dense, .e-nav--horizontal) .e-nav-item {\n    box-sizing: border-box;\n    border: var(--e-stroke-edge) solid transparent;\n  }\n\n  .e-nav-item[aria-current=\"page\"] {\n    background: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    font-weight: 600;\n  }\n\n  .e-nav:not(.e-nav--dense, .e-nav--horizontal) .e-nav-item[aria-current=\"page\"] {\n    border-color: var(--e-border-strong);\n    border-top-width: calc(var(--e-stroke-edge) + var(--e-depth));\n  }\n\n  .e-nav-label {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-nav--dense .e-nav-item {\n    position: relative;\n    height: 2.25rem;\n    gap: var(--e-space-2);\n    border-radius: 0;\n    box-shadow: inset 2px 0 0 transparent;\n    color: var(--e-muted);\n    font-size: var(--e-text-sm);\n  }\n\n  .e-nav--dense .e-nav-item::after {\n    content: \"\";\n    position: absolute;\n    inset-block: -4px;\n    inset-inline: 0;\n  }\n\n  .e-nav--dense .e-nav-item:hover {\n    background: transparent;\n    box-shadow: inset 2px 0 0 var(--e-border-strong);\n    color: var(--e-ink);\n  }\n\n  .e-nav--dense .e-nav-item[aria-current=\"page\"] {\n    background: var(--e-surface-tint);\n    box-shadow: inset 3px 0 0 var(--e-primary);\n    color: var(--e-primary);\n    font-weight: 600;\n  }\n\n  .e-nav--dense .e-nav-heading {\n    margin-top: var(--e-space-4);\n    padding-top: var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-nav--dense > .e-nav-heading:first-child {\n    padding-top: 0;\n    border-top: 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  .e-nav--horizontal ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-2);\n  }\n\n  .e-nav--horizontal .e-nav-heading {\n    margin: 0;\n    padding-inline: 0;\n  }\n\n  .e-nav--horizontal .e-nav-item {\n    height: 2.5rem;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: inset 0 -2px 0 transparent;\n    color: var(--e-muted);\n    font-size: var(--e-text-sm);\n  }\n\n  .e-nav--horizontal .e-nav-item:hover {\n    background: transparent;\n    box-shadow: inset 0 -2px 0 var(--e-border-strong);\n    color: var(--e-ink);\n  }\n\n  .e-nav--horizontal .e-nav-item[aria-current=\"page\"] {\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 -3px 0 var(--e-primary);\n    color: var(--e-primary);\n    font-weight: 600;\n  }\n\n  .e-nav--horizontal.e-nav--dense .e-nav-item {\n    height: 2.25rem;\n  }\n\n  .e-nav-count {\n    min-width: 22px;\n    padding: 0 6px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\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--horizontal .e-nav-item[aria-current=\"page\"] {\n      border-block-end: 3px solid Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAgBA,IAAMe,IAAQC,GAkBRC,IAASC,QAA6BH,EAAM,YAAY,CAAC,EAAE,OAAOA,EAAM,SAAS,CAAC,EAAE,CAAC,CAAC;E,kBAI1Ff,EAAA,GAAAC,EAcUC,GAAA;GAbR,OAAKC,EAAA,CAAC,SAAO,CACJa,EAAA,SAAK,gBAAoBA,EAAA,gBAAW,gBAAA,mBAAA,CAAA,CAAA;GAC5C,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"}
+{"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);\n    border: var(--e-stroke-edge) solid transparent;\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: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-nav-item:hover {\n    background: 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-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    font-weight: 600;\n    border-color: var(--e-primary);\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));\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    outline: var(--e-stroke-hair) solid var(--e-primary);\n    outline-offset: calc(-1 * var(--e-stroke-hair));\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"}

package/dist/components/{Tabs → NavList}/LinkNav.js

@@ -1,6 +1,6 @@
 import e, { linkAttrs as t } from "./LinkNav.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                        */
-//#region src/components/Tabs/LinkNav.vue
+//#region src/components/NavList/LinkNav.vue
 var n = e;
 //#endregion
 export { n as default, t as linkAttrs };

package/dist/components/NavList/LinkNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkNav.js","names":["_sfc_main","LinkNav_vue_vue_type_script_setup_true_lang_default","LinkNav_default","linkAttrs"],"sources":["../../../src/components/NavList/LinkNav.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface LinkItem {\n  /** The words for this destination. */\n  label: string;\n  /** Where it goes. Defaults to `#`. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n  /** The page the person is on. */\n  current?: boolean;\n}\n\nexport interface LinkSection<T extends LinkItem = LinkItem> {\n  /** A small heading over the section. Leave it out for a section that needs none. */\n  label?: string;\n  /** The destinations of the section, in order. */\n  items: T[];\n}\n\nexport const linkAttrs = (item: LinkItem) => ({\n  ...(item.to !== undefined ? { to: item.to } : { href: item.href ?? \"#\" }),\n  ...(item.current && { \"aria-current\": \"page\" }),\n});\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends LinkItem\">\nimport type { Component } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  groups: LinkSection<T>[];\n  label?: string;\n  linkComponent: string | Component;\n  itemClass: string;\n  headingClass: string;\n  listClass?: string;\n}>();\n\ndefineSlots<{\n  item(props: { item: T }): unknown;\n}>();\n\nconst t = useMessages();\nconst uid = useUid();\n</script>\n\n<template>\n  <nav :aria-label=\"label || t('mainNav')\">\n    <template v-for=\"(group, g) in groups\" :key=\"g\">\n      <p v-if=\"group.label\" :id=\"`${uid}-${g}`\" :class=\"headingClass\">{{ group.label }}</p>\n      <ul :class=\"listClass\" :aria-labelledby=\"group.label ? `${uid}-${g}` : undefined\">\n        <li v-for=\"(item, i) in group.items\" :key=\"i\">\n          <component :is=\"linkComponent\" :class=\"itemClass\" v-bind=\"linkAttrs(item)\">\n            <slot name=\"item\" :item=\"item\" />\n          </component>\n        </li>\n      </ul>\n    </template>\n  </nav>\n</template>\n\n<style>\n@layer e.containers {\n  .e-nav-heading {\n    margin: var(--e-space-6) 0 var(--e-space-2);\n    padding-inline: var(--e-space-3);\n    font: 600 var(--e-text-sm) / 1.2 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-ink);\n  }\n\n  .e-nav > :first-child {\n    margin-top: 0;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/{Tabs → NavList}/LinkNav.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@
 import { useMessages as e } from "../../config.js";
 import { useUid as t } from "../../composables/useUid.js";
 import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, normalizeClass as l, openBlock as u, renderList as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
-//#region src/components/Tabs/LinkNav.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/NavList/LinkNav.vue?vue&type=script&setup=true&lang.ts
 var _ = ["aria-label"], v = ["id"], y = ["aria-labelledby"], b = (e) => ({
 	...e.to === void 0 ? { href: e.href ?? "#" } : { to: e.to },
 	...e.current && { "aria-current": "page" }

package/dist/components/NavList/LinkNav.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkNav.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_normalizeClass","_toDisplayString","_createCommentVNode","_createElementVNode","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_renderSlot","_hoisted_1","_hoisted_2","_hoisted_3","linkAttrs","item","LinkNav_vue_vue_type_script_setup_true_lang_default","t","useMessages","uid","useUid","openBlock","createElementBlock","__props","unref","Fragment","renderList","g","group","normalizeClass","toDisplayString","createCommentVNode","createElementVNode","i","createBlock","resolveDynamicComponent","mergeProps","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/NavList/LinkNav.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface LinkItem {\n  /** The words for this destination. */\n  label: string;\n  /** Where it goes. Defaults to `#`. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n  /** The page the person is on. */\n  current?: boolean;\n}\n\nexport interface LinkSection<T extends LinkItem = LinkItem> {\n  /** A small heading over the section. Leave it out for a section that needs none. */\n  label?: string;\n  /** The destinations of the section, in order. */\n  items: T[];\n}\n\nexport const linkAttrs = (item: LinkItem) => ({\n  ...(item.to !== undefined ? { to: item.to } : { href: item.href ?? \"#\" }),\n  ...(item.current && { \"aria-current\": \"page\" }),\n});\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends LinkItem\">\nimport type { Component } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  groups: LinkSection<T>[];\n  label?: string;\n  linkComponent: string | Component;\n  itemClass: string;\n  headingClass: string;\n  listClass?: string;\n}>();\n\ndefineSlots<{\n  item(props: { item: T }): unknown;\n}>();\n\nconst t = useMessages();\nconst uid = useUid();\n</script>\n\n<template>\n  <nav :aria-label=\"label || t('mainNav')\">\n    <template v-for=\"(group, g) in groups\" :key=\"g\">\n      <p v-if=\"group.label\" :id=\"`${uid}-${g}`\" :class=\"headingClass\">{{ group.label }}</p>\n      <ul :class=\"listClass\" :aria-labelledby=\"group.label ? `${uid}-${g}` : undefined\">\n        <li v-for=\"(item, i) in group.items\" :key=\"i\">\n          <component :is=\"linkComponent\" :class=\"itemClass\" v-bind=\"linkAttrs(item)\">\n            <slot name=\"item\" :item=\"item\" />\n          </component>\n        </li>\n      </ul>\n    </template>\n  </nav>\n</template>\n\n<style>\n@layer e.containers {\n  .e-nav-heading {\n    margin: var(--e-space-6) 0 var(--e-space-2);\n    padding-inline: var(--e-space-3);\n    font: 600 var(--e-text-sm) / 1.2 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-ink);\n  }\n\n  .e-nav > :first-child {\n    margin-top: 0;\n  }\n}\n</style>\n"],"mappings":";;;;;A,6DAmBaiB,KAAa,OAAoB;CAC5C,GAAIC,EAAK,OAAO,KAAA,IAA8B,EAAE,MAAMA,EAAK,QAAQ,IAAI,IAA3C,EAAE,IAAIA,EAAK,GAAG;CAC1C,GAAIA,EAAK,WAAW,EAAE,gBAAgB,OAAO;AAC/C,I;;;;;;;;;;;EAsBA,IAAME,IAAIC,EAAY,GAChBC,IAAMC,EAAO;E,kBAIjBvB,EAAA,GAAAC,EAWM,OAAA,EAXA,cAAYyB,EAAA,SAASxB,EAAAkB,CAAA,CAAC,CAAA,SAAA,E,KAC1BpB,EAAA,EAAA,GAAAC,EASWE,GAAA,MAAAC,EAToBsB,EAAA,SAAb,GAAO,OAAoB1B,EAAA,GAAAC,EAAAE,GAAA,EAAA,KAAA2B,EAAC,GAAA,CACnCC,EAAM,SAAf/B,EAAA,GAAAC,EAAqF,KAAA;;GAA9D,IAAE,GAAKC,EAAAoB,CAAA,EAAG,GAAIQ;GAAM,OAAKzB,EAAEqB,EAAA,YAAY;EAAK,GAAApB,EAAAyB,EAAM,KAAK,GAAA,IAAAhB,CAAA,K,WAC9EP,EAMK,MAAA;GANA,OAAKH,EAAEqB,EAAA,SAAS;GAAG,mBAAiBK,EAAM,QAAK,GAAM7B,EAAAoB,CAAA,EAAG,GAAIQ,MAAM,KAAA;E,KACrE9B,EAAA,EAAA,GAAAC,EAIKE,GAAA,MAAAC,EAJmB2B,EAAM,QAAlB,GAAM,OAAlB/B,EAAA,GAAAC,EAIK,MAAA,EAJiC,KAAKmC,EAAC,GAAA,EAC1CpC,EAAA,GAAAS,EAEYC,EAFIgB,EAAA,aAAa,GAA7Bf,EAEY,EAFoB,OAAOe,EAAA,UAAS,GAAA,EAAA,SAAA,GAAA,GAAUT,EAAUC,CAAI,CAAA,GAAA;GACtE,SAAAN,QAAiC,CAAjCC,EAAiC6B,EAAA,QAAA,QAAA,EAAR,QAAI,CAAA,C"}

package/dist/components/Notice/ENotice.js.map

@@ -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. */\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    border: var(--e-stroke-edge) solid var(--e-tone);\n    border-top-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-bg);\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: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"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    border: var(--e-stroke-edge) solid var(--e-tone);\n\n    --e-bc: var(--e-tone);\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-left-width: calc(var(--e-stroke-edge) + 2 * var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-bg);\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":""}

package/dist/components/Notice/ENotice.vue.d.ts

@@ -7,7 +7,7 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     tone?: NoticeTone;
     /** What happened, in one short line. */
     title: string;
-    /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading. */
+    /** 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. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /** The id of the title element, for a parent that labels itself by it. */
     titleId?: string;
@@ -24,7 +24,7 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     tone?: NoticeTone;
     /** What happened, in one short line. */
     title: string;
-    /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading. */
+    /** 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. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /** The id of the title element, for a parent that labels itself by it. */
     titleId?: string;

package/dist/components/Notice/ENotice.vue_vue_type_script_setup_true_lang.js.map

@@ -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. */\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    border: var(--e-stroke-edge) solid var(--e-tone);\n    border-top-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-bg);\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: 1px 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"}
+{"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    border: var(--e-stroke-edge) solid var(--e-tone);\n\n    --e-bc: var(--e-tone);\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-left-width: calc(var(--e-stroke-edge) + 2 * var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-bg);\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"}

package/dist/components/NumberField/ENumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ENumberField.js","names":["_sfc_main","ENumberField_vue_vue_type_script_setup_true_lang_default","ENumberField_default"],"sources":["../../../src/components/NumberField/ENumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** The lowest value. The value clamps to it and the decrease button disables there. */\n  min?: number;\n  /** The highest value. The value clamps to it and the increase button disables there. */\n  max?: number;\n  /** How far a button or arrow key moves the value. Decimals shown follow the step. */\n  step?: number;\n  /** A unit before the value. */\n  prefix?: string;\n  /** A unit after the value, such as visits. */\n  suffix?: string;\n  /** The name submitted with a form (the number, or empty). */\n  name?: string;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the field invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<number | null>({ default: null });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\n\nconst stepBy = computed(() => props.step || 1);\nconst decimals = computed(() => (String(stepBy.value).split(\".\")[1] || \"\").length);\nconst format = (n: number | null | undefined) => (n == null ? \"\" : Number(n).toFixed(decimals.value));\nconst text = ref(format(model.value));\nwatch(model, (v) => (text.value = format(v)));\n\nconst num = computed(() => (model.value == null ? undefined : Number(model.value)));\n\nfunction clamp(n: number): number {\n  if (props.min != null && n < props.min) n = props.min;\n  if (props.max != null && n > props.max) n = props.max;\n  return n;\n}\nfunction set(n: number) {\n  n = clamp(n);\n  model.value = n;\n  text.value = n.toFixed(decimals.value);\n}\nfunction bump(dir: 1 | -1, mult = 1) {\n  const base = num.value == null ? (props.min != null ? props.min - stepBy.value * (dir > 0 ? 1 : 0) : 0) : num.value;\n  set(Math.round((base + dir * stepBy.value * mult) * 1e6) / 1e6);\n}\nfunction commit() {\n  const n = parseFloat(text.value.replace(/,/g, \"\"));\n  if (isNaN(n)) {\n    if (text.value === \"\") model.value = null;\n    else text.value = format(model.value);\n  } else set(n);\n}\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"ArrowUp\") {\n    e.preventDefault();\n    bump(1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"ArrowDown\") {\n    e.preventDefault();\n    bump(-1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"Enter\") commit();\n}\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: [\"e-input\", \"e-numinput\", !props.prefix && \"e-numfield-first\", !props.suffix && \"e-numfield-last\"],\n    style: { \"--e-chars\": Math.max(text.value.length, 1) },\n    type: \"text\" as const,\n    inputmode: \"decimal\" as const,\n    role: \"spinbutton\",\n    autocomplete: \"off\",\n    value: text.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-valuenow\": num.value,\n    \"aria-valuemin\": props.min,\n    \"aria-valuemax\": props.max,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap e-numfield\"\n        :class=\"{ 'e-numfield--affix': prefix || suffix }\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('decrease')\"\n          :disabled=\"disabled || (min != null && num != null && num <= min)\"\n          @click=\"bump(-1)\"\n        >\n          <EIcon name=\"minus\" bold />\n        </button>\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre e-numfield-first\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input\n          ref=\"input\"\n          v-bind=\"inputBind(field)\"\n          @input=\"text = ($event.target as HTMLInputElement).value\"\n          @blur=\"commit\"\n          @keydown=\"onKeydown\"\n        />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post e-numfield-last\" aria-hidden=\"true\">{{ suffix }}</span>\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('increase')\"\n          :disabled=\"disabled || (max != null && num != null && num >= max)\"\n          @click=\"bump(1)\"\n        >\n          <EIcon name=\"plus\" bold />\n        </button>\n      </div>\n      <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"num == null ? '' : num\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-numfield {\n    align-items: stretch;\n    container-type: inline-size;\n  }\n\n  .e-numfield .e-numinput {\n    text-align: center;\n    font: 500 var(--e-text-md)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    height: auto;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-numbtn {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-control-height);\n    padding: 0;\n    border: 0;\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-numbtn:first-child {\n    border-inline-end: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:last-child {\n    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:hover:not(:disabled) {\n    background: var(--e-wash-hover);\n  }\n\n  .e-numbtn:active:not(:disabled) {\n    background: var(--e-wash-press);\n  }\n\n  .e-numbtn:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: -3px;\n  }\n\n  .e-numbtn:disabled {\n    color: var(--e-muted);\n    cursor: not-allowed;\n    background: transparent;\n  }\n\n  .e-numfield--affix .e-numinput {\n    flex: none;\n    width: calc(var(--e-chars) * 1ch);\n    padding-inline: 0;\n    text-align: start;\n  }\n\n  .e-numfield--affix .e-affix--pre {\n    padding-inline: 0 var(--e-space-1);\n  }\n\n  .e-numfield--affix .e-affix--post {\n    padding-inline: var(--e-space-1) 0;\n  }\n\n  .e-numfield--affix .e-numfield-first {\n    margin-inline-start: auto;\n  }\n\n  .e-numfield--affix .e-numfield-last {\n    margin-inline-end: auto;\n  }\n\n  @container (max-width: 10rem) {\n    .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield .e-numinput {\n      text-align: start;\n      padding-inline: var(--e-space-3);\n    }\n  }\n\n  @container (max-width: 13rem) {\n    .e-numfield--affix .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield--affix .e-numfield-first {\n      margin-inline-start: var(--e-space-3);\n    }\n\n    .e-numfield--affix .e-numfield-last {\n      margin-inline-end: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-numbtn {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ENumberField.js","names":["_sfc_main","ENumberField_vue_vue_type_script_setup_true_lang_default","ENumberField_default"],"sources":["../../../src/components/NumberField/ENumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** The lowest value. The value clamps to it and the decrease button disables there. */\n  min?: number;\n  /** The highest value. The value clamps to it and the increase button disables there. */\n  max?: number;\n  /** The amount one step of the buttons and arrow keys changes the value. Decimals shown follow the step (`0.25` shows two). @default 1 */\n  step?: number;\n  /** A unit before the value. */\n  prefix?: string;\n  /** A unit after the value, such as visits. */\n  suffix?: string;\n  /** The name submitted with a form (the number, or empty). */\n  name?: string;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the field invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the input and both buttons. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The number; `null` when empty. */\nconst model = defineModel<number | null>({ default: null });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\n\nconst stepBy = computed(() => props.step || 1);\nconst decimals = computed(() => (String(stepBy.value).split(\".\")[1] || \"\").length);\nconst format = (n: number | null | undefined) => (n == null ? \"\" : Number(n).toFixed(decimals.value));\nconst text = ref(format(model.value));\nwatch(model, (v) => (text.value = format(v)));\n\nconst num = computed(() => (model.value == null ? undefined : Number(model.value)));\n\nfunction clamp(n: number): number {\n  if (props.min != null && n < props.min) n = props.min;\n  if (props.max != null && n > props.max) n = props.max;\n  return n;\n}\nfunction set(n: number) {\n  n = clamp(n);\n  model.value = n;\n  text.value = n.toFixed(decimals.value);\n}\nfunction bump(dir: 1 | -1, mult = 1) {\n  const base = num.value == null ? (props.min != null ? props.min - stepBy.value * (dir > 0 ? 1 : 0) : 0) : num.value;\n  set(Math.round((base + dir * stepBy.value * mult) * 1e6) / 1e6);\n}\nfunction commit() {\n  const n = parseFloat(text.value.replace(/,/g, \"\"));\n  if (isNaN(n)) {\n    if (text.value === \"\") model.value = null;\n    else text.value = format(model.value);\n  } else set(n);\n}\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"ArrowUp\") {\n    e.preventDefault();\n    bump(1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"ArrowDown\") {\n    e.preventDefault();\n    bump(-1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"Enter\") commit();\n}\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: [\"e-input\", \"e-numinput\", !props.prefix && \"e-numfield-first\", !props.suffix && \"e-numfield-last\"],\n    style: { \"--e-chars\": Math.max(text.value.length, 1) },\n    type: \"text\" as const,\n    inputmode: \"decimal\" as const,\n    role: \"spinbutton\",\n    autocomplete: \"off\",\n    value: text.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-valuenow\": num.value,\n    \"aria-valuemin\": props.min,\n    \"aria-valuemax\": props.max,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap e-numfield\"\n        :class=\"{ 'e-numfield--affix': prefix || suffix }\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('decrease')\"\n          :disabled=\"disabled || (min != null && num != null && num <= min)\"\n          @click=\"bump(-1)\"\n        >\n          <EIcon name=\"minus\" bold />\n        </button>\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre e-numfield-first\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input\n          ref=\"input\"\n          v-bind=\"inputBind(field)\"\n          @input=\"text = ($event.target as HTMLInputElement).value\"\n          @blur=\"commit\"\n          @keydown=\"onKeydown\"\n        />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post e-numfield-last\" aria-hidden=\"true\">{{ suffix }}</span>\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('increase')\"\n          :disabled=\"disabled || (max != null && num != null && num >= max)\"\n          @click=\"bump(1)\"\n        >\n          <EIcon name=\"plus\" bold />\n        </button>\n      </div>\n      <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"num == null ? '' : num\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-numfield {\n    align-items: stretch;\n    container-type: inline-size;\n  }\n\n  .e-numfield .e-numinput {\n    text-align: center;\n    font: 500 var(--e-text-md)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    height: auto;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-numbtn {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-control-height);\n    padding: 0;\n    border: 0;\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-numbtn:first-child {\n    border-inline-end: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:last-child {\n    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:hover:not(:disabled) {\n    background: var(--e-wash-hover);\n  }\n\n  .e-numbtn:active:not(:disabled) {\n    background: var(--e-wash-press);\n  }\n\n  .e-numbtn: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-numbtn:disabled {\n    color: var(--e-muted);\n    cursor: not-allowed;\n    background: transparent;\n  }\n\n  .e-numfield--affix .e-numinput {\n    flex: none;\n    width: calc(var(--e-chars) * 1ch);\n    padding-inline: 0;\n    text-align: start;\n  }\n\n  .e-numfield--affix .e-affix--pre {\n    padding-inline: 0 var(--e-space-1);\n  }\n\n  .e-numfield--affix .e-affix--post {\n    padding-inline: var(--e-space-1) 0;\n  }\n\n  .e-numfield--affix .e-numfield-first {\n    margin-inline-start: auto;\n  }\n\n  .e-numfield--affix .e-numfield-last {\n    margin-inline-end: auto;\n  }\n\n  @container (max-width: 10rem) {\n    .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield .e-numinput {\n      text-align: start;\n      padding-inline: var(--e-space-3);\n    }\n  }\n\n  @container (max-width: 13rem) {\n    .e-numfield--affix .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield--affix .e-numfield-first {\n      margin-inline-start: var(--e-space-3);\n    }\n\n    .e-numfield--affix .e-numfield-last {\n      margin-inline-end: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-numbtn {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/NumberField/ENumberField.vue.d.ts

@@ -7,7 +7,7 @@ type __VLS_Props = {
     min?: number;
     /** The highest value. The value clamps to it and the increase button disables there. */
     max?: number;
-    /** How far a button or arrow key moves the value. Decimals shown follow the step. */
+    /** The amount one step of the buttons and arrow keys changes the value. Decimals shown follow the step (`0.25` shows two). @default 1 */
     step?: number;
     /** A unit before the value. */
     prefix?: string;
@@ -19,15 +19,17 @@ type __VLS_Props = {
     hint?: string;
     /** What to fix. Replaces the hint, marks the field invalid and is announced. */
     error?: string;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables the input and both buttons. */
     disabled?: boolean;
-    /** The id of the input; the label points at it. Generated when left out. */
+    /** The id of the input; the label points at it. @default generated */
     id?: string;
 };
 type __VLS_ModelProps = {
+    /** The number; `null` when empty. */
     modelValue?: number | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

package/dist/components/NumberField/ENumberField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ENumberField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_normalizeClass","_createVNode","EIcon","_createElementBlock","_toDisplayString","_createCommentVNode","EIcon_default","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ENumberField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","attrs","useFieldAttrs","input","ref","stepBy","computed","decimals","format","n","text","v","num","clamp","set","bump","base","dir","mult","commit","onKeydown","inputBind","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","normalizeClass","_cache","args","focusInside","createVNode","createElementBlock","toDisplayString","createCommentVNode","$event"],"sources":["../../../src/components/NumberField/ENumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** The lowest value. The value clamps to it and the decrease button disables there. */\n  min?: number;\n  /** The highest value. The value clamps to it and the increase button disables there. */\n  max?: number;\n  /** How far a button or arrow key moves the value. Decimals shown follow the step. */\n  step?: number;\n  /** A unit before the value. */\n  prefix?: string;\n  /** A unit after the value, such as visits. */\n  suffix?: string;\n  /** The name submitted with a form (the number, or empty). */\n  name?: string;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the field invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<number | null>({ default: null });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\n\nconst stepBy = computed(() => props.step || 1);\nconst decimals = computed(() => (String(stepBy.value).split(\".\")[1] || \"\").length);\nconst format = (n: number | null | undefined) => (n == null ? \"\" : Number(n).toFixed(decimals.value));\nconst text = ref(format(model.value));\nwatch(model, (v) => (text.value = format(v)));\n\nconst num = computed(() => (model.value == null ? undefined : Number(model.value)));\n\nfunction clamp(n: number): number {\n  if (props.min != null && n < props.min) n = props.min;\n  if (props.max != null && n > props.max) n = props.max;\n  return n;\n}\nfunction set(n: number) {\n  n = clamp(n);\n  model.value = n;\n  text.value = n.toFixed(decimals.value);\n}\nfunction bump(dir: 1 | -1, mult = 1) {\n  const base = num.value == null ? (props.min != null ? props.min - stepBy.value * (dir > 0 ? 1 : 0) : 0) : num.value;\n  set(Math.round((base + dir * stepBy.value * mult) * 1e6) / 1e6);\n}\nfunction commit() {\n  const n = parseFloat(text.value.replace(/,/g, \"\"));\n  if (isNaN(n)) {\n    if (text.value === \"\") model.value = null;\n    else text.value = format(model.value);\n  } else set(n);\n}\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"ArrowUp\") {\n    e.preventDefault();\n    bump(1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"ArrowDown\") {\n    e.preventDefault();\n    bump(-1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"Enter\") commit();\n}\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: [\"e-input\", \"e-numinput\", !props.prefix && \"e-numfield-first\", !props.suffix && \"e-numfield-last\"],\n    style: { \"--e-chars\": Math.max(text.value.length, 1) },\n    type: \"text\" as const,\n    inputmode: \"decimal\" as const,\n    role: \"spinbutton\",\n    autocomplete: \"off\",\n    value: text.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-valuenow\": num.value,\n    \"aria-valuemin\": props.min,\n    \"aria-valuemax\": props.max,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap e-numfield\"\n        :class=\"{ 'e-numfield--affix': prefix || suffix }\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('decrease')\"\n          :disabled=\"disabled || (min != null && num != null && num <= min)\"\n          @click=\"bump(-1)\"\n        >\n          <EIcon name=\"minus\" bold />\n        </button>\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre e-numfield-first\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input\n          ref=\"input\"\n          v-bind=\"inputBind(field)\"\n          @input=\"text = ($event.target as HTMLInputElement).value\"\n          @blur=\"commit\"\n          @keydown=\"onKeydown\"\n        />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post e-numfield-last\" aria-hidden=\"true\">{{ suffix }}</span>\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('increase')\"\n          :disabled=\"disabled || (max != null && num != null && num >= max)\"\n          @click=\"bump(1)\"\n        >\n          <EIcon name=\"plus\" bold />\n        </button>\n      </div>\n      <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"num == null ? '' : num\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-numfield {\n    align-items: stretch;\n    container-type: inline-size;\n  }\n\n  .e-numfield .e-numinput {\n    text-align: center;\n    font: 500 var(--e-text-md)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    height: auto;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-numbtn {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-control-height);\n    padding: 0;\n    border: 0;\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-numbtn:first-child {\n    border-inline-end: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:last-child {\n    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:hover:not(:disabled) {\n    background: var(--e-wash-hover);\n  }\n\n  .e-numbtn:active:not(:disabled) {\n    background: var(--e-wash-press);\n  }\n\n  .e-numbtn:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: -3px;\n  }\n\n  .e-numbtn:disabled {\n    color: var(--e-muted);\n    cursor: not-allowed;\n    background: transparent;\n  }\n\n  .e-numfield--affix .e-numinput {\n    flex: none;\n    width: calc(var(--e-chars) * 1ch);\n    padding-inline: 0;\n    text-align: start;\n  }\n\n  .e-numfield--affix .e-affix--pre {\n    padding-inline: 0 var(--e-space-1);\n  }\n\n  .e-numfield--affix .e-affix--post {\n    padding-inline: var(--e-space-1) 0;\n  }\n\n  .e-numfield--affix .e-numfield-first {\n    margin-inline-start: auto;\n  }\n\n  .e-numfield--affix .e-numfield-last {\n    margin-inline-end: auto;\n  }\n\n  @container (max-width: 10rem) {\n    .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield .e-numinput {\n      text-align: start;\n      padding-inline: var(--e-space-3);\n    }\n  }\n\n  @container (max-width: 13rem) {\n    .e-numfield--affix .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield--affix .e-numfield-first {\n      margin-inline-start: var(--e-space-3);\n    }\n\n    .e-numfield--affix .e-numfield-last {\n      margin-inline-end: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-numbtn {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ENumberField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_normalizeClass","_createVNode","EIcon","_createElementBlock","_toDisplayString","_createCommentVNode","EIcon_default","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ENumberField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","attrs","useFieldAttrs","input","ref","stepBy","computed","decimals","format","n","text","v","num","clamp","set","bump","base","dir","mult","commit","onKeydown","inputBind","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","normalizeClass","_cache","args","focusInside","createVNode","createElementBlock","toDisplayString","createCommentVNode","$event"],"sources":["../../../src/components/NumberField/ENumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** The lowest value. The value clamps to it and the decrease button disables there. */\n  min?: number;\n  /** The highest value. The value clamps to it and the increase button disables there. */\n  max?: number;\n  /** The amount one step of the buttons and arrow keys changes the value. Decimals shown follow the step (`0.25` shows two). @default 1 */\n  step?: number;\n  /** A unit before the value. */\n  prefix?: string;\n  /** A unit after the value, such as visits. */\n  suffix?: string;\n  /** The name submitted with a form (the number, or empty). */\n  name?: string;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the field invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the input and both buttons. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The number; `null` when empty. */\nconst model = defineModel<number | null>({ default: null });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\n\nconst stepBy = computed(() => props.step || 1);\nconst decimals = computed(() => (String(stepBy.value).split(\".\")[1] || \"\").length);\nconst format = (n: number | null | undefined) => (n == null ? \"\" : Number(n).toFixed(decimals.value));\nconst text = ref(format(model.value));\nwatch(model, (v) => (text.value = format(v)));\n\nconst num = computed(() => (model.value == null ? undefined : Number(model.value)));\n\nfunction clamp(n: number): number {\n  if (props.min != null && n < props.min) n = props.min;\n  if (props.max != null && n > props.max) n = props.max;\n  return n;\n}\nfunction set(n: number) {\n  n = clamp(n);\n  model.value = n;\n  text.value = n.toFixed(decimals.value);\n}\nfunction bump(dir: 1 | -1, mult = 1) {\n  const base = num.value == null ? (props.min != null ? props.min - stepBy.value * (dir > 0 ? 1 : 0) : 0) : num.value;\n  set(Math.round((base + dir * stepBy.value * mult) * 1e6) / 1e6);\n}\nfunction commit() {\n  const n = parseFloat(text.value.replace(/,/g, \"\"));\n  if (isNaN(n)) {\n    if (text.value === \"\") model.value = null;\n    else text.value = format(model.value);\n  } else set(n);\n}\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"ArrowUp\") {\n    e.preventDefault();\n    bump(1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"ArrowDown\") {\n    e.preventDefault();\n    bump(-1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"Enter\") commit();\n}\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: [\"e-input\", \"e-numinput\", !props.prefix && \"e-numfield-first\", !props.suffix && \"e-numfield-last\"],\n    style: { \"--e-chars\": Math.max(text.value.length, 1) },\n    type: \"text\" as const,\n    inputmode: \"decimal\" as const,\n    role: \"spinbutton\",\n    autocomplete: \"off\",\n    value: text.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-valuenow\": num.value,\n    \"aria-valuemin\": props.min,\n    \"aria-valuemax\": props.max,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap e-numfield\"\n        :class=\"{ 'e-numfield--affix': prefix || suffix }\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('decrease')\"\n          :disabled=\"disabled || (min != null && num != null && num <= min)\"\n          @click=\"bump(-1)\"\n        >\n          <EIcon name=\"minus\" bold />\n        </button>\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre e-numfield-first\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input\n          ref=\"input\"\n          v-bind=\"inputBind(field)\"\n          @input=\"text = ($event.target as HTMLInputElement).value\"\n          @blur=\"commit\"\n          @keydown=\"onKeydown\"\n        />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post e-numfield-last\" aria-hidden=\"true\">{{ suffix }}</span>\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('increase')\"\n          :disabled=\"disabled || (max != null && num != null && num >= max)\"\n          @click=\"bump(1)\"\n        >\n          <EIcon name=\"plus\" bold />\n        </button>\n      </div>\n      <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"num == null ? '' : num\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-numfield {\n    align-items: stretch;\n    container-type: inline-size;\n  }\n\n  .e-numfield .e-numinput {\n    text-align: center;\n    font: 500 var(--e-text-md)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    height: auto;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-numbtn {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-control-height);\n    padding: 0;\n    border: 0;\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-numbtn:first-child {\n    border-inline-end: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:last-child {\n    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:hover:not(:disabled) {\n    background: var(--e-wash-hover);\n  }\n\n  .e-numbtn:active:not(:disabled) {\n    background: var(--e-wash-press);\n  }\n\n  .e-numbtn: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-numbtn:disabled {\n    color: var(--e-muted);\n    cursor: not-allowed;\n    background: transparent;\n  }\n\n  .e-numfield--affix .e-numinput {\n    flex: none;\n    width: calc(var(--e-chars) * 1ch);\n    padding-inline: 0;\n    text-align: start;\n  }\n\n  .e-numfield--affix .e-affix--pre {\n    padding-inline: 0 var(--e-space-1);\n  }\n\n  .e-numfield--affix .e-affix--post {\n    padding-inline: var(--e-space-1) 0;\n  }\n\n  .e-numfield--affix .e-numfield-first {\n    margin-inline-start: auto;\n  }\n\n  .e-numfield--affix .e-numfield-last {\n    margin-inline-end: auto;\n  }\n\n  @container (max-width: 10rem) {\n    .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield .e-numinput {\n      text-align: start;\n      padding-inline: var(--e-space-3);\n    }\n  }\n\n  @container (max-width: 13rem) {\n    .e-numfield--affix .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield--affix .e-numfield-first {\n      margin-inline-start: var(--e-space-3);\n    }\n\n    .e-numfield--affix .e-numfield-last {\n      margin-inline-end: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-numbtn {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/OtpField/EOtpField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EOtpField.js","names":["_sfc_main","EOtpField_vue_vue_type_script_setup_true_lang_default","EOtpField_default"],"sources":["../../../src/components/OtpField/EOtpField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, watch } from \"vue\";\nimport EField from \"../Field/EField.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\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label. \"Verification code\" when left out. */\n    label?: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** How many characters. */\n    length?: number;\n    /** `numeric` opens the number pad; `text` takes letters and digits. */\n    type?: \"numeric\" | \"text\";\n    /** A gap between groups: 6 with 3 reads 123 456. */\n    groupSize?: number;\n    /** The name submitted with a form (the whole code). */\n    name?: string;\n    /** Start in the first empty box. */\n    autoFocus?: boolean;\n    /** Help under the boxes, read with each box. */\n    hint?: string;\n    /** What to fix. Replaces the hint and is announced. */\n    error?: string;\n    /** A word beside the label, and the `required` attribute on every box. */\n    required?: boolean;\n    /** A word beside the label. Flag whichever is rarer. */\n    optional?: boolean;\n    disabled?: boolean;\n    /** The id of the first box; the label and hint ids are built from it. Generated when left out. */\n    id?: string;\n  }>(),\n  { length: 6, type: \"numeric\", groupSize: 0 },\n);\n\nconst emit = defineEmits<{\n  /** Once, when the last box fills. */\n  complete: [code: string];\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst numeric = computed(() => props.type !== \"text\");\nconst refs: (HTMLInputElement | null)[] = [];\n\nfunction clean(s: unknown): string {\n  const text = String(s ?? \"\");\n  return (numeric.value ? text.replace(/\\D/g, \"\") : text.replace(/[^a-z0-9]/gi, \"\").toUpperCase()).slice(\n    0,\n    props.length,\n  );\n}\nconst value = computed(() => clean(model.value));\n\nlet live = value.value;\nwatch(value, (v) => (live = v), { flush: \"sync\" });\n\nfunction commit(next: string) {\n  next = clean(next);\n  const prev = live;\n  live = next;\n  model.value = next;\n  if (next.length === props.length && prev !== next) emit(\"complete\", next);\n}\nfunction focusAt(i: number) {\n  refs[Math.max(0, Math.min(props.length - 1, i))]?.focus();\n}\nconst without = (v: string, i: number) => v.slice(0, i) + v.slice(i + 1);\nfunction put(i: number, text: string) {\n  const chars = clean(text);\n  if (!chars) return;\n  const from = chars.length >= props.length ? 0 : Math.min(i, live.length);\n  commit(live.slice(0, from) + chars);\n  focusAt(from + chars.length);\n}\nfunction onInput(i: number, e: Event) {\n  const target = e.target as HTMLInputElement;\n  const v = live;\n  let raw = target.value;\n  if (!raw) {\n    commit(without(v, i));\n    return;\n  }\n  if (v[i] && raw.length === 2) {\n    const k = raw.indexOf(v[i]!);\n    raw = k >= 0 ? without(raw, k) : raw.charAt(1);\n  }\n  const chars = clean(raw);\n  if (!chars) {\n    target.value = live[i] ?? \"\";\n    return;\n  }\n  if (chars.length === 1 && i < v.length) {\n    commit(v.slice(0, i) + chars + v.slice(i + 1));\n    focusAt(i + 1);\n  } else put(i, chars);\n  target.value = live[i] ?? \"\";\n}\nfunction onKey(i: number, e: KeyboardEvent) {\n  const v = live;\n  const k = e.key;\n  if (k === \"Backspace\") {\n    e.preventDefault();\n    if (v[i]) {\n      commit(without(v, i));\n      focusAt(i);\n    } else if (i > 0) {\n      commit(without(v, i - 1));\n      focusAt(i - 1);\n    }\n  } else if (k === \"Delete\") {\n    e.preventDefault();\n    commit(without(v, i));\n  } else if (k === \"ArrowLeft\") {\n    e.preventDefault();\n    focusAt(i - 1);\n  } else if (k === \"ArrowRight\") {\n    e.preventDefault();\n    focusAt(Math.min(i + 1, v.length));\n  } else if (k === \"Home\") {\n    e.preventDefault();\n    focusAt(0);\n  } else if (k === \"End\") {\n    e.preventDefault();\n    focusAt(v.length);\n  }\n}\nfunction onFocus(i: number) {\n  if (i > live.length) focusAt(live.length);\n}\nfunction onPaste(i: number, e: ClipboardEvent) {\n  e.preventDefault();\n  put(i, e.clipboardData?.getData(\"text\") ?? \"\");\n}\n\nonMounted(() => {\n  if (props.autoFocus) focusAt(live.length);\n});\n\ndefineExpose({\n  focus: () => focusAt(live.length),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('verificationCode')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <div role=\"group\" :aria-labelledby=\"`${field.id}-label`\" class=\"e-otp\" v-bind=\"attrs.input()\">\n        <template v-for=\"i in length\" :key=\"i\">\n          <span v-if=\"groupSize && i > 1 && (i - 1) % groupSize === 0\" class=\"e-otp-sep\" aria-hidden=\"true\" />\n          <input\n            :id=\"i === 1 ? field.id : undefined\"\n            :ref=\"(el) => (refs[i - 1] = el as HTMLInputElement | null)\"\n            class=\"e-input e-otp-box\"\n            type=\"text\"\n            :inputmode=\"numeric ? 'numeric' : 'text'\"\n            :autocomplete=\"i === 1 ? 'one-time-code' : 'off'\"\n            autocapitalize=\"characters\"\n            :spellcheck=\"false\"\n            :value=\"value[i - 1] || ''\"\n            :disabled=\"disabled\"\n            :required=\"required\"\n            :data-filled=\"value[i - 1] ? '' : undefined\"\n            :aria-label=\"t(numeric ? 'otpDigit' : 'otpChar', { n: i, total: length })\"\n            :aria-invalid=\"field.ariaInvalid\"\n            :aria-describedby=\"field.ariaDescribedby\"\n            @input=\"onInput(i - 1, $event)\"\n            @keydown=\"onKey(i - 1, $event)\"\n            @focus=\"onFocus(i - 1)\"\n            @paste=\"onPaste(i - 1, $event)\"\n          />\n        </template>\n        <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"value\" />\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-otp {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    max-width: 100%;\n  }\n\n  .e-otp-sep {\n    flex: none;\n    width: var(--e-space-3);\n  }\n\n  .e-otp .e-otp-box {\n    flex: 1 1 0;\n    width: 0;\n    min-width: 30px;\n    max-width: var(--e-control-height);\n    padding: 0;\n    text-align: center;\n    font: 500 var(--e-text-xl)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    text-transform: uppercase;\n    caret-color: var(--e-primary);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation */\n  .e-otp .e-otp-box[data-filled]:not(:focus):not([aria-invalid=\"true\"]) {\n    border-color: var(--e-ink);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EOtpField.js","names":["_sfc_main","EOtpField_vue_vue_type_script_setup_true_lang_default","EOtpField_default"],"sources":["../../../src/components/OtpField/EOtpField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, watch } from \"vue\";\nimport EField from \"../Field/EField.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\nconst props = withDefaults(\n  defineProps<{\n    /** The field's label. @default \"Verification code\" */\n    label?: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** How many characters: the number of boxes. */\n    length?: number;\n    /** `numeric` opens the number pad; `text` takes letters and digits, upper-cased. */\n    inputmode?: \"numeric\" | \"text\";\n    /** A gap between groups: 6 with 3 reads 123 456. */\n    groupSize?: number;\n    /** The name submitted with a form (the whole code), through a hidden input. */\n    name?: string;\n    /** Start in the first empty box. */\n    autoFocus?: boolean;\n    /** Help under the boxes, read with each box. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks every box invalid and is announced. */\n    error?: string;\n    /** A word beside the label, and the `required` attribute on every box. */\n    required?: boolean;\n    /** A word beside the label. Flag whichever is rarer. */\n    optional?: boolean;\n    /** Disables every box. */\n    disabled?: boolean;\n    /** The id of the first box; the label and hint ids are built from it. @default generated */\n    id?: string;\n  }>(),\n  { length: 6, inputmode: \"numeric\", groupSize: 0 },\n);\n\nconst emit = defineEmits<{\n  /** Once, when the last box fills. */\n  complete: [code: string];\n}>();\n\n/** The code typed so far. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst numeric = computed(() => props.inputmode !== \"text\");\nconst refs: (HTMLInputElement | null)[] = [];\n\nfunction clean(s: unknown): string {\n  const text = String(s ?? \"\");\n  return (numeric.value ? text.replace(/\\D/g, \"\") : text.replace(/[^a-z0-9]/gi, \"\").toUpperCase()).slice(\n    0,\n    props.length,\n  );\n}\nconst value = computed(() => clean(model.value));\n\nlet live = value.value;\nwatch(value, (v) => (live = v), { flush: \"sync\" });\n\nfunction commit(next: string) {\n  next = clean(next);\n  const prev = live;\n  live = next;\n  model.value = next;\n  if (next.length === props.length && prev !== next) emit(\"complete\", next);\n}\nfunction focusAt(i: number) {\n  refs[Math.max(0, Math.min(props.length - 1, i))]?.focus();\n}\nconst without = (v: string, i: number) => v.slice(0, i) + v.slice(i + 1);\nfunction put(i: number, text: string) {\n  const chars = clean(text);\n  if (!chars) return;\n  const from = chars.length >= props.length ? 0 : Math.min(i, live.length);\n  commit(live.slice(0, from) + chars);\n  focusAt(from + chars.length);\n}\nfunction onInput(i: number, e: Event) {\n  const target = e.target as HTMLInputElement;\n  const v = live;\n  let raw = target.value;\n  if (!raw) {\n    commit(without(v, i));\n    return;\n  }\n  if (v[i] && raw.length === 2) {\n    const k = raw.indexOf(v[i]!);\n    raw = k >= 0 ? without(raw, k) : raw.charAt(1);\n  }\n  const chars = clean(raw);\n  if (!chars) {\n    target.value = live[i] ?? \"\";\n    return;\n  }\n  if (chars.length === 1 && i < v.length) {\n    commit(v.slice(0, i) + chars + v.slice(i + 1));\n    focusAt(i + 1);\n  } else put(i, chars);\n  target.value = live[i] ?? \"\";\n}\nfunction onKey(i: number, e: KeyboardEvent) {\n  const v = live;\n  const k = e.key;\n  if (k === \"Backspace\") {\n    e.preventDefault();\n    if (v[i]) {\n      commit(without(v, i));\n      focusAt(i);\n    } else if (i > 0) {\n      commit(without(v, i - 1));\n      focusAt(i - 1);\n    }\n  } else if (k === \"Delete\") {\n    e.preventDefault();\n    commit(without(v, i));\n  } else if (k === \"ArrowLeft\") {\n    e.preventDefault();\n    focusAt(i - 1);\n  } else if (k === \"ArrowRight\") {\n    e.preventDefault();\n    focusAt(Math.min(i + 1, v.length));\n  } else if (k === \"Home\") {\n    e.preventDefault();\n    focusAt(0);\n  } else if (k === \"End\") {\n    e.preventDefault();\n    focusAt(v.length);\n  }\n}\nfunction onFocus(i: number) {\n  if (i > live.length) focusAt(live.length);\n}\nfunction onPaste(i: number, e: ClipboardEvent) {\n  e.preventDefault();\n  put(i, e.clipboardData?.getData(\"text\") ?? \"\");\n}\n\nonMounted(() => {\n  if (props.autoFocus) focusAt(live.length);\n});\n\ndefineExpose({\n  focus: () => focusAt(live.length),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('verificationCode')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <div role=\"group\" :aria-labelledby=\"`${field.id}-label`\" class=\"e-otp\" v-bind=\"attrs.input()\">\n        <template v-for=\"i in length\" :key=\"i\">\n          <span v-if=\"groupSize && i > 1 && (i - 1) % groupSize === 0\" class=\"e-otp-sep\" aria-hidden=\"true\" />\n          <input\n            :id=\"i === 1 ? field.id : undefined\"\n            :ref=\"(el) => (refs[i - 1] = el as HTMLInputElement | null)\"\n            class=\"e-input e-otp-box\"\n            type=\"text\"\n            :inputmode=\"numeric ? 'numeric' : 'text'\"\n            :autocomplete=\"i === 1 ? 'one-time-code' : 'off'\"\n            autocapitalize=\"characters\"\n            :spellcheck=\"false\"\n            :value=\"value[i - 1] || ''\"\n            :disabled=\"disabled\"\n            :required=\"required\"\n            :data-filled=\"value[i - 1] ? '' : undefined\"\n            :aria-label=\"t(numeric ? 'otpDigit' : 'otpChar', { n: i, total: length })\"\n            :aria-invalid=\"field.ariaInvalid\"\n            :aria-describedby=\"field.ariaDescribedby\"\n            @input=\"onInput(i - 1, $event)\"\n            @keydown=\"onKey(i - 1, $event)\"\n            @focus=\"onFocus(i - 1)\"\n            @paste=\"onPaste(i - 1, $event)\"\n          />\n        </template>\n        <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"value\" />\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-otp {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    max-width: 100%;\n  }\n\n  .e-otp-sep {\n    flex: none;\n    width: var(--e-space-3);\n  }\n\n  .e-otp .e-otp-box {\n    flex: 1 1 0;\n    width: 0;\n    min-width: 30px;\n    max-width: var(--e-control-height);\n    padding: 0;\n    text-align: center;\n    font: 500 var(--e-text-xl)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    text-transform: uppercase;\n    caret-color: var(--e-primary);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation */\n  .e-otp .e-otp-box[data-filled]:not(:focus):not([aria-invalid=\"true\"]) {\n    border-color: var(--e-ink);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/OtpField/EOtpField.vue.d.ts

@@ -1,31 +1,33 @@
 type __VLS_Props = {
-    /** The visible label. "Verification code" when left out. */
+    /** The field's label. @default "Verification code" */
     label?: string;
     /** Keep the label for screen readers and remove it from the page. */
     hideLabel?: boolean;
-    /** How many characters. */
+    /** How many characters: the number of boxes. */
     length?: number;
-    /** `numeric` opens the number pad; `text` takes letters and digits. */
-    type?: "numeric" | "text";
+    /** `numeric` opens the number pad; `text` takes letters and digits, upper-cased. */
+    inputmode?: "numeric" | "text";
     /** A gap between groups: 6 with 3 reads 123 456. */
     groupSize?: number;
-    /** The name submitted with a form (the whole code). */
+    /** The name submitted with a form (the whole code), through a hidden input. */
     name?: string;
     /** Start in the first empty box. */
     autoFocus?: boolean;
     /** Help under the boxes, read with each box. */
     hint?: string;
-    /** What to fix. Replaces the hint and is announced. */
+    /** What to fix. Replaces the hint, marks every box invalid and is announced. */
     error?: string;
     /** A word beside the label, and the `required` attribute on every box. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables every box. */
     disabled?: boolean;
-    /** The id of the first box; the label and hint ids are built from it. Generated when left out. */
+    /** The id of the first box; the label and hint ids are built from it. @default generated */
     id?: string;
 };
 type __VLS_ModelProps = {
+    /** The code typed so far. */
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
@@ -39,7 +41,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
     onComplete?: ((code: string) => any) | undefined;
 }>, {
     length: number;
-    type: "text" | "numeric";
+    inputmode: "text" | "numeric";
     groupSize: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/OtpField/EOtpField.vue_vue_type_script_setup_true_lang.js

@@ -31,7 +31,7 @@ var y = ["aria-labelledby"], b = {
 		label: {},
 		hideLabel: { type: Boolean },
 		length: { default: 6 },
-		type: { default: "numeric" },
+		inputmode: { default: "numeric" },
 		groupSize: { default: 0 },
 		name: {},
 		autoFocus: { type: Boolean },
@@ -47,7 +47,7 @@ var y = ["aria-labelledby"], b = {
 	}),
 	emits: /*@__PURE__*/ u(["complete"], ["update:modelValue"]),
 	setup(l, { expose: u, emit: C }) {
-		let w = l, T = C, E = g(l, "modelValue"), D = e(), O = t(), k = i(() => w.type !== "text"), A = [];
+		let w = l, T = C, E = g(l, "modelValue"), D = e(), O = t(), k = i(() => w.inputmode !== "text"), A = [];
 		function j(e) {
 			let t = String(e ?? "");
 			return (k.value ? t.replace(/\D/g, "") : t.replace(/[^a-z0-9]/gi, "").toUpperCase()).slice(0, w.length);

package/dist/components/OtpField/EOtpField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EOtpField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_createElementBlock","_Fragment","_renderList","_createCommentVNode","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EOtpField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","emit","model","useModel","t","useMessages","attrs","useFieldAttrs","numeric","computed","refs","clean","text","s","value","live","v","commit","next","prev","focusAt","i","without","put","chars","from","onInput","target","e","raw","k","onKey","onFocus","onPaste","onMounted","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","field","createElementBlock","Fragment","renderList","createCommentVNode","el","$event"],"sources":["../../../src/components/OtpField/EOtpField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, watch } from \"vue\";\nimport EField from \"../Field/EField.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\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label. \"Verification code\" when left out. */\n    label?: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** How many characters. */\n    length?: number;\n    /** `numeric` opens the number pad; `text` takes letters and digits. */\n    type?: \"numeric\" | \"text\";\n    /** A gap between groups: 6 with 3 reads 123 456. */\n    groupSize?: number;\n    /** The name submitted with a form (the whole code). */\n    name?: string;\n    /** Start in the first empty box. */\n    autoFocus?: boolean;\n    /** Help under the boxes, read with each box. */\n    hint?: string;\n    /** What to fix. Replaces the hint and is announced. */\n    error?: string;\n    /** A word beside the label, and the `required` attribute on every box. */\n    required?: boolean;\n    /** A word beside the label. Flag whichever is rarer. */\n    optional?: boolean;\n    disabled?: boolean;\n    /** The id of the first box; the label and hint ids are built from it. Generated when left out. */\n    id?: string;\n  }>(),\n  { length: 6, type: \"numeric\", groupSize: 0 },\n);\n\nconst emit = defineEmits<{\n  /** Once, when the last box fills. */\n  complete: [code: string];\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst numeric = computed(() => props.type !== \"text\");\nconst refs: (HTMLInputElement | null)[] = [];\n\nfunction clean(s: unknown): string {\n  const text = String(s ?? \"\");\n  return (numeric.value ? text.replace(/\\D/g, \"\") : text.replace(/[^a-z0-9]/gi, \"\").toUpperCase()).slice(\n    0,\n    props.length,\n  );\n}\nconst value = computed(() => clean(model.value));\n\nlet live = value.value;\nwatch(value, (v) => (live = v), { flush: \"sync\" });\n\nfunction commit(next: string) {\n  next = clean(next);\n  const prev = live;\n  live = next;\n  model.value = next;\n  if (next.length === props.length && prev !== next) emit(\"complete\", next);\n}\nfunction focusAt(i: number) {\n  refs[Math.max(0, Math.min(props.length - 1, i))]?.focus();\n}\nconst without = (v: string, i: number) => v.slice(0, i) + v.slice(i + 1);\nfunction put(i: number, text: string) {\n  const chars = clean(text);\n  if (!chars) return;\n  const from = chars.length >= props.length ? 0 : Math.min(i, live.length);\n  commit(live.slice(0, from) + chars);\n  focusAt(from + chars.length);\n}\nfunction onInput(i: number, e: Event) {\n  const target = e.target as HTMLInputElement;\n  const v = live;\n  let raw = target.value;\n  if (!raw) {\n    commit(without(v, i));\n    return;\n  }\n  if (v[i] && raw.length === 2) {\n    const k = raw.indexOf(v[i]!);\n    raw = k >= 0 ? without(raw, k) : raw.charAt(1);\n  }\n  const chars = clean(raw);\n  if (!chars) {\n    target.value = live[i] ?? \"\";\n    return;\n  }\n  if (chars.length === 1 && i < v.length) {\n    commit(v.slice(0, i) + chars + v.slice(i + 1));\n    focusAt(i + 1);\n  } else put(i, chars);\n  target.value = live[i] ?? \"\";\n}\nfunction onKey(i: number, e: KeyboardEvent) {\n  const v = live;\n  const k = e.key;\n  if (k === \"Backspace\") {\n    e.preventDefault();\n    if (v[i]) {\n      commit(without(v, i));\n      focusAt(i);\n    } else if (i > 0) {\n      commit(without(v, i - 1));\n      focusAt(i - 1);\n    }\n  } else if (k === \"Delete\") {\n    e.preventDefault();\n    commit(without(v, i));\n  } else if (k === \"ArrowLeft\") {\n    e.preventDefault();\n    focusAt(i - 1);\n  } else if (k === \"ArrowRight\") {\n    e.preventDefault();\n    focusAt(Math.min(i + 1, v.length));\n  } else if (k === \"Home\") {\n    e.preventDefault();\n    focusAt(0);\n  } else if (k === \"End\") {\n    e.preventDefault();\n    focusAt(v.length);\n  }\n}\nfunction onFocus(i: number) {\n  if (i > live.length) focusAt(live.length);\n}\nfunction onPaste(i: number, e: ClipboardEvent) {\n  e.preventDefault();\n  put(i, e.clipboardData?.getData(\"text\") ?? \"\");\n}\n\nonMounted(() => {\n  if (props.autoFocus) focusAt(live.length);\n});\n\ndefineExpose({\n  focus: () => focusAt(live.length),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('verificationCode')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <div role=\"group\" :aria-labelledby=\"`${field.id}-label`\" class=\"e-otp\" v-bind=\"attrs.input()\">\n        <template v-for=\"i in length\" :key=\"i\">\n          <span v-if=\"groupSize && i > 1 && (i - 1) % groupSize === 0\" class=\"e-otp-sep\" aria-hidden=\"true\" />\n          <input\n            :id=\"i === 1 ? field.id : undefined\"\n            :ref=\"(el) => (refs[i - 1] = el as HTMLInputElement | null)\"\n            class=\"e-input e-otp-box\"\n            type=\"text\"\n            :inputmode=\"numeric ? 'numeric' : 'text'\"\n            :autocomplete=\"i === 1 ? 'one-time-code' : 'off'\"\n            autocapitalize=\"characters\"\n            :spellcheck=\"false\"\n            :value=\"value[i - 1] || ''\"\n            :disabled=\"disabled\"\n            :required=\"required\"\n            :data-filled=\"value[i - 1] ? '' : undefined\"\n            :aria-label=\"t(numeric ? 'otpDigit' : 'otpChar', { n: i, total: length })\"\n            :aria-invalid=\"field.ariaInvalid\"\n            :aria-describedby=\"field.ariaDescribedby\"\n            @input=\"onInput(i - 1, $event)\"\n            @keydown=\"onKey(i - 1, $event)\"\n            @focus=\"onFocus(i - 1)\"\n            @paste=\"onPaste(i - 1, $event)\"\n          />\n        </template>\n        <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"value\" />\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-otp {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    max-width: 100%;\n  }\n\n  .e-otp-sep {\n    flex: none;\n    width: var(--e-space-3);\n  }\n\n  .e-otp .e-otp-box {\n    flex: 1 1 0;\n    width: 0;\n    min-width: 30px;\n    max-width: var(--e-control-height);\n    padding: 0;\n    text-align: center;\n    font: 500 var(--e-text-xl)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    text-transform: uppercase;\n    caret-color: var(--e-primary);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation */\n  .e-otp .e-otp-box[data-filled]:not(:focus):not([aria-invalid=\"true\"]) {\n    border-color: var(--e-ink);\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"EOtpField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_createElementBlock","_Fragment","_renderList","_createCommentVNode","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EOtpField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","emit","model","useModel","t","useMessages","attrs","useFieldAttrs","numeric","computed","refs","clean","text","s","value","live","v","commit","next","prev","focusAt","i","without","put","chars","from","onInput","target","e","raw","k","onKey","onFocus","onPaste","onMounted","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","field","createElementBlock","Fragment","renderList","createCommentVNode","el","$event"],"sources":["../../../src/components/OtpField/EOtpField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, watch } from \"vue\";\nimport EField from \"../Field/EField.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\nconst props = withDefaults(\n  defineProps<{\n    /** The field's label. @default \"Verification code\" */\n    label?: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** How many characters: the number of boxes. */\n    length?: number;\n    /** `numeric` opens the number pad; `text` takes letters and digits, upper-cased. */\n    inputmode?: \"numeric\" | \"text\";\n    /** A gap between groups: 6 with 3 reads 123 456. */\n    groupSize?: number;\n    /** The name submitted with a form (the whole code), through a hidden input. */\n    name?: string;\n    /** Start in the first empty box. */\n    autoFocus?: boolean;\n    /** Help under the boxes, read with each box. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks every box invalid and is announced. */\n    error?: string;\n    /** A word beside the label, and the `required` attribute on every box. */\n    required?: boolean;\n    /** A word beside the label. Flag whichever is rarer. */\n    optional?: boolean;\n    /** Disables every box. */\n    disabled?: boolean;\n    /** The id of the first box; the label and hint ids are built from it. @default generated */\n    id?: string;\n  }>(),\n  { length: 6, inputmode: \"numeric\", groupSize: 0 },\n);\n\nconst emit = defineEmits<{\n  /** Once, when the last box fills. */\n  complete: [code: string];\n}>();\n\n/** The code typed so far. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst numeric = computed(() => props.inputmode !== \"text\");\nconst refs: (HTMLInputElement | null)[] = [];\n\nfunction clean(s: unknown): string {\n  const text = String(s ?? \"\");\n  return (numeric.value ? text.replace(/\\D/g, \"\") : text.replace(/[^a-z0-9]/gi, \"\").toUpperCase()).slice(\n    0,\n    props.length,\n  );\n}\nconst value = computed(() => clean(model.value));\n\nlet live = value.value;\nwatch(value, (v) => (live = v), { flush: \"sync\" });\n\nfunction commit(next: string) {\n  next = clean(next);\n  const prev = live;\n  live = next;\n  model.value = next;\n  if (next.length === props.length && prev !== next) emit(\"complete\", next);\n}\nfunction focusAt(i: number) {\n  refs[Math.max(0, Math.min(props.length - 1, i))]?.focus();\n}\nconst without = (v: string, i: number) => v.slice(0, i) + v.slice(i + 1);\nfunction put(i: number, text: string) {\n  const chars = clean(text);\n  if (!chars) return;\n  const from = chars.length >= props.length ? 0 : Math.min(i, live.length);\n  commit(live.slice(0, from) + chars);\n  focusAt(from + chars.length);\n}\nfunction onInput(i: number, e: Event) {\n  const target = e.target as HTMLInputElement;\n  const v = live;\n  let raw = target.value;\n  if (!raw) {\n    commit(without(v, i));\n    return;\n  }\n  if (v[i] && raw.length === 2) {\n    const k = raw.indexOf(v[i]!);\n    raw = k >= 0 ? without(raw, k) : raw.charAt(1);\n  }\n  const chars = clean(raw);\n  if (!chars) {\n    target.value = live[i] ?? \"\";\n    return;\n  }\n  if (chars.length === 1 && i < v.length) {\n    commit(v.slice(0, i) + chars + v.slice(i + 1));\n    focusAt(i + 1);\n  } else put(i, chars);\n  target.value = live[i] ?? \"\";\n}\nfunction onKey(i: number, e: KeyboardEvent) {\n  const v = live;\n  const k = e.key;\n  if (k === \"Backspace\") {\n    e.preventDefault();\n    if (v[i]) {\n      commit(without(v, i));\n      focusAt(i);\n    } else if (i > 0) {\n      commit(without(v, i - 1));\n      focusAt(i - 1);\n    }\n  } else if (k === \"Delete\") {\n    e.preventDefault();\n    commit(without(v, i));\n  } else if (k === \"ArrowLeft\") {\n    e.preventDefault();\n    focusAt(i - 1);\n  } else if (k === \"ArrowRight\") {\n    e.preventDefault();\n    focusAt(Math.min(i + 1, v.length));\n  } else if (k === \"Home\") {\n    e.preventDefault();\n    focusAt(0);\n  } else if (k === \"End\") {\n    e.preventDefault();\n    focusAt(v.length);\n  }\n}\nfunction onFocus(i: number) {\n  if (i > live.length) focusAt(live.length);\n}\nfunction onPaste(i: number, e: ClipboardEvent) {\n  e.preventDefault();\n  put(i, e.clipboardData?.getData(\"text\") ?? \"\");\n}\n\nonMounted(() => {\n  if (props.autoFocus) focusAt(live.length);\n});\n\ndefineExpose({\n  focus: () => focusAt(live.length),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('verificationCode')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <div role=\"group\" :aria-labelledby=\"`${field.id}-label`\" class=\"e-otp\" v-bind=\"attrs.input()\">\n        <template v-for=\"i in length\" :key=\"i\">\n          <span v-if=\"groupSize && i > 1 && (i - 1) % groupSize === 0\" class=\"e-otp-sep\" aria-hidden=\"true\" />\n          <input\n            :id=\"i === 1 ? field.id : undefined\"\n            :ref=\"(el) => (refs[i - 1] = el as HTMLInputElement | null)\"\n            class=\"e-input e-otp-box\"\n            type=\"text\"\n            :inputmode=\"numeric ? 'numeric' : 'text'\"\n            :autocomplete=\"i === 1 ? 'one-time-code' : 'off'\"\n            autocapitalize=\"characters\"\n            :spellcheck=\"false\"\n            :value=\"value[i - 1] || ''\"\n            :disabled=\"disabled\"\n            :required=\"required\"\n            :data-filled=\"value[i - 1] ? '' : undefined\"\n            :aria-label=\"t(numeric ? 'otpDigit' : 'otpChar', { n: i, total: length })\"\n            :aria-invalid=\"field.ariaInvalid\"\n            :aria-describedby=\"field.ariaDescribedby\"\n            @input=\"onInput(i - 1, $event)\"\n            @keydown=\"onKey(i - 1, $event)\"\n            @focus=\"onFocus(i - 1)\"\n            @paste=\"onPaste(i - 1, $event)\"\n          />\n        </template>\n        <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"value\" />\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-otp {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    max-width: 100%;\n  }\n\n  .e-otp-sep {\n    flex: none;\n    width: var(--e-space-3);\n  }\n\n  .e-otp .e-otp-box {\n    flex: 1 1 0;\n    width: 0;\n    min-width: 30px;\n    max-width: var(--e-control-height);\n    padding: 0;\n    text-align: center;\n    font: 500 var(--e-text-xl)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    text-transform: uppercase;\n    caret-color: var(--e-primary);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation */\n  .e-otp .e-otp-box[data-filled]:not(:focus):not([aria-invalid=\"true\"]) {\n    border-color: var(--e-ink);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/PageHeader/EPageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"EPageHeader.js","names":["_sfc_main","EPageHeader_vue_vue_type_script_setup_true_lang_default","EPageHeader_default"],"sources":["../../../src/components/PageHeader/EPageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The page's title: where the person is, in their words (\"Visit on Oct 2\"). */\n    title: string;\n    /** A short line under the title. */\n    description?: string;\n    /** The heading level, 1 by default. A page has exactly one h1. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 1 },\n);\n\ndefineSlots<{\n  /** An EBreadcrumb above the title. */\n  breadcrumb?(): unknown;\n  /** An EStamp beside the title. */\n  status?(): unknown;\n  /** The page's Buttons, the main one first. */\n  actions?(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-pagehead\">\n    <slot name=\"breadcrumb\" />\n    <div class=\"e-pagehead-row\">\n      <div class=\"e-pagehead-text\">\n        <div class=\"e-pagehead-titlerow\">\n          <component :is=\"`h${headingLevel}`\" class=\"e-pagehead-title\">{{ title }}</component>\n          <slot name=\"status\" />\n        </div>\n        <p v-if=\"description\" class=\"e-pagehead-desc\">{{ description }}</p>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-pagehead-actions\"><slot name=\"actions\" /></EActions>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.page {\n  .e-pagehead {\n    display: grid;\n    gap: var(--e-space-3);\n    margin-bottom: var(--e-space-6);\n  }\n\n  .e-pagehead-row {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-pagehead-text {\n    flex: 1 1 18rem;\n    min-width: 0;\n  }\n\n  .e-pagehead-title {\n    margin: 0;\n    font: 500 var(--e-text-4xl) / 1.1 var(--e-font-sans);\n    text-wrap: balance;\n  }\n\n  .e-pagehead-desc {\n    margin: var(--e-space-2) 0 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-lg) / 1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pagehead-title {\n      font-size: var(--e-text-2xl);\n    }\n  }\n\n  .e-pagehead-titlerow {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-pagehead-titlerow > :not(.e-pagehead-title) {\n    margin-top: var(--e-space-1);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EPageHeader.js","names":["_sfc_main","EPageHeader_vue_vue_type_script_setup_true_lang_default","EPageHeader_default"],"sources":["../../../src/components/PageHeader/EPageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The page's title: where the person is, in their words (\"Visit on Oct 2\"). */\n    title: string;\n    /** A short line under the title. */\n    description?: string;\n    /** The heading level of the title, 1 by default. A page has exactly one h1; change it only when the header is not the page's title. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 1 },\n);\n\ndefineSlots<{\n  /** An EBreadcrumb above the title. */\n  breadcrumb?(): unknown;\n  /** An EStamp beside the title. */\n  status?(): unknown;\n  /** The page's Buttons, the main one first. */\n  actions?(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-pagehead\">\n    <slot name=\"breadcrumb\" />\n    <div class=\"e-pagehead-row\">\n      <div class=\"e-pagehead-text\">\n        <div class=\"e-pagehead-titlerow\">\n          <component :is=\"`h${headingLevel}`\" class=\"e-pagehead-title\">{{ title }}</component>\n          <slot name=\"status\" />\n        </div>\n        <p v-if=\"description\" class=\"e-pagehead-desc\">{{ description }}</p>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-pagehead-actions\"><slot name=\"actions\" /></EActions>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.page {\n  .e-pagehead {\n    display: grid;\n    gap: var(--e-space-3);\n    margin-bottom: var(--e-space-6);\n  }\n\n  .e-pagehead-row {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-pagehead-text {\n    flex: 1 1 18rem;\n    min-width: 0;\n  }\n\n  .e-pagehead-title {\n    margin: 0;\n    font: 500 var(--e-text-4xl) / 1.1 var(--e-font-sans);\n    text-wrap: balance;\n  }\n\n  .e-pagehead-desc {\n    margin: var(--e-space-2) 0 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-lg) / 1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pagehead-title {\n      font-size: var(--e-text-2xl);\n    }\n  }\n\n  .e-pagehead-titlerow {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-pagehead-titlerow > :not(.e-pagehead-title) {\n    margin-top: var(--e-space-1);\n  }\n}\n</style>\n"],"mappings":""}