@rotki/ui-library 3.2.0 → 3.3.0

package/dist/components/calendar/state.js.map

@@ -1 +1 @@
-{"version":3,"file":"state.js","names":[],"sources":["../../../src/components/calendar/state.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, Ref } from 'vue';\n\nexport const CalendarStateSymbol: InjectionKey<RuiCalendarState> = Symbol.for('rui:calendar');\n\nexport interface RuiCalendarState {\n  viewMonth: Ref<number>;\n  viewYear: Ref<number>;\n  selectedDate: Ref<Date | undefined>;\n  maxDate: ComputedRef<Date | undefined>;\n  minDate: ComputedRef<Date | undefined>;\n  isDark: ComputedRef<boolean>;\n  allowEmpty: boolean;\n}\n\nexport interface MonthYearSelection {\n  month: number;\n  year: number;\n}\n\nexport function getDaysOfWeek(locale: Intl.LocalesArgument = 'en-US', format: 'narrow' | 'short' = 'narrow'): string[] {\n  const daysOfWeek: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    const date = new Date(2021, 0, 3 + i); // Jan 3, 2021 was a Sunday\n    const dayName = new Intl.DateTimeFormat(locale, { weekday: format }).format(date);\n    daysOfWeek.push(format === 'narrow' ? dayName : dayName.charAt(0));\n  }\n  return daysOfWeek;\n}\n\nexport function getShortMonthNames(locale: Intl.LocalesArgument = 'en-US'): string[] {\n  const monthNames: string[] = [];\n  for (let month = 0; month < 12; month++) {\n    const date = new Date(2021, month, 1);\n    const monthName = new Intl.DateTimeFormat(locale, { month: 'short' }).format(date);\n    monthNames.push(monthName);\n  }\n  return monthNames;\n}\n"],"mappings":";AAEA,IAAa,sBAAsD,OAAO,IAAI,cAAc;AAiB5F,SAAgB,cAAc,SAA+B,SAAS,SAA6B,UAAoB;CACrH,MAAM,aAAuB,CAAC;CAC9B,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK;EAC1B,MAAM,OAAO,IAAI,KAAK,MAAM,GAAG,IAAI,CAAC;EACpC,MAAM,UAAU,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,OAAO,IAAI;EAChF,WAAW,KAAK,WAAW,WAAW,UAAU,QAAQ,OAAO,CAAC,CAAC;CACnE;CACA,OAAO;AACT;AAEA,SAAgB,mBAAmB,SAA+B,SAAmB;CACnF,MAAM,aAAuB,CAAC;CAC9B,KAAK,IAAI,QAAQ,GAAG,QAAQ,IAAI,SAAS;EACvC,MAAM,OAAO,IAAI,KAAK,MAAM,OAAO,CAAC;EACpC,MAAM,YAAY,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,OAAO,IAAI;EACjF,WAAW,KAAK,SAAS;CAC3B;CACA,OAAO;AACT"}
+{"version":3,"file":"state.js","names":[],"sources":["../../../src/components/calendar/state.ts"],"sourcesContent":["import { type ComputedRef, inject, type InjectionKey, type Ref } from 'vue';\n\nexport const CalendarStateSymbol: InjectionKey<RuiCalendarState> = Symbol.for('rui:calendar');\n\nexport interface RuiCalendarState {\n  viewMonth: Ref<number>;\n  viewYear: Ref<number>;\n  selectedDate: Ref<Date | undefined>;\n  maxDate: ComputedRef<Date | undefined>;\n  minDate: ComputedRef<Date | undefined>;\n  isDark: ComputedRef<boolean>;\n  allowEmpty: boolean;\n}\n\n/**\n * The state RuiCalendar provides to its grid, header and menu.\n *\n * @returns the view, selection and limits of the enclosing calendar\n * @throws when used outside a RuiCalendar\n */\nexport function useCalendarState(): RuiCalendarState {\n  const state = inject(CalendarStateSymbol, undefined);\n  if (!state)\n    throw new Error('useCalendarState must be used within a RuiCalendar');\n\n  return state;\n}\n\nexport interface MonthYearSelection {\n  month: number;\n  year: number;\n}\n\nexport function getDaysOfWeek(locale: Intl.LocalesArgument = 'en-US', format: 'narrow' | 'short' = 'narrow'): string[] {\n  const daysOfWeek: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    const date = new Date(2021, 0, 3 + i); // Jan 3, 2021 was a Sunday\n    const dayName = new Intl.DateTimeFormat(locale, { weekday: format }).format(date);\n    daysOfWeek.push(format === 'narrow' ? dayName : dayName.charAt(0));\n  }\n  return daysOfWeek;\n}\n\nexport function getShortMonthNames(locale: Intl.LocalesArgument = 'en-US'): string[] {\n  const monthNames: string[] = [];\n  for (let month = 0; month < 12; month++) {\n    const date = new Date(2021, month, 1);\n    const monthName = new Intl.DateTimeFormat(locale, { month: 'short' }).format(date);\n    monthNames.push(monthName);\n  }\n  return monthNames;\n}\n"],"mappings":";;AAEA,IAAa,sBAAsD,OAAO,IAAI,cAAc;;;;;;;AAkB5F,SAAgB,mBAAqC;CACnD,MAAM,QAAQ,OAAO,qBAAqB,KAAA,CAAS;CACnD,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,oDAAoD;CAEtE,OAAO;AACT;AAOA,SAAgB,cAAc,SAA+B,SAAS,SAA6B,UAAoB;CACrH,MAAM,aAAuB,CAAC;CAC9B,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK;EAC1B,MAAM,OAAO,IAAI,KAAK,MAAM,GAAG,IAAI,CAAC;EACpC,MAAM,UAAU,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,OAAO,IAAI;EAChF,WAAW,KAAK,WAAW,WAAW,UAAU,QAAQ,OAAO,CAAC,CAAC;CACnE;CACA,OAAO;AACT;AAEA,SAAgB,mBAAmB,SAA+B,SAAmB;CACnF,MAAM,aAAuB,CAAC;CAC9B,KAAK,IAAI,QAAQ,GAAG,QAAQ,IAAI,SAAS;EACvC,MAAM,OAAO,IAAI,KAAK,MAAM,OAAO,CAAC;EACpC,MAAM,YAAY,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,OAAO,IAAI;EACjF,WAAW,KAAK,SAAS;CAC3B;CACA,OAAO;AACT"}

package/dist/components/cards/RuiCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCard.js","names":["_sfc_main"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn } from '@/utils/tv';\nimport { cardStyles } from './card-styles';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  /**\n   * Drops the content's top padding when a header renders, so the header's bottom padding is the\n   * only gap between them (16px, 12px when `dense`) instead of both paddings stacked. Ignored with\n   * `divide`, which draws a border there.\n   */\n  tightHeaderGap?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  tightHeaderGap = false,\n  classNames,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\n// only under a header (built-in or `custom-header`), and not with `divide`, whose border needs space on both sides\nconst underHeader = computed<boolean>(() => tightHeaderGap && !divide && (get(hasHeadContent) || !!slots['custom-header']));\n\nconst ui = computed<ReturnType<typeof cardStyles>>(() => cardStyles({\n  variant: cardVariant,\n  rounded,\n  divide,\n  dense,\n  padding: get(contentPadding),\n  underHeader: get(underHeader),\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCard.js","names":["_sfc_main"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed, type HTMLAttributes } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn } from '@/utils/tv';\nimport { cardStyles } from './card-styles';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  /**\n   * Drops the content's top padding when a header renders, so the header's bottom padding is the\n   * only gap between them (16px, 12px when `dense`) instead of both paddings stacked. Ignored with\n   * `divide`, which draws a border there.\n   */\n  tightHeaderGap?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  tightHeaderGap = false,\n  classNames,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\n// only under a header (built-in or `custom-header`), and not with `divide`, whose border needs space on both sides\nconst underHeader = computed<boolean>(() => tightHeaderGap && !divide && (get(hasHeadContent) || !!slots['custom-header']));\n\nconst ui = computed<ReturnType<typeof cardStyles>>(() => cardStyles({\n  variant: cardVariant,\n  rounded,\n  divide,\n  dense,\n  padding: get(contentPadding),\n  underHeader: get(underHeader),\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/cards/RuiCard.vue.d.ts

@@ -1,4 +1,5 @@
 import type { VueClassValue } from '../../types/class-value.js';
