@shtabapp/ui-kit 1.33.0 → 1.34.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [@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)
+
+### Features
+
+- color picker (swatch, palette, area, values) ([2fbc95c](https://gitlab.com/mstikharev/shtab-ui-kit/commit/2fbc95c15c65ed87f9a36b9aaec6fe71a6f5ff03))
+
 ## [@shtabapp/ui-kit-v1.33.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.32.0...@shtabapp/ui-kit@1.33.0) (2026-07-01)
 
 ### Features

package/dist/SColorPalette-B9WrqgRz.js

@@ -0,0 +1,146 @@
+import { a as e, r as t } from "./colorValue-DXJiNKGE.js";
+import { i as n, n as r, o as i, r as a } from "./useSelectionGroup-cKj38lEN.js";
+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";
+import { ESColorSwatchSize as S, SColorSwatch as C } from "@shtabapp/ui-kit-primitives";
+//#region src/utils/color/types.ts
+var w = /* @__PURE__ */ 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;
+}({}), T = /* @__PURE__ */ function(e) {
+	return e.HEX = "hex", e.RGB = "rgb", e.HSL = "hsl", e;
+}({}), E = [
+	w.RED_ORANGE,
+	w.ORANGE,
+	w.YELLOW,
+	w.GREEN,
+	w.TEAL,
+	w.CYAN,
+	w.BLUE,
+	w.INDIGO,
+	w.VIOLET,
+	w.MAGENTA,
+	w.PINK
+], D = [
+	w.RED_ORANGE,
+	w.ORANGE,
+	w.YELLOW,
+	w.GREEN,
+	w.TEAL,
+	w.CYAN,
+	w.BLUE,
+	w.INDIGO,
+	w.VIOLET,
+	w.MAGENTA,
+	w.PINK
+], O = [
+	"primary",
+	"secondary",
+	"tertiary"
+], k = (e, t) => `var(--s-ui-color-background-accent-${e}-${t})`, A = [
+	"var(--s-ui-color-icon-surface-primary)",
+	"var(--s-ui-color-icon-surface-tertiary)",
+	"var(--s-ui-color-icon-surface-disabled)"
+], j = [...(() => {
+	let e = [];
+	for (let t of D) for (let n of O) e.push(k(t, n));
+	return e;
+})(), ...A], M = /* @__PURE__ */ function(e) {
+	return e.ROW = "row", e.GRID = "grid", e;
+}({}), N = ["aria-disabled"], P = {
+	key: 0,
+	class: "s-ui-color-palette__append"
+}, F = /* @__PURE__ */ d({
+	__name: "SColorPalette",
+	props: /*@__PURE__*/ f({
+		layout: { default: () => M.ROW },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		colors: {},
+		size: { default: () => S.SIZE_40 }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["select"], ["update:modelValue"]),
+	setup(d, { emit: f }) {
+		let S = b(d, "modelValue"), w = f, T = x(), D = s(() => d.colors === void 0 ? E : d.colors), O = i({
+			modelValue: () => S.value,
+			onUpdateModelValue: (e) => {
+				n(e) && (S.value = e, w("select", e));
+			},
+			mode: r.SINGLE,
+			orientation: a.HORIZONTAL,
+			orderedValues: () => D.value,
+			compareValues: t,
+			loop: !0
+		}), k = v(/* @__PURE__ */ new Map()), A = /* @__PURE__ */ new Map(), j = /* @__PURE__ */ new Map(), M = (e, t) => `${String(e)}-${t}`, F = (e) => e && (e instanceof HTMLElement || "$el" in e) ? e : null, I = (e, t) => {
+			let n = M(e, t), r = j.get(n);
+			if (r) return r;
+			let i = (t) => {
+				let r = A.get(n), i = F(t);
+				if (!t) {
+					r && (r(), A.delete(n)), k.delete(n);
+					return;
+				}
+				if (!i || k.get(n) === i && r) return;
+				r && (r(), A.delete(n)), k.set(n, i);
+				let a = O.registerItem({
+					value: e,
+					el: () => k.get(n) ?? null,
+					disabled: () => d.disabled
+				});
+				A.set(n, a);
+			};
+			return j.set(n, i), i;
+		};
+		m(() => {
+			for (let e of A.values()) e();
+			A.clear(), k.clear(), j.clear();
+		});
+		let L = (e) => d.disabled ? -1 : O.getItemTabIndex(e), R = (e, t) => {
+			if (d.disabled) {
+				t.preventDefault(), t.stopPropagation();
+				return;
+			}
+			O.select(e);
+		}, z = (e, t) => {
+			d.disabled || O.handleItemKeydown(t, e);
+		}, B = s(() => [`s-ui-color-palette--layout-${d.layout}`, {
+			"s-ui-color-palette--disabled": d.disabled,
+			"s-ui-color-palette--has-append": !!T.append
+		}]);
+		return (t, n) => (h(), u("div", p({
+			class: ["s-ui-color-palette", B.value],
+			role: "radiogroup",
+			"aria-disabled": d.disabled || void 0
+		}, t.$attrs), [(h(!0), u(o, null, g(D.value, (t, n) => (h(), c(y(C), {
+			key: `${String(t)}-${n}`,
+			ref_for: !0,
+			ref: I(t, n),
+			role: "radio",
+			class: "s-ui-color-palette__swatch",
+			color: y(e)(t),
+			size: d.size,
+			selected: y(O).isSelected(t),
+			disabled: d.disabled,
+			"aria-checked": y(O).isSelected(t) ? "true" : "false",
+			"aria-label": String(t),
+			tabindex: L(t),
+			onClick: (e) => R(t, e),
+			onKeydown: (e) => z(t, e)
+		}, null, 8, [
+			"color",
+			"size",
+			"selected",
+			"disabled",
+			"aria-checked",
+			"aria-label",
+			"tabindex",
+			"onClick",
+			"onKeydown"
+		]))), 128)), y(T).append ? (h(), u("div", P, [_(t.$slots, "append")])) : l("", !0)], 16, N));
+	}
+});
+//#endregion
+export { w as a, E as i, M as n, T as o, j as r, F as t };

package/dist/SColorPalette-CYGnmIWP.cjs

@@ -0,0 +1 @@
+const e=require("./colorValue-DClAEDHr.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)(),u=(0,n.computed)(()=>i.colors===void 0?o:i.colors),d=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:()=>u.value,compareValues:e.r,loop:!0}),f=(0,n.shallowReactive)(new Map),h=new Map,g=new Map,_=(e,t)=>`${String(e)}-${t}`,v=e=>e&&(e instanceof HTMLElement||`$el`in e)?e:null,y=(e,t)=>{let n=_(e,t),r=g.get(n);if(r)return r;let a=t=>{let r=h.get(n),a=v(t);if(!t){r&&(r(),h.delete(n)),f.delete(n);return}if(!a||f.get(n)===a&&r)return;r&&(r(),h.delete(n)),f.set(n,a);let o=d.registerItem({value:e,el:()=>f.get(n)??null,disabled:()=>i.disabled});h.set(n,o)};return g.set(n,a),a};(0,n.onScopeDispose)(()=>{for(let e of h.values())e();h.clear(),f.clear(),g.clear()});let b=e=>i.disabled?-1:d.getItemTabIndex(e),x=(e,t)=>{if(i.disabled){t.preventDefault(),t.stopPropagation();return}d.select(e)},S=(e,t)=>{i.disabled||d.handleItemKeydown(t,e)},C=(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`,C.value],role:`radiogroup`,"aria-disabled":i.disabled||void 0},t.$attrs),[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(u.value,(t,a)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(r.SColorSwatch),{key:`${String(t)}-${a}`,ref_for:!0,ref:y(t,a),role:`radio`,class:`s-ui-color-palette__swatch`,color:(0,n.unref)(e.a)(t),size:i.size,selected:(0,n.unref)(d).isSelected(t),disabled:i.disabled,"aria-checked":(0,n.unref)(d).isSelected(t)?`true`:`false`,"aria-label":String(t),tabindex:b(t),onClick:e=>x(t,e),onKeydown:e=>S(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}});