Select ​

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

// Fruit
const selectedFruit = ref()
const fruits = ['banana', 'apple', 'watermelon', 'orange']

// Framework
const selectedFramework = ref()
const frameworks = [
  { text: 'VueJS', value: 'vue' },
  { text: 'ReactJS', value: 'react' },
  { text: 'AngularJS', value: 'angular' },
  { text: 'SolidJS', value: 'solid' },
  { text: 'AlpineJS', value: 'alpine' },
]
</script>

<template>
  <div class="grid-row sm:grid-cols-2 justify-items-stretch">
    <!-- Fruits -->
    <ASelect
      v-model="selectedFruit"
      :options="fruits"
      :hint="`value: ${selectedFruit}`"
    />

    <!-- Framework -->
    <ASelect
      v-model="selectedFramework"
      :options="frameworks"
      :hint="`value: ${JSON.stringify(selectedFramework)}`"
    />
  </div>
</template>

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

const selected = ref()
const fruits = ['banana', 'apple', 'watermelon', 'orange']
</script>

<template>
  <div class="grid-row sm:grid-cols-2 justify-items-stretch">
    <div>
      <ASelect
        v-model="selected"
        placeholder="Select Fruit"
        :options="fruits"
      />
    </div>
  </div>
</template>

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

const selected = ref()
const fruits = ['banana', 'apple', 'watermelon', 'orange']
</script>

<template>
  <div class="grid-row sm:grid-cols-2 justify-items-stretch">
    <div>
      <ASelect
        v-model="selected"
        label="Favorite Fruit"
        :options="fruits"
      />
    </div>
  </div>
</template>

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

const selected = ref()
const fruits = ['banana', 'apple', 'watermelon', 'orange']
</script>

<template>
  <div class="grid-row sm:grid-cols-2 justify-items-stretch">
    <div>
      <ASelect
        v-model="selected"
        hint="We will deliver it shortly"
        :options="fruits"
      />
    </div>
  </div>
</template>

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

const selected = ref()
const fruits = ['banana', 'apple', 'watermelon', 'orange']
</script>

<template>
  <div class="grid-row sm:grid-cols-2 justify-items-stretch">
    <ASelect
      v-model="selected"
      prepend-inner-icon="i-bx-heart"
      :options="fruits"
    />
    <ASelect
      v-model="selected"
      append-inner-icon="i-bx-chevrons-down"
      :options="fruits"
    />
  </div>
</template>

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

const selected = ref()
const frameworks = [
  { text: 'VueJS', value: 'vue', icon: 'i-logos-vue', brandColor: '#42b883' },
  { text: 'ReactJS', value: 'react', icon: 'i-logos-react', brandColor: '#00d8ff' },
  { text: 'AngularJS', value: 'angular', icon: 'i-logos-angular', brandColor: '#b52e31' },
  { text: 'SolidJS', value: 'solid', icon: 'i-logos-solidjs-icon', brandColor: '#4e84c1' },
  { text: 'AlpineJS', value: 'alpine', icon: 'i-logos-alpinejs-icon', brandColor: '#77c1d2' },
]
</script>

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <ASelect v-model="selected">
      <template #default="{ handleListItemClick }">
        <AListItem
          v-for="framework in frameworks"
          :key="JSON.stringify(framework)"
          :style="`color: ${framework.brandColor}`"
          @click="handleListItemClick(framework.value)"
        >
          <div :class="framework.icon" />
          <span>{{ framework.text }}</span>
        </AListItem>
      </template>
    </ASelect>
  </div>
</template>

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

const selected = ref('banana')
const fruits = ['banana', 'apple', 'watermelon', 'orange']
</script>

<template>
  <div class="grid-row sm:grid-cols-2 justify-items-stretch">
    <ASelect
      v-model="selected"
      disabled
      :hint="`value: ${selected}`"
      :options="fruits"
    />
    <ASelect
      v-model="selected"
      readonly
      :hint="`value: ${selected}`"
      :options="fruits"
    />
  </div>
</template>