@vizel/vue 0.0.1-alpha.6 → 1.0.0

package/dist/index33.js

@@ -1,48 +1,34 @@
-import { VIZEL_DEFAULT_AUTO_SAVE_OPTIONS as h, createVizelAutoSaveHandlers as f } from "@vizel/core";
-import { reactive as i, onMounted as U, watch as S, onBeforeUnmount as C, computed as t } from "vue";
-function A(o, u = {}) {
-  const r = { ...h, ...u }, a = i({
-    status: "saved",
-    hasUnsavedChanges: !1,
-    lastSaved: null,
-    error: null
-  });
-  let n = null, e = null;
-  const l = (s) => {
-    s.status !== void 0 && (a.status = s.status), s.hasUnsavedChanges !== void 0 && (a.hasUnsavedChanges = s.hasUnsavedChanges), s.lastSaved !== void 0 && (a.lastSaved = s.lastSaved), s.error !== void 0 && (a.error = s.error);
-  }, d = () => {
-    const s = o();
-    if (n && e && (n.off("update", e.handleUpdate), e.cancel()), n = s ?? null, !(n && r.enabled)) {
-      e = null;
-      return;
-    }
-    e = f(() => n, r, l), n.on("update", e.handleUpdate);
-  };
-  U(() => {
-    d();
-  }), S(
-    () => o(),
-    () => {
-      d();
-    }
-  ), C(() => {
-    n && e && (n.off("update", e.handleUpdate), e.cancel());
-  });
-  async function v() {
-    await e?.saveNow();
+import { defineComponent as l, createElementBlock as n, openBlock as c, normalizeClass as d, renderSlot as r } from "vue";
+const m = ["disabled", "aria-pressed", "title", "data-active", "data-action"], u = /* @__PURE__ */ l({
+  __name: "VizelToolbarButton",
+  props: {
+    isActive: { type: Boolean },
+    disabled: { type: Boolean },
+    title: {},
+    class: {},
+    action: {}
+  },
+  emits: ["click"],
+  setup(t, { emit: a }) {
+    const o = t, s = a;
+    return (e, i) => (c(), n("button", {
+      type: "button",
+      disabled: t.disabled,
+      "aria-pressed": t.isActive,
+      class: d([
+        "vizel-toolbar-button",
+        { "is-active": t.isActive },
+        e.$props.class
+      ]),
+      title: t.title,
+      "data-active": t.isActive || void 0,
+      "data-action": o.action,
+      onClick: i[0] || (i[0] = (v) => s("click"))
+    }, [
+      r(e.$slots, "default")
+    ], 10, m));
   }
-  async function c() {
-    return await e?.restore() ?? null;
-  }
-  return {
-    status: t(() => a.status),
-    hasUnsavedChanges: t(() => a.hasUnsavedChanges),
-    lastSaved: t(() => a.lastSaved),
-    error: t(() => a.error),
-    save: v,
-    restore: c
-  };
-}
+});
 export {
-  A as useVizelAutoSave
+  u as default
 };

package/dist/index34.js

@@ -1,24 +1,45 @@
-import { createVizelEditorInstance as l, registerVizelUploadEventHandler as d } from "@vizel/core";
-import { shallowRef as u, onMounted as c, onBeforeUnmount as m } from "vue";
-import { createVizelSlashMenuRenderer as p } from "./index32.js";
-function E(o = {}) {
-  const { features: e, extensions: r = [], ...i } = o, a = typeof e?.image == "object" ? e.image : {}, t = u(null);
-  let n = null;
-  return c(() => {
-    const { editor: s } = l({
-      ...i,
-      ...e !== void 0 && { features: e },
-      extensions: r,
-      createSlashMenuRenderer: p
-    });
-    t.value = s, n = d({
-      getEditor: () => t.value,
-      getImageOptions: () => a
-    });
-  }), m(() => {
-    n?.(), t.value?.destroy();
-  }), t;
-}
+import { defineComponent as p, computed as f, createElementBlock as r, openBlock as t, normalizeClass as _, Fragment as l, renderList as s, createBlock as n, createCommentVNode as v, withCtx as b, createVNode as k } from "vue";
+import { vizelDefaultToolbarActions as z, groupVizelToolbarActions as $ } from "@vizel/core";
+import { useVizelState as C } from "./index41.js";
+import V from "./index20.js";
+import h from "./index33.js";
+import y from "./index35.js";
+const w = /* @__PURE__ */ p({
+  __name: "VizelToolbarDefault",
+  props: {
+    editor: {},
+    class: {},
+    actions: { default: () => z }
+  },
+  setup(c) {
+    const o = c, m = C(() => o.editor), u = f(() => (m.value, $(o.actions)));
+    return (d, A) => (t(), r("div", {
+      class: _(["vizel-toolbar-content", d.$props.class]),
+      "data-vizel-toolbar": ""
+    }, [
+      (t(!0), r(l, null, s(u.value, (i, a) => (t(), r(l, {
+        key: i[0]?.group ?? a
+      }, [
+        a > 0 ? (t(), n(y, { key: 0 })) : v("", !0),
+        (t(!0), r(l, null, s(i, (e) => (t(), n(h, {
+          key: e.id,
+          action: e.id,
+          "is-active": e.isActive(o.editor),
+          disabled: !e.isEnabled(o.editor),
+          title: e.shortcut ? `${e.label} (${e.shortcut})` : e.label,
+          onClick: (B) => e.run(o.editor)
+        }, {
+          default: b(() => [
+            k(V, {
+              name: e.icon
+            }, null, 8, ["name"])
+          ]),
+          _: 2
+        }, 1032, ["action", "is-active", "disabled", "title", "onClick"]))), 128))
+      ], 64))), 128))
+    ], 2));
+  }
+});
 export {
-  E as useVizelEditor
+  w as default
 };

package/dist/index35.js

@@ -1,10 +1,15 @@
-import { getVizelEditorState as o } from "@vizel/core";
-import { computed as r } from "vue";
-import { useVizelState as i } from "./index37.js";
-function p(t) {
-  const e = i(t);
-  return r(() => (e.value, o(t())));
-}
+import { defineComponent as o, createElementBlock as r, openBlock as s, normalizeClass as l } from "vue";
+const t = /* @__PURE__ */ o({
+  __name: "VizelToolbarDivider",
+  props: {
+    class: {}
+  },
+  setup(a) {
+    return (e, n) => (s(), r("span", {
+      class: l(["vizel-toolbar-divider", e.$props.class])
+    }, null, 2));
+  }
+});
 export {
-  p as useVizelEditorState
+  t as default
 };

package/dist/index36.js

@@ -1,46 +1,38 @@
-import { getVizelMarkdown as k, createVizelMarkdownSyncHandlers as p } from "@vizel/core";
-import { ref as d, watch as w, onBeforeUnmount as M, computed as g } from "vue";
-function y(o, f = {}) {
-  const { initialValue: s, ...m } = f, t = d(s ?? ""), a = d(!1);
-  let l = null;
-  const i = () => (l || (l = p(m)), l);
-  let r = !1;
-  w(
-    o,
-    (e) => {
-      if (!e || r) return;
-      const n = i();
-      s !== void 0 ? (n.setMarkdown(e, s), t.value = s) : t.value = k(e), r = !0;
-      const u = () => {
-        n.handleUpdate(e), a.value = n.isPending();
-        const c = () => {
-          n.isPending() ? requestAnimationFrame(c) : (t.value = n.getMarkdown(), a.value = !1);
-        };
-        requestAnimationFrame(c);
-      };
-      e.on("update", u);
-    },
-    { immediate: !0 }
-  ), M(() => {
-    l?.destroy();
-  });
-  const h = (e) => {
-    const n = o();
-    if (!n) return;
-    i().setMarkdown(n, e), t.value = e, a.value = !1;
-  }, v = () => {
-    const e = o();
-    if (!e) return;
-    const n = i();
-    n.flush(e), t.value = n.getMarkdown(), a.value = !1;
-  };
+import { handleVizelSuggestionEscape as m, createVizelSuggestionContainer as c } from "@vizel/core";
+import { ref as l, createApp as s, h as d } from "vue";
+import "@iconify/vue";
+import f from "./index28.js";
+function R(u = {}) {
   return {
-    markdown: t,
-    setMarkdown: h,
-    isPending: g(() => a.value),
-    flush: v
+    render: () => {
+      let t = null, n = null;
+      const r = l(null), o = l([]), a = l(null);
+      return {
+        onStart: (e) => {
+          o.value = e.items, a.value = e.command, n = c(), t = s({
+            setup() {
+              return () => d(f, {
+                items: o.value,
+                ...u.className !== void 0 && { class: u.className },
+                ref: r,
+                onCommand: (i) => {
+                  a.value?.(i);
+                }
+              });
+            }
+          }), t.mount(n.menuContainer), n.updatePosition(e.clientRect);
+        },
+        onUpdate: (e) => {
+          o.value = e.items, a.value = e.command, n?.updatePosition(e.clientRect);
+        },
+        onKeyDown: (e) => m(e.event) ? !0 : r.value?.onKeyDown(e.event) ?? !1,
+        onExit: () => {
+          t?.unmount(), n?.destroy(), t = null, n = null;
+        }
+      };
+    }
   };
 }
 export {
-  y as useVizelMarkdown
+  R as createVizelSlashMenuRenderer
 };

package/dist/index37.js

@@ -1,23 +1,48 @@
-import { ref as a, watch as u, onBeforeUnmount as f } from "vue";
-function l(i) {
-  const e = a(0);
-  let n = null;
-  function o() {
-    e.value++;
+import { VIZEL_DEFAULT_AUTO_SAVE_OPTIONS as h, createVizelAutoSaveHandlers as f } from "@vizel/core";
+import { reactive as i, onMounted as U, watch as S, onBeforeUnmount as C, computed as t } from "vue";
+function A(o, u = {}) {
+  const r = { ...h, ...u }, a = i({
+    status: "saved",
+    hasUnsavedChanges: !1,
+    lastSaved: null,
+    error: null
+  });
+  let n = null, e = null;
+  const l = (s) => {
+    s.status !== void 0 && (a.status = s.status), s.hasUnsavedChanges !== void 0 && (a.hasUnsavedChanges = s.hasUnsavedChanges), s.lastSaved !== void 0 && (a.lastSaved = s.lastSaved), s.error !== void 0 && (a.error = s.error);
+  }, d = () => {
+    const s = o();
+    if (n && e && (n.off("update", e.handleUpdate), e.cancel()), n = s ?? null, !(n && r.enabled)) {
+      e = null;
+      return;
+    }
+    e = f(() => n, r, l), n.on("update", e.handleUpdate);
+  };
+  U(() => {
+    d();
+  }), S(
+    () => o(),
+    () => {
+      d();
+    }
+  ), C(() => {
+    n && e && (n.off("update", e.handleUpdate), e.cancel());
+  });
+  async function v() {
+    await e?.saveNow();
   }
-  function r(t) {
-    n && n !== t && n.off("transaction", o), n = t ?? null, n && n.on("transaction", o);
+  async function c() {
+    return await e?.restore() ?? null;
   }
-  return u(
-    i,
-    (t) => {
-      r(t);
-    },
-    { immediate: !0 }
-  ), f(() => {
-    n && n.off("transaction", o);
-  }), e;
+  return {
+    status: t(() => a.status),
+    hasUnsavedChanges: t(() => a.hasUnsavedChanges),
+    lastSaved: t(() => a.lastSaved),
+    error: t(() => a.error),
+    save: v,
+    restore: c
+  };
 }
 export {
-  l as useVizelState
+  A as useVizelAutoSave
 };

package/dist/index38.js

@@ -1,15 +1,24 @@
-import { inject as r } from "vue";
-import { VIZEL_THEME_CONTEXT_KEY as t } from "./index60.js";
-function o() {
-  const e = r(t);
-  if (!e)
-    throw new Error("useVizelTheme must be used within a VizelThemeProvider");
-  return e;
-}
-function u() {
-  return r(t, null);
+import { createVizelEditorInstance as l, registerVizelUploadEventHandler as d } from "@vizel/core";
+import { shallowRef as u, onMounted as c, onBeforeUnmount as m } from "vue";
+import { createVizelSlashMenuRenderer as p } from "./index36.js";
+function E(n = {}) {
+  const { features: e, extensions: r = [], ...i } = n, a = typeof e?.image == "object" ? e.image : {}, t = u(null);
+  let o = null;
+  return c(async () => {
+    const s = await l({
+      ...i,
+      ...e !== void 0 && { features: e },
+      extensions: r,
+      createSlashMenuRenderer: p
+    });
+    t.value = s.editor, o = d({
+      getEditor: () => t.value,
+      getImageOptions: () => a
+    });
+  }), m(() => {
+    o?.(), t.value?.destroy();
+  }), t;
 }
 export {
-  o as useVizelTheme,
-  u as useVizelThemeSafe
+  E as useVizelEditor
 };

package/dist/index39.js

@@ -1,17 +1,10 @@
-var t = (e, n) => {
-  if (e === "slot")
-    return 0;
-  if (e instanceof Function)
-    return e(n);
-  const { children: r, ...s } = n ?? {};
-  if (e === "svg")
-    throw new Error("SVG elements are not supported in the JSX syntax, use the array syntax instead");
-  return [e, s, r];
-};
+import { getVizelEditorState as o } from "@vizel/core";
+import { computed as r } from "vue";
+import { useVizelState as i } from "./index41.js";
+function p(t) {
+  const e = i(t);
+  return r(() => (e.value, o(t())));
+}
 export {
-  t as createElement,
-  t as h,
-  t as jsx,
-  t as jsxDEV,
-  t as jsxs
+  p as useVizelEditorState
 };

package/dist/index40.js

@@ -1,4 +1,46 @@
-import f from "./index10.js";
+import { getVizelMarkdown as k, createVizelMarkdownSyncHandlers as p } from "@vizel/core";
+import { ref as d, watch as w, onBeforeUnmount as M, computed as g } from "vue";
+function y(o, f = {}) {
+  const { initialValue: s, ...m } = f, t = d(s ?? ""), a = d(!1);
+  let l = null;
+  const i = () => (l || (l = p(m)), l);
+  let r = !1;
+  w(
+    o,
+    (e) => {
+      if (!e || r) return;
+      const n = i();
+      s !== void 0 ? (n.setMarkdown(e, s), t.value = s) : t.value = k(e), r = !0;
+      const u = () => {
+        n.handleUpdate(e), a.value = n.isPending();
+        const c = () => {
+          n.isPending() ? requestAnimationFrame(c) : (t.value = n.getMarkdown(), a.value = !1);
+        };
+        requestAnimationFrame(c);
+      };
+      e.on("update", u);
+    },
+    { immediate: !0 }
+  ), M(() => {
+    l?.destroy();
+  });
+  const h = (e) => {
+    const n = o();
+    if (!n) return;
+    i().setMarkdown(n, e), t.value = e, a.value = !1;
+  }, v = () => {
+    const e = o();
+    if (!e) return;
+    const n = i();
+    n.flush(e), t.value = n.getMarkdown(), a.value = !1;
+  };
+  return {
+    markdown: t,
+    setMarkdown: h,
+    isPending: g(() => a.value),
+    flush: v
+  };
+}
 export {
-  f as default
+  y as useVizelMarkdown
 };

package/dist/index41.js

@@ -1,4 +1,23 @@
-import f from "./index11.js";
+import { ref as a, watch as u, onBeforeUnmount as f } from "vue";
+function l(i) {
+  const e = a(0);
+  let n = null;
+  function o() {
+    e.value++;
+  }
+  function r(t) {
+    n && n !== t && n.off("transaction", o), n = t ?? null, n && n.on("transaction", o);
+  }
+  return u(
+    i,
+    (t) => {
+      r(t);
+    },
+    { immediate: !0 }
+  ), f(() => {
+    n && n.off("transaction", o);
+  }), e;
+}
 export {
-  f as default
+  l as useVizelState
 };

package/dist/index42.js

@@ -1,4 +1,15 @@
-import f from "./index12.js";
+import { inject as r } from "vue";
+import { VIZEL_THEME_CONTEXT_KEY as t } from "./index68.js";
+function o() {
+  const e = r(t);
+  if (!e)
+    throw new Error("useVizelTheme must be used within a VizelThemeProvider");
+  return e;
+}
+function u() {
+  return r(t, null);
+}
 export {
-  f as default
+  o as useVizelTheme,
+  u as useVizelThemeSafe
 };

package/dist/index43.js

@@ -1,4 +1,17 @@
-import f from "./index13.js";
+var t = (e, n) => {
+  if (e === "slot")
+    return 0;
+  if (e instanceof Function)
+    return e(n);
+  const { children: r, ...s } = n ?? {};
+  if (e === "svg")
+    throw new Error("SVG elements are not supported in the JSX syntax, use the array syntax instead");
+  return [e, s, r];
+};
 export {
-  f as default
+  t as createElement,
+  t as h,
+  t as jsx,
+  t as jsxDEV,
+  t as jsxs
 };

package/dist/index44.js

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

package/dist/index45.js

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

package/dist/index46.js

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

package/dist/index47.js

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

package/dist/index48.js

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

package/dist/index49.js

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

package/dist/index50.js

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

package/dist/index51.js

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

package/dist/index52.js

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

package/dist/index53.js

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

package/dist/index54.js

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

package/dist/index55.js

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

package/dist/index56.js

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

package/dist/index57.js

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

package/dist/index58.js

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

package/dist/index59.js

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

package/dist/index60.js

@@ -1,4 +1,4 @@
-const e = /* @__PURE__ */ Symbol("VizelThemeContext");
+import f from "./index28.js";
 export {
-  e as VIZEL_THEME_CONTEXT_KEY
+  f as default
 };

package/dist/index61.js

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

package/dist/index62.js

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

package/dist/index63.js

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

package/dist/index64.js

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

package/dist/index65.js

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