admins-components 9.0.33 → 9.0.35

package/dist/admins-components83.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"admins-components83.js","names":[],"sources":["../src/components/data-table/DataFilters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\n\nexport interface FilterItem {\n  type: FilterItemType\n  key: string\n  label?: string\n  placeholder?: string\n  value?: any\n  options?: DropdownOption[]\n  fullWidth?: boolean\n  config?: Record<string, any>\n  displayClass?: string\n  transformer?: (value: any) => Record<string, any> | null | undefined\n}\n\nexport interface FilterResponse {\n  values: Record<string, any>\n  transformed: Record<string, any>\n}\n\nexport interface DataFiltersProps {\n  items: FilterItem[]\n  open?: boolean\n  position?: SidebarPosition\n  lazy?: boolean\n  handleUrl?: boolean\n  historyEnabled?: boolean\n  storageKey?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, onMounted } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\nimport DatePicker from '@/components/DatePicker.vue'\nimport DateRangePicker from '@/components/DateRangePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport TextInput, { type TextInputType } from '@/components/TextInput.vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport FiltersHistory from '@/components/data-table/FiltersHistory.vue'\nimport type { DatePickerConfig, DateRangePickerConfig } from '@/types/datepickers'\nimport type { FilterItemType, PickedDate, PickedUtcRange } from '@/types/types'\nimport { filterEmptyValues, getFilterParams, writeFilterParams } from '@/utils/dataFilters'\n\nconst props = withDefaults(defineProps<DataFiltersProps>(), {\n  open: false,\n  position: 'left',\n  lazy: true,\n  handleUrl: false,\n  historyEnabled: true,\n})\n\nconst emit = defineEmits<{\n  close: []\n  change: [response: FilterResponse]\n}>()\n\nconst values = ref<Record<string, any>>(getFilterParams(props.items) ?? {})\nconst filterRefs = ref<Record<string, any>>({})\n\nfunction setFilterRef(key: string, el: any) {\n  if (el) {\n    filterRefs.value[key] = el\n  } else {\n    delete filterRefs.value[key]\n  }\n}\n\nfunction buildDatePickerConfig(item: FilterItem): DatePickerConfig {\n  return {\n    ...(item.config ?? {}),\n    showTime: item.type === 'datetime',\n    placeholder: item.placeholder ?? (item.type === 'datetime' ? 'Időpont' : 'Dátum'),\n  }\n}\n\nfunction buildDateRangePickerConfig(item: FilterItem): DateRangePickerConfig {\n  return {\n    ...(item.config ?? {}),\n    ...(!item.fullWidth ? { compact: true } : {}),\n    showTime: item.type === 'datetimerange',\n  }\n}\n\nonMounted(() => {\n  if (!props.handleUrl) return\n  const fromUrl = getFilterParams(props.items)\n  if (fromUrl && Object.keys(fromUrl).length > 0) {\n    values.value = { ...values.value, ...fromUrl }\n  }\n})\n\nfunction update(key: string, value: any) {\n  values.value = { ...values.value, [key]: value }\n\n  if (!props.lazy) {\n    if (props.handleUrl) writeFilterParams(props.items, values.value)\n    emit('change', buildResponseEmit())\n  }\n}\n\nfunction buildResponseEmit() {\n  const transformedValues = props.items.reduce((acc, item) => {\n    const val = values.value[item.key]\n    if (item.transformer) {\n      return { ...acc, ...(item.transformer(val) ?? {}) }\n    }\n    return { ...acc, [item.key]: val }\n  }, {})\n  return {\n    values: filterEmptyValues(values.value),\n    transformed: filterEmptyValues(transformedValues),\n  }\n}\n\nfunction confirm() {\n  if (props.handleUrl) writeFilterParams(props.items, values.value)\n\n  emit('change', buildResponseEmit())\n  emit('close')\n}\n\n/* function reset() {\n  values.value = getDefaults()\n  if (props.handleUrl) writeFilterParams(props.items, values.value)\n  emit('change', filterEmptyValues(values.value))\n} */\n\nfunction clearAll() {\n  values.value = {}\n  if (props.handleUrl) writeFilterParams(props.items, values.value)\n\n  emit('change', buildResponseEmit())\n}\n\nconst hasActiveFilters = ref(false)\nwatch(\n  values,\n  (v) => {\n    hasActiveFilters.value = Object.values(v).some(\n      (val) => val !== null && val !== '' && val !== undefined,\n    )\n  },\n  { deep: true, immediate: true },\n)\n\nfunction clearFilter(key: string) {\n  values.value = { ...values.value, [key]: null }\n  if (props.handleUrl) writeFilterParams(props.items, values.value)\n  emit('change', buildResponseEmit())\n}\n\nfunction focusFilter(key: string) {\n  const ref = (filterRefs.value as Record<string, any>)[key]\n  if (!ref) return\n\n  if (typeof ref.focusAndOpen === 'function') {\n    ref.focusAndOpen()\n    return\n  }\n  if (typeof ref.focus === 'function') {\n    ref.focus()\n  }\n}\n\nfunction onHistoryLoad(loaded: Record<string, any>) {\n  const next: Record<string, any> = { ...values.value }\n  for (const item of props.items) {\n    if (item.type === 'separator') continue\n    if (item.key in loaded) {\n      next[item.key] = loaded[item.key] ?? null\n    }\n  }\n  values.value = next\n  if (props.handleUrl) writeFilterParams(props.items, values.value)\n  emit('change', buildResponseEmit())\n}\n\ndefineExpose({ clearFilter, focusFilter })\n\nfunction handleFilterKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter') return\n\n  // Allow Enter in textarea for line breaks\n  const target = event.target as HTMLElement\n  if (target?.tagName === 'TEXTAREA') return\n\n  event.preventDefault()\n  confirm()\n}\n</script>\n\n<template>\n  <Sidebar :open=\"open\" title=\"Szűrők\" :position=\"position\" @close=\"emit('close')\">\n    <div class=\"data-filters\" @keydown=\"handleFilterKeydown\">\n      <div\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        class=\"data-filters__field\"\n        :class=\"{ 'data-filters__field--full': item.fullWidth || item.type === 'separator' }\"\n      >\n        <hr v-if=\"item.type === 'separator'\" class=\"data-filters__separator\" />\n        <template v-else-if=\"item.type === 'checkbox'\">\n          <Checkbox\n            :ref=\"(el: any) => setFilterRef(item.key, el)\"\n            :model-value=\"(values[item.key] as boolean) ?? false\"\n            :label=\"item.label ?? item.key\"\n            @update:model-value=\"(val) => update(item.key, val)\"\n            v-bind=\"item.config\"\n          />\n        </template>\n        <template v-else-if=\"['text', 'number', 'textarea'].includes(item.type)\">\n          <TextInput\n            :type=\"(item.type as TextInputType)\"\n            :ref=\"(el: any) => setFilterRef(item.key, el)\"\n            :id=\"`df-${item.key}`\"\n            :model-value=\"(values[item.key] as string) ?? ''\"\n            :label=\"item.label ?? item.key\"\n            :placeholder=\"item.placeholder\"\n            @update:model-value=\"(val) => update(item.key, val || null)\"\n            v-bind=\"item.config\"\n          />\n        </template>\n        <template v-else-if=\"item.type === 'date' || item.type === 'datetime'\">\n          <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n          <DatePicker\n            :ref=\"(el: any) => setFilterRef(item.key, el)\"\n            :id=\"`df-${item.key}`\"\n            :model-value=\"(values[item.key] as PickedDate) ?? null\"\n            :config=\"buildDatePickerConfig(item)\"\n            @update:model-value=\"update(item.key, $event)\"\n          />\n        </template>\n        <template v-else-if=\"item.type === 'daterange' || item.type === 'datetimerange'\">\n          <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n          <DateRangePicker\n            :ref=\"(el: any) => setFilterRef(item.key, el)\"\n            :model-value=\"(values[item.key] as PickedUtcRange) ?? null\"\n            :config=\"buildDateRangePickerConfig(item)\"\n            @update:model-value=\"update(item.key, $event)\"\n          />\n        </template>\n        <template v-else-if=\"item.type === 'dropdown'\">\n          <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n          <DropdownSelect\n            :ref=\"(el: any) => setFilterRef(item.key, el)\"\n            :model-value=\"(values[item.key] as string) ?? null\"\n            :options=\"item.options ?? []\"\n            :config=\"{\n              ...(item.config ?? {}),\n              placeholder: item.placeholder ?? 'Válassz...',\n              clearable: true,\n              filterable: true,\n            }\"\n            @update:model-value=\"update(item.key, $event)\"\n          />\n        </template>\n      </div>\n    </div>\n    <div class=\"data-filters__footer\">\n      <!--   <Button\n        icon=\"fa-solid fa-trash-can\"\n        :disabled=\"!hasActiveFilters\"\n        label=\"Alaphelyzet visszaállítása\"\n        size=\"small\"\n        @click=\"reset\"\n      /> -->\n      <Button\n        icon=\"fa-solid fa-trash-can\"\n        :disabled=\"!hasActiveFilters\"\n        label=\"Szűrők törlése\"\n        aria-label=\"Szűrők törlése\"\n        size=\"small\"\n        @click=\"clearAll\"\n      />\n      <Button label=\"Szűrés\" aria-label=\"Szűrés\" type=\"success\" @click=\"confirm\" />\n    </div>\n    <hr v-if=\"historyEnabled\" class=\"separator my-3\" />\n    <FiltersHistory\n      v-if=\"historyEnabled\"\n      :items=\"items\"\n      :values=\"values\"\n      :storage-key=\"storageKey\"\n      @load=\"onHistoryLoad\"\n      @change=\"onHistoryLoad\"\n    />\n  </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-filters.scss\"></style>\n"],"mappings":""}

