feat(Progress): new component (#75)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

playground/app.vue

@@ -36,6 +36,7 @@ const components = [
   'navigation-menu',
   'pagination',
   'popover',
+  'progress',
   'radio-group',
   'select',
   'select-menu',

playground/pages/progress.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import theme from '#build/ui/progress'
+
+const sizes = Object.keys(theme.variants.size)
+
+const value1 = ref(0)
+const value2 = ref(0)
+const max = ['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']
+
+onMounted(() => {
+  setInterval(() => {
+    if (value1.value === 100) {
+      value1.value = 0
+      return
+    }
+
+    value1.value += 25
+  }, 1000)
+
+  setInterval(() => {
+    if (value2.value === 4) {
+      value2.value = 0
+      return
+    }
+
+    value2.value += 1
+  }, 1000)
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-8 items-center">
+    <div class="flex flex-col gap-4 w-48">
+      <UProgress />
+      <UProgress color="green" />
+      <UProgress animation="carousel-inverse" />
+      <UProgress animation="swing" />
+      <UProgress animation="elastic" />
+      <UProgress v-model="value2" :max="max" status />
+      <UProgress v-model="value2" :max="max" status inverted />
+    </div>
+
+    <div class="flex items-center gap-4">
+      <UProgress v-for="size in sizes" :key="size" v-model="value1" :size="(size as any)" class="w-48" />
+    </div>
+
+    <div class="h-48 flex items-center gap-8">
+      <UProgress orientation="vertical" />
+      <UProgress orientation="vertical" animation="carousel-inverse" />
+      <UProgress orientation="vertical" animation="swing" />
+      <UProgress orientation="vertical" animation="elastic" />
+      <UProgress v-model="value2" orientation="vertical" :max="max" status class="w-48 justify-start" />
+      <UProgress
+        v-model="value2"
+        orientation="vertical"
+        :max="max"
+        status
+        inverted
+        class="w-48 justify-start"
+      />
+    </div>
+
+    <div class="h-48 flex items-center gap-8">
+      <UProgress v-for="size in sizes" :key="size" v-model="value1" orientation="vertical" :size="(size as any)" />
+    </div>
+  </div>
+</template>