From a137a44e242f1b7cd790f2bfdfb60e325d4a35eb Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Tue, 31 Aug 2021 18:41:50 +0200
Subject: [PATCH] Update layout templates to new layouts system (#7726)

---
 .../templates/layout/javascript/src/index.js  |  4 ++--
 .../layout/javascript/src/layout.vue          | 22 +++++++++++--------
 .../templates/layout/typescript/src/index.ts  |  4 ++--
 .../layout/typescript/src/layout.vue          | 22 ++++++++++++-------
 4 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/packages/extensions-sdk/templates/layout/javascript/src/index.js b/packages/extensions-sdk/templates/layout/javascript/src/index.js
index 2622c29672..eab12375a2 100644
--- a/packages/extensions-sdk/templates/layout/javascript/src/index.js
+++ b/packages/extensions-sdk/templates/layout/javascript/src/index.js
@@ -11,8 +11,8 @@ export default {
 		sidebar: () => null,
 		actions: () => null,
 	},
-	setup(props) {
-		const name = ref('Custom layout state');
+	setup() {
+		const name = ref('Custom Layout');
 
 		return { name };
 	},
diff --git a/packages/extensions-sdk/templates/layout/javascript/src/layout.vue b/packages/extensions-sdk/templates/layout/javascript/src/layout.vue
index 19d8588ce6..83e4153a76 100644
--- a/packages/extensions-sdk/templates/layout/javascript/src/layout.vue
+++ b/packages/extensions-sdk/templates/layout/javascript/src/layout.vue
@@ -1,17 +1,21 @@
 <template>
-	<div>{{ name }} - Collection: {{ props.collection }}</div>
+	<div>
+		<p>Name: {{ name }}</p>
+		<p>Collection: {{ collection }}</p>
+	</div>
 </template>
 
 <script>
-import { toRefs } from 'vue';
-import { useLayoutState } from '@directus/extensions-sdk';
-
 export default {
-	setup() {
-		const layoutState = useLayoutState();
-		const { props, name } = toRefs(layoutState.value);
-
-		return { props, name };
+	props: {
+		collection: {
+			type: String,
+			required: true,
+		},
+		name: {
+			type: String,
+			required: true,
+		},
 	},
 };
 </script>
diff --git a/packages/extensions-sdk/templates/layout/typescript/src/index.ts b/packages/extensions-sdk/templates/layout/typescript/src/index.ts
index a25a79e94d..24d19a476a 100644
--- a/packages/extensions-sdk/templates/layout/typescript/src/index.ts
+++ b/packages/extensions-sdk/templates/layout/typescript/src/index.ts
@@ -12,8 +12,8 @@ export default defineLayout({
 		sidebar: () => null,
 		actions: () => null,
 	},
-	setup(props) {
-		const name = ref('Custom layout state');
+	setup() {
+		const name = ref('Custom Layout');
 
 		return { name };
 	},
diff --git a/packages/extensions-sdk/templates/layout/typescript/src/layout.vue b/packages/extensions-sdk/templates/layout/typescript/src/layout.vue
index 790ecf2897..d4df4da8c4 100644
--- a/packages/extensions-sdk/templates/layout/typescript/src/layout.vue
+++ b/packages/extensions-sdk/templates/layout/typescript/src/layout.vue
@@ -1,17 +1,23 @@
 <template>
-	<div>{{ name }} - Collection: {{ props.collection }}</div>
+	<div>
+		<p>Name: {{ name }}</p>
+		<p>Collection: {{ collection }}</p>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs } from 'vue';
-import { useLayoutState } from '@directus/extensions-sdk';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
-	setup() {
-		const layoutState = useLayoutState();
-		const { props, name } = toRefs(layoutState.value);
-
-		return { props, name };
+	props: {
+		collection: {
+			type: String,
+			required: true,
+		},
+		name: {
+			type: String,
+			required: true,
+		},
 	},
 });
 </script>