@flux-ui/components 3.0.0-next.35 → 3.0.0-next.39

package/src/component/FluxFormDateTimeInput.vue

@@ -10,7 +10,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 +19,7 @@
                         @show-picker="open"/>
 
                     <FluxSecondaryButton
-                        :disabled="disabled"
+                        :disabled="disabled || isReadonly"
                         icon-leading="calendar"
                         @click.prevent="open"/>
                 </FluxFormInputGroup>
@@ -33,8 +33,10 @@
         </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"/>
@@ -44,10 +46,11 @@
 <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 { toRef, unref, useTemplateRef, watch } from 'vue';
     import { useDisabled } from '$flux/composable';
+    import { useDateFlyout } from '$flux/composable/private';
     import FluxDatePicker from './FluxDatePicker.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxFormInput from './FluxFormInput.vue';
@@ -63,21 +66,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)) {
@@ -105,16 +107,11 @@
         });
     }
 
-    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

@@ -50,7 +50,7 @@
 <script
     lang="ts"
     setup>
-    import { provide, useId } from 'vue';
+    import { provide, useId, type VNode } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { FluxFormFieldInjectionKey } from '$flux/data';
     import FluxFormFieldAddition from './FluxFormFieldAddition.vue';
@@ -68,7 +68,7 @@
     const slots = defineSlots<{
         default(props: {
             readonly id?: string;
-        }): any;
+        }): VNode[];
 
         addition(props: {
             readonly currentLength?: number;
@@ -77,7 +77,7 @@
             readonly isOptional?: boolean;
             readonly label: string;
             readonly maxLength?: number;
-        }): any;
+        }): VNode[];
 
         value(props: {
             readonly currentLength?: number;
@@ -86,7 +86,7 @@
             readonly isOptional?: boolean;
             readonly label: string;
             readonly maxLength?: number;
-        }): any;
+        }): VNode[];
     }>();
 
     const id = useId();

package/src/component/FluxFormGrid.vue

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

package/src/component/FluxFormInput.vue

@@ -3,7 +3,8 @@
         :class="clsx(
             disabled ? $style.formInputDisabled : $style.formInputEnabled,
             isCondensed && $style.isCondensed,
-            isSecondary && $style.isSecondary
+            isSecondary && $style.isSecondary,
+            error && $style.isInvalid
         )"
         :aria-disabled="disabled ? true : undefined">
         <input
@@ -14,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"
@@ -61,7 +64,7 @@
     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 { DateTime } from 'luxon';
     import { ref, toRef, unref, useTemplateRef, watch } from 'vue';
@@ -84,23 +87,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 isCondensed?: boolean;
-        readonly isLoading?: 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;
     }>();
@@ -165,6 +162,10 @@
     }
 
     function onKeyDown(evt: KeyboardEvent): void {
+        if (isReadonly) {
+            return;
+        }
+
         if (!['date', 'datetime-local', 'month', 'week'].includes(type)) {
             return;
         }

package/src/component/FluxFormInputAddition.vue

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

package/src/component/FluxFormInputGroup.vue

@@ -5,7 +5,7 @@
             isCondensed && $style.isCondensed,
             isSecondary && $style.isSecondary
         )"
-        role="textbox">
+        role="group">
         <slot/>
     </div>
 </template>
@@ -13,6 +13,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import { clsx } from 'clsx';
     import $style from '$flux/css/component/Form.module.scss';
 
@@ -22,6 +23,6 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxFormPinInput.vue

@@ -1,21 +1,28 @@
 <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"
+            :readonly="isReadonly"
             :tabindex="(field - 1) === modelValue?.length ? 0 : -1"
             :type="isPrivate ? 'password' : 'text'"
             :value="modelValue[field - 1]"
