🟢 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 = [
  {
    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
      placeholder="Select Option"
      multiple-group
    />
  </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-2">
    <div>
      Output:
      <span class="text-primary">
        {{ selected }}
      </span>
    </div>

    <div class="w-50">
      <NSelect
        v-model="selected"
        :items
        placeholder="Select a brand"
        item-attribute="label"
      />
    </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 flex items-end>
   <NFormGroup
     label="Contributor"
     description="Select a contributor from the Vue community"
     :status="selected ? undefined : 'error'"
     :message="selected ? '' : 'This field is required'"
     required
   >
     <NSelect
       v-model="selected"
       placeholder="Options"
       :items
     />
   </NFormGroup>
 </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 flex="~ col" gap-4>
    <span class="text-sm font-medium">Dynamic colors:</span>

    <div grid="~ sm:cols-2" gap-4>
      <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>

    <hr border="base">

    <span class="text-sm font-medium">Default color:</span>

    <div>
      <NSelect
        v-model="selected"
        :items="items"
        select="outline-gray"
        placeholder="This is the gray color"
      />
    </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']

const selectedObject = ref()
const objectItems = [
  { label: 'Evan You', value: 'evan-you', _selectItem: { disabled: true } }, // disabled
  { label: 'Anthony Fu', value: 'anthony-fu' },
  { label: 'Daniel Roe', value: 'daniel-roe' },
  { label: 'Pooya Parsa', value: 'pooya-parsa', _selectItem: { disabled: true } }, // disabled
  { label: 'Sébastien Chopin', value: 'sebastien-chopin' },
  { label: 'Alexander Lichter', value: 'alexander-lichter' },
]
</script>

<template>
  <div class="flex space-x-2">
    <NSelect
      v-model="selected"
      :items
      disabled
      placeholder="Select Contributor"
      label="Vue Community"
    />

    <NSelect
      v-model="selectedObject"
      :items="objectItems"
      item-attribute="label"
      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="flex items-start gap-4">
    <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">
import { computed, provide } from 'vue'
import type { SelectRootEmits } from 'radix-vue'
import {
  useForwardPropsEmits,
} from 'radix-vue'
import type { NSelectProps } from '../../../types'
import { isEqualObject, omitProps } from '../../../utils'
import SelectRoot from './SelectRoot.vue'
import SelectTrigger from './SelectTrigger.vue'
import SelectGroup from './SelectGroup.vue'
import SelectItem from './SelectItem.vue'
import SelectLabel from './SelectLabel.vue'
import SelectContent from './SelectContent.vue'
import SelectValue from './SelectValue.vue'
import SelectSeparator from './SelectSeparator.vue'

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

const emits = defineEmits<SelectRootEmits>()

const modelValue = defineModel<any>('modelValue')

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

  return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)

const transformerValue = computed(() => {
  if (typeof modelValue.value === 'object') {
    if (forwarded.value.valueAttribute)
      return modelValue.value[forwarded.value.valueAttribute]

    if (forwarded.value.itemAttribute)
      return modelValue.value[forwarded.value.itemAttribute]
  }

  return modelValue.value
})

provide('selectModelValue', modelValue)
</script>

<template>
  <SelectRoot
    v-bind="omitProps(forwarded, ['items', 'multipleGroup', 'itemAttribute', 'placeholder', 'label', 'id', 'select'])"
    :model-value="transformerValue"
  >
    <SelectTrigger
      :id
      :size
      :status
      :select
      v-bind="forwarded._selectTrigger"
    >
      <slot name="trigger" :value="modelValue">
        <SelectValue
          v-bind="forwarded._selectValue"
          :placeholder="forwarded._selectValue?.placeholder || forwarded.placeholder"
        >
          <slot :value="modelValue">
            {{ transformerValue }}
          </slot>
        </SelectValue>
      </slot>
    </SelectTrigger>

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

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

        <!-- multiple-group -->
        <template
          v-else
        >
          <SelectGroup
            v-for="(groupItems, i) in items"
            :key="i"
            v-bind="forwarded._selectGroup"
          >
            <SelectSeparator
              v-if="i > 0"
              v-bind="forwarded._selectSeparator"
            />

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

              <template
                v-for="groupItem in groupItems.items"
                :key="groupItem"
              >
                <SelectItem
                  :value="groupItem "
                  :size="forwarded.size"
                  v-bind="{ ...forwarded._selectItem, ...groupItems?._selectItem, ...groupItem._selectItem }"
                  :is-selected="groupItem === transformerValue"
                >
                  <slot name="item" :item="groupItem">
                    {{ props.itemAttribute ? groupItem[props.itemAttribute] : groupItem }}
                  </slot>
                </SelectItem>
              </template>
            </slot>
          </SelectGroup>
        </template>
        <slot />
      </slot>
    </SelectContent>
  </SelectRoot>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  SelectContent,
  type SelectContentEmits,
  SelectPortal,
  SelectViewport,
  useForwardPropsEmits,
} from 'radix-vue'
import { cn } from '../../../utils'
import type { NSelectContentProps } from '../../../types'
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="forwarded._selectScrollUpButton"
      />
      <SelectViewport
        :class="cn(
          'select-viewport',
          position === 'popper' && 'select-viewport-popper')"
        v-bind="forwarded._selectViewport"
      >
        <slot />
      </SelectViewport>
      <SelectScrollDownButton
        v-bind="forwarded._selectScrollDownButton"
      />
    </SelectContent>
  </SelectPortal>
</template>

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

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 { computed, inject } from 'vue'
import {
  SelectItem,
  useForwardProps,
} from 'radix-vue'
import { cn } from '../../../utils'
import type { NSelectItemProps, NSelectProps } from '../../../types'
import SelectItemText from './SelectItemText.vue'
import SelectItemIndicator from './SelectItemIndicator.vue'

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

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

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
const modelValue = inject<NSelectProps>('selectModelValue')

const isSelected = computed(() => {
  return props.isSelected || modelValue === props.value
})
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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 { computed } from 'vue'
import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
import Icon from '../../elements/Icon.vue'
import { cn } from '../../../utils'
import type { NSelectScrollUpButtonProps } from '../../../types'

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 { computed } from 'vue'
import { SelectSeparator } from 'radix-vue'
import { cn } from '../../../utils'
import type { NSelectSeparator } from '../../../types'

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 { computed } from 'vue'
import { SelectTrigger, useForwardProps } from 'radix-vue'
import { cn, randomId } from '../../../utils'
import type { NSelectTriggerProps } from '../../../types'
import Button from '../../elements/Button.vue'

const props = defineProps<NSelectTriggerProps>()

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

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)

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 text = {
    info: 'text-info',
    success: 'text-success',
    warning: 'text-warning',
    error: 'text-error',
    default: '',
  }

  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: 'select-trigger-trailing-icon',
  }

  return {
    btn: btn[props.status ?? 'default'],
    text: text[props.status ?? 'default'],
    icon: icon[props.status ?? 'default'],
  }
})
</script>

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

<script setup lang="ts">
import { SelectValue } from 'radix-vue'
import type { NSelectValueProps } from '../../../types'

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

<template>
  <SelectValue
    :class="{ 'select-value': !props.placeholder }"
    v-bind="props"
  >
    <slot />
  </SelectValue>
</template>