@pantograph/vue 0.10.0 → 0.10.2

package/dist/ColorSwatchGroup/ColorSwatchGroup.d.ts

@@ -1,4 +1,3 @@
-import { PrimitiveProps } from 'radix-vue';
 import { Class } from '../types';
 import { ColorSwatchProps, ColorSwatchSlots } from '../ColorSwatch/ColorSwatch';
 import { ColorSwatchSize } from '../ColorSwatch/ColorSwatch.model';
@@ -10,7 +9,7 @@ interface ColorObject extends Partial<Pick<ColorSwatchProps, 'bg' | 'fg' | 'br'
 }
 export type ColorSwatchItem = ColorObject | string;
 type ColorMode = 'subtle' | 'bold';
-export type ColorSwatchGroupProps = Omit<PrimitiveProps, 'asChild'> & Omit<ColorPickerProps, 'class' | 'color' | 'defaultColor'> & Partial<Pick<ColorSwatchProps, 'size' | 'customPickerIcon' | 'icon'>> & {
+export type ColorSwatchGroupProps = Omit<ColorPickerProps, 'class' | 'color' | 'defaultColor'> & Partial<Pick<ColorSwatchProps, 'size' | 'customPickerIcon' | 'icon'>> & {
     class?: Class;
     size?: ColorSwatchSize;
     noRemover?: boolean;
@@ -33,7 +32,17 @@ export interface ColorSwatchGroupEmits {
     (e: 'update:format', value: VisibleColorFormat): void;
     (e: 'update:modelValue', value?: string): void;
 }
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<ColorSwatchGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare function __VLS_template(): {
+    slots: Readonly<ColorSwatchSlots & {
+        header: () => never;
+    }> & ColorSwatchSlots & {
+        header: () => never;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ColorSwatchGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value?: string | undefined) => any;
     "update:format": (value: VisibleColorFormat) => any;
 }, string, import('vue').PublicProps, Readonly<ColorSwatchGroupProps> & Readonly<{
@@ -42,16 +51,13 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Co
 }>, {
     size: "sm" | "md";
     colorMode: ColorMode | {
-        fg?: ColorMode | undefined;
-        bg?: ColorMode | undefined;
-        br?: ColorMode | undefined;
+        fg?: ColorMode;
+        bg?: ColorMode;
+        br?: ColorMode;
         value: ColorMode;
     };
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<ColorSwatchSlots & {
-    header: () => never;
-}> & ColorSwatchSlots & {
-    header: () => never;
-}>;
+}, {}, {}, {}, 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/ColorSwatchGroup/index.js.js

@@ -1,165 +1,5 @@
-import { defineComponent as D, useSlots as L, ref as U, computed as f, createBlock as c, openBlock as a, unref as l, normalizeClass as v, withCtx as n, createElementBlock as z, createCommentVNode as b, createElementVNode as T, renderSlot as g, createTextVNode as q, toDisplayString as H, Fragment as J, renderList as C, mergeProps as m, createSlots as V, createVNode as $, normalizeProps as K, guardReactiveProps as Q } from "vue";
-import { g as W } from "../options-JBqnVZUl.js";
-import { P as X } from "../Primitive-nOVjbfuc.js";
-import { useEmitAsProps as Y } from "radix-vue";
-import { _ as k, C as Z } from "../ColorSwatch.vue_vue_type_style_index_0_lang-Bf0glWPU.js";
-import { i as B } from "../isString-BVAZt9W3.js";
-import { i as y, o as x } from "../omit-BHZMfUBv.js";
-import { useVModel as ee } from "@vueuse/core";
-import { g as oe, a as te, b as S } from "../class-DziTeW9B.js";
-import { cva as re } from "class-variance-authority";
-import { _ as se } from "../Popover.vue_vue_type_style_index_0_lang-DkM_Ynrg.js";
-import { _ as le } from "../ColorPicker.vue_vue_type_style_index_0_lang-CROQzfNe.js";
-import { p as j } from "../pick-BHVX8oMF.js";
-const ke = /* @__PURE__ */ D({
-  ...W("ColorSwatchGroup"),
-  __name: "ColorSwatchGroup",
-  props: {
-    as: {},
-    format: {},
-    defaultFormat: {},
-    hideAlpha: { type: Boolean },
-    size: { default: "md" },
-    customPickerIcon: {},
-    icon: {},
-    class: {},
-    noRemover: { type: Boolean },
-    noCustomPicker: { type: Boolean },
-    modelValue: {},
-    headerCls: {},
-    header: {},
-    colorsCls: {},
-    defaultValue: {},
-    colors: {},
-    colorMode: { default: "bold" },
-    popoverProps: {}
-  },
-  emits: ["update:format", "update:modelValue"],
-  setup(w, { emit: I }) {
-    const o = w, A = L(), h = I, s = ee(
-      o,
-      "modelValue",
-      h,
-      {
-        defaultValue: o.defaultValue,
-        passive: o.modelValue === void 0
-      }
-    ), E = (e) => {
-      if (B(e))
-        return {
-          selected: s.value === e,
-          icon: o.icon,
-          bg: e
-        };
-      if (y(e))
-        return {
-          ...x(e, "value"),
-          icon: e.icon ?? o.icon,
-          selected: s.value === e.value
-        };
-    }, u = oe("color_swatch_group"), N = re(u, {
-      variants: {
-        size: te(Z, u)
-      }
-    }), M = U(!1), d = (e) => y(e) ? e.value : e ?? void 0, P = (e) => {
-      const t = d(e);
-      s.value = t, M.value = !t;
-    }, p = f(() => {
-      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;
-    }), O = f(() => {
-      var e;
-      if (!((e = p.value) != null && e.length && p.value.some(
-        (t) => B(t) && t === s.value || y(t) && s.value === t.value
-      )))
-        return s.value;
-    }), F = (e) => {
-      e && (s.value = e);
-    }, G = Y(h), R = f(() => ({
-      ...j(G, "onUpdate:format"),
-      ...j(o, "format", "defaultFormat", "hideAlpha")
-    }));
-    return (e, t) => (a(), c(l(X), {
-      as: e.as,
-      class: v([o.class, l(N)({ size: e.size })])
-    }, {
-      default: n(() => [
-        A.header || e.header ? (a(), z("div", {
-          key: 0,
-          class: v([l(S)(l(u), "header"), e.headerCls])
-        }, [
-          g(e.$slots, "header", {}, () => [
-            q(H(e.header), 1)
-          ])
-        ], 2)) : b("", !0),
-        T("div", {
-          class: v([l(S)(l(u), "colors"), e.colorsCls])
-        }, [
-          e.noRemover ? b("", !0) : (a(), c(k, {
-            key: 0,
-            type: "remover",
-            size: e.size,
-            onClick: t[0] || (t[0] = (r) => P()),
-            selected: !l(s) && M.value
-          }, null, 8, ["size", "selected"])),
-          (a(!0), z(J, null, C(p.value, (r) => (a(), c(k, m({
-            type: "color",
-            size: e.size,
-            icon: e.icon,
-            ref_for: !0
-          }, E(r), {
-            key: d(r),
-            onClick: (i) => P(r)
-          }), V({ _: 2 }, [
-            C(Object.keys(e.$slots), (i) => ({
-              name: i,
-              fn: n((_) => [
-                g(e.$slots, i, m({ ref_for: !0 }, { ..._, value: d(r) }))
-              ])
-            }))
-          ]), 1040, ["size", "icon", "onClick"]))), 128)),
-          e.noCustomPicker ? b("", !0) : (a(), c(se, m({
-            key: 1,
-            trigger: "click",
-            "reverse-placement-on-dir": "rtl",
-            placement: "right-start",
-            "side-offset": 4
-          }, e.popoverProps || {}), {
-            content: n(() => [
-              $(le, m({
-                defaultColor: O.value,
-                "onUpdate:color": F
-              }, R.value), null, 16, ["defaultColor"])
-            ]),
-            default: n(() => [
-              $(k, {
-                type: "custom-picker",
-                size: e.size,
-                customPickerIcon: e.customPickerIcon
-              }, V({ _: 2 }, [
-                C(Object.keys(e.$slots), (r) => ({
-                  name: r,
-                  fn: n((i) => [
-                    g(e.$slots, r, K(Q(i)))
-                  ])
-                }))
-              ]), 1032, ["size", "customPickerIcon"])
-            ]),
-            _: 3
-          }, 16))
-        ], 2)
-      ]),
-      _: 3
-    }, 8, ["as", "class"]));
-  }
-});
+import { _ as r, _ as t } from "../ColorSwatchGroup.vue_vue_type_style_index_0_lang-Cwh2REmh.js";
 export {
-  ke as ColorSwatchGroup,
-  ke as default
+  r as ColorSwatchGroup,
+  t as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),q=require("../options-B4iSAKol.js"),j=require("../Primitive-BT1RjuGS.js"),w=require("radix-vue"),i=require("../ColorSwatch.vue_vue_type_style_index_0_lang-Dki5150Z.js"),g=require("../isString-CKmTJsel.js"),u=require("../omit-DlH5U9Jc.js"),$=require("@vueuse/core"),c=require("../class-CjZYGZDW.js"),N=require("class-variance-authority"),O=require("../Popover.vue_vue_type_style_index_0_lang-pSXmj4z1.js"),E=require("../ColorPicker.vue_vue_type_style_index_0_lang-IZSWne-0.js"),C=require("../pick-DpwC5mlg.js"),k=e.defineComponent({...q.getComponentOptions("ColorSwatchGroup"),__name:"ColorSwatchGroup",props:{as:{},format:{},defaultFormat:{},hideAlpha:{type:Boolean},size:{default:"md"},customPickerIcon:{},icon:{},class:{},noRemover:{type:Boolean},noCustomPicker:{type:Boolean},modelValue:{},headerCls:{},header:{},colorsCls:{},defaultValue:{},colors:{},colorMode:{default:"bold"},popoverProps:{}},emits:["update:format","update:modelValue"],setup(b,{emit:y}){const t=b,_=e.useSlots(),p=y,l=$.useVModel(t,"modelValue",p,{defaultValue:t.defaultValue,passive:t.modelValue===void 0}),h=o=>{if(g.isString(o))return{selected:l.value===o,icon:t.icon,bg:o};if(u.isObject(o))return{...u.omit(o,"value"),icon:o.icon??t.icon,selected:l.value===o.value}},a=c.getBemBlock("color_swatch_group"),P=N.cva(a,{variants:{size:c.generateVariantClassList(i.ColorSwatchSizes,a)}}),f=e.ref(!1),d=o=>u.isObject(o)?o.value:o??void 0,v=o=>{const r=d(o);l.value=r,f.value=!r},m=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}),M=e.computed(()=>{var o;if(!((o=m.value)!=null&&o.length&&m.value.some(r=>g.isString(r)&&r===l.value||u.isObject(r)&&l.value===r.value)))return l.value}),V=o=>{o&&(l.value=o)},B=w.useEmitAsProps(p),z=e.computed(()=>({...C.pick(B,"onUpdate:format"),...C.pick(t,"format","defaultFormat","hideAlpha")}));return(o,r)=>(e.openBlock(),e.createBlock(e.unref(j.Primitive),{as:o.as,class:e.normalizeClass([t.class,e.unref(P)({size:o.size})])},{default:e.withCtx(()=>[_.header||o.header?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(c.getBemElement)(e.unref(a),"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(c.getBemElement)(e.unref(a),"colors"),o.colorsCls])},[o.noRemover?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(i._sfc_main,{key:0,type:"remover",size:o.size,onClick:r[0]||(r[0]=s=>v()),selected:!e.unref(l)&&f.value},null,8,["size","selected"])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,s=>(e.openBlock(),e.createBlock(i._sfc_main,e.mergeProps({type:"color",size:o.size,icon:o.icon,ref_for:!0},h(s),{key:d(s),onClick:n=>v(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:d(s)}))])}))]),1040,["size","icon","onClick"]))),128)),o.noCustomPicker?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(O._sfc_main,e.mergeProps({key:1,trigger:"click","reverse-placement-on-dir":"rtl",placement:"right-start","side-offset":4},o.popoverProps||{}),{content:e.withCtx(()=>[e.createVNode(E._sfc_main,e.mergeProps({defaultColor:M.value,"onUpdate:color":V},z.value),null,16,["defaultColor"])]),default:e.withCtx(()=>[e.createVNode(i._sfc_main,{type:"custom-picker",size:o.size,customPickerIcon:o.customPickerIcon},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"])]),_:3},16))],2)]),_:3},8,["as","class"]))}});exports.ColorSwatchGroup=k;exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ColorSwatchGroup.vue_vue_type_style_index_0_lang-CpgTgIuE.js");exports.ColorSwatchGroup=e._sfc_main;exports.default=e._sfc_main;

