@flux-ui/components 3.0.0-next.9 → 3.1.0

package/src/component/FluxBadge.vue

@@ -40,7 +40,8 @@
             v-if="type === 'none' && isDeletable"
             :class="$style.badgeClose"
             type="button"
-            @click="onDeleteClick()">
+            :aria-label="translate('flux.delete')"
+            @click.stop="onDeleteClick()">
             <FluxIcon name="xmark"/>
         </button>
     </FluxPressable>
@@ -51,10 +52,11 @@
     setup>
     import type { FluxButtonEmits, FluxColor, FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Badge.module.scss';
+    import $style from '~flux/components/css/component/Badge.module.scss';
 
     const emit = defineEmits<FluxButtonEmits & {
         delete: [];
@@ -78,6 +80,8 @@
         readonly to?: FluxTo;
     }>();
 
+    const translate = useTranslate();
+
     function onDeleteClick(): void {
         emit('delete');
     }

package/src/component/FluxBadgeStack.vue

@@ -1,18 +1,19 @@
 <template>
-    <FluxStack
+    <FluxFlex
         direction="horizontal"
         :gap="6"
-        is-wrapping>
+        wrap="wrap">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     lang="ts"
     setup>
-    import FluxStack from './FluxStack.vue';
+    import type { VNode } from 'vue';
+    import FluxFlex from './FluxFlex.vue';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxBorderBeam.vue

@@ -0,0 +1,168 @@
+<template>
+    <div
+        ref="wrapper"
+        :class="clsx(
+            $style.borderBeam,
+            VARIANT_CLASSES[variant],
+            $style[colorVariant],
+            isActive && !isFading && $style.isActive,
+            isFading && $style.isFading,
+            isPaused && $style.isPaused,
+            isStatic && $style.isStatic
+        )"
+        :style="style"
+        @animationend="onAnimationEnd">
+        <slot/>
+
+        <div
+            aria-hidden="true"
+            :class="$style.bloom"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useInView } from '@flux-ui/internals';
+    import { clsx } from 'clsx';
+    import { computed, ref, unref, useTemplateRef, watch } from 'vue';
+    import { useBorderBeamPulse, type BorderBeamVariant } from '~flux/components/composable/private';
+    import $style from '~flux/components/css/component/BorderBeam.module.scss';
+
+    const emit = defineEmits<{
+        activate: [];
+        deactivate: [];
+    }>();
+
+    const {
+        active = true,
+        brightness,
+        colorVariant = 'colorful',
+        duration,
+        hueRange = 30,
+        radius,
+        saturation,
+        staticColors = false,
+        strength = 1,
+        variant = 'md'
+    } = defineProps<{
+        readonly active?: boolean;
+        readonly brightness?: number;
+        readonly colorVariant?: 'colorful' | 'mono' | 'ocean' | 'sunset';
+        readonly duration?: number;
+        readonly hueRange?: number;
+        readonly radius?: string | number;
+        readonly saturation?: number;
+        readonly staticColors?: boolean;
+        readonly strength?: number;
+        readonly variant?: BorderBeamVariant;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const VARIANT_CLASSES: Record<BorderBeamVariant, string> = {
+        'sm': $style.sm,
+        'md': $style.md,
+        'line': $style.line,
+        'pulse-inner': $style.pulseInner,
+        'pulse-outside': $style.pulseOutside
+    };
+
+    const wrapperRef = useTemplateRef('wrapper');
+    const inView = useInView(wrapperRef, {initial: true, rootMargin: '256px'});
+
+    const isActive = ref(active);
+    const isFading = ref(false);
+    const glowScale = ref<{ x: number; y: number; } | null>(null);
+
+    const isPulse = computed(() => variant === 'pulse-inner' || variant === 'pulse-outside');
+    const isStatic = computed(() => staticColors || colorVariant === 'mono');
+    const isPaused = computed(() => isActive.value && !isFading.value && !inView.value);
+    const resolvedDuration = computed(() => duration ?? (variant === 'line' ? 3.1 : isPulse.value ? 2.3 : 1.96));
+
+    const style = computed(() => ({
+        '--beam-brightness': brightness,
+        '--beam-duration': resolvedDuration.value,
+        '--beam-glow-sx': glowScale.value?.x,
+        '--beam-glow-sy': glowScale.value?.y,
+        '--beam-hue-range': variant === 'line' ? Math.min(hueRange, 13) : hueRange,
+        '--beam-radius': typeof radius === 'number' ? `${radius}px` : radius,
+        '--beam-saturation': saturation,
+        '--beam-strength': Math.max(0, Math.min(1, strength))
+    }));
+
+    useBorderBeamPulse({
+        duration: resolvedDuration,
+        elementRef: wrapperRef,
+        enabled: computed(() => (isActive.value || isFading.value) && inView.value),
+        staticColors: isStatic,
+        variant: computed(() => variant)
+    });
+
+    watch(() => active, value => {
+        if (value && !isActive.value && !isFading.value) {
+            isActive.value = true;
+        } else if (!value && isActive.value && !isFading.value) {
+            isFading.value = true;
+        }
+    });
+
+    // The pulse-outside glow geometry is authored in fixed pixels for a reference
+    // element of ~350x140; measure the wrapped element and scale the glow per-axis
+    // so the halo fits any component it's applied to.
+    watch([wrapperRef, () => variant], (_, __, onCleanup) => {
+        glowScale.value = null;
+
+        const wrapper = unref(wrapperRef);
+
+        if (!wrapper || variant !== 'pulse-outside' || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+
+        const child = wrapper.firstElementChild;
+
+        if (!child || !(child instanceof HTMLElement)) {
+            return;
+        }
+
+        const clamp = (value: number): number => Math.max(.35, Math.min(4, value));
+
+        const measure = (): void => {
+            const rect = child.getBoundingClientRect();
+
+            if (!rect.width || !rect.height) {
+                return;
+            }
+
+            const x = +clamp(rect.width / 350).toFixed(3);
+            const y = +clamp(rect.height / 140).toFixed(3);
+
+            if (glowScale.value?.x !== x || glowScale.value?.y !== y) {
+                glowScale.value = {x, y};
+            }
+        };
+
+        measure();
+
+        const observer = new ResizeObserver(measure);
+        observer.observe(child);
+
+        onCleanup(() => observer.disconnect());
+    }, {immediate: true});
+
+    function onAnimationEnd(event: AnimationEvent): void {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+
+        if (isFading.value) {
+            isActive.value = false;
+            isFading.value = false;
+            emit('deactivate');
+        } else if (isActive.value) {
+            emit('activate');
+        }
+    }
+</script>

package/src/component/FluxBorderShine.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { flattenVNodeTree, orange600, pink600, purple600 } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { cloneVNode, defineComponent, Fragment, h, PropType } from 'vue';
-    import $style from '$flux/css/component/Visual.module.scss';
+    import { cloneVNode, defineComponent, Fragment, h, type PropType } from 'vue';
+    import $style from '~flux/components/css/component/Visual.module.scss';
 
     export default defineComponent({
         inheritAttrs: false,

package/src/component/FluxBoxedIcon.vue

@@ -7,7 +7,7 @@
             color === 'danger' && $style.iconBoxedDanger,
             color === 'info' && $style.iconBoxedInfo,
             color === 'success' && $style.iconBoxedSuccess,
-            color === 'warning' && $style.iconBoxedWarning,
+            color === 'warning' && $style.iconBoxedWarning
         )"
         :style="{
             fontSize: size && `${size}px`
@@ -22,11 +22,7 @@
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Icon.module.scss';
-
-    defineEmits<{
-        click: [MouseEvent];
-    }>();
+    import $style from '~flux/components/css/component/Icon.module.scss';
 
     defineProps<{
         readonly color?: FluxColor;

package/src/component/FluxBreadcrumb.vue

@@ -0,0 +1,24 @@
+<template>
+    <nav
+        :class="$style.breadcrumb"
+        :aria-label="ariaLabel">
+        <ol :class="$style.breadcrumbList">
+            <slot/>
+        </ol>
+    </nav>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Breadcrumb.module.scss';
+
+    const {ariaLabel = 'Breadcrumb'} = defineProps<{
+        readonly ariaLabel?: string;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

package/src/component/FluxBreadcrumbItem.vue

@@ -0,0 +1,72 @@
+<template>
+    <li :class="$style.breadcrumbItem">
+        <FluxPressable
+            :class="clsx(
+                $style.breadcrumbLink,
+                isCurrent && $style.isCurrent
+            )"
+            :component-type="componentType"
+            :href="href"
+            :to="to"
+            :aria-current="isCurrent ? 'page' : undefined"
+            @click="emit('click', $event)">
+            <FluxIcon
+                v-if="icon"
+                :class="$style.breadcrumbIcon"
+                :name="icon"
+                :size="16"/>
+
+            <span
+                v-if="label || $slots.default"
+                :class="$style.breadcrumbLabel">
+                <slot>{{ label }}</slot>
+            </span>
+        </FluxPressable>
+
+        <FluxIcon
+            aria-hidden="true"
+            :class="$style.breadcrumbSeparator"
+            name="slash-forward"
+            :size="12"/>
+    </li>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, type VNode } from 'vue';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxPressable from './FluxPressable.vue';
+    import $style from '~flux/components/css/component/Breadcrumb.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {href, to} = defineProps<{
+        readonly href?: string;
+        readonly icon?: FluxIconName;
+        readonly label?: string;
+        readonly to?: FluxTo;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const componentType = computed<FluxPressableType>(() => {
+        if (to) {
+            return 'route';
+        }
+
+        if (href) {
+            return 'link';
+        }
+
+        return 'none';
+    });
+
+    const isCurrent = computed(() => componentType.value === 'none');
+</script>

package/src/component/FluxButton.vue

@@ -66,11 +66,11 @@
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { toRef, unref } from 'vue';
-    import { useDisabled } from '$flux/composable';
+    import { useDisabled } from '~flux/components/composable';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/base/Button.module.scss';
+    import $style from '~flux/components/css/component/base/Button.module.scss';
 
     const emit = defineEmits<FluxButtonEmits>();
 

package/src/component/FluxButtonGroup.vue

@@ -7,9 +7,10 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Button.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxButtonStack.vue

@@ -1,17 +1,20 @@
 <template>
-    <FluxStack
+    <FluxFlex
+        :class="isFill ? $style.flexFill : undefined"
         :direction="direction"
         :gap="gap"
-        :is-fill="isFill">
+        wrap="wrap">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     lang="ts"
     setup>
     import type { FluxDirection } from '@flux-ui/types';
-    import FluxStack from './FluxStack.vue';
+    import type { VNode } from 'vue';
+    import FluxFlex from './FluxFlex.vue';
+    import $style from '~flux/components/css/component/Flex.module.scss';
 
     const {
         direction = 'horizontal',
@@ -23,6 +26,6 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>