@vizel/vue 0.0.1-alpha.1

package/dist/index39.js

@@ -0,0 +1,4 @@
+import f from "./index9.js";
+export {
+  f as default
+};

package/dist/index4.js

@@ -0,0 +1,34 @@
+import { defineComponent as n, createElementBlock as o, openBlock as c, normalizeClass as d, renderSlot as r } from "vue";
+const u = ["disabled", "aria-pressed", "title", "data-active", "data-action"], v = /* @__PURE__ */ n({
+  __name: "VizelBubbleMenuButton",
+  props: {
+    isActive: { type: Boolean },
+    disabled: { type: Boolean },
+    title: {},
+    class: {},
+    action: {}
+  },
+  emits: ["click"],
+  setup(t, { emit: a }) {
+    const s = t, l = a;
+    return (e, i) => (c(), o("button", {
+      type: "button",
+      disabled: t.disabled,
+      "aria-pressed": t.isActive,
+      class: d([
+        "vizel-bubble-menu-button",
+        { "is-active": t.isActive },
+        e.$props.class
+      ]),
+      title: t.title,
+      "data-active": t.isActive || void 0,
+      "data-action": s.action,
+      onClick: i[0] || (i[0] = (b) => l("click"))
+    }, [
+      r(e.$slots, "default")
+    ], 10, u));
+  }
+});
+export {
+  v as default
+};

package/dist/index40.js

@@ -0,0 +1,4 @@
+import f from "./index10.js";
+export {
+  f as default
+};

package/dist/index41.js

@@ -0,0 +1,4 @@
+import f from "./index11.js";
+export {
+  f as default
+};

package/dist/index42.js

@@ -0,0 +1,4 @@
+import f from "./index12.js";
+export {
+  f as default
+};

package/dist/index43.js

@@ -0,0 +1,4 @@
+import f from "./index13.js";
+export {
+  f as default
+};

package/dist/index44.js

@@ -0,0 +1,4 @@
+import f from "./index14.js";
+export {
+  f as default
+};

package/dist/index45.js

@@ -0,0 +1,4 @@
+import f from "./index15.js";
+export {
+  f as default
+};

package/dist/index46.js

@@ -0,0 +1,4 @@
+import f from "./index16.js";
+export {
+  f as default
+};

package/dist/index47.js

@@ -0,0 +1,4 @@
+import f from "./index17.js";
+export {
+  f as default
+};

package/dist/index48.js

@@ -0,0 +1,4 @@
+import f from "./index18.js";
+export {
+  f as default
+};

package/dist/index49.js

@@ -0,0 +1,4 @@
+import f from "./index19.js";
+export {
+  f as default
+};

package/dist/index5.js