package/dist/ColorSwatchGroup.vue_vue_type_style_index_0_lang-CpgTgIuE.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),S=require("./options-B4iSAKol.js"),q=require("radix-vue"),i=require("./ColorSwatch.vue_vue_type_style_index_0_lang-BH-NSALx.js"),g=require("./isString-CKmTJsel.js"),m=require("./_flatRest-R59G2N4m.js"),$=require("@vueuse/core"),u=require("./class-CjZYGZDW.js"),j=require("class-variance-authority"),w=require("./omit-BKPbELUG.js"),E=require("./Popover.vue_vue_type_style_index_0_lang-CM8qMFEi.js"),N=require("./ColorPicker.vue_vue_type_style_index_0_lang-B1Rst4Q9.js"),k=require("./pick-C-ap2Lj0.js"),O=e.defineComponent({...S.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:{},colorsCls:{},defaultValue:{},colors:{},colorMode:{default:"bold"},popoverProps:{}},emits:["update:format","update:modelValue"],setup(C,{emit:b}){const t=C,_=e.useSlots(),p=b,l=$.useVModel(t,"modelValue",p,{defaultValue:t.defaultValue,passive:t.modelValue===void 0}),y=o=>{if(g.isString(o))return{selected:l.value===o,icon:t.icon,bg:o};if(m.isObject(o))return{...w.omit(o,"value"),icon:o.icon??t.icon,selected:l.value===o.value}},a=u.getBemBlock("color_swatch_group"),h=j.cva(a,{variants:{size:u.generateVariantClassList(i.ColorSwatchSizes,a)}}),f=e.ref(!1),c=o=>m.isObject(o)?o.value:o??void 0,v=o=>{const r=c(o);l.value=r,f.value=!r},d=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}),P=e.computed(()=>{var o;if(!((o=d.value)!=null&&o.length&&d.value.some(r=>g.isString(r)&&r===l.value||m.isObject(r)&&l.value===r.value)))return l.value}),V=o=>{o&&(l.value=o)},B=q.useEmitAsProps(p),M=e.computed(()=>({...k.pick(B,"onUpdate:format"),...k.pick(t,"format","defaultFormat","hideAlpha")}));return(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([t.class,e.unref(h)({size:o.size})])},[_.header||o.header?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(u.getBemElement)(e.unref(a),"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(u.getBemElement)(e.unref(a),"colors"),o.colorsCls])},[o.noRemover?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(i._sfc_main,{key:0,type:"remover",size:o.size,onClick:r[0]||(r[0]=s=>v()),selected:!e.unref(l)&&f.value},null,8,["size","selected"])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,s=>(e.openBlock(),e.createBlock(i._sfc_main,e.mergeProps({type:"color",size:o.size,icon:o.icon,ref_for:!0},y(s),{key:c(s),onClick:n=>v(s)}),e.createSlots({_:2},[e.renderList(Object.keys(o.$slots),n=>({name:n,fn:e.withCtx(z=>[e.renderSlot(o.$slots,n,e.mergeProps({ref_for:!0},{...z,value:c(s)}))])}))]),1040,["size","icon","onClick"]))),128)),o.noCustomPicker?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(E._sfc_main,e.mergeProps({key:1,trigger:"click","reverse-placement-on-dir":"rtl",placement:"right-start","side-offset":4},o.popoverProps||{}),{content:e.withCtx(()=>[e.createVNode(N._sfc_main,e.mergeProps({defaultColor:P.value,"onUpdate:color":V},M.value),null,16,["defaultColor"])]),default:e.withCtx(()=>[e.createVNode(i._sfc_main,{type:"custom-picker",size:o.size,customPickerIcon:o.customPickerIcon},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"])]),_:3},16))],2)],2))}});exports._sfc_main=O;

