@flux-ui/components 3.0.0-next.28 → 3.0.0-next.29

package/dist/index.js

@@ -3850,76 +3850,91 @@ function c(e) {
 		}
 	};
 }
-var l = Symbol(), u = Symbol(), d = Symbol(), f$1 = Symbol(), p$1 = Symbol(), m$1 = Symbol(), h$2 = Symbol(), g$1 = Symbol(), _$1 = Symbol(), v$1 = Symbol(), y$1 = Symbol();
-function b$1(e) {
-	return e && typeof e == `object` && !!e[p$1];
-}
 function ne$1(e, t) {
-	return !b$1(e) || !b$1(t) ? e === t : JSON.stringify(e) === JSON.stringify(t);
+	return e === t ? !0 : e === t;
+}
+var l = Symbol(), u = Symbol(), d = Symbol(), f$1 = Symbol(), p$1 = Symbol(), m$1 = Symbol(), h$2 = Symbol(), g$1 = Symbol(), _$1 = Symbol(), v$1 = Symbol(), re$1 = Symbol();
+function y$1(e) {
+	return e && typeof e == `object` && !!e[p$1];
 }
-function x$1(e) {
-	if (!b$1(e)) throw Error(`@dto assert given object is not a class decorated with @Dto.`);
+function b$1(e) {
+	if (!y$1(e)) throw Error(`@dto assert given object is not a class decorated with @Dto.`);
 }
-var S$1 = Symbol();
-function C$1(e, t = 0, n) {
+var ie$1 = Symbol();
+function x$1(e, t = 0, n) {
 	return function(...r) {
-		let i = S$1 in e, a = e[S$1] ??= /* @__PURE__ */ new WeakMap(), o = r[t], s = n === void 0 ? `self` : r[n];
-		if (typeof o != `object`) return e.call(this, ...r);
-		if (a.has(o) || a.set(o, []), a.get(o).includes(s)) return;
-		a.get(o).push(s);
-		let c = e.call(this, ...r);
-		return !i && delete e[S$1], c;
+		let i = e[ie$1] ??= /* @__PURE__ */ new WeakMap(), a = r[t], o = n === void 0 ? `self` : r[n];
+		if (typeof a != `object` || !a) return e.call(this, ...r);
+		i.has(a) || i.set(a, []);
+		let s = i.get(a);
+		if (!s.includes(o)) {
+			s.push(o);
+			try {
+				return e.call(this, ...r);
+			} finally {
+				let e = s.lastIndexOf(o);
+				e !== -1 && s.splice(e, 1), s.length === 0 && i.delete(a);
+			}
+		}
 	};
 }
-function w(e) {
-	return x$1(e), e[f$1];
+function S$1(e) {
+	return b$1(e), e[f$1];
 }
-var T$1 = C$1(function(e, t, n, r) {
-	let i = e[y$1];
-	i(e, t, n, r), e[m$1] && T$1(e[m$1], e[h$2], e[m$1][e[h$2]]);
-}, 0, 1), E$1 = C$1(function(e) {
-	x$1(e), e[f$1] && (e[f$1] = !1, T$1(e, f$1, !1, !0)), !(!e[u] || e[u].length === 0) && e[u].filter(w).forEach(E$1);
+var C$1 = x$1(function(e, t, n, r) {
+	let i = e[re$1];
+	i(e, t, n, r), e[m$1] && C$1(e[m$1], e[h$2], e[m$1][e[h$2]]);
+}, 0, 1), w = x$1(function(e) {
+	b$1(e), e[f$1] && (e[f$1] = !1, C$1(e, f$1, !1, !0)), !(!e[u] || e[u].length === 0) && e[u].filter(S$1).forEach(w);
 });
-var D$1 = C$1(function(e, t) {
-	x$1(e), e[f$1] || (e[f$1] = !0, T$1(e, f$1, !0, !1)), e[m$1] && D$1(e[m$1], e[h$2]);
+var T$1 = x$1(function(e, t) {
+	b$1(e), e[f$1] || (e[f$1] = !0, C$1(e, f$1, !0, !1)), e[m$1] && T$1(e[m$1], e[h$2]);
 });
-function O$2(e, t, n) {
+function E$1(e, t, n) {
 	t[u] ??= [], !t[u].includes(e) && t[u].push(e), e[m$1] !== t && (e[m$1] = t), e[h$2] !== n && (e[h$2] = n);
 }
-function oe$1(e, t, n) {
-	b$1(n) ? O$2(n, e, t) : Array.isArray(n) && (n.some(b$1) && n.filter(b$1).forEach((n) => O$2(n, e, t)), n[m$1] = e, n[h$2] = t);
+function D$1(e, t, n) {
+	if (y$1(n)) E$1(n, e, t);
+	else if (Array.isArray(n)) {
+		for (let r of n) y$1(r) && E$1(r, e, t);
+		n[m$1] = e, n[h$2] = t;
+	}
 }
-function se$1(e, t) {
+function O$2(e, t) {
 	let n = e[v$1];
 	n(e, t);
 }
 function ce$2(e, t) {
 	if (u in t) {
 		let n = t[u].indexOf(e);
-		t[u].splice(n, 1);
+		n !== -1 && t[u].splice(n, 1);
 	}
 	e[m$1] = void 0, e[h$2] = void 0;
 }
 function le$1(e, t) {
-	b$1(t) ? ce$2(t, e) : Array.isArray(t) && (t.some(b$1) && t.filter(b$1).forEach((t) => ce$2(t, e)), t[m$1] = void 0, t[h$2] = void 0);
+	if (y$1(t)) ce$2(t, e);
+	else if (Array.isArray(t)) {
+		for (let n of t) y$1(n) && ce$2(n, e);
+		t[m$1] = void 0, t[h$2] = void 0;
+	}
 }
 var k$2 = {};
 var ue$1 = {
 	deleteProperty(e, t) {
 		if (Reflect.deleteProperty(e, t), A$2(e, t)) return !0;
 		let n = e[m$1];
-		return n && T$1(n, e[h$2], n[e[h$2]]), n && D$1(n, e[h$2]), !0;
+		return n && C$1(n, e[h$2], n[e[h$2]]), n && T$1(n, e[h$2]), !0;
 	},
 	get(e, t, n) {
 		if (t === _$1) return !0;
 		if (A$2(e, t)) return Reflect.get(e, t, n);
 		let r = e[m$1];
-		return r && se$1(r, e[h$2]), Reflect.get(e, t);
+		return r && O$2(r, e[h$2]), Reflect.get(e, t);
 	},
 	set(e, t, n, r) {
 		if (A$2(e, t)) return Reflect.set(e, t, n, r);
 		let i = e[m$1];
-		return i && T$1(i, e[h$2], i[e[h$2]]), i && D$1(i, e[h$2]), Reflect.set(e, t, n);
+		return i && C$1(i, e[h$2], i[e[h$2]]), i && T$1(i, e[h$2]), Reflect.set(e, t, n);
 	}
 };
 function A$2(e, t) {
@@ -3932,7 +3947,7 @@ var de$1 = {
 		let r = e[d][t];
 		if (!r || !r.get) return Reflect.get(e, t, n);
 		let i = r.get.call(e);
-		return se$1(e, t), oe$1(e, t, i), i;
+		return O$2(e, t), D$1(e, t, i), i;
 	},
 	getOwnPropertyDescriptor(e, t) {
 		return e[d][t];
@@ -3945,7 +3960,7 @@ var de$1 = {
 		let i = e[d][t];
 		if (!i || !i.set) return Reflect.set(e, t, n, r);
 		let a = i.get?.call(e) ?? void 0;
-		return ne$1(n, a) ? !0 : (le$1(e, a), Array.isArray(n) && !n[_$1] && (n = new Proxy(n, ue$1)), i.set.call(e, n), oe$1(e, t, n), D$1(e, t), T$1(e, t, n, a), !0);
+		return ne$1(n, a) ? !0 : (le$1(e, a), Array.isArray(n) && !n[_$1] && (n = new Proxy(n, ue$1)), i.set.call(e, n), D$1(e, t, n), T$1(e, t), C$1(e, t, n, a), !0);
 	}
 }, fe$1 = {
 	get(e, t, n) {
@@ -3964,7 +3979,7 @@ var de$1 = {
 	t = t.map((e) => Array.isArray(e) ? new Proxy(e, ue$1) : e);
 	let r = customRef((r, i) => {
 		let a = markRaw(Reflect.construct(e, t, n));
-		a[l] = t, a[f$1] = !1, a[v$1] = r, a[y$1] = i;
+		a[l] = t, a[f$1] = !1, a[v$1] = r, a[re$1] = i;
 		let s = new Proxy(a, de$1);
 		return {
 			get: () => (r(), s),
@@ -3975,21 +3990,24 @@ var de$1 = {
 } };
 function me$1() {
 	let e = this;
-	x$1(e);
+	b$1(e);
 	let t = k$2[e[p$1]], n = new t(...e[l]);
-	return Object.entries(this[d]).filter(([, e]) => !!e.set).map(([e]) => e).forEach((e) => n[e] = b$1(this[e]) ? this[e].clone() : this[e]), n;
+	for (let [e, t] of Object.entries(this[d])) t.set && (n[e] = y$1(this[e]) ? this[e].clone() : this[e]);
+	return n;
 }
 function he$1(e) {
 	for (let t in e) {
 		let n = this[d][t];
-		b$1(this[t]) && typeof e[t] == `object` ? this[t].fill(e[t]) : n && n.set && (this[t] = e[t]);
+		y$1(this[t]) && typeof e[t] == `object` ? this[t].fill(e[t]) : n && n.set && (this[t] = e[t]);
 	}
 }
 function ge$2() {
-	return Object.fromEntries(this[g$1].map((e) => {
-		let t = Reflect.get.call(this, this, e, this);
-		return b$1(t) && (t = t.toJSON()), [e, t];
-	}));
+	let e = {};
+	for (let t of this[g$1]) {
+		let n = this[t];
+		y$1(n) && (n = n.toJSON()), e[t] = n;
+	}
+	return e;
 }
 function j$1(e) {
 	ve$1(e);
@@ -7166,7 +7184,8 @@ var Button_module_default$1 = {
 	isXl: `is-xl`,
 	isFilled: `is-filled`,
 	buttonIcon: `button-icon`,
-	buttonLabel: `button-label`
+	buttonLabel: `button-label`,
+	badge: `badge`
 };
 const SLOTS = [
 	"default",
@@ -7275,13 +7294,13 @@ var FluxButton_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "buttonLabel": _0$15, "buttonIcon": _1$8, "button": _2$5 } = Button_module_default$1;
+var { "button": _0$15, "buttonIcon": _1$8, "buttonLabel": _2$5 } = Button_module_default$1;
 var Action_module_default = {
-	action: `action ${_2$5}`,
+	action: `action ${_0$15}`,
 	spinner: `spinner`,
 	actionIcon: `action-icon ${_1$8}`,
 	isDestructive: `is-destructive`,
-	actionLabel: `action-label ${_0$15}`,
+	actionLabel: `action-label ${_2$5}`,
 	actionBar: `action-bar`,
 	separator: `separator`,
 	formInput: `form-input`,
@@ -7343,32 +7362,32 @@ var FluxAction_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "buttonIcon": _0$14, "buttonLabel": _1$7, "button": _2$4 } = Button_module_default$1;
+var { "buttonIcon": _0$14, "button": _1$7, "buttonLabel": _2$4 } = Button_module_default$1;
 var Button_module_default = {
-	primaryButton: `primary-button ${_2$4}`,
+	primaryButton: `primary-button ${_1$7}`,
 	spinner: `spinner`,
 	primaryButtonIcon: `primary-button-icon ${_0$14}`,
-	primaryButtonLabel: `primary-button-label ${_1$7}`,
-	secondaryButton: `secondary-button ${_2$4}`,
+	primaryButtonLabel: `primary-button-label ${_2$4}`,
+	secondaryButton: `secondary-button ${_1$7}`,
 	secondaryButtonIcon: `secondary-button-icon ${_0$14}`,
-	secondaryButtonLabel: `secondary-button-label ${_1$7}`,
-	destructiveButton: `destructive-button ${_2$4}`,
+	secondaryButtonLabel: `secondary-button-label ${_2$4}`,
+	destructiveButton: `destructive-button ${_1$7}`,
 	destructiveButtonIcon: `destructive-button-icon ${_0$14}`,
-	destructiveButtonLabel: `destructive-button-label ${_1$7}`,
-	baseLinkButton: `base-link-button ${_2$4}`,
-	primaryLinkButton: `primary-link-button base-link-button ${_2$4}`,
+	destructiveButtonLabel: `destructive-button-label ${_2$4}`,
+	baseLinkButton: `base-link-button ${_1$7}`,
+	primaryLinkButton: `primary-link-button base-link-button ${_1$7}`,
 	primaryLinkButtonIcon: `primary-link-button-icon ${_0$14}`,
-	primaryLinkButtonLabel: `primary-link-button-label ${_1$7}`,
-	secondaryLinkButton: `secondary-link-button base-link-button ${_2$4}`,
+	primaryLinkButtonLabel: `primary-link-button-label ${_2$4}`,
+	secondaryLinkButton: `secondary-link-button base-link-button ${_1$7}`,
 	secondaryLinkButtonIcon: `secondary-link-button-icon ${_0$14}`,
-	secondaryLinkButtonLabel: `secondary-link-button-label ${_1$7}`,
-	linkButton: `link-button ${_2$4}`,
+	secondaryLinkButtonLabel: `secondary-link-button-label ${_2$4}`,
+	linkButton: `link-button ${_1$7}`,
 	linkButtonIcon: `link-button-icon ${_0$14}`,
 	icon: `icon`,
-	linkButtonLabel: `link-button-label ${_1$7}`,
-	publishButton: `publish-button primary-button ${_2$4}`,
+	linkButtonLabel: `link-button-label ${_2$4}`,
+	publishButton: `publish-button primary-button ${_1$7}`,
 	publishButtonIcon: `publish-button-icon primary-button-icon ${_0$14}`,
-	publishButtonLabel: `publish-button-label primary-button-label ${_1$7}`,
+	publishButtonLabel: `publish-button-label primary-button-label ${_2$4}`,
 	publishButtonAnimation: `publish-button-animation`,
 	isDone: `is-done`,
 	publishButtonAnimationArrow: `publish-button-animation-arrow`,
@@ -8871,7 +8890,72 @@ var AnchorPopup_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "button": _0$11, "buttonLabel": _1$5, "buttonIcon": _2$2 } = Button_module_default$1;
+var Filter_module_default = {
+	filter: `filter`,
+	menu: `menu`,
+	divider: `divider`,
+	separator: `separator`,
+	menuGroup: `menu-group`,
+	menuSubHeader: `menu-sub-header`,
+	filterSearch: `filter-search`,
+	menuItemLabel: `menu-item-label`,
+	paneBody: `pane-body`,
+	filterBadge: `filter-badge`,
+	badgeLabel: `badge-label`,
+	filterButton: `filter-button`,
+	badge: `badge`,
+	buttonIcon: `button-icon`,
+	filterHeader: `filter-header`,
+	filterBack: `filter-back`,
+	filterReset: `filter-reset`,
+	filterDatePicker: `filter-date-picker`,
+	filterBar: `filter-bar`,
+	filterBarSearch: `filter-bar-search`
+};
+var FilterBadge_default = /* @__PURE__ */ defineComponent({
+	__name: "FilterBadge",
+	props: {
+		item: {},
+		value: { type: [
+			Object,
+			String,
+			Boolean,
+			Number,
+			null,
+			Array
+		] }
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const { isLoading, loaded } = Z$1();
+		const getValueLabel = computed(() => loaded(__props.item.getValueLabel));
+		const valueLabel = ref();
+		function onClick(evt) {
+			emit("click", evt);
+		}
+		watch([() => __props.item, () => __props.value], async () => {
+			valueLabel.value = await unref(getValueLabel)(__props.value) ?? void 0;
+		}, {
+			deep: true,
+			immediate: true
+		});
+		return (_ctx, _cache) => {
+			return valueLabel.value ? (openBlock(), createBlock(unref(FluxBadge_default), {
+				key: 0,
+				class: normalizeClass(unref(Filter_module_default).filterBadge),
+				"is-loading": unref(isLoading),
+				label: valueLabel.value,
+				onClick
+			}, null, 8, [
+				"class",
+				"is-loading",
+				"label"
+			])) : createCommentVNode("", true);
+		};
+	}
+});
+var { "button": _0$11, "buttonIcon": _1$5, "buttonLabel": _2$2 } = Button_module_default$1;
 var Menu_module_default = {
 	menu: `menu`,
 	menuNormal: `menu-normal menu`,
@@ -8881,13 +8965,13 @@ var Menu_module_default = {
 	menuGroupVertical: `menu-group-vertical menu-group`,
 	menuItem: `menu-item ${_0$11}`,
 	badge: `badge`,
-	menuItemIcon: `menu-item-icon ${_2$2}`,
-	menuItemLabel: `menu-item-label ${_1$5}`,
+	menuItemIcon: `menu-item-icon ${_1$5}`,
+	menuItemLabel: `menu-item-label ${_2$2}`,
 	menuItemActive: `menu-item-active`,
 	menuItemDestructive: `menu-item-destructive`,
 	menuItemHighlighted: `menu-item-highlighted`,
 	menuItemIndented: `menu-item-indented`,
-	menuItemSelectableIcon: `menu-item-selectable-icon ${_2$2}`,
+	menuItemSelectableIcon: `menu-item-selectable-icon ${_1$5}`,
 	menuItemSelected: `menu-item-selected`,
 	menuItemCommand: `menu-item-command`,
 	menuItemCommandIcon: `menu-item-command-icon`,
@@ -9006,6 +9090,52 @@ var FluxMenuItem_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
+var FilterItem_default = /* @__PURE__ */ defineComponent({
+	__name: "FilterItem",
+	props: {
+		item: {},
+		value: { type: [
+			Object,
+			String,
+			Boolean,
+			Number,
+			null,
+			Array
+		] }
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const { isLoading, loaded } = Z$1();
+		const getValueLabel = computed(() => loaded(__props.item.getValueLabel));
+		const valueLabel = ref();
+		function onClick(evt) {
+			emit("click", evt);
+		}
+		watch(() => __props.item, async () => {
+			valueLabel.value = await unref(getValueLabel)(__props.value) ?? void 0;
+		}, {
+			deep: true,
+			immediate: true
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(FluxMenuItem_default, {
+				command: valueLabel.value,
+				"command-icon": "angle-right",
+				"command-loading": unref(isLoading),
+				"icon-leading": __props.item.icon,
+				label: __props.item.label,
+				type: "button",
+				onClick
+			}, null, 8, [
+				"command",
+				"command-loading",
+				"icon-leading",
+				"label"
+			]);
+		};
+	}
+});
 var { "basePane": _0$10 } = Pane_module_default$1;
 var Form_module_default = {
 	formInputGroup: `form-input-group form-input`,
@@ -9325,23 +9455,6 @@ var FluxMenuSubHeader_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var Filter_module_default = {
-	filter: `filter`,
-	menu: `menu`,
-	divider: `divider`,
-	separator: `separator`,
-	menuGroup: `menu-group`,
-	menuSubHeader: `menu-sub-header`,
-	filterSearch: `filter-search`,
-	menuItemLabel: `menu-item-label`,
-	paneBody: `pane-body`,
-	filterHeader: `filter-header`,
-	filterBack: `filter-back`,
-	filterReset: `filter-reset`,
-	filterDatePicker: `filter-date-picker`,
-	filterBar: `filter-bar`,
-	filterBarSearch: `filter-bar-search`
-};
 var FilterOptionBase_default = /* @__PURE__ */ defineComponent({
 	__name: "FilterOptionBase",
 	props: /* @__PURE__ */ mergeModels({
@@ -9942,52 +10055,6 @@ var FluxSeparator_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var FilterItem_default = /* @__PURE__ */ defineComponent({
-	__name: "FilterItem",
-	props: {
-		item: {},
-		value: { type: [
-			Object,
-			String,
-			Boolean,
-			Number,
-			null,
-			Array
-		] }
-	},
-	emits: ["click"],
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		const { isLoading, loaded } = Z$1();
-		const getValueLabel = computed(() => loaded(__props.item.getValueLabel));
-		const valueLabel = ref();
-		function onClick(evt) {
-			emit("click", evt);
-		}
-		watch(() => __props.item, async () => {
-			valueLabel.value = await unref(getValueLabel)(__props.value) ?? void 0;
-		}, {
-			deep: true,
-			immediate: true
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(FluxMenuItem_default, {
-				command: valueLabel.value,
-				"command-icon": "angle-right",
-				"command-loading": unref(isLoading),
-				"icon-leading": __props.item.icon,
-				label: __props.item.label,
-				type: "button",
-				onClick
-			}, null, 8, [
-				"command",
-				"command-loading",
-				"icon-leading",
-				"label"
-			]);
-		};
-	}
-});
 const FilterMenuRenderer = defineComponent({
 	props: {
 		menuItems: {
@@ -12769,7 +12836,11 @@ var FluxOverflowBar_default = /* @__PURE__ */ defineComponent({
 			const measurer = unref(measurerRef);
 			const overflow = T(overflowRef);
 			availableSize.value = __props.direction === "horizontal" ? bar.offsetWidth : bar.offsetHeight;
-			itemSizes.value = Array.from(measurer.children).filter((item) => item instanceof HTMLElement).map((item) => __props.direction === "horizontal" ? item.offsetWidth : item.offsetHeight);
+			itemSizes.value = Array.from(measurer.children).filter((item) => item instanceof HTMLElement).map((item) => {
+				const { display } = getComputedStyle(item);
+				if (display === "contents") item = item.children[0];
+				return __props.direction === "horizontal" ? item.offsetWidth : item.offsetHeight;
+			});
 			let size = 0;
 			let visible = 0;
 			if (overflow) size += Array.from(overflow.children).map((item) => getComputedStyle(item).display === "contents" ? item.children[0] : item).filter((item) => item instanceof HTMLElement).map((item) => __props.direction === "horizontal" ? item.offsetWidth : item.offsetHeight).reduce((acc, curr, index) => acc + curr + (index === 0 ? 0 : __props.gap), 0);
@@ -12817,35 +12888,6 @@ var FluxOverflowBar_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var FluxSpacing_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxSpacing",
-	props: { size: {} },
-	setup(__props) {
-		const spacings = [
-			0,
-			3,
-			6,
-			9,
-			12,
-			15,
-			18,
-			24,
-			30,
-			36,
-			42,
-			48,
-			54,
-			60,
-			72,
-			84,
-			90,
-			120
-		];
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { style: normalizeStyle({ flex: `0 0 ${spacings[__props.size]}px` }) }, null, 4);
-		};
-	}
-});
 var FluxFilterBar_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxFilterBar",
 	props: /* @__PURE__ */ mergeModels({
@@ -12863,6 +12905,7 @@ var FluxFilterBar_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const modelSearch = useModel(__props, "search");
 		const modelValue = useModel(__props, "modelValue");
+		const isFiltered = computed(() => Object.entries(unref(modelValue)).filter(([, val]) => Boolean(val)).length > 0);
 		function reset(name) {
 			emit("reset", name);
 		}
@@ -12886,9 +12929,13 @@ var FluxFilterBar_default = /* @__PURE__ */ defineComponent({
 					"class",
 					"placeholder"
 				]), createVNode(FluxOverflowBar_default, { alignment: "end" }, {
-					overflow: withCtx(() => [buttons ? (openBlock(), createBlock(FluxSpacing_default, {
+					overflow: withCtx(() => [isFiltered.value ? (openBlock(), createBlock(FluxSeparator_default, {
 						key: 0,
-						size: 2
+						direction: "vertical",
+						style: {
+							"margin-top": "9px",
+							"margin-bottom": "9px"
+						}
 					})) : createCommentVNode("", true), createVNode(FluxFlyout_default, null, {
 						opener: withCtx(({ open }) => [createVNode(FluxSecondaryButton_default, {
 							"icon-leading": "sliders-simple",
@@ -12908,11 +12955,31 @@ var FluxFilterBar_default = /* @__PURE__ */ defineComponent({
 						_: 2
 					}, 1024)]),
 					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(buttons, (button) => {
-						return openBlock(), createElementBlock(Fragment, { key: button.name }, [modelValue.value[button.name] ? (openBlock(), createBlock(FluxSecondaryButton_default, {
-							key: 0,
-							"icon-leading": button.icon,
-							label: button.label
-						}, null, 8, ["icon-leading", "label"])) : createCommentVNode("", true)], 64);
+						return openBlock(), createBlock(FluxFlyout_default, { key: button.name }, {
+							opener: withCtx(({ open }) => [modelValue.value[button.name] ? (openBlock(), createBlock(FluxSecondaryButton_default, {
+								key: 0,
+								class: normalizeClass(unref(Filter_module_default).filterButton),
+								"icon-leading": button.icon,
+								label: button.label,
+								onClick: ($event) => open()
+							}, {
+								after: withCtx(() => [createVNode(unref(FilterBadge_default), {
+									item: button,
+									value: modelValue.value[button.name]
+								}, null, 8, ["item", "value"])]),
+								_: 2
+							}, 1032, [
+								"class",
+								"icon-leading",
+								"label",
+								"onClick"
+							])) : createCommentVNode("", true)]),
+							default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(Filter_module_default).filter) }, [createVNode(FluxMenu_default, null, {
+								default: withCtx(() => [createVNode(unref(VNodeRenderer), { vnode: filters[button.name] }, null, 8, ["vnode"])]),
+								_: 2
+							}, 1024)], 2)]),
+							_: 2
+						}, 1024);
 					}), 128))]),
 					_: 2
 				}, 1024)], 2)]),
@@ -16774,6 +16841,35 @@ var FluxSlideOver_default = defineComponent({
 		return createDialogRenderer_default(attrs, props, emit, slots, Overlay_module_default.slideOver, FluxSlideOverTransition_default);
 	}
 });
+var FluxSpacing_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxSpacing",
+	props: { size: {} },
+	setup(__props) {
+		const spacings = [
+			0,
+			3,
+			6,
+			9,
+			12,
+			15,
+			18,
+			24,
+			30,
+			36,
+			42,
+			48,
+			54,
+			60,
+			72,
+			84,
+			90,
+			120
+		];
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { style: normalizeStyle({ flex: `0 0 ${spacings[__props.size]}px` }) }, null, 4);
+		};
+	}
+});
 var FluxSplitButton_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxSplitButton",
 	props: {