@@ -29,9 +36,11 @@
 <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 { useTranslate } from '$flux/composable/private';
     import $style from '$flux/css/component/Form.module.scss';
 
     const modelValue = defineModel<string>({
@@ -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');
 

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,8 +44,10 @@
     lang="ts"
     setup>
     import { clampWithStepPrecision, countDecimals, formatNumber } from '@basmilius/utils';
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
     import { computed, ref, toRef, unref, useTemplateRef, watch } from 'vue';
     import { useDisabled } from '$flux/composable';
+    import { useTranslate } from '$flux/composable/private';
     import { addTooltip, removeTooltip, updateTooltip } from '$flux/data';
     import { SliderBase, SliderThumb, SliderTrack } from './primitive';
 
@@ -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);

package/src/component/FluxFormRow.vue

@@ -7,9 +7,10 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import $style from '$flux/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,6 +11,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import $style from '$flux/css/component/Form.module.scss';
 
     defineProps<{
@@ -18,6 +19,6 @@
     }>();
 
     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 $formStyle from '$flux/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[];
     }>();

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"
@@ -17,12 +23,14 @@
     lang="ts"
     setup>
     import { useDebouncedRef, useLoaded } from '@basmilius/common';
-    import type { FluxFormSelectEntry, FluxFormSelectValue, FluxFormSelectValueSingle } from '@flux-ui/types';
-    import { computed, ref, toRef, unref, watch } from 'vue';
+    import type { FluxFormInputBaseProps, FluxFormSelectEntry, FluxFormSelectValue, FluxFormSelectValueSingle } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, type Ref, ref, toRef, unref, watch } from 'vue';
     import { SelectBase } from '$flux/component/primitive';
     import { useDisabled } from '$flux/composable';
     import { useFormSelect } from '$flux/composable/private';
     import { isFluxFormSelectOption } from '$flux/data';
+    import $formStyle from '$flux/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,8 +82,8 @@
     });
 
     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));

package/src/component/FluxFormSlider.vue

@@ -13,6 +13,10 @@
             :percentage-upper="percentage">
             <SliderThumb
                 ref="thumb"
+                :aria-label="ariaLabel"
+                :aria-valuemax="max"
+                :aria-valuemin="min"
+                :aria-valuenow="modelValue"
                 :disabled="disabled"
                 :is-dragging="isDragging"
                 :position="percentage"
@@ -26,6 +30,7 @@
     lang="ts"
     setup>
     import { clampWithStepPrecision, countDecimals, formatNumber } from '@basmilius/utils';
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
     import { computed, ref, toRef, unref, useTemplateRef, watch, watchEffect } from 'vue';
     import { useDisabled } from '$flux/composable';
     import { addTooltip, removeTooltip, updateTooltip } from '$flux/data';
@@ -36,16 +41,17 @@
     });
 
     const {
+        ariaLabel,
         formatter = formatNumber,
         disabled: componentDisabled = false,
         isTooltipDisabled,
         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 ariaLabel?: string;
         readonly isTicksVisible?: boolean;
         readonly isTooltipDisabled?: boolean;
         readonly max?: number;

package/src/component/FluxFormTextArea.vue

@@ -2,8 +2,14 @@
     <textarea
         v-model="modelValue"
         ref="input"
-        :class="disabled ? $style.formTextAreaDisabled : $style.formTextAreaEnabled"
+        :class="clsx(
+            disabled ? $style.formTextAreaDisabled : $style.formTextAreaEnabled,
+            isCondensed && $style.isCondensed,
+            isSecondary && $style.isSecondary,
+            error && $style.isInvalid
+        )"
         :id="id"
+        :name="name"
         :autocomplete="autoComplete"
         :autofocus="autoFocus"
         :disabled="disabled"
@@ -14,6 +20,8 @@
             '--rows': rows
         }"
         :aria-disabled="disabled ? true : undefined"
+        :aria-readonly="isReadonly || undefined"
+        :aria-invalid="error ? true : undefined"
         @blur="emit('blur')"
         @focus="emit('focus')"/>
 </template>
@@ -21,7 +29,8 @@
 <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 } from 'vue';
     import { useDisabled, useFormFieldInjection } from '$flux/composable';
     import $style from '$flux/css/component/Form.module.scss';
@@ -39,13 +48,9 @@
         autoFocus = false,
         disabled: componentDisabled,
         rows = 3
-    } = defineProps<{
+    } = defineProps<FluxFormInputBaseProps & {
         readonly autoComplete?: FluxAutoCompleteType;
-        readonly autoFocus?: boolean;
-        readonly disabled?: boolean;
-        readonly isReadonly?: boolean;
         readonly maxLength?: number;
-        readonly placeholder?: string;
         readonly rows?: number;
     }>();