wimui 0.63.0 → 0.63.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.
- package/dist/components/_internal/OverlayBase.cjs +1 -1
- package/dist/components/_internal/OverlayBase.js +31 -30
- package/dist/components/_internal/composeEventHandlers.cjs +2 -0
- package/dist/components/_internal/composeEventHandlers.d.ts +25 -0
- package/dist/components/_internal/composeEventHandlers.js +8 -0
- package/dist/components/_internal/observeMove.cjs +1 -1
- package/dist/components/_internal/observeMove.js +3 -1
- package/dist/components/ai/ChatUI/ChatUI.cjs +1 -1
- package/dist/components/ai/ChatUI/ChatUI.js +83 -82
- package/dist/components/data-display/Accordion/Accordion.cjs +1 -1
- package/dist/components/data-display/Accordion/Accordion.js +79 -78
- package/dist/components/data-display/PullToRefresh/PullToRefresh.cjs +1 -1
- package/dist/components/data-display/PullToRefresh/PullToRefresh.js +73 -72
- package/dist/components/data-display/SortableList/SortableList.cjs +1 -1
- package/dist/components/data-display/SortableList/SortableList.js +54 -53
- package/dist/components/data-display/SwipeAction/SwipeAction.cjs +1 -1
- package/dist/components/data-display/SwipeAction/SwipeAction.js +77 -76
- package/dist/components/form/Cascader/Cascader.cjs +1 -1
- package/dist/components/form/Cascader/Cascader.js +99 -98
- package/dist/components/form/DatePicker/DatePicker.cjs +1 -1
- package/dist/components/form/DatePicker/DatePicker.js +53 -52
- package/dist/components/form/RangeSlider/RangeSlider.cjs +1 -1
- package/dist/components/form/RangeSlider/RangeSlider.js +109 -108
- package/dist/components/form/Rating/Rating.cjs +1 -1
- package/dist/components/form/Rating/Rating.js +75 -74
- package/dist/components/form/Slider/Slider.cjs +1 -1
- package/dist/components/form/Slider/Slider.js +58 -57
- package/dist/components/form/SmartSearchInput/SmartSearchInput.cjs +1 -1
- package/dist/components/form/SmartSearchInput/SmartSearchInput.js +65 -64
- package/dist/components/form/TimePicker/TimePicker.cjs +1 -1
- package/dist/components/form/TimePicker/TimePicker.js +31 -30
- package/dist/components/layout/AppShell/AppShell.cjs +1 -1
- package/dist/components/layout/AppShell/AppShell.js +4 -1
- package/dist/components/layout/InteractiveArea/InteractiveArea.cjs +1 -1
- package/dist/components/layout/InteractiveArea/InteractiveArea.js +1 -1
- package/dist/components/layout/Navbar/Navbar.cjs +1 -1
- package/dist/components/layout/Navbar/Navbar.js +68 -67
- package/dist/components/layout/Sidebar/Sidebar.cjs +1 -1
- package/dist/components/layout/Sidebar/Sidebar.js +4 -1
- package/dist/components/layout/Splitter/Splitter.cjs +1 -1
- package/dist/components/layout/Splitter/Splitter.js +47 -46
- package/dist/components/layout/Transition/Transition.cjs +1 -1
- package/dist/components/layout/Transition/Transition.js +25 -24
- package/dist/components/media/Audio/Audio.cjs +1 -1
- package/dist/components/media/Audio/Audio.js +39 -38
- package/dist/components/media/Image/Image.cjs +2 -2
- package/dist/components/media/Image/Image.js +96 -95
- package/dist/components/media/ImageCompare/ImageCompare.cjs +1 -1
- package/dist/components/media/ImageCompare/ImageCompare.js +75 -74
- package/dist/components/media/Video/Video.cjs +1 -1
- package/dist/components/media/Video/Video.js +114 -113
- package/dist/components/navigation/Anchor/Anchor.cjs +1 -1
- package/dist/components/navigation/Anchor/Anchor.js +77 -72
- package/dist/components/navigation/SpeedDial/SpeedDial.cjs +1 -1
- package/dist/components/navigation/SpeedDial/SpeedDial.js +47 -46
- package/dist/components/navigation/Tabs/Tabs.cjs +1 -1
- package/dist/components/navigation/Tabs/Tabs.js +87 -86
- package/dist/components/overlay/Popover/Popover.cjs +1 -1
- package/dist/components/overlay/Popover/Popover.js +1 -1
- package/dist/llms-full.txt +1 -1
- package/dist/llms.txt +1 -1
- package/dist/wimui.umd.js +5 -5
- package/package.json +4 -1
|
@@ -2,46 +2,47 @@
|
|
|
2
2
|
import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
|
|
3
3
|
import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
|
|
4
4
|
import { useMergedRef as r } from "../../../hooks/useMergedRef.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
5
|
+
import { composeEventHandlers as i } from "../../_internal/composeEventHandlers.js";
|
|
6
|
+
import { Transition as a } from "../../layout/Transition/Transition.js";
|
|
7
|
+
import { FocusTrap as o } from "../../overlay/FocusTrap/FocusTrap.js";
|
|
8
|
+
import { componentsNs as s } from "../../../i18n/generated/components.js";
|
|
8
9
|
import { InputBase as ee } from "../InputBase/InputBase.js";
|
|
9
|
-
import { useInlineFloating as
|
|
10
|
-
import { FieldTemplate as
|
|
11
|
-
import
|
|
12
|
-
import { Calendar as
|
|
13
|
-
import
|
|
14
|
-
import { forwardRef as
|
|
15
|
-
import
|
|
16
|
-
import { jsx as
|
|
10
|
+
import { useInlineFloating as c } from "../../_internal/useInlineFloating.js";
|
|
11
|
+
import { FieldTemplate as l } from "../FieldTemplate/FieldTemplate.js";
|
|
12
|
+
import u from "../Input/input.module.js";
|
|
13
|
+
import { Calendar as d } from "../../data-display/Calendar/Calendar.js";
|
|
14
|
+
import f from "./date-picker.module.js";
|
|
15
|
+
import { forwardRef as p, useEffect as m, useId as te, useRef as h, useState as g } from "react";
|
|
16
|
+
import _ from "classnames";
|
|
17
|
+
import { jsx as v, jsxs as y } from "react/jsx-runtime";
|
|
17
18
|
//#region src/components/form/DatePicker/DatePicker.tsx
|
|
18
|
-
var
|
|
19
|
-
let [L, R] =
|
|
20
|
-
|
|
19
|
+
var b = p(({ intent: p = "default", variant: b = "outline", fullWidth: x = !1, className: S, disabled: C, value: w, defaultValue: ne, onChange: T, format: re = "YYYY-MM-DD", clearable: ie = !0, placeholder: ae, minDate: oe, maxDate: se, disabledDates: ce, label: E, error: D, required: O, layout: k, id: A, labels: j, width: M, asChild: N = !1, children: P, ...F }, I) => {
|
|
20
|
+
let [L, R] = g(!1), [z, B] = g(ne || null), V = h(null), H = h(null), { t: le } = n(s), U = te(), W = A || `wim-datepicker-${U}`, G = `${W}-dropdown`, K = E ? `${W}-label` : void 0, q = D ? `${W}-error` : void 0, J = w !== void 0, Y = J ? w : z, ue = ae ?? j?.placeholder, X = C, Z = D ? "danger" : p;
|
|
21
|
+
m(() => {
|
|
21
22
|
let e = (e) => {
|
|
22
23
|
V.current && !V.current.contains(e.target) && R(!1);
|
|
23
24
|
};
|
|
24
25
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
25
|
-
}, []),
|
|
26
|
+
}, []), m(() => {
|
|
26
27
|
let e = (e) => {
|
|
27
28
|
e.key === "Escape" && L && (R(!1), H.current?.focus());
|
|
28
29
|
};
|
|
29
30
|
return L && document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
|
|
30
31
|
}, [L]);
|
|
31
|
-
let
|
|
32
|
+
let de = (e) => {
|
|
32
33
|
if (!e) return "";
|
|
33
34
|
let t = e.getFullYear(), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
|
|
34
|
-
return
|
|
35
|
-
}, de = (e) => {
|
|
36
|
-
J || B(e), T?.(e), R(!1), H.current?.focus();
|
|
35
|
+
return re.replace("YYYY", String(t)).replace("MM", n).replace("DD", r);
|
|
37
36
|
}, fe = (e) => {
|
|
37
|
+
J || B(e), T?.(e), R(!1), H.current?.focus();
|
|
38
|
+
}, pe = (e) => {
|
|
38
39
|
e?.stopPropagation(), X || (J || B(null), T?.(null));
|
|
39
40
|
}, Q = () => {
|
|
40
41
|
X || R(!L);
|
|
41
|
-
},
|
|
42
|
+
}, $ = (e) => {
|
|
42
43
|
X || (e.key === "Escape" ? (R(!1), H.current?.focus()) : (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" && (e.altKey || !L)) && (e.preventDefault(), R(!L)));
|
|
43
44
|
};
|
|
44
|
-
|
|
45
|
+
m(() => {
|
|
45
46
|
if (L) {
|
|
46
47
|
let e = setTimeout(() => {
|
|
47
48
|
let e = V.current?.querySelector("[data-calendar-day][tabindex=\"0\"]:not(:disabled), [data-calendar-day][data-selected]:not(:disabled), [data-calendar-day]:focus");
|
|
@@ -50,8 +51,8 @@ var y = f(({ intent: f = "default", variant: y = "outline", fullWidth: b = !1, c
|
|
|
50
51
|
return () => clearTimeout(e);
|
|
51
52
|
}
|
|
52
53
|
}, [L]);
|
|
53
|
-
let
|
|
54
|
-
return /* @__PURE__ */
|
|
54
|
+
let me = N ? e : "div", { setReference: he, setFloating: ge, floatingProps: _e } = c({ open: L && !C }), ve = r(V, I, he);
|
|
55
|
+
return /* @__PURE__ */ v(l, {
|
|
55
56
|
label: E,
|
|
56
57
|
error: D,
|
|
57
58
|
required: O,
|
|
@@ -59,38 +60,36 @@ var y = f(({ intent: f = "default", variant: y = "outline", fullWidth: b = !1, c
|
|
|
59
60
|
labelId: K,
|
|
60
61
|
htmlFor: W,
|
|
61
62
|
errorId: q,
|
|
62
|
-
className:
|
|
63
|
-
children: /* @__PURE__ */
|
|
64
|
-
ref:
|
|
65
|
-
className:
|
|
63
|
+
className: S,
|
|
64
|
+
children: /* @__PURE__ */ y(me, {
|
|
65
|
+
ref: ve,
|
|
66
|
+
className: _("wim-date-picker", f.root, x && f.fullWidth),
|
|
66
67
|
children: [
|
|
67
|
-
/* @__PURE__ */
|
|
68
|
+
/* @__PURE__ */ v(ee, {
|
|
68
69
|
intent: Z,
|
|
69
|
-
variant:
|
|
70
|
+
variant: b,
|
|
70
71
|
width: M,
|
|
71
|
-
fullWidth:
|
|
72
|
+
fullWidth: x,
|
|
72
73
|
disabled: X,
|
|
73
|
-
allowClear:
|
|
74
|
+
allowClear: ie,
|
|
74
75
|
hasValue: !!Y,
|
|
75
|
-
onClear:
|
|
76
|
+
onClear: pe,
|
|
76
77
|
rightIcons: [{
|
|
77
78
|
name: "ChevronDownIcon",
|
|
78
79
|
rotated: L,
|
|
79
80
|
onClick: Q,
|
|
80
81
|
decorative: !0
|
|
81
82
|
}],
|
|
82
|
-
children: /* @__PURE__ */
|
|
83
|
+
children: /* @__PURE__ */ v("input", {
|
|
83
84
|
id: W,
|
|
84
85
|
ref: H,
|
|
85
86
|
type: "text",
|
|
86
87
|
readOnly: !0,
|
|
87
88
|
role: "combobox",
|
|
88
|
-
className:
|
|
89
|
-
value:
|
|
90
|
-
placeholder:
|
|
89
|
+
className: _(u.root, f.input),
|
|
90
|
+
value: de(Y),
|
|
91
|
+
placeholder: ue,
|
|
91
92
|
disabled: X,
|
|
92
|
-
onClick: Q,
|
|
93
|
-
onKeyDown: pe,
|
|
94
93
|
"aria-haspopup": "dialog",
|
|
95
94
|
"aria-expanded": L,
|
|
96
95
|
"aria-controls": L ? G : void 0,
|
|
@@ -98,36 +97,38 @@ var y = f(({ intent: f = "default", variant: y = "outline", fullWidth: b = !1, c
|
|
|
98
97
|
"aria-describedby": q,
|
|
99
98
|
"aria-labelledby": K,
|
|
100
99
|
"aria-required": O,
|
|
101
|
-
...F
|
|
100
|
+
...F,
|
|
101
|
+
onClick: i(F.onClick, Q),
|
|
102
|
+
onKeyDown: i(F.onKeyDown, $)
|
|
102
103
|
})
|
|
103
104
|
}),
|
|
104
|
-
/* @__PURE__ */
|
|
105
|
-
show: L && !
|
|
105
|
+
/* @__PURE__ */ v(a, {
|
|
106
|
+
show: L && !C,
|
|
106
107
|
preset: "fade",
|
|
107
108
|
id: G,
|
|
108
|
-
className:
|
|
109
|
-
ref:
|
|
110
|
-
...
|
|
111
|
-
children: /* @__PURE__ */
|
|
109
|
+
className: f.dropdown,
|
|
110
|
+
ref: ge,
|
|
111
|
+
..._e,
|
|
112
|
+
children: /* @__PURE__ */ v(o, {
|
|
112
113
|
active: L,
|
|
113
114
|
initialFocus: !1,
|
|
114
|
-
children: /* @__PURE__ */
|
|
115
|
+
children: /* @__PURE__ */ v("div", {
|
|
115
116
|
role: "dialog",
|
|
116
117
|
"aria-modal": "true",
|
|
117
118
|
"aria-labelledby": K,
|
|
118
|
-
"aria-label": K ? void 0 : F["aria-label"] ??
|
|
119
|
-
children: /* @__PURE__ */
|
|
119
|
+
"aria-label": K ? void 0 : F["aria-label"] ?? le("datepicker.dialog"),
|
|
120
|
+
children: /* @__PURE__ */ v(d, {
|
|
120
121
|
value: Y ?? void 0,
|
|
121
|
-
onChange:
|
|
122
|
+
onChange: fe
|
|
122
123
|
})
|
|
123
124
|
})
|
|
124
125
|
})
|
|
125
126
|
}),
|
|
126
|
-
/* @__PURE__ */
|
|
127
|
+
/* @__PURE__ */ v(t, { children: P })
|
|
127
128
|
]
|
|
128
129
|
})
|
|
129
130
|
});
|
|
130
131
|
});
|
|
131
|
-
|
|
132
|
+
b.displayName = "DatePicker";
|
|
132
133
|
//#endregion
|
|
133
|
-
export {
|
|
134
|
+
export { b as DatePicker, b as default };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../../i18n/generated/common.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../../i18n/generated/common.cjs"),i=require("../../_internal/composeEventHandlers.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("../../../utilities/slider-utils.cjs"),s=require("./range-slider.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=({value:e,defaultValue:d=[20,80],min:f=0,max:p=100,step:m=1,allowCross:h=!1,disabled:g=!1,onChange:_,onAfterChange:v,className:ee,name:y,label:b,error:x,required:te,layout:ne=`vertical`,id:re,"aria-label":ie,"aria-labelledby":ae,"aria-describedby":oe,asChild:se=!1,children:ce,...S})=>{let{t:C}=n.useWimTranslation(r.commonNs),w=e!==void 0,le=(0,c.useId)(),T=re||le,ue=`wim-range-slider-label-${T}`,E=`wim-range-slider-error-${T}`,D=[oe,x?E:void 0].filter(Boolean).join(` `)||void 0,O=b||ie,k=`wim-range-slider-start-${T}`,A=`wim-range-slider-end-${T}`,j=e=>!O&&ae?`${ae} ${e}`:void 0,{clamp:M,calculateValue:N}=o.useSliderCommon(f,p,m),P=[M(d[0],f,p),M(d[1],f,p)];P[0]>P[1]&&P.sort((e,t)=>e-t);let[de,F]=(0,c.useState)(P),I=w?e:de,L=(0,c.useRef)(null),R=(0,c.useRef)(null),z=(0,c.useRef)(null),B=(0,c.useRef)(null),V=(0,c.useRef)(null),H=(0,c.useRef)(null),[U,W]=(0,c.useState)(null),G=(0,c.useRef)(null),K=(0,c.useRef)([...I]),q=(0,c.useCallback)(e=>(e-f)/(p-f)*100,[f,p]),J=(0,c.useCallback)(e=>{let t=q(e[0]),n=q(e[1]);R.current&&(R.current.style.left=`${t}%`,R.current.setAttribute(`aria-valuenow`,String(e[0])),R.current.setAttribute(`aria-valuemax`,String(e[1]))),z.current&&(z.current.style.left=`${n}%`,z.current.setAttribute(`aria-valuenow`,String(e[1])),z.current.setAttribute(`aria-valuemin`,String(e[0]))),B.current&&(B.current.style.left=`${t}%`,B.current.style.width=`${n-t}%`),V.current&&(V.current.value=String(e[0])),H.current&&(H.current.value=String(e[1]))},[q]);(0,c.useEffect)(()=>{U||J(I)},[I,U,J]);let Y=(e,t)=>{g||(K.current=[...I],G.current=t,W(t),e.stopPropagation(),e.preventDefault())},X=e=>{if(g)return;let t=`touches`in e?e.touches[0].clientX:e.clientX,n=N(t,L.current),r=Math.abs(I[0]-n),i=Math.abs(I[1]-n),a;a=r<i?`min`:i<r?`max`:n<I[0]?`min`:`max`,G.current=a,W(a);let o=[...K.current];a===`min`?o[0]=Math.min(n,h?p:o[1]):o[1]=Math.max(n,h?f:o[0]),K.current=o,J(o),_?.(o)},Z=(0,c.useCallback)(e=>{if(!G.current||g)return;let t=`touches`in e?e.touches[0].clientX:e.clientX,n=N(t,L.current),r=[...K.current];G.current===`min`?r[0]=Math.min(n,h?p:r[1]):r[1]=Math.max(n,h?f:r[0]),K.current=r,J(r),_?.(r)},[g,_,h,N,f,p,J]),Q=(0,c.useCallback)(()=>{if(G.current){G.current=null,W(null);let e=K.current;w||F([...e]),v?.(e)}},[w,v]);(0,c.useEffect)(()=>(document.addEventListener(`mousemove`,Z),document.addEventListener(`mouseup`,Q),document.addEventListener(`touchmove`,Z,{passive:!1}),document.addEventListener(`touchend`,Q),()=>{document.removeEventListener(`mousemove`,Z),document.removeEventListener(`mouseup`,Q),document.removeEventListener(`touchmove`,Z),document.removeEventListener(`touchend`,Q)}),[Z,Q]);let fe=(e,t)=>{if(g)return;let n=[...I],r=t===`min`?n[0]:n[1],i;if(e.key===`ArrowLeft`||e.key===`ArrowDown`)i=Math.max(f,r-m);else if(e.key===`ArrowRight`||e.key===`ArrowUp`)i=Math.min(p,r+m);else if(e.key===`Home`)i=f;else if(e.key===`End`)i=p;else return;if(t===`min`){let e=h?p:n[1];n[0]=Math.min(i,e)}else{let e=h?f:n[0];n[1]=Math.max(i,e)}w||F(n),_?.(n),e.preventDefault()},$=q(I[0]),pe=q(I[1]);return(0,u.jsx)(a.FieldTemplate,{label:b,error:x,required:te,layout:ne,labelId:ue,errorId:E,className:ee,children:(0,u.jsxs)(se?t.Root:`div`,{role:`presentation`,"data-testid":`range-slider-root`,className:(0,l.default)(`wim-range-slider`,s.default.root,g&&s.default.disabled,x&&s.default.danger),...S,onMouseDown:e=>i.composeEventHandlers(S.onMouseDown,X)(e),onTouchStart:e=>i.composeEventHandlers(S.onTouchStart,X)(e),children:[(0,u.jsxs)(`div`,{className:s.default.trackContainer,ref:L,children:[(0,u.jsx)(`div`,{ref:B,className:s.default.track,style:{left:`${$}%`,width:`${pe-$}%`}}),(0,u.jsx)(`div`,{ref:R,className:(0,l.default)(s.default.thumb,U===`min`&&s.default.active),style:{left:`${$}%`},role:`slider`,"aria-valuemin":f,"aria-valuemax":I[1],"aria-valuenow":I[0],"aria-disabled":g,id:k,"aria-labelledby":j(k),"aria-label":O?C(`rangeSlider.start_of`,{label:O}):C(`rangeSlider.start`),"aria-describedby":D,"aria-invalid":x?!0:void 0,tabIndex:g?-1:0,onMouseDown:e=>Y(e,`min`),onTouchStart:e=>Y(e,`min`),onKeyDown:e=>fe(e,`min`)}),(0,u.jsx)(`div`,{ref:z,className:(0,l.default)(s.default.thumb,U===`max`&&s.default.active),style:{left:`${pe}%`},role:`slider`,"aria-valuemin":I[0],"aria-valuemax":p,"aria-valuenow":I[1],"aria-disabled":g,id:A,"aria-labelledby":j(A),"aria-label":O?C(`rangeSlider.end_of`,{label:O}):C(`rangeSlider.end`),"aria-describedby":D,"aria-invalid":x?!0:void 0,tabIndex:g?-1:0,onMouseDown:e=>Y(e,`max`),onTouchStart:e=>Y(e,`max`),onKeyDown:e=>fe(e,`max`)})]}),(0,u.jsx)(`input`,{ref:V,type:`hidden`,name:y?`${y}-min`:``,value:I[0]}),(0,u.jsx)(`input`,{ref:H,type:`hidden`,name:y?`${y}-max`:``,value:I[1]}),(0,u.jsx)(t.Slottable,{children:ce})]})})};d.displayName=`RangeSlider`,exports.RangeSlider=d;
|
|
@@ -2,159 +2,160 @@
|
|
|
2
2
|
import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
|
|
3
3
|
import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
|
|
4
4
|
import { commonNs as r } from "../../../i18n/generated/common.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import o from "
|
|
8
|
-
import
|
|
9
|
-
import u from "
|
|
10
|
-
import
|
|
5
|
+
import { composeEventHandlers as i } from "../../_internal/composeEventHandlers.js";
|
|
6
|
+
import { FieldTemplate as a } from "../FieldTemplate/FieldTemplate.js";
|
|
7
|
+
import { useSliderCommon as o } from "../../../utilities/slider-utils.js";
|
|
8
|
+
import s from "./range-slider.module.js";
|
|
9
|
+
import { useCallback as c, useEffect as l, useId as ee, useRef as u, useState as d } from "react";
|
|
10
|
+
import f from "classnames";
|
|
11
|
+
import { jsx as p, jsxs as te } from "react/jsx-runtime";
|
|
11
12
|
//#region src/components/form/RangeSlider/RangeSlider.tsx
|
|
12
|
-
var
|
|
13
|
-
let { t:
|
|
14
|
-
|
|
15
|
-
let [ge,
|
|
16
|
-
let t =
|
|
17
|
-
|
|
18
|
-
}, [
|
|
19
|
-
|
|
20
|
-
|
|
13
|
+
var m = ({ value: m, defaultValue: ne = [20, 80], min: h = 0, max: g = 100, step: _ = 1, allowCross: v = !1, disabled: y = !1, onChange: b, onAfterChange: re, className: ie, name: x, label: S, error: C, required: ae, layout: oe = "vertical", id: se, "aria-label": ce, "aria-labelledby": w, "aria-describedby": le, asChild: ue = !1, children: de, ...T }) => {
|
|
14
|
+
let { t: E } = n(r), D = m !== void 0, fe = ee(), O = se || fe, pe = `wim-range-slider-label-${O}`, me = `wim-range-slider-error-${O}`, he = [le, C ? me : void 0].filter(Boolean).join(" ") || void 0, k = S || ce, A = `wim-range-slider-start-${O}`, j = `wim-range-slider-end-${O}`, M = (e) => !k && w ? `${w} ${e}` : void 0, { clamp: N, calculateValue: P } = o(h, g, _), F = [N(ne[0], h, g), N(ne[1], h, g)];
|
|
15
|
+
F[0] > F[1] && F.sort((e, t) => e - t);
|
|
16
|
+
let [ge, I] = d(F), L = D ? m : ge, R = u(null), z = u(null), B = u(null), V = u(null), H = u(null), U = u(null), [W, G] = d(null), K = u(null), q = u([...L]), J = c((e) => (e - h) / (g - h) * 100, [h, g]), Y = c((e) => {
|
|
17
|
+
let t = J(e[0]), n = J(e[1]);
|
|
18
|
+
z.current && (z.current.style.left = `${t}%`, z.current.setAttribute("aria-valuenow", String(e[0])), z.current.setAttribute("aria-valuemax", String(e[1]))), B.current && (B.current.style.left = `${n}%`, B.current.setAttribute("aria-valuenow", String(e[1])), B.current.setAttribute("aria-valuemin", String(e[0]))), V.current && (V.current.style.left = `${t}%`, V.current.style.width = `${n - t}%`), H.current && (H.current.value = String(e[0])), U.current && (U.current.value = String(e[1]));
|
|
19
|
+
}, [J]);
|
|
20
|
+
l(() => {
|
|
21
|
+
W || Y(L);
|
|
21
22
|
}, [
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
L,
|
|
24
|
+
W,
|
|
25
|
+
Y
|
|
25
26
|
]);
|
|
26
|
-
let
|
|
27
|
-
|
|
27
|
+
let X = (e, t) => {
|
|
28
|
+
y || (q.current = [...L], K.current = t, G(t), e.stopPropagation(), e.preventDefault());
|
|
28
29
|
}, _e = (e) => {
|
|
29
|
-
if (
|
|
30
|
-
let t = "touches" in e ? e.touches[0].clientX : e.clientX, n =
|
|
31
|
-
a = r < i ? "min" : i < r ? "max" : n <
|
|
32
|
-
let o = [...
|
|
33
|
-
a === "min" ? o[0] = Math.min(n,
|
|
34
|
-
},
|
|
35
|
-
if (!
|
|
36
|
-
let t = "touches" in e ? e.touches[0].clientX : e.clientX, n =
|
|
37
|
-
|
|
30
|
+
if (y) return;
|
|
31
|
+
let t = "touches" in e ? e.touches[0].clientX : e.clientX, n = P(t, R.current), r = Math.abs(L[0] - n), i = Math.abs(L[1] - n), a;
|
|
32
|
+
a = r < i ? "min" : i < r ? "max" : n < L[0] ? "min" : "max", K.current = a, G(a);
|
|
33
|
+
let o = [...q.current];
|
|
34
|
+
a === "min" ? o[0] = Math.min(n, v ? g : o[1]) : o[1] = Math.max(n, v ? h : o[0]), q.current = o, Y(o), b?.(o);
|
|
35
|
+
}, Z = c((e) => {
|
|
36
|
+
if (!K.current || y) return;
|
|
37
|
+
let t = "touches" in e ? e.touches[0].clientX : e.clientX, n = P(t, R.current), r = [...q.current];
|
|
38
|
+
K.current === "min" ? r[0] = Math.min(n, v ? g : r[1]) : r[1] = Math.max(n, v ? h : r[0]), q.current = r, Y(r), b?.(r);
|
|
38
39
|
}, [
|
|
39
|
-
v,
|
|
40
40
|
y,
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
b,
|
|
42
|
+
v,
|
|
43
|
+
P,
|
|
44
44
|
h,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
45
|
+
g,
|
|
46
|
+
Y
|
|
47
|
+
]), Q = c(() => {
|
|
48
|
+
if (K.current) {
|
|
49
|
+
K.current = null, G(null);
|
|
50
|
+
let e = q.current;
|
|
51
|
+
D || I([...e]), re?.(e);
|
|
51
52
|
}
|
|
52
|
-
}, [
|
|
53
|
-
|
|
54
|
-
document.removeEventListener("mousemove",
|
|
55
|
-
}), [
|
|
56
|
-
let
|
|
57
|
-
if (
|
|
58
|
-
let n = [...
|
|
59
|
-
if (e.key === "ArrowLeft" || e.key === "ArrowDown") i = Math.max(
|
|
60
|
-
else if (e.key === "ArrowRight" || e.key === "ArrowUp") i = Math.min(
|
|
61
|
-
else if (e.key === "Home") i =
|
|
62
|
-
else if (e.key === "End") i =
|
|
53
|
+
}, [D, re]);
|
|
54
|
+
l(() => (document.addEventListener("mousemove", Z), document.addEventListener("mouseup", Q), document.addEventListener("touchmove", Z, { passive: !1 }), document.addEventListener("touchend", Q), () => {
|
|
55
|
+
document.removeEventListener("mousemove", Z), document.removeEventListener("mouseup", Q), document.removeEventListener("touchmove", Z), document.removeEventListener("touchend", Q);
|
|
56
|
+
}), [Z, Q]);
|
|
57
|
+
let ve = (e, t) => {
|
|
58
|
+
if (y) return;
|
|
59
|
+
let n = [...L], r = t === "min" ? n[0] : n[1], i;
|
|
60
|
+
if (e.key === "ArrowLeft" || e.key === "ArrowDown") i = Math.max(h, r - _);
|
|
61
|
+
else if (e.key === "ArrowRight" || e.key === "ArrowUp") i = Math.min(g, r + _);
|
|
62
|
+
else if (e.key === "Home") i = h;
|
|
63
|
+
else if (e.key === "End") i = g;
|
|
63
64
|
else return;
|
|
64
65
|
if (t === "min") {
|
|
65
|
-
let e =
|
|
66
|
+
let e = v ? g : n[1];
|
|
66
67
|
n[0] = Math.min(i, e);
|
|
67
68
|
} else {
|
|
68
|
-
let e =
|
|
69
|
+
let e = v ? h : n[0];
|
|
69
70
|
n[1] = Math.max(i, e);
|
|
70
71
|
}
|
|
71
|
-
|
|
72
|
-
}, $ =
|
|
73
|
-
return /* @__PURE__ */
|
|
72
|
+
D || I(n), b?.(n), e.preventDefault();
|
|
73
|
+
}, $ = J(L[0]), ye = J(L[1]);
|
|
74
|
+
return /* @__PURE__ */ p(a, {
|
|
74
75
|
label: S,
|
|
75
76
|
error: C,
|
|
76
|
-
required:
|
|
77
|
-
layout:
|
|
77
|
+
required: ae,
|
|
78
|
+
layout: oe,
|
|
78
79
|
labelId: pe,
|
|
79
80
|
errorId: me,
|
|
80
|
-
className:
|
|
81
|
-
children: /* @__PURE__ */
|
|
81
|
+
className: ie,
|
|
82
|
+
children: /* @__PURE__ */ te(ue ? e : "div", {
|
|
82
83
|
role: "presentation",
|
|
83
84
|
"data-testid": "range-slider-root",
|
|
84
|
-
className:
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
className: f("wim-range-slider", s.root, y && s.disabled, C && s.danger),
|
|
86
|
+
...T,
|
|
87
|
+
onMouseDown: (e) => i(T.onMouseDown, _e)(e),
|
|
88
|
+
onTouchStart: (e) => i(T.onTouchStart, _e)(e),
|
|
88
89
|
children: [
|
|
89
|
-
/* @__PURE__ */
|
|
90
|
-
className:
|
|
91
|
-
ref:
|
|
90
|
+
/* @__PURE__ */ te("div", {
|
|
91
|
+
className: s.trackContainer,
|
|
92
|
+
ref: R,
|
|
92
93
|
children: [
|
|
93
|
-
/* @__PURE__ */
|
|
94
|
-
ref:
|
|
95
|
-
className:
|
|
94
|
+
/* @__PURE__ */ p("div", {
|
|
95
|
+
ref: V,
|
|
96
|
+
className: s.track,
|
|
96
97
|
style: {
|
|
97
98
|
left: `${$}%`,
|
|
98
|
-
width: `${
|
|
99
|
+
width: `${ye - $}%`
|
|
99
100
|
}
|
|
100
101
|
}),
|
|
101
|
-
/* @__PURE__ */
|
|
102
|
-
ref:
|
|
103
|
-
className:
|
|
102
|
+
/* @__PURE__ */ p("div", {
|
|
103
|
+
ref: z,
|
|
104
|
+
className: f(s.thumb, W === "min" && s.active),
|
|
104
105
|
style: { left: `${$}%` },
|
|
105
106
|
role: "slider",
|
|
106
|
-
"aria-valuemin":
|
|
107
|
-
"aria-valuemax":
|
|
108
|
-
"aria-valuenow":
|
|
109
|
-
"aria-disabled":
|
|
110
|
-
id:
|
|
111
|
-
"aria-labelledby":
|
|
112
|
-
"aria-label":
|
|
107
|
+
"aria-valuemin": h,
|
|
108
|
+
"aria-valuemax": L[1],
|
|
109
|
+
"aria-valuenow": L[0],
|
|
110
|
+
"aria-disabled": y,
|
|
111
|
+
id: A,
|
|
112
|
+
"aria-labelledby": M(A),
|
|
113
|
+
"aria-label": k ? E("rangeSlider.start_of", { label: k }) : E("rangeSlider.start"),
|
|
113
114
|
"aria-describedby": he,
|
|
114
115
|
"aria-invalid": C ? !0 : void 0,
|
|
115
|
-
tabIndex:
|
|
116
|
-
onMouseDown: (e) =>
|
|
117
|
-
onTouchStart: (e) =>
|
|
118
|
-
onKeyDown: (e) =>
|
|
116
|
+
tabIndex: y ? -1 : 0,
|
|
117
|
+
onMouseDown: (e) => X(e, "min"),
|
|
118
|
+
onTouchStart: (e) => X(e, "min"),
|
|
119
|
+
onKeyDown: (e) => ve(e, "min")
|
|
119
120
|
}),
|
|
120
|
-
/* @__PURE__ */
|
|
121
|
-
ref:
|
|
122
|
-
className:
|
|
123
|
-
style: { left: `${
|
|
121
|
+
/* @__PURE__ */ p("div", {
|
|
122
|
+
ref: B,
|
|
123
|
+
className: f(s.thumb, W === "max" && s.active),
|
|
124
|
+
style: { left: `${ye}%` },
|
|
124
125
|
role: "slider",
|
|
125
|
-
"aria-valuemin":
|
|
126
|
-
"aria-valuemax":
|
|
127
|
-
"aria-valuenow":
|
|
128
|
-
"aria-disabled":
|
|
129
|
-
id:
|
|
130
|
-
"aria-labelledby": j
|
|
131
|
-
"aria-label":
|
|
126
|
+
"aria-valuemin": L[0],
|
|
127
|
+
"aria-valuemax": g,
|
|
128
|
+
"aria-valuenow": L[1],
|
|
129
|
+
"aria-disabled": y,
|
|
130
|
+
id: j,
|
|
131
|
+
"aria-labelledby": M(j),
|
|
132
|
+
"aria-label": k ? E("rangeSlider.end_of", { label: k }) : E("rangeSlider.end"),
|
|
132
133
|
"aria-describedby": he,
|
|
133
134
|
"aria-invalid": C ? !0 : void 0,
|
|
134
|
-
tabIndex:
|
|
135
|
-
onMouseDown: (e) =>
|
|
136
|
-
onTouchStart: (e) =>
|
|
137
|
-
onKeyDown: (e) =>
|
|
135
|
+
tabIndex: y ? -1 : 0,
|
|
136
|
+
onMouseDown: (e) => X(e, "max"),
|
|
137
|
+
onTouchStart: (e) => X(e, "max"),
|
|
138
|
+
onKeyDown: (e) => ve(e, "max")
|
|
138
139
|
})
|
|
139
140
|
]
|
|
140
141
|
}),
|
|
141
|
-
/* @__PURE__ */
|
|
142
|
-
ref:
|
|
142
|
+
/* @__PURE__ */ p("input", {
|
|
143
|
+
ref: H,
|
|
143
144
|
type: "hidden",
|
|
144
145
|
name: x ? `${x}-min` : "",
|
|
145
|
-
value:
|
|
146
|
+
value: L[0]
|
|
146
147
|
}),
|
|
147
|
-
/* @__PURE__ */
|
|
148
|
-
ref:
|
|
148
|
+
/* @__PURE__ */ p("input", {
|
|
149
|
+
ref: U,
|
|
149
150
|
type: "hidden",
|
|
150
151
|
name: x ? `${x}-max` : "",
|
|
151
|
-
value:
|
|
152
|
+
value: L[1]
|
|
152
153
|
}),
|
|
153
|
-
/* @__PURE__ */
|
|
154
|
+
/* @__PURE__ */ p(t, { children: de })
|
|
154
155
|
]
|
|
155
156
|
})
|
|
156
157
|
});
|
|
157
158
|
};
|
|
158
|
-
|
|
159
|
+
m.displayName = "RangeSlider";
|
|
159
160
|
//#endregion
|
|
160
|
-
export {
|
|
161
|
+
export { m as RangeSlider };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../icon/star.cjs"),
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../_internal/composeEventHandlers.cjs"),r=require("../../../icon/star.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./rating.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=({value:e,defaultValue:u=0,count:d=5,allowHalf:f=!1,disabled:p=!1,readOnly:m=!1,size:h=`md`,onChange:g,className:_,label:v,error:y,required:b,layout:x=`vertical`,labels:S={},asChild:C=!1,children:w,...T})=>{let{star:E=e=>`${e} star${e===1?``:`s`}`,readonly:D=(e,t)=>`Rating: ${e} out of ${t}`}=S,O=e!==void 0,[k,A]=(0,s.useState)(u),[j,M]=(0,s.useState)(null),N=(0,s.useId)(),P=`wim-rating-label-${N}`,F=`wim-rating-error-${N}`,I=(0,s.useRef)([]),L=O?e:k,R=j===null?L:j,z=(e,t)=>{if(p||m)return;let n=e+1;if(f){let e=t.currentTarget.getBoundingClientRect();t.clientX-e.left<=e.width/2&&(n-=.5)}M(n)},B=()=>{p||m||M(null)},V=e=>{p||m||(O||A(e),g?.(e))},H=(()=>{if(L===0)return 0;for(let e=0;e<d;e++){let t=e+1;if(L===t||f&&L===t-.5)return e}return 0})(),U=(e,t)=>{if(p||m)return;let n=f?.5:1;if(t.key===`ArrowRight`||t.key===`ArrowUp`){t.preventDefault();let e=Math.min(d,L+n),r=Math.min(Math.ceil(e)-1,d-1);V(e),I.current[r]?.focus()}else if(t.key===`ArrowLeft`||t.key===`ArrowDown`){t.preventDefault();let e=Math.max(0,L-n),r=e===0?0:Math.ceil(e)-1;V(e),I.current[r]?.focus()}else t.key===`Home`?(t.preventDefault(),V(0),I.current[0]?.focus()):t.key===`End`&&(t.preventDefault(),V(d),I.current[d-1]?.focus())},W=e=>{let t=e+1,n=R>=t,a=!n&&R>=t-.5,s=L===t||f&&L===t-.5;return(0,l.jsxs)(`div`,{ref:t=>{I.current[e]=t},className:(0,c.default)(o.default.star,n&&o.default.full,a&&o.default.half),onMouseMove:t=>z(e,t),onClick:e=>{let n=e.currentTarget.getBoundingClientRect(),r=e.clientX-n.left,i=t;f&&r<=n.width/2&&(i-=.5),V(i)},onKeyDown:n=>{n.key===`Enter`||n.key===` `?(n.preventDefault(),V(t)):U(e,n)},role:m?`presentation`:`radio`,tabIndex:p||m?-1:e===H?0:-1,"aria-checked":m?void 0:s,"aria-label":m?void 0:E(e+1),children:[(0,l.jsx)(`div`,{className:o.default.background,children:(0,l.jsx)(i.Icon,{component:r.default,size:h,className:o.default.icon})}),(0,l.jsx)(`div`,{className:o.default.foreground,children:(0,l.jsx)(i.Icon,{component:r.default,size:h,className:o.default.icon})})]},e)},G=Array.from({length:d},(e,t)=>W(t));return(0,l.jsx)(a.FieldTemplate,{label:v,error:y,required:b,layout:x,labelId:P,errorId:F,className:_,children:(0,l.jsxs)(C?t.Root:`div`,{className:(0,c.default)(`wim-rating`,o.default.root,o.default[h],p&&o.default.disabled),role:m?`img`:`radiogroup`,"aria-label":m?D(L,d):void 0,"aria-labelledby":!m&&v?P:void 0,"aria-disabled":!m&&p?!0:void 0,"aria-required":m?void 0:b,"aria-describedby":!m&&y?F:void 0,"aria-invalid":!m&&y?!0:void 0,...T,onMouseLeave:n.composeEventHandlers(T.onMouseLeave,m?void 0:B),children:[G,(0,l.jsx)(t.Slottable,{children:w})]})})};exports.Rating=u;
|