@king-design/vue 3.4.3-beta.1 → 3.4.3-beta.2

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-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, ";}}}");
+  }), "&.", 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-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,45 @@
+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);
+  }
+  instance.on('$receive:children', setImmutableValues);
+  return {
+    immutableValues: immutableValues,
+    isClosable: isClosable
+  };
+}

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.4.3-beta.1
+ * @king-design v3.4.3-beta.2
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -64,7 +64,7 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/view';
 export * from './components/wave';
-export declare const version = "3.4.3-beta.1";
+export declare const version = "3.4.3-beta.2";
 
 
 export {normalize} from 'intact-vue-next';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.4.3-beta.1
+ * @king-design v3.4.3-beta.2
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -65,7 +65,7 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/view';
 export * from './components/wave';
-export var version = '3.4.3-beta.1';
+export var version = '3.4.3-beta.2';
 /* generate end */
 
 export {normalize} from 'intact-vue-next';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/vue",
-  "version": "3.4.3-beta.1",
+  "version": "3.4.3-beta.2",
   "description": "King-Design UI components for Vue3.0.",
   "keywords": [
     "component",