@flux-ui/components 3.0.0-next.0

package/src/component/FluxFormDateTimeInput.vue

@@ -0,0 +1,120 @@
+<template>
+    <FluxStack
+        :class="$style.formDateTimeInput"
+        direction="horizontal"
+        :gap="15"
+        :aria-disabled="disabled ? true : undefined">
+        <FluxFlyout
+            ref="flyout"
+            :width="300">
+            <template #opener="{open}">
+                <FluxFormInputGroup>
+                    <FluxFormInput
+                        :="{autoFocus, disabled, isReadonly, modelValue, placeholder}"
+                        :class="$style.formDateInput"
+                        :disabled="disabled"
+                        :model-value="localValue"
+                        type="date"
+                        @update:model-value="setDate"
+                        @show-picker="open"/>
+
+                    <FluxSecondaryButton
+                        :disabled="disabled"
+                        icon-leading="calendar"
+                        @click.prevent="open"/>
+                </FluxFormInputGroup>
+            </template>
+
+            <FluxDatePicker
+                :max="max"
+                :min="min"
+                :model-value="localValue"
+                @update:model-value="setDate"/>
+        </FluxFlyout>
+
+        <FluxFormInput
+            :="{disabled, isReadonly, modelValue, placeholder}"
+            :class="$style.formTimeInput"
+            type="time"
+            :model-value="localValue"
+            @update:model-value="setTime"/>
+    </FluxStack>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxAutoCompleteType } from '@flux-ui/types';
+    import { 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 FluxStack from './FluxStack.vue';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    const modelValue = defineModel<DateTime | null>({
+        required: true
+    });
+
+    const {
+        disabled: componentDisabled,
+        isHourOnly
+    } = defineProps<{
+        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);
+
+    function setDate(dateTime: DateTime | object | string | number | null): void {
+        if (!DateTime.isDateTime(dateTime)) {
+            return;
+        }
+
+        const value: DateTime = (localValue.value ?? DateTime.now());
+        localValue.value = value.set({
+            day: dateTime.day,
+            month: dateTime.month,
+            year: dateTime.year
+        });
+    }
+
+    function setTime(dateTime: DateTime | string | number | object | null): void {
+        if (!DateTime.isDateTime(dateTime)) {
+            return;
+        }
+
+        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
+        });
+    }
+
+    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()) {
+            return;
+        }
+
+        modelValue.value = localValue;
+    });
+</script>

package/src/component/FluxFormField.vue

@@ -0,0 +1,98 @@
+<template>
+    <div :class="$style.formField">
+        <label
+            :for="id"
+            :class="$style.formFieldHeader">
+            <span :class="$style.formFieldLabel">
+                {{ label }}
+            </span>
+
+            <span
+                v-if="isOptional"
+                :class="$style.formFieldOptional">
+                ({{ translate('flux.optional') }})
+            </span>
+
+            <span
+                v-if="'value' in slots"
+                :class="$style.formFieldValue">
+                <slot
+                    name="value"
+                    v-bind="{currentLength, error, hint, id, isOptional, label, maxLength}"/>
+            </span>
+        </label>
+
+        <slot v-bind="{id}"/>
+
+        <span
+            v-if="currentLength && maxLength && maxLength > 0"
+            :class="$style.formFieldCounter">
+            {{ currentLength }} / {{ maxLength }}
+        </span>
+
+        <FluxFormFieldAddition
+            v-if="error"
+            icon="circle-exclamation"
+            mode="error"
+            :message="error"/>
+
+        <FluxFormFieldAddition
+            v-if="hint"
+            icon="circle-info"
+            :message="hint"/>
+
+        <slot
+            name="addition"
+            v-bind="{currentLength, error, hint, id, isOptional, label, maxLength}"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { provide, useId } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import { FluxFormFieldInjectionKey } from '$flux/data';
+    import FluxFormFieldAddition from './FluxFormFieldAddition.vue';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    defineProps<{
+        readonly currentLength?: number;
+        readonly error?: string;
+        readonly hint?: string;
+        readonly isOptional?: boolean;
+        readonly label: string;
+        readonly maxLength?: number;
+    }>();
+
+    const slots = defineSlots<{
+        default(props: {
+            readonly id?: string;
+        }): any;
+
+        addition(props: {
+            readonly currentLength?: number;
+            readonly error?: string;
+            readonly hint?: string;
+            readonly isOptional?: boolean;
+            readonly label: string;
+            readonly maxLength?: number;
+        }): any;
+
+        value(props: {
+            readonly currentLength?: number;
+            readonly error?: string;
+            readonly hint?: string;
+            readonly isOptional?: boolean;
+            readonly label: string;
+            readonly maxLength?: number;
+        }): any;
+    }>();
+
+    const id = useId();
+    const translate = useTranslate();
+
+    provide(FluxFormFieldInjectionKey, {
+        id
+    });
+</script>

package/src/component/FluxFormFieldAddition.vue

