bkui-vue 1.0.3-beta.9 → 2.0.1-beta.10

package/lib/overflow-title/index.d.ts

@@ -16,8 +16,8 @@ declare const BkOverflowTitle: {
         boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
             default: string | (() => HTMLElement);
         };
-        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-            default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+            default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
         };
         resizeable: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
@@ -59,8 +59,8 @@ declare const BkOverflowTitle: {
             } & {
                 default: boolean;
             };
-            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-                default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+                default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
             };
             theme: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
@@ -171,8 +171,8 @@ declare const BkOverflowTitle: {
         boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
             default: string | (() => HTMLElement);
         };
-        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-            default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+            default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
         };
         resizeable: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
@@ -214,8 +214,8 @@ declare const BkOverflowTitle: {
             } & {
                 default: boolean;
             };
-            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-                default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+                default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
             };
             theme: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
@@ -308,7 +308,7 @@ declare const BkOverflowTitle: {
     }>>, {
         type: string;
         content: string;
-        placement: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+        placement: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
         boundary: string | HTMLElement;
         calType: string;
         resizeable: boolean;
@@ -332,8 +332,8 @@ declare const BkOverflowTitle: {
         boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
             default: string | (() => HTMLElement);
         };
-        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-            default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+            default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
         };
         resizeable: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
@@ -375,8 +375,8 @@ declare const BkOverflowTitle: {
             } & {
                 default: boolean;
             };
-            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-                default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+                default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
             };
             theme: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
@@ -477,7 +477,7 @@ declare const BkOverflowTitle: {
     }, {}, {}, {}, {
         type: string;
         content: string;
-        placement: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+        placement: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
         boundary: string | HTMLElement;
         calType: string;
         resizeable: boolean;
@@ -498,8 +498,8 @@ declare const BkOverflowTitle: {
     boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
         default: string | (() => HTMLElement);
     };
-    placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-        default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+    placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+        default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
     };
     resizeable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -541,8 +541,8 @@ declare const BkOverflowTitle: {
         } & {
             default: boolean;
         };
