From a9654ad5cb7ae5a22c3a2d45ffe23f719f320935 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 13 Jan 2025 16:42:15 +0300
Subject: [PATCH] Add empty message if there are no common tokens

---
 .../designer/editor/component/DesignComponent.vue      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue b/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
index 2d4750722..87de0da3c 100644
--- a/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
+++ b/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
@@ -3,9 +3,12 @@
         <div class="text-lg font-semibold capitalize mb-2">{{ componentKey }}</div>
         <Fieldset legend="Common" :toggleable="true" class="mb-3">
             <div class="flex flex-col gap-3">
-                <template v-for="(value, name) in tokens" :key="name">
-                    <DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
+                <template v-if="hasCommonTokens">
+                    <template v-for="(value, name) in tokens" :key="name">
+                        <DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
+                    </template>
                 </template>
+                <span v-else class="block py-3">There are no design tokens</span>
             </div>
         </Fieldset>
         <Fieldset legend="Color Scheme" :toggleable="true">
@@ -49,6 +52,9 @@ export default {
         },
         hasColorScheme() {
             return this.tokens.colorScheme != undefined;
+        },
+        hasCommonTokens() {
+            return Object.keys(this.tokens).filter((name) => name !== 'colorScheme').length > 0;
         }
     }
 };