@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>