bkui-vue 0.0.1-beta.4 → 0.0.1-beta.40

package/lib/switcher/switcher.d.ts

@@ -45,38 +45,54 @@ declare const _default: import("vue").DefineComponent<{
     modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    theme?: unknown;
-    size?: unknown;
-    disabled?: unknown;
-    showText?: unknown;
-    isOutline?: unknown;
-    onText?: unknown;
-    offText?: unknown;
-    isSquare?: unknown;
-    extCls?: unknown;
-    preCheck?: unknown;
-    trueValue?: unknown;
-    falseValue?: unknown;
-    value?: unknown;
-    modelValue?: unknown;
-} & {
-    theme: string;
-    value: string | number | boolean;
-    extCls: string;
-    disabled: boolean;
-    modelValue: string | number | boolean;
-    showText: boolean;
-    isOutline: boolean;
-    onText: string;
-    offText: string;
-    isSquare: boolean;
-    trueValue: string | number | boolean;
-    falseValue: string | number | boolean;
-} & {
-    size?: string;
-    preCheck?: (...args: any[]) => any;
-}> & {
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    theme: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    size: import("vue-types").VueTypeDef<string>;
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    showText: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    isOutline: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    onText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    offText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    isSquare: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    preCheck: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    trueValue: import("vue-types").VueTypeDef<string | number | boolean> & {
+        default: string | number | boolean;
+    };
+    falseValue: import("vue-types").VueTypeDef<string | number | boolean> & {
+        default: string | number | boolean;
+    };
+    value: import("vue-types").VueTypeDef<string | number | boolean> & {
+        default: string | number | boolean;
+    };
+    modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
+        default: string | number | boolean;
+    };
+}>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {

package/lib/switcher/switcher.js

@@ -0,0 +1 @@
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("../shared"),require("@babel/runtime/helpers/defineProperty"),require("vue"),require("../icon"));else if("function"==typeof define&&define.amd)define(["../shared","@babel/runtime/helpers/defineProperty","vue","../icon"],r);else{var o="object"==typeof exports?r(require("../shared"),require("@babel/runtime/helpers/defineProperty"),require("vue"),require("../icon")):r(e["../shared"],e["@babel/runtime/helpers/defineProperty"],e.vue,e["../icon"]);for(var t in o)("object"==typeof exports?exports:e)[t]=o[t]}}(self,((e,r,o,t)=>(()=>{"use strict";var n={6870:e=>{e.exports=t},4212:r=>{r.exports=e},311:e=>{e.exports=r},748:e=>{e.exports=o}},s={};function u(e){var r=s[e];if(void 0!==r)return r.exports;var o=s[e]={exports:{}};return n[e](o,o.exports,u),o.exports}u.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return u.d(r,{a:r}),r},u.d=(e,r)=>{for(var o in r)u.o(r,o)&&!u.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},u.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),u.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var p={};return(()=>{u.r(p),u.d(p,{default:()=>i});var e=u(4212),r=u(311),o=u.n(r),t=u(748),n=u(6870);const s=(0,t.defineComponent)({name:"Switcher",props:{theme:e.PropTypes.theme().def(""),size:e.PropTypes.size(),disabled:e.PropTypes.bool,showText:e.PropTypes.bool,isOutline:e.PropTypes.bool,onText:e.PropTypes.string.def("ON"),offText:e.PropTypes.string.def("OFF"),isSquare:e.PropTypes.bool,extCls:e.PropTypes.string,preCheck:e.PropTypes.func.def(void 0),trueValue:e.PropTypes.oneOfType([e.PropTypes.string,e.PropTypes.number,e.PropTypes.bool]).def(!0),falseValue:e.PropTypes.oneOfType([e.PropTypes.string,e.PropTypes.number,e.PropTypes.bool]).def(!1),value:e.PropTypes.oneOfType([e.PropTypes.string,e.PropTypes.number,e.PropTypes.bool]).def(!1),modelValue:e.PropTypes.oneOfType([e.PropTypes.string,e.PropTypes.number,e.PropTypes.bool]).def(!1)},emits:["update:modelValue","change"],setup:function(e,r){var s=r.emit,u=(this.$createElement,(0,t.ref)(!1)),p=(0,t.computed)((function(){return e.trueValue===a.value})),i=(0,t.ref)(!1!==e.modelValue),a=(0,t.computed)((function(){return i.value?e.modelValue:e.value})),l=(0,t.computed)((function(){var r,t=(r={},o()(r,e.extCls,!!e.extCls),o()(r,"bk-switcher",!0),o()(r,"bk-switcher-outline",e.isOutline),o()(r,"bk-switcher-square",e.isSquare),o()(r,"show-label",e.showText),o()(r,"is-disabled",e.disabled),o()(r,"is-checked",p.value),o()(r,"is-unchecked",!p.value),o()(r,"is-loading",u.value),o()(r,"primary","primary"===e.theme),r);return e.size&&!e.showText&&(t["bk-switcher-".concat(e.size)]=!0),e.size||(t["bk-switcher-nomal"]=!0),t}));(0,t.watch)((function(){return e.modelValue}),(function(){i.value=!0})),(0,t.watch)((function(){return e.value}),(function(){i.value=!1}));var f=function(r){if(r.stopPropagation(),r.preventDefault(),!e.disabled&&!u.value){var o=p.value?e.falseValue:e.trueValue,t=!p.value,n=function(){s("update:modelValue",o),s("change",t)},i=!0;if("function"==typeof e.preCheck&&"function"==typeof(i=e.preCheck(o)).then)return u.value=!0,i.then((function(){n()})).finally((function(){u.value=!1}));i&&n()}};return function(){return(0,t.createVNode)("div",{class:l.value,onClick:f,tabindex:"0",onKeydown:f},[u.value?(0,t.createVNode)(n.SwitcherLoading,{class:"bk-switcher-loading"},null):"",e.showText?(0,t.createVNode)("span",{class:"switcher-text"},[p.value?e.onText:e.offText]):""])}}}),i=(0,e.withInstall)(s)})(),p})()));

