Luna docs

Appearance

Списковые поля ​

Для полей с одиночным и мультивыбором используйте интерфейс Option

ts
import { ref } from 'vue';
import { Option } from 'luna';

const options = ref<Array<Option<number>>>([
    {
      id: 1,
      name: 'Москва',
    },
    {
      id: 2,
      name: 'Санкт-Петербург',
    },
    {
      id: 3,
      name: 'Новосибирск',
    },
    {
      id: 4,
      name: 'Калининград',
    },
    {
      id: 5,
      name: 'Челябинск',
    },
]);

// Асинхронный вариант
// const options = async () => {
// const { data } = await client.get<{results: City[]}>('/rest/cities');
//  return data.results;
// }

Одиночный выбор ​

vue
<script lang="ts" setup>
import { ref } from "vue";
import { SingleSelect, Option } from "luna";

const selectedCityId = ref<number>(null);
const selectedCity = ref<Option<number>>(null);
</script>

<template>
  <SingleSelect :options="options" v-model="selectedCityId"
                @select="selectedCity = $event"></SingleSelect>
  <div>Выбранный город: {{ selectedCity?.name }}</div>
</template>
Выбранный город:

Множественный выбор ​

vue
<script lang="ts" setup>
import { ref } from "vue";
import { MultiSelect, Option } from "luna";

const selectedCities = ref<string[]>([]);
</script>

<template>
  <MultiSelect :options="options"
               v-model="selectedCities" value-key='name'></MultiSelect>
  <div>Выбранные города: {{ selectedCities }}</div>
</template>
Выбранные города: []

Параметры

options: Array | (term: string | null, selected: Array<ID>) => Array - список опций, может быть как списком, так и функцией(синхронной или асинхронной), которая возвращает список объектов

showIcons?: boolean - показывать иконки, у объекта должен быть аттрибут iconUrl: string

minTagLen?: number - минимальнок кол-во символов для создания опции

suggestionKey?: keyof T - параметр объекта, который будет отображаться в выпадающеми списке. По умолчанию name

valueKey?: keyof T - параметр объекта, которое будет использоваться как значение, по умолчанию id

labelKey?: keyof T | ((item: T) => string) - параметр объекта или функция, для отображения. По умолчанию name

cropSuggestions: boolean - Обрезать длинные названия в выпадающем списке. По умолчанию false

disabled?: boolean - Запретить редактирование. По умолчанию false

iconRadius?: string - Радиус скругления значков

missingIconLiteralKey?: keyof T - Если нет iconUrl, то брать первый символ из значения по этому ключу

доп параметры для `SingleSelect`

placeholder?: string - показать подсказку-текст при пустом значении

enableClear?: boolean - показать кнопку очищения значения. По умолчанию true

suggestionsWidth?: string - ширина автодополнений

modelData?: T - вы можете подгрузить объект-значение зарание, если в качестве опций используется функция

доп параметры для `MultiSelect`

modelData?: Array<T> - вы можете подгрузить объект-значение зарание, если в качестве опций используется функция

Список чекбоксов ​

vue
<script lang="ts" setup>
import { ref } from "vue";
import { MultiSelect, Option, OptionsGroups } from "luna";

const optionGroups: Array<OptionsGroup<number>> = [
    {
      id: 'cities',
      label: 'Выберите города',
      options: options.value,
    }
];
const selectedCities = ref<string[]>([]);
</script>

<template>
  <CheckBoxesComponent :optionGroups="optionGroups"
               v-model="selectedCities" value-key='name'></CheckBoxesComponent>
  <div>Выбранные города: {{ selectedCities }}</div>
</template>
Выберите города
Выбранные города: []

Параметры

optionGroups: Array<OptionsGroup<T>> - список опций

valueKey?: keyof T - параметр объекта, который будет использоваться как значение, по умолчанию id

disabled?: boolean - запретить редактирование. По умолчанию false

busyValue?: string|number - запретить редактирование конретной опции по ее значению

emitsOnly?: boolean - не изменять v-model, а только генерировать emit

maxHeight?: string - максимальная высота контейнера, если содержимое больше - будет показыать скролл