@flux-ui/components 3.0.0-next.61 → 3.0.0-next.63

package/src/component/FluxCalendar.vue

@@ -1,163 +1,165 @@
 <template>
-    <div
-        ref="root"
-        :class="$style.calendar">
-        <div
-            :class="$style.calendarItemRegistry"
-            aria-hidden="true">
-            <slot/>
-        </div>
-
-        <FluxActionBar :class="$style.calendarActions">
-            <template #primary>
-                <div
-                    :class="$style.calendarCurrent"
-                    role="presentation">
-                    <template v-if="resolvedView === 'month'">
-                        <FluxFlyout :width="300">
-                            <template #opener="{open}">
-                                <button
-                                    :class="$style.calendarCurrentMonth"
-                                    :aria-label="translate('flux.selectMonth')"
-                                    type="button"
-                                    @click="open">
-                                    {{ monthViewMonth }}
-                                </button>
-                            </template>
-
-                            <template #default="{close}">
-                                <div :class="$styleDatePicker.datePickerMonths">
-                                    <template
-                                        v-for="month of months"
-                                        :key="month.label">
+    <FluxLayerPane :class="$style.calendar">
+        <FluxPaneBody>
+            <FluxActionBar :class="$style.calendarActions">
+                <template #primary>
+                    <div
+                        :class="$style.calendarCurrent"
+                        role="presentation">
+                        <template v-if="resolvedView === 'month'">
+                            <FluxFlyout :width="300">
+                                <template #opener="{open}">
+                                    <button
+                                        :class="$style.calendarCurrentMonth"
+                                        :aria-label="translate('flux.selectMonth')"
+                                        type="button"
+                                        @click="open">
+                                        {{ monthViewMonth }}
+                                    </button>
+                                </template>
+
+                                <template #default="{close}">
+                                    <div :class="$styleDatePicker.datePickerMonths">
+                                        <template
+                                            v-for="month of months"
+                                            :key="month.label">
+                                            <FluxSecondaryButton
+                                                :label="month.label"
+                                                tabindex="-1"
+                                                @click="setMonthViewMonth(month.date, close)"/>
+                                        </template>
+                                    </div>
+                                </template>
+                            </FluxFlyout>
+
+                            <FluxFlyout :width="300">
+                                <template #opener="{open}">
+                                    <button
+                                        :class="$style.calendarCurrentYear"
+                                        :aria-label="translate('flux.selectYear')"
+                                        type="button"
+                                        @click="open">
+                                        {{ monthViewYear }}
+                                    </button>
+                                </template>
+
+                                <template #default="{close}">
+                                    <div :class="$styleDatePicker.datePickerYears">
                                         <FluxSecondaryButton
-                                            :label="month.label"
+                                            :aria-label="translate('flux.previousYears')"
+                                            icon-leading="angle-left"
                                             tabindex="-1"
-                                            @click="setMonthViewMonth(month.date, close)"/>
-                                    </template>
-                                </div>
-                            </template>
-                        </FluxFlyout>
-
-                        <FluxFlyout :width="300">
-                            <template #opener="{open}">
-                                <button
-                                    :class="$style.calendarCurrentYear"
-                                    :aria-label="translate('flux.selectYear')"
-                                    type="button"
-                                    @click="open">
-                                    {{ monthViewYear }}
-                                </button>
-                            </template>
-
-                            <template #default="{close}">
-                                <div :class="$styleDatePicker.datePickerYears">
-                                    <FluxSecondaryButton
-                                        :aria-label="translate('flux.previousYears')"
-                                        icon-leading="angle-left"
-                                        tabindex="-1"
-                                        @click="previousYears"/>
-
-                                    <template
-                                        v-for="year of years"
-                                        :key="year">
+                                            @click="previousYears"/>
+
+                                        <template
+                                            v-for="year of years"
+                                            :key="year">
+                                            <FluxSecondaryButton
+                                                :label="year.toString()"
+                                                tabindex="-1"
+                                                @click="setMonthViewYear(year, close)"/>
+                                        </template>
+
                                         <FluxSecondaryButton
-                                            :label="year.toString()"
+                                            :aria-label="translate('flux.nextYears')"
+                                            icon-leading="angle-right"
                                             tabindex="-1"
