update quality

QuasarFrontend/src/components/playground/MainComponentArea.vue

@@ -0,0 +1,125 @@
+<template>
+  <q-card class="full-height">
+    <q-card-section class="row items-center justify-between">
+      <div>
+        <div class="text-h6">{{ componentInfo?.name || 'Select a Component' }}</div>
+        <div class="text-caption text-grey" v-if="componentInfo">
+          {{ componentInfo.description }}
+        </div>
+      </div>
+      <div class="row items-center q-gutter-xs">
+        <q-btn
+          v-if="componentInfo"
+          color="primary"
+          @click="executeComponent"
+          :loading="isRunning"
+          size="lg"
+          icon="mdi-play"
+          label="Execute"
+        />
+        <q-btn
+          v-if="componentInfo"
+          color="secondary"
+          @click="toggleSidebar"
+          flat
+          :icon="sidebarOpen ? 'mdi-chevron-right' : 'mdi-chevron-left'"
+          size="lg"
+          :title="sidebarOpen ? 'Hide sidebar' : 'Show sidebar'"
+        />
+      </div>
+    </q-card-section>
+
+    <q-card-section class="q-pa-md">
+      <component
+        :is="componentComponent"
+        v-if="componentComponent"
+        ref="componentRef"
+      />
+      <div v-else class="text-center text-grey q-pa-xl">
+        <q-icon name="mdi-cube-outline" size="64px" class="q-mb-md" />
+        <div class="text-h6">Welcome to S8n Playground</div>
+        <div class="text-body1">
+          Select a component from the sidebar to start interacting with it.
+        </div>
+      </div>
+    </q-card-section>
+    <q-card-section>
+      <div
+        class="row q-pa-md"
+        style="background-color: rgba(130, 130, 130, 0.3)"
+        v-if="componentInfo?.methods"
+      >
+        <q-btn
+          v-for="method in customActions"
+          :key="method"
+          color="secondary"
+          @click="executeCustomAction(method)"
+          :loading="isRunning"
+          size="md"
+          :icon="actionIcon(method)"
+          :label="method"
+        />
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type Component } from 'vue'
+import type { ComponentInfo } from 'src/composables/useComponentStore'
+
+interface ComponentInstance {
+  execute: (method: string) => Promise<unknown>
+  running: boolean
+  error?: string
+  duration?: number
+  inputs: unknown
+  outputs?: unknown
+  statusCode?: number
+}
+
+const props = defineProps<{
+  componentInfo: ComponentInfo | undefined
+  componentComponent: Component | undefined
+  sidebarOpen: boolean
+  isRunning: boolean
+}>()
+
+const emit = defineEmits<{
+  execute: []
+  toggleSidebar: []
+  customAction: [method: string]
+}>()
+
+const componentRef = ref<ComponentInstance>()
+
+const customActions = computed(() => {
+  const methods = props.componentInfo?.methods ?? []
+  return methods.filter((m) => m !== 'Execute')
+})
+
+const actionIcon = (method: string) => {
+  const icons: Record<string, string> = {
+    Reset: 'mdi-refresh',
+    Clear: 'mdi-close',
+    Default: 'mdi-cog',
+  }
+  return icons[method] || 'mdi-cog'
+}
+
+const executeComponent = () => {
+  emit('execute')
+}
+
+const toggleSidebar = () => {
+  emit('toggleSidebar')
+}
+
+const executeCustomAction = (method: string) => {
+  emit('customAction', method)
+}
+
+defineExpose({
+  componentRef,
+})
+</script>