@likable-hair/svelte 0.0.18 → 0.0.21

package/buttons/Button.svelte

@@ -1,4 +1,4 @@
-<script >export let type = 'default', icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, backgroundColor = undefined, hoverBackgroundColor = '#008f8f', borderRadius = undefined, boxShadow = undefined;
+<script >export let type = 'default', icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', borderRadius = undefined, boxShadow = undefined;
 export { clazz as class };
 $: defaultBorderRadius = type == 'icon' ? '50%' : '5px';
 $: position = !!$$slots.append ? 'relative' : undefined;
@@ -18,13 +18,13 @@ import Icon from '../media/Icon.svelte';
   style:padding={padding}
   style:font-size={fontSize}
   style:color={color}
-  style:button-border-radius={!!borderRadius ? borderRadius : defaultBorderRadius}
+  style:--button-border-radius={!!borderRadius ? borderRadius : defaultBorderRadius}
   style:--button-background-color={backgroundColor}
   style:--button-hover-background-color={hoverBackgroundColor}
   style:--button-box-shadow={boxShadow}
   style:--button-icon-height={(iconSize + 5) + 'pt'}
   style:--button-icon-width={(iconSize + 5) + 'pt'}
-  class="button {clazz}"
+  class="button no-select {clazz}"
   class:button-default={type === 'default'}
   class:button-text={type === 'text'}
   class:button-icon={type === 'icon'}
@@ -94,4 +94,14 @@ import Icon from '../media/Icon.svelte';
   .button-icon:hover {
     background-color: var(--button-hover-background-color, transparent);
   }
+
+  .no-select {
+    -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+      -khtml-user-select: none; /* Konqueror HTML */
+        -moz-user-select: none; /* Old versions of Firefox */
+          -ms-user-select: none; /* Internet Explorer/Edge */
+              user-select: none; /* Non-prefixed version, currently
+                                    supported by Chrome, Edge, Opera and Firefox */
+  }
 </style>

package/index.d.ts

@@ -15,6 +15,7 @@ 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';
+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';

package/index.js

@@ -21,6 +21,7 @@ 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';
+export { default as Drawer } from './navigation/Drawer.svelte';
 // progress
 export { default as ProgressBar } from './progress/ProgressBar.svelte';
 // shop

package/navigation/Drawer.svelte

