@likable-hair/svelte 0.0.77 → 2.0.0

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
 
@@ -23,4 +23,4 @@ To publish the package make the following steps:
 
 - edit the package.json version, then commit all the changes
 - run `npm run package`, svelte will generate a package folder with all the necessary stuff inside
-- make sure you're logged in with your npm account, then run `npm publish ./package --access=public`
+- make sure you're logged in with your npm account, then run `npm publish ./package --access=public`

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/{shop → dist/components/composed/shop}/ProductCard.svelte

@@ -1,29 +1,12 @@
-<script>export let image = '', title = '', sale = false, saleText = 'SALE', price = undefined, currency = '€', discount = undefined, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined;
-$: priceLessDiscount = Number((price - discount).toFixed(2));
-import Image from '../media/Image.svelte';
+<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";
 </script>
 
-<style>
-  .shadow-lg {
-    --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 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --shadow-colored: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
-    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
-  }
-
-  .info {
-    height: var(--info-height, 100px);
-  }
-</style>
-
-<div 
-  style:width={width}
-  style:height={height}
+<div
+  style:width
+  style:height
   style:max-width={maxWidth}
   style:max-height={maxHeight}
   style:min-width={minWidth}
@@ -39,7 +22,7 @@ import Image from '../media/Image.svelte';
     --border-radius="10px 10px 0px 0px"
   >
     {#if sale}
-      <div 
+      <div
         style:font-weight="600"
         style:font-size="14px"
         style:line-height="20px"
@@ -52,54 +35,64 @@ import Image from '../media/Image.svelte';
         style:position="absolute"
         style:padding-left="8px"
         style:padding-right="8px"
-      >{saleText}</div>
+      >
+        {saleText}
+      </div>
     {/if}
   </Image>
-  <div 
-    style:padding="8px"
-    style:position="relative"
-    class="info"
-  >
-    <div style:font-weight="600" >{title}</div>
+  <div style:padding="8px" style:position="relative" class="info">
+    <div style:font-weight="600">{title}</div>
     {#if (price !== undefined && price !== null) || (discount !== undefined && discount !== null)}
-      <div 
-        style:position="absolute"
-        style:bottom="19px"
-        style:right="8px"
-      >
-        {#if discount !== undefined && discount !== null }
-          <span 
+      <div style:position="absolute" style:bottom="19px" style:right="8px">
+        {#if discount !== undefined && discount !== null}
+          <span
             style:text-decoration-line="line-through"
             style:font-size=""
             style:letter-spacing="0.025em"
             style:font-weight="400px"
             style:color="rgb(156 163 175)"
           >
-            {priceLessDiscount} {currency}
+            {priceLessDiscount}
+            {currency}
           </span>
         {/if}
 
-        {#if price !== undefined && price !== null }
-          <span 
+        {#if price !== undefined && price !== null}
+          <span
             style:letter-spacing="0.025em"
             style:font-size="18px"
             style:line-height="28px"
             style:font-weight="600"
           >
-            {price} {currency}
+            {price}
+            {currency}
           </span>
         {/if}
       </div>
     {/if}
-    <div 
-      style:position="absolute"
-      style:bottom="19px"
-      style:left="8px"
-    >
-      <slot name="sizes">
-
-      </slot>
+    <div style:position="absolute" style:bottom="19px" style:left="8px">
+      <slot name="sizes" />
     </div>
   </div>
 </div>
 
+<style>
+  .shadow-lg {
+    --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 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-colored: 0 10px 15px -3px var(--shadow-color),
+      0 4px 6px -4px var(--shadow-color);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000),
+      var(--ring-shadow, 0 0 #0000), var(--shadow);
+  }
+
+  .info {
+    height: var(--info-height, 100px);
+  }
+</style>

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

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        image?: string | undefined;
+        title?: string | undefined;
+        sale?: boolean | undefined;
+        saleText?: string | undefined;
+        price?: number | undefined;
+        currency?: string | undefined;
+        discount?: number | undefined;
+        maxWidth?: string | undefined;
+        maxHeight?: string | undefined;
+        minWidth?: string | undefined;
+        minHeight?: string | undefined;
+        width?: string | undefined;
+        height?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        sizes: {};
+    };
+};
+export type ProductCardProps = typeof __propDef.props;
+export type ProductCardEvents = typeof __propDef.events;
+export type ProductCardSlots = typeof __propDef.slots;
+export default class ProductCard extends SvelteComponentTyped<ProductCardProps, ProductCardEvents, ProductCardSlots> {
+}
+export {};