@qikdev/vue-ui 0.1.81 → 0.1.84

package/dist/lib.es.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 };
 import { openBlock, createElementBlock, renderSlot, resolveComponent, createBlock, withCtx, createVNode, Fragment, renderList, normalizeClass, toDisplayString, withDirectives, resolveDynamicComponent, vShow, withModifiers, createTextVNode, createCommentVNode, createElementVNode, mergeProps, toHandlers, pushScopeId, popScopeId, normalizeStyle, Teleport, vModelText, vModelSelect, withKeys, TransitionGroup, defineComponent, h, nextTick, vModelDynamic, vModelCheckbox, reactive, watch } from "vue";
 import { EventDispatcher } from "@qikdev/sdk";
-const version$1 = "0.1.81";
+const version$1 = "0.1.84";
 var flexColumn_vue_vue_type_style_index_0_scoped_true_lang = "";
 var _export_sfc = (sfc, props2) => {
   const target = sfc.__vccOpts || sfc;
@@ -762,6 +762,7 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ux_button = resolveComponent("ux-button");
   return openBlock(), createElementBlock("td", _hoisted_1$P, [
     createVNode(_component_ux_button, {
+      color: $options.button.color,
       size: $options.button.size,
       loading: $data.processing,
       onClick: withModifiers($options.clicked, ["stop", "prevent"])
@@ -777,10 +778,10 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["icon"])) : createCommentVNode("", true)
       ]),
       _: 1
-    }, 8, ["size", "loading", "onClick"])
+    }, 8, ["color", "size", "loading", "onClick"])
   ]);
 }
-var ButtonCell = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__scopeId", "data-v-3cbecb7e"]]);
+var ButtonCell = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__scopeId", "data-v-1c498011"]]);
 class LuxonError extends Error {
 }
 class InvalidDateTimeError extends LuxonError {
@@ -5076,6 +5077,12 @@ const _sfc_main$W = {
         top: 0,
         left: 0
       });
+    },
+    sort(s2) {
+      this.sorting = s2;
+    },
+    sorting(s2) {
+      this.$emit("update:sort", s2);
     }
   },
   props: {
@@ -5112,6 +5119,16 @@ const _sfc_main$W = {
         return true;
       }
     },
+    sort: {
+      type: Object,
+      default() {
+        return {
+          key: "title",
+          type: "string",
+          direction: "asc"
+        };
+      }
+    },
     selection: {
       type: Array,
       default() {
@@ -5125,7 +5142,16 @@ const _sfc_main$W = {
       type: Function
     }
   },
+  data() {
+    return {
+      sorting: this.sort
+    };
+  },
   computed: {
+    currentSortDirection() {
+      var _a;
+      return ((_a = this.sorting) == null ? void 0 : _a.direction) || "asc";
+    },
     selectionHash() {
       var self2 = this;
       return self2.selection.reduce(function(set, row) {
@@ -5193,6 +5219,18 @@ const _sfc_main$W = {
       return array;
     },
     toggleSort(column) {
+      var _a, _b;
+      const currentKey = (_a = this.sorting) == null ? void 0 : _a.key;
+      const currentDirection = ((_b = this.sorting) == null ? void 0 : _b.direction) || "asc";
+      let { key, direction } = column;
+      if (key === currentKey) {
+        direction = currentDirection === "dsc" ? "asc" : "dsc";
+      }
+      this.sorting = {
+        key,
+        direction,
+        type: column.type
+      };
     },
     clickRow(row) {
       this.$emit("click:row", row);
@@ -5230,6 +5268,8 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ux_list_item = resolveComponent("ux-list-item");
   const _component_ux_list = resolveComponent("ux-list");
   const _component_ux_menu = resolveComponent("ux-menu");
+  const _component_flex_cell = resolveComponent("flex-cell");
+  const _component_flex_row = resolveComponent("flex-row");
   const _component_table_row = resolveComponent("table-row");
   return openBlock(), createElementBlock("div", _hoisted_1$K, [
     createElementVNode("div", _hoisted_2$C, [
@@ -5287,10 +5327,38 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
               })
             ])) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList($options.renderColumns, (column) => {
+              var _a;
               return openBlock(), createElementBlock("th", {
                 onClick: ($event) => $options.toggleSort(column),
-                class: normalizeClass(column.class)
-              }, toDisplayString(column.title), 11, _hoisted_7$f);
+                class: normalizeClass([{ sortable: column.sortable !== false, active: column.key === ((_a = $data.sorting) == null ? void 0 : _a.key) }, column.class])
+              }, [
+                createVNode(_component_flex_row, {
+                  gap: "",
+                  vcenter: ""
+                }, {
+                  default: withCtx(() => {
+                    var _a2;
+                    return [
+                      createVNode(_component_flex_cell, null, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(column.title), 1)
+                        ]),
+                        _: 2
+                      }, 1024),
+                      column.key === ((_a2 = $data.sorting) == null ? void 0 : _a2.key) ? (openBlock(), createBlock(_component_flex_cell, {
+                        key: 0,
+                        shrink: ""
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString($options.currentSortDirection === "asc" ? "\u25B4" : "\u25BE"), 1)
+                        ]),
+                        _: 1
+                      })) : createCommentVNode("", true)
+                    ];
+                  }),
+                  _: 2
+                }, 1024)
+              ], 10, _hoisted_7$f);
             }), 256)),
             $props.enableActions ? (openBlock(), createElementBlock("th", _hoisted_8$8, [
               renderSlot(_ctx.$slots, "corner", {}, void 0, true)
@@ -5317,7 +5385,7 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
     ], 512)
   ]);
 }
