@flux-ui/components 3.0.0-next.22 → 3.0.0-next.24

package/dist/transition/FluxAutoHeightTransition.vue.d.ts

@@ -15,4 +15,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxAutoHeightTransition.vue.d.ts.map

package/dist/transition/FluxAutoWidthTransition.vue.d.ts

@@ -15,4 +15,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxAutoWidthTransition.vue.d.ts.map

package/dist/transition/FluxBreakthroughTransition.vue.d.ts

@@ -11,7 +11,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -19,4 +19,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxBreakthroughTransition.vue.d.ts.map

package/dist/transition/FluxFadeTransition.vue.d.ts

@@ -10,7 +10,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -18,4 +18,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxFadeTransition.vue.d.ts.map

package/dist/transition/FluxOverlayTransition.vue.d.ts

@@ -10,7 +10,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -18,4 +18,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxOverlayTransition.vue.d.ts.map

package/dist/transition/FluxRouteTransition.vue.d.ts

@@ -11,7 +11,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -19,4 +19,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxRouteTransition.vue.d.ts.map

package/dist/transition/FluxSlideOverTransition.vue.d.ts

@@ -10,7 +10,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -18,4 +18,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxSlideOverTransition.vue.d.ts.map

package/dist/transition/FluxTooltipTransition.vue.d.ts

@@ -10,7 +10,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -18,4 +18,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxTooltipTransition.vue.d.ts.map

package/dist/transition/FluxVerticalWindowTransition.vue.d.ts

@@ -11,7 +11,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -19,4 +19,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxVerticalWindowTransition.vue.d.ts.map

package/dist/transition/FluxWindowTransition.vue.d.ts

@@ -11,7 +11,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -19,4 +19,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxWindowTransition.vue.d.ts.map

package/dist/transition/index.d.ts

@@ -8,4 +8,3 @@ export { default as FluxSlideOverTransition } from './FluxSlideOverTransition.vu
 export { default as FluxTooltipTransition } from './FluxTooltipTransition.vue';
 export { default as FluxVerticalWindowTransition } from './FluxVerticalWindowTransition.vue';
 export { default as FluxWindowTransition } from './FluxWindowTransition.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/util/createDialogRenderer.d.ts

@@ -6,4 +6,3 @@ type Props = {
 };
 export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component): RenderFunction;
 export {};
-//# sourceMappingURL=createDialogRenderer.d.ts.map

package/dist/util/createLabelForDateRange.d.ts

@@ -1,3 +1,2 @@
 import { DateTime } from 'luxon';
 export default function (start: DateTime, end: DateTime, preventCustom?: boolean): string;
-//# sourceMappingURL=createLabelForDateRange.d.ts.map

package/dist/util/index.d.ts

@@ -1,3 +1,2 @@
 export { default as createDialogRenderer } from './createDialogRenderer';
 export { default as createLabelForDateRange } from './createLabelForDateRange';
-//# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.22",
+    "version": "3.0.0-next.24",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,26 +51,27 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/utils": "^2.13.0",
-        "@flux-ui/internals": "3.0.0-next.22",
-        "@flux-ui/types": "3.0.0-next.22",
-        "@fortawesome/fontawesome-common-types": "^7.1.0",
+        "@basmilius/utils": "^2.24.2",
+        "@flux-ui/internals": "3.0.0-next.24",
+        "@flux-ui/types": "3.0.0-next.24",
+        "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
-        "lodash-es": "^4.17.21",
+        "lodash-es": "^4.17.23",
         "luxon": "^3.7.2",
-        "vue": "^3.5.23"
+        "vue": "^3.6.0-beta.6"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^2.13.0",
+        "@basmilius/vite-preset": "^2.24.2",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
-        "@types/node": "^24.10.0",
-        "@vitejs/plugin-vue": "^6.0.1",
+        "@types/node": "^25.3.0",
+        "@vitejs/plugin-vue": "^6.0.4",
+        "@vue/tsconfig": "^0.8.1",
         "pinia": "^3.0.4",
-        "sass-embedded": "^1.93.3",
+        "sass-embedded": "^1.97.3",
         "typescript": "^5.9.3",
-        "vite": "^7.2.1",
-        "vue-tsc": "^3.1.3"
+        "vite": "^8.0.0-beta.15",
+        "vue-tsc": "^3.2.4"
     }
 }

package/src/component/FluxActionBar.vue

@@ -6,7 +6,7 @@
         <slot name="primary"/>
         <slot name="actionsStart"/>
 
-        <FluxSpacer/>
+        <FluxSpacer v-if="(slots.primary || slots.actionsStart) && (slots.actionsBeforeSearch || slots.search || slots.actionsAfterSearch || slots.filter || slots.actionsEnd)"/>
 
         <slot name="actionsBeforeSearch"/>
         <slot name="search"/>

