@aotearoan/neon/dist/components/user-input/filter/NeonFilter.cjs.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

"use strict";const l=require("vue"),V=require("../button/NeonButton.vue.cjs.js"),F=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),I=require("../field-group/NeonFieldGroup.vue.cjs.js"),U=require("../input/NeonInput.vue.cjs.js"),k=require("../../navigation/link/NeonLink.vue.cjs.js"),x=require("../../layout/stack/NeonStack.vue.cjs.js"),z=require("../switch/NeonSwitch.vue.cjs.js"),d=require("../../../utils/common/number/NeonNumberUtils.cjs.js"),T=require("../../../model/common/size/NeonSize.cjs.js"),B=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),D=l.defineComponent({name:"NeonFilter",components:{NeonButton:V,NeonDropdown:F,NeonFieldGroup:I,NeonInput:U,NeonLink:k,NeonStack:x,NeonSwitch:z},props:{modelValue:{type:Array,required:!0},label:{type:String,required:!0},color:{type:String,default:()=>B.NeonFunctionalColor.HighContrast},size:{type:String,default:()=>T.NeonSize.Small},disabled:{type:Boolean,default:!1},editTitle:{type:String,default:"Edit"},clearTitle:{type:String,default:"Clear"},resetLabel:{type:String,default:"Reset filter"},placeholder:{type:String,default:"Search"},closeLabel:{type:String,default:"Close"},showLabel:{type:String,default:"Show {count} items | Show {count} item | Show {count} items"}},emits:["close","update:modelValue"],setup(a,{emit:m}){const p=l.ref(!1),f=()=>a.modelValue.map(e=>({...e})),o=l.ref(f()),r=l.ref(""),b=l.computed(()=>{if(r.value==="")return[...o.value];const e=r.value.toLowerCase();return[...o.value.filter(t=>t.label.toLowerCase().indexOf(e)>=0)]}),u=l.computed(()=>a.modelValue.filter(e=>e.selected)),N=l.computed(()=>b.value.filter(e=>e.selected)),c=l.computed(()=>o.value.filter(e=>e.selected)),s=l.computed(()=>(c.value.length>0?c.value:o.value).map(t=>t.count).reduce((t,n)=>t+n,0)),i=l.computed(()=>!(u.value.length===N.value.length&&u.value.map(e=>e.label).every(e=>c.value.map(t=>t.label).indexOf(e)>=0))),S=()=>{o.value=o.value.map(e=>({...e,selected:!1}))},g=e=>{const t=o.value.find(n=>n.label===e);t&&(t.selected=!t.selected,o.value=[...o.value])},h=()=>{i.value&&m("update:modelValue",o.value),p.value=!1},y=l.computed(()=>a.label.split("|").map(t=>t.trim())[0]),q=l.computed(()=>{var v;const e=a.label.split("|").map(L=>L.trim()),t=u.value.length;return e[t>1?2:t].replace("{count}",d.NeonNumberUtils.formatNumber(t)).replace("{itemLabel}",(v=u.value[0])==null?void 0:v.label)}),w=l.computed(()=>{const t=a.showLabel.split("|").map(n=>n.trim())[s.value>1?2:s.value];return i.value?t.replace("{count}",d.NeonNumberUtils.formatNumber(s.value)):a.closeLabel}),C=()=>{const e=a.modelValue.map(t=>({...t,selected:!1}));m("update:modelValue",e)};return l.watch(()=>a.modelValue,()=>{o.value=f()},{deep:!0}),{open:p,filterString:r,filteredItems:b,isDirty:i,computedLabel:q,computedShowLabel:w,computedTitle:y,selected:u,clearSelection:C,resetFilter:S,toggleSelected:g,ctaClick:h,formatNumber:d.NeonNumberUtils.formatNumber}}});module.exports=D;
//# sourceMappingURL=NeonFilter.cjs.js.map