x-ui-design 0.2.40 → 0.2.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/types/lib/components/Button/Button.client.d.ts +4 -0
- package/dist/esm/types/lib/index.d.ts +2 -0
- package/dist/esm/types/{types → lib/types}/checkbox.d.ts +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +122 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +124 -0
- package/dist/index.js.map +1 -0
- package/lib/components/Button/Button.client.tsx +1 -1
- package/lib/components/Button/Button.tsx +1 -1
- package/lib/index.ts +1 -2
- package/lib/types/checkbox.ts +1 -1
- package/package.json +2 -2
- package/rollup.config.js +1 -1
- package/src/app/page.tsx +1 -1
- package/tsconfig.json +2 -2
- package/dist/esm/types/components/Button/Button.client.d.ts +0 -3
- package/dist/esm/types/components/Checkbox/Checkbox.client.d.ts +0 -23
- package/dist/esm/types/components/Checkbox/Checkbox.d.ts +0 -3
- package/dist/esm/types/components/Checkbox/index.d.ts +0 -1
- package/dist/esm/types/index.d.ts +0 -3
- package/lib/components/Checkbox/Checkbox.client.tsx +0 -126
- package/lib/components/Checkbox/Checkbox.tsx +0 -7
- package/lib/components/Checkbox/index.ts +0 -1
- package/lib/components/Checkbox/style.css +0 -91
- package/src/types/checkbox.ts +0 -28
- package/src/types/input.ts +0 -65
- /package/dist/esm/types/{components → lib/components}/Button/Button.d.ts +0 -0
- /package/dist/esm/types/{components → lib/components}/Button/index.d.ts +0 -0
- /package/dist/esm/types/{helpers → lib/helpers}/index.d.ts +0 -0
- /package/dist/esm/types/{types → lib/types}/button.d.ts +0 -0
- /package/dist/esm/types/{types → lib/types}/index.d.ts +0 -0
- /package/dist/esm/types/{utils → lib/utils}/index.d.ts +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { KeyboardEventHandler, MouseEvent, MouseEventHandler, ReactNode } from 'react';
|
|
2
|
-
import { DefaultProps, TargetProps } from '
|
|
2
|
+
import { DefaultProps, TargetProps } from '.';
|
|
3
3
|
export type CheckboxProps = DefaultProps & {
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
onChange?: (e: MouseEvent<HTMLInputElement> & TargetProps) => void;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Button } from '@/components/Button/Button';
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
function styleInject(css, ref) {
|
|
4
|
+
if (ref === void 0) ref = {};
|
|
5
|
+
var insertAt = ref.insertAt;
|
|
6
|
+
if (!css || typeof document === 'undefined') {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
10
|
+
var style = document.createElement('style');
|
|
11
|
+
style.type = 'text/css';
|
|
12
|
+
if (insertAt === 'top') {
|
|
13
|
+
if (head.firstChild) {
|
|
14
|
+
head.insertBefore(style, head.firstChild);
|
|
15
|
+
} else {
|
|
16
|
+
head.appendChild(style);
|
|
17
|
+
}
|
|
18
|
+
} else {
|
|
19
|
+
head.appendChild(style);
|
|
20
|
+
}
|
|
21
|
+
if (style.styleSheet) {
|
|
22
|
+
style.styleSheet.cssText = css;
|
|
23
|
+
} else {
|
|
24
|
+
style.appendChild(document.createTextNode(css));
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
var css_248z$1 = ":root{--xui-color-hover:#f5f5f5;--xui-color-disabled:#e6e6e6;--xui-primary-color:#1677ff;--xui-primary-color-light:#40a9ff;--xui-text-color:rgba(0,0,0,.88);--xui-text-color-light:rgba(0,0,0,.5);--xui-error-color:#ff4d4f;--xui-error-color-light:#ff6668;--xui-success-color:#52c41a;--xui-background-color:#fff;--xui-font-size-xs:12px;--xui-font-size-sm:14px;--xui-font-size-md:14px;--xui-font-size-lg:16px;--xui-border-radius-sm:4px;--xui-border-radius-md:4px;--xui-border-radius-lg:6px;--xui-border-color:#d9d9d9;--xui-select-primary-color:var(--xui-primary-color);--xui-select-background-color:var(--xui-background-color)}html{font-family:sans-serif}.globalEllipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
|
|
29
|
+
styleInject(css_248z$1);
|
|
30
|
+
|
|
31
|
+
function _extends() {
|
|
32
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
33
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
34
|
+
var t = arguments[e];
|
|
35
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
36
|
+
}
|
|
37
|
+
return n;
|
|
38
|
+
}, _extends.apply(null, arguments);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function clsx(...args) {
|
|
42
|
+
return args.flatMap(arg => {
|
|
43
|
+
if (!arg) {
|
|
44
|
+
return [];
|
|
45
|
+
}
|
|
46
|
+
if (typeof arg === 'string') {
|
|
47
|
+
return [arg];
|
|
48
|
+
}
|
|
49
|
+
if (typeof arg === 'number') {
|
|
50
|
+
return [String(arg)];
|
|
51
|
+
}
|
|
52
|
+
if (Array.isArray(arg)) {
|
|
53
|
+
return clsx(...arg).split(' ');
|
|
54
|
+
}
|
|
55
|
+
if (typeof arg === 'object') {
|
|
56
|
+
return Object.entries(arg).filter(([, value]) => Boolean(value)).map(([key]) => key);
|
|
57
|
+
}
|
|
58
|
+
return [];
|
|
59
|
+
}).filter(Boolean).join(' ');
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
const prefixClsButton = 'xUi-button';
|
|
63
|
+
|
|
64
|
+
var css_248z = ".xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}.xUi-button,.xUi-button-content,.xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}.xUi-button-icon{line-height:0;margin-right:.5em}.xUi-button-icon:last-child{margin-left:.5em;margin-right:0}.xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}.xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}.xUi-button-size-large{font-size:16px;height:40px;padding:8px 20px}.xUi-button-circle{border-radius:50%;justify-content:center;padding:0}.xUi-button-circle.xUi-button-size-small{height:24px;width:24px}.xUi-button-circle.xUi-button-size-large{height:40px;width:40px}.xUi-button-round{border-radius:9999px}.xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}.xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}.xUi-button-primary:hover{background-color:var(--xui-primary-color-light);border-color:var(--xui-primary-color-light);color:#fff}.xUi-button-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}.xUi-button-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}.xUi-button-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}.xUi-button-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}.xUi-button-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}.xUi-button-outlined{color:#fff}.xUi-button-filled,.xUi-button-outlined{background-color:transparent;border-color:var(--xui-border-color)}.xUi-button-filled{color:var(--xui-text-color)}.xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}.xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}.xUi-button-ghost{opacity:0}.xUi-button-ghost:hover{opacity:1}.xUi-button-block{display:flex;width:100%}.xUi-button-disabled,.xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}.xUi-button-loading{background-color:transparent}";
|
|
65
|
+
styleInject(css_248z);
|
|
66
|
+
|
|
67
|
+
const Button = ({
|
|
68
|
+
type = 'default',
|
|
69
|
+
variant = 'solid',
|
|
70
|
+
color = 'default',
|
|
71
|
+
shape = 'default',
|
|
72
|
+
size = 'middle',
|
|
73
|
+
htmlType = 'button',
|
|
74
|
+
className,
|
|
75
|
+
rootClassName,
|
|
76
|
+
classNames: customClassNames = {},
|
|
77
|
+
styles = {},
|
|
78
|
+
prefixCls = prefixClsButton,
|
|
79
|
+
iconPosition = 'start',
|
|
80
|
+
disabled = false,
|
|
81
|
+
ghost = false,
|
|
82
|
+
danger = false,
|
|
83
|
+
block = false,
|
|
84
|
+
children,
|
|
85
|
+
href,
|
|
86
|
+
iconNode,
|
|
87
|
+
isLoading = false,
|
|
88
|
+
...restProps
|
|
89
|
+
}) => {
|
|
90
|
+
const classes = clsx(prefixCls, rootClassName, `${prefixCls}-${type}`, `${prefixCls}-${variant}`, `${prefixCls}-${color}`, `${prefixCls}-${shape}`, `${prefixCls}-size-${size}`, {
|
|
91
|
+
[`${prefixCls}-block`]: block,
|
|
92
|
+
[`${prefixCls}-ghost`]: ghost,
|
|
93
|
+
[`${prefixCls}-danger`]: danger,
|
|
94
|
+
[`${prefixCls}-loading`]: isLoading,
|
|
95
|
+
[`${prefixCls}-disabled`]: disabled
|
|
96
|
+
}, className);
|
|
97
|
+
const mergedDisabled = disabled || isLoading;
|
|
98
|
+
const content = /*#__PURE__*/React.createElement(React.Fragment, null, iconNode && iconPosition === 'start' && /*#__PURE__*/React.createElement("span", {
|
|
99
|
+
className: clsx(`${prefixCls}-icon`, customClassNames.icon),
|
|
100
|
+
style: styles.icon
|
|
101
|
+
}, iconNode), /*#__PURE__*/React.createElement("span", {
|
|
102
|
+
className: `${prefixCls}-content`
|
|
103
|
+
}, children), iconNode && iconPosition === 'end' && /*#__PURE__*/React.createElement("span", {
|
|
104
|
+
className: clsx(`${prefixCls}-icon`, customClassNames.icon),
|
|
105
|
+
style: styles.icon
|
|
106
|
+
}, iconNode));
|
|
107
|
+
if (href) {
|
|
108
|
+
return /*#__PURE__*/React.createElement("a", {
|
|
109
|
+
className: classes,
|
|
110
|
+
href: mergedDisabled ? undefined : href,
|
|
111
|
+
"aria-disabled": mergedDisabled
|
|
112
|
+
}, content);
|
|
113
|
+
}
|
|
114
|
+
return /*#__PURE__*/React.createElement("button", _extends({
|
|
115
|
+
type: htmlType,
|
|
116
|
+
className: classes,
|
|
117
|
+
disabled: mergedDisabled
|
|
118
|
+
}, restProps), content);
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
export { Button };
|
|
122
|
+
//# sourceMappingURL=index.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../../lib/helpers/index.ts","../../lib/utils/index.ts","../../lib/components/Button/Button.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { RuleType } from '../types';\n\nexport const parseValue = (value: RuleType): RuleType => {\n if (value === 'true') {\n return true;\n }\n\n if (value === 'false') {\n return false;\n }\n\n if (!isNaN(Number(value))) {\n return Number(value);\n }\n\n return value;\n};\n\nexport function createArray(length: number): number[] {\n return Array.from({ length }, (_, index) => index);\n}\n\nexport function clsx(...args: RuleType[]): string {\n return args\n .flatMap(arg => {\n if (!arg) {\n return [];\n }\n\n if (typeof arg === 'string') {\n return [arg];\n }\n\n if (typeof arg === 'number') {\n return [String(arg)];\n }\n\n if (Array.isArray(arg)) {\n return clsx(...arg).split(' ');\n }\n\n if (typeof arg === 'object') {\n return Object.entries(arg)\n .filter(([, value]) => Boolean(value))\n .map(([key]) => key);\n }\n\n return [];\n })\n .filter(Boolean)\n .join(' ');\n}\n","export const prefixClsForm = 'xUi-form';\nexport const prefixClsFormItem = 'xUi-form-item';\nexport const prefixClsEmpty = 'xUi-empty';\nexport const prefixClsInput = 'xUi-input';\nexport const prefixClsSelect = 'xUi-select';\nexport const prefixClsCheckbox = 'xUi-checkbox';\nexport const prefixClsRadio = 'xUi-radio';\nexport const prefixClsTextArea = 'xUi-textarea';\nexport const prefixClsUpload = 'xUi-upload';\nexport const prefixClsDatePicker = 'xUi-datepicker';\nexport const prefixClsRangePicker = 'xUi-rangepicker';\nexport const prefixClsTimePicker = 'xUi-timepicker';\nexport const prefixClsButton = 'xUi-button';\nexport const prefixClsSkeleton = 'xUi-skeleton';\n","import React, { ReactElement, ReactNode } from 'react';\nimport { clsx } from '../../helpers';\nimport { ButtonProps } from '../../types/button';\nimport { prefixClsButton } from '../../utils';\nimport './style.css';\n\nconst Button = ({\n type = 'default',\n variant = 'solid',\n color = 'default',\n shape = 'default',\n size = 'middle',\n htmlType = 'button',\n className,\n rootClassName,\n classNames: customClassNames = {},\n styles = {},\n prefixCls = prefixClsButton,\n iconPosition = 'start',\n disabled = false,\n ghost = false,\n danger = false,\n block = false,\n children,\n href,\n iconNode,\n isLoading = false,\n ...restProps\n}: ButtonProps & {\n iconNode?: ReactNode;\n isLoading?: boolean;\n}): ReactElement => {\n const classes = clsx(\n prefixCls,\n rootClassName,\n `${prefixCls}-${type}`,\n `${prefixCls}-${variant}`,\n `${prefixCls}-${color}`,\n `${prefixCls}-${shape}`,\n `${prefixCls}-size-${size}`,\n {\n [`${prefixCls}-block`]: block,\n [`${prefixCls}-ghost`]: ghost,\n [`${prefixCls}-danger`]: danger,\n [`${prefixCls}-loading`]: isLoading,\n [`${prefixCls}-disabled`]: disabled\n },\n className\n );\n\n const mergedDisabled = disabled || isLoading;\n\n const content = (\n <>\n {iconNode && iconPosition === 'start' && (\n <span\n className={clsx(`${prefixCls}-icon`, customClassNames.icon)}\n style={styles.icon}\n >\n {iconNode}\n </span>\n )}\n <span className={`${prefixCls}-content`}>{children}</span>\n {iconNode && iconPosition === 'end' && (\n <span\n className={clsx(`${prefixCls}-icon`, customClassNames.icon)}\n style={styles.icon}\n >\n {iconNode}\n </span>\n )}\n </>\n );\n\n if (href) {\n return (\n <a\n className={classes}\n href={mergedDisabled ? undefined : href}\n aria-disabled={mergedDisabled}\n >\n {content}\n </a>\n );\n }\n\n return (\n <button\n type={htmlType}\n className={classes}\n disabled={mergedDisabled}\n {...restProps}\n >\n {content}\n </button>\n );\n};\n\nexport default Button;\n"],"names":["styleInject","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","clsx","args","flatMap","arg","String","Array","isArray","split","Object","entries","filter","value","Boolean","map","key","join","prefixClsButton","Button","variant","color","shape","size","htmlType","className","rootClassName","classNames","customClassNames","styles","prefixCls","iconPosition","disabled","ghost","danger","block","children","href","iconNode","isLoading","restProps","classes","mergedDisabled","content","React","Fragment","icon","undefined","_extends"],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
function styleInject(css, ref) {
|
|
6
|
+
if (ref === void 0) ref = {};
|
|
7
|
+
var insertAt = ref.insertAt;
|
|
8
|
+
if (!css || typeof document === 'undefined') {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
12
|
+
var style = document.createElement('style');
|
|
13
|
+
style.type = 'text/css';
|
|
14
|
+
if (insertAt === 'top') {
|
|
15
|
+
if (head.firstChild) {
|
|
16
|
+
head.insertBefore(style, head.firstChild);
|
|
17
|
+
} else {
|
|
18
|
+
head.appendChild(style);
|
|
19
|
+
}
|
|
20
|
+
} else {
|
|
21
|
+
head.appendChild(style);
|
|
22
|
+
}
|
|
23
|
+
if (style.styleSheet) {
|
|
24
|
+
style.styleSheet.cssText = css;
|
|
25
|
+
} else {
|
|
26
|
+
style.appendChild(document.createTextNode(css));
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
var css_248z$1 = ":root{--xui-color-hover:#f5f5f5;--xui-color-disabled:#e6e6e6;--xui-primary-color:#1677ff;--xui-primary-color-light:#40a9ff;--xui-text-color:rgba(0,0,0,.88);--xui-text-color-light:rgba(0,0,0,.5);--xui-error-color:#ff4d4f;--xui-error-color-light:#ff6668;--xui-success-color:#52c41a;--xui-background-color:#fff;--xui-font-size-xs:12px;--xui-font-size-sm:14px;--xui-font-size-md:14px;--xui-font-size-lg:16px;--xui-border-radius-sm:4px;--xui-border-radius-md:4px;--xui-border-radius-lg:6px;--xui-border-color:#d9d9d9;--xui-select-primary-color:var(--xui-primary-color);--xui-select-background-color:var(--xui-background-color)}html{font-family:sans-serif}.globalEllipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
|
|
31
|
+
styleInject(css_248z$1);
|
|
32
|
+
|
|
33
|
+
function _extends() {
|
|
34
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
35
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
36
|
+
var t = arguments[e];
|
|
37
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
38
|
+
}
|
|
39
|
+
return n;
|
|
40
|
+
}, _extends.apply(null, arguments);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
function clsx(...args) {
|
|
44
|
+
return args.flatMap(arg => {
|
|
45
|
+
if (!arg) {
|
|
46
|
+
return [];
|
|
47
|
+
}
|
|
48
|
+
if (typeof arg === 'string') {
|
|
49
|
+
return [arg];
|
|
50
|
+
}
|
|
51
|
+
if (typeof arg === 'number') {
|
|
52
|
+
return [String(arg)];
|
|
53
|
+
}
|
|
54
|
+
if (Array.isArray(arg)) {
|
|
55
|
+
return clsx(...arg).split(' ');
|
|
56
|
+
}
|
|
57
|
+
if (typeof arg === 'object') {
|
|
58
|
+
return Object.entries(arg).filter(([, value]) => Boolean(value)).map(([key]) => key);
|
|
59
|
+
}
|
|
60
|
+
return [];
|
|
61
|
+
}).filter(Boolean).join(' ');
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const prefixClsButton = 'xUi-button';
|
|
65
|
+
|
|
66
|
+
var css_248z = ".xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}.xUi-button,.xUi-button-content,.xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}.xUi-button-icon{line-height:0;margin-right:.5em}.xUi-button-icon:last-child{margin-left:.5em;margin-right:0}.xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}.xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}.xUi-button-size-large{font-size:16px;height:40px;padding:8px 20px}.xUi-button-circle{border-radius:50%;justify-content:center;padding:0}.xUi-button-circle.xUi-button-size-small{height:24px;width:24px}.xUi-button-circle.xUi-button-size-large{height:40px;width:40px}.xUi-button-round{border-radius:9999px}.xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}.xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}.xUi-button-primary:hover{background-color:var(--xui-primary-color-light);border-color:var(--xui-primary-color-light);color:#fff}.xUi-button-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}.xUi-button-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}.xUi-button-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}.xUi-button-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}.xUi-button-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}.xUi-button-outlined{color:#fff}.xUi-button-filled,.xUi-button-outlined{background-color:transparent;border-color:var(--xui-border-color)}.xUi-button-filled{color:var(--xui-text-color)}.xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}.xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}.xUi-button-ghost{opacity:0}.xUi-button-ghost:hover{opacity:1}.xUi-button-block{display:flex;width:100%}.xUi-button-disabled,.xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}.xUi-button-loading{background-color:transparent}";
|
|
67
|
+
styleInject(css_248z);
|
|
68
|
+
|
|
69
|
+
const Button = ({
|
|
70
|
+
type = 'default',
|
|
71
|
+
variant = 'solid',
|
|
72
|
+
color = 'default',
|
|
73
|
+
shape = 'default',
|
|
74
|
+
size = 'middle',
|
|
75
|
+
htmlType = 'button',
|
|
76
|
+
className,
|
|
77
|
+
rootClassName,
|
|
78
|
+
classNames: customClassNames = {},
|
|
79
|
+
styles = {},
|
|
80
|
+
prefixCls = prefixClsButton,
|
|
81
|
+
iconPosition = 'start',
|
|
82
|
+
disabled = false,
|
|
83
|
+
ghost = false,
|
|
84
|
+
danger = false,
|
|
85
|
+
block = false,
|
|
86
|
+
children,
|
|
87
|
+
href,
|
|
88
|
+
iconNode,
|
|
89
|
+
isLoading = false,
|
|
90
|
+
...restProps
|
|
91
|
+
}) => {
|
|
92
|
+
const classes = clsx(prefixCls, rootClassName, `${prefixCls}-${type}`, `${prefixCls}-${variant}`, `${prefixCls}-${color}`, `${prefixCls}-${shape}`, `${prefixCls}-size-${size}`, {
|
|
93
|
+
[`${prefixCls}-block`]: block,
|
|
94
|
+
[`${prefixCls}-ghost`]: ghost,
|
|
95
|
+
[`${prefixCls}-danger`]: danger,
|
|
96
|
+
[`${prefixCls}-loading`]: isLoading,
|
|
97
|
+
[`${prefixCls}-disabled`]: disabled
|
|
98
|
+
}, className);
|
|
99
|
+
const mergedDisabled = disabled || isLoading;
|
|
100
|
+
const content = /*#__PURE__*/React.createElement(React.Fragment, null, iconNode && iconPosition === 'start' && /*#__PURE__*/React.createElement("span", {
|
|
101
|
+
className: clsx(`${prefixCls}-icon`, customClassNames.icon),
|
|
102
|
+
style: styles.icon
|
|
103
|
+
}, iconNode), /*#__PURE__*/React.createElement("span", {
|
|
104
|
+
className: `${prefixCls}-content`
|
|
105
|
+
}, children), iconNode && iconPosition === 'end' && /*#__PURE__*/React.createElement("span", {
|
|
106
|
+
className: clsx(`${prefixCls}-icon`, customClassNames.icon),
|
|
107
|
+
style: styles.icon
|
|
108
|
+
}, iconNode));
|
|
109
|
+
if (href) {
|
|
110
|
+
return /*#__PURE__*/React.createElement("a", {
|
|
111
|
+
className: classes,
|
|
112
|
+
href: mergedDisabled ? undefined : href,
|
|
113
|
+
"aria-disabled": mergedDisabled
|
|
114
|
+
}, content);
|
|
115
|
+
}
|
|
116
|
+
return /*#__PURE__*/React.createElement("button", _extends({
|
|
117
|
+
type: htmlType,
|
|
118
|
+
className: classes,
|
|
119
|
+
disabled: mergedDisabled
|
|
120
|
+
}, restProps), content);
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
exports.Button = Button;
|
|
124
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../../lib/helpers/index.ts","../../lib/utils/index.ts","../../lib/components/Button/Button.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { RuleType } from '../types';\n\nexport const parseValue = (value: RuleType): RuleType => {\n if (value === 'true') {\n return true;\n }\n\n if (value === 'false') {\n return false;\n }\n\n if (!isNaN(Number(value))) {\n return Number(value);\n }\n\n return value;\n};\n\nexport function createArray(length: number): number[] {\n return Array.from({ length }, (_, index) => index);\n}\n\nexport function clsx(...args: RuleType[]): string {\n return args\n .flatMap(arg => {\n if (!arg) {\n return [];\n }\n\n if (typeof arg === 'string') {\n return [arg];\n }\n\n if (typeof arg === 'number') {\n return [String(arg)];\n }\n\n if (Array.isArray(arg)) {\n return clsx(...arg).split(' ');\n }\n\n if (typeof arg === 'object') {\n return Object.entries(arg)\n .filter(([, value]) => Boolean(value))\n .map(([key]) => key);\n }\n\n return [];\n })\n .filter(Boolean)\n .join(' ');\n}\n","export const prefixClsForm = 'xUi-form';\nexport const prefixClsFormItem = 'xUi-form-item';\nexport const prefixClsEmpty = 'xUi-empty';\nexport const prefixClsInput = 'xUi-input';\nexport const prefixClsSelect = 'xUi-select';\nexport const prefixClsCheckbox = 'xUi-checkbox';\nexport const prefixClsRadio = 'xUi-radio';\nexport const prefixClsTextArea = 'xUi-textarea';\nexport const prefixClsUpload = 'xUi-upload';\nexport const prefixClsDatePicker = 'xUi-datepicker';\nexport const prefixClsRangePicker = 'xUi-rangepicker';\nexport const prefixClsTimePicker = 'xUi-timepicker';\nexport const prefixClsButton = 'xUi-button';\nexport const prefixClsSkeleton = 'xUi-skeleton';\n","import React, { ReactElement, ReactNode } from 'react';\nimport { clsx } from '../../helpers';\nimport { ButtonProps } from '../../types/button';\nimport { prefixClsButton } from '../../utils';\nimport './style.css';\n\nconst Button = ({\n type = 'default',\n variant = 'solid',\n color = 'default',\n shape = 'default',\n size = 'middle',\n htmlType = 'button',\n className,\n rootClassName,\n classNames: customClassNames = {},\n styles = {},\n prefixCls = prefixClsButton,\n iconPosition = 'start',\n disabled = false,\n ghost = false,\n danger = false,\n block = false,\n children,\n href,\n iconNode,\n isLoading = false,\n ...restProps\n}: ButtonProps & {\n iconNode?: ReactNode;\n isLoading?: boolean;\n}): ReactElement => {\n const classes = clsx(\n prefixCls,\n rootClassName,\n `${prefixCls}-${type}`,\n `${prefixCls}-${variant}`,\n `${prefixCls}-${color}`,\n `${prefixCls}-${shape}`,\n `${prefixCls}-size-${size}`,\n {\n [`${prefixCls}-block`]: block,\n [`${prefixCls}-ghost`]: ghost,\n [`${prefixCls}-danger`]: danger,\n [`${prefixCls}-loading`]: isLoading,\n [`${prefixCls}-disabled`]: disabled\n },\n className\n );\n\n const mergedDisabled = disabled || isLoading;\n\n const content = (\n <>\n {iconNode && iconPosition === 'start' && (\n <span\n className={clsx(`${prefixCls}-icon`, customClassNames.icon)}\n style={styles.icon}\n >\n {iconNode}\n </span>\n )}\n <span className={`${prefixCls}-content`}>{children}</span>\n {iconNode && iconPosition === 'end' && (\n <span\n className={clsx(`${prefixCls}-icon`, customClassNames.icon)}\n style={styles.icon}\n >\n {iconNode}\n </span>\n )}\n </>\n );\n\n if (href) {\n return (\n <a\n className={classes}\n href={mergedDisabled ? undefined : href}\n aria-disabled={mergedDisabled}\n >\n {content}\n </a>\n );\n }\n\n return (\n <button\n type={htmlType}\n className={classes}\n disabled={mergedDisabled}\n {...restProps}\n >\n {content}\n </button>\n );\n};\n\nexport default Button;\n"],"names":["styleInject","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","clsx","args","flatMap","arg","String","Array","isArray","split","Object","entries","filter","value","Boolean","map","key","join","prefixClsButton","Button","variant","color","shape","size","htmlType","className","rootClassName","classNames","customClassNames","styles","prefixCls","iconPosition","disabled","ghost","danger","block","children","href","iconNode","isLoading","restProps","classes","mergedDisabled","content","React","Fragment","icon","undefined","_extends"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { useEffect, useMemo, useState } from 'react';
|
|
3
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
4
4
|
import Button from './Button';
|
|
5
5
|
import { ButtonProps } from '../../types/button';
|
|
6
6
|
import { prefixClsButton } from '../../utils';
|
package/lib/index.ts
CHANGED
package/lib/types/checkbox.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "x-ui-design",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.44",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"author": "Gabriel Boyajyan",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -23,11 +23,11 @@
|
|
|
23
23
|
"@babel/preset-react": "^7.27.1",
|
|
24
24
|
"@babel/preset-typescript": "^7.27.1",
|
|
25
25
|
"@eslint/eslintrc": "^3",
|
|
26
|
+
"@rollup/plugin-alias": "^5.1.1",
|
|
26
27
|
"@rollup/plugin-babel": "^6.0.4",
|
|
27
28
|
"@rollup/plugin-commonjs": "^24.1.0",
|
|
28
29
|
"@rollup/plugin-node-resolve": "^15.3.1",
|
|
29
30
|
"@rollup/plugin-typescript": "^11.1.6",
|
|
30
|
-
"@rollup/plugin-alias": "^5.1.1",
|
|
31
31
|
"@types/node": "^20",
|
|
32
32
|
"@types/react": "^19",
|
|
33
33
|
"@types/react-dom": "^19",
|
package/rollup.config.js
CHANGED
package/src/app/page.tsx
CHANGED
package/tsconfig.json
CHANGED
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
"emitDeclarationOnly": true,
|
|
8
8
|
"outDir": "./dist",
|
|
9
9
|
"moduleResolution": "node",
|
|
10
|
-
"jsx": "
|
|
10
|
+
"jsx": "preserve",
|
|
11
11
|
"esModuleInterop": true,
|
|
12
12
|
"allowSyntheticDefaultImports": true,
|
|
13
13
|
"skipLibCheck": true,
|
|
14
14
|
"strict": true,
|
|
15
|
-
"rootDir": "
|
|
15
|
+
"rootDir": ".",
|
|
16
16
|
"baseUrl": "./",
|
|
17
17
|
"paths": {
|
|
18
18
|
"@/*": [
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React, { MouseEvent } from 'react';
|
|
2
|
-
import './style.css';
|
|
3
|
-
declare const CheckboxClient: React.ForwardRefExoticComponent<import("../../types").DefaultProps & {
|
|
4
|
-
disabled?: boolean;
|
|
5
|
-
onChange?: (e: MouseEvent<HTMLInputElement> & import("../../types").TargetProps) => void;
|
|
6
|
-
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
7
|
-
onMouseEnter?: React.MouseEventHandler<HTMLElement>;
|
|
8
|
-
onMouseLeave?: React.MouseEventHandler<HTMLElement>;
|
|
9
|
-
onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
|
|
10
|
-
onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
|
|
11
|
-
value?: boolean;
|
|
12
|
-
tabIndex?: number;
|
|
13
|
-
name?: string;
|
|
14
|
-
children?: React.ReactNode;
|
|
15
|
-
id?: string;
|
|
16
|
-
autoFocus?: boolean;
|
|
17
|
-
type?: string;
|
|
18
|
-
skipGroup?: boolean;
|
|
19
|
-
required?: boolean;
|
|
20
|
-
defaultChecked?: boolean;
|
|
21
|
-
checked?: boolean;
|
|
22
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
-
export default CheckboxClient;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Checkbox } from '@/components/Checkbox/Checkbox';
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import React, {
|
|
4
|
-
ForwardedRef,
|
|
5
|
-
forwardRef,
|
|
6
|
-
MouseEvent,
|
|
7
|
-
ReactElement,
|
|
8
|
-
useEffect,
|
|
9
|
-
useState
|
|
10
|
-
} from 'react';
|
|
11
|
-
import { SyntheticBaseEvent } from '../../types';
|
|
12
|
-
import { CheckboxProps } from '../../types/checkbox';
|
|
13
|
-
import { clsx } from '../../../lib/helpers';
|
|
14
|
-
import { prefixClsCheckbox } from '../../utils';
|
|
15
|
-
import './style.css';
|
|
16
|
-
|
|
17
|
-
const CheckboxClient = forwardRef<HTMLDivElement, CheckboxProps>(
|
|
18
|
-
(
|
|
19
|
-
{
|
|
20
|
-
prefixCls = prefixClsCheckbox,
|
|
21
|
-
className = '',
|
|
22
|
-
defaultChecked = false,
|
|
23
|
-
checked,
|
|
24
|
-
style,
|
|
25
|
-
disabled = false,
|
|
26
|
-
onChange,
|
|
27
|
-
onClick,
|
|
28
|
-
onMouseEnter,
|
|
29
|
-
onMouseLeave,
|
|
30
|
-
onKeyPress,
|
|
31
|
-
onKeyDown,
|
|
32
|
-
tabIndex,
|
|
33
|
-
name,
|
|
34
|
-
children,
|
|
35
|
-
id,
|
|
36
|
-
autoFocus,
|
|
37
|
-
type = 'checkbox',
|
|
38
|
-
value = false,
|
|
39
|
-
required = false,
|
|
40
|
-
noStyle
|
|
41
|
-
},
|
|
42
|
-
ref: ForwardedRef<HTMLDivElement>
|
|
43
|
-
): ReactElement => {
|
|
44
|
-
const isControlled = checked !== undefined;
|
|
45
|
-
const [internalChecked, setInternalChecked] = useState(
|
|
46
|
-
isControlled ? checked : defaultChecked || value
|
|
47
|
-
);
|
|
48
|
-
|
|
49
|
-
const currentChecked = isControlled ? checked : internalChecked;
|
|
50
|
-
|
|
51
|
-
const handleClick = (
|
|
52
|
-
e: MouseEvent<HTMLInputElement> & SyntheticBaseEvent
|
|
53
|
-
) => {
|
|
54
|
-
e.stopPropagation();
|
|
55
|
-
|
|
56
|
-
if (disabled) {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
if (!isControlled) {
|
|
61
|
-
setInternalChecked(!currentChecked);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
e.target.value = !currentChecked;
|
|
65
|
-
|
|
66
|
-
onClick?.(e);
|
|
67
|
-
onChange?.(e);
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
useEffect(() => {
|
|
71
|
-
if (isControlled) {
|
|
72
|
-
setInternalChecked(checked);
|
|
73
|
-
}
|
|
74
|
-
}, [checked, isControlled]);
|
|
75
|
-
|
|
76
|
-
return (
|
|
77
|
-
<div className={`${prefixCls}-wrapper`}>
|
|
78
|
-
<div
|
|
79
|
-
ref={ref}
|
|
80
|
-
style={style}
|
|
81
|
-
onClick={(e) => {
|
|
82
|
-
handleClick(e);
|
|
83
|
-
}}
|
|
84
|
-
className={clsx([
|
|
85
|
-
prefixCls,
|
|
86
|
-
className,
|
|
87
|
-
{
|
|
88
|
-
noStyle: noStyle,
|
|
89
|
-
[`${prefixCls}-disabled`]: disabled,
|
|
90
|
-
[`${prefixCls}-checked`]: currentChecked
|
|
91
|
-
}
|
|
92
|
-
])}
|
|
93
|
-
>
|
|
94
|
-
<input
|
|
95
|
-
id={id}
|
|
96
|
-
type={type}
|
|
97
|
-
name={name}
|
|
98
|
-
disabled={disabled}
|
|
99
|
-
checked={currentChecked}
|
|
100
|
-
tabIndex={tabIndex}
|
|
101
|
-
required={required}
|
|
102
|
-
autoFocus={autoFocus}
|
|
103
|
-
onKeyDown={onKeyDown}
|
|
104
|
-
onKeyPress={onKeyPress}
|
|
105
|
-
onMouseEnter={onMouseEnter}
|
|
106
|
-
onMouseLeave={onMouseLeave}
|
|
107
|
-
readOnly
|
|
108
|
-
/>
|
|
109
|
-
|
|
110
|
-
<span className={`${prefixCls}-box`}>
|
|
111
|
-
<span
|
|
112
|
-
className={`${prefixCls}-check`}
|
|
113
|
-
style={{ opacity: Number(currentChecked) }}
|
|
114
|
-
/>
|
|
115
|
-
</span>
|
|
116
|
-
</div>
|
|
117
|
-
|
|
118
|
-
{children && <span className={`${prefixCls}-label`}>{children}</span>}
|
|
119
|
-
</div>
|
|
120
|
-
);
|
|
121
|
-
}
|
|
122
|
-
);
|
|
123
|
-
|
|
124
|
-
CheckboxClient.displayName = 'CheckboxClient';
|
|
125
|
-
|
|
126
|
-
export default CheckboxClient;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Checkbox } from '@/components/Checkbox/Checkbox'
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
.xUi-checkbox-wrapper {
|
|
2
|
-
cursor: pointer;
|
|
3
|
-
font-size: var(--xui-font-size-md);
|
|
4
|
-
align-items: center;
|
|
5
|
-
display: inline-flex;
|
|
6
|
-
color: var(--xui-main-color);
|
|
7
|
-
margin: 16px 0;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.xUi-checkbox {
|
|
11
|
-
width: 14px;
|
|
12
|
-
height: 14px;
|
|
13
|
-
position: relative;
|
|
14
|
-
border-radius: var(--xui-border-radius-sm);
|
|
15
|
-
transition: all 0.3s;
|
|
16
|
-
display: inline-block;
|
|
17
|
-
background-color: transparent;
|
|
18
|
-
border: 1px solid var(--xui-border-color);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.xUi-checkbox.xUi-checkbox-checked {
|
|
22
|
-
border-color: var(--xui-primary-color);
|
|
23
|
-
background-color: #f0f5ff;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.xUi-checkbox input {
|
|
27
|
-
inset: 0;
|
|
28
|
-
opacity: 0;
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
position: absolute;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.xUi-checkbox-inner {
|
|
34
|
-
top: 50%;
|
|
35
|
-
left: 50%;
|
|
36
|
-
width: 10px;
|
|
37
|
-
height: 6px;
|
|
38
|
-
border-top: 0;
|
|
39
|
-
border-left: 0;
|
|
40
|
-
position: absolute;
|
|
41
|
-
border: 2px solid var(--xui-background-color);
|
|
42
|
-
transform: rotate(45deg) scale(0);
|
|
43
|
-
transition: transform 0.2s ease-in-out;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.xUi-checkbox-check {
|
|
47
|
-
width: 100%;
|
|
48
|
-
height: 100%;
|
|
49
|
-
display: block;
|
|
50
|
-
position: relative;
|
|
51
|
-
transition: 0.1s ease;
|
|
52
|
-
border-color: var(--xui-primary-color);
|
|
53
|
-
background-color: var(--xui-primary-color);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.xUi-checkbox-check::after {
|
|
57
|
-
top: 1px;
|
|
58
|
-
left: 3px;
|
|
59
|
-
width: 5px;
|
|
60
|
-
height: 8px;
|
|
61
|
-
content: "";
|
|
62
|
-
position: absolute;
|
|
63
|
-
border: solid white;
|
|
64
|
-
transform: rotate(45deg);
|
|
65
|
-
border-width: 0 2px 2px 0;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.xUi-checkbox-disabled,
|
|
69
|
-
.xUi-checkbox-disabled .xUi-checkbox-check {
|
|
70
|
-
opacity: 0.5;
|
|
71
|
-
cursor: not-allowed;
|
|
72
|
-
background-color: var(--xui-color-disabled);
|
|
73
|
-
border-color: var(--xui-border-color) !important;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.xUi-checkbox-label {
|
|
77
|
-
margin-left: 8px;
|
|
78
|
-
user-select: none;
|
|
79
|
-
font-size: 14px;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.xUi-checkbox:hover:not(.disabled),
|
|
83
|
-
.xUi-checkbox:focus:not(.disabled) {
|
|
84
|
-
border-color: var(--xui-primary-color);
|
|
85
|
-
cursor: pointer;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.xUi-checkbox.disabled {
|
|
89
|
-
opacity: 0.5;
|
|
90
|
-
cursor: not-allowed;
|
|
91
|
-
}
|
package/src/types/checkbox.ts
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
KeyboardEventHandler,
|
|
3
|
-
MouseEvent,
|
|
4
|
-
MouseEventHandler,
|
|
5
|
-
ReactNode
|
|
6
|
-
} from 'react';
|
|
7
|
-
import { DefaultProps, TargetProps } from '../../lib/types';
|
|
8
|
-
|
|
9
|
-
export type CheckboxProps = DefaultProps & {
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
onChange?: (e: MouseEvent<HTMLInputElement> & TargetProps) => void;
|
|
12
|
-
onClick?: MouseEventHandler<HTMLElement>;
|
|
13
|
-
onMouseEnter?: MouseEventHandler<HTMLElement>;
|
|
14
|
-
onMouseLeave?: MouseEventHandler<HTMLElement>;
|
|
15
|
-
onKeyPress?: KeyboardEventHandler<HTMLElement>;
|
|
16
|
-
onKeyDown?: KeyboardEventHandler<HTMLElement>;
|
|
17
|
-
value?: boolean;
|
|
18
|
-
tabIndex?: number;
|
|
19
|
-
name?: string;
|
|
20
|
-
children?: ReactNode;
|
|
21
|
-
id?: string;
|
|
22
|
-
autoFocus?: boolean;
|
|
23
|
-
type?: string;
|
|
24
|
-
skipGroup?: boolean;
|
|
25
|
-
required?: boolean;
|
|
26
|
-
defaultChecked?: boolean;
|
|
27
|
-
checked?: boolean;
|
|
28
|
-
};
|
package/src/types/input.ts
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
CSSProperties,
|
|
3
|
-
InputHTMLAttributes,
|
|
4
|
-
KeyboardEvent,
|
|
5
|
-
KeyboardEventHandler,
|
|
6
|
-
MouseEventHandler,
|
|
7
|
-
ReactElement,
|
|
8
|
-
ReactNode,
|
|
9
|
-
TextareaHTMLAttributes
|
|
10
|
-
} from 'react';
|
|
11
|
-
import { DefaultProps, SizeType, SyntheticBaseEvent } from '.';
|
|
12
|
-
|
|
13
|
-
export type InputProps = Omit<
|
|
14
|
-
InputHTMLAttributes<HTMLInputElement>,
|
|
15
|
-
'size' | 'prefix'
|
|
16
|
-
> &
|
|
17
|
-
DefaultProps & {
|
|
18
|
-
addonBefore?: ReactNode;
|
|
19
|
-
addonAfter?: ReactNode;
|
|
20
|
-
size?: SizeType;
|
|
21
|
-
prefix?: ReactNode;
|
|
22
|
-
suffix?: ReactNode;
|
|
23
|
-
disabled?: boolean;
|
|
24
|
-
allowClear?: boolean;
|
|
25
|
-
error?: boolean;
|
|
26
|
-
bordered?: boolean;
|
|
27
|
-
iconRender?: (visible: boolean) => ReactElement;
|
|
28
|
-
onChange?: (event: SyntheticBaseEvent) => void;
|
|
29
|
-
onClick?: MouseEventHandler<HTMLElement>;
|
|
30
|
-
onMouseEnter?: MouseEventHandler<HTMLElement>;
|
|
31
|
-
onMouseLeave?: MouseEventHandler<HTMLElement>;
|
|
32
|
-
onKeyPress?: KeyboardEventHandler<HTMLElement>;
|
|
33
|
-
onKeyDown?: KeyboardEventHandler<HTMLElement>;
|
|
34
|
-
onPressEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
|
|
35
|
-
feedbackIcons?: boolean;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export type TextareaProps = Omit<
|
|
39
|
-
TextareaHTMLAttributes<HTMLTextAreaElement>,
|
|
40
|
-
'onResize'
|
|
41
|
-
> &
|
|
42
|
-
DefaultProps & {
|
|
43
|
-
value?: string;
|
|
44
|
-
className?: string;
|
|
45
|
-
style?: CSSProperties;
|
|
46
|
-
autoSize?:
|
|
47
|
-
| boolean
|
|
48
|
-
| {
|
|
49
|
-
minRows?: number;
|
|
50
|
-
maxRows?: number;
|
|
51
|
-
};
|
|
52
|
-
onPressEnter?: KeyboardEventHandler<HTMLTextAreaElement>;
|
|
53
|
-
onResize?: (size: { width: number; height: number }) => void;
|
|
54
|
-
styles?: {
|
|
55
|
-
textarea?: CSSProperties;
|
|
56
|
-
count?: CSSProperties;
|
|
57
|
-
};
|
|
58
|
-
bordered?: boolean;
|
|
59
|
-
size?: SizeType;
|
|
60
|
-
status?: 'success' | 'error';
|
|
61
|
-
rootClassName?: string;
|
|
62
|
-
variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
|
|
63
|
-
error?: boolean;
|
|
64
|
-
allowClear?: boolean;
|
|
65
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|