package/dist/ColorSwatchGroup.vue_vue_type_style_index_0_lang-Cwh2REmh.js

@@ -0,0 +1,159 @@
+import { defineComponent as G, useSlots as L, ref as U, computed as p, createElementBlock as f, openBlock as l, normalizeClass as v, unref as a, createCommentVNode as b, createElementVNode as T, renderSlot as g, createTextVNode as q, toDisplayString as H, createBlock as C, Fragment as J, renderList as k, mergeProps as u, createSlots as V, withCtx as c, createVNode as $, normalizeProps as K, guardReactiveProps as Q } from "vue";
+import { g as W } from "./options-JBqnVZUl.js";
+import { useEmitAsProps as X } from "radix-vue";
+import { _ as y, C as Y } from "./ColorSwatch.vue_vue_type_style_index_0_lang-CL9dd69H.js";
+import { i as B } from "./isString-BVAZt9W3.js";
+import { i as M } from "./_flatRest-CHX8vV1P.js";
+import { useVModel as Z } from "@vueuse/core";
+import { g as x, a as ee, b as j } from "./class-DziTeW9B.js";
+import { cva as oe } from "class-variance-authority";
+import { o as te } from "./omit-BEkBWXra.js";
+import { _ as re } from "./Popover.vue_vue_type_style_index_0_lang-C0IwnsU5.js";
+import { _ as se } from "./ColorPicker.vue_vue_type_style_index_0_lang-CEz3bIJG.js";
+import { p as S } from "./pick-DLskPTKb.js";
+const Ce = /* @__PURE__ */ G({
+  ...W("ColorSwatchGroup"),
+  __name: "ColorSwatchGroup",
+  props: {
+    format: {},
+    defaultFormat: {},
+    hideAlpha: { type: Boolean },
+    size: { default: "md" },
+    customPickerIcon: {},
+    icon: {},
+    class: {},
+    noRemover: { type: Boolean },
+    noCustomPicker: { type: Boolean },
+    modelValue: {},
+    headerCls: {},
+    header: {},
+    colorsCls: {},
+    defaultValue: {},
+    colors: {},
+    colorMode: { default: "bold" },
+    popoverProps: {}
+  },
+  emits: ["update:format", "update:modelValue"],
+  setup(w, { emit: I }) {
+    const o = w, A = L(), h = I, s = Z(
+      o,
+      "modelValue",
+      h,
+      {
+        defaultValue: o.defaultValue,
+        passive: o.modelValue === void 0
+      }
+    ), E = (e) => {
+      if (B(e))
+        return {
+          selected: s.value === e,
+          icon: o.icon,
+          bg: e
+        };
+      if (M(e))
+        return {
+          ...te(e, "value"),
+          icon: e.icon ?? o.icon,
+          selected: s.value === e.value
+        };
+    }, i = x("color_swatch_group"), N = oe(i, {
+      variants: {
+        size: ee(Y, i)
+      }
+    }), z = U(!1), m = (e) => M(e) ? e.value : e ?? void 0, P = (e) => {
+      const t = m(e);
+      s.value = t, z.value = !t;
+    }, d = p(() => {
+      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;
+    }), O = p(() => {
+      var e;
+      if (!((e = d.value) != null && e.length && d.value.some(
+        (t) => B(t) && t === s.value || M(t) && s.value === t.value
+      )))
+        return s.value;
+    }), _ = (e) => {
+      e && (s.value = e);
+    }, F = X(h), R = p(() => ({
+      ...S(F, "onUpdate:format"),
+      ...S(o, "format", "defaultFormat", "hideAlpha")
+    }));
+    return (e, t) => (l(), f("div", {
+      class: v([o.class, a(N)({ size: e.size })])
+    }, [
+      A.header || e.header ? (l(), f("div", {
+        key: 0,
+        class: v([a(j)(a(i), "header"), e.headerCls])
+      }, [
+        g(e.$slots, "header", {}, () => [
+          q(H(e.header), 1)
+        ])
+      ], 2)) : b("", !0),
+      T("div", {
+        class: v([a(j)(a(i), "colors"), e.colorsCls])
+      }, [
+        e.noRemover ? b("", !0) : (l(), C(y, {
+          key: 0,
+          type: "remover",
+          size: e.size,
+          onClick: t[0] || (t[0] = (r) => P()),
+          selected: !a(s) && z.value
+        }, null, 8, ["size", "selected"])),
+        (l(!0), f(J, null, k(d.value, (r) => (l(), C(y, u({
+          type: "color",
+          size: e.size,
+          icon: e.icon,
+          ref_for: !0
+        }, E(r), {
+          key: m(r),
+          onClick: (n) => P(r)
+        }), V({ _: 2 }, [
+          k(Object.keys(e.$slots), (n) => ({
+            name: n,
+            fn: c((D) => [
+              g(e.$slots, n, u({ ref_for: !0 }, { ...D, value: m(r) }))
+            ])
+          }))
+        ]), 1040, ["size", "icon", "onClick"]))), 128)),
+        e.noCustomPicker ? b("", !0) : (l(), C(re, u({
+          key: 1,
+          trigger: "click",
+          "reverse-placement-on-dir": "rtl",
+          placement: "right-start",
+          "side-offset": 4
+        }, e.popoverProps || {}), {
+          content: c(() => [
+            $(se, u({
+              defaultColor: O.value,
+              "onUpdate:color": _
+            }, R.value), null, 16, ["defaultColor"])
+          ]),
+          default: c(() => [
+            $(y, {
+              type: "custom-picker",
+              size: e.size,
+              customPickerIcon: e.customPickerIcon
+            }, V({ _: 2 }, [
+              k(Object.keys(e.$slots), (r) => ({
+                name: r,
+                fn: c((n) => [
+                  g(e.$slots, r, K(Q(n)))
+                ])
+              }))
+            ]), 1032, ["size", "customPickerIcon"])
+          ]),
+          _: 3
+        }, 16))
+      ], 2)
+    ], 2));
+  }
+});
+export {
+  Ce as _
+};

