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

A vue based PC component library

"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(c,e){const{slots:m,emit:i}=e;var t=_xeUtils.default.uniqueId();const n=(0,_ui.useSize)(c)["computeSize"],s=(0,_vue.ref)(),r=(0,_vue.ref)(),l=(0,_vue.ref)(),_=(0,_vue.reactive)(createReactData()),u={refElem:s},d=(0,_vue.computed)(()=>{var e=c["type"];return"round"===e||"inside"===e?e:"default"}),o=(0,_vue.computed)(()=>{var{width:e,height:t}=c,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,c.optionConfig)),g=(0,_vue.computed)(()=>c.options||[]),a=(0,_vue.computed)(()=>{const t=c["modelValue"];var e=g.value;return _xeUtils.default.findIndexOf(e,e=>e.value===t)}),f=(0,_vue.computed)(()=>{return"100%"===o.value.width}),v={},h={xID:t,props:c,context:e,reactData:_,getRefMaps:()=>u,getComputeMaps:()=>v},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)),_.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(_,createReactData())}),h.renderVN=()=>{var e=c["status"],t=_["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:a,name:n}=c,s=_["groupName"],r=p.value;var e=g.value;const l=f.value,d=l?Math.max(0,100/e.length):0,o=m.default,v=[];return e.forEach((t,e)=>{var{icon:u,width:i}=t,i=i||r.width;v.push((0,_vue.h)("label",{key:e,class:["vxe-segmented--item",{"is--checked":a===t.value}],style:l||i?{width:i?(0,_dom.toCssUnit)(i):d?d+"%":""}:void 0},[(0,_vue.h)("input",{class:"vxe-segmented--input",type:"radio",name:n||s,onChange(e){y(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()}});