@king-design/intact 3.1.1-beta.1 → 3.1.1-beta.2
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/collapse/demos/basic.md +1 -1
- package/components/dialog/base.vdt +33 -30
- package/components/drawer/demos/basic.md +0 -2
- package/components/drawer/demos/content.md +38 -0
- package/components/drawer/demos/placement.md +11 -1
- package/components/drawer/index.spec.ts +1 -1
- package/components/drawer/index.vdt +2 -2
- package/components/drawer/styles.ts +31 -52
- package/components/input/demos/autowidth.md +5 -1
- package/components/input/index.vdt +1 -1
- package/es/components/dialog/base.vdt.js +65 -55
- package/es/components/drawer/index.spec.js +1 -1
- package/es/components/drawer/index.vdt.js +4 -4
- package/es/components/drawer/styles.js +5 -34
- package/es/components/input/index.vdt.js +1 -1
- package/es/index.d.ts +2 -2
- package/es/index.js +2 -2
- package/es/site/data/components/collapse/demos/basic/react.js +3 -0
- package/es/site/data/components/drawer/demos/content/index.d.ts +11 -0
- package/es/site/data/components/drawer/demos/content/index.js +23 -0
- package/es/site/data/components/drawer/demos/content/react.d.ts +12 -0
- package/es/site/data/components/drawer/demos/content/react.js +61 -0
- package/es/site/data/components/drawer/demos/placement/index.d.ts +1 -0
- package/es/site/data/components/drawer/demos/placement/index.js +1 -0
- package/es/site/data/components/drawer/demos/placement/react.d.ts +1 -0
- package/es/site/data/components/drawer/demos/placement/react.js +23 -5
- package/es/site/data/components/input/demos/autowidth/react.js +6 -2
- package/index.ts +2 -2
- package/package.json +2 -2
|
@@ -16,7 +16,7 @@ import {Collapse, CollapseItem} from 'kpc';
|
|
|
16
16
|
<p>语言是合作的基础。在团队中工作，没有共同的语言，一群人不能共同有效地合作。同理，因为每个人都会有不同的心智模式去达成各自的目的，如果没有共同的设计语言，对界面元素的共同理解，那么我们很难通过协作输出协调一致并具备高可用性的产品。</p>
|
|
17
17
|
<p>拥有通用语言意味着我们有相同的方法来命名界面元素和定义设计模式，或者在设计文件和前端框架中使用相同的名称。通用设计语言让团队成员达成了相互理解，基于共同的理解，参与产品创建的每个人都知道这个元素是什么: 它的名称和目的, 为什么这样设计, 以及如何及何时使用它。</p>
|
|
18
18
|
<p>当设计语言是通用知识时，它就成为一个强大的设计和协作工具，产品创建过程中便可停止专注于界面样式本身，而更多地关注用户。</p>
|
|
19
|
-
<Collapse v-model="innerValue">
|
|
19
|
+
<Collapse v-model="innerValue" style="margin-bottom: 16px;">
|
|
20
20
|
<CollapseItem title="设计语言" ev-show={this.onShow}>
|
|
21
21
|
<p>语言是合作的基础。在团队中工作，没有共同的语言，一群人不能共同有效地合作。同理，因为每个人都会有不同的心智模式去达成各自的目的，如果没有共同的设计语言，对界面元素的共同理解，那么我们很难通过协作输出协调一致并具备高可用性的产品。</p>
|
|
22
22
|
<p>拥有通用语言意味着我们有相同的方法来命名界面元素和定义设计模式，或者在设计文件和前端框架中使用相同的名称。通用设计语言让团队成员达成了相互理解，基于共同的理解，参与产品创建的每个人都知道这个元素是什么: 它的名称和目的, 为什么这样设计, 以及如何及何时使用它。</p>
|
|
@@ -37,38 +37,41 @@ const dialog = (
|
|
|
37
37
|
style={{width: typeof width === 'number' ? `${width}px` : width}}
|
|
38
38
|
ev-mousedown={this.mouseOutsidable.onMouseDown}
|
|
39
39
|
>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<span class={`${k}-dialog-title`}>{title}</span>
|
|
46
|
-
</b:header>
|
|
47
|
-
<Button type="none" icon title={_$("关闭")} class={`${k}-dialog-close`}
|
|
48
|
-
ev-click={this.terminate}
|
|
49
|
-
v-if={!hideClose && !$props.hideClose}
|
|
50
|
-
ev-mousedown={stopPropagation}
|
|
40
|
+
{/* Drawer will inherit the content block, it will lead to conflict with custom content block. So wrap a private _content block. @issue: #922 */}
|
|
41
|
+
<b:_content>
|
|
42
|
+
<b:content>
|
|
43
|
+
<div class={`${k}-dialog-header`}
|
|
44
|
+
ev-mousedown={this.drag.start}
|
|
51
45
|
>
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<Button class={`${k}-dialog-ok`}
|
|
63
|
-
type="primary"
|
|
64
|
-
ev-click={this.ok}
|
|
65
|
-
loading={loading}
|
|
66
|
-
disabled={disabledOk}
|
|
67
|
-
>{okText}</Button>
|
|
68
|
-
</b:footer>
|
|
46
|
+
<b:header>
|
|
47
|
+
<span class={`${k}-dialog-title`}>{title}</span>
|
|
48
|
+
</b:header>
|
|
49
|
+
<Button type="none" icon title={_$("关闭")} class={`${k}-dialog-close`}
|
|
50
|
+
ev-click={this.terminate}
|
|
51
|
+
v-if={!hideClose && !$props.hideClose}
|
|
52
|
+
ev-mousedown={stopPropagation}
|
|
53
|
+
>
|
|
54
|
+
<Icon class={`${k}-icon-close`} />
|
|
55
|
+
</Button>
|
|
69
56
|
</div>
|
|
70
|
-
|
|
71
|
-
|
|
57
|
+
<div class={`${k}-dialog-body`}><b:body>{children}</b:body></div>
|
|
58
|
+
<b:footer-wrapper>
|
|
59
|
+
<div class={`${k}-dialog-footer`}>
|
|
60
|
+
<b:footer>
|
|
61
|
+
<Button class={`${k}-dialog-cancel`}
|
|
62
|
+
ev-click={this.cancel}
|
|
63
|
+
>{cancelText}</Button>
|
|
64
|
+
<Button class={`${k}-dialog-ok`}
|
|
65
|
+
type="primary"
|
|
66
|
+
ev-click={this.ok}
|
|
67
|
+
loading={loading}
|
|
68
|
+
disabled={disabledOk}
|
|
69
|
+
>{okText}</Button>
|
|
70
|
+
</b:footer>
|
|
71
|
+
</div>
|
|
72
|
+
</b:footer-wrapper>
|
|
73
|
+
</b:content>
|
|
74
|
+
</b:_content>
|
|
72
75
|
</div>
|
|
73
76
|
</Transition>
|
|
74
77
|
);
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: 自定义整个内容
|
|
3
|
+
order: 3
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
通过`content`扩展点可以定义整个抽屉内容
|
|
7
|
+
|
|
8
|
+
```vdt
|
|
9
|
+
import {Drawer, Button, ButtonGroup, Select, Option} from 'kpc';
|
|
10
|
+
|
|
11
|
+
<div>
|
|
12
|
+
<Button ev-click={this.set.bind(this, 'show', true)}
|
|
13
|
+
type="primary"
|
|
14
|
+
>Show Drawer</Button>
|
|
15
|
+
<Drawer v-model="show" title="Drawer Title" placement="top" size="small">
|
|
16
|
+
<b:content>
|
|
17
|
+
<div style="padding: 16px; text-align: center;">
|
|
18
|
+
Hello King-Design!
|
|
19
|
+
</div>
|
|
20
|
+
</b:content>
|
|
21
|
+
</Drawer>
|
|
22
|
+
</div>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
interface Props {
|
|
27
|
+
show?: boolean
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export default class extends Component<Props> {
|
|
31
|
+
static template = template;
|
|
32
|
+
static defaults() {
|
|
33
|
+
return {
|
|
34
|
+
show: false
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
```
|
|
@@ -9,9 +9,17 @@ order: 0.1
|
|
|
9
9
|
import {Drawer, Button, ButtonGroup} from 'kpc';
|
|
10
10
|
|
|
11
11
|
<div>
|
|
12
|
+
<ButtonGroup checkType="radio" v-model="size">
|
|
13
|
+
<Button value="large">large</Button>
|
|
14
|
+
<Button value="default">default</Button>
|
|
15
|
+
<Button value="small">small</Button>
|
|
16
|
+
<Button value="mini">mini</Button>
|
|
17
|
+
</ButtonGroup>
|
|
18
|
+
<br /><br />
|
|
12
19
|
<ButtonGroup>
|
|
13
20
|
<Button v-for={this.get('showList')}
|
|
14
21
|
ev-click={this.showDrawer.bind(self, $value.key)}
|
|
22
|
+
class="placement-btn"
|
|
15
23
|
>{$value.value}</Button>
|
|
16
24
|
</ButtonGroup>
|
|
17
25
|
|
|
@@ -19,7 +27,7 @@ import {Drawer, Button, ButtonGroup} from 'kpc';
|
|
|
19
27
|
title='Drawer Title'
|
|
20
28
|
ref='__demoTwo'
|
|
21
29
|
placement={this.get('showPosition')}
|
|
22
|
-
size='
|
|
30
|
+
size={this.get('size')}
|
|
23
31
|
>
|
|
24
32
|
Drawer Body
|
|
25
33
|
</Drawer>
|
|
@@ -33,6 +41,7 @@ interface Props {
|
|
|
33
41
|
show?: boolean
|
|
34
42
|
showPosition: DrawerProps['placement']
|
|
35
43
|
showList: ListItem[]
|
|
44
|
+
size: DrawerProps['size']
|
|
36
45
|
}
|
|
37
46
|
|
|
38
47
|
type ListItem = {
|
|
@@ -47,6 +56,7 @@ export default class extends Component<Props> {
|
|
|
47
56
|
return {
|
|
48
57
|
show: false,
|
|
49
58
|
showPosition: 'right',
|
|
59
|
+
size: 'default',
|
|
50
60
|
showList: [
|
|
51
61
|
{
|
|
52
62
|
key: 'top',
|
|
@@ -34,7 +34,7 @@ describe('Drawer', () => {
|
|
|
34
34
|
this.timeout(0);
|
|
35
35
|
const [instance, element] = mount(PlacementDemo);
|
|
36
36
|
|
|
37
|
-
const [top, bottom, left, right] = element.querySelectorAll<HTMLElement>('.
|
|
37
|
+
const [top, bottom, left, right] = element.querySelectorAll<HTMLElement>('.placement-btn');
|
|
38
38
|
const test = async (btn: HTMLElement, className: string) => {
|
|
39
39
|
dispatchEvent(btn, 'click');
|
|
40
40
|
await wait();
|
|
@@ -20,10 +20,14 @@ setDefault(() => {
|
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
export function makeStyles(overlay: boolean, k: string) {
|
|
23
|
+
const borderRadius = theme.largeBorderRadius;
|
|
23
24
|
return css`
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
&.k-drawer {
|
|
26
|
+
position: fixed;
|
|
27
|
+
background: transparent;
|
|
28
|
+
box-shadow: none;
|
|
29
|
+
border-radius: 0;
|
|
30
|
+
}
|
|
27
31
|
|
|
28
32
|
&.transition-enter-active,
|
|
29
33
|
&.transition-leave-active,
|
|
@@ -48,56 +52,31 @@ export function makeStyles(overlay: boolean, k: string) {
|
|
|
48
52
|
}
|
|
49
53
|
}
|
|
50
54
|
|
|
51
|
-
${
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
: `${p}: auto;`
|
|
62
|
-
: `${p}: 0;`;
|
|
63
|
-
});
|
|
55
|
+
${makePlacementStyles(k, 'right', `right: 0; height: 100%;`, `translateX(100%)`, `${borderRadius} 0 0 ${borderRadius}`)}
|
|
56
|
+
${makePlacementStyles(k, 'left', 'left: 0; height: 100%;', `translateX(-100%)`, `0 ${borderRadius} ${borderRadius} 0`)}
|
|
57
|
+
${makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', `translateY(-100%)`, `0 0 ${borderRadius} ${borderRadius}`)}
|
|
58
|
+
${makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', `translateY(100%)`, `0 ${borderRadius} ${borderRadius} 0`)}
|
|
59
|
+
&.${k}-top,
|
|
60
|
+
&.${k}-bottom {
|
|
61
|
+
width: 100%;
|
|
62
|
+
}
|
|
63
|
+
`;
|
|
64
|
+
}
|
|
64
65
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
} else {
|
|
75
|
-
positionValue += 'width: 100% !important;';
|
|
76
|
-
if (placement === 'top') {
|
|
77
|
-
borderRadius = `0 0 ${theme.largeBorderRadius} ${theme.largeBorderRadius}`;
|
|
78
|
-
transformValue = 'translateY(-100%)';
|
|
79
|
-
} else {
|
|
80
|
-
borderRadius = `${theme.largeBorderRadius} ${theme.largeBorderRadius} 0 0`;
|
|
81
|
-
transformValue = 'translateY(100%)';
|
|
66
|
+
function makePlacementStyles(k: string, placement: string, styles: string, transform: string, borderRadius: string) {
|
|
67
|
+
return css`
|
|
68
|
+
&.${k}-drawer.${k}-${placement} {
|
|
69
|
+
${styles}
|
|
70
|
+
&.transition-enter-from,
|
|
71
|
+
&.transition-leave-to,
|
|
72
|
+
&.transition-appear-from {
|
|
73
|
+
.${k}-drawer-content {
|
|
74
|
+
transform: ${transform};
|
|
82
75
|
}
|
|
83
76
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
&.transition-leave-to,
|
|
90
|
-
&.transition-appear-from {
|
|
91
|
-
transform: none !important;
|
|
92
|
-
.${k}-drawer-content {
|
|
93
|
-
transform: ${transformValue};
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
.${k}-drawer-content {
|
|
97
|
-
border-radius: ${borderRadius};
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
`
|
|
101
|
-
})}
|
|
102
|
-
`;
|
|
77
|
+
.${k}-drawer-content {
|
|
78
|
+
border-radius: ${borderRadius};
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
`
|
|
103
82
|
}
|
|
@@ -8,5 +8,9 @@ order: 5
|
|
|
8
8
|
```vdt
|
|
9
9
|
import {Input} from 'kpc';
|
|
10
10
|
|
|
11
|
-
<
|
|
11
|
+
<div>
|
|
12
|
+
<Input placeholder="auto width" autoWidth />
|
|
13
|
+
<br /><br />
|
|
14
|
+
<Input placeholder="auto width" defaultValue="default value" autoWidth />
|
|
15
|
+
</div>
|
|
12
16
|
```
|
|
@@ -143,7 +143,7 @@ if (hasInputValue) {
|
|
|
143
143
|
<b:suffix />
|
|
144
144
|
</div>
|
|
145
145
|
<div class={`${k}-input-fake`} v-if={autoWidth}>
|
|
146
|
-
<span ref={fakeRef}>{!hasValue ? placeholder : inputValue}</span>
|
|
146
|
+
<span ref={fakeRef}>{!hasValue ? (hasInputValue || !defaultValue ? placeholder : defaultValue) : inputValue}</span>
|
|
147
147
|
</div>
|
|
148
148
|
</div>
|
|
149
149
|
</Wave>
|
|
@@ -40,80 +40,90 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
40
40
|
'appear': value,
|
|
41
41
|
'key': 'dialog',
|
|
42
42
|
'onAfterLeave': this.onAfterLeave,
|
|
43
|
-
'children': (isHide ? true : value) ? _$ce(2, 'div', (_$blocks['
|
|
44
|
-
return
|
|
45
|
-
return _$ce(2, '
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
'children': (isHide ? true : value) ? _$ce(2, 'div', [null, (_$blocks['_content'] = function ($super) {
|
|
44
|
+
return _$blocks['content'] = function ($super) {
|
|
45
|
+
return [_$ce(2, 'div', [(_$blocks['header'] = function ($super) {
|
|
46
|
+
return _$ce(2, 'span', title, 0, _$cn(k + "-dialog-title"));
|
|
47
|
+
}, __$blocks['header'] = function ($super, data) {
|
|
48
|
+
var block = $blocks['header'];
|
|
48
49
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
var callBlock = function callBlock() {
|
|
51
|
+
return _$blocks['header'].call($this, $super, data);
|
|
52
|
+
};
|
|
52
53
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
54
|
+
return block ? block.call($this, callBlock, data) : callBlock();
|
|
55
|
+
}, __$blocks['header'](_$no)), !hideClose && !$props.hideClose ? _$cc(Button, {
|
|
56
|
+
'type': 'none',
|
|
57
|
+
'icon': true,
|
|
58
|
+
'title': _$("关闭"),
|
|
59
|
+
'className': _$cn(k + "-dialog-close"),
|
|
60
|
+
'ev-click': this.terminate,
|
|
61
|
+
'ev-mousedown': stopPropagation,
|
|
62
|
+
'children': _$cc(Icon, {
|
|
63
|
+
'className': _$cn(k + "-icon-close")
|
|
64
|
+
})
|
|
65
|
+
}) : undefined], 0, _$cn(k + "-dialog-header"), {
|
|
66
|
+
'ev-mousedown': this.drag.start
|
|
67
|
+
}), _$ce(2, 'div', (_$blocks['body'] = function ($super) {
|
|
68
|
+
return children;
|
|
69
|
+
}, __$blocks['body'] = function ($super, data) {
|
|
70
|
+
var block = $blocks['body'];
|
|
70
71
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
var callBlock = function callBlock() {
|
|
73
|
+
return _$blocks['body'].call($this, $super, data);
|
|
74
|
+
};
|
|
74
75
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
76
|
+
return block ? block.call($this, callBlock, data) : callBlock();
|
|
77
|
+
}, __$blocks['body'](_$no)), 0, _$cn(k + "-dialog-body")), (_$blocks['footer-wrapper'] = function ($super) {
|
|
78
|
+
return _$ce(2, 'div', (_$blocks['footer'] = function ($super) {
|
|
79
|
+
return [_$cc(Button, {
|
|
80
|
+
'className': _$cn(k + "-dialog-cancel"),
|
|
81
|
+
'ev-click': this.cancel,
|
|
82
|
+
'children': cancelText
|
|
83
|
+
}), _$cc(Button, {
|
|
84
|
+
'className': _$cn(k + "-dialog-ok"),
|
|
85
|
+
'type': 'primary',
|
|
86
|
+
'ev-click': this.ok,
|
|
87
|
+
'loading': loading,
|
|
88
|
+
'disabled': disabledOk,
|
|
89
|
+
'children': okText
|
|
90
|
+
})];
|
|
91
|
+
}, __$blocks['footer'] = function ($super, data) {
|
|
92
|
+
var block = $blocks['footer'];
|
|
93
|
+
|
|
94
|
+
var callBlock = function callBlock() {
|
|
95
|
+
return _$blocks['footer'].call($this, $super, data);
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
return block ? block.call($this, callBlock, data) : callBlock();
|
|
99
|
+
}, __$blocks['footer'](_$no)), 0, _$cn(k + "-dialog-footer"));
|
|
100
|
+
}, __$blocks['footer-wrapper'] = function ($super, data) {
|
|
101
|
+
var block = $blocks['footer-wrapper'];
|
|
92
102
|
|
|
93
103
|
var callBlock = function callBlock() {
|
|
94
|
-
return _$blocks['footer'].call($this, $super, data);
|
|
104
|
+
return _$blocks['footer-wrapper'].call($this, $super, data);
|
|
95
105
|
};
|
|
96
106
|
|
|
97
107
|
return block ? block.call($this, callBlock, data) : callBlock();
|
|
98
|
-
}, __$blocks['footer'](_$no))
|
|
99
|
-
}, __$blocks['
|
|
100
|
-
var block = $blocks['
|
|
108
|
+
}, __$blocks['footer-wrapper'](_$no))];
|
|
109
|
+
}, __$blocks['content'] = function ($super, data) {
|
|
110
|
+
var block = $blocks['content'];
|
|
101
111
|
|
|
102
112
|
var callBlock = function callBlock() {
|
|
103
|
-
return _$blocks['
|
|
113
|
+
return _$blocks['content'].call($this, $super, data);
|
|
104
114
|
};
|
|
105
115
|
|
|
106
116
|
return block ? block.call($this, callBlock, data) : callBlock();
|
|
107
|
-
}, __$blocks['
|
|
108
|
-
}, __$blocks['
|
|
109
|
-
var block = $blocks['
|
|
117
|
+
}, __$blocks['content'](_$no);
|
|
118
|
+
}, __$blocks['_content'] = function ($super, data) {
|
|
119
|
+
var block = $blocks['_content'];
|
|
110
120
|
|
|
111
121
|
var callBlock = function callBlock() {
|
|
112
|
-
return _$blocks['
|
|
122
|
+
return _$blocks['_content'].call($this, $super, data);
|
|
113
123
|
};
|
|
114
124
|
|
|
115
125
|
return block ? block.call($this, callBlock, data) : callBlock();
|
|
116
|
-
}, __$blocks['
|
|
126
|
+
}, __$blocks['_content'](_$no))], 0, _$cn(classNameObj), {
|
|
117
127
|
'style': {
|
|
118
128
|
width: typeof width === 'number' ? width + "px" : width
|
|
119
129
|
},
|
|
@@ -60,7 +60,7 @@ describe('Drawer', function () {
|
|
|
60
60
|
case 0:
|
|
61
61
|
this.timeout(0);
|
|
62
62
|
_mount2 = mount(PlacementDemo), instance = _mount2[0], element = _mount2[1];
|
|
63
|
-
_element$querySelecto = element.querySelectorAll('.
|
|
63
|
+
_element$querySelecto = element.querySelectorAll('.placement-btn'), top = _element$querySelecto[0], bottom = _element$querySelecto[1], left = _element$querySelecto[2], right = _element$querySelecto[3];
|
|
64
64
|
|
|
65
65
|
test = /*#__PURE__*/function () {
|
|
66
66
|
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(btn, className) {
|
|
@@ -19,13 +19,13 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
19
19
|
var _$blocks = {},
|
|
20
20
|
__$blocks = _$ex({}, $blocks);
|
|
21
21
|
|
|
22
|
-
return (_$blocks['
|
|
22
|
+
return (_$blocks['_content'] = function ($super) {
|
|
23
23
|
return _$ce(2, 'div', $super(), 0, _$cn(k + "-drawer-content"));
|
|
24
|
-
}, __$blocks['
|
|
25
|
-
var block = $blocks['
|
|
24
|
+
}, __$blocks['_content'] = function ($super, data) {
|
|
25
|
+
var block = $blocks['_content'];
|
|
26
26
|
|
|
27
27
|
var callBlock = function callBlock() {
|
|
28
|
-
return _$blocks['
|
|
28
|
+
return _$blocks['_content'].call($this, $super, data);
|
|
29
29
|
};
|
|
30
30
|
|
|
31
31
|
return block ? block.call($this, callBlock, data) : callBlock();
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
|
|
2
1
|
import { css } from '@emotion/css';
|
|
3
2
|
import { theme, setDefault } from '../../styles/theme';
|
|
4
3
|
import { deepDefaults } from '../../styles/utils';
|
|
@@ -21,38 +20,10 @@ setDefault(function () {
|
|
|
21
20
|
}).drawer;
|
|
22
21
|
});
|
|
23
22
|
export function makeStyles(overlay, k) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
var borderRadius = '';
|
|
28
|
-
placements.forEach(function (p) {
|
|
29
|
-
// Set top to `0 !important` when overlay is false and placement is right or left
|
|
30
|
-
// Because dialog without overlay don't have positional parent element
|
|
31
|
-
positionValue += p !== placement ? (placement === 'right' || placement === 'left') && !overlay && p === 'top' ? p + ": 0;" : p + ": auto;" : p + ": 0;";
|
|
32
|
-
});
|
|
23
|
+
var borderRadius = theme.largeBorderRadius;
|
|
24
|
+
return /*#__PURE__*/css("&.k-drawer{position:fixed;background:transparent;box-shadow:none;border-radius:0;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.", k, "-dialog-body{flex-grow:1;overflow:auto;}}", makePlacementStyles(k, 'right', "right: 0; height: 100%;", "translateX(100%)", borderRadius + " 0 0 " + borderRadius), " ", makePlacementStyles(k, 'left', 'left: 0; height: 100%;', "translateX(-100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " ", makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', "translateY(-100%)", "0 0 " + borderRadius + " " + borderRadius), " ", makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', "translateY(100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " &.", k, "-top,&.", k, "-bottom{width:100%;}");
|
|
25
|
+
}
|
|
33
26
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
if (placement === 'left') {
|
|
38
|
-
borderRadius = "0 " + theme.largeBorderRadius + " " + theme.largeBorderRadius + " 0";
|
|
39
|
-
transformValue = 'translateX(-100%)';
|
|
40
|
-
} else {
|
|
41
|
-
borderRadius = theme.largeBorderRadius + " 0 0 " + theme.largeBorderRadius;
|
|
42
|
-
transformValue = 'translateX(100%)';
|
|
43
|
-
}
|
|
44
|
-
} else {
|
|
45
|
-
positionValue += 'width: 100% !important;';
|
|
46
|
-
|
|
47
|
-
if (placement === 'top') {
|
|
48
|
-
borderRadius = "0 0 " + theme.largeBorderRadius + " " + theme.largeBorderRadius;
|
|
49
|
-
transformValue = 'translateY(-100%)';
|
|
50
|
-
} else {
|
|
51
|
-
borderRadius = theme.largeBorderRadius + " " + theme.largeBorderRadius + " 0 0";
|
|
52
|
-
transformValue = 'translateY(100%)';
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
return /*#__PURE__*/css("&.", k, "-", placement, "{", positionValue, " &.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:none!important;.", k, "-drawer-content{transform:", transformValue, ";}}.", k, "-drawer-content{border-radius:", borderRadius, ";}}");
|
|
57
|
-
}), ";");
|
|
27
|
+
function makePlacementStyles(k, placement, styles, transform, borderRadius) {
|
|
28
|
+
return /*#__PURE__*/css("&.", k, "-drawer.", k, "-", placement, "{", styles, " &.transition-enter-from,&.transition-leave-to,&.transition-appear-from{.", k, "-drawer-content{transform:", transform, ";}}.", k, "-drawer-content{border-radius:", borderRadius, ";}}");
|
|
58
29
|
}
|
|
@@ -144,7 +144,7 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
144
144
|
return block ? block.call($this, callBlock, data) : callBlock();
|
|
145
145
|
}, __$blocks['suffix'](_$no))], 0, _$cn(k + "-input-suffix"), {
|
|
146
146
|
'ev-click': stopPropagation
|
|
147
|
-
}) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'span', !hasValue ? placeholder : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
|
|
147
|
+
}) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'span', !hasValue ? hasInputValue || !defaultValue ? placeholder : defaultValue : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
|
|
148
148
|
'ev-click': focusInputOnClick
|
|
149
149
|
})
|
|
150
150
|
});
|
package/es/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.1.1-beta.
|
|
2
|
+
* @king-design v3.1.1-beta.2
|
|
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.1.1-beta.
|
|
63
|
+
export declare const version = "3.1.1-beta.2";
|
package/es/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.1.1-beta.
|
|
2
|
+
* @king-design v3.1.1-beta.2
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -62,5 +62,5 @@ export * from './components/tree';
|
|
|
62
62
|
export * from './components/treeSelect';
|
|
63
63
|
export * from './components/upload';
|
|
64
64
|
export * from './components/wave';
|
|
65
|
-
export var version = '3.1.1-beta.
|
|
65
|
+
export var version = '3.1.1-beta.2';
|
|
66
66
|
/* generate end */
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { default as data } from './index.json';
|
|
2
|
+
import { Component } from 'intact';
|
|
3
|
+
interface Props {
|
|
4
|
+
show?: boolean;
|
|
5
|
+
}
|
|
6
|
+
export default class extends Component<Props> {
|
|
7
|
+
static template: string | import("intact").Template<any>;
|
|
8
|
+
static defaults(): {
|
|
9
|
+
show: boolean;
|
|
10
|
+
};
|
|
11
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
|
|
2
|
+
export { default as data } from './index.json';
|
|
3
|
+
import { Component } from 'intact';
|
|
4
|
+
import template from './index.vdt';
|
|
5
|
+
|
|
6
|
+
var default_1 = /*#__PURE__*/function (_Component) {
|
|
7
|
+
_inheritsLoose(default_1, _Component);
|
|
8
|
+
|
|
9
|
+
function default_1() {
|
|
10
|
+
return _Component.apply(this, arguments) || this;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
default_1.defaults = function defaults() {
|
|
14
|
+
return {
|
|
15
|
+
show: false
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
return default_1;
|
|
20
|
+
}(Component);
|
|
21
|
+
|
|
22
|
+
default_1.template = template;
|
|
23
|
+
export { default_1 as default };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface Props {
|
|
3
|
+
show?: boolean;
|
|
4
|
+
}
|
|
5
|
+
export default class Demo extends React.Component<{}, Props> {
|
|
6
|
+
state: {
|
|
7
|
+
show: boolean;
|
|
8
|
+
};
|
|
9
|
+
set<K extends keyof Props>(key: K, value: Props[K]): void;
|
|
10
|
+
render(): JSX.Element;
|
|
11
|
+
}
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
|
|
2
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Drawer, Button } from '@king-design/react';
|
|
5
|
+
|
|
6
|
+
var Demo = /*#__PURE__*/function (_React$Component) {
|
|
7
|
+
_inheritsLoose(Demo, _React$Component);
|
|
8
|
+
|
|
9
|
+
function Demo() {
|
|
10
|
+
var _context;
|
|
11
|
+
|
|
12
|
+
var _this;
|
|
13
|
+
|
|
14
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
15
|
+
args[_key] = arguments[_key];
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
_this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
|
|
19
|
+
_this.state = {
|
|
20
|
+
show: false
|
|
21
|
+
};
|
|
22
|
+
return _this;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var _proto = Demo.prototype;
|
|
26
|
+
|
|
27
|
+
_proto.set = function set(key, value) {
|
|
28
|
+
var _this$setState;
|
|
29
|
+
|
|
30
|
+
this.setState((_this$setState = {}, _this$setState[key] = value, _this$setState));
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
_proto.render = function render() {
|
|
34
|
+
var _this2 = this;
|
|
35
|
+
|
|
36
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
|
|
37
|
+
onClick: this.set.bind(this, 'show', true),
|
|
38
|
+
type: "primary"
|
|
39
|
+
}, "Show Drawer"), /*#__PURE__*/React.createElement(Drawer, {
|
|
40
|
+
value: this.state.show,
|
|
41
|
+
onChangeValue: function onChangeValue(show) {
|
|
42
|
+
return _this2.setState({
|
|
43
|
+
show: show
|
|
44
|
+
});
|
|
45
|
+
},
|
|
46
|
+
title: "Drawer Title",
|
|
47
|
+
placement: "top",
|
|
48
|
+
size: "small",
|
|
49
|
+
slotContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
style: {
|
|
51
|
+
"padding": "16px",
|
|
52
|
+
"textAlign": "center"
|
|
53
|
+
}
|
|
54
|
+
}, "Hello King-Design!"))
|
|
55
|
+
}));
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
return Demo;
|
|
59
|
+
}(React.Component);
|
|
60
|
+
|
|
61
|
+
export { Demo as default };
|
|
@@ -22,6 +22,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
|
|
|
22
22
|
_this.state = {
|
|
23
23
|
show: false,
|
|
24
24
|
showPosition: 'right',
|
|
25
|
+
size: 'default',
|
|
25
26
|
showList: [{
|
|
26
27
|
key: 'top',
|
|
27
28
|
value: '从上侧出现'
|
|
@@ -50,12 +51,29 @@ var Demo = /*#__PURE__*/function (_React$Component) {
|
|
|
50
51
|
};
|
|
51
52
|
|
|
52
53
|
_proto.render = function render() {
|
|
53
|
-
var
|
|
54
|
-
|
|
54
|
+
var _this2 = this,
|
|
55
|
+
_context2;
|
|
55
56
|
|
|
56
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonGroup,
|
|
57
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonGroup, {
|
|
58
|
+
checkType: "radio",
|
|
59
|
+
value: this.state.size,
|
|
60
|
+
onChangeValue: function onChangeValue(size) {
|
|
61
|
+
return _this2.setState({
|
|
62
|
+
size: size
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
66
|
+
value: "large"
|
|
67
|
+
}, "large"), /*#__PURE__*/React.createElement(Button, {
|
|
68
|
+
value: "default"
|
|
69
|
+
}, "default"), /*#__PURE__*/React.createElement(Button, {
|
|
70
|
+
value: "small"
|
|
71
|
+
}, "small"), /*#__PURE__*/React.createElement(Button, {
|
|
72
|
+
value: "mini"
|
|
73
|
+
}, "mini")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ButtonGroup, null, _mapInstanceProperty(_context2 = this.state.showList).call(_context2, function ($value, $key) {
|
|
57
74
|
return /*#__PURE__*/React.createElement(Button, {
|
|
58
|
-
onClick: _this2.showDrawer.bind(self, $value.key)
|
|
75
|
+
onClick: _this2.showDrawer.bind(self, $value.key),
|
|
76
|
+
className: "placement-btn"
|
|
59
77
|
}, $value.value);
|
|
60
78
|
})), /*#__PURE__*/React.createElement(Drawer, {
|
|
61
79
|
value: this.state.show,
|
|
@@ -69,7 +87,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
|
|
|
69
87
|
return _this2.__demoTwo = i;
|
|
70
88
|
},
|
|
71
89
|
placement: this.state.showPosition,
|
|
72
|
-
size:
|
|
90
|
+
size: this.state.size
|
|
73
91
|
}, "Drawer Body"));
|
|
74
92
|
};
|
|
75
93
|
|
|
@@ -12,10 +12,14 @@ var Demo = /*#__PURE__*/function (_React$Component) {
|
|
|
12
12
|
var _proto = Demo.prototype;
|
|
13
13
|
|
|
14
14
|
_proto.render = function render() {
|
|
15
|
-
return /*#__PURE__*/React.createElement(Input, {
|
|
15
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
|
|
16
16
|
placeholder: "auto width",
|
|
17
17
|
autoWidth: true
|
|
18
|
-
})
|
|
18
|
+
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
|
|
19
|
+
placeholder: "auto width",
|
|
20
|
+
defaultValue: "default value",
|
|
21
|
+
autoWidth: true
|
|
22
|
+
}));
|
|
19
23
|
};
|
|
20
24
|
|
|
21
25
|
return Demo;
|
package/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.1.1-beta.
|
|
2
|
+
* @king-design v3.1.1-beta.2
|
|
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.1.1-beta.
|
|
68
|
+
export const version = '3.1.1-beta.2';
|
|
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.1.1-beta.
|
|
3
|
+
"version": "3.1.1-beta.2",
|
|
4
4
|
"description": "A component library written in Intact for Intact, Vue, React and Angular",
|
|
5
5
|
"main": "es/index.js",
|
|
6
6
|
"engines": {
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
"dependencies": {
|
|
180
180
|
"@babel/runtime-corejs3": "^7.16.0",
|
|
181
181
|
"@emotion/css": "^11.5.0",
|
|
182
|
-
"@king-design/react": "^3.1.1-beta.
|
|
182
|
+
"@king-design/react": "^3.1.1-beta.2",
|
|
183
183
|
"dayjs": "^1.10.7",
|
|
184
184
|
"enquire.js": "^2.1.6",
|
|
185
185
|
"intact": "^3.0.19",
|