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

package/src/component/FluxTableBar.vue

@@ -0,0 +1,37 @@
+<template>
+    <tr :class="$style.tableRow">
+        <td
+            :class="clsx(
+                $style.tableBar,
+                isBordered && $style.isBordered,
+                isHoverable && $style.isHoverable,
+                isSeparated && $style.isSeparated,
+                isStriped && $style.isStriped
+            )"
+            colspan="100%"
+            role="cell">
+            <div :class="$style.tableBarContent">
+                <slot/>
+            </div>
+        </td>
+    </tr>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useTableInjection } from '$flux/composable';
+    import { clsx } from 'clsx';
+    import $style from '$flux/css/component/Table.module.scss';
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const {
+        isBordered,
+        isHoverable,
+        isSeparated,
+        isStriped
+    } = useTableInjection();
+</script>

package/src/component/FluxTabs.vue

@@ -33,7 +33,7 @@
     setup>
     import { flattenVNodeTree, getComponentProps } from '@flux-ui/internals';
     import type { FluxIconName } from '@flux-ui/types';
-    import { computed, ref, unref, VNode, watch } from 'vue';
+    import { computed, ref, unref, type VNode, watch } from 'vue';
     import { FluxWindowTransition } from '$flux/transition';
     import { VNodeRenderer } from './primitive';
     import FluxTabBar from './FluxTabBar.vue';

