@likable-hair/svelte 0.0.28 → 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/dialogs/Dialog.svelte +96 -0
- package/dialogs/Dialog.svelte.d.ts +25 -0
- 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/TabSwitcher.svelte +4 -0
- package/package.json +3 -1
- package/timeline/SimpleTimeLine.svelte +6 -3
- package/timeline/SimpleTimeLine.svelte.d.ts +1 -0
|
@@ -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 {};
|
|
@@ -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: {};
|
|
@@ -26,10 +26,14 @@ 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"
|
|
33
37
|
style:-webkit-tap-highlight-color="rgba(0,0,0,0)"
|
|
34
38
|
style:cursor="pointer"
|
|
35
39
|
style:margin-left="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",
|
|
@@ -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,7 +28,7 @@ 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
34
|
<slot
|
|
@@ -43,7 +42,11 @@ import Icon from '../media/Icon.svelte';
|
|
|
43
42
|
style:width={timesWidth}
|
|
44
43
|
class="time-line-times"
|
|
45
44
|
>
|
|
46
|
-
<slot
|
|
45
|
+
<slot
|
|
46
|
+
name="times"
|
|
47
|
+
item={item}
|
|
48
|
+
dateToString={dateToString}
|
|
49
|
+
>
|
|
47
50
|
<div
|
|
48
51
|
class:vertical-centered-container={circleAlignment == 'center'}
|
|
49
52
|
class:vertical-bottom-container={circleAlignment == 'bottom'}
|