@flux-ui/components 3.0.0-next.0

package/src/component/FluxFlyout.vue

@@ -0,0 +1,205 @@
+<template>
+    <div
+        ref="mount"
+        :class="$style.flyout"
+        :style="{
+            '--opener-width': `${openerWidth}px`,
+            '--pane-mx': `${paneMarginX}px`,
+            '--pane-my': `${paneMarginY}px`,
+            '--pane-x': `${paneX - 12}px`,
+            '--pane-y': `${paneY - 12}px`
+        }">
+        <slot
+            name="opener"
+            v-bind="{close, open, toggle}"/>
+
+        <dialog
+            ref="dialog"
+            :class="$style.flyoutDialog"
+            @click="onDialogBackdropClick"
+            @keydown.prevent.esc="close">
+            <FluxPane
+                v-if="isOpen"
+                ref="pane"
+                :class="clsx(
+                    $style.flyoutPane,
+                    isAutoWidth && $style.isAutoWidth,
+                    isClosing && $style.isClosing,
+                    isOpening && $style.isOpening
+                )"
+                :style="{
+                    width: `${width}px`
+                }">
+                <slot v-bind="{close, paneX, paneY, openerWidth, openerHeight}"/>
+            </FluxPane>
+        </dialog>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { unrefTemplateElement, useFocusTrap } from '@flux-ui/internals';
+    import type { FluxDirection } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { provide, ref, unref, useTemplateRef, watch } from 'vue';
+    import { FluxFlyoutInjectionKey } from '$flux/data';
+    import FluxPane from './FluxPane.vue';
+    import $style from '$flux/css/component/Flyout.module.scss';
+
+    const {
+        direction = 'vertical',
+        margin = 9
+    } = defineProps<{
+        readonly direction?: FluxDirection;
+        readonly isAutoWidth?: boolean;
+        readonly margin?: number;
+        readonly width?: number | string;
+    }>();
+
+    defineSlots<{
+        default(props: {
+            close(): void;
+
+            readonly paneX: number;
+            readonly paneY: number;
+            readonly openerWidth: number;
+            readonly openerHeight: number;
+        }): any;
+
+        opener(props: {
+            close(): void;
+            open(): void;
+            toggle(): void;
+        }): any;
+    }>();
+
+    const dialogRef = useTemplateRef('dialog');
+    const mountRef = useTemplateRef('mount');
+    const paneRef = useTemplateRef('pane');
+
+    const isClosing = ref(false);
+    const isOpening = ref(false);
+    const isOpen = ref(false);
+    const openerWidth = ref(0);
+    const openerHeight = ref(0);
+    const paneX = ref(0);
+    const paneY = ref(0);
+    const paneMarginX = ref(0);
+    const paneMarginY = ref(0);
+
+    useFocusTrap(paneRef);
+
+    function close(): void {
+        const pane = unrefTemplateElement(paneRef);
+
+        if (!pane) {
+            return;
+        }
+
+        pane.addEventListener('animationend', () => {
+            isClosing.value = false;
+            isOpen.value = false;
+        }, {once: true});
+
+        isClosing.value = true;
+    }
+
+    function open(): void {
+        const mount = unref(mountRef)!;
+        const {width, height} = mount.children[0].getBoundingClientRect();
+
+        isOpen.value = true;
+        openerWidth.value = width;
+        openerHeight.value = height;
+
+        requestAnimationFrame(() => {
+            const pane = unrefTemplateElement(paneRef)!;
+
+            pane.addEventListener('animationend', () => {
+                isOpening.value = false;
+            }, {once: true});
+
+            isOpening.value = true;
+        });
+
+        requestAnimationFrame(reposition);
+    }
+
+    function reposition(): void {
+        const mount = unref(mountRef)!;
+        const pane = unrefTemplateElement(paneRef)!;
+        const {top, left, width, height} = mount.children[0].getBoundingClientRect();
+        const {width: paneWidth, height: paneHeight} = pane.getBoundingClientRect();
+
+        let x, y, mx = 0, my = 0;
+
+        if (direction === 'horizontal') {
+            x = left + width;
+            y = top + height / 2 - paneHeight / 2;
+            mx = margin;
+
+            if (x + paneWidth > innerWidth - 30) {
+                x = left - paneWidth;
+                mx = -mx;
+            }
+        } else {
+            x = left + width / 2 - paneWidth / 2;
+            y = top + height;
+            my = margin;
+
+            if (y + paneHeight > innerHeight - 30) {
+                y = top - paneHeight;
+                my = -my;
+            }
+        }
+
+        paneX.value = Math.max(30, Math.min(innerWidth - paneWidth - 30, x));
+        paneY.value = Math.max(30, Math.min(innerHeight - paneHeight - 30, y));
+        paneMarginX.value = mx;
+        paneMarginY.value = my;
+    }
+
+    function toggle(): void {
+        if (isOpen.value) {
+            close();
+        } else {
+            open();
+        }
+    }
+
+    function onDialogBackdropClick(evt: Event): void {
+        const target = evt.target as HTMLElement;
+
+        if (target.tagName !== 'DIALOG') {
+            return;
+        }
+
+        close();
+    }
+
+    watch(isOpen, (isOpen, _, onCleanup) => {
+        const dialog = unref(dialogRef)!;
+
+        if (isOpen && !dialog.open) {
+            dialog.showModal();
+
+            window.addEventListener('scroll', reposition, {passive: true});
+            onCleanup(() => window.removeEventListener('scroll', reposition));
+        } else if (!isOpen && dialog.open) {
+            dialog.close();
+        }
+    });
+
+    provide(FluxFlyoutInjectionKey, {
+        isClosing,
+        isOpen,
+        isOpening
+    });
+
+    defineExpose({
+        close,
+        open,
+        toggle
+    });
+</script>

