feat(ALoader): new component (jd-solanki#119)

Co-authored-by: JD Solanki <jdsolanki0001@gmail.com>
therealokoro · Jan 25, 2023 · d0fb060 · d0fb060
1 parent a11c4bc
commit d0fb060
Show file tree

Hide file tree

Showing 34 changed files with 4,028 additions and 1,316 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -11,6 +11,7 @@
         "exodiusstudios.comment-anchors",
         "davidanson.vscode-markdownlint",
         "yzhang.markdown-all-in-one",
-        "streetsidesoftware.code-spell-checker"
+        "streetsidesoftware.code-spell-checker",
+        "matijao.vue-nuxt-snippets"
     ]
 }
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -66,6 +66,7 @@ export default defineConfig({
             { text: 'Drawer', link: '/guide/components/drawer' },
             { text: 'Input', link: '/guide/components/input' },
             { text: 'List', link: '/guide/components/list' },
+            { text: 'Loader', link: '/guide/components/loader' },
             { text: 'Menu', link: '/guide/components/menu' },
             { text: 'Radio', link: '/guide/components/radio' },
             { text: 'Rating', link: '/guide/components/rating' },

diff --git a/docs/components/demos/button/DemoButtonFilled.vue b/docs/components/demos/button/DemoButtonFilled.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-wrap gap-4">
-    <ABtn>Primary</ABtn>
+    <ABtn>
+      Primary
+    </ABtn>
 
     <ABtn color="success">
       Success

diff --git a/docs/components/demos/button/DemoButtonLoading.vue b/docs/components/demos/button/DemoButtonLoading.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const loading = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-6">
+    <ABtn
+      :loading="loading"
+      color="danger"
+      @click="loading = !loading"
+    >
+      Click to load
+    </ABtn>
+    <ABtn
+      :loading="loading"
+      variant="outline"
+      @click="loading = !loading"
+    >
+      Click to load
+    </ABtn>
+    <ABtn
+      :loading="loading"
+      color="success"
+      variant="light"
+      @click="loading = !loading"
+    >
+      Click to load
+    </ABtn>
+    <ABtn
+      :loading="loading"
+      class="flex-1"
+      @click="loading = !loading"
+    >
+      Click to load
+    </ABtn>
+    <ABtn
+      :loading="loading"
+      icon="i-bx-wink-smile"
+      @click="loading = !loading"
+    >
+      Loading icon button
+    </ABtn>
+
+    <ABtn
+      :loading="loading"
+      color="info"
+      variant="light"
+      class="text-2xl"
+      icon-only
+      icon="i-bx-dollar-circle"
+      @click="loading = !loading"
+    />
+  </div>
+</template>
diff --git a/docs/components/demos/loader/DemoLoaderBasic.vue b/docs/components/demos/loader/DemoLoaderBasic.vue
@@ -0,0 +1,6 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <ALoader />
+    <p>You can also use the component <ALoader /> inline.</p>
+  </div>
+</template>
diff --git a/docs/components/demos/loader/DemoLoaderColors.vue b/docs/components/demos/loader/DemoLoaderColors.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="flex  justify-between text-4xl">
+    <ALoader color="primary" />
+    <ALoader color="success" />
+    <ALoader color="info" />
+    <ALoader color="warning" />
+    <ALoader color="danger" />
+
+    <p class="text-orange-500 flex gap-2">
+      Orange text <ALoader />
+    </p>
+  </div>
+</template>
diff --git a/docs/components/demos/loader/DemoLoaderComponents.vue b/docs/components/demos/loader/DemoLoaderComponents.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { useTimeout } from '@vueuse/core'
+import { ref } from 'vue'
+
+const { ready, start, stop } = useTimeout(1000, { controls: true })
+
+const isDialogShown = ref(false)
+const isDrawerShown = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-6">
+    <!-- Alert -->
+    <AAlert
+      color="info"
+      variant="fill"
+      class="relative"
+      @click="ready && start()"
+    >
+      AAlert component. Click to start loading...
+      <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>
+
+    <!-- Dialog -->
+    <ADialog
+      v-model="isDialogShown"
+      title="Dialog 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."
+    >
+      <ALoader
+        :loading="!ready"
+        overlay
+        class="text-6xl bg-white"
+      />
+    </ADialog>
+
+    <ABtn @click="isDialogShown = true; start()">
+      Show dialog
+    </ABtn>
+
+    <!-- Drawer -->
+    <ADrawer
+      v-model="isDrawerShown"
+      title="Drawer title"
+      subtitle="Chocolate cake tiramisu donut"
+    >
+      <ALoader
+        :loading="!ready"
+        overlay
+        class="text-6xl bg-white"
+      />
+    </ADrawer>
+
+    <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/DemoLoaderCustomization.vue b/docs/components/demos/loader/DemoLoaderCustomization.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="flex gap-8 text-3xl">
+    <ALoader class="[--a-ring-stroke:10] [--a-arc-stroke:10]" />
+
+    <ALoader
+      color="primary"
+      class="[--a-ring-color:hsla(var(--a-base-color),0.1)] [--a-ring-opacity:1] [--a-spin-duration:1.5s]"
+    />
+
+    <ALoader class="[--a-ring-stroke:0] [&_.a-spinner-arc]-stroke-cap-round rotate-y-180" />
+
+    <ALoader class="[--a-ring-stroke:180] [--a-arc-stroke:10] [--a-ring-opacity:.5] [--a-arc-color:white] dark:[--a-arc-color:black] animate-pulse-alt" />
+
+    <ALoader
+      color="success"
+      class="[--a-ring-stroke:0] hover:[--a-spin-duration:4s] stroke-cap-round animate-circular-dash"
+    />
+
+    <ALoader
+      color="primary"
+      class="[--a-ring-stroke:200] [--a-arc-stroke:200] animate-circular-dash"
+    />
+  </div>
+</template>
diff --git a/docs/components/demos/loader/DemoLoaderFullPage.vue b/docs/components/demos/loader/DemoLoaderFullPage.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const loading = ref(false)
+</script>
+
+<template>
+  <ABtn @click="loading = !loading">
+    Loading in full page mode
+  </ABtn>
+
+  <ALoader
+    :loading="loading"
+    full-page
+    title="Full page loading"
+    subtitle="Click anywhere to stop loading"
+    class="text-4xl bg-white dark:bg-dark"
+    @click="loading = false"
+  />
+</template>