Skip to content

Commit d57ee4b

Browse files
cab-mikeecab-mikee
committed
chore: stepper component changes and icons changes
1 parent b2f7724 commit d57ee4b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+1919
-537
lines changed

‎docs/guide/components/stepper.md

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
# Stepper
2+
3+
A modern, accessible stepper component for Vue applications.
4+
5+
<StepperDemo />
6+
7+
## Features
8+
9+
- 🎯 Fully accessible (WAI-ARIA compliant)
10+
- 🌐 Horizontal and vertical orientation support
11+
- 🎨 Modern UI with smooth transitions
12+
- 🔄 Dynamic step management
13+
- 📱 Mobile-friendly
14+
- 🎯 TypeScript support
15+
- ✨ Loading states
16+
- 🎨 Beautiful transitions and animations
17+
- 📝 Form integration ready
18+
- 🎯 Progress tracking
19+
- 🔍 Step validation support
20+
- 🎨 Customizable icons and styling
21+
22+
<br>
23+
24+
## Install
25+
26+
::: code-group
27+
28+
```sh [npm]
29+
npm install @stacksjs/stepper
30+
```
31+
32+
```sh [bun]
33+
bun install @stacksjs/stepper
34+
```
35+
36+
```sh [pnpm]
37+
pnpm add @stacksjs/stepper
38+
```
39+
40+
```sh [yarn]
41+
yarn add @stacksjs/stepper
42+
```
43+
44+
:::
45+
<br>
46+
47+
## Basic Usage
48+
49+
Here's a basic example of how to use the stepper component:
50+
51+
```vue
52+
<script setup>
53+
import { ref } from 'vue'
54+
import { Stepper } from '@stacksjs/stepper'
55+
56+
const currentStep = ref(0)
57+
const steps = [
58+
{
59+
title: 'Step 1',
60+
description: 'First step'
61+
},
62+
{
63+
title: 'Step 2',
64+
description: 'Second step'
65+
},
66+
{
67+
title: 'Step 3',
68+
description: 'Third step'
69+
}
70+
]
71+
</script>
72+
73+
<template>
74+
<div class="p-8">
75+
<Stepper
76+
v-model="currentStep"
77+
:steps="steps"
78+
orientation="horizontal"
79+
/>
80+
</div>
81+
</template>
82+
```
83+
84+
## Advanced Usage
85+
86+
Here's a more complete example with form integration and navigation:
87+
88+
```vue
89+
<script setup>
90+
import { ref, computed } from 'vue'
91+
import { Stepper } from '@stacksjs/stepper'
92+
93+
const currentStep = ref(0)
94+
const stepperRef = ref()
95+
96+
const steps = [
97+
{
98+
title: 'Step 1',
99+
description: 'First step',
100+
icon: 'i-heroicons-check'
101+
},
102+
{
103+
title: 'Step 2',
104+
description: 'Second step',
105+
icon: 'i-heroicons-check'
106+
},
107+
{
108+
title: 'Step 3',
109+
description: 'Third step',
110+
icon: 'i-heroicons-check'
111+
}
112+
]
113+
114+
// Navigation functions
115+
const next = () => {
116+
if (currentStep.value < steps.length - 1) {
117+
currentStep.value++
118+
}
119+
}
120+
121+
const previous = () => {
122+
if (currentStep.value > 0) {
123+
currentStep.value--
124+
}
125+
}
126+
127+
const reset = () => {
128+
currentStep.value = 0
129+
}
130+
131+
// Dynamic content based on current step
132+
const currentContent = computed(() => {
133+
switch (currentStep.value) {
134+
case 0:
135+
return {
136+
title: 'Personal Information',
137+
description: 'Please provide your basic details'
138+
}
139+
case 1:
140+
return {
141+
title: 'Account Setup',
142+
description: 'Configure your account settings'
143+
}
144+
case 2:
145+
return {
146+
title: 'Final Review',
147+
description: 'Review your information before submitting'
148+
}
149+
default:
150+
return {
151+
title: '',
152+
description: ''
153+
}
154+
}
155+
})
156+
</script>
157+
158+
<template>
159+
<div class="p-8 max-w-3xl mx-auto">
160+
<!-- Stepper Component -->
161+
<Stepper
162+
ref="stepperRef"
163+
v-model="currentStep"
164+
:steps="steps"
165+
orientation="horizontal"
166+
class="mb-12"
167+
/>
168+
169+
<!-- Dynamic Content Section -->
170+
<div class="mb-8 rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
171+
<h2 class="text-xl font-semibold text-gray-900 mb-2">
172+
{{ currentContent.title }}
173+
</h2>
174+
<p class="text-gray-600 mb-6">
175+
{{ currentContent.description }}
176+
</p>
177+
178+
<!-- Step Content Here -->
179+
</div>
180+
181+
<!-- Navigation Buttons -->
182+
<div class="flex justify-center gap-4">
183+
<button
184+
class="rounded-md bg-gray-50 px-4 py-2 text-sm font-medium"
185+
:disabled="currentStep === 0"
186+
@click="previous"
187+
>
188+
Previous
189+
</button>
190+
<button
191+
class="rounded-md bg-blue-500 px-4 py-2 text-sm font-medium text-white"
192+
:disabled="currentStep === steps.length - 1"
193+
@click="next"
194+
>
195+
Next
196+
</button>
197+
<button
198+
class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium"
199+
@click="reset"
200+
>
201+
Reset
202+
</button>
203+
</div>
204+
</div>
205+
</template>
206+
```
207+
208+
## API Reference
209+
210+
### Stepper Props
211+
212+
| Prop | Type | Default | Description |
213+
|------|------|---------|-------------|
214+
| `v-model` | `number` | `0` | Current step index |
215+
| `steps` | `Array` | `[]` | Array of step objects |
216+
| `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` | Stepper orientation |
217+
| `allowSkip` | `boolean` | `false` | Allow skipping steps |
218+
| `showStepDescription` | `boolean` | `true` | Show step descriptions |
219+
| `showStepSubtitle` | `boolean` | `true` | Show step subtitles |
220+
221+
### Step Object Properties
222+
223+
| Property | Type | Description |
224+
|----------|------|-------------|
225+
| `title` | `string` | Step title |
226+
| `description` | `string` | Step description |
227+
| `icon` | `string` | Custom icon class |
228+
| `validator` | `Function` | Step validation function |
229+
230+
### Events
231+
232+
| Event | Parameters | Description |
233+
|-------|------------|-------------|
234+
| `update:modelValue` | `(step: number)` | Emitted when current step changes |
235+
| `step-complete` | `(step: number)` | Emitted when a step is completed |
236+
| `step-error` | `(step: number, error: Error)` | Emitted when step validation fails |
237+
238+
## Styling
239+
240+
The stepper component comes with a default modern style but can be customized using CSS variables and classes:
241+
242+
```css
243+
:deep(.stepper) {
244+
--tw-primary-100: rgb(219 234 254);
245+
--tw-primary-600: rgb(37 99 235);
246+
}
247+
248+
:deep(.step-icon) {
249+
@apply h-8 w-8 rounded-full flex items-center justify-center;
250+
}
251+
252+
:deep(.step-completed .step-icon) {
253+
@apply bg-blue-100 text-blue-600;
254+
}
255+
256+
:deep(.step-current .step-icon) {
257+
@apply bg-blue-100 text-blue-600 ring-2 ring-blue-600 ring-offset-2;
258+
}
259+
```
260+
261+
## Accessibility
262+
263+
The stepper component follows WAI-ARIA guidelines and includes:
264+
265+
- Proper ARIA attributes for steps and navigation
266+
- Keyboard navigation support
267+
- Focus management
268+
- Screen reader announcements for step changes
269+
- Clear visual indicators for current and completed steps
270+
271+
## TypeScript Support
272+
273+
The stepper includes TypeScript definitions for props and events:
274+
275+
```ts
276+
interface Step {
277+
title: string
278+
description?: string
279+
icon?: string
280+
validator?: () => Promise<boolean> | boolean
281+
}
282+
283+
interface StepperProps {
284+
modelValue: number
285+
steps: Step[]
286+
orientation?: 'horizontal' | 'vertical'
287+
allowSkip?: boolean
288+
showStepDescription?: boolean
289+
showStepSubtitle?: boolean
290+
}
291+
```
292+
293+
Need help with the stepper component? Feel free to reach out to our support team.

