UNPKG

@aotearoan/neon

Version:

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

3 lines (2 loc) 3.15 kB
"use strict";const p=require("./NeonFilter.cjs.js"),e=require("vue"),b=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),m={class:"neon-filter__title"},k=["onClick"];function f(o,n,g,V,h,v){const t=e.resolveComponent("neon-button"),r=e.resolveComponent("neon-field-group"),s=e.resolveComponent("neon-link"),d=e.resolveComponent("neon-input"),i=e.resolveComponent("neon-stack"),a=e.resolveComponent("neon-switch"),c=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createBlock(c,{modelValue:o.open,"onUpdate:modelValue":n[4]||(n[4]=l=>o.open=l),class:"neon-filter"},{"dropdown-button":e.withCtx(()=>[o.selected.length?(e.openBlock(),e.createBlock(r,{key:0,"indicator-style":"external"},{default:e.withCtx(()=>[e.createVNode(t,{color:o.color,disabled:o.disabled,label:o.computedLabel,size:o.size,title:o.editTitle,"button-style":"solid",onClick:n[0]||(n[0]=l=>o.open=!0)},null,8,["color","disabled","label","size","title"]),e.createVNode(t,{color:o.color,disabled:o.disabled,size:o.size,title:o.clearTitle,"button-style":"solid",icon:"close",onClick:o.clearSelection},null,8,["color","disabled","size","title","onClick"])]),_:1})):(e.openBlock(),e.createBlock(t,{key:1,disabled:o.disabled,label:o.computedLabel,size:o.size,"button-style":"outline",color:"high-contrast",indicator:"",onClick:n[1]||(n[1]=l=>o.open=!0)},null,8,["disabled","label","size"]))]),default:e.withCtx(()=>[e.createVNode(i,{class:"neon-filter__content"},{default:e.withCtx(()=>[e.createVNode(i,{gap:"m"},{default:e.withCtx(()=>[e.createElementVNode("span",m,e.toDisplayString(o.computedTitle),1),e.createVNode(s,{class:"neon-filter__reset-link",onClick:o.resetFilter},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.resetLabel),1)]),_:1},8,["onClick"]),e.createVNode(d,{modelValue:o.filterString,"onUpdate:modelValue":n[2]||(n[2]=l=>o.filterString=l),icon:o.filterString===""?"search":"close",placeholder:o.placeholder,color:"high-contrast",onIconClick:n[3]||(n[3]=l=>o.filterString!==""?o.filterString="":void 0)},null,8,["modelValue","icon","placeholder"])]),_:1}),e.createVNode(i,{class:"neon-filter__items",gap:"s"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.filteredItems,l=>(e.openBlock(),e.createElementBlock("div",{key:l.label,class:"neon-filter__item"},[e.createVNode(a,{disabled:l.disabled,label:l.label,"model-value":l.selected,color:"brand","switch-style":"checkbox","onUpdate:modelValue":u=>o.toggleSelected(l.label)},null,8,["disabled","label","model-value","onUpdate:modelValue"]),e.createElementVNode("span",{class:e.normalizeClass(["neon-number","neon-filter__item-count",{"neon-filter__item-count--disabled":l.disabled}]),onClick:u=>!l.disabled&&o.toggleSelected(l.label)},e.toDisplayString(o.formatNumber(l.count)),11,k)]))),128))]),_:1}),e.createVNode(t,{"button-style":o.isDirty?"solid":"outline",label:o.computedShowLabel,class:"neon-filter__cta",color:"high-contrast","full-width":"",onClick:o.ctaClick},null,8,["button-style","label","onClick"])]),_:1})]),_:1},8,["modelValue"])}const C=b(p,[["render",f]]);module.exports=C; //# sourceMappingURL=NeonFilter.vue.cjs.js.map