its_ui_vite v1.0.2

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,
  size?: 'lg' | 'md' | 'sm',
  name?: string,
  disabled?: Boolean,
  placeholder?: string,
  value?: string, 
}

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

• 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,
  disabled?: Boolean,
  autocomplete?: Boolean,
  selectAll?: Boolean,
  width?: string,
  locale?: string,
  transformVal?: Boolean,
}

• CTooltip

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

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

• CPopup

{
  isShowTitle?: Boolean,
}

slots: ['title', 'content']

• CScroll

{
  <!-- нет props -->
}

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://ca-sim-docker.appmath.ru
  docker tag its-ui-kit-3 ca-sim-docker.appmath.ru/its-ui-kit-3
  docker push ca-sim-docker.appmath.ru/its-ui-kit-3

• Use on client-side (as DevOps):

  docker login https://ca-sim-docker.appmath.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