package/src/component/FluxFocalPointEditor.vue

@@ -0,0 +1,137 @@
+<template>
+    <FluxPane :style="{'--aspect-ratio': aspectRatio}">
+        <FluxFadeTransition mode="out-in">
+            <FluxPaneBody
+                v-if="isPreviewing"
+                key="preview">
+                <div :class="$style.focalPointPreview">
+                    <div
+                        :class="$style.focalPointPreviewImage"
+                        :style="{
+                            backgroundImage: `url(${src})`,
+                            backgroundPosition: `${focalPointX}% ${focalPointY}%`
+                        }"/>
+                </div>
+            </FluxPaneBody>
+
+            <FluxPaneBody
+                v-else
+                key="editor">
+                <div
+                    :class="$style.focalPointEditor"
+                    @pointerdown="onPointerDown"
+                    @pointermove="onPointerMove">
+                    <img
+                        ref="image"
+                        :class="$style.focalPointEditorImage"
+                        :src="src"
+                        alt=""
+                        @load="onImageLoaded"/>
+
+                    <div
+                        :class="$style.focalPointEditorArea"
+                        :style="{
+                            top: `${focalPointY}%`,
+                            left: `${focalPointX}%`
+                        }"/>
+                </div>
+            </FluxPaneBody>
+        </FluxFadeTransition>
+
+        <FluxPaneFooter>
+            <slot name="footer-before"/>
+
+            <FluxSecondaryButton
+                :label="translate(isPreviewing ? 'flux.previewClose' : 'flux.preview')"
+                @click="onShowPreviewClicked"/>
+
+            <FluxSpacer/>
+
+            <slot name="footer"/>
+        </FluxPaneFooter>
+    </FluxPane>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { computed, onMounted, onUnmounted, ref, unref, useTemplateRef, watch } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import { FluxFadeTransition } from '$flux/transition';
+    import FluxPane from './FluxPane.vue';
+    import FluxPaneBody from './FluxPaneBody.vue';
+    import FluxPaneFooter from './FluxPaneFooter.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import FluxSpacer from './FluxSpacer.vue';
+    import $style from '$flux/css/component/FocalPoint.module.scss';
+
+    const modelValue = defineModel<[number, number]>({
+        required: true
+    });
+
+    const {
+        src
+    } = defineProps<{
+        readonly src: string;
+    }>();
+
+    const imageRef = useTemplateRef('image');
+    const translate = useTranslate();
+
+    const aspectRatio = ref(1);
+    const dragging = ref<[number, number] | null>(null);
+    const isPreviewing = ref(false);
+
+    const focalPointX = computed(() => unref(dragging) ? unref(dragging)![0] : unref(modelValue)[0]);
+    const focalPointY = computed(() => unref(dragging) ? unref(dragging)![1] : unref(modelValue)[1]);
+
+    onMounted(() => window.addEventListener('pointerup', onPointerUp, {passive: true}));
+
+    onUnmounted(() => window.removeEventListener('pointerup', onPointerUp));
+
+    function onImageLoaded(): void {
+        const image = unref(imageRef);
+
+        if (!image) {
+            return;
+        }
+
+        aspectRatio.value = image.width / image.height;
+    }
+
+    function onPointerDown(evt: PointerEvent): void {
+        dragging.value = [0, 0];
+        onPointerMove(evt);
+    }
+
+    function onPointerMove(evt: PointerEvent): void {
+        const image = unref(imageRef);
+
+        if (!image || !dragging.value) {
+            return;
+        }
+
+        const {top, left, width, height} = image.getBoundingClientRect();
+        const {pageX, pageY} = evt;
+
+        dragging.value = [
+            Math.max(0, Math.min(1, (pageX - left) / width)) * 100,
+            Math.max(0, Math.min(1, (pageY - top) / height)) * 100
+        ];
+    }
+
+    function onPointerUp(): void {
+        if (!dragging.value) {
+            return;
+        }
+
+        modelValue.value = dragging.value!;
+        dragging.value = null;
+    }
+
+    function onShowPreviewClicked(): void {
+        isPreviewing.value = !isPreviewing.value;
+    }
+
+    watch(() => src, () => isPreviewing.value = false);
+</script>

