bkui-vue 0.0.2-table-refactor.9 → 0.0.3-beta.2

package/lib/tag/index.d.ts

@@ -4,7 +4,6 @@ declare const BkTag: {
         $data: {};
         $props: {
             type?: "" | "stroke" | "filled";
-            extCls?: string;
             theme?: "" | "info" | "success" | "warning" | "danger";
             closable?: boolean;
             radius?: string;
@@ -55,6 +54,7 @@ declare const BkTag: {
             }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
                 [key: string]: any;
             }>) => void)[];
+            readonly size?: "default" | "small" | "large" | "huge";
             onClose?: (...args: any[]) => any;
         };
         $attrs: {
@@ -98,16 +98,11 @@ declare const BkTag: {
             } & {
                 default: string;
             };
-            extCls: import("vue-types").VueTypeValidableDef<string> & {
-                default: string;
-            } & {
-                default: string;
-            };
+            size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
         }>> & {
             onChange?: (...args: any[]) => any;
             onClose?: (...args: any[]) => any;
         }, {
-            wrapperCls: import("vue").ComputedRef<string>;
             wrapperStyle: import("vue").ComputedRef<{
                 borderRadius: string;
             }>;
@@ -116,7 +111,6 @@ declare const BkTag: {
             resolveClassName: (cls: string) => string;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], string, {
             type: "" | "stroke" | "filled";
-            extCls: string;
             theme: "" | "info" | "success" | "warning" | "danger";
             closable: boolean;
             radius: string;
@@ -172,16 +166,11 @@ declare const BkTag: {
         } & {
             default: string;
         };
-        extCls: import("vue-types").VueTypeValidableDef<string> & {
-            default: string;
-        } & {
-            default: string;
-        };
+        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     }>> & {
         onChange?: (...args: any[]) => any;
         onClose?: (...args: any[]) => any;
     } & import("vue").ShallowUnwrapRef<{
-        wrapperCls: import("vue").ComputedRef<string>;
         wrapperStyle: import("vue").ComputedRef<{
             borderRadius: string;
         }>;
@@ -219,16 +208,11 @@ declare const BkTag: {
     } & {
         default: string;
     };
-    extCls: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
 }>> & {
     onChange?: (...args: any[]) => any;
     onClose?: (...args: any[]) => any;
 }, {
-    wrapperCls: import("vue").ComputedRef<string>;
     wrapperStyle: import("vue").ComputedRef<{
         borderRadius: string;
     }>;
@@ -237,7 +221,6 @@ declare const BkTag: {
     resolveClassName: (cls: string) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], "change" | "close", {
     type: "" | "stroke" | "filled";
-    extCls: string;
     theme: "" | "info" | "success" | "warning" | "danger";
     closable: boolean;
     radius: string;

package/lib/tag/index.js

@@ -1 +1,229 @@
-import*as e from"../shared";import*as t from"vue";import*as o from"vue-types";import*as r from"../config-provider";import*as a from"../icon";var n={d:(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},s={};n.d(s,{Z:()=>b});const c=(l={PropTypes:()=>e.PropTypes,TagThemeType:()=>e.TagThemeType,classes:()=>e.classes,withInstall:()=>e.withInstall},i={},n.d(i,l),i);var l,i;function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function u(e,t,o){return(t=function(e){var t=function(e,t){if("object"!==p(e)||null===e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var r=o.call(e,"string");if("object"!==p(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===p(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}const f=(e=>{var t={};return n.d(t,e),t})({computed:()=>t.computed,createVNode:()=>t.createVNode,defineComponent:()=>t.defineComponent}),d=(e=>{var t={};return n.d(t,e),t})({toType:()=>o.toType}),m=(e=>{var t={};return n.d(t,e),t})({usePrefix:()=>r.usePrefix}),y=(e=>{var t={};return n.d(t,e),t})({Error:()=>a.Error});var h;!function(e){e.UNKNOWN="",e.FILLED="filled",e.STROKE="stroke"}(h||(h={}));const v=(0,f.defineComponent)({name:"Tag",props:{theme:(0,c.TagThemeType)().def(""),closable:c.PropTypes.bool.def(!1),type:(0,d.toType)("tagStorkeType",{}).def(h.UNKNOWN),checkable:c.PropTypes.bool.def(!1),checked:c.PropTypes.bool.def(!1),radius:c.PropTypes.string.def("2px"),extCls:c.PropTypes.string.def("")},emits:["change","close"],slots:Object,setup:function(e,t){var o=t.emit,r=(0,m.usePrefix)().resolveClassName;return{wrapperCls:(0,f.computed)((function(){var t;return(0,c.classes)((u(t={},"".concat(r("tag-closable")),e.closable),u(t,"".concat(r("tag-checkable")),e.checkable),u(t,"".concat(r("tag-check")),e.checked),u(t,"".concat(r("tag-".concat(e.type))),e.type),u(t,"".concat(r("tag-".concat(e.theme))),e.theme),u(t,e.extCls,!!e.extCls),t),r("tag"))})),wrapperStyle:(0,f.computed)((function(){return{borderRadius:e.radius}})),handleClose:function(e){e.preventDefault(),e.stopPropagation(),o("close",e)},handleClick:function(t){t.preventDefault(),t.stopPropagation(),e.checkable&&o("change",!e.checked)},resolveClassName:r}},render:function(){var e,t;return(0,f.createVNode)("div",{class:this.wrapperCls,style:this.wrapperStyle,onClick:this.handleClick},[this.$slots.icon?(0,f.createVNode)("span",{class:"".concat(this.resolveClassName("tag-icon"))},[this.$slots.icon()]):"",(0,f.createVNode)("span",{class:"".concat(this.resolveClassName("tag-text"))},[null===(t=(e=this.$slots).default)||void 0===t?void 0:t.call(e)]),this.closable?(0,f.createVNode)(y.Error,{class:"".concat(this.resolveClassName("tag-close")),onClick:this.handleClose},null):""])}}),b=(0,c.withInstall)(v);var g=s.Z;export{g as default};
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
+import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
+import * as __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__ from "../icon";
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  Z: () => (/* binding */ src)
+});
+
+;// CONCATENATED MODULE: external "../shared"
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["TagThemeType"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.TagThemeType, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstall });
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
+
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+;// CONCATENATED MODULE: external "vue"
+var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_y = x => () => x
+const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent });
+;// CONCATENATED MODULE: external "vue-types"
+var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_types_y = x => () => x
+const external_vue_types_namespaceObject = external_vue_types_x({ ["toType"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.toType });
+;// CONCATENATED MODULE: external "../config-provider"
+var external_config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_config_provider_y = x => () => x
+const external_config_provider_namespaceObject = external_config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__.usePrefix });
+;// CONCATENATED MODULE: external "../icon"
+var external_icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_icon_y = x => () => x
+const external_icon_namespaceObject = external_icon_x({ ["Error"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Error });
+;// CONCATENATED MODULE: ../../packages/tag/src/tag.tsx
+
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+
+
+var TagStrokeType;
+(function (TagStrokeType) {
+  TagStrokeType["UNKNOWN"] = "";
+  TagStrokeType["FILLED"] = "filled";
+  TagStrokeType["STROKE"] = "stroke";
+})(TagStrokeType || (TagStrokeType = {}));
+/* harmony default export */ const tag = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'Tag',
+  props: {
+    theme: (0,external_shared_namespaceObject.TagThemeType)().def(''),
+    closable: external_shared_namespaceObject.PropTypes.bool.def(false),
+    type: (0,external_vue_types_namespaceObject.toType)('tagStorkeType', {}).def(TagStrokeType.UNKNOWN),
+    checkable: external_shared_namespaceObject.PropTypes.bool.def(false),
+    checked: external_shared_namespaceObject.PropTypes.bool.def(false),
+    radius: external_shared_namespaceObject.PropTypes.string.def('2px'),
+    size: external_shared_namespaceObject.PropTypes.size()
+  },
+  emits: ['change', 'close'],
+  // slots: ['icon'],
+  slots: Object,
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    var wrapperStyle = (0,external_vue_namespaceObject.computed)(function () {
+      return {
+        borderRadius: props.radius
+      };
+    });
+    var handleClose = function handleClose(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      emit('close', e);
+    };
+    var handleClick = function handleClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (props.checkable) {
+        emit('change', !props.checked);
+      }
+    };
+    return {
+      wrapperStyle: wrapperStyle,
+      handleClose: handleClose,
+      handleClick: handleClick,
+      resolveClassName: resolveClassName
+    };
+  },
+  render: function render() {
+    var _classes, _this$$slots$default, _this$$slots;
+    var classes = (_classes = {}, _defineProperty(_classes, this.resolveClassName('tag'), true), _defineProperty(_classes, this.resolveClassName('tag-closable'), this.closable), _defineProperty(_classes, this.resolveClassName('tag-checkable'), this.checkable), _defineProperty(_classes, this.resolveClassName('tag-check'), this.checked), _defineProperty(_classes, this.resolveClassName("tag-".concat(this.type)), this.type), _defineProperty(_classes, this.resolveClassName("tag-".concat(this.theme)), this.theme), _defineProperty(_classes, this.resolveClassName("tag--".concat(this.size)), true), _classes);
+    return (0,external_vue_namespaceObject.createVNode)("div", {
+      "class": classes,
+      "style": this.wrapperStyle,
+      "onClick": this.handleClick
+    }, [this.$slots.icon ? (0,external_vue_namespaceObject.createVNode)("span", {
+      "class": "".concat(this.resolveClassName('tag-icon'))
+    }, [this.$slots.icon()]) : '', (0,external_vue_namespaceObject.createVNode)("span", {
+      "class": "".concat(this.resolveClassName('tag-text'))
+    }, [(_this$$slots$default = (_this$$slots = this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)]), this.closable && (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Error, {
+      "class": "".concat(this.resolveClassName('tag-close')),
+      "onClick": this.handleClose
+    }, null)]);
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/tag/src/index.tsx
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+var BkTag = (0,external_shared_namespaceObject.withInstall)(tag);
+/* harmony default export */ const src = (BkTag);
+var __webpack_exports__default = __webpack_exports__.Z;
+export { __webpack_exports__default as default };

package/lib/tag/tag.css

@@ -3,7 +3,6 @@
   align-items: center;
   height: 22px;
   padding: 0 10px;
-  margin: 2px 6px 2px 0px;
   font-size: 12px;
   line-height: 22px;
   color: #63656e;
@@ -84,12 +83,6 @@
   border-style: solid;
   border-width: 1px;
 }
-.bk-tag.bk-tag-stroke :not(.bk-tag-success):not(.bk-tag-warning):not(.bk-tag-info):not(.bk-tag-danger) {
-  background-color: #FAFBFD;
-}
-.bk-tag.bk-tag-stroke :not(.bk-tag-success):not(.bk-tag-warning):not(.bk-tag-info):not(.bk-tag-danger):hover {
-  background-color: #F0F1F5;
-}
 .bk-tag.bk-tag-closable {
   padding: 0 4px 0 10px;
 }
@@ -109,19 +102,30 @@
   background: #3a84ff;
   opacity: 1;
 }
-.bk-tag .bk-tag-text {
+.bk-tag--defaul {
+  padding: 0 8px;
+}
+.bk-tag--small {
+  height: 16px;
+  padding: 0 4px;
+  line-height: 16px;
+}
+.bk-tag--small .bk-tag-text {
+  font-size: 10px;
+}
+.bk-tag-text {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-tag .bk-tag-icon {
+.bk-tag-icon {
   flex-shrink: 0;
   margin-right: 4px;
   font-size: 14px;
   line-height: 0;
 }
-.bk-tag .bk-tag-close {
+.bk-tag-close {
   flex-shrink: 0;
   margin-left: 4px;
   font-size: 12px;

package/lib/tag/tag.d.ts

@@ -26,13 +26,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: string;
     };
-    extCls: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
 }, {
-    wrapperCls: import("vue").ComputedRef<string>;
     wrapperStyle: import("vue").ComputedRef<{
         borderRadius: string;
     }>;
@@ -66,17 +61,12 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: string;
     };
-    extCls: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
 }>> & {
     onChange?: (...args: any[]) => any;
     onClose?: (...args: any[]) => any;
 }, {
     type: "" | "stroke" | "filled";
-    extCls: string;
     theme: "" | "info" | "success" | "warning" | "danger";
     closable: boolean;
     radius: string;

package/lib/tag/tag.less

@@ -41,7 +41,6 @@
   align-items: center;
   height: 22px;
   padding: 0 10px;
-  margin: 2px 6px 2px 0px;
   font-size: 12px;
   line-height: 22px;
   color: @default-color;
@@ -91,15 +90,6 @@
     line-height: 20px;
     border-style: solid;
     border-width: 1px;
-
-    // &:not(.bk-tag-success, .bk-tag-warning, .bk-tag-info, .bk-tag-danger) {
-    :not(.@{bk-prefix}-tag-success):not(.@{bk-prefix}-tag-warning):not(.@{bk-prefix}-tag-info):not(.@{bk-prefix}-tag-danger) {
-      background-color: @tag-stroke-bg-color;
-
-      &:hover {
-        background-color: @tag-stroke-hover-bg-color;
-      }
-    }
   }
 
   &.@{bk-prefix}-tag-closable {
@@ -125,26 +115,40 @@
       opacity: 1;
     }
   }
+}
+
+.@{bk-prefix}-tag--defaul {
+  padding: 0 8px;
+}
+
+.@{bk-prefix}-tag--small {
+  height: 16px;
+  padding: 0 4px;
+  line-height: 16px;
 
   .@{bk-prefix}-tag-text {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    font-size: 10px;
   }
+}
 
-  .@{bk-prefix}-tag-icon {
-    flex-shrink: 0;
-    margin-right: 4px;
-    font-size: 14px;
-    line-height: 0;
-  }
+.@{bk-prefix}-tag-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  .@{bk-prefix}-tag-close {
-    flex-shrink: 0;
-    margin-left: 4px;
-    font-size: 12px;
-    line-height: 0;
-    cursor: pointer;
-  }
+.@{bk-prefix}-tag-icon {
+  flex-shrink: 0;
+  margin-right: 4px;
+  font-size: 14px;
+  line-height: 0;
+}
+
+.@{bk-prefix}-tag-close {
+  flex-shrink: 0;
+  margin-left: 4px;
+  font-size: 12px;
+  line-height: 0;
+  cursor: pointer;
 }

package/lib/tag/tag.variable.css

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --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;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;
@@ -125,7 +129,6 @@
   align-items: center;
   height: 22px;
   padding: 0 10px;
-  margin: 2px 6px 2px 0px;
   font-size: 12px;
   line-height: 22px;
   color: var(--default-color);
@@ -206,12 +209,6 @@
   border-style: solid;
   border-width: 1px;
 }
-.bk-tag.bk-tag-stroke :not(.bk-tag-success):not(.bk-tag-warning):not(.bk-tag-info):not(.bk-tag-danger) {
-  background-color: #FAFBFD;
-}
-.bk-tag.bk-tag-stroke :not(.bk-tag-success):not(.bk-tag-warning):not(.bk-tag-info):not(.bk-tag-danger):hover {
-  background-color: #F0F1F5;
-}
 .bk-tag.bk-tag-closable {
   padding: 0 4px 0 10px;
 }
@@ -231,19 +228,30 @@
   background: var(--primary-color);
   opacity: 1;
 }
-.bk-tag .bk-tag-text {
+.bk-tag--defaul {
+  padding: 0 8px;
+}
+.bk-tag--small {
+  height: 16px;
+  padding: 0 4px;
+  line-height: 16px;
+}
+.bk-tag--small .bk-tag-text {
+  font-size: 10px;
+}
+.bk-tag-text {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-tag .bk-tag-icon {
+.bk-tag-icon {
   flex-shrink: 0;
   margin-right: 4px;
   font-size: 14px;
   line-height: 0;
 }
-.bk-tag .bk-tag-close {
+.bk-tag-close {
   flex-shrink: 0;
   margin-left: 4px;
   font-size: 12px;

package/lib/tag-input/index.d.ts

@@ -417,6 +417,7 @@ declare const TagInput: {
             }>;
             overflowTagIndex: import("vue").Ref<number>;
             localCollapseTags: import("vue").ComputedRef<boolean>;
+            collapseTooltip: import("vue").ComputedRef<any>;
             focusInputTrigger: (e?: MouseEvent) => void;
             activeClass: (data: any, index: number) => {
                 [x: string]: boolean;
@@ -809,6 +810,7 @@ declare const TagInput: {
         }>;
         overflowTagIndex: import("vue").Ref<number>;
         localCollapseTags: import("vue").ComputedRef<boolean>;
+        collapseTooltip: import("vue").ComputedRef<any>;
         focusInputTrigger: (e?: MouseEvent) => void;
         activeClass: (data: any, index: number) => {
             [x: string]: boolean;
@@ -1155,6 +1157,7 @@ declare const TagInput: {
     }>;
     overflowTagIndex: import("vue").Ref<number>;
     localCollapseTags: import("vue").ComputedRef<boolean>;
+    collapseTooltip: import("vue").ComputedRef<any>;
     focusInputTrigger: (e?: MouseEvent) => void;
     activeClass: (data: any, index: number) => {
         [x: string]: boolean;