@itguy614/clean-ui 1.3.0 → 1.3.2

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.
Files changed (41) hide show
  1. package/dist/clean-ui.css +1 -1
  2. package/dist/components/CuiColorPicker.vue.d.ts.map +1 -1
  3. package/dist/components/CuiColorPicker.vue.js +187 -194
  4. package/dist/components/CuiCombobox.vue.d.ts.map +1 -1
  5. package/dist/components/CuiCombobox.vue.js +2 -2
  6. package/dist/components/CuiCombobox.vue2.js +96 -97
  7. package/dist/components/CuiDataGrid.vue.js +1 -1
  8. package/dist/components/CuiDataGridTable.vue.d.ts.map +1 -1
  9. package/dist/components/CuiDataGridTable.vue.js +212 -190
  10. package/dist/components/CuiDataGridViewManager.vue.d.ts.map +1 -1
  11. package/dist/components/CuiDataGridViewManager.vue.js +5 -4
  12. package/dist/components/CuiDivider.vue.d.ts +1 -3
  13. package/dist/components/CuiDivider.vue.d.ts.map +1 -1
  14. package/dist/components/CuiDivider.vue.js +44 -60
  15. package/dist/components/CuiPagination.vue.d.ts.map +1 -1
  16. package/dist/components/CuiPagination.vue.js +2 -2
  17. package/dist/components/CuiPagination.vue2.js +28 -25
  18. package/dist/components/CuiPopover.vue.d.ts.map +1 -1
  19. package/dist/components/CuiPopover.vue.js +77 -74
  20. package/dist/components/CuiSlider.vue.d.ts.map +1 -1
  21. package/dist/components/CuiSlider.vue.js +5 -167
  22. package/dist/components/CuiSlider.vue2.js +171 -2
  23. package/dist/components/CuiTabs.vue.d.ts.map +1 -1
  24. package/dist/components/CuiTabs.vue.js +2 -2
  25. package/dist/components/CuiTabs.vue2.js +80 -76
  26. package/dist/components/CuiTagInput.vue.d.ts.map +1 -1
  27. package/dist/components/CuiTagInput.vue.js +1 -1
  28. package/dist/components/CuiTagInput.vue2.js +98 -99
  29. package/dist/components/CuiTooltip.vue.d.ts.map +1 -1
  30. package/dist/components/CuiTooltip.vue.js +2 -2
  31. package/dist/components/CuiTooltip.vue2.js +80 -66
  32. package/dist/composables/useDataGrid.d.ts +3 -2
  33. package/dist/composables/useDataGrid.d.ts.map +1 -1
  34. package/dist/composables/useDataGrid.js +222 -190
  35. package/dist/composables/useFieldDescribedBy.d.ts +1 -2
  36. package/dist/composables/useFieldDescribedBy.d.ts.map +1 -1
  37. package/dist/index.d.ts +1 -0
  38. package/dist/index.d.ts.map +1 -1
  39. package/dist/index.js +28 -26
  40. package/dist/version.js +1 -1
  41. package/package.json +1 -1
