vue-devui 1.0.0-rc.6 → 1.0.0-rc.9

package/switch/index.es.js

@@ -29,6 +29,29 @@ const switchProps = {
     default: void 0
   }
 };
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var _switch = "";
 var Switch = defineComponent({
   name: "DSwitch",
@@ -66,11 +89,12 @@ var Switch = defineComponent({
       color,
       toggle
     } = this;
+    const ns = useNamespace("switch");
     const outerCls = {
-      "devui-switch": true,
-      [`devui-switch-${size}`]: size !== "",
-      "devui-checked": checked,
-      "devui-disabled": disabled
+      [ns.b()]: true,
+      [ns.m(size)]: size !== "",
+      [ns.m("checked")]: checked,
+      [ns.m("disabled")]: disabled
     };
     const outerStyle = [`background: ${checked && !disabled ? color : ""}`, `border-color: ${checked && !disabled ? color : ""}`];
     const checkedContent = renderSlot(useSlots(), "checkedContent");
@@ -80,9 +104,9 @@ var Switch = defineComponent({
       "style": outerStyle,
       "onClick": toggle
     }, [createVNode("span", {
-      "class": "devui-switch-inner-wrapper"
+      "class": ns.e("inner-wrapper")
     }, [createVNode("div", {
-      "class": "devui-switch-inner"
+      "class": ns.e("inner")
     }, [checked ? checkedContent : uncheckedContent])]), createVNode("small", null, null)]);
   }
 });

package/switch/index.umd.js

@@ -1 +1 @@
-(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.index={},n.Vue))})(this,function(n,e){"use strict";const r={size:{type:String,default:"md"},color:{type:String,default:void 0},checked:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},beforeChange:{type:Function,default:void 0},change:{type:Function,default:void 0},"onUpdate:checked":{type:Function,default:void 0}};var g="",i=e.defineComponent({name:"DSwitch",props:r,emits:["change","update:checked"],setup(t,o){const d=()=>{if(t.disabled)return Promise.resolve(!1);if(t.beforeChange){const c=t.beforeChange(!t.checked);return typeof c=="boolean"?Promise.resolve(c):c}return Promise.resolve(!0)};return{toggle:()=>{d().then(c=>{!c||(o.emit("update:checked",!t.checked),o.emit("change",!t.checked))})}}},render(){const{size:t,checked:o,disabled:d,color:s,toggle:c}=this,u={"devui-switch":!0,[`devui-switch-${t}`]:t!=="","devui-checked":o,"devui-disabled":d},a=[`background: ${o&&!d?s:""}`,`border-color: ${o&&!d?s:""}`],h=e.renderSlot(e.useSlots(),"checkedContent"),f=e.renderSlot(e.useSlots(),"uncheckedContent");return e.createVNode("span",{class:u,style:a,onClick:c},[e.createVNode("span",{class:"devui-switch-inner-wrapper"},[e.createVNode("div",{class:"devui-switch-inner"},[o?h:f])]),e.createVNode("small",null,null)])}}),l={title:"Switch \u5F00\u5173",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(t){t.component(i.name,i)}};n.Switch=i,n.default=l,n.switchProps=r,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.index={},o.Vue))})(this,function(o,t){"use strict";const f={size:{type:String,default:"md"},color:{type:String,default:void 0},checked:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},beforeChange:{type:Function,default:void 0},change:{type:Function,default:void 0},"onUpdate:checked":{type:Function,default:void 0}};function a(e,c,n){let d=e;return c&&(d+=`__${c}`),n&&(d+=`--${n}`),d}function m(e,c=!1){const n=c?`.devui-${e}`:`devui-${e}`;return{b:()=>a(n),e:s=>s?a(n,s):"",m:s=>s?a(n,"",s):"",em:(s,u)=>s&&u?a(n,s,u):""}}var y="",l=t.defineComponent({name:"DSwitch",props:f,emits:["change","update:checked"],setup(e,c){const n=()=>{if(e.disabled)return Promise.resolve(!1);if(e.beforeChange){const i=e.beforeChange(!e.checked);return typeof i=="boolean"?Promise.resolve(i):i}return Promise.resolve(!0)};return{toggle:()=>{n().then(i=>{!i||(c.emit("update:checked",!e.checked),c.emit("change",!e.checked))})}}},render(){const{size:e,checked:c,disabled:n,color:d,toggle:i}=this,r=m("switch"),h={[r.b()]:!0,[r.m(e)]:e!=="",[r.m("checked")]:c,[r.m("disabled")]:n},s=[`background: ${c&&!n?d:""}`,`border-color: ${c&&!n?d:""}`],u=t.renderSlot(t.useSlots(),"checkedContent"),p=t.renderSlot(t.useSlots(),"uncheckedContent");return t.createVNode("span",{class:h,style:s,onClick:i},[t.createVNode("span",{class:r.e("inner-wrapper")},[t.createVNode("div",{class:r.e("inner")},[c?u:p])]),t.createVNode("small",null,null)])}}),g={title:"Switch \u5F00\u5173",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.component(l.name,l)}};o.Switch=l,o.default=g,o.switchProps=f,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});

