glass-ui-solid 0.4.5 → 0.4.6
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACxD,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,kCAiGhC"}
|
|
@@ -1,51 +1,53 @@
|
|
|
1
|
-
import { template as
|
|
2
|
-
import { createSignal as k, onMount as
|
|
3
|
-
var
|
|
4
|
-
function
|
|
5
|
-
const [c,
|
|
1
|
+
import { template as z, insert as y, createComponent as B, use as $, effect as C, className as b, setAttribute as F, setStyleProperty as u, delegateEvents as q } from "solid-js/web";
|
|
2
|
+
import { createSignal as k, onMount as E, onCleanup as M, createEffect as N, on as O, For as P } from "solid-js";
|
|
3
|
+
var V = /* @__PURE__ */ z('<div role=group><div style="transition-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1)">'), j = /* @__PURE__ */ z("<button type=button>");
|
|
4
|
+
function H(a) {
|
|
5
|
+
const [c, R] = k({
|
|
6
6
|
left: 0,
|
|
7
7
|
top: 0,
|
|
8
8
|
width: 0,
|
|
9
9
|
height: 0
|
|
10
|
-
}), [
|
|
10
|
+
}), [g, I] = k(!1);
|
|
11
11
|
let d;
|
|
12
|
-
const
|
|
13
|
-
const t =
|
|
12
|
+
const v = /* @__PURE__ */ new Map(), S = () => a.orientation === "vertical", A = () => a.size === "sm" ? "px-2 py-1 text-[0.625rem]" : "px-3 py-1.5 text-xs", f = () => {
|
|
13
|
+
const t = v.get(a.value);
|
|
14
14
|
if (t && d) {
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
left:
|
|
18
|
-
top:
|
|
19
|
-
width:
|
|
20
|
-
height:
|
|
15
|
+
const r = d.getBoundingClientRect(), o = t.getBoundingClientRect();
|
|
16
|
+
R({
|
|
17
|
+
left: o.left - r.left,
|
|
18
|
+
top: o.top - r.top,
|
|
19
|
+
width: o.width,
|
|
20
|
+
height: o.height
|
|
21
21
|
});
|
|
22
22
|
}
|
|
23
|
-
};
|
|
24
|
-
return
|
|
23
|
+
}, h = new ResizeObserver(() => f());
|
|
24
|
+
return E(() => {
|
|
25
|
+
for (const t of v.values())
|
|
26
|
+
h.observe(t);
|
|
25
27
|
requestAnimationFrame(() => {
|
|
26
|
-
|
|
28
|
+
f(), requestAnimationFrame(() => I(!0));
|
|
27
29
|
});
|
|
28
|
-
}),
|
|
29
|
-
|
|
30
|
+
}), M(() => h.disconnect()), N(O(() => a.value, () => {
|
|
31
|
+
g() && f();
|
|
30
32
|
})), (() => {
|
|
31
|
-
var t =
|
|
32
|
-
return typeof
|
|
33
|
+
var t = V(), r = t.firstChild, o = d;
|
|
34
|
+
return typeof o == "function" ? $(o, t) : d = t, y(t, B(P, {
|
|
33
35
|
get each() {
|
|
34
36
|
return a.options;
|
|
35
37
|
},
|
|
36
38
|
children: (e) => (() => {
|
|
37
|
-
var
|
|
38
|
-
return
|
|
39
|
-
var
|
|
40
|
-
return
|
|
39
|
+
var n = j();
|
|
40
|
+
return n.$$click = () => !e.disabled && a.onChange(e.value), $((i) => v.set(e.value, i), n), y(n, () => e.label), C((i) => {
|
|
41
|
+
var l = e.disabled, s = `${A()} font-bold rounded-lg transition-colors duration-200 relative z-10 ${a.value === e.value ? "text-surface-900 dark:text-surface-100" : "text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100"} ${e.disabled ? "opacity-50 cursor-not-allowed" : ""}`;
|
|
42
|
+
return l !== i.e && (n.disabled = i.e = l), s !== i.t && b(n, i.t = s), i;
|
|
41
43
|
}, {
|
|
42
44
|
e: void 0,
|
|
43
45
|
t: void 0
|
|
44
|
-
}),
|
|
46
|
+
}), n;
|
|
45
47
|
})()
|
|
46
|
-
}), null),
|
|
47
|
-
var
|
|
48
|
-
return
|
|
48
|
+
}), null), C((e) => {
|
|
49
|
+
var n = a["aria-label"], i = `relative flex ${S() ? "flex-col" : "items-center"} gap-1 p-1 bg-surface-200/80 dark:bg-surface-800/80 rounded-xl w-fit ${a.class ?? ""}`, l = `absolute rounded-lg bg-white dark:bg-surface-600 shadow-sm ${g() ? "transition-all duration-300" : ""}`, s = `${c().left}px`, m = `${c().top}px`, x = `${c().width}px`, w = `${c().height}px`;
|
|
50
|
+
return n !== e.e && F(t, "aria-label", e.e = n), i !== e.t && b(t, e.t = i), l !== e.a && b(r, e.a = l), s !== e.o && u(r, "left", e.o = s), m !== e.i && u(r, "top", e.i = m), x !== e.n && u(r, "width", e.n = x), w !== e.s && u(r, "height", e.s = w), e;
|
|
49
51
|
}, {
|
|
50
52
|
e: void 0,
|
|
51
53
|
t: void 0,
|
|
@@ -57,8 +59,8 @@ function G(a) {
|
|
|
57
59
|
}), t;
|
|
58
60
|
})();
|
|
59
61
|
}
|
|
60
|
-
|
|
62
|
+
q(["click"]);
|
|
61
63
|
export {
|
|
62
|
-
|
|
64
|
+
H as SegmentedControl
|
|
63
65
|
};
|
|
64
66
|
//# sourceMappingURL=SegmentedControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n For,\n createEffect,\n createSignal,\n on,\n onCleanup,\n onMount,\n} from 'solid-js';\nimport type { SegmentedControlProps } from './types';\n\nexport function SegmentedControl<T extends string | number>(\n props: SegmentedControlProps<T>,\n) {\n const [indicatorStyle, setIndicatorStyle] = createSignal({\n left: 0,\n top: 0,\n width: 0,\n height: 0,\n });\n const [isInitialized, setIsInitialized] = createSignal(false);\n let containerRef: HTMLDivElement | undefined;\n const buttonRefs: Map<T, HTMLButtonElement> = new Map();\n\n const isVertical = () => props.orientation === 'vertical';\n\n const sizeClasses = () =>\n props.size === 'sm' ? 'px-2 py-1 text-[0.625rem]' : 'px-3 py-1.5 text-xs';\n\n const updateIndicator = () => {\n const activeButton = buttonRefs.get(props.value);\n if (activeButton && containerRef) {\n const containerRect = containerRef.getBoundingClientRect();\n const buttonRect = activeButton.getBoundingClientRect();\n setIndicatorStyle({\n left: buttonRect.left - containerRect.left,\n top: buttonRect.top - containerRect.top,\n width: buttonRect.width,\n height: buttonRect.height,\n });\n }\n };\n\n const observer = new ResizeObserver(() => updateIndicator());\n\n onMount(() => {\n for (const btn of buttonRefs.values()) {\n observer.observe(btn);\n }\n requestAnimationFrame(() => {\n updateIndicator();\n requestAnimationFrame(() => setIsInitialized(true));\n });\n });\n\n onCleanup(() => observer.disconnect());\n\n createEffect(\n on(\n () => props.value,\n () => {\n if (isInitialized()) {\n updateIndicator();\n }\n },\n ),\n );\n\n return (\n <div\n ref={containerRef}\n role=\"group\"\n aria-label={props['aria-label']}\n class={`relative flex ${isVertical() ? 'flex-col' : 'items-center'} gap-1 p-1 bg-surface-200/80 dark:bg-surface-800/80 rounded-xl w-fit ${\n props.class ?? ''\n }`}\n >\n {/* Sliding indicator - iOS 26 style */}\n <div\n class={`absolute rounded-lg bg-white dark:bg-surface-600 shadow-sm ${\n isInitialized() ? 'transition-all duration-300' : ''\n }`}\n style={{\n left: `${indicatorStyle().left}px`,\n top: `${indicatorStyle().top}px`,\n width: `${indicatorStyle().width}px`,\n height: `${indicatorStyle().height}px`,\n 'transition-timing-function': 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n }}\n />\n <For each={props.options}>\n {(option) => (\n <button\n ref={(el) => buttonRefs.set(option.value, el)}\n type=\"button\"\n onClick={() => !option.disabled && props.onChange(option.value)}\n disabled={option.disabled}\n class={`${sizeClasses()} font-bold rounded-lg transition-colors duration-200 relative z-10 ${\n props.value === option.value\n ? 'text-surface-900 dark:text-surface-100'\n : 'text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100'\n } ${option.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n >\n {option.label}\n </button>\n )}\n </For>\n </div>\n );\n}\n"],"names":["SegmentedControl","props","indicatorStyle","setIndicatorStyle","createSignal","left","top","width","height","isInitialized","setIsInitialized","containerRef","buttonRefs","Map","isVertical","orientation","sizeClasses","size","updateIndicator","activeButton","get","value","containerRect","getBoundingClientRect","buttonRect","observer","ResizeObserver","onMount","btn","values","observe","requestAnimationFrame","onCleanup","disconnect","createEffect","on","_el$","_tmpl$","_el$2","firstChild","_ref$","_$use","_$insert","_$createComponent","For","each","options","children","option","_el$3","_tmpl$2","$$click","disabled","onChange","el","set","label","_$effect","_p$","_v$8","_v$9","e","t","_$className","undefined","_v$","_v$2","class","_v$3","_v$4","_v$5","_v$6","_v$7","_$setAttribute","a","o","_$setStyleProperty","i","n","s","_$delegateEvents"],"mappings":"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"}
|