svelte-product-mockup 0.0.1 → 0.0.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 +17 -33
- package/dist/index.js +974 -968
- package/package.json +1 -1
- package/src/lib/components/MockupEditor.svelte +12 -28
- package/src/routes/+page.svelte +1 -33
package/README.md
CHANGED
|
@@ -5,9 +5,9 @@ A powerful mockup rendering and editing library built with Svelte 5.
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install product-
|
|
8
|
+
npm install svelte-product-mockup
|
|
9
9
|
# or
|
|
10
|
-
pnpm add product-
|
|
10
|
+
pnpm add svelte-product-mockup
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
@@ -16,8 +16,8 @@ pnpm add product-mockups
|
|
|
16
16
|
|
|
17
17
|
```svelte
|
|
18
18
|
<script>
|
|
19
|
-
import { MockupRenderer } from 'product-
|
|
20
|
-
import type { Mockup } from 'product-
|
|
19
|
+
import { MockupRenderer } from 'svelte-product-mockup';
|
|
20
|
+
import type { Mockup } from 'svelte-product-mockup';
|
|
21
21
|
|
|
22
22
|
const mockup: Mockup = {
|
|
23
23
|
id: '1',
|
|
@@ -49,35 +49,18 @@ pnpm add product-mockups
|
|
|
49
49
|
|
|
50
50
|
```svelte
|
|
51
51
|
<script>
|
|
52
|
-
import { MockupEditor
|
|
53
|
-
|
|
54
|
-
import type { Mockup } from 'product-mockups';
|
|
55
|
-
|
|
56
|
-
let mockup: Mockup = $state(createNewMockup());
|
|
57
|
-
let mockupName = $state('');
|
|
58
|
-
|
|
59
|
-
function handleMockupChange(updatedMockup: Mockup) {
|
|
60
|
-
mockup = updatedMockup;
|
|
61
|
-
}
|
|
52
|
+
import { MockupEditor } from 'svelte-product-mockup';
|
|
53
|
+
</script>
|
|
62
54
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
55
|
+
<MockupEditor>
|
|
56
|
+
<h1>My Mockup Editor</h1>
|
|
57
|
+
</MockupEditor>
|
|
58
|
+
```
|
|
66
59
|
|
|
67
|
-
|
|
68
|
-
await navigator.clipboard.writeText(JSON.stringify(mockup, null, 2));
|
|
69
|
-
}
|
|
70
|
-
</script>
|
|
60
|
+
The `MockupEditor` component manages all mockup state internally, including loading from and saving to localStorage. You can optionally pass `storageKey` and `currentMockupKey` props to customize the storage keys:
|
|
71
61
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
mockupName={mockupName}
|
|
75
|
-
onMockupChange={handleMockupChange}
|
|
76
|
-
onMockupNameChange={handleMockupNameChange}
|
|
77
|
-
onCopyConfig={handleCopyConfig}
|
|
78
|
-
storageKey={STORAGE_KEY}
|
|
79
|
-
currentMockupKey={CURRENT_MOCKUP_KEY}
|
|
80
|
-
>
|
|
62
|
+
```svelte
|
|
63
|
+
<MockupEditor storageKey="my-custom-key" currentMockupKey="my-current-key">
|
|
81
64
|
<h1>My Mockup Editor</h1>
|
|
82
65
|
</MockupEditor>
|
|
83
66
|
```
|
|
@@ -85,8 +68,8 @@ pnpm add product-mockups
|
|
|
85
68
|
### Programmatic Rendering
|
|
86
69
|
|
|
87
70
|
```typescript
|
|
88
|
-
import { renderMockupCanvas } from 'product-
|
|
89
|
-
import type { Composition } from 'product-
|
|
71
|
+
import { renderMockupCanvas } from 'svelte-product-mockup';
|
|
72
|
+
import type { Composition } from 'svelte-product-mockup';
|
|
90
73
|
|
|
91
74
|
const canvas = document.getElementById('my-canvas') as HTMLCanvasElement;
|
|
92
75
|
const composition: Composition = {
|
|
@@ -103,7 +86,8 @@ const cleanup = renderMockupCanvas(canvas, composition);
|
|
|
103
86
|
|
|
104
87
|
### Components
|
|
105
88
|
|
|
106
|
-
- `MockupEditor` - Full-featured editor component
|
|
89
|
+
- `MockupEditor` - Full-featured editor component (manages its own state)
|
|
90
|
+
- Props: `children` (snippet), `storageKey?` (string), `currentMockupKey?` (string)
|
|
107
91
|
- `MockupRenderer` - Simple renderer component
|
|
108
92
|
- `MockupEditorRenderer` - Renderer with editor features
|
|
109
93
|
- `ZoomableCanvas` - Canvas wrapper with zoom/pan
|