@likable-hair/svelte 1.0.0 → 2.0.1

package/README.md

@@ -1,6 +1,6 @@
 # Likablehair Svelte component library
 
-A simple library that contains svelte components, used by likablehair frontend applications
+A simple library that contains svelte components, used by likablehair frontend applications.
 
 ## Developer guide
 

package/dist/components/composed/search/GlobalSearchTextField.svelte

@@ -0,0 +1,176 @@
+<script>import Dialog from "../../simple/dialogs/Dialog.svelte";
+import { createEventDispatcher, onMount } from "svelte";
+import SearchBar from "./SearchBar.svelte";
+import Keyboarder, {} from "../../../utils/keyboarder";
+import SearchResults, {} from "./SearchResults.svelte";
+export let color = "rgb(113 113 122)", searchButtonRingColor = "rgba(24,24,27,.1)", searchButtonHoverRingColor = "rgba(24,24,27,.2)", searchButtonWidth = "100%", searchButtonMaxWidth = "28rem", searchButtonHeight = "2rem", searchButtonBackgroundColor = "white", searchButtonPadding = "0rem 0.75rem 0rem 0.5rem", searchButtonFontSize = ".875rem", searchButtonText = "Search", searchDialogOpened = false, transitionDuration = ".8s", searcher = () => Promise.resolve([]);
+let searchBarInput, searchText = void 0, searchResults = void 0, searchLoading = false;
+let dispatch = createEventDispatcher();
+onMount(() => {
+  let handler = (params) => {
+    if ((params.meta || params.ctrl) && params.key == "k") {
+      toggleSearchDialog();
+    }
+  };
+  Keyboarder.on(handler);
+  return () => {
+    Keyboarder.off(handler);
+  };
+});
+function handleKeydown(event) {
+  if (event.key == "ArrowDown" || event.key == "ArrowUp")
+    event.preventDefault();
+}
+function toggleSearchDialog() {
+  searchDialogOpened = !searchDialogOpened;
+  if (searchDialogOpened)
+    searchBarInput.focus();
+  dispatch("toggle-search-dialog", { opened: searchDialogOpened });
+}
+async function search() {
+  if (!!searchText) {
+    searchLoading = true;
+    searchResults = await searcher({
+      searchText
+    });
+    searchLoading = false;
+  }
+}
+</script>
+
+<div
+  style:--global-search-text-field-ring-color={searchButtonRingColor}
+  style:--global-search-text-field-hover-ring-color={searchButtonHoverRingColor}
+  style:--global-search-text-field-color={color}
+  style:--global-search-text-field-width={searchButtonWidth}
+  style:--global-search-text-field-max-width={searchButtonMaxWidth}
+  style:--global-search-text-field-height={searchButtonHeight}
+  style:--global-search-text-field-background-color={searchButtonBackgroundColor}
+  style:--global-search-text-field-padding={searchButtonPadding}
+  style:--global-search-text-field-font-size={searchButtonFontSize}
+>
+  <slot 
+    name="search-button"
+    {toggleSearchDialog}
+  >
+    <button 
+      on:click={toggleSearchDialog}
+      class="search-like-button"
+    >
+      <slot name="search-button-icon">
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          aria-hidden="true"
+          class="search-icon"
+          ><path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
+          /></svg
+        >
+      </slot>
+      <slot name="search-button-text">
+        {searchButtonText}
+      </slot>
+      <slot name="search-button-shortcut">
+        <kbd class="shortcut"><kbd class="shortcut">⌘</kbd><kbd class="shortcut">K</kbd></kbd>
+      </slot>
+    </button>
+  </slot>
+  <Dialog
+    bind:open={searchDialogOpened}
+    transition="scale"
+    overlayBackdropFilter="blur(2px)"
+    transitionDuration={transitionDuration}
+  >
+    <div
+      style:max-width="90vw"
+      style:width="600px"
+      style:height="500px"
+      style:display="flex"
+      style:justify-content="center"
+      on:click={() => searchDialogOpened = false}
+      on:keypress={() => searchDialogOpened = false}
+    >
+      <div
+        on:click|stopPropagation={() => { }}
+        on:keypress|stopPropagation={() => { }}
+        style:width="100%"
+        style:height="fit-content"
+      >
+        <slot 
+          name="search-bar"
+          searchBarInput
+          searchText
+          search
+        >
+          <SearchBar
+            bind:input={searchBarInput}
+            bind:value={searchText}
+            on:input={search}
+            on:keydown={handleKeydown}
+          ></SearchBar>
+        </slot>
+        {#if !!searchText}
+          <slot 
+            name="search-results"
+            searchLoading
+            searchResults
+          >
+            <SearchResults
+              margin="-.5rem 0 0 0"
+              borderRadius="0 0 .5rem .5rem"
+              loading={searchLoading}
+              results={searchResults}
+              activeKeyboard
+              on:select
+            ></SearchResults>
+          </slot>
+        {/if}
+      </div>
+    </div>
+  </Dialog>
+</div>
+
+<style>
+  .search-like-button {
+    --global-search-text-field-ring-real-color: var(--global-search-text-field-ring-color);
+    box-shadow: inset 0 0 0 1px var(--global-search-text-field-ring-color);
+    color: var(--global-search-text-field-color);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: var(--global-search-text-field-width);
+    max-width: var(--global-search-text-field-max-width);
+    height: var(--global-search-text-field-height);
+    font-size: var(--global-search-text-field-font-size);
+    line-height: 1.5rem;
+    background-color: var(--global-search-text-field-background-color);
+    border-radius: 9999px;
+    padding: var(--global-search-text-field-padding);
+    border: 0 solid #e5e7eb;
+    cursor: pointer;
+    transition-property: box-shadow;
+    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition-duration: .5s;
+  }
+
+  .search-like-button:hover {
+    box-shadow: inset 0 0 0 1px var(--global-search-text-field-hover-ring-color);
+  }
+
+  .search-icon {
+    height: 1.25rem;
+    width: 1.25rem;
+    stroke: currentColor;
+  }
+
+  .shortcut {
+    margin-left: auto;
+    font-size: 1rem;
+    color: var(--global-search-text-field-color);
+    text-transform: none;
+    font-family: ui-sans-serif,system-ui,-apple-system;
+  }
+</style>

package/dist/components/composed/search/GlobalSearchTextField.svelte.d.ts

@@ -0,0 +1,47 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Result } from './SearchResults.svelte';
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        searchButtonRingColor?: string | undefined;
+        searchButtonHoverRingColor?: string | undefined;
+        searchButtonWidth?: string | undefined;
+        searchButtonMaxWidth?: string | undefined;
+        searchButtonHeight?: string | undefined;
+        searchButtonBackgroundColor?: string | undefined;
+        searchButtonPadding?: string | undefined;
+        searchButtonFontSize?: string | undefined;
+        searchButtonText?: string | undefined;
+        searchDialogOpened?: boolean | undefined;
+        transitionDuration?: string | undefined;
+        searcher?: ((params: {
+            searchText: string;
+        }) => Promise<Result[] | undefined>) | undefined;
+    };
+    events: {
+        select: CustomEvent<{
+            element: import("../../simple/lists/SelectableVerticalList.svelte").Element;
+        }>;
+        'toggle-search-dialog': CustomEvent<{
+            opened: boolean;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'search-button': {
+            toggleSearchDialog: () => void;
+        };
+        'search-button-icon': {};
+        'search-button-text': {};
+        'search-button-shortcut': {};
+        'search-bar': {};
+        'search-results': {};
+    };
+};
+export type GlobalSearchTextFieldProps = typeof __propDef.props;
+export type GlobalSearchTextFieldEvents = typeof __propDef.events;
+export type GlobalSearchTextFieldSlots = typeof __propDef.slots;
+export default class GlobalSearchTextField extends SvelteComponentTyped<GlobalSearchTextFieldProps, GlobalSearchTextFieldEvents, GlobalSearchTextFieldSlots> {
+}
+export {};

