admins-components 9.0.27 → 9.0.29

package/dist/admins-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components22.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n  placeholder?: string\n  filterable?: boolean\n  clearable?: boolean\n  textEllipsis?: boolean\n  multiple?: boolean\n  lazy?: boolean\n  size?: ControlSize\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n  placeholder: 'Select...',\n  filterable: true,\n  clearable: true,\n  textEllipsis: true,\n  multiple: false,\n  lazy: false,\n  size: 'normal' as ControlSize,\n}\n\nexport interface DropdownOption {\n  icon?: string\n  value?: string\n  label: string\n  callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n  modelValue?: string | string[] | null\n  options: DropdownOption[]\n  config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n  modelValue: null,\n  config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | string[] | null] }>()\n\n\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<string[]>([])\nconst selection = ref<string[]>(toArray(props.modelValue))\n\nfunction toArray(val: string | string[] | null | undefined): string[] {\n  if (val == null) return []\n  return Array.isArray(val) ? [...val] : [val]\n}\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    selection.value = toArray(v)\n  },\n)\n\nwatch(isOpen, (open) => {\n  if (open) {\n    filterText.value = ''\n    if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n    if (cfg.value.lazy) buffer.value = [...selection.value]\n  }\n})\n\n// Display\nconst selectedLabel = computed(() => {\n  if (selection.value.length === 0) return null\n  if (!cfg.value.multiple)\n    return props.options.find((o) => o.value === selection.value[0])?.label ?? null\n  if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n  return selection.value.map((v) => props.options.find((o) => o.value === v)?.label ?? v).join(', ')\n})\n\nconst filteredOptions = computed(() => {\n  const q = filterText.value.toLowerCase()\n  return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nconst selectableOptions = computed(() => {\n  return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n  if (selectableOptions.value.length === 0) return false\n  const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n  return selectableOptions.value.every((o) => o.value && currentList.includes(o.value))\n})\n\nfunction isSelected(value: string): boolean {\n  return (cfg.value.lazy && isOpen.value ? buffer : selection).value.includes(value)\n}\n\nfunction toggleAllOptions() {\n  const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n  const selectableValues = selectableOptions.value.map((o) => o.value as string)\n\n  if (allOptionsSelected.value) {\n    currentList.value = currentList.value.filter((v) => !selectableValues.includes(v))\n  } else {\n    const toAdd = selectableValues.filter((v) => !currentList.value.includes(v))\n    currentList.value = [...currentList.value, ...toAdd]\n  }\n\n  if (!cfg.value.lazy) {\n    emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n  }\n}\n\n// Actions\nfunction toggleList(list: string[], value: string): string[] {\n  const idx = list.indexOf(value)\n  return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, value]\n}\n\nfunction selectOption(opt: DropdownOption) {\n  if (opt.callback) {\n    opt.callback()\n    isOpen.value = false\n    return\n  }\n\n  const value = opt.value\n  if (!value) return\n\n  if (cfg.value.multiple) {\n    if (cfg.value.lazy) {\n      buffer.value = toggleList(buffer.value, value)\n    } else {\n      selection.value = toggleList(selection.value, value)\n      emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n    }\n  } else {\n    selection.value = [value]\n    emit('update:modelValue', value)\n    isOpen.value = false\n  }\n}\n\nfunction confirm() {\n  if (cfg.value.lazy) {\n    selection.value = [...buffer.value]\n    emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n  }\n  isOpen.value = false\n}\n\nfunction clear() {\n  if (cfg.value.lazy) {\n    buffer.value = []\n  } else {\n    selection.value = []\n    emit('update:modelValue', null)\n  }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n  if (e.key === ' ') {\n    e.preventDefault()\n    selectOption(opt)\n  } else if (e.key === 'Enter') {\n    e.preventDefault()\n    confirm()\n  }\n}\n\nfunction onClickOutside(e: MouseEvent) {\n  if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) isOpen.value = false\n}\n\nonMounted(() => document.addEventListener('mousedown', onClickOutside))\nonBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) filterText.value = ''\n}\n\nfunction clearInput() {\n  selection.value = []\n  emit('update:modelValue', null)\n  isOpen.value = false\n}\n\nfunction focusAndOpen() {\n  isOpen.value = true\n  if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n      <div\n        class=\"c-input-row pointer\"\n        :class=\"{\n          'c-input-row--sm': cfg.size === 'small',\n          'c-input-row--lg': cfg.size === 'large',\n        }\"\n        @click=\"toggleOpen()\"\n      >\n        <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n        <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n        <button\n          v-if=\"cfg.clearable && selection.length > 0\"\n          type=\"button\"\n          class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n          @click.stop=\"clearInput()\"\n          aria-label=\"Törlés\"\n        >\n          <i class=\"fa-solid fa-fw fa-xmark\"></i>\n        </button>\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </div>\n\n      <div\n        v-if=\"isOpen\"\n        class=\"c-dropdown ds-dropdown ac-component\"\n        :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n      >\n        <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n          <span\n            v-if=\"cfg.multiple\"\n            class=\"c-checkbox ds-select-all-checkbox\"\n            :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n            @click.stop=\"toggleAllOptions()\"\n            :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n          ></span>\n          <input\n            ref=\"filterInputRef\"\n            type=\"text\"\n            id=\"ds-filter-input\"\n            class=\"c-focus ds-filter-input\"\n            v-model=\"filterText\"\n            placeholder=\"Filter...\"\n            @click.stop\n          />\n          <button\n            v-if=\"filterText\"\n            type=\"button\"\n            class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n            @click.stop=\"filterText = ''\"\n            aria-label=\"Szűrők törlése\"\n          >\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n\n        <ul class=\"ds-options c-scroll\">\n          <li\n            v-for=\"(opt, idx) in filteredOptions\"\n            :key=\"opt.value ?? `cb-${idx}`\"\n            class=\"d-option ds-option\"\n            :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n            tabindex=\"0\"\n            @click=\"selectOption(opt)\"\n            @keydown=\"onOptionKeydown($event, opt)\"\n          >\n            <span\n              v-if=\"cfg.multiple && opt.value\"\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n            ></span>\n            <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n            <span class=\"d-option__label\" :class=\"{ 'c-truncate': cfg.textEllipsis }\">{{\n              opt.label\n            }}</span>\n          </li>\n          <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n            Nincs találat\n          </li>\n        </ul>\n\n        <div v-if=\"cfg.multiple || (cfg.clearable && selection.length > 0)\" class=\"c-footer\">\n          <Button v-if=\"cfg.clearable\" label=\"Törlés\" outline @click=\"clear\" />\n          <Button v-if=\"cfg.multiple\" label=\"OK\" type=\"success\" @click=\"confirm\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components22.js","names":[],"sources":["../src/components/DateRangePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PickedUtcRange } from '@/types/types'\nimport type { DateRangePickerConfig } from '@/types/datepickers'\nimport { dateRangePickerConfigDefaults } from '@/types/datepickers'\n\nexport type { PickedUtcRange, DateRangePickerConfig }\nexport { dateRangePickerConfigDefaults }\n\nexport interface DateRangePickerProps {\n  modelValue?: PickedUtcRange | null\n  config?: DateRangePickerConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, useId } from 'vue'\nimport DatePicker from '@/components/DatePicker.vue'\nimport Button from '@/components/Button.vue'\nimport { localToUTCString, formatDate, endOfDay, laterOf, earlierOf } from '@/utils/date'\nimport {\n  predefinedRanges,\n  applyPredefinedRange,\n  matchPredefinedRange,\n  isPredefinedRangeInBounds,\n  canStepInBounds,\n  type PredefinedRangeKey,\n} from '@/utils/predefinedDateRange'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nimport type { PickedDate } from '@/types/types'\n\nconst props = withDefaults(defineProps<DateRangePickerProps>(), {\n  modelValue: null,\n  config: () => ({ ...dateRangePickerConfigDefaults }),\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: PickedUtcRange | null] }>()\n\nconst tempId = `drp-input-${useId()}`\n\nconst innerConfig = computed(() => ({ ...dateRangePickerConfigDefaults, ...props.config }))\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  isOutsideClick: (e, wrapperEl, dropdownEl) => {\n    const target = e.target as Node\n    return (\n      !(wrapperEl?.contains(target) ?? false) &&\n      !(dropdownEl?.contains(target) ?? false) &&\n      !(target instanceof Element && target.closest('.c-dropdown'))\n    )\n  },\n})\n\nfunction toPicked(utc: string | null): PickedDate | null {\n  return utc ? { local: new Date(utc), utc } : null\n}\n\nfunction makePicked(date: Date): PickedDate {\n  return { local: date, utc: localToUTCString(date, innerConfig.value.showTime) }\n}\n\nfunction endOfDayPicked(picked: PickedDate): PickedDate {\n  return picked.local ? makePicked(endOfDay(picked.local)) : picked\n}\n\nconst format = computed(\n  () =>\n    innerConfig.value.format ?? (innerConfig.value.showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'),\n)\n\nfunction formatUtc(utc: string | null | undefined): string {\n  return utc ? formatDate(new Date(utc), format.value) : '...'\n}\n\nconst bufferFrom = ref<PickedDate | null>(toPicked(props.modelValue?.fromUtc ?? null))\nconst bufferTo = ref<PickedDate | null>(toPicked(props.modelValue?.toUtc ?? null))\nconst displayFrom = ref<string | null>(props.modelValue?.fromUtc ?? null)\nconst displayTo = ref<string | null>(props.modelValue?.toUtc ?? null)\n\nconst hasValue = computed(() => displayFrom.value != null || displayTo.value != null)\nconst minTo = computed(() => bufferFrom.value?.local ?? null)\nconst maxFrom = computed(() => bufferTo.value?.local ?? null)\n\nconst fromMinDate = computed(() => innerConfig.value.minDate ?? null)\nconst fromMaxDate = computed(() =>\n  earlierOf(innerConfig.value.maxDate ?? null, maxFrom.value ?? null),\n)\n\nconst toMinDate = computed(() => laterOf(innerConfig.value.minDate ?? null, minTo.value ?? null))\nconst toMaxDate = computed(() => innerConfig.value.maxDate ?? null)\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    const from = val?.fromUtc ?? null\n    const to = val?.toUtc ?? null\n    bufferFrom.value = toPicked(from)\n    bufferTo.value = toPicked(to)\n    displayFrom.value = from\n    displayTo.value = to\n  },\n)\n\nwatch(isOpen, (open) => {\n  if (!open) return\n  if (innerConfig.value.lazy) {\n    bufferFrom.value = toPicked(displayFrom.value)\n    bufferTo.value = toPicked(displayTo.value)\n  }\n  //nextTick(positionDropdown)\n})\n\nfunction updateFrom(val: PickedDate | null) {\n  bufferFrom.value = val\n  if (val && !bufferTo.value)\n    bufferTo.value = innerConfig.value.showTime ? endOfDayPicked(val) : val\n  if (!innerConfig.value.lazy) emitCurrent()\n}\n\nfunction updateTo(val: PickedDate | null) {\n  bufferTo.value = val\n  if (!innerConfig.value.lazy) emitCurrent()\n}\n\nfunction emitCurrent() {\n  const fromUtc = bufferFrom.value?.utc ?? null\n  const toUtc = bufferTo.value?.utc ?? null\n  displayFrom.value = fromUtc\n  displayTo.value = toUtc\n  emit('update:modelValue', fromUtc || toUtc ? { fromUtc, toUtc } : null)\n}\n\nfunction confirm() {\n  if (innerConfig.value.lazy) emitCurrent()\n  isOpen.value = false\n}\n\nfunction clear() {\n  bufferFrom.value = null\n  bufferTo.value = null\n  displayFrom.value = null\n  displayTo.value = null\n  emit('update:modelValue', null)\n}\n\nfunction clearBuffer() {\n  bufferFrom.value = null\n  bufferTo.value = null\n}\n\nfunction focusAndOpen() {\n  isOpen.value = true\n}\n\ndefineExpose({ focusAndOpen })\n\nfunction computeStepOffset(): number | null {\n  const from = bufferFrom.value?.local\n  const to = bufferTo.value?.local\n  if (!from || !to) return null\n\n  const dayMs = 24 * 60 * 60 * 1000\n  return innerConfig.value.showTime\n    ? to.getTime() - from.getTime()\n    : (Math.round((to.getTime() - from.getTime()) / dayMs) + 1) * dayMs\n}\n\nconst canStepBack = computed(() => {\n  const from = bufferFrom.value?.local\n  const to = bufferTo.value?.local\n  if (!from || !to) return false\n  const offset = computeStepOffset()\n  if (offset == null) return false\n  return canStepInBounds(from, to, -offset, {\n    minDate: innerConfig.value.minDate ?? null,\n    maxDate: innerConfig.value.maxDate ?? null,\n    showTime: innerConfig.value.showTime ?? false,\n  })\n})\n\nconst canStepForward = computed(() => {\n  const from = bufferFrom.value?.local\n  const to = bufferTo.value?.local\n  if (!from || !to) return false\n  const offset = computeStepOffset()\n  if (offset == null) return false\n  return canStepInBounds(from, to, offset, {\n    minDate: innerConfig.value.minDate ?? null,\n    maxDate: innerConfig.value.maxDate ?? null,\n    showTime: innerConfig.value.showTime ?? false,\n  })\n})\n\nfunction rangeStep(delta: number) {\n  const from = bufferFrom.value?.local\n  const to = bufferTo.value?.local\n  if (!from || !to) return\n\n  const offset = computeStepOffset()\n  if (offset == null) return\n\n  const allowed = canStepInBounds(from, to, offset * delta, {\n    minDate: innerConfig.value.minDate ?? null,\n    maxDate: innerConfig.value.maxDate ?? null,\n    showTime: innerConfig.value.showTime ?? false,\n  })\n  if (!allowed) return\n\n  bufferFrom.value = makePicked(new Date(from.getTime() + offset * delta))\n  bufferTo.value = makePicked(new Date(to.getTime() + offset * delta))\n\n  if (!innerConfig.value.lazy) emitCurrent()\n}\n\nconst activePredefinedRange = computed<PredefinedRangeKey | null>(() => {\n  const fromLocal = bufferFrom.value?.local\n  const toLocal = bufferTo.value?.local\n  if (!fromLocal || !toLocal) return null\n  return matchPredefinedRange(fromLocal, toLocal, { showTime: innerConfig.value.showTime ?? false })\n})\n\nconst predefinedRangeDisabled = computed<Record<PredefinedRangeKey, boolean>>(() => {\n  const bounds = {\n    minDate: innerConfig.value.minDate ?? null,\n    maxDate: innerConfig.value.maxDate ?? null,\n    showTime: innerConfig.value.showTime ?? false,\n  }\n  const out = {} as Record<PredefinedRangeKey, boolean>\n  for (const range of predefinedRanges) {\n    out[range.key] = !isPredefinedRangeInBounds(range.key, bounds)\n  }\n  return out\n})\n\nfunction pickPredefinedRange(key: PredefinedRangeKey) {\n  const { from, to } = applyPredefinedRange(key, { showTime: innerConfig.value.showTime ?? false })\n  bufferFrom.value = from\n  bufferTo.value = to\n  emitCurrent()\n\n  if (innerConfig.value.lazy) {\n    isOpen.value = false\n  }\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div\n      ref=\"wrapperRef\"\n      class=\"drp-wrapper\"\n      :class=\"{ 'drp-wrapper--compact': innerConfig.compact }\"\n    >\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          'c-input-row--focus': isOpen,\n        }\"\n        @click=\"isOpen = !isOpen\"\n      >\n        <div class=\"drp-input\">\n          <template v-if=\"hasValue\">\n            <span class=\"c-truncate drp-input__single\"\n              >{{ formatUtc(displayFrom) }} – {{ formatUtc(displayTo) }}</span\n            >\n            <span class=\"drp-input__multi\">\n              <span class=\"c-truncate drp-input__line\">{{ formatUtc(displayFrom) }}</span>\n              <span class=\"c-truncate drp-input__line\">{{ formatUtc(displayTo) }}</span>\n            </span>\n          </template>\n          <span v-else class=\"c-placeholder drp-input__placeholder\"\n            >{{ innerConfig.placeholderFrom }} – {{ innerConfig.placeholderTo }}</span\n          >\n        </div>\n        <button\n          type=\"button\"\n          class=\"c-icon-btn dp-clear c-icon-btn--clear\"\n          :class=\"{ 'c-icon-btn--hidden': !hasValue }\"\n          @click.stop=\"clear\"\n          aria-label=\"Törlés\"\n        >\n          <i class=\"fa-solid fa-fw fa-xmark\"></i>\n        </button>\n        <button\n          v-if=\"innerConfig.showIcon\"\n          type=\"button\"\n          class=\"c-icon-btn c-icon-btn--calendar\"\n          @click.stop=\"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\n      <Teleport to=\"body\">\n        <div class=\"ac-component\">\n          <div\n            v-if=\"isOpen\"\n            ref=\"dropdownRef\"\n            class=\"c-dropdown drp-dropdown\"\n            :style=\"dropdownStyle\"\n          >\n            <div class=\"drp-pickers\">\n              <div class=\"drp-picker-group\">\n                <label class=\"drp-label\" :for=\"`${tempId}-from`\">{{\n                  innerConfig.placeholderFrom\n                }}</label>\n                <DatePicker\n                  :id=\"`${tempId}-from`\"\n                  :model-value=\"bufferFrom\"\n                  :config=\"{\n                    ...innerConfig,\n                    minDate: fromMinDate,\n                    maxDate: fromMaxDate,\n                    placeholder: innerConfig.placeholderFrom,\n                  }\"\n                  @update:model-value=\"updateFrom\"\n                />\n              </div>\n              <div class=\"drp-picker-group\">\n                <label class=\"drp-label\" :for=\"`${tempId}-to`\">{{\n                  innerConfig.placeholderTo\n                }}</label>\n                <DatePicker\n                  :id=\"`${tempId}-to`\"\n                  :model-value=\"bufferTo\"\n                  :config=\"{\n                    ...innerConfig,\n                    minDate: toMinDate,\n                    maxDate: toMaxDate,\n                    placeholder: innerConfig.placeholderTo,\n                  }\"\n                  @update:model-value=\"updateTo\"\n                />\n              </div>\n            </div>\n            <div v-if=\"innerConfig.showPresets\" class=\"drp-toolbar\">\n              <span\n                class=\"d-flex\"\n                v-tooltip=\"\n                  !canStepBack\n                    ? 'Nem léphető tovább a minimum dátum miatt'\n                    : 'Intervallum mozgatása visszafelé'\n                \"\n              >\n                <Button\n                  icon=\"fa-solid fa-chevron-left\"\n                  class=\"drp-toolbar__stepper left\"\n                  :disabled=\"!canStepBack\"\n                  @click=\"rangeStep(-1)\"\n                />\n              </span>\n              <div class=\"predefined-ranges\">\n                <a\n                  v-for=\"range in predefinedRanges\"\n                  :key=\"range.key\"\n                  class=\"predefined-range\"\n                  :class=\"{\n                    'predefined-range--active': activePredefinedRange === range.key,\n                    'predefined-range--disabled': predefinedRangeDisabled[range.key],\n                  }\"\n                  :aria-disabled=\"predefinedRangeDisabled[range.key]\"\n                  @click=\"\n                    predefinedRangeDisabled[range.key] ? null : pickPredefinedRange(range.key)\n                  \"\n                >\n                  {{ range.label }}\n                </a>\n              </div>\n              <span\n                class=\"d-flex\"\n                v-tooltip=\"\n                  !canStepForward\n                    ? 'Nem léphető tovább a maximum dátum miatt'\n                    : 'Intervallum mozgatása előre'\n                \"\n              >\n                <Button\n                  icon=\"fa-solid fa-chevron-right\"\n                  :disabled=\"!canStepForward\"\n                  @click=\"rangeStep(1)\"\n                  class=\"drp-toolbar__stepper right\"\n                />\n              </span>\n            </div>\n            <div\n              v-if=\"innerConfig.showClearButton || innerConfig.showOkButton || innerConfig.lazy\"\n              class=\"c-footer\"\n            >\n              <Button\n                v-if=\"innerConfig.showClearButton\"\n                label=\"Törlés\"\n                outline\n                @click=\"innerConfig.lazy ? clearBuffer() : clear()\"\n              />\n              <Button\n                v-if=\"innerConfig.showOkButton || innerConfig.lazy\"\n                label=\"OK\"\n                type=\"success\"\n                @click=\"confirm\"\n              />\n            </div>\n          </div>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/admins-components23.js

