@flux-ui/components 3.0.0-next.0

package/src/component/FluxFormRangeSlider.vue

@@ -0,0 +1,179 @@
+<template>
+    <SliderBase
+        :disabled="disabled"
+        :is-dragging="isDraggingLower || isDraggingUpper"
+        :is-ticks-visible="isTicksVisible"
+        :max="max"
+        :min="min"
+        :step="step"
+        @dragging="onDragging"
+        @update="onUpdate">
+        <SliderTrack
+            :percentage-lower="percentageLower"
+            :percentage-upper="percentageUpper">
+            <SliderThumb
+                ref="lowerThumb"
+                :disabled="disabled"
+                :is-dragging="isDraggingLower"
+                :position="percentageLower"
+                @grab="!disabled && (isDraggingLower = true)"
+                @decrement="onDecrement('lower')"
+                @increment="onIncrement('lower')"/>
+
+            <SliderThumb
+                ref="upperThumb"
+                :disabled="disabled"
+                :is-dragging="isDraggingUpper"
+                :position="percentageUpper"
+                @grab="!disabled && (isDraggingUpper = true)"
+                @decrement="onDecrement('upper')"
+                @increment="onIncrement('upper')"/>
+        </SliderTrack>
+    </SliderBase>
+</template>
+
+<script
+    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 { SliderBase, SliderThumb, SliderTrack } from './primitive';
+
+    const modelValue = defineModel<[number, number]>({
+        required: true
+    });
+
+    const {
+        formatter = formatNumber,
+        disabled: componentDisabled,
+        isTooltipDisabled,
+        max = 100,
+        min = 0,
+        step = 1
+    } = defineProps<{
+        formatter?(value: number, decimals?: number): string;
+
+        readonly disabled?: boolean;
+        readonly isTicksVisible?: boolean;
+        readonly isTooltipDisabled?: boolean;
+        readonly max?: number;
+        readonly min?: number;
+        readonly step?: number;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const lowerThumbRef = useTemplateRef('lowerThumb');
+    const upperThumbRef = useTemplateRef('upperThumb');
+
+    const isDraggingLower = ref(false);
+    const isDraggingUpper = ref(false);
+    const percentageLower = ref(0);
+    const percentageUpper = ref(0);
+    const lowerValue = ref(0);
+    const upperValue = ref(0);
+    const tooltipId = ref<number | null>(null);
+
+    const tooltipContent = computed(() => formatter(modelValue.value[isDraggingLower.value ? 0 : 1], countDecimals(step)));
+
+    function onDragging(is: boolean): void {
+        if (is) {
+            return;
+        }
+
+        isDraggingLower.value = is;
+        isDraggingUpper.value = is;
+    }
+
+    function onUpdate(value: number): void {
+        let lower = clampWithStepPrecision(lowerValue.value, min, max, step);
+        let upper = clampWithStepPrecision(upperValue.value, min, max, step);
+
+        if (isDraggingLower.value) {
+            lower = clampWithStepPrecision(value, min, max, step);
+        }
+
+        if (isDraggingUpper.value) {
+            upper = clampWithStepPrecision(value, min, max, step);
+        }
+
+        if (lower >= upper) {
+            return;
+        }
+
+        if (tooltipId.value) {
+            updateTooltip(tooltipId.value, {
+                content: unref(tooltipContent),
+                origin: unref(isDraggingLower.value ? lowerThumbRef : upperThumbRef)?.$el
+            });
+        }
+
+        lowerValue.value = (lower - min) / (max - min);
+        upperValue.value = (upper - min) / (max - min);
+    }
+
+    function onDecrement(which: 'lower' | 'upper'): void {
+        let lower = clampWithStepPrecision(lowerValue.value, min, max, step);
+        let upper = clampWithStepPrecision(upperValue.value, min, max, step);
+
+        if (which === 'lower') {
+            lower = Math.max(min, lower - step);
+        } else {
+            upper = Math.max(min, upper - step);
+        }
+
+        if (lower >= upper) {
+            return;
+        }
+
+        modelValue.value = [lower, upper];
+    }
+
+    function onIncrement(which: 'lower' | 'upper'): void {
+        let lower = clampWithStepPrecision(lowerValue.value, min, max, step);
+        let upper = clampWithStepPrecision(upperValue.value, min, max, step);
+
+        if (which === 'lower') {
+            lower = Math.min(max, lower + step);
+        } else {
+            upper = Math.min(max, upper + step);
+        }
+
+        if (lower >= upper) {
+            return;
+        }
+
+        modelValue.value = [lower, upper];
+    }
+
+    watch(modelValue, modelValue => {
+        lowerValue.value = (modelValue[0] - min) / (max - min);
+        upperValue.value = (modelValue[1] - min) / (max - min);
+    }, {immediate: true});
+
+    watch(([() => max, () => min, () => step, lowerValue, upperValue]), () => {
+        const lower = clampWithStepPrecision(unref(lowerValue), min, max, step);
+        const upper = clampWithStepPrecision(unref(upperValue), min, max, step);
+
+        percentageLower.value = (lower - min) / (max - min);
+        percentageUpper.value = (upper - min) / (max - min);
+
+        modelValue.value = [lower, upper];
+    }, {immediate: true});
+
+    watch(([isDraggingLower, isDraggingUpper]), ([isDraggingLower, isDraggingUpper]) => {
+        const is = isDraggingLower || isDraggingUpper;
+
+        if (is && !tooltipId.value && !isTooltipDisabled) {
+            tooltipId.value = addTooltip({
+                content: unref(tooltipContent),
+                direction: 'vertical',
+                origin: unref(isDraggingLower ? lowerThumbRef : upperThumbRef)?.$el
+            });
+        } else if (!is && tooltipId.value) {
+            removeTooltip(tooltipId.value);
+            tooltipId.value = null;
+        }
+    });
+</script>

package/src/component/FluxFormRow.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="$style.formRow">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Form.module.scss';
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxFormSection.vue

@@ -0,0 +1,23 @@
+<template>
+    <div :class="$style.formSection">
+        <div :class="$style.formSectionTitle">
+            {{ title }}
+        </div>
+
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Form.module.scss';
+
+    defineProps<{
+        readonly title: string;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxFormSelect.vue

@@ -0,0 +1,59 @@
+<template>
+    <SelectBase
+        v-model:searchQuery="modelSearch"
+        :disabled="disabled"
+        :is-multiple="isMultiple"
+        :is-searchable="isSearchable"
+        :options="groups"
+        :placeholder="placeholder"
+        :selected="selected"
+        @deselect="onDeselect"
+        @select="onSelect"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFormSelectEntry, FluxFormSelectValue } from '@flux-ui/types';
+    import { toRef, unref } from 'vue';
+    import { SelectBase } from '$flux/component/primitive';
+    import { useDisabled } from '$flux/composable';
+    import { useFormSelect } from '$flux/composable/private';
+
+    const modelSearch = defineModel<string>('searchQuery', {
+        default: ''
+    });
+
+    const modelValue = defineModel<FluxFormSelectValue>({
+        required: true
+    });
+
+    const {
+        disabled: componentDisabled,
+        isMultiple,
+        options
+    } = defineProps<{
+        readonly disabled?: boolean;
+        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);
+
+    function onDeselect(id: string | number | null): void {
+        if (unref(isMultiple)) {
+            modelValue.value = unref(values).filter(v => v !== id);
+        }
+    }
+
+    function onSelect(id: string | number | null): void {
+        if (unref(isMultiple)) {
+            modelValue.value = [...unref(values), id];
+        } else {
+            modelValue.value = id;
+        }
+    }
+</script>

package/src/component/FluxFormSelectAsync.vue

@@ -0,0 +1,118 @@
+<template>
+    <SelectBase
+        v-model:search-query="modelSearch"
+        :disabled="disabled"
+        :is-loading="isLoading"
+        :is-multiple="isMultiple"
+        is-searchable
+        :options="groups"
+        :placeholder="placeholder"
+        :selected="selected"
+        @deselect="onDeselect"
+        @open="onOpen()"
+        @select="onSelect"/>
+</template>
+
+<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';
+
+    const modelSearch = defineModel<string>('searchQuery', {
+        default: ''
+    });
+
+    const modelValue = defineModel<FluxFormSelectValue>({
+        required: true
+    });
+
+    const {
+        fetchOptions: fetchOptionsProp,
+        fetchRelevant: fetchRelevantProp,
+        fetchSearch: fetchSearchProp,
+        disabled: componentDisabled,
+        isMultiple
+    } = defineProps<{
+        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));
+    const selectedOptions = ref<FluxFormSelectEntry[]>([]);
+    const visibleOptions = ref<FluxFormSelectEntry[]>([]);
+
+    const options = computed(() => {
+        const options: FluxFormSelectEntry[] = [];
+        const search = unref(modelSearch);
+        const selected = unref(selectedOptions);
+        const visible = unref(visibleOptions);
+
+        visible.forEach(vo => options.push(vo));
+
+        selected.forEach(so => {
+            if (isFluxFormSelectOption(so) && visible.find(vo => isFluxFormSelectOption(vo) && vo.value === so.value)) {
+                return;
+            }
+
+            if (isFluxFormSelectOption(so) && !so.label.toLowerCase().includes(search.toLowerCase())) {
+                return;
+            }
+
+            options.push(so);
+        });
+
+        return options;
+    });
+
+    const {groups, selected, values} = useFormSelect(modelValue, isMultiple, options);
+    const {isLoading, loaded} = useLoaded();
+    const debouncedModelSearch = useDebouncedRef(modelSearch, 300);
+    const fetchOptions = computed(() => loaded(fetchOptionsProp));
+    const fetchRelevant = computed(() => loaded(fetchRelevantProp));
+    const fetchSearch = computed(() => loaded(fetchSearchProp));
+
+    function onDeselect(id: string | number | null): void {
+        if (isMultiple) {
+            modelValue.value = unref(values).filter(v => v !== id);
+        }
+    }
+
+    async function onOpen(): Promise<void> {
+        visibleOptions.value = await unref(fetchRelevant)();
+    }
+
+    function onSelect(id: string | number | null): void {
+        if (isMultiple) {
+            modelValue.value = [...unref(values), id];
+        } else {
+            modelValue.value = id;
+        }
+    }
+
+    watch(values, async values => {
+        if (values.length === 0) {
+            return;
+        }
+
+        selectedOptions.value = await unref(fetchOptions)(values);
+    }, {immediate: true});
+
+    watch(debouncedModelSearch, async searchQuery => {
+        if (searchQuery.length > 0) {
+            visibleOptions.value = await unref(fetchSearch)(searchQuery);
+        } else {
+            visibleOptions.value = await unref(fetchRelevant)();
+        }
+    });
+</script>

