admins-components 9.0.75 → 9.0.76
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.
- package/dist/admins-components.js +16 -16
- package/dist/admins-components100.js +1 -1
- package/dist/admins-components100.js.map +1 -1
- package/dist/admins-components102.js +4 -4
- package/dist/admins-components103.js +2 -2
- package/dist/admins-components103.js.map +1 -1
- package/dist/admins-components105.js +4 -4
- package/dist/admins-components11.js +6 -6
- package/dist/admins-components110.js +1 -1
- package/dist/admins-components110.js.map +1 -1
- package/dist/admins-components111.js +2 -2
- package/dist/admins-components111.js.map +1 -1
- package/dist/admins-components112.js.map +1 -1
- package/dist/admins-components113.js +1 -1
- package/dist/admins-components113.js.map +1 -1
- package/dist/admins-components115.js +144 -126
- package/dist/admins-components115.js.map +1 -1
- package/dist/admins-components116.js +7 -5
- package/dist/admins-components116.js.map +1 -1
- package/dist/admins-components117.js +1 -1
- package/dist/admins-components117.js.map +1 -1
- package/dist/admins-components118.js +75 -27
- package/dist/admins-components118.js.map +1 -1
- package/dist/admins-components119.js +30 -6
- package/dist/admins-components119.js.map +1 -1
- package/dist/admins-components12.js.map +1 -1
- package/dist/admins-components120.js +34 -20
- package/dist/admins-components120.js.map +1 -1
- package/dist/admins-components121.js +1 -3
- package/dist/admins-components121.js.map +1 -1
- package/dist/admins-components122.js +4 -3
- package/dist/admins-components122.js.map +1 -1
- package/dist/admins-components124.js +2 -1
- package/dist/admins-components124.js.map +1 -1
- package/dist/admins-components129.js +1 -1
- package/dist/admins-components129.js.map +1 -1
- package/dist/admins-components13.js +2 -2
- package/dist/admins-components13.js.map +1 -1
- package/dist/admins-components132.js +23 -15
- package/dist/admins-components132.js.map +1 -1
- package/dist/admins-components133.js.map +1 -1
- package/dist/admins-components14.js +4 -4
- package/dist/admins-components141.js +2 -2
- package/dist/admins-components141.js.map +1 -1
- package/dist/admins-components142.js.map +1 -1
- package/dist/admins-components143.js +5 -1
- package/dist/admins-components143.js.map +1 -1
- package/dist/admins-components144.js +1 -1
- package/dist/admins-components144.js.map +1 -1
- package/dist/admins-components145.js +4 -1
- package/dist/admins-components145.js.map +1 -1
- package/dist/admins-components146.js +30 -6
- package/dist/admins-components146.js.map +1 -1
- package/dist/admins-components147.js +64 -54
- package/dist/admins-components147.js.map +1 -1
- package/dist/admins-components148.js +8 -25
- package/dist/admins-components148.js.map +1 -1
- package/dist/admins-components149.js +26 -56
- package/dist/admins-components149.js.map +1 -1
- package/dist/admins-components150.js +56 -21
- package/dist/admins-components150.js.map +1 -1
- package/dist/admins-components151.js +27 -45
- package/dist/admins-components151.js.map +1 -1
- package/dist/admins-components152.js +48 -29
- package/dist/admins-components152.js.map +1 -1
- package/dist/admins-components153.js +48 -3
- package/dist/admins-components153.js.map +1 -1
- package/dist/admins-components154.js +3 -179
- package/dist/admins-components154.js.map +1 -1
- package/dist/admins-components155.js +200 -42
- package/dist/admins-components155.js.map +1 -1
- package/dist/admins-components156.js +44 -35
- package/dist/admins-components156.js.map +1 -1
- package/dist/admins-components157.js +35 -44
- package/dist/admins-components157.js.map +1 -1
- package/dist/admins-components158.js +42 -137
- package/dist/admins-components158.js.map +1 -1
- package/dist/admins-components159.js +146 -51
- package/dist/admins-components159.js.map +1 -1
- package/dist/admins-components16.js +2 -2
- package/dist/admins-components16.js.map +1 -1
- package/dist/admins-components160.js +58 -7
- package/dist/admins-components160.js.map +1 -1
- package/dist/admins-components161.js +6 -5
- package/dist/admins-components161.js.map +1 -1
- package/dist/admins-components162.js +6 -76
- package/dist/admins-components162.js.map +1 -1
- package/dist/admins-components163.js +77 -29
- package/dist/admins-components163.js.map +1 -1
- package/dist/admins-components164.js +29 -1931
- package/dist/admins-components164.js.map +1 -1
- package/dist/admins-components165.js +1743 -24631
- package/dist/admins-components165.js.map +1 -1
- package/dist/admins-components166.js +24788 -8
- package/dist/admins-components166.js.map +1 -1
- package/dist/admins-components167.js +9 -7
- package/dist/admins-components167.js.map +1 -0
- package/dist/admins-components168.js +7 -142
- package/dist/admins-components169.js +141 -8
- package/dist/admins-components169.js.map +1 -1
- package/dist/admins-components17.js +3 -3
- package/dist/admins-components170.js +3 -3
- package/dist/admins-components170.js.map +1 -1
- package/dist/admins-components171.js +10 -0
- package/dist/admins-components171.js.map +1 -0
- package/dist/admins-components173.js +160 -45
- package/dist/admins-components173.js.map +1 -1
- package/dist/admins-components174.js +52 -8
- package/dist/admins-components174.js.map +1 -1
- package/dist/admins-components175.js +8 -49
- package/dist/admins-components175.js.map +1 -1
- package/dist/admins-components176.js +50 -6
- package/dist/admins-components176.js.map +1 -1
- package/dist/admins-components177.js +6 -80
- package/dist/admins-components177.js.map +1 -1
- package/dist/admins-components178.js +71 -48
- package/dist/admins-components178.js.map +1 -1
- package/dist/admins-components179.js +30 -35
- package/dist/admins-components179.js.map +1 -1
- package/dist/admins-components18.js +1 -1
- package/dist/admins-components18.js.map +1 -1
- package/dist/admins-components180.js +62 -8
- package/dist/admins-components180.js.map +1 -1
- package/dist/admins-components181.js +8 -51
- package/dist/admins-components181.js.map +1 -1
- package/dist/admins-components182.js +51 -8
- package/dist/admins-components182.js.map +1 -1
- package/dist/admins-components183.js +10 -0
- package/dist/admins-components183.js.map +1 -0
- package/dist/{admins-components184.js → admins-components185.js} +5 -5
- package/dist/{admins-components184.js.map → admins-components185.js.map} +1 -1
- package/dist/admins-components20.js +1 -1
- package/dist/admins-components21.js +10 -6
- package/dist/admins-components21.js.map +1 -1
- package/dist/admins-components22.js +4 -4
- package/dist/admins-components23.js +1 -1
- package/dist/admins-components23.js.map +1 -1
- package/dist/admins-components25.js +1 -1
- package/dist/admins-components26.js +107 -106
- package/dist/admins-components26.js.map +1 -1
- package/dist/admins-components28.js +4 -4
- package/dist/admins-components28.js.map +1 -1
- package/dist/admins-components29.js +1 -1
- package/dist/admins-components29.js.map +1 -1
- package/dist/admins-components3.js +1 -3
- package/dist/admins-components3.js.map +1 -1
- package/dist/admins-components30.js +1 -1
- package/dist/admins-components31.js.map +1 -1
- package/dist/admins-components32.js +2 -2
- package/dist/admins-components32.js.map +1 -1
- package/dist/admins-components34.js +4 -4
- package/dist/admins-components35.js +2 -2
- package/dist/admins-components35.js.map +1 -1
- package/dist/admins-components37.js +4 -4
- package/dist/admins-components38.js +1 -1
- package/dist/admins-components38.js.map +1 -1
- package/dist/admins-components40.js +1 -1
- package/dist/admins-components41.js +1 -1
- package/dist/admins-components41.js.map +1 -1
- package/dist/admins-components43.js +1 -1
- package/dist/admins-components43.js.map +1 -1
- package/dist/admins-components45.js +1 -1
- package/dist/admins-components46.js +1 -1
- package/dist/admins-components46.js.map +1 -1
- package/dist/admins-components48.js +1 -1
- package/dist/admins-components49.js +1 -1
- package/dist/admins-components49.js.map +1 -1
- package/dist/admins-components5.js +2 -2
- package/dist/admins-components5.js.map +1 -1
- package/dist/admins-components51.js +1 -1
- package/dist/admins-components51.js.map +1 -1
- package/dist/admins-components54.js +1 -1
- package/dist/admins-components54.js.map +1 -1
- package/dist/admins-components56.js +1 -1
- package/dist/admins-components57.js +1 -1
- package/dist/admins-components57.js.map +1 -1
- package/dist/admins-components6.js +3 -3
- package/dist/admins-components62.js +1 -1
- package/dist/admins-components62.js.map +1 -1
- package/dist/admins-components64.js +1 -1
- package/dist/admins-components65.js.map +1 -1
- package/dist/admins-components66.js +1 -1
- package/dist/admins-components66.js.map +1 -1
- package/dist/admins-components68.js +5 -5
- package/dist/admins-components68.js.map +1 -1
- package/dist/admins-components7.js +1 -1
- package/dist/admins-components7.js.map +1 -1
- package/dist/admins-components70.js +1 -1
- package/dist/admins-components71.js +1 -1
- package/dist/admins-components71.js.map +1 -1
- package/dist/admins-components73.js +1 -1
- package/dist/admins-components74.js +1 -1
- package/dist/admins-components74.js.map +1 -1
- package/dist/admins-components75.js +1 -1
- package/dist/admins-components75.js.map +1 -1
- package/dist/admins-components77.js +1 -1
- package/dist/admins-components78.js +1 -1
- package/dist/admins-components79.js +1 -1
- package/dist/admins-components79.js.map +1 -1
- package/dist/admins-components8.js +2 -2
- package/dist/admins-components8.js.map +1 -1
- package/dist/admins-components80.js +2 -2
- package/dist/admins-components80.js.map +1 -1
- package/dist/admins-components82.js +4 -4
- package/dist/admins-components83.js +1 -1
- package/dist/admins-components83.js.map +1 -1
- package/dist/admins-components85.js +4 -4
- package/dist/admins-components86.js.map +1 -1
- package/dist/admins-components87.js +6 -4
- package/dist/admins-components87.js.map +1 -1
- package/dist/admins-components88.js +4 -4
- package/dist/admins-components88.js.map +1 -1
- package/dist/admins-components90.js +1 -1
- package/dist/admins-components91.js +1 -1
- package/dist/admins-components91.js.map +1 -1
- package/dist/admins-components93.js +1 -1
- package/dist/admins-components94.js +1 -1
- package/dist/admins-components94.js.map +1 -1
- package/dist/admins-components96.js +1 -1
- package/dist/admins-components97.js +1 -1
- package/dist/admins-components97.js.map +1 -1
- package/dist/admins-components99.js +1 -1
- package/dist/main.css +1 -1
- package/dist/main.css.map +1 -1
- package/dist/src/composables/useDropdownAnchor.d.ts +0 -11
- package/dist/{src/styles → styles}/components/data-table/filter-tags.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/dropdown-select.scss_vue_type_style_index_0_src_true_lang.css +1 -0
- package/package.json +1 -1
- package/dist/admins-components168.js.map +0 -1
- package/dist/admins-components172.js +0 -169
- package/dist/admins-components172.js.map +0 -1
- package/dist/src/styles/components/dropdown-select.scss_vue_type_style_index_0_src_true_lang.css +0 -1
- /package/dist/{src/styles → styles}/components/calendar.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/copy-to-clipboard.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/data-cards.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/data-filters.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/data-list-guide.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/data-list-options.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/data-list.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/data-paginator.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/data-search.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/data-sort.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/data-table.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/filters-history.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/data-table/tag-list.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/datepickers.scss_vue_type_style_index_1_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/header.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/image-picker.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/loader.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/modal.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/sidebar.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/styles → styles}/components/toast-notification.scss_vue_type_style_index_0_src_true_lang.css +0 -0
- /package/dist/{src/vueformelements → vueformelements}/ArticlePickerElement.vue_vue_type_style_index_0_scoped_43c54caa_lang.css +0 -0
- /package/dist/{src/vueformelements → vueformelements}/PartnerPickerElement.vue_vue_type_style_index_0_scoped_09bea4ae_lang.css +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import "./admins-components7.js";
|
|
2
|
-
import
|
|
1
|
+
import { dateRangePickerConfigDefaults as e } from "./admins-components7.js";
|
|
2
|
+
import t from "./admins-components21.js";
|
|
3
3
|
//#region src/components/DateRangePicker.vue
|
|
4
|
-
var
|
|
4
|
+
var n = t;
|
|
5
5
|
//#endregion
|
|
6
|
-
export {
|
|
6
|
+
export { e as dateRangePickerConfigDefaults, n as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createElementBlock as e, defineComponent as t, normalizeStyle as n, openBlock as r } from "vue";
|
|
2
2
|
//#region src/components/Loader.vue?vue&type=script&setup=true&lang.ts
|
|
3
|
-
var i =
|
|
3
|
+
var i = /*@__PURE__*/ t({
|
|
4
4
|
__name: "Loader",
|
|
5
5
|
props: {
|
|
6
6
|
loading: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components23.js","names":[],"sources":["../src/components/Loader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nwithDefaults(\n defineProps<{\n loading?: boolean\n size?: string\n color?: string\n }>(),\n {\n loading: true,\n size: '2rem',\n color: 'var(--site-500)',\n },\n)\n</script>\n<template>\n <div\n class=\"loader\"\n :style=\"{\n width: size,\n '--loader-thickness': `calc(${size} / 6)`,\n '--loader-color': color,\n }\"\n ></div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/loader.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"admins-components23.js","names":[],"sources":["../src/components/Loader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nwithDefaults(\n defineProps<{\n loading?: boolean\n size?: string\n color?: string\n }>(),\n {\n loading: true,\n size: '2rem',\n color: 'var(--site-500)',\n },\n)\n</script>\n<template>\n <div\n class=\"loader\"\n :style=\"{\n width: size,\n '--loader-thickness': `calc(${size} / 6)`,\n '--loader-color': color,\n }\"\n ></div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/loader.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;oBAeE,EAAA,GAAA,EAOO,OAAA;GANL,OAAM;GACL,OAAK,EAAA;IAAiB,OAAA,EAAA;IAA0C,sBAAA,QAAA,EAAA,KAAI;IAAiC,kBAAA,EAAA"}
|
|
@@ -1,26 +1,27 @@
|
|
|
1
1
|
import e from "./admins-components6.js";
|
|
2
|
-
import t from "./admins-
|
|
3
|
-
import
|
|
2
|
+
import { useDropdownAnchor as t } from "./admins-components12.js";
|
|
3
|
+
import n from "./admins-components25.js";
|
|
4
|
+
import { Fragment as r, Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as ee, defineComponent as u, nextTick as d, normalizeClass as f, normalizeStyle as te, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, watch as v, withModifiers as y } from "vue";
|
|
4
5
|
//#region src/components/DropdownSelect.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
-
var
|
|
6
|
+
var ne = { class: "ac-component" }, b = ["aria-disabled"], x = {
|
|
6
7
|
key: 0,
|
|
7
8
|
class: "c-truncate ds-value"
|
|
8
|
-
},
|
|
9
|
+
}, S = {
|
|
9
10
|
key: 1,
|
|
10
11
|
class: "c-placeholder"
|
|
11
|
-
},
|
|
12
|
+
}, re = { class: "ac-component" }, ie = {
|
|
12
13
|
key: 0,
|
|
13
14
|
class: "ds-filter"
|
|
14
|
-
},
|
|
15
|
+
}, ae = ["title"], C = ["value", "placeholder"], w = { class: "ds-options c-scroll" }, T = {
|
|
15
16
|
key: 0,
|
|
16
17
|
class: "ds-option ds-option--loading"
|
|
17
|
-
},
|
|
18
|
+
}, oe = ["onClick", "onKeydown"], E = ["innerHTML"], D = {
|
|
18
19
|
key: 0,
|
|
19
20
|
class: "ds-option ds-option--empty"
|
|
20
|
-
},
|
|
21
|
+
}, O = {
|
|
21
22
|
key: 1,
|
|
22
23
|
class: "c-footer"
|
|
23
|
-
},
|
|
24
|
+
}, k = {
|
|
24
25
|
placeholder: "Válassz...",
|
|
25
26
|
filterable: !0,
|
|
26
27
|
filterPlaceholder: "Kezdj el gépelni...",
|
|
@@ -32,45 +33,48 @@ var v = { class: "ac-component" }, ne = ["aria-disabled"], re = {
|
|
|
32
33
|
size: "normal",
|
|
33
34
|
highlight: !0,
|
|
34
35
|
disabled: !1
|
|
35
|
-
},
|
|
36
|
+
}, A = /*@__PURE__*/ u({
|
|
36
37
|
__name: "DropdownSelect",
|
|
37
38
|
props: {
|
|
38
39
|
modelValue: { default: null },
|
|
39
40
|
options: {},
|
|
40
|
-
config: { default: () => ({ ...
|
|
41
|
+
config: { default: () => ({ ...k }) }
|
|
41
42
|
},
|
|
42
43
|
emits: ["update:modelValue", "filter-input"],
|
|
43
|
-
setup(
|
|
44
|
-
let j =
|
|
45
|
-
...
|
|
44
|
+
setup(u, { expose: A, emit: se }) {
|
|
45
|
+
let j = u, M = a(() => ({
|
|
46
|
+
...k,
|
|
46
47
|
...j.config
|
|
47
|
-
})), N =
|
|
48
|
-
|
|
48
|
+
})), N = se, P = m(""), F = m(null), I = m(null), L = m(null), R = m([]), z = m(H(j.modelValue, j.options)), { isOpen: B, dropdownStyle: V } = t(F, I, { extraStyle: (e) => ({
|
|
49
|
+
minWidth: `${e.width}px`,
|
|
50
|
+
maxWidth: `${e.width * 1.5}px`
|
|
51
|
+
}) });
|
|
52
|
+
function H(e, t) {
|
|
49
53
|
return e == null ? [] : (Array.isArray(e) ? e : [e]).map((e) => e == null ? null : typeof e == "object" && "label" in e ? e : typeof e == "string" ? t.find((t) => t.value === e) ?? {
|
|
50
54
|
value: e,
|
|
51
55
|
label: e
|
|
52
56
|
} : null).filter((e) => e !== null);
|
|
53
57
|
}
|
|
54
|
-
|
|
55
|
-
z.value =
|
|
56
|
-
}),
|
|
57
|
-
e && (
|
|
58
|
+
v(() => [j.modelValue, j.options], ([e]) => {
|
|
59
|
+
z.value = H(e, j.options);
|
|
60
|
+
}), v(B, (e) => {
|
|
61
|
+
e && (P.value = "", M.value.filterable && d(() => L.value?.focus()), M.value.lazy && (R.value = [...z.value]));
|
|
58
62
|
});
|
|
59
|
-
function
|
|
60
|
-
|
|
63
|
+
function U(e) {
|
|
64
|
+
P.value = e, N("filter-input", e);
|
|
61
65
|
}
|
|
62
|
-
let
|
|
66
|
+
let W = a(() => {
|
|
63
67
|
if (z.value.length === 0) return null;
|
|
64
68
|
if (!M.value.multiple) {
|
|
65
69
|
let e = z.value[0];
|
|
66
70
|
return j.options.find((t) => t.value === e?.value)?.label ?? e?.label ?? null;
|
|
67
71
|
}
|
|
68
72
|
return z.value.length > 2 ? `${z.value.length} kiválasztva` : z.value.map((e) => j.options.find((t) => t.value === e.value)?.label ?? e.label ?? e.value).join(", ");
|
|
69
|
-
}),
|
|
70
|
-
let e =
|
|
73
|
+
}), G = a(() => {
|
|
74
|
+
let e = P.value.toLowerCase();
|
|
71
75
|
return e ? j.options.filter((t) => t.label.toLowerCase().includes(e)) : j.options;
|
|
72
76
|
});
|
|
73
|
-
function
|
|
77
|
+
function K(e) {
|
|
74
78
|
return e.replace(/[&<>"']/g, (e) => ({
|
|
75
79
|
"&": "&",
|
|
76
80
|
"<": "<",
|
|
@@ -79,23 +83,23 @@ var v = { class: "ac-component" }, ne = ["aria-disabled"], re = {
|
|
|
79
83
|
"'": "'"
|
|
80
84
|
})[e]);
|
|
81
85
|
}
|
|
82
|
-
function
|
|
83
|
-
let t =
|
|
84
|
-
if (!t || !M.value.highlight) return
|
|
85
|
-
let n =
|
|
86
|
+
function ce(e) {
|
|
87
|
+
let t = P.value.trim();
|
|
88
|
+
if (!t || !M.value.highlight) return K(e);
|
|
89
|
+
let n = K(e), r = K(t), i = new RegExp(r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "ig");
|
|
86
90
|
return n.replace(i, (e) => `<mark class="ds-option__highlight">${e}</mark>`);
|
|
87
91
|
}
|
|
88
|
-
let
|
|
89
|
-
if (
|
|
90
|
-
let e = M.value.lazy &&
|
|
91
|
-
return
|
|
92
|
+
let q = a(() => G.value.filter((e) => e.value)), J = a(() => {
|
|
93
|
+
if (q.value.length === 0) return !1;
|
|
94
|
+
let e = M.value.lazy && B.value ? R.value : z.value;
|
|
95
|
+
return q.value.every((t) => t.value && e.some((e) => e.value === t.value));
|
|
92
96
|
});
|
|
93
|
-
function
|
|
94
|
-
return (M.value.lazy &&
|
|
97
|
+
function Y(e) {
|
|
98
|
+
return (M.value.lazy && B.value ? R : z).value.some((t) => t.value === e);
|
|
95
99
|
}
|
|
96
|
-
function
|
|
97
|
-
let e = M.value.lazy &&
|
|
98
|
-
if (
|
|
100
|
+
function le() {
|
|
101
|
+
let e = M.value.lazy && B.value ? R : z, t = q.value.filter((e) => e.value);
|
|
102
|
+
if (J.value) {
|
|
99
103
|
let n = new Set(t.map((e) => e.value));
|
|
100
104
|
e.value = e.value.filter((e) => !n.has(e.value ?? ""));
|
|
101
105
|
} else {
|
|
@@ -110,128 +114,125 @@ var v = { class: "ac-component" }, ne = ["aria-disabled"], re = {
|
|
|
110
114
|
}
|
|
111
115
|
function Z(e) {
|
|
112
116
|
if (e.callback) {
|
|
113
|
-
e.callback(),
|
|
117
|
+
e.callback(), B.value = !1;
|
|
114
118
|
return;
|
|
115
119
|
}
|
|
116
|
-
e.value && (M.value.multiple ? M.value.lazy ? R.value = X(R.value, e) : (z.value = X(z.value, e), N("update:modelValue", z.value.length > 0 ? [...z.value] : null)) : (z.value = [e], N("update:modelValue", e),
|
|
120
|
+
e.value && (M.value.multiple ? M.value.lazy ? R.value = X(R.value, e) : (z.value = X(z.value, e), N("update:modelValue", z.value.length > 0 ? [...z.value] : null)) : (z.value = [e], N("update:modelValue", e), B.value = !1));
|
|
117
121
|
}
|
|
118
122
|
function Q() {
|
|
119
|
-
M.value.lazy && (z.value = [...R.value], N("update:modelValue", R.value.length > 0 ? [...R.value] : null)),
|
|
123
|
+
M.value.lazy && (z.value = [...R.value], N("update:modelValue", R.value.length > 0 ? [...R.value] : null)), B.value = !1;
|
|
120
124
|
}
|
|
121
|
-
function
|
|
125
|
+
function $() {
|
|
122
126
|
M.value.lazy ? R.value = [] : (z.value = [], N("update:modelValue", null));
|
|
123
127
|
}
|
|
124
|
-
function
|
|
128
|
+
function ue(e, t) {
|
|
125
129
|
e.key === " " ? (e.preventDefault(), Z(t)) : e.key === "Enter" && (e.preventDefault(), Q());
|
|
126
130
|
}
|
|
127
|
-
function
|
|
128
|
-
|
|
129
|
-
}
|
|
130
|
-
d(() => document.addEventListener("mousedown", $)), te(() => {
|
|
131
|
-
document.removeEventListener("mousedown", $);
|
|
132
|
-
});
|
|
133
|
-
function se() {
|
|
134
|
-
M.value.disabled || (P.value = !P.value, P.value && M.value.filterable && (F.value = "", N("filter-input", "")));
|
|
131
|
+
function de() {
|
|
132
|
+
M.value.disabled || (B.value = !B.value, B.value && M.value.filterable && (P.value = "", N("filter-input", "")));
|
|
135
133
|
}
|
|
136
|
-
function
|
|
137
|
-
M.value.disabled || (z.value = [], N("update:modelValue", null),
|
|
134
|
+
function fe() {
|
|
135
|
+
M.value.disabled || (z.value = [], N("update:modelValue", null), B.value = !1);
|
|
138
136
|
}
|
|
139
|
-
function
|
|
140
|
-
M.value.disabled || (
|
|
137
|
+
function pe() {
|
|
138
|
+
M.value.disabled || (B.value = !0, M.value.filterable && d(() => L.value?.focus()));
|
|
141
139
|
}
|
|
142
|
-
function
|
|
143
|
-
|
|
140
|
+
function me() {
|
|
141
|
+
P.value = "", N("filter-input", "");
|
|
144
142
|
}
|
|
145
|
-
return
|
|
143
|
+
return A({ focusAndOpen: pe }), (t, a) => (p(), c("div", ne, [l("div", {
|
|
146
144
|
ref_key: "wrapperRef",
|
|
147
|
-
ref:
|
|
145
|
+
ref: F,
|
|
148
146
|
class: "c-wrapper ds-wrapper"
|
|
149
|
-
}, [
|
|
150
|
-
class:
|
|
147
|
+
}, [l("div", {
|
|
148
|
+
class: f(["c-input-row pointer", {
|
|
151
149
|
"c-input-row--sm": M.value.size === "small",
|
|
152
150
|
"c-input-row--lg": M.value.size === "large",
|
|
153
151
|
"c-input-row--disabled": M.value.disabled
|
|
154
152
|
}]),
|
|
155
153
|
"aria-disabled": M.value.disabled || void 0,
|
|
156
|
-
onClick:
|
|
154
|
+
onClick: a[1] ||= (e) => de()
|
|
157
155
|
}, [
|
|
158
|
-
|
|
159
|
-
M.value.clearable && z.value.length > 0 ? (
|
|
156
|
+
W.value ? (p(), c("span", x, g(W.value), 1)) : (p(), c("span", S, g(M.value.placeholder), 1)),
|
|
157
|
+
M.value.clearable && z.value.length > 0 ? (p(), c("button", {
|
|
160
158
|
key: 2,
|
|
161
159
|
type: "button",
|
|
162
160
|
class: "c-icon-btn c-icon-btn--clear ds-clear-btn",
|
|
163
|
-
onClick:
|
|
161
|
+
onClick: a[0] ||= y((e) => fe(), ["stop"]),
|
|
164
162
|
"aria-label": "Törlés"
|
|
165
|
-
}, [...
|
|
166
|
-
|
|
167
|
-
], 10,
|
|
163
|
+
}, [...a[6] ||= [l("i", { class: "fa-solid fa-fw fa-xmark" }, null, -1)]])) : s("", !0),
|
|
164
|
+
l("span", { class: f(["c-icon-btn c-icon-btn--chevron mr-2", { "c-icon-btn--chevron-open": _(B) }]) }, [...a[7] ||= [l("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
|
|
165
|
+
], 10, b)], 512), (p(), o(i, { to: "body" }, [l("div", re, [_(B) ? (p(), c("div", {
|
|
168
166
|
key: 0,
|
|
169
|
-
|
|
167
|
+
ref_key: "dropdownRef",
|
|
168
|
+
ref: I,
|
|
169
|
+
class: f(["c-dropdown ds-dropdown ds-wrapper", { "ds-dropdown--multiple": M.value.multiple }]),
|
|
170
|
+
style: te(_(V))
|
|
170
171
|
}, [
|
|
171
|
-
M.value.filterable ? (
|
|
172
|
-
M.value.multiple ? (
|
|
172
|
+
M.value.filterable ? (p(), c("div", ie, [
|
|
173
|
+
M.value.multiple ? (p(), c("span", {
|
|
173
174
|
key: 0,
|
|
174
|
-
class:
|
|
175
|
-
onClick:
|
|
176
|
-
title:
|
|
177
|
-
}, null, 10,
|
|
178
|
-
|
|
175
|
+
class: f(["c-checkbox ds-select-all-checkbox", { "c-checkbox--checked": J.value }]),
|
|
176
|
+
onClick: a[2] ||= y((e) => le(), ["stop"]),
|
|
177
|
+
title: J.value ? "Összes kijelölés törlése" : "Összes kijelölése"
|
|
178
|
+
}, null, 10, ae)) : s("", !0),
|
|
179
|
+
l("input", {
|
|
179
180
|
ref_key: "filterInputRef",
|
|
180
181
|
ref: L,
|
|
181
182
|
type: "text",
|
|
182
183
|
id: "ds-filter-input",
|
|
183
184
|
class: "c-focus ds-filter-input",
|
|
184
|
-
value:
|
|
185
|
-
onInput:
|
|
185
|
+
value: P.value,
|
|
186
|
+
onInput: a[3] ||= (e) => U(e.target.value),
|
|
186
187
|
autocomplete: "off",
|
|
187
188
|
placeholder: M.value.filterPlaceholder,
|
|
188
|
-
onClick:
|
|
189
|
-
}, null, 40,
|
|
190
|
-
|
|
189
|
+
onClick: a[4] ||= y(() => {}, ["stop"])
|
|
190
|
+
}, null, 40, C),
|
|
191
|
+
P.value ? (p(), c("button", {
|
|
191
192
|
key: 1,
|
|
192
193
|
type: "button",
|
|
193
194
|
class: "c-icon-btn c-icon-btn--clear ds-filter-clear",
|
|
194
|
-
onClick:
|
|
195
|
+
onClick: a[5] ||= y((e) => me(), ["stop"]),
|
|
195
196
|
"aria-label": "Szűrők törlése"
|
|
196
|
-
}, [...
|
|
197
|
-
])) :
|
|
198
|
-
|
|
197
|
+
}, [...a[8] ||= [l("i", { class: "fa-solid fa-xmark" }, null, -1)]])) : s("", !0)
|
|
198
|
+
])) : s("", !0),
|
|
199
|
+
l("ul", w, [M.value.loading ? (p(), c("li", T, [ee(n, {
|
|
199
200
|
size: "2rem",
|
|
200
201
|
color: "var(--neutral-300)",
|
|
201
202
|
class: "m-auto p-3"
|
|
202
|
-
})])) : (
|
|
203
|
+
})])) : (p(), c(r, { key: 1 }, [(p(!0), c(r, null, h(G.value, (e, t) => (p(), c("li", {
|
|
203
204
|
key: e.value ?? `cb-${t}`,
|
|
204
|
-
class:
|
|
205
|
+
class: f(["d-option ds-option", { "ds-option--selected": e.value && Y(e.value) }]),
|
|
205
206
|
tabindex: "0",
|
|
206
207
|
onClick: (t) => Z(e),
|
|
207
|
-
onKeydown: (t) =>
|
|
208
|
+
onKeydown: (t) => ue(t, e)
|
|
208
209
|
}, [
|
|
209
|
-
M.value.multiple && e.value ? (
|
|
210
|
+
M.value.multiple && e.value ? (p(), c("span", {
|
|
210
211
|
key: 0,
|
|
211
|
-
class:
|
|
212
|
-
}, null, 2)) :
|
|
213
|
-
e.icon ? (
|
|
212
|
+
class: f(["c-checkbox", { "c-checkbox--checked": Y(e.value) }])
|
|
213
|
+
}, null, 2)) : s("", !0),
|
|
214
|
+
e.icon ? (p(), c("i", {
|
|
214
215
|
key: 1,
|
|
215
|
-
class:
|
|
216
|
-
}, null, 2)) :
|
|
217
|
-
|
|
218
|
-
class:
|
|
219
|
-
innerHTML:
|
|
220
|
-
}, null, 10,
|
|
221
|
-
], 42,
|
|
222
|
-
M.value.multiple || M.value.clearable && z.value.length > 0 ? (
|
|
216
|
+
class: f(["fa-fw", e.icon])
|
|
217
|
+
}, null, 2)) : s("", !0),
|
|
218
|
+
l("span", {
|
|
219
|
+
class: f(["d-option__label", { "c-truncate": M.value.textEllipsis }]),
|
|
220
|
+
innerHTML: ce(e.label)
|
|
221
|
+
}, null, 10, E)
|
|
222
|
+
], 42, oe))), 128)), G.value.length === 0 ? (p(), c("li", D, " Nincs találat ")) : s("", !0)], 64))]),
|
|
223
|
+
M.value.multiple || M.value.clearable && z.value.length > 0 ? (p(), c("div", O, [M.value.clearable ? (p(), o(e, {
|
|
223
224
|
key: 0,
|
|
224
225
|
label: "Törlés",
|
|
225
226
|
outline: "",
|
|
226
|
-
onClick:
|
|
227
|
-
})) :
|
|
227
|
+
onClick: $
|
|
228
|
+
})) : s("", !0), M.value.multiple ? (p(), o(e, {
|
|
228
229
|
key: 1,
|
|
229
230
|
label: "OK",
|
|
230
231
|
type: "success",
|
|
231
232
|
onClick: Q
|
|
232
|
-
})) :
|
|
233
|
-
],
|
|
233
|
+
})) : s("", !0)])) : s("", !0)
|
|
234
|
+
], 6)) : s("", !0)])]))]));
|
|
234
235
|
}
|
|
235
236
|
});
|
|
236
237
|
//#endregion
|
|
237
|
-
export {
|
|
238
|
+
export { A as default, k as dropdownSelectConfigDefaults };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components26.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption | DropdownOption[] | 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'\nimport Loader from '@/components/Loader.vue'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption | DropdownOption[] | null]\n 'filter-input': [filterText: string]\n}>()\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\n\nfunction normalizeToOptions(\n val: DropdownOption | DropdownOption[] | string | string[] | null | undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption | null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\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\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n //debouncedEmit(text)\n}\n\n/* const debouncedEmit = debounce((raw: string) => {\n emit('filter-input', raw)\n}) */\n\n// Display\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n // Prefer the label from the live options list, fall back to the stored label\n return props.options.find((o) => o.value === sel?.value)?.label ?? sel?.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .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\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q || !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\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.some((s) => s.value === o.value))\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value ?? ''))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\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: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\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, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\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(() => {\n document.removeEventListener('mousedown', onClickOutside)\n})\n\nfunction toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\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 'c-input-row--disabled': cfg.disabled,\n }\"\n :aria-disabled=\"cfg.disabled || undefined\"\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 :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\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=\"handleFilterClear()\"\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 v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\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\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(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 </template>\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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"}
|
|
1
|
+
{"version":3,"file":"admins-components26.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption | DropdownOption[] | string | string[] | null\n options: DropdownOption[]\n config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\nimport Loader from '@/components/Loader.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption | DropdownOption[] | null]\n 'filter-input': [filterText: string]\n}>()\n\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({\n minWidth: `${rect.width}px`,\n maxWidth: `${rect.width * 1.5}px`,\n }),\n})\n\n\nfunction normalizeToOptions(\n val: DropdownOption | DropdownOption[] | string | string[] | null | undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption | null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\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\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n //debouncedEmit(text)\n}\n\n/* const debouncedEmit = debounce((raw: string) => {\n emit('filter-input', raw)\n}) */\n\n// Display\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n // Prefer the label from the live options list, fall back to the stored label\n return props.options.find((o) => o.value === sel?.value)?.label ?? sel?.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .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\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q || !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\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.some((s) => s.value === o.value))\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value ?? ''))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\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: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\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, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\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 toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\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 'c-input-row--disabled': cfg.disabled,\n }\"\n :aria-disabled=\"cfg.disabled || undefined\"\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 </div>\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div\n v-if=\"isOpen\"\n ref=\"dropdownRef\"\n class=\"c-dropdown ds-dropdown ds-wrapper\"\n :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n :style=\"dropdownStyle\"\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 :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\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=\"handleFilterClear()\"\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 v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\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\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(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 </template>\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 </Teleport>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import './
|
|
2
|
-
import e from "./admins-components26.js";
|
|
1
|
+
import './styles/components/dropdown-select.scss_vue_type_style_index_0_src_true_lang.css';
|
|
2
|
+
import e, { dropdownSelectConfigDefaults as t } from "./admins-components26.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/components/DropdownSelect.vue
|
|
5
|
-
var
|
|
5
|
+
var n = e;
|
|
6
6
|
//#endregion
|
|
7
|
-
export {
|
|
7
|
+
export { n as default, t as dropdownSelectConfigDefaults };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components28.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption | DropdownOption[] | 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'\nimport Loader from '@/components/Loader.vue'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption | DropdownOption[] | null]\n 'filter-input': [filterText: string]\n}>()\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\n\nfunction normalizeToOptions(\n val: DropdownOption | DropdownOption[] | string | string[] | null | undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption | null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\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\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n //debouncedEmit(text)\n}\n\n/* const debouncedEmit = debounce((raw: string) => {\n emit('filter-input', raw)\n}) */\n\n// Display\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n // Prefer the label from the live options list, fall back to the stored label\n return props.options.find((o) => o.value === sel?.value)?.label ?? sel?.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .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\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q || !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\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.some((s) => s.value === o.value))\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value ?? ''))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\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: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\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, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\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(() => {\n document.removeEventListener('mousedown', onClickOutside)\n})\n\nfunction toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\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 'c-input-row--disabled': cfg.disabled,\n }\"\n :aria-disabled=\"cfg.disabled || undefined\"\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 :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\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=\"handleFilterClear()\"\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 v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\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\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(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 </template>\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":""}
|
|
1
|
+
{"version":3,"file":"admins-components28.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption | DropdownOption[] | string | string[] | null\n options: DropdownOption[]\n config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\nimport Loader from '@/components/Loader.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption | DropdownOption[] | null]\n 'filter-input': [filterText: string]\n}>()\n\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({\n minWidth: `${rect.width}px`,\n maxWidth: `${rect.width * 1.5}px`,\n }),\n})\n\n\nfunction normalizeToOptions(\n val: DropdownOption | DropdownOption[] | string | string[] | null | undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption | null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\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\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n //debouncedEmit(text)\n}\n\n/* const debouncedEmit = debounce((raw: string) => {\n emit('filter-input', raw)\n}) */\n\n// Display\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n // Prefer the label from the live options list, fall back to the stored label\n return props.options.find((o) => o.value === sel?.value)?.label ?? sel?.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .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\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q || !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\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.some((s) => s.value === o.value))\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value ?? ''))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\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: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\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, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\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 toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\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 'c-input-row--disabled': cfg.disabled,\n }\"\n :aria-disabled=\"cfg.disabled || undefined\"\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 </div>\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div\n v-if=\"isOpen\"\n ref=\"dropdownRef\"\n class=\"c-dropdown ds-dropdown ds-wrapper\"\n :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n :style=\"dropdownStyle\"\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 :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\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=\"handleFilterClear()\"\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 v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\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\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(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 </template>\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 </Teleport>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}
|
|
@@ -2,7 +2,7 @@ import { sizeToClass as e } from "./admins-components4.js";
|
|
|
2
2
|
import { useDropdownAnchor as t } from "./admins-components12.js";
|
|
3
3
|
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, vShow as g, withDirectives as _ } from "vue";
|
|
4
4
|
//#region src/components/DropdownMenu.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
-
var v = ["aria-label"], y = { class: "ac-component" }, b = { class: "ds-options c-scroll" }, x = ["onClick", "aria-label"], S =
|
|
5
|
+
var v = ["aria-label"], y = { class: "ac-component" }, b = { class: "ds-options c-scroll" }, x = ["onClick", "aria-label"], S = /*@__PURE__*/ c({
|
|
6
6
|
__name: "DropdownMenu",
|
|
7
7
|
props: {
|
|
8
8
|
size: { default: "normal" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components29.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 class?: string\n callback: () => void\n disabled?: () => boolean\n hidden?: () => boolean\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 class?: string\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 closeOnScroll: true,\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 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 props.class,\n ]\"\n :aria-label=\"ariaLabel ?? label\"\n @click=\"toggleOpen()\"\n >\n <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n <span\n v-if=\"label\"\n class=\"btn-label\"\n :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\"\n >{{ label }}</span\n >\n\n <span class=\"c-icon-btn c-icon-btn--chevron\" :class=\"{ 'c-icon-btn--chevron-open': isOpen }\">\n <i class=\"fa-solid fa-chevron-down\" :class=\"{ 'fa-fw': !!label }\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"c-dropdown ds-wrapper\" :style=\"dropdownStyle\">\n <ul class=\"ds-options c-scroll\">\n <li\n v-for=\"(item, idx) in items\"\n v-show=\"!item.hidden?.()\"\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 'is-disabled': item.disabled?.(),\n [item.class!]: !!item.class,\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 </div>\n </Teleport>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAiCA,IAAM,IAAQ,GASR,IAAa,EAAwB,IAAI,GACzC,IAAc,EAAwB,IAAI,GAC1C,EAAE,WAAQ,qBAAkB,EAAkB,GAAY,GAAa;GAC3E,aAAa,OAAU;IACrB,UAAU,GAAG,EAAK,MAAM;IACxB,UAAU,GAAG,EAAK,QAAQ,EAAE;GAC9B;GACA,eAAe;EACjB,CAAC;EAED,SAAS,IAAa;GACpB,EAAO,QAAQ,CAAC,EAAO;EACzB;EAEA,SAAS,EAAW,GAAwB;GAE1C,AADA,EAAK,WAAW,GAChB,EAAO,QAAQ;EACjB;
|
|
1
|
+
{"version":3,"file":"admins-components29.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 class?: string\n callback: () => void\n disabled?: () => boolean\n hidden?: () => boolean\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 class?: string\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 closeOnScroll: true,\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 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 props.class,\n ]\"\n :aria-label=\"ariaLabel ?? label\"\n @click=\"toggleOpen()\"\n >\n <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n <span\n v-if=\"label\"\n class=\"btn-label\"\n :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\"\n >{{ label }}</span\n >\n\n <span class=\"c-icon-btn c-icon-btn--chevron\" :class=\"{ 'c-icon-btn--chevron-open': isOpen }\">\n <i class=\"fa-solid fa-chevron-down\" :class=\"{ 'fa-fw': !!label }\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"c-dropdown ds-wrapper\" :style=\"dropdownStyle\">\n <ul class=\"ds-options c-scroll\">\n <li\n v-for=\"(item, idx) in items\"\n v-show=\"!item.hidden?.()\"\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 'is-disabled': item.disabled?.(),\n [item.class!]: !!item.class,\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 </div>\n </Teleport>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAiCA,IAAM,IAAQ,GASR,IAAa,EAAwB,IAAI,GACzC,IAAc,EAAwB,IAAI,GAC1C,EAAE,WAAQ,qBAAkB,EAAkB,GAAY,GAAa;GAC3E,aAAa,OAAU;IACrB,UAAU,GAAG,EAAK,MAAM;IACxB,UAAU,GAAG,EAAK,QAAQ,EAAE;GAC9B;GACA,eAAe;EACjB,CAAC;EAED,SAAS,IAAa;GACpB,EAAO,QAAQ,CAAC,EAAO;EACzB;EAEA,SAAS,EAAW,GAAwB;GAE1C,AADA,EAAK,WAAW,GAChB,EAAO,QAAQ;EACjB;oBAIE,EAAA,GAAA,EAsDM,OAAA;GAtDG,SAAA;GAAJ,KAAI;GAAa,OAAM;EAC1B,GAAA,CAAA,EAuBS,UAAA;GAtBP,MAAK;GACL,OAAK,EAAA,CAAC,oBAAkB;IACN,EAAA,SAAI,WAAA;IAAoC,EAAA,SAAI,WAAA;IAAoC,EAAA,SAAI,YAAA,SAA0B,EAAA;IAAgB,EAAM;;GAMrJ,cAAY,EAAA,aAAa,EAAA;GACzB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAU;;GAET,EAAA,QAAT,EAAA,GAAA,EAA+C,KAAA;;IAAhC,OAAK,EAAA,CAAC,SAAgB,EAAA,IAAI,CAAA;;GAEjC,EAAA,SADR,EAAA,GAAA,EAKC,QAAA;;IAHC,OAAK,EAAA,CAAC,aAAW,EAAA,qBACc,EAAM,kBAAiB,CAAA,CAAA;GAClD,GAAA,EAAA,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGX,EAEO,QAAA,EAFD,OAAK,EAAA,CAAC,kCAAgC,EAAA,4BAAuC,EAAA,CAAA,EAAM,CAAA,CAAA,EAAA,GAAA,CACvF,EAAsE,KAAA,EAAnE,OAAK,EAAA,CAAC,4BAA0B,EAAA,SAAA,CAAA,CAAsB,EAAA,MAAK,CAAA,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,CAAA;EAIlE,GAAA,IAAA,CAAA,IAAA,EAAA,GAAA,EA2BW,GAAA,EA3BD,IAAG,OAAM,GAAA,CACjB,EAyBM,OAzBN,GAyBM,CAxBO,EAAA,CAAA,KAAX,EAAA,GAAA,EAuBM,OAAA;;GAvBiB,SAAA;GAAJ,KAAI;GAAc,OAAM;GAAyB,OAAK,EAAE,EAAA,CAAA,CAAa;EACtF,GAAA,CAAA,EAqBK,MArBL,GAqBK,EApBH,EAAA,EAAA,GAAA,EAmBK,GAAA,MAAA,EAlBmB,EAAA,QAAd,GAAM,MADhB,GAAA,EAAA,GAAA,EAmBK,MAAA;GAhBF,KAAG,MAAQ;GACZ,OAAK,EAAA,CAAC,gDAA8C;KACR,iBAAA,EAAA,CAAA,CAAW,CAAC,EAAK,IAAI,MAAM,EAAK;KAAwC,iBAAA,EAAK,SAAS,EAAK;IAAqC,eAAA,EAAK,WAAQ;KAAuB,EAAK,QAAK,CAAA,CAAM,EAAK;;GAMrO,UAAS;GACR,UAAK,MAAE,EAAW,CAAI;GACtB,cAAY,EAAK,aAAa,EAAK;EAE3B,GAAA,CAAA,EAAK,QAAd,EAAA,GAAA,EAAyD,KAAA;;GAArC,OAAK,EAAA,CAAC,SAAgB,EAAK,IAAI,CAAA;EACnD,GAAA,MAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAES,QAAA,EAFH,OAAK,EAAA,CAAC,mBAAiB,EAAA,cAAyB,EAAM,aAAY,CAAA,CAAA,EACtE,GAAA,EAAA,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA,IAAA,CAfH,CAAA,GAAA,CAAA,EAAK,SAAM,CAAA,CAAA,CAAA"}
|