cisse-vue-ui 0.1.9 → 0.2.0
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/README.md +162 -8
- package/dist/Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js +54 -0
- package/dist/Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js.map +1 -0
- package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs +53 -0
- package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs.map +1 -0
- package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-Bd6TPEpH.cjs → CollapsibleCard.vue_vue_type_script_setup_true_lang-Cs6KGC-0.cjs} +398 -79
- package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-Cs6KGC-0.cjs.map +1 -0
- package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-l4KQ8HX8.js → CollapsibleCard.vue_vue_type_script_setup_true_lang-DTGAuLCh.js} +406 -87
- package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-DTGAuLCh.js.map +1 -0
- package/dist/{Checkbox.vue_vue_type_script_setup_true_lang-DVkcMcSN.js → Switch.vue_vue_type_script_setup_true_lang-C2_5u-HL.js} +46 -95
- package/dist/Switch.vue_vue_type_script_setup_true_lang-C2_5u-HL.js.map +1 -0
- package/dist/{Checkbox.vue_vue_type_script_setup_true_lang-DQD2I1Wk.cjs → Switch.vue_vue_type_script_setup_true_lang-V-FtNcTd.cjs} +46 -95
- package/dist/Switch.vue_vue_type_script_setup_true_lang-V-FtNcTd.cjs.map +1 -0
- package/dist/components/core/MobileList.vue.d.ts +80 -0
- package/dist/components/core/ResponsiveList.vue.d.ts +115 -0
- package/dist/components/core/TableComponent.vue.d.ts +26 -28
- package/dist/components/core/index.cjs +11 -9
- package/dist/components/core/index.cjs.map +1 -1
- package/dist/components/core/index.d.ts +4 -0
- package/dist/components/core/index.js +11 -9
- package/dist/components/form/index.cjs +10 -9
- package/dist/components/form/index.cjs.map +1 -1
- package/dist/components/form/index.js +3 -2
- package/dist/components/form/index.js.map +1 -1
- package/dist/components/index.cjs +21 -18
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.js +18 -15
- package/dist/components/index.js.map +1 -1
- package/dist/index-Ck4eaNes.js +51 -0
- package/dist/index-Ck4eaNes.js.map +1 -0
- package/dist/{index-BW9nN-BL.cjs → index-c27X2k2e.cjs} +22 -19
- package/dist/index-c27X2k2e.cjs.map +1 -0
- package/dist/index.cjs +22 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +19 -16
- package/dist/index.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/form.d.ts +2 -0
- package/package.json +1 -1
- package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DQD2I1Wk.cjs.map +0 -1
- package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DVkcMcSN.js.map +0 -1
- package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-Bd6TPEpH.cjs.map +0 -1
- package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-l4KQ8HX8.js.map +0 -1
- package/dist/index-BQb_cz3-.js +0 -48
- package/dist/index-BQb_cz3-.js.map +0 -1
- package/dist/index-BW9nN-BL.cjs.map +0 -1
|
@@ -1,22 +1,23 @@
|
|
|
1
|
-
import { defineComponent, createElementBlock, openBlock, createCommentVNode, renderSlot, createElementVNode, createTextVNode, toDisplayString, computed, Fragment, renderList, normalizeClass, createBlock, resolveDynamicComponent, ref, watch, onUnmounted,
|
|
2
|
-
import {
|
|
1
|
+
import { defineComponent, createElementBlock, openBlock, createCommentVNode, renderSlot, createElementVNode, createTextVNode, toDisplayString, useSlots, computed, createVNode, Fragment, renderList, normalizeClass, createBlock, resolveDynamicComponent, withCtx, createSlots, ref, watch, onUnmounted, withDirectives, unref, vModelText, withModifiers, Teleport, Transition, normalizeStyle, nextTick, resolveComponent, mergeProps, provide, inject, vShow } from "vue";
|
|
2
|
+
import { _ as _sfc_main$c } from "./Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js";
|
|
3
|
+
import { e as _sfc_main$d, d as _sfc_main$e, c as _sfc_main$f, b as _sfc_main$g, a as _sfc_main$h } from "./BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js";
|
|
3
4
|
import { Icon } from "@iconify/vue";
|
|
4
|
-
const _hoisted_1$
|
|
5
|
-
const _hoisted_2$
|
|
5
|
+
const _hoisted_1$8 = { class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950" };
|
|
6
|
+
const _hoisted_2$6 = {
|
|
6
7
|
key: 0,
|
|
7
8
|
class: "flex items-center justify-between border-b border-gray-200 px-5 py-3 dark:border-gray-700"
|
|
8
9
|
};
|
|
9
|
-
const _hoisted_3$
|
|
10
|
-
const _hoisted_4$
|
|
10
|
+
const _hoisted_3$4 = { class: "flex flex-col gap-0.5" };
|
|
11
|
+
const _hoisted_4$3 = {
|
|
11
12
|
key: 0,
|
|
12
13
|
class: "text-md font-semibold text-gray-800 dark:text-gray-200"
|
|
13
14
|
};
|
|
14
|
-
const _hoisted_5$
|
|
15
|
+
const _hoisted_5$3 = {
|
|
15
16
|
key: 1,
|
|
16
17
|
class: "text-sm font-normal text-gray-600 dark:text-gray-400"
|
|
17
18
|
};
|
|
18
|
-
const _hoisted_6$
|
|
19
|
-
const _sfc_main$
|
|
19
|
+
const _hoisted_6$3 = { class: "flex gap-2" };
|
|
20
|
+
const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
20
21
|
__name: "CardComponent",
|
|
21
22
|
props: {
|
|
22
23
|
title: {},
|
|
@@ -24,21 +25,21 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
24
25
|
},
|
|
25
26
|
setup(__props) {
|
|
26
27
|
return (_ctx, _cache) => {
|
|
27
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
28
|
-
__props.title || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2$
|
|
29
|
-
createElementVNode("div", _hoisted_3$
|
|
30
|
-
__props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("span", _hoisted_4$
|
|
28
|
+
return openBlock(), createElementBlock("div", _hoisted_1$8, [
|
|
29
|
+
__props.title || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
|
|
30
|
+
createElementVNode("div", _hoisted_3$4, [
|
|
31
|
+
__props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("span", _hoisted_4$3, [
|
|
31
32
|
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
32
33
|
createTextVNode(toDisplayString(__props.title), 1)
|
|
33
34
|
])
|
|
34
35
|
])) : createCommentVNode("", true),
|
|
35
|
-
__props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_5$
|
|
36
|
+
__props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_5$3, [
|
|
36
37
|
renderSlot(_ctx.$slots, "description", {}, () => [
|
|
37
38
|
createTextVNode(toDisplayString(__props.description), 1)
|
|
38
39
|
])
|
|
39
40
|
])) : createCommentVNode("", true)
|
|
40
41
|
]),
|
|
41
|
-
createElementVNode("div", _hoisted_6$
|
|
42
|
+
createElementVNode("div", _hoisted_6$3, [
|
|
42
43
|
renderSlot(_ctx.$slots, "actions")
|
|
43
44
|
])
|
|
44
45
|
])) : createCommentVNode("", true),
|
|
@@ -47,29 +48,58 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
47
48
|
};
|
|
48
49
|
}
|
|
49
50
|
});
|
|
50
|
-
const _hoisted_1$
|
|
51
|
-
const _hoisted_2$
|
|
52
|
-
const _hoisted_3$
|
|
53
|
-
const _hoisted_4$
|
|
54
|
-
const _hoisted_5$
|
|
55
|
-
|
|
51
|
+
const _hoisted_1$7 = { class: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden" };
|
|
52
|
+
const _hoisted_2$5 = { class: "overflow-x-auto" };
|
|
53
|
+
const _hoisted_3$3 = { class: "w-full divide-y divide-black/10 text-left dark:divide-white/10" };
|
|
54
|
+
const _hoisted_4$2 = { class: "bg-black/5 text-sm font-semibold text-gray-600 uppercase dark:bg-white/5 dark:text-gray-400" };
|
|
55
|
+
const _hoisted_5$2 = {
|
|
56
|
+
key: 0,
|
|
57
|
+
class: "w-12 px-3 py-3"
|
|
58
|
+
};
|
|
59
|
+
const _hoisted_6$2 = {
|
|
60
|
+
key: 1,
|
|
61
|
+
class: "px-3 py-3 text-right"
|
|
62
|
+
};
|
|
63
|
+
const _hoisted_7$2 = { class: "divide-y divide-black/10 font-medium dark:divide-white/10" };
|
|
64
|
+
const _hoisted_8$2 = {
|
|
65
|
+
key: 0,
|
|
66
|
+
class: "px-3 py-4"
|
|
67
|
+
};
|
|
68
|
+
const _hoisted_9$2 = {
|
|
69
|
+
key: 1,
|
|
70
|
+
class: "flex items-center justify-end gap-2 px-3 py-4"
|
|
71
|
+
};
|
|
72
|
+
const _hoisted_10$1 = { key: 0 };
|
|
73
|
+
const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
56
74
|
__name: "TableComponent",
|
|
57
75
|
props: {
|
|
58
76
|
properties: {},
|
|
59
|
-
items: {}
|
|
77
|
+
items: {},
|
|
78
|
+
selectable: { type: Boolean, default: false },
|
|
79
|
+
selectedItems: {},
|
|
80
|
+
selectableFilter: {},
|
|
81
|
+
keyField: { default: "id" }
|
|
60
82
|
},
|
|
61
|
-
|
|
83
|
+
emits: ["select", "selectAll"],
|
|
84
|
+
setup(__props, { emit: __emit }) {
|
|
85
|
+
const props = __props;
|
|
86
|
+
const emit = __emit;
|
|
87
|
+
const slots = useSlots();
|
|
62
88
|
const typeComponents = {
|
|
63
|
-
text: _sfc_main$
|
|
64
|
-
number: _sfc_main$
|
|
65
|
-
date: _sfc_main$
|
|
66
|
-
boolean: _sfc_main$
|
|
67
|
-
badge: _sfc_main$
|
|
89
|
+
text: _sfc_main$h,
|
|
90
|
+
number: _sfc_main$g,
|
|
91
|
+
date: _sfc_main$f,
|
|
92
|
+
boolean: _sfc_main$e,
|
|
93
|
+
badge: _sfc_main$d
|
|
68
94
|
};
|
|
69
95
|
const getTypeComponent = (type = "text") => {
|
|
70
|
-
return typeComponents[type] || _sfc_main$
|
|
96
|
+
return typeComponents[type] || _sfc_main$h;
|
|
97
|
+
};
|
|
98
|
+
const visibleProperties = computed(() => props.properties.filter((p) => !p.hidden));
|
|
99
|
+
const getKey = (item) => {
|
|
100
|
+
const keyValue = item[props.keyField];
|
|
101
|
+
return String(keyValue ?? Math.random());
|
|
71
102
|
};
|
|
72
|
-
const visibleProperties = computed(() => __props.properties.filter((p) => !p.hidden));
|
|
73
103
|
const getItemValue = (item, property) => {
|
|
74
104
|
if (property.name.includes(".")) {
|
|
75
105
|
let value = item;
|
|
@@ -100,62 +130,349 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
100
130
|
}
|
|
101
131
|
return "text-xs font-medium text-gray-600 dark:text-gray-400";
|
|
102
132
|
};
|
|
133
|
+
const selectableItems = computed(() => {
|
|
134
|
+
if (!props.selectableFilter) return props.items;
|
|
135
|
+
return props.items.filter(props.selectableFilter);
|
|
136
|
+
});
|
|
137
|
+
const allSelected = computed(() => {
|
|
138
|
+
if (selectableItems.value.length === 0) return false;
|
|
139
|
+
return selectableItems.value.every((item) => {
|
|
140
|
+
var _a;
|
|
141
|
+
return (_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item));
|
|
142
|
+
});
|
|
143
|
+
});
|
|
144
|
+
const someSelected = computed(() => {
|
|
145
|
+
var _a;
|
|
146
|
+
return (((_a = props.selectedItems) == null ? void 0 : _a.size) || 0) > 0 && !allSelected.value;
|
|
147
|
+
});
|
|
148
|
+
const isSelected = (item) => {
|
|
149
|
+
var _a;
|
|
150
|
+
return ((_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item))) || false;
|
|
151
|
+
};
|
|
152
|
+
const isSelectable = (item) => {
|
|
153
|
+
if (!props.selectable) return false;
|
|
154
|
+
if (!props.selectableFilter) return true;
|
|
155
|
+
return props.selectableFilter(item);
|
|
156
|
+
};
|
|
157
|
+
const handleSelect = (item) => {
|
|
158
|
+
emit("select", getKey(item));
|
|
159
|
+
};
|
|
160
|
+
const hasActionSlot = computed(() => !!slots.action);
|
|
103
161
|
return (_ctx, _cache) => {
|
|
104
|
-
return openBlock(), createElementBlock(
|
|
105
|
-
createElementVNode("
|
|
106
|
-
createElementVNode("
|
|
107
|
-
createElementVNode("
|
|
108
|
-
(
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
])
|
|
116
|
-
],
|
|
117
|
-
}), 128)),
|
|
118
|
-
_cache[0] || (_cache[0] = createElementVNode("th", { class: "px-3 py-3 text-right" }, null, -1))
|
|
119
|
-
])
|
|
120
|
-
]),
|
|
121
|
-
createElementVNode("tbody", _hoisted_3$2, [
|
|
122
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
|
|
123
|
-
return openBlock(), createElementBlock("tr", {
|
|
124
|
-
key: item.id,
|
|
125
|
-
class: "hover:bg-black/5 dark:hover:bg-white/5"
|
|
126
|
-
}, [
|
|
162
|
+
return openBlock(), createElementBlock("div", _hoisted_1$7, [
|
|
163
|
+
createElementVNode("div", _hoisted_2$5, [
|
|
164
|
+
createElementVNode("table", _hoisted_3$3, [
|
|
165
|
+
createElementVNode("thead", _hoisted_4$2, [
|
|
166
|
+
createElementVNode("tr", null, [
|
|
167
|
+
__props.selectable ? (openBlock(), createElementBlock("th", _hoisted_5$2, [
|
|
168
|
+
createVNode(_sfc_main$c, {
|
|
169
|
+
"model-value": allSelected.value,
|
|
170
|
+
indeterminate: someSelected.value,
|
|
171
|
+
disabled: selectableItems.value.length === 0,
|
|
172
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
|
|
173
|
+
}, null, 8, ["model-value", "indeterminate", "disabled"])
|
|
174
|
+
])) : createCommentVNode("", true),
|
|
127
175
|
(openBlock(true), createElementBlock(Fragment, null, renderList(visibleProperties.value, (property) => {
|
|
128
|
-
return openBlock(), createElementBlock("
|
|
176
|
+
return openBlock(), createElementBlock("th", {
|
|
129
177
|
key: property.name,
|
|
130
|
-
class: normalizeClass([
|
|
131
|
-
getAlignmentClass(property.align),
|
|
132
|
-
getMainClass(property.main),
|
|
133
|
-
property.className,
|
|
134
|
-
"px-3 py-4"
|
|
135
|
-
])
|
|
178
|
+
class: normalizeClass([getAlignmentClass(property.align), "px-3 py-3"])
|
|
136
179
|
}, [
|
|
137
|
-
renderSlot(_ctx.$slots, "
|
|
138
|
-
|
|
139
|
-
property,
|
|
140
|
-
value: getItemValue(item, property)
|
|
141
|
-
}, () => [
|
|
142
|
-
(openBlock(), createBlock(resolveDynamicComponent(getTypeComponent(property.type || "text")), {
|
|
143
|
-
value: getItemValue(item, property)
|
|
144
|
-
}, null, 8, ["value"]))
|
|
180
|
+
renderSlot(_ctx.$slots, "header-" + property.name, { property }, () => [
|
|
181
|
+
createTextVNode(toDisplayString(property.label ?? property.name), 1)
|
|
145
182
|
])
|
|
146
183
|
], 2);
|
|
147
184
|
}), 128)),
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
185
|
+
hasActionSlot.value ? (openBlock(), createElementBlock("th", _hoisted_6$2)) : createCommentVNode("", true)
|
|
186
|
+
])
|
|
187
|
+
]),
|
|
188
|
+
createElementVNode("tbody", _hoisted_7$2, [
|
|
189
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
|
|
190
|
+
return openBlock(), createElementBlock("tr", {
|
|
191
|
+
key: getKey(item),
|
|
192
|
+
class: normalizeClass(["hover:bg-black/5 dark:hover:bg-white/5 transition-colors", { "bg-primary/5 dark:bg-primary/10": isSelected(item) }])
|
|
193
|
+
}, [
|
|
194
|
+
__props.selectable ? (openBlock(), createElementBlock("td", _hoisted_8$2, [
|
|
195
|
+
isSelectable(item) ? (openBlock(), createBlock(_sfc_main$c, {
|
|
196
|
+
key: 0,
|
|
197
|
+
"model-value": isSelected(item),
|
|
198
|
+
"onUpdate:modelValue": ($event) => handleSelect(item)
|
|
199
|
+
}, null, 8, ["model-value", "onUpdate:modelValue"])) : createCommentVNode("", true)
|
|
200
|
+
])) : createCommentVNode("", true),
|
|
201
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(visibleProperties.value, (property) => {
|
|
202
|
+
return openBlock(), createElementBlock("td", {
|
|
203
|
+
key: property.name,
|
|
204
|
+
class: normalizeClass([
|
|
205
|
+
getAlignmentClass(property.align),
|
|
206
|
+
getMainClass(property.main),
|
|
207
|
+
property.className,
|
|
208
|
+
"px-3 py-4"
|
|
209
|
+
])
|
|
210
|
+
}, [
|
|
211
|
+
renderSlot(_ctx.$slots, "item-" + property.name, {
|
|
212
|
+
item,
|
|
213
|
+
property,
|
|
214
|
+
value: getItemValue(item, property)
|
|
215
|
+
}, () => [
|
|
216
|
+
(openBlock(), createBlock(resolveDynamicComponent(getTypeComponent(property.type || "text")), {
|
|
217
|
+
value: getItemValue(item, property)
|
|
218
|
+
}, null, 8, ["value"]))
|
|
219
|
+
])
|
|
220
|
+
], 2);
|
|
221
|
+
}), 128)),
|
|
222
|
+
hasActionSlot.value ? (openBlock(), createElementBlock("td", _hoisted_9$2, [
|
|
223
|
+
renderSlot(_ctx.$slots, "action", { item })
|
|
224
|
+
])) : createCommentVNode("", true)
|
|
225
|
+
], 2);
|
|
226
|
+
}), 128))
|
|
227
|
+
])
|
|
153
228
|
])
|
|
154
229
|
]),
|
|
155
|
-
!__props.items || __props.items.length === 0 ? (openBlock(), createElementBlock("div",
|
|
230
|
+
!__props.items || __props.items.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
|
|
156
231
|
renderSlot(_ctx.$slots, "empty")
|
|
157
232
|
])) : createCommentVNode("", true)
|
|
158
|
-
]
|
|
233
|
+
]);
|
|
234
|
+
};
|
|
235
|
+
}
|
|
236
|
+
});
|
|
237
|
+
const _hoisted_1$6 = { class: "space-y-3" };
|
|
238
|
+
const _hoisted_2$4 = {
|
|
239
|
+
key: 0,
|
|
240
|
+
class: "flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-xl"
|
|
241
|
+
};
|
|
242
|
+
const _hoisted_3$2 = { class: "text-sm text-gray-600 dark:text-gray-400" };
|
|
243
|
+
const _hoisted_4$1 = {
|
|
244
|
+
key: 0,
|
|
245
|
+
class: "text-sm text-primary font-medium"
|
|
246
|
+
};
|
|
247
|
+
const _hoisted_5$1 = { class: "p-4 flex items-center gap-4" };
|
|
248
|
+
const _hoisted_6$1 = {
|
|
249
|
+
key: 0,
|
|
250
|
+
class: "flex-shrink-0"
|
|
251
|
+
};
|
|
252
|
+
const _hoisted_7$1 = {
|
|
253
|
+
key: 1,
|
|
254
|
+
class: "w-5 h-5"
|
|
255
|
+
};
|
|
256
|
+
const _hoisted_8$1 = { class: "flex-1 min-w-0" };
|
|
257
|
+
const _hoisted_9$1 = { class: "flex-shrink-0" };
|
|
258
|
+
const _hoisted_10 = { key: 1 };
|
|
259
|
+
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
260
|
+
__name: "MobileList",
|
|
261
|
+
props: {
|
|
262
|
+
items: {},
|
|
263
|
+
keyField: { default: "id" },
|
|
264
|
+
selectable: { type: Boolean, default: false },
|
|
265
|
+
selectedItems: {},
|
|
266
|
+
selectableFilter: {}
|
|
267
|
+
},
|
|
268
|
+
emits: ["select", "selectAll"],
|
|
269
|
+
setup(__props, { emit: __emit }) {
|
|
270
|
+
const props = __props;
|
|
271
|
+
const emit = __emit;
|
|
272
|
+
const slots = useSlots();
|
|
273
|
+
const getKey = (item) => {
|
|
274
|
+
const keyValue = item[props.keyField];
|
|
275
|
+
return String(keyValue ?? Math.random());
|
|
276
|
+
};
|
|
277
|
+
const selectableItems = computed(() => {
|
|
278
|
+
if (!props.selectableFilter) return props.items;
|
|
279
|
+
return props.items.filter(props.selectableFilter);
|
|
280
|
+
});
|
|
281
|
+
const allSelected = computed(() => {
|
|
282
|
+
if (selectableItems.value.length === 0) return false;
|
|
283
|
+
return selectableItems.value.every((item) => {
|
|
284
|
+
var _a;
|
|
285
|
+
return (_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item));
|
|
286
|
+
});
|
|
287
|
+
});
|
|
288
|
+
const someSelected = computed(() => {
|
|
289
|
+
var _a;
|
|
290
|
+
return (((_a = props.selectedItems) == null ? void 0 : _a.size) || 0) > 0 && !allSelected.value;
|
|
291
|
+
});
|
|
292
|
+
const isSelected = (item) => {
|
|
293
|
+
var _a;
|
|
294
|
+
return ((_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item))) || false;
|
|
295
|
+
};
|
|
296
|
+
const isSelectable = (item) => {
|
|
297
|
+
if (!props.selectable) return false;
|
|
298
|
+
if (!props.selectableFilter) return true;
|
|
299
|
+
return props.selectableFilter(item);
|
|
300
|
+
};
|
|
301
|
+
const handleSelect = (item) => {
|
|
302
|
+
emit("select", getKey(item));
|
|
303
|
+
};
|
|
304
|
+
const hasEmptySlot = computed(() => !!slots.empty);
|
|
305
|
+
return (_ctx, _cache) => {
|
|
306
|
+
return openBlock(), createElementBlock("div", _hoisted_1$6, [
|
|
307
|
+
__props.selectable && selectableItems.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
|
|
308
|
+
createVNode(_sfc_main$c, {
|
|
309
|
+
"model-value": allSelected.value,
|
|
310
|
+
indeterminate: someSelected.value,
|
|
311
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
|
|
312
|
+
}, null, 8, ["model-value", "indeterminate"]),
|
|
313
|
+
createElementVNode("span", _hoisted_3$2, toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
|
|
314
|
+
__props.selectedItems && __props.selectedItems.size > 0 ? (openBlock(), createElementBlock("span", _hoisted_4$1, " (" + toDisplayString(__props.selectedItems.size) + " sélectionné" + toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : createCommentVNode("", true)
|
|
315
|
+
])) : createCommentVNode("", true),
|
|
316
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
|
|
317
|
+
return openBlock(), createElementBlock("div", {
|
|
318
|
+
key: getKey(item),
|
|
319
|
+
class: normalizeClass(["bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-primary/30 dark:hover:border-primary/50 hover:shadow-md transition-all duration-200", {
|
|
320
|
+
"ring-2 ring-primary border-primary": isSelected(item)
|
|
321
|
+
}])
|
|
322
|
+
}, [
|
|
323
|
+
createElementVNode("div", _hoisted_5$1, [
|
|
324
|
+
__props.selectable ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
|
|
325
|
+
isSelectable(item) ? (openBlock(), createBlock(_sfc_main$c, {
|
|
326
|
+
key: 0,
|
|
327
|
+
"model-value": isSelected(item),
|
|
328
|
+
"onUpdate:modelValue": ($event) => handleSelect(item)
|
|
329
|
+
}, null, 8, ["model-value", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_7$1))
|
|
330
|
+
])) : createCommentVNode("", true),
|
|
331
|
+
renderSlot(_ctx.$slots, "avatar", { item }),
|
|
332
|
+
createElementVNode("div", _hoisted_8$1, [
|
|
333
|
+
renderSlot(_ctx.$slots, "content", { item })
|
|
334
|
+
]),
|
|
335
|
+
createElementVNode("div", _hoisted_9$1, [
|
|
336
|
+
renderSlot(_ctx.$slots, "actions", { item })
|
|
337
|
+
])
|
|
338
|
+
])
|
|
339
|
+
], 2);
|
|
340
|
+
}), 128)),
|
|
341
|
+
__props.items.length === 0 && hasEmptySlot.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
|
|
342
|
+
renderSlot(_ctx.$slots, "empty")
|
|
343
|
+
])) : createCommentVNode("", true)
|
|
344
|
+
]);
|
|
345
|
+
};
|
|
346
|
+
}
|
|
347
|
+
});
|
|
348
|
+
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
349
|
+
__name: "ResponsiveList",
|
|
350
|
+
props: {
|
|
351
|
+
items: {},
|
|
352
|
+
columns: {},
|
|
353
|
+
keyField: { default: "id" },
|
|
354
|
+
selectable: { type: Boolean, default: false },
|
|
355
|
+
selectedItems: {},
|
|
356
|
+
selectableFilter: {},
|
|
357
|
+
breakpoint: { default: "lg" }
|
|
358
|
+
},
|
|
359
|
+
emits: ["select", "selectAll"],
|
|
360
|
+
setup(__props, { emit: __emit }) {
|
|
361
|
+
const props = __props;
|
|
362
|
+
const emit = __emit;
|
|
363
|
+
const slots = useSlots();
|
|
364
|
+
const getColumnKey = (col) => col.key || col.name || "";
|
|
365
|
+
const tableProperties = computed(
|
|
366
|
+
() => props.columns.map((col) => ({
|
|
367
|
+
name: getColumnKey(col),
|
|
368
|
+
label: col.label,
|
|
369
|
+
type: col.type,
|
|
370
|
+
sortable: col.sortable,
|
|
371
|
+
hidden: col.hidden,
|
|
372
|
+
align: col.align,
|
|
373
|
+
className: col.className,
|
|
374
|
+
main: col.main
|
|
375
|
+
}))
|
|
376
|
+
);
|
|
377
|
+
const breakpointClass = computed(() => {
|
|
378
|
+
const breakpoints = {
|
|
379
|
+
sm: { mobile: "sm:hidden", desktop: "hidden sm:block" },
|
|
380
|
+
md: { mobile: "md:hidden", desktop: "hidden md:block" },
|
|
381
|
+
lg: { mobile: "lg:hidden", desktop: "hidden lg:block" },
|
|
382
|
+
xl: { mobile: "xl:hidden", desktop: "hidden xl:block" },
|
|
383
|
+
"2xl": { mobile: "2xl:hidden", desktop: "hidden 2xl:block" }
|
|
384
|
+
};
|
|
385
|
+
return breakpoints[props.breakpoint];
|
|
386
|
+
});
|
|
387
|
+
const getCellValue = (item, key) => {
|
|
388
|
+
const keys = key.split(".");
|
|
389
|
+
let value = item;
|
|
390
|
+
for (const k of keys) {
|
|
391
|
+
if (value && typeof value === "object" && k in value) {
|
|
392
|
+
value = value[k];
|
|
393
|
+
} else {
|
|
394
|
+
return void 0;
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
return value;
|
|
398
|
+
};
|
|
399
|
+
const hasCellSlot = (key) => {
|
|
400
|
+
return !!slots[`cell-${key}`];
|
|
401
|
+
};
|
|
402
|
+
const hasActionsSlot = computed(() => !!slots.actions);
|
|
403
|
+
return (_ctx, _cache) => {
|
|
404
|
+
return openBlock(), createElementBlock("div", null, [
|
|
405
|
+
createElementVNode("div", {
|
|
406
|
+
class: normalizeClass(breakpointClass.value.mobile)
|
|
407
|
+
}, [
|
|
408
|
+
createVNode(_sfc_main$9, {
|
|
409
|
+
items: __props.items,
|
|
410
|
+
"key-field": __props.keyField,
|
|
411
|
+
selectable: __props.selectable,
|
|
412
|
+
"selected-items": __props.selectedItems,
|
|
413
|
+
"selectable-filter": __props.selectableFilter,
|
|
414
|
+
onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event)),
|
|
415
|
+
onSelectAll: _cache[1] || (_cache[1] = ($event) => emit("selectAll"))
|
|
416
|
+
}, {
|
|
417
|
+
avatar: withCtx(({ item }) => [
|
|
418
|
+
renderSlot(_ctx.$slots, "avatar", { item })
|
|
419
|
+
]),
|
|
420
|
+
content: withCtx(({ item }) => [
|
|
421
|
+
renderSlot(_ctx.$slots, "mobileContent", { item })
|
|
422
|
+
]),
|
|
423
|
+
actions: withCtx(({ item }) => [
|
|
424
|
+
renderSlot(_ctx.$slots, "mobileActions", { item }, () => [
|
|
425
|
+
renderSlot(_ctx.$slots, "actions", { item })
|
|
426
|
+
])
|
|
427
|
+
]),
|
|
428
|
+
empty: withCtx(() => [
|
|
429
|
+
renderSlot(_ctx.$slots, "empty")
|
|
430
|
+
]),
|
|
431
|
+
_: 3
|
|
432
|
+
}, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter"])
|
|
433
|
+
], 2),
|
|
434
|
+
createElementVNode("div", {
|
|
435
|
+
class: normalizeClass(breakpointClass.value.desktop)
|
|
436
|
+
}, [
|
|
437
|
+
createVNode(_sfc_main$a, {
|
|
438
|
+
items: __props.items,
|
|
439
|
+
properties: tableProperties.value,
|
|
440
|
+
"key-field": __props.keyField,
|
|
441
|
+
selectable: __props.selectable,
|
|
442
|
+
"selected-items": __props.selectedItems,
|
|
443
|
+
"selectable-filter": __props.selectableFilter,
|
|
444
|
+
onSelect: _cache[2] || (_cache[2] = ($event) => emit("select", $event)),
|
|
445
|
+
onSelectAll: _cache[3] || (_cache[3] = ($event) => emit("selectAll"))
|
|
446
|
+
}, createSlots({
|
|
447
|
+
empty: withCtx(() => [
|
|
448
|
+
renderSlot(_ctx.$slots, "empty")
|
|
449
|
+
]),
|
|
450
|
+
_: 2
|
|
451
|
+
}, [
|
|
452
|
+
renderList(__props.columns, (col) => {
|
|
453
|
+
return {
|
|
454
|
+
name: `item-${getColumnKey(col)}`,
|
|
455
|
+
fn: withCtx(({ item, value }) => [
|
|
456
|
+
hasCellSlot(getColumnKey(col)) ? renderSlot(_ctx.$slots, `cell-${getColumnKey(col)}`, {
|
|
457
|
+
key: 0,
|
|
458
|
+
item,
|
|
459
|
+
value: getCellValue(item, getColumnKey(col))
|
|
460
|
+
}) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
461
|
+
createTextVNode(toDisplayString(value), 1)
|
|
462
|
+
], 64))
|
|
463
|
+
])
|
|
464
|
+
};
|
|
465
|
+
}),
|
|
466
|
+
hasActionsSlot.value ? {
|
|
467
|
+
name: "action",
|
|
468
|
+
fn: withCtx(({ item }) => [
|
|
469
|
+
renderSlot(_ctx.$slots, "actions", { item })
|
|
470
|
+
]),
|
|
471
|
+
key: "0"
|
|
472
|
+
} : void 0
|
|
473
|
+
]), 1032, ["items", "properties", "key-field", "selectable", "selected-items", "selectable-filter"])
|
|
474
|
+
], 2)
|
|
475
|
+
]);
|
|
159
476
|
};
|
|
160
477
|
}
|
|
161
478
|
});
|
|
@@ -906,7 +1223,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
906
1223
|
isExpanded.value = !isExpanded.value;
|
|
907
1224
|
};
|
|
908
1225
|
return (_ctx, _cache) => {
|
|
909
|
-
return openBlock(), createBlock(_sfc_main$
|
|
1226
|
+
return openBlock(), createBlock(_sfc_main$b, {
|
|
910
1227
|
title: __props.title,
|
|
911
1228
|
description: __props.description
|
|
912
1229
|
}, {
|
|
@@ -950,15 +1267,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
950
1267
|
}
|
|
951
1268
|
});
|
|
952
1269
|
export {
|
|
953
|
-
_sfc_main$
|
|
954
|
-
_sfc_main$
|
|
955
|
-
_sfc_main$
|
|
956
|
-
_sfc_main$
|
|
957
|
-
_sfc_main$
|
|
958
|
-
_sfc_main$
|
|
959
|
-
_sfc_main$
|
|
960
|
-
_sfc_main$
|
|
961
|
-
_sfc_main$
|
|
962
|
-
_sfc_main as i
|
|
1270
|
+
_sfc_main$b as _,
|
|
1271
|
+
_sfc_main$a as a,
|
|
1272
|
+
_sfc_main$9 as b,
|
|
1273
|
+
_sfc_main$8 as c,
|
|
1274
|
+
_sfc_main$7 as d,
|
|
1275
|
+
_sfc_main$6 as e,
|
|
1276
|
+
_sfc_main$5 as f,
|
|
1277
|
+
_sfc_main$4 as g,
|
|
1278
|
+
_sfc_main$3 as h,
|
|
1279
|
+
_sfc_main$2 as i,
|
|
1280
|
+
_sfc_main$1 as j,
|
|
1281
|
+
_sfc_main as k
|
|
963
1282
|
};
|
|
964
|
-
//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-
|
|
1283
|
+
//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-DTGAuLCh.js.map
|