@likable-hair/svelte 0.0.27 → 0.0.30

package/dialogs/Dialog.svelte

@@ -0,0 +1,96 @@
+<script >import { beforeUpdate, onMount } from "svelte";
+export let open = false, overlayOpacity = "30%", overlayColor = "#282828";
+let zIndex = 50, localOpen = open;
+beforeUpdate(() => {
+    if (open && localOpen != open) {
+        let otherDialog = document.querySelector("[data-dialog]");
+        if (!!otherDialog) {
+            zIndex = Number(otherDialog.style.zIndex) + 2;
+        }
+    }
+    localOpen = open;
+});
+function closeDialog() {
+    open = false;
+    localOpen = false;
+}
+function handleOverlayClick() {
+    closeDialog();
+}
+</script>
+
+<div 
+  style:z-index={zIndex}
+  style:--dialog-overlay-opacity={overlayOpacity}
+  style:display="flex"
+  style:align-items="center"
+  style:justify-content="space-between"
+  class="overlay-container"
+  class:overlay-container-active={localOpen}
+  on:touchmove|preventDefault={() => {}}
+  on:wheel|preventDefault={() => {}}
+>
+  <div
+    style:background-color={overlayColor} 
+    class="overlay"
+    class:overlay-active={localOpen}
+    on:click={handleOverlayClick}
+  ></div>
+  {#if localOpen }
+    <div
+      style:position="absolute"
+      style:top="0px"
+      style:right="0px"
+      style:z-index={zIndex + 1}
+    >
+      <slot name="top-right"></slot>
+    </div>
+    <div 
+      style:z-index={zIndex + 1}
+      on:click|stopPropagation
+    >
+      <slot name="center-left"></slot>
+    </div>
+    <div
+      on:click|stopPropagation
+      style:z-index={zIndex + 1}
+    >
+      <slot></slot>
+    </div>
+    <div
+      style:z-index={zIndex + 1}
+      on:click|stopPropagation
+    >
+      <slot name="center-right"></slot>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .overlay-container {
+    height: 0;
+    width: 0;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+  }
+
+  .overlay-container-active {
+    height: 100vh;
+    width: 100vw;
+  }
+
+  .overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0%;
+  }
+
+  .overlay-active {
+    opacity: var(--dialog-overlay-opacity);
+  }
+</style>

package/dialogs/Dialog.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean;
+        overlayOpacity?: string;
+        overlayColor?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'top-right': {};
+        'center-left': {};
+        default: {};
+        'center-right': {};
+    };
+};
+export declare type DialogProps = typeof __propDef.props;
+export declare type DialogEvents = typeof __propDef.events;
+export declare type DialogSlots = typeof __propDef.slots;
+export default class Dialog extends SvelteComponentTyped<DialogProps, DialogEvents, DialogSlots> {
+}
+export {};

package/index.d.ts

@@ -2,6 +2,8 @@ export { default as Button } from './buttons/Button.svelte';
 export { default as Card } from './common/Card.svelte';
 export { default as Gesture } from './common/Gesture.svelte';
 export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
+export { default as MediaQuery } from './common/MediaQuery.svelte';
+export { default as Dialog } from './dialogs/Dialog.svelte';
 export { default as TextField } from './forms/Textfield.svelte';
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';
@@ -11,7 +13,8 @@ export { default as DescriptiveAvatar } from './media/DescriptiveAvatar.svelte';
 export { default as Icon } from './media/Icon.svelte';
 export { default as Image } from './media/Image.svelte';
 export { default as ImageGrid } from './media/ImageGrid.svelte';
-export { default as BreadCrumb } from './navigation/BreadCrumb.svelte';
+export { default as Gallery } from './media/Gallery.svelte';
+export { default as Breadcrumb } from './navigation/Breadcrumb.svelte';
 export { default as HeaderMenu } from './navigation/HeaderMenu.svelte';
 export { default as Navigator } from './navigation/Navigator.svelte';
 export { default as TabSwitcher } from './navigation/TabSwitcher.svelte';
@@ -19,5 +22,6 @@ export { default as Drawer } from './navigation/Drawer.svelte';
 export { default as ProgressBar } from './progress/ProgressBar.svelte';
 export { default as ProductCard } from './shop/ProductCard.svelte';
 export { default as ProductGrid } from './shop/ProductCard.svelte';
