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

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, який ідеально підходить під ваші завдання.