package/src/component/FluxBorderShine.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { flattenVNodeTree, orange600, pink600, purple600 } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { cloneVNode, defineComponent, Fragment, h, PropType } from 'vue';
+    import { cloneVNode, defineComponent, Fragment, h, type PropType } from 'vue';
     import $style from '$flux/css/component/Visual.module.scss';
 
     export default defineComponent({

package/src/component/FluxCalendar.vue

@@ -19,7 +19,7 @@
                             <div :class="$styleDatePicker.datePickerMonths">
                                 <template
                                     v-for="month of months"
-                                    :key="month">
+                                    :key="month.label">
                                     <FluxSecondaryButton
                                         :label="month.label"
                                         tabindex="-1"
@@ -137,7 +137,7 @@
     import { flattenVNodeTree, getComponentName, getComponentProps, useCalendar, useCalendarMonthSwitcher, useCalendarYearSwitcher } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { DateTime } from 'luxon';
-    import { computed, unref, VNode, watch } from 'vue';
+    import { computed, type ComputedRef, unref, type VNode, watch } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { FluxWindowTransition } from '$flux/transition';
     import { VNodeRenderer } from './primitive';
@@ -198,7 +198,7 @@
 
     const eventNodes = computed(() => flattenVNodeTree(slots.default?.() ?? []));
     const events = computed(() => unref(eventNodes)
-        .filter(en => getComponentName(en) === 'FluxCalendarEvent'));
+        .filter(en => getComponentName(en) === 'FluxCalendarEvent')) as ComputedRef<VNode[]>;
 
     function getEventsForDate(forDate: DateTime): Event[] {
         const forDateStr = forDate.toSQLDate();

package/src/component/FluxColorPicker.vue

@@ -128,7 +128,7 @@
     setup>
     import { hexToRGB, hslToHSV, hslToRGB, hsvToHSL, hsvToRGB, rgbToHEX, rgbToHSL, rgbToHSV } from '@basmilius/utils';
     import { blue500 } from '@flux-ui/internals';
-    import { computed, ComputedRef, ref, unref, watch } from 'vue';
+    import { computed, type ComputedRef, ref, unref, watch } from 'vue';
     import CoordinatePicker from './primitive/CoordinatePicker.vue';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormInput from './FluxFormInput.vue';

package/src/component/FluxDatePicker.vue

@@ -56,9 +56,7 @@
                             <span :class="$style.datePickerDay">{{ day }}</span>
                         </template>
 
-                        <template
-                            v-for="date of dates"
-                            :key="date">
+                        <template v-for="date of dates">
                             <button
                                 :class="clsx(
                                     $style.datePickerDate,
@@ -89,7 +87,7 @@
                 :class="$style.datePickerMonths">
                 <template
                     v-for="month of months"
-                    :key="month">
+                    :key="month.label">
                     <FluxSecondaryButton
                         :disabled="!isWithinBoundary(month.date, 'month')"
                         :label="month.label"

package/src/component/FluxDynamicView.vue

@@ -7,7 +7,7 @@
 <script
     setup
     lang="ts">
-    import { VNode } from 'vue';
+    import type { VNode } from 'vue';
     import { VNodeRenderer } from './primitive';
 
     defineProps<{

package/src/component/FluxExpandableGroup.vue

@@ -8,7 +8,7 @@
     lang="ts"
     setup>
     import { getExposedRef } from '@flux-ui/internals';
-    import { ComponentInternalInstance, provide } from 'vue';
+    import { type ComponentInternalInstance, provide } from 'vue';
     import { FluxExpandableGroupInjectionKey } from '$flux/data';
     import $style from '$flux/css/component/Expandable.module.scss';
 

package/src/component/FluxFilter.vue

@@ -1,58 +1,28 @@
 <template>
-    <div
-        v-height-transition
-        :class="$style.filter">
-        <FluxWindow ref="window">
-            <template #default="{navigate}">
-                <FilterMenuRenderer
-                    :navigate="navigate"
-                    :state="modelValue">
-                    <slot/>
-                </FilterMenuRenderer>
-            </template>
-
-            <template
-                v-for="(filter, name) of filters"
-                #[name]>
-                <FluxMenu>
-                    <FluxMenuGroup
-                        :class="$style.filterHeader"
-                        is-horizontal>
-                        <FluxMenuItem
-                            :class="$style.filterBack"
-                            :label="translate('flux.back')"
-                            icon-leading="angle-left"
-                            @click="back()"/>
-
-                        <FluxMenuItem
-                            v-if="resettable?.includes(name)"
-                            :class="$style.filterReset"
-                            icon-leading="trash"
-                            is-destructive
-                            @click="reset(name)"/>
-                    </FluxMenuGroup>
-
-                    <VNodeRenderer :vnode="filter"/>
-                </FluxMenu>
-            </template>
-        </FluxWindow>
-    </div>
+    <FluxFilterBase
+        v-model="modelValue"
+        :resettable="resettable"
+        @reset="reset">
+        <template #filters>
+            <slot/>
+        </template>
+
+        <template #default="{ filters, menuItems }">
+            <FluxFilterWindow
+                :filters="filters"
+                :menu-items="menuItems"
+                :resettable="resettable"
+                @reset="reset"/>
+        </template>
+    </FluxFilterBase>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { flattenVNodeTree, getComponentName, getComponentProps, vHeightTransition } from '@flux-ui/internals';
-    import type { FluxFilterOptionItem, FluxFilterState } from '@flux-ui/types';
-    import { computed, provide, unref, useTemplateRef, VNode } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { FluxFilterInjectionKey } from '$flux/data';
-    import { FilterMenuRenderer, VNodeRenderer } from './primitive';
-    import FluxMenu from './FluxMenu.vue';
-    import FluxMenuGroup from './FluxMenuGroup.vue';
-    import FluxMenuItem from './FluxMenuItem.vue';
-    import FluxWindow from './FluxWindow.vue';
-    import $style from '$flux/css/component/Filter.module.scss';
+    import type { FluxFilterState } from '@flux-ui/types';
+    import FluxFilterBase from './FluxFilterBase.vue';
+    import FluxFilterWindow from '$flux/component/FluxFilterWindow.vue';
 
     const emit = defineEmits<{
         reset: [string]
@@ -66,68 +36,11 @@
         readonly resettable?: string[];
     }>();
 
-    const slots = defineSlots<{
+    defineSlots<{
         default(): any;
     }>();
 
-    const translate = useTranslate();
-
-    const windowRef = useTemplateRef<{ back(to: string): void; }>('window');
-
-    const filters = computed<Record<string, VNode>>(() => {
-        const filters: { [key: string]: VNode; } = {};
-        const items = flattenVNodeTree(slots.default?.() ?? []);
-
-        for (const item of items) {
-            const name = getComponentName(item);
-
-            if (!name.startsWith('FluxFilter')) {
-                continue;
-            }
-
-            const props = getComponentProps<{ name: string; }>(item);
-
-            if (!props.name) {
-                continue;
-            }
-
-            filters[props.name] = item;
-        }
-
-        return filters;
-    });
-
-    function back(): void {
-        unref(windowRef)?.back('default');
-    }
-
     function reset(name: string): void {
-        back();
         emit('reset', name);
     }
-
-    function getValue(name: string): FluxFilterOptionItem['value'] | undefined {
-        if (!hasValue(name)) {
-            return undefined;
-        }
-
-        return unref(modelValue)[name] as FluxFilterOptionItem['value'];
-    }
-
-    function hasValue(name: string): boolean {
-        return name in unref(modelValue);
-    }
-
-    function setValue(name: string, value: FluxFilterOptionItem['value']): void {
-        modelValue.value[name] = value;
-    }
-
-    provide(FluxFilterInjectionKey, {
-        state: modelValue,
-        back,
-        reset,
-        getValue,
-        hasValue,
-        setValue
-    });
 </script>

package/src/component/FluxFilterBar.vue

@@ -0,0 +1,93 @@
+<template>
+    <FluxFilterBase
+        v-model="modelValue"
+        :resettable="resettable"
+        @reset="reset">
+        <template #filters>
+            <slot/>
+        </template>
+
+        <template #default="{ buttons, filters, menuItems }">
+            <div :class="$style.filterBar">
+                <FluxFormInput
+                    v-model="modelSearch"
+                    :class="$style.filterBarSearch"
+                    icon-leading="magnifying-glass"
+                    :placeholder="searchPlaceholder"
+                    type="search"/>
+
+                <FluxOverflowBar alignment="end">
+                    <template
+                        v-for="button of buttons"
+                        :key="button.name">
+                        <FluxSecondaryButton
+                            v-if="modelValue[button.name]"
+                            :icon-leading="button.icon"
+                            :label="button.label"/>
+                    </template>
+
+                    <template #overflow>
+                        <FluxSpacing
+                            v-if="buttons"
+                            :size="2"/>
+
+                        <FluxFlyout>
+                            <template #opener="{open}">
+                                <FluxSecondaryButton
+                                    icon-leading="sliders-simple"
+                                    label="Filter"
+                                    @click="open()"/>
+                            </template>
+
+                            <FluxFilterWindow
+                                :filters="filters"
+                                :menu-items="menuItems"
+                                :resettable="resettable"
+                                @reset="reset"/>
+                        </FluxFlyout>
+                    </template>
+                </FluxOverflowBar>
+            </div>
+        </template>
+    </FluxFilterBase>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFilterState } from '@flux-ui/types';
+    import FluxFilterBase from './FluxFilterBase.vue';
+    import FluxFilterWindow from './FluxFilterWindow.vue';
+    import FluxFlyout from './FluxFlyout.vue';
+    import FluxFormInput from './FluxFormInput.vue';
+    import FluxOverflowBar from './FluxOverflowBar.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import $style from '$flux/css/component/Filter.module.scss';
+    import FluxSpacing from '$flux/component/FluxSpacing.vue';
+
+    const emit = defineEmits<{
+        reset: [string];
+    }>();
+
+    const modelSearch = defineModel<string>('search', {
+        default: ''
+    });
+
+    const modelValue = defineModel<FluxFilterState>({
+        required: true
+    });
+
+    defineProps<{
+        readonly isSearchable?: boolean;
+        readonly resettable?: string[];
+        readonly searchPlaceholder?: string;
+    }>();
+
+    defineSlots<{
+        default?(): any;
+    }>();
+
+    function reset(name: string): void {
+        emit('reset', name);
+    }
+</script>