@luna-park/design 1.0.0

package/src/components/form/dropdown/LDropdown.vue

@@ -0,0 +1,483 @@
+<template>
+    <LFloating
+        ref="floating"
+        class="dropdown"
+        :class="{ 'with-label':!!label, 'with-value': hasValue, big, small, disabled, updated, borderless }"
+        :disabled="disabled"
+        tabindex="0"
+        @show="processShow"
+    >
+        <slot>
+            <span
+                v-if="label"
+                class="label"
+            >
+                {{ label }}
+            </span>
+            <div
+                class="selector"
+                :class="{cell, transparent}"
+                :title="currentOption?.value"
+                @click.alt.stop="reset"
+            >
+                <div v-if="slots.prefix">
+                    <slot name="prefix" />
+                </div>
+                <LIcon
+                    v-if="current || currentOption?.icon"
+                    class="icon"
+                    :icon="current?.icon ?? currentOption?.icon?.icon"
+                    :style="{color: current?.color ?? currentOption?.icon?.color ?? 'var(--color-content-liter)'}"
+                />
+                <input
+                    v-if="custom"
+                    v-model="value"
+                    class="text"
+                    :placeholder="placeholder ?? (label ? '' : 'Select...')"
+                >
+                <input
+                    v-else-if="search"
+                    v-model="filter"
+                    class="text"
+                    :class="{defined: currentOption}"
+                    :placeholder="currentOption?.value ?? placeholder ?? (label ? '' : 'Select...')"
+                    @keydown="processKeyDown"
+                >
+                <input
+                    v-else
+                    class="text"
+                    :placeholder="placeholder ?? (label ? '' : 'Select...')"
+                    :readonly="true"
+                    :value="currentOption?.value"
+                >
+                <LIcon
+                    v-if="clearable && currentOption?.value"
+                    class="clear"
+                    :icon="faCircleXmark"
+                    @click.stop="reset"
+                />
+                <LIcon
+                    v-if="!noCaret"
+                    class="caret"
+                    :icon="faCaretDown"
+                />
+            </div>
+        </slot>
+        <template #popper="{hide}">
+            <input
+                v-if="searchInside"
+                ref="search"
+                v-model="filter"
+                autofocus
+                class="search-inside"
+                placeholder="Search..."
+                @keydown="processKeyDown"
+            >
+            <LDropdownSelection
+                :big="big"
+                :hover="hoverOption"
+                :max-height="maxHeight"
+                :options="internalOptions"
+                :selected="value"
+                @select="select($event, hide)"
+            />
+        </template>
+    </LFloating>
+</template>
+
+<script setup lang="ts">
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCircleXmark } from "@fortawesome/pro-solid-svg-icons";
+import { cloneWithFunctions } from "@luna-park/utils";
+import { computed, nextTick, ref, useSlots, useTemplateRef, watch } from "vue";
+
+import LFloating from "@/components/floating/LFloating.vue";
+import LDropdownSelection from "@/components/form/dropdown/LDropdownSelection.vue";
+import { TOption, TOptions } from "@/components/form/dropdown/types";
+import LIcon from "@/components/misc/LIcon.vue";
+
+const props = withDefaults(defineProps<{
+    big?: boolean;
+    borderless?: boolean;
+    cell?: boolean;
+    clearable?: boolean;
+    current?: {
+        color?: string;
+        icon?: string | IconDefinition;
+    };
+    custom?: boolean;
+    disabled?: boolean;
+    label?: string;
+    maxHeight?: boolean;
+    noCaret?: boolean;
+    options?: TOptions;
+    placeholder?: string;
+    search?: boolean;
+    searchInside?: boolean;
+    small?: boolean;
+    transparent?: boolean;
+    updated?: boolean;
+}>(), {
+    big: false,
+    options: () => []
+});
+
+const value = defineModel<string | number>({
+    default: ""
+});
+
+const filter = ref("");
+const searchElement = useTemplateRef("search");
+const floatingElement = useTemplateRef("floating");
+const hoverOption = ref<Array<string>>([]);
+
+const slots = useSlots();
+
+const rawOptions = computed<Array<TOption>>(() => {
+    if (!Array.isArray(props.options)) {
+        return Object.entries(props.options).map(([id, value]) => ({ id, value }));
+    }
+    else {
+        return props.options.map((value) => {
+            if (["string", "number"].includes(typeof value)) {
+                return { id: value, value };
+            }
+
+            return value;
+        });
+    }
+});
+
+const internalOptions = computed<Array<TOption>>(() => {
+    let options = rawOptions.value;
+
+    if (props.search || props.searchInside) {
+        const filterLower = filter.value.toLowerCase();
+        options = cloneWithFunctions(options);
+        options = filterOptions(options, filterLower);
+    }
+
+    return options;
+
+    function filterOptions(options: Array<TOption>, filterText: string): Array<TOption> {
+        return options.filter((option) => {
+            if (option.children) {
+                option.children = filterOptions(option.children, filterText);
+            }
+
+            return option.value.toLowerCase().includes(filterText) ||
+                option.id.toLowerCase().includes(filterText) ||
+                option.children?.length;
+        });
+    }
+});
+
+const flatRawOptions = computed(() => flattenOptions(rawOptions.value));
+const flatInternalOptions = computed(() => flattenOptions(internalOptions.value));
+
+const currentOption = computed(() => {
+    return flatRawOptions.value.find((option) => option.id === value.value);
+});
+
+const hasValue = computed(() => !!value.value.toString().trim() || props.placeholder);
+
+async function select(option: TOption, hide: () => void) {
+    if (props.search || props.searchInside) {
+        filter.value = "";
+    }
+
+    if (option.disabled) {
+        return;
+    }
+
+    if (option.action) {
+        await option.action();
+    }
+    else {
+        value.value = option.id;
+    }
+
+    hide();
+}
+
+function processKeyDown(event: KeyboardEvent) {
+    if (event.key === "ArrowDown") {
+        event.preventDefault();
+        moveOption("down");
+    }
+
+    if (event.key === "ArrowUp") {
+        event.preventDefault();
+        moveOption("up");
+    }
+
+    if (event.key === "ArrowRight" && hoverOption.value.length) {
+        event.preventDefault();
+        moveOption("right");
+    }
+
+    if (event.key === "ArrowLeft" && hoverOption.value.length) {
+        event.preventDefault();
+        moveOption("left");
+    }
+
+    if (event.key === "Enter") {
+        event.preventDefault();
+        const option = flatRawOptions.value.find((option) => option.id === hoverOption.value.at(-1));
+        if (option) {
+            select(option, floatingElement.value?.hide);
+        }
+    }
+
+    if (event.key === "Escape") {
+        floatingElement.value?.hide();
+    }
+}
+
+function moveOption(direction: "down" | "up" | "right" | "left") {
+    if (!hoverOption.value.length && internalOptions.value[0]) {
+        hoverOption.value.push(internalOptions.value[0].id);
+        return;
+    }
+
+    if (direction === "left") {
+        if (hoverOption.value.length) {
+            hoverOption.value.pop();
+        }
+        return;
+    }
+
+    let parentOption = internalOptions.value;
+
+    if (hoverOption.value.length > 1) {
+        parentOption = flatInternalOptions.value.find((option) => option.id === hoverOption.value.at(-2))?.children;
+    }
+
+    const lastIndex = parentOption.length - 1;
+    const currentIndex = parentOption?.findIndex((o) => o.id === hoverOption.value.at(-1));
+
+    if (direction === "down") {
+        hoverOption.value.pop();
+        hoverOption.value.push(parentOption?.[Math.min(currentIndex + 1, lastIndex)]?.id);
+        return;
+    }
+
+    if (direction === "up") {
+        hoverOption.value.pop();
+        hoverOption.value.push(parentOption?.[Math.max(currentIndex - 1, 0)]?.id);
+        return;
+    }
+
+    if (direction === "right") {
+        const currentOption = parentOption[currentIndex];
+        if (currentOption.children?.length) {
+            hoverOption.value.push(currentOption.children[0].id);
+        }
+        return;
+    }
+}
+
+async function processShow() {
+    hoverOption.value = [];
+    if (props.searchInside) {
+        await nextTick();
+        filter.value = "";
+        searchElement.value?.focus();
+    }
+}
+
+function reset() {
+    value.value = "";
+}
+
+function flattenOptions(options: Array<TOption>): Array<TOption> {
+    return options.reduce(
+        (acc, option) => [...acc, option, ...(option.children ? flattenOptions(option.children) : [])],
+        [] as Array<TOption>
+    );
+}
+
+watch(filter, () => {
+    hoverOption.value = [];
+
+    if (internalOptions.value[0]) {
+        hoverOption.value.push(internalOptions.value[0].id);
+
+        while (flatInternalOptions.value.find((option) => option.id === hoverOption.value.at(-1))?.children?.length) {
+            hoverOption.value.push(flatInternalOptions.value.find((option) => option.id === hoverOption.value.at(-1))?.children[0].id);
+        }
+    }
+});
+</script>
+
+<style scoped>
+.dropdown {
+    font-size: 0.8rem;
+    position: relative;
+    transition: var(--transition-fast);
+
+    .label {
+        position: absolute;
+        top: 2px;
+        left: 0;
+        transform: translate(6px, 0px);
+        transition: var(--transition-fast), transform var(--duration-fast);
+        color: var(--color-content-liter);
+        opacity: 0.5;
+    }
+
+    &.big {
+        font-size: .9rem;
+
+        .label {
+            transform: translate(10px, 0px);
+            top: 7px;
+        }
+
+        .selector {
+            border-width: 2px;
+            --dropdown-radius: var(--length-radius-m);
+            height: 36px;
+
+            .icon, .caret, .clear {
+                width: 12px;
+                height: 12px;
+            }
+        }
+    }
+
+    &.updated {
+        .selector {
+            background: var(--color-primary-litest);
+        }
+    }
+
+    &.small {
+        font-size: .7rem;
+
+        .selector {
+            --dropdown-radius: var(--length-radius-xs);
+            padding: 0 var(--length-xxxs);
+            height: 20px;
+        }
+    }
+
+    &.with-label.with-value {
+        margin-top: 18px;
+
+        .label {
+            transform: translate(0px, -24px);
+            color: var(--color-content-liter);
+            opacity: 1;
+        }
+
+        &.big {
+            margin-top: 24px;
+
+            .label {
+                transform: translate(0px, -36px);
+            }
+        }
+    }
+
+    .selector {
+        --dropdown-radius: var(--length-radius-s);
+
+        background: var(--color-background-1);
+        cursor: pointer;
+        border: 1px solid var(--color-soft);
+        padding: 0 var(--length-xxs);
+        display: flex;
+        align-items: center;
+        gap: var(--length-xxs);
+        transition: background var(--duration-fast);
+        box-sizing: border-box;
+        height: 24px;
+
+        &:not(.cell) {
+            border-radius: var(--dropdown-radius);
+        }
+
+        &.transparent {
+            background: none;
+        }
+
+        .icon, .caret, .clear {
+            flex: 0 0 auto;
+            width: 10px;
+            height: 10px;
+        }
+
+        .caret {
+            flex: none;
+            color: var(--color-content-litest);
+            padding: 0 var(--length-xxs);
+            transition: var(--transition-fast);
+        }
+
+        .clear {
+            color: var(--color-content-litest);
+            cursor: pointer;
+            transition: var(--transition-fast);
+
+            &:hover {
+                color: var(--color-content-liter);
+            }
+        }
+
+        .text {
+            cursor: inherit;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &::placeholder {
+                color: var(--color-content-liter);
+            }
+
+            &.defined::placeholder {
+                color: inherit;
+                opacity: 1;
+            }
+        }
+
+        &:hover {
+            &:not(.transparent) {
+                background: var(--color-background-2);
+            }
+
+            .caret {
+                color: var(--color-content-liter);
+            }
+        }
+    }
+
+    &.disabled {
+        .selector {
+            cursor: default;
+            background: var(--color-background-0);
+            border-color: var(--color-soft);
+            color: var(--color-content-liter);
+
+            &:hover {
+                background: var(--color-background-0);
+
+                .caret {
+                    color: var(--color-content-litest);
+                }
+            }
+        }
+    }
+
+    &.borderless {
+        .selector {
+            border-color: transparent;
+        }
+    }
+}
+
+.search-inside {
+    width: 100%;
+    border-bottom: 1px solid var(--color-background-3);
+}
+</style>