package/dist/admins-components86.js

@@ -1,7 +0,0 @@
-import './src/styles/components/data-table/filter-tags.scss_vue_type_style_index_0_src_true_lang.css';
-import e from "./admins-components84.js";
-/* empty css                    */
-//#region src/components/data-table/FilterTags.vue
-var t = e;
-//#endregion
-export { t as default };

package/dist/admins-components89.js

@@ -1,7 +0,0 @@
-import './src/styles/components/data-table/data-list-guide.scss_vue_type_style_index_0_src_true_lang.css';
-import e from "./admins-components87.js";
-/* empty css                    */
-//#region src/components/data-table/DataListGuide.vue
-var t = e;
-//#endregion
-export { t as default };

package/dist/admins-components89.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"admins-components89.js","names":[],"sources":["../src/components/data-table/DataListGuide.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\n\nwithDefaults(\n  defineProps<{\n    open?: boolean\n    position?: SidebarPosition\n  }>(),\n  {\n    open: false,\n    position: 'right',\n  },\n)\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nconst root = ref<HTMLElement | null>(null)\n\nfunction scrollToSection(target: string | null | undefined) {\n  if (!target || !root.value) return\n  const el = root.value.querySelector(`#${target}`)\n  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })\n}\n</script>\n\n<template>\n  <Sidebar :open=\"open\" title=\"Súgó\" :position=\"position\" @close=\"emit('close')\">\n    <div ref=\"root\" class=\"ac-component dl-guide\">\n      <section class=\"dl-guide-section\">\n        <h3 class=\"dl-guide-title\">Tartalom</h3>\n        <ul class=\"dl-guide-toc m-0\">\n          <li>\n            <a\n              href=\"#\"\n              class=\"dl-guide-toc-link dl-guide-toc-link--primary\"\n              @click.prevent=\"scrollToSection('layout')\"\n              >Megjelenés testreszabása</a\n            >\n            <ul>\n              <li class=\"m-0\">\n                <a href=\"#\" class=\"dl-guide-toc-link\" @click.prevent=\"scrollToSection('view')\"\n                  >Nézet</a\n                >\n              </li>\n              <li class=\"m-0\">\n                <a href=\"#\" class=\"dl-guide-toc-link\" @click.prevent=\"scrollToSection('appearance')\"\n                  >Megjelenés</a\n                >\n              </li>\n              <li class=\"m-0\">\n                <a href=\"#\" class=\"dl-guide-toc-link\" @click.prevent=\"scrollToSection('columns')\"\n                  >Oszlopok láthatósága és sorrendje</a\n                >\n              </li>\n              <li class=\"m-0\">\n                <a href=\"#\" class=\"dl-guide-toc-link\" @click.prevent=\"scrollToSection('reset')\"\n                  >Beállítások visszaállítása</a\n                >\n              </li>\n            </ul>\n          </li>\n          <li>\n            <a\n              href=\"#\"\n              class=\"dl-guide-toc-link dl-guide-toc-link--primary\"\n              @click.prevent=\"scrollToSection('filters')\"\n              >Szűrők</a\n            >\n            <ul>\n                 <li class=\"m-0\">\n                <a\n                  href=\"#\"\n                  class=\"dl-guide-toc-link\"\n                  @click.prevent=\"scrollToSection('exact-match')\"\n                  >Pontos egyezés</a\n                >\n              </li>\n              <li class=\"m-0\">\n                <a\n                  href=\"#\"\n                  class=\"dl-guide-toc-link\"\n                  @click.prevent=\"scrollToSection('save-filters')\"\n                  >Szűrések mentése</a\n                >\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </section>\n      <hr class=\"separator\" />\n      <section id=\"layout\" class=\"dl-guide-section\">\n        <h3 class=\"dl-guide-title\">A táblázat megjelenésének testreszabása</h3>\n        <p>\n          A <strong><i class=\"fa-solid fa-gear\"></i> Beállítások</strong> gombra kattintva lehetőség\n          van a tábla megjelenésének testreszabására. A beállítások az adott táblához kapcsolódóan\n          helyi tárolóban kerülnek mentésre, így ugyanazon eszközön és böngészőben megmaradnak a\n          következő látogatáskor is.\n        </p>\n        <hr class=\"separator\" />\n        <h4 id=\"view\" class=\"dl-guide-subtitle\">Nézet</h4>\n        <ul>\n          <li>\n            <i class=\"fa-solid fa-display mr-1\"></i>\n            <strong>Kijelző méretéhez igazodó</strong> (alapértelmezett): A kijelző méretétől\n            függően automatikusan választ a táblázat és a kártyás nézet között.\n          </li>\n          <li>\n            <i class=\"fa-solid fa-table-list mr-1\"></i> <strong>Táblázat:</strong> klasszikus\n            táblázatos megjelenés\n          </li>\n          <li>\n            <i class=\"fa-solid fa-list mr-1\"></i> <strong>Kártyák:</strong> sorok kártyás\n            megjelenítése, a kártya fejlécére kattintva lenyithatóak a részletes adatok.\n          </li>\n        </ul>\n        <hr class=\"separator\" />\n        <h4 id=\"appearance\" class=\"dl-guide-subtitle\">Megjelenés</h4>\n        <ul>\n          <li>\n            <strong>Kompakt:</strong> A sorok közti távolság és a belső margók csökkentésével több\n            adat jeleníthető meg egyszerre.\n          </li>\n          <li>\n            <strong>Sávos (striped):</strong> Csak a táblázatos nézetben elérhető, minden második\n            sor enyhe szürke hátteret kap, ezzel megkönnyítve a sorok követését.\n          </li>\n        </ul>\n        <hr class=\"separator\" />\n        <h4 id=\"columns\" class=\"dl-guide-subtitle\">Oszlopok láthatósága és sorrendje</h4>\n        <ul>\n          <li>\n            <strong>Kártya fejléc:</strong> kártyás nézet esetén a fejlécben megjelenő mezők\n            láthatósága és sorrendje.\n          </li>\n          <li>\n            <strong>Oszlopok:</strong> táblázat nézetben az oszlopok láthatósága és sorrendje.\n          </li>\n        </ul>\n        <p>\n          A sorrend módosítása történhet az <i class=\"fa-solid fa-grip-vertical\"></i> ikonon\n          <strong class=\"nowrap\">drag-n-drop</strong>al vagy az ikonra kattinva a megjelenő nyilak\n          segítségével.\n        </p>\n        <hr class=\"separator\" />\n\n        <h4 id=\"reset\" class=\"dl-guide-subtitle\">Beállítások visszaállítása</h4>\n        <p>\n          Az\n          <strong>Alapértelmezés visszaállítása</strong> gomb visszaállítja a gyári értékeket, és\n          törli a helyi tárolóban elmentett beállításokat.\n        </p>\n      </section>\n      <hr class=\"separator\" />\n      <section id=\"filters\" class=\"dl-guide-section\">\n        <h3 class=\"dl-guide-title\">Szűrők</h3>\n        <h4 id=\"exact-match\" class=\"dl-guide-subtitle\">Pontos egyezés</h4>\n        <p>\n          Amennyiben a táblázhoz tartozik szabad szavas keresés, a pontos egyezés opciót használva\n          csak azokat a találatokat kapjuk, amelyek teljes mértékben megfelelnek a keresett\n          kifejezésnek. Pl. alap esetben <strong><em>\"alma\"</em></strong> keresésre a <strong><em>\"piros alma\"</em></strong>, <strong><em>\"almafa\"</em></strong>, <strong><em>\"alma\"</em></strong> vagy\n          <strong><em>\"almás pite\"</em></strong> is találat lehet, míg pontos egyezés esetén csak az <strong><em>\"alma\"</em></strong> található meg.\n        </p>\n<hr class=\"separator\" />\n        <h4 id=\"save-filters\" class=\"dl-guide-subtitle\">Szűrések mentése</h4>\n        <p>\n          A <strong><i class=\"fa-solid fa-sliders\"></i> Mentett szűrők</strong>re kattintva\n          lehetőség van elmenteni az aktuális szűrési feltételeket, így később egyetlen kattintással\n          előhívhatja azokat.\n        </p>\n        <p>\n          A szűrési feltételek megadása után a\n          <strong><i class=\"fa-solid fa-bookmark fa-sm\"></i> Mentés</strong> gomb megnyomásával\n          elmenthető a szűrőkészlet. Az elnevezés megadása nem kötelező, csak saját magadnak szól a\n          későbbi könnyebb azonosítás érdekében.\n        </p>\n        <p>\n          Ezt követően a szűrőkészlet a mentés dátumával és elnevezésével jelenik meg a mentett\n          szűrők között. Ezekre kattintva lenyithatók a szűrőkészlet részletei.\n        </p>\n        <p>A mentett készlet jobb oldalán található 3 ikon:</p>\n        <ul>\n          <li>\n            <i class=\"fa-solid fa-check\"></i>: ikonra kattintva tölthetők be a készletek.\n            Megnyomásakor a szűrési feltételek automatikusan kitöltődnek az elmentett értékekkel.\n          </li>\n\n          <li>\n            <span class=\"c-indicator\">?</span>: azt mutatja, hogy hány szűrési feltétel van a\n            készletben.\n          </li>\n          <li>\n            <i class=\"fa-solid fa-xmark\"></i>: a mentett szűrőkészlet törlése (a művelet\n            megerősítést kér).\n          </li>\n        </ul>\n        <p class=\"dl-guide-note\">Táblázatonként maximum <strong>20</strong> készlet menthető el.</p>\n        <p>\n          A lista alján található \"Összes törlése\" gombbal törölhető a táblához tartozó minden\n          elmentett szűrőkészlet.\n        </p>\n\n        <p class=\"dl-guide-note\">\n          <strong>Fontos:</strong> a beállítások és a szűrők is csak böngészőben (localStorage)\n          kerülnek tárolásra, ezért más eszközön vagy böngészőben nem lesznek elérhetőek.\n        </p>\n      </section>\n    </div>\n  </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-guide.scss\"></style>\n"],"mappings":""}

