@flux-ui/components 3.0.0-next.0

package/src/component/FluxGallery.vue

@@ -0,0 +1,99 @@
+<template>
+    <FluxDropZone
+        accept="image/*"
+        :disabled="!isEditable"
+        :is-empty="items && items.length === 0"
+        is-multiple
+        placeholder-icon="image"
+        :placeholder-button="translate('flux.galleryPlaceholderButton')"
+        :placeholder-message="translate('flux.galleryPlaceholderMessage')"
+        :placeholder-title="translate('flux.galleryPlaceholderTitle')"
+        @select-multiple="onFilesSelected">
+        <template #default="{showPicker}">
+            <TransitionGroup
+                :class="$style.gallery"
+                :move-class="$style.galleryMove"
+                tag="div">
+                <template
+                    v-if="items"
+                    v-for="(item, index) of items">
+                    <FluxGalleryItem
+                        v-if="typeof item === 'string'"
+                        :is-deletable="isEditable"
+                        :key="item"
+                        :url="item"
+                        @delete="$emit('delete', index)"/>
+
+                    <FluxGalleryItem
+                        v-else
+                        :is-deletable="isEditable"
+                        :key="item.url"
+                        :focal-point="item"
+                        :url="item.url"
+                        @delete="$emit('delete', index)"/>
+                </template>
+
+                <slot/>
+
+                <FluxGalleryItem
+                    v-for="item of pendingItems"
+                    is-pending
+                    :key="item"
+                    :url="item"/>
+
+                <button
+                    v-if="isEditable"
+                    key="gallery-add"
+                    :class="$style.galleryAdd"
+                    type="button"
+                    @click="showPicker()">
+                    <FluxIcon name="plus"/>
+                </button>
+            </TransitionGroup>
+        </template>
+    </FluxDropZone>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFocalPointObject } from '@flux-ui/types';
+    import { useTranslate } from '$flux/composable/private';
+    import FluxDropZone from './FluxDropZone.vue';
+    import FluxGalleryItem from './FluxGalleryItem.vue';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Gallery.module.scss';
+
+    const emit = defineEmits<{
+        delete: [number];
+        upload: [File[]];
+    }>();
+
+    defineProps<{
+        readonly isEditable?: boolean;
+        readonly items?: (string | (FluxFocalPointObject & { readonly url: string; }))[];
+        readonly pendingItems?: string[];
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const translate = useTranslate();
+
+    function onFilesSelected(files: FileList): void {
+        const images: File[] = [];
+
+        for (let i = 0; i < files.length; ++i) {
+            const file = files.item(i);
+
+            if (!file || !file.type.startsWith('image/')) {
+                continue;
+            }
+
+            images.push(file);
+        }
+
+        emit('upload', images);
+    }
+</script>

package/src/component/FluxGalleryItem.vue

@@ -0,0 +1,49 @@
+<template>
+    <div
+        :class="$style.galleryItem"
+        @mouseenter.capture="isDeleteVisible = true"
+        @mouseout.capture="isDeleteVisible = false">
+        <FluxFocalPointImage
+            :class="$style.galleryItemImage"
+            :focal-point="focalPoint"
+            :src="url"/>
+
+        <FluxRemove
+            v-if="isDeletable"
+            :is-hidden="!isDeleteVisible"
+            tabindex="-1"
+            @click="emit('delete')"/>
+
+        <div
+            v-if="isPending"
+            :class="$style.galleryItemLoader">
+            <FluxSpinner :size="24"/>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFocalPointObject } from '@flux-ui/types';
+    import { ref } from 'vue';
+    import FluxFocalPointImage from './FluxFocalPointImage.vue';
+    import FluxRemove from './FluxRemove.vue';
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '$flux/css/component/Gallery.module.scss';
+
+    const emit = defineEmits<{
+        delete: [];
+    }>();
+
+    const {
+        focalPoint
+    } = defineProps<{
+        readonly focalPoint?: FluxFocalPointObject;
+        readonly isDeletable?: boolean;
+        readonly isPending?: boolean;
+        readonly url: string;
+    }>();
+
+    const isDeleteVisible = ref(false);
+</script>

