@king-design/intact 3.1.1-beta.0 → 3.1.1-beta.1
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 +21 -1
- package/components/collapse/item.vdt +5 -1
- package/components/collapse/styles.ts +10 -12
- package/components/editable/index.vdt +8 -7
- package/components/editable/styles.ts +2 -6
- package/components/table/styles.ts +8 -0
- package/es/components/collapse/item.vdt.js +2 -1
- package/es/components/collapse/styles.js +1 -1
- package/es/components/editable/index.vdt.js +12 -11
- package/es/components/editable/styles.d.ts +0 -1
- package/es/components/editable/styles.js +1 -2
- package/es/components/table/styles.js +1 -1
- package/es/index.d.ts +2 -2
- package/es/index.js +2 -2
- package/es/site/data/components/collapse/demos/basic/index.d.ts +2 -0
- package/es/site/data/components/collapse/demos/basic/index.js +2 -1
- package/es/site/data/components/collapse/demos/basic/react.d.ts +2 -0
- package/es/site/data/components/collapse/demos/basic/react.js +17 -1
- package/index.ts +2 -2
- package/package.json +2 -4
|
@@ -16,6 +16,25 @@ import {Collapse, CollapseItem} from 'kpc';
|
|
|
16
16
|
<p>语言是合作的基础。在团队中工作,没有共同的语言,一群人不能共同有效地合作。同理,因为每个人都会有不同的心智模式去达成各自的目的,如果没有共同的设计语言,对界面元素的共同理解,那么我们很难通过协作输出协调一致并具备高可用性的产品。</p>
|
|
17
17
|
<p>拥有通用语言意味着我们有相同的方法来命名界面元素和定义设计模式,或者在设计文件和前端框架中使用相同的名称。通用设计语言让团队成员达成了相互理解,基于共同的理解,参与产品创建的每个人都知道这个元素是什么: 它的名称和目的, 为什么这样设计, 以及如何及何时使用它。</p>
|
|
18
18
|
<p>当设计语言是通用知识时,它就成为一个强大的设计和协作工具,产品创建过程中便可停止专注于界面样式本身,而更多地关注用户。</p>
|
|
19
|
+
<Collapse v-model="innerValue">
|
|
20
|
+
<CollapseItem title="设计语言" ev-show={this.onShow}>
|
|
21
|
+
<p>语言是合作的基础。在团队中工作,没有共同的语言,一群人不能共同有效地合作。同理,因为每个人都会有不同的心智模式去达成各自的目的,如果没有共同的设计语言,对界面元素的共同理解,那么我们很难通过协作输出协调一致并具备高可用性的产品。</p>
|
|
22
|
+
<p>拥有通用语言意味着我们有相同的方法来命名界面元素和定义设计模式,或者在设计文件和前端框架中使用相同的名称。通用设计语言让团队成员达成了相互理解,基于共同的理解,参与产品创建的每个人都知道这个元素是什么: 它的名称和目的, 为什么这样设计, 以及如何及何时使用它。</p>
|
|
23
|
+
<p>当设计语言是通用知识时,它就成为一个强大的设计和协作工具,产品创建过程中便可停止专注于界面样式本身,而更多地关注用户。</p>
|
|
24
|
+
</CollapseItem>
|
|
25
|
+
<CollapseItem title="KDL的价值">
|
|
26
|
+
<ol>
|
|
27
|
+
<li>节省设计和构建模块的时间;</li>
|
|
28
|
+
<li>网站变更时节省时间,复用的模式更新时将在任何使用的地方自动更新,重复工作浪费的时间越少,就有 更多时间做有价值的事;</li>
|
|
29
|
+
<li>更快的发布产品,现成的模式库缩短了新功能设计研发上线时间;</li>
|
|
30
|
+
<li>品牌统一性、视觉一致性、提升团队协作效率,不用每次重新创造。</li>
|
|
31
|
+
</ol>
|
|
32
|
+
</CollapseItem>
|
|
33
|
+
<CollapseItem title="设计原则" disabled>
|
|
34
|
+
原则顺序必须按照给定的顺序执行。也就是说,美不可以建立在清晰和效率之上,效率也不可以妥协于一致性之下,清晰永远都是第一优先级。在制定任何设计决策时都应按照设计原则,考虑优先级。
|
|
35
|
+
设计由设计者的选择而决定,设计原则为设计者提供了选择依据,从众多存在矛盾或价值冲突的设计决策中找到平衡。
|
|
36
|
+
</CollapseItem>
|
|
37
|
+
</Collapse>
|
|
19
38
|
</CollapseItem>
|
|
20
39
|
<CollapseItem title="KDL的价值">
|
|
21
40
|
<ol>
|
|
@@ -35,13 +54,14 @@ import {Collapse, CollapseItem} from 'kpc';
|
|
|
35
54
|
```ts
|
|
36
55
|
interface Props {
|
|
37
56
|
value?: string[]
|
|
57
|
+
innerValue?: string[]
|
|
38
58
|
}
|
|
39
59
|
|
|
40
60
|
export default class extends Component<Props> {
|
|
41
61
|
static template = template;
|
|
42
62
|
|
|
43
63
|
static defaults() {
|
|
44
|
-
return {value: ['$0']};
|
|
64
|
+
return {value: ['$0'], innerValue: []};
|
|
45
65
|
}
|
|
46
66
|
|
|
47
67
|
onShow() {
|
|
@@ -22,7 +22,11 @@ const classNameObj = {
|
|
|
22
22
|
<div class={classNameObj} {...getRestProps(this)}>
|
|
23
23
|
<div class={`${k}-collapse-title`} ev-click={this.toggle}>
|
|
24
24
|
<b:title>{title}</b:title>
|
|
25
|
-
<Icon
|
|
25
|
+
<Icon
|
|
26
|
+
class={{[`${k}-collapse-arrow`]: true, [`${k}-icon-right`]: true}}
|
|
27
|
+
hoverable
|
|
28
|
+
disabled={disabled}
|
|
29
|
+
></Icon>
|
|
26
30
|
</div>
|
|
27
31
|
<Transition
|
|
28
32
|
show={isActive}
|
|
@@ -51,24 +51,22 @@ export function makeItemStyles(k: string) {
|
|
|
51
51
|
border-bottom-color: transparent;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
.${k}-collapse-title {
|
|
54
|
+
> .${k}-collapse-title {
|
|
55
55
|
cursor: pointer;
|
|
56
56
|
font-weight: bold;
|
|
57
57
|
height: ${collapseItem.titleHeight};
|
|
58
58
|
line-height: ${collapseItem.titleHeight};
|
|
59
59
|
transition: color ${collapse.transition};
|
|
60
|
-
|
|
60
|
+
.${k}-collapse-arrow {
|
|
61
|
+
float: right;
|
|
62
|
+
transition: transform ${collapse.transition};
|
|
63
|
+
line-height: ${collapseItem.titleHeight};
|
|
64
|
+
height: ${collapseItem.titleHeight};
|
|
65
|
+
}
|
|
61
66
|
}
|
|
62
67
|
|
|
63
|
-
.${k}-collapse-arrow {
|
|
64
|
-
float: right;
|
|
65
|
-
transition: transform ${collapse.transition};
|
|
66
|
-
line-height: ${collapseItem.titleHeight};
|
|
67
|
-
height: ${collapseItem.titleHeight};
|
|
68
|
-
}
|
|
69
|
-
|
|
70
68
|
&:not(.${k}-disabled) {
|
|
71
|
-
.${k}-collapse-title {
|
|
69
|
+
> .${k}-collapse-title {
|
|
72
70
|
&:hover {
|
|
73
71
|
color: ${theme.color.primary};
|
|
74
72
|
}
|
|
@@ -76,14 +74,14 @@ export function makeItemStyles(k: string) {
|
|
|
76
74
|
}
|
|
77
75
|
|
|
78
76
|
&.${k}-active {
|
|
79
|
-
.${k}-collapse-arrow {
|
|
77
|
+
> .${k}-collapse-title .${k}-collapse-arrow {
|
|
80
78
|
transform: rotate(90deg);
|
|
81
79
|
}
|
|
82
80
|
}
|
|
83
81
|
|
|
84
82
|
&.${k}-disabled {
|
|
85
83
|
color: ${theme.color.disabledBorder};
|
|
86
|
-
.${k}-collapse-title {
|
|
84
|
+
> .${k}-collapse-title {
|
|
87
85
|
cursor: not-allowed;
|
|
88
86
|
}
|
|
89
87
|
}
|
|
@@ -21,22 +21,23 @@ const classNameObj = {
|
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
<div {...getRestProps(this)} class={classNameObj}>
|
|
24
|
-
<Tooltip v-if={!disabled && !editing} content={tip}>
|
|
25
|
-
<Icon class={`${k}-icon-edit ${k}-editable-icon`}
|
|
26
|
-
ev-click={this.edit}
|
|
27
|
-
hoverable
|
|
28
|
-
/>
|
|
29
|
-
</Tooltip>
|
|
30
24
|
<div class="c-ellipsis">
|
|
31
25
|
<template v-if={!editing}>{children}</template>
|
|
32
26
|
<Input v-else
|
|
33
|
-
size="
|
|
27
|
+
size="mini"
|
|
34
28
|
defaultValue={value}
|
|
35
29
|
ev-blur={this.onBlur}
|
|
36
30
|
ev-keydown={this.onKeydown}
|
|
37
31
|
ref={this.inputRef}
|
|
38
32
|
frozenOnInput
|
|
39
33
|
ev-$mounted={this.select}
|
|
34
|
+
autoWidth
|
|
40
35
|
/>
|
|
41
36
|
</div>
|
|
37
|
+
<Tooltip v-if={!disabled && !editing} content={tip}>
|
|
38
|
+
<Icon class={`${k}-icon-edit ${k}-editable-icon`}
|
|
39
|
+
ev-click={this.edit}
|
|
40
|
+
hoverable
|
|
41
|
+
/>
|
|
42
|
+
</Tooltip>
|
|
42
43
|
</div>
|
|
@@ -5,7 +5,6 @@ import '../../styles/global';
|
|
|
5
5
|
|
|
6
6
|
const defaults = {
|
|
7
7
|
iconGap: '0 0 0 8px',
|
|
8
|
-
lineHeight: '30px',
|
|
9
8
|
|
|
10
9
|
// invalid
|
|
11
10
|
invalid: {
|
|
@@ -22,13 +21,10 @@ export {editable};
|
|
|
22
21
|
|
|
23
22
|
export function makeStyles(k: string) {
|
|
24
23
|
return css`
|
|
25
|
-
display: inline-
|
|
26
|
-
|
|
24
|
+
display: inline-flex;
|
|
25
|
+
align-items: center;
|
|
27
26
|
.${k}-editable-icon {
|
|
28
|
-
float: right;
|
|
29
|
-
cursor: pointer;
|
|
30
27
|
margin: ${editable.iconGap};
|
|
31
|
-
line-height: unset;
|
|
32
28
|
}
|
|
33
29
|
|
|
34
30
|
// invalid
|
|
@@ -39,7 +39,8 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
39
39
|
return block ? block.call($this, callBlock, data) : callBlock();
|
|
40
40
|
}, __$blocks['title'](_$no)), _$cc(Icon, {
|
|
41
41
|
'className': _$cn((_$cn2 = {}, _$cn2[k + "-collapse-arrow"] = true, _$cn2[k + "-icon-right"] = true, _$cn2)),
|
|
42
|
-
'hoverable':
|
|
42
|
+
'hoverable': true,
|
|
43
|
+
'disabled': disabled
|
|
43
44
|
})], 0, _$cn(k + "-collapse-title"), {
|
|
44
45
|
'ev-click': this.toggle
|
|
45
46
|
}), _$cc(Transition, _extends({
|
|
@@ -32,5 +32,5 @@ export function makeStyles(k) {
|
|
|
32
32
|
}
|
|
33
33
|
export function makeItemStyles(k) {
|
|
34
34
|
var collapseItem = collapse.item;
|
|
35
|
-
return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}
|
|
35
|
+
return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}>.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";.", k, "-collapse-arrow{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}}&:not(.", k, "-disabled){>.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{>.", k, "-collapse-title .", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";>.", k, "-collapse-title{cursor:not-allowed;}}");
|
|
36
36
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
2
|
-
import { createVNode as _$cv, className as _$cn,
|
|
2
|
+
import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc } from 'intact';
|
|
3
3
|
import { getRestProps } from '../utils';
|
|
4
4
|
import { Input } from '../input';
|
|
5
5
|
import { Icon } from '../icon';
|
|
@@ -26,21 +26,22 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
26
26
|
var classNameObj = (_classNameObj = {}, _classNameObj[k + "-editable"] = true, _classNameObj[k + "-editing"] = editing, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-invalid"] = invalid, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
|
|
27
27
|
return _$cv('div', _extends({}, getRestProps(this), {
|
|
28
28
|
'className': _$cn(classNameObj)
|
|
29
|
-
}), [
|
|
29
|
+
}), [_$ce(2, 'div', !editing ? children : _$cc(Input, {
|
|
30
|
+
'size': 'mini',
|
|
31
|
+
'defaultValue': value,
|
|
32
|
+
'ev-blur': this.onBlur,
|
|
33
|
+
'ev-keydown': this.onKeydown,
|
|
34
|
+
'ref': this.inputRef,
|
|
35
|
+
'frozenOnInput': true,
|
|
36
|
+
'ev-$mounted': this.select,
|
|
37
|
+
'autoWidth': true
|
|
38
|
+
}, null, this.inputRef), 0, 'c-ellipsis'), !disabled && !editing ? _$cc(Tooltip, {
|
|
30
39
|
'content': tip,
|
|
31
40
|
'children': _$cc(Icon, {
|
|
32
41
|
'className': _$cn(k + "-icon-edit " + k + "-editable-icon"),
|
|
33
42
|
'ev-click': this.edit,
|
|
34
43
|
'hoverable': true
|
|
35
44
|
})
|
|
36
|
-
}) : undefined
|
|
37
|
-
'size': 'small',
|
|
38
|
-
'defaultValue': value,
|
|
39
|
-
'ev-blur': this.onBlur,
|
|
40
|
-
'ev-keydown': this.onKeydown,
|
|
41
|
-
'ref': this.inputRef,
|
|
42
|
-
'frozenOnInput': true,
|
|
43
|
-
'ev-$mounted': this.select
|
|
44
|
-
}, null, this.inputRef), 0, 'c-ellipsis')]);
|
|
45
|
+
}) : undefined]);
|
|
45
46
|
}
|
|
46
47
|
;
|
|
@@ -4,7 +4,6 @@ import { deepDefaults } from '../../styles/utils';
|
|
|
4
4
|
import '../../styles/global';
|
|
5
5
|
var defaults = {
|
|
6
6
|
iconGap: '0 0 0 8px',
|
|
7
|
-
lineHeight: '30px',
|
|
8
7
|
// invalid
|
|
9
8
|
invalid: {
|
|
10
9
|
get border() {
|
|
@@ -21,5 +20,5 @@ setDefault(function () {
|
|
|
21
20
|
});
|
|
22
21
|
export { editable };
|
|
23
22
|
export function makeStyles(k) {
|
|
24
|
-
return /*#__PURE__*/css("display:inline-
|
|
23
|
+
return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-inner{border:", editable.invalid.border, "!important;}}");
|
|
25
24
|
}
|
|
@@ -105,7 +105,7 @@ setDefault(function () {
|
|
|
105
105
|
export function makeStyles(k) {
|
|
106
106
|
return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
|
|
107
107
|
return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
|
|
108
|
-
}), ">.", k, "-pagination{margin:16px 0;}");
|
|
108
|
+
}), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}}");
|
|
109
109
|
}
|
|
110
110
|
export function makeGroupMenuStyles(k) {
|
|
111
111
|
return /*#__PURE__*/css("min-width:", table.group.menuMinWidth, "!important;.", k, "-dropdown-item.", k, "-active{color:", table.group.activeColor, ";}.", k, "-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}.", k, "-table-group-body{max-height:", table.group.menuMaxHeight, ";overflow:auto;}.", k, "-table-group-footer{text-align:right;border-top:", table.group.headerBorder, ";padding:8px;.", k, "-btn{margin-left:8px;}}");
|
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.1
|
|
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.1";
|
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.1
|
|
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.1';
|
|
66
66
|
/* generate end */
|
|
@@ -2,11 +2,13 @@ export { default as data } from './index.json';
|
|
|
2
2
|
import { Component } from 'intact';
|
|
3
3
|
interface Props {
|
|
4
4
|
value?: string[];
|
|
5
|
+
innerValue?: string[];
|
|
5
6
|
}
|
|
6
7
|
export default class extends Component<Props> {
|
|
7
8
|
static template: string | import("intact").Template<any>;
|
|
8
9
|
static defaults(): {
|
|
9
10
|
value: string[];
|
|
11
|
+
innerValue: never[];
|
|
10
12
|
};
|
|
11
13
|
onShow(): void;
|
|
12
14
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface Props {
|
|
3
3
|
value?: string[];
|
|
4
|
+
innerValue?: string[];
|
|
4
5
|
}
|
|
5
6
|
export default class Demo extends React.Component<{}, Props> {
|
|
6
7
|
state: {
|
|
7
8
|
value: string[];
|
|
9
|
+
innerValue: never[];
|
|
8
10
|
};
|
|
9
11
|
onShow(): void;
|
|
10
12
|
render(): JSX.Element;
|
|
@@ -17,7 +17,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
|
|
|
17
17
|
|
|
18
18
|
_this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
|
|
19
19
|
_this.state = {
|
|
20
|
-
value: ['$0']
|
|
20
|
+
value: ['$0'],
|
|
21
|
+
innerValue: []
|
|
21
22
|
};
|
|
22
23
|
return _this;
|
|
23
24
|
}
|
|
@@ -41,11 +42,26 @@ var Demo = /*#__PURE__*/function (_React$Component) {
|
|
|
41
42
|
}, /*#__PURE__*/React.createElement(CollapseItem, {
|
|
42
43
|
title: "\u8BBE\u8BA1\u8BED\u8A00",
|
|
43
44
|
onShow: this.onShow
|
|
45
|
+
}, /*#__PURE__*/React.createElement("p", null, "\u8BED\u8A00\u662F\u5408\u4F5C\u7684\u57FA\u7840\u3002\u5728\u56E2\u961F\u4E2D\u5DE5\u4F5C\uFF0C\u6CA1\u6709\u5171\u540C\u7684\u8BED\u8A00\uFF0C\u4E00\u7FA4\u4EBA\u4E0D\u80FD\u5171\u540C\u6709\u6548\u5730\u5408\u4F5C\u3002\u540C\u7406\uFF0C\u56E0\u4E3A\u6BCF\u4E2A\u4EBA\u90FD\u4F1A\u6709\u4E0D\u540C\u7684\u5FC3\u667A\u6A21\u5F0F\u53BB\u8FBE\u6210\u5404\u81EA\u7684\u76EE\u7684\uFF0C\u5982\u679C\u6CA1\u6709\u5171\u540C\u7684\u8BBE\u8BA1\u8BED\u8A00\uFF0C\u5BF9\u754C\u9762\u5143\u7D20\u7684\u5171\u540C\u7406\u89E3\uFF0C\u90A3\u4E48\u6211\u4EEC\u5F88\u96BE\u901A\u8FC7\u534F\u4F5C\u8F93\u51FA\u534F\u8C03\u4E00\u81F4\u5E76\u5177\u5907\u9AD8\u53EF\u7528\u6027\u7684\u4EA7\u54C1\u3002"), /*#__PURE__*/React.createElement("p", null, "\u62E5\u6709\u901A\u7528\u8BED\u8A00\u610F\u5473\u7740\u6211\u4EEC\u6709\u76F8\u540C\u7684\u65B9\u6CD5\u6765\u547D\u540D\u754C\u9762\u5143\u7D20\u548C\u5B9A\u4E49\u8BBE\u8BA1\u6A21\u5F0F\uFF0C\u6216\u8005\u5728\u8BBE\u8BA1\u6587\u4EF6\u548C\u524D\u7AEF\u6846\u67B6\u4E2D\u4F7F\u7528\u76F8\u540C\u7684\u540D\u79F0\u3002\u901A\u7528\u8BBE\u8BA1\u8BED\u8A00\u8BA9\u56E2\u961F\u6210\u5458\u8FBE\u6210\u4E86\u76F8\u4E92\u7406\u89E3\uFF0C\u57FA\u4E8E\u5171\u540C\u7684\u7406\u89E3\uFF0C\u53C2\u4E0E\u4EA7\u54C1\u521B\u5EFA\u7684\u6BCF\u4E2A\u4EBA\u90FD\u77E5\u9053\u8FD9\u4E2A\u5143\u7D20\u662F\u4EC0\u4E48: \u5B83\u7684\u540D\u79F0\u548C\u76EE\u7684, \u4E3A\u4EC0\u4E48\u8FD9\u6837\u8BBE\u8BA1, \u4EE5\u53CA\u5982\u4F55\u53CA\u4F55\u65F6\u4F7F\u7528\u5B83\u3002"), /*#__PURE__*/React.createElement("p", null, "\u5F53\u8BBE\u8BA1\u8BED\u8A00\u662F\u901A\u7528\u77E5\u8BC6\u65F6\uFF0C\u5B83\u5C31\u6210\u4E3A\u4E00\u4E2A\u5F3A\u5927\u7684\u8BBE\u8BA1\u548C\u534F\u4F5C\u5DE5\u5177\uFF0C\u4EA7\u54C1\u521B\u5EFA\u8FC7\u7A0B\u4E2D\u4FBF\u53EF\u505C\u6B62\u4E13\u6CE8\u4E8E\u754C\u9762\u6837\u5F0F\u672C\u8EAB\uFF0C\u800C\u66F4\u591A\u5730\u5173\u6CE8\u7528\u6237\u3002"), /*#__PURE__*/React.createElement(Collapse, {
|
|
46
|
+
value: this.state.innerValue,
|
|
47
|
+
onChangeValue: function onChangeValue(innerValue) {
|
|
48
|
+
return _this2.setState({
|
|
49
|
+
innerValue: innerValue
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
}, /*#__PURE__*/React.createElement(CollapseItem, {
|
|
53
|
+
title: "\u8BBE\u8BA1\u8BED\u8A00",
|
|
54
|
+
onShow: this.onShow
|
|
44
55
|
}, /*#__PURE__*/React.createElement("p", null, "\u8BED\u8A00\u662F\u5408\u4F5C\u7684\u57FA\u7840\u3002\u5728\u56E2\u961F\u4E2D\u5DE5\u4F5C\uFF0C\u6CA1\u6709\u5171\u540C\u7684\u8BED\u8A00\uFF0C\u4E00\u7FA4\u4EBA\u4E0D\u80FD\u5171\u540C\u6709\u6548\u5730\u5408\u4F5C\u3002\u540C\u7406\uFF0C\u56E0\u4E3A\u6BCF\u4E2A\u4EBA\u90FD\u4F1A\u6709\u4E0D\u540C\u7684\u5FC3\u667A\u6A21\u5F0F\u53BB\u8FBE\u6210\u5404\u81EA\u7684\u76EE\u7684\uFF0C\u5982\u679C\u6CA1\u6709\u5171\u540C\u7684\u8BBE\u8BA1\u8BED\u8A00\uFF0C\u5BF9\u754C\u9762\u5143\u7D20\u7684\u5171\u540C\u7406\u89E3\uFF0C\u90A3\u4E48\u6211\u4EEC\u5F88\u96BE\u901A\u8FC7\u534F\u4F5C\u8F93\u51FA\u534F\u8C03\u4E00\u81F4\u5E76\u5177\u5907\u9AD8\u53EF\u7528\u6027\u7684\u4EA7\u54C1\u3002"), /*#__PURE__*/React.createElement("p", null, "\u62E5\u6709\u901A\u7528\u8BED\u8A00\u610F\u5473\u7740\u6211\u4EEC\u6709\u76F8\u540C\u7684\u65B9\u6CD5\u6765\u547D\u540D\u754C\u9762\u5143\u7D20\u548C\u5B9A\u4E49\u8BBE\u8BA1\u6A21\u5F0F\uFF0C\u6216\u8005\u5728\u8BBE\u8BA1\u6587\u4EF6\u548C\u524D\u7AEF\u6846\u67B6\u4E2D\u4F7F\u7528\u76F8\u540C\u7684\u540D\u79F0\u3002\u901A\u7528\u8BBE\u8BA1\u8BED\u8A00\u8BA9\u56E2\u961F\u6210\u5458\u8FBE\u6210\u4E86\u76F8\u4E92\u7406\u89E3\uFF0C\u57FA\u4E8E\u5171\u540C\u7684\u7406\u89E3\uFF0C\u53C2\u4E0E\u4EA7\u54C1\u521B\u5EFA\u7684\u6BCF\u4E2A\u4EBA\u90FD\u77E5\u9053\u8FD9\u4E2A\u5143\u7D20\u662F\u4EC0\u4E48: \u5B83\u7684\u540D\u79F0\u548C\u76EE\u7684, \u4E3A\u4EC0\u4E48\u8FD9\u6837\u8BBE\u8BA1, \u4EE5\u53CA\u5982\u4F55\u53CA\u4F55\u65F6\u4F7F\u7528\u5B83\u3002"), /*#__PURE__*/React.createElement("p", null, "\u5F53\u8BBE\u8BA1\u8BED\u8A00\u662F\u901A\u7528\u77E5\u8BC6\u65F6\uFF0C\u5B83\u5C31\u6210\u4E3A\u4E00\u4E2A\u5F3A\u5927\u7684\u8BBE\u8BA1\u548C\u534F\u4F5C\u5DE5\u5177\uFF0C\u4EA7\u54C1\u521B\u5EFA\u8FC7\u7A0B\u4E2D\u4FBF\u53EF\u505C\u6B62\u4E13\u6CE8\u4E8E\u754C\u9762\u6837\u5F0F\u672C\u8EAB\uFF0C\u800C\u66F4\u591A\u5730\u5173\u6CE8\u7528\u6237\u3002")), /*#__PURE__*/React.createElement(CollapseItem, {
|
|
45
56
|
title: "KDL\u7684\u4EF7\u503C"
|
|
46
57
|
}, /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, "\u8282\u7701\u8BBE\u8BA1\u548C\u6784\u5EFA\u6A21\u5757\u7684\u65F6\u95F4\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u7F51\u7AD9\u53D8\u66F4\u65F6\u8282\u7701\u65F6\u95F4\uFF0C\u590D\u7528\u7684\u6A21\u5F0F\u66F4\u65B0\u65F6\u5C06\u5728\u4EFB\u4F55\u4F7F\u7528\u7684\u5730\u65B9\u81EA\u52A8\u66F4\u65B0\uFF0C\u91CD\u590D\u5DE5\u4F5C\u6D6A\u8D39\u7684\u65F6\u95F4\u8D8A\u5C11\uFF0C\u5C31\u6709 \u66F4\u591A\u65F6\u95F4\u505A\u6709\u4EF7\u503C\u7684\u4E8B\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u66F4\u5FEB\u7684\u53D1\u5E03\u4EA7\u54C1\uFF0C\u73B0\u6210\u7684\u6A21\u5F0F\u5E93\u7F29\u77ED\u4E86\u65B0\u529F\u80FD\u8BBE\u8BA1\u7814\u53D1\u4E0A\u7EBF\u65F6\u95F4\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u54C1\u724C\u7EDF\u4E00\u6027\u3001\u89C6\u89C9\u4E00\u81F4\u6027\u3001\u63D0\u5347\u56E2\u961F\u534F\u4F5C\u6548\u7387\uFF0C\u4E0D\u7528\u6BCF\u6B21\u91CD\u65B0\u521B\u9020\u3002"))), /*#__PURE__*/React.createElement(CollapseItem, {
|
|
47
58
|
title: "\u8BBE\u8BA1\u539F\u5219",
|
|
48
59
|
disabled: true
|
|
60
|
+
}, "\u539F\u5219\u987A\u5E8F\u5FC5\u987B\u6309\u7167\u7ED9\u5B9A\u7684\u987A\u5E8F\u6267\u884C\u3002\u4E5F\u5C31\u662F\u8BF4\uFF0C\u7F8E\u4E0D\u53EF\u4EE5\u5EFA\u7ACB\u5728\u6E05\u6670\u548C\u6548\u7387\u4E4B\u4E0A\uFF0C\u6548\u7387\u4E5F\u4E0D\u53EF\u4EE5\u59A5\u534F\u4E8E\u4E00\u81F4\u6027\u4E4B\u4E0B\uFF0C\u6E05\u6670\u6C38\u8FDC\u90FD\u662F\u7B2C\u4E00\u4F18\u5148\u7EA7\u3002\u5728\u5236\u5B9A\u4EFB\u4F55\u8BBE\u8BA1\u51B3\u7B56\u65F6\u90FD\u5E94\u6309\u7167\u8BBE\u8BA1\u539F\u5219\uFF0C\u8003\u8651\u4F18\u5148\u7EA7\u3002 \u8BBE\u8BA1\u7531\u8BBE\u8BA1\u8005\u7684\u9009\u62E9\u800C\u51B3\u5B9A\uFF0C\u8BBE\u8BA1\u539F\u5219\u4E3A\u8BBE\u8BA1\u8005\u63D0\u4F9B\u4E86\u9009\u62E9\u4F9D\u636E\uFF0C\u4ECE\u4F17\u591A\u5B58\u5728\u77DB\u76FE\u6216\u4EF7\u503C\u51B2\u7A81\u7684\u8BBE\u8BA1\u51B3\u7B56\u4E2D\u627E\u5230\u5E73\u8861\u3002"))), /*#__PURE__*/React.createElement(CollapseItem, {
|
|
61
|
+
title: "KDL\u7684\u4EF7\u503C"
|
|
62
|
+
}, /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, "\u8282\u7701\u8BBE\u8BA1\u548C\u6784\u5EFA\u6A21\u5757\u7684\u65F6\u95F4\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u7F51\u7AD9\u53D8\u66F4\u65F6\u8282\u7701\u65F6\u95F4\uFF0C\u590D\u7528\u7684\u6A21\u5F0F\u66F4\u65B0\u65F6\u5C06\u5728\u4EFB\u4F55\u4F7F\u7528\u7684\u5730\u65B9\u81EA\u52A8\u66F4\u65B0\uFF0C\u91CD\u590D\u5DE5\u4F5C\u6D6A\u8D39\u7684\u65F6\u95F4\u8D8A\u5C11\uFF0C\u5C31\u6709 \u66F4\u591A\u65F6\u95F4\u505A\u6709\u4EF7\u503C\u7684\u4E8B\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u66F4\u5FEB\u7684\u53D1\u5E03\u4EA7\u54C1\uFF0C\u73B0\u6210\u7684\u6A21\u5F0F\u5E93\u7F29\u77ED\u4E86\u65B0\u529F\u80FD\u8BBE\u8BA1\u7814\u53D1\u4E0A\u7EBF\u65F6\u95F4\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u54C1\u724C\u7EDF\u4E00\u6027\u3001\u89C6\u89C9\u4E00\u81F4\u6027\u3001\u63D0\u5347\u56E2\u961F\u534F\u4F5C\u6548\u7387\uFF0C\u4E0D\u7528\u6BCF\u6B21\u91CD\u65B0\u521B\u9020\u3002"))), /*#__PURE__*/React.createElement(CollapseItem, {
|
|
63
|
+
title: "\u8BBE\u8BA1\u539F\u5219",
|
|
64
|
+
disabled: true
|
|
49
65
|
}, "\u539F\u5219\u987A\u5E8F\u5FC5\u987B\u6309\u7167\u7ED9\u5B9A\u7684\u987A\u5E8F\u6267\u884C\u3002\u4E5F\u5C31\u662F\u8BF4\uFF0C\u7F8E\u4E0D\u53EF\u4EE5\u5EFA\u7ACB\u5728\u6E05\u6670\u548C\u6548\u7387\u4E4B\u4E0A\uFF0C\u6548\u7387\u4E5F\u4E0D\u53EF\u4EE5\u59A5\u534F\u4E8E\u4E00\u81F4\u6027\u4E4B\u4E0B\uFF0C\u6E05\u6670\u6C38\u8FDC\u90FD\u662F\u7B2C\u4E00\u4F18\u5148\u7EA7\u3002\u5728\u5236\u5B9A\u4EFB\u4F55\u8BBE\u8BA1\u51B3\u7B56\u65F6\u90FD\u5E94\u6309\u7167\u8BBE\u8BA1\u539F\u5219\uFF0C\u8003\u8651\u4F18\u5148\u7EA7\u3002 \u8BBE\u8BA1\u7531\u8BBE\u8BA1\u8005\u7684\u9009\u62E9\u800C\u51B3\u5B9A\uFF0C\u8BBE\u8BA1\u539F\u5219\u4E3A\u8BBE\u8BA1\u8005\u63D0\u4F9B\u4E86\u9009\u62E9\u4F9D\u636E\uFF0C\u4ECE\u4F17\u591A\u5B58\u5728\u77DB\u76FE\u6216\u4EF7\u503C\u51B2\u7A81\u7684\u8BBE\u8BA1\u51B3\u7B56\u4E2D\u627E\u5230\u5E73\u8861\u3002"));
|
|
50
66
|
};
|
|
51
67
|
|
package/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.1.1-beta.
|
|
2
|
+
* @king-design v3.1.1-beta.1
|
|
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.1';
|
|
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.1",
|
|
4
4
|
"description": "A component library written in Intact for Intact, Vue, React and Angular",
|
|
5
5
|
"main": "es/index.js",
|
|
6
6
|
"engines": {
|
|
@@ -87,7 +87,6 @@
|
|
|
87
87
|
"@emotion/babel-plugin": "^11.3.0",
|
|
88
88
|
"@types/chai": "^4.2.18",
|
|
89
89
|
"@types/chroma-js": "^2.1.3",
|
|
90
|
-
"@types/downloadjs": "^1.4.2",
|
|
91
90
|
"@types/enquire.js": "^2.1.3",
|
|
92
91
|
"@types/fs-extra": "^9.0.11",
|
|
93
92
|
"@types/js-yaml": "^4.0.1",
|
|
@@ -180,9 +179,8 @@
|
|
|
180
179
|
"dependencies": {
|
|
181
180
|
"@babel/runtime-corejs3": "^7.16.0",
|
|
182
181
|
"@emotion/css": "^11.5.0",
|
|
183
|
-
"@king-design/react": "^3.1.1-beta.
|
|
182
|
+
"@king-design/react": "^3.1.1-beta.1",
|
|
184
183
|
"dayjs": "^1.10.7",
|
|
185
|
-
"downloadjs": "^1.4.7",
|
|
186
184
|
"enquire.js": "^2.1.6",
|
|
187
185
|
"intact": "^3.0.19",
|
|
188
186
|
"monaco-editor": "^0.26.1",
|