@flux-ui/components 3.1.2 → 3.1.4

package/src/component/FluxFormCombobox.vue

@@ -0,0 +1,98 @@
+<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-searchable
+        :is-creatable="isCreatable"
+        :is-loading="isLoading"
+        :is-multiple="isMultiple"
+        :options="groups"
+        :placeholder="placeholder"
+        :selected="selected"
+        @create="onCreate"
+        @deselect="onDeselect"
+        @select="onSelect"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFormInputBaseProps, FluxFormSelectEntry, FluxFormSelectOption, FluxFormSelectValue } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, ref, toRef, unref } from 'vue';
+    import { SelectBase } from '~flux/components/component/primitive';
+    import { useDisabled } from '~flux/components/composable';
+    import { useFormSelect } from '~flux/components/composable/private';
+    import { isFluxFormSelectGroup, isFluxFormSelectOption } from '~flux/components/data';
+    import $formStyle from '~flux/components/css/component/Form.module.scss';
+
+    const modelSearch = defineModel<string>('searchQuery', {
+        default: ''
+    });
+
+    const modelValue = defineModel<FluxFormSelectValue>({
+        required: true
+    });
+
+    const {
+        disabled: componentDisabled,
+        isMultiple,
+        options
+    } = defineProps<Pick<FluxFormInputBaseProps, 'autoFocus' | 'disabled' | 'error' | 'isCondensed' | 'isLoading' | 'isReadonly' | 'isSecondary' | 'name' | 'placeholder'> & {
+        readonly isCreatable?: boolean;
+        readonly isMultiple?: boolean;
+        readonly options: FluxFormSelectEntry[];
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const createdOptions = ref<FluxFormSelectOption[]>([]);
+
+    const allOptions = computed<FluxFormSelectEntry[]>(() => {
+        const seen = new Set<string | number | null>();
+
+        return [...options, ...createdOptions.value].filter(o => {
+            if (isFluxFormSelectGroup(o)) {
+                return true;
+            }
+
+            if (seen.has(o.value)) {
+                return false;
+            }
+
+            seen.add(o.value);
+            return true;
+        });
+    });
+
+    const {groups, selected, values} = useFormSelect(modelValue, isMultiple, allOptions, modelSearch);
+
+    function onDeselect(id: string | number | null): void {
+        if (isMultiple) {
+            modelValue.value = unref(values).filter(v => v !== id);
+        }
+    }
+
+    function onSelect(id: string | number | null): void {
+        if (isMultiple) {
+            modelValue.value = [...unref(values), id];
+        } else {
+            modelValue.value = id;
+        }
+    }
+
+    function onCreate(query: string): void {
+        const exists = unref(allOptions).some(o => isFluxFormSelectOption(o) && o.value === query);
+
+        if (!exists) {
+            createdOptions.value = [...createdOptions.value, {label: query, value: query}];
+        }
+
+        onSelect(query);
+    }
+</script>

package/src/component/FluxFormRating.vue

@@ -0,0 +1,172 @@
+<template>
+    <div
+        :class="clsx(
+            $style.formRating,
+            disabled && $style.isDisabled,
+            error && $style.isInvalid
+        )"
+        :id="id"
+        :style="{
+            fontSize: size && `${size}px`
+        }"
+        role="slider"
+        :aria-disabled="disabled ? true : undefined"
+        :aria-invalid="error ? true : undefined"
+        :aria-readonly="isReadonly ? true : undefined"
+        :aria-valuemin="0"
+        :aria-valuemax="count"
+        :aria-valuenow="modelValue ?? 0"
+        :aria-valuetext="`${modelValue ?? 0} / ${count}`"
+        :tabindex="isInteractive ? 0 : undefined"
+        @keydown="onKeyDown"
+        @mouseleave="hoverValue = null">
+        <input
+            v-if="name"
+            type="hidden"
+            :name="name"
+            :value="modelValue ?? ''">
+
+        <button
+            v-for="star of count"
+            :key="star"
+            :class="$style.formRatingStar"
+            type="button"
+            tabindex="-1"
+            aria-hidden="true"
+            :disabled="!isInteractive"
+            :style="{
+                '--fill': fillFor(star)
+            }"
+            @click="onClick(star, $event)"
+            @mousemove="onMouseMove(star, $event)">
+            <FluxIcon
+                :class="$style.formRatingStarEmpty"
+                :name="icon"/>
+
+            <FluxIcon
+                :class="$style.formRatingStarFull"
+                :name="icon"/>
+        </button>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFormInputBaseProps, FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, ref, toRef } from 'vue';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/FormRating.module.scss';
+
+    const modelValue = defineModel<number | null>({
+        default: null
+    });
+
+    const {
+        allowHalf = false,
+        clearable = false,
+        count = 5,
+        disabled: componentDisabled,
+        icon = 'star',
+        isReadonly
+    } = defineProps<Pick<FluxFormInputBaseProps, 'disabled' | 'error' | 'isReadonly' | 'name'> & {
+        readonly allowHalf?: boolean;
+        readonly clearable?: boolean;
+        readonly count?: number;
+        readonly icon?: FluxIconName;
+        readonly size?: number;
+    }>();
+
+    const emit = defineEmits<{
+        change: [number | null];
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const {id} = useFormFieldInjection();
+
+    const hoverValue = ref<number | null>(null);
+
+    const isInteractive = computed(() => !disabled.value && !isReadonly);
+    const displayValue = computed(() => hoverValue.value ?? modelValue.value ?? 0);
+
+    function fillFor(star: number): number {
+        return Math.min(1, Math.max(0, displayValue.value - (star - 1)));
+    }
+
+    function resolveStarValue(star: number, evt: MouseEvent): number {
+        if (!allowHalf) {
+            return star;
+        }
+
+        const {left, width} = (evt.currentTarget as HTMLElement).getBoundingClientRect();
+        return evt.clientX - left < width / 2 ? star - 0.5 : star;
+    }
+
+    function commit(value: number | null): void {
+        modelValue.value = value;
+        emit('change', value);
+    }
+
+    function onMouseMove(star: number, evt: MouseEvent): void {
+        if (!isInteractive.value) {
+            return;
+        }
+
+        hoverValue.value = resolveStarValue(star, evt);
+    }
+
+    function onClick(star: number, evt: MouseEvent): void {
+        if (!isInteractive.value) {
+            return;
+        }
+
+        const value = resolveStarValue(star, evt);
+        commit(clearable && modelValue.value === value ? null : value);
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (!isInteractive.value) {
+            return;
+        }
+
+        const step = allowHalf ? 0.5 : 1;
+        const current = modelValue.value ?? 0;
+
+        switch (evt.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                evt.preventDefault();
+                commit(Math.min(count, current + step));
+                break;
+
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                evt.preventDefault();
+                commit(Math.max(0, current - step));
+                break;
+
+            case 'Home':
+                evt.preventDefault();
+                commit(0);
+                break;
+
+            case 'End':
+                evt.preventDefault();
+                commit(count);
+                break;
+
+            default:
+                if (/^[0-9]$/.test(evt.key)) {
+                    const digit = Number(evt.key);
+
+                    if (digit <= count) {
+                        evt.preventDefault();
+                        commit(digit);
+                    }
+                }
+                break;
+        }
+    }
+</script>

package/src/component/FluxFormTagsInput.vue

@@ -0,0 +1,249 @@
+<template>
+    <Anchor
+        ref="anchor"
+        :class="clsx(
+            disabled ? $style.formTagsInputDisabled : $style.formTagsInputEnabled,
+            isCondensed && $style.isCondensed,
+            isSecondary && $style.isSecondary,
+            error && $style.isInvalid
+        )"
+        :id="id"
+        role="group"
+        tag-name="div"
+        @click="focusInput">
+        <FluxTag
+            v-for="(tag, index) of modelValue"
+            :key="`${tag}-${index}`"
+            :color="tagColor"
+            :label="tag"
+            is-deletable
+            @delete="removeAt(index)"/>
+
+        <input
+            ref="input"
+            v-model="query"
+            :class="$style.formTagsInputField"
+            :name="name"
+            autocomplete="off"
+            :disabled="disabled"
+            :placeholder="modelValue.length === 0 ? placeholder : undefined"
+            :readonly="isReadonly"
+            type="text"
+            @input="onInput"
+            @keydown="onKeyDown"
+            @paste="onPaste">
+    </Anchor>
+
+    <Teleport to="body">
+        <FluxFadeTransition>
+            <AnchorPopup
+                v-if="isOpen && filteredSuggestions.length > 0"
+                ref="popup"
+                :class="$style.formTagsInputPopup"
+                :anchor="anchorRef"
+                direction="vertical"
+                use-anchor-width>
+                <FluxMenu>
+                    <FluxMenuItem
+                        v-for="(suggestion, index) of filteredSuggestions"
+                        :key="suggestion.value ?? index"
+                        :icon-leading="suggestion.icon"
+                        :is-highlighted="highlightedIndex === index"
+                        :label="suggestion.label"
+                        type="button"
+                        @click="addSuggestion(suggestion)"/>
+                </FluxMenu>
+            </AnchorPopup>
+        </FluxFadeTransition>
+    </Teleport>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useClickOutside } from '@basmilius/common';
+    import type { FluxColor, FluxFormInputBaseProps, FluxFormSelectOption } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { type ComponentPublicInstance, computed, nextTick, ref, toRef, useTemplateRef } from 'vue';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import { FluxFadeTransition } from '~flux/components/transition';
+    import { Anchor, AnchorPopup } from '~flux/components/component/primitive';
+    import FluxMenu from './FluxMenu.vue';
+    import FluxMenuItem from './FluxMenuItem.vue';
+    import FluxTag from './FluxTag.vue';
+    import $style from '~flux/components/css/component/Form.module.scss';
+
+    const modelValue = defineModel<string[]>({
+        default: () => []
+    });
+
+    const query = defineModel<string>('searchQuery', {
+        default: ''
+    });
+
+    const {
+        allowDuplicates,
+        delimiters = ['Enter', ','],
+        disabled: componentDisabled,
+        max,
+        suggestions,
+        tagColor,
+        validate
+    } = defineProps<Pick<FluxFormInputBaseProps, 'disabled' | 'error' | 'isCondensed' | 'isReadonly' | 'isSecondary' | 'name' | 'placeholder'> & {
+        readonly allowDuplicates?: boolean;
+        readonly delimiters?: string[];
+        readonly max?: number;
+        readonly suggestions?: FluxFormSelectOption[];
+        readonly tagColor?: FluxColor;
+        readonly validate?: (value: string) => boolean;
+    }>();
+
+    const emit = defineEmits<{
+        add: [string];
+        remove: [string];
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const {id} = useFormFieldInjection();
+
+    const anchorRef = useTemplateRef<ComponentPublicInstance>('anchor');
+    const popupRef = useTemplateRef<ComponentPublicInstance>('popup');
+    const inputElementRef = useTemplateRef<HTMLInputElement>('input');
+
+    const isOpen = ref(false);
+    const highlightedIndex = ref(-1);
+
+    const isMaxReached = computed(() => max !== undefined && modelValue.value.length >= max);
+    const filteredSuggestions = computed(() => {
+        if (!suggestions) {
+            return [];
+        }
+
+        const search = query.value.trim().toLowerCase();
+
+        return suggestions.filter(suggestion =>
+            !modelValue.value.includes(suggestion.label) &&
+            (search === '' || suggestion.label.toLowerCase().includes(search)));
+    });
+
+    function focusInput(): void {
+        inputElementRef.value?.focus();
+    }
+
+    function addTag(rawValue: string): void {
+        const value = rawValue.trim();
+
+        if (value === '' || isMaxReached.value) {
+            return;
+        }
+
+        if (!allowDuplicates && modelValue.value.includes(value)) {
+            query.value = '';
+            return;
+        }
+
+        if (validate && !validate(value)) {
+            return;
+        }
+
+        modelValue.value = [...modelValue.value, value];
+        emit('add', value);
+
+        query.value = '';
+        highlightedIndex.value = -1;
+        isOpen.value = false;
+    }
+
+    function removeAt(index: number): void {
+        const removed = modelValue.value[index];
+        modelValue.value = modelValue.value.filter((_, i) => i !== index);
+        emit('remove', removed);
+    }
+
+    function addSuggestion(suggestion: FluxFormSelectOption): void {
+        addTag(suggestion.label);
+        nextTick(() => focusInput());
+    }
+
+    function onInput(): void {
+        isOpen.value = query.value.trim() !== '' && filteredSuggestions.value.length > 0;
+        highlightedIndex.value = -1;
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (evt.key === 'Escape' && isOpen.value) {
+            evt.preventDefault();
+            isOpen.value = false;
+            return;
+        }
+
+        if (isOpen.value && (evt.key === 'ArrowDown' || evt.key === 'ArrowUp')) {
+            evt.preventDefault();
+
+            const count = filteredSuggestions.value.length;
+
+            if (count === 0) {
+                return;
+            }
+
+            highlightedIndex.value = evt.key === 'ArrowDown'
+                ? (highlightedIndex.value + 1) % count
+                : (highlightedIndex.value - 1 + count) % count;
+
+            return;
+        }
+
+        if (evt.key === 'Enter') {
+            if (isOpen.value && highlightedIndex.value >= 0) {
+                evt.preventDefault();
+                addSuggestion(filteredSuggestions.value[highlightedIndex.value]);
+                return;
+            }
+
+            if (delimiters.includes('Enter')) {
+                evt.preventDefault();
+                addTag(query.value);
+            }
+
+            return;
+        }
+
+        if (evt.key.length === 1 && delimiters.includes(evt.key)) {
+            evt.preventDefault();
+            addTag(query.value);
+            return;
+        }
+
+        if (evt.key === 'Backspace' && query.value === '' && modelValue.value.length > 0) {
+            removeAt(modelValue.value.length - 1);
+        }
+    }
+
+    function onPaste(evt: ClipboardEvent): void {
+        if (!evt.clipboardData) {
+            return;
+        }
+
+        const separators = [...delimiters.filter(delimiter => delimiter !== 'Enter'), '\n'];
+        const text = evt.clipboardData.getData('text');
+
+        let parts = [text];
+
+        for (const separator of separators) {
+            parts = parts.flatMap(part => part.split(separator));
+        }
+
+        parts = parts.map(part => part.trim()).filter(part => part !== '');
+
+        if (parts.length <= 1) {
+            return;
+        }
+
+        evt.preventDefault();
+        parts.forEach(addTag);
+    }
+
+    if (typeof window !== 'undefined') {
+        useClickOutside([anchorRef, popupRef], isOpen, () => isOpen.value = false);
+    }
+</script>

package/src/component/FluxFormTextArea.vue

@@ -29,9 +29,10 @@
 <script
     lang="ts"
     setup>
+    import { unrefTemplateElement } from '@flux-ui/internals';
     import type { FluxAutoCompleteType, FluxFormInputBaseProps } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { toRef } from 'vue';
+    import { toRef, useTemplateRef } from 'vue';
     import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
     import $style from '~flux/components/css/component/Form.module.scss';
 
@@ -55,5 +56,19 @@
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
+    const inputRef = useTemplateRef<HTMLTextAreaElement>('input');
     const {id} = useFormFieldInjection();
+
+    function blur(): void {
+        unrefTemplateElement(inputRef)?.blur();
+    }
+
+    function focus(): void {
+        unrefTemplateElement(inputRef)?.focus();
+    }
+
+    defineExpose({
+        blur,
+        focus
+    });
 </script>