@farris/ui-vue/components/capsule/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(c,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("../common/index.umd.js"),require("vue")):typeof define=="function"&&define.amd?define(["exports","../common/index.umd.js","vue"],r):(c=typeof globalThis<"u"?globalThis:c||self,r(c.capsule={},c.common,c.Vue))})(this,function(c,r,t){"use strict";const C={items:{Type:Array,default:[{name:"升序",value:"asc",icon:"f-icon f-icon-col-ascendingorder"},{name:"降序",value:"desc",icon:"f-icon f-icon-col-descendingorder"}]},modelValue:{type:String,default:""},type:{type:String,default:"primary"}},b={name:{type:String,default:""},value:{type:String,default:""},isActive:{type:Boolean,default:!1},icon:{type:String,default:""},index:{type:Number,default:0},show:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},minWidth:{type:Number,default:20}},w=t.defineComponent({name:"FCapsuleItem",props:b,emits:["mounted","active"],setup(n,f){const i=t.ref(),d=t.ref(n.isActive);t.watch(()=>n.isActive,s=>{d.value=s});const m=t.computed(()=>({"f-capsule-item":!0,"f-capsule-active-item":d.value,"f-capsule-disabled":n.disabled})),u=t.computed(()=>({minWidth:`${n.minWidth}px`}));t.onMounted(()=>{f.emit("mounted",i,n.value)});function v(s){n.disabled||f.emit("active",s,{name:n.name,value:n.value})}return()=>t.createVNode("div",{ref:i,class:m.value,style:u.value,onClick:s=>v(s)},[n.icon&&t.createVNode("i",{class:n.icon},null),n.name])}}),I=t.defineComponent({name:"FCapsule",props:C,emits:["change","update:modelValue"],setup(n,f){const i=t.ref(n.items),d=t.ref(),m=2,u=t.ref(n.modelValue),v=t.ref("none"),s=t.ref(n.type),x=t.computed(()=>{const e={"f-capsule-container":!0};return s.value&&(e[s.value]=!0),e}),S=t.computed(()=>({})),N=t.computed(()=>({"f-capsule":!0})),j=t.ref(m),V=t.ref(0),y=t.ref(0),W=t.computed(()=>({left:`${j.value}px`,width:`${V.value}px`,transition:v.value})),B=t.computed(()=>({width:y.value?`${y.value}px`:"100%"})),o=new Map;function M(e){var a;if(o.has(e.value)){const l=(a=o.get(e.value))==null?void 0:a.value;if(l){const p=l.clientWidth>0?0:100;setTimeout(()=>{const O=l.getBoundingClientRect(),P=d.value.getBoundingClientRect();j.value=O.left-P.left+m+d.value.scrollLeft,V.value=O.width-2*m},p)}}}function g(e,a){const l=e.value;u.value=l,f.emit("update:modelValue",l),M(e),a&&f.emit("change",l)}function h(e){const a=i.value.findIndex(l=>l.value===e);a>-1&&g(i.value[a],!1)}t.watch(()=>n.modelValue,e=>{u.value=e,h(u.value)}),t.onMounted(async()=>{h(u.value),await t.nextTick(),v.value="0.1s ease-out all",y.value=Array.from(o.values()).reduce((e,a)=>(e+=a.value.clientWidth,e),0)});function k(e,a){g(a,!0)}function R(e,a){o.set(a,e)}function T(e){Array.from(o.keys()).forEach(a=>{e.find(p=>p.value===a)||o.delete(a)})}function F(e,a){return t.createVNode(w,{name:e.name,value:e.value,isActive:e.value===u.value,index:a,disabled:e.disabled,minWidth:e.minWidth,key:e.value,onMounted:R,onActive:k},null)}return t.watch(()=>n.items,async e=>{const a=e.filter(l=>l.show);T(a),i.value=a,await t.nextTick(),h(u.value),y.value=Array.from(o.values()).reduce((l,p)=>(l+=p.value.clientWidth,l),0)}),()=>t.createVNode("span",{ref:d,class:x.value,style:S.value},[t.createVNode("span",{class:"f-capsule-pane"},[i.value.map((e,a)=>F(e,a))]),t.createVNode("small",{class:N.value,style:W.value},null),t.createVNode("div",{class:"f-capsule-board",style:B.value},null)])}}),A=r.withInstall(I);c.FCapsule=I,c.capsuleItemProps=b,c.capsuleProps=C,c.default=A,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});