@king-design/intact 3.2.1 → 3.2.2-beta.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/components/menu/demos/showCollapseArrow.md +4 -2
- package/components/menu/styles.ts +1 -0
- package/es/components/menu/styles.js +1 -1
- package/es/index.d.ts +2 -2
- package/es/index.js +2 -2
- package/es/site/data/components/menu/demos/showCollapseArrow/index.js +3 -2
- package/es/site/data/components/menu/demos/showCollapseArrow/react.js +9 -2
- package/index.ts +2 -2
- package/package.json +2 -3
|
@@ -32,6 +32,7 @@ import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button} from 'kpc'
|
|
|
32
32
|
<Menu
|
|
33
33
|
v-model:expandedKeys="expandedKeys"
|
|
34
34
|
v-model:selectedKey="selectedKey"
|
|
35
|
+
v-model:collapse="collapse"
|
|
35
36
|
theme={this.get('theme')}
|
|
36
37
|
size={this.get('size')}
|
|
37
38
|
showCollapseArrow={this.get('showCollapseArrow')}
|
|
@@ -84,9 +85,10 @@ export default class extends Component<Props> {
|
|
|
84
85
|
return {
|
|
85
86
|
expandedKeys: [],
|
|
86
87
|
selectedKey: '2',
|
|
87
|
-
size: '
|
|
88
|
+
size: 'small',
|
|
88
89
|
theme: 'light',
|
|
89
|
-
showCollapseArrow:
|
|
90
|
+
showCollapseArrow: true,
|
|
91
|
+
collapse: false,
|
|
90
92
|
} as MenuProps;
|
|
91
93
|
}
|
|
92
94
|
}
|
|
@@ -112,7 +112,7 @@ export { menu };
|
|
|
112
112
|
export var makeMenuStyles = cache(function makeMenuStyles(k) {
|
|
113
113
|
// we must increase the priority by adding &.${k}-menu
|
|
114
114
|
// to override the css of dropdownMenu
|
|
115
|
-
return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";position:relative;}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";padding:0 21px;color:", menu.header.color, ";font-size:", menu.header.fontSize, ";font-weight:bold;}.", k, "-menu-body{padding:", menu.item.bodyPadding, ";max-height:calc(100vh - ", menu.header.height, ");overflow-y:auto;}.", k, "-menu-title{height:", menu.title.height, ";border-top:", menu.border, ";margin-top:4px;.", k, "-menu-name{transition:all ", menu.transition, ";height:", menu.title.height, ";color:", menu.title.color, ";font-weight:bold;}}.", k, "-menu-arrow-box{width:14px;height:60px;cursor:pointer;background:", menu.bgColor, ";border-radius:0 8px 8px 0;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:calc(", menu.width, " - 2px);transition:left ", menu.transition, ";transform:translateY(-50%);border:", menu.border, ";border-left:none;.", k, "-icon{margin-right:0;}&:hover{.", k, "-menu-arrow:before{color:", menu.item.activeBgColor, ";}}}&.", k, "-light{border:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.color, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.light.item.subTitleColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
|
|
115
|
+
return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";position:relative;}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";padding:0 21px;color:", menu.header.color, ";font-size:", menu.header.fontSize, ";font-weight:bold;}.", k, "-menu-body{padding:", menu.item.bodyPadding, ";max-height:calc(100vh - ", menu.header.height, ");overflow-y:auto;overflow-x:hidden;}.", k, "-menu-title{height:", menu.title.height, ";border-top:", menu.border, ";margin-top:4px;.", k, "-menu-name{transition:all ", menu.transition, ";height:", menu.title.height, ";color:", menu.title.color, ";font-weight:bold;}}.", k, "-menu-arrow-box{width:14px;height:60px;cursor:pointer;background:", menu.bgColor, ";border-radius:0 8px 8px 0;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:calc(", menu.width, " - 2px);transition:left ", menu.transition, ";transform:translateY(-50%);border:", menu.border, ";border-left:none;.", k, "-icon{margin-right:0;}&:hover{.", k, "-menu-arrow:before{color:", menu.item.activeBgColor, ";}}}&.", k, "-light{border:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.color, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.light.item.subTitleColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
|
|
116
116
|
var styles = menu[size];
|
|
117
117
|
return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}.", k, "-menu-arrow-box{left:calc(", styles.width, " - 2px);}}");
|
|
118
118
|
}), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + (", getLeft(menu.item.padding), " + ", getLeft(menu.item.bodyPadding), ") * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-item-arrow{display:none;}}&.", k, "-collapsed-arrow{width:0px;border-left:none;.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");
|
package/es/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.2.
|
|
2
|
+
* @king-design v3.2.2-beta.0
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -60,4 +60,4 @@ export * from './components/tree';
|
|
|
60
60
|
export * from './components/treeSelect';
|
|
61
61
|
export * from './components/upload';
|
|
62
62
|
export * from './components/wave';
|
|
63
|
-
export declare const version = "3.2.
|
|
63
|
+
export declare const version = "3.2.2-beta.0";
|
package/es/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.2.
|
|
2
|
+
* @king-design v3.2.2-beta.0
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -61,5 +61,5 @@ export * from './components/tree';
|
|
|
61
61
|
export * from './components/treeSelect';
|
|
62
62
|
export * from './components/upload';
|
|
63
63
|
export * from './components/wave';
|
|
64
|
-
export var version = '3.2.
|
|
64
|
+
export var version = '3.2.2-beta.0';
|
|
65
65
|
/* generate end */
|
|
@@ -12,9 +12,10 @@ var default_1 = /*#__PURE__*/function (_Component) {
|
|
|
12
12
|
return {
|
|
13
13
|
expandedKeys: [],
|
|
14
14
|
selectedKey: '2',
|
|
15
|
-
size: '
|
|
15
|
+
size: 'small',
|
|
16
16
|
theme: 'light',
|
|
17
|
-
showCollapseArrow:
|
|
17
|
+
showCollapseArrow: true,
|
|
18
|
+
collapse: false
|
|
18
19
|
};
|
|
19
20
|
};
|
|
20
21
|
return default_1;
|
|
@@ -15,9 +15,10 @@ var Demo = /*#__PURE__*/function (_React$Component) {
|
|
|
15
15
|
_this.state = {
|
|
16
16
|
expandedKeys: [],
|
|
17
17
|
selectedKey: '2',
|
|
18
|
-
size: '
|
|
18
|
+
size: 'small',
|
|
19
19
|
theme: 'light',
|
|
20
|
-
showCollapseArrow:
|
|
20
|
+
showCollapseArrow: true,
|
|
21
|
+
collapse: false
|
|
21
22
|
};
|
|
22
23
|
return _this;
|
|
23
24
|
}
|
|
@@ -76,6 +77,12 @@ var Demo = /*#__PURE__*/function (_React$Component) {
|
|
|
76
77
|
selectedKey: selectedKey
|
|
77
78
|
});
|
|
78
79
|
},
|
|
80
|
+
collapse: this.state.collapse,
|
|
81
|
+
onChangeCollapse: function onChangeCollapse(collapse) {
|
|
82
|
+
return _this2.setState({
|
|
83
|
+
collapse: collapse
|
|
84
|
+
});
|
|
85
|
+
},
|
|
79
86
|
theme: this.state.theme,
|
|
80
87
|
size: this.state.size,
|
|
81
88
|
showCollapseArrow: this.state.showCollapseArrow
|
package/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.2.
|
|
2
|
+
* @king-design v3.2.2-beta.0
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -65,6 +65,6 @@ export * from './components/treeSelect';
|
|
|
65
65
|
export * from './components/upload';
|
|
66
66
|
export * from './components/wave';
|
|
67
67
|
|
|
68
|
-
export const version = '3.2.
|
|
68
|
+
export const version = '3.2.2-beta.0';
|
|
69
69
|
|
|
70
70
|
/* generate end */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@king-design/intact",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.2-beta.0",
|
|
4
4
|
"description": "A component library written in Intact for Intact, Vue, React and Angular",
|
|
5
5
|
"main": "es/index.js",
|
|
6
6
|
"engines": {
|
|
@@ -190,8 +190,7 @@
|
|
|
190
190
|
"sideEffects": [
|
|
191
191
|
"*.css",
|
|
192
192
|
"*.styl",
|
|
193
|
-
"
|
|
194
|
-
"**/*/styles/fonts/*"
|
|
193
|
+
"./styles/**/*"
|
|
195
194
|
],
|
|
196
195
|
"browserslist": [
|
|
197
196
|
"last 2 versions",
|