@flux-ui/components 3.0.0-next.0

package/src/component/FluxTag.vue

@@ -0,0 +1,85 @@
+<template>
+    <FluxPressable
+        :class="clsx(
+            color === 'gray' && $style.tagGray,
+            color === 'primary' && $style.tagPrimary,
+            color === 'danger' && $style.tagDanger,
+            color === 'info' && $style.tagInfo,
+            color === 'success' && $style.tagSuccess,
+            color === 'warning' && $style.tagWarning
+        )"
+        :component-type="type"
+        :tabindex="tabindex"
+        :href="href"
+        :rel="rel"
+        :target="target"
+        :to="to"
+        @click="$emit('click', $event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <FluxSpinner
+            v-if="isLoading"
+            :class="$style.tagIcon"
+            :size="16"/>
+
+        <span
+            v-else-if="dot"
+            :class="$style.tagDot"/>
+
+        <FluxIcon
+            v-else-if="icon"
+            :class="$style.tagIcon"
+            :name="icon"
+            :size="16"/>
+
+        <span :class="$style.tagLabel">
+            {{ label }}
+        </span>
+
+        <button
+            v-if="!isClickable && isDeletable"
+            :class="$style.tagClose"
+            type="button"
+            @click="onDeleteClick()">
+            <FluxIcon name="xmark"/>
+        </button>
+    </FluxPressable>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxColor, FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxPressable from './FluxPressable.vue';
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '$flux/css/component/Badge.module.scss';
+
+    const emit = defineEmits<FluxButtonEmits & {
+        delete: [];
+    }>();
+
+    const {
+        color = 'gray',
+        isClickable
+    } = defineProps<{
+        readonly color?: FluxColor;
+        readonly dot?: boolean;
+        readonly icon?: FluxIconName;
+        readonly isClickable?: boolean;
+        readonly isDeletable?: boolean;
+        readonly isLoading?: boolean;
+        readonly label: string;
+        readonly type?: FluxPressableType;
+        readonly tabindex?: string | number;
+        readonly href?: string;
+        readonly rel?: string;
+        readonly target?: string;
+        readonly to?: FluxTo;
+    }>();
+
+    function onDeleteClick(): void {
+        emit('delete');
+    }
+</script>

package/src/component/FluxTagStack.vue

@@ -0,0 +1,18 @@
+<template>
+    <FluxStack
+        direction="horizontal"
+        :gap="6"
+        is-wrapping>
+        <slot/>
+    </FluxStack>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxStack from './FluxStack.vue';
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxTicks.vue

@@ -0,0 +1,44 @@
+<template>
+    <div :class="$style.ticks">
+        <template
+            v-for="tick of ticks"
+            :key="tick">
+            <div
+                :class="$style.tickLarge"
+                :style="{
+                    '--position': (tick - lower) / (upper - lower)
+                }">
+                <span>{{ tick }}</span>
+            </div>
+        </template>
+
+        <template
+            v-for="tick of smallTicks"
+            :key="tick">
+            <div
+                :class="$style.tickSmall"
+                :style="{
+                    '--position': (tick - lower) / (upper - lower)
+                }"/>
+        </template>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { generateStepTicks } from '@basmilius/utils';
+    import { computed } from 'vue';
+    import $style from '$flux/css/component/primitive/Slider.module.scss';
+
+    const {
+        lower,
+        upper
+    } = defineProps<{
+        readonly lower: number;
+        readonly upper: number;
+    }>();
+
+    const smallTicks = computed(() => generateStepTicks(lower, upper, 50, true).filter(s => !ticks.value.includes(s)));
+    const ticks = computed(() => generateStepTicks(lower, upper, 5));
+</script>

package/src/component/FluxTimeline.vue

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

package/src/component/FluxTimelineItem.vue

