vue-amazing-ui/lib/segmented/Segmented.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),B=require("../utils/index.cjs"),x=["onClick"],z=["checked","disabled"],R=["title"],C=t.defineComponent({__name:"Segmented",props:{block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},options:{default:()=>[]},size:{default:"middle"},value:{default:void 0}},emits:["update:value","change"],setup(v,{emit:y}){const c=v,d=t.ref(),f=t.ref(),s=t.ref(),m=t.ref(0),g=t.ref(0),b=y,k=t.computed(()=>{const e={small:"2px",middle:"4px",large:"8px"};return{position:"absolute",top:0,left:`${g.value}px`,backgroundColor:"#fff",boxShadow:"0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)",width:`${m.value}px`,height:"100%",borderRadius:e[c.size],pointerEvents:"none",transition:"all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"}});t.watch(()=>c.value,async e=>{e!==s.value&&(s.value=e,await t.nextTick(),i())},{immediate:!0}),B.useResizeObserver(d,()=>{i()});function i(){var l;const e=c.options.findIndex(a=>n(a)===s.value),r=(l=f.value)==null?void 0:l[e];if(r&&d.value){const{width:a,left:p}=r.getBoundingClientRect(),{left:S}=d.value.getBoundingClientRect();m.value=a,g.value=p-S}}function h(e){e!==s.value&&(s.value=e,i(),b("update:value",e),b("change",e))}function u(e){return typeof e=="object"&&(e==null?void 0:e.disabled)||!1}function n(e){return typeof e=="object"?e.value:e}function o(e){return typeof e=="object"?e.label:e}return(e,r)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["m-segmented",{"segmented-small":e.size=="small","segmented-large":e.size=="large","segmented-block":e.block}])},[t.createElementVNode("div",{ref_key:"segmentedGroupRef",ref:d,class:"segmented-group"},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.options,(l,a)=>(t.openBlock(),t.createElementBlock("div",{ref_for:!0,ref_key:"segmentedItemRef",ref:f,class:t.normalizeClass(["segmented-item",{"segmented-item-selected":s.value===n(l),"segmented-item-disabled":e.disabled||u(l),"segmented-item-block":e.block}]),key:a,onClick:p=>e.disabled||u(l)?()=>!1:h(n(l))},[t.createElementVNode("input",{type:"radio",class:"segmented-item-input",checked:s.value===n(l),disabled:e.disabled||u(l)},null,8,z),t.createElementVNode("div",{class:"segmented-item-label",title:typeof l=="object"&&l.payload?void 0:String(o(l))},[t.renderSlot(e.$slots,"label",{option:l,label:o(l),index:a,payload:typeof l=="object"?l.payload:{}},()=>[t.createTextVNode(t.toDisplayString(o(l)),1)],!0)],8,R)],10,x))),128)),t.createElementVNode("div",{style:t.normalizeStyle(k.value)},null,4)],512)],2))}});exports.default=C;