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

package/src/component/FluxFormDateTimeInput.vue

@@ -1,7 +1,6 @@
 <template>
-    <FluxStack
+    <FluxFlex
         :class="$style.formDateTimeInput"
-        direction="horizontal"
         :gap="15"
         :aria-disabled="disabled ? true : undefined">
         <FluxFlyout
@@ -10,7 +9,7 @@
             <template #opener="{open}">
                 <FluxFormInputGroup>
                     <FluxFormInput
-                        :="{autoFocus, disabled, isReadonly, modelValue, placeholder}"
+                        :="{autoFocus, error, isCondensed, isLoading, isReadonly, isSecondary, name, placeholder}"
                         :class="$style.formDateInput"
                         :disabled="disabled"
                         :model-value="localValue"
@@ -19,7 +18,7 @@
                         @show-picker="open"/>
 
                     <FluxSecondaryButton
-                        :disabled="disabled"
+                        :disabled="disabled || isReadonly"
                         icon-leading="calendar"
                         @click.prevent="open"/>
                 </FluxFormInputGroup>
@@ -33,28 +32,31 @@
         </FluxFlyout>
 
         <FluxFormInput
-            :="{disabled, isReadonly, modelValue, placeholder}"
+            :="{error, isCondensed, isLoading, isReadonly, isSecondary, placeholder}"
             :class="$style.formTimeInput"
+            :disabled="disabled"
+            :name="name ? `${name}-time` : undefined"
             type="time"
             :model-value="localValue"
             @update:model-value="setTime"/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     lang="ts"
     setup>
-    import type { FluxAutoCompleteType } from '@flux-ui/types';
+    import type { FluxAutoCompleteType, FluxFormInputBaseProps } from '@flux-ui/types';
     import { DateTime } from 'luxon';
