@pantograph/vue 0.10.0 → 0.10.2

package/dist/ColorPicker.vue_vue_type_style_index_0_lang-CEz3bIJG.js

@@ -0,0 +1,541 @@
+import { onUnmounted as we, defineComponent as ue, onMounted as ae, onBeforeUnmount as ye, createElementBlock as D, openBlock as C, normalizeClass as T, unref as v, createElementVNode as E, ref as j, computed as R, watch as xe, reactive as Ce, createVNode as Q, createCommentVNode as Z, createBlock as Y, Fragment as Te, renderList as Ve } from "vue";
+import { _ as ke } from "./ActionButton.vue_vue_type_script_setup_true_lang-B8F78aq-.js";
+import { _ as ee } from "./Input.vue_vue_type_style_index_0_lang-CcR6oCIR.js";
+import { _ as Ee } from "./Icon.vue_vue_type_style_index_0_lang-BfPcw6PU.js";
+import { useVModel as te } from "@vueuse/core";
+import { b as P, g as Me, c as ne } from "./class-DziTeW9B.js";
+import { createContext as _e } from "radix-vue";
+function S(e, t, o) {
+  return Math.max(t, Math.min(e, o));
+}
+function Ae(e, t) {
+  if (typeof e == "string" || typeof t == "string")
+    return e === t;
+  if (e) {
+    if (!t) return !1;
+    for (const o in e)
+      if (e[o] !== t[o])
+        return !1;
+  }
+  return !0;
+}
+function F(e) {
+  const t = [], o = e.length > 5 ? 2 : 1;
+  for (let n = 1; n < e.length; n += o) {
+    const u = e.substring(n, n + o).repeat(o % 2 + 1), a = parseInt(u, 16);
+    t.push(n === 3 * o + 1 ? a / 255 : a);
+  }
+  return t.length === 3 && t.push(1), {
+    r: t[0],
+    g: t[1],
+    b: t[2],
+    a: t[3]
+  };
+}
+function ie(e) {
+  const t = e.l / 100, o = t + e.s / 100 * Math.min(t, 1 - t), n = o === 0 ? 0 : 200 * (1 - t / o);
+  return {
+    h: e.h,
+    s: n,
+    v: o * 100,
+    a: e.a
+  };
+}
+function O(e) {
+  let t = e.h % 360;
+  t < 0 && (t += 360);
+  const o = e.s / 100, n = e.l / 100;
+  return {
+    r: K(0, t, o, n) * 255,
+    g: K(8, t, o, n) * 255,
+    b: K(4, t, o, n) * 255,
+    a: e.a
+  };
+}
+function K(e, t, o, n) {
+  const u = (e + t / 30) % 12, a = o * Math.min(n, 1 - n);
+  return n - a * Math.max(-1, Math.min(u - 3, 9 - u, 1));
+}
+function ce(e) {
+  const t = e.s / 100, o = e.v / 100, n = o * (1 - t / 2);
+  return {
+    h: e.h,
+    s: n === 0 || n === 1 ? 0 : (o - n) / Math.min(n, 1 - n) * 100,
+    l: n * 100,
+    a: e.a
+  };
+}
+function fe(e) {
+  return {
+    h: e.h,
+    w: e.v * (100 - e.s) / 100,
+    b: 100 - e.v,
+    a: e.a
+  };
+}
+function N(e) {
+  return O(ce(e));
+}
+function k(e) {
+  const t = e.w / 100, o = e.b / 100;
+  let n, u;
+  const a = t + o;
+  return a >= 1 ? (n = 0, u = t / a) : (u = 1 - o, n = (1 - t / u) * 100), {
+    h: e.h,
+    s: n,
+    v: u * 100,
+    a: e.a
+  };
+}
+function W(e) {
+  const { r: t, g: o, b: n, a: u } = e, a = Math.min(t, o, n), m = Math.max(t, o, n), f = m - a, h = (m + a) / 2;
+  let p = 0;
+  f !== 0 && (m === t ? p = (o - n) / f + (o < n ? 6 : 0) : m === o ? p = (n - t) / f + 2 : m === n && (p = (t - o) / f + 4), p *= 60);
+  let b = 0;
+  return h !== 0 && h !== 255 && (b = (m - h) / Math.min(h, 255 - h)), {
+    h: p,
+    s: b * 100,
+    l: h / 255 * 100,
+    a: u
+  };
+}
+function $(e) {
+  return "#" + Object.values(e).map(
+    (t, o) => Math.round(o === 3 ? t * 255 : t).toString(16).padStart(2, "0")
+  ).join("");
+}
+function H(e) {
+  return fe(ie(W(e)));
+}
+const Ne = {
+  hex: {
+    hex: (e) => e,
+    hsl: (e) => W(F(e)),
+    hsv: (e) => k(H(F(e))),
+    hwb: (e) => H(F(e)),
+    rgb: F
+  },
+  hsl: {
+    hex: (e) => $(O(e)),
+    hsl: (e) => e,
+    hsv: ie,
+    hwb: (e) => H(O(e)),
+    rgb: O
+  },
+  hsv: {
+    hex: (e) => $(N(e)),
+    hsl: ce,
+    hsv: (e) => e,
+    hwb: fe,
+    rgb: N
+  },
+  hwb: {
+    hex: (e) => $(N(k(e))),
+    hsl: (e) => W(N(k(e))),
+    hsv: k,
+    hwb: (e) => e,
+    rgb: (e) => N(k(e))
+  },
+  rgb: {
+    hex: $,
+    hsl: W,
+    hsv: (e) => k(H(e)),
+    hwb: H,
+    rgb: (e) => e
+  }
+};
+function oe(e, t, o) {
+  return Ne[e][t](o);
+}
+function He(e, t) {
+  const o = e.toFixed(t);
+  return o.includes(".") ? o.replace(/\.?0+$/, "") : o;
+}
+const Pe = {
+  deg: 1,
+  grad: 0.9,
+  rad: 180 / Math.PI,
+  turn: 360
+}, B = {
+  from(e) {
+    return e.endsWith("%") ? M.from(e, { referenceValue: 1 }) : y.from(e, { min: 0, max: 1 });
+  },
+  to(e) {
+    return y.to(e);
+  }
+}, re = {
+  from(e) {
+    const t = e.match(/deg|g?rad|turn$/);
+    if (t === null)
+      return y.from(e);
+    const o = t[0];
+    return y.from(e.slice(0, -o.length)) * Pe[o];
+  },
+  to(e) {
+    return y.to(e);
+  }
+}, y = {
+  from(e, { min: t = Number.NEGATIVE_INFINITY, max: o = Number.POSITIVE_INFINITY } = {}) {
+    return e.endsWith(".") ? NaN : S(Number(e), t, o);
+  },
+  to(e) {
+    return He(e, 2);
+  }
+}, M = {
+  from(e, { referenceValue: t = 100, min: o = 0, max: n = 100 } = {}) {
+    return e.endsWith("%") ? y.from(e.slice(0, -1), { min: o, max: n }) * t / 100 : NaN;
+  },
+  to(e) {
+    return y.to(e) + "%";
+  }
+}, q = {
+  from(e) {
+    return e.endsWith("%") ? M.from(e, { referenceValue: 255 }) : y.from(e, { min: 0, max: 255 });
+  },
+  to(e) {
+    return y.to(e);
+  }
+}, Se = {
+  hsl: {
+    h: re,
+    s: M,
+    l: M
+  },
+  hwb: {
+    h: re,
+    w: M,
+    b: M
+  },
+  rgb: {
+    r: q,
+    g: q,
+    b: q
+  }
+};
+function U(e, t) {
+  return Se[e][t];
+}
+function G({ format: e, color: t }, o) {
+  if (e === "hex")
+    return o && [5, 9].includes(t.length) ? t.substring(0, t.length - (t.length - 1) / 4) : t;
+  const n = Object.entries(t).slice(0, o ? 3 : 4).map(([u, a]) => {
+    const m = u === "a" ? B : U(e, u);
+    return (u === "a" ? "/ " : "") + m.to(a);
+  });
+  return `${e}(${n.join(" ")})`;
+}
+function me(e) {
+  return /^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(e);
+}
+function Le(e) {
+  return "r" in e ? "rgb" : "w" in e ? "hwb" : "v" in e ? "hsv" : "s" in e ? "hsl" : null;
+}
+const se = {
+  hsl: ["h", "s", "l", "a"],
+  hwb: ["h", "w", "b", "a"],
+  rgb: ["r", "g", "b", "a"]
+};
+function le(e) {
+  if (!e) return null;
+  if (typeof e != "string") {
+    const f = Le(e);
+    return f === null ? null : { format: f, color: e };
+  }
+  if (e.startsWith("#"))
+    return me(e) ? { format: "hex", color: e } : null;
+  if (!e.includes("(")) {
+    const f = document.createElement("canvas").getContext("2d");
+    f.fillStyle = e;
+    const h = f.fillStyle;
+    return h === "#000000" && e !== "black" ? null : { format: "hex", color: h };
+  }
+  const [t, o] = e.split("("), n = t.substring(0, 3);
+  if (!(n in se))
+    return null;
+  const u = o.replace(/[,/)]/g, " ").replace(/\s+/g, " ").trim().split(" ");
+  u.length === 3 && u.push("1");
+  const a = se[n], m = Object.fromEntries(
+    a.map((f, h) => {
+      const p = f === "a" ? B : U(n, f);
+      return [f, p.from(u[h])];
+    })
+  );
+  return { format: n, color: m };
+}
+const Ie = typeof window < "u", he = Ie && "EyeDropper" in window, Re = (e) => {
+  const t = new AbortController();
+  we(() => t.abort());
+  async function o() {
+    if (!he) return;
+    const n = new window.EyeDropper();
+    try {
+      let a = (await n.open({ signal: t.signal })).sRGBHex;
+      if (a.startsWith("rgba")) {
+        const m = a.match(/rgba?\((?<r>\d+), (?<g>\d+), (?<b>\d+), (?<a>[\d.]+)\)/);
+        if (m) {
+          const [f, h, p, b, i] = m;
+          a = `rgba(${h}, ${p}, ${b}, ${parseFloat(i) === 0 ? "1" : i})`;
+        }
+      }
+      e(a);
+    } catch (u) {
+      console.log("e ===>", u);
+    }
+  }
+  return {
+    openEyeDropper: o,
+    abortController: t
+  };
+};
+function Fe(e, t, o) {
+  const n = e.getBoundingClientRect(), u = t - n.left, a = o - n.top;
+  return {
+    x: n.width === 0 ? 0 : S(u / n.width * 100, 0, 100),
+    y: n.height === 0 ? 0 : S((1 - a / n.height) * 100, 0, 100)
+  };
+}
+const $e = /* @__PURE__ */ ue({
+  __name: "ColorPickerSpace",
+  setup(e) {
+    const t = We();
+    let o = !1, n;
+    function u(i) {
+      n = document.body.style.userSelect, document.body.style.userSelect = "none", o = !0, f(i);
+    }
+    function a(i) {
+      o = !0, h(i);
+    }
+    function m() {
+      document.body.style.userSelect = n, o = !1;
+    }
+    function f(i) {
+      i.buttons !== 1 || !o || !(t.colorSpace.value instanceof HTMLElement) || p(t.colorSpace.value, i.clientX, i.clientY);
+    }
+    function h(i) {
+      if (!o || !(t.colorSpace.value instanceof HTMLElement))
+        return;
+      i.preventDefault();
+      const g = i.touches[0];
+      p(t.colorSpace.value, g.clientX, g.clientY);
+    }
+    function p(i, g, V) {
+      const x = Fe(i, g, V), c = { ...t.colors.hsv };
+      c.s = x.x, c.v = x.y, t.setColor("hsv", c);
+    }
+    function b(i) {
+      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(i.key))
+        return;
+      i.preventDefault();
+      const g = ["ArrowLeft", "ArrowDown"].includes(i.key) ? -1 : 1, V = ["ArrowLeft", "ArrowRight"].includes(i.key) ? "s" : "v", x = i.shiftKey ? 10 : 1, c = t.colors.hsv[V] + g * x, w = { ...t.colors.hsv };
+      w[V] = S(c, 0, 100), t.setColor("hsv", w);
+    }
+    return ae(() => {
+      document.addEventListener("mousemove", f, { passive: !1 }), document.addEventListener("touchmove", h, { passive: !1 }), document.addEventListener("mouseup", m), document.addEventListener("touchend", m);
+    }), ye(() => {
+      document.removeEventListener("mousemove", f), document.removeEventListener("touchmove", h), document.removeEventListener("mouseup", m), document.removeEventListener("touchend", m);
+    }), (i, g) => (C(), D("div", {
+      ref: v(t).colorSpace,
+      class: T([v(P)(v(_), "space")]),
+      onMousedown: u,
+      onTouchstart: a
+    }, [
+      E("button", {
+        ref: v(t).thumb,
+        class: T([v(P)(v(_), "thumb")]),
+        tabindex: "0",
+        "aria-label": "Color space thumb",
+        onKeydown: b
+      }, null, 34)
+    ], 34));
+  }
+}), De = ["value"], Oe = ["value"], [We, Be] = _e("ColorPicker"), _ = Me("color_picker"), Xe = /* @__PURE__ */ ue({
+  __name: "ColorPicker",
+  props: {
+    class: {},
+    color: {},
+    defaultColor: { default: "#ffffffff" },
+    format: {},
+    defaultFormat: { default: "hex" },
+    hideAlpha: { type: Boolean }
+  },
+  emits: ["update:color", "update:format", "change"],
+  setup(e, { emit: t }) {
+    const o = ["hex", "hsl", "hsv", "hwb", "rgb"], n = e, u = t, a = j(null), m = j(null), f = j(null), h = te(n, "format", u, {
+      defaultValue: n.defaultFormat,
+      passive: n.format === void 0
+    }), p = R(
+      () => h.value && o.includes(h.value) ? h.value : "hex"
+    ), b = te(n, "color", u, {
+      defaultValue: n.defaultColor,
+      passive: n.color === void 0
+    }), i = "#ffffffff", g = R(() => b.value ?? n.defaultColor ?? i);
+    xe(g, z);
+    const V = R(() => {
+      const l = p.value, r = c[l];
+      return l.split("").map((s) => {
+        const d = r[s];
+        return {
+          value: U(l, s).to(d),
+          channel: s,
+          label: s.toUpperCase()
+        };
+      }).concat(
+        n.hideAlpha ? [] : [
+          {
+            value: B.to(r.a),
+            channel: "a",
+            label: "Alpha"
+          }
+        ]
+      );
+    }), x = R({
+      get() {
+        return n.hideAlpha && [5, 9].includes(c.hex.length) ? c.hex.substring(0, c.hex.length - (c.hex.length - 1) / 4) : c.hex;
+      },
+      set(l) {
+        me(l) && w("hex", l);
+      }
+    }), c = Ce({
+      hex: i,
+      hsl: { h: 0, s: 0, l: 100, a: 1 },
+      hsv: { h: 0, s: 0, v: 100, a: 1 },
+      hwb: { h: 0, w: 100, b: 0, a: 1 },
+      rgb: { r: 255, g: 255, b: 255, a: 1 }
+    });
+    function w(l, r) {
+      let s = r;
+      if (n.hideAlpha)
+        if (typeof r != "string")
+          r.a = 1, s = r;
+        else if ([5, 9].includes(r.length)) {
+          const d = (r.length - 1) / 4;
+          s = r.substring(0, r.length - d) + "f".repeat(d);
+        } else [4, 7].includes(r.length) && (s = r + "f".repeat((r.length - 1) / 3));
+      if (!Ae(c[l], s)) {
+        c[l] = s;
+        for (const d of o)
+          d !== l && (c[d] = oe(l, d, s));
+        b.value = G(
+          { color: oe(l, p.value, s), format: p.value },
+          n.hideAlpha
+        ), u("change", ge());
+      }
+      a.value instanceof HTMLElement && m.value instanceof HTMLElement && f.value instanceof HTMLElement && ve(a.value, m.value, f.value);
+    }
+    function z(l) {
+      const r = le(l);
+      if (r !== null)
+        w(r.format, r.color);
+      else {
+        const s = le(i);
+        s !== null && w(s.format, s.color);
+      }
+    }
+    function de(l) {
+      h.value = l;
+    }
+    function X(l, r) {
+      const s = l.currentTarget, d = { ...c.hsv };
+      d[r] = Number(s.value), w("hsv", d);
+    }
+    function pe(l, r) {
+      const s = p.value, d = { ...c[s] }, I = (r === "a" ? B : U(s, r)).from(l);
+      Number.isNaN(l) || l === void 0 || (d[r] = I, w(s, d));
+    }
+    function ve(l, r, s) {
+      const d = G({ format: "hsl", color: c.hsl }, !0);
+      l.style.setProperty("--vacp-color", d), r.style.position = "relative", r.style.backgroundColor = `hsl(${c.hsl.h} 100% 50%)`, r.style.backgroundImage = "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)", s.style.boxSizing = "border-box", s.style.position = "absolute", s.style.left = `${c.hsv.s}%`, s.style.bottom = `${c.hsv.v}%`;
+    }
+    function ge() {
+      const l = G(
+        { color: c[p.value], format: p.value },
+        n.hideAlpha
+      );
+      return {
+        colors: c,
+        cssColor: l
+      };
+    }
+    function J(l) {
+      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(l.key) || !l.shiftKey)
+        return;
+      const r = l.currentTarget, s = Number(r.step), d = ["ArrowLeft", "ArrowDown"].includes(l.key) ? -1 : 1, A = Number(r.value) + d * s * 10, I = S(A, Number(r.min), Number(r.max));
+      r.value = String(I - d * s);
+    }
+    const { openEyeDropper: be } = Re(z);
+    ae(() => z(g.value)), Be({ colorSpace: m, thumb: f, colors: c, setColor: w });
+    const L = P(_, "slider");
+    return (l, r) => (C(), D("div", {
+      ref_key: "colorPicker",
+      ref: a,
+      class: T([v(_), n.class])
+    }, [
+      Q($e),
+      E("div", {
+        class: T(v(P)(v(_), "sliders"))
+      }, [
+        E("input", {
+          class: T([v(L), v(ne)(v(L), "hue")]),
+          value: c.hsv.h,
+          type: "range",
+          min: "0",
+          max: "360",
+          step: "1",
+          onKeydownPassive: J,
+          onInput: r[0] || (r[0] = (s) => X(s, "h"))
+        }, null, 42, De),
+        l.hideAlpha ? Z("", !0) : (C(), D("input", {
+          key: 0,
+          class: T([v(L), v(ne)(v(L), "alpha")]),
+          value: c.hsv.a,
+          type: "range",
+          min: "0",
+          max: "1",
+          step: "0.01",
+          onKeydownPassive: J,
+          onInput: r[1] || (r[1] = (s) => X(s, "a"))
+        }, null, 42, Oe))
+      ], 2),
+      E("div", {
+        class: T(v(P)(v(_), "inputs"))
+      }, [
+        E("button", {
+          disabled: !0,
+          class: "fake-select",
+          onClick: r[2] || (r[2] = (s) => de("rgb"))
+        }, [
+          r[4] || (r[4] = E("div", null, "Hex", -1)),
+          Q(Ee, {
+            icon: "tabler:chevron-down",
+            size: "2xsm",
+            class: "fake-select-icon"
+          })
+        ]),
+        p.value === "hex" ? (C(), Y(ee, {
+          key: 0,
+          class: "flex-1",
+          size: "sm",
+          modelValue: x.value,
+          "onUpdate:modelValue": r[3] || (r[3] = (s) => x.value = s)
+        }, null, 8, ["modelValue"])) : (C(!0), D(Te, { key: 1 }, Ve(V.value, ({ value: s, channel: d }) => (C(), Y(ee, {
+          modelValue: s,
+          "onUpdate:modelValue": (A) => pe(A, d),
+          size: "sm"
+        }, null, 8, ["modelValue", "onUpdate:modelValue"]))), 256)),
+        v(he) ? (C(), Y(ke, {
+          key: 2,
+          onClick: v(be),
+          icon: "tabler:color-picker",
+          size: "sm",
+          type: "outline",
+          variant: "icon"
+        }, null, 8, ["onClick"])) : Z("", !0)
+      ], 2)
+    ], 2));
+  }
+});
+export {
+  Xe as _,
+  We as i,
+  Be as p
+};

