cisse-vue-ui 0.5.11 → 0.5.13

package/dist/{Timeline.vue_vue_type_script_setup_true_lang-SaNCS3ie.js → Timeline.vue_vue_type_script_setup_true_lang-CuPF4MPe.js}

@@ -1,55 +1,61 @@
-import { defineComponent, createElementBlock, openBlock, createCommentVNode, renderSlot, createElementVNode, createTextVNode, toDisplayString, useSlots, computed, createVNode, Fragment, renderList, normalizeClass, createBlock, resolveDynamicComponent, withCtx, onMounted, nextTick, getCurrentInstance, getCurrentScope, hasInjectionContext, inject, watch, shallowRef, toValue, watchEffect, unref, createSlots, ref, withDirectives, vModelText, withModifiers, Teleport, Transition, normalizeStyle, resolveComponent, mergeProps, provide, vShow, onUnmounted } from "vue";
+import { defineComponent, computed, createElementBlock, openBlock, createCommentVNode, renderSlot, normalizeClass, createElementVNode, createTextVNode, toDisplayString, useSlots, createVNode, Fragment, renderList, createBlock, resolveDynamicComponent, withCtx, onMounted, nextTick, getCurrentInstance, getCurrentScope, hasInjectionContext, inject, watch, shallowRef, toValue, watchEffect, unref, createSlots, ref, withDirectives, vModelText, withModifiers, Teleport, Transition, normalizeStyle, resolveComponent, mergeProps, provide, vShow, onUnmounted } from "vue";
 import { _ as _sfc_main$j } from "./Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js";
 import { e as _sfc_main$k, d as _sfc_main$l, c as _sfc_main$m, b as _sfc_main$n, a as _sfc_main$o } from "./BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js";
 import { Icon } from "@iconify/vue";
 import { u as useDropdown } from "./useDropdown-iVu14E6s.js";
 const _hoisted_1$c = { class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950" };
-const _hoisted_2$9 = {
-  key: 0,
-  class: "border-b border-gray-200 dark:border-gray-700"
-};
+const _hoisted_2$9 = { class: "flex flex-col gap-0.5" };
 const _hoisted_3$7 = {
-  key: 1,
-  class: "flex items-center justify-between border-b border-gray-200 px-5 py-3 dark:border-gray-700"
-};
-const _hoisted_4$6 = { class: "flex flex-col gap-0.5" };
-const _hoisted_5$4 = {
-  key: 0,
-  class: "text-md font-semibold text-gray-800 dark:text-gray-200"
-};
-const _hoisted_6$4 = {
   key: 1,
   class: "text-sm font-normal text-gray-600 dark:text-gray-400"
 };
-const _hoisted_7$4 = { class: "flex gap-2" };
+const _hoisted_4$6 = { class: "flex gap-2" };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "CardComponent",
   props: {
     title: {},
-    description: {}
+    description: {},
+    titleClass: {},
+    dividerClass: {}
   },
   setup(__props) {
+    const props = __props;
+    const titleClasses = computed(
+      () => props.titleClass || "text-gray-800 dark:text-gray-200"
+    );
+    const dividerClasses = computed(
+      () => props.dividerClass || "border-gray-200 dark:border-gray-700"
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
+        _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["border-b", dividerClasses.value])
+        }, [
           renderSlot(_ctx.$slots, "header")
-        ])) : __props.title || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
-          createElementVNode("div", _hoisted_4$6, [
-            __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("span", _hoisted_5$4, [
+        ], 2)) : __props.title || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(["flex items-center justify-between border-b px-5 py-3", dividerClasses.value])
+        }, [
+          createElementVNode("div", _hoisted_2$9, [
+            __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(["text-md font-semibold", titleClasses.value])
+            }, [
               renderSlot(_ctx.$slots, "title", {}, () => [
                 createTextVNode(toDisplayString(__props.title), 1)
               ])
-            ])) : createCommentVNode("", true),
-            __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_6$4, [
+            ], 2)) : createCommentVNode("", true),
+            __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_3$7, [
               renderSlot(_ctx.$slots, "description", {}, () => [
                 createTextVNode(toDisplayString(__props.description), 1)
               ])
             ])) : createCommentVNode("", true)
           ]),
