npm - @rotki/ui-library - Versions diffs - 3.2.0 → 3.3.0 - Mend

@rotki/ui-library 3.2.0 → 3.3.0

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 (235) 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":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_toDisplayString","_createCommentVNode","_normalizeStyle","_Fragment","_renderList"],"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 data-id=\"hour\"\n :aria-label=\"`${formatValue(displayHour)} 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 data-id=\"minute\"\n :aria-label=\"`${formatValue(selectedMinute)} 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 data-id=\"second\"\n :aria-label=\"`${formatValue(selectedSecond)} 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 data-id=\"millisecond\"\n :aria-label=\"`${formatValue(selectedMillisecond, 3)} 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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"}
1	+ {"version":3,"file":"RuiTimePicker.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_toDisplayString","_createCommentVNode","_normalizeStyle","_Fragment","_renderList"],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type HTMLAttributes, 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 & /* @vue-ignore / Omit<HTMLAttributes, keyof 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 data-id=\"hour\"\n :aria-label=\"`${formatValue(displayHour)} 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 data-id=\"minute\"\n :aria-label=\"`${formatValue(selectedMinute)} 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 data-id=\"second\"\n :aria-label=\"`${formatValue(selectedSecond)} 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 data-id=\"millisecond\"\n :aria-label=\"`${formatValue(selectedMillisecond, 3)} 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/composables/dropdown-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\n\nexport type KeyOfType<T, V> = T extends string \| number \| boolean \| symbol \| null \| undefined\n ? never\n : V extends object\n ? keyof T\n : keyof {\n [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;\n };\n\nexport interface DropdownItemAttr<TValue, TItem> {\n keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n textAttr?: keyof TItem \| ((item: TItem) => string);\n}\n\n/*\n An item key or a resolver. `& string` lets Vue's compiler infer a String runtime type for the key\n * form; a bare generic `keyof` compiles to Function only, and a consumer's runtime warns.\n /\nexport type GroupBy<TItem> = (keyof TItem & string) \| ((item: TItem) => string);\n\nexport type ItemDisabled<TItem> = (keyof TItem & string) \| ((item: TItem) => boolean);\n\n/\n The rendered height of a default option row, a `list` button at its default or `sm` size.\n * The virtual list reserves this much per row, so a mismatch leaves a gap under the last option.\n \n @param dense - whether the options render at the dense size\n * @returns the row height in pixels\n /\nexport function getOptionHeight(dense: boolean \| undefined): number {\n return dense ? 32 : 40;\n}\n\nexport interface DropdownOptionGroup<TItem> {\n group: string;\n items: TItem[];\n}\n\nexport interface DropdownOptions<TValue, TItem> {\n options: MaybeRefOrGetter<TItem[]>;\n dense?: MaybeRefOrGetter<boolean>;\n disabled?: MaybeRefOrGetter<boolean>;\n value: Ref<TItem \| TItem[] \| undefined>;\n menuRef: Ref<HTMLElement> \| TemplateRef<HTMLElement>;\n keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n textAttr?: keyof TItem \| ((item: TItem) => string);\n appendWidth?: number;\n prependWidth?: number;\n itemHeight?: number;\n overscan?: number;\n autoSelectFirst?: boolean;\n setValue?: (val: TItem) => void;\n hideSelected?: boolean;\n isOpen?: Ref<boolean>;\n getText?: (item: TItem) => string \| undefined;\n getIdentifier?: (item: TItem) => any;\n groupBy?: MaybeRefOrGetter<GroupBy<TItem> \| undefined>;\n itemDisabled?: MaybeRefOrGetter<ItemDisabled<TItem> \| undefined>;\n}\n\nexport function useDropdownOptionProperty<TValue, TItem>({\n keyAttr,\n textAttr,\n}: DropdownItemAttr<TValue, TItem>) {\n function getText(item: TItem): string \| undefined {\n if (textAttr) {\n if (typeof textAttr === 'function')\n return textAttr(item);\n else return item[textAttr]?.toString();\n }\n\n return item?.toString();\n }\n\n function getIdentifier(\n item: TItem,\n ): TItem \| TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>] {\n if (keyAttr)\n return item[keyAttr];\n\n return item;\n }\n\n return {\n getIdentifier,\n getText,\n };\n}\n\nfunction toSelectedArray<TItem>(val: TItem \| TItem[] \| undefined): TItem[] {\n if (Array.isArray(val))\n return val;\n if (val !== null && val !== undefined)\n return [val];\n return [];\n}\n\nexport function useDropdownMenu<TValue, TItem>({\n appendWidth,\n autoSelectFirst,\n dense,\n disabled = false,\n getIdentifier: externalGetIdentifier,\n getText: externalGetText,\n hideSelected,\n isOpen: externalIsOpen,\n itemHeight = getOptionHeight(false),\n keyAttr,\n menuRef: _menuRef,\n options: allOptions,\n overscan = 5,\n prependWidth,\n setValue,\n textAttr,\n value,\n groupBy,\n itemDisabled,\n}: DropdownOptions<TValue, TItem>) {\n const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({\n keyAttr,\n textAttr,\n });\n\n const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;\n const getText = externalGetText ?? defaultGetText;\n\n const activeIdentifiers = computed<Set<any>>(() => {\n const val = get(value);\n const selected: TItem[] = toSelectedArray(val);\n const identifiers = new Set<any>();\n for (const item of selected) {\n identifiers.add(getIdentifier(item));\n }\n return identifiers;\n });\n\n function isActiveItem(item: TItem): boolean {\n return get(activeIdentifiers).has(getIdentifier(item));\n }\n\n const options = computed<TItem[]>(() => {\n const options = toValue(allOptions);\n if (!hideSelected)\n return options;\n\n return options.filter(item => !isActiveItem(item));\n });\n\n function getGroupKey(item: TItem): string {\n const group = toValue(groupBy);\n if (!group)\n return '';\n\n if (typeof group === 'function')\n return group(item);\n\n return String(item[group] ?? '');\n }\n\n function isItemDisabled(item: TItem): boolean {\n const itemDisabledValue = toValue(itemDisabled);\n if (!itemDisabledValue)\n return false;\n\n if (typeof itemDisabledValue === 'function')\n return itemDisabledValue(item);\n\n return Boolean(item[itemDisabledValue]);\n }\n\n const isGrouped = computed<boolean>(() => toValue(groupBy) !== undefined);\n\n const groupedOptions = computed<DropdownOptionGroup<TItem>[]>(() => {\n if (!get(isGrouped))\n return [];\n\n const buckets = new Map<string, TItem[]>();\n for (const item of get(options)) {\n const key = getGroupKey(item);\n const list = buckets.get(key);\n if (list)\n list.push(item);\n else\n buckets.set(key, [item]);\n }\n\n return Array.from(buckets.entries()).map(([group, items]) => ({ group, items }));\n });\n\n const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<TItem>(options, {\n itemHeight,\n overscan,\n });\n\n // typed as a plain ComputedRef so the published return type names nothing from VueUse\n const renderedData: ComputedRef<{ _index: number; item: TItem }[]> = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));\n\n const isOpen = externalIsOpen ?? shallowRef<boolean>(false);\n\n const valueKey = computed(() => {\n const selected = get(value);\n if (!keyAttr \|\| !selected)\n return selected;\n return Array.isArray(selected) ? selected.map(item => item[keyAttr]) : selected[keyAttr];\n });\n\n const modelHighlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n const modelUserNavigated = shallowRef<boolean>(false);\n\n const optionWidthBounds = computed<{ min: number; max: number }>(() => {\n let min = 0;\n let max = 0;\n for (const option of get(options)) {\n const length = getText(option)?.toString()?.length ?? 0;\n if (min === 0 && max === 0) {\n min = length;\n max = length;\n }\n else if (length < min) {\n min = length;\n }\n else if (length > max) {\n max = length;\n }\n }\n return { min, max };\n });\n\n const menuWidth = computed<string>(() => {\n const { min, max } = get(optionWidthBounds);\n const maxWidth = 30;\n const paddingX = 1.5;\n const fontMultiplier = toValue(dense) ? 12 : 13;\n const difference = max - min;\n\n function computeValue(width: number): string {\n const additionalWidths =\n (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);\n return `${Math.min((width fontMultiplier) / 16 + paddingX + additionalWidths, maxWidth)}rem`;\n }\n\n if (difference <= 5)\n return computeValue(max);\n\n return computeValue(min + difference / 2);\n });\n\n function toggle(state: boolean = false): void {\n set(isOpen, state);\n }\n\n function itemIndexInValue(item: TItem): number {\n const val = get(value);\n const selected: TItem[] = toSelectedArray(val);\n\n if (selected.length === 0)\n return -1;\n\n const itemId = getIdentifier(item);\n return selected.findIndex(selectedItem => getIdentifier(selectedItem) === itemId);\n }\n\n function scrollHighlightedIntoView(): void {\n get(_menuRef)\n ?.querySelector<HTMLElement>('[data-highlighted=\"true\"]')\n ?.scrollIntoView({ block: 'nearest' });\n }\n\n async function adjustScrollByHighlightedIndex(): Promise<void> {\n const index = get(modelHighlightedIndex);\n if (index === -1)\n return;\n\n await nextTick();\n if (get(_menuRef)?.querySelector('[data-highlighted=\"true\"]')) {\n scrollHighlightedIntoView();\n return;\n }\n\n // Outside the virtual list's rendered window, so render it first, then nudge it fully into view\n scrollTo(index);\n await nextTick();\n scrollHighlightedIntoView();\n }\n\n async function updateOpen(open: boolean): Promise<void> {\n if (!open)\n return;\n\n const val = get(value);\n\n // Set highlighted index to active item\n if ((Array.isArray(val) && val.length > 0) \|\| (val !== null && val !== undefined)) {\n const index = get(options).findIndex(isActiveItem);\n if (index > -1)\n set(modelHighlightedIndex, index);\n }\n\n await adjustScrollByHighlightedIndex();\n }\n\n watch([isOpen, () => toValue(disabled)], async ([open, _]) => {\n await updateOpen(open);\n });\n\n watch(modelHighlightedIndex, async () => {\n await adjustScrollByHighlightedIndex();\n });\n\n watch(options, async () => {\n set(modelUserNavigated, false);\n if (get(modelHighlightedIndex) !== -1) {\n if (get(autoSelectFirst)) {\n set(modelHighlightedIndex, 0);\n await adjustScrollByHighlightedIndex();\n }\n else {\n set(modelHighlightedIndex, -1);\n scrollTo(0);\n }\n }\n else {\n scrollTo(0);\n }\n });\n\n watch(isOpen, (open) => {\n if (!open)\n set(modelUserNavigated, false);\n });\n\n const moveHighlight = (up: boolean): void => {\n if (!get(isOpen)) {\n toggle(true);\n return;\n }\n\n set(modelUserNavigated, true);\n\n const items = get(options);\n const total = items.length;\n if (total === 0)\n return;\n\n const move = up ? -1 : 1;\n let position = get(modelHighlightedIndex);\n\n for (let step = 0; step < total; step++) {\n position += move;\n if (position >= total)\n position = 0;\n else if (position < 0)\n position = total - 1;\n\n const candidate = items[position];\n if (candidate !== undefined && !isItemDisabled(candidate)) {\n set(modelHighlightedIndex, position);\n return;\n }\n }\n };\n\n const applyHighlighted = (): void => {\n if (!setValue \|\| !get(isOpen))\n return;\n\n const highlightedIndexVal = get(modelHighlightedIndex);\n if (highlightedIndexVal === -1)\n return;\n\n const entry = get(options)[highlightedIndexVal];\n if (entry !== undefined && !isItemDisabled(entry))\n setValue(entry);\n };\n\n return {\n applyHighlighted,\n containerProps,\n getIdentifier,\n getText,\n groupedOptions,\n modelHighlightedIndex,\n isActiveItem,\n isGrouped,\n isItemDisabled,\n isOpen,\n itemIndexInValue,\n menuWidth,\n moveHighlight,\n optionsWithSelectedHidden: options,\n renderedData,\n toggle,\n modelUserNavigated,\n valueKey,\n wrapperProps,\n };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\n\nexport type KeyOfType<T, V> = T extends string \| number \| boolean \| symbol \| null \| undefined\n ? never\n : V extends object\n ? keyof T\n : keyof {\n [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;\n };\n\nexport interface DropdownItemAttr<TValue, TItem> {\n keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n textAttr?: keyof TItem \| ((item: TItem) => string);\n}\n\n/*\n An item key or a resolver. `& string` lets Vue's compiler infer a String runtime type for the key\n * form; a bare generic `keyof` compiles to Function only, and a consumer's runtime warns.\n /\nexport type GroupBy<TItem> = (keyof TItem & string) \| ((item: TItem) => string);\n\nexport type ItemDisabled<TItem> = (keyof TItem & string) \| ((item: TItem) => boolean);\n\n/\n The rendered height of a default option row, a `list` button at its default or `sm` size.\n * The virtual list reserves this much per row, so a mismatch leaves a gap under the last option.\n \n @param dense - whether the options render at the dense size\n * @returns the row height in pixels\n /\nexport function getOptionHeight(dense: boolean \| undefined): number {\n return dense ? 32 : 40;\n}\n\nexport interface DropdownOptionGroup<TItem> {\n group: string;\n items: TItem[];\n}\n\nexport interface DropdownOptions<TValue, TItem> {\n options: MaybeRefOrGetter<TItem[]>;\n dense?: MaybeRefOrGetter<boolean>;\n disabled?: MaybeRefOrGetter<boolean>;\n value: Ref<TItem \| TItem[] \| undefined>;\n menuRef: Ref<HTMLElement> \| TemplateRef<HTMLElement>;\n keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n textAttr?: keyof TItem \| ((item: TItem) => string);\n appendWidth?: number;\n prependWidth?: number;\n itemHeight?: number;\n overscan?: number;\n autoSelectFirst?: boolean;\n setValue?: (val: TItem) => void;\n hideSelected?: boolean;\n isOpen?: Ref<boolean>;\n getText?: (item: TItem) => string \| undefined;\n getIdentifier?: (item: TItem) => any;\n groupBy?: MaybeRefOrGetter<GroupBy<TItem> \| undefined>;\n itemDisabled?: MaybeRefOrGetter<ItemDisabled<TItem> \| undefined>;\n}\n\nexport function useDropdownOptionProperty<TValue, TItem>({\n keyAttr,\n textAttr,\n}: DropdownItemAttr<TValue, TItem>) {\n function getText(item: TItem): string \| undefined {\n if (textAttr) {\n if (typeof textAttr === 'function')\n return textAttr(item);\n else return item[textAttr]?.toString();\n }\n\n return item?.toString();\n }\n\n function getIdentifier(\n item: TItem,\n ): TItem \| TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>] {\n if (keyAttr)\n return item[keyAttr];\n\n return item;\n }\n\n return {\n getIdentifier,\n getText,\n };\n}\n\nfunction toSelectedArray<TItem>(val: TItem \| TItem[] \| undefined): TItem[] {\n if (Array.isArray(val))\n return val;\n if (val !== null && val !== undefined)\n return [val];\n return [];\n}\n\nexport function useDropdownMenu<TValue, TItem>({\n appendWidth,\n autoSelectFirst,\n dense,\n disabled = false,\n getIdentifier: externalGetIdentifier,\n getText: externalGetText,\n hideSelected,\n isOpen: externalIsOpen,\n itemHeight = getOptionHeight(false),\n keyAttr,\n menuRef: _menuRef,\n options: allOptions,\n overscan = 5,\n prependWidth,\n setValue,\n textAttr,\n value,\n groupBy,\n itemDisabled,\n}: DropdownOptions<TValue, TItem>) {\n const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({\n keyAttr,\n textAttr,\n });\n\n const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;\n const getText = externalGetText ?? defaultGetText;\n\n const activeIdentifiers = computed<Set<unknown>>(() => {\n const val = get(value);\n const selected: TItem[] = toSelectedArray(val);\n const identifiers = new Set<unknown>();\n for (const item of selected) {\n identifiers.add(getIdentifier(item));\n }\n return identifiers;\n });\n\n function isActiveItem(item: TItem): boolean {\n return get(activeIdentifiers).has(getIdentifier(item));\n }\n\n const options = computed<TItem[]>(() => {\n const options = toValue(allOptions);\n if (!hideSelected)\n return options;\n\n return options.filter(item => !isActiveItem(item));\n });\n\n function getGroupKey(item: TItem): string {\n const group = toValue(groupBy);\n if (!group)\n return '';\n\n if (typeof group === 'function')\n return group(item);\n\n return String(item[group] ?? '');\n }\n\n function isItemDisabled(item: TItem): boolean {\n const itemDisabledValue = toValue(itemDisabled);\n if (!itemDisabledValue)\n return false;\n\n if (typeof itemDisabledValue === 'function')\n return itemDisabledValue(item);\n\n return Boolean(item[itemDisabledValue]);\n }\n\n const isGrouped = computed<boolean>(() => toValue(groupBy) !== undefined);\n\n const groupedOptions = computed<DropdownOptionGroup<TItem>[]>(() => {\n if (!get(isGrouped))\n return [];\n\n const buckets = new Map<string, TItem[]>();\n for (const item of get(options)) {\n const key = getGroupKey(item);\n const list = buckets.get(key);\n if (list)\n list.push(item);\n else\n buckets.set(key, [item]);\n }\n\n return Array.from(buckets.entries()).map(([group, items]) => ({ group, items }));\n });\n\n const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<TItem>(options, {\n itemHeight,\n overscan,\n });\n\n // typed as a plain ComputedRef so the published return type names nothing from VueUse\n const renderedData: ComputedRef<{ _index: number; item: TItem }[]> = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));\n\n const isOpen = externalIsOpen ?? shallowRef<boolean>(false);\n\n const valueKey = computed(() => {\n const selected = get(value);\n if (!keyAttr \|\| !selected)\n return selected;\n return Array.isArray(selected) ? selected.map(item => item[keyAttr]) : selected[keyAttr];\n });\n\n const modelHighlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n const modelUserNavigated = shallowRef<boolean>(false);\n\n const optionWidthBounds = computed<{ min: number; max: number }>(() => {\n let min = 0;\n let max = 0;\n for (const option of get(options)) {\n const length = getText(option)?.toString()?.length ?? 0;\n if (min === 0 && max === 0) {\n min = length;\n max = length;\n }\n else if (length < min) {\n min = length;\n }\n else if (length > max) {\n max = length;\n }\n }\n return { min, max };\n });\n\n const menuWidth = computed<string>(() => {\n const { min, max } = get(optionWidthBounds);\n const maxWidth = 30;\n const paddingX = 1.5;\n const fontMultiplier = toValue(dense) ? 12 : 13;\n const difference = max - min;\n\n function computeValue(width: number): string {\n const additionalWidths =\n (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);\n return `${Math.min((width fontMultiplier) / 16 + paddingX + additionalWidths, maxWidth)}rem`;\n }\n\n if (difference <= 5)\n return computeValue(max);\n\n return computeValue(min + difference / 2);\n });\n\n function toggle(state: boolean = false): void {\n set(isOpen, state);\n }\n\n function itemIndexInValue(item: TItem): number {\n const val = get(value);\n const selected: TItem[] = toSelectedArray(val);\n\n if (selected.length === 0)\n return -1;\n\n const itemId = getIdentifier(item);\n return selected.findIndex(selectedItem => getIdentifier(selectedItem) === itemId);\n }\n\n function scrollHighlightedIntoView(): void {\n get(_menuRef)\n ?.querySelector<HTMLElement>('[data-highlighted=\"true\"]')\n ?.scrollIntoView({ block: 'nearest' });\n }\n\n async function adjustScrollByHighlightedIndex(): Promise<void> {\n const index = get(modelHighlightedIndex);\n if (index === -1)\n return;\n\n await nextTick();\n if (get(_menuRef)?.querySelector('[data-highlighted=\"true\"]')) {\n scrollHighlightedIntoView();\n return;\n }\n\n // Outside the virtual list's rendered window, so render it first, then nudge it fully into view\n scrollTo(index);\n await nextTick();\n scrollHighlightedIntoView();\n }\n\n async function updateOpen(open: boolean): Promise<void> {\n if (!open)\n return;\n\n const val = get(value);\n\n // Set highlighted index to active item\n if ((Array.isArray(val) && val.length > 0) \|\| (val !== null && val !== undefined)) {\n const index = get(options).findIndex(isActiveItem);\n if (index > -1)\n set(modelHighlightedIndex, index);\n }\n\n await adjustScrollByHighlightedIndex();\n }\n\n watch([isOpen, () => toValue(disabled)], async ([open, _]) => {\n await updateOpen(open);\n });\n\n watch(modelHighlightedIndex, async () => {\n await adjustScrollByHighlightedIndex();\n });\n\n watch(options, async () => {\n set(modelUserNavigated, false);\n if (get(modelHighlightedIndex) !== -1) {\n if (get(autoSelectFirst)) {\n set(modelHighlightedIndex, 0);\n await adjustScrollByHighlightedIndex();\n }\n else {\n set(modelHighlightedIndex, -1);\n scrollTo(0);\n }\n }\n else {\n scrollTo(0);\n }\n });\n\n watch(isOpen, (open) => {\n if (!open)\n set(modelUserNavigated, false);\n });\n\n const moveHighlight = (up: boolean): void => {\n if (!get(isOpen)) {\n toggle(true);\n return;\n }\n\n set(modelUserNavigated, true);\n\n const items = get(options);\n const total = items.length;\n if (total === 0)\n return;\n\n const move = up ? -1 : 1;\n let position = get(modelHighlightedIndex);\n\n for (let step = 0; step < total; step++) {\n position += move;\n if (position >= total)\n position = 0;\n else if (position < 0)\n position = total - 1;\n\n const candidate = items[position];\n if (candidate !== undefined && !isItemDisabled(candidate)) {\n set(modelHighlightedIndex, position);\n return;\n }\n }\n };\n\n const applyHighlighted = (): void => {\n if (!setValue \|\| !get(isOpen))\n return;\n\n const highlightedIndexVal = get(modelHighlightedIndex);\n if (highlightedIndexVal === -1)\n return;\n\n const entry = get(options)[highlightedIndexVal];\n if (entry !== undefined && !isItemDisabled(entry))\n setValue(entry);\n };\n\n return {\n applyHighlighted,\n containerProps,\n getIdentifier,\n getText,\n groupedOptions,\n modelHighlightedIndex,\n isActiveItem,\n isGrouped,\n isItemDisabled,\n isOpen,\n itemIndexInValue,\n menuWidth,\n moveHighlight,\n optionsWithSelectedHidden: options,\n renderedData,\n toggle,\n modelUserNavigated,\n valueKey,\n wrapperProps,\n };\n}\n"],"mappings":"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"}

package/dist/composables/forms/auto-complete/search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/search.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue';\nimport type { GroupBy } from '@/composables/dropdown-menu';\nimport { get, set } from '@vueuse/shared';\nimport { getTextToken } from '@/utils/helpers';\n\nexport interface UseAutoCompleteSearchOptions<TItem> {\n /** The property used as the unique identifier for each item. /\n keyAttr?: MaybeRefOrGetter<keyof TItem \| undefined>;\n /* The property used to display text for each item. /\n textAttr?: MaybeRefOrGetter<keyof TItem \| undefined>;\n /* Whether to disable client-side filtering of options. /\n noFilter?: MaybeRefOrGetter<boolean>;\n /* Custom filter function to match items against the search query. /\n filter?: MaybeRefOrGetter<((item: TItem, queryText: string, group?: string) => boolean) \| undefined>;\n /* Whether custom (free-text) values are allowed. /\n customValue?: MaybeRefOrGetter<boolean>;\n /* Whether to hide the custom value option from the dropdown. /\n hideCustomValue?: MaybeRefOrGetter<boolean>;\n /* Whether to return the full item object instead of just the key. /\n returnObject?: MaybeRefOrGetter<boolean>;\n /* How items are grouped, used to resolve group labels for filtering. /\n groupBy?: MaybeRefOrGetter<GroupBy<TItem> \| undefined>;\n /* When true and `groupBy` is set, the default filter also matches the resolved group label. /\n searchIncludesGroupLabel?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteSearchReturn<TItem> {\n internalSearch: Readonly<Ref<string>>;\n debouncedInternalSearch: Readonly<Ref<string>>;\n filteredOptions: Readonly<Ref<TItem[]>>;\n justOpened: Ref<boolean>;\n updateInternalSearch: (value?: string) => void;\n textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n}\n\nexport function useAutoCompleteSearch<TItem>(\n options: MaybeRefOrGetter<TItem[]>,\n searchModel: Ref<string>,\n opts: UseAutoCompleteSearchOptions<TItem>,\n): UseAutoCompleteSearchReturn<TItem> {\n const internalSearch = shallowRef<string>('');\n const debouncedInternalSearch = refDebounced(internalSearch, 50);\n const justOpened = shallowRef<boolean>(false);\n\n // Map iteration order is insertion order, so deleting the first key evicts the oldest token\n const MAX_CACHE_SIZE = 100;\n const tokenCache = new Map<string, string>();\n const getCachedTextToken = (text: string): string => {\n const cached = tokenCache.get(text);\n if (cached !== undefined)\n return cached;\n\n if (tokenCache.size >= MAX_CACHE_SIZE) {\n const oldest = tokenCache.keys().next().value;\n if (oldest !== undefined)\n tokenCache.delete(oldest);\n }\n\n const token = getTextToken(text);\n tokenCache.set(text, token);\n return token;\n };\n\n /\n The group label an item sits under. Mirrors `getGroupKey` in\n * dropdown-menu.ts, so the filter matches the labels the rendered group\n * headers show.\n */\n const resolveGroup = (item: TItem, groupBy: GroupBy<TItem> \| undefined): string \| undefined => {\n if (!groupBy)\n return undefined;\n\n if (typeof groupBy === 'function')\n return groupBy(item);\n\n return String((item ~~as any)~~?.[groupBy] ?? '');\n };\n\n const filteredOptions = computed<TItem[]>(() => {\n const search = get(debouncedInternalSearch);\n const optionsValue = toValue(options);\n\n const noFilter = toValue(opts.noFilter);\n if (noFilter \|\| !search \|\| get(justOpened))\n return optionsValue;\n\n const keyAttr = toValue(opts.keyAttr);\n const textAttr = toValue(opts.textAttr);\n const filter = toValue(opts.filter);\n const groupBy = toValue(opts.groupBy);\n const searchIncludesGroupLabel = toValue(opts.searchIncludesGroupLabel);\n\n // Cache the search token once\n const searchToken = getCachedTextToken(search);\n\n const filtered = filter\n ? optionsValue.filter(item => filter(item, search, resolveGroup(item, groupBy)))\n : optionsValue.filter((item) => {\n if (!item)\n return false;\n\n const keywords: string[] = [getCachedTextToken(keyAttr ? String((item ~~as any)~~[keyAttr]) : item.toString())];\n\n if (textAttr && typeof item === 'object')\n keywords.push(getCachedTextToken(String((item ~~as any)~~[textAttr])));\n\n // Matching the group label too surfaces every item under a \"Trade\" section for \"trade\"\n if (searchIncludesGroupLabel && groupBy) {\n const group = resolveGroup(item, groupBy);\n if (group)\n keywords.push(getCachedTextToken(group));\n }\n\n return keywords.some(keyword => keyword.includes(searchToken));\n });\n\n const customValue = toValue(opts.customValue);\n const hideCustomValue = toValue(opts.hideCustomValue);\n if (!customValue \|\| hideCustomValue \|\| !search) {\n return filtered;\n }\n\n // Use a more efficient check for custom value inclusion\n const isCustomValueIncluded = filtered.some((item) => {\n if (!item) {\n return false;\n }\n\n const val = textAttr ? (item ~~as any)~~[textAttr] : item.toString();\n return val === search;\n });\n\n if (isCustomValueIncluded) {\n return filtered;\n }\n\n return [textValueToProperValue(search, {\n keyAttr,\n returnObject: toValue(opts.returnObject),\n textAttr,\n }), ...filtered];\n });\n\n function textValueToProperValue(val: any, options: { keyAttr?: keyof TItem; textAttr?: keyof TItem; returnObject?: boolean }): TItem {\n const { keyAttr, returnObject, textAttr } = options;\n if (!keyAttr \|\| returnObject)\n return val;\n\n return {\n [keyAttr]: val,\n ...(\n textAttr\n ? { [textAttr]: val }\n : {}\n ),\n } as TItem;\n }\n\n function updateInternalSearch(value: string = ''): void {\n set(searchModel, value);\n set(internalSearch, value);\n }\n\n watch(searchModel, (search) => {\n set(internalSearch, search);\n }, { immediate: true });\n\n // Clear token cache when component unmounts to prevent memory leaks\n onUnmounted(() => {\n tokenCache.clear();\n });\n\n return {\n debouncedInternalSearch,\n filteredOptions,\n internalSearch: readonly(internalSearch),\n justOpened, // eslint-disable-line @rotki/composable-return-readonly -- written by focus.ts onInputFocused and component setValue\n textValueToProperValue: (val: any, returnObjectOverride: boolean = false) => textValueToProperValue(val, {\n keyAttr: toValue(opts.keyAttr),\n returnObject: returnObjectOverride \|\| toValue(opts.returnObject),\n textAttr: toValue(opts.textAttr),\n }),\n updateInternalSearch,\n };\n}\n"],"mappings":";;;;AAmCA,SAAgB,sBACd,SACA,aACA,MACoC;CACpC,MAAM,iBAAiB,WAAmB,EAAE;CAC5C,MAAM,0BAA0B,aAAa,gBAAgB,EAAE;CAC/D,MAAM,aAAa,WAAoB,KAAK;CAG5C,MAAM,iBAAiB;CACvB,MAAM,6BAAa,IAAI,IAAoB;CAC3C,MAAM,sBAAsB,SAAyB;EACnD,MAAM,SAAS,WAAW,IAAI,IAAI;EAClC,IAAI,WAAW,KAAA,GACb,OAAO;EAET,IAAI,WAAW,QAAQ,gBAAgB;GACrC,MAAM,SAAS,WAAW,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;GACxC,IAAI,WAAW,KAAA,GACb,WAAW,OAAO,MAAM;EAC5B;EAEA,MAAM,QAAQ,aAAa,IAAI;EAC/B,WAAW,IAAI,MAAM,KAAK;EAC1B,OAAO;CACT;;;;;;CAOA,MAAM,gBAAgB,MAAa,YAA4D;EAC7F,IAAI,CAAC,SACH,OAAO,KAAA;EAET,IAAI,OAAO,YAAY,YACrB,OAAO,QAAQ,IAAI;EAErB,OAAO,~~OAAQ~~,~~OAAe~~,YAAY,EAAE;~~CAC9C~~;CAEA,MAAM,kBAAkB,eAAwB;EAC9C,MAAM,SAAS,IAAI,uBAAuB;EAC1C,MAAM,eAAe,QAAQ,OAAO;EAGpC,IADiB,QAAQ,KAAK,QAC1B,KAAY,CAAC,UAAU,IAAI,UAAU,GACvC,OAAO;EAET,MAAM,UAAU,QAAQ,KAAK,OAAO;EACpC,MAAM,WAAW,QAAQ,KAAK,QAAQ;EACtC,MAAM,SAAS,QAAQ,KAAK,MAAM;EAClC,MAAM,UAAU,QAAQ,KAAK,OAAO;EACpC,MAAM,2BAA2B,QAAQ,KAAK,wBAAwB;EAGtE,MAAM,cAAc,mBAAmB,MAAM;EAE7C,MAAM,WAAW,SACb,aAAa,QAAO,SAAQ,OAAO,MAAM,QAAQ,aAAa,MAAM,OAAO,CAAC,CAAC,IAC7E,aAAa,QAAQ,SAAS;GAC5B,IAAI,CAAC,MACH,OAAO;GAET,MAAM,WAAqB,CAAC,mBAAmB,UAAU,~~OAAQ~~,~~KAAa~~,QAAQ,IAAI,KAAK,SAAS,CAAC,CAAC;~~GAE1G~~,IAAI,YAAY,OAAO,SAAS,UAC9B,SAAS,KAAK,mBAAmB,~~OAAQ~~,~~KAAa~~,SAAS,CAAC,CAAC;~~GAGnE~~,IAAI,4BAA4B,SAAS;IACvC,MAAM,QAAQ,aAAa,MAAM,OAAO;IACxC,IAAI,OACF,SAAS,KAAK,mBAAmB,KAAK,CAAC;GAC3C;GAEA,OAAO,SAAS,MAAK,YAAW,QAAQ,SAAS,WAAW,CAAC;EAC/D,CAAC;EAEL,MAAM,cAAc,QAAQ,KAAK,WAAW;EAC5C,MAAM,kBAAkB,QAAQ,KAAK,eAAe;EACpD,IAAI,CAAC,eAAe,mBAAmB,CAAC,QACtC,OAAO;EAaT,IAT8B,SAAS,MAAM,SAAS;GACpD,IAAI,CAAC,MACH,OAAO;GAIT,QADY,~~WAAY~~,~~KAAa~~,YAAY,KAAK,SAAS,~~OAChD~~;EACjB,CAEI,GACF,OAAO;EAGT,OAAO,CAAC,uBAAuB,QAAQ;GACrC;GACA,cAAc,QAAQ,KAAK,YAAY;GACvC;EACF,CAAC,GAAG,GAAG,QAAQ;CACjB,CAAC;CAED,SAAS,uBAAuB,KAAU,SAA2F;EACnI,MAAM,EAAE,SAAS,cAAc,aAAa;EAC5C,IAAI,CAAC,WAAW,cACd,OAAO;EAET,OAAO;IACJ,UAAU;GACX,GACE,WACI,GAAG,WAAW,IAAI,IAClB,CAAC;EAET;CACF;CAEA,SAAS,qBAAqB,QAAgB,IAAU;EACtD,IAAI,aAAa,KAAK;EACtB,IAAI,gBAAgB,KAAK;CAC3B;CAEA,MAAM,cAAc,WAAW;EAC7B,IAAI,gBAAgB,MAAM;CAC5B,GAAG,EAAE,WAAW,KAAK,CAAC;CAGtB,kBAAkB;EAChB,WAAW,MAAM;CACnB,CAAC;CAED,OAAO;EACL;EACA;EACA,gBAAgB,SAAS,cAAc;EACvC;EACA,yBAAyB,KAAU,uBAAgC,UAAU,uBAAuB,KAAK;GACvG,SAAS,QAAQ,KAAK,OAAO;GAC7B,cAAc,wBAAwB,QAAQ,KAAK,YAAY;GAC/D,UAAU,QAAQ,KAAK,QAAQ;EACjC,CAAC;EACD;CACF;AACF"}
1	+ {"version":3,"file":"search.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/search.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue';\nimport type { GroupBy } from '@/composables/dropdown-menu';\nimport { get, set } from '@vueuse/shared';\nimport { getTextToken } from '@/utils/helpers';\n\nexport interface UseAutoCompleteSearchOptions<TItem> {\n /** The property used as the unique identifier for each item. /\n keyAttr?: MaybeRefOrGetter<keyof TItem \| undefined>;\n /* The property used to display text for each item. /\n textAttr?: MaybeRefOrGetter<keyof TItem \| undefined>;\n /* Whether to disable client-side filtering of options. /\n noFilter?: MaybeRefOrGetter<boolean>;\n /* Custom filter function to match items against the search query. /\n filter?: MaybeRefOrGetter<((item: TItem, queryText: string, group?: string) => boolean) \| undefined>;\n /* Whether custom (free-text) values are allowed. /\n customValue?: MaybeRefOrGetter<boolean>;\n /* Whether to hide the custom value option from the dropdown. /\n hideCustomValue?: MaybeRefOrGetter<boolean>;\n /* Whether to return the full item object instead of just the key. /\n returnObject?: MaybeRefOrGetter<boolean>;\n /* How items are grouped, used to resolve group labels for filtering. /\n groupBy?: MaybeRefOrGetter<GroupBy<TItem> \| undefined>;\n /* When true and `groupBy` is set, the default filter also matches the resolved group label. /\n searchIncludesGroupLabel?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteSearchReturn<TItem> {\n internalSearch: Readonly<Ref<string>>;\n debouncedInternalSearch: Readonly<Ref<string>>;\n filteredOptions: Readonly<Ref<TItem[]>>;\n justOpened: Ref<boolean>;\n updateInternalSearch: (value?: string) => void;\n textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n}\n\nexport function useAutoCompleteSearch<TItem>(\n options: MaybeRefOrGetter<TItem[]>,\n searchModel: Ref<string>,\n opts: UseAutoCompleteSearchOptions<TItem>,\n): UseAutoCompleteSearchReturn<TItem> {\n const internalSearch = shallowRef<string>('');\n const debouncedInternalSearch = refDebounced(internalSearch, 50);\n const justOpened = shallowRef<boolean>(false);\n\n // Map iteration order is insertion order, so deleting the first key evicts the oldest token\n const MAX_CACHE_SIZE = 100;\n const tokenCache = new Map<string, string>();\n const getCachedTextToken = (text: string): string => {\n const cached = tokenCache.get(text);\n if (cached !== undefined)\n return cached;\n\n if (tokenCache.size >= MAX_CACHE_SIZE) {\n const oldest = tokenCache.keys().next().value;\n if (oldest !== undefined)\n tokenCache.delete(oldest);\n }\n\n const token = getTextToken(text);\n tokenCache.set(text, token);\n return token;\n };\n\n /\n The group label an item sits under. Mirrors `getGroupKey` in\n * dropdown-menu.ts, so the filter matches the labels the rendered group\n * headers show.\n */\n const resolveGroup = (item: TItem, groupBy: GroupBy<TItem> \| undefined): string \| undefined => {\n if (!groupBy)\n return undefined;\n\n if (typeof groupBy === 'function')\n return groupBy(item);\n\n return String(item?.[groupBy] ?? '');\n };\n\n const filteredOptions = computed<TItem[]>(() => {\n const search = get(debouncedInternalSearch);\n const optionsValue = toValue(options);\n\n const noFilter = toValue(opts.noFilter);\n if (noFilter \|\| !search \|\| get(justOpened))\n return optionsValue;\n\n const keyAttr = toValue(opts.keyAttr);\n const textAttr = toValue(opts.textAttr);\n const filter = toValue(opts.filter);\n const groupBy = toValue(opts.groupBy);\n const searchIncludesGroupLabel = toValue(opts.searchIncludesGroupLabel);\n\n // Cache the search token once\n const searchToken = getCachedTextToken(search);\n\n const filtered = filter\n ? optionsValue.filter(item => filter(item, search, resolveGroup(item, groupBy)))\n : optionsValue.filter((item) => {\n if (!item)\n return false;\n\n const keywords: string[] = [getCachedTextToken(keyAttr ? String(item[keyAttr]) : item.toString())];\n\n if (textAttr && typeof item === 'object')\n keywords.push(getCachedTextToken(String(item[textAttr])));\n\n // Matching the group label too surfaces every item under a \"Trade\" section for \"trade\"\n if (searchIncludesGroupLabel && groupBy) {\n const group = resolveGroup(item, groupBy);\n if (group)\n keywords.push(getCachedTextToken(group));\n }\n\n return keywords.some(keyword => keyword.includes(searchToken));\n });\n\n const customValue = toValue(opts.customValue);\n const hideCustomValue = toValue(opts.hideCustomValue);\n if (!customValue \|\| hideCustomValue \|\| !search) {\n return filtered;\n }\n\n // Use a more efficient check for custom value inclusion\n const isCustomValueIncluded = filtered.some((item) => {\n if (!item) {\n return false;\n }\n\n const val = textAttr ? item[textAttr] : item.toString();\n return val === search;\n });\n\n if (isCustomValueIncluded) {\n return filtered;\n }\n\n return [textValueToProperValue(search, {\n keyAttr,\n returnObject: toValue(opts.returnObject),\n textAttr,\n }), ...filtered];\n });\n\n function textValueToProperValue(val: any, options: { keyAttr?: keyof TItem; textAttr?: keyof TItem; returnObject?: boolean }): TItem {\n const { keyAttr, returnObject, textAttr } = options;\n if (!keyAttr \|\| returnObject)\n return val;\n\n return {\n [keyAttr]: val,\n ...(\n textAttr\n ? { [textAttr]: val }\n : {}\n ),\n } as TItem;\n }\n\n function updateInternalSearch(value: string = ''): void {\n set(searchModel, value);\n set(internalSearch, value);\n }\n\n watch(searchModel, (search) => {\n set(internalSearch, search);\n }, { immediate: true });\n\n // Clear token cache when component unmounts to prevent memory leaks\n onUnmounted(() => {\n tokenCache.clear();\n });\n\n return {\n debouncedInternalSearch,\n filteredOptions,\n internalSearch: readonly(internalSearch),\n justOpened, // eslint-disable-line @rotki/composable-return-readonly -- written by focus.ts onInputFocused and component setValue\n textValueToProperValue: (val: any, returnObjectOverride: boolean = false) => textValueToProperValue(val, {\n keyAttr: toValue(opts.keyAttr),\n returnObject: returnObjectOverride \|\| toValue(opts.returnObject),\n textAttr: toValue(opts.textAttr),\n }),\n updateInternalSearch,\n };\n}\n"],"mappings":"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"}

package/dist/composables/forms/auto-complete/value.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ export interface UseAutoCompleteValueReturn<TItem> {
     resolveIn: (options: TItem[]) => TItem[];
 }
 export interface UseAutoCompleteValueDeps<TItem> {
-    getIdentifier: (item: TItem) => any;
+    getIdentifier: (item: TItem) => unknown;
     getText: (item: TItem) => string | undefined;
     textValueToProperValue: (val: any, returnObject?: boolean) => TItem;
     shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;

package/dist/composables/forms/auto-complete/value.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\nimport { isEqual } from '@/utils/is-equal';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n /** The property used as the unique identifier for each item. /\n keyAttr?: MaybeRefOrGetter<keyof TItem \| undefined>;\n /* Whether to return the full item object instead of just the key. /\n returnObject?: MaybeRefOrGetter<boolean>;\n /* Whether custom (free-text) values are allowed. /\n customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n value: ComputedRef<TItem[]>;\n setSelected: (selected: TItem[]) => void;\n /* Resolves the current model value against an arbitrary options list. /\n resolveIn: (options: TItem[]) => TItem[];\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n getIdentifier: (item: TItem) => ~~any~~;\n getText: (item: TItem) => string \| undefined;\n textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n isOpen: MaybeRefOrGetter<boolean>;\n multiple: MaybeRefOrGetter<boolean>;\n updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n modelValue: Ref<TValue \| undefined>,\n options: MaybeRefOrGetter<TItem[]>,\n opts: UseAutoCompleteValueOptions<TItem>,\n deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n function buildOptionsMap(optionsData: TItem[]): Map<~~any~~, TItem> {\n const map = new Map<~~any~~, TItem>();\n for (const item of optionsData) {\n map.set(deps.getIdentifier(item), item);\n }\n return map;\n }\n\n // Create maps for O(1) lookup performance\n const optionsMap = computed<Map<~~any~~, TItem>>(() => buildOptionsMap(toValue(options)));\n\n function convertModelValueToArray(modelValueData: TValue \| undefined): any[] {\n if (modelValueData === null \|\| modelValueData === undefined)\n return [];\n return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n }\n\n function filterValues(\n valueArray: any[],\n optionsMapData: Map<~~any~~, TItem>,\n customValue: boolean,\n returnObject: boolean,\n getKey: (val: any) => any,\n ): TItem[] {\n const filtered: TItem[] = [];\n for (const val of valueArray) {\n const inOptions = optionsMapData.get(getKey(val));\n if (inOptions !== undefined)\n filtered.push(inOptions);\n else if (customValue)\n filtered.push(deps.textValueToProperValue(val, returnObject));\n }\n return filtered;\n }\n\n function processReturnObjectValue(\n modelValueData: TValue \| undefined,\n optionsMapData: Map<~~any~~, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const multipleValue = Array.isArray(modelValueData);\n const valueArray = convertModelValueToArray(modelValueData);\n const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n if (multipleValue \|\| filtered.length === 0)\n return filtered;\n\n const val = filtered[0];\n assert(val !== undefined && val !== null);\n return [val];\n }\n\n function processStandardValue(\n modelValueData: TValue \| undefined,\n optionsMapData: Map<~~any~~, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const valueArray = convertModelValueToArray(modelValueData);\n return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n }\n\n function onUpdateModelValue(value: TValue \| undefined): void {\n set(modelValue, value);\n }\n\n function setSelected(selected: TItem[]): void {\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject);\n const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n if (toValue(deps.multiple))\n return onUpdateModelValue(selection as TValue);\n\n if (selection.length === 0)\n return onUpdateModelValue(undefined);\n\n return onUpdateModelValue(selection[0] as TValue);\n }\n\n function resolveAgainst(optionsMapData: Map<~~any~~, TItem>): TItem[] {\n const modelValueData = get(modelValue);\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject) ?? false;\n const customValue = toValue(opts.customValue) ?? false;\n\n if (keyAttr && returnObject)\n return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n }\n\n function resolveIn(optionsData: TItem[]): TItem[] {\n return resolveAgainst(buildOptionsMap(optionsData));\n }\n\n const value = computed<TItem[]>({\n get: () => resolveAgainst(get(optionsMap)),\n set: (selected: TItem[]): void => {\n setSelected(selected);\n },\n });\n\n // Watches `value` rather than `modelValue`, so the search text resyncs once late `options` resolve it\n watch([value, () => toValue(deps.isOpen)], () => {\n if (toValue(deps.isOpen) \|\| !toValue(deps.shouldApplyValueAsSearch))\n return;\n\n const currentValue = get(value);\n if (toValue(deps.multiple) \|\| currentValue.length === 0) {\n deps.updateInternalSearch();\n }\n else {\n const firstItem = currentValue[0];\n assert(firstItem !== undefined && firstItem !== null);\n deps.updateInternalSearch(deps.getText(firstItem));\n }\n }, { immediate: true });\n\n /\n Reconciles the selection against a new set of options, comparing by\n * reference before by value so an unchanged list costs nothing.\n \n Only a selection the previous options could resolve is reconciled: a value\n * that was already unresolvable is one the consumer set before its options\n * arrived, since an async list starts empty, and clearing it here would\n * discard a legitimate value.\n \n @param curr - the new options\n * @param old - the options before them\n */\n function onOptionsChanged(curr: TItem[], old: TItem[]): void {\n if (curr === old \|\| toValue(opts.customValue) \|\| isEqual(curr, old))\n return;\n\n if (!toValue(deps.multiple) && resolveIn(old).length === 0)\n return;\n\n setSelected(get(value));\n }\n\n watch(() => toValue(options), onOptionsChanged);\n\n return {\n resolveIn,\n setSelected,\n value,\n };\n}\n"],"mappings":";;;;;AA+BA,SAAgB,qBACd,YACA,SACA,MACA,MACmC;CACnC,SAAS,gBAAgB,~~aAAuC~~;~~EAC9D~~,MAAM,sBAAM,IAAI,~~IAAgB~~;~~EAChC~~,KAAK,MAAM,QAAQ,aACjB,IAAI,IAAI,KAAK,cAAc,IAAI,GAAG,IAAI;EAExC,OAAO;CACT;CAGA,MAAM,aAAa,~~eAAgC~~,gBAAgB,QAAQ,OAAO,CAAC,CAAC;~~CAEpF~~,SAAS,yBAAyB,gBAA2C;EAC3E,IAAI,mBAAmB,QAAQ,mBAAmB,KAAA,GAChD,OAAO,CAAC;EACV,OAAO,MAAM,QAAQ,cAAc,IAAI,iBAAiB,CAAC,cAAc;CACzE;CAEA,SAAS,aACP,YACA,gBACA,aACA,cACA,QACS;EACT,MAAM,WAAoB,CAAC;EAC3B,KAAK,MAAM,OAAO,YAAY;GAC5B,MAAM,YAAY,eAAe,IAAI,OAAO,GAAG,CAAC;GAChD,IAAI,cAAc,KAAA,GAChB,SAAS,KAAK,SAAS;QACpB,IAAI,aACP,SAAS,KAAK,KAAK,uBAAuB,KAAK,YAAY,CAAC;EAChE;EACA,OAAO;CACT;CAEA,SAAS,yBACP,gBACA,gBACA,cACA,aACS;EACT,MAAM,gBAAgB,MAAM,QAAQ,cAAc;EAElD,MAAM,WAAW,aADE,yBAAyB,cACd,GAAY,gBAAgB,aAAa,eAAc,QAAO,KAAK,cAAc,GAAG,CAAC;EAEnH,IAAI,iBAAiB,SAAS,WAAW,GACvC,OAAO;EAET,MAAM,MAAM,SAAS;EACrB,OAAO,QAAQ,KAAA,KAAa,QAAQ,IAAI;EACxC,OAAO,CAAC,GAAG;CACb;CAEA,SAAS,qBACP,gBACA,gBACA,cACA,aACS;EAET,OAAO,aADY,yBAAyB,cACxB,GAAY,gBAAgB,aAAa,eAAc,QAAO,GAAG;CACvF;CAEA,SAAS,mBAAmB,OAAiC;EAC3D,IAAI,YAAY,KAAK;CACvB;CAEA,SAAS,YAAY,UAAyB;EAC5C,MAAM,UAAU,QAAQ,KAAK,OAAO;EACpC,MAAM,eAAe,QAAQ,KAAK,YAAY;EAC9C,MAAM,YAAY,WAAW,CAAC,eAAe,SAAS,KAAI,SAAQ,KAAK,QAAQ,IAAI;EAEnF,IAAI,QAAQ,KAAK,QAAQ,GACvB,OAAO,mBAAmB,SAAmB;EAE/C,IAAI,UAAU,WAAW,GACvB,OAAO,mBAAmB,KAAA,CAAS;EAErC,OAAO,mBAAmB,UAAU,EAAY;CAClD;CAEA,SAAS,eAAe,~~gBAA0C~~;~~EAChE~~,MAAM,iBAAiB,IAAI,UAAU;EACrC,MAAM,UAAU,QAAQ,KAAK,OAAO;EACpC,MAAM,eAAe,QAAQ,KAAK,YAAY,KAAK;EACnD,MAAM,cAAc,QAAQ,KAAK,WAAW,KAAK;EAEjD,IAAI,WAAW,cACb,OAAO,yBAAyB,gBAAgB,gBAAgB,cAAc,WAAW;EAE3F,OAAO,qBAAqB,gBAAgB,gBAAgB,cAAc,WAAW;CACvF;CAEA,SAAS,UAAU,aAA+B;EAChD,OAAO,eAAe,gBAAgB,WAAW,CAAC;CACpD;CAEA,MAAM,QAAQ,SAAkB;EAC9B,WAAW,eAAe,IAAI,UAAU,CAAC;EACzC,MAAM,aAA4B;GAChC,YAAY,QAAQ;EACtB;CACF,CAAC;CAGD,MAAM,CAAC,aAAa,QAAQ,KAAK,MAAM,CAAC,SAAS;EAC/C,IAAI,QAAQ,KAAK,MAAM,KAAK,CAAC,QAAQ,KAAK,wBAAwB,GAChE;EAEF,MAAM,eAAe,IAAI,KAAK;EAC9B,IAAI,QAAQ,KAAK,QAAQ,KAAK,aAAa,WAAW,GACpD,KAAK,qBAAqB;OAEvB;GACH,MAAM,YAAY,aAAa;GAC/B,OAAO,cAAc,KAAA,KAAa,cAAc,IAAI;GACpD,KAAK,qBAAqB,KAAK,QAAQ,SAAS,CAAC;EACnD;CACF,GAAG,EAAE,WAAW,KAAK,CAAC;;;;;;;;;;;;;CActB,SAAS,iBAAiB,MAAe,KAAoB;EAC3D,IAAI,SAAS,OAAO,QAAQ,KAAK,WAAW,KAAK,QAAQ,MAAM,GAAG,GAChE;EAEF,IAAI,CAAC,QAAQ,KAAK,QAAQ,KAAK,UAAU,GAAG,CAAC,CAAC,WAAW,GACvD;EAEF,YAAY,IAAI,KAAK,CAAC;CACxB;CAEA,YAAY,QAAQ,OAAO,GAAG,gBAAgB;CAE9C,OAAO;EACL;EACA;EACA;CACF;AACF"}
1	+ {"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\nimport { isEqual } from '@/utils/is-equal';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n /** The property used as the unique identifier for each item. /\n keyAttr?: MaybeRefOrGetter<keyof TItem \| undefined>;\n /* Whether to return the full item object instead of just the key. /\n returnObject?: MaybeRefOrGetter<boolean>;\n /* Whether custom (free-text) values are allowed. /\n customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n value: ComputedRef<TItem[]>;\n setSelected: (selected: TItem[]) => void;\n /* Resolves the current model value against an arbitrary options list. /\n resolveIn: (options: TItem[]) => TItem[];\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n getIdentifier: (item: TItem) => unknown;\n getText: (item: TItem) => string \| undefined;\n textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n isOpen: MaybeRefOrGetter<boolean>;\n multiple: MaybeRefOrGetter<boolean>;\n updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n modelValue: Ref<TValue \| undefined>,\n options: MaybeRefOrGetter<TItem[]>,\n opts: UseAutoCompleteValueOptions<TItem>,\n deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n function buildOptionsMap(optionsData: TItem[]): Map<unknown, TItem> {\n const map = new Map<unknown, TItem>();\n for (const item of optionsData) {\n map.set(deps.getIdentifier(item), item);\n }\n return map;\n }\n\n // Create maps for O(1) lookup performance\n const optionsMap = computed<Map<unknown, TItem>>(() => buildOptionsMap(toValue(options)));\n\n function convertModelValueToArray(modelValueData: TValue \| undefined): any[] {\n if (modelValueData === null \|\| modelValueData === undefined)\n return [];\n return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n }\n\n function filterValues(\n valueArray: any[],\n optionsMapData: Map<unknown, TItem>,\n customValue: boolean,\n returnObject: boolean,\n getKey: (val: any) => any,\n ): TItem[] {\n const filtered: TItem[] = [];\n for (const val of valueArray) {\n const inOptions = optionsMapData.get(getKey(val));\n if (inOptions !== undefined)\n filtered.push(inOptions);\n else if (customValue)\n filtered.push(deps.textValueToProperValue(val, returnObject));\n }\n return filtered;\n }\n\n function processReturnObjectValue(\n modelValueData: TValue \| undefined,\n optionsMapData: Map<unknown, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const multipleValue = Array.isArray(modelValueData);\n const valueArray = convertModelValueToArray(modelValueData);\n const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n if (multipleValue \|\| filtered.length === 0)\n return filtered;\n\n const val = filtered[0];\n assert(val !== undefined && val !== null);\n return [val];\n }\n\n function processStandardValue(\n modelValueData: TValue \| undefined,\n optionsMapData: Map<unknown, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const valueArray = convertModelValueToArray(modelValueData);\n return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n }\n\n function onUpdateModelValue(value: TValue \| undefined): void {\n set(modelValue, value);\n }\n\n function setSelected(selected: TItem[]): void {\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject);\n const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n if (toValue(deps.multiple))\n return onUpdateModelValue(selection as TValue);\n\n if (selection.length === 0)\n return onUpdateModelValue(undefined);\n\n return onUpdateModelValue(selection[0] as TValue);\n }\n\n function resolveAgainst(optionsMapData: Map<unknown, TItem>): TItem[] {\n const modelValueData = get(modelValue);\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject) ?? false;\n const customValue = toValue(opts.customValue) ?? false;\n\n if (keyAttr && returnObject)\n return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n }\n\n function resolveIn(optionsData: TItem[]): TItem[] {\n return resolveAgainst(buildOptionsMap(optionsData));\n }\n\n const value = computed<TItem[]>({\n get: () => resolveAgainst(get(optionsMap)),\n set: (selected: TItem[]): void => {\n setSelected(selected);\n },\n });\n\n // Watches `value` rather than `modelValue`, so the search text resyncs once late `options` resolve it\n watch([value, () => toValue(deps.isOpen)], () => {\n if (toValue(deps.isOpen) \|\| !toValue(deps.shouldApplyValueAsSearch))\n return;\n\n const currentValue = get(value);\n if (toValue(deps.multiple) \|\| currentValue.length === 0) {\n deps.updateInternalSearch();\n }\n else {\n const firstItem = currentValue[0];\n assert(firstItem !== undefined && firstItem !== null);\n deps.updateInternalSearch(deps.getText(firstItem));\n }\n }, { immediate: true });\n\n /\n Reconciles the selection against a new set of options, comparing by\n * reference before by value so an unchanged list costs nothing.\n \n Only a selection the previous options could resolve is reconciled: a value\n * that was already unresolvable is one the consumer set before its options\n * arrived, since an async list starts empty, and clearing it here would\n * discard a legitimate value.\n \n @param curr - the new options\n * @param old - the options before them\n */\n function onOptionsChanged(curr: TItem[], old: TItem[]): void {\n if (curr === old \|\| toValue(opts.customValue) \|\| isEqual(curr, old))\n return;\n\n if (!toValue(deps.multiple) && resolveIn(old).length === 0)\n return;\n\n setSelected(get(value));\n }\n\n watch(() => toValue(options), onOptionsChanged);\n\n return {\n resolveIn,\n setSelected,\n value,\n };\n}\n"],"mappings":"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"}

