@robuust-digital/vue-components 2.0.0 → 2.2.0-rc.0

package/dist/_shared/RichTextEditor.vue_vue_type_script_setup_true_lang-Bs4WdJhA.js

@@ -0,0 +1,274 @@
+import { createElementBlock as n, openBlock as o, createElementVNode as s, defineComponent as L, ref as h, useAttrs as $, computed as x, watch as B, Fragment as C, createVNode as v, renderSlot as A, withCtx as _, normalizeClass as M, createCommentVNode as y, unref as f, renderList as E, createBlock as S, resolveDynamicComponent as U } from "vue";
+import { useEditor as N, EditorContent as O } from "@tiptap/vue-3";
+import T from "@tiptap/starter-kit";
+import { _ as z } from "./Tooltip.vue_vue_type_script_setup_true_lang-CoydN9sS.js";
+import { _ as D } from "./FormInput.vue_vue_type_script_setup_true_lang-BhJpG-Fw.js";
+import { _ as I } from "./Modal.vue_vue_type_script_setup_true_lang-DBEOIZnO.js";
+function q(r, d) {
+  return o(), n("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    s("path", {
+      "fill-rule": "evenodd",
+      d: "M3 3a1 1 0 0 1 1-1h5a3.5 3.5 0 0 1 2.843 5.541A3.75 3.75 0 0 1 9.25 14H4a1 1 0 0 1-1-1V3Zm2.5 3.5v-2H9a1 1 0 0 1 0 2H5.5Zm0 2.5v2.5h3.75a1.25 1.25 0 1 0 0-2.5H5.5Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function F(r, d) {
+  return o(), n("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    s("path", {
+      "fill-rule": "evenodd",
+      d: "M6.25 2.75A.75.75 0 0 1 7 2h6a.75.75 0 0 1 0 1.5h-2.483l-3.429 9H9A.75.75 0 0 1 9 14H3a.75.75 0 0 1 0-1.5h2.483l3.429-9H7a.75.75 0 0 1-.75-.75Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function K(r, d) {
+  return o(), n("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    s("path", {
+      "fill-rule": "evenodd",
+      d: "M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z",
+      "clip-rule": "evenodd"
+    }),
+    s("path", {
+      "fill-rule": "evenodd",
+      d: "M7.086 9.975a.75.75 0 0 1-1.06 0 3.5 3.5 0 0 1 0-4.95l2-2a3.5 3.5 0 0 1 5.396 4.402.75.75 0 0 1-1.251-.827 2 2 0 0 0-3.085-2.514l-2 2a2 2 0 0 0 0 2.828.75.75 0 0 1 0 1.06Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function P(r, d) {
+  return o(), n("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    s("path", { d: "M3 4.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6.25 3a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 7.25a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 11.5a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM4 12.25a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" })
+  ]);
+}
+function R(r, d) {
+  return o(), n("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    s("path", { d: "M2.995 1a.625.625 0 1 0 0 1.25h.38v2.125a.625.625 0 1 0 1.25 0v-2.75A.625.625 0 0 0 4 1H2.995ZM3.208 7.385a2.37 2.37 0 0 1 1.027-.124L2.573 8.923a.625.625 0 0 0 .439 1.067l1.987.011a.625.625 0 0 0 .006-1.25l-.49-.003.777-.776c.215-.215.335-.506.335-.809 0-.465-.297-.957-.842-1.078a3.636 3.636 0 0 0-1.993.121.625.625 0 1 0 .416 1.179ZM2.625 11a.625.625 0 1 0 0 1.25H4.25a.125.125 0 0 1 0 .25H3.5a.625.625 0 1 0 0 1.25h.75a.125.125 0 0 1 0 .25H2.625a.625.625 0 1 0 0 1.25H4.25a1.375 1.375 0 0 0 1.153-2.125A1.375 1.375 0 0 0 4.25 11H2.625ZM7.25 2a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5h-6ZM7.25 7.25a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5h-6ZM6.5 13.25a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5h-6a.75.75 0 0 1-.75-.75Z" })
+  ]);
+}
+const j = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "onClick"], te = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "RichTextEditor",
+  props: {
+    id: {},
+    modelValue: { default: "" },
+    rootClass: { default: void 0 },
+    config: { default: "default" },
+    customExtensions: { default: () => [] },
+    customCommands: { default: () => [] },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "tiptap:onCreate"],
+  setup(r, { emit: d }) {
+    const i = r, b = d, w = h(!1), u = h(!1), c = h(""), m = $(), k = m.class ? `${m.class} ` : "", V = T.configure({
+      link: {
+        openOnClick: !1
+      }
+    }), t = N({
+      extensions: [V, ...i.customExtensions],
+      content: i.modelValue,
+      editorProps: {
+        attributes: {
+          ...m,
+          id: i.id,
+          class: `${k}rvc-textarea rvc-rich-text-textarea`
+        }
+      },
+      onCreate: ({ editor: a }) => {
+        b("tiptap:onCreate", a);
+      },
+      onUpdate: ({ editor: a }) => {
+        const e = a.isEmpty ? "" : a.getHTML();
+        b("update:modelValue", e);
+      },
+      onSelectionUpdate({ editor: a }) {
+        w.value = !a.view.state.selection.empty;
+      }
+    }), Z = x(() => {
+      var a;
+      return [
+        {
+          name: "bold",
+          icon: q,
+          title: "Bold",
+          isVisible: !0,
+          isActive: () => {
+            var e;
+            return ((e = t.value) == null ? void 0 : e.isActive("bold")) ?? !1;
+          },
+          action: () => {
+            var e;
+            return (e = t.value) == null ? void 0 : e.commands.toggleBold();
+          }
+        },
+        {
+          name: "italic",
+          icon: F,
+          title: "Italic",
+          isVisible: !0,
+          isActive: () => {
+            var e;
+            return ((e = t.value) == null ? void 0 : e.isActive("italic")) ?? !1;
+          },
+          action: () => {
+            var e;
+            return (e = t.value) == null ? void 0 : e.commands.toggleItalic();
+          }
+        },
+        {
+          name: "bulletList",
+          icon: P,
+          title: "Bullet List",
+          isVisible: i.config === "default",
+          isActive: () => {
+            var e;
+            return ((e = t.value) == null ? void 0 : e.isActive("bulletList")) ?? !1;
+          },
+          action: () => {
+            var e;
+            return (e = t.value) == null ? void 0 : e.commands.toggleBulletList();
+          }
+        },
+        {
+          name: "orderedList",
+          icon: R,
+          title: "Ordered List",
+          isVisible: i.config === "default",
+          isActive: () => {
+            var e;
+            return ((e = t.value) == null ? void 0 : e.isActive("orderedList")) ?? !1;
+          },
+          action: () => {
+            var e;
+            return (e = t.value) == null ? void 0 : e.commands.toggleOrderedList();
+          }
+        },
+        {
+          name: "link",
+          icon: K,
+          title: "Hyperlink",
+          isVisible: i.config === "default",
+          disabled: !w.value && !(((a = t.value) == null ? void 0 : a.isActive("link")) ?? !1),
+          isActive: () => {
+            var e;
+            return ((e = t.value) == null ? void 0 : e.isActive("link")) ?? !1;
+          },
+          action: () => {
+            var e;
+            c.value = ((e = t.value) == null ? void 0 : e.getAttributes("link").href) || "", u.value = !0;
+          }
+        }
+      ];
+    }), g = x(() => {
+      const a = Z.value.filter((l) => i.config === "default" || ["bold", "italic"].includes(l.name)), e = i.customCommands.map((l) => {
+        let p = !1;
+        return typeof l.disabled == "function" ? p = t.value ? l.disabled(t.value) : !1 : p = l.disabled ?? !1, {
+          ...l,
+          isVisible: l.isVisible ?? !0,
+          disabled: p,
+          isActive: () => l.isActive && t.value ? l.isActive(t.value) : !1,
+          action: () => t.value && l.action(t.value)
+        };
+      });
+      return [...a, ...e];
+    });
+    B(() => i.modelValue, (a) => {
+      if (!t.value) return;
+      t.value.getHTML() === a || t.value.commands.setContent(a, { emitUpdate: !1 });
+    });
+    const H = () => {
+      t.value && (t.value.commands.setLink({ href: c.value }), u.value = !1, c.value = "");
+    };
+    return (a, e) => (o(), n(C, null, [
+      v(I, {
+        id: `${i.id}-modal-add-hyperlink`,
+        title: "Add Hyperlink",
+        as: "form",
+        show: u.value,
+        "onModal:close": e[1] || (e[1] = (l) => u.value = !1),
+        "onModal:save": H
+      }, {
+        default: _(() => [
+          v(D, {
+            modelValue: c.value,
+            "onUpdate:modelValue": e[0] || (e[0] = (l) => c.value = l),
+            placeholder: "https://www.example.com",
+            type: "url",
+            required: ""
+          }, null, 8, ["modelValue"])
+        ]),
+        _: 1
+      }, 8, ["id", "show"]),
+      A(a.$slots, "default"),
+      s("div", {
+        class: M(["rvc-rich-text", a.rootClass, { "rvc-rich-text-disabled": a.disabled }])
+      }, [
+        f(t) ? A(a.$slots, "toolbar", {
+          key: 0,
+          commands: g.value,
+          tiptap: f(t)
+        }, () => [
+          s("ul", j, [
+            (o(!0), n(C, null, E(g.value.filter((l) => l.isVisible), (l) => (o(), n("li", {
+              key: `toolbar-item-command-${l.name}`
+            }, [
+              v(z, {
+                content: l.title,
+                placement: "bottom",
+                size: "sm",
+                class: "rvc-rich-text-tooltip"
+              }, {
+                default: _(() => [
+                  s("button", {
+                    disabled: l.disabled,
+                    type: "button",
+                    "aria-label": l.title,
+                    class: M([{ "rvc-rich-text-button-active": l.isActive() }, "rvc-rich-text-button"]),
+                    onClick: l.action
+                  }, [
+                    (o(), S(U(l.icon)))
+                  ], 10, G)
+                ]),
+                _: 2
+              }, 1032, ["content"])
+            ]))), 128))
+          ])
+        ]) : y("", !0),
+        v(f(O), { editor: f(t) }, null, 8, ["editor"])
+      ], 2)
+    ], 64));
+  }
+});
+export {
+  te as _
+};