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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.28",
+    "version": "3.0.0-next.29",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,28 +51,28 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/common": "^3.8.0",
-        "@basmilius/utils": "^3.8.0",
-        "@flux-ui/internals": "3.0.0-next.28",
-        "@flux-ui/types": "3.0.0-next.28",
+        "@basmilius/common": "^3.11.0",
+        "@basmilius/utils": "^3.11.0",
+        "@flux-ui/internals": "3.0.0-next.29",
+        "@flux-ui/types": "3.0.0-next.29",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
         "lodash-es": "^4.17.23",
         "luxon": "^3.7.2",
-        "vue": "^3.6.0-beta.6"
+        "vue": "^3.6.0-beta.7"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.8.0",
+        "@basmilius/vite-preset": "^3.11.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
-        "@types/node": "^25.3.1",
+        "@types/node": "^25.3.3",
         "@vitejs/plugin-vue": "^6.0.4",
-        "@vue/tsconfig": "^0.8.1",
+        "@vue/tsconfig": "^0.9.0",
         "pinia": "^3.0.4",
         "sass-embedded": "^1.97.3",
         "typescript": "^5.9.3",
-        "vite": "^8.0.0-beta.15",
+        "vite": "^8.0.0-beta.16",
         "vue-tsc": "^3.2.5"
     }
 }

package/src/component/FluxFilterBar.vue

@@ -20,16 +20,35 @@
                     <template
                         v-for="button of buttons"
                         :key="button.name">
-                        <FluxSecondaryButton
-                            v-if="modelValue[button.name]"
-                            :icon-leading="button.icon"
-                            :label="button.label"/>
+                        <FluxFlyout>
+                            <template #opener="{open}">
+                                <FluxSecondaryButton
+                                    v-if="modelValue[button.name]"
+                                    :class="$style.filterButton"
+                                    :icon-leading="button.icon"
+                                    :label="button.label"
+                                    @click="open()">
+                                    <template #after>
+                                        <FilterBadge
+                                            :item="button"
+                                            :value="modelValue[button.name]"/>
+                                    </template>
+                                </FluxSecondaryButton>
+                            </template>
+
+                            <div :class="$style.filter">
+                                <FluxMenu>
+                                    <VNodeRenderer :vnode="filters[button.name]"/>
+                                </FluxMenu>
+                            </div>
+                        </FluxFlyout>
                     </template>
 
                     <template #overflow>
-                        <FluxSpacing
-                            v-if="buttons"
-                            :size="2"/>
+                        <FluxSeparator
+                            v-if="isFiltered"
+                            direction="vertical"
+                            style="margin-top: 9px; margin-bottom: 9px"/>
 
                         <FluxFlyout>
                             <template #opener="{open}">
@@ -56,14 +75,17 @@
     lang="ts"
     setup>
     import type { FluxFilterState } from '@flux-ui/types';
+    import { computed, unref } from "vue";
+    import { FilterBadge, VNodeRenderer } from '$flux/component/primitive';
     import FluxFilterBase from './FluxFilterBase.vue';
     import FluxFilterWindow from './FluxFilterWindow.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxFormInput from './FluxFormInput.vue';
+    import FluxMenu from '$flux/component/FluxMenu.vue';
     import FluxOverflowBar from './FluxOverflowBar.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import FluxSeparator from '$flux/component/FluxSeparator.vue';
     import $style from '$flux/css/component/Filter.module.scss';
-    import FluxSpacing from '$flux/component/FluxSpacing.vue';
 
     const emit = defineEmits<{
         reset: [string];
@@ -87,6 +109,8 @@
         default?(): any;
     }>();
 
+    const isFiltered = computed(() => Object.entries(unref(modelValue)).filter(([, val]) => Boolean(val)).length > 0);
+
     function reset(name: string): void {
         emit('reset', name);
     }

package/src/component/FluxOverflowBar.vue

@@ -76,7 +76,17 @@
         availableSize.value = direction === 'horizontal' ? bar.offsetWidth : bar.offsetHeight;
         itemSizes.value = Array.from(measurer.children)
             .filter(item => item instanceof HTMLElement)
-            .map(item => direction === 'horizontal' ? item.offsetWidth : item.offsetHeight);
+            .map(item => {
+                const {display} = getComputedStyle(item);
+
+                if (display === 'contents') {
+                    item = item.children[0] as HTMLElement;
+                }
+
+                return direction === 'horizontal'
+                    ? item.offsetWidth
+                    : item.offsetHeight;
+            });
 
         let size = 0;
         let visible = 0;

package/src/component/primitive/FilterBadge.vue

@@ -0,0 +1,43 @@
+<template>
+    <FluxBadge
+        v-if="valueLabel"
+        :class="$style.filterBadge"
+        :is-loading="isLoading"
+        :label="valueLabel"
+        @click="onClick"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useLoaded } from '@basmilius/common';
+    import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+    import { computed, ref, unref, watch } from 'vue';
+    import { FluxBadge } from '$flux/component';
+    import $style from '$flux/css/component/Filter.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {
+        item,
+        value
+    } = defineProps<{
+        readonly item: FluxFilterItem;
+        readonly value: FluxFilterValue;
+    }>();
+
+    const {isLoading, loaded} = useLoaded();
+    const getValueLabel = computed(() => loaded(item.getValueLabel));
+
+    const valueLabel = ref<string>();
+
+    function onClick(evt: MouseEvent): void {
+        emit('click', evt);
+    }
+
+    watch([() => item, () => value], async () => {
+        valueLabel.value = await unref(getValueLabel)(value) ?? undefined;
+    }, {deep: true, immediate: true});
+</script>

