@directus/extensions-sdk 9.0.0-rc.100

package/templates/interface/javascript/src/index.js

@@ -0,0 +1,11 @@
+import InterfaceComponent from './interface.vue';
+
+export default {
+	id: 'custom',
+	name: 'Custom',
+	icon: 'box',
+	description: 'This is my custom interface!',
+	component: InterfaceComponent,
+	options: null,
+	types: ['string'],
+};

package/templates/interface/javascript/src/interface.vue

@@ -0,0 +1,22 @@
+<template>
+	<input :value="value" @input="handleChange($event.target.value)" />
+</template>
+
+<script>
+export default {
+	props: {
+		value: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['input'],
+	setup(props, { emit }) {
+		return { handleChange };
+
+		function handleChange(value) {
+			emit('input', value);
+		}
+	},
+};
+</script>

package/templates/interface/typescript/src/index.ts

@@ -0,0 +1,12 @@
+import { defineInterface } from '@directus/extensions-sdk';
+import InterfaceComponent from './interface.vue';
+
+export default defineInterface({
+	id: 'custom',
+	name: 'Custom',
+	icon: 'box',
+	description: 'This is my custom interface!',
+	component: InterfaceComponent,
+	options: null,
+	types: ['string'],
+});

package/templates/interface/typescript/src/interface.vue

@@ -0,0 +1,24 @@
+<template>
+	<input :value="value" @input="handleChange($event.target.value)" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['input'],
+	setup(props, { emit }) {
+		return { handleChange };
+
+		function handleChange(value: string): void {
+			emit('input', value);
+		}
+	},
+});
+</script>

package/templates/interface/typescript/src/shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}

package/templates/layout/javascript/src/index.js

@@ -0,0 +1,19 @@
+import { ref } from 'vue';
+import LayoutComponent from './layout.vue';
+
+export default {
+	id: 'custom',
+	name: 'Custom',
+	icon: 'box',
+	component: LayoutComponent,
+	slots: {
+		options: () => null,
+		sidebar: () => null,
+		actions: () => null,
+	},
+	setup() {
+		const name = ref('Custom Layout');
+
+		return { name };
+	},
+};

package/templates/layout/javascript/src/layout.vue

@@ -0,0 +1,22 @@
+<template>
+	<div>
+		<p>Name: {{ name }}</p>
+		<p>Collection: {{ collection }}</p>
+	</div>
+</template>
+
+<script>
+export default {
+	inheritAttrs: false,
+	props: {
+		collection: {
+			type: String,
+			required: true,
+		},
+		name: {
+			type: String,
+			required: true,
+		},
+	},
+};
+</script>

package/templates/layout/typescript/src/index.ts

@@ -0,0 +1,20 @@
+import { ref } from 'vue';
+import { defineLayout } from '@directus/extensions-sdk';
+import LayoutComponent from './layout.vue';
+
+export default defineLayout({
+	id: 'custom',
+	name: 'Custom',
+	icon: 'box',
+	component: LayoutComponent,
+	slots: {
+		options: () => null,
+		sidebar: () => null,
+		actions: () => null,
+	},
+	setup() {
+		const name = ref('Custom Layout');
+
+		return { name };
+	},
+});

package/templates/layout/typescript/src/layout.vue

@@ -0,0 +1,24 @@
+<template>
+	<div>
+		<p>Name: {{ name }}</p>
+		<p>Collection: {{ collection }}</p>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	inheritAttrs: false,
+	props: {
+		collection: {
+			type: String,
+			required: true,
+		},
+		name: {
+			type: String,
+			required: true,
+		},
+	},
+});
+</script>

package/templates/layout/typescript/src/shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}

package/templates/module/javascript/src/index.js

@@ -0,0 +1,13 @@
+import ModuleComponent from './module.vue';
+
+export default {
+	id: 'custom',
+	name: 'Custom',
+	icon: 'box',
+	routes: [
+		{
+			path: '',
+			component: ModuleComponent,
+		},
+	],
+};

package/templates/module/javascript/src/module.vue

@@ -0,0 +1,7 @@
+<template>
+	<private-view title="My Custom Module">Content goes here...</private-view>
+</template>
+
+<script>
+export default {};
+</script>

package/templates/module/typescript/src/index.ts

@@ -0,0 +1,14 @@
+import { defineModule } from '@directus/extensions-sdk';
+import ModuleComponent from './module.vue';
+
+export default defineModule({
+	id: 'custom',
+	name: 'Custom',
+	icon: 'box',
+	routes: [
+		{
+			path: '',
+			component: ModuleComponent,
+		},
+	],
+});

package/templates/module/typescript/src/module.vue

@@ -0,0 +1,9 @@
+<template>
+	<private-view title="My Custom Module">Content goes here...</private-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>

package/templates/module/typescript/src/shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+	"compilerOptions": {
+		"target": "ES2019",
+		"lib": ["ES2019"],
+		"moduleResolution": "node",
+		"declaration": true,
+		"declarationMap": true,
+		"strict": true,
+		"noFallthroughCasesInSwitch": true,
+		"esModuleInterop": true,
+		"noImplicitAny": true,
+		"noImplicitThis": true,
+		"noImplicitReturns": true,
+		"noUnusedLocals": true,
+		"noUncheckedIndexedAccess": true,
+		"noUnusedParameters": true,
+		"alwaysStrict": true,
+		"strictNullChecks": true,
+		"strictFunctionTypes": true,
+		"strictBindCallApply": true,
+		"strictPropertyInitialization": true,
+		"resolveJsonModule": false,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"allowSyntheticDefaultImports": true,
+		"isolatedModules": true,
+		"rootDir": "./src",
+	},
+	"include": ["./src/**/*.ts"]
+}