@flux-ui/components 3.1.2 → 3.1.4

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>

package/src/component/FluxMenuFlyout.vue

@@ -0,0 +1,118 @@
+<template>
+    <FluxMenuItem
+        ref="trigger"
+        :class="isOpen && $style.menuFlyoutTriggerOpen"
+        command-icon="angle-right"
+        :disabled="disabled"
+        :icon-leading="icon"
+        :is-active="isActive"
+        :is-destructive="isDestructive"
+        :label="label"
+        aria-haspopup="menu"
+        :aria-expanded="isOpen ? 'true' : 'false'"
+        @click="onTriggerClick"
+        @keydown="onTriggerKeydown">
+        <template
+            v-if="$slots.trigger"
+            #label>
+            <slot name="trigger"/>
+        </template>
+    </FluxMenuItem>
+
+    <Teleport to="body">
+        <AnchorPopup
+            v-if="isOpen"
+            ref="popup"
+            :anchor="popupAnchor"
+            :class="$style.menuFlyoutPopup"
+            clamp-to-viewport
+            :margin="2"
+            :position="position"
+            role="menu"
+            :aria-label="translate('flux.submenu')"
+            @keydown="onPopupKeydown">
+            <slot/>
+        </AnchorPopup>
+
+        <svg
+            v-if="showDebugCone"
+            :class="$style.menuFlyoutConeDebug">
+            <polygon :points="conePoints"/>
+            <circle
+                :cx="coneApex.x"
+                :cy="coneApex.y"
+                r="4"/>
+        </svg>
+    </Teleport>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { computed, type ComponentPublicInstance, toRef, useTemplateRef, type VNode } from 'vue';
+    import { useMenuFlyout, useTranslate } from '~flux/components/composable/private';
+    import { AnchorPopup } from '~flux/components/component/primitive';
+    import FluxMenuItem from './FluxMenuItem.vue';
+    import $style from '~flux/components/css/component/MenuFlyout.module.scss';
+
+    const {
+        disabled,
+        position = 'right-top'
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly icon?: FluxIconName;
+        readonly isActive?: boolean;
+        readonly isDestructive?: boolean;
+        readonly label?: string;
+        readonly position?:
+            | 'top' | 'top-left' | 'top-right'
+            | 'left' | 'left-top' | 'left-bottom'
+            | 'right' | 'right-top' | 'right-bottom'
+            | 'bottom' | 'bottom-left' | 'bottom-right';
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+        trigger(): VNode[];
+    }>();
+
+    // The top chrome of a menu inside a pane: 1px pane border + 9px menu margin
+    // (see `.basePane > .menu` in Menu.module.scss). Subtracting it aligns the first
+    // submenu item with the opener item instead of dropping it lower.
+    const MENU_CHROME_TOP = 10;
+
+    const translate = useTranslate();
+
+    const triggerRef = useTemplateRef<ComponentPublicInstance>('trigger');
+    const popupRef = useTemplateRef<ComponentPublicInstance>('popup');
+
+    const popupAnchor = {
+        $el: {
+            getBoundingClientRect(): DOMRect {
+                const element = triggerRef.value?.$el as HTMLElement | undefined;
+
+                if (!element) {
+                    return new DOMRect();
+                }
+
+                const rect = element.getBoundingClientRect();
+
+                return new DOMRect(rect.x, rect.y - MENU_CHROME_TOP, rect.width, rect.height);
+            }
+        }
+    } as unknown as ComponentPublicInstance;
+
+    const {
+        context,
+        cone,
+        isOpen,
+        onPopupKeydown,
+        onTriggerClick,
+        onTriggerKeydown
+    } = useMenuFlyout({triggerRef, popupRef, disabled: toRef(() => disabled)});
+
+    const showDebugCone = computed(() => !!context && context.debugCone.value && isOpen.value && !!cone.value);
+    const conePoints = computed(() => cone.value ? `${cone.value.ax},${cone.value.ay} ${cone.value.bx},${cone.value.by} ${cone.value.cx},${cone.value.cy}` : '');
+    const coneApex = computed(() => ({x: cone.value?.ax ?? 0, y: cone.value?.ay ?? 0}));
+</script>

package/src/component/FluxPrimaryButton.vue

@@ -1,7 +1,8 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.primaryButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.primaryButtonIcon"
         :css-class-label="$style.primaryButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxPrimaryLinkButton.vue

@@ -1,7 +1,8 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.primaryLinkButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.primaryLinkButtonIcon"
         :css-class-label="$style.primaryLinkButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxPublishButton.vue

@@ -1,12 +1,13 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :class="clsx(
             !isDone && !isLoading && $style.isIdle,
             isDone && $style.isDone,
             isLoading && $style.isLoading
         )"
         :css-class="$style.publishButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.publishButtonIcon"
         :css-class-label="$style.publishButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxSecondaryButton.vue

@@ -1,7 +1,8 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.secondaryButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.secondaryButtonIcon"
         :css-class-label="$style.secondaryButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxSecondaryLinkButton.vue

@@ -1,7 +1,8 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.secondaryLinkButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.secondaryLinkButtonIcon"
         :css-class-label="$style.secondaryLinkButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxTableCell.vue

@@ -7,6 +7,7 @@
             isSeparated && $style.isSeparated,
             isStriped && $style.isStriped
         )"
+        :colspan="colspan"
         role="cell">
         <slot name="content">
             <div
@@ -32,6 +33,7 @@
     const {
         contentDirection = 'row'
     } = defineProps<{
+        readonly colspan?: number;
         readonly contentDirection?: 'column' | 'row';
         readonly contentGap?: number;
     }>();