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

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

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 { CdsButton, CdsCheckbox, CdsTag } from '@central-design-system/components';
import '@central-design-system/components/dist/cds.css'; // Глобальные стили

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

CDN

Вы можете использовать библиотеку, загрузив ее через CDN, добавив тег <script> в свой проект.

<!DOCTYPE html>
<html>
    <head>
        <link href="https://unpkg.com/@central-design-system/components/dist/cds.min.css" rel="stylesheet">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    </head>
    <body>
        <div id="app">
          <cds-button>Hello World</cds-button>
        </div>
    
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/@central-design-system/components/dist/cds.min.js"></script>
        <script>
          new Vue({
            el: '#app'
          })
        </script>
    </body>
</html>

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

<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-переменных. Подробная документация пока отсутствует.