@phila/phila-ui-filter-panel 0.1.0-beta.3 → 1.0.0-beta.5

package/dist/FilterPanel.vue.d.ts

@@ -11,8 +11,10 @@ declare const _default: import('vue').DefineComponent<FilterPanelProps, {}, {},
     title: string;
     searchable: boolean;
     searchPlaceholder: string;
+    showActions: boolean;
     applyText: string;
     resetText: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+    fullScreen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=FilterPanel.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterPanel.vue.d.ts","sourceRoot":"","sources":["../src/FilterPanel.vue"],"names":[],"mappings":"AAkKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;AAyQhD,wBASG"}
+{"version":3,"file":"FilterPanel.vue.d.ts","sourceRoot":"","sources":["../src/FilterPanel.vue"],"names":[],"mappings":"AA2MA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;AAiThD,wBASG"}

package/dist/FilterPanelSection.vue.d.ts

@@ -2,14 +2,14 @@ import { FilterDefinition } from '@phila/phila-ui-core';
 type __VLS_Props = {
     filter: FilterDefinition;
     collapsed: boolean;
-    modelValue: string | string[] | boolean | undefined;
+    modelValue: boolean | Record<string, boolean> | undefined;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     toggle: () => any;
-    "update:modelValue": (value: string | string[]) => any;
+    "update:modelValue": (value: Record<string, boolean>) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, boolean>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 export default _default;
 //# sourceMappingURL=FilterPanelSection.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterPanelSection.vue.d.ts","sourceRoot":"","sources":["../src/FilterPanelSection.vue"],"names":[],"mappings":"AA8FA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,GAAG,SAAS,CAAC;CACrD,CAAC;;;;;;;;AAkJF,wBAQG"}
+{"version":3,"file":"FilterPanelSection.vue.d.ts","sourceRoot":"","sources":["../src/FilterPanelSection.vue"],"names":[],"mappings":"AA8FA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;CAC3D,CAAC;;;;;;;;AAiJF,wBAQG"}

package/dist/index.css

@@ -1 +1 @@
-.phila-filter-panel__section[data-v-4a425956]{border-bottom:1px solid var(--Schemes-Border, #ccc);padding:.75rem 0}.phila-filter-panel__section-toggle[data-v-4a425956]{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:700}.phila-filter-panel__section-toggle .is-collapsed[data-v-4a425956]{transform:rotate(-90deg)}.phila-filter-panel__section-body[data-v-4a425956]{padding-top:.75rem}.phila-filter-panel__section-body[data-v-4a425956] .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-panel[data-v-c37adf1c]{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;height:100%;background:#fff;overflow-y:auto;box-sizing:border-box}.phila-filter-panel__header[data-v-c37adf1c]{display:flex;align-items:center;justify-content:space-between}.phila-filter-panel__title[data-v-c37adf1c]{margin:0;font-size:1.25rem;font-weight:700}.phila-filter-panel__close[data-v-c37adf1c]{background:none;border:none;cursor:pointer;font-size:1.25rem;line-height:1}.phila-filter-panel__sections[data-v-c37adf1c]{display:flex;flex-direction:column}.phila-filter-panel__footer[data-v-c37adf1c]{display:flex;gap:.75rem;margin-top:auto}.phila-filter-panel__footer[data-v-c37adf1c]>*{flex:1}
+.phila-filter-panel__section[data-v-54c0ee8c]{border-bottom:1px solid var(--Schemes-Border, #ccc);padding:.75rem 0}.phila-filter-panel__section-toggle[data-v-54c0ee8c]{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:700}.phila-filter-panel__section-toggle .is-collapsed[data-v-54c0ee8c]{transform:rotate(-90deg)}.phila-filter-panel__section-body[data-v-54c0ee8c]{padding-top:.75rem}.phila-filter-panel__section-body[data-v-54c0ee8c] .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-panel[data-v-052723b8]{display:flex;flex-direction:column;height:100%;background:#fff;overflow:hidden;box-sizing:border-box}.phila-filter-panel--full-screen[data-v-052723b8]{position:fixed;inset:0;z-index:10001}.phila-filter-panel__header[data-v-052723b8]{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:1.5rem 1.5rem .75rem}.phila-filter-panel__body[data-v-052723b8]{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;padding:0 1.5rem 1.5rem}.phila-filter-panel__title[data-v-052723b8]{margin:0;font-size:1.25rem;font-weight:700}.phila-filter-panel__close[data-v-052723b8]{background:none;border:none;cursor:pointer;font-size:1.25rem;line-height:1}.phila-filter-panel__sections[data-v-052723b8]{display:flex;flex-direction:column}.phila-filter-panel__footer[data-v-052723b8]{display:flex;gap:.75rem;flex-shrink:0;padding:.75rem 1.5rem 1.5rem;border-top:1px solid var(--Schemes-Border, #e5e7eb)}.phila-filter-panel__footer[data-v-052723b8]>*{flex:1}

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { default as FilterPanel } from './FilterPanel.vue';
 export interface FilterPanelProps extends BaseProps {
     /** Filters to render. Only filters with a non-empty `choices` array become sections. */
     filters: FilterDefinition[];
-    /** Committed/applied values (v-model). The panel edits a draft and emits this on Apply. */
+    /** Selected values (v-model). Each filter is a full map of choice value → selected. */
     modelValue?: FilterValues;
     /** Header title. */
     title?: string;
@@ -11,9 +11,14 @@ export interface FilterPanelProps extends BaseProps {
     searchable?: boolean;
     /** Placeholder for the search box. */
     searchPlaceholder?: string;
+    /** Show Reset/Apply buttons (draft + commit on Apply). Default false = live apply. */
+    showActions?: boolean;
     /** Apply button label (an active-selection count is appended as " (N)"). */
     applyText?: string;
     /** Reset button label. */
     resetText?: string;
+    /** Render as a full-screen takeover (teleported to <body>, above app chrome).
+     *  Off (default) renders inline; the consumer positions it. */
+    fullScreen?: boolean;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wFAAwF;IACxF,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,2FAA2F;IAC3F,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"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,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wFAAwF;IACxF,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,uFAAuF;IACvF,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;mEAC+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),v=require("@phila/phila-ui-core"),x=require("@phila/phila-ui-search"),y=require("@phila/phila-ui-button"),V=require("@phila/phila-ui-core/icons"),_=require("@phila/phila-ui-checkbox"),N=require("@phila/phila-ui-radio"),S={class:"phila-filter-panel__section"},A={class:"phila-filter-panel__section-body"},E=e.defineComponent({__name:"FilterPanelSection",props:{filter:{},collapsed:{type:Boolean},modelValue:{type:[String,Array,Boolean]}},emits:["toggle","update:modelValue"],setup(o,{emit:p}){const n=o,i=p,r=e.computed(()=>n.filter.choices??[]),m=e.computed(()=>Array.isArray(n.modelValue)?n.modelValue:[]),s=e.computed(()=>typeof n.modelValue=="string"?n.modelValue:"");return(f,c)=>(e.openBlock(),e.createElementBlock("section",S,[e.createElementVNode("button",{type:"button",class:"phila-filter-panel__section-toggle",onClick:c[0]||(c[0]=u=>i("toggle"))},[e.createElementVNode("span",null,e.toDisplayString(o.filter.label),1),e.createVNode(e.unref(v.Icon),{icon:e.unref(V.IconChevronDown),size:"xxsmall",inline:"",decorative:"",class:e.normalizeClass({"is-collapsed":o.collapsed})},null,8,["icon","class"])]),e.withDirectives(e.createElementVNode("div",A,[o.filter.multiple?(e.openBlock(),e.createBlock(e.unref(_.CheckboxGroup),{key:0,"group-label":o.filter.label,choices:r.value,"model-value":m.value,"onUpdate:modelValue":c[1]||(c[1]=u=>i("update:modelValue",u))},null,8,["group-label","choices","model-value"])):(e.openBlock(),e.createBlock(e.unref(N.RadioGroup),{key:1,"group-label":o.filter.label,choices:r.value,"model-value":s.value,"onUpdate:modelValue":c[2]||(c[2]=u=>i("update:modelValue",u))},null,8,["group-label","choices","model-value"]))],512),[[e.vShow,!o.collapsed]])]))}}),k=(o,p)=>{const n=o.__vccOpts||o;for(const[i,r]of p)n[i]=r;return n},P=k(E,[["__scopeId","data-v-4a425956"]]),U={class:"phila-filter-panel__header"},T={class:"phila-filter-panel__title"},q={class:"phila-filter-panel__sections"},w={class:"phila-filter-panel__footer"},F=e.defineComponent({__name:"FilterPanel",props:{filters:{},modelValue:{default:()=>({})},title:{default:"All Filters"},searchable:{type:Boolean,default:!0},searchPlaceholder:{default:"Search"},applyText:{default:"Apply"},resetText:{default:"Reset"},className:{}},emits:["update:modelValue","close"],setup(o,{emit:p}){const n=o,i=p,r=e.ref({}),m=e.ref(""),s=e.ref({});function f(l){const a={};for(const t of Object.keys(l)){const d=l[t];a[t]=Array.isArray(d)?[...d]:d}return a}e.onMounted(()=>{r.value=f(n.modelValue)});const c=e.computed(()=>n.filters.filter(l=>Array.isArray(l.choices)&&l.choices.length>0)),u=e.computed(()=>{const l=m.value.trim().toLowerCase();return l?c.value.filter(a=>a.label.toLowerCase().includes(l)||(a.choices??[]).some(t=>t.text.toLowerCase().includes(l))):c.value}),h=e.computed(()=>c.value.reduce((l,a)=>{if(a.excludeFromCount)return l;const t=r.value[a.key];return l+(Array.isArray(t)?t.length:t?1:0)},0));function g(l,a){r.value={...r.value,[l]:a}}function b(l){s.value={...s.value,[l]:!s.value[l]}}function C(){r.value={}}function B(){i("update:modelValue",f(r.value)),i("close")}return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(v.cn)("phila-filter-panel",n.className))},[e.createElementVNode("header",U,[e.createElementVNode("h2",T,e.toDisplayString(o.title),1),e.createElementVNode("button",{type:"button",class:"phila-filter-panel__close","aria-label":"Close filters",onClick:a[0]||(a[0]=t=>i("close"))},[e.createVNode(e.unref(v.Icon),{icon:e.unref(V.IconClose),size:"small",inline:"",decorative:""},null,8,["icon"])])]),o.searchable?(e.openBlock(),e.createBlock(e.unref(x.Search),{key:0,modelValue:m.value,"onUpdate:modelValue":a[1]||(a[1]=t=>m.value=t),placeholder:o.searchPlaceholder},null,8,["modelValue","placeholder"])):e.createCommentVNode("",!0),e.createElementVNode("div",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,t=>(e.openBlock(),e.createBlock(P,{key:t.key,filter:t,collapsed:!!s.value[t.key],"model-value":r.value[t.key],onToggle:d=>b(t.key),"onUpdate:modelValue":d=>g(t.key,d)},null,8,["filter","collapsed","model-value","onToggle","onUpdate:modelValue"]))),128))]),e.createElementVNode("footer",w,[e.createVNode(e.unref(y.PhilaButton),{variant:"secondary",onClick:C},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.resetText),1)]),_:1}),e.createVNode(e.unref(y.PhilaButton),{variant:"primary",onClick:B},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.applyText)+e.toDisplayString(h.value?` (${h.value})`:""),1)]),_:1})])],2))}}),D=k(F,[["__scopeId","data-v-c37adf1c"]]);exports.FilterPanel=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),h=require("@phila/phila-ui-core"),_=require("@phila/phila-ui-search"),V=require("@phila/phila-ui-button"),k=require("@phila/phila-ui-core/icons"),w=require("@phila/phila-ui-checkbox"),E=require("@phila/phila-ui-radio"),A={class:"phila-filter-panel__section"},P={class:"phila-filter-panel__section-body"},T=e.defineComponent({__name:"FilterPanelSection",props:{filter:{},collapsed:{type:Boolean},modelValue:{type:[Boolean,Object]}},emits:["toggle","update:modelValue"],setup(t,{emit:p}){const n=t,c=p,r=e.computed(()=>n.filter.choices??[]),d=e.computed(()=>n.modelValue&&typeof n.modelValue=="object"?n.modelValue:{});return(m,i)=>(e.openBlock(),e.createElementBlock("section",A,[e.createElementVNode("button",{type:"button",class:"phila-filter-panel__section-toggle",onClick:i[0]||(i[0]=s=>c("toggle"))},[e.createElementVNode("span",null,e.toDisplayString(t.filter.label),1),e.createVNode(e.unref(h.Icon),{icon:e.unref(k.IconChevronDown),size:"xxsmall",inline:"",decorative:"",class:e.normalizeClass({"is-collapsed":t.collapsed})},null,8,["icon","class"])]),e.withDirectives(e.createElementVNode("div",P,[t.filter.multiple?(e.openBlock(),e.createBlock(e.unref(w.CheckboxGroup),{key:0,"group-label":t.filter.label,choices:r.value,"model-value":d.value,"onUpdate:modelValue":i[1]||(i[1]=s=>c("update:modelValue",s))},null,8,["group-label","choices","model-value"])):(e.openBlock(),e.createBlock(e.unref(E.RadioGroup),{key:1,"group-label":t.filter.label,choices:r.value,"model-value":d.value,"onUpdate:modelValue":i[2]||(i[2]=s=>c("update:modelValue",s))},null,8,["group-label","choices","model-value"]))],512),[[e.vShow,!t.collapsed]])]))}}),b=(t,p)=>{const n=t.__vccOpts||t;for(const[c,r]of p)n[c]=r;return n},U=b(T,[["__scopeId","data-v-54c0ee8c"]]),q={class:"phila-filter-panel__header"},D={class:"phila-filter-panel__title"},F={class:"phila-filter-panel__body"},$={class:"phila-filter-panel__sections"},j={key:0,class:"phila-filter-panel__footer"},I=e.defineComponent({__name:"FilterPanel",props:{filters:{},modelValue:{default:()=>({})},title:{default:"All Filters"},searchable:{type:Boolean,default:!0},searchPlaceholder:{default:"Search"},showActions:{type:Boolean,default:!1},applyText:{default:"Apply"},resetText:{default:"Reset"},fullScreen:{type:Boolean,default:!1},className:{}},emits:["update:modelValue","close"],setup(t,{emit:p}){const n=t,c=p,r=e.ref({}),d=e.ref(""),m=e.ref({});function i(o){const a={};for(const l of n.filters){const u=o[l.key];if(Array.isArray(l.choices)&&l.choices.length>0){const x=u&&typeof u=="object"?u:{};a[l.key]=Object.fromEntries(l.choices.map(y=>[y.value,!!x[y.value]]))}else a[l.key]=u===!0}return a}const s=e.computed(()=>n.showActions?r.value:n.modelValue);e.onMounted(()=>{const o=i(n.modelValue);r.value=o,c("update:modelValue",o)});const v=e.computed(()=>n.filters.filter(o=>Array.isArray(o.choices)&&o.choices.length>0)),g=e.computed(()=>{const o=d.value.trim().toLowerCase();return o?v.value.filter(a=>a.label.toLowerCase().includes(o)||(a.choices??[]).some(l=>l.text.toLowerCase().includes(o))):v.value}),f=e.computed(()=>v.value.reduce((o,a)=>{if(a.excludeFromCount)return o;const l=s.value[a.key];return o+(l&&typeof l=="object"?Object.values(l).filter(Boolean).length:l?1:0)},0));function B(o,a){const l=i({...s.value,[o]:a});n.showActions?r.value=l:c("update:modelValue",l)}function C(o){m.value={...m.value,[o]:!m.value[o]}}function N(){r.value=i({})}function S(){c("update:modelValue",i(r.value)),c("close")}return(o,a)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body",disabled:!t.fullScreen},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(h.cn)("phila-filter-panel",t.fullScreen&&"phila-filter-panel--full-screen",n.className))},[e.createElementVNode("header",q,[e.createElementVNode("h2",D,e.toDisplayString(t.title)+e.toDisplayString(f.value?` (${f.value})`:""),1),e.createElementVNode("button",{type:"button",class:"phila-filter-panel__close","aria-label":"Close filters",onClick:a[0]||(a[0]=l=>c("close"))},[e.createVNode(e.unref(h.Icon),{icon:e.unref(k.IconClose),size:"small",inline:"",decorative:""},null,8,["icon"])])]),e.createElementVNode("div",F,[t.searchable?(e.openBlock(),e.createBlock(e.unref(_.Search),{key:0,modelValue:d.value,"onUpdate:modelValue":a[1]||(a[1]=l=>d.value=l),placeholder:t.searchPlaceholder},null,8,["modelValue","placeholder"])):e.createCommentVNode("",!0),e.createElementVNode("div",$,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,l=>(e.openBlock(),e.createBlock(U,{key:l.key,filter:l,collapsed:!!m.value[l.key],"model-value":s.value[l.key],onToggle:u=>C(l.key),"onUpdate:modelValue":u=>B(l.key,u)},null,8,["filter","collapsed","model-value","onToggle","onUpdate:modelValue"]))),128))])]),t.showActions?(e.openBlock(),e.createElementBlock("footer",j,[e.createVNode(e.unref(V.PhilaButton),{variant:"secondary",onClick:N},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.resetText),1)]),_:1}),e.createVNode(e.unref(V.PhilaButton),{variant:"primary",onClick:S},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.applyText)+e.toDisplayString(f.value?` (${f.value})`:""),1)]),_:1})])):e.createCommentVNode("",!0)],2)],8,["disabled"]))}}),z=b(I,[["__scopeId","data-v-052723b8"]]);exports.FilterPanel=z;

