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

package/lib/swiper/index.js

@@ -0,0 +1,310 @@
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
+/******/ // 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: 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: ../../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 computedRenderDataList = (0,external_vue_namespaceObject.computed)(function () {
+      var _a;
+
+      return ((_a = list.value) === null || _a === void 0 ? void 0 : _a.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 ['bk-swiper-img', {
+        'bk-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 {
+        'bk-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 _a;
+
+      var parentEle = (_a = swiperRef.value) === null || _a === void 0 ? void 0 : _a.parentElement;
+
+      if (!parentEle || !window.ResizeObserver) {
+        return;
+      }
+
+      resizeObserver = new ResizeObserver(function () {
+        calcSize();
+      });
+      resizeObserver.observe(parentEle);
+    };
+
+    var endWatchParentSizeChange = function endWatchParentSizeChange() {
+      var _a;
+
+      (_a = resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.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 _a;
+
+      var swiperParentSize = getElementSize((_a = swiperRef.value) === null || _a === void 0 ? void 0 : _a.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": "bk-swiper-home",
+        "ref": swiperRef,
+        "style": computedSwiperRenderStyle.value
+      }, [(0,external_vue_namespaceObject.createVNode)("hgroup", {
+        "style": computedSwiperTranslateStyle.value,
+        "class": "bk-transition bk-swiper-main"
+      }, [computedRenderDataList.value.map(function (renderData) {
+        var _a, _b;
+
+        return (0,external_vue_namespaceObject.createVNode)("h3", {
+          "class": "bk-swiper-card",
+          "style": computedSwiperRenderStyle.value
+        }, [(_b = (_a = slots["default"]) === null || _a === void 0 ? void 0 : _a.call(slots, renderData)) !== null && _b !== void 0 ? _b : (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": "bk-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": "bk-swiper-nav bk-nav-prev",
+        "onClick": function onClick() {
+          return changeIndex(swiperIndex.value - 1);
+        }
+      }, [(0,external_vue_namespaceObject.createVNode)("i", {
+        "class": "bk-swiper-nav-icon"
+      }, null)]), (0,external_vue_namespaceObject.createVNode)("span", {
+        "class": "bk-swiper-nav bk-nav-next",
+        "onClick": function onClick() {
+          return changeIndex(swiperIndex.value + 1);
+        }
+      }, [(0,external_vue_namespaceObject.createVNode)("i", {
+        "class": "bk-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

@@ -0,0 +1,91 @@
+.bk-swiper-home {
+  position: relative;
+  overflow: hidden;
+}
+.bk-swiper-home:hover .bk-swiper-nav {
+  display: block;
+}
+.bk-swiper-main {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+.bk-swiper-main.bk-transition {
+  transition: 0.5s cubic-bezier(0.42, 0, 0.58, 1);
+}
+.bk-swiper-main .bk-swiper-card {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+.bk-swiper-main .bk-swiper-img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.bk-swiper-main .bk-swiper-link {
+  cursor: pointer;
+}
+.bk-swiper-index {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  left: 0;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+}
+.bk-swiper-index li {
+  width: 11px;
+  height: 4px;
+  margin: 0 3px;
+  list-style-type: none;
+  background: #63656e;
+  border-radius: 2px;
+  transition: width 0.525s;
+}
+.bk-swiper-index li.bk-current-index {
+  width: 17px;
+  background: #c5c7d1;
+}
+.bk-swiper-nav {
+  position: absolute;
+  top: calc(50% - 15px);
+  display: none;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  background: rgba(31, 45, 61, 0.4);
+  border-radius: 50%;
+}
+.bk-swiper-nav .bk-swiper-nav-icon {
+  position: absolute;
+  top: 9px;
+  left: 11px;
+  width: 10px;
+  height: 10px;
+  border-bottom: 2px solid #fff;
+  border-left: 2px solid #fff;
+}
+.bk-swiper-nav.bk-nav-prev {
+  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.d.ts

@@ -0,0 +1,65 @@
+declare const _default: import("vue").DefineComponent<{
+    isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loopTime: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "index-change"[], "index-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loopTime: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+}>> & {
+    "onIndex-change"?: (...args: any[]) => any;
+}, {
+    width: number;
+    height: number;
+    list: unknown[];
+    isLoop: boolean;
+    loopTime: number;
+    pics: unknown[];
+}>;
+export default _default;

package/lib/swiper/swiper.less

@@ -0,0 +1,107 @@
+.bk-swiper-home {
+  position: relative;
+  overflow: hidden;
+
+  &:hover .bk-swiper-nav {
+    display: block;
+  }
+}
+
+.bk-swiper-main {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+
+  &.bk-transition {
+    transition: .5s cubic-bezier(.42, 0, .58, 1);
+  }
+
+  .bk-swiper-card {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
+
+  .bk-swiper-img {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  .bk-swiper-link {
+    cursor: pointer;
+  }
+}
+
+.bk-swiper-index {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  left: 0;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+
+  li {
+    width: 11px;
+    height: 4px;
+    margin: 0 3px;
+    list-style-type: none;
+    background: #63656e;
+    border-radius: 2px;
+    transition: width .525s;
+
+    &.bk-current-index {
+      width: 17px;
+      background: #c5c7d1;
+    }
+  }
+}
+
+.bk-swiper-nav {
+  position: absolute;
+  top: calc(50% - 15px);
+  display: none;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  background: rgba(31,45,61,.4);
+  border-radius: 50%;
+
+  .bk-swiper-nav-icon {
+    position: absolute;
+    top: 9px;
+    left: 11px;
+    width: 10px;
+    height: 10px;
+    border-bottom: 2px solid #fff;
+    border-left: 2px solid #fff;
+  }
+
+  &.bk-nav-prev {
+    left: 14px;
+    transform: rotate(45deg);
+
+    &:hover {
+      transform: rotate(45deg);
+    }
+  }
+
+  &.bk-nav-next {
+    right: 14px;
+    transform: rotate(225deg);
+
+    &:hover {
+      transform: rotate(225deg);
+    }
+  }
+
+  &:hover {
+    background: rgba(31,45,61,.6);
+  }
+}

package/lib/swiper/swiper.variable.css

@@ -0,0 +1,91 @@
+.bk-swiper-home {
+  position: relative;
+  overflow: hidden;
+}
+.bk-swiper-home:hover .bk-swiper-nav {
+  display: block;
+}
+.bk-swiper-main {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+.bk-swiper-main.bk-transition {
+  transition: 0.5s cubic-bezier(0.42, 0, 0.58, 1);
+}
+.bk-swiper-main .bk-swiper-card {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+.bk-swiper-main .bk-swiper-img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.bk-swiper-main .bk-swiper-link {
+  cursor: pointer;
+}
+.bk-swiper-index {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  left: 0;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+}
+.bk-swiper-index li {
+  width: 11px;
+  height: 4px;
+  margin: 0 3px;
+  list-style-type: none;
+  background: #63656e;
+  border-radius: 2px;
+  transition: width 0.525s;
+}
+.bk-swiper-index li.bk-current-index {
+  width: 17px;
+  background: #c5c7d1;
+}
+.bk-swiper-nav {
+  position: absolute;
+  top: calc(50% - 15px);
+  display: none;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  background: rgba(31, 45, 61, 0.4);
+  border-radius: 50%;
+}
+.bk-swiper-nav .bk-swiper-nav-icon {
+  position: absolute;
+  top: 9px;
+  left: 11px;
+  width: 10px;
+  height: 10px;
+  border-bottom: 2px solid #fff;
+  border-left: 2px solid #fff;
+}
+.bk-swiper-nav.bk-nav-prev {
+  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);
+}