@eos-ui/vue 0.0.0-stage → 0.1.0

package/dist/components/Button/EButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,54 @@
+/* empty css                */
+import e from "../Icon/EIcon.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s } from "vue";
+//#region src/components/Button/EButton.vue?vue&type=script&setup=true&lang.ts
+var c = [
+	"href",
+	"target",
+	"rel",
+	"aria-disabled",
+	"tabindex"
+], l = ["type", "disabled"], u = /*@__PURE__*/ i({
+	__name: "EButton",
+	props: {
+		variant: { default: "primary" },
+		icon: {},
+		block: { type: Boolean },
+		disabled: { type: Boolean },
+		type: { default: "button" },
+		href: {},
+		external: { type: Boolean }
+	},
+	setup(i) {
+		let u = i;
+		function d(e) {
+			u.disabled && (e.preventDefault(), e.stopImmediatePropagation());
+		}
+		return (u, f) => i.href ? (o(), r("a", {
+			key: 0,
+			href: i.href,
+			class: a(["e-btn", [i.variant !== "primary" && `e-btn--${i.variant}`, i.block && "e-btn--block"]]),
+			target: i.external ? "_blank" : void 0,
+			rel: i.external ? "noreferrer" : void 0,
+			"aria-disabled": i.disabled ? "true" : void 0,
+			tabindex: i.disabled ? -1 : void 0,
+			onClickCapture: d,
+			onAuxclickCapture: d
+		}, [i.icon ? (o(), t(e, {
+			key: 0,
+			name: i.icon
+		}, null, 8, ["name"])) : n("", !0), s(u.$slots, "default")], 42, c)) : (o(), r("button", {
+			key: 1,
+			type: i.type,
+			class: a(["e-btn", [i.variant !== "primary" && `e-btn--${i.variant}`, i.block && "e-btn--block"]]),
+			disabled: i.disabled
+		}, [i.icon ? (o(), t(e, {
+			key: 0,
+			name: i.icon
+		}, null, 8, ["name"])) : n("", !0), s(u.$slots, "default")], 10, l));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=EButton.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Button/EButton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","EIcon","_createCommentVNode","_renderSlot","EIcon_default","_hoisted_1","_hoisted_2","EButton_vue_vue_type_script_setup_true_lang_default","props","__props","blockWhenDisabled","event","openBlock","createElementBlock","normalizeClass","createBlock","createCommentVNode","renderSlot","_ctx"],"sources":["../../../src/components/Button/EButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `primary` is the one main action on a screen; `secondary` confirms; `outline` is for the other actions beside it; `danger` cancels or removes; `quiet` is an underlined text action. */\n    variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"quiet\";\n    /** An icon before the label. */\n    icon?: IconProp;\n    /** Full width. */\n    block?: boolean;\n    disabled?: boolean;\n    type?: \"button\" | \"submit\" | \"reset\";\n    /** Renders a link that looks like the button, for a destination rather than an action. */\n    href?: string;\n    /** With `href`: opens in a new tab. */\n    external?: boolean;\n  }>(),\n  { variant: \"primary\", type: \"button\" },\n);\n\ndefineSlots<{\n  /** The label: a verb that says what happens, like \"Pay $162.40\". */\n  default(): unknown;\n}>();\n\nfunction blockWhenDisabled(event: Event) {\n  if (!props.disabled) return;\n  event.preventDefault();\n  event.stopImmediatePropagation();\n}\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    :href=\"href\"\n    class=\"e-btn\"\n    :class=\"[variant !== 'primary' && `e-btn--${variant}`, block && 'e-btn--block']\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noreferrer' : undefined\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :tabindex=\"disabled ? -1 : undefined\"\n    @click.capture=\"blockWhenDisabled\"\n    @auxclick.capture=\"blockWhenDisabled\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </a>\n  <button\n    v-else\n    :type=\"type\"\n    class=\"e-btn\"\n    :class=\"[variant !== 'primary' && `e-btn--${variant}`, block && 'e-btn--block']\"\n    :disabled=\"disabled\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </button>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-btn {\n    --e-fill: var(--e-primary);\n    --e-on-fill: var(--e-on-primary);\n    --e-slab: color-mix(in srgb, var(--e-fill) 58%, #000);\n    --e-hover: color-mix(in srgb, var(--e-fill) 88%, #000);\n    --e-press: color-mix(in srgb, var(--e-fill) 78%, #000);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-2);\n    height: var(--e-control-height);\n    padding: var(--e-depth) var(--e-space-4) 0;\n    border: var(--e-stroke-edge) solid var(--e-slab);\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-fill);\n    color: var(--e-on-fill);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    letter-spacing: 0.01em;\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      box-shadow var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-btn:hover {\n    background: var(--e-hover);\n  }\n\n  .e-btn:active {\n    background: var(--e-press);\n    border-bottom-width: var(--e-stroke-edge);\n    box-shadow: inset 0 var(--e-depth) 0 0 rgb(0 0 0 / 0.22);\n  }\n\n  .e-btn--secondary {\n    --e-fill: var(--e-secondary);\n    --e-on-fill: var(--e-on-secondary);\n  }\n\n  .e-btn--danger {\n    --e-fill: var(--e-danger);\n    --e-on-fill: var(--e-on-danger);\n  }\n\n  .e-btn--outline {\n    --e-fill: var(--e-surface);\n    --e-on-fill: var(--e-ink);\n    --e-slab: var(--e-border-strong);\n  }\n\n  .e-btn--outline:hover {\n    background: color-mix(in srgb, var(--e-surface) 92%, #000);\n    border-color: var(--e-ink);\n  }\n\n  .e-btn--outline:active {\n    background: color-mix(in srgb, var(--e-surface) 84%, #000);\n    border-color: var(--e-ink);\n    border-bottom-width: var(--e-stroke-edge);\n    box-shadow: inset 0 var(--e-depth) 0 0 rgb(0 0 0 / 0.14);\n  }\n\n  .e-btn--quiet {\n    border-color: transparent;\n    border-bottom-width: var(--e-stroke-edge);\n    background: transparent;\n    color: var(--e-ink);\n    box-shadow: none;\n    padding-top: 0;\n    padding-inline: var(--e-space-3);\n    text-decoration: underline;\n    text-underline-offset: 5px;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-decoration-color: var(--e-border-strong);\n  }\n\n  .e-btn--quiet:not([disabled], [aria-disabled=\"true\"]):hover {\n    border-color: var(--e-wash-ring);\n    background: var(--e-wash-hover);\n    text-decoration-color: currentcolor;\n  }\n\n  .e-btn--quiet:not([disabled], [aria-disabled=\"true\"]):active {\n    border-color: var(--e-ink);\n    background: var(--e-wash-press);\n    box-shadow: none;\n    padding-top: 0;\n  }\n\n  .e-btn .e-icon {\n    margin-inline-start: -2px;\n  }\n\n  .e-btn--block {\n    width: 100%;\n  }\n\n  .e-btn[disabled],\n  .e-btn[aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    background: transparent;\n    color: var(--e-muted);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    box-shadow: none;\n    padding-top: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-btn {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-btn {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-btn {\n      border: 2px solid ButtonText;\n    }\n\n    .e-btn[disabled],\n    .e-btn[aria-disabled=\"true\"] {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAKA,IAAMW,IAAQC;EAuBd,SAASC,EAAkB,GAAc;GACvC,AAAKF,EAAM,aACXG,EAAM,eAAe,GACrBA,EAAM,yBAAyB;EACjC;E,iBAKUF,EAAA,QADRZ,EAAA,GAAAC,EAcI,KAAA;;GAZD,MAAMW,EAAA;GACP,OAAKV,EAAA,CAAC,SAAO,CACJU,EAAA,YAAO,aAAA,UAA4BA,EAAA,WAAWA,EAAA,SAAK,cAAA,CAAA,CAAA;GAC3D,QAAQA,EAAA,WAAQ,WAAc,KAAA;GAC9B,KAAKA,EAAA,WAAQ,eAAkB,KAAA;GAC/B,iBAAeA,EAAA,WAAQ,SAAY,KAAA;GACnC,UAAUA,EAAA,WAAQ,KAAQ,KAAA;GACX,gBAAAC;GACG,mBAAAA;E,IAEND,EAAA,QAAbZ,EAAA,GAAAG,EAAkCC,GAAA;;GAAd,MAAMQ,EAAA;E,oCAC1BN,EAAQe,EAAA,QAAA,SAAA,C,cAEVrB,EAAA,GAAAC,EASS,UAAA;;GAPN,MAAMW,EAAA;GACP,OAAKV,EAAA,CAAC,SAAO,CACJU,EAAA,YAAO,aAAA,UAA4BA,EAAA,WAAWA,EAAA,SAAK,cAAA,CAAA,CAAA;GAC3D,UAAUA,EAAA;E,IAEEA,EAAA,QAAbZ,EAAA,GAAAG,EAAkCC,GAAA;;GAAd,MAAMQ,EAAA;E,oCAC1BN,EAAQe,EAAA,QAAA,SAAA,C"}

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

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

package/dist/components/ButtonGroup/EButtonGroup.js

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

package/dist/components/ButtonGroup/EButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EButtonGroup.js","names":["_sfc_main","EButtonGroup_vue_vue_type_script_setup_true_lang_default","EButtonGroup_default"],"sources":["../../../src/components/ButtonGroup/EButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** What the group is for. Read by screen readers as the name of the group. */\n  label: string;\n}>();\n\ndefineSlots<{\n  /** The buttons. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-btngroup\" role=\"group\" :aria-label=\"label\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer e.composites {\n  .e-btngroup {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-2);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ButtonGroup/EButtonGroup.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** What the group is for. Read by screen readers as the name of the group. */
+    label: string;
+};
+type __VLS_Slots = {
+    /** The buttons. */
+    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<{}>, {}, {}, {}, {}, 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/ButtonGroup/EButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,18 @@
+/* empty css                */
+import { createElementBlock as e, defineComponent as t, openBlock as n, renderSlot as r } from "vue";
+//#region src/components/ButtonGroup/EButtonGroup.vue?vue&type=script&setup=true&lang.ts
+var i = ["aria-label"], a = /*@__PURE__*/ t({
+	__name: "EButtonGroup",
+	props: { label: {} },
+	setup(t) {
+		return (a, o) => (n(), e("div", {
+			class: "e-btngroup",
+			role: "group",
+			"aria-label": t.label
+		}, [r(a.$slots, "default")], 8, i));
+	}
+});
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=EButtonGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ButtonGroup/EButtonGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EButtonGroup.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_renderSlot","_hoisted_1","EButtonGroup_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","__props","renderSlot","_ctx"],"sources":["../../../src/components/ButtonGroup/EButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** What the group is for. Read by screen readers as the name of the group. */\n  label: string;\n}>();\n\ndefineSlots<{\n  /** The buttons. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-btngroup\" role=\"group\" :aria-label=\"label\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer e.composites {\n  .e-btngroup {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-2);\n  }\n}\n</style>\n"],"mappings":";;;;;;;E,kBAeEA,EAAA,GAAAC,EAEM,OAAA;GAFD,OAAM;GAAa,MAAK;GAAS,cAAYM,EAAA;E,IAChDL,EAAQO,EAAA,QAAA,SAAA,C"}

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

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

package/dist/components/Calendar/ECalendar.js

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

package/dist/components/Calendar/ECalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ECalendar.js","names":["_sfc_main","ECalendar_vue_vue_type_script_setup_true_lang_default","ECalendar_default"],"sources":["../../../src/components/Calendar/ECalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, getCurrentInstance, nextTick, ref, watch } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport { addDays, addMonths, compareDays, dayKey, sameDay, startOfDay } from \"./dates.js\";\nimport \"../../styles/base.css\";\n\nexport interface CalendarRange {\n  start: Date | null;\n  end: Date | null;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** `single` chooses one day (`v-model`); `range` chooses a span (`v-model:start` and `v-model:end`). */\n    mode?: \"single\" | \"range\";\n    /** Days that cannot be chosen or focused, such as days with nothing to book. */\n    disabledDate?: (date: Date) => boolean;\n    /** Days that get a dot: a list of dates or a function. Screen readers hear `markLabel`. */\n    marked?: Date[] | ((date: Date) => boolean);\n    /** What screen readers hear on a marked day. Default \"times available\". */\n    markLabel?: string;\n    /** The earliest day that can be chosen. */\n    min?: Date;\n    /** The latest day that can be chosen. */\n    max?: Date;\n    /** The month to open on, when nothing is chosen. */\n    month?: Date;\n    /** `false` hides the Today and Clear buttons. */\n    footer?: boolean;\n    /** Forces the Clear button on or off. Left out, it shows when a `@clear` listener is attached. */\n    clearable?: boolean;\n  }>(),\n  { mode: \"single\", footer: true, clearable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** In range mode, after every click that changes the span. */\n  rangeChange: [range: CalendarRange];\n  /** The Clear button. It is only shown when a `@clear` listener is attached. */\n  clear: [];\n}>();\n\nconst value = defineModel<Date | null>({ default: null });\nconst start = defineModel<Date | null>(\"start\", { default: null });\nconst end = defineModel<Date | null>(\"end\", { default: null });\n\ntype View = \"days\" | \"months\" | \"years\";\n\nconst t = useMessages();\nconst config = useConfig();\nconst loc = useLocale();\nconst uid = useUid();\nconst root = ref<HTMLElement | null>(null);\nconst range = computed(() => props.mode === \"range\");\nconst instance = getCurrentInstance();\nconst hasClear = () => props.clearable ?? !!instance?.vnode.props?.onClear;\n\nconst today = startOfDay(new Date());\nconst focus = ref(startOfDay((range.value ? start.value : value.value) || props.month || new Date()));\nconst hover = ref<Date | null>(null);\nconst view = ref<View>(\"days\");\nconst pick = ref(0);\n\nconst cy = computed(() => focus.value.getFullYear());\nconst cm = computed(() => focus.value.getMonth());\nconst yearLow = computed(() => Math.min(cy.value, props.min ? props.min.getFullYear() : today.getFullYear() - 120));\nconst yearHigh = computed(() => Math.max(cy.value, props.max ? props.max.getFullYear() : today.getFullYear() + 20));\nconst years = computed(() => Array.from({ length: yearHigh.value - yearLow.value + 1 }, (_, i) => yearLow.value + i));\n\nfunction off(d: Date): boolean {\n  return (\n    (!!props.min && compareDays(d, props.min) < 0) ||\n    (!!props.max && compareDays(d, props.max) > 0) ||\n    !!props.disabledDate?.(d)\n  );\n}\nfunction isMarked(d: Date): boolean {\n  const m = props.marked;\n  if (!m) return false;\n  return typeof m === \"function\" ? !!m(d) : m.some((x) => sameDay(x, d));\n}\nfunction monthOff(y: number, m: number): boolean {\n  return (\n    (!!props.min && compareDays(new Date(y, m + 1, 0, 12), props.min) < 0) ||\n    (!!props.max && compareDays(new Date(y, m, 1, 12), props.max) > 0)\n  );\n}\nconst yearOff = (y: number) =>\n  (!!props.min && y < props.min.getFullYear()) || (!!props.max && y > props.max.getFullYear());\nfunction clamp(d: Date): Date {\n  if (props.min && compareDays(d, props.min) < 0) return startOfDay(props.min);\n  if (props.max && compareDays(d, props.max) > 0) return startOfDay(props.max);\n  return d;\n}\nfunction settle(d: Date, step: number): Date | null {\n  let n = d;\n  for (let i = 0; i < 400 && off(n); i++) n = addDays(n, step);\n  return off(n) ? null : n;\n}\nfunction withMonthYear(y: number, m: number): Date {\n  const last = new Date(y, m + 1, 0, 12).getDate();\n  return clamp(new Date(y, m, Math.min(focus.value.getDate(), last), 12));\n}\n\nif (off(focus.value)) focus.value = settle(focus.value, 1) ?? settle(focus.value, -1) ?? focus.value;\n\nlet want: string | null = null;\nasync function focusWanted() {\n  await nextTick();\n  if (!want) return;\n  const el = root.value?.querySelector<HTMLElement>(`[id=\"${want}\"]`);\n  if (!el) return;\n  el.focus();\n  if (want.includes(\"-y-\")) el.scrollIntoView?.({ block: \"center\" });\n  want = null;\n}\nfunction focusId(id: string) {\n  want = id;\n  void focusWanted();\n}\nconst dayId = (d: Date) => `${uid.value}-${dayKey(d)}`;\n\nwatch(\n  () => props.month?.getTime(),\n  () => {\n    if (props.month) focus.value = clamp(startOfDay(props.month));\n  },\n);\nwatch(\n  () => (range.value ? start.value : value.value)?.getTime(),\n  () => {\n    const chosen = range.value ? start.value : value.value;\n    if (chosen && !sameDay(chosen, focus.value)) focus.value = startOfDay(chosen);\n  },\n);\n\nconst weeks = computed(() => {\n  const first = new Date(cy.value, cm.value, 1, 12);\n  const from = addDays(first, -((first.getDay() - loc.weekStart.value + 7) % 7));\n  return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, i) => addDays(from, w * 7 + i)));\n});\nconst columns = computed(() => Array.from({ length: 7 }, (_, k) => (loc.weekStart.value + k) % 7));\nconst rangeEnd = computed(() => {\n  if (!range.value) return null;\n  return end.value || (start.value && hover.value && compareDays(hover.value, start.value) >= 0 ? hover.value : null);\n});\n\nfunction isSelected(d: Date): boolean {\n  return range.value ? sameDay(d, start.value) || sameDay(d, end.value) : sameDay(d, value.value);\n}\nfunction inRange(d: Date): boolean {\n  return !!(\n    range.value &&\n    start.value &&\n    rangeEnd.value &&\n    compareDays(d, start.value) > 0 &&\n    compareDays(d, rangeEnd.value) < 0\n  );\n}\nfunction dayLabel(d: Date, marked: boolean): string {\n  return (\n    loc.formatLong(d) +\n    (sameDay(d, today) ? \", \" + t(\"todaySuffix\") : \"\") +\n    (marked ? \", \" + (props.markLabel || t(\"timesAvailable\")) : \"\")\n  );\n}\n\nfunction pickDay(d: Date) {\n  if (off(d)) return;\n  if (!range.value) {\n    value.value = d;\n    return;\n  }\n  const s = start.value;\n  if (!s || end.value || compareDays(d, s) < 0) {\n    start.value = d;\n    end.value = null;\n    emit(\"rangeChange\", { start: d, end: null });\n  } else {\n    end.value = d;\n    emit(\"rangeChange\", { start: s, end: d });\n  }\n}\nfunction clickDay(d: Date) {\n  focus.value = d;\n  focusId(dayId(d));\n  pickDay(d);\n}\n\nfunction openView(v: \"months\" | \"years\") {\n  view.value = v;\n  if (v === \"months\") {\n    pick.value = cm.value;\n    focusId(`${uid.value}-m-${cm.value}`);\n  } else {\n    pick.value = cy.value;\n    focusId(`${uid.value}-y-${cy.value}`);\n  }\n}\nfunction backToDays() {\n  view.value = \"days\";\n  focusId(dayId(focus.value));\n}\nfunction back() {\n  if (view.value === \"months\") openView(\"years\");\n  else backToDays();\n}\nfunction chooseMonth(m: number) {\n  if (monthOff(cy.value, m)) return;\n  const nd = withMonthYear(cy.value, m);\n  focus.value = nd;\n  view.value = \"days\";\n  focusId(dayId(nd));\n}\nfunction chooseYear(y: number) {\n  if (yearOff(y)) return;\n  const nd = withMonthYear(y, cm.value);\n  focus.value = nd;\n  view.value = \"months\";\n  pick.value = nd.getMonth();\n  focusId(`${uid.value}-m-${nd.getMonth()}`);\n}\nfunction step(n: number) {\n  focus.value = clamp(addMonths(focus.value, n));\n}\n\nfunction sign(): number {\n  if (config.dir) return config.dir === \"rtl\" ? -1 : 1;\n  return root.value && getComputedStyle(root.value).direction === \"rtl\" ? -1 : 1;\n}\n\nfunction onDayKey(e: KeyboardEvent) {\n  const f = focus.value;\n  const dow = (f.getDay() - loc.weekStart.value + 7) % 7;\n  const s = sign();\n  let next: Date;\n  let walk: number;\n  switch (e.key) {\n    case \"ArrowLeft\":\n      walk = -s;\n      next = addDays(f, walk);\n      break;\n    case \"ArrowRight\":\n      walk = s;\n      next = addDays(f, walk);\n      break;\n    case \"ArrowUp\":\n      walk = -7;\n      next = addDays(f, walk);\n      break;\n    case \"ArrowDown\":\n      walk = 7;\n      next = addDays(f, walk);\n      break;\n    case \"Home\":\n      walk = 1;\n      next = addDays(f, -dow);\n      break;\n    case \"End\":\n      walk = -1;\n      next = addDays(f, 6 - dow);\n      break;\n    case \"PageUp\":\n      walk = -1;\n      next = addMonths(f, e.shiftKey ? -12 : -1);\n      break;\n    case \"PageDown\":\n      walk = 1;\n      next = addMonths(f, e.shiftKey ? 12 : 1);\n      break;\n    default:\n      return;\n  }\n  e.preventDefault();\n  const target = settle(next, walk);\n  if (!target) return;\n  focus.value = target;\n  focusId(dayId(target));\n  if (range.value && start.value && !end.value) hover.value = target;\n}\n\nfunction onPickKey(e: KeyboardEvent) {\n  const months = view.value === \"months\";\n  const lo = months ? 0 : yearLow.value;\n  const hi = months ? 11 : yearHigh.value;\n  const s = sign();\n  let next: number | null = null;\n  switch (e.key) {\n    case \"ArrowLeft\":\n      next = pick.value - s;\n      break;\n    case \"ArrowRight\":\n      next = pick.value + s;\n      break;\n    case \"ArrowUp\":\n      next = pick.value - 3;\n      break;\n    case \"ArrowDown\":\n      next = pick.value + 3;\n      break;\n    case \"Home\":\n      next = lo;\n      break;\n    case \"End\":\n      next = hi;\n      break;\n    case \"PageUp\":\n      if (!months) next = pick.value - 12;\n      break;\n    case \"PageDown\":\n      if (!months) next = pick.value + 12;\n      break;\n  }\n  if (next === null) return;\n  e.preventDefault();\n  next = Math.max(lo, Math.min(hi, next));\n  pick.value = next;\n  focusId(`${uid.value}-${months ? \"m\" : \"y\"}-${next}`);\n}\n\nfunction onRootKey(e: KeyboardEvent) {\n  if (e.key !== \"Escape\" || view.value === \"days\") return;\n  e.preventDefault();\n  e.stopPropagation();\n  backToDays();\n}\n\nfunction goToday() {\n  const tc = clamp(today);\n  focus.value = tc;\n  focusId(dayId(tc));\n  if (!range.value && !off(today)) pickDay(today);\n}\n\nconst shortDate = (d: Date) => `${loc.monthsShort.value[d.getMonth()]} ${d.getDate()}`;\nconst help = computed(() => {\n  if (!range.value || view.value !== \"days\") return \"\";\n  if (!start.value) return t(\"rangeStart\");\n  if (!end.value) return t(\"rangeEnd\", { start: shortDate(start.value) });\n  return t(\"rangeDone\", {\n    start: shortDate(start.value),\n    end: shortDate(end.value),\n    days: Math.round(compareDays(end.value, start.value) / 864e5) + 1,\n  });\n});\n\nconst picking = computed(() => view.value !== \"days\");\nconst prevOff = computed(() => !!props.min && compareDays(new Date(cy.value, cm.value, 0, 12), props.min) < 0);\nconst nextOff = computed(() => !!props.max && compareDays(new Date(cy.value, cm.value + 1, 1, 12), props.max) > 0);\nconst nowYear = today.getFullYear();\nconst nowMonth = today.getMonth();\n\ndefineExpose({\n  view,\n  focusDay: () => focusId(dayId(focus.value)),\n});\n</script>\n\n<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div ref=\"root\" class=\"e-cal\" :dir=\"config.dir ?? undefined\" @keydown=\"onRootKey\">\n    <div class=\"e-cal-head\">\n      <EIconButton\n        v-if=\"picking\"\n        icon=\"chevron-left\"\n        :label=\"t(view === 'months' ? 'backToYears' : 'backToDays')\"\n        @click=\"back\"\n      />\n      <EIconButton v-else icon=\"chevron-left\" :label=\"t('prevMonth')\" :disabled=\"prevOff\" @click=\"step(-1)\" />\n      <div class=\"e-cal-title\" aria-live=\"polite\">\n        <span v-if=\"picking\" class=\"e-cal-range\">{{\n          t(view === \"months\" ? \"chooseAMonth\" : \"chooseAYear\", { year: cy })\n        }}</span>\n        <button\n          v-else\n          type=\"button\"\n          class=\"e-cal-pick\"\n          aria-expanded=\"false\"\n          :aria-label=\"t('chooseDateNow', { month: loc.months.value[cm] ?? '', year: cy })\"\n          @click=\"openView('years')\"\n        >\n          {{ loc.months.value[cm] }} {{ cy }}\n          <EIcon name=\"chevron-down\" small />\n        </button>\n      </div>\n      <span v-if=\"picking\" class=\"e-cal-gap\" />\n      <EIconButton v-else icon=\"chevron-right\" :label=\"t('nextMonth')\" :disabled=\"nextOff\" @click=\"step(1)\" />\n    </div>\n\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -- the day buttons carry the roving tabindex -->\n    <table\n      v-if=\"view === 'days'\"\n      class=\"e-cal-grid\"\n      role=\"grid\"\n      :aria-label=\"`${loc.months.value[cm]} ${cy}`\"\n      @keydown=\"onDayKey\"\n    >\n      <thead>\n        <tr>\n          <th v-for=\"ix in columns\" :key=\"ix\" scope=\"col\" :abbr=\"loc.weekdays.value[ix]\">\n            {{ loc.weekdaysShort.value[ix] }}\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-for=\"(row, w) in weeks\" :key=\"w\">\n          <td\n            v-for=\"d in row\"\n            :key=\"dayKey(d)\"\n            role=\"gridcell\"\n            :aria-selected=\"isSelected(d) || inRange(d) ? 'true' : 'false'\"\n            :class=\"inRange(d) && 'e-cal-in'\"\n          >\n            <button\n              :id=\"dayId(d)\"\n              type=\"button\"\n              class=\"e-day\"\n              :class=\"[\n                d.getMonth() !== cm && 'e-day--out',\n                sameDay(d, today) && 'e-day--today',\n                isSelected(d) && 'e-day--sel',\n                !off(d) && isMarked(d) && 'e-day--mark',\n              ]\"\n              :tabindex=\"sameDay(d, focus) ? 0 : -1\"\n              :disabled=\"off(d)\"\n              :aria-label=\"dayLabel(d, !off(d) && isMarked(d))\"\n              @click=\"clickDay(d)\"\n              @mouseenter=\"range && start && !end && (hover = d)\"\n              @focus=\"range && start && !end && (hover = d)\"\n            >\n              {{ d.getDate() }}\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <div\n      v-else-if=\"view === 'months'\"\n      class=\"e-cal-cells\"\n      role=\"group\"\n      :aria-label=\"t('monthsOf', { year: cy })\"\n      @keydown=\"onPickKey\"\n    >\n      <button\n        v-for=\"(name, m) in loc.months.value\"\n        :id=\"`${uid}-m-${m}`\"\n        :key=\"m\"\n        type=\"button\"\n        class=\"e-cal-cell\"\n        :class=\"[m === cm && 'e-day--sel', cy === nowYear && m === nowMonth && 'e-day--today']\"\n        :tabindex=\"m === pick ? 0 : -1\"\n        :disabled=\"monthOff(cy, m)\"\n        :aria-pressed=\"m === cm ? 'true' : 'false'\"\n        :aria-current=\"cy === nowYear && m === nowMonth ? 'date' : undefined\"\n        @click=\"chooseMonth(m)\"\n      >\n        <span aria-hidden=\"true\">{{ loc.monthsShort.value[m] }}</span>\n        <span class=\"e-sr\">{{ name }} {{ cy }}</span>\n      </button>\n    </div>\n\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <div\n      v-else\n      class=\"e-cal-cells e-cal-years\"\n      role=\"group\"\n      :aria-label=\"t('yearsRange', { from: yearLow, to: yearHigh })\"\n      @keydown=\"onPickKey\"\n    >\n      <button\n        v-for=\"y in years\"\n        :id=\"`${uid}-y-${y}`\"\n        :key=\"y\"\n        type=\"button\"\n        class=\"e-cal-cell\"\n        :class=\"[y === cy && 'e-day--sel', y === nowYear && 'e-day--today']\"\n        :tabindex=\"y === pick ? 0 : -1\"\n        :disabled=\"yearOff(y)\"\n        :aria-pressed=\"y === cy ? 'true' : 'false'\"\n        :aria-current=\"y === nowYear ? 'date' : undefined\"\n        @click=\"chooseYear(y)\"\n      >\n        {{ y }}\n      </button>\n    </div>\n\n    <p v-if=\"range\" class=\"e-cal-help\" aria-live=\"polite\">{{ help }}</p>\n\n    <EActions v-if=\"footer\" class=\"e-cal-foot\" :class=\"view !== 'days' && 'e-cal-foot--idle'\" :inert=\"view !== 'days'\">\n      <EButton variant=\"quiet\" @click=\"goToday\">{{ t(\"today\") }}</EButton>\n      <EButton v-if=\"hasClear()\" variant=\"quiet\" @click=\"emit('clear')\">{{ t(\"clear\") }}</EButton>\n    </EActions>\n  </div>\n</template>\n\n<style>\n@layer e.composites {\n  .e-cal {\n    width: 20.5rem;\n    max-width: 100%;\n    font-family: var(--e-font-sans);\n  }\n\n  .e-cal-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    margin-bottom: var(--e-space-2);\n    padding-bottom: var(--e-space-2);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-cal-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-1);\n    flex: 1;\n    min-width: 0;\n    margin: 0;\n    font: 600 var(--e-text-lg) / 1.2 var(--e-font-sans);\n    text-align: center;\n  }\n\n  .e-cal-pick {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-2);\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 600 var(--e-text-lg) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-cal-pick:hover {\n    background: var(--e-surface-tint);\n    border-color: var(--e-border-strong);\n  }\n\n  .e-cal-pick:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: 1px;\n  }\n\n  .e-cal-pick .e-icon {\n    transition: transform var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-cal-pick[aria-expanded=\"true\"] .e-icon {\n    transform: rotate(180deg);\n  }\n\n  .e-cal-range {\n    font: 600 var(--e-text-lg) / 1.2 var(--e-font-sans);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .e-cal-gap {\n    display: block;\n    width: 44px;\n    height: 44px;\n  }\n\n  .e-cal-head .e-icon-btn:disabled {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-cal-head .e-icon-btn:disabled:hover {\n    background: transparent;\n    box-shadow: none;\n  }\n\n  .e-cal-grid {\n    width: 100%;\n    height: 312px;\n    border-collapse: collapse;\n    table-layout: fixed;\n  }\n\n  .e-cal-grid th {\n    height: 32px;\n    font: 600 var(--e-text-sm) / 1 var(--e-font-sans);\n    color: var(--e-muted);\n    text-align: center;\n  }\n\n  .e-cal-grid td {\n    padding: 1px 3px;\n    text-align: center;\n  }\n\n  .e-cal-in {\n    background: var(--e-surface-tint);\n  }\n\n  .e-day {\n    position: relative;\n    width: 100%;\n    height: 44px;\n    padding: 0;\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 500 var(--e-text-sm) / 1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation -- the selector stays in this form */\n  .e-day:hover:not(:disabled):not(.e-day--sel) {\n    background: var(--e-surface-tint);\n    border-color: var(--e-border-strong);\n  }\n\n  .e-day:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-day--out {\n    color: var(--e-muted);\n    font-weight: 400;\n  }\n\n  .e-day--today {\n    box-shadow: inset 0 0 0 1.5px var(--e-ink);\n  }\n\n  .e-day--sel {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n    font-weight: 700;\n    color: var(--e-on-primary);\n  }\n\n  .e-day:disabled {\n    color: var(--e-border-strong);\n    font-weight: 400;\n    cursor: not-allowed;\n    opacity: 1;\n  }\n\n  .e-day--mark::after {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: 50%;\n    bottom: 5px;\n    width: 5px;\n    height: 5px;\n    margin-inline-start: -2.5px;\n    border-radius: 50%;\n    background: var(--e-primary);\n  }\n\n  .e-day--sel.e-day--mark::after {\n    background: var(--e-on-primary);\n  }\n\n  .e-cal-cells {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-auto-rows: 1fr;\n    gap: 6px;\n    height: 312px;\n    padding-top: 4px;\n  }\n\n  .e-cal-years {\n    overflow-y: auto;\n    grid-auto-rows: 44px;\n    padding-inline-end: 2px;\n    align-content: start;\n  }\n\n  .e-cal-cell {\n    width: 100%;\n    height: 100%;\n    min-height: 44px;\n    padding: 0;\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 500 var(--e-text-md) / 1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-cal-years .e-cal-cell {\n    height: 44px;\n  }\n\n  /* stylelint-disable-next-line selector-not-notation -- the selector stays in this form */\n  .e-cal-cell:hover:not(:disabled):not(.e-day--sel) {\n    background: var(--e-surface-tint);\n    border-color: var(--e-border-strong);\n  }\n\n  .e-cal-cell:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-cal-cell:disabled {\n    color: var(--e-border-strong);\n    font-weight: 400;\n    cursor: not-allowed;\n  }\n\n  .e-cal-cell.e-day--sel {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n    font-weight: 700;\n    color: var(--e-on-primary);\n  }\n\n  .e-cal-help {\n    min-height: calc(var(--e-text-sm) * 1.4);\n    margin: var(--e-space-2) 0 0;\n    font: 500 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n    text-align: center;\n  }\n\n  .e-cal-foot {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(--e-space-2);\n    margin-top: var(--e-space-2);\n    padding-top: var(--e-space-2);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-cal-foot--idle {\n    visibility: hidden;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-day,\n    .e-cal-pick,\n    .e-cal-cell,\n    .e-cal-pick .e-icon {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-day--sel,\n    .e-cal-cell.e-day--sel {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .e-day--mark::after {\n      background: CanvasText;\n    }\n\n    .e-day--sel.e-day--mark::after {\n      background: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Calendar/ECalendar.vue.d.ts

@@ -0,0 +1,53 @@
+export interface CalendarRange {
+    start: Date | null;
+    end: Date | null;
+}
+type __VLS_Props = {
+    /** `single` chooses one day (`v-model`); `range` chooses a span (`v-model:start` and `v-model:end`). */
+    mode?: "single" | "range";
+    /** Days that cannot be chosen or focused, such as days with nothing to book. */
+    disabledDate?: (date: Date) => boolean;
+    /** Days that get a dot: a list of dates or a function. Screen readers hear `markLabel`. */
+    marked?: Date[] | ((date: Date) => boolean);
+    /** What screen readers hear on a marked day. Default "times available". */
+    markLabel?: string;
+    /** The earliest day that can be chosen. */
+    min?: Date;
+    /** The latest day that can be chosen. */
+    max?: Date;
+    /** The month to open on, when nothing is chosen. */
+    month?: Date;
+    /** `false` hides the Today and Clear buttons. */
+    footer?: boolean;
+    /** Forces the Clear button on or off. Left out, it shows when a `@clear` listener is attached. */
+    clearable?: boolean;
+};
+type View = "days" | "months" | "years";
+type __VLS_ModelProps = {
+    modelValue?: Date | null;
+    "start"?: Date | null;
+    "end"?: Date | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    view: import('vue').Ref<View, View>;
+    focusDay: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    "update:modelValue": (value: Date | null) => any;
+    rangeChange: (range: CalendarRange) => any;
+    "update:start": (value: Date | null) => any;
+    "update:end": (value: Date | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Date | null) => any) | undefined;
+    onRangeChange?: ((range: CalendarRange) => any) | undefined;
+    "onUpdate:start"?: ((value: Date | null) => any) | undefined;
+    "onUpdate:end"?: ((value: Date | null) => any) | undefined;
+}>, {
+    footer: boolean;
+    mode: "range" | "single";
+    clearable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Calendar/ECalendar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,388 @@
+/* empty css                */
+import { useConfig as e, useMessages as t } from "../../config.js";
+import { useLocale as n } from "../../composables/useLocale.js";
+import { useUid as r } from "../../composables/useUid.js";
+import i from "../Actions/EActions.js";
+import a from "../Icon/EIcon.js";
+import o from "../Button/EButton.js";
+import s from "../IconButton/EIconButton.js";
+import { addDays as c, addMonths as l, compareDays as u, dayKey as ee, sameDay as d, startOfDay as f } from "./dates.js";
+import { Fragment as p, computed as m, createBlock as h, createCommentVNode as te, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as ne, defineComponent as y, getCurrentInstance as re, mergeModels as b, nextTick as ie, normalizeClass as x, openBlock as S, ref as C, renderList as w, toDisplayString as T, unref as E, useModel as D, watch as ae, withCtx as O } from "vue";
+//#region src/components/Calendar/ECalendar.vue?vue&type=script&setup=true&lang.ts
+var oe = ["dir"], se = { class: "e-cal-head" }, ce = {
+	class: "e-cal-title",
+	"aria-live": "polite"
+}, le = {
+	key: 0,
+	class: "e-cal-range"
+}, ue = ["aria-label"], de = {
+	key: 2,
+	class: "e-cal-gap"
+}, fe = ["aria-label"], pe = ["abbr"], me = ["aria-selected"], he = [
+	"id",
+	"tabindex",
+	"disabled",
+	"aria-label",
+	"onClick",
+	"onMouseenter",
+	"onFocus"
+], ge = ["aria-label"], _e = [
+	"id",
+	"tabindex",
+	"disabled",
+	"aria-pressed",
+	"aria-current",
+	"onClick"
+], ve = { "aria-hidden": "true" }, ye = { class: "e-sr" }, be = ["aria-label"], xe = [
+	"id",
+	"tabindex",
+	"disabled",
+	"aria-pressed",
+	"aria-current",
+	"onClick"
+], Se = {
+	key: 3,
+	class: "e-cal-help",
+	"aria-live": "polite"
+}, Ce = /*@__PURE__*/ y({
+	__name: "ECalendar",
+	props: /*@__PURE__*/ b({
+		mode: { default: "single" },
+		disabledDate: {},
+		marked: {},
+		markLabel: {},
+		min: {},
+		max: {},
+		month: {},
+		footer: {
+			type: Boolean,
+			default: !0
+		},
+		clearable: {
+			type: Boolean,
+			default: void 0
+		}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {},
+		start: { default: null },
+		startModifiers: {},
+		end: { default: null },
+		endModifiers: {}
+	}),
+	emits: /*@__PURE__*/ b(["rangeChange", "clear"], [
+		"update:modelValue",
+		"update:start",
+		"update:end"
+	]),
+	setup(y, { expose: b, emit: Ce }) {
+		let k = y, A = Ce, j = D(y, "modelValue"), M = D(y, "start"), N = D(y, "end"), P = t(), F = e(), I = n(), L = r(), R = C(null), z = m(() => k.mode === "range"), we = re(), Te = () => k.clearable ?? !!we?.vnode.props?.onClear, B = f(/* @__PURE__ */ new Date()), V = C(f((z.value ? M.value : j.value) || k.month || /* @__PURE__ */ new Date())), H = C(null), U = C("days"), W = C(0), G = m(() => V.value.getFullYear()), K = m(() => V.value.getMonth()), q = m(() => Math.min(G.value, k.min ? k.min.getFullYear() : B.getFullYear() - 120)), Ee = m(() => Math.max(G.value, k.max ? k.max.getFullYear() : B.getFullYear() + 20)), De = m(() => Array.from({ length: Ee.value - q.value + 1 }, (e, t) => q.value + t));
+		function J(e) {
+			return !!k.min && u(e, k.min) < 0 || !!k.max && u(e, k.max) > 0 || !!k.disabledDate?.(e);
+		}
+		function Oe(e) {
+			let t = k.marked;
+			return t ? typeof t == "function" ? !!t(e) : t.some((t) => d(t, e)) : !1;
+		}
+		function ke(e, t) {
+			return !!k.min && u(new Date(e, t + 1, 0, 12), k.min) < 0 || !!k.max && u(new Date(e, t, 1, 12), k.max) > 0;
+		}
+		let Ae = (e) => !!k.min && e < k.min.getFullYear() || !!k.max && e > k.max.getFullYear();
+		function Y(e) {
+			return k.min && u(e, k.min) < 0 ? f(k.min) : k.max && u(e, k.max) > 0 ? f(k.max) : e;
+		}
+		function je(e, t) {
+			let n = e;
+			for (let e = 0; e < 400 && J(n); e++) n = c(n, t);
+			return J(n) ? null : n;
+		}
+		function Me(e, t) {
+			let n = new Date(e, t + 1, 0, 12).getDate();
+			return Y(new Date(e, t, Math.min(V.value.getDate(), n), 12));
+		}
+		J(V.value) && (V.value = je(V.value, 1) ?? je(V.value, -1) ?? V.value);
+		let X = null;
+		async function Ne() {
+			if (await ie(), !X) return;
+			let e = R.value?.querySelector(`[id="${X}"]`);
+			e && (e.focus(), X.includes("-y-") && e.scrollIntoView?.({ block: "center" }), X = null);
+		}
+		function Z(e) {
+			X = e, Ne();
+		}
+		let Q = (e) => `${L.value}-${ee(e)}`;
+		ae(() => k.month?.getTime(), () => {
+			k.month && (V.value = Y(f(k.month)));
+		}), ae(() => (z.value ? M.value : j.value)?.getTime(), () => {
+			let e = z.value ? M.value : j.value;
+			e && !d(e, V.value) && (V.value = f(e));
+		});
+		let Pe = m(() => {
+			let e = new Date(G.value, K.value, 1, 12), t = c(e, -((e.getDay() - I.weekStart.value + 7) % 7));
+			return Array.from({ length: 6 }, (e, n) => Array.from({ length: 7 }, (e, r) => c(t, n * 7 + r)));
+		}), Fe = m(() => Array.from({ length: 7 }, (e, t) => (I.weekStart.value + t) % 7)), Ie = m(() => z.value ? N.value || (M.value && H.value && u(H.value, M.value) >= 0 ? H.value : null) : null);
+		function Le(e) {
+			return z.value ? d(e, M.value) || d(e, N.value) : d(e, j.value);
+		}
+		function Re(e) {
+			return !!(z.value && M.value && Ie.value && u(e, M.value) > 0 && u(e, Ie.value) < 0);
+		}
+		function ze(e, t) {
+			return I.formatLong(e) + (d(e, B) ? ", " + P("todaySuffix") : "") + (t ? ", " + (k.markLabel || P("timesAvailable")) : "");
+		}
+		function Be(e) {
+			if (J(e)) return;
+			if (!z.value) {
+				j.value = e;
+				return;
+			}
+			let t = M.value;
+			!t || N.value || u(e, t) < 0 ? (M.value = e, N.value = null, A("rangeChange", {
+				start: e,
+				end: null
+			})) : (N.value = e, A("rangeChange", {
+				start: t,
+				end: e
+			}));
+		}
+		function Ve(e) {
+			V.value = e, Z(Q(e)), Be(e);
+		}
+		function He(e) {
+			U.value = e, e === "months" ? (W.value = K.value, Z(`${L.value}-m-${K.value}`)) : (W.value = G.value, Z(`${L.value}-y-${G.value}`));
+		}
+		function Ue() {
+			U.value = "days", Z(Q(V.value));
+		}
+		function We() {
+			U.value === "months" ? He("years") : Ue();
+		}
+		function Ge(e) {
+			if (ke(G.value, e)) return;
+			let t = Me(G.value, e);
+			V.value = t, U.value = "days", Z(Q(t));
+		}
+		function Ke(e) {
+			if (Ae(e)) return;
+			let t = Me(e, K.value);
+			V.value = t, U.value = "months", W.value = t.getMonth(), Z(`${L.value}-m-${t.getMonth()}`);
+		}
+		function qe(e) {
+			V.value = Y(l(V.value, e));
+		}
+		function Je() {
+			return F.dir ? F.dir === "rtl" ? -1 : 1 : R.value && getComputedStyle(R.value).direction === "rtl" ? -1 : 1;
+		}
+		function Ye(e) {
+			let t = V.value, n = (t.getDay() - I.weekStart.value + 7) % 7, r = Je(), i, a;
+			switch (e.key) {
+				case "ArrowLeft":
+					a = -r, i = c(t, a);
+					break;
+				case "ArrowRight":
+					a = r, i = c(t, a);
+					break;
+				case "ArrowUp":
+					a = -7, i = c(t, a);
+					break;
+				case "ArrowDown":
+					a = 7, i = c(t, a);
+					break;
+				case "Home":
+					a = 1, i = c(t, -n);
+					break;
+				case "End":
+					a = -1, i = c(t, 6 - n);
+					break;
+				case "PageUp":
+					a = -1, i = l(t, e.shiftKey ? -12 : -1);
+					break;
+				case "PageDown":
+					a = 1, i = l(t, e.shiftKey ? 12 : 1);
+					break;
+				default: return;
+			}
+			e.preventDefault();
+			let o = je(i, a);
+			o && (V.value = o, Z(Q(o)), z.value && M.value && !N.value && (H.value = o));
+		}
+		function Xe(e) {
+			let t = U.value === "months", n = t ? 0 : q.value, r = t ? 11 : Ee.value, i = Je(), a = null;
+			switch (e.key) {
+				case "ArrowLeft":
+					a = W.value - i;
+					break;
+				case "ArrowRight":
+					a = W.value + i;
+					break;
+				case "ArrowUp":
+					a = W.value - 3;
+					break;
+				case "ArrowDown":
+					a = W.value + 3;
+					break;
+				case "Home":
+					a = n;
+					break;
+				case "End":
+					a = r;
+					break;
+				case "PageUp":
+					t || (a = W.value - 12);
+					break;
+				case "PageDown": t || (a = W.value + 12);
+			}
+			a !== null && (e.preventDefault(), a = Math.max(n, Math.min(r, a)), W.value = a, Z(`${L.value}-${t ? "m" : "y"}-${a}`));
+		}
+		function Ze(e) {
+			e.key === "Escape" && U.value !== "days" && (e.preventDefault(), e.stopPropagation(), Ue());
+		}
+		function Qe() {
+			let e = Y(B);
+			V.value = e, Z(Q(e)), !z.value && !J(B) && Be(B);
+		}
+		let $e = (e) => `${I.monthsShort.value[e.getMonth()]} ${e.getDate()}`, et = m(() => !z.value || U.value !== "days" ? "" : M.value ? N.value ? P("rangeDone", {
+			start: $e(M.value),
+			end: $e(N.value),
+			days: Math.round(u(N.value, M.value) / 864e5) + 1
+		}) : P("rangeEnd", { start: $e(M.value) }) : P("rangeStart")), tt = m(() => U.value !== "days"), nt = m(() => !!k.min && u(new Date(G.value, K.value, 0, 12), k.min) < 0), rt = m(() => !!k.max && u(new Date(G.value, K.value + 1, 1, 12), k.max) > 0), $ = B.getFullYear(), it = B.getMonth();
+		return b({
+			view: U,
+			focusDay: () => Z(Q(V.value))
+		}), (e, t) => (S(), g("div", {
+			ref_key: "root",
+			ref: R,
+			class: "e-cal",
+			dir: E(F).dir ?? void 0,
+			onKeydown: Ze
+		}, [
+			_("div", se, [
+				tt.value ? (S(), h(s, {
+					key: 0,
+					icon: "chevron-left",
+					label: E(P)(U.value === "months" ? "backToYears" : "backToDays"),
+					onClick: We
+				}, null, 8, ["label"])) : (S(), h(s, {
+					key: 1,
+					icon: "chevron-left",
+					label: E(P)("prevMonth"),
+					disabled: nt.value,
+					onClick: t[0] ||= (e) => qe(-1)
+				}, null, 8, ["label", "disabled"])),
+				_("div", ce, [tt.value ? (S(), g("span", le, T(E(P)(U.value === "months" ? "chooseAMonth" : "chooseAYear", { year: G.value })), 1)) : (S(), g("button", {
+					key: 1,
+					type: "button",
+					class: "e-cal-pick",
+					"aria-expanded": "false",
+					"aria-label": E(P)("chooseDateNow", {
+						month: E(I).months.value[K.value] ?? "",
+						year: G.value
+					}),
+					onClick: t[1] ||= (e) => He("years")
+				}, [v(T(E(I).months.value[K.value]) + " " + T(G.value) + " ", 1), ne(a, {
+					name: "chevron-down",
+					small: ""
+				})], 8, ue))]),
+				tt.value ? (S(), g("span", de)) : (S(), h(s, {
+					key: 3,
+					icon: "chevron-right",
+					label: E(P)("nextMonth"),
+					disabled: rt.value,
+					onClick: t[2] ||= (e) => qe(1)
+				}, null, 8, ["label", "disabled"]))
+			]),
+			U.value === "days" ? (S(), g("table", {
+				key: 0,
+				class: "e-cal-grid",
+				role: "grid",
+				"aria-label": `${E(I).months.value[K.value]} ${G.value}`,
+				onKeydown: Ye
+			}, [_("thead", null, [_("tr", null, [(S(!0), g(p, null, w(Fe.value, (e) => (S(), g("th", {
+				key: e,
+				scope: "col",
+				abbr: E(I).weekdays.value[e]
+			}, T(E(I).weekdaysShort.value[e]), 9, pe))), 128))])]), _("tbody", null, [(S(!0), g(p, null, w(Pe.value, (e, t) => (S(), g("tr", { key: t }, [(S(!0), g(p, null, w(e, (e) => (S(), g("td", {
+				key: E(ee)(e),
+				role: "gridcell",
+				"aria-selected": Le(e) || Re(e) ? "true" : "false",
+				class: x(Re(e) && "e-cal-in")
+			}, [_("button", {
+				id: Q(e),
+				type: "button",
+				class: x(["e-day", [
+					e.getMonth() !== K.value && "e-day--out",
+					E(d)(e, E(B)) && "e-day--today",
+					Le(e) && "e-day--sel",
+					!J(e) && Oe(e) && "e-day--mark"
+				]]),
+				tabindex: E(d)(e, V.value) ? 0 : -1,
+				disabled: J(e),
+				"aria-label": ze(e, !J(e) && Oe(e)),
+				onClick: (t) => Ve(e),
+				onMouseenter: (t) => z.value && M.value && !N.value && (H.value = e),
+				onFocus: (t) => z.value && M.value && !N.value && (H.value = e)
+			}, T(e.getDate()), 43, he)], 10, me))), 128))]))), 128))])], 40, fe)) : U.value === "months" ? (S(), g("div", {
+				key: 1,
+				class: "e-cal-cells",
+				role: "group",
+				"aria-label": E(P)("monthsOf", { year: G.value }),
+				onKeydown: Xe
+			}, [(S(!0), g(p, null, w(E(I).months.value, (e, t) => (S(), g("button", {
+				id: `${E(L)}-m-${t}`,
+				key: t,
+				type: "button",
+				class: x(["e-cal-cell", [t === K.value && "e-day--sel", G.value === E($) && t === E(it) && "e-day--today"]]),
+				tabindex: t === W.value ? 0 : -1,
+				disabled: ke(G.value, t),
+				"aria-pressed": t === K.value ? "true" : "false",
+				"aria-current": G.value === E($) && t === E(it) ? "date" : void 0,
+				onClick: (e) => Ge(t)
+			}, [_("span", ve, T(E(I).monthsShort.value[t]), 1), _("span", ye, T(e) + " " + T(G.value), 1)], 10, _e))), 128))], 40, ge)) : (S(), g("div", {
+				key: 2,
+				class: "e-cal-cells e-cal-years",
+				role: "group",
+				"aria-label": E(P)("yearsRange", {
+					from: q.value,
+					to: Ee.value
+				}),
+				onKeydown: Xe
+			}, [(S(!0), g(p, null, w(De.value, (e) => (S(), g("button", {
+				id: `${E(L)}-y-${e}`,
+				key: e,
+				type: "button",
+				class: x(["e-cal-cell", [e === G.value && "e-day--sel", e === E($) && "e-day--today"]]),
+				tabindex: e === W.value ? 0 : -1,
+				disabled: Ae(e),
+				"aria-pressed": e === G.value ? "true" : "false",
+				"aria-current": e === E($) ? "date" : void 0,
+				onClick: (t) => Ke(e)
+			}, T(e), 11, xe))), 128))], 40, be)),
+			z.value ? (S(), g("p", Se, T(et.value), 1)) : te("", !0),
+			y.footer ? (S(), h(i, {
+				key: 4,
+				class: x(["e-cal-foot", U.value !== "days" && "e-cal-foot--idle"]),
+				inert: U.value !== "days"
+			}, {
+				default: O(() => [ne(o, {
+					variant: "quiet",
+					onClick: Qe
+				}, {
+					default: O(() => [v(T(E(P)("today")), 1)]),
+					_: 1
+				}), Te() ? (S(), h(o, {
+					key: 0,
+					variant: "quiet",
+					onClick: t[3] ||= (e) => A("clear")
+				}, {
+					default: O(() => [v(T(E(P)("clear")), 1)]),
+					_: 1
+				})) : te("", !0)]),
+				_: 1
+			}, 8, ["class", "inert"])) : te("", !0)
+		], 40, oe));
+	}
+});
+//#endregion
+export { Ce as default };
+
+//# sourceMappingURL=ECalendar.vue_vue_type_script_setup_true_lang.js.map