package/src/component/FluxGrid.vue

@@ -0,0 +1,28 @@
+<template>
+    <div
+        :class="$style.grid"
+        :style="{
+            '--gap': `${gap}px`,
+            '--columns': columns
+        }">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Grid.module.scss';
+
+    const {
+        columns = 12,
+        gap = 30
+    } = defineProps<{
+        readonly columns?: number;
+        readonly gap?: number;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxGridColumn.vue

@@ -0,0 +1,31 @@
+<template>
+    <div
+        :class="$style.gridColumn"
+        :style="{
+            '--xs': xs ?? 12,
+            '--sm': sm ?? xs ?? 12,
+            '--md': md ?? sm ?? xs ?? 12,
+            '--lg': lg ?? md ?? sm ?? xs ?? 12,
+            '--xl': xl ?? lg ?? md ?? sm ?? xs ?? 12
+        }">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Grid.module.scss';
+
+    defineProps<{
+        readonly xs?: number;
+        readonly sm?: number;
+        readonly md?: number;
+        readonly lg?: number;
+        readonly xl?: number;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxGridPattern.vue

@@ -0,0 +1,60 @@
+<template>
+    <svg
+        ref="svg"
+        :class="$style.gridPattern">
+        <defs>
+            <pattern
+                :id="id"
+                :width="width"
+                :height="height"
+                patternUnits="userSpaceOnUse"
+                :x="-1"
+                :y="-1">
+                <path
+                    :d="`M.5 ${height}V.5H${width}`"
+                    fill="none"
+                    :stroke-dasharray="strokeDasharray"/>
+            </pattern>
+        </defs>
+
+        <rect
+            width="100%"
+            height="100%"
+            stroke-width="0"
+            :fill="`url(#${id})`"/>
+
+        <svg
+            v-if="squares"
+            style="overflow: visible;">
+            <rect
+                v-for="[x, y] of squares"
+                :key="`${x}-${y}`"
+                :width="width - 1"
+                :height="height - 1"
+                :x="x * width"
+                :y="y * height"
+                stroke-width="0"/>
+        </svg>
+    </svg>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useId } from 'vue';
+    import $style from '$flux/css/component/Visual.module.scss';
+
+    const {
+        width = 42,
+        height = 42,
+        strokeDasharray = 0,
+        squares
+    } = defineProps<{
+        readonly width?: number;
+        readonly height?: number;
+        readonly strokeDasharray?: number | string;
+        readonly squares?: Array<[x: number, y: number]>;
+    }>();
+
+    const id = useId();
+</script>

package/src/component/FluxIcon.vue

@@ -0,0 +1,79 @@
+<template>
+    <svg
+        v-if="definition"
+        :viewBox="`0 0 ${definition.width} ${definition.height}`"
+        :class="$style.fontAwesomeIcon"
+        :style="{
+            fontSize: size && `${size}px`,
+            scale: definition.scale > 1 ? definition.scale : undefined
+        }"
+        focusable="false"
+        role="img"
+        aria-hidden="true"
+        @click="onClick">
+        <path
+            v-for="path in definition.paths"
+            :d="path"
+            fill="currentColor"/>
+    </svg>
+
+    <i
+        v-else-if="name"
+        :class="$style.materialSymbolIcon"
+        :style="{
+            fontSize: size && `${size}px`
+        }"
+        role="img"
+        aria-hidden="true"
+        @click="onClick">
+        {{ name }}
+    </i>
+
+    <i
+        v-else
+        :class="$style.icon"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { warn } from '@flux-ui/internals';
+    import type { FluxIconName } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import { iconRegistry } from '$flux/data';
+    import $style from '$flux/css/component/Icon.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {
+        name
+    } = defineProps<{
+        readonly size?: number | string;
+        readonly name?: FluxIconName;
+    }>();
+
+    const definition = computed(() => {
+        if (!name) {
+            return null;
+        }
+
+        const icon = iconRegistry[name];
+
+        if (!icon) {
+            warn(`Unknown icon: ${name}`);
+
+            return null;
+        }
+
+        return {
+            width: icon[0],
+            height: icon[1],
+            paths: (Array.isArray(icon[4]) ? icon[4] : [icon[4]]) as string[],
+            scale: Math.max(1, icon[0] / 512)
+        };
+    });
+
+    const onClick = (evt: MouseEvent) => emit('click', evt);
+</script>

