npm - @rotki/ui-library - Versions diffs - 3.0.0-beta.2 → 3.0.0-beta.4 - Mend

@rotki/ui-library 3.0.0-beta.2 → 3.0.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (254) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiCardHeader.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n dense?: boolean;\n}\n\ndefineOptions({\n name: 'RuiCardHeader',\n inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\nconst slots = defineSlots<{\n prepend?: () => any;\n header?: () => any;\n subheader?: () => any;\n}>();\n\nconst cardHeader = tv({\n slots: {\n root: 'flex',\n prepend: 'rounded-full flex items-center justify-center bg-rui-neutral-200 text-rui-neutral-700 dark:bg-rui-neutral-700 dark:text-rui-neutral-200 overflow-hidden',\n // one title style whether or not there is a prepend: a card title is a section heading, not a page title\n header: 'text-base font-semibold text-rui-text',\n },\n variants: {\n dense: {\n true: {\n root: 'p-3 between:ml-2 between:mr-0',\n prepend: 'text-base p-[0.08rem] w-9 h-9',\n },\n false: {\n root: 'p-4 between:ml-4 between:mr-0',\n prepend: 'text-[1.25rem] w-10 h-10',\n },\n },\n },\n defaultVariants: { dense: false },\n});\n\nconst ui = computed<ReturnType<typeof cardHeader>>(() => cardHeader({ dense }));\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n v-bind=\"$attrs\"\n >\n <div\n v-if=\"slots.prepend\"\n data-id=\"prepend\"\n :class=\"ui.prepend()\"\n >\n <slot name=\"prepend\" />\n </div>\n <div class=\"flex flex-col justify-center\">\n <h5\n v-if=\"slots.header\"\n data-id=\"header\"\n :class=\"ui.header()\"\n >\n <slot name=\"header\" />\n </h5>\n <p\n v-if=\"slots.subheader\"\n data-id=\"subheader\"\n class=\"text-rui-text-secondary text-body-2 mb-0\"\n >\n <slot name=\"subheader\" />\n </p>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAcA,MAAM,~~QAAQ~~,SAAA;EAMd,MAAM,aAAa,GAAG;GACpB,OAAO;IACL,MAAM;IACN,SAAS;IAET,QAAQ;GACV;GACA,UAAU,EACR,OAAO;IACL,MAAM;KACJ,MAAM;KACN,SAAS;IACX;IACA,OAAO;KACL,MAAM;KACN,SAAS;IACX;GACF,EACF;GACA,iBAAiB,EAAE,OAAO,MAAM;EAClC,CAAC;EAED,MAAM,KAAK,eAA8C,WAAW,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;;GAI5E,~~OAAA~~,UAAA,~~GAAA~~,mBA2BM,~~OA3BN~~,WA2BM,EA1BH,~~OAAO~~,MAAA,EAAA,CAAE,CAAC,KAAI,~~EACPA~~,GAAAA,KAAAA,MAAM,GAAA,CAGN,MAAM,~~WADd~~,UAAA,~~GAAA~~,mBAMM,OAAA;;IAJJ,WAAQ;IACP,~~OAAK~~,~~eAAE~~,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;~~GAElB~~,~~GAAA~~,~~CAAA~~,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,~~GAEzB~~,mBAeM,OAfN,YAeM,CAbI,MAAM,~~UADd~~,UAAA,~~GAAA~~,mBAMK,MAAA;;IAJH,WAAQ;IACP,~~OAAK~~,~~eAAE~~,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;~~GAEjB~~,~~GAAA~~,~~CAAA~~,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGhB,MAAM,~~aADd~~,UAAA,~~GAAA~~,mBAMI,KANJ,YAMI,~~CADF~~,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}
1	+ {"version":3,"file":"RuiCardHeader.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n dense?: boolean;\n}\n\ndefineOptions({\n name: 'RuiCardHeader',\n inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\nconst slots = defineSlots<{\n prepend?: () => any;\n header?: () => any;\n subheader?: () => any;\n}>();\n\nconst cardHeader = tv({\n slots: {\n root: 'flex',\n prepend: 'rounded-full flex items-center justify-center bg-rui-neutral-200 text-rui-neutral-700 dark:bg-rui-neutral-700 dark:text-rui-neutral-200 overflow-hidden',\n // one title style whether or not there is a prepend: a card title is a section heading, not a page title\n header: 'text-base font-semibold text-rui-text',\n },\n variants: {\n dense: {\n true: {\n root: 'p-3 between:ml-2 between:mr-0',\n prepend: 'text-base p-[0.08rem] w-9 h-9',\n },\n false: {\n root: 'p-4 between:ml-4 between:mr-0',\n prepend: 'text-[1.25rem] w-10 h-10',\n },\n },\n },\n defaultVariants: { dense: false },\n});\n\nconst ui = computed<ReturnType<typeof cardHeader>>(() => cardHeader({ dense }));\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n v-bind=\"$attrs\"\n >\n <div\n v-if=\"slots.prepend\"\n data-id=\"prepend\"\n :class=\"ui.prepend()\"\n >\n <slot name=\"prepend\" />\n </div>\n <div class=\"flex flex-col justify-center\">\n <h5\n v-if=\"slots.header\"\n data-id=\"header\"\n :class=\"ui.header()\"\n >\n <slot name=\"header\" />\n </h5>\n <p\n v-if=\"slots.subheader\"\n data-id=\"subheader\"\n class=\"text-rui-text-secondary text-body-2 mb-0\"\n >\n <slot name=\"subheader\" />\n </p>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQC,SAAA;EAMd,MAAM,aAAa,GAAG;GACpB,OAAO;IACL,MAAM;IACN,SAAS;IAET,QAAQ;GACV;GACA,UAAU,EACR,OAAO;IACL,MAAM;KACJ,MAAM;KACN,SAAS;IACX;IACA,OAAO;KACL,MAAM;KACN,SAAS;IACX;GACF,EACF;GACA,iBAAiB,EAAE,OAAO,MAAM;EAClC,CAAC;EAED,MAAM,KAAK,eAA8C,WAAW,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;;GAI5E,OAAAC,UAAA,GAAAC,mBA2BM,OA3BNC,WA2BM,EA1BH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EACPL,GAAAA,KAAAA,MAAM,GAAA,CAGN,MAAM,WADdE,UAAA,GAAAC,mBAMM,OAAA;;IAJJ,WAAQ;IACP,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;GAElBE,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEzBE,mBAeM,OAfN,YAeM,CAbI,MAAM,UADdP,UAAA,GAAAC,mBAMK,MAAA;;IAJH,WAAQ;IACP,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;GAEjBE,GAAAA,CAAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGhB,MAAM,aADdL,UAAA,GAAAC,mBAMI,KANJ,YAMI,CADFI,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiChip.js","names":[],"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 /*\n Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n /\n closeUnfocusable?: boolean;\n bgColor?: string;\n textColor?: string;\n classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n name: 'RuiChip',\n inheritAttrs: false,\n});\n\nconst {\n tile = false,\n size = ChipSize.md,\n color = 'grey',\n clickable = false,\n closeable = false,\n disabled = false,\n variant = ChipVariant.filled,\n closeIcon = 'lu-x',\n closeUnfocusable = false,\n bgColor = undefined,\n textColor = undefined,\n classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n 'click:close': [];\n 'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n prepend?: () => any;\n default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n slots: {\n // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n // the avatar's neutral pair, so initials stay readable on any chip color\n prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n label: 'truncate px-2 text-[0.8125rem]/5',\n // a round hover fill marks the close icon as its own button\n close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n closeIcon: 'opacity-60 hover:opacity-100 transition-opacity',\n },\n variants: {\n tile: {\n true: { root: 'rounded-rui-sm' },\n false: { root: 'rounded-full' },\n },\n size: {\n // 28px, to sit in a 44px table row; sm is 24px with 12px text, the smallest the library sets\n md: { root: 'min-h-7' },\n sm: {\n root: 'min-h-6',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1.5 text-xs/4',\n close: 'p-px',\n },\n },\n // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n prepended: {\n true: { root: 'pl-0.5' },\n false: {},\n },\n closeable: {\n true: {},\n false: {},\n },\n disabled: {\n true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\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 tonal: {},\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): a tint over any fill, which keeps the text color\n { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n // Grey filled: a solid step above the tonal tint\n { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\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 // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n // Context colors: outlined text\n { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n { tile: true, class: { prepend: 'rounded-sm' } },\n // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n\n // Disabled: a flat neutral chip in any color, like a disabled button\n { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n ],\n compoundSlots: [\n // Every filled color takes light text, in both themes\n { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-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 prepended: !!slots.prepend,\n closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n const s: Partial<StyleValue> = {};\n if (bgColor)\n s.backgroundColor = bgColor;\n if (textColor)\n s.color = textColor;\n return s;\n});\n\nfunction click(e: MouseEvent): void {\n if (!clickable \|\| disabled)\n return;\n\n emit('click', e);\n}\n\n/\n Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n \n @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n if (!clickable \|\| disabled \|\| e.target !== get(root))\n return;\n if (e.key !== 'Enter' && e.key !== ' ')\n return;\n\n e.preventDefault();\n get(root)?.click();\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"ui.root({ class: cn(classNames?.root) })\"\n :style=\"style\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n :data-disabled=\"disabled \|\| undefined\"\n :role=\"clickable ? 'button' : undefined\"\n :tabindex=\"clickable && !disabled ? 0 : undefined\"\n :aria-disabled=\"clickable && disabled ? true : undefined\"\n v-bind=\"objectOmit($attrs, ['onClick'])\"\n @click=\"click($event)\"\n @keydown=\"onKeydown($event)\"\n >\n <div\n v-if=\"$slots.prepend\"\n :class=\"ui.prepend()\"\n >\n <slot name=\"prepend\" />\n </div>\n <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n <slot />\n </span>\n <button\n v-if=\"closeable\"\n :class=\"ui.close()\"\n :disabled=\"disabled\"\n type=\"button\"\n aria-label=\"Remove\"\n :tabindex=\"closeUnfocusable ? -1 : undefined\"\n @click.stop=\"emit('click:close')\"\n >\n <RuiIcon\n :class=\"ui.closeIcon()\"\n :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n :name=\"closeIcon\"\n />\n </button>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiChip.js","names":["_sfc_main"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, 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 /*\n Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n /\n closeUnfocusable?: boolean;\n bgColor?: string;\n textColor?: string;\n classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n name: 'RuiChip',\n inheritAttrs: false,\n});\n\nconst {\n tile = false,\n size = ChipSize.md,\n color = 'grey',\n clickable = false,\n closeable = false,\n disabled = false,\n variant = ChipVariant.filled,\n closeIcon = 'lu-x',\n closeUnfocusable = false,\n bgColor = undefined,\n textColor = undefined,\n classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n 'click:close': [];\n 'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n prepend?: () => any;\n default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n slots: {\n // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n // the avatar's neutral pair, so initials stay readable on any chip color\n prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n label: 'truncate px-2 text-[0.8125rem]/5',\n // a round hover fill marks the close icon as its own button\n close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n closeIcon: 'opacity-60 hover:opacity-100 transition-opacity',\n },\n variants: {\n tile: {\n true: { root: 'rounded-rui-sm' },\n false: { root: 'rounded-full' },\n },\n size: {\n // 28px, to sit in a 44px table row; sm is 24px with 12px text, the smallest the library sets\n md: { root: 'min-h-7' },\n sm: {\n root: 'min-h-6',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1.5 text-xs/4',\n close: 'p-px',\n },\n },\n // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n prepended: {\n true: { root: 'pl-0.5' },\n false: {},\n },\n closeable: {\n true: {},\n false: {},\n },\n disabled: {\n true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\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 tonal: {},\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): a tint over any fill, which keeps the text color\n { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n // Grey filled: a solid step above the tonal tint\n { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\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 // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n // Context colors: outlined text\n { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n { tile: true, class: { prepend: 'rounded-sm' } },\n // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n\n // Disabled: a flat neutral chip in any color, like a disabled button\n { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n ],\n compoundSlots: [\n // Every filled color takes light text, in both themes\n { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-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 prepended: !!slots.prepend,\n closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n const s: Partial<StyleValue> = {};\n if (bgColor)\n s.backgroundColor = bgColor;\n if (textColor)\n s.color = textColor;\n return s;\n});\n\nfunction click(e: MouseEvent): void {\n if (!clickable \|\| disabled)\n return;\n\n emit('click', e);\n}\n\n/\n Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n \n @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n if (!clickable \|\| disabled \|\| e.target !== get(root))\n return;\n if (e.key !== 'Enter' && e.key !== ' ')\n return;\n\n e.preventDefault();\n get(root)?.click();\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"ui.root({ class: cn(classNames?.root) })\"\n :style=\"style\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n :data-disabled=\"disabled \|\| undefined\"\n :role=\"clickable ? 'button' : undefined\"\n :tabindex=\"clickable && !disabled ? 0 : undefined\"\n :aria-disabled=\"clickable && disabled ? true : undefined\"\n v-bind=\"objectOmit($attrs, ['onClick'])\"\n @click=\"click($event)\"\n @keydown=\"onKeydown($event)\"\n >\n <div\n v-if=\"$slots.prepend\"\n :class=\"ui.prepend()\"\n >\n <slot name=\"prepend\" />\n </div>\n <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n <slot />\n </span>\n <button\n v-if=\"closeable\"\n :class=\"ui.close()\"\n :disabled=\"disabled\"\n type=\"button\"\n aria-label=\"Remove\"\n :tabindex=\"closeUnfocusable ? -1 : undefined\"\n @click.stop=\"emit('click:close')\"\n >\n <RuiIcon\n :class=\"ui.closeIcon()\"\n :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n :name=\"closeIcon\"\n />\n </button>\n </div>\n</template>\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 import type { ContextColorsType } from '../../consts/colors.js';
 import type { RuiIcons } from '../../icons/index.js';
-import type { VueClassValue } from '../../types/class-value';
+import type { VueClassValue } from '../../types/class-value.js';
 import { ChipSize, ChipVariant } from './chip-props.js';
 export interface RuiChipClassNames {
     root?: VueClassValue;

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

	@@ -1 +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 /*\n Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n /\n closeUnfocusable?: boolean;\n bgColor?: string;\n textColor?: string;\n classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n name: 'RuiChip',\n inheritAttrs: false,\n});\n\nconst {\n tile = false,\n size = ChipSize.md,\n color = 'grey',\n clickable = false,\n closeable = false,\n disabled = false,\n variant = ChipVariant.filled,\n closeIcon = 'lu-x',\n closeUnfocusable = false,\n bgColor = undefined,\n textColor = undefined,\n classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n 'click:close': [];\n 'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n prepend?: () => any;\n default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n slots: {\n // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n // the avatar's neutral pair, so initials stay readable on any chip color\n prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n label: 'truncate px-2 text-[0.8125rem]/5',\n // a round hover fill marks the close icon as its own button\n close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n closeIcon: 'opacity-60 hover:opacity-100 transition-opacity',\n },\n variants: {\n tile: {\n true: { root: 'rounded-rui-sm' },\n false: { root: 'rounded-full' },\n },\n size: {\n // 28px, to sit in a 44px table row; sm is 24px with 12px text, the smallest the library sets\n md: { root: 'min-h-7' },\n sm: {\n root: 'min-h-6',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1.5 text-xs/4',\n close: 'p-px',\n },\n },\n // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n prepended: {\n true: { root: 'pl-0.5' },\n false: {},\n },\n closeable: {\n true: {},\n false: {},\n },\n disabled: {\n true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\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 tonal: {},\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): a tint over any fill, which keeps the text color\n { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n // Grey filled: a solid step above the tonal tint\n { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\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 // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n // Context colors: outlined text\n { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n { tile: true, class: { prepend: 'rounded-sm' } },\n // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n\n // Disabled: a flat neutral chip in any color, like a disabled button\n { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n ],\n compoundSlots: [\n // Every filled color takes light text, in both themes\n { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-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 prepended: !!slots.prepend,\n closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n const s: Partial<StyleValue> = {};\n if (bgColor)\n s.backgroundColor = bgColor;\n if (textColor)\n s.color = textColor;\n return s;\n});\n\nfunction click(e: MouseEvent): void {\n if (!clickable \|\| disabled)\n return;\n\n emit('click', e);\n}\n\n/\n Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n \n @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n if (!clickable \|\| disabled \|\| e.target !== get(root))\n return;\n if (e.key !== 'Enter' && e.key !== ' ')\n return;\n\n e.preventDefault();\n get(root)?.click();\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"ui.root({ class: cn(classNames?.root) })\"\n :style=\"style\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n :data-disabled=\"disabled \|\| undefined\"\n :role=\"clickable ? 'button' : undefined\"\n :tabindex=\"clickable && !disabled ? 0 : undefined\"\n :aria-disabled=\"clickable && disabled ? true : undefined\"\n v-bind=\"objectOmit($attrs, ['onClick'])\"\n @click=\"click($event)\"\n @keydown=\"onKeydown($event)\"\n >\n <div\n v-if=\"$slots.prepend\"\n :class=\"ui.prepend()\"\n >\n <slot name=\"prepend\" />\n </div>\n <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n <slot />\n </span>\n <button\n v-if=\"closeable\"\n :class=\"ui.close()\"\n :disabled=\"disabled\"\n type=\"button\"\n aria-label=\"Remove\"\n :tabindex=\"closeUnfocusable ? -1 : undefined\"\n @click.stop=\"emit('click:close')\"\n >\n <RuiIcon\n :class=\"ui.closeIcon()\"\n :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n :name=\"closeIcon\"\n />\n </button>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDA,MAAM,OAAO;EAKb,MAAM,QAAQ,SAAA;EAKd,MAAM,OAAO,eAA+B,MAAM;EAElD,MAAM,aAAa,GAAG;GACpB,OAAO;IAEL,MAAM;IAEN,SAAS;IACT,OAAO;IAEP,OAAO;IACP,WAAW;GACb;GACA,UAAU;IACR,MAAM;KACJ,MAAM,EAAE,MAAM,iBAAiB;KAC/B,OAAO,EAAE,MAAM,eAAe;IAChC;IACA,MAAM;KAEJ,IAAI,EAAE,MAAM,UAAU;KACtB,IAAI;MACF,MAAM;MACN,SAAS;MACT,OAAO;MACP,OAAO;KACT;IACF;IAEA,WAAW;KACT,MAAM,EAAE,MAAM,SAAS;KACvB,OAAO,CAAC;IACV;IACA,WAAW;KACT,MAAM,CAAC;KACP,OAAO,CAAC;IACV;IACA,UAAU;KACR,MAAM;MAAE,MAAM;MAA0C,OAAO;KAAgE;KAC/H,OAAO,CAAC;IACV;IACA,WAAW;KACT,MAAM,EAAE,MAAM,iBAAiB;KAC/B,OAAO;MAAE,MAAM;MAAkB,OAAO;KAAiB;IAC3D;IACA,SAAS;KACP,QAAQ,CAAC;KACT,UAAU,CAAC;KACX,OAAO,CAAC;IACV;IACA,OAAO;KACL,MAAM,EAAE,MAAM,gBAAgB;KAC9B,SAAS,CAAC;KACV,WAAW,CAAC;KACZ,OAAO,CAAC;KACR,SAAS,CAAC;KACV,MAAM,CAAC;KACP,SAAS,CAAC;IACZ;GACF;GACA,kBAAkB;IAEhB;KAAE,WAAW;KAAM,UAAU;KAAO,OAAO,EAAE,MAAM,wEAAwE;IAAE;IAG7H;KAAE,OAAO;KAAQ,SAAS;KAAU,OAAO,EAAE,MAAM,6CAA6C;IAAE;IAGlG;KAAE,SAAS;KAAY,OAAO,EAAE,MAAM,0CAA0C;IAAE;IAGlF;KAAE,OAAO;KAAW,SAAS;KAAU,OAAO,EAAE,MAAM,iBAAiB;IAAE;IACzE;KAAE,OAAO;KAAa,SAAS;KAAU,OAAO,EAAE,MAAM,mBAAmB;IAAE;IAE7E;KAAE,OAAO;KAAS,SAAS;KAAU,OAAO,EAAE,MAAM,wCAAwC;IAAE;IAC9F;KAAE,OAAO;KAAW,SAAS;KAAU,OAAO,EAAE,MAAM,4CAA4C;IAAE;IACpG;KAAE,OAAO;KAAQ,SAAS;KAAU,OAAO,EAAE,MAAM,sCAAsC;IAAE;IAC3F;KAAE,OAAO;KAAW,SAAS;KAAU,OAAO,EAAE,MAAM,4CAA4C;IAAE;IAGpG;KAAE,OAAO;KAAW,SAAS;KAAY,OAAO,EAAE,MAAM,iDAAiD;IAAE;IAC3G;KAAE,OAAO;KAAa,SAAS;KAAY,OAAO,EAAE,MAAM,qDAAqD;IAAE;IACjH;KAAE,OAAO;KAAS,SAAS;KAAY,OAAO,EAAE,MAAM,6CAA6C;IAAE;IACrG;KAAE,OAAO;KAAW,SAAS;KAAY,OAAO,EAAE,MAAM,mBAAmB;IAAE;IAC7E;KAAE,OAAO;KAAQ,SAAS;KAAY,OAAO,EAAE,MAAM,gBAAgB;IAAE;IACvE;KAAE,OAAO;KAAW,SAAS;KAAY,OAAO,EAAE,MAAM,mBAAmB;IAAE;IAG7E;KAAE,OAAO;KAAQ,SAAS;KAAS,OAAO,EAAE,MAAM,mDAAmD;IAAE;IACvG;KAAE,OAAO;KAAW,SAAS;KAAS,OAAO,EAAE,MAAM,iGAAiG;IAAE;IACxJ;KAAE,OAAO;KAAa,SAAS;KAAS,OAAO,EAAE,MAAM,yGAAyG;IAAE;IAClK;KAAE,OAAO;KAAS,SAAS;KAAS,OAAO,EAAE,MAAM,yFAAyF;IAAE;IAC9I;KAAE,OAAO;KAAW,SAAS;KAAS,OAAO,EAAE,MAAM,iGAAiG;IAAE;IACxJ;KAAE,OAAO;KAAQ,SAAS;KAAS,OAAO,EAAE,MAAM,qFAAqF;IAAE;IACzI;KAAE,OAAO;KAAW,SAAS;KAAS,OAAO,EAAE,MAAM,iGAAiG;IAAE;IAGxJ;KAAE,MAAM;KAAM,WAAW;KAAM,OAAO,EAAE,MAAM,OAAO;IAAE;IAEvD;KAAE,MAAM;KAAM,OAAO,EAAE,SAAS,aAAa;IAAE;IAE/C;KAAE,WAAW;KAAM,OAAO;MAAE,MAAM;MAAQ,OAAO;KAAO;IAAE;IAC1D;KAAE,WAAW;KAAM,MAAM;KAAM,OAAO;MAAE,MAAM;MAAQ,OAAO;KAAS;IAAE;IAGxE;KAAE,UAAU;KAAM,SAAS,CAAC,UAAU,OAAO;KAAG,OAAO,EAAE,MAAM,+CAA+C;IAAE;IAChH;KAAE,UAAU;KAAM,SAAS;KAAY,OAAO,EAAE,MAAM,sBAAsB;IAAE;GAChF;GACA,eAAe,CAEb;IAAE,OAAO,CAAC,MAAM;IAAG,OAAO;KAAC;KAAW;KAAa;KAAS;KAAW;KAAQ;IAAS;IAAG,SAAS;IAAU,OAAO;GAAqB,CAC5I;GACA,iBAAiB;IACf,MAAM;IACN,MAAM;IACN,UAAU;IACV,WAAW;IACX,SAAS;IACT,OAAO;GACT;EACF,CAAC;EAED,MAAM,KAAK,eAA8C,WAAW;GAClE,MAAG,QAAA;GACH,MAAG,QAAA;GACH,OAAI,QAAA;GACJ,SAAM,QAAA;GACN,UAAO,QAAA;GACP,WAAQ,QAAA;GACR,WAAW,CAAC,CAAC,MAAM;GACnB,WAAQ,QAAA;EACV,CAAC,CAAC;EAEF,MAAM,QAAQ,eAAoC;GAChD,MAAM,IAAyB,CAAC;GAChC,IAAI,QAAA,SACF,EAAE,kBAAkB,QAAA;GACtB,IAAI,QAAA,WACF,EAAE,QAAQ,QAAA;GACZ,OAAO;EACT,CAAC;EAED,SAAS,MAAM,GAAqB;GAClC,IAAI,CAAC,QAAA,aAAa,QAAA,UAChB;GAEF,KAAK,SAAS,CAAC;EACjB;;;;;;;EAQA,SAAS,UAAU,GAAwB;GACzC,IAAI,CAAC,QAAA,aAAa,QAAA,YAAY,EAAE,WAAW,IAAI,IAAI,GACjD;GACF,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KACjC;GAEF,EAAE,eAAe;GACjB,IAAI,IAAI,CAAC,EAAE,MAAM;EACnB;;GAIE,OAAA,UAAA,GAAA,mBAsCM,OAtCN,WAsCM;IArCA,SAAA;IAAJ,KAAI;IACH,OAAO,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA;IAC3C,OAAO,MAAA,KAAA;IACP,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,iBAAe,QAAA,YAAY,KAAA;IAC3B,MAAM,QAAA,YAAS,WAAc,KAAA;IAC7B,UAAU,QAAA,aAAS,CAAK,QAAA,WAAQ,IAAO,KAAA;IACvC,iBAAe,QAAA,aAAa,QAAA,WAAQ,OAAU,KAAA;GACvC,GAAA,MAAA,UAAA,CAAU,CAACA,KAAAA,QAAM,CAAA,SAAA,CAAA,GAAA;IACxB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAM,MAAM;IACnB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;;IAGlBC,KAAAA,OAAO,WADf,UAAA,GAAA,mBAKM,OAAA;;KAHH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IAElB,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEzB,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA,EAAA,GAAA,CACpD,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGF,QAAA,aADR,UAAA,GAAA,mBAcS,UAAA;;KAZN,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KACf,UAAU,QAAA;KACX,MAAK;KACL,cAAW;KACV,UAAU,QAAA,mBAAgB,KAAQ,KAAA;KAClC,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,KAAI,aAAA,GAAA,CAAA,MAAA,CAAA;IAEjB,GAAA,CAAA,YAIE,iBAAA;KAHC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;KACnB,MAAM,MAAA,qBAAA,CAAqB,CAAC,QAAA;KAC5B,MAAM,QAAA"}
1	+ {"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_withModifiers","_createVNode","RuiIcon"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, 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 /*\n Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n /\n closeUnfocusable?: boolean;\n bgColor?: string;\n textColor?: string;\n classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n name: 'RuiChip',\n inheritAttrs: false,\n});\n\nconst {\n tile = false,\n size = ChipSize.md,\n color = 'grey',\n clickable = false,\n closeable = false,\n disabled = false,\n variant = ChipVariant.filled,\n closeIcon = 'lu-x',\n closeUnfocusable = false,\n bgColor = undefined,\n textColor = undefined,\n classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n 'click:close': [];\n 'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n prepend?: () => any;\n default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n slots: {\n // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n // the avatar's neutral pair, so initials stay readable on any chip color\n prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n label: 'truncate px-2 text-[0.8125rem]/5',\n // a round hover fill marks the close icon as its own button\n close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n closeIcon: 'opacity-60 hover:opacity-100 transition-opacity',\n },\n variants: {\n tile: {\n true: { root: 'rounded-rui-sm' },\n false: { root: 'rounded-full' },\n },\n size: {\n // 28px, to sit in a 44px table row; sm is 24px with 12px text, the smallest the library sets\n md: { root: 'min-h-7' },\n sm: {\n root: 'min-h-6',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1.5 text-xs/4',\n close: 'p-px',\n },\n },\n // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n prepended: {\n true: { root: 'pl-0.5' },\n false: {},\n },\n closeable: {\n true: {},\n false: {},\n },\n disabled: {\n true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\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 tonal: {},\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): a tint over any fill, which keeps the text color\n { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n // Grey filled: a solid step above the tonal tint\n { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\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 // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n // Context colors: outlined text\n { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n { tile: true, class: { prepend: 'rounded-sm' } },\n // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n\n // Disabled: a flat neutral chip in any color, like a disabled button\n { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n ],\n compoundSlots: [\n // Every filled color takes light text, in both themes\n { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-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 prepended: !!slots.prepend,\n closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n const s: Partial<StyleValue> = {};\n if (bgColor)\n s.backgroundColor = bgColor;\n if (textColor)\n s.color = textColor;\n return s;\n});\n\nfunction click(e: MouseEvent): void {\n if (!clickable \|\| disabled)\n return;\n\n emit('click', e);\n}\n\n/\n Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n \n @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n if (!clickable \|\| disabled \|\| e.target !== get(root))\n return;\n if (e.key !== 'Enter' && e.key !== ' ')\n return;\n\n e.preventDefault();\n get(root)?.click();\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"ui.root({ class: cn(classNames?.root) })\"\n :style=\"style\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n :data-disabled=\"disabled \|\| undefined\"\n :role=\"clickable ? 'button' : undefined\"\n :tabindex=\"clickable && !disabled ? 0 : undefined\"\n :aria-disabled=\"clickable && disabled ? true : undefined\"\n v-bind=\"objectOmit($attrs, ['onClick'])\"\n @click=\"click($event)\"\n @keydown=\"onKeydown($event)\"\n >\n <div\n v-if=\"$slots.prepend\"\n :class=\"ui.prepend()\"\n >\n <slot name=\"prepend\" />\n </div>\n <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n <slot />\n </span>\n <button\n v-if=\"closeable\"\n :class=\"ui.close()\"\n :disabled=\"disabled\"\n type=\"button\"\n aria-label=\"Remove\"\n :tabindex=\"closeUnfocusable ? -1 : undefined\"\n @click.stop=\"emit('click:close')\"\n >\n <RuiIcon\n :class=\"ui.closeIcon()\"\n :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n :name=\"closeIcon\"\n />\n </button>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/color-picker/RuiColorBoard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiColorBoard.js","names":[],"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 rounded-rui-control' });\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-linear-to-r from-white\" />\n <div class=\"absolute inset-0 to-transparent bg-linear-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-rui-control 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":""}
1	+ {"version":3,"file":"RuiColorBoard.js","names":["_sfc_main"],"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 rounded-rui-control' });\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-linear-to-r from-white\" />\n <div class=\"absolute inset-0 to-transparent bg-linear-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-rui-control 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":""}

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

	@@ -1 +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 rounded-rui-control' });\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-linear-to-r from-white\" />\n <div class=\"absolute inset-0 to-transparent bg-linear-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-rui-control 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,0EAA0E,CAAC;;GAItG,~~OAAA~~,UAAA,~~GAAA~~,mBAoBM,~~OApBN~~,WAoBM;IAnBA,SAAA;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;GAC7BA,GAAAA;IAAAA,GAAAA,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;;IAEhC,OAAA,OAAA,OAAA,~~KAAA~~,mBAAyE,OAAA,EAApE,OAAM,4DAA2D,GAAA,MAAA,EAAA;IACtE,OAAA,OAAA,OAAA,~~KAAA~~,mBAAyE,OAAA,EAApE,OAAM,4DAA2D,GAAA,MAAA,EAAA;~~IACtE~~,mBAIE,OAAA;KAHA,WAAQ;KACR,OAAM;KACL,~~OAAK~~,~~eAAE~~,MAAA,WAAA,CAAW"}
1	+ {"version":3,"file":"RuiColorBoard.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeStyle"],"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 rounded-rui-control' });\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-linear-to-r from-white\" />\n <div class=\"absolute inset-0 to-transparent bg-linear-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-rui-control 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":"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"}

package/dist/components/color-picker/RuiColorDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiColorDisplay.js","names":[],"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":""}
1	+ {"version":3,"file":"RuiColorDisplay.js","names":["_sfc_main"],"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":""}

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

	@@ -1 +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,MAAM,CAAC;;GAI3D,~~OAAA~~,UAAA,~~GAAA~~,~~YAuBa~~,~~oBAvBb~~,WAuBa;IAtBV,SAAS,EAAA,WAAA,MAAA;IACT,eAAa;IACb,eAAa,EAAA,SAAA,cAAA;~~GACNA~~,GAAAA,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;;IAGhB,~~SAAA~~,cAEM,~~CAFN~~,mBAEM,OAAA,EAFA,~~OAAK~~,eAAA,EAAA,~~uBAA2B~~,MAAA,MAAA,EAAM,CAAA,EAAI,GAAA,mBAEhD,CAAA,~~GAEQ~~,MAAA,MAAA,~~KADR~~,UAAA,~~GAAA~~,mBAKM,OALN,YAGC,WAED,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"RuiColorDisplay.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","RuiTooltip","_mergeProps","_withCtx","_createElementVNode","_normalizeStyle","_unref","_normalizeClass","_createElementBlock","_createCommentVNode"],"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;;GAI3D,OAAAC,UAAA,GAAAC,YAuBaC,oBAvBbC,WAuBa;IAtBV,SAAS,EAAA,WAAA,MAAA;IACT,eAAa;IACb,eAAa,EAAA,SAAA,cAAA;GACNJ,GAAAA,KAAAA,MAAM,GAAA;IAEH,WAASK,cAMhB,CALFC,mBAKE,OAAA;KAJA,OAAM;KACN,WAAQ;KACP,OAAKC,eAAA,EAAA,YAAgB,QAAA,MAAK,CAAA;KAC1B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEC,MAAA,IAAA,CAAI,CAAA;;IAGhB,SAAAH,cAEM,CAFNC,mBAEM,OAAA,EAFA,OAAKG,eAAA,EAAA,uBAA2BD,MAAA,MAAA,EAAM,CAAA,EAAI,GAAA,mBAEhD,CAAA,GAEQA,MAAA,MAAA,KADRP,UAAA,GAAAS,mBAKM,OALN,YAGC,WAED,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/color-picker/RuiColorHue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiColorHue.js","names":[],"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-rui-control bg-white rounded-full\"\n :style=\"cursorStyle\"\n />\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiColorHue.js","names":["_sfc_main"],"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-rui-control bg-white rounded-full\"\n :style=\"cursorStyle\"\n />\n </div>\n</template>\n"],"mappings":""}

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

	@@ -1 +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-rui-control 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;GAC7B,MAAM,UAAU,WAAW,UAAU,UAAU,SAAS;GAGxD,OAAO,QADY,gBAAiB,UAAU,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;;GAIhG,~~OAAA~~,UAAA,~~GAAA~~,mBAmBM,~~OAnBN~~,WAmBM;IAlBA,SAAA;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;GAC7BA,GAAAA;IAAAA,GAAAA,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;~~GAEhC~~,~~CAAA~~,~~GAAA~~,~~CAAA~~,mBAIE,OAAA;IAHA,WAAQ;IACR,OAAM;IACL,~~OAAK~~,~~eAAE~~,MAAA,WAAA,CAAW"}
1	+ {"version":3,"file":"RuiColorHue.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeStyle"],"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-rui-control bg-white rounded-full\"\n :style=\"cursorStyle\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;AAoBA,IAAM,UAAU;AAChB,IAAM,eAAe;;;;;;;;;;;EALrB,MAAM,aAAaC,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;GAC7B,MAAM,UAAU,WAAW,UAAU,UAAU,SAAS;GAGxD,OAAO,QADY,gBAAiB,UAAU,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;;GAIhG,OAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM;IAlBA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,iBAAe,WAAA;IAChB,iBAAc;IACd,iBAAc;IACd,WAAQ;IACP,OAAOC,MAAA,SAAA,CAAS,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEK,MAAA,WAAA,CAAW,CAAC,MAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,WAAA,CAAW,CAAC,MAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,YAAA,CAAY,CAAC,MAAM;GAEhCC,CAAAA,GAAAA,CAAAA,mBAIE,OAAA;IAHA,WAAQ;IACR,OAAM;IACL,OAAKC,eAAEF,MAAA,WAAA,CAAW"}

package/dist/components/color-picker/RuiColorInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiColorInput.js","names":[],"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 RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiTab from '@/components/tabs/tab/RuiTab.vue';\nimport RuiTabs from '@/components/tabs/tabs/RuiTabs.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';\nconst RGB_CHANNELS = ['Red', 'Green', 'Blue'];\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(value: string \| number): void {\n if (value === 'hex' \|\| value === 'rgb')\n set(inputType, value);\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 flex-col gap-2 w-full\"\n v-bind=\"$attrs\"\n >\n <!-- the format is a choice between two views of one value, which is what a segmented control is for -->\n <RuiTabs\n :model-value=\"inputType\"\n variant=\"segmented\"\n grow\n data-id=\"color-format\"\n @update:model-value=\"onInputTypeChange($event)\"\n >\n <RuiTab value=\"hex\">\n Hex\n </RuiTab>\n <RuiTab value=\"rgb\">\n RGB\n </RuiTab>\n </RuiTabs>\n <RuiTextField\n v-if=\"inputType === 'hex'\"\n v-model=\"state.hex\"\n class=\"w-full [&_input]:uppercase\"\n maxlength=\"6\"\n color=\"primary\"\n aria-label=\"Hex color\"\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-secondary\">#</span>\n </template>\n </RuiTextField>\n <div\n v-else\n class=\"flex gap-1\"\n >\n <RuiTextField\n v-for=\"(v, i) in state.rgb\"\n :key=\"i\"\n :model-value=\"v.toString()\"\n class=\"[&_input]:text-center w-full\"\n maxlength=\"3\"\n color=\"primary\"\n :aria-label=\"RGB_CHANNELS[i]\"\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</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiColorInput.js","names":["_sfc_main"],"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 RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiTab from '@/components/tabs/tab/RuiTab.vue';\nimport RuiTabs from '@/components/tabs/tabs/RuiTabs.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';\nconst RGB_CHANNELS = ['Red', 'Green', 'Blue'];\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(value: string \| number): void {\n if (value === 'hex' \|\| value === 'rgb')\n set(inputType, value);\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 flex-col gap-2 w-full\"\n v-bind=\"$attrs\"\n >\n <!-- the format is a choice between two views of one value, which is what a segmented control is for -->\n <RuiTabs\n :model-value=\"inputType\"\n variant=\"segmented\"\n grow\n data-id=\"color-format\"\n @update:model-value=\"onInputTypeChange($event)\"\n >\n <RuiTab value=\"hex\">\n Hex\n </RuiTab>\n <RuiTab value=\"rgb\">\n RGB\n </RuiTab>\n </RuiTabs>\n <RuiTextField\n v-if=\"inputType === 'hex'\"\n v-model=\"state.hex\"\n class=\"w-full [&_input]:uppercase\"\n maxlength=\"6\"\n color=\"primary\"\n aria-label=\"Hex color\"\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-secondary\">#</span>\n </template>\n </RuiTextField>\n <div\n v-else\n class=\"flex gap-1\"\n >\n <RuiTextField\n v-for=\"(v, i) in state.rgb\"\n :key=\"i\"\n :model-value=\"v.toString()\"\n class=\"[&_input]:text-center w-full\"\n maxlength=\"3\"\n color=\"primary\"\n :aria-label=\"RGB_CHANNELS[i]\"\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</template>\n"],"mappings":""}

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

	@@ -1 +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 RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiTab from '@/components/tabs/tab/RuiTab.vue';\nimport RuiTabs from '@/components/tabs/tabs/RuiTabs.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';\nconst RGB_CHANNELS = ['Red', 'Green', 'Blue'];\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(value: string \| number): void {\n if (value === 'hex' \|\| value === 'rgb')\n set(inputType, value);\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 flex-col gap-2 w-full\"\n v-bind=\"$attrs\"\n >\n <!-- the format is a choice between two views of one value, which is what a segmented control is for -->\n <RuiTabs\n :model-value=\"inputType\"\n variant=\"segmented\"\n grow\n data-id=\"color-format\"\n @update:model-value=\"onInputTypeChange($event)\"\n >\n <RuiTab value=\"hex\">\n Hex\n </RuiTab>\n <RuiTab value=\"rgb\">\n RGB\n </RuiTab>\n </RuiTabs>\n <RuiTextField\n v-if=\"inputType === 'hex'\"\n v-model=\"state.hex\"\n class=\"w-full [&_input]:uppercase\"\n maxlength=\"6\"\n color=\"primary\"\n aria-label=\"Hex color\"\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-secondary\">#</span>\n </template>\n </RuiTextField>\n <div\n v-else\n class=\"flex gap-1\"\n >\n <RuiTextField\n v-for=\"(v, i) in state.rgb\"\n :key=\"i\"\n :model-value=\"v.toString()\"\n class=\"[&_input]:text-center w-full\"\n maxlength=\"3\"\n color=\"primary\"\n :aria-label=\"RGB_CHANNELS[i]\"\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</template>\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,UAAU;AAEhB,IAAM,cAAc;;;;;;;;;;;EAJpB,MAAM,~~aAAa~~,SAAkB,SAAA,YAAmB;EAGxD,MAAM,oBAAoB;GAAC;GAAG;GAAG;EAAC;EAElC,MAAM,eAAe;GAAC;GAAO;GAAS;EAAM;EAE5C,MAAM,YAAY,IAAiB,KAAK;EACxC,MAAM,QAAQ,SAAS;GACrB,OAAO,IAAI,UAAU;GACrB,KAAK,IAAI,UAAU,CAAC,CAAC;GACrB,KAAK,IAAI,UAAU,CAAC,CAAC;EACvB,CAAC;EAED,SAAS,cAAc,OAAe,KAAmB;GACvD,IAAI,CAAC,MAAM,OAAO,CAAC,MAAM,OACvB;GAEF,MAAM,UAAU,MAAM,OAAO,KAAK,GAAG,GAAG,OAAO;GAC/C,MAAM,IAAI,OAAO;GACjB,MAAM,CAAC,GAAG,GAAG,KAAK,MAAM;GACxB,MAAM,MAAM,MAAM,UAAU;IAAE;IAAG;IAAG;GAAE,CAAC,CAAC,CAAC,MAAM;EACjD;EAEA,MAAM,eAAe,eAAe,QAAqB,OAAc,QAAiB;GACtF,IAAI,CAAC,MAAM,OACT;GAEF,MAAM,SAAS,MAAM;GACrB,IAAI,EAAE,kBAAkB,mBACtB;GAEF,MAAM,QAAQ,OAAO;GACrB,IAAI,WAAW,OAAO;IACpB,MAAM,MAAM,MAAM,QAAQ,KAAK,EAAE;IACjC,IAAI,UAAU,GAAG,CAAC,CAAC,QAAQ,KAAK,kBAAkB,SAAS,IAAI,MAAM,GACnE,MAAM,MAAM,MAAM;SACf,MAAM,MAAM,MAAM;GACzB,OACK,IAAI,QAAQ,KAAA,GACf,cAAc,OAAO,GAAG;GAG1B,IAAI,YAAY,MAAM,KAAK;EAC7B,GAAG,GAAG;EAEN,MAAM,gBAAgB,eAAe,QAAqB,OAAe,QAAiB;GACxF,IAAI,CAAC,OACH;GAEF,IAAI,WAAW,OAAO;IACpB,MAAM,MAAM,MAAM,QAAQ,KAAK,EAAE;IACjC,IAAI,UAAU,GAAG,CAAC,CAAC,QAAQ,KAAK,MAAM,SAAS,IAAI,WAAW,GAC5D,MAAM,MAAM,MAAM;GACtB,OACK,IAAI,QAAQ,KAAA,GACf,cAAc,OAAO,GAAG;GAG1B,IAAI,YAAY,MAAM,KAAK;EAC7B,GAAG,GAAG;EAEN,SAAS,kBAAkB,OAA8B;GACvD,IAAI,UAAU,SAAS,UAAU,OAC/B,IAAI,WAAW,KAAK;EACxB;EAEA,YACQ;GACJ,MAAM,QAAQ,IAAI,UAAU;GAC5B,OAAO,CAAC,MAAM,KAAK,GAAG,MAAM,GAAG;EACjC,SACM;GACJ,MAAM,QAAQ,IAAI,UAAU;GAC5B,MAAM,QAAQ;GACd,MAAM,MAAM,MAAM;GAClB,MAAM,MAAM,MAAM;EACpB,CACF;;GAIE,~~OAAA~~,UAAA,~~GAAA~~,mBAsDM,~~OAtDN~~,WAsDM;IArDJ,WAAQ;IACR,OAAM;~~GACEA~~,GAAAA,KAAAA,MAAM,GAAA,~~CAGd~~,~~YAaU~~,iBAAA;IAZP,~~eAAa~~,MAAA,SAAA;IACd,SAAQ;IACR,MAAA;IACA,WAAQ;IACP,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,kBAAkB,MAAM;;IAE7C,~~SAAA~~,cAES,~~CAFT~~,~~YAES~~,gBAAA,EAFD,OAAM,MAAK,GAAA;KAAC,~~SAAA~~,cAEpB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,~~CAFoB~~,gBAAA,SAEpB,EAAA,CAAA,EAAA,CAAA;;~~IACA~~,~~CAAA~~,~~GAAA~~,~~YAES~~,gBAAA,EAFD,OAAM,MAAK,GAAA;KAAC,~~SAAA~~,cAEpB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,~~CAFoB~~,gBAAA,SAEpB,EAAA,CAAA,EAAA,CAAA;;;;~~GAGM~~,~~GAAA~~,~~GAAA~~,~~CAAA~~,~~aAAA~~,~~CAAA~~,~~GAAA~~,MAAA,SAAA,MAAS,~~SADjB~~,UAAA,~~GAAA~~,~~YAee~~,sBAAA;;IAbJ,~~YAAA~~,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,CAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAG,SAOG,OAAA,OAAA,OAAA,MAAA,~~WAAA~~,MAAA,aAAA,CAAa,~~CAAC~~,MAAA,SAAA,GAAW,MAAM,EAAA;IANpD,OAAM;IACN,WAAU;IACV,OAAM;IACN,cAAW;IACX,OAAA;IACA,gBAAA;IAEC,QAAI,OAAA,OAAA,OAAA,MAAA,~~WAAE~~,MAAA,YAAA,CAAY,~~CAAC~~,MAAA,SAAA,GAAW,MAAM;;IAE1B,~~SAAO~~,cAC8B,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,~~CAA9C~~,mBAA8C,QAAA,EAAxC,OAAM,0BAAyB,GAAC,KAAC,EAAA,CAAA,EAAA,CAAA;;~~GAG3C~~,~~GAAA~~,~~GAAA~~,~~CAAA~~,~~YAAA~~,~~CAAA~~,~~MAAA~~,UAAA,~~GAAA~~,mBAiBM,OAjBN,YAiBM,~~EAbJ~~,UAAA,IAAA,~~GAAA~~,~~mBAYE~~,UAAA,~~MAAA~~,~~WAXiB~~,MAAA,KAAA,CAAK,CAAC,MAAf,GAAG,MAAC;IADd,~~OAAA~~,UAAA,~~GAAA~~,~~YAYE~~,sBAAA;KAVC,KAAK;KACL,eAAa,EAAE,SAAQ;KACxB,OAAM;KACN,WAAU;KACV,OAAM;KACL,cAAY,aAAa;KAC1B,OAAA;KACA,gBAAA;KACC,wBAAkB,~~WAAE~~,MAAA,aAAA,CAAa,~~CAAC~~,MAAA,SAAA,GAAW,QAAQ,CAAC;KACtD,SAAI,~~WAAE~~,MAAA,YAAA,CAAY,~~CAAC~~,MAAA,SAAA,GAAW,QAAQ,CAAC"}
1	+ {"version":3,"file":"RuiColorInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_createVNode","RuiTabs","_unref","_withCtx","RuiTab","_createTextVNode","_createBlock","RuiTextField","_createElementVNode","_Fragment","_renderList"],"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 RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiTab from '@/components/tabs/tab/RuiTab.vue';\nimport RuiTabs from '@/components/tabs/tabs/RuiTabs.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';\nconst RGB_CHANNELS = ['Red', 'Green', 'Blue'];\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(value: string \| number): void {\n if (value === 'hex' \|\| value === 'rgb')\n set(inputType, value);\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 flex-col gap-2 w-full\"\n v-bind=\"$attrs\"\n >\n <!-- the format is a choice between two views of one value, which is what a segmented control is for -->\n <RuiTabs\n :model-value=\"inputType\"\n variant=\"segmented\"\n grow\n data-id=\"color-format\"\n @update:model-value=\"onInputTypeChange($event)\"\n >\n <RuiTab value=\"hex\">\n Hex\n </RuiTab>\n <RuiTab value=\"rgb\">\n RGB\n </RuiTab>\n </RuiTabs>\n <RuiTextField\n v-if=\"inputType === 'hex'\"\n v-model=\"state.hex\"\n class=\"w-full [&_input]:uppercase\"\n maxlength=\"6\"\n color=\"primary\"\n aria-label=\"Hex color\"\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-secondary\">#</span>\n </template>\n </RuiTextField>\n <div\n v-else\n class=\"flex gap-1\"\n >\n <RuiTextField\n v-for=\"(v, i) in state.rgb\"\n :key=\"i\"\n :model-value=\"v.toString()\"\n class=\"[&_input]:text-center w-full\"\n maxlength=\"3\"\n color=\"primary\"\n :aria-label=\"RGB_CHANNELS[i]\"\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</template>\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiColorPicker.js","names":[],"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' });\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":""}
1	+ {"version":3,"file":"RuiColorPicker.js","names":["_sfc_main"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, 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' });\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":""}

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

	@@ -1 +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' });\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,IAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,IAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,uBAAuB,CAAC;;GAInD,~~OAAA~~,UAAA,~~GAAA~~,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;GAC7BA,GAAAA;IAAAA,GAAAA,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;~~GAErC~~,~~GAAA~~,~~MAAA~~,~~GAAA~~,~~CAAA~~,~~OAAA~~,~~CAAA~~,~~GAAA~~,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;IAFS,~~YAAA~~,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;~~GAIV~~,~~GAAA~~,~~MAAA~~,~~GAAA~~,~~CAAA~~,~~YAAA~~,~~CAAA~~,~~CAAA~~,~~CAAA~~,~~GAAA~~,~~YAAuC~~,uBAAA;IAAf,~~YAAA~~,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}
1	+ {"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","RuiColorBoard","_createElementVNode","RuiColorDisplay","RuiColorHue","RuiColorInput"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, 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' });\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,aAAaC,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,IAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,uBAAuB,CAAC;;GAInD,OAAAC,UAAA,GAAAC,mBAsBM,OAtBNC,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAOC,MAAA,SAAA,CAAS,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErCM,YAGEC,uBAAA;IAFC,OAAOF,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErCG,GAAAA,MAAAA,GAAAA,CAAAA,OAAAA,CAAAA,GAAAA,mBAUM,OAVN,YAUM,CATJA,mBAMM,OANN,YAMM,CALJF,YAAkDG,yBAAA,EAAhC,OAAOJ,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrCC,YAGEI,qBAAA;IAFS,YAAAL,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIVC,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,CAAAA,CAAAA,CAAAA,GAAAA,YAAuCK,uBAAA;IAAf,YAAAN,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}

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

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