Select

<script setup lang="ts">
const selected = ref()
const items = ['Evan You', 'Anthony Fu', 'Daniel Roe', 'Pooya Parsa', 'Sébastien Chopin', 'Alexander Lichter']
</script>

<template>
  <div class="max-w-50">
    <NSelect
      v-model="selected"
      :items
      placeholder="Select Contributor"
      label="Vue Community"
    />
  </div>
</template>

<script setup lang="ts">
const selected = ref([])
const items = ['Evan You', 'Anthony Fu', 'Daniel Roe', 'Pooya Parsa', 'Sébastien Chopin', 'Alexander Lichter']
</script>

<template>
  <div class="space-y-4">
    <div class="max-w-50">
      <NSelect
        v-model="selected"
        :items
        multiple
        placeholder="Select Contributors"
        label="Vue Community"
      />
    </div>
    <div class="text-sm text-muted">
      Selected: {{ selected.join(', ') }}
    </div>
  </div>
</template>

<script setup lang="ts">
const selected = ref()
const items = ['Evan You', 'Anthony Fu', 'Daniel Roe', 'Pooya Parsa', 'Sébastien Chopin', 'Alexander Lichter']
</script>

<template>
  <div class="max-w-50">
    <NSelect
      v-model="selected"
      :items
      disabled
      placeholder="Select Contributor"
      label="Vue Community (Disabled)"
    />
  </div>
</template>

<script setup lang="ts">
const selected = ref()
const items = [
  {
    label: 'A',
    items: ['Apple', 'Aeroplane', 'Ant'],
  },
  {
    label: 'B',
    items: ['Banana', 'Ball', 'Bat'],
  },
  {
    label: 'C',
    items: ['Cat', 'Car', 'Cup'],
  },
  {
    label: 'D',
    items: ['Dog', 'Duck', 'Doll'],
  },
]
</script>

<template>
  <div class="max-w-50">
    <NSelect
      v-model="selected"
      :items
      group
      placeholder="Select Option"
    />
  </div>
</template>

<script setup lang="ts">
const items = [
  {
    code: '81253',
    label: 'Ford',
  },
  {
    code: '29932',
    label: 'Chevrolet',
  },
  {
    code: '54509',
    label: 'Dodge',
  },
  {
    code: '94253',
    label: 'Toyota',
  },
]

const selected = ref()
</script>

<template>
  <div class="space-y-4">
    Output:
    <span class="text-primary-500">
      {{ selected }}
    </span>

    <div class="w-64">
      <NSelect
        v-model="selected"
        :items
        placeholder="Select a brand"
        item-key="label"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'

const formSchema = toTypedSchema(z.object({
  contributor: z.string().min(1, 'This field is required'),
}))

useForm({
  validationSchema: formSchema,
  validateOnMount: true,
})

const selected = ref<string>()
const items = ['Evan You', 'Anthony Fu', 'Daniel Roe', 'Pooya Parsa', 'Sébastien Chopin', 'Alexander Lichter']
</script>

<template>
  <form>
    <div class="flex items-end">
      <NFormField
        name="contributor"
        label="Contributor"
        description="Select a contributor from the Vue community"
        required
      >
        <NSelect
          v-model="selected"
          placeholder="Options"
          :items="items"
        />
      </NFormField>
    </div>
  </form>
</template>

<script setup lang="ts">
const selected = ref()
const items = ['Evan You', 'Anthony Fu', 'Daniel Roe', 'Pooya Parsa', 'Sébastien Chopin', 'Alexander Lichter']
</script>

<template>
  <div class="grid gap-4 sm:grid-cols-3">
    <NSelect
      v-model="selected"
      :items="items"
      select="outline-white"
      placeholder="This is the gray color"
    />

    <NSelect
      v-model="selected"
      :items="items"
      select="outline-primary"
      select-item="primary"
      placeholder="This is the primary color (default)"
    />

    <NSelect
      v-model="selected"
      :items="items"
      select="soft-rose"
      select-item="rose"
      placeholder="This is the rose color"
    />
  </div>
</template>

<script setup lang="ts">
const selected = ref()
const items = ['Evan You', 'Anthony Fu', 'Daniel Roe', 'Pooya Parsa', 'Sébastien Chopin', 'Alexander Lichter']
</script>

<template>
  <div class="grid gap-4 sm:grid-cols-2">
    <NSelect
      v-model="selected"
      :items
      placeholder="Select Contributor"
      label="Vue Community"
    />

    <NSelect
      v-model="selected"
      :items
      size="md"
      placeholder="Select Contributor"
      label="Vue Community"
    />
  </div>
</template>

