pasito 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +220 -0
- package/dist/{chunk-HAF3VK2R.mjs → chunk-X5PGKZ7U.mjs} +6 -6
- package/dist/index.css +1 -1
- package/dist/index.d.mts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +7 -7
- package/dist/index.mjs +3 -3
- package/dist/react.css +1 -1
- package/dist/react.d.mts +2 -2
- package/dist/react.d.ts +2 -2
- package/dist/react.js +7 -7
- package/dist/react.mjs +3 -3
- package/dist/{types-C_ERj5iI.d.mts → types-BFgSD_7j.d.mts} +2 -2
- package/dist/{types-C_ERj5iI.d.ts → types-BFgSD_7j.d.ts} +2 -2
- package/dist/vue.d.mts +3 -3
- package/dist/vue.d.ts +3 -3
- package/dist/vue.js +10 -10
- package/dist/vue.mjs +9 -9
- package/package.json +16 -6
package/README.md
ADDED
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
# Pasito
|
|
2
|
+
|
|
3
|
+
A tiny, themeable, dependency-free fluid stepper component.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm i pasito
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## React
|
|
12
|
+
|
|
13
|
+
### Quick Start
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Stepper } from "pasito"; // or "pasito/react"
|
|
17
|
+
import "pasito/styles.css";
|
|
18
|
+
|
|
19
|
+
function App() {
|
|
20
|
+
const [active, setActive] = useState(0);
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<Stepper
|
|
24
|
+
count={5}
|
|
25
|
+
active={active}
|
|
26
|
+
onStepClick={setActive}
|
|
27
|
+
/>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Autoplay
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { Stepper, useAutoPlay } from "pasito";
|
|
36
|
+
|
|
37
|
+
function App() {
|
|
38
|
+
const [active, setActive] = useState(0);
|
|
39
|
+
const { playing, toggle, filling, fillDuration } = useAutoPlay({
|
|
40
|
+
count: 5,
|
|
41
|
+
active,
|
|
42
|
+
onStepChange: setActive,
|
|
43
|
+
stepDuration: 3000,
|
|
44
|
+
loop: true,
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<>
|
|
49
|
+
<Stepper
|
|
50
|
+
count={5}
|
|
51
|
+
active={active}
|
|
52
|
+
filling={filling}
|
|
53
|
+
fillDuration={fillDuration}
|
|
54
|
+
/>
|
|
55
|
+
<button onClick={toggle}>
|
|
56
|
+
{playing ? "Pause" : "Play"}
|
|
57
|
+
</button>
|
|
58
|
+
</>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Vue
|
|
64
|
+
|
|
65
|
+
### Quick Start
|
|
66
|
+
|
|
67
|
+
```vue
|
|
68
|
+
<script setup>
|
|
69
|
+
import { ref } from "vue";
|
|
70
|
+
import { Stepper } from "pasito/vue";
|
|
71
|
+
import "pasito/styles.css";
|
|
72
|
+
|
|
73
|
+
const active = ref(0);
|
|
74
|
+
</script>
|
|
75
|
+
|
|
76
|
+
<template>
|
|
77
|
+
<Stepper
|
|
78
|
+
:count="5"
|
|
79
|
+
:active="active"
|
|
80
|
+
@step-click="active = $event"
|
|
81
|
+
/>
|
|
82
|
+
</template>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Autoplay
|
|
86
|
+
|
|
87
|
+
```vue
|
|
88
|
+
<script setup>
|
|
89
|
+
import { ref } from "vue";
|
|
90
|
+
import { Stepper, useAutoPlay } from "pasito/vue";
|
|
91
|
+
import "pasito/styles.css";
|
|
92
|
+
|
|
93
|
+
const active = ref(0);
|
|
94
|
+
const { playing, toggle, filling, fillDuration } = useAutoPlay({
|
|
95
|
+
count: ref(5),
|
|
96
|
+
active,
|
|
97
|
+
onStepChange: (i) => { active.value = i; },
|
|
98
|
+
stepDuration: 3000,
|
|
99
|
+
loop: true,
|
|
100
|
+
});
|
|
101
|
+
</script>
|
|
102
|
+
|
|
103
|
+
<template>
|
|
104
|
+
<Stepper
|
|
105
|
+
:count="5"
|
|
106
|
+
:active="active"
|
|
107
|
+
:filling="filling"
|
|
108
|
+
:fill-duration="fillDuration"
|
|
109
|
+
/>
|
|
110
|
+
<button @click="toggle">
|
|
111
|
+
{{ playing ? "Pause" : "Play" }}
|
|
112
|
+
</button>
|
|
113
|
+
</template>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## Imports
|
|
117
|
+
|
|
118
|
+
```ts
|
|
119
|
+
// React — default export stays React for backwards compat
|
|
120
|
+
import { Stepper, useAutoPlay } from "pasito";
|
|
121
|
+
import { Stepper, useAutoPlay } from "pasito/react";
|
|
122
|
+
|
|
123
|
+
// Vue
|
|
124
|
+
import { Stepper, useAutoPlay } from "pasito/vue";
|
|
125
|
+
|
|
126
|
+
// CSS (both frameworks)
|
|
127
|
+
import "pasito/styles.css";
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## API
|
|
131
|
+
|
|
132
|
+
### `<Stepper />`
|
|
133
|
+
|
|
134
|
+
| Prop | Type | Default | Description |
|
|
135
|
+
|------|------|---------|-------------|
|
|
136
|
+
| `count` | `number` | — | Total number of steps |
|
|
137
|
+
| `active` | `number` | — | Zero-based active step index |
|
|
138
|
+
| `onStepClick` (React) / `@step-click` (Vue) | `(i: number) => void` | — | Called when a step is clicked |
|
|
139
|
+
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout direction |
|
|
140
|
+
| `maxVisible` | `number` | — | Visible steps before windowing kicks in |
|
|
141
|
+
| `transitionDuration` | `number` | `500` | Transition duration in ms |
|
|
142
|
+
| `easing` | `string` | `cubic-bezier(0.215, 0.61, 0.355, 1)` | CSS transition timing function |
|
|
143
|
+
| `filling` | `boolean` | `false` | Show fill progress on the active step |
|
|
144
|
+
| `fillDuration` | `number` | `3000` | Duration of the fill animation in ms |
|
|
145
|
+
| `className` (React) / `class` (Vue) | `string` | — | Additional class for CSS variable overrides |
|
|
146
|
+
|
|
147
|
+
### `useAutoPlay(options)`
|
|
148
|
+
|
|
149
|
+
**React** — pass plain values:
|
|
150
|
+
|
|
151
|
+
| Option | Type | Default | Description |
|
|
152
|
+
|--------|------|---------|-------------|
|
|
153
|
+
| `count` | `number` | — | Total number of steps |
|
|
154
|
+
| `active` | `number` | — | Current active step |
|
|
155
|
+
| `onStepChange` | `(i: number) => void` | — | Called to advance the step |
|
|
156
|
+
| `stepDuration` | `number` | `3000` | Time per step in ms |
|
|
157
|
+
| `loop` | `boolean` | `true` | Loop back to first step after last |
|
|
158
|
+
| `enabled` | `boolean` | `true` | Enable/disable autoplay |
|
|
159
|
+
|
|
160
|
+
**Vue** — pass refs for reactive values (`count`, `active`), plain or ref for config:
|
|
161
|
+
|
|
162
|
+
| Option | Type | Default | Description |
|
|
163
|
+
|--------|------|---------|-------------|
|
|
164
|
+
| `count` | `Ref<number>` | — | Total number of steps |
|
|
165
|
+
| `active` | `Ref<number>` | — | Current active step |
|
|
166
|
+
| `onStepChange` | `(i: number) => void` | — | Called to advance the step |
|
|
167
|
+
| `stepDuration` | `number \| Ref<number>` | `3000` | Time per step in ms |
|
|
168
|
+
| `loop` | `boolean \| Ref<boolean>` | `true` | Loop back to first step after last |
|
|
169
|
+
| `enabled` | `boolean \| Ref<boolean>` | `true` | Enable/disable autoplay |
|
|
170
|
+
|
|
171
|
+
Returns `{ playing, toggle, filling, fillDuration }` — pass `filling` and `fillDuration` directly to `<Stepper />`.
|
|
172
|
+
|
|
173
|
+
## Theming
|
|
174
|
+
|
|
175
|
+
Override any CSS custom property via a class:
|
|
176
|
+
|
|
177
|
+
```tsx
|
|
178
|
+
// React
|
|
179
|
+
<Stepper className="my-stepper" ... />
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
```vue
|
|
183
|
+
<!-- Vue -->
|
|
184
|
+
<Stepper class="my-stepper" ... />
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
| Variable | Default | Description |
|
|
188
|
+
|----------|---------|-------------|
|
|
189
|
+
| `--pill-dot-size` | `8px` | Diameter of inactive dots |
|
|
190
|
+
| `--pill-active-width` | `24px` | Width of the active pill (or height in vertical) |
|
|
191
|
+
| `--pill-gap` | `6px` | Space between steps |
|
|
192
|
+
| `--pill-bg` | `rgba(0,0,0,0.12)` | Inactive dot color |
|
|
193
|
+
| `--pill-active-bg` | `rgba(0,0,0,0.8)` | Active pill color |
|
|
194
|
+
| `--pill-fill-bg` | `rgba(255,255,255,0.45)` | Autoplay fill bar color |
|
|
195
|
+
| `--pill-container-bg` | `rgba(0,0,0,0.04)` | Container background |
|
|
196
|
+
| `--pill-container-border` | `rgba(0,0,0,0.06)` | Container border color |
|
|
197
|
+
| `--pill-container-radius` | `999px` | Container border radius |
|
|
198
|
+
|
|
199
|
+
### Dark theme example
|
|
200
|
+
|
|
201
|
+
```css
|
|
202
|
+
.my-stepper {
|
|
203
|
+
--pill-bg: rgba(255, 255, 255, 0.15);
|
|
204
|
+
--pill-active-bg: rgba(255, 255, 255, 0.9);
|
|
205
|
+
--pill-fill-bg: rgba(255, 255, 255, 0.3);
|
|
206
|
+
--pill-container-bg: rgba(255, 255, 255, 0.1);
|
|
207
|
+
--pill-container-border: rgba(255, 255, 255, 0.12);
|
|
208
|
+
}
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
## Accessibility
|
|
212
|
+
|
|
213
|
+
- Steps use `role="tab"` with `aria-selected` for screen readers
|
|
214
|
+
- `aria-label` on each step (`Step 1`, `Step 2`, etc.)
|
|
215
|
+
- Keyboard focusable (active step has `tabIndex={0}`)
|
|
216
|
+
- `prefers-reduced-motion` is respected — all transitions resolve instantly
|
|
217
|
+
|
|
218
|
+
---
|
|
219
|
+
|
|
220
|
+
Created by [@joshpuckett](https://github.com/joshpuckett)
|
|
@@ -55,9 +55,9 @@ function useAnimatingSteps(count, _duration) {
|
|
|
55
55
|
return steps;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
// src/react/
|
|
58
|
+
// src/react/Step.tsx
|
|
59
59
|
import { jsx } from "react/jsx-runtime";
|
|
60
|
-
function
|
|
60
|
+
function Step({
|
|
61
61
|
index,
|
|
62
62
|
isActive,
|
|
63
63
|
phase,
|
|
@@ -93,9 +93,9 @@ function PillStep({
|
|
|
93
93
|
);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
// src/react/
|
|
96
|
+
// src/react/Stepper.tsx
|
|
97
97
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
98
|
-
function
|
|
98
|
+
function Stepper({
|
|
99
99
|
count,
|
|
100
100
|
active,
|
|
101
101
|
onStepClick,
|
|
@@ -144,7 +144,7 @@ function PillStepper({
|
|
|
144
144
|
className: "pasito-track",
|
|
145
145
|
style: { transform: transformValue },
|
|
146
146
|
children: animatingSteps.map((step) => /* @__PURE__ */ jsx2(
|
|
147
|
-
|
|
147
|
+
Step,
|
|
148
148
|
{
|
|
149
149
|
index: step.index,
|
|
150
150
|
isActive: step.index === active,
|
|
@@ -218,6 +218,6 @@ function useAutoPlay({
|
|
|
218
218
|
}
|
|
219
219
|
|
|
220
220
|
export {
|
|
221
|
-
|
|
221
|
+
Stepper,
|
|
222
222
|
useAutoPlay
|
|
223
223
|
};
|
package/dist/index.css
CHANGED
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { S as StepperProps, U as UseAutoPlayOptions, a as UseAutoPlayReturn } from './types-BFgSD_7j.mjs';
|
|
2
2
|
|
|
3
|
-
declare function
|
|
3
|
+
declare function Stepper({ count, active, onStepClick, orientation, maxVisible, transitionDuration, easing, className, filling, fillDuration, }: StepperProps): React.ReactElement;
|
|
4
4
|
|
|
5
5
|
declare function useAutoPlay({ count, active, onStepChange, stepDuration, loop, enabled, }: UseAutoPlayOptions): UseAutoPlayReturn;
|
|
6
6
|
|
|
7
|
-
export {
|
|
7
|
+
export { Stepper, StepperProps, UseAutoPlayOptions, UseAutoPlayReturn, useAutoPlay };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { S as StepperProps, U as UseAutoPlayOptions, a as UseAutoPlayReturn } from './types-BFgSD_7j.js';
|
|
2
2
|
|
|
3
|
-
declare function
|
|
3
|
+
declare function Stepper({ count, active, onStepClick, orientation, maxVisible, transitionDuration, easing, className, filling, fillDuration, }: StepperProps): React.ReactElement;
|
|
4
4
|
|
|
5
5
|
declare function useAutoPlay({ count, active, onStepChange, stepDuration, loop, enabled, }: UseAutoPlayOptions): UseAutoPlayReturn;
|
|
6
6
|
|
|
7
|
-
export {
|
|
7
|
+
export { Stepper, StepperProps, UseAutoPlayOptions, UseAutoPlayReturn, useAutoPlay };
|
package/dist/index.js
CHANGED
|
@@ -21,7 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
// src/react/index.ts
|
|
22
22
|
var react_exports = {};
|
|
23
23
|
__export(react_exports, {
|
|
24
|
-
|
|
24
|
+
Stepper: () => Stepper,
|
|
25
25
|
useAutoPlay: () => useAutoPlay
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(react_exports);
|
|
@@ -161,9 +161,9 @@ function useAnimatingSteps(count, _duration) {
|
|
|
161
161
|
return steps;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
-
// src/react/
|
|
164
|
+
// src/react/Step.tsx
|
|
165
165
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
166
|
-
function
|
|
166
|
+
function Step({
|
|
167
167
|
index,
|
|
168
168
|
isActive,
|
|
169
169
|
phase,
|
|
@@ -199,9 +199,9 @@ function PillStep({
|
|
|
199
199
|
);
|
|
200
200
|
}
|
|
201
201
|
|
|
202
|
-
// src/react/
|
|
202
|
+
// src/react/Stepper.tsx
|
|
203
203
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
204
|
-
function
|
|
204
|
+
function Stepper({
|
|
205
205
|
count,
|
|
206
206
|
active,
|
|
207
207
|
onStepClick,
|
|
@@ -250,7 +250,7 @@ function PillStepper({
|
|
|
250
250
|
className: "pasito-track",
|
|
251
251
|
style: { transform: transformValue },
|
|
252
252
|
children: animatingSteps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
253
|
-
|
|
253
|
+
Step,
|
|
254
254
|
{
|
|
255
255
|
index: step.index,
|
|
256
256
|
isActive: step.index === active,
|
|
@@ -337,6 +337,6 @@ function useAutoPlay({
|
|
|
337
337
|
}
|
|
338
338
|
// Annotate the CommonJS export names for ESM import in node:
|
|
339
339
|
0 && (module.exports = {
|
|
340
|
-
|
|
340
|
+
Stepper,
|
|
341
341
|
useAutoPlay
|
|
342
342
|
});
|
package/dist/index.mjs
CHANGED
package/dist/react.css
CHANGED
package/dist/react.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
1
|
+
export { Stepper, useAutoPlay } from './index.mjs';
|
|
2
|
+
export { S as StepperProps, U as UseAutoPlayOptions, a as UseAutoPlayReturn } from './types-BFgSD_7j.mjs';
|
package/dist/react.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
1
|
+
export { Stepper, useAutoPlay } from './index.js';
|
|
2
|
+
export { S as StepperProps, U as UseAutoPlayOptions, a as UseAutoPlayReturn } from './types-BFgSD_7j.js';
|
package/dist/react.js
CHANGED
|
@@ -21,7 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
// src/react/index.ts
|
|
22
22
|
var react_exports = {};
|
|
23
23
|
__export(react_exports, {
|
|
24
|
-
|
|
24
|
+
Stepper: () => Stepper,
|
|
25
25
|
useAutoPlay: () => useAutoPlay
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(react_exports);
|
|
@@ -161,9 +161,9 @@ function useAnimatingSteps(count, _duration) {
|
|
|
161
161
|
return steps;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
-
// src/react/
|
|
164
|
+
// src/react/Step.tsx
|
|
165
165
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
166
|
-
function
|
|
166
|
+
function Step({
|
|
167
167
|
index,
|
|
168
168
|
isActive,
|
|
169
169
|
phase,
|
|
@@ -199,9 +199,9 @@ function PillStep({
|
|
|
199
199
|
);
|
|
200
200
|
}
|
|
201
201
|
|
|
202
|
-
// src/react/
|
|
202
|
+
// src/react/Stepper.tsx
|
|
203
203
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
204
|
-
function
|
|
204
|
+
function Stepper({
|
|
205
205
|
count,
|
|
206
206
|
active,
|
|
207
207
|
onStepClick,
|
|
@@ -250,7 +250,7 @@ function PillStepper({
|
|
|
250
250
|
className: "pasito-track",
|
|
251
251
|
style: { transform: transformValue },
|
|
252
252
|
children: animatingSteps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
253
|
-
|
|
253
|
+
Step,
|
|
254
254
|
{
|
|
255
255
|
index: step.index,
|
|
256
256
|
isActive: step.index === active,
|
|
@@ -337,6 +337,6 @@ function useAutoPlay({
|
|
|
337
337
|
}
|
|
338
338
|
// Annotate the CommonJS export names for ESM import in node:
|
|
339
339
|
0 && (module.exports = {
|
|
340
|
-
|
|
340
|
+
Stepper,
|
|
341
341
|
useAutoPlay
|
|
342
342
|
});
|
package/dist/react.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
interface
|
|
1
|
+
interface StepperProps {
|
|
2
2
|
/** Total number of steps */
|
|
3
3
|
count: number;
|
|
4
4
|
/** Zero-based active step index */
|
|
@@ -41,4 +41,4 @@ interface UseAutoPlayReturn {
|
|
|
41
41
|
fillDuration: number;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
export type { AnimatingStep as A,
|
|
44
|
+
export type { AnimatingStep as A, StepperProps as S, UseAutoPlayOptions as U, UseAutoPlayReturn as a };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
interface
|
|
1
|
+
interface StepperProps {
|
|
2
2
|
/** Total number of steps */
|
|
3
3
|
count: number;
|
|
4
4
|
/** Zero-based active step index */
|
|
@@ -41,4 +41,4 @@ interface UseAutoPlayReturn {
|
|
|
41
41
|
fillDuration: number;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
export type { AnimatingStep as A,
|
|
44
|
+
export type { AnimatingStep as A, StepperProps as S, UseAutoPlayOptions as U, UseAutoPlayReturn as a };
|
package/dist/vue.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as vue from 'vue';
|
|
2
2
|
import { PropType, Ref } from 'vue';
|
|
3
|
-
export { A as AnimatingStep, a as UseAutoPlayReturn } from './types-
|
|
3
|
+
export { A as AnimatingStep, a as UseAutoPlayReturn } from './types-BFgSD_7j.mjs';
|
|
4
4
|
|
|
5
|
-
declare const
|
|
5
|
+
declare const Stepper: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
6
6
|
count: {
|
|
7
7
|
type: NumberConstructor;
|
|
8
8
|
required: true;
|
|
@@ -97,4 +97,4 @@ declare function useAutoPlay(options: UseAutoPlayOptions): {
|
|
|
97
97
|
fillDuration: vue.ComputedRef<number>;
|
|
98
98
|
};
|
|
99
99
|
|
|
100
|
-
export {
|
|
100
|
+
export { Stepper, type UseAutoPlayOptions, useAutoPlay };
|
package/dist/vue.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as vue from 'vue';
|
|
2
2
|
import { PropType, Ref } from 'vue';
|
|
3
|
-
export { A as AnimatingStep, a as UseAutoPlayReturn } from './types-
|
|
3
|
+
export { A as AnimatingStep, a as UseAutoPlayReturn } from './types-BFgSD_7j.js';
|
|
4
4
|
|
|
5
|
-
declare const
|
|
5
|
+
declare const Stepper: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
6
6
|
count: {
|
|
7
7
|
type: NumberConstructor;
|
|
8
8
|
required: true;
|
|
@@ -97,4 +97,4 @@ declare function useAutoPlay(options: UseAutoPlayOptions): {
|
|
|
97
97
|
fillDuration: vue.ComputedRef<number>;
|
|
98
98
|
};
|
|
99
99
|
|
|
100
|
-
export {
|
|
100
|
+
export { Stepper, type UseAutoPlayOptions, useAutoPlay };
|
package/dist/vue.js
CHANGED
|
@@ -21,12 +21,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
// src/vue/index.ts
|
|
22
22
|
var vue_exports = {};
|
|
23
23
|
__export(vue_exports, {
|
|
24
|
-
|
|
24
|
+
Stepper: () => Stepper,
|
|
25
25
|
useAutoPlay: () => useAutoPlay
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(vue_exports);
|
|
28
28
|
|
|
29
|
-
// src/vue/
|
|
29
|
+
// src/vue/Stepper.ts
|
|
30
30
|
var import_vue4 = require("vue");
|
|
31
31
|
|
|
32
32
|
// src/vue/composables/useStepWindow.ts
|
|
@@ -166,10 +166,10 @@ function useAnimatingSteps(count, _duration) {
|
|
|
166
166
|
return steps;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
-
// src/vue/
|
|
169
|
+
// src/vue/Step.ts
|
|
170
170
|
var import_vue3 = require("vue");
|
|
171
|
-
var
|
|
172
|
-
name: "
|
|
171
|
+
var Step = (0, import_vue3.defineComponent)({
|
|
172
|
+
name: "Step",
|
|
173
173
|
props: {
|
|
174
174
|
index: { type: Number, required: true },
|
|
175
175
|
isActive: { type: Boolean, required: true },
|
|
@@ -210,9 +210,9 @@ var PillStep = (0, import_vue3.defineComponent)({
|
|
|
210
210
|
}
|
|
211
211
|
});
|
|
212
212
|
|
|
213
|
-
// src/vue/
|
|
214
|
-
var
|
|
215
|
-
name: "
|
|
213
|
+
// src/vue/Stepper.ts
|
|
214
|
+
var Stepper = (0, import_vue4.defineComponent)({
|
|
215
|
+
name: "Stepper",
|
|
216
216
|
props: {
|
|
217
217
|
count: { type: Number, required: true },
|
|
218
218
|
active: { type: Number, required: true },
|
|
@@ -274,7 +274,7 @@ var PillStepper = (0, import_vue4.defineComponent)({
|
|
|
274
274
|
style: { transform: transformValue }
|
|
275
275
|
},
|
|
276
276
|
steps.value.map(
|
|
277
|
-
(step) => (0, import_vue4.h)(
|
|
277
|
+
(step) => (0, import_vue4.h)(Step, {
|
|
278
278
|
key: step.key,
|
|
279
279
|
index: step.index,
|
|
280
280
|
isActive: step.index === props.active,
|
|
@@ -346,6 +346,6 @@ function useAutoPlay(options) {
|
|
|
346
346
|
}
|
|
347
347
|
// Annotate the CommonJS export names for ESM import in node:
|
|
348
348
|
0 && (module.exports = {
|
|
349
|
-
|
|
349
|
+
Stepper,
|
|
350
350
|
useAutoPlay
|
|
351
351
|
});
|
package/dist/vue.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
computeStepWindow
|
|
6
6
|
} from "./chunk-4JH2WF3D.mjs";
|
|
7
7
|
|
|
8
|
-
// src/vue/
|
|
8
|
+
// src/vue/Stepper.ts
|
|
9
9
|
import { defineComponent as defineComponent2, toRef, computed as computed3, h as h2 } from "vue";
|
|
10
10
|
|
|
11
11
|
// src/vue/composables/useStepWindow.ts
|
|
@@ -60,10 +60,10 @@ function useAnimatingSteps(count, _duration) {
|
|
|
60
60
|
return steps;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
// src/vue/
|
|
63
|
+
// src/vue/Step.ts
|
|
64
64
|
import { defineComponent, h } from "vue";
|
|
65
|
-
var
|
|
66
|
-
name: "
|
|
65
|
+
var Step = defineComponent({
|
|
66
|
+
name: "Step",
|
|
67
67
|
props: {
|
|
68
68
|
index: { type: Number, required: true },
|
|
69
69
|
isActive: { type: Boolean, required: true },
|
|
@@ -104,9 +104,9 @@ var PillStep = defineComponent({
|
|
|
104
104
|
}
|
|
105
105
|
});
|
|
106
106
|
|
|
107
|
-
// src/vue/
|
|
108
|
-
var
|
|
109
|
-
name: "
|
|
107
|
+
// src/vue/Stepper.ts
|
|
108
|
+
var Stepper = defineComponent2({
|
|
109
|
+
name: "Stepper",
|
|
110
110
|
props: {
|
|
111
111
|
count: { type: Number, required: true },
|
|
112
112
|
active: { type: Number, required: true },
|
|
@@ -168,7 +168,7 @@ var PillStepper = defineComponent2({
|
|
|
168
168
|
style: { transform: transformValue }
|
|
169
169
|
},
|
|
170
170
|
steps.value.map(
|
|
171
|
-
(step) => h2(
|
|
171
|
+
(step) => h2(Step, {
|
|
172
172
|
key: step.key,
|
|
173
173
|
index: step.index,
|
|
174
174
|
isActive: step.index === props.active,
|
|
@@ -226,6 +226,6 @@ function useAutoPlay(options) {
|
|
|
226
226
|
};
|
|
227
227
|
}
|
|
228
228
|
export {
|
|
229
|
-
|
|
229
|
+
Stepper,
|
|
230
230
|
useAutoPlay
|
|
231
231
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pasito",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "A dependency-free stepper/progress indicator with pure CSS transitions — React & Vue",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -23,8 +23,12 @@
|
|
|
23
23
|
},
|
|
24
24
|
"./styles.css": "./dist/index.css"
|
|
25
25
|
},
|
|
26
|
-
"files": [
|
|
27
|
-
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
29
|
+
"sideEffects": [
|
|
30
|
+
"*.css"
|
|
31
|
+
],
|
|
28
32
|
"scripts": {
|
|
29
33
|
"build": "tsup",
|
|
30
34
|
"dev": "tsup --watch"
|
|
@@ -35,9 +39,15 @@
|
|
|
35
39
|
"vue": ">=3"
|
|
36
40
|
},
|
|
37
41
|
"peerDependenciesMeta": {
|
|
38
|
-
"react": {
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
"react": {
|
|
43
|
+
"optional": true
|
|
44
|
+
},
|
|
45
|
+
"react-dom": {
|
|
46
|
+
"optional": true
|
|
47
|
+
},
|
|
48
|
+
"vue": {
|
|
49
|
+
"optional": true
|
|
50
|
+
}
|
|
41
51
|
},
|
|
42
52
|
"devDependencies": {
|
|
43
53
|
"react": "^19.0.0",
|