@flux-ui/components 3.0.0-next.8 → 3.0.0

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/FluxFormPinInput.vue

@@ -1,22 +1,29 @@
 <template>
     <fieldset
-        :class="disabled ? $style.pinInputDisabled : $style.pinInputEnabled"
+        :class="clsx(
+            disabled ? $style.pinInputDisabled : $style.pinInputEnabled,
+            error && $style.isInvalid
+        )"
         :id="id"
+        :name="name"
         :style="{
             '--max-length': maxLength
         }"
         :autofocus="autoFocus"
-        :aria-disabled="disabled ? true : undefined">
+        :aria-disabled="disabled ? true : undefined"
+        :aria-invalid="error ? true : undefined">
         <input
             v-for="field of maxLength"
             :key="field"
             ref="fields"
             :class="$style.pinInputField"
             maxlength="1"
+            :aria-label="translate('flux.pinDigit', {index: field, total: maxLength})"
             :autocomplete="field === 1 ? autoComplete : undefined"
             :autofocus="field === 1 && autoFocus"
             :disabled="disabled"
-            :tabindex="(field - 1) === modelValue?.length ? 0 : -1"
+            :readonly="isReadonly"
+            :tabindex="(field - 1) === Math.min(modelValue.length, maxLength - 1) ? 0 : -1"
             :type="isPrivate ? 'password' : 'text'"
             :value="modelValue[field - 1]"
             @focus="onFocus"
@@ -29,10 +36,12 @@
 <script
     lang="ts"
     setup>
-    import type { FluxAutoCompleteType } from '@flux-ui/types';
+    import type { FluxAutoCompleteType, FluxFormInputBaseProps } from '@flux-ui/types';
+    import { clsx } from 'clsx';
     import { toRef, unref, useTemplateRef } from 'vue';
