@eos-ui/vue 0.0.0-stage → 0.1.1

package/dist/components/Popover/EPopover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,98 @@
+/* empty css                */
+import { useMessages as e, usePortalTarget as t } from "../../config.js";
+import { useUid as n } from "../../composables/useUid.js";
+import r from "../Actions/EActions.js";
+import i from "../Icon/EIcon.js";
+/* empty css              */
+import a from "../IconButton/EIconButton.js";
+import { createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, nextTick as h, openBlock as g, ref as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useModel as S, watch as C, withCtx as w } from "vue";
+import { PopoverClose as T, PopoverContent as E, PopoverPortal as D, PopoverRoot as O, PopoverTrigger as k } from "reka-ui";
+//#region src/components/Popover/EPopover.vue?vue&type=script&setup=true&lang.ts
+var A = { class: "e-sr" }, j = {
+	key: 0,
+	class: "e-pop-head"
+}, M = ["id"], N = { class: "e-pop-body" }, P = /*@__PURE__*/ f({
+	inheritAttrs: !1,
+	__name: "EPopover",
+	props: /*@__PURE__*/ p({
+		label: {},
+		title: {},
+		headingLevel: { default: 3 }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(f) {
+		let p = S(f, "modelValue"), P = e(), F = t(), I = n(), L = _(null);
+		return C(p, async (e) => {
+			e && (await h(), document.getElementById(L.value?.getAttribute("aria-controls") ?? "")?.setAttribute("aria-labelledby", `${I.value}-title`));
+		}, { flush: "post" }), (e, t) => (g(), o(x(O), {
+			open: p.value,
+			"onUpdate:open": t[0] ||= (e) => p.value = e
+		}, {
+			default: w(() => [d(x(k), { "as-child": "" }, {
+				default: w(() => [l("button", m({
+					ref_key: "trigger",
+					ref: L,
+					type: "button",
+					class: "e-linkbtn"
+				}, e.$attrs), [
+					d(i, {
+						name: "info",
+						small: ""
+					}),
+					v(e.$slots, "trigger"),
+					l("span", A, ", " + b(f.label), 1)
+				], 16)]),
+				_: 3
+			}), d(x(D), { to: x(F) }, {
+				default: w(() => [d(x(E), {
+					class: "e-popover e-root",
+					side: "bottom",
+					align: "start",
+					"side-offset": 8,
+					"collision-padding": 16
+				}, {
+					default: w(() => [
+						f.title ? (g(), c("div", j, [(g(), o(y(`h${f.headingLevel}`), {
+							id: `${x(I)}-title`,
+							class: "e-pop-title"
+						}, {
+							default: w(() => [u(b(f.title), 1)]),
+							_: 1
+						}, 8, ["id"])), d(x(T), { "as-child": "" }, {
+							default: w(() => [d(a, {
+								icon: "x",
+								label: x(P)("close")
+							}, null, 8, ["label"])]),
+							_: 1
+						})])) : (g(), c("span", {
+							key: 1,
+							id: `${x(I)}-title`,
+							class: "e-sr"
+						}, b(f.label), 9, M)),
+						l("div", N, [v(e.$slots, "default")]),
+						e.$slots.actions ? (g(), o(r, {
+							key: 2,
+							bar: ""
+						}, {
+							default: w(() => [v(e.$slots, "actions")]),
+							_: 3
+						})) : s("", !0)
+					]),
+					_: 3
+				})]),
+				_: 3
+			}, 8, ["to"])]),
+			_: 3
+		}, 8, ["open"]));
+	}
+});
+//#endregion
+export { P as default };
+
+//# sourceMappingURL=EPopover.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Popover/EPopover.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPopover.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_mergeProps","EIcon","_renderSlot","_toDisplayString","_createElementBlock","_resolveDynamicComponent","_createTextVNode","EIconButton","EActions","_createCommentVNode","EActions_default","EIcon_default","EIconButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EPopover_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","open","useModel","__props","t","useMessages","portal","usePortalTarget","id","useUid","trigger","ref","watch","isOpen","nextTick","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverTrigger","createElementVNode","mergeProps","_ctx","renderSlot","toDisplayString","PopoverPortal","PopoverContent","createElementBlock","resolveDynamicComponent","createTextVNode","PopoverClose","\"actions\"","createCommentVNode"],"sources":["../../../src/components/Popover/EPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, ref, watch } from \"vue\";\nimport { PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from \"reka-ui\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** Names the panel for screen readers (when there is no `title`) and is read after the term. */\n    label: string;\n    /** Adds a title row with this title and a Close button. */\n    title?: string;\n    /** The level of the title's heading, so it fits the page outline. Default 3. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** The term, shown with a dotted underline and an info glyph. */\n  trigger(): unknown;\n  /** The explanation. Keep it short; use a Dialog when the reader must decide something. */\n  default(): unknown;\n  /** Buttons in a tinted footer, left-aligned, the main action first. They stack full width on a phone. */\n  actions?(): unknown;\n}>();\n\nconst open = defineModel<boolean>({ default: false });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\nconst id = useUid();\n\nconst trigger = ref<HTMLElement | null>(null);\nwatch(\n  open,\n  async (isOpen) => {\n    if (!isOpen) return;\n    await nextTick();\n    document\n      .getElementById(trigger.value?.getAttribute(\"aria-controls\") ?? \"\")\n      ?.setAttribute(\"aria-labelledby\", `${id.value}-title`);\n  },\n  { flush: \"post\" },\n);\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <button ref=\"trigger\" type=\"button\" class=\"e-linkbtn\" v-bind=\"$attrs\">\n        <EIcon name=\"info\" small />\n        <slot name=\"trigger\" />\n        <span class=\"e-sr\">, {{ label }}</span>\n      </button>\n    </PopoverTrigger>\n    <PopoverPortal :to=\"portal\">\n      <PopoverContent class=\"e-popover e-root\" side=\"bottom\" align=\"start\" :side-offset=\"8\" :collision-padding=\"16\">\n        <div v-if=\"title\" class=\"e-pop-head\">\n          <component :is=\"`h${headingLevel}`\" :id=\"`${id}-title`\" class=\"e-pop-title\">{{ title }}</component>\n          <PopoverClose as-child>\n            <EIconButton icon=\"x\" :label=\"t('close')\" />\n          </PopoverClose>\n        </div>\n        <span v-else :id=\"`${id}-title`\" class=\"e-sr\">{{ label }}</span>\n        <div class=\"e-pop-body\"><slot /></div>\n        <EActions v-if=\"$slots['actions']\" bar><slot name=\"actions\" /></EActions>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-linkbtn {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    position: relative;\n    min-height: 28px;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--e-primary);\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    text-decoration: underline dotted;\n    text-decoration-color: currentcolor;\n    text-underline-offset: 4px;\n    text-decoration-thickness: 2px;\n    cursor: help;\n  }\n\n  .e-linkbtn::after {\n    content: \"\";\n    position: absolute;\n    inset: -8px -4px;\n  }\n\n  .e-linkbtn:hover,\n  .e-linkbtn:active {\n    color: var(--e-ink);\n  }\n\n  .e-pop-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    padding: var(--e-space-1) var(--e-space-1) 0 var(--e-space-4);\n  }\n\n  .e-pop-title {\n    margin: 0;\n    font: 600 var(--e-text-xs) / 1.2 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-muted);\n  }\n\n  .e-pop-body {\n    padding: var(--e-space-3) var(--e-space-4) var(--e-space-4);\n    font: 400 var(--e-text-md) / 1.5 var(--e-font-sans);\n  }\n\n  .e-pop-head + .e-pop-body {\n    padding-top: var(--e-space-1);\n  }\n\n  @media print {\n    .e-linkbtn {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,IAAM6B,IAAO3B,EAAoB6B,GAAA,YAAmB,GAE9CC,IAAIC,EAAY,GAChBC,IAASC,EAAgB,GACzBC,IAAKC,EAAO,GAEZC,IAAUC,EAAwB,IAAI;E,OAC5CC,EACEX,GACA,OAAO,MAAW;GAChB,AAAKY,MACL,MAAMC,EAAS,GACf,SACG,eAAeJ,EAAQ,OAAO,aAAa,eAAe,KAAK,EAAE,CAAA,EAChE,aAAa,mBAAmB,GAAGF,EAAG,MAAM,OAAO;EACzD,GACA,EAAE,OAAO,OAAO,CAClB,I,UAIEjC,EAAA,GAAAC,EAqBcC,EAAAyC,CAAA,GAAA;GArBO,MAAMjB,EAAA;GAAA,iBAAA,AAAAkB,EAAA,QAAA,MAAA,EAAI,QAAAC;;GAC7B,SAAA1C,QAMiB,CANjBC,EAMiBF,EAAA8C,CAAA,GAAA,EAND,YAAA,GAAQ,GAAA;IACtB,SAAA7C,QAIS,CAJTE,EAIS,UAJTC,EAIS;KAJG,SAAA;KAAJ,KAAI6B;KAAU,MAAK;KAAS,OAAM;IAAoBtC,GAAAA,EAAAA,MAAM,GAAA;KAClEO,EAA2BG,GAAA;MAApB,MAAK;MAAO,OAAA;;KACnBC,EAAuB2C,EAAA,QAAA,SAAA;KACvB9C,EAAuC,QAAvCc,GAAmB,OAAEV,EAAGmB,EAAA,KAAK,GAAA,CAAA;;;G,IAGjCxB,EAYgBF,EAAAoD,CAAA,GAAA,EAZA,IAAIpD,EAAA6B,CAAA,EAAM,GAAA;IACxB,SAAA5B,QAUiB,CAVjBC,EAUiBF,EAAAqD,CAAA,GAAA;KAVD,OAAM;KAAmB,MAAK;KAAS,OAAM;KAAS,eAAa;KAAI,qBAAmB;;KACxG,SAAApD,QAKM;MALKyB,EAAA,SAAX5B,EAAA,GAAAU,EAKM,OALNU,GAKM,EAJJpB,EAAA,GAAAC,EAAmGU,EAAA,IAA/EiB,EAAA,cAAY,GAAA;OAAK,IAAE,GAAK1B,EAAA+B,CAAA,EAAE;OAAU,OAAM;;OAAc,SAAA9B,QAAW,CAARS,EAAAH,EAAAmB,EAAA,KAAK,GAAA,CAAA,C;;M,gBACpFxB,EAEeF,EAAAyD,CAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;OACpB,SAAAxD,QAA4C,CAA5CC,EAA4CS,GAAA;QAA/B,MAAK;QAAK,OAAOX,EAAA2B,CAAA,CAAC,CAAA,OAAA;;;M,SAGnC7B,EAAA,GAAAU,EAAgE,QAAA;;OAAlD,IAAE,GAAKR,EAAA+B,CAAA,EAAE;OAAU,OAAM;MAAU,GAAAxB,EAAAmB,EAAA,KAAK,GAAA,GAAAP,CAAA;MACtDhB,EAAsC,OAAtCiB,GAAsC,CAAdd,EAAQ2C,EAAA,QAAA,SAAA,C;MAChBrD,EAAAA,OAAM8D,WAAtB5D,EAAA,GAAAC,EAAyEa,GAAA;;OAAtC,KAAA;;OAAI,SAAAX,QAAuB,CAAvBK,EAAuB2C,EAAA,QAAA,SAAA,C"}

package/dist/components/Popover/index.d.ts

@@ -0,0 +1 @@
+export { default as EPopover } from './EPopover.vue.js';

package/dist/components/Progress/EProgress.js

@@ -0,0 +1,8 @@
+import e from "./EProgress.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                          */
+//#region src/components/Progress/EProgress.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=EProgress.js.map

package/dist/components/Progress/EProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EProgress.js","names":["_sfc_main","EProgress_vue_vue_type_script_setup_true_lang_default","EProgress_default"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What is progressing. Also the bar's accessible name. */\n    label: string;\n    /** How far along, from 0 to `max`. */\n    value: number;\n    /** The value that means finished. */\n    max?: number;\n    /** Text shown at the end of the row. Defaults to a percentage. */\n    valueText?: string;\n  }>(),\n  { max: 100 },\n);\n\nconst percent = computed(() => Math.max(0, Math.min(100, (props.value / (props.max || 100)) * 100)));\n</script>\n\n<template>\n  <div class=\"e-progress\">\n    <div class=\"e-progress-head\">\n      <span class=\"e-progress-label\">{{ label }}</span>\n      <span class=\"e-progress-value\">{{ valueText || Math.round(percent) + \"%\" }}</span>\n    </div>\n    <div\n      class=\"e-progress-track\"\n      role=\"progressbar\"\n      :aria-label=\"label\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"max || 100\"\n      :aria-valuenow=\"value\"\n    >\n      <div class=\"e-progress-fill\" :style=\"{ width: percent + '%' }\"></div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-progress {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-progress-head {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n\n  .e-progress-label {\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n  }\n\n  .e-progress-value {\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--e-muted);\n  }\n\n  .e-progress-track {\n    height: 10px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\n    overflow: hidden;\n  }\n\n  .e-progress-fill {\n    height: 100%;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-primary);\n    box-shadow: inset 0 0 0 1px var(--e-primary);\n    transition: width var(--e-duration-move) var(--e-easing-out);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-progress-fill {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-progress-fill {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Progress/EProgress.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    /** What is progressing. Also the bar's accessible name. */
+    label: string;
+    /** How far along, from 0 to `max`. */
+    value: number;
+    /** The value that means finished. */
+    max?: number;
+    /** Text shown at the end of the row. Defaults to a percentage. */
+    valueText?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Progress/EProgress.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,34 @@
+/* empty css                */
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeStyle as i, openBlock as a, toDisplayString as o } from "vue";
+//#region src/components/Progress/EProgress.vue?vue&type=script&setup=true&lang.ts
+var s = { class: "e-progress" }, c = { class: "e-progress-head" }, l = { class: "e-progress-label" }, u = { class: "e-progress-value" }, d = [
+	"aria-label",
+	"aria-valuemax",
+	"aria-valuenow"
+], f = /*@__PURE__*/ r({
+	__name: "EProgress",
+	props: {
+		label: {},
+		value: {},
+		max: { default: 100 },
+		valueText: {}
+	},
+	setup(r) {
+		let f = r, p = e(() => Math.max(0, Math.min(100, f.value / (f.max || 100) * 100)));
+		return (e, f) => (a(), t("div", s, [n("div", c, [n("span", l, o(r.label), 1), n("span", u, o(r.valueText || Math.round(p.value) + "%"), 1)]), n("div", {
+			class: "e-progress-track",
+			role: "progressbar",
+			"aria-label": r.label,
+			"aria-valuemin": "0",
+			"aria-valuemax": r.max || 100,
+			"aria-valuenow": r.value
+		}, [n("div", {
+			class: "e-progress-fill",
+			style: i({ width: p.value + "%" })
+		}, null, 4)], 8, d)]));
+	}
+});
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=EProgress.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Progress/EProgress.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EProgress.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_normalizeStyle","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EProgress_vue_vue_type_script_setup_true_lang_default","props","__props","percent","computed","openBlock","createElementBlock","createElementVNode","toDisplayString","normalizeStyle"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What is progressing. Also the bar's accessible name. */\n    label: string;\n    /** How far along, from 0 to `max`. */\n    value: number;\n    /** The value that means finished. */\n    max?: number;\n    /** Text shown at the end of the row. Defaults to a percentage. */\n    valueText?: string;\n  }>(),\n  { max: 100 },\n);\n\nconst percent = computed(() => Math.max(0, Math.min(100, (props.value / (props.max || 100)) * 100)));\n</script>\n\n<template>\n  <div class=\"e-progress\">\n    <div class=\"e-progress-head\">\n      <span class=\"e-progress-label\">{{ label }}</span>\n      <span class=\"e-progress-value\">{{ valueText || Math.round(percent) + \"%\" }}</span>\n    </div>\n    <div\n      class=\"e-progress-track\"\n      role=\"progressbar\"\n      :aria-label=\"label\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"max || 100\"\n      :aria-valuenow=\"value\"\n    >\n      <div class=\"e-progress-fill\" :style=\"{ width: percent + '%' }\"></div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-progress {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-progress-head {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n\n  .e-progress-label {\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n  }\n\n  .e-progress-value {\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--e-muted);\n  }\n\n  .e-progress-track {\n    height: 10px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\n    overflow: hidden;\n  }\n\n  .e-progress-fill {\n    height: 100%;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-primary);\n    box-shadow: inset 0 0 0 1px var(--e-primary);\n    transition: width var(--e-duration-move) var(--e-easing-out);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-progress-fill {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-progress-fill {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EAIA,IAAMW,IAAQC,GAcRC,IAAUC,QAAe,KAAK,IAAI,GAAG,KAAK,IAAI,KAAMH,EAAM,SAASA,EAAM,OAAO,OAAQ,GAAG,CAAC,CAAC;E,kBAIjGX,EAAA,GAAAC,EAeM,OAfNI,GAeM,CAdJH,EAGM,OAHNI,GAGM,CAFJJ,EAAiD,QAAjDK,GAAiDJ,EAAfS,EAAA,KAAK,GAAA,CAAA,GACvCV,EAAkF,QAAlFM,GAAkFL,EAAhDS,EAAA,aAAa,KAAK,MAAMC,EAAA,KAAO,IAAA,GAAA,GAAA,CAAA,C,IAEnEX,EASM,OAAA;GARJ,OAAM;GACN,MAAK;GACJ,cAAYU,EAAA;GACb,iBAAc;GACb,iBAAeA,EAAA,OAAG;GAClB,iBAAeA,EAAA;E,IAEhBV,EAAqE,OAAA;GAAhE,OAAM;GAAmB,OAAKE,EAAA,EAAA,OAAWS,EAAA,QAAO,IAAA,CAAA"}

