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

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 (16) hide show
  1. package/dist/FilterChip.vue.d.ts +7 -1
  2. package/dist/FilterChip.vue.d.ts.map +1 -1
  3. package/dist/FilterChipBase.vue.d.ts +3 -0
  4. package/dist/FilterChipBase.vue.d.ts.map +1 -1
  5. package/dist/FilterChipDropdownPanel.vue.d.ts +6 -1
  6. package/dist/FilterChipDropdownPanel.vue.d.ts.map +1 -1
  7. package/dist/FilterChipGroup.vue.d.ts +1 -0
  8. package/dist/FilterChipGroup.vue.d.ts.map +1 -1
  9. package/dist/index.css +1 -1
  10. package/dist/index.d.ts +6 -0
  11. package/dist/index.d.ts.map +1 -1
  12. package/dist/index.js +1 -1
  13. package/dist/index.mjs +242 -184
  14. package/dist/useIsMobile.d.ts +4 -0
  15. package/dist/useIsMobile.d.ts.map +1 -0
  16. package/package.json +5 -5
package/dist/FilterChip.vue.d.ts CHANGED
@@ -12,6 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Fi
12
12
  size: import('@phila/phila-ui-core').ComponentSize;
13
13
  color: import('./index').FilterChipColor;
14
14
  iconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
15
+ iconColor: string;
15
16
  trailingIconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
16
17
  label: string;
17
18
  choices: import('./index').FilterChoice[];
@@ -29,6 +30,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Fi
29
30
  readonly size?: import('@phila/phila-ui-core').ComponentSize | undefined;
30
31
  readonly color?: import('./index').FilterChipColor | undefined;
31
32
  readonly iconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition | undefined;
33
+ readonly iconColor?: string | undefined;
32
34
  readonly trailingIconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition | undefined;
33
35
  readonly iconOnly?: boolean | undefined;
34
36
  readonly active?: boolean | undefined;
@@ -58,6 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Fi
58
60
  size?: import('@phila/phila-ui-core').ComponentSize;
59
61
  color?: import('./index').FilterChipColor;
60
62
  iconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
63
+ iconColor?: string;
61
64
  trailingIconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
62
65
  iconOnly?: boolean;
63
66
  active?: boolean;
@@ -75,6 +78,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Fi
75
78
  size: import('@phila/phila-ui-core').ComponentSize;
76
79
  color: import('./index').FilterChipColor;
77
80
  iconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
81
+ iconColor: string;
78
82
  trailingIconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
79
83
  iconOnly: boolean;
80
84
  active: boolean;
@@ -104,6 +108,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Fi
104
108
  size: import('@phila/phila-ui-core').ComponentSize;
105
109
  color: import('./index').FilterChipColor;
106
110
  iconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
111
+ iconColor: string;
107
112
  trailingIconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
108
113
  iconOnly: boolean;
109
114
  active: boolean;
@@ -113,6 +118,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Fi
113
118
  size?: import('@phila/phila-ui-core').ComponentSize;
114
119
  color?: import('./index').FilterChipColor;
115
120
  iconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
121
+ iconColor?: string;
116
122
  trailingIconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
117
123
  iconOnly?: boolean;
118
124
  active?: boolean;
@@ -121,7 +127,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Fi
121
127
  ariaExpanded?: boolean;
