@destyler/edit 0.2.10 → 0.2.12
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.mts +6 -9
- package/dist/index.mjs +43 -49
- package/package.json +7 -7
package/dist/index.d.mts
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import * as _destyler_anatomy0 from "@destyler/anatomy";
|
|
2
1
|
import { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from "@destyler/interact-outside";
|
|
3
|
-
import * as _destyler_xstate0 from "@destyler/xstate";
|
|
4
2
|
import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
|
|
5
3
|
import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
|
|
6
|
-
|
|
7
4
|
//#region src/anatomy.d.ts
|
|
8
|
-
declare const anatomy:
|
|
5
|
+
export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "area" | "label" | "preview" | "input" | "editTrigger" | "submitTrigger" | "cancelTrigger" | "control">;
|
|
9
6
|
//#endregion
|
|
10
7
|
//#region src/types.d.ts
|
|
11
8
|
interface ValueChangeDetails {
|
|
@@ -225,13 +222,13 @@ interface MachineApi<T extends PropTypes = PropTypes> {
|
|
|
225
222
|
}
|
|
226
223
|
//#endregion
|
|
227
224
|
//#region src/connect.d.ts
|
|
228
|
-
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
|
|
225
|
+
export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
|
|
229
226
|
//#endregion
|
|
230
227
|
//#region src/machine.d.ts
|
|
231
|
-
declare function machine(userContext: UserDefinedContext):
|
|
228
|
+
export declare function machine(userContext: UserDefinedContext): import("@destyler/xstate").Machine<MachineContext, MachineState, import("@destyler/xstate").AnyEventObject>;
|
|
232
229
|
//#endregion
|
|
233
230
|
//#region src/props.d.ts
|
|
234
|
-
declare const props: ("edit" | "id" | "ids" | "invalid" | "name" | "form" | "autoResize" | "activationMode" | "submitMode" | "selectOnFocus" | "value" | "defaultValue" | "maxLength" | "disabled" | "readOnly" | "required" | "onValueChange" | "onValueRevert" | "onValueCommit" | "onEditChange" | "placeholder" | "translations" | "finalFocusEl" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside")[];
|
|
235
|
-
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "edit" | "id" | "ids" | "invalid" | "name" | "form" | "autoResize" | "activationMode" | "submitMode" | "selectOnFocus" | "value" | "defaultValue" | "maxLength" | "disabled" | "readOnly" | "required" | "onValueChange" | "onValueRevert" | "onValueCommit" | "onEditChange" | "placeholder" | "translations" | "finalFocusEl" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
|
|
231
|
+
export declare const props: ("edit" | "id" | "ids" | "invalid" | "name" | "form" | "autoResize" | "activationMode" | "submitMode" | "selectOnFocus" | "value" | "defaultValue" | "maxLength" | "disabled" | "readOnly" | "required" | "onValueChange" | "onValueRevert" | "onValueCommit" | "onEditChange" | "placeholder" | "translations" | "finalFocusEl" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside")[];
|
|
232
|
+
export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "edit" | "id" | "ids" | "invalid" | "name" | "form" | "autoResize" | "activationMode" | "submitMode" | "selectOnFocus" | "value" | "defaultValue" | "maxLength" | "disabled" | "readOnly" | "required" | "onValueChange" | "onValueRevert" | "onValueCommit" | "onEditChange" | "placeholder" | "translations" | "finalFocusEl" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
|
|
236
233
|
//#endregion
|
|
237
|
-
export {
|
|
234
|
+
export type { ActivationMode, MachineApi as Api, UserDefinedContext as Context, EditChangeDetails, ElementIds, FocusOutsideEvent, InteractOutsideEvent, IntlTranslations, PointerDownOutsideEvent, Service, SubmitMode, ValueChangeDetails };
|
package/dist/index.mjs
CHANGED
|
@@ -4,11 +4,9 @@ import { trackInteractOutside } from "@destyler/interact-outside";
|
|
|
4
4
|
import { compact, createSplitProps, isControlled, isEqual, isPropUserProvided, resolveControllableProp, withControllableProvided } from "@destyler/utils";
|
|
5
5
|
import { createMachine } from "@destyler/xstate";
|
|
6
6
|
import { createProps } from "@destyler/types";
|
|
7
|
-
|
|
8
7
|
//#region src/anatomy.ts
|
|
9
8
|
const anatomy = createAnatomy("edit").parts("root", "area", "label", "preview", "input", "editTrigger", "submitTrigger", "cancelTrigger", "control");
|
|
10
9
|
const parts = anatomy.build();
|
|
11
|
-
|
|
12
10
|
//#endregion
|
|
13
11
|
//#region src/dom.ts
|
|
14
12
|
const dom = createScope({
|
|
@@ -27,7 +25,6 @@ const dom = createScope({
|
|
|
27
25
|
getCancelTriggerEl: (ctx) => dom.getById(ctx, dom.getCancelTriggerId(ctx)),
|
|
28
26
|
getEditTriggerEl: (ctx) => dom.getById(ctx, dom.getEditTriggerId(ctx))
|
|
29
27
|
});
|
|
30
|
-
|
|
31
28
|
//#endregion
|
|
32
29
|
//#region src/connect.ts
|
|
33
30
|
function connect(state, send, normalize) {
|
|
@@ -51,10 +48,10 @@ function connect(state, send, normalize) {
|
|
|
51
48
|
empty,
|
|
52
49
|
value,
|
|
53
50
|
valueText,
|
|
54
|
-
setValue(value
|
|
51
|
+
setValue(value) {
|
|
55
52
|
send({
|
|
56
53
|
type: "VALUE.SET",
|
|
57
|
-
value
|
|
54
|
+
value,
|
|
58
55
|
src: "setValue"
|
|
59
56
|
});
|
|
60
57
|
},
|
|
@@ -145,23 +142,23 @@ function connect(state, send, normalize) {
|
|
|
145
142
|
send("CANCEL");
|
|
146
143
|
event.preventDefault();
|
|
147
144
|
},
|
|
148
|
-
Enter(event
|
|
145
|
+
Enter(event) {
|
|
149
146
|
if (!state.context.submitOnEnter) return;
|
|
150
|
-
const { localName } = event
|
|
147
|
+
const { localName } = event.currentTarget;
|
|
151
148
|
if (localName === "textarea") {
|
|
152
|
-
if (!(isApple() ? event
|
|
149
|
+
if (!(isApple() ? event.metaKey : event.ctrlKey)) return;
|
|
153
150
|
send({
|
|
154
151
|
type: "SUBMIT",
|
|
155
152
|
src: "keydown.enter"
|
|
156
153
|
});
|
|
157
154
|
return;
|
|
158
155
|
}
|
|
159
|
-
if (localName === "input" && !event
|
|
156
|
+
if (localName === "input" && !event.shiftKey && !event.metaKey) {
|
|
160
157
|
send({
|
|
161
158
|
type: "SUBMIT",
|
|
162
159
|
src: "keydown.enter"
|
|
163
160
|
});
|
|
164
|
-
event
|
|
161
|
+
event.preventDefault();
|
|
165
162
|
}
|
|
166
163
|
}
|
|
167
164
|
}[event.key];
|
|
@@ -291,7 +288,6 @@ function connect(state, send, normalize) {
|
|
|
291
288
|
}
|
|
292
289
|
};
|
|
293
290
|
}
|
|
294
|
-
|
|
295
291
|
//#endregion
|
|
296
292
|
//#region src/machine.ts
|
|
297
293
|
const submitOnEnter = (ctx) => ["both", "enter"].includes(ctx.submitMode);
|
|
@@ -356,7 +352,7 @@ function machine(userContext) {
|
|
|
356
352
|
computed: {
|
|
357
353
|
submitOnEnter,
|
|
358
354
|
submitOnBlur,
|
|
359
|
-
isInteractive: (ctx
|
|
355
|
+
isInteractive: (ctx) => !(ctx.disabled || ctx.readOnly)
|
|
360
356
|
},
|
|
361
357
|
on: { "VALUE.SET": { actions: "setValue" } },
|
|
362
358
|
states: {
|
|
@@ -428,22 +424,22 @@ function machine(userContext) {
|
|
|
428
424
|
}
|
|
429
425
|
}, {
|
|
430
426
|
guards: {
|
|
431
|
-
isEditControlled: (ctx
|
|
427
|
+
isEditControlled: (ctx) => isControlled(ctx, "edit"),
|
|
432
428
|
isSubmitEvent: (_ctx, evt) => evt.previousEvent?.type === "SUBMIT"
|
|
433
429
|
},
|
|
434
|
-
activities: { trackInteractOutside(ctx
|
|
435
|
-
return trackInteractOutside(dom.getInputEl(ctx
|
|
430
|
+
activities: { trackInteractOutside(ctx, _evt, { send }) {
|
|
431
|
+
return trackInteractOutside(dom.getInputEl(ctx), {
|
|
436
432
|
exclude(target) {
|
|
437
|
-
return [dom.getCancelTriggerEl(ctx
|
|
433
|
+
return [dom.getCancelTriggerEl(ctx), dom.getSubmitTriggerEl(ctx)].some((el) => contains(el, target));
|
|
438
434
|
},
|
|
439
|
-
onFocusOutside: ctx
|
|
440
|
-
onPointerDownOutside: ctx
|
|
435
|
+
onFocusOutside: ctx.onFocusOutside,
|
|
436
|
+
onPointerDownOutside: ctx.onPointerDownOutside,
|
|
441
437
|
onInteractOutside(event) {
|
|
442
|
-
ctx
|
|
438
|
+
ctx.onInteractOutside?.(event);
|
|
443
439
|
if (event.defaultPrevented) return;
|
|
444
440
|
const { focusable } = event.detail;
|
|
445
441
|
send({
|
|
446
|
-
type: submitOnBlur(ctx
|
|
442
|
+
type: submitOnBlur(ctx) ? "SUBMIT" : "CANCEL",
|
|
447
443
|
src: "interact-outside",
|
|
448
444
|
focusable
|
|
449
445
|
});
|
|
@@ -451,58 +447,57 @@ function machine(userContext) {
|
|
|
451
447
|
});
|
|
452
448
|
} },
|
|
453
449
|
actions: {
|
|
454
|
-
restoreFocus(ctx
|
|
450
|
+
restoreFocus(ctx, evt) {
|
|
455
451
|
if (evt.focusable) return;
|
|
456
452
|
raf(() => {
|
|
457
|
-
(ctx
|
|
453
|
+
(ctx.finalFocusEl?.() ?? dom.getEditTriggerEl(ctx))?.focus({ preventScroll: true });
|
|
458
454
|
});
|
|
459
455
|
},
|
|
460
|
-
focusInput(ctx
|
|
456
|
+
focusInput(ctx) {
|
|
461
457
|
raf(() => {
|
|
462
|
-
const inputEl = dom.getInputEl(ctx
|
|
458
|
+
const inputEl = dom.getInputEl(ctx);
|
|
463
459
|
if (!inputEl) return;
|
|
464
|
-
if (ctx
|
|
460
|
+
if (ctx.selectOnFocus) inputEl.select();
|
|
465
461
|
else inputEl.focus({ preventScroll: true });
|
|
466
462
|
});
|
|
467
463
|
},
|
|
468
|
-
invokeOnCancel(ctx
|
|
469
|
-
ctx
|
|
464
|
+
invokeOnCancel(ctx) {
|
|
465
|
+
ctx.onValueRevert?.({ value: ctx.previousValue });
|
|
470
466
|
},
|
|
471
|
-
invokeOnSubmit(ctx
|
|
472
|
-
ctx
|
|
467
|
+
invokeOnSubmit(ctx) {
|
|
468
|
+
ctx.onValueCommit?.({ value: ctx.value });
|
|
473
469
|
},
|
|
474
|
-
invokeOnEdit(ctx
|
|
475
|
-
ctx
|
|
470
|
+
invokeOnEdit(ctx) {
|
|
471
|
+
ctx.onEditChange?.({ edit: true });
|
|
476
472
|
},
|
|
477
|
-
invokeOnPreview(ctx
|
|
478
|
-
ctx
|
|
473
|
+
invokeOnPreview(ctx) {
|
|
474
|
+
ctx.onEditChange?.({ edit: false });
|
|
479
475
|
},
|
|
480
|
-
toggleEditing(ctx
|
|
476
|
+
toggleEditing(ctx, evt, { send }) {
|
|
481
477
|
send({
|
|
482
|
-
type: ctx
|
|
478
|
+
type: ctx.edit ? "CONTROLLED.EDIT" : "CONTROLLED.PREVIEW",
|
|
483
479
|
previousEvent: evt
|
|
484
480
|
});
|
|
485
481
|
},
|
|
486
|
-
syncInputValue(ctx
|
|
487
|
-
sync.value(ctx
|
|
482
|
+
syncInputValue(ctx) {
|
|
483
|
+
sync.value(ctx);
|
|
488
484
|
},
|
|
489
|
-
setValue(ctx
|
|
490
|
-
const value = ctx
|
|
491
|
-
set.value(ctx
|
|
485
|
+
setValue(ctx, evt) {
|
|
486
|
+
const value = ctx.maxLength != null ? evt.value.slice(0, ctx.maxLength) : evt.value;
|
|
487
|
+
set.value(ctx, value);
|
|
492
488
|
},
|
|
493
|
-
setPreviousValue(ctx
|
|
494
|
-
ctx
|
|
489
|
+
setPreviousValue(ctx) {
|
|
490
|
+
ctx.previousValue = ctx.value;
|
|
495
491
|
},
|
|
496
|
-
revertValue(ctx
|
|
497
|
-
set.value(ctx
|
|
492
|
+
revertValue(ctx) {
|
|
493
|
+
set.value(ctx, ctx.previousValue);
|
|
498
494
|
},
|
|
499
|
-
blurInputIfNeeded(ctx
|
|
500
|
-
dom.getInputEl(ctx
|
|
495
|
+
blurInputIfNeeded(ctx) {
|
|
496
|
+
dom.getInputEl(ctx)?.blur();
|
|
501
497
|
}
|
|
502
498
|
}
|
|
503
499
|
});
|
|
504
500
|
}
|
|
505
|
-
|
|
506
501
|
//#endregion
|
|
507
502
|
//#region src/props.ts
|
|
508
503
|
const props = createProps()([
|
|
@@ -536,6 +531,5 @@ const props = createProps()([
|
|
|
536
531
|
"value"
|
|
537
532
|
]);
|
|
538
533
|
const splitProps = createSplitProps(props);
|
|
539
|
-
|
|
540
534
|
//#endregion
|
|
541
|
-
export { anatomy, connect, machine, props, splitProps };
|
|
535
|
+
export { anatomy, connect, machine, props, splitProps };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@destyler/edit",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.12",
|
|
5
5
|
"description": "a component that allows users to edit text in place.",
|
|
6
6
|
"author": "Elone Hoo <elonehoo@gmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -22,12 +22,12 @@
|
|
|
22
22
|
"dist"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@destyler/
|
|
26
|
-
"@destyler/
|
|
27
|
-
"@destyler/
|
|
28
|
-
"@destyler/types": "0.2.
|
|
29
|
-
"@destyler/utils": "0.2.
|
|
30
|
-
"@destyler/xstate": "0.2.
|
|
25
|
+
"@destyler/anatomy": "0.2.12",
|
|
26
|
+
"@destyler/dom": "0.2.12",
|
|
27
|
+
"@destyler/interact-outside": "0.2.12",
|
|
28
|
+
"@destyler/types": "0.2.12",
|
|
29
|
+
"@destyler/utils": "0.2.12",
|
|
30
|
+
"@destyler/xstate": "0.2.12"
|
|
31
31
|
},
|
|
32
32
|
"publishConfig": {
|
|
33
33
|
"access": "public"
|