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

package/src/component/FluxFlickeringGrid.vue

@@ -10,7 +10,7 @@
     import { mulberry32 } from '@basmilius/utils';
     import { useInView } from '@flux-ui/internals';
     import { computed, unref, useTemplateRef, watch } from 'vue';
-    import $style from '$flux/css/component/Visual.module.scss';
+    import $style from '~flux/components/css/component/Visual.module.scss';
 
     const {
         color = '#1d4ed8',
@@ -118,7 +118,7 @@
         let {width, height, columns, rows, squares, dpr} = setup(canvas);
 
         const animate = (time: number): void => {
-            const delta = (time - lastTime) / 1000;
+            const delta = lastTime > 0 ? (time - lastTime) / 1000 : 0;
             lastTime = time;
 
             tick(squares, delta);
@@ -131,7 +131,7 @@
         };
 
         window.addEventListener('resize', onResize, {passive: true});
-        requestAnimationFrame(animate);
+        frame = requestAnimationFrame(animate);
 
         onCleanup(() => {
             window.removeEventListener('resize', onResize);

package/src/component/FluxFlyout.vue

@@ -6,12 +6,12 @@
             '--opener-width': `${openerWidth}px`,
             '--pane-mx': `${paneMarginX}px`,
             '--pane-my': `${paneMarginY}px`,
-            '--pane-x': `${paneX - 12}px`,
-            '--pane-y': `${paneY - 12}px`
+            '--pane-x': `${paneX - 30}px`,
+            '--pane-y': `${paneY - 30}px`
         }">
         <slot
             name="opener"
-            v-bind="{close, open, toggle}"/>
+            v-bind="{close, open, toggle, isOpen: isOpen || isOpening || isClosing}"/>
 
         <dialog
             ref="dialog"
@@ -39,13 +39,13 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useFocusTrap } from '@flux-ui/internals';
+    import { isSSR, unrefTemplateElement, useEventListener, 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 { provide, ref, unref, useTemplateRef, type VNode, watch } from 'vue';
+    import { FluxFlyoutInjectionKey } from '~flux/components/data';
     import FluxPane from './FluxPane.vue';
-    import $style from '$flux/css/component/Flyout.module.scss';
+    import $style from '~flux/components/css/component/Flyout.module.scss';
 
     const {
         direction = 'vertical',
@@ -65,13 +65,15 @@
             readonly paneY: number;
             readonly openerWidth: number;
             readonly openerHeight: number;
-        }): any;
+        }): VNode[];
 
         opener(props: {
             close(): void;
             open(): void;
             toggle(): void;
-        }): any;
+
+            readonly isOpen: boolean;
+        }): VNode[];
     }>();
 
     const dialogRef = useTemplateRef('dialog');
@@ -88,19 +90,42 @@
     const paneMarginX = ref(0);
     const paneMarginY = ref(0);
 
+    !isSSR && useEventListener(ref(window), 'resize', () => unref(isOpen) && reposition());
     useFocusTrap(paneRef);
 
