@quoreadmin/ui 1.7.20 → 1.8.1

package/dist/index144.js

@@ -1,350 +1,294 @@
-import { defineComponent as te, ref as n, computed as w, onMounted as le, onUnmounted as oe, h as D, render as H } from "vue";
-import se from "./index191.js";
-import re from "./index192.js";
-import ae from "./index193.js";
-import ne from "./index194.js";
-import ce from "./index6.js";
-import ie from "./index49.js";
-import N from "./index28.js";
-import ue from "./index175.js";
-import de from "./index54.js";
-import fe from "./index55.js";
-import { filterData as ve } from "./index53.js";
-import { useDebounceFn as he } from "./index174.js";
-const ke = te({
-  name: "QTable",
+import { defineComponent as H, ref as n, computed as a, watch as g, nextTick as f } from "vue";
+import { Multiselect as I } from "./index189.js";
+import { useI18n as k } from "vue-i18n";
+/* empty css         */
+import q from "./index6.js";
+const U = H({
+  name: "QSelect",
   components: {
-    Column: re,
-    ColumnGroup: ae,
-    DataTable: se,
-    Row: ne,
-    QBadge: ce,
-    QTooltip: ie
+    QBadge: q,
+    VueMultiselect: I
   },
   props: {
-    // Pass in an ID unique to the table.
     id: {
       type: String,
       default: ""
     },
-    // Pass in data for the table using v-model - this replaces tableData.
+    // Options in the select
+    options: {
+      type: [Array, Object],
+      required: !0
+    },
+    // v-model
     modelValue: {
-      type: Array,
-      default: () => []
+      type: [String, Number, Array, Object, null, void 0],
+      default: void 0
     },
-    // Pass in the columns for the table.
-    columns: {
-      type: Array,
-      default: () => []
+    // trackby is for selected value
+    // Used to compare objects. Only use if options are objects.
+    trackBy: {
+      type: String,
+      default: "id"
     },
-    // Pass in whether to show the search field.
-    hasSearch: {
+    // 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: ""
+    },
+    // 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
     },
-    // Pass in a default sort.
-    // TODO: This is not set up with PrimeVue DataTable yet. No default sort.
-    sortBy: {
+    // 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
+    },
+    // Grouping - like optgroups
+    // https://vue-multiselect.js.org/#sub-option-groups
+    groupValues: {
       type: String,
       default: ""
     },
-    // Pass in the items per page to display.
-    // TODO: This is for pagination and/or infinite scroll, to be implemented later.
-    itemsPerPage: {
-      type: Number,
-      default: 20
+    groupLabel: {
+      type: String,
+      default: ""
     },
-    // Pass in the currently displayed page.
-    // TODO: This is for pagination and/or infinite scroll, to be implemented later.
-    currentPage: {
-      type: Number,
-      default: 1
+    // Props for vue-multiselect - deselectGroupLabel, selectGroupLabel, selectLabel
+    groupSelectable: {
+      type: Boolean,
+      default: !0
     },
-    // Pass in a search field placeholder. Fallback is localized "Search" in template.
-    searchPlaceholder: {
+    // 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: ""
     },
-    // Pass in the filters for the table.
-    filters: {
-      type: Object,
-      default: () => ({})
+    // NEW - Allows to remove all selected values. Otherwise one must be left selected.
+    allowEmpty: {
+      type: Boolean,
+      default: !0
     },
-    // Pass in a function for when filters icon is clicked.
-    filtersAction: {
-      type: Function,
-      default: () => {
-      }
+    // Array of keyboard key aliases to block when selecting ex ['Tab', 'Enter', 'Delete']
+    blockKeys: {
+      type: Array,
+      default: () => ["Delete"]
     },
-    // Pass in a count of active filters.
-    filtersCount: {
-      type: Number,
-      default: 0
+    // We could make this a slot like optionPrefix
+    noResultMessage: {
+      type: String,
+      default: ""
     },
-    // Pass in an array of attribute names to globally search.
-    globalFilters: {
-      type: Array,
-      default: () => []
+    // Message to show when options array is empty
+    noOptionsMessage: {
+      type: String,
+      default: ""
     },
-    // Pass in a loading state.
-    loading: {
+    // Selection control for mobile
+    selectionControl: {
       type: Boolean,
       default: !1
     },
-    // Pass in if table is multi-sort. We won't use this initially.
-    isMultiSort: {
+    showExpanded: {
       type: Boolean,
       default: !1
     },
-    // Pass in if table is multi-select.
-    isMultiSelect: {
+    showPlaceholderImage: {
+      type: Boolean,
+      default: !0
+    },
+    // Use this with multiple = true
+    showSelectAll: {
       type: Boolean,
       default: !1
     },
-    // Pass in a function to handle when a row is selected.
-    rowSelect: {
-      type: Function,
-      default: () => {
-      }
+    // Helpful text for user to know how to add a new option
+    tagPlaceholder: {
+      type: String,
+      default: ""
     },
-    // Pass in a function to handle when a row is unselected.
-    rowUnselect: {
-      type: Function,
-      default: () => {
-      }
+    // Expands the field to see all selected options
+    expand: {
+      type: Boolean,
+      default: !1
     },
-    // Pass in the height of combined fixed elements while vertical scrolling.
-    fixedTopOffset: {
-      type: Number,
-      default: 0
+    // Shows the selected count
+    showSelectedCount: {
+      type: Boolean,
+      default: !1
     },
-    // Pass in the number of skeleton rows that should show while loading.
-    skeletonRows: {
-      type: Number,
-      default: 6
+    // 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
     },
-    // Pass in the scroll amount for the left scroll button.
-    leftScrollAmount: {
+    // Limit of options shown to the user - refer to receipents and week frequency example
+    limitShown: {
       type: Number,
-      default: 200
+      default: null
     },
-    // Pass in the scroll amount for the right scroll button.
-    rightScrollAmount: {
-      type: Number,
-      default: 200
+    // 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
     },
-    // If set to true we do not use the built in frozen prop for primevue table
-    // instead we set our own sticky columns. Initially only supporting first and last
-    overrideFrozen: {
+    // Show descriptions as part of the options (on right).
+    showOptionDescription: {
       type: Boolean,
       default: !1
     },
-    // Pass in the debounce time for the search field.
-    searchDelay: {
-      type: Number,
-      default: 300
+    // 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
     }
   },
-  emits: ["is-empty"],
-  setup(s, { emit: P }) {
-    const { deviceType: T } = fe(), k = n(), c = n(!1), d = n(!1), h = n(!1), L = n(!1), m = n(!1), y = n(!0), F = n(ue), t = n(), A = n(""), O = n([]), a = n(), Q = n(0), U = w(() => ve(
-      s.modelValue,
-      A.value,
-      s.filters,
-      void 0,
-      // sortBy handled by PrimeVue
-      void 0,
-      // orderBy handled by PrimeVue
-      []
-    )), q = w(() => T.value === "desktop"), I = w(() => {
-      const e = !s.loading && k.value?.empty;
-      return P("is-empty", e), e;
-    }), V = w(() => {
-      const e = [], l = {};
-      let o = 0;
-      return s.columns.forEach((r) => {
-        l[r.key] = "";
-      }), [...Array(s.skeletonRows)].forEach(() => {
-        e.push({
-          ...l,
-          shimmer: o % 2 ? "bg-gray-10" : "bg-gray-30"
-        }), o++;
-      }), e;
-    }), p = () => {
-      x(), R(), B(), b(), v();
-    }, j = (e) => {
-      s.rowSelect(e);
-    }, G = (e) => {
-      s.rowUnselect(e);
-    }, B = () => {
-      const e = a.value.offsetTop - s.fixedTopOffset, l = document.querySelector('div[data-pc-section="header"]'), o = t.value?.querySelector("thead");
-      if (d.value = !!s.fixedTopOffset && a.value && window.scrollY >= e, d.value)
-        if (l.style.top = s.fixedTopOffset + "px", c.value)
-          o.style.top = "";
-        else {
-          const r = s.fixedTopOffset + l.clientHeight + 1;
-          o.style.top = r + "px";
-        }
-      else
-        l.style.top = "", o.style.top = "";
-      if (d.value && c.value) {
-        const r = document.querySelector(
-          'div[data-pc-section="header"] > div[data-pc-section="wrapper"]'
-        );
-        r?.querySelectorAll("th")?.forEach((u, i) => {
-          const f = t.value?.querySelector(
-            `th:nth-child(${i + 1})`
-          ), S = f?.getAttribute("aria-sort");
-          u?.setAttribute("aria-sort", S), u.classList.contains("actions") && (u.style.minWidth = f?.clientWidth + "px");
-        }), r && (r.scrollLeft = t.value.scrollLeft);
+  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;
       }
-      R(), b(), v();
-    }, b = () => {
-      const l = t.value.scrollWidth - t.value.clientWidth;
-      y.value = Math.abs(t.value.scrollLeft) <= 1, m.value = Math.abs(t.value.scrollLeft - l) <= 1;
-    }, Y = () => {
-      x(), h.value = !1, L.value = !1, s.columns.forEach((e, l) => {
-        e.frozen && (h.value || (h.value = !0), a.value.querySelectorAll(`th:nth-child(${l + 1}), td:nth-child(${l + 1})`).forEach(
-          (o) => {
-            o.classList.add("sticky"), l === 0 ? o.classList.add("left-0") : l === s.columns.length - 1 && e.frozen && (o.classList.add("right-0"), L.value = !0);
-          }
-        ));
+      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);
       });
-    }, J = () => {
-      const e = t.value?.cloneNode(!0);
-      if (e) {
-        const l = document.querySelector('div[data-pc-section="header"]');
-        l?.append(e);
-        const o = l?.querySelector('div[data-pc-section="wrapper"]');
-        o?.querySelector("tbody")?.remove(), o?.addEventListener("scroll", () => {
-          t.value.scrollLeft = o.scrollLeft, b(), v();
-        }), t.value?.addEventListener("scroll", () => {
-          o.scrollLeft = t.value.scrollLeft, b(), t.value?.setAttribute("data-scroll", t.value.scrollLeft.toString()), v();
-        }), o?.querySelectorAll("th")?.forEach((r, u) => {
-          r?.addEventListener("click", async () => {
-            if (d.value && c.value) {
-              const i = t.value?.querySelector(`th:nth-child(${u + 1})`);
-              await i?.click();
-              const f = i?.getAttribute("aria-sort");
-              r?.setAttribute("aria-sort", f);
-            }
-          });
-        });
-      }
-    }, x = () => {
-      t.value.scrollWidth > t.value.clientWidth ? (c.value = !0, t.value?.classList.add("is-scrolled")) : (c.value = !1, t.value?.classList.remove("is-scrolled")), t.value && t.value.setAttribute("data-scroll", t.value.scrollLeft.toString());
-    }, R = () => {
-      const e = t.value.clientWidth + "px", l = document.querySelector('div[data-pc-section="header"]'), o = l.querySelector('div[data-pc-section="wrapper"] thead');
-      l.style.width = e, t.value.querySelector("thead").style.width = e, o && (o.style.width = e);
-    }, C = () => {
-      if (t.value) {
-        const e = -Math.min(
-          s.leftScrollAmount,
-          t.value.scrollLeft
-        ), l = d.value ? "instant" : "smooth";
-        t.value.scrollBy({
-          left: e,
-          behavior: l
-        });
-      }
-    }, W = () => {
-      if (t.value) {
-        const e = t.value.scrollWidth - t.value.clientWidth, l = Math.min(
-          s.rightScrollAmount,
-          e - t.value.scrollLeft
-        ), o = d.value ? "instant" : "smooth";
-        t.value.scrollBy({
-          left: l,
-          behavior: o
-        });
-      }
-    }, $ = () => {
-      if (c.value || !q.value) {
-        const e = y.value ? "hidden" : "", l = m.value ? "hidden" : "";
-        a.value?.insertAdjacentHTML(
-          "beforeend",
-          `<button type="button" class="q-table-scroll-button scroll-button scroll-left ${e}"></button>
-                    <button type="button" class="q-table-scroll-button scroll-button scroll-right ${l}"></button>`
-        );
-        const o = D(N, {
-          icon: "chevron-left",
-          type: "",
-          size: "md",
-          class: "p-[0.1875rem]"
-        }), r = D(N, {
-          icon: "chevron-right",
-          type: "",
-          size: "md",
-          class: "p-[0.1875rem]"
-        }), u = a.value?.querySelector(".scroll-button.scroll-left"), i = a.value?.querySelector(".scroll-button.scroll-right");
-        H(o, u), H(r, i), u?.addEventListener("click", C), i?.addEventListener("click", W), v();
-      }
-    }, K = () => {
-      a.value?.querySelectorAll(".scroll-button")?.forEach((e) => {
-        e.remove();
+    }, V = (t) => {
+      l.multiple && e.value && t.length === e.value.length && f(() => {
+        e.value = [], o("update:model-value", e.value);
       });
-    }, v = () => {
-      const e = a.value?.querySelector(".scroll-button.scroll-left"), l = a.value?.querySelector(".scroll-button.scroll-right"), o = t.value?.querySelector("td.sticky:first-child"), r = a.value?.getBoundingClientRect(), i = document.querySelector('div[data-pc-section="header"]')?.getBoundingClientRect().height || 0, f = t.value;
-      if (a.value && r && f) {
-        const S = o?.getBoundingClientRect().width || 0;
-        a.value.style.setProperty("--first-sticky-width", `${S}px`);
-        const M = f.getBoundingClientRect(), g = Math.max(M.top, i), E = Math.min(M.bottom, window.innerHeight), Z = g < window.innerHeight && E > i, _ = E - g, ee = g + _ / 2;
-        if (e && l)
-          if (Z && c.value) {
-            e.classList.remove("hidden"), l.classList.remove("hidden");
-            const z = Math.max(
-              g,
-              Math.min(ee, E - e.offsetHeight)
-            );
-            e.style.top = `${z}px`, l.style.top = `${z}px`, e.style.left = `${r.left + S + 8}px`, l.style.right = `${window.innerWidth - r.right + 8}px`;
-          } else
-            e.classList.add("hidden"), l.classList.add("hidden");
-        e && (y.value || !c.value ? e.classList.add("hidden") : e.classList.remove("hidden")), l && (m.value || !c.value ? l.classList.add("hidden") : l.classList.remove("hidden"));
+    }, 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";
       }
-    }, X = he((e) => {
-      A.value = e;
-    }, s.searchDelay);
-    return le(() => {
-      t.value = document.querySelector('div[data-pc-section="wrapper"]'), p(), window.addEventListener("resize", p), window.addEventListener("scroll", B), J(), q.value || $();
-    }), oe(() => {
-      window.removeEventListener("resize", p), window.removeEventListener("scroll", B);
+    }, 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);
     }), {
-      // Refs
-      dataTableRef: k,
-      horizontalScroll: c,
-      isFixed: d,
-      isSticky: h,
-      isLastCellSticky: L,
-      isScrolledToEnd: m,
-      isScrolledToStart: y,
-      noResultsPath: F,
-      scrollableElement: t,
-      scrollLeft: C,
-      scrollRight: W,
-      search: A,
-      selectedRows: O,
-      tableContainer: a,
-      tableHeight: Q,
-      // Computed
-      isDesktop: q,
-      isEmpty: I,
-      skeletonData: V,
-      filteredData: U,
-      // Methods
-      // determineFixed,
-      addScrollButtons: $,
-      onPageResizeOrLoad: p,
-      onSelectRow: j,
-      onUnselectRow: G,
-      removeScrollButtons: K,
-      setSticky: Y,
-      // Composable
-      mq: de,
-      deviceType: T,
-      debouncedSearch: X
+      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 {
-  ke as default
+  U as default
 };