package/dist/components/composed/search/SearchBar.svelte

@@ -0,0 +1,82 @@
+<script>export let maxWidth = void 0, width = "100%", ringColor = "rgba(24,24,27,.1)", backgroundColor = "rgb(250 250 250/1)", borderRadius = "0.5rem", height = "3rem", padding = "0rem 1rem 0rem 1rem", lineHeight = "1.5rem", fontSize = ".875rem", input = void 0, value = void 0;
+</script>
+
+<div
+  style:--search-bar-ring-color={ringColor}
+  style:--search-bar-background-color={backgroundColor}
+  style:--search-bar-border-radius={borderRadius}
+  style:--search-bar-height={height}
+  style:--search-bar-padding={padding}
+  style:--search-bar-line-height={lineHeight}
+  style:--search-bar-font-size={fontSize}
+  style:max-width={maxWidth}
+  style:width={width}
+  class="container"
+>
+  <slot name="icon">
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+      class="search-icon"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
+      /></svg
+    >
+  </slot>
+  <slot name="input">
+    <input
+      aria-autocomplete="both" 
+      aria-labelledby="search-content" 
+      id="search-content" 
+      autocomplete="off" 
+      autocorrect="off" 
+      autocapitalize="off" 
+      enterkeyhint="search" 
+      spellcheck="false" 
+      placeholder="Find something..." 
+      maxlength="512" 
+      tabindex="0"
+      class="input" 
+      bind:this={input}
+      bind:value={value}
+      on:input
+      on:change
+      on:keydown
+    />
+  </slot>
+</div>
+
+<style>
+  .container {
+    box-shadow: inset 0 0 0 1px var(--search-bar-ring-color);
+    background-color: var(--search-bar-background-color);
+    border-radius: var(--search-bar-border-radius);
+    height: var(--search-bar-height);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: var(--search-bar-padding);
+    box-sizing: border-box;
+  }
+
+  .input {
+    font-size: var(--search-bar-font-size);
+    line-height: var(--search-bar-line-height);
+    box-sizing: border-box;
+    border: 0 solid #e5e7eb;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    background-color: transparent;
+    color: inherit;
+    appearance: none;
+  }
+
+  .search-icon {
+    height: 1.25rem;
+    width: 1.25rem;
+    stroke: currentColor;
+  }
+</style>

