@pantograph/vue 0.9.0 → 0.10.0

package/dist/ColorPicker.vue_vue_type_style_index_0_lang-IZSWne-0.js

@@ -0,0 +1 @@
+"use strict";const t=require("vue"),Pe=require("./ActionButton.vue_vue_type_script_setup_true_lang-Db3ryil1.js"),ee=require("@vueuse/core"),Be=require("./Primitive-BT1RjuGS.js"),_=require("./class-CjZYGZDW.js"),Se=require("class-variance-authority"),te=require("./pick-DpwC5mlg.js"),y=require("./omit-DlH5U9Jc.js"),K=require("./get-BULsy4gy.js"),W=require("./isObjectLike-kO9e4B7g.js"),ne=require("./isArray-B7z6QoM5.js"),ve=require("./Icon.vue_vue_type_style_index_0_lang-BvHCdzZP.js"),Re=require("./Divider.vue_vue_type_style_index_0_lang-C6Suy0tD.js"),Le=require("radix-vue");function $(e,n,s){return Math.max(n,Math.min(e,s))}function Me(e,n){if(typeof e=="string"||typeof n=="string")return e===n;if(e){if(!n)return!1;for(const s in e)if(e[s]!==n[s])return!1}return!0}function z(e){const n=[],s=e.length>5?2:1;for(let r=1;r<e.length;r+=s){const l=e.substring(r,r+s).repeat(s%2+1),o=parseInt(l,16);n.push(r===3*s+1?o/255:o)}return n.length===3&&n.push(1),{r:n[0],g:n[1],b:n[2],a:n[3]}}function pe(e){const n=e.l/100,s=n+e.s/100*Math.min(n,1-n),r=s===0?0:200*(1-n/s);return{h:e.h,s:r,v:s*100,a:e.a}}function U(e){let n=e.h%360;n<0&&(n+=360);const s=e.s/100,r=e.l/100;return{r:J(0,n,s,r)*255,g:J(8,n,s,r)*255,b:J(4,n,s,r)*255,a:e.a}}function J(e,n,s,r){const l=(e+n/30)%12,o=s*Math.min(r,1-r);return r-o*Math.max(-1,Math.min(l-3,9-l,1))}function he(e){const n=e.s/100,s=e.v/100,r=s*(1-n/2);return{h:e.h,s:r===0||r===1?0:(s-r)/Math.min(r,1-r)*100,l:r*100,a:e.a}}function be(e){return{h:e.h,w:e.v*(100-e.s)/100,b:100-e.v,a:e.a}}function k(e){return U(he(e))}function N(e){const n=e.w/100,s=e.b/100;let r,l;const o=n+s;return o>=1?(r=0,l=n/o):(l=1-s,r=(1-n/l)*100),{h:e.h,s:r,v:l*100,a:e.a}}function G(e){const{r:n,g:s,b:r,a:l}=e,o=Math.min(n,s,r),a=Math.max(n,s,r),i=a-o,d=(a+o)/2;let u=0;i!==0&&(a===n?u=(s-r)/i+(s<r?6:0):a===s?u=(r-n)/i+2:a===r&&(u=(n-s)/i+4),u*=60);let b=0;return d!==0&&d!==255&&(b=(a-d)/Math.min(d,255-d)),{h:u,s:b*100,l:d/255*100,a:l}}function H(e){return"#"+Object.values(e).map((n,s)=>Math.round(s===3?n*255:n).toString(16).padStart(2,"0")).join("")}function D(e){return be(pe(G(e)))}const Ne={hex:{hex:e=>e,hsl:e=>G(z(e)),hsv:e=>N(D(z(e))),hwb:e=>D(z(e)),rgb:z},hsl:{hex:e=>H(U(e)),hsl:e=>e,hsv:pe,hwb:e=>D(U(e)),rgb:U},hsv:{hex:e=>H(k(e)),hsl:he,hsv:e=>e,hwb:be,rgb:k},hwb:{hex:e=>H(k(N(e))),hsl:e=>G(k(N(e))),hsv:N,hwb:e=>e,rgb:e=>k(N(e))},rgb:{hex:H,hsl:G,hsv:e=>N(D(e)),hwb:D,rgb:e=>e}};function oe(e,n,s){return Ne[e][n](s)}function Ve(e,n){const s=e.toFixed(n);return s.includes(".")?s.replace(/\.?0+$/,""):s}const Oe={deg:1,grad:.9,rad:180/Math.PI,turn:360},Y={from(e){return e.endsWith("%")?V.from(e,{referenceValue:1}):S.from(e,{min:0,max:1})},to(e){return S.to(e)}},le={from(e){const n=e.match(/deg|g?rad|turn$/);if(n===null)return S.from(e);const s=n[0];return S.from(e.slice(0,-s.length))*Oe[s]},to(e){return S.to(e)}},S={from(e,{min:n=Number.NEGATIVE_INFINITY,max:s=Number.POSITIVE_INFINITY}={}){return e.endsWith(".")?NaN:$(Number(e),n,s)},to(e){return Ve(e,2)}},V={from(e,{referenceValue:n=100,min:s=0,max:r=100}={}){return e.endsWith("%")?S.from(e.slice(0,-1),{min:s,max:r})*n/100:NaN},to(e){return S.to(e)+"%"}},Q={from(e){return e.endsWith("%")?V.from(e,{referenceValue:255}):S.from(e,{min:0,max:255})},to(e){return S.to(e)}},Ie={hsl:{h:le,s:V,l:V},hwb:{h:le,w:V,b:V},rgb:{r:Q,g:Q,b:Q}};function X(e,n){return Ie[e][n]}function Z({format:e,color:n},s){if(e==="hex")return s&&[5,9].includes(n.length)?n.substring(0,n.length-(n.length-1)/4):n;const r=Object.entries(n).slice(0,s?3:4).map(([l,o])=>{const a=l==="a"?Y:X(e,l);return(l==="a"?"/ ":"")+a.to(o)});return`${e}(${r.join(" ")})`}function ye(e){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(e)}function ke(e){return"r"in e?"rgb":"w"in e?"hwb":"v"in e?"hsv":"s"in e?"hsl":null}const ae={hsl:["h","s","l","a"],hwb:["h","w","b","a"],rgb:["r","g","b","a"]};function ie(e){if(!e)return null;if(typeof e!="string"){const i=ke(e);return i===null?null:{format:i,color:e}}if(e.startsWith("#"))return ye(e)?{format:"hex",color:e}:null;if(!e.includes("(")){const i=document.createElement("canvas").getContext("2d");i.fillStyle=e;const d=i.fillStyle;return d==="#000000"&&e!=="black"?null:{format:"hex",color:d}}const[n,s]=e.split("("),r=n.substring(0,3);if(!(r in ae))return null;const l=s.replace(/[,/)]/g," ").replace(/\s+/g," ").trim().split(" ");l.length===3&&l.push("1");const o=ae[r],a=Object.fromEntries(o.map((i,d)=>{const u=i==="a"?Y:X(r,i);return[i,u.from(l[d])]}));return{format:r,color:a}}const De=typeof window<"u",we=De&&"EyeDropper"in window,$e=e=>{const n=new AbortController;t.onUnmounted(()=>n.abort());async function s(){if(!we)return;const r=new window.EyeDropper;try{let o=(await r.open({signal:n.signal})).sRGBHex;if(o.startsWith("rgba")){const a=o.match(/rgba?\((?<r>\d+), (?<g>\d+), (?<b>\d+), (?<a>[\d.]+)\)/);if(a){const[i,d,u,b,c]=a;o=`rgba(${d}, ${u}, ${b}, ${parseFloat(c)===0?"1":c})`}}e(o)}catch(l){console.log("e ===>",l)}}return{openEyeDropper:s,abortController:n}};function Fe(e){return e===void 0}function ze(e,n){for(var s=-1,r=e==null?0:e.length;++s<r;)if(n(e[s],s,e))return!0;return!1}var He=1,qe=2;function Ce(e,n,s,r,l,o){var a=s&He,i=e.length,d=n.length;if(i!=d&&!(a&&d>i))return!1;var u=o.get(e),b=o.get(n);if(u&&b)return u==n&&b==e;var c=-1,h=!0,E=s&qe?new K.SetCache:void 0;for(o.set(e,n),o.set(n,e);++c<i;){var w=e[c],m=n[c];if(r)var C=a?r(m,w,c,n,e,o):r(w,m,c,e,n,o);if(C!==void 0){if(C)continue;h=!1;break}if(E){if(!ze(n,function(x,T){if(!K.cacheHas(E,T)&&(w===x||l(w,x,s,r,o)))return E.push(T)})){h=!1;break}}else if(!(w===m||l(w,m,s,r,o))){h=!1;break}}return o.delete(e),o.delete(n),h}function Ue(e){var n=-1,s=Array(e.size);return e.forEach(function(r,l){s[++n]=[l,r]}),s}var Ge=1,Ke=2,We="[object Boolean]",Ye="[object Date]",Xe="[object Error]",Je="[object Map]",Qe="[object Number]",Ze="[object RegExp]",je="[object Set]",en="[object String]",nn="[object Symbol]",tn="[object ArrayBuffer]",rn="[object DataView]",ue=W.Symbol?W.Symbol.prototype:void 0,j=ue?ue.valueOf:void 0;function sn(e,n,s,r,l,o,a){switch(s){case rn:if(e.byteLength!=n.byteLength||e.byteOffset!=n.byteOffset)return!1;e=e.buffer,n=n.buffer;case tn:return!(e.byteLength!=n.byteLength||!o(new y.Uint8Array(e),new y.Uint8Array(n)));case We:case Ye:case Qe:return y.eq(+e,+n);case Xe:return e.name==n.name&&e.message==n.message;case Ze:case en:return e==n+"";case Je:var i=Ue;case je:var d=r&Ge;if(i||(i=K.setToArray),e.size!=n.size&&!d)return!1;var u=a.get(e);if(u)return u==n;r|=Ke,a.set(e,n);var b=Ce(i(e),i(n),r,l,o,a);return a.delete(e),b;case nn:if(j)return j.call(e)==j.call(n)}return!1}var on=1,ln=Object.prototype,an=ln.hasOwnProperty;function un(e,n,s,r,l,o){var a=s&on,i=y.getAllKeys(e),d=i.length,u=y.getAllKeys(n),b=u.length;if(d!=b&&!a)return!1;for(var c=d;c--;){var h=i[c];if(!(a?h in n:an.call(n,h)))return!1}var E=o.get(e),w=o.get(n);if(E&&w)return E==n&&w==e;var m=!0;o.set(e,n),o.set(n,e);for(var C=a;++c<d;){h=i[c];var x=e[h],T=n[h];if(r)var M=a?r(T,x,h,n,e,o):r(x,T,h,e,n,o);if(!(M===void 0?x===T||l(x,T,s,r,o):M)){m=!1;break}C||(C=h=="constructor")}if(m&&!C){var R=e.constructor,L=n.constructor;R!=L&&"constructor"in e&&"constructor"in n&&!(typeof R=="function"&&R instanceof R&&typeof L=="function"&&L instanceof L)&&(m=!1)}return o.delete(e),o.delete(n),m}var cn=1,ce="[object Arguments]",fe="[object Array]",q="[object Object]",fn=Object.prototype,de=fn.hasOwnProperty;function dn(e,n,s,r,l,o){var a=ne.isArray(e),i=ne.isArray(n),d=a?fe:y.getTag(e),u=i?fe:y.getTag(n);d=d==ce?q:d,u=u==ce?q:u;var b=d==q,c=u==q,h=d==u;if(h&&y.isBuffer(e)){if(!y.isBuffer(n))return!1;a=!0,b=!1}if(h&&!b)return o||(o=new y.Stack),a||y.isTypedArray(e)?Ce(e,n,s,r,l,o):sn(e,n,d,s,r,l,o);if(!(s&cn)){var E=b&&de.call(e,"__wrapped__"),w=c&&de.call(n,"__wrapped__");if(E||w){var m=E?e.value():e,C=w?n.value():n;return o||(o=new y.Stack),l(m,C,s,r,o)}}return h?(o||(o=new y.Stack),un(e,n,s,r,l,o)):!1}function re(e,n,s,r,l){return e===n?!0:e==null||n==null||!W.isObjectLike(e)&&!W.isObjectLike(n)?e!==e&&n!==n:dn(e,n,s,r,re,l)}var mn=1,gn=2;function vn(e,n,s,r){var l=s.length,o=l;if(e==null)return!o;for(e=Object(e);l--;){var a=s[l];if(a[2]?a[1]!==e[a[0]]:!(a[0]in e))return!1}for(;++l<o;){a=s[l];var i=a[0],d=e[i],u=a[1];if(a[2]){if(d===void 0&&!(i in e))return!1}else{var b=new y.Stack,c;if(!(c===void 0?re(u,d,mn|gn,r,b):c))return!1}}return!0}function Ae(e){return e===e&&!y.isObject(e)}function pn(e){for(var n=y.keys(e),s=n.length;s--;){var r=n[s],l=e[r];n[s]=[r,l,Ae(l)]}return n}function Ee(e,n){return function(s){return s==null?!1:s[e]===n&&(n!==void 0||e in Object(s))}}function hn(e){var n=pn(e);return n.length==1&&n[0][2]?Ee(n[0][0],n[0][1]):function(s){return s===e||vn(s,e,n)}}var bn=1,yn=2;function wn(e,n){return y.isKey(e)&&Ae(n)?Ee(y.toKey(e),n):function(s){var r=K.get(s,e);return r===void 0&&r===n?te.hasIn(s,e):re(n,r,bn|yn)}}function Cn(e){return function(n){return n==null?void 0:n[e]}}function An(e){return function(n){return y.baseGet(n,e)}}function En(e){return y.isKey(e)?Cn(y.toKey(e)):An(e)}function _e(e){return typeof e=="function"?e:e==null?y.identity:typeof e=="object"?ne.isArray(e)?wn(e[0],e[1]):hn(e):En(e)}var _n="Expected a function";function Tn(e){if(typeof e!="function")throw new TypeError(_n);return function(){var n=arguments;switch(n.length){case 0:return!e.call(this);case 1:return!e.call(this,n[0]);case 2:return!e.call(this,n[0],n[1]);case 3:return!e.call(this,n[0],n[1],n[2])}return!e.apply(this,n)}}function xn(e,n){if(e==null)return{};var s=y.arrayMap(y.getAllKeysIn(e),function(r){return[r]});return n=_e(n),te.basePickBy(e,s,function(r,l){return n(r,l[0])})}function Pn(e,n){return xn(e,Tn(_e(n)))}const me=["sm","md","lg"],Bn=["error","warning"],ge=t.defineComponent({__name:"Input",props:{id:{},maxlength:{},type:{},placeholder:{},disabled:{type:Boolean,default:void 0},required:{type:Boolean},modelValue:{},defaultValue:{},leading:{},trailing:{},clearIcon:{default:"tabler:circle-x"},trailingCls:{},clearIconCls:{},dividerCls:{},leadingCls:{},class:{},allowClear:{type:Boolean},bordered:{type:Boolean,default:!0},size:{},status:{}},emits:["update:modelValue","clear","blur","focus"],setup(e,{expose:n,emit:s}){const r=e,l=t.useSlots(),o=s,a=ee.useVModel(r,"modelValue",o,{defaultValue:r.defaultValue,passive:r.modelValue===void 0}),i=t.computed(()=>!(l.leading||l.trailing||r.leading||r.trailing||r.allowClear||l.clearIcon)),d=t.computed(()=>i.value?"template":"div"),u=_.getBemBlock("input"),b=Se.cva(u,{variants:{size:_.generateVariantClassList(me,u),status:_.generateVariantClassList(Bn,u),bordered:_.generateVariantClassList("bordered",u)}}),c=t.computed(()=>r.size&&me.includes(r.size)?r.size:"md"),h=t.useAttrs(),E=t.shallowRef(),w=t.computed(()=>Pn({...te.pick(r,"id","maxlength","type","disabled","required","placeholder"),...h,onBlur:p=>{var P;(P=p.target)!=null&&P.value&&(p.target.value=a.value),i.value||(E.value=!1),o("blur",p)},onFocus:p=>{i.value||(E.value=!0),o("focus",p)}},Fe)),m=t.computed(()=>{switch(c.value){case"sm":return"2xsm";default:return"xsm"}}),C=t.computed(()=>{switch(c.value){case"sm":return"2xsm";case"md":return"xsm";default:return"sm"}}),x=()=>{a.value="",o("clear")},T=t.ref();return n({input:T,focus:p=>{var P;return(P=T.value)==null?void 0:P.focus(p)},blur:()=>{var p;return(p=T.value)==null?void 0:p.blur()},select:()=>{var p;return(p=T.value.input)==null?void 0:p.select()},setSelectionRange:(p,P,B)=>{var v;return(v=T.value.input)==null?void 0:v.setSelectionRange(p,P,B)}}),(p,P)=>(t.openBlock(),t.createBlock(t.unref(Be.Primitive),{as:d.value,asChild:i.value,class:t.normalizeClass([t.unref(b)({size:c.value,status:p.status,bordered:p.bordered}),r.class]),"data-disabled":i.value?void 0:p.disabled,"data-focus":E.value},{default:t.withCtx(()=>{var B;return[l.leading||r.leading?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass([t.unref(_.getBemElement)(t.unref(u),"leading"),p.leadingCls])},[t.renderSlot(p.$slots,"leading",{iconSize:C.value},()=>[t.createTextVNode(t.toDisplayString(p.leading),1)])],2)):t.createCommentVNode("",!0),t.withDirectives(t.createElementVNode("input",t.mergeProps({ref_key:"inputRef",ref:T,"onUpdate:modelValue":P[0]||(P[0]=v=>t.isRef(a)?a.value=v:null)},w.value,{class:[!i.value&&t.unref(_.getBemElement)(t.unref(u),"input")]}),null,16),[[t.vModelDynamic,t.unref(a)]]),l.trailing||r.trailing||p.allowClear?(t.openBlock(),t.createElementBlock("div",{key:1,class:t.normalizeClass([t.unref(_.getBemElement)(t.unref(u),"trailing"),p.trailingCls])},[!p.disabled&&p.allowClear&&((B=t.unref(a))!=null&&B.length)?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createVNode(ve._sfc_main,{icon:p.clearIcon,size:m.value,onClick:x,class:t.normalizeClass([t.unref(_.getBemElement)(t.unref(u),"clear_icon"),p.clearIconCls])},{default:t.withCtx(()=>[t.renderSlot(p.$slots,"clearIcon")]),_:3},8,["icon","size","class"]),l.trailing||r.trailing?(t.openBlock(),t.createBlock(Re._sfc_main,{key:0,type:"vertical",class:t.normalizeClass([t.unref(_.getBemElement)(t.unref(u),"divider"),p.dividerCls])},null,8,["class"])):t.createCommentVNode("",!0)],64)):t.createCommentVNode("",!0),t.renderSlot(p.$slots,"trailing",{iconSize:C.value},()=>[t.createTextVNode(t.toDisplayString(p.trailing),1)])],2)):t.createCommentVNode("",!0)]}),_:3},8,["as","asChild","class","data-disabled","data-focus"]))}});function Sn(e,n,s){const r=e.getBoundingClientRect(),l=n-r.left,o=s-r.top;return{x:r.width===0?0:$(l/r.width*100,0,100),y:r.height===0?0:$((1-o/r.height)*100,0,100)}}const Rn=t.defineComponent({__name:"ColorPickerSpace",setup(e){const n=Te();let s=!1,r;function l(c){r=document.body.style.userSelect,document.body.style.userSelect="none",s=!0,i(c)}function o(c){s=!0,d(c)}function a(){document.body.style.userSelect=r,s=!1}function i(c){c.buttons!==1||!s||!(n.colorSpace.value instanceof HTMLElement)||u(n.colorSpace.value,c.clientX,c.clientY)}function d(c){if(!s||!(n.colorSpace.value instanceof HTMLElement))return;c.preventDefault();const h=c.touches[0];u(n.colorSpace.value,h.clientX,h.clientY)}function u(c,h,E){const w=Sn(c,h,E),m={...n.colors.hsv};m.s=w.x,m.v=w.y,n.setColor("hsv",m)}function b(c){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(c.key))return;c.preventDefault();const h=["ArrowLeft","ArrowDown"].includes(c.key)?-1:1,E=["ArrowLeft","ArrowRight"].includes(c.key)?"s":"v",w=c.shiftKey?10:1,m=n.colors.hsv[E]+h*w,C={...n.colors.hsv};C[E]=$(m,0,100),n.setColor("hsv",C)}return t.onMounted(()=>{document.addEventListener("mousemove",i,{passive:!1}),document.addEventListener("touchmove",d,{passive:!1}),document.addEventListener("mouseup",a),document.addEventListener("touchend",a)}),t.onBeforeUnmount(()=>{document.removeEventListener("mousemove",i),document.removeEventListener("touchmove",d),document.removeEventListener("mouseup",a),document.removeEventListener("touchend",a)}),(c,h)=>(t.openBlock(),t.createElementBlock("div",{ref:t.unref(n).colorSpace,class:t.normalizeClass([t.unref(_.getBemElement)(t.unref(O),"space")]),onMousedown:l,onTouchstart:o},[t.createElementVNode("button",{ref:t.unref(n).thumb,class:t.normalizeClass([t.unref(_.getBemElement)(t.unref(O),"thumb")]),tabindex:"0","aria-label":"Color space thumb",onKeydown:b},null,34)],34))}}),Ln=["value"],Mn=["value"],[Te,xe]=Le.createContext("ColorPicker"),O=_.getBemBlock("color_picker"),Nn=t.defineComponent({__name:"ColorPicker",props:{class:{},color:{},defaultColor:{default:"#ffffffff"},format:{},defaultFormat:{default:"hex"},hideAlpha:{type:Boolean}},emits:["update:color","update:format","change"],setup(e,{emit:n}){const s=["hex","hsl","hsv","hwb","rgb"],r=e,l=n,o=t.ref(null),a=t.ref(null),i=t.ref(null),d=ee.useVModel(r,"format",l,{defaultValue:r.defaultFormat,passive:r.format===void 0}),u=t.computed(()=>d.value&&s.includes(d.value)?d.value:"hex"),b=ee.useVModel(r,"color",l,{defaultValue:r.defaultColor,passive:r.color===void 0}),c="#ffffffff",h=t.computed(()=>b.value??r.defaultColor??c);t.watch(h,x);const E=t.computed(()=>{const v=u.value,f=m[v];return v.split("").map(g=>{const A=f[g];return{value:X(v,g).to(A),channel:g,label:g.toUpperCase()}}).concat(r.hideAlpha?[]:[{value:Y.to(f.a),channel:"a",label:"Alpha"}])}),w=t.computed({get(){return r.hideAlpha&&[5,9].includes(m.hex.length)?m.hex.substring(0,m.hex.length-(m.hex.length-1)/4):m.hex},set(v){ye(v)&&C("hex",v)}}),m=t.reactive({hex:c,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 C(v,f){let g=f;if(r.hideAlpha)if(typeof f!="string")f.a=1,g=f;else if([5,9].includes(f.length)){const A=(f.length-1)/4;g=f.substring(0,f.length-A)+"f".repeat(A)}else[4,7].includes(f.length)&&(g=f+"f".repeat((f.length-1)/3));if(!Me(m[v],g)){m[v]=g;for(const A of s)A!==v&&(m[A]=oe(v,A,g));b.value=Z({color:oe(v,u.value,g),format:u.value},r.hideAlpha),l("change",se())}o.value instanceof HTMLElement&&a.value instanceof HTMLElement&&i.value instanceof HTMLElement&&L(o.value,a.value,i.value)}function x(v){const f=ie(v);if(f!==null)C(f.format,f.color);else{const g=ie(c);g!==null&&C(g.format,g.color)}}function T(v){d.value=v}function M(v,f){const g=v.currentTarget,A={...m.hsv};A[f]=Number(g.value),C("hsv",A)}function R(v,f){const g=u.value,A={...m[g]},F=(f==="a"?Y:X(g,f)).from(v);Number.isNaN(v)||v===void 0||(A[f]=F,C(g,A))}function L(v,f,g){const A=Z({format:"hsl",color:m.hsl},!0);v.style.setProperty("--vacp-color",A),f.style.position="relative",f.style.backgroundColor=`hsl(${m.hsl.h} 100% 50%)`,f.style.backgroundImage="linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)",g.style.boxSizing="border-box",g.style.position="absolute",g.style.left=`${m.hsv.s}%`,g.style.bottom=`${m.hsv.v}%`}function se(){const v=Z({color:m[u.value],format:u.value},r.hideAlpha);return{colors:m,cssColor:v}}function p(v){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(v.key)||!v.shiftKey)return;const f=v.currentTarget,g=Number(f.step),A=["ArrowLeft","ArrowDown"].includes(v.key)?-1:1,I=Number(f.value)+A*g*10,F=$(I,Number(f.min),Number(f.max));f.value=String(F-A*g)}const{openEyeDropper:P}=$e(x);t.onMounted(()=>x(h.value)),xe({colorSpace:a,thumb:i,colors:m,setColor:C});const B=_.getBemElement(O,"slider");return(v,f)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"colorPicker",ref:o,class:t.normalizeClass([t.unref(O),r.class])},[t.createVNode(Rn),t.createElementVNode("div",{class:t.normalizeClass(t.unref(_.getBemElement)(t.unref(O),"sliders"))},[t.createElementVNode("input",{class:t.normalizeClass([t.unref(B),t.unref(_.getBemModifier)(t.unref(B),"hue")]),value:m.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:p,onInput:f[0]||(f[0]=g=>M(g,"h"))},null,42,Ln),v.hideAlpha?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("input",{key:0,class:t.normalizeClass([t.unref(B),t.unref(_.getBemModifier)(t.unref(B),"alpha")]),value:m.hsv.a,type:"range",min:"0",max:"1",step:"0.01",onKeydownPassive:p,onInput:f[1]||(f[1]=g=>M(g,"a"))},null,42,Mn))],2),t.createElementVNode("div",{class:t.normalizeClass(t.unref(_.getBemElement)(t.unref(O),"inputs"))},[t.createElementVNode("button",{disabled:!0,class:"fake-select",onClick:f[2]||(f[2]=g=>T("rgb"))},[f[4]||(f[4]=t.createElementVNode("div",null,"Hex",-1)),t.createVNode(ve._sfc_main,{icon:"tabler:chevron-down",size:"2xsm",class:"fake-select-icon"})]),u.value==="hex"?(t.openBlock(),t.createBlock(ge,{key:0,class:"flex-1",size:"sm",modelValue:w.value,"onUpdate:modelValue":f[3]||(f[3]=g=>w.value=g)},null,8,["modelValue"])):(t.openBlock(!0),t.createElementBlock(t.Fragment,{key:1},t.renderList(E.value,({value:g,channel:A})=>(t.openBlock(),t.createBlock(ge,{modelValue:g,"onUpdate:modelValue":I=>R(I,A),size:"sm"},null,8,["modelValue","onUpdate:modelValue"]))),256)),t.unref(we)?(t.openBlock(),t.createBlock(Pe._sfc_main,{key:2,onClick:t.unref(P),icon:"tabler:color-picker",size:"sm",type:"outline",variant:"icon"},null,8,["onClick"])):t.createCommentVNode("",!0)],2)],2))}});exports._sfc_main=Nn;exports.injectColorPickerContext=Te;exports.provideColorPickerContext=xe;

