@phila/phila-ui-filter-chip 1.0.0-beta.12 → 1.0.0-beta.13

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.
Files changed (5) hide show
  1. package/dist/FilterChipDropdownPanel.vue.d.ts.map +1 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.mjs +153 -147
  5. package/package.json +3 -3
package/dist/FilterChipDropdownPanel.vue.d.ts.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"FilterChipDropdownPanel.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipDropdownPanel.vue"],"names":[],"mappings":"AA+RA,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;;AAoStB,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;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-cfca208a]{display:flex;flex-direction:column;gap:var(--spacing-2xs)}.phila-filter-chip-group__viewport[data-v-cfca208a]{position:relative}.phila-filter-chip-group__label[data-v-cfca208a]{padding-inline:var(--spacing-m)}.phila-filter-chip-group__row[data-v-cfca208a]{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-cfca208a]::-webkit-scrollbar{display:none}.phila-filter-chip-group__arrow[data-v-cfca208a]{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-cfca208a]{left:var(--spacing-m)}.phila-filter-chip-group__arrow--right[data-v-cfca208a]{right:var(--spacing-m)}@media(hover:hover)and (pointer:fine){.phila-filter-chip-group__viewport:hover .phila-filter-chip-group__arrow[data-v-cfca208a]{display:flex}}.phila-filter-chip-group.is-elevated[data-v-cfca208a] .phila-filter-chip{box-shadow:0 2px 4px #0003}.phila-filter-chip-group.is-elevated .phila-filter-chip-group__row[data-v-cfca208a]{padding-top:2px;padding-bottom:8px}
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__footer--reset-only{justify-content:flex-end}.phila-filter-chip-sheet__footer--reset-only>*{flex:0 0 auto}.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,.phila-filter-chip-sheet .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,.phila-filter-chip-sheet .phila-filter-chip-panel__reset:focus-visible{outline:2px solid var(--Schemes-Primary);outline-offset:2px}.phila-filter-chip-group[data-v-cfca208a]{display:flex;flex-direction:column;gap:var(--spacing-2xs)}.phila-filter-chip-group__viewport[data-v-cfca208a]{position:relative}.phila-filter-chip-group__label[data-v-cfca208a]{padding-inline:var(--spacing-m)}.phila-filter-chip-group__row[data-v-cfca208a]{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-cfca208a]::-webkit-scrollbar{display:none}.phila-filter-chip-group__arrow[data-v-cfca208a]{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-cfca208a]{left:var(--spacing-m)}.phila-filter-chip-group__arrow--right[data-v-cfca208a]{right:var(--spacing-m)}@media(hover:hover)and (pointer:fine){.phila-filter-chip-group__viewport:hover .phila-filter-chip-group__arrow[data-v-cfca208a]{display:flex}}.phila-filter-chip-group.is-elevated[data-v-cfca208a] .phila-filter-chip{box-shadow:0 2px 4px #0003}.phila-filter-chip-group.is-elevated .phila-filter-chip-group__row[data-v-cfca208a]{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"),g=require("@phila/phila-ui-core"),S=require("@phila/phila-ui-core/icons"),U=require("@phila/phila-ui-radio"),L=require("@phila/phila-ui-checkbox"),N=require("@phila/phila-ui-button"),R=["aria-pressed","aria-expanded"],O="xxsmall",j=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(S.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,R))}}),P=(t,s)=>{const l=t.__vccOpts||t;for(const[n,d]of s)l[n]=d;return l},I=P(j,[["__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),b=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]=x=>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]=x=>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:b.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:b.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(N.PhilaButton),{variant:"secondary",text:t.resetText,onClick:m},null,8,["text"]),t.showActions?(e.openBlock(),e.createBlock(e.unref(N.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(N.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","close"],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:b,setVisibility:p}=g.useVisibility({id:v,group:"phila-filter-chip",outsideClickHide:!0,escapeKeyHide:!0,showSingle:!0}),m=e.computed(()=>b(v)),{isMobile:C}=K(),V=e.ref(null),u=e.ref(0),h=e.ref(0),x=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(x.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}),a||n("close")});function k(){const a=!m.value;a&&!C.value&&r(),p(a)}function $(a){n("update:modelValue",a)}function T(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",x.value)}),(a,B)=>d.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(I,{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:k},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:x.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:T,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(I,{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)},b=()=>{if(t.value&&c!==null){try{t.value.releasePointerCapture(c)}catch{}c=null}l=!1,f&&setTimeout(()=>s.value=!1,0)};return e.onBeforeUnmount(b),{el:t,suppressClick:s,dragHandlers:{onPointerdown:y,onPointermove:v,onPointerup:b,onPointerleave:b}}}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"},applyText:{default:"Apply"},resetText:{default:"Reset"},elevated:{type:Boolean,default:!1},className:{}},emits:["update:modelValue","open-filters","dropdown-close"],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(),b=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 k=i[o.key];if(Array.isArray(o.choices)&&o.choices.length>0){const $=k&&typeof k=="object"?k:{};r[o.key]=Object.fromEntries(o.choices.map(T=>[T.value,!!$[T.value]]))}else r[o.key]=k===!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 x(){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(x),c.value&&(z=new ResizeObserver(()=>x()),z.observe(c.value))}),e.onBeforeUnmount(()=>{z?.disconnect(),z=null}),e.watch(()=>l.filters,()=>e.nextTick(x)),(i,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(b.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(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:x}),[t.filterButton?(e.openBlock(),e.createBlock(I,{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,"apply-text":t.applyText,"reset-text":t.resetText,"model-value":p(o)?t.modelValue[o.key]:void 0,selected:!p(o)&&t.modelValue[o.key]===!0,"onUpdate:modelValue":k=>C(o.key,k),"onUpdate:selected":k=>C(o.key,k),onClose:k=>n("dropdown-close",o.key)},null,8,["label","text","size","color","icon","icon-color","choices","multiple","show-actions","apply-text","reset-text","model-value","selected","onUpdate:modelValue","onUpdate:selected","onClose"]))),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(S.IconChevronRight),size:"xxsmall",inline:"",decorative:""},null,8,["icon"])])):e.createCommentVNode("",!0)])],2))}}),te=P(ee,[["__scopeId","data-v-cfca208a"]]);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"),S=require("@phila/phila-ui-core/icons"),U=require("@phila/phila-ui-radio"),L=require("@phila/phila-ui-checkbox"),N=require("@phila/phila-ui-button"),R=["aria-pressed","aria-expanded"],A="xxsmall",j=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:u}){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"));u({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":A,"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(S.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:A,inline:"",decorative:""},null,8,["icon"])):e.createCommentVNode("",!0)],14,R))}}),P=(t,u)=>{const l=t.__vccOpts||t;for(const[n,d]of u)l[n]=d;return l},I=P(j,[["__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:2,class:"phila-filter-chip-panel__footer"},W=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:u}){const l=t,n=u;function d(s){return Object.fromEntries(l.choices.map(h=>[h.value,!!s[h.value]]))}const f=e.ref(d(l.value));e.watch(()=>l.value,s=>f.value=d(s));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),b=e.computed(()=>l.choices.map(s=>({text:s.text,value:s.value,tooltip:s.tooltip})));function p(s){l.showActions?f.value=s:n("update:modelValue",s)}const m=()=>{f.value=Object.fromEntries(l.choices.map(s=>[s.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(s,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]=x=>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]=x=>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:b.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:b.value,"model-value":c.value,"onUpdate:modelValue":p},null,8,["group-label","choices","model-value"]))],2),t.mobile?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["phila-filter-chip-sheet__footer",{"phila-filter-chip-sheet__footer--reset-only":!t.showActions}])},[t.showActions?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(e.unref(N.PhilaButton),{variant:"secondary",text:t.resetText,onClick:m},null,8,["text"]),e.createVNode(e.unref(N.PhilaButton),{variant:"primary",text:v.value,onClick:C},null,8,["text"])],64)):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"phila-filter-chip-panel__reset has-text-body-small",onClick:m},e.toDisplayString(t.resetText),1))],2)):(e.openBlock(),e.createElementBlock("div",H,[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(N.PhilaButton),{key:0,variant:"primary",size:"small",text:t.applyText,onClick:C},null,8,["text"])):e.createCommentVNode("",!0)]))],14,M)]))}}),O="(max-width: 1064px) and (max-height: 915px)";function X(){const t=e.ref(typeof window<"u"&&window.matchMedia(O).matches);let u=null;function l(n){t.value=n.matches}return e.onMounted(()=>{u=window.matchMedia(O),t.value=u.matches,u.addEventListener("change",l)}),e.onBeforeUnmount(()=>{u?.removeEventListener("change",l)}),{isMobile:t}}let K=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","close"],setup(t,{emit:u}){const l=t,n=u,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()}-${++K}`,{isVisible:b,setVisibility:p}=g.useVisibility({id:v,group:"phila-filter-chip",outsideClickHide:!0,escapeKeyHide:!0,showSingle:!0}),m=e.computed(()=>b(v)),{isMobile:C}=X(),V=e.ref(null),s=e.ref(0),h=e.ref(0),x=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(x.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();s.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}),a||n("close")});function k(){const a=!m.value;a&&!C.value&&r(),p(a)}function $(a){n("update:modelValue",a)}function T(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",x.value)}),(a,B)=>d.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(I,{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:k},null,8,["text","size","color","icon","icon-color","active","aria-expanded","data-toggle"]),m.value?(e.openBlock(),e.createBlock(W,{key:0,"menu-id":v,label:t.label??t.text??"",choices:t.choices,multiple:t.multiple,value:x.value,"show-actions":t.showActions,top:s.value,left:h.value,mobile:e.unref(C),"apply-text":t.applyText,"reset-text":t.resetText,"onUpdate:modelValue":$,onApply:T,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(I,{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"]))}}),Q=5;function Y(){const t=e.ref(null),u=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)>Q&&(f=!0,u.value=!0,t.value.setPointerCapture(p.pointerId),c=p.pointerId),f&&(t.value.scrollLeft=d-m)},b=()=>{if(t.value&&c!==null){try{t.value.releasePointerCapture(c)}catch{}c=null}l=!1,f&&setTimeout(()=>u.value=!1,0)};return e.onBeforeUnmount(b),{el:t,suppressClick:u,dragHandlers:{onPointerdown:y,onPointermove:v,onPointerup:b,onPointerleave:b}}}const J={key:0,class:"phila-filter-chip-group__label has-text-label-default"},Z={class:"phila-filter-chip-group__viewport"},_=e.defineComponent({__name:"FilterChipGroup",props:{filters:{},modelValue:{default:()=>({})},label:{},size:{default:"medium"},color:{default:"blue"},filterButton:{type:Boolean,default:!1},filterButtonText:{default:"Filters"},applyText:{default:"Apply"},resetText:{default:"Reset"},elevated:{type:Boolean,default:!1},className:{}},emits:["update:modelValue","open-filters","dropdown-close"],setup(t,{emit:u}){const l=t,n=u,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}=Y(),b=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 k=i[o.key];if(Array.isArray(o.choices)&&o.choices.length>0){const $=k&&typeof k=="object"?k:{};r[o.key]=Object.fromEntries(o.choices.map(T=>[T.value,!!$[T.value]]))}else r[o.key]=k===!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 s=e.ref(!1),h=e.ref(!1);function x(){const i=c.value;i&&(s.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(x),c.value&&(z=new ResizeObserver(()=>x()),z.observe(c.value))}),e.onBeforeUnmount(()=>{z?.disconnect(),z=null}),e.watch(()=>l.filters,()=>e.nextTick(x)),(i,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(b.value)},[t.label?(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",Z,[s.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(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:x}),[t.filterButton?(e.openBlock(),e.createBlock(I,{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,"apply-text":t.applyText,"reset-text":t.resetText,"model-value":p(o)?t.modelValue[o.key]:void 0,selected:!p(o)&&t.modelValue[o.key]===!0,"onUpdate:modelValue":k=>C(o.key,k),"onUpdate:selected":k=>C(o.key,k),onClose:k=>n("dropdown-close",o.key)},null,8,["label","text","size","color","icon","icon-color","choices","multiple","show-actions","apply-text","reset-text","model-value","selected","onUpdate:modelValue","onUpdate:selected","onClose"]))),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(S.IconChevronRight),size:"xxsmall",inline:"",decorative:""},null,8,["icon"])])):e.createCommentVNode("",!0)])],2))}}),ee=P(_,[["__scopeId","data-v-cfca208a"]]);exports.FilterChip=D;exports.FilterChipGroup=ee;
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
- import { defineComponent as D, ref as $, computed as m, createElementBlock as k, openBlock as n, normalizeStyle as Q, normalizeClass as R, createVNode as P, createBlock as C, createCommentVNode as V, unref as v, withCtx as Y, renderSlot as J, createTextVNode as Z, toDisplayString as L, watch as N, Teleport as oe, createElementVNode as I, 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";
1
+ import { defineComponent as D, ref as V, computed as h, createElementBlock as x, openBlock as n, normalizeStyle as Y, normalizeClass as F, createVNode as L, createBlock as B, createCommentVNode as $, unref as v, withCtx as J, renderSlot as Z, createTextVNode as _, toDisplayString as P, watch as N, Teleport as oe, createElementVNode as I, Fragment as G, onMounted as W, onBeforeUnmount as X, useSlots as ie, useId as ae, nextTick as q, mergeProps as ne, renderList as ce } from "vue";
2
2
  import { cn as ee, ActionContent as se, Icon as j, useVisibility as ue } from "@phila/phila-ui-core";
3
3
  import { IconChevronDown as re, IconChevronLeft as de, IconSliders as fe, IconChevronRight as pe } from "@phila/phila-ui-core/icons";
4
4
  import { RadioGroup as ve } 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"], q = "xxsmall", ye = /* @__PURE__ */ D({
7
+ import './index.css';const he = ["aria-pressed", "aria-expanded"], K = "xxsmall", ye = /* @__PURE__ */ D({
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"], q = "xxsmall"
21
21
  },
22
22
  emits: ["click"],
23
23
  setup(e, { expose: r }) {
24
- const t = e, o = $(null), d = m(
24
+ const t = e, o = V(null), d = h(
25
25
  () => ee(
26
26
  "phila-filter-chip",
27
27
  `phila-filter-chip--${t.color}`,
@@ -42,44 +42,44 @@ import './index.css';const he = ["aria-pressed", "aria-expanded"], q = "xxsmall"
42
42
  return "extra-small";
43
43
  }
44
44
  };
45
- return (c, x) => (n(), k("button", {
45
+ return (c, g) => (n(), x("button", {
46
46
  ref_key: "rootEl",
47
47
  ref: o,
48
48
  type: "button",
49
- class: R(d.value),
50
- style: Q(e.iconColor ? { "--chip-icon-color": e.iconColor } : void 0),
49
+ class: F(d.value),
50
+ style: Y(e.iconColor ? { "--chip-icon-color": e.iconColor } : void 0),
51
51
  "aria-pressed": e.ariaPressed,
52
52
  "aria-expanded": e.ariaExpanded,
53
- onClick: x[0] || (x[0] = (y) => c.$emit("click", y))
53
+ onClick: g[0] || (g[0] = (y) => c.$emit("click", y))
54
54
  }, [
55
- P(v(se), {
55
+ L(v(se), {
56
56
  icon: e.icon,
57
57
  size: e.size,
58
58
  inline: "",
59
- "icon-size": q,
59
+ "icon-size": K,
60
60
  "icon-only": e.iconOnly
61
61
  }, {
62
- default: Y(() => [
63
- J(c.$slots, "default", {}, () => [
64
- Z(L(e.text), 1)
62
+ default: J(() => [
63
+ Z(c.$slots, "default", {}, () => [
64
+ _(P(e.text), 1)
65
65
  ], !0)
66
66
  ]),
67
67
  _: 3
68
68
  }, 8, ["icon", "size", "icon-only"]),
69
- e.chevron ? (n(), C(v(j), {
69
+ e.chevron ? (n(), B(v(j), {
70
70
  key: 0,
71
71
  icon: v(re),
72
72
  size: "xxsmall",
73
73
  inline: "",
74
74
  decorative: "",
75
75
  class: "phila-filter-chip__chevron"
76
- }, null, 8, ["icon"])) : e.trailingIcon ? (n(), C(v(j), {
76
+ }, null, 8, ["icon"])) : e.trailingIcon ? (n(), B(v(j), {
77
77
  key: 1,
78
78
  icon: e.trailingIcon,
79
- size: q,
79
+ size: K,
80
80
  inline: "",
81
81
  decorative: ""
82
- }, null, 8, ["icon"])) : V("", !0)
82
+ }, null, 8, ["icon"])) : $("", !0)
83
83
  ], 14, he));
84
84
  }
85
85
  }), te = (e, r) => {
@@ -91,12 +91,9 @@ import './index.css';const he = ["aria-pressed", "aria-expanded"], q = "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: 1,
95
- class: "phila-filter-chip-sheet__footer"
96
- }, Ce = {
97
94
  key: 2,
98
95
  class: "phila-filter-chip-panel__footer"
99
- }, we = /* @__PURE__ */ D({
96
+ }, Ce = /* @__PURE__ */ D({
100
97
  __name: "FilterChipDropdownPanel",
101
98
  props: {
102
99
  menuId: {},
@@ -117,107 +114,116 @@ import './index.css';const he = ["aria-pressed", "aria-expanded"], q = "xxsmall"
117
114
  function d(u) {
118
115
  return Object.fromEntries(t.choices.map((b) => [b.value, !!u[b.value]]));
119
116
  }
120
- const f = $(d(t.value));
117
+ const f = V(d(t.value));
121
118
  N(
122
119
  () => t.value,
123
120
  (u) => f.value = d(u)
124
121
  );
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
- ), w = m(() => t.choices.map((u) => ({ text: u.text, value: u.value, tooltip: u.tooltip })));
122
+ const c = h(() => t.showActions ? f.value : d(t.value)), g = h(() => Object.values(c.value).filter(Boolean).length), y = h(
123
+ () => g.value > 0 ? `${t.applyText} (${g.value})` : t.applyText
124
+ ), C = h(() => t.choices.map((u) => ({ text: u.text, value: u.value, tooltip: u.tooltip })));
128
125
  function p(u) {
129
126
  t.showActions ? f.value = u : o("update:modelValue", u);
130
127
  }
131
- const h = () => {
128
+ const m = () => {
132
129
  f.value = Object.fromEntries(t.choices.map((u) => [u.value, !1])), o("reset");
133
- }, T = () => o("apply", { ...f.value }), A = m(() => ({
130
+ }, T = () => o("apply", { ...f.value }), A = h(() => ({
134
131
  top: t.top + "px",
135
132
  left: t.left + "px",
136
133
  maxHeight: `calc(100dvh - ${t.top}px - 0.5rem)`
137
134
  }));
138
- return (u, b) => (n(), C(oe, { to: "body" }, [
139
- e.mobile ? (n(), k("div", {
135
+ return (u, b) => (n(), B(oe, { to: "body" }, [
136
+ e.mobile ? (n(), x("div", {
140
137
  key: 0,
141
138
  class: "phila-filter-chip-sheet__scrim",
142
- onClick: b[0] || (b[0] = (z) => o("close"))
143
- })) : V("", !0),
139
+ onClick: b[0] || (b[0] = (w) => o("close"))
140
+ })) : $("", !0),
144
141
  I("div", {
145
142
  id: e.menuId,
146
- class: R(e.mobile ? "phila-filter-chip-sheet" : "phila-filter-chip-panel"),
143
+ class: F(e.mobile ? "phila-filter-chip-sheet" : "phila-filter-chip-panel"),
147
144
  role: "dialog",
148
145
  "aria-label": e.label,
149
- style: Q(e.mobile ? void 0 : A.value)
146
+ style: Y(e.mobile ? void 0 : A.value)
150
147
  }, [
151
- e.mobile ? (n(), k("header", xe, [
152
- I("span", ge, L(e.label), 1),
148
+ e.mobile ? (n(), x("header", xe, [
149
+ I("span", ge, P(e.label), 1),
153
150
  I("button", {
154
151
  type: "button",
155
152
  class: "phila-filter-chip-sheet__close",
156
153
  "aria-label": "Close",
157
- onClick: b[1] || (b[1] = (z) => o("close"))
154
+ onClick: b[1] || (b[1] = (w) => o("close"))
158
155
  }, " ✕ ")
159
- ])) : V("", !0),
156
+ ])) : $("", !0),
160
157
  I("div", {
161
- class: R(e.mobile ? "phila-filter-chip-sheet__body" : "phila-filter-chip-panel__body")
158
+ class: F(e.mobile ? "phila-filter-chip-sheet__body" : "phila-filter-chip-panel__body")
162
159
  }, [
163
- e.multiple ? (n(), C(v(me), {
160
+ e.multiple ? (n(), B(v(me), {
164
161
  key: 0,
165
162
  "group-label": e.label,
166
- choices: w.value,
163
+ choices: C.value,
167
164
  "model-value": c.value,
168
165
  "onUpdate:modelValue": p
169
- }, null, 8, ["group-label", "choices", "model-value"])) : (n(), C(v(ve), {
166
+ }, null, 8, ["group-label", "choices", "model-value"])) : (n(), B(v(ve), {
170
167
  key: 1,
171
168
  "group-label": e.label,
172
- choices: w.value,
169
+ choices: C.value,
173
170
  "model-value": c.value,
174
171
  "onUpdate:modelValue": p
175
172
  }, null, 8, ["group-label", "choices", "model-value"]))
176
173
  ], 2),
177
- e.mobile ? (n(), k("div", ke, [
178
- P(v(M), {
179
- variant: "secondary",
180
- text: e.resetText,
181
- onClick: h
182
- }, null, 8, ["text"]),
183
- e.showActions ? (n(), C(v(M), {
184
- key: 0,
185
- variant: "primary",
186
- text: y.value,
187
- onClick: T
188
- }, null, 8, ["text"])) : V("", !0)
189
- ])) : (n(), k("div", Ce, [
174
+ e.mobile ? (n(), x("div", {
175
+ key: 1,
176
+ class: F(["phila-filter-chip-sheet__footer", { "phila-filter-chip-sheet__footer--reset-only": !e.showActions }])
177
+ }, [
178
+ e.showActions ? (n(), x(G, { key: 0 }, [
179
+ L(v(M), {
180
+ variant: "secondary",
181
+ text: e.resetText,
182
+ onClick: m
183
+ }, null, 8, ["text"]),
184
+ L(v(M), {
185
+ variant: "primary",
186
+ text: y.value,
187
+ onClick: T
188
+ }, null, 8, ["text"])
189
+ ], 64)) : (n(), x("button", {
190
+ key: 1,
191
+ type: "button",
192
+ class: "phila-filter-chip-panel__reset has-text-body-small",
193
+ onClick: m
194
+ }, P(e.resetText), 1))
195
+ ], 2)) : (n(), x("div", ke, [
190
196
  I("button", {
191
197
  type: "button",
192
198
  class: "phila-filter-chip-panel__reset has-text-body-small",
193
- onClick: h
194
- }, L(e.resetText), 1),
195
- e.showActions ? (n(), C(v(M), {
199
+ onClick: m
200
+ }, P(e.resetText), 1),
201
+ e.showActions ? (n(), B(v(M), {
196
202
  key: 0,
197
203
  variant: "primary",
198
204
  size: "small",
199
205
  text: e.applyText,
200
206
  onClick: T
201
- }, null, 8, ["text"])) : V("", !0)
207
+ }, null, 8, ["text"])) : $("", !0)
202
208
  ]))
203
209
  ], 14, be)
204
210
  ]));
205
211
  }
206
- }), K = "(max-width: 1064px) and (max-height: 915px)";
207
- function ze() {
208
- const e = $(typeof window < "u" && window.matchMedia(K).matches);
212
+ }), Q = "(max-width: 1064px) and (max-height: 915px)";
213
+ function we() {
214
+ const e = V(typeof window < "u" && window.matchMedia(Q).matches);
209
215
  let r = null;
210
216
  function t(o) {
211
217
  e.value = o.matches;
212
218
  }
213
- return G(() => {
214
- r = window.matchMedia(K), e.value = r.matches, r.addEventListener("change", t);
215
- }), W(() => {
219
+ return W(() => {
220
+ r = window.matchMedia(Q), e.value = r.matches, r.addEventListener("change", t);
221
+ }), X(() => {
216
222
  r?.removeEventListener("change", t);
217
223
  }), { isMobile: e };
218
224
  }
219
- let Be = 0;
220
- const Ve = /* @__PURE__ */ D({
225
+ let ze = 0;
226
+ const Be = /* @__PURE__ */ D({
221
227
  __name: "FilterChip",
222
228
  props: {
223
229
  label: { default: void 0 },
@@ -238,56 +244,56 @@ const Ve = /* @__PURE__ */ D({
238
244
  },
239
245
  emits: ["update:selected", "update:modelValue", "click", "close"],
240
246
  setup(e, { emit: r }) {
241
- const t = e, o = r, d = m(() => Array.isArray(t.choices)), f = ie(), c = m(
247
+ const t = e, o = r, d = h(() => Array.isArray(t.choices)), f = ie(), c = h(
242
248
  () => !d.value && !!t.icon && !t.text && !t.label && !f.default
243
249
  );
244
- function x(i) {
250
+ function g(i) {
245
251
  o("update:selected", !t.selected), o("click", i);
246
252
  }
247
- const y = `phila-filter-chip-${ae()}-${++Be}`, { isVisible: w, setVisibility: p } = ue({
253
+ const y = `phila-filter-chip-${ae()}-${++ze}`, { isVisible: C, setVisibility: p } = ue({
248
254
  id: y,
249
255
  group: "phila-filter-chip",
250
256
  outsideClickHide: !0,
251
257
  escapeKeyHide: !0,
252
258
  showSingle: !0
253
- }), h = m(() => w(y)), { isMobile: T } = ze(), A = $(null), u = $(0), b = $(0), z = m(() => {
254
- const i = t.choices ?? [], B = t.modelValue ?? {};
255
- return Object.fromEntries(i.map((E) => [E.value, !!B[E.value]]));
256
- }), O = m(() => Object.values(z.value).filter(Boolean).length), S = m(() => O.value > 0), a = m(() => {
259
+ }), m = h(() => C(y)), { isMobile: T } = we(), A = V(null), u = V(0), b = V(0), w = h(() => {
260
+ const i = t.choices ?? [], z = t.modelValue ?? {};
261
+ return Object.fromEntries(i.map((E) => [E.value, !!z[E.value]]));
262
+ }), O = h(() => Object.values(w.value).filter(Boolean).length), S = h(() => O.value > 0), a = h(() => {
257
263
  const i = t.label ?? t.text ?? "";
258
264
  return O.value > 0 ? `${i} (${O.value})` : i;
259
265
  });
260
266
  function s() {
261
267
  const i = A.value?.el ?? null;
262
268
  if (!i) return;
263
- const B = i.getBoundingClientRect();
264
- u.value = B.bottom + 4, b.value = B.left;
269
+ const z = i.getBoundingClientRect();
270
+ u.value = z.bottom + 4, b.value = z.left;
265
271
  }
266
272
  function l(i) {
267
- if (!h.value) return;
268
- const B = document.getElementById(y), E = i.target;
269
- B && E && B.contains(E) || p(!1);
273
+ if (!m.value) return;
274
+ const z = document.getElementById(y), E = i.target;
275
+ z && E && z.contains(E) || p(!1);
270
276
  }
271
- N(h, (i) => {
277
+ N(m, (i) => {
272
278
  i && !T.value ? window.addEventListener("scroll", l, { capture: !0 }) : window.removeEventListener("scroll", l, { capture: !0 }), i || o("close");
273
279
  });
274
- function g() {
275
- const i = !h.value;
280
+ function k() {
281
+ const i = !m.value;
276
282
  i && !T.value && s(), p(i);
277
283
  }
278
284
  function U(i) {
279
285
  o("update:modelValue", i);
280
286
  }
281
- function F(i) {
287
+ function R(i) {
282
288
  o("update:modelValue", i), p(!1);
283
289
  }
284
290
  function le() {
285
291
  o("update:modelValue", Object.fromEntries((t.choices ?? []).map((i) => [i.value, !1])));
286
292
  }
287
- return G(() => {
288
- d.value && o("update:modelValue", z.value);
289
- }), (i, B) => d.value ? (n(), k(_, { key: 0 }, [
290
- P(H, {
293
+ return W(() => {
294
+ d.value && o("update:modelValue", w.value);
295
+ }), (i, z) => d.value ? (n(), x(G, { key: 0 }, [
296
+ L(H, {
291
297
  ref_key: "triggerRef",
292
298
  ref: A,
293
299
  text: a.value,
@@ -295,19 +301,19 @@ const Ve = /* @__PURE__ */ D({
295
301
  color: e.color,
296
302
  icon: e.icon,
297
303
  "icon-color": e.iconColor,
298
- active: S.value || h.value,
304
+ active: S.value || m.value,
299
305
  chevron: "",
300
- "aria-expanded": h.value,
306
+ "aria-expanded": m.value,
301
307
  "data-toggle": `visibility-${y}`,
302
- onClick: g
308
+ onClick: k
303
309
  }, null, 8, ["text", "size", "color", "icon", "icon-color", "active", "aria-expanded", "data-toggle"]),
304
- h.value ? (n(), C(we, {
310
+ m.value ? (n(), B(Ce, {
305
311
  key: 0,
306
312
  "menu-id": y,
307
313
  label: e.label ?? e.text ?? "",
308
314
  choices: e.choices,
309
315
  multiple: e.multiple,
310
- value: z.value,
316
+ value: w.value,
311
317
  "show-actions": e.showActions,
312
318
  top: u.value,
313
319
  left: b.value,
@@ -315,11 +321,11 @@ const Ve = /* @__PURE__ */ D({
315
321
  "apply-text": e.applyText,
316
322
  "reset-text": e.resetText,
317
323
  "onUpdate:modelValue": U,
318
- onApply: F,
324
+ onApply: R,
319
325
  onReset: le,
320
- onClose: B[0] || (B[0] = (E) => v(p)(!1))
321
- }, null, 8, ["label", "choices", "multiple", "value", "show-actions", "top", "left", "mobile", "apply-text", "reset-text"])) : V("", !0)
322
- ], 64)) : (n(), C(H, {
326
+ onClose: z[0] || (z[0] = (E) => v(p)(!1))
327
+ }, null, 8, ["label", "choices", "multiple", "value", "show-actions", "top", "left", "mobile", "apply-text", "reset-text"])) : $("", !0)
328
+ ], 64)) : (n(), B(H, {
323
329
  key: 1,
324
330
  size: e.size,
325
331
  color: e.color,
@@ -329,27 +335,27 @@ const Ve = /* @__PURE__ */ D({
329
335
  "icon-only": c.value,
330
336
  active: e.selected,
331
337
  "aria-pressed": e.selected,
332
- onClick: x
338
+ onClick: g
333
339
  }, {
334
- default: Y(() => [
335
- J(i.$slots, "default", {}, () => [
336
- Z(L(e.text), 1)
340
+ default: J(() => [
341
+ Z(i.$slots, "default", {}, () => [
342
+ _(P(e.text), 1)
337
343
  ])
338
344
  ]),
339
345
  _: 3
340
346
  }, 8, ["size", "color", "icon", "icon-color", "trailing-icon", "icon-only", "active", "aria-pressed"]));
341
347
  }
342
- }), $e = 5;
348
+ }), Ve = 5;
343
349
  function Te() {
344
- const e = $(null), r = $(!1);
350
+ const e = V(null), r = V(!1);
345
351
  let t = !1, o = 0, d = 0, f = !1, c = null;
346
- const x = (p) => {
352
+ const g = (p) => {
347
353
  e.value && p.pointerType !== "mouse" && (t = !0, f = !1, o = p.clientX, d = e.value.scrollLeft);
348
354
  }, y = (p) => {
349
355
  if (!t || !e.value) return;
350
- const h = p.clientX - o;
351
- !f && Math.abs(h) > $e && (f = !0, r.value = !0, e.value.setPointerCapture(p.pointerId), c = p.pointerId), f && (e.value.scrollLeft = d - h);
352
- }, w = () => {
356
+ const m = p.clientX - o;
357
+ !f && Math.abs(m) > Ve && (f = !0, r.value = !0, e.value.setPointerCapture(p.pointerId), c = p.pointerId), f && (e.value.scrollLeft = d - m);
358
+ }, C = () => {
353
359
  if (e.value && c !== null) {
354
360
  try {
355
361
  e.value.releasePointerCapture(c);
@@ -359,21 +365,21 @@ function Te() {
359
365
  }
360
366
  t = !1, f && setTimeout(() => r.value = !1, 0);
361
367
  };
362
- return W(w), {
368
+ return X(C), {
363
369
  el: e,
364
370
  suppressClick: r,
365
371
  dragHandlers: {
366
- onPointerdown: x,
372
+ onPointerdown: g,
367
373
  onPointermove: y,
368
- onPointerup: w,
369
- onPointerleave: w
374
+ onPointerup: C,
375
+ onPointerleave: C
370
376
  }
371
377
  };
372
378
  }
373
- const Ie = {
379
+ const $e = {
374
380
  key: 0,
375
381
  class: "phila-filter-chip-group__label has-text-label-default"
376
- }, Ae = { class: "phila-filter-chip-group__viewport" }, Oe = /* @__PURE__ */ D({
382
+ }, Ie = { class: "phila-filter-chip-group__viewport" }, Ae = /* @__PURE__ */ D({
377
383
  __name: "FilterChipGroup",
378
384
  props: {
379
385
  filters: {},
@@ -390,7 +396,7 @@ const Ie = {
390
396
  },
391
397
  emits: ["update:modelValue", "open-filters", "dropdown-close"],
392
398
  setup(e, { emit: r }) {
393
- const t = e, o = r, d = m(() => {
399
+ const t = e, o = r, d = h(() => {
394
400
  let a = 0;
395
401
  for (const s of t.filters) {
396
402
  if (s.excludeFromCount) continue;
@@ -398,32 +404,32 @@ const Ie = {
398
404
  l && typeof l == "object" ? a += Object.values(l).filter(Boolean).length : l === !0 && (a += 1);
399
405
  }
400
406
  return a;
401
- }), f = m(
407
+ }), f = h(
402
408
  () => d.value > 0 ? `${t.filterButtonText} (${d.value})` : t.filterButtonText
403
- ), { el: c, suppressClick: x, dragHandlers: y } = Te(), w = m(() => ee("phila-filter-chip-group", t.elevated && "is-elevated", t.className));
409
+ ), { el: c, suppressClick: g, dragHandlers: y } = Te(), C = h(() => ee("phila-filter-chip-group", t.elevated && "is-elevated", t.className));
404
410
  function p(a) {
405
411
  return Array.isArray(a.choices);
406
412
  }
407
- function h(a) {
413
+ function m(a) {
408
414
  const s = {};
409
415
  for (const l of t.filters) {
410
- const g = a[l.key];
416
+ const k = a[l.key];
411
417
  if (Array.isArray(l.choices) && l.choices.length > 0) {
412
- const U = g && typeof g == "object" ? g : {};
413
- s[l.key] = Object.fromEntries(l.choices.map((F) => [F.value, !!U[F.value]]));
418
+ const U = k && typeof k == "object" ? k : {};
419
+ s[l.key] = Object.fromEntries(l.choices.map((R) => [R.value, !!U[R.value]]));
414
420
  } else
415
- s[l.key] = g === !0;
421
+ s[l.key] = k === !0;
416
422
  }
417
423
  return s;
418
424
  }
419
425
  function T(a, s) {
420
- o("update:modelValue", h({ ...t.modelValue, [a]: s }));
426
+ o("update:modelValue", m({ ...t.modelValue, [a]: s }));
421
427
  }
422
428
  function A(a) {
423
- x.value && (a.stopPropagation(), a.preventDefault());
429
+ g.value && (a.stopPropagation(), a.preventDefault());
424
430
  }
425
- const u = $(!1), b = $(!1);
426
- function z() {
431
+ const u = V(!1), b = V(!1);
432
+ function w() {
427
433
  const a = c.value;
428
434
  a && (u.value = a.scrollLeft > 1, b.value = a.scrollLeft + a.clientWidth < a.scrollWidth - 1);
429
435
  }
@@ -432,41 +438,41 @@ const Ie = {
432
438
  s && s.scrollBy({ left: a * s.clientWidth * 0.8, behavior: "smooth" });
433
439
  }
434
440
  let S = null;
435
- return G(() => {
436
- o("update:modelValue", h(t.modelValue)), X(z), c.value && (S = new ResizeObserver(() => z()), S.observe(c.value));
437
- }), W(() => {
441
+ return W(() => {
442
+ o("update:modelValue", m(t.modelValue)), q(w), c.value && (S = new ResizeObserver(() => w()), S.observe(c.value));
443
+ }), X(() => {
438
444
  S?.disconnect(), S = null;
439
445
  }), N(
440
446
  () => t.filters,
441
- () => X(z)
442
- ), (a, s) => (n(), k("div", {
443
- class: R(w.value)
447
+ () => q(w)
448
+ ), (a, s) => (n(), x("div", {
449
+ class: F(C.value)
444
450
  }, [
445
- e.label ? (n(), k("span", Ie, L(e.label), 1)) : V("", !0),
446
- I("div", Ae, [
447
- u.value ? (n(), k("button", {
451
+ e.label ? (n(), x("span", $e, P(e.label), 1)) : $("", !0),
452
+ I("div", Ie, [
453
+ u.value ? (n(), x("button", {
448
454
  key: 0,
449
455
  type: "button",
450
456
  class: "phila-filter-chip-group__arrow phila-filter-chip-group__arrow--left",
451
457
  "aria-label": "Scroll filters left",
452
458
  onClick: s[0] || (s[0] = (l) => O(-1))
453
459
  }, [
454
- P(v(j), {
460
+ L(v(j), {
455
461
  icon: v(de),
456
462
  size: "xxsmall",
457
463
  inline: "",
458
464
  decorative: ""
459
465
  }, null, 8, ["icon"])
460
- ])) : V("", !0),
466
+ ])) : $("", !0),
461
467
  I("div", ne({
462
468
  ref_key: "el",
463
469
  ref: c,
464
470
  class: "phila-filter-chip-group__row"
465
471
  }, v(y), {
466
472
  onClickCapture: A,
467
- onScroll: z
473
+ onScroll: w
468
474
  }), [
469
- e.filterButton ? (n(), C(H, {
475
+ e.filterButton ? (n(), B(H, {
470
476
  key: 0,
471
477
  size: e.size,
472
478
  color: e.color,
@@ -475,8 +481,8 @@ const Ie = {
475
481
  active: d.value > 0,
476
482
  "aria-label": f.value,
477
483
  onClick: s[1] || (s[1] = (l) => o("open-filters"))
478
- }, null, 8, ["size", "color", "icon", "text", "active", "aria-label"])) : V("", !0),
479
- (n(!0), k(_, null, ce(e.filters, (l) => (n(), C(Ve, {
484
+ }, null, 8, ["size", "color", "icon", "text", "active", "aria-label"])) : $("", !0),
485
+ (n(!0), x(G, null, ce(e.filters, (l) => (n(), B(Be, {
480
486
  key: l.key,
481
487
  label: l.label,
482
488
  text: l.label,
@@ -491,30 +497,30 @@ const Ie = {
491
497
  "reset-text": e.resetText,
492
498
  "model-value": p(l) ? e.modelValue[l.key] : void 0,
493
499
  selected: !p(l) && e.modelValue[l.key] === !0,
494
- "onUpdate:modelValue": (g) => T(l.key, g),
495
- "onUpdate:selected": (g) => T(l.key, g),
496
- onClose: (g) => o("dropdown-close", l.key)
500
+ "onUpdate:modelValue": (k) => T(l.key, k),
501
+ "onUpdate:selected": (k) => T(l.key, k),
502
+ onClose: (k) => o("dropdown-close", l.key)
497
503
  }, null, 8, ["label", "text", "size", "color", "icon", "icon-color", "choices", "multiple", "show-actions", "apply-text", "reset-text", "model-value", "selected", "onUpdate:modelValue", "onUpdate:selected", "onClose"]))), 128))
498
504
  ], 16),
499
- b.value ? (n(), k("button", {
505
+ b.value ? (n(), x("button", {
500
506
  key: 1,
501
507
  type: "button",
502
508
  class: "phila-filter-chip-group__arrow phila-filter-chip-group__arrow--right",
503
509
  "aria-label": "Scroll filters right",
504
510
  onClick: s[2] || (s[2] = (l) => O(1))
505
511
  }, [
506
- P(v(j), {
512
+ L(v(j), {
507
513
  icon: v(pe),
508
514
  size: "xxsmall",
509
515
  inline: "",
510
516
  decorative: ""
511
517
  }, null, 8, ["icon"])
512
- ])) : V("", !0)
518
+ ])) : $("", !0)
513
519
  ])
514
520
  ], 2));
515
521
  }
516
- }), je = /* @__PURE__ */ te(Oe, [["__scopeId", "data-v-cfca208a"]]);
522
+ }), Re = /* @__PURE__ */ te(Ae, [["__scopeId", "data-v-cfca208a"]]);
517
523
  export {
518
- Ve as FilterChip,
519
- je as FilterChipGroup
524
+ Be as FilterChip,
525
+ Re as FilterChipGroup
520
526
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phila/phila-ui-filter-chip",
3
- "version": "1.0.0-beta.12",
3
+ "version": "1.0.0-beta.13",
4
4
  "type": "module",
5
5
  "description": "Filter chips for faceted filtering",
6
6
  "main": "./dist/index.js",
@@ -29,9 +29,9 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "@phila/phila-ui-core": "3.0.0-beta.9",
32
+ "@phila/phila-ui-button": "2.3.0-beta.10",
32
33
  "@phila/phila-ui-radio": "1.0.0-beta.12",
33
- "@phila/phila-ui-checkbox": "1.0.0-beta.12",
34
- "@phila/phila-ui-button": "2.3.0-beta.10"
34
+ "@phila/phila-ui-checkbox": "1.0.0-beta.12"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@types/node": "^24.0.0",