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