Add demo before code and refactor components related to UI (#451)

* refactor: add demo before code for ui components * style: update demo page component menu css * chore: update tooltip demo css * chore: add indentation to css grid areas
dzangolab · Jan 10, 2025 · 60a309f · 60a309f
1 parent 727dad5
commit 60a309f
Show file tree

Hide file tree

Showing 26 changed files with 889 additions and 854 deletions.
diff --git a/apps/demo/src/assets/css/demoPage.css b/apps/demo/src/assets/css/demoPage.css
@@ -11,6 +11,9 @@
 .demo > .demo-main {
   flex-basis: 0;
   flex-grow: 999;
+  height: 100%;
+  padding-block: var(--layout-default-padding-v, 2.5rem);
+  padding-inline: var(--layout-default-padding-v, 2rem);
 }
 
 .demo-aside {
@@ -19,7 +22,9 @@
   --_position: relative;
   --_width: 100%;
 
-  padding-right: 2rem;
+  flex-basis: 17rem;
+  flex-grow: 1;
+  overflow: unset;
 }
 
 .demo-aside .link.active,
@@ -38,16 +43,28 @@
   border-bottom: none;
 }
 
+.layout > main:has(.demo) {
+  padding: 0;
+}
+
 @media screen and (min-width: 576px) {
   .demo {
     flex-direction: row;
   }
 
   .demo-aside {
-    --_width: 15rem;
     --_border-color: var(--border-color, #dee2e6);
+    --_position: sticky;
+    --_width: 15rem;
 
-    min-width: var(--_width);
     border-right: 1px solid var(--_border-color);
+    height: 100%;
+    min-width: var(--_width);
+    overflow-y: auto;
+    padding: 1rem 2rem;
+  }
+
+  .demo > .demo-main {
+    overflow-y: auto;
   }
 }
diff --git a/apps/demo/src/assets/css/overrides.css b/apps/demo/src/assets/css/overrides.css
@@ -25,6 +25,7 @@ section:has(h3) {
 .demo .section-content {
   display: grid;
   gap: 1.5em;
+  margin-top: 1em;
 }
 
 .ssh-pre {

diff --git a/apps/demo/src/views/UI/badge/Index.vue b/apps/demo/src/views/UI/badge/Index.vue
@@ -10,6 +10,8 @@
       <h2>{{ $t("ui.badge.usage.basic") }}</h2>
 
       <div class="section-content">
+        <BadgeComponent :label="$t('ui.badge.label.basic')" />
+
         <!-- eslint-disable -->
         <SshPre language="html-vue">
           &lt;template&gt;
@@ -21,15 +23,15 @@
           &lt;/script&gt;
         </SshPre>
         <!-- eslint-enable -->
-
-        <BadgeComponent :label="$t('ui.badge.label.basic')" />
       </div>
     </section>
 
     <section>
       <h2>{{ $t("ui.badge.usage.withI18n") }}</h2>
 
       <div class="section-content">
+        <BadgeComponent :label="$t('ui.badge.label.addedIn')" />
+
         <!-- eslint-disable -->
         <SshPre language="html-vue">
           &lt;template&gt;
@@ -44,15 +46,15 @@
           &lt;/script&gt;
         </SshPre>
         <!-- eslint-enable -->
-
-        <BadgeComponent :label="$t('ui.badge.label.addedIn')" />
       </div>
     </section>
 
     <section>
       <h2>{{ $t("ui.badge.usage.rounded") }}</h2>
 
       <div class="section-content">
+        <BadgeComponent :label="$t('ui.badge.label.rounded')" rounded />
+
         <!-- eslint-disable -->
         <SshPre language="html-vue">
           &lt;template&gt;
@@ -64,32 +66,13 @@
           &lt;/script&gt;
         </SshPre>
         <!-- eslint-enable -->
-
-        <BadgeComponent :label="$t('ui.badge.label.rounded')" rounded />
       </div>
     </section>
 
     <section>
       <h2>{{ $t("ui.badge.usage.severity") }}</h2>
 
       <div class="section-content">
-        <!-- eslint-disable -->
-        <SshPre language="html-vue">
-          &lt;template&gt;
-            &lt;Badge label="Primary" severity="primary" /&gt;
-            &lt;Badge label="Secondary" severity="secondary" /&gt;
-            &lt;Badge label="Alternate" severity="alternate" /&gt;
-            &lt;Badge label="Success" severity="success" /&gt;
-            &lt;Badge label="Danger" severity="danger" /&gt;
-            &lt;Badge label="Warning" severity="warning" /&gt;
-          &lt;/template&gt;
-
-          &lt;script setup lang="ts"&gt;
-            import { Badge } from "@dzangolab/vue3-ui";
-          &lt;/script&gt;
-        </SshPre>
-        <!-- eslint-enable -->
-
         <div class="container">
           <BadgeComponent
             :label="$t('ui.badge.label.primary')"
@@ -116,50 +99,54 @@
             severity="warning"
           />
         </div>
-      </div>
-    </section>
-
-    <section>
-      <h2>{{ $t("ui.badge.usage.icon") }}</h2>
 
-      <div class="section-content">
         <!-- eslint-disable -->
         <SshPre language="html-vue">
           &lt;template&gt;
-            &lt;Badge icon-left="pi pi-thumbs-up" /&gt;
-            &lt;Badge icon-right="pi pi-thumbs-down" /&gt;
+            &lt;Badge label="Primary" severity="primary" /&gt;
+            &lt;Badge label="Secondary" severity="secondary" /&gt;
+            &lt;Badge label="Alternate" severity="alternate" /&gt;
+            &lt;Badge label="Success" severity="success" /&gt;
+            &lt;Badge label="Danger" severity="danger" /&gt;
+            &lt;Badge label="Warning" severity="warning" /&gt;
           &lt;/template&gt;
 
           &lt;script setup lang="ts"&gt;
             import { Badge } from "@dzangolab/vue3-ui";
           &lt;/script&gt;
         </SshPre>
         <!-- eslint-enable -->
-
-        <div class="container">
-          <BadgeComponent icon-left="pi pi-thumbs-up" />
-          <BadgeComponent icon-right="pi pi-thumbs-down" />
-        </div>
       </div>
     </section>
 
     <section>
-      <h2>{{ $t("ui.badge.usage.iconPackage") }}</h2>
+      <h2>{{ $t("ui.badge.usage.icon") }}</h2>
 
       <div class="section-content">
+        <div class="container">
+          <BadgeComponent icon-left="pi pi-thumbs-up" />
+          <BadgeComponent icon-right="pi pi-thumbs-down" />
+        </div>
+
         <!-- eslint-disable -->
         <SshPre language="html-vue">
           &lt;template&gt;
-            &lt;Badge label="Locked" icon-left="pi pi-lock" /&gt;
-            &lt;Badge label="Unlocked" icon-right="fa-solid fa-lock-open" severity="success /&gt;
+            &lt;Badge icon-left="pi pi-thumbs-up" /&gt;
+            &lt;Badge icon-right="pi pi-thumbs-down" /&gt;
           &lt;/template&gt;
 
           &lt;script setup lang="ts"&gt;
             import { Badge } from "@dzangolab/vue3-ui";
           &lt;/script&gt;
         </SshPre>
         <!-- eslint-enable -->
+      </div>
+    </section>
+
+    <section>
+      <h2>{{ $t("ui.badge.usage.iconPackage") }}</h2>
 
+      <div class="section-content">
         <div class="container">
           <BadgeComponent
             :label="$t('ui.badge.label.locked')"
@@ -172,26 +159,26 @@
             severity="success"
           />
         </div>
-      </div>
-    </section>
 
-    <section>
-      <h2>{{ $t("ui.badge.usage.iconAndLabel") }}</h2>
-
-      <div class="section-content">
         <!-- eslint-disable -->
         <SshPre language="html-vue">
           &lt;template&gt;
             &lt;Badge label="Locked" icon-left="pi pi-lock" /&gt;
-            &lt;Badge label="Unlocked" icon-right="pi pi-lock-open" severity="success /&gt;
+            &lt;Badge label="Unlocked" icon-right="fa-solid fa-lock-open" severity="success /&gt;
           &lt;/template&gt;
 
           &lt;script setup lang="ts"&gt;
             import { Badge } from "@dzangolab/vue3-ui";
           &lt;/script&gt;
         </SshPre>
         <!-- eslint-enable -->
+      </div>
+    </section>
 
+    <section>
+      <h2>{{ $t("ui.badge.usage.iconAndLabel") }}</h2>
+
+      <div class="section-content">
         <div class="container">
           <BadgeComponent
             :label="$t('ui.badge.label.locked')"
@@ -204,13 +191,40 @@
             severity="success"
           />
         </div>
+
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;Badge label="Locked" icon-left="pi pi-lock" /&gt;
+            &lt;Badge label="Unlocked" icon-right="pi pi-lock-open" severity="success /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+            import { Badge } from "@dzangolab/vue3-ui";
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
       </div>
     </section>
 
     <section>
       <h2>{{ $t("ui.badge.usage.iconElement") }}</h2>
 
       <div class="section-content">
+        <div class="container">
+          <BadgeComponent :label="$t('ui.badge.label.correct')">
+            <template #iconLeft>
+              <i class="pi pi-check" />
+            </template>
+          </BadgeComponent>
+
+          <BadgeComponent :label="$t('ui.badge.label.wrong')" severity="danger">
+            <template #iconRight>
+              <i class="pi pi-times" />
+            </template>
+          </BadgeComponent>
+        </div>
+
         <!-- eslint-disable -->
         <SshPre language="html-vue">
           &lt;template&gt;
@@ -232,20 +246,6 @@
           &lt;/script&gt;
         </SshPre>
         <!-- eslint-enable -->
-
-        <div class="container">
-          <BadgeComponent :label="$t('ui.badge.label.correct')">
-            <template #iconLeft>
-              <i class="pi pi-check" />
-            </template>
-          </BadgeComponent>
-
-          <BadgeComponent :label="$t('ui.badge.label.wrong')" severity="danger">
-            <template #iconRight>
-              <i class="pi pi-times" />
-            </template>
-          </BadgeComponent>
-        </div>
       </div>
     </section>
   </UiPage>