/
npmgit

Proxima

Библиотека независимых компонентов для Vue 3 The library of standalone components for Vue 3

Installation

bash
npm i proxima-vue

Vue

После установки необходимо добавить библиотеку в качестве плагина, вторым аргументом можно передать опции: After installation, you need to add the library as a plugin; the second argument can be options passed:

js
// main.js

import { createApp } from 'vue';
import proxima from 'proxima-vue';
import App from '@/App.vue';

const app = createApp(App);

app.use(proxima, {
  // options
});

Nuxt

Библиотека совместима с Nuxt ^3.0.0, просто подключите ее в качестве модуля: The library is compatible with Nuxt ^3.0.0, simply add it as a module:

ts
// nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'proxima-vue/nuxt',
  ],
  proxima: {
    injectStyles: false,
    injectComponents: true,
    injectComposables: true,
    // other options
  },
});

Localization

По умолчанию все текстовые токены на английском языке, вы можете выбрать любой язык и передать локализацию для него, из коробки подготовлен перевод еще для 7 языков: By default, all text tokens are in English. You can choose any language and add localization. Translations for 7 languages are readily available out of the box:

js
// main.js

import proxima from 'proxima-vue';
import ru from 'proxima-vue/locale/ru';

app.use(proxima, {
  lang: 'ru',
  locales: { ru },
});

При использовании Nuxt: When using Nuxt:

ts
// nuxt.config.ts

import ru from 'proxima-vue/locale/ru';

export default defineNuxtConfig({
  modules: ['proxima-vue/nuxt'],
  proxima: {
    lang: 'ru',
    locales: { ru },
  },
});

RTL

Библиотека поддерживает направление текста справа налево, достаточно добавить атрибут dir: The library supports text direction from right to left; simply add the dir attribute:

html
<html dir="rtl">

Styles

Библиотека использует CSS слои, вы можете легко переопределять любые стили без оглядки на специфичность, также некоторые компоненты используют глобальные кастомные свойства: The library uses CSS layers. You can easily override any styles without considering specificity, and some components use global custom properties:

css
:root {
  --app-accent-color: #0071e3;
  --app-dim-color: #6e6e73;
  --app-danger-color: #dc3545;
  --app-invalid-color: #dc3545;
  --app-valid-color: #03a10e;
  --app-warning-color: #ea9106;
  --app-label-color: #6c757d;

  --app-field-color: #212529;
  --app-field-background: #fff;
  --app-field-border-color: #cfd4d9;
  --app-field-box-shadow-opacity: 0.1;

  --app-disabled-opacity: 0.6;

  --app-highlight-offset: 0.0625rem;
  --app-highlight-style: solid;
  --app-highlight-size: 0.1875rem;
  --app-highlight-color: rgba(0, 0, 0, 0.1);
  --app-highlight-opacity: 0.2;

  --app-outline-offset: 0.1875rem;
  --app-outline-size: 0.25rem;
  --app-outline-style: solid;
  --app-outline-color: rgba(0, 61, 255, 0.7);
}

При этом персональные свойства компонента имеют приоритет: But the custom properties of the component take precedence:

css
:root {
  --checkbox-disabled-opacity: 0.4; /* <- win */
  --app-disabled-opacity: 0.6;
}

Кастомные свойства с префиксом --base- это вспомогательные переменные для внутреннего использования и не предназначены для изменения Custom properties with the --base- prefix are auxiliary variables for internal use and are not intended to be modified

Default props

Вы можете установить дефолтные значения пропсов сразу для всех компонентов через ключ everyone, для настройки определенного компонента используйте его название: You can set default prop values for all components at once using the everyone key; to configure a specific component, use its name:

js
// main.js

import proxima from 'proxima-vue';

const defaultProps = {
  ProximaButton: {
    view: 'outline',
  },
  everyone: {
    size: 'm', // any component will have 'm' size by default
  },
};

app.use(proxima, { defaultProps });

При использовании Nuxt: When using Nuxt:

ts
// nuxt.config.ts

const defaultProps = {
  ProximaButton: {
    view: 'outline',
  },
  everyone: {
    size: 'm', // any component will have 'm' size by default
  },
};

export default defineNuxtConfig({
  modules: ['proxima-vue/nuxt'],
  proxima: { defaultProps },
});
View source on GitHub