bkui-vue 0.0.1-beta.1 → 0.0.1-beta.101

package/lib/button/index.js

@@ -1,206 +1 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.bkuiVue = {}, global.Vue));
-}(this, (function (exports, vue) { 'use strict';
-
-  function classes(dynamicCls, constCls = '') {
-    return Object.entries(dynamicCls).filter(entry => entry[1]).map(entry => entry[0]).join(' ').concat(constCls ? ` ${constCls}` : '');
-  }
-
-  var Button = vue.defineComponent({
-    name: 'BkButton',
-    props: {
-      /**
-       * 按钮主题 可以用按钮样式【default primary success warning danger】
-       * @values default, primary, warning, success, danger
-       */
-      theme: {
-        type: String,
-        default: 'default',
-        validator: value => {
-          const themes = ['default', 'primary', 'warning', 'success', 'danger'];
-
-          if (themes.indexOf(value) < 0) {
-            console.error(`theme property is not valid: '${value}',【${themes.join(' | ')}】`);
-            return false;
-          }
-
-          return true;
-        }
-      },
-
-      /**
-       * mouseover 按钮类型，当设置了此属性时，theme 和 text 失效
-       */
-      hoverTheme: {
-        type: String,
-        default: '',
-        validator: value => {
-          const hoverThemes = ['', 'primary', 'warning', 'success', 'danger'];
-
-          if (hoverThemes.indexOf(value) < 0) {
-            console.error(`hoverTheme property is not valid: '${value}', 【${hoverThemes.join(' | ')}】`);
-            return false;
-          }
-
-          return true;
-        }
-      },
-
-      /**
-       * 按钮尺寸
-       */
-      size: {
-        type: String,
-        default: 'normal',
-        validator: value => {
-          const sizes = ['small', 'normal', 'large'];
-
-          if (sizes.indexOf(value) < 0) {
-            console.error(`size property is not valid: '${value}', 【${sizes.join(' | ')}】`);
-            return false;
-          }
-
-          return true;
-        }
-      },
-
-      /**
-       * title 文案
-       */
-      title: {
-        type: String,
-        default: ''
-      },
-
-      /**
-       * 配置自定义样式类名，传入的类会被加在组件最外层的 DOM button 上
-       */
-      extCls: {
-        type: String,
-        default: ''
-      },
-
-      /**
-       * 左侧图标，设置为 loading 的时候，会显示转圈的 loading 效果。
-       */
-      icon: String,
-
-      /**
-       * 右侧图标，设置为 loading 的时候，会显示转圈的 loading 效果。
-       */
-      iconRight: String,
-
-      /**
-       * 是否禁用
-       */
-      disabled: Boolean,
-
-      /**
-       * 是否加载中
-       */
-      loading: Boolean,
-
-      /**
-       * 是否显示反色按钮
-       */
-      outline: Boolean,
-
-      /**
-       * 是否是文字按钮
-       */
-      text: Boolean
-    },
-    emits: ['click'],
-    methods: {
-      onClick() {
-        /**
-         * Success event.
-         * @event click
-         */
-        this.$emit('click');
-      }
-
-    },
-
-    setup(props, {
-      slots
-    }) {
-      var _a;
-
-      const showSlot = (_a = slots.default) !== null && _a !== void 0 ? _a : false;
-      const btnClsPrefix = 'bk-button';
-      const isText = props.text ? `${btnClsPrefix}-text` : btnClsPrefix;
-      const hoverTheme = props.hoverTheme ? `${btnClsPrefix}-hover bk-${props.hoverTheme}` : '';
-      const themeCls = `${btnClsPrefix}-${props.theme}`;
-      const sizeCls = `${btnClsPrefix}-${props.size}`;
-      const classs = classes({
-        'is-disabled': props.disabled,
-        'is-loading': props.loading,
-        'is-outline': props.outline,
-        'no-slot': !showSlot
-      }, `${themeCls} ${isText} ${hoverTheme} ${sizeCls}`);
-
-      function isLoadingIcon(icon) {
-        return icon === 'loading';
-      }
-
-      const loadingSpan = vue.createVNode("span", {
-        "class": "loading"
-      }, null);
-
-      const isRightIconLoading = isLoadingIcon(props.iconRight);
-      const isLeftIconLoading = isLoadingIcon(props.icon);
-      const bkLoadingCls = `${btnClsPrefix}-loading`;
-      const iconClsPrefix = 'bk-icon';
-      const btnIconLoadingCls = `${btnClsPrefix}-icon-loading`;
-      const iconLeftCls = classes({
-        [btnIconLoadingCls]: isLeftIconLoading
-      }, `${iconClsPrefix} left-icon icon-${props.icon}`);
-      const iconRightCls = classes({
-        [btnIconLoadingCls]: isRightIconLoading
-      }, `${iconClsPrefix} right-icon icon-${props.iconRight}`);
-      return {
-        bkLoadingCls,
-        btnClsPrefix,
-        loadingSpan,
-        classs,
-        iconLeftCls,
-        iconRightCls,
-        isLeftIconLoading,
-        isRightIconLoading
-      };
-    },
-
-    render() {
-      var _a, _b, _c;
-
-      return vue.createVNode("button", vue.mergeProps({
-        "title": this.$props.title,
-        "disabled": this.$props.disabled,
-        "class": this.classs
-      }, this.$attrs), [this.$props.loading ? vue.createVNode("div", {
-        "class": this.bkLoadingCls
-      }, [[1, 2, 3, 4].map(i => vue.createVNode("div", {
-        "class": `bounce${i}`
-      }, null))]) : vue.createVNode("div", {
-        "class": "bk-button-content-wrapper"
-      }, [this.$props.icon && vue.createVNode("i", {
-        "class": this.iconLeftCls
-      }, [this.isLeftIconLoading && this.loadingSpan]), vue.createVNode("span", null, [(_c = (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : 'default']), this.$props.iconRight && vue.createVNode("i", {
-        "class": this.iconRightCls
-      }, [this.isRightIconLoading && this.loadingSpan])])]);
-    }
-
-  });
-
-  Button.install = Vue => {
-    Vue.component(Button.name, Button);
-  };
-
-  exports.default = Button;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o(require("../shared"),require("vue"),require("../loading"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../loading"],o);else{var t="object"==typeof exports?o(require("../shared"),require("vue"),require("../loading")):o(e["../shared"],e.vue,e["../loading"]);for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(self,((e,o,t)=>(()=>{"use strict";var n={4870:e=>{e.exports=t},4212:o=>{o.exports=e},748:e=>{e.exports=o}},r={};function i(e){var o=r[e];if(void 0!==o)return o.exports;var t=r[e]={exports:{}};return n[e](t,t.exports,i),t.exports}i.n=e=>{var o=e&&e.__esModule?()=>e.default:()=>e;return i.d(o,{a:o}),o},i.d=(e,o)=>{for(var t in o)i.o(o,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},i.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),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,{BkButton:()=>c,BkButtonGroup:()=>d,default:()=>p});var e=i(4212);function o(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}var t=i(748),n=i(4870),r=i.n(n),u=["","small","large"],l={theme:e.PropTypes.theme().def(""),hoverTheme:e.PropTypes.theme(["primary","warning","success","danger"]).def(""),size:e.PropTypes.size(u).def(""),title:e.PropTypes.string,icon:e.PropTypes.string,iconRight:e.PropTypes.string,disabled:e.PropTypes.bool,loading:e.PropTypes.bool,loadingMode:e.PropTypes.commonType(Object.values(n.BkLoadingMode)),outline:e.PropTypes.bool,text:e.PropTypes.bool,nativeType:{type:String}};const s=(0,t.defineComponent)({name:"Button",props:l,emits:["click","mouseover"],setup:function(i,a){var l,s=a.slots,d=a.attrs,c=a.emit,p=(0,t.ref)(!1),v=null!==(l=s.default)&&void 0!==l&&l,f="bk-button",m=(0,t.computed)((function(){return i.text&&!i.hoverTheme})),b=(0,t.computed)((function(){var t,n=i.hoverTheme?"".concat(f,"-hover-").concat(i.hoverTheme):"",r=i.theme?"".concat(f,"-").concat(i.theme):"",a=i.hoverTheme?"":r;return(0,e.classes)((o(t={"is-disabled":i.disabled,"is-outline":i.outline,"is-text":m.value},"".concat(f,"-").concat(i.size),i.size&&u.includes(i.size)),o(t,"no-slot",!v),t),"".concat(a," ").concat(f," ").concat(n))})),g=(0,t.computed)((function(){return i.text||i.outline||i.hoverTheme?p.value&&!i.text?"white":i.text&&i.disabled?"":i.hoverTheme||i.theme:["","default"].includes(i.theme)?"":"white"})),y=(0,t.computed)((function(){return m.value||i.size===n.BkLoadingSize.Small?n.BkLoadingSize.Mini:n.BkLoadingSize.Small})),h=function(){i.loading||c("click")},T=function(){p.value=!0,c("mouseover")},x=function(){p.value=!1};return function(){var e;return(0,t.createVNode)("button",(0,t.mergeProps)({title:i.title,disabled:i.disabled,class:b.value,type:i.nativeType},d,{onClick:h,onMouseover:T,onMouseleave:x}),[i.loading&&(0,t.createVNode)(r(),{loading:!0,class:"".concat(f,"-loading"),mode:i.loadingMode,theme:g.value,size:y.value},null),s.default&&!i.loading&&(0,t.createVNode)("span",{class:"".concat(f,"-text")},[null===(e=s.default)||void 0===e?void 0:e.call(s)])])}}}),d=(0,t.defineComponent)({name:"ButtonGroup",props:{size:e.PropTypes.size()},setup:function(n,r){var i=(0,t.computed)((function(){return(0,e.classes)(o({},"bk-button-group-".concat(n.size),!!n.size),"bk-button-group")}));return function(){var e,o;return(0,t.createVNode)("div",{class:i.value},[null===(o=(e=r.slots).default)||void 0===o?void 0:o.call(e)])}}});var c=(0,e.withInstallProps)(s,{ButtonGroup:d});const p=c})(),a})()));

package/lib/card/card.css

@@ -0,0 +1,115 @@
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.clearfix-style::after {
+  display: block;
+  height: 0;
+  clear: both;
+  font-size: 0;
+  content: '';
+  visibility: hidden;
+}
+.bk-card {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  background: white;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+}
+.bk-card:hover {
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
+}
+.bk-card .bk-card-head {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 50px;
+  padding: 0 20px;
+  line-height: 50px;
+  border-bottom: 1px solid #f0f2f5;
+}
+.bk-card .bk-card-head .title {
+  font-weight: 600;
+  color: #63656e;
+  display: inline-block;
+  max-width: 92%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-card .bk-card-head .bk-card-input {
+  display: inline-block;
+  line-height: 32px;
+}
+.bk-card .bk-card-head.no-line-height {
+  line-height: unset;
+}
+.bk-card .bk-card-head.collapse {
+  border-bottom: none;
+}
+.bk-card .bk-card-head .bk-card-icon {
+  position: absolute;
+  top: -2px;
+  font-size: 18px;
+  color: #979ba5;
+  cursor: pointer;
+}
+.bk-card .bk-card-edit {
+  display: inline-block;
+  margin-left: 4px;
+  font-size: 18px;
+  line-height: 45px;
+  color: #c4c6cc;
+  cursor: pointer;
+}
+.bk-card .bk-card-head-left {
+  padding-right: 20px;
+  padding-left: 30px;
+}
+.bk-card .bk-card-head-left .bk-card-icon {
+  left: 10px;
+}
+.bk-card .bk-card-head-right {
+  padding-right: 30px;
+  padding-left: 20px;
+}
+.bk-card .bk-card-head-right .bk-card-icon {
+  right: 10px;
+}
+.bk-card .bk-card-body {
+  width: 100%;
+  padding: 0 20px;
+  text-align: left;
+}
+.bk-card .bk-card-footer {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  border-top: 1px solid #f0f2f5;
+  border-bottom: 1px solid #f0f2f5;
+}
+.bk-card-border-none {
+  border: none;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
+}

package/lib/card/card.d.ts

@@ -0,0 +1,110 @@
+declare const _default: import("vue").DefineComponent<{
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    showHeader: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showFooter: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    collapseStatus: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    border: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disableHeaderStyle: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    position: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    isEdit: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    isCollapse: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, {
+    collapseActive: import("vue").Ref<boolean>;
+    showInput: import("vue").Ref<boolean>;
+    renderTitle: import("vue").Ref<string>;
+    handleCollapse: () => void;
+    saveEdit: () => void;
+    clickEdit: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:collapseStatus" | "edit")[], "update:collapseStatus" | "edit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    showHeader: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showFooter: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    collapseStatus: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    border: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disableHeaderStyle: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    position: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    isEdit: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    isCollapse: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:collapseStatus"?: (...args: any[]) => any;
+    onEdit?: (...args: any[]) => any;
+}, {
+    title: string;
+    position: string;
+    border: boolean;
+    showHeader: boolean;
+    showFooter: boolean;
+    collapseStatus: boolean;
+    disableHeaderStyle: boolean;
+    isEdit: boolean;
+    isCollapse: boolean;
+}>;
+export default _default;

package/lib/card/card.less

@@ -0,0 +1,92 @@
+@import '../styles/themes/themes.less';
+@import '../styles/mixins/mixins.less';
+
+@border-color: #f0f2f5;
+
+.@{bk-prefix}-card {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  background: @white-color;
+  border: @border-width-base @border-style-base @disable-color;
+  border-radius: @border-radius-base;
+
+  &:hover {
+    box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
+  }
+  .@{bk-prefix}-card-head {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 50px;
+    padding: 0 20px;
+    line-height: 50px;
+    border-bottom: 1px solid @border-color;
+
+    .title {
+      display: inline-block;
+      font-weight: 600;
+      color: @default-color;
+      .ellipsis-style(92%);
+    }
+    .@{bk-prefix}-card-input {
+      display: inline-block;
+      line-height: 32px;
+    }
+
+    &.no-line-height {
+      line-height: unset;
+    }
+
+    &.collapse {
+      border-bottom: none;
+    }
+    .@{bk-prefix}-card-icon {
+      position: absolute;
+      top: -2px;
+      font-size: 18px;
+      color: #979ba5;
+      cursor: pointer;
+    }
+  }
+  .@{bk-prefix}-card-edit {
+    display: inline-block;
+    margin-left: 4px;
+    font-size: 18px;
+    line-height: 45px;
+    color: #c4c6cc;
+    cursor: pointer;
+  }
+  .@{bk-prefix}-card-head-left {
+    padding-right: 20px;
+    padding-left: 30px;
+    .@{bk-prefix}-card-icon {
+      left: 10px;
+    }
+  }
+  .@{bk-prefix}-card-head-right {
+    padding-right: 30px;
+    padding-left: 20px;
+    .@{bk-prefix}-card-icon {
+      right: 10px;
+    }
+  }
+  .@{bk-prefix}-card-body {
+    width: 100%;
+    padding: 0 20px;
+    text-align: left;
+  }
+  .@{bk-prefix}-card-footer {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    border-top: 1px solid @border-color;
+    border-bottom: 1px solid @border-color;
+  }
+}
+.@{bk-prefix}-card-border-none {
+  border: none;
+  box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
+}