From 0572139f0f7b3f932dbe34dfb367508a61aef6d8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 13 Nov 2024 13:00:37 +0300
Subject: [PATCH] Enter key support

---
 .../components/layout/AppDesigner.vue         | 32 +++++++++++++------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index ae899c6fa..6b3be803b 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -36,8 +36,10 @@
                 </TabPanel>
                 <TabPanel value="1">
                     <div class="flex flex-col gap-3">
-                        <DesignBorderRadius />
-                        <DesignColors />
+                        <form @keydown="onKeyDown">
+                            <DesignBorderRadius />
+                            <DesignColors />
+                        </form>
                     </div>
                 </TabPanel>
                 <TabPanel value="2">
@@ -46,11 +48,13 @@
                             <AccordionHeader>Common</AccordionHeader>
                             <AccordionContent>
                                 <div class="flex flex-col gap-3">
-                                    <DesignGeneral />
-                                    <DesignFormField />
-                                    <DesignList />
-                                    <DesignNavigation />
-                                    <DesignOverlay />
+                                    <form @keydown="onKeyDown">
+                                        <DesignGeneral />
+                                        <DesignFormField />
+                                        <DesignList />
+                                        <DesignNavigation />
+                                        <DesignOverlay />
+                                    </form>
                                 </div>
                             </AccordionContent>
                         </AccordionPanel>
@@ -65,10 +69,14 @@
                                     </TabList>
                                     <TabPanels class="!px-0">
                                         <TabPanel value="cs-0">
-                                            <DesignCS :value="preset.semantic.colorScheme.light" />
+                                            <form @keydown="onKeyDown">
+                                                <DesignCS :value="preset.semantic.colorScheme.light" />
+                                            </form>
                                         </TabPanel>
                                         <TabPanel value="cs-1">
-                                            <DesignCS :value="preset.semantic.colorScheme.dark" />
+                                            <form @keydown="onKeyDown">
+                                                <DesignCS :value="preset.semantic.colorScheme.dark" />
+                                            </form>
                                         </TabPanel>
                                     </TabPanels>
                                 </Tabs>
@@ -335,6 +343,12 @@ app.mount("#app");
         refreshACTokens() {
             this.acTokens = [];
             this.generateACTokens(null, this.preset);
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+                this.apply();
+                event.preventDefault();
+            }
         }
     }
 };