MSuite UI

Единообразно стилизованные кнопки систем MSuite (MConnect, MDelivery, MPass, MPay, MPower, MSign) для Vue 2 и Vue 3. Импортируйте пакет в свой проект — и получите готовые кнопки с логотипами, лейблами, двумя цветовыми вариантами и ховер-эффектом.

Установка

npm install @shxrpov/mui

vue — peer-зависимость: используется та версия, что уже стоит в вашем проекте. Поддерживаются Vue 2.6, 2.7 и 3.x — совместимость обеспечивает vue-demi, который сам редиректит на нужную версию. SVG-идентификаторы логотипов изолируются per-instance, поэтому несколько одинаковых кнопок на странице не дают дублей id в DOM.

Vue 2.6

В Vue 2.6 нет встроенного Composition API, поэтому дополнительно нужен @vue/composition-api (в 2.7 и 3.x он не требуется):

npm install @vue/composition-api

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI) // обязательно до Vue.use(MSuiteUI)

Подключение

В main.ts / main.js подключите плагин и стили.

Vue 3:

import { createApp } from 'vue'
import MSuiteUI from '@shxrpov/mui'
import '@shxrpov/mui/style.css'
import App from './App.vue'

createApp(App)
  .use(MSuiteUI, {
    // необязательно — настройка цветов прямо здесь
    primaryColor: '#0058D2',
    neutralColor: '#F5F5F5',
  })
  .mount('#app')

Vue 2 (для 2.6 сначала подключите @vue/composition-api, см. выше):

import Vue from 'vue'
import MSuiteUI from '@shxrpov/mui'
import '@shxrpov/mui/style.css'
import App from './App.vue'

Vue.use(MSuiteUI, {
  primaryColor: '#0058D2',
  neutralColor: '#F5F5F5',
})

new Vue({ render: (h) => h(App) }).$mount('#app')

Плагин глобально регистрирует компонент <MSuiteButton>. Если глобальная регистрация не нужна — импортируйте компонент точечно:

import { MSuiteButton } from '@shxrpov/mui'
import '@shxrpov/mui/style.css'

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

<template>
  <!-- Вариант 1: основной цвет -->
  <MSuiteButton system="pay" variant="primary" @click="pay" />

  <!-- Вариант 2: нейтральный -->
  <MSuiteButton system="sign" variant="neutral" />

  <!-- Как ссылка -->
  <MSuiteButton system="pass" href="https://mpass.gov.md" />
</template>

У кнопок всего два цвета — primary и neutral. Других цветов нет.

Props

| Prop | Тип | По умолчанию | Описание | |------------|--------------------------|--------------|------------------------------------------------------| | system | SystemKey (обязателен) | — | connect | delivery | pass | pay | power | sign | | variant | 'primary' \| 'neutral' | 'primary' | Цветовой вариант | | label | string | из конфига | Переопределить текст лейбла | | disabled | boolean | false | Отключить кнопку | | href | string | — | Отрендерить как <a> |

Событие: @click.

Настройка цветов и размеров

Способ 1 — опции плагина (из app.js / app.ts)

createApp(App)
  .use(MSuiteUI, {
    primaryColor: '#0058D2',
    primaryHoverColor: '#0B63DB',
    primaryTextColor: '#ffffff',
    neutralColor: '#F5F5F5',
    neutralHoverColor: '#ECECEC',
    neutralTextColor: '#121212',
    radius: '8px',
    paddingX: '16px',
    paddingY: '12px',
    fontSize: '16px',
    logoSize: '24px',
    logoRadius: '8px',
  })
  .mount('#app')

Можно менять тему и на лету — функцией applyTheme:

import { applyTheme } from '@shxrpov/mui'

applyTheme({ primaryColor: '#0049AD' })

Способ 2 — CSS-переменные

Те же значения можно переопределить в своём CSS (после импорта style.css):

:root {
  --msuite-btn-radius: 16px;
  --msuite-btn-primary-bg: #0058D2;
}

Все переменные

| Переменная | По умолчанию | Опция плагина | |---------------------------------|--------------|----------------------| | --msuite-btn-radius | 8px | radius | | --msuite-btn-padding-x | 16px | paddingX | | --msuite-btn-padding-y | 12px | paddingY | | --msuite-btn-font-size | 16px | fontSize | | --msuite-btn-logo-size | 24px | logoSize | | --msuite-btn-logo-radius | 8px | logoRadius | | --msuite-btn-primary-bg | #0058D2 | primaryColor | | --msuite-btn-primary-hover-bg | #0B63DB | primaryHoverColor | | --msuite-btn-primary-fg | #ffffff | primaryTextColor | | --msuite-btn-neutral-bg | #F5F5F5 | neutralColor | | --msuite-btn-neutral-hover-bg | #ECECEC | neutralHoverColor | | --msuite-btn-neutral-fg | #121212 | neutralTextColor | | --msuite-btn-gap | 8px | — | | --msuite-btn-line-height | 24px | — | | --msuite-btn-font-weight | 400 | — | | --msuite-btn-font-family | 'Onest', system-ui, sans-serif | — | | --msuite-btn-transition | 160ms ease | — |

Лейблы и логотипы

Единый источник правды — объект systems. Импортируйте его, чтобы перебрать все системы или получить лейбл/логотип программно:

import { systems, systemKeys } from '@shxrpov/mui'

systemKeys                 // ['connect', 'delivery', 'pass', 'pay', 'power', 'sign']
systems.pay.label          // 'Plătește cu MPay'
systems.pay.logo           // Vue-компонент логотипа

Разработка

npm install
npm run dev      # площадка с примерами (dev/App.vue)
npm run build    # сборка в dist/ + генерация типов