@pantograph/vue 0.32.3 → 0.32.5

package/dist/ColorSwatchGroup/ColorSwatchGroup.d.ts

@@ -99,6 +99,10 @@ export interface ColorSwatchGroupEmits {
      * Emitted when the selected color value changes (v-model binding)
      */
     (e: 'update:modelValue', value?: string): void;
+    /**
+     * Emitted when the selected color value changes
+     */
+    (e: 'change', value?: string | null): void;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -112,9 +116,11 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<ColorSwatchGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value?: string | null | undefined) => any;
     "update:modelValue": (value?: string | undefined) => any;
     "update:format": (value: VisibleColorFormat) => any;
 }, string, import('vue').PublicProps, Readonly<ColorSwatchGroupProps> & Readonly<{
+    onChange?: ((value?: string | null | undefined) => any) | undefined;
     "onUpdate:modelValue"?: ((value?: string | undefined) => any) | undefined;
     "onUpdate:format"?: ((value: VisibleColorFormat) => any) | undefined;
 }>, {

package/dist/ColorSwatchGroup/index.js

@@ -1,4 +1,4 @@
-import { _ as o } from "../ColorSwatchGroup.vue_vue_type_style_index_0_lang-awOxZml7.js";
+import { _ as o } from "../ColorSwatchGroup.vue_vue_type_style_index_0_lang-_pCAmZ53.js";
 import { installComponent as r } from "@pantograph/utils-vue";
 import { getComponentName as t } from "@pantograph/utils";
 const n = r(

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-DE47Don1.js"),o=require("@pantograph/utils-vue"),t=require("@pantograph/utils"),u=o.installComponent(e._sfc_main,t.getComponentName("ColorSwatchGroup"));exports.ColorSwatchGroup=e._sfc_main;exports.default=e._sfc_main;exports.ColorSwatchGroupPlugin=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ColorSwatchGroup.vue_vue_type_style_index_0_lang-B4PdDPjL.js"),o=require("@pantograph/utils-vue"),t=require("@pantograph/utils"),u=o.installComponent(e._sfc_main,t.getComponentName("ColorSwatchGroup"));exports.ColorSwatchGroup=e._sfc_main;exports.default=e._sfc_main;exports.ColorSwatchGroupPlugin=u;

package/dist/ColorSwatchGroup.vue_vue_type_style_index_0_lang-B4PdDPjL.js

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

package/dist/{ColorSwatchGroup.vue_vue_type_style_index_0_lang-awOxZml7.js → ColorSwatchGroup.vue_vue_type_style_index_0_lang-_pCAmZ53.js}

@@ -1,13 +1,13 @@
-import { defineComponent as T, useSlots as q, ref as H, computed as d, createElementBlock as b, openBlock as u, normalizeClass as g, unref as s, createCommentVNode as C, createElementVNode as J, renderSlot as k, createTextVNode as K, toDisplayString as Q, createBlock as y, Fragment as W, renderList as M, mergeProps as m, createSlots as j, withCtx as f, createVNode as S, normalizeProps as X, guardReactiveProps as Y } from "vue";
+import { defineComponent as T, useSlots as q, ref as H, computed as d, createElementBlock as g, openBlock as u, normalizeClass as C, unref as s, createCommentVNode as k, createElementVNode as J, renderSlot as y, createTextVNode as K, toDisplayString as Q, createBlock as h, Fragment as W, renderList as M, mergeProps as m, createSlots as j, withCtx as f, createVNode as S, normalizeProps as X, guardReactiveProps as Y } from "vue";
 import { useFormInput as Z, useVModel as _ } from "@pantograph/utils-vue";
 import { useEmitAsProps as ee } from "reka-ui";
-import h, { ColorSwatchSizes as oe } from "./ColorSwatch/index.js";
+import P, { ColorSwatchSizes as oe } from "./ColorSwatch/index.js";
 import { isString as w, pick as I, omit as te } from "es-toolkit";
-import { getComponentOptions as le, getBemBlock as re, generateVariantClassList as se, normCls as P, getBemElement as A } from "@pantograph/utils";
+import { getComponentOptions as le, getBemBlock as re, generateVariantClassList as se, normCls as z, getBemElement as A } from "@pantograph/utils";
 import { cva as ae } from "class-variance-authority";
 import { Popover as ne } from "./Popover/index.js";
-import { _ as ie } from "./ColorPicker.vue_vue_type_style_index_0_lang-D9G-d0r6.js";
-import { i as z } from "./isObject-vmP43YLW.js";
+import { _ as ie } from "./ColorPicker.vue_vue_type_style_index_0_lang-BrT753B_.js";
+import { i as V } from "./isObject-vmP43YLW.js";
 const ke = /* @__PURE__ */ T({
   ...le("ColorSwatchGroup"),
   __name: "ColorSwatchGroup",
@@ -31,17 +31,20 @@ const ke = /* @__PURE__ */ T({
     colorMode: { default: "bold" },
     popoverProps: {}
   },
-  emits: ["update:format", "update:modelValue"],
+  emits: ["update:format", "update:modelValue", "change"],
   setup(r, { emit: N }) {
-    const o = r, D = q(), V = N, { getDisabled: i } = Z({
+    const o = r, D = q(), p = N, { getDisabled: i } = Z({
       exports: ["getDisabled"]
     }), a = _(
       o,
       "modelValue",
-      V,
+      p,
       {
         defaultValue: o.defaultValue,
-        passive: o.modelValue === void 0
+        passive: o.modelValue === void 0,
+        onChange(e) {
+          p("change", e);
+        }
       }
     ), E = (e) => {
       if (w(e))
@@ -50,7 +53,7 @@ const ke = /* @__PURE__ */ T({
           icon: o.icon,
           bg: e
         };
-      if (z(e))
+      if (V(e))
         return {
           ...te(e, ["value"]),
           icon: e.icon ?? o.icon,
@@ -60,12 +63,12 @@ const ke = /* @__PURE__ */ T({
       variants: {
         size: se(oe, c)
       }
-    }), $ = H(!1), p = (e) => z(e) ? e.value : e ?? void 0, B = (e) => {
+    }), $ = H(!1), v = (e) => V(e) ? e.value : e ?? void 0, B = (e) => {
       if (!i.value) {
-        const t = p(e);
+        const t = v(e);
         a.value = t, $.value = !t;
       }
-    }, v = d(() => {
+    }, b = 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) => {
@@ -76,13 +79,13 @@ const ke = /* @__PURE__ */ T({
       }) : e;
     }), O = d(() => {
       var e;
-      if (!((e = v.value) != null && e.length && v.value.some(
-        (t) => w(t) && t === a.value || z(t) && a.value === t.value
+      if (!((e = b.value) != null && e.length && b.value.some(
+        (t) => w(t) && t === a.value || V(t) && a.value === t.value
       )))
         return a.value;
     }), U = (e) => {
       e && (a.value = e);
-    }, R = ee(V), G = d(() => ({
+    }, R = ee(p), G = d(() => ({
       ...I(R, ["onUpdate:format"]),
       ...I(o, ["format", "defaultFormat", "hideAlpha"])
     })), L = d(() => {
@@ -95,21 +98,21 @@ const ke = /* @__PURE__ */ T({
         ...l
       };
     });
-    return (e, t) => (u(), b("div", {
-      class: g(s(P)(o.class, s(F)({ size: r.size })))
+    return (e, t) => (u(), g("div", {
+      class: C(s(z)(o.class, s(F)({ size: r.size })))
     }, [
-      D.header || r.header ? (u(), b("div", {
+      D.header || r.header ? (u(), g("div", {
         key: 0,
-        class: g(s(P)(s(A)(s(c), "header"), r.headerCls))
+        class: C(s(z)(s(A)(s(c), "header"), r.headerCls))
       }, [
-        k(e.$slots, "header", {}, () => [
+        y(e.$slots, "header", {}, () => [
           K(Q(r.header), 1)
         ])
-      ], 2)) : C("", !0),
+      ], 2)) : k("", !0),
       J("div", {
-        class: g(s(P)(s(A)(s(c), "colors"), r.colorsCls))
+        class: C(s(z)(s(A)(s(c), "colors"), r.colorsCls))
       }, [
-        r.noRemover ? C("", !0) : (u(), y(h, {
+        r.noRemover ? k("", !0) : (u(), h(P, {
           key: 0,
           type: "remover",
           size: r.size,
@@ -117,23 +120,23 @@ const ke = /* @__PURE__ */ T({
           onClick: t[0] || (t[0] = (l) => B()),
           selected: !s(a) && $.value
         }, null, 8, ["size", "disabled", "selected"])),
-        (u(!0), b(W, null, M(v.value, (l) => (u(), y(h, m({
+        (u(!0), g(W, null, M(b.value, (l) => (u(), h(P, m({
           type: "color",
           size: r.size,
           icon: r.icon,
           disabled: s(i)
         }, { ref_for: !0 }, E(l), {
-          key: p(l),
+          key: v(l),
           onClick: (n) => B(l)
         }), j({ _: 2 }, [
           M(Object.keys(e.$slots), (n) => ({
             name: n,
             fn: f((x) => [
-              k(e.$slots, n, m({ ref_for: !0 }, { ...x, value: p(l) }))
+              y(e.$slots, n, m({ ref_for: !0 }, { ...x, value: v(l) }))
             ])
           }))
         ]), 1040, ["size", "icon", "disabled", "onClick"]))), 128)),
-        r.noCustomPicker ? C("", !0) : (u(), y(ne, m({
+        r.noCustomPicker ? k("", !0) : (u(), h(ne, m({
           key: 1,
           "reverse-placement-on-dir": "rtl",
           placement: "right-start",
@@ -146,7 +149,7 @@ const ke = /* @__PURE__ */ T({
             }, G.value), null, 16, ["defaultColor"])
           ]),
           default: f(() => [
-            S(h, {
+            S(P, {
               type: "custom-picker",
               size: r.size,
               customPickerIcon: r.customPickerIcon,
@@ -155,7 +158,7 @@ const ke = /* @__PURE__ */ T({
               M(Object.keys(e.$slots), (l) => ({
                 name: l,
                 fn: f((n) => [
-                  k(e.$slots, l, X(Y(n)))
+                  y(e.$slots, l, X(Y(n)))
                 ])
               }))
             ]), 1032, ["size", "customPickerIcon", "disabled"])

package/dist/Combobox/Combobox.d.ts

@@ -258,7 +258,7 @@ declare function __VLS_template(): {
             overlay: boolean;
             scrollDistance: number;
             scrollHideDelay: number;
-        }> & Omit<Readonly<import('..').ScrollContainerProps> & Readonly<{}>, "wrap" | "root" | "topVisible" | "bottomVisible" | "rightVisible" | "leftVisible" | "isOverflowX" | "isOverflowY" | "container" | "getScroll" | "scrollTop" | "scrollTopLeft" | ("type" | "size" | "overlay" | "scrollDistance" | "scrollHideDelay")> & import('vue').ShallowUnwrapRef<{
+        }> & Omit<Readonly<import('..').ScrollContainerProps> & Readonly<{}>, "wrap" | "container" | "root" | "topVisible" | "bottomVisible" | "rightVisible" | "leftVisible" | "isOverflowX" | "isOverflowY" | "getScroll" | "scrollTop" | "scrollTopLeft" | ("type" | "size" | "overlay" | "scrollDistance" | "scrollHideDelay")> & import('vue').ShallowUnwrapRef<{
             container: Ref<any, any>;
             wrap: Ref<any, any>;
             root: Ref<any, any>;
@@ -527,11 +527,12 @@ declare const __VLS_component: import('vue').DefineComponent<ComboboxProps, {
     "update:modelValue": (value: string | string[]) => any;
     closeAutoFocus: (event: Event) => any;
     openAutoFocus: (event: Event) => any;
+    openChange: (value?: boolean | null | undefined) => any;
+    "update:open": (value: boolean) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import('reka-ui').PointerDownOutsideEvent) => any;
     focusOutside: (event: import('reka-ui').FocusOutsideEvent) => any;
     interactOutside: (event: import('reka-ui').PointerDownOutsideEvent | import('reka-ui').FocusOutsideEvent) => any;
-    "update:open": (value: boolean) => any;
     "update:expandedKeys": (value: string[]) => any;
     keydownEnter: (value: KeyboardEvent, searchModel?: string | undefined) => any;
     keydownEscape: (value: KeyboardEvent) => any;
@@ -543,11 +544,12 @@ declare const __VLS_component: import('vue').DefineComponent<ComboboxProps, {
     "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onOpenChange?: ((value?: boolean | null | undefined) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import('reka-ui').PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import('reka-ui').FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import('reka-ui').PointerDownOutsideEvent | import('reka-ui').FocusOutsideEvent) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:expandedKeys"?: ((value: string[]) => any) | undefined;
     onKeydownEnter?: ((value: KeyboardEvent, searchModel?: string | undefined) => any) | undefined;
     onKeydownEscape?: ((value: KeyboardEvent) => any) | undefined;
@@ -564,6 +566,7 @@ declare const __VLS_component: import('vue').DefineComponent<ComboboxProps, {
     sideOffset: number;
     avoidCollisions: boolean;
     disableOutsidePointerEvents: boolean;
+    zIndex: number | string;
     checkbox: boolean;
     trailingIcon: string | boolean;
     selectedItemIconAsTrailingIcon: boolean;
@@ -828,7 +831,7 @@ declare const __VLS_component: import('vue').DefineComponent<ComboboxProps, {
         overlay: boolean;
         scrollDistance: number;
         scrollHideDelay: number;
-    }> & Omit<Readonly<import('..').ScrollContainerProps> & Readonly<{}>, "wrap" | "root" | "topVisible" | "bottomVisible" | "rightVisible" | "leftVisible" | "isOverflowX" | "isOverflowY" | "container" | "getScroll" | "scrollTop" | "scrollTopLeft" | ("type" | "size" | "overlay" | "scrollDistance" | "scrollHideDelay")> & import('vue').ShallowUnwrapRef<{
+    }> & Omit<Readonly<import('..').ScrollContainerProps> & Readonly<{}>, "wrap" | "container" | "root" | "topVisible" | "bottomVisible" | "rightVisible" | "leftVisible" | "isOverflowX" | "isOverflowY" | "getScroll" | "scrollTop" | "scrollTopLeft" | ("type" | "size" | "overlay" | "scrollDistance" | "scrollHideDelay")> & import('vue').ShallowUnwrapRef<{
         container: Ref<any, any>;
         wrap: Ref<any, any>;
         root: Ref<any, any>;