+import { type HTMLAttributes } from 'vue';
 export interface RuiCardClassNames {
     root?: VueClassValue;
     content?: VueClassValue;
@@ -19,6 +20,7 @@ export interface Props {
     tightHeaderGap?: boolean;
     classNames?: RuiCardClassNames;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_Slots = {
     'image'?: () => any;
     'custom-header'?: () => any;
@@ -28,7 +30,7 @@ type __VLS_Slots = {
     'default'?: () => any;
     'footer'?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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;

package/dist/components/cards/RuiCard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCard.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createBlock","RuiCardHeader","_createSlots","_withCtx"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn } from '@/utils/tv';\nimport { cardStyles } from './card-styles';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  /**\n   * Drops the content's top padding when a header renders, so the header's bottom padding is the\n   * only gap between them (16px, 12px when `dense`) instead of both paddings stacked. Ignored with\n   * `divide`, which draws a border there.\n   */\n  tightHeaderGap?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  tightHeaderGap = false,\n  classNames,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\n// only under a header (built-in or `custom-header`), and not with `divide`, whose border needs space on both sides\nconst underHeader = computed<boolean>(() => tightHeaderGap && !divide && (get(hasHeadContent) || !!slots['custom-header']));\n\nconst ui = computed<ReturnType<typeof cardStyles>>(() => cardStyles({\n  variant: cardVariant,\n  rounded,\n  divide,\n  dense,\n  padding: get(contentPadding),\n  underHeader: get(underHeader),\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQC,SAAA;EAUd,MAAM,UAAU,eAA+B,SAAS;EAExD,MAAM,kBAAkB,kBAAkB,OAAO;EAEjD,MAAM,iBAAiB,eAAwB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,SAAS;EAElF,MAAM,iBAAiB,eAA4C;GACjE,IAAI,QAAA,WACF,OAAO;GACT,OAAO,QAAA,QAAQ,UAAU;EAC3B,CAAC;EAGD,MAAM,cAAc,eAAwB,QAAA,kBAAkB,CAAC,QAAA,WAAW,IAAI,cAAc,KAAK,CAAC,CAAC,MAAM,iBAAiB;EAE1H,MAAM,KAAK,eAA8C,WAAW;GAClE,SAAS,QAAA;GACT,SAAM,QAAA;GACN,QAAK,QAAA;GACL,OAAI,QAAA;GACJ,SAAS,IAAI,cAAc;GAC3B,aAAa,IAAI,WAAW;EAC9B,CAAC,CAAC;;GAIA,OAAAC,UAAA,GAAAC,mBAoDM,OApDNC,WAoDM,EAnDH,OAAO,GAAA,MAAG,KAAI,EAAA,OAAUC,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQL,KAAAA,OAAO,KAAK,EAAA,CAAA,EAC/CA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA;IAG7B,MAAM,SADdE,UAAA,GAAAC,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAKG,eAAE,GAAA,MAAG,MAAK,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,KAAK,EAAA,CAAA,CAAA;IAE9CE,GAAAA,CAAAA,WAAqB,KAAA,QAAA,OAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEvBA,WAwBO,KAAA,QAAA,iBAAA,CAAA,SAAA,CAtBG,eAAA,SADRL,UAAA,GAAAO,YAsBgBC,uBAAA;;KApBb,OAAO,QAAA;;KAGA,MAAM,UAAA;MACX,MAAA;MAED,IAAAE,cAAuB,CAAvBL,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;;KAGjB,MAAM,SAAA;MACX,MAAA;MAED,IAAAK,cAAsB,CAAtBL,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA;;;KAGhB,MAAM,YAAA;MACX,MAAA;MAED,IAAAK,cAAyB,CAAzBL,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA;;;;IAKvB,MAAM,WADdL,UAAA,GAAAC,mBAQM,OAAA;;KANA,SAAA;KAAJ,KAAI;KACJ,WAAQ;KACP,UAAUE,MAAA,eAAA;KACV,OAAKC,eAAE,GAAA,MAAG,QAAO,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA;IAElDE,GAAAA,CAAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;IAGF,MAAM,UADdL,UAAA,GAAAC,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAKG,eAAE,GAAA,MAAG,OAAM,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,MAAM,EAAA,CAAA,CAAA;IAEhDE,GAAAA,CAAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}
+{"version":3,"file":"RuiCard.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createBlock","RuiCardHeader","_createSlots","_withCtx"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed, type HTMLAttributes } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn } from '@/utils/tv';\nimport { cardStyles } from './card-styles';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  /**\n   * Drops the content's top padding when a header renders, so the header's bottom padding is the\n   * only gap between them (16px, 12px when `dense`) instead of both paddings stacked. Ignored with\n   * `divide`, which draws a border there.\n   */\n  tightHeaderGap?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  tightHeaderGap = false,\n  classNames,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\n// only under a header (built-in or `custom-header`), and not with `divide`, whose border needs space on both sides\nconst underHeader = computed<boolean>(() => tightHeaderGap && !divide && (get(hasHeadContent) || !!slots['custom-header']));\n\nconst ui = computed<ReturnType<typeof cardStyles>>(() => cardStyles({\n  variant: cardVariant,\n  rounded,\n  divide,\n  dense,\n  padding: get(contentPadding),\n  underHeader: get(underHeader),\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQC,SAAA;EAUd,MAAM,UAAU,eAA+B,SAAS;EAExD,MAAM,kBAAkB,kBAAkB,OAAO;EAEjD,MAAM,iBAAiB,eAAwB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,SAAS;EAElF,MAAM,iBAAiB,eAA4C;GACjE,IAAI,QAAA,WACF,OAAO;GACT,OAAO,QAAA,QAAQ,UAAU;EAC3B,CAAC;EAGD,MAAM,cAAc,eAAwB,QAAA,kBAAkB,CAAC,QAAA,WAAW,IAAI,cAAc,KAAK,CAAC,CAAC,MAAM,iBAAiB;EAE1H,MAAM,KAAK,eAA8C,WAAW;GAClE,SAAS,QAAA;GACT,SAAM,QAAA;GACN,QAAK,QAAA;GACL,OAAI,QAAA;GACJ,SAAS,IAAI,cAAc;GAC3B,aAAa,IAAI,WAAW;EAC9B,CAAC,CAAC;;GAIA,OAAAC,UAAA,GAAAC,mBAoDM,OApDNC,WAoDM,EAnDH,OAAO,GAAA,MAAG,KAAI,EAAA,OAAUC,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQL,KAAAA,OAAO,KAAK,EAAA,CAAA,EAC/CA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA;IAG7B,MAAM,SADdE,UAAA,GAAAC,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAKG,eAAE,GAAA,MAAG,MAAK,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,KAAK,EAAA,CAAA,CAAA;IAE9CE,GAAAA,CAAAA,WAAqB,KAAA,QAAA,OAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEvBA,WAwBO,KAAA,QAAA,iBAAA,CAAA,SAAA,CAtBG,eAAA,SADRL,UAAA,GAAAO,YAsBgBC,uBAAA;;KApBb,OAAO,QAAA;;KAGA,MAAM,UAAA;MACX,MAAA;MAED,IAAAE,cAAuB,CAAvBL,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;;KAGjB,MAAM,SAAA;MACX,MAAA;MAED,IAAAK,cAAsB,CAAtBL,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA;;;KAGhB,MAAM,YAAA;MACX,MAAA;MAED,IAAAK,cAAyB,CAAzBL,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA;;;;IAKvB,MAAM,WADdL,UAAA,GAAAC,mBAQM,OAAA;;KANA,SAAA;KAAJ,KAAI;KACJ,WAAQ;KACP,UAAUE,MAAA,eAAA;KACV,OAAKC,eAAE,GAAA,MAAG,QAAO,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA;IAElDE,GAAAA,CAAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;IAGF,MAAM,UADdL,UAAA,GAAAC,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAKG,eAAE,GAAA,MAAG,OAAM,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,MAAM,EAAA,CAAA,CAAA;IAEhDE,GAAAA,CAAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/components/cards/RuiCardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCardHeader.js","names":["_sfc_main"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cardHeaderStyles } from './card-header-styles';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof cardHeaderStyles>>(() => cardHeaderStyles({ dense }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCardHeader.js","names":["_sfc_main"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { cardHeaderStyles } from './card-header-styles';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof cardHeaderStyles>>(() => cardHeaderStyles({ dense }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/cards/RuiCardHeader.vue.d.ts

@@ -1,12 +1,14 @@
+import type { HTMLAttributes } from 'vue';
 export interface Props {
     dense?: boolean;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_Slots = {
     prepend?: () => any;
     header?: () => any;
     subheader?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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;

package/dist/components/cards/RuiCardHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCardHeader.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cardHeaderStyles } from './card-header-styles';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof cardHeaderStyles>>(() => cardHeaderStyles({ dense }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQC,SAAA;EAMd,MAAM,KAAK,eAAoD,iBAAiB,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;;GAIxF,OAAAC,UAAA,GAAAC,mBA2BM,OA3BNC,WA2BM,EA1BH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EACPL,GAAAA,KAAAA,MAAM,GAAA,CAGN,MAAM,WADdE,UAAA,GAAAC,mBAMM,OAAA;;IAJJ,WAAQ;IACP,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;GAElBE,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEzBE,mBAeM,OAfN,YAeM,CAbI,MAAM,UADdP,UAAA,GAAAC,mBAMK,MAAA;;IAJH,WAAQ;IACP,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;GAEjBE,GAAAA,CAAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGhB,MAAM,aADdL,UAAA,GAAAC,mBAMI,KANJ,YAMI,CADFI,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"RuiCardHeader.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { cardHeaderStyles } from './card-header-styles';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof cardHeaderStyles>>(() => cardHeaderStyles({ dense }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQC,SAAA;EAMd,MAAM,KAAK,eAAoD,iBAAiB,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;;GAIxF,OAAAC,UAAA,GAAAC,mBA2BM,OA3BNC,WA2BM,EA1BH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EACPL,GAAAA,KAAAA,MAAM,GAAA,CAGN,MAAM,WADdE,UAAA,GAAAC,mBAMM,OAAA;;IAJJ,WAAQ;IACP,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;GAElBE,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEzBE,mBAeM,OAfN,YAeM,CAbI,MAAM,UADdP,UAAA,GAAAC,mBAMK,MAAA;;IAJH,WAAQ;IACP,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;GAEjBE,GAAAA,CAAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGhB,MAAM,aADdL,UAAA,GAAAC,mBAMI,KANJ,YAMI,CADFI,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}

package/dist/components/chips/RuiChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiChip.js","names":["_sfc_main"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn } from '@/utils/tv';\nimport { chipStyles } from './chip-styles';\n\nexport interface RuiChipClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: ChipSize;\n  variant?: ChipVariant;\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  /**\n   * Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n   * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n   */\n  closeUnfocusable?: boolean;\n  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = ChipSize.md,\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = ChipVariant.filled,\n  closeIcon = 'lu-x',\n  closeUnfocusable = false,\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\n  prepended: !!slots.prepend,\n  closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const s: Partial<StyleValue> = {};\n  if (bgColor)\n    s.backgroundColor = bgColor;\n  if (textColor)\n    s.color = textColor;\n  return s;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n\n/**\n * Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n *\n * @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n  if (!clickable || disabled || e.target !== get(root))\n    return;\n  if (e.key !== 'Enter' && e.key !== ' ')\n    return;\n\n  e.preventDefault();\n  get(root)?.click();\n}\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    :class=\"ui.root({ class: cn(classNames?.root) })\"\n    :style=\"style\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-disabled=\"disabled || undefined\"\n    :role=\"clickable ? 'button' : undefined\"\n    :tabindex=\"clickable && !disabled ? 0 : undefined\"\n    :aria-disabled=\"clickable && disabled ? true : undefined\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n    @keydown=\"onKeydown($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      aria-label=\"Remove\"\n      :tabindex=\"closeUnfocusable ? -1 : undefined\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiChip.js","names":["_sfc_main"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes, StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn } from '@/utils/tv';\nimport { chipStyles } from './chip-styles';\n\nexport interface RuiChipClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: ChipSize;\n  variant?: ChipVariant;\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  /**\n   * Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n   * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n   */\n  closeUnfocusable?: boolean;\n  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = ChipSize.md,\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = ChipVariant.filled,\n  closeIcon = 'lu-x',\n  closeUnfocusable = false,\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props | 'onClick'>>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\n  prepended: !!slots.prepend,\n  closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const s: Partial<StyleValue> = {};\n  if (bgColor)\n    s.backgroundColor = bgColor;\n  if (textColor)\n    s.color = textColor;\n  return s;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n\n/**\n * Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n *\n * @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n  if (!clickable || disabled || e.target !== get(root))\n    return;\n  if (e.key !== 'Enter' && e.key !== ' ')\n    return;\n\n  e.preventDefault();\n  get(root)?.click();\n}\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    :class=\"ui.root({ class: cn(classNames?.root) })\"\n    :style=\"style\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-disabled=\"disabled || undefined\"\n    :role=\"clickable ? 'button' : undefined\"\n    :tabindex=\"clickable && !disabled ? 0 : undefined\"\n    :aria-disabled=\"clickable && disabled ? true : undefined\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n    @keydown=\"onKeydown($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      aria-label=\"Remove\"\n      :tabindex=\"closeUnfocusable ? -1 : undefined\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/chips/RuiChip.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { ContextColorsType } from '../../consts/colors.js';
 import type { RuiIcons } from '../../icons/index.js';
 import type { VueClassValue } from '../../types/class-value.js';
@@ -24,14 +25,15 @@ export interface Props {
     textColor?: string;
     classNames?: RuiChipClassNames;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props | 'onClick'>;
 type __VLS_Slots = {
     prepend?: () => any;
     default?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (e: MouseEvent) => any;
     "click:close": () => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((e: MouseEvent) => any) | undefined;
     "onClick:close"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_withModifiers","_createVNode","RuiIcon"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn } from '@/utils/tv';\nimport { chipStyles } from './chip-styles';\n\nexport interface RuiChipClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: ChipSize;\n  variant?: ChipVariant;\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  /**\n   * Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n   * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n   */\n  closeUnfocusable?: boolean;\n  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = ChipSize.md,\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = ChipVariant.filled,\n  closeIcon = 'lu-x',\n  closeUnfocusable = false,\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\n  prepended: !!slots.prepend,\n  closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const s: Partial<StyleValue> = {};\n  if (bgColor)\n    s.backgroundColor = bgColor;\n  if (textColor)\n    s.color = textColor;\n  return s;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n\n/**\n * Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n *\n * @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n  if (!clickable || disabled || e.target !== get(root))\n    return;\n  if (e.key !== 'Enter' && e.key !== ' ')\n    return;\n\n  e.preventDefault();\n  get(root)?.click();\n}\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    :class=\"ui.root({ class: cn(classNames?.root) })\"\n    :style=\"style\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-disabled=\"disabled || undefined\"\n    :role=\"clickable ? 'button' : undefined\"\n    :tabindex=\"clickable && !disabled ? 0 : undefined\"\n    :aria-disabled=\"clickable && disabled ? true : undefined\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n    @keydown=\"onKeydown($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      aria-label=\"Remove\"\n      :tabindex=\"closeUnfocusable ? -1 : undefined\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDA,MAAM,OAAO;EAKb,MAAM,QAAQE,SAAA;EAKd,MAAM,OAAO,eAA+B,MAAM;EAElD,MAAM,KAAK,eAA8C,WAAW;GAClE,MAAG,QAAA;GACH,MAAG,QAAA;GACH,OAAI,QAAA;GACJ,SAAM,QAAA;GACN,UAAO,QAAA;GACP,WAAQ,QAAA;GACR,WAAW,CAAC,CAAC,MAAM;GACnB,WAAQ,QAAA;EACV,CAAC,CAAC;EAEF,MAAM,QAAQ,eAAoC;GAChD,MAAM,IAAyB,CAAC;GAChC,IAAI,QAAA,SACF,EAAE,kBAAkB,QAAA;GACtB,IAAI,QAAA,WACF,EAAE,QAAQ,QAAA;GACZ,OAAO;EACT,CAAC;EAED,SAAS,MAAM,GAAqB;GAClC,IAAI,CAAC,QAAA,aAAa,QAAA,UAChB;GAEF,KAAK,SAAS,CAAC;EACjB;;;;;;;EAQA,SAAS,UAAU,GAAwB;GACzC,IAAI,CAAC,QAAA,aAAa,QAAA,YAAY,EAAE,WAAW,IAAI,IAAI,GACjD;GACF,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KACjC;GAEF,EAAE,eAAe;GACjB,IAAI,IAAI,CAAC,EAAE,MAAM;EACnB;;GAIE,OAAAC,UAAA,GAAAC,mBAsCM,OAtCNC,WAsCM;IArCA,SAAA;IAAJ,KAAI;IACH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA;IAC3C,OAAOA,MAAA,KAAA;IACP,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,iBAAe,QAAA,YAAY,KAAA;IAC3B,MAAM,QAAA,YAAS,WAAc,KAAA;IAC7B,UAAU,QAAA,aAAS,CAAK,QAAA,WAAQ,IAAO,KAAA;IACvC,iBAAe,QAAA,aAAa,QAAA,WAAQ,OAAU,KAAA;GACvC,GAAAA,MAAA,UAAA,CAAU,CAACN,KAAAA,QAAM,CAAA,SAAA,CAAA,GAAA;IACxB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAM,MAAM;IACnB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;;IAGlBC,KAAAA,OAAO,WADfE,UAAA,GAAAC,mBAKM,OAAA;;KAHH,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IAElBE,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEzBE,mBAEO,QAAA,EAFA,OAAKH,eAAED,MAAA,EAAA,CAAE,CAAC,MAAK,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA,EAAA,GAAA,CACpDE,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGF,QAAA,aADRL,UAAA,GAAAC,mBAcS,UAAA;;KAZN,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KACf,UAAU,QAAA;KACX,MAAK;KACL,cAAW;KACV,UAAU,QAAA,mBAAgB,KAAQ,KAAA;KAClC,SAAK,OAAA,OAAA,OAAA,KAAAK,eAAA,WAAO,KAAI,aAAA,GAAA,CAAA,MAAA,CAAA;IAEjBC,GAAAA,CAAAA,YAIEC,iBAAA;KAHC,OAAKN,eAAED,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;KACnB,MAAMA,MAAA,qBAAA,CAAqB,CAAC,QAAA;KAC5B,MAAM,QAAA"}
+{"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_withModifiers","_createVNode","RuiIcon"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes, StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn } from '@/utils/tv';\nimport { chipStyles } from './chip-styles';\n\nexport interface RuiChipClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: ChipSize;\n  variant?: ChipVariant;\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  /**\n   * Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n   * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n   */\n  closeUnfocusable?: boolean;\n  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = ChipSize.md,\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = ChipVariant.filled,\n  closeIcon = 'lu-x',\n  closeUnfocusable = false,\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props | 'onClick'>>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\n  prepended: !!slots.prepend,\n  closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const s: Partial<StyleValue> = {};\n  if (bgColor)\n    s.backgroundColor = bgColor;\n  if (textColor)\n    s.color = textColor;\n  return s;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n\n/**\n * Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n *\n * @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n  if (!clickable || disabled || e.target !== get(root))\n    return;\n  if (e.key !== 'Enter' && e.key !== ' ')\n    return;\n\n  e.preventDefault();\n  get(root)?.click();\n}\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    :class=\"ui.root({ class: cn(classNames?.root) })\"\n    :style=\"style\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-disabled=\"disabled || undefined\"\n    :role=\"clickable ? 'button' : undefined\"\n    :tabindex=\"clickable && !disabled ? 0 : undefined\"\n    :aria-disabled=\"clickable && disabled ? true : undefined\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n    @keydown=\"onKeydown($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      aria-label=\"Remove\"\n      :tabindex=\"closeUnfocusable ? -1 : undefined\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDA,MAAM,OAAO;EAKb,MAAM,QAAQE,SAAA;EAKd,MAAM,OAAO,eAA+B,MAAM;EAElD,MAAM,KAAK,eAA8C,WAAW;GAClE,MAAG,QAAA;GACH,MAAG,QAAA;GACH,OAAI,QAAA;GACJ,SAAM,QAAA;GACN,UAAO,QAAA;GACP,WAAQ,QAAA;GACR,WAAW,CAAC,CAAC,MAAM;GACnB,WAAQ,QAAA;EACV,CAAC,CAAC;EAEF,MAAM,QAAQ,eAAoC;GAChD,MAAM,IAAyB,CAAC;GAChC,IAAI,QAAA,SACF,EAAE,kBAAkB,QAAA;GACtB,IAAI,QAAA,WACF,EAAE,QAAQ,QAAA;GACZ,OAAO;EACT,CAAC;EAED,SAAS,MAAM,GAAqB;GAClC,IAAI,CAAC,QAAA,aAAa,QAAA,UAChB;GAEF,KAAK,SAAS,CAAC;EACjB;;;;;;;EAQA,SAAS,UAAU,GAAwB;GACzC,IAAI,CAAC,QAAA,aAAa,QAAA,YAAY,EAAE,WAAW,IAAI,IAAI,GACjD;GACF,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KACjC;GAEF,EAAE,eAAe;GACjB,IAAI,IAAI,CAAC,EAAE,MAAM;EACnB;;GAIE,OAAAC,UAAA,GAAAC,mBAsCM,OAtCNC,WAsCM;IArCA,SAAA;IAAJ,KAAI;IACH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA;IAC3C,OAAOA,MAAA,KAAA;IACP,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,iBAAe,QAAA,YAAY,KAAA;IAC3B,MAAM,QAAA,YAAS,WAAc,KAAA;IAC7B,UAAU,QAAA,aAAS,CAAK,QAAA,WAAQ,IAAO,KAAA;IACvC,iBAAe,QAAA,aAAa,QAAA,WAAQ,OAAU,KAAA;GACvC,GAAAA,MAAA,UAAA,CAAU,CAACN,KAAAA,QAAM,CAAA,SAAA,CAAA,GAAA;IACxB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAM,MAAM;IACnB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;;IAGlBC,KAAAA,OAAO,WADfE,UAAA,GAAAC,mBAKM,OAAA;;KAHH,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IAElBE,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEzBE,mBAEO,QAAA,EAFA,OAAKH,eAAED,MAAA,EAAA,CAAE,CAAC,MAAK,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA,EAAA,GAAA,CACpDE,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGF,QAAA,aADRL,UAAA,GAAAC,mBAcS,UAAA;;KAZN,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KACf,UAAU,QAAA;KACX,MAAK;KACL,cAAW;KACV,UAAU,QAAA,mBAAgB,KAAQ,KAAA;KAClC,SAAK,OAAA,OAAA,OAAA,KAAAK,eAAA,WAAO,KAAI,aAAA,GAAA,CAAA,MAAA,CAAA;IAEjBC,GAAAA,CAAAA,YAIEC,iBAAA;KAHC,OAAKN,eAAED,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;KACnB,MAAMA,MAAA,qBAAA,CAAqB,CAAC,QAAA;KAC5B,MAAM,QAAA"}

package/dist/components/color-picker/RuiColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorPicker.js","names":["_sfc_main"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn } from '@/utils/tv';\nimport { colorPickerStyles } from './color-picker-styles';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"colorPickerStyles({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiColorPicker.js","names":["_sfc_main"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport type { HTMLAttributes } from 'vue';\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn } from '@/utils/tv';\nimport { colorPickerStyles } from './color-picker-styles';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\n// eslint-disable-next-line @stylistic/type-generic-spacing -- its fix deletes the comment, which keeps the attributes out of the runtime props\ndefineProps</* @vue-ignore */ HTMLAttributes>();\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"colorPickerStyles({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/color-picker/RuiColorPicker.vue.d.ts

@@ -1,9 +1,12 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = HTMLAttributes;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","RuiColorBoard","_createElementVNode","RuiColorDisplay","RuiColorHue","RuiColorInput"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn } from '@/utils/tv';\nimport { colorPickerStyles } from './color-picker-styles';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"colorPickerStyles({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,aAAaC,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,IAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;;GAIE,OAAAC,UAAA,GAAAC,mBAsBM,OAtBNC,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAOC,MAAA,iBAAA,CAAiB,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;GACrCA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErCM,YAGEC,uBAAA;IAFC,OAAOF,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErCG,GAAAA,MAAAA,GAAAA,CAAAA,OAAAA,CAAAA,GAAAA,mBAUM,OAVN,YAUM,CATJA,mBAMM,OANN,YAMM,CALJF,YAAkDG,yBAAA,EAAhC,OAAOJ,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrCC,YAGEI,qBAAA;IAFS,YAAAL,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIVC,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,CAAAA,CAAAA,CAAAA,GAAAA,YAAuCK,uBAAA;IAAf,YAAAN,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}
+{"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","RuiColorBoard","_createElementVNode","RuiColorDisplay","RuiColorHue","RuiColorInput"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport type { HTMLAttributes } from 'vue';\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn } from '@/utils/tv';\nimport { colorPickerStyles } from './color-picker-styles';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\n// eslint-disable-next-line @stylistic/type-generic-spacing -- its fix deletes the comment, which keeps the attributes out of the runtime props\ndefineProps</* @vue-ignore */ HTMLAttributes>();\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"colorPickerStyles({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,aAAaC,SAAmB,SAAA,YAAgB;EAKtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,IAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;;GAIE,OAAAC,UAAA,GAAAC,mBAsBM,OAtBNC,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAOC,MAAA,iBAAA,CAAiB,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;GACrCA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErCM,YAGEC,uBAAA;IAFC,OAAOF,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErCG,GAAAA,MAAAA,GAAAA,CAAAA,OAAAA,CAAAA,GAAAA,mBAUM,OAVN,YAUM,CATJA,mBAMM,OANN,YAMM,CALJF,YAAkDG,yBAAA,EAAhC,OAAOJ,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrCC,YAGEI,qBAAA;IAFS,YAAAL,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIVC,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,CAAAA,CAAAA,CAAAA,GAAAA,YAAuCK,uBAAA;IAAf,YAAAN,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}

package/dist/components/date-time-picker/RuiDateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDateTimePicker.js","names":["_sfc_main"],"sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ComponentPublicInstance } from 'vue';\nimport type { DateTimePickerAction, DateTimeSegmentType } from '@/components/date-time-picker/types';\nimport type { TimePickerSelection } from '@/components/time-picker/RuiTimePicker.vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { dateTimePickerStyles } from '@/components/date-time-picker/date-time-picker-styles';\nimport RuiDateTimePickerMenu from '@/components/date-time-picker/RuiDateTimePickerMenu.vue';\nimport { useDateTimeSelection } from '@/components/date-time-picker/use-date-time-selection';\nimport { useInputHandler } from '@/components/date-time-picker/use-input-handler';\nimport { useKeyboardHandler } from '@/components/date-time-picker/use-keyboard-handler';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\ntype DateFormat = 'year-first' | 'month-first' | 'day-first';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> = T extends 'date'\n  ? Date | undefined\n  : T extends 'epoch-ms'\n    ? number | undefined\n    : T extends 'epoch'\n      ? number | undefined\n      : Date | number | undefined;\n\nexport interface RuiDateTimePickerProps {\n  minDate?: Date | number;\n  maxDate?: Date | number | 'now';\n  format?: DateFormat;\n  type?: DateTimeModelType;\n  accuracy?: 'minute' | 'second' | 'millisecond';\n  disabled?: boolean;\n  allowEmpty?: boolean;\n  readonly?: boolean;\n  dense?: boolean;\n  label?: string;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the field for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  required?: boolean;\n  /**\n   * Renders the timezone selector in the menu. Off by default: the value is\n   * emitted as a date or an epoch, so the picked timezone does not survive a\n   * round trip and most consumers work in local time.\n   */\n  showTimezone?: boolean;\n  /**\n   * Actions rendered in the menu footer. `clear` is only rendered when the\n   * picker is `allowEmpty`. Pass an empty array to drop the footer entirely.\n   */\n  actions?: DateTimePickerAction[];\n  /**\n   * Focuses the field once it is mounted. The native attribute is ignored for\n   * an input inserted into an already loaded document, which is the usual case\n   * for a picker revealed by an editor or a dialog.\n   */\n  autofocus?: boolean;\n  /**\n   * Accepts an entry that stops short of the full format, filling the segments\n   * it never reached from one end of the day: `start` gives a bare date\n   * 00:00:00.000 and `end` gives it 23:59:59.999. Meant for a range, where the\n   * two bounds want opposite ends. Left unset, an entry missing its time is not\n   * a value and nothing is emitted.\n   *\n   * The fill runs when the user is done with the field - leaving it, pressing\n   * enter, or closing the calendar - and is written back into the segments, so\n   * what it decided on is on screen.\n   *\n   * Spelled out rather than written as `PartialTimeMode`: a consumer that hands\n   * this whole interface to its own `defineProps` needs every member resolvable\n   * by the SFC compiler, which does not follow the type into the package.\n   */\n  partialTime?: 'start' | 'end';\n}\n\ndefineOptions({\n  name: 'RuiDateTimePicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<ModelValueType<DateTimeModelType>>({ required: true });\nconst menuOpen = defineModel<boolean>('menuOpen', { default: false });\n\nconst {\n  disabled = false,\n  readonly = false,\n  allowEmpty = false,\n  dense = false,\n  type = 'epoch-ms',\n  details = undefined,\n  hideDetails = false,\n  label,\n  labelPlacement = undefined,\n  hint,\n  maxDate,\n  minDate,\n  format = 'day-first',\n  accuracy = 'minute',\n  errorMessages = [],\n  successMessages = [],\n  required = false,\n  showTimezone = false,\n  actions = ['now'],\n  autofocus = false,\n  partialTime,\n} = defineProps<RuiDateTimePickerProps>();\n\ndefineSlots<{\n  'menu-content': () => any;\n}>();\n\nconst MENU_OPTIONS: FloatingOptions = { placement: Placement.bottomStart };\n\nconst baseFormats: Record<DateFormat, string> = {\n  'day-first': 'DD/MM/YYYY HH:mm',\n  'month-first': 'MM/DD/YYYY HH:mm',\n  'year-first': 'YYYY/MM/DD HH:mm',\n};\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\nconst cursorPosition = ref<number>(0);\nconst currentValue = ref<number>();\n\nconst { t } = useRuiI8n();\n\nconst keys = RUI_I18N_KEYS.dateTimePicker;\n\nconst fieldLabel = computed<string>(() => label ?? t(keys.label, 'Pick a date'));\nconst inputId = useId();\nconst placement = useLabelPlacement(() => labelPlacement);\nconst clearLabel = computed<string>(() => t(keys.clearValue, 'Clear the date'));\nconst toggleLabel = computed<string>(() => (get(isOpen)\n  ? t(keys.closeCalendar, 'Close the calendar')\n  : t(keys.openCalendar, 'Open the calendar')));\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuWrapperRef = useTemplateRef<ComponentPublicInstance>('menuWrapperRef');\nconst calendarMenuOpen = ref<boolean>(false);\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst anyFocused = computed<boolean>(() => get(activatorFocusedWithin) || get(menuWrapperFocusedWithin));\n\nconst dateFormat = computed<string>(() => {\n  const fmt = baseFormats[format];\n  if (accuracy === 'second') {\n    return fmt.replace('HH:mm', 'HH:mm:ss');\n  }\n  else if (accuracy === 'millisecond') {\n    return fmt.replace('HH:mm', 'HH:mm:ss.SSS');\n  }\n  return fmt;\n});\n\nconst {\n  clear: clearSelection,\n  commitPartialTime,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  modelDay,\n  modelHour,\n  modelMillisecond,\n  modelMinute,\n  modelMonth,\n  modelSecond,\n  selectedTime,\n  modelTimezone,\n  modelYear,\n  setNow,\n  setToday,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy,\n  allowEmpty,\n  dateFormat,\n  maxDate,\n  minDate,\n  modelValue,\n  partialTime,\n  type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\n\nconst {\n  clear: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\n  pasteRejected,\n  selectFirstSegment,\n  setSegment,\n} = useKeyboardHandler({\n  accuracy,\n  currentValue,\n  cursorPosition,\n  dateFormat,\n  disabled,\n  getCurrent,\n  getDateTime,\n  readonly,\n  setValue,\n  textInput,\n  timezone: modelTimezone,\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\n/** True once any segment holds a digit, even a partially typed date. */\nconst anySegmentSet = computed<boolean>(() => [\n  modelYear,\n  modelMonth,\n  modelDay,\n  modelHour,\n  modelMinute,\n  modelSecond,\n  modelMillisecond,\n].some(segment => isDefined(segment)));\n\n/**\n * The field's text.\n *\n * An untouched field shows its format through the placeholder rather than\n * holding the tokens as its value, where a screen reader reads them as content\n * and select-all copies them. The tokens stay while the field is focused: that\n * is when the segment machinery highlights them, and collapsing the value\n * mid-edit would blank the field under the cursor. The guard is \"no segment\n * set\" rather than `valueSet`, so blurring a half-typed date keeps what was\n * entered on screen.\n */\nconst formattedDisplay = computed<string>(() => {\n  if (!get(anySegmentSet) && !get(searchInputFocused)) {\n    return '';\n  }\n\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(modelYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(modelMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(modelDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(modelHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(modelMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(modelSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(modelMillisecond, 3) },\n  ];\n\n  for (const { pattern, value } of replacements) {\n    if (value !== undefined) {\n      result = result.replace(pattern, value);\n    }\n  }\n\n  return result;\n});\n\n/**\n * An untouched field holds no value until focus expands the format tokens into\n * it. That patch overwrites the input's value, and writing a value drops any\n * selection with it, so the highlight `handleFocus` just set is gone by the\n * time the tokens are on screen and the caret ends up after them. Re-select\n * the first segment once the tokens have actually landed.\n */\nwatch(formattedDisplay, (value, previous) => {\n  if (previous === '' && value !== '' && get(searchInputFocused))\n    selectFirstSegment();\n}, { flush: 'post' });\n\nconst timeSelection = computed<TimePickerSelection>({\n  get() {\n    const type = getCurrentSegment()?.type;\n\n    if (type === 'mm') {\n      return 'minute';\n    }\n    else if (type === 'ss') {\n      return 'second';\n    }\n    else if (type === 'SSS') {\n      return 'millisecond';\n    }\n    return 'hour';\n  },\n  set(value: TimePickerSelection) {\n    let segmentType: DateTimeSegmentType = 'HH';\n    if (value === 'minute') {\n      segmentType = 'mm';\n    }\n    else if (value === 'second') {\n      segmentType = 'ss';\n    }\n    else if (value === 'millisecond') {\n      segmentType = 'SSS';\n    }\n\n    setSegment(segmentType);\n  },\n});\n\nconst ui = computed<ReturnType<typeof dateTimePickerStyles>>(() => dateTimePickerStyles({\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst pasteMessage = computed<string>(() => (get(pasteRejected)\n  ? t(keys.pasteUnreadable, 'Could not read a date from the pasted text')\n  : ''));\n\n/**\n * The paste message goes first: the details show one message, and it answers\n * what the user just did, which a standing validation error does not.\n */\nconst combinedErrorMessages = computed<string[]>(() => {\n  const paste = get(pasteMessage) ? [get(pasteMessage)] : [];\n  if (!errorMessages)\n    return [...paste, ...get(internalErrorMessages)];\n\n  const propErrors = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  return [...paste, ...propErrors, ...get(internalErrorMessages)];\n});\n\nfunction getDisplayValue(digit: Ref<number | undefined>, padding: number): string | undefined {\n  return isDefined(digit) ? get(digit).toString().padStart(padding, '0') : undefined;\n}\n\nasync function setInputFocus(): Promise<void> {\n  await nextTick(() => {\n    set(searchInputFocused, true);\n  });\n}\n\nfunction clear(segmentType?: string): void {\n  if (!segmentType) {\n    clearSelection();\n    set(currentValue, undefined);\n    return;\n  }\n\n  clearSegment(segmentType);\n}\n\n/**\n * An entry left incomplete is completed once the user is done with the field,\n * never while they are still filling it in: a half typed hour is not a segment\n * they left out. Leaving the field counts, unless the calendar is open, since\n * then the focus is only moving into it and the menu closing covers that.\n */\nfunction onBlur(): void {\n  handleBlur();\n  if (!get(isOpen))\n    commitPartialTime();\n}\n\nwatch(isOpen, (open) => {\n  if (!open && !get(searchInputFocused))\n    commitPartialTime();\n});\n\n/**\n * Selects the clicked segment before opening the menu, so the selection is not\n * lost to the DOM changes that opening brings.\n */\nfunction handleInputClick(event: MouseEvent): void {\n  handleClick(event);\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\n/**\n * The menu is teleported to the body, so it never sits next to the field in\n * the tab sequence. Opening it from the keyboard therefore moves focus into\n * the calendar; opening it with the mouse leaves focus in the field, which is\n * what `disable-auto-focus` on the menu is there for.\n */\nconst focusCalendarOnOpen = ref<boolean>(false);\n\n/**\n * Asks for focus to move into the calendar. The menu is teleported and mounts\n * a frame later, so the watcher below waits for the wrapper to appear rather\n * than guessing at a number of ticks.\n */\nfunction focusCalendar(): void {\n  set(focusCalendarOnOpen, true);\n}\n\nwatch(menuWrapperRef, (menu) => {\n  if (!menu || !get(focusCalendarOnOpen))\n    return;\n\n  set(focusCalendarOnOpen, false);\n  nextTick(() => {\n    const el = menu.$el as HTMLElement | undefined;\n    el?.querySelector<HTMLButtonElement>('[role=\"gridcell\"][tabindex=\"0\"]')?.focus({ preventScroll: true });\n  });\n});\n\n/** Moves focus to the field. Exposed so a consumer can drive it from a ref. */\nfunction focus(): void {\n  get(textInput)?.focus({ preventScroll: true });\n}\n\nfunction focusField(): void {\n  nextTick(focus);\n}\n\nonMounted(() => {\n  if (autofocus && !disabled)\n    focusField();\n});\n\n/** Escape inside the calendar closes it and hands focus back to the field. */\nfunction closeFromMenu(): void {\n  set(isOpen, false);\n  focusField();\n}\n\n/**\n * The menu used to be mouse-only: the activator carried no key handlers, so\n * there was no way to reach the calendar from the keyboard. Alt+ArrowDown\n * opens it and Escape closes it, following the combobox convention, and the\n * append chevron is a real button for anyone who tabs to it instead.\n *\n * Enter and Escape are the other ways to be done with the field, and the keys\n * a consumer tends to close its editor on. Escape reaches that point only once\n * the calendar is already shut, and discards nothing, since the segments stay\n * on screen either way, so it commits what was entered rather than dropping it\n * when the field goes. Both write the value before the key carries on\n * bubbling, so it survives that close.\n */\nfunction onKeyDown(event: KeyboardEvent): void {\n  if (disabled || readonly)\n    return;\n\n  if (event.altKey && event.key === 'ArrowDown') {\n    event.preventDefault();\n    set(isOpen, true);\n    focusCalendar();\n    return;\n  }\n\n  if (event.key === 'Escape' && get(isOpen)) {\n    set(isOpen, false);\n    return;\n  }\n\n  if (event.key === 'Enter' || event.key === 'Escape')\n    commitPartialTime();\n\n  handleKeyDown(event);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nconst menuActions = computed<DateTimePickerAction[]>(\n  () => actions.filter(action => action !== 'clear' || allowEmpty),\n);\n\nconst anyMenuOpen = computed<boolean>(() => get(isOpen) || get(calendarMenuOpen));\n\nwatch(anyMenuOpen, (value) => {\n  set(menuOpen, value);\n});\n\ndefineExpose({\n  focus,\n});\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"getRootAttrs($attrs, [])\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :class-names=\"{ details: 'px-0', content: 'p-0' }\"\n    :options=\"MENU_OPTIONS\"\n    :dense=\"dense\"\n    :hint=\"hint\"\n    :disabled=\"disabled\"\n    :success-messages=\"successMessages\"\n    :error-messages=\"combinedErrorMessages\"\n    :close-on-content-click=\"false\"\n    :show-details=\"detailsMode !== 'hidden'\"\n    :details=\"detailsMode === 'auto' ? 'auto' : 'reserve'\"\n    :persistent=\"calendarMenuOpen\"\n    :menu-label=\"fieldLabel\"\n    role=\"dialog\"\n    full-width\n    disable-auto-focus\n  >\n    <template #label>\n      <RuiFieldLabel\n        :for=\"inputId\"\n        :text=\"fieldLabel\"\n        :hidden=\"placement === 'hidden'\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n      />\n    </template>\n    <template #activator=\"{ attrs }\">\n      <div\n        ref=\"activator\"\n        :class=\"ui.activator()\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(readonly ? {} : activatorHandlers(attrs)),\n        }\"\n        data-id=\"activator\"\n        :aria-invalid=\"hasError\"\n        @mouseenter=\"isHovered = true\"\n        @mouseleave=\"isHovered = false\"\n        @click=\"setInputFocus()\"\n      >\n        <span :class=\"ui.iconPrepend()\">\n          <RuiIcon\n            class=\"text-rui-neutral-500 dark:text-rui-neutral-400 transition\"\n            :size=\"dense ? 16 : 20\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"ui.value()\">\n          <input\n            :id=\"inputId\"\n            ref=\"textInput\"\n            :disabled=\"disabled\"\n            :value=\"formattedDisplay\"\n            class=\"bg-transparent outline-hidden flex-1 min-w-0\"\n            type=\"text\"\n            inputmode=\"numeric\"\n            spellcheck=\"false\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            :aria-required=\"required || undefined\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"onBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"onKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\n          <!-- The details line is not a live region, so a rejected paste is announced from here -->\n          <span\n            class=\"sr-only\"\n            aria-live=\"polite\"\n            data-id=\"paste-status\"\n          >\n            {{ pasteMessage }}\n          </span>\n        </div>\n\n        <RuiButton\n          v-if=\"allowEmpty && valueSet && !disabled && !readonly\"\n          variant=\"text\"\n          icon\n          data-id=\"clear-button\"\n          size=\"sm\"\n          :aria-label=\"clearLabel\"\n          :class=\"[\n            ui.clear(),\n            anyFocused && 'visible!',\n            { 'mr-2': !dense },\n          ]\"\n          @click.stop.prevent=\"clear()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n\n        <!-- Out of the tab sequence, following the combobox pattern: the button only duplicates\n             Alt+ArrowDown on the field, so leaving it in cost two stops to cross one date field\n             and four to cross a from/to pair, for nothing a keyboard user could not already do.\n             It stays a real button, so it keeps its label and its expanded state for anyone\n             reaching it by any other means. -->\n        <button\n          v-if=\"!disabled && !readonly\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n          :aria-label=\"toggleLabel\"\n          :aria-expanded=\"isOpen\"\n          aria-haspopup=\"dialog\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 20\"\n            name=\"lu-chevron-down\"\n          />\n        </button>\n        <span\n          v-else\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 20\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset :class=\"ui.fieldset()\" />\n    </template>\n    <template #default>\n      <RuiDateTimePickerMenu\n        ref=\"menuWrapperRef\"\n        v-model:selected-date=\"selectedDate\"\n        v-model:selected-time=\"selectedTime\"\n        v-model:selected-hour=\"modelHour\"\n        v-model:selected-minute=\"modelMinute\"\n        v-model:selected-second=\"modelSecond\"\n        v-model:selected-millisecond=\"modelMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"modelTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        :show-timezone=\"showTimezone\"\n        :actions=\"menuActions\"\n        @keydown.escape=\"closeFromMenu()\"\n        @set-now=\"setNow()\"\n        @set-today=\"setToday()\"\n        @clear=\"clear()\"\n      >\n        <!-- only when given, or the panel draws an empty third column with its divider -->\n        <template\n          v-if=\"$slots['menu-content']\"\n          #default\n        >\n          <slot name=\"menu-content\" />\n        </template>\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDateTimePicker.js","names":["_sfc_main"],"sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends 'date' | 'epoch-ms' | 'epoch' = 'epoch-ms'\">\nimport type { ComponentPublicInstance, HTMLAttributes, Ref } from 'vue';\nimport type { DateTimePickerAction, DateTimeSegmentType } from '@/components/date-time-picker/types';\nimport type { TimePickerSelection } from '@/components/time-picker/RuiTimePicker.vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { dateTimePickerStyles } from '@/components/date-time-picker/date-time-picker-styles';\nimport RuiDateTimePickerMenu from '@/components/date-time-picker/RuiDateTimePickerMenu.vue';\nimport { useDateTimeSelection } from '@/components/date-time-picker/use-date-time-selection';\nimport { useInputHandler } from '@/components/date-time-picker/use-input-handler';\nimport { useKeyboardHandler } from '@/components/date-time-picker/use-keyboard-handler';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\n/*\n * The component is generic, so only the declarations that open the script are hoisted out of its\n * setup function: this interface comes first and spells its unions out instead of naming the\n * aliases below.\n */\nexport interface RuiDateTimePickerProps {\n  minDate?: Date | number;\n  maxDate?: Date | number | 'now';\n  format?: 'year-first' | 'month-first' | 'day-first';\n  type?: 'date' | 'epoch-ms' | 'epoch';\n  accuracy?: 'minute' | 'second' | 'millisecond';\n  disabled?: boolean;\n  allowEmpty?: boolean;\n  readonly?: boolean;\n  dense?: boolean;\n  label?: string;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the field for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  required?: boolean;\n  /**\n   * Renders the timezone selector in the menu. Off by default: the value is\n   * emitted as a date or an epoch, so the picked timezone does not survive a\n   * round trip and most consumers work in local time.\n   */\n  showTimezone?: boolean;\n  /**\n   * Actions rendered in the menu footer. `clear` is only rendered when the\n   * picker is `allowEmpty`. Pass an empty array to drop the footer entirely.\n   */\n  actions?: DateTimePickerAction[];\n  /**\n   * Focuses the field once it is mounted. The native attribute is ignored for\n   * an input inserted into an already loaded document, which is the usual case\n   * for a picker revealed by an editor or a dialog.\n   */\n  autofocus?: boolean;\n  /**\n   * Accepts an entry that stops short of the full format, filling the segments\n   * it never reached from one end of the day: `start` gives a bare date\n   * 00:00:00.000 and `end` gives it 23:59:59.999. Meant for a range, where the\n   * two bounds want opposite ends. Left unset, an entry missing its time is not\n   * a value and nothing is emitted.\n   *\n   * The fill runs when the user is done with the field - leaving it, pressing\n   * enter, or closing the calendar - and is written back into the segments, so\n   * what it decided on is on screen.\n   *\n   * Spelled out rather than written as `PartialTimeMode`: a consumer that hands\n   * this whole interface to its own `defineProps` needs every member resolvable\n   * by the SFC compiler, which does not follow the type into the package.\n   */\n  partialTime?: 'start' | 'end';\n}\n\ntype DateFormat = NonNullable<RuiDateTimePickerProps['format']>;\n\ntype DateTimeModelType = NonNullable<RuiDateTimePickerProps['type']>;\n\ntype ModelValueType<T extends DateTimeModelType> = T extends 'date'\n  ? Date | undefined\n  : T extends 'epoch-ms'\n    ? number | undefined\n    : T extends 'epoch'\n      ? number | undefined\n      : Date | number | undefined;\n\ndefineOptions({\n  name: 'RuiDateTimePicker',\n  inheritAttrs: false,\n});\n\n/**\n * The picked moment in the shape `type` names: a `Date` for `date`, a number for `epoch-ms` (the\n * default) and `epoch`. The component writes through the wider ref.\n */\nconst modelValue: Ref<ModelValueType<DateTimeModelType>> = defineModel<ModelValueType<T>>({ required: true });\nconst menuOpen = defineModel<boolean>('menuOpen', { default: false });\n\nconst {\n  disabled = false,\n  readonly = false,\n  allowEmpty = false,\n  dense = false,\n  type: typeProp,\n  details = undefined,\n  hideDetails = false,\n  label,\n  labelPlacement = undefined,\n  hint,\n  maxDate,\n  minDate,\n  format = 'day-first',\n  accuracy = 'minute',\n  errorMessages = [],\n  successMessages = [],\n  required = false,\n  showTimezone = false,\n  actions = ['now'],\n  autofocus = false,\n  partialTime,\n} = defineProps<Omit<RuiDateTimePickerProps, 'type'> & {\n  /**\n   * What the model holds: a `Date` for `date`, epoch milliseconds for `epoch-ms`, epoch seconds for `epoch`.\n   *\n   * @defaultValue 'epoch-ms'\n   */\n  type?: T;\n} & /* @vue-ignore */ Omit<HTMLAttributes, keyof RuiDateTimePickerProps>>();\n\ndefineSlots<{\n  'menu-content'?: () => any;\n}>();\n\n// `epoch-ms` is no `T`, so the default is applied here rather than in the destructuring\nconst modelType: DateTimeModelType = typeProp ?? 'epoch-ms';\n\nconst MENU_OPTIONS: FloatingOptions = { placement: Placement.bottomStart };\n\nconst baseFormats: Record<DateFormat, string> = {\n  'day-first': 'DD/MM/YYYY HH:mm',\n  'month-first': 'MM/DD/YYYY HH:mm',\n  'year-first': 'YYYY/MM/DD HH:mm',\n};\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\nconst cursorPosition = ref<number>(0);\nconst currentValue = ref<number>();\n\nconst { t } = useRuiI8n();\n\nconst keys = RUI_I18N_KEYS.dateTimePicker;\n\nconst fieldLabel = computed<string>(() => label ?? t(keys.label, 'Pick a date'));\nconst inputId = useId();\nconst placement = useLabelPlacement(() => labelPlacement);\nconst clearLabel = computed<string>(() => t(keys.clearValue, 'Clear the date'));\nconst toggleLabel = computed<string>(() => (get(isOpen)\n  ? t(keys.closeCalendar, 'Close the calendar')\n  : t(keys.openCalendar, 'Open the calendar')));\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuWrapperRef = useTemplateRef<ComponentPublicInstance>('menuWrapperRef');\nconst calendarMenuOpen = ref<boolean>(false);\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst anyFocused = computed<boolean>(() => get(activatorFocusedWithin) || get(menuWrapperFocusedWithin));\n\nconst dateFormat = computed<string>(() => {\n  const fmt = baseFormats[format];\n  if (accuracy === 'second') {\n    return fmt.replace('HH:mm', 'HH:mm:ss');\n  }\n  else if (accuracy === 'millisecond') {\n    return fmt.replace('HH:mm', 'HH:mm:ss.SSS');\n  }\n  return fmt;\n});\n\nconst {\n  clear: clearSelection,\n  commitPartialTime,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  modelDay,\n  modelHour,\n  modelMillisecond,\n  modelMinute,\n  modelMonth,\n  modelSecond,\n  selectedTime,\n  modelTimezone,\n  modelYear,\n  setNow,\n  setToday,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy,\n  allowEmpty,\n  dateFormat,\n  maxDate,\n  minDate,\n  modelValue,\n  partialTime,\n  type: modelType,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\n\nconst {\n  clear: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\n  pasteRejected,\n  selectFirstSegment,\n  setSegment,\n} = useKeyboardHandler({\n  accuracy,\n  currentValue,\n  cursorPosition,\n  dateFormat,\n  disabled,\n  getCurrent,\n  getDateTime,\n  readonly,\n  setValue,\n  textInput,\n  timezone: modelTimezone,\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\n/** True once any segment holds a digit, even a partially typed date. */\nconst anySegmentSet = computed<boolean>(() => [\n  modelYear,\n  modelMonth,\n  modelDay,\n  modelHour,\n  modelMinute,\n  modelSecond,\n  modelMillisecond,\n].some(segment => isDefined(segment)));\n\n/**\n * The field's text.\n *\n * An untouched field shows its format through the placeholder rather than\n * holding the tokens as its value, where a screen reader reads them as content\n * and select-all copies them. The tokens stay while the field is focused: that\n * is when the segment machinery highlights them, and collapsing the value\n * mid-edit would blank the field under the cursor. The guard is \"no segment\n * set\" rather than `valueSet`, so blurring a half-typed date keeps what was\n * entered on screen.\n */\nconst formattedDisplay = computed<string>(() => {\n  if (!get(anySegmentSet) && !get(searchInputFocused)) {\n    return '';\n  }\n\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(modelYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(modelMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(modelDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(modelHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(modelMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(modelSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(modelMillisecond, 3) },\n  ];\n\n  for (const { pattern, value } of replacements) {\n    if (value !== undefined) {\n      result = result.replace(pattern, value);\n    }\n  }\n\n  return result;\n});\n\n/**\n * An untouched field holds no value until focus expands the format tokens into\n * it. That patch overwrites the input's value, and writing a value drops any\n * selection with it, so the highlight `handleFocus` just set is gone by the\n * time the tokens are on screen and the caret ends up after them. Re-select\n * the first segment once the tokens have actually landed.\n */\nwatch(formattedDisplay, (value, previous) => {\n  if (previous === '' && value !== '' && get(searchInputFocused))\n    selectFirstSegment();\n}, { flush: 'post' });\n\nconst timeSelection = computed<TimePickerSelection>({\n  get() {\n    const type = getCurrentSegment()?.type;\n\n    if (type === 'mm') {\n      return 'minute';\n    }\n    else if (type === 'ss') {\n      return 'second';\n    }\n    else if (type === 'SSS') {\n      return 'millisecond';\n    }\n    return 'hour';\n  },\n  set(value: TimePickerSelection) {\n    let segmentType: DateTimeSegmentType = 'HH';\n    if (value === 'minute') {\n      segmentType = 'mm';\n    }\n    else if (value === 'second') {\n      segmentType = 'ss';\n    }\n    else if (value === 'millisecond') {\n      segmentType = 'SSS';\n    }\n\n    setSegment(segmentType);\n  },\n});\n\nconst ui = computed<ReturnType<typeof dateTimePickerStyles>>(() => dateTimePickerStyles({\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst pasteMessage = computed<string>(() => (get(pasteRejected)\n  ? t(keys.pasteUnreadable, 'Could not read a date from the pasted text')\n  : ''));\n\n/**\n * The paste message goes first: the details show one message, and it answers\n * what the user just did, which a standing validation error does not.\n */\nconst combinedErrorMessages = computed<string[]>(() => {\n  const paste = get(pasteMessage) ? [get(pasteMessage)] : [];\n  if (!errorMessages)\n    return [...paste, ...get(internalErrorMessages)];\n\n  const propErrors = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  return [...paste, ...propErrors, ...get(internalErrorMessages)];\n});\n\nfunction getDisplayValue(digit: Ref<number | undefined>, padding: number): string | undefined {\n  return isDefined(digit) ? get(digit).toString().padStart(padding, '0') : undefined;\n}\n\nasync function setInputFocus(): Promise<void> {\n  await nextTick(() => {\n    set(searchInputFocused, true);\n  });\n}\n\nfunction clear(segmentType?: string): void {\n  if (!segmentType) {\n    clearSelection();\n    set(currentValue, undefined);\n    return;\n  }\n\n  clearSegment(segmentType);\n}\n\n/**\n * An entry left incomplete is completed once the user is done with the field,\n * never while they are still filling it in: a half typed hour is not a segment\n * they left out. Leaving the field counts, unless the calendar is open, since\n * then the focus is only moving into it and the menu closing covers that.\n */\nfunction onBlur(): void {\n  handleBlur();\n  if (!get(isOpen))\n    commitPartialTime();\n}\n\nwatch(isOpen, (open) => {\n  if (!open && !get(searchInputFocused))\n    commitPartialTime();\n});\n\n/**\n * Selects the clicked segment before opening the menu, so the selection is not\n * lost to the DOM changes that opening brings.\n */\nfunction handleInputClick(event: MouseEvent): void {\n  handleClick(event);\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\n/**\n * The menu is teleported to the body, so it never sits next to the field in\n * the tab sequence. Opening it from the keyboard therefore moves focus into\n * the calendar; opening it with the mouse leaves focus in the field, which is\n * what `disable-auto-focus` on the menu is there for.\n */\nconst focusCalendarOnOpen = ref<boolean>(false);\n\n/**\n * Asks for focus to move into the calendar. The menu is teleported and mounts\n * a frame later, so the watcher below waits for the wrapper to appear rather\n * than guessing at a number of ticks.\n */\nfunction focusCalendar(): void {\n  set(focusCalendarOnOpen, true);\n}\n\nwatch(menuWrapperRef, (menu) => {\n  if (!menu || !get(focusCalendarOnOpen))\n    return;\n\n  set(focusCalendarOnOpen, false);\n  nextTick(() => {\n    const el = menu.$el as HTMLElement | undefined;\n    el?.querySelector<HTMLButtonElement>('[role=\"gridcell\"][tabindex=\"0\"]')?.focus({ preventScroll: true });\n  });\n});\n\n/** Moves focus to the field. Exposed so a consumer can drive it from a ref. */\nfunction focus(): void {\n  get(textInput)?.focus({ preventScroll: true });\n}\n\nfunction focusField(): void {\n  nextTick(focus);\n}\n\nonMounted(() => {\n  if (autofocus && !disabled)\n    focusField();\n});\n\n/** Escape inside the calendar closes it and hands focus back to the field. */\nfunction closeFromMenu(): void {\n  set(isOpen, false);\n  focusField();\n}\n\n/**\n * The menu used to be mouse-only: the activator carried no key handlers, so\n * there was no way to reach the calendar from the keyboard. Alt+ArrowDown\n * opens it and Escape closes it, following the combobox convention, and the\n * append chevron is a real button for anyone who tabs to it instead.\n *\n * Enter and Escape are the other ways to be done with the field, and the keys\n * a consumer tends to close its editor on. Escape reaches that point only once\n * the calendar is already shut, and discards nothing, since the segments stay\n * on screen either way, so it commits what was entered rather than dropping it\n * when the field goes. Both write the value before the key carries on\n * bubbling, so it survives that close.\n */\nfunction onKeyDown(event: KeyboardEvent): void {\n  if (disabled || readonly)\n    return;\n\n  if (event.altKey && event.key === 'ArrowDown') {\n    event.preventDefault();\n    set(isOpen, true);\n    focusCalendar();\n    return;\n  }\n\n  if (event.key === 'Escape' && get(isOpen)) {\n    set(isOpen, false);\n    return;\n  }\n\n  if (event.key === 'Enter' || event.key === 'Escape')\n    commitPartialTime();\n\n  handleKeyDown(event);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nconst menuActions = computed<DateTimePickerAction[]>(\n  () => actions.filter(action => action !== 'clear' || allowEmpty),\n);\n\nconst anyMenuOpen = computed<boolean>(() => get(isOpen) || get(calendarMenuOpen));\n\nwatch(anyMenuOpen, (value) => {\n  set(menuOpen, value);\n});\n\ndefineExpose({\n  focus,\n});\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"getRootAttrs($attrs, [])\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :class-names=\"{ details: 'px-0', content: 'p-0' }\"\n    :options=\"MENU_OPTIONS\"\n    :dense=\"dense\"\n    :hint=\"hint\"\n    :disabled=\"disabled\"\n    :success-messages=\"successMessages\"\n    :error-messages=\"combinedErrorMessages\"\n    :close-on-content-click=\"false\"\n    :show-details=\"detailsMode !== 'hidden'\"\n    :details=\"detailsMode === 'auto' ? 'auto' : 'reserve'\"\n    :persistent=\"calendarMenuOpen\"\n    :menu-label=\"fieldLabel\"\n    role=\"dialog\"\n    full-width\n    disable-auto-focus\n  >\n    <template #label>\n      <RuiFieldLabel\n        :for=\"inputId\"\n        :text=\"fieldLabel\"\n        :hidden=\"placement === 'hidden'\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n      />\n    </template>\n    <template #activator=\"{ attrs }\">\n      <div\n        ref=\"activator\"\n        :class=\"ui.activator()\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(readonly ? {} : activatorHandlers(attrs)),\n        }\"\n        data-id=\"activator\"\n        :aria-invalid=\"hasError\"\n        @mouseenter=\"isHovered = true\"\n        @mouseleave=\"isHovered = false\"\n        @click=\"setInputFocus()\"\n      >\n        <span :class=\"ui.iconPrepend()\">\n          <RuiIcon\n            class=\"text-rui-neutral-500 dark:text-rui-neutral-400 transition\"\n            :size=\"dense ? 16 : 20\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"ui.value()\">\n          <input\n            :id=\"inputId\"\n            ref=\"textInput\"\n            :disabled=\"disabled\"\n            :value=\"formattedDisplay\"\n            class=\"bg-transparent outline-hidden flex-1 min-w-0\"\n            type=\"text\"\n            inputmode=\"numeric\"\n            spellcheck=\"false\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            :aria-required=\"required || undefined\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"onBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"onKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\n          <!-- The details line is not a live region, so a rejected paste is announced from here -->\n          <span\n            class=\"sr-only\"\n            aria-live=\"polite\"\n            data-id=\"paste-status\"\n          >\n            {{ pasteMessage }}\n          </span>\n        </div>\n\n        <RuiButton\n          v-if=\"allowEmpty && valueSet && !disabled && !readonly\"\n          variant=\"text\"\n          icon\n          data-id=\"clear-button\"\n          size=\"sm\"\n          :aria-label=\"clearLabel\"\n          :class=\"[\n            ui.clear(),\n            anyFocused && 'visible!',\n            { 'mr-2': !dense },\n          ]\"\n          @click.stop.prevent=\"clear()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n\n        <!-- Out of the tab sequence, following the combobox pattern: the button only duplicates\n             Alt+ArrowDown on the field, so leaving it in cost two stops to cross one date field\n             and four to cross a from/to pair, for nothing a keyboard user could not already do.\n             It stays a real button, so it keeps its label and its expanded state for anyone\n             reaching it by any other means. -->\n        <button\n          v-if=\"!disabled && !readonly\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n          :aria-label=\"toggleLabel\"\n          :aria-expanded=\"isOpen\"\n          aria-haspopup=\"dialog\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 20\"\n            name=\"lu-chevron-down\"\n          />\n        </button>\n        <span\n          v-else\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 20\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset :class=\"ui.fieldset()\" />\n    </template>\n    <template #default>\n      <RuiDateTimePickerMenu\n        ref=\"menuWrapperRef\"\n        v-model:selected-date=\"selectedDate\"\n        v-model:selected-time=\"selectedTime\"\n        v-model:selected-hour=\"modelHour\"\n        v-model:selected-minute=\"modelMinute\"\n        v-model:selected-second=\"modelSecond\"\n        v-model:selected-millisecond=\"modelMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"modelTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        :show-timezone=\"showTimezone\"\n        :actions=\"menuActions\"\n        @keydown.escape=\"closeFromMenu()\"\n        @set-now=\"setNow()\"\n        @set-today=\"setToday()\"\n        @clear=\"clear()\"\n      >\n        <!-- only when given, or the panel draws an empty third column with its divider -->\n        <template\n          v-if=\"$slots['menu-content']\"\n          #default\n        >\n          <slot name=\"menu-content\" />\n        </template>\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}

package/dist/components/date-time-picker/RuiDateTimePicker.vue.d.ts

@@ -1,14 +1,12 @@
+import type { HTMLAttributes } from 'vue';
 import type { DateTimePickerAction } from './types.js';
 import { type LabelPlacement } from '../../composables/defaults/field.js';
 import { type FormDetails } from '../../utils/form-text-detail.js';
-type DateFormat = 'year-first' | 'month-first' | 'day-first';
-type DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';
-type ModelValueType<T extends DateTimeModelType> = T extends 'date' ? Date | undefined : T extends 'epoch-ms' ? number | undefined : T extends 'epoch' ? number | undefined : Date | number | undefined;
 export interface RuiDateTimePickerProps {
     minDate?: Date | number;
     maxDate?: Date | number | 'now';
-    format?: DateFormat;
-    type?: DateTimeModelType;
+    format?: 'year-first' | 'month-first' | 'day-first';
+    type?: 'date' | 'epoch-ms' | 'epoch';
     accuracy?: 'minute' | 'second' | 'millisecond';
     disabled?: boolean;
     allowEmpty?: boolean;
@@ -59,31 +57,42 @@ export interface RuiDateTimePickerProps {
      */
     partialTime?: 'start' | 'end';
 }
-type __VLS_Props = RuiDateTimePickerProps;
-type __VLS_Slots = {
-    'menu-content': () => any;
-};
-/** Moves focus to the field. Exposed so a consumer can drive it from a ref. */
-declare function focus(): void;
-type __VLS_ModelProps = {
-    modelValue: ModelValueType<DateTimeModelType>;
-    'menuOpen'?: boolean;
+declare const __VLS_export: <T extends "date" | "epoch-ms" | "epoch" = "epoch-ms">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Omit<RuiDateTimePickerProps, "type"> & {
+        /**
+         * What the model holds: a `Date` for `date`, epoch milliseconds for `epoch-ms`, epoch seconds for `epoch`.
+         *
+         * @defaultValue 'epoch-ms'
+         */
+        type?: T;
+    } & Omit<HTMLAttributes, keyof RuiDateTimePickerProps> & {
+        /**
+         * The picked moment in the shape `type` names: a `Date` for `date`, a number for `epoch-ms` (the
+         * default) and `epoch`. The component writes through the wider ref.
+         */
+        modelValue: T extends "date" ? Date | undefined : T extends "epoch-ms" ? number | undefined : T extends "epoch" ? number | undefined : number | Date | undefined;
+        menuOpen?: boolean;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T extends "date" ? Date | undefined : T extends "epoch-ms" ? number | undefined : T extends "epoch" ? number | undefined : number | Date | undefined) => any) | undefined;
+        "onUpdate:menuOpen"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        focus: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        'menu-content'?: () => any;
+    };
+    emit: ((event: "update:modelValue", value: T extends "date" ? Date | undefined : T extends "epoch-ms" ? number | undefined : T extends "epoch" ? number | undefined : number | Date | undefined) => void) & ((event: "update:menuOpen", value: boolean) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    focus: typeof focus;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: number | Date | undefined) => any;
-    "update:menuOpen": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: number | Date | undefined) => any) | undefined;
-    "onUpdate:menuOpen"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, 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;
-    };
-};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -43,7 +43,6 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		minDate: {},
 		maxDate: {},
 		format: { default: "day-first" },
-		type: { default: "epoch-ms" },
 		accuracy: { default: "minute" },
 		disabled: {
 			type: Boolean,
@@ -84,7 +83,8 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			type: Boolean,
 			default: false
 		},
-		partialTime: {}
+		partialTime: {},
+		type: {}
 	}, {
 		"modelValue": { required: true },
 		"modelModifiers": {},
@@ -96,8 +96,13 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 	}),
 	emits: ["update:modelValue", "update:menuOpen"],
 	setup(__props, { expose: __expose }) {
+		/**
+		* The picked moment in the shape `type` names: a `Date` for `date`, a number for `epoch-ms` (the
+		* default) and `epoch`. The component writes through the wider ref.
+		*/
 		const modelValue = useModel(__props, "modelValue");
 		const menuOpen = useModel(__props, "menuOpen");
+		const modelType = __props.type ?? "epoch-ms";
 		const MENU_OPTIONS = { placement: Placement.bottomStart };
 		const baseFormats = {
 			"day-first": "DD/MM/YYYY HH:mm",
@@ -137,7 +142,7 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			minDate: __props.minDate,
 			modelValue,
 			partialTime: __props.partialTime,
-			type: __props.type
+			type: modelType
 		});
 		const { setValue, getCurrent } = useInputHandler(segmentData, currentValue);
 		const { clear: clearSegment, getCurrentSegment, handleBlur, handleClick, handleFocus, handleInput, handleInputSelection, handleKeyDown, handleMouseDown, handlePaste, pasteRejected, selectFirstSegment, setSegment } = useKeyboardHandler({