vxe-pc-ui 4.11.28 → 4.11.29

package/lib/layout-body/src/layout-body.js

@@ -7,14 +7,26 @@ exports.default = void 0;
 var _vue = require("vue");
 var _comp = require("../../ui/src/comp");
 var _ui = require("../../ui");
-var _loading = _interopRequireDefault(require("../../loading/src/loading"));
+var _loading = _interopRequireDefault(require("../../loading"));
+var _backtop = _interopRequireDefault(require("../../backtop"));
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function createInternalData() {
+  return {};
+}
+function createReactData() {
+  return {};
+}
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeLayoutBody',
   props: {
     loading: Boolean,
     padding: Boolean,
+    showBacktop: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().layoutBody.showBacktop
+    },
+    backtopConfig: Object,
     size: {
       type: String,
       default: () => (0, _ui.getConfig)().layoutBody.size || (0, _ui.getConfig)().size
@@ -27,14 +39,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       emit
     } = context;
     const xID = _xeUtils.default.uniqueId();
+    const backtopId = `vxe_layout_body_backtop_${xID}`;
     const refElem = (0, _vue.ref)();
     const {
       computeSize
     } = (0, _ui.useSize)(props);
-    const reactData = (0, _vue.reactive)({});
+    const internalData = createInternalData();
+    const reactData = (0, _vue.reactive)(createReactData());
     const refMaps = {
       refElem
     };
+    const computeBacktopOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().layoutBody.backtopConfig, props.backtopConfig, {
+        target: '#' + backtopId
+      });
+    });
     const computeMaps = {
       computeSize
     };
@@ -42,6 +61,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       xID,
       props,
       context,
+      internalData,
       reactData,
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
@@ -59,10 +79,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const renderVN = () => {
       const {
         loading,
-        padding
+        padding,
+        showBacktop
       } = props;
+      const backtopOpts = computeBacktopOpts.value;
       const vSize = computeSize.value;
       const defaultSlot = slots.default;
+      const backtopSlot = slots.backtop;
       return (0, _vue.h)('div', {
         ref: refElem,
         class: ['vxe-layout-body', {
@@ -71,6 +94,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--padding': padding
         }]
       }, [(0, _vue.h)('div', {
+        id: showBacktop ? backtopId : '',
         class: 'vxe-layout-body--inner'
       }, defaultSlot ? defaultSlot({}) : []),
       /**
@@ -79,7 +103,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       (0, _vue.h)(_loading.default, {
         class: 'vxe-list-view--loading',
         modelValue: loading
-      })]);
+      }),
+      /**
+       * 回到顶部
+       */
+      showBacktop ? (0, _vue.h)(_backtop.default, backtopOpts, backtopSlot ? {
+        default: backtopSlot
+      } : undefined) : (0, _ui.renderEmptyElement)($xeLayoutBody)]);
     };
     $xeLayoutBody.renderVN = renderVN;
     return $xeLayoutBody;

package/lib/layout-body/src/layout-body.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_loading=_interopRequireDefault(require("../../loading/src/loading")),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutBody",props:{loading:Boolean,padding:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().layoutBody.size||(0,_ui.getConfig)().size}},emits:[],setup(r,e){const{slots:o,emit:u}=e;var t=_xeUtils.default.uniqueId();const a=(0,_vue.ref)(),n=(0,_ui.useSize)(r)["computeSize"];var i=(0,_vue.reactive)({});const s={refElem:a},d={computeSize:n},l={xID:t,props:r,context:e,reactData:i,getRefMaps:()=>s,getComputeMaps:()=>d};Object.assign(l,{dispatchEvent:(e,t,i)=>{u(e,(0,_ui.createEvent)(i,{$layoutBody:l},t))}},{});return l.renderVN=()=>{var{loading:e,padding:t}=r,i=n.value,u=o.default;return(0,_vue.h)("div",{ref:a,class:["vxe-layout-body",{["size--"+i]:i,"is--loading":e,"is--padding":t}]},[(0,_vue.h)("div",{class:"vxe-layout-body--inner"},u?u({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-list-view--loading",modelValue:e})])},l},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_loading=_interopRequireDefault(require("../../loading")),_backtop=_interopRequireDefault(require("../../backtop")),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{}}function createReactData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutBody",props:{loading:Boolean,padding:Boolean,showBacktop:{type:Boolean,default:()=>(0,_ui.getConfig)().layoutBody.showBacktop},backtopConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutBody.size||(0,_ui.getConfig)().size}},emits:[],setup(n,e){const{slots:l,emit:o}=e;var t=_xeUtils.default.uniqueId();const d="vxe_layout_body_backtop_"+t,s=(0,_vue.ref)(),c=(0,_ui.useSize)(n)["computeSize"];var a=createInternalData(),i=(0,_vue.reactive)(createReactData());const u={refElem:s},p=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.backtopConfig,n.backtopConfig,{target:"#"+d})),r={computeSize:c},_={xID:t,props:n,context:e,internalData:a,reactData:i,getRefMaps:()=>u,getComputeMaps:()=>r};Object.assign(_,{dispatchEvent:(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$layoutBody:_},t))}},{});return _.renderVN=()=>{var{loading:e,padding:t,showBacktop:a}=n,o=p.value,i=c.value,u=l.default,r=l.backtop;return(0,_vue.h)("div",{ref:s,class:["vxe-layout-body",{["size--"+i]:i,"is--loading":e,"is--padding":t}]},[(0,_vue.h)("div",{id:a?d:"",class:"vxe-layout-body--inner"},u?u({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-list-view--loading",modelValue:e}),a?(0,_vue.h)(_backtop.default,o,r?{default:r}:void 0):(0,_ui.renderEmptyElement)(_)])},_},render(){return this.renderVN()}});

