@phila/phila-ui-filter-chip 1.0.0-beta.7 → 1.0.0-beta.8

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