wimui 0.50.0 → 0.50.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/ai/ModelSelector/ModelSelector.cjs +1 -1
- package/dist/components/ai/ModelSelector/ModelSelector.js +28 -16
- package/dist/components/data-display/Carousel/Carousel.cjs +1 -1
- package/dist/components/data-display/Carousel/Carousel.js +94 -95
- package/dist/components/form/PhoneInput/PhoneInput.cjs +1 -1
- package/dist/components/form/PhoneInput/PhoneInput.d.ts +2 -2
- package/dist/components/form/PhoneInput/PhoneInput.js +116 -120
- package/dist/components/form/QueryBuilder/QueryBuilder.cjs +1 -1
- package/dist/components/form/QueryBuilder/QueryBuilder.d.ts +1 -28
- package/dist/components/form/QueryBuilder/QueryBuilder.js +1 -28
- package/dist/i18n/generated/keys.d.ts +1 -1
- package/dist/i18n/generated/resources.cjs +1 -1
- package/dist/i18n/generated/resources.js +120 -9
- package/dist/llms-full.txt +1 -1
- package/dist/llms.txt +1 -1
- package/dist/locales/en/components.json +24 -1
- package/dist/locales/en/form.json +13 -1
- package/dist/locales/ja/components.json +24 -1
- package/dist/locales/ja/form.json +13 -1
- package/dist/locales/pt/components.json +24 -1
- package/dist/locales/pt/form.json +13 -1
- package/dist/wimui.umd.js +5 -5
- package/package.json +6 -5
|
@@ -1,223 +1,219 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import n from "
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import a from "
|
|
8
|
-
import
|
|
9
|
-
import d from "
|
|
10
|
-
import
|
|
2
|
+
import { wimResources as e } from "../../../i18n/generated/resources.js";
|
|
3
|
+
import { useWimTranslation as t } from "../../../i18n/useWimTranslation.js";
|
|
4
|
+
import { Transition as n } from "../../layout/Transition/Transition.js";
|
|
5
|
+
import r from "../../../icon/chevron-down.js";
|
|
6
|
+
import { Icon as i } from "../../media/Icon/Icon.js";
|
|
7
|
+
import { FieldTemplate as a } from "../FieldTemplate/FieldTemplate.js";
|
|
8
|
+
import o from "./phone-input.module.js";
|
|
9
|
+
import { forwardRef as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
|
|
10
|
+
import f from "classnames";
|
|
11
|
+
import { jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
11
12
|
//#region src/components/form/PhoneInput/PhoneInput.tsx
|
|
12
|
-
var
|
|
13
|
+
var h = [
|
|
13
14
|
{
|
|
14
15
|
code: "US",
|
|
15
|
-
name: "United States",
|
|
16
16
|
dialCode: "1",
|
|
17
17
|
flag: "🇺🇸"
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
20
|
code: "JP",
|
|
21
|
-
name: "Japan",
|
|
22
21
|
dialCode: "81",
|
|
23
22
|
flag: "🇯🇵"
|
|
24
23
|
},
|
|
25
24
|
{
|
|
26
25
|
code: "GB",
|
|
27
|
-
name: "United Kingdom",
|
|
28
26
|
dialCode: "44",
|
|
29
27
|
flag: "🇬🇧"
|
|
30
28
|
},
|
|
31
29
|
{
|
|
32
30
|
code: "AU",
|
|
33
|
-
name: "Australia",
|
|
34
31
|
dialCode: "61",
|
|
35
32
|
flag: "🇦🇺"
|
|
36
33
|
},
|
|
37
34
|
{
|
|
38
35
|
code: "DE",
|
|
39
|
-
name: "Germany",
|
|
40
36
|
dialCode: "49",
|
|
41
37
|
flag: "🇩🇪"
|
|
42
38
|
},
|
|
43
39
|
{
|
|
44
40
|
code: "FR",
|
|
45
|
-
name: "France",
|
|
46
41
|
dialCode: "33",
|
|
47
42
|
flag: "🇫🇷"
|
|
48
43
|
},
|
|
49
44
|
{
|
|
50
45
|
code: "CN",
|
|
51
|
-
name: "China",
|
|
52
46
|
dialCode: "86",
|
|
53
47
|
flag: "🇨🇳"
|
|
54
48
|
},
|
|
55
49
|
{
|
|
56
50
|
code: "KR",
|
|
57
|
-
name: "South Korea",
|
|
58
51
|
dialCode: "82",
|
|
59
52
|
flag: "🇰🇷"
|
|
60
53
|
},
|
|
61
54
|
{
|
|
62
55
|
code: "IN",
|
|
63
|
-
name: "India",
|
|
64
56
|
dialCode: "91",
|
|
65
57
|
flag: "🇮🇳"
|
|
66
58
|
},
|
|
67
59
|
{
|
|
68
60
|
code: "BR",
|
|
69
|
-
name: "Brazil",
|
|
70
61
|
dialCode: "55",
|
|
71
62
|
flag: "🇧🇷"
|
|
72
63
|
}
|
|
73
|
-
],
|
|
74
|
-
let
|
|
64
|
+
], g = s(({ value: s = "", onChange: g, countryCode: _ = "US", onCountryChange: v, placeholder: y = "000-0000-0000", disabled: b = !1, error: x, required: S = !1, label: C, layout: w = "vertical", className: T, fullWidth: E = !1, ...D }, O) => {
|
|
65
|
+
let k = `wim-phone-input-${l()}`, A = C ? `${k}-label` : void 0, { t: j } = t("form"), M = j("phone.select_country"), N = `${k}-countries`, P = (e) => `${k}-country-${e}`, F = x ? `${k}-error` : void 0, [I, L] = d(!1), [R, z] = d(-1), B = u(null), V = u(null), H = u({
|
|
75
66
|
text: "",
|
|
76
67
|
timer: null
|
|
77
68
|
});
|
|
78
|
-
|
|
69
|
+
c(() => {
|
|
79
70
|
let e = (e) => {
|
|
80
|
-
|
|
71
|
+
B.current && !B.current.contains(e.target) && L(!1);
|
|
81
72
|
};
|
|
82
|
-
return
|
|
73
|
+
return I && document.addEventListener("mousedown", e), () => {
|
|
83
74
|
document.removeEventListener("mousedown", e);
|
|
84
75
|
};
|
|
85
|
-
}, [
|
|
86
|
-
let
|
|
87
|
-
|
|
88
|
-
},
|
|
89
|
-
let t =
|
|
90
|
-
|
|
91
|
-
},
|
|
92
|
-
let t =
|
|
93
|
-
t && (
|
|
94
|
-
},
|
|
76
|
+
}, [I]);
|
|
77
|
+
let U = h.find((e) => e.code === _) ?? h[0], W = (e) => {
|
|
78
|
+
g?.(e.target.value);
|
|
79
|
+
}, G = h.length - 1, K = (e) => {
|
|
80
|
+
let t = h.findIndex((e) => e.code === U.code);
|
|
81
|
+
z(e ?? Math.max(t, 0)), L(!0);
|
|
82
|
+
}, q = (e) => {
|
|
83
|
+
let t = h[e];
|
|
84
|
+
t && (v?.(t.code), L(!1));
|
|
85
|
+
}, J = (e) => j(`phone.countries.${e.code}`), Y = (t) => (e.en?.form)?.phone?.countries?.[t.code] ?? "", X = (e, t) => {
|
|
95
86
|
let n = e.toLowerCase().replace(/^\+/, "");
|
|
96
87
|
if (n === "") return -1;
|
|
97
|
-
let r = /^[0-9]+$/.test(n), i =
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
88
|
+
let r = /^[0-9]+$/.test(n), i = !r && n.length > 1 && n.split("").every((e) => e === n[0]), a = i ? n[0] : n, o = i || n.length === 1 ? t + 1 : t, s = r ? [(e) => e.dialCode] : [
|
|
89
|
+
(e) => J(e).toLowerCase(),
|
|
90
|
+
(e) => Y(e).toLowerCase(),
|
|
91
|
+
(e) => e.code.toLowerCase()
|
|
92
|
+
];
|
|
93
|
+
for (let e of s) for (let t = 0; t < h.length; t++) {
|
|
94
|
+
let n = (Math.max(o, 0) + t) % h.length;
|
|
95
|
+
if (e(h[n]).startsWith(a)) return n;
|
|
101
96
|
}
|
|
102
97
|
return -1;
|
|
103
|
-
},
|
|
104
|
-
let t =
|
|
98
|
+
}, Z = (e) => {
|
|
99
|
+
let t = H.current;
|
|
105
100
|
t.timer && clearTimeout(t.timer), t.text += e, t.timer = setTimeout(() => {
|
|
106
101
|
t.text = "", t.timer = null;
|
|
107
102
|
}, 500);
|
|
108
|
-
let n =
|
|
109
|
-
n < 0 || (
|
|
110
|
-
},
|
|
111
|
-
if (!
|
|
103
|
+
let n = X(t.text, I ? R : -1);
|
|
104
|
+
n < 0 || (I ? z(n) : K(n));
|
|
105
|
+
}, Q = (e) => {
|
|
106
|
+
if (!b) switch (e.key) {
|
|
112
107
|
case "ArrowDown":
|
|
113
108
|
case "ArrowUp":
|
|
114
|
-
if (e.preventDefault(), !
|
|
109
|
+
if (e.preventDefault(), !I) K();
|
|
115
110
|
else {
|
|
116
111
|
let t = e.key === "ArrowDown" ? 1 : -1;
|
|
117
|
-
|
|
112
|
+
z((e) => (e + t + h.length) % h.length);
|
|
118
113
|
}
|
|
119
114
|
break;
|
|
120
115
|
case "Home":
|
|
121
116
|
case "End":
|
|
122
|
-
e.preventDefault(),
|
|
117
|
+
e.preventDefault(), I ? z(e.key === "Home" ? 0 : G) : K(e.key === "Home" ? 0 : G);
|
|
123
118
|
break;
|
|
124
119
|
case "Enter":
|
|
125
120
|
case " ":
|
|
126
|
-
e.preventDefault(), e.key === " " &&
|
|
121
|
+
e.preventDefault(), e.key === " " && H.current.text !== "" ? Z(" ") : I ? q(R) : K();
|
|
127
122
|
break;
|
|
128
123
|
case "Escape":
|
|
129
|
-
|
|
124
|
+
I && (e.preventDefault(), L(!1));
|
|
130
125
|
break;
|
|
131
126
|
case "Tab":
|
|
132
|
-
|
|
127
|
+
L(!1);
|
|
133
128
|
break;
|
|
134
|
-
default: e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(),
|
|
129
|
+
default: e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), Z(e.key));
|
|
135
130
|
}
|
|
136
131
|
};
|
|
137
|
-
return
|
|
138
|
-
let e =
|
|
132
|
+
return c(() => {
|
|
133
|
+
let e = H.current;
|
|
139
134
|
return () => {
|
|
140
135
|
e.timer && clearTimeout(e.timer);
|
|
141
136
|
};
|
|
142
|
-
}, []),
|
|
143
|
-
|
|
144
|
-
}, [
|
|
145
|
-
label:
|
|
146
|
-
labelId:
|
|
147
|
-
htmlFor:
|
|
148
|
-
required:
|
|
149
|
-
error:
|
|
150
|
-
errorId:
|
|
151
|
-
layout:
|
|
152
|
-
className:
|
|
153
|
-
children: /* @__PURE__ */
|
|
154
|
-
ref:
|
|
155
|
-
className:
|
|
137
|
+
}, []), c(() => {
|
|
138
|
+
I && R >= 0 && (V.current?.querySelectorAll("[role=\"option\"]")?.[R])?.scrollIntoView?.({ block: "nearest" });
|
|
139
|
+
}, [R, I]), /* @__PURE__ */ p(a, {
|
|
140
|
+
label: C,
|
|
141
|
+
labelId: A,
|
|
142
|
+
htmlFor: k,
|
|
143
|
+
required: S,
|
|
144
|
+
error: x,
|
|
145
|
+
errorId: F,
|
|
146
|
+
layout: w,
|
|
147
|
+
className: T,
|
|
148
|
+
children: /* @__PURE__ */ m("div", {
|
|
149
|
+
ref: B,
|
|
150
|
+
className: f("wim-phone-input", o.root, E && o.fullWidth, b && o.disabled, x && o.danger),
|
|
156
151
|
"data-testid": "phone-input-root",
|
|
157
|
-
...
|
|
152
|
+
...D,
|
|
158
153
|
children: [
|
|
159
|
-
/* @__PURE__ */
|
|
160
|
-
className:
|
|
161
|
-
children: [/* @__PURE__ */
|
|
154
|
+
/* @__PURE__ */ m("div", {
|
|
155
|
+
className: o.countryWrapper,
|
|
156
|
+
children: [/* @__PURE__ */ m("button", {
|
|
162
157
|
type: "button",
|
|
163
158
|
role: "combobox",
|
|
164
|
-
className:
|
|
159
|
+
className: o.countryTrigger,
|
|
165
160
|
onClick: () => {
|
|
166
|
-
|
|
161
|
+
b || (I ? L(!1) : K());
|
|
167
162
|
},
|
|
168
|
-
onKeyDown:
|
|
163
|
+
onKeyDown: Q,
|
|
169
164
|
onKeyUp: (e) => {
|
|
170
165
|
e.key === " " && e.preventDefault();
|
|
171
166
|
},
|
|
172
|
-
disabled:
|
|
167
|
+
disabled: b,
|
|
173
168
|
"aria-haspopup": "listbox",
|
|
174
|
-
"aria-expanded":
|
|
175
|
-
"aria-controls":
|
|
176
|
-
"aria-activedescendant":
|
|
177
|
-
"aria-label":
|
|
169
|
+
"aria-expanded": I,
|
|
170
|
+
"aria-controls": I ? N : void 0,
|
|
171
|
+
"aria-activedescendant": I && R >= 0 ? P(R) : void 0,
|
|
172
|
+
"aria-label": M,
|
|
178
173
|
children: [
|
|
179
|
-
/* @__PURE__ */
|
|
174
|
+
/* @__PURE__ */ p("span", {
|
|
180
175
|
"aria-hidden": "true",
|
|
181
176
|
style: { fontSize: "1.2em" },
|
|
182
|
-
children:
|
|
177
|
+
children: U.flag
|
|
183
178
|
}),
|
|
184
|
-
/* @__PURE__ */
|
|
185
|
-
/* @__PURE__ */
|
|
186
|
-
component:
|
|
179
|
+
/* @__PURE__ */ m("span", { children: ["+", U.dialCode] }),
|
|
180
|
+
/* @__PURE__ */ p(i, {
|
|
181
|
+
component: r,
|
|
187
182
|
size: "sm",
|
|
188
|
-
className:
|
|
183
|
+
className: f(o.chevron, I && o.chevronOpen)
|
|
189
184
|
})
|
|
190
185
|
]
|
|
191
|
-
}), /* @__PURE__ */
|
|
192
|
-
show:
|
|
186
|
+
}), /* @__PURE__ */ p(n, {
|
|
187
|
+
show: I,
|
|
193
188
|
preset: "fade",
|
|
194
|
-
className:
|
|
195
|
-
children: /* @__PURE__ */
|
|
196
|
-
ref:
|
|
197
|
-
id:
|
|
198
|
-
className:
|
|
189
|
+
className: o.dropdown,
|
|
190
|
+
children: /* @__PURE__ */ p("ul", {
|
|
191
|
+
ref: V,
|
|
192
|
+
id: N,
|
|
193
|
+
className: o.countryList,
|
|
199
194
|
role: "listbox",
|
|
200
|
-
"aria-label":
|
|
195
|
+
"aria-label": M,
|
|
201
196
|
tabIndex: -1,
|
|
202
197
|
onMouseDown: (e) => e.preventDefault(),
|
|
203
|
-
children:
|
|
204
|
-
id:
|
|
205
|
-
className:
|
|
206
|
-
onMouseEnter: () =>
|
|
207
|
-
onClick: () =>
|
|
198
|
+
children: h.map((e, t) => /* @__PURE__ */ m("li", {
|
|
199
|
+
id: P(t),
|
|
200
|
+
className: f(o.countryOption, t === R && o.active, U.code === e.code && o.selected),
|
|
201
|
+
onMouseEnter: () => z(t),
|
|
202
|
+
onClick: () => q(t),
|
|
208
203
|
role: "option",
|
|
209
|
-
"aria-selected":
|
|
204
|
+
"aria-selected": U.code === e.code,
|
|
210
205
|
children: [
|
|
211
|
-
/* @__PURE__ */
|
|
206
|
+
/* @__PURE__ */ p("span", {
|
|
212
207
|
"aria-hidden": "true",
|
|
213
208
|
children: e.flag
|
|
214
209
|
}),
|
|
215
|
-
/* @__PURE__ */ f("span", {
|
|
216
|
-
className: a.countryName,
|
|
217
|
-
children: e.name
|
|
218
|
-
}),
|
|
219
210
|
/* @__PURE__ */ p("span", {
|
|
220
|
-
className:
|
|
211
|
+
className: o.countryName,
|
|
212
|
+
children: J(e)
|
|
213
|
+
}),
|
|
214
|
+
" ",
|
|
215
|
+
/* @__PURE__ */ m("span", {
|
|
216
|
+
className: o.countryCode,
|
|
221
217
|
children: ["+", e.dialCode]
|
|
222
218
|
})
|
|
223
219
|
]
|
|
@@ -225,26 +221,26 @@ var m = [
|
|
|
225
221
|
})
|
|
226
222
|
})]
|
|
227
223
|
}),
|
|
228
|
-
/* @__PURE__ */
|
|
229
|
-
className:
|
|
224
|
+
/* @__PURE__ */ p("div", {
|
|
225
|
+
className: o.divider,
|
|
230
226
|
"aria-hidden": "true"
|
|
231
227
|
}),
|
|
232
|
-
/* @__PURE__ */
|
|
233
|
-
id:
|
|
234
|
-
ref:
|
|
228
|
+
/* @__PURE__ */ p("input", {
|
|
229
|
+
id: k,
|
|
230
|
+
ref: O,
|
|
235
231
|
type: "tel",
|
|
236
|
-
value:
|
|
237
|
-
onChange:
|
|
238
|
-
placeholder:
|
|
239
|
-
disabled:
|
|
240
|
-
className:
|
|
241
|
-
"aria-invalid": !!
|
|
242
|
-
"aria-describedby":
|
|
232
|
+
value: s,
|
|
233
|
+
onChange: W,
|
|
234
|
+
placeholder: y,
|
|
235
|
+
disabled: b,
|
|
236
|
+
className: o.number,
|
|
237
|
+
"aria-invalid": !!x,
|
|
238
|
+
"aria-describedby": F
|
|
243
239
|
})
|
|
244
240
|
]
|
|
245
241
|
})
|
|
246
242
|
});
|
|
247
243
|
});
|
|
248
|
-
|
|
244
|
+
g.displayName = "PhoneInput";
|
|
249
245
|
//#endregion
|
|
250
|
-
export {
|
|
246
|
+
export { h as PHONE_COUNTRIES, g as PhoneInput };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Button/Button.cjs"),r=require("../Input/Input.cjs"),i=require("../DatePicker/DatePicker.cjs"),a=require("../NumberInput/NumberInput.cjs"),o=require("../SegmentedControl/SegmentedControl.cjs"),s=require("../Select/Select.cjs"),c=require("../Switch/Switch.cjs"),l=require("../IconButton/IconButton.cjs"),u=require("./querybuilder.module.cjs"),d=require("./warn-unknown-operator.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("classnames");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=0,g=()=>typeof window<`u`&&window.__VRT__?(h+=1,`vrt-id-${h}`):Math.random().toString(36).substring(2,11),_={string:[{
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Button/Button.cjs"),r=require("../Input/Input.cjs"),i=require("../DatePicker/DatePicker.cjs"),a=require("../NumberInput/NumberInput.cjs"),o=require("../SegmentedControl/SegmentedControl.cjs"),s=require("../Select/Select.cjs"),c=require("../Switch/Switch.cjs"),l=require("../IconButton/IconButton.cjs"),u=require("./querybuilder.module.cjs"),d=require("./warn-unknown-operator.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("classnames");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=0,g=()=>typeof window<`u`&&window.__VRT__?(h+=1,`vrt-id-${h}`):Math.random().toString(36).substring(2,11),_={string:[{value:`=`,key:`equal`},{value:`!=`,key:`not_equal`},{value:`contains`,key:`contains`},{value:`starts_with`,key:`starts_with`},{value:`ends_with`,key:`ends_with`},{value:`is_null`,key:`is_null`},{value:`is_not_null`,key:`is_not_null`}],number:[{value:`=`,key:`equal`},{value:`!=`,key:`not_equal`},{value:`>`,key:`greater_than`},{value:`<`,key:`less_than`},{value:`>=`,key:`greater_than_or_equal`},{value:`<=`,key:`less_than_or_equal`},{value:`is_null`,key:`is_null`},{value:`is_not_null`,key:`is_not_null`}],date:[{value:`=`,key:`equal`},{value:`!=`,key:`not_equal`},{value:`>`,key:`after`},{value:`<`,key:`before`},{value:`>=`,key:`after_or_on`},{value:`<=`,key:`before_or_on`},{value:`is_null`,key:`is_null`},{value:`is_not_null`,key:`is_not_null`}],boolean:[{value:`=`,key:`equal`},{value:`!=`,key:`not_equal`},{value:`is_null`,key:`is_null`},{value:`is_not_null`,key:`is_not_null`}]},v=({fields:e,query:h,defaultQuery:v,onChange:y,maxDepth:b=3,className:x,id:S,labels:C={}})=>{let{t:w}=t.useWimTranslation(`components`),{ruleAdded:T=w(`query.builder.rule_added`),groupAdded:E=w(`query.builder.group_added`),removed:D=w(`query.builder.removed`),ruleAriaLabel:O=w(`query.builder.rule`),fieldAriaLabel:k=w(`query.builder.field`),operatorAriaLabel:A=w(`query.builder.operator`),valueAriaLabel:j=w(`query.builder.value`),trueLabel:M=w(`query.builder.true`),falseLabel:N=w(`query.builder.false`),removeRuleAriaLabel:P=w(`query.builder.remove_rule`),removeGroupAriaLabel:F=w(`query.builder.remove_group`),addRuleLabel:I=w(`query.builder.add_rule`),addGroupLabel:L=w(`query.builder.add_group`),regionAriaLabel:R=w(`query.builder.region_label`),combinatorAriaLabel:z=w(`query.builder.combinator`),operators:B={}}=C,V=(0,f.useId)(),H=S||`wim-qb-${V}`,U=(0,f.useRef)(null),[W,G]=(0,f.useState)(v||{id:g(),combinator:`and`,not:!1,rules:[]}),K=h===void 0?W:h,q=(0,f.useCallback)(e=>{U.current&&(U.current.textContent=``,setTimeout(()=>{U.current&&(U.current.textContent=e)},50))},[]),J=(0,f.useCallback)(e=>{h===void 0&&G(e),y?.(e)},[h,y]),Y=(e,t)=>{let n=r=>r.id===e?{...r,...t}:{...r,rules:r.rules.map(r=>r.id===e?{...r,...t}:`rules`in r?n(r):r)};J(n(K))},X=t=>{let n=e[0],r={id:g(),field:n?.name||``,operator:`=`,value:n?.type!==`boolean`&&``},i=e=>e.id===t?{...e,rules:[...e.rules,r]}:{...e,rules:e.rules.map(e=>`rules`in e?i(e):e)};J(i(K)),q(T)},Z=e=>{let t={id:g(),combinator:`and`,not:!1,rules:[]},n=r=>r.id===e?{...r,rules:[...r.rules,t]}:{...r,rules:r.rules.map(e=>`rules`in e?n(e):e)};J(n(K)),q(E)},Q=e=>{let t=n=>({...n,rules:n.rules.filter(t=>t.id!==e).map(e=>`rules`in e?t(e):e)});J(t(K)),q(D)},$=(e,t,r)=>{let i=`${e.combinator.toUpperCase()} group`;return(0,m.jsxs)(`div`,{role:`group`,"aria-label":i,className:(0,p.default)(u.default.group,t>0&&u.default.nested,r&&u.default.excluded),children:[(0,m.jsxs)(`div`,{className:u.default.groupHeader,children:[(0,m.jsxs)(`div`,{className:u.default.groupHeaderLeft,children:[(0,m.jsx)(o.SegmentedControl,{size:`md`,options:[{label:`AND`,value:`and`},{label:`OR`,value:`or`}],value:e.combinator,onChange:t=>Y(e.id,{combinator:t}),"aria-label":z,styles:{root:u.default.segmentedControl,item:u.default.segmentedControlItem,slider:u.default.segmentedControlSlider}}),(0,m.jsx)(c.Switch,{size:`md`,checked:e.not,onChange:t=>Y(e.id,{not:t.target.checked}),children:`NOT`})]}),t>0&&(0,m.jsx)(l.IconButton,{iconName:`TrashIcon`,"aria-label":F,variant:`ghost`,size:`md`,intent:`danger`,onClick:()=>Q(e.id),className:u.default.removeGroup})]}),(0,m.jsx)(`div`,{className:u.default.ruleList,children:e.rules.map(e=>`rules`in e?$(e,t+1,r):ee(e))}),(0,m.jsxs)(`div`,{className:u.default.groupActions,children:[(0,m.jsx)(n.Button,{size:`md`,variant:`ghost`,icon:`PlusIcon`,onClick:()=>X(e.id),children:I}),t<b&&(0,m.jsx)(n.Button,{size:`md`,variant:`ghost`,icon:`PlusIcon`,onClick:()=>Z(e.id),children:L})]})]},e.id)},ee=t=>{let n=e.find(e=>e.name===t.field)?.type||`string`,o=_[n].map(e=>({...e,label:B[e.key]||w(`query.builder.operators.${e.key}`)})),c=n=>{let r=e.find(e=>e.name===n);Y(t.id,{field:n,operator:`=`,value:r?.type!==`boolean`&&``})};o.some(e=>e.value===t.operator)||d.warnUnknownOperator(t.operator,n,o.map(e=>e.value));let f=t.operator===`is_null`||t.operator===`is_not_null`;return(0,m.jsx)(`div`,{className:u.default.rule,role:`group`,"aria-label":O,children:(0,m.jsxs)(`div`,{className:u.default.ruleFields,children:[(0,m.jsx)(s.Select,{className:u.default.field,options:e.map(e=>({label:e.label,value:e.name})),value:t.field,onChange:c,"aria-label":k,fullWidth:!0,styles:{root:u.default.select,trigger:u.default.selectTrigger,inputBase:{root:u.default.inputBase}}}),(0,m.jsx)(s.Select,{className:u.default.operator,options:o.map(e=>({label:e.label,value:e.value})),value:t.operator,onChange:e=>Y(t.id,{operator:e}),"aria-label":A,fullWidth:!0,styles:{root:u.default.select,trigger:u.default.selectTrigger,inputBase:{root:u.default.inputBase}}}),!f&&(0,m.jsx)(`div`,{className:u.default.value,children:n===`number`?(0,m.jsx)(a.NumberInput,{value:typeof t.value==`boolean`?void 0:t.value??void 0,onChange:e=>Y(t.id,{value:e.target.value}),"aria-label":j}):n===`date`?(0,m.jsx)(i.DatePicker,{value:typeof t.value==`string`||typeof t.value==`number`?new Date(t.value):void 0,onChange:e=>Y(t.id,{value:e?e.toISOString():``}),"aria-label":j}):n===`boolean`?(0,m.jsx)(s.Select,{options:[{label:M,value:`true`},{label:N,value:`false`}],value:String(t.value),onChange:e=>Y(t.id,{value:e===`true`}),"aria-label":j,fullWidth:!0,styles:{root:u.default.select,trigger:u.default.selectTrigger,inputBase:{root:u.default.inputBase}}}):(0,m.jsx)(r.Input,{value:typeof t.value==`boolean`?void 0:t.value??void 0,onChange:e=>Y(t.id,{value:e.target.value}),"aria-label":j,styles:{root:u.default.inputBase}})}),(0,m.jsx)(l.IconButton,{iconName:`TrashIcon`,"aria-label":P,variant:`ghost`,size:`md`,intent:`danger`,onClick:()=>Q(t.id),className:u.default.removeRule})]})},t.id)};return(0,m.jsxs)(`div`,{id:H,role:`region`,"aria-label":R,className:(0,p.default)(`wim-query-builder`,u.default.root,x),children:[(0,m.jsx)(`div`,{ref:U,"aria-live":`polite`,"aria-atomic":`true`,className:u.default.srOnly}),$(K,0,!1)]})};exports.QueryBuilder=v;
|
|
@@ -71,120 +71,93 @@ export interface QueryBuilderProps {
|
|
|
71
71
|
}
|
|
72
72
|
/**
|
|
73
73
|
* 演算子の語彙。**利用者が `QueryRule.operator` に渡すのは `value`（記号）**で、
|
|
74
|
-
* `key`
|
|
74
|
+
* `key` は翻訳の引き当てにしか使わない（文言は `components:query.builder.operators.<key>`。en / ja / pt）。以前は `operator: string` だったため
|
|
75
75
|
* `"greater_equal"` のような語を渡すと**空の Select が黙って描画された**（T124）。
|
|
76
76
|
* 型はこの表から導くので、値を足せば型も追随する（T38 と同じ形）。
|
|
77
77
|
*/
|
|
78
78
|
declare const DEFAULT_OPERATORS: {
|
|
79
79
|
readonly string: readonly [{
|
|
80
|
-
readonly label: "Equals";
|
|
81
80
|
readonly value: "=";
|
|
82
81
|
readonly key: "equal";
|
|
83
82
|
}, {
|
|
84
|
-
readonly label: "Does not equal";
|
|
85
83
|
readonly value: "!=";
|
|
86
84
|
readonly key: "not_equal";
|
|
87
85
|
}, {
|
|
88
|
-
readonly label: "Contains";
|
|
89
86
|
readonly value: "contains";
|
|
90
87
|
readonly key: "contains";
|
|
91
88
|
}, {
|
|
92
|
-
readonly label: "Starts with";
|
|
93
89
|
readonly value: "starts_with";
|
|
94
90
|
readonly key: "starts_with";
|
|
95
91
|
}, {
|
|
96
|
-
readonly label: "Ends with";
|
|
97
92
|
readonly value: "ends_with";
|
|
98
93
|
readonly key: "ends_with";
|
|
99
94
|
}, {
|
|
100
|
-
readonly label: "Is null";
|
|
101
95
|
readonly value: "is_null";
|
|
102
96
|
readonly key: "is_null";
|
|
103
97
|
}, {
|
|
104
|
-
readonly label: "Is not null";
|
|
105
98
|
readonly value: "is_not_null";
|
|
106
99
|
readonly key: "is_not_null";
|
|
107
100
|
}];
|
|
108
101
|
readonly number: readonly [{
|
|
109
|
-
readonly label: "Equals";
|
|
110
102
|
readonly value: "=";
|
|
111
103
|
readonly key: "equal";
|
|
112
104
|
}, {
|
|
113
|
-
readonly label: "Does not equal";
|
|
114
105
|
readonly value: "!=";
|
|
115
106
|
readonly key: "not_equal";
|
|
116
107
|
}, {
|
|
117
|
-
readonly label: "Greater than";
|
|
118
108
|
readonly value: ">";
|
|
119
109
|
readonly key: "greater_than";
|
|
120
110
|
}, {
|
|
121
|
-
readonly label: "Less than";
|
|
122
111
|
readonly value: "<";
|
|
123
112
|
readonly key: "less_than";
|
|
124
113
|
}, {
|
|
125
|
-
readonly label: "Greater than or equal";
|
|
126
114
|
readonly value: ">=";
|
|
127
115
|
readonly key: "greater_than_or_equal";
|
|
128
116
|
}, {
|
|
129
|
-
readonly label: "Less than or equal";
|
|
130
117
|
readonly value: "<=";
|
|
131
118
|
readonly key: "less_than_or_equal";
|
|
132
119
|
}, {
|
|
133
|
-
readonly label: "Is null";
|
|
134
120
|
readonly value: "is_null";
|
|
135
121
|
readonly key: "is_null";
|
|
136
122
|
}, {
|
|
137
|
-
readonly label: "Is not null";
|
|
138
123
|
readonly value: "is_not_null";
|
|
139
124
|
readonly key: "is_not_null";
|
|
140
125
|
}];
|
|
141
126
|
readonly date: readonly [{
|
|
142
|
-
readonly label: "Equals";
|
|
143
127
|
readonly value: "=";
|
|
144
128
|
readonly key: "equal";
|
|
145
129
|
}, {
|
|
146
|
-
readonly label: "Does not equal";
|
|
147
130
|
readonly value: "!=";
|
|
148
131
|
readonly key: "not_equal";
|
|
149
132
|
}, {
|
|
150
|
-
readonly label: "After";
|
|
151
133
|
readonly value: ">";
|
|
152
134
|
readonly key: "after";
|
|
153
135
|
}, {
|
|
154
|
-
readonly label: "Before";
|
|
155
136
|
readonly value: "<";
|
|
156
137
|
readonly key: "before";
|
|
157
138
|
}, {
|
|
158
|
-
readonly label: "After or on";
|
|
159
139
|
readonly value: ">=";
|
|
160
140
|
readonly key: "after_or_on";
|
|
161
141
|
}, {
|
|
162
|
-
readonly label: "Before or on";
|
|
163
142
|
readonly value: "<=";
|
|
164
143
|
readonly key: "before_or_on";
|
|
165
144
|
}, {
|
|
166
|
-
readonly label: "Is null";
|
|
167
145
|
readonly value: "is_null";
|
|
168
146
|
readonly key: "is_null";
|
|
169
147
|
}, {
|
|
170
|
-
readonly label: "Is not null";
|
|
171
148
|
readonly value: "is_not_null";
|
|
172
149
|
readonly key: "is_not_null";
|
|
173
150
|
}];
|
|
174
151
|
readonly boolean: readonly [{
|
|
175
|
-
readonly label: "Equals";
|
|
176
152
|
readonly value: "=";
|
|
177
153
|
readonly key: "equal";
|
|
178
154
|
}, {
|
|
179
|
-
readonly label: "Does not equal";
|
|
180
155
|
readonly value: "!=";
|
|
181
156
|
readonly key: "not_equal";
|
|
182
157
|
}, {
|
|
183
|
-
readonly label: "Is null";
|
|
184
158
|
readonly value: "is_null";
|
|
185
159
|
readonly key: "is_null";
|
|
186
160
|
}, {
|
|
187
|
-
readonly label: "Is not null";
|
|
188
161
|
readonly value: "is_not_null";
|
|
189
162
|
readonly key: "is_not_null";
|
|
190
163
|
}];
|