package/lib/mention/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VxeMention = exports.Mention = void 0;
+var _core = require("@vxe-ui/core");
+var _mention = _interopRequireDefault(require("./src/mention"));
+var _dynamics = require("../dynamics");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const VxeMention = exports.VxeMention = Object.assign({}, _mention.default, {
+  install(app) {
+    app.component(_mention.default.name, _mention.default);
+  }
+});
+_dynamics.dynamicApp.use(VxeMention);
+_core.VxeUI.component(_mention.default);
+const Mention = exports.Mention = VxeMention;
+var _default = exports.default = VxeMention;

package/lib/mention/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeMention=exports.Mention=void 0;var _core=require("@vxe-ui/core"),_mention=_interopRequireDefault(require("./src/mention")),_dynamics=require("../dynamics");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeMention=exports.VxeMention=Object.assign({},_mention.default,{install(e){e.component(_mention.default.name,_mention.default)}}),Mention=(_dynamics.dynamicApp.use(VxeMention),_core.VxeUI.component(_mention.default),exports.Mention=VxeMention);var _default=exports.default=VxeMention;

package/lib/mention/src/mention.js

@@ -0,0 +1,62 @@
+"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");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeMention',
+  props: {
+    size: {
+      type: String,
+      default: () => (0, _ui.getConfig)().mention.size || (0, _ui.getConfig)().size
+    }
+  },
+  emits: [],
+  setup(props, context) {
+    const {
+      emit
+    } = context;
+    const xID = _xeUtils.default.uniqueId();
+    const refElem = (0, _vue.ref)();
+    const reactData = (0, _vue.reactive)({});
+    const refMaps = {
+      refElem
+    };
+    const computeMaps = {};
+    const $xeMention = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, (0, _ui.createEvent)(evnt, {
+        $mention: $xeMention
+      }, params));
+    };
+    const tagMethods = {
+      dispatchEvent
+    };
+    const tagPrivateMethods = {};
+    Object.assign($xeMention, tagMethods, tagPrivateMethods);
+    const renderVN = () => {
+      return (0, _vue.h)('div', {
+        ref: refElem,
+        class: 'vxe-mention'
+      });
+    };
+    $xeMention.renderVN = renderVN;
+    return $xeMention;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/mention/src/mention.min.js

@@ -0,0 +1 @@
+"use strict";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");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeMention",props:{size:{type:String,default:()=>(0,_ui.getConfig)().mention.size||(0,_ui.getConfig)().size}},emits:[],setup(e,t){const i=t["emit"];var r=_xeUtils.default.uniqueId();const u=(0,_vue.ref)();var n=(0,_vue.reactive)({});const s={refElem:u},o={},a={xID:r,props:e,context:t,reactData:n,getRefMaps:()=>s,getComputeMaps:()=>o};Object.assign(a,{dispatchEvent:(e,t,r)=>{i(e,(0,_ui.createEvent)(r,{$mention:a},t))}},{});return a.renderVN=()=>(0,_vue.h)("div",{ref:u,class:"vxe-mention"}),a},render(){return this.renderVN()}});

package/lib/mention/style/index.js

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

