bkui-vue 0.0.2-beta.11 → 0.0.2-beta.111

package/lib/styles/themes/themes.variable.css

@@ -0,0 +1,122 @@
+: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;
+  --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;
+  --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-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);
+}

package/lib/swiper/index.d.ts

@@ -11,8 +11,8 @@ declare const BkSwiper: {
             pics?: unknown[];
             class?: unknown;
             style?: unknown;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/lib/swiper/index.js

@@ -1 +1,336 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../config-provider"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../config-provider"],t);else{var n="object"==typeof exports?t(require("../shared"),require("vue"),require("../config-provider")):t(e["../shared"],e.vue,e["../config-provider"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(self,((e,t,n)=>(()=>{"use strict";var r={2717:e=>{e.exports=n},4212:t=>{t.exports=e},748:e=>{e.exports=t}},o={};function i(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={exports:{}};return r[e](n,n.exports,i),n.exports}i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{i.r(a),i.d(a,{default:()=>l});var e=i(4212);function t(e){return t="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},t(e)}function n(e,n,r){return(n=function(e){var n=function(e,n){if("object"!==t(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===t(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}var r=i(748),o=i(2717);const u=(0,r.defineComponent)({name:"Swiper",props:{isLoop:e.PropTypes.bool.def(!0),loopTime:e.PropTypes.number.def(8e3),pics:e.PropTypes.array.def([]),list:e.PropTypes.array.def([]),height:e.PropTypes.number,width:e.PropTypes.number},emits:["index-change"],setup:function(e,t){var i,a=t.emit,u=t.slots,l=(0,r.toRefs)(e),c=l.isLoop,s=l.loopTime,p=l.pics,v=l.list,d=l.height,f=l.width,m=(0,r.ref)(),y=(0,r.ref)(0),h=(0,r.ref)(0),b=(0,r.ref)(0),g=(0,r.ref)(0),w=(0,o.usePrefix)().resolveClassName,x=(0,r.computed)((function(){var e;return(null===(e=v.value)||void 0===e?void 0:e.length)>0?v.value:p.value})),S=(0,r.computed)((function(){return{width:"".concat(h.value*x.value.length,"px"),transform:"translateX(-".concat(h.value*y.value,"px)")}})),P=(0,r.computed)((function(){return{width:"".concat(h.value,"px"),height:"".concat(b.value,"px")}})),T=function(e){var t=e;e>=x.value.length&&(t=0),e<0&&(t=x.value.length-1),y.value=t,a("index-change",t)},j=function(e){return["".concat(w("swiper-img")),n({},"".concat(w("swiper-link")),e.link),e.class]},N=function(e){return{"background-image":"url(".concat(e.url,")"),"background-color":e.color}},V=function(e){return n({},"".concat(w("current-index")),y.value===e)},k=function e(){c.value&&(g.value=window.setTimeout((function(){T(y.value+1),e()}),s.value))},O=function(){var e,t=function(e){if(void 0===e)return{height:0,width:0};var t=getComputedStyle(e),n=e.clientWidth-parseFloat(t.paddingTop)-parseFloat(t.paddingBottom);return{height:e.clientHeight-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight),width:n}}(null===(e=m.value)||void 0===e?void 0:e.parentElement);h.value=+f.value>0?f.value:t.width,b.value=+d.value>0?d.value:t.height};return(0,r.watch)([d,f],O),(0,r.onMounted)((function(){var e,t;O(),k(),(t=null===(e=m.value)||void 0===e?void 0:e.parentElement)&&window.ResizeObserver&&(i=new ResizeObserver((function(){O()}))).observe(t)})),(0,r.onBeforeUnmount)((function(){var e;window.clearTimeout(g.value),null===(e=i.disconnect)||void 0===e||e.call(i)})),function(){return(0,r.createVNode)("section",{class:"".concat(w("swiper-home")),ref:m,style:P.value},[(0,r.createVNode)("hgroup",{style:S.value,class:"".concat(w("transition")," ").concat(w("swiper-main"))},[x.value.map((function(e){var t,n;return(0,r.createVNode)("h3",{class:"".concat(w("swiper-card")),style:P.value},[null!==(n=null===(t=u.default)||void 0===t?void 0:t.call(u,e))&&void 0!==n?n:(0,r.createVNode)("span",{class:j(e),style:N(e),onClick:function(){var t;(t=e.link)&&window.open(t,"_blank")}},null)])}))]),(0,r.createVNode)("ul",{class:"".concat(w("swiper-index"))},[x.value.map((function(e,t){return(0,r.createVNode)("li",{class:V(t),onMouseover:function(){return T(t)}},null)}))]),(0,r.createVNode)("span",{class:"".concat(w("swiper-nav")," ").concat(w("nav-prev")),onClick:function(){return T(y.value-1)}},[(0,r.createVNode)("i",{class:"".concat(w("swiper-nav-icon"))},null)]),(0,r.createVNode)("span",{class:"".concat(w("swiper-nav")," ").concat(w("nav-next"),"}"),onClick:function(){return T(y.value+1)}},[(0,r.createVNode)("i",{class:"".concat(w("swiper-nav-icon"))},null)])])}}}),l=(0,e.withInstall)(u)})(),a})()));
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
+import * as __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__ from "../config-provider";
+/******/ // 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, ["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, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["toRefs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRefs, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
+;// 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: ../../packages/swiper/src/swiper.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.
+ */
+
+
+
+/* harmony default export */ const swiper = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'Swiper',
+  props: {
+    isLoop: external_shared_namespaceObject.PropTypes.bool.def(true),
+    loopTime: external_shared_namespaceObject.PropTypes.number.def(8000),
+    pics: external_shared_namespaceObject.PropTypes.array.def([]),
+    list: external_shared_namespaceObject.PropTypes.array.def([]),
+    height: external_shared_namespaceObject.PropTypes.number,
+    width: external_shared_namespaceObject.PropTypes.number
+  },
+  emits: ['index-change'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit,
+      slots = _ref.slots;
+    // 属性
+    var _toRefs = (0,external_vue_namespaceObject.toRefs)(props),
+      isLoop = _toRefs.isLoop,
+      loopTime = _toRefs.loopTime,
+      pics = _toRefs.pics,
+      list = _toRefs.list,
+      height = _toRefs.height,
+      width = _toRefs.width;
+    // 声明变量
+    var swiperRef = (0,external_vue_namespaceObject.ref)();
+    var swiperIndex = (0,external_vue_namespaceObject.ref)(0);
+    var renderWidth = (0,external_vue_namespaceObject.ref)(0);
+    var renderHeight = (0,external_vue_namespaceObject.ref)(0);
+    var loopId = (0,external_vue_namespaceObject.ref)(0);
+    var resizeObserver;
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    // 计算属性
+    var computedRenderDataList = (0,external_vue_namespaceObject.computed)(function () {
+      var _list$value;
+      return ((_list$value = list.value) === null || _list$value === void 0 ? void 0 : _list$value.length) > 0 ? list.value : pics.value;
+    });
+    var computedSwiperTranslateStyle = (0,external_vue_namespaceObject.computed)(function () {
+      return {
+        width: "".concat(renderWidth.value * computedRenderDataList.value.length, "px"),
+        transform: "translateX(-".concat(renderWidth.value * swiperIndex.value, "px)")
+      };
+    });
+    var computedSwiperRenderStyle = (0,external_vue_namespaceObject.computed)(function () {
+      return {
+        width: "".concat(renderWidth.value, "px"),
+        height: "".concat(renderHeight.value, "px")
+      };
+    });
+    // 方法
+    var changeIndex = function changeIndex(index) {
+      var showIndex = index;
+      // 边界处理
+      if (index >= computedRenderDataList.value.length) {
+        showIndex = 0;
+      }
+      if (index < 0) {
+        showIndex = computedRenderDataList.value.length - 1;
+      }
+      swiperIndex.value = showIndex;
+      emit('index-change', showIndex);
+    };
+    var goToLink = function goToLink(link) {
+      if (!link) return;
+      window.open(link, '_blank');
+    };
+    var getRenderItemClass = function getRenderItemClass(renderData) {
+      return ["".concat(resolveClassName('swiper-img')), _defineProperty({}, "".concat(resolveClassName('swiper-link')), renderData.link), renderData["class"]];
+    };
+    var getRenderItemStyle = function getRenderItemStyle(renderData) {
+      return {
+        'background-image': "url(".concat(renderData.url, ")"),
+        'background-color': renderData.color
+      };
+    };
+    var getRenderIndexStyle = function getRenderIndexStyle(index) {
+      return _defineProperty({}, "".concat(resolveClassName('current-index')), swiperIndex.value === index);
+    };
+    var startLoop = function startLoop() {
+      if (isLoop.value) {
+        loopId.value = window.setTimeout(function () {
+          changeIndex(swiperIndex.value + 1);
+          startLoop();
+        }, loopTime.value);
+      }
+    };
+    var endLoop = function endLoop() {
+      window.clearTimeout(loopId.value);
+    };
+    // 如果没有传递高宽属性，组件的高宽需要随着父元素的变化而变化
+    var watchParentSizeChange = function watchParentSizeChange() {
+      var _swiperRef$value;
+      var parentEle = (_swiperRef$value = swiperRef.value) === null || _swiperRef$value === void 0 ? void 0 : _swiperRef$value.parentElement;
+      if (!parentEle || !window.ResizeObserver) {
+        return;
+      }
+      resizeObserver = new ResizeObserver(function () {
+        calcSize();
+      });
+      resizeObserver.observe(parentEle);
+    };
+    var endWatchParentSizeChange = function endWatchParentSizeChange() {
+      var _resizeObserver$disco, _resizeObserver;
+      (_resizeObserver$disco = (_resizeObserver = resizeObserver).disconnect) === null || _resizeObserver$disco === void 0 ? void 0 : _resizeObserver$disco.call(_resizeObserver);
+    };
+    var getElementSize = function getElementSize(node) {
+      if (node === undefined) {
+        return {
+          height: 0,
+          width: 0
+        };
+      }
+      var computedStyle = getComputedStyle(node);
+      var width = node.clientWidth - parseFloat(computedStyle.paddingTop) - parseFloat(computedStyle.paddingBottom);
+      var height = node.clientHeight - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
+      return {
+        height: height,
+        width: width
+      };
+    };
+    // 计算组件的高宽 & 宽度
+    var calcSize = function calcSize() {
+      var _swiperRef$value2;
+      var swiperParentSize = getElementSize((_swiperRef$value2 = swiperRef.value) === null || _swiperRef$value2 === void 0 ? void 0 : _swiperRef$value2.parentElement);
+      renderWidth.value = +width.value > 0 ? width.value : swiperParentSize.width;
+      renderHeight.value = +height.value > 0 ? height.value : swiperParentSize.height;
+    };
+    (0,external_vue_namespaceObject.watch)([height, width], calcSize);
+    (0,external_vue_namespaceObject.onMounted)(function () {
+      calcSize();
+      startLoop();
+      watchParentSizeChange();
+    });
+    (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
+      endLoop();
+      endWatchParentSizeChange();
+    });
+    // render
+    return function () {
+      return (0,external_vue_namespaceObject.createVNode)("section", {
+        "class": "".concat(resolveClassName('swiper-home')),
+        "ref": swiperRef,
+        "style": computedSwiperRenderStyle.value
+      }, [(0,external_vue_namespaceObject.createVNode)("hgroup", {
+        "style": computedSwiperTranslateStyle.value,
+        "class": "".concat(resolveClassName('transition'), " ").concat(resolveClassName('swiper-main'))
+      }, [computedRenderDataList.value.map(function (renderData) {
+        var _slots$default, _slots$default2;
+        return (0,external_vue_namespaceObject.createVNode)("h3", {
+          "class": "".concat(resolveClassName('swiper-card')),
+          "style": computedSwiperRenderStyle.value
+        }, [(_slots$default = (_slots$default2 = slots["default"]) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots, renderData)) !== null && _slots$default !== void 0 ? _slots$default : (0,external_vue_namespaceObject.createVNode)("span", {
+          "class": getRenderItemClass(renderData),
+          "style": getRenderItemStyle(renderData),
+          "onClick": function onClick() {
+            return goToLink(renderData.link);
+          }
+        }, null)]);
+      })]), (0,external_vue_namespaceObject.createVNode)("ul", {
+        "class": "".concat(resolveClassName('swiper-index'))
+      }, [computedRenderDataList.value.map(function (_, index) {
+        return (0,external_vue_namespaceObject.createVNode)("li", {
+          "class": getRenderIndexStyle(index),
+          "onMouseover": function onMouseover() {
+            return changeIndex(index);
+          }
+        }, null);
+      })]), (0,external_vue_namespaceObject.createVNode)("span", {
+        "class": "".concat(resolveClassName('swiper-nav'), " ").concat(resolveClassName('nav-prev')),
+        "onClick": function onClick() {
+          return changeIndex(swiperIndex.value - 1);
+        }
+      }, [(0,external_vue_namespaceObject.createVNode)("i", {
+        "class": "".concat(resolveClassName('swiper-nav-icon'))
+      }, null)]), (0,external_vue_namespaceObject.createVNode)("span", {
+        "class": "".concat(resolveClassName('swiper-nav'), " ").concat(resolveClassName('nav-next')),
+        "onClick": function onClick() {
+          return changeIndex(swiperIndex.value + 1);
+        }
+      }, [(0,external_vue_namespaceObject.createVNode)("i", {
+        "class": "".concat(resolveClassName('swiper-nav-icon'))
+      }, null)])]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/swiper/src/index.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 BkSwiper = (0,external_shared_namespaceObject.withInstall)(swiper);
+/* harmony default export */ const src = (BkSwiper);
+var __webpack_exports__default = __webpack_exports__.Z;
+export { __webpack_exports__default as default };

package/lib/swiper/swiper.css

@@ -1,3 +1,125 @@
+: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;
+  --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;
+  --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-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);
+}
 .bk-swiper-home {
   position: relative;
   overflow: hidden;
@@ -76,16 +198,10 @@
   left: 14px;
   transform: rotate(45deg);
 }
-.bk-swiper-nav.bk-nav-prev:hover {
-  transform: rotate(45deg);
-}
 .bk-swiper-nav.bk-nav-next {
   right: 14px;
   transform: rotate(225deg);
 }
-.bk-swiper-nav.bk-nav-next:hover {
-  transform: rotate(225deg);
-}
 .bk-swiper-nav:hover {
   background: rgba(31, 45, 61, 0.6);
 }

package/lib/swiper/swiper.less

@@ -88,19 +88,11 @@
   &.@{bk-prefix}-nav-prev {
     left: 14px;
     transform: rotate(45deg);
-
-    &:hover {
-      transform: rotate(45deg);
-    }
   }
 
   &.@{bk-prefix}-nav-next {
     right: 14px;
     transform: rotate(225deg);
-
-    &:hover {
-      transform: rotate(225deg);
-    }
   }
 
   &:hover {