@flux-ui/components 3.0.0-next.26 → 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.26",
+    "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/utils": "^2.27.0",
-        "@flux-ui/internals": "3.0.0-next.26",
-        "@flux-ui/types": "3.0.0-next.26",
+        "@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": "^2.27.0",
+        "@basmilius/vite-preset": "^3.11.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
-        "@types/node": "^25.3.0",
+        "@types/node": "^25.3.3",
         "@vitejs/plugin-vue": "^6.0.4",
-        "@vue/language-core": "^2.2.12",
-        "@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",
-        "vue-tsc": "^3.2.4"
+        "vite": "^8.0.0-beta.16",
+        "vue-tsc": "^3.2.5"
     }
 }

package/src/component/FluxAnimatedColors.vue

@@ -7,8 +7,8 @@
 <script
     lang="ts"
     setup>
+    import { useComponentId } from '@basmilius/common';
     import { mulberry32 } from '@basmilius/utils';
-    import { useComponentId } from '@flux-ui/internals';
     import { computed, onBeforeUnmount, onMounted, ref, unref, useTemplateRef, watch } from 'vue';
     import $style from '$flux/css/component/Visual.module.scss';
 
@@ -19,12 +19,14 @@
         colors,
         incrementor = 1,
         opacity = .5,
-        seed
+        seed,
+        static: isStatic
     } = defineProps<{
         readonly colors?: string[];
         readonly incrementor?: number;
         readonly opacity?: number;
         readonly seed?: number;
+        readonly static?: boolean;
     }>();
 
     const canvasRef = useTemplateRef('canvas');
@@ -119,7 +121,7 @@
             context.restore();
         }
 
-        schedule();
+        !isStatic && schedule();
     }
 
     watch(canvasRef, canvas => {
@@ -136,6 +138,6 @@
 
     watch(polygons, () => {
         cancel();
-        schedule();
+        !isStatic && schedule();
     });
 </script>

package/src/component/FluxAutoGrid.vue

@@ -15,7 +15,7 @@
     import $style from '$flux/css/component/Layout.module.scss';
 
     const {
-        gap = 30
+        gap = 21
     } = defineProps<{
         readonly gap?: number;
         readonly minColumnWidth: number;

package/src/component/FluxContainer.vue

@@ -12,7 +12,7 @@
     import $style from '$flux/css/component/Layout.module.scss';
 
     const {
-        gutter = 30
+        gutter = 21
     } = defineProps<{
         readonly gutter?: number;
     }>();

package/src/component/FluxExpandable.vue

@@ -50,7 +50,7 @@
 <script
     lang="ts"
     setup>
-    import { useComponentId } from '@flux-ui/internals';
+    import { useComponentId } from '@basmilius/common';
     import type { FluxIconName } from '@flux-ui/types';
     import { computed, getCurrentInstance, onBeforeMount, onUnmounted, ref, unref, useId, watch } from 'vue';
     import { useExpandableGroupInjection } from '$flux/composable';

package/src/component/FluxFader.vue

@@ -9,7 +9,8 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useInterval } from '@flux-ui/internals';
+    import { useInterval } from '@basmilius/common';
+    import { unrefTemplateElement } from '@flux-ui/internals';
     import { computed, ref, unref, useTemplateRef, watch } from 'vue';
     import $style from '$flux/css/component/Fader.module.scss';
 

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/FluxFilterOptionAsync.vue

@@ -12,11 +12,10 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
+    import { useDebouncedRef, useLoaded } from '@basmilius/common';
     import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
     import { computed, ref, unref, watch } from 'vue';
     import { useFilterInjection } from '$flux/composable';
-    import { useLoaded } from '$flux/composable/private';
     import { isFluxFilterOptionItem } from '$flux/data';
     import { FilterOptionBase } from './primitive';
 

package/src/component/FluxFilterOptionsAsync.vue

@@ -12,11 +12,10 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
+    import { useDebouncedRef, useLoaded } from '@basmilius/common';
     import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
     import { computed, ref, unref, watch } from 'vue';
     import { useFilterInjection } from '$flux/composable';
-    import { useLoaded } from '$flux/composable/private';
     import { isFluxFilterOptionItem } from '$flux/data';
     import { FilterOptionBase } from './primitive';
 

package/src/component/FluxFormInput.vue

@@ -49,6 +49,11 @@
             :class="$style.formInputIconTrailing"
             :name="iconTrailing"
             :size="18"/>
+
+        <FluxSpinner
+            v-if="isLoading"
+            :class="$style.formInputIconTrailing"
+            :size="18"/>
     </div>
 </template>
 
@@ -63,6 +68,7 @@
     import { useDisabled, useFormFieldInjection } from '$flux/composable';
     import { inputMask } from '$flux/data';
     import FluxIcon from './FluxIcon.vue';
+    import FluxSpinner from './FluxSpinner.vue';
     import $style from '$flux/css/component/Form.module.scss';
 
     const emit = defineEmits<{
@@ -87,6 +93,7 @@
         readonly iconTrailing?: FluxIconName;
         readonly disabled?: boolean;
         readonly isCondensed?: boolean;
+        readonly isLoading?: boolean;
         readonly isReadonly?: boolean;
         readonly isSecondary?: boolean;
         readonly max?: string | number;

package/src/component/FluxFormSelectAsync.vue

@@ -16,12 +16,12 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
+    import { useDebouncedRef, useLoaded } from '@basmilius/common';
     import type { FluxFormSelectEntry, FluxFormSelectValue, FluxFormSelectValueSingle } from '@flux-ui/types';
     import { computed, ref, toRef, unref, watch } from 'vue';
     import { SelectBase } from '$flux/component/primitive';
     import { useDisabled } from '$flux/composable';
-    import { useFormSelect, useLoaded } from '$flux/composable/private';
+    import { useFormSelect } from '$flux/composable/private';
     import { isFluxFormSelectOption } from '$flux/data';
 
     const modelSearch = defineModel<string>('searchQuery', {

package/src/component/FluxGrid.vue

@@ -16,7 +16,7 @@
 
     const {
         columns = 12,
-        gap = 30
+        gap = 21
     } = defineProps<{
         readonly columns?: number;
         readonly gap?: number;

package/src/component/FluxIcon.vue

@@ -17,18 +17,6 @@
             fill="currentColor"/>
     </svg>
 
-    <i
-        v-else-if="name"
-        :class="$style.materialSymbolIcon"
-        :style="{
-            fontSize: size && `${size}px`
-        }"
-        role="img"
-        aria-hidden="true"
-        @click="onClick">
-        {{ name }}
-    </i>
-
     <i
         v-else
         :class="$style.icon"/>

package/src/component/FluxItemActions.vue

@@ -1,6 +1,6 @@
 <template>
     <FluxActionBar
-        :class="$style.itemActions"
+        :class="[$style.itemActions, isCenter && $style.isCenter]"
         #primary>
         <slot/>
     </FluxActionBar>
@@ -9,6 +9,10 @@
 <script
     lang="ts"
     setup>
-    import FluxActionBar from './FluxActionBar.vue';
     import $style from '$flux/css/component/Item.module.scss';
+    import FluxActionBar from './FluxActionBar.vue';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+    }>();
 </script>

package/src/component/FluxItemContent.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="$style.itemContent">
+    <div :class="[$style.itemContent, isCenter && $style.isCenter]">
         <slot/>
     </div>
 </template>
@@ -8,4 +8,8 @@
     lang="ts"
     setup>
     import $style from '$flux/css/component/Item.module.scss';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+    }>();
 </script>

package/src/component/FluxItemMedia.vue

@@ -1,5 +1,9 @@
 <template>
-    <div :class="$style.itemMedia">
+    <div
+        :class="[$style.itemMedia, isCenter && $style.isCenter]"
+        :style="{
+            '--size': size && `${size}px`
+        }">
         <slot/>
     </div>
 </template>
@@ -8,4 +12,9 @@
     lang="ts"
     setup>
     import $style from '$flux/css/component/Item.module.scss';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+        readonly size?: number;
+    }>();
 </script>

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/FluxPressable.vue

@@ -4,7 +4,7 @@
         v-bind="$attrs"
         :rel="rel"
         :target="target"
-        :to="to"
+        :to="to as any"
         @click="onClick($event)"
         @mouseenter="$emit('mouseenter', $event)"
         @mouseleave="$emit('mouseleave', $event)">

package/src/component/FluxStack.vue

@@ -24,7 +24,7 @@
 
     const {
         direction = 'vertical',
-        gap = 30
+        gap = 21
     } = defineProps<{
         readonly direction?: FluxDirection;
         readonly gap?: number;

package/src/component/FluxTabBar.vue

@@ -40,7 +40,8 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useEventListener, useMutationObserver } from '@flux-ui/internals';
+    import { useMutationObserver } from '@basmilius/common';
+    import { unrefTemplateElement, useEventListener } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { onMounted, ref, useTemplateRef } from 'vue';
     import { FluxFadeTransition } from '$flux/transition';

package/src/component/FluxTableCell.vue

@@ -12,7 +12,8 @@
             <div
                 :class="$style.tableCellContent"
                 :style="{
-                    flexFlow: contentDirection
+                    flexFlow: contentDirection,
+                    gap: contentGap && `${contentGap}px`
                 }">
                 <slot/>
             </div>
