cisse-vue-ui 0.5.12 → 0.5.13

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

@@ -69,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: {
@@ -91,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;
@@ -171,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, [
@@ -188,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),
@@ -232,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);
@@ -240,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)
       ]);
@@ -573,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;
@@ -653,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")
@@ -682,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
         }))
@@ -2083,4 +2139,4 @@ export {
   _sfc_main$1 as q,
   _sfc_main as r
 };
-//# sourceMappingURL=Timeline.vue_vue_type_script_setup_true_lang-go_BS8Q4.js.map
+//# sourceMappingURL=Timeline.vue_vue_type_script_setup_true_lang-CuPF4MPe.js.map