@web-utils/component 1.0.0 → 1.0.1

package/dist/index.js

@@ -1 +1 @@
-const O="1.0.0";var E=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"empty-view",style:{fontSize:e.fontSize,height:e.height}},[e._t("default",function(){return[e._v(e._s(e.emptyTips))]})],2)},T=[],ne="";function f(e,t,n,a,r,l,_,w){var s=typeof e=="function"?e.options:e;t&&(s.render=t,s.staticRenderFns=n,s._compiled=!0),a&&(s.functional=!0),l&&(s._scopeId="data-v-"+l);var o;if(_?(o=function(i){i=i||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!i&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(i=__VUE_SSR_CONTEXT__),r&&r.call(this,i),i&&i._registeredComponents&&i._registeredComponents.add(_)},s._ssrRegister=o):r&&(o=w?function(){r.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:r),o)if(s.functional){s._injectStyles=o;var C=s.render;s.render=function(F,d){return o.call(d),C(F,d)}}else{var v=s.beforeCreate;s.beforeCreate=v?[].concat(v,o):[o]}return{exports:e,options:s}}const I={name:"EmptyView",props:{emptyTips:{type:String,default:"\u6682\u65E0\u6570\u636E"},fontSize:{type:String,default:"20px"},height:{type:String,default:"100%"}}},m={};var b=f(I,E,T,!1,R,null,null,null);function R(e){for(let t in m)this[t]=m[t]}var u=function(){return b.exports}();u.install=function(e){e.component(u.name,u)};var P=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"flex-scroller-wrapper"},[n("div",{class:["flex-scroller",{"flex-column":e.flexColumn,"flex-row":e.flexRow,"content-scroll":e.contentScroll},e.contentClass]},[e._t("default")],2)])},V=[],se="";const N={name:"FlexScroller",props:{flexColumn:Boolean,flexRow:Boolean,contentClass:String,contentScroll:{type:Boolean,default:!0}}},g={};var W=f(N,P,V,!1,H,null,null,null);function H(e){for(let t in g)this[t]=g[t]}var c=function(){return W.exports}();c.install=function(e){e.component(c.name,c)};var A=function(){var e=this,t=e.$createElement;return e._self._c,e._m(0)},B=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"not-implement"},[n("div",[n("i",{staticClass:"fa fa-wrench"}),e._v(" \u5EFA\u8BBE\u4E2D... ")])])}],re="";const U={name:"NotImplement"},$={};var X=f(U,A,B,!1,j,"f91d5e80",null,null);function j(e){for(let t in $)this[t]=$[t]}var p=function(){return X.exports}();p.install=function(e){e.component(p.name,p)};function k(e,t){for(let n=0;n<t.length;n++)if(e===t[n])return!0;return!1}const x=function(){return document.addEventListener?function(e,t,n){e&&t&&n&&e.addEventListener(t,n,!1)}:function(e,t,n){e&&t&&n&&e.attachEvent(`on${t}`,n)}}(),S=function(){return document.removeEventListener?function(e,t,n){e&&t&&e.removeEventListener(t,n,!1)}:function(e,t,n){e&&t&&e.detachEvent(`on${t}`,n)}}();var L=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:e.classes},[e.showIcon?n("div",{class:e.barConClasses},e._m(0),0):e._e()])},Y=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return e._l(8,function(a){return n("i",{key:`trigger-${a}`,class:`${e.prefix}-bar`})})}],ie="";const q={name:"Trigger",props:{mode:String,showIcon:Boolean,line:{type:Boolean,default:!0}},data(){return{prefix:"egd-split-trigger"}},computed:{isVertical(){return this.mode==="vertical"},classes(){return[this.prefix,this.line?this.isVertical?` ${this.prefix}-vertical-line`:`${this.prefix}-horizontal-line`:"",this.isVertical?`${this.prefix}-vertical`:`${this.prefix}-horizontal`]},barConClasses(){return[`${this.prefix}-bar-con`,this.isVertical?"vertical":"horizontal"]}}},y={};var D=f(q,L,Y,!1,G,null,null,null);function G(e){for(let t in y)this[t]=y[t]}var J=function(){return D.exports}(),K=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"outerWrapper",class:e.wrapperClasses},[e.isHorizontal?n("div",{class:`${e.prefix}-horizontal`},[n("div",{class:[`${e.prefix}-pane`,"left-pane"],style:{right:`${e.anotherOffset}%`}},[e._t("left")],2),n("div",{class:`${e.prefix}-trigger-con`,style:{left:`calc(${e.offset}% + ${e.triggerSize/2}px)`,width:`${e.triggerSize}px`},on:{mousedown:e.handleMousedown}},[e._t("trigger",function(){return[n("Trigger",{attrs:{mode:"vertical"}})]})],2),n("div",{class:[`${e.prefix}-pane`,"right-pane"],style:{left:`calc(${e.offset}% + ${e.triggerSize}px)`}},[e._t("right")],2)]):n("div",{class:`${e.prefix}-vertical`},[n("div",{class:[`${e.prefix}-pane`,"top-pane"],style:{bottom:`${e.anotherOffset}%`}},[e._t("top")],2),n("div",{class:`${e.prefix}-trigger-con`,style:{top:`calc(${e.offset}% + ${e.triggerSize/2}px)`,height:`${e.triggerSize}px`},on:{mousedown:e.handleMousedown}},[e._t("trigger",function(){return[n("Trigger",{attrs:{mode:"horizontal"}})]})],2),n("div",{class:[`${e.prefix}-pane`,"bottom-pane"],style:{top:`calc(${e.offset}% + ${e.triggerSize}px)`}},[e._t("bottom")],2)])])},Q=[],oe="";const Z={name:"SplitPane",components:{Trigger:J},props:{value:{type:[Number,String],default:.5},mode:{validator(e){return k(e,["horizontal","vertical"])},default:"horizontal"},triggerSize:{type:Number,default:6},min:{type:[Number,String],default:"40px"},max:{type:[Number,String],default:"40px"}},data(){return{prefix:"egd-split",offset:0,oldOffset:0,isMoving:!1}},computed:{wrapperClasses(){return[`${this.prefix}-wrapper`,this.isMoving?"no-select":""]},isHorizontal(){return this.mode==="horizontal"},anotherOffset(){return 100-this.offset},valueIsPx(){return typeof this.value=="string"},offsetSize(){return this.isHorizontal?"offsetWidth":"offsetHeight"},computedMin(){return this.getComputedThresholdValue("min")},computedMax(){return this.getComputedThresholdValue("max")}},watch:{value(){this.offset=(this.valueIsPx?this.px2percent(this.value,this.$refs.outerWrapper[this.offsetSize]):this.value)*1e4/100}},mounted(){this.$nextTick(()=>{this.offset=(this.valueIsPx?this.px2percent(this.value,this.$refs.outerWrapper[this.offsetSize]):this.value)*1e4/100})},methods:{px2percent(e,t){return parseFloat(e)/parseFloat(t)},getComputedThresholdValue(e){const t=this.$refs.outerWrapper[this.offsetSize];return this.valueIsPx?typeof this[e]=="string"?this[e]:t*this[e]:typeof this[e]=="string"?this.px2percent(this[e],t):this[e]},getMin(e,t){return this.valueIsPx?`${Math.min(parseFloat(e),parseFloat(t))}px`:Math.min(e,t)},getMax(e,t){return this.valueIsPx?`${Math.max(parseFloat(e),parseFloat(t))}px`:Math.max(e,t)},getAnotherOffset(e){let t=0;return this.valueIsPx?t=`${this.$refs.outerWrapper[this.offsetSize]-parseFloat(e)}px`:t=1-e,t},handleMove(e){const n=(this.isHorizontal?e.pageX:e.pageY)-this.initOffset,a=this.$refs.outerWrapper[this.offsetSize];let r=this.valueIsPx?`${parseFloat(this.oldOffset)+n}px`:this.px2percent(a*this.oldOffset+n,a);const l=this.getAnotherOffset(r);parseFloat(r)<=parseFloat(this.computedMin)&&(r=this.getMax(r,this.computedMin)),parseFloat(l)<=parseFloat(this.computedMax)&&(r=this.getAnotherOffset(this.getMax(l,this.computedMax))),e.atMin=this.value===this.computedMin,e.atMax=this.valueIsPx?this.getAnotherOffset(this.value)===this.computedMax:this.getAnotherOffset(this.value).toFixed(5)===this.computedMax.toFixed(5),this.$emit("input",r),this.$emit("on-moving",e)},handleUp(){this.isMoving=!1,S(window,"mousemove",this.handleMove),S(window,"mouseup",this.handleUp),this.$emit("on-move-end")},handleMousedown(e){this.initOffset=this.isHorizontal?e.pageX:e.pageY,this.oldOffset=this.value,this.isMoving=!0,x(window,"mousemove",this.handleMove),x(window,"mouseup",this.handleUp),this.$emit("on-move-start")}}},M={};var ee=f(Z,K,Q,!1,te,null,null,null);function te(e){for(let t in M)this[t]=M[t]}var h=function(){return ee.exports}();h.install=function(e){e.component(h.name,h)};function z(e){e.use(u),e.use(c),e.use(p),e.use(h)}export{z as default,z as install,O as version};
+const O="1.0.1";var E=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"empty-view",style:{fontSize:e.fontSize,height:e.height}},[e._t("default",function(){return[e._v(e._s(e.emptyTips))]})],2)},T=[],ne="";function f(e,t,n,a,r,l,_,w){var s=typeof e=="function"?e.options:e;t&&(s.render=t,s.staticRenderFns=n,s._compiled=!0),a&&(s.functional=!0),l&&(s._scopeId="data-v-"+l);var o;if(_?(o=function(i){i=i||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!i&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(i=__VUE_SSR_CONTEXT__),r&&r.call(this,i),i&&i._registeredComponents&&i._registeredComponents.add(_)},s._ssrRegister=o):r&&(o=w?function(){r.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:r),o)if(s.functional){s._injectStyles=o;var C=s.render;s.render=function(F,d){return o.call(d),C(F,d)}}else{var v=s.beforeCreate;s.beforeCreate=v?[].concat(v,o):[o]}return{exports:e,options:s}}const I={name:"EmptyView",props:{emptyTips:{type:String,default:"\u6682\u65E0\u6570\u636E"},fontSize:{type:String,default:"20px"},height:{type:String,default:"100%"}}},m={};var b=f(I,E,T,!1,P,null,null,null);function P(e){for(let t in m)this[t]=m[t]}var u=function(){return b.exports}();u.install=function(e){e.component(u.name,u)};var R=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"flex-scroller-wrapper"},[n("div",{class:["flex-scroller",{"flex-column":e.flexColumn,"flex-row":e.flexRow,"content-scroll":e.contentScroll},e.contentClass]},[e._t("default")],2)])},V=[],se="";const N={name:"FlexScroller",props:{flexColumn:Boolean,flexRow:Boolean,contentClass:String,contentScroll:{type:Boolean,default:!0}}},g={};var W=f(N,R,V,!1,H,null,null,null);function H(e){for(let t in g)this[t]=g[t]}var c=function(){return W.exports}();c.install=function(e){e.component(c.name,c)};var A=function(){var e=this,t=e.$createElement;return e._self._c,e._m(0)},B=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"not-implement"},[n("div",[n("i",{staticClass:"fa fa-wrench"}),e._v(" \u5EFA\u8BBE\u4E2D... ")])])}],re="";const U={name:"NotImplement"},$={};var X=f(U,A,B,!1,j,"f91d5e80",null,null);function j(e){for(let t in $)this[t]=$[t]}var p=function(){return X.exports}();p.install=function(e){e.component(p.name,p)};function k(e,t){for(let n=0;n<t.length;n++)if(e===t[n])return!0;return!1}const x=function(){return document.addEventListener?function(e,t,n){e&&t&&n&&e.addEventListener(t,n,!1)}:function(e,t,n){e&&t&&n&&e.attachEvent(`on${t}`,n)}}(),S=function(){return document.removeEventListener?function(e,t,n){e&&t&&e.removeEventListener(t,n,!1)}:function(e,t,n){e&&t&&e.detachEvent(`on${t}`,n)}}();var L=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:e.classes},[e.showIcon?n("div",{class:e.barConClasses},e._m(0),0):e._e()])},Y=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return e._l(8,function(a){return n("i",{key:`trigger-${a}`,class:`${e.prefix}-bar`})})}],ie="";const q={name:"Trigger",props:{mode:String,showIcon:Boolean,line:{type:Boolean,default:!0}},data(){return{prefix:"egd-split-trigger"}},computed:{isVertical(){return this.mode==="vertical"},classes(){return[this.prefix,this.line?this.isVertical?` ${this.prefix}-vertical-line`:`${this.prefix}-horizontal-line`:"",this.isVertical?`${this.prefix}-vertical`:`${this.prefix}-horizontal`]},barConClasses(){return[`${this.prefix}-bar-con`,this.isVertical?"vertical":"horizontal"]}}},y={};var D=f(q,L,Y,!1,G,null,null,null);function G(e){for(let t in y)this[t]=y[t]}var J=function(){return D.exports}(),K=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"outerWrapper",class:e.wrapperClasses},[e.isHorizontal?n("div",{class:`${e.prefix}-horizontal`},[n("div",{class:[`${e.prefix}-pane`,"left-pane"],style:{right:`${e.anotherOffset}%`}},[e._t("left")],2),n("div",{class:`${e.prefix}-trigger-con`,style:{left:`calc(${e.offset}% + ${e.triggerSize/2}px)`,width:`${e.triggerSize}px`},on:{mousedown:e.handleMousedown}},[e._t("trigger",function(){return[n("Trigger",{attrs:{mode:"vertical"}})]})],2),n("div",{class:[`${e.prefix}-pane`,"right-pane"],style:{left:`calc(${e.offset}% + ${e.triggerSize}px)`}},[e._t("right")],2)]):n("div",{class:`${e.prefix}-vertical`},[n("div",{class:[`${e.prefix}-pane`,"top-pane"],style:{bottom:`${e.anotherOffset}%`}},[e._t("top")],2),n("div",{class:`${e.prefix}-trigger-con`,style:{top:`calc(${e.offset}% + ${e.triggerSize/2}px)`,height:`${e.triggerSize}px`},on:{mousedown:e.handleMousedown}},[e._t("trigger",function(){return[n("Trigger",{attrs:{mode:"horizontal"}})]})],2),n("div",{class:[`${e.prefix}-pane`,"bottom-pane"],style:{top:`calc(${e.offset}% + ${e.triggerSize}px)`}},[e._t("bottom")],2)])])},Q=[],oe="";const Z={name:"SplitPane",components:{Trigger:J},props:{value:{type:[Number,String],default:.5},mode:{validator(e){return k(e,["horizontal","vertical"])},default:"horizontal"},triggerSize:{type:Number,default:6},min:{type:[Number,String],default:"40px"},max:{type:[Number,String],default:"40px"}},data(){return{prefix:"egd-split",offset:0,oldOffset:0,isMoving:!1}},computed:{wrapperClasses(){return[`${this.prefix}-wrapper`,this.isMoving?"no-select":""]},isHorizontal(){return this.mode==="horizontal"},anotherOffset(){return 100-this.offset},valueIsPx(){return typeof this.value=="string"},offsetSize(){return this.isHorizontal?"offsetWidth":"offsetHeight"},computedMin(){return this.getComputedThresholdValue("min")},computedMax(){return this.getComputedThresholdValue("max")}},watch:{value(){this.offset=(this.valueIsPx?this.px2percent(this.value,this.$refs.outerWrapper[this.offsetSize]):this.value)*1e4/100}},mounted(){this.$nextTick(()=>{this.offset=(this.valueIsPx?this.px2percent(this.value,this.$refs.outerWrapper[this.offsetSize]):this.value)*1e4/100})},methods:{px2percent(e,t){return parseFloat(e)/parseFloat(t)},getComputedThresholdValue(e){const t=this.$refs.outerWrapper[this.offsetSize];return this.valueIsPx?typeof this[e]=="string"?this[e]:t*this[e]:typeof this[e]=="string"?this.px2percent(this[e],t):this[e]},getMin(e,t){return this.valueIsPx?`${Math.min(parseFloat(e),parseFloat(t))}px`:Math.min(e,t)},getMax(e,t){return this.valueIsPx?`${Math.max(parseFloat(e),parseFloat(t))}px`:Math.max(e,t)},getAnotherOffset(e){let t=0;return this.valueIsPx?t=`${this.$refs.outerWrapper[this.offsetSize]-parseFloat(e)}px`:t=1-e,t},handleMove(e){const n=(this.isHorizontal?e.pageX:e.pageY)-this.initOffset,a=this.$refs.outerWrapper[this.offsetSize];let r=this.valueIsPx?`${parseFloat(this.oldOffset)+n}px`:this.px2percent(a*this.oldOffset+n,a);const l=this.getAnotherOffset(r);parseFloat(r)<=parseFloat(this.computedMin)&&(r=this.getMax(r,this.computedMin)),parseFloat(l)<=parseFloat(this.computedMax)&&(r=this.getAnotherOffset(this.getMax(l,this.computedMax))),e.atMin=this.value===this.computedMin,e.atMax=this.valueIsPx?this.getAnotherOffset(this.value)===this.computedMax:this.getAnotherOffset(this.value).toFixed(5)===this.computedMax.toFixed(5),this.$emit("input",r),this.$emit("on-moving",e)},handleUp(){this.isMoving=!1,S(window,"mousemove",this.handleMove),S(window,"mouseup",this.handleUp),this.$emit("on-move-end")},handleMousedown(e){this.initOffset=this.isHorizontal?e.pageX:e.pageY,this.oldOffset=this.value,this.isMoving=!0,x(window,"mousemove",this.handleMove),x(window,"mouseup",this.handleUp),this.$emit("on-move-start")}}},M={};var ee=f(Z,K,Q,!1,te,null,null,null);function te(e){for(let t in M)this[t]=M[t]}var h=function(){return ee.exports}();h.install=function(e){e.component(h.name,h)};function z(e){e.use(u),e.use(c),e.use(p),e.use(h)}export{u as EmptyView,c as FlexScroller,p as NotImplement,h as SplitPane,z as default,z as install,O as version};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-utils/component",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "license": "MIT",
   "main": "./dist/index.js",
@@ -9,6 +9,7 @@
     ".": {
       "import": "./dist/index.js"
     },
+    "./style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
   "files": [