List

Vue-компонент списку елементів.

Установка

npm i @yamasters/list --save

Використання

Цей компонент містить в собі всю логіку та мінімальний функціонал, який необхідний для роботи компонента списку. Працює в парі із пагінатором, який вже підключений та повністю готовий до роботи. Архітектура повинна включати в себе глобальний компонент та локальні шаблони.

Глобальний компонент

Вхідні параметри

Компонент приймає наступні вхідні параметри (як props):

/* Вхідні параметри, які приймає компонент */
props: {

	/* Налаштування компонента, обов"язковий параметр */
	dataParams: {
		type: String,
		required: true
	},

	/* Режим дебага, опціональний параметр */
	debug: {
		type: Boolean,
		required: false
	}
}

Як підключити

В проекті необхідно створити файл List.vue та підключити цей компонент як міксін:

module.exports = {
	mixins: [
		require('@yamasters/list')({
			default: require('./lists/default.vue')
		})
	]
}

Аргументом конструктор компонента приймає об'єкт, який містить локальні шаблони компонентів списків конкретного проекту. В прикладі вище:

{
	default: require('./lists/default.vue')
}

де default - це назва (name) компонента.

Локальний шаблон компонента

Вхідні параметри

Компонент приймає наступні вхідні параметри (як props): data - масив даних, отриманих з АРІ merge - вказує, що треба додати нові елементи до існуючих (true), або замінити старі (false) locked - якщо true, то це означає, що компонент знаходиться в режимі очікування відповіді від АРІ

Як підключити

Файл ./lists/default.vue повинен містити в собі міксін субкомпонента:

module.exports = {
	mixins: [
		require('@yamasters/list/subcomponent')
	]
}

Субкомпонент містить в собі мінімально необхідний функціонал для всіх локальних шаблонів. Також він має обчислюваний аргумент items, який містить в собі масив елементів і доступний для всіх локальних шаблонів (як і значення вхідних параметрів).

Ліцензія

MIT