feat(loader): simplified loading in components

therealokoro · Feb 6, 2023 · 908f038 · 908f038
1 parent 024f90e
commit 908f038
Show file tree

Hide file tree

Showing 33 changed files with 6,926 additions and 10,363 deletions.
diff --git a/docs/components/Playground.vue b/docs/components/Playground.vue
@@ -1,6 +1,156 @@
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+
+const loading = ref(true)
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 5000)
+})
 </script>
 
 <template>
-  <ABtn>Button</ABtn>
+  <div class="flex flex-wrap gap-6">
+    <!-- Alert -->
+    <AAlert
+      color="info"
+      class="relative"
+    >
+      Fruitcake I love liquorice apple pie croissant.
+      <ALoader
+        :loading="loading"
+        class="text-2xl"
+      />
+    </AAlert>
+    <AAlert
+      color="info"
+      variant="fill"
+      class="relative"
+    >
+      Fruitcake I love liquorice apple pie croissant.
+      <ALoader
+        :loading="loading"
+
+        class="text-2xl"
+      />
+    </AAlert>
+    <AAlert
+      color="info"
+      variant="outline"
+      class="relative"
+    >
+      Fruitcake I love liquorice apple pie croissant.
+      <ALoader
+        :loading="loading"
+
+        class="text-2xl bg-white dark:bg-dark"
+      />
+    </AAlert>
+    <AAlert
+      color="info"
+      variant="text"
+      class="relative"
+    >
+      Fruitcake I love liquorice apple pie croissant.
+      <ALoader
+        :loading="loading"
+
+        class="text-2xl bg-light dark:bg-dark"
+      />
+    </AAlert>
+
+    <!-- Card -->
+    <ACard
+      variant="fill"
+      color="danger"
+      title="Card title"
+      subtitle="Chocolate cake tiramisu donut"
+    >
+      <div class="a-card-body a-card-spacer">
+        <p class="text-sm">
+          <ALoader
+            :loading="loading"
+
+            class="text-3xl"
+            title="It's loading..."
+            subtitle="Click to stop loading."
+          />
+          Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate
+          bar.
+        </p>
+      </div>
+    </ACard>
+
+    <ACard
+      variant="light"
+      color="danger"
+    >
+      <ALoader
+        :loading="loading"
+
+        class="text-3xl"
+        title="It's loading..."
+        subtitle="Click to stop loading."
+      />
+      <div class="a-card-body a-card-spacer">
+        <ATypography
+          title="Card title"
+          subtitle="Chocolate cake tiramisu donut"
+        />
+        <p class="text-sm">
+          Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate
+          bar.
+        </p>
+      </div>
+    </ACard>
+
+    <div class="flex gap-x-2">
+      <AChip
+        variant="fill"
+        class="relative"
+      >
+        Primary
+        <ALoader
+          :loading="loading"
+        />
+      </AChip>
+      <AChip class="relative">
+        Primary
+        <ALoader
+          :loading="loading"
+        />
+      </AChip>
+      <AChip
+        variant="outline"
+        class="relative"
+      >
+        Primary
+        <ALoader
+          :loading="loading"
+
+          class="bg-white dark:bg-dark"
+        />
+      </AChip>
+      <AChip
+        variant="text"
+        class="relative"
+      >
+        Primary
+        <ALoader
+          :loading="loading"
+          class="bg-light dark:bg-dark"
+        />
+      </AChip>
+    </div>
+
+    <div class="w-full flex gap-6">
+      <ABtn
+        :loading="loading"
+        variant="fill"
+      >
+        Button
+      </ABtn>
+    </div>
+  </div>
 </template>
diff --git a/docs/components/demos/loader/DemoLoaderBasic.vue b/docs/components/demos/loader/DemoLoaderBasic.vue
diff --git a/docs/components/demos/loader/DemoLoaderComponents.vue b/docs/components/demos/loader/DemoLoaderComponents.vue
@@ -10,44 +10,42 @@ const isDrawerShown = ref(false)
 
 <template>
   <div class="flex flex-wrap gap-6">
+    <ABtn
+      :loading="!ready"
+      @click="ready && start()"
+    >
+      Button
+    </ABtn>
+
+    <ABtn
+      :loading="!ready"
+      icon-only
+      icon="i-bx-cloud-upload"
+      @click="ready && start()"
+    />
+
     <!-- Alert -->
     <AAlert
-      color="info"
       variant="fill"
       class="relative"
       @click="ready && start()"
     >
-      AAlert component. Click to start loading...
+      Fruitcake I love liquorice apple pie croissant.
       <ALoader
         :loading="!ready"
-        overlay
-        class="text-2xl"
       />
     </AAlert>
 
     <!-- Card -->
