vxe-pc-ui 4.17.19 → 4.17.21

package/lib/space/src/space.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeSpace',
+  props: {
+    size: {
+      type: String,
+      default: () => (0, _ui.getConfig)().space.size || (0, _ui.getConfig)().size
+    },
+    wrap: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().space.wrap
+    },
+    gap: {
+      type: [Number, String, Array, Object],
+      default: () => (0, _ui.getConfig)().space.gap
+    },
+    vertical: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().space.vertical
+    },
+    className: {
+      type: String,
+      default: () => (0, _ui.getConfig)().space.className
+    },
+    itemClassName: {
+      type: String,
+      default: () => (0, _ui.getConfig)().space.itemClassName
+    },
+    separator: {
+      type: String,
+      default: () => (0, _ui.getConfig)().space.separator
+    },
+    align: {
+      type: String,
+      default: () => (0, _ui.getConfig)().space.align
+    }
+  },
+  emits: [],
+  setup(props, context) {
+    const {
+      emit,
+      slots
+    } = context;
+    const xID = _xeUtils.default.uniqueId();
+    const {
+      computeSize
+    } = (0, _ui.useSize)(props);
+    const refElem = (0, _vue.ref)();
+    const reactData = (0, _vue.reactive)({
+      activeValue: null
+    });
+    const refMaps = {
+      refElem
+    };
+    const computeWrapperStyle = (0, _vue.computed)(() => {
+      const {
+        align,
+        gap
+      } = props;
+      const stys = {};
+      let rowGap = '';
+      let columGap = '';
+      if (_xeUtils.default.isNumber(gap) || _xeUtils.default.isString(gap)) {
+        rowGap = gap;
+        columGap = gap;
+      } else if (gap) {
+        if (_xeUtils.default.isArray(gap)) {
+          rowGap = gap[0];
+          columGap = gap[1];
+        } else {
+          rowGap = gap.rowGap || '';
+          columGap = gap.columGap || '';
+        }
+      }
+      if (align) {
+        stys['align-items'] = align;
+      }
+      if (!(0, _utils.eqEmptyValue)(rowGap)) {
+        stys['--vxe-ui-space-current-row-gap'] = (0, _dom.toCssUnit)(rowGap);
+      }
+      if (!(0, _utils.eqEmptyValue)(columGap)) {
+        stys['--vxe-ui-space-current-column-gap'] = (0, _dom.toCssUnit)(columGap);
+      }
+      return stys;
+    });
+    const computeMaps = {};
+    const $xeSpace = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, (0, _ui.createEvent)(evnt, {
+        $space: $xeSpace
+      }, params));
+    };
+    const spaceMethods = {
+      dispatchEvent
+    };
+    const spacePrivateMethods = {};
+    Object.assign($xeSpace, spaceMethods, spacePrivateMethods);
+    const renderItems = () => {
+      const {
+        separator,
+        itemClassName
+      } = props;
+      const itemVNs = [];
+      const defaultSlot = slots.default;
+      const separatorSlot = slots.separator;
+      if (defaultSlot) {
+        _xeUtils.default.each(defaultSlot({}), (itemVN, index, items) => {
+          itemVNs.push((0, _vue.h)('div', {
+            key: 'i' + index,
+            class: ['vxe-space--item', (0, _dom.getPropClass)(itemClassName, {
+              index
+            })]
+          }, [itemVN]));
+          if ((separator || separatorSlot) && index < items.length - 1) {
+            itemVNs.push((0, _vue.h)('div', {
+              key: 's' + index,
+              class: 'vxe-space--separator'
+            }, separatorSlot ? separatorSlot({}) : '' + separator));
+          }
+        });
+      }
+      return itemVNs;
+    };
+    const renderVN = () => {
+      const {
+        vertical,
+        wrap,
+        className
+      } = props;
+      const wrapperStyle = computeWrapperStyle.value;
+      const vSize = computeSize.value;
+      return (0, _vue.h)('div', {
+        ref: refElem,
+        class: ['vxe-space', (0, _dom.getPropClass)(className, {}), {
+          [`size--${vSize}`]: vSize,
+          'is--wrap': wrap,
+          'is--vertical': vertical
+        }],
+        style: wrapperStyle
+      }, renderItems());
+    };
+    $xeSpace.renderVN = renderVN;
+    return $xeSpace;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/space/src/space.min.js

@@ -0,0 +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"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSpace",props:{size:{type:String,default:()=>(0,_ui.getConfig)().space.size||(0,_ui.getConfig)().size},wrap:{type:Boolean,default:()=>(0,_ui.getConfig)().space.wrap},gap:{type:[Number,String,Array,Object],default:()=>(0,_ui.getConfig)().space.gap},vertical:{type:Boolean,default:()=>(0,_ui.getConfig)().space.vertical},className:{type:String,default:()=>(0,_ui.getConfig)().space.className},itemClassName:{type:String,default:()=>(0,_ui.getConfig)().space.itemClassName},separator:{type:String,default:()=>(0,_ui.getConfig)().space.separator},align:{type:String,default:()=>(0,_ui.getConfig)().space.align}},emits:[],setup(l,e){let{emit:i,slots:p}=e;var t=_xeUtils.default.uniqueId();let s=(0,_ui.useSize)(l).computeSize,u=(0,_vue.ref)();var a=(0,_vue.reactive)({activeValue:null});let r={refElem:u},o=(0,_vue.computed)(()=>{var{align:e,gap:t}=l,a={};let i="",r="";return _xeUtils.default.isNumber(t)||_xeUtils.default.isString(t)?(i=t,r=t):t&&(r=_xeUtils.default.isArray(t)?(i=t[0],t[1]):(i=t.rowGap||"",t.columGap||"")),e&&(a["align-items"]=e),(0,_utils.eqEmptyValue)(i)||(a["--vxe-ui-space-current-row-gap"]=(0,_dom.toCssUnit)(i)),(0,_utils.eqEmptyValue)(r)||(a["--vxe-ui-space-current-column-gap"]=(0,_dom.toCssUnit)(r)),a}),n={},c={xID:t,props:l,context:e,reactData:a,getRefMaps:()=>r,getComputeMaps:()=>n};Object.assign(c,{dispatchEvent:(e,t,a)=>{i(e,(0,_ui.createEvent)(a,{$space:c},t))}},{});return c.renderVN=()=>{var{vertical:e,wrap:t,className:a}=l,i=o.value,r=s.value;return(0,_vue.h)("div",{ref:u,class:["vxe-space",(0,_dom.getPropClass)(a,{}),{["size--"+r]:r,"is--wrap":t,"is--vertical":e}],style:i},(()=>{let{separator:i,itemClassName:r}=l,s=[];var e=p.default;let u=p.separator;return e&&_xeUtils.default.each(e({}),(e,t,a)=>{s.push((0,_vue.h)("div",{key:"i"+t,class:["vxe-space--item",(0,_dom.getPropClass)(r,{index:t})]},[e])),(i||u)&&t<a.length-1&&s.push((0,_vue.h)("div",{key:"s"+t,class:"vxe-space--separator"},u?u({}):""+i))}),s})())},c},render(){return this.renderVN()}});

package/lib/space/style/index.js

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

package/lib/space/style/style.css

@@ -0,0 +1,37 @@
+.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;
+}

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

@@ -0,0 +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}