@@ -0,0 +1,76 @@
+import { defineComponent as w, ref as i, computed as n, watch as b, onMounted as x, onUnmounted as z, createElementBlock as d, openBlock as a, normalizeClass as h, createElementVNode as R, createCommentVNode as V, normalizeStyle as E, createBlock as v, createVNode as H } from "vue";
+import { VIZEL_TEXT_COLORS as L, VIZEL_HIGHLIGHT_COLORS as T, getVizelRecentColors as B, addVizelRecentColor as f } from "@vizel/core";
+import O from "./index8.js";
+import m from "./index11.js";
+const S = ["data-type"], I = ["title", "data-action"], $ = {
+  key: 0,
+  class: "vizel-color-picker-dropdown"
+}, Z = /* @__PURE__ */ w({
+  __name: "VizelBubbleMenuColorPicker",
+  props: {
+    editor: {},
+    type: {},
+    colors: {},
+    class: {},
+    allowCustomColor: { type: Boolean, default: !0 },
+    showRecentColors: { type: Boolean, default: !0 }
+  },
+  setup(C) {
+    const e = C, o = i(!1), c = i([]), s = i(null), g = n(() => e.colors ?? (e.type === "textColor" ? L : T)), r = n(() => e.type === "textColor" ? e.editor.getAttributes("textStyle").color : e.editor.getAttributes("highlight").color), l = n(() => e.type === "textColor"), y = n(() => l.value ? ["inherit"] : ["transparent"]);
+    b(o, (t) => {
+      t && e.showRecentColors && (c.value = B(e.type));
+    });
+    function _(t) {
+      e.type === "textColor" ? t === "inherit" ? e.editor.chain().focus().unsetColor().run() : (e.editor.chain().focus().setColor(t).run(), f(e.type, t)) : t === "transparent" ? e.editor.chain().focus().unsetHighlight().run() : (e.editor.chain().focus().toggleHighlight({ color: t }).run(), f(e.type, t)), o.value = !1;
+    }
+    function u(t) {
+      s.value && !s.value.contains(t.target) && (o.value = !1);
+    }
+    x(() => {
+      document.addEventListener("mousedown", u);
+    }), z(() => {
+      document.removeEventListener("mousedown", u);
+    });
+    function k() {
+      return l.value ? { color: r.value || "inherit" } : { "--highlight-color": r.value || "transparent" };
+    }
+    return (t, p) => (a(), d("div", {
+      ref_key: "containerRef",
+      ref: s,
+      class: h(["vizel-color-picker", t.$props.class]),
+      "data-type": e.type
+    }, [
+      R("button", {
+        type: "button",
+        class: h(["vizel-bubble-menu-button", "vizel-color-picker-trigger", { "has-color": r.value }]),
+        title: l.value ? "Text Color" : "Highlight",
+        "data-action": e.type,
+        style: E(k()),
+        onClick: p[0] || (p[0] = (N) => o.value = !o.value)
+      }, [
+        l.value ? (a(), v(m, {
+          key: 0,
+          name: "textColor"
+        })) : (a(), v(m, {
+          key: 1,
+          name: "highlighter"
+        }))
+      ], 14, I),
+      o.value ? (a(), d("div", $, [
+        H(O, {
+          colors: g.value,
+          value: r.value,
+          label: l.value ? "Text color palette" : "Highlight color palette",
+          "allow-custom-color": e.allowCustomColor,
+          "recent-colors": c.value,
+          "show-recent-colors": e.showRecentColors,
+          "none-values": y.value,
+          onChange: _
+        }, null, 8, ["colors", "value", "label", "allow-custom-color", "recent-colors", "show-recent-colors", "none-values"])
+      ])) : V("", !0)
+    ], 10, S));
+  }
+});
+export {
+  Z as default
+};

package/dist/index50.js

@@ -0,0 +1,4 @@
+import f from "./index20.js";
+export {
+  f as default
+};

package/dist/index51.js

@@ -0,0 +1,4 @@
+import f from "./index21.js";
+export {
+  f as default
+};

package/dist/index6.js