-        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-            default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+            default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
         };
         theme: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -643,7 +643,7 @@ declare const BkOverflowTitle: {
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     type: string;
     content: string;
-    placement: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+    placement: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
     boundary: string | HTMLElement;
     calType: string;
     resizeable: boolean;

package/lib/overflow-title/index.js

@@ -41,7 +41,7 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["debounce"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.debounce, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
+const shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["debounce"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.debounce, ["hasOverflowEllipsis"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.hasOverflowEllipsis, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
@@ -59,25 +59,50 @@ var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); retur
 var external_vue_types_y = x => () => x
 const external_vue_types_namespaceObject = external_vue_types_x({ ["string"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.string });
 ;// CONCATENATED MODULE: ../../packages/overflow-title/src/props.ts
+/*
+ * 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 PlacementEnum;
 (function (PlacementEnum) {
   PlacementEnum["AUTO"] = "auto";
-  PlacementEnum["AUTO_START"] = "auto-start";
   PlacementEnum["AUTO_END"] = "auto-end";
-  PlacementEnum["TOP"] = "top";
-  PlacementEnum["RIGHT"] = "right";
+  PlacementEnum["AUTO_START"] = "auto-start";
   PlacementEnum["BOTTOM"] = "bottom";
-  PlacementEnum["LEFT"] = "left";
-  PlacementEnum["TOP_START"] = "top-start";
-  PlacementEnum["TOP_END"] = "top-end";
-  PlacementEnum["BOTTOM_START"] = "bottom-start";
   PlacementEnum["BOTTOM_END"] = "bottom-end";
-  PlacementEnum["RIGHT_START"] = "right-start";
-  PlacementEnum["RIGHT_END"] = "right-end";
-  PlacementEnum["LEFT_START"] = "left-start";
+  PlacementEnum["BOTTOM_START"] = "bottom-start";
+  PlacementEnum["LEFT"] = "left";
   PlacementEnum["LEFT_END"] = "left-end";
+  PlacementEnum["LEFT_START"] = "left-start";
+  PlacementEnum["RIGHT"] = "right";
+  PlacementEnum["RIGHT_END"] = "right-end";
+  PlacementEnum["RIGHT_START"] = "right-start";
+  PlacementEnum["TOP"] = "top";
+  PlacementEnum["TOP_END"] = "top-end";
+  PlacementEnum["TOP_START"] = "top-start";
 })(PlacementEnum || (PlacementEnum = {}));
 function placementType() {
   return (0,external_vue_types_namespaceObject.string)().def(PlacementEnum.BOTTOM);
@@ -91,47 +116,40 @@ function placementType() {
   resizeable: shared_namespaceObject.PropTypes.bool,
   popoverOptions: Object // popover属性
 });
-;// CONCATENATED MODULE: ../../packages/overflow-title/src/utils/getActualWidthByCanvas.ts
-function getActualWidthByCanvas(text, options) {
-  var _options$fontSize = options.fontSize,
-    fontSize = _options$fontSize === void 0 ? 14 : _options$fontSize,
-    _options$fontFamily = options.fontFamily,
-    fontFamily = _options$fontFamily === void 0 ? 'Microsoft YaHei' : _options$fontFamily;
-  var canvas = document.createElement('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.font = "".concat(fontSize, "px ").concat(fontFamily);
-  var metrics = ctx.measureText(text);
-  var actual = Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight);
-  return Math.max(metrics.width, actual);
-}
-/* harmony default export */ const utils_getActualWidthByCanvas = (getActualWidthByCanvas);
-;// CONCATENATED MODULE: ../../packages/overflow-title/src/utils/getActualWidthByDom.ts
-function getActualWidthByDom(text, options) {
-  var dom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document.body;
-  if (!dom) {
-    return 0;
-  }
-  var _ref = options || {},
-    fontSize = _ref.fontSize,
-    fontFamily = _ref.fontFamily;
-  var tempDom = document.createElement('div');
-  tempDom.style.cssText = "position: absolute;left: -999em;top:-999em;z-index: -1;text-overflow: initial;\n    ".concat(fontSize ? "font-size:".concat(fontSize, " ;") : '', "\n    ").concat(fontFamily ? "font-family:".concat(fontFamily, " ") : '', "\n  ");
-  tempDom.innerText = text;
-  dom.append(tempDom);
-  var clientWidth = tempDom.clientWidth;
-  dom.removeChild(tempDom);
-  return clientWidth;
-}
-/* harmony default export */ const utils_getActualWidthByDom = (getActualWidthByDom);
 ;// CONCATENATED MODULE: ../../packages/overflow-title/src/components/overflow-title.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.
+ */
 
 
 
 
 
-
-
+// import getActualWidthByCanvas from '../utils/getActualWidthByCanvas';
+// import getActualWidthByDom from '../utils/getActualWidthByDom';
 /* harmony default export */ const overflow_title = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'OverflowTitle',
   props: props,
@@ -149,29 +167,23 @@ function getActualWidthByDom(text, options) {
       return slots === null || slots === void 0 || (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
     });
     (0,external_vue_namespaceObject.onMounted)(function () {
-      var clientWidth = boxRef.value.clientWidth;
+      // const { clientWidth } = boxRef.value;
       var resizeHandler = (0,shared_namespaceObject.debounce)(500, function () {
         isShowTips.value = false;
         textProps.value = {};
-        var textWidth = 0;
-        if (props.calType === 'dom') {
-          var _textRef$value;
-          textWidth = utils_getActualWidthByDom((_textRef$value = textRef.value) === null || _textRef$value === void 0 ? void 0 : _textRef$value.textContent, null, boxRef.value);
-        } else {
-          var _getComputedStyle = getComputedStyle(boxRef.value),
-            fontSize = _getComputedStyle.fontSize,
-            fontFamily = _getComputedStyle.fontFamily;
-          textWidth = utils_getActualWidthByCanvas(contentText.value, {
-            fontSize: fontSize,
-            fontFamily: fontFamily
-          });
-        }
-        if (textWidth > clientWidth) {
+        // let textWidth = 0;
+        // if (props.calType === 'dom') {
+        //   textWidth = getActualWidthByDom(textRef.value?.textContent, null, boxRef.value);
+        // } else {
+        //   const { fontSize, fontFamily } = getComputedStyle(boxRef.value);
+        //   textWidth = getActualWidthByCanvas(contentText.value as string, { fontSize, fontFamily });
+        // }
+        if ((0,shared_namespaceObject.hasOverflowEllipsis)(textRef.value)) {
           isShowTips.value = true;
           if (props.type === 'title') {
-            var _textRef$value$innerT, _textRef$value2;
+            var _textRef$value$innerT, _textRef$value;
             textProps.value = {
-              title: (_textRef$value$innerT = textRef === null || textRef === void 0 || (_textRef$value2 = textRef.value) === null || _textRef$value2 === void 0 ? void 0 : _textRef$value2.innerText) !== null && _textRef$value$innerT !== void 0 ? _textRef$value$innerT : props.content
+              title: (_textRef$value$innerT = textRef === null || textRef === void 0 || (_textRef$value = textRef.value) === null || _textRef$value === void 0 ? void 0 : _textRef$value.innerText) !== null && _textRef$value$innerT !== void 0 ? _textRef$value$innerT : props.content
             };
           }
         }
@@ -200,8 +212,8 @@ function getActualWidthByDom(text, options) {
       "ref": "boxRef",
       "class": "position-relative"
     }, [(0,external_vue_namespaceObject.createVNode)(popover_namespaceObject["default"], (0,external_vue_namespaceObject.mergeProps)({
-      "placement": this.placement,
       "boundary": this.boundary || document.body,
+      "placement": this.placement,
       "popoverDelay": [200, 0]
     }, props.popoverOptions, {
       "disabled": this.type === 'title' || !this.isShowTips
@@ -218,6 +230,38 @@ function getActualWidthByDom(text, options) {
     })]);
   }
 }));
+;// CONCATENATED MODULE: ../../packages/overflow-title/src/utils/getActualWidthByCanvas.ts
+function getActualWidthByCanvas(text, options) {
+  var _options$fontSize = options.fontSize,
+    fontSize = _options$fontSize === void 0 ? 14 : _options$fontSize,
+    _options$fontFamily = options.fontFamily,
+    fontFamily = _options$fontFamily === void 0 ? 'Microsoft YaHei' : _options$fontFamily;
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.font = "".concat(fontSize, "px ").concat(fontFamily);
+  var metrics = ctx.measureText(text);
+  var actual = Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight);
+  return Math.max(metrics.width, actual);
+}
+/* harmony default export */ const utils_getActualWidthByCanvas = (getActualWidthByCanvas);
+;// CONCATENATED MODULE: ../../packages/overflow-title/src/utils/getActualWidthByDom.ts
+function getActualWidthByDom(text, options) {
+  var dom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document.body;
+  if (!dom) {
+    return 0;
+  }
+  var _ref = options || {},
+    fontSize = _ref.fontSize,
+    fontFamily = _ref.fontFamily;
+  var tempDom = document.createElement('div');
+  tempDom.style.cssText = "position: absolute;left: -999em;top:-999em;z-index: -1;text-overflow: initial;\n    ".concat(fontSize ? "font-size:".concat(fontSize, " ;") : '', "\n    ").concat(fontFamily ? "font-family:".concat(fontFamily, " ") : '', "\n  ");
+  tempDom.innerText = text;
+  dom.append(tempDom);
+  var clientWidth = tempDom.clientWidth;
+  dom.removeChild(tempDom);
+  return clientWidth;
+}
+/* harmony default export */ const utils_getActualWidthByDom = (getActualWidthByDom);
 ;// CONCATENATED MODULE: ../../packages/overflow-title/src/directive/overflow-title.ts
 
 

package/lib/overflow-title/props.d.ts

@@ -1,25 +1,25 @@
 import { PropType } from 'vue/dist/vue';
 export type TipsType = 'tips' | 'title';
-export type CalType = 'dom' | 'canvas';
+export type CalType = 'canvas' | 'dom';
 export declare enum PlacementEnum {
     AUTO = "auto",
-    AUTO_START = "auto-start",
     AUTO_END = "auto-end",
-    TOP = "top",
-    RIGHT = "right",
+    AUTO_START = "auto-start",
     BOTTOM = "bottom",
-    LEFT = "left",
-    TOP_START = "top-start",
-    TOP_END = "top-end",
-    BOTTOM_START = "bottom-start",
     BOTTOM_END = "bottom-end",
-    RIGHT_START = "right-start",
-    RIGHT_END = "right-end",
+    BOTTOM_START = "bottom-start",
+    LEFT = "left",
+    LEFT_END = "left-end",
     LEFT_START = "left-start",
-    LEFT_END = "left-end"
+    RIGHT = "right",
+    RIGHT_END = "right-end",
+    RIGHT_START = "right-start",
+    TOP = "top",
+    TOP_END = "top-end",
+    TOP_START = "top-start"
 }
-export declare function placementType(): import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-    default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+export declare function placementType(): import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+    default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
 };
 declare const _default: {
     content: import("vue-types").VueTypeValidableDef<string> & {
@@ -34,13 +34,13 @@ declare const _default: {
     boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
         default: string | (() => HTMLElement);
     };
-    placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-        default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+    placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+        default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
     };
     resizeable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    popoverOptions: PropType<Partial<Readonly<import("vue").ExtractPropTypes<{
+    popoverOptions: PropType<Partial<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
         isShow: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -77,8 +77,8 @@ declare const _default: {
         } & {
             default: boolean;
         };
-        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-            default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+            default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
         };
         theme: import("vue-types").VueTypeValidableDef<string> & {
             default: string;

package/lib/pagination/index.js

@@ -249,16 +249,17 @@ function _isSlot(s) {
     }), [(0,external_vue_namespaceObject.createVNode)("div", null, [t.value.eachPage]), (0,external_vue_namespaceObject.createVNode)(select_namespaceObject["default"], {
       "class": "".concat(resolveClassName('pagination-limit-select')),
       "clearable": false,
+      "disabled": proxy.disabled,
+      "filterable": false,
+      "modelValue": localLimit.value,
       "size": "small",
       "withValidate": false,
-      "modelValue": localLimit.value,
-      "onChange": handleLimitChange,
-      "disabled": proxy.disabled
+      "onChange": handleLimitChange
     }, _isSlot(_slot = proxy.limitList.map(function (num, index) {
       return (0,external_vue_namespaceObject.createVNode)(select_namespaceObject.BkOption, {
         "id": num,
-        "name": "".concat(num),
-        "key": "".concat(index, "_").concat(num)
+        "key": "".concat(index, "_").concat(num),
+        "name": "".concat(num)
       }, null);
     })) ? _slot : {
       "default": function _default() {
@@ -417,8 +418,8 @@ var PAGE_ITEMS_NUM = 5;
       "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('pagination-list-pre')), true), 'is-disabled', isPagePreDisabled.value),
       "onClick": handlePrePage
     }, [proxy.prevText || (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleLeft, null, null)]), (0,external_vue_namespaceObject.createVNode)("div", {
-      "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('pagination-list-item')), true), 'is-active', localCurrent.value === 1),
       "key": "1",
+      "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('pagination-list-item')), true), 'is-active', localCurrent.value === 1),
       "onClick": function onClick() {
         return handleItemClick(1);
       }
@@ -428,8 +429,8 @@ var PAGE_ITEMS_NUM = 5;
       "onClick": handlePreBatch
     }, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Ellipsis, null, null)]), list.value.map(function (num) {
       return (0,external_vue_namespaceObject.createVNode)("div", {
-        "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('pagination-list-item')), true), 'is-active', localCurrent.value === num),
         "key": num,
+        "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('pagination-list-item')), true), 'is-active', localCurrent.value === num),
         "onClick": function onClick() {
           return handleItemClick(num);
         }
@@ -439,8 +440,8 @@ var PAGE_ITEMS_NUM = 5;
       "class": "".concat(resolveClassName('pagination-list-next-batch')),
       "onClick": handleNextBatch
     }, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Ellipsis, null, null)]), proxy.totalPageNum > 1 && (0,external_vue_namespaceObject.createVNode)("div", {
-      "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('pagination-list-item')), true), 'is-active', localCurrent.value === proxy.totalPageNum),
       "key": "last",
+      "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('pagination-list-item')), true), 'is-active', localCurrent.value === proxy.totalPageNum),
       "onClick": function onClick() {
         return handleItemClick(proxy.totalPageNum);
       }
@@ -617,12 +618,12 @@ const popover_less_namespaceObject = popover_less_x({  });
       "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('pagination-btn-pre')), true), 'is-disabled', isPagePreDisabled.value),
       "onClick": handlePrePage
     }, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleLeft, null, null)]), (0,external_vue_namespaceObject.createVNode)(popover_namespaceObject["default"], {
-      "theme": "light",
-      "trigger": "click",
-      "arrow": false,
       "width": 56,
+      "arrow": false,
       "boundary": "body",
-      "placement": "bottom"
+      "placement": "bottom",
+      "theme": "light",
+      "trigger": "click"
     }, {
       "default": function _default() {
         return (0,external_vue_namespaceObject.createVNode)("div", {
@@ -630,10 +631,10 @@ const popover_less_namespaceObject = popover_less_x({  });
         }, [(0,external_vue_namespaceObject.createVNode)("span", {
           "ref": inputRef,
           "class": "".concat(resolveClassName('pagination-editor')),
-          "contenteditable": true,
           "spellcheck": "false",
-          "onFocus": handlePageEditorFocus,
+          "contenteditable": true,
           "onBlur": handlePageEditorBlur,
+          "onFocus": handlePageEditorFocus,
           "onInput": handlePageEditorInput,
           "onKeydown": handlePageEditorKeydown
         }, [localCurrent.value]), (0,external_vue_namespaceObject.createVNode)("span", null, [(0,external_vue_namespaceObject.createTextVNode)("/")]), (0,external_vue_namespaceObject.createVNode)("span", {
@@ -645,11 +646,11 @@ const popover_less_namespaceObject = popover_less_x({  });
           "class": "".concat(resolveClassName('pagination-picker-list'))
         }, [list.value.map(function (item) {
           return (0,external_vue_namespaceObject.createVNode)("div", {
+            "key": item,
             "class": {
               item: true,
               'is-actived': item === localCurrent.value
             },
-            "key": item,
             "onClick": function onClick() {
               return handlePageChange(item);
             }

package/lib/pagination/pagination.variable.css

@@ -12,6 +12,7 @@
   --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;
@@ -123,6 +124,8 @@
   --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-pagination {
   display: flex;

package/lib/pagination/type.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPublicInstance } from 'vue';
 import type { PaginationProps } from './pagination';
+import type { ComponentPublicInstance } from 'vue';
 export type IPaginationInstance = ComponentPublicInstance<PaginationProps, {
     limit: PaginationProps['limit'];
     totalPageNum: number;

package/lib/pagination/use-limit.d.ts

@@ -1,5 +1,5 @@
-import type { ComputedRef } from 'vue';
 import type { Language } from '../locale';
+import type { ComputedRef } from 'vue';
 declare const _default: (t: ComputedRef<Language['pagination']>) => {
     limit: import("vue").Ref<number>;
     render: ({ isFirst, isLast }: {

package/lib/pagination/use-total.d.ts

@@ -1,5 +1,5 @@
-import type { ComputedRef } from 'vue';
 import type { Language } from '../locale';
+import type { ComputedRef } from 'vue';
 declare const _default: (t: ComputedRef<Language['pagination']>) => ({ isFirst, isLast }: {
     isFirst: any;
     isLast: any;

package/lib/plugin-popover/index.d.ts

@@ -23,5 +23,5 @@
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-import $bkPopover from '../../popover/src/plugin-popover';
+import $bkPopover from '../popover/plugin-popover';
 export default $bkPopover;