admins-components 9.0.66 → 9.0.67

package/dist/admins-components97.js

@@ -1,83 +1,200 @@
-import { debounce as e } from "./admins-components15.js";
-import t from "./admins-components17.js";
-import n from "./admins-components19.js";
-import { writeUrlOrRemove as r } from "./admins-components76.js";
-import { filterEmptyValues as i } from "./admins-components84.js";
-import { createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, onMounted as d, openBlock as f, ref as p, withCtx as m } from "vue";
-//#region src/components/data-table/DataSearch.vue?vue&type=script&setup=true&lang.ts
-var h = { class: "data-search-wrapper" };
-function g(e = "search", t = "exactMatch") {
-	let n = new URLSearchParams(typeof window > "u" ? "" : window.location.search), r = n.get(e) ?? "", a = n.get(t);
-	return i({
-		search: r,
-		exactMatch: a === "true" || a === "1" ? !0 : a === "false" || a === "0" ? !1 : void 0
-	});
-}
-var _ = /* @__PURE__ */ u({
-	__name: "DataSearch",
+import e from "./admins-components34.js";
+import { createBlock as t, createElementVNode as n, createTextVNode as r, defineComponent as i, openBlock as a, ref as o, withCtx as s, withModifiers as c } from "vue";
+//#region src/components/data-table/DataListGuide.vue?vue&type=script&setup=true&lang.ts
+var l = { class: "dl-guide-section" }, u = { class: "dl-guide-toc m-0" }, d = { class: "m-0" }, f = { class: "m-0" }, p = { class: "m-0" }, m = { class: "m-0" }, h = { class: "m-0" }, g = { class: "m-0" }, _ = /* @__PURE__ */ i({
+	__name: "DataListGuide",
 	props: {
-		showExactMatch: {
-			type: Boolean,
-			default: !0
-		},
-		showSearch: {
-			type: Boolean,
-			default: !0
-		},
-		placeholder: { default: "Keresés..." },
-		handleUrl: {
+		open: {
 			type: Boolean,
 			default: !1
 		},
-		searchKey: { default: "search" },
-		exactMatchKey: { default: "exactMatch" }
+		position: { default: "right" }
 	},
-	emits: ["search-change"],
-	setup(i, { emit: u }) {
-		let _ = i, v = g(_.searchKey, _.exactMatchKey), y = p(v.exactMatch), b = p(v.search ?? ""), x = u;
-		function S() {
-			let e = {};
-			_.showSearch && (e[_.searchKey] = b.value), _.showExactMatch && (e[_.exactMatchKey] = y.value ?? !1), x("search-change", e);
-		}
-		function C() {
-			r(_.searchKey, b.value, { handleUrl: _.handleUrl }), r(_.exactMatchKey, y.value ?? !1, {
-				handleUrl: _.handleUrl,
-				default: !1
+	emits: ["close"],
+	setup(i, { emit: _ }) {
+		let v = _, y = o(null);
+		function b(e) {
+			if (!e || !y.value) return;
+			let t = y.value.querySelector(`#${e}`);
+			t && t.scrollIntoView({
+				behavior: "smooth",
+				block: "start"
 			});
 		}
-		let w = e(C, 300);
-		function T(e) {
-			y.value = e, S(), w();
-		}
-		function E(e) {
-			b.value = e == null ? "" : String(e).trim(), S(), w();
-		}
-		return d(() => {
-			_.handleUrl && (b.value || (y.value ?? !1)) && S();
-		}), (e, r) => (f(), s("div", h, [i.showExactMatch ? (f(), a(n, {
-			key: 0,
-			"model-value": y.value,
-			class: "gap-1",
-			"onUpdate:modelValue": T
+		return (o, _) => (a(), t(e, {
+			open: i.open,
+			title: "Súgó",
+			position: i.position,
+			onClose: _[8] ||= (e) => v("close")
 		}, {
-			label: m(() => [...r[0] ||= [c("span", { class: "data-search-label" }, [
-				l("Pontos"),
-				c("br"),
-				l("egyezés ")
-			], -1)]]),
+			default: s(() => [n("div", {
+				ref_key: "root",
+				ref: y,
+				class: "ac-component dl-guide"
+			}, [
+				n("section", l, [_[9] ||= n("h3", { class: "dl-guide-title" }, "Tartalom", -1), n("ul", u, [n("li", null, [n("a", {
+					href: "#",
+					class: "dl-guide-toc-link dl-guide-toc-link--primary",
+					onClick: _[0] ||= c((e) => b("layout"), ["prevent"])
+				}, "Megjelenés testreszabása"), n("ul", null, [
+					n("li", d, [n("a", {
+						href: "#",
+						class: "dl-guide-toc-link",
+						onClick: _[1] ||= c((e) => b("view"), ["prevent"])
+					}, "Nézet")]),
+					n("li", f, [n("a", {
+						href: "#",
+						class: "dl-guide-toc-link",
+						onClick: _[2] ||= c((e) => b("appearance"), ["prevent"])
+					}, "Megjelenés")]),
+					n("li", p, [n("a", {
+						href: "#",
+						class: "dl-guide-toc-link",
+						onClick: _[3] ||= c((e) => b("columns"), ["prevent"])
+					}, "Oszlopok láthatósága és sorrendje")]),
+					n("li", m, [n("a", {
+						href: "#",
+						class: "dl-guide-toc-link",
+						onClick: _[4] ||= c((e) => b("reset"), ["prevent"])
+					}, "Beállítások visszaállítása")])
+				])]), n("li", null, [n("a", {
+					href: "#",
+					class: "dl-guide-toc-link dl-guide-toc-link--primary",
+					onClick: _[5] ||= c((e) => b("filters"), ["prevent"])
+				}, "Szűrők"), n("ul", null, [n("li", h, [n("a", {
+					href: "#",
+					class: "dl-guide-toc-link",
+					onClick: _[6] ||= c((e) => b("exact-match"), ["prevent"])
+				}, "Pontos egyezés")]), n("li", g, [n("a", {
+					href: "#",
+					class: "dl-guide-toc-link",
+					onClick: _[7] ||= c((e) => b("save-filters"), ["prevent"])
+				}, "Szűrések mentése")])])])])]),
+				_[10] ||= n("hr", { class: "separator" }, null, -1),
+				_[11] ||= n("section", {
+					id: "layout",
+					class: "dl-guide-section"
+				}, [
+					n("h3", { class: "dl-guide-title" }, "A táblázat megjelenésének testreszabása"),
+					n("p", null, [
+						r(" A "),
+						n("strong", null, [n("i", { class: "fa-solid fa-gear" }), r(" Beállítások")]),
+						r(" gombra kattintva lehetőség van a tábla megjelenésének testreszabására. A beállítások az adott táblához kapcsolódóan helyi tárolóban kerülnek mentésre, így ugyanazon eszközön és böngészőben megmaradnak a következő látogatáskor is. ")
+					]),
+					n("hr", { class: "separator" }),
+					n("h4", {
+						id: "view",
+						class: "dl-guide-subtitle"
+					}, "Nézet"),
+					n("ul", null, [
+						n("li", null, [
+							n("i", { class: "fa-solid fa-display mr-1" }),
+							n("strong", null, "Kijelző méretéhez igazodó"),
+							r(" (alapértelmezett): A kijelző méretétől függően automatikusan választ a táblázat és a kártyás nézet között. ")
+						]),
+						n("li", null, [
+							n("i", { class: "fa-solid fa-table-list mr-1" }),
+							r(),
+							n("strong", null, "Táblázat:"),
+							r(" klasszikus táblázatos megjelenés ")
+						]),
+						n("li", null, [
+							n("i", { class: "fa-solid fa-list mr-1" }),
+							r(),
+							n("strong", null, "Kártyák:"),
+							r(" sorok kártyás megjelenítése, a kártya fejlécére kattintva lenyithatóak a részletes adatok. ")
+						])
+					]),
+					n("hr", { class: "separator" }),
+					n("h4", {
+						id: "appearance",
+						class: "dl-guide-subtitle"
+					}, "Megjelenés"),
+					n("ul", null, [n("li", null, [n("strong", null, "Kompakt:"), r(" A sorok közti távolság és a belső margók csökkentésével több adat jeleníthető meg egyszerre. ")]), n("li", null, [n("strong", null, "Sávos (striped):"), r(" Csak a táblázatos nézetben elérhető, minden második sor enyhe szürke hátteret kap, ezzel megkönnyítve a sorok követését. ")])]),
+					n("hr", { class: "separator" }),
+					n("h4", {
+						id: "columns",
+						class: "dl-guide-subtitle"
+					}, "Oszlopok láthatósága és sorrendje"),
+					n("ul", null, [n("li", null, [n("strong", null, "Kártya fejléc:"), r(" kártyás nézet esetén a fejlécben megjelenő mezők láthatósága és sorrendje. ")]), n("li", null, [n("strong", null, "Oszlopok:"), r(" táblázat nézetben az oszlopok láthatósága és sorrendje. ")])]),
+					n("p", null, [
+						r(" A sorrend módosítása történhet az "),
+						n("i", { class: "fa-solid fa-grip-vertical" }),
+						r(" ikonon "),
+						n("strong", { class: "nowrap" }, "drag-n-drop"),
+						r("al vagy az ikonra kattinva a megjelenő nyilak segítségével. ")
+					]),
+					n("hr", { class: "separator" }),
+					n("h4", {
+						id: "reset",
+						class: "dl-guide-subtitle"
+					}, "Beállítások visszaállítása"),
+					n("p", null, [
+						r(" Az "),
+						n("strong", null, "Alapértelmezés visszaállítása"),
+						r(" gomb visszaállítja a gyári értékeket, és törli a helyi tárolóban elmentett beállításokat. ")
+					])
+				], -1),
+				_[12] ||= n("hr", { class: "separator" }, null, -1),
+				_[13] ||= n("section", {
+					id: "filters",
+					class: "dl-guide-section"
+				}, [
+					n("h3", { class: "dl-guide-title" }, "Szűrők"),
+					n("h4", {
+						id: "exact-match",
+						class: "dl-guide-subtitle"
+					}, "Pontos egyezés"),
+					n("p", null, [
+						r(" Amennyiben a táblázhoz tartozik szabad szavas keresés, a pontos egyezés opciót használva csak azokat a találatokat kapjuk, amelyek teljes mértékben megfelelnek a keresett kifejezésnek. Pl. alap esetben "),
+						n("strong", null, [n("em", null, "\"alma\"")]),
+						r(" keresésre a "),
+						n("strong", null, [n("em", null, "\"piros alma\"")]),
+						r(", "),
+						n("strong", null, [n("em", null, "\"almafa\"")]),
+						r(", "),
+						n("strong", null, [n("em", null, "\"alma\"")]),
+						r(" vagy "),
+						n("strong", null, [n("em", null, "\"almás pite\"")]),
+						r(" is találat lehet, míg pontos egyezés esetén csak az "),
+						n("strong", null, [n("em", null, "\"alma\"")]),
+						r(" található meg. ")
+					]),
+					n("hr", { class: "separator" }),
+					n("h4", {
+						id: "save-filters",
+						class: "dl-guide-subtitle"
+					}, "Szűrések mentése"),
+					n("p", null, [
+						r(" A "),
+						n("strong", null, [n("i", { class: "fa-solid fa-sliders" }), r(" Mentett szűrők")]),
+						r("re kattintva lehetőség van elmenteni az aktuális szűrési feltételeket, így később egyetlen kattintással előhívhatja azokat. ")
+					]),
+					n("p", null, [
+						r(" A szűrési feltételek megadása után a "),
+						n("strong", null, [n("i", { class: "fa-solid fa-bookmark fa-sm" }), r(" Mentés")]),
+						r(" gomb megnyomásával elmenthető a szűrőkészlet. Az elnevezés megadása nem kötelező, csak saját magadnak szól a későbbi könnyebb azonosítás érdekében. ")
+					]),
+					n("p", null, " Ezt követően a szűrőkészlet a mentés dátumával és elnevezésével jelenik meg a mentett szűrők között. Ezekre kattintva lenyithatók a szűrőkészlet részletei. "),
+					n("p", null, "A mentett készlet jobb oldalán található 4 ikon:"),
+					n("ul", null, [
+						n("li", null, [n("i", { class: "fa-regular fa-star" }), r(": ikonra kattintva megjelölhető a készlet alapértelmezettként. Ekkor az oldal következő betöltésekor automatikusan az itt megadott szűrők lesznek alkalmazva. ")]),
+						n("li", null, [n("i", { class: "fa-solid fa-check" }), r(": ikonra kattintva tölthetők be a készletek. Megnyomásakor a szűrési feltételek automatikusan kitöltődnek az elmentett értékekkel. ")]),
+						n("li", null, [n("span", { class: "c-indicator" }, "?"), r(": azt mutatja, hogy hány szűrési feltétel van a készletben. ")]),
+						n("li", null, [n("i", { class: "fa-solid fa-xmark" }), r(": a mentett szűrőkészlet törlése (a művelet megerősítést kér). ")])
+					]),
+					n("p", { class: "dl-guide-note" }, [
+						r("Táblázatonként maximum "),
+						n("strong", null, "20"),
+						r(" készlet menthető el.")
+					]),
+					n("p", null, " A lista alján található \"Összes törlése\" gombbal törölhető a táblához tartozó minden elmentett szűrőkészlet. "),
+					n("p", { class: "dl-guide-note" }, [n("strong", null, "Fontos:"), r(" a beállítások és a szűrők is csak böngészőben (localStorage) kerülnek tárolásra, ezért más eszközön vagy böngészőben nem lesznek elérhetőek. ")])
+				], -1)
+			], 512)]),
 			_: 1
-		}, 8, ["model-value"])) : o("", !0), i.showSearch ? (f(), a(t, {
-			key: 1,
-			type: "text",
-			clearable: "",
-			"model-value": b.value,
-			inputClass: "data-search-input",
-			"label-on-border": "Keresés",
-			placeholder: i.placeholder,
-			autocomplete: !1,
-			"onUpdate:modelValue": E
-		}, null, 8, ["model-value", "placeholder"])) : o("", !0)]));
+		}, 8, ["open", "position"]));
 	}
 });
 //#endregion
-export { _ as default, g as getDefaultSearch };
+export { _ as default };

package/dist/admins-components97.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components97.js","names":[],"sources":["../src/components/data-table/DataSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DataSearchProps {\n  showExactMatch?: boolean\n  showSearch?: boolean\n  placeholder?: string\n  handleUrl?: boolean\n  searchKey?: string\n  exactMatchKey?: string\n}\n\nexport interface DefaultSearch {\n  search?: string\n  exactMatch?: boolean | undefined\n}\n\n/**\n * Resolve the initial search state from the URL.\n * URL is the only source — there is no localStorage fallback for search.\n */\nexport function getDefaultSearch(\n  searchKey = 'search',\n  exactMatchKey = 'exactMatch',\n): DefaultSearch {\n  const params = new URLSearchParams(\n    typeof window === 'undefined' ? '' : window.location.search,\n  )\n  const search = params.get(searchKey) ?? ''\n  const exactRaw = params.get(exactMatchKey)\n  const exactMatch = exactRaw === 'true' || exactRaw === '1'\n    ? true\n    : exactRaw === 'false' || exactRaw === '0'\n    ? false\n    : undefined\n  return filterEmptyValues({ search, exactMatch })\n}\n</script>\n\n<script setup lang=\"ts\">\nimport Checkbox from '@/components/Checkbox.vue'\nimport TextInput from '@/components/TextInput.vue'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport { debounce } from '@/utils/debounce'\nimport { onMounted, ref } from 'vue'\nimport { filterEmptyValues } from '@/utils/dataFilters'\n\nconst props = withDefaults(\n  defineProps<DataSearchProps>(),\n  {\n    showExactMatch: true,\n    showSearch: true,\n    placeholder: 'Keresés...',\n    handleUrl: false,\n    searchKey: 'search',\n    exactMatchKey: 'exactMatch',\n  },\n)\n\ntype SearchFilterPayload = { [k: string]: string | boolean }\n\n// Seed refs from URL synchronously at setup so the input shows the URL value\n// on first render. URL is the only persistent source for search.\nconst initial = getDefaultSearch(props.searchKey, props.exactMatchKey)\nconst exactMatch = ref<boolean | undefined>(initial.exactMatch)\nconst search = ref<string>(initial.search ?? '')\n\nconst emit = defineEmits<{\n  'search-change': [filters: SearchFilterPayload]\n}>()\n\nfunction emitChange() {\n  const filters: SearchFilterPayload = {}\n  if (props.showSearch) filters[props.searchKey] = search.value\n  if (props.showExactMatch) filters[props.exactMatchKey] = exactMatch.value ?? false\n  emit('search-change', filters)\n}\n\nfunction syncToUrl() {\n  writeUrlOrRemove(props.searchKey, search.value, { handleUrl: props.handleUrl })\n  writeUrlOrRemove(props.exactMatchKey, exactMatch.value ?? false, {\n    handleUrl: props.handleUrl,\n    default: false,\n  })\n}\n\nconst debouncedSyncToUrl = debounce(syncToUrl, 300)\n\nfunction onCheckboxChange(value: boolean | undefined) {\n  exactMatch.value = value\n  emitChange()\n  debouncedSyncToUrl()\n}\n\nfunction onSearchChange(value: string | number | null) {\n  search.value = value == null ? '' : String(value).trim()\n  emitChange()\n  debouncedSyncToUrl()\n}\n\nonMounted(() => {\n  if (!props.handleUrl) return\n  // If we had URL values at setup, push them up to the parent now.\n  if (search.value || (exactMatch.value ?? false)) emitChange()\n})\n</script>\n<template>\n  <div class=\"data-search-wrapper\">\n    <Checkbox\n      v-if=\"showExactMatch\"\n      :model-value=\"exactMatch\"\n      class=\"gap-1\"\n      @update:model-value=\"onCheckboxChange\"\n    >\n      <template #label>\n        <span class=\"data-search-label\">Pontos<br />egyezés </span>\n      </template>\n    </Checkbox>\n    <TextInput\n      v-if=\"showSearch\"\n      type=\"text\"\n      clearable\n      :model-value=\"search\"\n      inputClass=\"data-search-input\"\n      label-on-border=\"Keresés\"\n      :placeholder=\"placeholder\"\n      :autocomplete=\"false\"\n      @update:model-value=\"onSearchChange\"\n    />\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-search.scss\"></style>\n"],"mappings":";;;;;;;;AAmBA,SAAgB,EACd,IAAY,UACZ,IAAgB,cACD;CACf,IAAM,IAAS,IAAI,gBACjB,OAAO,SAAW,MAAc,KAAK,OAAO,SAAS,MACvD,GACM,IAAS,EAAO,IAAI,CAAS,KAAK,IAClC,IAAW,EAAO,IAAI,CAAa;CAMzC,OAAO,EAAkB;EAAE;EAAQ,YALhB,MAAa,UAAU,MAAa,MACnD,KACA,MAAa,WAAW,MAAa,MACrC,KACA,KAAA;CAC0C,CAAC;AACjD;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAM,IAAQ,GAgBR,IAAU,EAAiB,EAAM,WAAW,EAAM,aAAa,GAC/D,IAAa,EAAyB,EAAQ,UAAU,GACxD,IAAS,EAAY,EAAQ,UAAU,EAAE,GAEzC,IAAO;EAIb,SAAS,IAAa;GACpB,IAAM,IAA+B,CAAC;GAGtC,AAFI,EAAM,eAAY,EAAQ,EAAM,aAAa,EAAO,QACpD,EAAM,mBAAgB,EAAQ,EAAM,iBAAiB,EAAW,SAAS,KAC7E,EAAK,iBAAiB,CAAO;EAC/B;EAEA,SAAS,IAAY;GAEnB,AADA,EAAiB,EAAM,WAAW,EAAO,OAAO,EAAE,WAAW,EAAM,UAAU,CAAC,GAC9E,EAAiB,EAAM,eAAe,EAAW,SAAS,IAAO;IAC/D,WAAW,EAAM;IACjB,SAAS;GACX,CAAC;EACH;EAEA,IAAM,IAAqB,EAAS,GAAW,GAAG;EAElD,SAAS,EAAiB,GAA4B;GAGpD,AAFA,EAAW,QAAQ,GACnB,EAAW,GACX,EAAmB;EACrB;EAEA,SAAS,EAAe,GAA+B;GAGrD,AAFA,EAAO,QAAQ,KAAS,OAAO,KAAK,OAAO,CAAK,EAAE,KAAK,GACvD,EAAW,GACX,EAAmB;EACrB;SAEA,QAAgB;GACT,EAAM,cAEP,EAAO,UAAU,EAAW,SAAS,QAAQ,EAAW;EAC9D,CAAC,mBAGC,EAsBM,OAtBN,GAsBM,CApBI,EAAA,kBAAA,EAAA,GADR,EASW,GAAA;;GAPR,eAAa,EAAA;GACd,OAAM;GACL,uBAAoB;;GAEV,OAAK,QAC6C,CAAA,GAAA,AAAA,EAAA,OAAA,CAA3D,EAA2D,QAAA,EAArD,OAAM,oBAAmB,GAAA;MAAC,QAAM;IAAA,EAAM,IAAA;MAAA,UAAQ;;;uCAIhD,EAAA,cAAA,EAAA,GADR,EAUE,GAAA;;GARA,MAAK;GACL,WAAA;GACC,eAAa,EAAA;GACd,YAAW;GACX,mBAAgB;GACf,aAAa,EAAA;GACb,cAAc;GACd,uBAAoB"}
+{"version":3,"file":"admins-components97.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\n          <strong><em>\"piros alma\"</em></strong\n          >, <strong><em>\"almafa\"</em></strong\n          >, <strong><em>\"alma\"</em></strong> vagy <strong><em>\"almás pite\"</em></strong> is találat\n          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ó 4 ikon:</p>\n        <ul>\n          <li>\n            <i class=\"fa-regular fa-star\"></i>: ikonra kattintva megjelölhető a készlet\n            alapértelmezettként. Ekkor az oldal következő betöltésekor automatikusan az itt megadott\n            szűrők lesznek alkalmazva.\n          </li>\n\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":"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"}

package/dist/admins-components99.js

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

package/dist/admins-components99.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components99.js","names":[],"sources":["../src/components/data-table/DataSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DataSearchProps {\n  showExactMatch?: boolean\n  showSearch?: boolean\n  placeholder?: string\n  handleUrl?: boolean\n  searchKey?: string\n  exactMatchKey?: string\n}\n\nexport interface DefaultSearch {\n  search?: string\n  exactMatch?: boolean | undefined\n}\n\n/**\n * Resolve the initial search state from the URL.\n * URL is the only source — there is no localStorage fallback for search.\n */\nexport function getDefaultSearch(\n  searchKey = 'search',\n  exactMatchKey = 'exactMatch',\n): DefaultSearch {\n  const params = new URLSearchParams(\n    typeof window === 'undefined' ? '' : window.location.search,\n  )\n  const search = params.get(searchKey) ?? ''\n  const exactRaw = params.get(exactMatchKey)\n  const exactMatch = exactRaw === 'true' || exactRaw === '1'\n    ? true\n    : exactRaw === 'false' || exactRaw === '0'\n    ? false\n    : undefined\n  return filterEmptyValues({ search, exactMatch })\n}\n</script>\n\n<script setup lang=\"ts\">\nimport Checkbox from '@/components/Checkbox.vue'\nimport TextInput from '@/components/TextInput.vue'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport { debounce } from '@/utils/debounce'\nimport { onMounted, ref } from 'vue'\nimport { filterEmptyValues } from '@/utils/dataFilters'\n\nconst props = withDefaults(\n  defineProps<DataSearchProps>(),\n  {\n    showExactMatch: true,\n    showSearch: true,\n    placeholder: 'Keresés...',\n    handleUrl: false,\n    searchKey: 'search',\n    exactMatchKey: 'exactMatch',\n  },\n)\n\ntype SearchFilterPayload = { [k: string]: string | boolean }\n\n// Seed refs from URL synchronously at setup so the input shows the URL value\n// on first render. URL is the only persistent source for search.\nconst initial = getDefaultSearch(props.searchKey, props.exactMatchKey)\nconst exactMatch = ref<boolean | undefined>(initial.exactMatch)\nconst search = ref<string>(initial.search ?? '')\n\nconst emit = defineEmits<{\n  'search-change': [filters: SearchFilterPayload]\n}>()\n\nfunction emitChange() {\n  const filters: SearchFilterPayload = {}\n  if (props.showSearch) filters[props.searchKey] = search.value\n  if (props.showExactMatch) filters[props.exactMatchKey] = exactMatch.value ?? false\n  emit('search-change', filters)\n}\n\nfunction syncToUrl() {\n  writeUrlOrRemove(props.searchKey, search.value, { handleUrl: props.handleUrl })\n  writeUrlOrRemove(props.exactMatchKey, exactMatch.value ?? false, {\n    handleUrl: props.handleUrl,\n    default: false,\n  })\n}\n\nconst debouncedSyncToUrl = debounce(syncToUrl, 300)\n\nfunction onCheckboxChange(value: boolean | undefined) {\n  exactMatch.value = value\n  emitChange()\n  debouncedSyncToUrl()\n}\n\nfunction onSearchChange(value: string | number | null) {\n  search.value = value == null ? '' : String(value).trim()\n  emitChange()\n  debouncedSyncToUrl()\n}\n\nonMounted(() => {\n  if (!props.handleUrl) return\n  // If we had URL values at setup, push them up to the parent now.\n  if (search.value || (exactMatch.value ?? false)) emitChange()\n})\n</script>\n<template>\n  <div class=\"data-search-wrapper\">\n    <Checkbox\n      v-if=\"showExactMatch\"\n      :model-value=\"exactMatch\"\n      class=\"gap-1\"\n      @update:model-value=\"onCheckboxChange\"\n    >\n      <template #label>\n        <span class=\"data-search-label\">Pontos<br />egyezés </span>\n      </template>\n    </Checkbox>\n    <TextInput\n      v-if=\"showSearch\"\n      type=\"text\"\n      clearable\n      :model-value=\"search\"\n      inputClass=\"data-search-input\"\n      label-on-border=\"Keresés\"\n      :placeholder=\"placeholder\"\n      :autocomplete=\"false\"\n      @update:model-value=\"onSearchChange\"\n    />\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-search.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components99.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\n          <strong><em>\"piros alma\"</em></strong\n          >, <strong><em>\"almafa\"</em></strong\n          >, <strong><em>\"alma\"</em></strong> vagy <strong><em>\"almás pite\"</em></strong> is találat\n          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ó 4 ikon:</p>\n        <ul>\n          <li>\n            <i class=\"fa-regular fa-star\"></i>: ikonra kattintva megjelölhető a készlet\n            alapértelmezettként. Ekkor az oldal következő betöltésekor automatikusan az itt megadott\n            szűrők lesznek alkalmazva.\n          </li>\n\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/src/components/Button.vue.d.ts

@@ -13,10 +13,6 @@ export interface ButtonProps {
     disabled?: boolean | (() => boolean);
     indicator?: string | number;
     labelAlignmentFix?: boolean;
-    /**
-     * Optional extra class(es) appended to the root `<button>`. Useful when a
-     * caller wants to add one-off styling without modifying component SCSS.
-     */
     class?: string;
 }
 export declare const buttonDefaults: {

package/dist/src/components/DropdownMenu.vue.d.ts

@@ -20,10 +20,6 @@ export interface DropdownMenuProps {
     type?: ButtonType;
     items: DropdownMenuItem[];
     labelAlignmentFix?: boolean;
-    /**
-     * Optional extra class(es) appended to the trigger `<button>`. Useful when
-     * a caller wants to add one-off styling without modifying component SCSS.
-     */
     class?: string;
 }
 declare const _default: typeof __VLS_export;

package/dist/src/components/data-table/DataList.vue.d.ts

@@ -18,11 +18,6 @@ export interface DataListProps {
     useFilters?: boolean;
     searchConfig?: DataSearchProps;
     filterConfig?: DataFiltersProps;
-    /**
-     * If true, the table wrapper fills its parent column instead of capping
-     * at `--data-list-max-height`. The parent must be a flex column with a
-     * definite height for the tbody to scroll inside the wrapper.
-     */
     fillHeight?: boolean;
 }
 export declare const dataListDefaults: {

package/dist/src/components/data-table/DataSearch.vue.d.ts

@@ -10,10 +10,6 @@ export interface DefaultSearch {
     search?: string;
     exactMatch?: boolean | undefined;
 }
-/**
- * Resolve the initial search state from the URL.
- * URL is the only source — there is no localStorage fallback for search.
- */
 export declare function getDefaultSearch(searchKey?: string, exactMatchKey?: string): DefaultSearch;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/src/components/data-table/DataSort.vue.d.ts

@@ -14,11 +14,6 @@ export interface DataSortProps {
     handleUrl?: boolean;
     disabled?: boolean;
 }
-/**
- * Resolve the initial sort state from the URL.
- * URL is the only source — there is no localStorage fallback for sort.
- * Returns `null` if no valid `sortBy` + `sortDir` pair is present in the URL.
- */
 export declare function getDefaultSort(): {
     key: string;
     direction: SortDirection;

package/dist/src/components/data-table/FilterTags.vue.d.ts

@@ -3,12 +3,6 @@ type __VLS_Props = {
     filters: Record<string, any>;
     items: FilterItem[];
     itemClass?: string;
-    /**
-     * When `true`, daterange/datetimerange tags are rendered in compact mode:
-     * the two dates stack under the key on separate lines, with a smaller
-     * font and tighter line-height. When `false` (the default), daterange
-     * tags render inline as a single line, identical to the legacy behavior.
-     */
     compact?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {

package/dist/src/components/data-table/TagList.vue.d.ts

@@ -0,0 +1,18 @@
+interface TagListProps {
+    items: Array<string | {
+        label?: string;
+        id?: string | number;
+    }>;
+    visibleCount?: number;
+    class?: string;
+}
+declare const __VLS_export: import('vue').DefineComponent<TagListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TagListProps> & Readonly<{}>, {
+    class: string;
+    items: Array<string | {
+        label?: string;
+        id?: string | number;
+    }>;
+    visibleCount: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/index.d.ts

@@ -64,7 +64,7 @@ export { deepMerge } from './utils/objects';
 export { isIpInUrl } from './utils/ipUtils';
 export { joinUrl, getUrlParam, setUrlParam, removeUrlParam, navigateIframe } from './utils/url';
 export { getCurrentSite } from './utils/cmsContext';
-export { dataListConverters, utcToLocalString, localToLocalString, shortUuid, textEllipse, booleanToString, enumMap, formatNumber, formatCurrency, listToString, identity, } from './utils/dataListConverters';
+export { dataListConverters, utcToLocalString, localToLocalString, shortUuid, textEllipse, booleanToString, enumMap, formatNumber, formatCurrency, listToString, tagList, identity, } from './utils/dataListConverters';
 export { vTooltip } from './directives/tooltip';
 export type { ArticleSeriesDetails, AuthorDetails, ColumnDetails, DigitalSupplementDetails, IdsPayload, PartnerDetails, PresenceWidgetConfig, RelationCount, SearchArticleSeriesResult, SearchAuthorsPayload, SearchAuthorsResult, SearchColumnsPayload, SearchColumnsResult, SearchDigitalSupplementsPayload, SearchDigitalSupplementsResult, SearchEntityPayload, SearchImagesWidgetConfig, SearchPartnersResult, SearchPostWidgetConfig, SearchTagsPayload, SearchTagsResult, Site, TagDetails, UserInfoModel, WidgetDetailsResponse, } from './services/models';
 export { toast } from './services/toast';

package/dist/src/styles/components/data-table/tag-list.scss_vue_type_style_index_0_src_true_lang.css

@@ -0,0 +1 @@
+.ac-component .tag-list{flex-wrap:wrap;align-items:center;gap:.1875rem .25rem;max-width:100%;display:inline-flex}.ac-component .tag-list__item{text-overflow:ellipsis;white-space:nowrap;max-width:12rem;overflow:hidden}.ac-component .tag-list__toggle{border:1px solid var(--neutral-200);background:var(--neutral-100);min-width:1.625rem;height:1.25rem;color:var(--neutral-700);font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;padding:0 .375rem;font-size:.6875rem;font-weight:600;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.ac-component .tag-list__toggle:hover{background:var(--neutral-150,var(--neutral-100));border-color:var(--neutral-300);color:var(--neutral-900)}.ac-component .tag-list__toggle:focus-visible{outline:none;box-shadow:0 0 0 2px #f265222e}.ac-component .tag-list__toggle--collapse{min-width:1.25rem;padding:0 .25rem}

package/dist/src/utils/dataListConverters.d.ts

@@ -7,7 +7,21 @@ export declare function booleanToString(trueLabel?: string, falseLabel?: string,
 export declare function enumMap<T = unknown>(map: Record<string, T>, fallback?: T): Converter;
 export declare function formatNumber(decimals?: number, locale?: string): Converter;
 export declare function formatCurrency(currencyCode?: string, locale?: string, decimals?: number): Converter;
-export declare function listToString(separator?: string): Converter;
+export declare function listToString(separator?: string, boldFirstItem?: boolean): Converter;
+/**
+ * Converter that renders an array of values as a collapsed tag list.
+ *
+ * - `visibleCount` controls how many items show before the `+N` toggle.
+ *   The component lets the user expand to show every item, and re-collapse
+ *   via a small chevron. Expansion state is per-cell (one per row).
+ * - `class` is forwarded to the wrapping element.
+ *
+ * Returns a Vue `VNode` so the toggle state can persist within the cell.
+ */
+export declare function tagList(options?: {
+    visibleCount?: number;
+    class?: string;
+}): Converter;
 export declare const identity: Converter;
 export declare const dataListConverters: {
     readonly utcToLocalString: typeof utcToLocalString;
@@ -19,6 +33,7 @@ export declare const dataListConverters: {
     readonly formatNumber: typeof formatNumber;
     readonly formatCurrency: typeof formatCurrency;
     readonly listToString: typeof listToString;
+    readonly tagList: typeof tagList;
     readonly identity: Converter;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admins-components",
-  "version": "9.0.66",
+  "version": "9.0.67",
   "type": "module",
   "module": "./dist/admins-components.js",
   "types": "./dist/index.d.ts",

package/dist/admins-components104.js

@@ -1,4 +0,0 @@
-//#region src/utils/cmsContext.ts
-var e = () => window.cmsContext?.currentSite;
-//#endregion
-export { e as getCurrentSite };

package/dist/admins-components104.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"admins-components104.js","names":[],"sources":["../src/utils/cmsContext.ts"],"sourcesContent":["export const getCurrentSite = (): string | undefined => {\n    return (window as any).cmsContext?.currentSite\n}\n"],"mappings":";AAAA,IAAa,UACD,OAAe,YAAY"}

package/dist/admins-components167.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"admins-components167.js","names":[],"sources":["../src/vueformelements/config/ImagePickerElementConfig.ts"],"sourcesContent":["export interface ImagePickerElementConfig {\n  environment: string\n  articleEditorUrl: string\n  searchImageWidgetUrl: string\n  imageBaseUrl: string\n  imageViewId: string\n}\n\nexport let ipeConfig: ImagePickerElementConfig = (window as any).config?.imagePicker || {}\n\nexport function configureImagePickerElement(ipec: ImagePickerElementConfig) {\n  ipeConfig = {\n    ...ipeConfig,\n    ...ipec,\n  }\n\n  return ipeConfig\n}\n"],"mappings":";AAQA,IAAW,IAAuC,OAAe,QAAQ,eAAe,CAAC;AAEzF,SAAgB,EAA4B,GAAgC;CAM1E,OALA,IAAY;EACV,GAAG;EACH,GAAG;CACL,GAEO;AACT"}

package/dist/admins-components171.js

@@ -1,10 +0,0 @@
-//#region src/vueformelements/config/ExternalArticleOfferElementConfig.ts
-var e = window.config?.externalArticleOfferElement || {};
-function t(t) {
-	return e = {
-		...e,
-		...t
-	}, e;
-}
-//#endregion
-export { t as configureExternalArticleOfferElement, e as eaoeConfig };

package/dist/admins-components171.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"admins-components171.js","names":[],"sources":["../src/vueformelements/config/ExternalArticleOfferElementConfig.ts"],"sourcesContent":["import type { Article } from '@/components/custom/ExternalArticleOffer.vue'\n\nexport interface ExternalArticleOfferElementConfig {\n  formats: { label: string; value: string }[]\n  onArticleUrlChanged: (url: string, callback: (article: Article) => void) => void\n}\n\nexport let eaoeConfig: ExternalArticleOfferElementConfig =\n  (window as any).config?.externalArticleOfferElement || {}\n\nexport function configureExternalArticleOfferElement(conf: ExternalArticleOfferElementConfig) {\n  eaoeConfig = {\n    ...eaoeConfig,\n    ...conf,\n  }\n\n  return eaoeConfig\n}\n"],"mappings":";AAOA,IAAW,IACR,OAAe,QAAQ,+BAA+B,CAAC;AAE1D,SAAgB,EAAqC,GAAyC;CAM5F,OALA,IAAa;EACX,GAAG;EACH,GAAG;CACL,GAEO;AACT"}