@eos-ui/vue 0.1.0 → 0.2.0

package/dist/components/RadioGroup/ERadioGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ERadioGroup.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EFieldset","_unref","_withCtx","_createElementBlock","_Fragment","_renderList","_createElementVNode","_normalizeClass","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","EFieldset_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ERadioGroup_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","name","useUid","slots","useSlots","normalised","o","hasContent","nodes","n","Comment","Fragment","rows","chosen","option","Nodes","p","openBlock","createBlock","unref","withCtx","createElementBlock","renderList","row","createElementVNode","normalizeClass","createTextVNode","toDisplayString","createCommentVNode","createVNode"],"sources":["../../../src/components/RadioGroup/ERadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface RadioOption {\n  value: string;\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, Fragment, useSlots, type FunctionalComponent, type VNode } from \"vue\";\nimport EFieldset from \"../Fieldset/EFieldset.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\nconst props = defineProps<{\n  /** The question, as the group's legend. */\n  label: string;\n  /** Keep the legend for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Five or fewer. A string is both value and label. */\n  options: (string | RadioOption)[];\n  /** Help that is announced with the group. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced with the group. */\n  error?: string;\n  required?: boolean;\n  /** A word beside the legend. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every option. */\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. Generated when left out. */\n  name?: string;\n}>();\n\ndefineSlots<{\n  /** A control shown under its option while that option is chosen, such as an amount field under \"Another amount\". Render nothing for an option that has none. */\n  reveal(props: { option: RadioOption }): unknown;\n}>();\n\nconst model = defineModel<string>();\n\nconst name = useUid(() => props.name);\nconst slots = useSlots();\n\nconst normalised = (): RadioOption[] => props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o));\n\nfunction hasContent(nodes: VNode[]): boolean {\n  return nodes.some((n) =>\n    n.type === Comment ? false : n.type === Fragment ? hasContent((n.children as VNode[] | null) ?? []) : true,\n  );\n}\n\nfunction rows() {\n  return normalised().map((option) => {\n    const chosen = model.value === option.value;\n    const nodes = chosen ? slots.reveal?.({ option }) : undefined;\n    return { option, chosen, reveal: nodes && hasContent(nodes) ? nodes : null };\n  });\n}\n\nconst Nodes: FunctionalComponent<{ nodes: VNode[] }> = (p) => p.nodes;\nNodes.props = [\"nodes\"];\n</script>\n\n<template>\n  <EFieldset\n    :id=\"`${name}-fs`\"\n    class=\"e-radiogroup\"\n    legend-class=\"e-radiogroup-legend\"\n    bare\n    :legend=\"label\"\n    :hide-legend=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  >\n    <template v-for=\"row in rows()\" :key=\"row.option.value\">\n      <label class=\"e-choice\" :class=\"{ 'e-choice--disabled': row.option.disabled, 'e-choice--open': row.reveal }\">\n        <input\n          type=\"radio\"\n          class=\"e-radio\"\n          :name=\"name\"\n          :value=\"row.option.value\"\n          :required=\"required\"\n          :checked=\"row.chosen\"\n          :disabled=\"row.option.disabled\"\n          @change=\"model = row.option.value\"\n        />\n        <span class=\"e-choice-text\">\n          {{ row.option.label }}\n          <span v-if=\"row.option.description\" class=\"e-choice-desc\">{{ row.option.description }}</span>\n        </span>\n      </label>\n      <div v-if=\"row.reveal\" class=\"e-choice-reveal\"><Nodes :nodes=\"row.reveal\" /></div>\n    </template>\n  </EFieldset>\n</template>\n\n<style>\n@layer e.controls {\n  .e-radiogroup {\n    display: grid;\n    gap: 0;\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-radiogroup-legend {\n    padding: 0;\n  }\n\n  .e-radiogroup > .e-field-hint,\n  .e-radiogroup > .e-field-error {\n    margin-top: -6px;\n  }\n\n  .e-choice--open {\n    min-height: 0;\n    padding-bottom: var(--e-space-1);\n  }\n\n  .e-choice-reveal {\n    padding: var(--e-space-1) 0 var(--e-space-2);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,IAAMuB,IAAQC,GAyBRC,IAAQzB,EAAmBwB,GAAA,YAAC,GAE5BG,IAAOC,QAAaL,EAAM,IAAI,GAC9BM,IAAQC,EAAS,GAEjBC,UAAkCR,EAAM,QAAQ,KAAK,MAAO,OAAOS,KAAM,WAAW;GAAE,OAAOA;GAAG,OAAOA;EAAE,IAAIA,CAAE;EAErH,SAASC,EAAW,GAAyB;GAC3C,OAAOC,EAAM,MAAM,MACjBC,EAAE,SAASC,IAAU,KAAQD,EAAE,SAASE,KAAWJ,EAAYE,EAAE,YAA+B,CAAC,CAAC,CACpG;EACF;EAEA,SAASG,IAAO;GACd,OAAOP,EAAW,CAAC,CAAC,KAAK,MAAW;IAClC,IAAMQ,IAASd,EAAM,UAAUe,EAAO,OAChCN,IAAQK,IAASV,EAAM,SAAS,EAAE,UAAO,CAAC,IAAI,KAAA;IACpD,OAAO;KAAE;KAAQ;KAAQ,QAAQK,KAASD,EAAWC,CAAK,IAAIA,IAAQ;IAAK;GAC7E,CAAC;EACH;EAEA,IAAMO,KAAkD,MAAMC,EAAE;E,OAChE,EAAM,QAAQ,CAAC,OAAO,I,UAIpBzC,EAAA,GAAAC,EAgCYC,GAAA;GA/BT,IAAE,GAAKC,EAAAuB,CAAA,EAAI;GACZ,OAAM;GACN,gBAAa;GACb,MAAA;GACC,QAAQH,EAAA;GACR,eAAaA,EAAA;GACb,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAED,SAAAnB,QAAqB,EAA/BJ,EAAA,EAAA,GAAAK,EAkBWC,GAAA,MAAAC,EAlBa8B,EAAI,IAAX,O,YAAqB,KAAAW,EAAI,OAAO,M,IAC/CxC,EAeQ,SAAA,EAfD,OAAKC,EAAA,CAAC,YAAU;IAAA,sBAAiCuC,EAAI,OAAO;IAAQ,kBAAoBA,EAAI;GAAM,CAAA,CAAA,E,IACvGxC,EASE,SAAA;IARA,MAAK;IACL,OAAM;IACL,MAAML,EAAAuB,CAAA;IACN,OAAOsB,EAAI,OAAO;IAClB,UAAUzB,EAAA;IACV,SAASyB,EAAI;IACb,UAAUA,EAAI,OAAO;IACrB,WAAM,MAAE,EAAA,QAAQA,EAAI,OAAO;G,iBAE9BxC,EAGO,QAHPQ,GAGO,CAFFN,EAAAC,EAAAqC,EAAI,OAAO,KAAK,IAAG,KACtB,CAAA,GAAYA,EAAI,OAAO,eAAvBhD,EAAA,GAAAK,EAA6F,QAA7FY,GAA6FN,EAAhCqC,EAAI,OAAO,WAAW,GAAA,CAAA,K,kBAG5EA,EAAI,UAAfhD,EAAA,GAAAK,EAAkF,OAAlFa,GAAkF,CAAnCL,EAA6B2B,GAAA,EAArB,OAAOQ,EAAI,O"}
+{"version":3,"file":"ERadioGroup.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EFieldset","_unref","_withCtx","_createElementBlock","_Fragment","_renderList","_createElementVNode","_normalizeClass","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","EFieldset_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ERadioGroup_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","name","useUid","slots","useSlots","normalised","o","hasContent","nodes","n","Comment","Fragment","rows","chosen","option","Nodes","p","openBlock","createBlock","unref","withCtx","createElementBlock","renderList","row","createElementVNode","normalizeClass","createTextVNode","toDisplayString","createCommentVNode","createVNode"],"sources":["../../../src/components/RadioGroup/ERadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface RadioOption {\n  value: string;\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, Fragment, useSlots, type FunctionalComponent, type VNode } from \"vue\";\nimport EFieldset from \"../Fieldset/EFieldset.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\nconst props = defineProps<{\n  /** The question, as the group's legend. */\n  label: string;\n  /** Keep the legend for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Five or fewer. A string is both value and label. `RadioOption`: `{ value, label, description?, disabled? }`. */\n  options: (string | RadioOption)[];\n  /** Help that is announced with the group. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced with the group. */\n  error?: string;\n  /** A word beside the legend, and `required` on the radios. */\n  required?: boolean;\n  /** A word beside the legend. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every option. */\n  disabled?: boolean;\n  /** Shared by the radios, submitted with a form. @default generated */\n  name?: string;\n}>();\n\ndefineSlots<{\n  /** A control shown under its option while that option is chosen, such as an amount field under \"Another amount\". Render nothing for an option that has none. */\n  reveal(props: { option: RadioOption }): unknown;\n}>();\n\n/** The chosen value. */\nconst model = defineModel<string>();\n\nconst name = useUid(() => props.name);\nconst slots = useSlots();\n\nconst normalised = (): RadioOption[] => props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o));\n\nfunction hasContent(nodes: VNode[]): boolean {\n  return nodes.some((n) =>\n    n.type === Comment ? false : n.type === Fragment ? hasContent((n.children as VNode[] | null) ?? []) : true,\n  );\n}\n\nfunction rows() {\n  return normalised().map((option) => {\n    const chosen = model.value === option.value;\n    const nodes = chosen ? slots.reveal?.({ option }) : undefined;\n    return { option, chosen, reveal: nodes && hasContent(nodes) ? nodes : null };\n  });\n}\n\nconst Nodes: FunctionalComponent<{ nodes: VNode[] }> = (p) => p.nodes;\nNodes.props = [\"nodes\"];\n</script>\n\n<template>\n  <EFieldset\n    :id=\"`${name}-fs`\"\n    class=\"e-radiogroup\"\n    legend-class=\"e-radiogroup-legend\"\n    bare\n    :legend=\"label\"\n    :hide-legend=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  >\n    <template v-for=\"row in rows()\" :key=\"row.option.value\">\n      <label class=\"e-choice\" :class=\"{ 'e-choice--disabled': row.option.disabled, 'e-choice--open': row.reveal }\">\n        <input\n          type=\"radio\"\n          class=\"e-radio\"\n          :name=\"name\"\n          :value=\"row.option.value\"\n          :required=\"required\"\n          :checked=\"row.chosen\"\n          :disabled=\"row.option.disabled\"\n          @change=\"model = row.option.value\"\n        />\n        <span class=\"e-choice-text\">\n          {{ row.option.label }}\n          <span v-if=\"row.option.description\" class=\"e-choice-desc\">{{ row.option.description }}</span>\n        </span>\n      </label>\n      <div v-if=\"row.reveal\" class=\"e-choice-reveal\"><Nodes :nodes=\"row.reveal\" /></div>\n    </template>\n  </EFieldset>\n</template>\n\n<style>\n@layer e.controls {\n  .e-radiogroup {\n    display: grid;\n    gap: 0;\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-radiogroup-legend {\n    padding: 0;\n  }\n\n  .e-radiogroup > .e-field-hint,\n  .e-radiogroup > .e-field-error {\n    margin-top: calc(var(--e-space-1) - var(--e-space-2) - var(--e-focus-gap));\n  }\n\n  .e-choice--open {\n    min-height: 0;\n    padding-bottom: var(--e-space-1);\n  }\n\n  .e-choice-reveal {\n    padding: var(--e-space-1) 0 var(--e-space-2);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,IAAMuB,IAAQC,GA2BRC,IAAQzB,EAAmBwB,GAAA,YAAC,GAE5BG,IAAOC,QAAaL,EAAM,IAAI,GAC9BM,IAAQC,EAAS,GAEjBC,UAAkCR,EAAM,QAAQ,KAAK,MAAO,OAAOS,KAAM,WAAW;GAAE,OAAOA;GAAG,OAAOA;EAAE,IAAIA,CAAE;EAErH,SAASC,EAAW,GAAyB;GAC3C,OAAOC,EAAM,MAAM,MACjBC,EAAE,SAASC,IAAU,KAAQD,EAAE,SAASE,KAAWJ,EAAYE,EAAE,YAA+B,CAAC,CAAC,CACpG;EACF;EAEA,SAASG,IAAO;GACd,OAAOP,EAAW,CAAC,CAAC,KAAK,MAAW;IAClC,IAAMQ,IAASd,EAAM,UAAUe,EAAO,OAChCN,IAAQK,IAASV,EAAM,SAAS,EAAE,UAAO,CAAC,IAAI,KAAA;IACpD,OAAO;KAAE;KAAQ;KAAQ,QAAQK,KAASD,EAAWC,CAAK,IAAIA,IAAQ;IAAK;GAC7E,CAAC;EACH;EAEA,IAAMO,KAAkD,MAAMC,EAAE;E,OAChE,EAAM,QAAQ,CAAC,OAAO,I,UAIpBzC,EAAA,GAAAC,EAgCYC,GAAA;GA/BT,IAAE,GAAKC,EAAAuB,CAAA,EAAI;GACZ,OAAM;GACN,gBAAa;GACb,MAAA;GACC,QAAQH,EAAA;GACR,eAAaA,EAAA;GACb,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAED,SAAAnB,QAAqB,EAA/BJ,EAAA,EAAA,GAAAK,EAkBWC,GAAA,MAAAC,EAlBa8B,EAAI,IAAX,O,YAAqB,KAAAW,EAAI,OAAO,M,IAC/CxC,EAeQ,SAAA,EAfD,OAAKC,EAAA,CAAC,YAAU;IAAA,sBAAiCuC,EAAI,OAAO;IAAQ,kBAAoBA,EAAI;GAAM,CAAA,CAAA,E,IACvGxC,EASE,SAAA;IARA,MAAK;IACL,OAAM;IACL,MAAML,EAAAuB,CAAA;IACN,OAAOsB,EAAI,OAAO;IAClB,UAAUzB,EAAA;IACV,SAASyB,EAAI;IACb,UAAUA,EAAI,OAAO;IACrB,WAAM,MAAE,EAAA,QAAQA,EAAI,OAAO;G,iBAE9BxC,EAGO,QAHPQ,GAGO,CAFFN,EAAAC,EAAAqC,EAAI,OAAO,KAAK,IAAG,KACtB,CAAA,GAAYA,EAAI,OAAO,eAAvBhD,EAAA,GAAAK,EAA6F,QAA7FY,GAA6FN,EAAhCqC,EAAI,OAAO,WAAW,GAAA,CAAA,K,kBAG5EA,EAAI,UAAfhD,EAAA,GAAAK,EAAkF,OAAlFa,GAAkF,CAAnCL,EAA6B2B,GAAA,EAArB,OAAOQ,EAAI,O"}