@@ -1,17 +1,17 @@
1
- import { defineComponent as me, ref as s, computed as m, watch as pe, onMounted as J, onUnmounted as he, useTemplateRef as Q, withDirectives as _, openBlock as d, createElementBlock as c, normalizeStyle as r, withModifiers as H, createElementVNode as l, createCommentVNode as p, withKeys as be, vModelText as ge, createBlock as ye, withCtx as xe, createTextVNode as we, toDisplayString as ke, Fragment as Se, renderList as Ee, vShow as Re } from "vue";
2
- import { clampSize as ze } from "../utils/sizing.js";
3
- import Pe from "./CuiButton.vue.js";
4
- import { hsvToRgb as ee, rgbToHex as Ce, formatColor as Le, getThemePalette as Me, PALETTE_BASIC as Te, PALETTE_MATERIAL as Be, PALETTE_TAILWIND as He, parseColor as D, rgbToHsv as A } from "../utils/color.js";
5
- const De = {
1
+ import { defineComponent as ce, ref as d, computed as p, watch as U, onMounted as X, onUnmounted as ve, useTemplateRef as G, withDirectives as K, openBlock as c, createElementBlock as v, normalizeStyle as i, withModifiers as $, createElementVNode as u, createCommentVNode as b, withKeys as fe, vModelText as he, createBlock as me, withCtx as pe, createTextVNode as be, toDisplayString as ge, Fragment as ye, renderList as xe, vShow as we } from "vue";
2
+ import { clampSize as ke } from "../utils/sizing.js";
3
+ import Se from "./CuiButton.vue.js";
4
+ import { hsvToRgb as Y, rgbToHex as Re, formatColor as Ee, getThemePalette as ze, PALETTE_BASIC as Ce, PALETTE_MATERIAL as Pe, PALETTE_TAILWIND as Te, parseColor as I, rgbToHsv as V } from "../utils/color.js";
5
+ const Le = {
6
6
  key: 0,
7
7
  style: { display: "flex", gap: "calc(0.625rem * var(--cui-density-scale, 1))", alignItems: "center" }
8
- }, Ae = { style: { flex: "1", display: "flex", flexDirection: "column", gap: "calc(0.5rem * var(--cui-density-scale, 1))" } }, $e = {
8
+ }, Me = { style: { flex: "1", display: "flex", flexDirection: "column", gap: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Be = {
9
9
  key: 1,
10
10
  style: { display: "flex", gap: "calc(0.375rem * var(--cui-density-scale, 1))", alignItems: "center" }
11
- }, Ve = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby"], Fe = {
11
+ }, Ae = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby"], He = {
12
12
  key: 2,
13
13
  style: { display: "flex", flexWrap: "wrap", gap: "calc(0.3125rem * var(--cui-density-scale, 1))" }
14
- }, Ie = ["onClick"], te = "repeating-conic-gradient(#d0d0d0 0% 25%, transparent 0% 50%) 0 0 / 12px 12px", Ge = /* @__PURE__ */ me({
14
+ }, $e = ["onClick"], Z = "repeating-conic-gradient(#d0d0d0 0% 25%, transparent 0% 50%) 0 0 / 12px 12px", De = /* @__PURE__ */ ce({
15
15
  __name: "CuiColorPicker",
16
16
  props: {
17
17
  modelValue: { default: "#000000" },
@@ -33,153 +33,142 @@ const De = {
33
33
  disabled: { type: Boolean, default: !1 }
34
34
  },
35
35
  emits: ["update:modelValue"],
36
- setup(n, { expose: ne, emit: ae }) {
37
- const ie = ["sm", "md", "lg"], a = n, re = ae, v = s(0), h = s(1), b = s(1), u = s(1), S = s(a.format), f = s(""), oe = {
36
+ setup(a, { expose: j, emit: J }) {
37
+ const Q = ["sm", "md", "lg"], n = a, _ = J, f = d(0), g = d(1), y = d(1), s = d(1), z = d(n.format), h = d(""), ee = {
38
38
  sm: { width: "220px", gradientHeight: "130px", sliderHeight: "10px", thumbSize: "14px", swatchSize: "20px", fontSize: "0.75rem" },
39
39
  md: { width: "280px", gradientHeight: "160px", sliderHeight: "12px", thumbSize: "16px", swatchSize: "24px", fontSize: "0.8125rem" },
40
40
  lg: { width: "340px", gradientHeight: "200px", sliderHeight: "14px", thumbSize: "18px", swatchSize: "28px", fontSize: "0.875rem" }
41
- }, o = m(() => oe[ze(a.size, ie)]), g = m(() => ee(v.value, h.value, b.value)), y = m(() => Ce(g.value.r, g.value.g, g.value.b)), $ = m(() => {
42
- const { r: e, g: t, b: i } = g.value;
43
- return u.value < 1 ? `rgba(${e}, ${t}, ${i}, ${u.value.toFixed(2)})` : y.value;
44
- }), x = m(() => {
45
- const { r: e, g: t, b: i } = g.value;
46
- return Le(e, t, i, u.value, S.value);
41
+ }, r = p(() => ee[ke(n.size, Q)]), w = p(() => Y(f.value, g.value, y.value)), k = p(() => Re(w.value.r, w.value.g, w.value.b)), F = p(() => {
42
+ const { r: e, g: t, b: o } = w.value;
43
+ return s.value < 1 ? `rgba(${e}, ${t}, ${o}, ${s.value.toFixed(2)})` : k.value;
44
+ }), S = p(() => {
45
+ const { r: e, g: t, b: o } = w.value;
46
+ return Ee(e, t, o, s.value, z.value);
47
47
  });
48
- function V() {
49
- const e = D(a.modelValue);
48
+ function O() {
49
+ const e = I(n.modelValue);
50
50
  if (e) {
51
- const t = A(e.r, e.g, e.b);
52
- v.value = t.h, h.value = t.s, b.value = t.v, u.value = e.a, f.value = x.value;
51
+ const t = V(e.r, e.g, e.b);
52
+ f.value = t.h, g.value = t.s, y.value = t.v, s.value = e.a, h.value = S.value;
53
53
  }
54
54
  }
55
- pe(() => a.modelValue, V), J(V);
56
- const F = s(0);
57
- let w = null;
58
- J(() => {
59
- a.presetPalette === "theme" && typeof MutationObserver < "u" && (w = new MutationObserver(() => {
60
- F.value++;
61
- }), w.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }));
62
- }), he(() => {
63
- w == null || w.disconnect();
55
+ U(() => n.modelValue, O), X(O);
56
+ const D = d(0);
57
+ let R = null;
58
+ X(() => {
59
+ n.presetPalette === "theme" && typeof MutationObserver < "u" && (R = new MutationObserver(() => {
60
+ D.value++;
61
+ }), R.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }));
62
+ }), ve(() => {
63
+ R == null || R.disconnect(), l == null || l();
64
64
  });
65
- function k() {
66
- f.value = x.value, re("update:modelValue", x.value);
65
+ function E() {
66
+ h.value = S.value, _("update:modelValue", S.value);
67
67
  }
68
- const I = m(() => a.palette ? a.palette : a.presetPalette === "theme" ? (F.value, Me()) : a.presetPalette === "basic" ? Te : a.presetPalette === "material" ? Be : a.presetPalette === "tailwind" ? He : []), P = s(null);
69
- let C = !1;
70
- function le(e) {
71
- a.disabled || (C = !0, W(e), document.addEventListener("pointermove", O), document.addEventListener("pointerup", U));
68
+ const W = p(() => n.palette ? n.palette : n.presetPalette === "theme" ? (D.value, ze()) : n.presetPalette === "basic" ? Ce : n.presetPalette === "material" ? Pe : n.presetPalette === "tailwind" ? Te : []);
69
+ let l = null;
70
+ function L(e, t) {
71
+ if (n.disabled) return;
72
+ l == null || l(), t(e);
73
+ const o = (x) => x.pointerId === e.pointerId, m = (x) => {
74
+ o(x) && t(x);
75
+ }, T = (x) => {
76
+ o(x) && H();
77
+ }, H = () => {
78
+ document.removeEventListener("pointermove", m), document.removeEventListener("pointerup", T), document.removeEventListener("pointercancel", T), l === H && (l = null);
79
+ };
80
+ l = H, document.addEventListener("pointermove", m), document.addEventListener("pointerup", T), document.addEventListener("pointercancel", T);
72
81
  }
73
- function O(e) {
74
- C && W(e);
75
- }
76
- function U() {
77
- C = !1, document.removeEventListener("pointermove", O), document.removeEventListener("pointerup", U);
78
- }
79
- function W(e) {
80
- if (!P.value) return;
81
- const t = P.value.getBoundingClientRect();
82
- h.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), b.value = Math.max(0, Math.min(1, 1 - (e.clientY - t.top) / t.height)), k();
83
- }
84
- const L = s(null);
85
- let M = !1;
86
- function ue(e) {
87
- a.disabled || (M = !0, N(e), document.addEventListener("pointermove", q), document.addEventListener("pointerup", G));
88
- }
89
- function q(e) {
90
- M && N(e);
91
- }
92
- function G() {
93
- M = !1, document.removeEventListener("pointermove", q), document.removeEventListener("pointerup", G);
94
- }
95
- function N(e) {
96
- if (!L.value) return;
97
- const t = L.value.getBoundingClientRect();
98
- v.value = Math.max(0, Math.min(360, (e.clientX - t.left) / t.width * 360)), k();
99
- }
100
- const T = s(null);
101
- let B = !1;
102
- function se(e) {
103
- a.disabled || (B = !0, Y(e), document.addEventListener("pointermove", X), document.addEventListener("pointerup", K));
104
- }
105
- function X(e) {
106
- B && Y(e);
82
+ U(() => n.disabled, (e) => {
83
+ e && (l == null || l());
84
+ });
85
+ const M = d(null), te = (e) => L(e, ae);
86
+ function ae(e) {
87
+ if (!M.value) return;
88
+ const t = M.value.getBoundingClientRect();
89
+ g.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), y.value = Math.max(0, Math.min(1, 1 - (e.clientY - t.top) / t.height)), E();
107
90
  }
108
- function K() {
109
- B = !1, document.removeEventListener("pointermove", X), document.removeEventListener("pointerup", K);
91
+ const B = d(null), oe = (e) => L(e, ie);
92
+ function ie(e) {
93
+ if (!B.value) return;
94
+ const t = B.value.getBoundingClientRect();
95
+ f.value = Math.max(0, Math.min(360, (e.clientX - t.left) / t.width * 360)), E();
110
96
  }
111
- function Y(e) {
112
- if (!T.value) return;
113
- const t = T.value.getBoundingClientRect();
114
- u.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), u.value = Math.round(u.value * 100) / 100, k();
97
+ const A = d(null), ne = (e) => L(e, re);
98
+ function re(e) {
99
+ if (!A.value) return;
100
+ const t = A.value.getBoundingClientRect();
101
+ s.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), s.value = Math.round(s.value * 100) / 100, E();
115
102
  }
116
- function Z() {
117
- const e = D(f.value);
103
+ function q() {
104
+ const e = I(h.value);
118
105
  if (e) {
119
- const t = A(e.r, e.g, e.b);
120
- v.value = t.h, h.value = t.s, b.value = t.v, u.value = e.a, k();
106
+ const t = V(e.r, e.g, e.b);
107
+ f.value = t.h, g.value = t.s, y.value = t.v, s.value = e.a, E();
121
108
  } else
122
- f.value = x.value;
109
+ h.value = S.value;
123
110
  }
124
- function de() {
125
- const e = ["hex", "rgb", "hsl"], t = e.indexOf(S.value);
126
- S.value = e[(t + 1) % e.length], f.value = x.value;
111
+ function le() {
112
+ const e = ["hex", "rgb", "hsl"], t = e.indexOf(z.value);
113
+ z.value = e[(t + 1) % e.length], h.value = S.value;
127
114
  }
128
- function ce(e) {
129
- if (a.disabled) return;
130
- const t = D(e);
115
+ function ue(e) {
116
+ if (n.disabled) return;
117
+ const t = I(e);
131
118
  if (t) {
132
- const i = A(t.r, t.g, t.b);
133
- v.value = i.h, h.value = i.s, b.value = i.v, u.value = t.a, k();
119
+ const o = V(t.r, t.g, t.b);
120
+ f.value = o.h, g.value = o.s, y.value = o.v, s.value = t.a, E();
134
121
  }
135
122
  }
136
- const j = m(() => {
137
- const e = ee(v.value, 1, 1);
123
+ const N = p(() => {
124
+ const e = Y(f.value, 1, 1);
138
125
  return `rgb(${e.r}, ${e.g}, ${e.b})`;
139
- }), E = Q("rootEl"), R = Q("inputEl");
140
- function ve(e) {
126
+ }), C = G("rootEl"), P = G("inputEl");
127
+ function se(e) {
141
128
  var t;
142
- R.value ? R.value.focus(e) : (t = E.value) == null || t.focus(e);
129
+ P.value ? P.value.focus(e) : (t = C.value) == null || t.focus(e);
143
130
  }
144
- function fe() {
131
+ function de() {
145
132
  var e;
146
- R.value ? R.value.blur() : (e = E.value) == null || e.blur();
133
+ P.value ? P.value.blur() : (e = C.value) == null || e.blur();
147
134
  }
148
- return ne({ el: E, focus: ve, blur: fe }), (e, t) => _((d(), c("div", {
135
+ return j({ el: C, focus: se, blur: de }), (e, t) => K((c(), v("div", {
149
136
  class: "cui-color-picker",
150
137
  ref_key: "rootEl",
151
- ref: E,
152
- style: r({
153
- width: o.value.width,
154
- opacity: n.disabled ? "0.5" : "1",
155
- pointerEvents: n.disabled ? "none" : void 0,
138
+ ref: C,
139
+ style: i({
140
+ width: r.value.width,
141
+ opacity: a.disabled ? "0.5" : "1",
142
+ pointerEvents: a.disabled ? "none" : void 0,
156
143
  userSelect: "none"
157
144
  })
158
145
  }, [
159
- n.swatchOnly ? p("", !0) : (d(), c("div", {
146
+ a.swatchOnly ? b("", !0) : (c(), v("div", {
160
147
  key: 0,
161
148
  ref_key: "gradientRef",
162
- ref: P,
163
- style: r({
149
+ ref: M,
150
+ class: "cui-color-picker__gradient",
151
+ style: i({
164
152
  position: "relative",
165
153
  width: "100%",
166
- height: o.value.gradientHeight,
154
+ height: r.value.gradientHeight,
167
155
  borderRadius: "0.5rem 0.5rem 0 0",
168
156
  cursor: "crosshair",
157
+ touchAction: "none",
169
158
  overflow: "hidden",
170
- background: j.value
159
+ background: N.value
171
160
  }),
172
- onPointerdown: H(le, ["prevent"])
161
+ onPointerdown: $(te, ["prevent"])
173
162
  }, [
174
- t[3] || (t[3] = l("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to right, white, transparent)" } }, null, -1)),
175
- t[4] || (t[4] = l("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to bottom, transparent, black)" } }, null, -1)),
176
- l("div", {
177
- style: r({
163
+ t[3] || (t[3] = u("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to right, white, transparent)" } }, null, -1)),
164
+ t[4] || (t[4] = u("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to bottom, transparent, black)" } }, null, -1)),
165
+ u("div", {
166
+ style: i({
178
167
  position: "absolute",
179
- left: `${h.value * 100}%`,
180
- top: `${(1 - b.value) * 100}%`,
181
- width: o.value.thumbSize,
182
- height: o.value.thumbSize,
168
+ left: `${g.value * 100}%`,
169
+ top: `${(1 - y.value) * 100}%`,
170
+ width: r.value.thumbSize,
171
+ height: r.value.thumbSize,
183
172
  borderRadius: "50%",
184
173
  border: "2px solid white",
185
174
  boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
@@ -188,124 +177,128 @@ const De = {
188
177
  })
189
178
  }, null, 4)
190
179
  ], 36)),
191
- l("div", {
192
- style: r({
180
+ u("div", {
181
+ style: i({
193
182
  padding: "calc(0.75rem * var(--cui-density-scale, 1))",
194
183
  background: "var(--cui-surface-base, white)",
195
184
  border: "1px solid var(--cui-border)",
196
- borderTop: n.swatchOnly ? void 0 : "none",
197
- borderRadius: n.swatchOnly ? "0.5rem" : "0 0 0.5rem 0.5rem",
185
+ borderTop: a.swatchOnly ? void 0 : "none",
186
+ borderRadius: a.swatchOnly ? "0.5rem" : "0 0 0.5rem 0.5rem",
198
187
  display: "flex",
199
188
  flexDirection: "column",
200
189
  gap: "calc(0.625rem * var(--cui-density-scale, 1))"
201
190
  })
202
191
  }, [
203
- n.swatchOnly ? p("", !0) : (d(), c("div", De, [
204
- l("div", {
205
- style: r({
192
+ a.swatchOnly ? b("", !0) : (c(), v("div", Le, [
193
+ u("div", {
194
+ style: i({
206
195
  width: "2rem",
207
196
  height: "2rem",
208
197
  borderRadius: "50%",
209
198
  border: "1px solid var(--cui-border)",
210
199
  flexShrink: "0",
211
- background: te,
200
+ background: Z,
212
201
  position: "relative",
213
202
  overflow: "hidden"
214
203
  })
215
204
  }, [
216
- l("div", {
217
- style: r({ position: "absolute", inset: "0", borderRadius: "50%", background: $.value })
205
+ u("div", {
206
+ style: i({ position: "absolute", inset: "0", borderRadius: "50%", background: F.value })
218
207
  }, null, 4)
219
208
  ], 4),
220
- l("div", Ae, [
221
- l("div", {
209
+ u("div", Me, [
210
+ u("div", {
222
211
  ref_key: "hueRef",
223
- ref: L,
224
- style: r({
212
+ ref: B,
213
+ class: "cui-color-picker__hue",
214
+ style: i({
225
215
  position: "relative",
226
- height: o.value.sliderHeight,
216
+ height: r.value.sliderHeight,
227
217
  borderRadius: "9999px",
228
218
  cursor: "pointer",
219
+ touchAction: "none",
229
220
  background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
230
221
  }),
231
- onPointerdown: H(ue, ["prevent"])
222
+ onPointerdown: $(oe, ["prevent"])
232
223
  }, [
233
- l("div", {
234
- style: r({
224
+ u("div", {
225
+ style: i({
235
226
  position: "absolute",
236
- left: `${v.value / 360 * 100}%`,
227
+ left: `${f.value / 360 * 100}%`,
237
228
  top: "50%",
238
- width: o.value.thumbSize,
239
- height: o.value.thumbSize,
229
+ width: r.value.thumbSize,
230
+ height: r.value.thumbSize,
240
231
  borderRadius: "50%",
241
232
  border: "2px solid white",
242
233
  boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
243
234
  transform: "translate(-50%, -50%)",
244
235
  pointerEvents: "none",
245
- background: j.value
236
+ background: N.value
246
237
  })
247
238
  }, null, 4)
248
239
  ], 36),
249
- n.showAlpha ? (d(), c("div", {
240
+ a.showAlpha ? (c(), v("div", {
250
241
  key: 0,
251
242
  ref_key: "alphaRef",
252
- ref: T,
253
- style: r({
243
+ ref: A,
244
+ class: "cui-color-picker__alpha",
245
+ style: i({
254
246
  position: "relative",
255
- height: o.value.sliderHeight,
247
+ height: r.value.sliderHeight,
256
248
  borderRadius: "9999px",
257
249
  cursor: "pointer",
258
- background: te,
250
+ touchAction: "none",
251
+ background: Z,
259
252
  overflow: "hidden"
260
253
  }),
261
- onPointerdown: H(se, ["prevent"])
254
+ onPointerdown: $(ne, ["prevent"])
262
255
  }, [
263
- l("div", {
264
- style: r({ position: "absolute", inset: "0", borderRadius: "9999px", background: `linear-gradient(to right, transparent, ${y.value})` })
256
+ u("div", {
257
+ style: i({ position: "absolute", inset: "0", borderRadius: "9999px", background: `linear-gradient(to right, transparent, ${k.value})` })
265
258
  }, null, 4),
266
- l("div", {
267
- style: r({
259
+ u("div", {
260
+ style: i({
268
261
  position: "absolute",
269
- left: `${u.value * 100}%`,
262
+ left: `${s.value * 100}%`,
270
263
  top: "50%",
271
- width: o.value.thumbSize,
272
- height: o.value.thumbSize,
264
+ width: r.value.thumbSize,
265
+ height: r.value.thumbSize,
273
266
  borderRadius: "50%",
274
267
  border: "2px solid white",
275
268
  boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
276
269
  transform: "translate(-50%, -50%)",
277
270
  pointerEvents: "none",
278
- background: y.value
271
+ background: k.value
279
272
  })
280
273
  }, null, 4)
281
- ], 36)) : p("", !0)
274
+ ], 36)) : b("", !0)
282
275
  ])
283
276
  ])),
284
- n.showInput ? (d(), c("div", $e, [
285
- n.swatchOnly ? (d(), c("div", {
277
+ a.showInput ? (c(), v("div", Be, [
278
+ a.swatchOnly ? (c(), v("div", {
286
279
  key: 0,
287
- style: r({
280
+ style: i({
288
281
  width: "1.5rem",
289
282
  height: "1.5rem",
290
283
  borderRadius: "0.25rem",
291
284
  border: "1px solid var(--cui-border)",
292
285
  flexShrink: "0",
293
- background: $.value
286
+ background: F.value
294
287
  })
295
- }, null, 4)) : p("", !0),
296
- _(l("input", {
288
+ }, null, 4)) : b("", !0),
289
+ K(u("input", {
297
290
  ref: "inputEl",
298
- id: n.id,
299
- name: n.name,
300
- autocomplete: n.autocomplete,
301
- "aria-describedby": n.ariaDescribedby,
302
- "aria-required": n.ariaRequired || void 0,
303
- "aria-labelledby": n.ariaLabelledby,
304
- "onUpdate:modelValue": t[0] || (t[0] = (i) => f.value = i),
305
- style: r({
291
+ id: a.id,
292
+ name: a.name,
293
+ autocomplete: a.autocomplete,
294
+ "aria-describedby": a.ariaDescribedby,
295
+ "aria-required": a.ariaRequired || void 0,
296
+ "aria-labelledby": a.ariaLabelledby,
297
+ "onUpdate:modelValue": t[0] || (t[0] = (o) => h.value = o),
298
+ style: i({
306
299
  flex: "1",
307
300
  padding: "calc(0.3125rem * var(--cui-density-scale, 1)) calc(0.5rem * var(--cui-density-scale, 1))",
308
- fontSize: o.value.fontSize,
301
+ fontSize: r.value.fontSize,
309
302
  fontFamily: "var(--cui-font-mono, monospace)",
310
303
  border: "1px solid var(--cui-border-strong, var(--cui-border))",
311
304
  borderRadius: "0.25rem",
@@ -314,48 +307,48 @@ const De = {
314
307
  outline: "none",
315
308
  minWidth: "0"
316
309
  }),
317
- onKeydown: be(Z, ["enter"]),
318
- onBlur: Z
319
- }, null, 44, Ve), [
320
- [ge, f.value]
310
+ onKeydown: fe(q, ["enter"]),
311
+ onBlur: q
312
+ }, null, 44, Ae), [
313
+ [he, h.value]
321
314
  ]),
322
- n.showFormatToggle ? (d(), ye(Pe, {
315
+ a.showFormatToggle ? (c(), me(Se, {
323
316
  key: 1,
324
317
  variant: "ghost",
325
318
  size: "xs",
326
- style: r({ flexShrink: "0", fontFamily: "var(--cui-font-mono, monospace)", fontSize: o.value.fontSize, fontWeight: "600", minWidth: "2.5rem" }),
327
- onClick: de
319
+ style: i({ flexShrink: "0", fontFamily: "var(--cui-font-mono, monospace)", fontSize: r.value.fontSize, fontWeight: "600", minWidth: "2.5rem" }),
320
+ onClick: le
328
321
  }, {
329
- default: xe(() => [
330
- we(ke(S.value.toUpperCase()), 1)
322
+ default: pe(() => [
323
+ be(ge(z.value.toUpperCase()), 1)
331
324
  ]),
332
325
  _: 1
333
- }, 8, ["style"])) : p("", !0)
334
- ])) : p("", !0),
335
- I.value.length > 0 ? (d(), c("div", Fe, [
336
- (d(!0), c(Se, null, Ee(I.value, (i) => (d(), c("div", {
337
- key: i,
338
- style: r({
339
- width: o.value.swatchSize,
340
- height: o.value.swatchSize,
326
+ }, 8, ["style"])) : b("", !0)
327
+ ])) : b("", !0),
328
+ W.value.length > 0 ? (c(), v("div", He, [
329
+ (c(!0), v(ye, null, xe(W.value, (o) => (c(), v("div", {
330
+ key: o,
331
+ style: i({
332
+ width: r.value.swatchSize,
333
+ height: r.value.swatchSize,
341
334
  borderRadius: "0.25rem",
342
- background: i,
335
+ background: o,
343
336
  cursor: "pointer",
344
- border: y.value.toLowerCase() === i.toLowerCase() ? "2px solid var(--cui-primary)" : "1px solid var(--cui-border)",
345
- boxShadow: y.value.toLowerCase() === i.toLowerCase() ? "0 0 0 1px var(--cui-primary)" : "none",
337
+ border: k.value.toLowerCase() === o.toLowerCase() ? "2px solid var(--cui-primary)" : "1px solid var(--cui-border)",
338
+ boxShadow: k.value.toLowerCase() === o.toLowerCase() ? "0 0 0 1px var(--cui-primary)" : "none",
346
339
  transition: "transform 0.1s ease"
347
340
  }),
348
- onClick: (z) => ce(i),
349
- onMouseenter: t[1] || (t[1] = (z) => z.target.style.transform = "scale(1.15)"),
350
- onMouseleave: t[2] || (t[2] = (z) => z.target.style.transform = "scale(1)")
351
- }, null, 44, Ie))), 128))
352
- ])) : p("", !0)
341
+ onClick: (m) => ue(o),
342
+ onMouseenter: t[1] || (t[1] = (m) => m.target.style.transform = "scale(1.15)"),
343
+ onMouseleave: t[2] || (t[2] = (m) => m.target.style.transform = "scale(1)")
344
+ }, null, 44, $e))), 128))
345
+ ])) : b("", !0)
353
346
  ], 4)
354
347
  ], 4)), [
355
- [Re, !n.hidden]
348
+ [we, !a.hidden]
356
349
  ]);
357
350
  }
358
351
  });
359
352
  export {
360
- Ge as default
353
+ De as default
361
354
  };
@@ -1 +1 @@
1
- {"version":3,"file":"CuiCombobox.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiCombobox.vue"],"names":[],"mappings":"AA2mBA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAQtI,MAAM,WAAW,cAAc;IAC7B,mBAAmB;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IAC1H,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IAC1D,qBAAqB;IACrB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC5D,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAmSD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAkSD,QAAA,IAAI,QAAQ;;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAmD/C,QAAA,MAAM,eAAe;;;;;;;;;;;WAvoBX,OAAO;;;;aAML,UAAU;aAVV,OAAO;;iBAVH,MAAM;aAJV,cAAc,EAAE;cAEf,OAAO;cAMP,MAAM;cAEN,MAAM;gBAEJ,MAAM;mBAUH,MAAM;6EA4oBtB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"CuiCombobox.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiCombobox.vue"],"names":[],"mappings":"AAmnBA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAQtI,MAAM,WAAW,cAAc;IAC7B,mBAAmB;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IAC1H,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IAC1D,qBAAqB;IACrB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC5D,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AA2SD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAkSD,QAAA,IAAI,QAAQ;;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAmD/C,QAAA,MAAM,eAAe;;;;;;;;;;;WA/oBX,OAAO;;;;aAML,UAAU;aAVV,OAAO;;iBAVH,MAAM;aAJV,cAAc,EAAE;cAEf,OAAO;cAMP,MAAM;cAEN,MAAM;gBAEJ,MAAM;mBAUH,MAAM;6EAopBtB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import o from "./CuiCombobox.vue2.js";
2
2
  /* empty css */
3
3
  import t from "../_virtual/_plugin-vue_export-helper.js";
4
- const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-15b8e0bc"]]);
4
+ const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a05525e3"]]);
5
5
  export {
6
- _ as default
6
+ p as default
7
7
  };