package/lib/segmented/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VxeSegmented = exports.Segmented = void 0;
+var _core = require("@vxe-ui/core");
+var _segmented = _interopRequireDefault(require("./src/segmented"));
+var _dynamics = require("../dynamics");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const VxeSegmented = exports.VxeSegmented = Object.assign({}, _segmented.default, {
+  install(app) {
+    app.component(_segmented.default.name, _segmented.default);
+  }
+});
+_dynamics.dynamicApp.use(VxeSegmented);
+_core.VxeUI.component(_segmented.default);
+const Segmented = exports.Segmented = VxeSegmented;
+var _default = exports.default = VxeSegmented;

package/lib/segmented/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeSegmented=exports.Segmented=void 0;var _core=require("@vxe-ui/core"),_segmented=_interopRequireDefault(require("./src/segmented")),_dynamics=require("../dynamics");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeSegmented=exports.VxeSegmented=Object.assign({},_segmented.default,{install(e){e.component(_segmented.default.name,_segmented.default)}}),Segmented=(_dynamics.dynamicApp.use(VxeSegmented),_core.VxeUI.component(_segmented.default),exports.Segmented=VxeSegmented);var _default=exports.default=VxeSegmented;

package/lib/segmented/src/segmented.js

@@ -0,0 +1,237 @@
+"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");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function createReactData() {
+  return {
+    groupName: _xeUtils.default.uniqueId('xe_group_'),
+    selectStyle: {
+      display: '',
+      left: '',
+      width: ''
+    }
+  };
+}
+var _default = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeSegmented',
+  props: {
+    modelValue: [String, Number],
+    name: [String, Number],
+    disabled: Boolean,
+    options: Array,
+    type: {
+      type: String,
+      default: () => (0, _ui.getConfig)().segmented.type
+    },
+    status: String,
+    width: [String, Number],
+    height: [String, Number],
+    optionConfig: Object,
+    size: {
+      type: String,
+      default: () => (0, _ui.getConfig)().segmented.size || (0, _ui.getConfig)().size
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, context) {
+    const {
+      slots,
+      emit
+    } = context;
+    const xID = _xeUtils.default.uniqueId();
+    const {
+      computeSize
+    } = (0, _ui.useSize)(props);
+    const refElem = (0, _vue.ref)();
+    const refWrapperElem = (0, _vue.ref)();
+    const refSelectedElem = (0, _vue.ref)();
+    const reactData = (0, _vue.reactive)(createReactData());
+    const refMaps = {
+      refElem
+    };
+    const computeItemType = (0, _vue.computed)(() => {
+      const {
+        type
+      } = props;
+      if (type === 'round') {
+        return type;
+      }
+      if (type === 'inside') {
+        return type;
+      }
+      return 'default';
+    });
+    const computeWrapperStyle = (0, _vue.computed)(() => {
+      const {
+        width,
+        height
+      } = props;
+      const stys = {};
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      if (height) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      return stys;
+    });
+    const computeOptionOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().segmented.optionConfig, props.optionConfig);
+    });
+    const computeItemList = (0, _vue.computed)(() => {
+      return props.options || [];
+    });
+    const computeSelectIndex = (0, _vue.computed)(() => {
+      const {
+        modelValue
+      } = props;
+      const itemList = computeItemList.value;
+      return _xeUtils.default.findIndexOf(itemList, item => item.value === modelValue);
+    });
+    const comIsFullWidth = (0, _vue.computed)(() => {
+      const wrapperStyle = computeWrapperStyle.value;
+      return wrapperStyle.width === '100%';
+    });
+    const computeMaps = {};
+    const $xeSegmented = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, (0, _ui.createEvent)(evnt, {
+        $segmented: $xeSegmented
+      }, params));
+    };
+    const emitModel = value => {
+      emit('update:modelValue', value);
+    };
+    const changeEvent = (evnt, item) => {
+      const value = item.value;
+      emitModel(value);
+      dispatchEvent('change', {
+        value
+      }, evnt);
+      updateStyle();
+    };
+    const updateStyle = () => {
+      (0, _vue.nextTick)(() => {
+        const selectIndex = computeSelectIndex.value;
+        const wrapperElem = refWrapperElem.value;
+        const atStyle = {
+          display: '',
+          left: '',
+          width: ''
+        };
+        if (wrapperElem) {
+          const itemEl = wrapperElem.children[selectIndex];
+          if (itemEl) {
+            atStyle.display = 'block';
+            atStyle.left = (0, _dom.toCssUnit)(itemEl.offsetLeft);
+            atStyle.width = (0, _dom.toCssUnit)(itemEl.clientWidth);
+          }
+        }
+        reactData.selectStyle = atStyle;
+      });
+    };
+    const tagMethods = {
+      dispatchEvent
+    };
+    const tagPrivateMethods = {};
+    Object.assign($xeSegmented, tagMethods, tagPrivateMethods);
+    const renderItems = () => {
+      const {
+        modelValue,
+        name
+      } = props;
+      const {
+        groupName
+      } = reactData;
+      const optionOpts = computeOptionOpts.value;
+      const itemList = computeItemList.value;
+      const isFullWidth = comIsFullWidth.value;
+      const fullItemWidth = isFullWidth ? Math.max(0, 100 / itemList.length) : 0;
+      const defaultSlot = slots.default;
+      const itemVNs = [];
+      itemList.forEach((item, i) => {
+        const itemWidth = item.width || optionOpts.width;
+        itemVNs.push((0, _vue.h)('label', {
+          key: i,
+          class: ['vxe-segmented--item', {
+            'is--checked': modelValue === item.value
+          }],
+          style: isFullWidth || itemWidth ? {
+            width: itemWidth ? (0, _dom.toCssUnit)(itemWidth) : fullItemWidth ? `${fullItemWidth}%` : ''
+          } : undefined
+        }, [(0, _vue.h)('input', {
+          class: 'vxe-segmented--input',
+          type: 'radio',
+          name: name || groupName,
+          onChange(evnt) {
+            changeEvent(evnt, item);
+          }
+        }), (0, _vue.h)('div', {
+          class: 'vxe-segmented--content'
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-segmented--label'
+        }, defaultSlot ? defaultSlot({
+          option: item
+        }) : _xeUtils.default.eqNull(item.label) ? '' : `${item.label}`)])]));
+      });
+      return itemVNs;
+    };
+    const renderVN = () => {
+      const {
+        status
+      } = props;
+      const {
+        selectStyle
+      } = reactData;
+      const itemType = computeItemType.value;
+      const wrapperStyle = computeWrapperStyle.value;
+      const vSize = computeSize.value;
+      return (0, _vue.h)('div', {
+        ref: refElem,
+        class: ['vxe-segmented', `type--${itemType}`, {
+          [`size--${vSize}`]: vSize,
+          [`theme--${status}`]: status
+        }]
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-segmented--group',
+        style: wrapperStyle
+      }, [(0, _vue.h)('div', {
+        ref: refSelectedElem,
+        class: 'vxe-segmented--selected',
+        style: selectStyle
+      }), (0, _vue.h)('div', {
+        ref: refWrapperElem,
+        class: 'vxe-segmented--inner'
+      }, renderItems())])]);
+    };
+    (0, _vue.watch)(computeSelectIndex, () => {
+      updateStyle();
+    });
+    (0, _vue.onMounted)(() => {
+      updateStyle();
+    });
+    (0, _vue.onBeforeUnmount)(() => {
+      _xeUtils.default.assign(reactData, createReactData());
+    });
+    $xeSegmented.renderVN = renderVN;
+    return $xeSegmented;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/segmented/src/segmented.min.js