package/dist/components/RangePicker/ERangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ERangePicker.js","names":["_sfc_main","ERangePicker_vue_vue_type_script_setup_true_lang_default","ERangePicker_default"],"sources":["../../../src/components/RangePicker/ERangePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from \"vue\";\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from \"reka-ui\";\nimport EButton from \"../Button/EButton.vue\";\nimport ECalendar from \"../Calendar/ECalendar.vue\";\nimport type { CalendarRange } from \"../Calendar/ECalendar.vue\";\nimport EField from \"../Field/EField.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { addDays, compareDays, isoDate, startOfDay } from \"../Calendar/dates.js\";\nimport { useConfig, useMessages, usePortalTarget } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useQuietFocus } from \"../Select/quietFocus.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\nimport \"../DatePicker/picker.css\";\n\nexport interface RangePreset {\n  /** The button text, such as \"Last 7 days\". */\n  label: string;\n  /** The span the button chooses. */\n  get: () => { start: Date; end: Date };\n}\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint and marks both boxes invalid. A typed span that cannot be used shows its own error. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The earliest date that can be chosen or typed. */\n  min?: Date;\n  /** The latest date that can be chosen or typed. */\n  max?: Date;\n  /** Submits the first date as `YYYY-MM-DD` with a form. */\n  startName?: string;\n  /** Submits the last date as `YYYY-MM-DD` with a form. */\n  endName?: string;\n  /** Buttons under the calendar that choose a span at once. Default: Last 7 days, Last 30 days, This month. */\n  presets?: RangePreset[];\n  /** The id of the start box; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst start = defineModel<Date | null>(\"start\", { default: null });\nconst end = defineModel<Date | null>(\"end\", { default: null });\n\nconst t = useMessages();\nconst config = useConfig();\nconst loc = useLocale();\nconst portal = usePortalTarget();\nconst attrs = useFieldAttrs();\n\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst shown = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(shown, (el) => !!el.closest(\".e-calpanel, .e-combo\"));\nconst trigger = { onClick: quiet.intent, onKeydown: quiet.intent };\n\nconst startText = ref(loc.formatDate(start.value));\nconst endText = ref(loc.formatDate(end.value));\nconst typedError = ref(\"\");\nconst draft = ref<CalendarRange>({ start: start.value, end: end.value });\nconst calendar = ref<InstanceType<typeof ECalendar> | null>(null);\nconst startInput = ref<HTMLInputElement | null>(null);\n\nwatch([() => start.value?.getTime(), () => end.value?.getTime(), () => config.locale], () => {\n  startText.value = loc.formatDate(start.value);\n  endText.value = loc.formatDate(end.value);\n});\nwatch(open, (isOpen) => {\n  if (isOpen) draft.value = { start: start.value, end: end.value };\n});\n\nconst shownError = computed(() => props.error || typedError.value);\n\nconst presets = computed<RangePreset[]>(() => {\n  if (props.presets) return props.presets;\n  const today = startOfDay(new Date());\n  return [\n    { label: t(\"last7\"), get: () => ({ start: addDays(today, -6), end: today }) },\n    { label: t(\"last30\"), get: () => ({ start: addDays(today, -29), end: today }) },\n    {\n      label: t(\"thisMonth\"),\n      get: () => ({ start: new Date(today.getFullYear(), today.getMonth(), 1, 12), end: today }),\n    },\n  ];\n});\n\nfunction setRange(r: { start: Date | null; end: Date | null }) {\n  start.value = r.start;\n  end.value = r.end;\n  startText.value = loc.formatDate(r.start);\n  endText.value = loc.formatDate(r.end);\n  typedError.value = \"\";\n}\n\nconst outOfBounds = (d: Date) =>\n  (!!props.min && compareDays(d, props.min) < 0) || (!!props.max && compareDays(d, props.max) > 0);\n\nfunction commitText() {\n  const a = startText.value.trim() ? loc.parseDate(startText.value) : null;\n  const b = endText.value.trim() ? loc.parseDate(endText.value) : null;\n  if ((startText.value.trim() && !a) || (endText.value.trim() && !b)) {\n    typedError.value = t(\"datesError\", { format: loc.dateFormatLabel() });\n    return;\n  }\n  const bad = [a, b].find((d) => d && outOfBounds(d));\n  if (bad) {\n    typedError.value = t(\"dateBetween\", {\n      min: loc.formatDate(props.min || bad),\n      max: loc.formatDate(props.max || bad),\n    });\n    return;\n  }\n  if (a && b && compareDays(b, a) < 0) {\n    typedError.value = t(\"endBeforeStart\");\n    return;\n  }\n  setRange({ start: a, end: b });\n}\n\nfunction onRange(r: CalendarRange) {\n  draft.value = r;\n  if (r.start && r.end) {\n    setRange(r);\n    open.value = false;\n  }\n}\nfunction applyPreset(p: RangePreset) {\n  setRange(p.get());\n  open.value = false;\n}\n\nfunction onOpenFocus(e: Event) {\n  e.preventDefault();\n  if (!quiet.personOpened()) return;\n  void nextTick(() => calendar.value?.focusDay());\n}\nfunction onCloseFocus(e: Event) {\n  if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction onEscape(e: KeyboardEvent) {\n  if (calendar.value && calendar.value.view !== \"days\") e.preventDefault();\n}\nfunction onKey(e: KeyboardEvent) {\n  if (e.key === \"Enter\") commitText();\n  else if (e.key === \"ArrowDown\" && e.altKey && !props.disabled) {\n    e.preventDefault();\n    quiet.intent();\n    open.value = true;\n  }\n}\n\ndefineExpose({\n  input: startInput,\n  focus: () => startInput.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"shownError\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <PopoverRoot :open=\"shown\" @update:open=\"open = $event\">\n        <PopoverAnchor as-child>\n          <div\n            v-bind=\"attrs.input()\"\n            class=\"e-input-wrap e-combo e-rangefield\"\n            role=\"group\"\n            :aria-labelledby=\"`${field.id}-label`\"\n            :data-invalid=\"shownError ? '' : undefined\"\n            :data-disabled=\"disabled ? '' : undefined\"\n          >\n            <input\n              :id=\"field.id\"\n              ref=\"startInput\"\n              v-model=\"startText\"\n              class=\"e-input e-combo-input\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              :placeholder=\"t('startDate')\"\n              :aria-label=\"t('startDate')\"\n              :disabled=\"disabled\"\n              :required=\"required\"\n              :aria-invalid=\"field.ariaInvalid\"\n              :aria-describedby=\"field.ariaDescribedby\"\n              @input=\"typedError = ''\"\n              @blur=\"commitText\"\n              @keydown=\"onKey\"\n            />\n            <span class=\"e-range-sep\" aria-hidden=\"true\">{{ t(\"to\") }}</span>\n            <input\n              v-model=\"endText\"\n              class=\"e-input e-combo-input\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              :placeholder=\"t('endDate')\"\n              :aria-label=\"t('endDate')\"\n              :disabled=\"disabled\"\n              :required=\"required\"\n              :aria-invalid=\"field.ariaInvalid\"\n              :aria-describedby=\"field.ariaDescribedby\"\n              @input=\"typedError = ''\"\n              @blur=\"commitText\"\n              @keydown=\"onKey\"\n            />\n            <input v-if=\"startName\" type=\"hidden\" :name=\"startName\" :value=\"isoDate(start)\" />\n            <input v-if=\"endName\" type=\"hidden\" :name=\"endName\" :value=\"isoDate(end)\" />\n            <PopoverTrigger as-child v-bind=\"trigger\">\n              <button type=\"button\" class=\"e-combo-btn\" :aria-label=\"t('chooseDates')\" :disabled=\"disabled\">\n                <EIcon name=\"calendar\" />\n              </button>\n            </PopoverTrigger>\n          </div>\n        </PopoverAnchor>\n        <PopoverPortal :to=\"portal\">\n          <PopoverContent\n            class=\"e-calpanel e-root\"\n            :aria-label=\"t('chooseDates')\"\n            :dir=\"config.dir ?? undefined\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"6\"\n            :collision-padding=\"8\"\n            @open-auto-focus=\"onOpenFocus\"\n            @close-auto-focus=\"onCloseFocus\"\n            @escape-key-down=\"onEscape\"\n          >\n            <ECalendar\n              ref=\"calendar\"\n              mode=\"range\"\n              :start=\"draft.start\"\n              :end=\"draft.end\"\n              :min=\"min\"\n              :max=\"max\"\n              :footer=\"false\"\n              @range-change=\"onRange\"\n            />\n            <div class=\"e-cal-presets\">\n              <EButton v-for=\"p in presets\" :key=\"p.label\" variant=\"outline\" @click=\"applyPreset(p)\">\n                {{ p.label }}\n              </EButton>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n      </PopoverRoot>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  .e-cal-presets {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-2);\n    margin-top: var(--e-space-3);\n    padding-top: var(--e-space-3);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-rangefield .e-input {\n    flex: 1 1 5rem;\n  }\n\n  .e-range-sep {\n    flex: none;\n    font: 500 var(--e-text-sm) / 1 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ERangePicker.js","names":["_sfc_main","ERangePicker_vue_vue_type_script_setup_true_lang_default","ERangePicker_default"],"sources":["../../../src/components/RangePicker/ERangePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from \"vue\";\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from \"reka-ui\";\nimport EButton from \"../Button/EButton.vue\";\nimport ECalendar from \"../Calendar/ECalendar.vue\";\nimport type { CalendarRange } from \"../Calendar/ECalendar.vue\";\nimport EField from \"../Field/EField.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { addDays, compareDays, isoDate, startOfDay } from \"../Calendar/dates.js\";\nimport { useConfig, useMessages, usePortalTarget } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useQuietFocus } from \"../Select/quietFocus.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\nimport \"../DatePicker/picker.css\";\n\nexport interface RangePreset {\n  /** The button text, such as \"Last 7 days\". */\n  label: string;\n  /** The span the button chooses. */\n  get: () => { start: Date; end: Date };\n}\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. It also names the group. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint and marks both boxes invalid. A typed span that cannot be used shows its own error. */\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  /** Disables both boxes and the button. */\n  disabled?: boolean;\n  /** The earliest date that can be chosen or typed. */\n  min?: Date;\n  /** The latest date that can be chosen or typed. */\n  max?: Date;\n  /** Submits the first date as `YYYY-MM-DD` with a form, through a hidden input. */\n  startName?: string;\n  /** Submits the last date as `YYYY-MM-DD` with a form, through a hidden input. */\n  endName?: string;\n  /** Buttons under the calendar; one sets the span and closes. @default Last 7 days, Last 30 days, This month */\n  presets?: RangePreset[];\n  /** The id of the start box; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The first date of the span. */\nconst start = defineModel<Date | null>(\"start\", { default: null });\n/** The last date of the span. */\nconst end = defineModel<Date | null>(\"end\", { default: null });\n\nconst t = useMessages();\nconst config = useConfig();\nconst loc = useLocale();\nconst portal = usePortalTarget();\nconst attrs = useFieldAttrs();\n\n/** Whether the calendar is open. A disabled field never opens. */\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst shown = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(shown, (el) => !!el.closest(\".e-calpanel, .e-combo\"));\nconst trigger = { onClick: quiet.intent, onKeydown: quiet.intent };\n\nconst startText = ref(loc.formatDate(start.value));\nconst endText = ref(loc.formatDate(end.value));\nconst typedError = ref(\"\");\nconst draft = ref<CalendarRange>({ start: start.value, end: end.value });\nconst calendar = ref<InstanceType<typeof ECalendar> | null>(null);\nconst startInput = ref<HTMLInputElement | null>(null);\n\nwatch([() => start.value?.getTime(), () => end.value?.getTime(), () => config.locale], () => {\n  startText.value = loc.formatDate(start.value);\n  endText.value = loc.formatDate(end.value);\n});\nwatch(open, (isOpen) => {\n  if (isOpen) draft.value = { start: start.value, end: end.value };\n});\n\nconst shownError = computed(() => props.error || typedError.value);\n\nconst presets = computed<RangePreset[]>(() => {\n  if (props.presets) return props.presets;\n  const today = startOfDay(new Date());\n  return [\n    { label: t(\"last7\"), get: () => ({ start: addDays(today, -6), end: today }) },\n    { label: t(\"last30\"), get: () => ({ start: addDays(today, -29), end: today }) },\n    {\n      label: t(\"thisMonth\"),\n      get: () => ({ start: new Date(today.getFullYear(), today.getMonth(), 1, 12), end: today }),\n    },\n  ];\n});\n\nfunction setRange(r: { start: Date | null; end: Date | null }) {\n  start.value = r.start;\n  end.value = r.end;\n  startText.value = loc.formatDate(r.start);\n  endText.value = loc.formatDate(r.end);\n  typedError.value = \"\";\n}\n\nconst outOfBounds = (d: Date) =>\n  (!!props.min && compareDays(d, props.min) < 0) || (!!props.max && compareDays(d, props.max) > 0);\n\nfunction commitText() {\n  const a = startText.value.trim() ? loc.parseDate(startText.value) : null;\n  const b = endText.value.trim() ? loc.parseDate(endText.value) : null;\n  if ((startText.value.trim() && !a) || (endText.value.trim() && !b)) {\n    typedError.value = t(\"datesError\", { format: loc.dateFormatLabel() });\n    return;\n  }\n  const bad = [a, b].find((d) => d && outOfBounds(d));\n  if (bad) {\n    typedError.value = t(\"dateBetween\", {\n      min: loc.formatDate(props.min || bad),\n      max: loc.formatDate(props.max || bad),\n    });\n    return;\n  }\n  if (a && b && compareDays(b, a) < 0) {\n    typedError.value = t(\"endBeforeStart\");\n    return;\n  }\n  setRange({ start: a, end: b });\n}\n\nfunction onRange(r: CalendarRange) {\n  draft.value = r;\n  if (r.start && r.end) {\n    setRange(r);\n    open.value = false;\n  }\n}\nfunction applyPreset(p: RangePreset) {\n  setRange(p.get());\n  open.value = false;\n}\n\nfunction onOpenFocus(e: Event) {\n  e.preventDefault();\n  if (!quiet.personOpened()) return;\n  void nextTick(() => calendar.value?.focusDay());\n}\nfunction onCloseFocus(e: Event) {\n  if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction onEscape(e: KeyboardEvent) {\n  if (calendar.value && calendar.value.view !== \"days\") e.preventDefault();\n}\nfunction onKey(e: KeyboardEvent) {\n  if (e.key === \"Enter\") commitText();\n  else if (e.key === \"ArrowDown\" && e.altKey && !props.disabled) {\n    e.preventDefault();\n    quiet.intent();\n    open.value = true;\n  }\n}\n\ndefineExpose({\n  input: startInput,\n  focus: () => startInput.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"shownError\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <PopoverRoot :open=\"shown\" @update:open=\"open = $event\">\n        <PopoverAnchor as-child>\n          <div\n            v-bind=\"attrs.input()\"\n            class=\"e-input-wrap e-combo e-rangefield\"\n            role=\"group\"\n            :aria-labelledby=\"`${field.id}-label`\"\n            :data-invalid=\"shownError ? '' : undefined\"\n            :data-disabled=\"disabled ? '' : undefined\"\n          >\n            <input\n              :id=\"field.id\"\n              ref=\"startInput\"\n              v-model=\"startText\"\n              class=\"e-input e-combo-input\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              :placeholder=\"t('startDate')\"\n              :aria-label=\"t('startDate')\"\n              :disabled=\"disabled\"\n              :required=\"required\"\n              :aria-invalid=\"field.ariaInvalid\"\n              :aria-describedby=\"field.ariaDescribedby\"\n              @input=\"typedError = ''\"\n              @blur=\"commitText\"\n              @keydown=\"onKey\"\n            />\n            <span class=\"e-range-sep\" aria-hidden=\"true\">{{ t(\"to\") }}</span>\n            <input\n              v-model=\"endText\"\n              class=\"e-input e-combo-input\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              :placeholder=\"t('endDate')\"\n              :aria-label=\"t('endDate')\"\n              :disabled=\"disabled\"\n              :required=\"required\"\n              :aria-invalid=\"field.ariaInvalid\"\n              :aria-describedby=\"field.ariaDescribedby\"\n              @input=\"typedError = ''\"\n              @blur=\"commitText\"\n              @keydown=\"onKey\"\n            />\n            <input v-if=\"startName\" type=\"hidden\" :name=\"startName\" :value=\"isoDate(start)\" />\n            <input v-if=\"endName\" type=\"hidden\" :name=\"endName\" :value=\"isoDate(end)\" />\n            <PopoverTrigger as-child v-bind=\"trigger\">\n              <button type=\"button\" class=\"e-combo-btn\" :aria-label=\"t('chooseDates')\" :disabled=\"disabled\">\n                <EIcon name=\"calendar\" />\n              </button>\n            </PopoverTrigger>\n          </div>\n        </PopoverAnchor>\n        <PopoverPortal :to=\"portal\">\n          <PopoverContent\n            class=\"e-calpanel e-root\"\n            :aria-label=\"t('chooseDates')\"\n            :dir=\"config.dir ?? undefined\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"6\"\n            :collision-padding=\"8\"\n            @open-auto-focus=\"onOpenFocus\"\n            @close-auto-focus=\"onCloseFocus\"\n            @escape-key-down=\"onEscape\"\n          >\n            <ECalendar\n              ref=\"calendar\"\n              mode=\"range\"\n              :start=\"draft.start\"\n              :end=\"draft.end\"\n              :min=\"min\"\n              :max=\"max\"\n              :footer=\"false\"\n              @range-change=\"onRange\"\n            />\n            <div class=\"e-cal-presets\">\n              <EButton v-for=\"p in presets\" :key=\"p.label\" variant=\"outline\" @click=\"applyPreset(p)\">\n                {{ p.label }}\n              </EButton>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n      </PopoverRoot>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  .e-cal-presets {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-2);\n    margin-top: var(--e-space-3);\n    padding-top: var(--e-space-3);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-rangefield .e-input {\n    flex: 1 1 5rem;\n  }\n\n  .e-range-sep {\n    flex: none;\n    font: 500 var(--e-text-sm) / 1 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/RangePicker/ERangePicker.vue.d.ts

@@ -8,7 +8,7 @@ export interface RangePreset {
     };
 }
 type __VLS_Props = {
-    /** The visible label, a mono kicker above the field. */
+    /** The visible label, a mono kicker above the field. It also names the group. */
     label: string;
     /** Keep the label for screen readers and remove it from the page. */
     hideLabel?: boolean;
@@ -16,27 +16,31 @@ type __VLS_Props = {
     hint?: string;
     /** What to fix. Replaces the hint and marks both boxes invalid. A typed span that cannot be used shows its own error. */
     error?: string;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables both boxes and the button. */
     disabled?: boolean;
     /** The earliest date that can be chosen or typed. */
     min?: Date;
     /** The latest date that can be chosen or typed. */
     max?: Date;
-    /** Submits the first date as `YYYY-MM-DD` with a form. */
+    /** Submits the first date as `YYYY-MM-DD` with a form, through a hidden input. */
     startName?: string;
-    /** Submits the last date as `YYYY-MM-DD` with a form. */
+    /** Submits the last date as `YYYY-MM-DD` with a form, through a hidden input. */
     endName?: string;
-    /** Buttons under the calendar that choose a span at once. Default: Last 7 days, Last 30 days, This month. */
+    /** Buttons under the calendar; one sets the span and closes. @default Last 7 days, Last 30 days, This month */
     presets?: RangePreset[];
-    /** The id of the start box; the label points at it. Generated when left out. */
+    /** The id of the start box; the label points at it. @default generated */
     id?: string;
 };
 type __VLS_ModelProps = {
+    /** The first date of the span. */
     "start"?: Date | null;
+    /** The last date of the span. */
     "end"?: Date | null;
+    /** Whether the calendar is open. A disabled field never opens. */
     "open"?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
@@ -44,13 +48,13 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
     input: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
     focus: () => void | undefined;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
     "update:start": (value: Date | null) => any;
     "update:end": (value: Date | null) => any;
+    "update:open": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:start"?: ((value: Date | null) => any) | undefined;
     "onUpdate:end"?: ((value: Date | null) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/RangePicker/ERangePicker.vue_vue_type_script_setup_true_lang.js

@@ -2,17 +2,17 @@
 import { useConfig as e, useMessages as t, usePortalTarget as n } from "../../config.js";
 import { useFieldAttrs as r } from "../../composables/useFieldAttrs.js";
 import { useLocale as ee } from "../../composables/useLocale.js";
-import te from "../Icon/EIcon.js";
-import i from "../Field/EField.js";
+import i from "../Icon/EIcon.js";
+import a from "../Button/EButton.js";
+import { addDays as o, compareDays as s, isoDate as c, startOfDay as te } from "../Calendar/dates.js";
+import ne from "../Calendar/ECalendar.js";
+import re from "../Field/EField.js";
 /* empty css                 */
-import { useQuietFocus as a } from "../Select/quietFocus.js";
 /* empty css                */
-import o from "../Button/EButton.js";
-import { addDays as s, compareDays as c, isoDate as l, startOfDay as ne } from "../Calendar/dates.js";
-import re from "../Calendar/ECalendar.js";
+import { useQuietFocus as ie } from "../Select/quietFocus.js";
 /* empty css                   */
-import { Fragment as ie, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as ae, createVNode as h, defineComponent as g, mergeModels as _, mergeProps as v, nextTick as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, useModel as T, vModelText as E, watch as D, withCtx as O, withDirectives as k } from "vue";
-import { PopoverAnchor as oe, PopoverContent as se, PopoverPortal as ce, PopoverRoot as le, PopoverTrigger as A } from "reka-ui";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeModels as v, mergeProps as y, nextTick as ae, openBlock as b, ref as x, renderList as oe, toDisplayString as S, unref as C, useModel as w, vModelText as T, watch as E, withCtx as D, withDirectives as O } from "vue";
+import { PopoverAnchor as k, PopoverContent as A, PopoverPortal as se, PopoverRoot as ce, PopoverTrigger as le } from "reka-ui";
 //#region src/components/RangePicker/ERangePicker.vue?vue&type=script&setup=true&lang.ts
 var ue = [
 	"aria-labelledby",
@@ -36,10 +36,10 @@ var ue = [
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], me = ["name", "value"], j = ["name", "value"], M = ["aria-label", "disabled"], N = { class: "e-cal-presets" }, P = /*@__PURE__*/ g({
+], me = ["name", "value"], j = ["name", "value"], M = ["aria-label", "disabled"], N = { class: "e-cal-presets" }, P = /*@__PURE__*/ _({
 	inheritAttrs: !1,
 	__name: "ERangePicker",
-	props: /*@__PURE__*/ _({
+	props: /*@__PURE__*/ v({
 		label: {},
 		hideLabel: { type: Boolean },
 		hint: {},
@@ -69,21 +69,21 @@ var ue = [
 		"update:end",
 		"update:open"
 	],
-	setup(g, { expose: _ }) {
-		let P = g, F = T(g, "start"), I = T(g, "end"), L = t(), R = e(), z = ee(), he = n(), B = r(), V = T(g, "open"), H = u(() => V.value && !P.disabled), U = a(H, (e) => !!e.closest(".e-calpanel, .e-combo")), ge = {
+	setup(_, { expose: v }) {
+		let P = _, F = w(_, "start"), I = w(_, "end"), L = t(), R = e(), z = ee(), he = n(), B = r(), V = w(_, "open"), H = u(() => V.value && !P.disabled), U = ie(H, (e) => !!e.closest(".e-calpanel, .e-combo")), ge = {
 			onClick: U.intent,
 			onKeydown: U.intent
 		}, W = x(z.formatDate(F.value)), G = x(z.formatDate(I.value)), K = x(""), q = x({
 			start: F.value,
 			end: I.value
 		}), J = x(null), Y = x(null);
-		D([
+		E([
 			() => F.value?.getTime(),
 			() => I.value?.getTime(),
 			() => R.locale
 		], () => {
 			W.value = z.formatDate(F.value), G.value = z.formatDate(I.value);
-		}), D(V, (e) => {
+		}), E(V, (e) => {
 			e && (q.value = {
 				start: F.value,
 				end: I.value
@@ -91,19 +91,19 @@ var ue = [
 		});
 		let X = u(() => P.error || K.value), _e = u(() => {
 			if (P.presets) return P.presets;
-			let e = ne(/* @__PURE__ */ new Date());
+			let e = te(/* @__PURE__ */ new Date());
 			return [
 				{
 					label: L("last7"),
 					get: () => ({
-						start: s(e, -6),
+						start: o(e, -6),
 						end: e
 					})
 				},
 				{
 					label: L("last30"),
 					get: () => ({
-						start: s(e, -29),
+						start: o(e, -29),
 						end: e
 					})
 				},
@@ -119,7 +119,7 @@ var ue = [
 		function Z(e) {
 			F.value = e.start, I.value = e.end, W.value = z.formatDate(e.start), G.value = z.formatDate(e.end), K.value = "";
 		}
-		let ve = (e) => !!P.min && c(e, P.min) < 0 || !!P.max && c(e, P.max) > 0;
+		let ve = (e) => !!P.min && s(e, P.min) < 0 || !!P.max && s(e, P.max) > 0;
 		function Q() {
 			let e = W.value.trim() ? z.parseDate(W.value) : null, t = G.value.trim() ? z.parseDate(G.value) : null;
 			if (W.value.trim() && !e || G.value.trim() && !t) {
@@ -130,7 +130,7 @@ var ue = [
 			n ? K.value = L("dateBetween", {
 				min: z.formatDate(P.min || n),
 				max: z.formatDate(P.max || n)
-			}) : e && t && c(t, e) < 0 ? K.value = L("endBeforeStart") : Z({
+			}) : e && t && s(t, e) < 0 ? K.value = L("endBeforeStart") : Z({
 				start: e,
 				end: t
 			});
@@ -142,7 +142,7 @@ var ue = [
 			Z(e.get()), V.value = !1;
 		}
 		function xe(e) {
-			e.preventDefault(), U.personOpened() && y(() => J.value?.focusDay());
+			e.preventDefault(), U.personOpened() && ae(() => J.value?.focusDay());
 		}
 		function Se(e) {
 			U.returnsFocus() || e.preventDefault();
@@ -153,31 +153,31 @@ var ue = [
 		function $(e) {
 			e.key === "Enter" ? Q() : e.key === "ArrowDown" && e.altKey && !P.disabled && (e.preventDefault(), U.intent(), V.value = !0);
 		}
-		return _({
+		return v({
 			input: Y,
 			focus: () => Y.value?.focus()
-		}), (e, t) => (b(), d(i, v(w(B).wrapper(), {
-			id: g.id,
-			label: g.label,
-			"hide-label": g.hideLabel,
-			hint: g.hint,
+		}), (e, t) => (b(), d(re, y(C(B).wrapper(), {
+			id: _.id,
+			label: _.label,
+			"hide-label": _.hideLabel,
+			hint: _.hint,
 			error: X.value,
-			required: g.required,
-			optional: g.optional
+			required: _.required,
+			optional: _.optional
 		}), {
-			default: O((e) => [h(w(le), {
+			default: D((e) => [g(C(ce), {
 				open: H.value,
 				"onUpdate:open": t[4] ||= (e) => V.value = e
 			}, {
-				default: O(() => [h(w(oe), { "as-child": "" }, {
-					default: O(() => [m("div", v(w(B).input(), {
+				default: D(() => [g(C(k), { "as-child": "" }, {
+					default: D(() => [m("div", y(C(B).input(), {
 						class: "e-input-wrap e-combo e-rangefield",
 						role: "group",
 						"aria-labelledby": `${e.id}-label`,
 						"data-invalid": X.value ? "" : void 0,
-						"data-disabled": g.disabled ? "" : void 0
+						"data-disabled": _.disabled ? "" : void 0
 					}), [
-						k(m("input", {
+						O(m("input", {
 							id: e.id,
 							ref_key: "startInput",
 							ref: Y,
@@ -186,61 +186,61 @@ var ue = [
 							type: "text",
 							inputmode: "numeric",
 							autocomplete: "off",
-							placeholder: w(L)("startDate"),
-							"aria-label": w(L)("startDate"),
-							disabled: g.disabled,
-							required: g.required,
+							placeholder: C(L)("startDate"),
+							"aria-label": C(L)("startDate"),
+							disabled: _.disabled,
+							required: _.required,
 							"aria-invalid": e.ariaInvalid,
 							"aria-describedby": e.ariaDescribedby,
 							onInput: t[1] ||= (e) => K.value = "",
 							onBlur: Q,
 							onKeydown: $
-						}, null, 40, de), [[E, W.value]]),
-						m("span", fe, C(w(L)("to")), 1),
-						k(m("input", {
+						}, null, 40, de), [[T, W.value]]),
+						m("span", fe, S(C(L)("to")), 1),
+						O(m("input", {
 							"onUpdate:modelValue": t[2] ||= (e) => G.value = e,
 							class: "e-input e-combo-input",
 							type: "text",
 							inputmode: "numeric",
 							autocomplete: "off",
-							placeholder: w(L)("endDate"),
-							"aria-label": w(L)("endDate"),
-							disabled: g.disabled,
-							required: g.required,
+							placeholder: C(L)("endDate"),
+							"aria-label": C(L)("endDate"),
+							disabled: _.disabled,
+							required: _.required,
 							"aria-invalid": e.ariaInvalid,
 							"aria-describedby": e.ariaDescribedby,
 							onInput: t[3] ||= (e) => K.value = "",
 							onBlur: Q,
 							onKeydown: $
-						}, null, 40, pe), [[E, G.value]]),
-						g.startName ? (b(), p("input", {
+						}, null, 40, pe), [[T, G.value]]),
+						_.startName ? (b(), p("input", {
 							key: 0,
 							type: "hidden",
-							name: g.startName,
-							value: w(l)(F.value)
+							name: _.startName,
+							value: C(c)(F.value)
 						}, null, 8, me)) : f("", !0),
-						g.endName ? (b(), p("input", {
+						_.endName ? (b(), p("input", {
 							key: 1,
 							type: "hidden",
-							name: g.endName,
-							value: w(l)(I.value)
+							name: _.endName,
+							value: C(c)(I.value)
 						}, null, 8, j)) : f("", !0),
-						h(w(A), v({ "as-child": "" }, ge), {
-							default: O(() => [m("button", {
+						g(C(le), y({ "as-child": "" }, ge), {
+							default: D(() => [m("button", {
 								type: "button",
 								class: "e-combo-btn",
-								"aria-label": w(L)("chooseDates"),
-								disabled: g.disabled
-							}, [h(te, { name: "calendar" })], 8, M)]),
+								"aria-label": C(L)("chooseDates"),
+								disabled: _.disabled
+							}, [g(i, { name: "calendar" })], 8, M)]),
 							_: 1
 						}, 16)
 					], 16, ue)]),
 					_: 2
-				}, 1024), h(w(ce), { to: w(he) }, {
-					default: O(() => [h(w(se), {
+				}, 1024), g(C(se), { to: C(he) }, {
+					default: D(() => [g(C(A), {
 						class: "e-calpanel e-root",
-						"aria-label": w(L)("chooseDates"),
-						dir: w(R).dir ?? void 0,
+						"aria-label": C(L)("chooseDates"),
+						dir: C(R).dir ?? void 0,
 						side: "bottom",
 						align: "start",
 						"side-offset": 6,
@@ -249,14 +249,14 @@ var ue = [
 						onCloseAutoFocus: Se,
 						onEscapeKeyDown: Ce
 					}, {
-						default: O(() => [h(re, {
+						default: D(() => [g(ne, {
 							ref_key: "calendar",
 							ref: J,
 							mode: "range",
 							start: q.value.start,
 							end: q.value.end,
-							min: g.min,
-							max: g.max,
+							min: _.min,
+							max: _.max,
 							footer: !1,
 							onRangeChange: ye
 						}, null, 8, [
@@ -264,12 +264,12 @@ var ue = [
 							"end",
 							"min",
 							"max"
-						]), m("div", N, [(b(!0), p(ie, null, S(_e.value, (e) => (b(), d(o, {
+						]), m("div", N, [(b(!0), p(l, null, oe(_e.value, (e) => (b(), d(a, {
 							key: e.label,
 							variant: "outline",
 							onClick: (t) => be(e)
 						}, {
-							default: O(() => [ae(C(e.label), 1)]),
+							default: D(() => [h(S(e.label), 1)]),
 							_: 2
 						}, 1032, ["onClick"]))), 128))])]),
 						_: 1

package/dist/components/RangePicker/ERangePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ERangePicker.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createVNode","_createElementVNode","_withDirectives","_vModelText","_toDisplayString","_createElementBlock","_createCommentVNode","EIcon","ECalendar","_Fragment","_renderList","EButton","_createTextVNode","EIcon_default","EField_default","EButton_default","ECalendar_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","ERangePicker_vue_vue_type_script_setup_true_lang_default","\"start\"","\"startModifiers\"","\"end\"","\"endModifiers\"","\"open\"","\"openModifiers\"","__expose","props","__props","start","useModel","end","t","useMessages","config","useConfig","loc","useLocale","portal","usePortalTarget","attrs","useFieldAttrs","open","shown","computed","quiet","useQuietFocus","el","trigger","startText","ref","endText","typedError","draft","calendar","startInput","watch","isOpen","shownError","presets","today","startOfDay","addDays","setRange","r","outOfBounds","compareDays","d","commitText","a","b","bad","onRange","applyPreset","p","onOpenFocus","nextTick","onCloseFocus","onEscape","onKey","openBlock","createBlock","mergeProps","unref","withCtx","createVNode","PopoverRoot","_cache","$event","PopoverAnchor","createElementVNode","field","withDirectives","vModelText","toDisplayString","createElementBlock","isoDate","createCommentVNode","PopoverTrigger","PopoverPortal","PopoverContent","Fragment","renderList","createTextVNode"],"sources":["../../../src/components/RangePicker/ERangePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from \"vue\";\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from \"reka-ui\";\nimport EButton from \"../Button/EButton.vue\";\nimport ECalendar from \"../Calendar/ECalendar.vue\";\nimport type { CalendarRange } from \"../Calendar/ECalendar.vue\";\nimport EField from \"../Field/EField.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { addDays, compareDays, isoDate, startOfDay } from \"../Calendar/dates.js\";\nimport { useConfig, useMessages, usePortalTarget } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useQuietFocus } from \"../Select/quietFocus.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\nimport \"../DatePicker/picker.css\";\n\nexport interface RangePreset {\n  /** The button text, such as \"Last 7 days\". */\n  label: string;\n  /** The span the button chooses. */\n  get: () => { start: Date; end: Date };\n}\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint and marks both boxes invalid. A typed span that cannot be used shows its own error. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The earliest date that can be chosen or typed. */\n  min?: Date;\n  /** The latest date that can be chosen or typed. */\n  max?: Date;\n  /** Submits the first date as `YYYY-MM-DD` with a form. */\n  startName?: string;\n  /** Submits the last date as `YYYY-MM-DD` with a form. */\n  endName?: string;\n  /** Buttons under the calendar that choose a span at once. Default: Last 7 days, Last 30 days, This month. */\n  presets?: RangePreset[];\n  /** The id of the start box; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst start = defineModel<Date | null>(\"start\", { default: null });\nconst end = defineModel<Date | null>(\"end\", { default: null });\n\nconst t = useMessages();\nconst config = useConfig();\nconst loc = useLocale();\nconst portal = usePortalTarget();\nconst attrs = useFieldAttrs();\n\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst shown = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(shown, (el) => !!el.closest(\".e-calpanel, .e-combo\"));\nconst trigger = { onClick: quiet.intent, onKeydown: quiet.intent };\n\nconst startText = ref(loc.formatDate(start.value));\nconst endText = ref(loc.formatDate(end.value));\nconst typedError = ref(\"\");\nconst draft = ref<CalendarRange>({ start: start.value, end: end.value });\nconst calendar = ref<InstanceType<typeof ECalendar> | null>(null);\nconst startInput = ref<HTMLInputElement | null>(null);\n\nwatch([() => start.value?.getTime(), () => end.value?.getTime(), () => config.locale], () => {\n  startText.value = loc.formatDate(start.value);\n  endText.value = loc.formatDate(end.value);\n});\nwatch(open, (isOpen) => {\n  if (isOpen) draft.value = { start: start.value, end: end.value };\n});\n\nconst shownError = computed(() => props.error || typedError.value);\n\nconst presets = computed<RangePreset[]>(() => {\n  if (props.presets) return props.presets;\n  const today = startOfDay(new Date());\n  return [\n    { label: t(\"last7\"), get: () => ({ start: addDays(today, -6), end: today }) },\n    { label: t(\"last30\"), get: () => ({ start: addDays(today, -29), end: today }) },\n    {\n      label: t(\"thisMonth\"),\n      get: () => ({ start: new Date(today.getFullYear(), today.getMonth(), 1, 12), end: today }),\n    },\n  ];\n});\n\nfunction setRange(r: { start: Date | null; end: Date | null }) {\n  start.value = r.start;\n  end.value = r.end;\n  startText.value = loc.formatDate(r.start);\n  endText.value = loc.formatDate(r.end);\n  typedError.value = \"\";\n}\n\nconst outOfBounds = (d: Date) =>\n  (!!props.min && compareDays(d, props.min) < 0) || (!!props.max && compareDays(d, props.max) > 0);\n\nfunction commitText() {\n  const a = startText.value.trim() ? loc.parseDate(startText.value) : null;\n  const b = endText.value.trim() ? loc.parseDate(endText.value) : null;\n  if ((startText.value.trim() && !a) || (endText.value.trim() && !b)) {\n    typedError.value = t(\"datesError\", { format: loc.dateFormatLabel() });\n    return;\n  }\n  const bad = [a, b].find((d) => d && outOfBounds(d));\n  if (bad) {\n    typedError.value = t(\"dateBetween\", {\n      min: loc.formatDate(props.min || bad),\n      max: loc.formatDate(props.max || bad),\n    });\n    return;\n  }\n  if (a && b && compareDays(b, a) < 0) {\n    typedError.value = t(\"endBeforeStart\");\n    return;\n  }\n  setRange({ start: a, end: b });\n}\n\nfunction onRange(r: CalendarRange) {\n  draft.value = r;\n  if (r.start && r.end) {\n    setRange(r);\n    open.value = false;\n  }\n}\nfunction applyPreset(p: RangePreset) {\n  setRange(p.get());\n  open.value = false;\n}\n\nfunction onOpenFocus(e: Event) {\n  e.preventDefault();\n  if (!quiet.personOpened()) return;\n  void nextTick(() => calendar.value?.focusDay());\n}\nfunction onCloseFocus(e: Event) {\n  if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction onEscape(e: KeyboardEvent) {\n  if (calendar.value && calendar.value.view !== \"days\") e.preventDefault();\n}\nfunction onKey(e: KeyboardEvent) {\n  if (e.key === \"Enter\") commitText();\n  else if (e.key === \"ArrowDown\" && e.altKey && !props.disabled) {\n    e.preventDefault();\n    quiet.intent();\n    open.value = true;\n  }\n}\n\ndefineExpose({\n  input: startInput,\n  focus: () => startInput.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"shownError\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <PopoverRoot :open=\"shown\" @update:open=\"open = $event\">\n        <PopoverAnchor as-child>\n          <div\n            v-bind=\"attrs.input()\"\n            class=\"e-input-wrap e-combo e-rangefield\"\n            role=\"group\"\n            :aria-labelledby=\"`${field.id}-label`\"\n            :data-invalid=\"shownError ? '' : undefined\"\n            :data-disabled=\"disabled ? '' : undefined\"\n          >\n            <input\n              :id=\"field.id\"\n              ref=\"startInput\"\n              v-model=\"startText\"\n              class=\"e-input e-combo-input\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              :placeholder=\"t('startDate')\"\n              :aria-label=\"t('startDate')\"\n              :disabled=\"disabled\"\n              :required=\"required\"\n              :aria-invalid=\"field.ariaInvalid\"\n              :aria-describedby=\"field.ariaDescribedby\"\n              @input=\"typedError = ''\"\n              @blur=\"commitText\"\n              @keydown=\"onKey\"\n            />\n            <span class=\"e-range-sep\" aria-hidden=\"true\">{{ t(\"to\") }}</span>\n            <input\n              v-model=\"endText\"\n              class=\"e-input e-combo-input\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              :placeholder=\"t('endDate')\"\n              :aria-label=\"t('endDate')\"\n              :disabled=\"disabled\"\n              :required=\"required\"\n              :aria-invalid=\"field.ariaInvalid\"\n              :aria-describedby=\"field.ariaDescribedby\"\n              @input=\"typedError = ''\"\n              @blur=\"commitText\"\n              @keydown=\"onKey\"\n            />\n            <input v-if=\"startName\" type=\"hidden\" :name=\"startName\" :value=\"isoDate(start)\" />\n            <input v-if=\"endName\" type=\"hidden\" :name=\"endName\" :value=\"isoDate(end)\" />\n            <PopoverTrigger as-child v-bind=\"trigger\">\n              <button type=\"button\" class=\"e-combo-btn\" :aria-label=\"t('chooseDates')\" :disabled=\"disabled\">\n                <EIcon name=\"calendar\" />\n              </button>\n            </PopoverTrigger>\n          </div>\n        </PopoverAnchor>\n        <PopoverPortal :to=\"portal\">\n          <PopoverContent\n            class=\"e-calpanel e-root\"\n            :aria-label=\"t('chooseDates')\"\n            :dir=\"config.dir ?? undefined\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"6\"\n            :collision-padding=\"8\"\n            @open-auto-focus=\"onOpenFocus\"\n            @close-auto-focus=\"onCloseFocus\"\n            @escape-key-down=\"onEscape\"\n          >\n            <ECalendar\n              ref=\"calendar\"\n              mode=\"range\"\n              :start=\"draft.start\"\n              :end=\"draft.end\"\n              :min=\"min\"\n              :max=\"max\"\n              :footer=\"false\"\n              @range-change=\"onRange\"\n            />\n            <div class=\"e-cal-presets\">\n              <EButton v-for=\"p in presets\" :key=\"p.label\" variant=\"outline\" @click=\"applyPreset(p)\">\n                {{ p.label }}\n              </EButton>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n      </PopoverRoot>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  .e-cal-presets {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-2);\n    margin-top: var(--e-space-3);\n    padding-top: var(--e-space-3);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-rangefield .e-input {\n    flex: 1 1 5rem;\n  }\n\n  .e-range-sep {\n    flex: none;\n    font: 500 var(--e-text-sm) / 1 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ERangePicker.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createVNode","_createElementVNode","_withDirectives","_vModelText","_toDisplayString","_createElementBlock","_createCommentVNode","EIcon","ECalendar","_Fragment","_renderList","EButton","_createTextVNode","EIcon_default","EButton_default","ECalendar_default","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","ERangePicker_vue_vue_type_script_setup_true_lang_default","\"start\"","\"startModifiers\"","\"end\"","\"endModifiers\"","\"open\"","\"openModifiers\"","__expose","props","__props","start","useModel","end","t","useMessages","config","useConfig","loc","useLocale","portal","usePortalTarget","attrs","useFieldAttrs","open","shown","computed","quiet","useQuietFocus","el","trigger","startText","ref","endText","typedError","draft","calendar","startInput","watch","isOpen","shownError","presets","today","startOfDay","addDays","setRange","r","outOfBounds","compareDays","d","commitText","a","b","bad","onRange","applyPreset","p","onOpenFocus","nextTick","onCloseFocus","onEscape","onKey","openBlock","createBlock","mergeProps","unref","withCtx","createVNode","PopoverRoot","_cache","$event","PopoverAnchor","createElementVNode","field","withDirectives","vModelText","toDisplayString","createElementBlock","isoDate","createCommentVNode","PopoverTrigger","PopoverPortal","PopoverContent","Fragment","renderList","createTextVNode"],"sources":["../../../src/components/RangePicker/ERangePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from \"vue\";\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from \"reka-ui\";\nimport EButton from \"../Button/EButton.vue\";\nimport ECalendar from \"../Calendar/ECalendar.vue\";\nimport type { CalendarRange } from \"../Calendar/ECalendar.vue\";\nimport EField from \"../Field/EField.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { addDays, compareDays, isoDate, startOfDay } from \"../Calendar/dates.js\";\nimport { useConfig, useMessages, usePortalTarget } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useQuietFocus } from \"../Select/quietFocus.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\nimport \"../DatePicker/picker.css\";\n\nexport interface RangePreset {\n  /** The button text, such as \"Last 7 days\". */\n  label: string;\n  /** The span the button chooses. */\n  get: () => { start: Date; end: Date };\n}\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. It also names the group. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint and marks both boxes invalid. A typed span that cannot be used shows its own error. */\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  /** Disables both boxes and the button. */\n  disabled?: boolean;\n  /** The earliest date that can be chosen or typed. */\n  min?: Date;\n  /** The latest date that can be chosen or typed. */\n  max?: Date;\n  /** Submits the first date as `YYYY-MM-DD` with a form, through a hidden input. */\n  startName?: string;\n  /** Submits the last date as `YYYY-MM-DD` with a form, through a hidden input. */\n  endName?: string;\n  /** Buttons under the calendar; one sets the span and closes. @default Last 7 days, Last 30 days, This month */\n  presets?: RangePreset[];\n  /** The id of the start box; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The first date of the span. */\nconst start = defineModel<Date | null>(\"start\", { default: null });\n/** The last date of the span. */\nconst end = defineModel<Date | null>(\"end\", { default: null });\n\nconst t = useMessages();\nconst config = useConfig();\nconst loc = useLocale();\nconst portal = usePortalTarget();\nconst attrs = useFieldAttrs();\n\n/** Whether the calendar is open. A disabled field never opens. */\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst shown = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(shown, (el) => !!el.closest(\".e-calpanel, .e-combo\"));\nconst trigger = { onClick: quiet.intent, onKeydown: quiet.intent };\n\nconst startText = ref(loc.formatDate(start.value));\nconst endText = ref(loc.formatDate(end.value));\nconst typedError = ref(\"\");\nconst draft = ref<CalendarRange>({ start: start.value, end: end.value });\nconst calendar = ref<InstanceType<typeof ECalendar> | null>(null);\nconst startInput = ref<HTMLInputElement | null>(null);\n\nwatch([() => start.value?.getTime(), () => end.value?.getTime(), () => config.locale], () => {\n  startText.value = loc.formatDate(start.value);\n  endText.value = loc.formatDate(end.value);\n});\nwatch(open, (isOpen) => {\n  if (isOpen) draft.value = { start: start.value, end: end.value };\n});\n\nconst shownError = computed(() => props.error || typedError.value);\n\nconst presets = computed<RangePreset[]>(() => {\n  if (props.presets) return props.presets;\n  const today = startOfDay(new Date());\n  return [\n    { label: t(\"last7\"), get: () => ({ start: addDays(today, -6), end: today }) },\n    { label: t(\"last30\"), get: () => ({ start: addDays(today, -29), end: today }) },\n    {\n      label: t(\"thisMonth\"),\n      get: () => ({ start: new Date(today.getFullYear(), today.getMonth(), 1, 12), end: today }),\n    },\n  ];\n});\n\nfunction setRange(r: { start: Date | null; end: Date | null }) {\n  start.value = r.start;\n  end.value = r.end;\n  startText.value = loc.formatDate(r.start);\n  endText.value = loc.formatDate(r.end);\n  typedError.value = \"\";\n}\n\nconst outOfBounds = (d: Date) =>\n  (!!props.min && compareDays(d, props.min) < 0) || (!!props.max && compareDays(d, props.max) > 0);\n\nfunction commitText() {\n  const a = startText.value.trim() ? loc.parseDate(startText.value) : null;\n  const b = endText.value.trim() ? loc.parseDate(endText.value) : null;\n  if ((startText.value.trim() && !a) || (endText.value.trim() && !b)) {\n    typedError.value = t(\"datesError\", { format: loc.dateFormatLabel() });\n    return;\n  }\n  const bad = [a, b].find((d) => d && outOfBounds(d));\n  if (bad) {\n    typedError.value = t(\"dateBetween\", {\n      min: loc.formatDate(props.min || bad),\n      max: loc.formatDate(props.max || bad),\n    });\n    return;\n  }\n  if (a && b && compareDays(b, a) < 0) {\n    typedError.value = t(\"endBeforeStart\");\n    return;\n  }\n  setRange({ start: a, end: b });\n}\n\nfunction onRange(r: CalendarRange) {\n  draft.value = r;\n  if (r.start && r.end) {\n    setRange(r);\n    open.value = false;\n  }\n}\nfunction applyPreset(p: RangePreset) {\n  setRange(p.get());\n  open.value = false;\n}\n\nfunction onOpenFocus(e: Event) {\n  e.preventDefault();\n  if (!quiet.personOpened()) return;\n  void nextTick(() => calendar.value?.focusDay());\n}\nfunction onCloseFocus(e: Event) {\n  if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction onEscape(e: KeyboardEvent) {\n  if (calendar.value && calendar.value.view !== \"days\") e.preventDefault();\n}\nfunction onKey(e: KeyboardEvent) {\n  if (e.key === \"Enter\") commitText();\n  else if (e.key === \"ArrowDown\" && e.altKey && !props.disabled) {\n    e.preventDefault();\n    quiet.intent();\n    open.value = true;\n  }\n}\n\ndefineExpose({\n  input: startInput,\n  focus: () => startInput.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"shownError\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <PopoverRoot :open=\"shown\" @update:open=\"open = $event\">\n        <PopoverAnchor as-child>\n          <div\n            v-bind=\"attrs.input()\"\n            class=\"e-input-wrap e-combo e-rangefield\"\n            role=\"group\"\n            :aria-labelledby=\"`${field.id}-label`\"\n            :data-invalid=\"shownError ? '' : undefined\"\n            :data-disabled=\"disabled ? '' : undefined\"\n          >\n            <input\n              :id=\"field.id\"\n              ref=\"startInput\"\n              v-model=\"startText\"\n              class=\"e-input e-combo-input\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              :placeholder=\"t('startDate')\"\n              :aria-label=\"t('startDate')\"\n              :disabled=\"disabled\"\n              :required=\"required\"\n              :aria-invalid=\"field.ariaInvalid\"\n              :aria-describedby=\"field.ariaDescribedby\"\n              @input=\"typedError = ''\"\n              @blur=\"commitText\"\n              @keydown=\"onKey\"\n            />\n            <span class=\"e-range-sep\" aria-hidden=\"true\">{{ t(\"to\") }}</span>\n            <input\n              v-model=\"endText\"\n              class=\"e-input e-combo-input\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              :placeholder=\"t('endDate')\"\n              :aria-label=\"t('endDate')\"\n              :disabled=\"disabled\"\n              :required=\"required\"\n              :aria-invalid=\"field.ariaInvalid\"\n              :aria-describedby=\"field.ariaDescribedby\"\n              @input=\"typedError = ''\"\n              @blur=\"commitText\"\n              @keydown=\"onKey\"\n            />\n            <input v-if=\"startName\" type=\"hidden\" :name=\"startName\" :value=\"isoDate(start)\" />\n            <input v-if=\"endName\" type=\"hidden\" :name=\"endName\" :value=\"isoDate(end)\" />\n            <PopoverTrigger as-child v-bind=\"trigger\">\n              <button type=\"button\" class=\"e-combo-btn\" :aria-label=\"t('chooseDates')\" :disabled=\"disabled\">\n                <EIcon name=\"calendar\" />\n              </button>\n            </PopoverTrigger>\n          </div>\n        </PopoverAnchor>\n        <PopoverPortal :to=\"portal\">\n          <PopoverContent\n            class=\"e-calpanel e-root\"\n            :aria-label=\"t('chooseDates')\"\n            :dir=\"config.dir ?? undefined\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"6\"\n            :collision-padding=\"8\"\n            @open-auto-focus=\"onOpenFocus\"\n            @close-auto-focus=\"onCloseFocus\"\n            @escape-key-down=\"onEscape\"\n          >\n            <ECalendar\n              ref=\"calendar\"\n              mode=\"range\"\n              :start=\"draft.start\"\n              :end=\"draft.end\"\n              :min=\"min\"\n              :max=\"max\"\n              :footer=\"false\"\n              @range-change=\"onRange\"\n            />\n            <div class=\"e-cal-presets\">\n              <EButton v-for=\"p in presets\" :key=\"p.label\" variant=\"outline\" @click=\"applyPreset(p)\">\n                {{ p.label }}\n              </EButton>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n      </PopoverRoot>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  .e-cal-presets {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-2);\n    margin-top: var(--e-space-3);\n    padding-top: var(--e-space-3);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-rangefield .e-input {\n    flex: 1 1 5rem;\n  }\n\n  .e-range-sep {\n    flex: none;\n    font: 500 var(--e-text-sm) / 1 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/SearchBar/ESearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESearchBar.js","names":["_sfc_main","ESearchBar_vue_vue_type_script_setup_true_lang_default","ESearchBar_default"],"sources":["../../../src/components/SearchBar/ESearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { ref } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** What screen readers call the box. Default \"Search\". */\n    label?: string;\n    /** Say what can be searched, briefly. Default \"Search\". */\n    placeholder?: string;\n    /** The text on the button. Default \"Search\". */\n    action?: string;\n    /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */\n    hideAction?: boolean;\n    /** The clear button, shown when there is text. On by default. */\n    clearable?: boolean;\n    /** The name submitted with a form. Default `q`. */\n    name?: string;\n    /** Search is unavailable. Say why in a Notice. */\n    disabled?: boolean;\n  }>(),\n  { clearable: true },\n);\n\nconst emit = defineEmits<{\n  /** The person pressed Enter or the button. */\n  submit: [value: string];\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst box = ref<HTMLInputElement | null>(null);\n\nfunction clear() {\n  model.value = \"\";\n  box.value?.focus();\n}\n\ndefineExpose({\n  input: box,\n  focus: () => box.value?.focus(),\n});\n</script>\n\n<template>\n  <form\n    class=\"e-search\"\n    v-bind=\"attrs.wrapper()\"\n    role=\"search\"\n    :aria-label=\"label || t('search')\"\n    @submit.prevent=\"emit('submit', model)\"\n  >\n    <span class=\"e-search-lead\"><EIcon name=\"search\" /></span>\n    <input\n      ref=\"box\"\n      v-bind=\"attrs.input()\"\n      class=\"e-input\"\n      :name=\"name || 'q'\"\n      :aria-label=\"label || t('search')\"\n      :placeholder=\"placeholder || t('search')\"\n      :value=\"model\"\n      :disabled=\"disabled\"\n      @input=\"model = ($event.target as HTMLInputElement).value\"\n    />\n    <button\n      v-if=\"clearable && model && !disabled\"\n      type=\"button\"\n      class=\"e-search-clear\"\n      :aria-label=\"t('clear')\"\n      @mousedown.prevent\n      @click=\"clear\"\n    >\n      <EIcon name=\"x\" />\n    </button>\n    <EButton v-if=\"!hideAction\" type=\"submit\" :disabled=\"disabled\">{{ action || t(\"search\") }}</EButton>\n  </form>\n</template>\n\n<style>\n@layer e.controls {\n  .e-search {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-1) 0 var(--e-space-2);\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-well);\n    transition: border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search:hover {\n    border-color: var(--e-ink);\n  }\n\n  .e-search .e-btn {\n    position: relative;\n    height: calc(var(--e-control-height) - 6px);\n    padding: 0 var(--e-space-3);\n    font-size: var(--e-text-md);\n  }\n\n  .e-search .e-btn::after {\n    content: \"\";\n    position: absolute;\n    inset: -3px;\n  }\n\n  .e-search-clear {\n    display: inline-grid;\n    place-items: center;\n    position: relative;\n    flex: none;\n    width: calc(var(--e-control-height) - 9px);\n    height: calc(var(--e-control-height) - 9px);\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search-clear::after {\n    content: \"\";\n    position: absolute;\n    inset: -5px;\n  }\n\n  .e-search-clear:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 1px var(--e-wash-ring);\n  }\n\n  .e-search-clear:active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 1.5px var(--e-ink);\n  }\n\n  .e-search-clear: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-search-lead {\n    display: grid;\n    place-items: center;\n    flex: none;\n    width: 28px;\n    color: var(--e-muted);\n  }\n\n  .e-search .e-input {\n    flex: 1;\n    text-overflow: ellipsis;\n    height: 100%;\n    border: 0;\n    background: transparent;\n    box-shadow: none;\n    font-size: var(--e-text-md);\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-search .e-input:hover,\n  .e-search .e-input:focus {\n    border: 0;\n    background: transparent;\n  }\n\n  .e-search .e-input:focus-visible {\n    outline: none;\n  }\n\n  .e-search:focus-within {\n    border-color: var(--e-focus-field);\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-search {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-search {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESearchBar.js","names":["_sfc_main","ESearchBar_vue_vue_type_script_setup_true_lang_default","ESearchBar_default"],"sources":["../../../src/components/SearchBar/ESearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { ref } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** Names the box and the search landmark; there is no visible label. @default \"Search\" */\n    label?: string;\n    /** Say what can be searched, briefly. @default \"Search\" */\n    placeholder?: string;\n    /** The text on the button. @default \"Search\" */\n    action?: string;\n    /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */\n    hideAction?: boolean;\n    /** The clear button, shown when there is text. On by default. */\n    clearable?: boolean;\n    /** The name submitted with a form. @default \"q\" */\n    name?: string;\n    /** Disables the box and button. Say why in an `ENotice`. */\n    disabled?: boolean;\n  }>(),\n  { clearable: true },\n);\n\nconst emit = defineEmits<{\n  /** The person pressed Enter or the button. */\n  submit: [value: string];\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst box = ref<HTMLInputElement | null>(null);\n\nfunction clear() {\n  model.value = \"\";\n  box.value?.focus();\n}\n\ndefineExpose({\n  input: box,\n  focus: () => box.value?.focus(),\n});\n</script>\n\n<template>\n  <form\n    class=\"e-search\"\n    v-bind=\"attrs.wrapper()\"\n    role=\"search\"\n    :aria-label=\"label || t('search')\"\n    @submit.prevent=\"emit('submit', model)\"\n  >\n    <span class=\"e-search-lead\"><EIcon name=\"search\" /></span>\n    <input\n      ref=\"box\"\n      v-bind=\"attrs.input()\"\n      class=\"e-input\"\n      :name=\"name || 'q'\"\n      :aria-label=\"label || t('search')\"\n      :placeholder=\"placeholder || t('search')\"\n      :value=\"model\"\n      :disabled=\"disabled\"\n      @input=\"model = ($event.target as HTMLInputElement).value\"\n    />\n    <button\n      v-if=\"clearable && model && !disabled\"\n      type=\"button\"\n      class=\"e-search-clear\"\n      :aria-label=\"t('clear')\"\n      @mousedown.prevent\n      @click=\"clear\"\n    >\n      <EIcon name=\"x\" />\n    </button>\n    <EButton v-if=\"!hideAction\" type=\"submit\" :disabled=\"disabled\">{{ action || t(\"search\") }}</EButton>\n  </form>\n</template>\n\n<style>\n@layer e.controls {\n  .e-search {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-1) 0 var(--e-space-2);\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n\n    --e-bc: var(--e-border-strong);\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-well);\n    transition: border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search:hover {\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-search .e-btn {\n    position: relative;\n    height: calc(var(--e-control-height) - 6px);\n    padding: 0 var(--e-space-3);\n    font-size: var(--e-text-md);\n  }\n\n  .e-search .e-btn::after {\n    content: \"\";\n    position: absolute;\n    inset: -3px;\n  }\n\n  .e-search-clear {\n    display: inline-grid;\n    place-items: center;\n    position: relative;\n    flex: none;\n    width: calc(var(--e-control-height) - 9px);\n    height: calc(var(--e-control-height) - 9px);\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search-clear::after {\n    content: \"\";\n    position: absolute;\n    inset: -5px;\n  }\n\n  .e-search-clear:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-wash-ring);\n  }\n\n  .e-search-clear:active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n  }\n\n  .e-search-clear: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-search-lead {\n    display: grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-space-8);\n    color: var(--e-muted);\n  }\n\n  .e-search .e-input {\n    flex: 1;\n    text-overflow: ellipsis;\n    height: 100%;\n    border: 0;\n    outline: 0;\n    background: transparent;\n    box-shadow: none;\n    font-size: var(--e-text-md);\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-search .e-input:hover,\n  .e-search .e-input:focus {\n    border: 0;\n    background: transparent;\n  }\n\n  .e-search .e-input:focus-visible {\n    outline: none;\n  }\n\n  .e-search:focus-within {\n    border-color: var(--e-focus-field);\n\n    --e-bc: var(--e-focus-field);\n\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-search {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-search {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/SearchBar/ESearchBar.vue.d.ts

@@ -1,20 +1,21 @@
 type __VLS_Props = {
-    /** What screen readers call the box. Default "Search". */
+    /** Names the box and the search landmark; there is no visible label. @default "Search" */
     label?: string;
-    /** Say what can be searched, briefly. Default "Search". */
+    /** Say what can be searched, briefly. @default "Search" */
     placeholder?: string;
-    /** The text on the button. Default "Search". */
+    /** The text on the button. @default "Search" */
     action?: string;
     /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */
     hideAction?: boolean;
     /** The clear button, shown when there is text. On by default. */
     clearable?: boolean;
-    /** The name submitted with a form. Default `q`. */
+    /** The name submitted with a form. @default "q" */
     name?: string;
-    /** Search is unavailable. Say why in a Notice. */
+    /** Disables the box and button. Say why in an `ENotice`. */
     disabled?: boolean;
 };
 type __VLS_ModelProps = {
+    /** The text. */
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
@@ -22,11 +23,11 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
     input: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
     focus: () => void | undefined;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
     submit: (value: string) => any;
+    "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onSubmit?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     clearable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;