package/src/components/form/dropdown/LDropdownOption.vue

@@ -0,0 +1,224 @@
+<template>
+    <LFloating
+        :container="container"
+        deep
+        :depth="depth + 1"
+        :disabled="!option.children"
+        :display="hover[0] === option.id && hover.length > 1"
+        mode="hover"
+        placement="right-start"
+    >
+        <li
+            ref="option"
+            class="option"
+            :class="{disabled: option.disabled, parent: option.children, selected: option.id === selected, hover: hover[0] === option.id}"
+            @click="select(option)"
+            @mousemove="onOptionMouseMove"
+        >
+            <LIcon
+                v-if="option.icon"
+                class="icon"
+                :icon="option.icon.icon"
+                :style="getStyle(option)"
+            />
+            <span class="value">
+                {{ option.value }}
+            </span>
+            <LIcon
+                v-if="option.children"
+                class="icon"
+                :icon="faCaretRight"
+            />
+        </li>
+        <template #popper>
+            <LDropdownSelection
+                v-if="option.children"
+                :big="big"
+                :depth="depth + 1"
+                :hover="hover[0] === option.id ? hover.slice(1) : []"
+                :max-height="maxHeight"
+                :options="option.children"
+                :selected="selected"
+                @mouseenter="resetShadow"
+                @select="select"
+            />
+        </template>
+        <template #content>
+            <div
+                v-if="option.children"
+                ref="shadow"
+                class="shadow-polygon"
+                :style="shadowStyle"
+                @mousemove="onShadowMouseMove"
+            />
+        </template>
+    </LFloating>
+</template>
+
+<script setup lang="ts">
+import { faCaretRight } from "@fortawesome/pro-solid-svg-icons";
+import LDropdownSelection from "@/components/form/dropdown/LDropdownSelection.vue";
+import LFloating from "@/components/floating/LFloating.vue";
+import LIcon from "@/components/misc/LIcon.vue";
+import { TOption } from "@/components/form/dropdown/types";
+import { ref, useTemplateRef } from "vue";
+
+const SHADOW_THRESHOLD = 4;
+
+const props = withDefaults(defineProps<{
+    big?: boolean;
+    container?: string;
+    depth?: number;
+    hover: Array<string>;
+    maxHeight?: boolean;
+    option: TOption;
+    selected?: string | number
+}>(), {
+    depth: 0
+});
+
+const emits = defineEmits<(e: "select", value: TOption) => void>();
+
+const optionTemplate = useTemplateRef("option");
+const shadowTemplate = useTemplateRef("shadow");
+
+const shadowStyle = ref<Partial<CSSStyleDeclaration>>({});
+const shadowOffset = ref(0);
+
+async function select(option: TOption) {
+    emits("select", option);
+}
+
+function getStyle(option: TOption) {
+    return {
+        color: option.icon?.color ?? "var(--color-content-liter)"
+    };
+}
+
+function onOptionMouseMove(event: MouseEvent) {
+    requestAnimationFrame(() => {
+        const optionBounding = optionTemplate.value?.getBoundingClientRect();
+        const contentBounding = shadowTemplate.value?.parentElement?.querySelector(".content")?.getBoundingClientRect();
+
+        if (!optionBounding || !contentBounding) {
+            return;
+        }
+
+        shadowStyle.value = {
+            height: `${ contentBounding.height - optionBounding.height }px`
+        };
+        shadowOffset.value = 0;
+
+        if (contentBounding.left - optionBounding.left > 0) {
+            shadowStyle.value.left = `${ event.clientX - optionBounding.left - SHADOW_THRESHOLD - optionBounding.width }px`;
+            shadowStyle.value.right = "100%";
+
+            if (contentBounding.top - optionBounding.top > -8) {
+                shadowStyle.value.top = `${ optionBounding.height }px`;
+                shadowStyle.value.clipPath = `polygon(0 0, 100% 0, 100% 100%, calc(100% - ${ SHADOW_THRESHOLD }px) 100%, 0 2px)`;
+            }
+            else {
+                shadowStyle.value.bottom = `${ optionBounding.height + (contentBounding.bottom - optionBounding.bottom) - 2 }px`;
+                shadowStyle.value.clipPath = `polygon(0 100%, 100% 100%, 100% 0, calc(100% - ${ SHADOW_THRESHOLD }px) 0, 0 calc(100% - 2px))`;
+            }
+        }
+        else {
+            shadowStyle.value.left = "100%";
+            shadowStyle.value.right = `${ - event.clientX + optionBounding.left - SHADOW_THRESHOLD }px`;
+
+            if (contentBounding.top - optionBounding.top > -8) {
+                shadowStyle.value.clipPath = `polygon(100% 0, 0 0, 0 100%, ${ SHADOW_THRESHOLD }px 100%, 100% 2px)`;
+            }
+            else {
+                shadowStyle.value.clipPath = `polygon(100% 100%, 0 100%, 0 0, ${ SHADOW_THRESHOLD }px 0, 100% calc(100% - 2px))`;
+                shadowStyle.value.bottom = `${ optionBounding.height + (contentBounding.bottom - optionBounding.bottom) - 2 }px`;
+            }
+        }
+    });
+}
+
+function onShadowMouseMove(event: MouseEvent) {
+    requestAnimationFrame(() => {
+        const optionBounding = optionTemplate.value?.getBoundingClientRect();
+        const shadowBounding = shadowTemplate.value?.getBoundingClientRect();
+        const contentBounding = shadowTemplate.value?.parentElement?.querySelector(".content")?.getBoundingClientRect();
+
+        if (contentBounding.left - optionBounding.left > 0) {
+            shadowOffset.value = Math.max(event.clientX - shadowBounding.left - SHADOW_THRESHOLD, shadowOffset.value);
+
+            if (contentBounding.top - optionBounding.top > -8) {
+                shadowStyle.value.clipPath = `polygon(${ shadowOffset.value }px 0, 100% 0, 100% 100%, calc(100% - ${ SHADOW_THRESHOLD }px) 100% ,${ shadowOffset.value }px calc(2px + ${ shadowOffset.value / shadowBounding.width * 100 }%))`;
+            }
+            else {
+                shadowStyle.value.clipPath = `polygon(${ shadowOffset.value }px 100%, 100% 100%, 100% 0, calc(100% - ${ SHADOW_THRESHOLD }px) 0, ${ shadowOffset.value }px calc(100% - 2px - ${ shadowOffset.value / shadowBounding.width * 100 }%))`;
+            }
+        }
+        else {
+            shadowOffset.value = Math.max(shadowBounding.right - event.clientX - SHADOW_THRESHOLD, shadowOffset.value);
+
+            if (contentBounding.top - optionBounding.top > -8) {
+                shadowStyle.value.clipPath = `polygon(calc(100% - ${ shadowOffset.value }px) 0, 0 0, 0 100%, 8px 100%, calc(100% - ${ shadowOffset.value }px) calc(2px + ${ shadowOffset.value / shadowBounding.width * 100 }%))`;
+            }
+            else {
+                shadowStyle.value.clipPath = `polygon(calc(100% - ${ shadowOffset.value }px) 100%, 0 100%, 0 0, 8px 0, calc(100% - ${ shadowOffset.value }px) calc(100% - 2px - ${ shadowOffset.value / shadowBounding.width * 100 }%))`;
+            }
+        }
+    });
+}
+
+function resetShadow() {
+    shadowStyle.value = {};
+}
+</script>
+
+<style scoped>
+
+
+.option {
+    padding: 0 var(--length-xxs);
+    opacity: 0.75;
+    display: flex;
+    align-items: center;
+    gap: var(--length-xxs);
+    cursor: pointer;
+
+    .icon {
+        width: 10px;
+        height: 10px;
+    }
+
+    .value {
+        flex: 1 1 0;
+    }
+
+    &.disabled {
+        cursor: default;
+        opacity: 0.5;
+    }
+
+    &.selected {
+        background: var(--color-background-2);
+        opacity: 1;
+    }
+
+    &:is(:not(.disabled), .parent):hover {
+        background: var(--color-primary-liter);
+        opacity: 1;
+    }
+
+    &.hover {
+        background: var(--color-primary-liter);
+        opacity: 1;
+
+        &.disabled {
+            opacity: 0.5;
+        }
+    }
+}
+
+.shadow-polygon {
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+}
+</style>