package/dist/components/composed/search/SearchBar.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        maxWidth?: string | undefined;
+        width?: string | undefined;
+        ringColor?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderRadius?: string | undefined;
+        height?: string | undefined;
+        padding?: string | undefined;
+        lineHeight?: string | undefined;
+        fontSize?: string | undefined;
+        input?: HTMLElement | undefined;
+        value?: string | undefined;
+    };
+    events: {
+        input: Event;
+        change: Event;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        input: {};
+    };
+};
+export type SearchBarProps = typeof __propDef.props;
+export type SearchBarEvents = typeof __propDef.events;
+export type SearchBarSlots = typeof __propDef.slots;
+export default class SearchBar extends SvelteComponentTyped<SearchBarProps, SearchBarEvents, SearchBarSlots> {
+}
+export {};

package/dist/components/composed/search/SearchResults.svelte

@@ -0,0 +1,100 @@
+<script context="module"></script>
+
+<script>import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
+export let maxWidth = void 0, width = "100%", height = void 0, maxHeight = void 0, margin = void 0, backgroundColor = "rgb(255 255 255/1)", noDataText = "Sorry, nothing found", loadingText = "Searching for references ...", borderColor = "rgb(228 228 231/1)", borderRadius = void 0, results = [], loading = false, footer = true, activeKeyboard = false;
+</script>
+
+<div 
+  style:--search-results-width={width}
+  style:--search-results-max-width={maxWidth}
+  style:--search-results-height={height}
+  style:--search-results-max-height={maxHeight}
+  style:--search-results-margin={margin}
+  style:--search-results-background-color={backgroundColor}
+  style:--search-results-border-color={borderColor}
+  style:--search-results-border-radius={borderRadius}
+  class="container"
+>
+  {#if loading}
+    <div class="loading-container">
+      <slot name="loading">
+        <span style:font-size=".875rem">{loadingText}</span>
+      </slot>
+    </div>
+  {:else if !results || results.length == 0}
+    <div
+      class="no-data-container"
+    >
+      <slot name="no-data">
+        <span style:font-size=".875rem">{noDataText}</span>
+      </slot>
+    </div>
+  {:else}
+    <div>
+      <SelectableVerticalList
+        elements={results.map((r) => {
+          return {
+            title: r.title,
+            description: r.subtitle,
+            name: r.name,
+            data: r.data
+          }
+        })}
+        activeKeyboard={activeKeyboard}
+        on:focus
+        on:select
+      >
+        <div 
+          slot="description" 
+          let:element
+          style:margin-top=".5rem"
+          style:opacity="60%"
+        >
+          {element.description}
+        </div>
+      </SelectableVerticalList>
+    </div>
+  {/if}
+  {#if footer}  
+    <div class="footer">
+      <slot name="footer">
+        <span
+          style:font-size=".875rem"
+        >
+          <span 
+            style:opacity=".5"
+          >Search with</span> ❤️
+        </span>
+      </slot>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    width: var(--search-results-width);
+    max-width: var(--search-results-max-width);
+    height: var(--search-results-height);
+    max-height: var(--search-results-max-height);
+    background-color: var(--search-results-background-color);
+    margin: var(--search-results-margin);
+    border-top: 1px solid var(--search-results-border-color);
+    border-radius: var(--search-results-border-radius);
+  }
+
+  .no-data-container, .loading-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+  }
+
+  .footer {
+    border-top: 1px solid var(--search-results-border-color);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 1rem;
+    height: 2rem;
+  }
+</style>

