ablok-components 0.3.58 → 0.3.59

package/dist/components/molecules/radio-buttons/radio-buttons.vue.js

@@ -0,0 +1,79 @@
+import { defineComponent as r, computed as m, openBlock as s, createElementBlock as p, createVNode as f, withCtx as c, createElementVNode as b, toDisplayString as y } from "vue";
+import { uniqueId as n } from "../../../utilities/helpers.js";
+import V from "../../atoms/radio-group/radio-group.vue.js";
+/* empty css                                       */
+const g = { class: "radio-buttons" }, x = ["for"], v = /* @__PURE__ */ r({
+  __name: "radio-buttons",
+  props: {
+    modelValue: {
+      type: null,
+      default: ""
+    },
+    options: {
+      type: Array,
+      default: []
+    },
+    name: {
+      type: String,
+      default: () => n()
+    },
+    id: {
+      type: String,
+      default: () => n()
+    },
+    label: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    keyOption: {
+      // type: String as PropType<'any' | 'all'>,
+      type: null
+    },
+    itemClass: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "update:selection"],
+  setup(e, { emit: d }) {
+    const i = e, u = d, l = m({
+      get() {
+        return i.modelValue;
+      },
+      set(o) {
+        u("update:modelValue", o);
+      }
+    });
+    return (o, a) => (s(), p("div", g, [
+      f(V, {
+        modelValue: l.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (t) => l.value = t),
+        options: e.options,
+        name: e.name,
+        id: e.id,
+        disabled: e.disabled,
+        required: e.required,
+        class: "d-flex flex-column gap-3 justify-content-center"
+      }, {
+        "option-label": c((t) => [
+          b("label", {
+            for: `${e.id}-${t.index}`,
+            class: "d-block btn btn-outline-primary p-3 fw-bold",
+            role: "button"
+          }, y(t.option.text), 9, x)
+        ]),
+        _: 1
+      }, 8, ["modelValue", "options", "name", "id", "disabled", "required"])
+    ]));
+  }
+});
+export {
+  v as default
+};

package/dist/components/molecules/radio-buttons/radio-buttons.vue3.js

@@ -0,0 +1,5 @@
+import o from "./radio-buttons.vue.js";
+/* empty css                   */
+export {
+  o as default
+};

package/dist/components/molecules/rte-editor/rte-editor.vue.js

