Skip to content

Commit 93db8e0

Browse files
cab-mikeecab-mikee
committed
chore: improve stepper test build
1 parent 2d75c70 commit 93db8e0

File tree

10 files changed

+174
-21
lines changed

10 files changed

+174
-21
lines changed

‎storage/framework/core/components/stepper/components.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
// @ts-nocheck
33
// Generated by unplugin-vue-components
44
// Read more: https://github.com/vuejs/core/pull/3399
5-
export type {}
5+
export {}
66

77
/* prettier-ignore */
88
declare module 'vue' {
99
export interface GlobalComponents {
10+
Hero: typeof import('./src/components/Hero.vue')['default']
1011
RouterLink: typeof import('vue-router')['RouterLink']
1112
RouterView: typeof import('vue-router')['RouterView']
1213
Starport: typeof import('vue-starport')['Starport']

‎storage/framework/core/components/stepper/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/assest/stacks.svg" />
5+
<link rel="icon" type="image/svg+xml" href="src/assets/stacks.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Stacks</title>
88
</head>

‎storage/framework/core/components/stepper/src/App.vue

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
<script lang="ts" setup>
22
import { ref, watch } from 'vue'
3+
import Hero from './components/Hero.vue'
4+
35
import { Stepper } from '.'
46
57
const step = ref(1)
68
const steps = ref(5)
79
const stepperRef = ref(null)
810
9-
const next = () => {
11+
function next() {
1012
if (stepperRef.value) {
1113
stepperRef.value.next()
1214
}
1315
}
1416
15-
const reset = () => {
17+
function reset() {
1618
if (stepperRef.value) {
1719
stepperRef.value.reset()
1820
}
1921
}
2022
21-
const previous = () => {
23+
function previous() {
2224
if (stepperRef.value) {
2325
stepperRef.value.previous()
2426
}
@@ -29,22 +31,22 @@ const previous = () => {
2931
<div class="bg-neutral-100/66 dark:bg-neutral-900 px-4">
3032
<div class="container mx-auto max-w-full sm:max-w-2xl relative">
3133
<header class="py-20 flex-center flex-col">
32-
Stacks Stepper
34+
<Hero />
3335
</header>
3436
<main
3537
class="grid grid-cols-1 gap-8 text-xs 2xl:text-sm text-primary pb-20"
3638
>
37-
38-
<Stepper ref='stepperRef' :steps="steps" v-model="step"/>
39-
<div class="w-full mx-auto text-center">
39+
<Stepper ref="stepperRef" v-model="step" :steps="steps" />
40+
<!-- <div class="w-full mx-auto text-center">
4041
<button class="mx-5 rounded-md bg-indigo-50 px-3.5 py-2.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100" type="button" @click="next()">Next</button>
4142
<button class="text-sm font-semibold mx-5" type="button" @click="reset()">Reset</button>
4243
<button class="mx-5 rounded-md bg-indigo-50 px-3.5 py-2.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100" type="button" @click="previous()">Previous</button>
43-
</div>
44-
45-
44+
</div> -->
4645
</main>
4746
</div>
48-
4947
</div>
5048
</template>
49+
50+
<style>
51+
@unocss-placeholder;
52+
</style>

‎storage/framework/core/components/stepper/assets/stacks.svg renamed to ‎storage/framework/core/components/stepper/src/assets/stacks.svg

File renamed without changes.

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

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<template>
2+
<div class="flex flex-col gap-3 items-center ">
3+
<div class="title-wrapper">
4+
<div class="toast" />
5+
<div class="toast" />
6+
<div class="toast" />
7+
</div>
8+
<h1 class="text-5xl font-bold -mt-5 mb-3 text-neon">
9+
stacks/stepper
10+
</h1>
11+
<p class="mt-0 mb-3 text-lg">
12+
An Stepper component, allowing you to build anything from Onboarding/Welcome to Help screens, and a lot more...
13+
</p>
14+
<div class="flex gap-2">
15+
<a
16+
class="button btn-primary"
17+
href="https://stacksjs.org/"
18+
target="_blank"
19+
>
20+
View Documentation
21+
</a>
22+
<a
23+
class="button btn-secondary"
24+
href="https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/notification"
25+
target="_blank"
26+
>
27+
GitHub
28+
</a>
29+
</div>
30+
</div>
31+
</template>
32+
33+
<style scoped>
34+
.title-wrapper {
35+
display: flex;
36+
flex-direction: column;
37+
margin: 0 auto;
38+
height: 100px;
39+
width: 400px;
40+
position: relative;
41+
-webkit-mask-image: linear-gradient(to top, transparent 0%, black 35%);
42+
mask-image: linear-gradient(to top, transparent 0%, black 35%);
43+
opacity: 1;
44+
}
45+
46+
.toast {
47+
width: 356px;
48+
height: 40px;
49+
background: #ffffff;
50+
box-shadow: 0 4px 12px #0000001a;
51+
border: 1px solid #f5f5f5;
52+
border-radius: 6px;
53+
position: absolute;
54+
bottom: 0;
55+
left: 50%;
56+
transform: translateX(-50%);
57+
}
58+
59+
.toast:nth-child(1) {
60+
transform: translateY(-60%) translateX(-50%) scale(0.9);
61+
}
62+
63+
.toast:nth-child(2) {
64+
transform: translateY(-30%) translateX(-50%) scale(0.95);
65+
}
66+
67+
.button {
68+
height: 40px;
69+
border-radius: 6px;
70+
border: none;
71+
padding: 0 30px;
72+
font-weight: 600;
73+
flex-shrink: 0;
74+
font-family: inherit;
75+
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06),
76+
0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.04),
77+
0px 3px 3px 0px rgba(0, 0, 0, 0.02), 0px 4px 4px 0px rgba(0, 0, 0, 0.01);
78+
position: relative;
79+
overflow: hidden;
80+
cursor: pointer;
81+
text-decoration: none;
82+
color: hsl(0, 0%, 9%);
83+
font-size: 13px;
84+
display: inline-flex;
85+
align-items: center;
86+
transition: box-shadow 200ms, background 200ms;
87+
}
88+
89+
.btn-secondary {
90+
background: linear-gradient(
91+
156deg,
92+
rgba(255, 255, 255, 1) 0%,
93+
rgba(240, 240, 240, 1) 100%
94+
);
95+
}
96+
97+
.button:focus-visible {
98+
outline: none;
99+
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06),
100+
0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.04),
101+
0px 3px 3px 0px rgba(0, 0, 0, 0.02), 0px 4px 4px 0px rgba(0, 0, 0, 0.01),
102+
0 0 0 2px rgba(0, 0, 0, 0.15);
103+
}
104+
105+
.button:after {
106+
content: '';
107+
position: absolute;
108+
top: 100%;
109+
background: blue;
110+
left: 0;
111+
width: 100%;
112+
height: 35%;
113+
background: linear-gradient(
114+
to top,
115+
hsl(0, 0%, 91%) 0%,
116+
hsla(0, 0%, 91%, 0.987) 8.1%,
117+
hsla(0, 0%, 91%, 0.951) 15.5%,
118+
hsla(0, 0%, 91%, 0.896) 22.5%,
119+
hsla(0, 0%, 91%, 0.825) 29%,
120+
hsla(0, 0%, 91%, 0.741) 35.3%,
121+
hsla(0, 0%, 91%, 0.648) 41.2%,
122+
hsla(0, 0%, 91%, 0.55) 47.1%,
123+
hsla(0, 0%, 91%, 0.45) 52.9%,
124+
hsla(0, 0%, 91%, 0.352) 58.8%,
125+
hsla(0, 0%, 91%, 0.259) 64.7%,
126+
hsla(0, 0%, 91%, 0.175) 71%,
127+
hsla(0, 0%, 91%, 0.104) 77.5%,
128+
hsla(0, 0%, 91%, 0.049) 84.5%,
129+
hsla(0, 0%, 91%, 0.013) 91.9%,
130+
hsla(0, 0%, 91%, 0) 100%
131+
);
132+
opacity: 0.6;
133+
transition: transform 200ms;
134+
}
135+
136+
.btn-secondary:hover:after {
137+
transform: translateY(-100%);
138+
}
139+
140+
@media (max-width: 600px) {
141+
.title-wrapper {
142+
width: 100%;
143+
}
144+
}
145+
146+
@unocss-placeholder
147+
</style>

‎storage/framework/core/components/stepper/src/components/Step.vue

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,7 @@ function handleChange() {
9494
</div>
9595
</template>
9696

97-
<style scoped>
98-
97+
<style>
9998
.step:hover:not(.is-disabled) {
10099
opacity: 0.85;
101100
}
@@ -129,6 +128,5 @@ function handleChange() {
129128
margin-right: 0.5rem; /* Assuming mr-2 maps to 0.5rem */
130129
}
131130
}
132-
133-
131+
@unocss-placeholder
134132
</style>

‎storage/framework/core/components/stepper/src/components/Stepper.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,4 +231,7 @@ defineExpose({
231231
</div>
232232
</template>
233233

234-
<style scoped></style>
234+
<style scoped>
235+
@unocss-placeholder
236+
</style>
237+

‎storage/framework/core/components/stepper/src/components/index.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
1-
import 'unocss'
2-
import '@unocss/reset/tailwind.css'
3-
1+
import '@unocss/reset/tailwind.css';
42
export { default as Stepper } from './Stepper.vue'

‎storage/framework/core/components/stepper/src/main.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { createHead } from '@vueuse/head'
22
import { createApp } from 'vue'
33
import App from './App.vue'
44

5+
import '@unocss/reset/tailwind.css';
56
import highlight from './plugins/highlight'
67

78
const app = createApp(App)

‎storage/framework/core/components/stepper/vite.config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,9 @@ export default defineConfig(({ command, mode }) => {
134134
},
135135

136136
plugins: [...commonPlugins],
137+
server:{
138+
port: 3000
139+
},
137140
...userConfig,
138141
}
139142
})

0 commit comments

Comments
 (0)