@aloudata/aloudata-design 2.13.5-beta.1 → 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 +7 -4
- 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
|
@@ -37,7 +37,7 @@ var defaultDropdownStyle = {
|
|
|
37
37
|
};
|
|
38
38
|
var DEFAULT_LIST_ITEM_HEIGHT = 36;
|
|
39
39
|
var getSelectedOptionsFromValue = function getSelectedOptionsFromValue(isMultiple, options, value, defaultValue, prevSelectOptions) {
|
|
40
|
-
if (typeof value !== 'undefined') {
|
|
40
|
+
if (typeof value !== 'undefined' || prevSelectOptions !== null && prevSelectOptions !== void 0 && prevSelectOptions.length) {
|
|
41
41
|
if (isMultiple) {
|
|
42
42
|
if (Array.isArray(value)) {
|
|
43
43
|
var _newOptions = [];
|
|
@@ -57,6 +57,8 @@ var getSelectedOptionsFromValue = function getSelectedOptionsFromValue(isMultipl
|
|
|
57
57
|
}
|
|
58
58
|
});
|
|
59
59
|
return _newOptions;
|
|
60
|
+
} else {
|
|
61
|
+
return prevSelectOptions || [];
|
|
60
62
|
}
|
|
61
63
|
} else {
|
|
62
64
|
var newOptions = options === null || options === void 0 ? void 0 : options.filter(function (option) {
|
|
@@ -129,6 +131,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
129
131
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
130
132
|
var placeholder = type === 'primary' ? t.Select.all : propsPlaceholder;
|
|
131
133
|
var contentSize = useContext(SizeContext);
|
|
134
|
+
var defaultValueRef = React.useRef(defaultValue);
|
|
132
135
|
var _React$useContext = React.useContext(ConfigContext),
|
|
133
136
|
getPrefixCls = _React$useContext.getPrefixCls,
|
|
134
137
|
direction = _React$useContext.direction;
|
|
@@ -150,7 +153,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
150
153
|
var isMultiple = mode === 'multiple';
|
|
151
154
|
var listItemHeight = typeof props.listItemHeight === 'number' ? props.listItemHeight : DEFAULT_LIST_ITEM_HEIGHT;
|
|
152
155
|
var innerOptions = options;
|
|
153
|
-
var _React$useState = React.useState(getSelectedOptionsFromValue(isMultiple, innerOptions, value,
|
|
156
|
+
var _React$useState = React.useState(getSelectedOptionsFromValue(isMultiple, innerOptions, value, defaultValueRef.current)),
|
|
154
157
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
155
158
|
selectedOptions = _React$useState2[0],
|
|
156
159
|
setSelectedOptions = _React$useState2[1];
|
|
@@ -379,12 +382,12 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
379
382
|
useEffect(function () {
|
|
380
383
|
if (updatedRef.current) {
|
|
381
384
|
setSelectedOptions(function (prev) {
|
|
382
|
-
return getSelectedOptionsFromValue(isMultiple, innerOptions, value,
|
|
385
|
+
return getSelectedOptionsFromValue(isMultiple, innerOptions, value, undefined, prev);
|
|
383
386
|
});
|
|
384
387
|
} else {
|
|
385
388
|
updatedRef.current = true;
|
|
386
389
|
}
|
|
387
|
-
}, [value, innerOptions, isMultiple
|
|
390
|
+
}, [value, innerOptions, isMultiple]);
|
|
388
391
|
var wrapRef = useRef(null);
|
|
389
392
|
useEffect(function () {
|
|
390
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
|
+
}
|