@flux-ui/components 3.1.2 → 3.1.3

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>

package/src/component/FluxInlineEdit.vue

@@ -0,0 +1,176 @@
+<template>
+    <div :class="$style.inlineEdit">
+        <template v-if="isEditing">
+            <FluxFormTextArea
+                v-if="multiline"
+                v-model="draft"
+                ref="field"
+                :class="$style.inlineEditField"
+                :error="error"
+                :placeholder="placeholder"
+                @blur="onBlur"
+                @keydown="onKeyDown"/>
+
+            <FluxFormInput
+                v-else
+                v-model="draft"
+                ref="field"
+                :class="$style.inlineEditField"
+                :error="error"
+                :placeholder="placeholder"
+                @blur="onBlur"
+                @keydown="onKeyDown"/>
+
+            <div
+                :class="$style.inlineEditActions"
+                @mousedown.prevent>
+                <slot
+                    name="actions"
+                    :save="save"
+                    :cancel="cancel">
+                    <FluxSecondaryButton
+                        icon-leading="check"
+                        @click="save"/>
+
+                    <FluxSecondaryButton
+                        icon-leading="xmark"
+                        @click="cancel"/>
+                </slot>
+            </div>
+        </template>
+
+        <div
+            v-else
+            ref="display"
+            :class="clsx(
+                $style.inlineEditDisplay,
+                isInteractive && $style.isInteractive,
+                !modelValue && $style.isPlaceholder
+            )"
+            :role="isInteractive ? 'button' : undefined"
+            :tabindex="isInteractive ? 0 : undefined"
+            @click="edit"
+            @keydown="onDisplayKeyDown">
+            <slot
+                :value="modelValue"
+                :edit="edit">
+                {{ modelValue || placeholder }}
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { computed, nextTick, ref, toRef, useTemplateRef, type VNode } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import FluxFormInput from './FluxFormInput.vue';
+    import FluxFormTextArea from './FluxFormTextArea.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import $style from '~flux/components/css/component/InlineEdit.module.scss';
+
+    const modelValue = defineModel<string>({
+        default: ''
+    });
+
+    const {
+        disabled: componentDisabled,
+        isReadonly,
+        multiline = false,
+        saveOnBlur = true
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly error?: string | null;
+        readonly isReadonly?: boolean;
+        readonly multiline?: boolean;
+        readonly placeholder?: string;
+        readonly saveOnBlur?: boolean;
+    }>();
+
+    const emit = defineEmits<{
+        cancel: [];
+        edit: [];
+        save: [string];
+    }>();
+
+    defineSlots<{
+        actions?(props: {save(): void; cancel(): void}): VNode[];
+        default?(props: {value: string; edit(): void}): VNode[];
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const displayRef = useTemplateRef<HTMLElement>('display');
+    const fieldRef = useTemplateRef<{focus(): void}>('field');
+
+    const isEditing = ref(false);
+    const draft = ref('');
+
+    const isInteractive = computed(() => !disabled.value && !isReadonly);
+
+    function edit(): void {
+        if (!isInteractive.value) {
+            return;
+        }
+
+        draft.value = modelValue.value;
+        isEditing.value = true;
+        emit('edit');
+
+        nextTick(() => fieldRef.value?.focus());
+    }
+
+    function close(): void {
+        isEditing.value = false;
+        nextTick(() => displayRef.value?.focus());
+    }
+
+    function save(): void {
+        modelValue.value = draft.value;
+        emit('save', draft.value);
+        close();
+    }
+
+    function cancel(): void {
+        emit('cancel');
+        close();
+    }
+
+    function onBlur(): void {
+        if (saveOnBlur && isEditing.value) {
+            save();
+        }
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (evt.key === 'Escape') {
+            evt.preventDefault();
+            cancel();
+            return;
+        }
+
+        if (evt.key === 'Enter') {
+            if (multiline) {
+                if (evt.metaKey || evt.ctrlKey) {
+                    evt.preventDefault();
+                    save();
+                }
+            } else {
+                evt.preventDefault();
+                save();
+            }
+        }
+    }
+
+    function onDisplayKeyDown(evt: KeyboardEvent): void {
+        if (!isInteractive.value) {
+            return;
+        }
+
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            evt.preventDefault();
+            edit();
+        }
+    }
+</script>

package/src/component/FluxMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <nav
         ref="element"
-        :class="isLarge ? $style.menuLarge : $style.menuNormal"
+        :class="[isLarge ? $style.menuLarge : $style.menuNormal, coneActive && $style.menuConeActive]"
         role="menu"
         aria-orientation="vertical">
         <slot/>
@@ -12,10 +12,14 @@
     lang="ts"
     setup>
     import { useFocusZone } from '@flux-ui/internals';
-    import { useTemplateRef, type VNode } from 'vue';
+    import { computed, toRef, useTemplateRef, type VNode } from 'vue';
+    import { useMenuFlyoutContext } from '~flux/components/composable/private';
     import $style from '~flux/components/css/component/Menu.module.scss';
 
-    defineProps<{
+    const {
+        debugCone = false
+    } = defineProps<{
+        readonly debugCone?: boolean;
         readonly isLarge?: boolean;
     }>();
 
@@ -28,4 +32,10 @@
     useFocusZone(elementRef, {
         direction: 'vertical'
     });
+
+    const menuFlyout = useMenuFlyoutContext({
+        debugCone: toRef(() => debugCone)
+    });
+
+    const coneActive = computed(() => !!menuFlyout.activeCone.value);
 </script>