+export { default as mediaQueryStore } from './stores/mediaQuery';
 export { default as ScollTimeLine } from './timeline/ScrollTimeLine.svelte';
 export { default as SimpleTimeLine } from './timeline/SimpleTimeLine.svelte';

package/index.js

@@ -4,6 +4,9 @@ export { default as Button } from './buttons/Button.svelte';
 export { default as Card } from './common/Card.svelte';
 export { default as Gesture } from './common/Gesture.svelte';
 export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
+export { default as MediaQuery } from './common/MediaQuery.svelte';
+// dialogs
+export { default as Dialog } from './dialogs/Dialog.svelte';
 // forms
 export { default as TextField } from './forms/Textfield.svelte';
 // loaders
@@ -16,8 +19,9 @@ export { default as DescriptiveAvatar } from './media/DescriptiveAvatar.svelte';
 export { default as Icon } from './media/Icon.svelte';
 export { default as Image } from './media/Image.svelte';
 export { default as ImageGrid } from './media/ImageGrid.svelte';
+export { default as Gallery } from './media/Gallery.svelte';
 // navigation
-export { default as BreadCrumb } from './navigation/BreadCrumb.svelte';
+export { default as Breadcrumb } from './navigation/Breadcrumb.svelte';
 export { default as HeaderMenu } from './navigation/HeaderMenu.svelte';
 export { default as Navigator } from './navigation/Navigator.svelte';
 export { default as TabSwitcher } from './navigation/TabSwitcher.svelte';
@@ -27,6 +31,8 @@ export { default as ProgressBar } from './progress/ProgressBar.svelte';
 // shop
 export { default as ProductCard } from './shop/ProductCard.svelte';
 export { default as ProductGrid } from './shop/ProductCard.svelte';
+// store
+export { default as mediaQueryStore } from './stores/mediaQuery';
 // timeline
 export { default as ScollTimeLine } from './timeline/ScrollTimeLine.svelte';
 export { default as SimpleTimeLine } from './timeline/SimpleTimeLine.svelte';

package/media/Gallery.svelte

