admins-components 9.0.42 → 9.0.44
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-components12.js +41 -25
- package/dist/admins-components12.js.map +1 -1
- package/dist/admins-components29.js +9 -5
- package/dist/admins-components29.js.map +1 -1
- package/dist/admins-components30.js.map +1 -1
- package/dist/admins-components58.js.map +1 -1
- package/dist/admins-components63.js +8 -5
- package/dist/admins-components63.js.map +1 -1
- package/dist/admins-components64.js.map +1 -1
- package/dist/src/composables/useDropdownAnchor.d.ts +1 -0
- package/dist/src/styles/components/data-table/data-table.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/src/styles/components/dropdown-select.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/src/types/data-list.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,39 +1,55 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { nextTick as e, onBeforeUnmount as t, onMounted as n, ref as r, watch as i } from "vue";
|
|
2
2
|
//#region src/composables/useDropdownAnchor.ts
|
|
3
|
-
function
|
|
3
|
+
function a(e, t, n) {
|
|
4
4
|
let r = e.target, i = t?.contains(r) ?? !1, a = n?.contains(r) ?? !1;
|
|
5
5
|
return !i && !a;
|
|
6
6
|
}
|
|
7
|
-
function
|
|
8
|
-
let { extraStyle:
|
|
9
|
-
function
|
|
10
|
-
if (!
|
|
11
|
-
let
|
|
12
|
-
|
|
7
|
+
function o(o, s, c = {}) {
|
|
8
|
+
let { extraStyle: l, isOutsideClick: u = a, closeOnScroll: d = !1 } = c, f = r(!1), p = r({});
|
|
9
|
+
function m() {
|
|
10
|
+
if (!o.value) return;
|
|
11
|
+
let t = o.value.getBoundingClientRect();
|
|
12
|
+
p.value = {
|
|
13
13
|
position: "fixed",
|
|
14
|
-
top: `${
|
|
15
|
-
left: `${
|
|
14
|
+
top: `${t.bottom + 2}px`,
|
|
15
|
+
left: `${t.left}px`,
|
|
16
16
|
zIndex: "10001",
|
|
17
|
-
...
|
|
18
|
-
}
|
|
17
|
+
...l ? l(t) : {}
|
|
18
|
+
}, e(() => {
|
|
19
|
+
if (!s.value || !o.value) return;
|
|
20
|
+
let e = s.value.getBoundingClientRect(), t = o.value.getBoundingClientRect(), n = window.innerHeight, r = window.innerWidth, i = e.bottom > n, a = e.right > r, c = i ? `${t.top - e.height - 2}px` : `${t.bottom + 2}px`, u = a ? `${t.right - e.width}px` : `${t.left}px`;
|
|
21
|
+
(i || a) && (p.value = {
|
|
22
|
+
position: "fixed",
|
|
23
|
+
top: c,
|
|
24
|
+
left: u,
|
|
25
|
+
zIndex: "10001",
|
|
26
|
+
...l ? l(t) : {}
|
|
27
|
+
});
|
|
28
|
+
});
|
|
19
29
|
}
|
|
20
|
-
function
|
|
21
|
-
|
|
30
|
+
function h(e) {
|
|
31
|
+
u(e, o.value, s.value) && (f.value = !1);
|
|
22
32
|
}
|
|
23
|
-
function
|
|
24
|
-
|
|
33
|
+
function g() {
|
|
34
|
+
if (f.value) {
|
|
35
|
+
if (d) {
|
|
36
|
+
f.value = !1;
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
m();
|
|
40
|
+
}
|
|
25
41
|
}
|
|
26
|
-
return
|
|
27
|
-
e &&
|
|
42
|
+
return i(f, (e) => {
|
|
43
|
+
e && m();
|
|
44
|
+
}), n(() => {
|
|
45
|
+
document.addEventListener("mousedown", h), window.addEventListener("scroll", g, !0), window.addEventListener("resize", g);
|
|
28
46
|
}), t(() => {
|
|
29
|
-
document.
|
|
30
|
-
}), e(() => {
|
|
31
|
-
document.removeEventListener("mousedown", p), window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m);
|
|
47
|
+
document.removeEventListener("mousedown", h), window.removeEventListener("scroll", g, !0), window.removeEventListener("resize", g);
|
|
32
48
|
}), {
|
|
33
|
-
isOpen:
|
|
34
|
-
dropdownStyle:
|
|
35
|
-
positionDropdown:
|
|
49
|
+
isOpen: f,
|
|
50
|
+
dropdownStyle: p,
|
|
51
|
+
positionDropdown: m
|
|
36
52
|
};
|
|
37
53
|
}
|
|
38
54
|
//#endregion
|
|
39
|
-
export {
|
|
55
|
+
export { o as useDropdownAnchor };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components12.js","names":[],"sources":["../src/composables/useDropdownAnchor.ts"],"sourcesContent":["import { ref, watch, onMounted, onBeforeUnmount } from 'vue'\nimport type { Ref } from 'vue'\n\nexport interface UseDropdownAnchorOptions {\n extraStyle?: (rect: DOMRect) => Record<string, string>\n isOutsideClick?: (\n e: MouseEvent,\n wrapperEl: HTMLElement | null,\n dropdownEl: HTMLElement | null,\n ) => boolean\n}\n\nexport interface UseDropdownAnchorReturn {\n isOpen: Ref<boolean>\n dropdownStyle: Ref<Record<string, string>>\n positionDropdown: () => void\n}\n\nfunction defaultIsOutsideClick(\n e: MouseEvent,\n wrapperEl: HTMLElement | null,\n dropdownEl: HTMLElement | null,\n): boolean {\n const target = e.target as Node\n const inWrapper = wrapperEl?.contains(target) ?? false\n const inDropdown = dropdownEl?.contains(target) ?? false\n return !inWrapper && !inDropdown\n}\n\nexport function useDropdownAnchor(\n wrapperRef: Ref<HTMLElement | null>,\n dropdownRef: Ref<HTMLElement | null>,\n options: UseDropdownAnchorOptions = {},\n): UseDropdownAnchorReturn {\n const { extraStyle, isOutsideClick = defaultIsOutsideClick } = options\n\n const isOpen = ref(false)\n const dropdownStyle = ref<Record<string, string>>({})\n\n function positionDropdown() {\n if (!wrapperRef.value) return\n const rect = wrapperRef.value.getBoundingClientRect()\n dropdownStyle.value = {\n position: 'fixed',\n top: `${rect.bottom + 2}px`,\n left: `${rect.left}px`,\n zIndex: '10001',\n ...(extraStyle ? extraStyle(rect) : {}),\n }\n }\n\n function onClickOutside(e: MouseEvent) {\n if (isOutsideClick(e, wrapperRef.value, dropdownRef.value)) {\n isOpen.value = false\n }\n }\n\n function onScrollOrResize() {\n if (isOpen.value) positionDropdown()\n }\n\n watch(isOpen, (open) => {\n if (open) positionDropdown()\n })\n\n onMounted(() => {\n document.addEventListener('mousedown', onClickOutside)\n\n window.addEventListener('scroll', onScrollOrResize, true)\n window.addEventListener('resize', onScrollOrResize)\n })\n\n onBeforeUnmount(() => {\n document.removeEventListener('mousedown', onClickOutside)\n\n window.removeEventListener('scroll', onScrollOrResize, true)\n window.removeEventListener('resize', onScrollOrResize)\n })\n\n return { isOpen, dropdownStyle, positionDropdown }\n}\n"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"admins-components12.js","names":[],"sources":["../src/composables/useDropdownAnchor.ts"],"sourcesContent":["import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'\nimport type { Ref } from 'vue'\n\nexport interface UseDropdownAnchorOptions {\n extraStyle?: (rect: DOMRect) => Record<string, string>\n isOutsideClick?: (\n e: MouseEvent,\n wrapperEl: HTMLElement | null,\n dropdownEl: HTMLElement | null,\n ) => boolean\n closeOnScroll?: boolean\n}\n\nexport interface UseDropdownAnchorReturn {\n isOpen: Ref<boolean>\n dropdownStyle: Ref<Record<string, string>>\n positionDropdown: () => void\n}\n\nfunction defaultIsOutsideClick(\n e: MouseEvent,\n wrapperEl: HTMLElement | null,\n dropdownEl: HTMLElement | null,\n): boolean {\n const target = e.target as Node\n const inWrapper = wrapperEl?.contains(target) ?? false\n const inDropdown = dropdownEl?.contains(target) ?? false\n return !inWrapper && !inDropdown\n}\n\nexport function useDropdownAnchor(\n wrapperRef: Ref<HTMLElement | null>,\n dropdownRef: Ref<HTMLElement | null>,\n options: UseDropdownAnchorOptions = {},\n): UseDropdownAnchorReturn {\n const { extraStyle, isOutsideClick = defaultIsOutsideClick, closeOnScroll = false } = options\n\n const isOpen = ref(false)\n const dropdownStyle = ref<Record<string, string>>({})\n\n function positionDropdown() {\n if (!wrapperRef.value) return\n const rect = wrapperRef.value.getBoundingClientRect()\n dropdownStyle.value = {\n position: 'fixed',\n top: `${rect.bottom + 2}px`,\n left: `${rect.left}px`,\n zIndex: '10001',\n ...(extraStyle ? extraStyle(rect) : {}),\n }\n nextTick(() => {\n if (!dropdownRef.value || !wrapperRef.value) return\n const dropdownRect = dropdownRef.value.getBoundingClientRect()\n const anchorRect = wrapperRef.value.getBoundingClientRect()\n const viewportHeight = window.innerHeight\n const viewportWidth = window.innerWidth\n\n const flipY = dropdownRect.bottom > viewportHeight\n const flipX = dropdownRect.right > viewportWidth\n\n const top = flipY\n ? `${anchorRect.top - dropdownRect.height - 2}px`\n : `${anchorRect.bottom + 2}px`\n const left = flipX\n ? `${anchorRect.right - dropdownRect.width}px`\n : `${anchorRect.left}px`\n\n if (flipY || flipX) {\n dropdownStyle.value = {\n position: 'fixed',\n top,\n left,\n zIndex: '10001',\n ...(extraStyle ? extraStyle(anchorRect) : {}),\n }\n }\n })\n }\n\n function onClickOutside(e: MouseEvent) {\n if (isOutsideClick(e, wrapperRef.value, dropdownRef.value)) {\n isOpen.value = false\n }\n }\n\n function onScrollOrResize() {\n if (!isOpen.value) return\n if (closeOnScroll) {\n isOpen.value = false\n return\n }\n positionDropdown()\n }\n\n watch(isOpen, (open) => {\n if (open) positionDropdown()\n })\n\n onMounted(() => {\n document.addEventListener('mousedown', onClickOutside)\n\n window.addEventListener('scroll', onScrollOrResize, true)\n window.addEventListener('resize', onScrollOrResize)\n })\n\n onBeforeUnmount(() => {\n document.removeEventListener('mousedown', onClickOutside)\n\n window.removeEventListener('scroll', onScrollOrResize, true)\n window.removeEventListener('resize', onScrollOrResize)\n })\n\n return { isOpen, dropdownStyle, positionDropdown }\n}\n"],"mappings":";;AAmBA,SAAS,EACP,GACA,GACA,GACS;CACT,IAAM,IAAS,EAAE,QACX,IAAY,GAAW,SAAS,CAAM,KAAK,IAC3C,IAAa,GAAY,SAAS,CAAM,KAAK;CACnD,OAAO,CAAC,KAAa,CAAC;AACxB;AAEA,SAAgB,EACd,GACA,GACA,IAAoC,CAAC,GACZ;CACzB,IAAM,EAAE,eAAY,oBAAiB,GAAuB,mBAAgB,OAAU,GAEhF,IAAS,EAAI,EAAK,GAClB,IAAgB,EAA4B,CAAC,CAAC;CAEpD,SAAS,IAAmB;EAC1B,IAAI,CAAC,EAAW,OAAO;EACvB,IAAM,IAAO,EAAW,MAAM,sBAAsB;EAQpD,AAPA,EAAc,QAAQ;GACpB,UAAU;GACV,KAAK,GAAG,EAAK,SAAS,EAAE;GACxB,MAAM,GAAG,EAAK,KAAK;GACnB,QAAQ;GACR,GAAI,IAAa,EAAW,CAAI,IAAI,CAAC;EACvC,GACA,QAAe;GACb,IAAI,CAAC,EAAY,SAAS,CAAC,EAAW,OAAO;GAC7C,IAAM,IAAe,EAAY,MAAM,sBAAsB,GACvD,IAAa,EAAW,MAAM,sBAAsB,GACpD,IAAiB,OAAO,aACxB,IAAgB,OAAO,YAEvB,IAAQ,EAAa,SAAS,GAC9B,IAAQ,EAAa,QAAQ,GAE7B,IAAM,IACR,GAAG,EAAW,MAAM,EAAa,SAAS,EAAE,MAC5C,GAAG,EAAW,SAAS,EAAE,KACvB,IAAO,IACT,GAAG,EAAW,QAAQ,EAAa,MAAM,MACzC,GAAG,EAAW,KAAK;GAEvB,CAAI,KAAS,OACX,EAAc,QAAQ;IACpB,UAAU;IACV;IACA;IACA,QAAQ;IACR,GAAI,IAAa,EAAW,CAAU,IAAI,CAAC;GAC7C;EAEJ,CAAC;CACH;CAEA,SAAS,EAAe,GAAe;EACrC,AAAI,EAAe,GAAG,EAAW,OAAO,EAAY,KAAK,MACvD,EAAO,QAAQ;CAEnB;CAEA,SAAS,IAAmB;EACrB,MAAO,OACZ;OAAI,GAAe;IACjB,EAAO,QAAQ;IACf;GACF;GACA,EAAiB;EADjB;CAEF;CAoBA,OAlBA,EAAM,IAAS,MAAS;EACtB,AAAI,KAAM,EAAiB;CAC7B,CAAC,GAED,QAAgB;EAId,AAHA,SAAS,iBAAiB,aAAa,CAAc,GAErD,OAAO,iBAAiB,UAAU,GAAkB,EAAI,GACxD,OAAO,iBAAiB,UAAU,CAAgB;CACpD,CAAC,GAED,QAAsB;EAIpB,AAHA,SAAS,oBAAoB,aAAa,CAAc,GAExD,OAAO,oBAAoB,UAAU,GAAkB,EAAI,GAC3D,OAAO,oBAAoB,UAAU,CAAgB;CACvD,CAAC,GAEM;EAAE;EAAQ;EAAe;CAAiB;AACnD"}
|
|
@@ -21,10 +21,13 @@ var g = { class: "ac-component" }, _ = ["aria-label"], v = { class: "ac-componen
|
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
setup(c) {
|
|
24
|
-
let x = c, S = f(null), C = f(null), { isOpen: w, dropdownStyle: T } = t(S, C, {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
let x = c, S = f(null), C = f(null), { isOpen: w, dropdownStyle: T } = t(S, C, {
|
|
25
|
+
extraStyle: (e) => ({
|
|
26
|
+
minWidth: `${e.width}px`,
|
|
27
|
+
maxWidth: `${e.width * 2}px`
|
|
28
|
+
}),
|
|
29
|
+
closeOnScroll: !0
|
|
30
|
+
});
|
|
28
31
|
function E() {
|
|
29
32
|
w.value = !w.value;
|
|
30
33
|
}
|
|
@@ -64,7 +67,8 @@ var g = { class: "ac-component" }, _ = ["aria-label"], v = { class: "ac-componen
|
|
|
64
67
|
key: `cb-${n}`,
|
|
65
68
|
class: l(["d-option dm-option c-field-size c-type-color", {
|
|
66
69
|
[`c-field-size--${h(e)(t.size)}`]: t.size,
|
|
67
|
-
[`c-type-color--${t.type}`]: t.type
|
|
70
|
+
[`c-type-color--${t.type}`]: t.type,
|
|
71
|
+
"is-disabled": t.disabled?.()
|
|
68
72
|
}]),
|
|
69
73
|
tabindex: "0",
|
|
70
74
|
onClick: (e) => D(t),
|
|
@@ -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 callback: () => void\n disabled?: () => 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}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { ControlSize } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { sizeToClass } from '@/utils/dom'\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n size: 'normal',\n type: 'normal',\n textEllipsis: true,\n icon: undefined,\n label: undefined,\n labelAlignmentFix: false,\n})\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({\n minWidth: `${rect.width}px`,\n maxWidth: `${rect.width * 2}px`,\n }),\n})\n\nfunction toggleOpen() {\n isOpen.value = !isOpen.value\n}\n\nfunction selectItem(item: DropdownMenuItem) {\n item.callback?.()\n isOpen.value = false\n}\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n <button\n type=\"button\"\n class=\"c-btn dm-trigger\"\n :class=\"[\n size === 'small' && 'c-btn-sm',\n size === 'large' && 'c-btn-lg',\n type !== 'normal' && `c-btn-${type}`,\n ]\"\n :aria-label=\"ariaLabel ?? label\"\n @click=\"toggleOpen()\"\n >\n <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n label\n }}</span>\n\n <span\n class=\"c-icon-btn c-icon-btn--chevron\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div 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 :key=\"`cb-${idx}`\"\n class=\"d-option dm-option c-field-size c-type-color\"\n :class=\"{\n [`c-field-size--${sizeToClass(item.size)}`]: item.size,\n [`c-type-color--${item.type}`]: item.type,\n }\"\n tabindex=\"0\"\n @click=\"selectItem(item)\"\n :aria-label=\"item.ariaLabel ?? item.label\"\n >\n <i v-if=\"item.icon\" class=\"fa-fw\" :class=\"item.icon\"></i>\n <span class=\"d-option__label\" :class=\"{ 'c-truncate': props.textEllipsis }\">{{\n item.label\n }}</span>\n </li>\n </ul>\n </div>\n </div>\n </Teleport>\n </div>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA8BA,IAAM,IAAQ,GASR,IAAa,EAAwB,IAAI,GACzC,IAAc,EAAwB,IAAI,GAC1C,EAAE,WAAQ,qBAAkB,EAAkB,GAAY,GAAa,
|
|
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 callback: () => void\n disabled?: () => 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}\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 class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n <button\n type=\"button\"\n class=\"c-btn dm-trigger\"\n :class=\"[\n size === 'small' && 'c-btn-sm',\n size === 'large' && 'c-btn-lg',\n type !== 'normal' && `c-btn-${type}`,\n ]\"\n :aria-label=\"ariaLabel ?? label\"\n @click=\"toggleOpen()\"\n >\n <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n label\n }}</span>\n\n <span\n class=\"c-icon-btn c-icon-btn--chevron\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div 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 :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 }\"\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 </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA8BA,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;yBAIE,EAqDM,OArDN,GAqDM,CApDJ,EAmDM,OAAA;YAnDG;GAAJ,KAAI;GAAa,OAAM;MAC1B,EAsBS,UAAA;GArBP,MAAK;GACL,OAAK,EAAA,CAAC,oBAAkB;IACJ,EAAA,SAAI,WAAA;IAAsC,EAAA,SAAI,WAAA;IAAsC,EAAA,SAAI,YAAA,SAA0B,EAAA;;GAKrI,cAAY,EAAA,aAAa,EAAA;GACzB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAU;;GAET,EAAA,QAAA,EAAA,GAAT,EAA+C,KAAA;;IAAhC,OAAK,EAAA,CAAC,SAAgB,EAAA,IAAI,CAAA;;GAC7B,EAAA,SAAA,EAAA,GAAZ,EAES,QAAA;;IAFW,OAAK,EAAA,EAAA,qBAAyB,EAAM,kBAAiB,CAAA;QACvE,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGP,EAKO,QAAA,EAJL,OAAK,EAAA,CAAC,kCAAgC,EAAA,4BACA,EAAA,CAAA,EAAM,CAAA,CAAA,EAAA,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAE5C,EAA8C,KAAA,EAA3C,OAAM,iCAAgC,GAAA,MAAA,EAAA,CAAA,CAAA,GAAA,CAAA;mBAI7C,EAyBW,GAAA,EAzBD,IAAG,OAAM,GAAA,CACjB,EAuBM,OAvBN,GAuBM,CAtBO,EAAA,CAAA,KAAA,EAAA,GAAX,EAqBM,OAAA;;YArBiB;GAAJ,KAAI;GAAc,OAAM;GAAyB,OAAK,EAAE,EAAA,CAAA,CAAa;MACtF,EAmBK,MAnBL,GAmBK,EAAA,EAAA,EAAA,GAlBH,EAiBK,GAAA,MAAA,EAhBmB,EAAA,QAAd,GAAM,YADhB,EAiBK,MAAA;GAfF,KAAG,MAAQ;GACZ,OAAK,EAAA,CAAC,gDAA8C;sBACN,EAAA,CAAA,EAAY,EAAK,IAAI,MAAM,EAAK;sBAA0C,EAAK,SAAS,EAAK;mBAAuC,EAAK,WAAQ;;GAK/L,UAAS;GACR,UAAK,MAAE,EAAW,CAAI;GACtB,cAAY,EAAK,aAAa,EAAK;MAE3B,EAAK,QAAA,EAAA,GAAd,EAAyD,KAAA;;GAArC,OAAK,EAAA,CAAC,SAAgB,EAAK,IAAI,CAAA;4BACnD,EAES,QAAA,EAFH,OAAK,EAAA,CAAC,mBAAiB,EAAA,cAAyB,EAAM,aAAY,CAAA,CAAA,EAAA,GAAA,EACtE,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components30.js","names":[],"sources":["../src/components/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownMenuItem {\n icon?: string\n label: string\n type?: ButtonType\n size?: ControlSize\n ariaLabel?: string\n callback: () => void\n disabled?: () => 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}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { ControlSize } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { sizeToClass } from '@/utils/dom'\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n size: 'normal',\n type: 'normal',\n textEllipsis: true,\n icon: undefined,\n label: undefined,\n labelAlignmentFix: false,\n})\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({\n minWidth: `${rect.width}px`,\n maxWidth: `${rect.width * 2}px`,\n }),\n})\n\nfunction toggleOpen() {\n isOpen.value = !isOpen.value\n}\n\nfunction selectItem(item: DropdownMenuItem) {\n item.callback?.()\n isOpen.value = false\n}\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n <button\n type=\"button\"\n class=\"c-btn dm-trigger\"\n :class=\"[\n size === 'small' && 'c-btn-sm',\n size === 'large' && 'c-btn-lg',\n type !== 'normal' && `c-btn-${type}`,\n ]\"\n :aria-label=\"ariaLabel ?? label\"\n @click=\"toggleOpen()\"\n >\n <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n label\n }}</span>\n\n <span\n class=\"c-icon-btn c-icon-btn--chevron\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div 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 :key=\"`cb-${idx}`\"\n class=\"d-option dm-option c-field-size c-type-color\"\n :class=\"{\n [`c-field-size--${sizeToClass(item.size)}`]: item.size,\n [`c-type-color--${item.type}`]: item.type,\n }\"\n tabindex=\"0\"\n @click=\"selectItem(item)\"\n :aria-label=\"item.ariaLabel ?? item.label\"\n >\n <i v-if=\"item.icon\" class=\"fa-fw\" :class=\"item.icon\"></i>\n <span class=\"d-option__label\" :class=\"{ 'c-truncate': props.textEllipsis }\">{{\n item.label\n }}</span>\n </li>\n </ul>\n </div>\n </div>\n </Teleport>\n </div>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"admins-components30.js","names":[],"sources":["../src/components/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownMenuItem {\n icon?: string\n label: string\n type?: ButtonType\n size?: ControlSize\n ariaLabel?: string\n callback: () => void\n disabled?: () => 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}\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 class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n <button\n type=\"button\"\n class=\"c-btn dm-trigger\"\n :class=\"[\n size === 'small' && 'c-btn-sm',\n size === 'large' && 'c-btn-lg',\n type !== 'normal' && `c-btn-${type}`,\n ]\"\n :aria-label=\"ariaLabel ?? label\"\n @click=\"toggleOpen()\"\n >\n <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n label\n }}</span>\n\n <span\n class=\"c-icon-btn c-icon-btn--chevron\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div 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 :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 }\"\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 </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components58.js","names":[],"sources":["../src/types/data-list.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\nimport type { PickedDate, PickedUtcRange } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\n\nexport type FilterValue = string | PickedDate | PickedUtcRange | string[] | null | undefined\n\nexport interface FilterConfig {\n type: 'text' | 'date' | 'date-range' | 'select' | 'multi-select'\n key: string\n placeholder?: string\n options?: DropdownOption[]\n}\n\nexport type LayoutMode = 'table' | 'cards' | 'screen'\n\nexport interface DataTableSettings {\n striped: boolean\n compact: boolean\n}\n\nexport interface DataCardsSettings {\n compact: boolean\n}\n\nexport interface DataListSettings extends DataTableSettings, DataCardsSettings {\n layout: LayoutMode\n columns: Record<string, boolean>\n cardHeaderColumns: Record<string, boolean>\n columnOrder: string[]\n cardHeaderOrder: string[]\n}\n\nexport interface PageSettings {\n page: number\n pageSize: number\n}\n\nexport interface PaginatorSettings extends PageSettings {\n total: number\n}\n\nexport interface DataListConfig {\n selectableAttr?: string | undefined\n columns: Column[]\n\n actions?: Array<Action | ActionGroup> | undefined\n actionHeader?: string | undefined\n}\n\nexport type ColumnType = 'normal' | 'uuid' | 'date' | 'datetime'\n\nexport interface Column {\n visible?: boolean | undefined\n primary?: boolean | undefined\n label: string\n property: string\n sort?: undefined | Sort\n type?: ColumnType\n class?: string | undefined\n headerClass?: string | undefined\n hideCopyToClipboard?: boolean | undefined\n\n converter?: undefined | ((v: any, item: any) => any)\n loading?: (() => boolean) | undefined\n}\n\nexport type SortDirection = 'asc' | 'desc' | null\n\nexport interface Sort {\n label: string\n active: Ref<boolean> | undefined\n direction?: Ref<SortDirection> | undefined\n callback: (property: string, direction: SortDirection) => any\n}\n\nexport interface Action {\n icon: string\n label?: string\n ariaLabel?: string\n cardLabel?: string\n type?: ButtonType\n config?: Record<string, any> | undefined\n disabled?: (item: any) => boolean\n callback: (item: any) => any\n withConfirm?: boolean\n withConfirmConfig?: ConfirmModalProps\n}\n\nexport interface ActionGroup {\n isGroup: true\n icon?: string\n label?: string\n ariaLabel?: string\n cardLabel?: string\n config?: Record<string, any> | undefined\n items: Action[]\n disabled?: (item: any) => boolean\n}\n\nexport const dataTableSettingsDefaults: DataTableSettings = {\n striped: true,\n compact: false,\n}\n\nexport const dataCardsSettingsDefaults: DataCardsSettings = {\n compact: false,\n}\n\nexport const dataListSettingsDefaults: Partial<DataListSettings> = {\n layout: 'screen',\n compact: false,\n}\n"],"mappings":";AAqGA,IAAa,IAA+C;CAC1D,SAAS;CACT,SAAS;AACX,GAEa,IAA+C,EAC1D,SAAS,GACX,GAEa,IAAsD;CACjE,QAAQ;CACR,SAAS;AACX"}
|
|
1
|
+
{"version":3,"file":"admins-components58.js","names":[],"sources":["../src/types/data-list.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\nimport type { PickedDate, PickedUtcRange } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\n\nexport type FilterValue = string | PickedDate | PickedUtcRange | string[] | null | undefined\n\nexport interface FilterConfig {\n type: 'text' | 'date' | 'date-range' | 'select' | 'multi-select'\n key: string\n placeholder?: string\n options?: DropdownOption[]\n}\n\nexport type LayoutMode = 'table' | 'cards' | 'screen'\n\nexport interface DataTableSettings {\n striped: boolean\n compact: boolean\n}\n\nexport interface DataCardsSettings {\n compact: boolean\n}\n\nexport interface DataListSettings extends DataTableSettings, DataCardsSettings {\n layout: LayoutMode\n columns: Record<string, boolean>\n cardHeaderColumns: Record<string, boolean>\n columnOrder: string[]\n cardHeaderOrder: string[]\n}\n\nexport interface PageSettings {\n page: number\n pageSize: number\n}\n\nexport interface PaginatorSettings extends PageSettings {\n total: number\n}\n\nexport interface DataListConfig {\n selectableAttr?: string | undefined\n columns: Column[]\n\n actions?: Array<Action | ActionGroup> | undefined\n actionHeader?: string | undefined\n}\n\nexport type ColumnType = 'normal' | 'uuid' | 'date' | 'datetime'\n\nexport interface Column {\n visible?: boolean | undefined\n primary?: boolean | undefined\n label: string\n property: string\n sort?: undefined | Sort\n type?: ColumnType\n class?: string | undefined\n headerClass?: string | undefined\n hideCopyToClipboard?: boolean | undefined\n\n converter?: undefined | ((v: any, item: any) => any)\n loading?: (() => boolean) | undefined\n}\n\nexport type SortDirection = 'asc' | 'desc' | null\n\nexport interface Sort {\n label: string\n active: Ref<boolean> | undefined\n direction?: Ref<SortDirection> | undefined\n callback: (property: string, direction: SortDirection) => any\n}\n\nexport interface Action {\n icon: string\n label?: string\n ariaLabel?: string\n cardLabel?: string\n type?: ButtonType\n config?: Record<string, any> | undefined\n disabled?: (item: any) => boolean\n callback: (item: any) => any\n withConfirm?: boolean\n withConfirmConfig?: ConfirmModalProps | ((item: Record<string, unknown> | undefined) => ConfirmModalProps)\n}\n\nexport interface ActionGroup {\n isGroup: true\n icon?: string\n label?: string\n ariaLabel?: string\n cardLabel?: string\n config?: Record<string, any> | undefined\n items: Action[]\n disabled?: (item: any) => boolean\n}\n\nexport const dataTableSettingsDefaults: DataTableSettings = {\n striped: true,\n compact: false,\n}\n\nexport const dataCardsSettingsDefaults: DataCardsSettings = {\n compact: false,\n}\n\nexport const dataListSettingsDefaults: Partial<DataListSettings> = {\n layout: 'screen',\n compact: false,\n}\n"],"mappings":";AAqGA,IAAa,IAA+C;CAC1D,SAAS;CACT,SAAS;AACX,GAEa,IAA+C,EAC1D,SAAS,GACX,GAEa,IAAsD;CACjE,QAAQ;CACR,SAAS;AACX"}
|
|
@@ -11,12 +11,15 @@ var f = /* @__PURE__ */ s({
|
|
|
11
11
|
},
|
|
12
12
|
setup(s) {
|
|
13
13
|
let f = u(null);
|
|
14
|
-
function p(e) {
|
|
15
|
-
|
|
14
|
+
function p(e, t) {
|
|
15
|
+
let n = {
|
|
16
16
|
title: e.label ?? "Megerősítés",
|
|
17
17
|
message: "Biztosan végrehajta a műveletet?",
|
|
18
|
-
type: e.type
|
|
19
|
-
|
|
18
|
+
type: e.type
|
|
19
|
+
}, r = typeof e.withConfirmConfig == "function" ? e.withConfirmConfig(t) : e.withConfirmConfig;
|
|
20
|
+
return {
|
|
21
|
+
...n,
|
|
22
|
+
...r
|
|
20
23
|
};
|
|
21
24
|
}
|
|
22
25
|
function m(e, t) {
|
|
@@ -71,7 +74,7 @@ var f = /* @__PURE__ */ s({
|
|
|
71
74
|
"ariaLabel",
|
|
72
75
|
"callback",
|
|
73
76
|
"disabled"
|
|
74
|
-
]))], 64))), 128)), f.value ? (l(), i(n, c({ key: 0 }, p(f.value.action), {
|
|
77
|
+
]))], 64))), 128)), f.value ? (l(), i(n, c({ key: 0 }, p(f.value.action, f.value.item), {
|
|
75
78
|
onConfirm: h,
|
|
76
79
|
onCancel: v[0] ||= (e) => f.value = null
|
|
77
80
|
}), null, 16)) : a("", !0)], 64));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components63.js","names":[],"sources":["../src/components/data-table/DataListActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { Action, ActionGroup } from '@/types/data-list'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\nimport Button from '@/components/Button.vue'\nimport DropdownMenu from '@/components/DropdownMenu.vue'\nimport ConfirmModal from '@/components/ConfirmModal.vue'\nimport type { DropdownMenuItem } from '@/components/DropdownMenu.vue'\n\ndefineProps<{\n actions: Array<Action | ActionGroup>\n item?: Record<string, unknown>\n}>()\n\nconst activeConfirm = ref<{\n action: Action\n item?: Record<string, unknown>\n} | null>(null)\n\nfunction getConfirmConfig(action: Action): ConfirmModalProps {\n const defaultConfig = {\n title: action.label ?? 'Megerősítés',\n message: 'Biztosan végrehajta a műveletet?',\n type: action.type,\n }\n return {\n ...defaultConfig,\n ...
|
|
1
|
+
{"version":3,"file":"admins-components63.js","names":[],"sources":["../src/components/data-table/DataListActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { Action, ActionGroup } from '@/types/data-list'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\nimport Button from '@/components/Button.vue'\nimport DropdownMenu from '@/components/DropdownMenu.vue'\nimport ConfirmModal from '@/components/ConfirmModal.vue'\nimport type { DropdownMenuItem } from '@/components/DropdownMenu.vue'\n\ndefineProps<{\n actions: Array<Action | ActionGroup>\n item?: Record<string, unknown>\n}>()\n\nconst activeConfirm = ref<{\n action: Action\n item?: Record<string, unknown>\n} | null>(null)\n\nfunction getConfirmConfig(action: Action, item?: Record<string, unknown>): ConfirmModalProps {\n const defaultConfig = {\n title: action.label ?? 'Megerősítés',\n message: 'Biztosan végrehajta a műveletet?',\n type: action.type,\n }\n const extra = typeof action.withConfirmConfig === 'function'\n ? action.withConfirmConfig(item)\n : action.withConfirmConfig\n return {\n ...defaultConfig,\n ...extra,\n }\n}\n\nfunction handleOnClick(action: Action, item?: Record<string, unknown>) {\n if (action.withConfirm) {\n activeConfirm.value = { action, item }\n } else {\n action.callback(item)\n }\n}\n\nfunction handleConfirm() {\n if (activeConfirm.value) {\n activeConfirm.value.action.callback(activeConfirm.value.item)\n activeConfirm.value = null\n }\n}\n\nfunction isActionGroup(entry: Action | ActionGroup): entry is ActionGroup {\n return (entry as ActionGroup).isGroup === true && Array.isArray((entry as ActionGroup).items)\n}\n\nfunction buildActionGroupMenuItems(\n group: ActionGroup,\n item?: Record<string, unknown>,\n): DropdownMenuItem[] {\n return group.items.map((action: Action) => {\n const isDisabled = action.disabled\n return {\n icon: action.icon,\n label: action.label ?? '',\n type: action.type,\n size: action.label ? 'small' : 'normal',\n callback: () => handleOnClick(action, item),\n disabled: isDisabled ? () => isDisabled(item) : undefined,\n }\n })\n}\n</script>\n\n<template>\n <template v-for=\"(action, ai) in actions\" :key=\"ai\">\n <DropdownMenu\n v-if=\"isActionGroup(action)\"\n :icon=\"action.icon\"\n :label=\"action.label\"\n :items=\"buildActionGroupMenuItems(action, item)\"\n v-bind=\"action.config\"\n />\n\n <Button\n v-else\n :icon=\"action.icon\"\n :label=\"action.label\"\n :type=\"action.type\"\n :size=\"action.label ? 'small' : 'normal'\"\n :ariaLabel=\"action.ariaLabel\"\n outline\n :callback=\"() => handleOnClick(action, item)\"\n :disabled=\"action.disabled ? action.disabled(item) : false\"\n v-bind=\"action.config\"\n />\n </template>\n\n <ConfirmModal\n v-if=\"activeConfirm\"\n v-bind=\"getConfirmConfig(activeConfirm.action, activeConfirm.item)\"\n @confirm=\"handleConfirm\"\n @cancel=\"activeConfirm = null\"\n />\n</template>\n"],"mappings":";;;;;;;;;;;;EAcA,IAAM,IAAgB,EAGZ,IAAI;EAEd,SAAS,EAAiB,GAAgB,GAAmD;GAC3F,IAAM,IAAgB;IACpB,OAAO,EAAO,SAAS;IACvB,SAAS;IACT,MAAM,EAAO;GACf,GACM,IAAQ,OAAO,EAAO,qBAAsB,aAC9C,EAAO,kBAAkB,CAAI,IAC7B,EAAO;GACX,OAAO;IACL,GAAG;IACH,GAAG;GACL;EACF;EAEA,SAAS,EAAc,GAAgB,GAAgC;GACrE,AAAI,EAAO,cACT,EAAc,QAAQ;IAAE;IAAQ;GAAK,IAErC,EAAO,SAAS,CAAI;EAExB;EAEA,SAAS,IAAgB;GACvB,AAEE,EAAc,WADd,EAAc,MAAM,OAAO,SAAS,EAAc,MAAM,IAAI,GACtC;EAE1B;EAEA,SAAS,EAAc,GAAmD;GACxE,OAAQ,EAAsB,YAAY,MAAQ,MAAM,QAAS,EAAsB,KAAK;EAC9F;EAEA,SAAS,EACP,GACA,GACoB;GACpB,OAAO,EAAM,MAAM,KAAK,MAAmB;IACzC,IAAM,IAAa,EAAO;IAC1B,OAAO;KACL,MAAM,EAAO;KACb,OAAO,EAAO,SAAS;KACvB,MAAM,EAAO;KACb,MAAM,EAAO,QAAQ,UAAU;KAC/B,gBAAgB,EAAc,GAAQ,CAAI;KAC1C,UAAU,UAAmB,EAAW,CAAI,IAAI,KAAA;IAClD;GACF,CAAC;EACH;6CAIE,EAqBW,GAAA,MAAA,EArBsB,EAAA,UAAf,GAAQ,wBAAsB,EAAE,GAAA,CAExC,EAAc,CAAM,KAAA,EAAA,GAD5B,EAME,GANF,EAME;;GAJC,MAAM,EAAO;GACb,OAAO,EAAO;GACd,OAAO,EAA0B,GAAQ,EAAA,IAAI;sBACtC,EAAO,MAAM,GAAA,MAAA,IAAA;GAAA;GAAA;GAAA;EAAA,CAAA,MAAA,EAAA,GAGvB,EAWE,GAXF,EAWE;;GATC,MAAM,EAAO;GACb,OAAO,EAAO;GACd,MAAM,EAAO;GACb,MAAM,EAAO,QAAK,UAAA;GAClB,WAAW,EAAO;GACnB,SAAA;GACC,gBAAgB,EAAc,GAAQ,EAAA,IAAI;GAC1C,UAAU,EAAO,WAAW,EAAO,SAAS,EAAA,IAAI,IAAA;sBACzC,EAAO,MAAM,GAAA,MAAA,IAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA,CAAA,EAAA,GAAA,EAAA,YAKjB,EAAA,SAAA,EAAA,GADR,EAKE,GALF,EAKE,EAAA,KAAA,EAAA,GAHQ,EAAiB,EAAA,MAAc,QAAQ,EAAA,MAAc,IAAI,GAAA;GAChE,WAAS;GACT,UAAM,AAAA,EAAA,QAAA,MAAE,EAAA,QAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components64.js","names":[],"sources":["../src/components/data-table/DataListActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { Action, ActionGroup } from '@/types/data-list'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\nimport Button from '@/components/Button.vue'\nimport DropdownMenu from '@/components/DropdownMenu.vue'\nimport ConfirmModal from '@/components/ConfirmModal.vue'\nimport type { DropdownMenuItem } from '@/components/DropdownMenu.vue'\n\ndefineProps<{\n actions: Array<Action | ActionGroup>\n item?: Record<string, unknown>\n}>()\n\nconst activeConfirm = ref<{\n action: Action\n item?: Record<string, unknown>\n} | null>(null)\n\nfunction getConfirmConfig(action: Action): ConfirmModalProps {\n const defaultConfig = {\n title: action.label ?? 'Megerősítés',\n message: 'Biztosan végrehajta a műveletet?',\n type: action.type,\n }\n return {\n ...defaultConfig,\n ...
|
|
1
|
+
{"version":3,"file":"admins-components64.js","names":[],"sources":["../src/components/data-table/DataListActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { Action, ActionGroup } from '@/types/data-list'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\nimport Button from '@/components/Button.vue'\nimport DropdownMenu from '@/components/DropdownMenu.vue'\nimport ConfirmModal from '@/components/ConfirmModal.vue'\nimport type { DropdownMenuItem } from '@/components/DropdownMenu.vue'\n\ndefineProps<{\n actions: Array<Action | ActionGroup>\n item?: Record<string, unknown>\n}>()\n\nconst activeConfirm = ref<{\n action: Action\n item?: Record<string, unknown>\n} | null>(null)\n\nfunction getConfirmConfig(action: Action, item?: Record<string, unknown>): ConfirmModalProps {\n const defaultConfig = {\n title: action.label ?? 'Megerősítés',\n message: 'Biztosan végrehajta a műveletet?',\n type: action.type,\n }\n const extra = typeof action.withConfirmConfig === 'function'\n ? action.withConfirmConfig(item)\n : action.withConfirmConfig\n return {\n ...defaultConfig,\n ...extra,\n }\n}\n\nfunction handleOnClick(action: Action, item?: Record<string, unknown>) {\n if (action.withConfirm) {\n activeConfirm.value = { action, item }\n } else {\n action.callback(item)\n }\n}\n\nfunction handleConfirm() {\n if (activeConfirm.value) {\n activeConfirm.value.action.callback(activeConfirm.value.item)\n activeConfirm.value = null\n }\n}\n\nfunction isActionGroup(entry: Action | ActionGroup): entry is ActionGroup {\n return (entry as ActionGroup).isGroup === true && Array.isArray((entry as ActionGroup).items)\n}\n\nfunction buildActionGroupMenuItems(\n group: ActionGroup,\n item?: Record<string, unknown>,\n): DropdownMenuItem[] {\n return group.items.map((action: Action) => {\n const isDisabled = action.disabled\n return {\n icon: action.icon,\n label: action.label ?? '',\n type: action.type,\n size: action.label ? 'small' : 'normal',\n callback: () => handleOnClick(action, item),\n disabled: isDisabled ? () => isDisabled(item) : undefined,\n }\n })\n}\n</script>\n\n<template>\n <template v-for=\"(action, ai) in actions\" :key=\"ai\">\n <DropdownMenu\n v-if=\"isActionGroup(action)\"\n :icon=\"action.icon\"\n :label=\"action.label\"\n :items=\"buildActionGroupMenuItems(action, item)\"\n v-bind=\"action.config\"\n />\n\n <Button\n v-else\n :icon=\"action.icon\"\n :label=\"action.label\"\n :type=\"action.type\"\n :size=\"action.label ? 'small' : 'normal'\"\n :ariaLabel=\"action.ariaLabel\"\n outline\n :callback=\"() => handleOnClick(action, item)\"\n :disabled=\"action.disabled ? action.disabled(item) : false\"\n v-bind=\"action.config\"\n />\n </template>\n\n <ConfirmModal\n v-if=\"activeConfirm\"\n v-bind=\"getConfirmConfig(activeConfirm.action, activeConfirm.item)\"\n @confirm=\"handleConfirm\"\n @cancel=\"activeConfirm = null\"\n />\n</template>\n"],"mappings":""}
|
|
@@ -2,6 +2,7 @@ import { Ref } from 'vue';
|
|
|
2
2
|
export interface UseDropdownAnchorOptions {
|
|
3
3
|
extraStyle?: (rect: DOMRect) => Record<string, string>;
|
|
4
4
|
isOutsideClick?: (e: MouseEvent, wrapperEl: HTMLElement | null, dropdownEl: HTMLElement | null) => boolean;
|
|
5
|
+
closeOnScroll?: boolean;
|
|
5
6
|
}
|
|
6
7
|
export interface UseDropdownAnchorReturn {
|
|
7
8
|
isOpen: Ref<boolean>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.c-table-wrapper{--table-col-max-width:28rem;--table-primary-col-min-width:12rem;--table-primary-col-max-width:32rem;max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-table-wrapper .c-table{--cell-padding:.5rem .375rem;--action-count:0
|
|
1
|
+
.c-table-wrapper{--table-col-max-width:28rem;--table-primary-col-min-width:12rem;--table-primary-col-max-width:32rem;max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-table-wrapper .c-table{--cell-padding:.5rem .375rem;--action-count:0;border-collapse:collapse;width:100%;min-width:48rem;font-size:.875rem}.c-table-wrapper .c-table thead{z-index:2;background-color:var(--neutral-150);position:sticky;top:0;box-shadow:0 2px 5px -1px #32325d40,0 1px 3px -1px #0000004d}.c-table-wrapper .c-table th,.c-table-wrapper .c-table td{padding:var(--cell-padding);text-align:left;border-bottom:1px solid var(--neutral-200);overflow-wrap:break-word}.c-table-wrapper .c-table .primary-col{min-width:var(--table-primary-col-min-width);max-width:var(--table-primary-col-max-width)}.c-table-wrapper .c-table th.c-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.c-table-wrapper .c-table th.c-sortable--sorted{color:var(--premium-500)}.c-table-wrapper .c-table th .c-sort-icon{color:var(--neutral-400);margin-left:.25rem;transition:color .15s}.c-table-wrapper .c-table th .c-sort-icon--active{color:var(--premium-500)}.c-table-wrapper .c-table td{max-width:var(--table-col-max-width)}.c-table-wrapper .c-table td.is-nowrap{white-space:nowrap}.c-table-wrapper .c-table.is-compact th{padding-top:.5rem;padding-bottom:.5rem}.c-table-wrapper .c-table.is-compact td{padding-top:.1875rem;padding-bottom:.1875rem}.c-table-wrapper .c-table tbody tr.is-striped{background-color:var(--neutral-50)}.c-table-wrapper .c-table tbody tr.is-selected,.c-table-wrapper .c-table tbody tr.is-striped.is-selected{background-color:var(--premium-200)}.c-table-wrapper .c-table tbody .c-table__loading-row,.c-table-wrapper .c-table tbody .c-table__loading-row:hover{background-color:#0000}.c-table-wrapper .c-table tbody .c-table__loading-cell{text-align:center;border-bottom:1px solid var(--neutral-200);padding:2rem}.c-table-wrapper .c-table tbody .c-table__loading-wrap{justify-content:center;align-items:center;width:100%;display:flex}@media (hover:hover) and (pointer:fine){.c-table-wrapper .c-table th.c-sortable:hover .c-sort-icon{color:var(--neutral-700)}.c-table-wrapper .c-table tbody tr:hover,.c-table-wrapper .c-table tbody tr.is-striped:hover{background-color:var(--premium-100)}.c-table-wrapper .c-table tbody tr:hover td,.c-table-wrapper .c-table tbody tr.is-striped:hover td{border-color:var(--premium-400)}.c-table-wrapper .c-table tbody tr.is-selected:hover,.c-table-wrapper .c-table tbody tr.is-striped.is-selected:hover{background-color:var(--premium-300)}}.c-table-wrapper .c-table .c-actions-header{text-align:center}.c-table-wrapper .c-table .c-actions-cell .c-actions-wrap{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25rem;display:flex}.c-table-wrapper .c-table__cell{position:relative}@media (hover:none),(pointer:coarse){.c-table-wrapper .c-table__cell{transition:background-color .15s}.c-table-wrapper .c-table__cell:focus-within,.c-table-wrapper .c-table__cell:hover{background-color:#dfefef80}}.c-table-wrapper .c-table__cell .c-copy-btn{opacity:0;position:absolute;top:0;right:0}.c-table-wrapper .c-table__cell:hover .c-copy-btn,.c-table-wrapper .c-table__cell:focus-within .c-copy-btn{opacity:1}.c-table-wrapper .c-table__backdrop{z-index:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#fff9;justify-content:center;align-items:center;padding-top:3rem;animation:.15s ease-out c-table-backdrop-in;display:flex;position:absolute;inset:0}.c-table-wrapper.is-loading .c-table tbody{opacity:.45;transition:opacity .15s ease-out}@keyframes c-table-backdrop-in{0%{opacity:0}to{opacity:1}}
|
package/dist/src/styles/components/dropdown-select.scss_vue_type_style_index_0_src_true_lang.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ac-component .ds-wrapper{--ds-field-padding:.375rem .5rem}.ac-component .ds-wrapper .ds-value{padding:var(--ac-input-padding);font-size:inherit;color:var(--neutral-900);flex:1;padding-right:.125rem}.ac-component .ds-wrapper .c-input-row--sm .ds-value{padding:var(--ac-input-padding-sm);padding-right:.125rem}.ac-component .ds-wrapper .c-input-row--lg .ds-value{padding:var(--ac-input-padding-lg);padding-right:.125rem}.ac-component .ds-wrapper .ds-dropdown{right:0}.ac-component .ds-wrapper .ds-filter{padding:var(--ac-field-padding);border-bottom:1px solid var(--neutral-100);align-items:center;gap:.5rem;display:flex;position:relative}.ac-component .ds-wrapper .ds-dropdown--multiple .ds-filter,.ac-component .ds-wrapper .ds-dropdown--multiple .ds-option{padding:var(--ds-field-padding)}.ac-component .ds-wrapper .ds-select-all-checkbox{flex-shrink:0}.ac-component .ds-wrapper .ds-filter-input{border:1px solid var(--neutral-200);width:100%;color:var(--neutral-900);border-radius:.375rem;outline:none;padding:.375rem 1.5rem .375rem .5rem;font-family:inherit;font-size:.8125rem}.ac-component .ds-wrapper .ds-filter-input::placeholder{color:var(--ac-placeholder-color)}.ac-component .ds-wrapper .ds-clear-btn{padding:0 .125rem 0 0}.ac-component .ds-wrapper .ds-filter-clear{padding:0;position:absolute;top:50%;right:1.375rem;transform:translateY(-50%)}.ac-component .ds-wrapper .ds-options{max-height:var(--ac-dropdown-max-height,18rem);margin:0;padding:.25rem 0;list-style:none;overflow-y:auto}.ac-component .ds-wrapper .ds-options .ds-option--loading{min-height:calc(var(--ac-dropdown-max-height,18rem) / 1.75);pointer-events:none;justify-content:center;align-items:center;display:flex}.ac-component .ds-wrapper .d-option{cursor:pointer;align-items:center;gap:.5rem;transition:background-color .1s;display:flex}.ac-component .ds-wrapper .d-option__label{flex:1}.ac-component .ds-wrapper .dm-option{align-items:center;gap:.375em;display:flex}.ac-component .ds-wrapper .dm-trigger .c-icon-btn--chevron{color:inherit}.ac-component .ds-wrapper .ds-option{padding:var(--ac-field-padding);color:var(--neutral-800);font-size:.875rem}.ac-component .ds-wrapper .ds-option:hover{background:var(--neutral-50)}.ac-component .ds-wrapper .ds-option__highlight{background:rgba(var(--ac-color-primary-rgb), .1);color:var(--neutral-900);border-radius:.125rem}.ac-component .ds-wrapper .ds-option--selected{background:var(--neutral-100);font-weight:500}.ac-component .ds-wrapper .ds-option--empty{color:var(--neutral-400);cursor:default;font-style:italic}.ac-component .ds-wrapper .ds-option--empty:hover{background:0 0}
|
|
1
|
+
.ac-component .ds-wrapper{--ds-field-padding:.375rem .5rem}.ac-component .ds-wrapper .ds-value{padding:var(--ac-input-padding);font-size:inherit;color:var(--neutral-900);flex:1;padding-right:.125rem}.ac-component .ds-wrapper .c-input-row--sm .ds-value{padding:var(--ac-input-padding-sm);padding-right:.125rem}.ac-component .ds-wrapper .c-input-row--lg .ds-value{padding:var(--ac-input-padding-lg);padding-right:.125rem}.ac-component .ds-wrapper .ds-dropdown{right:0}.ac-component .ds-wrapper .ds-filter{padding:var(--ac-field-padding);border-bottom:1px solid var(--neutral-100);align-items:center;gap:.5rem;display:flex;position:relative}.ac-component .ds-wrapper .ds-dropdown--multiple .ds-filter,.ac-component .ds-wrapper .ds-dropdown--multiple .ds-option{padding:var(--ds-field-padding)}.ac-component .ds-wrapper .ds-select-all-checkbox{flex-shrink:0}.ac-component .ds-wrapper .ds-filter-input{border:1px solid var(--neutral-200);width:100%;color:var(--neutral-900);border-radius:.375rem;outline:none;padding:.375rem 1.5rem .375rem .5rem;font-family:inherit;font-size:.8125rem}.ac-component .ds-wrapper .ds-filter-input::placeholder{color:var(--ac-placeholder-color)}.ac-component .ds-wrapper .ds-clear-btn{padding:0 .125rem 0 0}.ac-component .ds-wrapper .ds-filter-clear{padding:0;position:absolute;top:50%;right:1.375rem;transform:translateY(-50%)}.ac-component .ds-wrapper .ds-options{max-height:var(--ac-dropdown-max-height,18rem);margin:0;padding:.25rem 0;list-style:none;overflow-y:auto}.ac-component .ds-wrapper .ds-options .ds-option--loading{min-height:calc(var(--ac-dropdown-max-height,18rem) / 1.75);pointer-events:none;justify-content:center;align-items:center;display:flex}.ac-component .ds-wrapper .d-option{cursor:pointer;align-items:center;gap:.5rem;transition:background-color .1s;display:flex}.ac-component .ds-wrapper .d-option__label{flex:1}.ac-component .ds-wrapper .dm-option{align-items:center;gap:.375em;display:flex}.ac-component .ds-wrapper .dm-option.is-disabled{opacity:.7;pointer-events:none}.ac-component .ds-wrapper .dm-trigger .c-icon-btn--chevron{color:inherit}.ac-component .ds-wrapper .ds-option{padding:var(--ac-field-padding);color:var(--neutral-800);font-size:.875rem}.ac-component .ds-wrapper .ds-option:hover{background:var(--neutral-50)}.ac-component .ds-wrapper .ds-option__highlight{background:rgba(var(--ac-color-primary-rgb), .1);color:var(--neutral-900);border-radius:.125rem}.ac-component .ds-wrapper .ds-option--selected{background:var(--neutral-100);font-weight:500}.ac-component .ds-wrapper .ds-option--empty{color:var(--neutral-400);cursor:default;font-style:italic}.ac-component .ds-wrapper .ds-option--empty:hover{background:0 0}
|
|
@@ -69,7 +69,7 @@ export interface Action {
|
|
|
69
69
|
disabled?: (item: any) => boolean;
|
|
70
70
|
callback: (item: any) => any;
|
|
71
71
|
withConfirm?: boolean;
|
|
72
|
-
withConfirmConfig?: ConfirmModalProps;
|
|
72
|
+
withConfirmConfig?: ConfirmModalProps | ((item: Record<string, unknown> | undefined) => ConfirmModalProps);
|
|
73
73
|
}
|
|
74
74
|
export interface ActionGroup {
|
|
75
75
|
isGroup: true;
|