@eos-ui/vue 0.0.0-stage → 0.1.0

package/dist/components/Select/ESelectControl.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESelectControl.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","_mergeProps","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_Fragment","_renderList","ESelectOption","EIcon_default","ESelectOption_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESelectControl_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","model","useModel","t","useMessages","portal","usePortalTarget","sections","computed","sectionOptions","selected","o","typed","typedAt","open","isOpen","quiet","useQuietFocus","el","now","closeFocus","keydown","typeahead","list","from","j","openBlock","createElementBlock","createVNode","unref","SelectRoot","_cache","$event","withCtx","SelectTrigger","mergeProps","createBlock","createCommentVNode","createTextVNode","toDisplayString","SelectPortal","SelectContent","SelectViewport","Fragment","renderList","i","section","SelectGroup","SelectLabel"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n  SelectContent,\n  SelectGroup,\n  SelectLabel,\n  SelectPortal,\n  SelectRoot,\n  SelectTrigger,\n  SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n  /** The normalised options. */\n  options: EOption[];\n  placeholder?: string | undefined;\n  disabled?: boolean | undefined;\n  required?: boolean | undefined;\n  name?: string | undefined;\n  /** Names the list. */\n  label?: string | undefined;\n  /** Attributes for the button: id, aria-*, data-*, listeners. */\n  triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n  isOpen,\n  (now) => {\n    if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n  },\n  { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n  if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n  quiet.intent();\n  typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n  if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n  if (e.key === \" \" && !typed) return;\n  const now = Date.now();\n  typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n  typedAt = now;\n  const list = props.options;\n  const from = list.findIndex((o) => o.value === model.value);\n  for (let j = 0; j < list.length; j++) {\n    const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n    if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n      model.value = o.value;\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <div class=\"e-sel\">\n    <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n      <SelectTrigger\n        class=\"e-input e-sel-trigger\"\n        :tabindex=\"isOpen ? -1 : undefined\"\n        v-bind=\"triggerAttrs\"\n        @pointerdown=\"quiet.intent\"\n        @keydown=\"keydown\"\n      >\n        <span v-if=\"selected\" class=\"e-sel-value\">\n          <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n        </span>\n        <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n        <EIcon name=\"chevron-down\" bold />\n      </SelectTrigger>\n      <SelectPortal :to=\"portal\">\n        <SelectContent\n          position=\"popper\"\n          align=\"start\"\n          :side-offset=\"6\"\n          :collision-padding=\"8\"\n          :body-lock=\"false\"\n          class=\"e-popover e-listpanel e-root\"\n          :aria-label=\"label\"\n          @close-auto-focus=\"closeFocus\"\n        >\n          <SelectViewport>\n            <template v-for=\"(section, i) in sections\" :key=\"i\">\n              <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n                <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n                <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n              </SelectGroup>\n              <template v-else>\n                <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n              </template>\n            </template>\n          </SelectViewport>\n        </SelectContent>\n      </SelectPortal>\n    </SelectRoot>\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-sel {\n    position: relative;\n  }\n\n  .e-sel-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    padding-inline-end: var(--e-space-3);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .e-sel-trigger[aria-expanded=\"true\"] {\n    border-color: var(--e-ink);\n    background-color: var(--e-surface);\n  }\n\n  .e-sel-value {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .e-sel-placeholder {\n    color: var(--e-muted);\n  }\n\n  .e-sel-trigger > .e-icon {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/Select/ESelectOption.js

@@ -0,0 +1,7 @@
+import e from "./ESelectOption.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/Select/ESelectOption.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ESelectOption.js.map

package/dist/components/Select/ESelectOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESelectOption.js","names":["_sfc_main","ESelectOption_vue_vue_type_script_setup_true_lang_default","ESelectOption_default"],"sources":["../../../src/components/Select/ESelectOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectItem, SelectItemText } from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { EOption } from \"./options.js\";\n\ndefineProps<{\n  /** The option to show. */\n  option: EOption;\n  /** Whether it is the chosen one: bold, with a check. */\n  selected: boolean;\n}>();\n</script>\n\n<template>\n  <SelectItem\n    :value=\"option.value\"\n    :disabled=\"option.disabled\"\n    :text-value=\"option.label\"\n    class=\"e-opt\"\n    :class=\"{ 'e-opt--selected': selected, 'e-opt--disabled': option.disabled }\"\n  >\n    <EIcon v-if=\"option.icon\" :name=\"option.icon\" />\n    <SelectItemText class=\"e-opt-text\">\n      <span class=\"e-opt-label\">{{ option.label }}</span>\n      <span v-if=\"option.description\" class=\"e-opt-desc\">{{ option.description }}</span>\n    </SelectItemText>\n    <EIcon v-if=\"selected\" name=\"check\" bold />\n  </SelectItem>\n</template>\n"],"mappings":""}

package/dist/components/Select/ESelectOption.vue.d.ts

