@pantograph/vue 0.25.8 → 0.27.0

package/dist/ColorSwatch/ColorSwatch.d.ts

@@ -2,6 +2,7 @@ import { GraphicalObjectProps } from '../GraphicalObject/GraphicalObject';
 import { ColorSwatchType, ColorSwatchSize } from './ColorSwatch.model';
 export type ColorSwatchProps = GraphicalObjectProps & {
     selected?: boolean;
+    disabled?: boolean;
     size?: ColorSwatchSize;
     type?: ColorSwatchType;
     customPickerIcon?: string;
@@ -23,6 +24,7 @@ declare function __VLS_template(): {
 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";
+    disabled: boolean;
     type: ColorSwatchType;
     customPickerIcon: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/ColorSwatch/index.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-C4Kg1zF7.js";
+import { _ as s, C as r, a as t, _ as e } from "../ColorSwatch.vue_vue_type_script_setup_true_lang-ChPF6zW_.js";
 export {
   s as ColorSwatch,
   r as ColorSwatchSizes,

package/dist/ColorSwatch/index.umd.cjs

@@ -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-DcE8KBJ4.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_script_setup_true_lang-BOMHgBU8.js");exports.ColorSwatch=e._sfc_main;exports.ColorSwatchSizes=e.ColorSwatchSizes;exports.ColorSwatchTypes=e.ColorSwatchTypes;exports.default=e._sfc_main;

package/dist/ColorSwatch-DTpfqDKv.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ColorSwatch.vue_vue_type_script_setup_true_lang-BOMHgBU8.js");exports.default=e._sfc_main;

package/dist/ColorSwatch-DWwR0ENY.js

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

package/dist/ColorSwatch.vue_vue_type_script_setup_true_lang-BOMHgBU8.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),v=require("./GraphicalObject.vue_vue_type_script_setup_true_lang-okC2eyl7.js"),k=require("./options-CY2uxp5A.js"),g=require("./Icon.vue_vue_type_script_setup_true_lang-CXwAf04H.js"),C=require("es-toolkit");require("reka-ui");require("@vueuse/core");require("@tanstack/vue-virtual");const s=require("@pantograph/utils"),f=require("class-variance-authority"),h=require("./IconButton.vue_vue_type_script_setup_true_lang-DnxEc7O6.js"),z=require("@pantograph/style/color_swatch.css?raw"),c=["sm","md"],l=["color","remover","custom-picker"],w={key:1,height:"100%",width:"100%",viewBox:"0 0 19 18",fill:"none"},S=e.defineComponent({...k.getComponentOptions("ColorSwatch"),__name:"ColorSwatch",props:{class:{},icon:{},flipOnDir:{},fg:{},bg:{},br:{},size:{default:"md"},selected:{type:Boolean},disabled:{type:Boolean,default:void 0},type:{default:"color"},customPickerIcon:{default:"tabler:palette"}},setup(u){g.useComponentStyle("color_swatch",z);const o=u,r=s.getBemBlock("color_swatch"),p=f.cva(r,{variants:{selected:s.generateVariantClassList("selected",r),size:s.generateVariantClassList(c,r),type:s.generateVariantClassList(l,r)}}),n=e.computed(()=>o.size&&c.includes(o.size)?o.size:"md"),m=e.computed(()=>({size:n.value,...C.omit(o,["size","class","type","selected","customPickerIcon"])})),d=e.useSlots(),y=e.computed(()=>{switch(o.type){case"remover":case"color":return"div";case"custom-picker":return h._sfc_main}}),_=e.computed(()=>{const t={disabled:o.disabled};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(s.normCls)(e.unref(p)({selected:t.type!=="custom-picker"&&o.selected,size:t.size,type:t.type}),o.class)},_.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",w,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=S;

package/dist/{ColorSwatch.vue_vue_type_style_index_0_lang-C4Kg1zF7.js → ColorSwatch.vue_vue_type_script_setup_true_lang-ChPF6zW_.js}

@@ -1,17 +1,22 @@
-import { defineComponent as B, computed as s, useSlots as P, createBlock as d, openBlock as c, resolveDynamicComponent as _, mergeProps as n, unref as f, withCtx as i, createElementBlock as b, createCommentVNode as y, renderSlot as a, normalizeProps as r, createSlots as $, renderList as I, guardReactiveProps as k, createElementVNode as E } from "vue";
-import { _ as L } from "./GraphicalObject.vue_vue_type_script_setup_true_lang-CpstWkLR.js";
-import { g as O } from "./options-Bh1s18jm.js";
-import { omit as V } from "es-toolkit";
-import { getBemBlock as D, generateVariantClassList as l, normCls as N } from "@pantograph/utils";
+import { defineComponent as B, computed as s, useSlots as b, createBlock as u, openBlock as c, resolveDynamicComponent as _, mergeProps as i, unref as f, withCtx as n, createElementBlock as P, createCommentVNode as y, renderSlot as a, normalizeProps as r, createSlots as $, renderList as I, guardReactiveProps as k, createElementVNode as E } from "vue";
+import { _ as L } from "./GraphicalObject.vue_vue_type_script_setup_true_lang-D0_HCJjo.js";
+import { a as O } from "./options-J8HfRMSU.js";
+import { u as V } from "./Icon.vue_vue_type_script_setup_true_lang-X8iOewkh.js";
+import { omit as D } from "es-toolkit";
+import "reka-ui";
+import "@vueuse/core";
+import "@tanstack/vue-virtual";
+import { getBemBlock as N, generateVariantClassList as l, normCls as T } from "@pantograph/utils";
 import { cva as j } from "class-variance-authority";
-import { _ as M } from "./IconButton.vue_vue_type_script_setup_true_lang-CudH1Czj.js";
-const v = ["sm", "md"], R = ["color", "remover", "custom-picker"], T = {
+import { _ as M } from "./IconButton.vue_vue_type_script_setup_true_lang-ByYlU8Jk.js";
+import R from "@pantograph/style/color_swatch.css?raw";
+const v = ["sm", "md"], q = ["color", "remover", "custom-picker"], A = {
   key: 1,
   height: "100%",
   width: "100%",
   viewBox: "0 0 19 18",
   fill: "none"
-}, Q = /* @__PURE__ */ B({
+}, ee = /* @__PURE__ */ B({
   ...O("ColorSwatch"),
   __name: "ColorSwatch",
   props: {
@@ -23,21 +28,23 @@ const v = ["sm", "md"], R = ["color", "remover", "custom-picker"], T = {
     br: {},
     size: { default: "md" },
     selected: { type: Boolean },
+    disabled: { type: Boolean, default: void 0 },
     type: { default: "color" },
     customPickerIcon: { default: "tabler:palette" }
   },
-  setup(g) {
-    const o = g, t = D("color_swatch"), C = j(t, {
+  setup(C) {
+    V("color_swatch", R);
+    const o = C, t = N("color_swatch"), g = j(t, {
       variants: {
         selected: l("selected", t),
         size: l(v, t),
-        type: l(R, t)
+        type: l(q, t)
       }
     }), m = s(
       () => o.size && v.includes(o.size) ? o.size : "md"
-    ), z = s(() => ({
+    ), h = s(() => ({
       size: m.value,
-      ...V(o, [
+      ...D(o, [
         "size",
         "class",
         "type",
@@ -45,7 +52,7 @@ const v = ["sm", "md"], R = ["color", "remover", "custom-picker"], T = {
         "customPickerIcon"
         /*'fg', 'bg', 'br'*/
       ])
-    })), h = P(), w = s(() => {
+    })), z = b(), w = s(() => {
       switch (o.type) {
         case "remover":
         case "color":
@@ -54,12 +61,14 @@ const v = ["sm", "md"], R = ["color", "remover", "custom-picker"], T = {
           return M;
       }
     }), S = s(() => {
-      const e = {};
+      const e = {
+        disabled: o.disabled
+      };
       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(_(w.value), n({
-      class: f(N)(
-        f(C)({
+    return (e, p) => (c(), u(_(w.value), i({
+      class: f(T)(
+        f(g)({
           selected: e.type !== "custom-picker" && o.selected,
           size: e.size,
           type: e.type
@@ -67,18 +76,18 @@ const v = ["sm", "md"], R = ["color", "remover", "custom-picker"], T = {
         o.class
       )
     }, S.value), {
-      icon: i(() => [
+      icon: n(() => [
         a(e.$slots, "icon", r(k(o)))
       ]),
-      default: i(() => [
-        e.type === "color" ? (c(), d(L, r(n({ key: 0 }, z.value)), $({ _: 2 }, [
-          I(Object.keys(h), (u) => ({
-            name: u,
-            fn: i(() => [
-              a(e.$slots, u, r(k(o)))
+      default: n(() => [
+        e.type === "color" ? (c(), u(L, r(i({ key: 0 }, h.value)), $({ _: 2 }, [
+          I(Object.keys(z), (d) => ({
+            name: d,
+            fn: n(() => [
+              a(e.$slots, d, r(k(o)))
             ])
           }))
-        ]), 1040)) : e.type === "remover" ? (c(), b("svg", T, p[0] || (p[0] = [
+        ]), 1040)) : e.type === "remover" ? (c(), P("svg", A, p[0] || (p[0] = [
           E("path", {
             id: "Empty Indicator",
             d: "M17.5 1L1.5 17",
@@ -87,7 +96,7 @@ const v = ["sm", "md"], R = ["color", "remover", "custom-picker"], T = {
             "stroke-linecap": "round"
           }, null, -1)
         ]))) : y("", !0),
-        e.type === "custom-picker" ? a(e.$slots, "default", r(n({ key: 2 }, o))) : y("", !0)
+        e.type === "custom-picker" ? a(e.$slots, "default", r(i({ key: 2 }, o))) : y("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
@@ -95,6 +104,6 @@ const v = ["sm", "md"], R = ["color", "remover", "custom-picker"], T = {
 });
 export {
   v as C,
-  Q as _,
-  R as a
+  ee as _,
+  q as a
 };

package/dist/ColorSwatchGroup/ColorSwatchGroup.d.ts

@@ -1,5 +1,5 @@
 import { ColorSwatchProps, ColorSwatchSlots } from '../ColorSwatch/ColorSwatch';
-import { ColorSwatchSize } from '../ColorSwatch/ColorSwatch.model';
+import { ColorSwatchSize } from '../ColorSwatch';
 import { VisibleColorFormat } from '../ColorPicker/types';
 import { PopoverProps } from '../Popover';
 import { ColorPickerProps } from '../ColorPicker';
@@ -17,6 +17,7 @@ export type ColorSwatchGroupProps = Omit<ColorPickerProps, 'class' | 'color' | '
     modelValue?: string;
     headerCls?: string;
     header?: string;
+    disabled?: boolean;
     colorsCls?: string;
     defaultValue?: string;
     colors?: ColorSwatchItem[];
@@ -51,6 +52,7 @@ declare const __VLS_component: import('vue').DefineComponent<ColorSwatchGroupPro
     "onUpdate:format"?: ((value: VisibleColorFormat) => any) | undefined;
 }>, {
     size: "sm" | "md";
+    disabled: boolean;
     colorMode: ColorMode | {
         fg?: ColorMode;
         bg?: ColorMode;

package/dist/ColorSwatchGroup/index.js

@@ -1,4 +1,4 @@
-import { _ as r, _ as t } from "../ColorSwatchGroup.vue_vue_type_style_index_0_lang-baZQlRfW.js";
+import { _ as r, _ as t } from "../ColorSwatchGroup.vue_vue_type_script_setup_true_lang-BY1ynbN8.js";
 export {
   r as ColorSwatchGroup,
   t as default

package/dist/ColorSwatchGroup/index.umd.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ColorSwatchGroup.vue_vue_type_style_index_0_lang-DcQU4Avw.js");exports.ColorSwatchGroup=e._sfc_main;exports.default=e._sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ColorSwatchGroup.vue_vue_type_script_setup_true_lang-CIUtgzTs.js");exports.ColorSwatchGroup=e._sfc_main;exports.default=e._sfc_main;

package/dist/ColorSwatchGroup.vue_vue_type_script_setup_true_lang-BY1ynbN8.js

@@ -0,0 +1,176 @@
+import { defineComponent as T, useSlots as q, ref as H, computed as d, createElementBlock as v, openBlock as i, normalizeClass as b, unref as s, createCommentVNode as g, createElementVNode as J, renderSlot as C, createTextVNode as K, toDisplayString as Q, createBlock as k, Fragment as W, renderList as y, mergeProps as c, createSlots as B, withCtx as m, createVNode as S, normalizeProps as X, guardReactiveProps as Y } from "vue";
+import { a as Z } from "./options-J8HfRMSU.js";
+import { u as x, v as h } from "./Icon.vue_vue_type_script_setup_true_lang-X8iOewkh.js";
+import { u as ee } from "./useInputDataStates-Db6zJZ1T.js";
+import { useEmitAsProps as oe } from "reka-ui";
+import "@vueuse/core";
+import { u as te } from "./useVmodel-DlyNieM5.js";
+import "@tanstack/vue-virtual";
+import { C as re, _ as M } from "./ColorSwatch.vue_vue_type_script_setup_true_lang-ChPF6zW_.js";
+import { isString as j, pick as w, omit as se } from "es-toolkit";
+import { getBemBlock as le, generateVariantClassList as ae, normCls as z, getBemElement as _ } from "@pantograph/utils";
+import { cva as ne } from "class-variance-authority";
+import { _ as ie } from "./Popover.vue_vue_type_script_setup_true_lang-1pdG_U1y.js";
+import { _ as ue } from "./ColorPicker.vue_vue_type_script_setup_true_lang-CKpEjVT4.js";
+import de from "@pantograph/style/color_swatch_group.css?raw";
+const $e = /* @__PURE__ */ T({
+  ...Z("ColorSwatchGroup"),
+  __name: "ColorSwatchGroup",
+  props: {
+    format: {},
+    defaultFormat: {},
+    hideAlpha: { type: Boolean },
+    size: { default: "md" },
+    customPickerIcon: {},
+    icon: {},
+    class: {},
+    noRemover: { type: Boolean },
+    noCustomPicker: { type: Boolean },
+    modelValue: {},
+    headerCls: {},
+    header: {},
+    disabled: { type: Boolean, default: void 0 },
+    colorsCls: {},
+    defaultValue: {},
+    colors: {},
+    colorMode: { default: "bold" },
+    popoverProps: {}
+  },
+  emits: ["update:format", "update:modelValue"],
+  setup(I, { emit: A }) {
+    x("color_swatch_group", de);
+    const o = I, E = q(), P = A, { getDisabled: n } = ee(), l = te(
+      o,
+      "modelValue",
+      P,
+      {
+        defaultValue: o.defaultValue,
+        passive: o.modelValue === void 0
+      }
+    ), F = (e) => {
+      if (j(e))
+        return {
+          selected: l.value === e,
+          icon: o.icon,
+          bg: e
+        };
+      if (h(e))
+        return {
+          ...se(e, ["value"]),
+          icon: e.icon ?? o.icon,
+          selected: l.value === e.value
+        };
+    }, u = le("color_swatch_group"), N = ne(u, {
+      variants: {
+        size: ae(re, u)
+      }
+    }), V = H(!1), p = (e) => h(e) ? e.value : e ?? void 0, $ = (e) => {
+      if (!n.value) {
+        const t = p(e);
+        l.value = t, V.value = !t;
+      }
+    }, f = d(() => {
+      if (o.colors) return o.colors;
+      const e = ["red", "orange", "yellow", "lime", "green", "sky", "blue", "violet"];
+      return o.colorMode === "subtle" ? e.map((t) => `${t}-subtle`) : typeof o.colorMode == "object" && o.colorMode.value && (o.colorMode.bg || o.colorMode.br || o.colorMode.fg) ? e.map((t) => {
+        const r = {
+          value: typeof o.colorMode == "object" && o.colorMode.value === "subtle" ? `${t}-subtle` : t
+        };
+        return typeof o.colorMode == "object" && o.colorMode.bg && (r.bg = o.colorMode.bg === "subtle" ? `${t}-subtle` : t), typeof o.colorMode == "object" && o.colorMode.br && (r.br = o.colorMode.br === "subtle" ? `${t}-subtle` : t), typeof o.colorMode == "object" && o.colorMode.fg && (r.fg = o.colorMode.fg === "subtle" ? `${t}-subtle` : t), r;
+      }) : e;
+    }), U = d(() => {
+      var e;
+      if (!((e = f.value) != null && e.length && f.value.some(
+        (t) => j(t) && t === l.value || h(t) && l.value === t.value
+      )))
+        return l.value;
+    }), D = (e) => {
+      e && (l.value = e);
+    }, O = oe(P), R = d(() => ({
+      ...w(O, ["onUpdate:format"]),
+      ...w(o, ["format", "defaultFormat", "hideAlpha"])
+    })), G = d(() => {
+      const { open: e, "onUpdate:open": t, ...r } = o.popoverProps || {};
+      return {
+        open: n.value ? !1 : e,
+        "onUpdate:open": (a) => {
+          n.value || t == null || t(a);
+        },
+        ...r
+      };
+    });
+    return (e, t) => (i(), v("div", {
+      class: b(s(z)(o.class, s(N)({ size: e.size })))
+    }, [
+      E.header || e.header ? (i(), v("div", {
+        key: 0,
+        class: b(s(z)(s(_)(s(u), "header"), e.headerCls))
+      }, [
+        C(e.$slots, "header", {}, () => [
+          K(Q(e.header), 1)
+        ])
+      ], 2)) : g("", !0),
+      J("div", {
+        class: b(s(z)(s(_)(s(u), "colors"), e.colorsCls))
+      }, [
+        e.noRemover ? g("", !0) : (i(), k(M, {
+          key: 0,
+          type: "remover",
+          size: e.size,
+          disabled: s(n),
+          onClick: t[0] || (t[0] = (r) => $()),
+          selected: !s(l) && V.value
+        }, null, 8, ["size", "disabled", "selected"])),
+        (i(!0), v(W, null, y(f.value, (r) => (i(), k(M, c({
+          type: "color",
+          size: e.size,
+          icon: e.icon,
+          disabled: s(n),
+          ref_for: !0
+        }, F(r), {
+          key: p(r),
+          onClick: (a) => $(r)
+        }), B({ _: 2 }, [
+          y(Object.keys(e.$slots), (a) => ({
+            name: a,
+            fn: m((L) => [
+              C(e.$slots, a, c({ ref_for: !0 }, { ...L, value: p(r) }))
+            ])
+          }))
+        ]), 1040, ["size", "icon", "disabled", "onClick"]))), 128)),
+        e.noCustomPicker ? g("", !0) : (i(), k(ie, c({
+          key: 1,
+          "reverse-placement-on-dir": "rtl",
+          placement: "right-start",
+          "side-offset": 4
+        }, G.value), {
+          content: m(() => [
+            S(ue, c({
+              defaultColor: U.value,
+              "onUpdate:color": D
+            }, R.value), null, 16, ["defaultColor"])
+          ]),
+          default: m(() => [
+            S(M, {
+              type: "custom-picker",
+              size: e.size,
+              customPickerIcon: e.customPickerIcon,
+              disabled: s(n)
+            }, B({ _: 2 }, [
+              y(Object.keys(e.$slots), (r) => ({
+                name: r,
+                fn: m((a) => [
+                  C(e.$slots, r, X(Y(a)))
+                ])
+              }))
+            ]), 1032, ["size", "customPickerIcon", "disabled"])
+          ]),
+          _: 3
+        }, 16))
+      ], 2)
+    ], 2));
+  }
+});
+export {
+  $e as _
+};

package/dist/ColorSwatchGroup.vue_vue_type_script_setup_true_lang-CIUtgzTs.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),q=require("./options-CY2uxp5A.js"),d=require("./Icon.vue_vue_type_script_setup_true_lang-CXwAf04H.js"),$=require("./useInputDataStates-B2KtpFr0.js"),j=require("reka-ui");require("@vueuse/core");const w=require("./useVmodel-BU5qtyne.js");require("@tanstack/vue-virtual");const p=require("./ColorSwatch.vue_vue_type_script_setup_true_lang-BOMHgBU8.js"),i=require("es-toolkit"),a=require("@pantograph/utils"),I=require("class-variance-authority"),E=require("./Popover.vue_vue_type_script_setup_true_lang-DZu6h5sn.js"),N=require("./ColorPicker.vue_vue_type_script_setup_true_lang-7MtJ5jis.js"),A=require("@pantograph/style/color_swatch_group.css?raw"),O=e.defineComponent({...q.getComponentOptions("ColorSwatchGroup"),__name:"ColorSwatchGroup",props:{format:{},defaultFormat:{},hideAlpha:{type:Boolean},size:{default:"md"},customPickerIcon:{},icon:{},class:{},noRemover:{type:Boolean},noCustomPicker:{type:Boolean},modelValue:{},headerCls:{},header:{},disabled:{type:Boolean,default:void 0},colorsCls:{},defaultValue:{},colors:{},colorMode:{default:"bold"},popoverProps:{}},emits:["update:format","update:modelValue"],setup(C,{emit:_}){d.useComponentStyle("color_swatch_group",A);const t=C,k=e.useSlots(),v=_,{getDisabled:u}=$.useFormInput(),l=w.useVModel(t,"modelValue",v,{defaultValue:t.defaultValue,passive:t.modelValue===void 0}),y=o=>{if(i.isString(o))return{selected:l.value===o,icon:t.icon,bg:o};if(d.isObject(o))return{...i.omit(o,["value"]),icon:o.icon??t.icon,selected:l.value===o.value}},c=a.getBemBlock("color_swatch_group"),h=I.cva(c,{variants:{size:a.generateVariantClassList(p.ColorSwatchSizes,c)}}),b=e.ref(!1),m=o=>d.isObject(o)?o.value:o??void 0,g=o=>{if(!u.value){const r=m(o);l.value=r,b.value=!r}},f=e.computed(()=>{if(t.colors)return t.colors;const o=["red","orange","yellow","lime","green","sky","blue","violet"];return t.colorMode==="subtle"?o.map(r=>`${r}-subtle`):typeof t.colorMode=="object"&&t.colorMode.value&&(t.colorMode.bg||t.colorMode.br||t.colorMode.fg)?o.map(r=>{const s={value:typeof t.colorMode=="object"&&t.colorMode.value==="subtle"?`${r}-subtle`:r};return typeof t.colorMode=="object"&&t.colorMode.bg&&(s.bg=t.colorMode.bg==="subtle"?`${r}-subtle`:r),typeof t.colorMode=="object"&&t.colorMode.br&&(s.br=t.colorMode.br==="subtle"?`${r}-subtle`:r),typeof t.colorMode=="object"&&t.colorMode.fg&&(s.fg=t.colorMode.fg==="subtle"?`${r}-subtle`:r),s}):o}),B=e.computed(()=>{var o;if(!((o=f.value)!=null&&o.length&&f.value.some(r=>i.isString(r)&&r===l.value||d.isObject(r)&&l.value===r.value)))return l.value}),P=o=>{o&&(l.value=o)},V=j.useEmitAsProps(v),M=e.computed(()=>({...i.pick(V,["onUpdate:format"]),...i.pick(t,["format","defaultFormat","hideAlpha"])})),z=e.computed(()=>{const{open:o,"onUpdate:open":r,...s}=t.popoverProps||{};return{open:u.value?!1:o,"onUpdate:open":n=>{u.value||r==null||r(n)},...s}});return(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(a.normCls)(t.class,e.unref(h)({size:o.size})))},[k.header||o.header?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(a.normCls)(e.unref(a.getBemElement)(e.unref(c),"header"),o.headerCls))},[e.renderSlot(o.$slots,"header",{},()=>[e.createTextVNode(e.toDisplayString(o.header),1)])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(a.normCls)(e.unref(a.getBemElement)(e.unref(c),"colors"),o.colorsCls))},[o.noRemover?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(p._sfc_main,{key:0,type:"remover",size:o.size,disabled:e.unref(u),onClick:r[0]||(r[0]=s=>g()),selected:!e.unref(l)&&b.value},null,8,["size","disabled","selected"])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,s=>(e.openBlock(),e.createBlock(p._sfc_main,e.mergeProps({type:"color",size:o.size,icon:o.icon,disabled:e.unref(u),ref_for:!0},y(s),{key:m(s),onClick:n=>g(s)}),e.createSlots({_:2},[e.renderList(Object.keys(o.$slots),n=>({name:n,fn:e.withCtx(S=>[e.renderSlot(o.$slots,n,e.mergeProps({ref_for:!0},{...S,value:m(s)}))])}))]),1040,["size","icon","disabled","onClick"]))),128)),o.noCustomPicker?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(E._sfc_main,e.mergeProps({key:1,"reverse-placement-on-dir":"rtl",placement:"right-start","side-offset":4},z.value),{content:e.withCtx(()=>[e.createVNode(N._sfc_main,e.mergeProps({defaultColor:B.value,"onUpdate:color":P},M.value),null,16,["defaultColor"])]),default:e.withCtx(()=>[e.createVNode(p._sfc_main,{type:"custom-picker",size:o.size,customPickerIcon:o.customPickerIcon,disabled:e.unref(u)},e.createSlots({_:2},[e.renderList(Object.keys(o.$slots),s=>({name:s,fn:e.withCtx(n=>[e.renderSlot(o.$slots,s,e.normalizeProps(e.guardReactiveProps(n)))])}))]),1032,["size","customPickerIcon","disabled"])]),_:3},16))],2)],2))}});exports._sfc_main=O;

package/dist/ColorTrigger/ColorTrigger.d.ts

@@ -20,6 +20,7 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<ColorTriggerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ColorTriggerProps> & Readonly<{}>, {
     size: ColorTriggerSize;
+    disabled: boolean;
     suffixIcon: boolean | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/ColorTrigger/index.js

@@ -1,4 +1,4 @@
-import { _ as e, C as a, _ as g } from "../ColorTrigger.vue_vue_type_style_index_0_lang-D7z5WQlE.js";
+import { _ as e, C as a, _ as g } from "../ColorTrigger.vue_vue_type_script_setup_true_lang-D8K8ECOf.js";
 export {
   e as ColorTrigger,
   a as ColorTriggerSizes,

package/dist/ColorTrigger/index.umd.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ColorTrigger.vue_vue_type_style_index_0_lang-9NjMxcKG.js");exports.ColorTrigger=e._sfc_main;exports.ColorTriggerSizes=e.ColorTriggerSizes;exports.default=e._sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ColorTrigger.vue_vue_type_script_setup_true_lang-DZlk0Qqv.js");exports.ColorTrigger=e._sfc_main;exports.ColorTriggerSizes=e.ColorTriggerSizes;exports.default=e._sfc_main;

package/dist/ColorTrigger.vue_vue_type_script_setup_true_lang-D8K8ECOf.js

@@ -0,0 +1,94 @@
+import { defineComponent as B, computed as n, useSlots as I, useAttrs as _, createElementBlock as y, openBlock as l, mergeProps as k, unref as o, createVNode as h, createBlock as w, createCommentVNode as O, normalizeProps as m, guardReactiveProps as f, createSlots as T, renderList as $, withCtx as u, renderSlot as d } from "vue";
+import { _ as P } from "./GraphicalObject.vue_vue_type_script_setup_true_lang-D0_HCJjo.js";
+import { a as V } from "./options-J8HfRMSU.js";
+import { u as G, e as L } from "./Icon.vue_vue_type_script_setup_true_lang-X8iOewkh.js";
+import { u as N } from "./useInputDataStates-Db6zJZ1T.js";
+import "reka-ui";
+import "@vueuse/core";
+import { pick as j, omit as A, isString as D } from "es-toolkit";
+import "@tanstack/vue-virtual";
+import { getBemBlock as E, generateVariantClassList as a, normCls as F } from "@pantograph/utils";
+import { cva as R } from "class-variance-authority";
+import q from "@pantograph/style/color_trigger.css?raw";
+const p = ["sm", "md", "lg"], H = ["disabled"], te = /* @__PURE__ */ B({
+  ...V("ColorTrigger", !1),
+  __name: "ColorTrigger",
+  props: {
+    icon: {},
+    bg: {},
+    br: {},
+    fg: {},
+    class: {},
+    size: { default: "md" },
+    disabled: { type: Boolean, default: void 0 },
+    borderless: { type: Boolean },
+    suffixIcon: { type: [Boolean, String], default: "tabler:chevron-down" }
+  },
+  setup(g) {
+    G("color_trigger", q);
+    const s = g, r = E("color_trigger"), b = R(r, {
+      variants: {
+        size: a(p, r),
+        borderless: a("borderless", r),
+        suffixIcon: a("suffix-icon", r)
+      }
+    }), { getDisabled: z, getSize: t } = N({
+      getSize: () => s.size && p.includes(s.size) ? s.size : "md"
+    }), x = n(() => ({
+      size: (() => {
+        switch (t.value) {
+          case "sm":
+            return "2xsm";
+          case "md":
+            return "xsm";
+          case "lg":
+            return "sm";
+        }
+      })(),
+      ...j(s, ["icon", "bg", "br", "fg"])
+    })), i = I(), v = n(() => {
+      switch (t.value) {
+        case "sm":
+          return "2xsm";
+        case "md":
+        case "lg":
+          return "xsm";
+      }
+    }), C = _(), S = n(() => A(C, ["type"]));
+    return (e, J) => (l(), y("button", k(S.value, {
+      type: "button",
+      class: o(F)(
+        o(b)({
+          size: o(t),
+          borderless: e.borderless,
+          suffixIcon: !!(e.suffixIcon || i.suffixIcon)
+        }),
+        s.class
+      ),
+      disabled: o(z)
+    }), [
+      h(P, m(f(x.value)), T({ _: 2 }, [
+        $(Object.keys(i), (c) => ({
+          name: c,
+          fn: u(() => [
+            d(e.$slots, c, m(f(s)))
+          ])
+        }))
+      ]), 1040),
+      e.suffixIcon || i.suffixIcon ? (l(), w(L, {
+        key: 0,
+        icon: o(D)(e.suffixIcon) ? e.suffixIcon : void 0,
+        size: v.value
+      }, {
+        default: u(() => [
+          d(e.$slots, "suffixIcon")
+        ]),
+        _: 3
+      }, 8, ["icon", "size"])) : O("", !0)
+    ], 16, H));
+  }
+});
+export {
+  p as C,
+  te as _
+};

package/dist/ColorTrigger.vue_vue_type_script_setup_true_lang-DZlk0Qqv.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),v=require("./GraphicalObject.vue_vue_type_script_setup_true_lang-okC2eyl7.js"),z=require("./options-CY2uxp5A.js"),l=require("./Icon.vue_vue_type_script_setup_true_lang-CXwAf04H.js"),C=require("./useInputDataStates-B2KtpFr0.js");require("reka-ui");require("@vueuse/core");const c=require("es-toolkit");require("@tanstack/vue-virtual");const t=require("@pantograph/utils"),S=require("class-variance-authority"),x=require("@pantograph/style/color_trigger.css?raw"),a=["sm","md","lg"],I=["disabled"],q=e.defineComponent({...z.getComponentOptions("ColorTrigger",!1),__name:"ColorTrigger",props:{icon:{},bg:{},br:{},fg:{},class:{},size:{default:"md"},disabled:{type:Boolean,default:void 0},borderless:{type:Boolean},suffixIcon:{type:[Boolean,String],default:"tabler:chevron-down"}},setup(f){l.useComponentStyle("color_trigger",x);const r=f,o=t.getBemBlock("color_trigger"),d=S.cva(o,{variants:{size:t.generateVariantClassList(a,o),borderless:t.generateVariantClassList("borderless",o),suffixIcon:t.generateVariantClassList("suffix-icon",o)}}),{getDisabled:g,getSize:n}=C.useFormInput({getSize:()=>r.size&&a.includes(r.size)?r.size:"md"}),p=e.computed(()=>({size:(()=>{switch(n.value){case"sm":return"2xsm";case"md":return"xsm";case"lg":return"sm"}})(),...c.pick(r,["icon","bg","br","fg"])})),i=e.useSlots(),m=e.computed(()=>{switch(n.value){case"sm":return"2xsm";case"md":case"lg":return"xsm"}}),_=e.useAttrs(),b=e.computed(()=>c.omit(_,["type"]));return(s,B)=>(e.openBlock(),e.createElementBlock("button",e.mergeProps(b.value,{type:"button",class:e.unref(t.normCls)(e.unref(d)({size:e.unref(n),borderless:s.borderless,suffixIcon:!!(s.suffixIcon||i.suffixIcon)}),r.class),disabled:e.unref(g)}),[e.createVNode(v._sfc_main,e.normalizeProps(e.guardReactiveProps(p.value)),e.createSlots({_:2},[e.renderList(Object.keys(i),u=>({name:u,fn:e.withCtx(()=>[e.renderSlot(s.$slots,u,e.normalizeProps(e.guardReactiveProps(r)))])}))]),1040),s.suffixIcon||i.suffixIcon?(e.openBlock(),e.createBlock(l._sfc_main$2,{key:0,icon:e.unref(c.isString)(s.suffixIcon)?s.suffixIcon:void 0,size:m.value},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"suffixIcon")]),_:3},8,["icon","size"])):e.createCommentVNode("",!0)],16,I))}});exports.ColorTriggerSizes=a;exports._sfc_main=q;