cisse-vue-ui 0.1.10 → 0.2.1

package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-Bd6TPEpH.cjs → CollapsibleCard.vue_vue_type_script_setup_true_lang-BEE4gCBC.cjs}

@@ -1,23 +1,24 @@
 "use strict";
 const vue = require("vue");
+const Checkbox_vue_vue_type_script_setup_true_lang = require("./Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs");
 const BadgeType_vue_vue_type_script_setup_true_lang = require("./BadgeType.vue_vue_type_script_setup_true_lang-CJb63H1I.cjs");
 const vue$1 = require("@iconify/vue");
-const _hoisted_1$7 = { class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950" };
-const _hoisted_2$5 = {
+const _hoisted_1$9 = { class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950" };
+const _hoisted_2$7 = {
   key: 0,
   class: "flex items-center justify-between border-b border-gray-200 px-5 py-3 dark:border-gray-700"
 };
-const _hoisted_3$3 = { class: "flex flex-col gap-0.5" };
-const _hoisted_4$2 = {
+const _hoisted_3$4 = { class: "flex flex-col gap-0.5" };
+const _hoisted_4$3 = {
   key: 0,
   class: "text-md font-semibold text-gray-800 dark:text-gray-200"
 };
-const _hoisted_5$2 = {
+const _hoisted_5$3 = {
   key: 1,
   class: "text-sm font-normal text-gray-600 dark:text-gray-400"
 };
-const _hoisted_6$1 = { class: "flex gap-2" };
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_6$3 = { class: "flex gap-2" };
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "CardComponent",
   props: {
     title: {},
@@ -25,21 +26,21 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
-        __props.title || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
-          vue.createElementVNode("div", _hoisted_3$3, [
-            __props.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$2, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+        __props.title || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
+          vue.createElementVNode("div", _hoisted_3$4, [
+            __props.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$3, [
               vue.renderSlot(_ctx.$slots, "title", {}, () => [
                 vue.createTextVNode(vue.toDisplayString(__props.title), 1)
               ])
             ])) : vue.createCommentVNode("", true),
-            __props.description || _ctx.$slots.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$2, [
+            __props.description || _ctx.$slots.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$3, [
               vue.renderSlot(_ctx.$slots, "description", {}, () => [
                 vue.createTextVNode(vue.toDisplayString(__props.description), 1)
               ])
             ])) : vue.createCommentVNode("", true)
           ]),
-          vue.createElementVNode("div", _hoisted_6$1, [
+          vue.createElementVNode("div", _hoisted_6$3, [
             vue.renderSlot(_ctx.$slots, "actions")
           ])
         ])) : vue.createCommentVNode("", true),
@@ -48,18 +49,43 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$6 = { class: "w-full divide-y divide-black/10 text-left dark:divide-white/10" };
-const _hoisted_2$4 = { class: "bg-black/5 text-sm font-semibold text-gray-600 uppercase dark:bg-white/5 dark:text-gray-400" };
-const _hoisted_3$2 = { class: "divide-y divide-black/10 font-medium dark:divide-white/10" };
-const _hoisted_4$1 = { class: "flex items-center justify-end gap-2 px-3 py-4" };
-const _hoisted_5$1 = { key: 0 };
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$8 = { class: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden" };
+const _hoisted_2$6 = { class: "overflow-x-auto" };
+const _hoisted_3$3 = { class: "w-full divide-y divide-black/10 text-left dark:divide-white/10" };
+const _hoisted_4$2 = { class: "bg-black/5 text-sm font-semibold text-gray-600 uppercase dark:bg-white/5 dark:text-gray-400" };
+const _hoisted_5$2 = {
+  key: 0,
+  class: "w-12 px-3 py-3"
+};
+const _hoisted_6$2 = {
+  key: 1,
+  class: "px-3 py-3 text-right"
+};
+const _hoisted_7$2 = { class: "divide-y divide-black/10 font-medium dark:divide-white/10" };
+const _hoisted_8$2 = {
+  key: 0,
+  class: "px-3 py-4"
+};
+const _hoisted_9$2 = {
+  key: 1,
+  class: "flex items-center justify-end gap-2 px-3 py-4"
+};
+const _hoisted_10$1 = { key: 0 };
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "TableComponent",
   props: {
     properties: {},
-    items: {}
+    items: {},
+    selectable: { type: Boolean, default: false },
+    selectedItems: {},
+    selectableFilter: {},
+    keyField: { default: "id" }
   },
-  setup(__props) {
+  emits: ["select", "selectAll"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = vue.useSlots();
     const typeComponents = {
       text: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$1,
       number: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$2,
@@ -70,7 +96,11 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     const getTypeComponent = (type = "text") => {
       return typeComponents[type] || BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$1;
     };
-    const visibleProperties = vue.computed(() => __props.properties.filter((p) => !p.hidden));
+    const visibleProperties = vue.computed(() => props.properties.filter((p) => !p.hidden));
+    const getKey = (item) => {
+      const keyValue = item[props.keyField];
+      return String(keyValue ?? Math.random());
+    };
     const getItemValue = (item, property) => {
       if (property.name.includes(".")) {
         let value = item;
@@ -101,65 +131,361 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
       }
       return "text-xs font-medium text-gray-600 dark:text-gray-400";
     };
+    const selectableItems = vue.computed(() => {
+      if (!props.selectableFilter) return props.items;
+      return props.items.filter(props.selectableFilter);
+    });
+    const allSelected = vue.computed(() => {
+      if (selectableItems.value.length === 0) return false;
+      return selectableItems.value.every((item) => {
+        var _a;
+        return (_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item));
+      });
+    });
+    const someSelected = vue.computed(() => {
+      var _a;
+      return (((_a = props.selectedItems) == null ? void 0 : _a.size) || 0) > 0 && !allSelected.value;
+    });
+    const isSelected = (item) => {
+      var _a;
+      return ((_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item))) || false;
+    };
+    const isSelectable = (item) => {
+      if (!props.selectable) return false;
+      if (!props.selectableFilter) return true;
+      return props.selectableFilter(item);
+    };
+    const handleSelect = (item) => {
+      emit("select", getKey(item));
+    };
+    const hasActionSlot = vue.computed(() => !!slots.action);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createElementVNode("table", _hoisted_1$6, [
-          vue.createElementVNode("thead", _hoisted_2$4, [
-            vue.createElementVNode("tr", null, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleProperties.value, (property) => {
-                return vue.openBlock(), vue.createElementBlock("th", {
-                  key: property.name,
-                  class: vue.normalizeClass([getAlignmentClass(property.align), "px-3 py-3"])
-                }, [
-                  vue.renderSlot(_ctx.$slots, "header-" + property.name, { property }, () => [
-                    vue.createTextVNode(vue.toDisplayString(property.label ?? property.name), 1)
-                  ])
-                ], 2);
-              }), 128)),
-              _cache[0] || (_cache[0] = vue.createElementVNode("th", { class: "px-3 py-3 text-right" }, null, -1))
-            ])
-          ]),
-          vue.createElementVNode("tbody", _hoisted_3$2, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
-              return vue.openBlock(), vue.createElementBlock("tr", {
-                key: item.id,
-                class: "hover:bg-black/5 dark:hover:bg-white/5"
-              }, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+        vue.createElementVNode("div", _hoisted_2$6, [
+          vue.createElementVNode("table", _hoisted_3$3, [
+            vue.createElementVNode("thead", _hoisted_4$2, [
+              vue.createElementVNode("tr", null, [
+                __props.selectable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_5$2, [
+                  vue.createVNode(Checkbox_vue_vue_type_script_setup_true_lang._sfc_main, {
+                    "model-value": allSelected.value,
+                    indeterminate: someSelected.value,
+                    disabled: selectableItems.value.length === 0,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
+                  }, null, 8, ["model-value", "indeterminate", "disabled"])
+                ])) : vue.createCommentVNode("", true),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleProperties.value, (property) => {
-                  return vue.openBlock(), vue.createElementBlock("td", {
+                  return vue.openBlock(), vue.createElementBlock("th", {
                     key: property.name,
-                    class: vue.normalizeClass([
-                      getAlignmentClass(property.align),
-                      getMainClass(property.main),
-                      property.className,
-                      "px-3 py-4"
-                    ])
+                    class: vue.normalizeClass([getAlignmentClass(property.align), "px-3 py-3"])
                   }, [
-                    vue.renderSlot(_ctx.$slots, "item-" + property.name, {
-                      item,
-                      property,
-                      value: getItemValue(item, property)
-                    }, () => [
-                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getTypeComponent(property.type || "text")), {
-                        value: getItemValue(item, property)
-                      }, null, 8, ["value"]))
+                    vue.renderSlot(_ctx.$slots, "header-" + property.name, { property }, () => [
+                      vue.createTextVNode(vue.toDisplayString(property.label ?? property.name), 1)
                     ])
                   ], 2);
                 }), 128)),
-                vue.createElementVNode("td", _hoisted_4$1, [
-                  vue.renderSlot(_ctx.$slots, "action", { item })
-                ])
-              ]);
-            }), 128))
+                hasActionSlot.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$2)) : vue.createCommentVNode("", true)
+              ])
+            ]),
+            vue.createElementVNode("tbody", _hoisted_7$2, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+                return vue.openBlock(), vue.createElementBlock("tr", {
+                  key: getKey(item),
+                  class: vue.normalizeClass(["hover:bg-black/5 dark:hover:bg-white/5 transition-colors", { "bg-primary/5 dark:bg-primary/10": isSelected(item) }])
+                }, [
+                  __props.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_8$2, [
+                    isSelectable(item) ? (vue.openBlock(), vue.createBlock(Checkbox_vue_vue_type_script_setup_true_lang._sfc_main, {
+                      key: 0,
+                      "model-value": isSelected(item),
+                      "onUpdate:modelValue": ($event) => handleSelect(item)
+                    }, null, 8, ["model-value", "onUpdate:modelValue"])) : vue.createCommentVNode("", true)
+                  ])) : vue.createCommentVNode("", true),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleProperties.value, (property) => {
+                    return vue.openBlock(), vue.createElementBlock("td", {
+                      key: property.name,
+                      class: vue.normalizeClass([
+                        getAlignmentClass(property.align),
+                        getMainClass(property.main),
+                        property.className,
+                        "px-3 py-4"
+                      ])
+                    }, [
+                      vue.renderSlot(_ctx.$slots, "item-" + property.name, {
+                        item,
+                        property,
+                        value: getItemValue(item, property)
+                      }, () => [
+                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getTypeComponent(property.type || "text")), {
+                          value: getItemValue(item, property)
+                        }, null, 8, ["value"]))
+                      ])
+                    ], 2);
+                  }), 128)),
+                  hasActionSlot.value ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_9$2, [
+                    vue.renderSlot(_ctx.$slots, "action", { item })
+                  ])) : vue.createCommentVNode("", true)
+                ], 2);
+              }), 128))
+            ])
           ])
         ]),
