@rotki/ui-library 2.20.2 → 2.22.0

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"],"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, tv } from '@/utils/tv';\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  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\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-circle-x',\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst chipStyles = tv({\n  slots: {\n    root: 'inline-flex items-center justify-between px-2 py-1 transition-all cursor-default outline-none max-w-full truncate',\n    prepend: 'rounded-full flex items-center justify-center pr-0 w-6 h-6 text-[0.6rem] text-white bg-rui-grey-400 dark:bg-rui-grey-700 overflow-hidden',\n    label: 'truncate px-2 text-[0.8125rem]',\n    close: 'rounded-full flex items-center p-[0.13rem] pl-0 inset-y-0 focus:outline-none',\n    closeIcon: 'opacity-50 hover:opacity-80 dark:hover:text-rui-grey-300 transition-opacity',\n  },\n  variants: {\n    tile: {\n      true: { root: 'rounded-lg' },\n      false: { root: 'rounded-full' },\n    },\n    size: {\n      md: { root: 'min-h-8' },\n      sm: {\n        root: 'py-[0.19rem]',\n        prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n        label: 'px-1.5 text-[0.7rem]',\n        close: 'p-[0.08rem]',\n      },\n    },\n    disabled: {\n      true: { root: 'opacity-40 cursor-default', close: 'cursor-default' },\n      false: {},\n    },\n    clickable: {\n      true: { root: 'cursor-pointer' },\n      false: { root: 'cursor-default', close: 'cursor-default' },\n    },\n    variant: {\n      filled: {},\n      outlined: {},\n    },\n    color: {\n      grey: { root: 'text-rui-text' },\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Interactive states (clickable + not disabled)\n    { clickable: true, disabled: false, class: { root: 'hover:brightness-90 focus:brightness-75 dark:hover:brightness-110' } },\n\n    // Grey filled/outlined\n    { color: 'grey', variant: 'filled', class: { root: 'bg-rui-grey-200 dark:bg-rui-grey-800' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'border border-black/[0.26] bg-transparent dark:border-white/[0.26]' } },\n    { color: 'grey', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.04] dark:focus:bg-white/[0.12]' } },\n\n    // Context colors — filled bg\n    { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n    { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n    { color: 'error', variant: 'filled', class: { root: 'bg-rui-error' } },\n    { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning' } },\n    { color: 'info', variant: 'filled', class: { root: 'bg-rui-info' } },\n    { color: 'success', variant: 'filled', class: { root: 'bg-rui-success' } },\n\n    // Context colors — outlined base\n    { color: 'primary', variant: 'outlined', class: { root: 'border text-rui-primary border-rui-primary/50 bg-transparent' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'border text-rui-secondary border-rui-secondary/50 bg-transparent' } },\n    { color: 'error', variant: 'outlined', class: { root: 'border text-rui-error border-rui-error/50 bg-transparent' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'border text-rui-warning border-rui-warning/50 bg-transparent' } },\n    { color: 'info', variant: 'outlined', class: { root: 'border text-rui-info border-rui-info/50 bg-transparent' } },\n    { color: 'success', variant: 'outlined', class: { root: 'border text-rui-success border-rui-success/50 bg-transparent' } },\n\n    // Context colors — outlined interactive\n    { color: 'primary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-primary/[0.04] focus:bg-rui-primary/[0.12]' } },\n    { color: 'secondary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-secondary/[0.04] focus:bg-rui-secondary/[0.12]' } },\n    { color: 'error', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-error/[0.04] focus:bg-rui-error/[0.12]' } },\n    { color: 'warning', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-warning/[0.04] focus:bg-rui-warning/[0.12]' } },\n    { color: 'info', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-info/[0.04] focus:bg-rui-info/[0.12]' } },\n    { color: 'success', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-success/[0.04] focus:bg-rui-success/[0.12]' } },\n  ],\n  compoundSlots: [\n    // All context colors filled share dark text\n    { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n    // Dark mode: warning/success/info filled use light text\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'filled', class: 'dark:text-rui-light-text' },\n  ],\n  defaultVariants: {\n    tile: false,\n    size: 'md',\n    disabled: false,\n    clickable: false,\n    variant: 'filled',\n    color: 'grey',\n  },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\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</script>\n\n<template>\n  <div\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=\"button\"\n    tabindex=\"0\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($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) ?? contentClass })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\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":"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"}
+{"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"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, tv } from '@/utils/tv';\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  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\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-circle-x',\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst chipStyles = tv({\n  slots: {\n    root: 'inline-flex items-center justify-between px-2 py-1 transition-all cursor-default outline-none max-w-full truncate',\n    prepend: 'rounded-full flex items-center justify-center pr-0 w-6 h-6 text-[0.6rem] text-white bg-rui-grey-400 dark:bg-rui-grey-700 overflow-hidden',\n    label: 'truncate px-2 text-[0.8125rem]',\n    close: 'rounded-full flex items-center p-[0.13rem] pl-0 inset-y-0 focus:outline-none',\n    closeIcon: 'opacity-50 hover:opacity-80 dark:hover:text-rui-grey-300 transition-opacity',\n  },\n  variants: {\n    tile: {\n      true: { root: 'rounded-lg' },\n      false: { root: 'rounded-full' },\n    },\n    size: {\n      md: { root: 'min-h-8' },\n      sm: {\n        root: 'py-[0.19rem]',\n        prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n        label: 'px-1.5 text-[0.7rem]',\n        close: 'p-[0.08rem]',\n      },\n    },\n    disabled: {\n      true: { root: 'opacity-40 cursor-default', close: 'cursor-default' },\n      false: {},\n    },\n    clickable: {\n      true: { root: 'cursor-pointer' },\n      false: { root: 'cursor-default', close: 'cursor-default' },\n    },\n    variant: {\n      filled: {},\n      outlined: {},\n    },\n    color: {\n      grey: { root: 'text-rui-text' },\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Interactive states (clickable + not disabled)\n    { clickable: true, disabled: false, class: { root: 'hover:brightness-90 focus:brightness-75 dark:hover:brightness-110' } },\n\n    // Grey filled/outlined\n    { color: 'grey', variant: 'filled', class: { root: 'bg-rui-grey-200 dark:bg-rui-grey-800' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'border border-black/[0.26] bg-transparent dark:border-white/[0.26]' } },\n    { color: 'grey', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.04] dark:focus:bg-white/[0.12]' } },\n\n    // Context colors — filled bg\n    { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n    { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n    { color: 'error', variant: 'filled', class: { root: 'bg-rui-error' } },\n    { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning' } },\n    { color: 'info', variant: 'filled', class: { root: 'bg-rui-info' } },\n    { color: 'success', variant: 'filled', class: { root: 'bg-rui-success' } },\n\n    // Context colors — outlined base\n    { color: 'primary', variant: 'outlined', class: { root: 'border text-rui-primary border-rui-primary/50 bg-transparent' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'border text-rui-secondary border-rui-secondary/50 bg-transparent' } },\n    { color: 'error', variant: 'outlined', class: { root: 'border text-rui-error border-rui-error/50 bg-transparent' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'border text-rui-warning border-rui-warning/50 bg-transparent' } },\n    { color: 'info', variant: 'outlined', class: { root: 'border text-rui-info border-rui-info/50 bg-transparent' } },\n    { color: 'success', variant: 'outlined', class: { root: 'border text-rui-success border-rui-success/50 bg-transparent' } },\n\n    // Context colors — outlined interactive\n    { color: 'primary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-primary/[0.04] focus:bg-rui-primary/[0.12]' } },\n    { color: 'secondary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-secondary/[0.04] focus:bg-rui-secondary/[0.12]' } },\n    { color: 'error', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-error/[0.04] focus:bg-rui-error/[0.12]' } },\n    { color: 'warning', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-warning/[0.04] focus:bg-rui-warning/[0.12]' } },\n    { color: 'info', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-info/[0.04] focus:bg-rui-info/[0.12]' } },\n    { color: 'success', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-success/[0.04] focus:bg-rui-success/[0.12]' } },\n  ],\n  compoundSlots: [\n    // All context colors filled share dark text\n    { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n    // Dark mode: warning/success/info filled use light text\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'filled', class: 'dark:text-rui-light-text' },\n  ],\n  defaultVariants: {\n    tile: false,\n    size: 'md',\n    disabled: false,\n    clickable: false,\n    variant: 'filled',\n    color: 'grey',\n  },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\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</script>\n\n<template>\n  <div\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=\"button\"\n    tabindex=\"0\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($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) ?? contentClass })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\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":"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"}