-                                            @click="setMonthViewYear(year, close)"/>
-                                    </template>
-
-                                    <FluxSecondaryButton
-                                        :aria-label="translate('flux.nextYears')"
-                                        icon-leading="angle-right"
-                                        tabindex="-1"
-                                        @click="nextYears"/>
-                                </div>
-                            </template>
-                        </FluxFlyout>
-                    </template>
-
-                    <template v-else>
-                        <FluxFlyout :width="320">
-                            <template #opener="{open}">
-                                <button
-                                    :class="$style.calendarRangeLabel"
-                                    :aria-label="translate('flux.selectDate')"
-                                    type="button"
-                                    @click="open">
-                                    {{ rangeLabel }}
-                                </button>
-                            </template>
-
-                            <template #default="{close}">
-                                <FluxDatePicker
-                                    :model-value="datePickerValue"
-                                    @update:model-value="(value) => onDatePicked(value, close)"/>
-                            </template>
-                        </FluxFlyout>
-                    </template>
-                </div>
-            </template>
-
-            <template #actionsEnd>
-                <FluxSecondaryButton
-                    :aria-label="translate('flux.today')"
-                    :label="translate('flux.today')"
-                    @click="setToday"/>
-
-                <FluxButtonGroup>
-                    <FluxSecondaryButton
-                        :aria-label="translate('flux.previous')"
-                        icon-leading="angle-left"
-                        @click="navigatePrevious"
-                        @dragenter="onNavDragEnter('previous')"
-                        @dragover="onNavDragOver"
-                        @dragleave="onNavDragLeave"/>
-
+                                            @click="nextYears"/>
+                                    </div>
+                                </template>
+                            </FluxFlyout>
+                        </template>
+
+                        <template v-else>
+                            <FluxFlyout :width="320">
+                                <template #opener="{open}">
+                                    <button
+                                        :class="$style.calendarRangeLabel"
+                                        :aria-label="translate('flux.selectDate')"
+                                        type="button"
+                                        @click="open">
+                                        {{ rangeLabel }}
+                                    </button>
+                                </template>
+
+                                <template #default="{close}">
+                                    <FluxDatePicker
+                                        :model-value="datePickerValue"
+                                        @update:model-value="onDatePicked($event); close();"/>
+                                </template>
+                            </FluxFlyout>
+                        </template>
+                    </div>
+                </template>
+
+                <template #actionsEnd>
                     <FluxSecondaryButton
-                        :aria-label="translate('flux.next')"
-                        icon-leading="angle-right"
-                        @click="navigateNext"
-                        @dragenter="onNavDragEnter('next')"
-                        @dragover="onNavDragOver"
-                        @dragleave="onNavDragLeave"/>
-                </FluxButtonGroup>
-            </template>
-        </FluxActionBar>
-
-        <FluxCalendarMonthView
-            v-if="resolvedView === 'month'"
-            :dates="monthDates"
-            :days="monthDays"
-            :view-date="monthViewDate"
-            :is-transitioning-to-past="monthIsTransitioningToPast"
-            :draggable="draggable"
-            :items="items"
-            :has-active-drag="dragState !== null"
-            :focused-date="monthFocusedDate"
-            @cell-drop="onMonthCellDrop"/>
-
-        <FluxCalendarTimeGridView
-            v-else
-            :view-dates="timeGridViewDates"
-            :is-transitioning-to-past="timeGridIsTransitioningToPast"
-            :draggable="draggable"
-            :items="items"
-            :has-active-drag="dragState !== null"
-            :hour-range="effectiveHourRange"
-            :pixels-per-minute="pixelsPerMinute"
-            :snap-minutes="SNAP_MINUTES"
-            :day-count="timeGridDayCount"
-            @time-grid-drop="onTimeGridDrop"
-            @all-day-drop="onAllDayDrop"
-            @resize="onResize"/>
-
-        <div
-            v-if="isLoading"
-            :class="$style.calendarLoader">
-            <FluxSpinner/>
-        </div>
-    </div>
+                        :aria-label="translate('flux.today')"
+                        :label="translate('flux.today')"
+                        @click="setToday"/>
+
+                    <FluxButtonGroup>
+                        <FluxSecondaryButton
+                            :aria-label="translate('flux.previous')"
+                            icon-leading="angle-left"
+                            @click="navigatePrevious"
+                            @dragenter="onNavDragEnter('previous')"
+                            @dragover="onNavDragOver"
+                            @dragleave="onNavDragLeave"/>
+
+                        <FluxSecondaryButton
+                            :aria-label="translate('flux.next')"
+                            icon-leading="angle-right"
+                            @click="navigateNext"
+                            @dragenter="onNavDragEnter('next')"
+                            @dragover="onNavDragOver"
+                            @dragleave="onNavDragLeave"/>
+                    </FluxButtonGroup>
+                </template>
+            </FluxActionBar>
+        </FluxPaneBody>
+
+        <FluxPane :class="$style.calendarView">
+            <FluxCalendarMonthView
+                v-if="resolvedView === 'month'"
+                :dates="monthDates"
+                :days="monthDays"
+                :view-date="monthViewDate"
+                :is-transitioning-to-past="monthIsTransitioningToPast"
+                :draggable="draggable"
+                :items="items"
+                :has-active-drag="dragState !== null"
+                :focused-date="monthFocusedDate"
+                @cell-drop="onMonthCellDrop"/>
+
+            <FluxCalendarTimeGridView
+                v-else
+                :view-dates="timeGridViewDates"
+                :is-transitioning-to-past="timeGridIsTransitioningToPast"
+                :draggable="draggable"
+                :items="items"
+                :has-active-drag="dragState !== null"
+                :hour-range="effectiveHourRange"
+                :pixels-per-minute="pixelsPerMinute"
+                :snap-minutes="SNAP_MINUTES"
+                :day-count="timeGridDayCount"
+                @time-grid-drop="onTimeGridDrop"
+                @all-day-drop="onAllDayDrop"
+                @resize="onResize"/>
+
+            <div
+                v-if="isLoading"
+                :class="$style.calendarLoader">
+                <FluxSpinner/>
+            </div>
+
+            <div
+                :class="$style.calendarItemRegistry"
+                aria-hidden="true">
+                <slot/>
+            </div>
+        </FluxPane>
+    </FluxLayerPane>
 </template>
 
 <script
