vue-devui 1.0.0-beta.5 → 1.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/index.d.ts +7 -0
- package/accordion/index.es.js +186 -139
- package/accordion/index.umd.js +1 -1
- package/accordion/style.css +1 -1
- package/alert/index.d.ts +7 -0
- package/alert/index.es.js +1 -1
- package/alert/index.umd.js +1 -1
- package/anchor/index.d.ts +7 -0
- package/avatar/index.d.ts +7 -0
- package/avatar/index.es.js +1 -1
- package/avatar/index.umd.js +1 -1
- package/back-top/index.d.ts +7 -0
- package/back-top/index.es.js +61 -5
- package/back-top/index.umd.js +1 -1
- package/back-top/style.css +1 -1
- package/badge/index.d.ts +7 -0
- package/badge/index.es.js +1 -1
- package/badge/index.umd.js +1 -1
- package/breadcrumb/index.d.ts +7 -0
- package/button/index.d.ts +7 -0
- package/button/index.es.js +4 -4
- package/button/index.umd.js +1 -1
- package/card/index.d.ts +7 -0
- package/card/index.es.js +1 -1
- package/card/index.umd.js +1 -1
- package/carousel/index.d.ts +7 -0
- package/carousel/index.es.js +3 -3
- package/carousel/index.umd.js +1 -1
- package/cascader/index.d.ts +7 -0
- package/cascader/index.es.js +1239 -83
- package/cascader/index.umd.js +1 -1
- package/cascader/style.css +1 -1
- package/checkbox/index.d.ts +7 -0
- package/checkbox/index.es.js +1 -1
- package/checkbox/index.umd.js +1 -1
- package/comment/index.d.ts +7 -0
- package/comment/index.es.js +57 -0
- package/comment/index.umd.js +1 -0
- package/comment/package.json +7 -0
- package/comment/style.css +1 -0
- package/countdown/index.d.ts +7 -0
- package/countdown/index.es.js +167 -0
- package/countdown/index.umd.js +1 -0
- package/countdown/package.json +7 -0
- package/countdown/style.css +1 -0
- package/date-picker/index.d.ts +7 -0
- package/date-picker/index.es.js +15 -15
- package/date-picker/index.umd.js +1 -1
- package/dragdrop/index.d.ts +7 -0
- package/drawer/index.d.ts +7 -0
- package/drawer/index.es.js +33 -9
- package/drawer/index.umd.js +1 -1
- package/dropdown/index.d.ts +7 -0
- package/dropdown/index.es.js +7 -5
- package/dropdown/index.umd.js +1 -1
- package/editable-select/index.d.ts +7 -0
- package/editable-select/index.es.js +166 -104
- package/editable-select/index.umd.js +16 -16
- package/editable-select/style.css +1 -1
- package/form/index.d.ts +7 -0
- package/form/index.es.js +23 -8
- package/form/index.umd.js +1 -1
- package/form/style.css +1 -1
- package/fullscreen/index.d.ts +7 -0
- package/fullscreen/index.es.js +14 -4
- package/fullscreen/index.umd.js +1 -1
- package/gantt/index.d.ts +7 -0
- package/grid/index.d.ts +7 -0
- package/grid/index.es.js +2 -2
- package/grid/index.umd.js +1 -1
- package/icon/index.d.ts +7 -0
- package/icon/index.es.js +4 -4
- package/icon/index.umd.js +1 -1
- package/image-preview/index.d.ts +7 -0
- package/image-preview/index.es.js +51 -11
- package/image-preview/index.umd.js +1 -1
- package/image-preview/style.css +1 -1
- package/index.d.ts +7 -0
- package/input/index.d.ts +7 -0
- package/input/index.es.js +12 -12
- package/input/index.umd.js +1 -1
- package/input-icon/index.d.ts +7 -0
- package/input-icon/index.es.js +331 -0
- package/input-icon/index.umd.js +1 -0
- package/input-icon/package.json +7 -0
- package/input-icon/style.css +1 -0
- package/input-number/index.d.ts +7 -0
- package/input-number/index.es.js +3 -3
- package/input-number/index.umd.js +1 -1
- package/layout/index.d.ts +7 -0
- package/layout/index.es.js +1 -1
- package/layout/index.umd.js +1 -1
- package/loading/index.d.ts +7 -0
- package/loading/index.es.js +1 -1
- package/loading/index.umd.js +1 -1
- package/modal/index.d.ts +7 -0
- package/modal/index.es.js +9 -7
- package/modal/index.umd.js +1 -1
- package/nav-sprite/index.d.ts +7 -0
- package/overlay/index.d.ts +7 -0
- package/overlay/index.es.js +6 -4
- package/overlay/index.umd.js +1 -1
- package/package.json +2 -31
- package/pagination/index.d.ts +7 -0
- package/pagination/index.es.js +3 -3
- package/pagination/index.umd.js +1 -1
- package/panel/index.d.ts +7 -0
- package/popover/index.d.ts +7 -0
- package/popover/index.es.js +1 -1
- package/popover/index.umd.js +1 -1
- package/progress/index.d.ts +7 -0
- package/progress/index.es.js +1 -1
- package/progress/index.umd.js +2 -2
- package/quadrant-diagram/index.d.ts +7 -0
- package/radio/index.d.ts +7 -0
- package/radio/index.es.js +1 -1
- package/radio/index.umd.js +1 -1
- package/rate/index.d.ts +7 -0
- package/rate/index.es.js +1 -1
- package/rate/index.umd.js +1 -1
- package/read-tip/index.d.ts +7 -0
- package/read-tip/index.es.js +74 -24
- package/read-tip/index.umd.js +1 -1
- package/read-tip/style.css +1 -1
- package/result/index.d.ts +7 -0
- package/result/index.es.js +118 -0
- package/result/index.umd.js +1 -0
- package/result/package.json +7 -0
- package/result/style.css +1 -0
- package/ripple/index.d.ts +7 -0
- package/ripple/index.es.js +5 -2
- package/ripple/index.umd.js +1 -1
- package/search/index.d.ts +7 -0
- package/search/index.es.js +23 -20
- package/search/index.umd.js +1 -1
- package/select/index.d.ts +7 -0
- package/select/index.es.js +3 -3
- package/select/index.umd.js +1 -1
- package/skeleton/index.d.ts +7 -0
- package/skeleton/index.es.js +148 -26
- package/skeleton/index.umd.js +1 -1
- package/skeleton/style.css +1 -1
- package/slider/index.d.ts +7 -0
- package/slider/index.es.js +1 -1
- package/slider/index.umd.js +1 -1
- package/splitter/index.d.ts +7 -0
- package/splitter/index.es.js +24 -25
- package/splitter/index.umd.js +1 -1
- package/statistic/index.d.ts +7 -0
- package/statistic/index.es.js +280 -0
- package/statistic/index.umd.js +1 -0
- package/statistic/package.json +7 -0
- package/statistic/style.css +1 -0
- package/status/index.d.ts +7 -0
- package/status/index.es.js +2 -2
- package/status/index.umd.js +1 -1
- package/steps-guide/index.d.ts +7 -0
- package/steps-guide/index.es.js +100 -75
- package/steps-guide/index.umd.js +1 -1
- package/sticky/index.d.ts +7 -0
- package/style.css +1 -1
- package/switch/index.d.ts +7 -0
- package/switch/index.es.js +1 -1
- package/switch/index.umd.js +1 -1
- package/table/index.d.ts +7 -0
- package/table/index.es.js +1492 -157
- package/table/index.umd.js +1 -1
- package/table/style.css +1 -1
- package/tabs/index.d.ts +7 -0
- package/tag/index.d.ts +7 -0
- package/tag/index.es.js +94 -12
- package/tag/index.umd.js +1 -1
- package/tag/style.css +1 -1
- package/tag-input/index.d.ts +7 -0
- package/tag-input/index.es.js +1 -1
- package/tag-input/index.umd.js +1 -1
- package/textarea/index.d.ts +7 -0
- package/textarea/index.es.js +1 -1
- package/textarea/index.umd.js +1 -1
- package/time-axis/index.d.ts +7 -0
- package/time-axis/index.es.js +6 -4
- package/time-axis/index.umd.js +1 -1
- package/time-picker/index.d.ts +7 -0
- package/time-picker/index.es.js +12 -7
- package/time-picker/index.umd.js +1 -1
- package/time-picker/style.css +1 -1
- package/toast/index.d.ts +7 -0
- package/toast/index.es.js +4 -4
- package/toast/index.umd.js +1 -1
- package/tooltip/index.d.ts +7 -0
- package/transfer/index.d.ts +7 -0
- package/transfer/index.es.js +310 -68
- package/transfer/index.umd.js +1 -1
- package/transfer/style.css +1 -1
- package/tree/index.d.ts +7 -0
- package/tree/index.es.js +160 -31
- package/tree/index.umd.js +1 -1
- package/tree-select/index.d.ts +7 -0
- package/tree-select/index.es.js +435 -110
- package/tree-select/index.umd.js +1 -1
- package/tree-select/style.css +1 -1
- package/upload/index.d.ts +7 -0
- package/upload/index.es.js +4 -4
- package/upload/index.umd.js +1 -1
- package/vue-devui.es.js +14125 -11791
- package/vue-devui.umd.js +18 -18
package/search/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(m,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(m=typeof globalThis!="undefined"?globalThis:m||self,t(m.index={},m.Vue))})(this,function(m,t){"use strict";const K={size:{type:String,default:""},placeholder:{type:String,default:"\u8BF7\u8F93\u5165\u5173\u952E\u5B57"},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},delay:{type:Number,default:300},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},isKeyupSearch:{type:Boolean,default:!1},iconPosition:{type:String,default:"right"},noBorder:{type:Boolean,default:!1},cssClass:{type:String,default:""},modelValue:{type:String,default:""},
|
|
1
|
+
(function(m,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(m=typeof globalThis!="undefined"?globalThis:m||self,t(m.index={},m.Vue))})(this,function(m,t){"use strict";const K={size:{type:String,default:""},placeholder:{type:String,default:"\u8BF7\u8F93\u5165\u5173\u952E\u5B57"},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},delay:{type:Number,default:300},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},isKeyupSearch:{type:Boolean,default:!1},iconPosition:{type:String,default:"right"},noBorder:{type:Boolean,default:!1},cssClass:{type:String,default:""},modelValue:{type:String,default:""},onSearch:{type:Function,default:void 0},"onUpdate:modelValue":{type:Function,default:void 0}},M={lg:"lg",sm:"sm"},L={right:"right",left:"left"},$=e=>t.computed(()=>({"devui-search":!0,"devui-search__disbaled":e.disabled,"devui-search__no-border":e.noBorder,[`devui-search__${e.size}`]:M[e.size],[`devui-search__${e.iconPosition}`]:L[e.iconPosition]})),A=(e,n)=>{const o=t.ref("");t.watch(()=>n.modelValue,d=>{o.value=d},{immediate:!0});const a=()=>{o.value="",e.emit("update:modelValue","")},u=t.computed(()=>o.value.length>0);return{keywords:o,clearIconShow:u,onClearHandle:a}};var H=typeof global=="object"&&global&&global.Object===Object&&global,D=H,R=typeof self=="object"&&self&&self.Object===Object&&self,W=D||R||Function("return this")(),N=W,G=N.Symbol,I=G,j=Object.prototype,U=j.hasOwnProperty,X=j.toString,S=I?I.toStringTag:void 0;function q(e){var n=U.call(e,S),o=e[S];try{e[S]=void 0;var a=!0}catch{}var u=X.call(e);return a&&(n?e[S]=o:delete e[S]),u}var Y=Object.prototype,Z=Y.toString;function J(e){return Z.call(e)}var Q="[object Null]",ee="[object Undefined]",E=I?I.toStringTag:void 0;function te(e){return e==null?e===void 0?ee:Q:E&&E in Object(e)?q(e):J(e)}function ne(e){return e!=null&&typeof e=="object"}var oe="[object Symbol]";function re(e){return typeof e=="symbol"||ne(e)&&te(e)==oe}var ae=/\s/;function ie(e){for(var n=e.length;n--&&ae.test(e.charAt(n)););return n}var le=/^\s+/;function ue(e){return e&&e.slice(0,ie(e)+1).replace(le,"")}function _(e){var n=typeof e;return e!=null&&(n=="object"||n=="function")}var O=0/0,de=/^[-+]0x[0-9a-f]+$/i,se=/^0b[01]+$/i,ce=/^0o[0-7]+$/i,fe=parseInt;function P(e){if(typeof e=="number")return e;if(re(e))return O;if(_(e)){var n=typeof e.valueOf=="function"?e.valueOf():e;e=_(n)?n+"":n}if(typeof e!="string")return e===0?e:+e;e=ue(e);var o=se.test(e);return o||ce.test(e)?fe(e.slice(2),o?2:8):de.test(e)?O:+e}var me=function(){return N.Date.now()},V=me,ye="Expected a function",he=Math.max,pe=Math.min;function ge(e,n,o){var a,u,d,i,r,s,f=0,y=!1,h=!1,g=!0;if(typeof e!="function")throw new TypeError(ye);n=P(n)||0,_(o)&&(y=!!o.leading,h="maxWait"in o,d=h?he(P(o.maxWait)||0,n):d,g="trailing"in o?!!o.trailing:g);function b(l){var p=a,w=u;return a=u=void 0,f=l,i=e.apply(w,p),i}function C(l){return f=l,r=setTimeout(T,n),y?b(l):i}function c(l){var p=l-s,w=l-f,z=n-p;return h?pe(z,d-w):z}function B(l){var p=l-s,w=l-f;return s===void 0||p>=n||p<0||h&&w>=d}function T(){var l=V();if(B(l))return x(l);r=setTimeout(T,c(l))}function x(l){return r=void 0,g&&a?b(l):(a=u=void 0,i)}function Te(){r!==void 0&&clearTimeout(r),f=0,a=s=u=r=void 0}function _e(){return r===void 0?i:x(V())}function F(){var l=V(),p=B(l);if(a=arguments,u=this,s=l,p){if(r===void 0)return C(s);if(h)return clearTimeout(r),r=setTimeout(T,n),b(s)}return r===void 0&&(r=setTimeout(T,n)),i}return F.cancel=Te,F.flush=_e,F}const be={enter:"Enter"},Se=(e,n,o)=>{const a=r=>{switch(r.key){case be.enter:u(r);break}},u=r=>{if(r.target instanceof HTMLInputElement){const s=r.target.value;i(s)}},d=()=>{i(n.value)},i=ge(r=>{e.emit("onSearch",r)},o);return{onInputKeydown:a,useEmitKeyword:i,onClickHandle:d}},ve={placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},cssClass:{type:String,default:""},error:{type:Boolean,default:!1},size:{type:String,default:""},showPassword:{type:Boolean,default:!1},modelValue:{type:String,default:""},"update:modelValue":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}};var Ve="";const we=Symbol("dFormItem"),k={blur:"d.form.blur",change:"d.form.change",input:"d.form.input"};var Ie=t.defineComponent({name:"DInput",directives:{focus:{mounted:function(e,n){n.value&&e.focus()}}},props:ve,emits:["update:modelValue","focus","blur","change","keydown"],setup(e,n){const o=t.inject(we,{}),a=Object.keys(o).length>0,u=t.computed(()=>`devui-input-${e.size}`),d=t.ref(!1),i=t.ref("text"),r=t.computed(()=>({error:e.error,[e.cssClass]:!0,[u.value]:e.size!==""})),s=t.computed(()=>i.value==="password");return t.watch(()=>e.showPassword,c=>{i.value=c?"password":"text"},{immediate:!0}),t.watch(()=>e.modelValue,c=>{c&&c.length>0&&s.value?d.value=!0:d.value=!1}),{inputCls:r,inputType:i,showPreviewIcon:s,showPwdIcon:d,onInput:c=>{n.emit("update:modelValue",c.target.value),a&&o.formItemMitt.emit(k.input)},onFocus:()=>{n.emit("focus")},onBlur:()=>{n.emit("blur"),a&&o.formItemMitt.emit(k.blur)},onChange:c=>{n.emit("change",c.target.value),a&&o.formItemMitt.emit(k.change)},onKeydown:c=>{n.emit("keydown",c)},onChangeInputType:()=>{i.value=i.value==="password"?"text":"password"}}},render(){const{modelValue:e,showPreviewIcon:n,showPwdIcon:o,inputCls:a,inputType:u,maxLength:d,autoFocus:i,placeholder:r,disabled:s,onInput:f,onFocus:y,onBlur:h,onChange:g,onKeydown:b,onChangeInputType:C}=this;return t.createVNode("div",{class:"devui-input__wrap"},[t.withDirectives(t.createVNode("input",t.mergeProps({dinput:!0},{value:e,disabled:s,type:u,maxlength:d,placeholder:r,class:a,onInput:f,onFocus:y,onBlur:h,onChange:g,onKeydown:b}),null),[[t.resolveDirective("focus"),i]]),o&&t.createVNode("div",{class:"devui-input__preview",onClick:C},[n?t.createVNode(t.resolveComponent("d-icon"),{name:"preview",size:"12px",key:1},null):t.createVNode(t.resolveComponent("d-icon"),{name:"preview-forbidden",size:"12px",key:2},null)])])}}),ke="",v=t.defineComponent({name:"DSearch",props:K,emits:["update:modelValue","onSearch"],setup(e,n){const o=$(e),{keywords:a,clearIconShow:u,onClearHandle:d}=A(n,e),{onInputKeydown:i,onClickHandle:r,useEmitKeyword:s}=Se(n,a,e.delay),f=y=>{e.isKeyupSearch&&s(y),a.value=y,n.emit("update:modelValue",y)};return()=>t.createVNode("div",{class:o.value},[e.iconPosition==="left"&&t.createVNode("div",{class:"devui-search__icon",onClick:r},[t.createVNode(t.resolveComponent("d-icon"),{name:"search",size:"inherit",key:"search"},null)]),t.createVNode(Ie,{size:e.size,disabled:e.disabled,autoFocus:e.autoFocus,modelValue:a.value,maxLength:e.maxLength,placeholder:e.placeholder,cssClass:e.cssClass,onKeydown:i,"onUpdate:modelValue":f},null),u.value&&t.createVNode("div",{class:"devui-search__clear",onClick:d},[t.createVNode(t.resolveComponent("d-icon"),{name:"close",size:"inherit",key:"close"},null)]),e.iconPosition==="right"&&t.createVNode("div",{class:"devui-search__icon",onClick:r},[t.createVNode(t.resolveComponent("d-icon"),{name:"search",size:"inherit",key:"search"},null)])])}});v.install=function(e){e.component(v.name,v)};var Ce={title:"Search \u641C\u7D22\u6846",category:"\u901A\u7528",status:"100%",install(e){e.use(v)}};m.Search=v,m.default=Ce,Object.defineProperty(m,"__esModule",{value:!0}),m[Symbol.toStringTag]="Module"});
|
package/select/index.es.js
CHANGED
|
@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
import { defineComponent, createVNode,
|
|
20
|
+
import { defineComponent, createVNode, inject, computed, mergeProps, toRef, provide, onMounted, onBeforeUnmount, ref, Transition, withDirectives, vShow } from "vue";
|
|
21
21
|
const selectProps = {
|
|
22
22
|
modelValue: {
|
|
23
23
|
type: [String, Number, Array],
|
|
@@ -98,7 +98,7 @@ var Icon = defineComponent({
|
|
|
98
98
|
color,
|
|
99
99
|
classPrefix
|
|
100
100
|
} = this;
|
|
101
|
-
return
|
|
101
|
+
return /^((https?):)?\/\//.test(name) ? createVNode("img", {
|
|
102
102
|
"src": name,
|
|
103
103
|
"alt": name.split("/")[name.split("/").length - 1],
|
|
104
104
|
"style": {
|
|
@@ -110,7 +110,7 @@ var Icon = defineComponent({
|
|
|
110
110
|
fontSize: size,
|
|
111
111
|
color
|
|
112
112
|
}
|
|
113
|
-
}, null)
|
|
113
|
+
}, null);
|
|
114
114
|
}
|
|
115
115
|
});
|
|
116
116
|
Icon.install = function(app) {
|
package/select/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var x=Object.defineProperty,L=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var I=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var R=(f,e,v)=>e in f?x(f,e,{enumerable:!0,configurable:!0,writable:!0,value:v}):f[e]=v,w=(f,e)=>{for(var v in e||(e={}))J.call(e,v)&&R(f,v,e[v]);if(I)for(var v of I(e))Q.call(e,v)&&R(f,v,e[v]);return f},P=(f,e)=>L(f,H(e));(function(f,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis!="undefined"?globalThis:f||self,e(f.index={},f.Vue))})(this,function(f,e){"use strict";const v={modelValue:{type:[String,Number,Array],default:""},"onUpdate:modelValue":{type:Function,default:void 0},options:{type:Array,default:()=>[]},size:{type:String,default:"md"},overview:{type:String,default:"border"},placeholder:{type:String,default:"\u8BF7\u9009\u62E9"},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},allowClear:{type:Boolean,default:!1},optionDisabledKey:{type:String,default:""},onToggleChange:{type:Function,default:void 0},onValueChange:{type:Function,default:void 0}};var C=e.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(t){return w({},t)},render(){const{name:t,size:n,color:l,classPrefix:a}=this;return e.createVNode(e.Fragment,null,[/^((https?):)?\/\//.test(t)?e.createVNode("img",{src:t,alt:t.split("/")[t.split("/").length-1],style:{width:n}},null):e.createVNode("i",{class:`${a} ${a}-${t}`,style:{fontSize:n,color:l}},null)])}});C.install=function(t){t.component(C.name,C)};var X="";const B={name:{type:String,default:void 0},halfchecked:{type:Boolean,default:!1},isShowTitle:{type:Boolean,default:!0},title:{type:String},color:{type:String,default:void 0},showAnimation:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},beforeChange:{type:Function,default:void 0}},_=P(w({},B),{halfchecked:{type:Boolean,default:!1},checked:{type:Boolean,default:!1},value:{type:String},label:{type:String,default:void 0},title:{type:String,default:void 0},"onUpdate:checked":{type:Function,default:void 0},onChange:{type:Function,default:void 0},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}}),K=P(w({},B),{modelValue:{type:Array,required:!0},direction:{type:String,default:"column"},itemWidth:{type:Number,default:void 0},options:{type:Array,default:()=>[]},onChange:{type:Function,default:void 0},"onUpdate:modelValue":{type:Function,default:void 0}}),D=Symbol("d-checkbox-group");var S=e.defineComponent({name:"DCheckbox",props:_,emits:["change","update:checked","update:modelValue"],setup(t,n){const l=e.inject(D,null),a=e.computed(()=>t.checked||t.modelValue),c=e.computed(()=>(l==null?void 0:l.disabled.value)||t.disabled),s=e.computed(()=>{var i,u;return(u=(i=l==null?void 0:l.isItemChecked)==null?void 0:i.call(l,t.value))!=null?u:a.value}),o=e.computed(()=>{var i;return(i=l==null?void 0:l.isShowTitle.value)!=null?i:t.isShowTitle}),r=e.computed(()=>{var i;return(i=l==null?void 0:l.showAnimation.value)!=null?i:t.showAnimation}),m=e.computed(()=>{var i;return(i=l==null?void 0:l.color.value)!=null?i:t.color}),y=l==null?void 0:l.itemWidth.value,V=l==null?void 0:l.direction.value,k=(i,u)=>{var h;if(c.value)return Promise.resolve(!1);const g=(h=t.beforeChange)!=null?h:l==null?void 0:l.beforeChange;if(g){const b=g(i,u);return typeof b=="boolean"?Promise.resolve(b):b}return Promise.resolve(!0)},p=()=>{const i=!a.value;l==null||l.toggleGroupVal(t.value),n.emit("update:checked",i),n.emit("update:modelValue",i),n.emit("change",i)};return{itemWidth:y,direction:V,mergedColor:m,mergedDisabled:c,mergedIsShowTitle:o,mergedChecked:s,mergedShowAnimation:r,handleClick:()=>{k(!a.value,t.label).then(i=>i&&p())}}},render(){var F;const{itemWidth:t,direction:n,mergedChecked:l,mergedDisabled:a,mergedIsShowTitle:c,mergedShowAnimation:s,halfchecked:o,title:r,label:m,handleClick:y,name:V,value:k,mergedColor:p,$slots:d}=this,i={"devui-checkbox-column-margin":n==="column","devui-checkbox-wrap":typeof t!="undefined"},u=t?[`width: ${t}px`]:[],g={"devui-checkbox":!0,active:l,halfchecked:o,disabled:a,unchecked:!l},h=c?r||m:"",b=p&&o||p?`linear-gradient(${p}, ${p})`:"",O=[`border-color:${(l||o)&&p?p:""}`,`background-image:${b}`,`background-color:${p&&o?p:""}`],W={"devui-checkbox-material":!0,"custom-color":p,"devui-checkbox-no-label":!m&&!d.default,"devui-no-animation":!s,"devui-checkbox-default-background":!o},M={"devui-tick":!0,"devui-no-animation":!s},T=q=>q.stopPropagation(),U={indeterminate:o};return e.createVNode("div",{class:i,style:u},[e.createVNode("div",{class:g},[e.createVNode("label",{title:h,onClick:y},[e.createVNode("input",e.mergeProps({name:V||k,class:"devui-checkbox-input",type:"checkbox"},U,{checked:l,disabled:a,onClick:T,onChange:T}),null),e.createVNode("span",{style:O,class:W},[e.createVNode("span",{class:"devui-checkbox-halfchecked-bg"},null),e.createVNode("svg",{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"devui-checkbox-tick"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{"fill-rule":"nonzero",points:"5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",class:M},null)])])]),m||((F=d.default)==null?void 0:F.call(d))])])])}}),Y="",j=e.defineComponent({name:"DCheckboxGroup",props:K,emits:["change","update:modelValue"],setup(t,n){const l=e.toRef(t,"modelValue"),a={checked:!1,isShowTitle:!0,halfchecked:!1,showAnimation:!0,disabled:!1},c=o=>{let r=-1;if(typeof l.value[0]=="string"?r=l.value.findIndex(m=>m===o):typeof l.value[0]=="object"&&(r=l.value.findIndex(m=>m.value===o)),r===-1){if(typeof t.options[0]=="object"){const y=t.options.find(k=>k.value===o),V=[...l.value,y];n.emit("update:modelValue",V),n.emit("change",V);return}const m=[...l.value,o];n.emit("update:modelValue",m),n.emit("change",m);return}l.value.splice(r,1),n.emit("update:modelValue",l.value),n.emit("change",l.value)},s=o=>{if(typeof l.value[0]=="string")return l.value.includes(o);if(typeof l.value[0]=="object")return l.value.some(r=>r.value===o)};return e.provide(D,{disabled:e.toRef(t,"disabled"),isShowTitle:e.toRef(t,"isShowTitle"),color:e.toRef(t,"color"),showAnimation:e.toRef(t,"showAnimation"),beforeChange:t.beforeChange,isItemChecked:s,toggleGroupVal:c,itemWidth:e.toRef(t,"itemWidth"),direction:e.toRef(t,"direction")}),{defaultOpt:a}},render(){var s;const{direction:t,$slots:n,defaultOpt:l,options:a}=this;let c=(s=n.default)==null?void 0:s.call(n);return(a==null?void 0:a.length)>0&&(c=a.map(o=>{let r=null;return typeof o=="string"?r=Object.assign({},l,{label:o,value:o}):typeof o=="object"&&(r=Object.assign({},l,P(w({},o),{label:o.name}))),e.createVNode(S,r,null)})),e.createVNode("div",{class:"devui-checkbox-group"},[e.createVNode("div",{class:{"devui-checkbox-list-inline":t==="row"}},[c])])}});S.install=function(t){t.component(S.name,S)},j.install=function(t){t.component(j.name,j)};function A(t,n){let l=t;return typeof n=="object"&&Object.keys(n).forEach(a=>{n[a]&&(l+=` ${a}`)}),l}function $(t){const n=e.computed(()=>{const a=new Map;return t.value.forEach(c=>{a.set(c.value,c)}),a});return a=>a.map(c=>n.value.get(c))}function E(t,n,l){function a(c){var r,m;let s=c.target;s.shadowRoot&&c.composed&&(s=c.composedPath()[0]||s);const o=[(r=t[0])==null?void 0:r.value,(m=t[1])==null?void 0:m.value];n.value&&o.every(y=>y&&!y.contains(s)&&y!==s)&&l(!1)}e.onMounted(()=>{document.body.addEventListener("mousedown",a,!1)}),e.onBeforeUnmount(()=>{document.body.addEventListener("mousedown",a,!1)})}var Z="",N=e.defineComponent({name:"DSelect",props:v,emits:["toggleChange","valueChange","update:modelValue"],setup(t,n){const l=e.ref(null),a=e.ref(null),c=e.ref(!1);function s(d){t.disabled||(c.value=d,n.emit("toggleChange",d))}E([l,a],c,s);const o=e.computed(()=>{const{multiple:d,modelValue:i}=t;return t.options.map(u=>{let g;return typeof u=="object"?g=w({name:u.name?u.name:u.value+"",value:u.value,_checked:!1},u):g={name:u+"",value:u,_checked:!1},d&&(Array.isArray(i)?g._checked=i.includes(g.value):g._checked=!1),g})}),r=$(o),m=e.computed(()=>{var d;return t.multiple&&Array.isArray(t.modelValue)?r(t.modelValue).map(u=>u.name).join(","):Array.isArray(t.modelValue)?"":((d=r([t.modelValue])[0])==null?void 0:d.name)||""}),y=e.computed(()=>!t.disabled&&t.allowClear&&m.value.length>0);function V(d,i){const{multiple:u,optionDisabledKey:g}=t;let{modelValue:h}=t;g&&!!d[g]||(u?(d._checked=!d._checked,h=o.value.filter(b=>b._checked).map(b=>b.value),n.emit("update:modelValue",h)):(n.emit("update:modelValue",d.value),s(!1)),n.emit("valueChange",d,i))}function k(d){const{optionDisabledKey:i}=t;return A("devui-select-item",{active:d.value===t.modelValue,disabled:i?!!d[i]:!1})}function p(d){d.preventDefault(),d.stopPropagation(),t.multiple?n.emit("update:modelValue",[]):n.emit("update:modelValue","")}return{isOpen:c,containerRef:l,dropdownRef:a,inputValue:m,mergeOptions:o,mergeClearable:y,valueChange:V,toggleChange:s,getItemClassName:k,handleClear:p}},render(){const{mergeOptions:t,isOpen:n,inputValue:l,size:a,multiple:c,disabled:s,optionDisabledKey:o,placeholder:r,overview:m,valueChange:y,toggleChange:V,getItemClassName:k,mergeClearable:p,handleClear:d}=this,i=A("devui-select",{"devui-select-open":n,"devui-dropdown-menu-multiple":c,"devui-select-lg":a==="lg","devui-select-sm":a==="sm","devui-select-underlined":m==="underlined","devui-select-disabled":s}),u=A("devui-select-input",{"devui-select-input-lg":a==="lg","devui-select-input-sm":a==="sm"}),g=A("devui-select-selection",{"devui-select-clearable":p});return e.createVNode("div",{class:i,ref:"containerRef"},[e.createVNode("div",{class:g,onClick:()=>V(!n)},[e.createVNode("input",{value:l,type:"text",class:u,placeholder:r,readonly:!0,disabled:s},null),e.createVNode("span",{onClick:d,class:"devui-select-clear"},[e.createVNode(C,{name:"close"},null)]),e.createVNode("span",{class:"devui-select-arrow"},[e.createVNode(C,{name:"select-arrow"},null)])]),e.createVNode(e.Transition,{name:"fade",ref:"dropdownRef"},{default:()=>[e.withDirectives(e.createVNode("div",{class:"devui-select-dropdown"},[e.createVNode("ul",{class:"devui-select-dropdown-list devui-scrollbar"},[t.map((h,b)=>e.createVNode("li",{onClick:O=>{O.preventDefault(),O.stopPropagation(),y(h,b)},class:k(h),key:b},[c?e.createVNode(S,{modelValue:h._checked,label:h.name,disabled:o?!!h[o]:!1},null):h.name]))])]),[[e.vShow,n]])]})])}});N.install=function(t){t.component(N.name,N)};var z={title:"Select \u4E0B\u62C9\u6846",category:"\u6570\u636E\u5F55\u5165",status:"10%",install(t){t.use(N)}};f.Select=N,f.default=z,Object.defineProperty(f,"__esModule",{value:!0}),f[Symbol.toStringTag]="Module"});
|
|
1
|
+
var x=Object.defineProperty,L=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var R=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var F=(f,e,v)=>e in f?x(f,e,{enumerable:!0,configurable:!0,writable:!0,value:v}):f[e]=v,w=(f,e)=>{for(var v in e||(e={}))J.call(e,v)&&F(f,v,e[v]);if(R)for(var v of R(e))Q.call(e,v)&&F(f,v,e[v]);return f},P=(f,e)=>L(f,H(e));(function(f,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis!="undefined"?globalThis:f||self,e(f.index={},f.Vue))})(this,function(f,e){"use strict";const v={modelValue:{type:[String,Number,Array],default:""},"onUpdate:modelValue":{type:Function,default:void 0},options:{type:Array,default:()=>[]},size:{type:String,default:"md"},overview:{type:String,default:"border"},placeholder:{type:String,default:"\u8BF7\u9009\u62E9"},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},allowClear:{type:Boolean,default:!1},optionDisabledKey:{type:String,default:""},onToggleChange:{type:Function,default:void 0},onValueChange:{type:Function,default:void 0}};var C=e.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(t){return w({},t)},render(){const{name:t,size:n,color:l,classPrefix:a}=this;return/^((https?):)?\/\//.test(t)?e.createVNode("img",{src:t,alt:t.split("/")[t.split("/").length-1],style:{width:n}},null):e.createVNode("i",{class:`${a} ${a}-${t}`,style:{fontSize:n,color:l}},null)}});C.install=function(t){t.component(C.name,C)};var X="";const B={name:{type:String,default:void 0},halfchecked:{type:Boolean,default:!1},isShowTitle:{type:Boolean,default:!0},title:{type:String},color:{type:String,default:void 0},showAnimation:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},beforeChange:{type:Function,default:void 0}},_=P(w({},B),{halfchecked:{type:Boolean,default:!1},checked:{type:Boolean,default:!1},value:{type:String},label:{type:String,default:void 0},title:{type:String,default:void 0},"onUpdate:checked":{type:Function,default:void 0},onChange:{type:Function,default:void 0},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}}),K=P(w({},B),{modelValue:{type:Array,required:!0},direction:{type:String,default:"column"},itemWidth:{type:Number,default:void 0},options:{type:Array,default:()=>[]},onChange:{type:Function,default:void 0},"onUpdate:modelValue":{type:Function,default:void 0}}),D=Symbol("d-checkbox-group");var S=e.defineComponent({name:"DCheckbox",props:_,emits:["change","update:checked","update:modelValue"],setup(t,n){const l=e.inject(D,null),a=e.computed(()=>t.checked||t.modelValue),c=e.computed(()=>(l==null?void 0:l.disabled.value)||t.disabled),s=e.computed(()=>{var i,r;return(r=(i=l==null?void 0:l.isItemChecked)==null?void 0:i.call(l,t.value))!=null?r:a.value}),o=e.computed(()=>{var i;return(i=l==null?void 0:l.isShowTitle.value)!=null?i:t.isShowTitle}),u=e.computed(()=>{var i;return(i=l==null?void 0:l.showAnimation.value)!=null?i:t.showAnimation}),m=e.computed(()=>{var i;return(i=l==null?void 0:l.color.value)!=null?i:t.color}),y=l==null?void 0:l.itemWidth.value,V=l==null?void 0:l.direction.value,k=(i,r)=>{var h;if(c.value)return Promise.resolve(!1);const p=(h=t.beforeChange)!=null?h:l==null?void 0:l.beforeChange;if(p){const b=p(i,r);return typeof b=="boolean"?Promise.resolve(b):b}return Promise.resolve(!0)},g=()=>{const i=!a.value;l==null||l.toggleGroupVal(t.value),n.emit("update:checked",i),n.emit("update:modelValue",i),n.emit("change",i)};return{itemWidth:y,direction:V,mergedColor:m,mergedDisabled:c,mergedIsShowTitle:o,mergedChecked:s,mergedShowAnimation:u,handleClick:()=>{k(!a.value,t.label).then(i=>i&&g())}}},render(){var I;const{itemWidth:t,direction:n,mergedChecked:l,mergedDisabled:a,mergedIsShowTitle:c,mergedShowAnimation:s,halfchecked:o,title:u,label:m,handleClick:y,name:V,value:k,mergedColor:g,$slots:d}=this,i={"devui-checkbox-column-margin":n==="column","devui-checkbox-wrap":typeof t!="undefined"},r=t?[`width: ${t}px`]:[],p={"devui-checkbox":!0,active:l,halfchecked:o,disabled:a,unchecked:!l},h=c?u||m:"",b=g&&o||g?`linear-gradient(${g}, ${g})`:"",O=[`border-color:${(l||o)&&g?g:""}`,`background-image:${b}`,`background-color:${g&&o?g:""}`],W={"devui-checkbox-material":!0,"custom-color":g,"devui-checkbox-no-label":!m&&!d.default,"devui-no-animation":!s,"devui-checkbox-default-background":!o},M={"devui-tick":!0,"devui-no-animation":!s},T=q=>q.stopPropagation(),U={indeterminate:o};return e.createVNode("div",{class:i,style:r},[e.createVNode("div",{class:p},[e.createVNode("label",{title:h,onClick:y},[e.createVNode("input",e.mergeProps({name:V||k,class:"devui-checkbox-input",type:"checkbox"},U,{checked:l,disabled:a,onClick:T,onChange:T}),null),e.createVNode("span",{style:O,class:W},[e.createVNode("span",{class:"devui-checkbox-halfchecked-bg"},null),e.createVNode("svg",{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"devui-checkbox-tick"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{"fill-rule":"nonzero",points:"5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",class:M},null)])])]),m||((I=d.default)==null?void 0:I.call(d))])])])}}),Y="",j=e.defineComponent({name:"DCheckboxGroup",props:K,emits:["change","update:modelValue"],setup(t,n){const l=e.toRef(t,"modelValue"),a={checked:!1,isShowTitle:!0,halfchecked:!1,showAnimation:!0,disabled:!1},c=o=>{let u=-1;if(typeof l.value[0]=="string"?u=l.value.findIndex(m=>m===o):typeof l.value[0]=="object"&&(u=l.value.findIndex(m=>m.value===o)),u===-1){if(typeof t.options[0]=="object"){const y=t.options.find(k=>k.value===o),V=[...l.value,y];n.emit("update:modelValue",V),n.emit("change",V);return}const m=[...l.value,o];n.emit("update:modelValue",m),n.emit("change",m);return}l.value.splice(u,1),n.emit("update:modelValue",l.value),n.emit("change",l.value)},s=o=>{if(typeof l.value[0]=="string")return l.value.includes(o);if(typeof l.value[0]=="object")return l.value.some(u=>u.value===o)};return e.provide(D,{disabled:e.toRef(t,"disabled"),isShowTitle:e.toRef(t,"isShowTitle"),color:e.toRef(t,"color"),showAnimation:e.toRef(t,"showAnimation"),beforeChange:t.beforeChange,isItemChecked:s,toggleGroupVal:c,itemWidth:e.toRef(t,"itemWidth"),direction:e.toRef(t,"direction")}),{defaultOpt:a}},render(){var s;const{direction:t,$slots:n,defaultOpt:l,options:a}=this;let c=(s=n.default)==null?void 0:s.call(n);return(a==null?void 0:a.length)>0&&(c=a.map(o=>{let u=null;return typeof o=="string"?u=Object.assign({},l,{label:o,value:o}):typeof o=="object"&&(u=Object.assign({},l,P(w({},o),{label:o.name}))),e.createVNode(S,u,null)})),e.createVNode("div",{class:"devui-checkbox-group"},[e.createVNode("div",{class:{"devui-checkbox-list-inline":t==="row"}},[c])])}});S.install=function(t){t.component(S.name,S)},j.install=function(t){t.component(j.name,j)};function A(t,n){let l=t;return typeof n=="object"&&Object.keys(n).forEach(a=>{n[a]&&(l+=` ${a}`)}),l}function $(t){const n=e.computed(()=>{const a=new Map;return t.value.forEach(c=>{a.set(c.value,c)}),a});return a=>a.map(c=>n.value.get(c))}function E(t,n,l){function a(c){var u,m;let s=c.target;s.shadowRoot&&c.composed&&(s=c.composedPath()[0]||s);const o=[(u=t[0])==null?void 0:u.value,(m=t[1])==null?void 0:m.value];n.value&&o.every(y=>y&&!y.contains(s)&&y!==s)&&l(!1)}e.onMounted(()=>{document.body.addEventListener("mousedown",a,!1)}),e.onBeforeUnmount(()=>{document.body.addEventListener("mousedown",a,!1)})}var Z="",N=e.defineComponent({name:"DSelect",props:v,emits:["toggleChange","valueChange","update:modelValue"],setup(t,n){const l=e.ref(null),a=e.ref(null),c=e.ref(!1);function s(d){t.disabled||(c.value=d,n.emit("toggleChange",d))}E([l,a],c,s);const o=e.computed(()=>{const{multiple:d,modelValue:i}=t;return t.options.map(r=>{let p;return typeof r=="object"?p=w({name:r.name?r.name:r.value+"",value:r.value,_checked:!1},r):p={name:r+"",value:r,_checked:!1},d&&(Array.isArray(i)?p._checked=i.includes(p.value):p._checked=!1),p})}),u=$(o),m=e.computed(()=>{var d;return t.multiple&&Array.isArray(t.modelValue)?u(t.modelValue).map(r=>r.name).join(","):Array.isArray(t.modelValue)?"":((d=u([t.modelValue])[0])==null?void 0:d.name)||""}),y=e.computed(()=>!t.disabled&&t.allowClear&&m.value.length>0);function V(d,i){const{multiple:r,optionDisabledKey:p}=t;let{modelValue:h}=t;p&&!!d[p]||(r?(d._checked=!d._checked,h=o.value.filter(b=>b._checked).map(b=>b.value),n.emit("update:modelValue",h)):(n.emit("update:modelValue",d.value),s(!1)),n.emit("valueChange",d,i))}function k(d){const{optionDisabledKey:i}=t;return A("devui-select-item",{active:d.value===t.modelValue,disabled:i?!!d[i]:!1})}function g(d){d.preventDefault(),d.stopPropagation(),t.multiple?n.emit("update:modelValue",[]):n.emit("update:modelValue","")}return{isOpen:c,containerRef:l,dropdownRef:a,inputValue:m,mergeOptions:o,mergeClearable:y,valueChange:V,toggleChange:s,getItemClassName:k,handleClear:g}},render(){const{mergeOptions:t,isOpen:n,inputValue:l,size:a,multiple:c,disabled:s,optionDisabledKey:o,placeholder:u,overview:m,valueChange:y,toggleChange:V,getItemClassName:k,mergeClearable:g,handleClear:d}=this,i=A("devui-select",{"devui-select-open":n,"devui-dropdown-menu-multiple":c,"devui-select-lg":a==="lg","devui-select-sm":a==="sm","devui-select-underlined":m==="underlined","devui-select-disabled":s}),r=A("devui-select-input",{"devui-select-input-lg":a==="lg","devui-select-input-sm":a==="sm"}),p=A("devui-select-selection",{"devui-select-clearable":g});return e.createVNode("div",{class:i,ref:"containerRef"},[e.createVNode("div",{class:p,onClick:()=>V(!n)},[e.createVNode("input",{value:l,type:"text",class:r,placeholder:u,readonly:!0,disabled:s},null),e.createVNode("span",{onClick:d,class:"devui-select-clear"},[e.createVNode(C,{name:"close"},null)]),e.createVNode("span",{class:"devui-select-arrow"},[e.createVNode(C,{name:"select-arrow"},null)])]),e.createVNode(e.Transition,{name:"fade",ref:"dropdownRef"},{default:()=>[e.withDirectives(e.createVNode("div",{class:"devui-select-dropdown"},[e.createVNode("ul",{class:"devui-select-dropdown-list devui-scrollbar"},[t.map((h,b)=>e.createVNode("li",{onClick:O=>{O.preventDefault(),O.stopPropagation(),y(h,b)},class:k(h),key:b},[c?e.createVNode(S,{modelValue:h._checked,label:h.name,disabled:o?!!h[o]:!1},null):h.name]))])]),[[e.vShow,n]])]})])}});N.install=function(t){t.component(N.name,N)};var z={title:"Select \u4E0B\u62C9\u6846",category:"\u6570\u636E\u5F55\u5165",status:"10%",install(t){t.use(N)}};f.Select=N,f.default=z,Object.defineProperty(f,"__esModule",{value:!0}),f[Symbol.toStringTag]="Module"});
|
package/skeleton/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, createVNode, Fragment, withDirectives, vShow } from "vue";
|
|
1
|
+
import { defineComponent, createVNode, Fragment, withDirectives, vShow, mergeProps } from "vue";
|
|
2
2
|
var skeleton = "";
|
|
3
3
|
const skeletonProps = {
|
|
4
4
|
row: {
|
|
@@ -34,7 +34,7 @@ const skeletonProps = {
|
|
|
34
34
|
default: "40px"
|
|
35
35
|
},
|
|
36
36
|
avatarShape: {
|
|
37
|
-
|
|
37
|
+
type: String,
|
|
38
38
|
default: "round"
|
|
39
39
|
},
|
|
40
40
|
titleWidth: {
|
|
@@ -54,7 +54,7 @@ var Skeleton = defineComponent({
|
|
|
54
54
|
slots
|
|
55
55
|
} = ctx;
|
|
56
56
|
function renderAnimate(isAnimated) {
|
|
57
|
-
return isAnimated ? "devui-
|
|
57
|
+
return isAnimated ? "devui-skeleton__animated" : "";
|
|
58
58
|
}
|
|
59
59
|
function renderBorderRadius(isRound) {
|
|
60
60
|
return isRound ? "border-radius: 1em;" : "";
|
|
@@ -102,14 +102,17 @@ var Skeleton = defineComponent({
|
|
|
102
102
|
})();
|
|
103
103
|
return withDirectives(createVNode("div", {
|
|
104
104
|
"class": "devui-skeleton__paragraph"
|
|
105
|
-
}, [arr.map((
|
|
105
|
+
}, [arr.map((item2) => {
|
|
106
106
|
return createVNode("div", {
|
|
107
107
|
"class": "devui-skeleton__item",
|
|
108
|
-
"style": round ? "border-radius: 1em;" : `width: ${
|
|
108
|
+
"style": round ? "border-radius: 1em;" : `width: ${item2.width}`
|
|
109
109
|
}, null);
|
|
110
110
|
})]), [[vShow, isShown]]);
|
|
111
111
|
}
|
|
112
112
|
function renderAvatarStyle(avatarSize, avatarShape) {
|
|
113
|
+
function renderAvatarShape(avatarShape2) {
|
|
114
|
+
return avatarShape2 === "square" ? "" : "border-radius:50%;";
|
|
115
|
+
}
|
|
113
116
|
function renderAvatarSize(avatarSize2) {
|
|
114
117
|
switch (typeof avatarSize2) {
|
|
115
118
|
case "string":
|
|
@@ -118,9 +121,6 @@ var Skeleton = defineComponent({
|
|
|
118
121
|
return `width:${avatarSize2}px;height:${avatarSize2}px;`;
|
|
119
122
|
}
|
|
120
123
|
}
|
|
121
|
-
function renderAvatarShape(avatarShape2) {
|
|
122
|
-
return avatarShape2 === "square" ? "" : "border-radius:50%;";
|
|
123
|
-
}
|
|
124
124
|
return renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape);
|
|
125
125
|
}
|
|
126
126
|
function renderTitle(isVisible, titleWidth, isRound) {
|
|
@@ -137,39 +137,161 @@ var Skeleton = defineComponent({
|
|
|
137
137
|
}
|
|
138
138
|
return renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible);
|
|
139
139
|
}
|
|
140
|
-
function
|
|
140
|
+
function renderDefaultSkeleton() {
|
|
141
|
+
return createVNode(Fragment, null, [withDirectives(createVNode("div", {
|
|
142
|
+
"class": "devui-skeleton__avatar"
|
|
143
|
+
}, [createVNode("div", {
|
|
144
|
+
"class": "avatar",
|
|
145
|
+
"style": renderAvatarStyle(props.avatarSize, props.avatarShape)
|
|
146
|
+
}, null)]), [[vShow, props.avatar]]), createVNode("div", {
|
|
147
|
+
"class": "devui-skeleton__group"
|
|
148
|
+
}, [createVNode("div", {
|
|
149
|
+
"class": "devui-skeleton__title",
|
|
150
|
+
"style": renderTitle(props.title, props.titleWidth, props.round)
|
|
151
|
+
}, null), renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)])]);
|
|
152
|
+
}
|
|
153
|
+
return () => {
|
|
141
154
|
var _a;
|
|
142
|
-
if (
|
|
143
|
-
return createVNode(
|
|
144
|
-
"class":
|
|
145
|
-
}, [
|
|
146
|
-
"class": "avatar",
|
|
147
|
-
"style": renderAvatarStyle(props.avatarSize, props.avatarShape)
|
|
148
|
-
}, null)]), [[vShow, props.avatar]]), createVNode("div", {
|
|
149
|
-
"class": "devui-skeleton__item__group"
|
|
150
|
-
}, [createVNode("div", {
|
|
151
|
-
"class": "devui-skeleton__title",
|
|
152
|
-
"style": renderTitle(props.title, props.titleWidth, props.round)
|
|
153
|
-
}, null), renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)])]);
|
|
155
|
+
if (props.loading) {
|
|
156
|
+
return createVNode("div", {
|
|
157
|
+
"class": `devui-skeleton ${renderAnimate(props.animate)}`
|
|
158
|
+
}, [renderDefaultSkeleton()]);
|
|
154
159
|
}
|
|
155
160
|
return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
|
|
161
|
+
};
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
var item = "";
|
|
165
|
+
const itemProps = {
|
|
166
|
+
row: {
|
|
167
|
+
type: Number,
|
|
168
|
+
default: 0
|
|
169
|
+
},
|
|
170
|
+
animate: {
|
|
171
|
+
type: Boolean,
|
|
172
|
+
default: true
|
|
173
|
+
},
|
|
174
|
+
round: {
|
|
175
|
+
type: Boolean,
|
|
176
|
+
default: false
|
|
177
|
+
},
|
|
178
|
+
loading: {
|
|
179
|
+
type: Boolean,
|
|
180
|
+
default: true
|
|
181
|
+
},
|
|
182
|
+
avatarShape: {
|
|
183
|
+
type: String,
|
|
184
|
+
default: "round"
|
|
185
|
+
},
|
|
186
|
+
titleWidth: {
|
|
187
|
+
type: [String, Number],
|
|
188
|
+
default: "40%"
|
|
189
|
+
},
|
|
190
|
+
rowWidth: {
|
|
191
|
+
type: [Number, String, Array],
|
|
192
|
+
default: ["100%"]
|
|
193
|
+
},
|
|
194
|
+
shape: {
|
|
195
|
+
type: String
|
|
196
|
+
}
|
|
197
|
+
};
|
|
198
|
+
var SkeletonItem = defineComponent({
|
|
199
|
+
name: "DSkeletonItem",
|
|
200
|
+
props: itemProps,
|
|
201
|
+
setup(props, ctx) {
|
|
202
|
+
const {
|
|
203
|
+
slots
|
|
204
|
+
} = ctx;
|
|
205
|
+
function renderAnimate(isAnimated) {
|
|
206
|
+
return isAnimated ? "devui-skeleton__animated" : "";
|
|
207
|
+
}
|
|
208
|
+
function renderShapeParagraph(rowNum, rowWidth, round) {
|
|
209
|
+
const arr = [];
|
|
210
|
+
function pushIntoArray(type) {
|
|
211
|
+
for (let index2 = 0; index2 < rowNum; index2++) {
|
|
212
|
+
arr.push({
|
|
213
|
+
width: type
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
(function handleRowWidth() {
|
|
218
|
+
if (rowWidth instanceof Array) {
|
|
219
|
+
for (let index2 = 0; index2 < rowNum; index2++) {
|
|
220
|
+
if (rowWidth[index2]) {
|
|
221
|
+
switch (typeof rowWidth[index2]) {
|
|
222
|
+
case "string":
|
|
223
|
+
arr.push({
|
|
224
|
+
width: rowWidth[index2]
|
|
225
|
+
});
|
|
226
|
+
break;
|
|
227
|
+
case "number":
|
|
228
|
+
arr.push({
|
|
229
|
+
width: `${rowWidth[index2]}px`
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
} else {
|
|
233
|
+
arr.push({
|
|
234
|
+
width: 1
|
|
235
|
+
});
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
} else {
|
|
239
|
+
switch (typeof rowWidth) {
|
|
240
|
+
case "string":
|
|
241
|
+
pushIntoArray(rowWidth);
|
|
242
|
+
break;
|
|
243
|
+
case "number":
|
|
244
|
+
pushIntoArray(`${rowWidth}px`);
|
|
245
|
+
break;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
})();
|
|
249
|
+
return createVNode("div", mergeProps({
|
|
250
|
+
"class": `devui-skeleton__shape__paragraph ${renderAnimate(props.animate)}`
|
|
251
|
+
}, ctx.attrs), [arr.map((item2) => {
|
|
252
|
+
return createVNode("div", {
|
|
253
|
+
"class": "devui-skeleton__shape__paragraph__item",
|
|
254
|
+
"style": round ? "border-radius: 1em;" : `width: ${item2.width}`
|
|
255
|
+
}, null);
|
|
256
|
+
})]);
|
|
257
|
+
}
|
|
258
|
+
function renderAvatarStyle(avatarShape) {
|
|
259
|
+
function renderAvatarShape(avatarShape2) {
|
|
260
|
+
return avatarShape2 === "square" ? "" : "border-radius:50%;";
|
|
261
|
+
}
|
|
262
|
+
return renderAvatarShape(avatarShape);
|
|
156
263
|
}
|
|
157
264
|
return () => {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
265
|
+
var _a;
|
|
266
|
+
if (props.loading && props.shape) {
|
|
267
|
+
switch (props.shape) {
|
|
268
|
+
case "avatar":
|
|
269
|
+
return createVNode(Fragment, null, [createVNode("div", mergeProps({
|
|
270
|
+
"class": `devui-skeleton__shape__avatar ${renderAnimate(props.animate)}`,
|
|
271
|
+
"style": renderAvatarStyle(props.avatarShape)
|
|
272
|
+
}, ctx.attrs), null)]);
|
|
273
|
+
case "paragraph":
|
|
274
|
+
return createVNode(Fragment, null, [renderShapeParagraph(props.row, props.rowWidth, props.round)]);
|
|
275
|
+
default:
|
|
276
|
+
return createVNode(Fragment, null, [createVNode("div", mergeProps({
|
|
277
|
+
"class": `devui-skeleton__shape__${props.shape} ${renderAnimate(props.animate)}`
|
|
278
|
+
}, ctx.attrs), null)]);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
|
|
161
282
|
};
|
|
162
283
|
}
|
|
163
284
|
});
|
|
164
285
|
Skeleton.install = function(app) {
|
|
165
286
|
app.component(Skeleton.name, Skeleton);
|
|
287
|
+
app.component(SkeletonItem.name, SkeletonItem);
|
|
166
288
|
};
|
|
167
289
|
var index = {
|
|
168
290
|
title: "Skeleton \u9AA8\u67B6\u5C4F",
|
|
169
291
|
category: "\u6570\u636E\u5C55\u793A",
|
|
170
|
-
status: "
|
|
292
|
+
status: "100%",
|
|
171
293
|
install(app) {
|
|
172
294
|
app.use(Skeleton);
|
|
173
295
|
}
|
|
174
296
|
};
|
|
175
|
-
export { Skeleton, index as default };
|
|
297
|
+
export { Skeleton, SkeletonItem, index as default };
|
package/skeleton/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u.index={},u.Vue))})(this,function(u,e){"use strict";var V="";const S={row:{type:Number,default:0},animate:{type:Boolean,default:!0},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},avatar:{type:Boolean,default:!1},title:{type:Boolean,default:!0},paragraph:{type:Boolean,default:!0},avatarSize:{type:[String,Number],default:"40px"},avatarShape:{type:String,default:"round"},titleWidth:{type:[String,Number],default:"40%"},rowWidth:{type:[Number,String,Array],default:["100%"]}};var m=e.defineComponent({name:"DSkeleton",props:S,setup(t,h){const{slots:f}=h;function p(a){return a?"devui-skeleton__animated":""}function b(a){return a?"border-radius: 1em;":""}function k(a,o,n,r){const i=[];function c(g){for(let s=0;s<o;s++)i.push({width:g})}return function(){if(n instanceof Array)for(let s=0;s<o;s++)if(n[s])switch(typeof n[s]){case"string":i.push({width:n[s]});break;case"number":i.push({width:`${n[s]}px`})}else i.push({width:1});else switch(typeof n){case"string":c(n);break;case"number":c(`${n}px`);break}}(),e.withDirectives(e.createVNode("div",{class:"devui-skeleton__paragraph"},[i.map(g=>e.createVNode("div",{class:"devui-skeleton__item",style:r?"border-radius: 1em;":`width: ${g.width}`},null))]),[[e.vShow,a]])}function l(a,o){function n(i){return i==="square"?"":"border-radius:50%;"}function r(i){switch(typeof i){case"string":return`width:${i};height:${i};`;case"number":return`width:${i}px;height:${i}px;`}}return r(a)+n(o)}function d(a,o,n){function r(c){switch(typeof c){case"string":return`width: ${c};`;case"number":return`width: ${c}px;`}}function i(c){return c?null:"visibility: hidden;"}return r(o)+b(n)+i(a)}function y(){return e.createVNode(e.Fragment,null,[e.withDirectives(e.createVNode("div",{class:"devui-skeleton__avatar"},[e.createVNode("div",{class:"avatar",style:l(t.avatarSize,t.avatarShape)},null)]),[[e.vShow,t.avatar]]),e.createVNode("div",{class:"devui-skeleton__group"},[e.createVNode("div",{class:"devui-skeleton__title",style:d(t.title,t.titleWidth,t.round)},null),k(t.paragraph,t.row,t.rowWidth,t.round)])])}return()=>{var a;return t.loading?e.createVNode("div",{class:`devui-skeleton ${p(t.animate)}`},[y()]):e.createVNode(e.Fragment,null,[(a=f.default)==null?void 0:a.call(f)])}}}),v="";const N={row:{type:Number,default:0},animate:{type:Boolean,default:!0},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},avatarShape:{type:String,default:"round"},titleWidth:{type:[String,Number],default:"40%"},rowWidth:{type:[Number,String,Array],default:["100%"]},shape:{type:String}};var _=e.defineComponent({name:"DSkeletonItem",props:N,setup(t,h){const{slots:f}=h;function p(l){return l?"devui-skeleton__animated":""}function b(l,d,y){const a=[];function o(n){for(let r=0;r<l;r++)a.push({width:n})}return function(){if(d instanceof Array)for(let r=0;r<l;r++)if(d[r])switch(typeof d[r]){case"string":a.push({width:d[r]});break;case"number":a.push({width:`${d[r]}px`})}else a.push({width:1});else switch(typeof d){case"string":o(d);break;case"number":o(`${d}px`);break}}(),e.createVNode("div",e.mergeProps({class:`devui-skeleton__shape__paragraph ${p(t.animate)}`},h.attrs),[a.map(n=>e.createVNode("div",{class:"devui-skeleton__shape__paragraph__item",style:y?"border-radius: 1em;":`width: ${n.width}`},null))])}function k(l){function d(y){return y==="square"?"":"border-radius:50%;"}return d(l)}return()=>{var l;if(t.loading&&t.shape)switch(t.shape){case"avatar":return e.createVNode(e.Fragment,null,[e.createVNode("div",e.mergeProps({class:`devui-skeleton__shape__avatar ${p(t.animate)}`,style:k(t.avatarShape)},h.attrs),null)]);case"paragraph":return e.createVNode(e.Fragment,null,[b(t.row,t.rowWidth,t.round)]);default:return e.createVNode(e.Fragment,null,[e.createVNode("div",e.mergeProps({class:`devui-skeleton__shape__${t.shape} ${p(t.animate)}`},h.attrs),null)])}return e.createVNode(e.Fragment,null,[(l=f.default)==null?void 0:l.call(f)])}}});m.install=function(t){t.component(m.name,m),t.component(_.name,_)};var w={title:"Skeleton \u9AA8\u67B6\u5C4F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.use(m)}};u.Skeleton=m,u.SkeletonItem=_,u.default=w,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
|
package/skeleton/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.devui-skeleton{display:flex;justify-content:space-between}.devui-
|
|
1
|
+
.devui-skeleton{display:flex;justify-content:space-between}.devui-skeleton__avatar{display:flex;flex:1;justify-content:center;padding-right:16px}.devui-skeleton__avatar .avatar{width:40px;height:40px;background-color:#f2f2f2}.devui-skeleton__group{flex:11}.devui-skeleton__item,.devui-skeleton__title{width:100%;height:16px;background-color:#f2f2f2}.devui-skeleton__title{margin-top:24px}.devui-skeleton__paragraph{margin-top:12px}.devui-skeleton__item:last-child{width:60%}.devui-skeleton__avatar>.avatar,.devui-skeleton__group>div>.devui-skeleton__item{margin-top:12px}.devui-skeleton__animated>.devui-skeleton__group>.devui-skeleton__title,.devui-skeleton__animated>.devui-skeleton__group>div>.devui-skeleton__item,.devui-skeleton__animated>.devui-skeleton__avatar>.avatar{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #f2f2f2;background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}.devui-skeleton__shape__avatar,.devui-skeleton__shape__image,.devui-skeleton__shape__title,.devui-skeleton__shape__button{background-color:#f2f2f2}.devui-skeleton__shape__avatar{width:40px;height:40px;background-color:#f2f2f2}.devui-skeleton__shape__image{width:200px;height:150px;border-radius:4px}.devui-skeleton__shape__title{width:40%;height:24px}.devui-skeleton__shape__paragraph__item{background-color:#f2f2f2;width:100%;height:16px;margin-bottom:10px}.devui-skeleton__shape__paragraph__item:last-child{width:60%}.devui-skeleton__shape__button{width:115px;height:32px}@keyframes skeletonLoading{to{background-position-x:-20%}}.devui-skeleton__animated .devui-skeleton__shape__avatar,.devui-skeleton__animated.devui-skeleton__shape__avatar,.devui-skeleton__animated.devui-skeleton__shape__image,.devui-skeleton__animated.devui-skeleton__shape__title,.devui-skeleton__animated.devui-skeleton__shape__paragraph>.devui-skeleton__shape__paragraph__item,.devui-skeleton__animated.devui-skeleton__shape__button{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #f2f2f2;background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}
|
package/slider/index.es.js
CHANGED
package/slider/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.index={},a.Vue))})(this,function(a,t){"use strict";const x={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""}};var R="",o=t.defineComponent({name:"DSlider",props:x,emits:["update:modelValue"],setup(e,v){let m=!0,f=0,s=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),r=t.ref(0),h=t.ref(0),u=t.ref(""),S=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:
|
|
1
|
+
(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.index={},a.Vue))})(this,function(a,t){"use strict";const x={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""}};var R="",o=t.defineComponent({name:"DSlider",props:x,emits:["update:modelValue"],setup(e,v){let m=!0,f=0,s=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),r=t.ref(0),h=t.ref(0),u=t.ref(""),S=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:D,value:l.value+""},null)]):"";e.modelValue>e.max?u.value="100%":e.modelValue<e.min?u.value="0%":u.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=V.value.clientWidth;r.value=n*(l.value-e.min)/(e.max-e.min)});function M(n){d.value=!0,!e.disabled&&(n.preventDefault(),E(n),window.addEventListener("mousemove",N),window.addEventListener("mouseup",_))}function E(n){m=!1,s=n.clientX,f=r.value,h.value=f}function N(n){d.value=!0;const c=n.clientX-s;h.value=f+c,b(h.value)}function _(){d.value=!1,setTimeout(()=>{m=!0},100),window.removeEventListener("mousemove",N),window.removeEventListener("mouseup",_)}function b(n){const i=Math.round(V.value.clientWidth);n<0&&(n=0);const c=i/((e.max-e.min)/e.step),y=Math.round(n/c)*c;if(Math.round(y)>=i){r.value=i,l.value=e.max,u.value="100%",v.emit("update:modelValue",e.max);return}u.value=Math.round(y*100/i)+"%",l.value=Math.round(y*(e.max-e.min)/i)+e.min,r.value=n,v.emit("update:modelValue",l.value)}function X(n){if(!e.disabled&&m){s=n.target.getBoundingClientRect().left;const i=n.clientX;b(i-s),M(n)}else return}function D(n){l.value=parseInt(n.target.value),l.value?(l.value<e.min&&(l.value=e.min),l.value>e.max&&(l.value=e.max),/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(u.value=(l.value-e.min)*100/(e.max-e.min)+"%",v.emit("update:modelValue",l.value))):(l.value=e.min,u.value="0%")}const w=t.computed(()=>e.disabled?" disabled":""),I=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:u.value,opacity:d.value?1:0}},[t.createVNode("div",{class:"devui-slider_popover-arrow"},null),t.createVNode("div",{class:"devui-slider_popover-content"},[l.value+" "+e.tipsRenderer])]);return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:V,class:"devui-slider__runway"+w.value,onMousedown:X,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+w.value,style:{width:u.value}},null),t.createVNode("div",{class:"devui-slider__button"+w.value,style:{left:u.value},onMousedown:M,onMouseenter:()=>d.value=!0,onMouseout:()=>d.value=!1},null),e.tipsRenderer==="null"?"":I()]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),S()])}});o.install=function(e){e.component(o.name,o)};var g={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.use(o)}};a.Slider=o,a.default=g,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
|
package/splitter/index.es.js
CHANGED
|
@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
|
|
|
4
4
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
|
-
import { defineComponent, inject, reactive, ref,
|
|
7
|
+
import { defineComponent, inject, reactive, ref, watch, computed, onMounted, withDirectives, createVNode, provide, resolveComponent, onUpdated } from "vue";
|
|
8
8
|
const splitterProps = {
|
|
9
9
|
orientation: {
|
|
10
10
|
type: String,
|
|
@@ -141,28 +141,26 @@ var DSplitterBar = defineComponent({
|
|
|
141
141
|
wrapperClass: `devui-splitter-bar devui-splitter-bar-${props.orientation}`
|
|
142
142
|
});
|
|
143
143
|
const domRef = ref();
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
144
|
+
watch([() => props.splitBarSize, domRef], ([curSplitBarSize, ele]) => {
|
|
145
|
+
if (!(ele instanceof HTMLElement)) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
setStyle(ele, {
|
|
149
|
+
flexBasis: curSplitBarSize
|
|
150
|
+
});
|
|
151
|
+
}, {
|
|
152
|
+
immediate: true
|
|
153
|
+
});
|
|
154
|
+
watch([() => store.state.panes, domRef], ([panes, ele]) => {
|
|
155
|
+
if (!store.isStaticBar(props.index)) {
|
|
156
|
+
state.wrapperClass += " resizable";
|
|
157
|
+
} else {
|
|
149
158
|
setStyle(ele, {
|
|
150
|
-
flexBasis:
|
|
159
|
+
flexBasis: props.disabledBarSize
|
|
151
160
|
});
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
watch([() => store.state.panes, domRef], ([panes, ele]) => {
|
|
156
|
-
if (!store.isStaticBar(props.index)) {
|
|
157
|
-
state.wrapperClass += " resizable";
|
|
158
|
-
} else {
|
|
159
|
-
setStyle(ele, {
|
|
160
|
-
flexBasis: props.disabledBarSize
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
}, {
|
|
164
|
-
deep: true
|
|
165
|
-
});
|
|
161
|
+
}
|
|
162
|
+
}, {
|
|
163
|
+
deep: true
|
|
166
164
|
});
|
|
167
165
|
const coordinate = {
|
|
168
166
|
pageX: 0,
|
|
@@ -522,8 +520,7 @@ var SplitterPane = defineComponent({
|
|
|
522
520
|
order
|
|
523
521
|
});
|
|
524
522
|
});
|
|
525
|
-
const setSizeStyle = (curSize) => {
|
|
526
|
-
const ele = domRef.value;
|
|
523
|
+
const setSizeStyle = (curSize, ele) => {
|
|
527
524
|
if (!ele) {
|
|
528
525
|
return;
|
|
529
526
|
}
|
|
@@ -535,7 +532,9 @@ var SplitterPane = defineComponent({
|
|
|
535
532
|
removeClass(ele, paneFixedClass);
|
|
536
533
|
}
|
|
537
534
|
};
|
|
538
|
-
watch(() => props.size,
|
|
535
|
+
watch([() => props.size, domRef], ([size, ele]) => {
|
|
536
|
+
setSizeStyle(size, ele);
|
|
537
|
+
}, {
|
|
539
538
|
immediate: true
|
|
540
539
|
});
|
|
541
540
|
const orientation = inject("orientation");
|
|
@@ -619,7 +618,7 @@ Splitter.install = function(app) {
|
|
|
619
618
|
var index = {
|
|
620
619
|
title: "Splitter \u5206\u5272\u5668",
|
|
621
620
|
category: "\u5E03\u5C40",
|
|
622
|
-
status: "
|
|
621
|
+
status: "100%",
|
|
623
622
|
install(app) {
|
|
624
623
|
app.use(Splitter);
|
|
625
624
|
}
|
package/splitter/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _=Object.defineProperty;var K=(g,o,C)=>o in g?_(g,o,{enumerable:!0,configurable:!0,writable:!0,value:C}):g[o]=C;var k=(g,o,C)=>(K(g,typeof o!="symbol"?o+"":o,C),C);(function(g,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(g=typeof globalThis!="undefined"?globalThis:g||self,o(g.index={},g.Vue))})(this,function(g,o){"use strict";const C={orientation:{type:String,default:"horizontal"},splitBarSize:{type:String,default:"2px"},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean,default:!0}};function y(t,e){const i={},s=Object.keys(e);return s.forEach(n=>{i[n]=t.style[n]}),s.forEach(n=>{t.style[n]=e[n]}),i}function N(t,e){return t.classList?t.classList.contains(e):` ${t.className} `.indexOf(` ${e} `)>-1}function B(t,e){t.classList?t.classList.add(e):N(t,e)||(t.className=`${t.className} ${e}`)}function b(t,e){if(t.classList)t.classList.remove(e);else if(N(t,e)){const i=t.className;t.className=` ${i} `.replace(` ${e} `," ")}}const F={mounted(t,{value:e}){t.$value=e,e.enableResize&&H(t)},unmounted(t,{value:e}){e.enableResize&&$(t,"mousedown",D)}};function H(t){R(t,"mousedown",D)}function R(t,e,i){t.addEventListener&&t.addEventListener(e,i)}function $(t,e,i){t.removeEventListener&&t.removeEventListener(e,i)}function D(t){var n;const e=(n=t==null?void 0:t.target)==null?void 0:n.$value;if(!e)return;R(document,"mousemove",i),R(document,"mouseup",s),e.onPressEvent(E(t));function i(p){e.onDragEvent(E(p))}function s(p){$(document,"mousemove",i),$(document,"mouseup",s),e.onReleaseEvent(E(p))}}function E(t){return{pageX:t.pageX,pageY:t.pageY,clientX:t.clientX,clientY:t.clientY,offsetX:t.offsetX,offsetY:t.offsetY,type:t.type,originalEvent:t}}var U="";const T={index:{type:Number},orientation:{type:String,required:!0},splitBarSize:{type:String,required:!0},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean}};var q=o.defineComponent({name:"DSplitterBar",props:T,setup(t){const e=o.inject("splitterStore"),i=o.reactive({wrapperClass:`devui-splitter-bar devui-splitter-bar-${t.orientation}`}),s=o.ref();o.onMounted(()=>{o.watch([()=>t.splitBarSize,s],([a,c])=>{c instanceof HTMLElement&&y(c,{flexBasis:a})},{immediate:!0}),o.watch([()=>e.state.panes,s],([a,c])=>{e.isStaticBar(t.index)?y(c,{flexBasis:t.disabledBarSize}):i.wrapperClass+=" resizable"},{deep:!0})});const n={pageX:0,pageY:0,originalX:0,originalY:0};let p;const d={enableResize:!0,onPressEvent:function({originalEvent:a}){a.stopPropagation(),!!e.isResizable(t.index)&&(p=e.dragState(t.index),n.originalX=a.pageX,n.originalY=a.pageY)},onDragEvent:function({originalEvent:a}){if(a.stopPropagation(),!e.isResizable(t.index))return;n.pageX=a.pageX,n.pageY=a.pageY;let c;t.orientation==="vertical"?c=n.pageY-n.originalY:c=n.pageX-n.originalX,e.setSize(p,c)},onReleaseEvent:function({originalEvent:a}){if(a.stopPropagation(),!e.isResizable(t.index))return;n.pageX=a.pageX,n.pageY=a.pageY;let c;t.orientation==="vertical"?c=n.pageY-n.originalY:c=n.pageX-n.originalX,e.setSize(p,c)}},u=(a,c)=>{const S=e.getPane(a),h=e.getPane(c);return{pane:S,nearPane:h}},f=(a,c,S)=>{var w,M,V,j;const h=((M=(w=a==null?void 0:a.component)==null?void 0:w.props)==null?void 0:M.collapsible)&&S,P=(j=(V=a==null?void 0:a.component)==null?void 0:V.props)==null?void 0:j.collapsed,Y=c.collapsed;return{"devui-collapse":h,collapsed:P,hidden:Y}},z=o.computed(()=>{var h,P;const{pane:a,nearPane:c}=u(t.index,t.index+1),S=((P=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:P.collapseDirection)!=="after"||t.index===0;return f(a,c,S)}),x=o.computed(()=>{var h,P;const{pane:a,nearPane:c}=u(t.index+1,t.index),S=((P=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:P.collapseDirection)!=="before"||t.index+1===e.state.paneCount-1;return f(a,c,S)}),l=()=>{var h,P,Y,w;const{pane:a,nearPane:c}=u(t.index,t.index+1);((P=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:P.collapsed)||((w=(Y=c==null?void 0:c.component)==null?void 0:Y.props)==null?void 0:w.collapsed)?B(s.value,"none-resizable"):b(s.value,"none-resizable")},r=a=>{e.tooglePane(t.index,t.index+1,a),l()},m=a=>{e.tooglePane(t.index+1,t.index,a),l()},X=()=>{r(!0),m(!0)};return o.onMounted(()=>{X()}),()=>o.withDirectives(o.createVNode("div",{class:i.wrapperClass,ref:s},[t.showCollapseButton?o.createVNode("div",{class:["prev",z.value],onClick:()=>{r()}},null):null,o.createVNode("div",{class:"devui-resize-handle"},null),t.showCollapseButton?o.createVNode("div",{class:["next",x.value],onClick:()=>m()},null):null]),[[F,d]])}});class G{constructor(){k(this,"state");this.state=o.reactive({panes:[],splitterContainerSize:0,paneCount:0})}setPanes({panes:e}){this.state.panes=e.map((i,s)=>{var n;return i.component&&(i.component.exposed.order.value=s*2),i.getPaneSize=(n=i==null?void 0:i.component)==null?void 0:n.exposed.getPaneSize,i}),this.state.paneCount=e.length}setSplitter({containerSize:e}){this.state.splitterContainerSize=e}getPane(e){if(!this.state.panes||e<0||e>=this.state.panes.length)throw new Error("no pane can return.");return this.state.panes[e]}dragState(e){const i=this.getPane(e),s=this.getPane(e+1),n=i.getPaneSize()+s.getPaneSize();return{prev:{index:e,initialSize:i.getPaneSize(),minSize:this.toPixels(i.component.props.minSize)||n-this.toPixels(s.component.props.maxSize)||0,maxSize:this.toPixels(i.component.props.maxSize)||n-this.toPixels(s.component.props.minSize)||n},next:{index:e+1,initialSize:s.getPaneSize(),minSize:this.toPixels(s.component.props.minSize)||n-this.toPixels(i.component.props.maxSize)||0,maxSize:this.toPixels(s.component.props.maxSize)||n-this.toPixels(i.component.props.minSize)||n}}}clamp(e,i,s){return Math.min(i,Math.max(e,s))}resize(e,i){const s=this.getPane(e.index),n=this.state.splitterContainerSize,p=this.clamp(e.minSize,e.maxSize,e.initialSize+i);let d="";this.isPercent(s.component.props.size)?d=p/n*100+"%":d=p+"px",s.component.props.size=d,s.component.emit("sizeChange",d)}isResizable(e){var p,d,u,f,z,x,l,r;const i=this.getPane(e),s=this.getPane(e+1),n=((d=(p=i==null?void 0:i.component)==null?void 0:p.props)==null?void 0:d.collapsed)||((f=(u=s==null?void 0:s.component)==null?void 0:u.props)==null?void 0:f.collapsed);return((x=(z=i==null?void 0:i.component)==null?void 0:z.props)==null?void 0:x.resizable)&&((r=(l=s==null?void 0:s.component)==null?void 0:l.props)==null?void 0:r.resizable)&&!n}isStaticBar(e){var n,p,d,u;const i=this.getPane(e),s=this.getPane(e+1);return!(((p=(n=i==null?void 0:i.component)==null?void 0:n.props)==null?void 0:p.resizable)&&((u=(d=s==null?void 0:s.component)==null?void 0:d.props)==null?void 0:u.resizable))}isPercent(e){return/%$/.test(e)}toPixels(e){let i=parseFloat(e);return this.isPercent(e)&&(i=this.state.splitterContainerSize*i/100),i}tooglePane(e,i,s){var d,u,f,z,x,l,r,m,X,a,c,S,h;const n=this.getPane(e),p=this.getPane(i);((u=(d=n==null?void 0:n.component)==null?void 0:d.props)==null?void 0:u.collapsible)&&(n.component.props.collapsed=s?(z=(f=n==null?void 0:n.component)==null?void 0:f.props)==null?void 0:z.collapsed:!((l=(x=n==null?void 0:n.component)==null?void 0:x.props)==null?void 0:l.collapsed),(a=(r=p==null?void 0:p.component)==null?void 0:r.exposed)==null||a.toggleNearPaneFlexGrow((X=(m=n==null?void 0:n.component)==null?void 0:m.props)==null?void 0:X.collapsed),(h=n==null?void 0:n.component)==null||h.emit("collapsedChange",(S=(c=n==null?void 0:n.component)==null?void 0:c.props)==null?void 0:S.collapsed))}setSize(e,i){const s=this.getPane(e.prev.index),n=this.getPane(e.next.index);s.component.props.size&&n.component.props.size?(this.resize(e.prev,i),this.resize(e.next,-i)):n.component.props.size?this.resize(e.next,-i):this.resize(e.prev,i)}}var A="",v=o.defineComponent({name:"DSplitter",components:{DSplitterBar:q},props:C,emits:[],setup(t,e){var p,d;const i=new G,s=o.reactive({panes:[]});s.panes=((d=(p=e.slots).DSplitterPane)==null?void 0:d.call(p))||[],i.setPanes({panes:s.panes}),o.provide("orientation",t.orientation),o.provide("splitterStore",i);const n=o.ref();return o.watch(n,u=>{if(!u)return;let f=0;t.orientation==="vertical"?f=u.clientHeight:f=u.clientWidth,i.setSplitter({containerSize:f})}),()=>{const{splitBarSize:u,orientation:f,showCollapseButton:z}=t,x=["devui-splitter",`devui-splitter-${f}`];return o.createVNode("div",{class:x,ref:n},[s.panes,s.panes.filter((l,r,m)=>r!==m.length-1).map((l,r)=>o.createVNode(o.resolveComponent("d-splitter-bar"),{key:r,style:`order: ${r*2+1}`,splitBarSize:u,orientation:f,index:r,showCollapseButton:z},null))])}}});const W={size:{type:String},minSize:{type:String},maxSize:{type:String},resizable:{type:Boolean,default:!0},collapsible:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},collapseDirection:{type:String,default:"both"},shrink:{type:Boolean,default:!1},shrinkWidth:{type:Number,default:36}};var J="",L=o.defineComponent({name:"DSplitterPane",props:W,emits:["sizeChange","collapsedChange"],setup(t,{slots:e,expose:i}){const s=o.inject("splitterStore"),n=o.ref(),p=o.ref();o.watch([p,n],([l,r])=>{!r||y(r,{order:l})});const d=l=>{const r=n.value;if(!r)return;r.style.flexBasis=l;const m="devui-splitter-pane-fixed";l?B(r,m):b(r,m)};o.watch(()=>t.size,d,{immediate:!0});const u=o.inject("orientation");let f="";o.onMounted(()=>{f=t.size,s.setPanes({panes:s.state.panes})}),o.onUpdated(()=>{s.setPanes({panes:s.state.panes})});const z=()=>{const l=n.value;if(!!l)return u==="vertical"?l.offsetHeight:l.offsetWidth};return o.watch(()=>t.collapsed,l=>{const r=n.value;if(!r)return;const m="devui-splitter-pane-hidden";l?B(r,m):b(r,m),l&&t.shrink?(b(r,m),y(r,{flexBasis:`${t.shrinkWidth}px`})):y(r,{flexBasis:f})},{immediate:!0}),i({order:p,getPaneSize:z,toggleNearPaneFlexGrow:l=>{const r=n.value;if(!(r instanceof HTMLElement))return;const m="devui-splitter-pane-grow";N(r,m)?b(r,m):l&&B(r,m)}}),()=>{var l;return o.createVNode("div",{class:"devui-splitter-pane",ref:n},[(l=e.default)==null?void 0:l.call(e)])}}});v.install=function(t){t.component(v.name,v),t.component(L.name,L)};var O={title:"Splitter \u5206\u5272\u5668",category:"\u5E03\u5C40",status:"\u5DF2\u5B8C\u6210",install(t){t.use(v)}};g.Splitter=v,g.default=O,Object.defineProperty(g,"__esModule",{value:!0}),g[Symbol.toStringTag]="Module"});
|
|
1
|
+
var _=Object.defineProperty;var K=(g,o,C)=>o in g?_(g,o,{enumerable:!0,configurable:!0,writable:!0,value:C}):g[o]=C;var k=(g,o,C)=>(K(g,typeof o!="symbol"?o+"":o,C),C);(function(g,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(g=typeof globalThis!="undefined"?globalThis:g||self,o(g.index={},g.Vue))})(this,function(g,o){"use strict";const C={orientation:{type:String,default:"horizontal"},splitBarSize:{type:String,default:"2px"},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean,default:!0}};function y(t,e){const i={},s=Object.keys(e);return s.forEach(n=>{i[n]=t.style[n]}),s.forEach(n=>{t.style[n]=e[n]}),i}function N(t,e){return t.classList?t.classList.contains(e):` ${t.className} `.indexOf(` ${e} `)>-1}function B(t,e){t.classList?t.classList.add(e):N(t,e)||(t.className=`${t.className} ${e}`)}function b(t,e){if(t.classList)t.classList.remove(e);else if(N(t,e)){const i=t.className;t.className=` ${i} `.replace(` ${e} `," ")}}const F={mounted(t,{value:e}){t.$value=e,e.enableResize&&H(t)},unmounted(t,{value:e}){e.enableResize&&$(t,"mousedown",L)}};function H(t){R(t,"mousedown",L)}function R(t,e,i){t.addEventListener&&t.addEventListener(e,i)}function $(t,e,i){t.removeEventListener&&t.removeEventListener(e,i)}function L(t){var n;const e=(n=t==null?void 0:t.target)==null?void 0:n.$value;if(!e)return;R(document,"mousemove",i),R(document,"mouseup",s),e.onPressEvent(E(t));function i(p){e.onDragEvent(E(p))}function s(p){$(document,"mousemove",i),$(document,"mouseup",s),e.onReleaseEvent(E(p))}}function E(t){return{pageX:t.pageX,pageY:t.pageY,clientX:t.clientX,clientY:t.clientY,offsetX:t.offsetX,offsetY:t.offsetY,type:t.type,originalEvent:t}}var U="";const T={index:{type:Number},orientation:{type:String,required:!0},splitBarSize:{type:String,required:!0},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean}};var q=o.defineComponent({name:"DSplitterBar",props:T,setup(t){const e=o.inject("splitterStore"),i=o.reactive({wrapperClass:`devui-splitter-bar devui-splitter-bar-${t.orientation}`}),s=o.ref();o.watch([()=>t.splitBarSize,s],([a,c])=>{c instanceof HTMLElement&&y(c,{flexBasis:a})},{immediate:!0}),o.watch([()=>e.state.panes,s],([a,c])=>{e.isStaticBar(t.index)?y(c,{flexBasis:t.disabledBarSize}):i.wrapperClass+=" resizable"},{deep:!0});const n={pageX:0,pageY:0,originalX:0,originalY:0};let p;const d={enableResize:!0,onPressEvent:function({originalEvent:a}){a.stopPropagation(),!!e.isResizable(t.index)&&(p=e.dragState(t.index),n.originalX=a.pageX,n.originalY=a.pageY)},onDragEvent:function({originalEvent:a}){if(a.stopPropagation(),!e.isResizable(t.index))return;n.pageX=a.pageX,n.pageY=a.pageY;let c;t.orientation==="vertical"?c=n.pageY-n.originalY:c=n.pageX-n.originalX,e.setSize(p,c)},onReleaseEvent:function({originalEvent:a}){if(a.stopPropagation(),!e.isResizable(t.index))return;n.pageX=a.pageX,n.pageY=a.pageY;let c;t.orientation==="vertical"?c=n.pageY-n.originalY:c=n.pageX-n.originalX,e.setSize(p,c)}},u=(a,c)=>{const S=e.getPane(a),h=e.getPane(c);return{pane:S,nearPane:h}},f=(a,c,S)=>{var w,M,V,j;const h=((M=(w=a==null?void 0:a.component)==null?void 0:w.props)==null?void 0:M.collapsible)&&S,P=(j=(V=a==null?void 0:a.component)==null?void 0:V.props)==null?void 0:j.collapsed,Y=c.collapsed;return{"devui-collapse":h,collapsed:P,hidden:Y}},z=o.computed(()=>{var h,P;const{pane:a,nearPane:c}=u(t.index,t.index+1),S=((P=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:P.collapseDirection)!=="after"||t.index===0;return f(a,c,S)}),x=o.computed(()=>{var h,P;const{pane:a,nearPane:c}=u(t.index+1,t.index),S=((P=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:P.collapseDirection)!=="before"||t.index+1===e.state.paneCount-1;return f(a,c,S)}),l=()=>{var h,P,Y,w;const{pane:a,nearPane:c}=u(t.index,t.index+1);((P=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:P.collapsed)||((w=(Y=c==null?void 0:c.component)==null?void 0:Y.props)==null?void 0:w.collapsed)?B(s.value,"none-resizable"):b(s.value,"none-resizable")},r=a=>{e.tooglePane(t.index,t.index+1,a),l()},m=a=>{e.tooglePane(t.index+1,t.index,a),l()},X=()=>{r(!0),m(!0)};return o.onMounted(()=>{X()}),()=>o.withDirectives(o.createVNode("div",{class:i.wrapperClass,ref:s},[t.showCollapseButton?o.createVNode("div",{class:["prev",z.value],onClick:()=>{r()}},null):null,o.createVNode("div",{class:"devui-resize-handle"},null),t.showCollapseButton?o.createVNode("div",{class:["next",x.value],onClick:()=>m()},null):null]),[[F,d]])}});class G{constructor(){k(this,"state");this.state=o.reactive({panes:[],splitterContainerSize:0,paneCount:0})}setPanes({panes:e}){this.state.panes=e.map((i,s)=>{var n;return i.component&&(i.component.exposed.order.value=s*2),i.getPaneSize=(n=i==null?void 0:i.component)==null?void 0:n.exposed.getPaneSize,i}),this.state.paneCount=e.length}setSplitter({containerSize:e}){this.state.splitterContainerSize=e}getPane(e){if(!this.state.panes||e<0||e>=this.state.panes.length)throw new Error("no pane can return.");return this.state.panes[e]}dragState(e){const i=this.getPane(e),s=this.getPane(e+1),n=i.getPaneSize()+s.getPaneSize();return{prev:{index:e,initialSize:i.getPaneSize(),minSize:this.toPixels(i.component.props.minSize)||n-this.toPixels(s.component.props.maxSize)||0,maxSize:this.toPixels(i.component.props.maxSize)||n-this.toPixels(s.component.props.minSize)||n},next:{index:e+1,initialSize:s.getPaneSize(),minSize:this.toPixels(s.component.props.minSize)||n-this.toPixels(i.component.props.maxSize)||0,maxSize:this.toPixels(s.component.props.maxSize)||n-this.toPixels(i.component.props.minSize)||n}}}clamp(e,i,s){return Math.min(i,Math.max(e,s))}resize(e,i){const s=this.getPane(e.index),n=this.state.splitterContainerSize,p=this.clamp(e.minSize,e.maxSize,e.initialSize+i);let d="";this.isPercent(s.component.props.size)?d=p/n*100+"%":d=p+"px",s.component.props.size=d,s.component.emit("sizeChange",d)}isResizable(e){var p,d,u,f,z,x,l,r;const i=this.getPane(e),s=this.getPane(e+1),n=((d=(p=i==null?void 0:i.component)==null?void 0:p.props)==null?void 0:d.collapsed)||((f=(u=s==null?void 0:s.component)==null?void 0:u.props)==null?void 0:f.collapsed);return((x=(z=i==null?void 0:i.component)==null?void 0:z.props)==null?void 0:x.resizable)&&((r=(l=s==null?void 0:s.component)==null?void 0:l.props)==null?void 0:r.resizable)&&!n}isStaticBar(e){var n,p,d,u;const i=this.getPane(e),s=this.getPane(e+1);return!(((p=(n=i==null?void 0:i.component)==null?void 0:n.props)==null?void 0:p.resizable)&&((u=(d=s==null?void 0:s.component)==null?void 0:d.props)==null?void 0:u.resizable))}isPercent(e){return/%$/.test(e)}toPixels(e){let i=parseFloat(e);return this.isPercent(e)&&(i=this.state.splitterContainerSize*i/100),i}tooglePane(e,i,s){var d,u,f,z,x,l,r,m,X,a,c,S,h;const n=this.getPane(e),p=this.getPane(i);((u=(d=n==null?void 0:n.component)==null?void 0:d.props)==null?void 0:u.collapsible)&&(n.component.props.collapsed=s?(z=(f=n==null?void 0:n.component)==null?void 0:f.props)==null?void 0:z.collapsed:!((l=(x=n==null?void 0:n.component)==null?void 0:x.props)==null?void 0:l.collapsed),(a=(r=p==null?void 0:p.component)==null?void 0:r.exposed)==null||a.toggleNearPaneFlexGrow((X=(m=n==null?void 0:n.component)==null?void 0:m.props)==null?void 0:X.collapsed),(h=n==null?void 0:n.component)==null||h.emit("collapsedChange",(S=(c=n==null?void 0:n.component)==null?void 0:c.props)==null?void 0:S.collapsed))}setSize(e,i){const s=this.getPane(e.prev.index),n=this.getPane(e.next.index);s.component.props.size&&n.component.props.size?(this.resize(e.prev,i),this.resize(e.next,-i)):n.component.props.size?this.resize(e.next,-i):this.resize(e.prev,i)}}var A="",v=o.defineComponent({name:"DSplitter",components:{DSplitterBar:q},props:C,emits:[],setup(t,e){var p,d;const i=new G,s=o.reactive({panes:[]});s.panes=((d=(p=e.slots).DSplitterPane)==null?void 0:d.call(p))||[],i.setPanes({panes:s.panes}),o.provide("orientation",t.orientation),o.provide("splitterStore",i);const n=o.ref();return o.watch(n,u=>{if(!u)return;let f=0;t.orientation==="vertical"?f=u.clientHeight:f=u.clientWidth,i.setSplitter({containerSize:f})}),()=>{const{splitBarSize:u,orientation:f,showCollapseButton:z}=t,x=["devui-splitter",`devui-splitter-${f}`];return o.createVNode("div",{class:x,ref:n},[s.panes,s.panes.filter((l,r,m)=>r!==m.length-1).map((l,r)=>o.createVNode(o.resolveComponent("d-splitter-bar"),{key:r,style:`order: ${r*2+1}`,splitBarSize:u,orientation:f,index:r,showCollapseButton:z},null))])}}});const W={size:{type:String},minSize:{type:String},maxSize:{type:String},resizable:{type:Boolean,default:!0},collapsible:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},collapseDirection:{type:String,default:"both"},shrink:{type:Boolean,default:!1},shrinkWidth:{type:Number,default:36}};var J="",D=o.defineComponent({name:"DSplitterPane",props:W,emits:["sizeChange","collapsedChange"],setup(t,{slots:e,expose:i}){const s=o.inject("splitterStore"),n=o.ref(),p=o.ref();o.watch([p,n],([l,r])=>{!r||y(r,{order:l})});const d=(l,r)=>{if(!r)return;r.style.flexBasis=l;const m="devui-splitter-pane-fixed";l?B(r,m):b(r,m)};o.watch([()=>t.size,n],([l,r])=>{d(l,r)},{immediate:!0});const u=o.inject("orientation");let f="";o.onMounted(()=>{f=t.size,s.setPanes({panes:s.state.panes})}),o.onUpdated(()=>{s.setPanes({panes:s.state.panes})});const z=()=>{const l=n.value;if(!!l)return u==="vertical"?l.offsetHeight:l.offsetWidth};return o.watch(()=>t.collapsed,l=>{const r=n.value;if(!r)return;const m="devui-splitter-pane-hidden";l?B(r,m):b(r,m),l&&t.shrink?(b(r,m),y(r,{flexBasis:`${t.shrinkWidth}px`})):y(r,{flexBasis:f})},{immediate:!0}),i({order:p,getPaneSize:z,toggleNearPaneFlexGrow:l=>{const r=n.value;if(!(r instanceof HTMLElement))return;const m="devui-splitter-pane-grow";N(r,m)?b(r,m):l&&B(r,m)}}),()=>{var l;return o.createVNode("div",{class:"devui-splitter-pane",ref:n},[(l=e.default)==null?void 0:l.call(e)])}}});v.install=function(t){t.component(v.name,v),t.component(D.name,D)};var O={title:"Splitter \u5206\u5272\u5668",category:"\u5E03\u5C40",status:"100%",install(t){t.use(v)}};g.Splitter=v,g.default=O,Object.defineProperty(g,"__esModule",{value:!0}),g[Symbol.toStringTag]="Module"});
|