package/src/component/FluxInfo.vue

@@ -0,0 +1,28 @@
+<template>
+    <div :class="$style.info">
+        <FluxIcon
+            v-if="icon"
+            :class="$style.infoIcon"
+            :name="icon"/>
+
+        <div :class="$style.infoBody">
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts">
+    import type { FluxIconName } from '@flux-ui/types';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Info.module.scss';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxInfoStack.vue

@@ -0,0 +1,17 @@
+<template>
+    <FluxStack
+        direction="vertical"
+        :gap="21">
+        <slot/>
+    </FluxStack>
+</template>
+
+<script
+    setup
+    lang="ts">
+    import FluxStack from './FluxStack.vue';
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxLegend.vue

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

package/src/component/FluxLink.vue

@@ -0,0 +1,35 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconLeading: icon, iconTrailing: 'arrow-right-long', isFilled, label, href, rel, target, to}"
+        :css-class="$style.linkButton"
+        :css-class-icon="$style.linkButtonIcon"
+        :css-class-label="$style.linkButtonLabel"
+        @click="emit('click', $event)"
+        @mouseenter="emit('mouseenter', $event)"
+        @mouseleave="emit('mouseleave', $event)">
+        <template
+            v-for="slot of SLOTS"
+            #[slot]>
+            <slot :name="slot"/>
+        </template>
+    </FluxButton>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots, FluxIconName } from '@flux-ui/types';
+    import FluxButton, { SLOTS } from './FluxButton.vue';
+    import $style from '$flux/css/component/Button.module.scss';
+
+    const emit = defineEmits<FluxButtonEmits>();
+
+    const {
+        type = 'button'
+    } = defineProps<FluxButtonProps & {
+        readonly icon?: FluxIconName;
+        readonly label?: string;
+    }>();
+
+    defineSlots<FluxButtonSlots>();
+</script>

package/src/component/FluxMenu.vue

