vxe-pc-ui 0.2.0 → 0.4.0

package/lib/list/src/list.js

@@ -0,0 +1,397 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _globalStore = _interopRequireDefault(require("../../ui/src/globalStore"));
+var _size = require("../../hooks/size");
+var _resize = require("../../ui/src/resize");
+var _dom = require("../../ui/src/dom");
+var _event = require("../../ui/src/event");
+var _loading = _interopRequireDefault(require("../../loading/src/loading"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeList',
+  props: {
+    data: Array,
+    height: [Number, String],
+    maxHeight: [Number, String],
+    loading: Boolean,
+    className: [String, Function],
+    size: {
+      type: String,
+      default: () => _globalStore.default.list.size || _globalStore.default.size
+    },
+    autoResize: {
+      type: Boolean,
+      default: () => _globalStore.default.list.autoResize
+    },
+    syncResize: [Boolean, String, Number],
+    scrollY: Object
+  },
+  emits: ['scroll'],
+  setup(props, context) {
+    const {
+      slots,
+      emit
+    } = context;
+    const xID = _xeUtils.default.uniqueId();
+    const computeSize = (0, _size.useSize)(props);
+    const reactData = (0, _vue.reactive)({
+      scrollYLoad: false,
+      bodyHeight: 0,
+      rowHeight: 0,
+      topSpaceHeight: 0,
+      items: []
+    });
+    const refElem = (0, _vue.ref)();
+    const refVirtualWrapper = (0, _vue.ref)();
+    const refVirtualBody = (0, _vue.ref)();
+    const internalData = {
+      fullData: [],
+      lastScrollLeft: 0,
+      lastScrollTop: 0,
+      scrollYStore: {
+        startIndex: 0,
+        endIndex: 0,
+        visibleSize: 0,
+        offsetSize: 0,
+        rowHeight: 0
+      }
+    };
+    const refMaps = {
+      refElem
+    };
+    const $xeList = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps
+    };
+    let listMethods = {};
+    const computeSYOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, _globalStore.default.list.scrollY, props.scrollY);
+    });
+    const computeStyles = (0, _vue.computed)(() => {
+      const {
+        height,
+        maxHeight
+      } = props;
+      const style = {};
+      if (height) {
+        style.height = `${isNaN(height) ? height : `${height}px`}`;
+      } else if (maxHeight) {
+        style.height = 'auto';
+        style.maxHeight = `${isNaN(maxHeight) ? maxHeight : `${maxHeight}px`}`;
+      }
+      return style;
+    });
+    const updateYSpace = () => {
+      const {
+        scrollYLoad
+      } = reactData;
+      const {
+        scrollYStore,
+        fullData
+      } = internalData;
+      reactData.bodyHeight = scrollYLoad ? fullData.length * scrollYStore.rowHeight : 0;
+      reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
+    };
+    const handleData = () => {
+      const {
+        scrollYLoad
+      } = reactData;
+      const {
+        fullData,
+        scrollYStore
+      } = internalData;
+      reactData.items = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
+      return (0, _vue.nextTick)();
+    };
+    const updateYData = () => {
+      handleData();
+      updateYSpace();
+    };
+    const computeScrollLoad = () => {
+      return (0, _vue.nextTick)().then(() => {
+        const {
+          scrollYLoad
+        } = reactData;
+        const {
+          scrollYStore
+        } = internalData;
+        const virtualBodyElem = refVirtualBody.value;
+        const sYOpts = computeSYOpts.value;
+        let rowHeight = 0;
+        let firstItemElem;
+        if (virtualBodyElem) {
+          if (sYOpts.sItem) {
+            firstItemElem = virtualBodyElem.querySelector(sYOpts.sItem);
+          }
+          if (!firstItemElem) {
+            firstItemElem = virtualBodyElem.children[0];
+          }
+        }
+        if (firstItemElem) {
+          rowHeight = firstItemElem.offsetHeight;
+        }
+        rowHeight = Math.max(20, rowHeight);
+        scrollYStore.rowHeight = rowHeight;
+        // 计算 Y 逻辑
+        if (scrollYLoad) {
+          const scrollBodyElem = refVirtualWrapper.value;
+          const visibleYSize = Math.max(8, Math.ceil(scrollBodyElem.clientHeight / rowHeight));
+          const offsetYSize = sYOpts.oSize ? _xeUtils.default.toNumber(sYOpts.oSize) : _dom.browse.edge ? 10 : 0;
+          scrollYStore.offsetSize = offsetYSize;
+          scrollYStore.visibleSize = visibleYSize;
+          scrollYStore.endIndex = Math.max(scrollYStore.startIndex, visibleYSize + offsetYSize, scrollYStore.endIndex);
+          updateYData();
+        } else {
+          updateYSpace();
+        }
+        reactData.rowHeight = rowHeight;
+      });
+    };
+    /**
+     * 清除滚动条
+     */
+    const clearScroll = () => {
+      const scrollBodyElem = refVirtualWrapper.value;
+      if (scrollBodyElem) {
+        scrollBodyElem.scrollTop = 0;
+      }
+      return (0, _vue.nextTick)();
+    };
+    /**
+     * 如果有滚动条，则滚动到对应的位置
+     * @param {Number} scrollLeft 左距离
+     * @param {Number} scrollTop 上距离
+     */
+    const scrollTo = (scrollLeft, scrollTop) => {
+      const scrollBodyElem = refVirtualWrapper.value;
+      if (_xeUtils.default.isNumber(scrollLeft)) {
+        scrollBodyElem.scrollLeft = scrollLeft;
+      }
+      if (_xeUtils.default.isNumber(scrollTop)) {
+        scrollBodyElem.scrollTop = scrollTop;
+      }
+      if (reactData.scrollYLoad) {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            (0, _vue.nextTick)(() => {
+              resolve();
+            });
+          }, 50);
+        });
+      }
+      return (0, _vue.nextTick)();
+    };
+    /**
+     * 刷新滚动条
+     */
+    const refreshScroll = () => {
+      const {
+        lastScrollLeft,
+        lastScrollTop
+      } = internalData;
+      return clearScroll().then(() => {
+        if (lastScrollLeft || lastScrollTop) {
+          internalData.lastScrollLeft = 0;
+          internalData.lastScrollTop = 0;
+          return scrollTo(lastScrollLeft, lastScrollTop);
+        }
+      });
+    };
+    /**
+     * 重新计算列表
+     */
+    const recalculate = () => {
+      const el = refElem.value;
+      if (el.clientWidth && el.clientHeight) {
+        return computeScrollLoad();
+      }
+      return Promise.resolve();
+    };
+    const loadYData = evnt => {
+      const {
+        scrollYStore
+      } = internalData;
+      const {
+        startIndex,
+        endIndex,
+        visibleSize,
+        offsetSize,
+        rowHeight
+      } = scrollYStore;
+      const scrollBodyElem = evnt.target;
+      const scrollTop = scrollBodyElem.scrollTop;
+      const toVisibleIndex = Math.floor(scrollTop / rowHeight);
+      const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
+      const offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
+      if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
+        if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
+          scrollYStore.startIndex = offsetStartIndex;
+          scrollYStore.endIndex = offsetEndIndex;
+          updateYData();
+        }
+      }
+    };
+    const scrollEvent = evnt => {
+      const scrollBodyElem = evnt.target;
+      const scrollTop = scrollBodyElem.scrollTop;
+      const scrollLeft = scrollBodyElem.scrollLeft;
+      const isX = scrollLeft !== internalData.lastScrollLeft;
+      const isY = scrollTop !== internalData.lastScrollTop;
+      internalData.lastScrollTop = scrollTop;
+      internalData.lastScrollLeft = scrollLeft;
+      if (reactData.scrollYLoad) {
+        loadYData(evnt);
+      }
+      listMethods.dispatchEvent('scroll', {
+        scrollLeft,
+        scrollTop,
+        isX,
+        isY
+      }, evnt);
+    };
+    listMethods = {
+      dispatchEvent(type, params, evnt) {
+        emit(type, Object.assign({
+          $list: $xeList,
+          $event: evnt
+        }, params));
+      },
+      /**
+       * 加载数据
+       * @param {Array} datas 数据
+       */
+      loadData(datas) {
+        const {
+          scrollYStore
+        } = internalData;
+        const sYOpts = computeSYOpts.value;
+        const fullData = datas || [];
+        Object.assign(scrollYStore, {
+          startIndex: 0,
+          endIndex: 1,
+          visibleSize: 0
+        });
+        internalData.fullData = fullData;
+        // 如果gt为0，则总是启用
+        reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length);
+        handleData();
+        return computeScrollLoad().then(() => {
+          refreshScroll();
+        });
+      },
+      /**
+       * 重新加载数据
+       * @param {Array} datas 数据
+       */
+      reloadData(datas) {
+        clearScroll();
+        return listMethods.loadData(datas);
+      },
+      recalculate,
+      scrollTo,
+      refreshScroll,
+      clearScroll
+    };
+    Object.assign($xeList, listMethods);
+    const dataFlag = (0, _vue.ref)(0);
+    (0, _vue.watch)(() => props.data ? props.data.length : -1, () => {
+      dataFlag.value++;
+    });
+    (0, _vue.watch)(() => props.data, () => {
+      dataFlag.value++;
+    });
+    (0, _vue.watch)(dataFlag, () => {
+      listMethods.loadData(props.data || []);
+    });
+    (0, _vue.watch)(() => props.syncResize, value => {
+      if (value) {
+        recalculate();
+        (0, _vue.nextTick)(() => setTimeout(() => recalculate()));
+      }
+    });
+    (0, _vue.onActivated)(() => {
+      recalculate().then(() => refreshScroll());
+    });
+    let resizeObserver;
+    (0, _vue.nextTick)(() => {
+      _event.GlobalEvent.on($xeList, 'resize', () => {
+        recalculate();
+      });
+      if (props.autoResize) {
+        const el = refElem.value;
+        resizeObserver = (0, _resize.createResizeEvent)(() => recalculate());
+        resizeObserver.observe(el);
+      }
+      listMethods.loadData(props.data || []);
+    });
+    (0, _vue.onUnmounted)(() => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      _event.GlobalEvent.off($xeList, 'resize');
+    });
+    const renderVN = () => {
+      const {
+        className,
+        loading
+      } = props;
+      const {
+        bodyHeight,
+        topSpaceHeight,
+        items
+      } = reactData;
+      const vSize = computeSize.value;
+      const styles = computeStyles.value;
+      return (0, _vue.h)('div', {
+        ref: refElem,
+        class: ['vxe-list', className ? _xeUtils.default.isFunction(className) ? className({
+          $list: $xeList
+        }) : className : '', {
+          [`size--${vSize}`]: vSize,
+          'is--loading': loading
+        }]
+      }, [(0, _vue.h)('div', {
+        ref: refVirtualWrapper,
+        class: 'vxe-list--virtual-wrapper',
+        style: styles,
+        onScroll: scrollEvent
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-list--y-space',
+        style: {
+          height: bodyHeight ? `${bodyHeight}px` : ''
+        }
+      }), (0, _vue.h)('div', {
+        ref: refVirtualBody,
+        class: 'vxe-list--body',
+        style: {
+          marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
+        }
+      }, slots.default ? slots.default({
+        items,
+        $list: $xeList
+      }) : [])]),
+      /**
+       * 加载中
+       */
+      (0, _vue.h)(_loading.default, {
+        class: 'vxe-list--loading',
+        modelValue: loading
+      })]);
+    };
+    $xeList.renderVN = renderVN;
+    return $xeList;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/list/src/list.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_globalStore=_interopRequireDefault(require("../../ui/src/globalStore")),_size=require("../../hooks/size"),_resize=require("../../ui/src/resize"),_dom=require("../../ui/src/dom"),_event=require("../../ui/src/event"),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeList",props:{data:Array,height:[Number,String],maxHeight:[Number,String],loading:Boolean,className:[String,Function],size:{type:String,default:()=>_globalStore.default.list.size||_globalStore.default.size},autoResize:{type:Boolean,default:()=>_globalStore.default.list.autoResize},syncResize:[Boolean,String,Number],scrollY:Object},emits:["scroll"],setup(s,e){const{slots:u,emit:r}=e;var t=_xeUtils.default.uniqueId();const n=(0,_size.useSize)(s),c=(0,_vue.reactive)({scrollYLoad:!1,bodyHeight:0,rowHeight:0,topSpaceHeight:0,items:[]}),d=(0,_vue.ref)(),v=(0,_vue.ref)(),f=(0,_vue.ref)(),h={fullData:[],lastScrollLeft:0,lastScrollTop:0,scrollYStore:{startIndex:0,endIndex:0,visibleSize:0,offsetSize:0,rowHeight:0}},l={refElem:d},g={xID:t,props:s,context:e,reactData:c,internalData:h,getRefMaps:()=>l};let o={};const i=(0,_vue.computed)(()=>Object.assign({},_globalStore.default.list.scrollY,s.scrollY)),_=(0,_vue.computed)(()=>{var{height:e,maxHeight:t}=s,l={};return e?l.height=""+(isNaN(e)?e:e+"px"):t&&(l.height="auto",l.maxHeight=""+(isNaN(t)?t:t+"px")),l}),x=()=>{var e=c["scrollYLoad"],{scrollYStore:t,fullData:l}=h;c.bodyHeight=e?l.length*t.rowHeight:0,c.topSpaceHeight=e?Math.max(t.startIndex*t.rowHeight,0):0},a=()=>{var e=c["scrollYLoad"],{fullData:t,scrollYStore:l}=h;return c.items=e?t.slice(l.startIndex,l.endIndex):t.slice(0),(0,_vue.nextTick)()},p=()=>{a(),x()},S=()=>(0,_vue.nextTick)().then(()=>{var e=c["scrollYLoad"],t=h["scrollYStore"],l=f.value,r=i.value;let a=0,o;(o=l?(o=r.sItem?l.querySelector(r.sItem):o)||l.children[0]:o)&&(a=o.offsetHeight),a=Math.max(20,a),t.rowHeight=a,(e?(l=v.value,e=Math.max(8,Math.ceil(l.clientHeight/a)),l=r.oSize?_xeUtils.default.toNumber(r.oSize):_dom.browse.edge?10:0,t.offsetSize=l,t.visibleSize=e,t.endIndex=Math.max(t.startIndex,e+l,t.endIndex),p):x)(),c.rowHeight=a}),m=()=>{var e=v.value;return e&&(e.scrollTop=0),(0,_vue.nextTick)()},b=(e,t)=>{var l=v.value;return _xeUtils.default.isNumber(e)&&(l.scrollLeft=e),_xeUtils.default.isNumber(t)&&(l.scrollTop=t),c.scrollYLoad?new Promise(e=>{setTimeout(()=>{(0,_vue.nextTick)(()=>{e()})},50)}):(0,_vue.nextTick)()},z=()=>{const{lastScrollLeft:e,lastScrollTop:t}=h;return m().then(()=>{if(e||t)return h.lastScrollLeft=0,h.lastScrollTop=0,b(e,t)})},T=()=>{var e=d.value;return e.clientWidth&&e.clientHeight?S():Promise.resolve()},H=e=>{var t=h["scrollYStore"],{startIndex:l,endIndex:r,visibleSize:a,offsetSize:o,rowHeight:i}=t,e=e.target.scrollTop,e=Math.floor(e/i),i=Math.max(0,e-1-o),o=e+a+o;!(e<=l||r-a-1<=e)||l===i&&r===o||(t.startIndex=i,t.endIndex=o,p())},I=e=>{var t=e.target,l=t.scrollTop,t=t.scrollLeft,r=t!==h.lastScrollLeft,a=l!==h.lastScrollTop;h.lastScrollTop=l,h.lastScrollLeft=t,c.scrollYLoad&&H(e),o.dispatchEvent("scroll",{scrollLeft:t,scrollTop:l,isX:r,isY:a},e)},Y=(o={dispatchEvent(e,t,l){r(e,Object.assign({$list:g,$event:l},t))},loadData(e){var t=h["scrollYStore"],l=i.value,e=e||[];return Object.assign(t,{startIndex:0,endIndex:1,visibleSize:0}),h.fullData=e,c.scrollYLoad=!!l.enabled&&-1<l.gt&&(0===l.gt||l.gt<=e.length),a(),S().then(()=>{z()})},reloadData(e){return m(),o.loadData(e)},recalculate:T,scrollTo:b,refreshScroll:z,clearScroll:m},Object.assign(g,o),(0,_vue.ref)(0));(0,_vue.watch)(()=>s.data?s.data.length:-1,()=>{Y.value++}),(0,_vue.watch)(()=>s.data,()=>{Y.value++}),(0,_vue.watch)(Y,()=>{o.loadData(s.data||[])}),(0,_vue.watch)(()=>s.syncResize,e=>{e&&(T(),(0,_vue.nextTick)(()=>setTimeout(()=>T())))}),(0,_vue.onActivated)(()=>{T().then(()=>z())});let D;(0,_vue.nextTick)(()=>{var e;_event.GlobalEvent.on(g,"resize",()=>{T()}),s.autoResize&&(e=d.value,(D=(0,_resize.createResizeEvent)(()=>T())).observe(e)),o.loadData(s.data||[])}),(0,_vue.onUnmounted)(()=>{D&&D.disconnect(),_event.GlobalEvent.off(g,"resize")});return g.renderVN=()=>{var{className:e,loading:t}=s,{bodyHeight:l,topSpaceHeight:r,items:a}=c,o=n.value,i=_.value;return(0,_vue.h)("div",{ref:d,class:["vxe-list",e?_xeUtils.default.isFunction(e)?e({$list:g}):e:"",{["size--"+o]:o,"is--loading":t}]},[(0,_vue.h)("div",{ref:v,class:"vxe-list--virtual-wrapper",style:i,onScroll:I},[(0,_vue.h)("div",{class:"vxe-list--y-space",style:{height:l?l+"px":""}}),(0,_vue.h)("div",{ref:f,class:"vxe-list--body",style:{marginTop:r?r+"px":""}},u.default?u.default({items:a,$list:g}):[])]),(0,_vue.h)(_loading.default,{class:"vxe-list--loading",modelValue:t})])},g},render(){return this.renderVN()}});

