npm - admins-components - Versions diffs - 9.0.13 → 9.0.14 - Mend

admins-components 9.0.13 → 9.0.14

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

package/dist/admins-components11.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"admins-components11.js","names":[],"sources":["../src/components/Calendar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { calendarConfigDefaults, type CalendarConfig } from '@/types/datepickers'\n\nexport { calendarConfigDefaults }\nexport type { CalendarConfig }\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, useTemplateRef, nextTick } from 'vue'\nimport { formatDate, parseDate } from '@/utils/date'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<{ modelValue: string \| null; config?: CalendarConfig }>(), {\n config: () => ({ ...calendarConfigDefaults }),\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string \| null]\n confirm: [value: string \| null]\n}>()\n\nconst cfg = computed(() => ({ ...calendarConfigDefaults, ...props.config }))\n\nconst DAYS_PER_PAGE = 5 * 7\n\nconst outputFormat = computed(\n () => cfg.value.format ?? (cfg.value.showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'),\n)\n\nfunction parseModelValue(val: string \| null): Date \| null {\n return val ? parseDate(val, outputFormat.value) : null\n}\n\nconst initial = parseModelValue(props.modelValue)\nconst currentMonth = ref(initial?.getMonth() ?? new Date().getMonth())\nconst currentYear = ref(initial?.getFullYear() ?? new Date().getFullYear())\nconst selectedDate = ref<Date \| null>(initial)\nconst hours = ref(initial?.getHours() ?? 0)\nconst minutes = ref(initial?.getMinutes() ?? 0)\nconst activePicker = ref<'year' \| 'month' \| null>(null)\n\nwatch(\n () => props.modelValue,\n (val) => {\n const parsed = parseModelValue(val ?? null)\n if (parsed) {\n selectedDate.value = parsed\n currentMonth.value = parsed.getMonth()\n currentYear.value = parsed.getFullYear()\n hours.value = parsed.getHours()\n minutes.value = parsed.getMinutes()\n } else {\n selectedDate.value = null\n }\n },\n)\n\n// Locale\nconst weekDays = computed(() =>\n Array.from({ length: 7 }, (_, i) =>\n new Date(2024, 0, i + 1).toLocaleDateString(cfg.value.locale, { weekday: 'narrow' }),\n ),\n)\nconst monthName = computed(() =>\n new Date(currentYear.value, currentMonth.value).toLocaleDateString(cfg.value.locale, {\n month: 'long',\n }),\n)\nconst monthNames = computed(() =>\n Array.from({ length: 12 }, (_, i) =>\n new Date(2024, i).toLocaleDateString(cfg.value.locale, { month: 'long' }),\n ),\n)\n\n// Days grid\nconst calendarDays = computed(() => {\n const first = new Date(currentYear.value, currentMonth.value, 1)\n const last = new Date(currentYear.value, currentMonth.value + 1, 0)\n const offset = (first.getDay() + 6) % 7\n const days: { date: Date; currentMonth: boolean; disabled: boolean }[] = []\n\n for (let i = offset - 1; i >= 0; i--)\n days.push({\n date: new Date(currentYear.value, currentMonth.value, -i),\n currentMonth: false,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value, -i)),\n })\n for (let i = 1; i <= last.getDate(); i++)\n days.push({\n date: new Date(currentYear.value, currentMonth.value, i),\n currentMonth: true,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value, i)),\n })\n for (let i = 1; days.length < DAYS_PER_PAGE; i++)\n days.push({\n date: new Date(currentYear.value, currentMonth.value + 1, i),\n currentMonth: false,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value + 1, i)),\n })\n\n return days\n})\n\n// ISO 8601 week number\nfunction getIsoWeekNumber(d: Date) {\n const target = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))\n const dayNum = (target.getUTCDay() + 6) % 7\n target.setUTCDate(target.getUTCDate() - dayNum + 3)\n const firstThursday = new Date(Date.UTC(target.getUTCFullYear(), 0, 4))\n const diff = (target.getTime() - firstThursday.getTime()) / 86400000\n return 1 + Math.round((diff - 3 + ((firstThursday.getUTCDay() + 6) % 7)) / 7)\n}\n\nconst weekNumbers = computed(() => {\n const weeks: number[] = []\n for (let row = 0; row < 6; row++) {\n const firstDayOfRow = calendarDays.value[row * 7]?.date\n weeks.push(firstDayOfRow ? getIsoWeekNumber(firstDayOfRow) : 0)\n }\n return weeks\n})\n\n// Helpers\nfunction stripTime(d: Date) {\n return new Date(d.getFullYear(), d.getMonth(), d.getDate())\n}\nfunction isDisabled(d: Date) {\n return (\n (cfg.value.minDate && d < stripTime(cfg.value.minDate)) \|\|\n (cfg.value.maxDate && d > stripTime(cfg.value.maxDate)) \|\|\n false\n )\n}\nfunction isWeekend(d: Date) {\n return d.getDay() === 0 \|\| d.getDay() === 6\n}\nfunction isSameDay(a: Date, b: Date \| null) {\n return (\n !!b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n )\n}\nfunction isToday(d: Date) {\n return isSameDay(d, new Date())\n}\n\n// Navigation\nfunction navigate(delta: number) {\n const d = new Date(currentYear.value, currentMonth.value + delta, 1)\n currentYear.value = d.getFullYear()\n currentMonth.value = d.getMonth()\n}\n\nfunction backToDayPicker() {\n activePicker.value = null\n}\n\nfunction onPrev() {\n if (activePicker.value) backToDayPicker()\n else navigate(-1)\n}\n\nfunction onNext() {\n if (activePicker.value) backToDayPicker()\n else navigate(1)\n}\n\n// Pickers\nconst yearList = computed(() =>\n Array.from({ length: new Date().getFullYear() + 3 - 2000 + 1 }, (_, i) => 2000 + i),\n)\nconst yearPickerRef = useTemplateRef<HTMLElement>('yearPickerRef')\n\nfunction togglePicker(picker: 'year' \| 'month') {\n activePicker.value = activePicker.value === picker ? null : picker\n if (activePicker.value === 'year') {\n nextTick(() => {\n const container = yearPickerRef.value\n const el = container?.querySelector('.dp-picker-item--selected') as HTMLElement \| null\n if (el && container) {\n container.scrollTop = el.offsetTop - container.offsetHeight / 2 + el.offsetHeight / 2\n } else if (container) {\n container.scrollTop = container.scrollHeight\n }\n })\n }\n}\n\nfunction selectYear(year: number) {\n currentYear.value = year\n activePicker.value = null\n}\nfunction selectMonth(month: number) {\n currentMonth.value = month\n activePicker.value = null\n}\n\n// Selection & emit\nfunction selectDay(day: { date: Date; disabled: boolean }) {\n if (day.disabled) return\n selectedDate.value = new Date(day.date)\n emitValue()\n if (cfg.value.showTime) {\n nextTick(() => hoursInput.value?.focus())\n }\n}\n\nfunction emitValue() {\n if (!selectedDate.value) {\n emit('update:modelValue', null)\n return\n }\n const result = new Date(selectedDate.value)\n if (cfg.value.showTime) result.setHours(hours.value, minutes.value, 0, 0)\n else result.setHours(0, 0, 0, 0)\n emit('update:modelValue', formatDate(result, outputFormat.value))\n}\n\nfunction onClear() {\n selectedDate.value = null\n hours.value = 0\n minutes.value = 0\n emit('update:modelValue', null)\n}\n\n// Time input\nfunction createTimeField(max: number, valueRef: { value: number }) {\n return computed({\n get: () => String(valueRef.value).padStart(2, '0'),\n set: (val: string) => {\n valueRef.value = Math.min(max, Math.max(0, parseInt(val) \|\| 0))\n },\n })\n}\n\nconst formattedHours = createTimeField(23, hours)\nconst formattedMinutes = createTimeField(59, minutes)\nconst hoursInput = useTemplateRef<HTMLInputElement>('hoursInput')\nconst minutesInput = useTemplateRef<HTMLInputElement>('minutesInput')\n\nfunction onTimeInput(field: 'hours' \| 'minutes', event: Event) {\n const el = event.target as HTMLInputElement\n if (field === 'hours') {\n formattedHours.value = el.value\n if (el.value.length >= 2) {\n minutesInput.value?.focus()\n minutesInput.value?.select()\n }\n } else {\n formattedMinutes.value = el.value\n if (el.value.length >= 2) el.blur()\n }\n emitValue()\n}\n</script>\n\n<template>\n <div class=\"dp-calendar ac-component\">\n <div class=\"dp-header\">\n <button\n class=\"dp-nav-btn\"\n type=\"button\"\n :aria-label=\"activePicker ? 'Back to days' : 'Previous'\"\n @click=\"onPrev\"\n >\n <i class=\"fa-solid fa-chevron-left\"></i>\n </button>\n <div class=\"dp-header-labels\">\n <span class=\"dp-header-labels--item\" @click=\"togglePicker('year')\">{{ currentYear }}</span>\n <span class=\"dp-header-labels--item\" @click=\"togglePicker('month')\">{{ monthName }}</span>\n </div>\n <button\n class=\"dp-nav-btn\"\n type=\"button\"\n :aria-label=\"activePicker ? 'Back to days' : 'Next'\"\n :class=\"{ 'dp-nav-btn--spacer': activePicker !== null }\"\n :aria-hidden=\"activePicker ? 'true' : 'false'\"\n @click=\"onNext\"\n >\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n </div>\n\n <div\n class=\"dp-body\"\n :class=\"{ 'dp-body--has-footer': cfg.showTime \|\| cfg.showOkButton \|\| cfg.showClearButton }\"\n >\n <!-- Year picker -->\n <div\n v-if=\"activePicker === 'year'\"\n ref=\"yearPickerRef\"\n class=\"dp-picker-grid dp-picker-grid--4col dp-picker-grid--scrollable c-scroll\"\n >\n <button\n v-for=\"y in yearList\"\n :key=\"y\"\n type=\"button\"\n class=\"dp-picker-item\"\n :class=\"{\n 'dp-picker-item--selected': y === currentYear,\n 'dp-picker-item--today': y === new Date().getFullYear(),\n }\"\n @click=\"selectYear(y)\"\n >\n {{ y }}\n </button>\n </div>\n\n <!-- Month picker -->\n <div\n v-else-if=\"activePicker === 'month'\"\n class=\"dp-picker-grid dp-month-picker dp-picker-grid--3col\"\n >\n <button\n v-for=\"(name, idx) in monthNames\"\n :key=\"idx\"\n type=\"button\"\n class=\"dp-picker-item\"\n :class=\"{\n 'dp-picker-item--selected': idx === currentMonth,\n 'dp-picker-item--today':\n idx === new Date().getMonth() && currentYear === new Date().getFullYear(),\n }\"\n @click=\"selectMonth(idx)\"\n >\n {{ name }}\n </button>\n </div>\n\n <!-- Day picker -->\n <template v-else>\n <div class=\"dp-weekdays\" :class=\"{ 'dp-weekdays--has-week': cfg.showWeekNumber }\">\n <span v-if=\"cfg.showWeekNumber\" class=\"dp-weekday dp-weekday--week\"></span>\n <span v-for=\"d in weekDays\" :key=\"d\" class=\"dp-weekday\">{{ d }}</span>\n </div>\n <div\n class=\"dp-picker-grid\"\n :class=\"cfg.showWeekNumber ? 'dp-picker-grid--8col' : 'dp-picker-grid--7col'\"\n >\n <template v-for=\"(day, i) in calendarDays\" :key=\"i\">\n <span\n v-if=\"cfg.showWeekNumber && Number(i) % 7 === 0\"\n class=\"dp-week-number\"\n :class=\"{\n 'dp-week-number--other': !day.currentMonth && !calendarDays[Number(i) + 7]?.currentMonth,\n }\"\n v-tooltip=\"`${weekNumbers[Math.floor(Number(i) / 7)]}. hét`\"\n >\n {{ weekNumbers[Math.floor(Number(i) / 7)] }}.\n </span>\n <button\n type=\"button\"\n class=\"dp-picker-item dp-picker-item--circle\"\n :class=\"{\n 'dp-picker-item--other': !day.currentMonth,\n 'dp-picker-item--selected': isSameDay(day.date, selectedDate),\n 'dp-picker-item--today': isToday(day.date),\n 'dp-picker-item--disabled': day.disabled,\n 'dp-picker-item--weekend': cfg.highlightWeekends && isWeekend(day.date),\n }\"\n :disabled=\"day.disabled\"\n @click=\"selectDay(day)\"\n >\n {{ day.date.getDate() }}\n </button>\n </template>\n </div>\n\n <div v-if=\"cfg.showTime \|\| cfg.showOkButton \|\| cfg.showClearButton\" class=\"c-footer\">\n <template v-if=\"cfg.showTime\">\n <label class=\"dp-time-label\" for=\"dp-hours\">Idő</label>\n <div class=\"dp-time-inputs\">\n <input\n id=\"dp-hours\"\n ref=\"hoursInput\"\n type=\"number\"\n class=\"c-focus dp-time-input\"\n :value=\"formattedHours\"\n :disabled=\"!selectedDate\"\n min=\"0\"\n max=\"23\"\n @input=\"onTimeInput('hours', $event)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n <span class=\"dp-time-sep\">:</span>\n <input\n id=\"dp-minutes\"\n ref=\"minutesInput\"\n type=\"number\"\n class=\"c-focus dp-time-input\"\n :value=\"formattedMinutes\"\n :disabled=\"!selectedDate\"\n min=\"0\"\n max=\"59\"\n @input=\"onTimeInput('minutes', $event)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n </div>\n </template>\n <Button\n v-if=\"cfg.showClearButton\"\n label=\"Törlés\"\n @click=\"onClear\"\n outline\n :disabled=\"!selectedDate\"\n />\n <Button\n v-if=\"cfg.showOkButton\"\n label=\"OK\"\n type=\"success\"\n @click=\"emit('confirm', modelValue)\"\n :disabled=\"!selectedDate\"\n />\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/calendar.scss\"></style>\n<style lang=\"scss\" src=\"@/styles/components/datepickers.scss\"></style>\n"],"mappings":""}
1	+ {"version":3,"file":"admins-components11.js","names":[],"sources":["../src/components/Calendar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { calendarConfigDefaults, type CalendarConfig } from '@/types/datepickers'\n\nexport { calendarConfigDefaults }\nexport type { CalendarConfig }\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, useTemplateRef, nextTick } from 'vue'\nimport { formatDate, parseDate } from '@/utils/date'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<{ modelValue: string \| null; config?: CalendarConfig }>(), {\n config: () => ({ ...calendarConfigDefaults }),\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string \| null]\n confirm: [value: string \| null]\n}>()\n\nconst cfg = computed(() => ({ ...calendarConfigDefaults, ...props.config }))\n\nconst DAYS_PER_PAGE = 5 * 7\n\nconst outputFormat = computed(\n () => cfg.value.format ?? (cfg.value.showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'),\n)\n\nfunction parseModelValue(val: string \| null): Date \| null {\n return val ? parseDate(val, outputFormat.value) : null\n}\n\nconst initial = parseModelValue(props.modelValue)\nconst currentMonth = ref(initial?.getMonth() ?? new Date().getMonth())\nconst currentYear = ref(initial?.getFullYear() ?? new Date().getFullYear())\nconst selectedDate = ref<Date \| null>(initial)\nconst hours = ref(initial?.getHours() ?? 0)\nconst minutes = ref(initial?.getMinutes() ?? 0)\nconst activePicker = ref<'year' \| 'month' \| null>(null)\n\nwatch(\n () => props.modelValue,\n (val) => {\n const parsed = parseModelValue(val ?? null)\n if (parsed) {\n selectedDate.value = parsed\n currentMonth.value = parsed.getMonth()\n currentYear.value = parsed.getFullYear()\n hours.value = parsed.getHours()\n minutes.value = parsed.getMinutes()\n } else {\n selectedDate.value = null\n }\n },\n)\n\n// Locale\nconst weekDays = computed(() =>\n Array.from({ length: 7 }, (_, i) =>\n new Date(2024, 0, i + 1).toLocaleDateString(cfg.value.locale, { weekday: 'narrow' }),\n ),\n)\nconst monthName = computed(() =>\n new Date(currentYear.value, currentMonth.value).toLocaleDateString(cfg.value.locale, {\n month: 'long',\n }),\n)\nconst monthNames = computed(() =>\n Array.from({ length: 12 }, (_, i) =>\n new Date(2024, i).toLocaleDateString(cfg.value.locale, { month: 'long' }),\n ),\n)\n\n// Days grid\nconst calendarDays = computed(() => {\n const first = new Date(currentYear.value, currentMonth.value, 1)\n const last = new Date(currentYear.value, currentMonth.value + 1, 0)\n const offset = (first.getDay() + 6) % 7\n const days: { date: Date; currentMonth: boolean; disabled: boolean }[] = []\n\n for (let i = offset - 1; i >= 0; i--)\n days.push({\n date: new Date(currentYear.value, currentMonth.value, -i),\n currentMonth: false,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value, -i)),\n })\n for (let i = 1; i <= last.getDate(); i++)\n days.push({\n date: new Date(currentYear.value, currentMonth.value, i),\n currentMonth: true,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value, i)),\n })\n for (let i = 1; days.length < DAYS_PER_PAGE; i++)\n days.push({\n date: new Date(currentYear.value, currentMonth.value + 1, i),\n currentMonth: false,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value + 1, i)),\n })\n\n return days\n})\n\n// ISO 8601 week number\nfunction getIsoWeekNumber(d: Date) {\n const target = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))\n const dayNum = (target.getUTCDay() + 6) % 7\n target.setUTCDate(target.getUTCDate() - dayNum + 3)\n const firstThursday = new Date(Date.UTC(target.getUTCFullYear(), 0, 4))\n const diff = (target.getTime() - firstThursday.getTime()) / 86400000\n return 1 + Math.round((diff - 3 + ((firstThursday.getUTCDay() + 6) % 7)) / 7)\n}\n\nconst weekNumbers = computed(() => {\n const weeks: number[] = []\n for (let row = 0; row < 6; row++) {\n const firstDayOfRow = calendarDays.value[row * 7]?.date\n weeks.push(firstDayOfRow ? getIsoWeekNumber(firstDayOfRow) : 0)\n }\n return weeks\n})\n\n// Helpers\nfunction stripTime(d: Date) {\n return new Date(d.getFullYear(), d.getMonth(), d.getDate())\n}\nfunction isDisabled(d: Date) {\n return (\n (cfg.value.minDate && d < stripTime(cfg.value.minDate)) \|\|\n (cfg.value.maxDate && d > stripTime(cfg.value.maxDate)) \|\|\n false\n )\n}\nfunction isWeekend(d: Date) {\n return d.getDay() === 0 \|\| d.getDay() === 6\n}\nfunction isSameDay(a: Date, b: Date \| null) {\n return (\n !!b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n )\n}\nfunction isToday(d: Date) {\n return isSameDay(d, new Date())\n}\n\n// Navigation\nfunction navigate(delta: number) {\n const d = new Date(currentYear.value, currentMonth.value + delta, 1)\n currentYear.value = d.getFullYear()\n currentMonth.value = d.getMonth()\n}\n\nfunction backToDayPicker() {\n activePicker.value = null\n}\n\nfunction onPrev() {\n if (activePicker.value) backToDayPicker()\n else navigate(-1)\n}\n\nfunction onNext() {\n if (activePicker.value) backToDayPicker()\n else navigate(1)\n}\n\n// Pickers\nconst yearList = computed(() =>\n Array.from({ length: new Date().getFullYear() + 3 - 2000 + 1 }, (_, i) => 2000 + i),\n)\nconst yearPickerRef = useTemplateRef<HTMLElement>('yearPickerRef')\n\nfunction togglePicker(picker: 'year' \| 'month') {\n activePicker.value = activePicker.value === picker ? null : picker\n if (activePicker.value === 'year') {\n nextTick(() => {\n const container = yearPickerRef.value\n const el = container?.querySelector('.dp-picker-item--selected') as HTMLElement \| null\n if (el && container) {\n container.scrollTop = el.offsetTop - container.offsetHeight / 2 + el.offsetHeight / 2\n } else if (container) {\n container.scrollTop = container.scrollHeight\n }\n })\n }\n}\n\nfunction selectYear(year: number) {\n currentYear.value = year\n activePicker.value = null\n}\nfunction selectMonth(month: number) {\n currentMonth.value = month\n activePicker.value = null\n}\n\n// Selection & emit\nfunction selectDay(day: { date: Date; disabled: boolean }) {\n if (day.disabled) return\n selectedDate.value = new Date(day.date)\n emitValue()\n if (cfg.value.showTime) {\n nextTick(() => hoursInput.value?.focus())\n }\n}\n\nfunction emitValue() {\n if (!selectedDate.value) {\n emit('update:modelValue', null)\n return\n }\n const result = new Date(selectedDate.value)\n if (cfg.value.showTime) result.setHours(hours.value, minutes.value, 0, 0)\n else result.setHours(0, 0, 0, 0)\n emit('update:modelValue', formatDate(result, outputFormat.value))\n}\n\nfunction onClear() {\n selectedDate.value = null\n hours.value = 0\n minutes.value = 0\n emit('update:modelValue', null)\n}\n\n// Time input\nfunction createTimeField(max: number, valueRef: { value: number }) {\n return computed({\n get: () => String(valueRef.value).padStart(2, '0'),\n set: (val: string) => {\n valueRef.value = Math.min(max, Math.max(0, parseInt(val) \|\| 0))\n },\n })\n}\n\nconst formattedHours = createTimeField(23, hours)\nconst formattedMinutes = createTimeField(59, minutes)\nconst hoursInput = useTemplateRef<HTMLInputElement>('hoursInput')\nconst minutesInput = useTemplateRef<HTMLInputElement>('minutesInput')\n\nfunction onTimeInput(field: 'hours' \| 'minutes', event: Event) {\n const el = event.target as HTMLInputElement\n if (field === 'hours') {\n formattedHours.value = el.value\n if (el.value.length >= 2) {\n minutesInput.value?.focus()\n minutesInput.value?.select()\n }\n } else {\n formattedMinutes.value = el.value\n if (el.value.length >= 2) el.blur()\n }\n emitValue()\n}\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"dp-calendar\">\n <div class=\"dp-header\">\n <button\n class=\"dp-nav-btn\"\n type=\"button\"\n :aria-label=\"activePicker ? 'Back to days' : 'Previous'\"\n @click=\"onPrev\"\n >\n <i class=\"fa-solid fa-chevron-left\"></i>\n </button>\n <div class=\"dp-header-labels\">\n <span class=\"dp-header-labels--item\" @click=\"togglePicker('year')\">{{\n currentYear\n }}</span>\n <span class=\"dp-header-labels--item\" @click=\"togglePicker('month')\">{{ monthName }}</span>\n </div>\n <button\n class=\"dp-nav-btn\"\n type=\"button\"\n :aria-label=\"activePicker ? 'Back to days' : 'Next'\"\n :class=\"{ 'dp-nav-btn--spacer': activePicker !== null }\"\n :aria-hidden=\"activePicker ? 'true' : 'false'\"\n @click=\"onNext\"\n >\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n </div>\n\n <div\n class=\"dp-body\"\n :class=\"{ 'dp-body--has-footer': cfg.showTime \|\| cfg.showOkButton \|\| cfg.showClearButton }\"\n >\n <!-- Year picker -->\n <div\n v-if=\"activePicker === 'year'\"\n ref=\"yearPickerRef\"\n class=\"dp-picker-grid dp-picker-grid--4col dp-picker-grid--scrollable c-scroll\"\n >\n <button\n v-for=\"y in yearList\"\n :key=\"y\"\n type=\"button\"\n class=\"dp-picker-item\"\n :class=\"{\n 'dp-picker-item--selected': y === currentYear,\n 'dp-picker-item--today': y === new Date().getFullYear(),\n }\"\n @click=\"selectYear(y)\"\n >\n {{ y }}\n </button>\n </div>\n\n <!-- Month picker -->\n <div\n v-else-if=\"activePicker === 'month'\"\n class=\"dp-picker-grid dp-month-picker dp-picker-grid--3col\"\n >\n <button\n v-for=\"(name, idx) in monthNames\"\n :key=\"idx\"\n type=\"button\"\n class=\"dp-picker-item\"\n :class=\"{\n 'dp-picker-item--selected': idx === currentMonth,\n 'dp-picker-item--today':\n idx === new Date().getMonth() && currentYear === new Date().getFullYear(),\n }\"\n @click=\"selectMonth(idx)\"\n >\n {{ name }}\n </button>\n </div>\n\n <!-- Day picker -->\n <template v-else>\n <div class=\"dp-weekdays\" :class=\"{ 'dp-weekdays--has-week': cfg.showWeekNumber }\">\n <span v-if=\"cfg.showWeekNumber\" class=\"dp-weekday dp-weekday--week\"></span>\n <span v-for=\"d in weekDays\" :key=\"d\" class=\"dp-weekday\">{{ d }}</span>\n </div>\n <div\n class=\"dp-picker-grid\"\n :class=\"cfg.showWeekNumber ? 'dp-picker-grid--8col' : 'dp-picker-grid--7col'\"\n >\n <template v-for=\"(day, i) in calendarDays\" :key=\"i\">\n <span\n v-if=\"cfg.showWeekNumber && Number(i) % 7 === 0\"\n class=\"dp-week-number\"\n :class=\"{\n 'dp-week-number--other':\n !day.currentMonth && !calendarDays[Number(i) + 7]?.currentMonth,\n }\"\n v-tooltip=\"`${weekNumbers[Math.floor(Number(i) / 7)]}. hét`\"\n >\n {{ weekNumbers[Math.floor(Number(i) / 7)] }}.\n </span>\n <button\n type=\"button\"\n class=\"dp-picker-item dp-picker-item--circle\"\n :class=\"{\n 'dp-picker-item--other': !day.currentMonth,\n 'dp-picker-item--selected': isSameDay(day.date, selectedDate),\n 'dp-picker-item--today': isToday(day.date),\n 'dp-picker-item--disabled': day.disabled,\n 'dp-picker-item--weekend': cfg.highlightWeekends && isWeekend(day.date),\n }\"\n :disabled=\"day.disabled\"\n @click=\"selectDay(day)\"\n >\n {{ day.date.getDate() }}\n </button>\n </template>\n </div>\n\n <div v-if=\"cfg.showTime \|\| cfg.showOkButton \|\| cfg.showClearButton\" class=\"c-footer\">\n <template v-if=\"cfg.showTime\">\n <label class=\"dp-time-label\" for=\"dp-hours\">Idő</label>\n <div class=\"dp-time-inputs\">\n <input\n id=\"dp-hours\"\n ref=\"hoursInput\"\n type=\"number\"\n class=\"c-focus dp-time-input\"\n :value=\"formattedHours\"\n :disabled=\"!selectedDate\"\n min=\"0\"\n max=\"23\"\n @input=\"onTimeInput('hours', $event)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n <span class=\"dp-time-sep\">:</span>\n <input\n id=\"dp-minutes\"\n ref=\"minutesInput\"\n type=\"number\"\n class=\"c-focus dp-time-input\"\n :value=\"formattedMinutes\"\n :disabled=\"!selectedDate\"\n min=\"0\"\n max=\"59\"\n @input=\"onTimeInput('minutes', $event)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n </div>\n </template>\n <Button\n v-if=\"cfg.showClearButton\"\n label=\"Törlés\"\n @click=\"onClear\"\n outline\n :disabled=\"!selectedDate\"\n />\n <Button\n v-if=\"cfg.showOkButton\"\n label=\"OK\"\n type=\"success\"\n @click=\"emit('confirm', modelValue)\"\n :disabled=\"!selectedDate\"\n />\n </div>\n </template>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/calendar.scss\"></style>\n<style lang=\"scss\" src=\"@/styles/components/datepickers.scss\"></style>\n"],"mappings":""}

