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

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

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 (433) hide show

package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { timePickerStyles } from '@/components/time-picker/time-picker-styles';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' \| 'minute' \| 'second' \| 'millisecond';\n\nexport interface RuiTimePickerProps {\n accuracy?: TimeAccuracy;\n borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date \| undefined>({ required: true });\n\nconst selectedHour = defineModel<number \| undefined>('hour');\nconst selectedMinute = defineModel<number \| undefined>('minute');\nconst selectedSecond = defineModel<number \| undefined>('second');\nconst selectedMillisecond = defineModel<number \| undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst { accuracy = TimeAccuracy.MINUTE, borderless = false } = defineProps<RuiTimePickerProps>();\n\nconst ui = timePickerStyles();\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n hour: 12,\n minute: 60,\n second: 60,\n millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n hour: 1,\n minute: 5,\n second: 5,\n millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(\n () => accuracy === TimeAccuracy.SECOND \|\| accuracy === TimeAccuracy.MILLISECOND,\n);\nconst showMillisecond = computed<boolean>(() => accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' \| 'AM'>(() =>\n isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM',\n);\n\nconst displayHour = computed<number \| undefined>(() => {\n if (!isDefined(selectedHour)) {\n return undefined;\n }\n const hourValue = get(selectedHour);\n const hour = hourValue % TWELVE_HOURS;\n return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number \| undefined>(() => {\n const mode = get(editMode);\n if (mode === 'hour') {\n return get(displayHour);\n }\n else if (mode === 'minute') {\n return get(selectedMinute);\n }\n else if (mode === 'second') {\n return get(selectedSecond);\n }\n else {\n return get(selectedMillisecond);\n }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n const mode = get(editMode);\n if (mode === 'hour' \|\| !isDefined(editedValue)) {\n return false;\n }\n else {\n const interval = intervals[mode];\n const value = get(editedValue);\n return value % interval !== 0;\n }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n if (!isDefined(editedValue)) {\n return {};\n }\n const currentValue = get(editedValue);\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n return {\n height: '36%',\n top: '14%',\n left: '50%',\n transformOrigin: 'bottom center',\n transform: `translateX(-50%) rotate(${angle}deg)`,\n zIndex: 10,\n };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n if (!isDefined(editedValue)) {\n return {};\n }\n const radius = '38%';\n const currentValue = get(editedValue);\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n const radians = (angle * Math.PI) / 180;\n\n const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n return {\n position: 'absolute',\n top: `${y}%`,\n left: `${x}%`,\n width: '10px',\n height: '10px',\n borderRadius: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: 11,\n };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n const mode = get(editMode);\n const interval = intervals[mode];\n const total = totalItemsPerMode[mode];\n const numbers = generateNumbers(total, interval);\n if (mode === 'hour') {\n numbers[0] = 12;\n }\n return numbers;\n});\n\nfunction getModelHours(): number \| undefined {\n return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes(): number \| undefined {\n return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds(): number \| undefined {\n const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n return acceptedAccuracy.includes(accuracy) && isDefined(modelValue)\n ? new Date(get(modelValue)).getSeconds()\n : undefined;\n}\n\nfunction getModelMilliseconds(): number \| undefined {\n return accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n ? new Date(get(modelValue)).getMilliseconds()\n : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n const numbers: number[] = [];\n for (let i = 0; i < total; i += interval) {\n numbers.push(i);\n }\n return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n return value !== undefined ? value.toString().padStart(padding, '0') : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n const radius = '38%';\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = num * (FULL_CIRCLE / totalItems) - 90;\n\n const radians = (angle * Math.PI) / 180;\n const x = 50 + parseFloat(radius) * Math.cos(radians);\n const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n return {\n top: `${y}%`,\n left: `${x}%`,\n transform: 'translate(-50%, -50%)',\n };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n if (!isDefined(editedValue)) {\n return false;\n }\n const mode = get(editMode);\n if (mode === 'hour') {\n return get(displayHour) === num;\n }\n else {\n const value = get(editedValue);\n const interval = intervals[mode];\n return value === num \|\| (value % interval === 0 && value === num);\n }\n}\n\nfunction toggleAmPm(): void {\n if (!isDefined(selectedHour)) {\n return;\n }\n if (get(selectedHour) < TWELVE_HOURS) {\n set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n }\n else {\n set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n }\n\n updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent \| TouchEvent): void {\n event.preventDefault();\n set(isDragging, true);\n\n if (!isDefined(clockFace))\n return;\n\n const rect = get(clockFace).getBoundingClientRect();\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + rect.height / 2;\n let rafId: number \| null = null;\n\n const applyMove = (clientX: number, clientY: number): void => {\n const x = clientX - centerX;\n const y = clientY - centerY;\n\n let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n if (angle < 0)\n angle += FULL_CIRCLE;\n\n const mode = get(editMode);\n const unit =\n Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n if (mode === 'hour') {\n let hour = unit;\n if (hour === 0)\n hour = TWELVE_HOURS;\n\n if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n hour += TWELVE_HOURS;\n }\n else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n hour = 0;\n }\n\n set(selectedHour, hour);\n }\n else if (mode === 'minute') {\n set(selectedMinute, unit);\n }\n else if (mode === 'second') {\n set(selectedSecond, unit);\n }\n else {\n set(selectedMillisecond, unit);\n }\n\n updateModelValue();\n };\n\n const handleMove = (moveEvent: MouseEvent \| TouchEvent): void => {\n if (!get(isDragging))\n return;\n\n if (rafId !== null)\n return;\n\n let clientX: number;\n let clientY: number;\n\n if ('touches' in moveEvent) {\n const touch = moveEvent.touches[0];\n assert(touch);\n clientX = touch.clientX;\n clientY = touch.clientY;\n }\n else {\n clientX = moveEvent.clientX;\n clientY = moveEvent.clientY;\n }\n\n rafId = requestAnimationFrame(() => {\n applyMove(clientX, clientY);\n rafId = null;\n });\n };\n\n const handleEnd = (): void => {\n if (rafId !== null) {\n cancelAnimationFrame(rafId);\n rafId = null;\n }\n set(isDragging, false);\n document.removeEventListener('mousemove', handleMove);\n document.removeEventListener('touchmove', handleMove);\n document.removeEventListener('mouseup', handleEnd);\n document.removeEventListener('touchend', handleEnd);\n\n if (get(editMode) === 'hour') {\n set(editMode, 'minute');\n }\n else if (get(showSecond) && get(editMode) === 'minute') {\n set(editMode, 'second');\n }\n else if (get(showMillisecond) && get(editMode) === 'second') {\n set(editMode, 'millisecond');\n }\n };\n\n document.addEventListener('mousemove', handleMove);\n document.addEventListener('touchmove', handleMove);\n document.addEventListener('mouseup', handleEnd);\n document.addEventListener('touchend', handleEnd);\n\n // Apply initial position synchronously for immediate feedback\n const initialEvent = event;\n let clientX: number;\n let clientY: number;\n if ('touches' in initialEvent) {\n const touch = initialEvent.touches[0];\n assert(touch);\n clientX = touch.clientX;\n clientY = touch.clientY;\n }\n else {\n clientX = initialEvent.clientX;\n clientY = initialEvent.clientY;\n }\n applyMove(clientX, clientY);\n}\n\nfunction selectByClick(num: number): void {\n const mode = get(editMode);\n if (mode === 'hour') {\n let newHour = num;\n\n if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n newHour += TWELVE_HOURS;\n }\n\n set(selectedHour, newHour);\n set(editMode, 'minute');\n }\n else if (mode === 'minute') {\n set(selectedMinute, num);\n if (get(showSecond))\n set(editMode, 'second');\n }\n else if (mode === 'second') {\n set(selectedSecond, num);\n if (get(showMillisecond)) {\n set(editMode, 'millisecond');\n }\n }\n else if (mode === 'millisecond') {\n set(selectedMillisecond, num);\n }\n\n updateModelValue();\n}\n\nfunction updateModelValue(): void {\n if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n return;\n }\n nextTick(() => {\n const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n date.setHours(get(selectedHour));\n date.setMinutes(get(selectedMinute));\n date.setSeconds(get(selectedSecond) ?? 0);\n date.setMilliseconds(get(selectedMillisecond) ?? 0);\n set(modelValue, date);\n });\n}\n\nwatch(\n modelValue,\n () => {\n set(selectedHour, getModelHours());\n set(selectedMinute, getModelMinutes());\n set(selectedSecond, getModelSeconds());\n set(selectedMillisecond, getModelMilliseconds());\n },\n);\n\nonMounted(() => {\n set(selectedHour, getModelHours());\n set(selectedMinute, getModelMinutes());\n set(selectedSecond, getModelSeconds());\n set(selectedMillisecond, getModelMilliseconds());\n});\n</script>\n\n<template>\n <div\n role=\"group\"\n aria-label=\"Time picker\"\n :class=\"ui.root({ bordered: !borderless })\"\n >\n <div :class=\"ui.digitalDisplay()\">\n <div class=\"flex justify-center items-center gap-1\">\n <div\n role=\"button\"\n aria-label=\"Select hours\"\n :class=\"ui.digit({ active: editMode === 'hour' })\"\n @click=\"editMode = 'hour'\"\n >\n {{ formatValue(displayHour) }}\n </div>\n <div class=\"text-2xl font-semibold\">\n :\n </div>\n <div\n role=\"button\"\n aria-label=\"Select minutes\"\n :class=\"ui.digit({ active: editMode === 'minute' })\"\n @click=\"editMode = 'minute'\"\n >\n {{ formatValue(selectedMinute) }}\n </div>\n <div\n v-if=\"showSecond\"\n class=\"text-2xl font-semibold\"\n >\n :\n </div>\n <div\n v-if=\"showSecond\"\n role=\"button\"\n aria-label=\"Select seconds\"\n :class=\"ui.digit({ active: editMode === 'second' })\"\n @click=\"editMode = 'second'\"\n >\n {{ formatValue(selectedSecond) }}\n </div>\n\n <div\n v-if=\"showMillisecond\"\n class=\"text-lg font-semibold\"\n >\n .\n </div>\n\n <div\n v-if=\"showMillisecond\"\n role=\"button\"\n aria-label=\"Select milliseconds\"\n :class=\"ui.digit({ active: editMode === 'millisecond', class: '!text-lg' })\"\n @click=\"editMode = 'millisecond'\"\n >\n {{ formatValue(selectedMillisecond, 3) }}\n </div>\n <div class=\"text-xl\">\n <div\n role=\"button\"\n aria-label=\"Toggle AM/PM\"\n class=\"rui-time-picker-period cursor-pointer\"\n @click=\"toggleAmPm()\"\n >\n {{ period }}\n </div>\n </div>\n </div>\n </div>\n\n <div\n ref=\"clockFace\"\n role=\"listbox\"\n :aria-label=\"`Select ${editMode}`\"\n :class=\"ui.clockFace()\"\n @mousedown=\"startDrag($event)\"\n @touchstart=\"startDrag($event)\"\n >\n <div\n :class=\"ui.centerDot()\"\n :style=\"dotStyle\"\n />\n\n <div\n :class=\"ui.clockHand()\"\n :style=\"clockHandStyle\"\n />\n\n <div\n v-if=\"displayClockHandCircle\"\n :class=\"ui.clockHandCircle()\"\n :style=\"clockHandCircleStyle\"\n />\n\n <div\n v-for=\"num in clockNumbers\"\n :key=\"`num-${num}`\"\n role=\"option\"\n :aria-selected=\"isSelectedNumber(num)\"\n :class=\"[\n ui.clockNumber({ selected: isSelectedNumber(num) }),\n `rui-${editMode}-${num.toString().padStart(2, '0')}`,\n ]\"\n :style=\"numberStyle(num)\"\n @click=\"selectByClick(num)\"\n >\n {{ num }}\n </div>\n </div>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { timePickerStyles } from '@/components/time-picker/time-picker-styles';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' \| 'minute' \| 'second' \| 'millisecond';\n\nexport interface RuiTimePickerProps {\n accuracy?: TimeAccuracy;\n borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date \| undefined>({ required: true });\n\nconst selectedHour = defineModel<number \| undefined>('hour');\nconst selectedMinute = defineModel<number \| undefined>('minute');\nconst selectedSecond = defineModel<number \| undefined>('second');\nconst selectedMillisecond = defineModel<number \| undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst { accuracy = TimeAccuracy.MINUTE, borderless = false } = defineProps<RuiTimePickerProps>();\n\nconst ui = timePickerStyles();\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n hour: 12,\n minute: 60,\n second: 60,\n millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n hour: 1,\n minute: 5,\n second: 5,\n millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(\n () => accuracy === TimeAccuracy.SECOND \|\| accuracy === TimeAccuracy.MILLISECOND,\n);\nconst showMillisecond = computed<boolean>(() => accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' \| 'AM'>(() =>\n isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM',\n);\n\nconst displayHour = computed<number \| undefined>(() => {\n if (!isDefined(selectedHour)) {\n return undefined;\n }\n const hourValue = get(selectedHour);\n const hour = hourValue % TWELVE_HOURS;\n return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number \| undefined>(() => {\n const mode = get(editMode);\n if (mode === 'hour') {\n return get(displayHour);\n }\n else if (mode === 'minute') {\n return get(selectedMinute);\n }\n else if (mode === 'second') {\n return get(selectedSecond);\n }\n else {\n return get(selectedMillisecond);\n }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n const mode = get(editMode);\n if (mode === 'hour' \|\| !isDefined(editedValue)) {\n return false;\n }\n else {\n const interval = intervals[mode];\n const value = get(editedValue);\n return value % interval !== 0;\n }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n if (!isDefined(editedValue)) {\n return {};\n }\n const currentValue = get(editedValue);\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n return {\n height: '36%',\n top: '14%',\n left: '50%',\n transformOrigin: 'bottom center',\n transform: `translateX(-50%) rotate(${angle}deg)`,\n zIndex: 10,\n };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n if (!isDefined(editedValue)) {\n return {};\n }\n const radius = '38%';\n const currentValue = get(editedValue);\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n const radians = (angle * Math.PI) / 180;\n\n const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n return {\n position: 'absolute',\n top: `${y}%`,\n left: `${x}%`,\n width: '10px',\n height: '10px',\n borderRadius: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: 11,\n };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n const mode = get(editMode);\n const interval = intervals[mode];\n const total = totalItemsPerMode[mode];\n const numbers = generateNumbers(total, interval);\n if (mode === 'hour') {\n numbers[0] = 12;\n }\n return numbers;\n});\n\nfunction getModelHours(): number \| undefined {\n return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes(): number \| undefined {\n return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds(): number \| undefined {\n const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n return acceptedAccuracy.includes(accuracy) && isDefined(modelValue)\n ? new Date(get(modelValue)).getSeconds()\n : undefined;\n}\n\nfunction getModelMilliseconds(): number \| undefined {\n return accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n ? new Date(get(modelValue)).getMilliseconds()\n : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n const numbers: number[] = [];\n for (let i = 0; i < total; i += interval) {\n numbers.push(i);\n }\n return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n return value !== undefined ? value.toString().padStart(padding, '0') : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n const radius = '38%';\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = num * (FULL_CIRCLE / totalItems) - 90;\n\n const radians = (angle * Math.PI) / 180;\n const x = 50 + parseFloat(radius) * Math.cos(radians);\n const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n return {\n top: `${y}%`,\n left: `${x}%`,\n transform: 'translate(-50%, -50%)',\n };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n if (!isDefined(editedValue)) {\n return false;\n }\n const mode = get(editMode);\n if (mode === 'hour') {\n return get(displayHour) === num;\n }\n else {\n const value = get(editedValue);\n const interval = intervals[mode];\n return value === num \|\| (value % interval === 0 && value === num);\n }\n}\n\nfunction toggleAmPm(): void {\n if (!isDefined(selectedHour)) {\n return;\n }\n if (get(selectedHour) < TWELVE_HOURS) {\n set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n }\n else {\n set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n }\n\n updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent \| TouchEvent): void {\n event.preventDefault();\n set(isDragging, true);\n\n if (!isDefined(clockFace))\n return;\n\n const rect = get(clockFace).getBoundingClientRect();\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + rect.height / 2;\n let rafId: number \| null = null;\n\n const applyMove = (clientX: number, clientY: number): void => {\n const x = clientX - centerX;\n const y = clientY - centerY;\n\n let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n if (angle < 0)\n angle += FULL_CIRCLE;\n\n const mode = get(editMode);\n const unit =\n Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n if (mode === 'hour') {\n let hour = unit;\n if (hour === 0)\n hour = TWELVE_HOURS;\n\n if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n hour += TWELVE_HOURS;\n }\n else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n hour = 0;\n }\n\n set(selectedHour, hour);\n }\n else if (mode === 'minute') {\n set(selectedMinute, unit);\n }\n else if (mode === 'second') {\n set(selectedSecond, unit);\n }\n else {\n set(selectedMillisecond, unit);\n }\n\n updateModelValue();\n };\n\n const handleMove = (moveEvent: MouseEvent \| TouchEvent): void => {\n if (!get(isDragging))\n return;\n\n if (rafId !== null)\n return;\n\n let clientX: number;\n let clientY: number;\n\n if ('touches' in moveEvent) {\n const touch = moveEvent.touches[0];\n assert(touch);\n clientX = touch.clientX;\n clientY = touch.clientY;\n }\n else {\n clientX = moveEvent.clientX;\n clientY = moveEvent.clientY;\n }\n\n rafId = requestAnimationFrame(() => {\n applyMove(clientX, clientY);\n rafId = null;\n });\n };\n\n const handleEnd = (): void => {\n if (rafId !== null) {\n cancelAnimationFrame(rafId);\n rafId = null;\n }\n set(isDragging, false);\n document.removeEventListener('mousemove', handleMove);\n document.removeEventListener('touchmove', handleMove);\n document.removeEventListener('mouseup', handleEnd);\n document.removeEventListener('touchend', handleEnd);\n\n if (get(editMode) === 'hour') {\n set(editMode, 'minute');\n }\n else if (get(showSecond) && get(editMode) === 'minute') {\n set(editMode, 'second');\n }\n else if (get(showMillisecond) && get(editMode) === 'second') {\n set(editMode, 'millisecond');\n }\n };\n\n document.addEventListener('mousemove', handleMove);\n document.addEventListener('touchmove', handleMove);\n document.addEventListener('mouseup', handleEnd);\n document.addEventListener('touchend', handleEnd);\n\n // Apply initial position synchronously for immediate feedback\n const initialEvent = event;\n let clientX: number;\n let clientY: number;\n if ('touches' in initialEvent) {\n const touch = initialEvent.touches[0];\n assert(touch);\n clientX = touch.clientX;\n clientY = touch.clientY;\n }\n else {\n clientX = initialEvent.clientX;\n clientY = initialEvent.clientY;\n }\n applyMove(clientX, clientY);\n}\n\nfunction selectByClick(num: number): void {\n const mode = get(editMode);\n if (mode === 'hour') {\n let newHour = num;\n\n if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n newHour += TWELVE_HOURS;\n }\n\n set(selectedHour, newHour);\n set(editMode, 'minute');\n }\n else if (mode === 'minute') {\n set(selectedMinute, num);\n if (get(showSecond))\n set(editMode, 'second');\n }\n else if (mode === 'second') {\n set(selectedSecond, num);\n if (get(showMillisecond)) {\n set(editMode, 'millisecond');\n }\n }\n else if (mode === 'millisecond') {\n set(selectedMillisecond, num);\n }\n\n updateModelValue();\n}\n\nfunction updateModelValue(): void {\n if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n return;\n }\n nextTick(() => {\n const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n date.setHours(get(selectedHour));\n date.setMinutes(get(selectedMinute));\n date.setSeconds(get(selectedSecond) ?? 0);\n date.setMilliseconds(get(selectedMillisecond) ?? 0);\n set(modelValue, date);\n });\n}\n\nwatch(\n modelValue,\n () => {\n set(selectedHour, getModelHours());\n set(selectedMinute, getModelMinutes());\n set(selectedSecond, getModelSeconds());\n set(selectedMillisecond, getModelMilliseconds());\n },\n);\n\nonMounted(() => {\n set(selectedHour, getModelHours());\n set(selectedMinute, getModelMinutes());\n set(selectedSecond, getModelSeconds());\n set(selectedMillisecond, getModelMilliseconds());\n});\n</script>\n\n<template>\n <div\n role=\"group\"\n aria-label=\"Time picker\"\n :class=\"ui.root({ bordered: !borderless })\"\n >\n <div :class=\"ui.digitalDisplay()\">\n <div :class=\"ui.time()\">\n <button\n type=\"button\"\n aria-label=\"Select hours\"\n :aria-pressed=\"editMode === 'hour'\"\n :class=\"ui.digit({ active: editMode === 'hour' })\"\n @click=\"editMode = 'hour'\"\n >\n {{ formatValue(displayHour) }}\n </button>\n <div :class=\"ui.separator()\">\n :\n </div>\n <button\n type=\"button\"\n aria-label=\"Select minutes\"\n :aria-pressed=\"editMode === 'minute'\"\n :class=\"ui.digit({ active: editMode === 'minute' })\"\n @click=\"editMode = 'minute'\"\n >\n {{ formatValue(selectedMinute) }}\n </button>\n <div\n v-if=\"showSecond\"\n :class=\"ui.separator()\"\n >\n :\n </div>\n <button\n v-if=\"showSecond\"\n type=\"button\"\n aria-label=\"Select seconds\"\n :aria-pressed=\"editMode === 'second'\"\n :class=\"ui.digit({ active: editMode === 'second' })\"\n @click=\"editMode = 'second'\"\n >\n {{ formatValue(selectedSecond) }}\n </button>\n\n <div\n v-if=\"showMillisecond\"\n :class=\"ui.separator({ class: 'text-lg' })\"\n >\n .\n </div>\n\n <button\n v-if=\"showMillisecond\"\n type=\"button\"\n aria-label=\"Select milliseconds\"\n :aria-pressed=\"editMode === 'millisecond'\"\n :class=\"ui.digit({ active: editMode === 'millisecond', class: 'text-lg' })\"\n @click=\"editMode = 'millisecond'\"\n >\n {{ formatValue(selectedMillisecond, 3) }}\n </button>\n </div>\n <button\n type=\"button\"\n aria-label=\"Toggle AM/PM\"\n :class=\"ui.period()\"\n @click=\"toggleAmPm()\"\n >\n {{ period }}\n </button>\n </div>\n\n <div\n ref=\"clockFace\"\n role=\"listbox\"\n :aria-label=\"`Select ${editMode}`\"\n :class=\"ui.clockFace()\"\n @mousedown=\"startDrag($event)\"\n @touchstart=\"startDrag($event)\"\n >\n <div\n :class=\"ui.centerDot()\"\n :style=\"dotStyle\"\n />\n\n <div\n :class=\"ui.clockHand()\"\n :style=\"clockHandStyle\"\n />\n\n <div\n v-if=\"displayClockHandCircle\"\n :class=\"ui.clockHandCircle()\"\n :style=\"clockHandCircleStyle\"\n />\n\n <div\n v-for=\"num in clockNumbers\"\n :key=\"`num-${num}`\"\n role=\"option\"\n :aria-selected=\"isSelectedNumber(num)\"\n :class=\"[\n ui.clockNumber({ selected: isSelectedNumber(num) }),\n `rui-${editMode}-${num.toString().padStart(2, '0')}`,\n ]\"\n :style=\"numberStyle(num)\"\n @click=\"selectByClick(num)\"\n >\n {{ num }}\n </div>\n </div>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/time-picker/time-picker-styles.d.ts CHANGED Viewed

@@ -3,6 +3,9 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
         true: {
             root: string;
         };
+        false: {
+            root: string;
+        };
     };
     active: {
         true: {
@@ -17,7 +20,10 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     digitalDisplay: string;
+    time: string;
     digit: string;
+    separator: string;
+    period: string;
     clockFace: string;
     centerDot: string;
     clockHand: string;
@@ -28,6 +34,9 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
         true: {
             root: string;
         };
+        false: {
+            root: string;
+        };
     };
     active: {
         true: {
@@ -42,7 +51,10 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     digitalDisplay: string;
+    time: string;
     digit: string;
+    separator: string;
+    period: string;
     clockFace: string;
     centerDot: string;
     clockHand: string;
@@ -53,6 +65,9 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
         true: {
             root: string;
         };
+        false: {
+            root: string;
+        };
     };
     active: {
         true: {
@@ -67,7 +82,10 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     digitalDisplay: string;
+    time: string;
     digit: string;
+    separator: string;
+    period: string;
     clockFace: string;
     centerDot: string;
     clockHand: string;

package/dist/components/time-picker/time-picker-styles.js CHANGED Viewed

@@ -2,23 +2,29 @@ import { tv } from "../../utils/tv.js";
 //#region src/components/time-picker/time-picker-styles.ts
 var timePickerStyles = tv({
 	slots: {
-		root: "bg-white overflow-hidden text-rui-text p-3 dark:bg-rui-grey-900",
-		digitalDisplay: "mb-2 text-center",
-		digit: "text-2xl font-semibold cursor-pointer",
-		clockFace: "relative rounded-full w-64 h-64 mx-auto border border-rui-grey-200 dark:border-rui-grey-800",
-		centerDot: "absolute rounded-full bg-rui-primary w-3 h-3",
+		root: "overflow-hidden text-rui-text p-3 pt-2",
+		digitalDisplay: "mb-3 grid grid-cols-[1fr_auto_1fr] items-center",
+		time: `col-start-2 flex items-center gap-0.5 [font-feature-settings:'case','cv05','cv08']`,
+		digit: ["rounded-rui-control px-1.5 text-2xl/7 font-semibold tabular-nums transition-colors", "hover:bg-rui-hover outline-hidden focus-visible:focus-ring"].join(" "),
+		separator: "text-2xl/7 font-semibold text-rui-text-secondary",
+		period: ["col-start-3 justify-self-start ml-2 inline-flex h-7 items-center rounded-rui-control border border-rui-outline px-2 text-sm font-medium transition-colors", "hover:bg-rui-hover outline-hidden focus-visible:focus-ring rui-time-picker-period"].join(" "),
+		clockFace: "relative rounded-full w-64 h-64 mx-auto bg-rui-hover",
+		centerDot: "absolute rounded-full bg-rui-primary w-2 h-2",
 		clockHand: "absolute w-[1.5px] bg-rui-primary rounded-full",
 		clockHandCircle: "absolute border-2 border-rui-primary",
 		clockNumber: [
-			"absolute text-center text-sm font-medium w-8 h-8",
+			"absolute text-center text-sm font-medium w-8 h-8 tabular-nums",
 			"flex items-center justify-center",
-			"hover:bg-rui-primary-lighter cursor-pointer rounded-full"
+			"hover:bg-rui-hover cursor-pointer rounded-full"
 		].join(" ")
 	},
 	variants: {
-		bordered: { true: { root: "rounded-md shadow-sm border border-rui-grey-200 dark:border-rui-grey-800" } },
-		active: { true: { digit: "text-rui-primary" } },
-		selected: { true: { clockNumber: "bg-rui-primary text-rui-dark-text dark:text-rui-light-text z-10 font-bold" } }
+		bordered: {
+			true: { root: "bg-rui-surface rounded-rui-panel border border-rui-divider" },
+			false: { root: "bg-rui-menu" }
+		},
+		active: { true: { digit: "bg-rui-primary-soft text-rui-primary hover:bg-rui-primary-soft dark:bg-rui-primary/20 dark:text-rui-primary-lighter dark:hover:bg-rui-primary/20" } },
+		selected: { true: { clockNumber: "bg-rui-primary-fill hover:bg-rui-primary-fill text-rui-primary-foreground z-20 font-semibold" } }
 	}
 });
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"time-picker-styles.js","names":[],"sources":["../../../src/components/time-picker/time-picker-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const timePickerStyles = tv({\n slots: {\n root: '~~bg-white~~ overflow-hidden text-rui-text p-3 ~~dark:bg~~-~~rui-grey-900~~',\n digitalDisplay: 'mb-2 ~~text~~-center',\n digit: 'text-2xl font-semibold ~~cursor~~-~~pointer~~',\n ~~clockFace~~: '~~relative~~ ~~rounded~~-~~full~~ w-64 h-64 mx-~~auto~~ border border-rui-~~grey~~-~~200~~ ~~dark~~:~~border~~-rui-~~grey~~-~~800~~',\n centerDot: 'absolute rounded-full bg-rui-primary w-3 h-3',\n clockHand: 'absolute w-[1.5px] bg-rui-primary rounded-full',\n clockHandCircle: 'absolute border-2 border-rui-primary',\n clockNumber: [\n 'absolute text-center text-sm font-medium w-8 h-8',\n 'flex items-center justify-center',\n 'hover:bg-rui-~~primary-lighter~~ cursor-pointer rounded-full',\n ].join(' '),\n },\n variants: {\n bordered: {\n true: {\n root: '~~rounded~~-md ~~shadow~~-sm border border-rui-~~grey-200~~ ~~dark~~:~~border~~-rui-~~grey-800~~',\n },\n },\n active: {\n true: {\n digit: 'text-rui-primary',\n },\n },\n selected: {\n true: {\n clockNumber: 'bg-rui-primary ~~text~~-rui-~~dark~~-~~text~~ ~~dark:~~text-rui-~~light~~-~~text~~ z-10 font-~~bold~~',\n },\n },\n },\n});\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG;CACjC,OAAO;~~EACL~~,MAAM;~~EACN~~,gBAAgB;~~EAChB~~,OAAO;~~EACP~~,WAAW;EACX,WAAW;EACX,WAAW;EACX,iBAAiB;EACjB,aAAa;GACX;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ;CACA,UAAU;EACR,UAAU,~~EACR,~~MAAM,EACJ,MAAM,~~2EACR~~,EACF;EACA,QAAQ,EACN,MAAM,~~EACJ~~,OAAO,~~mBACT~~,EACF;EACA,UAAU,EACR,MAAM,~~EACJ~~,aAAa,~~4EACf,~~EACF;CACF;AACF,CAAC"}
1	+ {"version":3,"file":"time-picker-styles.js","names":[],"sources":["../../../src/components/time-picker/time-picker-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const timePickerStyles = tv({\n slots: {\n // the calendar header's 8px top padding, so the two headers share a row in the date-time picker\n root: 'overflow-hidden text-rui-text p-3 pt-2',\n // three columns, so the time sits over the dial's center and AM/PM hangs off to its right\n digitalDisplay: 'mb-3 grid grid-cols-[1fr_auto_1fr] items-center',\n // Inter's `case` feature lifts the colon to the middle of the figures instead of the x-height\n time: `col-start-2 flex items-center gap-0.5 [font-feature-settings:'case','cv05','cv08']`,\n /\n Each part of the time is a button that picks what the face edits, tinted while it is the one.\n * Digits, colons and AM/PM sit on the calendar header's 28px line, so the two headers align.\n */\n digit: [\n 'rounded-rui-control px-1.5 text-2xl/7 font-semibold tabular-nums transition-colors',\n 'hover:bg-rui-hover outline-hidden focus-visible:focus-ring',\n ].join(' '),\n separator: 'text-2xl/7 font-semibold text-rui-text-secondary',\n period: [\n 'col-start-3 justify-self-start ml-2 inline-flex h-7 items-center rounded-rui-control border border-rui-outline px-2 text-sm font-medium transition-colors',\n 'hover:bg-rui-hover outline-hidden focus-visible:focus-ring rui-time-picker-period',\n ].join(' '),\n // a translucent well, so the face reads on a menu and on a card in both themes\n clockFace: 'relative rounded-full w-64 h-64 mx-auto bg-rui-hover',\n centerDot: 'absolute rounded-full bg-rui-primary w-2 h-2',\n clockHand: 'absolute w-[1.5px] bg-rui-primary rounded-full',\n clockHandCircle: 'absolute border-2 border-rui-primary',\n clockNumber: [\n 'absolute text-center text-sm font-medium w-8 h-8 tabular-nums',\n 'flex items-center justify-center',\n 'hover:bg-rui-hover cursor-pointer rounded-full',\n ].join(' '),\n },\n variants: {\n bordered: {\n true: {\n root: 'bg-rui-surface rounded-rui-panel border border-rui-divider',\n },\n false: {\n root: 'bg-rui-menu',\n },\n },\n active: {\n true: {\n // the 10% tint vanishes on a dark menu, so dark doubles it\n digit: 'bg-rui-primary-soft text-rui-primary hover:bg-rui-primary-soft dark:bg-rui-primary/20 dark:text-rui-primary-lighter dark:hover:bg-rui-primary/20',\n },\n },\n selected: {\n true: {\n // the primary fill and its foreground, like the selected calendar day, stacked over the hand (z 10, 11)\n clockNumber: 'bg-rui-primary-fill hover:bg-rui-primary-fill text-rui-primary-foreground z-20 font-semibold',\n },\n },\n },\n});\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG;CACjC,OAAO;EAEL,MAAM;EAEN,gBAAgB;EAEhB,MAAM;EAKN,OAAO,CACL,sFACA,4DACF,CAAC,CAAC,KAAK,GAAG;EACV,WAAW;EACX,QAAQ,CACN,6JACA,mFACF,CAAC,CAAC,KAAK,GAAG;EAEV,WAAW;EACX,WAAW;EACX,WAAW;EACX,iBAAiB;EACjB,aAAa;GACX;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ;CACA,UAAU;EACR,UAAU;GACR,MAAM,EACJ,MAAM,6DACR;GACA,OAAO,EACL,MAAM,cACR;EACF;EACA,QAAQ,EACN,MAAM,EAEJ,OAAO,mJACT,EACF;EACA,UAAU,EACR,MAAM,EAEJ,aAAa,+FACf,EACF;CACF;AACF,CAAC"}

package/dist/composables/breakpoint.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { assert } from "../utils/assert.js";
+import { get } from "../vendor/@vueuse/shared/dist/index.js";
+import { breakpointsTailwind, useBreakpoints, useWindowSize } from "../vendor/@vueuse/core/dist/index.js";
 import { computed } from "vue";
-import { breakpointsTailwind, useBreakpoints, useWindowSize } from "@vueuse/core";
-import { get as get$1 } from "@vueuse/shared";
 import { camelCase } from "scule";
 //#region src/composables/breakpoint.ts
 function useBreakpoint() {
@@ -24,7 +24,7 @@ function useBreakpoint() {
 	const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);
 	const sizesUp = list.map((breakpoint) => [camelCase(`is_${breakpoint}_and_up`), breakpoints.greaterOrEqual(breakpoint)]);
 	const sizesDown = list.map((breakpoint) => [camelCase(`is_${breakpoint}_and_down`), breakpoints.smaller(breakpoint)]);
-	const name = computed(() => rawSizes.find((item) => get$1(item[1]))?.[0] || "");
+	const name = computed(() => rawSizes.find((item) => get(item[1]))?.[0] || "");
 	return {
 		...Object.fromEntries(sizes),
 		...Object.fromEntries(sizesUp),

package/dist/composables/breakpoint.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breakpoint.js","names":[],"sources":["../../src/composables/breakpoint.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { breakpointsTailwind } from '@vueuse/core';\nimport { camelCase } from 'scule';\nimport { assert } from '@/utils/assert';\n\nexport function useBreakpoint() {\n const { width } = useWindowSize();\n\n const breakpointList = {\n xs: 0,\n ...breakpointsTailwind,\n } as const;\n\n type Breakpoint = keyof typeof breakpointList;\n\n const breakpoints = useBreakpoints(breakpointList);\n\n const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;\n\n const list = getKeys(breakpointList);\n\n const rawSizes: [Breakpoint, Ref<boolean>][] = list.map((breakpoint, index) => {\n if (index < list.length - 1) {\n const nextBreakpoint = list[index + 1];\n assert(nextBreakpoint);\n return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];\n }\n return [breakpoint, breakpoints[breakpoint]];\n });\n\n const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);\n\n const sizesUp = list.map(breakpoint => [\n camelCase(`is_${breakpoint}_and_up`),\n breakpoints.greaterOrEqual(breakpoint),\n ]);\n\n const sizesDown = list.map(breakpoint => [\n camelCase(`is_${breakpoint}_and_down`),\n breakpoints.smaller(breakpoint),\n ]);\n\n const name = computed<string>(() => rawSizes.find(item => get(item[1]))?.[0] \|\| '');\n\n return {\n ...Object.fromEntries(sizes),\n ...Object.fromEntries(sizesUp),\n ...Object.fromEntries(sizesDown),\n name,\n width,\n };\n}\n"],"mappings":";;;;;;AAKA,SAAgB,gBAAgB;CAC9B,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,iBAAiB;EACrB,IAAI;EACJ,GAAG;CACL;CAIA,MAAM,cAAc,eAAe,cAAc;CAEjD,MAAM,UAAU,OAAO;CAEvB,MAAM,OAAO,QAAQ,cAAc;CAEnC,MAAM,WAAyC,KAAK,KAAK,YAAY,UAAU;EAC7E,IAAI,QAAQ,KAAK,SAAS,GAAG;GAC3B,MAAM,iBAAiB,KAAK,QAAQ;GACpC,OAAO,cAAc;GACrB,OAAO,CAAC,YAAY,YAAY,QAAQ,YAAY,cAAc,CAAC;EACrE;EACA,OAAO,CAAC,YAAY,YAAY,WAAW;CAC7C,CAAC;CAED,MAAM,QAAQ,SAAS,KAAK,CAAC,YAAY,WAAW,CAAC,UAAU,MAAM,YAAY,GAAG,KAAK,CAAC;CAE1F,MAAM,UAAU,KAAK,KAAI,eAAc,CACrC,UAAU,MAAM,WAAW,QAAQ,GACnC,YAAY,eAAe,UAAU,CACvC,CAAC;CAED,MAAM,YAAY,KAAK,KAAI,eAAc,CACvC,UAAU,MAAM,WAAW,UAAU,GACrC,YAAY,QAAQ,UAAU,CAChC,CAAC;CAED,MAAM,OAAO,eAAuB,SAAS,MAAK,SAAQ,~~MAAI~~,KAAK,EAAE,CAAC,CAAC,GAAG,MAAM,EAAE;CAElF,OAAO;EACL,GAAG,OAAO,YAAY,KAAK;EAC3B,GAAG,OAAO,YAAY,OAAO;EAC7B,GAAG,OAAO,YAAY,SAAS;EAC/B;EACA;CACF;AACF"}
1	+ {"version":3,"file":"breakpoint.js","names":[],"sources":["../../src/composables/breakpoint.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { breakpointsTailwind } from '@vueuse/core';\nimport { camelCase } from 'scule';\nimport { assert } from '@/utils/assert';\n\nexport function useBreakpoint() {\n const { width } = useWindowSize();\n\n const breakpointList = {\n xs: 0,\n ...breakpointsTailwind,\n } as const;\n\n type Breakpoint = keyof typeof breakpointList;\n\n const breakpoints = useBreakpoints(breakpointList);\n\n const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;\n\n const list = getKeys(breakpointList);\n\n const rawSizes: [Breakpoint, Ref<boolean>][] = list.map((breakpoint, index) => {\n if (index < list.length - 1) {\n const nextBreakpoint = list[index + 1];\n assert(nextBreakpoint);\n return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];\n }\n return [breakpoint, breakpoints[breakpoint]];\n });\n\n const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);\n\n const sizesUp = list.map(breakpoint => [\n camelCase(`is_${breakpoint}_and_up`),\n breakpoints.greaterOrEqual(breakpoint),\n ]);\n\n const sizesDown = list.map(breakpoint => [\n camelCase(`is_${breakpoint}_and_down`),\n breakpoints.smaller(breakpoint),\n ]);\n\n const name = computed<string>(() => rawSizes.find(item => get(item[1]))?.[0] \|\| '');\n\n return {\n ...Object.fromEntries(sizes),\n ...Object.fromEntries(sizesUp),\n ...Object.fromEntries(sizesDown),\n name,\n width,\n };\n}\n"],"mappings":";;;;;;AAKA,SAAgB,gBAAgB;CAC9B,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,iBAAiB;EACrB,IAAI;EACJ,GAAG;CACL;CAIA,MAAM,cAAc,eAAe,cAAc;CAEjD,MAAM,UAAU,OAAO;CAEvB,MAAM,OAAO,QAAQ,cAAc;CAEnC,MAAM,WAAyC,KAAK,KAAK,YAAY,UAAU;EAC7E,IAAI,QAAQ,KAAK,SAAS,GAAG;GAC3B,MAAM,iBAAiB,KAAK,QAAQ;GACpC,OAAO,cAAc;GACrB,OAAO,CAAC,YAAY,YAAY,QAAQ,YAAY,cAAc,CAAC;EACrE;EACA,OAAO,CAAC,YAAY,YAAY,WAAW;CAC7C,CAAC;CAED,MAAM,QAAQ,SAAS,KAAK,CAAC,YAAY,WAAW,CAAC,UAAU,MAAM,YAAY,GAAG,KAAK,CAAC;CAE1F,MAAM,UAAU,KAAK,KAAI,eAAc,CACrC,UAAU,MAAM,WAAW,QAAQ,GACnC,YAAY,eAAe,UAAU,CACvC,CAAC;CAED,MAAM,YAAY,KAAK,KAAI,eAAc,CACvC,UAAU,MAAM,WAAW,UAAU,GACrC,YAAY,QAAQ,UAAU,CAChC,CAAC;CAED,MAAM,OAAO,eAAuB,SAAS,MAAK,SAAQ,IAAI,KAAK,EAAE,CAAC,CAAC,GAAG,MAAM,EAAE;CAElF,OAAO;EACL,GAAG,OAAO,YAAY,KAAK;EAC3B,GAAG,OAAO,YAAY,OAAO;EAC7B,GAAG,OAAO,YAAY,SAAS;EAC/B;EACA;CACF;AACF"}

package/dist/composables/defaults/field.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import type { ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter } from 'vue';
+/**
+ * Where a field shows its label.
+ *
+ * - `top`: a label above a bordered field (the default).
+ * - `hidden`: no visible label; the label is still announced to screen readers.
+ *   For search and filter fields whose placeholder and icon say what they are.
+ */
+export type LabelPlacement = 'top' | 'hidden';
+export interface FieldOptions {
+    labelPlacement: MaybeRef<LabelPlacement>;
+}
+/** The app-wide default, set through `createRui({ defaults: { field } })`. */
+export declare const FieldSymbol: InjectionKey<FieldOptions>;
+export declare function createFieldDefaults(options?: Partial<FieldOptions>): FieldOptions;
+/** Sets the label placement for every field rendered below the calling component. */
+export declare function provideFieldDefaults(labelPlacement: MaybeRefOrGetter<LabelPlacement | undefined>): void;
+/**
+ * The placement a field uses: its own prop, then the nearest scope, then the
+ * app default, then `top`.
+ */
+export declare function useLabelPlacement(placement: MaybeRefOrGetter<LabelPlacement | undefined>): ComputedRef<LabelPlacement>;

package/dist/composables/defaults/field.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { computed, inject, provide, toValue } from "vue";
+//#region src/composables/defaults/field.ts
+/** The app-wide default, set through `createRui({ defaults: { field } })`. */
+var FieldSymbol = Symbol.for("rui:field");
+/** A default for every field below a component, set with `provideFieldDefaults` or `RuiFieldDefaults`. */
+var FieldScopeSymbol = Symbol.for("rui:field-scope");
+function createFieldDefaults(options) {
+	return {
+		labelPlacement: "top",
+		...options
+	};
+}
+/** Sets the label placement for every field rendered below the calling component. */
+function provideFieldDefaults(labelPlacement) {
+	provide(FieldScopeSymbol, labelPlacement);
+}
+/**
+* The placement a field uses: its own prop, then the nearest scope, then the
+* app default, then `top`.
+*/
+function useLabelPlacement(placement) {
+	const scope = inject(FieldScopeSymbol, void 0);
+	const app = inject(FieldSymbol, void 0);
+	return computed(() => toValue(placement) ?? toValue(scope) ?? (app ? toValue(app.labelPlacement) : void 0) ?? "top");
+}
+//#endregion
+export { FieldSymbol, createFieldDefaults, provideFieldDefaults, useLabelPlacement };
+//# sourceMappingURL=field.js.map

package/dist/composables/defaults/field.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"field.js","names":[],"sources":["../../../src/composables/defaults/field.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter } from 'vue';\n\n/**\n * Where a field shows its label.\n *\n * - `top`: a label above a bordered field (the default).\n * - `hidden`: no visible label; the label is still announced to screen readers.\n * For search and filter fields whose placeholder and icon say what they are.\n */\nexport type LabelPlacement = 'top' | 'hidden';\n\nexport interface FieldOptions {\n labelPlacement: MaybeRef<LabelPlacement>;\n}\n\n/** The app-wide default, set through `createRui({ defaults: { field } })`. */\nexport const FieldSymbol: InjectionKey<FieldOptions> = Symbol.for('rui:field');\n\n/** A default for every field below a component, set with `provideFieldDefaults` or `RuiFieldDefaults`. */\nconst FieldScopeSymbol: InjectionKey<MaybeRefOrGetter<LabelPlacement | undefined>> = Symbol.for('rui:field-scope');\n\nexport function createFieldDefaults(options?: Partial<FieldOptions>): FieldOptions {\n return {\n labelPlacement: 'top',\n ...options,\n };\n}\n\n/** Sets the label placement for every field rendered below the calling component. */\nexport function provideFieldDefaults(labelPlacement: MaybeRefOrGetter<LabelPlacement | undefined>): void {\n provide(FieldScopeSymbol, labelPlacement);\n}\n\n/**\n * The placement a field uses: its own prop, then the nearest scope, then the\n * app default, then `top`.\n */\nexport function useLabelPlacement(placement: MaybeRefOrGetter<LabelPlacement | undefined>): ComputedRef<LabelPlacement> {\n const scope = inject(FieldScopeSymbol, undefined);\n const app = inject(FieldSymbol, undefined);\n\n return computed<LabelPlacement>(() =>\n toValue(placement)\n ?? toValue(scope)\n ?? (app ? toValue(app.labelPlacement) : undefined)\n ?? 'top',\n );\n}\n"],"mappings":";;;AAgBA,IAAa,cAA0C,OAAO,IAAI,WAAW;;AAG7E,IAAM,mBAA+E,OAAO,IAAI,iBAAiB;AAEjH,SAAgB,oBAAoB,SAA+C;CACjF,OAAO;EACL,gBAAgB;EAChB,GAAG;CACL;AACF;;AAGA,SAAgB,qBAAqB,gBAAoE;CACvG,QAAQ,kBAAkB,cAAc;AAC1C;;;;;AAMA,SAAgB,kBAAkB,WAAsF;CACtH,MAAM,QAAQ,OAAO,kBAAkB,KAAA,CAAS;CAChD,MAAM,MAAM,OAAO,aAAa,KAAA,CAAS;CAEzC,OAAO,eACL,QAAQ,SAAS,KACd,QAAQ,KAAK,MACZ,MAAM,QAAQ,IAAI,cAAc,IAAI,KAAA,MACrC,KACL;AACF"}

package/dist/composables/dropdown-menu.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, Ref, TemplateRef } from 'vue';
 export type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined ? never : V extends object ? keyof T : keyof {
     [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;
 };
@@ -6,8 +6,20 @@ export interface DropdownItemAttr<TValue, TItem> {
     keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;
     textAttr?: keyof TItem | ((item: TItem) => string);
 }
-export type GroupBy<TItem> = keyof TItem | ((item: TItem) => string);
-export type ItemDisabled<TItem> = keyof TItem | ((item: TItem) => boolean);
+/**
+ * An item key or a resolver. `& string` lets Vue's compiler infer a String runtime type for the key
+ * form; a bare generic `keyof` compiles to Function only, and a consumer's runtime warns.
+ */
+export type GroupBy<TItem> = (keyof TItem & string) | ((item: TItem) => string);
+export type ItemDisabled<TItem> = (keyof TItem & string) | ((item: TItem) => boolean);
+/**
+ * The rendered height of a default option row, a `list` button at its default or `sm` size.
+ * The virtual list reserves this much per row, so a mismatch leaves a gap under the last option.
+ *
+ * @param dense - whether the options render at the dense size
+ * @returns the row height in pixels
+ */
+export declare function getOptionHeight(dense: boolean | undefined): number;
 export interface DropdownOptionGroup<TItem> {
     group: string;
     items: TItem[];
@@ -46,24 +58,24 @@ export declare function useDropdownMenu<TValue, TItem>({ appendWidth, autoSelect
     };
     getIdentifier: (item: TItem) => any;
     getText: (item: TItem) => string | undefined;
-    groupedOptions: globalThis.ComputedRef<DropdownOptionGroup<TItem>[]>;
+    groupedOptions: ComputedRef<DropdownOptionGroup<TItem>[]>;
     modelHighlightedIndex: Ref<number, number>;
     isActiveItem: (item: TItem) => boolean;
-    isGrouped: globalThis.ComputedRef<boolean>;
+    isGrouped: ComputedRef<boolean>;
     isItemDisabled: (item: TItem) => boolean;
     isOpen: Ref<boolean, boolean>;
     itemIndexInValue: (item: TItem) => number;
-    menuWidth: globalThis.ComputedRef<string>;
+    menuWidth: ComputedRef<string>;
     moveHighlight: (up: boolean) => void;
-    optionsWithSelectedHidden: globalThis.ComputedRef<TItem[]>;
-    renderedData: import("@vueuse/shared").UseArrayMapReturn<{
+    optionsWithSelectedHidden: ComputedRef<TItem[]>;
+    renderedData: ComputedRef<{
         _index: number;
         item: TItem;
-    }>;
+    }[]>;
     toggle: (state?: boolean) => void;
     modelUserNavigated: globalThis.ShallowRef<boolean>;
-    valueKey: globalThis.ComputedRef<TItem | TItem[] | TItem[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>][] | NonNullable<TItem>[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>] | undefined>;
-    wrapperProps: globalThis.ComputedRef<{
+    valueKey: ComputedRef<TItem | TItem[] | TItem[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>][] | NonNullable<TItem>[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>] | undefined>;
+    wrapperProps: ComputedRef<{
         style: {
             width: string;
             height: string;

package/dist/composables/dropdown-menu.js CHANGED Viewed

@@ -1,7 +1,17 @@
+import { get, set, useArrayMap } from "../vendor/@vueuse/shared/dist/index.js";
+import { useVirtualList } from "../vendor/@vueuse/core/dist/index.js";
 import { computed, nextTick, ref, shallowRef, toValue, watch } from "vue";
-import { useArrayMap, useVirtualList } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/composables/dropdown-menu.ts
+/**
+* The rendered height of a default option row, a `list` button at its default or `sm` size.
+* The virtual list reserves this much per row, so a mismatch leaves a gap under the last option.
+*
+* @param dense - whether the options render at the dense size
+* @returns the row height in pixels
+*/
+function getOptionHeight(dense) {
+	return dense ? 32 : 40;
+}
 function useDropdownOptionProperty({ keyAttr, textAttr }) {
 	function getText(item) {
 		if (textAttr) {
@@ -24,7 +34,7 @@ function toSelectedArray(val) {
 	if (val !== null && val !== void 0) return [val];
 	return [];
 }
-function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false, getIdentifier: externalGetIdentifier, getText: externalGetText, hideSelected, isOpen: externalIsOpen, itemHeight = 48, keyAttr, menuRef: _menuRef, options: allOptions, overscan = 5, prependWidth, setValue, textAttr, value, groupBy, itemDisabled }) {
+function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false, getIdentifier: externalGetIdentifier, getText: externalGetText, hideSelected, isOpen: externalIsOpen, itemHeight = getOptionHeight(false), keyAttr, menuRef: _menuRef, options: allOptions, overscan = 5, prependWidth, setValue, textAttr, value, groupBy, itemDisabled }) {
 	const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({
 		keyAttr,
 		textAttr
@@ -32,13 +42,13 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 	const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;
 	const getText = externalGetText ?? defaultGetText;
 	const activeIdentifiers = computed(() => {
-		const selected = toSelectedArray(get$1(value));
+		const selected = toSelectedArray(get(value));
 		const identifiers = /* @__PURE__ */ new Set();
 		for (const item of selected) identifiers.add(getIdentifier(item));
 		return identifiers;
 	});
 	function isActiveItem(item) {
-		return get$1(activeIdentifiers).has(getIdentifier(item));
+		return get(activeIdentifiers).has(getIdentifier(item));
 	}
 	const options = computed(() => {
 		const options = toValue(allOptions);
@@ -59,9 +69,9 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 	}
 	const isGrouped = computed(() => toValue(groupBy) !== void 0);
 	const groupedOptions = computed(() => {
-		if (!get$1(isGrouped)) return [];
+		if (!get(isGrouped)) return [];
 		const buckets = /* @__PURE__ */ new Map();
-		for (const item of get$1(options)) {
+		for (const item of get(options)) {
 			const key = getGroupKey(item);
 			const list = buckets.get(key);
 			if (list) list.push(item);
@@ -82,16 +92,16 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 	}));
 	const isOpen = externalIsOpen ?? shallowRef(false);
 	const valueKey = computed(() => {
-		const selected = get$1(value);
+		const selected = get(value);
 		if (!keyAttr || !selected) return selected;
 		return Array.isArray(selected) ? selected.map((item) => item[keyAttr]) : selected[keyAttr];
 	});
-	const modelHighlightedIndex = ref(get$1(autoSelectFirst) ? 0 : -1);
+	const modelHighlightedIndex = ref(get(autoSelectFirst) ? 0 : -1);
 	const modelUserNavigated = shallowRef(false);
 	const optionWidthBounds = computed(() => {
 		let min = 0;
 		let max = 0;
-		for (const option of get$1(options)) {
+		for (const option of get(options)) {
 			const length = getText(option)?.toString()?.length ?? 0;
 			if (min === 0 && max === 0) {
 				min = length;
@@ -105,7 +115,7 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 		};
 	});
 	const menuWidth = computed(() => {
-		const { min, max } = get$1(optionWidthBounds);
+		const { min, max } = get(optionWidthBounds);
 		const maxWidth = 30;
 		const paddingX = 1.5;
 		const fontMultiplier = toValue(dense) ? 12 : 13;
@@ -118,22 +128,22 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 		return computeValue(min + difference / 2);
 	});
 	function toggle(state = false) {
-		set$1(isOpen, state);
+		set(isOpen, state);
 	}
 	function itemIndexInValue(item) {
-		const selected = toSelectedArray(get$1(value));
+		const selected = toSelectedArray(get(value));
 		if (selected.length === 0) return -1;
 		const itemId = getIdentifier(item);
 		return selected.findIndex((selectedItem) => getIdentifier(selectedItem) === itemId);
 	}
 	function scrollHighlightedIntoView() {
-		get$1(_menuRef)?.querySelector("[data-highlighted=\"true\"]")?.scrollIntoView({ block: "nearest" });
+		get(_menuRef)?.querySelector("[data-highlighted=\"true\"]")?.scrollIntoView({ block: "nearest" });
 	}
 	async function adjustScrollByHighlightedIndex() {
-		const index = get$1(modelHighlightedIndex);
+		const index = get(modelHighlightedIndex);
 		if (index === -1) return;
 		await nextTick();
-		if (get$1(_menuRef)?.querySelector("[data-highlighted=\"true\"]")) {
+		if (get(_menuRef)?.querySelector("[data-highlighted=\"true\"]")) {
 			scrollHighlightedIntoView();
 			return;
 		}
@@ -143,10 +153,10 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 	}
 	async function updateOpen(open) {
 		if (!open) return;
-		const val = get$1(value);
+		const val = get(value);
 		if (Array.isArray(val) && val.length > 0 || val !== null && val !== void 0) {
-			const index = get$1(options).findIndex(isActiveItem);
-			if (index > -1) set$1(modelHighlightedIndex, index);
+			const index = get(options).findIndex(isActiveItem);
+			if (index > -1) set(modelHighlightedIndex, index);
 		}
 		await adjustScrollByHighlightedIndex();
 	}
@@ -157,47 +167,47 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 		await adjustScrollByHighlightedIndex();
 	});
 	watch(options, async () => {
-		set$1(modelUserNavigated, false);
-		if (get$1(modelHighlightedIndex) !== -1) {
-			if (get$1(autoSelectFirst)) {
-				set$1(modelHighlightedIndex, 0);
+		set(modelUserNavigated, false);
+		if (get(modelHighlightedIndex) !== -1) {
+			if (get(autoSelectFirst)) {
+				set(modelHighlightedIndex, 0);
 				await adjustScrollByHighlightedIndex();
 			} else {
-				set$1(modelHighlightedIndex, -1);
+				set(modelHighlightedIndex, -1);
 				scrollTo(0);
 			}
 		} else scrollTo(0);
 	});
 	watch(isOpen, (open) => {
-		if (!open) set$1(modelUserNavigated, false);
+		if (!open) set(modelUserNavigated, false);
 	});
 	const moveHighlight = (up) => {
-		if (!get$1(isOpen)) {
+		if (!get(isOpen)) {
 			toggle(true);
 			return;
 		}
-		set$1(modelUserNavigated, true);
-		const items = get$1(options);
+		set(modelUserNavigated, true);
+		const items = get(options);
 		const total = items.length;
 		if (total === 0) return;
 		const move = up ? -1 : 1;
-		let position = get$1(modelHighlightedIndex);
+		let position = get(modelHighlightedIndex);
 		for (let step = 0; step < total; step++) {
 			position += move;
 			if (position >= total) position = 0;
 			else if (position < 0) position = total - 1;
 			const candidate = items[position];
 			if (candidate !== void 0 && !isItemDisabled(candidate)) {
-				set$1(modelHighlightedIndex, position);
+				set(modelHighlightedIndex, position);
 				return;
 			}
 		}
 	};
 	const applyHighlighted = () => {
-		if (!setValue || !get$1(isOpen)) return;
-		const highlightedIndexVal = get$1(modelHighlightedIndex);
+		if (!setValue || !get(isOpen)) return;
+		const highlightedIndexVal = get(modelHighlightedIndex);
 		if (highlightedIndexVal === -1) return;
-		const entry = get$1(options)[highlightedIndexVal];
+		const entry = get(options)[highlightedIndexVal];
 		if (entry !== void 0 && !isItemDisabled(entry)) setValue(entry);
 	};
 	return {
@@ -223,6 +233,6 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 	};
 }
 //#endregion
-export { useDropdownMenu, useDropdownOptionProperty };
+export { getOptionHeight, useDropdownMenu, useDropdownOptionProperty };
 //# sourceMappingURL=dropdown-menu.js.map