vxe-pc-ui 4.19.6 → 4.19.7

package/lib/row/src/col.js

@@ -9,7 +9,11 @@ var _comp = require("../../ui/src/comp");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _ui = require("../../ui");
 var _dom = require("../../ui/src/dom");
+var _log = require("../../ui/src/log");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  errLog
+} = (0, _log.createComponentLog)('col');
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeCol',
   props: {
@@ -55,27 +59,33 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = props;
       const rowGutter = computeRowGutter.value;
       const rowVertical = computeRowVertical.value;
+      let gridLayout = false;
+      if ($xeRow) {
+        gridLayout = !!$xeRow.props.gridLayout;
+      }
       const style = {};
-      if (rowGutter) {
-        let [lrGutter, tbGutter] = _xeUtils.default.isArray(rowGutter) ? rowGutter : [rowGutter];
-        if (rowVertical) {
-          tbGutter = lrGutter;
-          lrGutter = '';
-        }
-        if (lrGutter) {
-          const padding = _xeUtils.default.isNumber(lrGutter) ? (0, _dom.toCssUnit)(lrGutter / 2) : `calc(${(0, _dom.toCssUnit)(lrGutter)} / 2)`;
-          style.paddingLeft = padding;
-          style.paddingRight = padding;
+      if (!gridLayout) {
+        if (rowGutter) {
+          let [lrGutter, tbGutter] = _xeUtils.default.isArray(rowGutter) ? rowGutter : [rowGutter];
+          if (rowVertical) {
+            tbGutter = lrGutter;
+            lrGutter = '';
+          }
+          if (lrGutter) {
+            const padding = _xeUtils.default.isNumber(lrGutter) ? (0, _dom.toCssUnit)(lrGutter / 2) : `calc(${(0, _dom.toCssUnit)(lrGutter)} / 2)`;
+            style.paddingLeft = padding;
+            style.paddingRight = padding;
+          }
+          if (tbGutter) {
+            const padding = _xeUtils.default.isNumber(tbGutter) ? (0, _dom.toCssUnit)(tbGutter / 2) : `calc(${(0, _dom.toCssUnit)(tbGutter)} / 2)`;
+            style.paddingTop = padding;
+            style.paddingBottom = padding;
+          }
         }
-        if (tbGutter) {
-          const padding = _xeUtils.default.isNumber(tbGutter) ? (0, _dom.toCssUnit)(tbGutter / 2) : `calc(${(0, _dom.toCssUnit)(tbGutter)} / 2)`;
-          style.paddingTop = padding;
-          style.paddingBottom = padding;
+        if (width) {
+          style.width = (0, _dom.toCssUnit)(width);
         }
       }
-      if (width) {
-        style.width = (0, _dom.toCssUnit)(width);
-      }
       return style;
     });
     const computeMaps = {};
@@ -120,6 +130,22 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: 'vxe-col--inner'
       }, defaultSlot ? defaultSlot({}) : [])]);
     };
+    (0, _vue.onMounted)(() => {
+      const {
+        width,
+        fill
+      } = props;
+      if ($xeRow) {
+        if ($xeRow.props.gridLayout) {
+          if (width) {
+            errLog('vxe.error.notSupportProp', ['grid-layout', `width=${width}`, 'width=null']);
+          }
+          if (fill) {
+            errLog('vxe.error.notSupportProp', ['grid-layout', `fill=${fill}`, 'fill=false']);
+          }
+        }
+      }
+    });
     $xeCol.renderVN = renderVN;
     return $xeCol;
   },

package/lib/row/src/col.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeCol",props:{span:[Number,String],align:String,width:[Number,String],fill:Boolean,ellipsis:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().col.size||(0,_ui.getConfig)().size}},emits:[],setup(n,e){let{slots:o,emit:r}=e;var t=_xeUtils.default.uniqueId();(0,_ui.useSize)(n);let a=(0,_vue.ref)();var i=(0,_vue.reactive)({});let u={refElem:a},l=(0,_vue.inject)("$xeRow",null),s=(0,_vue.computed)(()=>l?l.props.gutter:null),d=(0,_vue.computed)(()=>l?l.props.vertical:null),p=(0,_vue.computed)(()=>{var e=n.width,i=s.value,r=d.value,u={};if(i){let[e,t]=_xeUtils.default.isArray(i)?i:[i];r&&(t=e,e=""),e&&(i=_xeUtils.default.isNumber(e)?(0,_dom.toCssUnit)(e/2):`calc(${(0,_dom.toCssUnit)(e)} / 2)`,u.paddingLeft=i,u.paddingRight=i),t&&(r=_xeUtils.default.isNumber(t)?(0,_dom.toCssUnit)(t/2):`calc(${(0,_dom.toCssUnit)(t)} / 2)`,u.paddingTop=r,u.paddingBottom=r)}return e&&(u.width=(0,_dom.toCssUnit)(e)),u}),_={},v={xID:t,props:n,context:e,reactData:i,getRefMaps:()=>u,getComputeMaps:()=>_};Object.assign(v,{dispatchEvent:(e,t,i)=>{r(e,(0,_ui.createEvent)(i,{$col:v},t))}},{});return v.renderVN=()=>{var{span:e,fill:t,align:i,width:r,ellipsis:u}=n,l=p.value,s=o.default;return(0,_vue.h)("div",{ref:a,class:["vxe-col",e?"span"+e:"",i?"align--"+i:"",{"is--span":!!e,"is--width":!!r,"is--fill":t,"is--ellipsis":u}],style:l},[(0,_vue.h)("div",{class:"vxe-col--inner"},s?s({}):[])])},v},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_log=require("../../ui/src/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let errLog=(0,_log.createComponentLog)("col").errLog;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeCol",props:{span:[Number,String],align:String,width:[Number,String],fill:Boolean,ellipsis:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().col.size||(0,_ui.getConfig)().size}},emits:[],setup(s,e){let{slots:a,emit:r}=e;var t=_xeUtils.default.uniqueId();(0,_ui.useSize)(s);let n=(0,_vue.ref)();var i=(0,_vue.reactive)({});let l={refElem:n},o=(0,_vue.inject)("$xeRow",null),u=(0,_vue.computed)(()=>o?o.props.gutter:null),d=(0,_vue.computed)(()=>o?o.props.vertical:null),p=(0,_vue.computed)(()=>{var e=s.width,i=u.value,r=d.value;let t=!1;var l={};if(!(t=o?!!o.props.gridLayout:t)){if(i){let[e,t]=_xeUtils.default.isArray(i)?i:[i];r&&(t=e,e=""),e&&(i=_xeUtils.default.isNumber(e)?(0,_dom.toCssUnit)(e/2):`calc(${(0,_dom.toCssUnit)(e)} / 2)`,l.paddingLeft=i,l.paddingRight=i),t&&(r=_xeUtils.default.isNumber(t)?(0,_dom.toCssUnit)(t/2):`calc(${(0,_dom.toCssUnit)(t)} / 2)`,l.paddingTop=r,l.paddingBottom=r)}e&&(l.width=(0,_dom.toCssUnit)(e))}return l}),_={},v={xID:t,props:s,context:e,reactData:i,getRefMaps:()=>l,getComputeMaps:()=>_};Object.assign(v,{dispatchEvent:(e,t,i)=>{r(e,(0,_ui.createEvent)(i,{$col:v},t))}},{});return(0,_vue.onMounted)(()=>{var{width:e,fill:t}=s;o&&o.props.gridLayout&&(e&&errLog("vxe.error.notSupportProp",["grid-layout","width="+e,"width=null"]),t)&&errLog("vxe.error.notSupportProp",["grid-layout","fill="+t,"fill=false"])}),v.renderVN=()=>{var{span:e,fill:t,align:i,width:r,ellipsis:l}=s,o=p.value,u=a.default;return(0,_vue.h)("div",{ref:n,class:["vxe-col",e?"span"+e:"",i?"align--"+i:"",{"is--span":!!e,"is--width":!!r,"is--fill":t,"is--ellipsis":l}],style:o},[(0,_vue.h)("div",{class:"vxe-col--inner"},u?u({}):[])])},v},render(){return this.renderVN()}});