package/dist/ColorTrigger/ColorTrigger.d.ts

@@ -1,7 +1,8 @@
 import { GraphicalObjectProps } from '../GraphicalObject/GraphicalObject';
 import { ColorTriggerSize } from './ColorTrigger.model';
-export type ColorTriggerProps = Partial<Pick<GraphicalObjectProps, 'icon' | 'bg' | 'br' | 'fg' | 'as' | 'class'>> & {
+export type ColorTriggerProps = Partial<Pick<GraphicalObjectProps, 'icon' | 'bg' | 'br' | 'fg' | 'class'>> & {
     size?: ColorTriggerSize;
+    disabled?: boolean;
     borderless?: boolean;
     suffixIcon?: boolean | string;
 };
@@ -10,10 +11,17 @@ export interface ColorTriggerSlots {
     icon?: () => never;
     suffixIcon?: () => never;
 }
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<ColorTriggerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ColorTriggerProps> & Readonly<{}>, {
-    size: "sm" | "md" | "lg";
-    suffixIcon: string | boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<ColorTriggerSlots> & ColorTriggerSlots>;
+declare function __VLS_template(): {
+    slots: Readonly<ColorTriggerSlots> & ColorTriggerSlots;
+    refs: {};
+    attrs: Partial<{}>;
+};
+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;
+    suffixIcon: boolean | string;
+}, {}, {}, {}, 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/ColorTrigger/index.js.js

@@ -1,92 +1,6 @@
-import { defineComponent as S, computed as o, useSlots as _, createBlock as c, openBlock as m, unref as i, normalizeClass as x, withCtx as t, createVNode as B, createCommentVNode as k, normalizeProps as l, guardReactiveProps as f, createSlots as I, renderList as h, renderSlot as g } from "vue";
-import { _ as w } from "../GraphicalObject.vue_vue_type_script_setup_true_lang-Cc4PxUnd.js";
-import { g as y } from "../options-JBqnVZUl.js";
-import { g as O, a as u } from "../class-DziTeW9B.js";
-import { cva as P } from "class-variance-authority";
-import { P as T } from "../Primitive-nOVjbfuc.js";
-import { _ as $ } from "../Icon.vue_vue_type_style_index_0_lang-BfPcw6PU.js";
-import { i as V } from "../isString-BVAZt9W3.js";
-import { p as G } from "../pick-BHVX8oMF.js";
-const d = ["sm", "md", "lg"], J = /* @__PURE__ */ S({
-  ...y("ColorTrigger"),
-  __name: "ColorTrigger",
-  props: {
-    icon: {},
-    bg: {},
-    br: {},
-    fg: {},
-    as: {},
-    class: {},
-    size: { default: "md" },
-    borderless: { type: Boolean },
-    suffixIcon: { type: [Boolean, String], default: "tabler:chevron-down" }
-  },
-  setup(p) {
-    const e = p, r = O("color_trigger"), z = P(r, {
-      variants: {
-        size: u(d, r),
-        borderless: u("borderless", r)
-      }
-    }), b = o(
-      () => e.size && d.includes(e.size) ? e.size : "md"
-    ), C = o(() => ({
-      size: (() => {
-        switch (e.size) {
-          case "sm":
-            return "2xsm";
-          case "md":
-            return "xsm";
-          case "lg":
-            return "sm";
-        }
-      })(),
-      ...G(e, "icon", "bg", "br", "fg")
-    })), n = _(), v = o(() => {
-      switch (e.size) {
-        case "sm":
-          return "2xsm";
-        case "md":
-        case "lg":
-          return "xsm";
-      }
-    });
-    return (s, L) => (m(), c(i(T), {
-      as: s.as,
-      class: x([
-        i(z)({
-          size: b.value,
-          borderless: s.borderless
-        }),
-        e.class
-      ]),
-      tabindex: "0"
-    }, {
-      default: t(() => [
-        B(w, l(f(C.value)), I({ _: 2 }, [
-          h(Object.keys(n), (a) => ({
-            name: a,
-            fn: t(() => [
-              g(s.$slots, a, l(f(e)))
-            ])
-          }))
-        ]), 1040),
-        s.suffixIcon || n.suffixIcon ? (m(), c($, {
-          key: 0,
-          icon: i(V)(s.suffixIcon) ? s.suffixIcon : void 0,
-          size: v.value
-        }, {
-          default: t(() => [
-            g(s.$slots, "suffixIcon")
-          ]),
-          _: 3
-        }, 8, ["icon", "size"])) : k("", !0)
-      ]),
-      _: 3
-    }, 8, ["as", "class"]));
-  }
-});
+import { _ as e, C as a, _ as g } from "../ColorTrigger.vue_vue_type_style_index_0_lang-BNFu93Ns.js";
 export {
-  J as ColorTrigger,
-  d as ColorTriggerSizes,
-  J as default
+  e as ColorTrigger,
+  a as ColorTriggerSizes,
+  g as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("../GraphicalObject.vue_vue_type_script_setup_true_lang-Bouixpu2.js"),p=require("../options-B4iSAKol.js"),t=require("../class-CjZYGZDW.js"),_=require("class-variance-authority"),z=require("../Primitive-BT1RjuGS.js"),v=require("../Icon.vue_vue_type_style_index_0_lang-BvHCdzZP.js"),b=require("../isString-CKmTJsel.js"),C=require("../pick-DpwC5mlg.js"),i=["sm","md","lg"],a=e.defineComponent({...p.getComponentOptions("ColorTrigger"),__name:"ColorTrigger",props:{icon:{},bg:{},br:{},fg:{},as:{},class:{},size:{default:"md"},borderless:{type:Boolean},suffixIcon:{type:[Boolean,String],default:"tabler:chevron-down"}},setup(l){const s=l,o=t.getBemBlock("color_trigger"),u=_.cva(o,{variants:{size:t.generateVariantClassList(i,o),borderless:t.generateVariantClassList("borderless",o)}}),g=e.computed(()=>s.size&&i.includes(s.size)?s.size:"md"),d=e.computed(()=>({size:(()=>{switch(s.size){case"sm":return"2xsm";case"md":return"xsm";case"lg":return"sm"}})(),...C.pick(s,"icon","bg","br","fg")})),n=e.useSlots(),m=e.computed(()=>{switch(s.size){case"sm":return"2xsm";case"md":case"lg":return"xsm"}});return(r,S)=>(e.openBlock(),e.createBlock(e.unref(z.Primitive),{as:r.as,class:e.normalizeClass([e.unref(u)({size:g.value,borderless:r.borderless}),s.class]),tabindex:"0"},{default:e.withCtx(()=>[e.createVNode(f._sfc_main,e.normalizeProps(e.guardReactiveProps(d.value)),e.createSlots({_:2},[e.renderList(Object.keys(n),c=>({name:c,fn:e.withCtx(()=>[e.renderSlot(r.$slots,c,e.normalizeProps(e.guardReactiveProps(s)))])}))]),1040),r.suffixIcon||n.suffixIcon?(e.openBlock(),e.createBlock(v._sfc_main,{key:0,icon:e.unref(b.isString)(r.suffixIcon)?r.suffixIcon:void 0,size:m.value},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"suffixIcon")]),_:3},8,["icon","size"])):e.createCommentVNode("",!0)]),_:3},8,["as","class"]))}});exports.ColorTrigger=a;exports.ColorTriggerSizes=i;exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ColorTrigger.vue_vue_type_style_index_0_lang-C8kPa338.js");exports.ColorTrigger=e._sfc_main;exports.ColorTriggerSizes=e.ColorTriggerSizes;exports.default=e._sfc_main;

