@eos-ui/vue 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Eos contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,48 @@
-# Temporary Holding Version
+# @eos-ui/vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Accessible Vue 3 components with a token-based theme system. High contrast and consistent by default, rebrandable with a few lines.
+
+Documentation, live examples and a theme playground: https://eos.dame.gg
+
+```bash
+npm install @eos-ui/vue
+```
+
+```ts
+import { createApp } from "vue";
+import { createEos } from "@eos-ui/vue";
+import "@eos-ui/vue/style.css"; // once, in your entry file
+
+createApp(App)
+  .use(
+    createEos({
+      locale: "en-CA",
+      currency: "CAD",
+      theme: { brand: "#2c95b4", radius: "round" },
+    }),
+  )
+  .mount("#app");
+```
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { ETextField, EButton } from "@eos-ui/vue";
+const email = ref("");
+</script>
+
+<template>
+  <ETextField v-model="email" label="Email" type="email" required />
+  <EButton>Continue</EButton>
+</template>
+```
+
+- One stylesheet (about 19 kB gzipped), imported once. The JavaScript has no CSS imports, so server rendering needs no bundler setup.
+- Everything sits in the cascade layers `e.*`, so your own CSS wins without specificity fights.
+- Words, locale, currency, text direction and icons are plugin options.
+- `defineTheme()` (re-exported from `@eos-ui/tokens`) builds a theme from `brand`, `accent` and other inputs and checks its contrast.
+- Icons: a built-in Phosphor set, or Lucide, Tabler, Heroicons, Phosphor (Vue), Iconify or your own set (`@eos-ui/vue/icons`).
+- `EosResolver` from `@eos-ui/vue/resolver` auto-imports components for `unplugin-vue-components`.
+- Components work without the plugin, in English and US dollars.
+
+Source, issues and contributing: https://github.com/Dame-G/eos. MIT licensed.

package/THIRD_PARTY.md

@@ -0,0 +1,4 @@
+# Third-party notices
+
+- **Phosphor Icons** (https://phosphoricons.com), MIT License, Copyright (c) 2020 Phosphor Icons. The icon paths in `packages/vue/src/icons/phosphor.ts` are taken from this set.
+- **Jost** and **Spline Sans Mono** are the default typefaces (SIL Open Font License 1.1). They are not bundled; `fonts.css` loads them from Google Fonts, and any other font can be set with `defineTheme({ fonts })`.

package/dist/component-names.d.ts

@@ -0,0 +1 @@
+export declare const componentNames: ReadonlySet<string>;

package/dist/component-names.js

@@ -0,0 +1,6 @@
+//#region src/component-names.ts
+var e = /* @__PURE__ */ new Set(/* @__PURE__ */ "EAccordion.EActions.EAddressField.EAmount.EAppFooter.EAppHeader.EAppShell.EAutocomplete.EAvatar.EBackLink.EBookingCard.EBreadcrumb.EButton.EButtonGroup.ECalendar.ECardField.ECheckbox.EChip.ECodeBlock.EColorField.ECombobox.ECurrencyField.EDataGrid.EDatePicker.EDescriptionList.EDetailRow.EDialog.EDisclosure.EDivider.EDrawer.EEmptyState.EErrorSummary.EField.EFieldset.EFormSection.EGrid.EHeading.EHighlight.EIcon.EIconButton.EInline.EItemList.EItemRow.EKbd.EKicker.ELink.ELinkCard.ELoadingBar.EMenu.EMetaList.EMultiSelect.ENavList.ENotice.ENumberField.EOtpField.EPageHeader.EPagination.EPanel.EPasswordField.EPhoneField.EPopover.EProgress.ERadioGroup.ERangePicker.ESearchBar.ESearchResults.ESegmented.ESelect.ESignatureField.ESignaturePad.ESkeleton.ESkipLink.ESlotPicker.ESpinner.EStack.EStamp.EStatementCard.EStatementRow.EStepper.ESurface.ESwitch.ETabs.EText.ETextField.ETextarea.ETimeline.EToast.EToastProvider.EToggle.ETooltip.EUpload.EVisuallyHidden".split("."));
+//#endregion
+export { e as componentNames };
+
+//# sourceMappingURL=component-names.js.map

package/dist/component-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-names.js","names":["componentNames"],"sources":["../src/component-names.ts"],"sourcesContent":["// Generated by scripts/gen-index.mjs. Do not edit.\nexport const componentNames: ReadonlySet<string> = new Set([\"EAccordion\",\"EActions\",\"EAddressField\",\"EAmount\",\"EAppFooter\",\"EAppHeader\",\"EAppShell\",\"EAutocomplete\",\"EAvatar\",\"EBackLink\",\"EBookingCard\",\"EBreadcrumb\",\"EButton\",\"EButtonGroup\",\"ECalendar\",\"ECardField\",\"ECheckbox\",\"EChip\",\"ECodeBlock\",\"EColorField\",\"ECombobox\",\"ECurrencyField\",\"EDataGrid\",\"EDatePicker\",\"EDescriptionList\",\"EDetailRow\",\"EDialog\",\"EDisclosure\",\"EDivider\",\"EDrawer\",\"EEmptyState\",\"EErrorSummary\",\"EField\",\"EFieldset\",\"EFormSection\",\"EGrid\",\"EHeading\",\"EHighlight\",\"EIcon\",\"EIconButton\",\"EInline\",\"EItemList\",\"EItemRow\",\"EKbd\",\"EKicker\",\"ELink\",\"ELinkCard\",\"ELoadingBar\",\"EMenu\",\"EMetaList\",\"EMultiSelect\",\"ENavList\",\"ENotice\",\"ENumberField\",\"EOtpField\",\"EPageHeader\",\"EPagination\",\"EPanel\",\"EPasswordField\",\"EPhoneField\",\"EPopover\",\"EProgress\",\"ERadioGroup\",\"ERangePicker\",\"ESearchBar\",\"ESearchResults\",\"ESegmented\",\"ESelect\",\"ESignatureField\",\"ESignaturePad\",\"ESkeleton\",\"ESkipLink\",\"ESlotPicker\",\"ESpinner\",\"EStack\",\"EStamp\",\"EStatementCard\",\"EStatementRow\",\"EStepper\",\"ESurface\",\"ESwitch\",\"ETabs\",\"EText\",\"ETextField\",\"ETextarea\",\"ETimeline\",\"EToast\",\"EToastProvider\",\"EToggle\",\"ETooltip\",\"EUpload\",\"EVisuallyHidden\"]);\n"],"mappings":";AACA,IAAaA,oBAAsC,IAAI,IAAI,q9BAAknC,CAAC"}

package/dist/components/Accordion/EAccordion.js

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

package/dist/components/Accordion/EAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EAccordion.js","names":["_sfc_main","EAccordion_vue_vue_type_script_setup_true_lang_default","EAccordion_default"],"sources":["../../../src/components/Accordion/EAccordion.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface AccordionItem {\n  /** Names the item's slot, and keys the list. */\n  id: string;\n  /** The summary line. */\n  title: string;\n  /** A short note at the right of the summary. */\n  meta?: string;\n  /** Starts open. */\n  defaultOpen?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport EDisclosure from \"../Disclosure/EDisclosure.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The sections, in order. Each one's content goes in the slot named by its `id`. */\n  items: AccordionItem[];\n  /** Lets several sections stay open at once. Otherwise opening one closes the others. */\n  multiple?: boolean;\n}>();\n\ndefineSlots<{\n  [id: string]: ((props: { item: AccordionItem }) => unknown) | undefined;\n}>();\n\nconst group = useUid();\n</script>\n\n<template>\n  <div class=\"e-accordion\">\n    <EDisclosure\n      v-for=\"item in props.items\"\n      :key=\"item.id\"\n      variant=\"card\"\n      :title=\"item.title\"\n      :meta=\"item.meta\"\n      :open=\"item.defaultOpen || undefined\"\n      :group=\"multiple ? undefined : group\"\n    >\n      <slot :name=\"item.id\" :item=\"item\" />\n    </EDisclosure>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-accordion {\n    border-radius: var(--e-radius-md);\n    box-shadow: var(--e-edge);\n    background: var(--e-surface);\n    overflow: hidden;\n  }\n\n  .e-accordion > .e-acc + .e-acc {\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Accordion/EAccordion.vue.d.ts

@@ -0,0 +1,32 @@
+export interface AccordionItem {
+    /** Names the item's slot, and keys the list. */
+    id: string;
+    /** The summary line. */
+    title: string;
+    /** A short note at the right of the summary. */
+    meta?: string;
+    /** Starts open. */
+    defaultOpen?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    /** The sections, in order. Each one's content goes in the slot named by its `id`. */
+    items: AccordionItem[];
+    /** Lets several sections stay open at once. Otherwise opening one closes the others. */
+    multiple?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    /** The sections, in order. Each one's content goes in the slot named by its `id`. */
+    items: AccordionItem[];
+    /** Lets several sections stay open at once. Otherwise opening one closes the others. */
+    multiple?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    [id: string]: ((props: {
+        item: AccordionItem;
+    }) => unknown) | undefined;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Accordion/EAccordion.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+/* empty css                */
+import { useUid as e } from "../../composables/useUid.js";
+import t from "../Disclosure/EDisclosure.js";
+import { Fragment as n, createBlock as r, createElementBlock as i, defineComponent as a, openBlock as o, renderList as s, renderSlot as c, unref as l, withCtx as u } from "vue";
+//#region src/components/Accordion/EAccordion.vue?vue&type=script&setup=true&lang.ts
+var d = { class: "e-accordion" }, f = /*@__PURE__*/ a({
+	__name: "EAccordion",
+	props: {
+		items: {},
+		multiple: { type: Boolean }
+	},
+	setup(a) {
+		let f = a, p = e();
+		return (e, m) => (o(), i("div", d, [(o(!0), i(n, null, s(f.items, (n) => (o(), r(t, {
+			key: n.id,
+			variant: "card",
+			title: n.title,
+			meta: n.meta,
+			open: n.defaultOpen || void 0,
+			group: a.multiple ? void 0 : l(p)
+		}, {
+			default: u(() => [c(e.$slots, n.id, { item: n })]),
+			_: 2
+		}, 1032, [
+			"title",
+			"meta",
+			"open",
+			"group"
+		]))), 128))]));
+	}
+});
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=EAccordion.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Accordion/EAccordion.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EAccordion.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","EDisclosure","_unref","_withCtx","_renderSlot","EDisclosure_default","_hoisted_1","EAccordion_vue_vue_type_script_setup_true_lang_default","props","__props","group","useUid","openBlock","createElementBlock","Fragment","renderList","createBlock","item","unref","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Accordion/EAccordion.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface AccordionItem {\n  /** Names the item's slot, and keys the list. */\n  id: string;\n  /** The summary line. */\n  title: string;\n  /** A short note at the right of the summary. */\n  meta?: string;\n  /** Starts open. */\n  defaultOpen?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport EDisclosure from \"../Disclosure/EDisclosure.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The sections, in order. Each one's content goes in the slot named by its `id`. */\n  items: AccordionItem[];\n  /** Lets several sections stay open at once. Otherwise opening one closes the others. */\n  multiple?: boolean;\n}>();\n\ndefineSlots<{\n  [id: string]: ((props: { item: AccordionItem }) => unknown) | undefined;\n}>();\n\nconst group = useUid();\n</script>\n\n<template>\n  <div class=\"e-accordion\">\n    <EDisclosure\n      v-for=\"item in props.items\"\n      :key=\"item.id\"\n      variant=\"card\"\n      :title=\"item.title\"\n      :meta=\"item.meta\"\n      :open=\"item.defaultOpen || undefined\"\n      :group=\"multiple ? undefined : group\"\n    >\n      <slot :name=\"item.id\" :item=\"item\" />\n    </EDisclosure>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-accordion {\n    border-radius: var(--e-radius-md);\n    box-shadow: var(--e-edge);\n    background: var(--e-surface);\n    overflow: hidden;\n  }\n\n  .e-accordion > .e-acc + .e-acc {\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EAkBA,IAAMY,IAAQC,GAWRC,IAAQC,EAAO;E,kBAInBf,EAAA,GAAAC,EAYM,OAZNS,GAYM,EAXJV,EAAA,EAAA,GAAAC,EAUcC,GAAA,MAAAC,EATGS,EAAM,QAAd,OADTZ,EAAA,GAAAI,EAUcC,GAAA;GARX,KAAKgB,EAAK;GACX,SAAQ;GACP,OAAOA,EAAK;GACZ,MAAMA,EAAK;GACX,MAAMA,EAAK,eAAe,KAAA;GAC1B,OAAOR,EAAA,WAAW,KAAA,IAAYP,EAAAQ,CAAA;;GAE/B,SAAAP,QAAqC,CAArCC,EAAqCiB,EAAA,QAAxBJ,EAAK,IAAE,EAAS,QAAI,CAAA,C"}

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

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

package/dist/components/Actions/EActions.js

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

package/dist/components/Actions/EActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EActions.js","names":["_sfc_main","EActions_vue_vue_type_script_setup_true_lang_default","EActions_default"],"sources":["../../../src/components/Actions/EActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `footer` for a bar at the end of a card. */\n    as?: string;\n    /** Puts the group on a tinted footer bar with a rule above. Use it for a group that ends a card or an overlay. */\n    bar?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The Buttons, in the order of the content, the main action first. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-actions\" :class=\"bar && 'e-actions--bar'\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-actions--bar {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    background: var(--e-surface-tint);\n  }\n\n  @media (max-width: 32rem) {\n    .e-actions--bar > .e-btn {\n      flex: 1 1 100%;\n    }\n  }\n\n  @media print {\n    .e-actions {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Actions/EActions.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /** The element to render, `div` by default. Use `footer` for a bar at the end of a card. */
+    as?: string;
+    /** Puts the group on a tinted footer bar with a rule above. Use it for a group that ends a card or an overlay. */
+    bar?: boolean;
+};
+type __VLS_Slots = {
+    /** The Buttons, in the order of the content, the main action first. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Actions/EActions.vue_vue_type_script_setup_true_lang.js

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

package/dist/components/Actions/EActions.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EActions.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","EActions_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","resolveDynamicComponent","__props","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Actions/EActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `footer` for a bar at the end of a card. */\n    as?: string;\n    /** Puts the group on a tinted footer bar with a rule above. Use it for a group that ends a card or an overlay. */\n    bar?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The Buttons, in the order of the content, the main action first. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-actions\" :class=\"bar && 'e-actions--bar'\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-actions--bar {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    background: var(--e-surface-tint);\n  }\n\n  @media (max-width: 32rem) {\n    .e-actions--bar > .e-btn {\n      flex: 1 1 100%;\n    }\n  }\n\n  @media print {\n    .e-actions {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;E,kBAoBEA,EAAA,GAAAC,EAEYC,EAFIQ,EAAA,EAAE,GAAA,EAAE,OAAKP,EAAA,CAAC,aAAoBO,EAAA,OAAG,gBAAA,CAAA,E;GAC/C,SAAAN,QAAQ,CAARC,EAAQS,EAAA,QAAA,SAAA,C"}

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

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

package/dist/components/AddressField/EAddressField.js

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

package/dist/components/AddressField/EAddressField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EAddressField.js","names":["_sfc_main","EAddressField_vue_vue_type_script_setup_true_lang_default","EAddressField_default"],"sources":["../../../src/components/AddressField/EAddressField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EFieldset from \"../Fieldset/EFieldset.vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport ESelect from \"../Select/ESelect.vue\";\nimport type { EOptionInput } from \"../Select/options.js\";\nimport { US_STATES } from \"./usStates.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Address {\n  /** Street and number. */\n  street?: string;\n  /** Apartment, suite or unit. */\n  unit?: string;\n  city?: string;\n  /** The code of the chosen region, such as `CA`. */\n  region?: string;\n  /** ZIP or postal code. */\n  postal?: string;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** The group's title. Default \"Address\". */\n    legend?: string;\n    /** What to fix, per field. */\n    errors?: Address;\n    /** The choices for the region field: strings, or `{ value, label }`. Replaces the default list of US states, so pass it for any other country. */\n    regions?: readonly EOptionInput[];\n    /** The input mode of the postal code: `numeric` for ZIP codes, `text` (default) for postal codes with letters. */\n    postalInputmode?: \"numeric\" | \"text\";\n    /** The prefix of the fields' names: `address-street`, `address-unit`, `address-city`, `address-region`, `address-postal`. */\n    name?: string;\n    /** Disables every field. */\n    disabled?: boolean;\n  }>(),\n  { postalInputmode: \"text\" },\n);\n\nconst model = defineModel<Address>({ default: () => ({}) });\n\nconst t = useMessages();\nconst prefix = () => props.name || \"address\";\n\nfunction set(key: keyof Address, value: string) {\n  model.value = { ...model.value, [key]: value };\n}\n</script>\n\n<template>\n  <EFieldset :legend=\"legend || t('address')\" :disabled=\"disabled\">\n    <div class=\"e-address-grid\">\n      <div class=\"e-address-wide\">\n        <ETextField\n          :label=\"t('street')\"\n          :name=\"`${prefix()}-street`\"\n          autocomplete=\"address-line1\"\n          required\n          :model-value=\"model.street || ''\"\n          :error=\"errors?.street\"\n          @update:model-value=\"set('street', $event)\"\n        />\n      </div>\n      <div class=\"e-address-wide\">\n        <ETextField\n          :label=\"t('unit')\"\n          :name=\"`${prefix()}-unit`\"\n          autocomplete=\"address-line2\"\n          optional\n          :model-value=\"model.unit || ''\"\n          :error=\"errors?.unit\"\n          @update:model-value=\"set('unit', $event)\"\n        />\n      </div>\n      <ETextField\n        :label=\"t('city')\"\n        :name=\"`${prefix()}-city`\"\n        autocomplete=\"address-level2\"\n        required\n        :model-value=\"model.city || ''\"\n        :error=\"errors?.city\"\n        @update:model-value=\"set('city', $event)\"\n      />\n      <ESelect\n        :label=\"t('region')\"\n        :name=\"`${prefix()}-region`\"\n        required\n        :options=\"regions || US_STATES\"\n        :placeholder=\"t('select')\"\n        :model-value=\"model.region || ''\"\n        :error=\"errors?.region\"\n        @update:model-value=\"set('region', $event)\"\n      />\n      <ETextField\n        :label=\"t('postal')\"\n        :name=\"`${prefix()}-postal`\"\n        autocomplete=\"postal-code\"\n        :inputmode=\"postalInputmode\"\n        required\n        :model-value=\"model.postal || ''\"\n        :error=\"errors?.postal\"\n        @update:model-value=\"set('postal', $event)\"\n      />\n    </div>\n  </EFieldset>\n</template>\n\n<style>\n@layer e.composites {\n  .e-address-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n    align-items: start;\n    gap: var(--e-space-4);\n  }\n\n  .e-address-wide {\n    grid-column: 1 / -1;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/AddressField/EAddressField.vue.d.ts

@@ -0,0 +1,39 @@
+import { EOptionInput } from '../Select/options.js';
+export interface Address {
+    /** Street and number. */
+    street?: string;
+    /** Apartment, suite or unit. */
+    unit?: string;
+    city?: string;
+    /** The code of the chosen region, such as `CA`. */
+    region?: string;
+    /** ZIP or postal code. */
+    postal?: string;
+}
+type __VLS_Props = {
+    /** The group's title. Default "Address". */
+    legend?: string;
+    /** What to fix, per field. */
+    errors?: Address;
+    /** The choices for the region field: strings, or `{ value, label }`. Replaces the default list of US states, so pass it for any other country. */
+    regions?: readonly EOptionInput[];
+    /** The input mode of the postal code: `numeric` for ZIP codes, `text` (default) for postal codes with letters. */
+    postalInputmode?: "numeric" | "text";
+    /** The prefix of the fields' names: `address-street`, `address-unit`, `address-city`, `address-region`, `address-postal`. */
+    name?: string;
+    /** Disables every field. */
+    disabled?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: Address;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: Address) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Address) => any) | undefined;
+}>, {
+    postalInputmode: "text" | "numeric";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/AddressField/EAddressField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,119 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import t from "../Fieldset/EFieldset.js";
+import n from "../TextField/ETextField.js";
+import r from "../Select/ESelect.js";
+import { US_STATES as i } from "./usStates.js";
+import { createBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, openBlock as u, unref as d, useModel as f, withCtx as p } from "vue";
+//#region src/components/AddressField/EAddressField.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "e-address-grid" }, h = { class: "e-address-wide" }, g = { class: "e-address-wide" }, _ = /*@__PURE__*/ c({
+	__name: "EAddressField",
+	props: /*@__PURE__*/ l({
+		legend: {},
+		errors: {},
+		regions: {},
+		postalInputmode: { default: "text" },
+		name: {},
+		disabled: { type: Boolean }
+	}, {
+		modelValue: { default: () => ({}) },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(c) {
+		let l = c, _ = f(c, "modelValue"), v = e(), y = () => l.name || "address";
+		function b(e, t) {
+			_.value = {
+				..._.value,
+				[e]: t
+			};
+		}
+		return (e, l) => (u(), a(t, {
+			legend: c.legend || d(v)("address"),
+			disabled: c.disabled
+		}, {
+			default: p(() => [o("div", m, [
+				o("div", h, [s(n, {
+					label: d(v)("street"),
+					name: `${y()}-street`,
+					autocomplete: "address-line1",
+					required: "",
+					"model-value": _.value.street || "",
+					error: c.errors?.street,
+					"onUpdate:modelValue": l[0] ||= (e) => b("street", e)
+				}, null, 8, [
+					"label",
+					"name",
+					"model-value",
+					"error"
+				])]),
+				o("div", g, [s(n, {
+					label: d(v)("unit"),
+					name: `${y()}-unit`,
+					autocomplete: "address-line2",
+					optional: "",
+					"model-value": _.value.unit || "",
+					error: c.errors?.unit,
+					"onUpdate:modelValue": l[1] ||= (e) => b("unit", e)
+				}, null, 8, [
+					"label",
+					"name",
+					"model-value",
+					"error"
+				])]),
+				s(n, {
+					label: d(v)("city"),
+					name: `${y()}-city`,
+					autocomplete: "address-level2",
+					required: "",
+					"model-value": _.value.city || "",
+					error: c.errors?.city,
+					"onUpdate:modelValue": l[2] ||= (e) => b("city", e)
+				}, null, 8, [
+					"label",
+					"name",
+					"model-value",
+					"error"
+				]),
+				s(r, {
+					label: d(v)("region"),
+					name: `${y()}-region`,
+					required: "",
+					options: c.regions || d(i),
+					placeholder: d(v)("select"),
+					"model-value": _.value.region || "",
+					error: c.errors?.region,
+					"onUpdate:modelValue": l[3] ||= (e) => b("region", e)
+				}, null, 8, [
+					"label",
+					"name",
+					"options",
+					"placeholder",
+					"model-value",
+					"error"
+				]),
+				s(n, {
+					label: d(v)("postal"),
+					name: `${y()}-postal`,
+					autocomplete: "postal-code",
+					inputmode: c.postalInputmode,
+					required: "",
+					"model-value": _.value.postal || "",
+					error: c.errors?.postal,
+					"onUpdate:modelValue": l[4] ||= (e) => b("postal", e)
+				}, null, 8, [
+					"label",
+					"name",
+					"inputmode",
+					"model-value",
+					"error"
+				])
+			])]),
+			_: 1
+		}, 8, ["legend", "disabled"]));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=EAddressField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/AddressField/EAddressField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EAddressField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EFieldset","_unref","_withCtx","_createElementVNode","_createVNode","ETextField","ESelect","EFieldset_default","ETextField_default","ESelect_default","_hoisted_1","_hoisted_2","_hoisted_3","EAddressField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","t","useMessages","prefix","set","key","value","openBlock","createBlock","unref","withCtx","createElementVNode","createVNode","_cache","$event","US_STATES"],"sources":["../../../src/components/AddressField/EAddressField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EFieldset from \"../Fieldset/EFieldset.vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport ESelect from \"../Select/ESelect.vue\";\nimport type { EOptionInput } from \"../Select/options.js\";\nimport { US_STATES } from \"./usStates.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Address {\n  /** Street and number. */\n  street?: string;\n  /** Apartment, suite or unit. */\n  unit?: string;\n  city?: string;\n  /** The code of the chosen region, such as `CA`. */\n  region?: string;\n  /** ZIP or postal code. */\n  postal?: string;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** The group's title. Default \"Address\". */\n    legend?: string;\n    /** What to fix, per field. */\n    errors?: Address;\n    /** The choices for the region field: strings, or `{ value, label }`. Replaces the default list of US states, so pass it for any other country. */\n    regions?: readonly EOptionInput[];\n    /** The input mode of the postal code: `numeric` for ZIP codes, `text` (default) for postal codes with letters. */\n    postalInputmode?: \"numeric\" | \"text\";\n    /** The prefix of the fields' names: `address-street`, `address-unit`, `address-city`, `address-region`, `address-postal`. */\n    name?: string;\n    /** Disables every field. */\n    disabled?: boolean;\n  }>(),\n  { postalInputmode: \"text\" },\n);\n\nconst model = defineModel<Address>({ default: () => ({}) });\n\nconst t = useMessages();\nconst prefix = () => props.name || \"address\";\n\nfunction set(key: keyof Address, value: string) {\n  model.value = { ...model.value, [key]: value };\n}\n</script>\n\n<template>\n  <EFieldset :legend=\"legend || t('address')\" :disabled=\"disabled\">\n    <div class=\"e-address-grid\">\n      <div class=\"e-address-wide\">\n        <ETextField\n          :label=\"t('street')\"\n          :name=\"`${prefix()}-street`\"\n          autocomplete=\"address-line1\"\n          required\n          :model-value=\"model.street || ''\"\n          :error=\"errors?.street\"\n          @update:model-value=\"set('street', $event)\"\n        />\n      </div>\n      <div class=\"e-address-wide\">\n        <ETextField\n          :label=\"t('unit')\"\n          :name=\"`${prefix()}-unit`\"\n          autocomplete=\"address-line2\"\n          optional\n          :model-value=\"model.unit || ''\"\n          :error=\"errors?.unit\"\n          @update:model-value=\"set('unit', $event)\"\n        />\n      </div>\n      <ETextField\n        :label=\"t('city')\"\n        :name=\"`${prefix()}-city`\"\n        autocomplete=\"address-level2\"\n        required\n        :model-value=\"model.city || ''\"\n        :error=\"errors?.city\"\n        @update:model-value=\"set('city', $event)\"\n      />\n      <ESelect\n        :label=\"t('region')\"\n        :name=\"`${prefix()}-region`\"\n        required\n        :options=\"regions || US_STATES\"\n        :placeholder=\"t('select')\"\n        :model-value=\"model.region || ''\"\n        :error=\"errors?.region\"\n        @update:model-value=\"set('region', $event)\"\n      />\n      <ETextField\n        :label=\"t('postal')\"\n        :name=\"`${prefix()}-postal`\"\n        autocomplete=\"postal-code\"\n        :inputmode=\"postalInputmode\"\n        required\n        :model-value=\"model.postal || ''\"\n        :error=\"errors?.postal\"\n        @update:model-value=\"set('postal', $event)\"\n      />\n    </div>\n  </EFieldset>\n</template>\n\n<style>\n@layer e.composites {\n  .e-address-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n    align-items: start;\n    gap: var(--e-space-4);\n  }\n\n  .e-address-wide {\n    grid-column: 1 / -1;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAqBA,IAAMmB,IAAQC,GAkBRC,IAAQrB,EAAoBoB,GAAA,YAAwB,GAEpDG,IAAIC,EAAY,GAChBC,UAAeN,EAAM,QAAQ;EAEnC,SAASO,EAAI,GAAoB,GAAe;GAC9C,EAAM,QAAQ;IAAE,GAAGL,EAAM;KAAQM,IAAMC;GAAM;EAC/C;E,kBAIE3B,EAAA,GAAAC,EAsDYC,GAAA;GAtDA,QAAQiB,EAAA,UAAUhB,EAAAmB,CAAA,CAAC,CAAA,SAAA;GAAc,UAAUH,EAAA;;GACrD,SAAAf,QAoDM,CApDNC,EAoDM,OApDNO,GAoDM;IAnDJP,EAUM,OAVNQ,GAUM,CATJP,EAQEC,GAAA;KAPC,OAAOJ,EAAAmB,CAAA,CAAC,CAAA,QAAA;KACR,MAAI,GAAKE,EAAM,EAAA;KAChB,cAAa;KACb,UAAA;KACC,eAAaJ,EAAA,MAAM,UAAM;KACzB,OAAOD,EAAA,QAAQ;KACf,uBAAkB,AAAAe,EAAA,QAAA,MAAET,EAAG,UAAWU,CAAM;;;;;;;IAG7C9B,EAUM,OAVNS,GAUM,CATJR,EAQEC,GAAA;KAPC,OAAOJ,EAAAmB,CAAA,CAAC,CAAA,MAAA;KACR,MAAI,GAAKE,EAAM,EAAA;KAChB,cAAa;KACb,UAAA;KACC,eAAaJ,EAAA,MAAM,QAAI;KACvB,OAAOD,EAAA,QAAQ;KACf,uBAAkB,AAAAe,EAAA,QAAA,MAAET,EAAG,QAASU,CAAM;;;;;;;IAG3C7B,EAQEC,GAAA;KAPC,OAAOJ,EAAAmB,CAAA,CAAC,CAAA,MAAA;KACR,MAAI,GAAKE,EAAM,EAAA;KAChB,cAAa;KACb,UAAA;KACC,eAAaJ,EAAA,MAAM,QAAI;KACvB,OAAOD,EAAA,QAAQ;KACf,uBAAkB,AAAAe,EAAA,QAAA,MAAET,EAAG,QAASU,CAAM;;;;;;;IAEzC7B,EASEE,GAAA;KARC,OAAOL,EAAAmB,CAAA,CAAC,CAAA,QAAA;KACR,MAAI,GAAKE,EAAM,EAAA;KAChB,UAAA;KACC,SAASL,EAAA,WAAWhB,EAAAiC,CAAA;KACpB,aAAajC,EAAAmB,CAAA,CAAC,CAAA,QAAA;KACd,eAAaF,EAAA,MAAM,UAAM;KACzB,OAAOD,EAAA,QAAQ;KACf,uBAAkB,AAAAe,EAAA,QAAA,MAAET,EAAG,UAAWU,CAAM;;;;;;;;;IAE3C7B,EASEC,GAAA;KARC,OAAOJ,EAAAmB,CAAA,CAAC,CAAA,QAAA;KACR,MAAI,GAAKE,EAAM,EAAA;KAChB,cAAa;KACZ,WAAWL,EAAA;KACZ,UAAA;KACC,eAAaC,EAAA,MAAM,UAAM;KACzB,OAAOD,EAAA,QAAQ;KACf,uBAAkB,AAAAe,EAAA,QAAA,MAAET,EAAG,UAAWU,CAAM"}

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

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

package/dist/components/AddressField/usStates.d.ts

@@ -0,0 +1,5 @@
+/** The default regions for `EAddressField`: the 50 US states and DC. Pass `regions` for any other country. */
+export declare const US_STATES: readonly {
+    value: string;
+    label: string;
+}[];