@prleasing/kuku

Библиотека компонентов Vue 3

Установка

Добавьте пакет в свои dependencies, используя npm или yarn

npm i @prleasing/kuku
# или
yarn add @prleasing/kuku

Использование

<template>
	<btn @click="decrement">-</btn>
	{{ current }}
	<btn brand @click="increment">+</btn>
</template>
<script lang="ts">
import { useCounter } from '@prleasing/use';
import { Btn } from '@prleasing/kuku';
import { defineComponent} from 'vue';
export default defineComponent({
    components: {Btn},
    setup() {
	    const {current, increment, decrement} = useCounter({
		    min: 0,
		    max: 20
	    });

	    return {current, increment, decrement};
    }
);
</script>

Компоненты

Элементы формы

Имя компонента	Описание
text-field	Поле ввода текста
security-field	Поле ввода пароля
select-field	Выпадающий список
select-auto-size	Выпадающий список с автошириной
checkbox-field	Checkbox
date-field	Выбор даты
date-range	Выбор диапазона дат
slider-native	Базовый выбор числа в указанном промежутке
slider-field	Выбор числа в указанном промежутке
code-field	Ввод символьного кода
text-field-label	Лейбл элемента формы

Составные элементы формы

Имя компонента	Описание
form-element	Базовый элемент
form-code-element	Ввод символьного кода
form-element-slider	Обертка для выбора числа в промежутке

Табы

Имя компонента	Описание
line-tabs	Линейные табы
line-tab-item	Линейный таб
tabs-base	Базовый компонент табов
tab-base-item	Базовый таб
tabs	Кластические табы
tab-item	Кластический таб

Модальные окна

Имя компонента	Описание
modal	Базовое модальное окно
modal-card	Модальная карточка
modal-page	Модальная страница

Диалоговые окна

Имя компонента	Описание
dialog-wrapper	Обертка над списком диалогов
async-confirm-dialog	Вспомогательный элемент для вызова диалогового окна
confirm-dialog	Диалог запрашивания разрешения
confirm-text	Запрашиваемые текст

Разное

Имя компонента	Описание
icon	Иконки
button	Кнопка
error-text	Текст ошибки
touche-drag	Элемент для перехвата перетаскивания
overlay	Заливка страницы для модальных окон
reference	Модальная подсказка
switch	Переключатель
horizontal-scroll	Горизонтальный скролл
vertical-scroll	Вертикальный скролл

Плагины

Диалоги

<template>
	<dialog-wrapper />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Dialog, DialogWrapper } from '@prleasing/kuku';
export default defineComponent({
	components: { DialogWrapper },
	setup() {
		Dialog.Confirm('Добавить приложение на рабочий стол?', {
			textConfirm: 'Установить'
		}).then((result: Boolean) => {
			console.log(result);
		});
	}
});
</script>