@likable-hair/svelte 0.0.25 → 0.0.28

package/common/MediaQuery.svelte

@@ -0,0 +1,30 @@
+<script >import mediaQuery from "../stores/mediaQuery";
+$: xsAndDown = $mediaQuery.xs;
+$: sAndDown = $mediaQuery.s || $mediaQuery.xs;
+$: mAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m;
+$: lAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m || $mediaQuery.l;
+$: xlAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m || $mediaQuery.l || $mediaQuery.xl;
+$: xlAndUp = $mediaQuery.xl;
+$: lAndUp = $mediaQuery.xl || $mediaQuery.l;
+$: mAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m;
+$: sAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m || $mediaQuery.s || $mediaQuery.xs;
+$: xsAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m || $mediaQuery.s || $mediaQuery.xs;
+</script>
+
+<slot
+  xs={$mediaQuery.xs}
+  s={$mediaQuery.s}
+  m={$mediaQuery.m}
+  l={$mediaQuery.l}
+  xl={$mediaQuery.xl}
+  xsAndDown={xsAndDown}
+  sAndDown={sAndDown}
+  mAndDown={mAndDown}
+  lAndDown={lAndDown}
+  xlAndDown={xlAndDown}
+  xlAndUp={xlAndUp}
+  lAndUp={lAndUp}
+  mAndUp={mAndUp}
+  sAndUp={sAndUp}
+  xsAndUp={xsAndUp}
+></slot>

package/common/MediaQuery.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            xs: boolean;
+            s: boolean;
+            m: boolean;
+            l: boolean;
+            xl: boolean;
+            xsAndDown: boolean;
+            sAndDown: boolean;
+            mAndDown: boolean;
+            lAndDown: boolean;
+            xlAndDown: boolean;
+            xlAndUp: boolean;
+            lAndUp: boolean;
+            mAndUp: boolean;
+            sAndUp: boolean;
+            xsAndUp: boolean;
+        };
+    };
+};
+export declare type MediaQueryProps = typeof __propDef.props;
+export declare type MediaQueryEvents = typeof __propDef.events;
+export declare type MediaQuerySlots = typeof __propDef.slots;
+export default class MediaQuery extends SvelteComponentTyped<MediaQueryProps, MediaQueryEvents, MediaQuerySlots> {
+}
+export {};

package/index.d.ts

@@ -2,6 +2,7 @@ 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 TextField } from './forms/Textfield.svelte';
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';
@@ -11,7 +12,7 @@ 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 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 +20,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,7 @@ 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';
 // forms
 export { default as TextField } from './forms/Textfield.svelte';
 // loaders
@@ -17,7 +18,7 @@ export { default as Icon } from './media/Icon.svelte';
 export { default as Image } from './media/Image.svelte';
 export { default as ImageGrid } from './media/ImageGrid.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 +28,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/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

@@ -2,9 +2,7 @@
 </script>
 
 <script >import { onMount } from 'svelte';
