@eos-ui/vue 0.0.0-stage → 0.1.1

package/dist/components/CodeBlock/ECodeBlock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import t from "../IconButton/EIconButton.js";
+import n from "../VisuallyHidden/EVisuallyHidden.js";
+import { createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, h as c, openBlock as l, ref as u, renderSlot as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
+//#region src/components/CodeBlock/ECodeBlock.vue?vue&type=script&setup=true&lang.ts
+var h = { class: "e-code-body" }, g = ["aria-label"], _ = { class: "e-code-side" }, v = /*@__PURE__*/ s({
+	__name: "ECodeBlock",
+	props: {
+		code: {},
+		lang: {},
+		copyLabel: {}
+	},
+	setup(s) {
+		let v = s, y = e(), b = () => c("svg", {
+			viewBox: "0 0 20 20",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": "1.6",
+			"aria-hidden": "true"
+		}, [c("rect", {
+			x: "7",
+			y: "7",
+			width: "9",
+			height: "9",
+			rx: "2"
+		}), c("path", { d: "M13 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" })]), x = u(null), S = u(!1);
+		async function C() {
+			let e = v.code ?? x.value?.querySelector("pre")?.textContent ?? "";
+			try {
+				await navigator.clipboard.writeText(e), S.value = !0, setTimeout(() => S.value = !1, 2e3);
+			} catch {}
+		}
+		return (e, c) => (l(), r("div", {
+			ref_key: "root",
+			ref: x,
+			class: "e-code"
+		}, [
+			i("div", h, [d(e.$slots, "default", {}, () => [i("pre", {
+				tabindex: "0",
+				"aria-label": s.lang
+			}, [i("code", null, f(s.code), 1)], 8, g)])]),
+			i("div", _, [o(t, {
+				icon: S.value ? "check" : b,
+				label: s.copyLabel || p(y)("copyCode"),
+				onClick: C
+			}, null, 8, ["icon", "label"])]),
+			o(n, { role: "status" }, {
+				default: m(() => [a(f(S.value ? p(y)("codeCopied") : ""), 1)]),
+				_: 1
+			})
+		], 512));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=ECodeBlock.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/CodeBlock/ECodeBlock.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ECodeBlock.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_renderSlot","_toDisplayString","_createVNode","EIconButton","_unref","EVisuallyHidden","_withCtx","_createTextVNode","EIconButton_default","EVisuallyHidden_default","_hoisted_1","_hoisted_2","_hoisted_3","ECodeBlock_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","CopyIcon","h","root","ref","copied","copy","text","openBlock","createElementBlock","createElementVNode","renderSlot","_ctx","toDisplayString","createVNode","unref","withCtx","createTextVNode"],"sources":["../../../src/components/CodeBlock/ECodeBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { h, ref } from \"vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport EVisuallyHidden from \"../VisuallyHidden/EVisuallyHidden.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The text to show, as plain text. Leave it out to put your own highlighted markup in the slot. */\n  code?: string;\n  /** The language, named for screen readers (the code's accessible name). */\n  lang?: string;\n  /** The copy button's name. Default \"Copy code\". Say what is copied when there are several blocks: \"Copy CSS\". */\n  copyLabel?: string;\n}>();\n\ndefineSlots<{\n  /** Your own markup, usually a highlighted `<pre><code>`. The copy button copies the text of the first `<pre>`. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\n\nconst CopyIcon = () =>\n  h(\n    \"svg\",\n    { viewBox: \"0 0 20 20\", fill: \"none\", stroke: \"currentColor\", \"stroke-width\": \"1.6\", \"aria-hidden\": \"true\" },\n    [\n      h(\"rect\", { x: \"7\", y: \"7\", width: \"9\", height: \"9\", rx: \"2\" }),\n      h(\"path\", { d: \"M13 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\" }),\n    ],\n  );\n\nconst root = ref<HTMLElement | null>(null);\nconst copied = ref(false);\n\nasync function copy() {\n  const text = props.code ?? root.value?.querySelector(\"pre\")?.textContent ?? \"\";\n  try {\n    await navigator.clipboard.writeText(text);\n    copied.value = true;\n    setTimeout(() => (copied.value = false), 2000);\n  } catch {}\n}\n</script>\n\n<template>\n  <div ref=\"root\" class=\"e-code\">\n    <div class=\"e-code-body\">\n      <slot>\n        <pre tabindex=\"0\" :aria-label=\"lang\"><code>{{ code }}</code></pre>\n      </slot>\n    </div>\n    <div class=\"e-code-side\">\n      <EIconButton :icon=\"copied ? 'check' : CopyIcon\" :label=\"copyLabel || t('copyCode')\" @click=\"copy\" />\n    </div>\n    <EVisuallyHidden role=\"status\">{{ copied ? t(\"codeCopied\") : \"\" }}</EVisuallyHidden>\n  </div>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-code {\n    display: flex;\n    align-items: stretch;\n    min-width: 0;\n    overflow: hidden;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-code-body {\n    display: grid;\n    flex: 1;\n    align-content: center;\n    min-width: 0;\n    overflow-x: auto;\n  }\n\n  .e-code pre {\n    margin: 0;\n    padding: var(--e-space-3) var(--e-space-4);\n    background: transparent;\n    font: 400 var(--e-text-sm) / 1.6 var(--e-font-mono);\n    color: var(--e-ink);\n  }\n\n  .e-code pre:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n    border-radius: var(--e-radius-md);\n  }\n\n  .e-code code {\n    display: block;\n    width: fit-content;\n    min-width: 100%;\n    padding: 0;\n    background: transparent;\n    font: inherit;\n  }\n\n  .e-code-side {\n    flex: none;\n    align-self: flex-start;\n    padding: var(--e-space-1);\n  }\n\n  @media print {\n    .e-code-side {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EAOA,IAAMiB,IAAQC,GAcRC,IAAIC,EAAY,GAEhBC,UACJC,EACE,OACA;GAAE,SAAS;GAAa,MAAM;GAAQ,QAAQ;GAAgB,gBAAgB;GAAO,eAAe;EAAO,GAC3G,CACEA,EAAE,QAAQ;GAAE,GAAG;GAAK,GAAG;GAAK,OAAO;GAAK,QAAQ;GAAK,IAAI;EAAI,CAAC,GAC9DA,EAAE,QAAQ,EAAE,GAAG,0DAA0D,CAAC,CAC5E,CACF,GAEIC,IAAOC,EAAwB,IAAI,GACnCC,IAASD,EAAI,EAAK;EAExB,eAAeE,IAAO;GACpB,IAAMC,IAAOV,EAAM,QAAQM,EAAK,OAAO,cAAc,KAAK,CAAC,EAAE,eAAe;GAC5E,IAAI;IAGF,AAFA,MAAM,UAAU,UAAU,UAAUI,CAAI,GACxC,EAAO,QAAQ,IACf,iBAAkB,EAAO,QAAQ,IAAQ,GAAI;GAC/C,QAAQ,CAAC;EACX;E,kBAIE3B,EAAA,GAAAC,EAUM,OAAA;GAVG,SAAA;GAAJ,KAAIsB;GAAO,OAAM;;GACpBrB,EAIM,OAJNW,GAIM,CAHJV,EAEO6B,EAAA,QAAA,WAAA,CAAA,SAAA,CADL9B,EAAkE,OAAA;IAA7D,UAAS;IAAK,cAAYgB,EAAA;G,IAAMhB,EAAuB,QAAA,MAAAE,EAAdc,EAAA,IAAI,GAAA,CAAA,C;GAGtDhB,EAEM,OAFNa,GAEM,CADJV,EAAqGC,GAAA;IAAvF,MAAMmB,EAAA,QAAM,UAAaJ;IAAW,OAAOH,EAAA,aAAaX,EAAAY,CAAA,CAAC,CAAA,UAAA;IAAe,SAAOO;;GAE/FrB,EAAoFG,GAAA,EAAnE,MAAK,SAAQ,GAAA;IAAC,SAAAC,QAAmC,CAAhCC,EAAAN,EAAAqB,EAAA,QAASlB,EAAAY,CAAA,CAAC,CAAA,YAAA,IAAA,EAAA,GAAA,CAAA,C"}

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

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

package/dist/components/ColorField/EColorField.js

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

package/dist/components/ColorField/EColorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EColorField.js","names":["_sfc_main","EColorField_vue_vue_type_script_setup_true_lang_default","EColorField_default"],"sources":["../../../src/components/ColorField/EColorField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the input. */\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  disabled?: boolean;\n  /** The id of the text input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\nconst swatchEl = ref<HTMLInputElement | null>(null);\n\nfunction normalize(raw: string): string | null {\n  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(raw.trim());\n  if (!m) return null;\n  const hex = m[1]!.length === 3 ? [...m[1]!].map((c) => c + c).join(\"\") : m[1]!;\n  return `#${hex.toLowerCase()}`;\n}\n\nconst text = ref(model.value);\nconst touched = ref(false);\nwatch(model, (v) => {\n  if (normalize(text.value) !== v) text.value = v;\n});\n\nconst invalid = computed(() => touched.value && text.value.trim() !== \"\" && normalize(text.value) === null);\nconst shownError = computed(\n  () => props.error || (invalid.value ? t(\"colorInvalid\", { example: t(\"colorPlaceholder\") }) : undefined),\n);\nconst swatch = computed(() => normalize(model.value) ?? \"#000000\");\n\nfunction onText(e: Event) {\n  text.value = (e.target as HTMLInputElement).value;\n  const hex = normalize(text.value);\n  if (hex) model.value = hex;\n}\n\nfunction onBlur() {\n  touched.value = true;\n  const hex = normalize(text.value);\n  if (hex) text.value = hex;\n}\n\nfunction onWrapClick(e: MouseEvent) {\n  if (e.target !== swatchEl.value && !props.disabled) input.value?.focus();\n}\n\nfunction onPick(e: Event) {\n  model.value = (e.target as HTMLInputElement).value;\n  text.value = model.value;\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=\"shownError\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap e-colorfield\"\n        :data-invalid=\"shownError ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"onWrapClick\"\n      >\n        <input\n          ref=\"swatchEl\"\n          class=\"e-color-swatch\"\n          type=\"color\"\n          :value=\"swatch\"\n          :disabled=\"disabled\"\n          :aria-label=\"t('pickColor')\"\n          @input=\"onPick\"\n        />\n        <input\n          :id=\"field.id\"\n          ref=\"input\"\n          class=\"e-input\"\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          maxlength=\"7\"\n          :placeholder=\"t('colorPlaceholder')\"\n          :value=\"text\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :aria-invalid=\"field.ariaInvalid\"\n          v-bind=\"attrs.input(field.ariaDescribedby)\"\n          @input=\"onText\"\n          @blur=\"onBlur\"\n        />\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  .e-colorfield {\n    align-items: center;\n    gap: var(--e-space-2);\n    padding-inline-start: var(--e-space-1);\n  }\n\n  .e-color-swatch {\n    flex: none;\n    width: calc(var(--e-control-height) - 2 * (var(--e-stroke-edge) + var(--e-space-1)));\n    height: calc(var(--e-control-height) - 2 * (var(--e-stroke-edge) + var(--e-space-1)));\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: none;\n    cursor: pointer;\n  }\n\n  .e-color-swatch::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n\n  .e-color-swatch::-webkit-color-swatch {\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) rgb(0 0 0 / 0.22);\n  }\n\n  .e-color-swatch::-moz-color-swatch {\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) rgb(0 0 0 / 0.22);\n  }\n\n  .e-color-swatch:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .e-colorfield .e-input {\n    font-family: var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ColorField/EColorField.vue.d.ts

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    /** The visible label, a mono kicker above the input. */
+    label: string;
+    /** Keep the label for screen readers and remove it from the page. */
+    hideLabel?: boolean;
+    /** Help that stays under the input. */
+    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;
+    disabled?: boolean;
+    /** The id of the text input; the label points at it. Generated when left out. */
+    id?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+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: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ColorField/EColorField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,122 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { useFieldAttrs as t } from "../../composables/useFieldAttrs.js";
+import n from "../Field/EField.js";
+/* empty css                 */
+import { computed as r, createBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, openBlock as l, ref as u, unref as d, useModel as f, watch as p, withCtx as m } from "vue";
+//#region src/components/ColorField/EColorField.vue?vue&type=script&setup=true&lang.ts
+var h = ["data-invalid", "data-disabled"], g = [
+	"value",
+	"disabled",
+	"aria-label"
+], _ = [
+	"id",
+	"placeholder",
+	"value",
+	"disabled",
+	"required",
+	"aria-invalid"
+], v = /*@__PURE__*/ o({
+	inheritAttrs: !1,
+	__name: "EColorField",
+	props: /*@__PURE__*/ s({
+		label: {},
+		hideLabel: { type: Boolean },
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(o, { expose: s }) {
+		let v = o, y = f(o, "modelValue"), b = e(), x = t(), S = u(null), C = u(null);
+		function w(e) {
+			let t = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
+			return t ? `#${(t[1].length === 3 ? [...t[1]].map((e) => e + e).join("") : t[1]).toLowerCase()}` : null;
+		}
+		let T = u(y.value), E = u(!1);
+		p(y, (e) => {
+			w(T.value) !== e && (T.value = e);
+		});
+		let D = r(() => E.value && T.value.trim() !== "" && w(T.value) === null), O = r(() => v.error || (D.value ? b("colorInvalid", { example: b("colorPlaceholder") }) : void 0)), k = r(() => w(y.value) ?? "#000000");
+		function A(e) {
+			T.value = e.target.value;
+			let t = w(T.value);
+			t && (y.value = t);
+		}
+		function j() {
+			E.value = !0;
+			let e = w(T.value);
+			e && (T.value = e);
+		}
+		function M(e) {
+			e.target !== C.value && !v.disabled && S.value?.focus();
+		}
+		function N(e) {
+			y.value = e.target.value, T.value = y.value;
+		}
+		return s({
+			input: S,
+			focus: () => S.value?.focus()
+		}), (e, t) => (l(), i(n, c(d(x).wrapper(), {
+			id: o.id,
+			label: o.label,
+			"hide-label": o.hideLabel,
+			hint: o.hint,
+			error: O.value,
+			required: o.required,
+			optional: o.optional
+		}), {
+			default: m((e) => [a("div", {
+				class: "e-input-wrap e-colorfield",
+				"data-invalid": O.value ? "" : void 0,
+				"data-disabled": o.disabled ? "" : void 0,
+				onClick: M
+			}, [a("input", {
+				ref_key: "swatchEl",
+				ref: C,
+				class: "e-color-swatch",
+				type: "color",
+				value: k.value,
+				disabled: o.disabled,
+				"aria-label": d(b)("pickColor"),
+				onInput: N
+			}, null, 40, g), a("input", c({
+				id: e.id,
+				ref_key: "input",
+				ref: S,
+				class: "e-input",
+				type: "text",
+				spellcheck: "false",
+				autocomplete: "off",
+				maxlength: "7",
+				placeholder: d(b)("colorPlaceholder"),
+				value: T.value,
+				disabled: o.disabled,
+				required: o.required,
+				"aria-invalid": e.ariaInvalid
+			}, d(x).input(e.ariaDescribedby), {
+				onInput: A,
+				onBlur: j
+			}), null, 16, _)], 8, h)]),
+			_: 1
+		}, 16, [
+			"id",
+			"label",
+			"hide-label",
+			"hint",
+			"error",
+			"required",
+			"optional"
+		]));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=EColorField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ColorField/EColorField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EColorField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","EColorField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","attrs","useFieldAttrs","input","ref","swatchEl","normalize","m","raw","c","text","touched","v","invalid","computed","shownError","swatch","onText","hex","onBlur","onWrapClick","onPick","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","field"],"sources":["../../../src/components/ColorField/EColorField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the input. */\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  disabled?: boolean;\n  /** The id of the text input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\nconst swatchEl = ref<HTMLInputElement | null>(null);\n\nfunction normalize(raw: string): string | null {\n  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(raw.trim());\n  if (!m) return null;\n  const hex = m[1]!.length === 3 ? [...m[1]!].map((c) => c + c).join(\"\") : m[1]!;\n  return `#${hex.toLowerCase()}`;\n}\n\nconst text = ref(model.value);\nconst touched = ref(false);\nwatch(model, (v) => {\n  if (normalize(text.value) !== v) text.value = v;\n});\n\nconst invalid = computed(() => touched.value && text.value.trim() !== \"\" && normalize(text.value) === null);\nconst shownError = computed(\n  () => props.error || (invalid.value ? t(\"colorInvalid\", { example: t(\"colorPlaceholder\") }) : undefined),\n);\nconst swatch = computed(() => normalize(model.value) ?? \"#000000\");\n\nfunction onText(e: Event) {\n  text.value = (e.target as HTMLInputElement).value;\n  const hex = normalize(text.value);\n  if (hex) model.value = hex;\n}\n\nfunction onBlur() {\n  touched.value = true;\n  const hex = normalize(text.value);\n  if (hex) text.value = hex;\n}\n\nfunction onWrapClick(e: MouseEvent) {\n  if (e.target !== swatchEl.value && !props.disabled) input.value?.focus();\n}\n\nfunction onPick(e: Event) {\n  model.value = (e.target as HTMLInputElement).value;\n  text.value = model.value;\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=\"shownError\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap e-colorfield\"\n        :data-invalid=\"shownError ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"onWrapClick\"\n      >\n        <input\n          ref=\"swatchEl\"\n          class=\"e-color-swatch\"\n          type=\"color\"\n          :value=\"swatch\"\n          :disabled=\"disabled\"\n          :aria-label=\"t('pickColor')\"\n          @input=\"onPick\"\n        />\n        <input\n          :id=\"field.id\"\n          ref=\"input\"\n          class=\"e-input\"\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          maxlength=\"7\"\n          :placeholder=\"t('colorPlaceholder')\"\n          :value=\"text\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :aria-invalid=\"field.ariaInvalid\"\n          v-bind=\"attrs.input(field.ariaDescribedby)\"\n          @input=\"onText\"\n          @blur=\"onBlur\"\n        />\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  .e-colorfield {\n    align-items: center;\n    gap: var(--e-space-2);\n    padding-inline-start: var(--e-space-1);\n  }\n\n  .e-color-swatch {\n    flex: none;\n    width: calc(var(--e-control-height) - 2 * (var(--e-stroke-edge) + var(--e-space-1)));\n    height: calc(var(--e-control-height) - 2 * (var(--e-stroke-edge) + var(--e-space-1)));\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: none;\n    cursor: pointer;\n  }\n\n  .e-color-swatch::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n\n  .e-color-swatch::-webkit-color-swatch {\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) rgb(0 0 0 / 0.22);\n  }\n\n  .e-color-swatch::-moz-color-swatch {\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) rgb(0 0 0 / 0.22);\n  }\n\n  .e-color-swatch:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .e-colorfield .e-input {\n    font-family: var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,IAAMgB,IAAQC,GAkBRC,IAAQlB,EAAmBiB,GAAA,YAAgB,GAE3CG,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAQC,EAA6B,IAAI,GACzCC,IAAWD,EAA6B,IAAI;EAElD,SAASE,EAAU,GAA4B;GAC7C,IAAMC,IAAI,iCAAiC,KAAKC,EAAI,KAAK,CAAC;GAG1D,OAFKD,IAEE,KADKA,EAAE,EAAE,CAAE,WAAW,IAAI,CAAC,GAAGA,EAAE,EAAG,CAAC,CAAC,KAAK,MAAME,IAAIA,CAAC,CAAC,CAAC,KAAK,EAAE,IAAIF,EAAE,GAAA,CAC5D,YAAY,MAFZ;EAGjB;EAEA,IAAMG,IAAON,EAAIP,EAAM,KAAK,GACtBc,IAAUP,EAAI,EAAK;EACzB,EAAMP,IAAQ,MAAM;GAClB,AAAIS,EAAUI,EAAK,KAAK,MAAME,MAAG,EAAK,QAAQA;EAChD,CAAC;EAED,IAAMC,IAAUC,QAAeH,EAAQ,SAASD,EAAK,MAAM,KAAK,MAAM,MAAMJ,EAAUI,EAAK,KAAK,MAAM,IAAI,GACpGK,IAAaD,QACXnB,EAAM,UAAUkB,EAAQ,QAAQd,EAAE,gBAAgB,EAAE,SAASA,EAAE,kBAAkB,EAAE,CAAC,IAAI,KAAA,EAChG,GACMiB,IAASF,QAAeR,EAAUT,EAAM,KAAK,KAAK,SAAS;EAEjE,SAASoB,EAAO,GAAU;GACxB,EAAK,QAAS,EAAE,OAA4B;GAC5C,IAAMC,IAAMZ,EAAUI,EAAK,KAAK;GAChC,AAAIQ,MAAK,EAAM,QAAQA;EACzB;EAEA,SAASC,IAAS;GAChB,EAAQ,QAAQ;GAChB,IAAMD,IAAMZ,EAAUI,EAAK,KAAK;GAChC,AAAIQ,MAAK,EAAK,QAAQA;EACxB;EAEA,SAASE,EAAY,GAAe;GAClC,AAAI,EAAE,WAAWf,EAAS,SAAS,CAACV,EAAM,YAAUQ,EAAM,OAAO,MAAM;EACzE;EAEA,SAASkB,EAAO,GAAU;GAExB,AADA,EAAM,QAAS,EAAE,OAA4B,OAC7C,EAAK,QAAQxB,EAAM;EACrB;E,OAEAH,EAAa;GACX;GACA,aAAaS,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICvB,EAAA,GAAAC,EA8CSC,GA9CTC,EACUC,EA6CDiB,CAAA,CA7CM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOmB,EAAA;GACP,UAAUnB,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOX,GAAE,MAAK,CAEvBC,EAgCM,OAAA;IA/BJ,OAAM;IACL,gBAAc6B,EAAA,QAAU,KAAQ,KAAA;IAChC,iBAAenB,EAAA,WAAQ,KAAQ,KAAA;IAC/B,SAAOwB;G,IAERlC,EAQE,SAAA;IAPI,SAAA;IAAJ,KAAImB;IACJ,OAAM;IACN,MAAK;IACJ,OAAOW,EAAA;IACP,UAAUpB,EAAA;IACV,cAAYZ,EAAAe,CAAA,CAAC,CAAA,WAAA;IACb,SAAOsB;G,iBAEVnC,EAgBE,SAhBFH,EAgBE;IAfC,IAAI6C,EAAM;IACP,SAAA;IAAJ,KAAIzB;IACJ,OAAM;IACN,MAAK;IACL,YAAW;IACX,cAAa;IACb,WAAU;IACT,aAAanB,EAAAe,CAAA,CAAC,CAAA,kBAAA;IACd,OAAOW,EAAA;IACP,UAAUd,EAAA;IACV,UAAUA,EAAA;IACV,gBAAcgC,EAAM;GACb,GAAA5C,EAAAiB,CAAA,CAAK,CAAC,MAAM2B,EAAM,eAAe,GAAA;IACxC,SAAOX;IACD"}

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

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

package/dist/components/Combobox/ECombobox.js

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

package/dist/components/Combobox/ECombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ECombobox.js","names":["_sfc_main","ECombobox_vue_vue_type_script_setup_true_lang_default","ECombobox_default"],"sources":["../../../src/components/Combobox/ECombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EComboboxBase from \"./EComboboxBase.vue\";\nimport type { EComboboxProps } from \"./types.js\";\n\nconst props = withDefaults(defineProps<EComboboxProps>(), { clearable: true });\n\ndefineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst base = ref<InstanceType<typeof EComboboxBase> | null>(null);\ndefineExpose({\n  input: () => base.value?.input ?? null,\n  focus: () => base.value?.focus(),\n});\n</script>\n\n<template>\n  <EComboboxBase\n    ref=\"base\"\n    v-bind=\"props\"\n    v-model=\"model\"\n    v-model:open=\"open\"\n    mode=\"single\"\n    @input-change=\"(text: string) => $emit('inputChange', text)\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/Combobox/ECombobox.vue.d.ts

@@ -0,0 +1,44 @@
+type __VLS_ModelProps = {
+    modelValue?: string;
+    "open"?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label: string;
+    bare?: boolean;
+} & import('./types.js').EComboboxFields & __VLS_ModelProps) | ({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label?: string;
+    bare: true;
+} & import('./types.js').EComboboxFields & __VLS_ModelProps), {
+    input: () => HTMLInputElement | null;
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:modelValue": (value: string) => any;
+    inputChange: (text: string) => any;
+}, string, import('vue').PublicProps, Readonly<({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label: string;
+    bare?: boolean;
+} & import('./types.js').EComboboxFields & __VLS_ModelProps) | ({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label?: string;
+    bare: true;
+} & import('./types.js').EComboboxFields & __VLS_ModelProps)> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onInputChange?: ((text: string) => any) | undefined;
+}>, {
+    clearable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Combobox/ECombobox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import e from "./EComboboxBase.js";
+import { createBlock as t, defineComponent as n, mergeModels as r, mergeProps as i, openBlock as a, ref as o, useModel as s } from "vue";
+//#region src/components/Combobox/ECombobox.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ n({
+	__name: "ECombobox",
+	props: /*@__PURE__*/ r({
+		hideLabel: { type: Boolean },
+		ariaLabel: {},
+		label: {},
+		bare: { type: Boolean },
+		options: {},
+		placeholder: {},
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		name: {},
+		loading: { type: Boolean },
+		emptyText: {},
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		filter: {},
+		id: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ r(["inputChange"], ["update:modelValue", "update:open"]),
+	setup(n, { expose: r }) {
+		let c = n, l = s(n, "modelValue"), u = s(n, "open"), d = o(null);
+		return r({
+			input: () => d.value?.input ?? null,
+			focus: () => d.value?.focus()
+		}), (n, r) => (a(), t(e, i({
+			ref_key: "base",
+			ref: d
+		}, c, {
+			modelValue: l.value,
+			"onUpdate:modelValue": r[0] ||= (e) => l.value = e,
+			open: u.value,
+			"onUpdate:open": r[1] ||= (e) => u.value = e,
+			mode: "single",
+			onInputChange: r[2] ||= (e) => n.$emit("inputChange", e)
+		}), null, 16, ["modelValue", "open"]));
+	}
+});
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=ECombobox.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Combobox/ECombobox.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ECombobox.vue_vue_type_script_setup_true_lang.js","names":["$emit","_useModel","_openBlock","_createBlock","EComboboxBase","_mergeProps","EComboboxBase_default","ECombobox_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","__expose","props","__props","model","useModel","open","base","ref","openBlock","createBlock","mergeProps","_cache","$event","_ctx","text"],"sources":["../../../src/components/Combobox/ECombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EComboboxBase from \"./EComboboxBase.vue\";\nimport type { EComboboxProps } from \"./types.js\";\n\nconst props = withDefaults(defineProps<EComboboxProps>(), { clearable: true });\n\ndefineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst base = ref<InstanceType<typeof EComboboxBase> | null>(null);\ndefineExpose({\n  input: () => base.value?.input ?? null,\n  focus: () => base.value?.focus(),\n});\n</script>\n\n<template>\n  <EComboboxBase\n    ref=\"base\"\n    v-bind=\"props\"\n    v-model=\"model\"\n    v-model:open=\"open\"\n    mode=\"single\"\n    @input-change=\"(text: string) => $emit('inputChange', text)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAMa,IAAQC,GAORC,IAAQd,EAAmBa,GAAA,YAAgB,GAE3CG,IAAOhB,EAAoBa,GAAC,MAA0B,GAEtDI,IAAOC,EAA+C,IAAI;E,OAChEP,EAAa;GACX,aAAaM,EAAK,OAAO,SAAS;GAClC,aAAaA,EAAK,OAAO,MAAM;EACjC,CAAC,I,UAIChB,EAAA,GAAAC,EAOEC,GAPFC,EAOE;GANI,SAAA;GAAJ,KAAIa;EACI,GAAAL,GAAK;GACJ,YAAAE,EAAA;GAAA,uBAAA,AAAAQ,EAAA,QAAA,MAAA,EAAK,QAAAC;GACN,MAAMP,EAAA;GAAA,iBAAA,AAAAM,EAAA,QAAA,MAAA,EAAI,QAAAC;GAClB,MAAK;GACJ,eAAY,AAAAD,EAAA,QAAG,MAAiBvB,EAAAA,MAAK,eAAgB0B,CAAI"}

package/dist/components/Combobox/EComboboxBase.js

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

package/dist/components/Combobox/EComboboxBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EComboboxBase.js","names":["_sfc_main","EComboboxBase_vue_vue_type_script_setup_true_lang_default","EComboboxBase_default"],"sources":["../../../src/components/Combobox/EComboboxBase.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, h, nextTick, onMounted, ref, watch, type FunctionalComponent } from \"vue\";\nimport {\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxPortal,\n  ComboboxRoot,\n  ComboboxTrigger,\n  ComboboxViewport,\n} from \"reka-ui\";\nimport EField from \"../Field/EField.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESpinner from \"../Spinner/ESpinner.vue\";\nimport EComboboxOption from \"./EComboboxOption.vue\";\nimport { normalizeOptions, sectionOptions } from \"../Select/options.js\";\nimport type { EComboboxProps } from \"./types.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Select/panel.css\";\nimport \"./combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(defineProps<EComboboxProps & { mode: \"single\" | \"free\" | \"multiple\" }>(), {\n  clearable: true,\n});\n\nconst emit = defineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\nconst model = defineModel<string | string[]>();\n\nconst t = useMessages();\nconst portal = usePortalTarget();\nconst attrs = useFieldAttrs();\nconst groupId = useUid();\nconst bareId = useUid(() => props.id);\n\nconst Bare: FunctionalComponent = (_, { slots }) =>\n  h(\"div\", attrs.wrapper(), slots.default?.({ id: bareId.value, ariaInvalid: undefined, ariaDescribedby: undefined }));\nconst frame = computed(() =>\n  props.bare\n    ? {}\n    : {\n        id: props.id,\n        label: props.label,\n        hideLabel: props.hideLabel,\n        hint: props.hint,\n        error: props.error,\n        required: props.required,\n        optional: props.optional,\n      },\n);\nconst listName = computed(() => (props.bare ? (props.ariaLabel ?? props.label) : props.label));\n\nconst multiple = computed(() => props.mode === \"multiple\");\nconst free = computed(() => props.mode === \"free\");\nconst all = computed(() => normalizeOptions(props.options));\nconst values = computed<string[]>(() => (multiple.value && Array.isArray(model.value) ? model.value : []));\nconst single = computed(() => (typeof model.value === \"string\" ? model.value : \"\"));\nconst rootValue = computed(() => (multiple.value ? values.value : single.value));\n\nfunction labelOf(v: string): string {\n  return all.value.find((o) => o.value === v)?.label ?? (free.value ? v : \"\");\n}\nconst resting = () => (multiple.value ? \"\" : labelOf(single.value));\n\nconst text = ref(resting());\nconst typing = ref(false);\nconst wantOpen = defineModel<boolean>(\"open\", { default: false });\nconst anchor = ref<{ $el: HTMLElement } | null>(null);\nconst query = computed(() => (typing.value ? text.value.trim().toLowerCase() : \"\"));\n\nconst shown = computed(() => {\n  const q = query.value;\n  if (props.filter) return all.value.filter((o) => props.filter!(o, q));\n  return all.value.filter(\n    (o) => !q || o.label.toLowerCase().includes(q) || (o.description ?? \"\").toLowerCase().includes(q),\n  );\n});\nconst sections = computed(() => sectionOptions(shown.value));\nconst hasList = computed(() => shown.value.length > 0 || !!props.loading || !free.value);\nconst open = computed(() => wantOpen.value && hasList.value && !props.disabled);\nconst announce = computed(() =>\n  open.value && !shown.value.length ? (props.loading ? t(\"searching\") : props.emptyText || t(\"noMatches\")) : \"\",\n);\nconst hasValue = computed(() => (multiple.value ? values.value.length > 0 : !!text.value));\n\nwatch(rootValue, () => {\n  const rest = resting();\n  if (rest !== text.value) {\n    text.value = rest;\n    typing.value = false;\n  }\n});\nwatch(all, () => {\n  if (!typing.value && !open.value) text.value = resting();\n});\n\nconst listId = ref<string | undefined>();\nconst content = ref<{ $el: HTMLElement } | null>(null);\nonMounted(() => {\n  if (!open.value) return;\n  let tries = 0;\n  const read = () => {\n    listId.value = content.value?.$el?.id || undefined;\n    if (!listId.value && tries++ < 10) requestAnimationFrame(read);\n  };\n  void nextTick(read);\n});\n\nconst inputEl = () => anchor.value?.$el?.querySelector(\"input\") ?? null;\nconst focusInput = () => inputEl()?.focus();\n\nfunction isSelected(value: string): boolean {\n  return multiple.value ? values.value.includes(value) : free.value ? single.value === value : single.value === value;\n}\nconst itemValue = (o: { value: string; label: string }) => (free.value ? o.label : o.value);\n\nfunction onPick(v: unknown) {\n  typing.value = false;\n  if (multiple.value) {\n    model.value = Array.isArray(v) ? (v as string[]) : [];\n    text.value = \"\";\n    emit(\"inputChange\", \"\");\n    return;\n  }\n  const next = typeof v === \"string\" ? v : \"\";\n  model.value = next;\n  text.value = free.value ? next : labelOf(next);\n  emit(\"inputChange\", text.value);\n}\n\nfunction onInput(e: Event) {\n  const v = (e.target as HTMLInputElement).value;\n  text.value = v;\n  typing.value = true;\n  wantOpen.value = true;\n  emit(\"inputChange\", v);\n  if (free.value) model.value = v;\n}\n\nfunction remove(v: string) {\n  model.value = values.value.filter((x) => x !== v);\n}\n\nfunction clear() {\n  model.value = multiple.value ? [] : \"\";\n  text.value = \"\";\n  typing.value = false;\n  emit(\"inputChange\", \"\");\n  focusInput();\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"Escape\" && !open.value && text.value) {\n    e.preventDefault();\n    clear();\n  } else if (e.key === \"Backspace\" && multiple.value && !text.value && values.value.length) {\n    remove(values.value[values.value.length - 1]!);\n  }\n}\n\nfunction keepCaretKeys(e: KeyboardEvent) {\n  if (e.key === \"Home\" || e.key === \"End\") e.stopImmediatePropagation();\n}\n\nfunction onBlur(e: FocusEvent) {\n  const next = e.relatedTarget as Element | null;\n  if (next && (anchor.value?.$el?.contains(next) || next.closest?.(\".e-popover\"))) return;\n  wantOpen.value = false;\n  typing.value = false;\n  if (!free.value) text.value = resting();\n}\n\nfunction onWrapDown(e: MouseEvent) {\n  if (e.target === e.currentTarget && !props.disabled) {\n    e.preventDefault();\n    focusInput();\n  }\n}\n\ntype FieldSlot = { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined };\nfunction inputBind(field: FieldSlot) {\n  return {\n    id: field.id,\n    required: props.required && !(multiple.value && values.value.length) ? true : undefined,\n    placeholder: multiple.value && values.value.length ? \"\" : props.placeholder,\n    \"aria-invalid\": field.ariaInvalid,\n    \"aria-label\": props.bare ? listName.value : undefined,\n    autocomplete: \"off\",\n    ...(listId.value ? { \"aria-controls\": listId.value } : {}),\n    ...(shown.value.length ? {} : { \"aria-activedescendant\": undefined }),\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input: computed(() => inputEl()),\n  focus: focusInput,\n});\n</script>\n\n<template>\n  <component :is=\"bare ? Bare : EField\" v-bind=\"{ ...attrs.wrapper(), ...frame }\">\n    <template #default=\"field\">\n      <ComboboxRoot\n        class=\"e-combo-root\"\n        :model-value=\"rootValue\"\n        :multiple=\"multiple\"\n        :open=\"open\"\n        :disabled=\"disabled\"\n        ignore-filter\n        @update:model-value=\"onPick\"\n        @update:open=\"wantOpen = $event\"\n      >\n        <ComboboxAnchor\n          ref=\"anchor\"\n          class=\"e-input-wrap e-combo\"\n          :class=\"{ 'e-combo--multi': multiple }\"\n          :data-invalid=\"error && !bare ? '' : undefined\"\n          :data-disabled=\"disabled ? '' : undefined\"\n          @mousedown=\"onWrapDown\"\n          @focusout=\"onBlur\"\n        >\n          <div class=\"e-combo-main\">\n            <template v-if=\"multiple\">\n              <span v-for=\"v in values\" :key=\"v\" class=\"e-tag\">\n                {{ labelOf(v) }}\n                <button\n                  type=\"button\"\n                  class=\"e-tag-x\"\n                  :aria-label=\"t('removeItem', { label: labelOf(v) })\"\n                  :disabled=\"disabled\"\n                  @click=\"remove(v)\"\n                >\n                  <EIcon name=\"x\" small />\n                </button>\n              </span>\n            </template>\n            <ComboboxInput\n              class=\"e-input e-combo-input\"\n              :model-value=\"text\"\n              :display-value=\"(v: unknown) => (typeof v === 'string' ? (free ? v : labelOf(v)) : '')\"\n              :disabled=\"disabled\"\n              v-bind=\"inputBind(field)\"\n              @update:model-value=\"text = $event\"\n              @input=\"onInput\"\n              @keydown=\"onKeydown\"\n              @keydown.capture=\"keepCaretKeys\"\n            />\n          </div>\n          <template v-if=\"name\">\n            <input v-for=\"(v, k) in multiple ? values : [single]\" :key=\"k\" type=\"hidden\" :name=\"name\" :value=\"v\" />\n          </template>\n          <div class=\"e-combo-tail\">\n            <button\n              v-if=\"hasValue && clearable && !disabled\"\n              type=\"button\"\n              class=\"e-combo-btn\"\n              :aria-label=\"t('clear')\"\n              @mousedown.prevent\n              @click=\"clear\"\n            >\n              <EIcon name=\"x\" />\n            </button>\n            <ComboboxTrigger\n              v-if=\"!free\"\n              class=\"e-combo-btn\"\n              :aria-label=\"t('showOptions')\"\n              :disabled=\"disabled\"\n              @mousedown.prevent\n            >\n              <EIcon name=\"chevron-down\" bold />\n            </ComboboxTrigger>\n          </div>\n        </ComboboxAnchor>\n        <span class=\"e-sr\" role=\"status\">{{ announce }}</span>\n        <ComboboxPortal :to=\"portal\">\n          <ComboboxContent\n            ref=\"content\"\n            position=\"popper\"\n            align=\"start\"\n            :side-offset=\"6\"\n            :collision-padding=\"8\"\n            class=\"e-popover e-listpanel e-root\"\n            :aria-label=\"listName\"\n            :aria-busy=\"loading ? 'true' : undefined\"\n          >\n            <ComboboxViewport>\n              <template v-if=\"shown.length\">\n                <template v-for=\"(section, i) in sections\" :key=\"i\">\n                  <div v-if=\"section.group\" class=\"e-opt-set\" role=\"group\" :aria-labelledby=\"`${groupId}-g${i}`\">\n                    <div :id=\"`${groupId}-g${i}`\" class=\"e-opt-group\">{{ section.group }}</div>\n                    <EComboboxOption\n                      v-for=\"o in section.options\"\n                      :key=\"o.value\"\n                      :option=\"o\"\n                      :value=\"itemValue(o)\"\n                      :selected=\"isSelected(itemValue(o))\"\n                      :query=\"query\"\n                    />\n                  </div>\n                  <template v-else>\n                    <EComboboxOption\n                      v-for=\"o in section.options\"\n                      :key=\"o.value\"\n                      :option=\"o\"\n                      :value=\"itemValue(o)\"\n                      :selected=\"isSelected(itemValue(o))\"\n                      :query=\"query\"\n                    />\n                  </template>\n                </template>\n              </template>\n              <div v-else class=\"e-opt-status\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                <ESpinner v-if=\"loading\" :label=\"t('searching')\" />\n                <template v-else>{{ emptyText || t(\"noMatches\") }}</template>\n              </div>\n            </ComboboxViewport>\n          </ComboboxContent>\n        </ComboboxPortal>\n      </ComboboxRoot>\n    </template>\n  </component>\n</template>\n\n<style>\n@layer e.controls {\n  .e-combo-main {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    align-items: center;\n    align-self: stretch;\n    gap: var(--e-space-1);\n    min-width: 0;\n  }\n\n  .e-combo-tail {\n    display: flex;\n    flex: none;\n    align-items: center;\n    align-self: center;\n  }\n\n  .e-combo--multi {\n    padding: 3px var(--e-space-1) 3px var(--e-space-2);\n    gap: var(--e-space-1);\n  }\n\n  .e-combo--multi .e-input {\n    height: calc(var(--e-control-height) - 9px);\n    align-self: center;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: 32px;\n    padding: 0 var(--e-space-1) 0 var(--e-space-3);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-primary);\n    color: var(--e-ink);\n    font: 500 var(--e-text-sm)/1 var(--e-font-sans);\n  }\n\n  .e-tag-x::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n  }\n\n  .e-tag-x {\n    position: relative;\n    display: inline-grid;\n    place-items: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--e-primary);\n    cursor: pointer;\n  }\n\n  .e-tag-x:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 1px var(--e-primary);\n  }\n\n  .e-tag-x:active {\n    background: var(--e-wash-press);\n  }\n\n  .e-tag-x:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: 1px;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Combobox/EComboboxBase.vue.d.ts

@@ -0,0 +1,52 @@
+type __VLS_ModelProps = {
+    modelValue?: string | string[];
+    "open"?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label: string;
+    bare?: boolean;
+} & import('./types.js').EComboboxFields & {
+    mode: "single" | "free" | "multiple";
+} & __VLS_ModelProps) | ({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label?: string;
+    bare: true;
+} & import('./types.js').EComboboxFields & {
+    mode: "single" | "free" | "multiple";
+} & __VLS_ModelProps), {
+    input: import('vue').ComputedRef<HTMLInputElement | null>;
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:modelValue": (value: string | string[] | undefined) => any;
+    inputChange: (text: string) => any;
+}, string, import('vue').PublicProps, Readonly<({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label: string;
+    bare?: boolean;
+} & import('./types.js').EComboboxFields & {
+    mode: "single" | "free" | "multiple";
+} & __VLS_ModelProps) | ({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label?: string;
+    bare: true;
+} & import('./types.js').EComboboxFields & {
+    mode: "single" | "free" | "multiple";
+} & __VLS_ModelProps)> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    onInputChange?: ((text: string) => any) | undefined;
+}>, {
+    clearable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;