-    import { useDisabled, useFormFieldInjection } from '$flux/composable';
-    import $style from '$flux/css/component/Form.module.scss';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<string>({
         default: ''
@@ -43,16 +52,15 @@
         autoFocus = false,
         disabled: componentDisabled,
         maxLength = 6
-    } = defineProps<{
+    } = defineProps<Pick<FluxFormInputBaseProps, 'autoFocus' | 'disabled' | 'error' | 'isLoading' | 'isReadonly' | 'name'> & {
         readonly autoComplete?: FluxAutoCompleteType;
-        readonly autoFocus?: boolean;
-        readonly disabled?: boolean;
         readonly isPrivate?: boolean;
         readonly maxLength?: number;
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
     const {id} = useFormFieldInjection();
+    const translate = useTranslate();
 
     const fieldRefs = useTemplateRef<HTMLInputElement[]>('fields');
 
@@ -64,8 +72,8 @@
     function onInput(): void {
         const fields = unref(fieldRefs) ?? [];
         const values = fields
-            .map(f => f.value.trim() === '' ? NaN : Number(f.value))
-            .filter(v => !isNaN(v));
+            .map(field => field.value.trim())
+            .filter(fieldValue => /^[0-9]$/.test(fieldValue));
 
         modelValue.value = values.join('');
     }
@@ -95,16 +103,12 @@
             case 'Tab':
                 break;
 
-            case 'v':
+            default:
                 if (evt.ctrlKey || evt.metaKey) {
                     break;
                 }
 
-                evt.preventDefault();
-                break;
-
-            default:
-                if (isNaN(Number(evt.key))) {
+                if (!/^[0-9]$/.test(evt.key)) {
                     evt.preventDefault();
                     break;
                 }

package/src/component/FluxFormRangeSlider.vue

@@ -13,6 +13,10 @@
             :percentage-upper="percentageUpper">
             <SliderThumb
                 ref="lowerThumb"
+                :aria-label="translate('flux.lowerBound')"
+                :aria-valuemax="max"
+                :aria-valuemin="min"
+                :aria-valuenow="modelValue[0]"
                 :disabled="disabled"
                 :is-dragging="isDraggingLower"
                 :position="percentageLower"
@@ -22,6 +26,10 @@
 
             <SliderThumb
                 ref="upperThumb"
+                :aria-label="translate('flux.upperBound')"
+                :aria-valuemax="max"
+                :aria-valuemin="min"
+                :aria-valuenow="modelValue[1]"
                 :disabled="disabled"
                 :is-dragging="isDraggingUpper"
                 :position="percentageUpper"
@@ -36,9 +44,11 @@
     lang="ts"
     setup>
     import { clampWithStepPrecision, countDecimals, formatNumber } from '@basmilius/utils';
-    import { computed, ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { addTooltip, removeTooltip, updateTooltip } from '$flux/data';
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
+    import { computed, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { addTooltip, removeTooltip, updateTooltip } from '~flux/components/data';
     import { SliderBase, SliderThumb, SliderTrack } from './primitive';
 
     const modelValue = defineModel<[number, number]>({
@@ -52,10 +62,9 @@
         max = 100,
         min = 0,
         step = 1
-    } = defineProps<{
+    } = defineProps<Pick<FluxFormInputBaseProps, 'disabled' | 'error' | 'isLoading' | 'isReadonly' | 'name'> & {
         formatter?(value: number, decimals?: number): string;
 
-        readonly disabled?: boolean;
         readonly isTicksVisible?: boolean;
         readonly isTooltipDisabled?: boolean;
         readonly max?: number;
@@ -66,6 +75,7 @@
     const disabled = useDisabled(toRef(() => componentDisabled));
     const lowerThumbRef = useTemplateRef('lowerThumb');
     const upperThumbRef = useTemplateRef('upperThumb');
+    const translate = useTranslate();
 
     const isDraggingLower = ref(false);
     const isDraggingUpper = ref(false);
@@ -176,4 +186,11 @@
             tooltipId.value = null;
         }
     });
+
+    onUnmounted(() => {
+        if (tooltipId.value) {
+            removeTooltip(tooltipId.value);
+            tooltipId.value = null;
+        }
+    });
 </script>

package/src/component/FluxFormRow.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/FluxFormSection.vue

@@ -1,8 +1,8 @@
 <template>
     <div :class="$style.formSection">
-        <div :class="$style.formSectionTitle">
+        <h3 :class="$style.formSectionTitle">
             {{ title }}
-        </div>
+        </h3>
 
         <slot/>
     </div>
@@ -11,13 +11,14 @@
 <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';
 
     defineProps<{
         readonly title: string;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxFormSelect.vue

@@ -1,7 +1,14 @@
 <template>
     <SelectBase
         v-model:searchQuery="modelSearch"
+        :aria-invalid="error ? true : undefined"
+        :class="clsx(
+            isCondensed && $formStyle.isCondensed,
+            isSecondary && $formStyle.isSecondary,
+            error && $formStyle.isInvalid
+        )"
         :disabled="disabled"
+        :is-loading="isLoading"
         :is-multiple="isMultiple"
         :is-searchable="isSearchable"
         :options="groups"
@@ -14,11 +21,13 @@
 <script
     lang="ts"
     setup>
-    import type { FluxFormSelectEntry, FluxFormSelectValue } from '@flux-ui/types';
+    import type { FluxFormInputBaseProps, FluxFormSelectEntry, FluxFormSelectValue } from '@flux-ui/types';
+    import { clsx } from 'clsx';
     import { toRef, unref } from 'vue';
-    import { SelectBase } from '$flux/component/primitive';
-    import { useDisabled } from '$flux/composable';
-    import { useFormSelect } from '$flux/composable/private';
+    import { SelectBase } from '~flux/components/component/primitive';
+    import { useDisabled } from '~flux/components/composable';
+    import { useFormSelect } from '~flux/components/composable/private';
+    import $formStyle from '~flux/components/css/component/Form.module.scss';
 
     const modelSearch = defineModel<string>('searchQuery', {
         default: ''
@@ -32,10 +41,8 @@
         disabled: componentDisabled,
         isMultiple,
         options
-    } = defineProps<{
-        readonly disabled?: boolean;
+    } = defineProps<Pick<FluxFormInputBaseProps, 'autoFocus' | 'disabled' | 'error' | 'isCondensed' | 'isLoading' | 'isReadonly' | 'isSecondary' | 'name' | 'placeholder'> & {
         readonly isMultiple?: boolean;
-        readonly placeholder?: string;
         readonly isSearchable?: boolean;
         readonly options: FluxFormSelectEntry[];
     }>();
@@ -44,13 +51,13 @@
     const {groups, selected, values} = useFormSelect(modelValue, isMultiple, toRef(() => options), modelSearch);
 
     function onDeselect(id: string | number | null): void {
-        if (unref(isMultiple)) {
+        if (isMultiple) {
             modelValue.value = unref(values).filter(v => v !== id);
         }
     }
 
     function onSelect(id: string | number | null): void {
-        if (unref(isMultiple)) {
+        if (isMultiple) {
             modelValue.value = [...unref(values), id];
         } else {
             modelValue.value = id;

package/src/component/FluxFormSelectAsync.vue

@@ -1,8 +1,14 @@
 <template>
     <SelectBase
         v-model:search-query="modelSearch"
+        :aria-invalid="error ? true : undefined"
+        :class="clsx(
+            isCondensed && $formStyle.isCondensed,
+            isSecondary && $formStyle.isSecondary,
+            error && $formStyle.isInvalid
+        )"
         :disabled="disabled"
-        :is-loading="isLoading"
+        :is-loading="isLoading || isFetchingLoading"
         :is-multiple="isMultiple"
         is-searchable
         :options="groups"
@@ -16,13 +22,15 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
-    import type { FluxFormSelectEntry, FluxFormSelectValue, FluxFormSelectValueSingle } from '@flux-ui/types';
-    import { computed, ref, toRef, unref, watch } from 'vue';
-    import { SelectBase } from '$flux/component/primitive';
-    import { useDisabled } from '$flux/composable';
-    import { useFormSelect, useLoaded } from '$flux/composable/private';
-    import { isFluxFormSelectOption } from '$flux/data';
+    import { useDebouncedRef, useLoaded } from '@basmilius/common';
+    import type { FluxFormInputBaseProps, FluxFormSelectEntry, FluxFormSelectValue, FluxFormSelectValueSingle } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, ref, type Ref, toRef, unref, watch } from 'vue';
+    import { SelectBase } from '~flux/components/component/primitive';
+    import { useDisabled } from '~flux/components/composable';
+    import { useFormSelect } from '~flux/components/composable/private';
+    import { isFluxFormSelectOption } from '~flux/components/data';
+    import $formStyle from '~flux/components/css/component/Form.module.scss';
 
     const modelSearch = defineModel<string>('searchQuery', {
         default: ''
@@ -38,14 +46,12 @@
         fetchSearch: fetchSearchProp,
         disabled: componentDisabled,
         isMultiple
-    } = defineProps<{
+    } = defineProps<Pick<FluxFormInputBaseProps, 'autoFocus' | 'disabled' | 'error' | 'isCondensed' | 'isLoading' | 'isReadonly' | 'isSecondary' | 'name' | 'placeholder'> & {
         fetchOptions(ids: FluxFormSelectValueSingle[]): Promise<FluxFormSelectEntry[]>;
         fetchRelevant(): Promise<FluxFormSelectEntry[]>;
         fetchSearch(searchQuery: string): Promise<FluxFormSelectEntry[]>;
 
-        readonly disabled?: boolean;
         readonly isMultiple?: boolean;
-        readonly placeholder?: string;
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
@@ -76,12 +82,15 @@
     });
 
     const {groups, selected, values} = useFormSelect(modelValue, isMultiple, options);
-    const {isLoading, loaded} = useLoaded();
-    const debouncedModelSearch = useDebouncedRef(modelSearch, 300);
+    const {isLoading: isFetchingLoading, loaded} = useLoaded();
+    const debouncedModelSearch = useDebouncedRef(modelSearch, 300) as unknown as Ref<string>;
     const fetchOptions = computed(() => loaded(fetchOptionsProp));
     const fetchRelevant = computed(() => loaded(fetchRelevantProp));
     const fetchSearch = computed(() => loaded(fetchSearchProp));
 
+    let selectedGeneration = 0;
+    let visibleGeneration = 0;
+
     function onDeselect(id: string | number | null): void {
         if (isMultiple) {
             modelValue.value = unref(values).filter(v => v !== id);
@@ -89,7 +98,12 @@
     }
 
     async function onOpen(): Promise<void> {
-        visibleOptions.value = await unref(fetchRelevant)();
+        const generation = ++visibleGeneration;
+        const options = await unref(fetchRelevant)();
+
+        if (generation === visibleGeneration) {
+            visibleOptions.value = options;
+        }
     }
 
     function onSelect(id: string | number | null): void {
@@ -101,18 +115,30 @@
     }
 
     watch(values, async values => {
-        if (values.length === 0) {
+        const definedValues = values.filter(value => value !== null && value !== undefined);
+
+        if (definedValues.length === 0) {
+            ++selectedGeneration;
+            selectedOptions.value = [];
             return;
         }
 
-        selectedOptions.value = await unref(fetchOptions)(values);
+        const generation = ++selectedGeneration;
+        const options = await unref(fetchOptions)(definedValues);
+
+        if (generation === selectedGeneration) {
+            selectedOptions.value = options;
+        }
     }, {immediate: true});
 
     watch(debouncedModelSearch, async searchQuery => {
-        if (searchQuery.length > 0) {
-            visibleOptions.value = await unref(fetchSearch)(searchQuery);
-        } else {
-            visibleOptions.value = await unref(fetchRelevant)();
+        const generation = ++visibleGeneration;
+        const options = searchQuery.length > 0
+            ? await unref(fetchSearch)(searchQuery)
+            : await unref(fetchRelevant)();
+
+        if (generation === visibleGeneration) {
+            visibleOptions.value = options;
         }
     });
 </script>