@king-design/vue 2.0.0 → 2.0.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/__tests__/__snapshots__/Vue Next Demos.md +2 -2
- package/__tests__/components/dropdown.spec.ts +29 -0
- package/__tests__/components/select.spec.ts +29 -0
- package/components/datepicker/index.vdt.js +10 -5
- package/components/dropdown/dropdown.js +1 -0
- package/components/tooltip/index.spec.js +4 -1
- package/components/transfer/styles.js +2 -6
- package/i18n/en-US.d.ts +1 -0
- package/i18n/en-US.js +1 -0
- package/index.d.ts +2 -2
- package/index.js +2 -2
- package/package.json +2 -2
|
@@ -349,7 +349,7 @@
|
|
|
349
349
|
#### `Diagram basic`
|
|
350
350
|
|
|
351
351
|
```
|
|
352
|
-
"<div class=\"k-diagram css-ohhwil\"><div class=\"k-diagram-scheme\"><dtreelayout><drectangle></drectangle><ddiamond></ddiamond><dcircle></dcircle><dline></dline><dline></dline></dtreelayout></div><div class=\"k-diagram-canvas\" style=\"position: relative; width: 193px; height: 187px;\"><svg style=\"left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 193px; min-height: 187px;\"><g><g></g><g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><rect x=\"36\" y=\"0\" width=\"120\" height=\"60\" fill=\"#ffffff\" stroke=\"#000000\" pointer-events=\"all\"></rect></g><g style=\"\"><g transform=\"translate(75,6)\"><foreignObject style=\"overflow:visible;\" pointer-events=\"all\" width=\"42\" height=\"49\"><div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width:
|
|
352
|
+
"<div class=\"k-diagram css-ohhwil\"><div class=\"k-diagram-scheme\"><dtreelayout><drectangle></drectangle><ddiamond></ddiamond><dcircle></dcircle><dline></dline><dline></dline></dtreelayout></div><div class=\"k-diagram-canvas\" style=\"position: relative; width: 193px; height: 187px;\"><svg style=\"left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 193px; min-height: 187px;\"><g><g></g><g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><rect x=\"36\" y=\"0\" width=\"120\" height=\"60\" fill=\"#ffffff\" stroke=\"#000000\" pointer-events=\"all\"></rect></g><g style=\"\"><g transform=\"translate(75,6)\"><foreignObject style=\"overflow:visible;\" pointer-events=\"all\" width=\"42\" height=\"49\"><div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 43px; white-space: normal; overflow-wrap: normal; text-align: center;\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;\"><h2>hello</h2></div></div></foreignObject></g></g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><path d=\"M 40 106 L 80 146 L 40 186 L 0 146 Z\" fill=\"#ffffff\" stroke=\"#000000\" stroke-miterlimit=\"10\" pointer-events=\"all\"></path></g><g style=\"\"><g transform=\"translate(26,140)\"><foreignObject style=\"overflow:visible;\" pointer-events=\"all\" width=\"29\" height=\"12\"><div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 30px; white-space: normal; overflow-wrap: normal; text-align: center;\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;\">world</div></div></foreignObject></g></g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><ellipse cx=\"152\" cy=\"146\" rx=\"40\" ry=\"40\" fill=\"#ffffff\" stroke=\"#000000\" pointer-events=\"all\"></ellipse></g><g style=\"\"><g transform=\"translate(143,140)\"><foreignObject style=\"overflow:visible;\" pointer-events=\"all\" width=\"19\" height=\"12\"><div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 20px; white-space: normal; overflow-wrap: normal; text-align: center;\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;\">kpc</div></div></foreignObject></g></g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><path d=\"M 96 60 L 96 73 Q 96 83 86 83 L 50 83 Q 40 83 40 91.32 L 40 99.63\" fill=\"none\" stroke=\"white\" stroke-miterlimit=\"10\" pointer-events=\"stroke\" visibility=\"hidden\" stroke-width=\"9\"></path><path d=\"M 96 60 L 96 73 Q 96 83 86 83 L 50 83 Q 40 83 40 91.32 L 40 99.63\" fill=\"none\" stroke=\"#000000\" stroke-miterlimit=\"10\" pointer-events=\"stroke\"></path><path d=\"M 40 104.88 L 36.5 97.88 L 40 99.63 L 43.5 97.88 Z\" fill=\"#000000\" stroke=\"#000000\" stroke-miterlimit=\"10\" pointer-events=\"all\"></path></g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><path d=\"M 96 60 L 96 73 Q 96 83 106 83 L 142 83 Q 152 83 152 91.32 L 152 99.63\" fill=\"none\" stroke=\"white\" stroke-miterlimit=\"10\" pointer-events=\"stroke\" visibility=\"hidden\" stroke-width=\"9\"></path><path d=\"M 96 60 L 96 73 Q 96 83 106 83 L 142 83 Q 152 83 152 91.32 L 152 99.63\" fill=\"none\" stroke=\"#000000\" stroke-miterlimit=\"10\" pointer-events=\"stroke\"></path><path d=\"M 152 104.88 L 148.5 97.88 L 152 99.63 L 155.5 97.88 Z\" fill=\"#000000\" stroke=\"#000000\" stroke-miterlimit=\"10\" pointer-events=\"all\"></path></g></g><g></g><g></g></g></svg></div></div>"
|
|
353
353
|
```
|
|
354
354
|
|
|
355
355
|
#### `Diagram children`
|
|
@@ -994,7 +994,7 @@
|
|
|
994
994
|
#### `Select format`
|
|
995
995
|
|
|
996
996
|
```
|
|
997
|
-
"<div><div class=\"item\"><span class=\"label\">border:</span><div class=\"k-select css-1mhb480\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"dashed\"><div class=\"k-select-value c-ellipsis\"
|
|
997
|
+
"<div><div class=\"item\"><span class=\"label\">border:</span><div class=\"k-select css-1mhb480\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"dashed\"><div class=\"k-select-value c-ellipsis\"><div class=\"line\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow ion-ios-arrow-down css-x0ey6t\"></i></span></span></div><div class=\"rect\"> Rectangle </div></div><div class=\"item\"><span class=\"label\">multiple:</span><div class=\"k-select css-1mhb480\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"ion-camera\"><div class=\"k-select-values\"><div class=\"k-select-tag\"><span class=\"k-select-text\"><i class=\"k-icon ion-camera css-x0ey6t\" style=\"vertical-align: middle;\"></i><span class=\"c-middle\">ion-camera</span></span><i class=\"k-icon k-hoverable ion-ios-close k-select-close css-x0ey6t\"></i></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow ion-ios-arrow-down css-x0ey6t\"></i></span></span></div></div><div class=\"item\"><span class=\"label\">multiple values:</span><div class=\"k-select css-1mhb480\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow ion-ios-arrow-down css-x0ey6t\"></i></span></span></div></div></div>"
|
|
998
998
|
```
|
|
999
999
|
|
|
1000
1000
|
#### `Select group`
|
|
@@ -40,4 +40,33 @@ describe('Dropdown', () => {
|
|
|
40
40
|
render(null, container);
|
|
41
41
|
document.body.removeChild(container);
|
|
42
42
|
});
|
|
43
|
+
|
|
44
|
+
it('handle trigger without props', async () => {
|
|
45
|
+
const container = document.createElement('div');
|
|
46
|
+
document.body.appendChild(container);
|
|
47
|
+
const vue = createApp({
|
|
48
|
+
template: `
|
|
49
|
+
<div>
|
|
50
|
+
<Dropdown>
|
|
51
|
+
<button>hover</button>
|
|
52
|
+
<DropdownMenu>
|
|
53
|
+
<DropdownItem>item 1</DropdownItem>
|
|
54
|
+
<DropdownItem>item 2</DropdownItem>
|
|
55
|
+
<DropdownItem>item 3</DropdownItem>
|
|
56
|
+
</DropdownMenu>
|
|
57
|
+
</Dropdown>
|
|
58
|
+
</div>
|
|
59
|
+
`,
|
|
60
|
+
components: {
|
|
61
|
+
Dropdown, DropdownMenu, DropdownItem
|
|
62
|
+
},
|
|
63
|
+
}).mount(container);
|
|
64
|
+
|
|
65
|
+
vue.$el.querySelector('button').click();
|
|
66
|
+
await wait();
|
|
67
|
+
expect(getElement('.k-dropdown-menu')).to.be.exist;
|
|
68
|
+
|
|
69
|
+
render(null, container);
|
|
70
|
+
document.body.removeChild(container);
|
|
71
|
+
});
|
|
43
72
|
});
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import {createApp, render} from 'vue';
|
|
2
|
+
import {mount, unmount, dispatchEvent, getElement, wait} from '@/test/utils';
|
|
3
|
+
import {Select, Option} from '../../';
|
|
4
|
+
|
|
5
|
+
describe('Select', () => {
|
|
6
|
+
it('handle trigger without props', async () => {
|
|
7
|
+
const container = document.createElement('div');
|
|
8
|
+
document.body.appendChild(container);
|
|
9
|
+
const vue = createApp({
|
|
10
|
+
template: `
|
|
11
|
+
<div>
|
|
12
|
+
<Select>
|
|
13
|
+
<Option v-for="item in [1, 2]" :value="item">{{ item }}</Option>
|
|
14
|
+
</Select>
|
|
15
|
+
</div>
|
|
16
|
+
`,
|
|
17
|
+
components: {
|
|
18
|
+
Select, Option
|
|
19
|
+
},
|
|
20
|
+
}).mount(container);
|
|
21
|
+
|
|
22
|
+
vue.$el.querySelector('.k-select').click();
|
|
23
|
+
await wait();
|
|
24
|
+
expect(getElement('.k-select-menu').textContent).to.eql('12');
|
|
25
|
+
|
|
26
|
+
render(null, container);
|
|
27
|
+
document.body.removeChild(container);
|
|
28
|
+
});
|
|
29
|
+
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
|
|
2
|
+
import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, className as _$cn, createTextVNode as _$ct } from 'intact-vue-next';
|
|
2
3
|
import { linkEvent } from 'intact';
|
|
3
4
|
import { DropdownMenu } from '../dropdown';
|
|
4
5
|
import { DatepickerCalendar } from './calendar';
|
|
@@ -102,13 +103,17 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
102
103
|
__$blocks = _$ex({}, $blocks);
|
|
103
104
|
|
|
104
105
|
return (_$blocks['base-menu'] = function ($super) {
|
|
106
|
+
var _this2 = this;
|
|
107
|
+
|
|
105
108
|
return _$cc(DropdownMenu, {
|
|
106
109
|
'className': _$cn(classNameObj),
|
|
107
|
-
'children': [shortcuts && shortcuts.length ? _$ce(2, 'div',
|
|
108
|
-
|
|
109
|
-
|
|
110
|
+
'children': [shortcuts && shortcuts.length ? _$ce(2, 'div', _mapInstanceProperty(shortcuts).call(shortcuts, function ($value) {
|
|
111
|
+
var label = isFunction($value.label) ? $value.label() : $value.label;
|
|
112
|
+
return _$ce(2, 'div', label, 0, 'k-datepicker-shortcut c-ellipsis', {
|
|
113
|
+
'title': label,
|
|
114
|
+
'ev-click': linkEvent($value, _this2.setByShortcut)
|
|
110
115
|
});
|
|
111
|
-
}
|
|
116
|
+
}), 0, 'k-datepicker-shortcuts') : undefined, _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n '), range ? generatePanel(PanelFlags.End) : null], 0, 'k-datepicker-calendars'), type === 'datetime' ? _$ce(2, 'div', _$cc(Button, {
|
|
112
117
|
'type': 'primary',
|
|
113
118
|
'size': 'small',
|
|
114
119
|
'disabled': isDisabledConfirm(),
|
|
@@ -83,7 +83,10 @@ describe('Tooltip', function () {
|
|
|
83
83
|
};
|
|
84
84
|
|
|
85
85
|
eql = function eql(a, b) {
|
|
86
|
-
|
|
86
|
+
a = Math.floor(a);
|
|
87
|
+
b = Math.floor(b); // Don't be entangled with the difference of 1 to 2 pixels
|
|
88
|
+
|
|
89
|
+
expect(a >= b - 1 && a <= b + 1).to.be.true;
|
|
87
90
|
};
|
|
88
91
|
|
|
89
92
|
instance.set('position', 'left');
|
|
@@ -45,11 +45,7 @@ var defaults = {
|
|
|
45
45
|
|
|
46
46
|
bgColor: '#fff',
|
|
47
47
|
hoverBgColor: 'transparent',
|
|
48
|
-
padding: '
|
|
49
|
-
|
|
50
|
-
get height() {
|
|
51
|
-
return theme.default.height;
|
|
52
|
-
},
|
|
48
|
+
padding: '7px 16px',
|
|
53
49
|
|
|
54
50
|
get descColor() {
|
|
55
51
|
return theme.color.lightBlack;
|
|
@@ -67,5 +63,5 @@ setDefault(function () {
|
|
|
67
63
|
}).transfer;
|
|
68
64
|
});
|
|
69
65
|
export function makeStyles() {
|
|
70
|
-
return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.k-transfer-panel,.k-transfer-arrows{display:inline-block;vertical-align:middle;}.k-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;}.k-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.k-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";
|
|
66
|
+
return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.k-transfer-panel,.k-transfer-arrows{display:inline-block;vertical-align:middle;}.k-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;}.k-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.k-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";}}.k-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.k-transfer-list{overflow:auto;position:relative;flex:1;}.k-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;width:100%;&:not(.k-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.k-checkbox{padding:", transfer.item.padding, ";display:flex;}p{margin:0;color:", transfer.item.descColor, ";}&.k-disabled{p{color:", theme.color.disabled, ";}}}.k-input{width:auto;margin:", transfer.searchGap, ";}.k-transfer-arrows{.k-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
|
|
71
67
|
}
|
package/i18n/en-US.d.ts
CHANGED
package/i18n/en-US.js
CHANGED
package/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v2.0.
|
|
2
|
+
* @king-design v2.0.1
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -56,7 +56,7 @@ export * from './components/tree';
|
|
|
56
56
|
export * from './components/treeSelect';
|
|
57
57
|
export * from './components/upload';
|
|
58
58
|
export * from './components/wave';
|
|
59
|
-
export declare const version = "2.0.
|
|
59
|
+
export declare const version = "2.0.1";
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
export {normalize} from 'intact-vue-next';
|
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v2.0.
|
|
2
|
+
* @king-design v2.0.1
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -58,7 +58,7 @@ export * from './components/tree';
|
|
|
58
58
|
export * from './components/treeSelect';
|
|
59
59
|
export * from './components/upload';
|
|
60
60
|
export * from './components/wave';
|
|
61
|
-
export var version = '2.0.
|
|
61
|
+
export var version = '2.0.1';
|
|
62
62
|
/* generate end */
|
|
63
63
|
|
|
64
64
|
export {normalize} from 'intact-vue-next';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@king-design/vue",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "King-Design UI components for Vue3.0.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"component",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"dayjs": "^1.10.7",
|
|
39
39
|
"downloadjs": "^1.4.7",
|
|
40
40
|
"enquire.js": "^2.1.6",
|
|
41
|
-
"intact-vue-next": "^3.0.
|
|
41
|
+
"intact-vue-next": "^3.0.1",
|
|
42
42
|
"monaco-editor": "^0.26.1",
|
|
43
43
|
"mxgraphx": "^4.0.7",
|
|
44
44
|
"resize-observer-polyfill": "^1.5.1",
|