@shtabapp/ui-kit 1.34.0 → 1.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/{SAvatar-C2gekygl.cjs → SAvatar-D5SreJLe.cjs} +1 -1
- package/dist/{SAvatar-DAfDAqrP.js → SAvatar-q1HSZPqy.js} +1 -1
- package/dist/{SAvatarGroup-HvIlI5y0.js → SAvatarGroup-By-5Ub6i.js} +1 -1
- package/dist/{SAvatarGroup-76j-sHCe.cjs → SAvatarGroup-CdVjv8sb.cjs} +1 -1
- package/dist/SColorPalette-CqfVzhda.cjs +1 -0
- package/dist/SColorPalette-D2WCADDX.js +146 -0
- package/dist/SColorPicker-BcRHiLjI.cjs +1 -0
- package/dist/{SColorPicker-Cs0QmYWm.js → SColorPicker-BnfGvKy4.js} +215 -208
- package/dist/SInput-C07kFnj_.cjs +1 -0
- package/dist/{SInput-iNlzBX5m.js → SInput-CkanJfLx.js} +45 -44
- package/dist/{SList-C_S9ej45.js → SList-B40rJ-PZ.js} +1 -1
- package/dist/{SList-CU2Sy9Md.cjs → SList-Txr46zQ5.cjs} +1 -1
- package/dist/SListItem-BKP5Wk1F.cjs +1 -0
- package/dist/{SListItem-BD7wvCNe.js → SListItem-DKrpL2SS.js} +56 -56
- package/dist/SSelect-BPYtkzaw.cjs +1 -0
- package/dist/{SSelect-AcH04gtk.js → SSelect-XSZjYLBA.js} +221 -219
- package/dist/STab-BbzowB-Y.cjs +1 -0
- package/dist/STab-DY1TGadw.js +218 -0
- package/dist/{STabs-Ce7tHq8T.js → STabs-CTM8Nji_.js} +1 -1
- package/dist/{STabs-C6QQnCZd.cjs → STabs-DeHqnjNJ.cjs} +1 -1
- package/dist/{STag-COwzellL.js → STag-CluIVRKi.js} +42 -39
- package/dist/STag-D1mmp1kd.cjs +1 -0
- package/dist/{STagGroup-CKxDA9Y0.cjs → STagGroup-BMIwBk-O.cjs} +1 -1
- package/dist/{STagGroup-Cbe0AENj.js → STagGroup-wSpc3guU.js} +1 -1
- package/dist/{colorValue-DXJiNKGE.js → colorValue-CSh0chxp.js} +1 -1
- package/dist/{colorValue-DClAEDHr.cjs → colorValue-Dda7fKd3.cjs} +1 -1
- package/dist/components/SAvatar/utils/getAvatarInitialsTextColor.d.ts +1 -1
- package/dist/components/SAvatar/utils/getAvatarInitialsTextColor.d.ts.map +1 -1
- package/dist/components/SColorPalette/SColorPalette.vue.d.ts.map +1 -1
- package/dist/components/SColorPicker/SColorPicker.vue.d.ts.map +1 -1
- package/dist/components/SColorPicker/parts/SColorArea.vue.d.ts.map +1 -1
- package/dist/components/SColorPicker/parts/SColorValues.vue.d.ts.map +1 -1
- package/dist/components/SInput/SInput.vue.d.ts.map +1 -1
- package/dist/components/SListItem/SListItem.vue.d.ts.map +1 -1
- package/dist/components/SSelect/SSelect.types.d.ts +13 -1
- package/dist/components/SSelect/SSelect.types.d.ts.map +1 -1
- package/dist/components/SSelect/SSelect.vue.d.ts.map +1 -1
- package/dist/components/SSelect/index.d.ts +1 -1
- package/dist/components/SSelect/index.d.ts.map +1 -1
- package/dist/components/STab/STab.vue.d.ts.map +1 -1
- package/dist/components/STag/STag.vue.d.ts.map +1 -1
- package/dist/contrastSurfaceTextColor-BDlLSSXC.js +33 -0
- package/dist/contrastSurfaceTextColor-BRjRzXyZ.cjs +1 -0
- package/dist/entries/avatar-group.cjs +1 -1
- package/dist/entries/avatar-group.js +1 -1
- package/dist/entries/avatar.cjs +1 -1
- package/dist/entries/avatar.js +1 -1
- package/dist/entries/color-palette.cjs +1 -1
- package/dist/entries/color-palette.js +2 -2
- package/dist/entries/color-picker.cjs +1 -1
- package/dist/entries/color-picker.js +3 -3
- package/dist/entries/input.cjs +1 -1
- package/dist/entries/input.js +1 -1
- package/dist/entries/list-item.cjs +1 -1
- package/dist/entries/list-item.js +1 -1
- package/dist/entries/list.cjs +1 -1
- package/dist/entries/list.js +1 -1
- package/dist/entries/select.cjs +1 -1
- package/dist/entries/select.d.ts +1 -1
- package/dist/entries/select.d.ts.map +1 -1
- package/dist/entries/select.js +1 -1
- package/dist/entries/tab.cjs +1 -1
- package/dist/entries/tab.js +1 -1
- package/dist/entries/tabs.cjs +1 -1
- package/dist/entries/tabs.js +2 -2
- package/dist/entries/tag-group.cjs +1 -1
- package/dist/entries/tag-group.js +2 -2
- package/dist/entries/tag.cjs +1 -1
- package/dist/entries/tag.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +16 -15
- package/dist/utils/color/contrastSurfaceTextColor.d.ts +1 -1
- package/dist/utils/color/contrastSurfaceTextColor.d.ts.map +1 -1
- package/package.json +5 -2
- package/dist/SColorPalette-B9WrqgRz.js +0 -146
- package/dist/SColorPalette-CYGnmIWP.cjs +0 -1
- package/dist/SColorPicker-D7QwVS2t.cjs +0 -1
- package/dist/SInput-DYS84eMS.cjs +0 -1
- package/dist/SListItem-BDkldLVt.cjs +0 -1
- package/dist/SSelect-CT3AMH-u.cjs +0 -1
- package/dist/STab-C8RXx0lW.cjs +0 -1
- package/dist/STab-DXGKWtFI.js +0 -218
- package/dist/STag-HgFvU1Iy.cjs +0 -1
- package/dist/contrastSurfaceTextColor-Dl641cZ_.js +0 -33
- package/dist/contrastSurfaceTextColor-Ybh-FZof.cjs +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
## [@shtabapp/ui-kit-v1.35.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.34.0...@shtabapp/ui-kit@1.35.0) (2026-07-02)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
- i18n locales ([b802004](https://gitlab.com/mstikharev/shtab-ui-kit/commit/b802004286151474bb23e8dbc35d37395ea178c3))
|
|
6
|
+
|
|
1
7
|
## [@shtabapp/ui-kit-v1.34.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.33.0...@shtabapp/ui-kit@1.34.0) (2026-07-01)
|
|
2
8
|
|
|
3
9
|
### Features
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("./SBadge-d1GOPFP-.cjs"),t=require("./contrastSurfaceTextColor-
|
|
1
|
+
const e=require("./SBadge-d1GOPFP-.cjs"),t=require("./contrastSurfaceTextColor-BRjRzXyZ.cjs");let n=require("vue"),r=require("@shtabapp/ui-kit-primitives");var i=function(e){return e.SIZE_80=`80`,e.SIZE_72=`72`,e.SIZE_64=`64`,e.SIZE_56=`56`,e.SIZE_48=`48`,e.SIZE_40=`40`,e.SIZE_32=`32`,e.SIZE_24=`24`,e.SIZE_20=`20`,e.SIZE_16=`16`,e}({}),a=function(e){return e.CIRCLE=`circle`,e.SQUARE=`square`,e}({}),o=function(e){return e.TEAL=`teal`,e.CYAN=`cyan`,e.INDIGO=`indigo`,e.VIOLET=`violet`,e.PINK=`pink`,e.SURFACE=`surface`,e}({}),s=function(e){return e.NEUTRAL=`neutral`,e.MAIN=`main`,e}({}),c=function(e){return e.DEFAULT=`default`,e.ONLINE=`online`,e.OFFLINE=`offline`,e.RECENTLY=`recently`,e.ERROR=`error`,e.TRACK=`track`,e.DONE=`done`,e.CONTROLLER=`controller`,e.FAVORITE=`favorite`,e.PIN=`pin`,e.PRIVATE=`private`,e}({}),l=function(e){return e.SMALL=`s`,e.MEDIUM=`m`,e.LARGE=`l`,e}({}),u={[i.SIZE_80]:`s-ui-typography-heading-h3-semibold`,[i.SIZE_72]:`s-ui-typography-heading-h4-semibold`,[i.SIZE_64]:`s-ui-typography-heading-h4-semibold`,[i.SIZE_56]:`s-ui-typography-label-16-medium`,[i.SIZE_48]:`s-ui-typography-label-16-medium`,[i.SIZE_40]:`s-ui-typography-label-16-medium`,[i.SIZE_32]:`s-ui-typography-label-14-medium`,[i.SIZE_24]:`s-ui-typography-label-12-medium`,[i.SIZE_20]:`s-ui-typography-label-12-medium`,[i.SIZE_16]:`s-ui-typography-label-10-medium`},d={[i.SIZE_80]:40,[i.SIZE_72]:40,[i.SIZE_64]:40,[i.SIZE_56]:32,[i.SIZE_48]:32,[i.SIZE_40]:24,[i.SIZE_32]:24,[i.SIZE_24]:20,[i.SIZE_20]:16,[i.SIZE_16]:16},f={[i.SIZE_80]:l.LARGE,[i.SIZE_72]:l.LARGE,[i.SIZE_64]:l.MEDIUM,[i.SIZE_56]:l.MEDIUM,[i.SIZE_48]:l.SMALL,[i.SIZE_40]:l.SMALL,[i.SIZE_32]:l.SMALL,[i.SIZE_24]:l.SMALL,[i.SIZE_20]:l.SMALL,[i.SIZE_16]:l.SMALL},p={[l.SMALL]:e.i.SMALL,[l.MEDIUM]:e.i.MEDIUM,[l.LARGE]:e.i.LARGE},m={[e.i.SMALL]:8,[e.i.MEDIUM]:10,[e.i.LARGE]:12},h={[e.i.SMALL]:12,[e.i.MEDIUM]:16,[e.i.LARGE]:20},g=16,_={[i.SIZE_80]:0,[i.SIZE_72]:0,[i.SIZE_64]:0,[i.SIZE_56]:0,[i.SIZE_48]:0,[i.SIZE_40]:0,[i.SIZE_32]:-2,[i.SIZE_24]:-2,[i.SIZE_20]:-4,[i.SIZE_16]:-4},v={[i.SIZE_80]:-8,[i.SIZE_72]:-8,[i.SIZE_64]:-8,[i.SIZE_56]:-8,[i.SIZE_48]:-8,[i.SIZE_40]:-8,[i.SIZE_32]:-8,[i.SIZE_24]:-8,[i.SIZE_20]:-10,[i.SIZE_16]:-10},y={[c.DEFAULT]:e.n.MAIN,[c.ONLINE]:e.n.SUCCESS,[c.OFFLINE]:e.n.WHITE,[c.RECENTLY]:e.n.WARNING,[c.ERROR]:e.n.DANGER,[c.TRACK]:e.n.MAIN,[c.DONE]:e.n.SUCCESS,[c.CONTROLLER]:e.n.MAIN,[c.FAVORITE]:e.n.WARNING,[c.PIN]:e.n.MAIN,[c.PRIVATE]:e.n.BILLING},b={[c.TRACK]:r.ESIconName.playFill,[c.DONE]:r.ESIconName.checkBold,[c.CONTROLLER]:r.ESIconName.controlFill,[c.FAVORITE]:r.ESIconName.starFill,[c.PIN]:r.ESIconName.pinFill,[c.PRIVATE]:r.ESIconName.tabooBold},x=({avatarSize:e,badgeSize:t,hasIcon:n})=>{let r=_[e];return n?r:r+(h[t]-m[t])/2},S=(e,t)=>({offsetX:-e-t/2,offsetY:-e-t/2}),C=(e,t)=>({offsetX:-e-t/2,offsetY:e+t/2}),w=({badge:t,counter:r,size:i})=>{let a=(0,n.computed)(()=>{let r=(0,n.toValue)(t);if(!r)return;let a=(0,n.toValue)(i),o=b[r],s=p[f[a]],c=o?h[s]:m[s],l=S(x({avatarSize:a,badgeSize:s,hasIcon:!!o}),c);return{anchored:!0,color:y[r],icon:o,label:r,offsetX:l.offsetX,offsetY:l.offsetY,placement:e.r.BOTTOM_END,size:s}}),o=(0,n.computed)(()=>{let t=(0,n.toValue)(r);if(typeof t!=`number`)return;let a=v[(0,n.toValue)(i)],o=C(a,g);return{anchored:!0,color:e.n.MAIN,offsetX:o.offsetX,offsetY:o.offsetY,placement:e.r.TOP_END,size:e.i.MEDIUM,value:t}});return{avatarBadgeItemsProps:(0,n.computed)(()=>{let e=[];return o.value&&e.push(o.value),a.value&&e.push(a.value),e})}},T={[o.CYAN]:`#127c97`,[o.INDIGO]:`#755ace`,[o.PINK]:`#c33c86`,[o.TEAL]:`#158472`,[o.VIOLET]:`#8757c7`},E=e=>{if(t.n(e))return e;if(e!==o.SURFACE)return T[e]},D=e=>{let n=E(e);if(n)return t.t(n)},O=e=>t.n(e),k=e=>O(e)?`s-ui-avatar--color-custom`:`s-ui-avatar--color-${e}`,A=e=>{let t=D(e),n={};if(O(e)&&(n[`--s-ui-avatar-background`]=e),t&&(n[`--s-ui-avatar-color`]=t),Object.keys(n).length!==0)return n},j=[`aria-disabled`],M={class:`s-ui-avatar__content`},N=[`src`,`alt`],P={key:1,class:`s-ui-avatar__icon`},F=[`role`,`aria-label`],I={key:0,class:`s-ui-avatar__name`},L=(0,n.defineComponent)({inheritAttrs:!1,__name:`SAvatar`,props:{alt:{},badge:{},bordered:{type:Boolean,default:!0},color:{default:()=>o.TEAL},counter:{},disabled:{type:Boolean,default:!1},icon:{},iconBackground:{default:()=>s.NEUTRAL},initialLength:{default:1},name:{},shape:{default:()=>a.CIRCLE},showName:{type:Boolean,default:!0},size:{default:()=>i.SIZE_40},src:{}},setup(t){let i=(0,n.useAttrs)(),a=(0,n.ref)(!1),o=e=>typeof e==`number`||typeof e==`string`,s=(0,n.computed)(()=>{if(o(i.tabindex))return i.tabindex;if(o(i.tabIndex))return i.tabIndex}),c=(0,n.computed)(()=>o(i.tabindex)||o(i.tabIndex)),l=(0,n.computed)(()=>t.disabled?-1:c.value?s.value:0),f=(0,n.computed)(()=>({...i,tabindex:l.value})),p=(0,n.computed)(()=>[`s-ui-avatar--size-${t.size}`,`s-ui-avatar--shape-${t.shape}`,k(t.color),`s-ui-avatar--icon-background-${t.iconBackground}`,{"s-ui-avatar--bordered":t.bordered,"s-ui-avatar--disabled":t.disabled,"s-ui-avatar--icon":g.value,"s-ui-avatar--photo":h.value}]),m=(0,n.computed)(()=>{if(!g.value)return A(t.color)}),h=(0,n.computed)(()=>!!(t.src&&!a.value)),g=(0,n.computed)(()=>!!(!h.value&&t.icon)),_=e=>{let t=e.split(/\s+/).filter(Boolean);if(t.length===1){let e=t[0];if(e)return e}return t.map(e=>e.slice(0,1)).join(``)},v=(0,n.computed)(()=>t.name?_(t.name):``),y=(0,n.computed)(()=>t.alt?t.alt:t.name?t.name:v.value),b=(0,n.computed)(()=>{if(t.alt)return t.alt;if(t.name)return t.name}),x=(0,n.computed)(()=>v.value.slice(0,Math.max(t.initialLength,0))),S=(0,n.computed)(()=>u[t.size]),C=(0,n.computed)(()=>d[t.size]),{avatarBadgeItemsProps:T}=w({badge:()=>t.badge,counter:()=>t.counter,size:()=>t.size}),E=()=>{a.value=!0};return(0,n.watch)(()=>t.src,()=>{a.value=!1}),(i,o)=>((0,n.openBlock)(),(0,n.createElementBlock)(`span`,(0,n.mergeProps)(f.value,{class:[`s-ui-avatar`,p.value],style:m.value,"aria-disabled":t.disabled||void 0}),[(0,n.createElementVNode)(`span`,M,[t.src&&!a.value?((0,n.openBlock)(),(0,n.createElementBlock)(`img`,{key:0,class:`s-ui-avatar__image`,src:t.src,alt:y.value,onError:E},null,40,N)):t.icon?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,P,[(0,n.createVNode)((0,n.unref)(r.SIcon),{name:t.icon,size:C.value,"aria-label":b.value},null,8,[`name`,`size`,`aria-label`])])):((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:2,class:(0,n.normalizeClass)([`s-ui-avatar__initials`,S.value]),role:t.alt?`img`:void 0,"aria-label":t.alt},(0,n.toDisplayString)(x.value),11,F)),((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)((0,n.unref)(T),t=>((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(e.t),(0,n.mergeProps)({key:t.placement},{ref_for:!0},t),null,16))),128))]),t.showName&&t.name?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,I,(0,n.toDisplayString)(t.name),1)):(0,n.createCommentVNode)(``,!0)],16,j))}});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return L}});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { i as e, n as t, r as n, t as r } from "./SBadge-BDxQJh6c.js";
|
|
2
|
-
import { n as i, t as a } from "./contrastSurfaceTextColor-
|
|
2
|
+
import { n as i, t as a } from "./contrastSurfaceTextColor-BDlLSSXC.js";
|
|
3
3
|
import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeProps as m, normalizeClass as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, toValue as b, unref as x, useAttrs as S, watch as C } from "vue";
|
|
4
4
|
import { ESIconName as w, SIcon as T } from "@shtabapp/ui-kit-primitives";
|
|
5
5
|
//#region src/components/SAvatar/SAvatar.types.ts
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { o as e, t } from "./SAvatar-
|
|
1
|
+
import { o as e, t } from "./SAvatar-q1HSZPqy.js";
|
|
2
2
|
import { t as n } from "./SOverflowGroup-CVSon6Eg.js";
|
|
3
3
|
import { cloneVNode as r, computed as i, createBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, toDisplayString as d, withCtx as f } from "vue";
|
|
4
4
|
//#region src/components/SAvatarGroup/SAvatarGroup.types.ts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("./SAvatar-
|
|
1
|
+
const e=require("./SAvatar-D5SreJLe.cjs"),t=require("./SOverflowGroup-DyVUzkNu.cjs");let n=require("vue");var r=function(e){return e.EXTRA_SMALL=`extra-small`,e.SMALL=`small`,e.MEDIUM=`medium`,e}({}),i={class:`s-ui-avatar-group__overflow`},a=(0,n.defineComponent)({__name:`SAvatarGroup`,props:{disabled:{type:Boolean,default:!1},maxVisible:{},size:{default:()=>r.SMALL}},setup(a){let o=(0,n.computed)(()=>[`s-ui-avatar-group--size-${a.size}`,{"s-ui-avatar-group--disabled":a.disabled}]),s={[r.EXTRA_SMALL]:e.o.SIZE_16,[r.SMALL]:e.o.SIZE_20,[r.MEDIUM]:e.o.SIZE_24},c=(0,n.computed)(()=>s[a.size]),l=(e,t)=>({"--s-ui-avatar-group-item-z-index":e-t}),u=(t,r)=>t.type===e.t?(0,n.cloneVNode)(t,{...a.disabled?{disabled:!0}:{},showName:!1,size:c.value,style:l(r.visibleCount,r.visibleIndex)}):t;return(e,r)=>((0,n.openBlock)(),(0,n.createBlock)(t.t,{class:(0,n.normalizeClass)([`s-ui-avatar-group`,o.value]),role:`group`,"aria-disabled":a.disabled||void 0,"cluster-class":`s-ui-avatar-group__cluster`,"max-visible":a.maxVisible,"map-vnode":u},{overflow:(0,n.withCtx)(({overflowLabel:e})=>[(0,n.createElementVNode)(`span`,i,(0,n.toDisplayString)(e),1)]),default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`)]),_:3},8,[`class`,`aria-disabled`,`max-visible`]))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=require("./colorValue-Dda7fKd3.cjs"),t=require("./useSelectionGroup-TaektE-I.cjs");let n=require("vue"),r=require("@shtabapp/ui-kit-primitives");var i=function(e){return e.RED_ORANGE=`red-orange`,e.ORANGE=`orange`,e.YELLOW=`yellow`,e.GREEN=`green`,e.TEAL=`teal`,e.CYAN=`cyan`,e.BLUE=`blue`,e.INDIGO=`indigo`,e.VIOLET=`violet`,e.MAGENTA=`magenta`,e.PINK=`pink`,e.RED=`red`,e}({}),a=function(e){return e.HEX=`hex`,e.RGB=`rgb`,e.HSL=`hsl`,e}({}),o=[i.RED_ORANGE,i.ORANGE,i.YELLOW,i.GREEN,i.TEAL,i.CYAN,i.BLUE,i.INDIGO,i.VIOLET,i.MAGENTA,i.PINK],s=[i.RED_ORANGE,i.ORANGE,i.YELLOW,i.GREEN,i.TEAL,i.CYAN,i.BLUE,i.INDIGO,i.VIOLET,i.MAGENTA,i.PINK],c=[`primary`,`secondary`,`tertiary`],l=(e,t)=>`var(--s-ui-color-background-accent-${e}-${t})`,u=[`var(--s-ui-color-icon-surface-primary)`,`var(--s-ui-color-icon-surface-tertiary)`,`var(--s-ui-color-icon-surface-disabled)`],d=[...(()=>{let e=[];for(let t of s)for(let n of c)e.push(l(t,n));return e})(),...u],f=function(e){return e.ROW=`row`,e.GRID=`grid`,e}({}),p=[`aria-disabled`],m={key:0,class:`s-ui-color-palette__append`},h=(0,n.defineComponent)({__name:`SColorPalette`,props:(0,n.mergeModels)({layout:{default:()=>f.ROW},disabled:{type:Boolean,default:!1},colors:{},size:{default:()=>r.ESColorSwatchSize.SIZE_40}},{modelValue:{},modelModifiers:{}}),emits:(0,n.mergeModels)([`select`],[`update:modelValue`]),setup(i,{emit:a}){let s=(0,n.useModel)(i,`modelValue`),c=a,l=(0,n.useSlots)(),{t:u}=(0,r.useUiKitI18n)(),d=e=>u(`colorPalette.swatch`,{value:String(e)}),f=(0,n.computed)(()=>i.colors===void 0?o:i.colors),h=t.o({modelValue:()=>s.value,onUpdateModelValue:e=>{t.i(e)&&(s.value=e,c(`select`,e))},mode:t.n.SINGLE,orientation:t.r.HORIZONTAL,orderedValues:()=>f.value,compareValues:e.r,loop:!0}),g=(0,n.shallowReactive)(new Map),_=new Map,v=new Map,y=(e,t)=>`${String(e)}-${t}`,b=e=>e&&(e instanceof HTMLElement||`$el`in e)?e:null,x=(e,t)=>{let n=y(e,t),r=v.get(n);if(r)return r;let a=t=>{let r=_.get(n),a=b(t);if(!t){r&&(r(),_.delete(n)),g.delete(n);return}if(!a||g.get(n)===a&&r)return;r&&(r(),_.delete(n)),g.set(n,a);let o=h.registerItem({value:e,el:()=>g.get(n)??null,disabled:()=>i.disabled});_.set(n,o)};return v.set(n,a),a};(0,n.onScopeDispose)(()=>{for(let e of _.values())e();_.clear(),g.clear(),v.clear()});let S=e=>i.disabled?-1:h.getItemTabIndex(e),C=(e,t)=>{if(i.disabled){t.preventDefault(),t.stopPropagation();return}h.select(e)},w=(e,t)=>{i.disabled||h.handleItemKeydown(t,e)},T=(0,n.computed)(()=>[`s-ui-color-palette--layout-${i.layout}`,{"s-ui-color-palette--disabled":i.disabled,"s-ui-color-palette--has-append":!!l.append}]);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.mergeProps)({class:[`s-ui-color-palette`,T.value],role:`radiogroup`,"aria-disabled":i.disabled||void 0},t.$attrs),[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(f.value,(t,a)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(r.SColorSwatch),{key:`${String(t)}-${a}`,ref_for:!0,ref:x(t,a),role:`radio`,class:`s-ui-color-palette__swatch`,color:(0,n.unref)(e.a)(t),size:i.size,selected:(0,n.unref)(h).isSelected(t),disabled:i.disabled,"aria-checked":(0,n.unref)(h).isSelected(t)?`true`:`false`,"aria-label":d(t),tabindex:S(t),onClick:e=>C(t,e),onKeydown:e=>w(t,e)},null,8,[`color`,`size`,`selected`,`disabled`,`aria-checked`,`aria-label`,`tabindex`,`onClick`,`onKeydown`]))),128)),(0,n.unref)(l).append?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,m,[(0,n.renderSlot)(t.$slots,`append`)])):(0,n.createCommentVNode)(``,!0)],16,p))}});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return h}});
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { a as e, r as t } from "./colorValue-CSh0chxp.js";
|
|
2
|
+
import { i as n, n as r, o as i, r as a } from "./useSelectionGroup-cKj38lEN.js";
|
|
3
|
+
import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, defineComponent as d, mergeModels as f, mergeProps as p, onScopeDispose as m, openBlock as h, renderList as g, renderSlot as _, shallowReactive as v, unref as y, useModel as b, useSlots as x } from "vue";
|
|
4
|
+
import { ESColorSwatchSize as S, SColorSwatch as C, useUiKitI18n as w } from "@shtabapp/ui-kit-primitives";
|
|
5
|
+
//#region src/utils/color/types.ts
|
|
6
|
+
var T = /* @__PURE__ */ function(e) {
|
|
7
|
+
return e.RED_ORANGE = "red-orange", e.ORANGE = "orange", e.YELLOW = "yellow", e.GREEN = "green", e.TEAL = "teal", e.CYAN = "cyan", e.BLUE = "blue", e.INDIGO = "indigo", e.VIOLET = "violet", e.MAGENTA = "magenta", e.PINK = "pink", e.RED = "red", e;
|
|
8
|
+
}({}), E = /* @__PURE__ */ function(e) {
|
|
9
|
+
return e.HEX = "hex", e.RGB = "rgb", e.HSL = "hsl", e;
|
|
10
|
+
}({}), D = [
|
|
11
|
+
T.RED_ORANGE,
|
|
12
|
+
T.ORANGE,
|
|
13
|
+
T.YELLOW,
|
|
14
|
+
T.GREEN,
|
|
15
|
+
T.TEAL,
|
|
16
|
+
T.CYAN,
|
|
17
|
+
T.BLUE,
|
|
18
|
+
T.INDIGO,
|
|
19
|
+
T.VIOLET,
|
|
20
|
+
T.MAGENTA,
|
|
21
|
+
T.PINK
|
|
22
|
+
], O = [
|
|
23
|
+
T.RED_ORANGE,
|
|
24
|
+
T.ORANGE,
|
|
25
|
+
T.YELLOW,
|
|
26
|
+
T.GREEN,
|
|
27
|
+
T.TEAL,
|
|
28
|
+
T.CYAN,
|
|
29
|
+
T.BLUE,
|
|
30
|
+
T.INDIGO,
|
|
31
|
+
T.VIOLET,
|
|
32
|
+
T.MAGENTA,
|
|
33
|
+
T.PINK
|
|
34
|
+
], k = [
|
|
35
|
+
"primary",
|
|
36
|
+
"secondary",
|
|
37
|
+
"tertiary"
|
|
38
|
+
], A = (e, t) => `var(--s-ui-color-background-accent-${e}-${t})`, j = [
|
|
39
|
+
"var(--s-ui-color-icon-surface-primary)",
|
|
40
|
+
"var(--s-ui-color-icon-surface-tertiary)",
|
|
41
|
+
"var(--s-ui-color-icon-surface-disabled)"
|
|
42
|
+
], M = [...(() => {
|
|
43
|
+
let e = [];
|
|
44
|
+
for (let t of O) for (let n of k) e.push(A(t, n));
|
|
45
|
+
return e;
|
|
46
|
+
})(), ...j], N = /* @__PURE__ */ function(e) {
|
|
47
|
+
return e.ROW = "row", e.GRID = "grid", e;
|
|
48
|
+
}({}), P = ["aria-disabled"], F = {
|
|
49
|
+
key: 0,
|
|
50
|
+
class: "s-ui-color-palette__append"
|
|
51
|
+
}, I = /* @__PURE__ */ d({
|
|
52
|
+
__name: "SColorPalette",
|
|
53
|
+
props: /*@__PURE__*/ f({
|
|
54
|
+
layout: { default: () => N.ROW },
|
|
55
|
+
disabled: {
|
|
56
|
+
type: Boolean,
|
|
57
|
+
default: !1
|
|
58
|
+
},
|
|
59
|
+
colors: {},
|
|
60
|
+
size: { default: () => S.SIZE_40 }
|
|
61
|
+
}, {
|
|
62
|
+
modelValue: {},
|
|
63
|
+
modelModifiers: {}
|
|
64
|
+
}),
|
|
65
|
+
emits: /*@__PURE__*/ f(["select"], ["update:modelValue"]),
|
|
66
|
+
setup(d, { emit: f }) {
|
|
67
|
+
let S = b(d, "modelValue"), T = f, E = x(), { t: O } = w(), k = (e) => O("colorPalette.swatch", { value: String(e) }), A = s(() => d.colors === void 0 ? D : d.colors), j = i({
|
|
68
|
+
modelValue: () => S.value,
|
|
69
|
+
onUpdateModelValue: (e) => {
|
|
70
|
+
n(e) && (S.value = e, T("select", e));
|
|
71
|
+
},
|
|
72
|
+
mode: r.SINGLE,
|
|
73
|
+
orientation: a.HORIZONTAL,
|
|
74
|
+
orderedValues: () => A.value,
|
|
75
|
+
compareValues: t,
|
|
76
|
+
loop: !0
|
|
77
|
+
}), M = v(/* @__PURE__ */ new Map()), N = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new Map(), L = (e, t) => `${String(e)}-${t}`, R = (e) => e && (e instanceof HTMLElement || "$el" in e) ? e : null, z = (e, t) => {
|
|
78
|
+
let n = L(e, t), r = I.get(n);
|
|
79
|
+
if (r) return r;
|
|
80
|
+
let i = (t) => {
|
|
81
|
+
let r = N.get(n), i = R(t);
|
|
82
|
+
if (!t) {
|
|
83
|
+
r && (r(), N.delete(n)), M.delete(n);
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
if (!i || M.get(n) === i && r) return;
|
|
87
|
+
r && (r(), N.delete(n)), M.set(n, i);
|
|
88
|
+
let a = j.registerItem({
|
|
89
|
+
value: e,
|
|
90
|
+
el: () => M.get(n) ?? null,
|
|
91
|
+
disabled: () => d.disabled
|
|
92
|
+
});
|
|
93
|
+
N.set(n, a);
|
|
94
|
+
};
|
|
95
|
+
return I.set(n, i), i;
|
|
96
|
+
};
|
|
97
|
+
m(() => {
|
|
98
|
+
for (let e of N.values()) e();
|
|
99
|
+
N.clear(), M.clear(), I.clear();
|
|
100
|
+
});
|
|
101
|
+
let B = (e) => d.disabled ? -1 : j.getItemTabIndex(e), V = (e, t) => {
|
|
102
|
+
if (d.disabled) {
|
|
103
|
+
t.preventDefault(), t.stopPropagation();
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
j.select(e);
|
|
107
|
+
}, H = (e, t) => {
|
|
108
|
+
d.disabled || j.handleItemKeydown(t, e);
|
|
109
|
+
}, U = s(() => [`s-ui-color-palette--layout-${d.layout}`, {
|
|
110
|
+
"s-ui-color-palette--disabled": d.disabled,
|
|
111
|
+
"s-ui-color-palette--has-append": !!E.append
|
|
112
|
+
}]);
|
|
113
|
+
return (t, n) => (h(), u("div", p({
|
|
114
|
+
class: ["s-ui-color-palette", U.value],
|
|
115
|
+
role: "radiogroup",
|
|
116
|
+
"aria-disabled": d.disabled || void 0
|
|
117
|
+
}, t.$attrs), [(h(!0), u(o, null, g(A.value, (t, n) => (h(), c(y(C), {
|
|
118
|
+
key: `${String(t)}-${n}`,
|
|
119
|
+
ref_for: !0,
|
|
120
|
+
ref: z(t, n),
|
|
121
|
+
role: "radio",
|
|
122
|
+
class: "s-ui-color-palette__swatch",
|
|
123
|
+
color: y(e)(t),
|
|
124
|
+
size: d.size,
|
|
125
|
+
selected: y(j).isSelected(t),
|
|
126
|
+
disabled: d.disabled,
|
|
127
|
+
"aria-checked": y(j).isSelected(t) ? "true" : "false",
|
|
128
|
+
"aria-label": k(t),
|
|
129
|
+
tabindex: B(t),
|
|
130
|
+
onClick: (e) => V(t, e),
|
|
131
|
+
onKeydown: (e) => H(t, e)
|
|
132
|
+
}, null, 8, [
|
|
133
|
+
"color",
|
|
134
|
+
"size",
|
|
135
|
+
"selected",
|
|
136
|
+
"disabled",
|
|
137
|
+
"aria-checked",
|
|
138
|
+
"aria-label",
|
|
139
|
+
"tabindex",
|
|
140
|
+
"onClick",
|
|
141
|
+
"onKeydown"
|
|
142
|
+
]))), 128)), y(E).append ? (h(), u("div", F, [_(t.$slots, "append")])) : l("", !0)], 16, P));
|
|
143
|
+
}
|
|
144
|
+
});
|
|
145
|
+
//#endregion
|
|
146
|
+
export { T as a, D as i, N as n, E as o, M as r, I as t };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=require("./contrastSurfaceTextColor-BRjRzXyZ.cjs"),t=require("./SColorPalette-CqfVzhda.cjs"),n=require("./colorValue-Dda7fKd3.cjs"),r=require("./SButton.types-UKroD-ev.cjs"),i=require("./SButton-C-z_q5CG.cjs"),a=require("./useFloatingOverlay-B1UCUYQQ.cjs"),o=require("./SDropdown-_QUOP-rw.cjs"),s=require("./SSelect-BPYtkzaw.cjs");let c=require("vue"),l=require("@shtabapp/ui-kit-primitives"),u=require("@vueuse/core");var d=e=>Math.max(0,Math.min(255,Math.round(e))),f=e=>{let t=e%360;return t<0?t+360:t},p=e=>Math.max(0,Math.min(100,Math.round(e))),m=e=>{let t=e.slice(1);if(t.length===3){let e=t[0],n=t[1],r=t[2];return!e||!n||!r?void 0:`${e}${e}${n}${n}${r}${r}`}if(t.length===6||t.length===8)return t.slice(0,6)},h=e=>{let t=m(e);if(!t)return;let n=Number.parseInt(t.slice(0,2),16),r=Number.parseInt(t.slice(2,4),16),i=Number.parseInt(t.slice(4,6),16);if(!(Number.isNaN(n)||Number.isNaN(r)||Number.isNaN(i)))return{first:n,second:r,third:i}},g=e=>{let t=d(e.first),n=d(e.second),r=d(e.third);return`#${t.toString(16).padStart(2,`0`).toUpperCase()}${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}`},_=e=>{let t=h(e);if(!t)return;let n=t.first/255,r=t.second/255,i=t.third/255,a=Math.max(n,r,i),o=Math.min(n,r,i),s=a-o,c=0,l=(a+o)/2;s!==0&&(c=a===n?((r-i)/s+(r<i?6:0))*60:a===r?((i-n)/s+2)*60:((n-r)/s+4)*60);let u=0;return s!==0&&(u=l>.5?s/(2-a-o):s/(a+o)),{first:Math.round(c),second:Math.round(u*100),third:Math.round(l*100)}},v=e=>{let t=f(e.first),n=p(e.second)/100,r=p(e.third)/100,i=e=>{let i=(t+e)/30;return d((r-n*Math.min(r,1-r)*Math.max(-1,Math.min(i%2-1,1)))*255)};return g({first:i(0),second:i(8),third:i(4)})},y=t=>{let n=t.toUpperCase(),r=n.startsWith(`#`)?n.slice(1):n;if(!/^[0-9A-F]{3}$/.test(r)&&!/^[0-9A-F]{6}$/.test(r))return;let i=`#${r}`;if(e.n(i))return g(h(i)??{first:0,second:0,third:0})},b=e=>e.slice(1).toUpperCase(),x=e=>{let t=e.first/255,n=e.second/255,r=e.third/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o=Math.round(o*60),o<0&&(o+=360));let s=i===0?0:a/i;return{hue:o,saturation:s,value:i}},S=e=>{let t=e.value*e.saturation,n=e.hue/60,r=t*(1-Math.abs(n%2-1)),i=e.value-t,a=0,o=0,s=0;return n>=0&&n<1?(a=t,o=r):n>=1&&n<2?(a=r,o=t):n>=2&&n<3?(o=t,s=r):n>=3&&n<4?(o=r,s=t):n>=4&&n<5?(a=r,s=t):(a=t,s=r),{first:d((a+i)*255),second:d((o+i)*255),third:d((s+i)*255)}},C=e=>{let t=h(e);if(t)return x(t)},w=e=>g(S(e)),T=[t.o.HEX,t.o.RGB,t.o.HSL],E={[t.o.HEX]:`Hex`,[t.o.RGB]:`RGB`,[t.o.HSL]:`HSL`},D=e=>{let t=getComputedStyle(e).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);if(!t)return;let n=Number.parseInt(t[1]??`0`,10),r=Number.parseInt(t[2]??`0`,10),i=Number.parseInt(t[3]??`0`,10);return`#${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}${i.toString(16).padStart(2,`0`).toUpperCase()}`},O=(t,r)=>{if(n.n(t)&&e.n(t))return t;if(r)return D(r)},k=(e,n)=>n===t.o.HEX?b(e):n===t.o.RGB?h(e)??{first:0,second:0,third:0}:_(e)??{first:0,second:0,third:0},A=e=>{let t=Number.parseInt(e,10);if(!Number.isNaN(t))return t},j=(e,n)=>{if(e===t.o.HEX)return typeof n==`string`?y(n):void 0;if(typeof n==`string`)return;if(e===t.o.RGB){let e=g({first:A(String(n.first))??0,second:A(String(n.second))??0,third:A(String(n.third))??0});return h(e)?e:void 0}let r=v({first:A(String(n.first))??0,second:A(String(n.second))??0,third:A(String(n.third))??0});if(r&&_(r))return r},M=17,N=`#000000`,P=e=>e??N,F=({modelValue:e,getEditableHex:t,saturationAreaRef:n,hueSliderRef:r,disabled:i,readonly:a})=>{let o=C(P(t()))??{hue:0,saturation:0,value:0},s=(0,c.ref)(o.hue),l=(0,c.ref)(o.saturation),d=(0,c.ref)(o.value),f=(0,c.ref)(!1),p=(0,c.ref)(!1),m=(0,c.ref)(!1),h=(0,c.shallowRef)(null),g=(0,c.shallowRef)(null),_=(0,c.computed)(()=>w({hue:s.value,saturation:l.value,value:d.value})),v=(0,c.computed)(()=>w({hue:s.value,saturation:1,value:1})),y=e=>{s.value=Math.max(0,Math.min(360,e))},b=(e,t)=>{l.value=Math.max(0,Math.min(1,e)),d.value=Math.max(0,Math.min(1,t))},x=e=>{let t=C(P(e));t&&(f.value=!0,t.saturation>0&&(s.value=t.hue),l.value=t.saturation,d.value=t.value,f.value=!1)},S=()=>{let e=t();e&&e.toUpperCase()!==_.value.toUpperCase()&&x(e)},T=()=>{let n=_.value;t()?.toUpperCase()!==n.toUpperCase()&&(f.value=!0,e.value=n,f.value=!1)};(0,c.watch)([s,l,d],()=>{f.value||T()}),(0,c.watch)(e,()=>{f.value||S()}),(0,c.onMounted)(()=>{(0,c.nextTick)(()=>{E(),D(),S()})});let E=()=>{h.value=n.value?.getBoundingClientRect()??null},D=()=>{g.value=r.value?.getBoundingClientRect()??null},O=(0,c.computed)(()=>{let e=h.value;return e?{transform:`translate3d(calc(${l.value*e.width}px - 50%), calc(${(1-d.value)*e.height}px - 50%), 0)`}:{}}),k=(0,c.computed)(()=>{let e=g.value;return e?{transform:`translate3d(-50%, calc(${s.value/360*e.height}px - 50%), 0)`}:{}}),A=()=>!i.value&&!a.value,j=e=>{let t=h.value;if(!t)return;let n=Math.max(0,Math.min(e.clientX-t.left,t.width)),r=Math.max(0,Math.min(e.clientY-t.top,t.height));b(n/t.width,1-r/t.height)},M=e=>{let t=g.value;t&&y(Math.max(0,Math.min(e.clientY-t.top,t.height))/t.height*360)},N=e=>{A()&&(E(),p.value=!0,j(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},F=e=>{A()&&(D(),m.value=!0,M(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},I=()=>{p.value=!1},L=()=>{m.value=!1};return(0,u.useEventListener)(n,`pointermove`,e=>{p.value&&j(e)}),(0,u.useEventListener)(n,`pointerup`,I),(0,u.useEventListener)(n,`pointercancel`,I),(0,u.useEventListener)(n,`lostpointercapture`,I),(0,u.useEventListener)(r,`pointermove`,e=>{m.value&&M(e)}),(0,u.useEventListener)(r,`pointerup`,L),(0,u.useEventListener)(r,`pointercancel`,L),(0,u.useEventListener)(r,`lostpointercapture`,L),{hexColor:_,hueBackground:v,saturationPointerStyle:O,huePointerStyle:k,handleSaturationPointerDown:N,handleHuePointerDown:F,syncFromModelValue:S}},I=e=>{if(!e)return null;let t=e.$el;if(!(t instanceof HTMLElement))return null;let n=t.querySelector(`.s-ui-color-swatch__fill`);return n instanceof HTMLElement?n:null},L={class:`s-ui-color-area__canvas-row`},R=[`aria-label`],z=[`aria-label`,`aria-disabled`],B=(0,c.defineComponent)({__name:`SColorArea`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let t=(0,c.useModel)(e,`modelValue`),{t:r}=(0,l.useUiKitI18n)(),i=(0,c.useTemplateRef)(`colorResolutionSwatchRef`),a=(0,c.useTemplateRef)(`saturationAreaRef`),o=(0,c.useTemplateRef)(`hueSliderRef`),s=()=>O(t.value,I(i.value)),u=(0,c.computed)(()=>n.a(t.value)),{hexColor:d,hueBackground:f,saturationPointerStyle:p,huePointerStyle:m,handleSaturationPointerDown:h,handleHuePointerDown:g}=F({modelValue:t,getEditableHex:s,saturationAreaRef:a,hueSliderRef:o,disabled:(0,c.toRef)(()=>e.disabled),readonly:(0,c.toRef)(()=>e.readonly)});return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,(0,c.mergeProps)({class:[`s-ui-color-area`,{"s-ui-color-area--disabled":e.disabled,"s-ui-color-area--readonly":e.readonly}]},t.$attrs),[(0,c.createVNode)((0,c.unref)(l.SColorSwatch),{ref_key:`colorResolutionSwatchRef`,ref:i,class:`s-ui-color-area__color-resolution`,color:u.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_24,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`]),(0,c.createElementVNode)(`div`,L,[(0,c.createElementVNode)(`div`,{ref_key:`saturationAreaRef`,ref:a,class:`s-ui-color-area__canvas`,role:`img`,"aria-label":(0,c.unref)(r)(`colorArea.saturationBrightness`),style:(0,c.normalizeStyle)({"--s-ui-color-area-hue":(0,c.unref)(f)}),onPointerdown:n[0]||=(...e)=>(0,c.unref)(h)&&(0,c.unref)(h)(...e)},[(0,c.createElementVNode)(`div`,{class:`s-ui-color-area__canvas-pointer`,style:(0,c.normalizeStyle)({...(0,c.unref)(p),backgroundColor:(0,c.unref)(d)})},null,4)],44,R),(0,c.createElementVNode)(`div`,{ref_key:`hueSliderRef`,ref:o,class:`s-ui-color-area__hue`,role:`slider`,"aria-label":(0,c.unref)(r)(`colorArea.hue`),"aria-valuemin":`0`,"aria-valuemax":`360`,"aria-disabled":e.disabled||e.readonly,onPointerdown:n[1]||=(...e)=>(0,c.unref)(g)&&(0,c.unref)(g)(...e)},[(0,c.createElementVNode)(`div`,{class:`s-ui-color-area__hue-pointer`,style:(0,c.normalizeStyle)({...(0,c.unref)(m),backgroundColor:(0,c.unref)(f)})},null,4)],40,z)])],16))}}),V={class:`s-ui-color-values__left`},H={class:`s-ui-color-values__format`},U={class:`s-ui-color-values__value-group`},W={class:`s-ui-color-values__inputs`},G={key:0,class:`s-ui-color-values__input-wrap`},K=[`disabled`,`readonly`,`aria-label`],q={class:`s-ui-color-values__input-wrap`},J=[`disabled`,`readonly`,`aria-label`],Y={class:`s-ui-color-values__input-wrap`},X=[`disabled`,`readonly`,`aria-label`],Z={class:`s-ui-color-values__input-wrap`},Q=[`disabled`,`readonly`,`aria-label`],$=(0,c.defineComponent)({__name:`SColorValues`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},formats:{default:()=>T}},{modelValue:{required:!0},modelModifiers:{},format:{default:t.o.HEX},formatModifiers:{}}),emits:(0,c.mergeModels)([`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`,`update:format`]),setup(e,{emit:a}){let{t:o}=(0,l.useUiKitI18n)(),u=(0,c.useModel)(e,`modelValue`),d=(0,c.useModel)(e,`format`),f=a,p=(0,c.useTemplateRef)(`previewSwatchRef`),m=(0,c.ref)(``),h=(0,c.ref)(`0`),g=(0,c.ref)(`0`),_=(0,c.ref)(`0`),v=(0,c.computed)(()=>(e.formats.length>0?e.formats:T).map(e=>({value:e,label:E[e]}))),y=(0,c.computed)(()=>n.a(u.value)),b=(0,c.computed)(()=>O(u.value,I(p.value))),x=(0,c.computed)(()=>d.value===t.o.RGB?o(`colorValues.redChannel`):o(`colorValues.hueChannel`)),S=(0,c.computed)(()=>d.value===t.o.RGB?o(`colorValues.greenChannel`):o(`colorValues.saturationChannel`)),C=(0,c.computed)(()=>d.value===t.o.RGB?o(`colorValues.blueChannel`):o(`colorValues.lightnessChannel`)),w=()=>{let e=b.value;if(!e)return;let n=k(e,d.value);if(d.value===t.o.HEX&&typeof n==`string`){m.value=n;return}typeof n==`object`&&(h.value=String(n.first),g.value=String(n.second),_.value=String(n.third))};(0,c.watch)([u,d,b],()=>{w()}),(0,c.onMounted)(()=>{(0,c.nextTick)(()=>{w()})});let D=()=>{if(e.disabled||e.readonly)return;if(d.value===t.o.HEX){let e=j(t.o.HEX,m.value);e&&(u.value=e),w();return}let n=j(d.value,{first:Number.parseInt(h.value,10),second:Number.parseInt(g.value,10),third:Number.parseInt(_.value,10)});n&&(u.value=n),w()},A=e=>{e.key===`Enter`&&(e.preventDefault(),D())};return(n,a)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,(0,c.mergeProps)({class:[`s-ui-color-values`,{"s-ui-color-values--disabled":e.disabled,"s-ui-color-values--readonly":e.readonly}]},n.$attrs),[(0,c.createElementVNode)(`div`,V,[(0,c.createVNode)((0,c.unref)(l.SColorSwatch),{ref_key:`previewSwatchRef`,ref:p,class:`s-ui-color-values__preview`,color:y.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`,`disabled`]),(0,c.createElementVNode)(`div`,H,[(0,c.createVNode)((0,c.unref)(s.t),{modelValue:d.value,"onUpdate:modelValue":a[0]||=e=>d.value=e,class:`s-ui-color-values__format-select`,options:v.value,disabled:e.disabled,readonly:e.readonly,bordered:!0,clearable:!1,"close-on-select":!0,"fit-viewport":!1,"aria-label":(0,c.unref)(o)(`colorValues.format`),onOpen:a[1]||=e=>f(`formatDropdownOpen`),onClose:a[2]||=e=>f(`formatDropdownClose`)},null,8,[`modelValue`,`options`,`disabled`,`readonly`,`aria-label`])])]),(0,c.createElementVNode)(`div`,U,[(0,c.createVNode)((0,c.unref)(i.t),{class:`s-ui-color-values__pipette`,appearance:(0,c.unref)(r.t).BARE,variant:(0,c.unref)(r.r).NEUTRAL,size:(0,c.unref)(r.n).SMALL,icon:`pipette`,"aria-label":(0,c.unref)(o)(`colorValues.pickColor`),"aria-disabled":`true`,disabled:e.disabled,tabindex:`-1`},null,8,[`appearance`,`variant`,`size`,`aria-label`,`disabled`]),a[9]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,W,[d.value===(0,c.unref)(t.o).HEX?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,G,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":a[3]||=e=>m.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`text`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":(0,c.unref)(o)(`colorValues.hexValue`),onBlur:D,onKeydown:A},null,40,K),[[c.vModelText,m.value]])])):((0,c.openBlock)(),(0,c.createElementBlock)(c.Fragment,{key:1},[(0,c.createElementVNode)(`div`,q,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":a[4]||=e=>h.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":x.value,onBlur:D,onKeydown:A},null,40,J),[[c.vModelText,h.value]])]),a[7]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,Y,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":a[5]||=e=>g.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":S.value,onBlur:D,onKeydown:A},null,40,X),[[c.vModelText,g.value]])]),a[8]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,Z,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":a[6]||=e=>_.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":C.value,onBlur:D,onKeydown:A},null,40,Q),[[c.vModelText,_.value]])])],64))])])],16))}}),ee={class:`s-ui-color-picker__section`},te={class:`s-ui-color-picker__label`},ne={class:`s-ui-color-picker__section`},re={class:`s-ui-color-picker__label`},ie={class:`s-ui-color-picker__custom-editor`},ae={class:`s-ui-color-picker__custom-actions`},oe=(0,c.defineComponent)({__name:`SColorPicker`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},recommendedColors:{},recentColors:{default:()=>[]}},{modelValue:{},modelModifiers:{}}),emits:(0,c.mergeModels)([`select`,`customEditorOpen`,`customEditorClose`,`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`]),setup(e,{emit:n}){let u=(0,c.useModel)(e,`modelValue`),d=n,{t:f}=(0,l.useUiKitI18n)(),p=(0,c.ref)(!1),m=(0,c.ref)(`#526DE3`),h=(0,c.ref)(t.o.HEX),g=(0,c.computed)(()=>e.recommendedColors&&e.recommendedColors.length>0?e.recommendedColors:t.r),_=(0,c.computed)(()=>e.recentColors.length<=17?e.recentColors:e.recentColors.slice(0,17)),v=()=>{if(u.value){m.value=u.value;return}m.value=`#526DE3`},y=e=>{d(`select`,e)},b=()=>{u.value=m.value,d(`select`,m.value),p.value=!1},x=()=>{p.value=!1};return(0,c.watch)(p,(e,t)=>{if(e&&!t){v(),d(`customEditorOpen`);return}!e&&t&&d(`customEditorClose`)}),(n,v)=>((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(s.r),(0,c.mergeProps)({width:336},n.$attrs),{default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,{class:(0,c.normalizeClass)([`s-ui-color-picker`,{"s-ui-color-picker--disabled":e.disabled}])},[(0,c.createElementVNode)(`section`,ee,[(0,c.createElementVNode)(`span`,te,(0,c.toDisplayString)((0,c.unref)(f)(`colorPicker.recommendedColors`)),1),(0,c.createVNode)((0,c.unref)(t.t),{modelValue:u.value,"onUpdate:modelValue":v[0]||=e=>u.value=e,class:`s-ui-color-picker__palette`,layout:(0,c.unref)(t.n).GRID,colors:g.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:y},null,8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])]),(0,c.createElementVNode)(`section`,ne,[(0,c.createElementVNode)(`span`,re,(0,c.toDisplayString)((0,c.unref)(f)(`colorPicker.recentColors`)),1),(0,c.createVNode)((0,c.unref)(t.t),{modelValue:u.value,"onUpdate:modelValue":v[7]||=e=>u.value=e,class:`s-ui-color-picker__palette`,layout:(0,c.unref)(t.n).ROW,colors:_.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:y},{append:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(o.t),{modelValue:p.value,"onUpdate:modelValue":v[6]||=e=>p.value=e,placement:(0,c.unref)(a.i).RIGHT_START,offset:8,shift:!0,flip:!0,disabled:e.disabled,"dismiss-on-click-outside":!0,"dismiss-on-escape":!0},{trigger:(0,c.withCtx)(({toggle:t,triggerProps:n})=>[(0,c.createVNode)((0,c.unref)(i.t),(0,c.mergeProps)(n,{class:`s-ui-color-picker__add-button`,appearance:(0,c.unref)(r.t).OUTLINED,variant:(0,c.unref)(r.r).NEUTRAL,size:(0,c.unref)(r.n).SMALL,icon:`plus`,"aria-label":(0,c.unref)(f)(`colorPicker.addCustomColor`),disabled:e.disabled,onClick:t}),null,16,[`appearance`,`variant`,`size`,`aria-label`,`disabled`,`onClick`])]),content:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(s.r),{width:320},{footer:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,ae,[(0,c.createVNode)((0,c.unref)(i.t),{class:`s-ui-color-picker__save-button`,appearance:(0,c.unref)(r.t).MAJOR,variant:(0,c.unref)(r.r).MAIN,size:(0,c.unref)(r.n).SMALL,disabled:e.disabled,onClick:b},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)((0,c.unref)(f)(`colorPicker.save`)),1)]),_:1},8,[`appearance`,`variant`,`size`,`disabled`]),(0,c.createVNode)((0,c.unref)(i.t),{class:`s-ui-color-picker__cancel-button`,appearance:(0,c.unref)(r.t).MINOR,variant:(0,c.unref)(r.r).NEUTRAL,size:(0,c.unref)(r.n).SMALL,disabled:e.disabled,onClick:x},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)((0,c.unref)(f)(`colorPicker.cancel`)),1)]),_:1},8,[`appearance`,`variant`,`size`,`disabled`])])]),default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,ie,[(0,c.createVNode)(B,{modelValue:m.value,"onUpdate:modelValue":v[1]||=e=>m.value=e,disabled:e.disabled},null,8,[`modelValue`,`disabled`]),(0,c.createVNode)($,{modelValue:m.value,"onUpdate:modelValue":v[2]||=e=>m.value=e,format:h.value,"onUpdate:format":v[3]||=e=>h.value=e,disabled:e.disabled,onFormatDropdownOpen:v[4]||=e=>d(`formatDropdownOpen`),onFormatDropdownClose:v[5]||=e=>d(`formatDropdownClose`)},null,8,[`modelValue`,`format`,`disabled`])])]),_:1})]),_:1},8,[`modelValue`,`placement`,`disabled`])]),_:1},8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])])],2)]),_:1},16))}});Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return $}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return B}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return oe}});
|