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

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,10 +3,11 @@
 .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);
+    border-radius: var(--radius-full);
 }
 
 .segmentedControlFill {
@@ -24,60 +25,88 @@
 
 .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: var(--radius-full);
+    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;
+    }
+
+    // Houd de inhoud boven de zwevende highlight.
     > * {
         position: relative;
+        z-index: 1;
     }
-}
 
-.segmentedControlSeparator {
-    height: 15px;
-    width: 1px;
-    flex-shrink: 0;
-    background: var(--surface-stroke);
-    transition: opacity 300ms var(--swift-out);
+    // Verticale divider tussen twee aangrenzende inactieve items.
+    & + &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: -2px;
+        height: 15px;
+        width: 1px;
+        background: var(--surface-stroke);
+        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/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/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>