-          createElementVNode("div", _hoisted_7$4, [
+          createElementVNode("div", _hoisted_4$6, [
             renderSlot(_ctx.$slots, "actions")
           ])
-        ])) : createCommentVNode("", true),
+        ], 2)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default")
       ]);
     };
@@ -63,20 +69,29 @@ const _hoisted_5$3 = {
   key: 0,
   class: "w-12 px-3 py-3"
 };
-const _hoisted_6$3 = {
+const _hoisted_6$3 = ["onClick"];
+const _hoisted_7$3 = {
+  key: 0,
+  d: "M7 14l5-5 5 5H7z"
+};
+const _hoisted_8$3 = {
+  key: 1,
+  d: "M7 10l5 5 5-5H7z"
+};
+const _hoisted_9$3 = {
   key: 1,
   class: "px-3 py-3 text-right"
 };
-const _hoisted_7$3 = { class: "divide-y divide-black/10 font-medium dark:divide-white/10" };
-const _hoisted_8$3 = {
+const _hoisted_10$2 = { class: "divide-y divide-black/10 font-medium dark:divide-white/10" };
+const _hoisted_11$1 = {
   key: 0,
   class: "px-3 py-4"
 };
-const _hoisted_9$3 = {
+const _hoisted_12$1 = {
   key: 1,
   class: "flex items-center justify-end gap-2 px-3 py-4"
 };
-const _hoisted_10$2 = { key: 0 };
+const _hoisted_13 = { key: 0 };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "TableComponent",
   props: {
@@ -85,9 +100,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     selectable: { type: Boolean, default: false },
     selectedItems: {},
     selectableFilter: {},
-    keyField: { default: "id" }
+    keyField: { default: "id" },
+    sortBy: {},
+    sortDirection: {}
   },
-  emits: ["select", "selectAll"],
+  emits: ["select", "selectAll", "sort"],
   setup(__props, { emit: __emit }) {
     const slots = useSlots();
     const props = __props;
@@ -165,6 +182,14 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       emit("select", getKey(item));
     };
     const hasActionSlot = computed(() => !!slots.action);
+    const handleSort = (property) => {
+      if (!property.sortable) return;
+      const newDirection = props.sortBy === property.name && props.sortDirection === "asc" ? "desc" : "asc";
+      emit("sort", property.name, newDirection);
+    };
+    const isSortedColumn = (property) => {
+      return props.sortBy === property.name;
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$b, [
         createElementVNode("div", _hoisted_2$8, [
@@ -182,23 +207,55 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 (openBlock(true), createElementBlock(Fragment, null, renderList(visibleProperties.value, (property) => {
                   return openBlock(), createElementBlock("th", {
                     key: property.name,
-                    class: normalizeClass([getAlignmentClass(property.align), "px-3 py-3"])
+                    class: normalizeClass([
+                      getAlignmentClass(property.align),
+                      "px-3 py-3",
+                      property.sortable ? "cursor-pointer select-none hover:bg-black/5 dark:hover:bg-white/5" : ""
+                    ]),
+                    onClick: ($event) => handleSort(property)
                   }, [
-                    renderSlot(_ctx.$slots, "header-" + property.name, { property }, () => [
-                      createTextVNode(toDisplayString(property.label ?? property.name), 1)
-                    ])
-                  ], 2);
+                    createElementVNode("div", {
+                      class: normalizeClass(["flex items-center gap-1", {
+                        "justify-center": property.align === "center",
+                        "justify-end": property.align === "right"
+                      }])
+                    }, [
+                      renderSlot(_ctx.$slots, "header-" + property.name, { property }, () => [
+                        createTextVNode(toDisplayString(property.label ?? property.name), 1)
+                      ]),
+                      property.sortable ? (openBlock(), createElementBlock("svg", {
+                        key: 0,
+                        class: normalizeClass([
+                          "w-4 h-4 transition-colors",
+                          isSortedColumn(property) ? "text-primary-500" : "text-gray-400"
+                        ]),
+                        viewBox: "0 0 24 24",
+                        fill: "currentColor"
+                      }, [
+                        isSortedColumn(property) && __props.sortDirection === "asc" ? (openBlock(), createElementBlock("path", _hoisted_7$3)) : isSortedColumn(property) && __props.sortDirection === "desc" ? (openBlock(), createElementBlock("path", _hoisted_8$3)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                          _cache[1] || (_cache[1] = createElementVNode("path", {
+                            d: "M7 14l5-5 5 5H7z",
+                            class: "opacity-40"
+                          }, null, -1)),
+                          _cache[2] || (_cache[2] = createElementVNode("path", {
+                            d: "M7 10l5 5 5-5H7z",
+                            class: "opacity-40"
+                          }, null, -1))
+                        ], 64))
+                      ], 2)) : createCommentVNode("", true)
+                    ], 2)
+                  ], 10, _hoisted_6$3);
                 }), 128)),
-                hasActionSlot.value ? (openBlock(), createElementBlock("th", _hoisted_6$3)) : createCommentVNode("", true)
+                hasActionSlot.value ? (openBlock(), createElementBlock("th", _hoisted_9$3)) : createCommentVNode("", true)
               ])
             ]),