<script setup lang="ts">
const items = [
  {
    name: 'Evan You',
    avatar: 'https://avatars.githubusercontent.com/u/499550?v=4',
  },
  {
    name: 'Anthony Fu',
    avatar: 'https://avatars.githubusercontent.com/u/11247099?v=4',
  },
  {
    name: 'Daniel Roe',
    avatar: 'https://avatars.githubusercontent.com/u/28706372?v=4',
  },
]
const selected = ref(items[0])
</script>

<template>
  <div class="max-w-50">
    <NSelect
      v-model="selected"
      :items
      placeholder="Select Contributor"
      label="Vue Community"
      :_select-trigger="{
        una: {
          selectTriggerTrailingIcon: 'i-lucide-chevrons-up-down',
        },
      }"
    >
      <template #label="{ label }">
        <div class="flex flex-col space-y-0.5">
          <span class="text-primary">{{ label }}</span>
          <span class="text-xs text-muted">Mini example list of contributors</span>
        </div>
      </template>

      <template #item="{ item }">
        <div class="flex items-center space-x-2">
          <img
            :src="item.avatar"
            :alt="item.name"
            class="h-6 w-6 rounded-full"
          >
          <span>{{ item.name }}</span>
        </div>
      </template>

      <template #value>
        <div class="flex items-center space-x-2">
          <img
            :src="selected?.avatar"
            :alt="selected?.name"
            class="h-6 w-6 rounded-full"
          >
          <span>{{ selected?.name }}</span>
        </div>
      </template>
    </NSelect>
  </div>
</template>

<script lang="ts">
import type { AcceptableValue, SelectRootEmits } from 'reka-ui'
import type { NSelectProps, SelectGroup as SelectGroupType } from '../../../types'
</script>

<script setup lang="ts" generic="T extends AcceptableValue">
import { reactivePick } from '@vueuse/core'
import { useForwardPropsEmits } from 'reka-ui'
import { isEqualObject } from '../../../utils'
import SelectContent from './SelectContent.vue'
import SelectGroup from './SelectGroup.vue'
import SelectItem from './SelectItem.vue'
import SelectLabel from './SelectLabel.vue'
import SelectRoot from './SelectRoot.vue'
import SelectSeparator from './SelectSeparator.vue'
import SelectTrigger from './SelectTrigger.vue'
import SelectValue from './SelectValue.vue'

const props = withDefaults(defineProps<NSelectProps<T>>(), {
  size: 'sm',
})

const emits = defineEmits<SelectRootEmits>()

const rootProps = reactivePick(props, [
  'modelValue',
  'defaultValue',
  'multiple',
  'disabled',
])
const forwarded = useForwardPropsEmits(rootProps, emits)

function formatSelectedValue(value: unknown) {
  if (!value || (Array.isArray(value) && value.length === 0))
    return null

  if (props.multiple && Array.isArray(value)) {
    return value.map((val) => {
      if (props.valueKey && typeof val === 'object') {
        return (val as Record<string, any>)[props.valueKey as string]
      }
      return val
    }).join(', ')
  }

  if (props.valueKey && typeof value === 'object') {
    return (value as Record<string, any>)[props.valueKey as string]
  }

  return value
}

function isItemSelected(item: unknown, modelValue: unknown) {
  if (!modelValue)
    return false

  if (props.multiple && Array.isArray(modelValue)) {
    return modelValue.some((val) => {
      const valObj = typeof val === 'object' && val ? val : { value: val }
      const itemObj = typeof item === 'object' && item ? item : { value: item }
      return isEqualObject(valObj, itemObj)
    })
  }

  const modelObj = typeof modelValue === 'object' && modelValue ? modelValue : { value: modelValue }
  const itemObj = typeof item === 'object' && item ? item : { value: item }
  return isEqualObject(modelObj, itemObj)
}
</script>

