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

package/components/menu/styles.ts

@@ -276,6 +276,9 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
             .${k}-menu-header {
                 padding: 0;
             }
+            .${k}-menu-header {
+                padding: 0;
+            }
             .${k}-menu-body {
                 overflow: hidden;
                 padding: 0;

package/components/select/base.ts

@@ -19,6 +19,7 @@ import {useFocusout} from './useFocusout';
 import type {Events} from '../types';
 import {isNullOrUndefined} from 'intact-shared';
 import { useDraggable } from './useDraggble';
+import { useImmutable } from './useImmutable';
 import { useConfigContext } from '../config';
 
 export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach = V | null> {
@@ -107,6 +108,7 @@ export abstract class BaseSelect<
     public input = useInput(this.resetKeywords);
     private focusout = useFocusout();
     private draggable = useDraggable();
+    public immutable = useImmutable();
     protected config = useConfigContext();
 
     init() {
@@ -160,7 +162,10 @@ export abstract class BaseSelect<
     @bind
     protected clear(e: MouseEvent) {
         e.stopPropagation();
-        this.set('value', this.get('multiple') ? [] : null);
+        const {value, multiple} = this.get();
+        const immutableValues = this.immutable.immutableValues.value;
+
+        this.set('value', multiple ? (Array.isArray(value) ? value.filter(key => immutableValues.includes(key)) : []) : null);
     }
 
     @bind

package/components/select/base.vdt

@@ -39,6 +39,7 @@ const label = this.getLabel();
 const hasValue = this.hasValue();
 const {onInput, inputRef, keywords: {value: keywords}} = this.input;
 const {onFocusout, triggerRef} = this.focusout;
+const {isClosable} = this.immutable;
 const filterInput = <Input v-if={filterable}
     class={`${k}-select-input`}
     value={keywords}
@@ -122,7 +123,7 @@ const filterInput = <Input v-if={filterable}
                                                         value[$key] :
                                                         $key
                                             }
-                                            closable
+                                            closable={isClosable(value[$key])}
                                             ev-close={this.delete.bind(this, $key)}
                                             disabled={disabled}
                                             size={size}

package/components/select/demos/immutable.md

@@ -0,0 +1,37 @@
+---
+title: 禁用选项不可删除
+order: 14
+---
+
+在指定`multiple`多选的情况下，`Select`指定`value`包含`disabled Option`，则禁止删除
+
+```vdt
+import {Select, Option, OptionGroup} from 'kpc';
+<div>
+    <Select v-model="day" multiple filterable clearable>
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday" disabled>星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday" disabled>星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
+    You selected: {JSON.stringify(this.get('day'))} 
+</div>
+```
+
+```ts
+interface Props {
+   day?: string[]
+}
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            day: ['Tuesday', 'Sunday', 'Wednesday'],
+        } as Props;
+    }
+}
+```

package/components/select/useImmutable.ts

@@ -0,0 +1,44 @@
+import { useInstance, Children } from 'intact';
+import type { Select } from './select';
+import { Option, OptionProps } from './option';
+import { OptionGroup } from './group';
+import { eachChildren, isComponentVNode } from '../utils';
+import { useState } from '../../hooks/useState';
+
+export function useImmutable() {
+    const instance = useInstance() as Select<any, true>;
+    const immutableValues = useState<any[]>([]);
+
+    function setImmutableValues() {
+        const { children, multiple } = instance.get();
+        if (!multiple) return;
+        updateImmutableValues(children);
+    }
+
+    function updateImmutableValues(children: Children) {
+        const _immutableValues: any[] = [];
+        const loop = (children: Children) => {
+            eachChildren(children, vNode => {
+                if (isComponentVNode(vNode, Option)) {
+                    const { disabled, value } = vNode.props as OptionProps;
+                    if (disabled) {
+                        _immutableValues.push(value);
+                    }
+                } else if (isComponentVNode(vNode, OptionGroup)) {
+                    loop(vNode.props!.children);
+                }
+            });
+        }
+
+        loop(children);
+        immutableValues.set(_immutableValues);
+    }
+
+    function isClosable(key: string) {
+        return !immutableValues.value.includes(key);
+    }
+
+    instance.on('$receive:children', setImmutableValues);
+
+    return { immutableValues, isClosable };
+}

package/es/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/es/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/es/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';
 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/es/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/es/components/select/useImmutable.d.ts

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

package/es/components/select/useImmutable.js

@@ -0,0 +1,45 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { useInstance } from 'intact';
+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/es/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,4 +64,4 @@ 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";

package/es/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,5 +65,5 @@ 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 */

package/es/site/data/components/select/demos/immutable/index.d.ts

@@ -0,0 +1,9 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+interface Props {
+    day?: string[];
+}
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+    static defaults(): Props;
+}

package/es/site/data/components/select/demos/immutable/index.js

@@ -0,0 +1,18 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+  default_1.defaults = function defaults() {
+    return {
+      day: ['Tuesday', 'Sunday', 'Wednesday']
+    };
+  };
+  return default_1;
+}(Component);
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/select/demos/immutable/react.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    day?: string[];
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: Props;
+    render(): React.JSX.Element;
+}
+export {};

package/es/site/data/components/select/demos/immutable/react.js

@@ -0,0 +1,53 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
+import React from 'react';
+import { Select, Option } from '@king-design/react';
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+  function Demo() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      day: ['Tuesday', 'Sunday', 'Wednesday']
+    };
+    return _this;
+  }
+  var _proto = Demo.prototype;
+  _proto.render = function render() {
+    var _this2 = this;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
+      value: this.state.day,
+      onChangeValue: function onChangeValue(day) {
+        return _this2.setState({
+          day: day
+        });
+      },
+      multiple: true,
+      filterable: true,
+      clearable: true
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday",
+      disabled: true
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday",
+      disabled: true
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), "You selected: ", _JSON$stringify(this.state.day));
+  };
+  return Demo;
+}(React.Component);
+export { Demo as default };

package/index.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
@@ -69,6 +69,6 @@ export * from './components/upload';
 export * from './components/view';
 export * from './components/wave';
 
-export const version = '3.4.3-beta.1';
+export const version = '3.4.3-beta.2';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "3.4.3-beta.1",
+  "version": "3.4.3-beta.2",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "engines": {