@eos-ui/vue 0.0.0-stage → 0.1.1

package/dist/components/ToastProvider/EToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EToastProvider.js","names":["_sfc_main","EToastProvider_vue_vue_type_script_setup_true_lang_default","EToastProvider_default"],"sources":["../../../src/components/ToastProvider/EToastProvider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { inject, onBeforeUnmount, provide, ref, watch, type FunctionalComponent, type VNodeChild } from \"vue\";\nimport { useEventListener } from \"@vueuse/core\";\nimport EToast from \"../Toast/EToast.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { createToasts, TOAST_KEY } from \"../../composables/useToast.js\";\nimport \"../../styles/base.css\";\n\ndefineSlots<{\n  /** The app. Call `useToast()` anywhere inside it. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\nconst target = usePortalTarget();\n\nconst provided = inject(TOAST_KEY, null);\nconst store = provided ?? createToasts();\nif (!provided) {\n  provide(TOAST_KEY, store);\n  onBeforeUnmount(() => store.clear());\n}\n\nconst region = ref<HTMLElement>();\nlet hovering = false;\nlet focused = false;\nconst settle = () => (hovering || focused ? store.pause() : store.resume());\n\nuseEventListener(region, \"mouseenter\", () => {\n  hovering = true;\n  settle();\n});\nuseEventListener(region, \"mouseleave\", () => {\n  hovering = false;\n  settle();\n});\nuseEventListener(region, \"focusin\", () => {\n  focused = true;\n  settle();\n});\nuseEventListener(region, \"focusout\", (e: FocusEvent) => {\n  if (region.value?.contains(e.relatedTarget as Node | null)) return;\n  focused = false;\n  settle();\n});\n\nwatch(\n  () => store.items.length,\n  (n) => {\n    if (n) return;\n    hovering = false;\n    focused = false;\n    store.resume();\n  },\n);\n\nconst Render: FunctionalComponent<{ content: VNodeChild | (() => VNodeChild) }> = (p) =>\n  typeof p.content === \"function\" ? p.content() : p.content;\nRender.props = [\"content\"];\n</script>\n\n<template>\n  <slot />\n  <Teleport :to=\"target\">\n    <div ref=\"region\" class=\"e-root e-toast-region\" role=\"region\" :aria-label=\"t('toastRegion')\">\n      <EToast\n        v-for=\"item in store.items\"\n        :key=\"item.id\"\n        :tone=\"item.tone\"\n        :title=\"item.title\"\n        @close=\"store.dismiss(item.id)\"\n      >\n        <template v-if=\"item.message\" #default>{{ item.message }}</template>\n        <template v-if=\"item.action\" #action><Render :content=\"item.action\" /></template>\n      </EToast>\n    </div>\n  </Teleport>\n</template>\n\n<style>\n@layer e.containers {\n  .e-toast-region {\n    justify-items: end;\n    position: fixed;\n    inset-inline-end: max(16px, env(safe-area-inset-right, 0px));\n    bottom: max(16px, env(safe-area-inset-bottom, 0px));\n    z-index: var(--e-z-toast);\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-toast-region > .e-toast {\n    width: min(24rem, calc(100vw - 32px));\n  }\n\n  .e-toast-region > .e-toast--actions {\n    width: min(40rem, calc(100vw - 32px));\n  }\n\n  @media print {\n    .e-toast-region {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ToastProvider/EToastProvider.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Slots = {
+    /** The app. Call `useToast()` anywhere inside it. */
+    default?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ToastProvider/EToastProvider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+/* empty css                */
+import { TOAST_KEY as e, createToasts as t } from "../../composables/useToast.js";
+import { useMessages as n, usePortalTarget as r } from "../../config.js";
+import i from "../Toast/EToast.js";
+import { Fragment as a, Teleport as o, createBlock as s, createElementBlock as c, createElementVNode as l, createSlots as u, createTextVNode as d, createVNode as f, defineComponent as p, inject as m, onBeforeUnmount as h, openBlock as g, provide as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, watch as C, withCtx as w } from "vue";
+import { useEventListener as T } from "@vueuse/core";
+//#region src/components/ToastProvider/EToastProvider.vue?vue&type=script&setup=true&lang.ts
+var E = ["aria-label"], D = /*@__PURE__*/ p({
+	__name: "EToastProvider",
+	setup(p) {
+		let D = n(), O = r(), k = m(e, null), A = k ?? t();
+		k || (_(e, A), h(() => A.clear()));
+		let j = v(), M = !1, N = !1, P = () => M || N ? A.pause() : A.resume();
+		T(j, "mouseenter", () => {
+			M = !0, P();
+		}), T(j, "mouseleave", () => {
+			M = !1, P();
+		}), T(j, "focusin", () => {
+			N = !0, P();
+		}), T(j, "focusout", (e) => {
+			j.value?.contains(e.relatedTarget) || (N = !1, P());
+		}), C(() => A.items.length, (e) => {
+			e || (M = !1, N = !1, A.resume());
+		});
+		let F = (e) => typeof e.content == "function" ? e.content() : e.content;
+		return F.props = ["content"], (e, t) => (g(), c(a, null, [b(e.$slots, "default"), (g(), s(o, { to: S(O) }, [l("div", {
+			ref_key: "region",
+			ref: j,
+			class: "e-root e-toast-region",
+			role: "region",
+			"aria-label": S(D)("toastRegion")
+		}, [(g(!0), c(a, null, y(S(A).items, (e) => (g(), s(i, {
+			key: e.id,
+			tone: e.tone,
+			title: e.title,
+			onClose: (t) => S(A).dismiss(e.id)
+		}, u({ _: 2 }, [e.message ? {
+			name: "default",
+			fn: w(() => [d(x(e.message), 1)]),
+			key: "0"
+		} : void 0, e.action ? {
+			name: "action",
+			fn: w(() => [f(F, { content: e.action }, null, 8, ["content"])]),
+			key: "1"
+		} : void 0]), 1032, [
+			"tone",
+			"title",
+			"onClose"
+		]))), 128))], 8, E)], 8, ["to"]))], 64));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=EToastProvider.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ToastProvider/EToastProvider.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EToastProvider.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderSlot","_createBlock","_Teleport","_unref","_createElementVNode","_renderList","EToast","_createSlots","_withCtx","_createTextVNode","_toDisplayString","_createVNode","EToast_default","_hoisted_1","EToastProvider_vue_vue_type_script_setup_true_lang_default","t","useMessages","target","usePortalTarget","provided","inject","TOAST_KEY","store","createToasts","provide","onBeforeUnmount","region","ref","hovering","focused","settle","useEventListener","watch","n","Render","p","openBlock","createElementBlock","Fragment","renderSlot","_ctx","createBlock","Teleport","unref","createElementVNode","renderList","item","createSlots","withCtx","createTextVNode","toDisplayString","createVNode"],"sources":["../../../src/components/ToastProvider/EToastProvider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { inject, onBeforeUnmount, provide, ref, watch, type FunctionalComponent, type VNodeChild } from \"vue\";\nimport { useEventListener } from \"@vueuse/core\";\nimport EToast from \"../Toast/EToast.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { createToasts, TOAST_KEY } from \"../../composables/useToast.js\";\nimport \"../../styles/base.css\";\n\ndefineSlots<{\n  /** The app. Call `useToast()` anywhere inside it. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\nconst target = usePortalTarget();\n\nconst provided = inject(TOAST_KEY, null);\nconst store = provided ?? createToasts();\nif (!provided) {\n  provide(TOAST_KEY, store);\n  onBeforeUnmount(() => store.clear());\n}\n\nconst region = ref<HTMLElement>();\nlet hovering = false;\nlet focused = false;\nconst settle = () => (hovering || focused ? store.pause() : store.resume());\n\nuseEventListener(region, \"mouseenter\", () => {\n  hovering = true;\n  settle();\n});\nuseEventListener(region, \"mouseleave\", () => {\n  hovering = false;\n  settle();\n});\nuseEventListener(region, \"focusin\", () => {\n  focused = true;\n  settle();\n});\nuseEventListener(region, \"focusout\", (e: FocusEvent) => {\n  if (region.value?.contains(e.relatedTarget as Node | null)) return;\n  focused = false;\n  settle();\n});\n\nwatch(\n  () => store.items.length,\n  (n) => {\n    if (n) return;\n    hovering = false;\n    focused = false;\n    store.resume();\n  },\n);\n\nconst Render: FunctionalComponent<{ content: VNodeChild | (() => VNodeChild) }> = (p) =>\n  typeof p.content === \"function\" ? p.content() : p.content;\nRender.props = [\"content\"];\n</script>\n\n<template>\n  <slot />\n  <Teleport :to=\"target\">\n    <div ref=\"region\" class=\"e-root e-toast-region\" role=\"region\" :aria-label=\"t('toastRegion')\">\n      <EToast\n        v-for=\"item in store.items\"\n        :key=\"item.id\"\n        :tone=\"item.tone\"\n        :title=\"item.title\"\n        @close=\"store.dismiss(item.id)\"\n      >\n        <template v-if=\"item.message\" #default>{{ item.message }}</template>\n        <template v-if=\"item.action\" #action><Render :content=\"item.action\" /></template>\n      </EToast>\n    </div>\n  </Teleport>\n</template>\n\n<style>\n@layer e.containers {\n  .e-toast-region {\n    justify-items: end;\n    position: fixed;\n    inset-inline-end: max(16px, env(safe-area-inset-right, 0px));\n    bottom: max(16px, env(safe-area-inset-bottom, 0px));\n    z-index: var(--e-z-toast);\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-toast-region > .e-toast {\n    width: min(24rem, calc(100vw - 32px));\n  }\n\n  .e-toast-region > .e-toast--actions {\n    width: min(40rem, calc(100vw - 32px));\n  }\n\n  @media print {\n    .e-toast-region {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;EAaA,IAAMkB,IAAIC,EAAY,GAChBC,IAASC,EAAgB,GAEzBC,IAAWC,EAAOC,GAAW,IAAI,GACjCC,IAAQH,KAAYI,EAAa;EACvC,AAAKJ,MACHK,EAAQH,GAAWC,CAAK,GACxBG,QAAsBH,EAAM,MAAM,CAAC;EAGrC,IAAMI,IAASC,EAAiB,GAC5BC,IAAW,IACXC,IAAU,IACRC,UAAgBF,KAAYC,IAAUP,EAAM,MAAM,IAAIA,EAAM,OAAO;EAoBzE,AAlBAS,EAAiBL,GAAQ,oBAAoB;GAE3C,AADA,IAAW,IACXI,EAAO;EACT,CAAC,GACDC,EAAiBL,GAAQ,oBAAoB;GAE3C,AADA,IAAW,IACXI,EAAO;EACT,CAAC,GACDC,EAAiBL,GAAQ,iBAAiB;GAExC,AADA,IAAU,IACVI,EAAO;EACT,CAAC,GACDC,EAAiBL,GAAQ,aAAa,MAAkB;GACtD,AAAIA,EAAO,OAAO,SAAS,EAAE,aAA4B,MACzD,IAAU,IACVI,EAAO;EACT,CAAC,GAEDE,QACQV,EAAM,MAAM,SACjB,MAAM;GACL,AAAIW,MACJ,IAAW,IACX,IAAU,IACVX,EAAM,OAAO;EACf,CACF;EAEA,IAAMY,KAA6E,MACjF,OAAOC,EAAE,WAAY,aAAaA,EAAE,QAAQ,IAAIA,EAAE;E,OACpD,EAAO,QAAQ,CAAC,SAAS,I,2BAIvBnC,EAAQwC,EAAA,QAAA,SAAA,IACR3C,EAAA,GAAAI,EAaWC,GAAA,EAbA,IAAIC,EAAAc,CAAA,EAAM,GAAA,CACnBb,EAWM,OAAA;GAXG,SAAA;GAAJ,KAAIsB;GAAS,OAAM;GAAwB,MAAK;GAAU,cAAYvB,EAAAY,CAAA,CAAC,CAAA,aAAA;E,KAC1ElB,EAAA,EAAA,GAAAC,EASSC,GAAA,MAAAM,EARQF,EAAAmB,CAAA,CAAK,CAAC,QAAd,OADTzB,EAAA,GAAAI,EASSK,GAAA;GAPN,KAAKwC,EAAK;GACV,MAAMA,EAAK;GACX,OAAOA,EAAK;GACZ,UAAK,MAAE3C,EAAAmB,CAAA,CAAK,CAAC,QAAQwB,EAAK,EAAE;E,gBAEbA,EAAK,U;GAAU,MAAA;GAAQ,IAAAtC,QAAkB,CAAfC,EAAAC,EAAAoC,EAAK,OAAO,GAAA,CAAA,C;;E,YACtCA,EAAK,S;GAAS,MAAA;GAAO,IAAAtC,QAAiC,CAAjCG,EAAiCuB,GAAA,EAAxB,SAASY,EAAK,O"}

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

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

package/dist/components/Toggle/EToggle.js

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

package/dist/components/Toggle/EToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EToggle.js","names":["_sfc_main","EToggle_vue_vue_type_script_setup_true_lang_default","EToggle_default"],"sources":["../../../src/components/Toggle/EToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EButton from \"../Button/EButton.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** An icon before the label. */\n  icon?: IconProp;\n  disabled?: boolean;\n}>();\n\ndefineSlots<{\n  /** The label. It names the option, so keep it the same in both states. */\n  default(): unknown;\n}>();\n\nconst model = defineModel<boolean>({ default: false });\n</script>\n\n<template>\n  <EButton\n    variant=\"outline\"\n    class=\"e-toggle\"\n    :icon=\"icon\"\n    :disabled=\"disabled\"\n    :aria-pressed=\"model ? 'true' : 'false'\"\n    @click=\"model = !model\"\n  >\n    <slot />\n  </EButton>\n</template>\n\n<style>\n@layer e.composites {\n  .e-toggle[aria-pressed=\"true\"],\n  .e-toggle[aria-pressed=\"true\"]:hover {\n    border-color: var(--e-primary);\n    background: var(--e-surface-tint);\n    color: var(--e-primary);\n    box-shadow: inset 0 0 0 1px var(--e-primary);\n  }\n\n  @media (forced-colors: active) {\n    .e-toggle[aria-pressed=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Toggle/EToggle.vue.d.ts

@@ -0,0 +1,27 @@
+import { IconProp } from '../../icons/types.js';
+type __VLS_Props = {
+    /** An icon before the label. */
+    icon?: IconProp;
+    disabled?: boolean;
+};
+type __VLS_Slots = {
+    /** The label. It names the option, so keep it the same in both states. */
+    default(): unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Toggle/EToggle.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,40 @@
+/* empty css                */
+import e from "../Button/EButton.js";
+import { createBlock as t, defineComponent as n, mergeModels as r, openBlock as i, renderSlot as a, useModel as o, withCtx as s } from "vue";
+//#region src/components/Toggle/EToggle.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ n({
+	__name: "EToggle",
+	props: /*@__PURE__*/ r({
+		icon: {},
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(n) {
+		let r = o(n, "modelValue");
+		return (o, c) => (i(), t(e, {
+			variant: "outline",
+			class: "e-toggle",
+			icon: n.icon,
+			disabled: n.disabled,
+			"aria-pressed": r.value ? "true" : "false",
+			onClick: c[0] ||= (e) => r.value = !r.value
+		}, {
+			default: s(() => [a(o.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"icon",
+			"disabled",
+			"aria-pressed"
+		]));
+	}
+});
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=EToggle.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Toggle/EToggle.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EToggle.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EButton","_withCtx","_renderSlot","EButton_default","EToggle_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","model","useModel","__props","openBlock","createBlock","_cache","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Toggle/EToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EButton from \"../Button/EButton.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** An icon before the label. */\n  icon?: IconProp;\n  disabled?: boolean;\n}>();\n\ndefineSlots<{\n  /** The label. It names the option, so keep it the same in both states. */\n  default(): unknown;\n}>();\n\nconst model = defineModel<boolean>({ default: false });\n</script>\n\n<template>\n  <EButton\n    variant=\"outline\"\n    class=\"e-toggle\"\n    :icon=\"icon\"\n    :disabled=\"disabled\"\n    :aria-pressed=\"model ? 'true' : 'false'\"\n    @click=\"model = !model\"\n  >\n    <slot />\n  </EButton>\n</template>\n\n<style>\n@layer e.composites {\n  .e-toggle[aria-pressed=\"true\"],\n  .e-toggle[aria-pressed=\"true\"]:hover {\n    border-color: var(--e-primary);\n    background: var(--e-surface-tint);\n    color: var(--e-primary);\n    box-shadow: inset 0 0 0 1px var(--e-primary);\n  }\n\n  @media (forced-colors: active) {\n    .e-toggle[aria-pressed=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,IAAMU,IAAQV,EAAoBY,GAAA,YAAmB;E,kBAInDX,EAAA,GAAAC,EASUC,GAAA;GARR,SAAQ;GACR,OAAM;GACL,MAAMS,EAAA;GACN,UAAUA,EAAA;GACV,gBAAcF,EAAA,QAAK,SAAA;GACnB,SAAK,AAAAK,EAAA,QAAA,MAAE,EAAA,QAAK,CAAIL,EAAA;;GAEjB,SAAAN,QAAQ,CAARC,EAAQa,EAAA,QAAA,SAAA,C"}

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

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

package/dist/components/Tooltip/ETooltip.js

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

package/dist/components/Tooltip/ETooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ETooltip.js","names":["_sfc_main","ETooltip_vue_vue_type_script_setup_true_lang_default","ETooltip_default"],"sources":["../../../src/components/Tooltip/ETooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from \"reka-ui\";\nimport { usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\ndefineProps<{\n  /** What the tooltip says: a name for the control, never anything you must read or click. */\n  label: string;\n}>();\n\ndefineSlots<{\n  /** One focusable element: an icon button, a link. It becomes the trigger and is described by the bubble. */\n  default(): unknown;\n}>();\n\nconst portal = usePortalTarget();\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nlet hold: ReturnType<typeof setTimeout> | undefined;\nfunction touchStart(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  requestAnimationFrame(() => (open.value = true));\n}\nfunction touchEnd(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  hold = setTimeout(() => (open.value = false), 1500);\n}\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"400\" :skip-delay-duration=\"300\">\n    <TooltipRoot v-model:open=\"open\">\n      <TooltipTrigger as-child @pointerdown=\"touchStart\" @pointerup=\"touchEnd\" @pointercancel=\"touchEnd\">\n        <slot />\n      </TooltipTrigger>\n      <TooltipPortal :to=\"portal\">\n        <TooltipContent class=\"e-tip-bubble e-root\" side=\"top\" align=\"center\" :side-offset=\"8\" v-bind=\"$attrs\">\n          {{ label }}\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tip-bubble {\n    z-index: var(--e-z-tooltip);\n    width: max-content;\n    max-width: 16rem;\n    padding: 6px 10px;\n    border-radius: var(--e-radius-sm);\n    background: var(--e-ink);\n    color: var(--e-surface);\n    font: 400 var(--e-text-sm) / 1.35 var(--e-font-sans);\n    text-align: center;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Tooltip/ETooltip.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    /** What the tooltip says: a name for the control, never anything you must read or click. */
+    label: string;
+};
+type __VLS_Slots = {
+    /** One focusable element: an icon button, a link. It becomes the trigger and is described by the bubble. */
+    default(): unknown;
+};
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Tooltip/ETooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,62 @@
+/* empty css                */
+import { usePortalTarget as e } from "../../config.js";
+import { createBlock as t, createTextVNode as n, createVNode as r, defineComponent as i, mergeModels as a, mergeProps as o, openBlock as s, renderSlot as c, toDisplayString as l, unref as u, useModel as d, withCtx as f } from "vue";
+import { TooltipContent as p, TooltipPortal as m, TooltipProvider as h, TooltipRoot as g, TooltipTrigger as _ } from "reka-ui";
+//#region src/components/Tooltip/ETooltip.vue?vue&type=script&setup=true&lang.ts
+var v = /*@__PURE__*/ i({
+	inheritAttrs: !1,
+	__name: "ETooltip",
+	props: /*@__PURE__*/ a({ label: {} }, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(i) {
+		let a = e(), v = d(i, "open"), y;
+		function b(e) {
+			e.pointerType === "touch" && (clearTimeout(y), requestAnimationFrame(() => v.value = !0));
+		}
+		function x(e) {
+			e.pointerType === "touch" && (clearTimeout(y), y = setTimeout(() => v.value = !1, 1500));
+		}
+		return (e, d) => (s(), t(u(h), {
+			"delay-duration": 400,
+			"skip-delay-duration": 300
+		}, {
+			default: f(() => [r(u(g), {
+				open: v.value,
+				"onUpdate:open": d[0] ||= (e) => v.value = e
+			}, {
+				default: f(() => [r(u(_), {
+					"as-child": "",
+					onPointerdown: b,
+					onPointerup: x,
+					onPointercancel: x
+				}, {
+					default: f(() => [c(e.$slots, "default")]),
+					_: 3
+				}), r(u(m), { to: u(a) }, {
+					default: f(() => [r(u(p), o({
+						class: "e-tip-bubble e-root",
+						side: "top",
+						align: "center",
+						"side-offset": 8
+					}, e.$attrs), {
+						default: f(() => [n(l(i.label), 1)]),
+						_: 1
+					}, 16)]),
+					_: 1
+				}, 8, ["to"])]),
+				_: 3
+			}, 8, ["open"])]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=ETooltip.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Tooltip/ETooltip.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ETooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_renderSlot","_mergeProps","_createTextVNode","_toDisplayString","ETooltip_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","portal","usePortalTarget","open","useModel","__props","hold","touchStart","touchEnd","openBlock","createBlock","unref","TooltipProvider","withCtx","createVNode","TooltipRoot","_cache","$event","TooltipTrigger","renderSlot","_ctx","TooltipPortal","TooltipContent","mergeProps","createTextVNode","toDisplayString"],"sources":["../../../src/components/Tooltip/ETooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from \"reka-ui\";\nimport { usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\ndefineProps<{\n  /** What the tooltip says: a name for the control, never anything you must read or click. */\n  label: string;\n}>();\n\ndefineSlots<{\n  /** One focusable element: an icon button, a link. It becomes the trigger and is described by the bubble. */\n  default(): unknown;\n}>();\n\nconst portal = usePortalTarget();\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nlet hold: ReturnType<typeof setTimeout> | undefined;\nfunction touchStart(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  requestAnimationFrame(() => (open.value = true));\n}\nfunction touchEnd(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  hold = setTimeout(() => (open.value = false), 1500);\n}\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"400\" :skip-delay-duration=\"300\">\n    <TooltipRoot v-model:open=\"open\">\n      <TooltipTrigger as-child @pointerdown=\"touchStart\" @pointerup=\"touchEnd\" @pointercancel=\"touchEnd\">\n        <slot />\n      </TooltipTrigger>\n      <TooltipPortal :to=\"portal\">\n        <TooltipContent class=\"e-tip-bubble e-root\" side=\"top\" align=\"center\" :side-offset=\"8\" v-bind=\"$attrs\">\n          {{ label }}\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tip-bubble {\n    z-index: var(--e-z-tooltip);\n    width: max-content;\n    max-width: 16rem;\n    padding: 6px 10px;\n    border-radius: var(--e-radius-sm);\n    background: var(--e-ink);\n    color: var(--e-surface);\n    font: 400 var(--e-text-sm) / 1.35 var(--e-font-sans);\n    text-align: center;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiBA,IAAMc,IAASC,EAAgB,GACzBC,IAAOf,EAAoBiB,GAAC,MAA0B,GAExDC;EACJ,SAASC,EAAW,GAAiB;GACnC,AAAI,EAAE,gBAAgB,YACtB,aAAaD,CAAI,GACjB,4BAA6B,EAAK,QAAQ,EAAK;EACjD;EACA,SAASE,EAAS,GAAiB;GACjC,AAAI,EAAE,gBAAgB,YACtB,aAAaF,CAAI,GACjB,IAAO,iBAAkB,EAAK,QAAQ,IAAQ,IAAI;EACpD;E,kBAIEjB,EAAA,GAAAC,EAWkBC,EAAAqB,CAAA,GAAA;GAXA,kBAAgB;GAAM,uBAAqB;;GAC3D,SAAApB,QASc,CATdC,EAScF,EAAAwB,CAAA,GAAA;IATO,MAAMZ,EAAA;IAAA,iBAAA,AAAAa,EAAA,QAAA,MAAA,EAAI,QAAAC;;IAC7B,SAAAzB,QAEiB,CAFjBC,EAEiBF,EAAA2B,CAAA,GAAA;KAFD,YAAA;KAAU,eAAaX;KAAa,aAAWC;KAAW,iBAAeA;;KACvF,SAAAhB,QAAQ,CAARE,EAAQ0B,EAAA,QAAA,SAAA,C;;I,IAEV3B,EAIgBF,EAAA8B,CAAA,GAAA,EAJA,IAAI9B,EAAAU,CAAA,EAAM,GAAA;KACxB,SAAAT,QAEiB,CAFjBC,EAEiBF,EAAA+B,CAAA,GAFjB3B,EAEiB;MAFD,OAAM;MAAsB,MAAK;MAAM,OAAM;MAAU,eAAa;KAAWR,GAAAA,EAAAA,MAAM,GAAA;MACnG,SAAAK,QAAW,CAARI,EAAAC,EAAAQ,EAAA,KAAK,GAAA,CAAA,C"}

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

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

package/dist/components/Upload/EUpload.js

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

package/dist/components/Upload/EUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUpload.js","names":["_sfc_main","EUpload_vue_vue_type_script_setup_true_lang_default","EUpload_default"],"sources":["../../../src/components/Upload/EUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the dropzone. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Accepted extensions, such as `.pdf,.jpg`. Shown under the prompt. */\n  accept?: string;\n  multiple?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** Say what is accepted and how large before the person tries. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input 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  /** Ignores drops and clicks and dims the edge. */\n  disabled?: boolean;\n  /** The id of the file input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** The chosen or dropped files, the same list as the model. */\n  files: [files: File[]];\n}>();\n\nconst model = defineModel<File[]>({ default: () => [] });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst over = ref(false);\nconst input = ref<HTMLInputElement | null>(null);\nconst acceptHint = computed(() => props.accept?.replace(/\\./g, \"\").replace(/,/g, \", \").toUpperCase());\n\nfunction take(list: FileList | null | undefined) {\n  const files = Array.from(list ?? []);\n  model.value = files;\n  emit(\"files\", files);\n}\nfunction onDragOver(e: DragEvent) {\n  e.preventDefault();\n  if (!props.disabled) over.value = true;\n}\nfunction onDrop(e: DragEvent) {\n  e.preventDefault();\n  over.value = false;\n  if (!props.disabled) take(e.dataTransfer?.files);\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      <div>\n        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n        <label\n          :for=\"field.id\"\n          class=\"e-drop\"\n          :class=\"{ 'e-drop--over': over, 'e-drop--disabled': disabled }\"\n          @dragover=\"onDragOver\"\n          @dragleave=\"over = false\"\n          @drop=\"onDrop\"\n        >\n          <EIcon name=\"upload\" />\n          <span class=\"e-drop-main\">\n            {{ t(\"dragHere\") }}\n            <span class=\"e-drop-pick\">{{ t(\"chooseOne\") }}</span>\n          </span>\n          <span v-if=\"acceptHint\" class=\"e-drop-hint\">{{ acceptHint }}</span>\n        </label>\n        <input\n          :id=\"field.id\"\n          ref=\"input\"\n          type=\"file\"\n          class=\"e-drop-input\"\n          :name=\"name\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :aria-invalid=\"field.ariaInvalid\"\n          v-bind=\"attrs.input(field.ariaDescribedby)\"\n          @change=\"take(($event.target as HTMLInputElement).files)\"\n        />\n        <ul v-if=\"model.length\" class=\"e-files\">\n          <li v-for=\"f in model\" :key=\"f.name\">\n            <EIcon name=\"file\" />\n            <span class=\"e-file-name\">{{ f.name }}</span>\n            <span class=\"e-file-size\">{{ Math.max(1, Math.round(f.size / 1024)) }} KB</span>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-drop {\n    display: grid;\n    justify-items: center;\n    gap: var(--e-space-1);\n    padding: var(--e-space-6) var(--e-space-4);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    text-align: center;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-drop:hover,\n  .e-drop--over {\n    background: var(--e-surface-tint);\n    border-color: var(--e-ink);\n  }\n\n  .e-drop-main {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n  }\n\n  .e-drop-pick {\n    color: var(--e-primary);\n    font-weight: 500;\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }\n\n  .e-drop-hint {\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    letter-spacing: 0.06em;\n    color: var(--e-muted);\n  }\n\n  .e-drop-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-drop-input:focus-visible + .e-files,\n  .e-field:focus-within .e-drop {\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  .e-files {\n    display: grid;\n    gap: 0;\n    margin: var(--e-space-2) 0 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-files li {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    padding: var(--e-space-2) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 400 var(--e-text-md)/1.3 var(--e-font-sans);\n  }\n\n  .e-file-name {\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-file-size {\n    font: 500 var(--e-text-xs)/1 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-drop {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Upload/EUpload.vue.d.ts

@@ -0,0 +1,39 @@
+type __VLS_Props = {
+    /** The visible label, a mono kicker above the dropzone. */
+    label: string;
+    /** Keep the label for screen readers and remove it from the page. */
+    hideLabel?: boolean;
+    /** Accepted extensions, such as `.pdf,.jpg`. Shown under the prompt. */
+    accept?: string;
+    multiple?: boolean;
+    /** The name submitted with a form. */
+    name?: string;
+    /** Say what is accepted and how large before the person tries. */
+    hint?: string;
+    /** What to fix. Replaces the hint, marks the input invalid and is announced. */
+    error?: string;
+    /** A word beside the label. */
+    required?: boolean;
+    /** A word beside the label. Flag whichever is rarer. */
+    optional?: boolean;
+    /** Ignores drops and clicks and dims the edge. */
+    disabled?: boolean;
+    /** The id of the file input; the label points at it. Generated when left out. */
+    id?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: File[];
+};
+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:modelValue": (value: File[]) => any;
+    files: (files: File[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+    onFiles?: ((files: File[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Upload/EUpload.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,115 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { useFieldAttrs as t } from "../../composables/useFieldAttrs.js";
+import n from "../Icon/EIcon.js";
+import r from "../Field/EField.js";
+import { Fragment as i, computed as a, 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, normalizeClass as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, useModel as x, withCtx as S } from "vue";
+//#region src/components/Upload/EUpload.vue?vue&type=script&setup=true&lang.ts
+var C = ["for"], w = { class: "e-drop-main" }, T = { class: "e-drop-pick" }, E = {
+	key: 0,
+	class: "e-drop-hint"
+}, D = [
+	"id",
+	"name",
+	"accept",
+	"multiple",
+	"disabled",
+	"required",
+	"aria-invalid"
+], O = {
+	key: 0,
+	class: "e-files"
+}, k = { class: "e-file-name" }, A = { class: "e-file-size" }, j = /*@__PURE__*/ f({
+	inheritAttrs: !1,
+	__name: "EUpload",
+	props: /*@__PURE__*/ p({
+		label: {},
+		hideLabel: { type: Boolean },
+		accept: {},
+		multiple: { type: Boolean },
+		name: {},
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ p(["files"], ["update:modelValue"]),
+	setup(f, { expose: p, emit: j }) {
+		let M = f, N = j, P = x(f, "modelValue"), F = e(), I = t(), L = _(!1), R = _(null), z = a(() => M.accept?.replace(/\./g, "").replace(/,/g, ", ").toUpperCase());
+		function B(e) {
+			let t = Array.from(e ?? []);
+			P.value = t, N("files", t);
+		}
+		function V(e) {
+			e.preventDefault(), M.disabled || (L.value = !0);
+		}
+		function H(e) {
+			e.preventDefault(), L.value = !1, M.disabled || B(e.dataTransfer?.files);
+		}
+		return p({
+			input: R,
+			focus: () => R.value?.focus()
+		}), (e, t) => (g(), o(r, m(b(I).wrapper(), {
+			id: f.id,
+			label: f.label,
+			"hide-label": f.hideLabel,
+			hint: f.hint,
+			error: f.error,
+			required: f.required,
+			optional: f.optional
+		}), {
+			default: S((e) => [l("div", null, [
+				l("label", {
+					for: e.id,
+					class: h(["e-drop", {
+						"e-drop--over": L.value,
+						"e-drop--disabled": f.disabled
+					}]),
+					onDragover: V,
+					onDragleave: t[0] ||= (e) => L.value = !1,
+					onDrop: H
+				}, [
+					d(n, { name: "upload" }),
+					l("span", w, [u(y(b(F)("dragHere")) + " ", 1), l("span", T, y(b(F)("chooseOne")), 1)]),
+					z.value ? (g(), c("span", E, y(z.value), 1)) : s("", !0)
+				], 42, C),
+				l("input", m({
+					id: e.id,
+					ref_key: "input",
+					ref: R,
+					type: "file",
+					class: "e-drop-input",
+					name: f.name,
+					accept: f.accept,
+					multiple: f.multiple,
+					disabled: f.disabled,
+					required: f.required,
+					"aria-invalid": e.ariaInvalid
+				}, b(I).input(e.ariaDescribedby), { onChange: t[1] ||= (e) => B(e.target.files) }), null, 16, D),
+				P.value.length ? (g(), c("ul", O, [(g(!0), c(i, null, v(P.value, (e) => (g(), c("li", { key: e.name }, [
+					d(n, { name: "file" }),
+					l("span", k, y(e.name), 1),
+					l("span", A, y(Math.max(1, Math.round(e.size / 1024))) + " KB", 1)
+				]))), 128))])) : s("", !0)
+			])]),
+			_: 1
+		}, 16, [
+			"id",
+			"label",
+			"hide-label",
+			"hint",
+			"error",
+			"required",
+			"optional"
+		]));
+	}
+});
+//#endregion
+export { j as default };
+
+//# sourceMappingURL=EUpload.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Upload/EUpload.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUpload.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_normalizeClass","_createVNode","EIcon","_createTextVNode","_toDisplayString","_createElementBlock","_createCommentVNode","_Fragment","_renderList","EIcon_default","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","EUpload_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","emit","model","useModel","t","useMessages","attrs","useFieldAttrs","over","ref","input","acceptHint","computed","take","files","list","onDragOver","onDrop","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","field","normalizeClass","_cache","createVNode","createTextVNode","toDisplayString","createElementBlock","createCommentVNode","$event","Fragment","renderList","f"],"sources":["../../../src/components/Upload/EUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the dropzone. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Accepted extensions, such as `.pdf,.jpg`. Shown under the prompt. */\n  accept?: string;\n  multiple?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** Say what is accepted and how large before the person tries. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input 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  /** Ignores drops and clicks and dims the edge. */\n  disabled?: boolean;\n  /** The id of the file input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** The chosen or dropped files, the same list as the model. */\n  files: [files: File[]];\n}>();\n\nconst model = defineModel<File[]>({ default: () => [] });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst over = ref(false);\nconst input = ref<HTMLInputElement | null>(null);\nconst acceptHint = computed(() => props.accept?.replace(/\\./g, \"\").replace(/,/g, \", \").toUpperCase());\n\nfunction take(list: FileList | null | undefined) {\n  const files = Array.from(list ?? []);\n  model.value = files;\n  emit(\"files\", files);\n}\nfunction onDragOver(e: DragEvent) {\n  e.preventDefault();\n  if (!props.disabled) over.value = true;\n}\nfunction onDrop(e: DragEvent) {\n  e.preventDefault();\n  over.value = false;\n  if (!props.disabled) take(e.dataTransfer?.files);\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      <div>\n        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n        <label\n          :for=\"field.id\"\n          class=\"e-drop\"\n          :class=\"{ 'e-drop--over': over, 'e-drop--disabled': disabled }\"\n          @dragover=\"onDragOver\"\n          @dragleave=\"over = false\"\n          @drop=\"onDrop\"\n        >\n          <EIcon name=\"upload\" />\n          <span class=\"e-drop-main\">\n            {{ t(\"dragHere\") }}\n            <span class=\"e-drop-pick\">{{ t(\"chooseOne\") }}</span>\n          </span>\n          <span v-if=\"acceptHint\" class=\"e-drop-hint\">{{ acceptHint }}</span>\n        </label>\n        <input\n          :id=\"field.id\"\n          ref=\"input\"\n          type=\"file\"\n          class=\"e-drop-input\"\n          :name=\"name\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :aria-invalid=\"field.ariaInvalid\"\n          v-bind=\"attrs.input(field.ariaDescribedby)\"\n          @change=\"take(($event.target as HTMLInputElement).files)\"\n        />\n        <ul v-if=\"model.length\" class=\"e-files\">\n          <li v-for=\"f in model\" :key=\"f.name\">\n            <EIcon name=\"file\" />\n            <span class=\"e-file-name\">{{ f.name }}</span>\n            <span class=\"e-file-size\">{{ Math.max(1, Math.round(f.size / 1024)) }} KB</span>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-drop {\n    display: grid;\n    justify-items: center;\n    gap: var(--e-space-1);\n    padding: var(--e-space-6) var(--e-space-4);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    text-align: center;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-drop:hover,\n  .e-drop--over {\n    background: var(--e-surface-tint);\n    border-color: var(--e-ink);\n  }\n\n  .e-drop-main {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n  }\n\n  .e-drop-pick {\n    color: var(--e-primary);\n    font-weight: 500;\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }\n\n  .e-drop-hint {\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    letter-spacing: 0.06em;\n    color: var(--e-muted);\n  }\n\n  .e-drop-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-drop-input:focus-visible + .e-files,\n  .e-field:focus-within .e-drop {\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  .e-files {\n    display: grid;\n    gap: 0;\n    margin: var(--e-space-2) 0 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-files li {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    padding: var(--e-space-2) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 400 var(--e-text-md)/1.3 var(--e-font-sans);\n  }\n\n  .e-file-name {\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-file-size {\n    font: 500 var(--e-text-xs)/1 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-drop {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,IAAMgC,IAAQC,GAwBRC,IAAOH,GAKPI,IAAQnC,EAAmBiC,GAAA,YAAsB,GAEjDI,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAOC,EAAI,EAAK,GAChBC,IAAQD,EAA6B,IAAI,GACzCE,IAAaC,QAAeb,EAAM,QAAQ,QAAQ,OAAO,EAAE,CAAC,CAAC,QAAQ,MAAM,IAAI,CAAC,CAAC,YAAY,CAAC;EAEpG,SAASc,EAAK,GAAmC;GAC/C,IAAMC,IAAQ,MAAM,KAAKC,KAAQ,CAAC,CAAC;GAEnC,AADA,EAAM,QAAQD,GACdb,EAAK,SAASa,CAAK;EACrB;EACA,SAASE,EAAW,GAAc;GAEhC,AADA,EAAE,eAAe,GACZjB,EAAM,aAAU,EAAK,QAAQ;EACpC;EACA,SAASkB,EAAO,GAAc;GAG5B,AAFA,EAAE,eAAe,GACjB,EAAK,QAAQ,IACRlB,EAAM,YAAUc,EAAK,EAAE,cAAc,KAAK;EACjD;E,OAEAhB,EAAa;GACX;GACA,aAAaa,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAIC1C,EAAA,GAAAC,EAmDSC,GAnDTC,EACUC,EAkDDkC,CAAA,CAlDM,CAAC,QAAO,GAAA;GACpB,IAAIN,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAO3B,GAAE,MAAK,CACvBC,EAsCM,OAAA,MAAA;IApCJA,EAcQ,SAAA;KAbL,KAAKkD,EAAM;KACZ,OAAKjD,EAAA,CAAC,UAAQ;MAAA,gBACYiC,EAAA;MAAI,oBAAsBR,EAAA;KAAQ,CAAA,CAAA;KAC3D,YAAUgB;KACV,aAAS,AAAAU,EAAA,QAAA,MAAE,EAAA,QAAI;KACT;;KAEPlD,EAAuBC,GAAA,EAAhB,MAAK,SAAQ,CAAA;KACpBH,EAGO,QAHPa,GAGO,CAFFT,EAAAC,EAAAP,EAAAgC,CAAA,CAAC,CAAA,UAAA,CAAA,IAAe,KACnB,CAAA,GAAA9B,EAAqD,QAArDc,GAAqDT,EAAxBP,EAAAgC,CAAA,CAAC,CAAA,WAAA,CAAA,GAAA,CAAA,C;KAEpBO,EAAA,SAAZ3C,EAAA,GAAAY,EAAmE,QAAnES,GAAmEV,EAApBgC,EAAA,KAAU,GAAA,CAAA,K;;IAE3DrC,EAaE,SAbFH,EAaE;KAZC,IAAIqD,EAAM;KACP,SAAA;KAAJ,KAAId;KACJ,MAAK;KACL,OAAM;KACL,MAAMV,EAAA;KACN,QAAQA,EAAA;KACR,UAAUA,EAAA;KACV,UAAUA,EAAA;KACV,UAAUA,EAAA;KACV,gBAAcwB,EAAM;IACb,GAAApD,EAAAkC,CAAA,CAAK,CAAC,MAAMkB,EAAM,eAAe,GAAA,EACxC,UAAM,AAAAE,EAAA,QAAA,MAAEb,EAAMmB,EAAO,OAA4B,KAAK,E;IAE/C9B,EAAA,MAAM,UAAhBlC,EAAA,GAAAY,EAMK,MANLW,GAMK,EALHvB,EAAA,EAAA,GAAAY,EAIKE,GAAA,MAAAC,EAJWmB,EAAA,QAAL,OAAXlC,EAAA,GAAAY,EAIK,MAAA,EAJmB,KAAKuD,EAAE,K;KAC7B3D,EAAqBC,GAAA,EAAd,MAAK,OAAM,CAAA;KAClBH,EAA6C,QAA7CkB,GAA6Cb,EAAhBwD,EAAE,IAAI,GAAA,CAAA;KACnC7D,EAAgF,QAAhFmB,GAAgFd,EAAnD,KAAK,IAAG,GAAI,KAAK,MAAMwD,EAAE,OAAI,IAAA,CAAA,CAAA,IAAY,OAAG,CAAA"}

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

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

package/dist/components/VisuallyHidden/EVisuallyHidden.js

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

package/dist/components/VisuallyHidden/EVisuallyHidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EVisuallyHidden.js","names":["_sfc_main","EVisuallyHidden_vue_vue_type_script_setup_true_lang_default","EVisuallyHidden_default"],"sources":["../../../src/components/VisuallyHidden/EVisuallyHidden.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The element to render. */\n    as?: string;\n  }>(),\n  { as: \"span\" },\n);\n\ndefineSlots<{\n  /** The text that is read out but not shown. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-sr\"><slot /></component>\n</template>\n\n<style>\n/* stylelint-disable-next-line block-no-empty -- the layer declaration is the point */\n@layer e.primitives {\n}\n</style>\n"],"mappings":""}

package/dist/components/VisuallyHidden/EVisuallyHidden.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    /** The element to render. */
+    as?: string;
+};
+type __VLS_Slots = {
+    /** The text that is read out but not shown. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VisuallyHidden/EVisuallyHidden.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,17 @@
+/* empty css                */
+import { createBlock as e, defineComponent as t, openBlock as n, renderSlot as r, resolveDynamicComponent as i, withCtx as a } from "vue";
+//#region src/components/VisuallyHidden/EVisuallyHidden.vue?vue&type=script&setup=true&lang.ts
+var o = /*@__PURE__*/ t({
+	__name: "EVisuallyHidden",
+	props: { as: { default: "span" } },
+	setup(t) {
+		return (o, s) => (n(), e(i(t.as), { class: "e-sr" }, {
+			default: a(() => [r(o.$slots, "default")]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=EVisuallyHidden.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VisuallyHidden/EVisuallyHidden.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EVisuallyHidden.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_renderSlot","EVisuallyHidden_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","resolveDynamicComponent","__props","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/VisuallyHidden/EVisuallyHidden.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The element to render. */\n    as?: string;\n  }>(),\n  { as: \"span\" },\n);\n\ndefineSlots<{\n  /** The text that is read out but not shown. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-sr\"><slot /></component>\n</template>\n\n<style>\n/* stylelint-disable-next-line block-no-empty -- the layer declaration is the point */\n@layer e.primitives {\n}\n</style>\n"],"mappings":";;;;;;;E,kBAkBEA,EAAA,GAAAC,EAAqDC,EAArCO,EAAA,EAAE,GAAA,EAAE,OAAM,OAAM,GAAA;GAAC,SAAAN,QAAQ,CAARC,EAAQQ,EAAA,QAAA,SAAA,C"}

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

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

package/dist/composables/focusInside.d.ts

@@ -0,0 +1,2 @@
+/** A click on the padding or the symbol of a boxed input puts the cursor in the input. Buttons and links inside keep their own click. */
+export declare function focusInside(e: MouseEvent): void;

package/dist/composables/focusInside.js

@@ -0,0 +1,11 @@
+//#region src/composables/focusInside.ts
+function e(e) {
+	let t = e.target;
+	if (t.closest("button, a")) return;
+	let n = e.currentTarget.querySelector("input");
+	n && t !== n && !n.disabled && n.focus();
+}
+//#endregion
+export { e as focusInside };
+
+//# sourceMappingURL=focusInside.js.map

package/dist/composables/focusInside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusInside.js","names":["focusInside","target","el"],"sources":["../../src/composables/focusInside.ts"],"sourcesContent":["/** A click on the padding or the symbol of a boxed input puts the cursor in the input. Buttons and links inside keep their own click. */\nexport function focusInside(e: MouseEvent): void {\n  const target = e.target as Element;\n  if (target.closest(\"button, a\")) return;\n  const el = (e.currentTarget as Element).querySelector(\"input\");\n  if (el && target !== el && !el.disabled) el.focus();\n}\n"],"mappings":";AACA,SAAgBA,EAAY,GAAqB;CAC/C,IAAMC,IAAS,EAAE;CACjB,IAAIA,EAAO,QAAQ,WAAW,GAAG;CACjC,IAAMC,IAAM,EAAE,cAA0B,cAAc,OAAO;CAC7D,AAAIA,KAAMD,MAAWC,KAAM,CAACA,EAAG,YAAUA,EAAG,MAAM;AACpD"}

package/dist/composables/useFieldAttrs.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Splits a form control's fallthrough attributes. `class` and `style` stay on the wrapper; everything else
+ * (name, autocomplete, maxlength, aria-*, data-*, listeners such as onBlur and onKeydown) goes to the real input.
+ * Use it with `defineOptions({ inheritAttrs: false })`.
+ */
+export declare function useFieldAttrs(): {
+    wrapper: () => {
+        class: import('vue').ClassValue;
+        style: import('vue').StyleValue;
+    };
+    input: (describedby?: string | undefined) => Record<string, unknown>;
+};