package/dist/components/Progress/index.d.ts

@@ -0,0 +1 @@
+export { default as EProgress } from './EProgress.vue.js';

package/dist/components/RadioGroup/ERadioGroup.js

@@ -0,0 +1,8 @@
+import e from "./ERadioGroup.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                            */
+//#region src/components/RadioGroup/ERadioGroup.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ERadioGroup.js.map

package/dist/components/RadioGroup/ERadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ERadioGroup.js","names":["_sfc_main","ERadioGroup_vue_vue_type_script_setup_true_lang_default","ERadioGroup_default"],"sources":["../../../src/components/RadioGroup/ERadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface RadioOption {\n  value: string;\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, Fragment, useSlots, type FunctionalComponent, type VNode } from \"vue\";\nimport EFieldset from \"../Fieldset/EFieldset.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\nconst props = defineProps<{\n  /** The question, as the group's legend. */\n  label: string;\n  /** Keep the legend for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Five or fewer. A string is both value and label. */\n  options: (string | RadioOption)[];\n  /** Help that is announced with the group. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced with the group. */\n  error?: string;\n  required?: boolean;\n  /** A word beside the legend. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every option. */\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. Generated when left out. */\n  name?: string;\n}>();\n\ndefineSlots<{\n  /** A control shown under its option while that option is chosen, such as an amount field under \"Another amount\". Render nothing for an option that has none. */\n  reveal(props: { option: RadioOption }): unknown;\n}>();\n\nconst model = defineModel<string>();\n\nconst name = useUid(() => props.name);\nconst slots = useSlots();\n\nconst normalised = (): RadioOption[] => props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o));\n\nfunction hasContent(nodes: VNode[]): boolean {\n  return nodes.some((n) =>\n    n.type === Comment ? false : n.type === Fragment ? hasContent((n.children as VNode[] | null) ?? []) : true,\n  );\n}\n\nfunction rows() {\n  return normalised().map((option) => {\n    const chosen = model.value === option.value;\n    const nodes = chosen ? slots.reveal?.({ option }) : undefined;\n    return { option, chosen, reveal: nodes && hasContent(nodes) ? nodes : null };\n  });\n}\n\nconst Nodes: FunctionalComponent<{ nodes: VNode[] }> = (p) => p.nodes;\nNodes.props = [\"nodes\"];\n</script>\n\n<template>\n  <EFieldset\n    :id=\"`${name}-fs`\"\n    class=\"e-radiogroup\"\n    legend-class=\"e-radiogroup-legend\"\n    bare\n    :legend=\"label\"\n    :hide-legend=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  >\n    <template v-for=\"row in rows()\" :key=\"row.option.value\">\n      <label class=\"e-choice\" :class=\"{ 'e-choice--disabled': row.option.disabled, 'e-choice--open': row.reveal }\">\n        <input\n          type=\"radio\"\n          class=\"e-radio\"\n          :name=\"name\"\n          :value=\"row.option.value\"\n          :required=\"required\"\n          :checked=\"row.chosen\"\n          :disabled=\"row.option.disabled\"\n          @change=\"model = row.option.value\"\n        />\n        <span class=\"e-choice-text\">\n          {{ row.option.label }}\n          <span v-if=\"row.option.description\" class=\"e-choice-desc\">{{ row.option.description }}</span>\n        </span>\n      </label>\n      <div v-if=\"row.reveal\" class=\"e-choice-reveal\"><Nodes :nodes=\"row.reveal\" /></div>\n    </template>\n  </EFieldset>\n</template>\n\n<style>\n@layer e.controls {\n  .e-radiogroup {\n    display: grid;\n    gap: 0;\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-radiogroup-legend {\n    padding: 0;\n  }\n\n  .e-radiogroup > .e-field-hint,\n  .e-radiogroup > .e-field-error {\n    margin-top: -6px;\n  }\n\n  .e-choice--open {\n    min-height: 0;\n    padding-bottom: var(--e-space-1);\n  }\n\n  .e-choice-reveal {\n    padding: var(--e-space-1) 0 var(--e-space-2);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/RadioGroup/ERadioGroup.vue.d.ts

