@veribir/m2a-interface 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +86 -0
- package/package.json +7 -7
package/LICENSE
CHANGED
package/README.md
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# Builder (M2A) Button Matrix for Directus
|
|
2
|
+
|
|
3
|
+
This interface extension replaces Directus' default Many-to-Any (M2A) builder dropdown with a fast, visual grid that makes large collections easy to scan. Users can open a modal, search, filter by category or tag, and trigger the original builder actions with keyboard shortcuts or mouse clicks.
|
|
4
|
+
|
|
5
|
+
## Highlights
|
|
6
|
+
- Transforms the M2A builder into a responsive grid with collection banners, icons, and labels.
|
|
7
|
+
- Supports optional search, category, and tag chips so editors can zero in on the right content type.
|
|
8
|
+
- Mirrors the built-in builder actions, so you keep existing permissions, relations, and behaviors.
|
|
9
|
+
- Keyboard-friendly: arrow keys, Home/End, and Enter continue to work for power users.
|
|
10
|
+
- Written with the Directus Extensions SDK, Vue 3, and VueUse utilities for a lightweight footprint.
|
|
11
|
+
|
|
12
|
+
## Requirements
|
|
13
|
+
- Directus `^11.8.0` (the interface hooks into the builder introduced in 11.8).
|
|
14
|
+
- Node.js `>=18` (matches the Directus SDK toolchain) and npm.
|
|
15
|
+
- Access to your Directus project files so you can place the compiled interface under `extensions/interfaces`.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
1. **Install dependencies**
|
|
19
|
+
```bash
|
|
20
|
+
npm install
|
|
21
|
+
```
|
|
22
|
+
2. **Build the extension**
|
|
23
|
+
```bash
|
|
24
|
+
npm run build
|
|
25
|
+
```
|
|
26
|
+
This emits `dist/index.js`, the entry point declared in `package.json`.
|
|
27
|
+
3. **Copy or link the interface into Directus**
|
|
28
|
+
- Copy the `dist` folder (or the entire repository) into `<directus-root>/extensions/interfaces/m2a-button-matrix`, **or**
|
|
29
|
+
- Run `npm run link` to symlink the extension into a locally running Directus instance via the Extensions SDK helper.
|
|
30
|
+
4. **Restart Directus** so it discovers the new interface.
|
|
31
|
+
|
|
32
|
+
> **Tip:** `npm run dev` rebuilds the extension in watch mode and is ideal when paired with `npm run link` during active development.
|
|
33
|
+
|
|
34
|
+
## Usage inside Directus
|
|
35
|
+
1. Open *Settings → Data Model* and edit the collection that contains your existing M2A field.
|
|
36
|
+
2. Add a new field (alias or presentation) where you want the matrix to render.
|
|
37
|
+
3. Choose **Builder (M2A) Button Matrix** as the interface.
|
|
38
|
+
4. Configure the options below, then place the field directly above or below the real M2A builder as indicated by the notice rendered by the interface.
|
|
39
|
+
|
|
40
|
+
### Configuration Options
|
|
41
|
+
| Option | Type | Description |
|
|
42
|
+
| --- | --- | --- |
|
|
43
|
+
| **Target Builder (M2A) field placement** | Select (`above` or `below`) | Where the original builder sits relative to this presentation field. Determines which sibling DOM node the extension hijacks.
|
|
44
|
+
| **Enable Search** | Boolean | Turns on the search input inside the modal.
|
|
45
|
+
| **Search Placeholder** | String | Placeholder text for the search bar (only visible when search is enabled).
|
|
46
|
+
| **Category Collection** | Collection picker | Optional collection containing category terms.
|
|
47
|
+
| **Category Relation Field** | String | Field name (in the allowed collections) that stores the category relation. Used to auto-tag the grid cards.
|
|
48
|
+
| **Tag Collection** | Collection picker | Optional collection containing tag terms.
|
|
49
|
+
| **Tag Relation Field** | String | Field name in the allowed collections that stores tag relations.
|
|
50
|
+
|
|
51
|
+
### Filters & Keyboard Controls
|
|
52
|
+
- **Search:** Type to instantly filter the cards by their label.
|
|
53
|
+
- **Category/Tag chips:** Click chips to toggle filters; the modal shows active filters above the grid.
|
|
54
|
+
- **Clear filters:** Use the *Clear all* button to reset search, categories, and tags.
|
|
55
|
+
- **Arrow keys:** Navigate between cards.
|
|
56
|
+
- **Home / End:** Jump to the first or last card.
|
|
57
|
+
- **Enter / Space:** Activate the focused card, triggering the original builder action.
|
|
58
|
+
|
|
59
|
+
## Development Workflow
|
|
60
|
+
- `npm run dev` – watch mode build with readable output; pair with `npm run link` for hot iterations.
|
|
61
|
+
- `npm run build` – production build with minified output.
|
|
62
|
+
- `npm run link` – symlink the extension into a Directus project (requires the `DIRECTUS_ENV` variables expected by the Extensions SDK).
|
|
63
|
+
- `npm run validate` – run the Directus validator to ensure the manifest, bundle, and metadata are correct before shipping.
|
|
64
|
+
|
|
65
|
+
### Project Structure
|
|
66
|
+
```
|
|
67
|
+
src/
|
|
68
|
+
index.ts # Registers the interface, exposes builder options, and metadata.
|
|
69
|
+
interface.vue # Vue 3 component implementing the matrix UI, modal, filters, and keyboard UX.
|
|
70
|
+
tsconfig.json # TypeScript settings used by the Extensions SDK build.
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Releasing
|
|
74
|
+
1. Update `version` in `package.json` according to semver.
|
|
75
|
+
2. Run `npm run build`.
|
|
76
|
+
3. Publish the package or distribute the `dist` folder to customers or internal projects.
|
|
77
|
+
|
|
78
|
+
## Publishing to npm
|
|
79
|
+
1. **Tag & commit** – ensure the version bump and build artifacts are committed and pushed (`git tag vX.Y.Z && git push --tags`).
|
|
80
|
+
2. **Authenticate** – run `npm login` (or `npm login --scope @veribir` for scoped publishing) with an account that has publish rights; complete the 2FA prompt if required.
|
|
81
|
+
3. **Verify access level** – this package is scoped and should stay public, so use `npm publish --access public` unless your org mandates otherwise.
|
|
82
|
+
4. **Publish** – execute `npm publish --workspace .` (or run from this folder) after confirming `dist/` contains the latest build.
|
|
83
|
+
5. **Post-publish checks** – confirm the new version appears on npmjs.com, then update downstream Directus projects or internal registries.
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
Proprietary © Veribir. All rights reserved.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veribir/m2a-interface",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.5",
|
|
5
5
|
"description": "This Directus extension transforms the standard Many-to-Any (M2A) Builder dropdown into an intuitive visual modal with card-based collection selection. Users can quickly filter collections using category and tag chips, search by name, and navigate with keyboard shortcuts. The responsive grid layout displays collection icons and banners, making it easy to find the right content type in large Directus projects with many available collections.",
|
|
6
6
|
"author": "Veribir",
|
|
7
7
|
"license": "Proprietary",
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
"link": "directus-extension link",
|
|
36
36
|
"validate": "directus-extension validate"
|
|
37
37
|
},
|
|
38
|
-
"dependencies": {
|
|
39
|
-
"@vueuse/core": "^13.1.0"
|
|
40
|
-
},
|
|
41
38
|
"devDependencies": {
|
|
42
|
-
"@directus/extensions-sdk": "
|
|
43
|
-
"typescript": "^5.
|
|
44
|
-
"vue": "3.5.
|
|
39
|
+
"@directus/extensions-sdk": "^17.0.4",
|
|
40
|
+
"typescript": "^5.9.3",
|
|
41
|
+
"vue": "^3.5.26"
|
|
42
|
+
},
|
|
43
|
+
"dependencies": {
|
|
44
|
+
"@vueuse/core": "^14.1.0"
|
|
45
45
|
}
|
|
46
46
|
}
|