-    import { ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
+    import { toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { useDateFlyout } from '~flux/components/composable/private';
     import FluxDatePicker from './FluxDatePicker.vue';
+    import FluxFlex from './FluxFlex.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxFormInput from './FluxFormInput.vue';
     import FluxFormInputGroup from './FluxFormInputGroup.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import FluxStack from './FluxStack.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<DateTime | null>({
         required: true
@@ -63,21 +65,20 @@
     const {
         disabled: componentDisabled,
         isHourOnly
-    } = defineProps<{
+    } = defineProps<FluxFormInputBaseProps & {
         readonly autoComplete?: FluxAutoCompleteType;
-        readonly autoFocus?: boolean;
-        readonly disabled?: boolean;
         readonly isHourOnly?: boolean;
-        readonly isReadonly?: boolean;
         readonly max?: DateTime;
         readonly min?: DateTime;
-        readonly placeholder?: string;
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
     const flyoutRef = useTemplateRef<{ close(): void; }>('flyout');
 
-    const localValue = ref<DateTime | null>(null);
+    const localValue = useDateFlyout(modelValue, flyoutRef, {
+        compareKey: value => value?.toISO(),
+        transformIn: value => isHourOnly ? value?.startOf('hour') ?? null : value
+    });
 
     function setDate(dateTime: DateTime | object | string | number | null): void {
         if (!DateTime.isDateTime(dateTime)) {
@@ -100,21 +101,16 @@
         const value: DateTime = (localValue.value ?? DateTime.now());
         localValue.value = value.set({
             hour: dateTime.hour,
-            minute: unref(isHourOnly) ? 0 : dateTime.minute,
-            second: unref(isHourOnly) ? 0 : dateTime.second
+            minute: isHourOnly ? 0 : dateTime.minute,
+            second: isHourOnly ? 0 : dateTime.second
         });
     }
 
-    watch(() => isHourOnly, () => isHourOnly && (localValue.value = unref(localValue)?.startOf('hour') ?? null), {immediate: true});
-    watch(modelValue, modelValue => localValue.value = isHourOnly ? modelValue?.startOf('hour') ?? null : modelValue, {immediate: true});
-
-    watch(localValue, localValue => {
-        unref(flyoutRef)?.close();
-
-        if (modelValue.value?.toISO() === localValue?.toISO()) {
+    watch(() => isHourOnly, () => {
+        if (!isHourOnly) {
             return;
         }
 
-        modelValue.value = localValue;
-    });
+        localValue.value = unref(localValue)?.startOf('hour') ?? null;
+    }, {immediate: true});
 </script>

package/src/component/FluxFormField.vue

@@ -1,9 +1,16 @@
 <template>
-    <div :class="$style.formField">
-        <label
-            :for="id"
+    <div
+        :class="$style.formField"
+        :role="isGroup ? 'group' : undefined"
+        :aria-labelledby="isGroup && label ? labelId : undefined">
+        <component
+            :is="isGroup ? 'div' : 'label'"
+            :for="isGroup ? undefined : id"
             :class="$style.formFieldHeader">
-            <span :class="$style.formFieldLabel">
+            <span
+                v-if="label"
+                :id="isGroup ? labelId : undefined"
+                :class="$style.formFieldLabel">
                 {{ label }}
             </span>
 
@@ -20,7 +27,7 @@
                     name="value"
                     v-bind="{currentLength, error, hint, id, isOptional, label, maxLength}"/>
             </span>
-        </label>
+        </component>
 
         <slot v-bind="{id}"/>
 
@@ -50,25 +57,28 @@
 <script
     lang="ts"
     setup>
-    import { provide, useId } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { FluxFormFieldInjectionKey } from '$flux/data';
+    import { computed, provide, useId, type VNode } from 'vue';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { FluxFormFieldInjectionKey } from '~flux/components/data';
     import FluxFormFieldAddition from './FluxFormFieldAddition.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
-    defineProps<{
+    const {
+        as = 'field'
+    } = defineProps<{
+        readonly as?: 'field' | 'group';
         readonly currentLength?: number;
         readonly error?: string;
         readonly hint?: string;
         readonly isOptional?: boolean;
-        readonly label: string;
+        readonly label?: string;
         readonly maxLength?: number;
     }>();
 
     const slots = defineSlots<{
         default(props: {
             readonly id?: string;
-        }): any;
+        }): VNode[];
 
         addition(props: {
             readonly currentLength?: number;
@@ -77,7 +87,7 @@
             readonly isOptional?: boolean;
             readonly label: string;
             readonly maxLength?: number;
-        }): any;
+        }): VNode[];
 
         value(props: {
             readonly currentLength?: number;
@@ -86,13 +96,21 @@
             readonly isOptional?: boolean;
             readonly label: string;
             readonly maxLength?: number;
-        }): any;
+        }): VNode[];
     }>();
 
     const id = useId();
+    const labelId = useId();
     const translate = useTranslate();
 
+    const isGroup = computed(() => as === 'group');
+
+    let controlCount = 0;
+
     provide(FluxFormFieldInjectionKey, {
-        id
+        id,
+        labelId,
+        isGroup: as === 'group',
+        registerControl: () => controlCount++ === 0 ? id : `${id}-${controlCount - 1}`
     });
 </script>

package/src/component/FluxFormFieldAddition.vue

@@ -20,12 +20,12 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const {
         mode = 'hint'

package/src/component/FluxFormGrid.vue

@@ -0,0 +1,24 @@
+<template>
+    <div
+        :class="$style.formGrid"
+        :style="{
+            '--columns': columns
+        }">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Form.module.scss';
+
+    defineProps<{
+        readonly columns?: number;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

package/src/component/FluxFormInput.vue

@@ -2,7 +2,9 @@
     <div
         :class="clsx(
             disabled ? $style.formInputDisabled : $style.formInputEnabled,
-            isSecondary && $style.isSecondary
+            isCondensed && $style.isCondensed,
+            isSecondary && $style.isSecondary,
+            error && $style.isInvalid
         )"
         :aria-disabled="disabled ? true : undefined">
         <input
@@ -13,9 +15,11 @@
                 !!iconLeading && $style.formInputNativeHasIconLeading
             )"
             :id="id"
+            :name="name"
             :autocomplete="autoComplete"
             :autofocus="autoFocus"
             :aria-disabled="disabled ? true : undefined"
+            :aria-invalid="error ? true : undefined"
             :disabled="disabled"
             :max="max"
             :maxlength="maxLength"
@@ -48,6 +52,11 @@
             :class="$style.formInputIconTrailing"
             :name="iconTrailing"
             :size="18"/>
+
+        <FluxSpinner
+            v-if="isLoading"
+            :class="$style.formInputIconTrailing"
+            :size="18"/>
     </div>
 </template>
 
@@ -55,14 +64,16 @@
     lang="ts"
     setup>
     import { unrefTemplateElement } from '@flux-ui/internals';
-    import type { FluxAutoCompleteType, FluxIconName, FluxInputMask, FluxInputType } from '@flux-ui/types';
+    import type { FluxAutoCompleteType, FluxFormInputBaseProps, FluxIconName, FluxInputMask, FluxInputType } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import type { InputMask } from 'imask';
     import { DateTime } from 'luxon';
     import { ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled, useFormFieldInjection } from '$flux/composable';
-    import { inputMask } from '$flux/data';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import { inputMask } from '~flux/components/data';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const emit = defineEmits<{
         blur: [];
@@ -77,21 +88,17 @@
     const {
         autoFocus = false,
         disabled: componentDisabled,
+        isReadonly,
         pattern,
         type = 'text'
-    } = defineProps<{
+    } = defineProps<FluxFormInputBaseProps & {
         readonly autoComplete?: FluxAutoCompleteType;
-        readonly autoFocus?: boolean;
         readonly iconLeading?: FluxIconName;
         readonly iconTrailing?: FluxIconName;
-        readonly disabled?: boolean;
-        readonly isReadonly?: boolean;
-        readonly isSecondary?: boolean;
         readonly max?: string | number;
         readonly maxLength?: number;
         readonly min?: string | number;
         readonly pattern?: FluxInputMask;
-        readonly placeholder?: string;
         readonly step?: number;
         readonly type?: FluxInputType;
     }>();
@@ -103,6 +110,8 @@
     const localValue = ref<string | null>(null);
     const nativeType = ref(type);
 
+    let activeMask: InputMask<{}> | null = null;
+
     function blur(): void {
         unrefTemplateElement(inputRef)?.blur();
     }
@@ -136,6 +145,11 @@
             case 'month':
             case 'time':
             case 'week':
+                if (value === '') {
+                    modelValue.value = null;
+                    break;
+                }
+
                 const dateTime = DateTime.fromISO(value);
 
                 if (!dateTime.isValid) {
@@ -146,16 +160,35 @@
                 break;
 
             case 'number':
-                modelValue.value = Number(value);
+                if (value === '') {
+                    modelValue.value = null;
+                    break;
+                }
+
+                const numericValue = Number(value);
+
+                if (Number.isNaN(numericValue)) {
+                    return;
+                }
+
+                modelValue.value = numericValue;
                 break;
 
             default:
+                if (activeMask) {
+                    return;
+                }
+
                 modelValue.value = value;
                 break;
         }
     }
 
     function onKeyDown(evt: KeyboardEvent): void {
+        if (isReadonly) {
+            return;
+        }
+
         if (!['date', 'datetime-local', 'month', 'week'].includes(type)) {
             return;
         }
@@ -199,21 +232,42 @@
         localValue.value = modelValue.toString();
     }, {immediate: true});
 