package/dist/composables/prop-model.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { type ModelRef } from 'vue';
+/** The event of a `modelValue` model, for a component that declares the model as a prop. */
+export interface ModelValueEmits<T> {
+    'update:modelValue': [value: T];
+}
+/**
+ * The ref `defineModel` gives, for a model the component declares itself as a prop and an
+ * `update:<name>` event.
+ *
+ * An optional `defineModel` gets an update typed `T | undefined` from the type checker, which a
+ * consumer's `Ref<T>` cannot take, even when the component never sends `undefined`. Declaring the
+ * prop and the event by hand types the update exactly; this then builds the same two-way ref,
+ * through the `useModel` that `defineModel` compiles to. It needs the props object, which a
+ * component that destructures its props does not have, so the prop is read through a getter.
+ *
+ * @param name - the model's prop, which the component must declare
+ * @param value - reads that prop
+ * @param modifiers - reads its `<name>Modifiers` prop, for a model that takes modifiers
+ * @returns the model's ref, which also destructures into the ref and its modifiers
+ */
+export declare function usePropModel<T, M extends PropertyKey = string>(name: string, value: () => T | undefined, modifiers?: () => Partial<Record<M, true>> | undefined): ModelRef<T | undefined, M>;

package/dist/composables/prop-model.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { useModel } from "vue";
+//#region src/composables/prop-model.ts
+/**
+* The ref `defineModel` gives, for a model the component declares itself as a prop and an
+* `update:<name>` event.
+*
+* An optional `defineModel` gets an update typed `T | undefined` from the type checker, which a
+* consumer's `Ref<T>` cannot take, even when the component never sends `undefined`. Declaring the
+* prop and the event by hand types the update exactly; this then builds the same two-way ref,
+* through the `useModel` that `defineModel` compiles to. It needs the props object, which a
+* component that destructures its props does not have, so the prop is read through a getter.
+*
+* @param name - the model's prop, which the component must declare
+* @param value - reads that prop
+* @param modifiers - reads its `<name>Modifiers` prop, for a model that takes modifiers
+* @returns the model's ref, which also destructures into the ref and its modifiers
+*/
+function usePropModel(name, value, modifiers) {
+	const props = {};
+	Object.defineProperty(props, name, {
+		get: value,
+		enumerable: true
+	});
+	if (modifiers) Object.defineProperty(props, name === "modelValue" ? "modelModifiers" : `${name}Modifiers`, {
+		get: modifiers,
+		enumerable: true
+	});
+	return useModel(props, name);
+}
+//#endregion
+export { usePropModel };
+//# sourceMappingURL=prop-model.js.map