package/dist/components/composed/search/SearchResults.svelte.d.ts

@@ -0,0 +1,47 @@
+import { SvelteComponentTyped } from "svelte";
+export type Result = {
+    title: string;
+    name: string | number;
+    subtitle?: string;
+    url?: string;
+    data?: Record<string, any>;
+};
+declare const __propDef: {
+    props: {
+        maxWidth?: string | undefined;
+        width?: string | undefined;
+        height?: string | undefined;
+        maxHeight?: string | undefined;
+        margin?: string | undefined;
+        backgroundColor?: string | undefined;
+        noDataText?: string | undefined;
+        loadingText?: string | undefined;
+        borderColor?: string | undefined;
+        borderRadius?: string | undefined;
+        results?: Result[] | undefined;
+        loading?: boolean | undefined;
+        footer?: boolean | undefined;
+        activeKeyboard?: boolean | undefined;
+    };
+    events: {
+        focus: CustomEvent<{
+            element: import("../../simple/lists/SelectableVerticalList.svelte").Element;
+        }>;
+        select: CustomEvent<{
+            element: import("../../simple/lists/SelectableVerticalList.svelte").Element;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        loading: {};
+        'no-data': {};
+        footer: {};
+    };
+};
+export type SearchResultsProps = typeof __propDef.props;
+export type SearchResultsEvents = typeof __propDef.events;
+export type SearchResultsSlots = typeof __propDef.slots;
+export default class SearchResults extends SvelteComponentTyped<SearchResultsProps, SearchResultsEvents, SearchResultsSlots> {
+}
+export {};

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

@@ -1,7 +1,7 @@
 <script>export let image = "", title = "", sale = false, saleText = "SALE", price = void 0, currency = "\u20AC", discount = void 0, maxWidth = void 0, maxHeight = void 0, minWidth = void 0, minHeight = void 0, width = void 0, height = void 0;
 $:
   priceLessDiscount = Number(((price || 0) - (discount || 0)).toFixed(2));
-import Image from "../media/Image.svelte";
+import Image from "../../../media/Image.svelte";
 </script>
 
 <div

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>