@phila/phila-ui-filter-summary 0.1.0-beta.0

package/README.md

@@ -0,0 +1,84 @@
+# FilterSummary Component
+
+<!-- status-badge-start -->
+
+![Status: In Progress](https://img.shields.io/badge/-In%20Progress-yellow)
+
+<!-- status-badge-end -->
+
+`@phila/phila-ui-filter-summary` — filter summary for applied filters: a "Showing N results for …" line plus removable filter pills (one per active selection) and a Clear all action.
+
+## Installation
+
+```bash
+pnpm add @phila/phila-ui-filter-summary
+```
+
+## Shared model
+
+`FilterSummary` uses the same `FilterDefinition[]` and `FilterValues` types as `FilterChipGroup` and `FilterPanel`. Bind all three to the same `ref<FilterValues>` and they stay in sync: removing a pill or clicking Clear all emits an updated model; Clear all preserves any ordering filters (those with `excludeFromCount: true`, e.g. Sort) so the user's sort preference is not lost.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { FilterSummary } from "@phila/phila-ui-filter-summary";
+import type { FilterDefinition, FilterValues } from "@phila/phila-ui-core";
+
+const filters: FilterDefinition[] = [
+  /* ... */
+];
+const values = ref<FilterValues>({ language: ["en", "es"] });
+</script>
+
+<template>
+  <FilterSummary :filters="filters" v-model="values" :results-count="21" query="health center" />
+</template>
+```
+
+## Props
+
+| Prop           | Type                 | Default       | Description                                                           |
+| -------------- | -------------------- | ------------- | --------------------------------------------------------------------- |
+| `filters`      | `FilterDefinition[]` | —             | Required. Same filter definitions used by the chip bar / panel.       |
+| `modelValue`   | `FilterValues`       | `{}`          | Applied values (`v-model`). Removing a pill emits an updated copy.    |
+| `resultsCount` | `number`             | —             | When set, renders the "Showing N results…" line above the pills.      |
+| `query`        | `string`             | —             | Searched term shown in the results line as `for "…"`.                 |
+| `clearAllText` | `string`             | `"Clear all"` | Label for the Clear all action (shown only when 2+ pills are active). |
+
+## Events
+
+| Event               | Payload        | Description                                                         |
+| ------------------- | -------------- | ------------------------------------------------------------------- |
+| `update:modelValue` | `FilterValues` | Emitted when a pill is removed or Clear all is clicked (`v-model`). |
+
+## Slots
+
+| Slot       | Props                              | Description                                                              |
+| ---------- | ---------------------------------- | ------------------------------------------------------------------------ |
+| `#results` | `{ count: number, query: string }` | Replaces the default "Showing N results for …" line with custom content. |
+
+## Development
+
+### Install Dependencies
+
+```bash
+pnpm install
+```
+
+### Build Library
+
+```bash
+pnpm build
+```
+
+### Type Check
+
+```bash
+pnpm type-check
+```
+
+## License
+
+MIT

package/dist/FilterSummary.vue.d.ts

@@ -0,0 +1,30 @@
+import { FilterValues } from '@phila/phila-ui-core';
+import { FilterSummaryProps } from './index';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        results?(_: {
+            count: number | undefined;
+            query: string | undefined;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<FilterSummaryProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: FilterValues) => any;
+}, string, import('vue').PublicProps, Readonly<FilterSummaryProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FilterValues) => any) | undefined;
+}>, {
+    modelValue: FilterValues;
+    clearAllText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=FilterSummary.vue.d.ts.map

package/dist/FilterSummary.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSummary.vue.d.ts","sourceRoot":"","sources":["../src/FilterSummary.vue"],"names":[],"mappings":"AAwKA,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA8FlD,iBAAS,cAAc;WA8FT,OAAO,IAA6B;;;;;YAVrB,GAAG;;;;EAe/B;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;6EAQnB,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/index.css

@@ -0,0 +1 @@
+.phila-filter-summary[data-v-bcac6c42]{display:flex;flex-direction:column;gap:var(--spacing-xs, .5rem)}.phila-filter-summary__results[data-v-bcac6c42]{margin:0}.phila-filter-summary__query[data-v-bcac6c42]{font-style:italic;font-weight:700}.phila-filter-summary__pills[data-v-bcac6c42]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xs, .5rem)}.phila-filter-summary__clear-all[data-v-bcac6c42]{background:none;border:none;padding:0;margin-inline-start:var(--spacing-2xs, .25rem);cursor:pointer;font:inherit;color:var(--Schemes-Primary, #0f4d90);text-decoration:underline}.phila-filter-summary__clear-all[data-v-bcac6c42]:focus-visible{outline:2px solid currentColor;outline-offset:2px}

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import { BaseProps, FilterDefinition, FilterValues } from '@phila/phila-ui-core';
+export { default as FilterSummary } from './FilterSummary.vue';
+export interface FilterSummaryProps extends BaseProps {
+    /** Same filter definitions used by the chip bar / panel. */
+    filters: FilterDefinition[];
+    /** Applied values (v-model). Removing a pill / Clear all emits an updated copy. */
+    modelValue?: FilterValues;
+    /** When set, renders the "Showing N results…" line. */
+    resultsCount?: number;
+    /** The searched term shown in the results line. */
+    query?: string;
+    /** Clear-all action label. */
+    clearAllText?: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEtF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,4DAA4D;IAC5D,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,mFAAmF;IACnF,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),C=require("@phila/phila-ui-core"),h=require("@phila/phila-ui-tags"),b={key:0,class:"phila-filter-summary__results"},g={class:"phila-filter-summary__query"},V={key:1,class:"phila-filter-summary__pills"},x=e.defineComponent({__name:"FilterSummary",props:{filters:{},modelValue:{default:()=>({})},resultsCount:{},query:{},clearAllText:{default:"Clear all"},className:{}},emits:["update:modelValue"],setup(a,{emit:i}){const s=a,n=i,u=e.computed(()=>s.filters.filter(l=>!l.excludeFromCount));function f(l,t){return l.choices?.find(r=>r.value===t)?.text??t}const c=e.computed(()=>{const l=[];for(const t of u.value){const r=s.modelValue[t.key];if(Array.isArray(r))for(const o of r){const m=f(t,o);l.push({filterKey:t.key,value:o,text:m,ariaLabel:`Remove ${t.label}: ${m}`})}else if(typeof r=="string"&&r){const o=f(t,r);l.push({filterKey:t.key,value:r,text:o,ariaLabel:`Remove ${t.label}: ${o}`})}else r===!0&&l.push({filterKey:t.key,value:!0,text:t.label,ariaLabel:`Remove ${t.label} filter`})}return l}),d=e.computed(()=>c.value.length>=2),k=e.computed(()=>{if(s.resultsCount==null)return"";const l=s.resultsCount===1?"result":"results";return`Showing ${s.resultsCount} ${l}`});function y(l){const t={};for(const r of Object.keys(l)){const o=l[r];t[r]=Array.isArray(o)?[...o]:o}return t}function v(l){const t=y(s.modelValue),r=t[l.filterKey];Array.isArray(r)?t[l.filterKey]=r.filter(o=>o!==l.value):typeof r=="string"?t[l.filterKey]="":r===!0&&(t[l.filterKey]=!1),n("update:modelValue",t)}function p(){const l=y(s.modelValue);for(const t of u.value)delete l[t.key];n("update:modelValue",l)}return(l,t)=>l.$slots.results||a.resultsCount!=null||c.value.length?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(C.cn)("phila-filter-summary",s.className))},[l.$slots.results||a.resultsCount!=null?(e.openBlock(),e.createElementBlock("p",b,[e.renderSlot(l.$slots,"results",{count:a.resultsCount,query:a.query},()=>[e.createTextVNode(e.toDisplayString(k.value),1),a.query?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t[0]||(t[0]=e.createTextVNode(" for ",-1)),e.createElementVNode("span",g,'"'+e.toDisplayString(a.query)+'"',1)],64)):e.createCommentVNode("",!0)],!0)])):e.createCommentVNode("",!0),c.value.length?(e.openBlock(),e.createElementBlock("div",V,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(r,o)=>(e.openBlock(),e.createBlock(e.unref(h.Tags),{key:`${r.filterKey}:${String(r.value)}:${o}`,variant:"dismissible",color:"grey",text:r.text,"aria-label":r.ariaLabel,onDismiss:m=>v(r)},null,8,["text","aria-label","onDismiss"]))),128)),d.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"phila-filter-summary__clear-all","aria-label":"Clear all filters",onClick:p},e.toDisplayString(a.clearAllText),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)}}),B=(a,i)=>{const s=a.__vccOpts||a;for(const[n,u]of i)s[n]=u;return s},$=B(x,[["__scopeId","data-v-bcac6c42"]]);exports.FilterSummary=$;

