@likable-hair/svelte 0.0.17 → 0.0.20

package/buttons/Button.svelte

@@ -1,27 +1,34 @@
-<script >export let type = 'default';
-export let icon = undefined;
-export let iconSize = 15;
-let clazz = '';
+<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;
-$: cssVariables = Object.entries({
-    '--icon-button-height': (iconSize + 15) + 'pt',
-    '--icon-button-width': (iconSize + 15) + 'pt',
-    '--button-position': position
-}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
 import Icon from '../media/Icon.svelte';
 </script>
 
 <div 
-  class="button {clazz}"
+  style:width={width}
+  style:max-width={maxWidth}
+  style:min-width={minWidth}
+  style:height={height}
+  style:max-height={maxHeight}
+  style:min-height={minHeight}
+  style:text-align={textAlign}
+  style:position={position}
+  style:cursor={cursor}
+  style:padding={padding}
+  style:font-size={fontSize}
+  style:color={color}
+  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 no-select {clazz}"
   class:button-default={type === 'default'}
   class:button-text={type === 'text'}
   class:button-icon={type === 'icon'}
   on:click
-  style={cssVariables}
 >
   {#if !!icon}
     <Icon name={icon} size={iconSize}></Icon>
@@ -31,7 +38,6 @@ import Icon from '../media/Icon.svelte';
   {#if $$slots.append}
     <span class="append-item">
       <slot name="append">
-        
       </slot>
     </span>
   {/if}
@@ -45,57 +51,57 @@ import Icon from '../media/Icon.svelte';
 
   .button {
     overflow: hidden;
-    position: var(--button-position);
-    width: var(--width, fit-content);
-    height: var(--height, fit-content);
-    text-align: var(--text-align, center);
-    cursor: var(--cursor, pointer);
-    padding: var(--padding, 5px);
-    font-size: var(--font-size);
   }
 
   .button-default {
     transition: background-color 200ms;
-    color: var(--color);
-    background-color: var(--background-color);
+    background-color: var(--button-background-color);
     outline: 0;
     border: 0;
-    border-radius: var(--border-radius, 0.25rem);
-    box-shadow: var(--box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
+    border-radius: var(--button-border-radius, 0.25rem);
+    box-shadow: var(--button-box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
   }
 
   .button-default:hover {
-    background-color: var(--hover-background-color, var(--background-color));
+    background-color: var(--button-hover-background-color, var(--button-background-color));
   }
 
   .button-text {
-    color: var(--color);
     transition: background-color 200ms;
     text-transform: uppercase;
     font-weight: 600;
     outline: 0;
     border: 0;
-    border-radius: var(--border-radius, 0.25rem);
+    border-radius: var(--button-border-radius, 0.25rem);
   }
 
   .button-text:hover {
-    background-color: var(--hover-background-color, transparent);
+    background-color: var(--button-hover-background-color, transparent);
   }
 
   .button-icon {
-    color: var(--color);
     transition: background-color 200ms;
     outline: 0;
     border: 0;
-    border-radius: var(--border-radius, 50%);
-    height: var(--icon-button-height) !important;
-    width: var(--icon-button-width) !important;
+    border-radius: var(--button-border-radius, 50%);
+    height: var(--button-icon-height) !important;
+    width: var(--button-icon-width) !important;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
   .button-icon:hover {
-    background-color: var(--hover-background-color, transparent);
+    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/buttons/Button.svelte.d.ts

@@ -5,6 +5,21 @@ declare const __propDef: {
         icon?: string;
         iconSize?: number;
         class?: string;
+        maxWidth?: string;
+        maxHeight?: string;
+        minWidth?: string;
+        minHeight?: string;
+        width?: string;
+        height?: string;
+        textAlign?: string;
+        cursor?: string;
+        padding?: string;
+        fontSize?: string;
+        color?: string;
+        backgroundColor?: string;
+        hoverBackgroundColor?: string;
+        borderRadius?: string;
+        boxShadow?: string;
     };
     events: {
         click: MouseEvent;

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/media/ImageGrid.svelte

@@ -35,7 +35,7 @@ import Image from './Image.svelte';
   .flex-container {
     display: flex;
     flex-wrap: wrap;
-    justify-content: start;
+    justify-content: flex-start;
     align-items: center;
   }
 

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,6 +1,4 @@
-<script >export let title = "";
-export let items = [];
-export let hideOnScroll = true;
+<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) {
@@ -10,10 +8,21 @@ function handleScroll() {
         else {
             visible = true;
         }
-        lastScrollY = scrollY;
     }
+    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
@@ -21,24 +30,55 @@ 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}
   style:position="sticky"
   style:display="flex"
   style:flex-wrap="wrap"
   style:align-items="center"
   style:height="56px"
-  class="shadow-md transition-all header-menu-container"
+  class="transition-all header-menu-container"
   class:-top-14={!visible}
   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"
@@ -51,17 +91,20 @@ import Navigator from './Navigator.svelte';
     </slot>
   </div>
   <div>
-    <Navigator
-      items={items}
-    ></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>
 
 <style>
   .header-menu-container {
-    background-color: var(--background-color, white);
-    color: var(--color);
     width: var(--width, 100vw)
   }
 
@@ -91,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

@@ -5,13 +5,27 @@ declare const __propDef: {
         title?: string;
         items?: Item[];
         hideOnScroll?: boolean;
+        initialRemoveShadow?: boolean;
+        initialBackgroundColor?: string;
+        backgroundColor?: string;
+        color?: string;
+        mobileMenu?: boolean;
+        openDrawer?: boolean;
     };
     events: {
+        'item-click': CustomEvent<{
+            item: Item;
+        }>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        prepend: {};
+        prepend: {
+            toggleDrawer: () => void;
+            openDrawer: boolean;
+        };
         title: {};
+        'menu-desktop': {};
         append: {};
     };
 };

package/navigation/Navigator.svelte

@@ -1,16 +1,26 @@
 <script context="module" >export {};
 </script>
 
-<script >export let items = [];
+<script >export let items = [], color = undefined, vertical = false, space = '20px';
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+function handleItemClick(item) {
+    dispatch('item-click', { item });
+}
 </script>
 
 <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)}
     >
       {item.title}
     </div>
@@ -23,14 +33,13 @@
     font-size: 18px;
     position: relative;
     white-space: nowrap;
-    color: var(--color-text);
   }
 
   .link::before,
   .link::after {
     position: absolute;
     width: 100%;
-    height: 1px;
+    height: 1.5px;
     background: currentColor;
     top: 100%;
     left: 0;

package/navigation/Navigator.svelte.d.ts

@@ -7,8 +7,15 @@ export declare type Item = {
 declare const __propDef: {
     props: {
         items?: Item[];
+        color?: string;
+        vertical?: boolean;
+        space?: string;
     };
     events: {
+        "item-click": CustomEvent<{
+            item: Item;
+        }>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.17",
+  "version": "0.0.20",
   "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",