<template>
  <SelectRoot
    v-slot="{ modelValue, open }"
    v-bind="forwarded"
  >
    <SelectTrigger
      :id
      :size
      :status
      :select
      v-bind="props._selectTrigger"
    >
      <slot name="trigger" :model-value :open="open">
        <SelectValue
          :placeholder="props.placeholder"
          v-bind="props._selectValue"
          :aria-label="formatSelectedValue(modelValue)"
          :data-status="status"
        >
          <slot name="value" :model-value :open>
            {{ formatSelectedValue(modelValue) || props.placeholder }}
          </slot>
        </SelectValue>
      </slot>
    </SelectTrigger>

    <SelectContent
      :size
      v-bind="{
        ..._selectContent,
        _selectScrollDownButton,
        _selectScrollUpButton,
      }"
    >
      <slot name="content" :items="items">
        <template v-if="!group">
          <SelectLabel
            v-if="label"
            v-bind="_selectLabel"
          >
            <slot name="label" :label>
              {{ label }}
            </slot>
          </SelectLabel>

          <template
            v-for="item in items"
            :key="item"
          >
            <SelectItem
              :value="item"
              :size="size"
              v-bind="props._selectItem"
              :is-selected="isItemSelected(item, modelValue)"
            >
              <slot name="item" :item="item">
                {{ props.itemKey && item ? (item as any)[props.itemKey] : item }}
              </slot>
            </SelectItem>
          </template>
        </template>

        <template v-if="group">
          <SelectGroup
            v-for="(group, i) in items as SelectGroupType<T>[]"
            :key="i"
            v-bind="props._selectGroup"
          >
            <SelectSeparator
              v-if="i > 0"
              v-bind="props._selectSeparator"
            />

            <slot name="group" :items="group">
              <SelectLabel
                v-if="group.label"
                :size="size"
                v-bind="{ ...props._selectLabel, ...group._selectLabel }"
              >
                <slot name="label" :label="group.label">
                  {{ group.label }}
                </slot>
              </SelectLabel>

              <template
                v-for="item in group.items"
                :key="item"
              >
                <SelectItem
                  :value="item"
                  :size="size"
                  v-bind="{ ..._selectItem, ...group._selectItem }"
                  :is-selected="isItemSelected(item, modelValue)"
                >
                  <slot name="item" :item="item">
                    {{ props.itemKey ? (item as any)[props.itemKey] : item }}
                  </slot>
                </SelectItem>
              </template>
            </slot>
          </SelectGroup>
        </template>
        <slot />
      </slot>
    </SelectContent>
  </SelectRoot>
</template>

<script setup lang="ts">
import type { SelectContentEmits } from 'reka-ui'
import type { NSelectContentProps } from '../../../types'
import {
  SelectContent,
  SelectPortal,
  SelectViewport,
  useForwardPropsEmits,
} from 'reka-ui'
import { computed } from 'vue'
import { cn } from '../../../utils'
import SelectScrollDownButton from './SelectScrollDownButton.vue'
import SelectScrollUpButton from './SelectScrollUpButton.vue'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(
  defineProps<NSelectContentProps>(),
  {
    position: 'popper',
  },
)
const emits = defineEmits<SelectContentEmits>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <SelectPortal>
    <SelectContent
      v-bind="{ ...forwarded, ...$attrs }"
      :class="cn(
        'select-content',
        position === 'popper'
          && 'select-content-popper',
        props.class,
      )
      "
    >
      <SelectScrollUpButton
        v-bind="_selectScrollUpButton"
      />
      <SelectViewport
        :class="cn(
          'select-viewport',
          position === 'popper' && 'select-viewport-popper')"
      >
        <slot />
      </SelectViewport>
      <SelectScrollDownButton
        v-bind="_selectScrollDownButton"
      />
    </SelectContent>
  </SelectPortal>
</template>

<script setup lang="ts">
import type { NSelectGroupProps } from '../../../types'
import { SelectGroup } from 'reka-ui'
import { computed } from 'vue'
import { cn } from '../../../utils'

const props = defineProps<NSelectGroupProps>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <SelectGroup :class="cn('select-group', props.class)" v-bind="delegatedProps">
    <slot />
  </SelectGroup>
</template>

<script setup lang="ts">
import type { NSelectItemProps } from '../../../types'
import {
  SelectItem,
  useForwardProps,
} from 'reka-ui'
import { computed } from 'vue'
import { cn } from '../../../utils'
import SelectItemIndicator from './SelectItemIndicator.vue'
import SelectItemText from './SelectItemText.vue'

const props = withDefaults(defineProps<NSelectItemProps>(), {})

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <SelectItem
    v-bind="forwardedProps"
    :class="
      cn(
        'select-item',
        props.class,
        props.una?.selectItem,
      )
    "
    :select-item
  >
    <SelectItemIndicator
      v-if="isSelected"
      v-bind="props._selectItemIndicator"
    >
      <slot name="item-indicator" />
    </SelectItemIndicator>

    <SelectItemText
      v-bind="props._selectItemText"
    >
      <slot />
    </SelectItemText>
  </SelectItem>
</template>

<script setup lang="ts">
import type { NSelectItemTextProps } from '../../../types'
import { SelectItemText } from 'reka-ui'

const props = defineProps<NSelectItemTextProps>()
</script>

<template>
  <SelectItemText v-bind="props">
    <slot />
  </SelectItemText>
</template>

<script setup lang="ts">
import type { NSelectLabelProps } from '../../../types'
import { SelectLabel } from 'reka-ui'
import { cn } from '../../../utils'

