@likable-hair/svelte 0.0.77 → 2.0.0

package/{shop → dist/components/composed/shop}/ProductsGrid.svelte

@@ -1,22 +1,24 @@
-<script>export let products = [], productMaxWidth = '90vw', productMinWidth = '200px', productMaxHeight = '90vh', productMinHeight = '300px', productHeight = '300px', productWidth = '200px', width = '100%', gap = '1rem';
-import ProductCard from './ProductCard.svelte';
+<script>export let products = [], productMaxWidth = "90vw", productMinWidth = "200px", productMaxHeight = "90vh", productMinHeight = "300px", productHeight = "300px", productWidth = "200px", width = "100%", gap = "1rem";
+import ProductCard from "./ProductCard.svelte";
 </script>
 
-<div 
-  style:width={width}
-  style:gap={gap}
-  style:grid-template-columns={`repeat(auto-fit, minmax(${productMinWidth || productWidth || '200px'}, ${productWidth}))`}
+<div
+  style:width
+  style:gap
+  style:grid-template-columns={`repeat(auto-fit, minmax(${
+    productMinWidth || productWidth || "200px"
+  }, ${productWidth}))`}
   class="product-grid-container"
 >
-  {#each products as product }
+  {#each products as product}
     <div class="product-container">
       <ProductCard
         height={productHeight}
         width={productWidth}
-        max-width={productMaxWidth}
-        min-width={productMinWidth}
-        max-height={productMaxHeight}
-        min-height={productMinHeight}
+        maxWidth={productMaxWidth}
+        minWidth={productMinWidth}
+        maxHeight={productMaxHeight}
+        minHeight={productMinHeight}
         image={product.image}
         title={product.title}
         sale={product.sale}
@@ -26,7 +28,7 @@ import ProductCard from './ProductCard.svelte';
         discount={product.discount}
       >
         <svelte:fragment slot="sizes">
-          <slot name="sizes" {product} ></slot>
+          <slot name="sizes" {product} />
         </svelte:fragment>
       </ProductCard>
     </div>
@@ -48,4 +50,4 @@ import ProductCard from './ProductCard.svelte';
       justify-content: space-around;
     }
   }
-</style>
+</style>

package/dist/components/composed/shop/ProductsGrid.svelte.d.ts

@@ -0,0 +1,44 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        products?: {
+            image: string;
+            title: string;
+            sale?: boolean | undefined;
+            saleText?: string | undefined;
+            price?: number | undefined;
+            currency?: string | undefined;
+            discount?: number | undefined;
+        }[] | undefined;
+        productMaxWidth?: string | undefined;
+        productMinWidth?: string | undefined;
+        productMaxHeight?: string | undefined;
+        productMinHeight?: string | undefined;
+        productHeight?: string | undefined;
+        productWidth?: string | undefined;
+        width?: string | undefined;
+        gap?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        sizes: {
+            product: {
+                image: string;
+                title: string;
+                sale?: boolean | undefined;
+                saleText?: string | undefined;
+                price?: number | undefined;
+                currency?: string | undefined;
+                discount?: number | undefined;
+            };
+        };
+    };
+};
+export type ProductsGridProps = typeof __propDef.props;
+export type ProductsGridEvents = typeof __propDef.events;
+export type ProductsGridSlots = typeof __propDef.slots;
+export default class ProductsGrid extends SvelteComponentTyped<ProductsGridProps, ProductsGridEvents, ProductsGridSlots> {
+}
+export {};

package/dist/components/layouts/StableDividedSideBarLayout.svelte