package/switch/style.css

@@ -1 +1 @@
-:host{display:inline-block;font-size:0;vertical-align:middle}.devui-switch{width:36px;height:18px;border-radius:10px;background:var(--devui-line, #adb0b8);border:1px solid var(--devui-line, #adb0b8);position:relative;display:inline-block;box-sizing:content-box;overflow:visible;padding:0;margin:0 5px 0 0;cursor:pointer;transition:var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-switch:not(.devui-checked):hover{border-color:var(--devui-line, #adb0b8)}.devui-switch:active{border-color:var(--devui-brand-active-focus, #344899)}.devui-switch.devui-checked:hover{border-color:var(--devui-brand-active, #526ecc)}.devui-switch .devui-switch-inner-wrapper{display:inline-block;width:100%;height:100%;padding-left:16px;font-size:var(--devui-font-size, 12px);color:var(--devui-global-bg, #f3f6f8)}.devui-switch .devui-switch-inner-wrapper .devui-switch-inner{color:#fff;font-weight:700;display:flex;width:100%;height:100%;align-items:center;justify-content:center;float:right}.devui-switch.devui-checked .devui-switch-inner-wrapper{padding-left:unset;padding-right:16px}.devui-switch small{width:16px;height:16px;background:var(--devui-light-text, #ffffff);border-radius:100%;position:absolute;top:1px;left:1px;transition:var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-switch.devui-checked small{left:19px}.devui-switch.devui-switch-lg{width:58px;height:30px;border-radius:16px}.devui-switch.devui-switch-lg .devui-switch-inner-wrapper{padding-left:28px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-switch.devui-switch-lg.devui-checked .devui-switch-inner-wrapper{padding-left:unset;padding-right:28px}.devui-switch.devui-switch-lg small{width:28px;height:28px;top:1px;left:1px}.devui-switch.devui-switch-lg.devui-checked small{background:var(--devui-light-text, #ffffff);left:29px}.devui-switch.devui-switch-sm{width:30px;height:14px;border-radius:8px}.devui-switch.devui-switch-sm .devui-switch-inner-wrapper{padding-left:12px;font-size:var(--devui-font-size, 12px)}.devui-switch.devui-switch-sm.devui-checked .devui-switch-inner-wrapper{padding-left:unset;padding-right:12px}.devui-switch.devui-switch-sm small{width:12px;height:12px;position:absolute}.devui-switch.devui-switch-sm.devui-checked small{left:17px}.devui-switch.devui-checked{background:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-switch.devui-checked:hover{background:var(--devui-brand-active, #526ecc);border-color:var(--devui-brand-active, #526ecc)}.devui-switch.devui-checked:active{background:var(--devui-brand-active-focus, #344899);border-color:var(--devui-brand-active-focus, #344899)}.devui-switch.devui-disabled,.devui-switch.devui-disabled:hover,.devui-switch.devui-disabled:active,.devui-switch.devui-disabled.devui-checked{cursor:not-allowed}.devui-switch.devui-disabled,.devui-switch.devui-disabled:hover,.devui-switch.devui-disabled:active{background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-switch.devui-disabled small,.devui-switch.devui-disabled:hover small,.devui-switch.devui-disabled:active small{background-color:var(--devui-unavailable, #f5f5f6)}.devui-switch.devui-disabled.devui-checked{background-color:var(--devui-icon-fill-active-disabled, #beccfa);border-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-switch.devui-disabled.devui-checked small{background-color:var(--devui-light-text, #ffffff)}
+:host{display:inline-block;font-size:0;vertical-align:middle}.devui-switch{width:36px;height:18px;border-radius:10px;background:var(--devui-line, #adb0b8);border:1px solid var(--devui-line, #adb0b8);position:relative;display:inline-block;box-sizing:content-box;overflow:visible;padding:0;margin:0 5px 0 0;cursor:pointer;transition:var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-switch:not(.devui-switch--checked):hover{border-color:var(--devui-line, #adb0b8)}.devui-switch:active{border-color:var(--devui-brand-active-focus, #344899)}.devui-switch.devui-switch--checked:hover{border-color:var(--devui-brand-active, #526ecc)}.devui-switch .devui-switch__inner-wrapper{display:inline-block;width:100%;height:100%;padding-left:16px;font-size:var(--devui-font-size, 12px);color:var(--devui-global-bg, #f3f6f8)}.devui-switch .devui-switch__inner-wrapper .devui-switch__inner{color:#fff;font-weight:700;display:flex;width:100%;height:100%;align-items:center;justify-content:center;float:right}.devui-switch.devui-switch--checked .devui-switch__inner-wrapper{padding-left:unset;padding-right:16px}.devui-switch small{width:16px;height:16px;background:var(--devui-light-text, #ffffff);border-radius:100%;position:absolute;top:1px;left:1px;transition:var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-switch.devui-switch--checked small{left:19px}.devui-switch.devui-switch--lg{width:58px;height:30px;border-radius:16px}.devui-switch.devui-switch--lg .devui-switch__inner-wrapper{padding-left:28px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-switch.devui-switch--lg.devui-switch--checked .devui-switch__inner-wrapper{padding-left:unset;padding-right:28px}.devui-switch.devui-switch--lg small{width:28px;height:28px;top:1px;left:1px}.devui-switch.devui-switch--lg.devui-switch--checked small{background:var(--devui-light-text, #ffffff);left:29px}.devui-switch.devui-switch--sm{width:30px;height:14px;border-radius:8px}.devui-switch.devui-switch--sm .devui-switch__inner-wrapper{padding-left:12px;font-size:var(--devui-font-size, 12px)}.devui-switch.devui-switch--sm.devui-switch--checked .devui-switch__inner-wrapper{padding-left:unset;padding-right:12px}.devui-switch.devui-switch--sm small{width:12px;height:12px;position:absolute}.devui-switch.devui-switch--sm.devui-switch--checked small{left:17px}.devui-switch.devui-switch--checked{background:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-switch.devui-switch--checked:hover{background:var(--devui-brand-active, #526ecc);border-color:var(--devui-brand-active, #526ecc)}.devui-switch.devui-switch--checked:active{background:var(--devui-brand-active-focus, #344899);border-color:var(--devui-brand-active-focus, #344899)}.devui-switch.devui-switch--disabled,.devui-switch.devui-switch--disabled:hover,.devui-switch.devui-switch--disabled:active,.devui-switch.devui-switch--disabled.devui-switch--checked{cursor:not-allowed}.devui-switch.devui-switch--disabled,.devui-switch.devui-switch--disabled:hover,.devui-switch.devui-switch--disabled:active{background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-switch.devui-switch--disabled small,.devui-switch.devui-switch--disabled:hover small,.devui-switch.devui-switch--disabled:active small{background-color:var(--devui-unavailable, #f5f5f6)}.devui-switch.devui-switch--disabled.devui-switch--checked{background-color:var(--devui-icon-fill-active-disabled, #beccfa);border-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-switch.devui-switch--disabled.devui-switch--checked small{background-color:var(--devui-light-text, #ffffff)}