admins-components 9.0.13 → 9.0.14

package/dist/admins-components11.js.map

@@ -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":""}
+{"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

@@ -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

@@ -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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"}
+{"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":"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"}

package/dist/admins-components14.js.map

@@ -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":""}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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":""}
+{"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":""}