package/dist/admins-components93.js

@@ -1,7 +0,0 @@
-import './src/styles/components/data-table/data-search.scss_vue_type_style_index_0_src_true_lang.css';
-import e from "./admins-components91.js";
-/* empty css                    */
-//#region src/components/data-table/DataSearch.vue
-var t = e;
-//#endregion
-export { t as default };

package/dist/admins-components96.js

@@ -1,7 +0,0 @@
-import './src/styles/components/data-table/data-list.scss_vue_type_style_index_0_src_true_lang.css';
-import e from "./admins-components94.js";
-/* empty css                    */
-//#region src/components/data-table/DataList.vue
-var t = e;
-//#endregion
-export { t as default };

package/dist/admins-components96.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"admins-components96.js","names":[],"sources":["../src/components/data-table/DataList.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type { PaginatorSettings } from '@/types/data-list'\nexport type { DataSearchProps } from './DataSearch.vue'\nexport type { DataFiltersProps } from './DataFilters.vue'\n\nexport interface DataListProps {\n  config: DataListConfig\n  items: Record<string, unknown>[]\n  settings?: Partial<DataListSettings>\n  id: string\n  layoutBreakpoint?: number\n  orderable?: boolean\n  pagination?: PaginatorSettings\n  loading?: boolean\n  handleUrl?: boolean\n  useSearch?: boolean\n  useFilters?: boolean\n  searchConfig?: DataSearchProps\n  filterConfig?: DataFiltersProps\n}\n\nexport const dataListDefaults = {\n  layoutBreakpoint: 768,\n  orderable: true,\n  loading: false,\n  useSearch: true,\n  useFilters: true,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onBeforeUnmount } from 'vue'\nimport DataTable from '@/components/data-table/DataTable.vue'\nimport DataCards from '@/components/data-table/DataCards.vue'\nimport DataListOptions from '@/components/data-table/DataListOptions.vue'\nimport DataPaginator from '@/components/data-table/DataPaginator.vue'\nimport Button from '@/components/Button.vue'\nimport type {\n  DataListConfig,\n  DataListSettings,\n  PageSettings,\n  PaginatorSettings,\n} from '@/types/data-list'\nimport type { FilterValue } from '@/types/data-list'\nimport DataFilters, {\n  type FilterResponse,\n  type DataFiltersProps,\n} from '@/components/data-table/DataFilters.vue'\nimport FilterTags from '@/components/data-table/FilterTags.vue'\nimport DataListGuide from '@/components/data-table/DataListGuide.vue'\nimport { getFilterParams } from '@/utils/dataFilters'\nimport DataSearch, { type DataSearchProps } from './DataSearch.vue'\n\nconst dataFiltersRef = ref<InstanceType<typeof DataFilters> | null>(null)\n\nconst props = withDefaults(defineProps<DataListProps>(), {\n  ...dataListDefaults,\n  searchConfig: undefined,\n  filterConfig: undefined,\n})\n\nfunction resolvedHandleUrl(side: 'searchConfig' | 'filterConfig'): boolean | undefined {\n  const sideConfig = props[side]\n  if (sideConfig && Object.hasOwn(sideConfig as object, 'handleUrl')) {\n    return (sideConfig as { handleUrl?: boolean }).handleUrl\n  }\n  return props.handleUrl\n}\n\nconst mergedSearchConfig = computed<DataSearchProps>(() => ({\n  ...props.searchConfig,\n  handleUrl: resolvedHandleUrl('searchConfig'),\n}))\n\nconst mergedFilterConfig = computed<DataFiltersProps>(() => ({\n  ...(props.filterConfig as DataFiltersProps),\n  handleUrl: resolvedHandleUrl('filterConfig'),\n}))\n\nconst emit = defineEmits<{\n  'filter-change': [filters: Record<string, FilterValue>]\n  'selection-change': [selected: unknown[]]\n  'settings-change': [settings: DataListSettings]\n  'pagination-change': [pagination: PageSettings]\n  'sort-change': [sort: { key: string; direction: 'asc' | 'desc' }]\n  'search-change': [filters: Record<string, string | boolean>]\n}>()\n\nconst showOptions = ref(false)\nconst showGuide = ref(false)\nconst resolvedSettings = ref<DataListSettings | null>(null)\nconst isMobile = ref(false)\nconst root = ref<HTMLElement | null>(null)\nconst showFilters = ref(false)\n\nconst activeFilters = ref<Record<string, any>>(\n  props.filterConfig?.items ? (getFilterParams(props.filterConfig.items) ?? {}) : {},\n)\n\nlet resizeObserver: ResizeObserver | null = null\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver((entries) => {\n    isMobile.value = (entries[0]?.contentRect.width ?? 0) < props.layoutBreakpoint\n  })\n  if (root.value) resizeObserver.observe(root.value)\n})\n\nonBeforeUnmount(() => resizeObserver?.disconnect())\n\nconst effectiveLayout = computed<'table' | 'cards'>(() => {\n  const layout = resolvedSettings.value?.layout\n  if (layout === 'table' || layout === 'cards') return layout\n  return isMobile.value ? 'cards' : 'table'\n})\n\nconst internalConfig = computed<DataListConfig>(() => {\n  if (!resolvedSettings.value) return props.config\n  const order = resolvedSettings.value.columnOrder\n  const mapped = props.config.columns.map((c) => ({\n    ...c,\n    visible: resolvedSettings.value!.columns[c.property] ?? c.visible !== false,\n  }))\n  if (order?.length) {\n    mapped.sort((a, b) => {\n      const ai = order.indexOf(a.property)\n      const bi = order.indexOf(b.property)\n      return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n    })\n  }\n  return { ...props.config, columns: mapped }\n})\n\nfunction onSettingsChange(s: DataListSettings) {\n  resolvedSettings.value = s\n  emit('settings-change', s)\n}\n\ndefineExpose({\n  openOptions: () => (showOptions.value = true),\n  closeOptions: () => (showOptions.value = false),\n  openFilters: () => (showFilters.value = true),\n  closeFilters: () => (showFilters.value = false),\n})\n\nasync function openFilter(key: string) {\n  showFilters.value = true\n  setTimeout(() => {\n    dataFiltersRef.value?.focusFilter(key)\n  }, 300)\n}\n\nfunction onFilterChange(response: FilterResponse) {\n  activeFilters.value = response.values\n  emit('filter-change', response.transformed)\n}\n\nconst activeFiltersCount = computed(\n  () => Object.values(activeFilters.value).filter((v) => v != null && v !== '').length,\n)\n\nconst showPaginator = computed(\n  () => !!props.pagination && (props.items.length > 0 || !props.loading),\n)\n\nconst searchChange = (value: Record<string, string | boolean>) => {\n  emit('search-change', value)\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"root\" class=\"c-data-list\">\n      <div class=\"c-data-list__toolbar\">\n        <DataSearch v-if=\"useSearch\" v-bind=\"mergedSearchConfig\" @search-change=\"searchChange\" />\n        <Button\n          v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n          label=\"Szűrők\"\n          icon=\"fa-solid fa-filter\"\n          @click=\"showFilters = true\"\n          style=\"flex-shrink: 0\"\n          :type=\"activeFiltersCount > 0 ? 'info' : 'normal'\"\n          :indicator=\"activeFiltersCount > 0 ? activeFiltersCount : undefined\"\n        />\n        <div\n          class=\"flex-center gap-1\"\n          v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n        >\n          <FilterTags\n            :filters=\"activeFilters\"\n            :items=\"filterConfig.items\"\n            @remove=\"(key: string) => dataFiltersRef?.clearFilter(key)\"\n            @openFilter=\"openFilter\"\n          />\n        </div>\n        <div class=\"ml-auto\">\n          <Button icon=\"fa-solid fa-gear\" class=\"lh-normal\" @click=\"showOptions = true\" />\n          <Button icon=\"fa-solid fa-question\" class=\"lh-normal\" @click=\"showGuide = true\" />\n        </div>\n      </div>\n      <DataFilters\n        ref=\"dataFiltersRef\"\n        v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n        v-bind=\"mergedFilterConfig\"\n        :storage-key=\"id\"\n        :open=\"showFilters\"\n        @close=\"showFilters = false\"\n        @change=\"onFilterChange\"\n      />\n\n      <!-- <div class=\"c-data-list__toolbar\">\n        <Button\n\n          icon=\"fa-solid fa-gear\"\n          class=\"c-data-list__toolbar__item\"\n          size=\"small\"\n          @click=\"showOptions = true\"\n        />\n        <Button\n\n          icon=\"fa-solid fa-question\"\n          icon-position=\"right\"\n          class=\"c-data-list__toolbar__item ml-auto\"\n          label-alignment-fix\n          size=\"small\"\n          @click=\"showGuide = true\"\n        />\n      </div> -->\n      <DataListGuide :open=\"showGuide\" @close=\"showGuide = false\" />\n      <DataTable\n        v-if=\"effectiveLayout === 'table'\"\n        :config=\"internalConfig\"\n        :loading=\"loading\"\n        :items=\"items\"\n        :settings=\"resolvedSettings ?? undefined\"\n        @filter-change=\"emit('filter-change', $event)\"\n        @selection-change=\"emit('selection-change', $event)\"\n        @sort-change=\"emit('sort-change', $event)\"\n      />\n\n      <DataCards\n        v-else\n        :config=\"internalConfig\"\n        :loading=\"loading\"\n        :items=\"items\"\n        :settings=\"resolvedSettings ?? undefined\"\n        @selection-change=\"emit('selection-change', $event)\"\n      />\n\n      <DataPaginator\n        v-if=\"pagination && showPaginator\"\n        :settings=\"pagination\"\n        :storage-key=\"id\"\n        @update:pagination=\"emit('pagination-change', $event)\"\n      />\n\n      <DataListOptions\n        :open=\"showOptions\"\n        :columns=\"config.columns\"\n        :settings=\"settings ?? {}\"\n        :storage-key=\"id\"\n        :orderable=\"orderable\"\n        @close=\"showOptions = false\"\n        @change=\"onSettingsChange\"\n      />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list.scss\"></style>\n"],"mappings":""}