package/lib/list/style/index.js

@@ -0,0 +1 @@
+require('./style.css')

package/lib/list/style/style.css

@@ -0,0 +1,26 @@
+.vxe-list {
+  position: relative;
+  display: block;
+  padding: 0;
+  color: var(--vxe-ui-font-color);
+  direction: ltr;
+}
+.vxe-list .vxe-list--virtual-wrapper {
+  position: relative;
+  overflow: auto;
+}
+.vxe-list .vxe-list--y-space {
+  width: 0;
+  float: left;
+}
+.vxe-list .vxe-list--virtual-wrapper,
+.vxe-list .vxe-list--body {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+}
+
+.vxe-list--virtual-wrapper {
+  height: 100px;
+}

package/lib/list/style/style.min.css

@@ -0,0 +1 @@
+.vxe-list{position:relative;display:block;padding:0;color:var(--vxe-ui-font-color);direction:ltr}.vxe-list .vxe-list--virtual-wrapper{position:relative;overflow:auto}.vxe-list .vxe-list--y-space{width:0;float:left}.vxe-list .vxe-list--body,.vxe-list .vxe-list--virtual-wrapper{padding:0;margin:0;border:0;outline:0}.vxe-list--virtual-wrapper{height:100px}

package/lib/list-design/index.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ListDesign = void 0;
 var _listDesign = _interopRequireDefault(require("./src/list-design"));