@@ -0,0 +1,10 @@
+import { EOption } from './options.js';
+type __VLS_Props = {
+    /** The option to show. */
+    option: EOption;
+    /** Whether it is the chosen one: bold, with a check. */
+    selected: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Select/ESelectOption.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import e from "../Icon/EIcon.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, toDisplayString as l, unref as u, withCtx as d } from "vue";
+import { SelectItem as f, SelectItemText as p } from "reka-ui";
+//#region src/components/Select/ESelectOption.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "e-opt-label" }, h = {
+	key: 0,
+	class: "e-opt-desc"
+}, g = /*@__PURE__*/ o({
+	__name: "ESelectOption",
+	props: {
+		option: {},
+		selected: { type: Boolean }
+	},
+	setup(o) {
+		return (g, _) => (c(), t(u(f), {
+			value: o.option.value,
+			disabled: o.option.disabled,
+			"text-value": o.option.label,
+			class: s(["e-opt", {
+				"e-opt--selected": o.selected,
+				"e-opt--disabled": o.option.disabled
+			}])
+		}, {
+			default: d(() => [
+				o.option.icon ? (c(), t(e, {
+					key: 0,
+					name: o.option.icon
+				}, null, 8, ["name"])) : n("", !0),
+				a(u(p), { class: "e-opt-text" }, {
+					default: d(() => [i("span", m, l(o.option.label), 1), o.option.description ? (c(), r("span", h, l(o.option.description), 1)) : n("", !0)]),
+					_: 1
+				}),
+				o.selected ? (c(), t(e, {
+					key: 1,
+					name: "check",
+					bold: ""
+				})) : n("", !0)
+			]),
+			_: 1
+		}, 8, [
+			"value",
+			"disabled",
+			"text-value",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=ESelectOption.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Select/ESelectOption.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESelectOption.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","EIcon","_createCommentVNode","_createVNode","_createElementVNode","_toDisplayString","_createElementBlock","EIcon_default","_hoisted_1","_hoisted_2","ESelectOption_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","unref","SelectItem","__props","normalizeClass","withCtx","createCommentVNode","createVNode","SelectItemText","createElementVNode","toDisplayString","createElementBlock"],"sources":["../../../src/components/Select/ESelectOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectItem, SelectItemText } from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { EOption } from \"./options.js\";\n\ndefineProps<{\n  /** The option to show. */\n  option: EOption;\n  /** Whether it is the chosen one: bold, with a check. */\n  selected: boolean;\n}>();\n</script>\n\n<template>\n  <SelectItem\n    :value=\"option.value\"\n    :disabled=\"option.disabled\"\n    :text-value=\"option.label\"\n    class=\"e-opt\"\n    :class=\"{ 'e-opt--selected': selected, 'e-opt--disabled': option.disabled }\"\n  >\n    <EIcon v-if=\"option.icon\" :name=\"option.icon\" />\n    <SelectItemText class=\"e-opt-text\">\n      <span class=\"e-opt-label\">{{ option.label }}</span>\n      <span v-if=\"option.description\" class=\"e-opt-desc\">{{ option.description }}</span>\n    </SelectItemText>\n    <EIcon v-if=\"selected\" name=\"check\" bold />\n  </SelectItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;E,kBAcEA,EAAA,GAAAC,EAaaC,EAAAgB,CAAA,GAAA;GAZV,OAAOC,EAAA,OAAO;GACd,UAAUA,EAAA,OAAO;GACjB,cAAYA,EAAA,OAAO;GACpB,OAAKhB,EAAA,CAAC,SAAO;IAAA,mBACgBgB,EAAA;IAAQ,mBAAqBA,EAAA,OAAO;GAAQ,CAAA,CAAA;;GAEzE,SAAAf,QAAgD;IAAnCe,EAAA,OAAO,QAApBnB,EAAA,GAAAC,EAAgDI,GAAA;;KAArB,MAAMc,EAAA,OAAO;;IACxCZ,EAGiBL,EAAAsB,CAAA,GAAA,EAHD,OAAM,aAAY,GAAA;KAChC,SAAApB,QAAmD,CAAnDI,EAAmD,QAAnDI,GAAmDH,EAAtBU,EAAA,OAAO,KAAK,GAAA,CAAA,GAC7BA,EAAA,OAAO,eAAnBnB,EAAA,GAAAU,EAAkF,QAAlFG,GAAkFJ,EAA5BU,EAAA,OAAO,WAAW,GAAA,CAAA,K;;;IAE7DA,EAAA,YAAbnB,EAAA,GAAAC,EAA2CI,GAAA;;KAApB,MAAK;KAAQ,MAAA"}

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

@@ -0,0 +1,2 @@
+export { default as ESelect } from './ESelect.vue.js';
+export type { EOption, EOptionInput } from './options.js';

package/dist/components/Select/options.d.ts

@@ -0,0 +1,27 @@
+import { IconProp } from '../../icons/types.js';
+/** One choice in a Select, Combobox, Autocomplete or MultiSelect. */
+export interface EOption {
+    /** What the model holds when this option is chosen. Never an empty string. */
+    value: string;
+    /** What people read. */
+    label: string;
+    /** A second, muted line under the label. Searched too. */
+    description?: string;
+    /** An icon before the label. */
+    icon?: IconProp;
+    /** A heading for a run of options. A new heading starts when this changes from the option before. */
+    group?: string;
+    /** Not choosable. Stays visible, muted. */
+    disabled?: boolean;
+}
+/** An option as a consumer writes it: a bare string stands for `{ value: s, label: s }`. */
+export type EOptionInput = string | EOption;
+/** A run of options under one heading (or none). */
+export interface EOptionSection {
+    group: string | undefined;
+    options: EOption[];
+}
+/** Turns strings into options. */
+export declare function normalizeOptions(options: readonly EOptionInput[] | undefined): EOption[];
+/** Splits options into runs under one heading, in order. A heading repeats only where the group changes. */
+export declare function sectionOptions(options: readonly EOption[]): EOptionSection[];

package/dist/components/Select/options.js

@@ -0,0 +1,22 @@
+//#region src/components/Select/options.ts
+function e(e) {
+	return (e ?? []).map((e) => typeof e == "string" ? {
+		value: e,
+		label: e
+	} : e);
+}
+function t(e) {
+	let t = [];
+	for (let n of e) {
+		let e = t[t.length - 1];
+		e && e.group === n.group ? e.options.push(n) : t.push({
+			group: n.group,
+			options: [n]
+		});
+	}
+	return t;
+}
+//#endregion
+export { e as normalizeOptions, t as sectionOptions };
+
+//# sourceMappingURL=options.js.map

package/dist/components/Select/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","names":["normalizeOptions","options","o","sectionOptions","sections","option","last"],"sources":["../../../src/components/Select/options.ts"],"sourcesContent":["import type { IconProp } from \"../../icons/types.js\";\n\n/** One choice in a Select, Combobox, Autocomplete or MultiSelect. */\nexport interface EOption {\n  /** What the model holds when this option is chosen. Never an empty string. */\n  value: string;\n  /** What people read. */\n  label: string;\n  /** A second, muted line under the label. Searched too. */\n  description?: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** A heading for a run of options. A new heading starts when this changes from the option before. */\n  group?: string;\n  /** Not choosable. Stays visible, muted. */\n  disabled?: boolean;\n}\n\n/** An option as a consumer writes it: a bare string stands for `{ value: s, label: s }`. */\nexport type EOptionInput = string | EOption;\n\n/** A run of options under one heading (or none). */\nexport interface EOptionSection {\n  group: string | undefined;\n  options: EOption[];\n}\n\n/** Turns strings into options. */\nexport function normalizeOptions(options: readonly EOptionInput[] | undefined): EOption[] {\n  return (options ?? []).map((o) => (typeof o === \"string\" ? { value: o, label: o } : o));\n}\n\n/** Splits options into runs under one heading, in order. A heading repeats only where the group changes. */\nexport function sectionOptions(options: readonly EOption[]): EOptionSection[] {\n  const sections: EOptionSection[] = [];\n  for (const option of options) {\n    const last = sections[sections.length - 1];\n    if (last && last.group === option.group) last.options.push(option);\n    else sections.push({ group: option.group, options: [option] });\n  }\n  return sections;\n}\n"],"mappings":";AA4BA,SAAgBA,EAAiB,GAAyD;CACxF,QAAQC,KAAW,CAAC,EAAA,CAAG,KAAK,MAAO,OAAOC,KAAM,WAAW;EAAE,OAAOA;EAAG,OAAOA;CAAE,IAAIA,CAAE;AACxF;AAGA,SAAgBC,EAAe,GAA+C;CAC5E,IAAMC,IAA6B,CAAC;CACpC,KAAK,IAAMC,KAAUJ,GAAS;EAC5B,IAAMK,IAAOF,EAASA,EAAS,SAAS;EACxC,AAAIE,KAAQA,EAAK,UAAUD,EAAO,QAAOC,EAAK,QAAQ,KAAKD,CAAM,IAC5DD,EAAS,KAAK;GAAE,OAAOC,EAAO;GAAO,SAAS,CAACA,CAAM;EAAE,CAAC;CAC/D;CACA,OAAOD;AACT"}

package/dist/components/Select/quietFocus.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+/**
+ * Keeps a popup from moving focus when it is opened or closed from outside (`v-model:open`, or open from the first
+ * render). A person's pointer or key on the trigger (`intent`) keeps the component's own focus management.
+ * `inside` says whether an element is part of the popup's content.
+ */
+export declare function useQuietFocus(open: Ref<boolean>, inside: (el: Element) => boolean): {
+    intent: () => void;
+    personOpened: () => boolean;
+    returnsFocus: () => boolean;
+    undoFocusSteal: () => void;
+};

package/dist/components/Select/quietFocus.js

@@ -0,0 +1,40 @@
+import { watch as e } from "vue";
+//#region src/components/Select/quietFocus.ts
+function t(t, n) {
+	let r = !1, i = !1, a;
+	function o() {
+		r = !0;
+	}
+	function s() {
+		let e = r;
+		return r = !1, e;
+	}
+	function c() {
+		return r = !1, i;
+	}
+	e(t, (e) => {
+		e || (i = !!document.activeElement && n(document.activeElement));
+	}, { flush: "sync" });
+	function l() {
+		a?.();
+		let e = document.activeElement, t = (t) => {
+			let r = t.target;
+			r && n(r) && (e && e !== document.body && e.isConnected ? e.focus({ preventScroll: !0 }) : r.blur());
+		};
+		document.addEventListener("focusin", t, !0);
+		let r = setTimeout(() => a?.(), 400);
+		a = () => {
+			document.removeEventListener("focusin", t, !0), clearTimeout(r), a = void 0;
+		};
+	}
+	return {
+		intent: o,
+		personOpened: s,
+		returnsFocus: c,
+		undoFocusSteal: l
+	};
+}
+//#endregion
+export { t as useQuietFocus };
+
+//# sourceMappingURL=quietFocus.js.map

package/dist/components/Select/quietFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quietFocus.js","names":["useQuietFocus","byPerson","hadFocus","stop","intent","personOpened","was","returnsFocus","open","isOpen","inside","undoFocusSteal","prior","onFocusIn","target","e","timer"],"sources":["../../../src/components/Select/quietFocus.ts"],"sourcesContent":["import { watch, type Ref } from \"vue\";\n\n/**\n * Keeps a popup from moving focus when it is opened or closed from outside (`v-model:open`, or open from the first\n * render). A person's pointer or key on the trigger (`intent`) keeps the component's own focus management.\n * `inside` says whether an element is part of the popup's content.\n */\nexport function useQuietFocus(open: Ref<boolean>, inside: (el: Element) => boolean) {\n  let byPerson = false;\n  let hadFocus = false;\n  let stop: (() => void) | undefined;\n\n  function intent() {\n    byPerson = true;\n  }\n\n  function personOpened(): boolean {\n    const was = byPerson;\n    byPerson = false;\n    return was;\n  }\n\n  function returnsFocus(): boolean {\n    byPerson = false;\n    return hadFocus;\n  }\n\n  watch(\n    open,\n    (isOpen) => {\n      if (!isOpen) hadFocus = !!document.activeElement && inside(document.activeElement);\n    },\n    { flush: \"sync\" },\n  );\n\n  function undoFocusSteal() {\n    stop?.();\n    const prior = document.activeElement as HTMLElement | null;\n    const onFocusIn = (e: FocusEvent) => {\n      const target = e.target as Element | null;\n      if (!target || !inside(target)) return;\n      if (prior && prior !== document.body && prior.isConnected) prior.focus({ preventScroll: true });\n      else (target as HTMLElement).blur();\n    };\n    document.addEventListener(\"focusin\", onFocusIn, true);\n    const timer = setTimeout(() => stop?.(), 400);\n    stop = () => {\n      document.removeEventListener(\"focusin\", onFocusIn, true);\n      clearTimeout(timer);\n      stop = undefined;\n    };\n  }\n\n  return { intent, personOpened, returnsFocus, undoFocusSteal };\n}\n"],"mappings":";;AAOA,SAAgBA,EAAc,GAAoB,GAAkC;CAClF,IAAIC,IAAW,IACXC,IAAW,IACXC;CAEJ,SAASC,IAAS;EAChB,IAAW;CACb;CAEA,SAASC,IAAwB;EAC/B,IAAMC,IAAML;EAEZ,OADA,IAAW,IACJK;CACT;CAEA,SAASC,IAAwB;EAE/B,OADA,IAAW,IACJL;CACT;CAEA,EACEM,IACC,MAAW;EACV,AAAKC,MAAQ,IAAW,CAAC,CAAC,SAAS,iBAAiBC,EAAO,SAAS,aAAa;CACnF,GACA,EAAE,OAAO,OAAO,CAClB;CAEA,SAASC,IAAiB;EACxB,IAAO;EACP,IAAMC,IAAQ,SAAS,eACjBC,KAAa,MAAkB;GACnC,IAAMC,IAASC,EAAE;GACjB,AAAKD,KAAWJ,EAAOI,CAAM,MACzBF,KAASA,MAAU,SAAS,QAAQA,EAAM,cAAaA,EAAM,MAAM,EAAE,eAAe,GAAK,CAAC,IACzFE,EAAwB,KAAK;EACpC;EACA,SAAS,iBAAiB,WAAWD,GAAW,EAAI;EACpD,IAAMG,IAAQ,iBAAiBb,IAAO,GAAG,GAAG;EAC5C,UAAa;GAGX,AAFA,SAAS,oBAAoB,WAAWU,GAAW,EAAI,GACvD,aAAaG,CAAK,GAClB,IAAO,KAAA;EACT;CACF;CAEA,OAAO;EAAE;EAAQ;EAAc;EAAc;CAAe;AAC9D"}

