@phila/phila-ui-filter-chip 0.2.0-beta.0 → 0.2.0-beta.1

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 (9) hide show
  1. package/dist/FilterChip.vue.d.ts.map +1 -1
  2. package/dist/FilterChipDropdownPanel.vue.d.ts +6 -1
  3. package/dist/FilterChipDropdownPanel.vue.d.ts.map +1 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/index.mjs +252 -201
  7. package/dist/useIsMobile.d.ts +4 -0
  8. package/dist/useIsMobile.d.ts.map +1 -0
  9. package/package.json +2 -2
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":"AA2KA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAsU2qT,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA1ElzT,GAAG;;AApPjC,wBA0SK;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":"AAmLA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAsV4nR,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA5EnwR,GAAG;;AAlQjC,wBA0TK;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 CHANGED
@@ -6,19 +6,24 @@ type __VLS_Props = {
6
6
  multiple: boolean;
7
7
  /** committed value from the parent */
8
8
  value: string | string[];
9
- /** fixed-position coords computed from the trigger rect */
9
+ /** fixed-position coords computed from the trigger rect (desktop popover) */
10
10
  top: number;
11
11
  left: number;
12
+ /** render as a bottom sheet instead of an anchored popover (mobile) */
13
+ mobile?: boolean;
12
14
  applyText?: string;
13
15
  resetText?: string;
14
16
  };
15
17
  declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
16
18
  reset: () => any;
17
19
  apply: (value: string | string[]) => any;
20
+ close: () => any;
18
21
  }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
19
22
  onReset?: (() => any) | undefined;
20
23
  onApply?: ((value: string | string[]) => any) | undefined;
