fix: Make extension work for Directus 10.x (>= 10.7)

BREAKING CHANGE: Migrated to @directus/extension-sdk 10.x, this limits this extension to Directus 10.x
hanneskuettner · Dec 22, 2023 · 433ed86 · 433ed86
1 parent 6b6ecea
commit 433ed86
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 104 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
 		"type": "interface",
 		"path": "dist/index.js",
 		"source": "src/index.ts",
-		"host": "^9.25.1"
+		"host": "^10.1.0"
 	},
 	"files": [
 		"dist"
@@ -36,6 +36,7 @@
 		"release": "semantic-release"
 	},
 	"devDependencies": {
+		"@directus/extensions-sdk": "^10.2.0",
 		"@directus/format-title": "^10.0.0",
 		"@directus/types": "^9.25.3",
 		"@directus/utils": "^9.25.3",
@@ -51,12 +52,12 @@
 		"lodash-es": "^4.17.21",
 		"prettier": "^2.8.7",
 		"rollup-plugin-copy": "^3.4.0",
-		"sass": "^1.62.0",
+		"sass": "^1.69.5",
+		"sass-loader": "^13.3.2",
 		"semantic-release": "^21.0.2",
 		"typescript": "^5.0.4"
 	},
 	"peerDependencies": {
-		"@directus/extensions-sdk": "^9.25.3",
 		"vue": "^3.2.47",
 		"vue-i18n": "^9.2.2"
 	},

