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

package/lib/breadcrumb/index.js

@@ -0,0 +1,263 @@
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
+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__, {
+  "e$": () => (/* binding */ BkBreadcrumb),
+  "G7": () => (/* reexport */ breadcrumb_item),
+  "ZP": () => (/* 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, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.classes, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstallProps });
+;// 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({ ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["getCurrentInstance"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.getCurrentInstance, ["inject"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.inject, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["provide"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.provide });
+;// 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({ ["ArrowsLeft"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.ArrowsLeft });
+;// CONCATENATED MODULE: ../../packages/breadcrumb/src/breadcrumb.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 breadcrumb = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'Breadcrumb',
+  props: {
+    extCls: external_shared_namespaceObject.PropTypes.string,
+    separator: external_shared_namespaceObject.PropTypes.string.def('/'),
+    separatorClass: external_shared_namespaceObject.PropTypes.string,
+    replace: external_shared_namespaceObject.PropTypes.bool,
+    backRouter: external_shared_namespaceObject.PropTypes.oneOfType([external_shared_namespaceObject.PropTypes.string, external_shared_namespaceObject.PropTypes.object]).def('')
+  },
+  setup: function setup(props, _ref) {
+    var slots = _ref.slots;
+
+    var _getCurrentInstance = (0,external_vue_namespaceObject.getCurrentInstance)(),
+        proxy = _getCurrentInstance.proxy,
+        appContext = _getCurrentInstance.appContext;
+
+    (0,external_vue_namespaceObject.provide)('breadcrumb', props);
+    (0,external_vue_namespaceObject.onMounted)(function () {
+      var items = proxy.$el.querySelectorAll('.bk-breadcrumb-item');
+
+      if (items.length) {
+        items[items.length - 1].setAttribute('aria-current', 'page');
+      }
+    });
+    var classCtx = (0,external_shared_namespaceObject.classes)({
+      'bk-breadcrumb': true
+    }, "".concat(props.extCls || ''));
+
+    var goBack = function goBack() {
+      var backRouter = props.backRouter,
+          replace = props.replace;
+      var $router = appContext.config.globalProperties.$router;
+      if (!$router) return;
+      replace ? $router.replace(backRouter) : $router.push(backRouter);
+    };
+
+    return function () {
+      var _a;
+
+      return (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": classCtx,
+        "aria-label": "Breadcrumb",
+        "role": "navigation"
+      }, [!slots.prefix && props.backRouter ? (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "bk-breadcrumb-goback"
+      }, [(0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.ArrowsLeft, {
+        "onClick": goBack
+      }, null)]) : '', slots.prefix ? (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "bk-breadcrumb-goback"
+      }, [slots.prefix()]) : '', (_a = slots["default"]) === null || _a === void 0 ? void 0 : _a.call(slots)]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/breadcrumb/src/breadcrumb-item.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 breadcrumb_item = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'BreadcrumbItem',
+  props: {
+    extCls: external_shared_namespaceObject.PropTypes.string,
+    to: external_shared_namespaceObject.PropTypes.oneOfType([external_shared_namespaceObject.PropTypes.string, external_shared_namespaceObject.PropTypes.object]).def(''),
+    replace: external_shared_namespaceObject.PropTypes.bool
+  },
+  emits: ['click'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit,
+        slots = _ref.slots;
+
+    var _getCurrentInstance = (0,external_vue_namespaceObject.getCurrentInstance)(),
+        appContext = _getCurrentInstance.appContext;
+
+    var parent = (0,external_vue_namespaceObject.inject)('breadcrumb');
+    var router = appContext.config.globalProperties.$router;
+
+    var handleClick = function handleClick(e) {
+      emit('click', e);
+      var to = props.to,
+          replace = props.replace;
+      if (!to || !router) return;
+      replace ? router.replace(to) : router.push(to);
+    };
+
+    var classCtx = (0,external_shared_namespaceObject.classes)({
+      'bk-breadcrumb-item': true
+    }, "".concat(props.extCls || ''));
+
+    var renderSeparator = function renderSeparator() {
+      if (slots.separator) {
+        return slots.separator();
+      }
+
+      if (parent.separatorClass) {
+        return (0,external_vue_namespaceObject.createVNode)("i", {
+          "class": "bk-breadcrumb-separator ".concat(parent.separatorClass)
+        }, null);
+      }
+
+      if (parent.separator) {
+        return (0,external_vue_namespaceObject.createVNode)("span", {
+          "class": "bk-breadcrumb-separator",
+          "role": "presentation"
+        }, [parent === null || parent === void 0 ? void 0 : parent.separator]);
+      }
+
+      return null;
+    };
+
+    return function () {
+      var _a;
+
+      return (0,external_vue_namespaceObject.createVNode)("span", {
+        "class": classCtx
+      }, [(0,external_vue_namespaceObject.createVNode)("span", {
+        "ref": "link",
+        "class": "bk-breadcrumb-item-inner ".concat(props.to ? 'is-link' : ''),
+        "role": "link",
+        "onClick": handleClick
+      }, [(_a = slots["default"]) === null || _a === void 0 ? void 0 : _a.call(slots)]), renderSeparator()]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/breadcrumb/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 BkBreadcrumb = (0,external_shared_namespaceObject.withInstallProps)(breadcrumb, {
+  Item: breadcrumb_item
+});
+
+/* harmony default export */ const src = (BkBreadcrumb);
+var __webpack_exports__BkBreadcrumb = __webpack_exports__.e$;
+var __webpack_exports__BkBreadcrumbItem = __webpack_exports__.G7;
+var __webpack_exports__default = __webpack_exports__.ZP;
+export { __webpack_exports__BkBreadcrumb as BkBreadcrumb, __webpack_exports__BkBreadcrumbItem as BkBreadcrumbItem, __webpack_exports__default as default };

package/lib/breadcrumb/props.d.ts

@@ -0,0 +1,4 @@
+export interface IBreadcrumbProps {
+    separator: string;
+    separatorClass: string;
+}

package/lib/button/button-group.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{
+    size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
+}>>, {}>;
+export default _default;

package/lib/button/button.css

@@ -0,0 +1,300 @@
+.bk-button {
+  display: inline-flex;
+  height: 32px;
+  padding: 5px 12px;
+  font-size: 14px;
+  color: #63656e;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: white;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  outline: none;
+  box-sizing: border-box;
+  transition: background-color ease 0.3s;
+  appearance: none;
+  align-items: center;
+  justify-content: center;
+}
+.bk-button.bk-button-primary {
+  background-color: #3a84ff;
+  color: white;
+  border-color: #3a84ff;
+}
+.bk-button.bk-button-primary:hover {
+  background-color: #5594fa;
+  border-color: #5594fa;
+}
+.bk-button.bk-button-primary:active {
+  background-color: #2c77f4;
+  border-color: #2c77f4;
+  color: white;
+}
+.bk-button.bk-button-primary.is-outline {
+  color: #3a84ff;
+  border-color: #3a84ff;
+  background-color: white;
+}
+.bk-button.bk-button-primary.is-outline:hover {
+  background-color: #5594fa;
+  border-color: #5594fa;
+  color: white;
+}
+.bk-button.bk-button-primary.is-text {
+  color: #3a84ff;
+  background-color: transparent;
+  border: none;
+}
+.bk-button.bk-button-primary.is-text:not(.is-disabled):hover {
+  color: #5594fa;
+}
+.bk-button.bk-button-primary.is-disabled {
+  color: #dcdee5;
+  cursor: not-allowed;
+}
+.bk-button.bk-button-primary.is-disabled:not(.is-text) {
+  background-color: #dcdee5;
+  color: white;
+  border-color: #dcdee5;
+}
+.bk-button.bk-button-hover-primary:hover {
+  background-color: #5594fa;
+  border-color: #5594fa;
+  color: white;
+}
+.bk-button.bk-button-warning {
+  background-color: #ff9c01;
+  color: white;
+  border-color: #ff9c01;
+}
+.bk-button.bk-button-warning:hover {
+  background-color: #ffb848;
+  border-color: #ffb848;
+}
+.bk-button.bk-button-warning:active {
+  background-color: #eb9000;
+  border-color: #eb9000;
+  color: white;
+}
+.bk-button.bk-button-warning.is-outline {
+  color: #ff9c01;
+  border-color: #ff9c01;
+  background-color: white;
+}
+.bk-button.bk-button-warning.is-outline:hover {
+  background-color: #ffb848;
+  border-color: #ffb848;
+  color: white;
+}
+.bk-button.bk-button-warning.is-text {
+  color: #ff9c01;
+  background-color: transparent;
+  border: none;
+}
+.bk-button.bk-button-warning.is-text:not(.is-disabled):hover {
+  color: #ffb848;
+}
+.bk-button.bk-button-warning.is-disabled {
+  color: #dcdee5;
+  cursor: not-allowed;
+}
+.bk-button.bk-button-warning.is-disabled:not(.is-text) {
+  background-color: #dcdee5;
+  color: white;
+  border-color: #dcdee5;
+}
+.bk-button.bk-button-hover-warning:hover {
+  background-color: #ffb848;
+  border-color: #ffb848;
+  color: white;
+}
+.bk-button.bk-button-success {
+  background-color: #2dcb56;
+  color: white;
+  border-color: #2dcb56;
+}
+.bk-button.bk-button-success:hover {
+  background-color: #45e35f;
+  border-color: #45e35f;
+}
+.bk-button.bk-button-success:active {
+  background-color: #1ab943;
+  border-color: #1ab943;
+  color: white;
+}
+.bk-button.bk-button-success.is-outline {
+  color: #2dcb56;
+  border-color: #2dcb56;
+  background-color: white;
+}
+.bk-button.bk-button-success.is-outline:hover {
+  background-color: #45e35f;
+  border-color: #45e35f;
+  color: white;
+}
+.bk-button.bk-button-success.is-text {
+  color: #2dcb56;
+  background-color: transparent;
+  border: none;
+}
+.bk-button.bk-button-success.is-text:not(.is-disabled):hover {
+  color: #45e35f;
+}
+.bk-button.bk-button-success.is-disabled {
+  color: #dcdee5;
+  cursor: not-allowed;
+}
+.bk-button.bk-button-success.is-disabled:not(.is-text) {
+  background-color: #dcdee5;
+  color: white;
+  border-color: #dcdee5;
+}
+.bk-button.bk-button-hover-success:hover {
+  background-color: #45e35f;
+  border-color: #45e35f;
+  color: white;
+}
+.bk-button.bk-button-danger {
+  background-color: #ea3636;
+  color: white;
+  border-color: #ea3636;
+}
+.bk-button.bk-button-danger:hover {
+  background-color: #ff5656;
+  border-color: #ff5656;
+}
+.bk-button.bk-button-danger:active {
+  background-color: #db2626;
+  border-color: #db2626;
+  color: white;
+}
+.bk-button.bk-button-danger.is-outline {
+  color: #ea3636;
+  border-color: #ea3636;
+  background-color: white;
+}
+.bk-button.bk-button-danger.is-outline:hover {
+  background-color: #ff5656;
+  border-color: #ff5656;
+  color: white;
+}
+.bk-button.bk-button-danger.is-text {
+  color: #ea3636;
+  background-color: transparent;
+  border: none;
+}
+.bk-button.bk-button-danger.is-text:not(.is-disabled):hover {
+  color: #ff5656;
+}
+.bk-button.bk-button-danger.is-disabled {
+  color: #dcdee5;
+  cursor: not-allowed;
+}
+.bk-button.bk-button-danger.is-disabled:not(.is-text) {
+  background-color: #dcdee5;
+  color: white;
+  border-color: #dcdee5;
+}
+.bk-button.bk-button-hover-danger:hover {
+  background-color: #ff5656;
+  border-color: #ff5656;
+  color: white;
+}
+.bk-button.bk-button-small {
+  height: 26px;
+  padding: 3px 12px;
+  font-size: 12px;
+}
+.bk-button.bk-button-large {
+  height: 38px;
+  padding: 8px 20px;
+  font-size: 16px;
+}
+.bk-button .bk-button-text {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+.bk-button.is-loading {
+  position: relative;
+}
+.bk-button.is-loading .bk-button-loading:not(:last-child) {
+  position: absolute;
+}
+.bk-button.is-loading .bk-button-text {
+  visibility: hidden;
+}
+.bk-button:hover {
+  border-color: #979ba5;
+}
+.bk-button:active {
+  color: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-button.is-text {
+  height: auto;
+  padding: 0;
+  font-size: inherit;
+  color: #63656e;
+  text-decoration: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+.bk-button.is-disabled {
+  color: #dcdee5;
+  cursor: not-allowed;
+  border-color: #dcdee5;
+}
+.bk-button-group {
+  display: inline-block;
+  font-size: 0;
+}
+.bk-button-group.bk-button-group-small .bk-button {
+  height: 26px;
+  padding: 3px 12px;
+  font-size: 12px;
+}
+.bk-button-group.bk-button-group-large .bk-button {
+  height: 38px;
+  padding: 8px 20px;
+  font-size: 16px;
+}
+.bk-button-group .bk-button {
+  height: 32px;
+  margin: 0 0 0 -1px;
+  border-radius: 0;
+}
+.bk-button-group .bk-button:not(.is-disabled) {
+  color: #63656e;
+  background-color: white;
+  border-color: #c4c6cc;
+}
+.bk-button-group .bk-button.is-disabled {
+  color: #c4c6cc;
+}
+.bk-button-group .bk-button:first-child {
+  border-radius: 2px 0 0 2px;
+}
+.bk-button-group .bk-button:last-child {
+  border-radius: 0 2px 2px 0;
+}
+.bk-button-group .bk-button:only-child {
+  border-radius: 2px;
+}
+.bk-button-group .bk-button:hover:not(.is-disabled),
+.bk-button-group .bk-button.is-selected:not(.is-disabled) {
+  position: relative;
+  z-index: 1;
+  color: #3a84ff;
+  background-color: white;
+  border-color: #3a84ff;
+}
+.bk-button-group .bk-button.is-selected:not(.is-disabled) {
+  background-color: #e1ecff;
+}
+.bk-button-group .bk-button.is-selected.is-disabled {
+  background-color: #f0f1f5;
+}