@@ -0,0 +1,189 @@
+<script>import MediaQuery from "../simple/common/MediaQuery.svelte";
+import Icon from "../simple/media/Icon.svelte";
+import { createEventDispatcher } from "svelte";
+export let sideBarWidth = "18rem", sideBarBorderColor = "hsl(0deg 0% 39.85% / 50%)", sideBarPadding = "1rem 1.5rem 2rem 1.5rem", headerMenuHeight = "3.5rem", headerMenuBorderColor = "hsl(0deg 0% 39.85% / 50%)", headerMenuPadding = "0rem 2rem 0rem 2rem", padding = "1rem 2rem 1rem 2rem", innerHeaderMenuBackgroundColor = "rgb(255 255 255/0.5)", drawerBackgroundColor = "white", drawerWidth = "24rem", drawerOpened = false;
+let dispatch = createEventDispatcher();
+function toggleMenu() {
+  drawerOpened = !drawerOpened;
+  dispatch("drawer-change", { opened: drawerOpened });
+}
+function handleOverlayClick() {
+  drawerOpened = false;
+  dispatch("drawer-change", { opened: drawerOpened });
+}
+</script>
+
+<MediaQuery let:mAndDown>
+  <div
+    style:--stable-divider-side-bar-layout-side-bar-width={sideBarWidth}
+    style:--stable-divider-side-bar-layout-side-bar-border-color={sideBarBorderColor}
+    style:--stable-divider-side-bar-layout-side-bar-padding={sideBarPadding}
+    style:--stable-divider-side-bar-layout-header-menu-height={headerMenuHeight}
+    style:--stable-divider-side-bar-layout-header-menu-border-color={headerMenuBorderColor}
+    style:--stable-divider-side-bar-layout-header-menu-padding={headerMenuPadding}
+    style:--stable-divider-side-bar-layout-inner-header-menu-background-color={innerHeaderMenuBackgroundColor}
+    style:--stable-divider-side-bar-layout-drawer-background-color={drawerBackgroundColor}
+    style:--stable-divider-side-bar-layout-drawer-width={drawerWidth}
+  >
+    <header 
+      class="side-bar"
+      class:opened={drawerOpened}
+    >
+      <div 
+        class="header-toolbar"
+        class:opened-drawer={drawerOpened}
+      >
+        <slot name="menu">
+          <div class="inner-menu">
+            {#if mAndDown}
+              <div style:margin-right="2rem">
+                <Icon 
+                  name="mdi-menu" 
+                  click
+                  on:click={toggleMenu}
+                ></Icon>
+              </div>
+            {/if}
+            <slot name="inner-menu" hamburgerVisible={mAndDown}>
+              Menu
+            </slot>
+          </div>
+        </slot>
+      </div>
+      <div class="side-bar-content">
+        <slot name="sidebar" hamburgerVisible={mAndDown}>
+          Sidebar
+        </slot>
+      </div>
+    </header>
+    <div class="main-section">
+      <div 
+        class="overlay"
+        on:click={handleOverlayClick}
+        on:keypress={handleOverlayClick}
+        class:visible={drawerOpened}
+      ></div>
+      <div
+        style:padding={padding}
+        class:blurred={drawerOpened}
+      >
+        <slot>Content</slot>
+      </div>
+    </div>
+  </div>
+</MediaQuery>
+
+
+<style>
+  .side-bar {
+    position: fixed;
+    width: var(--stable-divider-side-bar-layout-side-bar-width);
+    border-right: 1px solid var(--stable-divider-side-bar-layout-side-bar-border-color);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: var(--stable-divider-side-bar-layout-side-bar-padding);
+  }
+
+  .overlay {
+    display: none;
+  }
+
+  @media (max-width: 1024px) {
+  	.side-bar {
+      left: calc(0rem - var(--stable-divider-side-bar-layout-drawer-width));
+      right: auto;
+      transition-property: left;
+      transition-timing-function: cubic-bezier(.4,0,.2,1);
+      transition-duration: .5s;
+      top: var(--stable-divider-side-bar-layout-header-menu-height);
+      background-color: var(--stable-divider-side-bar-layout-drawer-background-color);
+      bottom: 0;
+      z-index: 30;
+      width: var(--stable-divider-side-bar-layout-drawer-width);
+      max-width: 100vw;
+    }
+
+    .side-bar.opened {
+      left: 0;
+    }
+
+    .overlay {
+      position: fixed;
+      top: var(--stable-divider-side-bar-layout-header-menu-height);
+      left: 0;
+      bottom: 0;
+      right: 0;
+      z-index: -100;
+      transition-property: backdrop-filter;
+      transition-timing-function: cubic-bezier(.4,0,.2,1);
+      transition-duration: .15s;
+      display: block;
+    }
+
+    .overlay.visible {
+      background-color: hsla(240,5%,65%,.2);
+      backdrop-filter: blur(4px);
+      z-index: 20;
+    }
+  }
+
+  .header-toolbar {
+    position: fixed;
+    height: var(--stable-divider-side-bar-layout-header-menu-height);
+    left: var(--stable-divider-side-bar-layout-side-bar-width);
+    border-bottom: 1px solid var(--stable-divider-side-bar-layout-header-menu-border-color);
+    backdrop-filter: blur(4px);
+    background-color: var(--stable-divider-side-bar-layout-inner-header-menu-background-color);
+    transition-property: background-color;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .5s;
+    right: 0;
+    top: 0;
+  }
+
+  @media (max-width: 1024px) {
+  	.header-toolbar {
+      left: 0;
+    }
+
+    .header-toolbar.opened-drawer {
+      background-color: inherit;
+    }
+
+    .header-toolbar:hover {
+      background-color: inherit;
+    }
+  }
+
+  .main-section {
+    padding-left: var(--stable-divider-side-bar-layout-side-bar-width);
+    padding-top: var(--stable-divider-side-bar-layout-header-menu-height);
+  }
+
+  @media (max-width: 1024px) {
+  	.main-section {
+      padding-left: 0;
+    }
+
+    .blurred {
+      backdrop-filter: blur(4px);
+    }
+  }
+
+  .inner-menu {
+    padding: var(--stable-divider-side-bar-layout-header-menu-padding);
+    background-color: var(--stable-divider-side-bar-layout-inner-header-menu-background-color);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  * {
+    box-sizing: border-box;
+    border: 0 solid #e5e7eb;
+  }
+
+</style>

package/dist/components/layouts/StableDividedSideBarLayout.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        sideBarWidth?: string | undefined;
+        sideBarBorderColor?: string | undefined;
+        sideBarPadding?: string | undefined;
+        headerMenuHeight?: string | undefined;
+        headerMenuBorderColor?: string | undefined;
+        headerMenuPadding?: string | undefined;
+        padding?: string | undefined;
+        innerHeaderMenuBackgroundColor?: string | undefined;
+        drawerBackgroundColor?: string | undefined;
+        drawerWidth?: string | undefined;
+        drawerOpened?: boolean | undefined;
+    };
+    events: {
+        'drawer-change': CustomEvent<{
+            opened: boolean;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        menu: {};
+        'inner-menu': {
+            hamburgerVisible: boolean;
+        };
+        sidebar: {
+            hamburgerVisible: boolean;
+        };
+        default: {};
+    };
+};
+export type StableDividedSideBarLayoutProps = typeof __propDef.props;
+export type StableDividedSideBarLayoutEvents = typeof __propDef.events;
+export type StableDividedSideBarLayoutSlots = typeof __propDef.slots;
+export default class StableDividedSideBarLayout extends SvelteComponentTyped<StableDividedSideBarLayoutProps, StableDividedSideBarLayoutEvents, StableDividedSideBarLayoutSlots> {
+}
+export {};

package/dist/components/simple/buttons/Button.svelte

@@ -0,0 +1,147 @@
+<script>export let type = "default", active = false, loading = false, icon = void 0, iconSize = 15, maxWidth = void 0, maxHeight = void 0, minWidth = void 0, minHeight = void 0, width = void 0, height = void 0, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = void 0, color = void 0, display = void 0, justifyContent = void 0, alignItems = void 0, backgroundColor = void 0, hoverBackgroundColor = "#88888847", activeBackgroundColor = hoverBackgroundColor, borderRadius = void 0, border = void 0, boxShadow = void 0, loaderHeight = "15px", loaderWidth = void 0, disabled = false;
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+function handleClick(event) {
+  if (disabled)
+    return;
+  dispatch("click", {
+    nativeEvent: event
+  });
+}
+function handleKeyPress(event) {
+  if (disabled)
+    return;
+  dispatch("keypress", {
+    nativeEvent: event
+  });
+}
+$:
+  defaultBorderRadius = type == "icon" ? "50%" : "5px";
+$:
+  position = $$slots.append ? "relative" : void 0;
+import Icon from "../media/Icon.svelte";
+import CircularLoader from "../loaders/CircularLoader.svelte";
+</script>
+
+<div
+  style:width
+  style:max-width={maxWidth}
+  style:min-width={minWidth}
+  style:height
+  style:max-height={maxHeight}
+  style:min-height={minHeight}
+  style:text-align={textAlign}
+  style:position
+  style:cursor
+  style:padding
+  style:font-size={fontSize}
+  style:color
+  style:display
+  style:justify-content={justifyContent}
+  style:align-items={alignItems}
+  style:--button-border={border}
+  style:--button-border-radius={borderRadius
+    ? borderRadius
+    : defaultBorderRadius}
+  style:--button-background-color={active
+    ? activeBackgroundColor
+    : 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"
+  class:button-default={type === "default"}
+  class:button-text={type === "text"}
+  class:button-icon={type === "icon"}
+  on:click={handleClick}
+  on:keypress={handleKeyPress}
+>
+  {#if loading}
+    <div
+      style:height={'calc(' + loaderHeight + ' + .6rem)'}
+      style:display="flex"
+      style:align-items="center"
+    >
+      <CircularLoader {color} height={loaderHeight} width={loaderWidth} />
+    </div>
+  {:else}
+    {#if !!icon}
+      <Icon name={icon} size={iconSize} />
+    {:else}
+      <slot />
+    {/if}
+    {#if $$slots.append}
+      <span class="append-item">
+        <slot name="append" />
+      </span>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .append-item {
+    position: absolute;
+    right: 0px;
+  }
+
+  .button {
+    overflow: hidden;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .button-default {
+    transition: background-color 200ms;
+    background-color: var(--button-background-color);
+    outline: 0;
+    border: var(--button-border);
+    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(
+      --button-hover-background-color,
+      var(--button-background-color)
+    );
+  }
+
+  .button-text {
+    transition: background-color 200ms;
+    text-transform: uppercase;
+    font-weight: 600;
+    outline: 0;
+    border: var(--button-border);
+    border-radius: var(--button-border-radius, 0.25rem);
+  }
+
+  .button-text:hover {
+    background-color: var(--button-hover-background-color, transparent);
+  }
+
+  .button-icon {
+    transition: background-color 200ms;
+    outline: 0;
+    border: var(--button-border);
+    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(--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/dist/components/simple/buttons/Button.svelte.d.ts

@@ -0,0 +1,53 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: "default" | "text" | "icon" | undefined;
+        active?: boolean | undefined;
+        loading?: boolean | undefined;
+        icon?: string | undefined;
+        iconSize?: number | undefined;
+        maxWidth?: string | undefined;
+        maxHeight?: string | undefined;
+        minWidth?: string | undefined;
+        minHeight?: string | undefined;
+        width?: string | undefined;
+        height?: string | undefined;
+        textAlign?: string | undefined;
+        cursor?: string | undefined;
+        padding?: string | undefined;
+        fontSize?: string | undefined;
+        color?: string | null | undefined;
+        display?: string | undefined;
+        justifyContent?: string | undefined;
+        alignItems?: string | undefined;
+        backgroundColor?: string | undefined;
+        hoverBackgroundColor?: string | undefined;
+        activeBackgroundColor?: string | undefined;
+        borderRadius?: string | undefined;
+        border?: string | undefined;
+        boxShadow?: string | undefined;
+        loaderHeight?: string | undefined;
+        loaderWidth?: string | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<{
+            nativeEvent: MouseEvent;
+        }>;
+        keypress: CustomEvent<{
+            nativeEvent: KeyboardEvent;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        append: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/components/simple/buttons/DefaultButton.svelte

@@ -0,0 +1,93 @@
+<script>import { createEventDispatcher } from "svelte";
+export let _backgroundColor = null, _border = null, _padding = null, _color = null, _borderRadius = null, _cursor = null, _opacity = null, _transitionTimingFunction = null, _transitionDuration = null, _boxShadow = null, _disabledBackgroundColor = null, _disabledBorder = null, _disabledColor = null, _disabledOpacity = null, _hoverBackgroundColor = null, _hoverBorder = null, _hoverColor = null, _hoverOpacity = null, _hoverBoxShadow = null, _activeBackgroundColor = null, _activeBorder = null, _activeColor = null, _activeOpacity = null, _activeBoxShadow = null;
+export let disabled = false, active = false;
+const dispatch = createEventDispatcher();
+function handleClick(event) {
+  if (disabled)
+    return;
+  dispatch("click", {
+    nativeEvent: event
+  });
+}
+function handleKeyPress(event) {
+  if (disabled)
+    return;
+  dispatch("keypress", {
+    nativeEvent: event
+  });
+}
+</script>
+
+<button
+  style:--button-disabled-background-color={_disabledBackgroundColor}
+  style:--button-disabled-border={_disabledBorder}
+  style:--button-disabled-color={_disabledColor}
+  style:--button-disabled-opacity={_disabledOpacity}
+  style:--button-hover-background-color={_hoverBackgroundColor}
+  style:--button-hover-border={_hoverBorder}
+  style:--button-hover-color={_hoverColor}
+  style:--button-hover-opacity={_hoverOpacity}
+  style:--button-hover-box-shadow={_hoverBoxShadow}
+  style:--button-active-background-color={_activeBackgroundColor}
+  style:--button-active-border={_activeBorder}
+  style:--button-active-color={_activeColor}
+  style:--button-active-opacity={_activeOpacity}
+  style:--button-active-box-shadow={_activeBoxShadow}
+  style:--button-background-color={_backgroundColor}
+  style:--button-border={_border}
+  style:--button-padding={_padding}
+  style:--button-color={_color}
+  style:--button-border-radius={_borderRadius}
+  style:--button-cursor={_cursor}
+  style:--button-opacity={_opacity}
+  style:--button-transition-timing-function={_transitionTimingFunction}
+  style:--button-transition-duration={_transitionDuration}
+  style:--button-box-shadow={_boxShadow}
+  on:click={handleClick}
+  on:keypress={handleKeyPress}
+  disabled={disabled}
+  class:active={active}
+>
+  <slot></slot>
+</button>
+
+<style>
+  button {
+    --default-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+    background-color: var(--button-background-color, rgba(239, 239, 239));
+    border: var(--button-border, none);
+    padding: var(--button-padding, .875rem 1.2rem);
+    color: var(--button-color, inherit);
+    border-radius: var(--button-border-radius, .3rem);
+    cursor: var(--button-cursor, pointer);
+    opacity: var(--button-opacity, 100%);
+    box-shadow: var(--button-box-shadow, var(--default-box-shadow));
+    transition-property: background-color color box-shadow;
+    transition-timing-function: var(--button-transition-timing-function, ease-in-out);
+    transition-duration: var(--button-transition-duration, .1s);
+  }
+
+  button:disabled {
+    background-color: var(--button-disabled-background-color, rgba(239, 239, 239, 0.3));
+    border: var(--button-disabled-border, none);
+    color: var(--button-disabled-color, inherit);
+    opacity: var(--button-disabled-color, 100%);
+  }
+
+  button:hover {
+    background-color: var(--button-hover-background-color, rgba(126, 126, 126, 0.3));
+    border: var(--button-hover-border, none);
+    color: var(--button-hover-color, inherit);
+    opacity: var(--button-hover-color, 100%);
+    box-shadow: var(--button-hover-box-shadow, var(--default-box-shadow));
+  }
+
+  button.active {
+    background-color: var(--button-active-background-color, rgba(126, 126, 126, 0.3));
+    border: var(--button-active-border, none);
+    color: var(--button-active-color, inherit);
+    opacity: var(--button-active-color, 100%);
+    box-shadow: var(--button-active-box-shadow, var(--default-box-shadow));
+  }
+</style>

package/dist/components/simple/buttons/DefaultButton.svelte.d.ts

@@ -0,0 +1,50 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        _backgroundColor?: string | null | undefined;
+        _border?: string | null | undefined;
+        _padding?: string | null | undefined;
+        _color?: string | null | undefined;
+        _borderRadius?: string | null | undefined;
+        _cursor?: string | null | undefined;
+        _opacity?: string | null | undefined;
+        _transitionTimingFunction?: string | null | undefined;
+        _transitionDuration?: string | null | undefined;
+        _boxShadow?: string | null | undefined;
+        _disabledBackgroundColor?: string | null | undefined;
+        _disabledBorder?: string | null | undefined;
+        _disabledColor?: string | null | undefined;
+        _disabledOpacity?: string | null | undefined;
+        _hoverBackgroundColor?: string | null | undefined;
+        _hoverBorder?: string | null | undefined;
+        _hoverColor?: string | null | undefined;
+        _hoverOpacity?: string | null | undefined;
+        _hoverBoxShadow?: string | null | undefined;
+        _activeBackgroundColor?: string | null | undefined;
+        _activeBorder?: string | null | undefined;
+        _activeColor?: string | null | undefined;
+        _activeOpacity?: string | null | undefined;
+        _activeBoxShadow?: string | null | undefined;
+        disabled?: boolean | undefined;
+        active?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<{
+            nativeEvent: MouseEvent;
+        }>;
+        keypress: CustomEvent<{
+            nativeEvent: KeyboardEvent;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DefaultButtonProps = typeof __propDef.props;
+export type DefaultButtonEvents = typeof __propDef.events;
+export type DefaultButtonSlots = typeof __propDef.slots;
+export default class DefaultButton extends SvelteComponentTyped<DefaultButtonProps, DefaultButtonEvents, DefaultButtonSlots> {
+}
+export {};