122
128
  }> & Readonly<{
123
129
  onClick?: ((event: MouseEvent) => any) | undefined;
124
- }>, "el" | ("text" | "size" | "color" | "iconDefinition" | "trailingIconDefinition" | "iconOnly" | "active" | "chevron")> & import('vue').ShallowUnwrapRef<{
130
+ }>, "el" | ("text" | "size" | "color" | "iconDefinition" | "iconColor" | "trailingIconDefinition" | "iconOnly" | "active" | "chevron")> & import('vue').ShallowUnwrapRef<{
125
131
  el: import('vue').Ref<HTMLButtonElement | null, HTMLButtonElement | null>;
126
132
  }> & {} & import('vue').ComponentCustomProperties & {} & {
127
133
  $slots: {
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":"AAsLA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA4V02Q,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA5Ej/Q,GAAG;;AAxQjC,wBAgUK;AAaL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
package/dist/FilterChipBase.vue.d.ts CHANGED
@@ -6,6 +6,8 @@ type __VLS_Props = {
6
6
  size?: ComponentSize;
7
7
  color?: FilterChipColor;
8
8
  iconDefinition?: IconDefinition;
9
+ /** CSS color for the leading icon, independent of the chip's text color. */
10
+ iconColor?: string;
9
11
  /** trailing icon (toggle mode); ignored when `chevron` is set. */
10
12
  trailingIconDefinition?: IconDefinition;
11
13
  /** render only the icon, centered, with no text content. */
@@ -40,6 +42,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
40
42
  size: ComponentSize;
41
43
  color: FilterChipColor;
42
44
  iconDefinition: IconDefinition;
45
+ iconColor: string;
43
46
  trailingIconDefinition: IconDefinition;
44
47
  iconOnly: boolean;
45
48
  active: boolean;
package/dist/FilterChipBase.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FilterChipBase.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipBase.vue"],"names":[],"mappings":"AA+PA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,kEAAkE;IAClE,sBAAsB,CAAC,EAAE,cAAc,CAAC;IACxC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AA6DJ,iBAAS,cAAc;WA0GT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;UA5MV,MAAM;UACN,aAAa;WACZ,eAAe;oBACN,cAAc;4BAEN,cAAc;cAE5B,OAAO;YAET,OAAO;aAEN,OAAO;;;qBA4MnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"FilterChipBase.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipBase.vue"],"names":[],"mappings":"AA+QA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,sBAAsB,CAAC,EAAE,cAAc,CAAC;IACxC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AA+DJ,iBAAS,cAAc;WA4GT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;UAlNV,MAAM;UACN,aAAa;WACZ,eAAe;oBACN,cAAc;eAEnB,MAAM;4BAEO,cAAc;cAE5B,OAAO;YAET,OAAO;aAEN,OAAO;;;qBAgNnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,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/FilterChipGroup.vue.d.ts CHANGED
@@ -10,6 +10,7 @@ declare const _default: import('vue').DefineComponent<FilterChipGroupProps, {},
10
10
  color: import('./index').FilterChipColor;
11
11
  modelValue: FilterValues;
12
12
  filterButton: boolean;
13
+ elevated: boolean;
13
14
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
14
15
  el: HTMLDivElement;
15
16
  }, HTMLDivElement>;
package/dist/FilterChipGroup.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FilterChipGroup.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipGroup.vue"],"names":[],"mappings":"AAsOA,OAAO,KAAK,EAAE,oBAAoB,EAAoB,YAAY,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;AA8TpF,wBAUG"}
1
+ {"version":3,"file":"FilterChipGroup.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipGroup.vue"],"names":[],"mappings":"AAuPA,OAAO,KAAK,EAAE,oBAAoB,EAAoB,YAAY,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;AAoUpF,wBAUG"}
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-2925d75a]{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-2925d75a]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-large[data-v-2925d75a]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs)}.phila-filter-chip.is-small[data-v-2925d75a]{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-2925d75a]{padding-left:var(--spacing-s, .75rem);padding-right:var(--spacing-s, .75rem)}.phila-filter-chip.phila-filter-chip--blue[data-v-2925d75a]{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-2925d75a]{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-2925d75a]: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-2925d75a]{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-2925d75a]{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-2925d75a]: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-2925d75a]{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-2925d75a]{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-2925d75a]: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-2925d75a]{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-2925d75a]{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-2925d75a]: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-2925d75a]{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-2925d75a]{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-2925d75a]: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-2925d75a]{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-2925d75a]{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-2925d75a]: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-2925d75a]:focus-visible{outline:2px solid currentColor;outline-offset:var(--spacing-2xs)}.phila-filter-chip[data-v-2925d75a] .icon{color:var(--chip-icon-color, currentColor)}.phila-filter-chip[data-v-2925d75a] .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{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-0999af8a]{display:flex;flex-direction:column;gap:var(--spacing-2xs)}.phila-filter-chip-group__viewport[data-v-0999af8a]{position:relative}.phila-filter-chip-group__row[data-v-0999af8a]{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-0999af8a]::-webkit-scrollbar{display:none}.phila-filter-chip-group__arrow[data-v-0999af8a]{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-0999af8a]{left:var(--spacing-m)}.phila-filter-chip-group__arrow--right[data-v-0999af8a]{right:var(--spacing-m)}@media(hover:hover)and (pointer:fine){.phila-filter-chip-group__viewport:hover .phila-filter-chip-group__arrow[data-v-0999af8a]{display:flex}}.phila-filter-chip-group.is-elevated[data-v-0999af8a] .phila-filter-chip{box-shadow:0 2px 4px #0003}.phila-filter-chip-group.is-elevated .phila-filter-chip-group__row[data-v-0999af8a]{padding-top:2px;padding-bottom:8px}
package/dist/index.d.ts CHANGED
@@ -16,6 +16,8 @@ export interface FilterDefinition {
16
16
  /** Dropdown only: checkbox group (true) vs radio group (false). Default false. */
17
17
  multiple?: boolean;
18
18
  iconDefinition?: IconDefinition;
19
+ /** Optional CSS color for this chip's leading icon (independent of text color). */
20
+ iconColor?: string;
19
21
  /** Leave this filter's selections out of the filter button's count (e.g. Sort). */
20
22
  excludeFromCount?: boolean;
21
23
  }
@@ -29,6 +31,8 @@ export interface FilterChipProps extends BaseProps {
29
31
  size?: ComponentSize;
30
32
  color?: FilterChipColor;
31
33
  iconDefinition?: IconDefinition;
34
+ /** CSS color for the leading icon, independent of the text color. */
35
+ iconColor?: string;
32
36
  /** Toggle mode: trailing icon (ignored in dropdown mode, which uses a chevron). */
33
37
  trailingIconDefinition?: IconDefinition;
34
38
  /** Toggle mode: selection state. */
@@ -50,5 +54,7 @@ export interface FilterChipGroupProps extends BaseProps {
50
54
  color?: FilterChipColor;
51
55
  /** Show a leading button (sliders icon + active-selection count) that emits `open-filters`. */
52
56
  filterButton?: boolean;
57
+ /** When true, applies an elevation shadow to each chip (for floating over a map). */
58
+ elevated?: boolean;
53
59
  }
54
60
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErF,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;AAEvE,uFAAuF;AACvF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mFAAmF;IACnF,sBAAsB,CAAC,EAAE,cAAc,CAAC;IACxC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,+FAA+F;IAC/F,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErF,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;AAEvE,uFAAuF;AACvF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,sBAAsB,CAAC,EAAE,cAAc,CAAC;IACxC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,+FAA+F;IAC/F,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
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"),S=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},iconColor:{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),i=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(i.value),style:e.normalizeStyle(t.iconColor?{"--chip-icon-color":t.iconColor}:void 0),"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)],14,F))}}),$=(t,u)=>{const l=t.__vccOpts||t;for(const[a,i]of u)l[a]=i;return l},D=$(U,[["__scopeId","data-v-2925d75a"]]),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,i=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]:[]:i.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:i.value?1:0),v=e.computed(()=>h.value>0?`${l.applyText} (${h.value})`:l.applyText),k=()=>{i.value="",s.value=[],a("reset")},d=()=>{a("apply",l.multiple?[...s.value]:i.value)};return(c,p)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[t.mobile?(e.openBlock(),e.createElementBlock("div",{key:0,class:"phila-filter-chip-sheet__scrim",onClick:p[0]||(p[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:p[1]||(p[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":p[2]||(p[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":i.value,"onUpdate:modelValue":p[3]||(p[3]=y=>i.value=y)},null,8,["group-label","choices","model-value"])),t.mobile?(e.openBlock(),e.createElementBlock("div",G,[e.createVNode(e.unref(S.PhilaButton),{variant:"secondary",text:t.resetText,onClick:k},null,8,["text"]),e.createVNode(e.unref(S.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(S.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},iconColor:{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,i=e.computed(()=>Array.isArray(l.choices)),s=e.useSlots(),r=e.computed(()=>!i.value&&!!l.iconDefinition&&!l.text&&!l.label&&!s.default);function h(m){a("update:selected",!l.selected),a("click",m)}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:p}=X(),y=e.ref(null),B=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!==""),n=e.computed(()=>l.multiple&&Array.isArray(l.modelValue)?l.modelValue.length:0),f=e.computed(()=>{const m=l.label??l.text??"";return n.value>0?`${m} (${n.value})`:m});function o(){const m=y.value?.el??null;if(!m)return;const V=m.getBoundingClientRect();B.value=V.bottom+4,g.value=V.left}function C(){c.value&&d(!1)}e.watch(c,m=>{m&&!p.value?window.addEventListener("scroll",C,{capture:!0}):window.removeEventListener("scroll",C,{capture:!0})});function T(){const m=!c.value;m&&!p.value&&o(),d(m)}function I(m){a("update:modelValue",m),d(!1)}function P(){a("update:modelValue",l.multiple?[]:"")}return(m,V)=>i.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(D,{ref_key:"triggerRef",ref:y,text:f.value,size:t.size,color:t.color,"icon-definition":t.iconDefinition,"icon-color":t.iconColor,active:x.value||c.value,chevron:"","aria-expanded":c.value,"data-toggle":`visibility-${v}`,onClick:T},null,8,["text","size","color","icon-definition","icon-color","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:B.value,left:g.value,mobile:e.unref(p),"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(D,{key:1,size:t.size,color:t.color,"icon-definition":t.iconDefinition,"icon-color":t.iconColor,"trailing-icon-definition":t.trailingIconDefinition,"icon-only":r.value,active:t.selected,"aria-pressed":t.selected,onClick:h},{default:e.withCtx(()=>[e.renderSlot(m.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["size","color","icon-definition","icon-color","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,i=0,s=!1,r=null;const h=d=>{t.value&&d.pointerType!=="mouse"&&(l=!0,s=!1,a=d.clientX,i=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=i-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},elevated:{type:Boolean,default:!1},className:{}},emits:["update:modelValue","open-filters"],setup(t,{emit:u}){const l=t,a=u,i=e.computed(()=>{let n=0;for(const f of l.filters){if(f.excludeFromCount)continue;const o=l.modelValue[f.key];Array.isArray(o)?n+=o.length:typeof o=="string"?n+=o?1:0:o===!0&&(n+=1)}return n}),s=e.computed(()=>i.value>0?`Filters (${i.value} selected)`:"Filters"),{el:r,suppressClick:h,dragHandlers:v}=Q(),k=e.computed(()=>b.cn("phila-filter-chip-group",l.elevated&&"is-elevated",l.className));function d(n){return Array.isArray(n.choices)}function c(n,f){a("update:modelValue",{...l.modelValue,[n]:f})}function p(n){h.value&&(n.stopPropagation(),n.preventDefault())}const y=e.ref(!1),B=e.ref(!1);function g(){const n=r.value;n&&(y.value=n.scrollLeft>1,B.value=n.scrollLeft+n.clientWidth<n.scrollWidth-1)}function z(n){const f=r.value;f&&f.scrollBy({left:n*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)),(n,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]=o=>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:p,onScroll:g}),[t.filterButton?(e.openBlock(),e.createBlock(D,{key:0,size:t.size,color:t.color,"icon-definition":e.unref(w.faSliders),text:i.value>0?`(${i.value})`:"","icon-only":i.value===0,active:i.value>0,"aria-label":s.value,onClick:f[1]||(f[1]=o=>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,o=>(e.openBlock(),e.createBlock(A,{key:o.key,label:o.label,text:o.label,size:t.size,color:t.color,"icon-definition":o.iconDefinition,"icon-color":o.iconColor,choices:o.choices,multiple:o.multiple,"model-value":d(o)?t.modelValue[o.key]:void 0,selected:!d(o)&&t.modelValue[o.key]===!0,"onUpdate:modelValue":C=>c(o.key,C),"onUpdate:selected":C=>c(o.key,C)},null,8,["label","text","size","color","icon-definition","icon-color","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:f[2]||(f[2]=o=>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-0999af8a"]]);exports.FilterChip=A;exports.FilterChipGroup=_;
package/dist/index.mjs CHANGED
@@ -1,16 +1,17 @@
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 C, computed as h, createElementBlock as g, openBlock as c, normalizeStyle as W, normalizeClass as M, createVNode as D, createBlock as V, createCommentVNode as z, unref as v, withCtx as X, renderSlot as q, createTextVNode as K, toDisplayString as I, watch as O, Teleport as le, createElementVNode as A, onMounted as Q, onBeforeUnmount as U, useSlots as te, useId as ie, Fragment as Y, nextTick as N, mergeProps as oe, renderList as ne } from "vue";
2
+ import { cn as j, ActionContent as ae, Icon as L, useVisibility as re } from "@phila/phila-ui-core";
3
+ import { faChevronDown as ce, faChevronLeft as se, faSliders as ue, faChevronRight as de } from "@fortawesome/pro-solid-svg-icons";
4
+ import { RadioGroup as fe } from "@phila/phila-ui-radio";
5
+ import { CheckboxGroup as ve } from "@phila/phila-ui-checkbox";
6
+ import { PhilaButton as E } from "@phila/phila-ui-button";
7
+ import './index.css';const me = ["aria-pressed", "aria-expanded"], H = "xxsmall", pe = /* @__PURE__ */ R({
8
8
  __name: "FilterChipBase",
9
9
  props: {
10
10
  text: { default: void 0 },
11
11
  size: { default: "medium" },
12
12
  color: { default: "blue" },
13
13
  iconDefinition: { default: void 0 },
14
+ iconColor: { default: void 0 },
14
15
  trailingIconDefinition: { default: void 0 },
15
16
  iconOnly: { type: Boolean, default: !1 },
16
17
  active: { type: Boolean, default: !1 },
@@ -19,9 +20,9 @@ import './index.css';const fe = ["aria-pressed", "aria-expanded"], N = "xxsmall"
19
20
  ariaExpanded: { type: Boolean }
20
21
  },
21
22
  emits: ["click"],
22
- setup(e, { expose: v }) {
23
- const l = e, a = x(null), i = h(
24
- () => K(
23
+ setup(e, { expose: s }) {
24
+ const l = e, n = C(null), i = h(
25
+ () => j(
25
26
  "phila-filter-chip",
26
27
  `phila-filter-chip--${l.color}`,
27
28
  l.size !== "medium" && `is-${l.size}`,
@@ -30,9 +31,9 @@ import './index.css';const fe = ["aria-pressed", "aria-expanded"], N = "xxsmall"
30
31
  l.iconOnly && "is-icon-only"
31
32
  )
32
33
  );
33
- v({ el: a });
34
- const u = (n) => {
35
- switch (n) {
34
+ s({ el: n });
35
+ const u = (r) => {
36
+ switch (r) {
36
37
  case "extra-large":
37
38
  return "default";
38
39
  case "large":
@@ -41,51 +42,61 @@ import './index.css';const fe = ["aria-pressed", "aria-expanded"], N = "xxsmall"
41
42
  return "extra-small";
42
43
  }
43
44
  };
44
- return (n, g) => (p(), C("button", {
45
+ return (r, b) => (c(), g("button", {
45
46
  ref_key: "rootEl",
46
- ref: a,
47
+ ref: n,
47
48
  type: "button",
48
- class: U(i.value),
49
+ class: M(i.value),
50
+ style: W(e.iconColor ? { "--chip-icon-color": e.iconColor } : void 0),
49
51
  "aria-pressed": e.ariaPressed,
50
52
  "aria-expanded": e.ariaExpanded,
51
- onClick: g[0] || (g[0] = (y) => n.$emit("click", y))
53
+ onClick: b[0] || (b[0] = (y) => r.$emit("click", y))
52
54
  }, [
53
- S(m(ie), {
55
+ D(v(ae), {
54
56
  "icon-definition": e.iconDefinition,
55
57
  size: e.size,
56
58
  inline: "",
57
- "icon-size": N,
59
+ "icon-size": H,
58
60
  "icon-only": e.iconOnly
59
61
  }, {
60
- default: H(() => [
61
- G(n.$slots, "default", {}, () => [
62
- M(L(e.text), 1)
62
+ default: X(() => [
63
+ q(r.$slots, "default", {}, () => [
64
+ K(I(e.text), 1)
63
65
  ], !0)
64
66
  ]),
65
67
  _: 3
66
68
  }, 8, ["icon-definition", "size", "icon-only"]),
67
- e.chevron ? (p(), b(m(P), {
69
+ e.chevron ? (c(), V(v(L), {
68
70
  key: 0,
69
- "icon-definition": m(ne),
71
+ "icon-definition": v(ce),
70
72
  size: "xxsmall",
71
73
  inline: "",
72
74
  decorative: "",
73
75
  class: "phila-filter-chip__chevron"
74
- }, null, 8, ["icon-definition"])) : e.trailingIconDefinition ? (p(), b(m(P), {
76
+ }, null, 8, ["icon-definition"])) : e.trailingIconDefinition ? (c(), V(v(L), {
75
77
  key: 1,
76
78
  "icon-definition": e.trailingIconDefinition,
77
- size: N,
79
+ size: H,
78
80
  inline: "",
79
81
  decorative: ""
80
82
  }, null, 8, ["icon-definition"])) : z("", !0)
81
- ], 10, fe));
83
+ ], 14, me));
82
84
  }
83
- }), j = (e, v) => {
85
+ }), J = (e, s) => {
84
86
  const l = e.__vccOpts || e;
85
- for (const [a, i] of v)
86
- l[a] = i;
87
+ for (const [n, i] of s)
88
+ l[n] = i;
87
89
  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({
90
+ }, F = /* @__PURE__ */ J(pe, [["__scopeId", "data-v-2925d75a"]]), he = ["id", "aria-label"], ye = {
91
+ key: 0,
92
+ class: "phila-filter-chip-sheet__header"
93
+ }, be = { class: "phila-filter-chip-sheet__title" }, xe = {
94
+ key: 3,
95
+ class: "phila-filter-chip-sheet__footer"
96
+ }, ge = {
97
+ key: 4,
98
+ class: "phila-filter-chip-panel__footer"
99
+ }, Ce = /* @__PURE__ */ R({
89
100
  __name: "FilterChipDropdownPanel",
90
101
  props: {
91
102
  menuId: {},
@@ -95,63 +106,103 @@ import './index.css';const fe = ["aria-pressed", "aria-expanded"], N = "xxsmall"
95
106
  value: {},
96
107
  top: {},
97
108
  left: {},
109
+ mobile: { type: Boolean, default: !1 },
98
110
  applyText: { default: "Apply" },
99
111
  resetText: { default: "Reset" }
100
112
  },
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(
113
+ emits: ["apply", "reset", "close"],
114
+ setup(e, { emit: s }) {
115
+ const l = e, n = s, i = C(typeof l.value == "string" ? l.value : ""), u = C(Array.isArray(l.value) ? [...l.value] : []);
116
+ O(
105
117
  () => l.value,
106
- (s) => {
107
- l.multiple ? u.value = Array.isArray(s) ? [...s] : [] : i.value = typeof s == "string" ? s : "";
118
+ (a) => {
119
+ l.multiple ? u.value = Array.isArray(a) ? [...a] : [] : i.value = typeof a == "string" ? a : "";
108
120
  }
109
121
  );
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);
122
+ const r = h(() => l.choices.map((a) => ({ text: a.text, value: a.value }))), b = h(() => l.multiple ? u.value.length : i.value ? 1 : 0), y = h(
123
+ () => b.value > 0 ? `${l.applyText} (${b.value})` : l.applyText
124
+ ), k = () => {
125
+ i.value = "", u.value = [], n("reset");
126
+ }, d = () => {
127
+ n("apply", l.multiple ? [...u.value] : i.value);
114
128
  };
115
- return (s, r) => (p(), b(Q, { to: "body" }, [
116
- B("div", {
129
+ return (a, p) => (c(), V(le, { to: "body" }, [
130
+ e.mobile ? (c(), g("div", {
131
+ key: 0,
132
+ class: "phila-filter-chip-sheet__scrim",
133
+ onClick: p[0] || (p[0] = (x) => n("close"))
134
+ })) : z("", !0),
135
+ A("div", {
117
136
  id: e.menuId,
118
- class: "phila-filter-chip-panel",
137
+ class: M(e.mobile ? "phila-filter-chip-sheet" : "phila-filter-chip-panel"),
119
138
  role: "dialog",
120
139
  "aria-label": e.label,
121
- style: Y({ top: e.top + "px", left: e.left + "px" })
140
+ style: W(e.mobile ? void 0 : { top: e.top + "px", left: e.left + "px" })
122
141
  }, [
123
- e.multiple ? (p(), b(m(se), {
124
- key: 0,
142
+ e.mobile ? (c(), g("header", ye, [
143
+ A("span", be, I(e.label), 1),
144
+ A("button", {
145
+ type: "button",
146
+ class: "phila-filter-chip-sheet__close",
147
+ "aria-label": "Close",
148
+ onClick: p[1] || (p[1] = (x) => n("close"))
149
+ }, " ✕ ")
150
+ ])) : z("", !0),
151
+ e.multiple ? (c(), V(v(ve), {
152
+ key: 1,
125
153
  "group-label": e.label,
126
- choices: n.value,
154
+ choices: r.value,
127
155
  "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), {
130
- key: 1,
156
+ "onUpdate:modelValue": p[2] || (p[2] = (x) => u.value = x)
157
+ }, null, 8, ["group-label", "choices", "model-value"])) : (c(), V(v(fe), {
158
+ key: 2,
131
159
  "group-label": e.label,
132
- choices: n.value,
160
+ choices: r.value,
133
161
  "model-value": i.value,
134
- "onUpdate:modelValue": r[1] || (r[1] = (d) => i.value = d)
162
+ "onUpdate:modelValue": p[3] || (p[3] = (x) => i.value = x)
135
163
  }, null, 8, ["group-label", "choices", "model-value"])),
136
- B("div", me, [
137
- B("button", {
164
+ e.mobile ? (c(), g("div", xe, [
165
+ D(v(E), {
166
+ variant: "secondary",
167
+ text: e.resetText,
168
+ onClick: k
169
+ }, null, 8, ["text"]),
170
+ D(v(E), {
171
+ variant: "primary",
172
+ text: y.value,
173
+ onClick: d
174
+ }, null, 8, ["text"])
175
+ ])) : (c(), g("div", ge, [
176
+ A("button", {
138
177
  type: "button",
139
178
  class: "phila-filter-chip-panel__reset has-text-body-small",
140
- onClick: g
141
- }, L(e.resetText), 1),
142
- S(m(de), {
179
+ onClick: k
180
+ }, I(e.resetText), 1),
181
+ D(v(E), {
143
182
  variant: "primary",
144
183
  size: "small",
145
184
  text: e.applyText,
146
- onClick: y
185
+ onClick: d
147
186
  }, null, 8, ["text"])
148
- ])
149
- ], 12, ve)
187
+ ]))
188
+ ], 14, he)
150
189
  ]));
151
190
  }
152
- });
153
- let he = 0;
154
- const ge = /* @__PURE__ */ T({
191
+ }), G = "(max-width: 1064px) and (max-height: 915px)";
192
+ function ke() {
193
+ const e = C(typeof window < "u" && window.matchMedia(G).matches);
194
+ let s = null;
195
+ function l(n) {
196
+ e.value = n.matches;
197
+ }
198
+ return Q(() => {
199
+ s = window.matchMedia(G), e.value = s.matches, s.addEventListener("change", l);
200
+ }), U(() => {
201
+ s?.removeEventListener("change", l);
202
+ }), { isMobile: e };
203
+ }
204
+ let Ve = 0;
205
+ const ze = /* @__PURE__ */ R({
155
206
  __name: "FilterChip",
156
207
  props: {
157
208
  label: { default: void 0 },
@@ -159,6 +210,7 @@ const ge = /* @__PURE__ */ T({
159
210
  size: { default: "medium" },
160
211
  color: { default: "blue" },
161
212
  iconDefinition: { default: void 0 },
213
+ iconColor: { default: void 0 },
162
214
  trailingIconDefinition: { default: void 0 },
163
215
  selected: { type: Boolean, default: !1 },
164
216
  choices: { default: void 0 },
@@ -169,127 +221,131 @@ const ge = /* @__PURE__ */ T({
169
221
  className: {}
170
222
  },
171
223
  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(
224
+ setup(e, { emit: s }) {
225
+ const l = e, n = s, i = h(() => Array.isArray(l.choices)), u = te(), r = h(
174
226
  () => !i.value && !!l.iconDefinition && !l.text && !l.label && !u.default
175
227
  );
176
- function g(f) {
177
- a("update:selected", !l.selected), a("click", f);
228
+ function b(m) {
229
+ n("update:selected", !l.selected), n("click", m);
178
230
  }
179
- const y = `phila-filter-chip-${_()}-${++he}`, { isVisible: s, setVisibility: r } = oe({
231
+ const y = `phila-filter-chip-${ie()}-${++Ve}`, { isVisible: k, setVisibility: d } = re({
180
232
  id: y,
181
233
  group: "phila-filter-chip",
182
234
  outsideClickHide: !0,
183
235
  escapeKeyHide: !0,
184
236
  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;
237
+ }), a = h(() => k(y)), { isMobile: p } = ke(), x = C(null), S = C(0), w = C(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 !== ""), o = h(() => l.multiple && Array.isArray(l.modelValue) ? l.modelValue.length : 0), f = h(() => {
238
+ const m = l.label ?? l.text ?? "";
239
+ return o.value > 0 ? `${m} (${o.value})` : m;
188
240
  });
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;
194
- }
195
241
  function t() {
196
- d.value && r(!1);
242
+ const m = x.value?.el ?? null;
243
+ if (!m) return;
244
+ const T = m.getBoundingClientRect();
245
+ S.value = T.bottom + 4, w.value = T.left;
246
+ }
247
+ function B() {
248
+ a.value && d(!1);
197
249
  }
198
- E(d, (f) => {
199
- f ? window.addEventListener("scroll", t, { capture: !0 }) : window.removeEventListener("scroll", t, { capture: !0 });
250
+ O(a, (m) => {
251
+ m && !p.value ? window.addEventListener("scroll", B, { capture: !0 }) : window.removeEventListener("scroll", B, { capture: !0 });
200
252
  });
201
- function A() {
202
- const f = !d.value;
203
- f && c(), r(f);
253
+ function Z() {
254
+ const m = !a.value;
255
+ m && !p.value && t(), d(m);
204
256
  }
205
- function q(f) {
206
- a("update:modelValue", f), r(!1);
257
+ function _(m) {
258
+ n("update:modelValue", m), d(!1);
207
259
  }
208
- function J() {
209
- a("update:modelValue", l.multiple ? [] : "");
260
+ function ee() {
261
+ n("update:modelValue", l.multiple ? [] : "");
210
262
  }
211
- return (f, R) => i.value ? (p(), C(W, { key: 0 }, [
212
- S(F, {
263
+ return (m, T) => i.value ? (c(), g(Y, { key: 0 }, [
264
+ D(F, {
213
265
  ref_key: "triggerRef",
214
- ref: $,
215
- text: o.value,
266
+ ref: x,
267
+ text: f.value,
216
268
  size: e.size,
217
269
  color: e.color,
218
270
  "icon-definition": e.iconDefinition,
219
- active: I.value || d.value,
271
+ "icon-color": e.iconColor,
272
+ active: $.value || a.value,
220
273
  chevron: "",
221
- "aria-expanded": d.value,
274
+ "aria-expanded": a.value,
222
275
  "data-toggle": `visibility-${y}`,
223
- onClick: A
224
- }, null, 8, ["text", "size", "color", "icon-definition", "active", "aria-expanded", "data-toggle"]),
225
- d.value ? (p(), b(ye, {
276
+ onClick: Z
277
+ }, null, 8, ["text", "size", "color", "icon-definition", "icon-color", "active", "aria-expanded", "data-toggle"]),
278
+ a.value ? (c(), V(Ce, {
226
279
  key: 0,
227
280
  "menu-id": y,
228
281
  label: e.label ?? e.text ?? "",
229
282
  choices: e.choices,
230
283
  multiple: e.multiple,
231
- value: V.value,
232
- top: D.value,
284
+ value: P.value,
285
+ top: S.value,
233
286
  left: w.value,
287
+ mobile: v(p),
234
288
  "apply-text": e.applyText,
235
289
  "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, {
290
+ onApply: _,
291
+ onReset: ee,
292
+ onClose: T[0] || (T[0] = (Se) => v(d)(!1))
293
+ }, null, 8, ["label", "choices", "multiple", "value", "top", "left", "mobile", "apply-text", "reset-text"])) : z("", !0)
294
+ ], 64)) : (c(), V(F, {
240
295
  key: 1,
241
296
  size: e.size,
242
297
  color: e.color,
243
298
  "icon-definition": e.iconDefinition,
299
+ "icon-color": e.iconColor,
244
300
  "trailing-icon-definition": e.trailingIconDefinition,
245
- "icon-only": n.value,
301
+ "icon-only": r.value,
246
302
  active: e.selected,
247
303
  "aria-pressed": e.selected,
248
- onClick: g
304
+ onClick: b
249
305
  }, {
250
- default: H(() => [
251
- G(f.$slots, "default", {}, () => [
252
- M(L(e.text), 1)
306
+ default: X(() => [
307
+ q(m.$slots, "default", {}, () => [
308
+ K(I(e.text), 1)
253
309
  ])
254
310
  ]),
255
311
  _: 3
256
- }, 8, ["size", "color", "icon-definition", "trailing-icon-definition", "icon-only", "active", "aria-pressed"]));
312
+ }, 8, ["size", "color", "icon-definition", "icon-color", "trailing-icon-definition", "icon-only", "active", "aria-pressed"]));
257
313
  }
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) => {
314
+ }), we = 5;
315
+ function De() {
316
+ const e = C(null), s = C(!1);
317
+ let l = !1, n = 0, i = 0, u = !1, r = null;
318
+ const b = (d) => {
319
+ e.value && d.pointerType !== "mouse" && (l = !0, u = !1, n = d.clientX, i = e.value.scrollLeft);
320
+ }, y = (d) => {
265
321
  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) {
322
+ const a = d.clientX - n;
323
+ !u && Math.abs(a) > we && (u = !0, s.value = !0, e.value.setPointerCapture(d.pointerId), r = d.pointerId), u && (e.value.scrollLeft = i - a);
324
+ }, k = () => {
325
+ if (e.value && r !== null) {
270
326
  try {
271
- e.value.releasePointerCapture(n);
327
+ e.value.releasePointerCapture(r);
272
328
  } catch {
273
329
  }
274
- n = null;
330
+ r = null;
275
331
  }
276
- l = !1, u && setTimeout(() => v.value = !1, 0);
332
+ l = !1, u && setTimeout(() => s.value = !1, 0);
277
333
  };
278
- return X(s), {
334
+ return U(k), {
279
335
  el: e,
280
- suppressClick: v,
336
+ suppressClick: s,
281
337
  dragHandlers: {
282
- onPointerdown: g,
338
+ onPointerdown: b,
283
339
  onPointermove: y,
284
- onPointerup: s,
285
- onPointerleave: s
340
+ onPointerup: k,
341
+ onPointerleave: k
286
342
  }
287
343
  };
288
344
  }
289
- const ke = {
345
+ const $e = {
290
346
  key: 0,
291
347
  class: "phila-filter-chip-group__label has-text-label-default"
292
- }, Ce = { class: "phila-filter-chip-group__viewport" }, Ve = /* @__PURE__ */ T({
348
+ }, Be = { class: "phila-filter-chip-group__viewport" }, Ae = /* @__PURE__ */ R({
293
349
  __name: "FilterChipGroup",
294
350
  props: {
295
351
  filters: {},
@@ -298,109 +354,111 @@ const ke = {
298
354
  size: { default: "medium" },
299
355
  color: { default: "blue" },
300
356
  filterButton: { type: Boolean, default: !1 },
357
+ elevated: { type: Boolean, default: !1 },
301
358
  className: {}
302
359
  },
303
360
  emits: ["update:modelValue", "open-filters"],
304
- setup(e, { emit: v }) {
305
- const l = e, a = v, i = h(() => {
361
+ setup(e, { emit: s }) {
362
+ const l = e, n = s, i = h(() => {
306
363
  let o = 0;
307
- for (const c of l.filters) {
308
- if (c.excludeFromCount) continue;
309
- const t = l.modelValue[c.key];
364
+ for (const f of l.filters) {
365
+ if (f.excludeFromCount) continue;
366
+ const t = l.modelValue[f.key];
310
367
  Array.isArray(t) ? o += t.length : typeof t == "string" ? o += t ? 1 : 0 : t === !0 && (o += 1);
311
368
  }
312
369
  return o;
313
370
  }), u = h(
314
371
  () => 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) {
372
+ ), { el: r, suppressClick: b, dragHandlers: y } = De(), k = h(() => j("phila-filter-chip-group", l.elevated && "is-elevated", l.className));
373
+ function d(o) {
317
374
  return Array.isArray(o.choices);
318
375
  }
319
- function d(o, c) {
320
- a("update:modelValue", { ...l.modelValue, [o]: c });
376
+ function a(o, f) {
377
+ n("update:modelValue", { ...l.modelValue, [o]: f });
321
378
  }
322
- function $(o) {
323
- g.value && (o.stopPropagation(), o.preventDefault());
379
+ function p(o) {
380
+ b.value && (o.stopPropagation(), o.preventDefault());
324
381
  }
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);
382
+ const x = C(!1), S = C(!1);
383
+ function w() {
384
+ const o = r.value;
385
+ o && (x.value = o.scrollLeft > 1, S.value = o.scrollLeft + o.clientWidth < o.scrollWidth - 1);
329
386
  }
330
- function I(o) {
331
- const c = n.value;
332
- c && c.scrollBy({ left: o * c.clientWidth * 0.8, behavior: "smooth" });
387
+ function P(o) {
388
+ const f = r.value;
389
+ f && f.scrollBy({ left: o * f.clientWidth * 0.8, behavior: "smooth" });
333
390
  }
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(
391
+ let $ = null;
392
+ return Q(() => {
393
+ N(w), r.value && ($ = new ResizeObserver(() => w()), $.observe(r.value));
394
+ }), U(() => {
395
+ $?.disconnect(), $ = null;
396
+ }), O(
340
397
  () => l.filters,
341
- () => O(V)
342
- ), (o, c) => (p(), C("div", {
343
- class: U(s.value)
398
+ () => N(w)
399
+ ), (o, f) => (c(), g("div", {
400
+ class: M(k.value)
344
401
  }, [
345
- e.label ? (p(), C("span", ke, L(e.label), 1)) : z("", !0),
346
- B("div", Ce, [
347
- D.value ? (p(), C("button", {
402
+ e.label ? (c(), g("span", $e, I(e.label), 1)) : z("", !0),
403
+ A("div", Be, [
404
+ x.value ? (c(), g("button", {
348
405
  key: 0,
349
406
  type: "button",
350
407
  class: "phila-filter-chip-group__arrow phila-filter-chip-group__arrow--left",
351
408
  "aria-label": "Scroll filters left",
352
- onClick: c[0] || (c[0] = (t) => I(-1))
409
+ onClick: f[0] || (f[0] = (t) => P(-1))
353
410
  }, [
354
- S(m(P), {
355
- "icon-definition": m(ae),
411
+ D(v(L), {
412
+ "icon-definition": v(se),
356
413
  size: "xxsmall",
357
414
  inline: "",
358
415
  decorative: ""
359
416
  }, null, 8, ["icon-definition"])
360
417
  ])) : z("", !0),
361
- B("div", le({
418
+ A("div", oe({
362
419
  ref_key: "el",
363
- ref: n,
420
+ ref: r,
364
421
  class: "phila-filter-chip-group__row"
365
- }, m(y), {
366
- onClickCapture: $,
367
- onScroll: V
422
+ }, v(y), {
423
+ onClickCapture: p,
424
+ onScroll: w
368
425
  }), [
369
- e.filterButton ? (p(), b(F, {
426
+ e.filterButton ? (c(), V(F, {
370
427
  key: 0,
371
428
  size: e.size,
372
429
  color: e.color,
373
- "icon-definition": m(re),
430
+ "icon-definition": v(ue),
374
431
  text: i.value > 0 ? `(${i.value})` : "",
375
432
  "icon-only": i.value === 0,
376
433
  active: i.value > 0,
377
434
  "aria-label": u.value,
378
- onClick: c[1] || (c[1] = (t) => a("open-filters"))
435
+ onClick: f[1] || (f[1] = (t) => n("open-filters"))
379
436
  }, 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, {
437
+ (c(!0), g(Y, null, ne(e.filters, (t) => (c(), V(ze, {
381
438
  key: t.key,
382
439
  label: t.label,
383
440
  text: t.label,
384
441
  size: e.size,
385
442
  color: e.color,
386
443
  "icon-definition": t.iconDefinition,
444
+ "icon-color": t.iconColor,
387
445
  choices: t.choices,
388
446
  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)
393
- }, null, 8, ["label", "text", "size", "color", "icon-definition", "choices", "multiple", "model-value", "selected", "onUpdate:modelValue", "onUpdate:selected"]))), 128))
447
+ "model-value": d(t) ? e.modelValue[t.key] : void 0,
448
+ selected: !d(t) && e.modelValue[t.key] === !0,
449
+ "onUpdate:modelValue": (B) => a(t.key, B),
450
+ "onUpdate:selected": (B) => a(t.key, B)
451
+ }, null, 8, ["label", "text", "size", "color", "icon-definition", "icon-color", "choices", "multiple", "model-value", "selected", "onUpdate:modelValue", "onUpdate:selected"]))), 128))
394
452
  ], 16),
395
- w.value ? (p(), C("button", {
453
+ S.value ? (c(), g("button", {
396
454
  key: 1,
397
455
  type: "button",
398
456
  class: "phila-filter-chip-group__arrow phila-filter-chip-group__arrow--right",
399
457
  "aria-label": "Scroll filters right",
400
- onClick: c[2] || (c[2] = (t) => I(1))
458
+ onClick: f[2] || (f[2] = (t) => P(1))
401
459
  }, [
402
- S(m(P), {
403
- "icon-definition": m(ue),
460
+ D(v(L), {
461
+ "icon-definition": v(de),
404
462
  size: "xxsmall",
405
463
  inline: "",
406
464
  decorative: ""
@@ -409,8 +467,8 @@ const ke = {
409
467
  ])
410
468
  ], 2));
411
469
  }
412
- }), $e = /* @__PURE__ */ j(Ve, [["__scopeId", "data-v-99d3ffdf"]]);
470
+ }), Fe = /* @__PURE__ */ J(Ae, [["__scopeId", "data-v-0999af8a"]]);
413
471
  export {
414
- ge as FilterChip,
415
- $e as FilterChipGroup
472
+ ze as FilterChip,
473
+ Fe as FilterChipGroup
416
474
  };
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.2",
4
4
  "type": "module",
5
5
  "description": "Filter chips for faceted filtering",
6
6
  "main": "./dist/index.js",
@@ -30,10 +30,10 @@
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
- "@phila/phila-ui-core": "3.0.0-beta.3",
35
- "@phila/phila-ui-radio": "0.1.1-beta.4",
36
- "@phila/phila-ui-button": "2.2.3-beta.4"
33
+ "@phila/phila-ui-core": "3.0.0-beta.4",
34
+ "@phila/phila-ui-radio": "0.1.1-beta.5",
35
+ "@phila/phila-ui-checkbox": "0.1.1-beta.5",
36
+ "@phila/phila-ui-button": "2.2.3-beta.5"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@types/node": "^24.0.0",