Tehnosk-components NPM

Tehosk-components

1

Компоненты для построения интерфейсов

Установка

npm i tehnosk-compomemts

Подключение в проект

Глобально в main.js

import Components from 'tehnosk-components'

Vue.use(Components)

Список компонентов для ввода данных (NameComponent)

TInput
InputString
InputTime
InputDate
InputDateTime
InputMeasure
InputBoolean
InputRef
InputDouble
InputDuration
InputError
InputInteger
InputText
InputMultiLang
TSelectSearch

Кнопка (NameComponent)

TButton

Аккордеон

Accordion
AccordionItem

Нотификации

TNoty

Табы

TTab
TTabs

Лоадер

TLoader

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

TModal

Форма ввода

TForm

Использование в коде компонентов типа инпут

<name-component
  :id="element.id"
  :label="element.name" 
  :value="element.value"
  :options="element.options"
  @inputData="inputData"
  @measureChange="measureChange"
  @refChange="refChange"
/>

id - id для привязки (обязательно)

label - Label компонента (по умолчанию 'Default label'')

value - значение для компонента (можно не использовать если нет входящего значения)

options - Массив значений для селектов (Можно не использовать)

@inputDate - Обработчик ввода данных в обычных инпутах

@measureChange - Обработчик изменения значения в полях типа measure

@refChange - Обработчик изменения значения в полях типа ref

TInput

<t-input
    id="t-input"
    type="text"
    v-model="tInputModel"
/>

type - тип инпута (text/number)

id - id для привязки (обязательно)

label - Label компонента (по умолчанию 'Default label'')

disabled - параметр отключающий инпут для ввода

icon - НЕ РЕАЛИЗОВАНО

validation - НЕ РЕАЛИЗОВАНО

TSelectSearch

<t-select-search
  id="t-select-search"
  placeholder="select item"
  label="Select Search"
  :selected-option="item"
  :deleteButton="false"
  :options="options"
  @select="onSelect"
/>

options - список опций

selected-option - список опций

id - id для привязки (не обязательно)

placeholder - placeholder селекта

label - Label компонента

disabled - disabled класс

deleteButton - убирает крестик удаления выбора

@select - событие получения выбранной опции

TDatePicker

<t-date-picker
  format="YYYY-MM-DD : hh-mm-ss"
  placeholder="placeholder"
  rangeSeparator="-"
  clearable
  showButtons
  :local="{}"
  v-model="time"
/>

placeholder - placeholder датапикера

rangeSeparator - разделитель для диапазона дат

clearable - опция очищения даты(крестик)

label - Label датапикера

showButtons - флаг для отображение кнопок действий

disabled - disabled

format - формат даты

local - объект с ключами с переводами

v-model - type String

date - Только дата, без времени(формат YYYY-MM-DD)

time - Только время, без даты(формат hh-mm-ss)

dateTime - Дата и время(формат YYYY-MM-DD : hh-mm-ss)

v-model - type Array

dateRange - Диапазон дат, без времени

Либо свой кастомный формат в любом виде

Использование в коде компонента TButton

<t-button
    :name="name"
    :icon="iconName"
    :theme="themeObj"
    :size="size"
    :colorScheme="nameScheme"
    :onClick="clickButton"
/>

name - Слово выводимое в кнопке

icon - Тип иконки из файла icon-fonts (add/add-doc/delete ....)

theme - Объект переменных

size - Размер шрифта

vs
S
M (базовый по умолчанию)
L

colorScheme - Цветовая схема кнопки

onClick - Функция обработчик клика по кнопке

Использование в коде компонента Accordion

<t-accordion :opened="false">
  <accordion-item :shad="false">
    <template slot="accordion-trigger">
    </template>
    <template slot="accordion-content">
    </template>
  </accordion-item>
</t-accordion>

Параметры

В t-accordion

opened="false" отвечает за отключение автоматического открытия

В t-accordion-item

shad="false" отвечает за отключение фона и боковой стрелки, по умолчанию параметр true

Использование в коде компонента нотификации

Необходимо импортировать модуль в стор

...
import Noty from 'tehnosk-components/store/Noty'
...
modules: {
    Noty
}

Подключение компонента

<t-noty/>

Вызов нотификации

this.$store.commit('setNoty', {[Object params]})

Параметры:

header - Заголовок

description - Описание

duration - Задержка на автозакрытие (0 для отмены автозакрытия)

typeNoty - Тип нотификации ('success', 'error', 'warning')

activation - флаг активации/закрытия

successFunction - функция для калбэка подтверждения (не обязательно)

cancelFunction - функция для калбэка отмены (не обязательно)

Использование в коде компонента Pagination

<t-pagination
  :length="totalPages"
  v-model="page"
  @input="onPagination"
/>

Параметры:

length - количество страниц

v-model - текущая страница

@input - возвращает номер страницы

Использование компонентов Табы

<t-tabs @clickTab="clickTab">
  <t-tab title="Tab tada">Hello From Tab 1</t-tab>
  <t-tab title="Tab 2" :toTab="{}">Hello From Tab 2</t-tab>
  <t-tab title="Tab 3">Hello From Tab 3</t-tab>
  <t-tab title="Tab 4">Hello From Tab 4</t-tab>
</t-tabs>

Параметры

toTab - объект для перехода по router-link

@clickTab - событие для прослушивания

Использование компонента Лоадер

Подключение модуля в store

import Loader from 'tehnosk-components/store/Loader'
...
modules: {
  Loader
}

Подключение компонента

<t-loader/>

Показ и скрытие

this.$store.commit('SetLoaderFlag', true) // Показать
this.$store.commit('SetLoaderFlag', false) // Скрыть

Использование компонента Локального Лоадера

<t-local-loader v-if="loading" />

.loader__active класс для родительского блока, куда вставляется лоадер

Использование модального окна

подключение

<t-modal ref="testModal">
  <template slot="header">Заголовок модального окна</template>
  <template slot="body">Контентная часть</template>
  <template slot="actions">место для кнопок</template>
</t-modal>

Открытие/закрытие

производится вызовом в методах

this.$refs.testModal.onOpen() // Открытие
this.$refs.testModal.onClose() // Закрытие

Использование формы ввода

Подключение

<t-form 
  ref="inputForm"
  buttonName="Добавить"
  @buttonClick="clickButtonInForm"
>
  <template slot="header">Заголовок формы</template>
  <template slot="body">Тело формы</template>
</t-form>