cisse-vue-ui 0.5.12 → 0.5.14

package/dist/{Timeline.vue_vue_type_script_setup_true_lang-5MnyzOrB.cjs → Timeline.vue_vue_type_script_setup_true_lang-CqeiZOID.cjs}

@@ -70,20 +70,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__ */ vue.defineComponent({
   __name: "TableComponent",
   props: {
@@ -92,9 +101,11 @@ const _sfc_main$h = /* @__PURE__ */ vue.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 = vue.useSlots();
     const props = __props;
@@ -172,6 +183,14 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       emit("select", getKey(item));
     };
     const hasActionSlot = vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
         vue.createElementVNode("div", _hoisted_2$8, [
@@ -189,23 +208,55 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                 (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"])
+                    class: vue.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)
                   }, [
-                    vue.renderSlot(_ctx.$slots, "header-" + property.name, { property }, () => [
-                      vue.createTextVNode(vue.toDisplayString(property.label ?? property.name), 1)
-                    ])
-                  ], 2);
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["flex items-center gap-1", {
+                        "justify-center": property.align === "center",
+                        "justify-end": property.align === "right"
+                      }])
+                    }, [
+                      vue.renderSlot(_ctx.$slots, "header-" + property.name, { property }, () => [
+                        vue.createTextVNode(vue.toDisplayString(property.label ?? property.name), 1)
+                      ]),
+                      property.sortable ? (vue.openBlock(), vue.createElementBlock("svg", {
+                        key: 0,
+                        class: vue.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" ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_7$3)) : isSortedColumn(property) && __props.sortDirection === "desc" ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_8$3)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                          _cache[1] || (_cache[1] = vue.createElementVNode("path", {
+                            d: "M7 14l5-5 5 5H7z",
+                            class: "opacity-40"
+                          }, null, -1)),
+                          _cache[2] || (_cache[2] = vue.createElementVNode("path", {
+                            d: "M7 10l5 5 5-5H7z",
+                            class: "opacity-40"
+                          }, null, -1))
+                        ], 64))
+                      ], 2)) : vue.createCommentVNode("", true)
+                    ], 2)
+                  ], 10, _hoisted_6$3);
                 }), 128)),
-                hasActionSlot.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$3)) : vue.createCommentVNode("", true)
+                hasActionSlot.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_9$3)) : vue.createCommentVNode("", true)
               ])
             ]),
-            vue.createElementVNode("tbody", _hoisted_7$3, [
+            vue.createElementVNode("tbody", _hoisted_10$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$3, [
+                  __props.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_11$1, [
                     isSelectable(item) ? (vue.openBlock(), vue.createBlock(Checkbox_vue_vue_type_script_setup_true_lang._sfc_main, {
                       key: 0,
                       "model-value": isSelected(item),
@@ -233,7 +284,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                       ])
                     ], 2);
                   }), 128)),
-                  hasActionSlot.value ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_9$3, [
+                  hasActionSlot.value ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_12$1, [
                     vue.renderSlot(_ctx.$slots, "action", { item })
                   ])) : vue.createCommentVNode("", true)
                 ], 2);
@@ -241,7 +292,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
             ])
           ])
         ]),
-        !__props.items || __props.items.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$2, [
+        !__props.items || __props.items.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
           vue.renderSlot(_ctx.$slots, "empty")
         ])) : vue.createCommentVNode("", true)
       ]);
@@ -574,9 +625,11 @@ const _sfc_main$f = /* @__PURE__ */ vue.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;
@@ -654,8 +707,11 @@ const _sfc_main$f = /* @__PURE__ */ vue.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))
             }, vue.createSlots({
               empty: vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, "empty")
@@ -683,7 +739,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.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
         }))
@@ -2082,4 +2138,4 @@ exports._sfc_main$6 = _sfc_main$c;
 exports._sfc_main$7 = _sfc_main$b;
 exports._sfc_main$8 = _sfc_main$a;
 exports._sfc_main$9 = _sfc_main$9;
-//# sourceMappingURL=Timeline.vue_vue_type_script_setup_true_lang-5MnyzOrB.cjs.map
+//# sourceMappingURL=Timeline.vue_vue_type_script_setup_true_lang-CqeiZOID.cjs.map