+var _dynamics = require("../dynamics");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const VxeListDesign = Object.assign({}, _listDesign.default, {
   install(app) {
     app.component(_listDesign.default.name, _listDesign.default);
   }
 });
+_dynamics.dynamicApp.component(_listDesign.default.name, _listDesign.default);
 const ListDesign = exports.ListDesign = VxeListDesign;
 var _default = exports.default = VxeListDesign;

package/lib/list-design/index.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ListDesign=void 0;var _listDesign=_interopRequireDefault(require("./src/list-design"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeListDesign=Object.assign({},_listDesign.default,{install(e){e.component(_listDesign.default.name,_listDesign.default)}}),ListDesign=exports.ListDesign=VxeListDesign;var _default=exports.default=VxeListDesign;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ListDesign=void 0;var _listDesign=_interopRequireDefault(require("./src/list-design")),_dynamics=require("../dynamics");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeListDesign=Object.assign({},_listDesign.default,{install(e){e.component(_listDesign.default.name,_listDesign.default)}}),ListDesign=(_dynamics.dynamicApp.component(_listDesign.default.name,_listDesign.default),exports.ListDesign=VxeListDesign);var _default=exports.default=VxeListDesign;

package/lib/loading/index.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Loading = void 0;
 var _loading = _interopRequireDefault(require("./src/loading"));
+var _dynamics = require("../dynamics");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const VxeLoading = Object.assign({}, _loading.default, {
   install(app) {
     app.component(_loading.default.name, _loading.default);
   }
 });
+_dynamics.dynamicApp.component(_loading.default.name, _loading.default);
 const Loading = exports.Loading = VxeLoading;
 var _default = exports.default = VxeLoading;

package/lib/loading/index.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Loading=void 0;var _loading=_interopRequireDefault(require("./src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeLoading=Object.assign({},_loading.default,{install(e){e.component(_loading.default.name,_loading.default)}}),Loading=exports.Loading=VxeLoading;var _default=exports.default=VxeLoading;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Loading=void 0;var _loading=_interopRequireDefault(require("./src/loading")),_dynamics=require("../dynamics");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeLoading=Object.assign({},_loading.default,{install(e){e.component(_loading.default.name,_loading.default)}}),Loading=(_dynamics.dynamicApp.component(_loading.default.name,_loading.default),exports.Loading=VxeLoading);var _default=exports.default=VxeLoading;

package/lib/modal/index.js

@@ -63,11 +63,7 @@ function handleOpen(defOpts, content, title, options) {
       title
     };
   }
-  return openModal({
-    ...defOpts,
-    ...options,
-    ...opts
-  });
+  return openModal(Object.assign(Object.assign(Object.assign({}, defOpts), options), opts));
 }
 function openAlert(content, title, options) {
   return handleOpen({

package/lib/modal/index.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.modal=exports.default=exports.VxeModal=exports.Modal=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_modal=_interopRequireWildcard(require("./src/modal")),_core=_interopRequireDefault(require("../ui/src/core")),_dynamics=require("../dynamics");function _getRequireWildcardCache(e){var o,t;return"function"!=typeof WeakMap?null:(o=new WeakMap,t=new WeakMap,(_getRequireWildcardCache=function(e){return e?t:o})(e))}function _interopRequireWildcard(e,o){if(!o&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};o=_getRequireWildcardCache(o);if(o&&o.has(e))return o.get(e);var t,l,a={__proto__:null},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=r?Object.getOwnPropertyDescriptor(e,t):null)&&(l.get||l.set)?Object.defineProperty(a,t,l):a[t]=e[t]);return a.default=e,o&&o.set(e,a),a}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function openModal(o){return(0,_dynamics.checkDynamic)(),new Promise(t=>{if(o&&o.id&&_modal.allActivedModals.some(e=>e.props.id===o.id))t("exist");else{const l=o.onHide,a=Object.assign(o,{key:_xeUtils.default.uniqueId(),modelValue:!0,onHide(e){var o=_dynamics.dynamicStore.modals;l&&l(e),_dynamics.dynamicStore.modals=o.filter(e=>e.key!==a.key),t(e.type)}});_dynamics.dynamicStore.modals.push(a)}})}function getModal(o){return _xeUtils.default.find(_modal.allActivedModals,e=>e.props.id===o)}function closeModal(e){e=e?[getModal(e)]:_modal.allActivedModals;const o=[];return e.forEach(e=>{e&&o.push(e.close())}),Promise.all(o)}function handleOpen(e,o,t,l){let a;return a=_xeUtils.default.isObject(o)?o:{content:_xeUtils.default.toValueString(o),title:t},openModal({...e,...l,...a})}function openAlert(e,o,t){return handleOpen({type:"alert",showFooter:!0},e,o,t)}function openConfirm(e,o,t){return handleOpen({type:"confirm",status:"question",showFooter:!0},e,o,t)}function openMessage(e,o){return handleOpen({type:"message",mask:!1,lockView:!1,showHeader:!1},e,"",o)}const ModalController={get:getModal,close:closeModal,open:openModal,alert:openAlert,confirm:openConfirm,message:openMessage},modal=exports.modal=ModalController,VxeModal=exports.VxeModal=Object.assign(_modal.default,{install:function(e){e.component(_modal.default.name,_modal.default),_core.default.modal=ModalController}}),Modal=(_dynamics.dynamicApp.component(_modal.default.name,_modal.default),exports.Modal=VxeModal);var _default=exports.default=VxeModal;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.modal=exports.default=exports.VxeModal=exports.Modal=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_modal=_interopRequireWildcard(require("./src/modal")),_core=_interopRequireDefault(require("../ui/src/core")),_dynamics=require("../dynamics");function _getRequireWildcardCache(e){var t,o;return"function"!=typeof WeakMap?null:(t=new WeakMap,o=new WeakMap,(_getRequireWildcardCache=function(e){return e?o:t})(e))}function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};t=_getRequireWildcardCache(t);if(t&&t.has(e))return t.get(e);var o,a,n={__proto__:null},l=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(o in e)"default"!==o&&{}.hasOwnProperty.call(e,o)&&((a=l?Object.getOwnPropertyDescriptor(e,o):null)&&(a.get||a.set)?Object.defineProperty(n,o,a):n[o]=e[o]);return n.default=e,t&&t.set(e,n),n}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function openModal(t){return(0,_dynamics.checkDynamic)(),new Promise(o=>{if(t&&t.id&&_modal.allActivedModals.some(e=>e.props.id===t.id))o("exist");else{const a=t.onHide,n=Object.assign(t,{key:_xeUtils.default.uniqueId(),modelValue:!0,onHide(e){var t=_dynamics.dynamicStore.modals;a&&a(e),_dynamics.dynamicStore.modals=t.filter(e=>e.key!==n.key),o(e.type)}});_dynamics.dynamicStore.modals.push(n)}})}function getModal(t){return _xeUtils.default.find(_modal.allActivedModals,e=>e.props.id===t)}function closeModal(e){e=e?[getModal(e)]:_modal.allActivedModals;const t=[];return e.forEach(e=>{e&&t.push(e.close())}),Promise.all(t)}function handleOpen(e,t,o,a){let n;return n=_xeUtils.default.isObject(t)?t:{content:_xeUtils.default.toValueString(t),title:o},openModal(Object.assign(Object.assign(Object.assign({},e),a),n))}function openAlert(e,t,o){return handleOpen({type:"alert",showFooter:!0},e,t,o)}function openConfirm(e,t,o){return handleOpen({type:"confirm",status:"question",showFooter:!0},e,t,o)}function openMessage(e,t){return handleOpen({type:"message",mask:!1,lockView:!1,showHeader:!1},e,"",t)}const ModalController={get:getModal,close:closeModal,open:openModal,alert:openAlert,confirm:openConfirm,message:openMessage},modal=exports.modal=ModalController,VxeModal=exports.VxeModal=Object.assign(_modal.default,{install:function(e){e.component(_modal.default.name,_modal.default),_core.default.modal=ModalController}}),Modal=(_dynamics.dynamicApp.component(_modal.default.name,_modal.default),exports.Modal=VxeModal);var _default=exports.default=VxeModal;

package/lib/modal/src/modal.js

@@ -865,13 +865,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
         if (showZoom && props.dblclickZoom && props.type === 'modal') {
           headerOns.onDblclick = toggleZoomEvent;
         }
-        headVNs.push((0, _vue.h)('div', {
+        headVNs.push((0, _vue.h)('div', Object.assign({
           class: ['vxe-modal--header', {
             'is--draggable': draggable,
             'is--ellipsis': !isMsg && props.showTitleOverflow
-          }],
-          ...headerOns
-        }, headerSlot ? !reactData.inited || props.destroyOnClose && !reactData.visible ? [] : (0, _vn.getSlotVNs)(headerSlot({
+          }]
+        }, headerOns), headerSlot ? !reactData.inited || props.destroyOnClose && !reactData.visible ? [] : (0, _vn.getSlotVNs)(headerSlot({
           $modal: $xemodal
         })) : renderTitles()));
       }

package/lib/modal/src/modal.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.msgQueue=exports.default=exports.allActivedModals=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_size=require("../../hooks/size"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_event=require("../../ui/src/event"),_globalStore=_interopRequireDefault(require("../../ui/src/globalStore")),_iconStore=_interopRequireDefault(require("../../ui/src/iconStore")),_button=_interopRequireDefault(require("../../button/src/button")),_index=_interopRequireDefault(require("../../loading/index")),_vn=require("../../ui/src/vn"),_i18n=require("../../ui/src/i18n");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const allActivedModals=exports.allActivedModals=[],msgQueue=exports.msgQueue=[];var _default=exports.default=(0,_vue.defineComponent)({name:"VxeModal",props:{modelValue:Boolean,id:String,type:{type:String,default:"modal"},loading:{type:Boolean,default:null},status:String,iconStatus:String,className:String,top:{type:[Number,String],default:()=>_globalStore.default.modal.top},position:[String,Object],title:String,duration:{type:[Number,String],default:()=>_globalStore.default.modal.duration},message:[Number,String],content:[Number,String],cancelButtonText:{type:String,default:()=>_globalStore.default.modal.cancelButtonText},confirmButtonText:{type:String,default:()=>_globalStore.default.modal.confirmButtonText},lockView:{type:Boolean,default:()=>_globalStore.default.modal.lockView},lockScroll:Boolean,mask:{type:Boolean,default:()=>_globalStore.default.modal.mask},maskClosable:{type:Boolean,default:()=>_globalStore.default.modal.maskClosable},escClosable:{type:Boolean,default:()=>_globalStore.default.modal.escClosable},resize:Boolean,showHeader:{type:Boolean,default:()=>_globalStore.default.modal.showHeader},showFooter:{type:Boolean,default:()=>_globalStore.default.modal.showFooter},showZoom:Boolean,showClose:{type:Boolean,default:()=>_globalStore.default.modal.showClose},dblclickZoom:{type:Boolean,default:()=>_globalStore.default.modal.dblclickZoom},width:[Number,String],height:[Number,String],minWidth:{type:[Number,String],default:()=>_globalStore.default.modal.minWidth},minHeight:{type:[Number,String],default:()=>_globalStore.default.modal.minHeight},zIndex:Number,marginSize:{type:[Number,String],default:()=>_globalStore.default.modal.marginSize},fullscreen:Boolean,draggable:{type:Boolean,default:()=>_globalStore.default.modal.draggable},remember:{type:Boolean,default:()=>_globalStore.default.modal.remember},destroyOnClose:{type:Boolean,default:()=>_globalStore.default.modal.destroyOnClose},showTitleOverflow:{type:Boolean,default:()=>_globalStore.default.modal.showTitleOverflow},transfer:{type:Boolean,default:()=>_globalStore.default.modal.transfer},storage:{type:Boolean,default:()=>_globalStore.default.modal.storage},storageKey:{type:String,default:()=>_globalStore.default.modal.storageKey},animat:{type:Boolean,default:()=>_globalStore.default.modal.animat},size:{type:String,default:()=>_globalStore.default.modal.size||_globalStore.default.size},beforeHideMethod:{type:Function,default:()=>_globalStore.default.modal.beforeHideMethod},slots:Object},emits:["update:modelValue","show","hide","before-hide","close","confirm","cancel","zoom"],setup(w,e){const{slots:f,emit:i}=e;var t=_xeUtils.default.uniqueId();const g=(0,_size.useSize)(w),N=(0,_vue.reactive)({inited:!1,visible:!1,contentVisible:!1,modalTop:0,modalZindex:0,zoomLocat:null,firstOpen:!0}),h=(0,_vue.ref)(),_=(0,_vue.ref)(),s=(0,_vue.ref)(),r=(0,_vue.ref)(),o={refElem:h},x={xID:t,props:w,context:e,reactData:N,getRefMaps:()=>o};let z={};const b=(0,_vue.computed)(()=>"message"===w.type),k=()=>{return _.value},n=()=>{var{width:e,height:t}=w,o=k();return o.style.width=""+(e?isNaN(e)?e:e+"px":""),o.style.height=""+(t?isNaN(t)?t:t+"px":""),(0,_vue.nextTick)()},u=()=>{var e=w["zIndex"],t=N["modalZindex"];e?N.modalZindex=e:t<(0,_utils.getLastZIndex)()&&(N.modalZindex=(0,_utils.nextZIndex)())},m=()=>(0,_vue.nextTick)().then(()=>{var e=w["position"],t=_xeUtils.default.toNumber(w.marginSize),o=k(),l=document.documentElement.clientWidth||document.body.clientWidth,a=document.documentElement.clientHeight||document.body.clientHeight,s="center"===e,{top:e,left:i}=_xeUtils.default.isString(e)?{top:e,left:e}:Object.assign({},e),r=s||"center"===e;let n="",u="";u=i&&!(s||"center"===i)?isNaN(i)?i:i+"px":Math.max(t,l/2-o.offsetWidth/2)+"px",n=e&&!r?isNaN(e)?e:e+"px":Math.max(t,a/2-o.offsetHeight/2)+"px",o.style.top=n,o.style.left=u}),c=()=>{(0,_vue.nextTick)(()=>{let o=0;msgQueue.forEach(e=>{var t=e.getBox();o+=_xeUtils.default.toNumber(e.props.top),e.reactData.modalTop=o,o+=t.clientHeight})})},d=()=>{-1<msgQueue.indexOf(x)&&_xeUtils.default.remove(msgQueue,e=>e===x),c()},p=e=>{const{remember:t,beforeHideMethod:o}=w;var l=N["visible"];const a=b.value,s={type:e};return l&&Promise.resolve(o?o(s):null).then(e=>{_xeUtils.default.isError(e)||(a&&d(),N.contentVisible=!1,t||(N.zoomLocat=null),_xeUtils.default.remove(allActivedModals,e=>e===x),z.dispatchEvent("before-hide",s),setTimeout(()=>{N.visible=!1,i("update:modelValue",!1),z.dispatchEvent("hide",s)},200))}).catch(e=>e),(0,_vue.nextTick)()},v=e=>{var t="close";z.dispatchEvent(t,{type:t},e),p(t)},l=e=>{var t="confirm";z.dispatchEvent(t,{type:t},e),p(t)},a=e=>{var t="cancel";z.dispatchEvent(t,{type:t},e),p(t)},y=e=>{var t=_globalStore.default.version,e=_xeUtils.default.toStringJSON(localStorage.getItem(e)||"");return e&&e._v===t?e:{_v:t}},T=()=>{var{id:e,remember:t,storage:o,storageKey:l}=w,a=N["zoomLocat"];e&&t&&o&&(t=k(),(o=y(l))[e]=[t.style.left,t.style.top,t.style.width,t.style.height].concat(a?[a.left,a.top,a.width,a.height]:[]).map(e=>e?_xeUtils.default.toNumber(e):"").join(","),localStorage.setItem(l,_xeUtils.default.toJSONString(o)))},S=()=>(0,_vue.nextTick)().then(()=>{var e,t,o,l;N.zoomLocat||(e=Math.max(0,_xeUtils.default.toNumber(w.marginSize)),t=k(),{visibleHeight:o,visibleWidth:l}=(0,_dom.getDomNode)(),N.zoomLocat={top:t.offsetTop,left:t.offsetLeft,width:t.offsetWidth+(t.style.width?0:1),height:t.offsetHeight+(t.style.height?0:1)},Object.assign(t.style,{top:e+"px",left:e+"px",width:l-2*e+"px",height:o-2*e+"px"}),T())}),O=()=>{const{duration:e,remember:d,showFooter:o}=w;var{inited:t,visible:l}=N,a=b.value;return t||(N.inited=!0),l||(d||n(),N.visible=!0,N.contentVisible=!1,u(),allActivedModals.push(x),setTimeout(()=>{N.contentVisible=!0,(0,_vue.nextTick)(()=>{o&&(e=s.value,t=r.value,e=e||t)&&e.focus();var e,t={type:""};i("update:modelValue",!0),z.dispatchEvent("show",t)})},10),a?(-1===msgQueue.indexOf(x)&&msgQueue.push(x),c(),-1!==e&&setTimeout(()=>p("close"),_xeUtils.default.toNumber(e))):(0,_vue.nextTick)(()=>{var e,t,o,l,a,s,i,r,n=w["fullscreen"],u=N["firstOpen"];d&&!u||m().then(()=>{setTimeout(()=>m(),20)}),u&&(N.firstOpen=!1,(()=>{var{id:e,remember:t,storage:o,storageKey:l}=w;return!!(e&&t&&o&&y(l)[e])})())?({id:u,remember:s,storage:i,storageKey:r}=w,u&&s&&i&&(s=y(r)[u])&&(i=k(),[r,u,s,e,t,o,l,a]=s.split(","),r&&(i.style.left=r+"px"),u&&(i.style.top=u+"px"),s&&(i.style.width=s+"px"),e&&(i.style.height=e+"px"),t)&&o&&(N.zoomLocat={left:t,top:o,width:l,height:a})):n&&(0,_vue.nextTick)(()=>S())})),(0,_vue.nextTick)()},B=e=>{var t=h.value;w.maskClosable&&e.target===t&&p("mask")},M=e=>{if((0,_event.hasEventKey)(e,_event.EVENT_KEYS.ESCAPE)){const t=_xeUtils.default.max(allActivedModals,e=>e.reactData.modalZindex);t&&setTimeout(()=>{t===x&&t.props.escClosable&&p("exit")},10)}},L=()=>!!N.zoomLocat,C=()=>(0,_vue.nextTick)().then(()=>{var e,t=N["zoomLocat"];t&&(e=k(),N.zoomLocat=null,Object.assign(e.style,{top:t.top+"px",left:t.left+"px",width:t.width+"px",height:t.height+"px"}),T())}),D=()=>(N.zoomLocat?C:S)().then(()=>L()),E=e=>{var t=N["zoomLocat"];const o={type:t?"revert":"max"};return D().then(()=>{z.dispatchEvent("zoom",o,e)})};const V=()=>{const t=N["modalZindex"];allActivedModals.some(e=>e.reactData.visible&&e.reactData.modalZindex>t)&&u()},U=e=>{const{remember:t,storage:o}=w;var l=N["zoomLocat"];const r=_xeUtils.default.toNumber(w.marginSize),n=k();if(!l&&0===e.button&&!(0,_dom.getEventTargetNode)(e,n,"trigger--btn").flag){e.preventDefault();const a=document.onmousemove,s=document.onmouseup,u=e.clientX-n.offsetLeft,d=e.clientY-n.offsetTop,{visibleHeight:m,visibleWidth:c}=(0,_dom.getDomNode)();document.onmousemove=e=>{e.preventDefault();var t=n.offsetWidth,o=n.offsetHeight,l=r,t=c-t-r-1,a=r,o=m-o-r-1;let s=e.clientX-u,i=e.clientY-d;(s=s>t?t:s)<l&&(s=l),(i=i>o?o:i)<a&&(i=a),n.style.left=s+"px",n.style.top=i+"px",n.className=n.className.replace(/\s?is--drag/,"")+" is--drag"},document.onmouseup=()=>{document.onmousemove=a,document.onmouseup=s,t&&o&&(0,_vue.nextTick)(()=>{T()}),setTimeout(()=>{n.className=n.className.replace(/\s?is--drag/,"")},50)}}},q=e=>{e.preventDefault();const{remember:s,storage:i}=w,{visibleHeight:r,visibleWidth:n}=(0,_dom.getDomNode)(),u=_xeUtils.default.toNumber(w.marginSize);const d=e.target.getAttribute("type"),m=_xeUtils.default.toNumber(w.minWidth),c=_xeUtils.default.toNumber(w.minHeight),p=n,v=r,f=k(),t=document.onmousemove,o=document.onmouseup,g=f.clientWidth,h=f.clientHeight,_=e.clientX,x=e.clientY,b=f.offsetTop,y=f.offsetLeft,S={type:"resize"};document.onmousemove=e=>{e.preventDefault();let t,o,l,a;switch(d){case"wl":t=_-e.clientX,l=t+g,y-t>u&&l>m&&(f.style.width=`${l<p?l:p}px`,f.style.left=y-t+"px");break;case"swst":t=_-e.clientX,o=x-e.clientY,l=t+g,a=o+h,y-t>u&&l>m&&(f.style.width=`${l<p?l:p}px`,f.style.left=y-t+"px"),b-o>u&&a>c&&(f.style.height=`${a<v?a:v}px`,f.style.top=b-o+"px");break;case"swlb":t=_-e.clientX,o=e.clientY-x,l=t+g,a=o+h,y-t>u&&l>m&&(f.style.width=`${l<p?l:p}px`,f.style.left=y-t+"px"),b+a+u<r&&a>c&&(f.style.height=`${a<v?a:v}px`);break;case"st":o=x-e.clientY,a=h+o,b-o>u&&a>c&&(f.style.height=`${a<v?a:v}px`,f.style.top=b-o+"px");break;case"wr":t=e.clientX-_,l=t+g,y+l+u<n&&l>m&&(f.style.width=`${l<p?l:p}px`);break;case"sest":t=e.clientX-_,o=x-e.clientY,l=t+g,a=o+h,y+l+u<n&&l>m&&(f.style.width=`${l<p?l:p}px`),b-o>u&&a>c&&(f.style.height=`${a<v?a:v}px`,f.style.top=b-o+"px");break;case"selb":t=e.clientX-_,o=e.clientY-x,l=t+g,a=o+h,y+l+u<n&&l>m&&(f.style.width=`${l<p?l:p}px`),b+a+u<r&&a>c&&(f.style.height=`${a<v?a:v}px`);break;case"sb":o=e.clientY-x,a=o+h,b+a+u<r&&a>c&&(f.style.height=`${a<v?a:v}px`)}f.className=f.className.replace(/\s?is--drag/,"")+" is--drag",s&&i&&T(),z.dispatchEvent("zoom",S,e)},document.onmouseup=()=>{N.zoomLocat=null,document.onmousemove=t,document.onmouseup=o,setTimeout(()=>{f.className=f.className.replace(/\s?is--drag/,"")},50)}},H=()=>{var{slots:e={},showClose:t,showZoom:o,title:l}=w,a=N["zoomLocat"],s=f.title||e.title,e=f.corner||e.corner,s=[(0,_vue.h)("div",{class:"vxe-modal--header-title"},s?(0,_vn.getSlotVNs)(s({$modal:x})):l?(0,_utils.getFuncText)(l):(0,_i18n.getI18n)("vxe.alert.title"))],l=[];return e&&l.push((0,_vue.h)("span",{class:"vxe-modal--corner-wrapper"},(0,_vn.getSlotVNs)(e({$modal:x})))),o&&l.push((0,_vue.h)("i",{class:["vxe-modal--zoom-btn","trigger--btn",a?_iconStore.default.MODAL_ZOOM_OUT:_iconStore.default.MODAL_ZOOM_IN],title:(0,_i18n.getI18n)("vxe.modal.zoom"+(a?"Out":"In")),onClick:E})),t&&l.push((0,_vue.h)("i",{class:["vxe-modal--close-btn","trigger--btn",_iconStore.default.MODAL_CLOSE],title:(0,_i18n.getI18n)("vxe.modal.close"),onClick:v})),s.push((0,_vue.h)("div",{class:"vxe-modal--header-right"},l)),s},$=()=>{var e=w["type"],t=[];return"confirm"===e&&t.push((0,_vue.h)(_button.default,{ref:r,content:w.cancelButtonText||(0,_i18n.getI18n)("vxe.button.cancel"),onClick:a})),t.push((0,_vue.h)(_button.default,{ref:s,status:"primary",content:w.confirmButtonText||(0,_i18n.getI18n)("vxe.button.confirm"),onClick:l})),t};z={dispatchEvent(e,t,o){i(e,Object.assign({$modal:x,$event:o},t))},open:O,close(){return p("close")},getBox:k,getPosition:()=>{if(!b.value){var e=k();if(e)return{top:e.offsetTop,left:e.offsetLeft}}return null},setPosition:(e,t)=>{var o;return b.value||(o=k(),_xeUtils.default.isNumber(e)&&(o.style.top=e+"px"),_xeUtils.default.isNumber(t)&&(o.style.left=t+"px")),(0,_vue.nextTick)()},isMaximized:L,zoom:D,maximize:S,revert:C},Object.assign(x,z),(0,_vue.watch)(()=>w.width,n),(0,_vue.watch)(()=>w.height,n),(0,_vue.watch)(()=>w.modelValue,e=>{e?O():p("model")}),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{w.storage&&!w.id&&(0,_log.errLog)("vxe.error.reqProp",["modal.id"]),w.modelValue&&O(),n()}),w.escClosable&&_event.GlobalEvent.on(x,"keydown",M)}),(0,_vue.onUnmounted)(()=>{_event.GlobalEvent.off(x,"keydown"),d()});return x.renderVN=()=>{var{className:e,type:t,animat:o,loading:l,status:a,lockScroll:s,lockView:i,mask:r,resize:n}=w,{inited:u,zoomLocat:d,modalTop:m,contentVisible:c,visible:p}=N,v=g.value;return(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!w.transfer||!u},[(0,_vue.h)("div",{ref:h,class:["vxe-modal--wrapper","type--"+t,e||"",{["size--"+v]:v,["status--"+a]:a,"is--animat":o,"lock--scroll":s,"lock--view":i,"is--resize":n,"is--mask":r,"is--maximize":d,"is--visible":c,"is--active":p,"is--loading":l}],style:{zIndex:N.modalZindex,top:m?m+"px":null},onClick:B},[(0,_vue.h)("div",{ref:_,class:"vxe-modal--box",onMousedown:V},(()=>{var e,{slots:t={},showZoom:o,draggable:l}=w,a=b.value,t=f.header||t.header,s=[];return w.showHeader&&(e={},l&&(e.onMousedown=U),o&&w.dblclickZoom&&"modal"===w.type&&(e.onDblclick=E),s.push((0,_vue.h)("div",{class:["vxe-modal--header",{"is--draggable":l,"is--ellipsis":!a&&w.showTitleOverflow}],...e},t?!N.inited||w.destroyOnClose&&!N.visible?[]:(0,_vn.getSlotVNs)(t({$modal:x})):H()))),s})().concat((()=>{var{slots:e={},status:t,message:o}=w,o=w.content||o,l=b.value,e=f.default||e.default,a=[];return t&&a.push((0,_vue.h)("div",{class:"vxe-modal--status-wrapper"},[(0,_vue.h)("i",{class:["vxe-modal--status-icon",w.iconStatus||_iconStore.default[("MODAL_"+t).toLocaleUpperCase()]]})])),a.push((0,_vue.h)("div",{class:"vxe-modal--content"},e?!N.inited||w.destroyOnClose&&!N.visible?[]:(0,_vn.getSlotVNs)(e({$modal:x})):(0,_utils.getFuncText)(o))),l||a.push((0,_vue.h)(_index.default,{class:"vxe-modal--loading",modelValue:w.loading})),[(0,_vue.h)("div",{class:"vxe-modal--body"},a)]})(),(()=>{var{slots:e={}}=w,t=b.value,e=f.footer||e.footer,o=[];return w.showFooter&&o.push((0,_vue.h)("div",{class:"vxe-modal--footer"},e?!N.inited||w.destroyOnClose&&!N.visible?[]:(0,_vn.getSlotVNs)(e({$modal:x})):$())),!t&&w.resize&&o.push((0,_vue.h)("span",{class:"vxe-modal--resize"},["wl","wr","swst","sest","st","swlb","selb","sb"].map(e=>(0,_vue.h)("span",{class:e+"-resize",type:e,onMousedown:q})))),o})()))])])},x},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.msgQueue=exports.default=exports.allActivedModals=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_size=require("../../hooks/size"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_event=require("../../ui/src/event"),_globalStore=_interopRequireDefault(require("../../ui/src/globalStore")),_iconStore=_interopRequireDefault(require("../../ui/src/iconStore")),_button=_interopRequireDefault(require("../../button/src/button")),_index=_interopRequireDefault(require("../../loading/index")),_vn=require("../../ui/src/vn"),_i18n=require("../../ui/src/i18n");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const allActivedModals=exports.allActivedModals=[],msgQueue=exports.msgQueue=[];var _default=exports.default=(0,_vue.defineComponent)({name:"VxeModal",props:{modelValue:Boolean,id:String,type:{type:String,default:"modal"},loading:{type:Boolean,default:null},status:String,iconStatus:String,className:String,top:{type:[Number,String],default:()=>_globalStore.default.modal.top},position:[String,Object],title:String,duration:{type:[Number,String],default:()=>_globalStore.default.modal.duration},message:[Number,String],content:[Number,String],cancelButtonText:{type:String,default:()=>_globalStore.default.modal.cancelButtonText},confirmButtonText:{type:String,default:()=>_globalStore.default.modal.confirmButtonText},lockView:{type:Boolean,default:()=>_globalStore.default.modal.lockView},lockScroll:Boolean,mask:{type:Boolean,default:()=>_globalStore.default.modal.mask},maskClosable:{type:Boolean,default:()=>_globalStore.default.modal.maskClosable},escClosable:{type:Boolean,default:()=>_globalStore.default.modal.escClosable},resize:Boolean,showHeader:{type:Boolean,default:()=>_globalStore.default.modal.showHeader},showFooter:{type:Boolean,default:()=>_globalStore.default.modal.showFooter},showZoom:Boolean,showClose:{type:Boolean,default:()=>_globalStore.default.modal.showClose},dblclickZoom:{type:Boolean,default:()=>_globalStore.default.modal.dblclickZoom},width:[Number,String],height:[Number,String],minWidth:{type:[Number,String],default:()=>_globalStore.default.modal.minWidth},minHeight:{type:[Number,String],default:()=>_globalStore.default.modal.minHeight},zIndex:Number,marginSize:{type:[Number,String],default:()=>_globalStore.default.modal.marginSize},fullscreen:Boolean,draggable:{type:Boolean,default:()=>_globalStore.default.modal.draggable},remember:{type:Boolean,default:()=>_globalStore.default.modal.remember},destroyOnClose:{type:Boolean,default:()=>_globalStore.default.modal.destroyOnClose},showTitleOverflow:{type:Boolean,default:()=>_globalStore.default.modal.showTitleOverflow},transfer:{type:Boolean,default:()=>_globalStore.default.modal.transfer},storage:{type:Boolean,default:()=>_globalStore.default.modal.storage},storageKey:{type:String,default:()=>_globalStore.default.modal.storageKey},animat:{type:Boolean,default:()=>_globalStore.default.modal.animat},size:{type:String,default:()=>_globalStore.default.modal.size||_globalStore.default.size},beforeHideMethod:{type:Function,default:()=>_globalStore.default.modal.beforeHideMethod},slots:Object},emits:["update:modelValue","show","hide","before-hide","close","confirm","cancel","zoom"],setup(w,e){const{slots:f,emit:i}=e;var t=_xeUtils.default.uniqueId();const g=(0,_size.useSize)(w),N=(0,_vue.reactive)({inited:!1,visible:!1,contentVisible:!1,modalTop:0,modalZindex:0,zoomLocat:null,firstOpen:!0}),h=(0,_vue.ref)(),_=(0,_vue.ref)(),s=(0,_vue.ref)(),r=(0,_vue.ref)(),o={refElem:h},b={xID:t,props:w,context:e,reactData:N,getRefMaps:()=>o};let z={};const x=(0,_vue.computed)(()=>"message"===w.type),k=()=>{return _.value},n=()=>{var{width:e,height:t}=w,o=k();return o.style.width=""+(e?isNaN(e)?e:e+"px":""),o.style.height=""+(t?isNaN(t)?t:t+"px":""),(0,_vue.nextTick)()},u=()=>{var e=w["zIndex"],t=N["modalZindex"];e?N.modalZindex=e:t<(0,_utils.getLastZIndex)()&&(N.modalZindex=(0,_utils.nextZIndex)())},c=()=>(0,_vue.nextTick)().then(()=>{var e=w["position"],t=_xeUtils.default.toNumber(w.marginSize),o=k(),l=document.documentElement.clientWidth||document.body.clientWidth,a=document.documentElement.clientHeight||document.body.clientHeight,s="center"===e,{top:e,left:i}=_xeUtils.default.isString(e)?{top:e,left:e}:Object.assign({},e),r=s||"center"===e;let n="",u="";u=i&&!(s||"center"===i)?isNaN(i)?i:i+"px":Math.max(t,l/2-o.offsetWidth/2)+"px",n=e&&!r?isNaN(e)?e:e+"px":Math.max(t,a/2-o.offsetHeight/2)+"px",o.style.top=n,o.style.left=u}),m=()=>{(0,_vue.nextTick)(()=>{let o=0;msgQueue.forEach(e=>{var t=e.getBox();o+=_xeUtils.default.toNumber(e.props.top),e.reactData.modalTop=o,o+=t.clientHeight})})},d=()=>{-1<msgQueue.indexOf(b)&&_xeUtils.default.remove(msgQueue,e=>e===b),m()},p=e=>{const{remember:t,beforeHideMethod:o}=w;var l=N["visible"];const a=x.value,s={type:e};return l&&Promise.resolve(o?o(s):null).then(e=>{_xeUtils.default.isError(e)||(a&&d(),N.contentVisible=!1,t||(N.zoomLocat=null),_xeUtils.default.remove(allActivedModals,e=>e===b),z.dispatchEvent("before-hide",s),setTimeout(()=>{N.visible=!1,i("update:modelValue",!1),z.dispatchEvent("hide",s)},200))}).catch(e=>e),(0,_vue.nextTick)()},v=e=>{var t="close";z.dispatchEvent(t,{type:t},e),p(t)},l=e=>{var t="confirm";z.dispatchEvent(t,{type:t},e),p(t)},a=e=>{var t="cancel";z.dispatchEvent(t,{type:t},e),p(t)},y=e=>{var t=_globalStore.default.version,e=_xeUtils.default.toStringJSON(localStorage.getItem(e)||"");return e&&e._v===t?e:{_v:t}},T=()=>{var{id:e,remember:t,storage:o,storageKey:l}=w,a=N["zoomLocat"];e&&t&&o&&(t=k(),(o=y(l))[e]=[t.style.left,t.style.top,t.style.width,t.style.height].concat(a?[a.left,a.top,a.width,a.height]:[]).map(e=>e?_xeUtils.default.toNumber(e):"").join(","),localStorage.setItem(l,_xeUtils.default.toJSONString(o)))},S=()=>(0,_vue.nextTick)().then(()=>{var e,t,o,l;N.zoomLocat||(e=Math.max(0,_xeUtils.default.toNumber(w.marginSize)),t=k(),{visibleHeight:o,visibleWidth:l}=(0,_dom.getDomNode)(),N.zoomLocat={top:t.offsetTop,left:t.offsetLeft,width:t.offsetWidth+(t.style.width?0:1),height:t.offsetHeight+(t.style.height?0:1)},Object.assign(t.style,{top:e+"px",left:e+"px",width:l-2*e+"px",height:o-2*e+"px"}),T())}),O=()=>{const{duration:e,remember:d,showFooter:o}=w;var{inited:t,visible:l}=N,a=x.value;return t||(N.inited=!0),l||(d||n(),N.visible=!0,N.contentVisible=!1,u(),allActivedModals.push(b),setTimeout(()=>{N.contentVisible=!0,(0,_vue.nextTick)(()=>{o&&(e=s.value,t=r.value,e=e||t)&&e.focus();var e,t={type:""};i("update:modelValue",!0),z.dispatchEvent("show",t)})},10),a?(-1===msgQueue.indexOf(b)&&msgQueue.push(b),m(),-1!==e&&setTimeout(()=>p("close"),_xeUtils.default.toNumber(e))):(0,_vue.nextTick)(()=>{var e,t,o,l,a,s,i,r,n=w["fullscreen"],u=N["firstOpen"];d&&!u||c().then(()=>{setTimeout(()=>c(),20)}),u&&(N.firstOpen=!1,(()=>{var{id:e,remember:t,storage:o,storageKey:l}=w;return!!(e&&t&&o&&y(l)[e])})())?({id:u,remember:s,storage:i,storageKey:r}=w,u&&s&&i&&(s=y(r)[u])&&(i=k(),[r,u,s,e,t,o,l,a]=s.split(","),r&&(i.style.left=r+"px"),u&&(i.style.top=u+"px"),s&&(i.style.width=s+"px"),e&&(i.style.height=e+"px"),t)&&o&&(N.zoomLocat={left:t,top:o,width:l,height:a})):n&&(0,_vue.nextTick)(()=>S())})),(0,_vue.nextTick)()},B=e=>{var t=h.value;w.maskClosable&&e.target===t&&p("mask")},M=e=>{if((0,_event.hasEventKey)(e,_event.EVENT_KEYS.ESCAPE)){const t=_xeUtils.default.max(allActivedModals,e=>e.reactData.modalZindex);t&&setTimeout(()=>{t===b&&t.props.escClosable&&p("exit")},10)}},L=()=>!!N.zoomLocat,C=()=>(0,_vue.nextTick)().then(()=>{var e,t=N["zoomLocat"];t&&(e=k(),N.zoomLocat=null,Object.assign(e.style,{top:t.top+"px",left:t.left+"px",width:t.width+"px",height:t.height+"px"}),T())}),D=()=>(N.zoomLocat?C:S)().then(()=>L()),E=e=>{var t=N["zoomLocat"];const o={type:t?"revert":"max"};return D().then(()=>{z.dispatchEvent("zoom",o,e)})};const V=()=>{const t=N["modalZindex"];allActivedModals.some(e=>e.reactData.visible&&e.reactData.modalZindex>t)&&u()},U=e=>{const{remember:t,storage:o}=w;var l=N["zoomLocat"];const r=_xeUtils.default.toNumber(w.marginSize),n=k();if(!l&&0===e.button&&!(0,_dom.getEventTargetNode)(e,n,"trigger--btn").flag){e.preventDefault();const a=document.onmousemove,s=document.onmouseup,u=e.clientX-n.offsetLeft,d=e.clientY-n.offsetTop,{visibleHeight:c,visibleWidth:m}=(0,_dom.getDomNode)();document.onmousemove=e=>{e.preventDefault();var t=n.offsetWidth,o=n.offsetHeight,l=r,t=m-t-r-1,a=r,o=c-o-r-1;let s=e.clientX-u,i=e.clientY-d;(s=s>t?t:s)<l&&(s=l),(i=i>o?o:i)<a&&(i=a),n.style.left=s+"px",n.style.top=i+"px",n.className=n.className.replace(/\s?is--drag/,"")+" is--drag"},document.onmouseup=()=>{document.onmousemove=a,document.onmouseup=s,t&&o&&(0,_vue.nextTick)(()=>{T()}),setTimeout(()=>{n.className=n.className.replace(/\s?is--drag/,"")},50)}}},q=e=>{e.preventDefault();const{remember:s,storage:i}=w,{visibleHeight:r,visibleWidth:n}=(0,_dom.getDomNode)(),u=_xeUtils.default.toNumber(w.marginSize);const d=e.target.getAttribute("type"),c=_xeUtils.default.toNumber(w.minWidth),m=_xeUtils.default.toNumber(w.minHeight),p=n,v=r,f=k(),t=document.onmousemove,o=document.onmouseup,g=f.clientWidth,h=f.clientHeight,_=e.clientX,b=e.clientY,x=f.offsetTop,y=f.offsetLeft,S={type:"resize"};document.onmousemove=e=>{e.preventDefault();let t,o,l,a;switch(d){case"wl":t=_-e.clientX,l=t+g,y-t>u&&l>c&&(f.style.width=`${l<p?l:p}px`,f.style.left=y-t+"px");break;case"swst":t=_-e.clientX,o=b-e.clientY,l=t+g,a=o+h,y-t>u&&l>c&&(f.style.width=`${l<p?l:p}px`,f.style.left=y-t+"px"),x-o>u&&a>m&&(f.style.height=`${a<v?a:v}px`,f.style.top=x-o+"px");break;case"swlb":t=_-e.clientX,o=e.clientY-b,l=t+g,a=o+h,y-t>u&&l>c&&(f.style.width=`${l<p?l:p}px`,f.style.left=y-t+"px"),x+a+u<r&&a>m&&(f.style.height=`${a<v?a:v}px`);break;case"st":o=b-e.clientY,a=h+o,x-o>u&&a>m&&(f.style.height=`${a<v?a:v}px`,f.style.top=x-o+"px");break;case"wr":t=e.clientX-_,l=t+g,y+l+u<n&&l>c&&(f.style.width=`${l<p?l:p}px`);break;case"sest":t=e.clientX-_,o=b-e.clientY,l=t+g,a=o+h,y+l+u<n&&l>c&&(f.style.width=`${l<p?l:p}px`),x-o>u&&a>m&&(f.style.height=`${a<v?a:v}px`,f.style.top=x-o+"px");break;case"selb":t=e.clientX-_,o=e.clientY-b,l=t+g,a=o+h,y+l+u<n&&l>c&&(f.style.width=`${l<p?l:p}px`),x+a+u<r&&a>m&&(f.style.height=`${a<v?a:v}px`);break;case"sb":o=e.clientY-b,a=o+h,x+a+u<r&&a>m&&(f.style.height=`${a<v?a:v}px`)}f.className=f.className.replace(/\s?is--drag/,"")+" is--drag",s&&i&&T(),z.dispatchEvent("zoom",S,e)},document.onmouseup=()=>{N.zoomLocat=null,document.onmousemove=t,document.onmouseup=o,setTimeout(()=>{f.className=f.className.replace(/\s?is--drag/,"")},50)}},H=()=>{var{slots:e={},showClose:t,showZoom:o,title:l}=w,a=N["zoomLocat"],s=f.title||e.title,e=f.corner||e.corner,s=[(0,_vue.h)("div",{class:"vxe-modal--header-title"},s?(0,_vn.getSlotVNs)(s({$modal:b})):l?(0,_utils.getFuncText)(l):(0,_i18n.getI18n)("vxe.alert.title"))],l=[];return e&&l.push((0,_vue.h)("span",{class:"vxe-modal--corner-wrapper"},(0,_vn.getSlotVNs)(e({$modal:b})))),o&&l.push((0,_vue.h)("i",{class:["vxe-modal--zoom-btn","trigger--btn",a?_iconStore.default.MODAL_ZOOM_OUT:_iconStore.default.MODAL_ZOOM_IN],title:(0,_i18n.getI18n)("vxe.modal.zoom"+(a?"Out":"In")),onClick:E})),t&&l.push((0,_vue.h)("i",{class:["vxe-modal--close-btn","trigger--btn",_iconStore.default.MODAL_CLOSE],title:(0,_i18n.getI18n)("vxe.modal.close"),onClick:v})),s.push((0,_vue.h)("div",{class:"vxe-modal--header-right"},l)),s},$=()=>{var e=w["type"],t=[];return"confirm"===e&&t.push((0,_vue.h)(_button.default,{ref:r,content:w.cancelButtonText||(0,_i18n.getI18n)("vxe.button.cancel"),onClick:a})),t.push((0,_vue.h)(_button.default,{ref:s,status:"primary",content:w.confirmButtonText||(0,_i18n.getI18n)("vxe.button.confirm"),onClick:l})),t};z={dispatchEvent(e,t,o){i(e,Object.assign({$modal:b,$event:o},t))},open:O,close(){return p("close")},getBox:k,getPosition:()=>{if(!x.value){var e=k();if(e)return{top:e.offsetTop,left:e.offsetLeft}}return null},setPosition:(e,t)=>{var o;return x.value||(o=k(),_xeUtils.default.isNumber(e)&&(o.style.top=e+"px"),_xeUtils.default.isNumber(t)&&(o.style.left=t+"px")),(0,_vue.nextTick)()},isMaximized:L,zoom:D,maximize:S,revert:C},Object.assign(b,z),(0,_vue.watch)(()=>w.width,n),(0,_vue.watch)(()=>w.height,n),(0,_vue.watch)(()=>w.modelValue,e=>{e?O():p("model")}),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{w.storage&&!w.id&&(0,_log.errLog)("vxe.error.reqProp",["modal.id"]),w.modelValue&&O(),n()}),w.escClosable&&_event.GlobalEvent.on(b,"keydown",M)}),(0,_vue.onUnmounted)(()=>{_event.GlobalEvent.off(b,"keydown"),d()});return b.renderVN=()=>{var{className:e,type:t,animat:o,loading:l,status:a,lockScroll:s,lockView:i,mask:r,resize:n}=w,{inited:u,zoomLocat:d,modalTop:c,contentVisible:m,visible:p}=N,v=g.value;return(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!w.transfer||!u},[(0,_vue.h)("div",{ref:h,class:["vxe-modal--wrapper","type--"+t,e||"",{["size--"+v]:v,["status--"+a]:a,"is--animat":o,"lock--scroll":s,"lock--view":i,"is--resize":n,"is--mask":r,"is--maximize":d,"is--visible":m,"is--active":p,"is--loading":l}],style:{zIndex:N.modalZindex,top:c?c+"px":null},onClick:B},[(0,_vue.h)("div",{ref:_,class:"vxe-modal--box",onMousedown:V},(()=>{var e,{slots:t={},showZoom:o,draggable:l}=w,a=x.value,t=f.header||t.header,s=[];return w.showHeader&&(e={},l&&(e.onMousedown=U),o&&w.dblclickZoom&&"modal"===w.type&&(e.onDblclick=E),s.push((0,_vue.h)("div",Object.assign({class:["vxe-modal--header",{"is--draggable":l,"is--ellipsis":!a&&w.showTitleOverflow}]},e),t?!N.inited||w.destroyOnClose&&!N.visible?[]:(0,_vn.getSlotVNs)(t({$modal:b})):H()))),s})().concat((()=>{var{slots:e={},status:t,message:o}=w,o=w.content||o,l=x.value,e=f.default||e.default,a=[];return t&&a.push((0,_vue.h)("div",{class:"vxe-modal--status-wrapper"},[(0,_vue.h)("i",{class:["vxe-modal--status-icon",w.iconStatus||_iconStore.default[("MODAL_"+t).toLocaleUpperCase()]]})])),a.push((0,_vue.h)("div",{class:"vxe-modal--content"},e?!N.inited||w.destroyOnClose&&!N.visible?[]:(0,_vn.getSlotVNs)(e({$modal:b})):(0,_utils.getFuncText)(o))),l||a.push((0,_vue.h)(_index.default,{class:"vxe-modal--loading",modelValue:w.loading})),[(0,_vue.h)("div",{class:"vxe-modal--body"},a)]})(),(()=>{var{slots:e={}}=w,t=x.value,e=f.footer||e.footer,o=[];return w.showFooter&&o.push((0,_vue.h)("div",{class:"vxe-modal--footer"},e?!N.inited||w.destroyOnClose&&!N.visible?[]:(0,_vn.getSlotVNs)(e({$modal:b})):$())),!t&&w.resize&&o.push((0,_vue.h)("span",{class:"vxe-modal--resize"},["wl","wr","swst","sest","st","swlb","selb","sb"].map(e=>(0,_vue.h)("span",{class:e+"-resize",type:e,onMousedown:q})))),o})()))])])},b},render(){return this.renderVN()}});

package/lib/modal/style/style.css

@@ -6,7 +6,7 @@
   line-height: 1.5;
   width: calc(100% + 18px);
   height: calc(100% + 18px);
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   font-family: var(--vxe-font-family);
   transition: top 0.4s ease-in-out;
 }