@phila/phila-ui-filter-panel 0.1.0-beta.1 → 0.1.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.
- package/dist/index.css +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +38 -38
- package/package.json +7 -9
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.phila-filter-panel__section[data-v-
|
|
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}
|
package/dist/index.js
CHANGED
|
@@ -1 +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("@
|
|
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;
|
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as w, computed as f, createElementBlock as _, openBlock as u, createElementVNode as c, withDirectives as
|
|
1
|
+
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";
|
|
2
2
|
import { Icon as F, cn as O } from "@phila/phila-ui-core";
|
|
3
3
|
import { Search as R } from "@phila/phila-ui-search";
|
|
4
4
|
import { PhilaButton as S } from "@phila/phila-ui-button";
|
|
5
|
-
import {
|
|
5
|
+
import { IconChevronDown as j, IconClose as q } from "@phila/phila-ui-core/icons";
|
|
6
6
|
import { CheckboxGroup as M } from "@phila/phila-ui-checkbox";
|
|
7
|
-
import { RadioGroup as
|
|
8
|
-
import './index.css';const
|
|
7
|
+
import { RadioGroup as H } from "@phila/phila-ui-radio";
|
|
8
|
+
import './index.css';const J = { class: "phila-filter-panel__section" }, K = { class: "phila-filter-panel__section-body" }, Q = /* @__PURE__ */ w({
|
|
9
9
|
__name: "FilterPanelSection",
|
|
10
10
|
props: {
|
|
11
11
|
filter: {},
|
|
@@ -15,37 +15,37 @@ import './index.css';const H = { class: "phila-filter-panel__section" }, J = { c
|
|
|
15
15
|
emits: ["toggle", "update:modelValue"],
|
|
16
16
|
setup(t, { emit: v }) {
|
|
17
17
|
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 : "");
|
|
18
|
-
return (k,
|
|
18
|
+
return (k, r) => (u(), _("section", J, [
|
|
19
19
|
c("button", {
|
|
20
20
|
type: "button",
|
|
21
21
|
class: "phila-filter-panel__section-toggle",
|
|
22
|
-
onClick:
|
|
22
|
+
onClick: r[0] || (r[0] = (m) => s("toggle"))
|
|
23
23
|
}, [
|
|
24
24
|
c("span", null, y(t.filter.label), 1),
|
|
25
|
-
V(
|
|
26
|
-
|
|
25
|
+
V(i(F), {
|
|
26
|
+
icon: i(j),
|
|
27
27
|
size: "xxsmall",
|
|
28
28
|
inline: "",
|
|
29
29
|
decorative: "",
|
|
30
30
|
class: B({ "is-collapsed": t.collapsed })
|
|
31
|
-
}, null, 8, ["icon
|
|
31
|
+
}, null, 8, ["icon", "class"])
|
|
32
32
|
]),
|
|
33
|
-
|
|
34
|
-
t.filter.multiple ? (u(), g(
|
|
33
|
+
U(c("div", K, [
|
|
34
|
+
t.filter.multiple ? (u(), g(i(M), {
|
|
35
35
|
key: 0,
|
|
36
36
|
"group-label": t.filter.label,
|
|
37
37
|
choices: n.value,
|
|
38
38
|
"model-value": h.value,
|
|
39
|
-
"onUpdate:modelValue":
|
|
40
|
-
}, null, 8, ["group-label", "choices", "model-value"])) : (u(), g(
|
|
39
|
+
"onUpdate:modelValue": r[1] || (r[1] = (m) => s("update:modelValue", m))
|
|
40
|
+
}, null, 8, ["group-label", "choices", "model-value"])) : (u(), g(i(H), {
|
|
41
41
|
key: 1,
|
|
42
42
|
"group-label": t.filter.label,
|
|
43
43
|
choices: n.value,
|
|
44
44
|
"model-value": d.value,
|
|
45
|
-
"onUpdate:modelValue":
|
|
45
|
+
"onUpdate:modelValue": r[2] || (r[2] = (m) => s("update:modelValue", m))
|
|
46
46
|
}, null, 8, ["group-label", "choices", "model-value"]))
|
|
47
47
|
], 512), [
|
|
48
|
-
[
|
|
48
|
+
[L, !t.collapsed]
|
|
49
49
|
])
|
|
50
50
|
]));
|
|
51
51
|
}
|
|
@@ -54,7 +54,7 @@ import './index.css';const H = { class: "phila-filter-panel__section" }, J = { c
|
|
|
54
54
|
for (const [s, n] of v)
|
|
55
55
|
a[s] = n;
|
|
56
56
|
return a;
|
|
57
|
-
},
|
|
57
|
+
}, 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({
|
|
58
58
|
__name: "FilterPanel",
|
|
59
59
|
props: {
|
|
60
60
|
filters: {},
|
|
@@ -77,16 +77,16 @@ import './index.css';const H = { class: "phila-filter-panel__section" }, J = { c
|
|
|
77
77
|
}
|
|
78
78
|
return o;
|
|
79
79
|
}
|
|
80
|
-
|
|
80
|
+
z(() => {
|
|
81
81
|
n.value = k(a.modelValue);
|
|
82
82
|
});
|
|
83
|
-
const
|
|
83
|
+
const r = f(() => a.filters.filter((e) => Array.isArray(e.choices) && e.choices.length > 0)), m = f(() => {
|
|
84
84
|
const e = h.value.trim().toLowerCase();
|
|
85
|
-
return e ?
|
|
85
|
+
return e ? r.value.filter(
|
|
86
86
|
(o) => o.label.toLowerCase().includes(e) || (o.choices ?? []).some((l) => l.text.toLowerCase().includes(e))
|
|
87
|
-
) :
|
|
88
|
-
}),
|
|
89
|
-
() =>
|
|
87
|
+
) : r.value;
|
|
88
|
+
}), C = f(
|
|
89
|
+
() => r.value.reduce((e, o) => {
|
|
90
90
|
if (o.excludeFromCount) return e;
|
|
91
91
|
const l = n.value[o.key];
|
|
92
92
|
return e + (Array.isArray(l) ? l.length : l ? 1 : 0);
|
|
@@ -101,13 +101,13 @@ import './index.css';const H = { class: "phila-filter-panel__section" }, J = { c
|
|
|
101
101
|
function N() {
|
|
102
102
|
n.value = {};
|
|
103
103
|
}
|
|
104
|
-
function
|
|
104
|
+
function I() {
|
|
105
105
|
s("update:modelValue", k(n.value)), s("close");
|
|
106
106
|
}
|
|
107
107
|
return (e, o) => (u(), _("div", {
|
|
108
|
-
class: B(
|
|
108
|
+
class: B(i(O)("phila-filter-panel", a.className))
|
|
109
109
|
}, [
|
|
110
|
-
c("header",
|
|
110
|
+
c("header", X, [
|
|
111
111
|
c("h2", Y, y(t.title), 1),
|
|
112
112
|
c("button", {
|
|
113
113
|
type: "button",
|
|
@@ -115,22 +115,22 @@ import './index.css';const H = { class: "phila-filter-panel__section" }, J = { c
|
|
|
115
115
|
"aria-label": "Close filters",
|
|
116
116
|
onClick: o[0] || (o[0] = (l) => s("close"))
|
|
117
117
|
}, [
|
|
118
|
-
V(
|
|
119
|
-
|
|
118
|
+
V(i(F), {
|
|
119
|
+
icon: i(q),
|
|
120
120
|
size: "small",
|
|
121
121
|
inline: "",
|
|
122
122
|
decorative: ""
|
|
123
|
-
}, null, 8, ["icon
|
|
123
|
+
}, null, 8, ["icon"])
|
|
124
124
|
])
|
|
125
125
|
]),
|
|
126
|
-
t.searchable ? (u(), g(
|
|
126
|
+
t.searchable ? (u(), g(i(R), {
|
|
127
127
|
key: 0,
|
|
128
128
|
modelValue: h.value,
|
|
129
129
|
"onUpdate:modelValue": o[1] || (o[1] = (l) => h.value = l),
|
|
130
130
|
placeholder: t.searchPlaceholder
|
|
131
|
-
}, null, 8, ["modelValue", "placeholder"])) :
|
|
131
|
+
}, null, 8, ["modelValue", "placeholder"])) : D("", !0),
|
|
132
132
|
c("div", Z, [
|
|
133
|
-
(u(!0), _(E, null, G(m.value, (l) => (u(), g(
|
|
133
|
+
(u(!0), _(E, null, G(m.value, (l) => (u(), g(W, {
|
|
134
134
|
key: l.key,
|
|
135
135
|
filter: l,
|
|
136
136
|
collapsed: !!d.value[l.key],
|
|
@@ -140,28 +140,28 @@ import './index.css';const H = { class: "phila-filter-panel__section" }, J = { c
|
|
|
140
140
|
}, null, 8, ["filter", "collapsed", "model-value", "onToggle", "onUpdate:modelValue"]))), 128))
|
|
141
141
|
]),
|
|
142
142
|
c("footer", ee, [
|
|
143
|
-
V(
|
|
143
|
+
V(i(S), {
|
|
144
144
|
variant: "secondary",
|
|
145
145
|
onClick: N
|
|
146
146
|
}, {
|
|
147
|
-
default:
|
|
147
|
+
default: x(() => [
|
|
148
148
|
A(y(t.resetText), 1)
|
|
149
149
|
]),
|
|
150
150
|
_: 1
|
|
151
151
|
}),
|
|
152
|
-
V(
|
|
152
|
+
V(i(S), {
|
|
153
153
|
variant: "primary",
|
|
154
|
-
onClick:
|
|
154
|
+
onClick: I
|
|
155
155
|
}, {
|
|
156
|
-
default:
|
|
157
|
-
A(y(t.applyText) + y(
|
|
156
|
+
default: x(() => [
|
|
157
|
+
A(y(t.applyText) + y(C.value ? ` (${C.value})` : ""), 1)
|
|
158
158
|
]),
|
|
159
159
|
_: 1
|
|
160
160
|
})
|
|
161
161
|
])
|
|
162
162
|
], 2));
|
|
163
163
|
}
|
|
164
|
-
}), ce = /* @__PURE__ */ P(le, [["__scopeId", "data-v-
|
|
164
|
+
}), ce = /* @__PURE__ */ P(le, [["__scopeId", "data-v-c37adf1c"]]);
|
|
165
165
|
export {
|
|
166
166
|
ce as FilterPanel
|
|
167
167
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-filter-panel",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Filter panel for faceted filtering",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -25,16 +25,14 @@
|
|
|
25
25
|
"author": "",
|
|
26
26
|
"license": "MIT",
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"vue": "^3.0.0"
|
|
29
|
-
"@fortawesome/fontawesome-svg-core": "^7.1.0",
|
|
30
|
-
"@fortawesome/pro-solid-svg-icons": "^7.1.0"
|
|
28
|
+
"vue": "^3.0.0"
|
|
31
29
|
},
|
|
32
30
|
"dependencies": {
|
|
33
|
-
"@phila/phila-ui-core": "3.0.0-beta.
|
|
34
|
-
"@phila/phila-ui-search": "1.2.0-beta.
|
|
35
|
-
"@phila/phila-ui-radio": "0.1.1-beta.
|
|
36
|
-
"@phila/phila-ui-checkbox": "0.1.1-beta.
|
|
37
|
-
"@phila/phila-ui-button": "2.
|
|
31
|
+
"@phila/phila-ui-core": "3.0.0-beta.7",
|
|
32
|
+
"@phila/phila-ui-search": "1.2.0-beta.10",
|
|
33
|
+
"@phila/phila-ui-radio": "0.1.1-beta.8",
|
|
34
|
+
"@phila/phila-ui-checkbox": "0.1.1-beta.8",
|
|
35
|
+
"@phila/phila-ui-button": "2.3.0-beta.8"
|
|
38
36
|
},
|
|
39
37
|
"devDependencies": {
|
|
40
38
|
"@types/node": "^24.0.0",
|