@king-design/vue 3.1.3 → 3.1.4-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/button/index.vdt.js +2 -3
- package/components/button/styles.js +6 -6
- package/components/card/index.d.ts +2 -0
- package/components/card/index.js +4 -2
- package/components/card/index.vdt.js +3 -2
- package/components/card/styles.js +22 -3
- package/components/carousel/useAutoplay.js +5 -2
- package/components/dropdown/usePosition.js +0 -1
- package/components/editable/styles.js +1 -1
- package/components/icon/styles.js +1 -1
- package/components/input/styles.js +1 -1
- package/components/message/message.d.ts +1 -0
- package/components/message/message.js +12 -10
- package/components/message/message.vdt.js +2 -1
- package/components/message/messages.d.ts +5 -1
- package/components/message/messages.js +5 -1
- package/components/message/messages.vdt.js +13 -7
- package/components/table/table.js +2 -2
- package/components/table/useFixedColumns.js +1 -1
- package/components/table/{useRestRowStatus.d.ts → useResetRowStatus.d.ts} +1 -1
- package/components/table/{useRestRowStatus.js → useResetRowStatus.js} +1 -1
- package/components/tabs/tab.d.ts +2 -1
- package/components/tabs/tab.js +1 -0
- package/components/wave/index.js +6 -2
- package/hooks/useDelayClose.js +11 -6
- package/hooks/useMouseOutsidable.js +6 -2
- package/index.d.ts +2 -2
- package/index.js +2 -2
- package/package.json +2 -2
|
@@ -31,11 +31,10 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
31
31
|
name = _this$get.name,
|
|
32
32
|
ghost = _this$get.ghost;
|
|
33
33
|
|
|
34
|
-
var checked = this.isChecked();
|
|
35
|
-
if (!this.config) debugger;
|
|
36
34
|
var _this$config = this.config,
|
|
37
35
|
cls = _this$config.cls,
|
|
38
36
|
k = _this$config.k;
|
|
37
|
+
var checked = this.isChecked();
|
|
39
38
|
|
|
40
39
|
var isIcon = function isIcon(child) {
|
|
41
40
|
return child.tag === Icon || child.className && child.className.indexOf('icon') > -1;
|
|
@@ -60,7 +59,7 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
60
59
|
});
|
|
61
60
|
}
|
|
62
61
|
|
|
63
|
-
var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(
|
|
62
|
+
var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls(type)] = true, _classNameObj[cls("btn-icon")] = icon, _classNameObj[className] = className, _classNameObj[cls('circle')] = circle, _classNameObj[cls('loading')] = loading, _classNameObj[cls('fluid')] = fluid, _classNameObj[cls('active')] = checked, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[makeButtonStyles(k, iconSide)] = true, _classNameObj);
|
|
64
63
|
|
|
65
64
|
var loadingIcon = _$cc(Icon, {
|
|
66
65
|
'className': _$cn("ion-load-c " + k + "-icon-loading"),
|
|
@@ -242,16 +242,16 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
|
|
|
242
242
|
return cx(
|
|
243
243
|
/*#__PURE__*/
|
|
244
244
|
// extract static styles to individual css method for performance
|
|
245
|
-
css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.", k, "-icon{color:inherit;}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.", k, "-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
|
|
245
|
+
css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.", k, "-icon{color:inherit;}&.", k, "-default,&.", k, "-none,&.", k, "-flat{.", k, "-icon{color:", theme.color.lightBlack, ";}&:hover{.", k, "-icon{color:inherit;}}}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.", k, "-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
|
|
246
246
|
var typeStyles = button[type];
|
|
247
247
|
return /*#__PURE__*/css("&.", k, "-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
|
|
248
|
-
}), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.", k, "-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.", k, "-none,&.", k, "-link,&.", k, "-flat{background:transparent;&,&:hover{border:none;}&.", k, "-active{color:", theme.color.primary, ";}}&.", k, "-none:hover{background:", button.none.hoverBgColor, ";}&.", k, "-flat{background:", button.none.hoverBgColor, ";}&.", k, "-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.", k, "-none.", k, "-disabled,&.", k, "-link.", k, "-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
|
|
248
|
+
}), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.", k, "-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.", k, "-none,&.", k, "-link,&.", k, "-flat{background:transparent;&,&:hover{border:none;}&.", k, "-active{color:", theme.color.primary, ";}}&.", k, "-none:hover{background:", button.none.hoverBgColor, ";}&.", k, "-flat{background:", button.none.hoverBgColor, ";}&.", k, "-disabled{.", k, "-icon{color:inherit;}&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.", k, "-none.", k, "-disabled,&.", k, "-link.", k, "-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
|
|
249
249
|
var styles = button[size];
|
|
250
250
|
return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.", k, "-btn-icon{width:", styles.height, ";}}");
|
|
251
251
|
}), "&.", k, "-btn-icon{width:", button.height, ";padding:0;.", k, "-icon{margin:0;}}&.", k, "-fluid{width:100%;padding:0;}&.", k, "-circle{border-radius:calc(", button.large.height, " / 2);}&.", k, "-loading{", _mapInstanceProperty(types).call(types, function (type) {
|
|
252
252
|
var styles = button[type];
|
|
253
253
|
return /*#__PURE__*/css("&.", k, "-", type, "{&,&:hover{background:", palette(styles.bgColor, -2), ";color:", palette(styles.color, -2), ";border-color:", palette(styles.borderColor, -2), ";}}");
|
|
254
|
-
}), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.", k, "-icon:not(.", k, "-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.", k, "-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, "
|
|
254
|
+
}), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.", k, "-icon:not(.", k, "-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.", k, "-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, ";.", k, "-icon{color:inherit;}&:hover,&:active{background:transparent;}&:hover{color:", button.ghost.hoverColor, ";border-color:", button.ghost.hoverBorderColor, ";}&:active{color:", theme.color.primary, ";border-color:", theme.color.primary, ";}", _mapInstanceProperty(types).call(types, function (type) {
|
|
255
255
|
var _button$type = button[type],
|
|
256
256
|
ghostColor = _button$type.ghostColor,
|
|
257
257
|
borderColor = _button$type.borderColor;
|
|
@@ -264,13 +264,13 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
|
|
|
264
264
|
}), ";.", k, "-icon-loading{margin-left:-1em;}}}"), ";"));
|
|
265
265
|
});
|
|
266
266
|
export var makeButtonGroupStyles = cache(function makeButtonGroupStyles(k) {
|
|
267
|
-
return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.", k, "-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.", k, "-active{z-index:1;position:relative;}}&.", k, "-fluid{width:100%;}&:not(.", k, "-vertical){>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
|
|
267
|
+
return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.", k, "-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.", k, "-active{z-index:1;position:relative;}}&.", k, "-fluid{width:100%;}&:not(.", k, "-vertical):not(.", k, "-seperate){>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
|
|
268
268
|
if (type === 'active') return;
|
|
269
269
|
var borderColor = button.group[type].borderColor;
|
|
270
270
|
return /*#__PURE__*/css("&.", k, "-", type, ":not(:first-child){border-left-color:", borderColor, ";}&.", k, "-", type, ":not(:last-child){border-right-color:", borderColor, ";}");
|
|
271
|
-
}), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.", k, "-fluid{display:flex;>.", k, "-btn{flex:1;}}}&.", k, "-vertical{flex-direction:column;>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
|
|
271
|
+
}), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.", k, "-fluid{display:flex;>.", k, "-btn{flex:1;}}}&.", k, "-vertical:not(.", k, "-seperate){flex-direction:column;>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
|
|
272
272
|
if (type === 'active') return;
|
|
273
273
|
var borderColor = button.group[type].borderColor;
|
|
274
274
|
return /*#__PURE__*/css("&.", k, "-", type, ":not(:first-child){border-top-color:", borderColor, ";}&.", k, "-", type, ":not(:last-child){border-bottom-color:", borderColor, ";}");
|
|
275
|
-
}), ";&:not(.", k, "-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.", k, "-seperate{gap:8px
|
|
275
|
+
}), ";&:not(.", k, "-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.", k, "-seperate{gap:8px;}");
|
|
276
276
|
});
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { Component, VNode, TypeDefs } from 'intact-vue-next';
|
|
2
2
|
export * from './column';
|
|
3
|
+
import { Sizes } from '../types';
|
|
3
4
|
export interface CardProps {
|
|
4
5
|
title?: string | VNode;
|
|
5
6
|
type?: 'shadow' | 'border' | 'none';
|
|
7
|
+
size?: Sizes;
|
|
6
8
|
}
|
|
7
9
|
export interface CardEvents {
|
|
8
10
|
}
|
package/components/card/index.js
CHANGED
|
@@ -6,12 +6,14 @@ export * from './column';
|
|
|
6
6
|
import { useConfigContext } from '../config';
|
|
7
7
|
var typeDefs = {
|
|
8
8
|
title: [String, VNode],
|
|
9
|
-
type: ['shadow', 'border', 'none']
|
|
9
|
+
type: ['shadow', 'border', 'none'],
|
|
10
|
+
size: String
|
|
10
11
|
};
|
|
11
12
|
|
|
12
13
|
var defaults = function defaults() {
|
|
13
14
|
return {
|
|
14
|
-
type: 'shadow'
|
|
15
|
+
type: 'shadow',
|
|
16
|
+
size: 'default'
|
|
15
17
|
};
|
|
16
18
|
};
|
|
17
19
|
|
|
@@ -16,7 +16,8 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
16
16
|
children = _this$get.children,
|
|
17
17
|
className = _this$get.className,
|
|
18
18
|
title = _this$get.title,
|
|
19
|
-
type = _this$get.type
|
|
19
|
+
type = _this$get.type,
|
|
20
|
+
size = _this$get.size;
|
|
20
21
|
|
|
21
22
|
var k = this.config.k;
|
|
22
23
|
var hasHeader = $blocks.header || $blocks.title || title || $blocks.extra;
|
|
@@ -33,7 +34,7 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
|
|
36
|
-
var classNameObj = (_classNameObj = {}, _classNameObj[k + "-card"] = true, _classNameObj[k + "-shadow"] = type === 'shadow', _classNameObj[k + "-border"] = type === 'border', _classNameObj[k + "-none"] = type === 'none', _classNameObj[k + "-no-header"] = !hasHeader, _classNameObj[k + "-card-grid"] = hasColumn, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
|
|
37
|
+
var classNameObj = (_classNameObj = {}, _classNameObj[k + "-card"] = true, _classNameObj[k + "-shadow"] = type === 'shadow', _classNameObj[k + "-border"] = type === 'border', _classNameObj[k + "-none"] = type === 'none', _classNameObj[k + "-no-header"] = !hasHeader, _classNameObj[k + "-card-grid"] = hasColumn, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
|
|
37
38
|
return _$cv('div', _extends({
|
|
38
39
|
'className': _$cn(classNameObj)
|
|
39
40
|
}, getRestProps(this)), [hasHeader ? _$ce(2, 'div', (_$blocks['header'] = function ($super) {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
|
|
1
2
|
import { css } from '@emotion/css';
|
|
2
3
|
import { theme, setDefault } from '../../styles/theme';
|
|
3
4
|
import { deepDefaults } from '../../styles/utils';
|
|
@@ -5,7 +6,7 @@ import '../../styles/global';
|
|
|
5
6
|
import { cache } from '../utils';
|
|
6
7
|
var defaults = {
|
|
7
8
|
border: '1px solid #e5e5e5',
|
|
8
|
-
padding: '
|
|
9
|
+
padding: '24px',
|
|
9
10
|
|
|
10
11
|
get boxShadow() {
|
|
11
12
|
return theme.boxShadow;
|
|
@@ -17,7 +18,19 @@ var defaults = {
|
|
|
17
18
|
|
|
18
19
|
headerHeight: '48px',
|
|
19
20
|
headerFontSize: '14px',
|
|
20
|
-
bgColor: '#fff'
|
|
21
|
+
bgColor: '#fff',
|
|
22
|
+
large: {
|
|
23
|
+
padding: '32px',
|
|
24
|
+
headerHeight: '48px'
|
|
25
|
+
},
|
|
26
|
+
small: {
|
|
27
|
+
padding: '16px',
|
|
28
|
+
headerHeight: '48px'
|
|
29
|
+
},
|
|
30
|
+
mini: {
|
|
31
|
+
padding: '8px',
|
|
32
|
+
headerHeight: '32px'
|
|
33
|
+
}
|
|
21
34
|
};
|
|
22
35
|
var card;
|
|
23
36
|
setDefault(function () {
|
|
@@ -26,6 +39,12 @@ setDefault(function () {
|
|
|
26
39
|
}).card;
|
|
27
40
|
makeStyles == null ? void 0 : makeStyles.clearCache();
|
|
28
41
|
});
|
|
42
|
+
var sizes = ['large', 'small', 'mini'];
|
|
29
43
|
export var makeStyles = cache(function makeStyles(k) {
|
|
30
|
-
return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.", k, "-card-header{height:", card.headerHeight, ";
|
|
44
|
+
return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.", k, "-card-header{height:", card.headerHeight, ";padding:0 ", card.padding, ";display:flex;align-items:center;}.", k, "-card-title{font-size:", card.headerFontSize, ";flex:1;}.", k, "-card-extra{display:flex;align-items:center;}.", k, "-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.", k, "-shadow{box-shadow:", card.boxShadow, ";}&.", k, "-none{box-shadow:none;}&.", k, "-border{border:", card.border, ";.", k, "-card-header{border-bottom:", card.border, ";}.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-no-header{.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-card-grid{.", k, "-card-body{display:flex;padding:0;}&.", k, "-border{.", k, "-card-column:not(:last-of-type){border-right:", card.border, ";}}}.", k, "-card-column{display:flex;align-items:center;padding:", card.padding, ";&.", k, "-fluid{flex:1;}&.", k, "-center{justify-content:center;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
|
|
45
|
+
var _card$size = card[size],
|
|
46
|
+
padding = _card$size.padding,
|
|
47
|
+
headerHeight = _card$size.headerHeight;
|
|
48
|
+
return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-card-header{padding:0 ", padding, ";height:", headerHeight, ";}.", k, "-card-body{padding:0 ", padding, " ", padding, ";}&.", k, "-border,&.", k, "-no-header{.", k, "-card-body{padding-top:", padding, ";}}.", k, "-card-column{padding:", padding, ";}}");
|
|
49
|
+
}), ";");
|
|
31
50
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useInstance, onBeforeUnmount } from 'intact-vue-next';
|
|
2
2
|
export function useAutoplay(next) {
|
|
3
3
|
var instance = useInstance();
|
|
4
|
-
var timer;
|
|
4
|
+
var timer = null;
|
|
5
5
|
var ms;
|
|
6
6
|
instance.on('$receive:autoplay', function (v) {
|
|
7
7
|
if (v === true) {
|
|
@@ -24,7 +24,10 @@ export function useAutoplay(next) {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
function stop() {
|
|
27
|
-
|
|
27
|
+
if (timer) {
|
|
28
|
+
window.clearTimeout(timer);
|
|
29
|
+
timer = null;
|
|
30
|
+
}
|
|
28
31
|
}
|
|
29
32
|
|
|
30
33
|
onBeforeUnmount(stop);
|
|
@@ -22,5 +22,5 @@ setDefault(function () {
|
|
|
22
22
|
});
|
|
23
23
|
export { editable };
|
|
24
24
|
export var makeStyles = cache(function makeStyles(k) {
|
|
25
|
-
return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-
|
|
25
|
+
return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-wrapper{border:", editable.invalid.border, "!important;}}");
|
|
26
26
|
});
|
|
@@ -39,7 +39,7 @@ export var sizes = ['large', 'small', 'mini'];
|
|
|
39
39
|
export var makeStyles = cache(function makeStyles(k, color) {
|
|
40
40
|
// create the global icon styles
|
|
41
41
|
makeIconStyles(k);
|
|
42
|
-
return /*#__PURE__*/css("color:", icon.color, ";font-size:", icon.fontSize.default, ";line-height:1;", _mapInstanceProperty(sizes).call(sizes, function (size) {
|
|
42
|
+
return /*#__PURE__*/css("color:", icon.color, ";font-size:", icon.fontSize.default, ";line-height:1;font-weight:normal;", _mapInstanceProperty(sizes).call(sizes, function (size) {
|
|
43
43
|
var fontSize = icon.fontSize[size];
|
|
44
44
|
return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", fontSize, ";}");
|
|
45
45
|
}), " ", _mapInstanceProperty(colors).call(colors, function (color) {
|
|
@@ -135,7 +135,7 @@ setDefault(function () {
|
|
|
135
135
|
export var makeStyles = cache(function makeStyles(k) {
|
|
136
136
|
var _context;
|
|
137
137
|
|
|
138
|
-
return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0
|
|
138
|
+
return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;max-width:100%;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;flex:1;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
|
|
139
139
|
var styles = input[size];
|
|
140
140
|
var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.", k, "-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";}");
|
|
141
141
|
if (size === 'default') return sizeClassName;
|
|
@@ -10,6 +10,7 @@ export declare class Message extends Component<MessageProps> {
|
|
|
10
10
|
static template: string | import('intact-vue-next').Template<any>;
|
|
11
11
|
static typeDefs: Required<TypeDefs<MessageProps>>;
|
|
12
12
|
static defaults: () => Partial<MessageProps>;
|
|
13
|
+
static classNamePrefix: string;
|
|
13
14
|
static notice(content: Children | Partial<MessageProps>, duration?: number, type?: MessageProps['type']): void;
|
|
14
15
|
static info(content: Children | Partial<MessageProps>, duration?: number): void;
|
|
15
16
|
static error(content: Children | Partial<MessageProps>, duration?: number): void;
|
|
@@ -54,16 +54,6 @@ export var Message = /*#__PURE__*/function (_Component) {
|
|
|
54
54
|
type = 'info';
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
if (!messages) {
|
|
58
|
-
var container = document.createElement('div');
|
|
59
|
-
document.body.append(container);
|
|
60
|
-
render(h(Messages, {
|
|
61
|
-
ref: function ref(i) {
|
|
62
|
-
return messages = i;
|
|
63
|
-
}
|
|
64
|
-
}), container);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
57
|
if (isObject(content) && !content.tag) {
|
|
68
58
|
content = _extends({}, content, {
|
|
69
59
|
type: type,
|
|
@@ -78,6 +68,17 @@ export var Message = /*#__PURE__*/function (_Component) {
|
|
|
78
68
|
};
|
|
79
69
|
}
|
|
80
70
|
|
|
71
|
+
if (!messages) {
|
|
72
|
+
var container = document.createElement('div');
|
|
73
|
+
document.body.append(container);
|
|
74
|
+
render(h(Messages, {
|
|
75
|
+
ref: function ref(i) {
|
|
76
|
+
return messages = i;
|
|
77
|
+
},
|
|
78
|
+
classNamePrefix: Message.classNamePrefix
|
|
79
|
+
}), container);
|
|
80
|
+
}
|
|
81
|
+
|
|
81
82
|
messages.notice(h(Message, content));
|
|
82
83
|
};
|
|
83
84
|
|
|
@@ -108,5 +109,6 @@ export var Message = /*#__PURE__*/function (_Component) {
|
|
|
108
109
|
Message.template = template;
|
|
109
110
|
Message.typeDefs = typeDefs;
|
|
110
111
|
Message.defaults = defaults;
|
|
112
|
+
Message.classNamePrefix = void 0;
|
|
111
113
|
|
|
112
114
|
__decorate([bind], Message.prototype, "close", null);
|
|
@@ -16,7 +16,8 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
16
16
|
content = _this$get.content,
|
|
17
17
|
children = _this$get.children,
|
|
18
18
|
closable = _this$get.closable,
|
|
19
|
-
hideIcon = _this$get.hideIcon
|
|
19
|
+
hideIcon = _this$get.hideIcon,
|
|
20
|
+
classNamePrefix = _this$get.classNamePrefix;
|
|
20
21
|
|
|
21
22
|
var k = this.config.k;
|
|
22
23
|
var classNameObj = (_classNameObj = {}, _classNameObj[k + "-message"] = true, _classNameObj[k + "-" + type] = type, _classNameObj[makeMessageStyles(k)] = true, _classNameObj);
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import { Component, VNodeComponentClass } from 'intact-vue-next';
|
|
1
|
+
import { Component, VNodeComponentClass, TypeDefs } from 'intact-vue-next';
|
|
2
2
|
import type { Message } from './message';
|
|
3
|
+
export interface MessagesProps {
|
|
4
|
+
classNamePrefix?: string;
|
|
5
|
+
}
|
|
3
6
|
export declare class Messages extends Component {
|
|
4
7
|
static template: string | import('intact-vue-next').Template<any>;
|
|
8
|
+
static typeDefs: Required<TypeDefs<MessagesProps>>;
|
|
5
9
|
private messages;
|
|
6
10
|
private config;
|
|
7
11
|
notice(message: VNodeComponentClass<Message>): void;
|
|
@@ -5,6 +5,9 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/spl
|
|
|
5
5
|
import { Component } from 'intact-vue-next';
|
|
6
6
|
import template from './messages.vdt';
|
|
7
7
|
import { useConfigContext } from '../config';
|
|
8
|
+
var typeDefs = {
|
|
9
|
+
classNamePrefix: String
|
|
10
|
+
};
|
|
8
11
|
export var Messages = /*#__PURE__*/function (_Component) {
|
|
9
12
|
_inheritsLoose(Messages, _Component);
|
|
10
13
|
|
|
@@ -48,4 +51,5 @@ export var Messages = /*#__PURE__*/function (_Component) {
|
|
|
48
51
|
|
|
49
52
|
return Messages;
|
|
50
53
|
}(Component);
|
|
51
|
-
Messages.template = template;
|
|
54
|
+
Messages.template = template;
|
|
55
|
+
Messages.typeDefs = typeDefs;
|
|
@@ -1,17 +1,23 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, map as _$ma, className as _$cn } from 'intact-vue-next';
|
|
2
2
|
import { TransitionGroup, Transition } from 'intact-vue-next';
|
|
3
3
|
import { makeMessagesStyles } from './styles';
|
|
4
|
+
import { ConfigProvider } from '../config';
|
|
4
5
|
export default function ($props, $blocks, $__proto__) {
|
|
5
6
|
var _$cn2;
|
|
6
7
|
|
|
7
8
|
$blocks || ($blocks = {});
|
|
8
9
|
$props || ($props = {});
|
|
9
10
|
var $this = this;
|
|
10
|
-
var k = this.config.k;
|
|
11
|
-
return _$
|
|
12
|
-
'
|
|
13
|
-
|
|
14
|
-
},
|
|
15
|
-
|
|
11
|
+
var k = this.get('classNamePrefix') || this.config.k;
|
|
12
|
+
return _$cc(ConfigProvider, {
|
|
13
|
+
'value': {
|
|
14
|
+
classNamePrefix: k
|
|
15
|
+
},
|
|
16
|
+
'children': _$ce(2, 'div', _$cc(TransitionGroup, {
|
|
17
|
+
'children': _$ma(this.messages, function ($value, $key) {
|
|
18
|
+
return $value;
|
|
19
|
+
}, $this)
|
|
20
|
+
}), 2, _$cn((_$cn2 = {}, _$cn2[k + "-messages"] = true, _$cn2[makeMessagesStyles(k)] = true, _$cn2)))
|
|
21
|
+
});
|
|
16
22
|
}
|
|
17
23
|
;
|
|
@@ -18,7 +18,7 @@ import { useExpandable } from './useExpandable';
|
|
|
18
18
|
import { useSelected } from './useSelected';
|
|
19
19
|
import { useTree } from './useTree';
|
|
20
20
|
import { Tooltip } from '../tooltip/tooltip';
|
|
21
|
-
import {
|
|
21
|
+
import { useResetRowStatus } from './useResetRowStatus';
|
|
22
22
|
import { exportTable as _exportTable } from './exportTable';
|
|
23
23
|
import { useResizable } from './useResizable';
|
|
24
24
|
import { useDraggable } from './useDraggable';
|
|
@@ -117,7 +117,7 @@ export var Table = /*#__PURE__*/function (_Component) {
|
|
|
117
117
|
_this.sortable = useSortable();
|
|
118
118
|
_this.expandable = useExpandable();
|
|
119
119
|
_this.selected = useSelected();
|
|
120
|
-
_this.resetRowStatus =
|
|
120
|
+
_this.resetRowStatus = useResetRowStatus(_this.disableRow.getAllKeys);
|
|
121
121
|
_this.draggable = useDraggable(_this.pagination.data);
|
|
122
122
|
_this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition);
|
|
123
123
|
_this.config = useConfigContext();
|
|
@@ -89,7 +89,7 @@ export function useFixedColumns(getColumns, _ref, widthMap) {
|
|
|
89
89
|
function updateScrollPositionOnResize() {
|
|
90
90
|
var scrollDom = scrollRef.value;
|
|
91
91
|
|
|
92
|
-
if (scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
|
|
92
|
+
if (!hasFixed.value || scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
|
|
93
93
|
scrollPosition.set(null);
|
|
94
94
|
} else {
|
|
95
95
|
setScrollPosition(scrollRef.value.scrollLeft);
|
|
@@ -2,7 +2,7 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/i
|
|
|
2
2
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
|
|
3
3
|
import { useInstance, onBeforeUnmount, onUpdated } from 'intact-vue-next';
|
|
4
4
|
import { addOrRemove } from './useChecked';
|
|
5
|
-
export function
|
|
5
|
+
export function useResetRowStatus(getAllKeys) {
|
|
6
6
|
var instance = useInstance();
|
|
7
7
|
var allUnmountedRows = [];
|
|
8
8
|
var willUnmounted = false;
|
package/components/tabs/tab.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component } from 'intact-vue-next';
|
|
1
|
+
import { Component, TypeDefs } from 'intact-vue-next';
|
|
2
2
|
export interface TabProps {
|
|
3
3
|
value?: any;
|
|
4
4
|
disabled?: boolean;
|
|
@@ -10,6 +10,7 @@ export interface TabEvents {
|
|
|
10
10
|
}
|
|
11
11
|
export declare class Tab extends Component<TabProps, TabEvents> {
|
|
12
12
|
static template: string | import('intact-vue-next').Template<any>;
|
|
13
|
+
static typeDefs: Required<TypeDefs<TabProps>>;
|
|
13
14
|
private tabs;
|
|
14
15
|
private config;
|
|
15
16
|
private onClick;
|
package/components/tabs/tab.js
CHANGED
package/components/wave/index.js
CHANGED
|
@@ -35,7 +35,7 @@ export var Wave = /*#__PURE__*/function (_Component) {
|
|
|
35
35
|
_this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
|
|
36
36
|
_this.instance = null;
|
|
37
37
|
_this.className = void 0;
|
|
38
|
-
_this.timer =
|
|
38
|
+
_this.timer = null;
|
|
39
39
|
_this.config = useConfigContext();
|
|
40
40
|
return _this;
|
|
41
41
|
}
|
|
@@ -95,7 +95,11 @@ export var Wave = /*#__PURE__*/function (_Component) {
|
|
|
95
95
|
if (!node) return;
|
|
96
96
|
node.classList.remove(this.className);
|
|
97
97
|
node.removeEventListener('animationend', this.resetAnimation);
|
|
98
|
-
|
|
98
|
+
|
|
99
|
+
if (this.timer) {
|
|
100
|
+
clearTimeout(this.timer);
|
|
101
|
+
this.timer = null;
|
|
102
|
+
}
|
|
99
103
|
};
|
|
100
104
|
|
|
101
105
|
return Wave;
|
package/hooks/useDelayClose.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { onMounted, useInstance, onUnmounted } from 'intact-vue-next';
|
|
2
2
|
export function useDelayClose(close, duration) {
|
|
3
3
|
var instance = useInstance();
|
|
4
|
-
var timer;
|
|
4
|
+
var timer = null;
|
|
5
5
|
|
|
6
6
|
function delayClose() {
|
|
7
7
|
if (duration) {
|
|
@@ -11,7 +11,7 @@ export function useDelayClose(close, duration) {
|
|
|
11
11
|
|
|
12
12
|
function onMouseEnter(e) {
|
|
13
13
|
instance.trigger('mouseenter', e);
|
|
14
|
-
|
|
14
|
+
clear();
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
function onMouseLeave(e) {
|
|
@@ -20,14 +20,19 @@ export function useDelayClose(close, duration) {
|
|
|
20
20
|
// so we must detect the $unmounted status here
|
|
21
21
|
|
|
22
22
|
if (instance.$unmounted) return;
|
|
23
|
-
|
|
23
|
+
clear();
|
|
24
24
|
delayClose();
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
function clear() {
|
|
28
|
+
if (timer) {
|
|
29
|
+
clearTimeout(timer);
|
|
30
|
+
timer = null;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
27
34
|
onMounted(delayClose);
|
|
28
|
-
onUnmounted(
|
|
29
|
-
clearTimeout(timer);
|
|
30
|
-
});
|
|
35
|
+
onUnmounted(clear);
|
|
31
36
|
return {
|
|
32
37
|
onMouseEnter: onMouseEnter,
|
|
33
38
|
onMouseLeave: onMouseLeave
|
|
@@ -9,7 +9,7 @@ export function useMouseOutsidable(elementRef, autoAdd) {
|
|
|
9
9
|
autoAdd = true;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
var timer;
|
|
12
|
+
var timer = null;
|
|
13
13
|
|
|
14
14
|
function onMouseDown() {
|
|
15
15
|
document.addEventListener('click', onDocumentClick, true);
|
|
@@ -19,6 +19,7 @@ export function useMouseOutsidable(elementRef, autoAdd) {
|
|
|
19
19
|
function onMouseUp() {
|
|
20
20
|
timer = window.setTimeout(function () {
|
|
21
21
|
document.removeEventListener('click', onDocumentClick, true);
|
|
22
|
+
timer = null;
|
|
22
23
|
});
|
|
23
24
|
document.removeEventListener('mouseup', onMouseUp);
|
|
24
25
|
}
|
|
@@ -36,7 +37,10 @@ export function useMouseOutsidable(elementRef, autoAdd) {
|
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
onBeforeUnmount(function () {
|
|
39
|
-
|
|
40
|
+
if (timer) {
|
|
41
|
+
clearTimeout(timer);
|
|
42
|
+
timer = null;
|
|
43
|
+
}
|
|
40
44
|
|
|
41
45
|
if (autoAdd) {
|
|
42
46
|
elementRef.value.removeEventListener('mousedown', onMouseDown);
|
package/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.1.
|
|
2
|
+
* @king-design v3.1.4-beta.1
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -60,7 +60,7 @@ 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.
|
|
63
|
+
export declare const version = "3.1.4-beta.1";
|
|
64
64
|
|
|
65
65
|
|
|
66
66
|
export {normalize} from 'intact-vue-next';
|
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.1.
|
|
2
|
+
* @king-design v3.1.4-beta.1
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -62,7 +62,7 @@ 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.
|
|
65
|
+
export var version = '3.1.4-beta.1';
|
|
66
66
|
/* generate end */
|
|
67
67
|
|
|
68
68
|
export {normalize} from 'intact-vue-next';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@king-design/vue",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.4-beta.1",
|
|
4
4
|
"description": "King-Design UI components for Vue3.0.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"component",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@emotion/css": "^11.5.0",
|
|
38
38
|
"dayjs": "^1.10.7",
|
|
39
39
|
"enquire.js": "^2.1.6",
|
|
40
|
-
"intact-vue-next": "3.0.
|
|
40
|
+
"intact-vue-next": "3.0.25",
|
|
41
41
|
"monaco-editor": "^0.26.1",
|
|
42
42
|
"mxgraphx": "^4.0.7",
|
|
43
43
|
"resize-observer-polyfill": "^1.5.1",
|