package/lib/switcher/switcher.less

@@ -3,162 +3,181 @@
 
 .@{bk-prefix}-switcher {
   position: relative;
+  position: relative;
+  display: inline-block;
   display: inline-block;
+  height: 20px;
 
   /* 默认尺寸 */
-  width: 36px;
-  height: 20px;
+  min-width: 36px;
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
   line-height: 20px;
   text-align: left;
   vertical-align: middle;
+  list-style: none;
+  cursor: pointer;
   background-color: @switch-grey-color;
+  border: 1px solid transparent;
   border-radius: 50px;
+  border-radius: 100px;
+  box-sizing: border-box;
   transition: all .4s ease;
-
-  &:focus {
-    box-shadow: 0px 0px 6px @switch-grey-color;
-  }
+  transition: all .36s;
+  user-select: none;
 
   &:after {
     position: absolute;
-    top: 2px;
-    left: 2px;
-    display: block;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    background: @switch-default-color;
-    border-radius: 100px;
-    content: '';
-    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
-    transition: all .3s ease
-  }
-
-  &:not(.show-label):after {
+    top: 1px;
+    left: 1px;
     width: 16px;
     height: 16px;
+    cursor: pointer;
+    background: @switch-default-color;
+    background-color: #fff;
+    border-radius: 18px;
+    content: ' ';
+    transition: all .3s ease;
   }
 
-  &:not(.show-label).is-checked {
-    &:after {
-      margin-left: -18px;
-    }
+  .switcher-text {
+    display: block;
+    margin-right: 6px;
+    margin-left: 28px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #fff;
+    text-align: center;
+    transition: all .3s ease;
   }
 
-  &.is-loading {
-    cursor: defalt;
+  .animating-node {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    pointer-events: none;
+    border-radius: inherit;
+    content: '';
+    // box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
+    opacity: .2;
+    box-shadow: 0 0 0 0 #1890ff;
+    animation: fadeEffect 2s cubic-bezier(.08,.82,.17,1),waveEffect .4s cubic-bezier(.08,.82,.17,1);
+    animation-fill-mode: forwards;
 
-    input[type=checkbox] {
-      cursor: default;
-    }
   }
 
+
   .bk-switcher-loading {
     position: absolute;
-    top: 50%;
+    top: 1px;
     left: 1px;
-    z-index: 10;
-    display: flex;
-    width: 18px;
-    height: 18px;
-    transform: translateY(-50%);
+    z-index: 1;
+    width: 16px;
+    height: 16px;
+    font-size: 12px;
+    color: @switch-grey-color;
+    cursor: pointer;
+    background: transparent;
+    border-radius: 16px;
+    content: ' ';
+    transition: all .36s cubic-bezier(.78,.14,.15,.86);
 
     svg {
-      color: rgb(58, 132, 255);;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+      animation: loading 1s linear infinite 
     }
   }
 
-  .switcher-label {
-    display: none;
-    width: 30px;
-    height: 28px;
-    margin: 0 0 0 26px;
-    font-size: 12px;
-    font-weight: normal;
-    color: @switch-default-color;
-    text-align: center;
-    vertical-align: top;
-    transition: all ease .3s;
-
-    .on-text {
-      display: none;
-    }
+  &.is-loading {
+    cursor: defalt;
 
-    .off-text {
-      display: inline-block
+    input[type=checkbox] {
+      cursor: default;
     }
   }
 
   /* 显示文本时固定尺寸 */
   &.show-label {
-    width: 60px;
     height: 28px;
+    min-width: 60px;
     line-height: 28px;
 
-    .switcher-label {
-      display: inline-block;
+    &::after {
+      width: 24px;
+      height: 24px;
     }
 
     .bk-switcher-loading {
-      width: 26px;
-      height: 26px;
-      align-items: center;
-      justify-content: center;
+      width: 24px;
+      height: 24px;
+      font-size: 20px;
+    }
+  }
 
-      svg {
-        font-size: 24px;
-      }
+  &.show-label.is-checked {
+    .bk-switcher-loading {
+      left: 100%;
+      margin-left: -25px;
     }
   }
 
   &.is-disabled {
-    cursor: default;
-
-    /* background-color: #eee !important; */
+    cursor: not-allowed;
     opacity: .3;
 
-    input[type=checkbox] {
+    .bk-switcher-loading {
       cursor: not-allowed;
     }
-  }
 
+    &::after {
+      cursor: not-allowed;
+    }
+  }
+  
   &.is-checked {
     background: @success-color;
-
-    &:focus {
-      box-shadow: 0px 0px 6px @success-color;
+    
+    .bk-switcher-loading {
+      svg {
+        color: @success-color;
+      }
     }
 
-    &.primary {
+    &:not(.bk-switcher-outline)&.primary {
       background: @primary-color;
 
-      &:focus {
-        box-shadow: 0px 0px 6px @primary-color;
+      .bk-switcher-loading {
+        svg {
+          color: @primary-color;
+        }
       }
     }
 
     &:after {
-      top: 2px;
       left: 100%;
-      margin-left: -26px;
+      margin-left: -1px;
+      transform: translateX(-100%);
     }
 
-    .switcher-label {
-      margin-left: 4px;
-
-      .on-text {
-        display: inline-block;
-      }
-
-      .off-text {
-        display: none;
-      }
+    .switcher-text {
+      margin-right: 28px;
+      margin-left: 6px;
     }
 
-    .bk-switcher-loading {
-      right: 1px;
-      left: auto;
-    }
+  }
+
+  &:not(.show-label).is-checked .bk-switcher-loading {
+    left: 100%;
+    margin-left: -17px;
   }
 
   &.bk-switcher-outline {
@@ -166,64 +185,63 @@
     border: 1px solid @switch-grey-color;
 
     &:after {
-      width: 22px;
-      height: 22px;
+      width: 24px;
+      height: 24px;
       background-color: @switch-grey-color;
       box-shadow: none;
     }
 
-    .switcher-label {
-      height: 26px;
-      margin-left: 24px;
+    .switcher-text {
       color: @switch-grey-color;
     }
 
-    .bk-switcher-loading {
-      width: 22px;
-      height: 22px;
-      align-items: center;
-      justify-content: center;
-    }
+
 
     &.is-checked {
       border: 1px solid @success-color;
 
       &:after {
-        margin-left: -24px;
+        // margin-left: -33px;
         background-color: @success-color;
       }
 
-      .switcher-label {
-        margin-left: 4px;
+      .switcher-text {
         color: @success-color;
       }
+
     }
 
-    &.is-disabled {
-      background-color: @switch-default-color;
-      border-color: #eee;
+    // &.is-disabled {
+    //   background-color: @switch-default-color;
+    //   border-color: #eee;
 
-      .switcher-label {
-        color: #eee;
-      }
+    //   .switcher-text {
+    //     color: #eee;
+    //   }
 
-      &:after {
-        background-color: #eee;
+    //   &:after {
+    //     background-color: #eee;
+    //   }
+    // }
+
+    .bk-switcher-loading {
+      svg {
+        color: #fff;
       }
     }
+  }
 
-    &.bk-switcher-large {
+  &.bk-switcher-outline&.primary {
+    &.is-checked {
+      border: 1px solid @primary-color;
       &:after {
-        width: 18px;
-        height: 18px;
+        background: @primary-color;
       }
-
-      &.is-checked {
-        &:after {
-          margin-left: -20px;
-        }
+      .switcher-text {
+        color: @primary-color;
       }
     }
+
   }
 
   &.bk-switcher-square {
@@ -232,40 +250,43 @@
     &:after {
       border-radius: 2px;
     }
-
-    .switcher-label {
-      width: 35px;
-    }
   }
 
   &.bk-switcher-large {
-    width: 42px;
     height: 24px;
+    min-width: 42px;
     line-height: 22px;
-    border-radius: 12px;
-
+    
     &:after {
       width: 20px;
       height: 20px;
     }
 
+    .bk-switcher-loading {
+      width: 20px;
+      height: 20px;
+      font-size: 16px;
+    }
+
     &.is-checked {
-      &:after {
-        top: 2px;
-        left: 100%;
-        margin-left: -22px;
+      .bk-switcher-loading {
+        margin-left: -21px;
       }
     }
 
-    .bk-switcher-loading {
-      width: 22px;
-      height: 22px;
-    }
+    // &.is-checked {
+    //   &:after {
+    //     top: 2px;
+    //     left: 100%;
+    //     margin-left: -22px;
+    //   }
+
+    // }
   }
 
   &.bk-switcher-small {
-    width: 26px;
     height: 16px;
+    min-width: 26px;
     line-height: 22px;
 
     &:after {
@@ -273,30 +294,65 @@
       height: 12px;
     }
 
-    &.is-checked {
-      &:after {
-        top: 2px;
-        left: 100%;
-        margin-left: -14px;
-      }
+    .bk-switcher-loading {
+      width: 12px;
+      height: 12px;
+      font-weight: 700;
+      transform: scale(.66667);
     }
+  }
 
+  &.bk-switcher-small.is-checked {
     .bk-switcher-loading {
-      width: 14px;
-      height: 14px;
+      margin-left: -13px;
     }
+   
   }
+}
 
-  input[type=checkbox],
-  input[type=radio] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    cursor: pointer;
+&:not(.show-label).bk-switcher-nomal.bk-switcher-outline {
+  &::after {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+&:not(.show-label).bk-switcher-outline.is-checked.bk-switcher-small {
+  &::after {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+&:not(.show-label).bk-switcher-outline.is-checked.bk-switcher-large {
+  &::after {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+&:not(.show-label).bk-switcher-outline.is-checked {
+  &::after {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+
+@keyframes fadeEffect {
+  100% {
     opacity: 0;
   }
 }
+
+@keyframes waveEffect {
+  100% {
+    box-shadow: 0 0 0 #1890ff;
+  } 
+}
+
+@keyframes loading {
+  100% {
+    transform: rotate(1turn);
+  }
+}