@@ -0,0 +1,108 @@
+import { defineComponent as $, computed as l, ref as A, createBlock as B, createElementBlock as _, openBlock as u, normalizeClass as y, createVNode as i, withCtx as r } from "vue";
+import { useVizelState as E } from "./index29.js";
+import a from "./index4.js";
+import c from "./index5.js";
+import d from "./index11.js";
+import S from "./index13.js";
+import z from "./index14.js";
+const D = /* @__PURE__ */ $({
+  __name: "VizelBubbleMenuDefault",
+  props: {
+    editor: {},
+    class: {},
+    enableEmbed: { type: Boolean }
+  },
+  setup(v) {
+    const e = v, o = E(() => e.editor), m = l(() => (o.value, e.editor.isActive("bold"))), f = l(() => (o.value, e.editor.isActive("italic"))), k = l(() => (o.value, e.editor.isActive("strike"))), p = l(() => (o.value, e.editor.isActive("underline"))), C = l(() => (o.value, e.editor.isActive("code"))), b = l(() => (o.value, e.editor.isActive("link"))), s = A(!1);
+    return (g, t) => s.value ? (u(), B(S, {
+      key: 0,
+      editor: e.editor,
+      "enable-embed": e.enableEmbed,
+      onClose: t[0] || (t[0] = (n) => s.value = !1)
+    }, null, 8, ["editor", "enable-embed"])) : (u(), _("div", {
+      key: 1,
+      class: y(["vizel-bubble-menu-toolbar", g.$props.class])
+    }, [
+      i(z, {
+        editor: e.editor
+      }, null, 8, ["editor"]),
+      i(a, {
+        action: "bold",
+        "is-active": m.value,
+        title: "Bold (Cmd+B)",
+        onClick: t[1] || (t[1] = (n) => e.editor.chain().focus().toggleBold().run())
+      }, {
+        default: r(() => [
+          i(d, { name: "bold" })
+        ]),
+        _: 1
+      }, 8, ["is-active"]),
+      i(a, {
+        action: "italic",
+        "is-active": f.value,
+        title: "Italic (Cmd+I)",
+        onClick: t[2] || (t[2] = (n) => e.editor.chain().focus().toggleItalic().run())
+      }, {
+        default: r(() => [
+          i(d, { name: "italic" })
+        ]),
+        _: 1
+      }, 8, ["is-active"]),
+      i(a, {
+        action: "strike",
+        "is-active": k.value,
+        title: "Strikethrough",
+        onClick: t[3] || (t[3] = (n) => e.editor.chain().focus().toggleStrike().run())
+      }, {
+        default: r(() => [
+          i(d, { name: "strikethrough" })
+        ]),
+        _: 1
+      }, 8, ["is-active"]),
+      i(a, {
+        action: "underline",
+        "is-active": p.value,
+        title: "Underline (Cmd+U)",
+        onClick: t[4] || (t[4] = (n) => e.editor.chain().focus().toggleUnderline().run())
+      }, {
+        default: r(() => [
+          i(d, { name: "underline" })
+        ]),
+        _: 1
+      }, 8, ["is-active"]),
+      i(a, {
+        action: "code",
+        "is-active": C.value,
+        title: "Code (Cmd+E)",
+        onClick: t[5] || (t[5] = (n) => e.editor.chain().focus().toggleCode().run())
+      }, {
+        default: r(() => [
+          i(d, { name: "code" })
+        ]),
+        _: 1
+      }, 8, ["is-active"]),
+      i(a, {
+        action: "link",
+        "is-active": b.value,
+        title: "Link (Cmd+K)",
+        onClick: t[6] || (t[6] = (n) => s.value = !0)
+      }, {
+        default: r(() => [
+          i(d, { name: "link" })
+        ]),
+        _: 1
+      }, 8, ["is-active"]),
+      i(c, {
+        editor: e.editor,
+        type: "textColor"
+      }, null, 8, ["editor"]),
+      i(c, {
+        editor: e.editor,
+        type: "highlight"
+      }, null, 8, ["editor"])
+    ], 2));
+  }
+});
+export {
+  D as default
+};

package/dist/index7.js

@@ -0,0 +1,15 @@
+import { defineComponent as s, createElementBlock as l, openBlock as n, normalizeClass as r } from "vue";
+const c = /* @__PURE__ */ s({
+  __name: "VizelBubbleMenuDivider",
+  props: {
+    class: {}
+  },
+  setup(o) {
+    return (e, a) => (n(), l("span", {
+      class: r(["vizel-bubble-menu-divider", e.$props.class])
+    }, null, 2));
+  }
+});
+export {
+  c as default
+};

package/dist/index8.js

