@lobehub/ui 5.55.0 → 5.56.0
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/es/EditableText/ControlInput.mjs +2 -2
- package/es/EditableText/ControlInput.mjs.map +1 -1
- package/es/SearchBar/SearchBar.mjs +2 -2
- package/es/SearchBar/SearchBar.mjs.map +1 -1
- package/es/base-ui/Checkbox/Checkbox.d.mts +6 -2
- package/es/base-ui/Checkbox/Checkbox.mjs +2 -1
- package/es/base-ui/Checkbox/Checkbox.mjs.map +1 -1
- package/es/base-ui/Checkbox/CheckboxGroup.mjs +2 -2
- package/es/base-ui/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/base-ui/Checkbox/index.d.mts +2 -2
- package/es/base-ui/ColorPicker/ColorPicker.mjs +4 -4
- package/es/base-ui/ColorPicker/ColorPicker.mjs.map +1 -1
- package/es/base-ui/DatePicker/style.mjs +1 -0
- package/es/base-ui/DatePicker/style.mjs.map +1 -1
- package/es/base-ui/Form/components/FormGroup.mjs +13 -5
- package/es/base-ui/Form/components/FormGroup.mjs.map +1 -1
- package/es/base-ui/Form/index.d.mts +3 -0
- package/es/base-ui/Form/index.mjs +3 -0
- package/es/base-ui/Form/index.mjs.map +1 -1
- package/es/base-ui/Form/style.mjs +32 -6
- package/es/base-ui/Form/style.mjs.map +1 -1
- package/es/base-ui/FormKit/Field.d.mts +9 -0
- package/es/base-ui/FormKit/Field.mjs +167 -0
- package/es/base-ui/FormKit/Field.mjs.map +1 -0
- package/es/base-ui/FormKit/Form.mjs +96 -0
- package/es/base-ui/FormKit/Form.mjs.map +1 -0
- package/es/base-ui/FormKit/List.d.mts +34 -0
- package/es/base-ui/FormKit/List.mjs +102 -0
- package/es/base-ui/FormKit/List.mjs.map +1 -0
- package/es/base-ui/FormKit/SubmitFooter.d.mts +6 -0
- package/es/base-ui/FormKit/SubmitFooter.mjs +36 -0
- package/es/base-ui/FormKit/SubmitFooter.mjs.map +1 -0
- package/es/base-ui/FormKit/binding.mjs +23 -0
- package/es/base-ui/FormKit/binding.mjs.map +1 -0
- package/es/base-ui/FormKit/context.d.mts +7 -0
- package/es/base-ui/FormKit/context.mjs +14 -0
- package/es/base-ui/FormKit/context.mjs.map +1 -0
- package/es/base-ui/FormKit/engine/tanstack.mjs +293 -0
- package/es/base-ui/FormKit/engine/tanstack.mjs.map +1 -0
- package/es/base-ui/FormKit/engine/types.d.mts +6 -0
- package/es/base-ui/FormKit/index.d.mts +31 -0
- package/es/base-ui/FormKit/index.mjs +28 -0
- package/es/base-ui/FormKit/index.mjs.map +1 -0
- package/es/base-ui/FormKit/instance.mjs +67 -0
- package/es/base-ui/FormKit/instance.mjs.map +1 -0
- package/es/base-ui/FormKit/schema.d.mts +33 -0
- package/es/base-ui/FormKit/schema.mjs +23 -0
- package/es/base-ui/FormKit/schema.mjs.map +1 -0
- package/es/base-ui/FormKit/style.mjs +119 -0
- package/es/base-ui/FormKit/style.mjs.map +1 -0
- package/es/base-ui/FormKit/type.d.mts +122 -0
- package/es/base-ui/FormKit/useForm.d.mts +10 -0
- package/es/base-ui/FormKit/useForm.mjs +54 -0
- package/es/base-ui/FormKit/useForm.mjs.map +1 -0
- package/es/base-ui/FormKit/useStoreSelector.mjs +25 -0
- package/es/base-ui/FormKit/useStoreSelector.mjs.map +1 -0
- package/es/base-ui/FormKit/useWatch.d.mts +7 -0
- package/es/base-ui/FormKit/useWatch.mjs +12 -0
- package/es/base-ui/FormKit/useWatch.mjs.map +1 -0
- package/es/base-ui/Input/Input.d.mts +6 -2
- package/es/base-ui/Input/Input.mjs +2 -1
- package/es/base-ui/Input/Input.mjs.map +1 -1
- package/es/base-ui/Input/InputNumber.d.mts +6 -2
- package/es/base-ui/Input/InputNumber.mjs +13 -6
- package/es/base-ui/Input/InputNumber.mjs.map +1 -1
- package/es/base-ui/Input/InputPassword.d.mts +6 -2
- package/es/base-ui/Input/InputPassword.mjs +4 -3
- package/es/base-ui/Input/InputPassword.mjs.map +1 -1
- package/es/base-ui/Input/TextArea.d.mts +6 -2
- package/es/base-ui/Input/TextArea.mjs +2 -1
- package/es/base-ui/Input/TextArea.mjs.map +1 -1
- package/es/base-ui/Input/index.d.mts +5 -5
- package/es/base-ui/Input/style.d.mts +4 -1
- package/es/base-ui/Input/style.mjs +21 -8
- package/es/base-ui/Input/style.mjs.map +1 -1
- package/es/base-ui/Modal/Modal.mjs +4 -8
- package/es/base-ui/Modal/Modal.mjs.map +1 -1
- package/es/base-ui/Slider/SliderWithInput.mjs +2 -2
- package/es/base-ui/Slider/SliderWithInput.mjs.map +1 -1
- package/es/base-ui/Switch/Switch.mjs +2 -2
- package/es/base-ui/Switch/Switch.mjs.map +1 -1
- package/es/base-ui/Tree/TreeNode.mjs +2 -2
- package/es/base-ui/Tree/TreeNode.mjs.map +1 -1
- package/es/base-ui/index.d.mts +8 -8
- package/es/base-ui/index.mjs +6 -6
- package/es/chat/ChatInputArea/components/ChatInputAreaInner.mjs +2 -2
- package/es/chat/ChatInputArea/components/ChatInputAreaInner.mjs.map +1 -1
- package/es/chat/MessageInput/MessageInput.mjs +2 -2
- package/es/chat/MessageInput/MessageInput.mjs.map +1 -1
- package/es/chat/MessageModal/MessageModal.mjs +2 -2
- package/es/chat/MessageModal/MessageModal.mjs.map +1 -1
- package/es/eslint/index.d.mts +27 -3
- package/es/eslint/index.mjs +7 -2
- package/es/eslint/index.mjs.map +1 -1
- package/es/eslint/noInlineFormSchema.mjs +44 -0
- package/es/eslint/noInlineFormSchema.mjs.map +1 -0
- package/es/i18n/resources/en/form.d.mts +4 -0
- package/es/i18n/resources/en/form.mjs +4 -0
- package/es/i18n/resources/en/form.mjs.map +1 -1
- package/es/i18n/resources/zhCn/form.d.mts +4 -0
- package/es/i18n/resources/zhCn/form.mjs +4 -0
- package/es/i18n/resources/zhCn/form.mjs.map +1 -1
- package/es/node_modules/.pnpm/@eslint_core@0.17.0/node_modules/@eslint/core/dist/esm/types.d.mts +1139 -0
- package/es/node_modules/.pnpm/@types_estree@1.0.9/node_modules/@types/estree/index.d.mts +528 -0
- package/es/node_modules/.pnpm/@types_json-schema@7.0.15/node_modules/@types/json-schema/index.d.mts +201 -0
- package/es/node_modules/.pnpm/eslint@9.39.5_jiti@2.6.1_supports-color@10.2.2/node_modules/eslint/lib/types/index.d.mts +962 -0
- package/package.json +6 -1
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { createStaticStyles } from "antd-style";
|
|
2
|
+
//#region src/base-ui/FormKit/style.ts
|
|
3
|
+
const fieldKitStyles = createStaticStyles(({ css, cssVar }) => ({
|
|
4
|
+
controlFixed: css`
|
|
5
|
+
flex: none;
|
|
6
|
+
align-items: stretch;
|
|
7
|
+
`,
|
|
8
|
+
extra: css`
|
|
9
|
+
font-size: 12px;
|
|
10
|
+
color: ${cssVar.colorTextDescription};
|
|
11
|
+
`,
|
|
12
|
+
required: css`
|
|
13
|
+
margin-inline-start: 4px;
|
|
14
|
+
color: ${cssVar.colorError};
|
|
15
|
+
`
|
|
16
|
+
}));
|
|
17
|
+
const listStyles = createStaticStyles(({ css, cssVar }) => ({
|
|
18
|
+
add: css`
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
gap: 6px;
|
|
23
|
+
align-items: center;
|
|
24
|
+
|
|
25
|
+
height: 28px;
|
|
26
|
+
padding-inline: 8px;
|
|
27
|
+
border: none;
|
|
28
|
+
border-radius: ${cssVar.borderRadiusSM};
|
|
29
|
+
|
|
30
|
+
font: inherit;
|
|
31
|
+
font-size: 13px;
|
|
32
|
+
font-weight: 500;
|
|
33
|
+
color: ${cssVar.colorTextSecondary};
|
|
34
|
+
|
|
35
|
+
background: none;
|
|
36
|
+
|
|
37
|
+
transition:
|
|
38
|
+
color 150ms ${cssVar.motionEaseOut},
|
|
39
|
+
background 150ms ${cssVar.motionEaseOut};
|
|
40
|
+
|
|
41
|
+
&:hover {
|
|
42
|
+
color: ${cssVar.colorText};
|
|
43
|
+
background: ${cssVar.colorFillTertiary};
|
|
44
|
+
}
|
|
45
|
+
`,
|
|
46
|
+
cell: css`
|
|
47
|
+
min-width: 0;
|
|
48
|
+
|
|
49
|
+
/* borderless until focused or invalid, so the table reads as one surface */
|
|
50
|
+
& > *:not(:focus-within, :has([aria-invalid='true'])) {
|
|
51
|
+
border-color: transparent;
|
|
52
|
+
background: transparent;
|
|
53
|
+
box-shadow: none;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
& > *:hover:not(:focus-within, :has([aria-invalid='true'])) {
|
|
57
|
+
background: ${cssVar.colorFillTertiary};
|
|
58
|
+
}
|
|
59
|
+
`,
|
|
60
|
+
empty: css`
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: column;
|
|
63
|
+
gap: 4px;
|
|
64
|
+
align-items: center;
|
|
65
|
+
|
|
66
|
+
padding-block: 20px 16px;
|
|
67
|
+
padding-inline: 12px;
|
|
68
|
+
|
|
69
|
+
font-size: 13px;
|
|
70
|
+
color: ${cssVar.colorTextSecondary};
|
|
71
|
+
`,
|
|
72
|
+
foot: css`
|
|
73
|
+
padding: 4px;
|
|
74
|
+
`,
|
|
75
|
+
head: css`
|
|
76
|
+
display: grid;
|
|
77
|
+
gap: 4px;
|
|
78
|
+
|
|
79
|
+
padding-inline: 4px;
|
|
80
|
+
border-block-end: 1px solid ${cssVar.colorBorderSecondary};
|
|
81
|
+
|
|
82
|
+
background: ${cssVar.colorFillQuaternary};
|
|
83
|
+
`,
|
|
84
|
+
row: css`
|
|
85
|
+
display: grid;
|
|
86
|
+
gap: 4px;
|
|
87
|
+
align-items: center;
|
|
88
|
+
|
|
89
|
+
padding: 4px;
|
|
90
|
+
border-block-end: 1px solid ${cssVar.colorSplit};
|
|
91
|
+
|
|
92
|
+
& > :last-child {
|
|
93
|
+
justify-self: center;
|
|
94
|
+
}
|
|
95
|
+
`,
|
|
96
|
+
table: css`
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
|
|
99
|
+
width: 100%;
|
|
100
|
+
border: 1px solid ${cssVar.colorBorderSecondary};
|
|
101
|
+
border-radius: ${cssVar.borderRadiusLG};
|
|
102
|
+
|
|
103
|
+
background: ${cssVar.colorBgContainer};
|
|
104
|
+
`,
|
|
105
|
+
title: css`
|
|
106
|
+
padding-block: 8px;
|
|
107
|
+
padding-inline: 12px;
|
|
108
|
+
|
|
109
|
+
font-size: 11px;
|
|
110
|
+
font-weight: 600;
|
|
111
|
+
color: ${cssVar.colorTextSecondary};
|
|
112
|
+
text-transform: uppercase;
|
|
113
|
+
letter-spacing: 0.08em;
|
|
114
|
+
`
|
|
115
|
+
}));
|
|
116
|
+
//#endregion
|
|
117
|
+
export { fieldKitStyles, listStyles };
|
|
118
|
+
|
|
119
|
+
//# sourceMappingURL=style.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/FormKit/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const fieldKitStyles = createStaticStyles(({ css, cssVar }) => ({\n controlFixed: css`\n flex: none;\n align-items: stretch;\n `,\n extra: css`\n font-size: 12px;\n color: ${cssVar.colorTextDescription};\n `,\n required: css`\n margin-inline-start: 4px;\n color: ${cssVar.colorError};\n `,\n}));\n\nexport const listStyles = createStaticStyles(({ css, cssVar }) => ({\n add: css`\n cursor: pointer;\n\n display: inline-flex;\n gap: 6px;\n align-items: center;\n\n height: 28px;\n padding-inline: 8px;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n font: inherit;\n font-size: 13px;\n font-weight: 500;\n color: ${cssVar.colorTextSecondary};\n\n background: none;\n\n transition:\n color 150ms ${cssVar.motionEaseOut},\n background 150ms ${cssVar.motionEaseOut};\n\n &:hover {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillTertiary};\n }\n `,\n cell: css`\n min-width: 0;\n\n /* borderless until focused or invalid, so the table reads as one surface */\n & > *:not(:focus-within, :has([aria-invalid='true'])) {\n border-color: transparent;\n background: transparent;\n box-shadow: none;\n }\n\n & > *:hover:not(:focus-within, :has([aria-invalid='true'])) {\n background: ${cssVar.colorFillTertiary};\n }\n `,\n empty: css`\n display: flex;\n flex-direction: column;\n gap: 4px;\n align-items: center;\n\n padding-block: 20px 16px;\n padding-inline: 12px;\n\n font-size: 13px;\n color: ${cssVar.colorTextSecondary};\n `,\n foot: css`\n padding: 4px;\n `,\n head: css`\n display: grid;\n gap: 4px;\n\n padding-inline: 4px;\n border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n\n background: ${cssVar.colorFillQuaternary};\n `,\n row: css`\n display: grid;\n gap: 4px;\n align-items: center;\n\n padding: 4px;\n border-block-end: 1px solid ${cssVar.colorSplit};\n\n & > :last-child {\n justify-self: center;\n }\n `,\n table: css`\n overflow: hidden;\n\n width: 100%;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: ${cssVar.borderRadiusLG};\n\n background: ${cssVar.colorBgContainer};\n `,\n title: css`\n padding-block: 8px;\n padding-inline: 12px;\n\n font-size: 11px;\n font-weight: 600;\n color: ${cssVar.colorTextSecondary};\n text-transform: uppercase;\n letter-spacing: 0.08em;\n `,\n}));\n"],"mappings":";;AAEA,MAAa,iBAAiB,oBAAoB,EAAE,KAAK,cAAc;CACrE,cAAc,GAAG;;;;CAIjB,OAAO,GAAG;;aAEC,OAAO,qBAAqB;;CAEvC,UAAU,GAAG;;aAEF,OAAO,WAAW;;AAE/B,EAAE;AAEF,MAAa,aAAa,oBAAoB,EAAE,KAAK,cAAc;CACjE,KAAK,GAAG;;;;;;;;;;qBAUW,OAAO,eAAe;;;;;aAK9B,OAAO,mBAAmB;;;;;oBAKnB,OAAO,cAAc;yBAChB,OAAO,cAAc;;;eAG/B,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;CAG3C,MAAM,GAAG;;;;;;;;;;;oBAWS,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;;;;;;;aAUC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;CAGT,MAAM,GAAG;;;;;kCAKuB,OAAO,qBAAqB;;kBAE5C,OAAO,oBAAoB;;CAE3C,KAAK,GAAG;;;;;;kCAMwB,OAAO,WAAW;;;;;;CAMlD,OAAO,GAAG;;;;wBAIY,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;kBAEzB,OAAO,iBAAiB;;CAExC,OAAO,GAAG;;;;;;aAMC,OAAO,mBAAmB;;;;AAIvC,EAAE"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { IconProps } from "../../Icon/type.mjs";
|
|
2
|
+
import "../../Icon/index.mjs";
|
|
3
|
+
import { FormLayout, FormVariant } from "../Form/type.mjs";
|
|
4
|
+
import { ValidateOn } from "./engine/types.mjs";
|
|
5
|
+
import { FieldValidate, StandardSchema } from "./schema.mjs";
|
|
6
|
+
import { CSSProperties, FormHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
|
|
7
|
+
//#region src/base-ui/FormKit/type.d.ts
|
|
8
|
+
type Depth = [never, 0, 1, 2, 3, 4, 5];
|
|
9
|
+
type IsAny<T> = 0 extends 1 & T ? true : false;
|
|
10
|
+
type FieldPath<T, D extends number = 6> = [D] extends [never] ? string : IsAny<T> extends true ? string : T extends readonly (infer U)[] ? `${number}` | `${number}.${FieldPath<U, Depth[D]>}` : T extends object ? { [K in keyof T & string]: K | (NonNullable<T[K]> extends object ? `${K}.${FieldPath<NonNullable<T[K]>, Depth[D]>}` : never); }[keyof T & string] : never;
|
|
11
|
+
type FieldPathValue<T, P extends string> = IsAny<T> extends true ? any : P extends `${infer K}.${infer Rest}` ? K extends keyof T ? FieldPathValue<NonNullable<T[K]>, Rest> : T extends readonly (infer U)[] ? FieldPathValue<U, Rest> : unknown : P extends keyof T ? T[P] : T extends readonly (infer U)[] ? U : unknown;
|
|
12
|
+
type DeepPartial<T> = T extends object ? { [K in keyof T]?: DeepPartial<T[K]>; } : T;
|
|
13
|
+
type FormValues = Record<string, any>;
|
|
14
|
+
interface SetValueOptions {
|
|
15
|
+
asUser?: boolean;
|
|
16
|
+
}
|
|
17
|
+
interface FormValidateResult<T> {
|
|
18
|
+
errors: Partial<Record<FieldPath<T>, string>>;
|
|
19
|
+
valid: boolean;
|
|
20
|
+
}
|
|
21
|
+
interface FormInstance<T extends FormValues = FormValues> {
|
|
22
|
+
getValue: <P extends FieldPath<T>>(name: P) => FieldPathValue<T, P>;
|
|
23
|
+
getValues: () => T;
|
|
24
|
+
isDirty: () => boolean;
|
|
25
|
+
isTouched: (name: FieldPath<T>) => boolean;
|
|
26
|
+
reset: (values?: T) => void;
|
|
27
|
+
resetField: (name: FieldPath<T>) => void;
|
|
28
|
+
setErrors: (errors: Partial<Record<FieldPath<T>, string | undefined>>) => void;
|
|
29
|
+
setSchema: (schema: StandardSchema | undefined) => void;
|
|
30
|
+
setValue: <P extends FieldPath<T>>(name: P, value: FieldPathValue<T, P>, options?: SetValueOptions) => void;
|
|
31
|
+
setValues: (values: DeepPartial<T>, options?: SetValueOptions) => void;
|
|
32
|
+
submit: () => Promise<FormValidateResult<T>>;
|
|
33
|
+
subscribe: <S>(selector: (values: T) => S, callback: (selected: S) => void) => () => void;
|
|
34
|
+
validate: (names?: FieldPath<T>[]) => Promise<FormValidateResult<T>>;
|
|
35
|
+
}
|
|
36
|
+
interface UseFormOptions<T extends FormValues> {
|
|
37
|
+
initialValues?: T;
|
|
38
|
+
onSubmit?: (values: T) => unknown;
|
|
39
|
+
onValuesChange?: (changed: DeepPartial<T>, values: T) => void;
|
|
40
|
+
schema?: StandardSchema;
|
|
41
|
+
validateOn?: ValidateOn;
|
|
42
|
+
values?: T;
|
|
43
|
+
valuesChangeDebounce?: number;
|
|
44
|
+
}
|
|
45
|
+
interface FieldBinding {
|
|
46
|
+
emptyValue?: unknown;
|
|
47
|
+
getValue?: (...args: any[]) => unknown;
|
|
48
|
+
trigger?: string;
|
|
49
|
+
valueProp?: string;
|
|
50
|
+
}
|
|
51
|
+
interface FieldRenderProps<V = any> {
|
|
52
|
+
error: string | undefined;
|
|
53
|
+
name: string;
|
|
54
|
+
onBlur: () => void;
|
|
55
|
+
onChange: (value: V) => void;
|
|
56
|
+
touched: boolean;
|
|
57
|
+
validating: boolean;
|
|
58
|
+
value: V;
|
|
59
|
+
}
|
|
60
|
+
interface FormGroupItem<T extends FormValues = FormValues> {
|
|
61
|
+
children: FormFieldProps<T>[] | ReactNode;
|
|
62
|
+
collapsible?: boolean;
|
|
63
|
+
defaultActive?: boolean;
|
|
64
|
+
desc?: ReactNode;
|
|
65
|
+
extra?: ReactNode;
|
|
66
|
+
icon?: IconProps['icon'];
|
|
67
|
+
key?: string;
|
|
68
|
+
title: ReactNode;
|
|
69
|
+
variant?: FormVariant;
|
|
70
|
+
}
|
|
71
|
+
interface FormProps<T extends FormValues = FormValues> extends Omit<FormHTMLAttributes<HTMLFormElement>, 'children' | 'className' | 'onSubmit' | 'style'> {
|
|
72
|
+
activeKey?: (string | number)[];
|
|
73
|
+
children?: ReactNode;
|
|
74
|
+
className?: string;
|
|
75
|
+
classNames?: {
|
|
76
|
+
group?: string;
|
|
77
|
+
item?: string;
|
|
78
|
+
};
|
|
79
|
+
collapsible?: boolean;
|
|
80
|
+
defaultActiveKey?: (string | number)[];
|
|
81
|
+
footer?: ReactNode;
|
|
82
|
+
form: FormInstance<T>;
|
|
83
|
+
gap?: number | string;
|
|
84
|
+
itemMinWidth?: string | number;
|
|
85
|
+
items?: FormGroupItem<T>[] | FormFieldProps<T>[];
|
|
86
|
+
itemsType?: 'group' | 'flat';
|
|
87
|
+
layout?: FormLayout;
|
|
88
|
+
onCollapse?: (keys: (string | number)[]) => void;
|
|
89
|
+
ref?: Ref<HTMLFormElement>;
|
|
90
|
+
style?: CSSProperties;
|
|
91
|
+
styles?: {
|
|
92
|
+
group?: CSSProperties;
|
|
93
|
+
item?: CSSProperties;
|
|
94
|
+
};
|
|
95
|
+
variant?: FormVariant;
|
|
96
|
+
}
|
|
97
|
+
interface FormFieldProps<T extends FormValues = FormValues> extends FieldBinding {
|
|
98
|
+
avatar?: ReactNode;
|
|
99
|
+
bare?: boolean;
|
|
100
|
+
children?: ReactElement | ReactNode;
|
|
101
|
+
className?: string;
|
|
102
|
+
deps?: FieldPath<T>[];
|
|
103
|
+
desc?: ReactNode;
|
|
104
|
+
divider?: boolean;
|
|
105
|
+
extra?: ReactNode;
|
|
106
|
+
hidden?: boolean;
|
|
107
|
+
label?: ReactNode;
|
|
108
|
+
layout?: FormLayout;
|
|
109
|
+
minWidth?: string | number;
|
|
110
|
+
name?: FieldPath<T>;
|
|
111
|
+
render?: (field: FieldRenderProps) => ReactNode;
|
|
112
|
+
required?: boolean | string;
|
|
113
|
+
style?: CSSProperties;
|
|
114
|
+
tag?: string;
|
|
115
|
+
validate?: FieldValidate;
|
|
116
|
+
validateDebounce?: number;
|
|
117
|
+
validateOn?: ValidateOn;
|
|
118
|
+
variant?: FormVariant;
|
|
119
|
+
}
|
|
120
|
+
//#endregion
|
|
121
|
+
export { DeepPartial, FieldBinding, FieldPath, FieldPathValue, FieldRenderProps, type FieldValidate, FormFieldProps, FormGroupItem, FormInstance, FormProps, FormValidateResult, FormValues, SetValueOptions, type StandardSchema, UseFormOptions };
|
|
122
|
+
//# sourceMappingURL=type.d.mts.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { InferSchemaInput, StandardSchema } from "./schema.mjs";
|
|
2
|
+
import { FormInstance, FormValues, UseFormOptions } from "./type.mjs";
|
|
3
|
+
//#region src/base-ui/FormKit/useForm.d.ts
|
|
4
|
+
declare function useForm<S extends StandardSchema<FormValues>>(options: UseFormOptions<InferSchemaInput<S>> & {
|
|
5
|
+
schema: S;
|
|
6
|
+
}): FormInstance<InferSchemaInput<S>>;
|
|
7
|
+
declare function useForm<T extends FormValues = FormValues>(options?: UseFormOptions<T>): FormInstance<T>;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { useForm };
|
|
10
|
+
//# sourceMappingURL=useForm.d.mts.map
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createFormInstance, getIn, getInternals, leafPaths, setIn } from "./instance.mjs";
|
|
3
|
+
import { useEffect, useRef, useState } from "react";
|
|
4
|
+
//#region src/base-ui/FormKit/useForm.ts
|
|
5
|
+
function useForm(options = {}) {
|
|
6
|
+
const [form] = useState(() => createFormInstance({
|
|
7
|
+
initialValues: options.initialValues ?? options.values ?? {},
|
|
8
|
+
schema: options.schema,
|
|
9
|
+
validateOn: options.validateOn ?? "auto"
|
|
10
|
+
}));
|
|
11
|
+
const latest = useRef(options);
|
|
12
|
+
latest.current = options;
|
|
13
|
+
getInternals(form).onSubmit = (values) => latest.current.onSubmit?.(values);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
const { engine } = getInternals(form);
|
|
16
|
+
const pending = /* @__PURE__ */ new Set();
|
|
17
|
+
let timer;
|
|
18
|
+
const flush = () => {
|
|
19
|
+
const changed = {};
|
|
20
|
+
for (const path of pending) setIn(changed, path, engine.getValue(path));
|
|
21
|
+
pending.clear();
|
|
22
|
+
latest.current.onValuesChange?.(changed, engine.getValues());
|
|
23
|
+
};
|
|
24
|
+
const off = engine.onValueChange(({ path, source }) => {
|
|
25
|
+
if (source !== "user" || !latest.current.onValuesChange) return;
|
|
26
|
+
pending.add(path);
|
|
27
|
+
const debounce = latest.current.valuesChangeDebounce ?? 0;
|
|
28
|
+
if (debounce <= 0) {
|
|
29
|
+
flush();
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
clearTimeout(timer);
|
|
33
|
+
timer = setTimeout(flush, debounce);
|
|
34
|
+
});
|
|
35
|
+
return () => {
|
|
36
|
+
off();
|
|
37
|
+
clearTimeout(timer);
|
|
38
|
+
};
|
|
39
|
+
}, [form]);
|
|
40
|
+
const { values } = options;
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
if (!values) return;
|
|
43
|
+
const { engine } = getInternals(form);
|
|
44
|
+
for (const path of leafPaths(values)) {
|
|
45
|
+
const next = getIn(values, path);
|
|
46
|
+
if (!engine.isTouched(path) && !Object.is(engine.getValue(path), next)) engine.setValue(path, next, "api");
|
|
47
|
+
}
|
|
48
|
+
}, [form, values]);
|
|
49
|
+
return form;
|
|
50
|
+
}
|
|
51
|
+
//#endregion
|
|
52
|
+
export { useForm };
|
|
53
|
+
|
|
54
|
+
//# sourceMappingURL=useForm.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useForm.mjs","names":[],"sources":["../../../src/base-ui/FormKit/useForm.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { createFormInstance, getIn, getInternals, leafPaths, setIn } from './instance';\nimport type { InferSchemaInput, StandardSchema } from './schema';\nimport type { DeepPartial, FormInstance, FormValues, UseFormOptions } from './type';\n\nexport function useForm<S extends StandardSchema<FormValues>>(\n options: UseFormOptions<InferSchemaInput<S>> & { schema: S },\n): FormInstance<InferSchemaInput<S>>;\nexport function useForm<T extends FormValues = FormValues>(\n options?: UseFormOptions<T>,\n): FormInstance<T>;\nexport function useForm<T extends FormValues = FormValues>(\n options: UseFormOptions<T> = {},\n): FormInstance<T> {\n const [form] = useState(() =>\n createFormInstance<T>({\n initialValues: options.initialValues ?? options.values ?? {},\n schema: options.schema,\n validateOn: options.validateOn ?? 'auto',\n }),\n );\n const latest = useRef(options);\n latest.current = options;\n getInternals(form).onSubmit = (values) => latest.current.onSubmit?.(values as T);\n\n useEffect(() => {\n const { engine } = getInternals(form);\n const pending = new Set<string>();\n let timer: ReturnType<typeof setTimeout> | undefined;\n\n const flush = () => {\n const changed: Record<string, unknown> = {};\n for (const path of pending) setIn(changed, path, engine.getValue(path));\n pending.clear();\n latest.current.onValuesChange?.(changed as DeepPartial<T>, engine.getValues() as T);\n };\n\n const off = engine.onValueChange(({ path, source }) => {\n if (source !== 'user' || !latest.current.onValuesChange) return;\n pending.add(path);\n const debounce = latest.current.valuesChangeDebounce ?? 0;\n if (debounce <= 0) {\n flush();\n return;\n }\n clearTimeout(timer);\n timer = setTimeout(flush, debounce);\n });\n\n return () => {\n off();\n clearTimeout(timer);\n };\n }, [form]);\n\n const { values } = options;\n useEffect(() => {\n if (!values) return;\n const { engine } = getInternals(form);\n for (const path of leafPaths(values)) {\n const next = getIn(values, path);\n if (!engine.isTouched(path) && !Object.is(engine.getValue(path), next))\n engine.setValue(path, next, 'api');\n }\n }, [form, values]);\n\n return form;\n}\n"],"mappings":";;;;AAcA,SAAgB,QACd,UAA6B,CAAC,GACb;CACjB,MAAM,CAAC,QAAQ,eACb,mBAAsB;EACpB,eAAe,QAAQ,iBAAiB,QAAQ,UAAU,CAAC;EAC3D,QAAQ,QAAQ;EAChB,YAAY,QAAQ,cAAc;CACpC,CAAC,CACH;CACA,MAAM,SAAS,OAAO,OAAO;CAC7B,OAAO,UAAU;CACjB,aAAa,IAAI,CAAC,CAAC,YAAY,WAAW,OAAO,QAAQ,WAAW,MAAW;CAE/E,gBAAgB;EACd,MAAM,EAAE,WAAW,aAAa,IAAI;EACpC,MAAM,0BAAU,IAAI,IAAY;EAChC,IAAI;EAEJ,MAAM,cAAc;GAClB,MAAM,UAAmC,CAAC;GAC1C,KAAK,MAAM,QAAQ,SAAS,MAAM,SAAS,MAAM,OAAO,SAAS,IAAI,CAAC;GACtE,QAAQ,MAAM;GACd,OAAO,QAAQ,iBAAiB,SAA2B,OAAO,UAAU,CAAM;EACpF;EAEA,MAAM,MAAM,OAAO,eAAe,EAAE,MAAM,aAAa;GACrD,IAAI,WAAW,UAAU,CAAC,OAAO,QAAQ,gBAAgB;GACzD,QAAQ,IAAI,IAAI;GAChB,MAAM,WAAW,OAAO,QAAQ,wBAAwB;GACxD,IAAI,YAAY,GAAG;IACjB,MAAM;IACN;GACF;GACA,aAAa,KAAK;GAClB,QAAQ,WAAW,OAAO,QAAQ;EACpC,CAAC;EAED,aAAa;GACX,IAAI;GACJ,aAAa,KAAK;EACpB;CACF,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,EAAE,WAAW;CACnB,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,EAAE,WAAW,aAAa,IAAI;EACpC,KAAK,MAAM,QAAQ,UAAU,MAAM,GAAG;GACpC,MAAM,OAAO,MAAM,QAAQ,IAAI;GAC/B,IAAI,CAAC,OAAO,UAAU,IAAI,KAAK,CAAC,OAAO,GAAG,OAAO,SAAS,IAAI,GAAG,IAAI,GACnE,OAAO,SAAS,MAAM,MAAM,KAAK;EACrC;CACF,GAAG,CAAC,MAAM,MAAM,CAAC;CAEjB,OAAO;AACT"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { useCallback, useRef, useSyncExternalStore } from "react";
|
|
2
|
+
//#region src/base-ui/FormKit/useStoreSelector.ts
|
|
3
|
+
const shallowEqual = (a, b) => {
|
|
4
|
+
if (Object.is(a, b)) return true;
|
|
5
|
+
if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
|
|
6
|
+
const keysA = Object.keys(a);
|
|
7
|
+
if (keysA.length !== Object.keys(b).length) return false;
|
|
8
|
+
return keysA.every((key) => Object.is(a[key], b[key]));
|
|
9
|
+
};
|
|
10
|
+
const useStoreSelector = (engine, select) => {
|
|
11
|
+
const selectRef = useRef(select);
|
|
12
|
+
selectRef.current = select;
|
|
13
|
+
const cache = useRef(null);
|
|
14
|
+
const getSnapshot = useCallback(() => {
|
|
15
|
+
const next = selectRef.current(engine);
|
|
16
|
+
if (cache.current && shallowEqual(cache.current.value, next)) return cache.current.value;
|
|
17
|
+
cache.current = { value: next };
|
|
18
|
+
return next;
|
|
19
|
+
}, [engine]);
|
|
20
|
+
return useSyncExternalStore(engine.subscribe, getSnapshot, getSnapshot);
|
|
21
|
+
};
|
|
22
|
+
//#endregion
|
|
23
|
+
export { shallowEqual, useStoreSelector };
|
|
24
|
+
|
|
25
|
+
//# sourceMappingURL=useStoreSelector.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStoreSelector.mjs","names":[],"sources":["../../../src/base-ui/FormKit/useStoreSelector.ts"],"sourcesContent":["import { useCallback, useRef, useSyncExternalStore } from 'react';\n\nimport type { FormEngine } from './engine/types';\n\nexport const shallowEqual = (a: unknown, b: unknown) => {\n if (Object.is(a, b)) return true;\n if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) return false;\n const keysA = Object.keys(a);\n if (keysA.length !== Object.keys(b).length) return false;\n return keysA.every((key) => Object.is((a as any)[key], (b as any)[key]));\n};\n\nexport const useStoreSelector = <S>(engine: FormEngine, select: (engine: FormEngine) => S): S => {\n const selectRef = useRef(select);\n selectRef.current = select;\n const cache = useRef<{ value: S } | null>(null);\n\n const getSnapshot = useCallback(() => {\n const next = selectRef.current(engine);\n if (cache.current && shallowEqual(cache.current.value, next)) return cache.current.value;\n cache.current = { value: next };\n return next;\n }, [engine]);\n\n return useSyncExternalStore(engine.subscribe, getSnapshot, getSnapshot);\n};\n"],"mappings":";;AAIA,MAAa,gBAAgB,GAAY,MAAe;CACtD,IAAI,OAAO,GAAG,GAAG,CAAC,GAAG,OAAO;CAC5B,IAAI,OAAO,MAAM,YAAY,OAAO,MAAM,YAAY,MAAM,QAAQ,MAAM,MAAM,OAAO;CACvF,MAAM,QAAQ,OAAO,KAAK,CAAC;CAC3B,IAAI,MAAM,WAAW,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,OAAO;CACnD,OAAO,MAAM,OAAO,QAAQ,OAAO,GAAI,EAAU,MAAO,EAAU,IAAI,CAAC;AACzE;AAEA,MAAa,oBAAuB,QAAoB,WAAyC;CAC/F,MAAM,YAAY,OAAO,MAAM;CAC/B,UAAU,UAAU;CACpB,MAAM,QAAQ,OAA4B,IAAI;CAE9C,MAAM,cAAc,kBAAkB;EACpC,MAAM,OAAO,UAAU,QAAQ,MAAM;EACrC,IAAI,MAAM,WAAW,aAAa,MAAM,QAAQ,OAAO,IAAI,GAAG,OAAO,MAAM,QAAQ;EACnF,MAAM,UAAU,EAAE,OAAO,KAAK;EAC9B,OAAO;CACT,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO,qBAAqB,OAAO,WAAW,aAAa,WAAW;AACxE"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FieldPath, FieldPathValue, FormInstance, FormValues } from "./type.mjs";
|
|
2
|
+
//#region src/base-ui/FormKit/useWatch.d.ts
|
|
3
|
+
declare function useWatch<T extends FormValues, P extends FieldPath<T>>(form: FormInstance<T>, name: P): FieldPathValue<T, P>;
|
|
4
|
+
declare function useWatch<T extends FormValues, S>(form: FormInstance<T>, selector: (values: T) => S): S;
|
|
5
|
+
//#endregion
|
|
6
|
+
export { useWatch };
|
|
7
|
+
//# sourceMappingURL=useWatch.d.mts.map
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { getInternals } from "./instance.mjs";
|
|
3
|
+
import { useStoreSelector } from "./useStoreSelector.mjs";
|
|
4
|
+
//#region src/base-ui/FormKit/useWatch.ts
|
|
5
|
+
function useWatch(form, nameOrSelector) {
|
|
6
|
+
const { engine } = getInternals(form);
|
|
7
|
+
return useStoreSelector(engine, (e) => typeof nameOrSelector === "function" ? nameOrSelector(e.getValues()) : e.getValue(nameOrSelector));
|
|
8
|
+
}
|
|
9
|
+
//#endregion
|
|
10
|
+
export { useWatch };
|
|
11
|
+
|
|
12
|
+
//# sourceMappingURL=useWatch.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWatch.mjs","names":[],"sources":["../../../src/base-ui/FormKit/useWatch.ts"],"sourcesContent":["'use client';\n\nimport { getInternals } from './instance';\nimport type { FieldPath, FieldPathValue, FormInstance, FormValues } from './type';\nimport { useStoreSelector } from './useStoreSelector';\n\nexport function useWatch<T extends FormValues, P extends FieldPath<T>>(\n form: FormInstance<T>,\n name: P,\n): FieldPathValue<T, P>;\nexport function useWatch<T extends FormValues, S>(\n form: FormInstance<T>,\n selector: (values: T) => S,\n): S;\nexport function useWatch<T extends FormValues>(\n form: FormInstance<T>,\n nameOrSelector: string | ((values: T) => unknown),\n) {\n const { engine } = getInternals(form);\n return useStoreSelector(engine, (e) =>\n typeof nameOrSelector === 'function'\n ? nameOrSelector(e.getValues() as T)\n : e.getValue(nameOrSelector),\n );\n}\n"],"mappings":";;;;AAcA,SAAgB,SACd,MACA,gBACA;CACA,MAAM,EAAE,WAAW,aAAa,IAAI;CACpC,OAAO,iBAAiB,SAAS,MAC/B,OAAO,mBAAmB,aACtB,eAAe,EAAE,UAAU,CAAM,IACjC,EAAE,SAAS,cAAc,CAC/B;AACF"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { InputProps } from "./type.mjs";
|
|
2
2
|
//#region src/base-ui/Input/Input.d.ts
|
|
3
|
-
declare const
|
|
3
|
+
declare const _default: import("react").NamedExoticComponent<InputProps> & {
|
|
4
|
+
formBinding: {
|
|
5
|
+
readonly emptyValue: "";
|
|
6
|
+
};
|
|
7
|
+
};
|
|
4
8
|
//#endregion
|
|
5
|
-
export {
|
|
9
|
+
export { _default as default };
|
|
6
10
|
//# sourceMappingURL=Input.d.mts.map
|
|
@@ -63,7 +63,8 @@ const Input$1 = memo(({ ref, className, classNames, styles: customStyles, style,
|
|
|
63
63
|
});
|
|
64
64
|
});
|
|
65
65
|
Input$1.displayName = "Input";
|
|
66
|
+
var Input_default = Object.assign(Input$1, { formBinding: { emptyValue: "" } });
|
|
66
67
|
//#endregion
|
|
67
|
-
export {
|
|
68
|
+
export { Input_default as default };
|
|
68
69
|
|
|
69
70
|
//# sourceMappingURL=Input.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.mjs","names":["Input","BaseInput"],"sources":["../../../src/base-ui/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo, useRef, useState } from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, styles } from './style';\nimport type { InputProps } from './type';\n\nconst hasText = (value: unknown) =>\n value !== undefined && value !== null && String(value).length > 0;\n\nconst Input = memo<InputProps>(\n ({\n ref,\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n size = 'middle',\n prefix,\n suffix,\n disabled,\n readOnly,\n allowClear,\n onClear,\n onPressEnter,\n onKeyDown,\n onChange,\n value,\n defaultValue,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([ref, inputRef]);\n const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));\n const isFilled = value === undefined ? filled : hasText(value);\n const showClear = allowClear && isFilled && !disabled && !readOnly;\n\n return (\n <div\n className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n data-disabled={disabled ? '' : undefined}\n style={style}\n >\n {prefix && (\n <span className={cx(styles.slot, classNames?.prefix)} style={customStyles?.prefix}>\n {prefix}\n </span>\n )}\n <BaseInput\n className={cx(styles.input, classNames?.input)}\n defaultValue={defaultValue}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n style={customStyles?.input}\n value={value}\n onChange={(event) => {\n setFilled(event.currentTarget.value.length > 0);\n onChange?.(event);\n }}\n onKeyDown={(event) => {\n if (isPressEnter(event)) onPressEnter?.(event);\n onKeyDown?.(event);\n }}\n {...rest}\n />\n {showClear && (\n <ClearButton\n onClear={() => {\n clearNativeValue(inputRef.current);\n onClear?.();\n }}\n />\n )}\n {suffix && (\n <span className={cx(styles.slot, classNames?.suffix)} style={customStyles?.suffix}>\n {suffix}\n </span>\n )}\n </div>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,WAAW,UACf,UAAU,KAAA,KAAa,UAAU,QAAQ,OAAO,KAAK,CAAC,CAAC,SAAS;AAElE,MAAMA,UAAQ,MACX,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,QACA,QACA,UACA,UACA,YACA,SACA,cACA,WACA,UACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,aAAa,CAAC,KAAK,QAAQ,CAAC;CAC9C,MAAM,CAAC,QAAQ,aAAa,eAAe,QAAQ,SAAS,YAAY,CAAC;CACzE,MAAM,WAAW,UAAU,KAAA,IAAY,SAAS,QAAQ,KAAK;CAC7D,MAAM,YAAY,cAAc,YAAY,CAAC,YAAY,CAAC;CAE1D,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,aAAa;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,SAAS;EAC/E,iBAAe,WAAW,KAAK,KAAA;EACxB;EAHT,UAAA;GAKG,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA;GAER,oBAACC,OAAD;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IAC/B;IACJ;IACA;IACV,KAAK;IACL,OAAO,cAAc;IACd;IACP,WAAW,UAAU;KACnB,UAAU,MAAM,cAAc,MAAM,SAAS,CAAC;KAC9C,WAAW,KAAK;IAClB;IACA,YAAY,UAAU;KACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;KAC7C,YAAY,KAAK;IACnB;IACA,GAAI;GACL,CAAA;GACA,aACC,oBAAC,aAAD,EACE,eAAe;IACb,iBAAiB,SAAS,OAAO;IACjC,UAAU;GACZ,EACD,CAAA;GAEF,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA;EAEL;;AAET,CACF;AAEA,QAAM,cAAc"}
|
|
1
|
+
{"version":3,"file":"Input.mjs","names":["Input","BaseInput"],"sources":["../../../src/base-ui/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo, useRef, useState } from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, styles } from './style';\nimport type { InputProps } from './type';\n\nconst hasText = (value: unknown) =>\n value !== undefined && value !== null && String(value).length > 0;\n\nconst Input = memo<InputProps>(\n ({\n ref,\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n size = 'middle',\n prefix,\n suffix,\n disabled,\n readOnly,\n allowClear,\n onClear,\n onPressEnter,\n onKeyDown,\n onChange,\n value,\n defaultValue,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([ref, inputRef]);\n const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));\n const isFilled = value === undefined ? filled : hasText(value);\n const showClear = allowClear && isFilled && !disabled && !readOnly;\n\n return (\n <div\n className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n data-disabled={disabled ? '' : undefined}\n style={style}\n >\n {prefix && (\n <span className={cx(styles.slot, classNames?.prefix)} style={customStyles?.prefix}>\n {prefix}\n </span>\n )}\n <BaseInput\n className={cx(styles.input, classNames?.input)}\n defaultValue={defaultValue}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n style={customStyles?.input}\n value={value}\n onChange={(event) => {\n setFilled(event.currentTarget.value.length > 0);\n onChange?.(event);\n }}\n onKeyDown={(event) => {\n if (isPressEnter(event)) onPressEnter?.(event);\n onKeyDown?.(event);\n }}\n {...rest}\n />\n {showClear && (\n <ClearButton\n onClear={() => {\n clearNativeValue(inputRef.current);\n onClear?.();\n }}\n />\n )}\n {suffix && (\n <span className={cx(styles.slot, classNames?.suffix)} style={customStyles?.suffix}>\n {suffix}\n </span>\n )}\n </div>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Object.assign(Input, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,WAAW,UACf,UAAU,KAAA,KAAa,UAAU,QAAQ,OAAO,KAAK,CAAC,CAAC,SAAS;AAElE,MAAMA,UAAQ,MACX,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,QACA,QACA,UACA,UACA,YACA,SACA,cACA,WACA,UACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,aAAa,CAAC,KAAK,QAAQ,CAAC;CAC9C,MAAM,CAAC,QAAQ,aAAa,eAAe,QAAQ,SAAS,YAAY,CAAC;CACzE,MAAM,WAAW,UAAU,KAAA,IAAY,SAAS,QAAQ,KAAK;CAC7D,MAAM,YAAY,cAAc,YAAY,CAAC,YAAY,CAAC;CAE1D,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,aAAa;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,SAAS;EAC/E,iBAAe,WAAW,KAAK,KAAA;EACxB;EAHT,UAAA;GAKG,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA;GAER,oBAACC,OAAD;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IAC/B;IACJ;IACA;IACV,KAAK;IACL,OAAO,cAAc;IACd;IACP,WAAW,UAAU;KACnB,UAAU,MAAM,cAAc,MAAM,SAAS,CAAC;KAC9C,WAAW,KAAK;IAClB;IACA,YAAY,UAAU;KACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;KAC7C,YAAY,KAAK;IACnB;IACA,GAAI;GACL,CAAA;GACA,aACC,oBAAC,aAAD,EACE,eAAe;IACb,iBAAiB,SAAS,OAAO;IACjC,UAAU;GACZ,EACD,CAAA;GAEF,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA;EAEL;;AAET,CACF;AAEA,QAAM,cAAc;AAEpB,IAAA,gBAAe,OAAO,OAAOD,SAAO,EAAE,aAAa,EAAE,YAAY,GAAG,EAAW,CAAC"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { InputNumberProps } from "./type.mjs";
|
|
2
2
|
//#region src/base-ui/Input/InputNumber.d.ts
|
|
3
|
-
declare const
|
|
3
|
+
declare const _default: import("react").NamedExoticComponent<InputNumberProps> & {
|
|
4
|
+
formBinding: {
|
|
5
|
+
readonly emptyValue: null;
|
|
6
|
+
};
|
|
7
|
+
};
|
|
4
8
|
//#endregion
|
|
5
|
-
export {
|
|
9
|
+
export { _default as default };
|
|
6
10
|
//# sourceMappingURL=InputNumber.d.mts.map
|
|
@@ -8,9 +8,15 @@ import { cx, useThemeMode } from "antd-style";
|
|
|
8
8
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
|
9
9
|
import { NumberField } from "@base-ui/react/number-field";
|
|
10
10
|
//#region src/base-ui/Input/InputNumber.tsx
|
|
11
|
+
const controlIconSize = {
|
|
12
|
+
large: 13,
|
|
13
|
+
middle: 12,
|
|
14
|
+
small: 10
|
|
15
|
+
};
|
|
11
16
|
const InputNumber = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", controls = true, changeOnWheel, onChange, placeholder, format, precision, prefix, suffix, onPressEnter, ...rest }) => {
|
|
12
17
|
const { isDarkMode } = useThemeMode();
|
|
13
18
|
const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
|
|
19
|
+
const controlClassName = cx(styles.numberControl, size === "small" && styles.numberControlSmall, size === "large" && styles.numberControlLarge);
|
|
14
20
|
const mergedFormat = precision === void 0 ? format : {
|
|
15
21
|
...format,
|
|
16
22
|
maximumFractionDigits: precision,
|
|
@@ -46,18 +52,18 @@ const InputNumber = memo(({ ref, className, classNames, styles: customStyles, st
|
|
|
46
52
|
children: suffix
|
|
47
53
|
}),
|
|
48
54
|
controls && /* @__PURE__ */ jsxs("div", {
|
|
49
|
-
className: styles.numberControls,
|
|
55
|
+
className: cx(styles.numberControls, size === "small" && styles.numberControlsSmall),
|
|
50
56
|
children: [/* @__PURE__ */ jsx(NumberField.Increment, {
|
|
51
|
-
className:
|
|
57
|
+
className: controlClassName,
|
|
52
58
|
children: /* @__PURE__ */ jsx(Icon, {
|
|
53
59
|
icon: ChevronUp,
|
|
54
|
-
size:
|
|
60
|
+
size: controlIconSize[size]
|
|
55
61
|
})
|
|
56
62
|
}), /* @__PURE__ */ jsx(NumberField.Decrement, {
|
|
57
|
-
className:
|
|
63
|
+
className: controlClassName,
|
|
58
64
|
children: /* @__PURE__ */ jsx(Icon, {
|
|
59
65
|
icon: ChevronDown,
|
|
60
|
-
size:
|
|
66
|
+
size: controlIconSize[size]
|
|
61
67
|
})
|
|
62
68
|
})]
|
|
63
69
|
})
|
|
@@ -65,7 +71,8 @@ const InputNumber = memo(({ ref, className, classNames, styles: customStyles, st
|
|
|
65
71
|
});
|
|
66
72
|
});
|
|
67
73
|
InputNumber.displayName = "InputNumber";
|
|
74
|
+
var InputNumber_default = Object.assign(InputNumber, { formBinding: { emptyValue: null } });
|
|
68
75
|
//#endregion
|
|
69
|
-
export {
|
|
76
|
+
export { InputNumber_default as default };
|
|
70
77
|
|
|
71
78
|
//# sourceMappingURL=InputNumber.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputNumber.mjs","names":[],"sources":["../../../src/base-ui/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField } from '@base-ui/react/number-field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, styles } from './style';\nimport type { InputNumberProps } from './type';\n\nconst InputNumber = memo<InputNumberProps>(\n ({\n ref,\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n size = 'middle',\n controls = true,\n changeOnWheel,\n onChange,\n placeholder,\n format,\n precision,\n prefix,\n suffix,\n onPressEnter,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n const mergedFormat =\n precision === undefined\n ? format\n : { ...format, maximumFractionDigits: precision, minimumFractionDigits: precision };\n\n return (\n <NumberField.Root\n allowWheelScrub={changeOnWheel}\n className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n format={mergedFormat}\n style={style}\n onValueChange={onChange}\n {...rest}\n >\n {prefix && <span className={styles.slot}>{prefix}</span>}\n <NumberField.Input\n className={cx(styles.input, styles.numberInput, classNames?.input)}\n placeholder={placeholder}\n ref={ref}\n style={customStyles?.input}\n onKeyDown={(event) => {\n if (isPressEnter(event)) onPressEnter?.(event);\n }}\n />\n {suffix && <span className={styles.slot}>{suffix}</span>}\n {controls && (\n <div
|
|
1
|
+
{"version":3,"file":"InputNumber.mjs","names":[],"sources":["../../../src/base-ui/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField } from '@base-ui/react/number-field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, styles } from './style';\nimport type { InputNumberProps } from './type';\n\nconst controlIconSize = { large: 13, middle: 12, small: 10 } as const;\n\nconst InputNumber = memo<InputNumberProps>(\n ({\n ref,\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n size = 'middle',\n controls = true,\n changeOnWheel,\n onChange,\n placeholder,\n format,\n precision,\n prefix,\n suffix,\n onPressEnter,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n const controlClassName = cx(\n styles.numberControl,\n size === 'small' && styles.numberControlSmall,\n size === 'large' && styles.numberControlLarge,\n );\n const mergedFormat =\n precision === undefined\n ? format\n : { ...format, maximumFractionDigits: precision, minimumFractionDigits: precision };\n\n return (\n <NumberField.Root\n allowWheelScrub={changeOnWheel}\n className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n format={mergedFormat}\n style={style}\n onValueChange={onChange}\n {...rest}\n >\n {prefix && <span className={styles.slot}>{prefix}</span>}\n <NumberField.Input\n className={cx(styles.input, styles.numberInput, classNames?.input)}\n placeholder={placeholder}\n ref={ref}\n style={customStyles?.input}\n onKeyDown={(event) => {\n if (isPressEnter(event)) onPressEnter?.(event);\n }}\n />\n {suffix && <span className={styles.slot}>{suffix}</span>}\n {controls && (\n <div\n className={cx(styles.numberControls, size === 'small' && styles.numberControlsSmall)}\n >\n <NumberField.Increment className={controlClassName}>\n <Icon icon={ChevronUp} size={controlIconSize[size]} />\n </NumberField.Increment>\n <NumberField.Decrement className={controlClassName}>\n <Icon icon={ChevronDown} size={controlIconSize[size]} />\n </NumberField.Decrement>\n </div>\n )}\n </NumberField.Root>\n );\n },\n);\n\nInputNumber.displayName = 'InputNumber';\n\nexport default Object.assign(InputNumber, { formBinding: { emptyValue: null } as const });\n"],"mappings":";;;;;;;;;;AAaA,MAAM,kBAAkB;CAAE,OAAO;CAAI,QAAQ;CAAI,OAAO;AAAG;AAE3D,MAAM,cAAc,MACjB,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,WAAW,MACX,eACA,UACA,aACA,QACA,WACA,QACA,QACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,mBAAmB,GACvB,OAAO,eACP,SAAS,WAAW,OAAO,oBAC3B,SAAS,WAAW,OAAO,kBAC7B;CACA,MAAM,eACJ,cAAc,KAAA,IACV,SACA;EAAE,GAAG;EAAQ,uBAAuB;EAAW,uBAAuB;CAAU;CAEtF,OACE,qBAAC,YAAY,MAAb;EACE,iBAAiB;EACjB,WAAW,GAAG,aAAa;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,SAAS;EAC/E,QAAQ;EACD;EACP,eAAe;EACf,GAAI;EANN,UAAA;GAQG,UAAU,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,UAAA;GAAa,CAAA;GACvD,oBAAC,YAAY,OAAb;IACE,WAAW,GAAG,OAAO,OAAO,OAAO,aAAa,YAAY,KAAK;IACpD;IACR;IACL,OAAO,cAAc;IACrB,YAAY,UAAU;KACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;IAC/C;GACD,CAAA;GACA,UAAU,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,UAAA;GAAa,CAAA;GACtD,YACC,qBAAC,OAAD;IACE,WAAW,GAAG,OAAO,gBAAgB,SAAS,WAAW,OAAO,mBAAmB;IADrF,UAAA,CAGE,oBAAC,YAAY,WAAb;KAAuB,WAAW;KAChC,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAW,MAAM,gBAAgB;KAAQ,CAAA;IAChC,CAAA,GACvB,oBAAC,YAAY,WAAb;KAAuB,WAAW;KAChC,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAa,MAAM,gBAAgB;KAAQ,CAAA;IAClC,CAAA,CACpB;;EAES;;AAEtB,CACF;AAEA,YAAY,cAAc;AAE1B,IAAA,sBAAe,OAAO,OAAO,aAAa,EAAE,aAAa,EAAE,YAAY,KAAK,EAAW,CAAC"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { InputPasswordProps } from "./type.mjs";
|
|
2
2
|
//#region src/base-ui/Input/InputPassword.d.ts
|
|
3
|
-
declare const
|
|
3
|
+
declare const _default: import("react").NamedExoticComponent<InputPasswordProps> & {
|
|
4
|
+
formBinding: {
|
|
5
|
+
readonly emptyValue: "";
|
|
6
|
+
};
|
|
7
|
+
};
|
|
4
8
|
//#endregion
|
|
5
|
-
export {
|
|
9
|
+
export { _default as default };
|
|
6
10
|
//# sourceMappingURL=InputPassword.d.mts.map
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import Icon from "../../Icon/Icon.mjs";
|
|
3
3
|
import { styles } from "./style.mjs";
|
|
4
|
-
import
|
|
4
|
+
import Input_default from "./Input.mjs";
|
|
5
5
|
import { memo, useState } from "react";
|
|
6
6
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { Eye, EyeOff } from "lucide-react";
|
|
8
8
|
//#region src/base-ui/Input/InputPassword.tsx
|
|
9
9
|
const InputPassword = memo(({ visibilityToggle = true, suffix, ...rest }) => {
|
|
10
10
|
const [visible, setVisible] = useState(false);
|
|
11
|
-
return /* @__PURE__ */ jsx(
|
|
11
|
+
return /* @__PURE__ */ jsx(Input_default, {
|
|
12
12
|
type: visible ? "text" : "password",
|
|
13
13
|
suffix: /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, visibilityToggle && /* @__PURE__ */ jsx("button", {
|
|
14
14
|
"aria-label": visible ? "Hide password" : "Show password",
|
|
@@ -25,7 +25,8 @@ const InputPassword = memo(({ visibilityToggle = true, suffix, ...rest }) => {
|
|
|
25
25
|
});
|
|
26
26
|
});
|
|
27
27
|
InputPassword.displayName = "InputPassword";
|
|
28
|
+
var InputPassword_default = Object.assign(InputPassword, { formBinding: { emptyValue: "" } });
|
|
28
29
|
//#endregion
|
|
29
|
-
export {
|
|
30
|
+
export { InputPassword_default as default };
|
|
30
31
|
|
|
31
32
|
//# sourceMappingURL=InputPassword.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputPassword.mjs","names":[],"sources":["../../../src/base-ui/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport Input from './Input';\nimport { styles } from './style';\nimport type { InputPasswordProps } from './type';\n\nconst InputPassword = memo<InputPasswordProps>(({ visibilityToggle = true, suffix, ...rest }) => {\n const [visible, setVisible] = useState(false);\n\n return (\n <Input\n type={visible ? 'text' : 'password'}\n suffix={\n <>\n {suffix}\n {visibilityToggle && (\n <button\n aria-label={visible ? 'Hide password' : 'Show password'}\n className={styles.passwordToggle}\n tabIndex={-1}\n type={'button'}\n onClick={() => setVisible((v) => !v)}\n >\n <Icon icon={visible ? Eye : EyeOff} size={16} />\n </button>\n )}\n </>\n }\n {...rest}\n />\n );\n});\n\nInputPassword.displayName = 'InputPassword';\n\nexport default InputPassword;\n"],"mappings":";;;;;;;;AAWA,MAAM,gBAAgB,MAA0B,EAAE,mBAAmB,MAAM,QAAQ,GAAG,WAAW;CAC/F,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,OACE,
|
|
1
|
+
{"version":3,"file":"InputPassword.mjs","names":["Input"],"sources":["../../../src/base-ui/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport Input from './Input';\nimport { styles } from './style';\nimport type { InputPasswordProps } from './type';\n\nconst InputPassword = memo<InputPasswordProps>(({ visibilityToggle = true, suffix, ...rest }) => {\n const [visible, setVisible] = useState(false);\n\n return (\n <Input\n type={visible ? 'text' : 'password'}\n suffix={\n <>\n {suffix}\n {visibilityToggle && (\n <button\n aria-label={visible ? 'Hide password' : 'Show password'}\n className={styles.passwordToggle}\n tabIndex={-1}\n type={'button'}\n onClick={() => setVisible((v) => !v)}\n >\n <Icon icon={visible ? Eye : EyeOff} size={16} />\n </button>\n )}\n </>\n }\n {...rest}\n />\n );\n});\n\nInputPassword.displayName = 'InputPassword';\n\nexport default Object.assign(InputPassword, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;AAWA,MAAM,gBAAgB,MAA0B,EAAE,mBAAmB,MAAM,QAAQ,GAAG,WAAW;CAC/F,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,OACE,oBAACA,eAAD;EACE,MAAM,UAAU,SAAS;EACzB,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,QACA,oBACC,oBAAC,UAAD;GACE,cAAY,UAAU,kBAAkB;GACxC,WAAW,OAAO;GAClB,UAAU;GACV,MAAM;GACN,eAAe,YAAY,MAAM,CAAC,CAAC;GAEnC,UAAA,oBAAC,MAAD;IAAM,MAAM,UAAU,MAAM;IAAQ,MAAM;GAAK,CAAA;EACzC,CAAA,CAEV,EAAA,CAAA;EAEJ,GAAI;CACL,CAAA;AAEL,CAAC;AAED,cAAc,cAAc;AAE5B,IAAA,wBAAe,OAAO,OAAO,eAAe,EAAE,aAAa,EAAE,YAAY,GAAG,EAAW,CAAC"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { TextAreaProps } from "./type.mjs";
|
|
2
2
|
//#region src/base-ui/Input/TextArea.d.ts
|
|
3
|
-
declare const
|
|
3
|
+
declare const _default: import("react").NamedExoticComponent<TextAreaProps> & {
|
|
4
|
+
formBinding: {
|
|
5
|
+
readonly emptyValue: "";
|
|
6
|
+
};
|
|
7
|
+
};
|
|
4
8
|
//#endregion
|
|
5
|
-
export {
|
|
9
|
+
export { _default as default };
|
|
6
10
|
//# sourceMappingURL=TextArea.d.mts.map
|
|
@@ -74,7 +74,8 @@ const TextArea = memo(({ ref, className, classNames, styles: customStyles, style
|
|
|
74
74
|
});
|
|
75
75
|
});
|
|
76
76
|
TextArea.displayName = "TextArea";
|
|
77
|
+
var TextArea_default = Object.assign(TextArea, { formBinding: { emptyValue: "" } });
|
|
77
78
|
//#endregion
|
|
78
|
-
export {
|
|
79
|
+
export { TextArea_default as default };
|
|
79
80
|
|
|
80
81
|
//# sourceMappingURL=TextArea.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../src/base-ui/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { type CSSProperties, memo, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, styles } from './style';\nimport type { TextAreaProps } from './type';\n\nconst textLength = (value: unknown) =>\n value === undefined || value === null ? 0 : Array.from(String(value)).length;\n\nconst TextArea = memo<TextAreaProps>(\n ({\n ref,\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n autoSize,\n resize = false,\n disabled,\n readOnly,\n allowClear,\n onClear,\n onPressEnter,\n onKeyDown,\n onChange,\n showCount,\n maxLength,\n value,\n defaultValue,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const mergedRef = useMergeRefs([ref, textareaRef]);\n const [innerLength, setInnerLength] = useState(() => textLength(value ?? defaultValue));\n const length = value === undefined ? innerLength : textLength(value);\n const showClear = allowClear && length > 0 && !disabled && !readOnly;\n const over = maxLength !== undefined && length > maxLength;\n\n const cssVariables = useMemo<CSSProperties>(() => {\n if (typeof autoSize !== 'object') return {};\n return {\n '--textarea-max-height': autoSize.maxRows ? `calc(1.5em * ${autoSize.maxRows})` : undefined,\n '--textarea-min-rows': autoSize.minRows,\n } as CSSProperties;\n }, [autoSize]);\n\n return (\n <div\n data-disabled={disabled ? '' : undefined}\n style={{ ...cssVariables, ...style }}\n className={cx(\n rootVariants({ shadow, variant: mergedVariant }),\n styles.textarea,\n autoSize && styles.textareaAutoSize,\n resize && styles.textareaResize,\n showCount && styles.textareaWithCount,\n className,\n )}\n >\n <Field.Control\n className={cx(styles.input, classNames?.input)}\n disabled={disabled}\n style={customStyles?.input}\n render={\n <textarea\n defaultValue={defaultValue}\n maxLength={maxLength}\n readOnly={readOnly}\n ref={mergedRef}\n value={value}\n onChange={(event) => {\n setInnerLength(textLength(event.currentTarget.value));\n onChange?.(event);\n }}\n onKeyDown={(event) => {\n if (isPressEnter(event)) onPressEnter?.(event);\n onKeyDown?.(event);\n }}\n {...rest}\n />\n }\n />\n {showClear && (\n <ClearButton\n className={styles.textareaClear}\n onClear={() => {\n clearNativeValue(textareaRef.current);\n onClear?.();\n }}\n />\n )}\n {showCount && (\n <span className={styles.count} data-over={over ? '' : undefined}>\n {maxLength === undefined ? length : `${length} / ${maxLength}`}\n </span>\n )}\n </div>\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,cAAc,UAClB,UAAU,KAAA,KAAa,UAAU,OAAO,IAAI,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;AAExE,MAAM,WAAW,MACd,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,UACA,SAAS,OACT,UACA,UACA,YACA,SACA,cACA,WACA,UACA,WACA,WACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,cAAc,OAA4B,IAAI;CACpD,MAAM,YAAY,aAAa,CAAC,KAAK,WAAW,CAAC;CACjD,MAAM,CAAC,aAAa,kBAAkB,eAAe,WAAW,SAAS,YAAY,CAAC;CACtF,MAAM,SAAS,UAAU,KAAA,IAAY,cAAc,WAAW,KAAK;CACnE,MAAM,YAAY,cAAc,SAAS,KAAK,CAAC,YAAY,CAAC;CAC5D,MAAM,OAAO,cAAc,KAAA,KAAa,SAAS;CAEjD,MAAM,eAAe,cAA6B;EAChD,IAAI,OAAO,aAAa,UAAU,OAAO,CAAC;EAC1C,OAAO;GACL,yBAAyB,SAAS,UAAU,gBAAgB,SAAS,QAAQ,KAAK,KAAA;GAClF,uBAAuB,SAAS;EAClC;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,qBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,OAAO;GAAE,GAAG;GAAc,GAAG;EAAM;EACnC,WAAW,GACT,aAAa;GAAE;GAAQ,SAAS;EAAc,CAAC,GAC/C,OAAO,UACP,YAAY,OAAO,kBACnB,UAAU,OAAO,gBACjB,aAAa,OAAO,mBACpB,SACF;EAVF,UAAA;GAYE,oBAAC,MAAM,SAAP;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IACnC;IACV,OAAO,cAAc;IACrB,QACE,oBAAC,YAAD;KACgB;KACH;KACD;KACV,KAAK;KACE;KACP,WAAW,UAAU;MACnB,eAAe,WAAW,MAAM,cAAc,KAAK,CAAC;MACpD,WAAW,KAAK;KAClB;KACA,YAAY,UAAU;MACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;MAC7C,YAAY,KAAK;KACnB;KACA,GAAI;IACL,CAAA;GAEJ,CAAA;GACA,aACC,oBAAC,aAAD;IACE,WAAW,OAAO;IAClB,eAAe;KACb,iBAAiB,YAAY,OAAO;KACpC,UAAU;IACZ;GACD,CAAA;GAEF,aACC,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,aAAW,OAAO,KAAK,KAAA;IACnD,UAAA,cAAc,KAAA,IAAY,SAAS,GAAG,OAAO,KAAK;GAC/C,CAAA;EAEL;;AAET,CACF;AAEA,SAAS,cAAc"}
|
|
1
|
+
{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../src/base-ui/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { type CSSProperties, memo, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, styles } from './style';\nimport type { TextAreaProps } from './type';\n\nconst textLength = (value: unknown) =>\n value === undefined || value === null ? 0 : Array.from(String(value)).length;\n\nconst TextArea = memo<TextAreaProps>(\n ({\n ref,\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n autoSize,\n resize = false,\n disabled,\n readOnly,\n allowClear,\n onClear,\n onPressEnter,\n onKeyDown,\n onChange,\n showCount,\n maxLength,\n value,\n defaultValue,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const mergedRef = useMergeRefs([ref, textareaRef]);\n const [innerLength, setInnerLength] = useState(() => textLength(value ?? defaultValue));\n const length = value === undefined ? innerLength : textLength(value);\n const showClear = allowClear && length > 0 && !disabled && !readOnly;\n const over = maxLength !== undefined && length > maxLength;\n\n const cssVariables = useMemo<CSSProperties>(() => {\n if (typeof autoSize !== 'object') return {};\n return {\n '--textarea-max-height': autoSize.maxRows ? `calc(1.5em * ${autoSize.maxRows})` : undefined,\n '--textarea-min-rows': autoSize.minRows,\n } as CSSProperties;\n }, [autoSize]);\n\n return (\n <div\n data-disabled={disabled ? '' : undefined}\n style={{ ...cssVariables, ...style }}\n className={cx(\n rootVariants({ shadow, variant: mergedVariant }),\n styles.textarea,\n autoSize && styles.textareaAutoSize,\n resize && styles.textareaResize,\n showCount && styles.textareaWithCount,\n className,\n )}\n >\n <Field.Control\n className={cx(styles.input, classNames?.input)}\n disabled={disabled}\n style={customStyles?.input}\n render={\n <textarea\n defaultValue={defaultValue}\n maxLength={maxLength}\n readOnly={readOnly}\n ref={mergedRef}\n value={value}\n onChange={(event) => {\n setInnerLength(textLength(event.currentTarget.value));\n onChange?.(event);\n }}\n onKeyDown={(event) => {\n if (isPressEnter(event)) onPressEnter?.(event);\n onKeyDown?.(event);\n }}\n {...rest}\n />\n }\n />\n {showClear && (\n <ClearButton\n className={styles.textareaClear}\n onClear={() => {\n clearNativeValue(textareaRef.current);\n onClear?.();\n }}\n />\n )}\n {showCount && (\n <span className={styles.count} data-over={over ? '' : undefined}>\n {maxLength === undefined ? length : `${length} / ${maxLength}`}\n </span>\n )}\n </div>\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default Object.assign(TextArea, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,cAAc,UAClB,UAAU,KAAA,KAAa,UAAU,OAAO,IAAI,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;AAExE,MAAM,WAAW,MACd,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,UACA,SAAS,OACT,UACA,UACA,YACA,SACA,cACA,WACA,UACA,WACA,WACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,cAAc,OAA4B,IAAI;CACpD,MAAM,YAAY,aAAa,CAAC,KAAK,WAAW,CAAC;CACjD,MAAM,CAAC,aAAa,kBAAkB,eAAe,WAAW,SAAS,YAAY,CAAC;CACtF,MAAM,SAAS,UAAU,KAAA,IAAY,cAAc,WAAW,KAAK;CACnE,MAAM,YAAY,cAAc,SAAS,KAAK,CAAC,YAAY,CAAC;CAC5D,MAAM,OAAO,cAAc,KAAA,KAAa,SAAS;CAEjD,MAAM,eAAe,cAA6B;EAChD,IAAI,OAAO,aAAa,UAAU,OAAO,CAAC;EAC1C,OAAO;GACL,yBAAyB,SAAS,UAAU,gBAAgB,SAAS,QAAQ,KAAK,KAAA;GAClF,uBAAuB,SAAS;EAClC;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,qBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,OAAO;GAAE,GAAG;GAAc,GAAG;EAAM;EACnC,WAAW,GACT,aAAa;GAAE;GAAQ,SAAS;EAAc,CAAC,GAC/C,OAAO,UACP,YAAY,OAAO,kBACnB,UAAU,OAAO,gBACjB,aAAa,OAAO,mBACpB,SACF;EAVF,UAAA;GAYE,oBAAC,MAAM,SAAP;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IACnC;IACV,OAAO,cAAc;IACrB,QACE,oBAAC,YAAD;KACgB;KACH;KACD;KACV,KAAK;KACE;KACP,WAAW,UAAU;MACnB,eAAe,WAAW,MAAM,cAAc,KAAK,CAAC;MACpD,WAAW,KAAK;KAClB;KACA,YAAY,UAAU;MACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;MAC7C,YAAY,KAAK;KACnB;KACA,GAAI;IACL,CAAA;GAEJ,CAAA;GACA,aACC,oBAAC,aAAD;IACE,WAAW,OAAO;IAClB,eAAe;KACb,iBAAiB,YAAY,OAAO;KACpC,UAAU;IACZ;GACD,CAAA;GAEF,aACC,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,aAAW,OAAO,KAAK,KAAA;IACnD,UAAA,cAAc,KAAA,IAAY,SAAS,GAAG,OAAO,KAAK;GAC/C,CAAA;EAEL;;AAET,CACF;AAEA,SAAS,cAAc;AAEvB,IAAA,mBAAe,OAAO,OAAO,UAAU,EAAE,aAAa,EAAE,YAAY,GAAG,EAAW,CAAC"}
|