package/src/component/primitive/index.ts

@@ -1,5 +1,7 @@
 export { default as Anchor } from './Anchor.vue';
 export { default as AnchorPopup } from './AnchorPopup.vue';
+export { default as FilterBadge } from './FilterBadge.vue';
+export { default as FilterItem } from './FilterItem.vue';
 export { default as FilterOptionBase } from './FilterOptionBase.vue';
 export { default as SelectBase } from './SelectBase.vue';
 export { default as SliderBase } from './SliderBase.vue';

package/src/css/component/Badge.module.scss

@@ -16,6 +16,7 @@
     color: var(--foreground-prominent);
     font-size: 13px;
     font-weight: 500;
+    font-variant-numeric: tabular-nums;
 
     &:is(a) {
         color: var(--foreground-prominent);

package/src/css/component/Filter.module.scss

@@ -2,7 +2,7 @@
     max-height: 50dvh;
     max-width: 100%;
     padding: 9px;
-    width: 300px;
+    width: 270px;
     overflow: auto;
     scrollbar-width: none;
     transition: height 150ms var(--deceleration-curve);
@@ -40,6 +40,32 @@
     }
 }
 
+.filterBadge {
+    padding-left: 6px;
+    padding-right: 6px;
+    background: var(--primary-50);
+    border: 1px dashed var(--primary-300);
+    font-weight: 500;
+
+    :local(.badgeLabel) {
+        color: var(--primary-900);
+    }
+}
+
+.filterButton {
+    border: 1px solid var(--surface-stroke);
+    box-shadow: none;
+
+    :local(.badge) {
+        border-radius: var(--radius-half);
+    }
+
+    :local(.buttonIcon) {
+        color: var(--primary-700);
+        font-size: 16px;
+    }
+}
+
 .filterHeader {
     position: sticky;
     margin: -9px -9px 3px;
@@ -70,13 +96,16 @@
 
 .filterSearch {
     position: sticky;
-    top: 52px;
     margin: -9px -9px 0;
     padding: 9px;
     background: linear-gradient(to bottom, var(--surface) 75%, transparent);
     z-index: 1;
 }
 
+.filterHeader + .menuGroup .filterSearch {
+    top: 52px;
+}
+
 .filterBar {
     display: flex;
     flex-flow: row nowrap;

package/src/css/component/Icon.module.scss

@@ -1,31 +1,33 @@
-.icon {
-    height: 1em;
-    width: 1em;
-    flex-shrink: 0;
-    font-size: 20px;
-    line-height: 1;
-    overflow: visible;
-}
+@layer flux-base {
+    .icon {
+        height: 1em;
+        width: 1em;
+        flex-shrink: 0;
+        font-size: 20px;
+        line-height: 1;
+        overflow: visible;
+    }
 
-.fontAwesomeIcon {
-    composes: icon;
+    .fontAwesomeIcon {
+        composes: icon;
 
-    display: inline-block;
-}
+        display: inline-block;
+    }
 
-.iconBoxed {
-    composes: basePane from './base/Pane.module.scss';
+    .iconBoxed {
+        composes: basePane from './base/Pane.module.scss';
 
-    display: flex;
-    height: 1em;
-    width: 1em;
-    align-items: center;
-    flex-shrink: 0;
-    justify-content: center;
-    font-size: 42px;
+        display: flex;
+        height: 1em;
+        width: 1em;
+        align-items: center;
+        flex-shrink: 0;
+        justify-content: center;
+        font-size: 42px;
 
-    .icon {
-        font-size: .45em;
+        .icon {
+            font-size: .45em;
+        }
     }
 }
 

package/src/css/component/Item.module.scss

@@ -36,7 +36,8 @@
 }
 
 .itemMedia > .icon {
-    font-size: 24px;
+    margin: 1px;
+    font-size: 20px;
 }
 
 .itemMedia > .iconBoxed {

package/src/css/component/Menu.module.scss

@@ -65,7 +65,10 @@
 .menuItemIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
+    margin-left: 2px;
+    margin-right: 2px;
     color: var(--foreground-prominent);
+    font-size: 16px;
 }
 
 .menuItemLabel {

package/src/css/component/Timeline.module.scss

@@ -57,14 +57,18 @@
 
 .timelineItemBody {
     position: relative;
-    align-self: center;
+    display: flex;
     padding-top: 9px;
     padding-bottom: 9px;
+    align-items: flex-start;
+    align-self: center;
+    flex-flow: column;
+    gap: 15px;
 }
 
 .timelineItemHeader {
     display: flex;
-    margin-bottom: 9px;
+    margin-bottom: -9px;
     flex-flow: column;
 
     :is(strong) {

package/src/css/component/base/Button.module.scss

@@ -84,4 +84,14 @@
             min-width: 42px;
         }
     }
+
+    .badge {
+        &:first-child {
+            margin-left: -6px;
+        }
+
+        &:last-child {
+            margin-right: -6px;
+        }
+    }
 }

package/src/css/typography.scss

@@ -7,7 +7,7 @@
 
     h1 {
         color: var(--foreground-prominent);
-        font-size: 30px;
+        font-size: 27px;
     }
 
     h2 {
@@ -35,8 +35,10 @@
     a:not([class]), a[class=""] {
         color: var(--primary-600);
         text-decoration: underline;
+        text-decoration-color: var(--primary-400);
+        text-decoration-skip: auto;
         text-decoration-thickness: 1px;
-        text-underline-offset: 3px;
+        text-underline-offset: 2px;
 
         &:hover {
             text-decoration: none;