@quoreadmin/ui 1.9.3 → 1.10.1

package/dist/index151.js

@@ -1,103 +1,350 @@
-import { defineComponent as y, ref as r, computed as t, onMounted as x } from "vue";
-const d = "update:model-value", C = y({
-  name: "QTextarea",
-  inheritAttrs: !1,
+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 "./index201.js";
+import re from "./index202.js";
+import ae from "./index203.js";
+import ne from "./index204.js";
+import ce from "./index6.js";
+import ie from "./index52.js";
+import N from "./index28.js";
+import ue from "./index185.js";
+import de from "./index57.js";
+import fe from "./index58.js";
+import { filterData as ve } from "./index56.js";
+import { useDebounceFn as he } from "./index184.js";
+const ke = te({
+  name: "QTable",
+  components: {
+    Column: re,
+    ColumnGroup: ae,
+    DataTable: se,
+    Row: ne,
+    QBadge: ce,
+    QTooltip: ie
+  },
   props: {
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
-    // Used for additional classes that might be needed on the control wrapper
-    controlClass: {
+    // Pass in an ID unique to the table.
+    id: {
       type: String,
       default: ""
     },
-    // Placeholder is persistent and moved to the top of the textfield.
-    persistentPlaceholder: {
+    // 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: !1
+      default: !0
     },
-    // Placeholder text
-    placeholder: {
+    // Pass in a default sort.
+    // TODO: This is not set up with PrimeVue DataTable yet. No default sort.
+    sortBy: {
       type: String,
       default: ""
     },
-    /** Number of rows in the textarea default is 2 */
-    rows: {
+    // 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: 2
+      default: 20
     },
-    // error or success to change the textarea styles
-    status: {
-      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
     },
-    // Used for additional classes that might be needed
-    textareaClass: {
+    // Pass in a search field placeholder. Fallback is localized "Search" in template.
+    searchPlaceholder: {
       type: String,
       default: ""
     },
-    isDisabled: {
+    // 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
     },
-    // Shows "*Required" indicator next to placeholder with different styling
-    required: {
+    // Pass in if table is multi-sort. We won't use this initially.
+    isMultiSort: {
       type: Boolean,
       default: !1
     },
-    // Enables floating label behavior - label floats to top when focused or has value
-    floatingLabel: {
+    // 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: [d],
-  setup(e, { attrs: i, emit: f, slots: c }) {
-    const a = r(!1), l = r(), v = t(() => !!c.actions), s = t(() => !!i.disabled || !!e.isDisabled), u = t(() => e.floatingLabel || e.persistentPlaceholder), o = t(() => u.value && (a.value || !!e.modelValue)), b = t(() => [
-      {
-        [`has-${e.status}`]: e.status && !s.value
-      },
-      { "is-focused": a.value },
-      { "is-disabled": s.value },
-      { "has-floating-label": e.floatingLabel },
-      { "label-floated": o.value }
-    ]), g = t(() => [
-      "textarea",
-      e.textareaClass,
-      { [e.status]: e.status && !s.value },
-      {
-        populated: !!e.modelValue && u.value
-      },
-      { "is-focused": a.value && u.value }
-    ]), n = () => {
-      l.value.style.height = "auto", l.value.style.height = l.value.scrollHeight + "px";
-    }, h = (m) => {
-      f(
-        d,
-        m.target.value
-      );
-    };
-    return x(() => {
-      n();
+  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
-      focused: a,
+      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
-      disabled: s,
-      rootClasses: b,
-      textarea: l,
-      textareaClasses: g,
-      hasActions: v,
-      hasFloatingLabel: u,
-      isLabelFloated: o,
+      isDesktop: q,
+      isEmpty: I,
+      skeletonData: V,
+      filteredData: U,
       // Methods
-      resizeTextarea: n,
-      updateValue: h
+      // determineFixed,
+      addScrollButtons: $,
+      onPageResizeOrLoad: p,
+      onSelectRow: j,
+      onUnselectRow: G,
+      removeScrollButtons: K,
+      setSticky: Y,
+      // Composable
+      mq: de,
+      deviceType: T,
+      debouncedSearch: X
     };
   }
 });
 export {
-  d as UPDATE_TEXTAREA_EVENT,
-  C as default
+  ke as default
 };