@finsweet/webflow-apps-utils 1.0.33 → 1.0.36
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.
|
@@ -59,6 +59,8 @@
|
|
|
59
59
|
main?: Snippet;
|
|
60
60
|
/** Preview bar content snippet */
|
|
61
61
|
previewBar?: Snippet;
|
|
62
|
+
/** Custom tabs snippet to override default tab rendering */
|
|
63
|
+
customTabs?: Snippet;
|
|
62
64
|
/** Footer content snippet */
|
|
63
65
|
footer?: Snippet;
|
|
64
66
|
}
|
|
@@ -73,6 +75,7 @@
|
|
|
73
75
|
showFooter = true,
|
|
74
76
|
showSidebar = true,
|
|
75
77
|
showTabs = true,
|
|
78
|
+
customTabs,
|
|
76
79
|
showPreviewBar = true,
|
|
77
80
|
sidebarWidth = '274px',
|
|
78
81
|
containerMode = false,
|
|
@@ -164,60 +167,64 @@
|
|
|
164
167
|
>
|
|
165
168
|
{#if showTabs}
|
|
166
169
|
<div class="navbar" data-area="navbar">
|
|
167
|
-
{#
|
|
168
|
-
{@
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
class="tab-text"
|
|
180
|
-
style="color: {activeTab !== tab.path ? 'var(--text2)' : 'var(--actionPrimaryText)'}"
|
|
170
|
+
{#if customTabs}
|
|
171
|
+
{@render customTabs()}
|
|
172
|
+
{:else}
|
|
173
|
+
{#each tabs as tab (tab.path)}
|
|
174
|
+
{@const Icon = tab.icon}
|
|
175
|
+
{@const notification = getNotification(tab.path)}
|
|
176
|
+
<button
|
|
177
|
+
class="tab"
|
|
178
|
+
class:isActive={activeTab === tab.path}
|
|
179
|
+
class:warning={notification && !notification?.success}
|
|
180
|
+
class:success={notification && notification?.success}
|
|
181
|
+
onclick={() => switchTab(tab.path)}
|
|
181
182
|
>
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
{
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
183
|
+
<Icon />
|
|
184
|
+
<span
|
|
185
|
+
class="tab-text"
|
|
186
|
+
style="color: {activeTab !== tab.path ? 'var(--text2)' : 'var(--actionPrimaryText)'}"
|
|
187
|
+
>
|
|
188
|
+
{tab.name}
|
|
189
|
+
</span>
|
|
190
|
+
|
|
191
|
+
{#if notification?.showNotification}
|
|
192
|
+
{#if notification?.success}
|
|
193
|
+
<span class="notification-pill success">
|
|
194
|
+
<CheckCircleOutlinedIcon />
|
|
195
|
+
</span>
|
|
196
|
+
{:else}
|
|
197
|
+
<Tooltip
|
|
198
|
+
message={notification?.message}
|
|
199
|
+
placement="right"
|
|
200
|
+
offsetVal={8}
|
|
201
|
+
position="fixed"
|
|
202
|
+
width="max-content"
|
|
203
|
+
>
|
|
204
|
+
{#snippet target()}
|
|
205
|
+
<div class="notification-pill warning-tooltip">
|
|
206
|
+
<WarningCircleOutlineIcon />
|
|
207
|
+
</div>
|
|
208
|
+
{/snippet}
|
|
209
|
+
</Tooltip>
|
|
210
|
+
{/if}
|
|
204
211
|
{/if}
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
{/each}
|
|
208
|
-
</div>
|
|
209
|
-
{/if}
|
|
210
|
-
|
|
211
|
-
{#if showPreviewBar && showSidebar}
|
|
212
|
-
<div class="preview-bar" data-area="preview-bar">
|
|
213
|
-
{#if previewBar}
|
|
214
|
-
{@render previewBar()}
|
|
215
|
-
{:else}
|
|
216
|
-
<div class="preview-bar-content">
|
|
217
|
-
<span>Preview: {activeTab} tab content</span>
|
|
218
|
-
</div>
|
|
212
|
+
</button>
|
|
213
|
+
{/each}
|
|
219
214
|
{/if}
|
|
220
215
|
</div>
|
|
216
|
+
|
|
217
|
+
{#if showPreviewBar && showSidebar}
|
|
218
|
+
<div class="preview-bar" data-area="preview-bar">
|
|
219
|
+
{#if previewBar}
|
|
220
|
+
{@render previewBar()}
|
|
221
|
+
{:else}
|
|
222
|
+
<div class="preview-bar-content">
|
|
223
|
+
<span>Preview: {activeTab} tab content</span>
|
|
224
|
+
</div>
|
|
225
|
+
{/if}
|
|
226
|
+
</div>
|
|
227
|
+
{/if}
|
|
221
228
|
{/if}
|
|
222
229
|
|
|
223
230
|
{#if showSidebar}
|
|
@@ -47,6 +47,8 @@ interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
47
47
|
main?: Snippet;
|
|
48
48
|
/** Preview bar content snippet */
|
|
49
49
|
previewBar?: Snippet;
|
|
50
|
+
/** Custom tabs snippet to override default tab rendering */
|
|
51
|
+
customTabs?: Snippet;
|
|
50
52
|
/** Footer content snippet */
|
|
51
53
|
footer?: Snippet;
|
|
52
54
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@finsweet/webflow-apps-utils",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.36",
|
|
4
4
|
"description": "Shared utilities for Webflow apps",
|
|
5
5
|
"homepage": "https://github.com/finsweet/webflow-apps-utils",
|
|
6
6
|
"repository": {
|
|
@@ -37,69 +37,70 @@
|
|
|
37
37
|
"svelte": "^5.0.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@changesets/changelog-git": "
|
|
41
|
-
"@changesets/cli": "
|
|
42
|
-
"@chromatic-com/storybook": "
|
|
43
|
-
"@eslint/compat": "
|
|
44
|
-
"@eslint/js": "
|
|
45
|
-
"@playwright/test": "
|
|
46
|
-
"@storybook/addon-a11y": "
|
|
47
|
-
"@storybook/addon-docs": "
|
|
48
|
-
"@storybook/addon-svelte-csf": "
|
|
49
|
-
"@storybook/addon-vitest": "
|
|
50
|
-
"@storybook/sveltekit": "
|
|
51
|
-
"@sveltejs/adapter-auto": "
|
|
52
|
-
"@sveltejs/kit": "
|
|
53
|
-
"@sveltejs/package": "
|
|
54
|
-
"@sveltejs/vite-plugin-svelte": "
|
|
55
|
-
"@testing-library/jest-dom": "
|
|
56
|
-
"@testing-library/svelte": "
|
|
57
|
-
"@testing-library/user-event": "
|
|
58
|
-
"@types/js-cookie": "
|
|
59
|
-
"@types/lodash": "
|
|
60
|
-
"@types/lodash-es": "
|
|
61
|
-
"@types/luxon": "
|
|
62
|
-
"@types/node": "
|
|
40
|
+
"@changesets/changelog-git": "0.2.1",
|
|
41
|
+
"@changesets/cli": "2.29.7",
|
|
42
|
+
"@chromatic-com/storybook": "4.1.1",
|
|
43
|
+
"@eslint/compat": "1.4.0",
|
|
44
|
+
"@eslint/js": "9.36.0",
|
|
45
|
+
"@playwright/test": "1.55.1",
|
|
46
|
+
"@storybook/addon-a11y": "9.1.8",
|
|
47
|
+
"@storybook/addon-docs": "9.1.8",
|
|
48
|
+
"@storybook/addon-svelte-csf": "5.0.8",
|
|
49
|
+
"@storybook/addon-vitest": "9.1.8",
|
|
50
|
+
"@storybook/sveltekit": "9.1.8",
|
|
51
|
+
"@sveltejs/adapter-auto": "6.1.0",
|
|
52
|
+
"@sveltejs/kit": "2.43.2",
|
|
53
|
+
"@sveltejs/package": "2.5.4",
|
|
54
|
+
"@sveltejs/vite-plugin-svelte": "5.1.1",
|
|
55
|
+
"@testing-library/jest-dom": "6.8.0",
|
|
56
|
+
"@testing-library/svelte": "5.2.8",
|
|
57
|
+
"@testing-library/user-event": "14.6.1",
|
|
58
|
+
"@types/js-cookie": "3.0.6",
|
|
59
|
+
"@types/lodash": "4.17.20",
|
|
60
|
+
"@types/lodash-es": "4.17.12",
|
|
61
|
+
"@types/luxon": "3.7.1",
|
|
62
|
+
"@types/node": "22.18.6",
|
|
63
63
|
"@vitest/browser": "3.2.3",
|
|
64
64
|
"@vitest/coverage-v8": "3.2.3",
|
|
65
|
-
"@webflow/designer-extension-typings": "
|
|
66
|
-
"eslint": "
|
|
67
|
-
"eslint-config-prettier": "
|
|
68
|
-
"eslint-plugin-simple-import-sort": "
|
|
69
|
-
"eslint-plugin-storybook": "
|
|
70
|
-
"eslint-plugin-svelte": "
|
|
71
|
-
"globals": "
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"prettier
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"svelte
|
|
79
|
-
"
|
|
80
|
-
"typescript
|
|
81
|
-
"
|
|
82
|
-
"
|
|
65
|
+
"@webflow/designer-extension-typings": "2.0.23",
|
|
66
|
+
"eslint": "9.36.0",
|
|
67
|
+
"eslint-config-prettier": "10.1.8",
|
|
68
|
+
"eslint-plugin-simple-import-sort": "12.1.1",
|
|
69
|
+
"eslint-plugin-storybook": "9.1.8",
|
|
70
|
+
"eslint-plugin-svelte": "3.12.4",
|
|
71
|
+
"globals": "16.4.0",
|
|
72
|
+
"js-yaml": "4.1.1",
|
|
73
|
+
"jsdom": "26.1.0",
|
|
74
|
+
"prettier": "3.6.2",
|
|
75
|
+
"prettier-plugin-svelte": "3.4.0",
|
|
76
|
+
"publint": "0.3.13",
|
|
77
|
+
"storybook": "9.1.8",
|
|
78
|
+
"svelte": "5.39.5",
|
|
79
|
+
"svelte-check": "4.3.2",
|
|
80
|
+
"typescript": "5.9.2",
|
|
81
|
+
"typescript-eslint": "8.44.1",
|
|
82
|
+
"vite": "7.1.7",
|
|
83
|
+
"vitest": "3.2.4"
|
|
83
84
|
},
|
|
84
85
|
"keywords": [
|
|
85
86
|
"svelte"
|
|
86
87
|
],
|
|
87
88
|
"dependencies": {
|
|
88
|
-
"@floating-ui/dom": "
|
|
89
|
-
"cheerio": "
|
|
90
|
-
"copy-text-to-clipboard": "
|
|
91
|
-
"csv-parse": "
|
|
92
|
-
"js-cookie": "
|
|
93
|
-
"just-debounce": "
|
|
94
|
-
"lodash": "
|
|
95
|
-
"lodash-es": "
|
|
96
|
-
"luxon": "
|
|
97
|
-
"motion": "
|
|
98
|
-
"svelte-routing": "
|
|
99
|
-
"swiper": "
|
|
100
|
-
"terser": "
|
|
101
|
-
"uuid": "
|
|
102
|
-
"zod": "
|
|
89
|
+
"@floating-ui/dom": "1.7.4",
|
|
90
|
+
"cheerio": "1.1.2",
|
|
91
|
+
"copy-text-to-clipboard": "3.2.2",
|
|
92
|
+
"csv-parse": "5.6.0",
|
|
93
|
+
"js-cookie": "3.0.5",
|
|
94
|
+
"just-debounce": "1.1.0",
|
|
95
|
+
"lodash": "4.17.21",
|
|
96
|
+
"lodash-es": "4.17.21",
|
|
97
|
+
"luxon": "3.7.2",
|
|
98
|
+
"motion": "10.18.0",
|
|
99
|
+
"svelte-routing": "2.13.0",
|
|
100
|
+
"swiper": "11.2.10",
|
|
101
|
+
"terser": "5.44.0",
|
|
102
|
+
"uuid": "11.1.0",
|
|
103
|
+
"zod": "3.25.76"
|
|
103
104
|
},
|
|
104
105
|
"scripts": {
|
|
105
106
|
"dev": "vite dev",
|