@quoreadmin/ui 1.4.1 → 1.4.3

package/dist/index135.js

@@ -0,0 +1,277 @@
+import { defineComponent as L, ref as n, computed as a, watch as g, nextTick as i } from "vue";
+import { Multiselect as x } from "./index182.js";
+import { useI18n as P } from "vue-i18n";
+/* empty css         */
+import H from "./index6.js";
+const q = L({
+  name: "QSelect",
+  components: {
+    QBadge: H,
+    VueMultiselect: x
+  },
+  props: {
+    id: {
+      type: String,
+      default: ""
+    },
+    // Options in the select
+    options: {
+      type: [Array, Object],
+      required: !0
+    },
+    // v-model
+    modelValue: {
+      type: [String, Number, Array, Object],
+      default: ""
+    },
+    // 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: ""
+    },
+    // 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
+    },
+    // Grouping - like optgroups
+    // https://vue-multiselect.js.org/#sub-option-groups
+    groupValues: {
+      type: String,
+      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"]
+    },
+    // We could make this a slot like optionPrefix
+    noResultMessage: {
+      type: String,
+      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"
+    },
+    // 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
+    }
+  },
+  emits: ["update:model-value"],
+  setup(l, { slots: v, emit: o }) {
+    const { t: s } = P(), r = n(null), f = n(null), t = n(l.modelValue), p = n(""), c = n(!1), d = n([]), y = a(() => Array.isArray(l.options) ? l.options.length : 0), h = a(() => !!v.action), m = a(() => l.noResultMessage || s("HC_PRESS_ENTER_TO_CREATE_A_TAG")), S = a(() => l.tagPlaceholder || s("HC_PRESS_ENTER_TO_CREATE_A_TAG")), b = a(() => l.noOptionsMessage || s("HC_LIST_IS_EMPTY")), B = a(() => y.value === t.value.length ? s("HC_ALL") : t.value.length > 1 ? s("HC_MULTIPLE_SELECTED") : t.value[0].label || t.value[0].name || ""), _ = a(() => l.taggable || l.showTags), T = a(() => !!(l.groupValues && l.groupLabel && l.groupSelectable)), E = (e) => {
+      o("update:model-value", e);
+    }, A = (e) => {
+      p.value = e;
+    }, O = async (e) => {
+      const u = {
+        label: e,
+        name: e,
+        added: !0
+        // maybe change this to class - I am going to use this for external emails
+      };
+      if (!l.validationMethod(u)) {
+        await i(), r.value.search = e;
+        return;
+      }
+      d.value.push(u), t.value.push(u);
+    }, C = () => {
+      t.value = [], o("update:model-value", t.value);
+    }, w = (e) => {
+      typeof e == "number" && e >= 0 ? t.value.splice(e, 1) : t.value = [], i(() => {
+        o("update:model-value", t.value);
+      });
+    }, M = (e) => {
+      l.multiple && t.value && e.length === t.value.length && i(() => {
+        t.value = [], o("update:model-value", t.value);
+      });
+    }, R = async () => {
+      if (c.value || (c.value = !0, d.value = l.options), f.value && l.searchable) {
+        await i();
+        const e = f.value.querySelector(
+          ".multiselect__content-wrapper"
+        ), u = f.value.querySelector(
+          ".multiselect__input"
+        );
+        u.style.width = e.clientWidth + "px";
+      }
+    }, V = async () => {
+      if (!r.value)
+        return;
+      const e = r.value;
+      t.value = [], l.groupValues ? e.filteredOptions.forEach((u) => {
+        t.value.push(u);
+      }) : t.value = e.filteredOptions, o("update:model-value", t.value);
+    };
+    return g(() => l.modelValue, (e) => {
+      t.value = e;
+    }), g(() => l.options, (e) => {
+      c.value && (d.value = e);
+    }), {
+      currentSelect: r,
+      search: p,
+      selected: t,
+      isOpened: c,
+      internalOptions: d,
+      // computed
+      hasAction: h,
+      noResultsText: m,
+      noOptionsText: b,
+      noTagFound: S,
+      selectedCount: y,
+      selectedText: B,
+      useTags: _,
+      enableGroupSelect: T,
+      addTag: O,
+      clearAll: C,
+      onOpen: R,
+      onRemove: M,
+      onUpdateValue: E,
+      removeElement: w,
+      searchChange: A,
+      selectAll: V
+    };
+  }
+});
+export {
+  q as default
+};

