vxe-pc-ui/lib/segmented/src/segmented.min.js

A vue based PC component library

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(m,e){let{slots:c,emit:i}=e;var t=_xeUtils.default.uniqueId();let n=(0,_ui.useSize)(m).computeSize,l=(0,_vue.ref)(),s=(0,_vue.ref)(),r=(0,_vue.ref)(),_=(0,_vue.reactive)(createReactData()),u={refElem:l},d=(0,_vue.computed)(()=>{var e=m.type;return"round"===e||"inside"===e?e:"default"}),o=(0,_vue.computed)(()=>{var{width:e,height:t}=m,u={};return e&&(u.width=(0,_dom.toCssUnit)(e)),t&&(u.height=(0,_dom.toCssUnit)(t)),u}),p=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().segmented.optionConfig,m.optionConfig)),g=(0,_vue.computed)(()=>m.options||[]),a=(0,_vue.computed)(()=>{let t=m.modelValue;var e=g.value;return _xeUtils.default.findIndexOf(e,e=>e.value===t)}),f=(0,_vue.computed)(()=>"100%"===o.value.width),v={},h={xID:t,props:m,context:e,reactData:_,getRefMaps:()=>u,getComputeMaps:()=>v},x=(e,t,u)=>{i(e,(0,_ui.createEvent)(u,{$segmented:h},t))},y=e=>{i("update:modelValue",e)},C=(e,t)=>{t=t.value;y(t),x("change",{value:t},e),b()},b=()=>{(0,_vue.nextTick)(()=>{var e=a.value,t=s.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)),_.selectStyle=u})};t={dispatchEvent:x};Object.assign(h,t,{});return(0,_vue.watch)(a,()=>{b()}),(0,_vue.onMounted)(()=>{b()}),(0,_vue.onBeforeUnmount)(()=>{_xeUtils.default.assign(_,createReactData())}),h.renderVN=()=>{var e=m.status,t=_.selectStyle,u=d.value,i=o.value,a=n.value;return(0,_vue.h)("div",{ref:l,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:r,class:"vxe-segmented--selected",style:t}),(0,_vue.h)("div",{ref:s,class:"vxe-segmented--inner"},(()=>{let{modelValue:a,name:n}=m,l=_.groupName,s=p.value;var e=g.value;let r=f.value,d=r?Math.max(0,100/e.length):0,o=c.default,v=[];return e.forEach((t,e)=>{var{icon:u,width:i}=t,i=i||s.width;v.push((0,_vue.h)("label",{key:e,class:["vxe-segmented--item",{"is--checked":a===t.value}],style:r||i?{width:i?(0,_dom.toCssUnit)(i):d?d+"%":""}:void 0},[(0,_vue.h)("input",{class:"vxe-segmented--input",type:"radio",name:n||l,onChange(e){C(e,t)}}),(0,_vue.h)("div",{class:"vxe-segmented--content"},[u?(0,_vue.h)("div",{class:"vxe-segmented--icon"},[(0,_vue.h)("i",{class:u})]):(0,_ui.renderEmptyElement)(h),(0,_vue.h)("div",{class:"vxe-segmented--label"},o?o({option:t}):_xeUtils.default.eqNull(t.label)?"":""+t.label)])]))}),v})())])])},h},render(){return this.renderVN()}});