-        !__props.items || __props.items.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
+        !__props.items || __props.items.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$1, [
+          vue.renderSlot(_ctx.$slots, "empty")
+        ])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$7 = { class: "space-y-3" };
+const _hoisted_2$5 = {
+  key: 0,
+  class: "flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-xl"
+};
+const _hoisted_3$2 = { class: "text-sm text-gray-600 dark:text-gray-400" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "text-sm text-primary font-medium"
+};
+const _hoisted_5$1 = { class: "p-4 flex items-center gap-4" };
+const _hoisted_6$1 = {
+  key: 0,
+  class: "flex-shrink-0"
+};
+const _hoisted_7$1 = {
+  key: 1,
+  class: "w-5 h-5"
+};
+const _hoisted_8$1 = { class: "flex-1 min-w-0" };
+const _hoisted_9$1 = { class: "flex-shrink-0" };
+const _hoisted_10 = { key: 1 };
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  __name: "MobileList",
+  props: {
+    items: {},
+    keyField: { default: "id" },
+    selectable: { type: Boolean, default: false },
+    selectedItems: {},
+    selectableFilter: {}
+  },
+  emits: ["select", "selectAll"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = vue.useSlots();
+    const getKey = (item) => {
+      const keyValue = item[props.keyField];
+      return String(keyValue ?? Math.random());
+    };
+    const selectableItems = vue.computed(() => {
+      if (!props.selectableFilter) return props.items;
+      return props.items.filter(props.selectableFilter);
+    });
+    const allSelected = vue.computed(() => {
+      if (selectableItems.value.length === 0) return false;
+      return selectableItems.value.every((item) => {
+        var _a;
+        return (_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item));
+      });
+    });
+    const someSelected = vue.computed(() => {
+      var _a;
+      return (((_a = props.selectedItems) == null ? void 0 : _a.size) || 0) > 0 && !allSelected.value;
+    });
+    const isSelected = (item) => {
+      var _a;
+      return ((_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item))) || false;
+    };
+    const isSelectable = (item) => {
+      if (!props.selectable) return false;
+      if (!props.selectableFilter) return true;
+      return props.selectableFilter(item);
+    };
+    const handleSelect = (item) => {
+      emit("select", getKey(item));
+    };
+    const hasEmptySlot = vue.computed(() => !!slots.empty);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+        __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
+          vue.createVNode(Checkbox_vue_vue_type_script_setup_true_lang._sfc_main, {
+            "model-value": allSelected.value,
+            indeterminate: someSelected.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
+          }, null, 8, ["model-value", "indeterminate"]),
+          vue.createElementVNode("span", _hoisted_3$2, vue.toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
+          __props.selectedItems && __props.selectedItems.size > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, " (" + vue.toDisplayString(__props.selectedItems.size) + " sélectionné" + vue.toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : vue.createCommentVNode("", true)
+        ])) : vue.createCommentVNode("", true),
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: getKey(item),
+            class: vue.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", {
+              "ring-2 ring-primary border-primary": isSelected(item)
+            }])
+          }, [
+            vue.createElementVNode("div", _hoisted_5$1, [
+              __props.selectable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [
+                isSelectable(item) ? (vue.openBlock(), vue.createBlock(Checkbox_vue_vue_type_script_setup_true_lang._sfc_main, {
+                  key: 0,
+                  "model-value": isSelected(item),
+                  "onUpdate:modelValue": ($event) => handleSelect(item)
+                }, null, 8, ["model-value", "onUpdate:modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1))
+              ])) : vue.createCommentVNode("", true),
+              vue.renderSlot(_ctx.$slots, "avatar", { item }),
+              vue.createElementVNode("div", _hoisted_8$1, [
+                vue.renderSlot(_ctx.$slots, "content", { item })
+              ]),
+              vue.createElementVNode("div", _hoisted_9$1, [
+                vue.renderSlot(_ctx.$slots, "actions", { item })
+              ])
+            ])
+          ], 2);
+        }), 128)),
+        __props.items.length === 0 && hasEmptySlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
           vue.renderSlot(_ctx.$slots, "empty")
         ])) : vue.createCommentVNode("", true)
