@luna-park/design 1.0.0

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

@@ -0,0 +1,76 @@
+<template>
+    <ul
+        ref="options"
+        class="options"
+        :class="{'max-height': maxHeight, big}"
+    >
+        <template
+            v-for="option in options"
+            :key="option.id"
+        >
+            <LDropdownOption
+                :big="big"
+                :container="container"
+                :depth="depth"
+                :hover="hover"
+                :max-height="maxHeight"
+                :option="option"
+                :selected="selected"
+                @select="select"
+            />
+        </template>
+        <li
+            v-if="!options.length"
+            class="option disabled"
+        >
+            No options...
+        </li>
+    </ul>
+</template>
+
+<script setup lang="ts">
+import { TOption } from "@/components/form/dropdown/types";
+import { onMounted, useTemplateRef } from "vue";
+import LDropdownOption from "@/components/form/dropdown/LDropdownOption.vue";
+
+const props = withDefaults(defineProps<{
+    big?: boolean;
+    container?: string;
+    depth?: number;
+    hover: Array<string>;
+    maxHeight?: boolean;
+    options: Array<TOption>;
+    selected?: string | number
+}>(), {
+    depth: 0
+});
+
+const emits = defineEmits<(e: "select", value: TOption) => void>();
+const optionsTemplate = useTemplateRef("options");
+
+onMounted(() => {
+    if (optionsTemplate.value) {
+        optionsTemplate.value.querySelector(".selected")?.scrollIntoView({ block: "center" });
+    }
+});
+
+async function select(option: TOption) {
+    emits("select", option);
+}
+</script>
+
+<style scoped>
+.options {
+    overflow: hidden;
+    font-size: 0.8rem;
+
+    &.big {
+        font-size: .9rem;
+    }
+
+    &.max-height {
+        max-height: 240px;
+        overflow-y: auto;
+    }
+}
+</style>

package/src/components/form/dropdown/types.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+export type TOptions = Array<string | number | TOption> | Record<string, string>;
+
+export type TOption = {
+    action?: () => Promise<void> | void;
+    children?: Array<TOption>;
+    disabled?: boolean;
+    icon?: {
+        color?: string;
+        icon: IconDefinition | string;
+    };
+    id: string;
+    value: string;
+};

package/src/components/form/emoji-picker/LEmojiList.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="emoji-list">
+        <LEmojiListCategory
+            v-if="filter"
+            :big="big"
+            :category="result"
+            @select="$emit('select', $event)"
+        />
+        <template v-else>
+            <LEmojiListCategory
+                v-for="category in emojiCategories"
+                :key="category.name"
+                :big="big"
+                :category="category"
+                @select="$emit('select', $event)"
+            />
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { computedAsync } from "@vueuse/core";
+import LEmojiListCategory from "@/components/form/emoji-picker/LEmojiListCategory.vue";
+
+const props = defineProps<{
+    big?: boolean;
+    filter: string;
+}>();
+
+const emits = defineEmits<(e: "select", value: string) => void>();
+
+const emojiCategories = computedAsync(async () => {
+    const { emojiCategories } = await import("symbol-db/emoji");
+    return emojiCategories;
+}, {});
+
+const allEmojis = computed(() => Object.values(emojiCategories.value).flatMap((category) => category.emojis));
+
+const result = computed(() => ({
+    emojis: allEmojis.value.filter((emoji) => {
+        const searchWords = props.filter.split(" ");
+        return searchWords.every((searchWord) => emoji.search.includes(searchWord));
+    }).slice(0, 128)
+}));
+</script>
+
+<style scoped>
+.emoji-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--length-m);
+}
+</style>

package/src/components/form/emoji-picker/LEmojiListCategory.vue

@@ -0,0 +1,92 @@
+<template>
+    <div
+        class="emoji-category"
+        :class="{big}"
+    >
+        <h2 v-if="category.name">
+            {{ category.name }}
+        </h2>
+        <div class="list">
+            <div
+                v-for="emoji in category.emojis"
+                :key="emoji.name"
+                class="emoji"
+                tabindex="0"
+                :title="emoji.name"
+                @click="$emit('select', emoji.emoji)"
+                @keydown.enter="$emit('select', emoji.emoji)"
+            >
+                {{ emoji.emoji }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { TEmojiCategory } from "symbol-db/emoji";
+
+const props = defineProps<{
+    big?: boolean;
+    category: TEmojiCategory;
+}>();
+
+const emits = defineEmits<(e: "select", value: string) => void>();
+
+</script>
+
+<style scoped>
+.emoji-category {
+    display: flex;
+    flex-direction: column;
+    gap: var(--length-xxs);
+
+    h2 {
+        font-weight: 600;
+        font-size: 0.8rem;
+        padding: 0;
+        margin: 0;
+    }
+
+    &.big h2 {
+        font-size: 1.2rem;
+        color: var(--color-content-lite);
+    }
+
+    .list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
+        font-size: 1rem;
+        grid-gap: var(--length-xxxs);
+
+        .emoji {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border-radius: var(--length-radius-m);
+            border: 2px solid transparent;
+            width: 24px;
+            height: 24px;
+            overflow: hidden;
+
+            &:hover {
+                background: var(--color-primary-dark);
+            }
+
+            &:focus {
+                border: 2px dashed var(--color-primary);
+            }
+        }
+    }
+
+    &.big .list {
+        grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
+        font-size: 1.5rem;
+
+        .emoji {
+            width: 32px;
+            height: 32px;
+        }
+    }
+}
+</style>