package/dist/index.mjs

@@ -0,0 +1,107 @@
+import { defineComponent as A, computed as m, createElementBlock as u, createCommentVNode as n, openBlock as o, normalizeClass as K, unref as b, renderSlot as _, createTextVNode as x, toDisplayString as v, Fragment as C, createElementVNode as q, renderList as S, createBlock as T } from "vue";
+import { cn as F } from "@phila/phila-ui-core";
+import { Tags as L } from "@phila/phila-ui-tags";
+import './index.css';const N = {
+  key: 0,
+  class: "phila-filter-summary__results"
+}, B = { class: "phila-filter-summary__query" }, D = {
+  key: 1,
+  class: "phila-filter-summary__pills"
+}, R = /* @__PURE__ */ A({
+  __name: "FilterSummary",
+  props: {
+    filters: {},
+    modelValue: { default: () => ({}) },
+    resultsCount: {},
+    query: {},
+    clearAllText: { default: "Clear all" },
+    className: {}
+  },
+  emits: ["update:modelValue"],
+  setup(s, { emit: y }) {
+    const a = s, i = y, c = m(() => a.filters.filter((t) => !t.excludeFromCount));
+    function k(t, e) {
+      return t.choices?.find((l) => l.value === e)?.text ?? e;
+    }
+    const f = m(() => {
+      const t = [];
+      for (const e of c.value) {
+        const l = a.modelValue[e.key];
+        if (Array.isArray(l))
+          for (const r of l) {
+            const d = k(e, r);
+            t.push({ filterKey: e.key, value: r, text: d, ariaLabel: `Remove ${e.label}: ${d}` });
+          }
+        else if (typeof l == "string" && l) {
+          const r = k(e, l);
+          t.push({ filterKey: e.key, value: l, text: r, ariaLabel: `Remove ${e.label}: ${r}` });
+        } else l === !0 && t.push({ filterKey: e.key, value: !0, text: e.label, ariaLabel: `Remove ${e.label} filter` });
+      }
+      return t;
+    }), p = m(() => f.value.length >= 2), $ = m(() => {
+      if (a.resultsCount == null) return "";
+      const t = a.resultsCount === 1 ? "result" : "results";
+      return `Showing ${a.resultsCount} ${t}`;
+    });
+    function h(t) {
+      const e = {};
+      for (const l of Object.keys(t)) {
+        const r = t[l];
+        e[l] = Array.isArray(r) ? [...r] : r;
+      }
+      return e;
+    }
+    function g(t) {
+      const e = h(a.modelValue), l = e[t.filterKey];
+      Array.isArray(l) ? e[t.filterKey] = l.filter((r) => r !== t.value) : typeof l == "string" ? e[t.filterKey] = "" : l === !0 && (e[t.filterKey] = !1), i("update:modelValue", e);
+    }
+    function V() {
+      const t = h(a.modelValue);
+      for (const e of c.value)
+        delete t[e.key];
+      i("update:modelValue", t);
+    }
+    return (t, e) => t.$slots.results || s.resultsCount != null || f.value.length ? (o(), u("div", {
+      key: 0,
+      class: K(b(F)("phila-filter-summary", a.className))
+    }, [
+      t.$slots.results || s.resultsCount != null ? (o(), u("p", N, [
+        _(t.$slots, "results", {
+          count: s.resultsCount,
+          query: s.query
+        }, () => [
+          x(v($.value), 1),
+          s.query ? (o(), u(C, { key: 0 }, [
+            e[0] || (e[0] = x(" for ", -1)),
+            q("span", B, '"' + v(s.query) + '"', 1)
+          ], 64)) : n("", !0)
+        ], !0)
+      ])) : n("", !0),
+      f.value.length ? (o(), u("div", D, [
+        (o(!0), u(C, null, S(f.value, (l, r) => (o(), T(b(L), {
+          key: `${l.filterKey}:${String(l.value)}:${r}`,
+          variant: "dismissible",
+          color: "grey",
+          text: l.text,
+          "aria-label": l.ariaLabel,
+          onDismiss: (d) => g(l)
+        }, null, 8, ["text", "aria-label", "onDismiss"]))), 128)),
+        p.value ? (o(), u("button", {
+          key: 0,
+          type: "button",
+          class: "phila-filter-summary__clear-all",
+          "aria-label": "Clear all filters",
+          onClick: V
+        }, v(s.clearAllText), 1)) : n("", !0)
+      ])) : n("", !0)
+    ], 2)) : n("", !0);
+  }
+}), w = (s, y) => {
+  const a = s.__vccOpts || s;
+  for (const [i, c] of y)
+    a[i] = c;
+  return a;
+}, z = /* @__PURE__ */ w(R, [["__scopeId", "data-v-bcac6c42"]]);
+export {
+  z as FilterSummary
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@phila/phila-ui-filter-summary",
+  "version": "0.1.0-beta.0",
+  "type": "module",
+  "description": "Filter summary for applied filters",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ui",
+    "filter-summary",
+    "vue",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@phila/phila-ui-core": "3.0.0-beta.5",
+    "@phila/phila-ui-tags": "0.1.0-beta.6"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^9.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "@phila/phila-ui-filter-chip": "0.2.0-beta.3",
+    "@phila/phila-ui-filter-panel": "0.1.0-beta.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build-win": "vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src --ext .ts,.tsx,.vue",
+    "lint:fix": "eslint src --ext .ts,.tsx,.vue --fix",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}