bkui-vue 2.0.1-beta.3 → 2.0.1-beta.30

package/lib/cascader/index.js

@@ -535,6 +535,7 @@ function useDebouncedRef(value) {
         track();
         return innerValue;
       },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       set: function set(newValue) {
         clearTimeout(timeout);
         if (newValue === undefined || newValue === '') {
@@ -883,6 +884,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
     var t = (0,config_provider_namespaceObject.useLocale)('cascader');
+    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
     var store = props.store;
     var menus = (0,external_vue_namespaceObject.reactive)({
       list: [props.store.getNodes()]
@@ -1031,9 +1034,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     };
     var iconRender = function iconRender(node) {
       return node.loading ? (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Spinner, {
-        "class": "icon-spinner"
+        "class": resolveClassName('icon-spinner')
       }, null) : (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleRight, {
-        "class": "icon-angle-right"
+        "class": resolveClassName('icon-angle-right')
       }, null);
     };
     (0,external_vue_namespaceObject.watch)(function () {
@@ -1048,8 +1051,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }, function (value) {
       menus.list = [value.getNodes()];
     });
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix.resolveClassName;
     return {
       menus: menus,
       activePath: activePath,
@@ -1074,11 +1075,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     var emptyWidth = parseInt(this.panelWidth, 10) > 200 ? this.panelWidth : "".concat(200, "px");
     var searchPanelRender = function searchPanelRender() {
       return _this.suggestions.length ? (0,external_vue_namespaceObject.createVNode)("ul", {
-        "class": [_this.resolveClassName('cascader-panel'), _this.resolveClassName('scroll-y')],
         "style": {
           height: _this.panelHeight,
           width: _this.panelWidth
-        }
+        },
+        "class": [_this.resolveClassName('cascader-panel'), _this.resolveClassName('scroll-y')]
       }, [_this.suggestions.map(function (node) {
         return (0,external_vue_namespaceObject.createVNode)("li", (0,external_vue_namespaceObject.mergeProps)({
           "class": [_this.resolveClassName('cascader-node'), {
@@ -1090,21 +1091,21 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
           }]
         }, _this.searchPanelEvents(node)), [node.pathNames.join(_this.separator)]);
       })]) : (0,external_vue_namespaceObject.createVNode)("div", {
-        "class": _this.resolveClassName('cascader-search-empty'),
         "style": {
           width: emptyWidth
-        }
+        },
+        "class": _this.resolveClassName('cascader-search-empty')
       }, [(0,external_vue_namespaceObject.createVNode)("span", null, [_this.noDataText])]);
     };
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "class": this.resolveClassName('cascader-panel-wrapper')
     }, [this.isFiltering ? searchPanelRender() : this.menus.list.map(function (menu) {
       return (0,external_vue_namespaceObject.createVNode)("ul", {
-        "class": [_this.resolveClassName('cascader-panel'), _this.resolveClassName('scroll-y')],
         "style": {
           height: _this.panelHeight,
           width: _this.panelWidth
-        }
+        },
+        "class": [_this.resolveClassName('cascader-panel'), _this.resolveClassName('scroll-y')]
       }, [menu.length ? menu.map(function (node) {
         var _this$$slots$default, _this$$slots;
         return (0,external_vue_namespaceObject.createVNode)("li", (0,external_vue_namespaceObject.mergeProps)({
@@ -1116,13 +1117,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
             'is-checked': !node.config.multiple && _this.isCheckedNode(node, _this.checkValue)
           }]
         }, Object.assign(_this.nodeEvent(node), node.config.multiple ? {} : {})), [node.config.multiple && (0,external_vue_namespaceObject.createVNode)(checkbox_namespaceObject["default"], {
-          "disabled": node.isDisabled,
+          "style": "margin-right: 5px",
           "modelValue": node.checked,
           "onUpdate:modelValue": function onUpdateModelValue($event) {
             return node.checked = $event;
           },
+          "disabled": node.isDisabled,
           "indeterminate": node.isIndeterminate,
-          "style": "margin-right: 5px",
           "onChange": function onChange(val) {
             return _this.checkNode(node, !!val);
           }
@@ -1423,7 +1424,6 @@ var flatNodes = function flatNodes(data, leafOnly) {
       acc.push(node);
     } else {
       !leafOnly && acc.push(node);
-      // eslint-disable-next-line no-param-reassign
       acc = acc.concat(flatNodes(node.children, leafOnly));
     }
     return acc;
@@ -1923,11 +1923,11 @@ var Store = /*#__PURE__*/function () {
         var isOverflow = !_this.isCollapse && _this.overflowTagIndex !== null && index >= _this.overflowTagIndex;
         // 根据tag是否超出显示范围，来决定是否渲染
         return (0,external_vue_namespaceObject.createVNode)("span", {
-          "class": "tag-item",
+          "key": tag,
           "style": {
             display: isOverflow ? 'none' : ''
           },
-          "key": tag
+          "class": "tag-item"
         }, [(0,external_vue_namespaceObject.createVNode)("span", {
           "class": "tag-item-name"
         }, [tag]), (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, {
@@ -1954,17 +1954,17 @@ var Store = /*#__PURE__*/function () {
     // 定义popoverRender函数，用于渲染弹出框
     var popoverRender = function popoverRender() {
       return (0,external_vue_namespaceObject.createVNode)(popover_namespaceObject["default"], {
-        "placement": "bottom-start",
-        "theme": "light ".concat(_this.resolveClassName('cascader-popover')),
-        "trigger": "click",
+        "ref": "popover",
+        "class": _this.resolveClassName('cascader-popover-wrapper'),
         "arrow": false,
+        "boundary": "body",
         "disabled": _this.disabled,
         "offset": 4,
-        "class": _this.resolveClassName('cascader-popover-wrapper'),
-        "ref": "popover",
+        "placement": "bottom-start",
+        "theme": "light ".concat(_this.resolveClassName('cascader-popover')),
+        "trigger": "click",
         "onAfterHidden": _this.popoverChangeEmitter,
-        "onAfterShow": _this.popoverChangeEmitter,
-        "boundary": "body"
+        "onAfterShow": _this.popoverChangeEmitter
       }, {
         "default": function _default() {
           return _this.$slots.trigger ? _this.$slots.trigger({
@@ -1973,34 +1973,34 @@ var Store = /*#__PURE__*/function () {
           }) : (0,external_vue_namespaceObject.createVNode)("div", {
             "class": [_this.resolveClassName('cascader-name'), _this.resolveClassName('scroll-y')]
           }, [_this.multiple && _this.selectedTags.length > 0 && renderTags(), _this.filterable ? (_this.isCollapse || _this.selectedTags.length === 0) && (0,external_vue_namespaceObject.createVNode)("input", {
+            "ref": "inputRef",
             "class": [_this.resolveClassName('cascader-search-input'), {
               'is-disabled': _this.disabled
             }],
-            "type": "text",
-            "onInput": _this.searchInputHandler,
-            "onBlur": _this.searchBlueHandler,
+            "disabled": _this.disabled,
             "placeholder": _this.calcuPlaceholder,
+            "type": "text",
             "value": _this.searchKey,
-            "disabled": _this.disabled,
-            "ref": "inputRef"
+            "onBlur": _this.searchBlueHandler,
+            "onInput": _this.searchInputHandler
           }, null) : textRender()]);
         },
         content: function content() {
           return (0,external_vue_namespaceObject.createVNode)("div", {
             "class": _this.resolveClassName('cascader-popover')
           }, [(0,external_vue_namespaceObject.createVNode)(cascader_panel, {
-            "store": _this.store,
             "ref": "cascaderPanel",
             "width": _this.scrollWidth,
             "height": _this.scrollHeight,
-            "search-key": _this.searchKey,
-            "separator": _this.separator,
-            "is-filtering": _this.isFiltering,
-            "suggestions": _this.suggestions,
             "modelValue": _this.checkedValue,
             "onUpdate:modelValue": function onUpdateModelValue($event) {
               return _this.checkedValue = $event;
-            }
+            },
+            "is-filtering": _this.isFiltering,
+            "search-key": _this.searchKey,
+            "separator": _this.separator,
+            "store": _this.store,
+            "suggestions": _this.suggestions
           }, {
             "default": function _default(scope) {
               return _this.$slots["default"] ? _this.$slots["default"](scope) : (0,external_vue_namespaceObject.createVNode)("span", {
@@ -2014,6 +2014,7 @@ var Store = /*#__PURE__*/function () {
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "class": [this.resolveClassName('cascader-wrapper'), this.floatMode ? 'float-mode' : '']
     }, [this.$slots.trigger ? popoverRender() : (0,external_vue_namespaceObject.createVNode)("div", {
+      "ref": "bkCascaderRef",
       "class": [this.resolveClassName('cascader'), this.extCls, {
         'is-unselected': this.modelValue.length === 0,
         'is-hover': this.isHover,
@@ -2022,11 +2023,10 @@ var Store = /*#__PURE__*/function () {
         'is-disabled': this.disabled,
         'is-simplicity': this.behavior === 'simplicity'
       }],
-      "tabindex": "0",
       "data-placeholder": this.calcuPlaceholder,
+      "tabindex": "0",
       "onMouseenter": this.setHover,
-      "onMouseleave": this.cancelHover,
-      "ref": "bkCascaderRef"
+      "onMouseleave": this.cancelHover
     }, [suffixIcon(), popoverRender()])]);
   }
 }));

package/lib/cascader/interface.d.ts

@@ -9,7 +9,7 @@ export interface INodeConfig {
 }
 export interface INode {
     checked: boolean;
-    children?: null[] | null;
+    children?: null | null[];
     config: IConfig;
     data: IData;
     leaf: boolean;

package/lib/checkbox/checkbox-group.d.ts

@@ -1,10 +1,5 @@
 import type { ExtractPropTypes } from 'vue';
 declare const checkboxGroupProps: {
-    name: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
     modelValue: import("vue-types").VueTypeValidableDef<unknown[]> & {
         default: () => unknown[];
     };
@@ -19,11 +14,6 @@ declare const checkboxGroupProps: {
 };
 export type CheckboxGroupProps = Readonly<ExtractPropTypes<typeof checkboxGroupProps>>;
 declare const _default: import("vue").DefineComponent<{
-    name: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
     modelValue: import("vue-types").VueTypeValidableDef<unknown[]> & {
         default: () => unknown[];
     };
@@ -41,11 +31,6 @@ declare const _default: import("vue").DefineComponent<{
     'update:modelValue': (value: any[]) => boolean;
     change: (value: any[]) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
-    name: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
     modelValue: import("vue-types").VueTypeValidableDef<unknown[]> & {
         default: () => unknown[];
     };
@@ -61,7 +46,6 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: (value: any[]) => any;
     "onUpdate:modelValue"?: (value: any[]) => any;
 }, {
-    name: string;
     disabled: boolean;
     modelValue: unknown[];
     withValidate: boolean;

package/lib/checkbox/checkbox.css

@@ -1,3 +1,133 @@
+:root {
+  --bk-prefix: bk;
+  --popover-max-height: 216px;
+  --primary-color: #3a84ff;
+  --success-color: #2dcb56;
+  --warning-color: #ff9c01;
+  --danger-color: #ea3636;
+  --default-color: #63656e;
+  --gray-color: #979ba5;
+  --light-gray: #c4c6cc;
+  --white-color: white;
+  --whitesmoke-color: #fafbfd;
+  --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 8px;
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #3a84ff;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6cc;
+  --radio-disabled-checked-bg: #a3c5fd;
+  --radio-button-checked-bg: #e1ecff;
+  --radio-button-disabled-checked-bg: #fafbfd;
+  --checkbox-disabled-checked-bg: #a3c5fd;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --link-success-disabled-color: #94f5a4;
+  --link-warning-disabled-color: #ffd695;
+  --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-strip-color: #fafbfd;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #63656e;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #f5f7fa;
+  --cascader-panel-active: #e1ecff;
+  --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
+  --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
+}
 .bk-checkbox-group {
   display: inline-flex;
   letter-spacing: normal;
@@ -16,8 +146,8 @@
   margin-left: 24px;
 }
 .bk-checkbox.is-checked .bk-checkbox-input {
-  background: #3a84ff;
-  border-color: #3a84ff;
+  background: var(--primary-color);
+  border-color: var(--primary-color);
   transition: all 0.1s;
 }
 .bk-checkbox.is-checked .bk-checkbox-input.small::after {
@@ -38,8 +168,8 @@
   transform-origin: center;
 }
 .bk-checkbox.is-indeterminated .bk-checkbox-input {
-  background: #3a84ff;
-  border-color: #3a84ff;
+  background: var(--primary-color);
+  border-color: var(--primary-color);
   transition: all 0.1s;
 }
 .bk-checkbox.is-indeterminated .bk-checkbox-input.small::after {
@@ -64,17 +194,17 @@
 }
 .bk-checkbox.is-disabled .bk-checkbox-input {
   background: #fafbfd;
-  border-color: #dcdee5;
+  border-color: var(--disable-color);
 }
 .bk-checkbox.is-disabled .bk-checkbox-input::after {
-  background: #dcdee5;
+  background: var(--disable-color);
 }
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
-  background: #a3c5fd;
-  border-color: #a3c5fd;
+  background: var(--checkbox-disabled-checked-bg);
+  border-color: var(--checkbox-disabled-checked-bg);
 }
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
-  background: #a3c5fd;
+  background: var(--checkbox-disabled-checked-bg);
 }
 .bk-checkbox.is-prechecking {
   position: relative;

package/lib/checkbox/checkbox.d.ts

@@ -21,8 +21,8 @@ export declare const checkboxProps: {
     indeterminate: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
+    beforeChange: import("vue-types").VueTypeValidableDef<(event: boolean | number | string) => Promise<boolean> | boolean> & {
+        default: (event: boolean | number | string) => Promise<boolean> | boolean;
     };
     size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
         default: "default" | "small" | "large" | "huge";
@@ -56,8 +56,8 @@ declare const _default: import("vue").DefineComponent<{
     indeterminate: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
+    beforeChange: import("vue-types").VueTypeValidableDef<(event: string | number | boolean) => boolean | Promise<boolean>> & {
+        default: (event: string | number | boolean) => boolean | Promise<boolean>;
     };
     size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
         default: "default" | "small" | "large" | "huge";
@@ -105,8 +105,8 @@ declare const _default: import("vue").DefineComponent<{
     indeterminate: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
+    beforeChange: import("vue-types").VueTypeValidableDef<(event: string | number | boolean) => boolean | Promise<boolean>> & {
+        default: (event: string | number | boolean) => boolean | Promise<boolean>;
     };
     size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
         default: "default" | "small" | "large" | "huge";
@@ -127,7 +127,7 @@ declare const _default: import("vue").DefineComponent<{
     falseLabel: string | number | boolean;
     checked: boolean;
     indeterminate: boolean;
-    beforeChange: (...args: any[]) => any;
+    beforeChange: (event: string | number | boolean) => boolean | Promise<boolean>;
     immediateEmitChange: boolean;
 }, {}>;
 export default _default;