@quoreadmin/ui 1.9.3 → 1.10.1

package/dist/index149.js

@@ -1,31 +1,294 @@
-import { defineComponent as e } from "vue";
-const r = e({
-  name: "QTag",
-  components: {},
+import { defineComponent as H, ref as n, computed as a, watch as g, nextTick as f } from "vue";
+import { Multiselect as I } from "./index199.js";
+import { useI18n as k } from "vue-i18n";
+/* empty css         */
+import q from "./index6.js";
+const U = H({
+  name: "QSelect",
+  components: {
+    QBadge: q,
+    VueMultiselect: I
+  },
   props: {
-    tagClass: {
+    id: {
       type: String,
       default: ""
     },
-    bgColor: {
+    // Options in the select
+    options: {
+      type: [Array, Object],
+      required: !0
+    },
+    // v-model
+    modelValue: {
+      type: [String, Number, Array, Object, null, void 0],
+      default: void 0
+    },
+    // trackby is for selected value
+    // Used to compare objects. Only use if options are objects.
+    trackBy: {
+      type: String,
+      default: "id"
+    },
+    // Label from option Object, that will be visible in the dropdown.
+    label: {
+      type: String,
+      default: "label"
+    },
+    // Equivalent to the placeholder attribute on a <select> input.
+    placeholder: {
       type: String,
-      default: "bg-green-0"
+      default: ""
+    },
+    // In our case, the multiselect acts like the tagging component - https://vue-multiselect.js.org/#sub-tagging
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    taggable: {
+      type: Boolean,
+      default: !1
+    },
+    // Add / removes search input.
+    searchable: {
+      type: Boolean,
+      default: !0
+    },
+    // Defaulting to an empty function - this overrides vue-multiselects default sort
+    // customLabel(a, label).length - customLabel(b, label).length
+    // which is sorting by the length of the label desc
+    filterSortFunction: {
+      type: Function,
+      default: () => {
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
     },
-    textColor: {
+    // Grouping - like optgroups
+    // https://vue-multiselect.js.org/#sub-option-groups
+    groupValues: {
       type: String,
-      default: "text-green-20"
+      default: ""
+    },
+    groupLabel: {
+      type: String,
+      default: ""
+    },
+    // Props for vue-multiselect - deselectGroupLabel, selectGroupLabel, selectLabel
+    groupSelectable: {
+      type: Boolean,
+      default: !0
+    },
+    // A couple of dropdowns have checkboxes
+    hasCheckboxes: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "lg"
+    },
+    // TODO: Document what this is for when I realize what it is used for
+    info: {
+      type: String,
+      default: ""
+    },
+    // NEW - Allows to remove all selected values. Otherwise one must be left selected.
+    allowEmpty: {
+      type: Boolean,
+      default: !0
+    },
+    // Array of keyboard key aliases to block when selecting ex ['Tab', 'Enter', 'Delete']
+    blockKeys: {
+      type: Array,
+      default: () => ["Delete"]
     },
-    shape: {
+    // We could make this a slot like optionPrefix
+    noResultMessage: {
       type: String,
-      default: "square"
+      default: ""
+    },
+    // Message to show when options array is empty
+    noOptionsMessage: {
+      type: String,
+      default: ""
+    },
+    // Selection control for mobile
+    selectionControl: {
+      type: Boolean,
+      default: !1
+    },
+    showExpanded: {
+      type: Boolean,
+      default: !1
+    },
+    showPlaceholderImage: {
+      type: Boolean,
+      default: !0
+    },
+    // Use this with multiple = true
+    showSelectAll: {
+      type: Boolean,
+      default: !1
+    },
+    // Helpful text for user to know how to add a new option
+    tagPlaceholder: {
+      type: String,
+      default: ""
+    },
+    // Expands the field to see all selected options
+    expand: {
+      type: Boolean,
+      default: !1
+    },
+    // Shows the selected count
+    showSelectedCount: {
+      type: Boolean,
+      default: !1
+    },
+    // Send email report and schedule report have email dropdowns with name & email. In those use cases, the selected value needs to be truncated.
+    truncateTag: {
+      type: Boolean,
+      default: !1
+    },
+    // Limit of options shown to the user - refer to receipents and week frequency example
+    limitShown: {
+      type: Number,
+      default: null
+    },
+    // Ability to pass in a function if we need validation for tags (example: email needs to check if it's a valid email before adding it to the list of options)
+    validationMethod: {
+      type: Function,
+      default: () => !0
+    },
+    // Show descriptions as part of the options (on right).
+    showOptionDescription: {
+      type: Boolean,
+      default: !1
+    },
+    // There are use cases where we do not want taggable true, because taggable allows for adding values to the list of options. There are scenarios where design wants the tag styling in some places but then not in others
+    showTags: {
+      type: Boolean,
+      default: !1
+    },
+    // Open direction of the options. Default to below.
+    openDirection: {
+      type: String,
+      default: "bottom"
+    },
+    // Shows "*Required" indicator next to placeholder with different styling
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    // Use this with taggable = false, multiple = false, showTags = false to allow for adding options without tags.
+    useAddTagsOnly: {
+      type: Boolean,
+      default: !1
+    },
+    clearOnSelect: {
+      type: Boolean,
+      default: !1
+    },
+    closeOnSelect: {
+      type: Boolean,
+      default: !1
+    },
+    // Enables floating label behavior - label floats to top when focused or has value
+    floatingLabel: {
+      type: Boolean,
+      default: !1
     }
   },
-  setup(n, { slots: t }) {
-    return {
-      hasIcon: !!t.icon
+  emits: ["update:model-value"],
+  setup(l, { slots: h, emit: o }) {
+    const { t: r } = k(), d = n(null), c = n(null), e = n(l.modelValue), p = n(""), s = n(!1), i = n([]), y = a(() => Array.isArray(l.options) ? l.options.length : 0), m = a(() => !!h.action), S = a(() => l.noResultMessage || r("HC_PRESS_ENTER_TO_CREATE_A_TAG")), b = a(() => l.tagPlaceholder || r("HC_PRESS_ENTER_TO_CREATE_A_TAG")), B = a(() => l.noOptionsMessage || r("HC_LIST_IS_EMPTY")), _ = a(() => y.value === e.value.length ? r("HC_ALL") : e.value.length > 1 ? r("HC_MULTIPLE_SELECTED") : e.value[0].label || e.value[0].name || ""), T = a(() => l.taggable || l.showTags), A = a(() => !!(l.groupValues && l.groupLabel && l.groupSelectable)), v = a(() => l.multiple ? Array.isArray(e.value) && e.value.length > 0 : e.value !== null && e.value !== void 0 && e.value !== ""), E = a(() => l.floatingLabel), C = a(() => l.floatingLabel && v.value), O = (t) => {
+      o("update:model-value", t);
+    }, w = (t) => {
+      p.value = t;
+    }, L = async (t) => {
+      const u = {
+        label: t,
+        name: t,
+        added: !0
+        // maybe change this to class - I am going to use this for external emails
+      };
+      if (!l.validationMethod(u)) {
+        await f(), d.value.search = t;
+        return;
+      }
+      i.value.push(u), e.value.push(u);
+    }, M = () => {
+      e.value = [], o("update:model-value", e.value);
+    }, R = (t) => {
+      typeof t == "number" && t >= 0 ? e.value.splice(t, 1) : e.value = [], f(() => {
+        o("update:model-value", e.value);
+      });
+    }, V = (t) => {
+      l.multiple && e.value && t.length === e.value.length && f(() => {
+        e.value = [], o("update:model-value", e.value);
+      });
+    }, x = async () => {
+      if (s.value || (s.value = !0, i.value = l.options), c.value && l.searchable) {
+        await f();
+        const t = c.value.querySelector(
+          ".multiselect__content-wrapper"
+        ), u = c.value.querySelector(
+          ".multiselect__input"
+        );
+        u.style.width = t.clientWidth + "px";
+      }
+    }, P = () => {
+      s.value = !1;
+    }, F = async () => {
+      if (!d.value)
+        return;
+      const t = d.value;
+      e.value = [], l.groupValues ? t.filteredOptions.forEach((u) => {
+        e.value.push(u);
+      }) : e.value = t.filteredOptions, o("update:model-value", e.value);
+    };
+    return g(() => l.modelValue, (t) => {
+      e.value = t;
+    }), g(() => l.options, (t) => {
+      s.value && (i.value = t);
+    }), {
+      currentSelect: d,
+      currentContainer: c,
+      search: p,
+      selected: e,
+      isOpened: s,
+      internalOptions: i,
+      // computed
+      hasAction: m,
+      noResultsText: S,
+      noOptionsText: B,
+      noTagFound: b,
+      selectedCount: y,
+      selectedText: _,
+      useTags: T,
+      enableGroupSelect: A,
+      hasValue: v,
+      showFloatingLabel: E,
+      isLabelFloated: C,
+      addTag: L,
+      clearAll: M,
+      onOpen: x,
+      onClose: P,
+      onRemove: V,
+      onUpdateValue: O,
+      removeElement: R,
+      searchChange: w,
+      selectAll: F
     };
   }
 });
 export {
-  r as default
+  U as default
 };

package/dist/index15.js

@@ -1,7 +1,7 @@
-import y from "./index87.js";
+import y from "./index88.js";
 import { resolveComponent as d, openBlock as t, createElementBlock as f, createElementVNode as l, renderSlot as s, createVNode as a, createCommentVNode as i, toDisplayString as u, normalizeProps as m, guardReactiveProps as h, createBlock as c, withCtx as o, createTextVNode as k, normalizeClass as v, Transition as w } from "vue";
 /* empty css        */
-import q from "./index64.js";
+import q from "./index65.js";
 const B = ["id"], F = { class: "search grow" }, z = {
   class: "search-label flex items-center",
   for: "search"