@flux-ui/components 3.0.0-next.73 → 3.0.0-next.75

package/src/component/index.ts

@@ -92,7 +92,6 @@ export { default as FluxItemMedia } from './FluxItemMedia.vue';
 export { default as FluxItemStack } from './FluxItemStack.vue';
 export { default as FluxLayerPane } from './FluxLayerPane.vue';
 export { default as FluxLayerPaneSecondary } from './FluxLayerPaneSecondary.vue';
-export { default as FluxLegend } from './FluxLegend.vue';
 export { default as FluxLink } from './FluxLink.vue';
 export { default as FluxMenu } from './FluxMenu.vue';
 export { default as FluxMenuCollapsible } from './FluxMenuCollapsible.vue';
@@ -115,7 +114,6 @@ export { default as FluxPaneGroup } from './FluxPaneGroup.vue';
 export { default as FluxPaneHeader } from './FluxPaneHeader.vue';
 export { default as FluxPaneIllustration } from './FluxPaneIllustration.vue';
 export { default as FluxPaneMedia } from './FluxPaneMedia.vue';
-export { default as FluxPercentageBar } from './FluxPercentageBar.vue';
 export { default as FluxPersona } from './FluxPersona.vue';
 export { default as FluxPlaceholder } from './FluxPlaceholder.vue';
 export { default as FluxPressable } from './FluxPressable.vue';
@@ -130,7 +128,7 @@ export { default as FluxScroller } from './FluxScroller.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 FluxSegmentedControlItem } from './FluxSegmentedControlItem.vue';
 export { default as FluxSeparator } from './FluxSeparator.vue';
 export { default as FluxSlideOver } from './FluxSlideOver.vue';
 export { default as FluxSnackbar } from './FluxSnackbar.vue';
@@ -141,7 +139,6 @@ export { default as FluxSpinner } from './FluxSpinner.vue';
 export { default as FluxSplitButton } from './FluxSplitButton.vue';
 export { default as FluxSplitView } from './FluxSplitView.vue';
 export { default as FluxSplitViewPane } from './FluxSplitViewPane.vue';
-export { default as FluxStatistic } from './FluxStatistic.vue';
 export { default as FluxStepper } from './FluxStepper.vue';
 export { default as FluxStepperStep } from './FluxStepperStep.vue';
 export { default as FluxStepperSteps } from './FluxStepperSteps.vue';

package/src/component/primitive/FilterBadge.vue

@@ -37,7 +37,16 @@
         emit('click', evt);
     }
 