package/lib/row/src/row.js

@@ -9,10 +9,18 @@ var _comp = require("../../ui/src/comp");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _ui = require("../../ui");
 var _dom = require("../../ui/src/dom");
+var _log = require("../../ui/src/log");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  warnLog
+} = (0, _log.createComponentLog)('row');
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeRow',
   props: {
+    gridLayout: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().row.gridLayout
+    },
     gutter: [Number, String, Array],
     wrap: {
       type: Boolean,
@@ -39,25 +47,31 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const computeRowStyle = (0, _vue.computed)(() => {
       const {
+        gridLayout,
         gutter,
         vertical
       } = props;
       const style = {};
       if (gutter) {
         let [lrGutter, tbGutter] = _xeUtils.default.isArray(gutter) ? gutter : [gutter];
-        if (vertical) {
-          tbGutter = lrGutter;
-          lrGutter = '';
-        }
-        if (lrGutter) {
-          const offsetSize = _xeUtils.default.isNumber(lrGutter) ? (0, _dom.toCssUnit)(-(lrGutter / 2)) : `calc(${(0, _dom.toCssUnit)(lrGutter)} / 2 * -1)`;
-          style.marginLeft = offsetSize;
-          style.marginRight = offsetSize;
-        }
-        if (tbGutter) {
-          const offsetSize = _xeUtils.default.isNumber(tbGutter) ? (0, _dom.toCssUnit)(-(tbGutter / 2)) : `calc(${(0, _dom.toCssUnit)(tbGutter)} / 2 * -1)`;
-          style.marginTop = offsetSize;
-          style.marginBottom = offsetSize;
+        if (gridLayout) {
+          style.columnGap = (0, _dom.toCssUnit)(lrGutter);
+          style.rowGap = (0, _dom.toCssUnit)(tbGutter || lrGutter);
+        } else {
+          if (vertical) {
+            tbGutter = lrGutter;
+            lrGutter = '';
+          }
+          if (lrGutter) {
+            const offsetSize = _xeUtils.default.isNumber(lrGutter) ? (0, _dom.toCssUnit)(-(lrGutter / 2)) : `calc(${(0, _dom.toCssUnit)(lrGutter)} / 2 * -1)`;
+            style.marginLeft = offsetSize;
+            style.marginRight = offsetSize;
+          }
+          if (tbGutter) {
+            const offsetSize = _xeUtils.default.isNumber(tbGutter) ? (0, _dom.toCssUnit)(-(tbGutter / 2)) : `calc(${(0, _dom.toCssUnit)(tbGutter)} / 2 * -1)`;
+            style.marginTop = offsetSize;
+            style.marginBottom = offsetSize;
+          }
         }
       }
       return style;
@@ -86,6 +100,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     Object.assign($xeRow, rowMethods, rowPrivateMethods);
     const renderVN = () => {
       const {
+        gridLayout,
         vertical,
         wrap
       } = props;
@@ -93,7 +108,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const defaultSlot = slots.default;
       return (0, _vue.h)('div', {
         ref: refElem,
-        class: ['vxe-row', {
+        class: ['vxe-row', gridLayout ? 'grid--layout' : 'def--layout', {
           'is--vertical': vertical,
           'is--wrap': wrap
         }],
@@ -101,6 +116,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         onClick: clickEvent
       }, defaultSlot ? defaultSlot({}) : []);
     };
+    (0, _vue.onMounted)(() => {
+      const {
+        gridLayout,
+        wrap
+      } = props;
+      if (gridLayout && !wrap) {
+        warnLog('vxe.error.notSupportProp', ['grid-layout', 'wrap=false', 'wrap=true']);
+      }
+    });
     (0, _vue.provide)('$xeRow', $xeRow);
     $xeRow.renderVN = renderVN;
     return $xeRow;

package/lib/row/src/row.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeRow",props:{gutter:[Number,String,Array],wrap:{type:Boolean,default:()=>(0,_ui.getConfig)().row.wrap},vertical:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().row.size||(0,_ui.getConfig)().size}},emits:["click"],setup(a,e){let{slots:u,emit:i}=e;var t=_xeUtils.default.uniqueId();(0,_ui.useSize)(a);let o=(0,_vue.ref)();var r=(0,_vue.reactive)({});let s={refElem:o},l=(0,_vue.computed)(()=>{var{gutter:r,vertical:i}=a,u={};if(r){let[e,t]=_xeUtils.default.isArray(r)?r:[r];i&&(t=e,e=""),e&&(r=_xeUtils.default.isNumber(e)?(0,_dom.toCssUnit)(-e/2):`calc(${(0,_dom.toCssUnit)(e)} / 2 * -1)`,u.marginLeft=r,u.marginRight=r),t&&(i=_xeUtils.default.isNumber(t)?(0,_dom.toCssUnit)(-t/2):`calc(${(0,_dom.toCssUnit)(t)} / 2 * -1)`,u.marginTop=i,u.marginBottom=i)}return u}),n={},_={xID:t,props:a,context:e,reactData:r,getRefMaps:()=>s,getComputeMaps:()=>n},d=e=>{c("click",{},e)},c=(e,t,r)=>{i(e,(0,_ui.createEvent)(r,{$row:_},t))};t={dispatchEvent:c};Object.assign(_,t,{});return(0,_vue.provide)("$xeRow",_),_.renderVN=()=>{var{vertical:e,wrap:t}=a,r=l.value,i=u.default;return(0,_vue.h)("div",{ref:o,class:["vxe-row",{"is--vertical":e,"is--wrap":t}],style:r,onClick:d},i?i({}):[])},_},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_log=require("../../ui/src/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let warnLog=(0,_log.createComponentLog)("row").warnLog;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeRow",props:{gridLayout:{type:Boolean,default:()=>(0,_ui.getConfig)().row.gridLayout},gutter:[Number,String,Array],wrap:{type:Boolean,default:()=>(0,_ui.getConfig)().row.wrap},vertical:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().row.size||(0,_ui.getConfig)().size}},emits:["click"],setup(a,e){let{slots:u,emit:o}=e;var r=_xeUtils.default.uniqueId();(0,_ui.useSize)(a);let l=(0,_vue.ref)();var t=(0,_vue.reactive)({});let i={refElem:l},n=(0,_vue.computed)(()=>{var{gridLayout:t,gutter:o,vertical:i}=a,u={};if(o){let[e,r]=_xeUtils.default.isArray(o)?o:[o];t?(u.columnGap=(0,_dom.toCssUnit)(e),u.rowGap=(0,_dom.toCssUnit)(r||e)):(i&&(r=e,e=""),e&&(o=_xeUtils.default.isNumber(e)?(0,_dom.toCssUnit)(-e/2):`calc(${(0,_dom.toCssUnit)(e)} / 2 * -1)`,u.marginLeft=o,u.marginRight=o),r&&(t=_xeUtils.default.isNumber(r)?(0,_dom.toCssUnit)(-r/2):`calc(${(0,_dom.toCssUnit)(r)} / 2 * -1)`,u.marginTop=t,u.marginBottom=t))}return u}),s={},d={xID:r,props:a,context:e,reactData:t,getRefMaps:()=>i,getComputeMaps:()=>s},p=e=>{_("click",{},e)},_=(e,r,t)=>{o(e,(0,_ui.createEvent)(t,{$row:d},r))};r={dispatchEvent:_};Object.assign(d,r,{});return(0,_vue.onMounted)(()=>{var{gridLayout:e,wrap:r}=a;e&&!r&&warnLog("vxe.error.notSupportProp",["grid-layout","wrap=false","wrap=true"])}),(0,_vue.provide)("$xeRow",d),d.renderVN=()=>{var{gridLayout:e,vertical:r,wrap:t}=a,o=n.value,i=u.default;return(0,_vue.h)("div",{ref:l,class:["vxe-row",e?"grid--layout":"def--layout",{"is--vertical":r,"is--wrap":t}],style:o,onClick:p},i?i({}):[])},d},render(){return this.renderVN()}});

package/lib/row/style/style.css

@@ -34,78 +34,155 @@
 .vxe-col.align--right {
   text-align: right;
 }
-.vxe-col.span1 {
+
+.vxe-row.def--layout > .vxe-col.span1 {
   width: 4.16667%;
 }
-.vxe-col.span2 {
+.vxe-row.def--layout > .vxe-col.span2 {
   width: 8.33333%;
 }
-.vxe-col.span3 {
+.vxe-row.def--layout > .vxe-col.span3 {
   width: 12.5%;
 }
-.vxe-col.span4 {
+.vxe-row.def--layout > .vxe-col.span4 {
   width: 16.66667%;
 }
-.vxe-col.span5 {
+.vxe-row.def--layout > .vxe-col.span5 {
   width: 20.83333%;
 }
-.vxe-col.span6 {
+.vxe-row.def--layout > .vxe-col.span6 {
   width: 25%;
 }
-.vxe-col.span7 {
+.vxe-row.def--layout > .vxe-col.span7 {
   width: 29.16667%;
 }
-.vxe-col.span8 {
+.vxe-row.def--layout > .vxe-col.span8 {
   width: 33.33333%;
 }
-.vxe-col.span9 {
+.vxe-row.def--layout > .vxe-col.span9 {
   width: 37.5%;
 }
-.vxe-col.span10 {
+.vxe-row.def--layout > .vxe-col.span10 {
   width: 41.66667%;
 }
-.vxe-col.span11 {
+.vxe-row.def--layout > .vxe-col.span11 {
   width: 45.83333%;
 }
-.vxe-col.span12 {
+.vxe-row.def--layout > .vxe-col.span12 {
   width: 50%;
 }
-.vxe-col.span13 {
+.vxe-row.def--layout > .vxe-col.span13 {
   width: 54.16667%;
 }
-.vxe-col.span14 {
+.vxe-row.def--layout > .vxe-col.span14 {
   width: 58.33333%;
 }
-.vxe-col.span15 {
+.vxe-row.def--layout > .vxe-col.span15 {
   width: 62.5%;
 }
-.vxe-col.span16 {
+.vxe-row.def--layout > .vxe-col.span16 {
   width: 66.66667%;
 }
-.vxe-col.span17 {
+.vxe-row.def--layout > .vxe-col.span17 {
   width: 70.83333%;
 }
-.vxe-col.span18 {
+.vxe-row.def--layout > .vxe-col.span18 {
   width: 75%;
 }
-.vxe-col.span19 {
+.vxe-row.def--layout > .vxe-col.span19 {
   width: 79.16667%;
 }
-.vxe-col.span20 {
+.vxe-row.def--layout > .vxe-col.span20 {
   width: 83.33333%;
 }
-.vxe-col.span21 {
+.vxe-row.def--layout > .vxe-col.span21 {
   width: 87.5%;
 }
-.vxe-col.span22 {
+.vxe-row.def--layout > .vxe-col.span22 {
   width: 91.66667%;
 }
-.vxe-col.span23 {
+.vxe-row.def--layout > .vxe-col.span23 {
   width: 95.83333%;
 }
-.vxe-col.span24 {
+.vxe-row.def--layout > .vxe-col.span24 {
   width: 100%;
 }
+.vxe-row.grid--layout {
+  display: grid;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+}
+.vxe-row.grid--layout > .vxe-col.span1 {
+  grid-column: span 1;
+}
+.vxe-row.grid--layout > .vxe-col.span2 {
+  grid-column: span 2;
+}
+.vxe-row.grid--layout > .vxe-col.span3 {
+  grid-column: span 3;
+}
+.vxe-row.grid--layout > .vxe-col.span4 {
+  grid-column: span 4;
+}
+.vxe-row.grid--layout > .vxe-col.span5 {
+  grid-column: span 5;
+}
+.vxe-row.grid--layout > .vxe-col.span6 {
+  grid-column: span 6;
+}
+.vxe-row.grid--layout > .vxe-col.span7 {
+  grid-column: span 7;
+}
+.vxe-row.grid--layout > .vxe-col.span8 {
+  grid-column: span 8;
+}
+.vxe-row.grid--layout > .vxe-col.span9 {
+  grid-column: span 9;
+}
+.vxe-row.grid--layout > .vxe-col.span10 {
+  grid-column: span 10;
+}
+.vxe-row.grid--layout > .vxe-col.span11 {
+  grid-column: span 11;
+}
+.vxe-row.grid--layout > .vxe-col.span12 {
+  grid-column: span 12;
+}
+.vxe-row.grid--layout > .vxe-col.span13 {
+  grid-column: span 13;
+}
+.vxe-row.grid--layout > .vxe-col.span14 {
+  grid-column: span 14;
+}
+.vxe-row.grid--layout > .vxe-col.span15 {
+  grid-column: span 15;
+}
+.vxe-row.grid--layout > .vxe-col.span16 {
+  grid-column: span 16;
+}
+.vxe-row.grid--layout > .vxe-col.span17 {
+  grid-column: span 17;
+}
+.vxe-row.grid--layout > .vxe-col.span18 {
+  grid-column: span 18;
+}
+.vxe-row.grid--layout > .vxe-col.span19 {
+  grid-column: span 19;
+}
+.vxe-row.grid--layout > .vxe-col.span20 {
+  grid-column: span 20;
+}
+.vxe-row.grid--layout > .vxe-col.span21 {
+  grid-column: span 21;
+}
+.vxe-row.grid--layout > .vxe-col.span22 {
+  grid-column: span 22;
+}
+.vxe-row.grid--layout > .vxe-col.span23 {
+  grid-column: span 23;
+}
+.vxe-row.grid--layout > .vxe-col.span24 {
+  grid-column: span 24;
+}
 
 .vxe-col--inner {
   width: 100%;

package/lib/row/style/style.min.css

@@ -1 +1 @@
-.vxe-row{position:relative;display:flex;flex-direction:row;flex-grow:1}.vxe-row.is--vertical{flex-direction:column}.vxe-row.is--wrap{flex-wrap:wrap}.vxe-col{display:block}.vxe-col.is--ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-col.is--fill{flex-grow:1}.vxe-col:not(.is--fill){flex-shrink:0}.vxe-col.align--left{text-align:left}.vxe-col.align--center{text-align:center}.vxe-col.align--right{text-align:right}.vxe-col.span1{width:4.16667%}.vxe-col.span2{width:8.33333%}.vxe-col.span3{width:12.5%}.vxe-col.span4{width:16.66667%}.vxe-col.span5{width:20.83333%}.vxe-col.span6{width:25%}.vxe-col.span7{width:29.16667%}.vxe-col.span8{width:33.33333%}.vxe-col.span9{width:37.5%}.vxe-col.span10{width:41.66667%}.vxe-col.span11{width:45.83333%}.vxe-col.span12{width:50%}.vxe-col.span13{width:54.16667%}.vxe-col.span14{width:58.33333%}.vxe-col.span15{width:62.5%}.vxe-col.span16{width:66.66667%}.vxe-col.span17{width:70.83333%}.vxe-col.span18{width:75%}.vxe-col.span19{width:79.16667%}.vxe-col.span20{width:83.33333%}.vxe-col.span21{width:87.5%}.vxe-col.span22{width:91.66667%}.vxe-col.span23{width:95.83333%}.vxe-col.span24{width:100%}.vxe-col--inner{width:100%}.vxe-col.is--span>.vxe-col--inner>.vxe-date-picker,.vxe-col.is--span>.vxe-col--inner>.vxe-default-select,.vxe-col.is--span>.vxe-col--inner>.vxe-default-textarea,.vxe-col.is--span>.vxe-col--inner>.vxe-ico-picker,.vxe-col.is--span>.vxe-col--inner>.vxe-input,.vxe-col.is--span>.vxe-col--inner>.vxe-number-input,.vxe-col.is--span>.vxe-col--inner>.vxe-password-input,.vxe-col.is--span>.vxe-col--inner>.vxe-select,.vxe-col.is--span>.vxe-col--inner>.vxe-table-select,.vxe-col.is--span>.vxe-col--inner>.vxe-textarea,.vxe-col.is--span>.vxe-col--inner>.vxe-tree-select,.vxe-col.is--width>.vxe-col--inner>.vxe-date-picker,.vxe-col.is--width>.vxe-col--inner>.vxe-default-select,.vxe-col.is--width>.vxe-col--inner>.vxe-default-textarea,.vxe-col.is--width>.vxe-col--inner>.vxe-ico-picker,.vxe-col.is--width>.vxe-col--inner>.vxe-input,.vxe-col.is--width>.vxe-col--inner>.vxe-number-input,.vxe-col.is--width>.vxe-col--inner>.vxe-password-input,.vxe-col.is--width>.vxe-col--inner>.vxe-select,.vxe-col.is--width>.vxe-col--inner>.vxe-table-select,.vxe-col.is--width>.vxe-col--inner>.vxe-textarea,.vxe-col.is--width>.vxe-col--inner>.vxe-tree-select{width:100%}
+.vxe-row{position:relative;display:flex;flex-direction:row;flex-grow:1}.vxe-row.is--vertical{flex-direction:column}.vxe-row.is--wrap{flex-wrap:wrap}.vxe-col{display:block}.vxe-col.is--ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-col.is--fill{flex-grow:1}.vxe-col:not(.is--fill){flex-shrink:0}.vxe-col.align--left{text-align:left}.vxe-col.align--center{text-align:center}.vxe-col.align--right{text-align:right}.vxe-row.def--layout>.vxe-col.span1{width:4.16667%}.vxe-row.def--layout>.vxe-col.span2{width:8.33333%}.vxe-row.def--layout>.vxe-col.span3{width:12.5%}.vxe-row.def--layout>.vxe-col.span4{width:16.66667%}.vxe-row.def--layout>.vxe-col.span5{width:20.83333%}.vxe-row.def--layout>.vxe-col.span6{width:25%}.vxe-row.def--layout>.vxe-col.span7{width:29.16667%}.vxe-row.def--layout>.vxe-col.span8{width:33.33333%}.vxe-row.def--layout>.vxe-col.span9{width:37.5%}.vxe-row.def--layout>.vxe-col.span10{width:41.66667%}.vxe-row.def--layout>.vxe-col.span11{width:45.83333%}.vxe-row.def--layout>.vxe-col.span12{width:50%}.vxe-row.def--layout>.vxe-col.span13{width:54.16667%}.vxe-row.def--layout>.vxe-col.span14{width:58.33333%}.vxe-row.def--layout>.vxe-col.span15{width:62.5%}.vxe-row.def--layout>.vxe-col.span16{width:66.66667%}.vxe-row.def--layout>.vxe-col.span17{width:70.83333%}.vxe-row.def--layout>.vxe-col.span18{width:75%}.vxe-row.def--layout>.vxe-col.span19{width:79.16667%}.vxe-row.def--layout>.vxe-col.span20{width:83.33333%}.vxe-row.def--layout>.vxe-col.span21{width:87.5%}.vxe-row.def--layout>.vxe-col.span22{width:91.66667%}.vxe-row.def--layout>.vxe-col.span23{width:95.83333%}.vxe-row.def--layout>.vxe-col.span24{width:100%}.vxe-row.grid--layout{display:grid;grid-template-columns:repeat(24,minmax(0,1fr))}.vxe-row.grid--layout>.vxe-col.span1{grid-column:span 1}.vxe-row.grid--layout>.vxe-col.span2{grid-column:span 2}.vxe-row.grid--layout>.vxe-col.span3{grid-column:span 3}.vxe-row.grid--layout>.vxe-col.span4{grid-column:span 4}.vxe-row.grid--layout>.vxe-col.span5{grid-column:span 5}.vxe-row.grid--layout>.vxe-col.span6{grid-column:span 6}.vxe-row.grid--layout>.vxe-col.span7{grid-column:span 7}.vxe-row.grid--layout>.vxe-col.span8{grid-column:span 8}.vxe-row.grid--layout>.vxe-col.span9{grid-column:span 9}.vxe-row.grid--layout>.vxe-col.span10{grid-column:span 10}.vxe-row.grid--layout>.vxe-col.span11{grid-column:span 11}.vxe-row.grid--layout>.vxe-col.span12{grid-column:span 12}.vxe-row.grid--layout>.vxe-col.span13{grid-column:span 13}.vxe-row.grid--layout>.vxe-col.span14{grid-column:span 14}.vxe-row.grid--layout>.vxe-col.span15{grid-column:span 15}.vxe-row.grid--layout>.vxe-col.span16{grid-column:span 16}.vxe-row.grid--layout>.vxe-col.span17{grid-column:span 17}.vxe-row.grid--layout>.vxe-col.span18{grid-column:span 18}.vxe-row.grid--layout>.vxe-col.span19{grid-column:span 19}.vxe-row.grid--layout>.vxe-col.span20{grid-column:span 20}.vxe-row.grid--layout>.vxe-col.span21{grid-column:span 21}.vxe-row.grid--layout>.vxe-col.span22{grid-column:span 22}.vxe-row.grid--layout>.vxe-col.span23{grid-column:span 23}.vxe-row.grid--layout>.vxe-col.span24{grid-column:span 24}.vxe-col--inner{width:100%}.vxe-col.is--span>.vxe-col--inner>.vxe-date-picker,.vxe-col.is--span>.vxe-col--inner>.vxe-default-select,.vxe-col.is--span>.vxe-col--inner>.vxe-default-textarea,.vxe-col.is--span>.vxe-col--inner>.vxe-ico-picker,.vxe-col.is--span>.vxe-col--inner>.vxe-input,.vxe-col.is--span>.vxe-col--inner>.vxe-number-input,.vxe-col.is--span>.vxe-col--inner>.vxe-password-input,.vxe-col.is--span>.vxe-col--inner>.vxe-select,.vxe-col.is--span>.vxe-col--inner>.vxe-table-select,.vxe-col.is--span>.vxe-col--inner>.vxe-textarea,.vxe-col.is--span>.vxe-col--inner>.vxe-tree-select,.vxe-col.is--width>.vxe-col--inner>.vxe-date-picker,.vxe-col.is--width>.vxe-col--inner>.vxe-default-select,.vxe-col.is--width>.vxe-col--inner>.vxe-default-textarea,.vxe-col.is--width>.vxe-col--inner>.vxe-ico-picker,.vxe-col.is--width>.vxe-col--inner>.vxe-input,.vxe-col.is--width>.vxe-col--inner>.vxe-number-input,.vxe-col.is--width>.vxe-col--inner>.vxe-password-input,.vxe-col.is--width>.vxe-col--inner>.vxe-select,.vxe-col.is--width>.vxe-col--inner>.vxe-table-select,.vxe-col.is--width>.vxe-col--inner>.vxe-textarea,.vxe-col.is--width>.vxe-col--inner>.vxe-tree-select{width:100%}

package/lib/scrollbar/src/scrollbar.js

@@ -17,6 +17,7 @@ const {
   createEvent,
   domUtils,
   globalResize,
+  globalEvents,
   renderEmptyElement
 } = _ui.VxeUI;
 function createReactData() {
@@ -596,9 +597,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       reFlag.value++;
     });
     (0, _vue.watch)(reFlag, () => {
-      $xeScrollbar.recalculate().then(() => {
-        $xeScrollbar.recalculate();
-      });
+      $xeScrollbar.recalculate();
     });
     (0, _vue.onMounted)(() => {
       const {
@@ -621,6 +620,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         internalData.resizeObserver = resizeObserver;
       }
       reFlag.value++;
+      globalEvents.on($xeScrollbar, 'resize', () => {
+        reFlag.value++;
+      });
     });
     (0, _vue.onBeforeUnmount)(() => {
       const {
@@ -629,6 +631,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
+      globalEvents.off($xeScrollbar, 'resize');
     });
     $xeScrollbar.renderVN = renderVN;
     return $xeScrollbar;

package/lib/scrollbar/src/scrollbar.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_util=require("./util"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getConfig,createEvent,domUtils,globalResize,renderEmptyElement}=_ui.VxeUI;function createReactData(){return{yThumbHeight:0,xThumbWidth:0}}function createInternalData(){return{thumbDragOffset:0,yThumbTop:0,xThumbLeft:0,lastScrollTop:0,lastScrollLeft:0}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeScrollbar",props:{id:[String,Number],width:[String,Number],height:[String,Number],minWidth:[String,Number],minHeight:[String,Number],maxWidth:[String,Number],maxHeight:[String,Number],loading:Boolean,native:{type:Boolean,default:()=>getConfig().scrollbar.native},padding:{type:Boolean,default:()=>getConfig().scrollbar.padding},xConfig:Object,yConfig:Object,className:{type:String,default:()=>getConfig().scrollbar.className},viewAttrs:{type:Object,default:()=>getConfig().scrollbar.viewAttrs},viewClassName:{type:String,default:()=>getConfig().scrollbar.viewClassName},viewInnerClassName:{type:String,default:()=>getConfig().scrollbar.viewInnerClassName},autoResize:{type:Boolean,default:()=>getConfig().scrollbar.autoResize},syncResize:[Boolean,String,Number]},emits:["scroll","scroll-boundary"],setup(v,e){let{emit:i,slots:h}=e;var t=_xeUtils.default.uniqueId();let d=(0,_vue.ref)(),g=(0,_vue.ref)(),m=(0,_vue.ref)(),f=(0,_vue.ref)(),b=(0,_vue.ref)(),p=(0,_vue.ref)(),_=(0,_vue.ref)(),T=(0,_vue.reactive)(createReactData()),x=createInternalData(),C=(0,_vue.computed)(()=>{var{width:e,height:t,minWidth:l,minHeight:i,maxWidth:r,maxHeight:a}=v,o=w.value,u=S.value,n={};return e&&(n.width=(0,_dom.toCssUnit)(e)),t&&(n.height=(0,_dom.toCssUnit)(t)),l&&(n.minWidth=(0,_dom.toCssUnit)(l)),i&&(n.minHeight=(0,_dom.toCssUnit)(i)),r&&(n.maxWidth=(0,_dom.toCssUnit)(r)),a&&(n.maxHeight=(0,_dom.toCssUnit)(a)),u.width&&(n["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(u.width)),o.height&&(n["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(o.height)),n}),y=(0,_vue.computed)(()=>{var{native:e,className:t,padding:l}=v,{yThumbHeight:i,xThumbWidth:r}=T,a=w.value,o=S.value,u=s.value,n=c.value;return domUtils.buildClass(["vxe-scrollbar","ov-x--"+(a.visible||"visible"),"ov-y--"+(o.visible||"visible"),"sx-pos--"+(u?"top":"bottom"),"sy-pos--"+(n?"left":"right"),e?"is--native":"is--virtual",t],{"is--padding":l,"ov-x--auto-hide":a.autoHide,"ov-y--auto-hide":o.autoHide,"overflow-y":i,"overflow-x":r})}),H=(0,_vue.computed)(()=>{var e=v.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",e])}),W=(0,_vue.computed)(()=>{var e=v.viewInnerClassName;return domUtils.buildClass(["vxe-scrollbar--view-inner",e])}),w=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.xConfig,v.xConfig)),S=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.yConfig,v.yConfig)),s=(0,_vue.computed)(()=>"top"===w.value.position),c=(0,_vue.computed)(()=>"left"===S.value.position),l={refElem:d},r={},D={xID:t,props:v,context:e,reactData:T,internalData:x,getRefMaps:()=>l,getComputeMaps:()=>r},N=(e,t,l)=>{i(e,createEvent(l,{$scrollbar:D},t))};t={dispatchEvent:N,scrollTo(e,t){var l=g.value;l&&(_xeUtils.default.isNumber(e)?l.scrollTo(e,t||0):l.scrollTo(e))},scrollIntoView(){var e=g.value;e&&e.scrollIntoView()},setScrollTop(e){var t=g.value;t&&(t.scrollTop=e)},setScrollLeft(e){var t=g.value;t&&(t.scrollLeft=e)},getScrollTop(){var e=g.value;return e?e.scrollTop:0},getScrollLeft(){var e=g.value;return e?e.scrollLeft:0},clearScroll(){var e=g.value;e&&(e.scrollTop=0,e.scrollLeft=0)},recalculate(){return a(),R(),(0,_vue.nextTick)()}};let a=()=>{var e,t,l=g.value;l&&(t=(t=f.value)?(0,_util.getThumbSize)(l.clientWidth,l.scrollWidth,t.clientWidth):0,(e=p.value)&&(e.style.width=t+"px"),T.xThumbWidth=t,t=(e=b.value)?(0,_util.getThumbSize)(l.clientHeight,l.scrollHeight,e.clientHeight):0,(l=_.value)&&(l.style.height=t+"px"),T.yThumbHeight=t)},R=()=>{var e,t,l,i,r=g.value;r&&({xThumbWidth:t,yThumbHeight:e}=T,i=f.value,l=p.value,i=i&&t?(0,_util.getThumbOffsetSize)(r.scrollLeft,r.clientWidth,r.scrollWidth,i.clientWidth,t):0,x.xThumbLeft=i,l&&t&&(l.style.width=t+"px",l.style.transform=`translateX(${i}px)`),t=b.value,l=_.value,i=t&&e?(0,_util.getThumbOffsetSize)(r.scrollTop,r.clientHeight,r.scrollHeight,t.clientHeight,e):0,x.yThumbTop=i,l)&&e&&(l.style.height=e+"px",l.style.transform=`translateY(${i}px)`)},L=e=>{var{xThumbWidth:t,yThumbHeight:l}=T,{lastScrollTop:i,lastScrollLeft:r}=x,a=w.value,o=S.value,{scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:v,scrollWidth:h}=e.currentTarget;let d="",g=!1,m=!1,f=!1,b=!1;i!==u&&(o=_xeUtils.default.toNumber(o.threshold)||1,i<u?(d="bottom",0<l&&v-o<=u+c&&(m=!0)):(d="top",0<l&&u<=o&&(g=!0))),r!==n&&(i=_xeUtils.default.toNumber(a.threshold)||1,r<n?(d="right",0<t&&h-i<=n+s&&(b=!0)):(d="left",0<t&&n<=i&&(f=!0))),R(),x.lastScrollTop=u,x.lastScrollLeft=n,(m||g||b||f)&&N("scroll-boundary",{direction:d,isTop:g,isBottom:m,isLeft:f,isRight:b,scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:v,scrollWidth:h},e),N("scroll",{direction:d,isTop:0<l&&u<=0,isBottom:0<l&&v<=u+c,isLeft:0<t&&n<=0,isRight:0<t&&h<=n+s,scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:v,scrollWidth:h},e)},O=e=>{var t,l,i,r=e.currentTarget;r===e.target&&(t=g.value)&&(l=T.xThumbWidth,i=r.getBoundingClientRect(),t.scrollTo({left:(0,_util.getScrollFromClick)(e.clientX-i.left,t.clientWidth,t.scrollWidth,r.clientWidth,l),behavior:"auto"}))},U=e=>{var t,l,i,r=e.currentTarget;r===e.target&&(t=g.value)&&(l=T.yThumbHeight,i=r.getBoundingClientRect(),t.scrollTo({top:(0,_util.getScrollFromClick)(e.clientY-i.top,t.clientHeight,t.scrollHeight,r.clientHeight,l),behavior:"auto"}))},z=e=>{var t,l,i=e.currentTarget,r=(x.isThumbDrag=!0,i.setPointerCapture(e.pointerId),g.value);r&&(t=T.xThumbWidth,l=(i=i.parentElement).getBoundingClientRect(),e=e.clientX-l.left,l=(0,_util.getThumbOffsetSize)(r.scrollLeft,r.clientWidth,r.scrollWidth,i.clientWidth,t),x.thumbDragOffset=e-l)},I=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:l,thumbDragOffset:i}=x;if(l){l=g.value;if(l){var r=T.xThumbWidth;let e=t.currentTarget;var a=e.parentElement,o=a.getBoundingClientRect();l.scrollLeft=(0,_util.getScrollFromDrag)(t.clientX-o.left,i,l.clientWidth,l.scrollWidth,a.clientWidth,r)}}}},B=e=>{e.currentTarget.releasePointerCapture(e.pointerId),x.isThumbDrag=!1},E=e=>{var t,l,i=e.currentTarget,r=(x.isThumbDrag=!0,i.setPointerCapture(e.pointerId),g.value);r&&(t=T.yThumbHeight,l=(i=i.parentElement).getBoundingClientRect(),e=e.clientY-l.top,l=(0,_util.getThumbOffsetSize)(r.scrollTop,r.clientHeight,r.scrollHeight,i.clientHeight,t),x.thumbDragOffset=e-l)},P=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:l,thumbDragOffset:i}=x;if(l){l=g.value;if(l){var r=T.yThumbHeight;let e=t.currentTarget;var a=e.parentElement,o=a.getBoundingClientRect();l.scrollTop=(0,_util.getScrollFromDrag)(t.clientY-o.top,i,l.clientHeight,l.scrollHeight,a.clientHeight,r)}}}};Object.assign(D,t,{});let o=(0,_vue.ref)(0);return(0,_vue.watch)(()=>v.height,()=>{o.value++}),(0,_vue.watch)(()=>v.width,()=>{o.value++}),(0,_vue.watch)(()=>v.minHeight,()=>{o.value++}),(0,_vue.watch)(()=>v.minWidth,()=>{o.value++}),(0,_vue.watch)(()=>v.maxHeight,()=>{o.value++}),(0,_vue.watch)(()=>v.maxWidth,()=>{o.value++}),(0,_vue.watch)(()=>v.native,()=>{o.value++}),(0,_vue.watch)(()=>v.syncResize,()=>{o.value++}),(0,_vue.watch)(o,()=>{D.recalculate().then(()=>{D.recalculate()})}),(0,_vue.onMounted)(()=>{var e=v.autoResize,t=g.value,l=m.value;e&&(e=globalResize.create(()=>{v.autoResize&&o.value++}),t&&e.observe(t),l&&e.observe(l),x.resizeObserver=e),o.value++}),(0,_vue.onBeforeUnmount)(()=>{var e=x.resizeObserver;e&&e.disconnect()}),D.renderVN=()=>{var{id:e,native:t,loading:l,viewAttrs:i}=v,r=C.value,a=y.value,o=H.value,u=W.value,n=w.value,s=S.value,c=h.default;return(0,_vue.h)("div",{ref:d,id:e||null,class:a,style:r},[(0,_vue.h)("div",Object.assign({ref:g,class:o,onScroll:L},i),[(0,_vue.h)("div",{key:"vi",ref:m,class:u},c?c({}):[])]),t||"hidden"===n.visible?renderEmptyElement(D):(0,_vue.h)("div",{ref:f,class:"vxe-scrollbar--track-x",onClick:O},[(0,_vue.h)("div",{ref:p,class:"vxe-scrollbar--thumb-x",onPointerdown:z,onPointermove:I,onPointerup:B,onPointercancel:B,onLostpointercapture:B})]),t||"hidden"===s.visible?renderEmptyElement(D):(0,_vue.h)("div",{ref:b,class:"vxe-scrollbar--track-y",onClick:U},[(0,_vue.h)("div",{ref:_,class:"vxe-scrollbar--thumb-y",onPointerdown:E,onPointermove:P,onPointerup:B,onPointercancel:B,onLostpointercapture:B})]),(0,_vue.h)(_loading.default,{class:"vxe-scrollbar--loading",modelValue:l})])},D},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_util=require("./util"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getConfig,createEvent,domUtils,globalResize,globalEvents,renderEmptyElement}=_ui.VxeUI;function createReactData(){return{yThumbHeight:0,xThumbWidth:0}}function createInternalData(){return{thumbDragOffset:0,yThumbTop:0,xThumbLeft:0,lastScrollTop:0,lastScrollLeft:0}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeScrollbar",props:{id:[String,Number],width:[String,Number],height:[String,Number],minWidth:[String,Number],minHeight:[String,Number],maxWidth:[String,Number],maxHeight:[String,Number],loading:Boolean,native:{type:Boolean,default:()=>getConfig().scrollbar.native},padding:{type:Boolean,default:()=>getConfig().scrollbar.padding},xConfig:Object,yConfig:Object,className:{type:String,default:()=>getConfig().scrollbar.className},viewAttrs:{type:Object,default:()=>getConfig().scrollbar.viewAttrs},viewClassName:{type:String,default:()=>getConfig().scrollbar.viewClassName},viewInnerClassName:{type:String,default:()=>getConfig().scrollbar.viewInnerClassName},autoResize:{type:Boolean,default:()=>getConfig().scrollbar.autoResize},syncResize:[Boolean,String,Number]},emits:["scroll","scroll-boundary"],setup(v,e){let{emit:i,slots:h}=e;var t=_xeUtils.default.uniqueId();let g=(0,_vue.ref)(),d=(0,_vue.ref)(),m=(0,_vue.ref)(),f=(0,_vue.ref)(),b=(0,_vue.ref)(),p=(0,_vue.ref)(),_=(0,_vue.ref)(),T=(0,_vue.reactive)(createReactData()),x=createInternalData(),C=(0,_vue.computed)(()=>{var{width:e,height:t,minWidth:l,minHeight:i,maxWidth:r,maxHeight:o}=v,a=w.value,u=S.value,n={};return e&&(n.width=(0,_dom.toCssUnit)(e)),t&&(n.height=(0,_dom.toCssUnit)(t)),l&&(n.minWidth=(0,_dom.toCssUnit)(l)),i&&(n.minHeight=(0,_dom.toCssUnit)(i)),r&&(n.maxWidth=(0,_dom.toCssUnit)(r)),o&&(n.maxHeight=(0,_dom.toCssUnit)(o)),u.width&&(n["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(u.width)),a.height&&(n["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(a.height)),n}),y=(0,_vue.computed)(()=>{var{native:e,className:t,padding:l}=v,{yThumbHeight:i,xThumbWidth:r}=T,o=w.value,a=S.value,u=s.value,n=c.value;return domUtils.buildClass(["vxe-scrollbar","ov-x--"+(o.visible||"visible"),"ov-y--"+(a.visible||"visible"),"sx-pos--"+(u?"top":"bottom"),"sy-pos--"+(n?"left":"right"),e?"is--native":"is--virtual",t],{"is--padding":l,"ov-x--auto-hide":o.autoHide,"ov-y--auto-hide":a.autoHide,"overflow-y":i,"overflow-x":r})}),H=(0,_vue.computed)(()=>{var e=v.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",e])}),W=(0,_vue.computed)(()=>{var e=v.viewInnerClassName;return domUtils.buildClass(["vxe-scrollbar--view-inner",e])}),w=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.xConfig,v.xConfig)),S=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.yConfig,v.yConfig)),s=(0,_vue.computed)(()=>"top"===w.value.position),c=(0,_vue.computed)(()=>"left"===S.value.position),l={refElem:g},r={},D={xID:t,props:v,context:e,reactData:T,internalData:x,getRefMaps:()=>l,getComputeMaps:()=>r},N=(e,t,l)=>{i(e,createEvent(l,{$scrollbar:D},t))};t={dispatchEvent:N,scrollTo(e,t){var l=d.value;l&&(_xeUtils.default.isNumber(e)?l.scrollTo(e,t||0):l.scrollTo(e))},scrollIntoView(){var e=d.value;e&&e.scrollIntoView()},setScrollTop(e){var t=d.value;t&&(t.scrollTop=e)},setScrollLeft(e){var t=d.value;t&&(t.scrollLeft=e)},getScrollTop(){var e=d.value;return e?e.scrollTop:0},getScrollLeft(){var e=d.value;return e?e.scrollLeft:0},clearScroll(){var e=d.value;e&&(e.scrollTop=0,e.scrollLeft=0)},recalculate(){return o(),R(),(0,_vue.nextTick)()}};let o=()=>{var e,t,l=d.value;l&&(t=(t=f.value)?(0,_util.getThumbSize)(l.clientWidth,l.scrollWidth,t.clientWidth):0,(e=p.value)&&(e.style.width=t+"px"),T.xThumbWidth=t,t=(e=b.value)?(0,_util.getThumbSize)(l.clientHeight,l.scrollHeight,e.clientHeight):0,(l=_.value)&&(l.style.height=t+"px"),T.yThumbHeight=t)},R=()=>{var e,t,l,i,r=d.value;r&&({xThumbWidth:t,yThumbHeight:e}=T,i=f.value,l=p.value,i=i&&t?(0,_util.getThumbOffsetSize)(r.scrollLeft,r.clientWidth,r.scrollWidth,i.clientWidth,t):0,x.xThumbLeft=i,l&&t&&(l.style.width=t+"px",l.style.transform=`translateX(${i}px)`),t=b.value,l=_.value,i=t&&e?(0,_util.getThumbOffsetSize)(r.scrollTop,r.clientHeight,r.scrollHeight,t.clientHeight,e):0,x.yThumbTop=i,l)&&e&&(l.style.height=e+"px",l.style.transform=`translateY(${i}px)`)},L=e=>{var{xThumbWidth:t,yThumbHeight:l}=T,{lastScrollTop:i,lastScrollLeft:r}=x,o=w.value,a=S.value,{scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:v,scrollWidth:h}=e.currentTarget;let g="",d=!1,m=!1,f=!1,b=!1;i!==u&&(a=_xeUtils.default.toNumber(a.threshold)||1,i<u?(g="bottom",0<l&&v-a<=u+c&&(m=!0)):(g="top",0<l&&u<=a&&(d=!0))),r!==n&&(i=_xeUtils.default.toNumber(o.threshold)||1,r<n?(g="right",0<t&&h-i<=n+s&&(b=!0)):(g="left",0<t&&n<=i&&(f=!0))),R(),x.lastScrollTop=u,x.lastScrollLeft=n,(m||d||b||f)&&N("scroll-boundary",{direction:g,isTop:d,isBottom:m,isLeft:f,isRight:b,scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:v,scrollWidth:h},e),N("scroll",{direction:g,isTop:0<l&&u<=0,isBottom:0<l&&v<=u+c,isLeft:0<t&&n<=0,isRight:0<t&&h<=n+s,scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:v,scrollWidth:h},e)},O=e=>{var t,l,i,r=e.currentTarget;r===e.target&&(t=d.value)&&(l=T.xThumbWidth,i=r.getBoundingClientRect(),t.scrollTo({left:(0,_util.getScrollFromClick)(e.clientX-i.left,t.clientWidth,t.scrollWidth,r.clientWidth,l),behavior:"auto"}))},U=e=>{var t,l,i,r=e.currentTarget;r===e.target&&(t=d.value)&&(l=T.yThumbHeight,i=r.getBoundingClientRect(),t.scrollTo({top:(0,_util.getScrollFromClick)(e.clientY-i.top,t.clientHeight,t.scrollHeight,r.clientHeight,l),behavior:"auto"}))},z=e=>{var t,l,i=e.currentTarget,r=(x.isThumbDrag=!0,i.setPointerCapture(e.pointerId),d.value);r&&(t=T.xThumbWidth,l=(i=i.parentElement).getBoundingClientRect(),e=e.clientX-l.left,l=(0,_util.getThumbOffsetSize)(r.scrollLeft,r.clientWidth,r.scrollWidth,i.clientWidth,t),x.thumbDragOffset=e-l)},E=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:l,thumbDragOffset:i}=x;if(l){l=d.value;if(l){var r=T.xThumbWidth;let e=t.currentTarget;var o=e.parentElement,a=o.getBoundingClientRect();l.scrollLeft=(0,_util.getScrollFromDrag)(t.clientX-a.left,i,l.clientWidth,l.scrollWidth,o.clientWidth,r)}}}},I=e=>{e.currentTarget.releasePointerCapture(e.pointerId),x.isThumbDrag=!1},B=e=>{var t,l,i=e.currentTarget,r=(x.isThumbDrag=!0,i.setPointerCapture(e.pointerId),d.value);r&&(t=T.yThumbHeight,l=(i=i.parentElement).getBoundingClientRect(),e=e.clientY-l.top,l=(0,_util.getThumbOffsetSize)(r.scrollTop,r.clientHeight,r.scrollHeight,i.clientHeight,t),x.thumbDragOffset=e-l)},P=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:l,thumbDragOffset:i}=x;if(l){l=d.value;if(l){var r=T.yThumbHeight;let e=t.currentTarget;var o=e.parentElement,a=o.getBoundingClientRect();l.scrollTop=(0,_util.getScrollFromDrag)(t.clientY-a.top,i,l.clientHeight,l.scrollHeight,o.clientHeight,r)}}}};Object.assign(D,t,{});let a=(0,_vue.ref)(0);return(0,_vue.watch)(()=>v.height,()=>{a.value++}),(0,_vue.watch)(()=>v.width,()=>{a.value++}),(0,_vue.watch)(()=>v.minHeight,()=>{a.value++}),(0,_vue.watch)(()=>v.minWidth,()=>{a.value++}),(0,_vue.watch)(()=>v.maxHeight,()=>{a.value++}),(0,_vue.watch)(()=>v.maxWidth,()=>{a.value++}),(0,_vue.watch)(()=>v.native,()=>{a.value++}),(0,_vue.watch)(()=>v.syncResize,()=>{a.value++}),(0,_vue.watch)(a,()=>{D.recalculate()}),(0,_vue.onMounted)(()=>{var e=v.autoResize,t=d.value,l=m.value;e&&(e=globalResize.create(()=>{v.autoResize&&a.value++}),t&&e.observe(t),l&&e.observe(l),x.resizeObserver=e),a.value++,globalEvents.on(D,"resize",()=>{a.value++})}),(0,_vue.onBeforeUnmount)(()=>{var e=x.resizeObserver;e&&e.disconnect(),globalEvents.off(D,"resize")}),D.renderVN=()=>{var{id:e,native:t,loading:l,viewAttrs:i}=v,r=C.value,o=y.value,a=H.value,u=W.value,n=w.value,s=S.value,c=h.default;return(0,_vue.h)("div",{ref:g,id:e||null,class:o,style:r},[(0,_vue.h)("div",Object.assign({ref:d,class:a,onScroll:L},i),[(0,_vue.h)("div",{key:"vi",ref:m,class:u},c?c({}):[])]),t||"hidden"===n.visible?renderEmptyElement(D):(0,_vue.h)("div",{ref:f,class:"vxe-scrollbar--track-x",onClick:O},[(0,_vue.h)("div",{ref:p,class:"vxe-scrollbar--thumb-x",onPointerdown:z,onPointermove:E,onPointerup:I,onPointercancel:I,onLostpointercapture:I})]),t||"hidden"===s.visible?renderEmptyElement(D):(0,_vue.h)("div",{ref:b,class:"vxe-scrollbar--track-y",onClick:U},[(0,_vue.h)("div",{ref:_,class:"vxe-scrollbar--thumb-y",onPointerdown:B,onPointermove:P,onPointerup:I,onPointercancel:I,onLostpointercapture:I})]),(0,_vue.h)(_loading.default,{class:"vxe-scrollbar--loading",modelValue:l})])},D},render(){return this.renderVN()}});

package/lib/space/style/style.css

@@ -37,6 +37,7 @@
 }
 .vxe-space.is--fill > .vxe-space--item {
   flex-grow: 1;
+  min-width: 100%;
 }
 
 .vxe-space--separator {

package/lib/space/style/style.min.css

@@ -1 +1 @@
-.vxe-space{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-default);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-default)}.vxe-space.size--xlarge{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-xlarge);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-xlarge)}.vxe-space.size--large{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-large);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-large)}.vxe-space.size--medium{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-medium);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-medium)}.vxe-space.size--small{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-small);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-small)}.vxe-space.size--mini{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-mini);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-mini)}.vxe-space{display:inline-flex;flex-direction:row;align-items:center;gap:var(--vxe-ui-space-current-row-gap) var(--vxe-ui-space-current-column-gap)}.vxe-space.is--wrap{flex-wrap:wrap}.vxe-space.is--vertical{flex-direction:column}.vxe-space.is--fill>.vxe-space--item{flex-grow:1}.vxe-space--separator{flex-shrink:0}
+.vxe-space{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-default);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-default)}.vxe-space.size--xlarge{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-xlarge);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-xlarge)}.vxe-space.size--large{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-large);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-large)}.vxe-space.size--medium{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-medium);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-medium)}.vxe-space.size--small{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-small);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-small)}.vxe-space.size--mini{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-mini);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-mini)}.vxe-space{display:inline-flex;flex-direction:row;align-items:center;gap:var(--vxe-ui-space-current-row-gap) var(--vxe-ui-space-current-column-gap)}.vxe-space.is--wrap{flex-wrap:wrap}.vxe-space.is--vertical{flex-direction:column}.vxe-space.is--fill>.vxe-space--item{flex-grow:1;min-width:100%}.vxe-space--separator{flex-shrink:0}