@@ -0,0 +1,64 @@
+export interface RadioOption {
+    value: string;
+    label: string;
+    /** A line of detail under the label. */
+    description?: string;
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    /** The question, as the group's legend. */
+    label: string;
+    /** Keep the legend for screen readers and remove it from the page. */
+    hideLabel?: boolean;
+    /** Five or fewer. A string is both value and label. */
+    options: (string | RadioOption)[];
+    /** Help that is announced with the group. */
+    hint?: string;
+    /** What to fix. Replaces the hint and is announced with the group. */
+    error?: string;
+    required?: boolean;
+    /** A word beside the legend. Flag whichever is rarer. */
+    optional?: boolean;
+    /** Disables every option. */
+    disabled?: boolean;
+    /** The name the radios share, submitted with a form. Generated when left out. */
+    name?: string;
+} & {
+    modelValue?: string;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /** The question, as the group's legend. */
+    label: string;
+    /** Keep the legend for screen readers and remove it from the page. */
+    hideLabel?: boolean;
+    /** Five or fewer. A string is both value and label. */
+    options: (string | RadioOption)[];
+    /** Help that is announced with the group. */
+    hint?: string;
+    /** What to fix. Replaces the hint and is announced with the group. */
+    error?: string;
+    required?: boolean;
+    /** A word beside the legend. Flag whichever is rarer. */
+    optional?: boolean;
+    /** Disables every option. */
+    disabled?: boolean;
+    /** The name the radios share, submitted with a form. Generated when left out. */
+    name?: string;
+} & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    /** A control shown under its option while that option is chosen, such as an amount field under "Another amount". Render nothing for an option that has none. */
+    reveal(props: {
+        option: RadioOption;
+    }): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/RadioGroup/ERadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,98 @@
+/* empty css                */
+import { useUid as e } from "../../composables/useUid.js";
+import t from "../Fieldset/EFieldset.js";
+/* empty css                 */
+import { Comment as n, Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, renderList as m, toDisplayString as h, unref as g, useModel as _, useSlots as v, withCtx as y } from "vue";
+//#region src/components/RadioGroup/ERadioGroup.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"name",
+	"value",
+	"required",
+	"checked",
+	"disabled",
+	"onChange"
+], x = { class: "e-choice-text" }, S = {
+	key: 0,
+	class: "e-choice-desc"
+}, C = {
+	key: 0,
+	class: "e-choice-reveal"
+}, w = /*@__PURE__*/ u({
+	__name: "ERadioGroup",
+	props: /*@__PURE__*/ d({
+		label: {},
+		hideLabel: { type: Boolean },
+		options: {},
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		name: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(u) {
+		let d = u, w = _(u, "modelValue"), T = e(() => d.name), E = v(), D = () => d.options.map((e) => typeof e == "string" ? {
+			value: e,
+			label: e
+		} : e);
+		function O(e) {
+			return e.some((e) => e.type === n ? !1 : e.type !== r || O(e.children ?? []));
+		}
+		function k() {
+			return D().map((e) => {
+				let t = w.value === e.value, n = t ? E.reveal?.({ option: e }) : void 0;
+				return {
+					option: e,
+					chosen: t,
+					reveal: n && O(n) ? n : null
+				};
+			});
+		}
+		let A = (e) => e.nodes;
+		return A.props = ["nodes"], (e, n) => (p(), i(t, {
+			id: `${g(T)}-fs`,
+			class: "e-radiogroup",
+			"legend-class": "e-radiogroup-legend",
+			bare: "",
+			legend: u.label,
+			"hide-legend": u.hideLabel,
+			hint: u.hint,
+			error: u.error,
+			required: u.required,
+			optional: u.optional,
+			disabled: u.disabled
+		}, {
+			default: y(() => [(p(!0), o(r, null, m(k(), (e) => (p(), o(r, { key: e.option.value }, [s("label", { class: f(["e-choice", {
+				"e-choice--disabled": e.option.disabled,
+				"e-choice--open": e.reveal
+			}]) }, [s("input", {
+				type: "radio",
+				class: "e-radio",
+				name: g(T),
+				value: e.option.value,
+				required: u.required,
+				checked: e.chosen,
+				disabled: e.option.disabled,
+				onChange: (t) => w.value = e.option.value
+			}, null, 40, b), s("span", x, [c(h(e.option.label) + " ", 1), e.option.description ? (p(), o("span", S, h(e.option.description), 1)) : a("", !0)])], 2), e.reveal ? (p(), o("div", C, [l(A, { nodes: e.reveal }, null, 8, ["nodes"])])) : a("", !0)], 64))), 128))]),
+			_: 1
+		}, 8, [
+			"id",
+			"legend",
+			"hide-legend",
+			"hint",
+			"error",
+			"required",
+			"optional",
+			"disabled"
+		]));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=ERadioGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/RadioGroup/ERadioGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ERadioGroup.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EFieldset","_unref","_withCtx","_createElementBlock","_Fragment","_renderList","_createElementVNode","_normalizeClass","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","EFieldset_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ERadioGroup_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","name","useUid","slots","useSlots","normalised","o","hasContent","nodes","n","Comment","Fragment","rows","chosen","option","Nodes","p","openBlock","createBlock","unref","withCtx","createElementBlock","renderList","row","createElementVNode","normalizeClass","createTextVNode","toDisplayString","createCommentVNode","createVNode"],"sources":["../../../src/components/RadioGroup/ERadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface RadioOption {\n  value: string;\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, Fragment, useSlots, type FunctionalComponent, type VNode } from \"vue\";\nimport EFieldset from \"../Fieldset/EFieldset.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\nconst props = defineProps<{\n  /** The question, as the group's legend. */\n  label: string;\n  /** Keep the legend for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Five or fewer. A string is both value and label. */\n  options: (string | RadioOption)[];\n  /** Help that is announced with the group. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced with the group. */\n  error?: string;\n  required?: boolean;\n  /** A word beside the legend. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every option. */\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. Generated when left out. */\n  name?: string;\n}>();\n\ndefineSlots<{\n  /** A control shown under its option while that option is chosen, such as an amount field under \"Another amount\". Render nothing for an option that has none. */\n  reveal(props: { option: RadioOption }): unknown;\n}>();\n\nconst model = defineModel<string>();\n\nconst name = useUid(() => props.name);\nconst slots = useSlots();\n\nconst normalised = (): RadioOption[] => props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o));\n\nfunction hasContent(nodes: VNode[]): boolean {\n  return nodes.some((n) =>\n    n.type === Comment ? false : n.type === Fragment ? hasContent((n.children as VNode[] | null) ?? []) : true,\n  );\n}\n\nfunction rows() {\n  return normalised().map((option) => {\n    const chosen = model.value === option.value;\n    const nodes = chosen ? slots.reveal?.({ option }) : undefined;\n    return { option, chosen, reveal: nodes && hasContent(nodes) ? nodes : null };\n  });\n}\n\nconst Nodes: FunctionalComponent<{ nodes: VNode[] }> = (p) => p.nodes;\nNodes.props = [\"nodes\"];\n</script>\n\n<template>\n  <EFieldset\n    :id=\"`${name}-fs`\"\n    class=\"e-radiogroup\"\n    legend-class=\"e-radiogroup-legend\"\n    bare\n    :legend=\"label\"\n    :hide-legend=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  >\n    <template v-for=\"row in rows()\" :key=\"row.option.value\">\n      <label class=\"e-choice\" :class=\"{ 'e-choice--disabled': row.option.disabled, 'e-choice--open': row.reveal }\">\n        <input\n          type=\"radio\"\n          class=\"e-radio\"\n          :name=\"name\"\n          :value=\"row.option.value\"\n          :required=\"required\"\n          :checked=\"row.chosen\"\n          :disabled=\"row.option.disabled\"\n          @change=\"model = row.option.value\"\n        />\n        <span class=\"e-choice-text\">\n          {{ row.option.label }}\n          <span v-if=\"row.option.description\" class=\"e-choice-desc\">{{ row.option.description }}</span>\n        </span>\n      </label>\n      <div v-if=\"row.reveal\" class=\"e-choice-reveal\"><Nodes :nodes=\"row.reveal\" /></div>\n    </template>\n  </EFieldset>\n</template>\n\n<style>\n@layer e.controls {\n  .e-radiogroup {\n    display: grid;\n    gap: 0;\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-radiogroup-legend {\n    padding: 0;\n  }\n\n  .e-radiogroup > .e-field-hint,\n  .e-radiogroup > .e-field-error {\n    margin-top: -6px;\n  }\n\n  .e-choice--open {\n    min-height: 0;\n    padding-bottom: var(--e-space-1);\n  }\n\n  .e-choice-reveal {\n    padding: var(--e-space-1) 0 var(--e-space-2);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,IAAMuB,IAAQC,GAyBRC,IAAQzB,EAAmBwB,GAAA,YAAC,GAE5BG,IAAOC,QAAaL,EAAM,IAAI,GAC9BM,IAAQC,EAAS,GAEjBC,UAAkCR,EAAM,QAAQ,KAAK,MAAO,OAAOS,KAAM,WAAW;GAAE,OAAOA;GAAG,OAAOA;EAAE,IAAIA,CAAE;EAErH,SAASC,EAAW,GAAyB;GAC3C,OAAOC,EAAM,MAAM,MACjBC,EAAE,SAASC,IAAU,KAAQD,EAAE,SAASE,KAAWJ,EAAYE,EAAE,YAA+B,CAAC,CAAC,CACpG;EACF;EAEA,SAASG,IAAO;GACd,OAAOP,EAAW,CAAC,CAAC,KAAK,MAAW;IAClC,IAAMQ,IAASd,EAAM,UAAUe,EAAO,OAChCN,IAAQK,IAASV,EAAM,SAAS,EAAE,UAAO,CAAC,IAAI,KAAA;IACpD,OAAO;KAAE;KAAQ;KAAQ,QAAQK,KAASD,EAAWC,CAAK,IAAIA,IAAQ;IAAK;GAC7E,CAAC;EACH;EAEA,IAAMO,KAAkD,MAAMC,EAAE;E,OAChE,EAAM,QAAQ,CAAC,OAAO,I,UAIpBzC,EAAA,GAAAC,EAgCYC,GAAA;GA/BT,IAAE,GAAKC,EAAAuB,CAAA,EAAI;GACZ,OAAM;GACN,gBAAa;GACb,MAAA;GACC,QAAQH,EAAA;GACR,eAAaA,EAAA;GACb,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAED,SAAAnB,QAAqB,EAA/BJ,EAAA,EAAA,GAAAK,EAkBWC,GAAA,MAAAC,EAlBa8B,EAAI,IAAX,O,YAAqB,KAAAW,EAAI,OAAO,M,IAC/CxC,EAeQ,SAAA,EAfD,OAAKC,EAAA,CAAC,YAAU;IAAA,sBAAiCuC,EAAI,OAAO;IAAQ,kBAAoBA,EAAI;GAAM,CAAA,CAAA,E,IACvGxC,EASE,SAAA;IARA,MAAK;IACL,OAAM;IACL,MAAML,EAAAuB,CAAA;IACN,OAAOsB,EAAI,OAAO;IAClB,UAAUzB,EAAA;IACV,SAASyB,EAAI;IACb,UAAUA,EAAI,OAAO;IACrB,WAAM,MAAE,EAAA,QAAQA,EAAI,OAAO;G,iBAE9BxC,EAGO,QAHPQ,GAGO,CAFFN,EAAAC,EAAAqC,EAAI,OAAO,KAAK,IAAG,KACtB,CAAA,GAAYA,EAAI,OAAO,eAAvBhD,EAAA,GAAAK,EAA6F,QAA7FY,GAA6FN,EAAhCqC,EAAI,OAAO,WAAW,GAAA,CAAA,K,kBAG5EA,EAAI,UAAfhD,EAAA,GAAAK,EAAkF,OAAlFa,GAAkF,CAAnCL,EAA6B2B,GAAA,EAArB,OAAOQ,EAAI,O"}

package/dist/components/RadioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ERadioGroup } from './ERadioGroup.vue.js';
+export type { RadioOption } from './ERadioGroup.vue.js';

package/dist/components/RangePicker/ERangePicker.js

@@ -0,0 +1,8 @@
+import e from "./ERangePicker.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                             */
+//#region src/components/RangePicker/ERangePicker.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ERangePicker.js.map

package/dist/components/RangePicker/ERangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ERangePicker.js","names":["_sfc_main","ERangePicker_vue_vue_type_script_setup_true_lang_default","ERangePicker_default"],"sources":["../../../src/components/RangePicker/ERangePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from \"vue\";\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from \"reka-ui\";\nimport EButton from \"../Button/EButton.vue\";\nimport ECalendar from \"../Calendar/ECalendar.vue\";\nimport type { CalendarRange } from \"../Calendar/ECalendar.vue\";\nimport EField from \"../Field/EField.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { addDays, compareDays, isoDate, startOfDay } from \"../Calendar/dates.js\";\nimport { useConfig, useMessages, usePortalTarget } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useQuietFocus } from \"../Select/quietFocus.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\nimport \"../DatePicker/picker.css\";\n\nexport interface RangePreset {\n  /** The button text, such as \"Last 7 days\". */\n  label: string;\n  /** The span the button chooses. */\n  get: () => { start: Date; end: Date };\n}\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  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint and marks both boxes invalid. A typed span that cannot be used shows its own error. */\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 earliest date that can be chosen or typed. */\n  min?: Date;\n  /** The latest date that can be chosen or typed. */\n  max?: Date;\n  /** Submits the first date as `YYYY-MM-DD` with a form. */\n  startName?: string;\n  /** Submits the last date as `YYYY-MM-DD` with a form. */\n  endName?: string;\n  /** Buttons under the calendar that choose a span at once. Default: Last 7 days, Last 30 days, This month. */\n  presets?: RangePreset[];\n  /** The id of the start box; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst start = defineModel<Date | null>(\"start\", { default: null });\nconst end = defineModel<Date | null>(\"end\", { default: null });\n\nconst t = useMessages();\nconst config = useConfig();\nconst loc = useLocale();\nconst portal = usePortalTarget();\nconst attrs = useFieldAttrs();\n\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst shown = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(shown, (el) => !!el.closest(\".e-calpanel, .e-combo\"));\nconst trigger = { onClick: quiet.intent, onKeydown: quiet.intent };\n\nconst startText = ref(loc.formatDate(start.value));\nconst endText = ref(loc.formatDate(end.value));\nconst typedError = ref(\"\");\nconst draft = ref<CalendarRange>({ start: start.value, end: end.value });\nconst calendar = ref<InstanceType<typeof ECalendar> | null>(null);\nconst startInput = ref<HTMLInputElement | null>(null);\n\nwatch([() => start.value?.getTime(), () => end.value?.getTime(), () => config.locale], () => {\n  startText.value = loc.formatDate(start.value);\n  endText.value = loc.formatDate(end.value);\n});\nwatch(open, (isOpen) => {\n  if (isOpen) draft.value = { start: start.value, end: end.value };\n});\n\nconst shownError = computed(() => props.error || typedError.value);\n\nconst presets = computed<RangePreset[]>(() => {\n  if (props.presets) return props.presets;\n  const today = startOfDay(new Date());\n  return [\n    { label: t(\"last7\"), get: () => ({ start: addDays(today, -6), end: today }) },\n    { label: t(\"last30\"), get: () => ({ start: addDays(today, -29), end: today }) },\n    {\n      label: t(\"thisMonth\"),\n      get: () => ({ start: new Date(today.getFullYear(), today.getMonth(), 1, 12), end: today }),\n    },\n  ];\n});\n\nfunction setRange(r: { start: Date | null; end: Date | null }) {\n  start.value = r.start;\n  end.value = r.end;\n  startText.value = loc.formatDate(r.start);\n  endText.value = loc.formatDate(r.end);\n  typedError.value = \"\";\n}\n\nconst outOfBounds = (d: Date) =>\n  (!!props.min && compareDays(d, props.min) < 0) || (!!props.max && compareDays(d, props.max) > 0);\n\nfunction commitText() {\n  const a = startText.value.trim() ? loc.parseDate(startText.value) : null;\n  const b = endText.value.trim() ? loc.parseDate(endText.value) : null;\n  if ((startText.value.trim() && !a) || (endText.value.trim() && !b)) {\n    typedError.value = t(\"datesError\", { format: loc.dateFormatLabel() });\n    return;\n  }\n  const bad = [a, b].find((d) => d && outOfBounds(d));\n  if (bad) {\n    typedError.value = t(\"dateBetween\", {\n      min: loc.formatDate(props.min || bad),\n      max: loc.formatDate(props.max || bad),\n    });\n    return;\n  }\n  if (a && b && compareDays(b, a) < 0) {\n    typedError.value = t(\"endBeforeStart\");\n    return;\n  }\n  setRange({ start: a, end: b });\n}\n\nfunction onRange(r: CalendarRange) {\n  draft.value = r;\n  if (r.start && r.end) {\n    setRange(r);\n    open.value = false;\n  }\n}\nfunction applyPreset(p: RangePreset) {\n  setRange(p.get());\n  open.value = false;\n}\n\nfunction onOpenFocus(e: Event) {\n  e.preventDefault();\n  if (!quiet.personOpened()) return;\n  void nextTick(() => calendar.value?.focusDay());\n}\nfunction onCloseFocus(e: Event) {\n  if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction onEscape(e: KeyboardEvent) {\n  if (calendar.value && calendar.value.view !== \"days\") e.preventDefault();\n}\nfunction onKey(e: KeyboardEvent) {\n  if (e.key === \"Enter\") commitText();\n  else if (e.key === \"ArrowDown\" && e.altKey && !props.disabled) {\n    e.preventDefault();\n    quiet.intent();\n    open.value = true;\n  }\n}\n\ndefineExpose({\n  input: startInput,\n  focus: () => startInput.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=\"shownError\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <PopoverRoot :open=\"shown\" @update:open=\"open = $event\">\n        <PopoverAnchor as-child>\n          <div\n            v-bind=\"attrs.input()\"\n            class=\"e-input-wrap e-combo e-rangefield\"\n            role=\"group\"\n            :aria-labelledby=\"`${field.id}-label`\"\n            :data-invalid=\"shownError ? '' : undefined\"\n            :data-disabled=\"disabled ? '' : undefined\"\n          >\n            <input\n              :id=\"field.id\"\n              ref=\"startInput\"\n              v-model=\"startText\"\n              class=\"e-input e-combo-input\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              :placeholder=\"t('startDate')\"\n              :aria-label=\"t('startDate')\"\n              :disabled=\"disabled\"\n              :required=\"required\"\n              :aria-invalid=\"field.ariaInvalid\"\n              :aria-describedby=\"field.ariaDescribedby\"\n              @input=\"typedError = ''\"\n              @blur=\"commitText\"\n              @keydown=\"onKey\"\n            />\n            <span class=\"e-range-sep\" aria-hidden=\"true\">{{ t(\"to\") }}</span>\n            <input\n              v-model=\"endText\"\n              class=\"e-input e-combo-input\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              :placeholder=\"t('endDate')\"\n              :aria-label=\"t('endDate')\"\n              :disabled=\"disabled\"\n              :required=\"required\"\n              :aria-invalid=\"field.ariaInvalid\"\n              :aria-describedby=\"field.ariaDescribedby\"\n              @input=\"typedError = ''\"\n              @blur=\"commitText\"\n              @keydown=\"onKey\"\n            />\n            <input v-if=\"startName\" type=\"hidden\" :name=\"startName\" :value=\"isoDate(start)\" />\n            <input v-if=\"endName\" type=\"hidden\" :name=\"endName\" :value=\"isoDate(end)\" />\n            <PopoverTrigger as-child v-bind=\"trigger\">\n              <button type=\"button\" class=\"e-combo-btn\" :aria-label=\"t('chooseDates')\" :disabled=\"disabled\">\n                <EIcon name=\"calendar\" />\n              </button>\n            </PopoverTrigger>\n          </div>\n        </PopoverAnchor>\n        <PopoverPortal :to=\"portal\">\n          <PopoverContent\n            class=\"e-calpanel e-root\"\n            :aria-label=\"t('chooseDates')\"\n            :dir=\"config.dir ?? undefined\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"6\"\n            :collision-padding=\"8\"\n            @open-auto-focus=\"onOpenFocus\"\n            @close-auto-focus=\"onCloseFocus\"\n            @escape-key-down=\"onEscape\"\n          >\n            <ECalendar\n              ref=\"calendar\"\n              mode=\"range\"\n              :start=\"draft.start\"\n              :end=\"draft.end\"\n              :min=\"min\"\n              :max=\"max\"\n              :footer=\"false\"\n              @range-change=\"onRange\"\n            />\n            <div class=\"e-cal-presets\">\n              <EButton v-for=\"p in presets\" :key=\"p.label\" variant=\"outline\" @click=\"applyPreset(p)\">\n                {{ p.label }}\n              </EButton>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n      </PopoverRoot>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  .e-cal-presets {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-2);\n    margin-top: var(--e-space-3);\n    padding-top: var(--e-space-3);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-rangefield .e-input {\n    flex: 1 1 5rem;\n  }\n\n  .e-range-sep {\n    flex: none;\n    font: 500 var(--e-text-sm) / 1 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/RangePicker/ERangePicker.vue.d.ts

@@ -0,0 +1,56 @@
+export interface RangePreset {
+    /** The button text, such as "Last 7 days". */
+    label: string;
+    /** The span the button chooses. */
+    get: () => {
+        start: Date;
+        end: Date;
+    };
+}
+type __VLS_Props = {
+    /** The visible label, a mono kicker above the field. */
+    label: string;
+    /** Keep the label for screen readers and remove it from the page. */
+    hideLabel?: boolean;
+    /** Help that stays under the field. */
+    hint?: string;
+    /** What to fix. Replaces the hint and marks both boxes invalid. A typed span that cannot be used shows its own error. */
+    error?: string;
+    /** A word beside the label. */
+    required?: boolean;
+    /** A word beside the label. Flag whichever is rarer. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** The earliest date that can be chosen or typed. */
+    min?: Date;
+    /** The latest date that can be chosen or typed. */
+    max?: Date;
+    /** Submits the first date as `YYYY-MM-DD` with a form. */
+    startName?: string;
+    /** Submits the last date as `YYYY-MM-DD` with a form. */
+    endName?: string;
+    /** Buttons under the calendar that choose a span at once. Default: Last 7 days, Last 30 days, This month. */
+    presets?: RangePreset[];
+    /** The id of the start box; the label points at it. Generated when left out. */
+    id?: string;
+};
+type __VLS_ModelProps = {
+    "start"?: Date | null;
+    "end"?: Date | null;
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    input: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:start": (value: Date | null) => any;
+    "update:end": (value: Date | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:start"?: ((value: Date | null) => any) | undefined;
+    "onUpdate:end"?: ((value: Date | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;