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.
Files changed (46) hide show
  1. package/README.md +162 -8
  2. package/dist/Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js +54 -0
  3. package/dist/Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js.map +1 -0
  4. package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs +53 -0
  5. package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs.map +1 -0
  6. 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
  7. package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-Cs6KGC-0.cjs.map +1 -0
  8. package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-l4KQ8HX8.js → CollapsibleCard.vue_vue_type_script_setup_true_lang-DTGAuLCh.js} +406 -87
  9. package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-DTGAuLCh.js.map +1 -0
  10. 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
  11. package/dist/Switch.vue_vue_type_script_setup_true_lang-C2_5u-HL.js.map +1 -0
  12. 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
  13. package/dist/Switch.vue_vue_type_script_setup_true_lang-V-FtNcTd.cjs.map +1 -0
  14. package/dist/components/core/MobileList.vue.d.ts +80 -0
  15. package/dist/components/core/ResponsiveList.vue.d.ts +115 -0
  16. package/dist/components/core/TableComponent.vue.d.ts +26 -28
  17. package/dist/components/core/index.cjs +11 -9
  18. package/dist/components/core/index.cjs.map +1 -1
  19. package/dist/components/core/index.d.ts +4 -0
  20. package/dist/components/core/index.js +11 -9
  21. package/dist/components/form/index.cjs +10 -9
  22. package/dist/components/form/index.cjs.map +1 -1
  23. package/dist/components/form/index.js +3 -2
  24. package/dist/components/form/index.js.map +1 -1
  25. package/dist/components/index.cjs +21 -18
  26. package/dist/components/index.cjs.map +1 -1
  27. package/dist/components/index.js +18 -15
  28. package/dist/components/index.js.map +1 -1
  29. package/dist/index-Ck4eaNes.js +51 -0
  30. package/dist/index-Ck4eaNes.js.map +1 -0
  31. package/dist/{index-BW9nN-BL.cjs → index-c27X2k2e.cjs} +22 -19
  32. package/dist/index-c27X2k2e.cjs.map +1 -0
  33. package/dist/index.cjs +22 -19
  34. package/dist/index.cjs.map +1 -1
  35. package/dist/index.js +19 -16
  36. package/dist/index.js.map +1 -1
  37. package/dist/style.css +1 -1
  38. package/dist/types/form.d.ts +2 -0
  39. package/package.json +1 -1
  40. package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DQD2I1Wk.cjs.map +0 -1
  41. package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DVkcMcSN.js.map +0 -1
  42. package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-Bd6TPEpH.cjs.map +0 -1
  43. package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-l4KQ8HX8.js.map +0 -1
  44. package/dist/index-BQb_cz3-.js +0 -48
  45. package/dist/index-BQb_cz3-.js.map +0 -1
  46. 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, createVNode, withDirectives, unref, vModelText, withModifiers, Teleport, Transition, withCtx, normalizeStyle, nextTick, resolveComponent, mergeProps, provide, inject, vShow } from "vue";
2
- import { e as _sfc_main$a, d as _sfc_main$b, c as _sfc_main$c, b as _sfc_main$d, a as _sfc_main$e } from "./BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js";
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$7 = { class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950" };
5
- const _hoisted_2$5 = {
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$3 = { class: "flex flex-col gap-0.5" };
10
- const _hoisted_4$2 = {
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$2 = {
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$1 = { class: "flex gap-2" };
19
- const _sfc_main$9 = /* @__PURE__ */ defineComponent({
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$7, [
28
- __props.title || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
29
- createElementVNode("div", _hoisted_3$3, [
30
- __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("span", _hoisted_4$2, [
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$2, [
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$1, [
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$6 = { class: "w-full divide-y divide-black/10 text-left dark:divide-white/10" };
51
- const _hoisted_2$4 = { class: "bg-black/5 text-sm font-semibold text-gray-600 uppercase dark:bg-white/5 dark:text-gray-400" };
52
- const _hoisted_3$2 = { class: "divide-y divide-black/10 font-medium dark:divide-white/10" };
53
- const _hoisted_4$1 = { class: "flex items-center justify-end gap-2 px-3 py-4" };
54
- const _hoisted_5$1 = { key: 0 };
55
- const _sfc_main$8 = /* @__PURE__ */ defineComponent({
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
- setup(__props) {
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$e,
64
- number: _sfc_main$d,
65
- date: _sfc_main$c,
66
- boolean: _sfc_main$b,
67
- badge: _sfc_main$a
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$e;
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(Fragment, null, [
105
- createElementVNode("table", _hoisted_1$6, [
106
- createElementVNode("thead", _hoisted_2$4, [
107
- createElementVNode("tr", null, [
108
- (openBlock(true), createElementBlock(Fragment, null, renderList(visibleProperties.value, (property) => {
109
- return openBlock(), createElementBlock("th", {
110
- key: property.name,
111
- class: normalizeClass([getAlignmentClass(property.align), "px-3 py-3"])
112
- }, [
113
- renderSlot(_ctx.$slots, "header-" + property.name, { property }, () => [
114
- createTextVNode(toDisplayString(property.label ?? property.name), 1)
115
- ])
116
- ], 2);
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("td", {
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, "item-" + property.name, {
138
- item,
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
- createElementVNode("td", _hoisted_4$1, [
149
- renderSlot(_ctx.$slots, "action", { item })
150
- ])
151
- ]);
152
- }), 128))
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", _hoisted_5$1, [
230
+ !__props.items || __props.items.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
156
231
  renderSlot(_ctx.$slots, "empty")
157
232
  ])) : createCommentVNode("", true)
158
- ], 64);
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$9, {
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$9 as _,
954
- _sfc_main$8 as a,
955
- _sfc_main$7 as b,
956
- _sfc_main$6 as c,
957
- _sfc_main$5 as d,
958
- _sfc_main$4 as e,
959
- _sfc_main$3 as f,
960
- _sfc_main$2 as g,
961
- _sfc_main$1 as h,
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-l4KQ8HX8.js.map
1283
+ //# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-DTGAuLCh.js.map