@phila/phila-ui-filter-chip 1.0.0-beta.9 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/FilterChipDropdownPanel.vue.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +163 -163
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterChipDropdownPanel.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipDropdownPanel.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FilterChipDropdownPanel.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipDropdownPanel.vue"],"names":[],"mappings":"AA2QA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6EAA6E;IAC7E,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;;;;;;;;;;;;iBARc,OAAO;YAKZ,OAAO;eACJ,MAAM;eACN,MAAM;;AA2RtB,wBASG"}
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.phila-filter-chip[data-v-40c7e692]{display:inline-flex;align-items:center;height:var(--scale-350, 1.75rem);cursor:pointer;border-style:solid;border-radius:var(--border-radius-l);white-space:nowrap;box-sizing:border-box;appearance:none;text-decoration:none;padding:var(--scale-25) var(--scale-75);gap:var(--spacing-xs);border-width:var(--border-width-s)}.phila-filter-chip.is-extra-large[data-v-40c7e692]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-large[data-v-40c7e692]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs)}.phila-filter-chip.is-small[data-v-40c7e692]{height:var(--scale-250, 1.25rem);padding:var(--scale-10) var(--spacing-2xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-icon-only[data-v-40c7e692]{padding-left:var(--spacing-s, .75rem);padding-right:var(--spacing-s, .75rem)}.phila-filter-chip.phila-filter-chip--blue[data-v-40c7e692]{color:var(--Schemes-Inverse-Primary);border-color:var(--Schemes-Inverse-Primary);background:var(--Schemes-Info-Container)}.phila-filter-chip.phila-filter-chip--blue.is-active[data-v-40c7e692]{background:var(--Palettes-Secondary-Secondary-150);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Tertiary-Tertiary-100)}.phila-filter-chip.phila-filter-chip--blue[data-v-40c7e692]:hover:not(:disabled){background:var(--Palettes-Secondary-Secondary-600);color:var(--Palettes-Tertiary-Tertiary-50);border-color:var(--Palettes-Tertiary-Tertiary-100)}.phila-filter-chip.phila-filter-chip--grey[data-v-40c7e692]{color:var(--Palettes-Neutral-Variant-Neutral-Variant-200);border-color:var(--Schemes-Border-low);background:var(--Palettes-Neutral-Neutral-700)}.phila-filter-chip.phila-filter-chip--grey.is-active[data-v-40c7e692]{background:var(--Palettes-Neutral-Neutral-100);color:var(--Schemes-On-Primary);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--grey[data-v-40c7e692]:hover:not(:disabled){background:var(--Palettes-Neutral-Neutral-600);color:var(--Palettes-Neutral-Variant-Neutral-Variant-50);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--green[data-v-40c7e692]{color:var(--Palettes-Success-Success-100);border-color:var(--Palettes-Success-Success-150);background:var(--Palettes-Success-Success-700)}.phila-filter-chip.phila-filter-chip--green.is-active[data-v-40c7e692]{background:var(--Palettes-Success-Success-200);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Success-Success-200)}.phila-filter-chip.phila-filter-chip--green[data-v-40c7e692]:hover:not(:disabled){background:var(--Palettes-Success-Success-600);color:var(--Palettes-Success-Success-100);border-color:var(--Palettes-Success-Success-150)}.phila-filter-chip.phila-filter-chip--red[data-v-40c7e692]{color:var(--Schemes-On-Error-Container);border-color:var(--Schemes-On-Error-Container);background:var(--Schemes-Error-Container)}.phila-filter-chip.phila-filter-chip--red.is-active[data-v-40c7e692]{background:var(--Palettes-Error-Error-250);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Error-Error-150)}.phila-filter-chip.phila-filter-chip--red[data-v-40c7e692]:hover:not(:disabled){background:var(--Palettes-Error-Error-650);color:var(--Palettes-Error-Error-200);border-color:var(--Palettes-Error-Error-150)}.phila-filter-chip.phila-filter-chip--white[data-v-40c7e692]{color:var(--Palettes-Neutral-Variant-Neutral-Variant-200);border-color:var(--Schemes-Border-low);background:var(--Schemes-On-Primary)}.phila-filter-chip.phila-filter-chip--white.is-active[data-v-40c7e692]{background:var(--Palettes-Neutral-Neutral-100);color:var(--Schemes-On-Primary);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--white[data-v-40c7e692]:hover:not(:disabled){background:var(--Schemes-Surface-Container-Lowest);color:var(--Schemes-Inverse-Surface);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--yellow[data-v-40c7e692]{color:var(--Schemes-On-Alert-Container);border-color:var(--Palettes-Alert-Alert-150);background:var(--Palettes-Alert-Alert-700)}.phila-filter-chip.phila-filter-chip--yellow.is-active[data-v-40c7e692]{background:var(--Palettes-Alert-Alert-250);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Alert-Alert-150)}.phila-filter-chip.phila-filter-chip--yellow[data-v-40c7e692]:hover:not(:disabled){background:var(--Palettes-Alert-Alert-550);color:var(--Schemes-On-Alert-Container);border-color:var(--Palettes-Alert-Alert-150)}.phila-filter-chip[data-v-40c7e692]:focus-visible{outline:2px solid currentColor;outline-offset:var(--spacing-2xs)}.phila-filter-chip[data-v-40c7e692] .icon{color:var(--chip-icon-color, currentColor)}.phila-filter-chip[data-v-40c7e692] .icon path{fill:var(--chip-icon-color, currentColor)}.phila-filter-chip-panel{position:fixed;z-index:1000;min-width:12rem;background:var(--Schemes-Background);border:var(--border-width-s) solid var(--Schemes-Border);border-radius:var(--border-radius-s);box-shadow:0 4px 8px #0000001a;
|
|
1
|
+
.phila-filter-chip[data-v-40c7e692]{display:inline-flex;align-items:center;height:var(--scale-350, 1.75rem);cursor:pointer;border-style:solid;border-radius:var(--border-radius-l);white-space:nowrap;box-sizing:border-box;appearance:none;text-decoration:none;padding:var(--scale-25) var(--scale-75);gap:var(--spacing-xs);border-width:var(--border-width-s)}.phila-filter-chip.is-extra-large[data-v-40c7e692]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-large[data-v-40c7e692]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs)}.phila-filter-chip.is-small[data-v-40c7e692]{height:var(--scale-250, 1.25rem);padding:var(--scale-10) var(--spacing-2xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-icon-only[data-v-40c7e692]{padding-left:var(--spacing-s, .75rem);padding-right:var(--spacing-s, .75rem)}.phila-filter-chip.phila-filter-chip--blue[data-v-40c7e692]{color:var(--Schemes-Inverse-Primary);border-color:var(--Schemes-Inverse-Primary);background:var(--Schemes-Info-Container)}.phila-filter-chip.phila-filter-chip--blue.is-active[data-v-40c7e692]{background:var(--Palettes-Secondary-Secondary-150);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Tertiary-Tertiary-100)}.phila-filter-chip.phila-filter-chip--blue[data-v-40c7e692]:hover:not(:disabled){background:var(--Palettes-Secondary-Secondary-600);color:var(--Palettes-Tertiary-Tertiary-50);border-color:var(--Palettes-Tertiary-Tertiary-100)}.phila-filter-chip.phila-filter-chip--grey[data-v-40c7e692]{color:var(--Palettes-Neutral-Variant-Neutral-Variant-200);border-color:var(--Schemes-Border-low);background:var(--Palettes-Neutral-Neutral-700)}.phila-filter-chip.phila-filter-chip--grey.is-active[data-v-40c7e692]{background:var(--Palettes-Neutral-Neutral-100);color:var(--Schemes-On-Primary);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--grey[data-v-40c7e692]:hover:not(:disabled){background:var(--Palettes-Neutral-Neutral-600);color:var(--Palettes-Neutral-Variant-Neutral-Variant-50);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--green[data-v-40c7e692]{color:var(--Palettes-Success-Success-100);border-color:var(--Palettes-Success-Success-150);background:var(--Palettes-Success-Success-700)}.phila-filter-chip.phila-filter-chip--green.is-active[data-v-40c7e692]{background:var(--Palettes-Success-Success-200);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Success-Success-200)}.phila-filter-chip.phila-filter-chip--green[data-v-40c7e692]:hover:not(:disabled){background:var(--Palettes-Success-Success-600);color:var(--Palettes-Success-Success-100);border-color:var(--Palettes-Success-Success-150)}.phila-filter-chip.phila-filter-chip--red[data-v-40c7e692]{color:var(--Schemes-On-Error-Container);border-color:var(--Schemes-On-Error-Container);background:var(--Schemes-Error-Container)}.phila-filter-chip.phila-filter-chip--red.is-active[data-v-40c7e692]{background:var(--Palettes-Error-Error-250);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Error-Error-150)}.phila-filter-chip.phila-filter-chip--red[data-v-40c7e692]:hover:not(:disabled){background:var(--Palettes-Error-Error-650);color:var(--Palettes-Error-Error-200);border-color:var(--Palettes-Error-Error-150)}.phila-filter-chip.phila-filter-chip--white[data-v-40c7e692]{color:var(--Palettes-Neutral-Variant-Neutral-Variant-200);border-color:var(--Schemes-Border-low);background:var(--Schemes-On-Primary)}.phila-filter-chip.phila-filter-chip--white.is-active[data-v-40c7e692]{background:var(--Palettes-Neutral-Neutral-100);color:var(--Schemes-On-Primary);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--white[data-v-40c7e692]:hover:not(:disabled){background:var(--Schemes-Surface-Container-Lowest);color:var(--Schemes-Inverse-Surface);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--yellow[data-v-40c7e692]{color:var(--Schemes-On-Alert-Container);border-color:var(--Palettes-Alert-Alert-150);background:var(--Palettes-Alert-Alert-700)}.phila-filter-chip.phila-filter-chip--yellow.is-active[data-v-40c7e692]{background:var(--Palettes-Alert-Alert-250);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Alert-Alert-150)}.phila-filter-chip.phila-filter-chip--yellow[data-v-40c7e692]:hover:not(:disabled){background:var(--Palettes-Alert-Alert-550);color:var(--Schemes-On-Alert-Container);border-color:var(--Palettes-Alert-Alert-150)}.phila-filter-chip[data-v-40c7e692]:focus-visible{outline:2px solid currentColor;outline-offset:var(--spacing-2xs)}.phila-filter-chip[data-v-40c7e692] .icon{color:var(--chip-icon-color, currentColor)}.phila-filter-chip[data-v-40c7e692] .icon path{fill:var(--chip-icon-color, currentColor)}.phila-filter-chip-panel{position:fixed;z-index:1000;min-width:12rem;background:var(--Schemes-Background);border:var(--border-width-s) solid var(--Schemes-Border);border-radius:var(--border-radius-s);box-shadow:0 4px 8px #0000001a;display:flex;flex-direction:column;overflow:hidden}.phila-filter-chip-panel__body{flex:0 1 auto;min-height:0;overflow-y:auto;padding:var(--spacing-s, .75rem)}.phila-filter-chip-panel__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-s, .75rem);flex-shrink:0;padding:var(--spacing-s, .75rem);border-top:var(--border-width-s) solid var(--Schemes-Border)}.phila-filter-chip-sheet__scrim{position:fixed;inset:0;z-index:1000;background:#0000004d}.phila-filter-chip-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1001;background:var(--Schemes-Background);border-top-left-radius:var(--border-radius-l, 1rem);border-top-right-radius:var(--border-radius-l, 1rem);box-shadow:0 -4px 16px #00000026;display:flex;flex-direction:column;max-height:80vh;overflow:hidden;box-sizing:border-box}.phila-filter-chip-sheet__header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:var(--spacing-m, 1rem) var(--spacing-m, 1rem) var(--spacing-s, .75rem)}.phila-filter-chip-sheet__body{flex:1;min-height:0;overflow-y:auto;padding:0 var(--spacing-m, 1rem) var(--spacing-m, 1rem)}.phila-filter-chip-sheet__title{font-weight:700;font-family:var(--Body-Default-font-body-default-family, "Montserrat", sans-serif)}.phila-filter-chip-sheet__footer{display:flex;gap:var(--spacing-s, .75rem);flex-shrink:0;padding:var(--spacing-s, .75rem) var(--spacing-m, 1rem) var(--spacing-m, 1rem);border-top:var(--border-width-s) solid var(--Schemes-Border)}.phila-filter-chip-sheet__footer>*{flex:1}.phila-filter-chip-sheet__close{background:none;border:none;cursor:pointer;font-size:1.25rem;line-height:1;padding:0;color:var(--Schemes-On-Surface, inherit)}.phila-filter-chip-sheet .labels-container,.phila-filter-chip-panel .labels-container{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.phila-filter-chip-panel .phila-filter-chip-panel__reset{background:none;border:none;padding:0;cursor:pointer;color:var(--Schemes-Primary);text-decoration:underline;font-weight:600}.phila-filter-chip-panel .phila-filter-chip-panel__reset:focus-visible{outline:2px solid var(--Schemes-Primary);outline-offset:2px}.phila-filter-chip-group[data-v-b84936b9]{display:flex;flex-direction:column;gap:var(--spacing-2xs)}.phila-filter-chip-group__viewport[data-v-b84936b9]{position:relative}.phila-filter-chip-group__label[data-v-b84936b9]{padding-inline:var(--spacing-m)}.phila-filter-chip-group__row[data-v-b84936b9]{display:flex;flex-wrap:nowrap;gap:var(--spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-inline:var(--spacing-m)}.phila-filter-chip-group__row[data-v-b84936b9]::-webkit-scrollbar{display:none}.phila-filter-chip-group__arrow[data-v-b84936b9]{position:absolute;top:50%;transform:translateY(-50%);z-index:1;display:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border-radius:50%;border:var(--border-width-s) solid var(--Schemes-Border);background:var(--Schemes-Background);color:var(--Schemes-On-Surface);box-shadow:0 6px 8px -2px #00000059;cursor:pointer}.phila-filter-chip-group__arrow--left[data-v-b84936b9]{left:var(--spacing-m)}.phila-filter-chip-group__arrow--right[data-v-b84936b9]{right:var(--spacing-m)}@media(hover:hover)and (pointer:fine){.phila-filter-chip-group__viewport:hover .phila-filter-chip-group__arrow[data-v-b84936b9]{display:flex}}.phila-filter-chip-group.is-elevated[data-v-b84936b9] .phila-filter-chip{box-shadow:0 2px 4px #0003}.phila-filter-chip-group.is-elevated .phila-filter-chip-group__row[data-v-b84936b9]{padding-top:2px;padding-bottom:8px}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),C=require("@phila/phila-ui-core"),S=require("@phila/phila-ui-core/icons"),U=require("@phila/phila-ui-radio"),L=require("@phila/phila-ui-checkbox"),I=require("@phila/phila-ui-button"),j=["aria-pressed","aria-expanded"],O="xxsmall",R=e.defineComponent({__name:"FilterChipBase",props:{text:{default:void 0},size:{default:"medium"},color:{default:"blue"},icon:{type:[Function,Object],default:void 0},iconColor:{default:void 0},trailingIcon:{type:[Function,Object],default:void 0},iconOnly:{type:Boolean,default:!1},active:{type:Boolean,default:!1},chevron:{type:Boolean,default:!1},ariaPressed:{type:Boolean},ariaExpanded:{type:Boolean}},emits:["click"],setup(t,{expose:s}){const l=t,n=e.ref(null),d=e.computed(()=>C.cn("phila-filter-chip",`phila-filter-chip--${l.color}`,l.size!=="medium"&&`is-${l.size}`,"has-text-body-"+f(l.size),l.active&&"is-active",l.iconOnly&&"is-icon-only"));s({el:n});const f=c=>{switch(c){case"extra-large":return"default";case"large":return"small";default:return"extra-small"}};return(c,y)=>(e.openBlock(),e.createElementBlock("button",{ref_key:"rootEl",ref:n,type:"button",class:e.normalizeClass(d.value),style:e.normalizeStyle(t.iconColor?{"--chip-icon-color":t.iconColor}:void 0),"aria-pressed":t.ariaPressed,"aria-expanded":t.ariaExpanded,onClick:y[0]||(y[0]=v=>c.$emit("click",v))},[e.createVNode(e.unref(C.ActionContent),{icon:t.icon,size:t.size,inline:"","icon-size":O,"icon-only":t.iconOnly},{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)],!0)]),_:3},8,["icon","size","icon-only"]),t.chevron?(e.openBlock(),e.createBlock(e.unref(C.Icon),{key:0,icon:e.unref(S.IconChevronDown),size:"xxsmall",inline:"",decorative:"",class:"phila-filter-chip__chevron"},null,8,["icon"])):t.trailingIcon?(e.openBlock(),e.createBlock(e.unref(C.Icon),{key:1,icon:t.trailingIcon,size:O,inline:"",decorative:""},null,8,["icon"])):e.createCommentVNode("",!0)],14,j))}}),A=(t,s)=>{const l=t.__vccOpts||t;for(const[n,d]of s)l[n]=d;return l},T=A(R,[["__scopeId","data-v-40c7e692"]]),M=["id","aria-label"],q={key:0,class:"phila-filter-chip-sheet__header"},G={class:"phila-filter-chip-sheet__title"},H={key:0,class:"phila-filter-chip-sheet__footer"},W={key:1,class:"phila-filter-chip-panel__footer"},X=e.defineComponent({__name:"FilterChipDropdownPanel",props:{menuId:{},label:{},choices:{},multiple:{type:Boolean},value:{},showActions:{type:Boolean,default:!1},top:{},left:{},mobile:{type:Boolean,default:!1},applyText:{default:"Apply"},resetText:{default:"Reset"}},emits:["update:modelValue","apply","reset","close"],setup(t,{emit:s}){const l=t,n=s;function d(u){return Object.fromEntries(l.choices.map(h=>[h.value,!!u[h.value]]))}const f=e.ref(d(l.value));e.watch(()=>l.value,u=>f.value=d(u));const c=e.computed(()=>l.showActions?f.value:d(l.value)),y=e.computed(()=>Object.values(c.value).filter(Boolean).length),v=e.computed(()=>y.value>0?`${l.applyText} (${y.value})`:l.applyText),k=e.computed(()=>l.choices.map(u=>({text:u.text,value:u.value,tooltip:u.tooltip})));function p(u){l.showActions?f.value=u:n("update:modelValue",u)}const m=()=>{f.value=Object.fromEntries(l.choices.map(u=>[u.value,!1])),n("reset")},g=()=>n("apply",{...f.value}),V=e.computed(()=>({top:l.top+"px",left:l.left+"px",maxHeight:`calc(100dvh - ${l.top}px - 0.5rem)`}));return(u,h)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[t.mobile?(e.openBlock(),e.createElementBlock("div",{key:0,class:"phila-filter-chip-sheet__scrim",onClick:h[0]||(h[0]=b=>n("close"))})):e.createCommentVNode("",!0),e.createElementVNode("div",{id:t.menuId,class:e.normalizeClass(t.mobile?"phila-filter-chip-sheet":"phila-filter-chip-panel"),role:"dialog","aria-label":t.label,style:e.normalizeStyle(t.mobile?void 0:V.value)},[t.mobile?(e.openBlock(),e.createElementBlock("header",q,[e.createElementVNode("span",G,e.toDisplayString(t.label),1),e.createElementVNode("button",{type:"button",class:"phila-filter-chip-sheet__close","aria-label":"Close",onClick:h[1]||(h[1]=b=>n("close"))}," ✕ ")])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass({"phila-filter-chip-sheet__body":t.mobile})},[t.multiple?(e.openBlock(),e.createBlock(e.unref(L.CheckboxGroup),{key:0,"group-label":t.label,choices:k.value,"model-value":c.value,"onUpdate:modelValue":p},null,8,["group-label","choices","model-value"])):(e.openBlock(),e.createBlock(e.unref(U.RadioGroup),{key:1,"group-label":t.label,choices:k.value,"model-value":c.value,"onUpdate:modelValue":p},null,8,["group-label","choices","model-value"]))],2),t.showActions?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.mobile?(e.openBlock(),e.createElementBlock("div",H,[e.createVNode(e.unref(I.PhilaButton),{variant:"secondary",text:t.resetText,onClick:m},null,8,["text"]),e.createVNode(e.unref(I.PhilaButton),{variant:"primary",text:v.value,onClick:g},null,8,["text"])])):(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("button",{type:"button",class:"phila-filter-chip-panel__reset has-text-body-small",onClick:m},e.toDisplayString(t.resetText),1),e.createVNode(e.unref(I.PhilaButton),{variant:"primary",size:"small",text:t.applyText,onClick:g},null,8,["text"])]))],64)):e.createCommentVNode("",!0)],14,M)]))}}),P="(max-width: 1064px) and (max-height: 915px)";function K(){const t=e.ref(typeof window<"u"&&window.matchMedia(P).matches);let s=null;function l(n){t.value=n.matches}return e.onMounted(()=>{s=window.matchMedia(P),t.value=s.matches,s.addEventListener("change",l)}),e.onBeforeUnmount(()=>{s?.removeEventListener("change",l)}),{isMobile:t}}let Q=0;const D=e.defineComponent({__name:"FilterChip",props:{label:{default:void 0},text:{default:void 0},size:{default:"medium"},color:{default:"blue"},icon:{type:[Function,Object],default:void 0},iconColor:{default:void 0},trailingIcon:{type:[Function,Object],default:void 0},selected:{type:Boolean,default:!1},choices:{default:void 0},multiple:{type:Boolean,default:!1},modelValue:{default:void 0},showActions:{type:Boolean,default:!1},applyText:{default:"Apply"},resetText:{default:"Reset"},className:{}},emits:["update:selected","update:modelValue","click"],setup(t,{emit:s}){const l=t,n=s,d=e.computed(()=>Array.isArray(l.choices)),f=e.useSlots(),c=e.computed(()=>!d.value&&!!l.icon&&!l.text&&!l.label&&!f.default);function y(a){n("update:selected",!l.selected),n("click",a)}const v=`phila-filter-chip-${e.useId()}-${++Q}`,{isVisible:k,setVisibility:p}=C.useVisibility({id:v,group:"phila-filter-chip",outsideClickHide:!0,escapeKeyHide:!0,showSingle:!0}),m=e.computed(()=>k(v)),{isMobile:g}=K(),V=e.ref(null),u=e.ref(0),h=e.ref(0),b=e.computed(()=>{const a=l.choices??[],B=l.modelValue??{};return Object.fromEntries(a.map(E=>[E.value,!!B[E.value]]))}),w=e.computed(()=>Object.values(b.value).filter(Boolean).length),z=e.computed(()=>w.value>0),i=e.computed(()=>{const a=l.label??l.text??"";return w.value>0?`${a} (${w.value})`:a});function r(){const a=V.value?.el??null;if(!a)return;const B=a.getBoundingClientRect();u.value=B.bottom+4,h.value=B.left}function o(a){if(!m.value)return;const B=document.getElementById(v),E=a.target;B&&E&&B.contains(E)||p(!1)}e.watch(m,a=>{a&&!g.value?window.addEventListener("scroll",o,{capture:!0}):window.removeEventListener("scroll",o,{capture:!0})});function x(){const a=!m.value;a&&!g.value&&r(),p(a)}function $(a){n("update:modelValue",a)}function N(a){n("update:modelValue",a),p(!1)}function F(){n("update:modelValue",Object.fromEntries((l.choices??[]).map(a=>[a.value,!1])))}return e.onMounted(()=>{d.value&&n("update:modelValue",b.value)}),(a,B)=>d.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(T,{ref_key:"triggerRef",ref:V,text:i.value,size:t.size,color:t.color,icon:t.icon,"icon-color":t.iconColor,active:z.value||m.value,chevron:"","aria-expanded":m.value,"data-toggle":`visibility-${v}`,onClick:x},null,8,["text","size","color","icon","icon-color","active","aria-expanded","data-toggle"]),m.value?(e.openBlock(),e.createBlock(X,{key:0,"menu-id":v,label:t.label??t.text??"",choices:t.choices,multiple:t.multiple,value:b.value,"show-actions":t.showActions,top:u.value,left:h.value,mobile:e.unref(g),"apply-text":t.applyText,"reset-text":t.resetText,"onUpdate:modelValue":$,onApply:N,onReset:F,onClose:B[0]||(B[0]=E=>e.unref(p)(!1))},null,8,["label","choices","multiple","value","show-actions","top","left","mobile","apply-text","reset-text"])):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createBlock(T,{key:1,size:t.size,color:t.color,icon:t.icon,"icon-color":t.iconColor,"trailing-icon":t.trailingIcon,"icon-only":c.value,active:t.selected,"aria-pressed":t.selected,onClick:y},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["size","color","icon","icon-color","trailing-icon","icon-only","active","aria-pressed"]))}}),Y=5;function J(){const t=e.ref(null),s=e.ref(!1);let l=!1,n=0,d=0,f=!1,c=null;const y=p=>{t.value&&p.pointerType!=="mouse"&&(l=!0,f=!1,n=p.clientX,d=t.value.scrollLeft)},v=p=>{if(!l||!t.value)return;const m=p.clientX-n;!f&&Math.abs(m)>Y&&(f=!0,s.value=!0,t.value.setPointerCapture(p.pointerId),c=p.pointerId),f&&(t.value.scrollLeft=d-m)},k=()=>{if(t.value&&c!==null){try{t.value.releasePointerCapture(c)}catch{}c=null}l=!1,f&&setTimeout(()=>s.value=!1,0)};return e.onBeforeUnmount(k),{el:t,suppressClick:s,dragHandlers:{onPointerdown:y,onPointermove:v,onPointerup:k,onPointerleave:k}}}const Z={key:0,class:"phila-filter-chip-group__label has-text-label-default"},_={class:"phila-filter-chip-group__viewport"},ee=e.defineComponent({__name:"FilterChipGroup",props:{filters:{},modelValue:{default:()=>({})},label:{},size:{default:"medium"},color:{default:"blue"},filterButton:{type:Boolean,default:!1},filterButtonText:{default:"Filters"},elevated:{type:Boolean,default:!1},className:{}},emits:["update:modelValue","open-filters"],setup(t,{emit:s}){const l=t,n=s,d=e.computed(()=>{let i=0;for(const r of l.filters){if(r.excludeFromCount)continue;const o=l.modelValue[r.key];o&&typeof o=="object"?i+=Object.values(o).filter(Boolean).length:o===!0&&(i+=1)}return i}),f=e.computed(()=>d.value>0?`${l.filterButtonText} (${d.value})`:l.filterButtonText),{el:c,suppressClick:y,dragHandlers:v}=J(),k=e.computed(()=>C.cn("phila-filter-chip-group",l.elevated&&"is-elevated",l.className));function p(i){return Array.isArray(i.choices)}function m(i){const r={};for(const o of l.filters){const x=i[o.key];if(Array.isArray(o.choices)&&o.choices.length>0){const $=x&&typeof x=="object"?x:{};r[o.key]=Object.fromEntries(o.choices.map(N=>[N.value,!!$[N.value]]))}else r[o.key]=x===!0}return r}function g(i,r){n("update:modelValue",m({...l.modelValue,[i]:r}))}function V(i){y.value&&(i.stopPropagation(),i.preventDefault())}const u=e.ref(!1),h=e.ref(!1);function b(){const i=c.value;i&&(u.value=i.scrollLeft>1,h.value=i.scrollLeft+i.clientWidth<i.scrollWidth-1)}function w(i){const r=c.value;r&&r.scrollBy({left:i*r.clientWidth*.8,behavior:"smooth"})}let z=null;return e.onMounted(()=>{n("update:modelValue",m(l.modelValue)),e.nextTick(b),c.value&&(z=new ResizeObserver(()=>b()),z.observe(c.value))}),e.onBeforeUnmount(()=>{z?.disconnect(),z=null}),e.watch(()=>l.filters,()=>e.nextTick(b)),(i,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(k.value)},[t.label?(e.openBlock(),e.createElementBlock("span",Z,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",_,[u.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"phila-filter-chip-group__arrow phila-filter-chip-group__arrow--left","aria-label":"Scroll filters left",onClick:r[0]||(r[0]=o=>w(-1))},[e.createVNode(e.unref(C.Icon),{icon:e.unref(S.IconChevronLeft),size:"xxsmall",inline:"",decorative:""},null,8,["icon"])])):e.createCommentVNode("",!0),e.createElementVNode("div",e.mergeProps({ref_key:"el",ref:c,class:"phila-filter-chip-group__row"},e.unref(v),{onClickCapture:V,onScroll:b}),[t.filterButton?(e.openBlock(),e.createBlock(T,{key:0,size:t.size,color:t.color,icon:e.unref(S.IconSliders),text:f.value,active:d.value>0,"aria-label":f.value,onClick:r[1]||(r[1]=o=>n("open-filters"))},null,8,["size","color","icon","text","active","aria-label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filters,o=>(e.openBlock(),e.createBlock(D,{key:o.key,label:o.label,text:o.label,size:t.size,color:t.color,icon:o.icon,"icon-color":o.iconColor,choices:o.choices,multiple:o.multiple,"show-actions":o.showActions,"model-value":p(o)?t.modelValue[o.key]:void 0,selected:!p(o)&&t.modelValue[o.key]===!0,"onUpdate:modelValue":x=>g(o.key,x),"onUpdate:selected":x=>g(o.key,x)},null,8,["label","text","size","color","icon","icon-color","choices","multiple","show-actions","model-value","selected","onUpdate:modelValue","onUpdate:selected"]))),128))],16),h.value?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"phila-filter-chip-group__arrow phila-filter-chip-group__arrow--right","aria-label":"Scroll filters right",onClick:r[2]||(r[2]=o=>w(1))},[e.createVNode(e.unref(C.Icon),{icon:e.unref(S.IconChevronRight),size:"xxsmall",inline:"",decorative:""},null,8,["icon"])])):e.createCommentVNode("",!0)])],2))}}),te=A(ee,[["__scopeId","data-v-b84936b9"]]);exports.FilterChip=D;exports.FilterChipGroup=te;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),g=require("@phila/phila-ui-core"),N=require("@phila/phila-ui-core/icons"),U=require("@phila/phila-ui-radio"),L=require("@phila/phila-ui-checkbox"),I=require("@phila/phila-ui-button"),j=["aria-pressed","aria-expanded"],O="xxsmall",R=e.defineComponent({__name:"FilterChipBase",props:{text:{default:void 0},size:{default:"medium"},color:{default:"blue"},icon:{type:[Function,Object],default:void 0},iconColor:{default:void 0},trailingIcon:{type:[Function,Object],default:void 0},iconOnly:{type:Boolean,default:!1},active:{type:Boolean,default:!1},chevron:{type:Boolean,default:!1},ariaPressed:{type:Boolean},ariaExpanded:{type:Boolean}},emits:["click"],setup(t,{expose:s}){const l=t,n=e.ref(null),d=e.computed(()=>g.cn("phila-filter-chip",`phila-filter-chip--${l.color}`,l.size!=="medium"&&`is-${l.size}`,"has-text-body-"+f(l.size),l.active&&"is-active",l.iconOnly&&"is-icon-only"));s({el:n});const f=c=>{switch(c){case"extra-large":return"default";case"large":return"small";default:return"extra-small"}};return(c,y)=>(e.openBlock(),e.createElementBlock("button",{ref_key:"rootEl",ref:n,type:"button",class:e.normalizeClass(d.value),style:e.normalizeStyle(t.iconColor?{"--chip-icon-color":t.iconColor}:void 0),"aria-pressed":t.ariaPressed,"aria-expanded":t.ariaExpanded,onClick:y[0]||(y[0]=v=>c.$emit("click",v))},[e.createVNode(e.unref(g.ActionContent),{icon:t.icon,size:t.size,inline:"","icon-size":O,"icon-only":t.iconOnly},{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)],!0)]),_:3},8,["icon","size","icon-only"]),t.chevron?(e.openBlock(),e.createBlock(e.unref(g.Icon),{key:0,icon:e.unref(N.IconChevronDown),size:"xxsmall",inline:"",decorative:"",class:"phila-filter-chip__chevron"},null,8,["icon"])):t.trailingIcon?(e.openBlock(),e.createBlock(e.unref(g.Icon),{key:1,icon:t.trailingIcon,size:O,inline:"",decorative:""},null,8,["icon"])):e.createCommentVNode("",!0)],14,j))}}),P=(t,s)=>{const l=t.__vccOpts||t;for(const[n,d]of s)l[n]=d;return l},T=P(R,[["__scopeId","data-v-40c7e692"]]),M=["id","aria-label"],q={key:0,class:"phila-filter-chip-sheet__header"},G={class:"phila-filter-chip-sheet__title"},H={key:1,class:"phila-filter-chip-sheet__footer"},W={key:2,class:"phila-filter-chip-panel__footer"},X=e.defineComponent({__name:"FilterChipDropdownPanel",props:{menuId:{},label:{},choices:{},multiple:{type:Boolean},value:{},showActions:{type:Boolean,default:!1},top:{},left:{},mobile:{type:Boolean,default:!1},applyText:{default:"Apply"},resetText:{default:"Reset"}},emits:["update:modelValue","apply","reset","close"],setup(t,{emit:s}){const l=t,n=s;function d(u){return Object.fromEntries(l.choices.map(h=>[h.value,!!u[h.value]]))}const f=e.ref(d(l.value));e.watch(()=>l.value,u=>f.value=d(u));const c=e.computed(()=>l.showActions?f.value:d(l.value)),y=e.computed(()=>Object.values(c.value).filter(Boolean).length),v=e.computed(()=>y.value>0?`${l.applyText} (${y.value})`:l.applyText),k=e.computed(()=>l.choices.map(u=>({text:u.text,value:u.value,tooltip:u.tooltip})));function p(u){l.showActions?f.value=u:n("update:modelValue",u)}const m=()=>{f.value=Object.fromEntries(l.choices.map(u=>[u.value,!1])),n("reset")},C=()=>n("apply",{...f.value}),V=e.computed(()=>({top:l.top+"px",left:l.left+"px",maxHeight:`calc(100dvh - ${l.top}px - 0.5rem)`}));return(u,h)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[t.mobile?(e.openBlock(),e.createElementBlock("div",{key:0,class:"phila-filter-chip-sheet__scrim",onClick:h[0]||(h[0]=b=>n("close"))})):e.createCommentVNode("",!0),e.createElementVNode("div",{id:t.menuId,class:e.normalizeClass(t.mobile?"phila-filter-chip-sheet":"phila-filter-chip-panel"),role:"dialog","aria-label":t.label,style:e.normalizeStyle(t.mobile?void 0:V.value)},[t.mobile?(e.openBlock(),e.createElementBlock("header",q,[e.createElementVNode("span",G,e.toDisplayString(t.label),1),e.createElementVNode("button",{type:"button",class:"phila-filter-chip-sheet__close","aria-label":"Close",onClick:h[1]||(h[1]=b=>n("close"))}," ✕ ")])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(t.mobile?"phila-filter-chip-sheet__body":"phila-filter-chip-panel__body")},[t.multiple?(e.openBlock(),e.createBlock(e.unref(L.CheckboxGroup),{key:0,"group-label":t.label,choices:k.value,"model-value":c.value,"onUpdate:modelValue":p},null,8,["group-label","choices","model-value"])):(e.openBlock(),e.createBlock(e.unref(U.RadioGroup),{key:1,"group-label":t.label,choices:k.value,"model-value":c.value,"onUpdate:modelValue":p},null,8,["group-label","choices","model-value"]))],2),t.mobile?(e.openBlock(),e.createElementBlock("div",H,[e.createVNode(e.unref(I.PhilaButton),{variant:"secondary",text:t.resetText,onClick:m},null,8,["text"]),t.showActions?(e.openBlock(),e.createBlock(e.unref(I.PhilaButton),{key:0,variant:"primary",text:v.value,onClick:C},null,8,["text"])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("button",{type:"button",class:"phila-filter-chip-panel__reset has-text-body-small",onClick:m},e.toDisplayString(t.resetText),1),t.showActions?(e.openBlock(),e.createBlock(e.unref(I.PhilaButton),{key:0,variant:"primary",size:"small",text:t.applyText,onClick:C},null,8,["text"])):e.createCommentVNode("",!0)]))],14,M)]))}}),A="(max-width: 1064px) and (max-height: 915px)";function K(){const t=e.ref(typeof window<"u"&&window.matchMedia(A).matches);let s=null;function l(n){t.value=n.matches}return e.onMounted(()=>{s=window.matchMedia(A),t.value=s.matches,s.addEventListener("change",l)}),e.onBeforeUnmount(()=>{s?.removeEventListener("change",l)}),{isMobile:t}}let Q=0;const D=e.defineComponent({__name:"FilterChip",props:{label:{default:void 0},text:{default:void 0},size:{default:"medium"},color:{default:"blue"},icon:{type:[Function,Object],default:void 0},iconColor:{default:void 0},trailingIcon:{type:[Function,Object],default:void 0},selected:{type:Boolean,default:!1},choices:{default:void 0},multiple:{type:Boolean,default:!1},modelValue:{default:void 0},showActions:{type:Boolean,default:!1},applyText:{default:"Apply"},resetText:{default:"Reset"},className:{}},emits:["update:selected","update:modelValue","click"],setup(t,{emit:s}){const l=t,n=s,d=e.computed(()=>Array.isArray(l.choices)),f=e.useSlots(),c=e.computed(()=>!d.value&&!!l.icon&&!l.text&&!l.label&&!f.default);function y(a){n("update:selected",!l.selected),n("click",a)}const v=`phila-filter-chip-${e.useId()}-${++Q}`,{isVisible:k,setVisibility:p}=g.useVisibility({id:v,group:"phila-filter-chip",outsideClickHide:!0,escapeKeyHide:!0,showSingle:!0}),m=e.computed(()=>k(v)),{isMobile:C}=K(),V=e.ref(null),u=e.ref(0),h=e.ref(0),b=e.computed(()=>{const a=l.choices??[],B=l.modelValue??{};return Object.fromEntries(a.map(E=>[E.value,!!B[E.value]]))}),w=e.computed(()=>Object.values(b.value).filter(Boolean).length),z=e.computed(()=>w.value>0),i=e.computed(()=>{const a=l.label??l.text??"";return w.value>0?`${a} (${w.value})`:a});function r(){const a=V.value?.el??null;if(!a)return;const B=a.getBoundingClientRect();u.value=B.bottom+4,h.value=B.left}function o(a){if(!m.value)return;const B=document.getElementById(v),E=a.target;B&&E&&B.contains(E)||p(!1)}e.watch(m,a=>{a&&!C.value?window.addEventListener("scroll",o,{capture:!0}):window.removeEventListener("scroll",o,{capture:!0})});function x(){const a=!m.value;a&&!C.value&&r(),p(a)}function $(a){n("update:modelValue",a)}function S(a){n("update:modelValue",a),p(!1)}function F(){n("update:modelValue",Object.fromEntries((l.choices??[]).map(a=>[a.value,!1])))}return e.onMounted(()=>{d.value&&n("update:modelValue",b.value)}),(a,B)=>d.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(T,{ref_key:"triggerRef",ref:V,text:i.value,size:t.size,color:t.color,icon:t.icon,"icon-color":t.iconColor,active:z.value||m.value,chevron:"","aria-expanded":m.value,"data-toggle":`visibility-${v}`,onClick:x},null,8,["text","size","color","icon","icon-color","active","aria-expanded","data-toggle"]),m.value?(e.openBlock(),e.createBlock(X,{key:0,"menu-id":v,label:t.label??t.text??"",choices:t.choices,multiple:t.multiple,value:b.value,"show-actions":t.showActions,top:u.value,left:h.value,mobile:e.unref(C),"apply-text":t.applyText,"reset-text":t.resetText,"onUpdate:modelValue":$,onApply:S,onReset:F,onClose:B[0]||(B[0]=E=>e.unref(p)(!1))},null,8,["label","choices","multiple","value","show-actions","top","left","mobile","apply-text","reset-text"])):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createBlock(T,{key:1,size:t.size,color:t.color,icon:t.icon,"icon-color":t.iconColor,"trailing-icon":t.trailingIcon,"icon-only":c.value,active:t.selected,"aria-pressed":t.selected,onClick:y},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["size","color","icon","icon-color","trailing-icon","icon-only","active","aria-pressed"]))}}),Y=5;function J(){const t=e.ref(null),s=e.ref(!1);let l=!1,n=0,d=0,f=!1,c=null;const y=p=>{t.value&&p.pointerType!=="mouse"&&(l=!0,f=!1,n=p.clientX,d=t.value.scrollLeft)},v=p=>{if(!l||!t.value)return;const m=p.clientX-n;!f&&Math.abs(m)>Y&&(f=!0,s.value=!0,t.value.setPointerCapture(p.pointerId),c=p.pointerId),f&&(t.value.scrollLeft=d-m)},k=()=>{if(t.value&&c!==null){try{t.value.releasePointerCapture(c)}catch{}c=null}l=!1,f&&setTimeout(()=>s.value=!1,0)};return e.onBeforeUnmount(k),{el:t,suppressClick:s,dragHandlers:{onPointerdown:y,onPointermove:v,onPointerup:k,onPointerleave:k}}}const Z={key:0,class:"phila-filter-chip-group__label has-text-label-default"},_={class:"phila-filter-chip-group__viewport"},ee=e.defineComponent({__name:"FilterChipGroup",props:{filters:{},modelValue:{default:()=>({})},label:{},size:{default:"medium"},color:{default:"blue"},filterButton:{type:Boolean,default:!1},filterButtonText:{default:"Filters"},elevated:{type:Boolean,default:!1},className:{}},emits:["update:modelValue","open-filters"],setup(t,{emit:s}){const l=t,n=s,d=e.computed(()=>{let i=0;for(const r of l.filters){if(r.excludeFromCount)continue;const o=l.modelValue[r.key];o&&typeof o=="object"?i+=Object.values(o).filter(Boolean).length:o===!0&&(i+=1)}return i}),f=e.computed(()=>d.value>0?`${l.filterButtonText} (${d.value})`:l.filterButtonText),{el:c,suppressClick:y,dragHandlers:v}=J(),k=e.computed(()=>g.cn("phila-filter-chip-group",l.elevated&&"is-elevated",l.className));function p(i){return Array.isArray(i.choices)}function m(i){const r={};for(const o of l.filters){const x=i[o.key];if(Array.isArray(o.choices)&&o.choices.length>0){const $=x&&typeof x=="object"?x:{};r[o.key]=Object.fromEntries(o.choices.map(S=>[S.value,!!$[S.value]]))}else r[o.key]=x===!0}return r}function C(i,r){n("update:modelValue",m({...l.modelValue,[i]:r}))}function V(i){y.value&&(i.stopPropagation(),i.preventDefault())}const u=e.ref(!1),h=e.ref(!1);function b(){const i=c.value;i&&(u.value=i.scrollLeft>1,h.value=i.scrollLeft+i.clientWidth<i.scrollWidth-1)}function w(i){const r=c.value;r&&r.scrollBy({left:i*r.clientWidth*.8,behavior:"smooth"})}let z=null;return e.onMounted(()=>{n("update:modelValue",m(l.modelValue)),e.nextTick(b),c.value&&(z=new ResizeObserver(()=>b()),z.observe(c.value))}),e.onBeforeUnmount(()=>{z?.disconnect(),z=null}),e.watch(()=>l.filters,()=>e.nextTick(b)),(i,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(k.value)},[t.label?(e.openBlock(),e.createElementBlock("span",Z,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",_,[u.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"phila-filter-chip-group__arrow phila-filter-chip-group__arrow--left","aria-label":"Scroll filters left",onClick:r[0]||(r[0]=o=>w(-1))},[e.createVNode(e.unref(g.Icon),{icon:e.unref(N.IconChevronLeft),size:"xxsmall",inline:"",decorative:""},null,8,["icon"])])):e.createCommentVNode("",!0),e.createElementVNode("div",e.mergeProps({ref_key:"el",ref:c,class:"phila-filter-chip-group__row"},e.unref(v),{onClickCapture:V,onScroll:b}),[t.filterButton?(e.openBlock(),e.createBlock(T,{key:0,size:t.size,color:t.color,icon:e.unref(N.IconSliders),text:f.value,active:d.value>0,"aria-label":f.value,onClick:r[1]||(r[1]=o=>n("open-filters"))},null,8,["size","color","icon","text","active","aria-label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filters,o=>(e.openBlock(),e.createBlock(D,{key:o.key,label:o.label,text:o.label,size:t.size,color:t.color,icon:o.icon,"icon-color":o.iconColor,choices:o.choices,multiple:o.multiple,"show-actions":o.showActions,"model-value":p(o)?t.modelValue[o.key]:void 0,selected:!p(o)&&t.modelValue[o.key]===!0,"onUpdate:modelValue":x=>C(o.key,x),"onUpdate:selected":x=>C(o.key,x)},null,8,["label","text","size","color","icon","icon-color","choices","multiple","show-actions","model-value","selected","onUpdate:modelValue","onUpdate:selected"]))),128))],16),h.value?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"phila-filter-chip-group__arrow phila-filter-chip-group__arrow--right","aria-label":"Scroll filters right",onClick:r[2]||(r[2]=o=>w(1))},[e.createVNode(e.unref(g.Icon),{icon:e.unref(N.IconChevronRight),size:"xxsmall",inline:"",decorative:""},null,8,["icon"])])):e.createCommentVNode("",!0)])],2))}}),te=P(ee,[["__scopeId","data-v-b84936b9"]]);exports.FilterChip=D;exports.FilterChipGroup=te;
|
package/dist/index.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { defineComponent as R, ref as
|
|
1
|
+
import { defineComponent as R, ref as $, computed as m, createElementBlock as g, openBlock as n, normalizeStyle as Q, normalizeClass as j, createVNode as P, createBlock as k, createCommentVNode as V, unref as p, withCtx as Y, renderSlot as J, createTextVNode as Z, toDisplayString as L, watch as N, Teleport as oe, createElementVNode as T, onMounted as G, onBeforeUnmount as W, useSlots as ie, useId as ae, Fragment as _, nextTick as X, mergeProps as ne, renderList as ce } from "vue";
|
|
2
2
|
import { cn as ee, ActionContent as se, Icon as D, useVisibility as ue } from "@phila/phila-ui-core";
|
|
3
3
|
import { IconChevronDown as re, IconChevronLeft as de, IconSliders as fe, IconChevronRight as ve } from "@phila/phila-ui-core/icons";
|
|
4
4
|
import { RadioGroup as pe } from "@phila/phila-ui-radio";
|
|
5
5
|
import { CheckboxGroup as me } from "@phila/phila-ui-checkbox";
|
|
6
6
|
import { PhilaButton as M } from "@phila/phila-ui-button";
|
|
7
|
-
import './index.css';const he = ["aria-pressed", "aria-expanded"],
|
|
7
|
+
import './index.css';const he = ["aria-pressed", "aria-expanded"], q = "xxsmall", ye = /* @__PURE__ */ R({
|
|
8
8
|
__name: "FilterChipBase",
|
|
9
9
|
props: {
|
|
10
10
|
text: { default: void 0 },
|
|
@@ -21,7 +21,7 @@ import './index.css';const he = ["aria-pressed", "aria-expanded"], K = "xxsmall"
|
|
|
21
21
|
},
|
|
22
22
|
emits: ["click"],
|
|
23
23
|
setup(e, { expose: r }) {
|
|
24
|
-
const t = e, o =
|
|
24
|
+
const t = e, o = $(null), d = m(
|
|
25
25
|
() => ee(
|
|
26
26
|
"phila-filter-chip",
|
|
27
27
|
`phila-filter-chip--${t.color}`,
|
|
@@ -32,8 +32,8 @@ import './index.css';const he = ["aria-pressed", "aria-expanded"], K = "xxsmall"
|
|
|
32
32
|
)
|
|
33
33
|
);
|
|
34
34
|
r({ el: o });
|
|
35
|
-
const f = (
|
|
36
|
-
switch (
|
|
35
|
+
const f = (c) => {
|
|
36
|
+
switch (c) {
|
|
37
37
|
case "extra-large":
|
|
38
38
|
return "default";
|
|
39
39
|
case "large":
|
|
@@ -42,44 +42,44 @@ import './index.css';const he = ["aria-pressed", "aria-expanded"], K = "xxsmall"
|
|
|
42
42
|
return "extra-small";
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
|
-
return (
|
|
45
|
+
return (c, x) => (n(), g("button", {
|
|
46
46
|
ref_key: "rootEl",
|
|
47
47
|
ref: o,
|
|
48
48
|
type: "button",
|
|
49
49
|
class: j(d.value),
|
|
50
|
-
style:
|
|
50
|
+
style: Q(e.iconColor ? { "--chip-icon-color": e.iconColor } : void 0),
|
|
51
51
|
"aria-pressed": e.ariaPressed,
|
|
52
52
|
"aria-expanded": e.ariaExpanded,
|
|
53
|
-
onClick:
|
|
53
|
+
onClick: x[0] || (x[0] = (y) => c.$emit("click", y))
|
|
54
54
|
}, [
|
|
55
|
-
|
|
55
|
+
P(p(se), {
|
|
56
56
|
icon: e.icon,
|
|
57
57
|
size: e.size,
|
|
58
58
|
inline: "",
|
|
59
|
-
"icon-size":
|
|
59
|
+
"icon-size": q,
|
|
60
60
|
"icon-only": e.iconOnly
|
|
61
61
|
}, {
|
|
62
|
-
default:
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
default: Y(() => [
|
|
63
|
+
J(c.$slots, "default", {}, () => [
|
|
64
|
+
Z(L(e.text), 1)
|
|
65
65
|
], !0)
|
|
66
66
|
]),
|
|
67
67
|
_: 3
|
|
68
68
|
}, 8, ["icon", "size", "icon-only"]),
|
|
69
|
-
e.chevron ? (
|
|
69
|
+
e.chevron ? (n(), k(p(D), {
|
|
70
70
|
key: 0,
|
|
71
71
|
icon: p(re),
|
|
72
72
|
size: "xxsmall",
|
|
73
73
|
inline: "",
|
|
74
74
|
decorative: "",
|
|
75
75
|
class: "phila-filter-chip__chevron"
|
|
76
|
-
}, null, 8, ["icon"])) : e.trailingIcon ? (
|
|
76
|
+
}, null, 8, ["icon"])) : e.trailingIcon ? (n(), k(p(D), {
|
|
77
77
|
key: 1,
|
|
78
78
|
icon: e.trailingIcon,
|
|
79
|
-
size:
|
|
79
|
+
size: q,
|
|
80
80
|
inline: "",
|
|
81
81
|
decorative: ""
|
|
82
|
-
}, null, 8, ["icon"])) :
|
|
82
|
+
}, null, 8, ["icon"])) : V("", !0)
|
|
83
83
|
], 14, he));
|
|
84
84
|
}
|
|
85
85
|
}), te = (e, r) => {
|
|
@@ -91,10 +91,10 @@ import './index.css';const he = ["aria-pressed", "aria-expanded"], K = "xxsmall"
|
|
|
91
91
|
key: 0,
|
|
92
92
|
class: "phila-filter-chip-sheet__header"
|
|
93
93
|
}, ge = { class: "phila-filter-chip-sheet__title" }, ke = {
|
|
94
|
-
key:
|
|
94
|
+
key: 1,
|
|
95
95
|
class: "phila-filter-chip-sheet__footer"
|
|
96
96
|
}, Ce = {
|
|
97
|
-
key:
|
|
97
|
+
key: 2,
|
|
98
98
|
class: "phila-filter-chip-panel__footer"
|
|
99
99
|
}, we = /* @__PURE__ */ R({
|
|
100
100
|
__name: "FilterChipDropdownPanel",
|
|
@@ -117,102 +117,102 @@ import './index.css';const he = ["aria-pressed", "aria-expanded"], K = "xxsmall"
|
|
|
117
117
|
function d(u) {
|
|
118
118
|
return Object.fromEntries(t.choices.map((b) => [b.value, !!u[b.value]]));
|
|
119
119
|
}
|
|
120
|
-
const f =
|
|
120
|
+
const f = $(d(t.value));
|
|
121
121
|
N(
|
|
122
122
|
() => t.value,
|
|
123
123
|
(u) => f.value = d(u)
|
|
124
124
|
);
|
|
125
|
-
const
|
|
126
|
-
() =>
|
|
127
|
-
),
|
|
125
|
+
const c = m(() => t.showActions ? f.value : d(t.value)), x = m(() => Object.values(c.value).filter(Boolean).length), y = m(
|
|
126
|
+
() => x.value > 0 ? `${t.applyText} (${x.value})` : t.applyText
|
|
127
|
+
), C = m(() => t.choices.map((u) => ({ text: u.text, value: u.value, tooltip: u.tooltip })));
|
|
128
128
|
function v(u) {
|
|
129
129
|
t.showActions ? f.value = u : o("update:modelValue", u);
|
|
130
130
|
}
|
|
131
131
|
const h = () => {
|
|
132
132
|
f.value = Object.fromEntries(t.choices.map((u) => [u.value, !1])), o("reset");
|
|
133
|
-
},
|
|
133
|
+
}, I = () => o("apply", { ...f.value }), O = m(() => ({
|
|
134
134
|
top: t.top + "px",
|
|
135
135
|
left: t.left + "px",
|
|
136
136
|
maxHeight: `calc(100dvh - ${t.top}px - 0.5rem)`
|
|
137
137
|
}));
|
|
138
|
-
return (u, b) => (
|
|
139
|
-
e.mobile ? (
|
|
138
|
+
return (u, b) => (n(), k(oe, { to: "body" }, [
|
|
139
|
+
e.mobile ? (n(), g("div", {
|
|
140
140
|
key: 0,
|
|
141
141
|
class: "phila-filter-chip-sheet__scrim",
|
|
142
|
-
onClick: b[0] || (b[0] = (
|
|
143
|
-
})) :
|
|
142
|
+
onClick: b[0] || (b[0] = (w) => o("close"))
|
|
143
|
+
})) : V("", !0),
|
|
144
144
|
T("div", {
|
|
145
145
|
id: e.menuId,
|
|
146
146
|
class: j(e.mobile ? "phila-filter-chip-sheet" : "phila-filter-chip-panel"),
|
|
147
147
|
role: "dialog",
|
|
148
148
|
"aria-label": e.label,
|
|
149
|
-
style:
|
|
149
|
+
style: Q(e.mobile ? void 0 : O.value)
|
|
150
150
|
}, [
|
|
151
|
-
e.mobile ? (
|
|
151
|
+
e.mobile ? (n(), g("header", xe, [
|
|
152
152
|
T("span", ge, L(e.label), 1),
|
|
153
153
|
T("button", {
|
|
154
154
|
type: "button",
|
|
155
155
|
class: "phila-filter-chip-sheet__close",
|
|
156
156
|
"aria-label": "Close",
|
|
157
|
-
onClick: b[1] || (b[1] = (
|
|
157
|
+
onClick: b[1] || (b[1] = (w) => o("close"))
|
|
158
158
|
}, " ✕ ")
|
|
159
|
-
])) :
|
|
159
|
+
])) : V("", !0),
|
|
160
160
|
T("div", {
|
|
161
|
-
class: j(
|
|
161
|
+
class: j(e.mobile ? "phila-filter-chip-sheet__body" : "phila-filter-chip-panel__body")
|
|
162
162
|
}, [
|
|
163
|
-
e.multiple ? (
|
|
163
|
+
e.multiple ? (n(), k(p(me), {
|
|
164
164
|
key: 0,
|
|
165
165
|
"group-label": e.label,
|
|
166
|
-
choices:
|
|
167
|
-
"model-value":
|
|
166
|
+
choices: C.value,
|
|
167
|
+
"model-value": c.value,
|
|
168
168
|
"onUpdate:modelValue": v
|
|
169
|
-
}, null, 8, ["group-label", "choices", "model-value"])) : (
|
|
169
|
+
}, null, 8, ["group-label", "choices", "model-value"])) : (n(), k(p(pe), {
|
|
170
170
|
key: 1,
|
|
171
171
|
"group-label": e.label,
|
|
172
|
-
choices:
|
|
173
|
-
"model-value":
|
|
172
|
+
choices: C.value,
|
|
173
|
+
"model-value": c.value,
|
|
174
174
|
"onUpdate:modelValue": v
|
|
175
175
|
}, null, 8, ["group-label", "choices", "model-value"]))
|
|
176
176
|
], 2),
|
|
177
|
-
e.
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
]))
|
|
202
|
-
]
|
|
177
|
+
e.mobile ? (n(), g("div", ke, [
|
|
178
|
+
P(p(M), {
|
|
179
|
+
variant: "secondary",
|
|
180
|
+
text: e.resetText,
|
|
181
|
+
onClick: h
|
|
182
|
+
}, null, 8, ["text"]),
|
|
183
|
+
e.showActions ? (n(), k(p(M), {
|
|
184
|
+
key: 0,
|
|
185
|
+
variant: "primary",
|
|
186
|
+
text: y.value,
|
|
187
|
+
onClick: I
|
|
188
|
+
}, null, 8, ["text"])) : V("", !0)
|
|
189
|
+
])) : (n(), g("div", Ce, [
|
|
190
|
+
T("button", {
|
|
191
|
+
type: "button",
|
|
192
|
+
class: "phila-filter-chip-panel__reset has-text-body-small",
|
|
193
|
+
onClick: h
|
|
194
|
+
}, L(e.resetText), 1),
|
|
195
|
+
e.showActions ? (n(), k(p(M), {
|
|
196
|
+
key: 0,
|
|
197
|
+
variant: "primary",
|
|
198
|
+
size: "small",
|
|
199
|
+
text: e.applyText,
|
|
200
|
+
onClick: I
|
|
201
|
+
}, null, 8, ["text"])) : V("", !0)
|
|
202
|
+
]))
|
|
203
203
|
], 14, be)
|
|
204
204
|
]));
|
|
205
205
|
}
|
|
206
|
-
}),
|
|
206
|
+
}), K = "(max-width: 1064px) and (max-height: 915px)";
|
|
207
207
|
function ze() {
|
|
208
|
-
const e =
|
|
208
|
+
const e = $(typeof window < "u" && window.matchMedia(K).matches);
|
|
209
209
|
let r = null;
|
|
210
210
|
function t(o) {
|
|
211
211
|
e.value = o.matches;
|
|
212
212
|
}
|
|
213
|
-
return
|
|
214
|
-
r = window.matchMedia(
|
|
215
|
-
}),
|
|
213
|
+
return G(() => {
|
|
214
|
+
r = window.matchMedia(K), e.value = r.matches, r.addEventListener("change", t);
|
|
215
|
+
}), W(() => {
|
|
216
216
|
r?.removeEventListener("change", t);
|
|
217
217
|
}), { isMobile: e };
|
|
218
218
|
}
|
|
@@ -238,42 +238,42 @@ const Ve = /* @__PURE__ */ R({
|
|
|
238
238
|
},
|
|
239
239
|
emits: ["update:selected", "update:modelValue", "click"],
|
|
240
240
|
setup(e, { emit: r }) {
|
|
241
|
-
const t = e, o = r, d = m(() => Array.isArray(t.choices)), f = ie(),
|
|
241
|
+
const t = e, o = r, d = m(() => Array.isArray(t.choices)), f = ie(), c = m(
|
|
242
242
|
() => !d.value && !!t.icon && !t.text && !t.label && !f.default
|
|
243
243
|
);
|
|
244
|
-
function
|
|
244
|
+
function x(i) {
|
|
245
245
|
o("update:selected", !t.selected), o("click", i);
|
|
246
246
|
}
|
|
247
|
-
const y = `phila-filter-chip-${ae()}-${++Be}`, { isVisible:
|
|
247
|
+
const y = `phila-filter-chip-${ae()}-${++Be}`, { isVisible: C, setVisibility: v } = ue({
|
|
248
248
|
id: y,
|
|
249
249
|
group: "phila-filter-chip",
|
|
250
250
|
outsideClickHide: !0,
|
|
251
251
|
escapeKeyHide: !0,
|
|
252
252
|
showSingle: !0
|
|
253
|
-
}), h = m(() =>
|
|
254
|
-
const i = t.choices ?? [],
|
|
255
|
-
return Object.fromEntries(i.map((
|
|
256
|
-
}), A = m(() => Object.values(
|
|
253
|
+
}), h = m(() => C(y)), { isMobile: I } = ze(), O = $(null), u = $(0), b = $(0), w = m(() => {
|
|
254
|
+
const i = t.choices ?? [], B = t.modelValue ?? {};
|
|
255
|
+
return Object.fromEntries(i.map((E) => [E.value, !!B[E.value]]));
|
|
256
|
+
}), A = m(() => Object.values(w.value).filter(Boolean).length), S = m(() => A.value > 0), a = m(() => {
|
|
257
257
|
const i = t.label ?? t.text ?? "";
|
|
258
258
|
return A.value > 0 ? `${i} (${A.value})` : i;
|
|
259
259
|
});
|
|
260
|
-
function
|
|
261
|
-
const i =
|
|
260
|
+
function s() {
|
|
261
|
+
const i = O.value?.el ?? null;
|
|
262
262
|
if (!i) return;
|
|
263
|
-
const
|
|
264
|
-
u.value =
|
|
263
|
+
const B = i.getBoundingClientRect();
|
|
264
|
+
u.value = B.bottom + 4, b.value = B.left;
|
|
265
265
|
}
|
|
266
266
|
function l(i) {
|
|
267
267
|
if (!h.value) return;
|
|
268
|
-
const
|
|
269
|
-
|
|
268
|
+
const B = document.getElementById(y), E = i.target;
|
|
269
|
+
B && E && B.contains(E) || v(!1);
|
|
270
270
|
}
|
|
271
271
|
N(h, (i) => {
|
|
272
|
-
i && !
|
|
272
|
+
i && !I.value ? window.addEventListener("scroll", l, { capture: !0 }) : window.removeEventListener("scroll", l, { capture: !0 });
|
|
273
273
|
});
|
|
274
|
-
function
|
|
274
|
+
function z() {
|
|
275
275
|
const i = !h.value;
|
|
276
|
-
i && !
|
|
276
|
+
i && !I.value && s(), v(i);
|
|
277
277
|
}
|
|
278
278
|
function U(i) {
|
|
279
279
|
o("update:modelValue", i);
|
|
@@ -284,56 +284,56 @@ const Ve = /* @__PURE__ */ R({
|
|
|
284
284
|
function le() {
|
|
285
285
|
o("update:modelValue", Object.fromEntries((t.choices ?? []).map((i) => [i.value, !1])));
|
|
286
286
|
}
|
|
287
|
-
return
|
|
288
|
-
d.value && o("update:modelValue",
|
|
289
|
-
}), (i,
|
|
290
|
-
|
|
287
|
+
return G(() => {
|
|
288
|
+
d.value && o("update:modelValue", w.value);
|
|
289
|
+
}), (i, B) => d.value ? (n(), g(_, { key: 0 }, [
|
|
290
|
+
P(H, {
|
|
291
291
|
ref_key: "triggerRef",
|
|
292
|
-
ref:
|
|
292
|
+
ref: O,
|
|
293
293
|
text: a.value,
|
|
294
294
|
size: e.size,
|
|
295
295
|
color: e.color,
|
|
296
296
|
icon: e.icon,
|
|
297
297
|
"icon-color": e.iconColor,
|
|
298
|
-
active:
|
|
298
|
+
active: S.value || h.value,
|
|
299
299
|
chevron: "",
|
|
300
300
|
"aria-expanded": h.value,
|
|
301
301
|
"data-toggle": `visibility-${y}`,
|
|
302
|
-
onClick:
|
|
302
|
+
onClick: z
|
|
303
303
|
}, null, 8, ["text", "size", "color", "icon", "icon-color", "active", "aria-expanded", "data-toggle"]),
|
|
304
|
-
h.value ? (
|
|
304
|
+
h.value ? (n(), k(we, {
|
|
305
305
|
key: 0,
|
|
306
306
|
"menu-id": y,
|
|
307
307
|
label: e.label ?? e.text ?? "",
|
|
308
308
|
choices: e.choices,
|
|
309
309
|
multiple: e.multiple,
|
|
310
|
-
value:
|
|
310
|
+
value: w.value,
|
|
311
311
|
"show-actions": e.showActions,
|
|
312
312
|
top: u.value,
|
|
313
313
|
left: b.value,
|
|
314
|
-
mobile: p(
|
|
314
|
+
mobile: p(I),
|
|
315
315
|
"apply-text": e.applyText,
|
|
316
316
|
"reset-text": e.resetText,
|
|
317
317
|
"onUpdate:modelValue": U,
|
|
318
318
|
onApply: F,
|
|
319
319
|
onReset: le,
|
|
320
|
-
onClose:
|
|
321
|
-
}, null, 8, ["label", "choices", "multiple", "value", "show-actions", "top", "left", "mobile", "apply-text", "reset-text"])) :
|
|
322
|
-
], 64)) : (
|
|
320
|
+
onClose: B[0] || (B[0] = (E) => p(v)(!1))
|
|
321
|
+
}, null, 8, ["label", "choices", "multiple", "value", "show-actions", "top", "left", "mobile", "apply-text", "reset-text"])) : V("", !0)
|
|
322
|
+
], 64)) : (n(), k(H, {
|
|
323
323
|
key: 1,
|
|
324
324
|
size: e.size,
|
|
325
325
|
color: e.color,
|
|
326
326
|
icon: e.icon,
|
|
327
327
|
"icon-color": e.iconColor,
|
|
328
328
|
"trailing-icon": e.trailingIcon,
|
|
329
|
-
"icon-only":
|
|
329
|
+
"icon-only": c.value,
|
|
330
330
|
active: e.selected,
|
|
331
331
|
"aria-pressed": e.selected,
|
|
332
|
-
onClick:
|
|
332
|
+
onClick: x
|
|
333
333
|
}, {
|
|
334
|
-
default:
|
|
335
|
-
|
|
336
|
-
|
|
334
|
+
default: Y(() => [
|
|
335
|
+
J(i.$slots, "default", {}, () => [
|
|
336
|
+
Z(L(e.text), 1)
|
|
337
337
|
])
|
|
338
338
|
]),
|
|
339
339
|
_: 3
|
|
@@ -341,39 +341,39 @@ const Ve = /* @__PURE__ */ R({
|
|
|
341
341
|
}
|
|
342
342
|
}), $e = 5;
|
|
343
343
|
function Ie() {
|
|
344
|
-
const e =
|
|
345
|
-
let t = !1, o = 0, d = 0, f = !1,
|
|
346
|
-
const
|
|
344
|
+
const e = $(null), r = $(!1);
|
|
345
|
+
let t = !1, o = 0, d = 0, f = !1, c = null;
|
|
346
|
+
const x = (v) => {
|
|
347
347
|
e.value && v.pointerType !== "mouse" && (t = !0, f = !1, o = v.clientX, d = e.value.scrollLeft);
|
|
348
348
|
}, y = (v) => {
|
|
349
349
|
if (!t || !e.value) return;
|
|
350
350
|
const h = v.clientX - o;
|
|
351
|
-
!f && Math.abs(h) > $e && (f = !0, r.value = !0, e.value.setPointerCapture(v.pointerId),
|
|
352
|
-
},
|
|
353
|
-
if (e.value &&
|
|
351
|
+
!f && Math.abs(h) > $e && (f = !0, r.value = !0, e.value.setPointerCapture(v.pointerId), c = v.pointerId), f && (e.value.scrollLeft = d - h);
|
|
352
|
+
}, C = () => {
|
|
353
|
+
if (e.value && c !== null) {
|
|
354
354
|
try {
|
|
355
|
-
e.value.releasePointerCapture(
|
|
355
|
+
e.value.releasePointerCapture(c);
|
|
356
356
|
} catch {
|
|
357
357
|
}
|
|
358
|
-
|
|
358
|
+
c = null;
|
|
359
359
|
}
|
|
360
360
|
t = !1, f && setTimeout(() => r.value = !1, 0);
|
|
361
361
|
};
|
|
362
|
-
return
|
|
362
|
+
return W(C), {
|
|
363
363
|
el: e,
|
|
364
364
|
suppressClick: r,
|
|
365
365
|
dragHandlers: {
|
|
366
|
-
onPointerdown:
|
|
366
|
+
onPointerdown: x,
|
|
367
367
|
onPointermove: y,
|
|
368
|
-
onPointerup:
|
|
369
|
-
onPointerleave:
|
|
368
|
+
onPointerup: C,
|
|
369
|
+
onPointerleave: C
|
|
370
370
|
}
|
|
371
371
|
};
|
|
372
372
|
}
|
|
373
373
|
const Te = {
|
|
374
374
|
key: 0,
|
|
375
375
|
class: "phila-filter-chip-group__label has-text-label-default"
|
|
376
|
-
}, Oe = { class: "phila-filter-chip-group__viewport" },
|
|
376
|
+
}, Oe = { class: "phila-filter-chip-group__viewport" }, Ae = /* @__PURE__ */ R({
|
|
377
377
|
__name: "FilterChipGroup",
|
|
378
378
|
props: {
|
|
379
379
|
filters: {},
|
|
@@ -390,81 +390,81 @@ const Te = {
|
|
|
390
390
|
setup(e, { emit: r }) {
|
|
391
391
|
const t = e, o = r, d = m(() => {
|
|
392
392
|
let a = 0;
|
|
393
|
-
for (const
|
|
394
|
-
if (
|
|
395
|
-
const l = t.modelValue[
|
|
393
|
+
for (const s of t.filters) {
|
|
394
|
+
if (s.excludeFromCount) continue;
|
|
395
|
+
const l = t.modelValue[s.key];
|
|
396
396
|
l && typeof l == "object" ? a += Object.values(l).filter(Boolean).length : l === !0 && (a += 1);
|
|
397
397
|
}
|
|
398
398
|
return a;
|
|
399
399
|
}), f = m(
|
|
400
400
|
() => d.value > 0 ? `${t.filterButtonText} (${d.value})` : t.filterButtonText
|
|
401
|
-
), { el:
|
|
401
|
+
), { el: c, suppressClick: x, dragHandlers: y } = Ie(), C = m(() => ee("phila-filter-chip-group", t.elevated && "is-elevated", t.className));
|
|
402
402
|
function v(a) {
|
|
403
403
|
return Array.isArray(a.choices);
|
|
404
404
|
}
|
|
405
405
|
function h(a) {
|
|
406
|
-
const
|
|
406
|
+
const s = {};
|
|
407
407
|
for (const l of t.filters) {
|
|
408
|
-
const
|
|
408
|
+
const z = a[l.key];
|
|
409
409
|
if (Array.isArray(l.choices) && l.choices.length > 0) {
|
|
410
|
-
const U =
|
|
411
|
-
|
|
410
|
+
const U = z && typeof z == "object" ? z : {};
|
|
411
|
+
s[l.key] = Object.fromEntries(l.choices.map((F) => [F.value, !!U[F.value]]));
|
|
412
412
|
} else
|
|
413
|
-
|
|
413
|
+
s[l.key] = z === !0;
|
|
414
414
|
}
|
|
415
|
-
return
|
|
415
|
+
return s;
|
|
416
416
|
}
|
|
417
|
-
function
|
|
418
|
-
o("update:modelValue", h({ ...t.modelValue, [a]:
|
|
417
|
+
function I(a, s) {
|
|
418
|
+
o("update:modelValue", h({ ...t.modelValue, [a]: s }));
|
|
419
419
|
}
|
|
420
|
-
function
|
|
421
|
-
|
|
420
|
+
function O(a) {
|
|
421
|
+
x.value && (a.stopPropagation(), a.preventDefault());
|
|
422
422
|
}
|
|
423
|
-
const u =
|
|
424
|
-
function
|
|
425
|
-
const a =
|
|
423
|
+
const u = $(!1), b = $(!1);
|
|
424
|
+
function w() {
|
|
425
|
+
const a = c.value;
|
|
426
426
|
a && (u.value = a.scrollLeft > 1, b.value = a.scrollLeft + a.clientWidth < a.scrollWidth - 1);
|
|
427
427
|
}
|
|
428
428
|
function A(a) {
|
|
429
|
-
const
|
|
430
|
-
|
|
429
|
+
const s = c.value;
|
|
430
|
+
s && s.scrollBy({ left: a * s.clientWidth * 0.8, behavior: "smooth" });
|
|
431
431
|
}
|
|
432
|
-
let
|
|
433
|
-
return
|
|
434
|
-
o("update:modelValue", h(t.modelValue)),
|
|
435
|
-
}),
|
|
436
|
-
|
|
432
|
+
let S = null;
|
|
433
|
+
return G(() => {
|
|
434
|
+
o("update:modelValue", h(t.modelValue)), X(w), c.value && (S = new ResizeObserver(() => w()), S.observe(c.value));
|
|
435
|
+
}), W(() => {
|
|
436
|
+
S?.disconnect(), S = null;
|
|
437
437
|
}), N(
|
|
438
438
|
() => t.filters,
|
|
439
|
-
() =>
|
|
440
|
-
), (a,
|
|
441
|
-
class: j(
|
|
439
|
+
() => X(w)
|
|
440
|
+
), (a, s) => (n(), g("div", {
|
|
441
|
+
class: j(C.value)
|
|
442
442
|
}, [
|
|
443
|
-
e.label ? (
|
|
443
|
+
e.label ? (n(), g("span", Te, L(e.label), 1)) : V("", !0),
|
|
444
444
|
T("div", Oe, [
|
|
445
|
-
u.value ? (
|
|
445
|
+
u.value ? (n(), g("button", {
|
|
446
446
|
key: 0,
|
|
447
447
|
type: "button",
|
|
448
448
|
class: "phila-filter-chip-group__arrow phila-filter-chip-group__arrow--left",
|
|
449
449
|
"aria-label": "Scroll filters left",
|
|
450
|
-
onClick:
|
|
450
|
+
onClick: s[0] || (s[0] = (l) => A(-1))
|
|
451
451
|
}, [
|
|
452
|
-
|
|
452
|
+
P(p(D), {
|
|
453
453
|
icon: p(de),
|
|
454
454
|
size: "xxsmall",
|
|
455
455
|
inline: "",
|
|
456
456
|
decorative: ""
|
|
457
457
|
}, null, 8, ["icon"])
|
|
458
|
-
])) :
|
|
458
|
+
])) : V("", !0),
|
|
459
459
|
T("div", ne({
|
|
460
460
|
ref_key: "el",
|
|
461
|
-
ref:
|
|
461
|
+
ref: c,
|
|
462
462
|
class: "phila-filter-chip-group__row"
|
|
463
463
|
}, p(y), {
|
|
464
|
-
onClickCapture:
|
|
465
|
-
onScroll:
|
|
464
|
+
onClickCapture: O,
|
|
465
|
+
onScroll: w
|
|
466
466
|
}), [
|
|
467
|
-
e.filterButton ? (
|
|
467
|
+
e.filterButton ? (n(), k(H, {
|
|
468
468
|
key: 0,
|
|
469
469
|
size: e.size,
|
|
470
470
|
color: e.color,
|
|
@@ -472,9 +472,9 @@ const Te = {
|
|
|
472
472
|
text: f.value,
|
|
473
473
|
active: d.value > 0,
|
|
474
474
|
"aria-label": f.value,
|
|
475
|
-
onClick:
|
|
476
|
-
}, null, 8, ["size", "color", "icon", "text", "active", "aria-label"])) :
|
|
477
|
-
(
|
|
475
|
+
onClick: s[1] || (s[1] = (l) => o("open-filters"))
|
|
476
|
+
}, null, 8, ["size", "color", "icon", "text", "active", "aria-label"])) : V("", !0),
|
|
477
|
+
(n(!0), g(_, null, ce(e.filters, (l) => (n(), k(Ve, {
|
|
478
478
|
key: l.key,
|
|
479
479
|
label: l.label,
|
|
480
480
|
text: l.label,
|
|
@@ -487,28 +487,28 @@ const Te = {
|
|
|
487
487
|
"show-actions": l.showActions,
|
|
488
488
|
"model-value": v(l) ? e.modelValue[l.key] : void 0,
|
|
489
489
|
selected: !v(l) && e.modelValue[l.key] === !0,
|
|
490
|
-
"onUpdate:modelValue": (
|
|
491
|
-
"onUpdate:selected": (
|
|
490
|
+
"onUpdate:modelValue": (z) => I(l.key, z),
|
|
491
|
+
"onUpdate:selected": (z) => I(l.key, z)
|
|
492
492
|
}, null, 8, ["label", "text", "size", "color", "icon", "icon-color", "choices", "multiple", "show-actions", "model-value", "selected", "onUpdate:modelValue", "onUpdate:selected"]))), 128))
|
|
493
493
|
], 16),
|
|
494
|
-
b.value ? (
|
|
494
|
+
b.value ? (n(), g("button", {
|
|
495
495
|
key: 1,
|
|
496
496
|
type: "button",
|
|
497
497
|
class: "phila-filter-chip-group__arrow phila-filter-chip-group__arrow--right",
|
|
498
498
|
"aria-label": "Scroll filters right",
|
|
499
|
-
onClick:
|
|
499
|
+
onClick: s[2] || (s[2] = (l) => A(1))
|
|
500
500
|
}, [
|
|
501
|
-
|
|
501
|
+
P(p(D), {
|
|
502
502
|
icon: p(ve),
|
|
503
503
|
size: "xxsmall",
|
|
504
504
|
inline: "",
|
|
505
505
|
decorative: ""
|
|
506
506
|
}, null, 8, ["icon"])
|
|
507
|
-
])) :
|
|
507
|
+
])) : V("", !0)
|
|
508
508
|
])
|
|
509
509
|
], 2));
|
|
510
510
|
}
|
|
511
|
-
}), De = /* @__PURE__ */ te(
|
|
511
|
+
}), De = /* @__PURE__ */ te(Ae, [["__scopeId", "data-v-b84936b9"]]);
|
|
512
512
|
export {
|
|
513
513
|
Ve as FilterChip,
|
|
514
514
|
De as FilterChipGroup
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-filter-chip",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Filter chips for faceted filtering",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
"vue": "^3.0.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@phila/phila-ui-core": "3.0.0
|
|
32
|
-
"@phila/phila-ui-radio": "1.0.0
|
|
33
|
-
"@phila/phila-ui-checkbox": "1.0.0
|
|
34
|
-
"@phila/phila-ui-button": "2.3.0
|
|
31
|
+
"@phila/phila-ui-core": "3.0.0",
|
|
32
|
+
"@phila/phila-ui-radio": "1.0.0",
|
|
33
|
+
"@phila/phila-ui-checkbox": "1.0.0",
|
|
34
|
+
"@phila/phila-ui-button": "2.3.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/node": "^24.0.0",
|