package/dist/composables/prop-model.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"prop-model.js","names":[],"sources":["../../src/composables/prop-model.ts"],"sourcesContent":["import { type ModelRef, useModel } from 'vue';\n\n/** The event of a `modelValue` model, for a component that declares the model as a prop. */\nexport interface ModelValueEmits<T> {\n 'update:modelValue': [value: T];\n}\n\n/**\n * The ref `defineModel` gives, for a model the component declares itself as a prop and an\n * `update:<name>` event.\n *\n * An optional `defineModel` gets an update typed `T | undefined` from the type checker, which a\n * consumer's `Ref<T>` cannot take, even when the component never sends `undefined`. Declaring the\n * prop and the event by hand types the update exactly; this then builds the same two-way ref,\n * through the `useModel` that `defineModel` compiles to. It needs the props object, which a\n * component that destructures its props does not have, so the prop is read through a getter.\n *\n * @param name - the model's prop, which the component must declare\n * @param value - reads that prop\n * @param modifiers - reads its `<name>Modifiers` prop, for a model that takes modifiers\n * @returns the model's ref, which also destructures into the ref and its modifiers\n */\nexport function usePropModel<T, M extends PropertyKey = string>(\n name: string,\n value: () => T | undefined,\n modifiers?: () => Partial<Record<M, true>> | undefined,\n): ModelRef<T | undefined, M> {\n const props: Record<string, T | undefined> = {};\n Object.defineProperty(props, name, { get: value, enumerable: true });\n if (modifiers)\n Object.defineProperty(props, name === 'modelValue' ? 'modelModifiers' : `${name}Modifiers`, { get: modifiers, enumerable: true });\n\n return useModel<M, Record<string, T | undefined>, string>(props, name);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,SAAgB,aACd,MACA,OACA,WAC4B;CAC5B,MAAM,QAAuC,CAAC;CAC9C,OAAO,eAAe,OAAO,MAAM;EAAE,KAAK;EAAO,YAAY;CAAK,CAAC;CACnE,IAAI,WACF,OAAO,eAAe,OAAO,SAAS,eAAe,mBAAmB,GAAG,KAAK,YAAY;EAAE,KAAK;EAAW,YAAY;CAAK,CAAC;CAElI,OAAO,SAAmD,OAAO,IAAI;AACvE"}