-    watch([() => item, () => value], async () => {
-        valueLabel.value = await unref(getValueLabel)(value) ?? undefined;
+    watch([() => item, () => value], async ([, nextValue], _prev, onCleanup) => {
+        let cancelled = false;
+        onCleanup(() => {
+            cancelled = true;
+        });
+
+        const nextLabel = await unref(getValueLabel)(nextValue);
+
+        if (!cancelled) {
+            valueLabel.value = nextLabel ?? undefined;
+        }
     }, {deep: true, immediate: true});
 </script>

package/src/component/primitive/FilterMenuRenderer.ts

@@ -1,5 +1,5 @@
 import type { FluxFilterDefinition, FluxFilterValue } from '@flux-ui/types';
-import { defineComponent, h, isVNode, type VNode, unref } from 'vue';
+import { defineComponent, h, isVNode, type PropType, unref, type VNode } from 'vue';
 import { useFilterInjection } from '~flux/components/composable';
 import FluxMenuGroup from '../FluxMenuGroup.vue';
 import FluxSeparator from '../FluxSeparator.vue';
@@ -8,7 +8,7 @@ import FilterItem from './FilterItem.vue';
 export const FilterMenuRenderer = defineComponent({
     props: {
         menuItems: {required: true, type: Array},
-        navigate: {required: true, type: Function}
+        navigate: {required: true, type: Function as PropType<(name: string) => void>}
     },
 
     setup(props) {
@@ -18,7 +18,7 @@ export const FilterMenuRenderer = defineComponent({
     }
 });
 
-function renderFilterGroup(group: (FluxFilterDefinition | VNode)[], index: number, navigate: Function, state: Record<string, FluxFilterValue>): VNode[] {
+function renderFilterGroup(group: (FluxFilterDefinition | VNode)[], index: number, navigate: (name: string) => void, state: Record<string, FluxFilterValue>): VNode[] {
     const slot: VNode[] = [];
 
     if (index > 0) {
@@ -32,7 +32,7 @@ function renderFilterGroup(group: (FluxFilterDefinition | VNode)[], index: numbe
     return slot;
 }
 
-function renderFilterItem(item: FluxFilterDefinition | VNode, navigate: Function, state: Record<string, FluxFilterValue>): VNode {
+function renderFilterItem(item: FluxFilterDefinition | VNode, navigate: (name: string) => void, state: Record<string, FluxFilterValue>): VNode {
     if (isVNode(item)) {
         return item;
     }

package/src/composable/index.ts

@@ -9,6 +9,7 @@ export { default as useFilterInjection } from './useFilterInjection';
 export { default as useFlyoutInjection } from './useFlyoutInjection';
 export { default as useFormFieldInjection } from './useFormFieldInjection';
 export { default as useKanbanInjection } from './useKanbanInjection';
+export { default as useSegmentedControlInjection } from './useSegmentedControlInjection';
 export { default as useTabBarInjection } from './useTabBarInjection';
 export { default as useTableInjection } from './useTableInjection';
 export { default as useTooltipInjection } from './useTooltipInjection';

package/src/composable/useSegmentedControlInjection.ts

@@ -0,0 +1,13 @@
+import type { FluxSize } from '@flux-ui/types';
+import { inject, ref } from 'vue';
+import { FluxSegmentedControlInjectionKey, type FluxSegmentedControlValue } from '~flux/components/data';
+
+export default function () {
+    return inject(FluxSegmentedControlInjectionKey, {
+        modelValue: ref<FluxSegmentedControlValue | undefined>(undefined),
+        size: ref<FluxSize>('medium'),
+        select: () => undefined,
+        registerItem: () => undefined,
+        unregisterItem: () => undefined
+    });
+}

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

@@ -90,8 +90,8 @@
 
 .formFieldHeader {
     display: flex;
-    margin-bottom: 0;
     width: 100%;
+    margin-bottom: 0;
     align-items: center;
     align-self: flex-start;
     gap: 6px;
@@ -274,9 +274,9 @@
     }
 
     &::-webkit-color-swatch-wrapper {
+        width: calc(100% + 24px);
         margin: 0 -12px;
         padding: 3px;
-        width: calc(100% + 24px);
     }
 }
 

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

@@ -3,7 +3,8 @@
 .segmentedControl {
     position: relative;
     align-items: center;
-    gap: 1px;
+    gap: 3px;
+    padding: 3px;
     background: var(--gray-50);
     border: 1px solid var(--surface-stroke);
     border-radius: var(--radius);
@@ -24,60 +25,87 @@
 
 .segmentedControlHighlight {
     position: absolute;
-    top: 0;
-    bottom: 0;
+    top: 3px;
+    bottom: 3px;
     background: var(--surface);
-    border-radius: calc(var(--radius) - 2px);
-    box-shadow: var(--shadow-sm);
+    border-radius: calc(var(--radius) - 3px);
+    box-shadow: var(--shadow-md);
     outline: 1px solid var(--surface-stroke);
     pointer-events: none;
     transition: 300ms var(--swift-out);
     transition-property: left, width;
-    translate: -1px 0;
 }
 
 .segmentedControlItem {
+    position: relative;
     display: flex;
-    height: 36px;
-    padding-left: 12px;
-    padding-right: 12px;
     align-items: center;
     flex: 1 1 0;
-    gap: 9px;
     justify-content: center;
     background: none;
     border: 0;
-    border-radius: var(--radius);
+    border-radius: var(--radius-full);
     color: var(--foreground);
     cursor: pointer;
     font-weight: 500;
     text-align: center;
-    transition: 300ms var(--swift-out);
-    transition-property: background, color;
+    transition: color 300ms var(--swift-out);
+    white-space: nowrap;
 
     @include mixin.hover {
-        background: var(--gray-100);
+        color: var(--foreground-prominent);
     }
 
+    @include mixin.focus-ring(3px);
+
     &.isActive {
-        background: none;
         color: var(--foreground-prominent);
         cursor: default;
     }
 
+    &:disabled {
+        opacity: .5;
+        pointer-events: none;
+    }
+
     > * {
         position: relative;
+        z-index: 1;
     }
-}
 
-.segmentedControlSeparator {
-    height: 15px;
-    width: 1px;
-    flex-shrink: 0;
-    background: var(--surface-stroke);
-    transition: opacity 300ms var(--swift-out);
+    & + &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: -2px;
+        height: 15px;
+        width: 2px;
+        background: var(--gray-100);
+        border-radius: 1px;
+        transition: opacity 300ms var(--swift-out);
+        translate: 0 -50%;
+    }
 
-    &.isActive {
+    &.isActive::before,
+    &.isActive + &::before {
         opacity: 0;
     }
 }
+
+.isSmall {
+    height: 30px;
+    padding: 0 12px;
+    gap: 9px;
+}
+
+.isMedium {
+    height: 36px;
+    padding: 0 15px;
+    gap: 9px;
+}
+
+.isLarge {
+    height: 48px;
+    padding: 0 21px;
+    gap: 12px;
+}

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

@@ -30,6 +30,7 @@
     from {
         transform: rotate(0deg);
     }
+
     to {
         transform: rotate(1turn);
     }

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

@@ -64,6 +64,7 @@
     from {
         --shine-degrees: 0deg;
     }
+
     to {
         --shine-degrees: 360deg;
     }

package/src/css/mixin/tree-node.scss

@@ -15,12 +15,12 @@
         pointer-events: none;
 
         &.hasLine::before {
-            content: '';
             position: absolute;
             top: 0;
             bottom: 0;
             left: 9px;
             width: 1px;
+            content: '';
             background: var(--surface-stroke);
         }
     }
@@ -35,24 +35,24 @@
 
         // Non-last siblings: full-height vertical continuation line
         &:not(.isLast)::before {
-            content: '';
             position: absolute;
             top: 0;
             bottom: 0;
             left: 9px;
             width: 1px;
+            content: '';
             background: var(--surface-stroke);
         }
 
         // Rounded elbow: vertical segment from top to midpoint, curves right to expand area
         // Overlaps the ::before vertical line for non-last nodes (same position, same color)
         &::after {
-            content: '';
             position: absolute;
             top: 0;
             bottom: 50%;
             left: 9px;
             right: 0;
+            content: '';
             border-left: 1px solid var(--surface-stroke);
             border-bottom: 1px solid var(--surface-stroke);
             border-bottom-left-radius: 6px;

package/src/data/di.ts

@@ -1,4 +1,4 @@
-import type { FluxFilterDefinition, FluxFilterState, FluxFilterValue } from '@flux-ui/types';
+import type { FluxFilterDefinition, FluxFilterState, FluxFilterValue, FluxSize } from '@flux-ui/types';
 import type { DateTime } from 'luxon';
 import type { ComponentInternalInstance, ComputedRef, InjectionKey, Ref, VNode } from 'vue';
 
@@ -10,6 +10,7 @@ export const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupIn
 export const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection> = Symbol();
 export const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection> = Symbol();
 export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = Symbol();
+export const FluxSegmentedControlInjectionKey: InjectionKey<FluxSegmentedControlInjection> = Symbol();
 export const FluxSplitViewInjectionKey: InjectionKey<FluxSplitViewInjection> = Symbol();
 export const FluxTabBarInjectionKey: InjectionKey<FluxTabBarInjection> = Symbol();
 export const FluxTableInjectionKey: InjectionKey<FluxTableInjection> = Symbol();
@@ -168,6 +169,17 @@ export type FluxSplitViewInjection = {
     getPaneIndex(id: number): number;
 };
 
+export type FluxSegmentedControlValue = string | number;
+
+export type FluxSegmentedControlInjection = {
+    readonly modelValue: Ref<FluxSegmentedControlValue | undefined>;
+    readonly size: Ref<FluxSize>;
+
+    select(value: FluxSegmentedControlValue): void;
+    registerItem(element: HTMLElement, value: FluxSegmentedControlValue): void;
+    unregisterItem(element: HTMLElement): void;
+};
+
 export type FluxTabBarInjection = {
     readonly isPills: Ref<boolean>;
 

package/src/data/iconRegistry.ts

@@ -17,7 +17,7 @@ export function fluxRegisterIcons(icons: Icons): void {
         acc[iconName as FluxIconName] = icon;
 
         if (Array.isArray(icon[2])) {
-            icon[2].forEach((iconName: string) => acc[iconName as FluxIconName] = icon);
+            icon[2].forEach((alias: string) => acc[alias as FluxIconName] = icon);
         }
 
         return acc;

package/src/util/createDialogRenderer.ts

@@ -14,7 +14,7 @@ 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 unregister: VoidFunction | null = null;
     let zIndex = 0;
 
     const dialogRef = ref<HTMLElement>();

package/dist/component/FluxLegend.vue.d.ts

@@ -1,8 +0,0 @@
-import { FluxDirection, FluxLegendObject } from '@flux-ui/types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type __VLS_Props = {
-    readonly direction?: FluxDirection;
-    readonly items: FluxLegendObject[];
-};
-declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/component/FluxPercentageBar.vue.d.ts

@@ -1,8 +0,0 @@
-import { FluxPercentageBarItemObject } from '@flux-ui/types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type __VLS_Props = {
-    readonly isLegendVisible?: boolean;
-    readonly items: FluxPercentageBarItemObject[];
-};
-declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/component/FluxSegmentedView.vue.d.ts

@@ -1,9 +0,0 @@
-import { DefineComponent, ExtractPropTypes, VNode, RendererNode, RendererElement, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare const _default: DefineComponent<ExtractPropTypes<{
-    index: NumberConstructor;
-}>, () => VNode<RendererNode, RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
-    index: NumberConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/component/FluxStatistic.vue.d.ts

@@ -1,17 +0,0 @@
-import { FluxColor, FluxDirection, FluxIconName } from '@flux-ui/types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type __VLS_Props = {
-    readonly changeColor?: FluxColor;
-    readonly changeIcon?: FluxIconName;
-    readonly changeValue?: string | number | null;
-    readonly color?: FluxColor;
-    readonly direction?: FluxDirection;
-    readonly icon?: FluxIconName;
-    readonly imageSrc?: string;
-    readonly imageAlt?: string;
-    readonly isLoading?: boolean;
-    readonly label: string;
-    readonly value?: string | number | null;
-};
-declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-export default _default;

package/src/component/FluxLegend.vue

@@ -1,27 +0,0 @@
-<template>
-    <div :class="direction === 'horizontal' ? $style.legendHorizontal : $style.legendVertical">
-        <span
-            v-for="(item, index) of items"
-            :key="index"
-            :class="$style.legendItem"
-            :style="{
-                '--color': item.color
-            }">
-            {{ item.label }}
-        </span>
-    </div>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import type { FluxDirection, FluxLegendObject } from '@flux-ui/types';
-    import $style from '~flux/components/css/component/Legend.module.scss';
-
-    const {
-        direction = 'horizontal'
-    } = defineProps<{
-        readonly direction?: FluxDirection;
-        readonly items: FluxLegendObject[];
-    }>();
-</script>

package/src/component/FluxPercentageBar.vue

@@ -1,47 +0,0 @@
-<template>
-    <div :class="$style.percentageBar">
-        <div :class="$style.percentageBarTrack">
-            <FluxTooltip
-                v-for="(item, index) of items"
-                :key="index">
-                <template #content>
-                    <div :class="$style.percentageBarTooltip">
-                        <FluxIcon
-                            v-if="item.icon"
-                            :name="item.icon"
-                            :size="16"/>
-
-                        <span>{{ formatPercentage(item.value) }} {{ item.label }}</span>
-                    </div>
-                </template>
-
-                <div
-                    :class="$style.percentageBarSegment"
-                    :style="{
-                        backgroundColor: item.color,
-                        flexGrow: item.value
-                    }"/>
-            </FluxTooltip>
-        </div>
-
-        <FluxLegend
-            v-if="isLegendVisible"
-            :items="items"/>
-    </div>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import { formatPercentage } from '@basmilius/utils';
-    import type { FluxPercentageBarItemObject } from '@flux-ui/types';
-    import FluxIcon from './FluxIcon.vue';
-    import FluxLegend from './FluxLegend.vue';
-    import FluxTooltip from './FluxTooltip.vue';
-    import $style from '~flux/components/css/component/PercentageBar.module.scss';
-
-    defineProps<{
-        readonly isLegendVisible?: boolean;
-        readonly items: FluxPercentageBarItemObject[];
-    }>();
-</script>

package/src/component/FluxSegmentedView.vue

@@ -1,15 +0,0 @@
-<script lang="ts">
-    import { defineComponent } from 'vue';
-
-    export default defineComponent({
-        props: {
-            index: Number
-        },
-        setup(props, {slots}) {
-            return () => {
-                const items = slots.default!();
-                return items[props.index!];
-            };
-        }
-    });
-</script>

package/src/component/FluxStatistic.vue

@@ -1,82 +0,0 @@
-<template>
-    <FluxPane
-        :class="clsx(
-            direction === 'horizontal' && $style.statisticHorizontal,
-            direction === 'vertical' && $style.statisticVertical,
-            color === 'gray' && $style.isGray,
-            color === 'primary' && $style.isPrimary,
-            color === 'danger' && $style.isDanger,
-            color === 'info' && $style.isInfo,
-            color === 'success' && $style.isSuccess,
-            color === 'warning' && $style.isWarning
-        )"
-        :is-loading="isLoading">
-        <FluxBoxedIcon
-            v-if="icon"
-            :class="$style.statisticIcon"
-            :color="color"
-            :name="icon"
-            :size="48"/>
-
-        <div v-else-if="imageSrc">
-            <img
-                :class="$style.statisticImage"
-                :src="imageSrc"
-                :alt="imageAlt"/>
-        </div>
-
-        <div :class="$style.statisticData">
-            <span>{{ label }}</span>
-            <strong>{{ value ?? MDASH }}</strong>
-        </div>
-
-        <div
-            v-if="changeIcon || changeValue"
-            :class="clsx(
-                $style.statisticChange,
-                changeColor === 'gray' && $style.isGray,
-                changeColor === 'primary' && $style.isPrimary,
-                changeColor === 'danger' && $style.isDanger,
-                changeColor === 'info' && $style.isInfo,
-                changeColor === 'success' && $style.isSuccess,
-                changeColor === 'warning' && $style.isWarning
-            )">
-            <span v-if="changeValue">{{ changeValue }}</span>
-
-            <FluxIcon
-                v-if="changeIcon"
-                :name="changeIcon"
-                :size="14"/>
-        </div>
-    </FluxPane>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import { MDASH } from '@basmilius/utils';
-    import type { FluxColor, FluxDirection, FluxIconName } from '@flux-ui/types';
-    import { clsx } from 'clsx';
-    import FluxBoxedIcon from './FluxBoxedIcon.vue';
-    import FluxIcon from './FluxIcon.vue';
-    import FluxPane from './FluxPane.vue';
-    import $style from '~flux/components/css/component/Statistic.module.scss';
-
-    const {
-        changeColor = 'gray',
-        color = 'gray',
-        direction = 'horizontal'
-    } = defineProps<{
-        readonly changeColor?: FluxColor;
-        readonly changeIcon?: FluxIconName;
-        readonly changeValue?: string | number | null;
-        readonly color?: FluxColor;
-        readonly direction?: FluxDirection;
-        readonly icon?: FluxIconName;
-        readonly imageSrc?: string;
-        readonly imageAlt?: string;
-        readonly isLoading?: boolean;
-        readonly label: string;
-        readonly value?: string | number | null;
-    }>();
-</script>

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

@@ -1,29 +0,0 @@
-.legendHorizontal {
-    display: flex;
-    gap: 12px 18px;
-}
-
-.legendVertical {
-    display: flex;
-    flex-flow: column;
-    gap: 12px;
-}
-
-.legendItem {
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 6px;
-    font-size: 14px;
-    line-height: 1;
-
-    &::before {
-        display: block;
-        margin-top: 1px;
-        height: 12px;
-        width: 12px;
-        content: '';
-        flex: 0 0 12px;
-        background: var(--color);
-        border-radius: var(--radius-full);
-    }
-}

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

@@ -1,31 +0,0 @@
-.percentageBar {
-    display: flex;
-    flex-flow: column;
-    gap: 12px;
-}
-
-.percentageBarSegment {
-    height: 12px;
-    border-radius: calc(var(--radius) / 3);
-    transition: var(--transition-default);
-    transition-property: height, margin, flex-grow;
-
-    &:hover {
-        height: 16px;
-        margin-top: -2px;
-        margin-bottom: -2px;
-    }
-}
-
-.percentageBarTooltip {
-    display: flex;
-    align-items: center;
-    flex-flow: row nowrap;
-    gap: 9px;
-}
-
-.percentageBarTrack {
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 3px;
-}