@@ -0,0 +1,455 @@
+import { defineComponent as H, ref as $, shallowRef as m, onMounted as w, onBeforeUnmount as S, watch as M, openBlock as u, createElementBlock as d, normalizeClass as b, createVNode as s, createElementVNode as l, createBlock as c, createCommentVNode as V, resolveDynamicComponent as E } from "vue";
+import n from "../../atoms/svg-icon/svg-icon.vue.js";
+/* empty css                                 */
+const U = { class: "rte-editor" }, R = {
+  key: 0,
+  class: "rte-editor__controls mb-2"
+}, I = ["disabled"], N = ["disabled"], O = { class: "btn-group" }, j = ["disabled"], z = ["disabled"], D = { class: "btn-group" }, K = { class: "dropdown" }, q = {
+  class: "btn dropdown-toggle btn-light",
+  "data-bs-toggle": "dropdown",
+  role: "button",
+  type: "button"
+}, F = { class: "dropdown-menu" }, G = { class: "dropdown" }, J = {
+  class: "btn dropdown-toggle btn-light",
+  "data-bs-toggle": "dropdown",
+  role: "button",
+  type: "button"
+}, Q = { class: "dropdown-menu" }, W = { class: "btn-group" }, X = ["disabled"], Y = ["disabled"], nt = /* @__PURE__ */ H({
+  __name: "rte-editor",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    iconBasePath: {
+      type: String,
+      default: "/rte-icons-defs.svg"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: f }) {
+    const g = a, p = f, h = $(!1), t = m(void 0), v = m(null);
+    w(async () => {
+      const [
+        { Editor: r, mergeAttributes: e },
+        { EditorContent: i },
+        { default: B },
+        { default: P },
+        { default: C },
+        { default: L },
+        { default: x }
+      ] = await Promise.all([
+        import("@tiptap/core"),
+        import("@tiptap/vue-3"),
+        import("@tiptap/extension-highlight"),
+        import("@tiptap/extension-text-align"),
+        import("@tiptap/extension-link"),
+        import("@tiptap/starter-kit"),
+        import("@tiptap/extension-bold")
+      ]);
+      v.value = i, t.value = new r({
+        content: g.modelValue,
+        onUpdate: () => {
+          p("update:modelValue", t.value?.getHTML());
+        },
+        extensions: [
+          L.configure({
+            bold: !1,
+            link: !1
+          }),
+          x.extend({
+            addAttributes() {
+              return {
+                class: {
+                  default: null
+                }
+              };
+            },
+            parseHTML() {
+              return [
+                { tag: "strong" },
+                { tag: "b" }
+              ];
+            },
+            renderHTML({ HTMLAttributes: o }) {
+              return ["strong", e(this.options.HTMLAttributes, o), 0];
+            }
+          }),
+          P.configure({
+            types: ["heading", "paragraph"]
+          }),
+          B,
+          C.extend({
+            addAttributes() {
+              return {
+                ...this.parent?.(),
+                // Allow any attribute on anchor tags
+                class: {
+                  default: null
+                },
+                id: {
+                  default: null
+                },
+                title: {
+                  default: null
+                }
+              };
+            },
+            parseHTML() {
+              return [
+                // Parse anchor tags with href (default behavior)
+                {
+                  tag: "a[href]",
+                  getAttrs: (o) => ({
+                    href: o.getAttribute("href"),
+                    target: o.getAttribute("target"),
+                    rel: o.getAttribute("rel"),
+                    class: o.getAttribute("class"),
+                    id: o.getAttribute("id"),
+                    title: o.getAttribute("title")
+                  })
+                },
+                // Also parse plain anchor tags without href
+                {
+                  tag: "a:not([href])",
+                  getAttrs: (o) => ({
+                    href: null,
+                    target: o.getAttribute("target"),
+                    rel: o.getAttribute("rel"),
+                    class: o.getAttribute("class"),
+                    id: o.getAttribute("id"),
+                    title: o.getAttribute("title")
+                  })
+                }
+              ];
+            },
+            renderHTML({ HTMLAttributes: o }) {
+              if (!o.href) {
+                const { href: Z, target: _, rel: tt, ...T } = o;
+                return ["a", e(T), 0];
+              }
+              return ["a", e(this.options.HTMLAttributes, o), 0];
+            }
+          }).configure({
+            openOnClick: !1,
+            autolink: !0,
+            defaultProtocol: "https",
+            protocols: ["http", "https"],
+            HTMLAttributes: {
+              target: "_blank",
+              rel: "noopener noreferrer"
+            }
+          })
+        ]
+      });
+    }), S(() => {
+      t.value?.destroy();
+    }), M(() => g.modelValue, (r, e) => {
+      if (t.value) {
+        if (t.value.getHTML() === r)
+          return;
+        t.value.commands.setContent(r);
+      }
+    });
+    function k() {
+      const r = t.value?.getAttributes("link").href, e = window.prompt("URL", r);
+      if (e !== null) {
+        if (e === "") {
+          t.value?.chain().focus().extendMarkRange("link").unsetLink().run();
+          return;
+        }
+        try {
+          t.value?.chain().focus().extendMarkRange("link").setLink({ href: e }).run();
+        } catch (i) {
+          alert(i.message);
+        }
+      }
+    }
+    const y = () => {
+      t.value?.commands.setContent(`<textarea>${t.value.getHTML()}</textarea>`), h.value = !0;
+    }, A = () => {
+      t.value?.commands.setContent(t.value.getText()), h.value = !1;
+    };
+    return (r, e) => (u(), d("div", U, [
+      t.value ? (u(), d("div", R, [
+        h.value ? (u(), d("button", {
+          key: 1,
+          class: "btn btn-sm btn-light is-active",
+          onClick: A,
+          disabled: !t.value.can().chain().focus().toggleCode().run(),
+          title: "Toggle Source"
+        }, [
+          s(n, {
+            symbol: "source",
+            "base-path": a.iconBasePath
+          }, null, 8, ["base-path"])
+        ], 8, N)) : (u(), d("button", {
+          key: 0,
+          class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("code") }]),
+          onClick: y,
+          disabled: !t.value.can().chain().focus().toggleCode().run(),
+          title: "Toggle Source"
+        }, [
+          s(n, {
+            symbol: "source",
+            "base-path": a.iconBasePath
+          }, null, 8, ["base-path"])
+        ], 10, I)),
+        l("div", O, [
+          l("button", {
+            class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("bold") }]),
+            onClick: e[0] || (e[0] = (i) => t.value?.chain().focus().toggleBold().run()),
+            disabled: !t.value.can().chain().focus().toggleBold().run(),
+            title: "Toggle Bold"
+          }, [
+            s(n, {
+              symbol: "bold",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 10, j),
+          l("button", {
+            class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("italic") }]),
+            onClick: e[1] || (e[1] = (i) => t.value?.chain().focus().toggleItalic().run()),
+            disabled: !t.value.can().chain().focus().toggleItalic().run(),
+            title: "Toggle Italic"
+          }, [
+            s(n, {
+              symbol: "italic",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 10, z)
+        ]),
+        l("div", D, [
+          l("div", K, [
+            l("button", q, [
+              t.value.isActive("heading", { level: 1 }) ? (u(), c(n, {
+                key: 0,
+                symbol: "h1",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])) : t.value.isActive("heading", { level: 2 }) ? (u(), c(n, {
+                key: 1,
+                symbol: "h2",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])) : t.value.isActive("heading", { level: 3 }) ? (u(), c(n, {
+                key: 2,
+                symbol: "h3",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])) : t.value.isActive("heading", { level: 4 }) ? (u(), c(n, {
+                key: 3,
+                symbol: "h4",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])) : (u(), c(n, {
+                key: 4,
+                symbol: "headline",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"]))
+            ]),
+            l("ul", F, [
+              l("li", null, [
+                l("button", {
+                  class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("heading", { level: 1 }) }]),
+                  onClick: e[2] || (e[2] = (i) => t.value?.chain().focus().setHeading({ level: 1 }).run()),
+                  title: "Set Heading 1"
+                }, [
+                  s(n, {
+                    symbol: "h1",
+                    "base-path": a.iconBasePath
+                  }, null, 8, ["base-path"])
+                ], 2)
+              ]),
+              l("li", null, [
+                l("button", {
+                  class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("heading", { level: 2 }) }]),
+                  onClick: e[3] || (e[3] = (i) => t.value?.chain().focus().setHeading({ level: 2 }).run()),
+                  title: "Set Heading 2"
+                }, [
+                  s(n, {
+                    symbol: "h2",
+                    "base-path": a.iconBasePath
+                  }, null, 8, ["base-path"])
+                ], 2)
+              ]),
+              l("li", null, [
+                l("button", {
+                  class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("heading", { level: 3 }) }]),
+                  onClick: e[4] || (e[4] = (i) => t.value?.chain().focus().setHeading({ level: 3 }).run()),
+                  title: "Set Heading 3"
+                }, [
+                  s(n, {
+                    symbol: "h3",
+                    "base-path": a.iconBasePath
+                  }, null, 8, ["base-path"])
+                ], 2)
+              ]),
+              l("li", null, [
+                l("button", {
+                  class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("heading", { level: 4 }) }]),
+                  onClick: e[5] || (e[5] = (i) => t.value?.chain().focus().setHeading({ level: 4 }).run()),
+                  title: "Set Heading 4"
+                }, [
+                  s(n, {
+                    symbol: "h4",
+                    "base-path": a.iconBasePath
+                  }, null, 8, ["base-path"])
+                ], 2)
+              ])
+            ])
+          ]),
+          l("button", {
+            class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("paragraph") }]),
+            onClick: e[6] || (e[6] = (i) => t.value?.chain().focus().setParagraph().run()),
+            title: "Set Paragraph"
+          }, [
+            s(n, {
+              symbol: "paragraph",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 2),
+          l("button", {
+            class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("bulletList") }]),
+            onClick: e[7] || (e[7] = (i) => t.value?.chain().focus().toggleBulletList().run()),
+            title: "Toggle Bullet List"
+          }, [
+            s(n, {
+              symbol: "list",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 2),
+          l("button", {
+            class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("orderedList") }]),
+            onClick: e[8] || (e[8] = (i) => t.value?.chain().focus().toggleOrderedList().run()),
+            title: "Toggle Ordered List"
+          }, [
+            s(n, {
+              symbol: "ordered-list",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 2)
+        ]),
+        l("div", G, [
+          l("button", J, [
+            t.value.isActive({ textAlign: "center" }) ? (u(), c(n, {
+              key: 0,
+              symbol: "align-center",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])) : t.value.isActive({ textAlign: "left" }) ? (u(), c(n, {
+              key: 1,
+              symbol: "align-left",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])) : t.value.isActive({ textAlign: "right" }) ? (u(), c(n, {
+              key: 2,
+              symbol: "align-right",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])) : (u(), c(n, {
+              key: 3,
+              symbol: "align-justify",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"]))
+          ]),
+          l("ul", Q, [
+            l("li", null, [
+              l("button", {
+                class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive({ textAlign: "left" }) }]),
+                onClick: e[9] || (e[9] = (i) => t.value?.chain().focus().setTextAlign("left").run())
+              }, [
+                s(n, {
+                  symbol: "align-left",
+                  "base-path": a.iconBasePath
+                }, null, 8, ["base-path"])
+              ], 2)
+            ]),
+            l("li", null, [
+              l("button", {
+                class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive({ textAlign: "center" }) }]),
+                onClick: e[10] || (e[10] = (i) => t.value?.chain().focus().setTextAlign("center").run())
+              }, [
+                s(n, {
+                  symbol: "align-center",
+                  "base-path": a.iconBasePath
+                }, null, 8, ["base-path"])
+              ], 2)
+            ]),
+            l("li", null, [
+              l("button", {
+                class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive({ textAlign: "right" }) }]),
+                onClick: e[11] || (e[11] = (i) => t.value?.chain().focus().setTextAlign("right").run())
+              }, [
+                s(n, {
+                  symbol: "align-right",
+                  "base-path": a.iconBasePath
+                }, null, 8, ["base-path"])
+              ], 2)
+            ]),
+            l("li", null, [
+              l("button", {
+                class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive({ textAlign: "pretty" }) }]),
+                onClick: e[12] || (e[12] = (i) => t.value?.chain().focus().setTextAlign("right").run())
+              }, [
+                s(n, {
+                  symbol: "align-justify",
+                  "base-path": a.iconBasePath
+                }, null, 8, ["base-path"])
+              ], 2)
+            ])
+          ])
+        ]),
+        t.value.isActive("link") ? (u(), d("button", {
+          key: 3,
+          class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("link") }]),
+          onClick: e[13] || (e[13] = (i) => t.value.chain().focus().unsetLink().run()),
+          title: "Unset Link"
+        }, [
+          s(n, {
+            symbol: "unlink",
+            "base-path": a.iconBasePath
+          }, null, 8, ["base-path"])
+        ], 2)) : (u(), d("button", {
+          key: 2,
+          class: b(["btn btn-sm btn-light", { "is-active": t.value.isActive("link") }]),
+          onClick: k,
+          title: "Set Link"
+        }, [
+          s(n, {
+            symbol: "link",
+            "base-path": a.iconBasePath
+          }, null, 8, ["base-path"])
+        ], 2)),
+        l("div", W, [
+          l("button", {
+            class: "btn btn-sm btn-light",
+            onClick: e[14] || (e[14] = (i) => t.value?.chain().focus().undo().run()),
+            disabled: !t.value.can().chain().focus().undo().run(),
+            title: "Undo"
+          }, [
+            s(n, {
+              symbol: "undo",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 8, X),
+          l("button", {
+            class: "btn btn-sm btn-light",
+            onClick: e[15] || (e[15] = (i) => t.value?.chain().focus().redo().run()),
+            disabled: !t.value.can().chain().focus().redo().run(),
+            title: "Redo"
+          }, [
+            s(n, {
+              symbol: "redo",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 8, Y)
+        ])
+      ])) : V("", !0),
+      (u(), c(E(v.value), {
+        class: "rte-editor__content",
+        editor: t.value
+      }, null, 8, ["editor"]))
+    ]));
+  }
+});
+export {
+  nt as default
+};