@@ -0,0 +1,111 @@
+<script  context="module"></script>
+
+<script >export let images = [], columns = undefined, imageMaxWidth = undefined, imageMinWidth = undefined, imageMaxHeight = undefined, imageMinHeight = undefined, imageHeight = undefined, imageWidth = undefined, disableHover = false, dark = false;
+let selectedIndex = undefined, selectedImage = undefined;
+function handleImageClick(e) {
+    selectedIndex = e.detail.index;
+}
+$: if (selectedIndex !== undefined && selectedIndex !== null) {
+    selectedImage = images[selectedIndex];
+}
+function switchNext() {
+    if (selectedIndex < (images.length - 1)) {
+        selectedIndex++;
+    }
+}
+function switchPrevious() {
+    if (selectedIndex > 0) {
+        selectedIndex--;
+    }
+}
+function handleSwipe(e) {
+    if (e.detail.direction == 'right') {
+        switchPrevious();
+    }
+    else if (e.detail.direction == 'left') {
+        switchNext();
+    }
+    else if (e.detail.direction == 'down') {
+        selectedIndex = undefined;
+    }
+}
+import ImageGrid from "./ImageGrid.svelte";
+import ImageComponent from "./Image.svelte";
+import Dialog from "../dialogs/Dialog.svelte";
+import Button from "../buttons/Button.svelte";
+import MediaQuery from "../common/MediaQuery.svelte";
+import Gesture from "../common/Gesture.svelte";
+</script>
+
+<ImageGrid 
+  images={images}
+  columns={columns}
+  imageMaxWidth={imageMaxWidth}
+  imageMinWidth={imageMinWidth}
+  imageMaxHeight={imageMaxHeight}
+  imageMinHeight={imageMinHeight}
+  imageHeight={imageHeight}
+  imageWidth={imageWidth}
+  disableHover={disableHover}
+  dark={dark}
+  on:image-click={handleImageClick}
+/>
+
+<Gesture
+  on:swipe={handleSwipe}
+></Gesture>
+
+<MediaQuery
+  let:sAndDown
+>
+  <Dialog
+    open={selectedIndex !== undefined && selectedIndex !== null}
+    overlayOpacity="80%"
+    overlayColor="black"
+  >
+    <ImageComponent
+      src={selectedImage.url}
+      height={sAndDown ? "80vh" : "100vh"}
+      width={sAndDown ? "100vw" : "80vw"}
+      maxWidth="80vw"
+      disableHover={true}
+      imageContain={true}
+      imageCover={false}
+      showSkeletonLoader={false}
+    ></ImageComponent>
+    <svelte:fragment slot="center-left">
+      {#if !sAndDown}
+        <Button
+          type="icon"
+          icon="mdi-chevron-left"
+          iconSize={30}
+          color="white"
+          on:click={() => switchNext()}
+        ></Button>
+      {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="center-right">
+      {#if !sAndDown}
+        <Button
+          type="icon"
+          icon="mdi-chevron-right"
+          iconSize={30}
+          color="white"
+          on:click={() => switchPrevious()}
+        ></Button>
+      {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="top-right">
+      <Button
+        type="icon"
+        icon="mdi-close"
+        iconSize={30}
+        color="white"
+        on:click={() => selectedIndex = undefined}
+      ></Button>
+    </svelte:fragment>
+  </Dialog>
+</MediaQuery>
+
+<style>
+</style>

package/media/Gallery.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Image } from "./ImageGrid.svelte";
+declare const __propDef: {
+    props: {
+        images?: Image[];
+        columns?: number;
+        imageMaxWidth?: string;
+        imageMinWidth?: string;
+        imageMaxHeight?: string;
+        imageMinHeight?: string;
+        imageHeight?: string;
+        imageWidth?: string;
+        disableHover?: boolean;
+        dark?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type GalleryProps = typeof __propDef.props;
+export declare type GalleryEvents = typeof __propDef.events;
+export declare type GallerySlots = typeof __propDef.slots;
+export default class Gallery extends SvelteComponentTyped<GalleryProps, GalleryEvents, GallerySlots> {
+}
+export {};

package/media/Image.svelte

@@ -28,6 +28,7 @@ import Skeleton from "../loaders/Skeleton.svelte";
   style:min-height={minHeight}
   style:border-radius={borderRadius}
   class="image-container"
+  on:click
 >
   <IntersectionObserver once={true} let:intersecting={intersecting}>
     {#if intersecting}

package/media/Image.svelte.d.ts

@@ -18,6 +18,8 @@ declare const __propDef: {
         imageContain?: boolean;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/media/ImageGrid.svelte

@@ -1,16 +1,27 @@
-<script >export let images = [], columns = undefined, imageMaxWidth = undefined, imageMinWidth = undefined, imageMaxHeight = undefined, imageMinHeight = undefined, imageHeight = undefined, imageWidth = undefined, disableHover = false, dark = false;
-import Image from './Image.svelte';
+<script  context="module">export {};
+</script>
+
+<script >import { createEventDispatcher } from 'svelte';
+export let images = [], columns = undefined, imageMaxWidth = undefined, imageMinWidth = undefined, imageMaxHeight = undefined, imageMinHeight = undefined, imageHeight = undefined, imageWidth = undefined, disableHover = false, dark = false;
+const dispatch = createEventDispatcher();
+function handleImageClick(image, index) {
+    dispatch("image-click", {
+        image,
+        index
+    });
+}
+import ImageComponent from './Image.svelte';
 </script>
 
 <div
   class="container flex-container"
 >
-  {#each images as image }
+  {#each images as image, index }
     <div 
       style:width={`calc((100% / var(${columns})) - (10px * ${columns})))`}
       class="image-container"
     >
-      <Image
+      <ImageComponent
         src={image.url}
         height={imageHeight}
         width={imageWidth}
@@ -22,7 +33,8 @@ import Image from './Image.svelte';
         disableHover={disableHover}
         dark={dark}
         borderRadius="10px"
-      ></Image>
+        on:click={() => handleImageClick(image, index)}
+      ></ImageComponent>
     </div>
   {/each}
 </div>

package/media/ImageGrid.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+export declare type Image = {
+    url: string;
+    title: string;
+    description: string;
+};
 declare const __propDef: {
     props: {
-        images?: {
-            url: string;
-            title: string;
-            description: string;
-        }[];
+        images?: Image[];
         columns?: number;
         imageMaxWidth?: string;
         imageMinWidth?: string;
@@ -17,6 +18,11 @@ declare const __propDef: {
         dark?: boolean;
     };
     events: {
+        'image-click': CustomEvent<{
+            image: Image;
+            index: number;
+        }>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/navigation/{BreadCrumb.svelte.d.ts → Breadcrumb.svelte.d.ts}

@@ -21,9 +21,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type BreadCrumbProps = typeof __propDef.props;
-export declare type BreadCrumbEvents = typeof __propDef.events;
-export declare type BreadCrumbSlots = typeof __propDef.slots;
-export default class BreadCrumb extends SvelteComponentTyped<BreadCrumbProps, BreadCrumbEvents, BreadCrumbSlots> {
+export declare type BreadcrumbProps = typeof __propDef.props;
+export declare type BreadcrumbEvents = typeof __propDef.events;
+export declare type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
 }
 export {};

package/navigation/TabSwitcher.svelte

@@ -26,10 +26,14 @@ function setBookmarkPosition() {
 <div 
   style:position="relative"
   style:display="flex"
+  style:flex-wrap="nowrap"
+  style:overflow="auto"
   style:width={width}
 >
   {#each tabs as tab}
     <div 
+      style:word-break="keep-all"
+      style:white-spaces="nowrap"
       style:-webkit-tap-highlight-color="rgba(0,0,0,0)"
       style:cursor="pointer"
       style:margin-left="12px"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.27",
+  "version": "0.0.30",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -32,6 +32,7 @@
     "./common/materialDesign.css": "./common/materialDesign.css",
     "./dates/Calendar.svelte": "./dates/Calendar.svelte",
     "./dates/utils": "./dates/utils.js",
+    "./dialogs/Dialog.svelte": "./dialogs/Dialog.svelte",
     "./forms/Textfield.svelte": "./forms/Textfield.svelte",
     ".": "./index.js",
     "./loaders/Skeleton.svelte": "./loaders/Skeleton.svelte",
@@ -40,6 +41,7 @@
     "./media/Avatar.svelte": "./media/Avatar.svelte",
     "./media/Carousel.svelte": "./media/Carousel.svelte",
     "./media/DescriptiveAvatar.svelte": "./media/DescriptiveAvatar.svelte",
+    "./media/Gallery.svelte": "./media/Gallery.svelte",
     "./media/Icon.svelte": "./media/Icon.svelte",
     "./media/Image.svelte": "./media/Image.svelte",
     "./media/ImageGrid.svelte": "./media/ImageGrid.svelte",

package/timeline/SimpleTimeLine.svelte

@@ -11,7 +11,6 @@ $: cssVariables = Object.entries({
     .reduce((css, [key, value]) => {
     return `${css}--simple-timeline${key}: ${value};`;
 }, '');
-import Icon from '../media/Icon.svelte';
 </script>
 
 <div 
@@ -29,7 +28,7 @@ import Icon from '../media/Icon.svelte';
     >
       <div
         style:flex-direction={singleSided || index % 2 == 0 ? 'row' : 'row-reverse'}
-        style:justify-content={singleSided || index % 2 == 0 ? 'start' : 'flex-end'}
+        style:justify-content={'flex-start'}
         class="time-line-body"
       >
         <slot 
@@ -43,7 +42,11 @@ import Icon from '../media/Icon.svelte';
               style:width={timesWidth}
               class="time-line-times"
             >
-              <slot name="times" item={item}>
+              <slot 
+                name="times" 
+                item={item}
+                dateToString={dateToString}
+              >
                 <div
                   class:vertical-centered-container={circleAlignment == 'center'}
                   class:vertical-bottom-container={circleAlignment == 'bottom'}

package/timeline/SimpleTimeLine.svelte.d.ts

@@ -33,6 +33,7 @@ declare const __propDef: {
         };
         times: {
             item: TimeLineItem;
+            dateToString: (date: Date, format?: "extended") => string;
         };
         infos: {
             item: TimeLineItem;