@likable-hair/svelte 2.0.8 → 3.0.0

package/dist/components/simple/navigation/Drawer.svelte

@@ -1,69 +1,19 @@
-<script>import Navigator from "./Navigator.svelte";
-export let open = false, position = "left", space = "200px", openingSpeed = "0.3s", overlaySpeed = "0.2s", color = void 0, overlay = true, backgroundColor = void 0, overlayColor = "#282828", overlayOpacity = "30%", zIndex = 30, items = [];
-let height = void 0, width = void 0, top = void 0, bottom = void 0, left = void 0, right = void 0;
+<script>import "./Drawer.css";
+import Navigator from "./Navigator.svelte";
+export let open = false, position = "left", overlay = true, items = [];
 function handleClickOverlay() {
   open = false;
 }
-$:
-  if (position == "left") {
-    height = "100vh";
-    width = space;
-    top = "0px";
-    bottom = void 0;
-    right = void 0;
-    if (open) {
-      left = `0px`;
-    } else {
-      left = `-${space}`;
-    }
-  } else if (position == "right") {
-    height = "100vh";
-    width = space;
-    top = "0px";
-    bottom = void 0;
-    left = "auto";
-    if (open) {
-      right = `0px`;
-    } else {
-      right = `calc(0vw - ${space})`;
-    }
-  } else if (position == "top") {
-    height = space;
-    width = "100vw";
-    bottom = void 0;
-    left = "0px";
-    right = void 0;
-    if (open) {
-      top = `0px`;
-    } else {
-      top = `-${space}`;
-    }
-  } else if (position == "bottom") {
-    height = space;
-    width = "100vw";
-    top = "auto";
-    left = "0px";
-    right = void 0;
-    if (open) {
-      bottom = `0px`;
-    } else {
-      bottom = `calc(0vh - ${space})`;
-    }
-  }
 </script>
 
 <div
-  style:--drawer-opening-speed={openingSpeed}
   style:position="fixed"
-  style:height
-  style:width
-  style:top
-  style:bottom
-  style:left
-  style:right
-  style:background-color={backgroundColor}
-  style:z-index={zIndex}
-  style:color
+  class="container"
+  class:left={position == 'left'}
+  class:right={position == 'right'}
+  class:top={position == 'top'}
+  class:bottom={position == 'bottom'}
+  class:opened={open}
   class:animate-left={position == "left"}
   class:animate-right={position == "right"}
   class:animate-bottom={position == "bottom"}
@@ -93,15 +43,6 @@ $:
   <div
     on:click={handleClickOverlay}
     on:keypress={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}