-export let tabs = [];
-export let selected = undefined;
-export let mandatory = true;
+export let tabs = [], selected = undefined, mandatory = true, width = undefined, color = "rgb(51 65 85)", bookmarkColor = undefined;
 let tabButtons = {};
 onMount(() => {
     if (mandatory && !selected && tabs.length > 0)
@@ -28,14 +26,16 @@ function setBookmarkPosition() {
 <div 
   style:position="relative"
   style:display="flex"
-  class="tab-switcher-container"
+  style:width={width}
 >
   {#each tabs as tab}
     <div 
+      style:-webkit-tap-highlight-color="rgba(0,0,0,0)"
       style:cursor="pointer"
       style:margin-left="12px"
       style:margin-right="12px"
       style:padding="8px"
+      style:--tab-switcher-color={color}
       class:selected-tab={tab.name == selected}
       on:click={() => handleTabClick(tab)}
       bind:this={tabButtons[tab.name]}
@@ -46,27 +46,26 @@ function setBookmarkPosition() {
   <span
     style:left={bookmarkLeft + 'px'}
     style:width={bookmarkWidth + 'px'}
+    style:--tab-switcher-bookmark-color={bookmarkColor || color}
     class="bookmark"
   ></span>
-  <span class="horizontal-guide"></span>
+  <span 
+    style:width={width}
+    class="horizontal-guide"
+  ></span>
 </div>
 
 <style>
-  .tab-switcher-container {
-    width: var(--width)
-  }
-
   .selected-tab {
-    color: var(--color, rgb(51 65 85));
+    color: var(--tab-switcher-color, rgb(51 65 85));
   }
   
   .horizontal-guide {
     position: absolute;
-    width: var(--width, 100%);
     z-index: 5;
     bottom: 0px;
     height: 1px;
-    background-color: var(--color, rgb(51 65 85));
+    background-color: var(--tab-switcher-color, rgb(51 65 85));
     opacity: 20%;
   }
 
@@ -76,7 +75,7 @@ function setBookmarkPosition() {
     height: 2px;
     border-radius: 0.125rem;
     z-index: 10;
-    background-color: var(--bookmark-color, var(--color, rgb(51 65 85)));
+    background-color: var(--tab-switcher-bookmark-color, var(--tab-switcher-color, rgb(51 65 85)));
     transition: left 400ms, width 400ms;
   }
 

package/navigation/TabSwitcher.svelte.d.ts

@@ -9,6 +9,9 @@ declare const __propDef: {
         tabs?: Tab[];
         selected?: string;
         mandatory?: boolean;
+        width?: string;
+        color?: string;
+        bookmarkColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.25",
+  "version": "0.0.28",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -28,6 +28,7 @@
     "./common/Card.svelte": "./common/Card.svelte",
     "./common/Gesture.svelte": "./common/Gesture.svelte",
     "./common/IntersectionObserver.svelte": "./common/IntersectionObserver.svelte",
+    "./common/MediaQuery.svelte": "./common/MediaQuery.svelte",
     "./common/materialDesign.css": "./common/materialDesign.css",
     "./dates/Calendar.svelte": "./dates/Calendar.svelte",
     "./dates/utils": "./dates/utils.js",
@@ -50,6 +51,7 @@
     "./progress/ProgressBar.svelte": "./progress/ProgressBar.svelte",
     "./shop/ProductCard.svelte": "./shop/ProductCard.svelte",
     "./shop/ProductsGrid.svelte": "./shop/ProductsGrid.svelte",
+    "./stores/mediaQuery": "./stores/mediaQuery.js",
     "./timeline/ScrollTimeLine.svelte": "./timeline/ScrollTimeLine.svelte",
     "./timeline/SimpleTimeLine.svelte": "./timeline/SimpleTimeLine.svelte"
   },

package/stores/mediaQuery.d.ts

@@ -0,0 +1,9 @@
+export declare type DeviceDimension = {
+    xs: boolean;
+    s: boolean;
+    m: boolean;
+    l: boolean;
+    xl: boolean;
+};
+declare const _default: import("svelte/store").Readable<DeviceDimension>;
+export default _default;

package/stores/mediaQuery.js

@@ -0,0 +1,154 @@
+/*
+  320px — 425px: Mobile devices
+  426px — 768px: iPads, Tablets
+  769px — 1024px: Small screens, laptops
+  1025px — 1440px: Desktops, large screens
+  1441px and more —  Extra large screens, TV
+*/
+import { readable } from "svelte/store";
+import { browser } from "$app/env";
+// 0px — 425px: Mobile devices
+function handleMatchOnXsQuery(event) {
+    if (event.matches) {
+        return {
+            xs: true,
+            s: false,
+            m: false,
+            l: false,
+            xl: false
+        };
+    }
+}
+// 426px — 768px: iPads, Tablets
+function handleMatchOnSQuery(event) {
+    if (event.matches) {
+        return {
+            xs: false,
+            s: true,
+            m: false,
+            l: false,
+            xl: false
+        };
+    }
+}
+// 769px — 1024px: Small screens, laptops
+function handleMatchOnMQuery(event) {
+    if (event.matches) {
+        return {
+            xs: false,
+            s: false,
+            m: true,
+            l: false,
+            xl: false
+        };
+    }
+}
+// 1025px — 1440px: Desktops, large screens
+function handleMatchOnLQuery(event) {
+    if (event.matches) {
+        return {
+            xs: false,
+            s: false,
+            m: false,
+            l: true,
+            xl: false
+        };
+    }
+}
+// 1441px and more —  Extra large screens, TV
+function handleMatchOnXlQuery(event) {
+    if (event.matches) {
+        return {
+            xs: false,
+            s: false,
+            m: false,
+            l: false,
+            xl: true
+        };
+    }
+}
+function getDeviceDimensionFromWidth(width) {
+    let dimension = {
+        xs: false,
+        s: false,
+        m: false,
+        l: false,
+        xl: false
+    };
+    if (width <= 425) {
+        dimension.xs = true;
+    }
+    else if (width <= 768) {
+        dimension.s = true;
+    }
+    else if (width <= 1024) {
+        dimension.m = true;
+    }
+    else if (width <= 1440) {
+        dimension.l = true;
+    }
+    else {
+        dimension.xl = true;
+    }
+    return dimension;
+}
+let defaultDimension = {
+    xs: false,
+    s: false,
+    m: true,
+    l: false,
+    xl: false
+};
+if (browser) {
+    defaultDimension = getDeviceDimensionFromWidth(window.innerWidth);
+}
+export default readable(defaultDimension, set => {
+    let mqlXs, mqlS, mqlM, mqlL, mqlXl;
+    let listenerXs = (e) => {
+        const results = handleMatchOnXsQuery(e);
+        if (!!results)
+            set(results);
+    };
+    let listenerS = (e) => {
+        const results = handleMatchOnSQuery(e);
+        if (!!results)
+            set(results);
+    };
+    let listenerM = (e) => {
+        const results = handleMatchOnMQuery(e);
+        if (!!results)
+            set(results);
+    };
+    let listenerL = (e) => {
+        const results = handleMatchOnLQuery(e);
+        if (!!results)
+            set(results);
+    };
+    let listenerXl = (e) => {
+        const results = handleMatchOnXlQuery(e);
+        if (!!results)
+            set(results);
+    };
+    if (browser) {
+        set(getDeviceDimensionFromWidth(window.innerWidth));
+        mqlXs = window.matchMedia("(max-width: 425px)");
+        mqlXs.addEventListener("change", listenerXs);
+        mqlS = window.matchMedia("(min-width: 426px) and (max-width: 768px)");
+        mqlS.addEventListener("change", listenerS);
+        mqlM = window.matchMedia("(min-width: 769px) and (max-width: 1024px)");
+        mqlM.addEventListener("change", listenerM);
+        mqlL = window.matchMedia("(min-width: 1025px) and (max-width: 1440px)");
+        mqlL.addEventListener("change", listenerL);
+        mqlXl = window.matchMedia("(min-width: 1441px)");
+        mqlXl.addEventListener("change", listenerXl);
+    }
+    return () => {
+        if (browser) {
+            mqlXs.removeEventListener("change", listenerXs);
+            mqlS.removeEventListener("change", listenerS);
+            mqlM.removeEventListener("change", listenerM);
+            mqlL.removeEventListener("change", listenerL);
+            mqlXl.removeEventListener("change", listenerXl);
+        }
+    };
+});

package/timeline/SimpleTimeLine.svelte

@@ -32,7 +32,11 @@ import Icon from '../media/Icon.svelte';
         style:justify-content={singleSided || index % 2 == 0 ? 'start' : 'flex-end'}
         class="time-line-body"
       >
-        <slot name="item" item={item}>
+        <slot 
+          name="item" 
+          item={item}
+          alignment={!singleSided && index % 2 == 0 ? 'right' : 'left'}
+        >
           {#if !!item.from || !!item.to || $$slots.times}
             <div
               style:padding={singleSided || index % 2 == 0 ? "0px 20px 0px 0px" : "0px 0px 0px 20px"}
@@ -61,7 +65,11 @@ import Icon from '../media/Icon.svelte';
             </div>
           {/if}
           <div class="time-line-infos">
-            <slot name="infos" item={item}>
+            <slot 
+              name="infos" 
+              item={item}
+              alignment={!singleSided && index % 2 == 0 ? 'right' : 'left'}
+            >
               {#if !!item.title}
                 <div 
                   style:text-align={singleSided || index % 2 == 0 ? 'left' : 'right'}
@@ -74,7 +82,11 @@ import Icon from '../media/Icon.svelte';
                   class="time-line-description"
                 >{item.description}</div>
               {/if}
-              <slot name="infos-append" item={item}></slot>
+              <slot 
+                name="infos-append" 
+                item={item}
+                alignment={!singleSided && index % 2 == 0 ? 'right' : 'left'}
+              ></slot>
             </slot>
           </div>
         </slot>

package/timeline/SimpleTimeLine.svelte.d.ts

@@ -29,15 +29,18 @@ declare const __propDef: {
     slots: {
         item: {
             item: TimeLineItem;
+            alignment: string;
         };
         times: {
             item: TimeLineItem;
         };
         infos: {
             item: TimeLineItem;
+            alignment: string;
         };
         'infos-append': {
             item: TimeLineItem;
+            alignment: string;
         };
         circle: {
             item: TimeLineItem;