package/dist/components/chips/chip-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip-props.js","names":[],"sources":["../../../src/components/chips/chip-props.ts"],"sourcesContent":["export const ChipSize = {\n  sm: 'sm',\n  md: 'md',\n} as const;\n\nexport type ChipSize = (typeof ChipSize)[keyof typeof ChipSize];\n\nexport const ChipVariant = {\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\nexport type ChipVariant = (typeof ChipVariant)[keyof typeof ChipVariant];\n\nexport const CHIP_CLOSE_ICON_SIZES: Record<ChipSize, number> = {\n  sm: 16,\n  md: 24,\n};\n"],"mappings":";AAAA,IAAa,WAAW;CACtB,IAAI;CACJ,IAAI;CACL;AAID,IAAa,cAAc;CACzB,QAAQ;CACR,UAAU;CACX;AAID,IAAa,wBAAkD;CAC7D,IAAI;CACJ,IAAI;CACL"}
+{"version":3,"file":"chip-props.js","names":[],"sources":["../../../src/components/chips/chip-props.ts"],"sourcesContent":["export const ChipSize = {\n  sm: 'sm',\n  md: 'md',\n} as const;\n\nexport type ChipSize = (typeof ChipSize)[keyof typeof ChipSize];\n\nexport const ChipVariant = {\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\nexport type ChipVariant = (typeof ChipVariant)[keyof typeof ChipVariant];\n\nexport const CHIP_CLOSE_ICON_SIZES: Record<ChipSize, number> = {\n  sm: 16,\n  md: 24,\n};\n"],"mappings":";AAAA,IAAa,WAAW;CACtB,IAAI;CACJ,IAAI;AACN;AAIA,IAAa,cAAc;CACzB,QAAQ;CACR,UAAU;AACZ;AAIA,IAAa,wBAAkD;CAC7D,IAAI;CACJ,IAAI;AACN"}

package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js

@@ -5,7 +5,7 @@ import { clamp, get, set } from "@vueuse/shared";
 import tinycolor from "tinycolor2";
 //#region src/components/color-picker/RuiColorBoard.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-valuetext"];
-var RuiColorBoard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiColorBoard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiColorBoard",
 	inheritAttrs: false,
 	__name: "RuiColorBoard",

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

@@ -1 +1 @@
-{"version":3,"file":"RuiColorBoard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn, tv } from '@/utils/tv';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer' });\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAeA,MAAM,OAAO;EAIb,MAAM,UAAU,eAA4B,UAAU;EAEtD,MAAM,QAAQ,SAAS;GACrB,WAAW,SAAS,QAAA,MAAM,IAAI;GAC9B,YAAY,QAAA,MAAM;GAClB,YAAY,QAAA,MAAM;GACnB,CAAC;EAEF,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,aAAa,IAAY,EAAE;EAEjC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,UAAU;EAE5E,MAAM,cAAc,gBAA+C;GACjE,KAAK,GAAG,IAAI,UAAU,GAAG,IAAI;GAC7B,MAAM,GAAG,IAAI,WAAW,GAAG,IAAI;GAChC,EAAE;EAEH,SAAS,SAAS,KAAqB;AACrC,UAAO,UAAU;IAAE,GAAG;IAAK,GAAG;IAAG,GAAG;IAAG,CAAC,CAAC,aAAa;;EAGxD,SAAS,iBAAuB;AAC9B,OAAI,YAAY,MAAM,WAAW;AACjC,OAAI,WAAW,IAAI,MAAM,WAAW;;EAGtC,SAAS,UAAU,GAAW,GAAiB;GAC7C,MAAM,KAAK,IAAI,QAAQ;AACvB,OAAI,CAAC,GACH;GAGF,MAAM,EAAE,OAAO,QAAQ,MAAM,QADhB,GAAG,uBAAuB;GAEvC,IAAI,cAAc,IAAI;GACtB,IAAI,cAAc,IAAI;AAEtB,iBAAc,MAAM,aAAa,GAAG,MAAM;AAC1C,iBAAc,MAAM,aAAa,GAAG,OAAO;GAE3C,MAAM,aAAa,cAAc;GACjC,MAAM,aAAa,MAAM,EAAE,cAAc,UAAU,GAAG,GAAG,EAAE;AAE3D,OAAI,YAAY,cAAc,MAAM;AACpC,OAAI,WAAW,cAAc,OAAO;AAEpC,SAAM,aAAa;AACnB,SAAM,aAAa;AAEnB,QAAK,gBAAgB;IAAE;IAAY;IAAY,CAAC;;AAGlD,cACQ;GAAC,QAAA,MAAM;GAAK,QAAA,MAAM;GAAY,QAAA,MAAM;GAAW,GACpD,CAAC,KAAK,YAAY,gBAAgB;AACjC,SAAM,YAAY,SAAS,IAAI;AAC/B,SAAM,aAAa;AACnB,SAAM,aAAa;AACnB,mBAAgB;IAEnB;AAED,kBAAgB;AACd,mBAAgB;IAChB;EAEF,MAAM,YAAY,GAAG,EAAE,MAAM,uDAAuD,CAAC;;uBAInF,mBAoBM,OApBN,WAoBM;aAnBA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,kBAAc,cAAgB,KAAK,MAAM,MAAA,MAAK,CAAC,aAAU,IAAA,CAAA,gBAAwB,KAAK,MAAM,MAAA,MAAK,CAAC,aAAU,IAAA,CAAA;IAC7G,WAAQ;IACP,OAAO,MAAA,UAAS,CAAA,EAAA,OAAU,MAAA,GAAE,CAACA,KAAAA,OAAO,MAAK,EAAA,CAAA;;OAC7BA,KAAAA;IAAM,OAAS,KAAA;IAAS,EAAA;IACpC,OAAK,EAAA,iBAAqB,MAAA,MAAK,CAAC,WAAS;IACzC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,aAAY,CAAC,OAAM;;8BAEhC,mBAA2E,OAAA,EAAtE,OAAM,+DAA6D,EAAA,MAAA,GAAA;8BACxE,mBAA2E,OAAA,EAAtE,OAAM,+DAA6D,EAAA,MAAA,GAAA;IACxE,mBAIE,OAAA;KAHA,WAAQ;KACR,OAAM;KACL,OAAK,eAAE,MAAA,YAAW,CAAA"}
+{"version":3,"file":"RuiColorBoard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn, tv } from '@/utils/tv';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer' });\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAeA,MAAM,OAAO;EAIb,MAAM,UAAU,eAA4B,SAAS;EAErD,MAAM,QAAQ,SAAS;GACrB,WAAW,SAAS,QAAA,MAAM,GAAG;GAC7B,YAAY,QAAA,MAAM;GAClB,YAAY,QAAA,MAAM;EACpB,CAAC;EAED,MAAM,YAAY,IAAY,CAAC;EAC/B,MAAM,aAAa,IAAY,CAAC;EAEhC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,SAAS;EAE3E,MAAM,cAAc,gBAA+C;GACjE,KAAK,GAAG,IAAI,SAAS,IAAI,IAAI;GAC7B,MAAM,GAAG,IAAI,UAAU,IAAI,IAAI;EACjC,EAAE;EAEF,SAAS,SAAS,KAAqB;GACrC,OAAO,UAAU;IAAE,GAAG;IAAK,GAAG;IAAG,GAAG;GAAE,CAAC,CAAC,CAAC,YAAY;EACvD;EAEA,SAAS,iBAAuB;GAC9B,IAAI,YAAY,MAAM,UAAU;GAChC,IAAI,WAAW,IAAI,MAAM,UAAU;EACrC;EAEA,SAAS,UAAU,GAAW,GAAiB;GAC7C,MAAM,KAAK,IAAI,OAAO;GACtB,IAAI,CAAC,IACH;GAGF,MAAM,EAAE,OAAO,QAAQ,MAAM,QADhB,GAAG,sBACqB;GACrC,IAAI,cAAc,IAAI;GACtB,IAAI,cAAc,IAAI;GAEtB,cAAc,MAAM,aAAa,GAAG,KAAK;GACzC,cAAc,MAAM,aAAa,GAAG,MAAM;GAE1C,MAAM,aAAa,cAAc;GACjC,MAAM,aAAa,MAAM,EAAE,cAAc,UAAU,GAAG,GAAG,CAAC;GAE1D,IAAI,YAAY,cAAc,KAAK;GACnC,IAAI,WAAW,cAAc,MAAM;GAEnC,MAAM,aAAa;GACnB,MAAM,aAAa;GAEnB,KAAK,gBAAgB;IAAE;IAAY;GAAW,CAAC;EACjD;EAEA,YACQ;GAAC,QAAA,MAAM;GAAK,QAAA,MAAM;GAAY,QAAA,MAAM;EAAU,IACnD,CAAC,KAAK,YAAY,gBAAgB;GACjC,MAAM,YAAY,SAAS,GAAG;GAC9B,MAAM,aAAa;GACnB,MAAM,aAAa;GACnB,eAAe;EACjB,CACF;EAEA,gBAAgB;GACd,eAAe;EACjB,CAAC;EAED,MAAM,YAAY,GAAG,EAAE,MAAM,sDAAsD,CAAC;;uBAIlF,mBAoBM,OApBN,WAoBM;aAnBA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,kBAAc,cAAgB,KAAK,MAAM,MAAA,KAAA,CAAK,CAAC,aAAU,GAAA,EAAA,gBAAwB,KAAK,MAAM,MAAA,KAAA,CAAK,CAAC,aAAU,GAAA,EAAA;IAC7G,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;;OAC7BA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,OAAK,EAAA,iBAAqB,MAAA,KAAA,CAAK,CAAC,UAAS;IACzC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAA,CAAY,CAAC,MAAM;;8BAEhC,mBAA2E,OAAA,EAAtE,OAAM,8DAA6D,GAAA,MAAA,EAAA;8BACxE,mBAA2E,OAAA,EAAtE,OAAM,8DAA6D,GAAA,MAAA,EAAA;IACxE,mBAIE,OAAA;KAHA,WAAQ;KACR,OAAM;KACL,OAAK,eAAE,MAAA,WAAA,CAAW"}

package/dist/components/color-picker/RuiColorDisplay.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,7 @@ var _hoisted_1 = {
 	key: 0,
 	class: "text-rui-success"
 };
-var RuiColorDisplay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiColorDisplay_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiColorDisplay",
 	inheritAttrs: false,
 	__name: "RuiColorDisplay",

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

@@ -1 +1 @@
-{"version":3,"file":"RuiColorDisplay.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\n\ndefineOptions({\n  name: 'RuiColorDisplay',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: string;\n}>();\n\nconst { copy, copied } = useClipboard({ source: () => color });\n</script>\n\n<template>\n  <RuiTooltip\n    :options=\"{ placement: 'top' }\"\n    :close-delay=\"400\"\n    :class-names=\"{ tooltip: 'text-center' }\"\n    v-bind=\"$attrs\"\n  >\n    <template #activator>\n      <div\n        class=\"w-8 h-8 min-w-8 min-h-8 rounded-full cursor-pointer\"\n        data-id=\"color-display\"\n        :style=\"{ background: color }\"\n        @click=\"copy()\"\n      />\n    </template>\n    <div :class=\"{ 'h-0 overflow-hidden': copied }\">\n      Click to copy\n    </div>\n    <div\n      v-if=\"copied\"\n      class=\"text-rui-success\"\n    >\n      COPIED!\n    </div>\n  </RuiTooltip>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAYA,MAAM,EAAE,MAAM,WAAW,aAAa,EAAE,cAAc,QAAA,OAAO,CAAC;;uBAI5D,YAuBa,oBAvBb,WAuBa;IAtBV,SAAS,EAAA,WAAA,OAAoB;IAC7B,eAAa;IACb,eAAa,EAAA,SAAA,eAAA;MACNA,KAAAA,OAAM,EAAA;IAEH,WAAS,cAMhB,CALF,mBAKE,OAAA;KAJA,OAAM;KACN,WAAQ;KACP,OAAK,eAAA,EAAA,YAAgB,QAAA,OAAK,CAAA;KAC1B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,KAAI,EAAA;;2BAKV,CAFN,mBAEM,OAAA,EAFA,OAAK,eAAA,EAAA,uBAA2B,MAAA,OAAM,EAAA,CAAA,EAAA,EAAI,mBAEhD,EAAA,EAEQ,MAAA,OAAM,IAAA,WAAA,EADd,mBAKM,OALN,YAGC,YAED,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiColorDisplay.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\n\ndefineOptions({\n  name: 'RuiColorDisplay',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: string;\n}>();\n\nconst { copy, copied } = useClipboard({ source: () => color });\n</script>\n\n<template>\n  <RuiTooltip\n    :options=\"{ placement: 'top' }\"\n    :close-delay=\"400\"\n    :class-names=\"{ tooltip: 'text-center' }\"\n    v-bind=\"$attrs\"\n  >\n    <template #activator>\n      <div\n        class=\"w-8 h-8 min-w-8 min-h-8 rounded-full cursor-pointer\"\n        data-id=\"color-display\"\n        :style=\"{ background: color }\"\n        @click=\"copy()\"\n      />\n    </template>\n    <div :class=\"{ 'h-0 overflow-hidden': copied }\">\n      Click to copy\n    </div>\n    <div\n      v-if=\"copied\"\n      class=\"text-rui-success\"\n    >\n      COPIED!\n    </div>\n  </RuiTooltip>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAYA,MAAM,EAAE,MAAM,WAAW,aAAa,EAAE,cAAc,QAAA,MAAM,CAAC;;uBAI3D,YAuBa,oBAvBb,WAuBa;IAtBV,SAAS,EAAA,WAAA,MAAA;IACT,eAAa;IACb,eAAa,EAAA,SAAA,cAAA;MACNA,KAAAA,MAAM,GAAA;IAEH,WAAS,cAMhB,CALF,mBAKE,OAAA;KAJA,OAAM;KACN,WAAQ;KACP,OAAK,eAAA,EAAA,YAAgB,QAAA,MAAK,CAAA;KAC1B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,IAAA,CAAI,CAAA;;2BAKV,CAFN,mBAEM,OAAA,EAFA,OAAK,eAAA,EAAA,uBAA2B,MAAA,MAAA,EAAM,CAAA,EAAA,GAAI,mBAEhD,CAAA,GAEQ,MAAA,MAAA,KAAA,UAAA,GADR,mBAKM,OALN,YAGC,WAED,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/color-picker/RuiColorHue.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,7 @@ import { clamp, get, set } from "@vueuse/shared";
 var _hoisted_1 = ["aria-valuenow"];
 var MAX_HUE = 360;
 var CURSOR_WIDTH = 16;
-var RuiColorHue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiColorHue_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiColorHue",
 	inheritAttrs: false,
 	__name: "RuiColorHue",

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

@@ -1 +1 @@
-{"version":3,"file":"RuiColorHue.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { cn, tv } from '@/utils/tv';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * MAX_HUE));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum' });\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    data-id=\"color-hue\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;AAoBA,IAAM,UAAU;AAChB,IAAM,eAAe;;;;;;;;;;;EALrB,MAAM,aAAa,SAAmB,SAAA,aAAoB;EAE1D,MAAM,aAAa,eAA4B,aAAa;EAI5D,MAAM,aAAa,IAAY,GAAG;EAElC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,QAAQ;EAE1E,MAAM,cAAc,gBAAkC,EACpD,MAAM,IAAI,WAAW,EACtB,EAAE;EAEH,SAAS,SAAS,OAAsB;GACtC,MAAM,aAAa,eAAe;GAClC,MAAM,aAAa,QAAQ;AAG3B,UAAO;IAAE;IAAY;IAAY,gBAFV,aAAa;IAEa;;EAGnD,SAAS,iBAAuB;AAC9B,OAAI,YAAY,eAAe,CAAC;;EAGlC,SAAS,gBAAwB;GAC/B,MAAM,KAAK,IAAI,WAAW;AAC1B,OAAI,CAAC,GACH,QAAO;GAGT,MAAM,cADO,GAAG,uBAAuB,CACd;GACzB,MAAM,EAAE,YAAY,mBAAmB,SAAS,YAAY;GAE5D,MAAM,SAAS,IAAI,WAAW;AAI9B,UAAO,QADY,iBAFH,WAAW,UAAU,UAAU,SAAS,WAEV,WAAY,iBAAiB,eAAe,IAAI,CACpE,MAAM,WAAW;;EAG7C,SAAS,QAAQ,GAAiB;GAChC,MAAM,KAAK,IAAI,WAAW;AAC1B,OAAI,CAAC,GACH;GAEF,MAAM,OAAO,GAAG,uBAAuB;GACvC,IAAI,cAAc,IAAI,KAAK;GAE3B,MAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,MAAM;AACvE,iBAAc,MAAM,aAAa,YAAY,WAAW;AAExD,OAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,QAAQ,CAAC;;AAGtF,QAAM,kBAAkB;AACtB,mBAAgB;IAChB;AAEF,kBAAgB;AACd,mBAAgB;IAChB;EAEF,MAAM,YAAY,GAAG,EAAE,MAAM,qEAAqE,CAAC;;uBAIjG,mBAmBM,OAnBN,WAmBM;aAlBA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,iBAAe,WAAA;IAChB,iBAAc;IACd,iBAAc;IACd,WAAQ;IACP,OAAO,MAAA,UAAS,CAAA,EAAA,OAAU,MAAA,GAAE,CAACA,KAAAA,OAAO,MAAK,EAAA,CAAA;;OAC7BA,KAAAA;IAAM,OAAS,KAAA;IAAS,EAAA;IACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,aAAY,CAAC,OAAM;QAEhC,mBAIE,OAAA;IAHA,WAAQ;IACR,OAAM;IACL,OAAK,eAAE,MAAA,YAAW,CAAA"}
+{"version":3,"file":"RuiColorHue.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { cn, tv } from '@/utils/tv';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * MAX_HUE));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum' });\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    data-id=\"color-hue\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;AAoBA,IAAM,UAAU;AAChB,IAAM,eAAe;;;;;;;;;;;EALrB,MAAM,aAAa,SAAmB,SAAA,YAAmB;EAEzD,MAAM,aAAa,eAA4B,YAAY;EAI3D,MAAM,aAAa,IAAY,EAAE;EAEjC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,OAAO;EAEzE,MAAM,cAAc,gBAAkC,EACpD,MAAM,IAAI,UAAU,EACtB,EAAE;EAEF,SAAS,SAAS,OAAsB;GACtC,MAAM,aAAa,eAAe;GAClC,MAAM,aAAa,QAAQ;GAG3B,OAAO;IAAE;IAAY;IAAY,gBAFV,aAAa;GAEY;EAClD;EAEA,SAAS,iBAAuB;GAC9B,IAAI,YAAY,cAAc,CAAC;EACjC;EAEA,SAAS,gBAAwB;GAC/B,MAAM,KAAK,IAAI,UAAU;GACzB,IAAI,CAAC,IACH,OAAO;GAGT,MAAM,cADO,GAAG,sBACI,CAAA,CAAK;GACzB,MAAM,EAAE,YAAY,mBAAmB,SAAS,WAAW;GAE3D,MAAM,SAAS,IAAI,UAAU;GAI7B,OAAO,QADY,iBAFH,WAAW,UAAU,UAAU,SAAS,WAEV,WAAY,iBAAiB,eAAe,GAC3E,EAAW,MAAM,WAAW;EAC7C;EAEA,SAAS,QAAQ,GAAiB;GAChC,MAAM,KAAK,IAAI,UAAU;GACzB,IAAI,CAAC,IACH;GAEF,MAAM,OAAO,GAAG,sBAAsB;GACtC,IAAI,cAAc,IAAI,KAAK;GAE3B,MAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,KAAK;GACtE,cAAc,MAAM,aAAa,YAAY,UAAU;GAEvD,IAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,OAAO,CAAC;EACrF;EAEA,MAAM,kBAAkB;GACtB,eAAe;EACjB,CAAC;EAED,gBAAgB;GACd,eAAe;EACjB,CAAC;EAED,MAAM,YAAY,GAAG,EAAE,MAAM,oEAAoE,CAAC;;uBAIhG,mBAmBM,OAnBN,WAmBM;aAlBA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,iBAAe,WAAA;IAChB,iBAAc;IACd,iBAAc;IACd,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;;OAC7BA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAA,CAAY,CAAC,MAAM;QAEhC,mBAIE,OAAA;IAHA,WAAQ;IACR,OAAM;IACL,OAAK,eAAE,MAAA,WAAA,CAAW"}

package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js

@@ -15,7 +15,7 @@ var _hoisted_3 = {
 var _hoisted_4 = { class: "uppercase text-rui-text-secondary text-sm" };
 var MAX_RGB = 255;
 var DEFAULT_HEX = "000000";
-var RuiColorInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiColorInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiColorInput",
 	inheritAttrs: false,
 	__name: "RuiColorInput",

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

@@ -1 +1 @@
-{"version":3,"file":"RuiColorInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, ColorFormat } from './utils';\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\ndefineOptions({\n  name: 'RuiColorInput',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<Color>({ required: true });\n\nconst MAX_RGB = 255;\nconst VALID_HEX_LENGTHS = [3, 4, 6];\nconst DEFAULT_HEX = '000000';\n\nconst inputType = ref<ColorFormat>('hex');\nconst state = reactive({\n  color: get(modelValue),\n  hex: get(modelValue).hex,\n  rgb: get(modelValue).rgb,\n});\n\nfunction applyRgbValue(value: string, key: number): void {\n  if (!state.rgb || !state.color)\n    return;\n\n  const clamped = clamp(Number(value), 0, MAX_RGB);\n  state.rgb[key] = clamped;\n  const [r, g, b] = state.rgb;\n  state.color.hex = tinycolor({ r, g, b }).toHex();\n}\n\nconst onBlurChange = useDebounceFn((format: ColorFormat, event: Event, key?: number) => {\n  if (!state.color)\n    return;\n\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && VALID_HEX_LENGTHS.includes(hex.length))\n      state.color.hex = hex;\n    else state.color.hex = DEFAULT_HEX;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 100);\n\nconst onInputChange = useDebounceFn((format: ColorFormat, value: string, key?: number) => {\n  if (!value)\n    return;\n\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && state.color && hex.length === 6)\n      state.color.hex = hex;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 300);\n\nfunction onInputTypeChange(): void {\n  set(inputType, get(inputType) === 'rgb' ? 'hex' : 'rgb');\n}\n\nwatch(\n  () => {\n    const color = get(modelValue);\n    return [color.hex, ...color.rgb] as const;\n  },\n  () => {\n    const color = get(modelValue);\n    state.color = color;\n    state.hex = color.hex;\n    state.rgb = color.rgb;\n  },\n);\n</script>\n\n<template>\n  <div\n    data-id=\"color-input\"\n    class=\"flex justify-center gap-2\"\n    v-bind=\"$attrs\"\n  >\n    <div class=\"flex flex-col items-center gap-1 w-[16rem]\">\n      <div class=\"w-full\">\n        <RuiTextField\n          v-if=\"inputType === 'hex'\"\n          v-model=\"state.hex\"\n          variant=\"outlined\"\n          class=\"flex-1 w-full [&_input]:uppercase\"\n          maxlength=\"6\"\n          color=\"primary\"\n          dense\n          hide-details\n          @update:model-value=\"onInputChange(inputType, $event)\"\n          @blur=\"onBlurChange(inputType, $event)\"\n        >\n          <template #prepend>\n            <span class=\"text-rui-text\"> # </span>\n          </template>\n        </RuiTextField>\n        <div\n          v-else\n          class=\"flex flex-1 gap-1\"\n        >\n          <RuiTextField\n            v-for=\"(v, i) in state.rgb\"\n            :key=\"i\"\n            :model-value=\"v.toString()\"\n            variant=\"outlined\"\n            class=\"[&_input]:text-center w-full\"\n            maxlength=\"3\"\n            color=\"primary\"\n            dense\n            hide-details\n            @update:model-value=\"onInputChange(inputType, $event, i)\"\n            @blur=\"onBlurChange(inputType, $event, i)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"uppercase text-rui-text-secondary text-sm\">\n        {{ inputType }}\n      </div>\n    </div>\n    <RuiButton\n      class=\"h-10\"\n      variant=\"text\"\n      @click=\"onInputTypeChange()\"\n    >\n      <RuiIcon name=\"lu-chevrons-up-down\" />\n    </RuiButton>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiColorInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, ColorFormat } from './utils';\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\ndefineOptions({\n  name: 'RuiColorInput',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<Color>({ required: true });\n\nconst MAX_RGB = 255;\nconst VALID_HEX_LENGTHS = [3, 4, 6];\nconst DEFAULT_HEX = '000000';\n\nconst inputType = ref<ColorFormat>('hex');\nconst state = reactive({\n  color: get(modelValue),\n  hex: get(modelValue).hex,\n  rgb: get(modelValue).rgb,\n});\n\nfunction applyRgbValue(value: string, key: number): void {\n  if (!state.rgb || !state.color)\n    return;\n\n  const clamped = clamp(Number(value), 0, MAX_RGB);\n  state.rgb[key] = clamped;\n  const [r, g, b] = state.rgb;\n  state.color.hex = tinycolor({ r, g, b }).toHex();\n}\n\nconst onBlurChange = useDebounceFn((format: ColorFormat, event: Event, key?: number) => {\n  if (!state.color)\n    return;\n\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && VALID_HEX_LENGTHS.includes(hex.length))\n      state.color.hex = hex;\n    else state.color.hex = DEFAULT_HEX;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 100);\n\nconst onInputChange = useDebounceFn((format: ColorFormat, value: string, key?: number) => {\n  if (!value)\n    return;\n\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && state.color && hex.length === 6)\n      state.color.hex = hex;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 300);\n\nfunction onInputTypeChange(): void {\n  set(inputType, get(inputType) === 'rgb' ? 'hex' : 'rgb');\n}\n\nwatch(\n  () => {\n    const color = get(modelValue);\n    return [color.hex, ...color.rgb] as const;\n  },\n  () => {\n    const color = get(modelValue);\n    state.color = color;\n    state.hex = color.hex;\n    state.rgb = color.rgb;\n  },\n);\n</script>\n\n<template>\n  <div\n    data-id=\"color-input\"\n    class=\"flex justify-center gap-2\"\n    v-bind=\"$attrs\"\n  >\n    <div class=\"flex flex-col items-center gap-1 w-[16rem]\">\n      <div class=\"w-full\">\n        <RuiTextField\n          v-if=\"inputType === 'hex'\"\n          v-model=\"state.hex\"\n          variant=\"outlined\"\n          class=\"flex-1 w-full [&_input]:uppercase\"\n          maxlength=\"6\"\n          color=\"primary\"\n          dense\n          hide-details\n          @update:model-value=\"onInputChange(inputType, $event)\"\n          @blur=\"onBlurChange(inputType, $event)\"\n        >\n          <template #prepend>\n            <span class=\"text-rui-text\"> # </span>\n          </template>\n        </RuiTextField>\n        <div\n          v-else\n          class=\"flex flex-1 gap-1\"\n        >\n          <RuiTextField\n            v-for=\"(v, i) in state.rgb\"\n            :key=\"i\"\n            :model-value=\"v.toString()\"\n            variant=\"outlined\"\n            class=\"[&_input]:text-center w-full\"\n            maxlength=\"3\"\n            color=\"primary\"\n            dense\n            hide-details\n            @update:model-value=\"onInputChange(inputType, $event, i)\"\n            @blur=\"onBlurChange(inputType, $event, i)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"uppercase text-rui-text-secondary text-sm\">\n        {{ inputType }}\n      </div>\n    </div>\n    <RuiButton\n      class=\"h-10\"\n      variant=\"text\"\n      @click=\"onInputTypeChange()\"\n    >\n      <RuiIcon name=\"lu-chevrons-up-down\" />\n    </RuiButton>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -10,7 +10,7 @@ import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/color-picker/RuiColorPicker.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col gap-5 p-4" };
 var _hoisted_2 = { class: "flex items-center gap-4" };
-var RuiColorPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiColorPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiColorPicker",
 	inheritAttrs: false,
 	__name: "RuiColorPicker",

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"],"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, tv } from '@/utils/tv';\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\nconst rootStyle = tv({ base: 'relative select-none bg-initial' });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"rootStyle({ 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":";;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,aAAa,SAAmB,SAAA,aAAiB;EAEvD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,MAAI,WAAW,CAAC,EAClC,CAAC;EAEF,SAAS,cAAc,EACrB,YACA,cAIO;AACP,SAAM,MAAM,aAAa;AACzB,SAAM,MAAM,aAAa;;AAG3B,WACE,aACC,UAAkB;AACjB,OAAI,MAAM,MAAM,QAAQ,MACtB,OAAM,QAAQ,IAAI,MAAM,MAAM;IAEnC;AAED,cACQ,MAAM,MAAM,MACjB,QAAgB;AACf,SAAI,YAAY,IAAI;KAEtB,EAAE,WAAW,MAAM,CACpB;EAED,MAAM,YAAY,GAAG,EAAE,MAAM,mCAAmC,CAAC;;uBAI/D,mBAsBM,OAtBN,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAO,MAAA,UAAS,CAAA,EAAA,OAAU,MAAA,GAAE,CAACA,KAAAA,OAAO,MAAK,EAAA,CAAA;;OAC7BA,KAAAA;IAAM,OAAS,KAAA;IAAS,CAAA,EAAA,CAErC,YAGE,uBAAA;IAFC,OAAO,MAAA,MAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,OAAM;2BAErC,mBAUM,OAVN,YAUM,CATJ,mBAMM,OANN,YAMM,CALJ,YAAkD,yBAAA,EAAhC,OAAO,MAAA,MAAK,CAAC,MAAM,WAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,EACrC,YAGE,qBAAA;gBAFS,MAAA,MAAK,CAAC,MAAM;uEAAZ,MAAK,CAAC,MAAM,MAAG;IACxB,OAAM;kCAIV,YAAuC,uBAAA;gBAAf,MAAA,MAAK,CAAC;uEAAN,MAAK,CAAC,QAAK"}
+{"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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, tv } from '@/utils/tv';\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\nconst rootStyle = tv({ base: 'relative select-none bg-initial' });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"rootStyle({ 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":";;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,aAAa,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,MAAI,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,MAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,kCAAkC,CAAC;;uBAI9D,mBAsBM,OAtBN,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;;OAC7BA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErC,YAGE,uBAAA;IAFC,OAAO,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;2BAErC,mBAUM,OAVN,YAUM,CATJ,mBAMM,OANN,YAMM,CALJ,YAAkD,yBAAA,EAAhC,OAAO,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrC,YAGE,qBAAA;gBAFS,MAAA,KAAA,CAAK,CAAC,MAAM;uEAAZ,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;kCAIV,YAAuC,uBAAA;gBAAf,MAAA,KAAA,CAAK,CAAC;uEAAN,KAAA,CAAK,CAAC,QAAK"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/color-picker/utils.ts"],"sourcesContent":["import tinycolor, { type ColorInput } from 'tinycolor2';\n\nexport type ColorFormat = 'rgb' | 'hex';\n\nconst MAX_HUE = 360;\nconst ALPHA_SCALE = 100;\n\nexport function roundTwoDecimal(num: number): number {\n  return Math.round(num * 100) / 100;\n}\n\nexport class Color {\n  instance: tinycolor.Instance;\n  alphaValue = 0;\n\n  // rgb\n  redValue = 0;\n  greenValue = 0;\n  blueValue = 0;\n\n  // HSV\n  hueValue = 0;\n  saturationValue = 0;\n  brightnessValue = 0;\n\n  constructor(input?: ColorInput) {\n    this.instance = tinycolor(input);\n\n    this.initRgb();\n    this.initHsb();\n    this.initAlpha();\n  }\n\n  initAlpha(): void {\n    const initAlpha = this.instance.getAlpha();\n    this.alphaValue = Math.min(1, initAlpha) * ALPHA_SCALE;\n  }\n\n  initRgb(): void {\n    const { b, g, r } = this.instance.toRgb();\n\n    this.redValue = roundTwoDecimal(r);\n    this.greenValue = roundTwoDecimal(g);\n    this.blueValue = roundTwoDecimal(b);\n  }\n\n  initHsb(): void {\n    const { h, s, v } = this.instance.toHsv();\n\n    this.hueValue = Math.min(MAX_HUE, Math.ceil(h));\n    this.saturationValue = roundTwoDecimal(s);\n    this.brightnessValue = roundTwoDecimal(v);\n  }\n\n  updateFromHsv(h: number, s: number, v: number): void {\n    this.instance = tinycolor({\n      a: this.alphaValue / ALPHA_SCALE,\n      h: roundTwoDecimal(h),\n      s: roundTwoDecimal(s),\n      v: roundTwoDecimal(v),\n    });\n    this.initRgb();\n  }\n\n  updateFromRgb(r: number, g: number, b: number): void {\n    this.instance = tinycolor({\n      a: this.alphaValue / ALPHA_SCALE,\n      r: roundTwoDecimal(r),\n      g: roundTwoDecimal(g),\n      b: roundTwoDecimal(b),\n    });\n    this.initHsb();\n  }\n\n  toString(format?: ColorFormat): string {\n    return this.instance.toString(format);\n  }\n\n  get hexString(): string {\n    return this.instance.toHexString();\n  }\n\n  get hex(): string {\n    return this.instance.toHex();\n  }\n\n  set hex(hexString: string) {\n    this.instance = tinycolor(hexString);\n    this.initHsb();\n    this.initRgb();\n    this.initAlpha();\n  }\n\n  set hue(value: number) {\n    if (this.saturation === 0 && this.brightness === 0) {\n      this.saturationValue = 1;\n      this.brightnessValue = 1;\n    }\n    this.updateFromHsv(value, this.saturation, this.brightness);\n    this.hueValue = roundTwoDecimal(value);\n  }\n\n  get hue(): number {\n    return this.hueValue;\n  }\n\n  set saturation(value: number) {\n    this.updateFromHsv(this.hue, value, this.brightness);\n    this.saturationValue = roundTwoDecimal(value);\n  }\n\n  get saturation(): number {\n    return this.saturationValue;\n  }\n\n  set brightness(value: number) {\n    this.updateFromHsv(this.hue, this.saturation, value);\n    this.brightnessValue = roundTwoDecimal(value);\n  }\n\n  get brightness(): number {\n    return this.brightnessValue;\n  }\n\n  set red(value: number) {\n    this.updateFromRgb(value, this.green, this.blue);\n    this.redValue = roundTwoDecimal(value);\n  }\n\n  get red(): number {\n    return this.redValue;\n  }\n\n  set green(value: number) {\n    this.updateFromRgb(this.red, value, this.blue);\n    this.greenValue = roundTwoDecimal(value);\n  }\n\n  get green(): number {\n    return this.greenValue;\n  }\n\n  set blue(value: number) {\n    this.updateFromRgb(this.red, this.green, value);\n    this.blueValue = roundTwoDecimal(value);\n  }\n\n  get blue(): number {\n    return this.blueValue;\n  }\n\n  get rgb(): [number, number, number] {\n    return [this.red, this.green, this.blue];\n  }\n}\n\ntype DragHandler = (x: number, y: number) => void;\n\ninterface DragEvents {\n  handleClick: (e: { clientX: number; clientY: number }) => void;\n  onMouseDown: (e: MouseEvent) => void;\n  onTouchStart: (e: TouchEvent) => void;\n}\n\nexport function useElementDrag(handler: DragHandler): DragEvents {\n  let rafId: number | null = null;\n\n  function handleClick(e: { clientX: number; clientY: number }): void {\n    if (rafId !== null)\n      return;\n\n    rafId = requestAnimationFrame(() => {\n      handler(e.clientX, e.clientY);\n      rafId = null;\n    });\n  }\n\n  function handleTouchMove(e: TouchEvent): void {\n    e.preventDefault();\n    const touch = e.touches[0];\n    if (touch)\n      handleClick(touch);\n  }\n\n  function cancelRaf(): void {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n  }\n\n  function cleanup(): void {\n    cancelRaf();\n    if (typeof window !== 'undefined') {\n      window.removeEventListener('mousemove', handleClick);\n      window.removeEventListener('mouseup', cleanup);\n      window.removeEventListener('touchmove', handleTouchMove);\n      window.removeEventListener('touchend', cleanup);\n    }\n  }\n\n  function onMouseDown(e: MouseEvent): void {\n    e.preventDefault();\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('mousemove', handleClick);\n      window.addEventListener('mouseup', cleanup);\n    }\n  }\n\n  function onTouchStart(e: TouchEvent): void {\n    e.preventDefault();\n    const touch = e.touches[0];\n    if (touch)\n      handleClick(touch);\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('touchmove', handleTouchMove, { passive: false });\n      window.addEventListener('touchend', cleanup);\n    }\n  }\n\n  onUnmounted(() => {\n    cleanup();\n  });\n\n  return {\n    handleClick,\n    onMouseDown,\n    onTouchStart,\n  };\n}\n"],"mappings":";;;AAIA,IAAM,UAAU;AAChB,IAAM,cAAc;AAEpB,SAAgB,gBAAgB,KAAqB;AACnD,QAAO,KAAK,MAAM,MAAM,IAAI,GAAG;;AAGjC,IAAa,QAAb,MAAmB;CACjB;CACA,aAAa;CAGb,WAAW;CACX,aAAa;CACb,YAAY;CAGZ,WAAW;CACX,kBAAkB;CAClB,kBAAkB;CAElB,YAAY,OAAoB;AAC9B,OAAK,WAAW,UAAU,MAAM;AAEhC,OAAK,SAAS;AACd,OAAK,SAAS;AACd,OAAK,WAAW;;CAGlB,YAAkB;EAChB,MAAM,YAAY,KAAK,SAAS,UAAU;AAC1C,OAAK,aAAa,KAAK,IAAI,GAAG,UAAU,GAAG;;CAG7C,UAAgB;EACd,MAAM,EAAE,GAAG,GAAG,MAAM,KAAK,SAAS,OAAO;AAEzC,OAAK,WAAW,gBAAgB,EAAE;AAClC,OAAK,aAAa,gBAAgB,EAAE;AACpC,OAAK,YAAY,gBAAgB,EAAE;;CAGrC,UAAgB;EACd,MAAM,EAAE,GAAG,GAAG,MAAM,KAAK,SAAS,OAAO;AAEzC,OAAK,WAAW,KAAK,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;AAC/C,OAAK,kBAAkB,gBAAgB,EAAE;AACzC,OAAK,kBAAkB,gBAAgB,EAAE;;CAG3C,cAAc,GAAW,GAAW,GAAiB;AACnD,OAAK,WAAW,UAAU;GACxB,GAAG,KAAK,aAAa;GACrB,GAAG,gBAAgB,EAAE;GACrB,GAAG,gBAAgB,EAAE;GACrB,GAAG,gBAAgB,EAAA;GACpB,CAAC;AACF,OAAK,SAAS;;CAGhB,cAAc,GAAW,GAAW,GAAiB;AACnD,OAAK,WAAW,UAAU;GACxB,GAAG,KAAK,aAAa;GACrB,GAAG,gBAAgB,EAAE;GACrB,GAAG,gBAAgB,EAAE;GACrB,GAAG,gBAAgB,EAAA;GACpB,CAAC;AACF,OAAK,SAAS;;CAGhB,SAAS,QAA8B;AACrC,SAAO,KAAK,SAAS,SAAS,OAAO;;CAGvC,IAAI,YAAoB;AACtB,SAAO,KAAK,SAAS,aAAa;;CAGpC,IAAI,MAAc;AAChB,SAAO,KAAK,SAAS,OAAO;;CAG9B,IAAI,IAAI,WAAmB;AACzB,OAAK,WAAW,UAAU,UAAU;AACpC,OAAK,SAAS;AACd,OAAK,SAAS;AACd,OAAK,WAAW;;CAGlB,IAAI,IAAI,OAAe;AACrB,MAAI,KAAK,eAAe,KAAK,KAAK,eAAe,GAAG;AAClD,QAAK,kBAAkB;AACvB,QAAK,kBAAkB;;AAEzB,OAAK,cAAc,OAAO,KAAK,YAAY,KAAK,WAAW;AAC3D,OAAK,WAAW,gBAAgB,MAAM;;CAGxC,IAAI,MAAc;AAChB,SAAO,KAAK;;CAGd,IAAI,WAAW,OAAe;AAC5B,OAAK,cAAc,KAAK,KAAK,OAAO,KAAK,WAAW;AACpD,OAAK,kBAAkB,gBAAgB,MAAM;;CAG/C,IAAI,aAAqB;AACvB,SAAO,KAAK;;CAGd,IAAI,WAAW,OAAe;AAC5B,OAAK,cAAc,KAAK,KAAK,KAAK,YAAY,MAAM;AACpD,OAAK,kBAAkB,gBAAgB,MAAM;;CAG/C,IAAI,aAAqB;AACvB,SAAO,KAAK;;CAGd,IAAI,IAAI,OAAe;AACrB,OAAK,cAAc,OAAO,KAAK,OAAO,KAAK,KAAK;AAChD,OAAK,WAAW,gBAAgB,MAAM;;CAGxC,IAAI,MAAc;AAChB,SAAO,KAAK;;CAGd,IAAI,MAAM,OAAe;AACvB,OAAK,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK;AAC9C,OAAK,aAAa,gBAAgB,MAAM;;CAG1C,IAAI,QAAgB;AAClB,SAAO,KAAK;;CAGd,IAAI,KAAK,OAAe;AACtB,OAAK,cAAc,KAAK,KAAK,KAAK,OAAO,MAAM;AAC/C,OAAK,YAAY,gBAAgB,MAAM;;CAGzC,IAAI,OAAe;AACjB,SAAO,KAAK;;CAGd,IAAI,MAAgC;AAClC,SAAO;GAAC,KAAK;GAAK,KAAK;GAAO,KAAK;GAAK;;;AAY5C,SAAgB,eAAe,SAAkC;CAC/D,IAAI,QAAuB;CAE3B,SAAS,YAAY,GAA+C;AAClE,MAAI,UAAU,KACZ;AAEF,UAAQ,4BAA4B;AAClC,WAAQ,EAAE,SAAS,EAAE,QAAQ;AAC7B,WAAQ;IACR;;CAGJ,SAAS,gBAAgB,GAAqB;AAC5C,IAAE,gBAAgB;EAClB,MAAM,QAAQ,EAAE,QAAQ;AACxB,MAAI,MACF,aAAY,MAAM;;CAGtB,SAAS,YAAkB;AACzB,MAAI,UAAU,MAAM;AAClB,wBAAqB,MAAM;AAC3B,WAAQ;;;CAIZ,SAAS,UAAgB;AACvB,aAAW;AACX,MAAI,OAAO,WAAW,aAAa;AACjC,UAAO,oBAAoB,aAAa,YAAY;AACpD,UAAO,oBAAoB,WAAW,QAAQ;AAC9C,UAAO,oBAAoB,aAAa,gBAAgB;AACxD,UAAO,oBAAoB,YAAY,QAAQ;;;CAInD,SAAS,YAAY,GAAqB;AACxC,IAAE,gBAAgB;AAElB,MAAI,OAAO,WAAW,aAAa;AACjC,UAAO,iBAAiB,aAAa,YAAY;AACjD,UAAO,iBAAiB,WAAW,QAAQ;;;CAI/C,SAAS,aAAa,GAAqB;AACzC,IAAE,gBAAgB;EAClB,MAAM,QAAQ,EAAE,QAAQ;AACxB,MAAI,MACF,aAAY,MAAM;AAEpB,MAAI,OAAO,WAAW,aAAa;AACjC,UAAO,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,OAAO,CAAC;AACzE,UAAO,iBAAiB,YAAY,QAAQ;;;AAIhD,mBAAkB;AAChB,WAAS;GACT;AAEF,QAAO;EACL;EACA;EACA;EACD"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/color-picker/utils.ts"],"sourcesContent":["import tinycolor, { type ColorInput } from 'tinycolor2';\n\nexport type ColorFormat = 'rgb' | 'hex';\n\nconst MAX_HUE = 360;\nconst ALPHA_SCALE = 100;\n\nexport function roundTwoDecimal(num: number): number {\n  return Math.round(num * 100) / 100;\n}\n\nexport class Color {\n  instance: tinycolor.Instance;\n  alphaValue = 0;\n\n  // rgb\n  redValue = 0;\n  greenValue = 0;\n  blueValue = 0;\n\n  // HSV\n  hueValue = 0;\n  saturationValue = 0;\n  brightnessValue = 0;\n\n  constructor(input?: ColorInput) {\n    this.instance = tinycolor(input);\n\n    this.initRgb();\n    this.initHsb();\n    this.initAlpha();\n  }\n\n  initAlpha(): void {\n    const initAlpha = this.instance.getAlpha();\n    this.alphaValue = Math.min(1, initAlpha) * ALPHA_SCALE;\n  }\n\n  initRgb(): void {\n    const { b, g, r } = this.instance.toRgb();\n\n    this.redValue = roundTwoDecimal(r);\n    this.greenValue = roundTwoDecimal(g);\n    this.blueValue = roundTwoDecimal(b);\n  }\n\n  initHsb(): void {\n    const { h, s, v } = this.instance.toHsv();\n\n    this.hueValue = Math.min(MAX_HUE, Math.ceil(h));\n    this.saturationValue = roundTwoDecimal(s);\n    this.brightnessValue = roundTwoDecimal(v);\n  }\n\n  updateFromHsv(h: number, s: number, v: number): void {\n    this.instance = tinycolor({\n      a: this.alphaValue / ALPHA_SCALE,\n      h: roundTwoDecimal(h),\n      s: roundTwoDecimal(s),\n      v: roundTwoDecimal(v),\n    });\n    this.initRgb();\n  }\n\n  updateFromRgb(r: number, g: number, b: number): void {\n    this.instance = tinycolor({\n      a: this.alphaValue / ALPHA_SCALE,\n      r: roundTwoDecimal(r),\n      g: roundTwoDecimal(g),\n      b: roundTwoDecimal(b),\n    });\n    this.initHsb();\n  }\n\n  toString(format?: ColorFormat): string {\n    return this.instance.toString(format);\n  }\n\n  get hexString(): string {\n    return this.instance.toHexString();\n  }\n\n  get hex(): string {\n    return this.instance.toHex();\n  }\n\n  set hex(hexString: string) {\n    this.instance = tinycolor(hexString);\n    this.initHsb();\n    this.initRgb();\n    this.initAlpha();\n  }\n\n  set hue(value: number) {\n    if (this.saturation === 0 && this.brightness === 0) {\n      this.saturationValue = 1;\n      this.brightnessValue = 1;\n    }\n    this.updateFromHsv(value, this.saturation, this.brightness);\n    this.hueValue = roundTwoDecimal(value);\n  }\n\n  get hue(): number {\n    return this.hueValue;\n  }\n\n  set saturation(value: number) {\n    this.updateFromHsv(this.hue, value, this.brightness);\n    this.saturationValue = roundTwoDecimal(value);\n  }\n\n  get saturation(): number {\n    return this.saturationValue;\n  }\n\n  set brightness(value: number) {\n    this.updateFromHsv(this.hue, this.saturation, value);\n    this.brightnessValue = roundTwoDecimal(value);\n  }\n\n  get brightness(): number {\n    return this.brightnessValue;\n  }\n\n  set red(value: number) {\n    this.updateFromRgb(value, this.green, this.blue);\n    this.redValue = roundTwoDecimal(value);\n  }\n\n  get red(): number {\n    return this.redValue;\n  }\n\n  set green(value: number) {\n    this.updateFromRgb(this.red, value, this.blue);\n    this.greenValue = roundTwoDecimal(value);\n  }\n\n  get green(): number {\n    return this.greenValue;\n  }\n\n  set blue(value: number) {\n    this.updateFromRgb(this.red, this.green, value);\n    this.blueValue = roundTwoDecimal(value);\n  }\n\n  get blue(): number {\n    return this.blueValue;\n  }\n\n  get rgb(): [number, number, number] {\n    return [this.red, this.green, this.blue];\n  }\n}\n\ntype DragHandler = (x: number, y: number) => void;\n\ninterface DragEvents {\n  handleClick: (e: { clientX: number; clientY: number }) => void;\n  onMouseDown: (e: MouseEvent) => void;\n  onTouchStart: (e: TouchEvent) => void;\n}\n\nexport function useElementDrag(handler: DragHandler): DragEvents {\n  let rafId: number | null = null;\n\n  function handleClick(e: { clientX: number; clientY: number }): void {\n    if (rafId !== null)\n      return;\n\n    rafId = requestAnimationFrame(() => {\n      handler(e.clientX, e.clientY);\n      rafId = null;\n    });\n  }\n\n  function handleTouchMove(e: TouchEvent): void {\n    e.preventDefault();\n    const touch = e.touches[0];\n    if (touch)\n      handleClick(touch);\n  }\n\n  function cancelRaf(): void {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n  }\n\n  function cleanup(): void {\n    cancelRaf();\n    if (typeof window !== 'undefined') {\n      window.removeEventListener('mousemove', handleClick);\n      window.removeEventListener('mouseup', cleanup);\n      window.removeEventListener('touchmove', handleTouchMove);\n      window.removeEventListener('touchend', cleanup);\n    }\n  }\n\n  function onMouseDown(e: MouseEvent): void {\n    e.preventDefault();\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('mousemove', handleClick);\n      window.addEventListener('mouseup', cleanup);\n    }\n  }\n\n  function onTouchStart(e: TouchEvent): void {\n    e.preventDefault();\n    const touch = e.touches[0];\n    if (touch)\n      handleClick(touch);\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('touchmove', handleTouchMove, { passive: false });\n      window.addEventListener('touchend', cleanup);\n    }\n  }\n\n  onUnmounted(() => {\n    cleanup();\n  });\n\n  return {\n    handleClick,\n    onMouseDown,\n    onTouchStart,\n  };\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { 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, type DateTimePickerVariant } 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 RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { 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  variant?: DateTimePickerVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\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  hideDetails = false,\n  label = 'Pick a date',\n  variant = 'default',\n  hint,\n  maxDate,\n  minDate,\n  format = 'day-first',\n  accuracy = 'minute',\n  errorMessages = [],\n  successMessages = [],\n  required = false,\n} = defineProps<RuiDateTimePickerProps>();\n\ndefineSlots<{\n  'menu-content': () => any;\n}>();\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 textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('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 {\n  clear: clearSelection,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  selectedDay,\n  selectedHour,\n  selectedMillisecond,\n  selectedMinute,\n  selectedMonth,\n  selectedSecond,\n  selectedTime,\n  selectedTimezone,\n  selectedYear,\n  setNow,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy,\n  allowEmpty,\n  maxDate,\n  minDate,\n  modelValue,\n  type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\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: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\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});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst isOutlined = computed<boolean>(() => variant === 'outlined');\n\nconst formattedDisplay = computed<string>(() => {\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(selectedYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(selectedMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(selectedDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(selectedHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(selectedMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(selectedSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(selectedMillisecond, 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\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 float = computed<boolean>(() => (get(isOpen) || get(valueSet) || get(searchInputFocused)) && get(isOutlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof dateTimePickerStyles>>(() => dateTimePickerStyles({\n  filled: variant === 'filled',\n  outlined: get(isOutlined),\n  float: get(float),\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 combinedErrorMessages = computed<string[]>(() => {\n  if (!errorMessages)\n    return get(internalErrorMessages);\n\n  const propErrors = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  return [...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\nfunction handleInputClick(event: MouseEvent): void {\n  // Handle segment selection first, before any DOM changes from menu opening\n  handleClick(event);\n  // Open menu if not already open\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nconst anyMenuOpen = computed<boolean>(() => get(isOpen) || get(calendarMenuOpen));\n\nwatch(anyMenuOpen, (value) => {\n  set(menuOpen, value);\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    placement=\"bottom-start\"\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=\"!hideDetails\"\n    :persistent=\"calendarMenuOpen\"\n    full-width\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open }\">\n      <div\n        ref=\"activator\"\n        :class=\"ui.activator()\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(readonly ? {} : attrs),\n        }\"\n        data-id=\"activator\"\n        :aria-invalid=\"hasError\"\n        :tabindex=\"disabled || readonly ? -1 : 0\"\n        @mouseenter=\"isHovered = true\"\n        @mouseleave=\"isHovered = false\"\n        @click=\"setInputFocus()\"\n      >\n        <span\n          v-if=\"isOutlined && (searchInputFocused || open || valueSet)\"\n          data-id=\"label\"\n          :class=\"[\n            ui.label(),\n            { 'pr-2': !valueSet && !open && isOutlined },\n          ]\"\n        >\n          {{ label }}\n          <span\n            v-if=\"required\"\n            data-id=\"required-indicator\"\n            :class=\"ui.required()\"\n          >\n            ﹡\n          </span>\n        </span>\n\n        <span :class=\"ui.iconPrepend()\">\n          <RuiIcon\n            class=\"text-rui-text-secondary transition\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"ui.value()\">\n          <input\n            ref=\"textInput\"\n            :disabled=\"disabled\"\n            :value=\"formattedDisplay\"\n            class=\"bg-transparent outline-none flex-1 min-w-0\"\n            type=\"text\"\n            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"handleBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"handleKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\n        </div>\n\n        <RuiButton\n          v-if=\"allowEmpty && valueSet && !disabled\"\n          variant=\"text\"\n          icon\n          data-id=\"clear-button\"\n          size=\"sm\"\n          tabindex=\"-1\"\n          color=\"error\"\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=\"18\"\n          />\n        </RuiButton>\n\n        <span\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset\n        v-if=\"isOutlined\"\n        :class=\"ui.fieldset()\"\n      >\n        <legend :class=\"ui.legend()\">\n          {{ legendText }}\n        </legend>\n      </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=\"selectedHour\"\n        v-model:selected-minute=\"selectedMinute\"\n        v-model:selected-second=\"selectedSecond\"\n        v-model:selected-millisecond=\"selectedMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"selectedTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        @set-now=\"setNow()\"\n      >\n        <slot name=\"menu-content\" />\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { 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, type DateTimePickerVariant } 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 RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { 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  variant?: DateTimePickerVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\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  hideDetails = false,\n  label = 'Pick a date',\n  variant = 'default',\n  hint,\n  maxDate,\n  minDate,\n  format = 'day-first',\n  accuracy = 'minute',\n  errorMessages = [],\n  successMessages = [],\n  required = false,\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 textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('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 {\n  clear: clearSelection,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  selectedDay,\n  selectedHour,\n  selectedMillisecond,\n  selectedMinute,\n  selectedMonth,\n  selectedSecond,\n  selectedTime,\n  selectedTimezone,\n  selectedYear,\n  setNow,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy,\n  allowEmpty,\n  maxDate,\n  minDate,\n  modelValue,\n  type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\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: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\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});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst isOutlined = computed<boolean>(() => variant === 'outlined');\n\nconst formattedDisplay = computed<string>(() => {\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(selectedYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(selectedMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(selectedDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(selectedHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(selectedMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(selectedSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(selectedMillisecond, 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\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 float = computed<boolean>(() => (get(isOpen) || get(valueSet) || get(searchInputFocused)) && get(isOutlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof dateTimePickerStyles>>(() => dateTimePickerStyles({\n  filled: variant === 'filled',\n  outlined: get(isOutlined),\n  float: get(float),\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 combinedErrorMessages = computed<string[]>(() => {\n  if (!errorMessages)\n    return get(internalErrorMessages);\n\n  const propErrors = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  return [...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\nfunction handleInputClick(event: MouseEvent): void {\n  // Handle segment selection first, before any DOM changes from menu opening\n  handleClick(event);\n  // Open menu if not already open\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nconst anyMenuOpen = computed<boolean>(() => get(isOpen) || get(calendarMenuOpen));\n\nwatch(anyMenuOpen, (value) => {\n  set(menuOpen, value);\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    :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=\"!hideDetails\"\n    :persistent=\"calendarMenuOpen\"\n    full-width\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open }\">\n      <div\n        ref=\"activator\"\n        :class=\"ui.activator()\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(readonly ? {} : attrs),\n        }\"\n        data-id=\"activator\"\n        :aria-invalid=\"hasError\"\n        :tabindex=\"disabled || readonly ? -1 : 0\"\n        @mouseenter=\"isHovered = true\"\n        @mouseleave=\"isHovered = false\"\n        @click=\"setInputFocus()\"\n      >\n        <span\n          v-if=\"isOutlined && (searchInputFocused || open || valueSet)\"\n          data-id=\"label\"\n          :class=\"[\n            ui.label(),\n            { 'pr-2': !valueSet && !open && isOutlined },\n          ]\"\n        >\n          {{ label }}\n          <span\n            v-if=\"required\"\n            data-id=\"required-indicator\"\n            :class=\"ui.required()\"\n          >\n            ﹡\n          </span>\n        </span>\n\n        <span :class=\"ui.iconPrepend()\">\n          <RuiIcon\n            class=\"text-rui-text-secondary transition\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"ui.value()\">\n          <input\n            ref=\"textInput\"\n            :disabled=\"disabled\"\n            :value=\"formattedDisplay\"\n            class=\"bg-transparent outline-none flex-1 min-w-0\"\n            type=\"text\"\n            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"handleBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"handleKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\n        </div>\n\n        <RuiButton\n          v-if=\"allowEmpty && valueSet && !disabled\"\n          variant=\"text\"\n          icon\n          data-id=\"clear-button\"\n          size=\"sm\"\n          tabindex=\"-1\"\n          color=\"error\"\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=\"18\"\n          />\n        </RuiButton>\n\n        <span\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset\n        v-if=\"isOutlined\"\n        :class=\"ui.fieldset()\"\n      >\n        <legend :class=\"ui.legend()\">\n          {{ legendText }}\n        </legend>\n      </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=\"selectedHour\"\n        v-model:selected-minute=\"selectedMinute\"\n        v-model:selected-second=\"selectedSecond\"\n        v-model:selected-millisecond=\"selectedMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"selectedTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        @set-now=\"setNow()\"\n      >\n        <slot name=\"menu-content\" />\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}

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

@@ -2,6 +2,7 @@ import { cn } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
 import { useFormTextDetail } from "../../utils/form-text-detail.js";
+import { Placement } from "../../composables/floating.js";
 import RuiMenu_default from "../overlays/menu/RuiMenu.js";
 import { getNonRootAttrs, getRootAttrs } from "../../utils/helpers.js";
 import { dateTimePickerStyles } from "./date-time-picker-styles.js";
@@ -21,11 +22,11 @@ var _hoisted_2 = [
 	"readonly",
 	"aria-invalid"
 ];
-var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiDateTimePicker",
 	inheritAttrs: false,
 	__name: "RuiDateTimePicker",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		minDate: {},
 		maxDate: {},
 		format: { default: "day-first" },
@@ -73,6 +74,7 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
 		const menuOpen = useModel(__props, "menuOpen");
+		const MENU_OPTIONS = { placement: Placement.bottomStart };
 		const baseFormats = {
 			"day-first": "DD/MM/YYYY HH:mm",
 			"month-first": "MM/DD/YYYY HH:mm",
@@ -226,7 +228,7 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				"onUpdate:modelValue": _cache[23] || (_cache[23] = ($event) => isRef(isOpen) ? isOpen.value = $event : null)
 			}, unref(getRootAttrs)(_ctx.$attrs, []), {
 				class: unref(ui).wrapper({ class: unref(cn)(_ctx.$attrs.class) }),
-				placement: "bottom-start",
+				options: MENU_OPTIONS,
 				dense: __props.dense,
 				hint: __props.hint,
 				disabled: __props.disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { 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, type DateTimePickerVariant } 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 RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { 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  variant?: DateTimePickerVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\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  hideDetails = false,\n  label = 'Pick a date',\n  variant = 'default',\n  hint,\n  maxDate,\n  minDate,\n  format = 'day-first',\n  accuracy = 'minute',\n  errorMessages = [],\n  successMessages = [],\n  required = false,\n} = defineProps<RuiDateTimePickerProps>();\n\ndefineSlots<{\n  'menu-content': () => any;\n}>();\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 textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('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 {\n  clear: clearSelection,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  selectedDay,\n  selectedHour,\n  selectedMillisecond,\n  selectedMinute,\n  selectedMonth,\n  selectedSecond,\n  selectedTime,\n  selectedTimezone,\n  selectedYear,\n  setNow,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy,\n  allowEmpty,\n  maxDate,\n  minDate,\n  modelValue,\n  type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\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: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\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});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst isOutlined = computed<boolean>(() => variant === 'outlined');\n\nconst formattedDisplay = computed<string>(() => {\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(selectedYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(selectedMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(selectedDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(selectedHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(selectedMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(selectedSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(selectedMillisecond, 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\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 float = computed<boolean>(() => (get(isOpen) || get(valueSet) || get(searchInputFocused)) && get(isOutlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof dateTimePickerStyles>>(() => dateTimePickerStyles({\n  filled: variant === 'filled',\n  outlined: get(isOutlined),\n  float: get(float),\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 combinedErrorMessages = computed<string[]>(() => {\n  if (!errorMessages)\n    return get(internalErrorMessages);\n\n  const propErrors = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  return [...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\nfunction handleInputClick(event: MouseEvent): void {\n  // Handle segment selection first, before any DOM changes from menu opening\n  handleClick(event);\n  // Open menu if not already open\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nconst anyMenuOpen = computed<boolean>(() => get(isOpen) || get(calendarMenuOpen));\n\nwatch(anyMenuOpen, (value) => {\n  set(menuOpen, value);\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    placement=\"bottom-start\"\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=\"!hideDetails\"\n    :persistent=\"calendarMenuOpen\"\n    full-width\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open }\">\n      <div\n        ref=\"activator\"\n        :class=\"ui.activator()\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(readonly ? {} : attrs),\n        }\"\n        data-id=\"activator\"\n        :aria-invalid=\"hasError\"\n        :tabindex=\"disabled || readonly ? -1 : 0\"\n        @mouseenter=\"isHovered = true\"\n        @mouseleave=\"isHovered = false\"\n        @click=\"setInputFocus()\"\n      >\n        <span\n          v-if=\"isOutlined && (searchInputFocused || open || valueSet)\"\n          data-id=\"label\"\n          :class=\"[\n            ui.label(),\n            { 'pr-2': !valueSet && !open && isOutlined },\n          ]\"\n        >\n          {{ label }}\n          <span\n            v-if=\"required\"\n            data-id=\"required-indicator\"\n            :class=\"ui.required()\"\n          >\n            ﹡\n          </span>\n        </span>\n\n        <span :class=\"ui.iconPrepend()\">\n          <RuiIcon\n            class=\"text-rui-text-secondary transition\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"ui.value()\">\n          <input\n            ref=\"textInput\"\n            :disabled=\"disabled\"\n            :value=\"formattedDisplay\"\n            class=\"bg-transparent outline-none flex-1 min-w-0\"\n            type=\"text\"\n            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"handleBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"handleKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\n        </div>\n\n        <RuiButton\n          v-if=\"allowEmpty && valueSet && !disabled\"\n          variant=\"text\"\n          icon\n          data-id=\"clear-button\"\n          size=\"sm\"\n          tabindex=\"-1\"\n          color=\"error\"\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=\"18\"\n          />\n        </RuiButton>\n\n        <span\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset\n        v-if=\"isOutlined\"\n        :class=\"ui.fieldset()\"\n      >\n        <legend :class=\"ui.legend()\">\n          {{ legendText }}\n        </legend>\n      </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=\"selectedHour\"\n        v-model:selected-minute=\"selectedMinute\"\n        v-model:selected-second=\"selectedSecond\"\n        v-model:selected-millisecond=\"selectedMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"selectedTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        @set-now=\"setNow()\"\n      >\n        <slot name=\"menu-content\" />\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { 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, type DateTimePickerVariant } 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 RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { 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  variant?: DateTimePickerVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\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  hideDetails = false,\n  label = 'Pick a date',\n  variant = 'default',\n  hint,\n  maxDate,\n  minDate,\n  format = 'day-first',\n  accuracy = 'minute',\n  errorMessages = [],\n  successMessages = [],\n  required = false,\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 textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('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 {\n  clear: clearSelection,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  selectedDay,\n  selectedHour,\n  selectedMillisecond,\n  selectedMinute,\n  selectedMonth,\n  selectedSecond,\n  selectedTime,\n  selectedTimezone,\n  selectedYear,\n  setNow,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy,\n  allowEmpty,\n  maxDate,\n  minDate,\n  modelValue,\n  type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\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: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\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});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst isOutlined = computed<boolean>(() => variant === 'outlined');\n\nconst formattedDisplay = computed<string>(() => {\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(selectedYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(selectedMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(selectedDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(selectedHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(selectedMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(selectedSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(selectedMillisecond, 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\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 float = computed<boolean>(() => (get(isOpen) || get(valueSet) || get(searchInputFocused)) && get(isOutlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof dateTimePickerStyles>>(() => dateTimePickerStyles({\n  filled: variant === 'filled',\n  outlined: get(isOutlined),\n  float: get(float),\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 combinedErrorMessages = computed<string[]>(() => {\n  if (!errorMessages)\n    return get(internalErrorMessages);\n\n  const propErrors = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  return [...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\nfunction handleInputClick(event: MouseEvent): void {\n  // Handle segment selection first, before any DOM changes from menu opening\n  handleClick(event);\n  // Open menu if not already open\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nconst anyMenuOpen = computed<boolean>(() => get(isOpen) || get(calendarMenuOpen));\n\nwatch(anyMenuOpen, (value) => {\n  set(menuOpen, value);\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    :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=\"!hideDetails\"\n    :persistent=\"calendarMenuOpen\"\n    full-width\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open }\">\n      <div\n        ref=\"activator\"\n        :class=\"ui.activator()\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(readonly ? {} : attrs),\n        }\"\n        data-id=\"activator\"\n        :aria-invalid=\"hasError\"\n        :tabindex=\"disabled || readonly ? -1 : 0\"\n        @mouseenter=\"isHovered = true\"\n        @mouseleave=\"isHovered = false\"\n        @click=\"setInputFocus()\"\n      >\n        <span\n          v-if=\"isOutlined && (searchInputFocused || open || valueSet)\"\n          data-id=\"label\"\n          :class=\"[\n            ui.label(),\n            { 'pr-2': !valueSet && !open && isOutlined },\n          ]\"\n        >\n          {{ label }}\n          <span\n            v-if=\"required\"\n            data-id=\"required-indicator\"\n            :class=\"ui.required()\"\n          >\n            ﹡\n          </span>\n        </span>\n\n        <span :class=\"ui.iconPrepend()\">\n          <RuiIcon\n            class=\"text-rui-text-secondary transition\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"ui.value()\">\n          <input\n            ref=\"textInput\"\n            :disabled=\"disabled\"\n            :value=\"formattedDisplay\"\n            class=\"bg-transparent outline-none flex-1 min-w-0\"\n            type=\"text\"\n            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"handleBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"handleKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\n        </div>\n\n        <RuiButton\n          v-if=\"allowEmpty && valueSet && !disabled\"\n          variant=\"text\"\n          icon\n          data-id=\"clear-button\"\n          size=\"sm\"\n          tabindex=\"-1\"\n          color=\"error\"\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=\"18\"\n          />\n        </RuiButton>\n\n        <span\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset\n        v-if=\"isOutlined\"\n        :class=\"ui.fieldset()\"\n      >\n        <legend :class=\"ui.legend()\">\n          {{ legendText }}\n        </legend>\n      </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=\"selectedHour\"\n        v-model:selected-minute=\"selectedMinute\"\n        v-model:selected-second=\"selectedSecond\"\n        v-model:selected-millisecond=\"selectedMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"selectedTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        @set-now=\"setNow()\"\n      >\n        <slot name=\"menu-content\" />\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":"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"}

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

@@ -8,10 +8,10 @@ import { createElementBlock, createElementVNode, createVNode, defineComponent, m
 var _hoisted_1 = { class: "flex divide-x divide-rui-grey-200 dark:divide-rui-grey-800" };
 var _hoisted_2 = { class: "flex gap-3 p-4 pl-3" };
 var _hoisted_3 = { class: "flex flex-col justify-center items-center" };
-var RuiDateTimePickerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiDateTimePickerMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiDateTimePickerMenu",
 	__name: "RuiDateTimePickerMenu",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		accuracy: {},
 		maxDate: {},
 		minDate: {}
@@ -38,7 +38,7 @@ var RuiDateTimePickerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PU
 		},
 		"calendarMenuOpenModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["set-now"], [
+	emits: /*@__PURE__*/ mergeModels(["set-now"], [
 		"update:selectedDate",
 		"update:selectedTime",
 		"update:selectedHour",