package/dist/index.mjs

@@ -1,60 +1,65 @@
-import { defineComponent as w, computed as f, createElementBlock as _, openBlock as u, createElementVNode as c, withDirectives as U, createVNode as V, toDisplayString as y, unref as i, normalizeClass as B, createBlock as g, vShow as L, ref as b, onMounted as z, createCommentVNode as D, Fragment as E, renderList as G, withCtx as x, createTextVNode as A } from "vue";
-import { Icon as F, cn as O } from "@phila/phila-ui-core";
-import { Search as R } from "@phila/phila-ui-search";
-import { PhilaButton as S } from "@phila/phila-ui-button";
-import { IconChevronDown as j, IconClose as q } from "@phila/phila-ui-core/icons";
-import { CheckboxGroup as M } from "@phila/phila-ui-checkbox";
-import { RadioGroup as H } from "@phila/phila-ui-radio";
-import './index.css';const J = { class: "phila-filter-panel__section" }, K = { class: "phila-filter-panel__section-body" }, Q = /* @__PURE__ */ w({
+import { defineComponent as T, computed as v, createElementBlock as x, openBlock as d, createElementVNode as r, withDirectives as O, createVNode as g, toDisplayString as f, unref as c, normalizeClass as $, createBlock as b, vShow as D, ref as C, onMounted as E, Teleport as G, createCommentVNode as w, Fragment as R, renderList as q, withCtx as S, createTextVNode as A } from "vue";
+import { Icon as F, cn as M } from "@phila/phila-ui-core";
+import { Search as H } from "@phila/phila-ui-search";
+import { PhilaButton as B } from "@phila/phila-ui-button";
+import { IconChevronDown as J, IconClose as K } from "@phila/phila-ui-core/icons";
+import { CheckboxGroup as Q } from "@phila/phila-ui-checkbox";
+import { RadioGroup as W } from "@phila/phila-ui-radio";
+import './index.css';const X = { class: "phila-filter-panel__section" }, Y = { class: "phila-filter-panel__section-body" }, Z = /* @__PURE__ */ T({
   __name: "FilterPanelSection",
   props: {
     filter: {},
     collapsed: { type: Boolean },
-    modelValue: { type: [String, Array, Boolean] }
+    modelValue: { type: [Boolean, Object] }
   },
   emits: ["toggle", "update:modelValue"],
-  setup(t, { emit: v }) {
-    const a = t, s = v, n = f(() => a.filter.choices ?? []), h = f(() => Array.isArray(a.modelValue) ? a.modelValue : []), d = f(() => typeof a.modelValue == "string" ? a.modelValue : "");
-    return (k, r) => (u(), _("section", J, [
-      c("button", {
+  setup(l, { emit: h }) {
+    const a = l, n = h, i = v(() => a.filter.choices ?? []), p = v(
+      () => a.modelValue && typeof a.modelValue == "object" ? a.modelValue : {}
+    );
+    return (y, s) => (d(), x("section", X, [
+      r("button", {
         type: "button",
         class: "phila-filter-panel__section-toggle",
-        onClick: r[0] || (r[0] = (m) => s("toggle"))
+        onClick: s[0] || (s[0] = (u) => n("toggle"))
       }, [
-        c("span", null, y(t.filter.label), 1),
-        V(i(F), {
-          icon: i(j),
+        r("span", null, f(l.filter.label), 1),
+        g(c(F), {
+          icon: c(J),
           size: "xxsmall",
           inline: "",
           decorative: "",
-          class: B({ "is-collapsed": t.collapsed })
+          class: $({ "is-collapsed": l.collapsed })
         }, null, 8, ["icon", "class"])
       ]),
-      U(c("div", K, [
-        t.filter.multiple ? (u(), g(i(M), {
+      O(r("div", Y, [
+        l.filter.multiple ? (d(), b(c(Q), {
           key: 0,
-          "group-label": t.filter.label,
-          choices: n.value,
-          "model-value": h.value,
-          "onUpdate:modelValue": r[1] || (r[1] = (m) => s("update:modelValue", m))
-        }, null, 8, ["group-label", "choices", "model-value"])) : (u(), g(i(H), {
+          "group-label": l.filter.label,
+          choices: i.value,
+          "model-value": p.value,
+          "onUpdate:modelValue": s[1] || (s[1] = (u) => n("update:modelValue", u))
+        }, null, 8, ["group-label", "choices", "model-value"])) : (d(), b(c(W), {
           key: 1,
-          "group-label": t.filter.label,
-          choices: n.value,
-          "model-value": d.value,
-          "onUpdate:modelValue": r[2] || (r[2] = (m) => s("update:modelValue", m))
+          "group-label": l.filter.label,
+          choices: i.value,
+          "model-value": p.value,
+          "onUpdate:modelValue": s[2] || (s[2] = (u) => n("update:modelValue", u))
         }, null, 8, ["group-label", "choices", "model-value"]))
       ], 512), [
-        [L, !t.collapsed]
+        [D, !l.collapsed]
       ])
     ]));
   }
-}), P = (t, v) => {
-  const a = t.__vccOpts || t;
-  for (const [s, n] of v)
-    a[s] = n;
+}), P = (l, h) => {
+  const a = l.__vccOpts || l;
+  for (const [n, i] of h)
+    a[n] = i;
   return a;
-}, W = /* @__PURE__ */ P(Q, [["__scopeId", "data-v-4a425956"]]), X = { class: "phila-filter-panel__header" }, Y = { class: "phila-filter-panel__title" }, Z = { class: "phila-filter-panel__sections" }, ee = { class: "phila-filter-panel__footer" }, le = /* @__PURE__ */ w({
+}, ee = /* @__PURE__ */ P(Z, [["__scopeId", "data-v-54c0ee8c"]]), le = { class: "phila-filter-panel__header" }, te = { class: "phila-filter-panel__title" }, oe = { class: "phila-filter-panel__body" }, ae = { class: "phila-filter-panel__sections" }, ne = {
+  key: 0,
+  class: "phila-filter-panel__footer"
+}, se = /* @__PURE__ */ T({
   __name: "FilterPanel",
   props: {
     filters: {},
@@ -62,106 +67,122 @@ import './index.css';const J = { class: "phila-filter-panel__section" }, K = { c
     title: { default: "All Filters" },
     searchable: { type: Boolean, default: !0 },
     searchPlaceholder: { default: "Search" },
+    showActions: { type: Boolean, default: !1 },
     applyText: { default: "Apply" },
     resetText: { default: "Reset" },
+    fullScreen: { type: Boolean, default: !1 },
     className: {}
   },
   emits: ["update:modelValue", "close"],
-  setup(t, { emit: v }) {
-    const a = t, s = v, n = b({}), h = b(""), d = b({});
-    function k(e) {
+  setup(l, { emit: h }) {
+    const a = l, n = h, i = C({}), p = C(""), y = C({});
+    function s(t) {
       const o = {};
-      for (const l of Object.keys(e)) {
-        const p = e[l];
-        o[l] = Array.isArray(p) ? [...p] : p;
+      for (const e of a.filters) {
+        const m = t[e.key];
+        if (Array.isArray(e.choices) && e.choices.length > 0) {
+          const L = m && typeof m == "object" ? m : {};
+          o[e.key] = Object.fromEntries(e.choices.map((_) => [_.value, !!L[_.value]]));
+        } else
+          o[e.key] = m === !0;
       }
       return o;
     }
-    z(() => {
-      n.value = k(a.modelValue);
+    const u = v(() => a.showActions ? i.value : a.modelValue);
+    E(() => {
+      const t = s(a.modelValue);
+      i.value = t, n("update:modelValue", t);
     });
-    const r = f(() => a.filters.filter((e) => Array.isArray(e.choices) && e.choices.length > 0)), m = f(() => {
-      const e = h.value.trim().toLowerCase();
-      return e ? r.value.filter(
-        (o) => o.label.toLowerCase().includes(e) || (o.choices ?? []).some((l) => l.text.toLowerCase().includes(e))
-      ) : r.value;
-    }), C = f(
-      () => r.value.reduce((e, o) => {
-        if (o.excludeFromCount) return e;
-        const l = n.value[o.key];
-        return e + (Array.isArray(l) ? l.length : l ? 1 : 0);
+    const k = v(() => a.filters.filter((t) => Array.isArray(t.choices) && t.choices.length > 0)), j = v(() => {
+      const t = p.value.trim().toLowerCase();
+      return t ? k.value.filter(
+        (o) => o.label.toLowerCase().includes(t) || (o.choices ?? []).some((e) => e.text.toLowerCase().includes(t))
+      ) : k.value;
+    }), V = v(
+      () => k.value.reduce((t, o) => {
+        if (o.excludeFromCount) return t;
+        const e = u.value[o.key];
+        return t + (e && typeof e == "object" ? Object.values(e).filter(Boolean).length : e ? 1 : 0);
       }, 0)
     );
-    function T(e, o) {
-      n.value = { ...n.value, [e]: o };
+    function N(t, o) {
+      const e = s({ ...u.value, [t]: o });
+      a.showActions ? i.value = e : n("update:modelValue", e);
     }
-    function $(e) {
-      d.value = { ...d.value, [e]: !d.value[e] };
+    function I(t) {
+      y.value = { ...y.value, [t]: !y.value[t] };
     }
-    function N() {
-      n.value = {};
+    function U() {
+      i.value = s({});
     }
-    function I() {
-      s("update:modelValue", k(n.value)), s("close");
+    function z() {
+      n("update:modelValue", s(i.value)), n("close");
     }
-    return (e, o) => (u(), _("div", {
-      class: B(i(O)("phila-filter-panel", a.className))
+    return (t, o) => (d(), b(G, {
+      to: "body",
+      disabled: !l.fullScreen
     }, [
-      c("header", X, [
-        c("h2", Y, y(t.title), 1),
-        c("button", {
-          type: "button",
-          class: "phila-filter-panel__close",
-          "aria-label": "Close filters",
-          onClick: o[0] || (o[0] = (l) => s("close"))
-        }, [
-          V(i(F), {
-            icon: i(q),
-            size: "small",
-            inline: "",
-            decorative: ""
-          }, null, 8, ["icon"])
-        ])
-      ]),
-      t.searchable ? (u(), g(i(R), {
-        key: 0,
-        modelValue: h.value,
-        "onUpdate:modelValue": o[1] || (o[1] = (l) => h.value = l),
-        placeholder: t.searchPlaceholder
-      }, null, 8, ["modelValue", "placeholder"])) : D("", !0),
-      c("div", Z, [
-        (u(!0), _(E, null, G(m.value, (l) => (u(), g(W, {
-          key: l.key,
-          filter: l,
-          collapsed: !!d.value[l.key],
-          "model-value": n.value[l.key],
-          onToggle: (p) => $(l.key),
-          "onUpdate:modelValue": (p) => T(l.key, p)
-        }, null, 8, ["filter", "collapsed", "model-value", "onToggle", "onUpdate:modelValue"]))), 128))
-      ]),
-      c("footer", ee, [
-        V(i(S), {
-          variant: "secondary",
-          onClick: N
-        }, {
-          default: x(() => [
-            A(y(t.resetText), 1)
-          ]),
-          _: 1
-        }),
-        V(i(S), {
-          variant: "primary",
-          onClick: I
-        }, {
-          default: x(() => [
-            A(y(t.applyText) + y(C.value ? ` (${C.value})` : ""), 1)
-          ]),
-          _: 1
-        })
-      ])
-    ], 2));
+      r("div", {
+        class: $(c(M)("phila-filter-panel", l.fullScreen && "phila-filter-panel--full-screen", a.className))
+      }, [
+        r("header", le, [
+          r("h2", te, f(l.title) + f(V.value ? ` (${V.value})` : ""), 1),
+          r("button", {
+            type: "button",
+            class: "phila-filter-panel__close",
+            "aria-label": "Close filters",
+            onClick: o[0] || (o[0] = (e) => n("close"))
+          }, [
+            g(c(F), {
+              icon: c(K),
+              size: "small",
+              inline: "",
+              decorative: ""
+            }, null, 8, ["icon"])
+          ])
+        ]),
+        r("div", oe, [
+          l.searchable ? (d(), b(c(H), {
+            key: 0,
+            modelValue: p.value,
+            "onUpdate:modelValue": o[1] || (o[1] = (e) => p.value = e),
+            placeholder: l.searchPlaceholder
+          }, null, 8, ["modelValue", "placeholder"])) : w("", !0),
+          r("div", ae, [
+            (d(!0), x(R, null, q(j.value, (e) => (d(), b(ee, {
+              key: e.key,
+              filter: e,
+              collapsed: !!y.value[e.key],
+              "model-value": u.value[e.key],
+              onToggle: (m) => I(e.key),
+              "onUpdate:modelValue": (m) => N(e.key, m)
+            }, null, 8, ["filter", "collapsed", "model-value", "onToggle", "onUpdate:modelValue"]))), 128))
+          ])
+        ]),
+        l.showActions ? (d(), x("footer", ne, [
+          g(c(B), {
+            variant: "secondary",
+            onClick: U
+          }, {
+            default: S(() => [
+              A(f(l.resetText), 1)
+            ]),
+            _: 1
+          }),
+          g(c(B), {
+            variant: "primary",
+            onClick: z
+          }, {
+            default: S(() => [
+              A(f(l.applyText) + f(V.value ? ` (${V.value})` : ""), 1)
+            ]),
+            _: 1
+          })
+        ])) : w("", !0)
+      ], 2)
+    ], 8, ["disabled"]));
   }
-}), ce = /* @__PURE__ */ P(le, [["__scopeId", "data-v-c37adf1c"]]);
+}), fe = /* @__PURE__ */ P(se, [["__scopeId", "data-v-052723b8"]]);
 export {
-  ce as FilterPanel
+  fe as FilterPanel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-filter-panel",
-  "version": "0.1.0-beta.3",
+  "version": "1.0.0-beta.5",
   "type": "module",
   "description": "Filter panel for faceted filtering",
   "main": "./dist/index.js",
@@ -28,11 +28,11 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "3.0.0-beta.8",
-    "@phila/phila-ui-search": "1.2.0-beta.11",
-    "@phila/phila-ui-radio": "0.1.1-beta.9",
-    "@phila/phila-ui-checkbox": "0.1.1-beta.9",
-    "@phila/phila-ui-button": "2.3.0-beta.9"
+    "@phila/phila-ui-core": "3.0.0-beta.9",
+    "@phila/phila-ui-search": "1.2.0-beta.12",
+    "@phila/phila-ui-radio": "1.0.0-beta.10",
+    "@phila/phila-ui-checkbox": "1.0.0-beta.10",
+    "@phila/phila-ui-button": "2.3.0-beta.10"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",