@@ -174,6 +176,9 @@
     import FluxButtonGroup from './FluxButtonGroup.vue';
     import FluxDatePicker from './FluxDatePicker.vue';
     import FluxFlyout from './FluxFlyout.vue';
+    import FluxLayerPane from './FluxLayerPane.vue';
+    import FluxPane from './FluxPane.vue';
+    import FluxPaneBody from './FluxPaneBody.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
     import FluxSpinner from './FluxSpinner.vue';
     import $style from '~flux/components/css/component/Calendar.module.scss';
@@ -409,7 +414,7 @@
         }
     });
 
-    function onDatePicked(value: DateTime | DateTime[] | null, close: () => void): void {
+    function onDatePicked(value: DateTime | DateTime[] | null): void {
         if (!value || Array.isArray(value)) {
             return;
         }
@@ -419,8 +424,6 @@
         } else {
             setTimeGridViewDate(value);
         }
-
-        close();
     }
 
     function setMonthViewMonth(month: DateTime, close: () => void): void {

package/src/component/FluxContainer.vue

@@ -1,9 +1,10 @@
 <template>
-    <div
+    <Component
+        :is="tag ?? 'div'"
         :class="$style.container"
         :style="{'--gutter': `${gutter}px`}">
         <slot/>
-    </div>
+    </Component>
 </template>
 
 <script
@@ -16,6 +17,7 @@
         gutter = 18
     } = defineProps<{
         readonly gutter?: number;
+        readonly tag?: keyof HTMLElementTagNameMap;
     }>();
 
     defineSlots<{

package/src/component/FluxFilter.vue

@@ -1,8 +1,8 @@
 <template>
     <FluxFilterBase
         v-model="modelValue"
-        :resettable="resettable"
-        @reset="reset">
+        @clear="onClear"
+        @reset="onReset">
         <template #filters>
             <slot/>
         </template>
@@ -10,9 +10,7 @@
         <template #default="{ filters, menuItems }">
             <FluxFilterWindow
                 :filters="filters"
-                :menu-items="menuItems"
-                :resettable="resettable"
-                @reset="reset"/>
+                :menu-items="menuItems"/>
         </template>
     </FluxFilterBase>
 </template>
@@ -26,22 +24,23 @@
     import FluxFilterWindow from './FluxFilterWindow.vue';
 
     const emit = defineEmits<{
-        reset: [string]
+        clear: [string];
+        reset: [string];
     }>();
 
     const modelValue = defineModel<FluxFilterState>({
         required: true
     });
 
-    defineProps<{
-        readonly resettable?: string[];
-    }>();
-
     defineSlots<{
         default(): VNode[];
     }>();
 
-    function reset(name: string): void {
+    function onClear(name: string): void {
+        emit('clear', name);
+    }
+
+    function onReset(name: string): void {
         emit('reset', name);
     }
 </script>

package/src/component/FluxFilterBar.vue

@@ -1,13 +1,13 @@
 <template>
     <FluxFilterBase
         v-model="modelValue"
-        :resettable="resettable"
-        @reset="reset">
+        @clear="onClear"
+        @reset="onReset">
         <template #filters>
             <slot/>
         </template>
 
-        <template #default="{ buttons, filters, menuItems }">
+        <template #default="{ buttons, filters, menuItems, clear, reset }">
             <div :class="$style.filterBar">
                 <FluxFormInput
                     v-if="isSearchable"
@@ -26,6 +26,7 @@
                                 <FluxSecondaryButton
                                     v-if="modelValue[button.name]"
                                     :class="$style.filterButton"
+                                    :disabled="button.disabled"
                                     :icon-leading="button.icon"
                                     :label="button.label"
                                     @click="open()">
@@ -37,11 +38,31 @@
                                 </FluxSecondaryButton>
                             </template>
 
-                            <div :class="$style.filter">
-                                <FluxMenu>
-                                    <VNodeRenderer :vnode="filters[button.name]"/>
-                                </FluxMenu>
-                            </div>
+                            <template #default="{close}">
+                                <div :class="$style.filter">
+                                    <FluxMenu>
+                                        <FluxMenuGroup
+                                            :class="[$style.filterHeader, $style.filterHeaderActions]"
+                                            is-horizontal>
+                                            <FluxMenuItem
+                                                v-if="isResettable(button, modelValue[button.name])"
+                                                :class="$style.filterAction"
+                                                icon-leading="rotate-left"
+                                                @click="onResetClick(close, reset, button.name)"
+                                                style="flex-grow: 0"/>
+
+                                            <FluxMenuItem
+                                                :class="$style.filterAction"
+                                                icon-leading="trash"
+                                                is-destructive
+                                                @click="onClearClick(close, clear, button.name)"
+                                                style="flex-grow: 0"/>
+                                        </FluxMenuGroup>
+
+                                        <VNodeRenderer :vnode="filters[button.name]"/>
+                                    </FluxMenu>
+                                </div>
+                            </template>
                         </FluxFlyout>
                     </template>
 
@@ -56,14 +77,18 @@
                                 <FluxSecondaryButton
                                     icon-leading="sliders-simple"
                                     label="Filter"
-                                    @click="open()"/>
+                                    @click="open()">
+                                    <template
+                                        v-if="filterCount > 0"
+                                        #after>
+                                        <FluxBadge :label="String(filterCount)"/>
+                                    </template>
+                                </FluxSecondaryButton>
                             </template>
 
                             <FluxFilterWindow
                                 :filters="filters"
-                                :menu-items="menuItems"
-                                :resettable="resettable"
-                                @reset="reset"/>
+                                :menu-items="menuItems"/>
                         </FluxFlyout>
                     </template>
                 </FluxOverflowBar>
@@ -78,17 +103,22 @@
     import type { FluxFilterState } from '@flux-ui/types';
     import { computed, unref, type VNode } from 'vue';
     import { FilterBadge, VNodeRenderer } from '~flux/components/component/primitive';
+    import { isResettable } from '~flux/components/util';
+    import FluxBadge from './FluxBadge.vue';
     import FluxFilterBase from './FluxFilterBase.vue';
     import FluxFilterWindow from './FluxFilterWindow.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxFormInput from './FluxFormInput.vue';
     import FluxMenu from './FluxMenu.vue';
+    import FluxMenuGroup from './FluxMenuGroup.vue';
+    import FluxMenuItem from './FluxMenuItem.vue';
     import FluxOverflowBar from './FluxOverflowBar.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
     import FluxSeparator from './FluxSeparator.vue';
     import $style from '~flux/components/css/component/Filter.module.scss';
 
     const emit = defineEmits<{
+        clear: [string];
         reset: [string];
     }>();
 
@@ -102,7 +132,6 @@
 
     defineProps<{
         readonly isSearchable?: boolean;
-        readonly resettable?: string[];
         readonly searchPlaceholder?: string;
     }>();
 
@@ -110,9 +139,36 @@
         default?(): VNode[];
     }>();
 
-    const isFiltered = computed(() => Object.entries(unref(modelValue)).filter(([, val]) => Boolean(val)).length > 0);
+    const filterCount = computed(() => Object.entries(unref(modelValue))
+        .filter(([, val]) => {
+            if (val === null || val === undefined) {
+                return false;
+            }
+
+            if (Array.isArray(val)) {
+                return val.length > 0;
+            }
+
+            return true;
+        }).length);
 
-    function reset(name: string): void {
+    const isFiltered = computed(() => unref(filterCount) > 0);
+
+    function onClear(name: string): void {
+        emit('clear', name);
+    }
+
+    function onReset(name: string): void {
         emit('reset', name);
     }
+
+    function onClearClick(close: () => void, clear: (name: string) => void, name: string): void {
+        close();
+        clear(name);
+    }
+
+    function onResetClick(close: () => void, reset: (name: string) => void, name: string): void {
+        close();
+        reset(name);
+    }
 </script>