package/src/component/FluxFocalPointImage.vue

@@ -0,0 +1,29 @@
+<template>
+    <img
+        :class="$style.focalPointImage"
+        :style="{
+            objectPosition: `${x}% ${y}%`
+        }"
+        :src="src"
+        :alt="alt"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFocalPointObject } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import $style from '$flux/css/component/FocalPoint.module.scss';
+
+    const {
+        alt = '',
+        focalPoint
+    } = defineProps<{
+        readonly focalPoint?: FluxFocalPointObject;
+        readonly alt?: string;
+        readonly src: string;
+    }>();
+
+    const x = computed(() => focalPoint?.x ?? 50);
+    const y = computed(() => focalPoint?.y ?? 50);
+</script>

package/src/component/FluxForm.vue

@@ -0,0 +1,35 @@
+<template>
+    <FluxDisabled :disabled="disabled">
+        <form
+            :class="$style.form"
+            :aria-disabled="disabled ? true : undefined"
+            @submit.prevent="onSubmit()">
+            <slot/>
+        </form>
+    </FluxDisabled>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxDisabled from './FluxDisabled.vue';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    const emit = defineEmits<{
+        submit: [];
+    }>();
+
+    const {
+        disabled = false
+    } = defineProps<{
+        readonly disabled?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    function onSubmit(): void {
+        emit('submit');
+    }
+</script>

package/src/component/FluxFormColumn.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="$style.formColumn">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Form.module.scss';
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxFormDateInput.vue

@@ -0,0 +1,92 @@
+<template>
+    <FluxFlyout
+        ref="flyout"
+        :width="300">
+        <template #opener="{open}">
+            <FluxFormInputGroup>
+                <FluxFormInput
+                    :="{autoComplete, autoFocus, disabled, isReadonly, modelValue, placeholder}"
+                    v-model="localValue"
+                    :class="$style.formDateInput"
+                    :disabled="disabled"
+                    :max="max?.toISO()?.substring(0, 10)"
+                    :min="min?.toISO()?.substring(0, 10)"
+                    type="date"
+                    @blur="onBlur()"
+                    @focus="onFocus()"
+                    @show-picker="open"/>
+
+                <FluxSecondaryButton
+                    :disabled="disabled"
+                    icon-leading="calendar"
+                    @click.prevent="open"/>
+            </FluxFormInputGroup>
+        </template>
+
+        <FluxDatePicker
+            v-model="localValue"
+            :max="max"
+            :min="min"/>
+    </FluxFlyout>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxAutoCompleteType } from '@flux-ui/types';
+    import type { DateTime } from 'luxon';
+    import { ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import FluxDatePicker from './FluxDatePicker.vue';
+    import FluxFlyout from './FluxFlyout.vue';
+    import FluxFormInput from './FluxFormInput.vue';
+    import FluxFormInputGroup from './FluxFormInputGroup.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    const emit = defineEmits<{
+        blur: [];
+        focus: [];
+    }>();
+
+    const modelValue = defineModel<DateTime | null>({
+        default: null
+    });
+
+    const {
+        disabled: componentDisabled
+    } = defineProps<{
+        readonly autoComplete?: FluxAutoCompleteType;
+        readonly autoFocus?: boolean;
+        readonly disabled?: boolean;
+        readonly isReadonly?: boolean;
+        readonly max?: DateTime;
+        readonly min?: DateTime;
+        readonly placeholder?: string;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const flyoutRef = useTemplateRef('flyout');
+
+    const localValue = ref<DateTime | null>(null);
+
+    function onBlur(): void {
+        emit('blur');
+    }
+
+    function onFocus(): void {
+        emit('focus');
+    }
+
+    watch(modelValue, modelValue => localValue.value = modelValue, {immediate: true});
+
+    watch(localValue, localValue => {
+        unref(flyoutRef)?.close();
+
+        if (modelValue.value?.toISODate() === localValue?.toISODate()) {
+            return;
+        }
+
+        modelValue.value = localValue;
+    });
+</script>

package/src/component/FluxFormDateRangeInput.vue

@@ -0,0 +1,87 @@
+<template>
+    <FluxFlyout
+        ref="flyout"
+        :width="300">
+        <template #opener="{open}">
+            <FluxFormInputGroup :aria-disabled="disabled ? true : undefined">
+                <div
+                    :class="clsx(
+                        $style.formDateRangeInput,
+                        disabled && $style.isDisabled
+                    )"
+                    role="presentation">
+                    <span>{{ label }}</span>
+                </div>
+
+                <FluxSecondaryButton
+                    :disabled="disabled"
+                    icon-leading="calendar"
+                    @click.prevent="open"/>
+            </FluxFormInputGroup>
+        </template>
+
+        <FluxDatePicker
+            v-model="localValue"
+            :max="max"
+            :min="min"
+            :range-mode="rangeMode"/>
+    </FluxFlyout>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxAutoCompleteType } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import type { DateTime } from 'luxon';
+    import { computed, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import { createLabelForDateRange } from '$flux/util';
+    import FluxDatePicker from './FluxDatePicker.vue';
+    import FluxFlyout from './FluxFlyout.vue';
+    import FluxFormInputGroup from './FluxFormInputGroup.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    const modelValue = defineModel<[DateTime, DateTime] | null>({
+        required: true
+    });
+
+    const {
+        disabled: componentDisabled,
+        rangeMode = 'range'
+    } = defineProps<{
+        readonly autoComplete?: FluxAutoCompleteType;
+        readonly autoFocus?: boolean;
+        readonly disabled?: boolean;
+        readonly isReadonly?: boolean;
+        readonly max?: DateTime;
+        readonly min?: DateTime;
+        readonly placeholder?: string;
+        readonly rangeMode?: 'range' | 'week' | 'month';
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const flyoutRef = useTemplateRef('flyout');
+
+    const localValue = ref<[DateTime, DateTime] | null>(null);
+
+    const label = computed(() => {
+        const value = unref(localValue);
+
+        if (!value) {
+            return '';
+        }
+
+        const [start, end] = value;
+
+        return createLabelForDateRange(start, end, true);
+    });
+
+    watch(localValue, localValue => {
+        unref(flyoutRef)?.close();
+        modelValue.value = localValue;
+    });
+
+    watch(modelValue, modelValue => localValue.value = modelValue, {immediate: true});
+</script>