@aloudata/aloudata-design 1.1.3 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ColorPicker/constant.d.ts +2 -0
- package/dist/ColorPicker/constant.js +3 -0
- package/dist/ColorPicker/index.d.ts +10 -0
- package/dist/ColorPicker/index.js +195 -0
- package/dist/ColorPicker/style/index.d.ts +2 -0
- package/dist/ColorPicker/style/index.js +2 -0
- package/dist/ColorPicker/style/index.less +121 -0
- package/dist/Input/style/index.less +46 -37
- package/dist/Skeleton/style/index.less +10 -0
- package/dist/index.d.ts +64 -62
- package/dist/index.js +31 -30
- package/package.json +1 -1
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export var colors = ['#171717', '#333333', '#545454', '#656565', '#898989', '#B4B4B4', '#D4D4D4', '#E2E2E2', '#F8F8F8', '#FFFFFF', '#F28D2C', '#B7992D', '#59A14E', '#4A9794', '#4E79A7', '#B07AA1', '#D47295', '#E15658', '#9D7560', '#78706E', '#F9A654', '#D3B348', '#71B965', '#69AAA4', '#74A1C8', '#C290B4', '#E899B3', '#F17B79', '#BA9482', '#998E8C', '#FFBF7C', '#F1CE63', '#8CD17E', '#86BCB6', '#A0CBE8', '#D4A6C9', '#FABFD2', '#FF9D99', '#D7B5A6', '#B6ADAA']; // 这 2个颜色因为比较白,需要加个灰色的 border,不然看不见
|
|
2
|
+
|
|
3
|
+
export var specialColors = ['#F8F8F8', '#FFFFFF'];
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface IColorPickerProps {
|
|
3
|
+
className?: string;
|
|
4
|
+
value?: string;
|
|
5
|
+
defaultColor?: string;
|
|
6
|
+
localStorageKey?: string;
|
|
7
|
+
onChange?: (color: string) => void;
|
|
8
|
+
icon?: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
export default function ColorPicker({ className, value, icon, onChange, defaultColor, localStorageKey, }: IColorPickerProps): JSX.Element;
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
+
|
|
3
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
|
|
5
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
6
|
+
|
|
7
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
8
|
+
|
|
9
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
10
|
+
|
|
11
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
|
+
|
|
13
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
14
|
+
|
|
15
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
16
|
+
|
|
17
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
18
|
+
|
|
19
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
20
|
+
|
|
21
|
+
import { FoldDownFill } from '@aloudata/icons-react';
|
|
22
|
+
import cls from 'classnames';
|
|
23
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
24
|
+
import Dropdown from "../Dropdown";
|
|
25
|
+
import { colors as defaultColors, specialColors } from "./constant";
|
|
26
|
+
|
|
27
|
+
function getLocalRecentColors(localStorageKey) {
|
|
28
|
+
if (!window.localStorage) {
|
|
29
|
+
return [];
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
var colorStr = localStorage.getItem(localStorageKey);
|
|
33
|
+
|
|
34
|
+
if (!colorStr) {
|
|
35
|
+
return [];
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return colorStr.split(',');
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function setLocalRecentColors(localStorageKey, colors) {
|
|
42
|
+
if (!window.localStorage) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
localStorage.setItem(localStorageKey, colors.join(','));
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
var MAX_RECENT_COLORS = 10;
|
|
50
|
+
export default function ColorPicker(_ref) {
|
|
51
|
+
var className = _ref.className,
|
|
52
|
+
value = _ref.value,
|
|
53
|
+
icon = _ref.icon,
|
|
54
|
+
onChange = _ref.onChange,
|
|
55
|
+
_ref$defaultColor = _ref.defaultColor,
|
|
56
|
+
defaultColor = _ref$defaultColor === void 0 ? defaultColors[0] : _ref$defaultColor,
|
|
57
|
+
_ref$localStorageKey = _ref.localStorageKey,
|
|
58
|
+
localStorageKey = _ref$localStorageKey === void 0 ? 'ald_recent_colors' : _ref$localStorageKey;
|
|
59
|
+
|
|
60
|
+
var _useState = useState(false),
|
|
61
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
62
|
+
open = _useState2[0],
|
|
63
|
+
setOpen = _useState2[1];
|
|
64
|
+
|
|
65
|
+
var _useState3 = useState([]),
|
|
66
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
67
|
+
recentColors = _useState4[0],
|
|
68
|
+
setRecentColors = _useState4[1];
|
|
69
|
+
|
|
70
|
+
var overlayRef = useRef(null);
|
|
71
|
+
var wrapRef = useRef(null);
|
|
72
|
+
useEffect(function () {
|
|
73
|
+
setRecentColors(getLocalRecentColors(localStorageKey));
|
|
74
|
+
}, [localStorageKey]);
|
|
75
|
+
|
|
76
|
+
var onColorSelect = function onColorSelect(color) {
|
|
77
|
+
var newRecentColors = [color].concat(_toConsumableArray(recentColors.filter(function (c) {
|
|
78
|
+
return c !== color;
|
|
79
|
+
})));
|
|
80
|
+
|
|
81
|
+
if (newRecentColors.length > MAX_RECENT_COLORS) {
|
|
82
|
+
newRecentColors.pop();
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
setRecentColors(newRecentColors);
|
|
86
|
+
setLocalRecentColors(localStorageKey, newRecentColors);
|
|
87
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(color);
|
|
88
|
+
setOpen(false);
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
useEffect(function () {
|
|
92
|
+
var handleClick = function handleClick(e) {
|
|
93
|
+
var _wrapRef$current, _overlayRef$current;
|
|
94
|
+
|
|
95
|
+
if ((_wrapRef$current = wrapRef.current) !== null && _wrapRef$current !== void 0 && _wrapRef$current.contains(e.target)) {
|
|
96
|
+
return setOpen(!open);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
if (!((_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.contains(e.target))) {
|
|
100
|
+
return setOpen(false);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
document.addEventListener('click', handleClick);
|
|
105
|
+
return function () {
|
|
106
|
+
document.removeEventListener('click', handleClick);
|
|
107
|
+
};
|
|
108
|
+
}, [open]);
|
|
109
|
+
var overlay = /*#__PURE__*/React.createElement("div", {
|
|
110
|
+
className: 'ald-color-picker-overlay',
|
|
111
|
+
ref: overlayRef
|
|
112
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
113
|
+
className: 'default'
|
|
114
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
115
|
+
className: 'item',
|
|
116
|
+
onClick: function onClick() {
|
|
117
|
+
if (defaultColor === value) return;
|
|
118
|
+
onColorSelect(defaultColor);
|
|
119
|
+
}
|
|
120
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
121
|
+
className: 'block',
|
|
122
|
+
style: {
|
|
123
|
+
backgroundColor: defaultColor
|
|
124
|
+
}
|
|
125
|
+
})), "\u9ED8\u8BA4"), /*#__PURE__*/React.createElement("div", {
|
|
126
|
+
className: 'standard'
|
|
127
|
+
}, /*#__PURE__*/React.createElement("p", null, "\u6807\u51C6\u8272"), /*#__PURE__*/React.createElement("div", {
|
|
128
|
+
className: 'items'
|
|
129
|
+
}, defaultColors.map(function (color) {
|
|
130
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
131
|
+
key: color,
|
|
132
|
+
className: cls('item', {
|
|
133
|
+
selected: color === value
|
|
134
|
+
}),
|
|
135
|
+
onClick: function onClick() {
|
|
136
|
+
if (color === value) return;
|
|
137
|
+
onColorSelect(color);
|
|
138
|
+
},
|
|
139
|
+
style: {
|
|
140
|
+
borderColor: specialColors.includes(color) ? '#DBDBDB' : color
|
|
141
|
+
}
|
|
142
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
143
|
+
className: 'block',
|
|
144
|
+
style: {
|
|
145
|
+
backgroundColor: color
|
|
146
|
+
}
|
|
147
|
+
}));
|
|
148
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
149
|
+
className: 'recent'
|
|
150
|
+
}, /*#__PURE__*/React.createElement("p", null, "\u6700\u8FD1\u4F7F\u7528"), /*#__PURE__*/React.createElement("div", {
|
|
151
|
+
className: 'items'
|
|
152
|
+
}, recentColors.map(function (color) {
|
|
153
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
154
|
+
key: color,
|
|
155
|
+
className: cls('item', {
|
|
156
|
+
selected: color === value
|
|
157
|
+
}),
|
|
158
|
+
onClick: function onClick() {
|
|
159
|
+
if (color === value) return;
|
|
160
|
+
onColorSelect(color);
|
|
161
|
+
},
|
|
162
|
+
style: {
|
|
163
|
+
borderColor: specialColors.includes(color) ? '#DBDBDB' : color
|
|
164
|
+
}
|
|
165
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
166
|
+
className: 'block',
|
|
167
|
+
style: {
|
|
168
|
+
backgroundColor: color
|
|
169
|
+
}
|
|
170
|
+
}));
|
|
171
|
+
}))));
|
|
172
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
173
|
+
className: cls(className, 'ald-color-picker'),
|
|
174
|
+
ref: wrapRef
|
|
175
|
+
}, /*#__PURE__*/React.createElement(Dropdown, {
|
|
176
|
+
overlay: overlay,
|
|
177
|
+
trigger: ['click'],
|
|
178
|
+
open: open,
|
|
179
|
+
placement: 'bottomLeft'
|
|
180
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
181
|
+
className: cls('wrapper', {
|
|
182
|
+
focused: open
|
|
183
|
+
})
|
|
184
|
+
}, icon || /*#__PURE__*/React.createElement("div", {
|
|
185
|
+
className: 'word'
|
|
186
|
+
}, "A", /*#__PURE__*/React.createElement("div", {
|
|
187
|
+
className: 'line',
|
|
188
|
+
style: {
|
|
189
|
+
backgroundColor: value !== null && value !== void 0 ? value : '#171717'
|
|
190
|
+
}
|
|
191
|
+
})), /*#__PURE__*/React.createElement(FoldDownFill, {
|
|
192
|
+
size: 14,
|
|
193
|
+
fill: "#575757"
|
|
194
|
+
}))));
|
|
195
|
+
}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
@import '../../style/index.less';
|
|
2
|
+
|
|
3
|
+
.ald-color-picker {
|
|
4
|
+
position: relative;
|
|
5
|
+
width: 56px;
|
|
6
|
+
|
|
7
|
+
.wrapper {
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: row;
|
|
10
|
+
align-items: center;
|
|
11
|
+
justify-content: space-between;
|
|
12
|
+
padding: 6px 10px;
|
|
13
|
+
gap: 4px;
|
|
14
|
+
height: 28px;
|
|
15
|
+
background: #fff;
|
|
16
|
+
border: 1px solid #dbdbdb;
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
border-radius: 2px;
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
transition: border 0.5s ease-in-out;
|
|
21
|
+
|
|
22
|
+
&:hover {
|
|
23
|
+
border: 1px solid #3271c9;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.focused {
|
|
28
|
+
border: 1px solid #3271c9;
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.word {
|
|
33
|
+
position: relative;
|
|
34
|
+
top: -1px;
|
|
35
|
+
margin-left: 2px;
|
|
36
|
+
margin-right: 3px;
|
|
37
|
+
|
|
38
|
+
.line {
|
|
39
|
+
width: 10px;
|
|
40
|
+
height: 2px;
|
|
41
|
+
position: absolute;
|
|
42
|
+
bottom: 3px;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.ald-color-picker-overlay {
|
|
48
|
+
position: relative;
|
|
49
|
+
width: 253px;
|
|
50
|
+
background: #fff;
|
|
51
|
+
border: 1px solid #dbdbdb;
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
box-shadow: 0 4px 6px -2px rgb(16 24 40 / 3%),
|
|
54
|
+
0 12px 16px -4px rgb(16 24 40 / 8%);
|
|
55
|
+
border-radius: 2px;
|
|
56
|
+
padding: 8px 7px;
|
|
57
|
+
|
|
58
|
+
.items {
|
|
59
|
+
margin-top: 2px;
|
|
60
|
+
font-size: 0;
|
|
61
|
+
display: flex;
|
|
62
|
+
justify-content: space-evenly;
|
|
63
|
+
flex-wrap: wrap;
|
|
64
|
+
gap: 4px 2px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.item {
|
|
68
|
+
width: 21px;
|
|
69
|
+
height: 21px;
|
|
70
|
+
box-sizing: border-box;
|
|
71
|
+
border: 1px solid #fff;
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
|
|
74
|
+
.block {
|
|
75
|
+
width: 100%;
|
|
76
|
+
height: 100%;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&.selected,
|
|
80
|
+
&:hover {
|
|
81
|
+
box-sizing: border-box;
|
|
82
|
+
border: 1px solid #000 !important;
|
|
83
|
+
|
|
84
|
+
.block {
|
|
85
|
+
width: 17px;
|
|
86
|
+
height: 17px;
|
|
87
|
+
margin: 1px;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.standard,
|
|
93
|
+
.recent {
|
|
94
|
+
font-size: 12px;
|
|
95
|
+
margin-top: 6px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.default {
|
|
99
|
+
font-size: 12px;
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
|
|
103
|
+
.item {
|
|
104
|
+
margin-right: 8px;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.recent {
|
|
109
|
+
.items {
|
|
110
|
+
justify-content: flex-start;
|
|
111
|
+
|
|
112
|
+
.item {
|
|
113
|
+
margin-right: 1px;
|
|
114
|
+
|
|
115
|
+
&:last-child {
|
|
116
|
+
margin-right: 0;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
@input-disabled-font-color: @NL40;
|
|
42
42
|
|
|
43
43
|
.ant-input.ald-input.ald-input,
|
|
44
|
-
.ant-input-affix-wrapper.ald-input.ald-input,
|
|
44
|
+
.ant-input-affix-wrapper.ald-input.ald-input,
|
|
45
45
|
.ald-input.ald-input .ant-input {
|
|
46
46
|
color: @NL0;
|
|
47
47
|
font-weight: 400;
|
|
@@ -109,13 +109,17 @@
|
|
|
109
109
|
.ant-input-affix-wrapper.ant-input-affix-wrapper.ant-input-affix-wrapper {
|
|
110
110
|
background-color: @input-bg-color;
|
|
111
111
|
border-color: @input-border-color;
|
|
112
|
+
border-radius: 2px;
|
|
112
113
|
|
|
113
114
|
&:hover,
|
|
114
115
|
&:focus,
|
|
115
116
|
&-focused {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
&:not(.ant-input-affix-wrapper-disabled) {
|
|
118
|
+
border-color: @input-active-border-color;
|
|
119
|
+
// box-shadow: @input-box-shadow-active;
|
|
120
|
+
box-shadow: none;
|
|
121
|
+
cursor: initial;
|
|
122
|
+
}
|
|
119
123
|
}
|
|
120
124
|
|
|
121
125
|
.ant-input {
|
|
@@ -134,11 +138,6 @@
|
|
|
134
138
|
height: 1.5715em; //和行高一致
|
|
135
139
|
}
|
|
136
140
|
|
|
137
|
-
.ald-input-showCount {
|
|
138
|
-
border: none;
|
|
139
|
-
box-shadow: none;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
141
|
.ant-input-prefix {
|
|
143
142
|
color: @NL40;
|
|
144
143
|
}
|
|
@@ -239,23 +238,25 @@
|
|
|
239
238
|
}
|
|
240
239
|
}
|
|
241
240
|
|
|
242
|
-
&.ant-input-group-compact{
|
|
243
|
-
.ald-input
|
|
241
|
+
&.ant-input-group-compact {
|
|
242
|
+
.ald-input,
|
|
243
|
+
.ald-select,
|
|
244
|
+
.ald-btn.ant-btn {
|
|
244
245
|
border-radius: 0;
|
|
245
246
|
}
|
|
246
247
|
}
|
|
247
248
|
|
|
248
|
-
&.ant-input-group-compact
|
|
249
|
+
&.ant-input-group-compact > *:first-child {
|
|
249
250
|
border-radius: 0 !important;
|
|
250
251
|
border-start-start-radius: @input-border-radius-large !important;
|
|
251
252
|
border-end-start-radius: @input-border-radius-large !important;
|
|
252
253
|
}
|
|
253
254
|
|
|
254
|
-
&.ant-input-group-compact
|
|
255
|
+
&.ant-input-group-compact > *:last-child {
|
|
255
256
|
border-radius: 0 !important;
|
|
256
257
|
border-inline-end-width: 1px;
|
|
257
|
-
border-start-end-radius:
|
|
258
|
-
border-end-end-radius:
|
|
258
|
+
border-start-end-radius: @input-border-radius-large !important;
|
|
259
|
+
border-end-end-radius: @input-border-radius-large !important;
|
|
259
260
|
}
|
|
260
261
|
}
|
|
261
262
|
|
|
@@ -275,23 +276,25 @@
|
|
|
275
276
|
}
|
|
276
277
|
}
|
|
277
278
|
|
|
278
|
-
&.ant-input-group-compact{
|
|
279
|
-
.ald-input
|
|
279
|
+
&.ant-input-group-compact {
|
|
280
|
+
.ald-input,
|
|
281
|
+
.ald-select,
|
|
282
|
+
.ald-btn.ant-btn {
|
|
280
283
|
border-radius: 0;
|
|
281
284
|
}
|
|
282
285
|
}
|
|
283
286
|
|
|
284
|
-
&.ant-input-group-compact
|
|
287
|
+
&.ant-input-group-compact > *:first-child {
|
|
285
288
|
border-radius: 0 !important;
|
|
286
289
|
border-start-start-radius: @input-border-radius-middle !important;
|
|
287
290
|
border-end-start-radius: @input-border-radius-middle !important;
|
|
288
291
|
}
|
|
289
292
|
|
|
290
|
-
&.ant-input-group-compact
|
|
293
|
+
&.ant-input-group-compact > *:last-child {
|
|
291
294
|
border-radius: 0 !important;
|
|
292
295
|
border-inline-end-width: 1px;
|
|
293
|
-
border-start-end-radius:
|
|
294
|
-
border-end-end-radius:
|
|
296
|
+
border-start-end-radius: @input-border-radius-middle !important;
|
|
297
|
+
border-end-end-radius: @input-border-radius-middle !important;
|
|
295
298
|
}
|
|
296
299
|
}
|
|
297
300
|
|
|
@@ -311,23 +314,25 @@
|
|
|
311
314
|
}
|
|
312
315
|
}
|
|
313
316
|
|
|
314
|
-
&.ant-input-group-compact{
|
|
315
|
-
.ald-input
|
|
317
|
+
&.ant-input-group-compact {
|
|
318
|
+
.ald-input,
|
|
319
|
+
.ald-select,
|
|
320
|
+
.ald-btn.ant-btn {
|
|
316
321
|
border-radius: 0;
|
|
317
322
|
}
|
|
318
323
|
}
|
|
319
324
|
|
|
320
|
-
&.ant-input-group-compact
|
|
325
|
+
&.ant-input-group-compact > *:first-child {
|
|
321
326
|
border-radius: 0 !important;
|
|
322
327
|
border-start-start-radius: @input-border-radius-small !important;
|
|
323
328
|
border-end-start-radius: @input-border-radius-small !important;
|
|
324
329
|
}
|
|
325
330
|
|
|
326
|
-
&.ant-input-group-compact
|
|
331
|
+
&.ant-input-group-compact > *:last-child {
|
|
327
332
|
border-radius: 0 !important;
|
|
328
333
|
border-inline-end-width: 1px;
|
|
329
|
-
border-start-end-radius:
|
|
330
|
-
border-end-end-radius:
|
|
334
|
+
border-start-end-radius: @input-border-radius-small !important;
|
|
335
|
+
border-end-end-radius: @input-border-radius-small !important;
|
|
331
336
|
}
|
|
332
337
|
}
|
|
333
338
|
|
|
@@ -406,8 +411,8 @@ textarea.ald-input-textarea.ald-input-textarea,
|
|
|
406
411
|
}
|
|
407
412
|
|
|
408
413
|
.ant-input-group-wrapper {
|
|
409
|
-
.ant-input-group-addon{
|
|
410
|
-
color
|
|
414
|
+
.ant-input-group-addon {
|
|
415
|
+
color: @NL40;
|
|
411
416
|
border-color: @input-border-color;
|
|
412
417
|
}
|
|
413
418
|
|
|
@@ -504,6 +509,7 @@ textarea.ald-input-textarea.ald-input-textarea,
|
|
|
504
509
|
}
|
|
505
510
|
}
|
|
506
511
|
|
|
512
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
507
513
|
.ant-input-group-addon {
|
|
508
514
|
background-color: @input-bg-color;
|
|
509
515
|
|
|
@@ -519,23 +525,26 @@ textarea.ald-input-textarea.ald-input-textarea,
|
|
|
519
525
|
}
|
|
520
526
|
}
|
|
521
527
|
|
|
522
|
-
.ant-input-group.ant-input-group-compact{
|
|
523
|
-
|
|
524
|
-
.ald-select
|
|
525
|
-
|
|
528
|
+
.ant-input-group.ant-input-group-compact {
|
|
529
|
+
& > {
|
|
530
|
+
.ald-select,
|
|
531
|
+
.ald-input,
|
|
532
|
+
.ant-input,
|
|
533
|
+
.ant-input-number {
|
|
534
|
+
&:hover {
|
|
526
535
|
position: relative;
|
|
527
536
|
z-index: 2;
|
|
528
537
|
}
|
|
529
538
|
}
|
|
530
539
|
}
|
|
531
540
|
|
|
532
|
-
|
|
541
|
+
& > .ald-select.ald-select-open {
|
|
533
542
|
position: relative;
|
|
534
543
|
z-index: 1;
|
|
535
544
|
}
|
|
536
545
|
|
|
537
|
-
.ant-input-number.ant-input-number-focused{
|
|
546
|
+
.ant-input-number.ant-input-number-focused {
|
|
538
547
|
position: relative;
|
|
539
|
-
z-index: 1;
|
|
548
|
+
z-index: 1;
|
|
540
549
|
}
|
|
541
|
-
}
|
|
550
|
+
}
|
|
@@ -1 +1,11 @@
|
|
|
1
1
|
@import '../../style/index.less';
|
|
2
|
+
|
|
3
|
+
.ant-skeleton .ant-skeleton-content .ant-skeleton-title[class][class] {
|
|
4
|
+
height: 8px;
|
|
5
|
+
background: #f1f1f1;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph[class][class] > li {
|
|
9
|
+
height: 8px;
|
|
10
|
+
background: #f1f1f1;
|
|
11
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,81 +1,83 @@
|
|
|
1
|
-
export { default as Button } from './Button';
|
|
2
|
-
export type { IButtonProps as ButtonProps, ButtonType } from './Button';
|
|
3
|
-
export { default as Dropdown } from './Dropdown';
|
|
4
|
-
export type { ActionType, IDropdownProps as DropdownProps, PlacementType } from './Dropdown';
|
|
5
1
|
export { MenuClickEventHandler } from 'rc-menu/lib/interface';
|
|
6
|
-
export { default as Menu } from './Menu';
|
|
7
|
-
export type { IMenuProps as MenuProps, ItemType } from './Menu';
|
|
8
|
-
export { default as Input } from './Input';
|
|
9
|
-
export type { IInputProps as InputProps, InputRef, TextAreaRef } from './Input';
|
|
10
|
-
export { default as Tabs } from './Tabs';
|
|
11
|
-
export type { ITabsProps as TabsProps, TabsSize } from './Tabs';
|
|
12
|
-
export { default as Tooltip } from './Tooltip';
|
|
13
|
-
export type { ITooltipProps as TooltipProps, ActionType as TooltipActionType } from './Tooltip';
|
|
14
|
-
export { default as Select } from './Select';
|
|
15
|
-
export type { IRefSelectProps as RefSelectProps, ISelectProps as SelectProps } from './Select';
|
|
16
|
-
export { default as Table } from './Table';
|
|
17
|
-
export type { ISort, TSortOrder, ITableProps, IColumn } from './Table/interface';
|
|
18
|
-
export { default as Navigator } from './Navigator';
|
|
19
|
-
export type { INavigatorProps as NavigatorProps, IMenuItem as NavigatorMenu, ISelectedMenuInfo as SelectedMenuInfo, } from './Navigator';
|
|
20
2
|
export { default as Alert } from './Alert';
|
|
21
3
|
export type { AlertProps } from './Alert';
|
|
4
|
+
export { default as App } from './App';
|
|
5
|
+
export { default as Avatar } from './Avatar';
|
|
6
|
+
export type { IAvatarProps as AvatarProps } from './Avatar';
|
|
7
|
+
export { default as Breadcrumb } from './Breadcrumb';
|
|
8
|
+
export type { BreadcrumbItemProps, BreadcrumbProps } from './Breadcrumb';
|
|
9
|
+
export { default as Button } from './Button';
|
|
10
|
+
export type { ButtonType, IButtonProps as ButtonProps } from './Button';
|
|
22
11
|
export { default as Card } from './Card';
|
|
23
12
|
export type { CardProps } from './Card';
|
|
13
|
+
export { default as Checkbox } from './Checkbox';
|
|
14
|
+
export type { CheckboxOptionType, ICheckboxProps as CheckboxProps, } from './Checkbox';
|
|
24
15
|
export { default as Col } from './Col';
|
|
25
16
|
export type { ColProps } from './Col';
|
|
26
|
-
export
|
|
27
|
-
export {
|
|
28
|
-
export { default as
|
|
29
|
-
export type {
|
|
17
|
+
export { default as Collapse } from './Collapse';
|
|
18
|
+
export type { CollapsePanelProps, CollapseProps } from './Collapse';
|
|
19
|
+
export { default as ColorPicker } from './ColorPicker';
|
|
20
|
+
export type { IColorPickerProps } from './ColorPicker';
|
|
30
21
|
export { default as ConfigProvider } from './ConfigProvider';
|
|
31
22
|
export { default as DatePicker } from './DatePicker';
|
|
32
23
|
export type { DatePickerProps } from './DatePicker';
|
|
24
|
+
export { default as Divider } from './Divider';
|
|
25
|
+
export type { IDividerProps as DividerProps } from './Divider';
|
|
26
|
+
export { default as Drawer } from './Drawer';
|
|
27
|
+
export type { DrawerProps } from './Drawer';
|
|
28
|
+
export { default as Dropdown } from './Dropdown';
|
|
29
|
+
export type { ActionType, IDropdownProps as DropdownProps, PlacementType, } from './Dropdown';
|
|
30
|
+
export { default as Empty } from './Empty';
|
|
31
|
+
export type { IEmptyProps as EmptyProps } from './Empty';
|
|
32
|
+
export { default as Form } from './Form';
|
|
33
|
+
export type { FormInstance, FormItemProps, FormProps } from './Form';
|
|
34
|
+
export { default as Icon } from './Icon';
|
|
35
|
+
export { default as Input } from './Input';
|
|
36
|
+
export type { IInputProps as InputProps, InputRef, TextAreaRef } from './Input';
|
|
37
|
+
export { default as InputNumber } from './InputNumber';
|
|
38
|
+
export type { IInputNumberProps as InputNumberProps } from './InputNumber';
|
|
33
39
|
export { default as Layout } from './Layout';
|
|
34
40
|
export type { LayoutProps } from './Layout';
|
|
41
|
+
export { default as Menu } from './Menu';
|
|
42
|
+
export type { IMenuProps as MenuProps, ItemType } from './Menu';
|
|
35
43
|
export { default as message } from './message';
|
|
36
44
|
export type { MessageArgsProps } from './message';
|
|
45
|
+
export { default as Modal } from './Modal';
|
|
46
|
+
export type { ModalFuncProps, ModalProps } from './Modal';
|
|
47
|
+
export { default as Navigator } from './Navigator';
|
|
48
|
+
export type { IMenuItem as NavigatorMenu, INavigatorProps as NavigatorProps, ISelectedMenuInfo as SelectedMenuInfo, } from './Navigator';
|
|
37
49
|
export { default as notification } from './notification';
|
|
38
|
-
export
|
|
39
|
-
export {
|
|
40
|
-
export
|
|
41
|
-
export {
|
|
42
|
-
export
|
|
50
|
+
export { default as Popconfirm } from './Popconfirm';
|
|
51
|
+
export type { PopconfirmProps } from './Popconfirm';
|
|
52
|
+
export { default as Popover } from './Popover';
|
|
53
|
+
export type { PopoverProps } from './Popover';
|
|
54
|
+
export { default as Progress } from './Progress';
|
|
55
|
+
export type { ProgressProps } from './Progress';
|
|
56
|
+
export { default as Radio } from './Radio';
|
|
57
|
+
export type { RadioGroupProps, RadioProps } from './Radio';
|
|
43
58
|
export { default as Row } from './Row';
|
|
44
|
-
export type {
|
|
59
|
+
export type { RowProps } from './Row';
|
|
60
|
+
export { default as Select } from './Select';
|
|
61
|
+
export type { IRefSelectProps as RefSelectProps, ISelectProps as SelectProps, } from './Select';
|
|
62
|
+
export { default as Skeleton } from './Skeleton';
|
|
63
|
+
export type { SkeletonProps } from './Skeleton';
|
|
45
64
|
export { default as Space } from './Space';
|
|
46
|
-
export type {
|
|
65
|
+
export type { SpaceProps } from './Space';
|
|
47
66
|
export { default as Spin } from './Spin';
|
|
48
|
-
export type {
|
|
49
|
-
export { default as Progress } from './Progress';
|
|
50
|
-
export type { ISwitchProps as SwitchProps } from './Switch';
|
|
51
|
-
export { default as Switch } from './Switch';
|
|
52
|
-
export type { IStepProps as StepProps, IStepsProps as StepsProps } from './Steps';
|
|
67
|
+
export type { SpinProps } from './Spin';
|
|
53
68
|
export { default as Steps } from './Steps';
|
|
54
|
-
export {
|
|
55
|
-
export
|
|
56
|
-
export {
|
|
57
|
-
export
|
|
58
|
-
export {
|
|
59
|
-
export
|
|
60
|
-
export {
|
|
61
|
-
export
|
|
62
|
-
export {
|
|
63
|
-
export
|
|
64
|
-
export {
|
|
65
|
-
export
|
|
66
|
-
export {
|
|
67
|
-
export
|
|
68
|
-
export type {
|
|
69
|
-
export { default as InputNumber } from './InputNumber';
|
|
70
|
-
export { default as Breadcrumb } from './Breadcrumb';
|
|
71
|
-
export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb';
|
|
72
|
-
export { default as Empty } from './Empty';
|
|
73
|
-
export type { IEmptyProps as EmptyProps } from './Empty';
|
|
74
|
-
export { default as Avatar } from './Avatar';
|
|
75
|
-
export type { IAvatarProps as AvatarProps } from './Avatar';
|
|
76
|
-
export { default as Icon } from './Icon';
|
|
77
|
-
export type { PopconfirmProps } from './Popconfirm';
|
|
78
|
-
export { default as Popconfirm } from './Popconfirm';
|
|
79
|
-
export { default as Collapse } from './Collapse';
|
|
80
|
-
export type { CollapsePanelProps, CollapseProps } from './Collapse';
|
|
81
|
-
export { default as App } from './App';
|
|
69
|
+
export type { IStepProps as StepProps, IStepsProps as StepsProps, } from './Steps';
|
|
70
|
+
export { default as Switch } from './Switch';
|
|
71
|
+
export type { ISwitchProps as SwitchProps } from './Switch';
|
|
72
|
+
export { default as Table } from './Table';
|
|
73
|
+
export type { IColumn, ISort, ITableProps, TSortOrder, } from './Table/interface';
|
|
74
|
+
export { default as Tabs } from './Tabs';
|
|
75
|
+
export type { ITabsProps as TabsProps, TabsSize } from './Tabs';
|
|
76
|
+
export { default as Tooltip } from './Tooltip';
|
|
77
|
+
export type { ActionType as TooltipActionType, ITooltipProps as TooltipProps, } from './Tooltip';
|
|
78
|
+
export { default as Tree } from './Tree';
|
|
79
|
+
export type { AntTreeNodeProps as TreeNodeProps, DataNode as TreeDataNode, TreeProps, } from './Tree';
|
|
80
|
+
export { default as Typography } from './Typography';
|
|
81
|
+
export type { TypographyProps } from './Typography';
|
|
82
|
+
export { default as Upload } from './Upload';
|
|
83
|
+
export type { UploadFile, UploadProps } from './Upload';
|
package/dist/index.js
CHANGED
|
@@ -1,45 +1,46 @@
|
|
|
1
1
|
// / <reference path="../typings.d.ts" />
|
|
2
|
-
export { default as Button } from "./Button";
|
|
3
|
-
export { default as Dropdown } from "./Dropdown";
|
|
4
2
|
export { MenuClickEventHandler } from 'rc-menu/lib/interface';
|
|
5
|
-
export { default as Menu } from "./Menu";
|
|
6
|
-
export { default as Input } from "./Input";
|
|
7
|
-
export { default as Tabs } from "./Tabs";
|
|
8
|
-
export { default as Tooltip } from "./Tooltip";
|
|
9
|
-
export { default as Select } from "./Select";
|
|
10
|
-
export { default as Table } from "./Table";
|
|
11
|
-
export { default as Navigator } from "./Navigator";
|
|
12
3
|
export { default as Alert } from "./Alert";
|
|
4
|
+
export { default as App } from "./App";
|
|
5
|
+
export { default as Avatar } from "./Avatar";
|
|
6
|
+
export { default as Breadcrumb } from "./Breadcrumb";
|
|
7
|
+
export { default as Button } from "./Button";
|
|
13
8
|
export { default as Card } from "./Card";
|
|
9
|
+
export { default as Checkbox } from "./Checkbox";
|
|
14
10
|
export { default as Col } from "./Col";
|
|
15
|
-
export { default as
|
|
16
|
-
export { default as
|
|
11
|
+
export { default as Collapse } from "./Collapse";
|
|
12
|
+
export { default as ColorPicker } from "./ColorPicker";
|
|
17
13
|
export { default as ConfigProvider } from "./ConfigProvider";
|
|
18
14
|
export { default as DatePicker } from "./DatePicker";
|
|
15
|
+
export { default as Divider } from "./Divider";
|
|
16
|
+
export { default as Drawer } from "./Drawer";
|
|
17
|
+
export { default as Dropdown } from "./Dropdown";
|
|
18
|
+
export { default as Empty } from "./Empty";
|
|
19
|
+
export { default as Form } from "./Form";
|
|
20
|
+
export { default as Icon } from "./Icon";
|
|
21
|
+
export { default as Input } from "./Input";
|
|
22
|
+
export { default as InputNumber } from "./InputNumber";
|
|
19
23
|
export { default as Layout } from "./Layout";
|
|
24
|
+
export { default as Menu } from "./Menu";
|
|
20
25
|
export { default as message } from "./message"; // alias, keep API the same as antd
|
|
21
26
|
|
|
27
|
+
export { default as Modal } from "./Modal";
|
|
28
|
+
export { default as Navigator } from "./Navigator";
|
|
22
29
|
export { default as notification } from "./notification";
|
|
23
|
-
export { default as
|
|
24
|
-
export { default as
|
|
30
|
+
export { default as Popconfirm } from "./Popconfirm";
|
|
31
|
+
export { default as Popover } from "./Popover";
|
|
32
|
+
export { default as Progress } from "./Progress";
|
|
33
|
+
export { default as Radio } from "./Radio";
|
|
25
34
|
export { default as Row } from "./Row";
|
|
35
|
+
export { default as Select } from "./Select";
|
|
36
|
+
export { default as Skeleton } from "./Skeleton";
|
|
26
37
|
export { default as Space } from "./Space";
|
|
27
38
|
export { default as Spin } from "./Spin";
|
|
28
|
-
export { default as Progress } from "./Progress";
|
|
29
|
-
export { default as Switch } from "./Switch";
|
|
30
39
|
export { default as Steps } from "./Steps";
|
|
31
|
-
export { default as
|
|
32
|
-
export { default as
|
|
33
|
-
export { default as
|
|
34
|
-
export { default as
|
|
35
|
-
export { default as
|
|
36
|
-
export { default as
|
|
37
|
-
export { default as
|
|
38
|
-
export { default as InputNumber } from "./InputNumber";
|
|
39
|
-
export { default as Breadcrumb } from "./Breadcrumb";
|
|
40
|
-
export { default as Empty } from "./Empty";
|
|
41
|
-
export { default as Avatar } from "./Avatar";
|
|
42
|
-
export { default as Icon } from "./Icon";
|
|
43
|
-
export { default as Popconfirm } from "./Popconfirm";
|
|
44
|
-
export { default as Collapse } from "./Collapse";
|
|
45
|
-
export { default as App } from "./App";
|
|
40
|
+
export { default as Switch } from "./Switch";
|
|
41
|
+
export { default as Table } from "./Table";
|
|
42
|
+
export { default as Tabs } from "./Tabs";
|
|
43
|
+
export { default as Tooltip } from "./Tooltip";
|
|
44
|
+
export { default as Tree } from "./Tree";
|
|
45
|
+
export { default as Typography } from "./Typography";
|
|
46
|
+
export { default as Upload } from "./Upload";
|