@@ -0,0 +1,31 @@
+<template>
+    <nav
+        ref="element"
+        :class="isLarge ? $style.menuLarge : $style.menuNormal"
+        role="menu"
+        aria-orientation="vertical">
+        <slot/>
+    </nav>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useFocusZone } from '@flux-ui/internals';
+    import { useTemplateRef } from 'vue';
+    import $style from '$flux/css/component/Menu.module.scss';
+
+    defineProps<{
+        readonly isLarge?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const elementRef = useTemplateRef('element');
+
+    useFocusZone(elementRef, {
+        direction: 'vertical'
+    });
+</script>

package/src/component/FluxMenuGroup.vue

@@ -0,0 +1,21 @@
+<template>
+    <div
+        :class="isHorizontal ? $style.menuGroupHorizontal : $style.menuGroupVertical"
+        role="group">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Menu.module.scss';
+
+    defineProps<{
+        readonly isHorizontal?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxMenuItem.vue

@@ -0,0 +1,84 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconLeading, iconTrailing, isLoading, label, href, rel, target, to}"
+        :css-class="$style.menuItem"
+        :css-class-icon="$style.menuItemIcon"
+        :css-class-label="$style.menuItemLabel"
+        is-filled
+        :role="isSelectable ? 'menuitemradio' : 'menuitem'"
+        :class="{
+            [$style.menuItemActive]: isActive,
+            [$style.menuItemDestructive]: isDestructive,
+            [$style.menuItemHighlighted]: isHighlighted,
+            [$style.menuItemIndented]: isIndented,
+            [$style.menuItemSelected]: isSelectable && isSelected
+        }"
+        :aria-checked="isSelectable ? isSelected : undefined"
+        @click="$emit('click', $event)">
+        <template
+            v-if="isSelectable && (!iconLeading || isSelected)"
+            #iconLeading>
+            <FluxIcon
+                :class="$style.menuItemSelectableIcon"
+                :name="isSelected ? 'circle-check' : undefined"/>
+        </template>
+
+        <template
+            v-else-if="imageSrc"
+            #iconLeading>
+            <img
+                :class="$style.menuItemImage"
+                :src="imageSrc"
+                alt=""/>
+        </template>
+
+        <template
+            v-if="command || commandIcon || commandLoading"
+            #after>
+            <FluxSpinner
+                v-if="commandLoading"
+                :class="$style.menuItemCommandIcon"
+                :size="16"/>
+
+            <template v-else>
+                <kbd
+                    v-if="command"
+                    :class="$style.menuItemCommand">
+                    {{ command }}
+                </kbd>
+
+                <FluxIcon
+                    v-if="commandIcon"
+                    :class="$style.menuItemCommandIcon"
+                    :name="commandIcon"/>
+            </template>
+        </template>
+    </FluxButton>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxButtonProps, FluxIconName } from '@flux-ui/types';
+    import FluxButton from './FluxButton.vue';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '$flux/css/component/Menu.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+
+    const {
+        type = 'button'
+    } = defineProps<Omit<FluxButtonProps, 'isFilled' | 'isSubmit' | 'size'> & {
+        readonly command?: string;
+        readonly commandIcon?: FluxIconName;
+        readonly commandLoading?: boolean;
+        readonly imageSrc?: string;
+        readonly isActive?: boolean;
+        readonly isDestructive?: boolean;
+        readonly isHighlighted?: boolean;
+        readonly isIndented?: boolean;
+        readonly isSelectable?: boolean;
+        readonly isSelected?: boolean;
+    }>();
+</script>

package/src/component/FluxMenuOptions.vue

@@ -0,0 +1,38 @@
+<template>
+    <FluxMenuGroup :is-horizontal="isHorizontal">
+        <template v-for="item in items">
+            <component :is="item"/>
+        </template>
+    </FluxMenuGroup>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    import { cloneVNode, computed, unref, VNode } from 'vue';
+    import FluxMenuGroup from './FluxMenuGroup.vue';
+
+    const modelValue = defineModel<number>({
+        required: true
+    });
+
+    const {
+        mode = 'highlight'
+    } = defineProps<{
+        readonly isHorizontal?: boolean;
+        readonly mode?: 'highlight' | 'select';
+    }>();
+
+    const slots = defineSlots<{
+        default(): any;
+    }>();
+
+    const items = computed(() => flattenVNodeTree(slots.default())
+        .map((item: VNode, index: number) => cloneVNode(item, {
+            isHighlighted: mode === 'highlight' && unref(modelValue) === index,
+            isSelectable: mode === 'select',
+            isSelected: mode === 'select' && unref(modelValue) === index,
+            onClick: () => modelValue.value = index
+        })));
+</script>

package/src/component/FluxMenuSubHeader.vue

@@ -0,0 +1,33 @@
+<template>
+    <div
+        :class="$style.menuSubHeader"
+        role="presentation">
+        <FluxIcon
+            v-if="iconLeading"
+            :class="$style.menuSubHeaderIcon"
+            :name="iconLeading"/>
+
+        <span :class="$style.menuSubHeaderLabel">
+            {{ label }}
+        </span>
+
+        <FluxIcon
+            v-if="iconTrailing"
+            :class="$style.menuSubHeaderIcon"
+            :name="iconTrailing"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Menu.module.scss';
+
+    defineProps<{
+        readonly iconLeading?: FluxIconName;
+        readonly iconTrailing?: FluxIconName;
+        readonly label: string;
+    }>();
+</script>

package/src/component/FluxMenuTitle.vue

@@ -0,0 +1,17 @@
+<template>
+    <div
+        :class="$style.menuTitle"
+        role="presentation">
+        {{ title }}
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Menu.module.scss';
+
+    defineProps<{
+        readonly title: string;
+    }>();
+</script>