@quoreadmin/ui 1.8.11 → 1.9.0

package/dist/index164.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 { onClickOutside as b, useBreakpoints as W, breakpointsTailwind as _ } from "./index168.js";
+import { EditorContent as $, useEditor as D } from "./index201.js";
+import G from "./index202.js";
+import I from "./index203.js";
+import { Underline as J } from "./index204.js";
+import { TextStyle as N, Color as X } from "./index205.js";
+import { Link as Y } from "./index206.js";
+import { Placeholder as Z } from "./index207.js";
+import ee from "./index24.js";
+import te from "./index167.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
 };

package/dist/index167.js

@@ -1,92 +1,115 @@
 const e = {
-  css: `
-    *[data-pd-ripple="true"]{
-        overflow: hidden;
-        position: relative;
+  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"
+    },
+    screens: {
+      sm: "576px",
+      md: "768px",
+      lg: "992px",
+      xl: "1200px",
+      "sm-down": { max: "767.98px" }
     }
-    span[data-p-ink-active="true"]{
-        animation: ripple 0.4s linear;
-    }
-    @keyframes ripple {
-        100% {
-            opacity: 0;
-            transform: scale(2.5);
-        }
-    }
-
-    .progress-spinner-circle {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: 0;
-        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
-        stroke-linecap: round;
-    }
-
-    @keyframes p-progress-spinner-dash{
-        0% {
-            stroke-dasharray: 1, 200;
-            stroke-dashoffset: 0;
-        }
-
-        50% {
-            stroke-dasharray: 89, 200;
-            stroke-dashoffset: -35px;
-        }
-        100% {
-            stroke-dasharray: 89, 200;
-            stroke-dashoffset: -124px;
-        }
-    }
-    @keyframes p-progress-spinner-color {
-        100%, 0% {
-            stroke: #ff5757;
-        }
-        40% {
-            stroke: #696cff;
-        }
-        66% {
-            stroke: #1ea97c;
-        }
-        80%, 90% {
-            stroke: #cc8925;
-        }
-    }
-
-    .progressbar-value-animate::after {
-        will-change: left, right;
-        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-    }
-    .progressbar-value-animate::before {
-        will-change: left, right;
-        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-    }
-    @keyframes p-progressbar-indeterminate-anim {
-        0% {
-            left: -35%;
-            right: 100%;
-        }
-        60% {
-            left: 100%;
-            right: -90%;
-        }
-        100% {
-            left: 100%;
-            right: -90%;
-        }
-    }
-
-    .p-fadein {
-        animation: p-fadein 250ms linear;
-    }
-
-    @keyframes p-fadein {
-        0% {
-            opacity: 0;
-        }
-        100% {
-            opacity: 1;
-        }
-    }
-`
+  }
 };
 export {
   e as default