@hopeio/utils/dist/ReSegmented.cjs.js

javascript utils

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),N=require("./ReIcon.cjs.js"),s=require("@pureadmin/utils"),z={options:{type:Array,default:()=>[]},modelValue:{type:void 0,require:!1,default:"0"},block:{type:Boolean,default:!1},size:{type:String},disabled:{type:Boolean,default:!1},resize:{type:Boolean,default:!1}},I=l.defineComponent({name:"ReSegmented",props:z,emits:["change","update:modelValue"],setup(t,{emit:i}){const f=l.ref(0),m=l.ref(0),{isDark:v}=s.useDark(),b=l.ref(!1),r=l.ref(-1),d=l.ref(""),c=l.getCurrentInstance(),n=s.isNumber(t.modelValue)?l.toRef(t,"modelValue"):l.ref(0);function y({option:e,index:a},u){t.disabled||e.disabled||(u.preventDefault(),s.isNumber(t.modelValue)?i("update:modelValue",a):n.value=a,d.value="",i("change",{index:a,option:e}))}function V({option:e,index:a},u){t.disabled||(u.preventDefault(),r.value=a,e.disabled||n.value===a?d.value="":d.value=v.value?"#1f1f1f":"rgba(0, 0, 0, 0.06)")}function k(e,a){t.disabled||(a.preventDefault(),r.value=-1)}function g(e=n.value){l.nextTick(()=>{var u;const a=(u=c==null?void 0:c.proxy)==null?void 0:u.$refs[`labelRef${e}`];a&&(f.value=a.clientWidth,m.value=a.offsetLeft,b.value=!0)})}function o(){s.useResizeObserver(".pure-segmented",()=>{l.nextTick(()=>{g(n.value)})})}(t.block||t.resize)&&o(),l.watch(()=>n.value,e=>{l.nextTick(()=>{g(e)})},{immediate:!0}),l.watch(()=>t.size,o,{immediate:!0});const R=()=>t.options.map((e,a)=>l.createVNode("label",{ref:`labelRef${a}`,class:["pure-segmented-item",(t.disabled||(e==null?void 0:e.disabled))&&"pure-segmented-item-disabled"],style:{background:r.value===a?d.value:"",color:t.disabled?null:!e.disabled&&(n.value===a||r.value===a)?v.value?"rgba(255, 255, 255, 0.85)":"rgba(0,0,0,.88)":""},onMouseenter:u=>V({option:e,index:a},u),onMouseleave:u=>k({},u),onClick:u=>y({option:e,index:a},u)},[l.createVNode("input",{type:"radio",name:"segmented"},null),l.withDirectives(l.createVNode("div",{class:"pure-segmented-item-label"},[e.icon&&!s.isFunction(e.label)?l.createVNode("span",{class:"pure-segmented-item-icon",style:{marginRight:e.label?"6px":0}},[l.h(N.useRenderIcon(e.icon,{...e==null?void 0:e.iconAttrs}))]):null,e.label?s.isFunction(e.label)?l.h(e.label):l.createVNode("span",null,[e.label]):null]),[[l.resolveDirective("tippy"),{content:e==null?void 0:e.tip,zIndex:41e3}]])]));return()=>l.createVNode("div",{class:{"pure-segmented":!0,"pure-segmented-block":t.block,"pure-segmented--large":t.size==="large","pure-segmented--small":t.size==="small"}},[l.createVNode("div",{class:"pure-segmented-group"},[l.createVNode("div",{class:"pure-segmented-item-selected",style:{width:`${f.value}px`,transform:`translateX(${m.value}px)`,display:b.value?"block":"none"}},null),R()])])}}),h=s.withInstall(I);exports.ReSegmented=h;exports.default=h;