SelectMenu

<script setup lang="ts">
import type { SelectMenuItem } from 'pohon-ui'


const items = ref<SelectMenuItem[]>([
  {
    label: 'Backlog',
    id: 'backlog'
  },
  {
    label: 'Todo',
    id: 'todo'
  },
  {
    label: 'In Progress',
    id: 'in_progress'
  },
  {
    label: 'Done',
    id: 'done'
  }
])
const value = ref('todo')
</script>

<template>
  <PSelectMenu v-model="value" value-key="id" :items="items" class="w-48" />
</template>

<script setup lang="ts">
import type { SelectMenuItem } from 'pohon-ui'


const items = ref<SelectMenuItem[]>([
  {
    type: 'label',
    label: 'Fruits'
  },
  'Apple',
  'Banana',
  'Blueberry',
  'Grapes',
  'Pineapple',
  {
    type: 'separator'
  },
  {
    type: 'label',
    label: 'Vegetables'
  },
  'Aubergine',
  'Broccoli',
  'Carrot',
  'Courgette',
  'Leek'
])
const value = ref('Apple')
</script>

<template>
  <PSelectMenu v-model="value" :items="items" class="w-48" />
</template>

<script setup lang="ts">
import type { PSelectMenuItem } from 'pohon-ui';
import { ref } from 'vue';

const items = ref([
  {
    label: 'Backlog',
    value: 'backlog',
    icon: 'i-lucide:circle-help',
  },
  {
    label: 'Todo',
    value: 'todo',
    icon: 'i-lucide:circle-plus',
  },
  {
    label: 'In Progress',
    value: 'in_progress',
    icon: 'i-lucide:circle-arrow-up',
  },
  {
    label: 'Done',
    value: 'done',
    icon: 'i-lucide:circle-check',
  },
] satisfies Array<PSelectMenuItem>);

const value = ref(items.value[0]);
</script>

<template>
  <PSelectMenu
    v-model="value"
    :icon="value?.icon"
    :items="items"
    class="w-48"
  />
</template>

<script setup lang="ts">
import type { PSelectMenuItem } from 'pohon-ui';
import { ref } from 'vue';

const items = ref([
  {
    label: 'praburangki',
    value: 'praburangki',
    avatar: {
      src: 'https://github.com/praburangki.png',
      alt: 'praburangki',
    },
  },
  {
    label: 'wahyu-ivan',
    value: 'wahyu-ivan',
    avatar: {
      src: 'https://github.com/wahyu-ivan.png',
      alt: 'wahyu-ivan',
    },
  },
  {
    label: 'GunawanAhmad',
    value: 'GunawanAhmad',
    avatar: {
      src: 'https://github.com/GunawanAhmad.png',
      alt: 'GunawanAhmad',
    },
  },
  {
    label: 'sandros94',
    value: 'sandros94',
    avatar: {
      src: 'https://github.com/sandros94.png',
      alt: 'sandros94',
    },
  },
] satisfies Array<PSelectMenuItem>);

const value = ref(items.value[0]);
</script>

<template>
  <PSelectMenu
    v-model="value"
    :avatar="value?.avatar"
    :items="items"
    class="w-48"
  />
</template>

<script setup lang="ts">
import type { PChipProps, PSelectMenuItem } from 'pohon-ui';
import { ref } from 'vue';

const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
      color: 'error',
    },
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
      color: 'success',
    },
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
      color: 'info',
    },
  },
] satisfies Array<PSelectMenuItem>);

const value = ref(items.value[0]);
</script>

<template>
  <PSelectMenu
    v-model="value"
    :items="items"
    class="w-48"
  >
    <template #leading="{ modelValue, pohon }">
      <PChip
        v-if="modelValue"
        v-bind="modelValue.chip"
        inset
        standalone
        :size="(pohon.itemLeadingChipSize() as PChipProps['size'])"
        :class="pohon.itemLeadingChip()"
      />
    </template>
  </PSelectMenu>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const items = ref(['Backlog', 'Todo', 'In Progress', 'Done']);
const value = ref('Backlog');

function onCreate(item: string) {
  items.value.push(item);

  value.value = item;
}
</script>

<template>
  <PSelectMenu
    v-model="value"
    create-item
    :items="items"
    class="w-48"
    @create="onCreate"
  />
</template>