package/src/component/FluxFormSlider.vue

@@ -0,0 +1,123 @@
+<template>
+    <SliderBase
+        :disabled="disabled"
+        :is-dragging="isDragging"
+        :is-ticks-visible="isTicksVisible"
+        :max="max"
+        :min="min"
+        :step="step"
+        @dragging="onDragging"
+        @update="onUpdate">
+        <SliderTrack
+            :percentage-lower="0"
+            :percentage-upper="percentage">
+            <SliderThumb
+                ref="thumb"
+                :disabled="disabled"
+                :is-dragging="isDragging"
+                :position="percentage"
+                @decrement="onDecrement"
+                @increment="onIncrement"/>
+        </SliderTrack>
+    </SliderBase>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clampWithStepPrecision, countDecimals, formatNumber } from '@basmilius/utils';
+    import { computed, ref, toRef, unref, useTemplateRef, watch, watchEffect } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import { addTooltip, removeTooltip, updateTooltip } from '$flux/data';
+    import { SliderBase, SliderThumb, SliderTrack } from './primitive';
+
+    const modelValue = defineModel<number>({
+        required: true
+    });
+
+    const {
+        formatter = formatNumber,
+        disabled: componentDisabled = false,
+        isTooltipDisabled,
+        max = 100,
+        min = 0,
+        step = 1
+    } = defineProps<{
+        formatter?(value: number, decimals?: number): string;
+
+        readonly disabled?: boolean;
+        readonly isTicksVisible?: boolean;
+        readonly isTooltipDisabled?: boolean;
+        readonly max?: number;
+        readonly min?: number;
+        readonly step?: number;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const thumbRef = useTemplateRef('thumb');
+
+    const isDragging = ref(false);
+    const localValue = ref(0);
+    const percentage = ref(0);
+    const tooltipId = ref<number | null>(null);
+
+    const tooltipContent = computed(() => formatter(modelValue.value, countDecimals(step)));
+
+    function onDragging(is: boolean): void {
+        isDragging.value = is;
+
+        if (is && !tooltipId.value && !isTooltipDisabled) {
+            tooltipId.value = addTooltip({
+                content: unref(tooltipContent),
+                direction: 'vertical',
+                origin: unref(thumbRef)?.$el
+            });
+        } else if (!is && tooltipId.value) {
+            removeTooltip(tooltipId.value);
+            tooltipId.value = null;
+        }
+    }
+
+    function onUpdate(value: number): void {
+        localValue.value = value;
+
+        requestAnimationFrame(() => {
+            if (!tooltipId.value) {
+                return;
+            }
+
+            updateTooltip(tooltipId.value, {
+                content: formatter(modelValue.value, countDecimals(step)),
+                origin: unref(thumbRef)?.$el
+            });
+        });
+    }
+
+    function onDecrement(): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        const value = clampWithStepPrecision(localValue.value, min, max, step);
+        modelValue.value = Math.max(min, value - step);
+    }
+
+    function onIncrement(): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        const value = clampWithStepPrecision(localValue.value, min, max, step);
+        modelValue.value = Math.min(max, value + step);
+    }
+
+    watchEffect(() => {
+        localValue.value = (unref(modelValue) - min) / (max - min);
+    });
+
+    watch(([() => max, () => min, localValue, () => step]), () => {
+        const value = clampWithStepPrecision(unref(localValue), min, max, step);
+        modelValue.value = value;
+        percentage.value = (value - min) / (max - min);
+    }, {immediate: true});
+</script>