‎storage/framework/core/components/calendar/src/components/Expand.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ async function handleCopyCode() {
7676
class="btn-border absolute right-2 top-2 hidden p-1 group-hover:block"
7777
@click="handleCopyCode"
7878
>
79-
<div v-if="showCheckIcon" class="i-hugeicons-check text-gray-500" />
80-
<div v-else class="i-hugeicons-document-duplicate text-gray-500" />
79+
<div v-if="showCheckIcon" class="i-hugeicons:checkmark-circle-01 text-gray-500" />
80+
<div v-else class="i-hugeicons:copy-01 text-gray-500" />
8181
</button>
8282
</div>
8383
</div>

‎storage/framework/core/components/calendar/src/components/Installation.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ async function handleCopyCode() {
3131
class="btn-border absolute right-2 top-2 p-1"
3232
@click="handleCopyCode"
3333
>
34-
<div v-if="showCheckIcon" class="i-hugeicons-check text-gray-500" />
35-
<div v-else class="i-hugeicons-document-duplicate text-gray-500" />
34+
<div v-if="showCheckIcon" class="i-hugeicons:checkmark-circle-01 text-gray-500" />
35+
<div v-else class="i-hugeicons:copy-01 text-gray-500" />
3636
</button>
3737
</div>
3838
</div>

‎storage/framework/core/components/calendar/src/components/Others.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,8 @@ async function handleCopyCode() {
161161
class="btn-border absolute right-2 top-2 hidden p-1 group-hover:block"
162162
@click="handleCopyCode"
163163
>
164-
<div v-if="showCheckIcon" class="i-hugeicons-check text-gray-500" />
165-
<div v-else class="i-hugeicons-document-duplicate text-gray-500" />
164+
<div v-if="showCheckIcon" class="i-hugeicons:checkmark-circle-01 text-gray-500" />
165+
<div v-else class="i-hugeicons:copy-01 text-gray-500" />
166166
</button>
167167
</div>
168168
</div>

‎storage/framework/core/components/calendar/src/components/Position.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@ async function handleCopyCode() {
7272
class="btn-border absolute right-2 top-2 hidden p-1 group-hover:block"
7373
@click="handleCopyCode"
7474
>
75-
<div v-if="showCheckIcon" class="i-hugeicons-check text-gray-500" />
76-
<div v-else class="i-hugeicons-document-duplicate text-gray-500" />
75+
<div v-if="showCheckIcon" class="i-hugeicons:checkmark-circle-01 text-gray-500" />
76+
<div v-else class="i-hugeicons:copy-01 text-gray-500" />
7777
</button>
7878
</div>
7979
</div>

‎storage/framework/core/components/calendar/src/components/Styling.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,8 @@ async function handleCopyCode() {
8787
class="btn-border absolute right-2 top-2 hidden p-1 group-hover:block"
8888
@click="handleCopyCode"
8989
>
90-
<div v-if="showCheckIcon" class="i-hugeicons-check text-gray-500" />
91-
<div v-else class="i-hugeicons-document-duplicate text-gray-500" />
90+
<div v-if="showCheckIcon" class="i-hugeicons:checkmark-circle-01 text-gray-500" />
91+
<div v-else class="i-hugeicons:copy-01 text-gray-500" />
9292
</button>
9393
</div>
9494
</div>

‎storage/framework/core/components/calendar/src/components/Theming.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ async function handleCopyCode() {
6565
class="btn-border absolute right-2 top-2 hidden p-1 group-hover:block"
6666
@click="handleCopyCode"
6767
>
68-
<div v-if="showCheckIcon" class="i-hugeicons-check text-gray-500" />
69-
<div v-else class="i-hugeicons-document-duplicate text-gray-500" />
68+
<div v-if="showCheckIcon" class="i-hugeicons:checkmark-circle-01 text-gray-500" />
69+
<div v-else class="i-hugeicons:copy-01 text-gray-500" />
7070
</button>
7171
</div>
7272
</div>

‎storage/framework/core/components/calendar/src/components/Types.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,8 @@ async function handleCopyCode() {
170170
class="btn-border absolute right-2 top-2 hidden p-1 group-hover:block"
171171
@click="handleCopyCode"
172172
>
173-
<div v-if="showCheckIcon" class="i-hugeicons-check text-gray-500" />
174-
<div v-else class="i-hugeicons-document-duplicate text-gray-500" />
173+
<div v-if="showCheckIcon" class="i-hugeicons:checkmark-circle-01 text-gray-500" />
174+
<div v-else class="i-hugeicons:copy-01 text-gray-500" />
175175
</button>
176176
</div>
177177
</div>

‎storage/framework/core/components/calendar/src/components/Usage.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ async function handleCopyCode() {
4646
class="btn-border absolute right-2 top-2 hidden p-1 group-hover:block"
4747
@click="handleCopyCode"
4848
>
49-
<div v-if="showCheckIcon" class="i-hugeicons-check text-gray-500" />
50-
<div v-else class="i-hugeicons-document-duplicate text-gray-500" />
49+
<div v-if="showCheckIcon" class="i-hugeicons:checkmark-circle-01 text-gray-500" />
50+
<div v-else class="i-hugeicons:copy-01 text-gray-500" />
5151
</button>
5252
</div>
5353
</div>

‎storage/framework/core/components/combobox/src/Hero.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const filteredPeople = computed(() =>{
111111
class="absolute inset-y-0 left-0 flex items-center pl-3"
112112
:class="{ 'text-white': active, 'text-teal-600': !active }"
113113
>
114-
<div class="i-hugeicons-check-20-solid" />
114+
<div class="i-hugeicons:checkmark-circle-01" />
115115
</span>
116116
</li>
117117
</ComboboxOption>

0 commit comments

Comments
 (0)