const props = defineProps<NSelectLabelProps>()
</script>

<template>
  <SelectLabel :class="cn('select-label', props.class)">
    <slot />
  </SelectLabel>
</template>

<script setup lang="ts">
import type { SelectRootEmits } from 'reka-ui'
import type { NSelectRootProps } from '../../../types'
import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '../../../utils'

const props = defineProps<NSelectRootProps>()
const emits = defineEmits<SelectRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <SelectRoot
    v-slot="slotProps"
    :class="cn(
      'select-root',
      props.class,
      props.una?.selectRoot,
    )"
    v-bind="forwarded"
  >
    <slot
      v-bind="slotProps"
    />
  </SelectRoot>
</template>

<script setup lang="ts">
import type { NSelectScrollDownButtonProps } from '../../../types'
import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
import { computed } from 'vue'
import { cn } from '../../../utils'
import Icon from '../../elements/Icon.vue'

const props = defineProps<NSelectScrollDownButtonProps>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('select-scroll-down-button', props.class)">
    <slot>
      <Icon
        :name="forwardedProps?.una?.selectScrollDownButtonIcon || 'select-scroll-down-button-icon'"
      />
    </slot>
  </SelectScrollDownButton>
</template>

<script setup lang="ts">
import type { NSelectScrollUpButtonProps } from '../../../types'
import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
import { computed } from 'vue'
import { cn } from '../../../utils'
import Icon from '../../elements/Icon.vue'

const props = defineProps<NSelectScrollUpButtonProps>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('select-scroll-up-button', props.class)">
    <slot>
      <Icon
        :name="forwardedProps?.una?.selectScrollUpButtonIcon || 'select-scroll-up-button-icon'"
      />
    </slot>
  </SelectScrollUpButton>
</template>

<script setup lang="ts">
import type { NSelectSeparator } from '../../../types'
import { SelectSeparator } from 'reka-ui'
import { computed } from 'vue'
import { cn } from '../../../utils'

const props = defineProps<NSelectSeparator>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <SelectSeparator v-bind="delegatedProps" :class="cn('select-separator', props.class)" />
</template>

<script setup lang="ts">
import type { NSelectTriggerProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
import { computed } from 'vue'
import { cn, randomId } from '../../../utils'
import Button from '../../elements/Button.vue'
import Icon from '../../elements/Icon.vue'

const props = defineProps<NSelectTriggerProps>()

const forwardedProps = useForwardProps(reactiveOmit(props, 'class', 'status', 'una'))

const statusClassVariants = computed(() => {
  const btn = {
    info: 'btn-outline-info',
    success: 'btn-outline-success',
    warning: 'btn-outline-warning',
    error: 'btn-outline-error',
    default: props.select ? `select-${props.select}` : 'select-default-variant',
  }

  const icon = {
    info: props.una?.selectTriggerInfoIcon ?? 'select-trigger-info-icon',
    success: props.una?.selectTriggerSuccessIcon ?? 'select-trigger-success-icon',
    warning: props.una?.selectTriggerWarningIcon ?? 'select-trigger-warning-icon',
    error: props.una?.selectTriggerErrorIcon ?? 'select-trigger-error-icon',
    default: props.una?.selectTriggerTrailingIcon ?? 'select-trigger-trailing-icon',
  }

  return {
    btn: btn[props.status ?? 'default'],
    icon: icon[props.status ?? 'default'],
  }
})

const id = computed(() => props.id ?? randomId('select-trigger'))
</script>

<template>
  <SelectTrigger
    as-child
  >
    <Button
      v-bind="forwardedProps"
      :id
      :data-status="status"
      :class="cn(
        'select-trigger justify-between font-normal',
        props.class,
      )"
      :una="{
        ...props.una,
        ...{
          btnLeading: cn(
            'select-trigger-leading',
            props.una?.btnLeading,
          ),
          btnDefaultVariant: statusClassVariants.btn,
        },
      }"
    >
      <slot />

      <template #trailing>
        <SelectIcon
          as-child
        >
          <Icon
            :data-status="status"
            :name="statusClassVariants.icon"
            :class="cn(
              'select-trigger-trailing',
              props.una?.btnTrailing,
            )"
          />
        </SelectIcon>
      </template>
    </Button>
  </SelectTrigger>
</template>

<script setup lang="ts">
import type { NSelectValueProps } from '../../../types'
import { SelectValue } from 'reka-ui'
import { cn } from '../../../utils'

const props = defineProps<NSelectValueProps>()
</script>

<template>
  <SelectValue
    :class="cn('select-value', props.class)"
    v-bind="props"
  >
    <slot />
  </SelectValue>
</template>