@flux-ui/components 3.0.0-next.5 → 3.0.0-next.51

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,25 +41,23 @@
         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[];
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
-    const {groups, selected, values} = useFormSelect(modelValue, isMultiple, options, modelSearch);
+    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 { useDebouncedRef, useLoaded } from '@basmilius/common';
+    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, useLoaded } from '$flux/composable/private';
+    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;
@@ -115,7 +121,7 @@
         localValue.value = (unref(modelValue) - min) / (max - min);
     });
 
-    watch(([() => max, () => min, localValue, () => step]), () => {
+    watch([() => max, () => min, localValue, () => step], () => {
         const value = clampWithStepPrecision(unref(localValue), min, max, step);
         modelValue.value = value;
         percentage.value = (value - min) / (max - min);

package/src/component/FluxFormTextArea.vue

@@ -2,17 +2,26 @@
     <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"
+        :readonly="isReadonly"
         :maxlength="maxLength"
         :placeholder="placeholder"
         :style="{
             '--rows': rows
         }"
         :aria-disabled="disabled ? true : undefined"
+        :aria-readonly="isReadonly || undefined"
+        :aria-invalid="error ? true : undefined"
         @blur="emit('blur')"
         @focus="emit('focus')"/>
 </template>
@@ -20,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';
@@ -38,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;
     }>();