@@ -0,0 +1,37 @@
+<template>
+    <div
+        :class="clsx(
+            mode === 'error' && $style.formFieldAdditionError,
+            mode === 'hint' && $style.formFieldAdditionHint
+        )"
+        role="alert">
+        <FluxIcon
+            v-if="icon"
+            :class="$style.formFieldAdditionIcon"
+            :name="icon"
+            :size="16"/>
+
+        <span v-if="message">
+            {{ message }}
+        </span>
+
+        <slot/>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts">
+    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';
+
+    const {
+        mode = 'hint'
+    } = defineProps<{
+        readonly icon?: FluxIconName;
+        readonly message?: string;
+        readonly mode?: 'error' | 'hint';
+    }>();
+</script>

package/src/component/FluxFormInput.vue

@@ -0,0 +1,223 @@
+<template>
+    <div
+        :class="clsx(
+            disabled ? $style.formInputDisabled : $style.formInputEnabled,
+            isSecondary && $style.isSecondary
+        )"
+        :aria-disabled="disabled ? true : undefined">
+        <input
+            ref="input"
+            :class="clsx(
+                $style.formInputNative,
+                (!!iconTrailing || type === 'password') && $style.formInputNativeHasIconTrailing,
+                !!iconLeading && $style.formInputNativeHasIconLeading
+            )"
+            :id="id"
+            :autocomplete="autoComplete"
+            :autofocus="autoFocus"
+            :aria-disabled="disabled ? true : undefined"
+            :disabled="disabled"
+            :max="max"
+            :maxlength="maxLength"
+            :min="min"
+            :placeholder="placeholder"
+            :readonly="isReadonly"
+            :step="step"
+            :type="nativeType"
+            :value="localValue"
+            @blur="onBlur()"
+            @focus="onFocus()"
+            @input="onInput"
+            @keydown="onKeyDown">
+
+        <FluxIcon
+            v-if="iconLeading"
+            :class="$style.formInputIconLeading"
+            :name="iconLeading"
+            :size="18"/>
+
+        <FluxIcon
+            v-if="type === 'password'"
+            :class="$style.formInputIconPasswordToggle"
+            :name="nativeType === 'password' ? 'eye' : 'eye-slash'"
+            :size="18"
+            @click="passwordTypeToggle()"/>
+
+        <FluxIcon
+            v-else-if="iconTrailing"
+            :class="$style.formInputIconTrailing"
+            :name="iconTrailing"
+            :size="18"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { unrefTemplateElement } from '@flux-ui/internals';
+    import type { FluxAutoCompleteType, FluxIconName, FluxInputMask, FluxInputType } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { DateTime } from 'luxon';
+    import { ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled, useFormFieldInjection } from '$flux/composable';
+    import { inputMask } from '$flux/data';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    const emit = defineEmits<{
+        blur: [];
+        focus: [];
+        showPicker: [];
+    }>();
+
+    const modelValue = defineModel<object | string | number | null>({
+        default: ''
+    });
+
+    const {
+        autoFocus = false,
+        disabled: componentDisabled,
+        pattern,
+        type = 'text'
+    } = defineProps<{
+        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;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const inputRef = useTemplateRef<HTMLInputElement>('input');
+    const {id} = useFormFieldInjection();
+
+    const localValue = ref<string | null>(null);
+    const nativeType = ref(type);
+
+    function blur(): void {
+        unrefTemplateElement(inputRef)?.blur();
+    }
+
+    function focus(): void {
+        unrefTemplateElement(inputRef)?.focus();
+    }
+
+    function passwordTypeToggle(): void {
+        if (type !== 'password') {
+            return;
+        }
+
+        nativeType.value = unref(nativeType) === 'password' ? 'text' : 'password';
+    }
+
+    function onBlur(): void {
+        emit('blur');
+    }
+
+    function onFocus(): void {
+        emit('focus');
+    }
+
+    function onInput(evt: Event): void {
+        const value = (evt.target as HTMLInputElement).value;
+
+        switch (type) {
+            case 'date':
+            case 'datetime-local':
+            case 'month':
+            case 'time':
+            case 'week':
+                const dateTime = DateTime.fromISO(value);
+
+                if (!dateTime.isValid) {
+                    return;
+                }
+
+                modelValue.value = dateTime;
+                break;
+
+            case 'number':
+                modelValue.value = Number(value);
+                break;
+
+            default:
+                modelValue.value = value;
+                break;
+        }
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (!['date', 'datetime-local', 'month', 'week'].includes(type)) {
+            return;
+        }
+
+        if (evt.key === ' ') {
+            emit('showPicker');
+            evt.preventDefault();
+        }
+    }
+
+    watch([modelValue, () => type], ([modelValue, type]) => {
+        if (!modelValue && modelValue !== 0) {
+            localValue.value = null;
+            return;
+        }
+
+        if (DateTime.isDateTime(modelValue)) {
+            const iso = modelValue.toISO()!;
+
+            switch (type) {
+                case 'date':
+                    localValue.value = iso.substring(0, 10);
+                    break;
+
+                case 'datetime-local':
+                    localValue.value = iso.substring(0, 16);
+                    break;
+
+                case 'time':
+                    localValue.value = iso.substring(11, 16);
+                    break;
+
+                default:
+                    localValue.value = iso;
+                    break;
+            }
+
+            return;
+        }
+
+        localValue.value = modelValue.toString();
+    }, {immediate: true});
+
+    watch([inputRef, () => pattern, localValue], ([input, pattern, value], __, onCleanup) => {
+        if (!input || !pattern) {
+            return;
+        }
+
+        const mask = inputMask[pattern](input);
+
+        if (value) {
+            mask.value = value;
+            localValue.value = mask.value;
+        }
+
+        onCleanup(() => mask.destroy());
+    }, {immediate: true});
+
+    watch(() => type, type => nativeType.value = type);
+
+    defineExpose({
+        blur,
+        focus
+    });
+</script>

package/src/component/FluxFormInputAddition.vue

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

package/src/component/FluxFormInputGroup.vue

@@ -0,0 +1,25 @@
+<template>
+    <div
+        :class="clsx(
+            $style.formInputGroup,
+            isSecondary && $style.isSecondary
+        )"
+        role="textbox">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    defineProps<{
+        readonly isSecondary?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxFormPinInput.vue

@@ -0,0 +1,135 @@
+<template>
+    <fieldset
+        :class="disabled ? $style.pinInputDisabled : $style.pinInputEnabled"
+        :id="id"
+        :style="{
+            '--max-length': maxLength
+        }"
+        :autofocus="autoFocus"
+        :aria-disabled="disabled ? true : undefined">
+        <input
+            v-for="field of maxLength"
+            :key="field"
+            ref="fields"
+            :class="$style.pinInputField"
+            maxlength="1"
+            :autocomplete="field === 1 ? autoComplete : undefined"
+            :autofocus="field === 1 && autoFocus"
+            :disabled="disabled"
+            :tabindex="(field - 1) === modelValue?.length ? 0 : -1"
+            :type="isPrivate ? 'password' : 'text'"
+            :value="modelValue[field - 1]"
+            @focus="onFocus"
+            @input="onInput"
+            @keydown="onKeyDown"
+            @paste="onPaste"/>
+    </fieldset>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxAutoCompleteType } from '@flux-ui/types';
+    import { toRef, unref, useTemplateRef } from 'vue';
+    import { useDisabled, useFormFieldInjection } from '$flux/composable';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    const modelValue = defineModel<string>({
+        default: ''
+    });
+
+    const {
+        autoComplete = 'one-time-code',
+        autoFocus = false,
+        disabled: componentDisabled,
+        maxLength = 6
+    } = defineProps<{
+        readonly autoComplete?: FluxAutoCompleteType;
+        readonly autoFocus?: boolean;
+        readonly disabled?: boolean;
+        readonly isPrivate?: boolean;
+        readonly maxLength?: number;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const {id} = useFormFieldInjection();
+
+    const fieldRefs = useTemplateRef<HTMLInputElement[]>('fields');
+
+    function onFocus(evt: FocusEvent): void {
+        const input = evt.target as HTMLInputElement;
+        requestAnimationFrame(() => input.select());
+    }
+
+    function onInput(): void {
+        const fields = unref(fieldRefs) ?? [];
+        const values = fields
+            .map(f => f.value.trim() === '' ? NaN : Number(f.value))
+            .filter(v => !isNaN(v));
+
+        modelValue.value = values.join('');
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        const input = evt.target as HTMLInputElement;
+        const value = input.value.trim();
+
+        const next = input.nextElementSibling as HTMLInputElement | null;
+        const previous = input.previousElementSibling as HTMLInputElement | null;
+
+        switch (evt.key) {
+            case 'Backspace':
+                value === '' && previous?.focus();
+                break;
+
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                input.selectionStart === 0 && previous?.select();
+                break;
+
+            case 'ArrowDown':
+            case 'ArrowRight':
+                (input.selectionStart === 1 || value === '') && next?.select();
+                break;
+
+            case 'Tab':
+                break;
+
+            case 'v':
+                if (evt.ctrlKey || evt.metaKey) {
+                    break;
+                }
+
+                evt.preventDefault();
+                break;
+
+            default:
+                if (isNaN(Number(evt.key))) {
+                    evt.preventDefault();
+                    break;
+                }
+
+                requestAnimationFrame(() => next?.focus());
+                break;
+        }
+    }
+
+    function onPaste(evt: ClipboardEvent): void {
+        if (!evt.clipboardData) {
+            return;
+        }
+
+        const value = evt.clipboardData.getData('text').replace(/\D/g, '');
+
+        if (value.length !== maxLength) {
+            return;
+        }
+
+        modelValue.value = value;
+
+        requestAnimationFrame(() => {
+            const fields = unref(fieldRefs) ?? [];
+            fields[maxLength - 1].focus();
+        });
+    }
+</script>