package/src/components/form/emoji-picker/LEmojiPicker.story.vue

@@ -0,0 +1,32 @@
+<template>
+    <Story
+        :layout="{
+            type: 'grid',
+            width: '320',
+        }"
+    >
+        <Variant title="big">
+            <LEmojiPicker
+                v-model="emoji"
+                big
+            />
+        </Variant>
+        <Variant title="Small">
+            <LEmojiPicker
+                v-model="emoji"
+                small
+            />
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import LEmojiPicker from "@/components/form/emoji-picker/LEmojiPicker.vue";
+
+const emoji = ref("");
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form/emoji-picker/LEmojiPicker.vue

@@ -0,0 +1,55 @@
+<template>
+    <LFloating @show="focusSearch">
+        <LButton
+            :big="big"
+            class="button"
+            :class="{big}"
+            square
+        >
+            {{ modelValue }}
+        </LButton>
+        <template #popper>
+            <div class="popper-wrapper">
+                <LEmojiSelect
+                    :big="big"
+                    @select="$emit('update:modelValue', $event)"
+                />
+            </div>
+        </template>
+    </LFloating>
+</template>
+
+<script setup lang="ts">
+import { nextTick } from "vue";
+import LFloating from "@/components/floating/LFloating.vue";
+import LEmojiSelect from "@/components/form/emoji-picker/LEmojiSelect.vue";
+import LButton from "@/components/form/LButton.vue";
+
+const props = defineProps<{
+    big?: boolean;
+    modelValue: string;
+}>();
+
+const emits = defineEmits<(e: "update:modelValue", value: string) => void>();
+
+async function focusSearch() {
+    await nextTick();
+    const input = document.querySelector(".popper-wrapper input") as HTMLInputElement;
+    input?.focus();
+}
+</script>
+
+<style scoped>
+.button {
+    font-size: 1rem;
+
+    &.big {
+        font-size: 1.5rem;
+    }
+}
+
+.popper-wrapper {
+    padding: var(--length-s);
+    color: var(--color-content);
+}
+</style>

package/src/components/form/emoji-picker/LEmojiSelect.story.vue

@@ -0,0 +1,22 @@
+<template>
+    <Story
+        :layout="{
+            type: 'grid',
+            width: '320',
+        }"
+    >
+        <Variant title="big">
+            <LEmojiSelect big />
+        </Variant>
+        <Variant title="Small">
+            <LEmojiSelect />
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import LEmojiSelect from "@/components/form/emoji-picker/LEmojiSelect.vue";
+</script>
+
+<style scoped>
+</style>

package/src/components/form/emoji-picker/LEmojiSelect.vue

@@ -0,0 +1,51 @@
+<template>
+    <div
+        class="emoji-select"
+        :class="{big}"
+    >
+        <LInput
+            v-model="filter"
+            :big="big"
+            placeholder="Search emoji..."
+        />
+        <LEmojiList
+            :big="big"
+            class="list"
+            :filter="filter"
+            @select="$emit('select', $event)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import LInput from "@/components/form/LInput.vue";
+import LEmojiList from "@/components/form/emoji-picker/LEmojiList.vue";
+
+const filter = ref("");
+
+const props = defineProps<{
+    big?: boolean;
+}>();
+
+const emits = defineEmits<(e: "select", value: string) => void>();
+</script>
+
+<style scoped>
+.emoji-select {
+    display: flex;
+    flex-direction: column;
+    gap: var(--length-xs);
+
+    .list {
+        max-height: 200px;
+        overflow: auto;
+    }
+
+    &.big {
+        .list {
+            max-height: 280px;
+        }
+    }
+}
+</style>

package/src/components/form/icon-picker/LIconList.vue