package/dist/components/molecules/rte-editor/rte-editor.vue3.js

@@ -0,0 +1,5 @@
+import o from "./rte-editor.vue.js";
+/* empty css                */
+export {
+  o as default
+};

package/dist/components/molecules/select-media/select-media.vue.js

@@ -0,0 +1,87 @@
+import { defineComponent as u, computed as r, openBlock as n, createElementBlock as c, createVNode as f, withCtx as y, createElementVNode as x, normalizeClass as b, createBlock as V, createCommentVNode as p } from "vue";
+import { uniqueId as o } from "../../../utilities/helpers.js";
+import g from "../../atoms/radio-group/radio-group.vue.js";
+/* empty css                                       */
+import q from "../../atoms/base-image/base-image.vue.js";
+/* empty css                                     */
+const v = { class: "select-media" }, B = ["for"], $ = /* @__PURE__ */ u({
+  __name: "select-media",
+  props: {
+    modelValue: {
+      type: null,
+      default: ""
+    },
+    assets: {
+      type: Array,
+      default: []
+    },
+    name: {
+      type: String,
+      default: () => o()
+    },
+    id: {
+      type: String,
+      default: () => o()
+    },
+    label: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    emitKey: {
+      type: String,
+      default: "src"
+    }
+  },
+  emits: ["update:modelValue", "update:selection"],
+  setup(e, { emit: m }) {
+    const a = e, d = m, i = r({
+      get() {
+        return a.modelValue;
+      },
+      set(s) {
+        const l = a.assets.find((t) => t.id === s);
+        d("update:modelValue", a.emitKey ? l[a.emitKey] : l), a.emitKey && a.emitKey !== "id" && d("update:selection", l.id);
+      }
+    });
+    return (s, l) => (n(), c("div", v, [
+      f(g, {
+        modelValue: i.value,
+        "onUpdate:modelValue": l[0] || (l[0] = (t) => i.value = t),
+        options: e.assets.map((t) => t.id),
+        name: e.name,
+        id: e.id,
+        disabled: e.disabled,
+        required: e.required,
+        class: "d-flex flex-wrap flex-row justify-content-center",
+        itemClass: "col-6 p-2"
+      }, {
+        "option-label": y((t) => [
+          x("label", {
+            for: `${e.id}-${t.index}`,
+            class: b(["w-100", {
+              "is-active": e.assets[t.index].id === i.value
+            }]),
+            role: "button"
+          }, [
+            e.assets[t.index].thumbnail ? (n(), V(q, {
+              key: 0,
+              src: e.assets[t.index].thumbnail,
+              alt: e.assets[t.index].id
+            }, null, 8, ["src", "alt"])) : p("", !0)
+          ], 10, B)
+        ]),
+        _: 1
+      }, 8, ["modelValue", "options", "name", "id", "disabled", "required"])
+    ]));
+  }
+});
+export {
+  $ as default
+};

package/dist/components/molecules/select-media/select-media.vue3.js

@@ -0,0 +1,5 @@
+import o from "./select-media.vue.js";
+/* empty css                  */
+export {
+  o as default
+};