feat(Progress): new component

nuxt · Oct 18, 2023 · 4deca56 · 4deca56
1 parent 0c36996
commit 4deca56
Show file tree

Hide file tree

Showing 8 changed files with 681 additions and 0 deletions.
diff --git a/docs/components/content/examples/ProgressExampleAnimation.vue b/docs/components/content/examples/ProgressExampleAnimation.vue
@@ -0,0 +1,34 @@
+<template>
+  <UProgress class="progress">
+    <template #indicator>
+      <div class="text-right text-amber-500">
+        🔥 This is too hot!
+      </div>
+    </template>
+  </UProgress>
+</template>
+
+<style scoped>
+.progress:deep(progress:indeterminate.animation-default) {
+  &:after {
+    @apply w-full text-red-500;
+    animation: my-glow-animation 3s ease-in-out infinite;
+  }
+
+  &::-webkit-progress-value {
+    @apply w-full text-red-500;
+    animation: my-glow-animation 3s ease-in-out infinite;
+  }
+
+  &::-moz-progress-bar {
+    @apply w-full text-red-500;
+    animation: my-glow-animation 3s ease-in-out infinite;
+  }
+}
+
+@keyframes my-glow-animation {
+  50% {
+    @apply text-amber-400;
+  }
+}
+</style>
diff --git a/docs/components/content/examples/ProgressExampleSlotIndicator.vue b/docs/components/content/examples/ProgressExampleSlotIndicator.vue
@@ -0,0 +1,32 @@
+<script setup>
+const temp = ref(35)
+
+const color = computed(() => {
+  if (temp.value < 10) {
+    return 'blue'
+  }
+
+  if (temp.value < 20) {
+    return 'amber'
+  }
+
+  if (temp.value < 30) {
+    return 'orange'
+  }
+
+  return 'red'
+})
+</script>
+
+<template>
+  <UProgress :value="temp" :max="40" :color="color">
+    <template #indicator="{ percent }">
+      <div class="text-right" :style="{ width: `${percent}%` }">
+        <span v-if="temp < 10" class="text-blue-500">Too cold!</span>
+        <span v-if="temp < 20" class="text-amber-500">Warm</span>
+        <span v-if="temp < 30" class="text-orange-500">Hot</span>
+        <span v-else class="text-red-500 font-bold">🔥 Too hot!</span>
+      </div>
+    </template>
+  </UProgress>
+</template>
diff --git a/docs/components/content/examples/ProgressExampleSlotStep.vue b/docs/components/content/examples/ProgressExampleSlotStep.vue
@@ -0,0 +1,31 @@
+<script setup>
+const task = ref(1)
+
+const steps = [
+  'Cloning...',
+  'Migrating...',
+  'Deploying...'
+]
+</script>
+
+<template>
+  <UProgress :value="task" :max="steps" indicator>
+    <template #0-step="{ step }">
+      <span class="text-lime-500">
+        <UIcon name="i-heroicons-circle-arrow-down-on-square-stack" /> {{ step }}
+      </span>
+    </template>
+
+    <template #1-step="{ step }">
+      <span class="text-amber-500">
+        <UIcon name="i-heroicons-circle-stack" /> {{ step }}
+      </span>
+    </template>
+
+    <template #2-step="{ step }">
+      <span class="text-blue-500">
+        <UIcon name="i-heroicons-circle-hand-thumb-up" /> {{ step }}
+      </span>
+    </template>
+  </UProgress>
+</template>
diff --git a/docs/content/2.elements/10.progress.md b/docs/content/2.elements/10.progress.md
@@ -0,0 +1,218 @@
+---
+title: 'Progress'
+description: Show a horizontal bar to indicate task progression.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Progress.vue
+---
+
+## Usage
+
+Pass an integer as the `value` from `0` to `100` to the Progress bar component.
+
+::component-card
+---
+props:
+  value: 70
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+Check out the [Range](/forms/range) component for forms.
+::
+
+### Max
+
+You may also set the `max` number to set the maximum progress value, which will be relative to 100% percent.
+
+::component-card
+---
+props:
+  value: 2
+  max: 5
+options:
+  - name: max
+    restriction: only
+    values:
+      - 3
+      - 4
+      - 5
+      - 6
+      - 7
+---
+::
+
+### Steps
+
+You can set an array of named steps in the `max` prop to show the active step, at the same time it sets the maximum value.
+
+The first step is always shown at `0%`, making the last `100%`.
+
+::component-card
+---
+props:
+  value: 0
+  max: 
+    - Waiting to start
+    - Cloning...
+    - Migrating...
+    - Deployed!
+excludedProps:
+  - max
+---
+::
+
+### Progress indicator
+
+You can add a numeric indicator, which will show the percent on top the progress track.
+
+::component-card
+---
+props:
+  value: 20
+  indicator: true
+---
+::
+
+### Indeterminate
+
+By not setting a `value`, or setting it as `null`, the progress bar becomes _indeterminate_. The bar will be animated as a carousel, but you can change it for a swinging bar or an elastic bar using the `animation` prop.
+
+::component-card
+---
+baseProps:
+  value: null
+props:
+  animation: 'carousel'
+options:
+  - name: animation
+    restriction: only
+    values:
+      - 'carousel'
+      - 'swing'
+      - 'elastic'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the progress bar.
+
+::component-card
+---
+baseProps:
+  value: 70
+props:
+  size: 'sm'
+  indicator: false
+excludedProps:
+  - value
+---
+::
+
+### Style
+
+Use the `color` prop to change the visual style of the Progress bar. The `color` can be any color from the `ui.colors` object.
+
+::component-card
+---
+baseProps:
+  value: 70
+props:
+  color: 'primary'
+  indicator: false
+excludedProps:
+  - modelValue
+---
+::
+
+## Slots
+
+### `indicator`
+
+You can use the `#indicator` slot to show a custom indicator above the progress bar. It receives the current `percent` of progress.
+
+::component-example
+#default
+:progress-example-slot-indicator
+
+#code
+```vue
+<script setup>
+const temp = ref(35)
+
+const color = computed(() => {
+  switch (true) {
+    case temp.value < 10: return 'blue'
+    case temp.value < 20: return 'amber'
+    case temp.value < 30: return 'orange'
+    default: return 'red'
+  }
+})
+</script>
+
+<template>
+  <UProgress :value="temp" :max="40" :color="color">
+    <template #indicator="{ percent }">
+      <div class="text-right" :style="{ width: `${percent}%` }">
+        <span v-if="percent < 10" class="text-blue-500">Too cold!</span>
+        <span v-else-if="percent < 20" class="text-amber-500">Warm</span>
+        <span v-else-if="percent < 30" class="text-orange-500">Hot</span>
+        <span v-else class="text-red-500 font-bold">🔥 Too hot!</span>
+      </div>
+    </template>
+  </UProgress>
+</template>
+```
+::
+
+### `<index>-step`
+
+Use the `#<index>-step` to alter the HTML being shown for each step.
+
+::component-example
+#default
+:progress-example-slot-step
+
+#code
+```vue
+<script setup>
+const task = ref(1)
+
+const steps = [
+  'Cloning...',
+  'Migrating...',
+  'Deploying...'
+]
+</script>
+
+<template>
+  <UProgress :value="task" :max="steps" indicator>
+    <template #0-step="{ step }">
+      ...
+    </template>
+
+    <template #1-step="{ step }">
+      <span class="text-amber-500">
+        <UIcon name="i-heroicons-circle-stack"/> {{ step }}
+      </span>
+    </template>
+
+    <template #2-step="{ step }">
+      ...
+    </template>
+  </UProgress>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset
+
+