@likable-hair/svelte 2.0.9 → 3.0.0

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

@@ -0,0 +1,11 @@
+:root {
+  --global-search-text-field-default-ring-color: rgb(var(--global-color-contrast-100)); /* rgba(24, 24, 27, .1) */
+  --global-search-text-field-default-hover-ring-color: rgb(var(--global-color-contrast-300)); /* rgba(24, 24, 27, .2) */
+  --global-search-text-field-default-color: rgb(var(--global-color-contrast-600)); /* rgb(113 113 122) */
+  --global-search-text-field-default-width: 100%;
+  --global-search-text-field-default-max-width: 28rem;
+  --global-search-text-field-default-height: 2rem;
+  --global-search-text-field-default-background-color: rgb(var(--global-color-background-100));
+  --global-search-text-field-default-padding: 0rem 0.75rem 0rem 0.5rem;
+  --global-search-text-field-default-font-size: .875rem;
+}

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

@@ -1,9 +1,12 @@
-<script>import Dialog from "../../simple/dialogs/Dialog.svelte";
+<script>import "./GlobalSearchTextField.css";
+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 clazz = {};
+export { clazz as class };
+export let searchButtonText = "Search", searchDialogOpened = false, transitionDuration = ".8s", searcher = () => Promise.resolve([]);
 let searchBarInput, searchText = void 0, searchResults = void 0, searchLoading = false;
 let dispatch = createEventDispatcher();
 onMount(() => {
@@ -38,24 +41,14 @@ async function search() {
 }
 </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}
->
+<div class={clazz.container || ''}>
   <slot 
     name="search-button"
     {toggleSearchDialog}
   >
     <button 
       on:click={toggleSearchDialog}
-      class="search-like-button"
+      class="search-like-button {clazz.button || ''}"
     >
       <slot name="search-button-icon">
         <svg
@@ -74,15 +67,15 @@ async function search() {
         {searchButtonText}
       </slot>
       <slot name="search-button-shortcut">
-        <kbd class="shortcut"><kbd class="shortcut">⌘</kbd><kbd class="shortcut">K</kbd></kbd>
+        <kbd class="shortcut {clazz.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}
+    _overlayBackdropFilter="blur(2px)"
+    _transitionDuration={transitionDuration}
   >
     <div
       style:max-width="90vw"
@@ -119,8 +112,8 @@ async function search() {
             searchResults
           >
             <SearchResults
-              margin="-.5rem 0 0 0"
-              borderRadius="0 0 .5rem .5rem"
+              --search-results-margin="-.5rem 0 0 0"
+              --search-results-border-radius="0 0 .5rem .5rem"
               loading={searchLoading}
               results={searchResults}
               activeKeyboard
@@ -135,20 +128,43 @@ async function search() {
 
 <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);
+    box-shadow: inset 0 0 0 1px var(
+      --global-search-text-field-ring-color,
+      var(--global-search-text-field-default-ring-color)
+    );
+    color: var(
+      --global-search-text-field-color,
+      var(--global-search-text-field-default-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);
+    width: var(
+      --global-search-text-field-width,
+      var(--global-search-text-field-default-width)
+    );
+    max-width: var(
+      --global-search-text-field-max-width,
+      var(--global-search-text-field-default-max-width)
+    );
+    height: var(
+      --global-search-text-field-height,
+      var(--global-search-text-field-default-height)
+    );
+    font-size: var(
+      --global-search-text-field-font-size,
+      var(--global-search-text-field-default-font-size)
+    );
     line-height: 1.5rem;
-    background-color: var(--global-search-text-field-background-color);
+    background-color: var(
+      --global-search-text-field-background-color,
+      var(--global-search-text-field-default-background-color)
+    );
     border-radius: 9999px;
-    padding: var(--global-search-text-field-padding);
+    padding: var(
+      --global-search-text-field-padding,
+      var(--global-search-text-field-default-padding)
+    );
     border: 0 solid #e5e7eb;
     cursor: pointer;
     transition-property: box-shadow;
@@ -157,7 +173,10 @@ async function search() {
   }
 
   .search-like-button:hover {
-    box-shadow: inset 0 0 0 1px var(--global-search-text-field-hover-ring-color);
+    box-shadow: inset 0 0 0 1px var(
+      --global-search-text-field-hover-ring-color,
+      var(--global-search-text-field-default-hover-ring-color)
+    );
   }
 
   .search-icon {
@@ -169,7 +188,10 @@ async function search() {
   .shortcut {
     margin-left: auto;
     font-size: 1rem;
-    color: var(--global-search-text-field-color);
+    color: var(
+      --global-search-text-field-color,
+      var(--global-search-text-field-default-color)
+    );
     text-transform: none;
     font-family: ui-sans-serif,system-ui,-apple-system;
   }

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

@@ -1,16 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import './GlobalSearchTextField.css';
 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;
+        class?: {
+            container?: string | undefined;
+            button?: string | undefined;
+            shortcut?: string | undefined;
+        } | undefined;
         searchButtonText?: string | undefined;
         searchDialogOpened?: boolean | undefined;
         transitionDuration?: string | undefined;

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

@@ -0,0 +1,10 @@
+:root {
+  --search-bar-default-ring-color: rgb(var(--global-color-contrast-100));
+  --search-bar-default-background-color: rgb(var(--global-color-background-100));
+  --search-bar-default-border-radius: 0.5rem;
+  --search-bar-default-height: 3rem;
+  --search-bar-default-padding: 0rem 1rem 0rem 1rem;
+  --search-bar-default-line-height: 1.5rem;
+  --search-bar-default-font-size: .875rem;
+  --search-bar-default-width: 100%;
+}

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

@@ -1,24 +1,18 @@
-<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>import "./SearchBar.css";
+let clazz = {};
+export { clazz as class };
+export let 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"
+  class="container {clazz.container}"
 >
   <slot name="icon">
     <svg
       viewBox="0 0 20 20"
       fill="none"
       aria-hidden="true"
-      class="search-icon"
+      class="search-icon {clazz.icon}"
       ><path
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -39,7 +33,7 @@
       placeholder="Find something..." 
       maxlength="512" 
       tabindex="0"
-      class="input" 
+      class="input {clazz.input}"
       bind:this={input}
       bind:value={value}
       on:input
@@ -51,20 +45,49 @@
 
 <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);
+    box-shadow: inset 0 0 0 1px var(
+      --search-bar-ring-color,
+      var(--search-bar-default-ring-color)
+    );
+    background-color: var(
+      --search-bar-background-color,
+      var(--search-bar-default-background-color)
+    );
+    border-radius: var(
+      --search-bar-border-radius,
+      var(--search-bar-default-border-radius)
+    );
+    height: var(
+      --search-bar-height,
+      var(--search-bar-default-height)
+    );
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: var(--search-bar-padding);
+    padding: var(
+      --search-bar-padding,
+      var(--search-bar-default-padding)
+    );
     box-sizing: border-box;
+    max-width: var(
+      --search-bar-max-width,
+      var(--search-bar-default-max-width)
+    );
+    width: var(
+      --search-bar-width,
+      var(--search-bar-default-width)
+    );
   }
 
   .input {
-    font-size: var(--search-bar-font-size);
-    line-height: var(--search-bar-line-height);
+    font-size: var(
+      --search-bar-font-size,
+      var(--search-bar-default-font-size)
+    );
+    line-height: var(
+      --search-bar-line-height,
+      var(--search-bar-default-line-height)
+    );
     box-sizing: border-box;
     border: 0 solid #e5e7eb;
     outline: 2px solid transparent;

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

@@ -1,15 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import './SearchBar.css';
 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;
+        class?: {
+            container?: string | undefined;
+            icon?: string | undefined;
+            input?: string | undefined;
+        } | undefined;
         input?: HTMLElement | undefined;
         value?: string | undefined;
     };

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

@@ -0,0 +1,5 @@
+:root {
+  --search-results-default-width: 100%;
+  --search-results-default-background-color: rgb(var(--global-color-background-100));
+  --search-results-default-border-color: rgb(var(--global-color-background-300));
+}

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

@@ -1,36 +1,31 @@
 <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>import "./SearchResults.css";
+import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
+let clazz = {};
+export { clazz as class };
+export let noDataText = "Sorry, nothing found", loadingText = "Searching for references ...", 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"
+  class="container {clazz.container || ''}"
 >
   {#if loading}
-    <div class="loading-container">
+    <div class="loading-container {clazz.loading || ''}">
       <slot name="loading">
         <span style:font-size=".875rem">{loadingText}</span>
       </slot>
     </div>
   {:else if !results || results.length == 0}
     <div
-      class="no-data-container"
+      class="no-data-container {clazz.noData || ''}"
     >
       <slot name="no-data">
         <span style:font-size=".875rem">{noDataText}</span>
       </slot>
     </div>
   {:else}
-    <div>
+    <div class={clazz.results || ''}>
       <SelectableVerticalList
         elements={results.map((r) => {
           return {
@@ -72,14 +67,38 @@ export let maxWidth = void 0, width = "100%", height = void 0, maxHeight = void
 
 <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);
+    width: var(
+      --search-results-width,
+      var(--search-results-default-width)
+    );
+    max-width: var(
+      --search-results-max-width,
+      var(--search-results-default-max-width)
+    );
+    height: var(
+      --search-results-height,
+      var(--search-results-default-height)
+    );
+    max-height: var(
+      --search-results-max-height,
+      var(--search-results-default-max-height)
+    );
+    background-color: var(
+      --search-results-background-color,
+      var(--search-results-default-background-color)
+    );
+    margin: var(
+      --search-results-margin,
+      var(--search-results-default-margin)
+    );
+    border-top: 1px solid var(
+      --search-results-border-color,
+      var(--search-results-default-border-color)
+    );
+    border-radius: var(
+      --search-results-border-radius,
+      var(--search-results-default-border-radius)
+    );
   }
 
   .no-data-container, .loading-container {
@@ -90,7 +109,10 @@ export let maxWidth = void 0, width = "100%", height = void 0, maxHeight = void
   }
 
   .footer {
-    border-top: 1px solid var(--search-results-border-color);
+    border-top: 1px solid var(
+      --search-results-border-color,
+      var(--search-results-default-border-color)
+    );
     display: flex;
     align-items: center;
     justify-content: flex-end;

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

@@ -6,18 +6,17 @@ export type Result = {
     url?: string;
     data?: Record<string, any>;
 };
+import './SearchResults.css';
 declare const __propDef: {
     props: {
-        maxWidth?: string | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
-        maxHeight?: string | undefined;
-        margin?: string | undefined;
-        backgroundColor?: string | undefined;
+        class?: {
+            container?: string | undefined;
+            loading?: string | undefined;
+            noData?: string | undefined;
+            results?: string | undefined;
+        } | undefined;
         noDataText?: string | undefined;
         loadingText?: string | undefined;
-        borderColor?: string | undefined;
-        borderRadius?: string | undefined;
         results?: Result[] | undefined;
         loading?: boolean | undefined;
         footer?: boolean | undefined;

package/dist/components/layouts/CollapsibleSideBarLayout.css

@@ -0,0 +1,5 @@
+:root {
+  --collapsible-side-bar-layout-default-sidebar-width: 16rem;
+  --collapsible-side-bar-layout-default-sidebar-collapsed-width: 3.5rem;
+  --collapsible-side-bar-layout-default-logo-height: 3.8rem;
+}

package/dist/components/layouts/CollapsibleSideBarLayout.svelte

@@ -129,15 +129,8 @@ $:
       class="main-section"
       class:collapsed={drawerCollapsed}
     >
-      <div
-        class="overlay"
-        on:click={handleOverlayClick}
-        on:keypress={handleOverlayClick}
-        class:visible={drawerOpened}
-      ></div>
       <div
         style:padding={_pagePadding}
-        class:blurred={drawerOpened}
       >
         <slot>Content</slot>
       </div>
@@ -186,6 +179,12 @@ $:
     background-color: var(--collapsible-side-bar-layout-sidebar-background-color);
   }
 
+  @media (max-width: 1023.98px) {
+  	.side-bar-content {
+      visibility: hidden
+    }
+  }
+
   .side-bar.collapsed {
     width: var(--collapsible-side-bar-layout-collapsed-width);
   }

package/dist/components/layouts/NewCollapsibleSideBarLayout.svelte

@@ -0,0 +1,155 @@
+<script>import "./CollapsibleSideBarLayout.css";
+import { createEventDispatcher } from "svelte";
+import CollapsibleDivider from "../simple/common/CollapsibleDivider.svelte";
+import MediaQuery from "../simple/common/MediaQuery.svelte";
+import SelectableMenuList from "../simple/lists/SelectableMenuList.svelte";
+import HeaderMenu from "../simple/navigation/HeaderMenu.svelte";
+export let drawerOpened = false, drawerCollapsed = false, menuItems = [], selectedMenuElementName = void 0, fullLogo = void 0, partialLogo = void 0;
+let dispatch = createEventDispatcher();
+function handleMenuSelect(event) {
+  dispatch("menu-select", {
+    menu: event.detail.item
+  });
+}
+function handleCollpsabledDividerChange() {
+  dispatch("collapse", {
+    collapsed: drawerCollapsed
+  });
+}
+</script>
+
+<MediaQuery let:mAndDown>
+  <div class="container">
+    <div 
+      class="sidebar"
+      class:collapsed={drawerCollapsed}
+    >
+      <div 
+        class="logo-container"
+        class:collapsed={drawerCollapsed}
+      >
+        <slot name="logo" collapsed={drawerCollapsed} mAndDown>
+          <img src={drawerCollapsed ? partialLogo : fullLogo} alt="logo">
+        </slot>
+      </div>
+      <SelectableMenuList
+        items={menuItems}
+        collapsed={drawerCollapsed}
+        selected={selectedMenuElementName}
+        on:select={handleMenuSelect}
+      ></SelectableMenuList>
+      <CollapsibleDivider
+        bind:collapsed={drawerCollapsed}
+        on:change={handleCollpsabledDividerChange}
+      ></CollapsibleDivider>
+    </div>
+    <div class="header-menu">
+      <HeaderMenu
+        bind:openDrawer={drawerOpened}
+        on:drawer-change
+      >
+        <svelte:fragment slot="title">
+          <div class="header-logo-container">
+            <img src={fullLogo} alt="logo">
+          </div>
+        </svelte:fragment>
+        <div 
+          slot="drawer" 
+          style:padding="0px 10px 10px 0px"
+        >
+          <SelectableMenuList
+            items={menuItems}
+            collapsed={false}
+            selected={selectedMenuElementName}
+          ></SelectableMenuList>
+        </div>
+      </HeaderMenu>
+    </div>
+    <main 
+      class="page-content"
+      class:collapsed={!drawerCollapsed}
+      class:expanded={drawerCollapsed}
+    >
+      <slot></slot>
+    </main>
+  </div>
+</MediaQuery>
+
+<style>
+  .sidebar {
+    position: fixed;
+    bottom: 0px;
+    top: 0px;
+    width: var(
+      --collapsible-side-bar-layout-sidebar-width,
+      var(--collapsible-side-bar-layout-default-sidebar-width)
+    );
+    transition: width .3s cubic-bezier(0.075, 0.82, 0.165, 1);
+  }
+
+  .sidebar.collapsed {
+    width: var(
+      --collapsible-side-bar-layout-sidebar-collapsed-width,
+      var(--collapsible-side-bar-layout-default-sidebar-collapsed-width)
+    );
+  }
+
+  @media (max-width: 991.98px){
+  	.sidebar {
+      visibility: hidden;
+    }
+
+    .page-content {
+      padding-top: 1rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+  }
+
+  @media (min-width: 992px){
+  	.header-menu {
+      visibility: hidden;
+    }
+
+    .page-content {
+      margin-top: -3rem;
+      transition: padding-left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    }
+
+    .page-content.expanded {
+      padding-left: 6rem
+    }
+
+    .page-content.collapsed {
+      padding-left: 18rem
+    }
+  }
+
+  .logo-container {
+    padding-left: 16px;
+    padding-top: 10px;
+    transition-property: width padding-left;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
+  }
+
+  .logo-container.collapsed {
+    padding-left: 0px;
+  }
+
+  .logo-container img {
+    height: var(
+      --collapsible-side-bar-layout-logo-height,
+      var(--collapsible-side-bar-layout-default-logo-height)
+    );
+  }
+
+  .header-logo-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .header-logo-container img {
+    height: 3rem;
+  }
+</style>