-            createElementVNode("tbody", _hoisted_7$3, [
+            createElementVNode("tbody", _hoisted_10$2, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
                 return openBlock(), createElementBlock("tr", {
                   key: getKey(item),
                   class: normalizeClass(["hover:bg-black/5 dark:hover:bg-white/5 transition-colors", { "bg-primary/5 dark:bg-primary/10": isSelected(item) }])
                 }, [
-                  __props.selectable ? (openBlock(), createElementBlock("td", _hoisted_8$3, [
+                  __props.selectable ? (openBlock(), createElementBlock("td", _hoisted_11$1, [
                     isSelectable(item) ? (openBlock(), createBlock(_sfc_main$j, {
                       key: 0,
                       "model-value": isSelected(item),
@@ -226,7 +283,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                       ])
                     ], 2);
                   }), 128)),
-                  hasActionSlot.value ? (openBlock(), createElementBlock("td", _hoisted_9$3, [
+                  hasActionSlot.value ? (openBlock(), createElementBlock("td", _hoisted_12$1, [
                     renderSlot(_ctx.$slots, "action", { item })
                   ])) : createCommentVNode("", true)
                 ], 2);
@@ -234,7 +291,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             ])
           ])
         ]),
-        !__props.items || __props.items.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_10$2, [
+        !__props.items || __props.items.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_13, [
           renderSlot(_ctx.$slots, "empty")
         ])) : createCommentVNode("", true)
       ]);
@@ -567,9 +624,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     selectable: { type: Boolean, default: false },
     selectedItems: {},
     selectableFilter: {},
-    breakpoint: { default: "lg" }
+    breakpoint: { default: "lg" },
+    sortBy: {},
+    sortDirection: {}
   },
-  emits: ["select", "selectAll"],
+  emits: ["select", "selectAll", "sort"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -647,8 +706,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               selectable: __props.selectable,
               "selected-items": __props.selectedItems,
               "selectable-filter": __props.selectableFilter,
+              "sort-by": __props.sortBy,
+              "sort-direction": __props.sortDirection,
               onSelect: _cache[2] || (_cache[2] = ($event) => emit("select", $event)),
-              onSelectAll: _cache[3] || (_cache[3] = ($event) => emit("selectAll"))
+              onSelectAll: _cache[3] || (_cache[3] = ($event) => emit("selectAll")),
+              onSort: _cache[4] || (_cache[4] = (col, dir) => emit("sort", col, dir))
             }, createSlots({
               empty: withCtx(() => [
                 renderSlot(_ctx.$slots, "empty")
@@ -676,7 +738,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["items", "properties", "key-field", "selectable", "selected-items", "selectable-filter"])
+            ]), 1032, ["items", "properties", "key-field", "selectable", "selected-items", "selectable-filter", "sort-by", "sort-direction"])
           ]),
           _: 3
         }))
@@ -2077,4 +2139,4 @@ export {
   _sfc_main$1 as q,
   _sfc_main as r
 };
-//# sourceMappingURL=Timeline.vue_vue_type_script_setup_true_lang-SaNCS3ie.js.map
+//# sourceMappingURL=Timeline.vue_vue_type_script_setup_true_lang-CuPF4MPe.js.map