@@ -0,0 +1,73 @@
+<template>
+    <div
+        :class="clsx(
+            color === 'gray' && $style.timelineItemGray,
+            color === 'primary' && $style.timelineItemPrimary,
+            color === 'danger' && $style.timelineItemDanger,
+            color === 'info' && $style.timelineItemInfo,
+            color === 'success' && $style.timelineItemSuccess,
+            color === 'warning' && $style.timelineItemWarning
+        )"
+        role="article">
+        <div :class="$style.timelineItemLine"/>
+
+        <div
+            v-if="photo"
+            :class="$style.timelineItemPhoto">
+            <img
+                :class="$style.timelineItemPhotoImage"
+                :src="photo"
+                alt="">
+
+            <div
+                v-if="icon"
+                :class="$style.timelineItemPhotoIcon">
+                <FluxIcon
+                    :name="icon"
+                    :size="16"/>
+            </div>
+        </div>
+
+        <div
+            v-else-if="icon"
+            :class="$style.timelineItemIcon">
+            <FluxIcon
+                :name="icon"
+                :size="20"/>
+        </div>
+
+        <div :class="$style.timelineItemBody">
+            <div
+                v-if="title || when"
+                :class="$style.timelineItemHeader">
+                <strong v-if="title">{{ title }}</strong>
+                <span v-if="when">{{ when }}</span>
+            </div>
+
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxColor, FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Timeline.module.scss';
+
+    const {
+        color = 'gray'
+    } = defineProps<{
+        readonly color?: FluxColor;
+        readonly icon?: FluxIconName;
+        readonly photo?: string;
+        readonly title?: string;
+        readonly when?: string;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxToggle.vue

@@ -0,0 +1,64 @@
+<template>
+    <label
+        :class="clsx(
+            $style.toggle,
+            modelValue && $style.isChecked,
+            disabled && $style.isDisabled,
+            isSwitch && $style.isSwitch
+        )"
+        :for="id"
+        :aria-disabled="disabled ? true : undefined">
+        <FluxIcon
+            v-if="iconOff"
+            :class="$style.toggleIconOff"
+            :name="iconOff"
+            :size="14"/>
+
+        <FluxIcon
+            v-if="iconOn"
+            :class="$style.toggleIconOn"
+            :name="iconOn"
+            :size="14"/>
+
+        <input
+            :class="$style.toggleInput"
+            :id="id"
+            :disabled="disabled"
+            type="checkbox"
+            :checked="modelValue"
+            role="switch"
+            :aria-checked="modelValue"
+            @input="toggle"/>
+    </label>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { toRef } from 'vue';
+    import { useDisabled, useFormFieldInjection } from '$flux/composable';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    const modelValue = defineModel<boolean>({
+        default: false
+    });
+
+    const {
+        disabled: componentDisabled
+    } = defineProps<{
+        readonly iconOff?: FluxIconName;
+        readonly iconOn?: FluxIconName;
+        readonly disabled?: boolean;
+        readonly isSwitch?: boolean;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const {id} = useFormFieldInjection();
+
+    function toggle(evt: Event): void {
+        modelValue.value = (evt.target as HTMLInputElement).checked;
+    }
+</script>

package/src/component/FluxToolbar.vue

@@ -0,0 +1,32 @@
+<template>
+    <FluxStack
+        :class="clsx(
+            !!floatingMode ? $style.toolbarFloating : $style.toolbarFlat,
+            floatingMode === 'free' && $style.isFree,
+            floatingMode === 'top-end' && $style.isTopEnd,
+            floatingMode === 'top-start' && $style.isTopStart,
+            floatingMode === 'bottom-end' && $style.isBottomEnd,
+            floatingMode === 'bottom-start' && $style.isBottomStart,
+        )"
+        direction="horizontal"
+        :gap="6"
+        tag="nav">
+        <slot/>
+    </FluxStack>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import FluxStack from './FluxStack.vue';
+    import $style from '$flux/css/component/Toolbar.module.scss';
+
+    defineProps<{
+        readonly floatingMode?: 'free' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxToolbarGroup.vue

@@ -0,0 +1,18 @@
+<template>
+    <FluxStack
+        direction="horizontal"
+        :gap="3"
+        tag="nav">
+        <slot/>
+    </FluxStack>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxStack from './FluxStack.vue';
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxTooltip.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { defineComponent, getCurrentInstance, onMounted, onUnmounted, PropType, ref, SlotsType, VNode } from 'vue';
+    import { addTooltip, removeTooltip } from '$flux/data';
+
+    export default defineComponent({
+        props: {
+            content: String as PropType<string | undefined>,
+            direction: String as PropType<'horizontal' | 'vertical'>
+        },
+        slots: Object as SlotsType<{
+            content: () => VNode[],
+            default: () => VNode[],
+        }>,
+        setup(props, {slots}) {
+            const instance = getCurrentInstance()!;
+
+            const tooltipId = ref<number | null>(null);
+
+            onMounted(() => {
+                const elm = instance.proxy!.$el;
+                elm.addEventListener('mouseenter', onHover, {passive: true});
+                elm.addEventListener('mouseleave', onLeave, {passive: true});
+            });
+
+            onUnmounted(() => {
+                const elm = instance.proxy!.$el;
+                elm.removeEventListener('mouseenter', onHover);
+                elm.removeEventListener('mouseleave', onLeave);
+                onLeave();
+            });
+
+            function onHover(): void {
+                onLeave();
+
+                if ((props.content?.trim().length ?? 0) === 0 && !slots.content) {
+                    return;
+                }
+
+                tooltipId.value = addTooltip({
+                    content: props.content,
+                    contentSlot: slots.content,
+                    direction: props.direction || 'vertical',
+                    origin: instance.proxy?.$el
+                });
+            }
+
+            function onLeave(): void {
+                if (tooltipId.value) {
+                    removeTooltip(tooltipId.value);
+                }
+            }
+
+            return () => (slots.default?.() ?? [])[0] ?? null;
+        }
+    });
+</script>

package/src/component/FluxTooltipProvider.vue

@@ -0,0 +1,176 @@
+<script lang="ts">
+    import { unrefTemplateElement } from '@flux-ui/internals';
+    import { clsx } from 'clsx';
+    import { computed, defineComponent, h, ref, unref, watch } from 'vue';
+    import { useFluxStore } from '$flux/data';
+    import { FluxTooltipTransition } from '$flux/transition';
+    import $style from '$flux/css/component/Tooltip.module.scss';
+
+    type Transition = 'above' | 'below' | 'end' | 'start';
+
+    type PositionData = {
+        readonly x: number;
+        readonly y: number;
+        readonly arrowAngle: string;
+        readonly arrowX: string;
+        readonly arrowY: string;
+        readonly transition: Transition;
+    };
+
+    export default defineComponent(() => {
+        const {tooltip} = useFluxStore();
+
+        const elementRef = ref<HTMLElement | null>(null);
+        const position = ref<PositionData | null>(null);
+
+        const content = computed(() => unref(tooltip) ? unref(tooltip)!.contentSlot?.() ?? [unref(tooltip)!.content] : null);
+        const has = computed(() => !!unref(tooltip));
+
+        function calculate(): void {
+            const element = unrefTemplateElement(elementRef);
+            const spec = unref(tooltip);
+
+            if (!spec || !element || !unref(content)) {
+                position.value = null;
+                return;
+            }
+
+            const {direction, origin} = spec;
+            const margin = 9;
+            const safeZone = 15;
+
+            if (!origin) {
+                position.value = null;
+                return;
+            }
+
+            let {width, height} = element.getBoundingClientRect();
+            const {scale} = getComputedStyle(element);
+            const {top, left, width: originWidth, height: originHeight} = origin.getBoundingClientRect();
+
+            let s = Number(scale ?? 1);
+            s = isNaN(s) ? 1 : s;
+            height /= s;
+            width /= s;
+
+            if (direction === 'horizontal') {
+                position.value = calculateHorizontalPosition(top, left, width, height, originWidth, originHeight, margin, safeZone);
+            } else {
+                position.value = calculateVerticalPosition(top, left, width, height, originWidth, originHeight, margin, safeZone);
+            }
+        }
+
+        watch(content, () => requestAnimationFrame(() => calculate()));
+
+        return () => h(FluxTooltipTransition, {}, {
+            default: () => {
+                if (!unref(has)) {
+                    return;
+                }
+
+                const pos = unref(position);
+
+                return h('div', {
+                    ref: elementRef,
+                    class: pos
+                        ? clsx(
+                            pos.transition === 'above' && $style.tooltipAbove,
+                            pos.transition === 'below' && $style.tooltipBelow,
+                            pos.transition === 'end' && $style.tooltipEnd,
+                            pos.transition === 'start' && $style.tooltipStart
+                        )
+                        : $style.tooltip,
+                    style: {
+                        '--x': pos?.x ?? undefined,
+                        '--y': pos?.y ?? undefined,
+                        '--arrowAngle': pos?.arrowAngle ?? undefined,
+                        '--arrowX': pos?.arrowX ?? undefined,
+                        '--arrowY': pos?.arrowY ?? undefined
+                    }
+                }, unref(content));
+            }
+        });
+    });
+
+    function calculateHorizontalPosition(top: number, left: number, width: number, height: number, originWidth: number, originHeight: number, margin: number, safeZone: number): PositionData {
+        let x, y, arrowAngle, arrowX, arrowY, transition: Transition;
+
+        if (left > innerWidth / 2) {
+            x = left - width - margin;
+            y = top + originHeight / 2 - height / 2;
+            arrowAngle = '315deg';
+            arrowX = '100%';
+            arrowY = '50%';
+            transition = 'start';
+        } else {
+            x = left + originWidth + margin;
+            y = top + originHeight / 2 - height / 2;
+            arrowAngle = '135deg';
+            arrowX = '0';
+            arrowY = '50%';
+            transition = 'end';
+        }
+
+        if (y + height > innerHeight - safeZone) {
+            const diff = Math.min(y, innerHeight - height - safeZone) - y;
+            arrowY = `calc(50% - ${diff}px)`;
+            y += diff;
+        }
+
+        if (y < safeZone) {
+            const diff = Math.max(y, safeZone) - y;
+            arrowY = `calc(50% - ${diff}px)`;
+            y += diff;
+        }
+
+        return {
+            x: Math.round(x),
+            y: Math.round(y),
+            arrowAngle,
+            arrowX,
+            arrowY,
+            transition
+        };
+    }
+
+    function calculateVerticalPosition(top: number, left: number, width: number, height: number, originWidth: number, originHeight: number, margin: number, safeZone: number): PositionData {
+        let x, y, arrowAngle, arrowX, arrowY, transition: Transition;
+
+        if (top > 300) {
+            x = left + originWidth / 2 - width / 2;
+            y = top - height - margin;
+            arrowAngle = '45deg';
+            arrowX = '50%';
+            arrowY = '100%';
+            transition = 'above';
+        } else {
+            x = left + originWidth / 2 - width / 2;
+            y = top + originHeight + margin;
+            arrowAngle = '225deg';
+            arrowX = '50%';
+            arrowY = '0';
+            transition = 'below';
+        }
+
+        if (x + width > innerWidth - safeZone) {
+            const diff = Math.min(x, innerWidth - width - safeZone) - x;
+            arrowX = `calc(50% - ${diff}px)`;
+            x += diff;
+        }
+
+        if (x < safeZone) {
+            const diff = Math.max(x, safeZone) - x;
+            arrowX = `calc(50% - ${diff}px)`;
+            x += diff;
+        }
+
+        return {
+            x: Math.round(x),
+            y: Math.round(y),
+            arrowAngle,
+            arrowX,
+            arrowY,
+            transition
+        };
+    }
+</script>

package/src/component/FluxWindow.vue

@@ -0,0 +1,47 @@
+<template>
+    <FluxWindowTransition :is-back="isBack">
+        <template v-for="(_, slot) of slots">
+            <slot
+                v-if="slot === view"
+                v-bind="{back, navigate}"
+                :name="slot"/>
+        </template>
+    </FluxWindowTransition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { ref } from 'vue';
+    import { FluxWindowTransition } from '$flux/transition';
+
+    const slots = defineSlots<{
+        default(props: {
+            back(to?: string): void;
+            navigate(to: string): void;
+        }): any;
+
+        [key: string]: (props: {
+            back(to?: string): void;
+            navigate(to: string): void;
+        }) => any;
+    }>();
+
+    const isBack = ref(false);
+    const view = ref<string>('default');
+
+    function back(to: string = 'default'): void {
+        isBack.value = true;
+        view.value = to;
+    }
+
+    function navigate(to: string): void {
+        isBack.value = false;
+        view.value = to;
+    }
+
+    defineExpose({
+        back,
+        navigate
+    });
+</script>