package/src/component/FluxTooltip.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { defineComponent, getCurrentInstance, onMounted, onUnmounted, PropType, ref, SlotsType, VNode } from 'vue';
+    import { defineComponent, getCurrentInstance, onMounted, onUnmounted, type PropType, ref, type SlotsType, type VNode } from 'vue';
     import { addTooltip, removeTooltip } from '$flux/data';
 
     export default defineComponent({

package/src/component/index.ts

@@ -35,6 +35,7 @@ export { default as FluxExpandableGroup } from './FluxExpandableGroup.vue';
 export { default as FluxFader } from './FluxFader.vue';
 export { default as FluxFaderItem } from './FluxFaderItem.vue';
 export { default as FluxFilter } from './FluxFilter.vue';
+export { default as FluxFilterBar } from './FluxFilterBar.vue';
 export { default as FluxFilterDate } from './FluxFilterDate.vue';
 export { default as FluxFilterDateRange } from './FluxFilterDateRange.vue';
 export { default as FluxFilterOption } from './FluxFilterOption.vue';
@@ -53,6 +54,7 @@ export { default as FluxFormDateRangeInput } from './FluxFormDateRangeInput.vue'
 export { default as FluxFormDateTimeInput } from './FluxFormDateTimeInput.vue';
 export { default as FluxFormField } from './FluxFormField.vue';
 export { default as FluxFormFieldAddition } from './FluxFormFieldAddition.vue';
+export { default as FluxFormGrid } from './FluxFormGrid.vue';
 export { default as FluxFormInput } from './FluxFormInput.vue';
 export { default as FluxFormInputAddition } from './FluxFormInputAddition.vue';
 export { default as FluxFormInputGroup } from './FluxFormInputGroup.vue';
@@ -73,6 +75,11 @@ export { default as FluxGridPattern } from './FluxGridPattern.vue';
 export { default as FluxIcon } from './FluxIcon.vue';
 export { default as FluxInfo } from './FluxInfo.vue';
 export { default as FluxInfoStack } from './FluxInfoStack.vue';
+export { default as FluxItem } from './FluxItem.vue';
+export { default as FluxItemActions } from './FluxItemActions.vue';
+export { default as FluxItemContent } from './FluxItemContent.vue';
+export { default as FluxItemMedia } from './FluxItemMedia.vue';
+export { default as FluxItemStack } from './FluxItemStack.vue';
 export { default as FluxLegend } from './FluxLegend.vue';
 export { default as FluxLink } from './FluxLink.vue';
 export { default as FluxMenu } from './FluxMenu.vue';
@@ -83,6 +90,7 @@ export { default as FluxMenuSubHeader } from './FluxMenuSubHeader.vue';
 export { default as FluxMenuTitle } from './FluxMenuTitle.vue';
 export { default as FluxNotice } from './FluxNotice.vue';
 export { default as FluxNoticeStack } from './FluxNoticeStack.vue';
+export { default as FluxOverflowBar } from './FluxOverflowBar.vue';
 export { default as FluxOverlay } from './FluxOverlay.vue';
 export { default as FluxOverlayProvider } from './FluxOverlayProvider.vue';
 export { default as FluxPagination } from './FluxPagination.vue';
@@ -100,12 +108,14 @@ export { default as FluxPersona } from './FluxPersona.vue';
 export { default as FluxPlaceholder } from './FluxPlaceholder.vue';
 export { default as FluxPressable } from './FluxPressable.vue';
 export { default as FluxPrimaryButton } from './FluxPrimaryButton.vue';
+export { default as FluxPrimaryLinkButton } from './FluxPrimaryLinkButton.vue';
 export { default as FluxProgressBar } from './FluxProgressBar.vue';
 export { default as FluxPublishButton } from './FluxPublishButton.vue';
 export { default as FluxQuantitySelector } from './FluxQuantitySelector.vue';
 export { default as FluxRemove } from './FluxRemove.vue';
 export { default as FluxRoot } from './FluxRoot.vue';
 export { default as FluxSecondaryButton } from './FluxSecondaryButton.vue';
+export { default as FluxSecondaryLinkButton } from './FluxSecondaryLinkButton.vue';
 export { default as FluxSegmentedControl } from './FluxSegmentedControl.vue';
 export { default as FluxSegmentedView } from './FluxSegmentedView.vue';
 export { default as FluxSeparator } from './FluxSeparator.vue';
@@ -127,6 +137,7 @@ export { default as FluxTabBarItem } from './FluxTabBarItem.vue';
 export { default as FluxTabs } from './FluxTabs.vue';
 export { default as FluxTable } from './FluxTable.vue';
 export { default as FluxTableActions } from './FluxTableActions.vue';
+export { default as FluxTableBar } from './FluxTableBar.vue';
 export { default as FluxTableCell } from './FluxTableCell.vue';
 export { default as FluxTableHeader } from './FluxTableHeader.vue';
 export { default as FluxTableRow } from './FluxTableRow.vue';

package/src/component/primitive/AnchorPopup.vue

@@ -16,7 +16,7 @@
     import { isHtmlElement } from '@basmilius/utils';
     import { useMutationObserver } from '@flux-ui/internals';
     import type { FluxDirection } from '@flux-ui/types';
-    import { ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, watchEffect } from 'vue';
+    import { type ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, watchEffect } from 'vue';
 
     const {
         anchor,

package/src/component/primitive/FilterMenuRenderer.ts

@@ -1,185 +1,23 @@
-import { formatNumber } from '@basmilius/utils';
-import { flattenVNodeTree, getComponentName, getComponentProps } from '@flux-ui/internals';
-import type { FluxFilterBase, FluxFilterDateEntry, FluxFilterDateRangeEntry, FluxFilterItem, FluxFilterOptionEntry, FluxFilterOptionItem, FluxFilterOptionRow, FluxFilterOptionsEntry, FluxFilterRangeEntry, FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
-import { camelCase } from 'lodash-es';
-import { DateTime } from 'luxon';
-import { computed, defineComponent, h, isVNode, unref, VNode } from 'vue';
-import { useTranslate } from '$flux/composable/private';
-import { FluxTranslate, isFluxFilterOptionItem } from '$flux/data';
-import { createLabelForDateRange } from '$flux/util';
-import FluxMenu from '$flux/component/FluxMenu.vue';
-import FluxMenuGroup from '$flux/component/FluxMenuGroup.vue';
-import FluxSeparator from '$flux/component/FluxSeparator.vue';
+import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+import { defineComponent, h, isVNode, unref, type VNode } from 'vue';
+import { useFilterInjection } from '$flux/composable';
+import FluxMenuGroup from '../FluxMenuGroup.vue';
+import FluxSeparator from '../FluxSeparator.vue';
 import FilterItem from './FilterItem.vue';
 
 export const FilterMenuRenderer = defineComponent({
     props: {
-        navigate: Function,
-        state: Object
+        menuItems: {required: true, type: Array},
+        navigate: {required: true, type: Function}
     },
 
-    setup(props, {slots}) {
-        const content = computed<(FluxFilterItem | VNode)[][]>(() => {
-            const children = flattenVNodeTree(slots.default?.() ?? []);
-            const content: (FluxFilterItem | VNode)[][] = [[]];
+    setup(props) {
+        const {state} = useFilterInjection();
 
-            for (const child of children) {
-                const name = getComponentName(child);
-
-                if (name === 'FluxSeparator') {
-                    content.push([]);
-                    continue;
-                }
-
-                if (name.startsWith('FluxFilter')) {
-                    const props = getComponentProps<Omit<FluxFilterItem, 'type'>>(child);
-                    const type = camelCase(name.substring(10)) as FluxFilterItem['type'];
-
-                    content[content.length - 1].push(parsers[type](props));
-                    continue;
-                }
-
-                content[content.length - 1].push(child);
-            }
-
-            return content;
-        });
-
-        return () => h(FluxMenu, {}, {
-            default: () => unref(content).map((group, index) => renderFilterGroup(group, index, props.navigate!, props.state!))
-        });
+        return () => props.menuItems.map((group, index) => renderFilterGroup(group as (FluxFilterItem | VNode)[], index, props.navigate, unref(state) as Record<string, FluxFilterValue>));
     }
 });
 
-function parseDate(base: FluxFilterBase): FluxFilterDateEntry {
-    return {
-        ...base,
-        type: 'date',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!DateTime.isDateTime(value)) {
-                return null;
-            }
-
-            return value.toLocaleString({
-                day: 'numeric',
-                month: 'short',
-                year: 'numeric'
-            });
-        }
-    };
-}
-
-function parseDateRange(base: FluxFilterBase): FluxFilterDateRangeEntry {
-    return {
-        ...base,
-        type: 'dateRange',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value) || value.length !== 2) {
-                return null;
-            }
-
-            const [start, end] = value;
-
-            if (!DateTime.isDateTime(start) || !DateTime.isDateTime(end)) {
-                return null;
-            }
-
-            return createLabelForDateRange(start, end);
-        }
-    };
-}
-
-function parseOption(base: FluxFilterBase): FluxFilterOptionEntry {
-    const options = (base as any).options as FluxFilterOptionItem[];
-
-    return {
-        ...base,
-        type: 'option',
-
-        async getValueLabel(value): Promise<string | null> {
-            return options.find(o => o.value === value)?.label ?? null;
-        }
-    };
-}
-
-function parseOptionAsync(base: FluxFilterBase): FluxFilterOptionEntry {
-    const fetchOptions = (base as any).fetchOptions as (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>;
-
-    return {
-        ...base,
-        type: 'option',
-
-        async getValueLabel(value): Promise<string | null> {
-            const options = (await fetchOptions([value])).filter(isFluxFilterOptionItem);
-
-            return options.find(o => o.value === value)?.label ?? null;
-        }
-    };
-}
-
-function parseOptions(base: FluxFilterBase): FluxFilterOptionsEntry {
-    const options = (base as any).options as FluxFilterOptionItem[];
-    const translate = useTranslate();
-
-    return {
-        ...base,
-        type: 'options',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value)) {
-                return null;
-            }
-
-            return generateMultiOptionsLabel(translate, options, value);
-        }
-    };
-}
-
-function parseOptionsAsync(base: FluxFilterBase): FluxFilterOptionsEntry {
-    const fetchOptions = (base as any).fetchOptions as (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>;
-    const translate = useTranslate();
-
-    return {
-        ...base,
-        type: 'options',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value)) {
-                return null;
-            }
-
-            const options = (await fetchOptions(value)).filter(isFluxFilterOptionItem);
-
-            return generateMultiOptionsLabel(translate, options, value);
-        }
-    };
-}
-
-function parseRange(base: FluxFilterBase): FluxFilterRangeEntry {
-    return {
-        ...base,
-        type: 'range',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!value || !Array.isArray(value) || value.length !== 2) {
-                return null;
-            }
-
-            const [lower, upper] = value as number[];
-
-            if ('formatter' in base) {
-                const formatter = base.formatter as (value: number) => string;
-
-                return `${formatter(lower)} – ${formatter(upper)}`;
-            }
-
-            return `${formatNumber(lower)} – ${formatNumber(upper)}`;
-        }
-    };
-}
-
 function renderFilterGroup(group: (FluxFilterItem | VNode)[], index: number, navigate: Function, state: Record<string, FluxFilterValue>): VNode[] {
     const slot: VNode[] = [];
 
@@ -205,29 +43,3 @@ function renderFilterItem(item: FluxFilterItem | VNode, navigate: Function, stat
         onClick: () => navigate(item.name)
     });
 }
