admins-components 9.0.67 → 9.0.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,29 +1,32 @@
|
|
|
1
|
-
import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r,
|
|
1
|
+
import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeClass as a, openBlock as o, ref as s, renderList as c, toDisplayString as l } from "vue";
|
|
2
2
|
//#region src/components/data-table/TagList.vue?vue&type=script&setup=true&lang.ts
|
|
3
|
-
var
|
|
3
|
+
var u = ["aria-expanded", "title"], d = /* @__PURE__ */ i({
|
|
4
4
|
__name: "TagList",
|
|
5
5
|
props: {
|
|
6
6
|
items: { default: () => [] },
|
|
7
7
|
visibleCount: { default: 3 },
|
|
8
8
|
class: { default: void 0 }
|
|
9
9
|
},
|
|
10
|
-
setup(
|
|
11
|
-
let
|
|
12
|
-
function
|
|
10
|
+
setup(i) {
|
|
11
|
+
let d = i, f = s(!1), p = t(() => d.items.length), m = t(() => Math.max(0, p.value - d.visibleCount)), h = t(() => f.value || p.value <= d.visibleCount ? d.items : d.items.slice(0, d.visibleCount)), g = t(() => f.value ? 0 : m.value);
|
|
12
|
+
function _(e) {
|
|
13
13
|
return e == null ? "" : typeof e == "string" ? e : e.label ?? (e.id == null ? "" : String(e.id));
|
|
14
14
|
}
|
|
15
|
-
function
|
|
16
|
-
|
|
15
|
+
function v() {
|
|
16
|
+
f.value = !f.value;
|
|
17
17
|
}
|
|
18
|
-
return (t,
|
|
18
|
+
return (t, i) => (o(), r("span", { class: a(["tag-list", d.class]) }, [(o(!0), r(e, null, c(h.value, (e, t) => (o(), r("span", {
|
|
19
|
+
key: t,
|
|
20
|
+
class: "tag-list__item"
|
|
21
|
+
}, l(_(e)) + l(t < h.value.length - 1 ? "," : ""), 1))), 128)), g.value > 0 ? (o(), r("button", {
|
|
19
22
|
key: 0,
|
|
20
23
|
type: "button",
|
|
21
24
|
class: "tag-list__toggle",
|
|
22
|
-
"aria-expanded":
|
|
23
|
-
title:
|
|
24
|
-
onClick:
|
|
25
|
-
}, " +" +
|
|
25
|
+
"aria-expanded": f.value,
|
|
26
|
+
title: f.value ? "Összecsukás" : `További ${g.value} megjelenítése`,
|
|
27
|
+
onClick: v
|
|
28
|
+
}, " +" + l(g.value), 9, u)) : n("", !0)], 2));
|
|
26
29
|
}
|
|
27
30
|
});
|
|
28
31
|
//#endregion
|
|
29
|
-
export {
|
|
32
|
+
export { d as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components60.js","names":[],"sources":["../src/components/data-table/TagList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\ninterface TagListProps {\n items: Array<string | { label?: string; id?: string | number }>\n visibleCount?: number\n class?: string\n}\n\nconst props = withDefaults(defineProps<TagListProps>(), {\n visibleCount: 3,\n items: () => [],\n class: undefined,\n})\n\nconst expanded = ref(false)\n\nconst total = computed(() => props.items.length)\nconst overflow = computed(() => Math.max(0, total.value - props.visibleCount))\n\nconst visibleItems = computed(() => {\n if (expanded.value || total.value <= props.visibleCount) {\n return props.items\n }\n return props.items.slice(0, props.visibleCount)\n})\n\nconst hiddenCount = computed(() => {\n return expanded.value ? 0 : overflow.value\n})\n\nfunction labelOf(item: TagListProps['items'][number]): string {\n if (item == null) return ''\n if (typeof item === 'string') return item\n return item.label ?? (item.id != null ? String(item.id) : '')\n}\n\nfunction toggle() {\n expanded.value = !expanded.value\n}\n</script>\n\n<template>\n <span class=\"tag-list\" :class=\"props.class\">\n
|
|
1
|
+
{"version":3,"file":"admins-components60.js","names":[],"sources":["../src/components/data-table/TagList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\ninterface TagListProps {\n items: Array<string | { label?: string; id?: string | number }>\n visibleCount?: number\n class?: string\n}\n\nconst props = withDefaults(defineProps<TagListProps>(), {\n visibleCount: 3,\n items: () => [],\n class: undefined,\n})\n\nconst expanded = ref(false)\n\nconst total = computed(() => props.items.length)\nconst overflow = computed(() => Math.max(0, total.value - props.visibleCount))\n\nconst visibleItems = computed(() => {\n if (expanded.value || total.value <= props.visibleCount) {\n return props.items\n }\n return props.items.slice(0, props.visibleCount)\n})\n\nconst hiddenCount = computed(() => {\n return expanded.value ? 0 : overflow.value\n})\n\nfunction labelOf(item: TagListProps['items'][number]): string {\n if (item == null) return ''\n if (typeof item === 'string') return item\n return item.label ?? (item.id != null ? String(item.id) : '')\n}\n\nfunction toggle() {\n expanded.value = !expanded.value\n}\n</script>\n\n<template>\n <span class=\"tag-list\" :class=\"props.class\">\n <span v-for=\"(item, i) in visibleItems\" :key=\"i\" class=\"tag-list__item\"\n >{{ labelOf(item) }}{{ i < visibleItems.length - 1 ? ',' : '' }}</span\n >\n<!-- <template v-for=\"(item, i) in visibleItems\" :key=\"i\"\n >{{ labelOf(item) }}{{ i < visibleItems.length - 1 ? ', ' : '' }}</template\n > -->\n <button\n v-if=\"hiddenCount > 0\"\n type=\"button\"\n class=\"tag-list__toggle\"\n :aria-expanded=\"expanded\"\n :title=\"expanded ? 'Összecsukás' : `További ${hiddenCount} megjelenítése`\"\n @click=\"toggle\"\n >\n +{{ hiddenCount }}\n </button>\n <!-- <button\n v-else-if=\"expanded && total > visibleCount\"\n type=\"button\"\n class=\"tag-list__toggle tag-list__toggle--collapse\"\n :aria-expanded=\"expanded\"\n title=\"Összecsukás\"\n @click=\"toggle\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-up\" aria-hidden=\"true\"></i>\n </button> -->\n </span>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/tag-list.scss\"></style>\n"],"mappings":";;;;;;;;;;EASA,IAAM,IAAQ,GAMR,IAAW,EAAI,EAAK,GAEpB,IAAQ,QAAe,EAAM,MAAM,MAAM,GACzC,IAAW,QAAe,KAAK,IAAI,GAAG,EAAM,QAAQ,EAAM,YAAY,CAAC,GAEvE,IAAe,QACf,EAAS,SAAS,EAAM,SAAS,EAAM,eAClC,EAAM,QAER,EAAM,MAAM,MAAM,GAAG,EAAM,YAAY,CAC/C,GAEK,IAAc,QACX,EAAS,QAAQ,IAAI,EAAS,KACtC;EAED,SAAS,EAAQ,GAA6C;GAG5D,OAFI,KAAQ,OAAa,KACrB,OAAO,KAAS,WAAiB,IAC9B,EAAK,UAAU,EAAK,MAAM,OAAyB,KAAlB,OAAO,EAAK,EAAE;EACxD;EAEA,SAAS,IAAS;GAChB,EAAS,QAAQ,CAAC,EAAS;EAC7B;yBAIE,EA2BO,QAAA,EA3BD,OAAK,EAAA,CAAC,YAAmB,EAAM,KAAK,CAAA,EAAA,GAAA,EAAA,EAAA,EAAA,GACxC,EAEC,GAAA,MAAA,EAFyB,EAAA,QAAZ,GAAM,YAApB,EAEC,QAAA;GAFwC,KAAK;GAAG,OAAM;OACjD,EAAQ,CAAI,CAAA,IAAA,EAAO,IAAI,EAAA,MAAa,SAAM,IAAA,MAAA,EAAA,GAAA,CAAA,YAMxC,EAAA,QAAW,KAAA,EAAA,GADnB,EASS,UAAA;;GAPP,MAAK;GACL,OAAM;GACL,iBAAe,EAAA;GACf,OAAO,EAAA,QAAQ,gBAAA,WAA8B,EAAA,MAAW;GACxD,SAAO;KACT,OACE,EAAG,EAAA,KAAW,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components62.js","names":[],"sources":["../src/components/data-table/TagList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\ninterface TagListProps {\n items: Array<string | { label?: string; id?: string | number }>\n visibleCount?: number\n class?: string\n}\n\nconst props = withDefaults(defineProps<TagListProps>(), {\n visibleCount: 3,\n items: () => [],\n class: undefined,\n})\n\nconst expanded = ref(false)\n\nconst total = computed(() => props.items.length)\nconst overflow = computed(() => Math.max(0, total.value - props.visibleCount))\n\nconst visibleItems = computed(() => {\n if (expanded.value || total.value <= props.visibleCount) {\n return props.items\n }\n return props.items.slice(0, props.visibleCount)\n})\n\nconst hiddenCount = computed(() => {\n return expanded.value ? 0 : overflow.value\n})\n\nfunction labelOf(item: TagListProps['items'][number]): string {\n if (item == null) return ''\n if (typeof item === 'string') return item\n return item.label ?? (item.id != null ? String(item.id) : '')\n}\n\nfunction toggle() {\n expanded.value = !expanded.value\n}\n</script>\n\n<template>\n <span class=\"tag-list\" :class=\"props.class\">\n
|
|
1
|
+
{"version":3,"file":"admins-components62.js","names":[],"sources":["../src/components/data-table/TagList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\ninterface TagListProps {\n items: Array<string | { label?: string; id?: string | number }>\n visibleCount?: number\n class?: string\n}\n\nconst props = withDefaults(defineProps<TagListProps>(), {\n visibleCount: 3,\n items: () => [],\n class: undefined,\n})\n\nconst expanded = ref(false)\n\nconst total = computed(() => props.items.length)\nconst overflow = computed(() => Math.max(0, total.value - props.visibleCount))\n\nconst visibleItems = computed(() => {\n if (expanded.value || total.value <= props.visibleCount) {\n return props.items\n }\n return props.items.slice(0, props.visibleCount)\n})\n\nconst hiddenCount = computed(() => {\n return expanded.value ? 0 : overflow.value\n})\n\nfunction labelOf(item: TagListProps['items'][number]): string {\n if (item == null) return ''\n if (typeof item === 'string') return item\n return item.label ?? (item.id != null ? String(item.id) : '')\n}\n\nfunction toggle() {\n expanded.value = !expanded.value\n}\n</script>\n\n<template>\n <span class=\"tag-list\" :class=\"props.class\">\n <span v-for=\"(item, i) in visibleItems\" :key=\"i\" class=\"tag-list__item\"\n >{{ labelOf(item) }}{{ i < visibleItems.length - 1 ? ',' : '' }}</span\n >\n<!-- <template v-for=\"(item, i) in visibleItems\" :key=\"i\"\n >{{ labelOf(item) }}{{ i < visibleItems.length - 1 ? ', ' : '' }}</template\n > -->\n <button\n v-if=\"hiddenCount > 0\"\n type=\"button\"\n class=\"tag-list__toggle\"\n :aria-expanded=\"expanded\"\n :title=\"expanded ? 'Összecsukás' : `További ${hiddenCount} megjelenítése`\"\n @click=\"toggle\"\n >\n +{{ hiddenCount }}\n </button>\n <!-- <button\n v-else-if=\"expanded && total > visibleCount\"\n type=\"button\"\n class=\"tag-list__toggle tag-list__toggle--collapse\"\n :aria-expanded=\"expanded\"\n title=\"Összecsukás\"\n @click=\"toggle\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-up\" aria-hidden=\"true\"></i>\n </button> -->\n </span>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/tag-list.scss\"></style>\n"],"mappings":""}
|
package/dist/src/styles/components/data-table/tag-list.scss_vue_type_style_index_0_src_true_lang.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ac-component .tag-list{flex-wrap:wrap;align-items:center;gap
|
|
1
|
+
.ac-component .tag-list{flex-wrap:wrap;align-items:center;gap:0 .1875rem;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}
|