@vizel/vue 0.0.1-alpha.1 → 0.0.1-alpha.4

package/dist/index13.js

@@ -1,91 +1,76 @@
-import { defineComponent as R, ref as r, computed as d, onMounted as V, onUnmounted as C, createElementBlock as m, openBlock as c, normalizeClass as M, createElementVNode as i, createCommentVNode as E, withDirectives as h, vModelText as U, createVNode as y, vModelCheckbox as D } from "vue";
-import { detectVizelEmbedProvider as B } from "@vizel/core";
-import g from "./index11.js";
-const N = { class: "vizel-link-editor-row" }, P = {
-  type: "submit",
-  class: "vizel-link-button",
-  title: "Apply"
-}, A = {
+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 "./index16.js";
+import m from "./index20.js";
+const S = ["data-type"], I = ["title", "data-action"], $ = {
   key: 0,
-  class: "vizel-link-editor-embed-toggle"
-}, H = /* @__PURE__ */ R({
-  __name: "VizelLinkEditor",
+  class: "vizel-color-picker-dropdown"
+}, Z = /* @__PURE__ */ w({
+  __name: "VizelBubbleMenuColorPicker",
   props: {
     editor: {},
+    type: {},
+    colors: {},
     class: {},
-    enableEmbed: { type: Boolean, default: !1 }
+    allowCustomColor: { type: Boolean, default: !0 },
+    showRecentColors: { type: Boolean, default: !0 }
   },
-  emits: ["close"],
-  setup(z, { emit: L }) {
-    const n = z, o = L, s = r(null), f = r(null), v = d(() => n.editor.getAttributes("link").href || ""), l = r(v.value), u = r(!1), p = d(() => n.enableEmbed ? n.editor.extensionManager.extensions.some((e) => e.name === "embed") : !1), x = d(() => l.value.trim() ? B(l.value.trim()) !== null : !1);
-    function k(t) {
-      s.value && !s.value.contains(t.target) && o("close");
-    }
-    function b(t) {
-      t.key === "Escape" && (t.preventDefault(), t.stopImmediatePropagation(), o("close"));
-    }
-    V(() => {
-      f.value?.focus(), setTimeout(() => {
-        document.addEventListener("mousedown", k);
-      }, 0), document.addEventListener("keydown", b, !0);
-    }), C(() => {
-      document.removeEventListener("mousedown", k), document.removeEventListener("keydown", b, !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) {
-      t.preventDefault();
-      const e = l.value.trim();
-      if (!e) {
-        n.editor.chain().focus().unsetLink().run(), o("close");
-        return;
-      }
-      u.value && p.value ? n.editor.chain().focus().unsetLink().setEmbed({ url: e }).run() : n.editor.chain().focus().setLink({ href: e }).run(), o("close");
+      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 w() {
-      n.editor.chain().focus().unsetLink().run(), o("close");
+    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, e) => (c(), m("form", {
-      ref_key: "formRef",
+    return (t, p) => (a(), d("div", {
+      ref_key: "containerRef",
       ref: s,
-      class: M(["vizel-link-editor", t.$props.class]),
-      onSubmit: _
+      class: h(["vizel-color-picker", t.$props.class]),
+      "data-type": e.type
     }, [
-      i("div", N, [
-        h(i("input", {
-          ref_key: "inputRef",
-          ref: f,
-          "onUpdate:modelValue": e[0] || (e[0] = (a) => l.value = a),
-          type: "url",
-          placeholder: "Enter URL...",
-          class: "vizel-link-input"
-        }, null, 512), [
-          [U, l.value]
-        ]),
-        i("button", P, [
-          y(g, { name: "check" })
-        ]),
-        v.value ? (c(), m("button", {
+      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,
-          type: "button",
-          class: "vizel-link-button vizel-link-remove",
-          title: "Remove link",
-          onClick: w
-        }, [
-          y(g, { name: "x" })
-        ])) : E("", !0)
-      ]),
-      p.value && x.value ? (c(), m("div", A, [
-        h(i("input", {
-          id: "vizel-embed-toggle",
-          "onUpdate:modelValue": e[1] || (e[1] = (a) => u.value = a),
-          type: "checkbox"
-        }, null, 512), [
-          [D, u.value]
-        ]),
-        e[2] || (e[2] = i("label", { for: "vizel-embed-toggle" }, "Embed as rich content", -1))
-      ])) : E("", !0)
-    ], 34));
+          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 {
-  H as default
+  Z as default
 };

package/dist/index14.js

@@ -1,134 +1,108 @@
-import { defineComponent as E, ref as i, computed as m, onMounted as V, onUnmounted as A, watch as $, nextTick as S, createElementBlock as r, openBlock as c, normalizeClass as D, createElementVNode as l, createCommentVNode as g, createVNode as d, toDisplayString as N, Fragment as L, renderList as R } from "vue";
-import { vizelDefaultNodeTypes as B, getVizelActiveNodeType as K } from "@vizel/core";
-import { useVizelState as M } from "./index29.js";
-import u from "./index11.js";
-const I = ["aria-expanded", "aria-label"], O = { class: "vizel-node-selector-icon" }, U = { class: "vizel-node-selector-label" }, F = {
-  class: "vizel-node-selector-chevron",
-  "aria-hidden": "true"
-}, H = ["aria-selected", "tabindex", "onClick", "onMouseenter"], j = { class: "vizel-node-selector-option-icon" }, q = { class: "vizel-node-selector-option-label" }, G = {
-  key: 0,
-  class: "vizel-node-selector-check",
-  "aria-hidden": "true"
-}, X = /* @__PURE__ */ E({
-  __name: "VizelNodeSelector",
+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 "./index37.js";
+import a from "./index12.js";
+import c from "./index13.js";
+import d from "./index20.js";
+import S from "./index23.js";
+import z from "./index24.js";
+const D = /* @__PURE__ */ $({
+  __name: "VizelBubbleMenuDefault",
   props: {
     editor: {},
-    nodeTypes: { default: () => B },
-    class: {}
+    class: {},
+    enableEmbed: { type: Boolean }
   },
-  setup(T) {
-    const o = T, k = M(() => o.editor), n = i(!1), t = i(0), p = i(null), y = i(null), h = m(() => (k.value, K(o.editor, o.nodeTypes))), b = m(() => h.value?.label ?? "Text"), C = m(() => h.value?.icon ?? "paragraph");
-    function _(e) {
-      p.value && !p.value.contains(e.target) && (n.value = !1);
-    }
-    V(() => {
-      document.addEventListener("mousedown", _);
-    }), A(() => {
-      document.removeEventListener("mousedown", _);
-    }), $(n, (e) => {
-      e && S(() => {
-        y.value?.focus();
-      });
-    });
-    function w(e) {
-      if (!n.value) {
-        (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), n.value = !0, t.value = 0);
-        return;
-      }
-      switch (e.key) {
-        case "Escape":
-          e.preventDefault(), n.value = !1;
-          break;
-        case "ArrowDown":
-          e.preventDefault(), t.value = (t.value + 1) % o.nodeTypes.length;
-          break;
-        case "ArrowUp":
-          e.preventDefault(), t.value = (t.value - 1 + o.nodeTypes.length) % o.nodeTypes.length;
-          break;
-        case "Enter":
-        case " ": {
-          e.preventDefault();
-          const s = o.nodeTypes[t.value];
-          s && z(s);
-          break;
-        }
-        case "Home":
-          e.preventDefault(), t.value = 0;
-          break;
-        case "End":
-          e.preventDefault(), t.value = o.nodeTypes.length - 1;
-          break;
-      }
-    }
-    function z(e) {
-      e.command(o.editor), n.value = !1;
-    }
-    function v(e) {
-      return k.value, e.isActive(o.editor);
-    }
-    return (e, s) => (c(), r("div", {
-      ref_key: "containerRef",
-      ref: p,
-      class: D(["vizel-node-selector", e.$props.class]),
-      "data-vizel-node-selector": ""
+  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])
     }, [
-      l("button", {
-        type: "button",
-        class: "vizel-node-selector-trigger",
-        "aria-haspopup": !0,
-        "aria-expanded": n.value,
-        "aria-label": `Current block type: ${b.value}`,
-        title: "Change block type",
-        onClick: s[0] || (s[0] = (a) => n.value = !n.value),
-        onKeydown: w
-      }, [
-        l("span", O, [
-          d(u, { name: C.value }, null, 8, ["name"])
+      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" })
         ]),
-        l("span", U, N(b.value), 1),
-        l("span", F, [
-          d(u, { name: "chevronDown" })
-        ])
-      ], 40, I),
-      n.value ? (c(), r("div", {
-        key: 0,
-        ref_key: "dropdownRef",
-        ref: y,
-        class: "vizel-node-selector-dropdown",
-        role: "listbox",
-        "aria-label": "Block types",
-        "data-vizel-node-selector-dropdown": "",
-        tabindex: "-1",
-        onKeydown: w
-      }, [
-        (c(!0), r(L, null, R(o.nodeTypes, (a, f) => (c(), r("button", {
-          key: a.name,
-          type: "button",
-          role: "option",
-          "aria-selected": v(a),
-          class: D([
-            "vizel-node-selector-option",
-            { "is-active": v(a) },
-            { "is-focused": f === t.value }
-          ]),
-          tabindex: f === t.value ? 0 : -1,
-          onClick: (x) => z(a),
-          onMouseenter: (x) => t.value = f
-        }, [
-          l("span", j, [
-            d(u, {
-              name: a.icon
-            }, null, 8, ["name"])
-          ]),
-          l("span", q, N(a.label), 1),
-          v(a) ? (c(), r("span", G, [
-            d(u, { name: "check" })
-          ])) : g("", !0)
-        ], 42, H))), 128))
-      ], 544)) : g("", !0)
+        _: 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 {
-  X as default
+  D as default
 };

package/dist/index15.js

@@ -1,37 +1,15 @@
-import { defineComponent as d, ref as p, onMounted as i, computed as o, createBlock as u, renderSlot as a, openBlock as c, Teleport as f, createElementVNode as m, normalizeStyle as y, normalizeClass as v } from "vue";
-import { getVizelPortalContainer as z, VIZEL_PORTAL_ID as _, VIZEL_PORTAL_Z_INDEX as I } from "@vizel/core";
-const V = ["data-vizel-portal-layer"], P = /* @__PURE__ */ d({
-  __name: "VizelPortal",
+import { defineComponent as s, createElementBlock as l, openBlock as n, normalizeClass as r } from "vue";
+const c = /* @__PURE__ */ s({
+  __name: "VizelBubbleMenuDivider",
   props: {
-    layer: { default: "dropdown" },
-    class: {},
-    disabled: { type: Boolean, default: !1 }
+    class: {}
   },
-  setup(e) {
-    const r = e, l = p(!1);
-    i(() => {
-      z(), l.value = !0;
-    });
-    const s = o(() => `#${_}`), n = o(() => ({
-      position: "absolute",
-      top: 0,
-      left: 0,
-      zIndex: I[r.layer]
-    }));
-    return (t, k) => l.value && !e.disabled ? (c(), u(f, {
-      key: 0,
-      to: s.value
-    }, [
-      m("div", {
-        "data-vizel-portal-layer": e.layer,
-        class: v(t.$props.class),
-        style: y(n.value)
-      }, [
-        a(t.$slots, "default")
-      ], 14, V)
-    ], 8, ["to"])) : a(t.$slots, "default", { key: 1 });
+  setup(o) {
+    return (e, a) => (n(), l("span", {
+      class: r(["vizel-bubble-menu-divider", e.$props.class])
+    }, null, 2));
   }
 });
 export {
-  P as default
+  c as default
 };

package/dist/index16.js

@@ -1,21 +1,191 @@
-import { defineComponent as s, provide as t, createElementBlock as a, openBlock as l, normalizeClass as n, renderSlot as p } from "vue";
-import { VIZEL_CONTEXT_KEY as i } from "./index23.js";
-const f = /* @__PURE__ */ s({
-  __name: "VizelProvider",
+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 "./index20.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: {
-    editor: {},
-    class: {}
+    colors: {},
+    value: {},
+    modelValue: {},
+    label: { default: "Color palette" },
+    class: {},
+    allowCustomColor: { type: Boolean, default: !0 },
+    recentColors: { default: () => [] },
+    showRecentColors: { type: Boolean, default: !0 },
+    noneValues: { default: () => ["transparent", "inherit"] }
   },
-  setup(o) {
-    const r = o;
-    return t(i, () => r.editor), (e, c) => (l(), a("div", {
-      class: n(e.$props.class),
-      "data-vizel-root": ""
+  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
     }, [
-      p(e.$slots, "default")
-    ], 2));
+      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 {
-  f as default
+  te as default
 };