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

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.28",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,9 +51,10 @@
     "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.8.0",
+        "@basmilius/utils": "^3.8.0",
+        "@flux-ui/internals": "3.0.0-next.28",
+        "@flux-ui/types": "3.0.0-next.28",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
@@ -62,17 +63,16 @@
         "vue": "^3.6.0-beta.6"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^2.27.0",
+        "@basmilius/vite-preset": "^3.8.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
-        "@types/node": "^25.3.0",
+        "@types/node": "^25.3.1",
         "@vitejs/plugin-vue": "^6.0.4",
-        "@vue/language-core": "^2.2.12",
         "@vue/tsconfig": "^0.8.1",
         "pinia": "^3.0.4",
         "sass-embedded": "^1.97.3",
         "typescript": "^5.9.3",
         "vite": "^8.0.0-beta.15",
-        "vue-tsc": "^3.2.4"
+        "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/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/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/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/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

@@ -91,7 +91,7 @@
 .badgeGray {
     composes: badge;
 
-    --color: var(--gray-700);
+    --color: var(--foreground);
 
     .badgeLabel {
         color: var(--foreground-prominent);

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

@@ -13,19 +13,6 @@
     display: inline-block;
 }
 
-.materialSymbolIcon {
-    composes: icon;
-
-    display: inline-flex;
-    color: currentColor;
-    font-family: 'Material Symbols Outlined', sans-serif;
-    font-weight: 400;
-    font-style: normal;
-    user-select: none;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-}
-
 .iconBoxed {
     composes: basePane from './base/Pane.module.scss';
 
@@ -40,10 +27,6 @@
     .icon {
         font-size: .45em;
     }
-
-    .materialSymbolIcon {
-        font-size: .5em;
-    }
 }
 
 .iconBoxedDefault {

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

@@ -4,6 +4,7 @@
     display: flex;
     flex-flow: row nowrap;
     gap: 21px;
+    text-align: left;
 }
 
 .itemActions {
@@ -13,22 +14,25 @@
 .itemContent {
     display: flex;
     flex-flow: column;
+    flex-grow: 1;
     gap: 3px;
 }
 
 .itemMedia {
+    --size: 48px;
+
     flex-shrink: 0;
 }
 
 .itemMedia > img {
-    height: 48px;
-    width: 48px;
+    height: var(--size);
+    width: var(--size);
     object-fit: cover;
     object-position: center;
 }
 
 .itemMedia > .avatar {
-    font-size: 48px;
+    font-size: var(--size);
 }
 
 .itemMedia > .icon {
@@ -36,7 +40,13 @@
 }
 
 .itemMedia > .iconBoxed {
-    font-size: 48px;
+    font-size: var(--size);
+}
+
+.itemActions.isCenter,
+.itemContent.isCenter,
+.itemMedia.isCenter {
+    align-self: center;
 }
 
 .itemStack {
@@ -57,3 +67,7 @@
 .basePaneStructure > .itemStack > .item {
     margin: 0;
 }
+
+.basePaneStructure:is(a, button):hover:has(> .item) {
+    background-color: color-mix(in srgb, rgb(from var(--surface-hover) r g b / .125), var(--surface));
+}

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

@@ -18,13 +18,22 @@
     --surface: var(--background);
 }
 
+:is(.paneDefault, .paneFlat, .paneWell):is(button) {
+    padding: 0;
+}
 
 :is(.paneDefault, .paneFlat, .paneWell):is(a, button) {
-    transition: box-shadow 210ms var(--swift-out);
+    cursor: pointer;
+    transition: 210ms var(--swift-out);
+    transition-property: background, box-shadow;
 
     &:hover {
         box-shadow: var(--shadow-lg);
     }
+
+    &:active {
+        box-shadow: var(--shadow-xs);
+    }
 }
 
 .paneHeader {

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

@@ -108,6 +108,13 @@
             border-color: var(--foreground);
         }
     }
+
+    &:disabled,
+    &[aria-disabled=true] {
+        box-shadow: none;
+        opacity: .5;
+        pointer-events: none;
+    }
 }
 
 .tabBarItemActive {

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

@@ -106,7 +106,7 @@ tfoot .tableCell {
 }
 
 .tableActions {
-    margin: -3px 0 -3px -3px;
+    margin: -4px 0 -4px -3px;
 }
 
 .tableFill {

package/src/css/typography.scss

@@ -36,7 +36,7 @@
         color: var(--primary-600);
         text-decoration: underline;
         text-decoration-thickness: 1px;
-        text-underline-offset: 4px;
+        text-underline-offset: 3px;
 
         &:hover {
             text-decoration: none;
@@ -47,6 +47,10 @@
         line-height: 1.6;
     }
 
+    small {
+        font-size: 14px;
+    }
+
     blockquote {
         position: relative;
         margin: 0 0 0 30px;

package/src/css/variables.scss

@@ -205,7 +205,7 @@
     --background: var(--gray-50);
     --foreground: var(--gray-700);
     --foreground-prominent: var(--gray-900);
-    --foreground-secondary: var(--gray-400);
+    --foreground-secondary: var(--gray-500);
     --surface: var(--gray-25);
     --surface-loader: rgb(from var(--gray-25) r g b / .75);
     --surface-stroke: var(--gray-200);

package/src/util/createDialogRenderer.ts

@@ -11,8 +11,10 @@ type Props = {
 };
 
 const TARGET_SELECTOR = `.${$style.overlayProvider.replaceAll(' ', '.')}`;
+let DIALOG_ID = 0;
 
 export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component): RenderFunction {
+    const dialogId = `flux-dialog:${DIALOG_ID++}`;
     let unregister: Function | null = null;
     let zIndex = 0;
 
@@ -58,7 +60,7 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
             }
 
             content = h('div', {
-                key: props.viewKey,
+                key: props.viewKey ?? dialogId,
                 ref: dialogRef,
                 class: [className, zIndex === dialogCount && $style.isCurrent],
                 style: {

package/dist/composable/private/useLoaded.d.ts

@@ -1,5 +0,0 @@
-import { ComputedRef } from 'vue';
-export default function (): {
-    isLoading: ComputedRef<boolean>;
-    loaded: <T extends Function>(fn: T) => T;
-};

package/src/composable/private/useLoaded.ts

@@ -1,21 +0,0 @@
-import { computed, shallowRef, unref } from 'vue';
-
-export default function () {
-    const tasks = shallowRef(0);
-
-    const isLoading = computed(() => unref(tasks) > 0);
-
-    function loaded<T extends Function>(fn: T): T {
-        return (async (...args: any[]) => {
-            tasks.value++;
-
-            return await fn(...args)
-                .finally(() => tasks.value--);
-        }) as unknown as T;
-    }
-
-    return {
-        isLoading,
-        loaded
-    };
-}