foxit-component 0.0.1-alpha.24 → 0.0.1-alpha.25

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.
Files changed (12) hide show
  1. package/es/Button/Button.js +1 -1
  2. package/es/Form/Form.d.ts +2 -1
  3. package/es/Form/Form.js +3 -2
  4. package/es/Form/Form.types.d.ts +9 -0
  5. package/es/Form/FormProvider.js +42 -3
  6. package/es/Form/useFormWatch.d.ts +3 -0
  7. package/es/Form/useFormWatch.js +37 -0
  8. package/es/Spin/Spin.js +13 -1
  9. package/es/index.css +1 -1
  10. package/es/index.d.ts +2 -2
  11. package/es/index.js +1 -0
  12. package/package.json +1 -1
package/es/Button/Button.js CHANGED
@@ -6,7 +6,7 @@ import { Icon } from '../Icon/index.js';
6
6
  var Button = function (_a) {
7
7
  var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.children, children = _d === void 0 ? '' : _d, className = _a.className, style = _a.style, loading = _a.loading, props = __rest(_a, ["primary", "size", "children", "className", "style", "loading"]);
8
8
  var mode = primary ? 'foxit-button-primary' : 'foxit-button-secondary';
9
- return (jsxs("button", __assign({ type: "button", className: classNames('foxit-button', "foxit-button-".concat(size), mode, className), style: style }, props, { children: [loading && jsx(Icon, { name: "LoadingOutlined", className: "foxit-button-loading" }), children] })));
9
+ return (jsxs("button", __assign({ type: "button", className: classNames('foxit-button', "foxit-button-".concat(size), mode, className, loading && 'foxit-button-prevent-click'), style: style }, props, { children: [loading && jsx(Icon, { name: "LoadingOutlined", className: "foxit-button-loading" }), children] })));
10
10
  };
11
11
 
12
12
  export { Button };
package/es/Form/Form.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import { FormRefInstance } from './Form.types';
3
3
  import FormItem from './FormItem';
4
+ import { useFormWatch } from './useFormWatch';
4
5
  export type { FormRefInstance } from './Form.types';
5
6
  interface FormProps {
6
7
  children: ReactNode;
@@ -9,6 +10,6 @@ interface FormProps {
9
10
  [key: string]: unknown;
10
11
  };
11
12
  }
12
- export { FormItem };
13
+ export { FormItem, useFormWatch };
13
14
  declare const _default: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<FormRefInstance>>;
14
15
  export default _default;
package/es/Form/Form.js CHANGED
@@ -21,13 +21,14 @@ var Form = function (_a, ref) {
21
21
  }
22
22
  }, [onFinish]);