+    let closeAnimationEndListener: ((evt: AnimationEvent) => void) | null = null;
+    let openAnimationEndListener: ((evt: AnimationEvent) => void) | null = null;
+
     function close(): void {
         const pane = unrefTemplateElement(paneRef);
 
-        if (!pane) {
+        if (!pane || unref(isClosing)) {
             return;
         }
 
-        pane.addEventListener('animationend', () => {
+        if (openAnimationEndListener) {
+            pane.removeEventListener('animationend', openAnimationEndListener);
+            openAnimationEndListener = null;
+            isOpening.value = false;
+        }
+
+        const listener = (evt: AnimationEvent): void => {
+            if (evt.target !== pane) {
+                return;
+            }
+
+            pane.removeEventListener('animationend', listener);
+
+            if (closeAnimationEndListener === listener) {
+                closeAnimationEndListener = null;
+            }
+
             isClosing.value = false;
             isOpen.value = false;
-        }, {once: true});
+        };
+
+        closeAnimationEndListener = listener;
+        pane.addEventListener('animationend', listener);
 
         isClosing.value = true;
     }
@@ -109,6 +134,14 @@
         const mount = unref(mountRef)!;
         const {width, height} = mount.children[0].getBoundingClientRect();
 
+        const existingPane = unrefTemplateElement(paneRef);
+
+        if (existingPane && closeAnimationEndListener) {
+            existingPane.removeEventListener('animationend', closeAnimationEndListener);
+            closeAnimationEndListener = null;
+        }
+
+        isClosing.value = false;
         isOpen.value = true;
         openerWidth.value = width;
         openerHeight.value = height;
@@ -116,9 +149,26 @@
         requestAnimationFrame(() => {
             const pane = unrefTemplateElement(paneRef)!;
 
-            pane.addEventListener('animationend', () => {
+            if (openAnimationEndListener) {
+                pane.removeEventListener('animationend', openAnimationEndListener);
+            }
+
+            const listener = (evt: AnimationEvent): void => {
+                if (evt.target !== pane) {
+                    return;
+                }
+
+                pane.removeEventListener('animationend', listener);
+
+                if (openAnimationEndListener === listener) {
+                    openAnimationEndListener = null;
+                }
+
                 isOpening.value = false;
-            }, {once: true});
+            };
+
+            openAnimationEndListener = listener;
+            pane.addEventListener('animationend', listener);
 
             isOpening.value = true;
         });
@@ -132,14 +182,14 @@
         const {top, left, width, height} = mount.children[0].getBoundingClientRect();
         const {width: paneWidth, height: paneHeight} = pane.getBoundingClientRect();
 
-        let x, y, mx = 0, my = 0;
+        let x: number, y: number, mx = 0, my = 0;
 
         if (direction === 'horizontal') {
             x = left + width;
             y = top + height / 2 - paneHeight / 2;
             mx = margin;
 
-            if (x + paneWidth > innerWidth - 30) {
+            if (x + paneWidth > innerWidth - 12) {
                 x = left - paneWidth;
                 mx = -mx;
             }
@@ -148,14 +198,14 @@
             y = top + height;
             my = margin;
 
-            if (y + paneHeight > innerHeight - 30) {
+            if (y + paneHeight > innerHeight - 12) {
                 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));
+        paneX.value = Math.max(12, Math.min(innerWidth - paneWidth - 12, x));
+        paneY.value = Math.max(12, Math.min(innerHeight - paneHeight - 12, y));
         paneMarginX.value = mx;
         paneMarginY.value = my;
     }

package/src/component/FluxFocalPointEditor.vue

@@ -56,14 +56,14 @@
     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 { useTranslate } from '~flux/components/composable/private';
+    import { FluxFadeTransition } from '~flux/components/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';
+    import $style from '~flux/components/css/component/FocalPoint.module.scss';
 
     const modelValue = defineModel<[number, number]>({
         required: true
@@ -112,11 +112,11 @@
         }
 
         const {top, left, width, height} = image.getBoundingClientRect();
-        const {pageX, pageY} = evt;
+        const {clientX, clientY} = evt;
 
         dragging.value = [
-            Math.max(0, Math.min(1, (pageX - left) / width)) * 100,
-            Math.max(0, Math.min(1, (pageY - top) / height)) * 100
+            Math.max(0, Math.min(1, (clientX - left) / width)) * 100,
+            Math.max(0, Math.min(1, (clientY - top) / height)) * 100
         ];
     }
 

package/src/component/FluxFocalPointImage.vue

@@ -13,7 +13,7 @@
     setup>
     import type { FluxFocalPointObject } from '@flux-ui/types';
     import { computed } from 'vue';
-    import $style from '$flux/css/component/FocalPoint.module.scss';
+    import $style from '~flux/components/css/component/FocalPoint.module.scss';
 
     const {
         alt = '',

package/src/component/FluxForm.vue

@@ -1,19 +1,20 @@
 <template>
-    <FluxDisabled :disabled="disabled">
-        <form
-            :class="$style.form"
-            :aria-disabled="disabled ? true : undefined"
-            @submit.prevent="onSubmit()">
+    <form
+        :class="$style.form"
+        :aria-disabled="disabled ? true : undefined"
+        @submit.prevent="onSubmit()">
+        <FluxDisabled :disabled="disabled">
             <slot/>
-        </form>
-    </FluxDisabled>
+        </FluxDisabled>
+    </form>
 </template>
 
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import FluxDisabled from './FluxDisabled.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const emit = defineEmits<{
         submit: [];
@@ -26,7 +27,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     function onSubmit(): void {

package/src/component/FluxFormCheckbox.vue

@@ -0,0 +1,123 @@
+<template>
+    <label
+        :class="clsx(
+            $style.formCheckbox,
+            disabled && $style.isDisabled,
+            isReadonlyResolved && $style.isReadonly,
+            errorResolved && $style.isInvalid
+        )"
+        :for="id">
+        <input
+            ref="input"
+            type="checkbox"
+            :class="$style.formCheckboxNative"
+            :id="id"
+            :checked="isChecked"
+            :disabled="disabled"
+            :aria-disabled="disabled ? true : undefined"
+            :aria-readonly="isReadonlyResolved ? true : undefined"
+            :aria-invalid="errorResolved ? true : undefined"
+            @change="onChange"
+            @click="onClick"/>
+
+        <button
+            aria-hidden="true"
+            :class="$style.formCheckboxElement"
+            tabindex="-1">
+            <FluxIcon
+                v-if="isIndeterminate"
+                name="minus"
+                :size="12"/>
+
+            <FluxIcon
+                v-else
+                name="check"
+                :size="12"/>
+        </button>
+
+        <span
+            v-if="label || subLabel"
+            :class="$style.formCheckboxText">
+            <span
+                v-if="label"
+                :class="$style.formCheckboxLabel">
+                {{ label }}
+            </span>
+
+            <span
+                v-if="subLabel"
+                :class="$style.formCheckboxSubLabel">
+                {{ subLabel }}
+            </span>
+        </span>
+    </label>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, toRef, unref, useTemplateRef, watchEffect } from 'vue';
+    import { useDisabled, useFormCheckboxGroupInjection, useFormFieldInjection } from '~flux/components/composable';
+    import type { FluxFormCheckboxGroupValue } from '~flux/components/data';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/Form.module.scss';
+
+    const modelValue = defineModel<boolean | null>({
+        default: false
+    });
+
+    const {
+        disabled: componentDisabled,
+        error,
+        isReadonly,
+        value
+    } = defineProps<Pick<FluxFormInputBaseProps, 'disabled' | 'error' | 'isReadonly'> & {
+        readonly label?: string;
+        readonly subLabel?: string;
+        readonly value?: FluxFormCheckboxGroupValue;
+    }>();
+
+    const group = useFormCheckboxGroupInjection();
+    const inputRef = useTemplateRef('input');
+    const {id} = useFormFieldInjection();
+
+    const isGrouped = computed(() => group !== null && value !== undefined);
+
+    const disabled = useDisabled(toRef(() => componentDisabled || (group?.disabled.value ?? false)));
+    const isReadonlyResolved = computed(() => isReadonly || (group?.isReadonly.value ?? false));
+    const errorResolved = computed(() => unref(isGrouped) ? group?.error.value : error);
+
+    const isChecked = computed(() => unref(isGrouped) ? group!.has(value!) : unref(modelValue) === true);
+    const isIndeterminate = computed(() => !unref(isGrouped) && unref(modelValue) === null);
+
+    function onChange(): void {
+        if (unref(isReadonlyResolved) || unref(disabled)) {
+            return;
+        }
+
+        if (unref(isGrouped)) {
+            group!.toggle(value!);
+            return;
+        }
+
+        modelValue.value = unref(isIndeterminate) ? true : !unref(modelValue);
+    }
+
+    function onClick(evt: MouseEvent): void {
+        if (unref(isReadonlyResolved)) {
+            evt.preventDefault();
+        }
+    }
+
+    watchEffect(() => {
+        const input = unref(inputRef);
+
+        if (!input) {
+            return;
+        }
+
+        input.indeterminate = unref(isIndeterminate);
+    });
+</script>

package/src/component/FluxFormCheckboxGroup.vue

@@ -0,0 +1,57 @@
+<template>
+    <div
+        :class="clsx(
+            $style.formCheckboxGroup,
+            isInline && $style.isInline
+        )"
+        :role="field?.isGroup ? undefined : 'group'"
+        :aria-label="field?.isGroup ? undefined : ariaLabel">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { inject, provide, toRef, unref, type VNode } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { FluxFormCheckboxGroupInjectionKey, FluxFormFieldInjectionKey, type FluxFormCheckboxGroupValue } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Form.module.scss';
+
+    const modelValue = defineModel<FluxFormCheckboxGroupValue[]>({
+        default: () => []
+    });
+
+    const {
+        disabled: componentDisabled,
+        error,
+        isReadonly
+    } = defineProps<Pick<FluxFormInputBaseProps, 'disabled' | 'error' | 'isReadonly'> & {
+        readonly ariaLabel?: string;
+        readonly isInline?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const field = inject(FluxFormFieldInjectionKey, null);
+    const disabled = useDisabled(toRef(() => componentDisabled));
+
+    provide(FluxFormCheckboxGroupInjectionKey, {
+        modelValue,
+        disabled,
+        isReadonly: toRef(() => isReadonly ?? false),
+        error: toRef(() => error),
+        has: value => unref(modelValue).includes(value),
+        toggle(value) {
+            const current = unref(modelValue);
+
+            modelValue.value = current.includes(value)
+                ? current.filter(item => item !== value)
+                : [...current, value];
+        }
+    });
+</script>

package/src/component/FluxFormColumn.vue

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

package/src/component/FluxFormDateInput.vue

@@ -5,7 +5,7 @@
         <template #opener="{open}">
             <FluxFormInputGroup>
                 <FluxFormInput
-                    :="{autoComplete, autoFocus, disabled, isReadonly, modelValue, placeholder}"
+                    :="{autoComplete, autoFocus, error, isCondensed, isLoading, isReadonly, isSecondary, name, placeholder}"
                     v-model="localValue"
                     :class="$style.formDateInput"
                     :disabled="disabled"
@@ -17,7 +17,7 @@
                     @show-picker="open"/>
 
                 <FluxSecondaryButton
-                    :disabled="disabled"
+                    :disabled="disabled || isReadonly"
                     icon-leading="calendar"
                     @click.prevent="open"/>
             </FluxFormInputGroup>
@@ -33,16 +33,17 @@
 <script
     lang="ts"
     setup>
-    import type { FluxAutoCompleteType } from '@flux-ui/types';
+    import type { FluxAutoCompleteType, FluxFormInputBaseProps } from '@flux-ui/types';
     import type { DateTime } from 'luxon';
-    import { ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
+    import { toRef, useTemplateRef } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { useDateFlyout } from '~flux/components/composable/private';
     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';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const emit = defineEmits<{
         blur: [];
@@ -55,20 +56,18 @@
 
     const {
         disabled: componentDisabled
-    } = defineProps<{
+    } = defineProps<FluxFormInputBaseProps & {
         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);
+    const localValue = useDateFlyout(modelValue, flyoutRef, {
+        compareKey: value => value?.toISODate()
+    });
 
     function onBlur(): void {
         emit('blur');
@@ -77,16 +76,4 @@
     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

@@ -3,18 +3,29 @@
         ref="flyout"
         :width="300">
         <template #opener="{open}">
-            <FluxFormInputGroup :aria-disabled="disabled ? true : undefined">
+            <FluxFormInputGroup
+                :aria-disabled="disabled ? true : undefined"
+                :aria-readonly="isReadonly ? true : undefined"
+                :aria-invalid="error ? true : undefined">
                 <div
                     :class="clsx(
                         $style.formDateRangeInput,
-                        disabled && $style.isDisabled
+                        disabled && $style.isDisabled,
+                        isCondensed && $style.isCondensed,
+                        isSecondary && $style.isSecondary,
+                        error && $style.isInvalid
                     )"
                     role="presentation">
-                    <span>{{ label }}</span>
+                    <span v-if="label">{{ label }}</span>
+                    <span
+                        v-else-if="placeholder"
+                        :class="$style.formSelectPlaceholder">
+                        {{ placeholder }}
+                    </span>
                 </div>
 
                 <FluxSecondaryButton
-                    :disabled="disabled"
+                    :disabled="disabled || isReadonly"
                     icon-leading="calendar"
                     @click.prevent="open"/>
             </FluxFormInputGroup>
@@ -31,17 +42,18 @@
 <script
     lang="ts"
     setup>
-    import type { FluxAutoCompleteType } from '@flux-ui/types';
+    import type { FluxFormInputBaseProps } 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 { computed, toRef, unref, useTemplateRef } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { useDateFlyout } from '~flux/components/composable/private';
+    import { createLabelForDateRange } from '~flux/components/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';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<[DateTime, DateTime] | null>({
         required: true
@@ -50,21 +62,16 @@
     const {
         disabled: componentDisabled,
         rangeMode = 'range'
-    } = defineProps<{
-        readonly autoComplete?: FluxAutoCompleteType;
-        readonly autoFocus?: boolean;
-        readonly disabled?: boolean;
-        readonly isReadonly?: boolean;
+    } = defineProps<FluxFormInputBaseProps & {
         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 localValue = useDateFlyout(modelValue, flyoutRef);
 
     const label = computed(() => {
         const value = unref(localValue);
@@ -77,11 +84,4 @@
 
         return createLabelForDateRange(start, end, true);
     });
-
-    watch(localValue, localValue => {
-        unref(flyoutRef)?.close();
-        modelValue.value = localValue;
-    });
-
-    watch(modelValue, modelValue => localValue.value = modelValue, {immediate: true});
 </script>