@@ -31,6 +32,7 @@
         contentDirection = 'row'
     } = defineProps<{
         readonly contentDirection?: 'column' | 'row';
+        readonly contentGap?: number;
     }>();
 
     defineSlots<{

package/src/component/primitive/AnchorPopup.vue

@@ -13,8 +13,8 @@
 <script
     lang="ts"
     setup>
+    import { useMutationObserver } from '@basmilius/common';
     import { isHtmlElement } from '@basmilius/utils';
-    import { useMutationObserver } from '@flux-ui/internals';
     import type { FluxDirection } from '@flux-ui/types';
     import { type ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, watchEffect } from 'vue';
 

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/FilterItem.vue

@@ -12,9 +12,9 @@
 <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 { useLoaded } from '$flux/composable/private';
     import FluxMenuItem from '$flux/component/FluxMenuItem.vue';
 
     const emit = defineEmits<{

package/src/component/primitive/SelectBase.vue

@@ -133,7 +133,8 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useClickOutside } from '@flux-ui/internals';
+    import { useClickOutside } from '@basmilius/common';
+    import { unrefTemplateElement } from '@flux-ui/internals';
     import type { FluxFormSelectOption, FluxFormSelectOptions } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { type ComponentPublicInstance, computed, nextTick, ref, toRef, unref, useTemplateRef, watch } from 'vue';

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/composable/private/index.ts

@@ -1,3 +1,2 @@
 export { default as useFormSelect } from './useFormSelect';
-export { default as useLoaded } from './useLoaded';
 export { default as useTranslate } from './useTranslate';

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);
@@ -91,7 +92,7 @@
 .badgeGray {
     composes: badge;
 
-    --color: var(--gray-700);
+    --color: var(--foreground);
 
     .badgeLabel {
         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;