its_ui_vue2 v1.0.32

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

старт

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

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_vue2

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

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

<script>
import { CButton } from 'its_ui_vue2'

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

components props

• CButton

{
  size?: 'lg' | 'md' | 'sm',
  variant?: 'tonal' | 'outlined' | 'text' | 'nav_item',
  color?: 'green' | 'black',
  disabled?: 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) -->]

Dependencies:

export NODE_OPTIONS=--openssl-legacy-provider
npm install

Static build:

npm run generate

Docker

• Build container:

  docker build -t its_ui_kit-2  -f Dockerfile .

• Run container:

  docker run -it -p 39000:39000 --rm --name its_ui_kit-2_service its_ui_kit-2

• Discover files if needed (when container is running) OPTIONAL:

  docker exec -t -i its_ui_kit-2_service sh

• Save after build OPTIONAL for providing to end-user:

  docker save -o its_ui_kit-2_service.tar its_ui_kit-2_service

• Unarchive OPTIONAL and run container on end-user side:

  docker load -i its_ui_kit-2_service.tar
  docker run -it -p 39000:39000 --rm --name its_ui_kit-2_service its_ui_kit-2