@web-utils/component 1.0.5 → 1.0.8

package/dist/index.js

@@ -1 +1,738 @@
-var b=Object.defineProperty,I=Object.defineProperties;var E=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var m=(e,t,n)=>t in e?b(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))T.call(t,n)&&m(e,n,t[n]);if(d)for(var n of d(t))P.call(t,n)&&m(e,n,t[n]);return e},c=(e,t)=>I(e,E(t));import{isPlainObject as V,isString as N,isArray as W}from"@web-utils/core";var Ne="",j=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)},A=[],We="";function a(e,t,n,s,r,u,h,B){var i=typeof e=="function"?e.options:e;t&&(i.render=t,i.staticRenderFns=n,i._compiled=!0),s&&(i.functional=!0),u&&(i._scopeId="data-v-"+u);var l;if(h?(l=function(o){o=o||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!o&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(o=__VUE_SSR_CONTEXT__),r&&r.call(this,o),o&&o._registeredComponents&&o._registeredComponents.add(h)},i._ssrRegister=l):r&&(l=B?function(){r.call(this,(i.functional?this.parent:this).$root.$options.shadowRoot)}:r),l)if(i.functional){i._injectStyles=l;var O=i.render;i.render=function(R,p){return l.call(p),O(R,p)}}else{var v=i.beforeCreate;i.beforeCreate=v?[].concat(v,l):[l]}return{exports:e,options:i}}const H={name:"EmptyView",props:{emptyTips:{type:String,default:"\u6682\u65E0\u6570\u636E"},fontSize:{type:String,default:"20px"},height:{type:String,default:"100%"}}},x={};var X=a(H,j,A,!1,U,null,null,null);function U(e){for(let t in x)this[t]=x[t]}var k=function(){return X.exports}(),L=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)])},J=[],je="";const Y={name:"FlexScroller",props:{flexColumn:Boolean,flexRow:Boolean,contentClass:String,contentScroll:{type:Boolean,default:!0}}},$={};var q=a(Y,L,J,!1,D,null,null,null);function D(e){for(let t in $)this[t]=$[t]}var G=function(){return q.exports}(),K=function(){var e=this,t=e.$createElement;return e._self._c,e._m(0)},Q=[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... ")])])}],Ae="";const Z={name:"NotImplement"},g={};var ee=a(Z,K,Q,!1,te,"f91d5e80",null,null);function te(e){for(let t in g)this[t]=g[t]}var ne=function(){return ee.exports}();function re(e,t){for(let n=0;n<t.length;n++)if(e===t[n])return!0;return!1}const C=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)}}(),y=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 se=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()])},ie=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return e._l(8,function(s){return n("i",{key:`trigger-${s}`,class:`${e.prefix}-bar`})})}],He="";const oe={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"]}}},z={};var le=a(oe,se,ie,!1,ae,null,null,null);function ae(e){for(let t in z)this[t]=z[t]}var ue=function(){return le.exports}(),fe=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)])])},ce=[],Xe="";const _e={name:"SplitPane",components:{Trigger:ue},props:{value:{type:[Number,String],default:.5},mode:{validator(e){return re(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,s=this.$refs.outerWrapper[this.offsetSize];let r=this.valueIsPx?`${parseFloat(this.oldOffset)+n}px`:this.px2percent(s*this.oldOffset+n,s);const u=this.getAnotherOffset(r);parseFloat(r)<=parseFloat(this.computedMin)&&(r=this.getMax(r,this.computedMin)),parseFloat(u)<=parseFloat(this.computedMax)&&(r=this.getAnotherOffset(this.getMax(u,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,y(window,"mousemove",this.handleMove),y(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,C(window,"mousemove",this.handleMove),C(window,"mouseup",this.handleUp),this.$emit("on-move-start")}}},S={};var he=a(_e,fe,ce,!1,ve,null,null,null);function ve(e){for(let t in S)this[t]=S[t]}var pe=function(){return he.exports}(),de={name:"JSXComponent",props:{msg:{type:String,default:""}},render(){return arguments[0]("div",[this.msg])}};const _=(e,t)=>V(e)||N(e)?[t,e]:W(e)?[t,...e]:[t],me={name:"FlexRow",functional:!0,props:{verticalCenter:{type:Boolean,default:!1},horizonCenter:{type:Boolean,default:!1},center:{type:Boolean,default:!1},textCenter:{type:Boolean,default:!1}},render(e,{data:t,children:n,props:s}){const r=_(t.class,"flex-row");return s.center||s.horizonCenter&&s.verticalCenter?(r.push("horizon-center"),r.push("vertical-center")):(s.horizonCenter&&r.push("horizon-center"),s.verticalCenter&&r.push("vertical-center")),s.textCenter&&r.push("text-center"),e("div",c(f({},t),{class:r}),n)}};let xe,$e;const w={};var ge=a(me,xe,$e,!1,Ce,null,null,null);function Ce(e){for(let t in w)this[t]=w[t]}var ye=function(){return ge.exports}();const ze={name:"FlexColumn",functional:!0,props:{verticalCenter:{type:Boolean,default:!1},horizonCenter:{type:Boolean,default:!1},center:{type:Boolean,default:!1},textCenter:{type:Boolean,default:!1}},render(e,{data:t,children:n,props:s}){const r=_(t.class,"flex-column");return s.center||s.horizonCenter&&s.verticalCenter?(r.push("horizon-center"),r.push("vertical-center")):(s.horizonCenter&&r.push("horizon-center"),s.verticalCenter&&r.push("vertical-center")),s.textCenter&&r.push("text-center"),e("div",c(f({},t),{class:r}),n)}};let Se,we;const M={};var Me=a(ze,Se,we,!1,Fe,null,null,null);function Fe(e){for(let t in M)this[t]=M[t]}var Be=function(){return Me.exports}();const Oe={name:"FlexItem",functional:!0,props:{flexRow:{type:Boolean,default:!1},flexColumn:{type:Boolean,default:!1},verticalCenter:{type:Boolean,default:!1},horizonCenter:{type:Boolean,default:!1},center:{type:Boolean,default:!1},textCenter:{type:Boolean,default:!1},relative:{type:Boolean,default:!1},absolute:{type:Boolean,default:!1}},render(e,{children:t,data:n,props:s}){const r=_(n.class,s.relative?"flex-item-relative":"flex-item");return s.absolute&&!s.relative&&r.push("flex-item-relative"),s.center||s.horizonCenter&&s.verticalCenter?(r.push("horizon-center"),r.push("vertical-center")):(s.horizonCenter&&r.push("horizon-center"),s.verticalCenter&&r.push("vertical-center")),s.textCenter&&r.push("text-center"),s.flexColumn&&r.push("flex-column"),s.flexRow&&r.push("flex-row"),s.absolute?e("div",c(f({},n),{class:r}),[e("div",{class:"absolute",style:"overflow:auto"},t)]):e("div",c(f({},n),{class:r}),t)}};let Re,be;const F={};var Ie=a(Oe,Re,be,!1,Ee,null,null,null);function Ee(e){for(let t in F)this[t]=F[t]}var Te=function(){return Ie.exports}();export{k as EmptyView,Be as FlexColumn,Te as FlexItem,ye as FlexRow,G as FlexScroller,de as JSXComponent,ne as NotImplement,pe as SplitPane};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { isPlainObject, isString, isArray } from "@web-utils/core";
+var util = "";
+const version = "1.0.8";
+var render$4 = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    staticClass: "empty-view",
+    style: {
+      fontSize: _vm.fontSize,
+      height: _vm.height
+    }
+  }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.emptyTips))];
+  })], 2);
+};
+var staticRenderFns$4 = [];
+var EmptyView_vue_vue_type_style_index_0_lang = "";
+function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render2) {
+    options.render = render2;
+    options.staticRenderFns = staticRenderFns2;
+    options._compiled = true;
+  }
+  if (functionalTemplate) {
+    options.functional = true;
+  }
+  if (scopeId) {
+    options._scopeId = "data-v-" + scopeId;
+  }
+  var hook;
+  if (moduleIdentifier) {
+    hook = function(context) {
+      context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
+        context = __VUE_SSR_CONTEXT__;
+      }
+      if (injectStyles) {
+        injectStyles.call(this, context);
+      }
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier);
+      }
+    };
+    options._ssrRegister = hook;
+  } else if (injectStyles) {
+    hook = shadowMode ? function() {
+      injectStyles.call(this, (options.functional ? this.parent : this).$root.$options.shadowRoot);
+    } : injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+const __vue2_script$7 = {
+  name: "EmptyView",
+  props: {
+    emptyTips: {
+      type: String,
+      default: "\u6682\u65E0\u6570\u636E"
+    },
+    fontSize: {
+      type: String,
+      default: "20px"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    }
+  }
+};
+const __cssModules$7 = {};
+var __component__$7 = /* @__PURE__ */ normalizeComponent(__vue2_script$7, render$4, staticRenderFns$4, false, __vue2_injectStyles$7, null, null, null);
+function __vue2_injectStyles$7(context) {
+  for (let o in __cssModules$7) {
+    this[o] = __cssModules$7[o];
+  }
+}
+var EmptyView = /* @__PURE__ */ function() {
+  return __component__$7.exports;
+}();
+EmptyView.install = function(Vue) {
+  Vue.component(EmptyView.name, EmptyView);
+};
+var render$3 = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    staticClass: "flex-scroller-wrapper"
+  }, [_c("div", {
+    class: ["flex-scroller", {
+      "flex-column": _vm.flexColumn,
+      "flex-row": _vm.flexRow,
+      "content-scroll": _vm.contentScroll
+    }, _vm.contentClass]
+  }, [_vm._t("default")], 2)]);
+};
+var staticRenderFns$3 = [];
+var FlexScroller_vue_vue_type_style_index_0_lang = "";
+const __vue2_script$6 = {
+  name: "FlexScroller",
+  props: {
+    flexColumn: Boolean,
+    flexRow: Boolean,
+    contentClass: String,
+    contentScroll: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+const __cssModules$6 = {};
+var __component__$6 = /* @__PURE__ */ normalizeComponent(__vue2_script$6, render$3, staticRenderFns$3, false, __vue2_injectStyles$6, null, null, null);
+function __vue2_injectStyles$6(context) {
+  for (let o in __cssModules$6) {
+    this[o] = __cssModules$6[o];
+  }
+}
+var FlexScroller = /* @__PURE__ */ function() {
+  return __component__$6.exports;
+}();
+FlexScroller.install = function(Vue) {
+  Vue.component(FlexScroller.name, FlexScroller);
+};
+var render$2 = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  _vm._self._c || _h;
+  return _vm._m(0);
+};
+var staticRenderFns$2 = [function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    staticClass: "not-implement"
+  }, [_c("div", [_c("i", {
+    staticClass: "fa fa-wrench"
+  }), _vm._v(" \u5EFA\u8BBE\u4E2D... ")])]);
+}];
+var NotImplement_vue_vue_type_style_index_0_scoped_true_lang = "";
+const __vue2_script$5 = {
+  name: "NotImplement"
+};
+const __cssModules$5 = {};
+var __component__$5 = /* @__PURE__ */ normalizeComponent(__vue2_script$5, render$2, staticRenderFns$2, false, __vue2_injectStyles$5, "f91d5e80", null, null);
+function __vue2_injectStyles$5(context) {
+  for (let o in __cssModules$5) {
+    this[o] = __cssModules$5[o];
+  }
+}
+var NotImplement = /* @__PURE__ */ function() {
+  return __component__$5.exports;
+}();
+NotImplement.install = function(Vue) {
+  Vue.component(NotImplement.name, NotImplement);
+};
+function oneOf(value, validList) {
+  for (let i = 0; i < validList.length; i++) {
+    if (value === validList[i]) {
+      return true;
+    }
+  }
+  return false;
+}
+const on = function() {
+  if (document.addEventListener) {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.attachEvent(`on${event}`, handler);
+      }
+    };
+  }
+}();
+const off = function() {
+  if (document.removeEventListener) {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.removeEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.detachEvent(`on${event}`, handler);
+      }
+    };
+  }
+}();
+var render$1 = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    class: _vm.classes
+  }, [_vm.showIcon ? _c("div", {
+    class: _vm.barConClasses
+  }, _vm._m(0), 0) : _vm._e()]);
+};
+var staticRenderFns$1 = [function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm._l(8, function(i) {
+    return _c("i", {
+      key: `trigger-${i}`,
+      class: `${_vm.prefix}-bar`
+    });
+  });
+}];
+var Trigger_vue_vue_type_style_index_0_lang = "";
+const __vue2_script$4 = {
+  name: "Trigger",
+  props: {
+    mode: String,
+    showIcon: Boolean,
+    line: {
+      type: Boolean,
+      default: true
+    }
+  },
+  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"
+      ];
+    }
+  }
+};
+const __cssModules$4 = {};
+var __component__$4 = /* @__PURE__ */ normalizeComponent(__vue2_script$4, render$1, staticRenderFns$1, false, __vue2_injectStyles$4, null, null, null);
+function __vue2_injectStyles$4(context) {
+  for (let o in __cssModules$4) {
+    this[o] = __cssModules$4[o];
+  }
+}
+var Trigger = /* @__PURE__ */ function() {
+  return __component__$4.exports;
+}();
+var render = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    ref: "outerWrapper",
+    class: _vm.wrapperClasses
+  }, [_vm.isHorizontal ? _c("div", {
+    class: `${_vm.prefix}-horizontal`
+  }, [_c("div", {
+    class: [`${_vm.prefix}-pane`, "left-pane"],
+    style: {
+      right: `${_vm.anotherOffset}%`
+    }
+  }, [_vm._t("left")], 2), _c("div", {
+    class: `${_vm.prefix}-trigger-con`,
+    style: {
+      left: `calc(${_vm.offset}% + ${_vm.triggerSize / 2}px)`,
+      width: `${_vm.triggerSize}px`
+    },
+    on: {
+      "mousedown": _vm.handleMousedown
+    }
+  }, [_vm._t("trigger", function() {
+    return [_c("Trigger", {
+      attrs: {
+        "mode": "vertical"
+      }
+    })];
+  })], 2), _c("div", {
+    class: [`${_vm.prefix}-pane`, "right-pane"],
+    style: {
+      left: `calc(${_vm.offset}% + ${_vm.triggerSize}px)`
+    }
+  }, [_vm._t("right")], 2)]) : _c("div", {
+    class: `${_vm.prefix}-vertical`
+  }, [_c("div", {
+    class: [`${_vm.prefix}-pane`, "top-pane"],
+    style: {
+      bottom: `${_vm.anotherOffset}%`
+    }
+  }, [_vm._t("top")], 2), _c("div", {
+    class: `${_vm.prefix}-trigger-con`,
+    style: {
+      top: `calc(${_vm.offset}% + ${_vm.triggerSize / 2}px)`,
+      height: `${_vm.triggerSize}px`
+    },
+    on: {
+      "mousedown": _vm.handleMousedown
+    }
+  }, [_vm._t("trigger", function() {
+    return [_c("Trigger", {
+      attrs: {
+        "mode": "horizontal"
+      }
+    })];
+  })], 2), _c("div", {
+    class: [`${_vm.prefix}-pane`, "bottom-pane"],
+    style: {
+      top: `calc(${_vm.offset}% + ${_vm.triggerSize}px)`
+    }
+  }, [_vm._t("bottom")], 2)])]);
+};
+var staticRenderFns = [];
+var SplitPane_vue_vue_type_style_index_0_lang = "";
+const __vue2_script$3 = {
+  name: "SplitPane",
+  components: {
+    Trigger
+  },
+  props: {
+    value: {
+      type: [Number, String],
+      default: 0.5
+    },
+    mode: {
+      validator(value) {
+        return oneOf(value, ["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: false
+    };
+  },
+  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(numerator, denominator) {
+      return parseFloat(numerator) / parseFloat(denominator);
+    },
+    getComputedThresholdValue(type) {
+      const size = this.$refs.outerWrapper[this.offsetSize];
+      if (this.valueIsPx) {
+        return typeof this[type] === "string" ? this[type] : size * this[type];
+      } else {
+        return typeof this[type] === "string" ? this.px2percent(this[type], size) : this[type];
+      }
+    },
+    getMin(value1, value2) {
+      if (this.valueIsPx) {
+        return `${Math.min(parseFloat(value1), parseFloat(value2))}px`;
+      } else {
+        return Math.min(value1, value2);
+      }
+    },
+    getMax(value1, value2) {
+      if (this.valueIsPx) {
+        return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
+      } else {
+        return Math.max(value1, value2);
+      }
+    },
+    getAnotherOffset(value) {
+      let res = 0;
+      if (this.valueIsPx) {
+        res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`;
+      } else {
+        res = 1 - value;
+      }
+      return res;
+    },
+    handleMove(e) {
+      const pageOffset = this.isHorizontal ? e.pageX : e.pageY;
+      const offset = pageOffset - this.initOffset;
+      const outerWidth = this.$refs.outerWrapper[this.offsetSize];
+      let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : this.px2percent(outerWidth * this.oldOffset + offset, outerWidth);
+      const anotherValue = this.getAnotherOffset(value);
+      if (parseFloat(value) <= parseFloat(this.computedMin))
+        value = this.getMax(value, this.computedMin);
+      if (parseFloat(anotherValue) <= parseFloat(this.computedMax))
+        value = this.getAnotherOffset(this.getMax(anotherValue, 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", value);
+      this.$emit("on-moving", e);
+    },
+    handleUp() {
+      this.isMoving = false;
+      off(window, "mousemove", this.handleMove);
+      off(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 = true;
+      on(window, "mousemove", this.handleMove);
+      on(window, "mouseup", this.handleUp);
+      this.$emit("on-move-start");
+    }
+  }
+};
+const __cssModules$3 = {};
+var __component__$3 = /* @__PURE__ */ normalizeComponent(__vue2_script$3, render, staticRenderFns, false, __vue2_injectStyles$3, null, null, null);
+function __vue2_injectStyles$3(context) {
+  for (let o in __cssModules$3) {
+    this[o] = __cssModules$3[o];
+  }
+}
+var Split = /* @__PURE__ */ function() {
+  return __component__$3.exports;
+}();
+Split.install = function(Vue) {
+  Vue.component(Split.name, Split);
+};
+var JSXComponent = {
+  name: "JSXComponent",
+  props: {
+    msg: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    const h = arguments[0];
+    return h("div", [this.msg]);
+  }
+};
+const getClass = (customClass, fixedClass) => {
+  if (isPlainObject(customClass) || isString(customClass)) {
+    return [fixedClass, customClass];
+  } else if (isArray(customClass)) {
+    return [fixedClass, ...customClass];
+  } else {
+    return [fixedClass];
+  }
+};
+const __vue2_script$2 = {
+  name: "FlexColumn",
+  functional: true,
+  props: {
+    verticalCenter: {
+      type: Boolean,
+      default: false
+    },
+    horizonCenter: {
+      type: Boolean,
+      default: false
+    },
+    center: {
+      type: Boolean,
+      default: false
+    },
+    textCenter: {
+      type: Boolean,
+      default: false
+    }
+  },
+  render(createElement, { data, children, props }) {
+    const viewClass = getClass(data.class, "flex-column");
+    if (props.center || props.horizonCenter && props.verticalCenter) {
+      viewClass.push("horizon-center");
+      viewClass.push("vertical-center");
+    } else {
+      if (props.horizonCenter) {
+        viewClass.push("horizon-center");
+      }
+      if (props.verticalCenter) {
+        viewClass.push("vertical-center");
+      }
+    }
+    if (props.textCenter) {
+      viewClass.push("text-center");
+    }
+    return createElement("div", __spreadProps(__spreadValues({}, data), { class: viewClass }), children);
+  }
+};
+let __vue2_render$2, __vue2_staticRenderFns$2;
+const __cssModules$2 = {};
+var __component__$2 = /* @__PURE__ */ normalizeComponent(__vue2_script$2, __vue2_render$2, __vue2_staticRenderFns$2, false, __vue2_injectStyles$2, null, null, null);
+function __vue2_injectStyles$2(context) {
+  for (let o in __cssModules$2) {
+    this[o] = __cssModules$2[o];
+  }
+}
+var FlexColumn = /* @__PURE__ */ function() {
+  return __component__$2.exports;
+}();
+const __vue2_script$1 = {
+  name: "FlexItem",
+  functional: true,
+  props: {
+    flexRow: {
+      type: Boolean,
+      default: false
+    },
+    flexColumn: {
+      type: Boolean,
+      default: false
+    },
+    verticalCenter: {
+      type: Boolean,
+      default: false
+    },
+    horizonCenter: {
+      type: Boolean,
+      default: false
+    },
+    center: {
+      type: Boolean,
+      default: false
+    },
+    textCenter: {
+      type: Boolean,
+      default: false
+    },
+    relative: {
+      type: Boolean,
+      default: false
+    },
+    absolute: {
+      type: Boolean,
+      default: false
+    }
+  },
+  render(createElement, { children, data, props }) {
+    const viewClass = getClass(data.class, props.relative ? "flex-item-relative" : "flex-item");
+    if (props.absolute && !props.relative) {
+      viewClass.push("flex-item-relative");
+    }
+    if (props.center || props.horizonCenter && props.verticalCenter) {
+      viewClass.push("horizon-center");
+      viewClass.push("vertical-center");
+    } else {
+      if (props.horizonCenter) {
+        viewClass.push("horizon-center");
+      }
+      if (props.verticalCenter) {
+        viewClass.push("vertical-center");
+      }
+    }
+    if (props.textCenter) {
+      viewClass.push("text-center");
+    }
+    if (props.flexColumn) {
+      viewClass.push("flex-column");
+    }
+    if (props.flexRow) {
+      viewClass.push("flex-row");
+    }
+    if (props.absolute) {
+      return createElement("div", __spreadProps(__spreadValues({}, data), { class: viewClass }), [createElement("div", { class: "absolute", style: "overflow:auto" }, children)]);
+    } else {
+      return createElement("div", __spreadProps(__spreadValues({}, data), { class: viewClass }), children);
+    }
+  }
+};
+let __vue2_render$1, __vue2_staticRenderFns$1;
+const __cssModules$1 = {};
+var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, __vue2_render$1, __vue2_staticRenderFns$1, false, __vue2_injectStyles$1, null, null, null);
+function __vue2_injectStyles$1(context) {
+  for (let o in __cssModules$1) {
+    this[o] = __cssModules$1[o];
+  }
+}
+var FlexItem = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}();
+const __vue2_script = {
+  name: "FlexRow",
+  functional: true,
+  props: {
+    verticalCenter: {
+      type: Boolean,
+      default: false
+    },
+    horizonCenter: {
+      type: Boolean,
+      default: false
+    },
+    center: {
+      type: Boolean,
+      default: false
+    },
+    textCenter: {
+      type: Boolean,
+      default: false
+    }
+  },
+  render(createElement, { data, children, props }) {
+    const viewClass = getClass(data.class, "flex-row");
+    if (props.center || props.horizonCenter && props.verticalCenter) {
+      viewClass.push("horizon-center");
+      viewClass.push("vertical-center");
+    } else {
+      if (props.horizonCenter) {
+        viewClass.push("horizon-center");
+      }
+      if (props.verticalCenter) {
+        viewClass.push("vertical-center");
+      }
+    }
+    if (props.textCenter) {
+      viewClass.push("text-center");
+    }
+    return createElement("div", __spreadProps(__spreadValues({}, data), { class: viewClass }), children);
+  }
+};
+let __vue2_render, __vue2_staticRenderFns;
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, __vue2_render, __vue2_staticRenderFns, false, __vue2_injectStyles, null, null, null);
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var FlexRow = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+FlexColumn.install = function(Vue) {
+  Vue.component(FlexColumn.name, FlexColumn);
+};
+FlexItem.install = function(Vue) {
+  Vue.component(FlexItem.name, FlexItem);
+};
+FlexRow.install = function(Vue) {
+  Vue.component(FlexRow.name, FlexRow);
+};
+function install(Vue) {
+  Vue.use(EmptyView);
+  Vue.use(FlexScroller);
+  Vue.use(NotImplement);
+  Vue.use(Split);
+  Vue.use(FlexColumn);
+  Vue.use(FlexItem);
+  Vue.use(FlexRow);
+  Vue.component(JSXComponent.name, JSXComponent);
+}
+export { EmptyView, FlexColumn, FlexItem, FlexRow, FlexScroller, JSXComponent, NotImplement, Split as SplitPane, install as default, install, version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-utils/component",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "private": false,
   "license": "MIT",
   "main": "./dist/index.js",