@quoreadmin/ui 1.4.7 → 1.5.0

package/dist/index15.js

@@ -1,138 +1,190 @@
-import k from "./index83.js";
-import { createElementBlock as i, openBlock as s, normalizeClass as u, renderSlot as t, createCommentVNode as m, createElementVNode as d, normalizeStyle as y, Fragment as a, renderList as n, mergeProps as p, createTextVNode as $, toDisplayString as g } from "vue";
+import y from "./index84.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 b, normalizeClass as g, Transition as w } from "vue";
 /* empty css        */
-import P from "./index60.js";
-const v = ["id"], b = ["id"], S = ["id"], w = ["id"], V = ["id"], C = ["id"], F = ["id"], R = ["id", "onClick"], L = {
+import q from "./index61.js";
+const B = ["id"], F = { class: "search grow" }, V = {
+  class: "search-label flex items-center",
+  for: "search"
+}, z = { class: "results-count mx-1 shrink-0 text-xs text-gray-40 capitalize" }, P = {
   key: 1,
-  class: "list ordered-list"
-}, N = ["id", "onClick"], D = ["id"], H = {
-  key: 1,
-  class: "list-wrapper"
-}, c = ["id"], z = ["id"];
-function E(e, h, I, T, B, O) {
-  return s(), i("div", {
+  class: "filters shrink-0 h-6"
+}, H = { class: "flex relative" }, E = { class: "!text-blue-20 text-tiny font-bold" }, R = { key: 1 }, A = { class: "flex relative" }, T = { class: "!text-blue-20 text-tiny font-bold" }, U = { class: "flex relative" }, _ = { class: "!text-blue-20 text-tiny font-bold" }, L = {
+  key: 2,
+  class: "actions shrink-0 flex items-center h-6"
+};
+function N(e, r, D, I, Q, X) {
+  const p = d("q-icon"), k = d("q-input"), C = d("q-badge"), v = d("q-tooltip"), $ = d("q-popover"), S = d("q-bottom-sheet");
+  return t(), f("div", {
     id: e.id,
-    class: u([
-      "q-data-list",
-      {
-        "has-data-filter": !!e.$slots.dataFilter,
-        "has-no-results": !e.modelValue.length,
-        "is-device": !e.isDesktop,
-        "is-fixed": e.isFixed,
-        "is-loading": e.loading
-      }
-    ]),
-    ref: "dataListRef"
+    class: "data-filter flex items-center p-4 bg-white"
   }, [
-    e.hasSearch ? t(e.$slots, "search-and-filters", { key: 0 }, () => [
-      d("div", {
-        ref: "searchRef",
-        id: `${e.id ? e.id + "-" : ""}search-and-filters`,
-        class: u([
-          "data-filter-wrapper search-and-filters",
-          { "fixed right-0 left-0 top-0 pt-4 pl-4 pr-4 z-10 bg-white overflow-hidden": e.hiddenSearch },
-          { "is-shown border-b border-gray-20": e.hiddenSearch && e.isSearchVisible },
-          { "!hidden h-px": e.hiddenSearch && e.searchHeight <= 16 }
-        ]),
-        style: y([
-          e.hiddenSearch && e.searchHeight >= 0 ? `height: ${e.searchHeight}px;` : "",
-          `top: ${e.defaultSearchTop}px;`
+    l("div", F, [
+      e.hasSearch ? s(e.$slots, "search", { key: 0 }, () => [
+        l("label", V, [
+          a(p, {
+            class: "mr-2 shrink-0",
+            color: "gray-40",
+            icon: "search",
+            size: "md",
+            type: ""
+          }),
+          a(k, {
+            id: "search",
+            "model-value": e.search,
+            "hide-clear": e.mq.md,
+            placeholder: e.searchPlaceholder || e.$t("HC_SEARCH"),
+            class: "text-base grow",
+            "control-class": "!border-0 !px-0",
+            size: "xxs",
+            "onUpdate:modelValue": e.debouncedSearch
+          }, null, 8, ["model-value", "hide-clear", "placeholder", "onUpdate:modelValue"])
         ])
-      }, [
-        e.$slots.dataFilter ? (s(), i("div", {
+      ], !0) : i("", !0)
+    ]),
+    e.showResultsCount ? s(e.$slots, "resultsCount", { key: 0 }, () => [
+      l("div", z, u(e.filteredCount === 1 ? "1 " + e.$t("HC_RESULT") : e.$t("HC_X_RESULTS", { count: e.filteredCount })), 1)
+    ], !0) : i("", !0),
+    s(e.$slots, "beforeFilters", {}, void 0, !0),
+    e.filters?.length ? (t(), f("div", P, [
+      s(e.$slots, "filters", m(h({ filtersCount: e.filtersCount })), () => [
+        e.$slots.filterContent && e.mq.md ? (t(), c($, {
           key: 0,
-          id: `${e.id ? e.id + "-" : ""}data-filter-container`,
-          class: "data-filter-container mb-4"
-        }, [
-          t(e.$slots, "dataFilter", {}, void 0, !0)
-        ], 8, S)) : (s(), i("div", {
-          key: 1,
-          id: `${e.id ? e.id + "-" : ""}data-filter-loading`,
-          class: "data-filter-container loading-state"
-        }, [...h[0] || (h[0] = [
-          d("div", { class: "loading-search animate-shimmer bg-gray-10" }, null, -1),
-          d("div", { class: "loading-filters animate-shimmer bg-gray-30" }, null, -1)
-        ])], 8, w)),
-        t(e.$slots, "search-separator", {}, () => [
-          d("hr", {
-            class: u([
-              "search-separator",
-              { "!mb-0 hidden": e.hiddenSearch }
+          modelValue: e.showFilterPopover,
+          "onUpdate:modelValue": r[0] || (r[0] = (n) => e.showFilterPopover = n),
+          reposition: e.repositionPopover,
+          position: "bottom",
+          align: "right",
+          trigger: "click",
+          size: "lg"
+        }, {
+          trigger: o(({ onClick: n }) => [
+            a(v, { class: "z-[45] ml-2" }, {
+              trigger: o(() => [
+                l("div", H, [
+                  a(p, {
+                    class: "filters-icon ml-0 cursor-pointer",
+                    color: e.showFilterPopover ? "blue-20" : "gray-40",
+                    icon: "filter",
+                    size: "md",
+                    onClick: (j) => e.onFilterClick(n)
+                  }, null, 8, ["color", "onClick"]),
+                  e.filtersCount ? (t(), c(C, {
+                    key: 0,
+                    class: g([
+                      "filters-count absolute !h-4 !w-4",
+                      "-top-[0.3125rem] -right-[0.375rem]"
+                    ]),
+                    color: "white"
+                  }, {
+                    text: o(() => [
+                      l("span", E, u(e.filtersCount), 1)
+                    ]),
+                    _: 1
+                  })) : i("", !0)
+                ])
+              ]),
+              content: o(() => [
+                b(u(e.$t("HC_FILTERS")), 1)
+              ]),
+              _: 2
+            }, 1024)
+          ]),
+          content: o(() => [
+            s(e.$slots, "filterContent", m(h({ closePopover: e.closePopover })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["modelValue", "reposition"])) : e.$slots.filterSheetContent && !e.mq.md ? (t(), f("div", R, [
+          l("div", A, [
+            a(p, {
+              class: "filters-icon ml-0 cursor-pointer",
+              color: e.showFilterBottomSheet ? "blue-20" : "gray-40",
+              icon: "filter",
+              size: "md",
+              onClick: r[1] || (r[1] = (n) => e.showFilterBottomSheet = !0)
+            }, null, 8, ["color"]),
+            e.filtersCount ? (t(), c(C, {
+              key: 0,
+              class: g([
+                "filters-count absolute !h-4 !w-4",
+                "-top-[0.3125rem] -right-[0.375rem]"
+              ]),
+              color: "white"
+            }, {
+              text: o(() => [
+                l("span", T, u(e.filtersCount), 1)
+              ]),
+              _: 1
+            })) : i("", !0)
+          ]),
+          a(w, {
+            name: "slide-up-fade",
+            appear: ""
+          }, {
+            default: o(() => [
+              e.showFilterBottomSheet ? (t(), c(S, {
+                key: 0,
+                modelValue: e.showFilterBottomSheet,
+                "onUpdate:modelValue": r[2] || (r[2] = (n) => e.showFilterBottomSheet = n),
+                "background-color": "gray-00"
+              }, {
+                backAction: o(() => [
+                  s(e.$slots, "filterSheetBackAction", m(h({ closeBottomSheet: e.closeBottomSheet })), void 0, !0)
+                ]),
+                header: o(() => [
+                  s(e.$slots, "filterSheetHeader", {}, void 0, !0)
+                ]),
+                headerAction: o(() => [
+                  s(e.$slots, "filterSheetHeaderAction", m(h({ closeBottomSheet: e.closeBottomSheet })), void 0, !0)
+                ]),
+                default: o(() => [
+                  s(e.$slots, "filterSheetContent", m(h({ closeBottomSheet: e.closeBottomSheet })), void 0, !0)
+                ]),
+                _: 3
+              }, 8, ["modelValue"])) : i("", !0)
+            ]),
+            _: 3
+          })
+        ])) : (t(), c(v, {
+          key: 2,
+          class: "z-[45] ml-2"
+        }, {
+          trigger: o(() => [
+            l("div", U, [
+              a(p, {
+                class: "filters-icon ml-0 cursor-pointer",
+                color: e.filtersActive ? "blue-20" : "gray-40",
+                icon: "filter",
+                size: "md",
+                onClick: r[3] || (r[3] = (n) => e.$emit("click:filters"))
+              }, null, 8, ["color"]),
+              e.filtersCount ? (t(), c(C, {
+                key: 0,
+                class: g([
+                  "filters-count absolute !h-4 !w-4",
+                  "-top-[0.3125rem] -right-[0.375rem]"
+                ]),
+                color: "white"
+              }, {
+                text: o(() => [
+                  l("span", _, u(e.filtersCount), 1)
+                ]),
+                _: 1
+              })) : i("", !0)
             ])
-          }, null, 2)
-        ], !0)
-      ], 14, b)
-    ], !0) : m("", !0),
-    d("div", {
-      ref: "listRef",
-      id: `${e.id ? e.id + "-" : ""}outer-wrapper`,
-      class: "outer-list-wrapper select-none"
-    }, [
-      e.loading ? (s(), i("div", H, [
-        d("ul", {
-          id: `${e.id ? e.id + "-" : ""}loading-list`,
-          class: "list loading-list"
-        }, [
-          (s(!0), i(a, null, n(e.skeletonRows, (r) => (s(), i("li", {
-            key: r,
-            id: `${e.id ? e.id + "-" : ""}loading-list-li-${r}`,
-            class: "list-item"
-          }, [...h[1] || (h[1] = [
-            d("div", { class: "animate-shimmer bg-gray-30 loading-top mb-3" }, null, -1),
-            d("div", { class: "animate-shimmer bg-gray-10 loading-bottom" }, null, -1)
-          ])], 8, z))), 128))
-        ], 8, c)
-      ])) : (s(), i(a, { key: 0 }, [
-        e.modelValue.length ? (s(), i("div", {
-          key: 0,
-          id: `${e.id ? e.id + "-" : ""}wrapper`,
-          class: "list-wrapper"
-        }, [
-          e.type !== "ordered" ? (s(), i("ul", {
-            key: 0,
-            id: `${e.id ? e.id + "-" : ""}ul`,
-            class: u(["list", `${e.type}-list`])
-          }, [
-            (s(!0), i(a, null, n(e.totalPages, (r) => (s(), i(a, { key: r }, [
-              r <= e.page ? (s(!0), i(a, { key: 0 }, n(e.modelValue.slice((r - 1) * e.itemsPerPage, (r - 1) * e.itemsPerPage + e.itemsPerPage), (l, o) => (s(), i("li", {
-                id: `${e.id ? e.id + "-" : ""}li-${(r - 1) * e.itemsPerPage + o}`,
-                key: o,
-                class: "list-item",
-                onClick: (f) => e.$emit("click:list-item", l)
-              }, [
-                t(e.$slots, "listItem", p({ ref_for: !0 }, { data: l }), () => [
-                  $(g(l), 1)
-                ], !0)
-              ], 8, R))), 128)) : m("", !0)
-            ], 64))), 128))
-          ], 10, F)) : (s(), i("ol", L, [
-            (s(!0), i(a, null, n(e.totalPages, (r) => (s(), i(a, { key: r }, [
-              r <= e.page ? (s(!0), i(a, { key: 0 }, n(e.modelValue.slice((r - 1) * e.itemsPerPage, (r - 1) * e.itemsPerPage + e.itemsPerPage), (l, o) => (s(), i("li", {
-                id: `${e.id ? e.id + "-" : ""}li-${(r - 1) * e.itemsPerPage + o}`,
-                key: o,
-                class: "list-item",
-                onClick: (f) => e.$emit("click:list-item", l)
-              }, [
-                t(e.$slots, "listItem", p({ ref_for: !0 }, { data: l }), () => [
-                  $(g(l), 1)
-                ], !0)
-              ], 8, N))), 128)) : m("", !0)
-            ], 64))), 128))
-          ]))
-        ], 8, C)) : (s(), i("div", {
-          key: 1,
-          id: `${e.id ? e.id + "-" : ""}no-results`,
-          class: "no-results"
-        }, [
-          t(e.$slots, "no-results", {}, () => [
-            d("p", null, g(e.noResultMessage || e.$t("HC_NO_RESULTS_FOUND")), 1)
-          ], !0)
-        ], 8, D))
-      ], 64))
-    ], 8, V)
-  ], 10, v);
+          ]),
+          content: o(() => [
+            b(u(e.$t("HC_FILTERS")), 1)
+          ]),
+          _: 1
+        }))
+      ], !0)
+    ])) : i("", !0),
+    e.$slots.actions ? (t(), f("div", L, [
+      s(e.$slots, "actions", {}, void 0, !0)
+    ])) : i("", !0)
+  ], 8, B);
 }
-const j = /* @__PURE__ */ P(k, [["render", E], ["__scopeId", "data-v-aedd5d55"]]);
+const O = /* @__PURE__ */ q(y, [["render", N], ["__scopeId", "data-v-a0babcc4"]]);
 export {
-  j as default
+  O as default
 };

package/dist/{index147.js → index150.js}

@@ -1,5 +1,5 @@
 import { defineComponent as ot, ref as H, computed as C, reactive as at, onMounted as it, onUnmounted as lt } from "vue";
-import { createPopper as st } from "./index188.js";
+import { createPopper as st } from "./index191.js";
 import { useI18n as ut } from "vue-i18n";
 const ht = ot({
   name: "QTour",

package/dist/{index149.js → index152.js}

@@ -1,6 +1,6 @@
 import { defineComponent as a, computed as n } from "vue";
-import l from "./index52.js";
-import p from "./index32.js";
+import l from "./index53.js";
+import p from "./index33.js";
 const i = a({
   name: "QWarningModal",
   components: {

package/dist/index154.js

@@ -1,116 +1,210 @@
-const e = {
-  theme: {
-    colors: {
-      success: "#0f6a13",
-      "success-light": "#e9f7da",
-      "idle-pass": "#d6ecc1",
-      error: "#c20017",
-      "error-light": "#ffe4e8",
-      warning: "#ab9b00",
-      "warning-light": "#fef8de",
-      info: "#004494",
-      "info-light": "#dbf3ff",
-      "green-quore": "#5db407",
-      "blue-sky": "#2898e0",
-      "blue-quore": "#2f363c",
-      complaint: "#c20017",
-      recurring: "#006b00",
-      workorder: "#F67B00",
-      gray: {
-        0: "#f9f9fa",
-        "00": "#f4f4f4",
-        7: "#eff1f2",
-        10: "#ebeef0",
-        20: "#dde1e4",
-        30: "#cdd4d8",
-        40: "#bcc5cb"
-      },
-      inkwell: {
-        0: "#8d9aa5",
-        10: "#6c7b89",
-        20: "#515d67",
-        30: "#2f363c",
-        40: "#121517"
-      },
-      maroon: {
-        0: "#f7d7db",
-        10: "#d27989",
-        20: "#ad314e",
-        30: "#880028",
-        40: "#630023"
-      },
-      pink: {
-        0: "#ffdbe5",
-        10: "#ff89ae",
-        20: "#ff377a",
-        30: "#cd0059",
-        40: "#9c0053"
-      },
-      red: {
-        0: "#ffe4e8",
-        10: "#ffa9b2",
-        20: "#ff6e76",
-        30: "#ff3333",
-        40: "#c20017"
-      },
-      orange: {
-        0: "#FFF7DB",
-        10: "#FCD379",
-        20: "#F89F1B",
-        30: "#F67B00",
-        40: "#F56200"
-      },
-      yellow: {
-        0: "#fff8de",
-        10: "#f9e991",
-        20: "#eedc00",
-        30: "#ccbb00",
-        40: "#ab9b00"
-      },
-      green: {
-        0: "#e9f7da",
-        10: "#9cd662",
-        20: "#5db407",
-        30: "#249000",
-        40: "#006b00"
-      },
-      teal: {
-        0: "#dcf2f1",
-        10: "#64c7c0",
-        20: "#0f9b8f",
-        30: "#007667",
-        40: "#005244"
-      },
-      blue: {
-        0: "#dbf3ff",
-        "00": "#e9f4fb",
-        5: "#93cbef",
-        10: "#7cc7f0",
-        20: "#2898e0",
-        30: "#0a69ba",
-        40: "#004594"
-      },
-      purple: {
-        0: "#f2e3f2",
-        10: "#d29cd5",
-        20: "#b062b7",
-        30: "#8d3399",
-        40: "#430675"
-      },
-      transparent: "transparent",
-      current: "currentColor",
-      white: "#ffffff",
-      black: "#000000"
+import { defineComponent as q, ref as o, computed as c, watch as k, onBeforeUnmount as M, onMounted as z, onUnmounted as K, nextTick as Q } from "vue";
+import { useBreakpoints as W, onClickOutside as b, breakpointsTailwind as _ } from "./index158.js";
+import { EditorContent as $, useEditor as D } from "./index192.js";
+import G from "./index193.js";
+import I from "./index194.js";
+import { Underline as J } from "./index195.js";
+import { TextStyle as N, Color as X } from "./index196.js";
+import { Link as Y } from "./index197.js";
+import { Placeholder as Z } from "./index198.js";
+import ee from "./index23.js";
+import te from "./index157.js";
+const ve = q({
+  components: {
+    EditorContent: $,
+    EmojiPicker: G,
+    QFileUpload: ee
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
     },
-    screens: {
-      sm: "576px",
-      md: "768px",
-      lg: "992px",
-      xl: "1200px",
-      "sm-down": { max: "767.98px" }
+    attachments: {
+      type: Object,
+      default: () => []
+    },
+    allowEmojis: {
+      type: Boolean,
+      default: !1
+    },
+    // If the wysiwyg should allow users to upload files/images
+    allowAttachments: {
+      type: Boolean,
+      default: !1
+    },
+    allowFormatting: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** Specify file types allowed */
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+    filesAllowed: {
+      type: String,
+      default: "image/*,.pdf"
+    },
+    // If NOT isStacked we can expand it to be stacked when focused or files are attached
+    expands: {
+      type: Boolean,
+      default: !1
+    },
+    isStacked: {
+      type: Boolean,
+      default: !0
+    },
+    isStandalone: {
+      type: Boolean,
+      default: !1
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    processing: {
+      type: Boolean,
+      default: !1
     }
+    // If we have attachments, the wysiwyg should show the image preview as thumbnails (circle back)
+    // showThumbnails: {
+    //     type: Boolean,
+    //     default: true,
+    // },
+    // circle back to this
+    // mentions: {
+    //     // Refine type as we get further
+    //     type: Array as PropType<any>,
+    //     default: () => [],
+    // },
+  },
+  emits: ["update:model-value", "update:attachments", "keyboard-open"],
+  setup(a, { emit: i }) {
+    const d = o(), u = o(!1), C = o(""), f = o(), x = o(), s = o(!1), m = o(!1), n = o(!1), r = o([]), v = o(), E = o(), p = o(), l = o(!1), S = o(window.innerHeight), B = c(() => t.value.getAttributes("textStyle").color || "#121517"), h = c(() => a.attachments), V = c(() => a.isStacked || a.expands && (h.value.length > 0 || n.value || !t.value.isEmpty) || m.value), U = W(_).greaterOrEqual("md"), j = () => {
+      const e = window.prompt("URL");
+      t.value.chain().focus().extendMarkRange("link").setLink({ href: e || "" }).run();
+    }, L = (e) => {
+      t.value.chain().focus().setColor(e).run(), g();
+    }, F = () => {
+      s.value = !s.value;
+    }, g = () => {
+      s.value = !1;
+    }, O = () => {
+      v.value?.fileUpload?.choose();
+    }, P = (e) => {
+      t.value.chain().focus().insertContent(e).run(), f.value.$el.click();
+    }, w = async () => {
+      if (await Q(), n.value) {
+        const e = l.value, T = visualViewport?.height || window.innerHeight;
+        l.value = S.value - T > 0, e !== l.value && (n.value = l.value, i("keyboard-open", l.value));
+      }
+    }, R = () => {
+      n.value && a.expands && (l.value = !1, i("keyboard-open", l.value)), n.value = !1;
+    }, A = (e) => {
+      t.value.chain().focus().insertContent(e.i).run(), u.value = !1;
+    }, H = (e) => {
+      r.value = e, y();
+    }, y = () => {
+      let e = "";
+      t.value.isEmpty || (e = a.allowFormatting ? t.value.getHTML() : t.value.getText()), r.value !== a.attachments && i("update:attachments", r.value), i("update:model-value", e);
+    }, t = o(
+      D({
+        extensions: [
+          I.configure({
+            // Disable an included extension
+            // Command + z = undo
+            // TODO: Add an undo button if this is needed
+            // history: false,
+            // Configure an included extension
+            heading: {
+              levels: [1, 2]
+            }
+          }),
+          J,
+          N,
+          X,
+          Y.configure({
+            openOnClick: !1
+          }),
+          Z.configure({
+            placeholder: a.placeholder
+          })
+        ],
+        content: a.modelValue,
+        // Set this to the initial value coming in.
+        onUpdate: y,
+        editable: !a.disabled
+        // make the text editable or not - default is editable
+      })
+    );
+    return k(() => a.modelValue, (e) => {
+      t.value && !e && t.value.commands.clearContent();
+    }), k(() => a.disabled, (e) => {
+      t.value && (t.value.options.editable = !e, t.value.view.update(t.value.view.props));
+    }), M(() => {
+      t.value?.destroy();
+    }), z(() => {
+      visualViewport && a.expands && visualViewport.addEventListener("resize", w);
+    }), K(() => {
+      visualViewport && a.expands && visualViewport.removeEventListener("resize", w);
+    }), b(d, () => {
+      u.value = !1;
+    }), b(p, () => {
+      n.value && a.expands && (l.value = !1, i("keyboard-open", l.value)), n.value = !1;
+    }), {
+      colors: te.theme.colors,
+      colorExclusions: [
+        "success",
+        "success-light",
+        "error",
+        "error-light",
+        "warning",
+        "warning-light",
+        "info",
+        "info-light",
+        "transparent",
+        "current",
+        "green-quore",
+        "blue-sky",
+        "blue-quore",
+        "complaint",
+        "recurring",
+        "workorder"
+      ],
+      editor: t,
+      editorRef: E,
+      // refs
+      emojiPickerElement: d,
+      showEmojiPicker: u,
+      emojiSearch: C,
+      invoker: f,
+      isExpanded: V,
+      multiUploader: x,
+      showColorMenu: s,
+      focused: n,
+      files: h,
+      showFormatOptions: m,
+      uploadedfiles: r,
+      fileUploadRef: v,
+      wysiwygRef: p,
+      // computed
+      setColor: B,
+      // methods
+      mdAndLarger: U,
+      setLink: j,
+      selectColor: L,
+      showColors: F,
+      onClickAction: R,
+      onClickOutColors: g,
+      attachFiles: O,
+      appendEmoji: P,
+      onSelectEmoji: A,
+      onSelectFiles: H
+    };
   }
-};
+});
 export {
-  e as default
+  ve as default
 };