ablok-components 0.3.58 → 0.3.60

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.d.ts

@@ -32,5 +32,5 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
     modelValue: string;
     disabled: boolean;
     iconBasePath: string;
-}, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -0,0 +1,472 @@
+import { defineComponent as w, ref as f, shallowRef as p, onMounted as S, onBeforeUnmount as M, watch as V, openBlock as b, createBlock as c, Teleport as E, createElementVNode as l, normalizeClass as u, createElementBlock as h, createVNode as i, createCommentVNode as U, resolveDynamicComponent as R } from "vue";
+import n from "../../atoms/svg-icon/svg-icon.vue.js";
+/* empty css                                 */
+const F = {
+  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"
+}, G = { class: "dropdown-menu" }, J = { class: "dropdown" }, Q = {
+  class: "btn dropdown-toggle btn-light",
+  "data-bs-toggle": "dropdown",
+  role: "button",
+  type: "button"
+}, W = { class: "dropdown-menu" }, X = { class: "btn-group" }, Y = ["disabled"], Z = ["disabled"], _ = ["title"], it = /* @__PURE__ */ w({
+  __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: k }) {
+    const g = a, y = k, v = f(!1), d = f(!1), t = p(void 0), m = p(null);
+    S(async () => {
+      const [
+        { Editor: r, mergeAttributes: e },
+        { EditorContent: s },
+        { default: C },
+        { default: x },
+        { default: L },
+        { default: T },
+        { default: $ }
+      ] = 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")
+      ]);
+      m.value = s, t.value = new r({
+        content: g.modelValue,
+        onUpdate: () => {
+          y("update:modelValue", t.value?.getHTML());
+        },
+        extensions: [
+          T.configure({
+            bold: !1,
+            link: !1
+          }),
+          $.extend({
+            addAttributes() {
+              return {
+                class: {
+                  default: null
+                }
+              };
+            },
+            parseHTML() {
+              return [
+                { tag: "strong" },
+                { tag: "b" }
+              ];
+            },
+            renderHTML({ HTMLAttributes: o }) {
+              return ["strong", e(this.options.HTMLAttributes, o), 0];
+            }
+          }),
+          x.configure({
+            types: ["heading", "paragraph"]
+          }),
+          C,
+          L.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: tt, target: et, rel: lt, ...H } = o;
+                return ["a", e(H), 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"
+            }
+          })
+        ]
+      });
+    }), M(() => {
+      t.value?.destroy();
+    }), V(() => g.modelValue, (r, e) => {
+      if (t.value) {
+        if (t.value.getHTML() === r)
+          return;
+        t.value.commands.setContent(r);
+      }
+    });
+    function A() {
+      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 (s) {
+          alert(s.message);
+        }
+      }
+    }
+    const B = () => {
+      t.value?.commands.setContent(`<textarea>${t.value.getHTML()}</textarea>`), v.value = !0;
+    }, P = () => {
+      t.value?.commands.setContent(t.value.getText()), v.value = !1;
+    };
+    return (r, e) => (b(), c(E, {
+      to: "body",
+      disabled: !d.value
+    }, [
+      l("div", {
+        class: u(["rte-editor", { "rte-editor--fullscreen": d.value }])
+      }, [
+        t.value ? (b(), h("div", F, [
+          v.value ? (b(), h("button", {
+            key: 1,
+            class: "btn btn-sm btn-light is-active",
+            onClick: P,
+            disabled: !t.value.can().chain().focus().toggleCode().run(),
+            title: "Toggle Source"
+          }, [
+            i(n, {
+              symbol: "source",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 8, N)) : (b(), h("button", {
+            key: 0,
+            class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("code") }]),
+            onClick: B,
+            disabled: !t.value.can().chain().focus().toggleCode().run(),
+            title: "Toggle Source"
+          }, [
+            i(n, {
+              symbol: "source",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 10, I)),
+          l("div", O, [
+            l("button", {
+              class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("bold") }]),
+              onClick: e[0] || (e[0] = (s) => t.value?.chain().focus().toggleBold().run()),
+              disabled: !t.value.can().chain().focus().toggleBold().run(),
+              title: "Toggle Bold"
+            }, [
+              i(n, {
+                symbol: "bold",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])
+            ], 10, j),
+            l("button", {
+              class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("italic") }]),
+              onClick: e[1] || (e[1] = (s) => t.value?.chain().focus().toggleItalic().run()),
+              disabled: !t.value.can().chain().focus().toggleItalic().run(),
+              title: "Toggle Italic"
+            }, [
+              i(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 }) ? (b(), c(n, {
+                  key: 0,
+                  symbol: "h1",
+                  "base-path": a.iconBasePath
+                }, null, 8, ["base-path"])) : t.value.isActive("heading", { level: 2 }) ? (b(), c(n, {
+                  key: 1,
+                  symbol: "h2",
+                  "base-path": a.iconBasePath
+                }, null, 8, ["base-path"])) : t.value.isActive("heading", { level: 3 }) ? (b(), c(n, {
+                  key: 2,
+                  symbol: "h3",
+                  "base-path": a.iconBasePath
+                }, null, 8, ["base-path"])) : t.value.isActive("heading", { level: 4 }) ? (b(), c(n, {
+                  key: 3,
+                  symbol: "h4",
+                  "base-path": a.iconBasePath
+                }, null, 8, ["base-path"])) : (b(), c(n, {
+                  key: 4,
+                  symbol: "headline",
+                  "base-path": a.iconBasePath
+                }, null, 8, ["base-path"]))
+              ]),
+              l("ul", G, [
+                l("li", null, [
+                  l("button", {
+                    class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("heading", { level: 1 }) }]),
+                    onClick: e[2] || (e[2] = (s) => t.value?.chain().focus().setHeading({ level: 1 }).run()),
+                    title: "Set Heading 1"
+                  }, [
+                    i(n, {
+                      symbol: "h1",
+                      "base-path": a.iconBasePath
+                    }, null, 8, ["base-path"])
+                  ], 2)
+                ]),
+                l("li", null, [
+                  l("button", {
+                    class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("heading", { level: 2 }) }]),
+                    onClick: e[3] || (e[3] = (s) => t.value?.chain().focus().setHeading({ level: 2 }).run()),
+                    title: "Set Heading 2"
+                  }, [
+                    i(n, {
+                      symbol: "h2",
+                      "base-path": a.iconBasePath
+                    }, null, 8, ["base-path"])
+                  ], 2)
+                ]),
+                l("li", null, [
+                  l("button", {
+                    class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("heading", { level: 3 }) }]),
+                    onClick: e[4] || (e[4] = (s) => t.value?.chain().focus().setHeading({ level: 3 }).run()),
+                    title: "Set Heading 3"
+                  }, [
+                    i(n, {
+                      symbol: "h3",
+                      "base-path": a.iconBasePath
+                    }, null, 8, ["base-path"])
+                  ], 2)
+                ]),
+                l("li", null, [
+                  l("button", {
+                    class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("heading", { level: 4 }) }]),
+                    onClick: e[5] || (e[5] = (s) => t.value?.chain().focus().setHeading({ level: 4 }).run()),
+                    title: "Set Heading 4"
+                  }, [
+                    i(n, {
+                      symbol: "h4",
+                      "base-path": a.iconBasePath
+                    }, null, 8, ["base-path"])
+                  ], 2)
+                ])
+              ])
+            ]),
+            l("button", {
+              class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("paragraph") }]),
+              onClick: e[6] || (e[6] = (s) => t.value?.chain().focus().setParagraph().run()),
+              title: "Set Paragraph"
+            }, [
+              i(n, {
+                symbol: "paragraph",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])
+            ], 2),
+            l("button", {
+              class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("bulletList") }]),
+              onClick: e[7] || (e[7] = (s) => t.value?.chain().focus().toggleBulletList().run()),
+              title: "Toggle Bullet List"
+            }, [
+              i(n, {
+                symbol: "list",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])
+            ], 2),
+            l("button", {
+              class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("orderedList") }]),
+              onClick: e[8] || (e[8] = (s) => t.value?.chain().focus().toggleOrderedList().run()),
+              title: "Toggle Ordered List"
+            }, [
+              i(n, {
+                symbol: "ordered-list",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])
+            ], 2)
+          ]),
+          l("div", J, [
+            l("button", Q, [
+              t.value.isActive({ textAlign: "center" }) ? (b(), c(n, {
+                key: 0,
+                symbol: "align-center",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])) : t.value.isActive({ textAlign: "left" }) ? (b(), c(n, {
+                key: 1,
+                symbol: "align-left",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])) : t.value.isActive({ textAlign: "right" }) ? (b(), c(n, {
+                key: 2,
+                symbol: "align-right",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])) : (b(), c(n, {
+                key: 3,
+                symbol: "align-justify",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"]))
+            ]),
+            l("ul", W, [
+              l("li", null, [
+                l("button", {
+                  class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive({ textAlign: "left" }) }]),
+                  onClick: e[9] || (e[9] = (s) => t.value?.chain().focus().setTextAlign("left").run())
+                }, [
+                  i(n, {
+                    symbol: "align-left",
+                    "base-path": a.iconBasePath
+                  }, null, 8, ["base-path"])
+                ], 2)
+              ]),
+              l("li", null, [
+                l("button", {
+                  class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive({ textAlign: "center" }) }]),
+                  onClick: e[10] || (e[10] = (s) => t.value?.chain().focus().setTextAlign("center").run())
+                }, [
+                  i(n, {
+                    symbol: "align-center",
+                    "base-path": a.iconBasePath
+                  }, null, 8, ["base-path"])
+                ], 2)
+              ]),
+              l("li", null, [
+                l("button", {
+                  class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive({ textAlign: "right" }) }]),
+                  onClick: e[11] || (e[11] = (s) => t.value?.chain().focus().setTextAlign("right").run())
+                }, [
+                  i(n, {
+                    symbol: "align-right",
+                    "base-path": a.iconBasePath
+                  }, null, 8, ["base-path"])
+                ], 2)
+              ]),
+              l("li", null, [
+                l("button", {
+                  class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive({ textAlign: "pretty" }) }]),
+                  onClick: e[12] || (e[12] = (s) => t.value?.chain().focus().setTextAlign("right").run())
+                }, [
+                  i(n, {
+                    symbol: "align-justify",
+                    "base-path": a.iconBasePath
+                  }, null, 8, ["base-path"])
+                ], 2)
+              ])
+            ])
+          ]),
+          t.value.isActive("link") ? (b(), h("button", {
+            key: 3,
+            class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("link") }]),
+            onClick: e[13] || (e[13] = (s) => t.value.chain().focus().unsetLink().run()),
+            title: "Unset Link"
+          }, [
+            i(n, {
+              symbol: "unlink",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 2)) : (b(), h("button", {
+            key: 2,
+            class: u(["btn btn-sm btn-light", { "is-active": t.value.isActive("link") }]),
+            onClick: A,
+            title: "Set Link"
+          }, [
+            i(n, {
+              symbol: "link",
+              "base-path": a.iconBasePath
+            }, null, 8, ["base-path"])
+          ], 2)),
+          l("div", X, [
+            l("button", {
+              class: "btn btn-sm btn-light",
+              onClick: e[14] || (e[14] = (s) => t.value?.chain().focus().undo().run()),
+              disabled: !t.value.can().chain().focus().undo().run(),
+              title: "Undo"
+            }, [
+              i(n, {
+                symbol: "undo",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])
+            ], 8, Y),
+            l("button", {
+              class: "btn btn-sm btn-light",
+              onClick: e[15] || (e[15] = (s) => t.value?.chain().focus().redo().run()),
+              disabled: !t.value.can().chain().focus().redo().run(),
+              title: "Redo"
+            }, [
+              i(n, {
+                symbol: "redo",
+                "base-path": a.iconBasePath
+              }, null, 8, ["base-path"])
+            ], 8, Z)
+          ]),
+          l("button", {
+            class: "btn btn-sm btn-light ms-auto",
+            onClick: e[16] || (e[16] = (s) => d.value = !d.value),
+            title: d.value ? "Exit Fullscreen" : "Fullscreen"
+          }, [
+            i(n, {
+              symbol: d.value ? "close" : "maximize",
+              "base-path": a.iconBasePath
+            }, null, 8, ["symbol", "base-path"])
+          ], 8, _)
+        ])) : U("", !0),
+        (b(), c(R(m.value), {
+          class: "rte-editor__content",
+          editor: t.value
+        }, null, 8, ["editor"]))
+      ], 2)
+    ], 8, ["disabled"]));
+  }
+});
+export {
+  it 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
+};