@eos-ui/vue 0.4.0 → 0.5.0

package/dist/components/Tabs/ETabs.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,9 @@ var E = {
 	__name: "ETabs",
 	props: /*@__PURE__*/ l({
 		items: {},
-		fill: { type: Boolean }
+		fill: { type: Boolean },
+		orientation: {},
+		framed: { type: Boolean }
 	}, {
 		modelValue: {},
 		modelModifiers: {}
@@ -21,7 +23,7 @@ var E = {
 		async function N(e) {
 			await u();
 			let t = M.value?.$el, n = t?.querySelector("[aria-selected=\"true\"]");
-			if (!t || !n || t.scrollWidth <= t.clientWidth) return;
+			if (l.orientation === "vertical" || !t || !n || t.scrollWidth <= t.clientWidth) return;
 			let r = typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)").matches, i = n.getBoundingClientRect(), a = t.getBoundingClientRect();
 			t.scrollBy({
 				left: i.left + i.width / 2 - (a.left + a.width / 2),
@@ -29,7 +31,12 @@ var E = {
 			});
 		}
 		return f(() => N(!1)), b(A, () => N(!0)), (e, n) => (p(), r(v(w), {
-			class: d(["e-tabs", { "e-tabs--fill": c.fill }]),
+			class: d(["e-tabs", {
+				"e-tabs--fill": c.fill,
+				"e-tabs--vertical": c.orientation === "vertical",
+				"e-tabs--framed": c.framed
+			}]),
+			orientation: c.orientation ?? "horizontal",
 			"model-value": A.value,
 			dir: j.value,
 			"onUpdate:modelValue": n[0] ||= (e) => O.value = String(e)
@@ -59,6 +66,7 @@ var E = {
 			_: 3
 		}, 8, [
 			"class",
+			"orientation",
 			"model-value",
 			"dir"
 		]));

package/dist/components/Tabs/ETabs.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETabs.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createVNode","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode","_renderSlot","_hoisted_1","ETabs_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","flat","computed","model","useModel","config","useConfig","current","dir","list","ref","reveal","nextTick","el","tab","calm","a","b","smooth","onMounted","watch","openBlock","createBlock","unref","TabsRoot","normalizeClass","_cache","$event","withCtx","createVNode","TabsList","createElementBlock","Fragment","renderList","TabsTrigger","item","createTextVNode","toDisplayString","createCommentVNode","TabsContent","renderSlot","_ctx"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Names the tab's slot, and is the value of `v-model`. */\n  id: string;\n  /** The tab's words. */\n  label: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The tabs, in order: `{ id, label, count? }`. Two to five, with short labels. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\n  /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */\n  fill?: boolean;\n}>();\n\ndefineSlots<{\n  [id: string]: ((props: { item: TabItem }) => unknown) | undefined;\n  /** The panel of any tab that has no slot of its own. */\n  panel?(props: { item: TabItem }): unknown;\n}>();\n\nconst flat = computed(() => props.items ?? []);\n\n/** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */\nconst model = defineModel<string>();\n\nconst config = useConfig();\nconst current = computed(() => model.value ?? flat.value[0]?.id);\nconst dir = computed<\"ltr\" | \"rtl\">(\n  () => config.dir ?? (typeof document !== \"undefined\" && document.documentElement.dir === \"rtl\" ? \"rtl\" : \"ltr\"),\n);\n\nconst list = ref<{ $el: HTMLElement } | null>(null);\n\nasync function reveal(smooth: boolean) {\n  await nextTick();\n  const el = list.value?.$el;\n  const tab = el?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n  if (!el || !tab || el.scrollWidth <= el.clientWidth) return;\n  const calm = typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  const a = tab.getBoundingClientRect();\n  const b = el.getBoundingClientRect();\n  el.scrollBy({ left: a.left + a.width / 2 - (b.left + b.width / 2), behavior: smooth && !calm ? \"smooth\" : \"auto\" });\n}\n\nonMounted(() => reveal(false));\nwatch(current, () => reveal(true));\n</script>\n\n<template>\n  <TabsRoot class=\"e-tabs\" :class=\"{ 'e-tabs--fill': fill }\" :model-value=\"current\" :dir=\"dir\" @update:model-value=\"model = String($event)\">\n    <TabsList ref=\"list\" class=\"e-tablist\">\n      <TabsTrigger v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tab\">\n        {{ item.label }}\n        <span v-if=\"item.count != null\" class=\"e-tab-count\">{{ item.count }}</span>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tabpanel\">\n      <slot :name=\"item.id\" :item=\"item\"><slot name=\"panel\" :item=\"item\" /></slot>\n    </TabsContent>\n  </TabsRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tablist {\n    display: flex;\n    gap: 0;\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- the two axes are set apart */\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .e-tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Tabs are button-like: every tab is ringed and neighbours sit flush and share an edge, so only the outer ends of the row are rounded. The selected tab is outlined in the primary colour with a thick slab underneath. */\n  .e-tab {\n    --e-bc: var(--e-border-strong);\n\n    /* A selected tab rises: its face is a whole rounded box with an offset copy in the primary colour showing underneath. The margin gives back the room that copy takes, so every tab row is one control height tall. */\n    --e-lift: 0px;\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    flex: none;\n    height: calc(var(--e-control-height) - var(--e-lift));\n    margin-block-end: var(--e-lift);\n    padding: 0 var(--e-space-4);\n    border: var(--e-stroke-edge) solid var(--e-bc);\n    border-radius: 0;\n    background: transparent;\n    color: var(--e-muted);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition:\n      color var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  /* Only the outer ends of the row are rounded. */\n  .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tab + .e-tab {\n    margin-inline-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tab:hover {\n    --e-bc: var(--e-ink);\n\n    z-index: var(--e-z-raised);\n    color: var(--e-ink);\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    z-index: var(--e-z-sticky);\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    box-shadow: 0 var(--e-lift) 0 0 var(--e-primary);\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-tab:focus-visible {\n    z-index: var(--e-z-focus);\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-tabs--fill .e-tablist {\n    overflow-x: hidden;\n  }\n\n  .e-tabs--fill .e-tab {\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    padding-inline: var(--e-space-1);\n  }\n\n  .e-tab-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n    color: var(--e-ink);\n  }\n\n  .e-tabpanel {\n    padding-top: var(--e-space-4);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-tab {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-tab[aria-selected=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAiBA,IAAMkB,IAAQC,GAaRC,IAAOC,QAAeH,EAAM,SAAS,CAAC,CAAC,GAGvCI,IAAQtB,EAAmBmB,GAAA,YAAC,GAE5BK,IAASC,EAAU,GACnBC,IAAUL,QAAeC,EAAM,SAASF,EAAK,MAAM,EAAE,EAAE,EAAE,GACzDO,IAAMN,QACJG,EAAO,QAAQ,OAAO,WAAa,OAAe,SAAS,gBAAgB,QAAQ,QAAQ,QAAQ,MAC3G,GAEMI,IAAOC,EAAiC,IAAI;EAElD,eAAeC,EAAO,GAAiB;GACrC,MAAMC,EAAS;GACf,IAAMC,IAAKJ,EAAK,OAAO,KACjBK,IAAMD,GAAI,cAA2B,0BAAwB;GACnE,IAAI,CAACA,KAAM,CAACC,KAAOD,EAAG,eAAeA,EAAG,aAAa;GACrD,IAAME,IAAO,OAAO,aAAe,OAAe,WAAW,kCAAkC,CAAC,CAAC,SAC3FC,IAAIF,EAAI,sBAAsB,GAC9BG,IAAIJ,EAAG,sBAAsB;GACnC,EAAG,SAAS;IAAE,MAAMG,EAAE,OAAOA,EAAE,QAAQ,KAAKC,EAAE,OAAOA,EAAE,QAAQ;IAAI,UAAUC,KAAU,CAACH,IAAO,WAAW;GAAO,CAAC;EACpH;E,OAEAI,QAAgBR,EAAO,EAAK,CAAC,GAC7BS,EAAMb,SAAeI,EAAO,EAAI,CAAC,I,UAI/B7B,EAAA,GAAAC,EAUWC,EAAAwC,CAAA,GAAA;GAVD,OAAKvC,EAAA,CAAC,UAAQ,EAAA,gBAA2Be,EAAA,KAAI,CAAA,CAAA;GAAK,eAAaO,EAAA;GAAU,KAAKC,EAAA;GAAM,uBAAkB,AAAAkB,EAAA,QAAA,MAAE,EAAA,QAAQ,OAAOC,CAAM;;GACrI,SAAAzC,QAKW,CALXC,EAKWH,EAAA8C,CAAA,GAAA;IALG,SAAA;IAAJ,KAAIrB;IAAO,OAAM;;IACZ,SAAAvB,QAAoB,EAAjCJ,EAAA,EAAA,GAAAM,EAGcC,GAAA,MAAAC,EAHcW,EAAA,QAAR,OAApBnB,EAAA,GAAAC,EAGcC,EAAAkD,CAAA,GAAA;KAHqB,KAAKC,EAAK;KAAK,OAAOA,EAAK;KAAI,OAAM;;KACtE,SAAAjD,QAAgB,CAAbK,EAAAC,EAAA2C,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,SAAK,O,aAAtBrD,EAAA,GAAAM,EAA2E,QAA3EO,GAA2EH,EAApB2C,EAAK,KAAK,GAAA,CAAA,E;;;;G,UAGrErD,EAAA,EAAA,GAAAM,EAEcC,GAAA,MAAAC,EAFcW,EAAA,QAAR,OAApBnB,EAAA,GAAAC,EAEcC,EAAAuD,CAAA,GAAA;IAFqB,KAAKJ,EAAK;IAAK,OAAOA,EAAK;IAAI,OAAM;;IACtE,SAAAjD,QAA4E,CAA5EQ,EAA4E+C,EAAA,QAA/DN,EAAK,IAAE,EAAS,QAAI,SAA2C,CAAzCzC,EAAkC+C,EAAA,QAAA,SAAA,EAAR,QAAI,CAAA,C"}
+{"version":3,"file":"ETabs.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createVNode","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode","_renderSlot","_hoisted_1","ETabs_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","flat","computed","model","useModel","config","useConfig","current","dir","list","ref","reveal","nextTick","el","tab","calm","a","b","smooth","onMounted","watch","openBlock","createBlock","unref","TabsRoot","normalizeClass","_cache","$event","withCtx","createVNode","TabsList","createElementBlock","Fragment","renderList","TabsTrigger","item","createTextVNode","toDisplayString","createCommentVNode","TabsContent","renderSlot","_ctx"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Names the tab's slot, and is the value of `v-model`. */\n  id: string;\n  /** The tab's words. */\n  label: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The tabs, in order: `{ id, label, count? }`. Two to five across, with short labels; a vertical list can be longer. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\n  /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */\n  fill?: boolean;\n  /** `vertical` stacks the tabs in a column beside their panel, for a long list of sections. Use it when there are more tabs than fit across; `fill` has no effect. @default \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Joins the tabs to their panel so the two read as one card: the panel is outlined, the row of tabs sits on its edge like folder tabs, and the chosen tab opens into the panel with no line between. The edge stays open where there are no tabs. @default false */\n  framed?: boolean;\n}>();\n\ndefineSlots<{\n  [id: string]: ((props: { item: TabItem }) => unknown) | undefined;\n  /** The panel of any tab that has no slot of its own. */\n  panel?(props: { item: TabItem }): unknown;\n}>();\n\nconst flat = computed(() => props.items ?? []);\n\n/** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */\nconst model = defineModel<string>();\n\nconst config = useConfig();\nconst current = computed(() => model.value ?? flat.value[0]?.id);\nconst dir = computed<\"ltr\" | \"rtl\">(\n  () => config.dir ?? (typeof document !== \"undefined\" && document.documentElement.dir === \"rtl\" ? \"rtl\" : \"ltr\"),\n);\n\nconst list = ref<{ $el: HTMLElement } | null>(null);\n\nasync function reveal(smooth: boolean) {\n  await nextTick();\n  const el = list.value?.$el;\n  const tab = el?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n  if (props.orientation === \"vertical\" || !el || !tab || el.scrollWidth <= el.clientWidth) return;\n  const calm = typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  const a = tab.getBoundingClientRect();\n  const b = el.getBoundingClientRect();\n  el.scrollBy({ left: a.left + a.width / 2 - (b.left + b.width / 2), behavior: smooth && !calm ? \"smooth\" : \"auto\" });\n}\n\nonMounted(() => reveal(false));\nwatch(current, () => reveal(true));\n</script>\n\n<template>\n  <TabsRoot\n    class=\"e-tabs\"\n    :class=\"{ 'e-tabs--fill': fill, 'e-tabs--vertical': orientation === 'vertical', 'e-tabs--framed': framed }\"\n    :orientation=\"orientation ?? 'horizontal'\"\n    :model-value=\"current\"\n    :dir=\"dir\"\n    @update:model-value=\"model = String($event)\"\n  >\n    <TabsList ref=\"list\" class=\"e-tablist\">\n      <TabsTrigger v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tab\">\n        {{ item.label }}\n        <span v-if=\"item.count != null\" class=\"e-tab-count\">{{ item.count }}</span>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tabpanel\">\n      <slot :name=\"item.id\" :item=\"item\"><slot name=\"panel\" :item=\"item\" /></slot>\n    </TabsContent>\n  </TabsRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tablist {\n    display: flex;\n    flex: none;\n    gap: 0;\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- the two axes are set apart */\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .e-tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Tabs are button-like: every tab is ringed and neighbours sit flush and share an edge, so only the outer ends of the row are rounded. The selected tab is outlined in the primary colour with a thick slab along its bottom. */\n  .e-tab {\n    --e-bc: var(--e-border-strong);\n\n    /* A selected tab rises: the slab is a band the tab paints along one edge itself, so there is no second shape behind the corners. Every tab is one control height tall either way. */\n    --e-lift: 0px;\n    --e-band: calc(var(--e-lift) + var(--e-stroke-edge));\n    --e-slab: var(--e-primary);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    flex: none;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-4) var(--e-lift);\n    border: 0;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-bc);\n    color: var(--e-muted);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition:\n      color var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  /* Only the outer ends of the row are rounded. */\n  .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tab + .e-tab {\n    margin-inline-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tab:hover {\n    --e-bc: var(--e-ink);\n\n    z-index: var(--e-z-raised);\n    color: var(--e-ink);\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    z-index: var(--e-z-sticky);\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset 0 calc(-1 * var(--e-band)) 0 0 var(--e-slab);\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  /* The slab answers the pointer too: it darkens under the cursor, in step with the face. */\n  .e-tab[aria-selected=\"true\"]:hover {\n    --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n  }\n\n  .e-tab:focus-visible {\n    z-index: var(--e-z-focus);\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-tabs--fill .e-tablist {\n    overflow-x: hidden;\n  }\n\n  .e-tabs--fill .e-tab {\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    padding-inline: var(--e-space-1);\n  }\n\n  /* Vertical: the tabs stack beside the panel, flush and sharing edges. The selected tab rises towards the panel, so its slab is a band down the inline-start side, away from the panel, instead of along the bottom, and only the top and bottom ends of the column are rounded. */\n  .e-tabs--vertical {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--e-space-4);\n  }\n\n  .e-tabs--vertical .e-tablist {\n    flex-direction: column;\n    flex: none;\n    overflow: visible;\n  }\n\n  .e-tabs--vertical .e-tab {\n    --e-lift: 0px;\n\n    height: var(--e-control-height);\n    padding-block-end: 0;\n    justify-content: flex-start;\n    border-radius: 0;\n  }\n\n  .e-tabs--vertical .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical .e-tab:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical .e-tab + .e-tab {\n    margin-inline-start: 0;\n    margin-block-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    --e-lift: var(--e-depth);\n\n    padding-inline-start: calc(var(--e-space-4) + var(--e-lift));\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset var(--e-band) 0 0 0 var(--e-slab);\n  }\n\n  .e-tabs--vertical .e-tabpanel {\n    flex: 1 1 0;\n    min-width: 0;\n    padding-top: 0;\n  }\n\n  :dir(rtl) .e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);\n  }\n\n  /* Framed: tabs and panel are one outlined card. The tab row sits over the panel's edge by one stroke, so a tab's lower edge and the panel's upper edge are the same line; the chosen tab has no edge on that side and its fill covers the panel's, opening into it. Tabs sit flush with their neighbours, square where they meet; only the card's outer corner at the first tab is rounded, and the panel's own corner beside it is square. The row always leaves a corner's width of open edge past the last tab, so the panel's curve never lands against a tab's straight edge. */\n  .e-tabs--framed .e-tablist {\n    position: relative;\n    z-index: var(--e-z-raised);\n    margin-block-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed .e-tab {\n    --e-bc: var(--e-border-strong);\n    --e-lift: 0px;\n\n    border-radius: 0;\n    background-color: var(--e-surface-tint);\n  }\n\n  .e-tabs--framed .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--fill .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs:not(.e-tabs--fill, .e-tabs--vertical).e-tabs--framed .e-tablist {\n    padding-inline-end: var(--e-radius-md);\n  }\n\n  .e-tabs--framed .e-tab:hover {\n    background-color: var(--e-surface-hover);\n  }\n\n  /* The chosen tab rises like a button does, with its primary slab as a band on the edge away from the panel, and its open sides outlined in the primary colour. */\n  .e-tabs--framed .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    padding-block: var(--e-lift) 0;\n    background-color: var(--e-surface);\n    box-shadow:\n      inset var(--e-stroke-edge) 0 0 0 var(--e-bc),\n      inset calc(-1 * var(--e-stroke-edge)) 0 0 0 var(--e-bc),\n      inset 0 var(--e-band) 0 0 var(--e-slab);\n  }\n\n  .e-tabs--framed .e-tabpanel {\n    padding: var(--e-space-4);\n    border-radius: var(--e-radius-md);\n    border-start-start-radius: 0;\n    background: var(--e-surface);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);\n  }\n\n  .e-tabs--framed.e-tabs--fill .e-tabpanel {\n    border-start-end-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical {\n    gap: 0;\n    align-items: stretch;\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tablist {\n    align-self: flex-start;\n    margin-block-end: var(--e-radius-md);\n    margin-inline-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab {\n    border-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    margin-block: calc(-1 * var(--e-stroke-edge)) 0;\n    padding-block: 0;\n    padding-inline-start: calc(var(--e-space-4) + var(--e-lift));\n    box-shadow:\n      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),\n      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),\n      inset var(--e-band) 0 0 0 var(--e-slab);\n  }\n\n  :dir(rtl) .e-tabs--framed.e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    box-shadow:\n      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),\n      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),\n      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab[aria-selected=\"true\"]:first-child {\n    margin-block-start: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tabpanel {\n    padding: var(--e-space-4);\n  }\n\n  .e-tab-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n    color: var(--e-ink);\n  }\n\n  .e-tabpanel {\n    padding-top: var(--e-space-4);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-tab {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-tab[aria-selected=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAiBA,IAAMkB,IAAQC,GAiBRC,IAAOC,QAAeH,EAAM,SAAS,CAAC,CAAC,GAGvCI,IAAQtB,EAAmBmB,GAAA,YAAC,GAE5BK,IAASC,EAAU,GACnBC,IAAUL,QAAeC,EAAM,SAASF,EAAK,MAAM,EAAE,EAAE,EAAE,GACzDO,IAAMN,QACJG,EAAO,QAAQ,OAAO,WAAa,OAAe,SAAS,gBAAgB,QAAQ,QAAQ,QAAQ,MAC3G,GAEMI,IAAOC,EAAiC,IAAI;EAElD,eAAeC,EAAO,GAAiB;GACrC,MAAMC,EAAS;GACf,IAAMC,IAAKJ,EAAK,OAAO,KACjBK,IAAMD,GAAI,cAA2B,0BAAwB;GACnE,IAAId,EAAM,gBAAgB,cAAc,CAACc,KAAM,CAACC,KAAOD,EAAG,eAAeA,EAAG,aAAa;GACzF,IAAME,IAAO,OAAO,aAAe,OAAe,WAAW,kCAAkC,CAAC,CAAC,SAC3FC,IAAIF,EAAI,sBAAsB,GAC9BG,IAAIJ,EAAG,sBAAsB;GACnC,EAAG,SAAS;IAAE,MAAMG,EAAE,OAAOA,EAAE,QAAQ,KAAKC,EAAE,OAAOA,EAAE,QAAQ;IAAI,UAAUC,KAAU,CAACH,IAAO,WAAW;GAAO,CAAC;EACpH;E,OAEAI,QAAgBR,EAAO,EAAK,CAAC,GAC7BS,EAAMb,SAAeI,EAAO,EAAI,CAAC,I,UAI/B7B,EAAA,GAAAC,EAiBWC,EAAAwC,CAAA,GAAA;GAhBT,OAAKvC,EAAA,CAAC,UAAQ;IAAA,gBACYe,EAAA;IAAI,oBAAsBA,EAAA,gBAAW;IAAA,kBAAmCA,EAAA;GAAM,CAAA,CAAA;GACvG,aAAaA,EAAA,eAAW;GACxB,eAAaO,EAAA;GACb,KAAKC,EAAA;GACL,uBAAkB,AAAAkB,EAAA,QAAA,MAAE,EAAA,QAAQ,OAAOC,CAAM;;GAE1C,SAAAzC,QAKW,CALXC,EAKWH,EAAA8C,CAAA,GAAA;IALG,SAAA;IAAJ,KAAIrB;IAAO,OAAM;;IACZ,SAAAvB,QAAoB,EAAjCJ,EAAA,EAAA,GAAAM,EAGcC,GAAA,MAAAC,EAHcW,EAAA,QAAR,OAApBnB,EAAA,GAAAC,EAGcC,EAAAkD,CAAA,GAAA;KAHqB,KAAKC,EAAK;KAAK,OAAOA,EAAK;KAAI,OAAM;;KACtE,SAAAjD,QAAgB,CAAbK,EAAAC,EAAA2C,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,SAAK,O,aAAtBrD,EAAA,GAAAM,EAA2E,QAA3EO,GAA2EH,EAApB2C,EAAK,KAAK,GAAA,CAAA,E;;;;G,UAGrErD,EAAA,EAAA,GAAAM,EAEcC,GAAA,MAAAC,EAFcW,EAAA,QAAR,OAApBnB,EAAA,GAAAC,EAEcC,EAAAuD,CAAA,GAAA;IAFqB,KAAKJ,EAAK;IAAK,OAAOA,EAAK;IAAI,OAAM;;IACtE,SAAAjD,QAA4E,CAA5EQ,EAA4E+C,EAAA,QAA/DN,EAAK,IAAE,EAAS,QAAI,SAA2C,CAAzCzC,EAAkC+C,EAAA,QAAA,SAAA,EAAR,QAAI,CAAA,C"}

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

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

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

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

package/dist/index.d.ts

@@ -76,6 +76,7 @@ export * from './components/Stamp/index.js';
 export * from './components/Stepper/index.js';
 export * from './components/Surface/index.js';
 export * from './components/Switch/index.js';
+export * from './components/Table/index.js';
 export * from './components/Tabs/index.js';
 export * from './components/Text/index.js';
 export * from './components/TextField/index.js';

package/dist/index.js

@@ -70,12 +70,13 @@ import xe from "./components/Stack/EStack.js";
 import Se from "./components/Stepper/EStepper.js";
 import Ce from "./components/Surface/ESurface.js";
 import we from "./components/Switch/ESwitch.js";
-import Te from "./components/Tabs/ETabs.js";
-import Ee from "./components/Text/EText.js";
-import De from "./components/Textarea/ETextarea.js";
-import Oe from "./components/Toast/EToast.js";
-import ke from "./components/ToastProvider/EToastProvider.js";
-import Ae from "./components/Tooltip/ETooltip.js";
-import je from "./components/Upload/EUpload.js";
-import { defineTheme as Me } from "@eos-ui/tokens";
-export { a as CONFIG_KEY, _ as EActions, v as EAppFooter, y as EAppHeader, x as EAppShell, S as EAvatar, w as EBreadcrumb, T as EButton, D as ECalendar, O as ECheckbox, A as ECodeBlock, M as EColorField, P as ECombobox, I as ECurrencyField, H as EDataGrid, U as EDatePicker, V as EDefinition, G as EDescriptionList, K as EDialog, q as EDisclosure, J as EDivider, Y as EDrawer, L as EEmptyState, X as EExpandableRow, j as EField, Z as EFieldset, Q as EGrid, ee as EHeading, te as EHighlight, C as EIcon, E as EIconButton, ne as EInline, re as EKbd, $ as EKicker, ie as ELink, ae as EMenu, oe as ENavList, se as ENotice, F as ENumberField, ce as EOtpField, le as EPageHeader, R as EPagination, ue as EPasswordField, de as EPhoneField, fe as EProgress, pe as ERadioGroup, me as ERangePicker, he as ESearchBar, ge as ESearchResults, _e as ESegmented, z as ESelect, ye as ESignatureField, ve as ESignaturePad, be as ESkeleton, b as ESkipLink, N as ESpinner, xe as EStack, W as EStamp, Se as EStepper, Ce as ESurface, we as ESwitch, Te as ETabs, Ee as EText, B as ETextField, De as ETextarea, Oe as EToast, ke as EToastProvider, Ae as ETooltip, je as EUpload, k as EVisuallyHidden, e as TOAST_KEY, u as createEos, t as createToasts, r as defaultMessages, Me as defineTheme, p as focusInside, f as iconNames, i as phosphor, d as themeCss, o as useConfig, m as useFieldAttrs, s as useIconResolver, h as useLocale, c as useMessages, l as usePortalTarget, n as useToast, g as useUid };
+import Te from "./components/Table/ETable.js";
+import Ee from "./components/Tabs/ETabs.js";
+import De from "./components/Text/EText.js";
+import Oe from "./components/Textarea/ETextarea.js";
+import ke from "./components/Toast/EToast.js";
+import Ae from "./components/ToastProvider/EToastProvider.js";
+import je from "./components/Tooltip/ETooltip.js";
+import Me from "./components/Upload/EUpload.js";
+import { defineTheme as Ne } from "@eos-ui/tokens";
+export { a as CONFIG_KEY, _ as EActions, v as EAppFooter, y as EAppHeader, x as EAppShell, S as EAvatar, w as EBreadcrumb, T as EButton, D as ECalendar, O as ECheckbox, A as ECodeBlock, M as EColorField, P as ECombobox, I as ECurrencyField, H as EDataGrid, U as EDatePicker, V as EDefinition, G as EDescriptionList, K as EDialog, q as EDisclosure, J as EDivider, Y as EDrawer, L as EEmptyState, X as EExpandableRow, j as EField, Z as EFieldset, Q as EGrid, ee as EHeading, te as EHighlight, C as EIcon, E as EIconButton, ne as EInline, re as EKbd, $ as EKicker, ie as ELink, ae as EMenu, oe as ENavList, se as ENotice, F as ENumberField, ce as EOtpField, le as EPageHeader, R as EPagination, ue as EPasswordField, de as EPhoneField, fe as EProgress, pe as ERadioGroup, me as ERangePicker, he as ESearchBar, ge as ESearchResults, _e as ESegmented, z as ESelect, ye as ESignatureField, ve as ESignaturePad, be as ESkeleton, b as ESkipLink, N as ESpinner, xe as EStack, W as EStamp, Se as EStepper, Ce as ESurface, we as ESwitch, Te as ETable, Ee as ETabs, De as EText, B as ETextField, Oe as ETextarea, ke as EToast, Ae as EToastProvider, je as ETooltip, Me as EUpload, k as EVisuallyHidden, e as TOAST_KEY, u as createEos, t as createToasts, r as defaultMessages, Ne as defineTheme, p as focusInside, f as iconNames, i as phosphor, d as themeCss, o as useConfig, m as useFieldAttrs, s as useIconResolver, h as useLocale, c as useMessages, l as usePortalTarget, n as useToast, g as useUid };