Разработка кастомных интерфейсов Directus — Vue 3 Components

npx create-directus-extension@latest
# Type: interface
# Name: color-picker
cd directus-extension-interface-color-picker
npm install
npm run dev
# режим разработки с hot reload

Сам компонент использует Composition API, принимает value, placeholder и эмитит input:

<!-- src/interface.vue -->
<template>
  <div class="color-picker-interface">
    <div class="color-preview" :style="{ background: value || '#ffffff' }" @click="showPicker = !showPicker" />
    <v-input :model-value="value" type="text" :placeholder="placeholder || '#000000'" @update:model-value="$emit('input', $event)" />
    <div v-if="showPicker" class="color-grid">
      <div v-for="color in presetColors" :key="color" class="color-swatch" :style="{ background: color }" :class="{ active: value === color }" @click="selectColor(color)" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  value: string | null
  placeholder?: string
  presetColors?: string[]
}>()

const emit = defineEmits<{
  input: [value: string | null]
}>()

const showPicker = ref(false)

const defaultColors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A8', '#FFAA00', '#00AAFF']
const presetColors = props.presetColors || defaultColors

function selectColor(color: string) {
  emit('input', color)
  showPicker.value = false
}
</script>

<style scoped>
.color-picker-interface {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.color-preview {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid var(--border-normal);
}

.color-grid {
  position: absolute;
  top: 100%;
  left: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--background-page);
  border: 1px solid var(--border-normal);
  border-radius: 4px;
  z-index: 100;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
}

.color-swatch.active {
  outline: 2px solid var(--primary);
}
</style>

Регистрация интерфейса в src/index.ts:

// src/index.ts
import InterfaceComponent from './interface.vue'

export default {
  id: 'color-picker',
  name: 'Color Picker',
  icon: 'palette',
  description: 'Выбор цвета из палитры',
  component: InterfaceComponent,
  types: ['string'], // для каких типов полей доступен
  options: [
    {
      field: 'presetColors',
      name: 'Preset Colors',
      type: 'json',
      meta: {
        interface: 'tags',
        options: {
          placeholder: '#FF5733',
        },
      },
    },
    {
      field: 'placeholder',
      name: 'Placeholder',
      type: 'string',
      meta: {
        interface: 'input',
      },
    },
  ],
}

Другой частый пример — оценка звёздами (star rating):

<!-- Star Rating Interface -->
<template>
  <div class="star-rating">
    <span
      v-for="star in maxStars"
      :key="star"
      class="star"
      :class="{ filled: star <= (hoveredStar || value || 0) }"
      @click="$emit('input', star)"
      @mouseenter="hoveredStar = star"
      @mouseleave="hoveredStar = null"
    >★</span>
    <span v-if="value" class="value-label">{{ value }}/{{ maxStars }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  value: number | null
  maxStars?: number
}>()

const emit = defineEmits<{
  input: [value: number]
}>()

const maxStars = props.maxStars || 5
const hoveredStar = ref<number | null>(null)
</script>

Почему кастомный интерфейс экономит время?

Готовые интерфейсы Directus покрывают 80% типовых полей, но оставшиеся 20% — самые ценные: они напрямую влияют на UX администратора. Кастомный интерфейс Directus в 3-5 раз ускоряет ввод данных по сравнению с сырым JSON-полем или отдельным скриптом. Вот сравнение:

Кастомизация панели администратора Directus через кастомные интерфейсы — это способ адаптировать админку под бизнес-требования без лишних телодвижений. Мы используем TypeScript, Vue 3 Composition API и официальный CLI — никаких костылей. Гарантируем совместимость с последней стабильной версией Directus. Каждый интерфейс проходит code review и тестирование в трёх браузерах.

Что входит в работу

• Документация: README с инструкцией по установке и настройке, описание всех опций.
• Исходный код в вашем репозитории (GitHub/GitLab).
• Сборка и публикация как npm-пакета (опционально).
• Обучение администраторов: сессия 30–60 минут.
• 14 дней поддержки после деплоя: исправление багов, консультации.

Процесс работы

1. Аналитика: обсуждаем UI/UX прототип, определяем типы полей, дополнительные опции.
2. Проектирование: создаём спецификацию компонента на Vue 3, продумываем состояния (пусто, ошибка, загрузка).
3. Разработка: пишем компонент с Composition API, настраиваем регистрацию, добавляем локализацию (i18n).
4. Тестирование: проверяем в изолированном Directus-проекте, эмуляцию разных версий, тесты на корректность данных.
5. Интеграция: устанавливаем на вашем сервере, настраиваем права доступа.
6. Деплой: публикуем в production, документируем.

Сроки

Стоимость рассчитывается индивидуально — пишите, оценим проект под ключ.

Типичные ошибки при самостоятельной разработке

• Неверная типизация: если интерфейс зарегистрирован только для string, а поле хранит integer, данные не сохранятся. Всегда указываем корректный types.
• Проблемы с реактивностью: Directus ожидает синхронный эмит input. Асинхронные обновления могут вызвать конфликт с историями. Используем только $emit('input', value).
• Игнорирование рендеринга в списках: если поле отображается в таблице, компонент должен корректно работать в режиме compact. Проверяем проп width и адаптируем верстку.

Свяжитесь с нами, чтобы получить консультацию по вашему проекту. Мы оценим сложность и предложим оптимальное решение. Напишите нам — и мы поможем вам заказать интерфейс Directus, идеально подходящий под ваши задачи.