package/dist/components/SignatureField/ESignatureField.js

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

package/dist/components/SignatureField/ESignatureField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESignatureField.js","names":["_sfc_main","ESignatureField_vue_vue_type_script_setup_true_lang_default","ESignatureField_default"],"sources":["../../../src/components/SignatureField/ESignatureField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface SignatureValue {\n  /** How the person signed. */\n  method: \"type\" | \"draw\";\n  /** The typed name. Kept when switching to Draw. */\n  name: string;\n  /** The drawn signature as a PNG data URL. Empty unless the method is `draw`. */\n  image: string;\n  /** Whether the person ticked the agreement. */\n  agreed: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport ESegmented from \"../Segmented/ESegmented.vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport ECheckbox from \"../Checkbox/ECheckbox.vue\";\nimport ESignaturePad from \"../SignaturePad/ESignaturePad.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Names the group and heads it. Say what the form is. Default \"Signature\". */\n    label?: string;\n    /** `type` the default, `draw`, or `both` which adds a Type and Draw switch. A drawn signature cannot be made from a keyboard, so `both` is the usual choice. */\n    mode?: \"type\" | \"draw\" | \"both\";\n    /** The sentence the person agrees to. Default \"I agree and want to sign this form.\" */\n    agreement?: string;\n    /** The date shown with the signature. Today when left out. */\n    date?: Date;\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    disabled?: boolean;\n    /** The name submitted with a form: the typed name, or the drawn image as a data URL. */\n    name?: string;\n    /** The id of the typed-name input. Generated when left out. */\n    id?: string;\n  }>(),\n  { mode: \"type\" },\n);\n\nconst model = defineModel<SignatureValue>({\n  default: () => ({ method: \"type\", name: \"\", image: \"\", agreed: false }),\n});\n\nconst t = useMessages();\nconst config = useConfig();\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-sign-hint`);\n\nconst method = computed<\"type\" | \"draw\">(() => (props.mode === \"both\" ? model.value.method : props.mode));\nconst dateText = computed(() =>\n  new Intl.DateTimeFormat(config.locale, { year: \"numeric\", month: \"long\", day: \"numeric\" }).format(\n    props.date ?? new Date(),\n  ),\n);\n\nfunction update(patch: Partial<SignatureValue>) {\n  const next = { ...model.value, method: method.value, ...patch };\n  model.value = { ...next, image: next.method === \"draw\" ? next.image : \"\" };\n}\n</script>\n\n<template>\n  <fieldset\n    class=\"e-sign\"\n    :disabled=\"disabled\"\n    :aria-describedby=\"error || hint ? hintId : undefined\"\n    :aria-invalid=\"error ? 'true' : undefined\"\n  >\n    <legend class=\"e-kicker e-sign-legend\">{{ label || t(\"signature\") }}</legend>\n    <ESegmented\n      v-if=\"mode === 'both'\"\n      :label=\"t('signature')\"\n      :model-value=\"method\"\n      :options=\"[\n        { value: 'type', label: t('signType'), icon: 'edit' },\n        { value: 'draw', label: t('signDraw'), icon: 'signature' },\n      ]\"\n      @update:model-value=\"update({ method: $event as 'type' | 'draw', image: '' })\"\n    />\n    <template v-if=\"method === 'type'\">\n      <ETextField\n        :id=\"id\"\n        :model-value=\"model.name\"\n        :label=\"t('typeName')\"\n        :placeholder=\"t('fullName')\"\n        autocomplete=\"name\"\n        required\n        :hint=\"t('signHint')\"\n        @update:model-value=\"update({ name: $event })\"\n      />\n      <div class=\"e-sign-line\" aria-live=\"polite\">\n        <span v-if=\"model.name\" class=\"e-sign-name\">{{ model.name }}</span>\n        <span v-else class=\"e-sign-empty\">{{ t(\"signAppears\") }}</span>\n        <span class=\"e-sign-date\">{{ dateText }}</span>\n      </div>\n    </template>\n    <template v-else>\n      <ESignaturePad :model-value=\"model.image\" :disabled=\"disabled\" @update:model-value=\"update({ image: $event })\" />\n      <p class=\"e-sign-date e-sign-date--solo\">{{ dateText }}</p>\n    </template>\n    <ECheckbox\n      :model-value=\"model.agreed\"\n      :label=\"agreement || t('agreeSign')\"\n      :disabled=\"disabled\"\n      @update:model-value=\"update({ agreed: $event })\"\n    />\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"method === 'draw' ? model.image : model.name\" />\n  </fieldset>\n</template>\n\n<style>\n@layer e.composites {\n  .e-sign {\n    display: grid;\n    gap: var(--e-space-3);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-sign-legend {\n    padding: 0;\n    margin-bottom: var(--e-space-2);\n  }\n\n  .e-sign-line {\n    display: flex;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: 52px;\n    padding: var(--e-space-2) var(--e-space-4);\n    border-bottom: 2px solid var(--e-ink);\n    background: var(--e-surface-tint);\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n  }\n\n  .e-sign-name {\n    font:\n      italic 500 28px/1.1 \"Segoe Script\",\n      \"Snell Roundhand\",\n      \"Brush Script MT\",\n      cursive;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-sign-empty {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date {\n    flex: none;\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date--solo {\n    margin: 0;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/SignatureField/ESignatureField.vue.d.ts

@@ -0,0 +1,59 @@
+export interface SignatureValue {
+    /** How the person signed. */
+    method: "type" | "draw";
+    /** The typed name. Kept when switching to Draw. */
+    name: string;
+    /** The drawn signature as a PNG data URL. Empty unless the method is `draw`. */
+    image: string;
+    /** Whether the person ticked the agreement. */
+    agreed: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    /** Names the group and heads it. Say what the form is. Default "Signature". */
+    label?: string;
+    /** `type` the default, `draw`, or `both` which adds a Type and Draw switch. A drawn signature cannot be made from a keyboard, so `both` is the usual choice. */
+    mode?: "type" | "draw" | "both";
+    /** The sentence the person agrees to. Default "I agree and want to sign this form." */
+    agreement?: string;
+    /** The date shown with the signature. Today when left out. */
+    date?: Date;
+    /** Help that is announced with the group. */
+    hint?: string;
+    /** What to fix. Replaces the hint and is announced with the group. */
+    error?: string;
+    disabled?: boolean;
+    /** The name submitted with a form: the typed name, or the drawn image as a data URL. */
+    name?: string;
+    /** The id of the typed-name input. Generated when left out. */
+    id?: string;
+} & {
+    modelValue?: SignatureValue;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: SignatureValue) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /** Names the group and heads it. Say what the form is. Default "Signature". */
+    label?: string;
+    /** `type` the default, `draw`, or `both` which adds a Type and Draw switch. A drawn signature cannot be made from a keyboard, so `both` is the usual choice. */
+    mode?: "type" | "draw" | "both";
+    /** The sentence the person agrees to. Default "I agree and want to sign this form." */
+    agreement?: string;
+    /** The date shown with the signature. Today when left out. */
+    date?: Date;
+    /** Help that is announced with the group. */
+    hint?: string;
+    /** What to fix. Replaces the hint and is announced with the group. */
+    error?: string;
+    disabled?: boolean;
+    /** The name submitted with a form: the typed name, or the drawn image as a data URL. */
+    name?: string;
+    /** The id of the typed-name input. Generated when left out. */
+    id?: string;
+} & {
+    modelValue?: SignatureValue;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SignatureValue) => any) | undefined;
+}>, {
+    mode: "type" | "draw" | "both";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/SignatureField/ESignatureField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,143 @@
+/* empty css                */
+import { useConfig as e, useMessages as t } from "../../config.js";
+import { useUid as n } from "../../composables/useUid.js";
+import r from "../Field/EFieldMessage.js";
+import i from "../TextField/ETextField.js";
+import a from "../Checkbox/ECheckbox.js";
+import o from "../Segmented/ESegmented.js";
+import s from "../SignaturePad/ESignaturePad.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeModels as g, openBlock as _, toDisplayString as v, unref as y, useModel as b } from "vue";
+//#region src/components/SignatureField/ESignatureField.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"disabled",
+	"aria-describedby",
+	"aria-invalid"
+], S = { class: "e-kicker e-sign-legend" }, C = {
+	class: "e-sign-line",
+	"aria-live": "polite"
+}, w = {
+	key: 0,
+	class: "e-sign-name"
+}, T = {
+	key: 1,
+	class: "e-sign-empty"
+}, E = { class: "e-sign-date" }, D = { class: "e-sign-date e-sign-date--solo" }, O = ["name", "value"], k = /*@__PURE__*/ h({
+	__name: "ESignatureField",
+	props: /*@__PURE__*/ g({
+		label: {},
+		mode: { default: "type" },
+		agreement: {},
+		date: {},
+		hint: {},
+		error: {},
+		disabled: { type: Boolean },
+		name: {},
+		id: {}
+	}, {
+		modelValue: { default: () => ({
+			method: "type",
+			name: "",
+			image: "",
+			agreed: !1
+		}) },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(h) {
+		let g = h, k = b(h, "modelValue"), A = t(), j = e(), M = n(() => g.id), N = l(() => `${M.value}-sign-hint`), P = l(() => g.mode === "both" ? k.value.method : g.mode), F = l(() => new Intl.DateTimeFormat(j.locale, {
+			year: "numeric",
+			month: "long",
+			day: "numeric"
+		}).format(g.date ?? /* @__PURE__ */ new Date()));
+		function I(e) {
+			let t = {
+				...k.value,
+				method: P.value,
+				...e
+			};
+			k.value = {
+				...t,
+				image: t.method === "draw" ? t.image : ""
+			};
+		}
+		return (e, t) => (_(), f("fieldset", {
+			class: "e-sign",
+			disabled: h.disabled,
+			"aria-describedby": h.error || h.hint ? N.value : void 0,
+			"aria-invalid": h.error ? "true" : void 0
+		}, [
+			p("legend", S, v(h.label || y(A)("signature")), 1),
+			h.mode === "both" ? (_(), u(o, {
+				key: 0,
+				label: y(A)("signature"),
+				"model-value": P.value,
+				options: [{
+					value: "type",
+					label: y(A)("signType"),
+					icon: "edit"
+				}, {
+					value: "draw",
+					label: y(A)("signDraw"),
+					icon: "signature"
+				}],
+				"onUpdate:modelValue": t[0] ||= (e) => I({
+					method: e,
+					image: ""
+				})
+			}, null, 8, [
+				"label",
+				"model-value",
+				"options"
+			])) : d("", !0),
+			P.value === "type" ? (_(), f(c, { key: 1 }, [m(i, {
+				id: y(M),
+				"model-value": k.value.name,
+				label: y(A)("typeName"),
+				placeholder: y(A)("fullName"),
+				autocomplete: "name",
+				required: "",
+				hint: y(A)("signHint"),
+				"onUpdate:modelValue": t[1] ||= (e) => I({ name: e })
+			}, null, 8, [
+				"id",
+				"model-value",
+				"label",
+				"placeholder",
+				"hint"
+			]), p("div", C, [k.value.name ? (_(), f("span", w, v(k.value.name), 1)) : (_(), f("span", T, v(y(A)("signAppears")), 1)), p("span", E, v(F.value), 1)])], 64)) : (_(), f(c, { key: 2 }, [m(s, {
+				"model-value": k.value.image,
+				disabled: h.disabled,
+				"onUpdate:modelValue": t[2] ||= (e) => I({ image: e })
+			}, null, 8, ["model-value", "disabled"]), p("p", D, v(F.value), 1)], 64)),
+			m(a, {
+				"model-value": k.value.agreed,
+				label: h.agreement || y(A)("agreeSign"),
+				disabled: h.disabled,
+				"onUpdate:modelValue": t[3] ||= (e) => I({ agreed: e })
+			}, null, 8, [
+				"model-value",
+				"label",
+				"disabled"
+			]),
+			m(r, {
+				id: N.value,
+				error: h.error,
+				hint: h.hint
+			}, null, 8, [
+				"id",
+				"error",
+				"hint"
+			]),
+			h.name ? (_(), f("input", {
+				key: 3,
+				type: "hidden",
+				name: h.name,
+				value: P.value === "draw" ? k.value.image : k.value.name
+			}, null, 8, O)) : d("", !0)
+		], 8, x));
+	}
+});
+//#endregion
+export { k as default };
+
+//# sourceMappingURL=ESignatureField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/SignatureField/ESignatureField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESignatureField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_createBlock","ESegmented","_createCommentVNode","_Fragment","_createVNode","ETextField","ESignaturePad","ECheckbox","EFieldMessage","EFieldMessage_default","ETextField_default","ECheckbox_default","ESegmented_default","ESignaturePad_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","ESignatureField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","t","useMessages","config","useConfig","id","useUid","hintId","computed","method","dateText","update","next","patch","openBlock","createElementBlock","createElementVNode","toDisplayString","unref","createBlock","_cache","$event","createCommentVNode","Fragment","createVNode"],"sources":["../../../src/components/SignatureField/ESignatureField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface SignatureValue {\n  /** How the person signed. */\n  method: \"type\" | \"draw\";\n  /** The typed name. Kept when switching to Draw. */\n  name: string;\n  /** The drawn signature as a PNG data URL. Empty unless the method is `draw`. */\n  image: string;\n  /** Whether the person ticked the agreement. */\n  agreed: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport ESegmented from \"../Segmented/ESegmented.vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport ECheckbox from \"../Checkbox/ECheckbox.vue\";\nimport ESignaturePad from \"../SignaturePad/ESignaturePad.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Names the group and heads it. Say what the form is. Default \"Signature\". */\n    label?: string;\n    /** `type` the default, `draw`, or `both` which adds a Type and Draw switch. A drawn signature cannot be made from a keyboard, so `both` is the usual choice. */\n    mode?: \"type\" | \"draw\" | \"both\";\n    /** The sentence the person agrees to. Default \"I agree and want to sign this form.\" */\n    agreement?: string;\n    /** The date shown with the signature. Today when left out. */\n    date?: Date;\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    disabled?: boolean;\n    /** The name submitted with a form: the typed name, or the drawn image as a data URL. */\n    name?: string;\n    /** The id of the typed-name input. Generated when left out. */\n    id?: string;\n  }>(),\n  { mode: \"type\" },\n);\n\nconst model = defineModel<SignatureValue>({\n  default: () => ({ method: \"type\", name: \"\", image: \"\", agreed: false }),\n});\n\nconst t = useMessages();\nconst config = useConfig();\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-sign-hint`);\n\nconst method = computed<\"type\" | \"draw\">(() => (props.mode === \"both\" ? model.value.method : props.mode));\nconst dateText = computed(() =>\n  new Intl.DateTimeFormat(config.locale, { year: \"numeric\", month: \"long\", day: \"numeric\" }).format(\n    props.date ?? new Date(),\n  ),\n);\n\nfunction update(patch: Partial<SignatureValue>) {\n  const next = { ...model.value, method: method.value, ...patch };\n  model.value = { ...next, image: next.method === \"draw\" ? next.image : \"\" };\n}\n</script>\n\n<template>\n  <fieldset\n    class=\"e-sign\"\n    :disabled=\"disabled\"\n    :aria-describedby=\"error || hint ? hintId : undefined\"\n    :aria-invalid=\"error ? 'true' : undefined\"\n  >\n    <legend class=\"e-kicker e-sign-legend\">{{ label || t(\"signature\") }}</legend>\n    <ESegmented\n      v-if=\"mode === 'both'\"\n      :label=\"t('signature')\"\n      :model-value=\"method\"\n      :options=\"[\n        { value: 'type', label: t('signType'), icon: 'edit' },\n        { value: 'draw', label: t('signDraw'), icon: 'signature' },\n      ]\"\n      @update:model-value=\"update({ method: $event as 'type' | 'draw', image: '' })\"\n    />\n    <template v-if=\"method === 'type'\">\n      <ETextField\n        :id=\"id\"\n        :model-value=\"model.name\"\n        :label=\"t('typeName')\"\n        :placeholder=\"t('fullName')\"\n        autocomplete=\"name\"\n        required\n        :hint=\"t('signHint')\"\n        @update:model-value=\"update({ name: $event })\"\n      />\n      <div class=\"e-sign-line\" aria-live=\"polite\">\n        <span v-if=\"model.name\" class=\"e-sign-name\">{{ model.name }}</span>\n        <span v-else class=\"e-sign-empty\">{{ t(\"signAppears\") }}</span>\n        <span class=\"e-sign-date\">{{ dateText }}</span>\n      </div>\n    </template>\n    <template v-else>\n      <ESignaturePad :model-value=\"model.image\" :disabled=\"disabled\" @update:model-value=\"update({ image: $event })\" />\n      <p class=\"e-sign-date e-sign-date--solo\">{{ dateText }}</p>\n    </template>\n    <ECheckbox\n      :model-value=\"model.agreed\"\n      :label=\"agreement || t('agreeSign')\"\n      :disabled=\"disabled\"\n      @update:model-value=\"update({ agreed: $event })\"\n    />\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"method === 'draw' ? model.image : model.name\" />\n  </fieldset>\n</template>\n\n<style>\n@layer e.composites {\n  .e-sign {\n    display: grid;\n    gap: var(--e-space-3);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-sign-legend {\n    padding: 0;\n    margin-bottom: var(--e-space-2);\n  }\n\n  .e-sign-line {\n    display: flex;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: 52px;\n    padding: var(--e-space-2) var(--e-space-4);\n    border-bottom: 2px solid var(--e-ink);\n    background: var(--e-surface-tint);\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n  }\n\n  .e-sign-name {\n    font:\n      italic 500 28px/1.1 \"Segoe Script\",\n      \"Snell Roundhand\",\n      \"Brush Script MT\",\n      cursive;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-sign-empty {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date {\n    flex: none;\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date--solo {\n    margin: 0;\n  }\n}\n</style>\n"],"mappings":"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"}

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

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

package/dist/components/SignaturePad/ESignaturePad.js

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

package/dist/components/SignaturePad/ESignaturePad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESignaturePad.js","names":["_sfc_main","ESignaturePad_vue_vue_type_script_setup_true_lang_default","ESignaturePad_default"],"sources":["../../../src/components/SignaturePad/ESignaturePad.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The height of the drawing area in pixels. */\n    height?: number;\n    disabled?: boolean;\n    /** The id of the canvas. Generated when left out. */\n    id?: string;\n  }>(),\n  { height: 160 },\n);\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst id = useUid(() => props.id);\nconst canvas = ref<HTMLCanvasElement | null>(null);\nconst empty = ref(!model.value);\n\ninterface Point {\n  x: number;\n  y: number;\n}\nconst strokes: Point[][] = [];\nlet current: Point[] | null = null;\n\nfunction paint(ctx: CanvasRenderingContext2D, color: string) {\n  ctx.lineWidth = 2.5;\n  ctx.lineCap = \"round\";\n  ctx.lineJoin = \"round\";\n  ctx.strokeStyle = color;\n  ctx.fillStyle = color;\n  for (const stroke of strokes) {\n    const [first, ...rest] = stroke;\n    if (!first) continue;\n    ctx.beginPath();\n    ctx.arc(first.x, first.y, 1.2, 0, 6.3);\n    ctx.fill();\n    ctx.beginPath();\n    ctx.moveTo(first.x, first.y);\n    for (const p of rest) ctx.lineTo(p.x, p.y);\n    ctx.stroke();\n  }\n}\n\nfunction setup() {\n  const cv = canvas.value;\n  if (!cv) return;\n  const dpr = window.devicePixelRatio || 1;\n  cv.width = Math.round((cv.clientWidth || 320) * dpr);\n  cv.height = Math.round(props.height * dpr);\n  const ctx = cv.getContext(\"2d\");\n  if (!ctx) return;\n  ctx.scale(dpr, dpr);\n  paint(ctx, getComputedStyle(cv).color);\n}\nonMounted(setup);\nuseResizeObserver(canvas, setup);\n\nfunction point(e: PointerEvent): Point {\n  const r = canvas.value!.getBoundingClientRect();\n  return { x: e.clientX - r.left, y: e.clientY - r.top };\n}\n\nfunction down(e: PointerEvent) {\n  if (props.disabled) return;\n  e.preventDefault();\n  try {\n    canvas.value!.setPointerCapture(e.pointerId);\n  } catch {}\n  const p = point(e);\n  current = [p];\n  strokes.push(current);\n  const ctx = canvas.value!.getContext(\"2d\")!;\n  ctx.fillStyle = getComputedStyle(canvas.value!).color;\n  ctx.beginPath();\n  ctx.arc(p.x, p.y, 1.2, 0, 6.3);\n  ctx.fill();\n}\n\nfunction move(e: PointerEvent) {\n  if (!current) return;\n  const from = current[current.length - 1]!;\n  const p = point(e);\n  current.push(p);\n  const ctx = canvas.value!.getContext(\"2d\")!;\n  ctx.strokeStyle = getComputedStyle(canvas.value!).color;\n  ctx.beginPath();\n  ctx.moveTo(from.x, from.y);\n  ctx.lineTo(p.x, p.y);\n  ctx.stroke();\n}\n\nfunction exportImage(): string {\n  const cv = canvas.value!;\n  const out = document.createElement(\"canvas\");\n  out.width = cv.width;\n  out.height = cv.height;\n  const ctx = out.getContext(\"2d\")!;\n  ctx.scale(cv.width / (cv.clientWidth || 320), cv.height / props.height);\n  paint(ctx, \"black\");\n  return out.toDataURL(\"image/png\");\n}\n\nfunction up() {\n  if (!current) return;\n  current = null;\n  empty.value = false;\n  model.value = exportImage();\n}\n\nfunction wipe() {\n  strokes.length = 0;\n  current = null;\n  empty.value = true;\n  const cv = canvas.value;\n  const ctx = cv?.getContext(\"2d\");\n  if (cv && ctx) {\n    ctx.save();\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\n    ctx.clearRect(0, 0, cv.width, cv.height);\n    ctx.restore();\n  }\n}\n\nfunction clear() {\n  wipe();\n  model.value = \"\";\n}\n\nwatch(model, (v) => {\n  if (!v && !empty.value) wipe();\n});\n\ndefineExpose({\n  clear,\n  canvas,\n});\n</script>\n\n<template>\n  <div class=\"e-pad\">\n    <div class=\"e-pad-surface\" :data-empty=\"empty ? '' : undefined\">\n      <canvas\n        :id=\"id\"\n        ref=\"canvas\"\n        class=\"e-pad-canvas\"\n        role=\"img\"\n        :style=\"{ height: `${height}px`, color: 'var(--e-ink)' }\"\n        :aria-label=\"t('drawSignature')\"\n        :aria-describedby=\"`${id}-hint`\"\n        @pointerdown=\"down\"\n        @pointermove=\"move\"\n        @pointerup=\"up\"\n        @pointercancel=\"up\"\n      />\n      <span v-if=\"empty\" class=\"e-pad-placeholder\" aria-hidden=\"true\">\n        <EIcon name=\"signature\" />\n        {{ t(\"signEmpty\") }}\n      </span>\n    </div>\n    <div class=\"e-pad-foot\">\n      <p :id=\"`${id}-hint`\" class=\"e-field-hint\">{{ t(\"signDrawHint\") }}</p>\n      <EButton variant=\"quiet\" icon=\"eraser\" :disabled=\"empty || disabled\" @click=\"clear\">\n        {{ t(\"signClear\") }}\n      </EButton>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.composites {\n  .e-pad {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-pad-surface {\n    position: relative;\n    overflow: hidden;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-well);\n  }\n\n  .e-pad-surface::after {\n    content: \"\";\n    position: absolute;\n    inset-inline: var(--e-space-4);\n    bottom: 36px;\n    border-bottom: 2px solid var(--e-ink);\n    pointer-events: none;\n  }\n\n  .e-pad-canvas {\n    display: block;\n    width: 100%;\n    touch-action: none;\n    cursor: crosshair;\n  }\n\n  .e-pad-placeholder {\n    position: absolute;\n    inset: 0;\n    display: grid;\n    place-content: center;\n    justify-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n    font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n    pointer-events: none;\n  }\n\n  .e-pad-foot {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-pad-foot .e-field-hint {\n    margin: 0;\n    flex: 1 1 14rem;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/SignaturePad/ESignaturePad.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    /** The height of the drawing area in pixels. */
+    height?: number;
+    disabled?: boolean;
+    /** The id of the canvas. Generated when left out. */
+    id?: string;
+};
+declare function clear(): void;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    clear: typeof clear;
+    canvas: import('vue').Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    height: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;