Select

Basic Usage

View source

<script setup lang="ts">
import { UniSelect, UniSelectOption } from "unify-ui";
import { ref } from "vue";

const value = ref<string>();

const options = [
  { label: "A", value: "a" },
  { label: "B", value: "b" },
  { label: "C", value: "c" },
  { label: "D", value: "d" },
  { label: "E", value: "e" },
  { label: "F", value: "f" },
];
</script>

<template>
  <UniSelect v-model="value">
    <UniSelectOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></UniSelectOption>
  </UniSelect>
</template>

Disabled

View source

<script setup lang="ts">
import { ref } from "vue";
import { UniSelect, UniSelectOption } from "unify-ui";

const options = [
  { label: "A", value: "a" },
  { label: "B", value: "b" },
  { label: "C", value: "c" },
  { label: "D", value: "d" },
  { label: "E", value: "e" },
  { label: "F", value: "f" },
];

const value = ref();
</script>

<template>
  <UniSelect v-model="value" disabled>
    <UniSelectOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></UniSelectOption>
  </UniSelect>
</template>

Disabled Option

View source

<script setup lang="ts">
import { ref } from "vue";
import { UniSelect, UniSelectOption } from "unify-ui";

const options = [
  { label: "A", value: "a" },
  { label: "B", value: "b" },
  { label: "C", value: "c" },
  { label: "D", value: "d" },
  { label: "E", value: "e" },
  { label: "F", value: "f" },
];

const value = ref();
</script>

<template>
  <UniSelect v-model="value">
    <UniSelectOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.value === 'c'"
    ></UniSelectOption>
  </UniSelect>
</template>

Loading

View source

<script setup lang="ts">
import { ref } from "vue";
import { UniSelect, UniSelectOption } from "unify-ui";

const options = [
  { label: "A", value: "a" },
  { label: "B", value: "b" },
  { label: "C", value: "c" },
  { label: "D", value: "d" },
  { label: "E", value: "e" },
  { label: "F", value: "f" },
];

const value = ref();
</script>

<template>
  <UniSelect v-model="value" loading>
    <UniSelectOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></UniSelectOption>
  </UniSelect>
</template>

Local Search

View source

<script setup lang="ts">
import { ref } from "vue";
import { UniSelect, UniSelectOption } from "unify-ui";

const options = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cat", value: "cat" },
  { label: "Dog", value: "dog" },
];

const value = ref();
</script>

<template>
  <UniSelect v-model="value" local-search>
    <UniSelectOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></UniSelectOption>
  </UniSelect>
</template>

Remote Search

View source

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { UniSelect, UniSelectOption } from "unify-ui";

const value = ref();
const options = ref<{ label: string; value: string }[]>([]);
const loading = ref(false);

function handleFetchData() {
  interface PersonInfo {
    name: {
      title: string;
      first: string;
      last: string;
    };
    login: {
      uuid: string;
    };
  }

  loading.value = true;
  fetch("https://randomuser.me/api/?results=20&inc=name,login")
    .then((value) => value.json())
    .then(({ results }: { results: PersonInfo[] }) => {
      options.value = results.map((item) => ({
        label: `${item.name.first} ${item.name.last}`,
        value: item.login.uuid,
      }));
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  handleFetchData();
});
</script>

<template>
  <UniSelect v-model="value" remote-search :loading="loading" @search="handleFetchData">
    <UniSelectOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></UniSelectOption>
  </UniSelect>
</template>

Multiple

View source

<script setup lang="ts">
import { ref } from "vue";
import { UniSelect, UniSelectOption } from "unify-ui";

const options = [
  { label: "Option1", value: "a" },
  { label: "Option2", value: "b" },
  { label: "Option3", value: "c" },
  { label: "Option4", value: "d" },
  { label: "Option5", value: "e" },
  { label: "Option6", value: "f" },
];

const value = ref<Set<string>>(new Set(["a", "b"]));
</script>

<template>
  <UniSelect v-model="value" multiple class="select">
    <UniSelectOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></UniSelectOption>
  </UniSelect>
</template>

<style scoped>
.select {
  width: 500px;
}
</style>

Status Error

View source

<script setup lang="ts">
import { ref } from "vue";
import { UniSelect, UniSelectOption } from "unify-ui";

const options = [
  { label: "A", value: "a" },
  { label: "B", value: "b" },
  { label: "C", value: "c" },
  { label: "D", value: "d" },
  { label: "E", value: "e" },
  { label: "F", value: "f" },
];

const value = ref<string>("a");
</script>

<template>
  <UniSelect v-model="value" status="error">
    <UniSelectOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></UniSelectOption>
  </UniSelect>
</template>

API

Properties

defineProps<{
  modelValue: T;
  placeholder?: string;
  options: { label: string; value: T }[];
}>();

Events

const emit = defineEmits<{
  (e: "update:modelValue", value: T | undefined): void;
  (e: "change", value: T | undefined): void;
}>();

Slots

defineSlots<{
  option(props: {}): any;
}>();