-      ], 64);
+      ]);
+    };
+  }
+});
+const _hoisted_1$6 = { class: "responsive-list__mobile" };
+const _hoisted_2$4 = { class: "responsive-list__desktop" };
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ResponsiveList",
+  props: {
+    items: {},
+    columns: {},
+    keyField: { default: "id" },
+    selectable: { type: Boolean, default: false },
+    selectedItems: {},
+    selectableFilter: {},
+    breakpoint: { default: "lg" }
+  },
+  emits: ["select", "selectAll"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = vue.useSlots();
+    const getColumnKey = (col) => col.key || col.name || "";
+    const tableProperties = vue.computed(
+      () => props.columns.map((col) => ({
+        name: getColumnKey(col),
+        label: col.label,
+        type: col.type,
+        sortable: col.sortable,
+        hidden: col.hidden,
+        align: col.align,
+        className: col.className,
+        main: col.main
+      }))
+    );
+    const breakpointPx = vue.computed(() => {
+      const breakpoints = {
+        sm: 640,
+        md: 768,
+        lg: 1024,
+        xl: 1280,
+        "2xl": 1536
+      };
+      return breakpoints[props.breakpoint];
+    });
+    const getCellValue = (item, key) => {
+      const keys = key.split(".");
+      let value = item;
+      for (const k of keys) {
+        if (value && typeof value === "object" && k in value) {
+          value = value[k];
+        } else {
+          return void 0;
+        }
+      }
+      return value;
+    };
+    const hasCellSlot = (key) => {
+      return !!slots[`cell-${key}`];
+    };
+    const hasActionsSlot = vue.computed(() => !!slots.actions);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "responsive-list",
+        style: vue.normalizeStyle({ "--breakpoint": breakpointPx.value + "px" })
+      }, [
+        vue.createElementVNode("div", _hoisted_1$6, [
+          vue.createVNode(_sfc_main$9, {
+            items: __props.items,
+            "key-field": __props.keyField,
+            selectable: __props.selectable,
+            "selected-items": __props.selectedItems,
+            "selectable-filter": __props.selectableFilter,
+            onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event)),
+            onSelectAll: _cache[1] || (_cache[1] = ($event) => emit("selectAll"))
+          }, {
+            avatar: vue.withCtx(({ item }) => [
+              vue.renderSlot(_ctx.$slots, "avatar", { item }, void 0, true)
+            ]),
+            content: vue.withCtx(({ item }) => [
+              vue.renderSlot(_ctx.$slots, "mobileContent", { item }, void 0, true)
+            ]),
+            actions: vue.withCtx(({ item }) => [
+              vue.renderSlot(_ctx.$slots, "mobileActions", { item }, () => [
+                vue.renderSlot(_ctx.$slots, "actions", { item }, void 0, true)
+              ], true)
+            ]),
+            empty: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "empty", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter"])
+        ]),
+        vue.createElementVNode("div", _hoisted_2$4, [
+          vue.createVNode(_sfc_main$a, {
+            items: __props.items,
+            properties: tableProperties.value,
+            "key-field": __props.keyField,
+            selectable: __props.selectable,
+            "selected-items": __props.selectedItems,
+            "selectable-filter": __props.selectableFilter,
+            onSelect: _cache[2] || (_cache[2] = ($event) => emit("select", $event)),
+            onSelectAll: _cache[3] || (_cache[3] = ($event) => emit("selectAll"))
+          }, vue.createSlots({
+            empty: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "empty", {}, void 0, true)
+            ]),
+            _: 2
+          }, [
+            vue.renderList(__props.columns, (col) => {
+              return {
+                name: `item-${getColumnKey(col)}`,
+                fn: vue.withCtx(({ item, value }) => [
+                  hasCellSlot(getColumnKey(col)) ? vue.renderSlot(_ctx.$slots, `cell-${getColumnKey(col)}`, {
+                    key: 0,
+                    item,
+                    value: getCellValue(item, getColumnKey(col))
+                  }, void 0, true) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                    vue.createTextVNode(vue.toDisplayString(value), 1)
+                  ], 64))
+                ])
+              };
+            }),
+            hasActionsSlot.value ? {
+              name: "action",
+              fn: vue.withCtx(({ item }) => [
+                vue.renderSlot(_ctx.$slots, "actions", { item }, void 0, true)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["items", "properties", "key-field", "selectable", "selected-items", "selectable-filter"])
+        ])
+      ], 4);
     };
   }
 });
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const ResponsiveList = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-5563bb86"]]);
 const _hoisted_1$5 = {
   key: 0,
   class: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -907,7 +1233,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       isExpanded.value = !isExpanded.value;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$9, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$b, {
         title: __props.title,
         description: __props.description
       }, {
@@ -950,14 +1276,16 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-exports._sfc_main = _sfc_main$9;
-exports._sfc_main$1 = _sfc_main$8;
-exports._sfc_main$2 = _sfc_main$7;
-exports._sfc_main$3 = _sfc_main$6;
-exports._sfc_main$4 = _sfc_main$5;
-exports._sfc_main$5 = _sfc_main$4;
-exports._sfc_main$6 = _sfc_main$3;
-exports._sfc_main$7 = _sfc_main$2;
-exports._sfc_main$8 = _sfc_main$1;
-exports._sfc_main$9 = _sfc_main;
-//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-Bd6TPEpH.cjs.map
+exports.ResponsiveList = ResponsiveList;
+exports._sfc_main = _sfc_main$b;
+exports._sfc_main$1 = _sfc_main$a;
+exports._sfc_main$10 = _sfc_main;
+exports._sfc_main$2 = _sfc_main$9;
+exports._sfc_main$3 = _sfc_main$7;
+exports._sfc_main$4 = _sfc_main$6;
+exports._sfc_main$5 = _sfc_main$5;
+exports._sfc_main$6 = _sfc_main$4;
+exports._sfc_main$7 = _sfc_main$3;
+exports._sfc_main$8 = _sfc_main$2;
+exports._sfc_main$9 = _sfc_main$1;
+//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-BEE4gCBC.cjs.map