@@ -0,0 +1 @@
+"use strict";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}}function createReactData(){return{groupName:_xeUtils.default.uniqueId("xe_group_"),selectStyle:{display:"",left:"",width:""}}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSegmented",props:{modelValue:[String,Number],name:[String,Number],disabled:Boolean,options:Array,type:{type:String,default:()=>(0,_ui.getConfig)().segmented.type},status:String,width:[String,Number],height:[String,Number],optionConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().segmented.size||(0,_ui.getConfig)().size}},emits:["update:modelValue","change"],setup(v,e){const{slots:c,emit:i}=e;var t=_xeUtils.default.uniqueId();const n=(0,_ui.useSize)(v)["computeSize"],s=(0,_vue.ref)(),r=(0,_vue.ref)(),l=(0,_vue.ref)(),m=(0,_vue.reactive)(createReactData()),u={refElem:s},d=(0,_vue.computed)(()=>{var e=v["type"];return"round"===e||"inside"===e?e:"default"}),o=(0,_vue.computed)(()=>{var{width:e,height:t}=v,u={};return e&&(u.width=(0,_dom.toCssUnit)(e)),t&&(u.height=(0,_dom.toCssUnit)(t)),u}),_=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().segmented.optionConfig,v.optionConfig)),p=(0,_vue.computed)(()=>v.options||[]),a=(0,_vue.computed)(()=>{const t=v["modelValue"];var e=p.value;return _xeUtils.default.findIndexOf(e,e=>e.value===t)}),g=(0,_vue.computed)(()=>{return"100%"===o.value.width}),f={},h={xID:t,props:v,context:e,reactData:m,getRefMaps:()=>u,getComputeMaps:()=>f},x=(e,t,u)=>{i(e,(0,_ui.createEvent)(u,{$segmented:h},t))},y=(e,t)=>{var u,t=t.value;u=t,i("update:modelValue",u),x("change",{value:t},e),C()},C=()=>{(0,_vue.nextTick)(()=>{var e=a.value,t=r.value,u={display:"",left:"",width:""};t&&(t=t.children[e])&&(u.display="block",u.left=(0,_dom.toCssUnit)(t.offsetLeft),u.width=(0,_dom.toCssUnit)(t.clientWidth)),m.selectStyle=u})};t={dispatchEvent:x};Object.assign(h,t,{});return(0,_vue.watch)(a,()=>{C()}),(0,_vue.onMounted)(()=>{C()}),(0,_vue.onBeforeUnmount)(()=>{_xeUtils.default.assign(m,createReactData())}),h.renderVN=()=>{var e=v["status"],t=m["selectStyle"],u=d.value,i=o.value,a=n.value;return(0,_vue.h)("div",{ref:s,class:["vxe-segmented","type--"+u,{["size--"+a]:a,["theme--"+e]:e}]},[(0,_vue.h)("div",{class:"vxe-segmented--group",style:i},[(0,_vue.h)("div",{ref:l,class:"vxe-segmented--selected",style:t}),(0,_vue.h)("div",{ref:r,class:"vxe-segmented--inner"},(()=>{const{modelValue:i,name:a}=v,n=m["groupName"],s=_.value;var e=p.value;const r=g.value,l=r?Math.max(0,100/e.length):0,d=c.default,o=[];return e.forEach((t,e)=>{var u=t.width||s.width;o.push((0,_vue.h)("label",{key:e,class:["vxe-segmented--item",{"is--checked":i===t.value}],style:r||u?{width:u?(0,_dom.toCssUnit)(u):l?l+"%":""}:void 0},[(0,_vue.h)("input",{class:"vxe-segmented--input",type:"radio",name:a||n,onChange(e){y(e,t)}}),(0,_vue.h)("div",{class:"vxe-segmented--content"},[(0,_vue.h)("div",{class:"vxe-segmented--label"},d?d({option:t}):_xeUtils.default.eqNull(t.label)?"":""+t.label)])]))}),o})())])])},h},render(){return this.renderVN()}});

package/lib/segmented/style/index.js

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

package/lib/segmented/style/style.css

@@ -0,0 +1,195 @@
+.vxe-segmented {
+  display: block;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+}
+
+.vxe-segmented--group {
+  display: inline-flex;
+  position: relative;
+  background-color: var(--vxe-ui-segmented-item-background-color);
+}
+
+.vxe-segmented--inner {
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+}
+
+.vxe-segmented--item {
+  display: block;
+  padding: 0 0.8em;
+  margin: 0;
+}
+.vxe-segmented--item:not(.is--disabled) {
+  cursor: pointer;
+}
+
+.vxe-segmented--input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  pointer-events: none;
+}
+
+.vxe-segmented--content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  transition: color 0.3s;
+}
+
+.vxe-segmented--label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-segmented--selected {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  transition: all 0.3s;
+  pointer-events: none;
+}
+
+.vxe-segmented.type--round .vxe-segmented--group {
+  border-radius: 1em;
+}
+.vxe-segmented.type--round .vxe-segmented--selected {
+  border-radius: 1em;
+}
+.vxe-segmented.type--round .vxe-segmented--item:hover {
+  border-radius: 1em;
+}
+.vxe-segmented.type--default .vxe-segmented--content, .vxe-segmented.type--round .vxe-segmented--content {
+  min-height: 2em;
+}
+.vxe-segmented.type--default .vxe-segmented--item:hover, .vxe-segmented.type--round .vxe-segmented--item:hover {
+  background-color: var(--vxe-ui-segmented-item-hover-background-color);
+}
+.vxe-segmented.type--default .vxe-segmented--item.is--checked .vxe-segmented--content, .vxe-segmented.type--round .vxe-segmented--item.is--checked .vxe-segmented--content {
+  color: #fff;
+}
+.vxe-segmented.type--default .vxe-segmented--selected, .vxe-segmented.type--round .vxe-segmented--selected {
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-segmented.type--default.theme--primary .vxe-segmented--group, .vxe-segmented.type--round.theme--primary .vxe-segmented--group {
+  background-color: var(--vxe-ui-font-primary-tinge-color);
+}
+.vxe-segmented.type--default.theme--primary .vxe-segmented--selected, .vxe-segmented.type--round.theme--primary .vxe-segmented--selected {
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-segmented.type--default.theme--primary .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--primary .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default.theme--success .vxe-segmented--group, .vxe-segmented.type--round.theme--success .vxe-segmented--group {
+  background-color: var(--vxe-ui-status-success-tinge-color);
+}
+.vxe-segmented.type--default.theme--success .vxe-segmented--selected, .vxe-segmented.type--round.theme--success .vxe-segmented--selected {
+  background-color: var(--vxe-ui-status-success-color);
+}
+.vxe-segmented.type--default.theme--success .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--success .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default.theme--info .vxe-segmented--group, .vxe-segmented.type--round.theme--info .vxe-segmented--group {
+  background-color: var(--vxe-ui-status-info-tinge-color);
+}
+.vxe-segmented.type--default.theme--info .vxe-segmented--selected, .vxe-segmented.type--round.theme--info .vxe-segmented--selected {
+  background-color: var(--vxe-ui-status-info-color);
+}
+.vxe-segmented.type--default.theme--info .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--info .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default.theme--warning .vxe-segmented--group, .vxe-segmented.type--round.theme--warning .vxe-segmented--group {
+  background-color: var(--vxe-ui-status-warning-tinge-color);
+}
+.vxe-segmented.type--default.theme--warning .vxe-segmented--selected, .vxe-segmented.type--round.theme--warning .vxe-segmented--selected {
+  background-color: var(--vxe-ui-status-warning-color);
+}
+.vxe-segmented.type--default.theme--warning .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--warning .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default.theme--danger .vxe-segmented--group, .vxe-segmented.type--round.theme--danger .vxe-segmented--group {
+  background-color: var(--vxe-ui-status-danger-tinge-color);
+}
+.vxe-segmented.type--default.theme--danger .vxe-segmented--selected, .vxe-segmented.type--round.theme--danger .vxe-segmented--selected {
+  background-color: var(--vxe-ui-status-danger-color);
+}
+.vxe-segmented.type--default.theme--danger .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--danger .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default.theme--error .vxe-segmented--group, .vxe-segmented.type--round.theme--error .vxe-segmented--group {
+  background-color: var(--vxe-ui-status-error-tinge-color);
+}
+.vxe-segmented.type--default.theme--error .vxe-segmented--selected, .vxe-segmented.type--round.theme--error .vxe-segmented--selected {
+  background-color: var(--vxe-ui-status-error-color);
+}
+.vxe-segmented.type--default.theme--error .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--error .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default .vxe-segmented--group, .vxe-segmented.type--inside .vxe-segmented--group {
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+.vxe-segmented.type--default .vxe-segmented--selected, .vxe-segmented.type--inside .vxe-segmented--selected {
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+.vxe-segmented.type--inside .vxe-segmented--content {
+  min-height: 1.6em;
+}
+.vxe-segmented.type--inside .vxe-segmented--inner {
+  padding: 0.2em;
+}
+.vxe-segmented.type--inside .vxe-segmented--item:hover .vxe-segmented--content {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-segmented.type--inside .vxe-segmented--item.is--checked .vxe-segmented--content {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-segmented.type--inside .vxe-segmented--selected {
+  top: 0.2em;
+  height: calc(100% - 0.4em);
+  background-color: #fff;
+}
+.vxe-segmented.type--inside.theme--primary .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-font-primary-tinge-color);
+}
+.vxe-segmented.type--inside.theme--success .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-status-success-tinge-color);
+}
+.vxe-segmented.type--inside.theme--info .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-status-info-tinge-color);
+}
+.vxe-segmented.type--inside.theme--warning .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-status-warning-tinge-color);
+}
+.vxe-segmented.type--inside.theme--danger .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-status-danger-tinge-color);
+}
+.vxe-segmented.type--inside.theme--error .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-status-error-tinge-color);
+}
+
+.vxe-segmented {
+  font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-segmented.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-segmented.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-segmented.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}