bkui-vue 0.0.1-beta.39 → 0.0.1-beta.390

package/lib/tag/index.d.ts

@@ -0,0 +1,229 @@
+declare const BkTag: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            type: "" | "stroke" | "filled";
+            theme: "success" | "info" | "warning" | "danger";
+            extCls: string;
+            closable: boolean;
+            radius: string;
+            checked: boolean;
+            checkable: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            theme: import("vue-types").VueTypeDef<"success" | "info" | "warning" | "danger"> & {
+                default: "success" | "info" | "warning" | "danger";
+            };
+            closable: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            type: import("vue-types").VueTypeDef<"" | "stroke" | "filled"> & {
+                default: "" | "stroke" | "filled";
+            };
+            checkable: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            checked: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            radius: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            extCls: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+        }>> & {
+            onChange?: (...args: any[]) => any;
+            onClose?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "theme" | "extCls" | "closable" | "radius" | "checked" | "checkable">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $emit: (event: "change" | "close", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            theme: import("vue-types").VueTypeDef<"success" | "info" | "warning" | "danger"> & {
+                default: "success" | "info" | "warning" | "danger";
+            };
+            closable: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            type: import("vue-types").VueTypeDef<"" | "stroke" | "filled"> & {
+                default: "" | "stroke" | "filled";
+            };
+            checkable: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            checked: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            radius: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            extCls: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+        }>> & {
+            onChange?: (...args: any[]) => any;
+            onClose?: (...args: any[]) => any;
+        }, {
+            wrapperCls: import("vue").ComputedRef<string>;
+            wrapperStyle: import("vue").ComputedRef<{
+                borderRadius: string;
+            }>;
+            handleClose: (e: Event) => void;
+            handleClick: (e: Event) => void;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], string, {
+            type: "" | "stroke" | "filled";
+            theme: "success" | "info" | "warning" | "danger";
+            extCls: string;
+            closable: boolean;
+            radius: string;
+            checked: boolean;
+            checkable: boolean;
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        theme: import("vue-types").VueTypeDef<"success" | "info" | "warning" | "danger"> & {
+            default: "success" | "info" | "warning" | "danger";
+        };
+        closable: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        type: import("vue-types").VueTypeDef<"" | "stroke" | "filled"> & {
+            default: "" | "stroke" | "filled";
+        };
+        checkable: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        checked: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        radius: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+        extCls: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+    }>> & {
+        onChange?: (...args: any[]) => any;
+        onClose?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<{
+        wrapperCls: import("vue").ComputedRef<string>;
+        wrapperStyle: import("vue").ComputedRef<{
+            borderRadius: string;
+        }>;
+        handleClose: (e: Event) => void;
+        handleClick: (e: Event) => void;
+    }> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    theme: import("vue-types").VueTypeDef<"success" | "info" | "warning" | "danger"> & {
+        default: "success" | "info" | "warning" | "danger";
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    type: import("vue-types").VueTypeDef<"" | "stroke" | "filled"> & {
+        default: "" | "stroke" | "filled";
+    };
+    checkable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    checked: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    radius: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    onClose?: (...args: any[]) => any;
+}, {
+    wrapperCls: import("vue").ComputedRef<string>;
+    wrapperStyle: import("vue").ComputedRef<{
+        borderRadius: string;
+    }>;
+    handleClose: (e: Event) => void;
+    handleClick: (e: Event) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], "change" | "close", {
+    type: "" | "stroke" | "filled";
+    theme: "success" | "info" | "warning" | "danger";
+    extCls: string;
+    closable: boolean;
+    radius: string;
+    checked: boolean;
+    checkable: boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkTag;

package/lib/tag/index.js

@@ -0,0 +1,206 @@
+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__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, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.classes, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstall });
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
+function _defineProperty(obj, key, value) {
+  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 "../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)(),
+    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'),
+    extCls: external_shared_namespaceObject.PropTypes.string.def('')
+  },
+  emits: ['change', 'close'],
+  slots: ['icon'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var wrapperCls = (0,external_vue_namespaceObject.computed)(function () {
+      var _classes;
+
+      return (0,external_shared_namespaceObject.classes)((_classes = {
+        'bk-tag-closable': props.closable,
+        'bk-tag-checkable': props.checkable,
+        'bk-tag-check': props.checked
+      }, _defineProperty(_classes, "bk-tag-".concat(props.type), props.type), _defineProperty(_classes, "bk-tag-".concat(props.theme), props.theme), _defineProperty(_classes, props.extCls, !!props.extCls), _classes), 'bk-tag');
+    });
+    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 {
+      wrapperCls: wrapperCls,
+      wrapperStyle: wrapperStyle,
+      handleClose: handleClose,
+      handleClick: handleClick
+    };
+  },
+  render: function render() {
+    var _a, _b;
+
+    return (0,external_vue_namespaceObject.createVNode)("div", {
+      "class": this.wrapperCls,
+      "style": this.wrapperStyle,
+      "onClick": this.handleClick
+    }, [this.$slots.icon ? (0,external_vue_namespaceObject.createVNode)("span", {
+      "class": "bk-tag-icon"
+    }, [this.$slots.icon()]) : '', (0,external_vue_namespaceObject.createVNode)("span", {
+      "class": "bk-tag-text"
+    }, [(_b = (_a = this.$slots)["default"]) === null || _b === void 0 ? void 0 : _b.call(_a)]), this.closable ? (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Error, {
+      "class": "bk-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

@@ -0,0 +1,130 @@
+.bk-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 10px;
+  margin: 2px 6px 2px 0px;
+  font-size: 12px;
+  line-height: 22px;
+  color: #63656e;
+  cursor: default;
+  background-color: #f0f1f5;
+  border-color: rgba(151, 155, 165, 0.3);
+  box-sizing: border-box;
+}
+.bk-tag.bk-tag-success {
+  color: #14a568;
+  border-color: rgba(20, 165, 104, 0.3);
+  background-color: #E4FAF0;
+}
+.bk-tag.bk-tag-success.bk-tag-filled {
+  background-color: #14A568;
+}
+.bk-tag.bk-tag-success.bk-tag-filled:hover {
+  background-color: #42B685;
+}
+.bk-tag.bk-tag-success:hover:not(.bk-tag-filled) {
+  background-color: #C9F5E2;
+}
+.bk-tag.bk-tag-info {
+  color: #3a84ff;
+  border-color: rgba(58, 132, 255, 0.3);
+  background-color: #EDF4FF;
+}
+.bk-tag.bk-tag-info.bk-tag-filled {
+  background-color: #3A84FF;
+}
+.bk-tag.bk-tag-info.bk-tag-filled:hover {
+  background-color: #609CFE;
+}
+.bk-tag.bk-tag-info:hover:not(.bk-tag-filled) {
+  background-color: #E1ECFF;
+}
+.bk-tag.bk-tag-warning {
+  color: #fe9c00;
+  border-color: rgba(254, 165, 0, 0.3);
+  background-color: #FFF1DB;
+}
+.bk-tag.bk-tag-warning.bk-tag-filled {
+  background-color: #FE9C00;
+}
+.bk-tag.bk-tag-warning.bk-tag-filled:hover {
+  background-color: #FDAF32;
+}
+.bk-tag.bk-tag-warning:hover:not(.bk-tag-filled) {
+  background-color: #FFE8C3;
+}
+.bk-tag.bk-tag-danger {
+  color: #ea3636;
+  border-color: rgba(234, 53, 54, 0.3);
+  background-color: #FEEBEA;
+}
+.bk-tag.bk-tag-danger.bk-tag-filled {
+  background-color: #EA3536;
+}
+.bk-tag.bk-tag-danger.bk-tag-filled:hover {
+  background-color: #ED5C5D;
+}
+.bk-tag.bk-tag-danger:hover:not(.bk-tag-filled) {
+  background-color: #FEDDDC;
+}
+.bk-tag:hover {
+  background-color: #dcdee5;
+}
+.bk-tag.bk-tag-filled {
+  color: #fff;
+  background-color: #979BA5;
+}
+.bk-tag.bk-tag-filled:hover {
+  background-color: #ACAFB6;
+}
+.bk-tag.bk-tag-stroke {
+  padding: 0 9px;
+  line-height: 20px;
+  border-style: solid;
+  border-width: 1px;
+}
+.bk-tag.bk-tag-stroke:not(.bk-tag-success, .bk-tag-warning, .bk-tag-info, .bk-tag-danger) {
+  background-color: #FAFBFD;
+}
+.bk-tag.bk-tag-stroke:not(.bk-tag-success, .bk-tag-warning, .bk-tag-info, .bk-tag-danger):hover {
+  background-color: #F0F1F5;
+}
+.bk-tag.bk-tag-closable {
+  padding: 0 4px 0 10px;
+}
+.bk-tag.bk-tag-checkable {
+  cursor: pointer;
+  background: none;
+}
+.bk-tag.bk-tag-checkable:hover {
+  background: #F0F1F5;
+}
+.bk-tag.bk-tag-check {
+  color: #fff;
+  background: #3a84ff;
+}
+.bk-tag.bk-tag-check:hover {
+  color: #fff;
+  background: #3a84ff;
+  opacity: 1;
+}
+.bk-tag .bk-tag-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-tag .bk-tag-icon {
+  flex-shrink: 0;
+  margin-right: 4px;
+  font-size: 14px;
+  line-height: 0;
+}
+.bk-tag .bk-tag-close {
+  flex-shrink: 0;
+  margin-left: 4px;
+  font-size: 12px;
+  line-height: 0;
+  cursor: pointer;
+}

package/lib/tag/tag.d.ts

@@ -0,0 +1,84 @@
+declare const _default: import("vue").DefineComponent<{
+    theme: import("vue-types").VueTypeDef<"success" | "info" | "warning" | "danger"> & {
+        default: "success" | "info" | "warning" | "danger";
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    type: import("vue-types").VueTypeDef<"" | "stroke" | "filled"> & {
+        default: "" | "stroke" | "filled";
+    };
+    checkable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    checked: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    radius: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+}, {
+    wrapperCls: import("vue").ComputedRef<string>;
+    wrapperStyle: import("vue").ComputedRef<{
+        borderRadius: string;
+    }>;
+    handleClose: (e: Event) => void;
+    handleClick: (e: Event) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], "change" | "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    theme: import("vue-types").VueTypeDef<"success" | "info" | "warning" | "danger"> & {
+        default: "success" | "info" | "warning" | "danger";
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    type: import("vue-types").VueTypeDef<"" | "stroke" | "filled"> & {
+        default: "" | "stroke" | "filled";
+    };
+    checkable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    checked: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    radius: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    onClose?: (...args: any[]) => any;
+}, {
+    type: "" | "stroke" | "filled";
+    theme: "success" | "info" | "warning" | "danger";
+    extCls: string;
+    closable: boolean;
+    radius: string;
+    checked: boolean;
+    checkable: boolean;
+}>;
+export default _default;