-    <ACard
-      variant="fill"
-      color="danger"
-      title="Card title"
-      subtitle="Chocolate cake tiramisu donut"
-      @click="ready && start()"
-    >
-      <div class="a-card-body a-card-spacer">
-        <p class="text-sm">
-          <ALoader
-            :loading="!ready"
-            overlay
-            class="text-3xl"
-            title="It's loading..."
-            subtitle="Click to stop loading."
-            @click.stop="stop()"
-          />
-          Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate
-          bar.
-        </p>
-      </div>
-    </ACard>
+    <div class="cards-demo-container">
+      <ACard
+        title="Card title"
+        subtitle="Chocolate cake tiramisu donut"
+        text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
+        :loading="!ready"
+        @click="ready && start()"
+      />
+    </div>
 
     <!-- Dialog -->
     <ADialog
@@ -83,44 +81,5 @@ const isDrawerShown = ref(false)
     <ABtn @click="isDrawerShown = true; start()">
       Show drawer
     </ABtn>
-
-    <div class="flex gap-6">
-      <!-- Badge -->
-      <ABadge :content="9">
-        <ABtn
-          :loading="!ready"
-          @click="ready && start()"
-        >
-          Button
-        </ABtn>
-      </ABadge>
-
-      <!-- Button -->
-      <ABtn
-        :loading="!ready"
-        icon="i-bx-wink-smile"
-        @click="ready && start()"
-      >
-        Loading icon
-      </ABtn>
-
-      <ABtn
-        color="success"
-        variant="light"
-        class="text-2xl"
-        :loading="!ready"
-        icon-only
-        icon="i-bx-dollar-circle"
-        @click="ready && start()"
-      />
-
-      <!-- Input -->
-      <AInput
-        :loading="!ready"
-        placeholder="Type to load"
-        append-inner-icon="i-bx-check-double"
-        @keypress="ready && start()"
-      />
-    </div>
   </div>
 </template>
diff --git a/docs/components/demos/loader/DemoLoaderFullPage.vue b/docs/components/demos/loader/DemoLoaderFullPage.vue
@@ -14,7 +14,7 @@ const loading = ref(false)
     full-page
     title="Full page loading"
     subtitle="Click anywhere to stop loading"
-    class="text-4xl bg-white dark:bg-dark"
+    class="text-4xl"
     @click="loading = false"
   />
 </template>
diff --git a/docs/components/demos/loader/DemoLoaderOverlay.vue b/docs/components/demos/loader/DemoLoaderOverlay.vue
@@ -18,7 +18,6 @@ const loading = ref(true)
       Fruitcake I love liquorice apple pie croissant.
       <ALoader
         :loading="loading"
-        overlay
         class="text-2xl"
       />
     </AAlert>
@@ -30,7 +29,7 @@ const loading = ref(true)
       Fruitcake I love liquorice apple pie croissant.
       <ALoader
         :loading="loading"
-        overlay
+
         class="text-2xl"
       />
     </AAlert>
@@ -42,8 +41,8 @@ const loading = ref(true)
       Fruitcake I love liquorice apple pie croissant.
       <ALoader
         :loading="loading"
-        overlay
-        class="text-2xl bg-white dark:bg-dark"
+
+        class="text-2xl "
       />
     </AAlert>
     <AAlert
@@ -54,8 +53,8 @@ const loading = ref(true)
       Fruitcake I love liquorice apple pie croissant.
       <ALoader
         :loading="loading"
-        overlay
-        class="text-2xl bg-light dark:bg-dark"
+
+        class="text-2xl "
       />
     </AAlert>
 
@@ -70,7 +69,7 @@ const loading = ref(true)
         <p class="text-sm">
           <ALoader
             :loading="loading"
-            overlay
+
             class="text-3xl"
             title="It's loading..."
             subtitle="Click to stop loading."
@@ -87,7 +86,7 @@ const loading = ref(true)
     >
       <ALoader
         :loading="loading"
-        overlay
+
         class="text-3xl"
         title="It's loading..."
         subtitle="Click to stop loading."
@@ -112,14 +111,12 @@ const loading = ref(true)
         Primary
         <ALoader
           :loading="loading"
-          overlay
         />
       </AChip>
       <AChip class="relative">
         Primary
         <ALoader
           :loading="loading"
-          overlay
         />
       </AChip>
       <AChip
@@ -129,8 +126,8 @@ const loading = ref(true)
         Primary
         <ALoader
           :loading="loading"
-          overlay
-          class="bg-white dark:bg-dark"
+
+          class=""
         />
       </AChip>
       <AChip
@@ -140,8 +137,7 @@ const loading = ref(true)
         Primary
         <ALoader
           :loading="loading"
-          overlay
-          class="bg-light dark:bg-dark"
+          class=""
         />
       </AChip>
     </div>

diff --git a/docs/components/demos/loader/DemoLoaderSlot.vue b/docs/components/demos/loader/DemoLoaderSlot.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="cards-demo-container">
-    <ACard class="flex text-center justify-center p-6">
+    <ACard
+      title="Card title"
+      subtitle="Chocolate cake tiramisu donut"
+      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
+      style="--a-loader-overlay-bg-opacity: 1"
+    >
       <ALoader
         title="Heartbeat"
         subtitle="Made with love with Anu"