@likable-hair/svelte 0.0.26 → 0.0.29
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/common/MediaQuery.svelte +30 -0
- package/common/MediaQuery.svelte.d.ts +24 -11
- package/dialogs/Dialog.svelte +96 -0
- package/dialogs/Dialog.svelte.d.ts +25 -0
- package/index.d.ts +3 -1
- package/index.js +4 -1
- package/media/Gallery.svelte +111 -0
- package/media/Gallery.svelte.d.ts +26 -0
- package/media/Image.svelte +1 -0
- package/media/Image.svelte.d.ts +2 -0
- package/media/ImageGrid.svelte +17 -5
- package/media/ImageGrid.svelte.d.ts +11 -5
- package/navigation/{BreadCrumb.svelte.d.ts → Breadcrumb.svelte.d.ts} +4 -4
- package/navigation/TabSwitcher.svelte +5 -0
- package/package.json +3 -1
- package/stores/mediaQuery.js +119 -9
- package/timeline/SimpleTimeLine.svelte +21 -6
- package/timeline/SimpleTimeLine.svelte.d.ts +4 -0
package/common/MediaQuery.svelte
CHANGED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script >import mediaQuery from "../stores/mediaQuery";
|
|
2
|
+
$: xsAndDown = $mediaQuery.xs;
|
|
3
|
+
$: sAndDown = $mediaQuery.s || $mediaQuery.xs;
|
|
4
|
+
$: mAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m;
|
|
5
|
+
$: lAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m || $mediaQuery.l;
|
|
6
|
+
$: xlAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m || $mediaQuery.l || $mediaQuery.xl;
|
|
7
|
+
$: xlAndUp = $mediaQuery.xl;
|
|
8
|
+
$: lAndUp = $mediaQuery.xl || $mediaQuery.l;
|
|
9
|
+
$: mAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m;
|
|
10
|
+
$: sAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m || $mediaQuery.s || $mediaQuery.xs;
|
|
11
|
+
$: xsAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m || $mediaQuery.s || $mediaQuery.xs;
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<slot
|
|
15
|
+
xs={$mediaQuery.xs}
|
|
16
|
+
s={$mediaQuery.s}
|
|
17
|
+
m={$mediaQuery.m}
|
|
18
|
+
l={$mediaQuery.l}
|
|
19
|
+
xl={$mediaQuery.xl}
|
|
20
|
+
xsAndDown={xsAndDown}
|
|
21
|
+
sAndDown={sAndDown}
|
|
22
|
+
mAndDown={mAndDown}
|
|
23
|
+
lAndDown={lAndDown}
|
|
24
|
+
xlAndDown={xlAndDown}
|
|
25
|
+
xlAndUp={xlAndUp}
|
|
26
|
+
lAndUp={lAndUp}
|
|
27
|
+
mAndUp={mAndUp}
|
|
28
|
+
sAndUp={sAndUp}
|
|
29
|
+
xsAndUp={xsAndUp}
|
|
30
|
+
></slot>
|
|
@@ -1,19 +1,32 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} MediaQueryProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} MediaQueryEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} MediaQuerySlots */
|
|
4
|
-
export default class MediaQuery extends SvelteComponentTyped<{}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> {
|
|
7
|
-
}
|
|
8
|
-
export type MediaQueryProps = typeof __propDef.props;
|
|
9
|
-
export type MediaQueryEvents = typeof __propDef.events;
|
|
10
|
-
export type MediaQuerySlots = typeof __propDef.slots;
|
|
11
1
|
import { SvelteComponentTyped } from "svelte";
|
|
12
2
|
declare const __propDef: {
|
|
13
3
|
props: {};
|
|
14
4
|
events: {
|
|
15
5
|
[evt: string]: CustomEvent<any>;
|
|
16
6
|
};
|
|
17
|
-
slots: {
|
|
7
|
+
slots: {
|
|
8
|
+
default: {
|
|
9
|
+
xs: boolean;
|
|
10
|
+
s: boolean;
|
|
11
|
+
m: boolean;
|
|
12
|
+
l: boolean;
|
|
13
|
+
xl: boolean;
|
|
14
|
+
xsAndDown: boolean;
|
|
15
|
+
sAndDown: boolean;
|
|
16
|
+
mAndDown: boolean;
|
|
17
|
+
lAndDown: boolean;
|
|
18
|
+
xlAndDown: boolean;
|
|
19
|
+
xlAndUp: boolean;
|
|
20
|
+
lAndUp: boolean;
|
|
21
|
+
mAndUp: boolean;
|
|
22
|
+
sAndUp: boolean;
|
|
23
|
+
xsAndUp: boolean;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
18
26
|
};
|
|
27
|
+
export declare type MediaQueryProps = typeof __propDef.props;
|
|
28
|
+
export declare type MediaQueryEvents = typeof __propDef.events;
|
|
29
|
+
export declare type MediaQuerySlots = typeof __propDef.slots;
|
|
30
|
+
export default class MediaQuery extends SvelteComponentTyped<MediaQueryProps, MediaQueryEvents, MediaQuerySlots> {
|
|
31
|
+
}
|
|
19
32
|
export {};
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<script >import { beforeUpdate, onMount } from "svelte";
|
|
2
|
+
export let open = false, overlayOpacity = "30%", overlayColor = "#282828";
|
|
3
|
+
let zIndex = 50, localOpen = open;
|
|
4
|
+
beforeUpdate(() => {
|
|
5
|
+
if (open && localOpen != open) {
|
|
6
|
+
let otherDialog = document.querySelector("[data-dialog]");
|
|
7
|
+
if (!!otherDialog) {
|
|
8
|
+
zIndex = Number(otherDialog.style.zIndex) + 2;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
localOpen = open;
|
|
12
|
+
});
|
|
13
|
+
function closeDialog() {
|
|
14
|
+
open = false;
|
|
15
|
+
localOpen = false;
|
|
16
|
+
}
|
|
17
|
+
function handleOverlayClick() {
|
|
18
|
+
closeDialog();
|
|
19
|
+
}
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<div
|
|
23
|
+
style:z-index={zIndex}
|
|
24
|
+
style:--dialog-overlay-opacity={overlayOpacity}
|
|
25
|
+
style:display="flex"
|
|
26
|
+
style:align-items="center"
|
|
27
|
+
style:justify-content="space-between"
|
|
28
|
+
class="overlay-container"
|
|
29
|
+
class:overlay-container-active={localOpen}
|
|
30
|
+
on:touchmove|preventDefault={() => {}}
|
|
31
|
+
on:wheel|preventDefault={() => {}}
|
|
32
|
+
>
|
|
33
|
+
<div
|
|
34
|
+
style:background-color={overlayColor}
|
|
35
|
+
class="overlay"
|
|
36
|
+
class:overlay-active={localOpen}
|
|
37
|
+
on:click={handleOverlayClick}
|
|
38
|
+
></div>
|
|
39
|
+
{#if localOpen }
|
|
40
|
+
<div
|
|
41
|
+
style:position="absolute"
|
|
42
|
+
style:top="0px"
|
|
43
|
+
style:right="0px"
|
|
44
|
+
style:z-index={zIndex + 1}
|
|
45
|
+
>
|
|
46
|
+
<slot name="top-right"></slot>
|
|
47
|
+
</div>
|
|
48
|
+
<div
|
|
49
|
+
style:z-index={zIndex + 1}
|
|
50
|
+
on:click|stopPropagation
|
|
51
|
+
>
|
|
52
|
+
<slot name="center-left"></slot>
|
|
53
|
+
</div>
|
|
54
|
+
<div
|
|
55
|
+
on:click|stopPropagation
|
|
56
|
+
style:z-index={zIndex + 1}
|
|
57
|
+
>
|
|
58
|
+
<slot></slot>
|
|
59
|
+
</div>
|
|
60
|
+
<div
|
|
61
|
+
style:z-index={zIndex + 1}
|
|
62
|
+
on:click|stopPropagation
|
|
63
|
+
>
|
|
64
|
+
<slot name="center-right"></slot>
|
|
65
|
+
</div>
|
|
66
|
+
{/if}
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<style>
|
|
70
|
+
.overlay-container {
|
|
71
|
+
height: 0;
|
|
72
|
+
width: 0;
|
|
73
|
+
position: fixed;
|
|
74
|
+
top: 0px;
|
|
75
|
+
left: 0px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.overlay-container-active {
|
|
79
|
+
height: 100vh;
|
|
80
|
+
width: 100vw;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.overlay {
|
|
84
|
+
position: absolute;
|
|
85
|
+
width: 100%;
|
|
86
|
+
height: 100%;
|
|
87
|
+
top: 0px;
|
|
88
|
+
left: 0px;
|
|
89
|
+
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
90
|
+
opacity: 0%;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.overlay-active {
|
|
94
|
+
opacity: var(--dialog-overlay-opacity);
|
|
95
|
+
}
|
|
96
|
+
</style>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
open?: boolean;
|
|
5
|
+
overlayOpacity?: string;
|
|
6
|
+
overlayColor?: string;
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
click: MouseEvent;
|
|
10
|
+
} & {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
};
|
|
13
|
+
slots: {
|
|
14
|
+
'top-right': {};
|
|
15
|
+
'center-left': {};
|
|
16
|
+
default: {};
|
|
17
|
+
'center-right': {};
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export declare type DialogProps = typeof __propDef.props;
|
|
21
|
+
export declare type DialogEvents = typeof __propDef.events;
|
|
22
|
+
export declare type DialogSlots = typeof __propDef.slots;
|
|
23
|
+
export default class Dialog extends SvelteComponentTyped<DialogProps, DialogEvents, DialogSlots> {
|
|
24
|
+
}
|
|
25
|
+
export {};
|
package/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { default as Button } from './buttons/Button.svelte';
|
|
|
2
2
|
export { default as Card } from './common/Card.svelte';
|
|
3
3
|
export { default as Gesture } from './common/Gesture.svelte';
|
|
4
4
|
export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
|
|
5
|
+
export { default as MediaQuery } from './common/MediaQuery.svelte';
|
|
5
6
|
export { default as TextField } from './forms/Textfield.svelte';
|
|
6
7
|
export { default as Skeleton } from './loaders/Skeleton.svelte';
|
|
7
8
|
export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';
|
|
@@ -11,7 +12,7 @@ export { default as DescriptiveAvatar } from './media/DescriptiveAvatar.svelte';
|
|
|
11
12
|
export { default as Icon } from './media/Icon.svelte';
|
|
12
13
|
export { default as Image } from './media/Image.svelte';
|
|
13
14
|
export { default as ImageGrid } from './media/ImageGrid.svelte';
|
|
14
|
-
export { default as
|
|
15
|
+
export { default as Breadcrumb } from './navigation/Breadcrumb.svelte';
|
|
15
16
|
export { default as HeaderMenu } from './navigation/HeaderMenu.svelte';
|
|
16
17
|
export { default as Navigator } from './navigation/Navigator.svelte';
|
|
17
18
|
export { default as TabSwitcher } from './navigation/TabSwitcher.svelte';
|
|
@@ -19,5 +20,6 @@ export { default as Drawer } from './navigation/Drawer.svelte';
|
|
|
19
20
|
export { default as ProgressBar } from './progress/ProgressBar.svelte';
|
|
20
21
|
export { default as ProductCard } from './shop/ProductCard.svelte';
|
|
21
22
|
export { default as ProductGrid } from './shop/ProductCard.svelte';
|
|
23
|
+
export { default as mediaQueryStore } from './stores/mediaQuery';
|
|
22
24
|
export { default as ScollTimeLine } from './timeline/ScrollTimeLine.svelte';
|
|
23
25
|
export { default as SimpleTimeLine } from './timeline/SimpleTimeLine.svelte';
|
package/index.js
CHANGED
|
@@ -4,6 +4,7 @@ export { default as Button } from './buttons/Button.svelte';
|
|
|
4
4
|
export { default as Card } from './common/Card.svelte';
|
|
5
5
|
export { default as Gesture } from './common/Gesture.svelte';
|
|
6
6
|
export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
|
|
7
|
+
export { default as MediaQuery } from './common/MediaQuery.svelte';
|
|
7
8
|
// forms
|
|
8
9
|
export { default as TextField } from './forms/Textfield.svelte';
|
|
9
10
|
// loaders
|
|
@@ -17,7 +18,7 @@ export { default as Icon } from './media/Icon.svelte';
|
|
|
17
18
|
export { default as Image } from './media/Image.svelte';
|
|
18
19
|
export { default as ImageGrid } from './media/ImageGrid.svelte';
|
|
19
20
|
// navigation
|
|
20
|
-
export { default as
|
|
21
|
+
export { default as Breadcrumb } from './navigation/Breadcrumb.svelte';
|
|
21
22
|
export { default as HeaderMenu } from './navigation/HeaderMenu.svelte';
|
|
22
23
|
export { default as Navigator } from './navigation/Navigator.svelte';
|
|
23
24
|
export { default as TabSwitcher } from './navigation/TabSwitcher.svelte';
|
|
@@ -27,6 +28,8 @@ export { default as ProgressBar } from './progress/ProgressBar.svelte';
|
|
|
27
28
|
// shop
|
|
28
29
|
export { default as ProductCard } from './shop/ProductCard.svelte';
|
|
29
30
|
export { default as ProductGrid } from './shop/ProductCard.svelte';
|
|
31
|
+
// store
|
|
32
|
+
export { default as mediaQueryStore } from './stores/mediaQuery';
|
|
30
33
|
// timeline
|
|
31
34
|
export { default as ScollTimeLine } from './timeline/ScrollTimeLine.svelte';
|
|
32
35
|
export { default as SimpleTimeLine } from './timeline/SimpleTimeLine.svelte';
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
<script context="module"></script>
|
|
2
|
+
|
|
3
|
+
<script >export let images = [], columns = undefined, imageMaxWidth = undefined, imageMinWidth = undefined, imageMaxHeight = undefined, imageMinHeight = undefined, imageHeight = undefined, imageWidth = undefined, disableHover = false, dark = false;
|
|
4
|
+
let selectedIndex = undefined, selectedImage = undefined;
|
|
5
|
+
function handleImageClick(e) {
|
|
6
|
+
selectedIndex = e.detail.index;
|
|
7
|
+
}
|
|
8
|
+
$: if (selectedIndex !== undefined && selectedIndex !== null) {
|
|
9
|
+
selectedImage = images[selectedIndex];
|
|
10
|
+
}
|
|
11
|
+
function switchNext() {
|
|
12
|
+
if (selectedIndex < (images.length - 1)) {
|
|
13
|
+
selectedIndex++;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
function switchPrevious() {
|
|
17
|
+
if (selectedIndex > 0) {
|
|
18
|
+
selectedIndex--;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
function handleSwipe(e) {
|
|
22
|
+
if (e.detail.direction == 'right') {
|
|
23
|
+
switchPrevious();
|
|
24
|
+
}
|
|
25
|
+
else if (e.detail.direction == 'left') {
|
|
26
|
+
switchNext();
|
|
27
|
+
}
|
|
28
|
+
else if (e.detail.direction == 'down') {
|
|
29
|
+
selectedIndex = undefined;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
import ImageGrid from "./ImageGrid.svelte";
|
|
33
|
+
import ImageComponent from "./Image.svelte";
|
|
34
|
+
import Dialog from "../dialogs/Dialog.svelte";
|
|
35
|
+
import Button from "../buttons/Button.svelte";
|
|
36
|
+
import MediaQuery from "../common/MediaQuery.svelte";
|
|
37
|
+
import Gesture from "../common/Gesture.svelte";
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<ImageGrid
|
|
41
|
+
images={images}
|
|
42
|
+
columns={columns}
|
|
43
|
+
imageMaxWidth={imageMaxWidth}
|
|
44
|
+
imageMinWidth={imageMinWidth}
|
|
45
|
+
imageMaxHeight={imageMaxHeight}
|
|
46
|
+
imageMinHeight={imageMinHeight}
|
|
47
|
+
imageHeight={imageHeight}
|
|
48
|
+
imageWidth={imageWidth}
|
|
49
|
+
disableHover={disableHover}
|
|
50
|
+
dark={dark}
|
|
51
|
+
on:image-click={handleImageClick}
|
|
52
|
+
/>
|
|
53
|
+
|
|
54
|
+
<Gesture
|
|
55
|
+
on:swipe={handleSwipe}
|
|
56
|
+
></Gesture>
|
|
57
|
+
|
|
58
|
+
<MediaQuery
|
|
59
|
+
let:sAndDown
|
|
60
|
+
>
|
|
61
|
+
<Dialog
|
|
62
|
+
open={selectedIndex !== undefined && selectedIndex !== null}
|
|
63
|
+
overlayOpacity="80%"
|
|
64
|
+
overlayColor="black"
|
|
65
|
+
>
|
|
66
|
+
<ImageComponent
|
|
67
|
+
src={selectedImage.url}
|
|
68
|
+
height={sAndDown ? "80vh" : "100vh"}
|
|
69
|
+
width={sAndDown ? "100vw" : "80vw"}
|
|
70
|
+
maxWidth="80vw"
|
|
71
|
+
disableHover={true}
|
|
72
|
+
imageContain={true}
|
|
73
|
+
imageCover={false}
|
|
74
|
+
showSkeletonLoader={false}
|
|
75
|
+
></ImageComponent>
|
|
76
|
+
<svelte:fragment slot="center-left">
|
|
77
|
+
{#if !sAndDown}
|
|
78
|
+
<Button
|
|
79
|
+
type="icon"
|
|
80
|
+
icon="mdi-chevron-left"
|
|
81
|
+
iconSize={30}
|
|
82
|
+
color="white"
|
|
83
|
+
on:click={() => switchNext()}
|
|
84
|
+
></Button>
|
|
85
|
+
{/if}
|
|
86
|
+
</svelte:fragment>
|
|
87
|
+
<svelte:fragment slot="center-right">
|
|
88
|
+
{#if !sAndDown}
|
|
89
|
+
<Button
|
|
90
|
+
type="icon"
|
|
91
|
+
icon="mdi-chevron-right"
|
|
92
|
+
iconSize={30}
|
|
93
|
+
color="white"
|
|
94
|
+
on:click={() => switchPrevious()}
|
|
95
|
+
></Button>
|
|
96
|
+
{/if}
|
|
97
|
+
</svelte:fragment>
|
|
98
|
+
<svelte:fragment slot="top-right">
|
|
99
|
+
<Button
|
|
100
|
+
type="icon"
|
|
101
|
+
icon="mdi-close"
|
|
102
|
+
iconSize={30}
|
|
103
|
+
color="white"
|
|
104
|
+
on:click={() => selectedIndex = undefined}
|
|
105
|
+
></Button>
|
|
106
|
+
</svelte:fragment>
|
|
107
|
+
</Dialog>
|
|
108
|
+
</MediaQuery>
|
|
109
|
+
|
|
110
|
+
<style>
|
|
111
|
+
</style>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import type { Image } from "./ImageGrid.svelte";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
images?: Image[];
|
|
6
|
+
columns?: number;
|
|
7
|
+
imageMaxWidth?: string;
|
|
8
|
+
imageMinWidth?: string;
|
|
9
|
+
imageMaxHeight?: string;
|
|
10
|
+
imageMinHeight?: string;
|
|
11
|
+
imageHeight?: string;
|
|
12
|
+
imageWidth?: string;
|
|
13
|
+
disableHover?: boolean;
|
|
14
|
+
dark?: boolean;
|
|
15
|
+
};
|
|
16
|
+
events: {
|
|
17
|
+
[evt: string]: CustomEvent<any>;
|
|
18
|
+
};
|
|
19
|
+
slots: {};
|
|
20
|
+
};
|
|
21
|
+
export declare type GalleryProps = typeof __propDef.props;
|
|
22
|
+
export declare type GalleryEvents = typeof __propDef.events;
|
|
23
|
+
export declare type GallerySlots = typeof __propDef.slots;
|
|
24
|
+
export default class Gallery extends SvelteComponentTyped<GalleryProps, GalleryEvents, GallerySlots> {
|
|
25
|
+
}
|
|
26
|
+
export {};
|
package/media/Image.svelte
CHANGED
package/media/Image.svelte.d.ts
CHANGED
package/media/ImageGrid.svelte
CHANGED
|
@@ -1,16 +1,27 @@
|
|
|
1
|
-
<script
|
|
2
|
-
|
|
1
|
+
<script context="module">export {};
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<script >import { createEventDispatcher } from 'svelte';
|
|
5
|
+
export let images = [], columns = undefined, imageMaxWidth = undefined, imageMinWidth = undefined, imageMaxHeight = undefined, imageMinHeight = undefined, imageHeight = undefined, imageWidth = undefined, disableHover = false, dark = false;
|
|
6
|
+
const dispatch = createEventDispatcher();
|
|
7
|
+
function handleImageClick(image, index) {
|
|
8
|
+
dispatch("image-click", {
|
|
9
|
+
image,
|
|
10
|
+
index
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
import ImageComponent from './Image.svelte';
|
|
3
14
|
</script>
|
|
4
15
|
|
|
5
16
|
<div
|
|
6
17
|
class="container flex-container"
|
|
7
18
|
>
|
|
8
|
-
{#each images as image }
|
|
19
|
+
{#each images as image, index }
|
|
9
20
|
<div
|
|
10
21
|
style:width={`calc((100% / var(${columns})) - (10px * ${columns})))`}
|
|
11
22
|
class="image-container"
|
|
12
23
|
>
|
|
13
|
-
<
|
|
24
|
+
<ImageComponent
|
|
14
25
|
src={image.url}
|
|
15
26
|
height={imageHeight}
|
|
16
27
|
width={imageWidth}
|
|
@@ -22,7 +33,8 @@ import Image from './Image.svelte';
|
|
|
22
33
|
disableHover={disableHover}
|
|
23
34
|
dark={dark}
|
|
24
35
|
borderRadius="10px"
|
|
25
|
-
|
|
36
|
+
on:click={() => handleImageClick(image, index)}
|
|
37
|
+
></ImageComponent>
|
|
26
38
|
</div>
|
|
27
39
|
{/each}
|
|
28
40
|
</div>
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
export declare type Image = {
|
|
3
|
+
url: string;
|
|
4
|
+
title: string;
|
|
5
|
+
description: string;
|
|
6
|
+
};
|
|
2
7
|
declare const __propDef: {
|
|
3
8
|
props: {
|
|
4
|
-
images?:
|
|
5
|
-
url: string;
|
|
6
|
-
title: string;
|
|
7
|
-
description: string;
|
|
8
|
-
}[];
|
|
9
|
+
images?: Image[];
|
|
9
10
|
columns?: number;
|
|
10
11
|
imageMaxWidth?: string;
|
|
11
12
|
imageMinWidth?: string;
|
|
@@ -17,6 +18,11 @@ declare const __propDef: {
|
|
|
17
18
|
dark?: boolean;
|
|
18
19
|
};
|
|
19
20
|
events: {
|
|
21
|
+
'image-click': CustomEvent<{
|
|
22
|
+
image: Image;
|
|
23
|
+
index: number;
|
|
24
|
+
}>;
|
|
25
|
+
} & {
|
|
20
26
|
[evt: string]: CustomEvent<any>;
|
|
21
27
|
};
|
|
22
28
|
slots: {};
|
|
@@ -21,9 +21,9 @@ declare const __propDef: {
|
|
|
21
21
|
};
|
|
22
22
|
slots: {};
|
|
23
23
|
};
|
|
24
|
-
export declare type
|
|
25
|
-
export declare type
|
|
26
|
-
export declare type
|
|
27
|
-
export default class
|
|
24
|
+
export declare type BreadcrumbProps = typeof __propDef.props;
|
|
25
|
+
export declare type BreadcrumbEvents = typeof __propDef.events;
|
|
26
|
+
export declare type BreadcrumbSlots = typeof __propDef.slots;
|
|
27
|
+
export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
|
|
28
28
|
}
|
|
29
29
|
export {};
|
|
@@ -26,10 +26,15 @@ function setBookmarkPosition() {
|
|
|
26
26
|
<div
|
|
27
27
|
style:position="relative"
|
|
28
28
|
style:display="flex"
|
|
29
|
+
style:flex-wrap="nowrap"
|
|
30
|
+
style:overflow="auto"
|
|
29
31
|
style:width={width}
|
|
30
32
|
>
|
|
31
33
|
{#each tabs as tab}
|
|
32
34
|
<div
|
|
35
|
+
style:word-break="keep-all"
|
|
36
|
+
style:white-spaces="nowrap"
|
|
37
|
+
style:-webkit-tap-highlight-color="rgba(0,0,0,0)"
|
|
33
38
|
style:cursor="pointer"
|
|
34
39
|
style:margin-left="12px"
|
|
35
40
|
style:margin-right="12px"
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@likable-hair/svelte",
|
|
3
3
|
"description": "A Svelte component for likablehair",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.29",
|
|
5
5
|
"devDependencies": {
|
|
6
6
|
"@sveltejs/adapter-auto": "next",
|
|
7
7
|
"@sveltejs/kit": "next",
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
"./common/materialDesign.css": "./common/materialDesign.css",
|
|
33
33
|
"./dates/Calendar.svelte": "./dates/Calendar.svelte",
|
|
34
34
|
"./dates/utils": "./dates/utils.js",
|
|
35
|
+
"./dialogs/Dialog.svelte": "./dialogs/Dialog.svelte",
|
|
35
36
|
"./forms/Textfield.svelte": "./forms/Textfield.svelte",
|
|
36
37
|
".": "./index.js",
|
|
37
38
|
"./loaders/Skeleton.svelte": "./loaders/Skeleton.svelte",
|
|
@@ -40,6 +41,7 @@
|
|
|
40
41
|
"./media/Avatar.svelte": "./media/Avatar.svelte",
|
|
41
42
|
"./media/Carousel.svelte": "./media/Carousel.svelte",
|
|
42
43
|
"./media/DescriptiveAvatar.svelte": "./media/DescriptiveAvatar.svelte",
|
|
44
|
+
"./media/Gallery.svelte": "./media/Gallery.svelte",
|
|
43
45
|
"./media/Icon.svelte": "./media/Icon.svelte",
|
|
44
46
|
"./media/Image.svelte": "./media/Image.svelte",
|
|
45
47
|
"./media/ImageGrid.svelte": "./media/ImageGrid.svelte",
|
package/stores/mediaQuery.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/*
|
|
2
|
-
320px —
|
|
3
|
-
|
|
2
|
+
320px — 425px: Mobile devices
|
|
3
|
+
426px — 768px: iPads, Tablets
|
|
4
4
|
769px — 1024px: Small screens, laptops
|
|
5
|
-
1025px —
|
|
6
|
-
|
|
5
|
+
1025px — 1440px: Desktops, large screens
|
|
6
|
+
1441px and more — Extra large screens, TV
|
|
7
7
|
*/
|
|
8
8
|
import { readable } from "svelte/store";
|
|
9
9
|
import { browser } from "$app/env";
|
|
10
|
-
//
|
|
10
|
+
// 0px — 425px: Mobile devices
|
|
11
11
|
function handleMatchOnXsQuery(event) {
|
|
12
12
|
if (event.matches) {
|
|
13
13
|
return {
|
|
@@ -19,26 +19,136 @@ function handleMatchOnXsQuery(event) {
|
|
|
19
19
|
};
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
|
-
|
|
22
|
+
// 426px — 768px: iPads, Tablets
|
|
23
|
+
function handleMatchOnSQuery(event) {
|
|
24
|
+
if (event.matches) {
|
|
25
|
+
return {
|
|
26
|
+
xs: false,
|
|
27
|
+
s: true,
|
|
28
|
+
m: false,
|
|
29
|
+
l: false,
|
|
30
|
+
xl: false
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
// 769px — 1024px: Small screens, laptops
|
|
35
|
+
function handleMatchOnMQuery(event) {
|
|
36
|
+
if (event.matches) {
|
|
37
|
+
return {
|
|
38
|
+
xs: false,
|
|
39
|
+
s: false,
|
|
40
|
+
m: true,
|
|
41
|
+
l: false,
|
|
42
|
+
xl: false
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
// 1025px — 1440px: Desktops, large screens
|
|
47
|
+
function handleMatchOnLQuery(event) {
|
|
48
|
+
if (event.matches) {
|
|
49
|
+
return {
|
|
50
|
+
xs: false,
|
|
51
|
+
s: false,
|
|
52
|
+
m: false,
|
|
53
|
+
l: true,
|
|
54
|
+
xl: false
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
// 1441px and more — Extra large screens, TV
|
|
59
|
+
function handleMatchOnXlQuery(event) {
|
|
60
|
+
if (event.matches) {
|
|
61
|
+
return {
|
|
62
|
+
xs: false,
|
|
63
|
+
s: false,
|
|
64
|
+
m: false,
|
|
65
|
+
l: false,
|
|
66
|
+
xl: true
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function getDeviceDimensionFromWidth(width) {
|
|
71
|
+
let dimension = {
|
|
72
|
+
xs: false,
|
|
73
|
+
s: false,
|
|
74
|
+
m: false,
|
|
75
|
+
l: false,
|
|
76
|
+
xl: false
|
|
77
|
+
};
|
|
78
|
+
if (width <= 425) {
|
|
79
|
+
dimension.xs = true;
|
|
80
|
+
}
|
|
81
|
+
else if (width <= 768) {
|
|
82
|
+
dimension.s = true;
|
|
83
|
+
}
|
|
84
|
+
else if (width <= 1024) {
|
|
85
|
+
dimension.m = true;
|
|
86
|
+
}
|
|
87
|
+
else if (width <= 1440) {
|
|
88
|
+
dimension.l = true;
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
dimension.xl = true;
|
|
92
|
+
}
|
|
93
|
+
return dimension;
|
|
94
|
+
}
|
|
95
|
+
let defaultDimension = {
|
|
23
96
|
xs: false,
|
|
24
97
|
s: false,
|
|
25
98
|
m: true,
|
|
26
99
|
l: false,
|
|
27
100
|
xl: false
|
|
28
|
-
}
|
|
29
|
-
|
|
101
|
+
};
|
|
102
|
+
if (browser) {
|
|
103
|
+
defaultDimension = getDeviceDimensionFromWidth(window.innerWidth);
|
|
104
|
+
}
|
|
105
|
+
export default readable(defaultDimension, set => {
|
|
106
|
+
let mqlXs, mqlS, mqlM, mqlL, mqlXl;
|
|
30
107
|
let listenerXs = (e) => {
|
|
31
108
|
const results = handleMatchOnXsQuery(e);
|
|
32
109
|
if (!!results)
|
|
33
110
|
set(results);
|
|
34
111
|
};
|
|
112
|
+
let listenerS = (e) => {
|
|
113
|
+
const results = handleMatchOnSQuery(e);
|
|
114
|
+
if (!!results)
|
|
115
|
+
set(results);
|
|
116
|
+
};
|
|
117
|
+
let listenerM = (e) => {
|
|
118
|
+
const results = handleMatchOnMQuery(e);
|
|
119
|
+
if (!!results)
|
|
120
|
+
set(results);
|
|
121
|
+
};
|
|
122
|
+
let listenerL = (e) => {
|
|
123
|
+
const results = handleMatchOnLQuery(e);
|
|
124
|
+
if (!!results)
|
|
125
|
+
set(results);
|
|
126
|
+
};
|
|
127
|
+
let listenerXl = (e) => {
|
|
128
|
+
const results = handleMatchOnXlQuery(e);
|
|
129
|
+
if (!!results)
|
|
130
|
+
set(results);
|
|
131
|
+
};
|
|
35
132
|
if (browser) {
|
|
36
|
-
|
|
133
|
+
set(getDeviceDimensionFromWidth(window.innerWidth));
|
|
134
|
+
mqlXs = window.matchMedia("(max-width: 425px)");
|
|
37
135
|
mqlXs.addEventListener("change", listenerXs);
|
|
136
|
+
mqlS = window.matchMedia("(min-width: 426px) and (max-width: 768px)");
|
|
137
|
+
mqlS.addEventListener("change", listenerS);
|
|
138
|
+
mqlM = window.matchMedia("(min-width: 769px) and (max-width: 1024px)");
|
|
139
|
+
mqlM.addEventListener("change", listenerM);
|
|
140
|
+
mqlL = window.matchMedia("(min-width: 1025px) and (max-width: 1440px)");
|
|
141
|
+
mqlL.addEventListener("change", listenerL);
|
|
142
|
+
mqlXl = window.matchMedia("(min-width: 1441px)");
|
|
143
|
+
mqlXl.addEventListener("change", listenerXl);
|
|
38
144
|
}
|
|
39
145
|
return () => {
|
|
40
146
|
if (browser) {
|
|
41
147
|
mqlXs.removeEventListener("change", listenerXs);
|
|
148
|
+
mqlS.removeEventListener("change", listenerS);
|
|
149
|
+
mqlM.removeEventListener("change", listenerM);
|
|
150
|
+
mqlL.removeEventListener("change", listenerL);
|
|
151
|
+
mqlXl.removeEventListener("change", listenerXl);
|
|
42
152
|
}
|
|
43
153
|
};
|
|
44
154
|
});
|
|
@@ -11,7 +11,6 @@ $: cssVariables = Object.entries({
|
|
|
11
11
|
.reduce((css, [key, value]) => {
|
|
12
12
|
return `${css}--simple-timeline${key}: ${value};`;
|
|
13
13
|
}, '');
|
|
14
|
-
import Icon from '../media/Icon.svelte';
|
|
15
14
|
</script>
|
|
16
15
|
|
|
17
16
|
<div
|
|
@@ -29,17 +28,25 @@ import Icon from '../media/Icon.svelte';
|
|
|
29
28
|
>
|
|
30
29
|
<div
|
|
31
30
|
style:flex-direction={singleSided || index % 2 == 0 ? 'row' : 'row-reverse'}
|
|
32
|
-
style:justify-content={
|
|
31
|
+
style:justify-content={'flex-start'}
|
|
33
32
|
class="time-line-body"
|
|
34
33
|
>
|
|
35
|
-
<slot
|
|
34
|
+
<slot
|
|
35
|
+
name="item"
|
|
36
|
+
item={item}
|
|
37
|
+
alignment={!singleSided && index % 2 == 0 ? 'right' : 'left'}
|
|
38
|
+
>
|
|
36
39
|
{#if !!item.from || !!item.to || $$slots.times}
|
|
37
40
|
<div
|
|
38
41
|
style:padding={singleSided || index % 2 == 0 ? "0px 20px 0px 0px" : "0px 0px 0px 20px"}
|
|
39
42
|
style:width={timesWidth}
|
|
40
43
|
class="time-line-times"
|
|
41
44
|
>
|
|
42
|
-
<slot
|
|
45
|
+
<slot
|
|
46
|
+
name="times"
|
|
47
|
+
item={item}
|
|
48
|
+
dateToString={dateToString}
|
|
49
|
+
>
|
|
43
50
|
<div
|
|
44
51
|
class:vertical-centered-container={circleAlignment == 'center'}
|
|
45
52
|
class:vertical-bottom-container={circleAlignment == 'bottom'}
|
|
@@ -61,7 +68,11 @@ import Icon from '../media/Icon.svelte';
|
|
|
61
68
|
</div>
|
|
62
69
|
{/if}
|
|
63
70
|
<div class="time-line-infos">
|
|
64
|
-
<slot
|
|
71
|
+
<slot
|
|
72
|
+
name="infos"
|
|
73
|
+
item={item}
|
|
74
|
+
alignment={!singleSided && index % 2 == 0 ? 'right' : 'left'}
|
|
75
|
+
>
|
|
65
76
|
{#if !!item.title}
|
|
66
77
|
<div
|
|
67
78
|
style:text-align={singleSided || index % 2 == 0 ? 'left' : 'right'}
|
|
@@ -74,7 +85,11 @@ import Icon from '../media/Icon.svelte';
|
|
|
74
85
|
class="time-line-description"
|
|
75
86
|
>{item.description}</div>
|
|
76
87
|
{/if}
|
|
77
|
-
<slot
|
|
88
|
+
<slot
|
|
89
|
+
name="infos-append"
|
|
90
|
+
item={item}
|
|
91
|
+
alignment={!singleSided && index % 2 == 0 ? 'right' : 'left'}
|
|
92
|
+
></slot>
|
|
78
93
|
</slot>
|
|
79
94
|
</div>
|
|
80
95
|
</slot>
|
|
@@ -29,15 +29,19 @@ declare const __propDef: {
|
|
|
29
29
|
slots: {
|
|
30
30
|
item: {
|
|
31
31
|
item: TimeLineItem;
|
|
32
|
+
alignment: string;
|
|
32
33
|
};
|
|
33
34
|
times: {
|
|
34
35
|
item: TimeLineItem;
|
|
36
|
+
dateToString: (date: Date, format?: "extended") => string;
|
|
35
37
|
};
|
|
36
38
|
infos: {
|
|
37
39
|
item: TimeLineItem;
|
|
40
|
+
alignment: string;
|
|
38
41
|
};
|
|
39
42
|
'infos-append': {
|
|
40
43
|
item: TimeLineItem;
|
|
44
|
+
alignment: string;
|
|
41
45
|
};
|
|
42
46
|
circle: {
|
|
43
47
|
item: TimeLineItem;
|