@king-design/vue 3.4.1 → 3.4.3-beta.0

package/__tests__/components/editable.spec.ts

@@ -35,7 +35,7 @@ describe('Editable', () => {
         container.querySelector<HTMLDivElement>('.k-icon')!.click();
         await wait();
 
-        const input = container.querySelector('.k-input input') as HTMLInputElement;
+        const input = container.querySelector('.k-input textarea') as HTMLTextAreaElement;
         expect(input.selectionStart).to.eql(0);
         expect(input.selectionEnd).to.eql(1);
 

package/components/button/index.vdt.js

@@ -55,7 +55,7 @@ export default function ($props, $blocks, $__proto__) {
       }
     });
   }
-  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls(type)] = !color, _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[cls('custom')] = color, _classNameObj[makeButtonStyles(k, iconSide, color)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls(type)] = !color, _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('custom')] = color, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[makeButtonStyles(k, iconSide, color)] = true, _classNameObj);
   var loadingIcon = _$cc(Icon, {
     'className': _$cn("ion-load-c " + k + "-icon-loading"),
     'size': size /*loadingSizeMap[size]*/,

package/components/button/styles.js

@@ -11,7 +11,7 @@ var btnStyles = {
     return theme.color.text;
   },
   bgColor: '#fff',
-  lineHeight: '1.15',
+  lineHeight: '1',
   get padding() {
     return "0 16px";
   },
@@ -199,8 +199,8 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide, color
   // extract static styles to individual css method for performance
   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) {
     var typeStyles = button[type];
-    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), ";}}");
-  }), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}", color && /*#__PURE__*/css("&.", k, "-custom{color:", color, ";border-color:", color, ";&:hover,&:focus{background:", palette(color, -4), ";}&:active{background:", palette(color, -3), ";}}"), " &.", 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) {
+    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), ";}&.", k, "-disabled{&,&:hover{background:", palette(typeStyles.bgColor, -2), ";color:", palette(typeStyles.color, -2), ";border-color:", palette(typeStyles.borderColor, -2), ";}}}");
+  }), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}&.", k, "-disabled{border:none;}}", color && /*#__PURE__*/css("&.", k, "-custom{color:", color, ";border-color:", color, ";&:hover,&:focus{background:", palette(color, -4), ";}&:active{background:", palette(color, -3), ";}&.", k, "-disabled{border:none;}}"), " &.", 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) {
     var styles = button[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.", k, "-btn-icon{width:", styles.height, ";}}");
   }), "&.", 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) {

package/components/descriptions/item.vdt.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
 import { makeStyles } from './styles';
-import { getRestProps, addStyle } from '../utils';
-import { isFunction } from 'intact-shared';
-import { Ellipsis } from 'kpc';
+import { getRestProps } from '../utils';
+import { Ellipsis } from '../ellipsis';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
   $blocks || ($blocks = {});

package/components/diagram/shapes/callout.d.ts

@@ -12,7 +12,7 @@ export declare class DCallout extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/circle.d.ts

@@ -12,7 +12,7 @@ export declare class DCircle extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/document.d.ts

@@ -12,7 +12,7 @@ export declare class DDocument extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/ellipse.d.ts

@@ -12,7 +12,7 @@ export declare class DEllipse extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/hexagon.d.ts

@@ -12,7 +12,7 @@ export declare class DHexagon extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/image.d.ts

@@ -18,7 +18,7 @@ export declare class DImage extends DShape<DImageProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/parallelogram.d.ts

@@ -12,7 +12,7 @@ export declare class DParallelogram extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/rectangle.d.ts

@@ -18,7 +18,7 @@ export declare class DRectangle extends DShape<DRectangleProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/square.d.ts

@@ -13,7 +13,7 @@ export declare class DSquare extends DRectangle {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/text.d.ts

@@ -12,7 +12,7 @@ export declare class DText extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/dialog/styles.js

@@ -58,11 +58,11 @@ var defaults = {
     padding: "0 24px",
     bodyMarginTop: "-25px",
     tipIconMarginBottom: '10px',
-    tipIconFontSize: '37px',
-    tipIconLineHeight: '37px',
+    tipIconFontSize: '24px',
+    tipIconLineHeight: '24px',
     // with title
     titleFontWeight: '500',
-    titleTipIconFontSize: '37px',
+    titleTipIconFontSize: '24px',
     titleFontSize: '14px',
     wrapperPaddingLeft: '8px',
     titleBodyMarginTop: '-36px'

package/components/dropdown/item.js

@@ -50,8 +50,11 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
       // hide all dropdowns
       var dropdown = this.dropdown;
       do {
-        dropdown.hide(true);
-      } while (dropdown = dropdown.dropdown);
+        if (!dropdown.$isTooltip) {
+          dropdown.hide(true);
+        }
+        dropdown = dropdown.dropdown;
+      } while (dropdown);
     }
   };
   _proto.hasSubMenu = function hasSubMenu() {

package/components/editable/index.spec.js

@@ -24,7 +24,7 @@ describe('Editable', function () {
         case 5:
           expect(element.innerHTML).to.matchSnapshot();
           // input
-          input = element.querySelector('input');
+          input = element.querySelector('textarea');
           input.value = 'test';
           dispatchEvent(input, 'blur');
           _context.next = 11;
@@ -39,7 +39,7 @@ describe('Editable', function () {
           return wait();
         case 16:
           expect(element.innerHTML).to.matchSnapshot();
-          input = element.querySelector('input');
+          input = element.querySelector('textarea');
           input.value = 'new';
           dispatchEvent(input, 'keydown', {
             keyCode: 27
@@ -56,7 +56,7 @@ describe('Editable', function () {
           return wait();
         case 27:
           expect(element.innerHTML).to.matchSnapshot();
-          input = element.querySelector('input');
+          input = element.querySelector('textarea');
           input.value = 'new';
           dispatchEvent(input, 'keydown', {
             keyCode: 13
@@ -84,7 +84,7 @@ describe('Editable', function () {
           _context2.next = 5;
           return wait();
         case 5:
-          input = findDomFromVNode(first.$lastInput, true).querySelector('input');
+          input = findDomFromVNode(first.$lastInput, true).querySelector('textarea');
           dispatchEvent(input, 'focus');
           input.value = 'a';
           dispatchEvent(input, 'input');
@@ -98,7 +98,7 @@ describe('Editable', function () {
           _context2.next = 16;
           return wait();
         case 16:
-          input = findDomFromVNode(second.$lastInput, true).querySelector('input');
+          input = findDomFromVNode(second.$lastInput, true).querySelector('textarea');
           input.value = 'a';
           dispatchEvent(input, 'input');
           dispatchEvent(input, 'blur');
@@ -111,7 +111,7 @@ describe('Editable', function () {
           _context2.next = 26;
           return wait();
         case 26:
-          input = findDomFromVNode(third.$lastInput, true).querySelector('input');
+          input = findDomFromVNode(third.$lastInput, true).querySelector('textarea');
           input.value = 'a';
           dispatchEvent(input, 'input');
           dispatchEvent(input, 'blur');
@@ -164,7 +164,7 @@ describe('Editable', function () {
           _context4.next = 7;
           return wait();
         case 7:
-          input = element.querySelector("input");
+          input = element.querySelector("textarea");
           input.value = 'aa';
           dispatchEvent(input, 'blur');
           _context4.next = 12;
@@ -175,7 +175,7 @@ describe('Editable', function () {
           _context4.next = 16;
           return wait();
         case 16:
-          input = element.querySelector("input");
+          input = element.querySelector("textarea");
           expect(input.value).to.eql('aa');
         case 18:
         case "end":

package/components/editable/index.vdt.js

@@ -31,7 +31,9 @@ export default function ($props, $blocks, $__proto__) {
     'ref': this.inputRef,
     'frozenOnInput': true,
     'ev-$mounted': this.select,
-    'autoWidth': true
+    'width': 300,
+    'type': 'textarea',
+    'rows': 'auto'
   }, null, this.inputRef), 0, 'c-ellipsis'), !disabled && !editing ? _$cc(Tooltip, {
     'content': tip,
     'children': _$cc(Icon, {

package/components/editable/styles.d.ts

@@ -1,6 +1,7 @@
 import '../../styles/global';
 declare const defaults: {
     iconGap: string;
+    readonly smallPadding: string;
     invalid: {
         readonly border: string;
     };

package/components/editable/styles.js

@@ -5,6 +5,9 @@ import '../../styles/global';
 import { cache } from '../utils';
 var defaults = {
   iconGap: '0 0 0 8px',
+  get smallPadding() {
+    return theme.small.padding;
+  },
   // invalid
   invalid: {
     get border() {
@@ -21,5 +24,5 @@ setDefault(function () {
 });
 export { editable };
 export var makeStyles = cache(function makeStyles(k) {
-  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;}}");
+  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;}}&.", k, "-editable{.", k, "-type-textarea{.", k, "-textarea{padding:0 ", editable.smallPadding, ";}}}");
 });

package/components/ellipsis/index.vdt.js

@@ -31,6 +31,7 @@ export default function ($props, $blocks, $__proto__) {
     'position': position,
     'theme': theme,
     'className': _$cn(className),
+    'hoverable': true,
     'children': wrapper,
     '$blocks': function ($blocks) {
       var _$blocks = {},

package/components/menu/styles.js

@@ -115,7 +115,7 @@ export var makeMenuStyles = cache(function makeMenuStyles(k) {
   return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";position:relative;}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";padding:0 16px;color:", menu.header.color, ";font-size:", menu.header.fontSize, ";font-weight:bold;}.", k, "-menu-body{padding:", menu.item.bodyPadding, ";max-height:calc(100% - ", menu.header.height, ");overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}.", k, "-menu-title{height:", menu.title.height, ";border-top:", menu.border, ";margin-top:4px;.", k, "-menu-name{transition:all ", menu.transition, ";height:", menu.title.height, ";color:", menu.title.color, ";font-weight:bold;}}.", k, "-menu-arrow-box{width:14px;height:60px;cursor:pointer;background:", menu.bgColor, ";border-radius:0 8px 8px 0;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:calc(", menu.width, " - 2px);transition:left ", menu.transition, ";transform:translateY(-50%);border:", menu.border, ";border-left:none;.", k, "-icon{margin-right:0;}&:hover{.", k, "-menu-arrow:before{color:", menu.item.activeBgColor, ";}}}&.", k, "-light{border-right:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.color, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.light.item.subTitleColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = menu[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}.", k, "-menu-arrow-box{left:calc(", styles.width, " - 2px);}}");
-  }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + (", getLeft(menu.item.padding), " + ", getLeft(menu.item.bodyPadding), ") * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-item-arrow{display:none;}}&.", k, "-collapsed-arrow{width:0px;border-left:none;.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");
+  }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + (", getLeft(menu.item.padding), " + ", getLeft(menu.item.bodyPadding), ") * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-item-arrow{display:none;}}&.", k, "-collapsed-arrow{width:0px;border-left:none;.", k, "-menu-header{padding:0;}.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");
 });
 export var makeTitleStyles = cache(function makeTitleStyles(k) {
   var item = menu.item;

package/components/select/base.d.ts

@@ -51,6 +51,10 @@ export declare abstract class BaseSelect<T extends BaseSelectProps<any> = BaseSe
     };
     private focusout;
     private draggable;
+    immutable: {
+        immutableValues: State<any[]>;
+        isClosable: (key: string) => boolean;
+    };
     protected config: {
         cls: (name: string) => string;
         readonly k: string;

package/components/select/base.js

@@ -2,6 +2,8 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import { __decorate } from "tslib";
 import { Component, provide, createRef } from 'intact-vue-next';
 import template from './base.vdt';
@@ -14,6 +16,7 @@ import { useInput } from './useInput';
 import { useFocusout } from './useFocusout';
 import { isNullOrUndefined } from 'intact-shared';
 import { useDraggable } from './useDraggble';
+import { useImmutable } from './useImmutable';
 import { useConfigContext } from '../config';
 var typeDefs = {
   value: null,
@@ -60,6 +63,7 @@ export var BaseSelect = /*#__PURE__*/function (_Component) {
     _this.input = useInput(_this.resetKeywords);
     _this.focusout = useFocusout();
     _this.draggable = useDraggable();
+    _this.immutable = useImmutable();
     _this.config = useConfigContext();
     return _this;
   }
@@ -104,7 +108,13 @@ export var BaseSelect = /*#__PURE__*/function (_Component) {
   };
   _proto.clear = function clear(e) {
     e.stopPropagation();
-    this.set('value', this.get('multiple') ? [] : null);
+    var _this$get2 = this.get(),
+      value = _this$get2.value,
+      multiple = _this$get2.multiple;
+    var immutableValues = this.immutable.immutableValues.value;
+    this.set('value', multiple ? Array.isArray(value) ? _filterInstanceProperty(value).call(value, function (key) {
+      return _includesInstanceProperty(immutableValues).call(immutableValues, key);
+    }) : [] : null);
   };
   _proto.onKeydown = function onKeydown(e) {
     this.trigger('keydown', e);

package/components/select/base.vdt.js

@@ -57,6 +57,7 @@ export default function ($props, $blocks, $__proto__) {
   var _this$focusout = this.focusout,
     onFocusout = _this$focusout.onFocusout,
     triggerRef = _this$focusout.triggerRef;
+  var isClosable = this.immutable.isClosable;
   var filterInput = filterable ? _$cc(Input, {
     'className': _$cn(k + "-select-input"),
     'value': keywords,
@@ -139,7 +140,7 @@ export default function ($props, $blocks, $__proto__) {
                 'children': _$ma(label, function ($label, $key) {
                   return _$cc(Tag, {
                     'key': isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : $key,
-                    'closable': true,
+                    'closable': isClosable(value[$key]),
                     'ev-close': this.delete.bind(this, $key),
                     'disabled': disabled,
                     'size': size,

package/components/select/useImmutable.d.ts

@@ -0,0 +1,4 @@
+export declare function useImmutable(): {
+    immutableValues: import("../../hooks/useState").State<any[]>;
+    isClosable: (key: string) => boolean;
+};

package/components/select/useImmutable.js

@@ -0,0 +1,46 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { useInstance } from 'intact-vue-next';
+import { Option } from './option';
+import { OptionGroup } from './group';
+import { eachChildren, isComponentVNode } from '../utils';
+import { useState } from '../../hooks/useState';
+export function useImmutable() {
+  var instance = useInstance();
+  var immutableValues = useState([]);
+  function setImmutableValues() {
+    var _instance$get = instance.get(),
+      children = _instance$get.children,
+      multiple = _instance$get.multiple;
+    if (!multiple) return;
+    updateImmutableValues(children);
+  }
+  function updateImmutableValues(children) {
+    var _immutableValues = [];
+    var loop = function loop(children) {
+      eachChildren(children, function (vNode) {
+        if (isComponentVNode(vNode, Option)) {
+          var _vNode$props = vNode.props,
+            disabled = _vNode$props.disabled,
+            value = _vNode$props.value;
+          if (disabled) {
+            _immutableValues.push(value);
+          }
+        } else if (isComponentVNode(vNode, OptionGroup)) {
+          loop(vNode.props.children);
+        }
+      });
+    };
+    loop(children);
+    immutableValues.set(_immutableValues);
+  }
+  function isClosable(key) {
+    var _context;
+    return !_includesInstanceProperty(_context = immutableValues.value).call(_context, key);
+  }
+  setImmutableValues();
+  // instance.on('$receive:children', setImmutableValues);
+  return {
+    immutableValues: immutableValues,
+    isClosable: isClosable
+  };
+}

package/components/switch/index.js

@@ -28,7 +28,7 @@ var defaults = function defaults() {
     value: false,
     trueValue: true,
     falseValue: false,
-    size: 'default',
+    size: 'small',
     loading: false
   };
 };

package/components/table/cell.d.ts

@@ -15,6 +15,7 @@ export interface TableCellProps {
     rowspan: number;
     onClickArrow: (e: MouseEvent) => void;
     hasChildren: boolean;
+    loaded: boolean;
 }
 export declare class TableCell extends Component<TableCellProps> {
     static template: string | import('intact-vue-next').Template<any>;

package/components/table/cell.vdt.js

@@ -1,9 +1,10 @@
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn } from 'intact-vue-next';
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn } from 'intact-vue-next';
 import { getClassAndStyleForFixed } from './useFixedColumns';
 import { get, noop } from 'intact-shared';
 import { Button } from '../button';
 import { Icon } from '../icon';
 import { getTextByChildren } from '../utils';
+import { Ellipsis } from '../ellipsis';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
   $blocks || ($blocks = {});
@@ -21,7 +22,8 @@ export default function ($props, $blocks, $__proto__) {
     colspan = _this$get.colspan,
     rowspan = _this$get.rowspan,
     onClickArrow = _this$get.onClickArrow,
-    hasChildren = _this$get.hasChildren;
+    hasChildren = _this$get.hasChildren,
+    loaded = _this$get.loaded;
   var k = this.config.k;
   var blocks = props.$blocks;
   var children = get(data, props.key);
@@ -31,6 +33,11 @@ export default function ($props, $blocks, $__proto__) {
       children = template(noop, [data, rowIndex]);
     }
   }
+  if (props.ellipsis) {
+    children = _$cc(Ellipsis, {
+      'children': children
+    });
+  }
   var _getClassAndStyleForF = getClassAndStyleForFixed(props, offset, k, checkType),
     className = _getClassAndStyleForF.className,
     style = _getClassAndStyleForF.style;
@@ -46,9 +53,12 @@ export default function ($props, $blocks, $__proto__) {
     'size': 'mini',
     'className': _$cn(k + "-table-arrow"),
     'ev-click': onClickArrow,
-    'children': _$cc(Icon, {
+    'children': loaded !== false ? _$cc(Icon, {
       'className': _$cn(k + "-icon-right"),
       'size': 'small'
+    }) : _$cc(Icon, {
+      'className': _$cn(k + "-tree-icon ion-load-c"),
+      'rotate': true
     })
   }) : undefined, children], 0, _$cn(classNameObj), {
     'style': style,

package/components/table/column.d.ts

@@ -14,6 +14,7 @@ export interface TableColumnProps {
     exportCell?: (data: any, index: number) => string;
     minWidth?: number;
     hidden?: boolean;
+    ellipsis?: boolean;
     cols?: number;
     rows?: number;
     prevVNode?: VNodeComponentClass<TableColumn> | null;

package/components/table/column.js

@@ -22,6 +22,7 @@ var typeDefs = {
   exportCell: Function,
   minWidth: Number,
   hidden: Boolean,
+  ellipsis: Boolean,
   // offset: null,
   cols: null,
   rows: null,

package/components/table/row.d.ts

@@ -20,10 +20,11 @@ export interface TableRowProps {
     spreaded: boolean;
     hasChildren: boolean;
     indent: number;
-    onToggleSpreadRow: (key: TableRowKey) => void;
+    onToggleSpreadRow: (key: TableRowKey, rowData?: any) => void;
     onBeforeUnmount: (key: TableRowKey) => void;
     offsetMap: Record<Key, number>;
     animation: boolean;
+    loaded: boolean;
     draggable: boolean;
     draggingKey: TableRowKey | null;
     onRowDragStart: DragCallback;

package/components/table/row.js

@@ -70,8 +70,9 @@ export var TableRow = /*#__PURE__*/function (_Component) {
     e.stopPropagation();
     var _this$get3 = this.get(),
       onToggleSpreadRow = _this$get3.onToggleSpreadRow,
-      key = _this$get3.key;
-    onToggleSpreadRow(key);
+      key = _this$get3.key,
+      data = _this$get3.data;
+    onToggleSpreadRow(key, data);
   };
   _proto.onMouseEnter = function onMouseEnter(e) {
     // for tooltip

package/components/table/row.vdt.js

@@ -33,7 +33,8 @@ export default function ($props, $blocks, $__proto__) {
     offsetMap = _this$get.offsetMap,
     draggable = _this$get.draggable,
     draggingKey = _this$get.draggingKey,
-    animation = _this$get.animation;
+    animation = _this$get.animation,
+    loaded = _this$get.loaded;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-checked"] = checked, _classNameObj[k + "-selected"] = selected, _classNameObj[k + "-spreaded"] = spreaded, _classNameObj[k + "-dragging"] = draggingKey === key, _classNameObj[className] = className, _classNameObj);
   var getGridItem = function getGridItem(columnIndex) {
@@ -82,6 +83,7 @@ export default function ($props, $blocks, $__proto__) {
       'columnIndex': columnIndex,
       'rowIndex': rowIndex,
       'data': data,
+      'loaded': loaded,
       'offset': offsetMap[columnKey],
       'checkType': checkType,
       'indent': indent,

package/components/table/styles.js

@@ -90,7 +90,7 @@ setDefault(function () {
   makeGroupMenuStyles == null || makeGroupMenuStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
   }), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}}");
 });