-    watch([inputRef, () => pattern, localValue], ([input, pattern, value], __, onCleanup) => {
+    watch([inputRef, () => pattern], ([input, pattern], __, onCleanup) => {
         if (!input || !pattern) {
             return;
         }
 
         const mask = inputMask[pattern](input);
+        activeMask = mask;
+
+        const value = unref(localValue);
 
         if (value) {
             mask.value = value;
+            localValue.value = mask.value;
             modelValue.value = mask.value;
         }
 
-        onCleanup(() => mask.destroy());
+        mask.on('accept', () => {
+            localValue.value = mask.value;
+            modelValue.value = mask.value;
+        });
+
+        onCleanup(() => {
+            mask.destroy();
+
+            if (activeMask === mask) {
+                activeMask = null;
+            }
+        });
     }, {immediate: true});
 
+    watch(localValue, value => {
+        if (activeMask && activeMask.value !== (value ?? '')) {
+            activeMask.value = value ?? '';
+        }
+    });
+
     watch(() => type, type => nativeType.value = type);
 
     defineExpose({

package/src/component/FluxFormInputAddition.vue

@@ -17,8 +17,9 @@
     lang="ts"
     setup>
     import type { FluxIconName } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;
@@ -26,6 +27,6 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxFormInputGroup.vue

@@ -2,9 +2,10 @@
     <div
         :class="clsx(
             $style.formInputGroup,
+            isCondensed && $style.isCondensed,
             isSecondary && $style.isSecondary
         )"
-        role="textbox">
+        role="group">
         <slot/>
     </div>
 </template>
@@ -13,13 +14,15 @@
     lang="ts"
     setup>
     import { clsx } from 'clsx';
-    import $style from '$flux/css/component/Form.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     defineProps<{
         readonly isSecondary?: boolean;
+        readonly isCondensed?: boolean;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxFormNumberInput.vue

@@ -0,0 +1,180 @@
+<template>
+    <div
+        :class="clsx(
+            disabled ? $style.formInputDisabled : $style.formInputEnabled,
+            isCondensed && $style.isCondensed,
+            isSecondary && $style.isSecondary,
+            error && $style.isInvalid
+        )"
+        :aria-disabled="disabled ? true : undefined">
+        <input
+            ref="input"
+            :class="clsx($style.formInputNative, $style.formNumberInputNative)"
+            :id="id"
+            :name="name"
+            :autofocus="autoFocus"
+            inputmode="decimal"
+            type="number"
+            :aria-disabled="disabled ? true : undefined"
+            :aria-invalid="error ? true : undefined"
+            :disabled="disabled"
+            :max="max"
+            :min="min"
+            :placeholder="placeholder"
+            :readonly="isReadonly"
+            :step="step"
+            :value="modelValue ?? ''"
+            @blur="onBlur"
+            @focus="onFocus"
+            @input="onInput"
+            @keydown="onKeyDown">
+
+        <span
+            aria-hidden="true"
+            :class="$style.formNumberInputButtons">
+            <button
+                type="button"
+                tabindex="-1"
+                :class="$style.formNumberInputButton"
+                :disabled="disabled || isReadonly || atMax"
+                @click="stepValue(1)">
+                <FluxIcon
+                    name="chevron-up"
+                    :size="12"/>
+            </button>
+
+            <button
+                type="button"
+                tabindex="-1"
+                :class="$style.formNumberInputButton"
+                :disabled="disabled || isReadonly || atMin"
+                @click="stepValue(-1)">
+                <FluxIcon
+                    name="chevron-down"
+                    :size="12"/>
+            </button>
+        </span>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { unrefTemplateElement } from '@flux-ui/internals';
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, toRef, unref, useTemplateRef } from 'vue';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/Form.module.scss';
+
+    const emit = defineEmits<{
+        blur: [];
+        focus: [];
+    }>();
+
+    const modelValue = defineModel<number | null>({
+        default: null
+    });
+
+    const {
+        disabled: componentDisabled,
+        isReadonly,
+        max,
+        min,
+        step = 1
+    } = defineProps<FluxFormInputBaseProps & {
+        readonly max?: number;
+        readonly min?: number;
+        readonly step?: number;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const inputRef = useTemplateRef<HTMLInputElement>('input');
+    const {id} = useFormFieldInjection();
+
+    const atMax = computed(() => max !== undefined && modelValue.value !== null && modelValue.value >= max);
+    const atMin = computed(() => min !== undefined && modelValue.value !== null && modelValue.value <= min);
+
+    function blur(): void {
+        unrefTemplateElement(inputRef)?.blur();
+    }
+
+    function focus(): void {
+        unrefTemplateElement(inputRef)?.focus();
+    }
+
+    function clamp(value: number): number {
+        let result = value;
+
+        if (min !== undefined) {
+            result = Math.max(min, result);
+        }
+
+        if (max !== undefined) {
+            result = Math.min(max, result);
+        }
+
+        return result;
+    }
+
+    function round(value: number): number {
+        const decimals = (step.toString().split('.')[1] ?? '').length;
+
+        return decimals > 0 ? Number(value.toFixed(decimals)) : value;
+    }
+
+    function stepValue(direction: 1 | -1): void {
+        if (unref(disabled) || isReadonly) {
+            return;
+        }
+
+        const base = modelValue.value ?? min ?? 0;
+
+        modelValue.value = clamp(round(base + direction * step));
+    }
+
+    function onBlur(): void {
+        if (modelValue.value !== null) {
+            modelValue.value = clamp(modelValue.value);
+        }
+
+        emit('blur');
+    }
+
+    function onFocus(): void {
+        emit('focus');
+    }
+
+    function onInput(evt: Event): void {
+        const value = (evt.target as HTMLInputElement).value;
+
+        if (value === '') {
+            modelValue.value = null;
+            return;
+        }
+
+        const numeric = Number(value);
+
+        if (Number.isNaN(numeric)) {
+            return;
+        }
+
+        modelValue.value = numeric;
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (evt.key === 'ArrowUp') {
+            stepValue(1);
+            evt.preventDefault();
+        } else if (evt.key === 'ArrowDown') {
+            stepValue(-1);
+            evt.preventDefault();
+        }
+    }
+
+    defineExpose({
+        blur,
+        focus
+    });
+</script>