diff --git a/src/composables/use-group-section.ts b/src/composables/use-group-section.ts
@@ -1,6 +1,5 @@
-import { Field, ValidationError } from '@directus/types';
-import { isNil, merge } from 'lodash-es';
-import { computed, Ref, unref } from 'vue';
+import type { Field, ValidationError } from '@directus/types';
+import { Ref, computed, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 interface UseGroupSectionOptions {
@@ -14,7 +13,7 @@ export function useGroupSection({ field, fields: groupFields, values, validation
 	const { t } = useI18n();
 
 	const fieldsInSection = computed(() => {
-		const fields: Field[] = [merge({}, unref(field), { hideLabel: true })];
+		const fields: Field[] = [Object.assign({}, unref(field), { hideLabel: true })];
 
 		if (unref(field).meta?.special?.includes('group')) {
 			fields.push(...getFieldsForGroup(unref(field).meta?.field, [], unref(groupFields)));
@@ -49,7 +48,7 @@ export function useGroupSection({ field, fields: groupFields, values, validation
 
 function getFieldsForGroup(group: undefined | string, passed: string[] = [], groupFields: Field[]): Field[] {
 	const fieldsInGroup: Field[] = groupFields.filter((field) => {
-		return field.meta?.group === group || (group === null && isNil(field.meta));
+		return field.meta?.group === group || (group === null && !field.meta);
 	});
 
 	for (const field of fieldsInGroup) {

diff --git a/src/group-tabs.vue b/src/group-tabs.vue
@@ -1,42 +1,9 @@
-<template>
-	<tab-group
-		v-model="activeIndex"
-		:tab-fields="groupFields"
-		:fields="fields"
-		:values="groupValues"
-		:validation-errors="validationErrors!"
-		class="group-tabs"
-	>
-		<template v-for="(groupField, index) in groupFields" :key="groupField.field">
-			<tab-panel
-				v-if="activeIndex === index"
-				:field="groupField"
-				:fields="fields"
-				:values="groupValues"
-				:initial-values="initialValues"
-				:disabled="disabled"
-				:batch-mode="batchMode"
-				:batch-active-fields="batchActiveFields"
-				:primary-key="primaryKey"
-				:loading="loading"
-				:validation-errors="validationErrors"
-				:badge="badge"
-				:raw-editor-enabled="rawEditorEnabled"
-				:group="field.meta.field"
-				:direction="direction"
-				@apply="$emit('apply', $event)"
-			/>
-		</template>
-	</tab-group>
-</template>
-
 <script setup lang="ts">
-import { Field, ValidationError } from '@directus/types';
-import { isEqual } from 'lodash-es';
+import type { Field, ValidationError } from '@directus/types';
 import { ref, watch } from 'vue';
+import { isEqual } from 'lodash-es';
 import TabGroup from './tab-group.vue';
 import TabPanel from './tab-panel.vue';
-
 const props = withDefaults(
 	defineProps<{
 		field: Field;
@@ -112,10 +79,43 @@ function useComputedGroup() {
 }
 </script>
 
+<template>
+	<tab-group
+		v-model="activeIndex"
+		:tab-fields="groupFields"
+		:fields="fields"
+		:values="groupValues"
+		:validation-errors="validationErrors!"
+		class="group-tabs"
+	>
+		<template v-for="(groupField, index) in groupFields" :key="groupField.field">
+			<tab-panel
+				v-if="activeIndex === index"
+				:field="groupField"
+				:fields="fields"
+				:values="groupValues"
+				:initial-values="initialValues"
+				:disabled="disabled"
+				:batch-mode="batchMode"
+				:batch-active-fields="batchActiveFields"
+				:primary-key="primaryKey"
+				:loading="loading"
+				:validation-errors="validationErrors"
+				:badge="badge"
+				:raw-editor-enabled="rawEditorEnabled"
+				:group="field.meta.field"
+				:direction="direction"
+				@apply="$emit('apply', $event)"
+			/>
+		</template>
+	</tab-group>
+</template>
+
 <style scoped lang="scss">
 .group-tabs {
 	.tab-panel {
 		margin-top: var(--form-horizontal-gap);
 	}
 }
 </style>
+
diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,6 @@
-import { defineInterface } from '@directus/utils';
 import InterfaceGroupTabs from './group-tabs.vue';
 
-export default defineInterface({
+export default {
 	id: 'group-tabs',
 	name: 'Tab Group',
 	description: 'Display fields in a tab group',
@@ -14,4 +13,4 @@ export default defineInterface({
 	localTypes: ['group'],
 	group: 'group',
 	options: [],
-});
+};
diff --git a/src/tab-button.vue b/src/tab-button.vue
@@ -1,19 +1,3 @@
-<template>
-	<v-button
-		:id="`tab-${field.field}`"
-		class="tab-button"
-		role="tab"
-		:aria-selected="active ? 'true' : 'false'"
-		:aria-controls="`tabpanel-${field.field}`"
-		small
-	>
-		<span v-if="edited" v-tooltip="t('edited')" class="edit-dot"></span>
-		<span class="field-name">{{ field.name }}</span>
-		<v-chip v-if="badge" x-small>{{ badge }}</v-chip>
-		<v-icon v-if="validationMessage" v-tooltip="validationMessage" class="warning" name="error" small />
-	</v-button>
-</template>
-
 <script lang="ts" setup>
 import { Field, ValidationError } from '@directus/types';
 import { toRefs } from 'vue';
@@ -33,6 +17,22 @@ const { edited, validationMessage } = useGroupSection(toRefs(props));
 const { t } = useI18n();
 </script>
 
+<template>
+	<v-button
+		:id="`tab-${field.field}`"
+		class="tab-button"
+		role="tab"
+		:aria-selected="active ? 'true' : 'false'"
+		:aria-controls="`tabpanel-${field.field}`"
+		small
+	>
+		<span v-if="edited" v-tooltip="t('edited')" class="edit-dot"></span>
+		<span class="field-name">{{ field.name }}</span>
+		<v-chip v-if="badge" x-small>{{ badge }}</v-chip>
+		<v-icon v-if="validationMessage" v-tooltip="validationMessage" class="warning" name="error" small />
+	</v-button>
+</template>
+
 <style scoped lang="scss">
 .v-button {
 	--v-button-background-color: transparent;
@@ -104,3 +104,4 @@ const { t } = useI18n();
 	color: var(--danger);
 }
 </style>
+
diff --git a/src/tab-group.vue b/src/tab-group.vue
@@ -1,24 +1,6 @@
-<template>
-	<div>
-		<div role="tablist" class="tab-list" @keydown="onKeyDown">
-			<tab-button
-				v-for="(field, index) in tabFields"
-				ref="buttons"
-				:key="field.field"
-				:field="field"
-				:fields="fields"
-				:values="values"
-				:validation-errors="validationErrors"
-				:active="index === modelValue"
-				@click="$emit('update:modelValue', index)"
-			/>
-		</div>
-		<slot />
-	</div>
-</template>
 
 <script setup lang="ts">
-import { Field, ValidationError } from '@directus/types';
+import type { Field, ValidationError } from '@directus/types';
 import { ref, unref } from 'vue';
 import TabButton from './tab-button.vue';
 
@@ -63,6 +45,25 @@ function onKeyDown(event: KeyboardEvent) {
 }
 </script>
 
+<template>
+	<div>
+		<div role="tablist" class="tab-list" @keydown="onKeyDown">
+			<tab-button
+				v-for="(field, index) in tabFields"
+				ref="buttons"
+				:key="field.field"
+				:field="field"
+				:fields="fields"
+				:values="values"
+				:validation-errors="validationErrors"
+				:active="index === modelValue"
+				@click="$emit('update:modelValue', index)"
+			/>
+		</div>
+		<slot />
+	</div>
+</template>
+
 <style scoped lang="scss">
 .tab-list {
 	display: flex;

diff --git a/src/tab-panel.vue b/src/tab-panel.vue
@@ -1,25 +1,6 @@
-<template>
-	<div :id="`tabpanel-${field.field}`" class="tab-panel">
-		<v-form
-			:initial-values="initialValues"
-			:fields="fieldsInSection"
-			:model-value="values"
-			:primary-key="primaryKey"
-			:group="group"
-			:validation-errors="validationErrors"
-			:loading="loading"
-			:batch-mode="batchMode"
-			:disabled="disabled"
-			:direction="direction"
-			:show-no-visible-fields="false"
-			:show-validation-errors="false"
-			@update:model-value="$emit('apply', $event)"
-		/>
-	</div>
-</template>
 
 <script setup lang="ts">
-import { Field, ValidationError } from '@directus/types';
+import type { Field, ValidationError } from '@directus/types';
 import { toRefs } from 'vue';
 import { useGroupSection } from './composables/use-group-section';
 
@@ -48,6 +29,26 @@ const props = withDefaults(
 const { fieldsInSection } = useGroupSection(toRefs(props));
 </script>
 
+<template>
+	<div :id="`tabpanel-${field.field}`" class="tab-panel">
+		<v-form
+			:initial-values="initialValues"
+			:fields="fieldsInSection"
+			:model-value="values"
+			:primary-key="primaryKey"
+			:group="group"
+			:validation-errors="validationErrors"
+			:loading="loading"
+			:batch-mode="batchMode"
+			:disabled="disabled"
+			:direction="direction"
+			:show-no-visible-fields="false"
+			:show-validation-errors="false"
+			@update:model-value="$emit('apply', $event)"
+		/>
+	</div>
+</template>
+
 <style lang="scss" scoped>
 .accordion-section {
 	border-top: var(--border-width) solid var(--border-normal);
@@ -76,3 +77,4 @@ const { fieldsInSection } = useGroupSection(toRefs(props));
 	margin: var(--form-vertical-gap) 0;
 }
 </style>
+
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,8 +1,8 @@
 {
 	"compilerOptions": {
-		"target": "ES2020",
-		"lib": ["ES2019", "DOM"],
-		"module": "esnext",
+		"target": "ES2022",
+		"lib": ["ES2022", "DOM"],
+		"module": "ES2022",
 		"moduleResolution": "node",
 		"strict": true,
 		"noFallthroughCasesInSwitch": true,