23
23
  useImperativeHandle(ref, function () {
24
- var _a, _b, _c, _d, _e;
24
+ var _a, _b, _c, _d, _e, _f;
25
25
  return ({
26
26
  setFieldsValue: (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldsValue,
27
27
  getFieldsValue: (_b = formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue,
28
28
  resetFields: (_c = formRef.current) === null || _c === void 0 ? void 0 : _c.resetFields,
29
29
  validateFields: (_d = formRef.current) === null || _d === void 0 ? void 0 : _d.validateFields,
30
- setFieldsStatus: (_e = formRef.current) === null || _e === void 0 ? void 0 : _e.setFieldsStatus
30
+ setFieldsStatus: (_e = formRef.current) === null || _e === void 0 ? void 0 : _e.setFieldsStatus,
31
+ subscribe: (_f = formRef.current) === null || _f === void 0 ? void 0 : _f.subscribe
31
32
  });
32
33
  });
33
34
  return (jsx(FormProvider, __assign({ initialValues: initialValues, ref: formRef }, { children: jsx("form", __assign({ onSubmit: handleSubmit }, { children: children })) })));
package/es/Form/Form.types.d.ts CHANGED
@@ -11,6 +11,12 @@ export interface ValidationRule {
11
11
  min?: number;
12
12
  max?: number;
13
13
  }
14
+ export interface FieldSubscriber {
15
+ fieldNames: string[];
16
+ callback: (values: {
17
+ [key: string]: unknown;
18
+ }) => void;
19
+ }
14
20
  export interface FormInstance {
15
21
  setFieldsValue: (values: {
16
22
  [key: string]: unknown;
@@ -29,6 +35,9 @@ export interface FormInstance {
29
35
  }[]) => void;
30
36
  registerField: (name: string, rules: ValidationRule[]) => void;
31
37
  unregisterField: (name: string) => void;
38
+ subscribe: (fieldNames: string[], callback: (values: {
39
+ [key: string]: unknown;
40
+ }) => void) => () => void;
32
41
  }
33
42
  export type FormRefInstance = Omit<FormInstance, 'registerField' | 'unregisterField'>;
34
43
  export interface FormContextProps {
package/es/Form/FormProvider.js CHANGED
@@ -8,6 +8,7 @@ var FormProvider = function (_a, ref) {
8
8
  var formFieldsRef = useRef({});
9
9
  var _c = useState({}), forceUpdate = _c[1]; // Used to force re-render when ref changes
10
10
  var formInstanceRef = useRef({});
11
+ var subscribersRef = useRef([]);
11
12
  // 初始值的设置
12
13
  useEffect(function () {
13
14
  if (Object.keys(initialValues).length > 0) {
@@ -23,6 +24,22 @@ var FormProvider = function (_a, ref) {
23
24
  forceUpdate({}); // Trigger re-render
24
25
  }
25
26
  }, [initialValues]);
27
+ // 订阅方法
28
+ var subscribe = useCallback(function (fieldNames, callback) {
29
+ var subscriber = { fieldNames: fieldNames, callback: callback };
30
+ subscribersRef.current.push(subscriber);
31
+ // 立即触发一次回调，提供当前值
32
+ var currentValues = fieldNames.reduce(function (acc, fieldName) {
33
+ var _a;
34
+ acc[fieldName] = (_a = formFieldsRef.current[fieldName]) === null || _a === void 0 ? void 0 : _a.value;
35
+ return acc;
36
+ }, {});
37
+ callback(currentValues);
38
+ // 返回取消订阅函数
39
+ return function () {
40
+ subscribersRef.current = subscribersRef.current.filter(function (s) { return s !== subscriber; });
41
+ };
42
+ }, []);
26
43
  // 注册字段
27
44
  var registerField = useCallback(function (name, rules) {
28
45
  formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
@@ -77,14 +94,19 @@ var FormProvider = function (_a, ref) {
77
94
  }, []);
78
95
  // 设置字段值
79
96
  var setFieldsValue = useCallback(function (values) {
80
- var _a;
97
+ var _a, _b;
98
+ var changedFields = [];
81
99
  formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
82
100
  for (var key in values) {
83
101
  if (Object.prototype.hasOwnProperty.call(values, key)) {
84
102
  var newValue = values[key];
103
+ var oldValue = (_a = formFieldsRef.current[key]) === null || _a === void 0 ? void 0 : _a.value;
104
+ if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
105
+ changedFields.push(key);
106
+ }
85
107
  formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { value: newValue });
86
108
  // 验证字段
87
- var validation = validateField(key, newValue, ((_a = formFieldsRef.current[key]) === null || _a === void 0 ? void 0 : _a.rules) || []);
109
+ var validation = validateField(key, newValue, ((_b = formFieldsRef.current[key]) === null || _b === void 0 ? void 0 : _b.rules) || []);
88
110
  if (validation) {
89
111
  if (validation.type === 'error') {
90
112
  formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: validation.message, warning: undefined // Clear any previous warnings
@@ -100,6 +122,22 @@ var FormProvider = function (_a, ref) {
100
122
  }
101
123
  }
102
124
  }
125
+ // 通知订阅者
126
+ if (changedFields.length > 0 && subscribersRef.current.length > 0) {
127
+ subscribersRef.current.forEach(function (subscriber) {
128
+ // 检查是否有该订阅者关心的字段发生变化
129
+ var relevantFields = subscriber.fieldNames.filter(function (name) { return changedFields.includes(name); });
130
+ if (relevantFields.length > 0) {
131
+ // 提取订阅者关心的所有字段当前值
132
+ var watchValues = subscriber.fieldNames.reduce(function (acc, fieldName) {
133
+ var _a;
134
+ acc[fieldName] = (_a = formFieldsRef.current[fieldName]) === null || _a === void 0 ? void 0 : _a.value;
135
+ return acc;
136
+ }, {});
137
+ subscriber.callback(watchValues);
138
+ }
139
+ });
140
+ }
103
141
  forceUpdate({}); // Trigger re-render
104
142
  }, [validateField]);
105
143
  // 获取字段值
@@ -208,7 +246,8 @@ var FormProvider = function (_a, ref) {
208
246
  validateFields: validateFields,
209
247
  setFieldsStatus: setFieldsStatus,
210
248
  registerField: registerField,
211
- unregisterField: unregisterField
249
+ unregisterField: unregisterField,
250
+ subscribe: subscribe
212
251
  };
213
252
  // 暴露给外部的方法
214
253
  useImperativeHandle(ref, function () { return (__assign({}, formInstanceRef.current)); });
package/es/Form/useFormWatch.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import type { FormRefInstance } from './Form.types';
3
+ export declare function useFormWatch(formRef: React.RefObject<FormRefInstance>, callback: (values: Record<string, unknown>) => void, fieldNames: string[]): void;
package/es/Form/useFormWatch.js ADDED
@@ -0,0 +1,37 @@
1
+ import { useRef, useEffect } from 'react';
2
+
3
+ function useFormWatch(formRef, callback, fieldNames) {
4
+ var callbackRef = useRef(callback);
5
+ useEffect(function () {
6
+ callbackRef.current = callback;
7
+ }, [callback]);
8
+ // 处理表单字段监听
9
+ useEffect(function () {
10
+ // 如果表单引用不存在，设置轮询检查
11
+ if (!formRef.current) {
12
+ var checkInterval_1 = setInterval(function () {
13
+ if (formRef.current) {
14
+ clearInterval(checkInterval_1);
15
+ subscribeToFields();
16
+ }
17
+ }, 100);
18
+ // 清理轮询
19
+ return function () { return clearInterval(checkInterval_1); };
20
+ }
21
+ else {
22
+ // 表单引用存在，直接订阅
23
+ return subscribeToFields();
24
+ }
25
+ function subscribeToFields() {
26
+ var _a;
27
+ var unsubscribe = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.subscribe(fieldNames, function (newValues) {
28
+ callbackRef.current(newValues);
29
+ });
30
+ return function () {
31
+ unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
32
+ };
33
+ }
34
+ }, [formRef, fieldNames.join(',')]);
35
+ }
36
+
37
+ export { useFormWatch };
package/es/Spin/Spin.js CHANGED
@@ -5,7 +5,19 @@ import { Icon } from '../Icon/index.js';
5
5
 
6
6
  var Spin = function (_a) {
7
7
  var _b = _a.spinning, spinning = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'default' : _c, children = _a.children, className = _a.className;
8
- return spinning ? (jsxs("div", __assign({ className: classNames('foxit-spin', "foxit-spin-".concat(size)) }, { children: [jsx("div", __assign({ className: "foxit-spin-icon" }, { children: jsx(Icon, { name: "LoadingOutlined", className: classNames('foxit-spin-spinning', className) }) })), children && jsx("div", __assign({ className: "foxit-spin-container" }, { children: children }))] }))) : children ? (jsx(Fragment, { children: children })) : (jsx(Fragment, {}));
8
+ // return spinning ? (
9
+ // <div className={classNames('foxit-spin', `foxit-spin-${size}`)}>
10
+ // <div className="foxit-spin-icon">
11
+ // <Icon name="LoadingOutlined" className={classNames('foxit-spin-spinning', className)} />
12
+ // </div>
13
+ // {children && <div className="foxit-spin-container">{children}</div>}
14
+ // </div>
15
+ // ) : children ? (
16
+ // <>{children}</>
17
+ // ) : (
18
+ // <></>
19
+ // );
20
+ return (jsxs("div", __assign({ className: classNames(spinning && 'foxit-spin', spinning && "foxit-spin-".concat(size)) }, { children: [spinning && (jsx("div", __assign({ className: "foxit-spin-icon" }, { children: jsx(Icon, { name: "LoadingOutlined", className: classNames('foxit-spin-spinning', className) }) }))), children && jsx("div", __assign({ className: classNames(spinning && 'foxit-spin-container') }, { children: children })), !children && !spinning && jsx(Fragment, {})] })));
9
21
  };
10
22
 
11
23
  export { Spin };
package/es/index.css CHANGED
@@ -1 +1 @@
1
- .foxit-checkbox-container{cursor:pointer;display:inline-block;padding-left:25px;position:relative;-webkit-user-select:none;user-select:none}.foxit-checkbox-container input{cursor:pointer;opacity:0;position:absolute}.foxit-checkbox-checkmark{background-color:#fff;border:1px solid #b3b3b3;border-radius:4px;height:20px;left:0;position:absolute;top:0;width:20px}.foxit-checkbox-content{line-height:20px}.foxit-checkbox-container input:checked~.foxit-checkbox-checkmark{background-color:#ff5f00;border:none}.foxit-checkbox-checkmark:after{content:"";display:none;position:absolute}.foxit-checkbox-container input:checked~.foxit-checkbox-checkmark:after{display:block}.foxit-checkbox-container .foxit-checkbox-checkmark:after{border:solid #fff;border-width:0 2px 2px 0;height:10px;left:7px;top:4px;transform:rotate(45deg);width:6px}.foxit-checkbox-container.disabled{color:#00000040;cursor:not-allowed;opacity:.6}.foxit-checkbox-checkmark.disabled{background-color:#f5f5f5;border:1px solid #d9d9d9}.foxit-empty{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:20px;text-align:center}.foxit-empty-image{margin-bottom:16px}.foxit-empty-description{color:#757575;font-size:14px}.foxit-form-item{margin-bottom:16px}.foxit-form-item label{color:#525252;display:block;font-size:14px;font-weight:500;margin-bottom:8px}.foxit-form-required{color:#e22727}.foxit-form-error-text{color:#e22727;font-size:12px;margin-top:8px}.foxit-form-warning-text{color:orange;margin-top:8px}.foxit-form-item>.foxit-form-error-component .foxit-checkbox-container,.foxit-form-item>.foxit-form-error-component .foxit-input-wrapper,.foxit-form-item>.foxit-form-error-component .foxit-radio-container,.foxit-form-item>.foxit-form-error-component .foxit-select-wrapper>:nth-child(3){border:1px solid #e22727!important}.foxit-form-item>.foxit-form-warning-component .foxit-checkbox-container,.foxit-form-item>.foxit-form-warning-component .foxit-input-wrapper,.foxit-form-item>.foxit-form-warning-component .foxit-radio-container,.foxit-form-item>.foxit-form-warning-component .foxit-select-wrapper>:nth-child(3){border-color:orange!important}.foxit-input-wrapper{align-items:center;border:1px solid #d9d9d9;border-radius:10px;display:flex;font-size:14px;font-weight:400;padding:11px 16px;transition:border-color .3s}.foxit-input-wrapper:focus-within{border-color:#ff5f00!important}.foxit-input-wrapper:hover{border-color:#757575}.foxit-input-element{border:none;color:#525252;flex:1;line-height:24px;outline:none!important}.foxit-input-element::placeholder{color:#b3b3b3}.foxit-input-addon{align-items:center;color:#b3b3b3;cursor:pointer;display:flex;padding:0 8px;transition:color .3s}.foxit-input-wrapper:focus-within .foxit-input-addon{color:#ff5f00!important}.foxit-input-wrapper:hover .foxit-input-addon{color:#757575}.foxit-input-wrapper :disabled,.foxit-input-wrapper-disabled{background-color:#f8f8f8}.foxit-input-wrapper-disabled:hover{border-color:#d9d9d9}.foxit-input-wrapper-disabled .foxit-input-element{color:#b3b3b3}.foxit-pagination-container{align-items:center;display:flex;justify-content:center}.foxit-pagination-button,.foxit-pagination-next,.foxit-pagination-prev{background-color:initial;border:none;border-radius:10px;color:#757575;cursor:pointer;font-size:16px;font-weight:500;height:48px;margin:0 4px;min-width:48px;padding:0 12px;transition:background-color .3s ease,color .3s ease}.foxit-pagination-next:hover,.foxit-pagination-prev:hover{color:#ff5f00}.foxit-pagination-button:hover{background-color:#ff5f001a}.foxit-pagination-button:disabled{background-color:#ff5f00;color:#fff;cursor:default}.foxit-radio-container{cursor:pointer;display:inline-block;padding-left:25px;position:relative;-webkit-user-select:none;user-select:none}.foxit-radio-container input{cursor:pointer;opacity:0;position:absolute}.foxit-radio-checkmark{background-color:#fff;border:1px solid #b3b3b3;border-radius:50%;height:20px;left:0;position:absolute;top:0;width:20px}.foxit-radio-content{line-height:20px}.foxit-radio-container input:checked~.foxit-radio-checkmark{background-color:#fff;border:1px solid #ff5f00}.foxit-radio-checkmark:after{content:"";display:none;position:absolute}.foxit-radio-container input:checked~.foxit-radio-checkmark:after{display:block}.foxit-radio-container .foxit-radio-checkmark:after{background:#ff5f00;border-radius:50%;height:10px;left:4px;top:4px;width:10px}.foxit-radio-container.disabled{cursor:not-allowed;opacity:.6}.foxit-table{border:1px solid #ff5f00;border-radius:10px;color:#373737;min-height:200px;overflow:hidden;position:relative}.foxit-table-loading{align-items:center;background-color:#ffffffb3;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.foxit-table-icon-loading{animation:spin 1s linear infinite;color:#ff5f00}.foxit-table-container{border-collapse:collapse;table-layout:fixed;width:100%}.foxit-table-container td,.foxit-table-container th{word-wrap:break-word;height:70px;min-height:70px;padding:24px;white-space:pre-wrap}.foxit-table-container th{background-color:#fff6f0;font-size:16px;font-weight:700}.foxit-table-container td{font-size:14px;font-weight:400}.foxit-table-container .foxit-even-row{background-color:#fff}.foxit-table-container .foxit-odd-row{background-color:#fff6f0}.foxit-tabs{display:flex;flex-wrap:wrap;gap:8px}.foxit-tab-item{background-color:#f1f3f4;border:none;border-radius:10px;color:#757575;cursor:pointer;font-size:14px;font-weight:600;padding:14px 20px;transition:background-color .3s,color .3s}.foxit-tab-item.active{background-color:#ff5f00;color:#fff}.foxit-tab-item:hover:not(.active){background-color:#e0e0e0}.foxit-tab-content{margin-top:16px}.foxit-tag{border-radius:5px;display:inline-block;font-size:12px;font-weight:600;min-height:24px;padding:4px 8px}.foxit-tag-active{background-color:#edfafa;color:#0f8b8d}.foxit-tag-canceled{background-color:#ffecec;color:#e22727}.foxit-tag-pending{background-color:#fbf4d0;color:#9b8827}.foxit-tag-offline{background-color:#edecff;color:#6462c6}.foxit-tag-trial{background-color:#e4f4fe;color:#2288ce}.foxit-tag-expired{background-color:#ececec;color:#757575}.foxit-toast-container{left:50%;pointer-events:none;position:fixed;top:0;transform:translateX(-50%);transition-delay:0s;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:2000}.foxit-toast-loading{animation:spin 1s linear infinite;color:#ff5f00}.foxit-toast-loading-overlay{background-color:#000;height:100vh;inset:0;opacity:.15;pointer-events:auto;position:fixed;z-index:10}.foxit-toast-item{align-items:center;background-color:#fff;border:none;border-radius:50px;color:#525252;display:flex;flex-direction:row;gap:8px;justify-content:center;margin-bottom:16px;margin-left:auto;margin-right:auto;padding:9px 12px;position:relative;top:102px;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:fit-content;z-index:20}.foxit-toast-item-success{background-color:#ddfae8;color:#1f7f40}.foxit-toast-item-error{background-color:#fae5dd;color:#e22727}.foxit-toast-item-warning{background-color:#fff0e7;color:#525252}.foxit-toast-enter{opacity:0;transform:translateY(-100%)}.foxit-toast-enter-active{transition:all .5s ease-out}.foxit-toast-enter-active,.foxit-toast-exit{opacity:1;transform:translateY(0)}.foxit-toast-exit-active{opacity:0;transform:translateY(-100%);transition:all .5s ease-in}.foxit-tooltip-container{display:inline-block;position:relative;width:auto}.foxit-tooltip-content{background-color:#525252;border-radius:10px;color:#fff;max-width:300px;padding:12px 16px;position:absolute;width:max-content;z-index:1}.foxit-tooltip-arrow{border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid #525252;bottom:-5px;height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.foxit-button{align-items:center;border:0;border-radius:10px;cursor:pointer;display:flex;font-size:14px;font-weight:600;justify-content:center;letter-spacing:.42px}.foxit-button:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.foxit-button:hover{opacity:.8}.foxit-button-primary{background-color:#ff5f00;color:#fff}.foxit-button-secondary{background-color:#fff;border:2px solid #ff5f00;color:#ff5f00}.foxit-button-small{border-radius:5px;height:38px;padding-left:24px;padding-right:24px}.foxit-button-small svg{height:16px;width:16px}.foxit-button-medium{border-radius:5px;height:44px;padding-left:32px;padding-right:32px}.foxit-button-medium svg{height:20px;width:20px}.foxit-button-large{height:56px;padding-left:32px;padding-right:32px}.foxit-button-loading{animation:spin 1s linear infinite;margin-right:8px}.foxit-button-primary .foxit-button-loading{color:#fff}.foxit-button-secondary .foxit-button-loading{color:#ff5f00}.foxit-menu{border-radius:10px;box-shadow:0 2px 8px #00000026;font-size:14px;overflow:hidden}.foxit-menu-item-content{align-items:center;cursor:pointer;display:flex;padding:12px 16px}.foxit-menu-item{padding-left:0}.foxit-menu-item.selected{background-color:#fff6f0!important;color:#ff5f00;font-weight:600}.foxit-menu-item:hover{background-color:#f5f6f8}.foxit-menu-submenu-title{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:12px 16px}.foxit-menu-submenu-title:hover{background-color:#f5f6f8}.foxit-menu-icon{transition:transform .3s ease-in-out}.foxit-menu-rotated-icon{transform:rotate(180deg)}.foxit-menu-item-label{font-weight:600}.foxit-modal-content-container{background-color:#fff;border-radius:10px;display:flex;flex-direction:column;gap:24px;justify-content:space-between;min-width:320px;padding:24px}.foxit-modal-success{background:linear-gradient(135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3)}.foxit-modal-head{align-items:center;display:flex;justify-content:space-between}.foxit-modal-children{max-height:60vh;overflow-y:auto}.foxit-modal-title{font-size:20px;font-weight:500}.foxit-modal-success-icon{display:flex;height:94px;margin-top:-50px;width:115px}.foxit-modal-close-button{align-items:center;cursor:pointer;display:flex;height:16px;justify-content:center;width:16px}.foxit-modal-close-button svg{stroke:#6b7280}.foxit-modal-close-button:hover svg{stroke:#ea580c}.foxit-modal-footer{display:flex;gap:16px;justify-content:flex-end}.foxit-modal-fixed-layout{align-items:center;display:flex;flex-direction:column;inset:0;padding:36px;position:fixed;z-index:99}.foxit-modal-justify-center{justify-content:center}.foxit-modal-justify-top{justify-content:flex-start;padding-top:96px}.foxit-modal-justify-bottom{justify-content:flex-end}.foxit-modal-overlay{cursor:pointer;height:100%;inset:0;position:fixed;width:100%;z-index:99}.foxit-modal-overlay-bg{background-color:#00000026;height:100%;inset:0;position:absolute;width:100%}.foxit-modal-content{align-items:center;display:flex;font-size:16px;font-weight:400;justify-content:center;max-height:100%;width:auto;z-index:99}.foxit-modal-opacity-0{opacity:0}.foxit-modal-opacity-100{opacity:1}.foxit-modal-scale-0{transform:scale(0)}.foxit-modal-scale-100{transform:scale(1)}.foxit-modal-transition{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.foxit-modal-hide-overflow{overflow-y:hidden}.foxit-switch{background-color:#ccc;border-radius:100px;cursor:pointer;display:inline-block;height:22px;line-height:22px;position:relative;transition:background-color .3s;width:40px}.foxit-switch.small{height:14px;line-height:14px;width:24px}.foxit-switch.checked{background-color:#ff5f00}.foxit-switch-handle{background-color:#fff;border-radius:50%;height:18px;position:absolute;top:2px;transform:translateX(1px);transition:transform .3s;width:18px}.foxit-switch.small .foxit-switch-handle{height:12px;top:1px;width:12px}.foxit-switch.checked .foxit-switch-handle{transform:translateX(20px)}.foxit-switch.small.checked .foxit-switch-handle{transform:translateX(11px)}.foxit-spin{display:inline-block;position:relative}.foxit-spin .foxit-spin-container{opacity:.5}.foxit-spin-spinning{animation:spin 1s linear infinite;color:#ff5f00;margin-right:8px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.foxit-spin-icon{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.foxit-spin-small .foxit-spin-icon{font-size:16px}.foxit-spin-default .foxit-spin-icon{font-size:24px}.foxit-spin-large .foxit-spin-icon{font-size:32px}.foxit-alert{align-items:flex-start;border-radius:5px;display:flex;padding:12px}.foxit-alert-icon-container{height:20px;margin-right:8px;width:20px}.foxit-alert-icon{height:20px;width:20px}.foxit-alert-message{font-size:12px}.foxit-alert-success,.foxit-alert-warning{background-color:#f5fff2;border:1px solid #30dc6b}.foxit-alert-error{background-color:#fae5dd;border:1px solid #e22727}.foxit-alert-gradient{background:linear-gradient(135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3);border:1px solid #ff5f00;display:block}.foxit-quantity,.foxit-quantity-button{align-items:center;display:flex}.foxit-quantity-button{background-color:#ff5f00;border:none;border-radius:4px;color:#fff;cursor:pointer;height:16px;justify-content:center;margin-left:8px;margin-right:8px;width:16px}.foxit-quantity-button:disabled{background-color:#ffc2a0;cursor:not-allowed}.foxit-quantity-button>div{font-size:16px;margin-top:-3px}.foxit-quantity-number{border:1px solid #b3b3b3;border-radius:4px;color:#525252;flex:1;font-size:14px;height:24px;line-height:24px;outline:none!important;text-align:center;width:48px}
1
+ .foxit-checkbox-container{cursor:pointer;display:inline-block;padding-left:25px;position:relative;-webkit-user-select:none;user-select:none}.foxit-checkbox-container input{cursor:pointer;opacity:0;position:absolute}.foxit-checkbox-checkmark{background-color:#fff;border:1px solid #b3b3b3;border-radius:4px;height:20px;left:0;position:absolute;top:0;width:20px}.foxit-checkbox-content{line-height:20px}.foxit-checkbox-container input:checked~.foxit-checkbox-checkmark{background-color:#ff5f00;border:none}.foxit-checkbox-checkmark:after{content:"";display:none;position:absolute}.foxit-checkbox-container input:checked~.foxit-checkbox-checkmark:after{display:block}.foxit-checkbox-container .foxit-checkbox-checkmark:after{border:solid #fff;border-width:0 2px 2px 0;height:10px;left:7px;top:4px;transform:rotate(45deg);width:6px}.foxit-checkbox-container.disabled{color:#00000040;cursor:not-allowed;opacity:.6}.foxit-checkbox-checkmark.disabled{background-color:#f5f5f5;border:1px solid #d9d9d9}.foxit-empty{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:20px;text-align:center}.foxit-empty-image{margin-bottom:16px}.foxit-empty-description{color:#757575;font-size:14px}.foxit-form-item{margin-bottom:16px}.foxit-form-item label{color:#525252;display:block;font-size:14px;font-weight:500;margin-bottom:8px}.foxit-form-required{color:#e22727}.foxit-form-error-text{color:#e22727;font-size:12px;margin-top:8px}.foxit-form-warning-text{color:orange;margin-top:8px}.foxit-form-item>.foxit-form-error-component .foxit-checkbox-container,.foxit-form-item>.foxit-form-error-component .foxit-input-wrapper,.foxit-form-item>.foxit-form-error-component .foxit-radio-container,.foxit-form-item>.foxit-form-error-component .foxit-select-wrapper>:nth-child(3){border:1px solid #e22727!important}.foxit-form-item>.foxit-form-warning-component .foxit-checkbox-container,.foxit-form-item>.foxit-form-warning-component .foxit-input-wrapper,.foxit-form-item>.foxit-form-warning-component .foxit-radio-container,.foxit-form-item>.foxit-form-warning-component .foxit-select-wrapper>:nth-child(3){border-color:orange!important}.foxit-input-wrapper{align-items:center;border:1px solid #d9d9d9;border-radius:10px;display:flex;font-size:14px;font-weight:400;padding:11px 16px;transition:border-color .3s}.foxit-input-wrapper:focus-within{border-color:#ff5f00!important}.foxit-input-wrapper:hover{border-color:#757575}.foxit-input-element{border:none;color:#525252;flex:1;line-height:24px;outline:none!important}.foxit-input-element::placeholder{color:#b3b3b3}.foxit-input-addon{align-items:center;color:#b3b3b3;cursor:pointer;display:flex;padding:0 8px;transition:color .3s}.foxit-input-wrapper:focus-within .foxit-input-addon{color:#ff5f00!important}.foxit-input-wrapper:hover .foxit-input-addon{color:#757575}.foxit-input-wrapper :disabled,.foxit-input-wrapper-disabled{background-color:#f8f8f8}.foxit-input-wrapper-disabled:hover{border-color:#d9d9d9}.foxit-input-wrapper-disabled .foxit-input-element{color:#b3b3b3}.foxit-pagination-container{align-items:center;display:flex;justify-content:center}.foxit-pagination-button,.foxit-pagination-next,.foxit-pagination-prev{background-color:initial;border:none;border-radius:10px;color:#757575;cursor:pointer;font-size:16px;font-weight:500;height:48px;margin:0 4px;min-width:48px;padding:0 12px;transition:background-color .3s ease,color .3s ease}.foxit-pagination-next:hover,.foxit-pagination-prev:hover{color:#ff5f00}.foxit-pagination-button:hover{background-color:#ff5f001a}.foxit-pagination-button:disabled{background-color:#ff5f00;color:#fff;cursor:default}.foxit-radio-container{cursor:pointer;display:inline-block;padding-left:25px;position:relative;-webkit-user-select:none;user-select:none}.foxit-radio-container input{cursor:pointer;opacity:0;position:absolute}.foxit-radio-checkmark{background-color:#fff;border:1px solid #b3b3b3;border-radius:50%;height:20px;left:0;position:absolute;top:0;width:20px}.foxit-radio-content{line-height:20px}.foxit-radio-container input:checked~.foxit-radio-checkmark{background-color:#fff;border:1px solid #ff5f00}.foxit-radio-checkmark:after{content:"";display:none;position:absolute}.foxit-radio-container input:checked~.foxit-radio-checkmark:after{display:block}.foxit-radio-container .foxit-radio-checkmark:after{background:#ff5f00;border-radius:50%;height:10px;left:4px;top:4px;width:10px}.foxit-radio-container.disabled{cursor:not-allowed;opacity:.6}.foxit-table{border:1px solid #ff5f00;border-radius:10px;color:#373737;min-height:200px;overflow:hidden;position:relative}.foxit-table-loading{align-items:center;background-color:#ffffffb3;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.foxit-table-icon-loading{animation:spin 1s linear infinite;color:#ff5f00}.foxit-table-container{border-collapse:collapse;table-layout:fixed;width:100%}.foxit-table-container td,.foxit-table-container th{word-wrap:break-word;height:70px;min-height:70px;padding:24px;white-space:pre-wrap}.foxit-table-container th{background-color:#fff6f0;font-size:16px;font-weight:700}.foxit-table-container td{font-size:14px;font-weight:400}.foxit-table-container .foxit-even-row{background-color:#fff}.foxit-table-container .foxit-odd-row{background-color:#fff6f0}.foxit-tabs{display:flex;flex-wrap:wrap;gap:8px}.foxit-tab-item{background-color:#f1f3f4;border:none;border-radius:10px;color:#757575;cursor:pointer;font-size:14px;font-weight:600;padding:14px 20px;transition:background-color .3s,color .3s}.foxit-tab-item.active{background-color:#ff5f00;color:#fff}.foxit-tab-item:hover:not(.active){background-color:#e0e0e0}.foxit-tab-content{margin-top:16px}.foxit-tag{border-radius:5px;display:inline-block;font-size:12px;font-weight:600;min-height:24px;padding:4px 8px}.foxit-tag-active{background-color:#edfafa;color:#0f8b8d}.foxit-tag-canceled{background-color:#ffecec;color:#e22727}.foxit-tag-pending{background-color:#fbf4d0;color:#9b8827}.foxit-tag-offline{background-color:#edecff;color:#6462c6}.foxit-tag-trial{background-color:#e4f4fe;color:#2288ce}.foxit-tag-expired{background-color:#ececec;color:#757575}.foxit-toast-container{left:50%;pointer-events:none;position:fixed;top:0;transform:translateX(-50%);transition-delay:0s;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:2000}.foxit-toast-loading{animation:spin 1s linear infinite;color:#ff5f00}.foxit-toast-loading-overlay{background-color:#000;height:100vh;inset:0;opacity:.15;pointer-events:auto;position:fixed;z-index:10}.foxit-toast-item{align-items:center;background-color:#fff;border:none;border-radius:50px;color:#525252;display:flex;flex-direction:row;gap:8px;justify-content:center;margin-bottom:16px;margin-left:auto;margin-right:auto;padding:9px 12px;position:relative;top:102px;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:fit-content;z-index:20}.foxit-toast-item-success{background-color:#ddfae8;color:#1f7f40}.foxit-toast-item-error{background-color:#fae5dd;color:#e22727}.foxit-toast-item-warning{background-color:#fff0e7;color:#525252}.foxit-toast-enter{opacity:0;transform:translateY(-100%)}.foxit-toast-enter-active{transition:all .5s ease-out}.foxit-toast-enter-active,.foxit-toast-exit{opacity:1;transform:translateY(0)}.foxit-toast-exit-active{opacity:0;transform:translateY(-100%);transition:all .5s ease-in}.foxit-tooltip-container{display:inline-block;position:relative;width:auto}.foxit-tooltip-content{background-color:#525252;border-radius:10px;color:#fff;max-width:300px;padding:12px 16px;position:absolute;width:max-content;z-index:1}.foxit-tooltip-arrow{border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid #525252;bottom:-5px;height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.foxit-button{align-items:center;border:0;border-radius:10px;cursor:pointer;display:flex;font-size:14px;font-weight:600;justify-content:center;letter-spacing:.42px}.foxit-button:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.foxit-button:hover{opacity:.8}.foxit-button-primary{background-color:#ff5f00;color:#fff}.foxit-button-secondary{background-color:#fff;border:2px solid #ff5f00;color:#ff5f00}.foxit-button-small{border-radius:5px;height:38px;padding-left:24px;padding-right:24px}.foxit-button-small svg{height:16px;width:16px}.foxit-button-medium{border-radius:5px;height:44px;padding-left:32px;padding-right:32px}.foxit-button-medium svg{height:20px;width:20px}.foxit-button-large{height:56px;padding-left:32px;padding-right:32px}.foxit-button-prevent-click{pointer-events:none}.foxit-button-loading{animation:spin 1s linear infinite;margin-right:8px}.foxit-button-primary .foxit-button-loading{color:#fff}.foxit-button-secondary .foxit-button-loading{color:#ff5f00}.foxit-menu{border-radius:10px;box-shadow:0 2px 8px #00000026;font-size:14px;overflow:hidden}.foxit-menu-item-content{align-items:center;cursor:pointer;display:flex;padding:12px 16px}.foxit-menu-item{padding-left:0}.foxit-menu-item.selected{background-color:#fff6f0!important;color:#ff5f00;font-weight:600}.foxit-menu-item:hover{background-color:#f5f6f8}.foxit-menu-submenu-title{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:12px 16px}.foxit-menu-submenu-title:hover{background-color:#f5f6f8}.foxit-menu-icon{transition:transform .3s ease-in-out}.foxit-menu-rotated-icon{transform:rotate(180deg)}.foxit-menu-item-label{font-weight:600}.foxit-modal-content-container{background-color:#fff;border-radius:10px;display:flex;flex-direction:column;gap:24px;justify-content:space-between;min-width:320px;padding:24px}.foxit-modal-success{background:linear-gradient(135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3)}.foxit-modal-head{align-items:center;display:flex;justify-content:space-between}.foxit-modal-children{max-height:60vh;overflow-y:auto}.foxit-modal-title{font-size:20px;font-weight:500}.foxit-modal-success-icon{display:flex;height:94px;margin-top:-50px;width:115px}.foxit-modal-close-button{align-items:center;cursor:pointer;display:flex;height:16px;justify-content:center;width:16px}.foxit-modal-close-button svg{stroke:#6b7280}.foxit-modal-close-button:hover svg{stroke:#ea580c}.foxit-modal-footer{display:flex;gap:16px;justify-content:flex-end}.foxit-modal-fixed-layout{align-items:center;display:flex;flex-direction:column;inset:0;padding:36px;position:fixed;z-index:99}.foxit-modal-justify-center{justify-content:center}.foxit-modal-justify-top{justify-content:flex-start;padding-top:96px}.foxit-modal-justify-bottom{justify-content:flex-end}.foxit-modal-overlay{cursor:pointer;height:100%;inset:0;position:fixed;width:100%;z-index:99}.foxit-modal-overlay-bg{background-color:#00000026;height:100%;inset:0;position:absolute;width:100%}.foxit-modal-content{align-items:center;display:flex;font-size:16px;font-weight:400;justify-content:center;max-height:100%;width:auto;z-index:99}.foxit-modal-opacity-0{opacity:0}.foxit-modal-opacity-100{opacity:1}.foxit-modal-scale-0{transform:scale(0)}.foxit-modal-scale-100{transform:scale(1)}.foxit-modal-transition{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.foxit-modal-hide-overflow{overflow-y:hidden}.foxit-switch{background-color:#ccc;border-radius:100px;cursor:pointer;display:inline-block;height:22px;line-height:22px;position:relative;transition:background-color .3s;width:40px}.foxit-switch.small{height:14px;line-height:14px;width:24px}.foxit-switch.checked{background-color:#ff5f00}.foxit-switch-handle{background-color:#fff;border-radius:50%;height:18px;position:absolute;top:2px;transform:translateX(1px);transition:transform .3s;width:18px}.foxit-switch.small .foxit-switch-handle{height:12px;top:1px;width:12px}.foxit-switch.checked .foxit-switch-handle{transform:translateX(20px)}.foxit-switch.small.checked .foxit-switch-handle{transform:translateX(11px)}.foxit-spin{display:inline-block;pointer-events:none;position:relative;width:100%}.foxit-spin .foxit-spin-container{opacity:.5}.foxit-spin-spinning{animation:spin 1s linear infinite;color:#ff5f00;margin-right:8px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.foxit-spin-icon{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.foxit-spin-small .foxit-spin-icon{font-size:16px}.foxit-spin-default .foxit-spin-icon{font-size:24px}.foxit-spin-large .foxit-spin-icon{font-size:32px}.foxit-alert{align-items:flex-start;border-radius:5px;display:flex;padding:12px}.foxit-alert-icon-container{height:20px;margin-right:8px;width:20px}.foxit-alert-icon{height:20px;width:20px}.foxit-alert-message{font-size:12px}.foxit-alert-success,.foxit-alert-warning{background-color:#f5fff2;border:1px solid #30dc6b}.foxit-alert-error{background-color:#fae5dd;border:1px solid #e22727}.foxit-alert-gradient{background:linear-gradient(135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3);border:1px solid #ff5f00;display:block}.foxit-quantity,.foxit-quantity-button{align-items:center;display:flex}.foxit-quantity-button{background-color:#ff5f00;border:none;border-radius:4px;color:#fff;cursor:pointer;height:16px;justify-content:center;margin-left:8px;margin-right:8px;width:16px}.foxit-quantity-button:disabled{background-color:#ffc2a0;cursor:not-allowed}.foxit-quantity-button>div{font-size:16px;margin-top:-3px}.foxit-quantity-number{border:1px solid #b3b3b3;border-radius:4px;color:#525252;flex:1;font-size:14px;height:24px;line-height:24px;outline:none!important;text-align:center;width:48px}
package/es/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import Checkbox from './Checkbox/Checkbox';
2
2
  import Empty from './Empty/Empty';
3
- import Form, { FormItem } from './Form/Form';
3
+ import Form, { FormItem, useFormWatch } from './Form/Form';
4
4
  import Input, { SearchInput, PasswordInput } from './Input/Input';
5
5
  import Pagination from './Pagination/Pagination';
6
6
  import Radio from './Radio/Radio';
@@ -14,7 +14,7 @@ import Tooltip from './Tooltip/Tooltip';
14
14
  export { Button } from './Button/Button';
15
15
  export { Checkbox };
16
16
  export { Empty };
17
- export { Form, FormItem };
17
+ export { Form, FormItem, useFormWatch };
18
18
  export type { FormRefInstance } from './Form/Form.types';
19
19
  export { Icon } from './Icon/index';
20
20
  export { Input, SearchInput, PasswordInput };
package/es/index.js CHANGED
@@ -19,3 +19,4 @@ export { Spin } from './Spin/Spin.js';
19
19
  export { Alert } from './Alert/Alert.js';
20
20
  export { Quantity } from './Quantity/Quantity.js';
21
21
  export { default as FormItem } from './Form/FormItem.js';
22
+ export { useFormWatch } from './Form/useFormWatch.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "foxit-component",
3
- "version": "0.0.1-alpha.24",
3
+ "version": "0.0.1-alpha.25",
4
4
  "author": {
5
5
  "name": "linye",
6
6
  "email": "869675630@qq.com"