package/dist/ColorTrigger.vue_vue_type_style_index_0_lang-BNFu93Ns.js

@@ -0,0 +1,86 @@
+import { defineComponent as _, computed as r, useSlots as B, createElementBlock as S, openBlock as n, normalizeClass as v, unref as a, createVNode as k, createBlock as x, createCommentVNode as h, normalizeProps as c, guardReactiveProps as l, createSlots as I, renderList as y, withCtx as m, renderSlot as d } from "vue";
+import { _ as w } from "./GraphicalObject.vue_vue_type_script_setup_true_lang-BEZ6FkRf.js";
+import { g as O } from "./options-JBqnVZUl.js";
+import { g as $, a as f } from "./class-DziTeW9B.js";
+import { cva as T } from "class-variance-authority";
+import { _ as V } from "./Icon.vue_vue_type_style_index_0_lang-BfPcw6PU.js";
+import { i as G } from "./isString-BVAZt9W3.js";
+import { p as L } from "./pick-DLskPTKb.js";
+const u = ["sm", "md", "lg"], N = ["disabled"], J = /* @__PURE__ */ _({
+  ...O("ColorTrigger"),
+  __name: "ColorTrigger",
+  props: {
+    icon: {},
+    bg: {},
+    br: {},
+    fg: {},
+    class: {},
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    borderless: { type: Boolean },
+    suffixIcon: { type: [Boolean, String], default: "tabler:chevron-down" }
+  },
+  setup(g) {
+    const e = g, o = $("color_trigger"), p = T(o, {
+      variants: {
+        size: f(u, o),
+        borderless: f("borderless", o)
+      }
+    }), z = r(
+      () => e.size && u.includes(e.size) ? e.size : "md"
+    ), b = r(() => ({
+      size: (() => {
+        switch (e.size) {
+          case "sm":
+            return "2xsm";
+          case "md":
+            return "xsm";
+          case "lg":
+            return "sm";
+        }
+      })(),
+      ...L(e, "icon", "bg", "br", "fg")
+    })), t = B(), C = r(() => {
+      switch (e.size) {
+        case "sm":
+          return "2xsm";
+        case "md":
+        case "lg":
+          return "xsm";
+      }
+    });
+    return (s, P) => (n(), S("button", {
+      class: v([
+        a(p)({
+          size: z.value,
+          borderless: s.borderless
+        }),
+        e.class
+      ]),
+      disabled: s.disabled
+    }, [
+      k(w, c(l(b.value)), I({ _: 2 }, [
+        y(Object.keys(t), (i) => ({
+          name: i,
+          fn: m(() => [
+            d(s.$slots, i, c(l(e)))
+          ])
+        }))
+      ]), 1040),
+      s.suffixIcon || t.suffixIcon ? (n(), x(V, {
+        key: 0,
+        icon: a(G)(s.suffixIcon) ? s.suffixIcon : void 0,
+        size: C.value
+      }, {
+        default: m(() => [
+          d(s.$slots, "suffixIcon")
+        ]),
+        _: 3
+      }, 8, ["icon", "size"])) : h("", !0)
+    ], 10, N));
+  }
+});
+export {
+  u as C,
+  J as _
+};