-var NativeTable = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__scopeId", "data-v-e626ef3a"]]);
+var NativeTable = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__scopeId", "data-v-129ac46c"]]);
 var spinner_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main$V = {
   props: {
@@ -6344,6 +6412,9 @@ var safeJsonStringify = safeJsonStringify$1.exports;
 function isUndefined$6(v, type) {
   return v === void 0 || v === null || type == "date" && v.toString && v.toString() === "Invalid Date";
 }
+function isNotEmpty(value) {
+  return value !== void 0 && value !== null;
+}
 var InputMixin = {
   props: {
     field: {
@@ -6571,13 +6642,15 @@ var InputMixin = {
     },
     getValue(option2) {
       if (!option2) {
-        return;
+        return this.cleanTextInput(option2);
       }
-      var value = option2._id || option2.value;
-      if (!value && option2.title && !this.returnObject) {
+      var value = this.cleanTextInput(option2._id || option2.value);
+      var hasValue = isNotEmpty(value);
+      if (!hasValue && option2.title && !this.returnObject) {
         value = option2.title;
       }
-      return value || option2;
+      value = this.cleanTextInput(value);
+      return isNotEmpty(value) ? value : option2;
     },
     getLabel(option2) {
       if (!option2) {
@@ -6719,7 +6792,9 @@ const _sfc_main$I = {
         }
       } else {
         if (self2.multiValue) {
-          val = (val || []).filter(Boolean).map(function(i2) {
+          val = (val || []).filter(function(i2) {
+            return i2 !== void 0 && i2 !== null;
+          }).map(function(i2) {
             return self2.getValue(i2);
           });
         } else {
@@ -6742,13 +6817,27 @@ const _sfc_main$I = {
             val.length = self2.maximum;
           }
         }
-        val = val.filter(Boolean).map(function(v) {
+        val = val.filter(function(v) {
+          return v !== void 0 && v !== null;
+        }).map(function(v) {
           var valueKey2 = self2.getValue(v);
           return self2.returnObject ? self2.optionLookup[valueKey2] : valueKey2;
         });
       } else {
         var valueKey = self2.getValue(val);
         val = self2.returnObject ? self2.optionLookup[valueKey] : valueKey;
+        switch (val) {
+          case "":
+            switch (self2.type) {
+              case "decimal":
+              case "float":
+              case "number":
+              case "integer":
+                val = void 0;
+                break;
+            }
+            break;
+        }
       }
       return val;
     }
@@ -6840,7 +6929,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 2);
 }
-var NativeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__scopeId", "data-v-be09a2cc"]]);
+var NativeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__scopeId", "data-v-a06c20f2"]]);
 var phoneNumberInput_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main$H = {
   props: {
@@ -18463,6 +18552,9 @@ const _sfc_main$5 = {
     }
   },
   computed: {
+    viewModeCacheKey() {
+      return `${this.cacheKey}-${this.loadKey}`;
+    },
     dateRangeField() {
       return {
         type: "object",
@@ -18500,7 +18592,7 @@ const _sfc_main$5 = {
       }
       return view;
     },
-    sort() {
+    defaultSort() {
       var _a;
       var defaultSort = ((_a = this.definition) == null ? void 0 : _a.defaultSort) || {
         key: "title",
@@ -18681,7 +18773,7 @@ const _sfc_main$5 = {
     },
     loadCriteria() {
       var self2 = this;
-      var sort2 = self2.sort;
+      var sort2 = self2.sort || self2.defaultSort;
       var search = self2.keywords;
       var select = self2.selectFields;
       var page = self2.page;
@@ -18811,6 +18903,7 @@ const _sfc_main$5 = {
       promise.then(function(res) {
         cancelInflight = null;
         self2.loading = false;
+        self2.loadKey++;
       });
       promise.catch(function(err) {
         cancelInflight = null;
@@ -18833,6 +18926,7 @@ const _sfc_main$5 = {
       manager,
       loading: true,
       additionalFields: [],
+      loadKey: 1,
       page: {
         size: 50,
         index: 1
@@ -18841,6 +18935,7 @@ const _sfc_main$5 = {
         operator: "and",
         filters: []
       },
+      sort: this.defaultSort,
       keywords: this.search,
       dateRangeFilter: {
         dateRange: this.dateRange
@@ -18849,7 +18944,7 @@ const _sfc_main$5 = {
     };
   }
 };
-const _withScopeId = (n2) => (pushScopeId("data-v-2132dfaf"), n2 = n2(), popScopeId(), n2);
+const _withScopeId = (n2) => (pushScopeId("data-v-651a3eab"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("p", null, null, -1));
 const _hoisted_2$4 = { key: 0 };
 const _hoisted_3$4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("p", null, null, -1));
@@ -18888,13 +18983,16 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                   default: withCtx(() => [
                     $options.viewMode && $options.viewMode.component ? (openBlock(), createBlock(resolveDynamicComponent($options.viewMode.component), {
                       key: 0,
+                      cacheKey: $options.viewModeCacheKey,
                       selection: $data.manager.items,
                       items: $options.items,
                       "onClick:actions": $options.actionsClicked,
                       "onSelect:item:toggle": $options.rowToggled,
                       "onClick:item": $options.rowClicked
-                    }, null, 8, ["selection", "items", "onClick:actions", "onSelect:item:toggle", "onClick:item"])) : (openBlock(), createBlock(_component_native_table, {
+                    }, null, 8, ["cacheKey", "selection", "items", "onClick:actions", "onSelect:item:toggle", "onClick:item"])) : (openBlock(), createBlock(_component_native_table, {
                       key: 1,
+                      sort: $data.sort,
+                      "onUpdate:sort": _cache[0] || (_cache[0] = ($event) => $data.sort = $event),
                       enableActions: $props.enableActions,
                       total: $options.totalItems,
                       selectAll: $options.selectAll,
@@ -18944,7 +19042,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                         })
                       ]),
                       _: 1
-                    }, 8, ["enableActions", "total", "selectAll", "deselectAll", "selection", "onClick:row", "onClick:actions", "onSelect:row:toggle", "onSelect:multiple", "onDeselect:multiple", "rows", "columns"]))
+                    }, 8, ["sort", "enableActions", "total", "selectAll", "deselectAll", "selection", "onClick:row", "onClick:actions", "onSelect:row:toggle", "onSelect:multiple", "onDeselect:multiple", "rows", "columns"]))
                   ]),
                   _: 1
                 })) : !$data.loading ? (openBlock(), createBlock(_component_flex_column, {
@@ -18980,7 +19078,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                       default: withCtx(() => [
                         createVNode(_component_search, {
                           modelValue: $data.keywords,
-                          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.keywords = $event),
+                          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.keywords = $event),
                           loading: $options.searching,
                           debounce: 500,
                           placeholder: "Keyword Search"
@@ -18990,14 +19088,14 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                           createVNode(_component_ux_field, {
                             field: $options.dateRangeField,
                             modelValue: $data.dateRangeFilter,
-                            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.dateRangeFilter = $event)
+                            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.dateRangeFilter = $event)
                           }, null, 8, ["field", "modelValue"])
                         ])) : createCommentVNode("", true),
                         _hoisted_3$4,
                         createVNode(_component_filter_builder, {
                           definition: $data.definition,
                           modelValue: $data.filter,
-                          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.filter = $event)
+                          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $data.filter = $event)
                         }, null, 8, ["definition", "modelValue"])
                       ]),
                       _: 1
@@ -19017,7 +19115,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("div", _hoisted_4$4, [
               createVNode(_component_pager, {
                 page: $data.page,
-                "onUpdate:page": _cache[3] || (_cache[3] = ($event) => $data.page = $event),
+                "onUpdate:page": _cache[4] || (_cache[4] = ($event) => $data.page = $event),
                 total: $options.totalItems
               }, null, 8, ["page", "total"])
             ]),
@@ -19034,7 +19132,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })) : createCommentVNode("", true);
 }
-var ContentBrowser = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-2132dfaf"]]);
+var ContentBrowser = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-651a3eab"]]);
 var ModalMixin = {
   props: {
     options: {