@likable-hair/svelte 0.0.23 → 0.0.26

package/common/Card.svelte

@@ -1,14 +1,6 @@
-<script >export let outlined = false, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined, padding = "5px", borderRadius = "5px", backgroundColor = "rgb(252, 252, 252)", color = undefined, borderColor = undefined, borderWidth = undefined, style = "";
+<script >export let outlined = false, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined, padding = "5px", borderRadius = "5px", backgroundColor = "rgb(252, 252, 252)", color = undefined, borderColor = undefined, borderWidth = undefined, marginBottom = undefined, marginTop = undefined, marginLeft = undefined, marginRight = undefined, boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
 </script>
 
-<style>
-  .shadow-lg {
-    --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --shadow-colored: 0 10px 15px -3px #000, 0 4px 6px -4px #000;
-    box-shadow: inset 0 0 0 calc(1px + 0px) rgb(255 255 255/0.1), 0 0 #0000, 0 0 #0000;
-  }
-</style>
-
 <div
   style:width={width}
   style:max-width={maxWidth}
@@ -22,10 +14,13 @@
   style:color={color}
   style:border-color={borderColor}
   style:border-width={borderWidth}
-  style={style}
+  style:margin-bottom={marginBottom}
+  style:margin-top={marginTop}
+  style:margin-left={marginLeft}
+  style:margin-right={marginRight}
+  style:box-shadow={boxShadow}
   style:display="flex"
   style:flex-direction="column"
-  class="shadow-lg" 
   class:border-solid={outlined}
 >
   <div 

package/common/Card.svelte.d.ts

@@ -14,7 +14,11 @@ declare const __propDef: {
         color?: string;
         borderColor?: string;
         borderWidth?: string;
-        style?: string;
+        marginBottom?: string;
+        marginTop?: string;
+        marginLeft?: string;
+        marginRight?: string;
+        boxShadow?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/common/MediaQuery.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  MediaQueryProps */
+/** @typedef {typeof __propDef.events}  MediaQueryEvents */
+/** @typedef {typeof __propDef.slots}  MediaQuerySlots */
+export default class MediaQuery extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MediaQueryProps = typeof __propDef.props;
+export type MediaQueryEvents = typeof __propDef.events;
+export type MediaQuerySlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/navigation/Navigator.svelte.d.ts

@@ -3,6 +3,7 @@ export declare type Item = {
     title: string;
     name: string;
     url?: string;
+    detail?: object;
 };
 declare const __propDef: {
     props: {

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,7 +26,7 @@ function setBookmarkPosition() {
 <div 
   style:position="relative"
   style:display="flex"
-  class="tab-switcher-container"
+  style:width={width}
 >
   {#each tabs as tab}
     <div 
@@ -36,6 +34,7 @@ function setBookmarkPosition() {
       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 +45,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 +74,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.23",
+  "version": "0.0.26",
   "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,44 @@
+/*
+  320px — 480px: Mobile devices
+  481px — 768px: iPads, Tablets
+  769px — 1024px: Small screens, laptops
+  1025px — 1200px: Desktops, large screens
+  1201px and more —  Extra large screens, TV
+*/
+import { readable } from "svelte/store";
+import { browser } from "$app/env";
+// 320px — 480px: Mobile devices
+function handleMatchOnXsQuery(event) {
+    if (event.matches) {
+        return {
+            xs: true,
+            s: false,
+            m: false,
+            l: false,
+            xl: false
+        };
+    }
+}
+export default readable({
+    xs: false,
+    s: false,
+    m: true,
+    l: false,
+    xl: false
+}, set => {
+    let mqlXs;
+    let listenerXs = (e) => {
+        const results = handleMatchOnXsQuery(e);
+        if (!!results)
+            set(results);
+    };
+    if (browser) {
+        mqlXs = window.matchMedia("(min-width: 320px) and (max-width: 480px)");
+        mqlXs.addEventListener("change", listenerXs);
+    }
+    return () => {
+        if (browser) {
+            mqlXs.removeEventListener("change", listenerXs);
+        }
+    };
+});