package/dist/ColorTrigger.vue_vue_type_style_index_0_lang-C8kPa338.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),m=require("./GraphicalObject.vue_vue_type_script_setup_true_lang-CdO2zArd.js"),p=require("./options-B4iSAKol.js"),t=require("./class-CjZYGZDW.js"),f=require("class-variance-authority"),_=require("./Icon.vue_vue_type_style_index_0_lang-BvHCdzZP.js"),z=require("./isString-CKmTJsel.js"),b=require("./pick-C-ap2Lj0.js"),n=["sm","md","lg"],v=["disabled"],C=e.defineComponent({...p.getComponentOptions("ColorTrigger"),__name:"ColorTrigger",props:{icon:{},bg:{},br:{},fg:{},class:{},size:{default:"md"},disabled:{type:Boolean},borderless:{type:Boolean},suffixIcon:{type:[Boolean,String],default:"tabler:chevron-down"}},setup(a){const s=a,o=t.getBemBlock("color_trigger"),l=f.cva(o,{variants:{size:t.generateVariantClassList(n,o),borderless:t.generateVariantClassList("borderless",o)}}),u=e.computed(()=>s.size&&n.includes(s.size)?s.size:"md"),d=e.computed(()=>({size:(()=>{switch(s.size){case"sm":return"2xsm";case"md":return"xsm";case"lg":return"sm"}})(),...b.pick(s,"icon","bg","br","fg")})),i=e.useSlots(),g=e.computed(()=>{switch(s.size){case"sm":return"2xsm";case"md":case"lg":return"xsm"}});return(r,S)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass([e.unref(l)({size:u.value,borderless:r.borderless}),s.class]),disabled:r.disabled},[e.createVNode(m._sfc_main,e.normalizeProps(e.guardReactiveProps(d.value)),e.createSlots({_:2},[e.renderList(Object.keys(i),c=>({name:c,fn:e.withCtx(()=>[e.renderSlot(r.$slots,c,e.normalizeProps(e.guardReactiveProps(s)))])}))]),1040),r.suffixIcon||i.suffixIcon?(e.openBlock(),e.createBlock(_._sfc_main,{key:0,icon:e.unref(z.isString)(r.suffixIcon)?r.suffixIcon:void 0,size:g.value},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"suffixIcon")]),_:3},8,["icon","size"])):e.createCommentVNode("",!0)],10,v))}});exports.ColorTriggerSizes=n;exports._sfc_main=C;