@destyler/switch 0.1.0 → 0.2.0-beta.5
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/{index.d.ts → index.d.mts} +3 -3
- package/dist/{index.js → index.mjs} +30 -34
- package/package.json +20 -11
|
@@ -4,7 +4,7 @@ import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
|
|
|
4
4
|
import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
|
|
5
5
|
|
|
6
6
|
//#region src/anatomy.d.ts
|
|
7
|
-
declare const anatomy: _destyler_anatomy0.AnatomyInstance<"
|
|
7
|
+
declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "label" | "control" | "thumb">;
|
|
8
8
|
//#endregion
|
|
9
9
|
//#region src/types.d.ts
|
|
10
10
|
interface CheckedChangeDetails {
|
|
@@ -141,7 +141,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
|
|
|
141
141
|
declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
|
|
142
142
|
//#endregion
|
|
143
143
|
//#region src/props.d.ts
|
|
144
|
-
declare const props: ("
|
|
145
|
-
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "
|
|
144
|
+
declare const props: ("label" | "value" | "ids" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "name" | "form" | "dir" | "id" | "getRootNode")[];
|
|
145
|
+
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "label" | "value" | "ids" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "name" | "form" | "dir" | "id" | "getRootNode">];
|
|
146
146
|
//#endregion
|
|
147
147
|
export { type MachineApi as Api, type CheckedChangeDetails, type UserDefinedContext as Context, type ElementIds, type Service, anatomy, connect, machine, props, splitProps };
|
|
@@ -80,8 +80,7 @@ function connect(state, send, normalize) {
|
|
|
80
80
|
},
|
|
81
81
|
onClick(event) {
|
|
82
82
|
if (disabled) return;
|
|
83
|
-
|
|
84
|
-
if (target === dom.getHiddenInputEl(state.context)) event.stopPropagation();
|
|
83
|
+
if (getEventTarget(event) === dom.getHiddenInputEl(state.context)) event.stopPropagation();
|
|
85
84
|
}
|
|
86
85
|
});
|
|
87
86
|
},
|
|
@@ -125,12 +124,11 @@ function connect(state, send, normalize) {
|
|
|
125
124
|
"value": state.context.value,
|
|
126
125
|
"style": visuallyHiddenStyle,
|
|
127
126
|
onFocus() {
|
|
128
|
-
const focusVisible$1 = isFocusVisible();
|
|
129
127
|
send({
|
|
130
128
|
type: "CONTEXT.SET",
|
|
131
129
|
context: {
|
|
132
130
|
focused: true,
|
|
133
|
-
focusVisible:
|
|
131
|
+
focusVisible: isFocusVisible()
|
|
134
132
|
}
|
|
135
133
|
});
|
|
136
134
|
},
|
|
@@ -172,7 +170,6 @@ const set = { checked: (ctx, checked) => {
|
|
|
172
170
|
invoke.change(ctx);
|
|
173
171
|
} };
|
|
174
172
|
function machine(userContext) {
|
|
175
|
-
const ctx = compact(userContext);
|
|
176
173
|
return createMachine({
|
|
177
174
|
id: "switch",
|
|
178
175
|
initial: "ready",
|
|
@@ -181,11 +178,11 @@ function machine(userContext) {
|
|
|
181
178
|
label: "switch",
|
|
182
179
|
value: "on",
|
|
183
180
|
disabled: false,
|
|
184
|
-
...
|
|
181
|
+
...compact(userContext),
|
|
185
182
|
fieldsetDisabled: false,
|
|
186
183
|
focusVisible: false
|
|
187
184
|
},
|
|
188
|
-
computed: { isDisabled: (ctx
|
|
185
|
+
computed: { isDisabled: (ctx) => ctx.disabled || ctx.fieldsetDisabled },
|
|
189
186
|
watch: {
|
|
190
187
|
disabled: "removeFocusIfNeeded",
|
|
191
188
|
checked: "syncInputElement"
|
|
@@ -210,25 +207,25 @@ function machine(userContext) {
|
|
|
210
207
|
}, {
|
|
211
208
|
guards: { isTrusted: (_ctx, evt) => !!evt.isTrusted },
|
|
212
209
|
activities: {
|
|
213
|
-
trackPressEvent(ctx
|
|
214
|
-
if (ctx
|
|
210
|
+
trackPressEvent(ctx) {
|
|
211
|
+
if (ctx.isDisabled) return;
|
|
215
212
|
return trackPress({
|
|
216
|
-
pointerNode: dom.getRootEl(ctx
|
|
217
|
-
keyboardNode: dom.getHiddenInputEl(ctx
|
|
213
|
+
pointerNode: dom.getRootEl(ctx),
|
|
214
|
+
keyboardNode: dom.getHiddenInputEl(ctx),
|
|
218
215
|
isValidKey: (event) => event.key === " ",
|
|
219
|
-
onPress: () => ctx
|
|
220
|
-
onPressStart: () => ctx
|
|
221
|
-
onPressEnd: () => ctx
|
|
216
|
+
onPress: () => ctx.active = false,
|
|
217
|
+
onPressStart: () => ctx.active = true,
|
|
218
|
+
onPressEnd: () => ctx.active = false
|
|
222
219
|
});
|
|
223
220
|
},
|
|
224
|
-
trackFocusVisible(ctx
|
|
225
|
-
if (ctx
|
|
226
|
-
return trackFocusVisible({ root: dom.getRootNode(ctx
|
|
221
|
+
trackFocusVisible(ctx) {
|
|
222
|
+
if (ctx.isDisabled) return;
|
|
223
|
+
return trackFocusVisible({ root: dom.getRootNode(ctx) });
|
|
227
224
|
},
|
|
228
|
-
trackFormControlState(ctx
|
|
229
|
-
return trackFormControl(dom.getHiddenInputEl(ctx
|
|
225
|
+
trackFormControlState(ctx, _evt, { send, initialContext }) {
|
|
226
|
+
return trackFormControl(dom.getHiddenInputEl(ctx), {
|
|
230
227
|
onFieldsetDisabledChange(disabled) {
|
|
231
|
-
ctx
|
|
228
|
+
ctx.fieldsetDisabled = disabled;
|
|
232
229
|
},
|
|
233
230
|
onFormReset() {
|
|
234
231
|
send({
|
|
@@ -241,26 +238,25 @@ function machine(userContext) {
|
|
|
241
238
|
}
|
|
242
239
|
},
|
|
243
240
|
actions: {
|
|
244
|
-
setContext(ctx
|
|
245
|
-
Object.assign(ctx
|
|
241
|
+
setContext(ctx, evt) {
|
|
242
|
+
Object.assign(ctx, evt.context);
|
|
246
243
|
},
|
|
247
|
-
syncInputElement(ctx
|
|
248
|
-
const inputEl = dom.getHiddenInputEl(ctx
|
|
244
|
+
syncInputElement(ctx) {
|
|
245
|
+
const inputEl = dom.getHiddenInputEl(ctx);
|
|
249
246
|
if (!inputEl) return;
|
|
250
|
-
inputEl.checked = !!ctx
|
|
247
|
+
inputEl.checked = !!ctx.checked;
|
|
251
248
|
},
|
|
252
|
-
removeFocusIfNeeded(ctx
|
|
253
|
-
if (ctx
|
|
249
|
+
removeFocusIfNeeded(ctx) {
|
|
250
|
+
if (ctx.disabled && ctx.focused) ctx.focused = false;
|
|
254
251
|
},
|
|
255
|
-
setChecked(ctx
|
|
256
|
-
set.checked(ctx
|
|
252
|
+
setChecked(ctx, evt) {
|
|
253
|
+
set.checked(ctx, evt.checked);
|
|
257
254
|
},
|
|
258
|
-
toggleChecked(ctx
|
|
259
|
-
set.checked(ctx
|
|
255
|
+
toggleChecked(ctx, _evt) {
|
|
256
|
+
set.checked(ctx, !ctx.checked);
|
|
260
257
|
},
|
|
261
|
-
dispatchChangeEvent(ctx
|
|
262
|
-
|
|
263
|
-
dispatchInputCheckedEvent(inputEl, { checked: ctx$1.checked });
|
|
258
|
+
dispatchChangeEvent(ctx) {
|
|
259
|
+
dispatchInputCheckedEvent(dom.getHiddenInputEl(ctx), { checked: ctx.checked });
|
|
264
260
|
}
|
|
265
261
|
}
|
|
266
262
|
});
|
package/package.json
CHANGED
|
@@ -1,27 +1,36 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@destyler/switch",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0-beta.5",
|
|
5
5
|
"description": "A control that allows the user to toggle between checked and not checked.",
|
|
6
6
|
"author": "Elone Hoo <elonehoo@gmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
8
|
+
"homepage": "https://github.com/destyler/destyler",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/destyler/destyler.git",
|
|
12
|
+
"directory": "packages/components/switch"
|
|
13
|
+
},
|
|
8
14
|
"exports": {
|
|
9
|
-
".": "./dist/index.
|
|
15
|
+
".": "./dist/index.mjs"
|
|
10
16
|
},
|
|
11
|
-
"main": "dist/index.
|
|
12
|
-
"module": "dist/index.
|
|
13
|
-
"types": "dist/index.d.
|
|
17
|
+
"main": "dist/index.mjs",
|
|
18
|
+
"module": "dist/index.mjs",
|
|
19
|
+
"types": "dist/index.d.mts",
|
|
14
20
|
"files": [
|
|
15
21
|
"*.d.ts",
|
|
16
22
|
"dist"
|
|
17
23
|
],
|
|
18
24
|
"dependencies": {
|
|
19
|
-
"@destyler/
|
|
20
|
-
"@destyler/
|
|
21
|
-
"@destyler/
|
|
22
|
-
"@destyler/
|
|
23
|
-
"@destyler/
|
|
24
|
-
"@destyler/
|
|
25
|
+
"@destyler/dom": "0.2.0-beta.5",
|
|
26
|
+
"@destyler/anatomy": "0.2.0-beta.5",
|
|
27
|
+
"@destyler/focus-visible": "0.2.0-beta.5",
|
|
28
|
+
"@destyler/utils": "0.2.0-beta.5",
|
|
29
|
+
"@destyler/xstate": "0.2.0-beta.5",
|
|
30
|
+
"@destyler/types": "0.2.0-beta.5"
|
|
31
|
+
},
|
|
32
|
+
"publishConfig": {
|
|
33
|
+
"access": "public"
|
|
25
34
|
},
|
|
26
35
|
"scripts": {
|
|
27
36
|
"clear": "rimraf ./dist",
|