@@ -0,0 +1,191 @@
+import { defineComponent as U, computed as k, ref as C, watch as N, onMounted as F, createElementBlock as s, openBlock as i, normalizeClass as _, createCommentVNode as b, createElementVNode as u, Fragment as B, renderList as M, normalizeStyle as z, createVNode as V } from "vue";
+import { isVizelValidHexColor as S, normalizeVizelHexColor as g } from "@vizel/core";
+import x from "./index11.js";
+const G = ["aria-label"], P = {
+  key: 0,
+  class: "vizel-color-picker-section"
+}, j = { class: "vizel-color-picker-recent" }, q = ["aria-selected", "aria-label", "tabindex", "data-color", "onClick", "onKeydown"], J = {
+  key: 0,
+  class: "vizel-color-picker-none"
+}, Q = { class: "vizel-color-picker-section" }, T = { class: "vizel-color-picker-grid" }, W = ["aria-selected", "aria-label", "tabindex", "data-color", "onClick", "onKeydown"], X = {
+  key: 0,
+  class: "vizel-color-picker-none"
+}, Y = {
+  key: 1,
+  class: "vizel-color-picker-input-row"
+}, Z = ["value"], D = ["disabled"], $ = 4, te = /* @__PURE__ */ U({
+  __name: "VizelColorPicker",
+  props: {
+    colors: {},
+    value: {},
+    modelValue: {},
+    label: { default: "Color palette" },
+    class: {},
+    allowCustomColor: { type: Boolean, default: !0 },
+    recentColors: { default: () => [] },
+    showRecentColors: { type: Boolean, default: !0 },
+    noneValues: { default: () => ["transparent", "inherit"] }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(d, { emit: H }) {
+    const a = d, f = H, c = k(() => a.modelValue ?? a.value), r = C(""), v = C(-1), p = C([]), I = C(null), m = k(() => [
+      ...a.showRecentColors ? a.recentColors : [],
+      ...a.colors.map((e) => e.color)
+    ]);
+    N(
+      () => m.value.length,
+      (e) => {
+        p.value.length > e && (p.value.length = e);
+      }
+    );
+    const y = k(() => a.showRecentColors ? a.recentColors.length : 0);
+    function h(e) {
+      return a.noneValues.includes(e);
+    }
+    function w(e) {
+      f("change", e), f("update:modelValue", e), r.value = "";
+    }
+    function R() {
+      const e = g(r.value);
+      S(e) && (f("change", e), f("update:modelValue", e), r.value = "");
+    }
+    function O(e) {
+      e.key === "Enter" && (e.preventDefault(), R());
+    }
+    function K(e, n) {
+      const l = m.value.length;
+      if (l === 0) return;
+      let t = n, o = !1;
+      switch (e.key) {
+        case "ArrowRight":
+          t = (n + 1) % l, o = !0;
+          break;
+        case "ArrowLeft":
+          t = (n - 1 + l) % l, o = !0;
+          break;
+        case "ArrowDown":
+          t = Math.min(n + $, l - 1), o = !0;
+          break;
+        case "ArrowUp":
+          t = Math.max(n - $, 0), o = !0;
+          break;
+        case "Home":
+          t = 0, o = !0;
+          break;
+        case "End":
+          t = l - 1, o = !0;
+          break;
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          const E = m.value[n];
+          E && w(E);
+          return;
+        }
+      }
+      o && (e.preventDefault(), v.value = t, p.value[t]?.focus());
+    }
+    N(
+      c,
+      (e) => {
+        e && !h(e) ? r.value = e : r.value = "";
+      },
+      { immediate: !0 }
+    ), F(() => {
+      const e = c.value ? m.value.indexOf(c.value) : -1;
+      e >= 0 ? v.value = e : m.value.length > 0 && (v.value = 0);
+    });
+    const A = k(() => S(g(r.value))), L = k(
+      () => A.value ? g(r.value) : void 0
+    );
+    return (e, n) => (i(), s("div", {
+      class: _(["vizel-color-picker-content", e.$props.class]),
+      role: "listbox",
+      "aria-label": a.label
+    }, [
+      d.showRecentColors && a.recentColors && a.recentColors.length > 0 ? (i(), s("div", P, [
+        n[1] || (n[1] = u("div", { class: "vizel-color-picker-label" }, "Recent", -1)),
+        u("div", j, [
+          (i(!0), s(B, null, M(d.recentColors, (l, t) => (i(), s("button", {
+            key: l,
+            ref_for: !0,
+            ref: (o) => {
+              p.value[t] = o;
+            },
+            type: "button",
+            role: "option",
+            "aria-selected": c.value === l,
+            "aria-label": l,
+            tabindex: v.value === t ? 0 : -1,
+            class: _(["vizel-color-picker-swatch", { "is-active": c.value === l }]),
+            style: z({ backgroundColor: h(l) ? "transparent" : l }),
+            "data-color": l,
+            onClick: (o) => w(l),
+            onKeydown: (o) => K(o, t)
+          }, [
+            h(l) ? (i(), s("span", J, [
+              V(x, { name: "x" })
+            ])) : b("", !0)
+          ], 46, q))), 128))
+        ])
+      ])) : b("", !0),
+      u("div", Q, [
+        u("div", T, [
+          (i(!0), s(B, null, M(d.colors, (l, t) => (i(), s("button", {
+            key: l.color,
+            ref_for: !0,
+            ref: (o) => {
+              p.value[y.value + t] = o;
+            },
+            type: "button",
+            role: "option",
+            "aria-selected": c.value === l.color,
+            "aria-label": l.name,
+            tabindex: v.value === y.value + t ? 0 : -1,
+            class: _(["vizel-color-picker-swatch", { "is-active": c.value === l.color }]),
+            style: z({ backgroundColor: h(l.color) ? "transparent" : l.color }),
+            "data-color": l.color,
+            onClick: (o) => w(l.color),
+            onKeydown: (o) => K(o, y.value + t)
+          }, [
+            h(l.color) ? (i(), s("span", X, [
+              V(x, { name: "x" })
+            ])) : b("", !0)
+          ], 46, W))), 128))
+        ])
+      ]),
+      d.allowCustomColor ? (i(), s("div", Y, [
+        u("span", {
+          class: "vizel-color-picker-preview",
+          style: z({ backgroundColor: L.value || "transparent" }),
+          "aria-hidden": "true"
+        }, null, 4),
+        u("input", {
+          ref_key: "inputRef",
+          ref: I,
+          type: "text",
+          class: "vizel-color-picker-input",
+          placeholder: "#000000",
+          value: r.value,
+          maxlength: "7",
+          "aria-label": "Custom color hex value",
+          onInput: n[0] || (n[0] = (l) => r.value = l.target.value),
+          onKeydown: O
+        }, null, 40, Z),
+        u("button", {
+          type: "button",
+          class: "vizel-color-picker-apply",
+          disabled: !A.value,
+          title: "Apply",
+          "aria-label": "Apply custom color",
+          onClick: R
+        }, [
+          V(x, { name: "check" })
+        ], 8, D)
+      ])) : b("", !0)
+    ], 10, G));
+  }
+});
+export {
+  te as default
+};

