fluid-ui-svelte 0.3.3 → 0.3.4
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/dist/base/Image.svelte +1 -0
- package/dist/base/List.svelte +3 -3
- package/dist/base/List.svelte.d.ts +1 -1
- package/dist/components/Carousel.svelte +1 -1
- package/dist/components/Page.svelte +3 -1
- package/package.json +1 -1
- package/dist/utilities/codeBlockContents.d.ts +0 -15
- package/dist/utilities/codeBlockContents.js +0 -290
package/dist/base/Image.svelte
CHANGED
package/dist/base/List.svelte
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
}: {
|
|
15
15
|
type?: 'ol' | 'ul';
|
|
16
16
|
items: Array<T>;
|
|
17
|
-
itemTemplate: Snippet<[T]>;
|
|
17
|
+
itemTemplate: Snippet<[T, number]>;
|
|
18
18
|
class?: string;
|
|
19
19
|
itemClass?: string;
|
|
20
20
|
overrideDefaultStyling?: boolean;
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
{...rest}
|
|
32
32
|
class={mergeClasses(className, overrideDefaultStyling ? '' : classes[type])}
|
|
33
33
|
>
|
|
34
|
-
{#each items as item}
|
|
34
|
+
{#each items as item, index}
|
|
35
35
|
<li class={mergeClasses(itemClass, overrideDefaultStyling ? '' : classes[type] + '-item')}>
|
|
36
|
-
{@render itemTemplate(item)}
|
|
36
|
+
{@render itemTemplate(item, index)}
|
|
37
37
|
</li>
|
|
38
38
|
{/each}
|
|
39
39
|
</svelte:element>
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
}
|
|
67
67
|
: undefined}
|
|
68
68
|
class={mergeClasses(
|
|
69
|
-
`fluid-carousel-container ${swipeable ? 'touch-none' : ''} ${orientation === 'vertical' ? 'h-full flex-col overflow-y-auto' : '
|
|
69
|
+
`fluid-carousel-container ${swipeable ? 'touch-none' : ''} ${orientation === 'vertical' ? 'h-full flex-col overflow-y-auto' : 'overflow-x-auto'}`,
|
|
70
70
|
variant
|
|
71
71
|
)}
|
|
72
72
|
>
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
import { Container } from '../base/index.js';
|
|
3
3
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
4
|
import type { Snippet } from 'svelte';
|
|
5
|
+
import { mergeClasses } from '../utilities/common.js';
|
|
5
6
|
|
|
6
7
|
const {
|
|
7
8
|
title = '',
|
|
8
9
|
description = '',
|
|
10
|
+
class: className = '',
|
|
9
11
|
children,
|
|
10
12
|
...rest
|
|
11
13
|
}: {
|
|
@@ -21,6 +23,6 @@
|
|
|
21
23
|
<meta name="description" content={description} />
|
|
22
24
|
</svelte:head>
|
|
23
25
|
|
|
24
|
-
<Container class=
|
|
26
|
+
<Container class={mergeClasses(className, 'fluid-page')} type="main" {...rest}>
|
|
25
27
|
{@render children?.()}
|
|
26
28
|
</Container>
|
package/package.json
CHANGED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const codeBlockContents: {
|
|
2
|
-
gettingStartedAppCss: string;
|
|
3
|
-
gettingStartedUsage: string;
|
|
4
|
-
drawerBasicUsage: string;
|
|
5
|
-
drawerPositions: string;
|
|
6
|
-
drawerAnimated: string;
|
|
7
|
-
drawerFlyAnimation: string;
|
|
8
|
-
calendarSingle: string;
|
|
9
|
-
calendarDual: string;
|
|
10
|
-
calendarSixMonth: string;
|
|
11
|
-
calendarRange: string;
|
|
12
|
-
calendarMulti: string;
|
|
13
|
-
carouselInteractive: string;
|
|
14
|
-
carouselUsage: string;
|
|
15
|
-
};
|
|
@@ -1,290 +0,0 @@
|
|
|
1
|
-
// Parsing errors happen in code editor when imports and script tags used inside code block component's contents.
|
|
2
|
-
// To prevent this we import usage examples from here.
|
|
3
|
-
const gettingStartedAppCss = `// src/routes/+layout.svelte
|
|
4
|
-
import '../app.css';`;
|
|
5
|
-
const gettingStartedUsage = `<script>
|
|
6
|
-
// Import a base element for custom implementation
|
|
7
|
-
import { Button } from 'fluid-ui-svelte/base';
|
|
8
|
-
|
|
9
|
-
// Import a pre-built component
|
|
10
|
-
import { Accordion } from 'fluid-ui-svelte/components';
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<Button onclick={handleClick}>Submit</Button>
|
|
14
|
-
|
|
15
|
-
<Accordion>
|
|
16
|
-
<!-- Accordion content -->
|
|
17
|
-
</Accordion>`;
|
|
18
|
-
const drawerBasicUsage = `<script>
|
|
19
|
-
import { Drawer } from 'fluid-ui-svelte/components';
|
|
20
|
-
import { Button, Text } from 'fluid-ui-svelte/base';
|
|
21
|
-
|
|
22
|
-
let isBasicDrawerOpen = $state(false);
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<Button onclick={async () => isBasicDrawerOpen = true}>Open Drawer</Button>
|
|
26
|
-
|
|
27
|
-
<Drawer bind:isOpen={isBasicDrawerOpen} position="left">
|
|
28
|
-
<div class="flex flex-col gap-4">
|
|
29
|
-
<Text type="h2">Drawer Content</Text>
|
|
30
|
-
<Text>This is some content inside the drawer.</Text>
|
|
31
|
-
<Button onclick={async () => isBasicDrawerOpen = false}>Close</Button>
|
|
32
|
-
</div>
|
|
33
|
-
</Drawer>`;
|
|
34
|
-
const drawerPositions = `<script>
|
|
35
|
-
import { Drawer } from 'fluid-ui-svelte/components';
|
|
36
|
-
let left = $state(false);
|
|
37
|
-
let right = $state(false);
|
|
38
|
-
let top = $state(false);
|
|
39
|
-
let bottom = $state(false);
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
|
-
<Button onclick={async () => left = true}>Left</Button>
|
|
43
|
-
<Button onclick={async () => right = true}>Right</Button>
|
|
44
|
-
<Button onclick={async () => top = true}>Top</Button>
|
|
45
|
-
<Button onclick={async () => bottom = true}>Bottom</Button>
|
|
46
|
-
|
|
47
|
-
<Drawer bind:isOpen={left} position="left">Left Drawer</Drawer>
|
|
48
|
-
<Drawer bind:isOpen={right} position="right">Right Drawer</Drawer>
|
|
49
|
-
<Drawer bind:isOpen={top} position="top">Top Drawer</Drawer>
|
|
50
|
-
<Drawer bind:isOpen={bottom} position="bottom">Bottom Drawer</Drawer>`;
|
|
51
|
-
const drawerAnimated = `<script>
|
|
52
|
-
import { Drawer } from 'fluid-ui-svelte/components';
|
|
53
|
-
import { fly, fade } from 'svelte/transition';
|
|
54
|
-
|
|
55
|
-
let isAnimatedDrawerOpen = $state(false);
|
|
56
|
-
</script>
|
|
57
|
-
|
|
58
|
-
<Button onclick={async () => isAnimatedDrawerOpen = true}>Open Animated</Button>
|
|
59
|
-
|
|
60
|
-
<Drawer
|
|
61
|
-
bind:isOpen={isAnimatedDrawerOpen}
|
|
62
|
-
position="right"
|
|
63
|
-
transitionFn={fly}
|
|
64
|
-
transitionParams={{ x: 500, duration: 500 }}
|
|
65
|
-
backdropTransitionFn={fade}
|
|
66
|
-
>
|
|
67
|
-
Animated Content
|
|
68
|
-
</Drawer>`;
|
|
69
|
-
const drawerFlyAnimation = `<script>
|
|
70
|
-
import { Drawer } from 'fluid-ui-svelte/components';
|
|
71
|
-
import { fly } from 'svelte/transition';
|
|
72
|
-
|
|
73
|
-
let isFlyDrawerOpen = $state(false);
|
|
74
|
-
</script>
|
|
75
|
-
|
|
76
|
-
<Button onclick={async () => isFlyDrawerOpen = true}>Open Fly Drawer</Button>
|
|
77
|
-
|
|
78
|
-
<Drawer
|
|
79
|
-
bind:isOpen={isFlyDrawerOpen}
|
|
80
|
-
position="bottom"
|
|
81
|
-
transitionFn={fly}
|
|
82
|
-
transitionParams={{ y: 200, duration: 800 }}
|
|
83
|
-
>
|
|
84
|
-
Fly Content
|
|
85
|
-
</Drawer>`;
|
|
86
|
-
const calendarSingle = `<script>
|
|
87
|
-
import { Calendar } from 'fluid-ui-svelte/components';
|
|
88
|
-
import { Button, Container } from 'fluid-ui-svelte/base';
|
|
89
|
-
|
|
90
|
-
let currentDate = $state(new Date().toISOString());
|
|
91
|
-
|
|
92
|
-
const changeMonth = (increment: number) => {
|
|
93
|
-
const date = new Date(currentDate);
|
|
94
|
-
date.setMonth(date.getMonth() + increment);
|
|
95
|
-
currentDate = date.toISOString();
|
|
96
|
-
};
|
|
97
|
-
</script>
|
|
98
|
-
|
|
99
|
-
<Container class="flex flex-col gap-4">
|
|
100
|
-
<Container class="flex gap-2">
|
|
101
|
-
<Button onclick={() => changeMonth(-1)}>Prev</Button>
|
|
102
|
-
<Button onclick={() => changeMonth(1)}>Next</Button>
|
|
103
|
-
</Container>
|
|
104
|
-
<Calendar bind:currentDate componentId="calendar-single" />
|
|
105
|
-
</Container>`;
|
|
106
|
-
const calendarDual = `<script>
|
|
107
|
-
import { Calendar } from 'fluid-ui-svelte/components';
|
|
108
|
-
import { Button, Container } from 'fluid-ui-svelte/base';
|
|
109
|
-
|
|
110
|
-
let baseDate = $state(new Date().toISOString());
|
|
111
|
-
|
|
112
|
-
// Helper to get next month relative to base
|
|
113
|
-
const getOffsetDate = (offset: number) => {
|
|
114
|
-
const d = new Date(baseDate);
|
|
115
|
-
d.setMonth(d.getMonth() + offset);
|
|
116
|
-
return d.toISOString();
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
const changeMonth = (increment: number) => {
|
|
120
|
-
const d = new Date(baseDate);
|
|
121
|
-
d.setMonth(d.getMonth() + increment);
|
|
122
|
-
baseDate = d.toISOString();
|
|
123
|
-
};
|
|
124
|
-
</script>
|
|
125
|
-
|
|
126
|
-
<Container class="flex flex-col gap-4">
|
|
127
|
-
<Container class="flex gap-2">
|
|
128
|
-
<Button onclick={() => changeMonth(-1)}>Prev</Button>
|
|
129
|
-
<Button onclick={() => changeMonth(1)}>Next</Button>
|
|
130
|
-
</Container>
|
|
131
|
-
<Container class="flex gap-8 flex-wrap">
|
|
132
|
-
<Calendar currentDate={baseDate} componentId="cal-1" />
|
|
133
|
-
<Calendar currentDate={getOffsetDate(1)} componentId="cal-2" />
|
|
134
|
-
</Container>
|
|
135
|
-
</Container>`;
|
|
136
|
-
const calendarSixMonth = `<script>
|
|
137
|
-
import { Calendar } from 'fluid-ui-svelte/components';
|
|
138
|
-
import { Button, Container } from 'fluid-ui-svelte/base';
|
|
139
|
-
|
|
140
|
-
let baseDate = $state(new Date().toISOString());
|
|
141
|
-
|
|
142
|
-
const getOffsetDate = (offset: number) => {
|
|
143
|
-
const d = new Date(baseDate);
|
|
144
|
-
d.setMonth(d.getMonth() + offset);
|
|
145
|
-
return d.toISOString();
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
const changeMonth = (increment: number) => {
|
|
149
|
-
const d = new Date(baseDate);
|
|
150
|
-
d.setMonth(d.getMonth() + increment);
|
|
151
|
-
baseDate = d.toISOString();
|
|
152
|
-
};
|
|
153
|
-
</script>
|
|
154
|
-
|
|
155
|
-
<Container class="flex flex-col gap-4">
|
|
156
|
-
<Container class="flex gap-2">
|
|
157
|
-
<Button onclick={() => changeMonth(-1)}>Prev</Button>
|
|
158
|
-
<Button onclick={() => changeMonth(1)}>Next</Button>
|
|
159
|
-
</Container>
|
|
160
|
-
<Container class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
161
|
-
{#each Array(6) as _, i}
|
|
162
|
-
<Calendar currentDate={getOffsetDate(i)} componentId="cal-{i}" />
|
|
163
|
-
{/each}
|
|
164
|
-
</Container>
|
|
165
|
-
</Container>`;
|
|
166
|
-
const calendarRange = `<script>
|
|
167
|
-
import { Calendar } from 'fluid-ui-svelte/components';
|
|
168
|
-
import { Button, Container, Text } from 'fluid-ui-svelte/base';
|
|
169
|
-
|
|
170
|
-
let baseDate = $state(new Date().toISOString());
|
|
171
|
-
let startDate = $state<string>();
|
|
172
|
-
let endDate = $state<string>();
|
|
173
|
-
|
|
174
|
-
const getOffsetDate = (offset: number) => {
|
|
175
|
-
const d = new Date(baseDate);
|
|
176
|
-
d.setMonth(d.getMonth() + offset);
|
|
177
|
-
return d.toISOString();
|
|
178
|
-
};
|
|
179
|
-
|
|
180
|
-
const changeMonth = (inc: number) => {
|
|
181
|
-
const d = new Date(baseDate);
|
|
182
|
-
d.setMonth(d.getMonth() + inc);
|
|
183
|
-
baseDate = d.toISOString();
|
|
184
|
-
};
|
|
185
|
-
</script>
|
|
186
|
-
|
|
187
|
-
<Container class="flex flex-col gap-4">
|
|
188
|
-
<Container class="flex justify-between items-center">
|
|
189
|
-
<Container class="flex gap-2">
|
|
190
|
-
<Button onclick={() => changeMonth(-1)}>Prev</Button>
|
|
191
|
-
<Button onclick={() => changeMonth(1)}>Next</Button>
|
|
192
|
-
</Container>
|
|
193
|
-
<Text class="text-sm font-mono">
|
|
194
|
-
{startDate || '...'} to {endDate || '...'}
|
|
195
|
-
</Text>
|
|
196
|
-
</Container>
|
|
197
|
-
|
|
198
|
-
<Container class="flex gap-8 flex-wrap">
|
|
199
|
-
<Calendar
|
|
200
|
-
currentDate={baseDate}
|
|
201
|
-
bind:startDate
|
|
202
|
-
bind:endDate
|
|
203
|
-
componentId="cal-range-1"
|
|
204
|
-
/>
|
|
205
|
-
<Calendar
|
|
206
|
-
currentDate={getOffsetDate(1)}
|
|
207
|
-
bind:startDate
|
|
208
|
-
bind:endDate
|
|
209
|
-
componentId="cal-range-2"
|
|
210
|
-
/>
|
|
211
|
-
</Container>
|
|
212
|
-
</Container>`;
|
|
213
|
-
const calendarMulti = `<script>
|
|
214
|
-
import { Calendar } from 'fluid-ui-svelte/components';
|
|
215
|
-
import { Button, Container } from 'fluid-ui-svelte/base';
|
|
216
|
-
|
|
217
|
-
const multiCalendarState = $state({
|
|
218
|
-
currentDate: new Date().toISOString(),
|
|
219
|
-
startDate: '',
|
|
220
|
-
endDate: ''
|
|
221
|
-
});
|
|
222
|
-
|
|
223
|
-
const changeMonthMulti = (inc: number) => {
|
|
224
|
-
const d = new Date(multiCalendarState.currentDate);
|
|
225
|
-
d.setMonth(d.getMonth() + inc);
|
|
226
|
-
multiCalendarState.currentDate = d.toISOString();
|
|
227
|
-
};
|
|
228
|
-
</script>
|
|
229
|
-
|
|
230
|
-
<Container class="flex flex-col gap-4">
|
|
231
|
-
<Container class="flex gap-2">
|
|
232
|
-
<Button onclick={() => changeMonthMulti(-1)}>Prev</Button>
|
|
233
|
-
<Button onclick={() => changeMonthMulti(1)}>Next</Button>
|
|
234
|
-
</Container>
|
|
235
|
-
|
|
236
|
-
<Container class="flex gap-8 flex-wrap">
|
|
237
|
-
<Calendar
|
|
238
|
-
bind:currentDate={multiCalendarState.currentDate}
|
|
239
|
-
bind:startDate={multiCalendarState.startDate}
|
|
240
|
-
bind:endDate={multiCalendarState.endDate}
|
|
241
|
-
/>
|
|
242
|
-
<Calendar
|
|
243
|
-
currentDate={new Date(new Date(multiCalendarState.currentDate).setMonth(new Date(multiCalendarState.currentDate).getMonth() + 1)).toISOString()}
|
|
244
|
-
bind:startDate={multiCalendarState.startDate}
|
|
245
|
-
bind:endDate={multiCalendarState.endDate}
|
|
246
|
-
/>
|
|
247
|
-
</Container>
|
|
248
|
-
</Container>`;
|
|
249
|
-
const carouselInteractive = `<script>
|
|
250
|
-
import { Carousel } from 'fluid-ui-svelte/components';
|
|
251
|
-
const items = [...];
|
|
252
|
-
</script>
|
|
253
|
-
|
|
254
|
-
<Carousel {items} componentId="demo-id">
|
|
255
|
-
{#snippet itemTemplate({ item })}
|
|
256
|
-
<div class="h-64 flex items-center justify-center">
|
|
257
|
-
{item.text}
|
|
258
|
-
</div>
|
|
259
|
-
{/snippet}
|
|
260
|
-
</Carousel>`;
|
|
261
|
-
const carouselUsage = `<script>
|
|
262
|
-
import { Carousel } from 'fluid-ui-svelte/components';
|
|
263
|
-
const items = [...];
|
|
264
|
-
let activeIndex = $state(0);
|
|
265
|
-
</script>
|
|
266
|
-
|
|
267
|
-
<Carousel {items} bind:activeIndex>
|
|
268
|
-
{#snippet itemTemplate({ item, index, internalState })}
|
|
269
|
-
<div class="h-64">
|
|
270
|
-
{item.name}
|
|
271
|
-
<!-- Delta available for custom animations -->
|
|
272
|
-
<span>Delta: {internalState.movementDelta}</span>
|
|
273
|
-
</div>
|
|
274
|
-
{/snippet}
|
|
275
|
-
</Carousel>`;
|
|
276
|
-
export const codeBlockContents = {
|
|
277
|
-
gettingStartedAppCss,
|
|
278
|
-
gettingStartedUsage,
|
|
279
|
-
drawerBasicUsage,
|
|
280
|
-
drawerPositions,
|
|
281
|
-
drawerAnimated,
|
|
282
|
-
drawerFlyAnimation,
|
|
283
|
-
calendarSingle,
|
|
284
|
-
calendarDual,
|
|
285
|
-
calendarSixMonth,
|
|
286
|
-
calendarRange,
|
|
287
|
-
calendarMulti,
|
|
288
|
-
carouselInteractive,
|
|
289
|
-
carouselUsage
|
|
290
|
-
};
|