24
+ onClose?: (() => any) | undefined;
21
25
  }>, {
26
+ mobile: boolean;
22
27
  applyText: string;
23
28
  resetText: string;
24
29
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
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":"AAmIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,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,sCAAsC;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,2DAA2D;IAC3D,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;;;;;;;;eAFY,MAAM;eACN,MAAM;;AA0LtB,wBASG"}
1
+ {"version":3,"file":"FilterChipDropdownPanel.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipDropdownPanel.vue"],"names":[],"mappings":"AAgOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,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,sCAAsC;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,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;;;;;;;;;;YAHS,OAAO;eACJ,MAAM;eACN,MAAM;;AA2QtB,wBASG"}
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .phila-filter-chip[data-v-7411a108]{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-7411a108]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-large[data-v-7411a108]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs)}.phila-filter-chip.is-small[data-v-7411a108]{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-7411a108]{padding-left:var(--spacing-s, .75rem);padding-right:var(--spacing-s, .75rem)}.phila-filter-chip.phila-filter-chip--blue[data-v-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]:focus-visible{outline:2px solid currentColor;outline-offset:var(--spacing-2xs)}.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-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-99d3ffdf]{display:flex;flex-direction:column;gap:var(--spacing-2xs)}.phila-filter-chip-group__viewport[data-v-99d3ffdf]{position:relative}.phila-filter-chip-group__row[data-v-99d3ffdf]{display:flex;flex-wrap:nowrap;gap:var(--spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.phila-filter-chip-group__row[data-v-99d3ffdf]::-webkit-scrollbar{display:none}.phila-filter-chip-group__arrow[data-v-99d3ffdf]{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-99d3ffdf]{left:0}.phila-filter-chip-group__arrow--right[data-v-99d3ffdf]{right:0}@media(hover:hover)and (pointer:fine){.phila-filter-chip-group__viewport:hover .phila-filter-chip-group__arrow[data-v-99d3ffdf]{display:flex}}
1
+ .phila-filter-chip[data-v-7411a108]{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-7411a108]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-large[data-v-7411a108]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs)}.phila-filter-chip.is-small[data-v-7411a108]{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-7411a108]{padding-left:var(--spacing-s, .75rem);padding-right:var(--spacing-s, .75rem)}.phila-filter-chip.phila-filter-chip--blue[data-v-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]:focus-visible{outline:2px solid currentColor;outline-offset:var(--spacing-2xs)}.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{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-99d3ffdf]{display:flex;flex-direction:column;gap:var(--spacing-2xs)}.phila-filter-chip-group__viewport[data-v-99d3ffdf]{position:relative}.phila-filter-chip-group__row[data-v-99d3ffdf]{display:flex;flex-wrap:nowrap;gap:var(--spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.phila-filter-chip-group__row[data-v-99d3ffdf]::-webkit-scrollbar{display:none}.phila-filter-chip-group__arrow[data-v-99d3ffdf]{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-99d3ffdf]{left:0}.phila-filter-chip-group__arrow--right[data-v-99d3ffdf]{right:0}@media(hover:hover)and (pointer:fine){.phila-filter-chip-group__viewport:hover .phila-filter-chip-group__arrow[data-v-99d3ffdf]{display:flex}}
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),h=require("@phila/phila-ui-core"),z=require("@fortawesome/pro-solid-svg-icons"),T=require("@phila/phila-ui-radio"),E=require("@phila/phila-ui-checkbox"),P=require("@phila/phila-ui-button"),F=["aria-pressed","aria-expanded"],w="xxsmall",R=e.defineComponent({__name:"FilterChipBase",props:{text:{default:void 0},size:{default:"medium"},color:{default:"blue"},iconDefinition:{default:void 0},trailingIconDefinition:{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:m}){const l=t,r=e.ref(null),i=e.computed(()=>h.cn("phila-filter-chip",`phila-filter-chip--${l.color}`,l.size!=="medium"&&`is-${l.size}`,"has-text-body-"+u(l.size),l.active&&"is-active",l.iconOnly&&"is-icon-only"));m({el:r});const u=a=>{switch(a){case"extra-large":return"default";case"large":return"small";default:return"extra-small"}};return(a,y)=>(e.openBlock(),e.createElementBlock("button",{ref_key:"rootEl",ref:r,type:"button",class:e.normalizeClass(i.value),"aria-pressed":t.ariaPressed,"aria-expanded":t.ariaExpanded,onClick:y[0]||(y[0]=v=>a.$emit("click",v))},[e.createVNode(e.unref(h.ActionContent),{"icon-definition":t.iconDefinition,size:t.size,inline:"","icon-size":w,"icon-only":t.iconOnly},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)],!0)]),_:3},8,["icon-definition","size","icon-only"]),t.chevron?(e.openBlock(),e.createBlock(e.unref(h.Icon),{key:0,"icon-definition":e.unref(z.faChevronDown),size:"xxsmall",inline:"",decorative:"",class:"phila-filter-chip__chevron"},null,8,["icon-definition"])):t.trailingIconDefinition?(e.openBlock(),e.createBlock(e.unref(h.Icon),{key:1,"icon-definition":t.trailingIconDefinition,size:w,inline:"",decorative:""},null,8,["icon-definition"])):e.createCommentVNode("",!0)],10,F))}}),A=(t,m)=>{const l=t.__vccOpts||t;for(const[r,i]of m)l[r]=i;return l},S=A(R,[["__scopeId","data-v-7411a108"]]),L=["id","aria-label"],U={class:"phila-filter-chip-panel__footer"},O=e.defineComponent({__name:"FilterChipDropdownPanel",props:{menuId:{},label:{},choices:{},multiple:{type:Boolean},value:{},top:{},left:{},applyText:{default:"Apply"},resetText:{default:"Reset"}},emits:["apply","reset"],setup(t,{emit:m}){const l=t,r=m,i=e.ref(typeof l.value=="string"?l.value:""),u=e.ref(Array.isArray(l.value)?[...l.value]:[]);e.watch(()=>l.value,d=>{l.multiple?u.value=Array.isArray(d)?[...d]:[]:i.value=typeof d=="string"?d:""});const a=e.computed(()=>l.choices.map(d=>({text:d.text,value:d.value}))),y=()=>{i.value="",u.value=[],r("reset")},v=()=>{r("apply",l.multiple?[...u.value]:i.value)};return(d,c)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{id:t.menuId,class:"phila-filter-chip-panel",role:"dialog","aria-label":t.label,style:e.normalizeStyle({top:t.top+"px",left:t.left+"px"})},[t.multiple?(e.openBlock(),e.createBlock(e.unref(E.CheckboxGroup),{key:0,"group-label":t.label,choices:a.value,"model-value":u.value,"onUpdate:modelValue":c[0]||(c[0]=f=>u.value=f)},null,8,["group-label","choices","model-value"])):(e.openBlock(),e.createBlock(e.unref(T.RadioGroup),{key:1,"group-label":t.label,choices:a.value,"model-value":i.value,"onUpdate:modelValue":c[1]||(c[1]=f=>i.value=f)},null,8,["group-label","choices","model-value"])),e.createElementVNode("div",U,[e.createElementVNode("button",{type:"button",class:"phila-filter-chip-panel__reset has-text-body-small",onClick:y},e.toDisplayString(t.resetText),1),e.createVNode(e.unref(P.PhilaButton),{variant:"primary",size:"small",text:t.applyText,onClick:v},null,8,["text"])])],12,L)]))}});let q=0;const I=e.defineComponent({__name:"FilterChip",props:{label:{default:void 0},text:{default:void 0},size:{default:"medium"},color:{default:"blue"},iconDefinition:{default:void 0},trailingIconDefinition:{default:void 0},selected:{type:Boolean,default:!1},choices:{default:void 0},multiple:{type:Boolean,default:!1},modelValue:{type:[String,Array,Boolean],default:void 0},applyText:{default:"Apply"},resetText:{default:"Reset"},className:{}},emits:["update:selected","update:modelValue","click"],setup(t,{emit:m}){const l=t,r=m,i=e.computed(()=>Array.isArray(l.choices)),u=e.useSlots(),a=e.computed(()=>!i.value&&!!l.iconDefinition&&!l.text&&!l.label&&!u.default);function y(p){r("update:selected",!l.selected),r("click",p)}const v=`phila-filter-chip-${e.useId()}-${++q}`,{isVisible:d,setVisibility:c}=h.useVisibility({id:v,group:"phila-filter-chip",outsideClickHide:!0,escapeKeyHide:!0,showSingle:!0}),f=e.computed(()=>d(v)),C=e.ref(null),x=e.ref(0),b=e.ref(0),g=e.computed(()=>l.multiple?Array.isArray(l.modelValue)?l.modelValue:[]:typeof l.modelValue=="string"?l.modelValue:""),V=e.computed(()=>l.multiple?Array.isArray(l.modelValue)&&l.modelValue.length>0:typeof l.modelValue=="string"&&l.modelValue!==""),k=e.computed(()=>l.multiple&&Array.isArray(l.modelValue)?l.modelValue.length:0),n=e.computed(()=>{const p=l.label??l.text??"";return k.value>0?`${p} (${k.value})`:p});function s(){const p=C.value?.el??null;if(!p)return;const D=p.getBoundingClientRect();x.value=D.bottom+4,b.value=D.left}function o(){f.value&&c(!1)}e.watch(f,p=>{p?window.addEventListener("scroll",o,{capture:!0}):window.removeEventListener("scroll",o,{capture:!0})});function B(){const p=!f.value;p&&s(),c(p)}function N(p){r("update:modelValue",p),c(!1)}function $(){r("update:modelValue",l.multiple?[]:"")}return(p,D)=>i.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(S,{ref_key:"triggerRef",ref:C,text:n.value,size:t.size,color:t.color,"icon-definition":t.iconDefinition,active:V.value||f.value,chevron:"","aria-expanded":f.value,"data-toggle":`visibility-${v}`,onClick:B},null,8,["text","size","color","icon-definition","active","aria-expanded","data-toggle"]),f.value?(e.openBlock(),e.createBlock(O,{key:0,"menu-id":v,label:t.label??t.text??"",choices:t.choices,multiple:t.multiple,value:g.value,top:x.value,left:b.value,"apply-text":t.applyText,"reset-text":t.resetText,onApply:N,onReset:$},null,8,["label","choices","multiple","value","top","left","apply-text","reset-text"])):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createBlock(S,{key:1,size:t.size,color:t.color,"icon-definition":t.iconDefinition,"trailing-icon-definition":t.trailingIconDefinition,"icon-only":a.value,active:t.selected,"aria-pressed":t.selected,onClick:y},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["size","color","icon-definition","trailing-icon-definition","icon-only","active","aria-pressed"]))}}),G=5;function H(){const t=e.ref(null),m=e.ref(!1);let l=!1,r=0,i=0,u=!1,a=null;const y=c=>{t.value&&c.pointerType!=="mouse"&&(l=!0,u=!1,r=c.clientX,i=t.value.scrollLeft)},v=c=>{if(!l||!t.value)return;const f=c.clientX-r;!u&&Math.abs(f)>G&&(u=!0,m.value=!0,t.value.setPointerCapture(c.pointerId),a=c.pointerId),u&&(t.value.scrollLeft=i-f)},d=()=>{if(t.value&&a!==null){try{t.value.releasePointerCapture(a)}catch{}a=null}l=!1,u&&setTimeout(()=>m.value=!1,0)};return e.onBeforeUnmount(d),{el:t,suppressClick:m,dragHandlers:{onPointerdown:y,onPointermove:v,onPointerup:d,onPointerleave:d}}}const M={key:0,class:"phila-filter-chip-group__label has-text-label-default"},W={class:"phila-filter-chip-group__viewport"},X=e.defineComponent({__name:"FilterChipGroup",props:{filters:{},modelValue:{default:()=>({})},label:{},size:{default:"medium"},color:{default:"blue"},filterButton:{type:Boolean,default:!1},className:{}},emits:["update:modelValue","open-filters"],setup(t,{emit:m}){const l=t,r=m,i=e.computed(()=>{let n=0;for(const s of l.filters){if(s.excludeFromCount)continue;const o=l.modelValue[s.key];Array.isArray(o)?n+=o.length:typeof o=="string"?n+=o?1:0:o===!0&&(n+=1)}return n}),u=e.computed(()=>i.value>0?`Filters (${i.value} selected)`:"Filters"),{el:a,suppressClick:y,dragHandlers:v}=H(),d=e.computed(()=>h.cn("phila-filter-chip-group",l.className));function c(n){return Array.isArray(n.choices)}function f(n,s){r("update:modelValue",{...l.modelValue,[n]:s})}function C(n){y.value&&(n.stopPropagation(),n.preventDefault())}const x=e.ref(!1),b=e.ref(!1);function g(){const n=a.value;n&&(x.value=n.scrollLeft>1,b.value=n.scrollLeft+n.clientWidth<n.scrollWidth-1)}function V(n){const s=a.value;s&&s.scrollBy({left:n*s.clientWidth*.8,behavior:"smooth"})}let k=null;return e.onMounted(()=>{e.nextTick(g),a.value&&(k=new ResizeObserver(()=>g()),k.observe(a.value))}),e.onBeforeUnmount(()=>{k?.disconnect(),k=null}),e.watch(()=>l.filters,()=>e.nextTick(g)),(n,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.value)},[t.label?(e.openBlock(),e.createElementBlock("span",M,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",W,[x.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:s[0]||(s[0]=o=>V(-1))},[e.createVNode(e.unref(h.Icon),{"icon-definition":e.unref(z.faChevronLeft),size:"xxsmall",inline:"",decorative:""},null,8,["icon-definition"])])):e.createCommentVNode("",!0),e.createElementVNode("div",e.mergeProps({ref_key:"el",ref:a,class:"phila-filter-chip-group__row"},e.unref(v),{onClickCapture:C,onScroll:g}),[t.filterButton?(e.openBlock(),e.createBlock(S,{key:0,size:t.size,color:t.color,"icon-definition":e.unref(z.faSliders),text:i.value>0?`(${i.value})`:"","icon-only":i.value===0,active:i.value>0,"aria-label":u.value,onClick:s[1]||(s[1]=o=>r("open-filters"))},null,8,["size","color","icon-definition","text","icon-only","active","aria-label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filters,o=>(e.openBlock(),e.createBlock(I,{key:o.key,label:o.label,text:o.label,size:t.size,color:t.color,"icon-definition":o.iconDefinition,choices:o.choices,multiple:o.multiple,"model-value":c(o)?t.modelValue[o.key]:void 0,selected:!c(o)&&t.modelValue[o.key]===!0,"onUpdate:modelValue":B=>f(o.key,B),"onUpdate:selected":B=>f(o.key,B)},null,8,["label","text","size","color","icon-definition","choices","multiple","model-value","selected","onUpdate:modelValue","onUpdate:selected"]))),128))],16),b.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:s[2]||(s[2]=o=>V(1))},[e.createVNode(e.unref(h.Icon),{"icon-definition":e.unref(z.faChevronRight),size:"xxsmall",inline:"",decorative:""},null,8,["icon-definition"])])):e.createCommentVNode("",!0)])],2))}}),j=A(X,[["__scopeId","data-v-99d3ffdf"]]);exports.FilterChip=I;exports.FilterChipGroup=j;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),b=require("@phila/phila-ui-core"),w=require("@fortawesome/pro-solid-svg-icons"),L=require("@phila/phila-ui-radio"),R=require("@phila/phila-ui-checkbox"),D=require("@phila/phila-ui-button"),F=["aria-pressed","aria-expanded"],E="xxsmall",U=e.defineComponent({__name:"FilterChipBase",props:{text:{default:void 0},size:{default:"medium"},color:{default:"blue"},iconDefinition:{default:void 0},trailingIconDefinition:{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,a=e.ref(null),o=e.computed(()=>b.cn("phila-filter-chip",`phila-filter-chip--${l.color}`,l.size!=="medium"&&`is-${l.size}`,"has-text-body-"+s(l.size),l.active&&"is-active",l.iconOnly&&"is-icon-only"));u({el:a});const s=r=>{switch(r){case"extra-large":return"default";case"large":return"small";default:return"extra-small"}};return(r,h)=>(e.openBlock(),e.createElementBlock("button",{ref_key:"rootEl",ref:a,type:"button",class:e.normalizeClass(o.value),"aria-pressed":t.ariaPressed,"aria-expanded":t.ariaExpanded,onClick:h[0]||(h[0]=v=>r.$emit("click",v))},[e.createVNode(e.unref(b.ActionContent),{"icon-definition":t.iconDefinition,size:t.size,inline:"","icon-size":E,"icon-only":t.iconOnly},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)],!0)]),_:3},8,["icon-definition","size","icon-only"]),t.chevron?(e.openBlock(),e.createBlock(e.unref(b.Icon),{key:0,"icon-definition":e.unref(w.faChevronDown),size:"xxsmall",inline:"",decorative:"",class:"phila-filter-chip__chevron"},null,8,["icon-definition"])):t.trailingIconDefinition?(e.openBlock(),e.createBlock(e.unref(b.Icon),{key:1,"icon-definition":t.trailingIconDefinition,size:E,inline:"",decorative:""},null,8,["icon-definition"])):e.createCommentVNode("",!0)],10,F))}}),$=(t,u)=>{const l=t.__vccOpts||t;for(const[a,o]of u)l[a]=o;return l},S=$(U,[["__scopeId","data-v-7411a108"]]),M=["id","aria-label"],O={key:0,class:"phila-filter-chip-sheet__header"},q={class:"phila-filter-chip-sheet__title"},G={key:3,class:"phila-filter-chip-sheet__footer"},H={key:4,class:"phila-filter-chip-panel__footer"},W=e.defineComponent({__name:"FilterChipDropdownPanel",props:{menuId:{},label:{},choices:{},multiple:{type:Boolean},value:{},top:{},left:{},mobile:{type:Boolean,default:!1},applyText:{default:"Apply"},resetText:{default:"Reset"}},emits:["apply","reset","close"],setup(t,{emit:u}){const l=t,a=u,o=e.ref(typeof l.value=="string"?l.value:""),s=e.ref(Array.isArray(l.value)?[...l.value]:[]);e.watch(()=>l.value,c=>{l.multiple?s.value=Array.isArray(c)?[...c]:[]:o.value=typeof c=="string"?c:""});const r=e.computed(()=>l.choices.map(c=>({text:c.text,value:c.value}))),h=e.computed(()=>l.multiple?s.value.length:o.value?1:0),v=e.computed(()=>h.value>0?`${l.applyText} (${h.value})`:l.applyText),k=()=>{o.value="",s.value=[],a("reset")},d=()=>{a("apply",l.multiple?[...s.value]:o.value)};return(c,m)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[t.mobile?(e.openBlock(),e.createElementBlock("div",{key:0,class:"phila-filter-chip-sheet__scrim",onClick:m[0]||(m[0]=y=>a("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",O,[e.createElementVNode("span",q,e.toDisplayString(t.label),1),e.createElementVNode("button",{type:"button",class:"phila-filter-chip-sheet__close","aria-label":"Close",onClick:m[1]||(m[1]=y=>a("close"))}," ✕ ")])):e.createCommentVNode("",!0),t.multiple?(e.openBlock(),e.createBlock(e.unref(R.CheckboxGroup),{key:1,"group-label":t.label,choices:r.value,"model-value":s.value,"onUpdate:modelValue":m[2]||(m[2]=y=>s.value=y)},null,8,["group-label","choices","model-value"])):(e.openBlock(),e.createBlock(e.unref(L.RadioGroup),{key:2,"group-label":t.label,choices:r.value,"model-value":o.value,"onUpdate:modelValue":m[3]||(m[3]=y=>o.value=y)},null,8,["group-label","choices","model-value"])),t.mobile?(e.openBlock(),e.createElementBlock("div",G,[e.createVNode(e.unref(D.PhilaButton),{variant:"secondary",text:t.resetText,onClick:k},null,8,["text"]),e.createVNode(e.unref(D.PhilaButton),{variant:"primary",text:v.value,onClick:d},null,8,["text"])])):(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("button",{type:"button",class:"phila-filter-chip-panel__reset has-text-body-small",onClick:k},e.toDisplayString(t.resetText),1),e.createVNode(e.unref(D.PhilaButton),{variant:"primary",size:"small",text:t.applyText,onClick:d},null,8,["text"])]))],14,M)]))}}),N="(max-width: 1064px) and (max-height: 915px)";function X(){const t=e.ref(typeof window<"u"&&window.matchMedia(N).matches);let u=null;function l(a){t.value=a.matches}return e.onMounted(()=>{u=window.matchMedia(N),t.value=u.matches,u.addEventListener("change",l)}),e.onBeforeUnmount(()=>{u?.removeEventListener("change",l)}),{isMobile:t}}let j=0;const A=e.defineComponent({__name:"FilterChip",props:{label:{default:void 0},text:{default:void 0},size:{default:"medium"},color:{default:"blue"},iconDefinition:{default:void 0},trailingIconDefinition:{default:void 0},selected:{type:Boolean,default:!1},choices:{default:void 0},multiple:{type:Boolean,default:!1},modelValue:{type:[String,Array,Boolean],default:void 0},applyText:{default:"Apply"},resetText:{default:"Reset"},className:{}},emits:["update:selected","update:modelValue","click"],setup(t,{emit:u}){const l=t,a=u,o=e.computed(()=>Array.isArray(l.choices)),s=e.useSlots(),r=e.computed(()=>!o.value&&!!l.iconDefinition&&!l.text&&!l.label&&!s.default);function h(p){a("update:selected",!l.selected),a("click",p)}const v=`phila-filter-chip-${e.useId()}-${++j}`,{isVisible:k,setVisibility:d}=b.useVisibility({id:v,group:"phila-filter-chip",outsideClickHide:!0,escapeKeyHide:!0,showSingle:!0}),c=e.computed(()=>k(v)),{isMobile:m}=X(),y=e.ref(null),C=e.ref(0),g=e.ref(0),z=e.computed(()=>l.multiple?Array.isArray(l.modelValue)?l.modelValue:[]:typeof l.modelValue=="string"?l.modelValue:""),x=e.computed(()=>l.multiple?Array.isArray(l.modelValue)&&l.modelValue.length>0:typeof l.modelValue=="string"&&l.modelValue!==""),i=e.computed(()=>l.multiple&&Array.isArray(l.modelValue)?l.modelValue.length:0),f=e.computed(()=>{const p=l.label??l.text??"";return i.value>0?`${p} (${i.value})`:p});function n(){const p=y.value?.el??null;if(!p)return;const V=p.getBoundingClientRect();C.value=V.bottom+4,g.value=V.left}function B(){c.value&&d(!1)}e.watch(c,p=>{p&&!m.value?window.addEventListener("scroll",B,{capture:!0}):window.removeEventListener("scroll",B,{capture:!0})});function T(){const p=!c.value;p&&!m.value&&n(),d(p)}function I(p){a("update:modelValue",p),d(!1)}function P(){a("update:modelValue",l.multiple?[]:"")}return(p,V)=>o.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(S,{ref_key:"triggerRef",ref:y,text:f.value,size:t.size,color:t.color,"icon-definition":t.iconDefinition,active:x.value||c.value,chevron:"","aria-expanded":c.value,"data-toggle":`visibility-${v}`,onClick:T},null,8,["text","size","color","icon-definition","active","aria-expanded","data-toggle"]),c.value?(e.openBlock(),e.createBlock(W,{key:0,"menu-id":v,label:t.label??t.text??"",choices:t.choices,multiple:t.multiple,value:z.value,top:C.value,left:g.value,mobile:e.unref(m),"apply-text":t.applyText,"reset-text":t.resetText,onApply:I,onReset:P,onClose:V[0]||(V[0]=ee=>e.unref(d)(!1))},null,8,["label","choices","multiple","value","top","left","mobile","apply-text","reset-text"])):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createBlock(S,{key:1,size:t.size,color:t.color,"icon-definition":t.iconDefinition,"trailing-icon-definition":t.trailingIconDefinition,"icon-only":r.value,active:t.selected,"aria-pressed":t.selected,onClick:h},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["size","color","icon-definition","trailing-icon-definition","icon-only","active","aria-pressed"]))}}),K=5;function Q(){const t=e.ref(null),u=e.ref(!1);let l=!1,a=0,o=0,s=!1,r=null;const h=d=>{t.value&&d.pointerType!=="mouse"&&(l=!0,s=!1,a=d.clientX,o=t.value.scrollLeft)},v=d=>{if(!l||!t.value)return;const c=d.clientX-a;!s&&Math.abs(c)>K&&(s=!0,u.value=!0,t.value.setPointerCapture(d.pointerId),r=d.pointerId),s&&(t.value.scrollLeft=o-c)},k=()=>{if(t.value&&r!==null){try{t.value.releasePointerCapture(r)}catch{}r=null}l=!1,s&&setTimeout(()=>u.value=!1,0)};return e.onBeforeUnmount(k),{el:t,suppressClick:u,dragHandlers:{onPointerdown:h,onPointermove:v,onPointerup:k,onPointerleave:k}}}const Y={key:0,class:"phila-filter-chip-group__label has-text-label-default"},J={class:"phila-filter-chip-group__viewport"},Z=e.defineComponent({__name:"FilterChipGroup",props:{filters:{},modelValue:{default:()=>({})},label:{},size:{default:"medium"},color:{default:"blue"},filterButton:{type:Boolean,default:!1},className:{}},emits:["update:modelValue","open-filters"],setup(t,{emit:u}){const l=t,a=u,o=e.computed(()=>{let i=0;for(const f of l.filters){if(f.excludeFromCount)continue;const n=l.modelValue[f.key];Array.isArray(n)?i+=n.length:typeof n=="string"?i+=n?1:0:n===!0&&(i+=1)}return i}),s=e.computed(()=>o.value>0?`Filters (${o.value} selected)`:"Filters"),{el:r,suppressClick:h,dragHandlers:v}=Q(),k=e.computed(()=>b.cn("phila-filter-chip-group",l.className));function d(i){return Array.isArray(i.choices)}function c(i,f){a("update:modelValue",{...l.modelValue,[i]:f})}function m(i){h.value&&(i.stopPropagation(),i.preventDefault())}const y=e.ref(!1),C=e.ref(!1);function g(){const i=r.value;i&&(y.value=i.scrollLeft>1,C.value=i.scrollLeft+i.clientWidth<i.scrollWidth-1)}function z(i){const f=r.value;f&&f.scrollBy({left:i*f.clientWidth*.8,behavior:"smooth"})}let x=null;return e.onMounted(()=>{e.nextTick(g),r.value&&(x=new ResizeObserver(()=>g()),x.observe(r.value))}),e.onBeforeUnmount(()=>{x?.disconnect(),x=null}),e.watch(()=>l.filters,()=>e.nextTick(g)),(i,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(k.value)},[t.label?(e.openBlock(),e.createElementBlock("span",Y,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",J,[y.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:f[0]||(f[0]=n=>z(-1))},[e.createVNode(e.unref(b.Icon),{"icon-definition":e.unref(w.faChevronLeft),size:"xxsmall",inline:"",decorative:""},null,8,["icon-definition"])])):e.createCommentVNode("",!0),e.createElementVNode("div",e.mergeProps({ref_key:"el",ref:r,class:"phila-filter-chip-group__row"},e.unref(v),{onClickCapture:m,onScroll:g}),[t.filterButton?(e.openBlock(),e.createBlock(S,{key:0,size:t.size,color:t.color,"icon-definition":e.unref(w.faSliders),text:o.value>0?`(${o.value})`:"","icon-only":o.value===0,active:o.value>0,"aria-label":s.value,onClick:f[1]||(f[1]=n=>a("open-filters"))},null,8,["size","color","icon-definition","text","icon-only","active","aria-label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filters,n=>(e.openBlock(),e.createBlock(A,{key:n.key,label:n.label,text:n.label,size:t.size,color:t.color,"icon-definition":n.iconDefinition,choices:n.choices,multiple:n.multiple,"model-value":d(n)?t.modelValue[n.key]:void 0,selected:!d(n)&&t.modelValue[n.key]===!0,"onUpdate:modelValue":B=>c(n.key,B),"onUpdate:selected":B=>c(n.key,B)},null,8,["label","text","size","color","icon-definition","choices","multiple","model-value","selected","onUpdate:modelValue","onUpdate:selected"]))),128))],16),C.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:f[2]||(f[2]=n=>z(1))},[e.createVNode(e.unref(b.Icon),{"icon-definition":e.unref(w.faChevronRight),size:"xxsmall",inline:"",decorative:""},null,8,["icon-definition"])])):e.createCommentVNode("",!0)])],2))}}),_=$(Z,[["__scopeId","data-v-99d3ffdf"]]);exports.FilterChip=A;exports.FilterChipGroup=_;
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
- import { defineComponent as T, ref as x, computed as h, createElementBlock as C, openBlock as p, normalizeClass as U, createVNode as S, createBlock as b, createCommentVNode as z, unref as m, withCtx as H, renderSlot as G, createTextVNode as M, toDisplayString as L, watch as E, Teleport as Q, createElementVNode as B, normalizeStyle as Y, useSlots as Z, useId as _, Fragment as W, onBeforeUnmount as X, onMounted as ee, nextTick as O, mergeProps as le, renderList as te } from "vue";
2
- import { cn as K, ActionContent as ie, Icon as P, useVisibility as oe } from "@phila/phila-ui-core";
3
- import { faChevronDown as ne, faChevronLeft as ae, faSliders as re, faChevronRight as ue } from "@fortawesome/pro-solid-svg-icons";
4
- import { RadioGroup as ce } from "@phila/phila-ui-radio";
5
- import { CheckboxGroup as se } from "@phila/phila-ui-checkbox";
6
- import { PhilaButton as de } from "@phila/phila-ui-button";
7
- import './index.css';const fe = ["aria-pressed", "aria-expanded"], N = "xxsmall", pe = /* @__PURE__ */ T({
1
+ import { defineComponent as R, ref as k, computed as h, createElementBlock as g, openBlock as s, normalizeClass as M, createVNode as D, createBlock as V, createCommentVNode as z, unref as p, withCtx as W, renderSlot as X, createTextVNode as q, toDisplayString as I, watch as O, Teleport as ee, createElementVNode as A, normalizeStyle as le, onMounted as K, onBeforeUnmount as U, useSlots as te, useId as ie, Fragment as Q, nextTick as N, mergeProps as oe, renderList as ne } from "vue";
2
+ import { cn as Y, ActionContent as ae, Icon as L, useVisibility as re } from "@phila/phila-ui-core";
3
+ import { faChevronDown as se, faChevronLeft as ue, faSliders as ce, faChevronRight as de } from "@fortawesome/pro-solid-svg-icons";
4
+ import { RadioGroup as fe } from "@phila/phila-ui-radio";
5
+ import { CheckboxGroup as pe } from "@phila/phila-ui-checkbox";
6
+ import { PhilaButton as E } from "@phila/phila-ui-button";
7
+ import './index.css';const ve = ["aria-pressed", "aria-expanded"], H = "xxsmall", me = /* @__PURE__ */ R({
8
8
  __name: "FilterChipBase",
9
9
  props: {
10
10
  text: { default: void 0 },
@@ -19,20 +19,20 @@ import './index.css';const fe = ["aria-pressed", "aria-expanded"], N = "xxsmall"
19
19
  ariaExpanded: { type: Boolean }
20
20
  },
21
21
  emits: ["click"],
22
- setup(e, { expose: v }) {
23
- const l = e, a = x(null), i = h(
24
- () => K(
22
+ setup(e, { expose: u }) {
23
+ const l = e, n = k(null), t = h(
24
+ () => Y(
25
25
  "phila-filter-chip",
26
26
  `phila-filter-chip--${l.color}`,
27
27
  l.size !== "medium" && `is-${l.size}`,
28
- "has-text-body-" + u(l.size),
28
+ "has-text-body-" + c(l.size),
29
29
  l.active && "is-active",
30
30
  l.iconOnly && "is-icon-only"
31
31
  )
32
32
  );
33
- v({ el: a });
34
- const u = (n) => {
35
- switch (n) {
33
+ u({ el: n });
34
+ const c = (r) => {
35
+ switch (r) {
36
36
  case "extra-large":
37
37
  return "default";
38
38
  case "large":
@@ -41,51 +41,60 @@ import './index.css';const fe = ["aria-pressed", "aria-expanded"], N = "xxsmall"
41
41
  return "extra-small";
42
42
  }
43
43
  };
44
- return (n, g) => (p(), C("button", {
44
+ return (r, b) => (s(), g("button", {
45
45
  ref_key: "rootEl",
46
- ref: a,
46
+ ref: n,
47
47
  type: "button",
48
- class: U(i.value),
48
+ class: M(t.value),
49
49
  "aria-pressed": e.ariaPressed,
50
50
  "aria-expanded": e.ariaExpanded,
51
- onClick: g[0] || (g[0] = (y) => n.$emit("click", y))
51
+ onClick: b[0] || (b[0] = (y) => r.$emit("click", y))
52
52
  }, [
53
- S(m(ie), {
53
+ D(p(ae), {
54
54
  "icon-definition": e.iconDefinition,
55
55
  size: e.size,
56
56
  inline: "",
57
- "icon-size": N,
57
+ "icon-size": H,
58
58
  "icon-only": e.iconOnly
59
59
  }, {
60
- default: H(() => [
61
- G(n.$slots, "default", {}, () => [
62
- M(L(e.text), 1)
60
+ default: W(() => [
61
+ X(r.$slots, "default", {}, () => [
62
+ q(I(e.text), 1)
63
63
  ], !0)
64
64
  ]),
65
65
  _: 3
66
66
  }, 8, ["icon-definition", "size", "icon-only"]),
67
- e.chevron ? (p(), b(m(P), {
67
+ e.chevron ? (s(), V(p(L), {
68
68
  key: 0,
69
- "icon-definition": m(ne),
69
+ "icon-definition": p(se),
70
70
  size: "xxsmall",
71
71
  inline: "",
72
72
  decorative: "",
73
73
  class: "phila-filter-chip__chevron"
74
- }, null, 8, ["icon-definition"])) : e.trailingIconDefinition ? (p(), b(m(P), {
74
+ }, null, 8, ["icon-definition"])) : e.trailingIconDefinition ? (s(), V(p(L), {
75
75
  key: 1,
76
76
  "icon-definition": e.trailingIconDefinition,
77
- size: N,
77
+ size: H,
78
78
  inline: "",
79
79
  decorative: ""
80
80
  }, null, 8, ["icon-definition"])) : z("", !0)
81
- ], 10, fe));
81
+ ], 10, ve));
82
82
  }
83
- }), j = (e, v) => {
83
+ }), j = (e, u) => {
84
84
  const l = e.__vccOpts || e;
85
- for (const [a, i] of v)
86
- l[a] = i;
85
+ for (const [n, t] of u)
86
+ l[n] = t;
87
87
  return l;
88
- }, F = /* @__PURE__ */ j(pe, [["__scopeId", "data-v-7411a108"]]), ve = ["id", "aria-label"], me = { class: "phila-filter-chip-panel__footer" }, ye = /* @__PURE__ */ T({
88
+ }, F = /* @__PURE__ */ j(me, [["__scopeId", "data-v-7411a108"]]), he = ["id", "aria-label"], ye = {
89
+ key: 0,
90
+ class: "phila-filter-chip-sheet__header"
91
+ }, be = { class: "phila-filter-chip-sheet__title" }, xe = {
92
+ key: 3,
93
+ class: "phila-filter-chip-sheet__footer"
94
+ }, ge = {
95
+ key: 4,
96
+ class: "phila-filter-chip-panel__footer"
97
+ }, ke = /* @__PURE__ */ R({
89
98
  __name: "FilterChipDropdownPanel",
90
99
  props: {
91
100
  menuId: {},
@@ -95,63 +104,103 @@ import './index.css';const fe = ["aria-pressed", "aria-expanded"], N = "xxsmall"
95
104
  value: {},
96
105
  top: {},
97
106
  left: {},
107
+ mobile: { type: Boolean, default: !1 },
98
108
  applyText: { default: "Apply" },
99
109
  resetText: { default: "Reset" }
100
110
  },
101
- emits: ["apply", "reset"],
102
- setup(e, { emit: v }) {
103
- const l = e, a = v, i = x(typeof l.value == "string" ? l.value : ""), u = x(Array.isArray(l.value) ? [...l.value] : []);
104
- E(
111
+ emits: ["apply", "reset", "close"],
112
+ setup(e, { emit: u }) {
113
+ const l = e, n = u, t = k(typeof l.value == "string" ? l.value : ""), c = k(Array.isArray(l.value) ? [...l.value] : []);
114
+ O(
105
115
  () => l.value,
106
- (s) => {
107
- l.multiple ? u.value = Array.isArray(s) ? [...s] : [] : i.value = typeof s == "string" ? s : "";
116
+ (a) => {
117
+ l.multiple ? c.value = Array.isArray(a) ? [...a] : [] : t.value = typeof a == "string" ? a : "";
108
118
  }
109
119
  );
110
- const n = h(() => l.choices.map((s) => ({ text: s.text, value: s.value }))), g = () => {
111
- i.value = "", u.value = [], a("reset");
112
- }, y = () => {
113
- a("apply", l.multiple ? [...u.value] : i.value);
120
+ const r = h(() => l.choices.map((a) => ({ text: a.text, value: a.value }))), b = h(() => l.multiple ? c.value.length : t.value ? 1 : 0), y = h(
121
+ () => b.value > 0 ? `${l.applyText} (${b.value})` : l.applyText
122
+ ), C = () => {
123
+ t.value = "", c.value = [], n("reset");
124
+ }, d = () => {
125
+ n("apply", l.multiple ? [...c.value] : t.value);
114
126
  };
115
- return (s, r) => (p(), b(Q, { to: "body" }, [
116
- B("div", {
127
+ return (a, m) => (s(), V(ee, { to: "body" }, [
128
+ e.mobile ? (s(), g("div", {
129
+ key: 0,
130
+ class: "phila-filter-chip-sheet__scrim",
131
+ onClick: m[0] || (m[0] = (x) => n("close"))
132
+ })) : z("", !0),
133
+ A("div", {
117
134
  id: e.menuId,
118
- class: "phila-filter-chip-panel",
135
+ class: M(e.mobile ? "phila-filter-chip-sheet" : "phila-filter-chip-panel"),
119
136
  role: "dialog",
120
137
  "aria-label": e.label,
121
- style: Y({ top: e.top + "px", left: e.left + "px" })
138
+ style: le(e.mobile ? void 0 : { top: e.top + "px", left: e.left + "px" })
122
139
  }, [
123
- e.multiple ? (p(), b(m(se), {
124
- key: 0,
125
- "group-label": e.label,
126
- choices: n.value,
127
- "model-value": u.value,
128
- "onUpdate:modelValue": r[0] || (r[0] = (d) => u.value = d)
129
- }, null, 8, ["group-label", "choices", "model-value"])) : (p(), b(m(ce), {
140
+ e.mobile ? (s(), g("header", ye, [
141
+ A("span", be, I(e.label), 1),
142
+ A("button", {
143
+ type: "button",
144
+ class: "phila-filter-chip-sheet__close",
145
+ "aria-label": "Close",
146
+ onClick: m[1] || (m[1] = (x) => n("close"))
147
+ }, " ✕ ")
148
+ ])) : z("", !0),
149
+ e.multiple ? (s(), V(p(pe), {
130
150
  key: 1,
131
151
  "group-label": e.label,
132
- choices: n.value,
133
- "model-value": i.value,
134
- "onUpdate:modelValue": r[1] || (r[1] = (d) => i.value = d)
152
+ choices: r.value,
153
+ "model-value": c.value,
154
+ "onUpdate:modelValue": m[2] || (m[2] = (x) => c.value = x)
155
+ }, null, 8, ["group-label", "choices", "model-value"])) : (s(), V(p(fe), {
156
+ key: 2,
157
+ "group-label": e.label,
158
+ choices: r.value,
159
+ "model-value": t.value,
160
+ "onUpdate:modelValue": m[3] || (m[3] = (x) => t.value = x)
135
161
  }, null, 8, ["group-label", "choices", "model-value"])),
136
- B("div", me, [
137
- B("button", {
162
+ e.mobile ? (s(), g("div", xe, [
163
+ D(p(E), {
164
+ variant: "secondary",
165
+ text: e.resetText,
166
+ onClick: C
167
+ }, null, 8, ["text"]),
168
+ D(p(E), {
169
+ variant: "primary",
170
+ text: y.value,
171
+ onClick: d
172
+ }, null, 8, ["text"])
173
+ ])) : (s(), g("div", ge, [
174
+ A("button", {
138
175
  type: "button",
139
176
  class: "phila-filter-chip-panel__reset has-text-body-small",
140
- onClick: g
141
- }, L(e.resetText), 1),
142
- S(m(de), {
177
+ onClick: C
178
+ }, I(e.resetText), 1),
179
+ D(p(E), {
143
180
  variant: "primary",
144
181
  size: "small",
145
182
  text: e.applyText,
146
- onClick: y
183
+ onClick: d
147
184
  }, null, 8, ["text"])
148
- ])
149
- ], 12, ve)
185
+ ]))
186
+ ], 14, he)
150
187
  ]));
151
188
  }
152
- });
153
- let he = 0;
154
- const ge = /* @__PURE__ */ T({
189
+ }), G = "(max-width: 1064px) and (max-height: 915px)";
190
+ function Ce() {
191
+ const e = k(typeof window < "u" && window.matchMedia(G).matches);
192
+ let u = null;
193
+ function l(n) {
194
+ e.value = n.matches;
195
+ }
196
+ return K(() => {
197
+ u = window.matchMedia(G), e.value = u.matches, u.addEventListener("change", l);
198
+ }), U(() => {
199
+ u?.removeEventListener("change", l);
200
+ }), { isMobile: e };
201
+ }
202
+ let Ve = 0;
203
+ const ze = /* @__PURE__ */ R({
155
204
  __name: "FilterChip",
156
205
  props: {
157
206
  label: { default: void 0 },
@@ -169,127 +218,129 @@ const ge = /* @__PURE__ */ T({
169
218
  className: {}
170
219
  },
171
220
  emits: ["update:selected", "update:modelValue", "click"],
172
- setup(e, { emit: v }) {
173
- const l = e, a = v, i = h(() => Array.isArray(l.choices)), u = Z(), n = h(
174
- () => !i.value && !!l.iconDefinition && !l.text && !l.label && !u.default
221
+ setup(e, { emit: u }) {
222
+ const l = e, n = u, t = h(() => Array.isArray(l.choices)), c = te(), r = h(
223
+ () => !t.value && !!l.iconDefinition && !l.text && !l.label && !c.default
175
224
  );
176
- function g(f) {
177
- a("update:selected", !l.selected), a("click", f);
225
+ function b(v) {
226
+ n("update:selected", !l.selected), n("click", v);
178
227
  }
179
- const y = `phila-filter-chip-${_()}-${++he}`, { isVisible: s, setVisibility: r } = oe({
228
+ const y = `phila-filter-chip-${ie()}-${++Ve}`, { isVisible: C, setVisibility: d } = re({
180
229
  id: y,
181
230
  group: "phila-filter-chip",
182
231
  outsideClickHide: !0,
183
232
  escapeKeyHide: !0,
184
233
  showSingle: !0
185
- }), d = h(() => s(y)), $ = x(null), D = x(0), w = x(0), V = h(() => l.multiple ? Array.isArray(l.modelValue) ? l.modelValue : [] : typeof l.modelValue == "string" ? l.modelValue : ""), I = h(() => l.multiple ? Array.isArray(l.modelValue) && l.modelValue.length > 0 : typeof l.modelValue == "string" && l.modelValue !== ""), k = h(() => l.multiple && Array.isArray(l.modelValue) ? l.modelValue.length : 0), o = h(() => {
186
- const f = l.label ?? l.text ?? "";
187
- return k.value > 0 ? `${f} (${k.value})` : f;
234
+ }), a = h(() => C(y)), { isMobile: m } = Ce(), x = k(null), S = k(0), w = k(0), P = h(() => l.multiple ? Array.isArray(l.modelValue) ? l.modelValue : [] : typeof l.modelValue == "string" ? l.modelValue : ""), $ = h(() => l.multiple ? Array.isArray(l.modelValue) && l.modelValue.length > 0 : typeof l.modelValue == "string" && l.modelValue !== ""), i = h(() => l.multiple && Array.isArray(l.modelValue) ? l.modelValue.length : 0), f = h(() => {
235
+ const v = l.label ?? l.text ?? "";
236
+ return i.value > 0 ? `${v} (${i.value})` : v;
188
237
  });
189
- function c() {
190
- const f = $.value?.el ?? null;
191
- if (!f) return;
192
- const R = f.getBoundingClientRect();
193
- D.value = R.bottom + 4, w.value = R.left;
238
+ function o() {
239
+ const v = x.value?.el ?? null;
240
+ if (!v) return;
241
+ const T = v.getBoundingClientRect();
242
+ S.value = T.bottom + 4, w.value = T.left;
194
243
  }
195
- function t() {
196
- d.value && r(!1);
244
+ function B() {
245
+ a.value && d(!1);
197
246
  }
198
- E(d, (f) => {
199
- f ? window.addEventListener("scroll", t, { capture: !0 }) : window.removeEventListener("scroll", t, { capture: !0 });
247
+ O(a, (v) => {
248
+ v && !m.value ? window.addEventListener("scroll", B, { capture: !0 }) : window.removeEventListener("scroll", B, { capture: !0 });
200
249
  });
201
- function A() {
202
- const f = !d.value;
203
- f && c(), r(f);
250
+ function J() {
251
+ const v = !a.value;
252
+ v && !m.value && o(), d(v);
204
253
  }
205
- function q(f) {
206
- a("update:modelValue", f), r(!1);
254
+ function Z(v) {
255
+ n("update:modelValue", v), d(!1);
207
256
  }
208
- function J() {
209
- a("update:modelValue", l.multiple ? [] : "");
257
+ function _() {
258
+ n("update:modelValue", l.multiple ? [] : "");
210
259
  }
211
- return (f, R) => i.value ? (p(), C(W, { key: 0 }, [
212
- S(F, {
260
+ return (v, T) => t.value ? (s(), g(Q, { key: 0 }, [
261
+ D(F, {
213
262
  ref_key: "triggerRef",
214
- ref: $,
215
- text: o.value,
263
+ ref: x,
264
+ text: f.value,
216
265
  size: e.size,
217
266
  color: e.color,
218
267
  "icon-definition": e.iconDefinition,
219
- active: I.value || d.value,
268
+ active: $.value || a.value,
220
269
  chevron: "",
221
- "aria-expanded": d.value,
270
+ "aria-expanded": a.value,
222
271
  "data-toggle": `visibility-${y}`,
223
- onClick: A
272
+ onClick: J
224
273
  }, null, 8, ["text", "size", "color", "icon-definition", "active", "aria-expanded", "data-toggle"]),
225
- d.value ? (p(), b(ye, {
274
+ a.value ? (s(), V(ke, {
226
275
  key: 0,
227
276
  "menu-id": y,
228
277
  label: e.label ?? e.text ?? "",
229
278
  choices: e.choices,
230
279
  multiple: e.multiple,
231
- value: V.value,
232
- top: D.value,
280
+ value: P.value,
281
+ top: S.value,
233
282
  left: w.value,
283
+ mobile: p(m),
234
284
  "apply-text": e.applyText,
235
285
  "reset-text": e.resetText,
236
- onApply: q,
237
- onReset: J
238
- }, null, 8, ["label", "choices", "multiple", "value", "top", "left", "apply-text", "reset-text"])) : z("", !0)
239
- ], 64)) : (p(), b(F, {
286
+ onApply: Z,
287
+ onReset: _,
288
+ onClose: T[0] || (T[0] = (Se) => p(d)(!1))
289
+ }, null, 8, ["label", "choices", "multiple", "value", "top", "left", "mobile", "apply-text", "reset-text"])) : z("", !0)
290
+ ], 64)) : (s(), V(F, {
240
291
  key: 1,
241
292
  size: e.size,
242
293
  color: e.color,
243
294
  "icon-definition": e.iconDefinition,
244
295
  "trailing-icon-definition": e.trailingIconDefinition,
245
- "icon-only": n.value,
296
+ "icon-only": r.value,
246
297
  active: e.selected,
247
298
  "aria-pressed": e.selected,
248
- onClick: g
299
+ onClick: b
249
300
  }, {
250
- default: H(() => [
251
- G(f.$slots, "default", {}, () => [
252
- M(L(e.text), 1)
301
+ default: W(() => [
302
+ X(v.$slots, "default", {}, () => [
303
+ q(I(e.text), 1)
253
304
  ])
254
305
  ]),
255
306
  _: 3
256
307
  }, 8, ["size", "color", "icon-definition", "trailing-icon-definition", "icon-only", "active", "aria-pressed"]));
257
308
  }
258
- }), xe = 5;
259
- function be() {
260
- const e = x(null), v = x(!1);
261
- let l = !1, a = 0, i = 0, u = !1, n = null;
262
- const g = (r) => {
263
- e.value && r.pointerType !== "mouse" && (l = !0, u = !1, a = r.clientX, i = e.value.scrollLeft);
264
- }, y = (r) => {
309
+ }), we = 5;
310
+ function De() {
311
+ const e = k(null), u = k(!1);
312
+ let l = !1, n = 0, t = 0, c = !1, r = null;
313
+ const b = (d) => {
314
+ e.value && d.pointerType !== "mouse" && (l = !0, c = !1, n = d.clientX, t = e.value.scrollLeft);
315
+ }, y = (d) => {
265
316
  if (!l || !e.value) return;
266
- const d = r.clientX - a;
267
- !u && Math.abs(d) > xe && (u = !0, v.value = !0, e.value.setPointerCapture(r.pointerId), n = r.pointerId), u && (e.value.scrollLeft = i - d);
268
- }, s = () => {
269
- if (e.value && n !== null) {
317
+ const a = d.clientX - n;
318
+ !c && Math.abs(a) > we && (c = !0, u.value = !0, e.value.setPointerCapture(d.pointerId), r = d.pointerId), c && (e.value.scrollLeft = t - a);
319
+ }, C = () => {
320
+ if (e.value && r !== null) {
270
321
  try {
271
- e.value.releasePointerCapture(n);
322
+ e.value.releasePointerCapture(r);
272
323
  } catch {
273
324
  }
274
- n = null;
325
+ r = null;
275
326
  }
276
- l = !1, u && setTimeout(() => v.value = !1, 0);
327
+ l = !1, c && setTimeout(() => u.value = !1, 0);
277
328
  };
278
- return X(s), {
329
+ return U(C), {
279
330
  el: e,
280
- suppressClick: v,
331
+ suppressClick: u,
281
332
  dragHandlers: {
282
- onPointerdown: g,
333
+ onPointerdown: b,
283
334
  onPointermove: y,
284
- onPointerup: s,
285
- onPointerleave: s
335
+ onPointerup: C,
336
+ onPointerleave: C
286
337
  }
287
338
  };
288
339
  }
289
- const ke = {
340
+ const $e = {
290
341
  key: 0,
291
342
  class: "phila-filter-chip-group__label has-text-label-default"
292
- }, Ce = { class: "phila-filter-chip-group__viewport" }, Ve = /* @__PURE__ */ T({
343
+ }, Be = { class: "phila-filter-chip-group__viewport" }, Ae = /* @__PURE__ */ R({
293
344
  __name: "FilterChipGroup",
294
345
  props: {
295
346
  filters: {},
@@ -301,106 +352,106 @@ const ke = {
301
352
  className: {}
302
353
  },
303
354
  emits: ["update:modelValue", "open-filters"],
304
- setup(e, { emit: v }) {
305
- const l = e, a = v, i = h(() => {
306
- let o = 0;
307
- for (const c of l.filters) {
308
- if (c.excludeFromCount) continue;
309
- const t = l.modelValue[c.key];
310
- Array.isArray(t) ? o += t.length : typeof t == "string" ? o += t ? 1 : 0 : t === !0 && (o += 1);
355
+ setup(e, { emit: u }) {
356
+ const l = e, n = u, t = h(() => {
357
+ let i = 0;
358
+ for (const f of l.filters) {
359
+ if (f.excludeFromCount) continue;
360
+ const o = l.modelValue[f.key];
361
+ Array.isArray(o) ? i += o.length : typeof o == "string" ? i += o ? 1 : 0 : o === !0 && (i += 1);
311
362
  }
312
- return o;
313
- }), u = h(
314
- () => i.value > 0 ? `Filters (${i.value} selected)` : "Filters"
315
- ), { el: n, suppressClick: g, dragHandlers: y } = be(), s = h(() => K("phila-filter-chip-group", l.className));
316
- function r(o) {
317
- return Array.isArray(o.choices);
363
+ return i;
364
+ }), c = h(
365
+ () => t.value > 0 ? `Filters (${t.value} selected)` : "Filters"
366
+ ), { el: r, suppressClick: b, dragHandlers: y } = De(), C = h(() => Y("phila-filter-chip-group", l.className));
367
+ function d(i) {
368
+ return Array.isArray(i.choices);
318
369
  }
319
- function d(o, c) {
320
- a("update:modelValue", { ...l.modelValue, [o]: c });
370
+ function a(i, f) {
371
+ n("update:modelValue", { ...l.modelValue, [i]: f });
321
372
  }
322
- function $(o) {
323
- g.value && (o.stopPropagation(), o.preventDefault());
373
+ function m(i) {
374
+ b.value && (i.stopPropagation(), i.preventDefault());
324
375
  }
325
- const D = x(!1), w = x(!1);
326
- function V() {
327
- const o = n.value;
328
- o && (D.value = o.scrollLeft > 1, w.value = o.scrollLeft + o.clientWidth < o.scrollWidth - 1);
376
+ const x = k(!1), S = k(!1);
377
+ function w() {
378
+ const i = r.value;
379
+ i && (x.value = i.scrollLeft > 1, S.value = i.scrollLeft + i.clientWidth < i.scrollWidth - 1);
329
380
  }
330
- function I(o) {
331
- const c = n.value;
332
- c && c.scrollBy({ left: o * c.clientWidth * 0.8, behavior: "smooth" });
381
+ function P(i) {
382
+ const f = r.value;
383
+ f && f.scrollBy({ left: i * f.clientWidth * 0.8, behavior: "smooth" });
333
384
  }
334
- let k = null;
335
- return ee(() => {
336
- O(V), n.value && (k = new ResizeObserver(() => V()), k.observe(n.value));
337
- }), X(() => {
338
- k?.disconnect(), k = null;
339
- }), E(
385
+ let $ = null;
386
+ return K(() => {
387
+ N(w), r.value && ($ = new ResizeObserver(() => w()), $.observe(r.value));
388
+ }), U(() => {
389
+ $?.disconnect(), $ = null;
390
+ }), O(
340
391
  () => l.filters,
341
- () => O(V)
342
- ), (o, c) => (p(), C("div", {
343
- class: U(s.value)
392
+ () => N(w)
393
+ ), (i, f) => (s(), g("div", {
394
+ class: M(C.value)
344
395
  }, [
345
- e.label ? (p(), C("span", ke, L(e.label), 1)) : z("", !0),
346
- B("div", Ce, [
347
- D.value ? (p(), C("button", {
396
+ e.label ? (s(), g("span", $e, I(e.label), 1)) : z("", !0),
397
+ A("div", Be, [
398
+ x.value ? (s(), g("button", {
348
399
  key: 0,
349
400
  type: "button",
350
401
  class: "phila-filter-chip-group__arrow phila-filter-chip-group__arrow--left",
351
402
  "aria-label": "Scroll filters left",
352
- onClick: c[0] || (c[0] = (t) => I(-1))
403
+ onClick: f[0] || (f[0] = (o) => P(-1))
353
404
  }, [
354
- S(m(P), {
355
- "icon-definition": m(ae),
405
+ D(p(L), {
406
+ "icon-definition": p(ue),
356
407
  size: "xxsmall",
357
408
  inline: "",
358
409
  decorative: ""
359
410
  }, null, 8, ["icon-definition"])
360
411
  ])) : z("", !0),
361
- B("div", le({
412
+ A("div", oe({
362
413
  ref_key: "el",
363
- ref: n,
414
+ ref: r,
364
415
  class: "phila-filter-chip-group__row"
365
- }, m(y), {
366
- onClickCapture: $,
367
- onScroll: V
416
+ }, p(y), {
417
+ onClickCapture: m,
418
+ onScroll: w
368
419
  }), [
369
- e.filterButton ? (p(), b(F, {
420
+ e.filterButton ? (s(), V(F, {
370
421
  key: 0,
371
422
  size: e.size,
372
423
  color: e.color,
373
- "icon-definition": m(re),
374
- text: i.value > 0 ? `(${i.value})` : "",
375
- "icon-only": i.value === 0,
376
- active: i.value > 0,
377
- "aria-label": u.value,
378
- onClick: c[1] || (c[1] = (t) => a("open-filters"))
424
+ "icon-definition": p(ce),
425
+ text: t.value > 0 ? `(${t.value})` : "",
426
+ "icon-only": t.value === 0,
427
+ active: t.value > 0,
428
+ "aria-label": c.value,
429
+ onClick: f[1] || (f[1] = (o) => n("open-filters"))
379
430
  }, null, 8, ["size", "color", "icon-definition", "text", "icon-only", "active", "aria-label"])) : z("", !0),
380
- (p(!0), C(W, null, te(e.filters, (t) => (p(), b(ge, {
381
- key: t.key,
382
- label: t.label,
383
- text: t.label,
431
+ (s(!0), g(Q, null, ne(e.filters, (o) => (s(), V(ze, {
432
+ key: o.key,
433
+ label: o.label,
434
+ text: o.label,
384
435
  size: e.size,
385
436
  color: e.color,
386
- "icon-definition": t.iconDefinition,
387
- choices: t.choices,
388
- multiple: t.multiple,
389
- "model-value": r(t) ? e.modelValue[t.key] : void 0,
390
- selected: !r(t) && e.modelValue[t.key] === !0,
391
- "onUpdate:modelValue": (A) => d(t.key, A),
392
- "onUpdate:selected": (A) => d(t.key, A)
437
+ "icon-definition": o.iconDefinition,
438
+ choices: o.choices,
439
+ multiple: o.multiple,
440
+ "model-value": d(o) ? e.modelValue[o.key] : void 0,
441
+ selected: !d(o) && e.modelValue[o.key] === !0,
442
+ "onUpdate:modelValue": (B) => a(o.key, B),
443
+ "onUpdate:selected": (B) => a(o.key, B)
393
444
  }, null, 8, ["label", "text", "size", "color", "icon-definition", "choices", "multiple", "model-value", "selected", "onUpdate:modelValue", "onUpdate:selected"]))), 128))
394
445
  ], 16),
395
- w.value ? (p(), C("button", {
446
+ S.value ? (s(), g("button", {
396
447
  key: 1,
397
448
  type: "button",
398
449
  class: "phila-filter-chip-group__arrow phila-filter-chip-group__arrow--right",
399
450
  "aria-label": "Scroll filters right",
400
- onClick: c[2] || (c[2] = (t) => I(1))
451
+ onClick: f[2] || (f[2] = (o) => P(1))
401
452
  }, [
402
- S(m(P), {
403
- "icon-definition": m(ue),
453
+ D(p(L), {
454
+ "icon-definition": p(de),
404
455
  size: "xxsmall",
405
456
  inline: "",
406
457
  decorative: ""
@@ -409,8 +460,8 @@ const ke = {
409
460
  ])
410
461
  ], 2));
411
462
  }
412
- }), $e = /* @__PURE__ */ j(Ve, [["__scopeId", "data-v-99d3ffdf"]]);
463
+ }), Fe = /* @__PURE__ */ j(Ae, [["__scopeId", "data-v-99d3ffdf"]]);
413
464
  export {
414
- ge as FilterChip,
415
- $e as FilterChipGroup
465
+ ze as FilterChip,
466
+ Fe as FilterChipGroup
416
467
  };
package/dist/useIsMobile.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare function useIsMobile(): {
2
+ isMobile: import('vue').Ref<boolean, boolean>;
3
+ };
4
+ //# sourceMappingURL=useIsMobile.d.ts.map
package/dist/useIsMobile.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useIsMobile.d.ts","sourceRoot":"","sources":["../src/useIsMobile.ts"],"names":[],"mappings":"AAMA,wBAAgB,WAAW;;EAmB1B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phila/phila-ui-filter-chip",
3
- "version": "0.2.0-beta.0",
3
+ "version": "0.2.0-beta.1",
4
4
  "type": "module",
5
5
  "description": "Filter chips for faceted filtering",
6
6
  "main": "./dist/index.js",
@@ -30,8 +30,8 @@
30
30
  "@fortawesome/pro-solid-svg-icons": "^7.1.0"
31
31
  },
32
32
  "dependencies": {
33
- "@phila/phila-ui-checkbox": "0.1.1-beta.4",
34
33
  "@phila/phila-ui-core": "3.0.0-beta.3",
34
+ "@phila/phila-ui-checkbox": "0.1.1-beta.4",
35
35
  "@phila/phila-ui-radio": "0.1.1-beta.4",
36
36
  "@phila/phila-ui-button": "2.2.3-beta.4"
37
37
  },