@mayademcom/directus-extension-options-interface v1.0.0

Directus Options Interface

A sophisticated repeater interface for Directus CMS that enables creation of multiple choice questions with drag & drop reordering, rich content editing, and flexible validation rules. Perfect for quizzes, surveys, and educational content management.

🚀 Features

✅ Drag & Drop Reordering - Easily rearrange options with intuitive drag handles
✅ Block Editor Content - Rich content editing with configurable tools (headers, lists, quotes, code, etc.)
✅ Flexible Validation - Support for single or multiple correct answers with min/max limits
✅ Smart Correct Answer Logic - Automatically handles single-select vs multi-select behavior
✅ Configurable Tools - Choose which block editor tools are available (paragraph, heading, lists, etc.)
✅ Custom Templates - Customizable option labels with index placeholders
✅ Optional Validation - Toggle correct answer validation on/off for surveys vs quizzes
✅ Visual Feedback - Clear indicators for correct answers and drag states
✅ Production Ready - Clean code with proper error handling and Vue 3 Composition API

📋 Requirements

✅ Directus v10+
✅ Node.js v18+
✅ Vue 3 Composition API support
✅ Modern Browser with ES6+ support

🔧 Installation

Method 1: NPM Installation (Recommended)

# Navigate to your Directus project root
cd your-directus-project

# Install the extension via npm
npm i @mayademcom/directus-extension-options-interface

# Start Directus
npx directus start

Method 2: Manual Installation

# Clone or download the extension
git clone https://github.com/mayademcom/directus-extension-options-interface.git

# Navigate to your Directus project
cd your-directus-project

# Copy extension to Directus extensions directory
cp -r directus-extension-options-interface extensions/

# Install dependencies
cd extensions/directus-extension-options-interface
npm install

# Build the extension
npm run build

# Return to project root and start Directus
cd ../../../
npx directus start