package/dist/ColorSwatch/ColorSwatch.d.ts

@@ -0,0 +1,27 @@
+import { GraphicalObjectProps } from '../GraphicalObject/GraphicalObject';
+import { ColorSwatchType, ColorSwatchSize } from './ColorSwatch.model';
+export type ColorSwatchProps = Omit<GraphicalObjectProps, 'as'> & {
+    selected?: boolean;
+    size?: ColorSwatchSize;
+    type?: ColorSwatchType;
+    customPickerIcon?: string;
+};
+export interface ColorSwatchSlots {
+    default?: (props?: ColorSwatchProps & {
+        value?: string;
+    }) => never;
+    icon?: (props?: ColorSwatchProps & {
+        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<{}>, {
+    size: "sm" | "md";
+    type: "color" | "remover" | "custom-picker";
+    customPickerIcon: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<ColorSwatchSlots> & ColorSwatchSlots>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/ColorSwatch/index.d.ts

@@ -0,0 +1,2 @@
+export { type ColorSwatchProps, type ColorSwatchSlots, default, default as ColorSwatch, } from './ColorSwatch';
+export * from './ColorSwatch.model';

package/dist/ColorSwatch/index.js.js

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

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

@@ -0,0 +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;

package/dist/ColorSwatch.vue_vue_type_style_index_0_lang-Bf0glWPU.js

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

package/dist/ColorSwatch.vue_vue_type_style_index_0_lang-Dki5150Z.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),g=require("./GraphicalObject.vue_vue_type_script_setup_true_lang-Bouixpu2.js"),k=require("./options-B4iSAKol.js"),_=require("./omit-DlH5U9Jc.js"),s=require("./class-CjZYGZDW.js"),C=require("class-variance-authority"),f=require("./Primitive-BT1RjuGS.js"),h=require("./IconButton.vue_vue_type_script_setup_true_lang-CufKPHFD.js"),c=["sm","md"],l=["color","remover","custom-picker"],z={key:1,height:"100%",width:"100%",viewBox:"0 0 19 18",fill:"none"},P=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(u){const o=u,r=s.getBemBlock("color_swatch"),p=C.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,..._.omit(o,"size","class","type","selected")})),d=e.useSlots(),v=e.computed(()=>{switch(o.type){case"color":return"div";case"custom-picker":return h._sfc_main;case"remover":return"div"}}),y=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.unref(f.Primitive),e.mergeProps({as:v.value,class:[e.unref(p)({selected:t.type!=="custom-picker"&&o.selected,size:t.size,type:t.type}),o.class]},y.value),{icon:e.withCtx(()=>[e.renderSlot(t.$slots,"icon",e.normalizeProps(e.guardReactiveProps(o)))]),default:e.withCtx(()=>[t.type==="color"?(e.openBlock(),e.createBlock(g._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,["as","class"]))}});exports.ColorSwatchSizes=c;exports.ColorSwatchTypes=l;exports._sfc_main=P;

package/dist/ColorSwatchGroup/ColorSwatchGroup.d.ts

@@ -0,0 +1,60 @@
+import { PrimitiveProps } from 'radix-vue';
+import { Class } from '../types';
+import { ColorSwatchProps, ColorSwatchSlots } from '../ColorSwatch/ColorSwatch';
+import { ColorSwatchSize } from '../ColorSwatch/ColorSwatch.model';
+import { VisibleColorFormat } from '../ColorPicker/types.js';
+import { PopoverProps } from '../Popover/index.js';
+import { ColorPickerProps } from '../ColorPicker/index.js';
+interface ColorObject extends Partial<Pick<ColorSwatchProps, 'bg' | 'fg' | 'br' | 'icon'>> {
+    value: string;
+}
+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'>> & {
+    class?: Class;
+    size?: ColorSwatchSize;
+    noRemover?: boolean;
+    noCustomPicker?: boolean;
+    modelValue?: string;
+    headerCls?: string;
+    header?: string;
+    colorsCls?: string;
+    defaultValue?: string;
+    colors?: ColorSwatchItem[];
+    colorMode?: ColorMode | {
+        fg?: ColorMode;
+        bg?: ColorMode;
+        br?: ColorMode;
+        value: ColorMode;
+    };
+    popoverProps?: PopoverProps;
+};
+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, {} & {
+    "update:modelValue": (value?: string | undefined) => any;
+    "update:format": (value: VisibleColorFormat) => any;
+}, string, import('vue').PublicProps, Readonly<ColorSwatchGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value?: string | undefined) => any) | undefined;
+    "onUpdate:format"?: ((value: VisibleColorFormat) => any) | undefined;
+}>, {
+    size: "sm" | "md";
+    colorMode: ColorMode | {
+        fg?: ColorMode | undefined;
+        bg?: ColorMode | undefined;
+        br?: ColorMode | undefined;
+        value: ColorMode;
+    };
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<ColorSwatchSlots & {
+    header: () => never;
+}> & ColorSwatchSlots & {
+    header: () => never;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/ColorSwatchGroup/index.d.ts

@@ -0,0 +1 @@
+export { type ColorSwatchItem, type ColorSwatchGroupEmits, type ColorSwatchGroupProps, default, default as ColorSwatchGroup, } from './ColorSwatchGroup';

package/dist/ColorSwatchGroup/index.js.js

@@ -0,0 +1,165 @@
+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"]));
+  }
+});
+export {
+  ke as ColorSwatchGroup,
+  ke as default
+};

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

@@ -0,0 +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;

package/dist/ColorTrigger/ColorTrigger.d.ts

@@ -0,0 +1,22 @@
+import { GraphicalObjectProps } from '../GraphicalObject/GraphicalObject';
+import { ColorTriggerSize } from './ColorTrigger.model';
+export type ColorTriggerProps = Partial<Pick<GraphicalObjectProps, 'icon' | 'bg' | 'br' | 'fg' | 'as' | 'class'>> & {
+    size?: ColorTriggerSize;
+    borderless?: boolean;
+    suffixIcon?: boolean | string;
+};
+export interface ColorTriggerSlots {
+    default?: () => never;
+    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>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/ColorTrigger/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ColorTrigger, default, type ColorTriggerSlots, type ColorTriggerProps, } from './ColorTrigger';
+export * from './ColorTrigger.model';

package/dist/ColorTrigger/index.js.js

@@ -0,0 +1,92 @@
+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"]));
+  }
+});
+export {
+  J as ColorTrigger,
+  d as ColorTriggerSizes,
+  J as default
+};

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

@@ -0,0 +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;