package/src/component/FluxFormTextArea.vue

@@ -0,0 +1,53 @@
+<template>
+    <textarea
+        v-model="modelValue"
+        ref="input"
+        :class="disabled ? $style.formTextAreaDisabled : $style.formTextAreaEnabled"
+        :id="id"
+        :autocomplete="autoComplete"
+        :autofocus="autoFocus"
+        :disabled="disabled"
+        :maxlength="maxLength"
+        :placeholder="placeholder"
+        :style="{
+            '--rows': rows
+        }"
+        :aria-disabled="disabled ? true : undefined"
+        @blur="emit('blur')"
+        @focus="emit('focus')"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxAutoCompleteType } from '@flux-ui/types';
+    import { toRef } from 'vue';
+    import { useDisabled, useFormFieldInjection } from '$flux/composable';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    const emit = defineEmits<{
+        blur: [];
+        focus: [];
+    }>();
+
+    const modelValue = defineModel<string>({
+        default: ''
+    });
+
+    const {
+        autoFocus = false,
+        disabled: componentDisabled,
+        rows = 3
+    } = defineProps<{
+        readonly autoComplete?: FluxAutoCompleteType;
+        readonly autoFocus?: boolean;
+        readonly disabled?: boolean;
+        readonly isReadonly?: boolean;
+        readonly maxLength?: number;
+        readonly placeholder?: string;
+        readonly rows?: number;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const {id} = useFormFieldInjection();
+</script>