Для разработчиков

Системные требования

• Node.js версии 12.x
• Vue.js версии 2.x и выше

Описание библиотеки компонентов

Библиотека включает в себя набор VueJS компонентов, построенных на общих принципах компонентов фрэймворка.

Установка пакета

Для новых проектов

Выполните команду:

npm install @central-design-system/components
OR
yarn add @central-design-system/components

Для проекта B2B-Center

Vagrant SSH

В репозитории необходимо вручную добавить пакет в секцию dependencies основного package.json:

{
  ...
  "dependencies": {
    ...
    "@cds/components": "^1.0.0"
  }
  ...
}

После чего в интерфейсе Vagrant выполнить:

up npm --add_b2b_registry
up npm install

Docker PHP Bash

Можно установить пакет и через docker-контейнер PHP внутри Vagrant:

cd /raid/vhosts/files
npm install @central-design-system/components
cp package.json /raid/vhosts/b2bcenter

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

Для того, чтобы зарегистрировать в своём приложении сразу все компоненты библиотеки, предлагается использование в виде плагина:

import Vue from 'vue';
import Cds from '@central-design-system/components'; // Компоненты
import '@central-design-system/components/dist/cds.css'; // Глобальные стили

// Регистрация компонентов глобально
Vue.use(Cds);

Установка в Nuxt.js

// nuxt.config.js
export default {
  css: ['@central-design-system/components/dist/cds.css'],
  plugins: ['~plugins/cds']
}

Если нет необходимости использовать библиотеку целиком, то можно использовать компоненты выборочно:

import { MdsButton, CdsCheckbox, CdsTag } from '@central-design-system/components';
import '@central-design-system/components/dist/cds.css'; // Глобальные стили

new Vue({
  el: '#app',
  components: {
    CdsCheckbox, MdsButton, CdsTag
  }
});

Использование компонентов в шаблоне крайне просто:

<template>
    <div>
        <h2>Простая форма</h2>
        <form>
            <cds-text-input v-model="your_text" placeholder="Введите текст"/>
            <cds-select v-model="your_select" :options="options" placeholder="Выберите значение"/>
            <cds-checkbox v-model="your_check" label="Отметьте значение" value="true"/>
            <cds-button text="Отправить" type="submit"/>
        </form>
    </div>
</template>

Со всеми возможными способами регистрации компонентов в приложении можно ознакомиться в разделе Регистрация компонентов официальной документации VueJS.

Настроить необходимые модули можно только с исходным index-файлом стилей.

Для того, чтобы отключить модуль, необходимо определить переменную со значением false в своем приложении, перед импортом исходного index-файла.

Примеры описаны в секции Использовании библиотеки.

Темизация

Реализована с использованием CSS-переменных. Подробная документация пока отсутствует.