@@ -110,30 +51,96 @@ $:
 
 <style>
   .animate-left {
-    transition: left var(--drawer-opening-speed) cubic-bezier(0.4, 0, 0.2, 1);
+    transition: left var(--drawer-opening-speed, var(--drawer-default-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);
+    transition: right var(--drawer-opening-speed, var(--drawer-default-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);
+    transition: bottom var(--drawer-opening-speed, var(--drawer-default-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);
+    transition: top var(--drawer-opening-speed, var(--drawer-default-opening-speed)) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .container {
+    z-index: var(--drawer-z-index, var(--drawer-default-z-index));
+    background-color: var(
+      --drawer-background-color,
+      var(--drawer-default-background-color)
+    );
+    color: var(--drawer-color, var(--drawer-default-color));
   }
 
   .overlay {
-    transition: all var(--drawer-overlay-speed) cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all var(--drawer-overlay-speed, var(--drawer-default-overlay-speed)) cubic-bezier(0.4, 0, 0.2, 1);
+    background-color: var(
+      --drawer-overlay-background-color,
+      var(--drawer-default-overlay-background-color)
+    );
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
   }
 
   .overlay-active {
-    opacity: var(--drawer-overlay-opacity);
+    opacity: var(
+      --drawer-overlay-opacity,
+      var(--drawer-default-overlay-opacity)
+    );
+    z-index: calc(var(--drawer-z-index, var(--drawer-default-z-index)) - 1);
   }
 
   .overlay-hidden {
     opacity: 0%;
   }
+
+  .left {
+    left: calc(0px - var(--drawer-space, var(--drawer-default-space)));
+    width: var(--drawer-space, var(--drawer-default-space));
+    bottom: 0px;
+    top: 0px;
+  }
+
+  .left.opened {
+    left: 0px;
+  }
+
+  .right {
+    right: calc(0px - var(--drawer-space, var(--drawer-default-space)));
+    width: var(--drawer-space, var(--drawer-default-space));
+    bottom: 0px;
+    top: 0px;
+  }
+
+  .right.opened {
+    right: calc(0px);
+  }
+
+  .top {
+    left: 0px;
+    right: 0px;
+    height: var(--drawer-space, var(--drawer-default-space));
+    top: calc(0px - var(--drawer-space, var(--drawer-default-space)));
+  }
+
+  .top.opened {
+    top: 0px;
+  }
+
+  .bottom {
+    left: 0px;
+    right: 0px;
+    height: var(--drawer-space, var(--drawer-default-space));
+    bottom: calc(0px - var(--drawer-space, var(--drawer-default-space)));
+  }
+
+  .bottom.opened {
+    bottom: 0px;
+  }
 </style>

package/dist/components/simple/navigation/Drawer.svelte.d.ts

@@ -1,18 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import './Drawer.css';
 import type { Item } from "./Navigator.svelte";
 declare const __propDef: {
     props: {
         open?: boolean | undefined;
         position?: "left" | "right" | "bottom" | "top" | undefined;
-        space?: string | undefined;
-        openingSpeed?: string | undefined;
-        overlaySpeed?: string | undefined;
-        color?: string | undefined;
         overlay?: boolean | undefined;
-        backgroundColor?: string | undefined;
-        overlayColor?: string | undefined;
-        overlayOpacity?: string | undefined;
-        zIndex?: number | undefined;
         items?: Item[] | undefined;
     };
     events: {

package/dist/components/simple/navigation/HeaderMenu.css

@@ -0,0 +1,3 @@
+:root {
+  
+}

package/dist/components/simple/navigation/HeaderMenu.svelte

@@ -1,4 +1,9 @@
-<script>export let title = "", items = [], hideOnScroll = true, initialRemoveShadow = false, initialBackgroundColor = void 0, backgroundColor = "white", color = void 0, drawerBackgroundColor = "white", drawerColor = void 0, drawerSpace = void 0, mobileMenu = true, zIndex = 25;
+<script>import "./HeaderMenu.css";
+import Button from "../buttons/Button.svelte";
+import Drawer from "./Drawer.svelte";
+import { createEventDispatcher } from "svelte";
+let dispatch = createEventDispatcher();
+export let title = "", hideOnScroll = true, initialRemoveShadow = false, color = void 0, mobileMenu = true, zIndex = 25;
 let scrollY, lastScrollY, visible = true;
 function handleScroll() {
   if (hideOnScroll) {
@@ -13,42 +18,24 @@ function handleScroll() {
 export let openDrawer = false;
 function toggleDrawer() {
   openDrawer = !openDrawer;
+  dispatch("drawer-change", {
+    opened: openDrawer
+  });
 }
-let localBackgroundColor = void 0;
-$:
-  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 bind:scrollY on:scroll={handleScroll} />
 
-{#if mobileMenu}
-  <Drawer
-    bind:open={openDrawer}
-    backgroundColor={drawerBackgroundColor}
-    color={drawerColor}
-    {items}
-    space={drawerSpace}
-    on:item-click
-  >
-    {#if !!$$slots.drawer}
-      <slot name="drawer" />
-    {/if}
-  </Drawer>
-{/if}
+<Drawer
+  bind:open={openDrawer}
+  on:item-click
+>
+  {#if !!$$slots.drawer}
+    <slot name="drawer" />
+  {/if}
+</Drawer>
 <nav
   style:color
-  style:background-color={localBackgroundColor}
-  style:position="sticky"
-  style:display="flex"
-  style:flex-wrap="wrap"
-  style:align-items="center"
-  style:height="56px"
   style:z-index={zIndex}
   class="transition-all header-menu-container"
   class:-top-14={!visible}
@@ -62,56 +49,45 @@ import Drawer from "./Drawer.svelte";
     style:align-items="center"
   >
     <slot name="prepend" {toggleDrawer} {openDrawer}>
-      {#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} />
-        </div>
-      {/if}
+      <div
+        style:width="fit-content"
+        style:margin-left="10px"
+        style:margin-right="10px"
+        class:hide-on-desktop={!mobileMenu}
+      >
+        <Button 
+          buttonType="icon" 
+          icon="mdi-menu" 
+          on:click={toggleDrawer} 
+          --button-default-background-color="transparent"
+        />
+      </div>
     </slot>
   </div>
-  <div style:flex-grow="1" style:margin-left="4px">
+  <div style:flex-grow="1" style:margin-left="4px" style:align-items="center">
     <slot name="title">
       <span style:font-size="24px" style:line-height="32px">{title}</span>
     </slot>
   </div>
-  <div>
-    <slot name="menu-desktop">
-      <div class="hide-on-mobile">
-        <Navigator {items} on:item-click />
-      </div>
-    </slot>
-  </div>
   <slot name="append" />
 </nav>
 
 <style>
   .header-menu-container {
-    width: var(--width, 100vw);
+    width: var(--header-menu-width, 100vw);
+    position: sticky;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    height: var(--header-menu-height, 56px);
   }
 
   .shadow-md {
-    --shadow-color: #000;
-    --ring-inset: inset;
-    --ring-offset-width: 0px;
-    --ring-color: rgb(255 255 255/0.1);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0
-      calc(1px + var(--ring-offset-width)) var(--ring-color);
-    --ring-shadow: 0 0 #0000;
-    --shadow: 0 0 #0000;
-    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --shadow-colored: 0 4px 6px -1px var(--shadow-color),
-      0 2px 4px -2px var(--shadow-color);
-    box-shadow: var(--ring-offset-shadow, 0 0 #0000),
-      var(--ring-shadow, 0 0 #0000), var(--shadow);
+    box-shadow: 5px 10px 15px -5px rgb(var(--global-color-background-200));
   }
 
   .-top-14 {
-    top: -56px;
+    top: var(--header-menu-height, 56px);
   }
 
   .top-0 {

package/dist/components/simple/navigation/HeaderMenu.svelte.d.ts

@@ -1,24 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Item } from "./Navigator.svelte";
+import './HeaderMenu.css';
 declare const __propDef: {
     props: {
         title?: string | undefined;
-        items?: Item[] | undefined;
         hideOnScroll?: boolean | undefined;
         initialRemoveShadow?: boolean | undefined;
-        initialBackgroundColor?: string | undefined;
-        backgroundColor?: string | undefined;
         color?: string | undefined;
-        drawerBackgroundColor?: string | undefined;
-        drawerColor?: string | undefined;
-        drawerSpace?: string | undefined;
         mobileMenu?: boolean | undefined;
         zIndex?: number | undefined;
         openDrawer?: boolean | undefined;
     };
     events: {
         'item-click': CustomEvent<{
-            item: Item;
+            item: import("./Navigator.svelte").Item;
+        }>;
+        'drawer-change': CustomEvent<{
+            opened: boolean;
         }>;
     } & {
         [evt: string]: CustomEvent<any>;
@@ -30,7 +27,6 @@ declare const __propDef: {
             openDrawer: boolean;
         };
         title: {};
-        'menu-desktop': {};
         append: {};
     };
 };

package/dist/components/simple/notifiers/AlertBanner.css

@@ -0,0 +1,9 @@
+:root {
+  --alert-banner-default-border-radius: 5px;
+  --alert-banner-default-color: var(--my-var-blue);
+  --alert-banner-default-border-width: .7rem;
+  --alert-banner-default-padding-left: .5rem;
+  --alert-banner-default-padding-top: .3rem;
+  --alert-banner-default-padding-bottom: .3rem;
+  --alert-banner-default-padding-bottom: .3rem;
+}

package/dist/components/simple/notifiers/AlertBanner.svelte

@@ -1,5 +1,7 @@
-<script>import { createEventDispatcher } from "svelte";
-export let _cursor = "pointer", _bannerColor = "grey", _borderRadius = null, _paddingLeft = null, _paddingRight = null, _paddingTop = null, _paddingBottom = null, _borderWidth = null, _width = null;
+<script>import "./AlertBanner.css";
+import { createEventDispatcher } from "svelte";
+let clazz = {};
+export { clazz as class };
 export let title = void 0, description = void 0, disabled = false;
 let dispatch = createEventDispatcher();
 function handleClickEvent(e) {
@@ -13,23 +15,14 @@ function handleKeypressEvent(e) {
 </script>
 
 <div 
-  style:--alert-banner-color={_bannerColor}
-  style:--alert-banner-border-radius={_borderRadius}
-  style:--alert-banner-padding-left={_paddingLeft}
-  style:--alert-banner-padding-right={_paddingRight}
-  style:--alert-banner-padding-top={_paddingTop}
-  style:--alert-banner-padding-bottom={_paddingBottom}
-  style:--alert-banner-border-width={_borderWidth}
-  style:width={_width}
-  class="alert-banner-container"
-  style:cursor={_cursor}
+  class="alert-banner-container {clazz.container || ''}"
   on:keypress={handleKeypressEvent}
   on:click={handleClickEvent}
 >
   <div 
-    class="border-colored"
+    class="border-colored {clazz.border || ''}"
   ></div>
-  <div class="body">
+  <div class="body {clazz.body || ''}">
     <div class="content">
       <slot name="content" title={title} description={description}>
         {#if !!title}
@@ -54,16 +47,22 @@ function handleKeypressEvent(e) {
   .alert-banner-container {
     position: relative;
     box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
-    border-radius: var(--alert-banner-border-radius, 5px);
+    border-radius: var(--alert-banner-border-radius, var(--alert-banner-default-border-radius));
+    cursor: var(--alert-banner-cursor, var(--alert-banner-default-cursor));
+    width: var(--alert-banner-width, var(--alert-banner-default-width));
   }
 
   .border-colored {
-    background-color: var(--alert-banner-color);
+    background-color: var(--alert-banner-color, var(--alert-banner-default-color));
     position: absolute;
-    width: var(--alert-banner-border-width, .7rem);
+    width: var(--alert-banner-border-width, var(--alert-banner-default-border-width));
     top: 0px;
     bottom: 0px;
-    border-radius: var(--alert-banner-border-radius, 5px) 0px 0px var(--alert-banner-border-radius, 5px);
+    border-radius: 
+      var(--alert-banner-border-radius, var(--alert-banner-default-border-radius))
+      0px 
+      0px 
+      var(--alert-banner-border-radius, var(--alert-banner-default-border-radius));
   }
 
   .body {
@@ -73,10 +72,10 @@ function handleKeypressEvent(e) {
   }
 
   .content {
-    padding-left: var(--alert-banner-padding-left, .5rem);
-    padding-top: var(--alert-banner-padding-top, .3rem);
-    padding-bottom: var(--alert-banner-padding-bottom, .3rem);
-    padding-right: var(--alert-banner-padding-bottom, .3rem);
+    padding-left: var(--alert-banner-padding-left, var(--alert-banner-default-padding-left));
+    padding-top: var(--alert-banner-padding-top, var(--alert-banner-default-padding-top));
+    padding-bottom: var(--alert-banner-padding-bottom, var(--alert-banner-default-padding-bottom));
+    padding-right: var(--alert-banner-padding-right, var(--alert-banner-default-padding-right));
   }
 
   .title {

package/dist/components/simple/notifiers/AlertBanner.svelte.d.ts

@@ -1,15 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import './AlertBanner.css';
 declare const __propDef: {
     props: {
-        _cursor?: string | undefined;
-        _bannerColor?: string | null | undefined;
-        _borderRadius?: string | null | undefined;
-        _paddingLeft?: string | null | undefined;
-        _paddingRight?: string | null | undefined;
-        _paddingTop?: string | null | undefined;
-        _paddingBottom?: string | null | undefined;
-        _borderWidth?: string | null | undefined;
-        _width?: string | null | undefined;
+        class?: {
+            container?: string | undefined;
+            border?: string | undefined;
+            body?: string | undefined;
+        } | undefined;
         title?: string | undefined;
         description?: string | undefined;
         disabled?: boolean | undefined;

package/dist/components/simple/timeline/SimpleTimeLine.svelte.d.ts

@@ -21,7 +21,7 @@ declare const __propDef: {
         circleColor?: string | undefined;
         circleDiameter?: string | undefined;
         timesWidth?: string | undefined;
-        circleAlignment?: "center" | "bottom" | "top" | undefined;
+        circleAlignment?: "bottom" | "top" | "center" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/simple/typography/Code.svelte.d.ts

@@ -13,7 +13,7 @@ declare const __propDef: {
         boxShadow?: string | undefined;
         code: string;
         title?: string | undefined;
-        language?: "html" | "javascript" | "bash" | "svelte" | undefined;
+        language?: "html" | "javascript" | "bash" | "svelte" | "typescript" | "css" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;