@web-utils/component 1.0.4 → 1.0.7

package/dist/index.js

@@ -1 +1,550 @@
-var H=Object.defineProperty,V=Object.defineProperties;var X=Object.getOwnPropertyDescriptors;var z=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var w=(e,t,n)=>t in e?H(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))U.call(t,n)&&w(e,n,t[n]);if(z)for(var n of z(t))k.call(t,n)&&w(e,n,t[n]);return e},c=(e,t)=>V(e,X(t));import{isPlainObject as L,isString as J,isArray as Y}from"@web-utils/core";var Ae="";const q="1.0.4";var D=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)},G=[],He="";function a(e,t,n,s,r,u,C,W){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(C?(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(C)},i._ssrRegister=l):r&&(l=W?function(){r.call(this,(i.functional?this.parent:this).$root.$options.shadowRoot)}:r),l)if(i.functional){i._injectStyles=l;var j=i.render;i.render=function(A,S){return l.call(S),j(A,S)}}else{var y=i.beforeCreate;i.beforeCreate=y?[].concat(y,l):[l]}return{exports:e,options:i}}const K={name:"EmptyView",props:{emptyTips:{type:String,default:"\u6682\u65E0\u6570\u636E"},fontSize:{type:String,default:"20px"},height:{type:String,default:"100%"}}},M={};var Q=a(K,D,G,!1,Z,null,null,null);function Z(e){for(let t in M)this[t]=M[t]}var _=function(){return Q.exports}();_.install=function(e){e.component(_.name,_)};var ee=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)])},te=[],Ve="";const ne={name:"FlexScroller",props:{flexColumn:Boolean,flexRow:Boolean,contentClass:String,contentScroll:{type:Boolean,default:!0}}},F={};var re=a(ne,ee,te,!1,se,null,null,null);function se(e){for(let t in F)this[t]=F[t]}var h=function(){return re.exports}();h.install=function(e){e.component(h.name,h)};var ie=function(){var e=this,t=e.$createElement;return e._self._c,e._m(0)},oe=[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... ")])])}],Xe="";const le={name:"NotImplement"},B={};var ae=a(le,ie,oe,!1,ue,"f91d5e80",null,null);function ue(e){for(let t in B)this[t]=B[t]}var p=function(){return ae.exports}();p.install=function(e){e.component(p.name,p)};function fe(e,t){for(let n=0;n<t.length;n++)if(e===t[n])return!0;return!1}const O=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)}}(),R=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 ce=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()])},_e=[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`})})}],Ue="";const he={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"]}}},b={};var pe=a(he,ce,_e,!1,ve,null,null,null);function ve(e){for(let t in b)this[t]=b[t]}var de=function(){return pe.exports}(),me=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)])])},xe=[],ke="";const $e={name:"SplitPane",components:{Trigger:de},props:{value:{type:[Number,String],default:.5},mode:{validator(e){return fe(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,R(window,"mousemove",this.handleMove),R(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,O(window,"mousemove",this.handleMove),O(window,"mouseup",this.handleUp),this.$emit("on-move-start")}}},I={};var ge=a($e,me,xe,!1,Ce,null,null,null);function Ce(e){for(let t in I)this[t]=I[t]}var v=function(){return ge.exports}();v.install=function(e){e.component(v.name,v)};var $={name:"JSXComponent",props:{msg:{type:String,default:""}},render(){return arguments[0]("div",[this.msg])}};const g=(e,t)=>L(e)||J(e)?[t,e]:Y(e)?[t,...e]:[t],ye={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=g(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,ze;const E={};var we=a(ye,Se,ze,!1,Me,null,null,null);function Me(e){for(let t in E)this[t]=E[t]}var d=function(){return we.exports}();const Fe={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=g(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 Be,Oe;const T={};var Re=a(Fe,Be,Oe,!1,be,null,null,null);function be(e){for(let t in T)this[t]=T[t]}var m=function(){return Re.exports}();const Ie={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=g(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 Ee,Te;const P={};var Pe=a(Ie,Ee,Te,!1,Ne,null,null,null);function Ne(e){for(let t in P)this[t]=P[t]}var x=function(){return Pe.exports}();d.install=function(e){e.component(d.name,d)},m.install=function(e){e.component(m.name,m)},x.install=function(e){e.component(x.name,x)};function N(e){e.use(_),e.use(h),e.use(p),e.use(v),e.use(d),e.use(m),e.use(x),e.component($.name,$)}export{_ as EmptyView,d as FlexColumn,m as FlexItem,x as FlexRow,h as FlexScroller,$ as JSXComponent,p as NotImplement,v as SplitPane,N as default,N as install,q as version};
+/*!
+ * @web-utils/component
+ * (c) 2022-2022 Simple
+ * Released under the MIT License.
+ */
+var H = Object.defineProperty, V = Object.defineProperties;
+var X = Object.getOwnPropertyDescriptors;
+var z = Object.getOwnPropertySymbols;
+var U = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
+var w = (e, t, n) => t in e ? H(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, f = (e, t) => {
+  for (var n in t || (t = {}))
+    U.call(t, n) && w(e, n, t[n]);
+  if (z)
+    for (var n of z(t))
+      k.call(t, n) && w(e, n, t[n]);
+  return e;
+}, c = (e, t) => V(e, X(t));
+import { isPlainObject as L, isString as J, isArray as Y } from "@web-utils/core";
+const q = "1.0.7";
+var D = 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);
+}, G = [];
+function a(e, t, n, s, r, u, C, W) {
+  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 (C ? (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(C);
+  }, i._ssrRegister = l) : r && (l = W ? function() {
+    r.call(this, (i.functional ? this.parent : this).$root.$options.shadowRoot);
+  } : r), l)
+    if (i.functional) {
+      i._injectStyles = l;
+      var j = i.render;
+      i.render = function(A, S) {
+        return l.call(S), j(A, S);
+      };
+    } else {
+      var y = i.beforeCreate;
+      i.beforeCreate = y ? [].concat(y, l) : [l];
+    }
+  return {
+    exports: e,
+    options: i
+  };
+}
+const K = {
+  name: "EmptyView",
+  props: {
+    emptyTips: {
+      type: String,
+      default: "\u6682\u65E0\u6570\u636E"
+    },
+    fontSize: {
+      type: String,
+      default: "20px"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    }
+  }
+}, M = {};
+var Q = /* @__PURE__ */ a(K, D, G, !1, Z, null, null, null);
+function Z(e) {
+  for (let t in M)
+    this[t] = M[t];
+}
+var _ = /* @__PURE__ */ function() {
+  return Q.exports;
+}();
+_.install = function(e) {
+  e.component(_.name, _);
+};
+var ee = 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)]);
+}, te = [];
+const ne = {
+  name: "FlexScroller",
+  props: {
+    flexColumn: Boolean,
+    flexRow: Boolean,
+    contentClass: String,
+    contentScroll: {
+      type: Boolean,
+      default: !0
+    }
+  }
+}, F = {};
+var re = /* @__PURE__ */ a(ne, ee, te, !1, se, null, null, null);
+function se(e) {
+  for (let t in F)
+    this[t] = F[t];
+}
+var h = /* @__PURE__ */ function() {
+  return re.exports;
+}();
+h.install = function(e) {
+  e.component(h.name, h);
+};
+var ie = function() {
+  var e = this, t = e.$createElement;
+  return e._self._c, e._m(0);
+}, oe = [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... ")])]);
+}];
+const le = {
+  name: "NotImplement"
+}, B = {};
+var ae = /* @__PURE__ */ a(le, ie, oe, !1, ue, "f91d5e80", null, null);
+function ue(e) {
+  for (let t in B)
+    this[t] = B[t];
+}
+var p = /* @__PURE__ */ function() {
+  return ae.exports;
+}();
+p.install = function(e) {
+  e.component(p.name, p);
+};
+function fe(e, t) {
+  for (let n = 0; n < t.length; n++)
+    if (e === t[n])
+      return !0;
+  return !1;
+}
+const O = 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);
+  };
+}(), R = 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 ce = 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()]);
+}, _e = [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`
+    });
+  });
+}];
+const he = {
+  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"
+      ];
+    }
+  }
+}, b = {};
+var pe = /* @__PURE__ */ a(he, ce, _e, !1, ve, null, null, null);
+function ve(e) {
+  for (let t in b)
+    this[t] = b[t];
+}
+var de = /* @__PURE__ */ function() {
+  return pe.exports;
+}(), me = 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)])]);
+}, xe = [];
+const $e = {
+  name: "SplitPane",
+  components: {
+    Trigger: de
+  },
+  props: {
+    value: {
+      type: [Number, String],
+      default: 0.5
+    },
+    mode: {
+      validator(e) {
+        return fe(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, R(window, "mousemove", this.handleMove), R(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, O(window, "mousemove", this.handleMove), O(window, "mouseup", this.handleUp), this.$emit("on-move-start");
+    }
+  }
+}, I = {};
+var ge = /* @__PURE__ */ a($e, me, xe, !1, Ce, null, null, null);
+function Ce(e) {
+  for (let t in I)
+    this[t] = I[t];
+}
+var v = /* @__PURE__ */ function() {
+  return ge.exports;
+}();
+v.install = function(e) {
+  e.component(v.name, v);
+};
+var $ = {
+  name: "JSXComponent",
+  props: {
+    msg: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    return arguments[0]("div", [this.msg]);
+  }
+};
+/*!
+ * @web-utils/component
+ * (c) 2022-2022 Simple
+ * Released under the MIT License.
+ */
+const g = (e, t) => L(e) || J(e) ? [t, e] : Y(e) ? [t, ...e] : [t], ye = {
+  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 = g(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, ze;
+const E = {};
+var we = /* @__PURE__ */ a(ye, Se, ze, !1, Me, null, null, null);
+function Me(e) {
+  for (let t in E)
+    this[t] = E[t];
+}
+var d = /* @__PURE__ */ function() {
+  return we.exports;
+}();
+const Fe = {
+  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 = g(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 Be, Oe;
+const T = {};
+var Re = /* @__PURE__ */ a(Fe, Be, Oe, !1, be, null, null, null);
+function be(e) {
+  for (let t in T)
+    this[t] = T[t];
+}
+var m = /* @__PURE__ */ function() {
+  return Re.exports;
+}();
+const Ie = {
+  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 = g(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 Ee, Te;
+const P = {};
+var Pe = /* @__PURE__ */ a(Ie, Ee, Te, !1, Ne, null, null, null);
+function Ne(e) {
+  for (let t in P)
+    this[t] = P[t];
+}
+var x = /* @__PURE__ */ function() {
+  return Pe.exports;
+}();
+d.install = function(e) {
+  e.component(d.name, d);
+};
+m.install = function(e) {
+  e.component(m.name, m);
+};
+x.install = function(e) {
+  e.component(x.name, x);
+};
+function N(e) {
+  e.use(_), e.use(h), e.use(p), e.use(v), e.use(d), e.use(m), e.use(x), e.component($.name, $);
+}
+export { _ as EmptyView, d as FlexColumn, m as FlexItem, x as FlexRow, h as FlexScroller, $ as JSXComponent, p as NotImplement, v as SplitPane, N as default, N as install, q as version };

package/package.json

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