feat: add steps component

README.md

@@ -155,7 +155,7 @@ Read the documents for more info
 - [x] Pagination
 - [x] Progress
 - [x] Stat
-- [ ] Steps
+- [x] Steps
 - [ ] Tag
 - [x] Table
 - [x] Tabs
@@ -197,7 +197,7 @@ Read the documents for more info
 [jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
 [build-url]: https://github.com/saadeghi/daisyui/actions
 [tweet-url]: https://twitter.com/intent/tweet?text=DaisyUI%20%0D%0AUI%20Components%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
-[number-of-components]: https://badgen.net/badge/components%20added/34/purple
+[number-of-components]: https://badgen.net/badge/components%20added/35/purple
 
 [docs-url-install]: https://daisyui.com/docs/install
 [docs-url]: https://daisyui.com/

src/components/base/steps.css

@@ -0,0 +1,9 @@
+.steps {
+  counter-reset: step;
+  grid-auto-columns: 1fr;
+  @apply inline-grid grid-flow-col overflow-hidden overflow-x-auto;
+
+  .step {
+    @apply grid grid-cols-1 grid-rows-2 place-items-center text-center;
+  }
+}

src/components/styled/steps.css

@@ -0,0 +1,63 @@
+.steps {
+  .step {
+    grid-template-rows: 40px 1fr;
+    min-width: 4rem;
+    &:before {
+      @apply bg-base-300 text-base-content h-2 w-full top-0 col-start-1 row-start-1;
+      content: '';
+      margin-left: -100%;
+    }
+    &:after {
+      content: counter(step);
+      counter-increment: step;
+      z-index: 1;
+      @apply relative rounded-full w-8 h-8 bg-base-300 text-base-content block col-start-1 row-start-1 place-self-center grid place-items-center;
+    }
+    &:first-child:before{
+      content: none;
+    }
+    &[data-content]:after{
+      content: attr(data-content);
+    }
+  }
+  .step-neutral + .step-neutral:before,
+  .step-neutral:after{
+    @apply bg-neutral text-neutral-content;
+  }
+  .step-primary + .step-primary:before,
+  .step-primary:after{
+    @apply bg-primary text-primary-content;
+  }
+  .step-secondary + .step-secondary:before,
+  .step-secondary:after{
+    @apply bg-secondary text-secondary-content;
+  }
+  .step-accent + .step-accent:before,
+  .step-accent:after{
+    @apply bg-accent text-accent-content;
+  }
+  .step-info + .step-info:before{
+    @apply bg-info;
+  }
+  .step-info:after{
+    @apply bg-info text-base-100;
+  }
+  .step-success + .step-success:before{
+    @apply bg-success;
+  }
+  .step-success:after{
+    @apply bg-success text-base-100;
+  }
+  .step-warning + .step-warning:before{
+    @apply bg-warning;
+  }
+  .step-warning:after{
+    @apply bg-warning text-base-100;
+  }
+  .step-error + .step-error:before{
+    @apply bg-error;
+  }
+  .step-error:after{
+    @apply bg-error text-base-100;
+  }
+}

src/docs/pages/components/steps.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+
+
+
+    <Wrapper title="steps">
+        <ul class="steps w-full">
+          <li class="step step-primary">Register</li>
+          <li class="step step-primary">Choose plan</li>
+          <li class="step">Purchase</li>
+          <li class="step">Receive Product</li>
+        </ul>
+    </Wrapper>
+
+
+    <Wrapper title="steps">
+        <ul class="steps w-full">
+          <li class="step step-info">Fly to moon</li>
+          <li class="step step-info">Shrink the moon</li>
+          <li class="step step-info">Grab the moon</li>
+          <li class="step step-error" data-content="?">Sit on toilet</li>
+        </ul>
+    </Wrapper>
+
+
+
+    <Wrapper title="with data-content">
+        <ul class="steps w-full">
+          <li class="step step-neutral" data-content="?">Step 1</li>
+          <li class="step step-neutral" data-content="!">Step 2</li>
+          <li class="step step-neutral" data-content="✓">Step 3</li>
+          <li class="step step-neutral" data-content="✕">Step 4</li>
+          <li class="step step-neutral" data-content="★">Step 5</li>
+          <li class="step step-neutral" data-content="">Step 6</li>
+          <li class="step step-neutral" data-content="●">Step 7</li>
+        </ul>
+    </Wrapper>
+
+
+
+
+    <Wrapper title="steps with scrollable container">
+      <div class="overflow-x-auto">
+        <ul class="steps w-full">
+          <li class="step">start</li>
+          <li class="step step-secondary">2</li>
+          <li class="step step-secondary">3</li>
+          <li class="step step-secondary">4</li>
+          <li class="step">5</li>
+          <li class="step step-accent">6</li>
+          <li class="step step-accent">7</li>
+          <li class="step">8</li>
+          <li class="step step-error">9</li>
+          <li class="step step-error">10</li>
+          <li class="step">11</li>
+          <li class="step">12</li>
+          <li class="step step-warning">13</li>
+          <li class="step step-warning">14</li>
+          <li class="step">15</li>
+          <li class="step step-neutral">16</li>
+          <li class="step step-neutral">17</li>
+          <li class="step step-neutral">18</li>
+          <li class="step step-neutral">19</li>
+          <li class="step step-neutral">20</li>
+          <li class="step step-neutral">21</li>
+          <li class="step step-neutral">22</li>
+          <li class="step step-neutral">23</li>
+          <li class="step step-neutral">end</li>
+        </ul>
+      </div>
+    </Wrapper>
+
+
+
+  </div>
+</template>