@@ -0,0 +1,100 @@
+<template>
+    <div
+        class="icon-list"
+        :class="{big}"
+    >
+        <div
+            v-for="icon in filteredIcons"
+            :key="icon.name"
+            class="icon-wrapper"
+            tabindex="0"
+            :title="icon.name"
+            @click="$emit('select', icon.name)"
+            @keydown.enter="$emit('select', icon.name)"
+        >
+            <LIconMaterial
+                class="icon"
+                :icon="icon.name"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computedAsync } from "@vueuse/core";
+import { computed } from "vue";
+
+import LIconMaterial from "@/components/form/icon-picker/LIconMaterial.vue";
+
+const props = withDefaults(defineProps<{
+    big?: boolean;
+    filter: string;
+}>(), {
+    filter: ""
+});
+
+const emits = defineEmits<(e: "select", value: string) => void>();
+
+const iconDb = computedAsync(async () => {
+    const { icons } = await import("symbol-db/material");
+    return icons;
+}, []);
+
+const filteredIcons = computed(() => {
+    return iconDb.value.filter((icon) => {
+        const searchWords = props.filter.split(" ");
+        return searchWords.every((searchWord) => icon.search.includes(searchWord));
+    }).slice(0, 128);
+});
+</script>
+
+<style scoped>
+.icon-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
+    grid-gap: var(--length-xxxs);
+
+    .icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--length-xxxs);
+        border-radius: var(--length-radius-m);
+        cursor: pointer;
+        border: 2px solid transparent;
+        width: 24px;
+        height: 24px;
+        overflow: hidden;
+
+        .icon {
+            font-size: 16px;
+            width: 16px;
+            height: 16px;
+        }
+
+        &:focus {
+            border: 2px dashed var(--color-primary);
+        }
+
+        &:hover {
+            background-color: var(--color-primary-dark);
+        }
+    }
+
+    &.big {
+        grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
+        padding: var(--length-xxs);
+
+        .icon-wrapper{
+            width: 32px;
+            height: 32px;
+
+            .icon {
+                font-size: 24px;
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+}
+</style>

package/src/components/form/icon-picker/LIconMaterial.vue

@@ -0,0 +1,43 @@
+<template>
+    <span
+        class="icon"
+        :class="{spin}"
+    >
+        {{ icon }}
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    icon: string;
+    spin?: boolean;
+}>();
+</script>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,1,-25');
+
+.icon {
+    font-family: 'Material Symbols Rounded', sans-serif;
+    text-rendering: optimizelegibility;
+    font-feature-settings: "liga";
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.spin {
+        animation: spin 2s linear infinite;
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>

package/src/components/form/icon-picker/LIconPicker.story.vue

@@ -0,0 +1,39 @@
+<template>
+    <Story
+        :layout="{
+            type: 'grid',
+            width: '320',
+        }"
+    >
+        <Variant title="big">
+            <LIconPicker
+                v-model="icon"
+                big
+            />
+        </Variant>
+        <Variant title="Small">
+            <LIconPicker
+                v-model="icon"
+                small
+            />
+        </Variant>
+        <Variant title="Small with-emoji">
+            <LIconPicker
+                v-model="icon"
+                small
+                with-emoji
+            />
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import LIconPicker from "@/components/form/icon-picker/LIconPicker.vue";
+
+const icon = ref("");
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form/icon-picker/LIconPicker.vue

@@ -0,0 +1,92 @@
+<template>
+    <LFloating @show="focusSearch">
+        <LButton
+            :big="big"
+            :borderless="borderless"
+            class="button"
+            :class="{big}"
+            :small="small"
+            square
+            :title="value"
+        >
+            <div class="icon-wrapper">
+                <LIconMaterial
+                    class="icon"
+                    :icon="value"
+                />
+            </div>
+        </LButton>
+        <template #popper>
+            <div class="popper-wrapper">
+                <LIconSelect
+                    :big="big"
+                    :with-emoji="withEmoji"
+                    @select="value = $event"
+                />
+            </div>
+        </template>
+    </LFloating>
+</template>
+
+<script setup lang="ts">
+import { nextTick } from "vue";
+import LFloating from "@/components/floating/LFloating.vue";
+import LButton from "@/components/form/LButton.vue";
+import LIconSelect from "@/components/form/icon-picker/LIconSelect.vue";
+import LIconMaterial from "@/components/form/icon-picker/LIconMaterial.vue";
+
+const props = defineProps<{
+    big?: boolean;
+    borderless?: boolean;
+    small?: boolean;
+    withEmoji?: boolean;
+}>();
+
+const value = defineModel<string>({ default: "" });
+
+async function focusSearch() {
+    await nextTick();
+    const input = document.querySelector(".popper-wrapper input") as HTMLInputElement;
+    input?.focus();
+}
+</script>
+
+<style scoped>
+.button {
+    .icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+            font-size: 1rem;
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+
+    &.big {
+        .icon-wrapper {
+            .icon {
+                font-size: 1.5rem;
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+        }
+    }
+
+    &.small {
+        .icon-wrapper {
+            .icon {
+                font-size: 0.8rem;
+                width: 0.8rem;
+                height: 0.8rem;
+            }
+        }
+    }
+}
+
+.popper-wrapper {
+    padding: var(--length-s);
+    color: var(--color-content);
+}
+</style>

package/src/components/form/icon-picker/LIconSelect.story.vue

@@ -0,0 +1,25 @@
+<template>
+    <Story
+        :layout="{
+            type: 'grid',
+            width: '320',
+        }"
+    >
+        <Variant title="big">
+            <LIconSelect big />
+        </Variant>
+        <Variant title="Small">
+            <LIconSelect />
+        </Variant>
+        <Variant title="Small with emoji">
+            <LIconSelect with-emoji />
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import LIconSelect from "@/components/form/icon-picker/LIconSelect.vue";
+</script>
+
+<style scoped>
+</style>