@aloudata/aloudata-design 2.13.5 → 2.13.6
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/IconButton/style/index.less +9 -21
- package/dist/Select/index.js +28 -10
- package/dist/Tabs/index.js +4 -1
- package/dist/Tabs/style/index.less +40 -0
- package/dist/ald.min.css +1 -1
- package/package.json +1 -1
|
@@ -38,26 +38,27 @@
|
|
|
38
38
|
transition: background 0.3s;
|
|
39
39
|
|
|
40
40
|
&:hover {
|
|
41
|
-
background:
|
|
41
|
+
background: rgba(31, 41, 55, 0.1);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
&.ald-icon-button-focus {
|
|
45
|
-
background:
|
|
45
|
+
background: rgba(31, 41, 55, 0.1);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
&.ant-dropdown-open {
|
|
49
|
-
background:
|
|
49
|
+
background: rgba(31, 41, 55, 0.1);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
&:active {
|
|
53
53
|
// mouse down
|
|
54
|
-
background:
|
|
54
|
+
background: rgba(31, 41, 55, 0.05);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
&-disabled {
|
|
58
58
|
color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
|
|
59
59
|
cursor: default;
|
|
60
60
|
background-color: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
|
|
61
|
+
opacity: 0.5;
|
|
61
62
|
|
|
62
63
|
.ald-icon {
|
|
63
64
|
color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
|
|
@@ -76,33 +77,20 @@
|
|
|
76
77
|
}
|
|
77
78
|
|
|
78
79
|
&.ald-icon-button-dark {
|
|
79
|
-
color: var(--alias-colors-
|
|
80
|
+
color: var(--alias-colors-text-inverse-default, rgba(255, 255, 255, 0.88));
|
|
80
81
|
|
|
81
82
|
&:hover {
|
|
82
|
-
background:
|
|
83
|
-
--alias-colors-bg-interaction-inverse-hover,
|
|
84
|
-
rgba(255, 255, 255, 0.1)
|
|
85
|
-
);
|
|
83
|
+
background: rgba(255, 255, 255, 0.1);
|
|
86
84
|
}
|
|
87
85
|
|
|
88
86
|
&.ant-dropdown-open {
|
|
89
|
-
background:
|
|
90
|
-
--alias-colors-bg-interaction-inverse-hover,
|
|
91
|
-
rgba(255, 255, 255, 0.1)
|
|
92
|
-
);
|
|
87
|
+
background: rgba(255, 255, 255, 0.1);
|
|
93
88
|
}
|
|
94
89
|
|
|
95
90
|
&:active {
|
|
96
|
-
background:
|
|
97
|
-
--alias-colors-bg-interaction-inverse-press,
|
|
98
|
-
rgba(255, 255, 255, 0.15)
|
|
99
|
-
);
|
|
91
|
+
background: rgba(255, 255, 255, 0.05);
|
|
100
92
|
}
|
|
101
93
|
}
|
|
102
|
-
|
|
103
|
-
&:not(.ald-icon-button-dark) {
|
|
104
|
-
mix-blend-mode: multiply;
|
|
105
|
-
}
|
|
106
94
|
}
|
|
107
95
|
|
|
108
96
|
.ald-icon-button-wrap-content(@size) {
|
package/dist/Select/index.js
CHANGED
|
@@ -36,20 +36,35 @@ var defaultDropdownStyle = {
|
|
|
36
36
|
minWidth: 192
|
|
37
37
|
};
|
|
38
38
|
var DEFAULT_LIST_ITEM_HEIGHT = 36;
|
|
39
|
-
var getSelectedOptionsFromValue = function getSelectedOptionsFromValue(isMultiple, options, value, defaultValue) {
|
|
40
|
-
if (typeof value !== 'undefined') {
|
|
39
|
+
var getSelectedOptionsFromValue = function getSelectedOptionsFromValue(isMultiple, options, value, defaultValue, prevSelectOptions) {
|
|
40
|
+
if (typeof value !== 'undefined' || prevSelectOptions !== null && prevSelectOptions !== void 0 && prevSelectOptions.length) {
|
|
41
41
|
if (isMultiple) {
|
|
42
42
|
if (Array.isArray(value)) {
|
|
43
|
-
var
|
|
44
|
-
|
|
43
|
+
var _newOptions = [];
|
|
44
|
+
value.forEach(function (currentValue) {
|
|
45
|
+
var newOption = options === null || options === void 0 ? void 0 : options.find(function (option) {
|
|
46
|
+
return option.value === currentValue;
|
|
47
|
+
});
|
|
48
|
+
if (newOption) {
|
|
49
|
+
_newOptions.push(newOption);
|
|
50
|
+
} else {
|
|
51
|
+
var prevOption = prevSelectOptions === null || prevSelectOptions === void 0 ? void 0 : prevSelectOptions.find(function (option) {
|
|
52
|
+
return option.value === currentValue;
|
|
53
|
+
});
|
|
54
|
+
if (prevOption) {
|
|
55
|
+
_newOptions.push(prevOption);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
45
58
|
});
|
|
46
|
-
return
|
|
59
|
+
return _newOptions;
|
|
60
|
+
} else {
|
|
61
|
+
return prevSelectOptions || [];
|
|
47
62
|
}
|
|
48
63
|
} else {
|
|
49
|
-
var
|
|
64
|
+
var newOptions = options === null || options === void 0 ? void 0 : options.filter(function (option) {
|
|
50
65
|
return option.value === value;
|
|
51
66
|
});
|
|
52
|
-
return
|
|
67
|
+
return newOptions || [];
|
|
53
68
|
}
|
|
54
69
|
return [];
|
|
55
70
|
}
|
|
@@ -116,6 +131,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
116
131
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
117
132
|
var placeholder = type === 'primary' ? t.Select.all : propsPlaceholder;
|
|
118
133
|
var contentSize = useContext(SizeContext);
|
|
134
|
+
var defaultValueRef = React.useRef(defaultValue);
|
|
119
135
|
var _React$useContext = React.useContext(ConfigContext),
|
|
120
136
|
getPrefixCls = _React$useContext.getPrefixCls,
|
|
121
137
|
direction = _React$useContext.direction;
|
|
@@ -137,7 +153,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
137
153
|
var isMultiple = mode === 'multiple';
|
|
138
154
|
var listItemHeight = typeof props.listItemHeight === 'number' ? props.listItemHeight : DEFAULT_LIST_ITEM_HEIGHT;
|
|
139
155
|
var innerOptions = options;
|
|
140
|
-
var _React$useState = React.useState(getSelectedOptionsFromValue(isMultiple, innerOptions, value,
|
|
156
|
+
var _React$useState = React.useState(getSelectedOptionsFromValue(isMultiple, innerOptions, value, defaultValueRef.current)),
|
|
141
157
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
142
158
|
selectedOptions = _React$useState2[0],
|
|
143
159
|
setSelectedOptions = _React$useState2[1];
|
|
@@ -365,11 +381,13 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
365
381
|
};
|
|
366
382
|
useEffect(function () {
|
|
367
383
|
if (updatedRef.current) {
|
|
368
|
-
setSelectedOptions(
|
|
384
|
+
setSelectedOptions(function (prev) {
|
|
385
|
+
return getSelectedOptionsFromValue(isMultiple, innerOptions, value, undefined, prev);
|
|
386
|
+
});
|
|
369
387
|
} else {
|
|
370
388
|
updatedRef.current = true;
|
|
371
389
|
}
|
|
372
|
-
}, [value, innerOptions, isMultiple
|
|
390
|
+
}, [value, innerOptions, isMultiple]);
|
|
373
391
|
var wrapRef = useRef(null);
|
|
374
392
|
useEffect(function () {
|
|
375
393
|
var observer = new MutationObserver(function m(mutations) {
|
package/dist/Tabs/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
-
var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "tabPosition", "padding", "compact", "hasDividing"];
|
|
2
|
+
var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "tabPosition", "padding", "compact", "hasDividing", "type"];
|
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -29,6 +29,7 @@ export default function Tabs(props) {
|
|
|
29
29
|
compact = props.compact,
|
|
30
30
|
_props$hasDividing = props.hasDividing,
|
|
31
31
|
hasDividing = _props$hasDividing === void 0 ? true : _props$hasDividing,
|
|
32
|
+
type = props.type,
|
|
32
33
|
otherProps = _objectWithoutProperties(props, _excluded);
|
|
33
34
|
var headerBackgroundColor = props.headerBackgroundColor;
|
|
34
35
|
var tabsProps = _objectSpread({}, otherProps);
|
|
@@ -47,6 +48,7 @@ export default function Tabs(props) {
|
|
|
47
48
|
return 0;
|
|
48
49
|
}, [propsPadding, tabPosition]);
|
|
49
50
|
var getTabBarGutter = function getTabBarGutter() {
|
|
51
|
+
if (type === 'editable-card') return 4;
|
|
50
52
|
if (tabPosition === 'top' && !monospace) {
|
|
51
53
|
return 24;
|
|
52
54
|
}
|
|
@@ -61,6 +63,7 @@ export default function Tabs(props) {
|
|
|
61
63
|
'--tabs-padding': "".concat(padding, "px")
|
|
62
64
|
}),
|
|
63
65
|
tabPosition: tabPosition,
|
|
66
|
+
type: type,
|
|
64
67
|
tabBarGutter: getTabBarGutter(),
|
|
65
68
|
popupClassName: classNames(popupClassName, 'ald-tabs-dropdown'),
|
|
66
69
|
className: classNames('ald-tabs', className, {
|
|
@@ -219,3 +219,43 @@
|
|
|
219
219
|
border-bottom: 0;
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
|
+
|
|
223
|
+
.ant-tabs.ald-tabs.ant-tabs-editable-card {
|
|
224
|
+
.ant-tabs-tab {
|
|
225
|
+
display: flex;
|
|
226
|
+
height: 40px;
|
|
227
|
+
padding: 0 16px;
|
|
228
|
+
justify-content: center;
|
|
229
|
+
align-items: center;
|
|
230
|
+
gap: var(--alias-spacing-75, 6px);
|
|
231
|
+
border-radius: 6px 6px 0 0;
|
|
232
|
+
border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
|
|
233
|
+
border-right: 1px solid var(--alias-colors-border-default, #e5e7eb);
|
|
234
|
+
border-left: 1px solid var(--alias-colors-border-default, #e5e7eb);
|
|
235
|
+
background: var(--alias-colors-bg-skeleton-subtler, #fff);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.ant-tabs-tab-remove {
|
|
239
|
+
margin: 0;
|
|
240
|
+
width: 16px;
|
|
241
|
+
padding: 0;
|
|
242
|
+
padding-inline: 0;
|
|
243
|
+
display: grid;
|
|
244
|
+
place-items: center;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.ant-tabs-tab-active .ant-tabs-tab-btn {
|
|
248
|
+
color: @tabs-color-active;
|
|
249
|
+
font-weight: @tabs-fontWeight-active;
|
|
250
|
+
text-shadow: none;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.anticon-close,
|
|
254
|
+
.anticon-plus {
|
|
255
|
+
color: #6b7280;
|
|
256
|
+
|
|
257
|
+
&:hover {
|
|
258
|
+
color: #374151;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
}
|