@quoreadmin/ui 1.7.20 → 1.8.1

package/dist/index146.js

@@ -1,31 +1,350 @@
-import { defineComponent as e } from "vue";
-const r = e({
-  name: "QTag",
-  components: {},
+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 "./index193.js";
+import re from "./index194.js";
+import ae from "./index195.js";
+import ne from "./index196.js";
+import ce from "./index6.js";
+import ie from "./index50.js";
+import N from "./index28.js";
+import ue from "./index177.js";
+import de from "./index55.js";
+import fe from "./index56.js";
+import { filterData as ve } from "./index54.js";
+import { useDebounceFn as he } from "./index176.js";
+const ke = te({
+  name: "QTable",
+  components: {
+    Column: re,
+    ColumnGroup: ae,
+    DataTable: se,
+    Row: ne,
+    QBadge: ce,
+    QTooltip: ie
+  },
   props: {
-    tagClass: {
+    // Pass in an ID unique to the table.
+    id: {
       type: String,
       default: ""
     },
-    bgColor: {
-      type: String,
-      default: "bg-green-0"
+    // 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: () => []
     },
-    textColor: {
+    // 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: "text-green-20"
+      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
     },
-    shape: {
+    // 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: "square"
+      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
     }
   },
-  setup(n, { slots: t }) {
-    return {
-      hasIcon: !!t.icon
+  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 {
-  r as default
+  ke as default
 };

package/dist/index148.js

@@ -1,103 +1,31 @@
-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 e } from "vue";
+const r = e({
+  name: "QTag",
+  components: {},
   props: {
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
-    // Used for additional classes that might be needed on the control wrapper
-    controlClass: {
+    tagClass: {
       type: String,
       default: ""
     },
-    // Placeholder is persistent and moved to the top of the textfield.
-    persistentPlaceholder: {
-      type: Boolean,
-      default: !1
-    },
-    // Placeholder text
-    placeholder: {
+    bgColor: {
       type: String,
-      default: ""
-    },
-    /** Number of rows in the textarea default is 2 */
-    rows: {
-      type: Number,
-      default: 2
+      default: "bg-green-0"
     },
-    // error or success to change the textarea styles
-    status: {
+    textColor: {
       type: String,
-      default: ""
+      default: "text-green-20"
     },
-    // Used for additional classes that might be needed
-    textareaClass: {
+    shape: {
       type: String,
-      default: ""
-    },
-    isDisabled: {
-      type: Boolean,
-      default: !1
-    },
-    // Shows "*Required" indicator next to placeholder with different styling
-    required: {
-      type: Boolean,
-      default: !1
-    },
-    // Enables floating label behavior - label floats to top when focused or has value
-    floatingLabel: {
-      type: Boolean,
-      default: !1
+      default: "square"
     }
   },
-  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();
-    }), {
-      // Refs
-      focused: a,
-      // Computed
-      disabled: s,
-      rootClasses: b,
-      textarea: l,
-      textareaClasses: g,
-      hasActions: v,
-      hasFloatingLabel: u,
-      isLabelFloated: o,
-      // Methods
-      resizeTextarea: n,
-      updateValue: h
+  setup(n, { slots: t }) {
+    return {
+      hasIcon: !!t.icon
     };
   }
 });
 export {
-  d as UPDATE_TEXTAREA_EVENT,
-  C as default
+  r as default
 };

package/dist/index15.js

@@ -1,7 +1,7 @@
-import y from "./index85.js";
+import y from "./index86.js";
 import { resolveComponent as d, createElementBlock as f, openBlock as t, createElementVNode as l, renderSlot as s, createCommentVNode as i, createVNode as a, 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 "./index62.js";
+import q from "./index63.js";
 const B = ["id"], F = { class: "search grow" }, z = {
   class: "search-label flex items-center",
   for: "search"

package/dist/index150.js

@@ -1,93 +1,103 @@
-import { defineComponent as T, ref as v, computed as a, onBeforeUnmount as y, watchEffect as g } from "vue";
-const u = "update:modelValue", i = "undo-action", s = "timeout-done", E = T({
-  name: "QToast",
+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,
   props: {
-    /** is toast visible */
     modelValue: {
-      type: Boolean,
-      default: !1,
-      required: !0
-    },
-    icon: {
-      type: String,
+      type: [String, Number],
       default: ""
     },
-    message: {
+    // Used for additional classes that might be needed on the control wrapper
+    controlClass: {
       type: String,
       default: ""
     },
-    variant: {
+    // Placeholder is persistent and moved to the top of the textfield.
+    persistentPlaceholder: {
+      type: Boolean,
+      default: !1
+    },
+    // Placeholder text
+    placeholder: {
       type: String,
       default: ""
     },
-    duration: {
+    /** Number of rows in the textarea default is 2 */
+    rows: {
       type: Number,
-      default: null,
-      required: !1
+      default: 2
     },
-    position: {
-      type: [String, Array],
-      default: null,
-      required: !1
+    // error or success to change the textarea styles
+    status: {
+      type: String,
+      default: ""
+    },
+    // Used for additional classes that might be needed
+    textareaClass: {
+      type: String,
+      default: ""
     },
-    withTransition: {
+    isDisabled: {
       type: Boolean,
       default: !1
     },
-    // 'component-slide-right' or 'component-slide-top' for mobile
-    transitionClass: {
-      type: String,
-      default: "component-slide-right"
-    },
-    closeButton: {
+    // Shows "*Required" indicator next to placeholder with different styling
+    required: {
       type: Boolean,
       default: !1
     },
-    undoButton: {
+    // Enables floating label behavior - label floats to top when focused or has value
+    floatingLabel: {
       type: Boolean,
       default: !1
     }
   },
-  emits: [u, i, s],
-  setup(t, { emit: n }) {
-    const e = v(null), o = a({
-      get: () => t.modelValue,
-      set: (m) => {
-        n(u, m);
-      }
-    }), d = a(
-      () => t.variant ? "is-" + t.variant : ""
-    ), r = a(
-      () => t.position ? "toast-fixed " + t.position : ""
-    ), f = a(
-      () => t.withTransition && t.transitionClass
-    ), c = () => {
-      n(i);
-    }, l = () => {
-      e.value = setTimeout(() => {
-        o.value = !1, n(s);
-      }, t.duration);
+  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 y(() => {
-      e.value && (clearTimeout(e.value), e.value = null);
-    }), g(() => {
-      o.value && t.duration ? l() : e.value && (clearTimeout(e.value), e.value = null);
+    return x(() => {
+      n();
     }), {
+      // Refs
+      focused: a,
       // Computed
-      show: o,
-      // v-model boolean value
-      statusClass: d,
-      positionClass: r,
-      computedTransition: f,
+      disabled: s,
+      rootClasses: b,
+      textarea: l,
+      textareaClasses: g,
+      hasActions: v,
+      hasFloatingLabel: u,
+      isLabelFloated: o,
       // Methods
-      startTimeout: l,
-      undoAction: c
+      resizeTextarea: n,
+      updateValue: h
     };
   }
 });
 export {
-  s as TIMEOUT_DONE,
-  i as UNDO_ACTION_EVENT,
-  u as UPDATE_MODEL_VALUE,
-  E as default
+  d as UPDATE_TEXTAREA_EVENT,
+  C as default
 };