<template>
    <div class="bg-dark text-white rounded-1 mb-2 p-3">
        Data: {{ example1.value }}
    </div>
    <Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import Multiselect from "@vueform/multiselect";

    const example1 = ref({
        value: 0,
        options: ["Batman", "Robin", "Joker"],
    });
</script>

<template>
    <div class="bg-dark text-white rounded-1 mb-2 p-3">
        Data: {{ example2.value }}
    </div>
    <Multiselect v-model="example2.value" v-bind="example2"></Multiselect>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import Multiselect from "@vueform/multiselect";

    const example2 = ref({
        mode: "multiple",
        value: ["robin"],
        options: {
            batman: "Batman",
            robin: "Robin",
            joker: "Joker",
        },
    });
</script>

<template>
    <div class="bg-dark text-white rounded-1 mb-2 p-3">
        Data: {{ example3.value }}
    </div>
    <Multiselect v-model="example3.value" v-bind="example3"></Multiselect>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import Multiselect from "@vueform/multiselect";

    const example3 = ref({
        mode: "multiple",
        value: [],
        options: [
            { value: "batman", label: "Batman" },
            { value: "robin", label: "Robin", disabled: true },
            { value: "joker", label: "Joker" },
        ],
    });
</script>

<template>
    <div class="bg-dark text-white rounded-1 mb-2 p-3">
        Data: {{ example4.value }}
    </div>
    <Multiselect v-model="example4.value" v-bind="example4"></Multiselect>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import Multiselect from "@vueform/multiselect";

    const example4 = ref({
        mode: "tags",
        value: ["batman"],
        options: [
            { value: "batman", label: "Batman" },
            { value: "robin", label: "Robin" },
            { value: "joker", label: "Joker" },
        ],
        searchable: true,
        createTag: true,
    });
</script>

<template>
    <div class="bg-dark text-white rounded-1 mb-2 p-3">
        Data: {{ example5.value }}
    </div>
    <Multiselect v-model="example5.value" v-bind="example5">
        <template v-slot:singlelabel="{ value }">
            <div class="multiselect-single-label">
                <img class="character-label-icon" :src="value.icon" />
                {{ value.name }}
            </div>
        </template>

        <template v-slot:option="{ option }">
            <img class="character-option-icon" :src="option.icon" />
            {{ option.name }}
        </template>
    </Multiselect>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import Multiselect from "@vueform/multiselect";

    const example5 = ref({
        value: null,
        placeholder: "Select your character",
        label: "name",
        options: [
            {
                value: "captainamerica",
                name: "Captain America",
                icon: "https://cdn2.iconfinder.com/data/icons/avengers-filled/48/03_-_Captain_America_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png",
            },
            {
                value: "spiderman",
                name: "Spiderman",
                icon: "https://cdn2.iconfinder.com/data/icons/avengers-filled/48/12_-_Spiderman_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png",
            },
            {
                value: "ironman",
                name: "Iron Man",
                icon: "https://cdn2.iconfinder.com/data/icons/avengers-filled/48/02_-_IRONMAN_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png",
            },
        ],
    });
</script>

<style scoped>
    .character-option-icon {
        margin: 0 6px 0 0;
        height: 22px;
    }

    .character-label-icon {
        margin: 0 6px 0 0;
        height: 26px;
    }
</style>

<template>
    <div class="bg-dark text-white rounded-1 mb-2 p-3">
        Data: {{ example7.value }}
    </div>
    <Multiselect v-model="example7.value" v-bind="example7">
        <template v-slot:tag="{ option, handleTagRemove, disabled }">
            <div class="multiselect-tag is-user">
                <img :src="option.image" />
                {{ option.name }}
                <i
                        v-if="!disabled"
                        @click.prevent
                        @mousedown.prevent.stop="handleTagRemove(option, $event)"
                ></i>
            </div>
        </template>

        <template v-slot:option="{ option }">
            <img class="user-image" :src="option.image" /> {{ option.name }}
        </template>
    </Multiselect>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import Multiselect from "@vueform/multiselect";

    const example7 = ref({
        mode: "tags",
        value: [],
        placeholder: "Select employees",
        search: true,
        trackBy: "name",
        label: "name",
        options: [
            {
                value: "judy",
                name: "Judy",
                image: "https://randomuser.me/api/portraits/med/women/1.jpg",
            },
            {
                value: "jane",
                name: "Jane",
                image: "https://randomuser.me/api/portraits/med/women/2.jpg",
            },
            {
                value: "john",
                name: "John",
                image: "https://randomuser.me/api/portraits/med/men/1.jpg",
            },
            {
                value: "joe",
                name: "Joe",
                image: "https://randomuser.me/api/portraits/med/men/2.jpg",
            },
        ],
    });
</script>

<style>
    .multiselect-tag.is-user {
        padding: 5px 8px;
        border-radius: 22px;
        background: #35495e;
        margin: 3px 3px 8px;
    }

    .multiselect-tag.is-user img {
        width: 18px;
        border-radius: 50%;
        height: 18px;
        margin-right: 8px;
        border: 2px solid #ffffffbf;
    }

    .multiselect-tag.is-user i:before {
        color: #ffffff;
        border-radius: 50%;
    }

    .user-image {
        margin: 0 6px 0 0;
        border-radius: 50%;
        height: 22px;
    }
</style>