<script setup lang="ts">
import type { PAvatarProps } from 'pohon-ui';
import { useFetch } from '#app';

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users',
  transform: (data: Array<{ id: number; name: string }>) => {
    return data?.map((user) => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` },
    }));
  },
  lazy: true,
});
</script>

<template>
  <PSelectMenu
    :items="users"
    :loading="status === 'pending'"
    icon="i-lucide:user"
    placeholder="Select user"
    class="w-48"
  >
    <template #leading="{ modelValue, pohon }">
      <PAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(pohon.leadingAvatarSize() as PAvatarProps['size'])"
        :class="pohon.leadingAvatar()"
      />
    </template>
  </PSelectMenu>
</template>

<script setup lang="ts">
import type { PAvatarProps } from 'pohon-ui';
import { useFetch } from '#app';
import { refDebounced } from '@vueuse/core';
import { ref } from 'vue';

const searchTerm = ref('');
const searchTermDebounced = refDebounced(searchTerm, 200);

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  params: { q: searchTermDebounced },
  transform: (data: Array<{ id: number; name: string }>) => {
    return data?.map((user) => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` },
    }));
  },
  lazy: true,
});
</script>

<template>
  <PSelectMenu
    v-model:search-term="searchTerm"
    :items="users"
    :loading="status === 'pending'"
    ignore-filter
    icon="i-lucide:user"
    placeholder="Select user"
    class="w-48"
  >
    <template #leading="{ modelValue, pohon }">
      <PAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(pohon.leadingAvatarSize() as PAvatarProps['size'])"
        :class="pohon.leadingAvatar()"
      />
    </template>
  </PSelectMenu>
</template>

<script setup lang="ts">
import type { PAvatarProps } from 'pohon-ui';
import { useFetch } from '#app';

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: Array<{ id: number; name: string; email: string }>) => {
    return data?.map((user) => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` },
    }));
  },
  lazy: true,
});
</script>

<template>
  <PSelectMenu
    :items="users"
    :loading="status === 'pending'"
    :filter-fields="['label', 'email']"
    icon="i-lucide:user"
    placeholder="Select user"
    class="w-80"
  >
    <template #leading="{ modelValue, pohon }">
      <PAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(pohon.leadingAvatarSize() as PAvatarProps['size'])"
        :class="pohon.leadingAvatar()"
      />
    </template>

    <template #item-label="{ item }">
      {{ item.label }}

      <span class="color-text-muted">
        {{ item.email }}
      </span>
    </template>
  </PSelectMenu>
</template>

<script setup lang="ts">
import { useInfiniteScroll } from '@vueuse/core'

type User = {
  firstName: string
}

type UserResponse = {
  users: Array<User>
  total: number
  skip: number
  limit: number
}

const skip = ref(0)

const { data, status, execute } = await useFetch(
  'https://dummyjson.com/users?limit=10&select=firstName',
  {
    key: 'select-menu-users-infinite-scroll',
    params: { skip },
    transform: (data?: UserResponse) => {
      return data?.users.map((user) => user.firstName)
    },
    lazy: true,
    immediate: false
  }
)

const users = ref<Array<string>>([])

watch(data, () => {
  users.value = [...users.value, ...(data.value || [])]
})

execute()

const selectMenu = useTemplateRef('selectMenu')

onMounted(() => {
  useInfiniteScroll(
    () => selectMenu.value?.viewportRef,
    () => {
      skip.value += 10
    },
    {
      canLoadMore: () => {
        return status.value !== 'pending'
      }
    }
  )
})
</script>

<template>
  <PSelectMenu ref="selectMenu" placeholder="Select user" :items="users" />
</template>

<script setup lang="ts">
import { useFetch } from '#app';

const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: Array<{ id: number; name: string; email: string }>) => {
    return data?.map((user) => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` },
    }));
  },
  lazy: true,
});
</script>

<template>
  <PSelectMenu
    :items="users"
    icon="i-lucide:user"
    placeholder="Select user"
    :pohon="{ content: 'min-w-fit' }"
    class="w-48"
  >
    <template #item-label="{ item }">
      {{ item.label }}

      <span class="color-text-muted">
        {{ item.email }}
      </span>
    </template>
  </PSelectMenu>
</template>

<script setup lang="ts">
import { useLazyFetch } from '#app';

const { data: countries, status, execute } = await useLazyFetch<Array<{
  name: string;
  code: string;
  emoji: string;
}>>('/api/countries.json', {
  immediate: false,
});

function onOpen() {
  if (!countries.value?.length) {
    execute();
  }
}
</script>

<template>
  <PSelectMenu
    :items="countries"
    :loading="status === 'pending'"
    label-key="name"
    :search-input="{ icon: 'i-lucide:search' }"
    placeholder="Select country"
    class="w-48"
    @update:open="onOpen"
  >
    <template #leading="{ modelValue, pohon }">
      <span
        v-if="modelValue"
        class="text-center size-5"
      >
        {{ modelValue?.emoji }}
      </span>
      <PIcon
        v-else
        name="i-lucide:earth"
        :class="pohon.leadingIcon()"
      />
    </template>
    <template #item-leading="{ item }">
      <span class="text-center size-5">
        {{ item.emoji }}
      </span>
    </template>
  </PSelectMenu>
</template>