airpcm-form-components

Библиотека Vue 3 компонентов для отображения данных в формах и таблицах.

Установка

npm install @airpcm/form-components

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

Глобальная регистрация

import { createApp } from 'vue'
import App from './App.vue'
import FormComponents from '@airpcm/form-components'

const app = createApp(App)
app.use(FormComponents)
app.mount('#app')

Локальная регистрация

<template>
  <div>
    <EntityFieldValue 
      :value="user.email" 
      type="email" 
    />
    <TextInputControl 
      :initial-text="'Привет мир'" 
      :settings="textSettings" 
    />
  </div>
</template>

<script setup lang="ts">
import { EntityFieldValue, TextInputControl } from '@airpcm/form-components'
import type { IComponentSettingsState } from '@airpcm/form-components'

const textSettings: IComponentSettingsState = {
  textSize: 'large',
  textColor: 'blue',
  textAlignment: 'center',
  enableForEditing: true
}
</script>

Компоненты

EntityFieldValue

Универсальный компонент для отображения значений полей различных типов.

Props

interface EntityFieldValueProps {
  value: any                    // Значение для отображения
  type?: string                 // Тип поля (автоопределяется если не указан)
  field?: string                // Имя поля в объекте данных
  fieldSchema?: any             // Схема поля
  rowData?: any                 // Объект с данными строки
  fieldOptions?: IFieldOption[] // Опции полей
}

Поддерживаемые типы

• string / text - Текстовые значения
• number - Числовые значения с форматированием
• date - Даты с иконкой календаря
• boolean - Булевы значения с иконками
• imageLink - Изображения с превью
• color - Цвета с превью
• entity - Связанные объекты
• array - Массивы с количеством элементов
• email - Email с кликабельными ссылками
• phone - Телефоны с кликабельными ссылками
• url - URL с кликабельными ссылками
• json / object - JSON объекты

Примеры

<!-- Автоопределение типа -->
<EntityFieldValue :value="user.email" />

<!-- Явное указание типа -->
<EntityFieldValue :value="user.birthDate" type="date" />

<!-- Отображение поля из объекта -->
<EntityFieldValue 
  :row-data="user" 
  field="profile.avatar" 
  type="imageLink" 
/>

TextInputControl

Компонент для отображения и редактирования текста с настройками стилей.

Props

interface TextInputControlProps {
  settings?: IComponentSettingsState  // Настройки стилей
  uniqueClass?: string                // Уникальный CSS класс
  initialText?: string                // Начальный текст
}

Настройки

interface IComponentSettingsState {
  textSize?: 'small' | 'normal' | 'large'
  textStyle?: 'standard' | 'bold' | 'italic'
  textAlignment?: 'left' | 'center' | 'right'
  textColor?: 'gray50' | 'gray75' | 'black' | 'blue' | 'red' | 'green'
  enableForEditing?: boolean
}

Примеры

<TextInputControl 
  :initial-text="'Редактируемый текст'"
  :settings="{
    textSize: 'large',
    textColor: 'blue',
    textAlignment: 'center',
    enableForEditing: true
  }"
  @text-change="handleTextChange"
/>

FormComponent

Универсальный компонент-контейнер для отображения различных типов полей.

Props

interface FormComponentProps {
  item: IToolboxItem              // Описание компонента
  settings?: IComponentSettingsState
  rowData?: any                   // Данные строки
  availableFields?: IFieldOption[] // Доступные поля
}

Примеры

<FormComponent 
  :item="{ id: '1', name: 'Email', type: 'entity-field-value' }"
  :settings="{ fieldName: 'email', fieldType: 'email' }"
  :row-data="user"
  @control-update="handleSettingsUpdate"
/>

EntityCard

Компонент карточки для отображения данных с возможностью добавления контролов.

Props

interface EntityCardProps {
  id: string
  title: string
  showTitle?: boolean
  showHeaderPanel?: boolean
  isSelected?: boolean
  components?: IFormComponent[]
  selectedRow?: any
  availableFields?: IFieldOption[]
  linkedTableId?: string
  actionType?: string
}

Примеры

<EntityCard 
  id="card1"
  title="User Card"
  :show-title="true"
  :components="cardComponents"
  :selected-row="user"
  :available-fields="availableFields"
  @control-update="handleControlUpdate"
  @text-change="handleTextChange"
/>

EntityTable

Компонент таблицы для отображения данных с поддержкой вкладок.

Props

interface EntityTableProps {
  id: string
  title: string
  showTitle?: boolean
  showHeaderPanel?: boolean
  isSelected?: boolean
  tableData?: any[]
  selectedFields?: ITableField[]
  tabs?: ITableTab[]
  availableFields?: IFieldOption[]
  mode?: 'edit' | 'view'
}

Примеры

<EntityTable 
  id="table1"
  title="Users Table"
  :table-data="users"
  :selected-fields="tableFields"
  :available-fields="availableFields"
  @row-click="handleRowClick"
  @tab-change="handleTabChange"
/>

Canvas

Компонент канваса с поддержкой экспорта/импорта JSON и управления формами.

Props

interface CanvasProps {
  initialData?: ICanvasExport
  availableFields?: IFieldOption[]
  tableData?: any[]
}

Примеры

<Canvas 
  :initial-data="canvasData"
  :available-fields="availableFields"
  :table-data="tableData"
  @canvas-change="handleCanvasChange"
  @form-select="handleFormSelect"
/>

Утилиты экспорта/импорта

Функции

// Экспорт канваса в JSON
exportCanvas(state: ICanvasState): ICanvasExport

// Импорт канваса из JSON
importCanvas(exportData: ICanvasExport): ICanvasState

// Скачивание файла экспорта
downloadCanvasExport(exportData: ICanvasExport, filename?: string)

// Загрузка файла импорта
loadCanvasImport(file: File): Promise<ICanvasState>

Примеры использования

import { exportCanvas, downloadCanvasExport, loadCanvasImport } from '@airpcm/form-components'

// Экспорт
const state = { /* состояние канваса */ }
const exportData = exportCanvas(state)
downloadCanvasExport(exportData, 'my-canvas.json')

// Импорт
const fileInput = document.querySelector('input[type="file"]')
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0]
  if (file) {
    try {
      const state = await loadCanvasImport(file)
      // Применить состояние к канвасу
    } catch (error) {
      console.error('Import error:', error)
    }
  }
})

Типы

Библиотека экспортирует все необходимые TypeScript типы:

import type {
  IPosition,
  ISize,
  IBoundaries,
  IToolboxItem,
  IComponentSettingsState,
  IFieldOption,
  DisplayType,
  IFormComponentEvents,
  ICanvasExport,
  ICanvasState
} from '@airpcm/form-components'

События

TextInputControl

• text-change - Изменение текста

FormComponent

• control-update - Обновление настроек компонента
• text-change - Изменение текста (проксируется от TextInputControl)

EntityCard

• control-update - Обновление настроек компонента
• text-change - Изменение текста

EntityTable

• row-click - Клик по строке таблицы
• tab-change - Переключение вкладки

Canvas

• canvas-change - Изменение состояния канваса
• form-select - Выбор формы

Стили

Библиотека использует SCSS для стилизации. Все стили инкапсулированы в компонентах.

Для кастомизации можно переопределить CSS переменные или использовать CSS-in-JS подход.

Разработка

# Установка зависимостей
npm install

# Запуск в режиме разработки
npm run dev

# Сборка библиотеки
npm run build

# Проверка типов
npm run type-check

Лицензия

MIT