@pathscale/ui 1.1.39 → 1.1.40
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/dist/components/progress-bar/ProgressBar.classes.d.ts +23 -0
- package/dist/components/progress-bar/ProgressBar.classes.js +24 -0
- package/dist/components/progress-bar/ProgressBar.css +104 -0
- package/dist/components/progress-bar/ProgressBar.d.ts +19 -0
- package/dist/components/progress-bar/ProgressBar.js +109 -0
- package/dist/components/progress-bar/index.d.ts +2 -0
- package/dist/components/progress-bar/index.js +3 -0
- package/dist/components/progress-circle/ProgressCircle.classes.d.ts +22 -0
- package/dist/components/progress-circle/ProgressCircle.classes.js +23 -0
- package/dist/components/progress-circle/ProgressCircle.css +82 -0
- package/dist/components/progress-circle/ProgressCircle.d.ts +18 -0
- package/dist/components/progress-circle/ProgressCircle.js +95 -0
- package/dist/components/progress-circle/index.d.ts +2 -0
- package/dist/components/progress-circle/index.js +3 -0
- package/dist/components/{loading/Loading.d.ts → spinner/Spinner.d.ts} +4 -4
- package/dist/components/{loading/Loading.js → spinner/Spinner.js} +4 -4
- package/dist/components/spinner/index.d.ts +1 -0
- package/dist/components/spinner/index.js +5 -0
- package/dist/index.d.ts +7 -4
- package/dist/index.js +8 -11
- package/dist/purge-manifest.json +90 -0
- package/package.json +1 -1
- package/dist/components/loading/index.d.ts +0 -1
- package/dist/components/loading/index.js +0 -3
- package/dist/components/progress/Progress.css +0 -135
- package/dist/components/progress/Progress.d.ts +0 -36
- package/dist/components/progress/Progress.js +0 -197
- package/dist/components/progress/index.d.ts +0 -1
- package/dist/components/progress/index.js +0 -7
- package/dist/components/radialprogress/RadialProgress.d.ts +0 -10
- package/dist/components/radialprogress/RadialProgress.js +0 -47
- package/dist/components/radialprogress/index.d.ts +0 -1
- package/dist/components/radialprogress/index.js +0 -3
- /package/dist/components/{loading/Loading.css → spinner/Spinner.css} +0 -0
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export declare const CLASSES: {
|
|
2
|
+
readonly base: "progress-bar";
|
|
3
|
+
readonly label: "progress-bar__label";
|
|
4
|
+
readonly output: "progress-bar__output";
|
|
5
|
+
readonly track: "progress-bar__track";
|
|
6
|
+
readonly indicator: "progress-bar__indicator";
|
|
7
|
+
readonly size: {
|
|
8
|
+
readonly sm: "progress-bar--sm";
|
|
9
|
+
readonly md: "progress-bar--md";
|
|
10
|
+
readonly lg: "progress-bar--lg";
|
|
11
|
+
};
|
|
12
|
+
readonly color: {
|
|
13
|
+
readonly default: "progress-bar--default";
|
|
14
|
+
readonly accent: "progress-bar--accent";
|
|
15
|
+
readonly success: "progress-bar--success";
|
|
16
|
+
readonly warning: "progress-bar--warning";
|
|
17
|
+
readonly danger: "progress-bar--danger";
|
|
18
|
+
};
|
|
19
|
+
readonly state: {
|
|
20
|
+
readonly indeterminate: "progress-bar--indeterminate";
|
|
21
|
+
readonly disabled: "progress-bar--disabled";
|
|
22
|
+
};
|
|
23
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
const CLASSES = {
|
|
2
|
+
base: "progress-bar",
|
|
3
|
+
label: "progress-bar__label",
|
|
4
|
+
output: "progress-bar__output",
|
|
5
|
+
track: "progress-bar__track",
|
|
6
|
+
indicator: "progress-bar__indicator",
|
|
7
|
+
size: {
|
|
8
|
+
sm: "progress-bar--sm",
|
|
9
|
+
md: "progress-bar--md",
|
|
10
|
+
lg: "progress-bar--lg"
|
|
11
|
+
},
|
|
12
|
+
color: {
|
|
13
|
+
default: "progress-bar--default",
|
|
14
|
+
accent: "progress-bar--accent",
|
|
15
|
+
success: "progress-bar--success",
|
|
16
|
+
warning: "progress-bar--warning",
|
|
17
|
+
danger: "progress-bar--danger"
|
|
18
|
+
},
|
|
19
|
+
state: {
|
|
20
|
+
indeterminate: "progress-bar--indeterminate",
|
|
21
|
+
disabled: "progress-bar--disabled"
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
export { CLASSES };
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.progress-bar {
|
|
3
|
+
display: grid;
|
|
4
|
+
width: 100%;
|
|
5
|
+
gap: 0.25rem;
|
|
6
|
+
grid-template-areas:
|
|
7
|
+
"label output"
|
|
8
|
+
"track track";
|
|
9
|
+
grid-template-columns: 1fr auto;
|
|
10
|
+
|
|
11
|
+
--progress-bar-fill: var(--color-accent);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.progress-bar__label {
|
|
15
|
+
grid-area: label;
|
|
16
|
+
width: fit-content;
|
|
17
|
+
font-size: 0.875rem;
|
|
18
|
+
font-weight: 500;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.progress-bar__output {
|
|
22
|
+
grid-area: output;
|
|
23
|
+
font-size: 0.875rem;
|
|
24
|
+
font-weight: 500;
|
|
25
|
+
font-variant-numeric: tabular-nums;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.progress-bar__track {
|
|
29
|
+
grid-area: track;
|
|
30
|
+
position: relative;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
border-radius: 9999px;
|
|
33
|
+
background: var(--color-base-200);
|
|
34
|
+
height: 0.5rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.progress-bar__indicator {
|
|
38
|
+
position: absolute;
|
|
39
|
+
top: 0;
|
|
40
|
+
left: 0;
|
|
41
|
+
height: 100%;
|
|
42
|
+
border-radius: 9999px;
|
|
43
|
+
background-color: var(--progress-bar-fill);
|
|
44
|
+
transition: width 300ms var(--ease-out);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.progress-bar--indeterminate .progress-bar__indicator {
|
|
48
|
+
width: 40%;
|
|
49
|
+
animation: progress-bar-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.progress-bar--disabled,
|
|
53
|
+
.progress-bar[aria-disabled="true"],
|
|
54
|
+
.progress-bar[data-disabled="true"] {
|
|
55
|
+
opacity: 0.6;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.progress-bar--sm .progress-bar__track {
|
|
59
|
+
height: 0.25rem;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.progress-bar--lg .progress-bar__track {
|
|
63
|
+
height: 0.75rem;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.progress-bar--default {
|
|
67
|
+
--progress-bar-fill: var(--color-base-content);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.progress-bar--accent {
|
|
71
|
+
--progress-bar-fill: var(--color-accent);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.progress-bar--success {
|
|
75
|
+
--progress-bar-fill: var(--color-success);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.progress-bar--warning {
|
|
79
|
+
--progress-bar-fill: var(--color-warning);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.progress-bar--danger {
|
|
83
|
+
--progress-bar-fill: var(--color-danger);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@keyframes progress-bar-indeterminate {
|
|
87
|
+
0% {
|
|
88
|
+
transform: translateX(-100%);
|
|
89
|
+
}
|
|
90
|
+
100% {
|
|
91
|
+
transform: translateX(350%);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
@media (prefers-reduced-motion: reduce) {
|
|
96
|
+
.progress-bar__indicator {
|
|
97
|
+
transition: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.progress-bar--indeterminate .progress-bar__indicator {
|
|
101
|
+
animation: none;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import "./ProgressBar.css";
|
|
2
|
+
import { type JSX } from "solid-js";
|
|
3
|
+
import type { IComponentBaseProps } from "../types";
|
|
4
|
+
export type ProgressBarSize = "sm" | "md" | "lg";
|
|
5
|
+
export type ProgressBarColor = "default" | "accent" | "success" | "warning" | "danger";
|
|
6
|
+
export type ProgressBarProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
7
|
+
value?: number;
|
|
8
|
+
minValue?: number;
|
|
9
|
+
maxValue?: number;
|
|
10
|
+
isIndeterminate?: boolean;
|
|
11
|
+
label?: string;
|
|
12
|
+
size?: ProgressBarSize;
|
|
13
|
+
color?: ProgressBarColor;
|
|
14
|
+
isDisabled?: boolean;
|
|
15
|
+
formatValue?: (value: number) => string;
|
|
16
|
+
showValue?: boolean;
|
|
17
|
+
};
|
|
18
|
+
declare const ProgressBar: (props: ProgressBarProps) => JSX.Element;
|
|
19
|
+
export default ProgressBar;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
|
|
2
|
+
import "./ProgressBar.css";
|
|
3
|
+
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
|
|
4
|
+
import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
|
|
5
|
+
import * as __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__ from "./ProgressBar.classes.js";
|
|
6
|
+
var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
|
|
7
|
+
const ProgressBar = (props)=>{
|
|
8
|
+
const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
9
|
+
"value",
|
|
10
|
+
"minValue",
|
|
11
|
+
"maxValue",
|
|
12
|
+
"isIndeterminate",
|
|
13
|
+
"label",
|
|
14
|
+
"size",
|
|
15
|
+
"color",
|
|
16
|
+
"isDisabled",
|
|
17
|
+
"formatValue",
|
|
18
|
+
"showValue",
|
|
19
|
+
"class",
|
|
20
|
+
"className",
|
|
21
|
+
"dataTheme",
|
|
22
|
+
"style"
|
|
23
|
+
]);
|
|
24
|
+
const min = ()=>local.minValue ?? 0;
|
|
25
|
+
const max = ()=>local.maxValue ?? 100;
|
|
26
|
+
const isIndeterminate = ()=>Boolean(local.isIndeterminate) || void 0 === local.value;
|
|
27
|
+
const percentage = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
|
|
28
|
+
if (isIndeterminate()) return 0;
|
|
29
|
+
const clamped = Math.min(Math.max(local.value ?? 0, min()), max());
|
|
30
|
+
return (clamped - min()) / (max() - min()) * 100;
|
|
31
|
+
});
|
|
32
|
+
const valueText = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
|
|
33
|
+
if (isIndeterminate()) return "";
|
|
34
|
+
if (local.formatValue && void 0 !== local.value) return local.formatValue(local.value);
|
|
35
|
+
return `${Math.round(percentage())}%`;
|
|
36
|
+
});
|
|
37
|
+
const shouldShowValue = ()=>Boolean(local.showValue);
|
|
38
|
+
const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.size[local.size ?? "md"], __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.color[local.color ?? "accent"], isIndeterminate() && __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.state.indeterminate, local.isDisabled && __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.state.disabled, local.class, local.className));
|
|
39
|
+
return (()=>{
|
|
40
|
+
var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
|
|
41
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
|
|
42
|
+
role: "progressbar",
|
|
43
|
+
get ["class"] () {
|
|
44
|
+
return classes();
|
|
45
|
+
},
|
|
46
|
+
get ["data-theme"] () {
|
|
47
|
+
return local.dataTheme;
|
|
48
|
+
},
|
|
49
|
+
get style () {
|
|
50
|
+
return local.style;
|
|
51
|
+
},
|
|
52
|
+
get ["aria-valuenow"] () {
|
|
53
|
+
return isIndeterminate() ? void 0 : local.value;
|
|
54
|
+
},
|
|
55
|
+
get ["aria-valuemin"] () {
|
|
56
|
+
return min();
|
|
57
|
+
},
|
|
58
|
+
get ["aria-valuemax"] () {
|
|
59
|
+
return max();
|
|
60
|
+
},
|
|
61
|
+
get ["aria-valuetext"] () {
|
|
62
|
+
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!isIndeterminate())() ? void 0 : valueText();
|
|
63
|
+
},
|
|
64
|
+
get ["aria-label"] () {
|
|
65
|
+
return local.label;
|
|
66
|
+
},
|
|
67
|
+
get ["aria-disabled"] () {
|
|
68
|
+
return local.isDisabled ? "true" : void 0;
|
|
69
|
+
},
|
|
70
|
+
get ["data-disabled"] () {
|
|
71
|
+
return local.isDisabled ? "true" : void 0;
|
|
72
|
+
}
|
|
73
|
+
}), false, true);
|
|
74
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
|
|
75
|
+
var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.label);
|
|
76
|
+
return ()=>_c$() && (()=>{
|
|
77
|
+
var _el$4 = _tmpl$2();
|
|
78
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.label);
|
|
79
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.label));
|
|
80
|
+
return _el$4;
|
|
81
|
+
})();
|
|
82
|
+
})(), _el$2);
|
|
83
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
|
|
84
|
+
var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!shouldShowValue());
|
|
85
|
+
return ()=>_c$2() && (()=>{
|
|
86
|
+
var _el$5 = _tmpl$2();
|
|
87
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, valueText);
|
|
88
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.output));
|
|
89
|
+
return _el$5;
|
|
90
|
+
})();
|
|
91
|
+
})(), _el$2);
|
|
92
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
93
|
+
var _v$ = __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.track, _v$2 = __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.indicator, _v$3 = isIndeterminate() ? void 0 : {
|
|
94
|
+
width: `${percentage()}%`
|
|
95
|
+
};
|
|
96
|
+
_v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
|
|
97
|
+
_v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.t = _v$2);
|
|
98
|
+
_p$.a = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$3, _v$3, _p$.a);
|
|
99
|
+
return _p$;
|
|
100
|
+
}, {
|
|
101
|
+
e: void 0,
|
|
102
|
+
t: void 0,
|
|
103
|
+
a: void 0
|
|
104
|
+
});
|
|
105
|
+
return _el$;
|
|
106
|
+
})();
|
|
107
|
+
};
|
|
108
|
+
const progress_bar_ProgressBar = ProgressBar;
|
|
109
|
+
export { progress_bar_ProgressBar as default };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export declare const CLASSES: {
|
|
2
|
+
readonly base: "progress-circle";
|
|
3
|
+
readonly svg: "progress-circle__track";
|
|
4
|
+
readonly trackCircle: "progress-circle__track-circle";
|
|
5
|
+
readonly indicator: "progress-circle__indicator";
|
|
6
|
+
readonly size: {
|
|
7
|
+
readonly sm: "progress-circle--sm";
|
|
8
|
+
readonly md: "progress-circle--md";
|
|
9
|
+
readonly lg: "progress-circle--lg";
|
|
10
|
+
};
|
|
11
|
+
readonly color: {
|
|
12
|
+
readonly default: "progress-circle--default";
|
|
13
|
+
readonly accent: "progress-circle--accent";
|
|
14
|
+
readonly success: "progress-circle--success";
|
|
15
|
+
readonly warning: "progress-circle--warning";
|
|
16
|
+
readonly danger: "progress-circle--danger";
|
|
17
|
+
};
|
|
18
|
+
readonly state: {
|
|
19
|
+
readonly indeterminate: "progress-circle--indeterminate";
|
|
20
|
+
readonly disabled: "progress-circle--disabled";
|
|
21
|
+
};
|
|
22
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
const CLASSES = {
|
|
2
|
+
base: "progress-circle",
|
|
3
|
+
svg: "progress-circle__track",
|
|
4
|
+
trackCircle: "progress-circle__track-circle",
|
|
5
|
+
indicator: "progress-circle__indicator",
|
|
6
|
+
size: {
|
|
7
|
+
sm: "progress-circle--sm",
|
|
8
|
+
md: "progress-circle--md",
|
|
9
|
+
lg: "progress-circle--lg"
|
|
10
|
+
},
|
|
11
|
+
color: {
|
|
12
|
+
default: "progress-circle--default",
|
|
13
|
+
accent: "progress-circle--accent",
|
|
14
|
+
success: "progress-circle--success",
|
|
15
|
+
warning: "progress-circle--warning",
|
|
16
|
+
danger: "progress-circle--danger"
|
|
17
|
+
},
|
|
18
|
+
state: {
|
|
19
|
+
indeterminate: "progress-circle--indeterminate",
|
|
20
|
+
disabled: "progress-circle--disabled"
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
export { CLASSES };
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.progress-circle {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
--progress-circle-stroke: var(--color-accent);
|
|
7
|
+
--progress-circle-track-stroke: var(--color-base-200);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.progress-circle__track {
|
|
11
|
+
width: 1.75rem;
|
|
12
|
+
height: 1.75rem;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.progress-circle__track-circle {
|
|
16
|
+
stroke: var(--progress-circle-track-stroke);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.progress-circle__indicator {
|
|
20
|
+
stroke: var(--progress-circle-stroke);
|
|
21
|
+
transition: stroke-dashoffset 300ms var(--ease-out);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.progress-circle--indeterminate .progress-circle__track {
|
|
25
|
+
animation: progress-circle-spin 1s linear infinite;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.progress-circle--disabled,
|
|
29
|
+
.progress-circle[aria-disabled="true"],
|
|
30
|
+
.progress-circle[data-disabled="true"] {
|
|
31
|
+
opacity: 0.6;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.progress-circle--sm .progress-circle__track {
|
|
35
|
+
width: 1.25rem;
|
|
36
|
+
height: 1.25rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.progress-circle--lg .progress-circle__track {
|
|
40
|
+
width: 2.25rem;
|
|
41
|
+
height: 2.25rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.progress-circle--default {
|
|
45
|
+
--progress-circle-stroke: var(--color-base-content);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.progress-circle--accent {
|
|
49
|
+
--progress-circle-stroke: var(--color-accent);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.progress-circle--success {
|
|
53
|
+
--progress-circle-stroke: var(--color-success);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.progress-circle--warning {
|
|
57
|
+
--progress-circle-stroke: var(--color-warning);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.progress-circle--danger {
|
|
61
|
+
--progress-circle-stroke: var(--color-danger);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@keyframes progress-circle-spin {
|
|
65
|
+
from {
|
|
66
|
+
transform: rotate(0deg);
|
|
67
|
+
}
|
|
68
|
+
to {
|
|
69
|
+
transform: rotate(360deg);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@media (prefers-reduced-motion: reduce) {
|
|
74
|
+
.progress-circle__indicator {
|
|
75
|
+
transition: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.progress-circle--indeterminate .progress-circle__track {
|
|
79
|
+
animation: none;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import "./ProgressCircle.css";
|
|
2
|
+
import { type JSX } from "solid-js";
|
|
3
|
+
import type { IComponentBaseProps } from "../types";
|
|
4
|
+
export type ProgressCircleSize = "sm" | "md" | "lg";
|
|
5
|
+
export type ProgressCircleColor = "default" | "accent" | "success" | "warning" | "danger";
|
|
6
|
+
export type ProgressCircleProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & {
|
|
7
|
+
value?: number;
|
|
8
|
+
minValue?: number;
|
|
9
|
+
maxValue?: number;
|
|
10
|
+
isIndeterminate?: boolean;
|
|
11
|
+
size?: ProgressCircleSize;
|
|
12
|
+
color?: ProgressCircleColor;
|
|
13
|
+
isDisabled?: boolean;
|
|
14
|
+
formatValue?: (value: number) => string;
|
|
15
|
+
label?: string;
|
|
16
|
+
};
|
|
17
|
+
declare const ProgressCircle: (props: ProgressCircleProps) => JSX.Element;
|
|
18
|
+
export default ProgressCircle;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
|
|
2
|
+
import "./ProgressCircle.css";
|
|
3
|
+
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
|
|
4
|
+
import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
|
|
5
|
+
import * as __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__ from "./ProgressCircle.classes.js";
|
|
6
|
+
var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span><svg fill=none viewBox="0 0 36 36"><circle cx=18 cy=18 r=16 stroke-width=4></circle><circle cx=18 cy=18 r=16 stroke-linecap=round stroke-width=4 transform="rotate(-90 18 18)">');
|
|
7
|
+
const STROKE_WIDTH = 4;
|
|
8
|
+
const CENTER = 18;
|
|
9
|
+
const RADIUS = CENTER - STROKE_WIDTH / 2;
|
|
10
|
+
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
|
|
11
|
+
const ProgressCircle = (props)=>{
|
|
12
|
+
const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
13
|
+
"value",
|
|
14
|
+
"minValue",
|
|
15
|
+
"maxValue",
|
|
16
|
+
"isIndeterminate",
|
|
17
|
+
"size",
|
|
18
|
+
"color",
|
|
19
|
+
"isDisabled",
|
|
20
|
+
"formatValue",
|
|
21
|
+
"label",
|
|
22
|
+
"class",
|
|
23
|
+
"className",
|
|
24
|
+
"dataTheme",
|
|
25
|
+
"style"
|
|
26
|
+
]);
|
|
27
|
+
const min = ()=>local.minValue ?? 0;
|
|
28
|
+
const max = ()=>local.maxValue ?? 100;
|
|
29
|
+
const isIndeterminate = ()=>Boolean(local.isIndeterminate) || void 0 === local.value;
|
|
30
|
+
const percentage = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
|
|
31
|
+
if (isIndeterminate()) return 0;
|
|
32
|
+
const clamped = Math.min(Math.max(local.value ?? 0, min()), max());
|
|
33
|
+
return (clamped - min()) / (max() - min()) * 100;
|
|
34
|
+
});
|
|
35
|
+
const valueText = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
|
|
36
|
+
if (isIndeterminate()) return "";
|
|
37
|
+
if (local.formatValue && void 0 !== local.value) return local.formatValue(local.value);
|
|
38
|
+
return `${Math.round(percentage())}%`;
|
|
39
|
+
});
|
|
40
|
+
const strokeDashoffset = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>CIRCUMFERENCE - percentage() / 100 * CIRCUMFERENCE);
|
|
41
|
+
const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.size[local.size ?? "md"], __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.color[local.color ?? "accent"], isIndeterminate() && __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.state.indeterminate, local.isDisabled && __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.state.disabled, local.class, local.className));
|
|
42
|
+
return (()=>{
|
|
43
|
+
var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
|
|
44
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
|
|
45
|
+
role: "progressbar",
|
|
46
|
+
get ["class"] () {
|
|
47
|
+
return classes();
|
|
48
|
+
},
|
|
49
|
+
get ["data-theme"] () {
|
|
50
|
+
return local.dataTheme;
|
|
51
|
+
},
|
|
52
|
+
get style () {
|
|
53
|
+
return local.style;
|
|
54
|
+
},
|
|
55
|
+
get ["aria-valuenow"] () {
|
|
56
|
+
return isIndeterminate() ? void 0 : local.value;
|
|
57
|
+
},
|
|
58
|
+
get ["aria-valuemin"] () {
|
|
59
|
+
return min();
|
|
60
|
+
},
|
|
61
|
+
get ["aria-valuemax"] () {
|
|
62
|
+
return max();
|
|
63
|
+
},
|
|
64
|
+
get ["aria-valuetext"] () {
|
|
65
|
+
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!isIndeterminate())() ? void 0 : valueText();
|
|
66
|
+
},
|
|
67
|
+
get ["aria-label"] () {
|
|
68
|
+
return local.label;
|
|
69
|
+
},
|
|
70
|
+
get ["aria-disabled"] () {
|
|
71
|
+
return local.isDisabled ? "true" : void 0;
|
|
72
|
+
},
|
|
73
|
+
get ["data-disabled"] () {
|
|
74
|
+
return local.isDisabled ? "true" : void 0;
|
|
75
|
+
}
|
|
76
|
+
}), false, true);
|
|
77
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "stroke-dasharray", `${CIRCUMFERENCE}`);
|
|
78
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
79
|
+
var _v$ = __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.svg, _v$2 = __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.trackCircle, _v$3 = __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.indicator, _v$4 = `${isIndeterminate() ? 0.75 * CIRCUMFERENCE : strokeDashoffset()}`;
|
|
80
|
+
_v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "class", _p$.e = _v$);
|
|
81
|
+
_v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "class", _p$.t = _v$2);
|
|
82
|
+
_v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "class", _p$.a = _v$3);
|
|
83
|
+
_v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "stroke-dashoffset", _p$.o = _v$4);
|
|
84
|
+
return _p$;
|
|
85
|
+
}, {
|
|
86
|
+
e: void 0,
|
|
87
|
+
t: void 0,
|
|
88
|
+
a: void 0,
|
|
89
|
+
o: void 0
|
|
90
|
+
});
|
|
91
|
+
return _el$;
|
|
92
|
+
})();
|
|
93
|
+
};
|
|
94
|
+
const progress_circle_ProgressCircle = ProgressCircle;
|
|
95
|
+
export { progress_circle_ProgressCircle as default };
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import "./
|
|
1
|
+
import "./Spinner.css";
|
|
2
2
|
import { type Component, type JSX } from "solid-js";
|
|
3
3
|
import type { IComponentBaseProps } from "../types";
|
|
4
4
|
export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
5
5
|
export type SpinnerColor = "current" | "accent" | "success" | "warning" | "danger";
|
|
6
6
|
export type SpinnerVariant = "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity";
|
|
7
|
-
export type
|
|
7
|
+
export type SpinnerProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
|
|
8
8
|
size?: SpinnerSize;
|
|
9
9
|
color?: SpinnerColor;
|
|
10
10
|
variant?: SpinnerVariant;
|
|
11
11
|
label?: string;
|
|
12
12
|
};
|
|
13
|
-
declare const
|
|
14
|
-
export default
|
|
13
|
+
declare const Spinner: Component<SpinnerProps>;
|
|
14
|
+
export default Spinner;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
|
|
2
|
-
import "./
|
|
2
|
+
import "./Spinner.css";
|
|
3
3
|
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
|
|
4
4
|
import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
|
|
5
5
|
var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=spinner-icon fill=none viewBox="0 0 24 24"><defs><linearGradient x1=50% x2=50% y1=5.271% y2=91.793%><stop offset=0% stop-color=currentColor></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient><linearGradient x1=50% x2=50% y1=15.24% y2=87.15%><stop offset=0% stop-color=currentColor stop-opacity=0></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient></defs><g fill=none><path d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"transform="translate(1.5 1.625)"></path><path d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"transform="translate(1.5 1.625)">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
|
|
@@ -36,7 +36,7 @@ const SpinnerSVG = ()=>{
|
|
|
36
36
|
return _el$;
|
|
37
37
|
})();
|
|
38
38
|
};
|
|
39
|
-
const
|
|
39
|
+
const Spinner = (props)=>{
|
|
40
40
|
const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
41
41
|
"size",
|
|
42
42
|
"color",
|
|
@@ -77,5 +77,5 @@ const Loading_Loading = (props)=>{
|
|
|
77
77
|
return _el$8;
|
|
78
78
|
})();
|
|
79
79
|
};
|
|
80
|
-
const
|
|
81
|
-
export {
|
|
80
|
+
const spinner_Spinner = Spinner;
|
|
81
|
+
export { spinner_Spinner as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default, default as Spinner, default as Loading, type SpinnerProps, type SpinnerSize, type SpinnerColor, type SpinnerVariant, } from "./Spinner";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__ from "./Spinner.js";
|
|
2
|
+
var __webpack_exports__Loading = __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__["default"];
|
|
3
|
+
var __webpack_exports__Spinner = __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__["default"];
|
|
4
|
+
var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__["default"];
|
|
5
|
+
export { __webpack_exports__Loading as Loading, __webpack_exports__Spinner as Spinner, __webpack_exports__default as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -89,7 +89,9 @@ export { default as ListBox, ListBoxRoot, ListBoxItem, ListBoxItemRoot, ListBoxI
|
|
|
89
89
|
export type { ListBoxProps, ListBoxRootProps, ListBoxSelectionMode, ListBoxVariant, ListBoxItemProps, ListBoxItemRootProps, ListBoxItemIndicatorProps, ListBoxItemRenderProps, ListBoxSectionProps, ListBoxSectionRootProps, } from "./components/list-box";
|
|
90
90
|
export { LiveChatBubble, LiveChatPanel } from "./components/live-chat";
|
|
91
91
|
export type { LiveChatBubbleProps, LiveChatPanelProps, ChatMessage, SendMessagePayload, SendMessageResponse, } from "./components/live-chat";
|
|
92
|
-
export { default as
|
|
92
|
+
export { default as Spinner } from "./components/spinner";
|
|
93
|
+
export { Spinner as Loading } from "./components/spinner";
|
|
94
|
+
export type { SpinnerProps, SpinnerSize, SpinnerColor, SpinnerVariant } from "./components/spinner";
|
|
93
95
|
export { LanguageSwitcher, createI18n, I18nProvider, I18nContext, useI18n, } from "./components/language-switcher";
|
|
94
96
|
export type { LanguageSwitcherProps, I18nStore, I18nOptions, I18nContextValue, I18nProviderProps, Language, } from "./components/language-switcher";
|
|
95
97
|
export { default as Menu, MenuRoot, MenuItem, MenuItemRoot, MenuItemIndicator, MenuItemSubmenuIndicator, MenuSection, MenuSectionRoot, } from "./components/menu";
|
|
@@ -106,9 +108,10 @@ export { default as NoiseBackground } from "./components/noise-background";
|
|
|
106
108
|
export type { NoiseBackgroundProps } from "./components/noise-background";
|
|
107
109
|
export { default as Pagination } from "./components/pagination";
|
|
108
110
|
export type { PaginationProps } from "./components/pagination";
|
|
109
|
-
export { default as
|
|
110
|
-
export type {
|
|
111
|
-
export { default as
|
|
111
|
+
export { default as ProgressBar } from "./components/progress-bar";
|
|
112
|
+
export type { ProgressBarProps, ProgressBarSize, ProgressBarColor, } from "./components/progress-bar";
|
|
113
|
+
export { default as ProgressCircle } from "./components/progress-circle";
|
|
114
|
+
export type { ProgressCircleProps, ProgressCircleSize, ProgressCircleColor, } from "./components/progress-circle";
|
|
112
115
|
export { default as Radio } from "./components/radio";
|
|
113
116
|
export { RadioGroup, type RadioGroupProps, type RadioGroupOrientation, type RadioGroupVariant, } from "./components/radio-group";
|
|
114
117
|
export { default as Select } from "./components/select";
|