@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.
@@ -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(type)] = type !== 'default', _classNameObj[cls(size)] = size !== 'default', _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);
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, ";&: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) {
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;>.", k, "-btn{border-radius:", button.borderRadius, "!important;}}");
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
  }
@@ -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: '16px',
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, ";line-height:", card.headerHeight, ";padding:0 ", card.padding, ";}.", k, "-card-title{font-size:", card.headerFontSize, ";display:inline-block;}.", k, "-card-extra{float:right;height:100%;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;}}");
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
- window.clearTimeout(timer);
27
+ if (timer) {
28
+ window.clearTimeout(timer);
29
+ timer = null;
30
+ }
28
31
  }
29
32
 
30
33
  onBeforeUnmount(stop);
@@ -39,7 +39,6 @@ export function usePosition() {
39
39
  var pos = instance.get('position');
40
40
 
41
41
  switch (pos) {
42
- case 'left':
43
42
  case 'left':
44
43
  pos = {
45
44
  my: 'right-10 center',
@@ -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-inner{border:", editable.invalid.border, "!important;}}");
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;&::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) {
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 { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, map as _$ma, className as _$cn } from 'intact-vue-next';
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 _$ce(2, 'div', _$cc(TransitionGroup, {
12
- 'children': _$ma(this.messages, function ($value, $key) {
13
- return $value;
14
- }, $this)
15
- }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-messages"] = true, _$cn2[makeMessagesStyles(k)] = true, _$cn2)));
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 { useRestRowStatus } from './useRestRowStatus';
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 = useRestRowStatus(_this.disableRow.getAllKeys);
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);
@@ -1,4 +1,4 @@
1
1
  import type { TableRowKey } from './table';
2
- export declare function useRestRowStatus(getAllKeys: () => TableRowKey[]): {
2
+ export declare function useResetRowStatus(getAllKeys: () => TableRowKey[]): {
3
3
  onRowBeforeUnmount: (key: TableRowKey) => void;
4
4
  };
@@ -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 useRestRowStatus(getAllKeys) {
5
+ export function useResetRowStatus(getAllKeys) {
6
6
  var instance = useInstance();
7
7
  var allUnmountedRows = [];
8
8
  var willUnmounted = false;
@@ -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;
@@ -49,6 +49,7 @@ export var Tab = /*#__PURE__*/function (_Component) {
49
49
  return Tab;
50
50
  }(Component);
51
51
  Tab.template = template;
52
+ Tab.typeDefs = typeDefs;
52
53
 
53
54
  __decorate([bind], Tab.prototype, "onClick", null);
54
55
 
@@ -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 = 0;
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
- clearTimeout(this.timer);
98
+
99
+ if (this.timer) {
100
+ clearTimeout(this.timer);
101
+ this.timer = null;
102
+ }
99
103
  };
100
104
 
101
105
  return Wave;
@@ -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
- clearTimeout(timer);
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
- clearTimeout(timer);
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(function () {
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
- clearTimeout(timer);
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.3
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.3";
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.3
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.3';
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",
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.24",
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",