package/dist/ColorSwatch/ColorSwatch.d.ts

@@ -1,6 +1,6 @@
 import { GraphicalObjectProps } from '../GraphicalObject/GraphicalObject';
 import { ColorSwatchType, ColorSwatchSize } from './ColorSwatch.model';
-export type ColorSwatchProps = Omit<GraphicalObjectProps, 'as'> & {
+export type ColorSwatchProps = GraphicalObjectProps & {
     selected?: boolean;
     size?: ColorSwatchSize;
     type?: ColorSwatchType;
@@ -14,11 +14,18 @@ export interface ColorSwatchSlots {
         value?: string;
     }) => never;
 }
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<ColorSwatchProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ColorSwatchProps> & Readonly<{}>, {
+declare function __VLS_template(): {
+    slots: Readonly<ColorSwatchSlots> & ColorSwatchSlots;
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ColorSwatchProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ColorSwatchProps> & Readonly<{}>, {
     size: "sm" | "md";
-    type: "color" | "remover" | "custom-picker";
+    type: ColorSwatchType;
     customPickerIcon: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<ColorSwatchSlots> & ColorSwatchSlots>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/ColorSwatch/index.js.js

@@ -1,4 +1,4 @@
-import { _ as s, C as r, a as t, _ as e } from "../ColorSwatch.vue_vue_type_style_index_0_lang-Bf0glWPU.js";
+import { _ as s, C as r, a as t, _ as e } from "../ColorSwatch.vue_vue_type_style_index_0_lang-CL9dd69H.js";
 export {
   s as ColorSwatch,
   r as ColorSwatchSizes,

package/dist/ColorSwatch/index.umd.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ColorSwatch.vue_vue_type_style_index_0_lang-Dki5150Z.js");exports.ColorSwatch=e._sfc_main;exports.ColorSwatchSizes=e.ColorSwatchSizes;exports.ColorSwatchTypes=e.ColorSwatchTypes;exports.default=e._sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ColorSwatch.vue_vue_type_style_index_0_lang-BH-NSALx.js");exports.ColorSwatch=e._sfc_main;exports.ColorSwatchSizes=e.ColorSwatchSizes;exports.ColorSwatchTypes=e.ColorSwatchTypes;exports.default=e._sfc_main;

package/dist/ColorSwatch.vue_vue_type_style_index_0_lang-BH-NSALx.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),v=require("./GraphicalObject.vue_vue_type_script_setup_true_lang-CdO2zArd.js"),k=require("./options-B4iSAKol.js"),_=require("./omit-BKPbELUG.js"),r=require("./class-CjZYGZDW.js"),C=require("class-variance-authority"),h=require("./IconButton.vue_vue_type_script_setup_true_lang-c16Xu6mm.js"),c=["sm","md"],l=["color","remover","custom-picker"],z={key:1,height:"100%",width:"100%",viewBox:"0 0 19 18",fill:"none"},f=e.defineComponent({...k.getComponentOptions("ColorTrigger"),__name:"ColorSwatch",props:{class:{},icon:{},fg:{},bg:{},br:{},size:{default:"md"},selected:{type:Boolean},type:{default:"color"},customPickerIcon:{default:"tabler:palette"}},setup(p){const o=p,s=r.getBemBlock("color_swatch"),u=C.cva(s,{variants:{selected:r.generateVariantClassList("selected",s),size:r.generateVariantClassList(c,s),type:r.generateVariantClassList(l,s)}}),n=e.computed(()=>o.size&&c.includes(o.size)?o.size:"md"),m=e.computed(()=>({size:n.value,..._.omit(o,"size","class","type","selected")})),d=e.useSlots(),y=e.computed(()=>{switch(o.type){case"color":return"div";case"custom-picker":return h._sfc_main;case"remover":return"div"}}),g=e.computed(()=>{const t={};return o.type==="custom-picker"&&(t.size=n.value,t.icon=o.customPickerIcon,t.color="gray",t.type="outline"),t});return(t,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(y.value),e.mergeProps({class:[e.unref(u)({selected:t.type!=="custom-picker"&&o.selected,size:t.size,type:t.type}),o.class]},g.value),{icon:e.withCtx(()=>[e.renderSlot(t.$slots,"icon",e.normalizeProps(e.guardReactiveProps(o)))]),default:e.withCtx(()=>[t.type==="color"?(e.openBlock(),e.createBlock(v._sfc_main,e.normalizeProps(e.mergeProps({key:0},m.value)),e.createSlots({_:2},[e.renderList(Object.keys(d),a=>({name:a,fn:e.withCtx(()=>[e.renderSlot(t.$slots,a,e.normalizeProps(e.guardReactiveProps(o)))])}))]),1040)):t.type==="remover"?(e.openBlock(),e.createElementBlock("svg",z,i[0]||(i[0]=[e.createElementVNode("path",{id:"Empty Indicator",d:"M17.5 1L1.5 17",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"},null,-1)]))):e.createCommentVNode("",!0),t.type==="custom-picker"?e.renderSlot(t.$slots,"default",e.normalizeProps(e.mergeProps({key:2},o))):e.createCommentVNode("",!0)]),_:3},16,["class"]))}});exports.ColorSwatchSizes=c;exports.ColorSwatchTypes=l;exports._sfc_main=f;

package/dist/ColorSwatch.vue_vue_type_style_index_0_lang-CL9dd69H.js

@@ -0,0 +1,100 @@
+import { defineComponent as B, computed as s, useSlots as S, createBlock as d, openBlock as c, resolveDynamicComponent as _, mergeProps as n, unref as P, withCtx as i, createElementBlock as b, createCommentVNode as f, renderSlot as a, normalizeProps as r, createSlots as $, renderList as E, guardReactiveProps as y, createElementVNode as I } from "vue";
+import { _ as L } from "./GraphicalObject.vue_vue_type_script_setup_true_lang-BEZ6FkRf.js";
+import { g as V } from "./options-JBqnVZUl.js";
+import { o as N } from "./omit-BEkBWXra.js";
+import { g as O, a as l } from "./class-DziTeW9B.js";
+import { cva as T } from "class-variance-authority";
+import { _ as j } from "./IconButton.vue_vue_type_script_setup_true_lang-CchpvdkX.js";
+const g = ["sm", "md"], D = ["color", "remover", "custom-picker"], M = {
+  key: 1,
+  height: "100%",
+  width: "100%",
+  viewBox: "0 0 19 18",
+  fill: "none"
+}, K = /* @__PURE__ */ B({
+  ...V("ColorTrigger"),
+  __name: "ColorSwatch",
+  props: {
+    class: {},
+    icon: {},
+    fg: {},
+    bg: {},
+    br: {},
+    size: { default: "md" },
+    selected: { type: Boolean },
+    type: { default: "color" },
+    customPickerIcon: { default: "tabler:palette" }
+  },
+  setup(k) {
+    const o = k, t = O("color_swatch"), v = T(t, {
+      variants: {
+        selected: l("selected", t),
+        size: l(g, t),
+        type: l(D, t)
+      }
+    }), m = s(
+      () => o.size && g.includes(o.size) ? o.size : "md"
+    ), z = s(() => ({
+      size: m.value,
+      ...N(
+        o,
+        "size",
+        "class",
+        "type",
+        "selected"
+        /*'fg', 'bg', 'br'*/
+      )
+    })), C = S(), h = s(() => {
+      switch (o.type) {
+        case "color":
+          return "div";
+        case "custom-picker":
+          return j;
+        case "remover":
+          return "div";
+      }
+    }), w = s(() => {
+      const e = {};
+      return o.type === "custom-picker" && (e.size = m.value, e.icon = o.customPickerIcon, e.color = "gray", e.type = "outline"), e;
+    });
+    return (e, p) => (c(), d(_(h.value), n({
+      class: [
+        P(v)({
+          selected: e.type !== "custom-picker" && o.selected,
+          size: e.size,
+          type: e.type
+        }),
+        o.class
+      ]
+    }, w.value), {
+      icon: i(() => [
+        a(e.$slots, "icon", r(y(o)))
+      ]),
+      default: i(() => [
+        e.type === "color" ? (c(), d(L, r(n({ key: 0 }, z.value)), $({ _: 2 }, [
+          E(Object.keys(C), (u) => ({
+            name: u,
+            fn: i(() => [
+              a(e.$slots, u, r(y(o)))
+            ])
+          }))
+        ]), 1040)) : e.type === "remover" ? (c(), b("svg", M, p[0] || (p[0] = [
+          I("path", {
+            id: "Empty Indicator",
+            d: "M17.5 1L1.5 17",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round"
+          }, null, -1)
+        ]))) : f("", !0),
+        e.type === "custom-picker" ? a(e.$slots, "default", r(n({ key: 2 }, o))) : f("", !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+});
+export {
+  g as C,
+  K as _,
+  D as a
+};