package/dist/composables/tables/data-table/columns.d.ts CHANGED Viewed

@@ -4,7 +4,8 @@ export interface UseTableColumnsOptions<T extends object, IdType extends keyof T
     /** Column definitions for the table. When omitted, columns are inferred from row data. */
     cols: MaybeRefOrGetter<TableColumn<T>[] | undefined>;
     /** The property on each column definition used as the column identifier. */
-    columnAttr: keyof TableColumn<T>;
+    /** The column property holding the header text, which the generated columns fill. */
+    columnAttr: string;
     /** The data rows to display in the table. */
     rows: MaybeRefOrGetter<readonly T[]>;
     /** Whether row expansion is enabled. */

package/dist/composables/tables/data-table/columns.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"columns.js","names":[],"sources":["../../../../src/composables/tables/data-table/columns.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport type {\n NoneSortableTableColumn,\n TableColumn,\n TableRowKey,\n} from '@/components/tables/RuiTableHead.vue';\nimport { getAlignClass, TableAlign } from '@/components/tables/table-props';\nimport { getObjectKeys, isHeaderSlot } from '@/composables/tables/data-table/types';\n\nexport interface UseTableColumnsOptions<T extends object, IdType extends keyof T> {\n /** Column definitions for the table. When omitted, columns are inferred from row data. /\n cols: MaybeRefOrGetter<TableColumn<T>[] \| undefined>;\n /* The property on each column definition used as the column identifier. /\n columnAttr: ~~keyof TableColumn<T>;\~~n /* The data rows to display in the table. /\n rows: MaybeRefOrGetter<readonly T[]>;\n /* Whether row expansion is enabled. /\n expandable: ComputedRef<boolean>;\n /* The keys currently used for grouping rows. /\n groupKeys: ComputedRef<TableRowKey<T>[]>;\n /* The currently selected row identifiers. /\n selectedData: Ref<T[IdType][] \| undefined>;\n /* Template slots provided to the table component. /\n slots: Record<string, any>;\n /* Pre-computes td class per column to avoid per-cell tv() calls. /\n tdResolver?: (options: { class?: string }) => string;\n /* Whether the table is currently rendered in its stacked mobile layout. */\n isMobile?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseTableColumnsReturn<T extends object> {\n columns: ComputedRef<TableColumn<T>[]>;\n colspan: ComputedRef<number>;\n headerSlots: `header.${string}`[];\n cellValue: (row: T, key: TableColumn<T>['key']) => T[TableRowKey<T>];\n}\n\nexport function useTableColumns<T extends object, IdType extends keyof T>(\n options: UseTableColumnsOptions<T, IdType>,\n): UseTableColumnsReturn<T> {\n const { cols, columnAttr, expandable, groupKeys, isMobile, rows, selectedData, slots, tdResolver } = options;\n\n function attachTdClass(columnList: TableColumn<T>[]): TableColumn<T>[] {\n if (!tdResolver)\n return columnList;\n\n return columnList.map(col => ({\n ...col,\n tdClass: tdResolver({ class: getAlignClass(col.align) }),\n }));\n }\n\n const columns = computed<TableColumn<T>[]>(() => {\n const currentCols = toValue(cols);\n const currentRows = toValue(rows);\n const allColumns =\n currentCols ??\n getObjectKeys(currentRows[0] ?? {}).map(\n key =>\n ({\n key,\n [columnAttr]: String(key),\n }) satisfies NoneSortableTableColumn<T>,\n );\n\n const data = toValue(isMobile)\n ? allColumns.filter(column => !column.mobileHidden)\n : allColumns;\n\n const hasExpandColumn = data.some(row => row.key === 'expand');\n\n if (get(expandable) && !hasExpandColumn) {\n return attachTdClass([\n ...data,\n {\n key: 'expand' as TableRowKey<T>,\n sortable: false,\n class: 'w-16',\n cellClass: '!py-0 w-16',\n align: TableAlign.end,\n } satisfies NoneSortableTableColumn<T>,\n ]);\n }\n\n const groupByKeys = get(groupKeys);\n\n if (groupByKeys.length === 0)\n return attachTdClass(data);\n\n return attachTdClass(data.filter(column => !groupByKeys.includes(column.key as TableRowKey<T>)));\n });\n\n const colspan = computed<number>(() => {\n let columnLength = get(columns).length;\n if (get(selectedData))\n columnLength++;\n\n return columnLength;\n });\n\n // Slot keys are static for the component lifetime, so no reactivity is needed\n const headerSlots: `header.${string}`[] = Object.keys(slots).filter(isHeaderSlot);\n\n function cellValue(row: T, key: TableColumn<T>['key']): T[TableRowKey<T>] {\n return row[key as TableRowKey<T>];\n }\n\n return {\n columns,\n colspan,\n headerSlots,\n cellValue,\n };\n}\n"],"mappings":";;;;;~~AAqCA~~,SAAgB,gBACd,SAC0B;CAC1B,MAAM,EAAE,MAAM,YAAY,YAAY,WAAW,UAAU,MAAM,cAAc,OAAO,eAAe;CAErG,SAAS,cAAc,YAAgD;EACrE,IAAI,CAAC,YACH,OAAO;EAET,OAAO,WAAW,KAAI,SAAQ;GAC5B,GAAG;GACH,SAAS,WAAW,EAAE,OAAO,cAAc,IAAI,KAAK,EAAE,CAAC;EACzD,EAAE;CACJ;CAEA,MAAM,UAAU,eAAiC;EAC/C,MAAM,cAAc,QAAQ,IAAI;EAChC,MAAM,cAAc,QAAQ,IAAI;EAChC,MAAM,aACJ,eACA,cAAc,YAAY,MAAM,CAAC,CAAC,CAAC,CAAC,KAClC,SACG;GACC;IACC,aAAa,OAAO,GAAG;EAC1B,EACJ;EAEF,MAAM,OAAO,QAAQ,QAAQ,IACzB,WAAW,QAAO,WAAU,CAAC,OAAO,YAAY,IAChD;EAEJ,MAAM,kBAAkB,KAAK,MAAK,QAAO,IAAI,QAAQ,QAAQ;EAE7D,IAAI,IAAI,UAAU,KAAK,CAAC,iBACtB,OAAO,cAAc,CACnB,GAAG,MACH;GACE,KAAK;GACL,UAAU;GACV,OAAO;GACP,WAAW;GACX,OAAO,WAAW;EACpB,CACF,CAAC;EAGH,MAAM,cAAc,IAAI,SAAS;EAEjC,IAAI,YAAY,WAAW,GACzB,OAAO,cAAc,IAAI;EAE3B,OAAO,cAAc,KAAK,QAAO,WAAU,CAAC,YAAY,SAAS,OAAO,GAAqB,CAAC,CAAC;CACjG,CAAC;CAED,MAAM,UAAU,eAAuB;EACrC,IAAI,eAAe,IAAI,OAAO,CAAC,CAAC;EAChC,IAAI,IAAI,YAAY,GAClB;EAEF,OAAO;CACT,CAAC;CAGD,MAAM,cAAoC,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,YAAY;CAEhF,SAAS,UAAU,KAAQ,KAA+C;EACxE,OAAO,IAAI;CACb;CAEA,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}
1	+ {"version":3,"file":"columns.js","names":[],"sources":["../../../../src/composables/tables/data-table/columns.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport type {\n NoneSortableTableColumn,\n TableColumn,\n TableRowKey,\n} from '@/components/tables/RuiTableHead.vue';\nimport { getAlignClass, TableAlign } from '@/components/tables/table-props';\nimport { getObjectKeys, isHeaderSlot } from '@/composables/tables/data-table/types';\n\nexport interface UseTableColumnsOptions<T extends object, IdType extends keyof T> {\n /** Column definitions for the table. When omitted, columns are inferred from row data. /\n cols: MaybeRefOrGetter<TableColumn<T>[] \| undefined>;\n /* The property on each column definition used as the column identifier. /\n /* The column property holding the header text, which the generated columns fill. /\n columnAttr: string;\n /* The data rows to display in the table. /\n rows: MaybeRefOrGetter<readonly T[]>;\n /* Whether row expansion is enabled. /\n expandable: ComputedRef<boolean>;\n /* The keys currently used for grouping rows. /\n groupKeys: ComputedRef<TableRowKey<T>[]>;\n /* The currently selected row identifiers. /\n selectedData: Ref<T[IdType][] \| undefined>;\n /* Template slots provided to the table component. /\n slots: Record<string, any>;\n /* Pre-computes td class per column to avoid per-cell tv() calls. /\n tdResolver?: (options: { class?: string }) => string;\n /* Whether the table is currently rendered in its stacked mobile layout. */\n isMobile?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseTableColumnsReturn<T extends object> {\n columns: ComputedRef<TableColumn<T>[]>;\n colspan: ComputedRef<number>;\n headerSlots: `header.${string}`[];\n cellValue: (row: T, key: TableColumn<T>['key']) => T[TableRowKey<T>];\n}\n\nexport function useTableColumns<T extends object, IdType extends keyof T>(\n options: UseTableColumnsOptions<T, IdType>,\n): UseTableColumnsReturn<T> {\n const { cols, columnAttr, expandable, groupKeys, isMobile, rows, selectedData, slots, tdResolver } = options;\n\n function attachTdClass(columnList: TableColumn<T>[]): TableColumn<T>[] {\n if (!tdResolver)\n return columnList;\n\n return columnList.map(col => ({\n ...col,\n tdClass: tdResolver({ class: getAlignClass(col.align) }),\n }));\n }\n\n const columns = computed<TableColumn<T>[]>(() => {\n const currentCols = toValue(cols);\n const currentRows = toValue(rows);\n const allColumns =\n currentCols ??\n getObjectKeys(currentRows[0] ?? {}).map(\n key =>\n ({\n key,\n [columnAttr]: String(key),\n }) satisfies NoneSortableTableColumn<T>,\n );\n\n const data = toValue(isMobile)\n ? allColumns.filter(column => !column.mobileHidden)\n : allColumns;\n\n const hasExpandColumn = data.some(row => row.key === 'expand');\n\n if (get(expandable) && !hasExpandColumn) {\n return attachTdClass([\n ...data,\n {\n key: 'expand' as TableRowKey<T>,\n sortable: false,\n class: 'w-16',\n cellClass: '!py-0 w-16',\n align: TableAlign.end,\n } satisfies NoneSortableTableColumn<T>,\n ]);\n }\n\n const groupByKeys = get(groupKeys);\n\n if (groupByKeys.length === 0)\n return attachTdClass(data);\n\n return attachTdClass(data.filter(column => !groupByKeys.includes(column.key as TableRowKey<T>)));\n });\n\n const colspan = computed<number>(() => {\n let columnLength = get(columns).length;\n if (get(selectedData))\n columnLength++;\n\n return columnLength;\n });\n\n // Slot keys are static for the component lifetime, so no reactivity is needed\n const headerSlots: `header.${string}`[] = Object.keys(slots).filter(isHeaderSlot);\n\n function cellValue(row: T, key: TableColumn<T>['key']): T[TableRowKey<T>] {\n return row[key as TableRowKey<T>];\n }\n\n return {\n columns,\n colspan,\n headerSlots,\n cellValue,\n };\n}\n"],"mappings":";;;;;AAsCA,SAAgB,gBACd,SAC0B;CAC1B,MAAM,EAAE,MAAM,YAAY,YAAY,WAAW,UAAU,MAAM,cAAc,OAAO,eAAe;CAErG,SAAS,cAAc,YAAgD;EACrE,IAAI,CAAC,YACH,OAAO;EAET,OAAO,WAAW,KAAI,SAAQ;GAC5B,GAAG;GACH,SAAS,WAAW,EAAE,OAAO,cAAc,IAAI,KAAK,EAAE,CAAC;EACzD,EAAE;CACJ;CAEA,MAAM,UAAU,eAAiC;EAC/C,MAAM,cAAc,QAAQ,IAAI;EAChC,MAAM,cAAc,QAAQ,IAAI;EAChC,MAAM,aACJ,eACA,cAAc,YAAY,MAAM,CAAC,CAAC,CAAC,CAAC,KAClC,SACG;GACC;IACC,aAAa,OAAO,GAAG;EAC1B,EACJ;EAEF,MAAM,OAAO,QAAQ,QAAQ,IACzB,WAAW,QAAO,WAAU,CAAC,OAAO,YAAY,IAChD;EAEJ,MAAM,kBAAkB,KAAK,MAAK,QAAO,IAAI,QAAQ,QAAQ;EAE7D,IAAI,IAAI,UAAU,KAAK,CAAC,iBACtB,OAAO,cAAc,CACnB,GAAG,MACH;GACE,KAAK;GACL,UAAU;GACV,OAAO;GACP,WAAW;GACX,OAAO,WAAW;EACpB,CACF,CAAC;EAGH,MAAM,cAAc,IAAI,SAAS;EAEjC,IAAI,YAAY,WAAW,GACzB,OAAO,cAAc,IAAI;EAE3B,OAAO,cAAc,KAAK,QAAO,WAAU,CAAC,YAAY,SAAS,OAAO,GAAqB,CAAC,CAAC;CACjG,CAAC;CAED,MAAM,UAAU,eAAuB;EACrC,IAAI,eAAe,IAAI,OAAO,CAAC,CAAC;EAChC,IAAI,IAAI,YAAY,GAClB;EAEF,OAAO;CACT,CAAC;CAGD,MAAM,cAAoC,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,YAAY;CAEhF,SAAS,UAAU,KAAQ,KAA+C;EACxE,OAAO,IAAI;CACb;CAEA,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/tables/data-table/types.d.ts CHANGED Viewed

@@ -4,6 +4,41 @@ export interface TableOptions<T> {
     pagination?: TablePaginationData;
     sort?: TableSortData<T>;
 }
+/**
+ * The RuiDataTable models a consumer may leave unbound. Each is `undefined` until bound, which
+ * switches off what it drives (selection, row expansion) or leaves it to the table (pagination,
+ * sort, collapsed groups), and the table never sets one back to `undefined`. They are props and events rather than
+ * `defineModel` calls so that the update is typed without that `undefined`; see `usePropModel`.
+ */
+export interface DataTableModels<T, K extends keyof T, S extends TableSortData<T> = TableSortData<T>> {
+    /** The selected rows' identifiers. Bound, the rows take a checkbox. */
+    modelValue?: T[K][];
+    /** The expanded rows. Bound, with an `expanded-item` slot, the rows expand. */
+    expanded?: T[];
+    /** The page, its size and the total. `.external` leaves paging the rows to the consumer. */
+    pagination?: TablePaginationData;
+    paginationModifiers?: {
+        external?: true;
+    };
+    /**
+     * The sorted column, or columns in an array. The table keeps the shape it is bound with, so the
+     * update has the bound type. `.external` leaves sorting the rows to the consumer.
+     */
+    sort?: S;
+    sortModifiers?: {
+        external?: true;
+    };
+    /** The rows of the collapsed groups. */
+    collapsed?: T[];
+}
+/** The updates of {@link DataTableModels}. */
+export interface DataTableModelEmits<T, K extends keyof T, S extends TableSortData<T> = TableSortData<T>> {
+    'update:modelValue': [value: T[K][]];
+    'update:expanded': [value: T[]];
+    'update:pagination': [value: TablePaginationData];
+    'update:sort': [value: NonNullable<S>];
+    'update:collapsed': [value: T[]];
+}
 export declare const GROUP_HEADER_BRAND: unique symbol;
 export interface GroupHeader<T> {
     [GROUP_HEADER_BRAND]: true;

package/dist/composables/tables/data-table/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","names":[],"sources":["../../../../src/composables/tables/data-table/types.ts"],"sourcesContent":["import type { TableSortData } from '@/components/tables/RuiTableHead.vue';\nimport type { TablePaginationData } from '@/components/tables/RuiTablePagination.vue';\n\nexport interface TableOptions<T> {\n pagination?: TablePaginationData;\n sort?: TableSortData<T>;\n}\n\nexport const GROUP_HEADER_BRAND: unique symbol = Symbol('GroupHeader');\n\nexport interface GroupHeader<T> {\n [GROUP_HEADER_BRAND]: true;\n identifier: string;\n group: Partial<T>;\n}\n\nexport type GroupedTableRow<T> = T \| GroupHeader<T>;\n\nexport function isRow<T extends object>(item: GroupedTableRow<T>): item is T {\n return !(GROUP_HEADER_BRAND in item);\n}\n\nexport function isHeaderSlot(slotName: string): slotName is `header.${string}` {\n return slotName.startsWith('header.');\n}\n\nexport function getObjectKeys<O extends object>(obj: O): (string & keyof O)[] {\n return Object.keys(obj).filter((key): key is string & keyof O => key in obj);\n}\n"],"mappings":";~~AAQA~~,IAAa,qBAAoC,OAAO,aAAa;AAUrE,SAAgB,MAAwB,MAAqC;CAC3E,OAAO,EAAE,sBAAsB;AACjC;AAEA,SAAgB,aAAa,UAAkD;CAC7E,OAAO,SAAS,WAAW,SAAS;AACtC;AAEA,SAAgB,cAAgC,KAA8B;CAC5E,OAAO,OAAO,KAAK,GAAG,CAAC,CAAC,QAAQ,QAAiC,OAAO,GAAG;AAC7E"}
1	+ {"version":3,"file":"types.js","names":[],"sources":["../../../../src/composables/tables/data-table/types.ts"],"sourcesContent":["import type { TableSortData } from '@/components/tables/RuiTableHead.vue';\nimport type { TablePaginationData } from '@/components/tables/RuiTablePagination.vue';\n\nexport interface TableOptions<T> {\n pagination?: TablePaginationData;\n sort?: TableSortData<T>;\n}\n\n/*\n The RuiDataTable models a consumer may leave unbound. Each is `undefined` until bound, which\n * switches off what it drives (selection, row expansion) or leaves it to the table (pagination,\n * sort, collapsed groups), and the table never sets one back to `undefined`. They are props and events rather than\n * `defineModel` calls so that the update is typed without that `undefined`; see `usePropModel`.\n /\nexport interface DataTableModels<T, K extends keyof T, S extends TableSortData<T> = TableSortData<T>> {\n /* The selected rows' identifiers. Bound, the rows take a checkbox. /\n modelValue?: T[K][];\n /* The expanded rows. Bound, with an `expanded-item` slot, the rows expand. /\n expanded?: T[];\n /* The page, its size and the total. `.external` leaves paging the rows to the consumer. /\n pagination?: TablePaginationData;\n paginationModifiers?: { external?: true };\n /\n The sorted column, or columns in an array. The table keeps the shape it is bound with, so the\n * update has the bound type. `.external` leaves sorting the rows to the consumer.\n /\n sort?: S;\n sortModifiers?: { external?: true };\n /* The rows of the collapsed groups. /\n collapsed?: T[];\n}\n\n/* The updates of {@link DataTableModels}. */\nexport interface DataTableModelEmits<T, K extends keyof T, S extends TableSortData<T> = TableSortData<T>> {\n 'update:modelValue': [value: T[K][]];\n 'update:expanded': [value: T[]];\n 'update:pagination': [value: TablePaginationData];\n 'update:sort': [value: NonNullable<S>];\n 'update:collapsed': [value: T[]];\n}\n\nexport const GROUP_HEADER_BRAND: unique symbol = Symbol('GroupHeader');\n\nexport interface GroupHeader<T> {\n [GROUP_HEADER_BRAND]: true;\n identifier: string;\n group: Partial<T>;\n}\n\nexport type GroupedTableRow<T> = T \| GroupHeader<T>;\n\nexport function isRow<T extends object>(item: GroupedTableRow<T>): item is T {\n return !(GROUP_HEADER_BRAND in item);\n}\n\nexport function isHeaderSlot(slotName: string): slotName is `header.${string}` {\n return slotName.startsWith('header.');\n}\n\nexport function getObjectKeys<O extends object>(obj: O): (string & keyof O)[] {\n return Object.keys(obj).filter((key): key is string & keyof O => key in obj);\n}\n"],"mappings":";AAyCA,IAAa,qBAAoC,OAAO,aAAa;AAUrE,SAAgB,MAAwB,MAAqC;CAC3E,OAAO,EAAE,sBAAsB;AACjC;AAEA,SAAgB,aAAa,UAAkD;CAC7E,OAAO,SAAS,WAAW,SAAS;AACtC;AAEA,SAAgB,cAAgC,KAA8B;CAC5E,OAAO,OAAO,KAAK,GAAG,CAAC,CAAC,QAAQ,QAAiC,OAAO,GAAG;AAC7E"}

package/dist/composables/use-rui-i18n.d.ts CHANGED Viewed

@@ -1,13 +1,16 @@
-export declare const RUI_I18N_INJECTION_KEY: unique symbol;
+import { type InjectionKey } from 'vue';
+/** The named parameters a translation interpolates. */
+export type RuiI18nParams = Record<string, unknown>;
 interface I18nProvider {
     t: {
         (key: string, fallback: string): string;
-        (key: string, params: Record<string, any>, fallback: string): string;
+        (key: string, params: RuiI18nParams, fallback: string): string;
     };
 }
 export interface RuiI18nProvider {
-    t: (key: string, params?: Record<string, any>) => string;
+    t: (key: string, params?: RuiI18nParams) => string;
     te: (key: string) => boolean;
 }
+export declare const RUI_I18N_INJECTION_KEY: InjectionKey<RuiI18nProvider>;
 export declare function useRuiI8n(): I18nProvider;
 export {};

package/dist/composables/use-rui-i18n.js CHANGED Viewed

@@ -4,7 +4,7 @@ var RUI_I18N_INJECTION_KEY = Symbol("rui:i18n");
 function useRuiI8n() {
 	const i18nProvider = inject(RUI_I18N_INJECTION_KEY, void 0);
 	const translate = (key, params) => {
-		if (i18nProvider?.te(key)) return i18nProvider?.t(key, params);
+		if (i18nProvider?.te(key)) return i18nProvider.t(key, params);
 	};
 	const t = (key, paramsOrFallback, fallback) => {
 		if (typeof paramsOrFallback === "string") return translate(key) ?? paramsOrFallback ?? key;

package/dist/composables/use-rui-i18n.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-rui-i18n.js","names":[],"sources":["../../src/composables/use-rui-i18n.ts"],"sourcesContent":["import { inject } from 'vue';\n\nexport ~~const~~ ~~RUI_I18N_INJECTION_KEY~~ = ~~Symbol('rui:i18n');\~~n\ninterface I18nProvider {\n t: {\n (key: string, fallback: string): string;\n (key: string, params: ~~Record<string~~, ~~any>,~~ fallback: string): string;\n };\n}\n\nexport interface RuiI18nProvider {\n t: (key: string, params?: ~~Record<string, any>~~) => string;\n te: (key: string) => boolean;\n}\n\nexport function useRuiI8n(): I18nProvider {\n const i18nProvider = inject~~<RuiI18nProvider \| undefined>~~(RUI_I18N_INJECTION_KEY, undefined);\n\n const translate = (key: string, params?: ~~Record<string, any>~~): string \| undefined => {\n if (i18nProvider?.te(key)) {\n return i18nProvider?.t(key, params);\n }\n return undefined;\n };\n\n const t = (\n key: string,\n paramsOrFallback?: ~~Record<string,~~ ~~any>~~ \| string,\n fallback?: string,\n ): string => {\n if (typeof paramsOrFallback === 'string') {\n return translate(key) ?? paramsOrFallback ?? key;\n }\n else {\n return translate(key, paramsOrFallback) ?? fallback ?? key;\n }\n };\n\n return { t };\n}\n"],"mappings":";;~~AAEA~~,IAAa,~~yBAAyB~~,OAAO,UAAU;~~AAcvD~~,SAAgB,YAA0B;CACxC,MAAM,eAAe,~~OAAoC~~,wBAAwB,KAAA,CAAS;~~CAE1F~~,MAAM,aAAa,KAAa,~~WAAqD~~;~~EACnF~~,IAAI,cAAc,GAAG,GAAG,GACtB,OAAO,~~cAAc~~,EAAE,KAAK,MAAM;~~CAGtC~~;CAEA,MAAM,KACJ,KACA,kBACA,aACW;EACX,IAAI,OAAO,qBAAqB,UAC9B,OAAO,UAAU,GAAG,KAAK,oBAAoB;OAG7C,OAAO,UAAU,KAAK,gBAAgB,KAAK,YAAY;CAE3D;CAEA,OAAO,EAAE,EAAE;AACb"}
1	+ {"version":3,"file":"use-rui-i18n.js","names":[],"sources":["../../src/composables/use-rui-i18n.ts"],"sourcesContent":["import { inject, type InjectionKey } from 'vue';\n\n/** The named parameters a translation interpolates. */\nexport type RuiI18nParams = Record<string, unknown>;\n\ninterface I18nProvider {\n t: {\n (key: string, fallback: string): string;\n (key: string, params: RuiI18nParams, fallback: string): string;\n };\n}\n\nexport interface RuiI18nProvider {\n t: (key: string, params?: RuiI18nParams) => string;\n te: (key: string) => boolean;\n}\n\nexport const RUI_I18N_INJECTION_KEY: InjectionKey<RuiI18nProvider> = Symbol('rui:i18n');\n\nexport function useRuiI8n(): I18nProvider {\n const i18nProvider = inject(RUI_I18N_INJECTION_KEY, undefined);\n\n const translate = (key: string, params?: RuiI18nParams): string \| undefined => {\n if (i18nProvider?.te(key)) {\n return i18nProvider.t(key, params);\n }\n return undefined;\n };\n\n const t = (\n key: string,\n paramsOrFallback?: RuiI18nParams \| string,\n fallback?: string,\n ): string => {\n if (typeof paramsOrFallback === 'string') {\n return translate(key) ?? paramsOrFallback ?? key;\n }\n else {\n return translate(key, paramsOrFallback) ?? fallback ?? key;\n }\n };\n\n return { t };\n}\n"],"mappings":";;AAiBA,IAAa,yBAAwD,OAAO,UAAU;AAEtF,SAAgB,YAA0B;CACxC,MAAM,eAAe,OAAO,wBAAwB,KAAA,CAAS;CAE7D,MAAM,aAAa,KAAa,WAA+C;EAC7E,IAAI,cAAc,GAAG,GAAG,GACtB,OAAO,aAAa,EAAE,KAAK,MAAM;CAGrC;CAEA,MAAM,KACJ,KACA,kBACA,aACW;EACX,IAAI,OAAO,qBAAqB,UAC9B,OAAO,UAAU,GAAG,KAAK,oBAAoB;OAG7C,OAAO,UAAU,KAAK,gBAAgB,KAAK,YAAY;CAE3D;CAEA,OAAO,EAAE,EAAE;AACb"}

package/dist/index.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import type { InitThemeOptions } from './types/theme.js';
 import { type FieldOptions } from './composables/defaults/field.js';
 import { type LogoOptions } from './composables/defaults/logo.js';
 import { type TableOptions } from './composables/defaults/table.js';
+import { type RuiI18nParams, type RuiI18nProvider } from './composables/use-rui-i18n.js';
 import { StepperOrientation, StepperState, type StepperStep } from './types/stepper.js';
 import './style.css';
 export * from './components/index.js';
@@ -10,6 +11,7 @@ export { activatorHandlers, type ActivatorHandlers } from './components/overlays
 export * from './composables/index.js';
 export { type FieldOptions, type FieldScopeOptions, type LabelPlacement, provideFieldDefaults } from './composables/defaults/field.js';
 export type { LogoOptions, LogoResolver } from './composables/defaults/logo.js';
+export type { RuiI18nParams, RuiI18nProvider };
 export { contextColors, type ContextColorsType } from './consts/colors.js';
 export { translationKeys } from './i18n/keys.js';
 export * from './icons/index.js';
@@ -44,6 +46,10 @@ export declare function createRui(options?: RuiOptions): {
     }>;
     install: (app: App) => void;
 };
-export declare function createRuiI8nPlugin(i18nInstance: any): {
+/** What the i18n plugin reads from a vue-i18n instance (the result of `createI18n`). */
+export interface RuiI18nInstance {
+    global: RuiI18nProvider;
+}
+export declare function createRuiI8nPlugin(i18nInstance: RuiI18nInstance): {
     install: (app: App) => void;
 };

package/dist/index.js CHANGED Viewed

@@ -95,15 +95,23 @@ function createRui(options = {}) {
 		install
 	};
 }
-function createRuiI8nPlugin(i18nInstance) {
+/**
+* Checks the instance at runtime too, for callers the types do not reach.
+*/
+function assertI18nInstance(i18nInstance) {
 	if (!i18nInstance || typeof i18nInstance !== "object") throw new Error("i18nInstance must be an object");
-	if (!i18nInstance.global || typeof i18nInstance.global !== "object") throw new Error("i18nInstance must have a global property");
-	if (!i18nInstance.global.t || typeof i18nInstance.global.t !== "function") throw new Error("i18nInstance.global.t must be a function");
-	if (!i18nInstance.global.te || typeof i18nInstance.global.te !== "function") throw new Error("i18nInstance.global.te must be a function");
+	if (!("global" in i18nInstance) || !i18nInstance.global || typeof i18nInstance.global !== "object") throw new Error("i18nInstance must have a global property");
+	const global = i18nInstance.global;
+	if (!("t" in global) || typeof global.t !== "function") throw new Error("i18nInstance.global.t must be a function");
+	if (!("te" in global) || typeof global.te !== "function") throw new Error("i18nInstance.global.te must be a function");
+}
+function createRuiI8nPlugin(i18nInstance) {
+	assertI18nInstance(i18nInstance);
+	const { global } = i18nInstance;
 	return { install: (app) => {
 		app.provide(RUI_I18N_INJECTION_KEY, {
-			t: i18nInstance.global.t.bind(i18nInstance.global),
-			te: i18nInstance.global.te.bind(i18nInstance.global)
+			t: global.t.bind(global),
+			te: global.te.bind(global)
 		});
 	} };
 }