package/dist/index137.js

@@ -0,0 +1,350 @@
+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 "./index184.js";
+import re from "./index185.js";
+import ae from "./index186.js";
+import ne from "./index187.js";
+import ce from "./index6.js";
+import ie from "./index47.js";
+import N from "./index26.js";
+import ue from "./index167.js";
+import de from "./index52.js";
+import fe from "./index53.js";
+import { filterData as ve } from "./index51.js";
+import { useDebounceFn as he } from "./index166.js";
+const ke = te({
+  name: "QTable",
+  components: {
+    Column: re,
+    ColumnGroup: ae,
+    DataTable: se,
+    Row: ne,
+    QBadge: ce,
+    QTooltip: ie
+  },
+  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.
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    // Pass in the columns for the table.
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // Pass in whether to show the search field.
+    hasSearch: {
+      type: Boolean,
+      default: !0
+    },
+    // Pass in a default sort.
+    // TODO: This is not set up with PrimeVue DataTable yet. No default sort.
+    sortBy: {
+      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
+    },
+    // Pass in the currently displayed page.
+    // TODO: This is for pagination and/or infinite scroll, to be implemented later.
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    // Pass in a search field placeholder. Fallback is localized "Search" in template.
+    searchPlaceholder: {
+      type: String,
+      default: ""
+    },
+    // Pass in the filters for the table.
+    filters: {
+      type: Object,
+      default: () => ({})
+    },
+    // Pass in a function for when filters icon is clicked.
+    filtersAction: {
+      type: Function,
+      default: () => {
+      }
+    },
+    // Pass in a count of active filters.
+    filtersCount: {
+      type: Number,
+      default: 0
+    },
+    // Pass in an array of attribute names to globally search.
+    globalFilters: {
+      type: Array,
+      default: () => []
+    },
+    // Pass in a loading state.
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    // Pass in if table is multi-sort. We won't use this initially.
+    isMultiSort: {
+      type: Boolean,
+      default: !1
+    },
+    // Pass in if table is multi-select.
+    isMultiSelect: {
+      type: Boolean,
+      default: !1
+    },
+    // Pass in a function to handle when a row is selected.
+    rowSelect: {
+      type: Function,
+      default: () => {
+      }
+    },
+    // Pass in a function to handle when a row is unselected.
+    rowUnselect: {
+      type: Function,
+      default: () => {
+      }
+    },
+    // Pass in the height of combined fixed elements while vertical scrolling.
+    fixedTopOffset: {
+      type: Number,
+      default: 0
+    },
+    // Pass in the number of skeleton rows that should show while loading.
+    skeletonRows: {
+      type: Number,
+      default: 6
+    },
+    // Pass in the scroll amount for the left scroll button.
+    leftScrollAmount: {
+      type: Number,
+      default: 200
+    },
+    // Pass in the scroll amount for the right scroll button.
+    rightScrollAmount: {
+      type: Number,
+      default: 200
+    },
+    // 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: {
+      type: Boolean,
+      default: !1
+    },
+    // Pass in the debounce time for the search field.
+    searchDelay: {
+      type: Number,
+      default: 300
+    }
+  },
+  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);
+      }
+      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);
+          }
+        ));
+      });
+    }, 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 = () => {
+      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 = 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);
+    }), {
+      // 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
+    };
+  }
+});
+export {
+  ke as default
+};

package/dist/index139.js

@@ -0,0 +1,31 @@
+import { defineComponent as e } from "vue";
+const r = e({
+  name: "QTag",
+  components: {},
+  props: {
+    tagClass: {
+      type: String,
+      default: ""
+    },
+    bgColor: {
+      type: String,
+      default: "bg-green-0"
+    },
+    textColor: {
+      type: String,
+      default: "text-green-20"
+    },
+    shape: {
+      type: String,
+      default: "square"
+    }
+  },
+  setup(n, { slots: t }) {
+    return {
+      hasIcon: !!t.icon
+    };
+  }
+});
+export {
+  r as default
+};