package/dist/index9.js

@@ -0,0 +1,35 @@
+import { defineComponent as d, ref as m, computed as f, watch as v, createElementBlock as u, createCommentVNode as C, openBlock as _, normalizeClass as w } from "vue";
+import { useVizelContextSafe as E } from "./index23.js";
+const x = /* @__PURE__ */ d({
+  __name: "VizelEditor",
+  props: {
+    editor: {},
+    class: {}
+  },
+  setup(a, { expose: c }) {
+    const l = a, t = m(null), p = E(), i = f(() => l.editor ?? p?.());
+    return c({
+      get container() {
+        return t.value;
+      }
+    }), v(
+      () => [i.value, t.value],
+      ([e, o], s) => {
+        const n = s?.[0], r = s?.[1];
+        n && r && n.view.dom.parentNode === r && r.removeChild(n.view.dom), e && o && (o.appendChild(e.view.dom), e.view.setProps({
+          editable: () => e?.isEditable ?? !1
+        }));
+      },
+      { immediate: !0 }
+    ), (e, o) => i.value ? (_(), u("div", {
+      key: 0,
+      ref_key: "containerRef",
+      ref: t,
+      class: w(e.$props.class),
+      "data-vizel-content": ""
+    }, null, 2)) : C("", !0);
+  }
+});
+export {
+  x as default
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@vizel/vue",
+  "version": "0.0.1-alpha.1",
+  "description": "Vue 3 components for Vizel block-based Markdown editor",
+  "keywords": [
+    "vue",
+    "vue3",
+    "tiptap",
+    "editor",
+    "markdown",
+    "wysiwyg",
+    "rich-text",
+    "block-editor"
+  ],
+  "license": "MIT",
+  "author": "Seiji Kohara",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seijikohara/vizel.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/seijikohara/vizel",
+  "bugs": "https://github.com/seijikohara/vizel/issues",
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@iconify/vue": "^5",
+    "@vizel/core": "^0.0.1-alpha.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6",
+    "vite": "^7",
+    "vite-plugin-dts": "^4",
+    "vue-tsc": "^3"
+  }
+}