UI Kit для Интелектуальной Транспортной Системы (ИТС) для Vue3

старт

• если не авторизован

1. Заходим в github -> Профиль -> настройки -> Developer settings (https://github.com/settings/apps)
2. далее: Personal access tokens -> Tokens (classic)
3. Создаём токен(подробнее: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens), его нужно сохранить его потом не достать
4. логинемся:

npm login --registry=https://npm.pkg.github.com --scope=@lopanovco
Username: YOUR_USERNAME
Password: YOUR_PERSONAL_ACCESS_TOKEN со скопом 'read:packages'

• работа

для начала установм: npm i its_ui_vite

пример использования (подробнее в components props):

<template>
  <CButton :disabled="true" variant="text">
    disable
  </CButton>
</template>

<script>
import { CButton } from 'its_ui_vite'

export default {
  components: {
    CButton,
  },
}
</script>

components props

• CButton

{
  size?: 'lg' | 'md' | 'sm',
  variant?: 'tonal' | 'outlined' | 'text' | 'nav_item',
  color?: 'green' | 'black',
  disabled?: Boolean,
  loading?: Boolean,
}

slots: ['без имени']

• CTabs

{
  tabs: Record<string, any> & { value: any, text: string }[],
  activeId: any, <!-- activeId должен быть в tabs -->
  transformVal?: Boolean,
  scroll?: Boolean,
  animationType?: 'worm' | 'trail',
}

• CInput

{
  <!-- реактивна -->
  status?: 'static' | 'focus' | 'error' | 'success',
  <!-- для v-mode -->
  modelValue?: '',

  width?: string,
  type?: string,
  iconPosition?: Array<'left' | 'right'>,
  size?: 'lg' | 'md' | 'sm',
  name?: string,
  disabled?: Boolean,
  placeholder?: string,
  value?: string, 
}

slots: ['successIcon' <!-- есть дефольное значение -->, 'errorIcon' <!-- есть дефольное значение -->, 'customIcon']

• CInput2

{
  <!-- реактивна -->
   status?: 'static' | 'focus' | 'error' | 'success',
   <!-- для v-mode -->
  modelValue?: '',

  iconPosition?: Array<'left' | 'right'>
  size?: 'lg' | 'md' | 'sm',
  width?: string,
  disabled?: boolean,
  type?: InputTypeHTMLAttribute,
  name?: string,
  placeholder?: string,
}

slots: ['successIcon' <!-- есть дефольное значение -->, 'errorIcon' <!-- есть дефольное значение -->, 'customIcon-left', 'customIcon-right']

• CCheckbox

{
  <!-- по сути 'sm' используется только в CSelect -->
  size?: 'lg' | 'sm',
  <!-- работает с v-mode, modelValue работает как checked в случае с checkbox и toggle, в случае с radio в нем value -->
  modelValue?: Boolean,

  variant?: 'checkbox' | 'radio' | 'toggle',
  disabled?: Boolean,
  text?: string,
  name?:string,
  value?: string,
}

slots: ['без имени' <!-- есть дефольное значение (props.text) -->]

• CSelect

{
  options: Array,
  variant: 'default' | 'multiple',
  size?: 'lg' | 'md' | 'sm',
  placeholder?: string,
  iconPosition?: Array<'left' | 'right'>,
  iconName?: string,
  disabled?: Boolean,
  autocomplete?: Boolean,
  selectAll?: Boolean,
  width?: string,
  locale?: string,
  transformVal?: Boolean,
}

slots: ['customIcon' <!-- есть дефольное значение -->]

• CDropdown

{
  options?: Array,
  size?: 'lg' | 'md' | 'sm',
  autocomplete?: boolean,
  disabled?: boolean,
  transformVal?: boolean,
  iconPosition?: Array<'left' | 'right'>,
  iconLeftName?: keyof TIcon,
  iconRightName?: keyof TIcon,
  isOpen?: boolean,
  locale?: 'rus' | 'usa' | 'tur' | 'spa',
  placeholder?: string,
  width?: string,
  modelValue?: any,
}

slots: ['customIcon-left', 'customIcon-right' <!-- есть дефольное значение -->]

• CInput2Select

{
  options?: Array,
  size?: 'lg' | 'md' | 'sm',
  variant?: 'default' | 'multiple',
  autocomplete?: boolean,
  disabled?: boolean,
  transformVal?: boolean,
  iconPosition?: Array<'left' | 'right'>,
  iconLeftName?: keyof TIcon,
  iconRightName?: keyof TIcon,
  isOpen?: boolean,
  locale?: 'rus' | 'usa' | 'tur' | 'spa',
  placeholder?: string,
  width?: string,
  modelValue?: any,
}

slots: ['customIcon' <!-- есть дефольное значение -->]

• CDatepicker

{
  date?: string,
  locale?: 'rus' | 'usa' | 'tur' | 'spa',
  max?: string,
  min?: string,
  width?: string,
  isOpen?: boolean,
  isTooltip?: boolean,
  modelValue?: any,
}

slots: ['customIcon' <!-- есть дефольное значение -->]

• CTooltip

{
  position?: 'top' | 'top_left' | 'top_right' | 'bottom' | 'bottom_left' | 'bottom_right',
  interactive?: Boolean,
  disabled?: boolean,
}

slots: ['icon' <!-- есть дефольное значение -->, 'content']

• CPopup

{
  isShowTitle?: Boolean,
}

slots: ['title', 'content']

• CScroll

{
  scrollY?: number,
  variant?: 'default' | 'green' | 'white',
}

slots: ['без имени']

• CScroll2

{
  variant?: 'default' | 'green' | 'white',
}

slots: ['без имени']

• CAlert

{
  liveTime?: number,
  variant?: 'notification' | 'success' | 'error',
  width?: string,
  text?: string,
}

slots: ['без имени' <!-- есть дефольное значение (props.text) -->]

Docker

• Build container:

  docker build -t its-ui-kit_vue-host .

• Run container:

  docker run -rm -p 3000:3000 --env-file .env its-ui-kit_vue-host --name its-ui-kit_vue-host

• Run container in deattach mode:

  docker run -d -p 3000:3000 --env-file .env its-ui-kit_vue-host --name its-ui-kit_vue-host

Откройте в браузере: http://localhost:3000

Deployment via Docker

• Build container:

  docker build -f Dockerfile -t its-ui-kit-3 .

• Push to Docker registry:

docker login https://docker-registry.compass.msk.ru
docker tag its-ui-kit-3 docker-registry.compass.msk.ru/its-ui-kit-3
docker push docker-registry.compass.msk.ru/its-ui-kit-3

• Use on client-side (as DevOps):

  docker login https://docker-registry.compass.msk.ru
  docker compose -f docker-compose-ui-kit-stage.yml up

• Navigate to http://localhost:28000 (exposed by Docker compose file) to see UI Kit

svg

закидываем в src/assets/icon/svg svg файл запускаем npm run icons теперь эту svg можно использовать