@@ -0,0 +1,140 @@
+<script >import Navigator from './Navigator.svelte';
+export let open = false, position = 'left', space = '200px', openingSpeed = '0.3s', overlaySpeed = '0.2s', blockScroll = true, color = undefined, overlay = true, backgroundColor = undefined, overlayColor = '#282828', overlayOpacity = '30%', zIndex = 30, items = [];
+let height = undefined, width = undefined, top = undefined, bottom = undefined, left = undefined, right = undefined;
+function handleClickOverlay() {
+    open = false;
+}
+$: if (position == 'left') {
+    height = '100vh';
+    width = space;
+    top = '0px';
+    bottom = undefined;
+    right = undefined;
+    if (open) {
+        left = `0px`;
+    }
+    else {
+        left = `-${space}`;
+    }
+}
+else if (position == 'right') {
+    height = '100vh';
+    width = space;
+    top = '0px';
+    bottom = undefined;
+    left = 'auto';
+    if (open) {
+        right = `0px`;
+    }
+    else {
+        right = `calc(0vw - ${space})`;
+    }
+}
+else if (position == 'top') {
+    height = space;
+    width = '100vw';
+    bottom = undefined;
+    left = '0px';
+    right = undefined;
+    if (open) {
+        top = `0px`;
+    }
+    else {
+        top = `-${space}`;
+    }
+}
+else if (position == 'bottom') {
+    height = space;
+    width = '100vw';
+    top = 'auto';
+    left = '0px';
+    right = undefined;
+    if (open) {
+        bottom = `0px`;
+    }
+    else {
+        bottom = `calc(0vh - ${space})`;
+    }
+}
+</script>
+
+<div
+  style:--drawer-opening-speed={openingSpeed}
+  style:position="fixed"
+  style:height={height}
+  style:width={width}
+  style:top={top}
+  style:bottom={bottom}
+  style:left={left}
+  style:right={right}
+  style:background-color={backgroundColor}
+  style:z-index={zIndex}
+  style:color={color}
+  class:animate-left={position == 'left'}
+  class:animate-right={position == 'right'}
+  class:animate-bottom={position == 'bottom'}
+  class:animate-top={position == 'top'}
+>
+  <slot {open}>
+    <div
+      style:display="flex"
+      style:justify-content="center"
+      style:align-items="center"
+      style:margin-top={position == 'left' || position == 'right' ? '10px' : '0px'}
+      style:height={position == 'top' || position == 'bottom' ? '100%' : 'fit-content'}
+    >
+      <Navigator
+        items={items}
+        vertical={position == 'right' || position == 'left'}
+        on:item-click
+      ></Navigator>
+    </div>
+  </slot>
+</div>
+{#if overlay}
+  <div
+    on:click={handleClickOverlay}
+    style:z-index={open ? zIndex - 1 : -5}
+    style:position="fixed"
+    style:top="0px"
+    style:left="0px"
+    style:width="100vw"
+    style:height="100vh"
+    style:background-color={overlayColor}
+    style:--drawer-overlay-opacity={overlayOpacity}
+    style:--drawer-overlay-speed={overlaySpeed}
+    class="overlay"
+    class:overlay-active={open}
+    class:overlay-hidden={!open}
+  ></div>
+{/if}
+
+<style>
+  .animate-left {
+    transition: left var(--drawer-opening-speed) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .animate-right {
+    transition: right var(--drawer-opening-speed) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .animate-bottom {
+    transition: bottom var(--drawer-opening-speed) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .animate-top {
+    transition: top var(--drawer-opening-speed) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .overlay {
+    transition: all var(--drawer-overlay-speed) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .overlay-active {
+    opacity: var(--drawer-overlay-opacity);
+  }
+
+  .overlay-hidden {
+    opacity: 0%;
+  }
+</style>

package/navigation/Drawer.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Item } from './Navigator.svelte';
+declare const __propDef: {
+    props: {
+        open?: boolean;
+        position?: 'left' | 'top' | 'right' | 'bottom';
+        space?: string;
+        openingSpeed?: string;
+        overlaySpeed?: string;
+        blockScroll?: boolean;
+        color?: string;
+        overlay?: boolean;
+        backgroundColor?: string;
+        overlayColor?: string;
+        overlayOpacity?: string;
+        zIndex?: number;
+        items?: Item[];
+    };
+    events: {
+        'item-click': CustomEvent<{
+            item: Item;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            open: boolean;
+        };
+    };
+};
+export declare type DrawerProps = typeof __propDef.props;
+export declare type DrawerEvents = typeof __propDef.events;
+export declare type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
+}
+export {};

package/navigation/HeaderMenu.svelte

@@ -1,4 +1,4 @@
-<script >export let title = "", items = [], hideOnScroll = true, initialRemoveShadow = false, initialBackgroundColor = undefined, backgroundColor = 'white', color = undefined;
+<script >export let title = "", items = [], hideOnScroll = true, initialRemoveShadow = false, initialBackgroundColor = undefined, backgroundColor = 'white', color = undefined, mobileMenu = true;
 let scrollY, lastScrollY, visible = true;
 function handleScroll() {
     if (hideOnScroll) {
@@ -11,12 +11,18 @@ function handleScroll() {
     }
     lastScrollY = scrollY;
 }
+export let openDrawer = false;
+function toggleDrawer() {
+    openDrawer = !openDrawer;
+}
 let localBackgroundColor = undefined;
 $: if (scrollY == 0 && !!initialBackgroundColor)
     localBackgroundColor = initialBackgroundColor;
 else
     localBackgroundColor = backgroundColor;
 import Navigator from './Navigator.svelte';
+import Button from '../buttons/Button.svelte';
+import Drawer from './Drawer.svelte';
 </script>
 
 <svelte:window
@@ -24,6 +30,15 @@ import Navigator from './Navigator.svelte';
   on:scroll={handleScroll}
 ></svelte:window>
 
+{#if mobileMenu }
+  <Drawer
+    bind:open={openDrawer}
+    backgroundColor={backgroundColor}
+    color={color}
+    items={items}
+    on:item-click
+  ></Drawer>
+{/if}
 <nav
   style:color={color}
   style:background-color={localBackgroundColor}
@@ -37,14 +52,33 @@ import Navigator from './Navigator.svelte';
   class:top-0={visible}
   class:shadow-md={!initialRemoveShadow || scrollY != 0}
 >
-  {#if $$slots.prepend}
-    <div 
-      style:height="56px"
-      style:flex="none"
+  <div 
+    style:height="56px"
+    style:flex="none"
+    style:display="flex"
+    style:align-items="center"
+  >
+    <slot 
+      name="prepend" 
+      toggleDrawer={toggleDrawer} 
+      openDrawer={openDrawer}
     >
-      <slot name="prepend"></slot>
-    </div>
-  {/if}
+      {#if mobileMenu}
+        <div 
+          style:width="fit-content"
+          style:margin-left="10px"
+          style:margin-right="10px"
+          class="hide-on-desktop"
+        >
+          <Button
+            type="icon"
+            icon="mdi-menu"
+            on:click={toggleDrawer}
+          ></Button>
+        </div>
+      {/if}
+    </slot>
+  </div>
   <div 
     style:flex-grow="1"
     style:margin-left="4px"
@@ -57,10 +91,14 @@ import Navigator from './Navigator.svelte';
     </slot>
   </div>
   <div>
-    <Navigator
-      items={items}
-      on:item-click
-    ></Navigator>
+    <slot name="menu-desktop">
+      <div class="hide-on-mobile">
+        <Navigator
+          items={items}
+          on:item-click
+        ></Navigator>
+      </div>
+    </slot>
   </div>
   <slot name="append"></slot>
 </nav>
@@ -96,4 +134,26 @@ import Navigator from './Navigator.svelte';
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
+
+  .hide-on-mobile {
+    visibility: visible !important;
+  }
+
+  .hide-on-desktop {
+    visibility: visible !important;
+  }
+
+  @media (max-width: 767.98px) {
+    .hide-on-mobile {
+      visibility: hidden !important;
+      display: none !important;
+    }
+  }
+
+  @media (min-width: 768px){
+    .hide-on-desktop {
+      visibility: hidden !important;
+      display: none !important;
+    }
+  }
 </style>

package/navigation/HeaderMenu.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         initialBackgroundColor?: string;
         backgroundColor?: string;
         color?: string;
+        mobileMenu?: boolean;
+        openDrawer?: boolean;
     };
     events: {
         'item-click': CustomEvent<{
@@ -18,8 +20,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        prepend: {};
+        prepend: {
+            toggleDrawer: () => void;
+            openDrawer: boolean;
+        };
         title: {};
+        'menu-desktop': {};
         append: {};
     };
 };

package/navigation/Navigator.svelte

@@ -1,7 +1,7 @@
 <script context="module" >export {};
 </script>
 
-<script >export let items = [], color = undefined;
+<script >export let items = [], color = undefined, vertical = false, space = '20px';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 function handleItemClick(item) {
@@ -11,10 +11,13 @@ function handleItemClick(item) {
 
 <div 
   style:display="flex"
+  style:flex-direction={vertical ? 'column' : 'row'}
 >
   {#each items as item}
     <div 
-      style:margin-right="20px"
+      style:width="fit-content"
+      style:margin-right={!vertical ? space : undefined}
+      style:margin-bottom={vertical ? space : undefined}
       style:color={color}
       class="link bar-link"
       on:click={() => handleItemClick(item)}

package/navigation/Navigator.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
     props: {
         items?: Item[];
         color?: string;
+        vertical?: boolean;
+        space?: string;
     };
     events: {
         "item-click": CustomEvent<{

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.18",
+  "version": "0.0.21",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -43,6 +43,7 @@
     "./media/Image.svelte": "./media/Image.svelte",
     "./media/ImageGrid.svelte": "./media/ImageGrid.svelte",
     "./navigation/Breadcrumb.svelte": "./navigation/Breadcrumb.svelte",
+    "./navigation/Drawer.svelte": "./navigation/Drawer.svelte",
     "./navigation/HeaderMenu.svelte": "./navigation/HeaderMenu.svelte",
     "./navigation/Navigator.svelte": "./navigation/Navigator.svelte",
     "./navigation/TabSwitcher.svelte": "./navigation/TabSwitcher.svelte",