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

package/src/component/FluxSegmentedControlItem.vue

@@ -0,0 +1,98 @@
+<template>
+    <button
+        ref="item"
+        :class="itemClass"
+        role="radio"
+        :aria-checked="isActive"
+        :aria-disabled="disabled ? true : undefined"
+        :disabled="disabled ? true : undefined"
+        :tabindex="isActive ? 0 : -1"
+        type="button"
+        @click="onClick">
+        <slot>
+            <FluxIcon
+                v-if="icon"
+                :name="icon"
+                :size="iconSize"/>
+
+            <span v-if="label">{{ label }}</span>
+        </slot>
+    </button>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, onBeforeUnmount, onMounted, toRef, unref, useTemplateRef } from 'vue';
+    import { useDisabled, useSegmentedControlInjection } from '~flux/components/composable';
+    import type { FluxSegmentedControlValue } from '~flux/components/data';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/SegmentedControl.module.scss';
+
+    const { value, disabled: componentDisabled } = defineProps<{
+        readonly value: FluxSegmentedControlValue;
+        readonly disabled?: boolean;
+        readonly icon?: FluxIconName;
+        readonly label?: string;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const control = useSegmentedControlInjection();
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const itemRef = useTemplateRef<HTMLButtonElement>('item');
+
+    const sizeClasses = {
+        small: $style.isSmall,
+        medium: $style.isMedium,
+        large: $style.isLarge
+    };
+    const iconSizes = {
+        small: 14,
+        medium: 16,
+        large: 18
+    };
+
+    const isActive = computed(() => control.modelValue.value === value);
+    const iconSize = computed(() => iconSizes[unref(control.size)]);
+    const itemClass = computed(() => clsx(
+        $style.segmentedControlItem,
+        sizeClasses[unref(control.size)],
+        isActive.value && $style.isActive
+    ));
+
+    onMounted(() => {
+        const element = unref(itemRef);
+
+        if (!element) {
+            return;
+        }
+
+        control.registerItem(element, value);
+
+        if (control.modelValue.value === undefined && !unref(disabled)) {
+            control.select(value);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        const element = unref(itemRef);
+
+        if (element) {
+            control.unregisterItem(element);
+        }
+    });
+
+    function onClick(evt: MouseEvent): void {
+        if (unref(disabled)) {
+            evt.preventDefault();
+            return;
+        }
+
+        control.select(value);
+    }
+</script>

package/src/component/FluxSpacing.vue

@@ -26,7 +26,11 @@
         120
     ] as const;
 
+    type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
+        ? Acc[number]
+        : Enumerate<N, [...Acc, Acc['length']]>;
+
     defineProps<{
-        readonly size: keyof typeof spacings;
+        readonly size: Enumerate<typeof spacings['length']>;
     }>();
 </script>

package/src/component/FluxSplitButton.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { FluxDirection, FluxIconName } from '@flux-ui/types';
     import type { VNode } from 'vue';
     import FluxFlyout from './FluxFlyout.vue';

package/src/component/FluxTable.vue

@@ -18,7 +18,9 @@
             <FluxTableRow
                 v-if="fillColumns"
                 :class="$style.tableFill">
-                <FluxTableCell v-for="_ of fillColumns"/>
+                <FluxTableCell
+                    v-for="n of fillColumns"
+                    :key="n"/>
             </FluxTableRow>
             </tbody>
 

package/src/component/FluxToolbar.vue

@@ -6,7 +6,7 @@
             floatingMode === 'top-end' && $style.isTopEnd,
             floatingMode === 'top-start' && $style.isTopStart,
             floatingMode === 'bottom-end' && $style.isBottomEnd,
-            floatingMode === 'bottom-start' && $style.isBottomStart,
+            floatingMode === 'bottom-start' && $style.isBottomStart
         )"
         :gap="6"
         tag="nav">

package/src/component/index.ts

@@ -130,7 +130,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';

package/src/component/primitive/DialogLayout.vue

@@ -4,9 +4,9 @@
             :icon="icon"
             :title="title"/>
 
-        <FluxPaneBody
-            v-if="message"
-            v-html="message"/>
+        <FluxPaneBody v-if="message">
+            {{ message }}
+        </FluxPaneBody>
 
         <FluxPaneBody v-if="$slots.default">
             <slot/>

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/src/util/index.ts

@@ -2,3 +2,4 @@ export { default as createDialogRenderer } from './createDialogRenderer';
 export { default as createLabelForDateRange } from './createLabelForDateRange';
 export { default as defineFilter, type FluxFilterDefinitionFactory } from './defineFilter';
 export { generateMultiOptionsLabel, isFluxFilterOptionHeader, isFluxFilterOptionItem, isResettable, pickFilterCommon } from './filter';
+export { default as sanitizeUrl } from './sanitizeUrl';

package/src/util/sanitizeUrl.ts

@@ -0,0 +1,40 @@
+const DANGEROUS_PROTOCOL = /^(javascript|vbscript|data):/i;
+
+/**
+ * Removes control characters (and the Unicode line/paragraph separators) that
+ * browsers ignore inside URLs but which can be used to obfuscate the scheme,
+ * e.g. `java\tscript:alert(1)`.
+ */
+function stripControlChars(value: string): string {
+    let out = '';
+
+    for (let i = 0; i < value.length; i++) {
+        const code = value.charCodeAt(i);
+
+        if (code <= 0x20 || (code >= 0x7f && code <= 0x9f) || code === 0x2028 || code === 0x2029) {
+            continue;
+        }
+
+        out += value[i];
+    }
+
+    return out;
+}
+
+/**
+ * Sanitizes a URL intended for an `href` attribute. Returns `undefined` when the
+ * URL uses a dangerous scheme (`javascript:`, `vbscript:`, `data:`) so the attribute
+ * is omitted instead of becoming a script-execution or data-injection vector.
+ * Safe and relative URLs are returned unchanged.
+ */
+export default function (href?: string): string | undefined {
+    if (!href) {
+        return href;
+    }
+
+    if (DANGEROUS_PROTOCOL.test(stripControlChars(href))) {
+        return undefined;
+    }
+
+    return href;
+}

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>