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

Farris Vue, a Farris Design based Vue3 component library.

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