foxit-component 1.0.1 → 1.0.3
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/Alert/Alert.d.ts +1 -0
- package/es/Alert/Alert.js +3 -2
- package/es/Button/Button.d.ts +2 -1
- package/es/Button/Button.js +2 -2
- package/es/Form/Form.d.ts +3 -0
- package/es/Form/Form.js +6 -4
- package/es/Form/Form.types.d.ts +2 -0
- package/es/Form/FormItem.d.ts +2 -0
- package/es/Form/FormItem.js +17 -4
- package/es/Form/FormProvider.d.ts +1 -0
- package/es/Form/FormProvider.js +29 -4
- package/es/Quantity/Quantity.d.ts +2 -0
- package/es/Quantity/Quantity.js +5 -4
- package/es/Steps/Steps.d.ts +4 -0
- package/es/Steps/Steps.js +43 -0
- package/es/Steps/Steps.types.d.ts +14 -0
- package/es/constants/icons.d.ts +1 -0
- package/es/constants/icons.js +1 -0
- package/es/index.css +1 -1
- package/es/index.d.ts +2 -0
- package/es/index.js +1 -0
- package/package.json +1 -1
package/es/Alert/Alert.d.ts
CHANGED
package/es/Alert/Alert.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { Icon } from '../Icon/index.js';
|
|
4
|
+
import classNames from 'classnames';
|
|
4
5
|
|
|
5
6
|
var Alert = function (_a) {
|
|
6
|
-
var message = _a.message, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.type, type = _c === void 0 ? 'success' : _c;
|
|
7
|
+
var message = _a.message, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.type, type = _c === void 0 ? 'success' : _c, className = _a.className;
|
|
7
8
|
var getIconName = function (type) {
|
|
8
9
|
switch (type) {
|
|
9
10
|
case 'success':
|
|
@@ -18,7 +19,7 @@ var Alert = function (_a) {
|
|
|
18
19
|
return 'WarningColoursOutlined';
|
|
19
20
|
}
|
|
20
21
|
};
|
|
21
|
-
return (jsxs("div", __assign({ className:
|
|
22
|
+
return (jsxs("div", __assign({ className: classNames('foxit-alert', "foxit-alert-".concat(type), className) }, { children: [showIcon && (jsx("div", __assign({ className: "foxit-alert-icon-container" }, { children: jsx(Icon, { name: getIconName(type), className: "foxit-alert-icon" }) }))), jsx("div", __assign({ className: "foxit-alert-message" }, { children: message }))] })));
|
|
22
23
|
};
|
|
23
24
|
|
|
24
25
|
export { Alert };
|
package/es/Button/Button.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
|
3
3
|
export interface ButtonProps {
|
|
4
4
|
primary?: boolean;
|
|
5
5
|
size?: 'small' | 'medium' | 'large';
|
|
6
|
+
shape?: 'default' | 'circle';
|
|
6
7
|
children?: React.ReactNode;
|
|
7
8
|
onClick?: () => void;
|
|
8
9
|
className?: string;
|
|
@@ -10,4 +11,4 @@ export interface ButtonProps {
|
|
|
10
11
|
[key: string]: unknown;
|
|
11
12
|
loading?: boolean;
|
|
12
13
|
}
|
|
13
|
-
export declare const Button: ({ primary, size, children, className, style, loading, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const Button: ({ primary, size, shape, children, className, style, loading, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
package/es/Button/Button.js
CHANGED
|
@@ -4,9 +4,9 @@ import classNames from 'classnames';
|
|
|
4
4
|
import { Icon } from '../Icon/index.js';
|
|
5
5
|
|
|
6
6
|
var Button = function (_a) {
|
|
7
|
-
var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.
|
|
7
|
+
var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.shape, shape = _d === void 0 ? 'default' : _d, _e = _a.children, children = _e === void 0 ? '' : _e, className = _a.className, style = _a.style, loading = _a.loading, props = __rest(_a, ["primary", "size", "shape", "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, loading && 'foxit-button-prevent-click'), 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), shape === 'circle' && 'foxit-button-circle', 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
|
@@ -9,6 +9,9 @@ interface FormProps {
|
|
|
9
9
|
initialValues?: {
|
|
10
10
|
[key: string]: unknown;
|
|
11
11
|
};
|
|
12
|
+
className?: string;
|
|
13
|
+
style?: React.CSSProperties;
|
|
14
|
+
layout?: 'horizontal' | 'horizontal-embed';
|
|
12
15
|
}
|
|
13
16
|
export { FormItem, useFormWatch };
|
|
14
17
|
declare const _default: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<FormRefInstance>>;
|
package/es/Form/Form.js
CHANGED
|
@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
|
|
4
4
|
import FormProvider from './FormProvider.js';
|
|
5
5
|
import './FormContext.js';
|
|
6
|
+
import 'classnames';
|
|
6
7
|
|
|
7
8
|
var Form = function (_a, ref) {
|
|
8
|
-
var children = _a.children, onFinish = _a.onFinish, initialValues = _a.initialValues;
|
|
9
|
+
var children = _a.children, onFinish = _a.onFinish, initialValues = _a.initialValues, className = _a.className, style = _a.style, _b = _a.layout, layout = _b === void 0 ? 'horizontal' : _b;
|
|
9
10
|
var formRef = useRef(null);
|
|
10
11
|
var handleSubmit = useCallback(function (e) {
|
|
11
12
|
var _a;
|
|
@@ -21,17 +22,18 @@ var Form = function (_a, ref) {
|
|
|
21
22
|
}
|
|
22
23
|
}, [onFinish]);
|
|
23
24
|
useImperativeHandle(ref, function () {
|
|
24
|
-
var _a, _b, _c, _d, _e, _f;
|
|
25
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
25
26
|
return ({
|
|
26
27
|
setFieldsValue: (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldsValue,
|
|
27
28
|
getFieldsValue: (_b = formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue,
|
|
28
29
|
resetFields: (_c = formRef.current) === null || _c === void 0 ? void 0 : _c.resetFields,
|
|
29
30
|
validateFields: (_d = formRef.current) === null || _d === void 0 ? void 0 : _d.validateFields,
|
|
30
31
|
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
|
|
32
|
+
subscribe: (_f = formRef.current) === null || _f === void 0 ? void 0 : _f.subscribe,
|
|
33
|
+
updateFieldRules: (_g = formRef.current) === null || _g === void 0 ? void 0 : _g.updateFieldRules
|
|
32
34
|
});
|
|
33
35
|
});
|
|
34
|
-
return (jsx(FormProvider, __assign({ initialValues: initialValues, ref: formRef }, { children: jsx("form", __assign({ onSubmit: handleSubmit }, { children: children })) })));
|
|
36
|
+
return (jsx(FormProvider, __assign({ initialValues: initialValues, layout: layout, ref: formRef }, { children: jsx("form", __assign({ onSubmit: handleSubmit, className: className, style: style }, { children: children })) })));
|
|
35
37
|
};
|
|
36
38
|
var Form$1 = forwardRef(Form);
|
|
37
39
|
|
package/es/Form/Form.types.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ export interface FormInstance {
|
|
|
35
35
|
}[]) => void;
|
|
36
36
|
registerField: (name: string, rules: ValidationRule[]) => void;
|
|
37
37
|
unregisterField: (name: string) => void;
|
|
38
|
+
updateFieldRules: (name: string, rules: ValidationRule[]) => void;
|
|
38
39
|
subscribe: (fieldNames: string[], callback: (values: {
|
|
39
40
|
[key: string]: unknown;
|
|
40
41
|
}) => void) => () => void;
|
|
@@ -45,4 +46,5 @@ export interface FormContextProps {
|
|
|
45
46
|
formFields: {
|
|
46
47
|
[key: string]: FormField;
|
|
47
48
|
};
|
|
49
|
+
layout: 'horizontal' | 'horizontal-embed';
|
|
48
50
|
}
|
package/es/Form/FormItem.d.ts
CHANGED
package/es/Form/FormItem.js
CHANGED
|
@@ -1,19 +1,29 @@
|
|
|
1
1
|
import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
2
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import React, { useContext, useEffect, useCallback } from 'react';
|
|
3
|
+
import React, { useContext, useRef, useEffect, useCallback } from 'react';
|
|
4
4
|
import { FormContext } from './FormContext.js';
|
|
5
|
+
import classNames from 'classnames';
|
|
5
6
|
|
|
6
7
|
var FormItem = function (_a) {
|
|
7
8
|
var _b, _c, _d;
|
|
8
|
-
var name = _a.name, label = _a.label, extra = _a.extra, _e = _a.rules, rules = _e === void 0 ? [] : _e, children = _a.children;
|
|
9
|
-
var _f = useContext(FormContext), form = _f.form, formFields = _f.formFields;
|
|
9
|
+
var name = _a.name, label = _a.label, extra = _a.extra, _e = _a.rules, rules = _e === void 0 ? [] : _e, children = _a.children, className = _a.className, layout = _a.layout;
|
|
10
|
+
var _f = useContext(FormContext), form = _f.form, formFields = _f.formFields, globalLayout = _f.layout;
|
|
11
|
+
var currentLayout = layout || globalLayout;
|
|
12
|
+
var rulesRef = useRef(rules);
|
|
10
13
|
// Register field when component mounts
|
|
11
14
|
useEffect(function () {
|
|
12
15
|
form.registerField(name, rules);
|
|
16
|
+
rulesRef.current = rules;
|
|
13
17
|
return function () {
|
|
14
18
|
form.unregisterField(name);
|
|
15
19
|
};
|
|
16
20
|
}, []);
|
|
21
|
+
useEffect(function () {
|
|
22
|
+
if (JSON.stringify(rulesRef.current) !== JSON.stringify(rules)) {
|
|
23
|
+
form.updateFieldRules(name, rules);
|
|
24
|
+
rulesRef.current = rules;
|
|
25
|
+
}
|
|
26
|
+
}, [rules]);
|
|
17
27
|
var error = (_b = formFields[name]) === null || _b === void 0 ? void 0 : _b.error;
|
|
18
28
|
var warning = (_c = formFields[name]) === null || _c === void 0 ? void 0 : _c.warning;
|
|
19
29
|
var value = (_d = formFields[name]) === null || _d === void 0 ? void 0 : _d.value;
|
|
@@ -23,7 +33,10 @@ var FormItem = function (_a) {
|
|
|
23
33
|
var newValue = ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.value) !== undefined ? e.target.value : e;
|
|
24
34
|
form.setFieldsValue((_a = {}, _a[name] = newValue, _a));
|
|
25
35
|
}, [form, name]);
|
|
26
|
-
return (jsxs("div", __assign({ className:
|
|
36
|
+
return (jsxs("div", __assign({ className: classNames('foxit-form-item', className), style: __assign(__assign({}, (error || warning ? { marginBottom: 0 } : {})), (currentLayout === 'horizontal-embed' ? { marginTop: '-18px' } : {}) // 减少 18px
|
|
37
|
+
) }, { children: [label && (jsxs("label", __assign({ className: classNames({
|
|
38
|
+
'foxit-form-item-embedlabel': currentLayout === 'horizontal-embed'
|
|
39
|
+
}) }, { children: [label, rules.some(function (rule) { return rule.required; }) && jsx("span", __assign({ className: "foxit-form-required" }, { children: "*" })), extra && jsx(Fragment, { children: extra })] }))), jsx("span", __assign({ className: "".concat(error ? 'foxit-form-error-component' : warning ? 'foxit-form-warning-component' : '') }, { children: React.Children.map(children, function (child) {
|
|
27
40
|
return React.cloneElement(child, {
|
|
28
41
|
value: value,
|
|
29
42
|
onChange: handleChange
|
|
@@ -5,6 +5,7 @@ interface FormProviderProps {
|
|
|
5
5
|
initialValues?: {
|
|
6
6
|
[key: string]: unknown;
|
|
7
7
|
};
|
|
8
|
+
layout?: 'horizontal' | 'horizontal-embed';
|
|
8
9
|
}
|
|
9
10
|
declare const _default: React.ForwardRefExoticComponent<FormProviderProps & React.RefAttributes<FormInstance>>;
|
|
10
11
|
export default _default;
|
package/es/Form/FormProvider.js
CHANGED
|
@@ -4,14 +4,16 @@ import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHand
|
|
|
4
4
|
import { FormContext } from './FormContext.js';
|
|
5
5
|
|
|
6
6
|
var FormProvider = function (_a, ref) {
|
|
7
|
-
var children = _a.children, _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b;
|
|
7
|
+
var children = _a.children, _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, _c = _a.layout, layout = _c === void 0 ? 'horizontal' : _c;
|
|
8
8
|
var formFieldsRef = useRef({});
|
|
9
|
-
var
|
|
9
|
+
var _d = useState({}), forceUpdate = _d[1]; // Used to force re-render when ref changes
|
|
10
10
|
var formInstanceRef = useRef({});
|
|
11
11
|
var subscribersRef = useRef([]);
|
|
12
|
+
var initializedRef = useRef(false);
|
|
12
13
|
// 初始值的设置
|
|
13
14
|
useEffect(function () {
|
|
14
|
-
if (Object.keys(initialValues).length > 0) {
|
|
15
|
+
if (Object.keys(initialValues).length > 0 && !initializedRef.current) {
|
|
16
|
+
initializedRef.current = true;
|
|
15
17
|
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
16
18
|
for (var key in initialValues) {
|
|
17
19
|
if (!formFieldsRef.current[key]) {
|
|
@@ -241,6 +243,28 @@ var FormProvider = function (_a, ref) {
|
|
|
241
243
|
});
|
|
242
244
|
forceUpdate({}); // Trigger re-render
|
|
243
245
|
}, []);
|
|
246
|
+
// 更新字段规则
|
|
247
|
+
var updateFieldRules = useCallback(function (name, rules) {
|
|
248
|
+
if (formFieldsRef.current[name]) {
|
|
249
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
250
|
+
formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { rules: rules || [] });
|
|
251
|
+
// 立即重新验证该字段
|
|
252
|
+
var currentValue = formFieldsRef.current[name].value;
|
|
253
|
+
var validation = validateField(name, currentValue, rules);
|
|
254
|
+
if (validation) {
|
|
255
|
+
if (validation.type === 'error') {
|
|
256
|
+
formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { error: validation.message, warning: undefined });
|
|
257
|
+
}
|
|
258
|
+
else if (validation.type === 'warning') {
|
|
259
|
+
formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { warning: validation.message, error: undefined });
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
else {
|
|
263
|
+
formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { error: undefined, warning: undefined });
|
|
264
|
+
}
|
|
265
|
+
forceUpdate({}); // Trigger re-render
|
|
266
|
+
}
|
|
267
|
+
}, [validateField]);
|
|
244
268
|
formInstanceRef.current = {
|
|
245
269
|
setFieldsValue: setFieldsValue,
|
|
246
270
|
getFieldsValue: getFieldsValue,
|
|
@@ -249,11 +273,12 @@ var FormProvider = function (_a, ref) {
|
|
|
249
273
|
setFieldsStatus: setFieldsStatus,
|
|
250
274
|
registerField: registerField,
|
|
251
275
|
unregisterField: unregisterField,
|
|
276
|
+
updateFieldRules: updateFieldRules,
|
|
252
277
|
subscribe: subscribe
|
|
253
278
|
};
|
|
254
279
|
// 暴露给外部的方法
|
|
255
280
|
useImperativeHandle(ref, function () { return (__assign({}, formInstanceRef.current)); });
|
|
256
|
-
return (jsx(FormContext.Provider, __assign({ value: { form: formInstanceRef.current, formFields: formFieldsRef.current } }, { children: children })));
|
|
281
|
+
return (jsx(FormContext.Provider, __assign({ value: { form: formInstanceRef.current, formFields: formFieldsRef.current, layout: layout } }, { children: children })));
|
|
257
282
|
};
|
|
258
283
|
var FormProvider$1 = forwardRef(FormProvider);
|
|
259
284
|
|
package/es/Quantity/Quantity.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
1
|
+
import { __rest, __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
+
import classNames from 'classnames';
|
|
4
5
|
|
|
5
6
|
var Quantity = function (_a) {
|
|
6
|
-
var value = _a.value, onChange = _a.onChange, min = _a.min, max = _a.max;
|
|
7
|
+
var value = _a.value, onChange = _a.onChange, min = _a.min, max = _a.max, className = _a.className, props = __rest(_a, ["value", "onChange", "min", "max", "className"]);
|
|
7
8
|
var _b = useState(value || min || 0), internalValue = _b[0], setInternalValue = _b[1];
|
|
8
9
|
var currentValue = value !== undefined ? value : internalValue;
|
|
9
10
|
var handleIncrement = function () {
|
|
@@ -37,9 +38,9 @@ var Quantity = function (_a) {
|
|
|
37
38
|
}
|
|
38
39
|
setInternalValue(newValue);
|
|
39
40
|
};
|
|
40
|
-
return (jsxs("div", __assign({ className:
|
|
41
|
+
return (jsxs("div", __assign({ className: classNames('foxit-quantity', className) }, { children: [jsx("button", __assign({ className: "foxit-quantity-button", onClick: handleDecrement, disabled: min !== undefined && currentValue <= min }, { children: jsx("div", { children: "-" }) })), jsx("input", __assign({
|
|
41
42
|
// type="number"
|
|
42
|
-
value: currentValue, onChange: handleChange, min: min, max: max, className: "foxit-quantity-number" }), jsx("button", __assign({ className: "foxit-quantity-button", onClick: handleIncrement, disabled: max !== undefined && currentValue >= max }, { children: jsx("div", { children: "+" }) }))] })));
|
|
43
|
+
value: currentValue, onChange: handleChange, min: min, max: max, className: "foxit-quantity-number" }, props)), jsx("button", __assign({ className: "foxit-quantity-button", onClick: handleIncrement, disabled: max !== undefined && currentValue >= max }, { children: jsx("div", { children: "+" }) }))] })));
|
|
43
44
|
};
|
|
44
45
|
|
|
45
46
|
export { Quantity };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { Icon } from '../Icon/index.js';
|
|
5
|
+
|
|
6
|
+
var Steps = function (_a) {
|
|
7
|
+
var _b = _a.current, current = _b === void 0 ? 0 : _b, steps = _a.steps, onChange = _a.onChange, className = _a.className, style = _a.style, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, _d = _a.status, status = _d === void 0 ? 'process' : _d;
|
|
8
|
+
var getStepStatus = function (index) {
|
|
9
|
+
if (index < current)
|
|
10
|
+
return 'finish';
|
|
11
|
+
if (index === current)
|
|
12
|
+
return status;
|
|
13
|
+
return 'wait';
|
|
14
|
+
};
|
|
15
|
+
var handleStepClick = function (index) {
|
|
16
|
+
if (onChange) {
|
|
17
|
+
onChange(index);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
var renderStepIcon = function (index, stepStatus) {
|
|
21
|
+
switch (stepStatus) {
|
|
22
|
+
case 'finish':
|
|
23
|
+
return (jsx("div", __assign({ className: "foxit-steps-icon foxit-steps-icon-finish" }, { children: jsx(Icon, { name: "CheckOutlined" }) })));
|
|
24
|
+
case 'process':
|
|
25
|
+
return jsx("div", { className: "foxit-steps-icon foxit-steps-icon-process" });
|
|
26
|
+
case 'wait':
|
|
27
|
+
default:
|
|
28
|
+
return jsx("div", { className: "foxit-steps-icon foxit-steps-icon-wait" });
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
var stepsClassName = classNames('foxit-steps', "foxit-steps-".concat(direction), className);
|
|
32
|
+
return (jsx("div", __assign({ className: stepsClassName, style: style }, { children: steps.map(function (step, index) {
|
|
33
|
+
var stepStatus = getStepStatus(index);
|
|
34
|
+
var isLast = index === steps.length - 1;
|
|
35
|
+
var isClickable = onChange;
|
|
36
|
+
var stepClassName = classNames('foxit-steps-item', "foxit-steps-item-".concat(stepStatus), {
|
|
37
|
+
'foxit-steps-item-clickable': isClickable
|
|
38
|
+
});
|
|
39
|
+
return (jsxs("div", __assign({ className: stepClassName }, { children: [jsxs("div", __assign({ className: "foxit-steps-item-container", onClick: function () { return isClickable && handleStepClick(index); } }, { children: [jsx("div", __assign({ className: "foxit-steps-item-icon" }, { children: renderStepIcon(index, stepStatus) })), jsxs("div", __assign({ className: "foxit-steps-item-content" }, { children: [jsx("div", __assign({ className: "foxit-steps-item-title" }, { children: step.title })), step.description && (jsx("div", __assign({ className: "foxit-steps-item-description" }, { children: step.description })))] }))] })), !isLast && (jsx("div", __assign({ className: "foxit-steps-item-tail" }, { children: jsx("div", { className: "foxit-steps-item-tail-line" }) })))] }), index));
|
|
40
|
+
}) })));
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export { Steps };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface StepItem {
|
|
3
|
+
title: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
}
|
|
6
|
+
export interface StepsProps {
|
|
7
|
+
current?: number;
|
|
8
|
+
steps: StepItem[];
|
|
9
|
+
onChange?: (current: number) => void;
|
|
10
|
+
className?: string;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
direction?: 'horizontal' | 'vertical';
|
|
13
|
+
status?: 'wait' | 'process' | 'finish';
|
|
14
|
+
}
|
package/es/constants/icons.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export declare const ICONS: Readonly<{
|
|
|
15
15
|
EyeOutlined: (className?: string) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
MoreOutlined: (className?: string) => import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
LoadingOutlined: (className?: string) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
CheckOutlined: (className?: string) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
CloseOutlined: (className?: string) => import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
QuestionCircleOutlined: (className?: string) => import("react/jsx-runtime").JSX.Element;
|
|
20
21
|
EditorOutlined: (className?: string) => import("react/jsx-runtime").JSX.Element;
|
package/es/constants/icons.js
CHANGED
|
@@ -17,6 +17,7 @@ var ICONS = Object.freeze({
|
|
|
17
17
|
EyeOutlined: function (className) { return (jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsx("path", { d: "M21.7359 11.3793L21.7359 11.3794C21.8538 11.5649 21.9165 11.7802 21.9165 12C21.9165 12.2198 21.8538 12.4351 21.7359 12.6206L21.7359 12.6207C18.8747 17.1297 15.6258 19.4163 12.0001 19.4163C8.37434 19.4163 5.12546 17.1297 2.26425 12.6207L2.26422 12.6206C2.14632 12.4351 2.08371 12.2198 2.08371 12C2.08371 11.7802 2.14632 11.5649 2.26422 11.3794L2.26425 11.3793C5.12546 6.87035 8.37434 4.58371 12.0001 4.58371C15.6258 4.58371 18.8747 6.87035 21.7359 11.3793ZM12.0001 7.41629C9.4686 7.41629 7.41637 9.46852 7.41637 12C7.41637 14.5315 9.4686 16.5837 12.0001 16.5837C14.5316 16.5837 16.5838 14.5315 16.5838 12C16.5838 9.46852 14.5316 7.41629 12.0001 7.41629ZM14.9164 12C14.9164 13.6105 13.6106 14.9163 12.0001 14.9163C10.3896 14.9163 9.08378 13.6105 9.08378 12C9.08378 10.3895 10.3896 9.08371 12.0001 9.08371C13.6106 9.08371 14.9164 10.3895 14.9164 12Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "0.167411" }) }))); },
|
|
18
18
|
MoreOutlined: function (className) { return (jsx("svg", __assign({ width: "12", height: "3", viewBox: "0 0 12 3", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsx("path", { d: "M0.460938 1.53125C0.460938 1.10417 0.570312 0.804688 0.789062 0.632812C1.01302 0.455729 1.28385 0.367188 1.60156 0.367188C1.91927 0.367188 2.1901 0.455729 2.41406 0.632812C2.64323 0.804688 2.75781 1.10417 2.75781 1.53125C2.75781 1.94792 2.64323 2.25 2.41406 2.4375C2.1901 2.61979 1.91927 2.71094 1.60156 2.71094C1.28385 2.71094 1.01302 2.61979 0.789062 2.4375C0.570312 2.25 0.460938 1.94792 0.460938 1.53125ZM4.85156 1.53125C4.85156 1.10417 4.96094 0.804688 5.17969 0.632812C5.40365 0.455729 5.67448 0.367188 5.99219 0.367188C6.3099 0.367188 6.58073 0.455729 6.80469 0.632812C7.03385 0.804688 7.14844 1.10417 7.14844 1.53125C7.14844 1.94792 7.03385 2.25 6.80469 2.4375C6.58073 2.61979 6.3099 2.71094 5.99219 2.71094C5.67448 2.71094 5.40365 2.61979 5.17969 2.4375C4.96094 2.25 4.85156 1.94792 4.85156 1.53125ZM9.24219 1.53125C9.24219 1.10417 9.35156 0.804688 9.57031 0.632812C9.79427 0.455729 10.0651 0.367188 10.3828 0.367188C10.7005 0.367188 10.9714 0.455729 11.1953 0.632812C11.4245 0.804688 11.5391 1.10417 11.5391 1.53125C11.5391 1.94792 11.4245 2.25 11.1953 2.4375C10.9714 2.61979 10.7005 2.71094 10.3828 2.71094C10.0651 2.71094 9.79427 2.61979 9.57031 2.4375C9.35156 2.25 9.24219 1.94792 9.24219 1.53125Z", fill: "currentColor" }) }))); },
|
|
19
19
|
LoadingOutlined: function (className) { return (jsx("svg", __assign({ viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "24px", height: "24px", fill: "currentColor", "aria-hidden": "true", className: className }, { children: jsx("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }) }))); },
|
|
20
|
+
CheckOutlined: function (className) { return (jsx("svg", __assign({ width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsx("path", { d: "M1 4L3.5 6.5L9 1", stroke: "currentColor", strokeWidth: "2" }) }))); },
|
|
20
21
|
CloseOutlined: function (className) { return (jsx("svg", __assign({ width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsx("path", { d: "M1.00025 13L13 1M12.9998 13L1 0.999998", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))); },
|
|
21
22
|
QuestionCircleOutlined: function (className) { return (jsx("svg", __assign({ width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsx("path", { d: "M6.99961 1.11328C5.85742 1.11328 4.74089 1.45198 3.79119 2.08654C2.8415 2.72111 2.1013 3.62304 1.66421 4.67828C1.22711 5.73353 1.11275 6.89469 1.33558 8.01493C1.55841 9.13517 2.10842 10.1642 2.91607 10.9718C3.72372 11.7795 4.75272 12.3295 5.87296 12.5523C6.99321 12.7751 8.15437 12.6608 9.20961 12.2237C10.2649 11.7866 11.1668 11.0464 11.8013 10.0967C12.4359 9.14701 12.7746 8.03047 12.7746 6.88828C12.7746 5.35666 12.1662 3.88776 11.0832 2.80474C10.0001 1.72172 8.53124 1.11328 6.99961 1.11328ZM7.36361 9.72328C7.24823 9.83218 7.09527 9.89236 6.93661 9.89128C6.85726 9.89282 6.77843 9.87809 6.70499 9.84799C6.63155 9.81789 6.56506 9.77307 6.50961 9.71628C6.45336 9.6619 6.40881 9.59659 6.37872 9.52436C6.34862 9.45214 6.33361 9.37452 6.33461 9.29628C6.33139 9.21775 6.34539 9.13946 6.37562 9.06691C6.40585 8.99436 6.45158 8.92929 6.50961 8.87628C6.56565 8.82076 6.63241 8.77722 6.70582 8.74834C6.77924 8.71946 6.85776 8.70583 6.93661 8.70828C7.01658 8.70528 7.09631 8.71863 7.17094 8.74752C7.24557 8.7764 7.31351 8.82022 7.37061 8.87628C7.42864 8.92929 7.47437 8.99436 7.5046 9.06691C7.53483 9.13946 7.54883 9.21775 7.54561 9.29628C7.5468 9.37725 7.53124 9.4576 7.49993 9.53228C7.46861 9.60697 7.4222 9.67437 7.36361 9.73028V9.72328ZM8.55361 6.50328C8.33257 6.73093 8.09886 6.94594 7.85361 7.14728C7.70967 7.26306 7.59264 7.40876 7.51061 7.57428C7.42001 7.7418 7.3742 7.92987 7.37761 8.12028V8.26028H6.50261V8.12028C6.4928 7.84907 6.55053 7.57966 6.67061 7.33628C6.91984 6.94271 7.23199 6.59272 7.59461 6.30028L7.73461 6.14628C7.8778 5.9777 7.95927 5.76537 7.96561 5.54428C7.96151 5.30371 7.86647 5.07362 7.69961 4.90028C7.60526 4.81469 7.49469 4.7489 7.37445 4.70681C7.25421 4.66473 7.12675 4.64721 6.99961 4.65528C6.84625 4.64246 6.69213 4.66844 6.55145 4.73083C6.41077 4.79322 6.28806 4.89001 6.19461 5.01228C6.0327 5.26142 5.95425 5.55561 5.97061 5.85228H5.13061C5.119 5.59615 5.15885 5.34028 5.24782 5.09982C5.3368 4.85935 5.47308 4.63917 5.64861 4.45228C5.8393 4.27146 6.06499 4.13159 6.31179 4.0413C6.55858 3.95101 6.82125 3.91221 7.08361 3.92728C7.5572 3.88677 8.02826 4.02959 8.39961 4.32628C8.56609 4.47339 8.69724 4.65617 8.78329 4.86099C8.86934 5.06581 8.90808 5.28741 8.89661 5.50928C8.89943 5.87224 8.77845 6.22533 8.55361 6.51028V6.50328Z", fill: "currentColor" }) }))); },
|
|
22
23
|
EditorOutlined: function (className) { return (jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: [jsx("path", { d: "M8.39447 12.9991C8.38198 13.0151 8.36948 13.0318 8.36392 13.0519L7.40054 16.5839C7.34427 16.7896 7.40193 17.0111 7.55406 17.1674C7.66798 17.2785 7.818 17.3396 7.97776 17.3396C8.03054 17.3396 8.08333 17.3334 8.13542 17.3195L11.6424 16.363C11.648 16.363 11.6508 16.3679 11.6549 16.3679C11.6952 16.3679 11.7348 16.3533 11.7647 16.3227L21.1424 6.94643C21.4209 6.66757 21.5737 6.28762 21.5737 5.87434C21.5737 5.40584 21.375 4.9377 21.027 4.59073L20.1414 3.70374C19.7942 3.35573 19.3253 3.15674 18.8571 3.15674C18.4439 3.15674 18.0639 3.30956 17.7847 3.58773L8.40836 12.9665C8.39867 12.9755 8.40143 12.9887 8.39447 12.9991ZM20.2248 6.02819L19.2933 6.95898L17.7833 5.42495L18.7016 4.50669C18.8467 4.36084 19.128 4.38204 19.2947 4.5494L20.181 5.43642C20.2734 5.5288 20.3262 5.65172 20.3262 5.77327C20.3255 5.87297 20.29 5.96327 20.2248 6.02819ZM10.0622 13.1464L16.8289 6.37931L18.3397 7.91437L11.5855 14.6682L10.0622 13.1464ZM8.8293 15.89L9.31828 14.0952L10.6227 15.3997L8.8293 15.89Z", fill: "currentColor" }), jsx("path", { d: "M20.8187 9.74373C20.4638 9.74373 20.1727 10.0323 20.1714 10.3921V19.1339C20.1714 19.5923 19.7991 19.9646 19.3399 19.9646H4.55207C4.09364 19.9646 3.71993 19.5924 3.71993 19.1339V4.86561C3.71993 4.4068 4.09364 4.03416 4.55207 4.03416H14.0763C14.4333 4.03416 14.723 3.7442 14.723 3.38713C14.723 3.03083 14.4333 2.74048 14.0763 2.74048H4.45345C3.33585 2.74048 2.42627 3.64937 2.42627 4.76766V19.2326C2.42627 20.3509 3.33585 21.2594 4.45345 21.2594H19.4378C20.5562 21.2594 21.4654 20.3509 21.4654 19.2326V10.388C21.4639 10.0323 21.1737 9.74373 20.8187 9.74373Z", fill: "currentColor" })] }))); },
|
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:24px}.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,.foxit-form-warning-text{font-size:12px;line-height:24px;min-height:24px}.foxit-form-error-text{color:#e22727}.foxit-form-warning-text{color:orange}.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 0 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-pagination-mobile-container{display:flex;justify-content:center;margin:16px 0}.foxit-pagination-mobile-next,.foxit-pagination-mobile-prev{height:36px;margin:0 8px;min-width:40px}.foxit-pagination-mobile-info{font-size:16px;min-width:48px}.foxit-button,.foxit-pagination-mobile-info{align-items:center;display:flex;justify-content:center}.foxit-button{border:0;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;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:1px solid #ff5f00;color:#ff5f00}.foxit-button-small{border-radius:5px;min-height:38px;padding:8px 24px}.foxit-button-small svg{height:16px;width:16px}.foxit-button-medium{border-radius:5px;min-height:44px;padding:11px 32px}.foxit-button-medium svg{height:20px;width:20px}.foxit-button-large{min-height:56px;padding:16px 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-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:5}.foxit-table-icon-loading{animation:spin 1s linear infinite;color:#ff5f00}.foxit-table-container{border-collapse:collapse;min-width:100%;table-layout:fixed;width:auto}.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-table-mobile-list{display:flex;flex-direction:column;gap:16px}.foxit-table-mobile-card{background:#f8f8f8;border-radius:10px;display:flex;flex-direction:column;gap:12px;padding:32px}.foxit-table-mobile-row{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between}.foxit-table-mobile-row:not(:last-child){border-bottom:1px solid #efefef;padding-bottom:12px}.foxit-table-mobile-label{font-size:16px;font-weight:700;margin-right:16px;max-width:50%}.foxit-table-mobile-label,.foxit-table-mobile-value{word-wrap:break-word;color:#373737;white-space:pre-wrap}.foxit-table-mobile-value{flex:1 1 0;font-size:14px;font-weight:400;text-align:right}.foxit-table-mobile-loading{align-items:center;background:#0000;display:flex;justify-content:center;padding:24px 0;width:100%}.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-linktabs{width:100%}.foxit-linktabs-inner{margin-left:auto;margin-right:auto;position:relative}.foxit-linktabs-scroll{background:#fff;border:none;padding:8px;position:absolute;top:6px;z-index:10}.foxit-linktabs-scroll:hover{color:#ff5f00;cursor:pointer}.foxit-linktabs-scroll-left{left:-24px}.foxit-linktabs-scroll-right{right:-24px}.foxit-linktabs-list{-ms-overflow-style:none;border-bottom:1px solid #f1f3f4;display:flex;overflow-x:auto;scrollbar-width:none;text-align:center;white-space:nowrap;width:100%}.foxit-linktabs-list::-webkit-scrollbar{display:none}.foxit-linktab-btn{background:none;border:none;color:#b3b3b3;cursor:pointer;display:inline-block;font-size:14px;font-weight:600;outline:none;padding:12px;transition:border-color .2s,color .2s}.foxit-linktab-btn.active{border-bottom:2px solid #ff5f00;color:#ff5f00}.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-tag-completed{background-color:#edfafa;color:#0f8b8d}.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:100%;min-width:100px;padding:12px 16px;position:absolute;width:300px;z-index:1}.foxit-tooltip-white{background-color:#fff;border:1px solid #e0e0e0;box-shadow:0 2px 4px #0000001a;color:#525252}.foxit-tooltip-arrow{border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid #525252;bottom:-5px;height:0;position:absolute;transform:translateX(-50%);width:0}.foxit-tooltip-white .foxit-tooltip-arrow{border-top-color:#e0e0e0}.foxit-tooltip-white .foxit-tooltip-arrow:after{border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid #fff;content:"";left:-5px;position:absolute;top:-6px}.foxit-menu{border-radius:10px;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;border-radius:10px;color:#ff5f00;font-weight:600}.foxit-menu-item:hover{background-color:#f5f6f8;border-radius:10px}.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;border-radius:10px}.foxit-menu-icon{transition:transform .3s ease-in-out}.foxit-menu-rotated-icon{transform:rotate(180deg)}.foxit-menu-item-label{font-weight:600}.foxit-menu-collapsed{transition:width .2s;width:50px!important}.foxit-menu-item-icon{align-items:center;display:inline-flex;margin-right:8px}.foxit-menu-item-icon-collapsed{font-size:16px;margin-right:0}.foxit-menu-collapsed .foxit-menu-item-content,.foxit-menu-collapsed .foxit-menu-submenu-title{align-items:center;display:flex;justify-content:center;padding:12px}.foxit-menu-collapsed-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.foxit-menu-popup{background-color:#fff;border-radius:10px;box-shadow:0 3px 6px #0000001f,0 1px 3px #00000014;min-width:200px;padding:5px 0}.foxit-menu-popup-content{width:100%}.foxit-menu-popup-title{align-items:center;border-bottom:1px solid #f0f0f0;color:#333;display:flex;font-weight:600;padding:8px 16px}.foxit-modal-content-container{background-color:#fff;border-radius:10px;display:flex;flex-direction:column;gap:24px;justify-content:space-between;max-height:70vh;min-width:320px}@media (max-width:600px){.foxit-modal-content-container{box-sizing:border-box;overflow-y:auto}}.foxit-modal-success{background:linear-gradient(135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3)}.foxit-modal-head{align-items:center;column-gap:8px;display:flex;justify-content:space-between;padding:36px 36px 0}.foxit-modal-children{box-sizing:border-box;max-height:60vh;overflow-y:auto;padding:0 36px}@media (max-width:600px){.foxit-modal-children{height:auto;max-height:100%;overflow-y:initial}}.foxit-modal-title{font-size:20px;font-weight:700}.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;flex-wrap:wrap;gap:16px;justify-content:flex-end;padding:0 36px 36px}@media (max-width:600px){.foxit-modal-footer{align-items:stretch;flex-direction:column;width:100%}}.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;min-width:40px;position:relative;transition:background-color .3s;width:40px}.foxit-switch.small{height:14px;line-height:14px;min-width:24px;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}.foxit-drawer-mask{background-color:#00000026;inset:0;opacity:0;pointer-events:none;position:fixed;transition:opacity .3s;z-index:99}.foxit-drawer-mask-open{opacity:1;pointer-events:auto}.foxit-drawer{background:#fff;box-shadow:-2px 0 8px #00000026;height:100vh;overflow:auto;position:fixed;right:0;top:0;transition:right .3s;z-index:100}.foxit-drawer-content{padding:24px}
|
|
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:24px}.foxit-form-item label{color:#525252;display:block;font-size:14px;font-weight:500;margin-bottom:8px}.foxit-form-item-embedlabel{background-color:#fff;display:inline-block!important;margin-left:4px;padding:0 4px;position:relative;top:18px;z-index:1}.foxit-form-required{color:#e22727}.foxit-form-error-text,.foxit-form-warning-text{font-size:12px;line-height:24px;min-height:24px}.foxit-form-error-text{color:#e22727}.foxit-form-warning-text{color:orange}.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 0 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-pagination-mobile-container{display:flex;justify-content:center;margin:16px 0}.foxit-pagination-mobile-next,.foxit-pagination-mobile-prev{height:36px;margin:0 8px;min-width:40px}.foxit-pagination-mobile-info{font-size:16px;min-width:48px}.foxit-button,.foxit-pagination-mobile-info{align-items:center;display:flex;justify-content:center}.foxit-button{border:0;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;letter-spacing:.42px}.foxit-button-circle{aspect-ratio:1;border-radius:50%!important;padding:0!important;width:auto}.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:1px solid #ff5f00;color:#ff5f00}.foxit-button-small{border-radius:5px;min-height:38px;padding:8px 24px}.foxit-button-small svg{height:16px;width:16px}.foxit-button-small.foxit-button-circle{height:38px;width:38px}.foxit-button-medium{border-radius:5px;min-height:44px;padding:11px 32px}.foxit-button-medium svg{height:20px;width:20px}.foxit-button-medium.foxit-button-circle{height:44px;width:44px}.foxit-button-large{min-height:56px;padding:16px 32px}.foxit-button-large.foxit-button-circle{height:56px;width:56px}.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-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:5}.foxit-table-icon-loading{animation:spin 1s linear infinite;color:#ff5f00}.foxit-table-container{border-collapse:collapse;min-width:100%;table-layout:fixed;width:auto}.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-table-mobile-list{display:flex;flex-direction:column;gap:16px}.foxit-table-mobile-card{background:#f8f8f8;border-radius:10px;display:flex;flex-direction:column;gap:12px;padding:32px}.foxit-table-mobile-row{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between}.foxit-table-mobile-row:not(:last-child){border-bottom:1px solid #efefef;padding-bottom:12px}.foxit-table-mobile-label{font-size:16px;font-weight:700;margin-right:16px;max-width:50%}.foxit-table-mobile-label,.foxit-table-mobile-value{word-wrap:break-word;color:#373737;white-space:pre-wrap}.foxit-table-mobile-value{flex:1 1 0;font-size:14px;font-weight:400;text-align:right}.foxit-table-mobile-loading{align-items:center;background:#0000;display:flex;justify-content:center;padding:24px 0;width:100%}.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-linktabs{width:100%}.foxit-linktabs-inner{margin-left:auto;margin-right:auto;position:relative}.foxit-linktabs-scroll{background:#fff;border:none;padding:8px;position:absolute;top:6px;z-index:10}.foxit-linktabs-scroll:hover{color:#ff5f00;cursor:pointer}.foxit-linktabs-scroll-left{left:-24px}.foxit-linktabs-scroll-right{right:-24px}.foxit-linktabs-list{-ms-overflow-style:none;border-bottom:1px solid #f1f3f4;display:flex;overflow-x:auto;scrollbar-width:none;text-align:center;white-space:nowrap;width:100%}.foxit-linktabs-list::-webkit-scrollbar{display:none}.foxit-linktab-btn{background:none;border:none;color:#b3b3b3;cursor:pointer;display:inline-block;font-size:14px;font-weight:600;outline:none;padding:12px;transition:border-color .2s,color .2s}.foxit-linktab-btn.active{border-bottom:2px solid #ff5f00;color:#ff5f00}.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-tag-completed{background-color:#edfafa;color:#0f8b8d}.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:100%;min-width:100px;padding:12px 16px;position:absolute;width:300px;z-index:1}.foxit-tooltip-white{background-color:#fff;border:1px solid #e0e0e0;box-shadow:0 2px 4px #0000001a;color:#525252}.foxit-tooltip-arrow{border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid #525252;bottom:-5px;height:0;position:absolute;transform:translateX(-50%);width:0}.foxit-tooltip-white .foxit-tooltip-arrow{border-top-color:#e0e0e0}.foxit-tooltip-white .foxit-tooltip-arrow:after{border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid #fff;content:"";left:-5px;position:absolute;top:-6px}.foxit-menu{border-radius:10px;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;border-radius:10px;color:#ff5f00;font-weight:600}.foxit-menu-item:hover{background-color:#f5f6f8;border-radius:10px}.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;border-radius:10px}.foxit-menu-icon{transition:transform .3s ease-in-out}.foxit-menu-rotated-icon{transform:rotate(180deg)}.foxit-menu-item-label{font-weight:600}.foxit-menu-collapsed{transition:width .2s;width:50px!important}.foxit-menu-item-icon{align-items:center;display:inline-flex;margin-right:8px}.foxit-menu-item-icon-collapsed{font-size:16px;margin-right:0}.foxit-menu-collapsed .foxit-menu-item-content,.foxit-menu-collapsed .foxit-menu-submenu-title{align-items:center;display:flex;justify-content:center;padding:12px}.foxit-menu-collapsed-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.foxit-menu-popup{background-color:#fff;border-radius:10px;box-shadow:0 3px 6px #0000001f,0 1px 3px #00000014;min-width:200px;padding:5px 0}.foxit-menu-popup-content{width:100%}.foxit-menu-popup-title{align-items:center;border-bottom:1px solid #f0f0f0;color:#333;display:flex;font-weight:600;padding:8px 16px}.foxit-modal-content-container{background-color:#fff;border-radius:10px;display:flex;flex-direction:column;gap:24px;justify-content:space-between;max-height:70vh;min-width:320px}@media (max-width:600px){.foxit-modal-content-container{box-sizing:border-box;overflow-y:auto}}.foxit-modal-success{background:linear-gradient(135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3)}.foxit-modal-head{align-items:center;column-gap:8px;display:flex;justify-content:space-between;padding:36px 36px 0}.foxit-modal-children{box-sizing:border-box;max-height:60vh;overflow-y:auto;padding:0 36px}@media (max-width:600px){.foxit-modal-children{height:auto;max-height:100%;overflow-y:initial}}.foxit-modal-title{font-size:20px;font-weight:700}.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;flex-wrap:wrap;gap:16px;justify-content:flex-end;padding:0 36px 36px}@media (max-width:600px){.foxit-modal-footer{align-items:stretch;flex-direction:column;width:100%}}.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;min-width:40px;position:relative;transition:background-color .3s;width:40px}.foxit-switch.small{height:14px;line-height:14px;min-width:24px;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}.foxit-drawer-mask{background-color:#00000026;inset:0;opacity:0;pointer-events:none;position:fixed;transition:opacity .3s;z-index:99}.foxit-drawer-mask-open{opacity:1;pointer-events:auto}.foxit-drawer{background:#fff;box-shadow:-2px 0 8px #00000026;height:100vh;overflow:auto;position:fixed;right:0;top:0;transition:right .3s;z-index:100}.foxit-drawer-content{padding:24px}.foxit-steps{display:flex}.foxit-steps-horizontal{align-items:flex-start;flex-direction:row}.foxit-steps-vertical{flex-direction:column}.foxit-steps-item{display:flex;flex:1;position:relative}.foxit-steps-horizontal .foxit-steps-item{align-items:center;flex-direction:column;text-align:center}.foxit-steps-vertical .foxit-steps-item{align-items:flex-start;flex-direction:row;margin-bottom:16px}.foxit-steps-item-container{display:flex;position:relative;z-index:1}.foxit-steps-horizontal .foxit-steps-item-container{align-items:center;flex-direction:column}.foxit-steps-vertical .foxit-steps-item-container{align-items:flex-start;flex-direction:row}.foxit-steps-item-clickable .foxit-steps-item-container{cursor:pointer}.foxit-steps-item-clickable:hover .foxit-steps-item-title{color:FF5F00}.foxit-steps-item-icon{align-items:center;display:flex;justify-content:center;margin-bottom:8px;position:relative}.foxit-steps-vertical .foxit-steps-item-icon{margin-bottom:0;margin-right:16px;margin-top:4px}.foxit-steps-icon{align-items:center;border-radius:50%;display:flex;font-size:12px;height:16px;justify-content:center;transition:all .3s ease;width:16px}.foxit-steps-icon-wait{background-color:#fff;border:1px solid #cecece}.foxit-steps-icon-process{background-color:#ff5f00;border:1px solid #ff5f00}.foxit-steps-icon-finish{background-color:#fff;border:1px solid #ff5f00;color:#ff5f00}.foxit-steps-item-content{display:flex;flex-direction:column;min-width:0}.foxit-steps-horizontal .foxit-steps-item-content{align-items:center;text-align:center}.foxit-steps-vertical .foxit-steps-item-content{align-items:flex-start;text-align:left}.foxit-steps-item-title{color:#757575;font-size:14px;line-height:1.5;margin-bottom:4px;transition:color .3s ease}.foxit-steps-item-process .foxit-steps-item-title{color:#ff5f00;font-weight:700}.foxit-steps-item-description{color:#00000073;font-size:12px;line-height:1.5;max-width:120px}.foxit-steps-item-tail{height:1px;left:50%;position:absolute;top:8px;width:calc(100% - 16px);z-index:0}.foxit-steps-horizontal .foxit-steps-item-tail{transform:translateX(8px)}.foxit-steps-vertical .foxit-steps-item-tail{height:100%;left:8px;position:absolute;top:20px;transform:none;width:1px}.foxit-steps-item-tail-line{background-color:#d9d9d9;height:100%;transition:background-color .3s ease;width:100%}.foxit-steps-item-finish .foxit-steps-item-tail-line{background-color:#ff6b35}.foxit-steps-item-process .foxit-steps-item-tail-line{background-color:#d9d9d9}
|
package/es/index.d.ts
CHANGED
|
@@ -35,3 +35,5 @@ export { Spin } from './Spin/Spin';
|
|
|
35
35
|
export { Alert } from './Alert/Alert';
|
|
36
36
|
export { Quantity } from './Quantity/Quantity';
|
|
37
37
|
export { Drawer } from './Drawer/Drawer';
|
|
38
|
+
export { Steps } from './Steps/Steps';
|
|
39
|
+
export type { StepsProps, StepItem } from './Steps/Steps.types';
|
package/es/index.js
CHANGED
|
@@ -19,5 +19,6 @@ 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 { Drawer } from './Drawer/Drawer.js';
|
|
22
|
+
export { Steps } from './Steps/Steps.js';
|
|
22
23
|
export { default as FormItem } from './Form/FormItem.js';
|
|
23
24
|
export { useFormWatch } from './Form/useFormWatch.js';
|