@@ -1,79 +1,183 @@
-import { sizeToClass as e } from "./admins-components4.js";
-import { useDropdownAnchor as t } from "./admins-components12.js";
-import { Fragment as n, Teleport as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h } from "vue";
-//#region src/components/DropdownMenu.vue?vue&type=script&setup=true&lang.ts
-var g = { class: "ac-component" }, _ = ["aria-label"], v = { class: "ds-options c-scroll" }, y = ["onClick", "aria-label"], b = /* @__PURE__ */ c({
-	__name: "DropdownMenu",
+import e from "./admins-components6.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, nextTick as c, normalizeClass as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, vModelText as g, watch as _, withDirectives as v, withModifiers as y } from "vue";
+//#region src/components/DropdownSelect.vue?vue&type=script&setup=true&lang.ts
+var b = { class: "ac-component" }, x = {
+	key: 0,
+	class: "c-truncate ds-value"
+}, S = {
+	key: 1,
+	class: "c-placeholder"
+}, C = {
+	key: 0,
+	class: "ds-filter"
+}, w = ["title"], T = { class: "ds-options c-scroll" }, E = ["onClick", "onKeydown"], D = {
+	key: 0,
+	class: "ds-option ds-option--empty"
+}, O = {
+	key: 1,
+	class: "c-footer"
+}, k = {
+	placeholder: "Select...",
+	filterable: !0,
+	clearable: !0,
+	textEllipsis: !0,
+	multiple: !1,
+	lazy: !1,
+	size: "normal"
+}, A = /* @__PURE__ */ s({
+	__name: "DropdownSelect",
 	props: {
-		size: { default: "normal" },
-		icon: { default: void 0 },
-		label: { default: void 0 },
-		ariaLabel: {},
-		textEllipsis: {
-			type: Boolean,
-			default: !0
-		},
-		type: { default: "normal" },
-		items: {},
-		labelAlignmentFix: {
-			type: Boolean,
-			default: !1
-		}
+		modelValue: { default: null },
+		options: {},
+		config: { default: () => ({ ...k }) }
 	},
-	setup(c) {
-		let b = c, x = f(null), S = f(null), { isOpen: C, dropdownStyle: w } = t(x, S, { extraStyle: (e) => ({
-			minWidth: `${e.width}px`,
-			maxWidth: `${e.width * 2}px`
-		}) });
-		function T() {
-			C.value = !C.value;
+	emits: ["update:modelValue"],
+	setup(s, { expose: A, emit: j }) {
+		let M = s, N = n(() => ({
+			...k,
+			...M.config
+		})), P = j, F = p(!1), I = p(""), L = p(null), R = p(null), z = p([]), B = p(V(M.modelValue));
+		function V(e) {
+			return e == null ? [] : Array.isArray(e) ? [...e] : [e];
+		}
+		_(() => M.modelValue, (e) => {
+			B.value = V(e);
+		}), _(F, (e) => {
+			e && (I.value = "", N.value.filterable && c(() => R.value?.focus()), N.value.lazy && (z.value = [...B.value]));
+		});
+		let H = n(() => B.value.length === 0 ? null : N.value.multiple ? B.value.length > 2 ? `${B.value.length} kiválasztva` : B.value.map((e) => M.options.find((t) => t.value === e)?.label ?? e).join(", ") : M.options.find((e) => e.value === B.value[0])?.label ?? null), U = n(() => {
+			let e = I.value.toLowerCase();
+			return e ? M.options.filter((t) => t.label.toLowerCase().includes(e)) : M.options;
+		}), W = n(() => U.value.filter((e) => e.value)), G = n(() => {
+			if (W.value.length === 0) return !1;
+			let e = N.value.lazy && F.value ? z.value : B.value;
+			return W.value.every((t) => t.value && e.includes(t.value));
+		});
+		function K(e) {
+			return (N.value.lazy && F.value ? z : B).value.includes(e);
+		}
+		function q() {
+			let e = N.value.lazy && F.value ? z : B, t = W.value.map((e) => e.value);
+			if (G.value) e.value = e.value.filter((e) => !t.includes(e));
+			else {
+				let n = t.filter((t) => !e.value.includes(t));
+				e.value = [...e.value, ...n];
+			}
+			N.value.lazy || P("update:modelValue", B.value.length > 0 ? [...B.value] : null);
+		}
+		function J(e, t) {
+			let n = e.indexOf(t);
+			return n >= 0 ? e.filter((e, t) => t !== n) : [...e, t];
+		}
+		function Y(e) {
+			if (e.callback) {
+				e.callback(), F.value = !1;
+				return;
+			}
+			let t = e.value;
+			t && (N.value.multiple ? N.value.lazy ? z.value = J(z.value, t) : (B.value = J(B.value, t), P("update:modelValue", B.value.length > 0 ? [...B.value] : null)) : (B.value = [t], P("update:modelValue", t), F.value = !1));
+		}
+		function X() {
+			N.value.lazy && (B.value = [...z.value], P("update:modelValue", z.value.length > 0 ? [...z.value] : null)), F.value = !1;
+		}
+		function Z() {
+			N.value.lazy ? z.value = [] : (B.value = [], P("update:modelValue", null));
+		}
+		function Q(e, t) {
+			e.key === " " ? (e.preventDefault(), Y(t)) : e.key === "Enter" && (e.preventDefault(), X());
+		}
+		function $(e) {
+			L.value && !L.value.contains(e.target) && (F.value = !1);
 		}
-		function E(e) {
-			e.callback?.(), C.value = !1;
+		d(() => document.addEventListener("mousedown", $)), u(() => document.removeEventListener("mousedown", $));
+		function ee() {
+			F.value = !F.value, F.value && (I.value = "");
 		}
-		return (t, f) => (d(), o("div", g, [s("div", {
+		function te() {
+			B.value = [], P("update:modelValue", null), F.value = !1;
+		}
+		function ne() {
+			F.value = !0, N.value.filterable && c(() => R.value?.focus());
+		}
+		return A({ focusAndOpen: ne }), (n, s) => (f(), a("div", b, [o("div", {
 			ref_key: "wrapperRef",
-			ref: x,
-			class: "ds-wrapper d-inline-block"
-		}, [s("button", {
-			type: "button",
-			class: l(["c-btn dm-trigger", [
-				c.size === "small" && "c-btn-sm",
-				c.size === "large" && "c-btn-lg",
-				c.type !== "normal" && `c-btn-${c.type}`
-			]]),
-			"aria-label": c.ariaLabel ?? c.label,
-			onClick: f[0] ||= (e) => T()
+			ref: L,
+			class: "c-wrapper ds-wrapper"
+		}, [o("div", {
+			class: l(["c-input-row pointer", {
+				"c-input-row--sm": N.value.size === "small",
+				"c-input-row--lg": N.value.size === "large"
+			}]),
+			onClick: s[1] ||= (e) => ee()
+		}, [
+			H.value ? (f(), a("span", x, h(H.value), 1)) : (f(), a("span", S, h(N.value.placeholder), 1)),
+			N.value.clearable && B.value.length > 0 ? (f(), a("button", {
+				key: 2,
+				type: "button",
+				class: "c-icon-btn c-icon-btn--clear ds-clear-btn",
+				onClick: s[0] ||= y((e) => te(), ["stop"]),
+				"aria-label": "Törlés"
+			}, [...s[6] ||= [o("i", { class: "fa-solid fa-fw fa-xmark" }, null, -1)]])) : i("", !0),
+			o("span", { class: l(["c-icon-btn c-icon-btn--chevron mr-2", { "c-icon-btn--chevron-open": F.value }]) }, [...s[7] ||= [o("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
+		], 2), F.value ? (f(), a("div", {
+			key: 0,
+			class: l(["c-dropdown ds-dropdown ac-component", { "ds-dropdown--multiple": N.value.multiple }])
 		}, [
-			c.icon ? (d(), o("i", {
+			N.value.filterable ? (f(), a("div", C, [
+				N.value.multiple ? (f(), a("span", {
+					key: 0,
+					class: l(["c-checkbox ds-select-all-checkbox", { "c-checkbox--checked": G.value }]),
+					onClick: s[2] ||= y((e) => q(), ["stop"]),
+					title: G.value ? "Összes kijelölés törlése" : "Összes kijelölése"
+				}, null, 10, w)) : i("", !0),
+				v(o("input", {
+					ref_key: "filterInputRef",
+					ref: R,
+					type: "text",
+					id: "ds-filter-input",
+					class: "c-focus ds-filter-input",
+					"onUpdate:modelValue": s[3] ||= (e) => I.value = e,
+					placeholder: "Filter...",
+					onClick: s[4] ||= y(() => {}, ["stop"])
+				}, null, 512), [[g, I.value]]),
+				I.value ? (f(), a("button", {
+					key: 1,
+					type: "button",
+					class: "c-icon-btn c-icon-btn--clear ds-filter-clear",
+					onClick: s[5] ||= y((e) => I.value = "", ["stop"]),
+					"aria-label": "Szűrők törlése"
+				}, [...s[8] ||= [o("i", { class: "fa-solid fa-xmark" }, null, -1)]])) : i("", !0)
+			])) : i("", !0),
+			o("ul", T, [(f(!0), a(t, null, m(U.value, (e, t) => (f(), a("li", {
+				key: e.value ?? `cb-${t}`,
+				class: l(["d-option ds-option", { "ds-option--selected": e.value && K(e.value) }]),
+				tabindex: "0",
+				onClick: (t) => Y(e),
+				onKeydown: (t) => Q(t, e)
+			}, [
+				N.value.multiple && e.value ? (f(), a("span", {
+					key: 0,
+					class: l(["c-checkbox", { "c-checkbox--checked": K(e.value) }])
+				}, null, 2)) : i("", !0),
+				e.icon ? (f(), a("i", {
+					key: 1,
+					class: l(["fa-fw", e.icon])
+				}, null, 2)) : i("", !0),
+				o("span", { class: l(["d-option__label", { "c-truncate": N.value.textEllipsis }]) }, h(e.label), 3)
+			], 42, E))), 128)), U.value.length === 0 ? (f(), a("li", D, " Nincs találat ")) : i("", !0)]),
+			N.value.multiple || N.value.clearable && B.value.length > 0 ? (f(), a("div", O, [N.value.clearable ? (f(), r(e, {
 				key: 0,
-				class: l(["fa-fw", c.icon])
-			}, null, 2)) : a("", !0),
-			c.label ? (d(), o("span", {
+				label: "Törlés",
+				outline: "",
+				onClick: Z
+			})) : i("", !0), N.value.multiple ? (f(), r(e, {
 				key: 1,
-				class: l({ "align-center-fix ": b.labelAlignmentFix })
-			}, m(c.label), 3)) : a("", !0),
-			s("span", { class: l(["c-icon-btn c-icon-btn--chevron", { "c-icon-btn--chevron-open": h(C) }]) }, [...f[1] ||= [s("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
-		], 10, _), (d(), i(r, { to: "body" }, [h(C) ? (d(), o("div", {
-			key: 0,
-			ref_key: "dropdownRef",
-			ref: S,
-			class: "c-dropdown ds-wrapper ac-component",
-			style: u(h(w))
-		}, [s("ul", v, [(d(!0), o(n, null, p(c.items, (t, n) => (d(), o("li", {
-			key: `cb-${n}`,
-			class: l(["d-option dm-option c-field-size c-type-color", {
-				[`c-field-size--${h(e)(t.size)}`]: t.size,
-				[`c-type-color--${t.type}`]: t.type
-			}]),
-			tabindex: "0",
-			onClick: (e) => E(t),
-			"aria-label": t.ariaLabel ?? t.label
-		}, [t.icon ? (d(), o("i", {
-			key: 0,
-			class: l(["fa-fw", t.icon])
-		}, null, 2)) : a("", !0), s("span", { class: l(["d-option__label", { "c-truncate": b.textEllipsis }]) }, m(t.label), 3)], 10, y))), 128))])], 4)) : a("", !0)]))], 512)]));
+				label: "OK",
+				type: "success",
+				onClick: X
+			})) : i("", !0)])) : i("", !0)
+		], 2)) : i("", !0)], 512)]));
 	}
 });
 //#endregion
-export { b as default };
+export { A as default, k as dropdownSelectConfigDefaults };

package/dist/admins-components23.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components23.js","names":[],"sources":["../src/components/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownMenuItem {\n  icon?: string\n  label: string\n  type?: ButtonType\n  size?: ControlSize\n  ariaLabel?: string\n  callback: () => void\n}\n\nexport interface DropdownMenuProps {\n  size?: ControlSize\n  icon?: string\n  label?: string\n  ariaLabel?: string\n  textEllipsis?: boolean\n  type?: ButtonType\n  items: DropdownMenuItem[]\n  labelAlignmentFix?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { ControlSize } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { sizeToClass } from '@/utils/dom'\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  size: 'normal',\n  type: 'normal',\n  textEllipsis: true,\n  icon: undefined,\n  label: undefined,\n  labelAlignmentFix: false,\n})\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({\n    minWidth: `${rect.width}px`,\n    maxWidth: `${rect.width * 2}px`,\n  }),\n})\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n}\n\nfunction selectItem(item: DropdownMenuItem) {\n  item.callback?.()\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n      <button\n        type=\"button\"\n        class=\"c-btn dm-trigger\"\n        :class=\"[\n          size === 'small' && 'c-btn-sm',\n          size === 'large' && 'c-btn-lg',\n          type !== 'normal' && `c-btn-${type}`,\n        ]\"\n        :aria-label=\"ariaLabel ?? label\"\n        @click=\"toggleOpen()\"\n      >\n        <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n        <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n          label\n        }}</span>\n\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </button>\n\n      <Teleport to=\"body\">\n        <div\n          v-if=\"isOpen\"\n          ref=\"dropdownRef\"\n          class=\"c-dropdown ds-wrapper ac-component\"\n          :style=\"dropdownStyle\"\n        >\n          <ul class=\"ds-options c-scroll\">\n            <li\n              v-for=\"(item, idx) in items\"\n              :key=\"`cb-${idx}`\"\n              class=\"d-option dm-option c-field-size c-type-color\"\n              :class=\"{\n                [`c-field-size--${sizeToClass(item.size)}`]: item.size,\n                [`c-type-color--${item.type}`]: item.type,\n              }\"\n              tabindex=\"0\"\n              @click=\"selectItem(item)\"\n              :aria-label=\"item.ariaLabel ?? item.label\"\n            >\n              <i v-if=\"item.icon\" class=\"fa-fw\" :class=\"item.icon\"></i>\n              <span class=\"d-option__label\" :class=\"{ 'c-truncate': props.textEllipsis }\">{{\n                item.label\n              }}</span>\n            </li>\n          </ul>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA6BA,IAAM,IAAQ,GASR,IAAa,EAAwB,IAAI,GACzC,IAAc,EAAwB,IAAI,GAC1C,EAAE,WAAQ,qBAAkB,EAAkB,GAAY,GAAa,EAC3E,aAAa,OAAU;GACrB,UAAU,GAAG,EAAK,MAAM;GACxB,UAAU,GAAG,EAAK,QAAQ,EAAE;EAC9B,GACF,CAAC;EAED,SAAS,IAAa;GACpB,EAAO,QAAQ,CAAC,EAAO;EACzB;EAEA,SAAS,EAAW,GAAwB;GAE1C,AADA,EAAK,WAAW,GAChB,EAAO,QAAQ;EACjB;yBAIE,EAuDM,OAvDN,GAuDM,CAtDJ,EAqDM,OAAA;YArDG;GAAJ,KAAI;GAAa,OAAM;MAC1B,EAsBS,UAAA;GArBP,MAAK;GACL,OAAK,EAAA,CAAC,oBAAkB;IACJ,EAAA,SAAI,WAAA;IAAsC,EAAA,SAAI,WAAA;IAAsC,EAAA,SAAI,YAAA,SAA0B,EAAA;;GAKrI,cAAY,EAAA,aAAa,EAAA;GACzB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAU;;GAET,EAAA,QAAA,EAAA,GAAT,EAA+C,KAAA;;IAAhC,OAAK,EAAA,CAAC,SAAgB,EAAA,IAAI,CAAA;;GAC7B,EAAA,SAAA,EAAA,GAAZ,EAES,QAAA;;IAFW,OAAK,EAAA,EAAA,qBAAyB,EAAM,kBAAiB,CAAA;QACvE,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGP,EAKO,QAAA,EAJL,OAAK,EAAA,CAAC,kCAAgC,EAAA,4BACA,EAAA,CAAA,EAAM,CAAA,CAAA,EAAA,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAE5C,EAA8C,KAAA,EAA3C,OAAM,iCAAgC,GAAA,MAAA,EAAA,CAAA,CAAA,GAAA,CAAA;mBAI7C,EA2BW,GAAA,EA3BD,IAAG,OAAM,GAAA,CAET,EAAA,CAAA,KAAA,EAAA,GADR,EAyBM,OAAA;;YAvBA;GAAJ,KAAI;GACJ,OAAM;GACL,OAAK,EAAE,EAAA,CAAA,CAAa;MAErB,EAkBK,MAlBL,GAkBK,EAAA,EAAA,EAAA,GAjBH,EAgBK,GAAA,MAAA,EAfmB,EAAA,QAAd,GAAM,YADhB,EAgBK,MAAA;GAdF,KAAG,MAAQ;GACZ,OAAK,EAAA,CAAC,gDAA8C;sBACR,EAAA,CAAA,EAAY,EAAK,IAAI,MAAM,EAAK;sBAAwC,EAAK,SAAS,EAAK;;GAIvI,UAAS;GACR,UAAK,MAAE,EAAW,CAAI;GACtB,cAAY,EAAK,aAAa,EAAK;MAE3B,EAAK,QAAA,EAAA,GAAd,EAAyD,KAAA;;GAArC,OAAK,EAAA,CAAC,SAAgB,EAAK,IAAI,CAAA;4BACnD,EAES,QAAA,EAFH,OAAK,EAAA,CAAC,mBAAiB,EAAA,cAAyB,EAAM,aAAY,CAAA,CAAA,EAAA,GAAA,EACtE,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"admins-components23.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n  placeholder?: string\n  filterable?: boolean\n  clearable?: boolean\n  textEllipsis?: boolean\n  multiple?: boolean\n  lazy?: boolean\n  size?: ControlSize\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n  placeholder: 'Select...',\n  filterable: true,\n  clearable: true,\n  textEllipsis: true,\n  multiple: false,\n  lazy: false,\n  size: 'normal' as ControlSize,\n}\n\nexport interface DropdownOption {\n  icon?: string\n  value?: string\n  label: string\n  callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n  modelValue?: string | string[] | null\n  options: DropdownOption[]\n  config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n  modelValue: null,\n  config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | string[] | null] }>()\n\n\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<string[]>([])\nconst selection = ref<string[]>(toArray(props.modelValue))\n\nfunction toArray(val: string | string[] | null | undefined): string[] {\n  if (val == null) return []\n  return Array.isArray(val) ? [...val] : [val]\n}\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    selection.value = toArray(v)\n  },\n)\n\nwatch(isOpen, (open) => {\n  if (open) {\n    filterText.value = ''\n    if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n    if (cfg.value.lazy) buffer.value = [...selection.value]\n  }\n})\n\n// Display\nconst selectedLabel = computed(() => {\n  if (selection.value.length === 0) return null\n  if (!cfg.value.multiple)\n    return props.options.find((o) => o.value === selection.value[0])?.label ?? null\n  if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n  return selection.value.map((v) => props.options.find((o) => o.value === v)?.label ?? v).join(', ')\n})\n\nconst filteredOptions = computed(() => {\n  const q = filterText.value.toLowerCase()\n  return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nconst selectableOptions = computed(() => {\n  return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n  if (selectableOptions.value.length === 0) return false\n  const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n  return selectableOptions.value.every((o) => o.value && currentList.includes(o.value))\n})\n\nfunction isSelected(value: string): boolean {\n  return (cfg.value.lazy && isOpen.value ? buffer : selection).value.includes(value)\n}\n\nfunction toggleAllOptions() {\n  const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n  const selectableValues = selectableOptions.value.map((o) => o.value as string)\n\n  if (allOptionsSelected.value) {\n    currentList.value = currentList.value.filter((v) => !selectableValues.includes(v))\n  } else {\n    const toAdd = selectableValues.filter((v) => !currentList.value.includes(v))\n    currentList.value = [...currentList.value, ...toAdd]\n  }\n\n  if (!cfg.value.lazy) {\n    emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n  }\n}\n\n// Actions\nfunction toggleList(list: string[], value: string): string[] {\n  const idx = list.indexOf(value)\n  return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, value]\n}\n\nfunction selectOption(opt: DropdownOption) {\n  if (opt.callback) {\n    opt.callback()\n    isOpen.value = false\n    return\n  }\n\n  const value = opt.value\n  if (!value) return\n\n  if (cfg.value.multiple) {\n    if (cfg.value.lazy) {\n      buffer.value = toggleList(buffer.value, value)\n    } else {\n      selection.value = toggleList(selection.value, value)\n      emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n    }\n  } else {\n    selection.value = [value]\n    emit('update:modelValue', value)\n    isOpen.value = false\n  }\n}\n\nfunction confirm() {\n  if (cfg.value.lazy) {\n    selection.value = [...buffer.value]\n    emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n  }\n  isOpen.value = false\n}\n\nfunction clear() {\n  if (cfg.value.lazy) {\n    buffer.value = []\n  } else {\n    selection.value = []\n    emit('update:modelValue', null)\n  }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n  if (e.key === ' ') {\n    e.preventDefault()\n    selectOption(opt)\n  } else if (e.key === 'Enter') {\n    e.preventDefault()\n    confirm()\n  }\n}\n\nfunction onClickOutside(e: MouseEvent) {\n  if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) isOpen.value = false\n}\n\nonMounted(() => document.addEventListener('mousedown', onClickOutside))\nonBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) filterText.value = ''\n}\n\nfunction clearInput() {\n  selection.value = []\n  emit('update:modelValue', null)\n  isOpen.value = false\n}\n\nfunction focusAndOpen() {\n  isOpen.value = true\n  if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n      <div\n        class=\"c-input-row pointer\"\n        :class=\"{\n          'c-input-row--sm': cfg.size === 'small',\n          'c-input-row--lg': cfg.size === 'large',\n        }\"\n        @click=\"toggleOpen()\"\n      >\n        <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n        <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n        <button\n          v-if=\"cfg.clearable && selection.length > 0\"\n          type=\"button\"\n          class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n          @click.stop=\"clearInput()\"\n          aria-label=\"Törlés\"\n        >\n          <i class=\"fa-solid fa-fw fa-xmark\"></i>\n        </button>\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </div>\n\n      <div\n        v-if=\"isOpen\"\n        class=\"c-dropdown ds-dropdown ac-component\"\n        :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n      >\n        <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n          <span\n            v-if=\"cfg.multiple\"\n            class=\"c-checkbox ds-select-all-checkbox\"\n            :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n            @click.stop=\"toggleAllOptions()\"\n            :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n          ></span>\n          <input\n            ref=\"filterInputRef\"\n            type=\"text\"\n            id=\"ds-filter-input\"\n            class=\"c-focus ds-filter-input\"\n            v-model=\"filterText\"\n            placeholder=\"Filter...\"\n            @click.stop\n          />\n          <button\n            v-if=\"filterText\"\n            type=\"button\"\n            class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n            @click.stop=\"filterText = ''\"\n            aria-label=\"Szűrők törlése\"\n          >\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n\n        <ul class=\"ds-options c-scroll\">\n          <li\n            v-for=\"(opt, idx) in filteredOptions\"\n            :key=\"opt.value ?? `cb-${idx}`\"\n            class=\"d-option ds-option\"\n            :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n            tabindex=\"0\"\n            @click=\"selectOption(opt)\"\n            @keydown=\"onOptionKeydown($event, opt)\"\n          >\n            <span\n              v-if=\"cfg.multiple && opt.value\"\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n            ></span>\n            <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n            <span class=\"d-option__label\" :class=\"{ 'c-truncate': cfg.textEllipsis }\">{{\n              opt.label\n            }}</span>\n          </li>\n          <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n            Nincs találat\n          </li>\n        </ul>\n\n        <div v-if=\"cfg.multiple || (cfg.clearable && selection.length > 0)\" class=\"c-footer\">\n          <Button v-if=\"cfg.clearable\" label=\"Törlés\" outline @click=\"clear\" />\n          <Button v-if=\"cfg.multiple\" label=\"OK\" type=\"success\" @click=\"confirm\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":"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"}

package/dist/admins-components25.js

@@ -1,59 +1,7 @@
-import e from "./admins-components6.js";
-import { Teleport as t, Transition as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeDefaults as l, normalizeClass as u, onBeforeUnmount as d, onMounted as f, openBlock as p, renderSlot as m, toDisplayString as h, withCtx as g, withModifiers as _ } from "vue";
-//#region src/components/Sidebar.vue?vue&type=script&setup=true&lang.ts
-var v = { class: "ac-component" }, y = {
-	key: 0,
-	class: "sb-header"
-}, b = { class: "sb-title" }, x = { class: "sb-content c-scroll" }, S = {
-	open: !1,
-	position: "left",
-	hasHeader: !0,
-	withBackdrop: !0
-}, C = /* @__PURE__ */ c({
-	__name: "Sidebar",
-	props: /* @__PURE__ */ l({
-		open: { type: Boolean },
-		position: {},
-		title: {},
-		hasHeader: { type: Boolean },
-		withBackdrop: { type: Boolean }
-	}, { ...S }),
-	emits: ["close"],
-	setup(c, { emit: l }) {
-		let S = l;
-		function C() {
-			S("close");
-		}
-		function w() {
-			C();
-		}
-		function T(e) {
-			e.key === "Escape" && C();
-		}
-		return f(() => document.addEventListener("keydown", T)), d(() => document.removeEventListener("keydown", T)), (l, d) => (p(), r(t, { to: "body" }, [o("div", v, [s(n, { name: "sb-fade" }, {
-			default: g(() => [c.open && c.withBackdrop ? (p(), a("div", {
-				key: 0,
-				class: "sb-backdrop",
-				onClick: _(w, ["self"])
-			})) : i("", !0)]),
-			_: 1
-		}), s(n, { name: `sb-slide-${c.position}` }, {
-			default: g(() => [c.open ? (p(), a("div", {
-				key: 0,
-				class: u(["sb-panel", `sb-panel--${c.position}`])
-			}, [c.hasHeader ? (p(), a("div", y, [o("span", b, h(c.title ?? ""), 1), s(e, {
-				class: "sb-close",
-				icon: "fa-solid fa-xmark",
-				onClick: d[0] ||= (e) => C()
-			})])) : (p(), r(e, {
-				key: 1,
-				class: "sb-close sb-close--absolute",
-				icon: "fa-solid fa-xmark",
-				onClick: d[1] ||= (e) => C()
-			})), o("div", x, [m(l.$slots, "default")])], 2)) : i("", !0)]),
-			_: 3
-		}, 8, ["name"])])]));
-	}
-});
+import './src/styles/components/dropdown-select.scss_vue_type_style_index_0_src_true_lang.css';
+import e from "./admins-components23.js";
+/* empty css                    */
+//#region src/components/DropdownSelect.vue
+var t = e;
 //#endregion
-export { C as default, S as sidebarDefaults };
+export { t as default };

package/dist/admins-components25.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components25.js","names":[],"sources":["../src/components/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SidebarPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface SidebarProps {\n  open?: boolean\n  position?: SidebarPosition\n  title?: string\n  hasHeader?: boolean\n  withBackdrop?: boolean\n}\n\nexport const sidebarDefaults = {\n  open: false,\n  position: 'left' as SidebarPosition,\n  hasHeader: true,\n  withBackdrop: true,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\n\nwithDefaults(defineProps<SidebarProps>(), {\n  ...sidebarDefaults,\n})\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction close() {\n  emit('close')\n}\n\nfunction onBackdropClick() {\n  close()\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') close()\n}\n\nonMounted(() => document.addEventListener('keydown', onKeydown))\nonBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"ac-component\">\n      <Transition name=\"sb-fade\">\n        <div v-if=\"open && withBackdrop\" class=\"sb-backdrop\" @click.self=\"onBackdropClick\"></div>\n      </Transition>\n      <Transition :name=\"`sb-slide-${position}`\">\n        <div v-if=\"open\" class=\"sb-panel\" :class=\"`sb-panel--${position}`\">\n          <div v-if=\"hasHeader\" class=\"sb-header\">\n            <span class=\"sb-title\">{{ title ?? '' }}</span>\n            <Button class=\"sb-close\" icon=\"fa-solid fa-xmark\" @click=\"close()\" />\n          </div>\n          <Button\n            v-else\n            class=\"sb-close sb-close--absolute\"\n            icon=\"fa-solid fa-xmark\"\n            @click=\"close()\"\n          />\n          <div class=\"sb-content c-scroll\">\n            <slot />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/sidebar.scss\"></style>\n"],"mappings":";;;;;;oEAWa,IAAkB;CAC7B,MAAM;CACN,UAAU;CACV,WAAW;CACX,cAAc;AAChB;;;;;;;;;;;EAWA,IAAM,IAAO;EAIb,SAAS,IAAQ;GACf,EAAK,OAAO;EACd;EAEA,SAAS,IAAkB;GACzB,EAAM;EACR;EAEA,SAAS,EAAU,GAAkB;GACnC,AAAI,EAAE,QAAQ,YAAU,EAAM;EAChC;SAEA,QAAgB,SAAS,iBAAiB,WAAW,CAAS,CAAC,GAC/D,QAAsB,SAAS,oBAAoB,WAAW,CAAS,CAAC,mBAItE,EAuBW,GAAA,EAvBD,IAAG,OAAM,GAAA,CACjB,EAqBM,OArBN,GAqBM,CApBJ,EAEa,GAAA,EAFD,MAAK,UAAS,GAAA;oBACiE,CAA9E,EAAA,QAAQ,EAAA,gBAAA,EAAA,GAAnB,EAAyF,OAAA;;IAAxD,OAAM;IAAe,SAAK,EAAO,GAAe,CAAA,MAAA,CAAA;;;MAEnF,EAgBa,GAAA,EAhBA,MAAI,YAAc,EAAA,WAAA,GAAA;oBAevB,CAdK,EAAA,QAAA,EAAA,GAAX,EAcM,OAAA;;IAdW,OAAK,EAAA,CAAC,YAAU,aAAsB,EAAA,UAAQ,CAAA;OAClD,EAAA,aAAA,EAAA,GAAX,EAGM,OAHN,GAGM,CAFJ,EAA+C,QAA/C,GAA+C,EAArB,EAAA,SAAK,EAAA,GAAA,CAAA,GAC/B,EAAqE,GAAA;IAA7D,OAAM;IAAW,MAAK;IAAqB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK;iBAEjE,EAKE,GAAA;;IAHA,OAAM;IACN,MAAK;IACJ,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK;QAEf,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"admins-components25.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n  placeholder?: string\n  filterable?: boolean\n  clearable?: boolean\n  textEllipsis?: boolean\n  multiple?: boolean\n  lazy?: boolean\n  size?: ControlSize\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n  placeholder: 'Select...',\n  filterable: true,\n  clearable: true,\n  textEllipsis: true,\n  multiple: false,\n  lazy: false,\n  size: 'normal' as ControlSize,\n}\n\nexport interface DropdownOption {\n  icon?: string\n  value?: string\n  label: string\n  callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n  modelValue?: string | string[] | null\n  options: DropdownOption[]\n  config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n  modelValue: null,\n  config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | string[] | null] }>()\n\n\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<string[]>([])\nconst selection = ref<string[]>(toArray(props.modelValue))\n\nfunction toArray(val: string | string[] | null | undefined): string[] {\n  if (val == null) return []\n  return Array.isArray(val) ? [...val] : [val]\n}\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    selection.value = toArray(v)\n  },\n)\n\nwatch(isOpen, (open) => {\n  if (open) {\n    filterText.value = ''\n    if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n    if (cfg.value.lazy) buffer.value = [...selection.value]\n  }\n})\n\n// Display\nconst selectedLabel = computed(() => {\n  if (selection.value.length === 0) return null\n  if (!cfg.value.multiple)\n    return props.options.find((o) => o.value === selection.value[0])?.label ?? null\n  if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n  return selection.value.map((v) => props.options.find((o) => o.value === v)?.label ?? v).join(', ')\n})\n\nconst filteredOptions = computed(() => {\n  const q = filterText.value.toLowerCase()\n  return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nconst selectableOptions = computed(() => {\n  return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n  if (selectableOptions.value.length === 0) return false\n  const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n  return selectableOptions.value.every((o) => o.value && currentList.includes(o.value))\n})\n\nfunction isSelected(value: string): boolean {\n  return (cfg.value.lazy && isOpen.value ? buffer : selection).value.includes(value)\n}\n\nfunction toggleAllOptions() {\n  const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n  const selectableValues = selectableOptions.value.map((o) => o.value as string)\n\n  if (allOptionsSelected.value) {\n    currentList.value = currentList.value.filter((v) => !selectableValues.includes(v))\n  } else {\n    const toAdd = selectableValues.filter((v) => !currentList.value.includes(v))\n    currentList.value = [...currentList.value, ...toAdd]\n  }\n\n  if (!cfg.value.lazy) {\n    emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n  }\n}\n\n// Actions\nfunction toggleList(list: string[], value: string): string[] {\n  const idx = list.indexOf(value)\n  return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, value]\n}\n\nfunction selectOption(opt: DropdownOption) {\n  if (opt.callback) {\n    opt.callback()\n    isOpen.value = false\n    return\n  }\n\n  const value = opt.value\n  if (!value) return\n\n  if (cfg.value.multiple) {\n    if (cfg.value.lazy) {\n      buffer.value = toggleList(buffer.value, value)\n    } else {\n      selection.value = toggleList(selection.value, value)\n      emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n    }\n  } else {\n    selection.value = [value]\n    emit('update:modelValue', value)\n    isOpen.value = false\n  }\n}\n\nfunction confirm() {\n  if (cfg.value.lazy) {\n    selection.value = [...buffer.value]\n    emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n  }\n  isOpen.value = false\n}\n\nfunction clear() {\n  if (cfg.value.lazy) {\n    buffer.value = []\n  } else {\n    selection.value = []\n    emit('update:modelValue', null)\n  }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n  if (e.key === ' ') {\n    e.preventDefault()\n    selectOption(opt)\n  } else if (e.key === 'Enter') {\n    e.preventDefault()\n    confirm()\n  }\n}\n\nfunction onClickOutside(e: MouseEvent) {\n  if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) isOpen.value = false\n}\n\nonMounted(() => document.addEventListener('mousedown', onClickOutside))\nonBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) filterText.value = ''\n}\n\nfunction clearInput() {\n  selection.value = []\n  emit('update:modelValue', null)\n  isOpen.value = false\n}\n\nfunction focusAndOpen() {\n  isOpen.value = true\n  if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n      <div\n        class=\"c-input-row pointer\"\n        :class=\"{\n          'c-input-row--sm': cfg.size === 'small',\n          'c-input-row--lg': cfg.size === 'large',\n        }\"\n        @click=\"toggleOpen()\"\n      >\n        <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n        <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n        <button\n          v-if=\"cfg.clearable && selection.length > 0\"\n          type=\"button\"\n          class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n          @click.stop=\"clearInput()\"\n          aria-label=\"Törlés\"\n        >\n          <i class=\"fa-solid fa-fw fa-xmark\"></i>\n        </button>\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </div>\n\n      <div\n        v-if=\"isOpen\"\n        class=\"c-dropdown ds-dropdown ac-component\"\n        :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n      >\n        <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n          <span\n            v-if=\"cfg.multiple\"\n            class=\"c-checkbox ds-select-all-checkbox\"\n            :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n            @click.stop=\"toggleAllOptions()\"\n            :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n          ></span>\n          <input\n            ref=\"filterInputRef\"\n            type=\"text\"\n            id=\"ds-filter-input\"\n            class=\"c-focus ds-filter-input\"\n            v-model=\"filterText\"\n            placeholder=\"Filter...\"\n            @click.stop\n          />\n          <button\n            v-if=\"filterText\"\n            type=\"button\"\n            class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n            @click.stop=\"filterText = ''\"\n            aria-label=\"Szűrők törlése\"\n          >\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n\n        <ul class=\"ds-options c-scroll\">\n          <li\n            v-for=\"(opt, idx) in filteredOptions\"\n            :key=\"opt.value ?? `cb-${idx}`\"\n            class=\"d-option ds-option\"\n            :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n            tabindex=\"0\"\n            @click=\"selectOption(opt)\"\n            @keydown=\"onOptionKeydown($event, opt)\"\n          >\n            <span\n              v-if=\"cfg.multiple && opt.value\"\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n            ></span>\n            <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n            <span class=\"d-option__label\" :class=\"{ 'c-truncate': cfg.textEllipsis }\">{{\n              opt.label\n            }}</span>\n          </li>\n          <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n            Nincs találat\n          </li>\n        </ul>\n\n        <div v-if=\"cfg.multiple || (cfg.clearable && selection.length > 0)\" class=\"c-footer\">\n          <Button v-if=\"cfg.clearable\" label=\"Törlés\" outline @click=\"clear\" />\n          <Button v-if=\"cfg.multiple\" label=\"OK\" type=\"success\" @click=\"confirm\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}

package/dist/admins-components26.js

@@ -0,0 +1,79 @@
+import { sizeToClass as e } from "./admins-components4.js";
+import { useDropdownAnchor as t } from "./admins-components12.js";
+import { Fragment as n, Teleport as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h } from "vue";
+//#region src/components/DropdownMenu.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "ac-component" }, _ = ["aria-label"], v = { class: "ds-options c-scroll" }, y = ["onClick", "aria-label"], b = /* @__PURE__ */ c({
+	__name: "DropdownMenu",
+	props: {
+		size: { default: "normal" },
+		icon: { default: void 0 },
+		label: { default: void 0 },
+		ariaLabel: {},
+		textEllipsis: {
+			type: Boolean,
+			default: !0
+		},
+		type: { default: "normal" },
+		items: {},
+		labelAlignmentFix: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(c) {
+		let b = c, x = f(null), S = f(null), { isOpen: C, dropdownStyle: w } = t(x, S, { extraStyle: (e) => ({
+			minWidth: `${e.width}px`,
+			maxWidth: `${e.width * 2}px`
+		}) });
+		function T() {
+			C.value = !C.value;
+		}
+		function E(e) {
+			e.callback?.(), C.value = !1;
+		}
+		return (t, f) => (d(), o("div", g, [s("div", {
+			ref_key: "wrapperRef",
+			ref: x,
+			class: "ds-wrapper d-inline-block"
+		}, [s("button", {
+			type: "button",
+			class: l(["c-btn dm-trigger", [
+				c.size === "small" && "c-btn-sm",
+				c.size === "large" && "c-btn-lg",
+				c.type !== "normal" && `c-btn-${c.type}`
+			]]),
+			"aria-label": c.ariaLabel ?? c.label,
+			onClick: f[0] ||= (e) => T()
+		}, [
+			c.icon ? (d(), o("i", {
+				key: 0,
+				class: l(["fa-fw", c.icon])
+			}, null, 2)) : a("", !0),
+			c.label ? (d(), o("span", {
+				key: 1,
+				class: l({ "align-center-fix ": b.labelAlignmentFix })
+			}, m(c.label), 3)) : a("", !0),
+			s("span", { class: l(["c-icon-btn c-icon-btn--chevron", { "c-icon-btn--chevron-open": h(C) }]) }, [...f[1] ||= [s("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
+		], 10, _), (d(), i(r, { to: "body" }, [h(C) ? (d(), o("div", {
+			key: 0,
+			ref_key: "dropdownRef",
+			ref: S,
+			class: "c-dropdown ds-wrapper ac-component",
+			style: u(h(w))
+		}, [s("ul", v, [(d(!0), o(n, null, p(c.items, (t, n) => (d(), o("li", {
+			key: `cb-${n}`,
+			class: l(["d-option dm-option c-field-size c-type-color", {
+				[`c-field-size--${h(e)(t.size)}`]: t.size,
+				[`c-type-color--${t.type}`]: t.type
+			}]),
+			tabindex: "0",
+			onClick: (e) => E(t),
+			"aria-label": t.ariaLabel ?? t.label
+		}, [t.icon ? (d(), o("i", {
+			key: 0,
+			class: l(["fa-fw", t.icon])
+		}, null, 2)) : a("", !0), s("span", { class: l(["d-option__label", { "c-truncate": b.textEllipsis }]) }, m(t.label), 3)], 10, y))), 128))])], 4)) : a("", !0)]))], 512)]));
+	}
+});
+//#endregion
+export { b as default };

package/dist/{admins-components24.js.map → admins-components26.js.map}

@@ -1 +1 @@
-{"version":3,"file":"admins-components24.js","names":[],"sources":["../src/components/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownMenuItem {\n  icon?: string\n  label: string\n  type?: ButtonType\n  size?: ControlSize\n  ariaLabel?: string\n  callback: () => void\n}\n\nexport interface DropdownMenuProps {\n  size?: ControlSize\n  icon?: string\n  label?: string\n  ariaLabel?: string\n  textEllipsis?: boolean\n  type?: ButtonType\n  items: DropdownMenuItem[]\n  labelAlignmentFix?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { ControlSize } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { sizeToClass } from '@/utils/dom'\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  size: 'normal',\n  type: 'normal',\n  textEllipsis: true,\n  icon: undefined,\n  label: undefined,\n  labelAlignmentFix: false,\n})\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({\n    minWidth: `${rect.width}px`,\n    maxWidth: `${rect.width * 2}px`,\n  }),\n})\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n}\n\nfunction selectItem(item: DropdownMenuItem) {\n  item.callback?.()\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n      <button\n        type=\"button\"\n        class=\"c-btn dm-trigger\"\n        :class=\"[\n          size === 'small' && 'c-btn-sm',\n          size === 'large' && 'c-btn-lg',\n          type !== 'normal' && `c-btn-${type}`,\n        ]\"\n        :aria-label=\"ariaLabel ?? label\"\n        @click=\"toggleOpen()\"\n      >\n        <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n        <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n          label\n        }}</span>\n\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </button>\n\n      <Teleport to=\"body\">\n        <div\n          v-if=\"isOpen\"\n          ref=\"dropdownRef\"\n          class=\"c-dropdown ds-wrapper ac-component\"\n          :style=\"dropdownStyle\"\n        >\n          <ul class=\"ds-options c-scroll\">\n            <li\n              v-for=\"(item, idx) in items\"\n              :key=\"`cb-${idx}`\"\n              class=\"d-option dm-option c-field-size c-type-color\"\n              :class=\"{\n                [`c-field-size--${sizeToClass(item.size)}`]: item.size,\n                [`c-type-color--${item.type}`]: item.type,\n              }\"\n              tabindex=\"0\"\n              @click=\"selectItem(item)\"\n              :aria-label=\"item.ariaLabel ?? item.label\"\n            >\n              <i v-if=\"item.icon\" class=\"fa-fw\" :class=\"item.icon\"></i>\n              <span class=\"d-option__label\" :class=\"{ 'c-truncate': props.textEllipsis }\">{{\n                item.label\n              }}</span>\n            </li>\n          </ul>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components26.js","names":[],"sources":["../src/components/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownMenuItem {\n  icon?: string\n  label: string\n  type?: ButtonType\n  size?: ControlSize\n  ariaLabel?: string\n  callback: () => void\n}\n\nexport interface DropdownMenuProps {\n  size?: ControlSize\n  icon?: string\n  label?: string\n  ariaLabel?: string\n  textEllipsis?: boolean\n  type?: ButtonType\n  items: DropdownMenuItem[]\n  labelAlignmentFix?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { ControlSize } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { sizeToClass } from '@/utils/dom'\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  size: 'normal',\n  type: 'normal',\n  textEllipsis: true,\n  icon: undefined,\n  label: undefined,\n  labelAlignmentFix: false,\n})\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({\n    minWidth: `${rect.width}px`,\n    maxWidth: `${rect.width * 2}px`,\n  }),\n})\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n}\n\nfunction selectItem(item: DropdownMenuItem) {\n  item.callback?.()\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n      <button\n        type=\"button\"\n        class=\"c-btn dm-trigger\"\n        :class=\"[\n          size === 'small' && 'c-btn-sm',\n          size === 'large' && 'c-btn-lg',\n          type !== 'normal' && `c-btn-${type}`,\n        ]\"\n        :aria-label=\"ariaLabel ?? label\"\n        @click=\"toggleOpen()\"\n      >\n        <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n        <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n          label\n        }}</span>\n\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </button>\n\n      <Teleport to=\"body\">\n        <div\n          v-if=\"isOpen\"\n          ref=\"dropdownRef\"\n          class=\"c-dropdown ds-wrapper ac-component\"\n          :style=\"dropdownStyle\"\n        >\n          <ul class=\"ds-options c-scroll\">\n            <li\n              v-for=\"(item, idx) in items\"\n              :key=\"`cb-${idx}`\"\n              class=\"d-option dm-option c-field-size c-type-color\"\n              :class=\"{\n                [`c-field-size--${sizeToClass(item.size)}`]: item.size,\n                [`c-type-color--${item.type}`]: item.type,\n              }\"\n              tabindex=\"0\"\n              @click=\"selectItem(item)\"\n              :aria-label=\"item.ariaLabel ?? item.label\"\n            >\n              <i v-if=\"item.icon\" class=\"fa-fw\" :class=\"item.icon\"></i>\n              <span class=\"d-option__label\" :class=\"{ 'c-truncate': props.textEllipsis }\">{{\n                item.label\n              }}</span>\n            </li>\n          </ul>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA6BA,IAAM,IAAQ,GASR,IAAa,EAAwB,IAAI,GACzC,IAAc,EAAwB,IAAI,GAC1C,EAAE,WAAQ,qBAAkB,EAAkB,GAAY,GAAa,EAC3E,aAAa,OAAU;GACrB,UAAU,GAAG,EAAK,MAAM;GACxB,UAAU,GAAG,EAAK,QAAQ,EAAE;EAC9B,GACF,CAAC;EAED,SAAS,IAAa;GACpB,EAAO,QAAQ,CAAC,EAAO;EACzB;EAEA,SAAS,EAAW,GAAwB;GAE1C,AADA,EAAK,WAAW,GAChB,EAAO,QAAQ;EACjB;yBAIE,EAuDM,OAvDN,GAuDM,CAtDJ,EAqDM,OAAA;YArDG;GAAJ,KAAI;GAAa,OAAM;MAC1B,EAsBS,UAAA;GArBP,MAAK;GACL,OAAK,EAAA,CAAC,oBAAkB;IACJ,EAAA,SAAI,WAAA;IAAsC,EAAA,SAAI,WAAA;IAAsC,EAAA,SAAI,YAAA,SAA0B,EAAA;;GAKrI,cAAY,EAAA,aAAa,EAAA;GACzB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAU;;GAET,EAAA,QAAA,EAAA,GAAT,EAA+C,KAAA;;IAAhC,OAAK,EAAA,CAAC,SAAgB,EAAA,IAAI,CAAA;;GAC7B,EAAA,SAAA,EAAA,GAAZ,EAES,QAAA;;IAFW,OAAK,EAAA,EAAA,qBAAyB,EAAM,kBAAiB,CAAA;QACvE,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGP,EAKO,QAAA,EAJL,OAAK,EAAA,CAAC,kCAAgC,EAAA,4BACA,EAAA,CAAA,EAAM,CAAA,CAAA,EAAA,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAE5C,EAA8C,KAAA,EAA3C,OAAM,iCAAgC,GAAA,MAAA,EAAA,CAAA,CAAA,GAAA,CAAA;mBAI7C,EA2BW,GAAA,EA3BD,IAAG,OAAM,GAAA,CAET,EAAA,CAAA,KAAA,EAAA,GADR,EAyBM,OAAA;;YAvBA;GAAJ,KAAI;GACJ,OAAM;GACL,OAAK,EAAE,EAAA,CAAA,CAAa;MAErB,EAkBK,MAlBL,GAkBK,EAAA,EAAA,EAAA,GAjBH,EAgBK,GAAA,MAAA,EAfmB,EAAA,QAAd,GAAM,YADhB,EAgBK,MAAA;GAdF,KAAG,MAAQ;GACZ,OAAK,EAAA,CAAC,gDAA8C;sBACR,EAAA,CAAA,EAAY,EAAK,IAAI,MAAM,EAAK;sBAAwC,EAAK,SAAS,EAAK;;GAIvI,UAAS;GACR,UAAK,MAAE,EAAW,CAAI;GACtB,cAAY,EAAK,aAAa,EAAK;MAE3B,EAAK,QAAA,EAAA,GAAd,EAAyD,KAAA;;GAArC,OAAK,EAAA,CAAC,SAAgB,EAAK,IAAI,CAAA;4BACnD,EAES,QAAA,EAFH,OAAK,EAAA,CAAC,mBAAiB,EAAA,cAAyB,EAAM,aAAY,CAAA,CAAA,EAAA,GAAA,EACtE,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/admins-components27.js

@@ -1,7 +1,7 @@
-import './src/styles/components/sidebar.scss_vue_type_style_index_0_src_true_lang.css';
-import e from "./admins-components25.js";
+import './src/styles/components/dropdown-select.scss_vue_type_style_index_0_src_true_lang.css';
 /* empty css                    */
-//#region src/components/Sidebar.vue
+import e from "./admins-components26.js";
+//#region src/components/DropdownMenu.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/admins-components27.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components27.js","names":[],"sources":["../src/components/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SidebarPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface SidebarProps {\n  open?: boolean\n  position?: SidebarPosition\n  title?: string\n  hasHeader?: boolean\n  withBackdrop?: boolean\n}\n\nexport const sidebarDefaults = {\n  open: false,\n  position: 'left' as SidebarPosition,\n  hasHeader: true,\n  withBackdrop: true,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\n\nwithDefaults(defineProps<SidebarProps>(), {\n  ...sidebarDefaults,\n})\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction close() {\n  emit('close')\n}\n\nfunction onBackdropClick() {\n  close()\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') close()\n}\n\nonMounted(() => document.addEventListener('keydown', onKeydown))\nonBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"ac-component\">\n      <Transition name=\"sb-fade\">\n        <div v-if=\"open && withBackdrop\" class=\"sb-backdrop\" @click.self=\"onBackdropClick\"></div>\n      </Transition>\n      <Transition :name=\"`sb-slide-${position}`\">\n        <div v-if=\"open\" class=\"sb-panel\" :class=\"`sb-panel--${position}`\">\n          <div v-if=\"hasHeader\" class=\"sb-header\">\n            <span class=\"sb-title\">{{ title ?? '' }}</span>\n            <Button class=\"sb-close\" icon=\"fa-solid fa-xmark\" @click=\"close()\" />\n          </div>\n          <Button\n            v-else\n            class=\"sb-close sb-close--absolute\"\n            icon=\"fa-solid fa-xmark\"\n            @click=\"close()\"\n          />\n          <div class=\"sb-content c-scroll\">\n            <slot />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/sidebar.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components27.js","names":[],"sources":["../src/components/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownMenuItem {\n  icon?: string\n  label: string\n  type?: ButtonType\n  size?: ControlSize\n  ariaLabel?: string\n  callback: () => void\n}\n\nexport interface DropdownMenuProps {\n  size?: ControlSize\n  icon?: string\n  label?: string\n  ariaLabel?: string\n  textEllipsis?: boolean\n  type?: ButtonType\n  items: DropdownMenuItem[]\n  labelAlignmentFix?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { ControlSize } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { sizeToClass } from '@/utils/dom'\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  size: 'normal',\n  type: 'normal',\n  textEllipsis: true,\n  icon: undefined,\n  label: undefined,\n  labelAlignmentFix: false,\n})\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({\n    minWidth: `${rect.width}px`,\n    maxWidth: `${rect.width * 2}px`,\n  }),\n})\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n}\n\nfunction selectItem(item: DropdownMenuItem) {\n  item.callback?.()\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n      <button\n        type=\"button\"\n        class=\"c-btn dm-trigger\"\n        :class=\"[\n          size === 'small' && 'c-btn-sm',\n          size === 'large' && 'c-btn-lg',\n          type !== 'normal' && `c-btn-${type}`,\n        ]\"\n        :aria-label=\"ariaLabel ?? label\"\n        @click=\"toggleOpen()\"\n      >\n        <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n        <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n          label\n        }}</span>\n\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </button>\n\n      <Teleport to=\"body\">\n        <div\n          v-if=\"isOpen\"\n          ref=\"dropdownRef\"\n          class=\"c-dropdown ds-wrapper ac-component\"\n          :style=\"dropdownStyle\"\n        >\n          <ul class=\"ds-options c-scroll\">\n            <li\n              v-for=\"(item, idx) in items\"\n              :key=\"`cb-${idx}`\"\n              class=\"d-option dm-option c-field-size c-type-color\"\n              :class=\"{\n                [`c-field-size--${sizeToClass(item.size)}`]: item.size,\n                [`c-type-color--${item.type}`]: item.type,\n              }\"\n              tabindex=\"0\"\n              @click=\"selectItem(item)\"\n              :aria-label=\"item.ariaLabel ?? item.label\"\n            >\n              <i v-if=\"item.icon\" class=\"fa-fw\" :class=\"item.icon\"></i>\n              <span class=\"d-option__label\" :class=\"{ 'c-truncate': props.textEllipsis }\">{{\n                item.label\n              }}</span>\n            </li>\n          </ul>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}