Implement basic functionality

Author: duydvu

src/index.ts

@@ -7,9 +7,42 @@ export default defineInterface({
 	icon: 'sync',
 	description: 'Display a button to trigger custom APIs',
 	component: InterfaceComponent,
+	hideLabel: true,
+	hideLoader: true,
 	types: ['alias'],
+	localTypes: ['presentation'],
 	group: 'presentation',
 	options: [
+		{
+			field: 'label',
+			name: 'Label',
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'input',
+			},
+		},
+		{
+			field: 'size',
+			name: 'Size',
+			type: 'string',
+			schema: {
+				default_value: '',
+			},
+			meta: {
+				width: 'half',
+				interface: 'select-dropdown',
+				options: {
+					choices: [
+						{ text: 'x-small', value: 'x-small' },
+						{ text: 'small', value: 'small' },
+						{ text: 'default', value: '' },
+						{ text: 'large', value: 'large' },
+						{ text: 'x-large', value: 'x-large' },
+					],
+				},
+			},
+		},
 		{
 			field: 'url',
 			name: 'URL',

src/interface.vue

@@ -1,23 +1,54 @@
 <template>
-	<div>{{ value }}</div>
+	<div>
+		<v-button v-bind="{ [size]: true, loading }" @click="onClick">{{ label }}</v-button>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
+import { useApi } from '@directus/extensions-sdk';
 
 export default defineComponent({
 	props: {
-		value: {
-			type: [String, Number],
+		label: {
+			type: String,
 			default: null,
 		},
-		field: {
+		size: {
 			type: String,
 			default: null,
 		},
+		url: {
+			type: String,
+			default: '',
+		},
+		method: {
+			type: String,
+			default: 'GET',
+		},
 	},
-	emits: ['input'],
-	setup(props, { emit }) {
+	setup(props) {
+		const api = useApi();
+
+		const loading = ref(false);
+
+		return { loading, onClick };
+
+		async function onClick() {
+			loading.value = true;
+
+			try {
+				const data = await api.request({
+					method: props.method,
+					url: props.url,
+				});
+				console.log(data);
+			} catch (error) {
+				console.log(error);
+			} finally {
+				loading.value = false;
+			}
+		}
 	},
 });
 </script>