-
-function generateMultiOptionsLabel(translate: FluxTranslate, options: FluxFilterOptionItem[], values: FluxFilterValueSingle[]): string | null {
-    const selected = options.filter(o => values.includes(o.value)).length;
-
-    if (selected <= 0) {
-        return null;
-    }
-
-    if (selected === 1) {
-        return options.find(o => values.includes(o.value))!.label;
-    }
-
-    return translate('flux.nSelected', {
-        n: selected
-    });
-}
-
-const parsers = {
-    date: parseDate,
-    dateRange: parseDateRange,
-    option: parseOption,
-    optionAsync: parseOptionAsync,
-    options: parseOptions,
-    optionsAsync: parseOptionsAsync,
-    range: parseRange
-} as const;

package/src/component/primitive/SelectBase.vue

@@ -136,7 +136,7 @@
     import { unrefTemplateElement, useClickOutside } from '@flux-ui/internals';
     import type { FluxFormSelectOption, FluxFormSelectOptions } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { ComponentPublicInstance, computed, nextTick, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { type ComponentPublicInstance, computed, nextTick, ref, toRef, unref, useTemplateRef, watch } from 'vue';
     import { useDisabled, useFormFieldInjection } from '$flux/composable';
     import { useTranslate } from '$flux/composable/private';
     import { isFluxFormSelectGroup, isFluxFormSelectOption } from '$flux/data';

package/src/composable/useFilterInjection.ts

@@ -5,14 +5,7 @@ export default function () {
     return inject(FluxFilterInjectionKey, {
         // note(Bas): The default value is never used, but required by
         //  Vue, so that explains the empty getter and function below.
-        state: ref({
-            get resettable() {
-                return [];
-            },
-
-            reset(): void {
-            }
-        }),
+        state: ref({}),
         back: () => void 0,
         reset: () => void 0,
         getValue: () => void 0,

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

@@ -8,15 +8,15 @@
     padding-left: 6px;
     padding-right: 6px;
     border: 0;
-    border-radius: var(--radius);
+    border-radius: var(--radius-half);
     box-shadow: none;
 
     @include mixin.hover {
-        background: var(--gray-2);
+        background: var(--gray-100);
     }
 
     &:active {
-        background: var(--gray-3);
+        background: var(--gray-200);
     }
 
     .spinner {
@@ -32,7 +32,7 @@
 }
 
 .action.isDestructive .actionIcon {
-    color: var(--danger-7);
+    color: var(--danger-600);
 }
 
 .actionLabel {
@@ -58,8 +58,8 @@
 
 .basePaneStructure > .actionBar {
     padding: 15px 21px;
-    background: var(--gray-1);
-    border: 1px solid var(--gray-2);
+    background: var(--gray-50);
+    border: 1px solid var(--gray-100);
     border-left: 0;
     border-right: 0;
 

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

@@ -14,9 +14,9 @@
     display: block;
     height: inherit;
     width: inherit;
-    background: var(--gray-1);
+    background: var(--gray-50);
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px var(--gray-2);
+    box-shadow: inset 0 0 0 1px var(--gray-100);
 }
 
 .avatarFallback {
@@ -41,18 +41,18 @@
 .avatarFallbackColorized {
     composes: avatarFallback;
 
-    background: color-mix(in srgb, var(--color), var(--gray-0) 80%);
+    background: color-mix(in srgb, var(--color), var(--gray-25) 80%);
     color: var(--color);
 }
 
 [dark] .avatarFallbackColorized {
-    background: color-mix(in srgb, var(--color), var(--gray-0) 70%);
+    background: color-mix(in srgb, var(--color), var(--gray-25) 70%);
 }
 
 .avatarFallbackNeutral {
     composes: avatarFallback;
 
-    background: var(--gray-2);
+    background: var(--gray-100);
     color: var(--foreground-secondary);
 }
 
@@ -62,8 +62,8 @@
     inset: 0;
     align-items: center;
     justify-content: center;
-    background: oklch(from var(--gray-1) l c h / .84);
-    box-shadow: inset 0 0 0 1px var(--gray-2);
+    background: rgb(from var(--gray-50) r g b / .84);
+    box-shadow: inset 0 0 0 1px var(--gray-100);
     border-radius: inherit;
     backdrop-filter: blur(3px) saturate(180%);
 
@@ -86,37 +86,37 @@
 .avatarStatusGray {
     composes: avatarStatus;
 
-    background: var(--gray-6);
+    background: var(--gray-500);
 }
 
 .avatarStatusPrimary {
     composes: avatarStatus;
 
-    background: var(--primary-7);
+    background: var(--primary-600);
 }
 
 .avatarStatusDanger {
     composes: avatarStatus;
 
-    background: var(--danger-7);
+    background: var(--danger-600);
 }
 
 .avatarStatusInfo {
     composes: avatarStatus;
 
-    background: var(--info-7);
+    background: var(--info-600);
 }
 
 .avatarStatusSuccess {
     composes: avatarStatus;
 
-    background: var(--success-7);
+    background: var(--success-600);
 }
 
 .avatarStatusWarning {
     composes: avatarStatus;
 
-    background: var(--warning-7);
+    background: var(--warning-600);
 }
 
 .avatarClickable {
@@ -154,7 +154,7 @@
     @include mixin.focus-ring(2px);
 
     @include mixin.hover {
-        background: var(--gray-2);
+        background: var(--gray-100);
     }
 }
 

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

@@ -10,8 +10,8 @@
     padding-right: 9px;
     align-items: center;
     gap: 6px;
-    background: var(--gray-0);
-    border: 1px solid var(--gray-2);
+    background: var(--surface);
+    border: 1px solid var(--surface-stroke);
     border-radius: 99px;
     color: var(--foreground-prominent);
     font-size: 13px;
@@ -24,7 +24,7 @@
         transition: background 180ms var(--swift-out);
 
         @include mixin.hover {
-            background: var(--gray-1);
+            background: var(--gray-50);
             color: var(--foreground-prominent);
         }
     }
@@ -49,12 +49,12 @@
     cursor: pointer;
 
     @include mixin.hover {
-        background: var(--gray-2);
+        background: var(--gray-100);
         color: var(--foreground);
     }
 
     &:active {
-        background: var(--gray-3);
+        background: var(--gray-200);
         color: var(--foreground);
     }
 
@@ -91,60 +91,60 @@
 .badgeGray {
     composes: badge;
 
-    --color: var(--gray-8);
+    --color: var(--gray-700);
 
     .badgeLabel {
         color: var(--foreground-prominent);
     }
 
     .spinner {
-        --value: var(--primary-7);
+        --value: var(--primary-600);
     }
 }
 
 .badgePrimary {
     composes: badge;
 
-    --color: var(--primary-7);
+    --color: var(--primary-600);
 }
 
 .badgeDanger {
     composes: badge;
 
-    --color: var(--danger-7);
+    --color: var(--danger-600);
 }
 
 .badgeInfo {
     composes: badge;
 
-    --color: var(--info-7);
+    --color: var(--info-600);
 }
 
 .badgeSuccess {
     composes: badge;
 
-    --color: var(--success-7);
+    --color: var(--success-600);
 }
 
 .badgeWarning {
     composes: badge;
 
-    --color: var(--warning-7);
+    --color: var(--warning-600);
 }
 
 .tag {
     composes: badge;
 
-    background: var(--gray-1);
-    border-color: var(--gray-2);
-    border-radius: calc(var(--radius) / 2);
+    background: var(--gray-50);
+    border-color: var(--gray-200);
+    border-radius: var(--radius-half);
     font-weight: 400;
 }
 
 .tagClose {
     composes: badgeClose;
 
-    border-radius: calc(var(--radius) / 3);
+    border-radius: var(--radius-half);
 }
 
 .tagDot {