package/dist/admins-components13.js CHANGED Viewed

@@ -4,12 +4,12 @@ import a from "./admins-components11.js";
 import { useDropdownAnchor as o } from "./admins-components12.js";
 import { Teleport as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as _, openBlock as v, ref as y, unref as b, useId as x, watch as S } from "vue";
 //#region src/components/DatePicker.vue?vue&type=script&setup=true&lang.ts
-var C = [
+var C = { class: "ac-component" }, w = [
 	"id",
 	"value",
 	"placeholder",
 	"maxlength"
-], w = /* @__PURE__ */ m({
+], T = /* @__PURE__ */ m({
 	__name: "DatePicker",
 	props: {
 		modelValue: { default: null },
@@ -17,67 +17,67 @@ var C = [
 		id: { default: () => `dp-input-${x()}` }
 	},
 	emits: ["update:modelValue"],
-	setup(m, { expose: x, emit: w }) {
-		let T = m, E = c(() => ({
+	setup(m, { expose: x, emit: T }) {
+		let E = m, D = c(() => ({
 			...i,
-			...T.config
-		})), D = w, O = y(null), k = y(null), { isOpen: A, dropdownStyle: j } = o(O, k), M = y(null), N = "YMDHms", P = c(() => E.value.format ?? (E.value.showTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD")), F = y(e(T.modelValue?.local ?? T.modelValue?.utc) ? t(e(T.modelValue?.local ?? T.modelValue?.utc), P.value) : "");
-		S(() => T.modelValue, (n) => {
+			...E.config
+		})), O = T, k = y(null), A = y(null), { isOpen: j, dropdownStyle: M } = o(k, A), N = y(null), P = "YMDHms", F = c(() => D.value.format ?? (D.value.showTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD")), I = y(e(E.modelValue?.local ?? E.modelValue?.utc) ? t(e(E.modelValue?.local ?? E.modelValue?.utc), F.value) : "");
+		S(() => E.modelValue, (n) => {
 			let r = e(n?.local ?? n?.utc);
-			F.value = r ? t(r, P.value) : "";
+			I.value = r ? t(r, F.value) : "";
 		});
-		function I(e) {
+		function L(e) {
 			let t = "", n = 0;
-			for (let r = 0; r < P.value.length && n < e.length; r++) t += N.includes(P.value[r]) ? e[n++] : P.value[r];
+			for (let r = 0; r < F.value.length && n < e.length; r++) t += P.includes(F.value[r]) ? e[n++] : F.value[r];
 			return t;
 		}
-		function L(e) {
+		function R(e) {
 			let t = e;
-			for (let e = t.length; e < P.value.length; e++) t += N.includes(P.value[e]) ? "0" : P.value[e];
+			for (let e = t.length; e < F.value.length; e++) t += P.includes(F.value[e]) ? "0" : F.value[e];
 			return t;
 		}
-		function R(e) {
-			if (e.length !== P.value.length) return !1;
-			for (let t = 0; t < P.value.length; t++) if (N.includes(P.value[t])) {
+		function z(e) {
+			if (e.length !== F.value.length) return !1;
+			for (let t = 0; t < F.value.length; t++) if (P.includes(F.value[t])) {
 				if (!/\d/.test(e[t])) return !1;
-			} else if (e[t] !== P.value[t]) return !1;
+			} else if (e[t] !== F.value[t]) return !1;
 			return !0;
 		}
-		function z(e) {
+		function B(e) {
 			if (!e) {
-				F.value = "", D("update:modelValue", null);
+				I.value = "", O("update:modelValue", null);
 				return;
 			}
-			F.value = e;
-			let t = r(e, P.value);
-			D("update:modelValue", t ? {
+			I.value = e;
+			let t = r(e, F.value);
+			O("update:modelValue", t ? {
 				local: t,
-				utc: n(t, E.value.showTime)
+				utc: n(t, D.value.showTime)
 			} : null);
 		}
-		function B(e) {
+		function V(e) {
 			let t = e.target, n = t.selectionStart ?? 0, r = t.value.replace(/\D/g, "");
-			if (A.value = !1, !r) {
-				z(null), t.value = "";
+			if (j.value = !1, !r) {
+				B(null), t.value = "";
 				return;
 			}
-			let i = I(r);
-			if (i.length < P.value.length && !N.includes(P.value[i.length]) && (i += P.value[i.length]), E.value.showTime && i.length >= 10 && i.length < P.value.length && i.replace(/\D/g, "").length <= 8) {
-				let e = L(i);
-				t.value = e, F.value = e;
+			let i = L(r);
+			if (i.length < F.value.length && !P.includes(F.value[i.length]) && (i += F.value[i.length]), D.value.showTime && i.length >= 10 && i.length < F.value.length && i.replace(/\D/g, "").length <= 8) {
+				let e = R(i);
+				t.value = e, I.value = e;
 				let r = Math.min(n, i.length);
-				h(() => t.setSelectionRange(r, r)), R(e) && z(e);
+				h(() => t.setSelectionRange(r, r)), z(e) && B(e);
 				return;
 			}
-			t.value = i, F.value = i;
+			t.value = i, I.value = i;
 			let a = Math.min(n, i.length);
-			for (; a < i.length && !N.includes(P.value[a]);) a++;
-			h(() => t.setSelectionRange(a, a)), R(i) && z(i);
+			for (; a < i.length && !P.includes(F.value[a]);) a++;
+			h(() => t.setSelectionRange(a, a)), z(i) && B(i);
 		}
-		function V() {
-			F.value && !R(F.value) && (F.value = T.modelValue?.local ? t(T.modelValue.local, P.value) : "");
+		function H() {
+			I.value && !z(I.value) && (I.value = E.modelValue?.local ? t(E.modelValue.local, F.value) : "");
 		}
-		function H(e) {
+		function U(e) {
 			e.ctrlKey || e.metaKey || ![
 				"Backspace",
 				"Delete",
@@ -88,59 +88,59 @@ var C = [
 				"End"
 			].includes(e.key) && !/^\d$/.test(e.key) && e.preventDefault();
 		}
-		function U(e) {
-			z(e), E.value.showTime || (A.value = !1);
+		function W(e) {
+			B(e), D.value.showTime || (j.value = !1);
 		}
-		function W() {
-			A.value = !0, h(() => M.value?.focus());
+		function G() {
+			j.value = !0, h(() => N.value?.focus());
 		}
-		return x({ focusAndOpen: W }), (e, t) => (v(), d("div", {
+		return x({ focusAndOpen: G }), (e, t) => (v(), d("div", C, [f("div", {
 			ref_key: "wrapperRef",
-			ref: O,
-			class: "drp-wrapper ac-component"
+			ref: k,
+			class: "drp-wrapper"
 		}, [f("div", { class: g(["c-input-row", {
-			"c-input-row--sm": E.value.size === "small",
-			"c-input-row--lg": E.value.size === "large"
+			"c-input-row--sm": D.value.size === "small",
+			"c-input-row--lg": D.value.size === "large"
 		}]) }, [
 			f("input", {
 				ref_key: "inputRef",
-				ref: M,
+				ref: N,
 				type: "text",
 				id: m.id,
 				class: "c-input dp-input pr-0",
 				inputmode: "numeric",
-				value: F.value,
-				placeholder: E.value.placeholder,
-				maxlength: P.value.length,
-				onInput: B,
-				onBlur: V,
-				onKeydown: H
-			}, null, 40, C),
+				value: I.value,
+				placeholder: D.value.placeholder,
+				maxlength: F.value.length,
+				onInput: V,
+				onBlur: H,
+				onKeydown: U
+			}, null, 40, w),
 			f("button", {
 				type: "button",
-				class: g(["c-icon-btn c-icon-btn--clear", { "c-icon-btn--hidden": !F.value }]),
-				onClick: t[0] ||= (e) => z(null),
+				class: g(["c-icon-btn dp-clear c-icon-btn--clear", { "c-icon-btn--hidden": !I.value }]),
+				onClick: t[0] ||= (e) => B(null),
 				"aria-label": "Törlés"
 			}, [...t[3] ||= [f("i", { class: "fa-solid fa-fw fa-xmark" }, null, -1)]], 2),
 			f("button", {
 				type: "button",
 				class: "c-icon-btn c-icon-btn--calendar",
-				onClick: t[1] ||= (e) => A.value = !b(A),
+				onClick: t[1] ||= (e) => j.value = !b(j),
 				"aria-label": "Naptár megnyitása"
 			}, [...t[4] ||= [f("i", { class: "fa-regular fa-fw fa-calendar" }, null, -1)]])
-		], 2), (v(), l(s, { to: "body" }, [b(A) ? (v(), d("div", {
+		], 2), (v(), l(s, { to: "body" }, [b(j) ? (v(), d("div", {
 			key: 0,
 			ref_key: "dropdownRef",
-			ref: k,
+			ref: A,
 			class: "c-dropdown ac-component",
-			style: _(b(j))
+			style: _(b(M))
 		}, [p(a, {
-			"model-value": F.value || null,
-			config: E.value,
-			"onUpdate:modelValue": U,
-			onConfirm: t[2] ||= (e) => A.value = !1
-		}, null, 8, ["model-value", "config"])], 4)) : u("", !0)]))], 512));
+			"model-value": I.value || null,
+			config: D.value,
+			"onUpdate:modelValue": W,
+			onConfirm: t[2] ||= (e) => j.value = !1
+		}, null, 8, ["model-value", "config"])], 4)) : u("", !0)]))], 512)]));
 	}
 });
 //#endregion
-export { w as default };
+export { T as default };

package/dist/admins-components13.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"admins-components13.js","names":[],"sources":["../src/components/DatePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PickedDate } from '@/types/types'\nimport { datePickerConfigDefaults, type DatePickerConfig } from '@/types/datepickers'\n\nexport { datePickerConfigDefaults, type DatePickerConfig, type PickedDate }\n\nexport interface DatePickerProps {\n modelValue?: PickedDate \| null\n config: DatePickerConfig\n id?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, useId } from 'vue'\nimport Calendar from '@/components/Calendar.vue'\nimport { formatDate, parseDate, localToUTCString, castToDate } from '@/utils/date'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n modelValue: null,\n config: () => ({\n ...datePickerConfigDefaults,\n }),\n id: () => `dp-input-${useId()}`,\n})\n\nconst innerConfig = computed(() => ({\n ...datePickerConfigDefaults,\n ...props.config,\n}))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: PickedDate \| null] }>()\n\nconst wrapperRef = ref<HTMLElement \| null>(null)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef)\nconst inputRef = ref<HTMLInputElement \| null>(null)\nconst DIGITS = 'YMDHms'\nconst format = computed(\n () =>\n innerConfig.value.format ?? (innerConfig.value.showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'),\n)\n\nconst inputValue = ref(\n castToDate(props.modelValue?.local ?? props.modelValue?.utc)\n ? formatDate(castToDate(props.modelValue?.local ?? props.modelValue?.utc)!, format.value)\n : '',\n)\nwatch(\n () => props.modelValue,\n (v) => {\n const d = castToDate(v?.local ?? v?.utc)\n inputValue.value = d ? formatDate(d, format.value) : ''\n },\n)\n\nfunction mask(digits: string): string {\n let r = '',\n di = 0\n for (let i = 0; i < format.value.length && di < digits.length; i++)\n r += DIGITS.includes(format.value[i]!) ? digits[di++] : format.value[i]\n return r\n}\n\nfunction fill(partial: string): string {\n let r = partial\n for (let i = r.length; i < format.value.length; i++)\n r += DIGITS.includes(format.value[i]!) ? '0' : format.value[i]\n return r\n}\n\nfunction valid(val: string): boolean {\n if (val.length !== format.value.length) return false\n for (let i = 0; i < format.value.length; i++) {\n if (DIGITS.includes(format.value[i]!)) {\n if (!/\\d/.test(val[i]!)) return false\n } else if (val[i] !== format.value[i]) return false\n }\n return true\n}\n\nfunction emitParsed(val: string \| null) {\n if (!val) {\n inputValue.value = ''\n emit('update:modelValue', null)\n return\n }\n inputValue.value = val\n const local = parseDate(val, format.value)\n emit(\n 'update:modelValue',\n local ? { local, utc: localToUTCString(local, innerConfig.value.showTime) } : null,\n )\n}\n\n// Input handling\nfunction onInput(e: Event) {\n const el = e.target as HTMLInputElement\n const cursor = el.selectionStart ?? 0\n const raw = el.value.replace(/\\D/g, '')\n isOpen.value = false\n\n if (!raw) {\n emitParsed(null)\n el.value = ''\n return\n }\n\n let masked = mask(raw)\n if (masked.length < format.value.length && !DIGITS.includes(format.value[masked.length]!))\n masked += format.value[masked.length]\n\n // Auto-fill time zeros when date portion is complete\n if (\n innerConfig.value.showTime &&\n masked.length >= 10 &&\n masked.length < format.value.length &&\n masked.replace(/\\D/g, '').length <= 8\n ) {\n const filled = fill(masked)\n el.value = filled\n inputValue.value = filled\n const pos = Math.min(cursor, masked.length)\n nextTick(() => el.setSelectionRange(pos, pos))\n if (valid(filled)) emitParsed(filled)\n return\n }\n\n el.value = masked\n inputValue.value = masked\n let pos = Math.min(cursor, masked.length)\n while (pos < masked.length && !DIGITS.includes(format.value[pos]!)) pos++\n nextTick(() => el.setSelectionRange(pos, pos))\n if (valid(masked)) emitParsed(masked)\n}\n\nfunction onBlur() {\n if (inputValue.value && !valid(inputValue.value))\n inputValue.value = props.modelValue?.local\n ? formatDate(props.modelValue.local, format.value)\n : ''\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n if (e.ctrlKey \|\| e.metaKey) return\n if (\n !['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key) &&\n !/^\\d$/.test(e.key)\n )\n e.preventDefault()\n}\n\nfunction onCalendarUpdate(val: string \| null) {\n emitParsed(val)\n if (!innerConfig.value.showTime) isOpen.value = false\n}\n\nfunction focusAndOpen() {\n isOpen.value = true\n nextTick(() => inputRef.value?.focus())\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n <div ref=\"wrapperRef\" class=\"drp-wrapper ac-component\">\n <div\n class=\"c-input-row\"\n :class=\"{\n 'c-input-row--sm': innerConfig.size === 'small',\n 'c-input-row--lg': innerConfig.size === 'large',\n }\"\n >\n <input\n ref=\"inputRef\"\n type=\"text\"\n :id=\"id\"\n class=\"c-input dp-input pr-0\"\n inputmode=\"numeric\"\n :value=\"inputValue\"\n :placeholder=\"innerConfig.placeholder\"\n :maxlength=\"format.length\"\n @input=\"onInput\"\n @blur=\"onBlur\"\n @keydown=\"onKeydown\"\n />\n <button\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear\"\n :class=\"{ 'c-icon-btn--hidden': !inputValue }\"\n @click=\"emitParsed(null)\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <button\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--calendar\"\n @click=\"isOpen = !isOpen\"\n aria-label=\"Naptár megnyitása\"\n >\n <i class=\"fa-regular fa-fw fa-calendar\"></i>\n </button>\n </div>\n <Teleport to=\"body\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"c-dropdown ac-component\" :style=\"dropdownStyle\">\n <Calendar\n :model-value=\"inputValue \|\| null\"\n :config=\"innerConfig\"\n @update:model-value=\"onCalendarUpdate\"\n @confirm=\"isOpen = false\"\n />\n </div>\n </Teleport>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"admins-components13.js","names":[],"sources":["../src/components/DatePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PickedDate } from '@/types/types'\nimport { datePickerConfigDefaults, type DatePickerConfig } from '@/types/datepickers'\n\nexport { datePickerConfigDefaults, type DatePickerConfig, type PickedDate }\n\nexport interface DatePickerProps {\n modelValue?: PickedDate \| null\n config: DatePickerConfig\n id?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, useId } from 'vue'\nimport Calendar from '@/components/Calendar.vue'\nimport { formatDate, parseDate, localToUTCString, castToDate } from '@/utils/date'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n modelValue: null,\n config: () => ({\n ...datePickerConfigDefaults,\n }),\n id: () => `dp-input-${useId()}`,\n})\n\nconst innerConfig = computed(() => ({\n ...datePickerConfigDefaults,\n ...props.config,\n}))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: PickedDate \| null] }>()\n\nconst wrapperRef = ref<HTMLElement \| null>(null)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef)\nconst inputRef = ref<HTMLInputElement \| null>(null)\nconst DIGITS = 'YMDHms'\nconst format = computed(\n () =>\n innerConfig.value.format ?? (innerConfig.value.showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'),\n)\n\nconst inputValue = ref(\n castToDate(props.modelValue?.local ?? props.modelValue?.utc)\n ? formatDate(castToDate(props.modelValue?.local ?? props.modelValue?.utc)!, format.value)\n : '',\n)\nwatch(\n () => props.modelValue,\n (v) => {\n const d = castToDate(v?.local ?? v?.utc)\n inputValue.value = d ? formatDate(d, format.value) : ''\n },\n)\n\nfunction mask(digits: string): string {\n let r = '',\n di = 0\n for (let i = 0; i < format.value.length && di < digits.length; i++)\n r += DIGITS.includes(format.value[i]!) ? digits[di++] : format.value[i]\n return r\n}\n\nfunction fill(partial: string): string {\n let r = partial\n for (let i = r.length; i < format.value.length; i++)\n r += DIGITS.includes(format.value[i]!) ? '0' : format.value[i]\n return r\n}\n\nfunction valid(val: string): boolean {\n if (val.length !== format.value.length) return false\n for (let i = 0; i < format.value.length; i++) {\n if (DIGITS.includes(format.value[i]!)) {\n if (!/\\d/.test(val[i]!)) return false\n } else if (val[i] !== format.value[i]) return false\n }\n return true\n}\n\nfunction emitParsed(val: string \| null) {\n if (!val) {\n inputValue.value = ''\n emit('update:modelValue', null)\n return\n }\n inputValue.value = val\n const local = parseDate(val, format.value)\n emit(\n 'update:modelValue',\n local ? { local, utc: localToUTCString(local, innerConfig.value.showTime) } : null,\n )\n}\n\n// Input handling\nfunction onInput(e: Event) {\n const el = e.target as HTMLInputElement\n const cursor = el.selectionStart ?? 0\n const raw = el.value.replace(/\\D/g, '')\n isOpen.value = false\n\n if (!raw) {\n emitParsed(null)\n el.value = ''\n return\n }\n\n let masked = mask(raw)\n if (masked.length < format.value.length && !DIGITS.includes(format.value[masked.length]!))\n masked += format.value[masked.length]\n\n // Auto-fill time zeros when date portion is complete\n if (\n innerConfig.value.showTime &&\n masked.length >= 10 &&\n masked.length < format.value.length &&\n masked.replace(/\\D/g, '').length <= 8\n ) {\n const filled = fill(masked)\n el.value = filled\n inputValue.value = filled\n const pos = Math.min(cursor, masked.length)\n nextTick(() => el.setSelectionRange(pos, pos))\n if (valid(filled)) emitParsed(filled)\n return\n }\n\n el.value = masked\n inputValue.value = masked\n let pos = Math.min(cursor, masked.length)\n while (pos < masked.length && !DIGITS.includes(format.value[pos]!)) pos++\n nextTick(() => el.setSelectionRange(pos, pos))\n if (valid(masked)) emitParsed(masked)\n}\n\nfunction onBlur() {\n if (inputValue.value && !valid(inputValue.value))\n inputValue.value = props.modelValue?.local\n ? formatDate(props.modelValue.local, format.value)\n : ''\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n if (e.ctrlKey \|\| e.metaKey) return\n if (\n !['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key) &&\n !/^\\d$/.test(e.key)\n )\n e.preventDefault()\n}\n\nfunction onCalendarUpdate(val: string \| null) {\n emitParsed(val)\n if (!innerConfig.value.showTime) isOpen.value = false\n}\n\nfunction focusAndOpen() {\n isOpen.value = true\n nextTick(() => inputRef.value?.focus())\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"drp-wrapper\">\n <div\n class=\"c-input-row\"\n :class=\"{\n 'c-input-row--sm': innerConfig.size === 'small',\n 'c-input-row--lg': innerConfig.size === 'large',\n }\"\n >\n <input\n ref=\"inputRef\"\n type=\"text\"\n :id=\"id\"\n class=\"c-input dp-input pr-0\"\n inputmode=\"numeric\"\n :value=\"inputValue\"\n :placeholder=\"innerConfig.placeholder\"\n :maxlength=\"format.length\"\n @input=\"onInput\"\n @blur=\"onBlur\"\n @keydown=\"onKeydown\"\n />\n <button\n type=\"button\"\n class=\"c-icon-btn dp-clear c-icon-btn--clear\"\n :class=\"{ 'c-icon-btn--hidden': !inputValue }\"\n @click=\"emitParsed(null)\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <button\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--calendar\"\n @click=\"isOpen = !isOpen\"\n aria-label=\"Naptár megnyitása\"\n >\n <i class=\"fa-regular fa-fw fa-calendar\"></i>\n </button>\n </div>\n <Teleport to=\"body\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"c-dropdown ac-component\" :style=\"dropdownStyle\">\n <Calendar\n :model-value=\"inputValue \|\| null\"\n :config=\"innerConfig\"\n @update:model-value=\"onCalendarUpdate\"\n @confirm=\"isOpen = false\"\n />\n </div>\n </Teleport>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAmBA,IAAM,IAAQ,GAQR,IAAc,SAAgB;GAClC,GAAG;GACH,GAAG,EAAM;EACX,EAAE,GAEI,IAAO,GAEP,IAAa,EAAwB,IAAI,GACzC,IAAc,EAAwB,IAAI,GAC1C,EAAE,WAAQ,qBAAkB,EAAkB,GAAY,CAAW,GACrE,IAAW,EAA6B,IAAI,GAC5C,IAAS,UACT,IAAS,QAEX,EAAY,MAAM,WAAW,EAAY,MAAM,WAAW,qBAAqB,aACnF,GAEM,IAAa,EACjB,EAAW,EAAM,YAAY,SAAS,EAAM,YAAY,GAAG,IACvD,EAAW,EAAW,EAAM,YAAY,SAAS,EAAM,YAAY,GAAG,GAAI,EAAO,KAAK,IACtF,EACN;EACA,QACQ,EAAM,aACX,MAAM;GACL,IAAM,IAAI,EAAW,GAAG,SAAS,GAAG,GAAG;GACvC,EAAW,QAAQ,IAAI,EAAW,GAAG,EAAO,KAAK,IAAI;EACvD,CACF;EAEA,SAAS,EAAK,GAAwB;GACpC,IAAI,IAAI,IACN,IAAK;GACP,KAAK,IAAI,IAAI,GAAG,IAAI,EAAO,MAAM,UAAU,IAAK,EAAO,QAAQ,KAC7D,KAAK,EAAO,SAAS,EAAO,MAAM,EAAG,IAAI,EAAO,OAAQ,EAAO,MAAM;GACvE,OAAO;EACT;EAEA,SAAS,EAAK,GAAyB;GACrC,IAAI,IAAI;GACR,KAAK,IAAI,IAAI,EAAE,QAAQ,IAAI,EAAO,MAAM,QAAQ,KAC9C,KAAK,EAAO,SAAS,EAAO,MAAM,EAAG,IAAI,MAAM,EAAO,MAAM;GAC9D,OAAO;EACT;EAEA,SAAS,EAAM,GAAsB;GACnC,IAAI,EAAI,WAAW,EAAO,MAAM,QAAQ,OAAO;GAC/C,KAAK,IAAI,IAAI,GAAG,IAAI,EAAO,MAAM,QAAQ,KACvC,IAAI,EAAO,SAAS,EAAO,MAAM,EAAG;QAC9B,CAAC,KAAK,KAAK,EAAI,EAAG,GAAG,OAAO;GAAA,OAC3B,IAAI,EAAI,OAAO,EAAO,MAAM,IAAI,OAAO;GAEhD,OAAO;EACT;EAEA,SAAS,EAAW,GAAoB;GACtC,IAAI,CAAC,GAAK;IAER,AADA,EAAW,QAAQ,IACnB,EAAK,qBAAqB,IAAI;IAC9B;GACF;GACA,EAAW,QAAQ;GACnB,IAAM,IAAQ,EAAU,GAAK,EAAO,KAAK;GACzC,EACE,qBACA,IAAQ;IAAE;IAAO,KAAK,EAAiB,GAAO,EAAY,MAAM,QAAQ;GAAE,IAAI,IAChF;EACF;EAGA,SAAS,EAAQ,GAAU;GACzB,IAAM,IAAK,EAAE,QACP,IAAS,EAAG,kBAAkB,GAC9B,IAAM,EAAG,MAAM,QAAQ,OAAO,EAAE;GAGtC,IAFA,EAAO,QAAQ,IAEX,CAAC,GAAK;IAER,AADA,EAAW,IAAI,GACf,EAAG,QAAQ;IACX;GACF;GAEA,IAAI,IAAS,EAAK,CAAG;GAKrB,IAJI,EAAO,SAAS,EAAO,MAAM,UAAU,CAAC,EAAO,SAAS,EAAO,MAAM,EAAO,OAAQ,MACtF,KAAU,EAAO,MAAM,EAAO,UAI9B,EAAY,MAAM,YAClB,EAAO,UAAU,MACjB,EAAO,SAAS,EAAO,MAAM,UAC7B,EAAO,QAAQ,OAAO,EAAE,EAAE,UAAU,GACpC;IACA,IAAM,IAAS,EAAK,CAAM;IAE1B,AADA,EAAG,QAAQ,GACX,EAAW,QAAQ;IACnB,IAAM,IAAM,KAAK,IAAI,GAAQ,EAAO,MAAM;IAE1C,AADA,QAAe,EAAG,kBAAkB,GAAK,CAAG,CAAC,GACzC,EAAM,CAAM,KAAG,EAAW,CAAM;IACpC;GACF;GAGA,AADA,EAAG,QAAQ,GACX,EAAW,QAAQ;GACnB,IAAI,IAAM,KAAK,IAAI,GAAQ,EAAO,MAAM;GACxC,OAAO,IAAM,EAAO,UAAU,CAAC,EAAO,SAAS,EAAO,MAAM,EAAK,IAAG;GAEpE,AADA,QAAe,EAAG,kBAAkB,GAAK,CAAG,CAAC,GACzC,EAAM,CAAM,KAAG,EAAW,CAAM;EACtC;EAEA,SAAS,IAAS;GAChB,AAAI,EAAW,SAAS,CAAC,EAAM,EAAW,KAAK,MAC7C,EAAW,QAAQ,EAAM,YAAY,QACjC,EAAW,EAAM,WAAW,OAAO,EAAO,KAAK,IAC/C;EACR;EAEA,SAAS,EAAU,GAAkB;GAC/B,EAAE,WAAW,EAAE,WAEjB,CAAC;IAAC;IAAa;IAAU;IAAO;IAAa;IAAc;IAAQ;GAAK,EAAE,SAAS,EAAE,GAAG,KACxF,CAAC,OAAO,KAAK,EAAE,GAAG,KAElB,EAAE,eAAe;EACrB;EAEA,SAAS,EAAiB,GAAoB;GAE5C,AADA,EAAW,CAAG,GACT,EAAY,MAAM,aAAU,EAAO,QAAQ;EAClD;EAEA,SAAS,IAAe;GAEtB,AADA,EAAO,QAAQ,IACf,QAAe,EAAS,OAAO,MAAM,CAAC;EACxC;SAEA,EAAa,EAAE,gBAAa,CAAC,mBAI3B,EAmDM,OAnDN,GAmDM,CAlDJ,EAiDM,OAAA;YAjDG;GAAJ,KAAI;GAAa,OAAM;MAC1B,EAqCM,OAAA,EApCJ,OAAK,EAAA,CAAC,eAAa;sBACoB,EAAA,MAAY,SAAI;sBAA2C,EAAA,MAAY,SAAI;;GAKlH,EAYE,SAAA;aAXI;IAAJ,KAAI;IACJ,MAAK;IACJ,IAAI,EAAA;IACL,OAAM;IACN,WAAU;IACT,OAAO,EAAA;IACP,aAAa,EAAA,MAAY;IACzB,WAAW,EAAA,MAAO;IACX;IACD;IACG;;GAEZ,EAQS,UAAA;IAPP,MAAK;IACL,OAAK,EAAA,CAAC,yCAAuC,EAAA,sBAAA,CACZ,EAAA,MAAU,CAAA,CAAA;IAC1C,SAAK,AAAA,EAAA,QAAA,MAAE,EAAU,IAAA;IAClB,cAAW;oBAEX,EAAuC,KAAA,EAApC,OAAM,0BAAyB,GAAA,MAAA,EAAA,CAAA,CAAA,GAAA,CAAA;GAEpC,EAOS,UAAA;IANP,MAAK;IACL,OAAM;IACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAM,CAAI,EAAA,CAAA;IAClB,cAAW;oBAEX,EAA4C,KAAA,EAAzC,OAAM,+BAA8B,GAAA,MAAA,EAAA,CAAA,CAAA,CAAA;eAG3C,EASW,GAAA,EATD,IAAG,OAAM,GAAA,CACN,EAAA,CAAA,KAAA,EAAA,GAAX,EAOM,OAAA;;YAPiB;GAAJ,KAAI;GAAc,OAAM;GAA2B,OAAK,EAAE,EAAA,CAAA,CAAa;MACxF,EAKE,GAAA;GAJC,eAAa,EAAA,SAAU;GACvB,QAAQ,EAAA;GACR,uBAAoB;GACpB,WAAO,AAAA,EAAA,QAAA,MAAE,EAAA,QAAM"}

package/dist/admins-components14.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"admins-components14.js","names":[],"sources":["../src/components/DatePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PickedDate } from '@/types/types'\nimport { datePickerConfigDefaults, type DatePickerConfig } from '@/types/datepickers'\n\nexport { datePickerConfigDefaults, type DatePickerConfig, type PickedDate }\n\nexport interface DatePickerProps {\n modelValue?: PickedDate \| null\n config: DatePickerConfig\n id?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, useId } from 'vue'\nimport Calendar from '@/components/Calendar.vue'\nimport { formatDate, parseDate, localToUTCString, castToDate } from '@/utils/date'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n modelValue: null,\n config: () => ({\n ...datePickerConfigDefaults,\n }),\n id: () => `dp-input-${useId()}`,\n})\n\nconst innerConfig = computed(() => ({\n ...datePickerConfigDefaults,\n ...props.config,\n}))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: PickedDate \| null] }>()\n\nconst wrapperRef = ref<HTMLElement \| null>(null)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef)\nconst inputRef = ref<HTMLInputElement \| null>(null)\nconst DIGITS = 'YMDHms'\nconst format = computed(\n () =>\n innerConfig.value.format ?? (innerConfig.value.showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'),\n)\n\nconst inputValue = ref(\n castToDate(props.modelValue?.local ?? props.modelValue?.utc)\n ? formatDate(castToDate(props.modelValue?.local ?? props.modelValue?.utc)!, format.value)\n : '',\n)\nwatch(\n () => props.modelValue,\n (v) => {\n const d = castToDate(v?.local ?? v?.utc)\n inputValue.value = d ? formatDate(d, format.value) : ''\n },\n)\n\nfunction mask(digits: string): string {\n let r = '',\n di = 0\n for (let i = 0; i < format.value.length && di < digits.length; i++)\n r += DIGITS.includes(format.value[i]!) ? digits[di++] : format.value[i]\n return r\n}\n\nfunction fill(partial: string): string {\n let r = partial\n for (let i = r.length; i < format.value.length; i++)\n r += DIGITS.includes(format.value[i]!) ? '0' : format.value[i]\n return r\n}\n\nfunction valid(val: string): boolean {\n if (val.length !== format.value.length) return false\n for (let i = 0; i < format.value.length; i++) {\n if (DIGITS.includes(format.value[i]!)) {\n if (!/\\d/.test(val[i]!)) return false\n } else if (val[i] !== format.value[i]) return false\n }\n return true\n}\n\nfunction emitParsed(val: string \| null) {\n if (!val) {\n inputValue.value = ''\n emit('update:modelValue', null)\n return\n }\n inputValue.value = val\n const local = parseDate(val, format.value)\n emit(\n 'update:modelValue',\n local ? { local, utc: localToUTCString(local, innerConfig.value.showTime) } : null,\n )\n}\n\n// Input handling\nfunction onInput(e: Event) {\n const el = e.target as HTMLInputElement\n const cursor = el.selectionStart ?? 0\n const raw = el.value.replace(/\\D/g, '')\n isOpen.value = false\n\n if (!raw) {\n emitParsed(null)\n el.value = ''\n return\n }\n\n let masked = mask(raw)\n if (masked.length < format.value.length && !DIGITS.includes(format.value[masked.length]!))\n masked += format.value[masked.length]\n\n // Auto-fill time zeros when date portion is complete\n if (\n innerConfig.value.showTime &&\n masked.length >= 10 &&\n masked.length < format.value.length &&\n masked.replace(/\\D/g, '').length <= 8\n ) {\n const filled = fill(masked)\n el.value = filled\n inputValue.value = filled\n const pos = Math.min(cursor, masked.length)\n nextTick(() => el.setSelectionRange(pos, pos))\n if (valid(filled)) emitParsed(filled)\n return\n }\n\n el.value = masked\n inputValue.value = masked\n let pos = Math.min(cursor, masked.length)\n while (pos < masked.length && !DIGITS.includes(format.value[pos]!)) pos++\n nextTick(() => el.setSelectionRange(pos, pos))\n if (valid(masked)) emitParsed(masked)\n}\n\nfunction onBlur() {\n if (inputValue.value && !valid(inputValue.value))\n inputValue.value = props.modelValue?.local\n ? formatDate(props.modelValue.local, format.value)\n : ''\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n if (e.ctrlKey \|\| e.metaKey) return\n if (\n !['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key) &&\n !/^\\d$/.test(e.key)\n )\n e.preventDefault()\n}\n\nfunction onCalendarUpdate(val: string \| null) {\n emitParsed(val)\n if (!innerConfig.value.showTime) isOpen.value = false\n}\n\nfunction focusAndOpen() {\n isOpen.value = true\n nextTick(() => inputRef.value?.focus())\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n <div ref=\"wrapperRef\" class=\"drp-wrapper ~~ac-component~~\">\n <div\n class=\"c-input-row\"\n :class=\"{\n 'c-input-row--sm': innerConfig.size === 'small',\n 'c-input-row--lg': innerConfig.size === 'large',\n }\"\n >\n <input\n ref=\"inputRef\"\n type=\"text\"\n :id=\"id\"\n class=\"c-input dp-input pr-0\"\n inputmode=\"numeric\"\n :value=\"inputValue\"\n :placeholder=\"innerConfig.placeholder\"\n :maxlength=\"format.length\"\n @input=\"onInput\"\n @blur=\"onBlur\"\n @keydown=\"onKeydown\"\n />\n <button\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear\"\n :class=\"{ 'c-icon-btn--hidden': !inputValue }\"\n @click=\"emitParsed(null)\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <button\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--calendar\"\n @click=\"isOpen = !isOpen\"\n aria-label=\"Naptár megnyitása\"\n >\n <i class=\"fa-regular fa-fw fa-calendar\"></i>\n </button>\n </div>\n <Teleport to=\"body\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"c-dropdown ac-component\" :style=\"dropdownStyle\">\n <Calendar\n :model-value=\"inputValue \|\| null\"\n :config=\"innerConfig\"\n @update:model-value=\"onCalendarUpdate\"\n @confirm=\"isOpen = false\"\n />\n </div>\n </Teleport>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"admins-components14.js","names":[],"sources":["../src/components/DatePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PickedDate } from '@/types/types'\nimport { datePickerConfigDefaults, type DatePickerConfig } from '@/types/datepickers'\n\nexport { datePickerConfigDefaults, type DatePickerConfig, type PickedDate }\n\nexport interface DatePickerProps {\n modelValue?: PickedDate \| null\n config: DatePickerConfig\n id?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, useId } from 'vue'\nimport Calendar from '@/components/Calendar.vue'\nimport { formatDate, parseDate, localToUTCString, castToDate } from '@/utils/date'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n modelValue: null,\n config: () => ({\n ...datePickerConfigDefaults,\n }),\n id: () => `dp-input-${useId()}`,\n})\n\nconst innerConfig = computed(() => ({\n ...datePickerConfigDefaults,\n ...props.config,\n}))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: PickedDate \| null] }>()\n\nconst wrapperRef = ref<HTMLElement \| null>(null)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef)\nconst inputRef = ref<HTMLInputElement \| null>(null)\nconst DIGITS = 'YMDHms'\nconst format = computed(\n () =>\n innerConfig.value.format ?? (innerConfig.value.showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'),\n)\n\nconst inputValue = ref(\n castToDate(props.modelValue?.local ?? props.modelValue?.utc)\n ? formatDate(castToDate(props.modelValue?.local ?? props.modelValue?.utc)!, format.value)\n : '',\n)\nwatch(\n () => props.modelValue,\n (v) => {\n const d = castToDate(v?.local ?? v?.utc)\n inputValue.value = d ? formatDate(d, format.value) : ''\n },\n)\n\nfunction mask(digits: string): string {\n let r = '',\n di = 0\n for (let i = 0; i < format.value.length && di < digits.length; i++)\n r += DIGITS.includes(format.value[i]!) ? digits[di++] : format.value[i]\n return r\n}\n\nfunction fill(partial: string): string {\n let r = partial\n for (let i = r.length; i < format.value.length; i++)\n r += DIGITS.includes(format.value[i]!) ? '0' : format.value[i]\n return r\n}\n\nfunction valid(val: string): boolean {\n if (val.length !== format.value.length) return false\n for (let i = 0; i < format.value.length; i++) {\n if (DIGITS.includes(format.value[i]!)) {\n if (!/\\d/.test(val[i]!)) return false\n } else if (val[i] !== format.value[i]) return false\n }\n return true\n}\n\nfunction emitParsed(val: string \| null) {\n if (!val) {\n inputValue.value = ''\n emit('update:modelValue', null)\n return\n }\n inputValue.value = val\n const local = parseDate(val, format.value)\n emit(\n 'update:modelValue',\n local ? { local, utc: localToUTCString(local, innerConfig.value.showTime) } : null,\n )\n}\n\n// Input handling\nfunction onInput(e: Event) {\n const el = e.target as HTMLInputElement\n const cursor = el.selectionStart ?? 0\n const raw = el.value.replace(/\\D/g, '')\n isOpen.value = false\n\n if (!raw) {\n emitParsed(null)\n el.value = ''\n return\n }\n\n let masked = mask(raw)\n if (masked.length < format.value.length && !DIGITS.includes(format.value[masked.length]!))\n masked += format.value[masked.length]\n\n // Auto-fill time zeros when date portion is complete\n if (\n innerConfig.value.showTime &&\n masked.length >= 10 &&\n masked.length < format.value.length &&\n masked.replace(/\\D/g, '').length <= 8\n ) {\n const filled = fill(masked)\n el.value = filled\n inputValue.value = filled\n const pos = Math.min(cursor, masked.length)\n nextTick(() => el.setSelectionRange(pos, pos))\n if (valid(filled)) emitParsed(filled)\n return\n }\n\n el.value = masked\n inputValue.value = masked\n let pos = Math.min(cursor, masked.length)\n while (pos < masked.length && !DIGITS.includes(format.value[pos]!)) pos++\n nextTick(() => el.setSelectionRange(pos, pos))\n if (valid(masked)) emitParsed(masked)\n}\n\nfunction onBlur() {\n if (inputValue.value && !valid(inputValue.value))\n inputValue.value = props.modelValue?.local\n ? formatDate(props.modelValue.local, format.value)\n : ''\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n if (e.ctrlKey \|\| e.metaKey) return\n if (\n !['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key) &&\n !/^\\d$/.test(e.key)\n )\n e.preventDefault()\n}\n\nfunction onCalendarUpdate(val: string \| null) {\n emitParsed(val)\n if (!innerConfig.value.showTime) isOpen.value = false\n}\n\nfunction focusAndOpen() {\n isOpen.value = true\n nextTick(() => inputRef.value?.focus())\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"drp-wrapper\">\n <div\n class=\"c-input-row\"\n :class=\"{\n 'c-input-row--sm': innerConfig.size === 'small',\n 'c-input-row--lg': innerConfig.size === 'large',\n }\"\n >\n <input\n ref=\"inputRef\"\n type=\"text\"\n :id=\"id\"\n class=\"c-input dp-input pr-0\"\n inputmode=\"numeric\"\n :value=\"inputValue\"\n :placeholder=\"innerConfig.placeholder\"\n :maxlength=\"format.length\"\n @input=\"onInput\"\n @blur=\"onBlur\"\n @keydown=\"onKeydown\"\n />\n <button\n type=\"button\"\n class=\"c-icon-btn dp-clear c-icon-btn--clear\"\n :class=\"{ 'c-icon-btn--hidden': !inputValue }\"\n @click=\"emitParsed(null)\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <button\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--calendar\"\n @click=\"isOpen = !isOpen\"\n aria-label=\"Naptár megnyitása\"\n >\n <i class=\"fa-regular fa-fw fa-calendar\"></i>\n </button>\n </div>\n <Teleport to=\"body\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"c-dropdown ac-component\" :style=\"dropdownStyle\">\n <Calendar\n :model-value=\"inputValue \|\| null\"\n :config=\"innerConfig\"\n @update:model-value=\"onCalendarUpdate\"\n @confirm=\"isOpen = false\"\n />\n </div>\n </Teleport>\n </div>\n </div>\n</template>\n"],"mappings":""}

package/dist/admins-components15.js CHANGED Viewed

@@ -39,7 +39,7 @@ var u = { class: "c-checkbox-wrapper" }, d = [
 			onKeydown: [c(l(g, ["prevent"]), ["enter"]), c(l(g, ["prevent"]), ["space"])]
 		}, null, 42, d), r.label ? (a(), t("label", {
 			key: 0,
-			class: i(["c-label pointer", { "align-center-text-fix": r.labelAlignmentFix }]),
+			class: i(["c-label pointer", { "align-center-fix": r.labelAlignmentFix }]),
 			onClick: g,
 			for: h
 		}, o(r.label), 3)) : e("", !0)]));

package/dist/admins-components15.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"admins-components15.js","names":[],"sources":["../src/components/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: boolean\n label?: string\n disabled?: boolean\n labelAlignmentFix?: boolean\n }>(),\n {\n modelValue: undefined,\n label: undefined,\n disabled: false,\n },\n)\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: boolean \| undefined]\n}>()\n\nconst inputId = `c-checkbox-${useId()}`\n\nfunction toggle() {\n if (props.disabled) return\n\n emit('update:modelValue', !props.modelValue \|\| undefined)\n}\n</script>\n\n<template>\n <div class=\"c-checkbox-wrapper\">\n <span\n class=\"c-checkbox\"\n :class=\"{\n 'c-checkbox--checked': !!modelValue,\n 'c-checkbox--disabled': disabled,\n }\"\n :id=\"inputId\"\n role=\"checkbox\"\n :aria-checked=\"!!modelValue\"\n :aria-disabled=\"disabled \|\| undefined\"\n :tabindex=\"disabled ? -1 : 0\"\n @click=\"toggle\"\n @keydown.enter.prevent=\"toggle\"\n @keydown.space.prevent=\"toggle\"\n ></span>\n\n <label\n v-if=\"label\"\n class=\"c-label pointer\"\n :class=\"{ 'align-center-~~text-~~fix': labelAlignmentFix }\"\n @click=\"toggle\"\n :for=\"inputId\"\n >\n {{ label }}\n </label>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAGA,IAAM,IAAQ,GAcR,IAAO,GAIP,IAAU,cAAc,EAAM;EAEpC,SAAS,IAAS;GACZ,EAAM,YAEV,EAAK,qBAAqB,CAAC,EAAM,cAAc,KAAA,CAAS;EAC1D;yBAIE,EA0BM,OA1BN,GA0BM,CAzBJ,EAcQ,QAAA;GAbN,OAAK,EAAA,CAAC,cAAY;6BACyB,EAAA;4BAA4C,EAAA;;GAItF,IAAI;GACL,MAAK;GACJ,gBAAY,CAAA,CAAI,EAAA;GAChB,iBAAe,EAAA,YAAY,KAAA;GAC3B,UAAU,EAAA,WAAQ,KAAA;GAClB,SAAO;GACP,WAAO,CAAA,EAAA,EAAgB,GAAM,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA,GAAA,EAAA,EACN,GAAM,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA;mBAIxB,EAAA,SAAA,EAAA,GADR,EAQQ,SAAA;;GANN,OAAK,EAAA,CAAC,mBAAiB,EAAA,~~yBACY~~,EAAA,kBAAiB,CAAA,CAAA;~~GACnD~~,SAAO;GACP,KAAK;OAEH,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"admins-components15.js","names":[],"sources":["../src/components/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: boolean\n label?: string\n disabled?: boolean\n labelAlignmentFix?: boolean\n }>(),\n {\n modelValue: undefined,\n label: undefined,\n disabled: false,\n },\n)\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: boolean \| undefined]\n}>()\n\nconst inputId = `c-checkbox-${useId()}`\n\nfunction toggle() {\n if (props.disabled) return\n\n emit('update:modelValue', !props.modelValue \|\| undefined)\n}\n</script>\n\n<template>\n <div class=\"c-checkbox-wrapper\">\n <span\n class=\"c-checkbox\"\n :class=\"{\n 'c-checkbox--checked': !!modelValue,\n 'c-checkbox--disabled': disabled,\n }\"\n :id=\"inputId\"\n role=\"checkbox\"\n :aria-checked=\"!!modelValue\"\n :aria-disabled=\"disabled \|\| undefined\"\n :tabindex=\"disabled ? -1 : 0\"\n @click=\"toggle\"\n @keydown.enter.prevent=\"toggle\"\n @keydown.space.prevent=\"toggle\"\n ></span>\n\n <label\n v-if=\"label\"\n class=\"c-label pointer\"\n :class=\"{ 'align-center-fix': labelAlignmentFix }\"\n @click=\"toggle\"\n :for=\"inputId\"\n >\n {{ label }}\n </label>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAGA,IAAM,IAAQ,GAcR,IAAO,GAIP,IAAU,cAAc,EAAM;EAEpC,SAAS,IAAS;GACZ,EAAM,YAEV,EAAK,qBAAqB,CAAC,EAAM,cAAc,KAAA,CAAS;EAC1D;yBAIE,EA0BM,OA1BN,GA0BM,CAzBJ,EAcQ,QAAA;GAbN,OAAK,EAAA,CAAC,cAAY;6BACyB,EAAA;4BAA4C,EAAA;;GAItF,IAAI;GACL,MAAK;GACJ,gBAAY,CAAA,CAAI,EAAA;GAChB,iBAAe,EAAA,YAAY,KAAA;GAC3B,UAAU,EAAA,WAAQ,KAAA;GAClB,SAAO;GACP,WAAO,CAAA,EAAA,EAAgB,GAAM,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA,GAAA,EAAA,EACN,GAAM,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA;mBAIxB,EAAA,SAAA,EAAA,GADR,EAQQ,SAAA;;GANN,OAAK,EAAA,CAAC,mBAAiB,EAAA,oBACO,EAAA,kBAAiB,CAAA,CAAA;GAC9C,SAAO;GACP,KAAK;OAEH,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/admins-components16.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"admins-components16.js","names":[],"sources":["../src/components/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: boolean\n label?: string\n disabled?: boolean\n labelAlignmentFix?: boolean\n }>(),\n {\n modelValue: undefined,\n label: undefined,\n disabled: false,\n },\n)\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: boolean \| undefined]\n}>()\n\nconst inputId = `c-checkbox-${useId()}`\n\nfunction toggle() {\n if (props.disabled) return\n\n emit('update:modelValue', !props.modelValue \|\| undefined)\n}\n</script>\n\n<template>\n <div class=\"c-checkbox-wrapper\">\n <span\n class=\"c-checkbox\"\n :class=\"{\n 'c-checkbox--checked': !!modelValue,\n 'c-checkbox--disabled': disabled,\n }\"\n :id=\"inputId\"\n role=\"checkbox\"\n :aria-checked=\"!!modelValue\"\n :aria-disabled=\"disabled \|\| undefined\"\n :tabindex=\"disabled ? -1 : 0\"\n @click=\"toggle\"\n @keydown.enter.prevent=\"toggle\"\n @keydown.space.prevent=\"toggle\"\n ></span>\n\n <label\n v-if=\"label\"\n class=\"c-label pointer\"\n :class=\"{ 'align-center-~~text-~~fix': labelAlignmentFix }\"\n @click=\"toggle\"\n :for=\"inputId\"\n >\n {{ label }}\n </label>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"admins-components16.js","names":[],"sources":["../src/components/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: boolean\n label?: string\n disabled?: boolean\n labelAlignmentFix?: boolean\n }>(),\n {\n modelValue: undefined,\n label: undefined,\n disabled: false,\n },\n)\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: boolean \| undefined]\n}>()\n\nconst inputId = `c-checkbox-${useId()}`\n\nfunction toggle() {\n if (props.disabled) return\n\n emit('update:modelValue', !props.modelValue \|\| undefined)\n}\n</script>\n\n<template>\n <div class=\"c-checkbox-wrapper\">\n <span\n class=\"c-checkbox\"\n :class=\"{\n 'c-checkbox--checked': !!modelValue,\n 'c-checkbox--disabled': disabled,\n }\"\n :id=\"inputId\"\n role=\"checkbox\"\n :aria-checked=\"!!modelValue\"\n :aria-disabled=\"disabled \|\| undefined\"\n :tabindex=\"disabled ? -1 : 0\"\n @click=\"toggle\"\n @keydown.enter.prevent=\"toggle\"\n @keydown.space.prevent=\"toggle\"\n ></span>\n\n <label\n v-if=\"label\"\n class=\"c-label pointer\"\n :class=\"{ 'align-center-fix': labelAlignmentFix }\"\n @click=\"toggle\"\n :for=\"inputId\"\n >\n {{ label }}\n </label>\n </div>\n</template>\n"],"mappings":""}