@likable-hair/svelte 2.0.8 → 3.0.0

package/dist/components/simple/forms/Autocomplete.svelte

@@ -1,6 +1,9 @@
 <script context="module"></script>
 
-<script>export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, width = "auto", height = "auto", maxWidth = void 0, textFieldLabel = "", textFieldPlaceholder = "", textFieldColor = null, textFieldVariant = "boxed", textFieldMaxWidth = "min(100px, 90%)", textFieldMinWidth = void 0, textFieldHeight = "auto", textFieldTextColor = "black", textFieldBorderWeight = "2px", textFieldBorderRadius = "5px", textFieldBorderColor = null, textFieldFocusBorderColor = null, textFieldFocusedBoxShadow = void 0, textFieldBackgroundColor = null, textFieldPadding = void 0, textFieldPaddingLeft = void 0, textFieldPaddingRight = void 0, textFieldPaddingBottom = void 0, textFieldPaddingTop = void 0, textFieldFontSize = void 0, menuBackgroundColor = "#FFF", menuBoxShadow = "rgba(149, 157, 165, 0.2) 0px 8px 24px", menuBorderRadius = "5px", focusItemBackgroundColor = "#EEEEEE", selectedItemBackgroundColor = "#D0D0D0", border = "1px solid black", borderRadius = "5px", chipColor = "#D0D0D0", chipTextColor = "black", chipHeight = "30px";
+<script>import "./Autocomplete.css";
+let clazz = {};
+export { clazz as class };
+export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px";
 let dispatch = createEventDispatcher();
 function select(item) {
   const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
@@ -26,6 +29,16 @@ function unselect(item) {
     selection: values
   });
 }
+function pop() {
+  let poppedElement = values.pop();
+  values = [...values];
+  refreshMenuWidth();
+  dispatch("change", {
+    unselect: poppedElement,
+    select: void 0,
+    selection: values
+  });
+}
 function toggle(item) {
   const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
   if (alreadyPresent)
@@ -39,8 +52,12 @@ function openMenu() {
   menuOpened = true;
 }
 function refreshMenuWidth() {
-  menuWidth = activator.offsetWidth + "px";
-  refreshPosition = true;
+  setTimeout(() => {
+    menuWidth = activator.offsetWidth + "px";
+    setTimeout(() => {
+      refreshPosition = true;
+    }, 1);
+  }, 1);
 }
 let activator, focusedIndex = void 0;
 function handleTextFieldFocus() {
@@ -63,6 +80,12 @@ function handleWindowKeyDown(event) {
       focusedIndex -= 1;
   } else if (event.key == "Enter" && focusedIndex != void 0) {
     toggle(filteredItems[focusedIndex]);
+  } else if (event.key == "Backspace" && searchText == "") {
+    pop();
+  } else if (event.key == "Escape" || event.key == "Tab") {
+    searchText = "";
+    input.blur();
+    menuOpened = false;
   }
 }
 let input;
@@ -87,10 +110,10 @@ $:
   } else {
     filteredItems = items;
   }
-import Textfield from "./Textfield.svelte";
 import Chip from "../navigation/Chip.svelte";
 import Menu from "../common/Menu.svelte";
 import { createEventDispatcher } from "svelte";
+import SimpleTextField from "./SimpleTextField.svelte";
 </script>
 
 <svelte:window />
@@ -103,55 +126,40 @@ import { createEventDispatcher } from "svelte";
   style:opacity={disabled ? "50%" : "100%"}
   on:click={handleContainerClick}
   on:keypress={handleContainerClick}
+  class={clazz.activator || ''}
 >
   <slot name="selection-container">
     <div
       class="selection-container"
-      style:border
-      style:border-radius={borderRadius}
     >
       {#each values as selection}
         <slot name="selection" {selection}>
-          <div style:height={chipHeight}>
+          <div tabindex="-1">
             <Chip
-              color={chipColor}
-              textColor={chipTextColor}
               close={true}
-              label={true}
-              on:close={() => unselect(selection)}>{selection.label}</Chip
-            >
+              on:close={() => unselect(selection)}
+              --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
+              buttonTabIndex={-1}
+            >{selection.label}</Chip>
           </div>
         </slot>
       {/each}
 
-      <Textfield
-        label={textFieldLabel}
-        placeholder={textFieldPlaceholder}
-        color={textFieldColor}
+      <SimpleTextField
+        --simple-textfield-max-width="min(200px, 90%)"
+        --simple-textfield-height="auto"
+        --simple-textfield-padding="0px"
+        --simple-textfield-background-color="rgb(1, 1, 1, 0)"
+        --simple-textfield-default-margin-bottom="0px"
+        --simple-textfield-default-margin-left="10px"
         bind:value={searchText}
-        variant={textFieldVariant}
-        maxWidth={textFieldMaxWidth}
-        minWidth={textFieldMinWidth}
-        textColor={textFieldTextColor}
-        borderWeight={textFieldBorderWeight}
-        borderRadius={textFieldBorderRadius}
-        borderColor={textFieldBorderColor}
-        focusBorderColor={textFieldFocusBorderColor}
-        focusedBoxShadow={textFieldFocusedBoxShadow}
-        backgroundColor={textFieldBackgroundColor}
-        padding={textFieldPadding}
-        paddingLeft={textFieldPaddingLeft}
-        paddingRight={textFieldPaddingRight}
-        paddingBottom={textFieldPaddingBottom}
-        paddingTop={textFieldPaddingTop}
-        fontSize={textFieldFontSize}
-        height={textFieldHeight}
-        {disabled}
         on:focus={handleTextFieldFocus}
         on:blur={handleTextFieldBlur}
         on:keydown={handleWindowKeyDown}
-        bind:inputElement={input}
-      />
+        {disabled}
+        placeholder={placeholder}
+        bind:input={input}
+      ></SimpleTextField>
     </div>
   </slot>
 </div>
@@ -159,18 +167,22 @@ import { createEventDispatcher } from "svelte";
 <slot name="menu">
   <Menu
     {activator}
-    width={menuWidth || ""}
-    height={menuHeight}
-    maxHeight="300px"
-    boxShadow={menuBoxShadow}
-    borderRadius={menuBorderRadius}
+    _width={menuWidth || ""}
+    _height={menuHeight}
+    _maxHeight="300px"
+    _boxShadow={menuBoxShadow}
+    _borderRadius={menuBorderRadius}
     bind:open={menuOpened}
     anchor="bottom-center"
     closeOnClickOutside
     bind:refreshPosition
     bind:menuElement
+    bind:openingId={openingId}
   >
-    <div style:background-color={menuBackgroundColor}>
+    <div 
+      class={clazz.menu || ''}
+      style:background-color="rgb(var(--global-color-background-100))"
+    >
       {#each filteredItems as item, index}
         <slot
           name="item"
@@ -181,8 +193,6 @@ import { createEventDispatcher } from "svelte";
           }) != -1}
         >
           <div
-            style:--autocomplete-selected-item-background-color={selectedItemBackgroundColor}
-            style:--autocomplete-focus-item-background-color={focusItemBackgroundColor}
             class:selection-item={true}
             class:focused={index == focusedIndex}
             class:selected={values.findIndex((i) => {
@@ -203,8 +213,28 @@ import { createEventDispatcher } from "svelte";
   .selection-container {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     gap: 5px;
-    padding: 5px;
+    border: var(
+      --autocomplete-border,
+      var(--autocomplete-default-border)
+    );
+    background-color: var(
+      --autocomplete-background-color,
+      var(--autocomplete-default-background-color)
+    );
+    border-radius: var(
+      --autocomplete-border-radius,
+      var(--autocomplete-default-border-radius)
+    );
+    padding: var(
+      --autocomplete-paddding,
+      var(--autocomplete-default-padding)
+    );
+    min-height: var(
+      --autocomplete-min-height,
+      var(--autocomplete-default-min-height)
+    )
   }
 
   .selection-item {
@@ -212,14 +242,35 @@ import { createEventDispatcher } from "svelte";
   }
 
   .selection-item.selected {
-    background-color: var(--autocomplete-selected-item-background-color);
+    background-color: var(
+      --autocomplete-selected-item-background-color,
+      var(--autocomplete-default-selected-item-background-color)
+    );
+    color: var(
+      --autocomplete-selected-item-color,
+      var(--autocomplete-default-selected-item-color)
+    );
   }
 
-  .selection-item.focused {
-    background-color: var(--autocomplete-focus-item-background-color);
+  .selection-item.focused:not(.selected) {
+    background-color: var(
+      --autocomplete-focused-item-background-color,
+      var(--autocomplete-default-focused-item-background-color)
+    );
+    color: var(
+      --autocomplete-focused-item-color,
+      var(--autocomplete-default-focused-item-color)
+    );
   }
 
-  .selection-item:hover {
-    background-color: var(--autocomplete-focus-item-background-color);
+  .selection-item:hover:not(.selected):not(.focused) {
+    background-color: var(
+      --autocomplete-hover-item-background-color,
+      var(--autocomplete-default-hover-item-background-color)
+    );
+    color: var(
+      --autocomplete-hover-item-color,
+      var(--autocomplete-default-hover-item-color)
+    );
   }
 </style>

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -4,47 +4,25 @@ export type Item = {
     label?: string;
     data?: any;
 };
-import type { VariantOptions } from "./Textfield.svelte";
+import './Autocomplete.css';
 declare const __propDef: {
     props: {
+        class?: {
+            activator?: string | undefined;
+            menu?: string | undefined;
+        } | undefined;
         values?: Item[] | undefined;
         items: Item[];
         searchFunction?: ((item: Item, searchText: string) => boolean) | undefined;
         multiple?: boolean | undefined;
         disabled?: boolean | undefined;
+        placeholder?: string | undefined;
         width?: string | undefined;
         height?: string | undefined;
         maxWidth?: string | undefined;
-        textFieldLabel?: string | undefined;
-        textFieldPlaceholder?: string | undefined;
-        textFieldColor?: string | null | undefined;
-        textFieldVariant?: VariantOptions | undefined;
-        textFieldMaxWidth?: string | undefined;
-        textFieldMinWidth?: string | undefined;
-        textFieldHeight?: string | undefined;
-        textFieldTextColor?: string | undefined;
-        textFieldBorderWeight?: string | undefined;
-        textFieldBorderRadius?: string | undefined;
-        textFieldBorderColor?: string | null | undefined;
-        textFieldFocusBorderColor?: string | null | undefined;
-        textFieldFocusedBoxShadow?: string | undefined;
-        textFieldBackgroundColor?: string | null | undefined;
-        textFieldPadding?: string | undefined;
-        textFieldPaddingLeft?: string | undefined;
-        textFieldPaddingRight?: string | undefined;
-        textFieldPaddingBottom?: string | undefined;
-        textFieldPaddingTop?: string | undefined;
-        textFieldFontSize?: string | undefined;
-        menuBackgroundColor?: string | undefined;
+        openingId?: string | undefined;
         menuBoxShadow?: string | undefined;
         menuBorderRadius?: string | undefined;
-        focusItemBackgroundColor?: string | undefined;
-        selectedItemBackgroundColor?: string | undefined;
-        border?: string | undefined;
-        borderRadius?: string | undefined;
-        chipColor?: string | undefined;
-        chipTextColor?: string | undefined;
-        chipHeight?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/simple/forms/SimpleTextField.css

@@ -0,0 +1,17 @@
+:root {
+  --simple-textfield-default-padding: 0.65rem 1rem 0.65rem 1rem;
+  --simple-textfield-default-width: 280px;
+  --simple-textfield-default-background-color: rgb(var(--global-color-background-300), .5);
+  --simple-textfield-default-border-radius: 9999px;
+  --simple-textfield-default-box-shadow: none;
+  --simple-textfield-default-transition: .2s;
+  --simple-textfield-default-font-size: .9rem;
+  --simple-textfield-default-font-weight: normal;
+  --simple-textfield-default-outer-gap: 8px;
+  --simple-textfield-default-inner-gap: 8px;
+  --simple-textfield-default-hint-font-size: .75rem;
+  --simple-textfield-default-hint-color: rgb(var(--global-color-contrast-500), .5);
+  --simple-textfield-default-hint-margin-left: 20px;
+  --simple-textfield-default-margin-bottom: 5px;
+  --simple-textfield-default-color: rgb(var(--global-color-contrast-900))
+}

package/dist/components/simple/forms/SimpleTextField.svelte

@@ -1,38 +1,23 @@
-<script>import Icon from "../media/Icon.svelte";
-export let _padding = null, _width = null, _height = null, _backgroundColor = null, _borderRadius = null, _boxShadow = null, _focusBackgroundColor = null, _focusBoxShadow = null, _transition = null, _fontSize = null, _fontWeight = null, _outerGap = null, _innerGap = null, _hintFontSize = null, _hintColor = null, _hintMarginLeft = null, _marginBottom = null;
-export let value = void 0, type = "text", placeholder = void 0, disabled = false, readonly = false, appendIcon = void 0, appendInnerIcon = void 0, prependIcon = void 0, prependInnerIcon = void 0, iconSize = 12, hint = void 0;
+<script>import "./SimpleTextField.css";
+import Icon from "../media/Icon.svelte";
+let clazz = {};
+export { clazz as class };
+export let value = void 0, type = "text", placeholder = void 0, disabled = false, readonly = false, appendIcon = void 0, appendInnerIcon = void 0, prependIcon = void 0, prependInnerIcon = void 0, iconSize = "12pt", hint = void 0, input = void 0;
 </script>
 
 <div
-  class="textfield-container"
-  style:--simple-textfield-padding={_padding}
-  style:--simple-textfield-height={_height}
-  style:--simple-textfield-width={_width}
-  style:--simple-textfield-background-color={_backgroundColor}
-  style:--simple-textfield-border-radius={_borderRadius}
-  style:--simple-textfield-box-shadow={_boxShadow}
-  style:--simple-textfield-focus-background-color={_focusBackgroundColor}
-  style:--simple-textfield-focus-box-shadow={_focusBoxShadow}
-  style:--simple-textfield-transition={_transition}
-  style:--simple-textfield-font-size={_fontSize}
-  style:--simple-textfield-font-weight={_fontWeight}
-  style:--simple-textfield-outer-gap={_outerGap}
-  style:--simple-textfield-inner-gap={_innerGap}
-  style:--simple-textfield-hint-font-size={_hintFontSize}
-  style:--simple-textfield-hint-color={_hintColor}
-  style:--simple-textfield-hint-margin-left={_hintMarginLeft}
-  style:--simple-textfield-margin-bottom={_marginBottom}
+  class="textfield-container {clazz.container || ''}"
 >
-  <div class="row">
+  <div class="row {clazz.row}">
     <slot name="prepend" {prependIcon} {iconSize}>
       {#if !!prependIcon}
-          <Icon name={prependIcon} size={iconSize}></Icon>
+        <Icon name={prependIcon} --icon-size={iconSize}></Icon>
       {/if}
     </slot>
     <div class="textfield">
       <slot name="prepend-inner" {prependInnerIcon} {iconSize}>
         {#if !!prependInnerIcon}
-          <Icon name={prependInnerIcon} size={iconSize}></Icon>
+          <Icon name={prependInnerIcon} --icon-size={iconSize}></Icon>
         {/if}
       </slot>
       {#if type == "text"}
@@ -49,6 +34,9 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
           on:keydown
           on:keypress
           on:keyup
+          on:change
+          class={clazz.input || ''}
+          bind:this={input}
         />
       {:else if type == "password"}
         <input
@@ -64,6 +52,9 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
           on:keydown
           on:keypress
           on:keyup
+          on:change
+          class={clazz.input || ''}
+          bind:this={input}
         />
       {:else if type == "number"}
         <input
@@ -79,21 +70,24 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
           on:keydown
           on:keypress
           on:keyup
+          on:change
+          class={clazz.input || ''}
+          bind:this={input}
         />
       {/if}
       <slot name="append-inner" {appendInnerIcon} {iconSize}>
         {#if !!appendInnerIcon}
-          <Icon name={appendInnerIcon} size={iconSize}></Icon>
+          <Icon name={appendInnerIcon} --icon-size={iconSize}></Icon>
         {/if}
       </slot>
     </div>
     <slot name="append" {appendIcon} {iconSize}>
       {#if !!appendIcon}
-        <Icon name={appendIcon} size={iconSize}></Icon>
+        <Icon name={appendIcon} --icon-size={iconSize}></Icon>
       {/if}
     </slot>
   </div>
-  <div class="row">
+  <div class="row {clazz.hint || ''}">
     <slot name="hint">
       {#if !!hint}
         <span class="hint">{hint}</span>
@@ -103,11 +97,32 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
 </div>
 
 <style>
+  .textfield-container {
+    max-width: var(
+      --simple-textfield-max-width,
+      var(--simple-textfield-default-max-width)
+    );
+    width: var(
+      --simple-textfield-width,
+      var(--simple-textfield-default-width)
+    );
+  }
+
   .row {
     display: flex;
     align-items: center;
-    gap: var(--simple-textfield-outer-gap, 8px);
-    margin-bottom: var(--simple-textfield-margin-bottom, 5px);
+    gap: var(
+      --simple-textfield-outer-gap, 
+      var(--simple-textfield-default-outer-gap)
+    );
+    margin-bottom: var(
+      --simple-textfield-margin-bottom,
+      var(--simple-textfield-default-margin-bottom)
+    );
+    margin-left: var(
+      --simple-textfield-margin-left,
+      var(--simple-textfield-default-margin-left)
+    );
   }
 
   .row:last-of-type {
@@ -115,35 +130,86 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
   }
 
   .hint {
-    margin-left: var(--simple-textfield-hint-margin-left, 20px);
-    font-size: var(--simple-textfield-hint-font-size, 0.75rem);
-    color: var(--simple-textfield-hint-color, grey);
+    margin-left: var(
+      --simple-textfield-hint-margin-left, 
+      var(--simple-textfield-default-hint-margin-left)
+    );
+    font-size: var(
+      --simple-textfield-hint-font-size, 
+      var(--simple-textfield-default-hint-font-size)
+    );
+    color: var(
+      --simple-textfield-hint-color,
+      var(--simple-textfield-default-hint-color)
+    );
   }
 
   .textfield {
-    padding: var(--simple-textfield-padding, 0.65rem 1rem 0.65rem 1rem);
-    width: var(--simple-textfield-width, 280px);
-    height: var(--simple-textfield-height);
-    background-color: var(--simple-textfield-background-color, rgb(244 244 245/1));
+    padding: var(
+      --simple-textfield-padding,
+      var(--simple-textfield-default-padding)
+    );
+    height: var(
+      --simple-textfield-height,
+      var(--simple-textfield-default-height)
+    );
+    background-color: var(
+      --simple-textfield-background-color,
+      var(--simple-textfield-default-background-color)
+    );
     border: none;
-    border-radius: var(--simple-textfield-border-radius, 9999px);
-    box-shadow: var(--simple-textfield-box-shadow, none);
-    transition: var(--simple-textfield-transition, 0.2s);
-    gap: var(--simple-textfield-inner-gap, 8px);
+    border-radius: var(
+      --simple-textfield-border-radius,
+      var(--simple-textfield-default-border-radius)
+    );
+    box-shadow: var(
+      --simple-textfield-box-shadow,
+      var(--simple-textfield-default-box-shadow)
+    );
+    transition: var(
+      --simple-textfield-transition,
+      var(--simple-textfield-default-transition)
+    );
+    gap: var(
+      --simple-textfield-inner-gap,
+      var(--simple-textfield-default-inner-gap)
+    );
     display: flex;
   }
 
   .textfield:focus-within {
-    background-color: var(--simple-textfield-focus-background-color, var(--simple-textfield-background-color, rgb(244 244 245/1)));
-    box-shadow: var(--simple-textfield-focus-box-shadow, rgba(100, 100, 111, 0.4) 0px 4px 25px 0px);
+    background-color: var(
+      --simple-textfield-focus-background-color, 
+      var(
+        --simple-textfield-default-focus-background-color,
+        var(
+          --simple-textfield-background-color,
+          var(--simple-textfield-default-background-color)
+        )
+      )
+    );
+    box-shadow: var(
+      --simple-textfield-focus-box-shadow, 
+      var(--simple-textfield-default-focus-box-shadow)
+    );
   }
 
   input {
     outline: none;
     width: 100%;
     background-color: transparent;
-    font-size: var(--simple-textfield-font-size, .9rem);
-    font-weight: var(--simple-textfield-font-weight, normal);
+    font-size: var(
+      --simple-textfield-font-size, 
+      var(--simple-textfield-default-font-size)
+    );
+    font-weight: var(
+      --simple-textfield-font-weight,
+      var(--simple-textfield-default-font-weight)
+    );
+    color: var(
+      --simple-textfield-color,
+      var(--simple-textfield-default-color)
+    );
     border: none
   }
 </style>

package/dist/components/simple/forms/SimpleTextField.svelte.d.ts

@@ -1,23 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import './SimpleTextField.css';
 declare const __propDef: {
     props: {
-        _padding?: string | null | undefined;
-        _width?: string | null | undefined;
-        _height?: string | null | undefined;
-        _backgroundColor?: string | null | undefined;
-        _borderRadius?: string | null | undefined;
-        _boxShadow?: string | null | undefined;
-        _focusBackgroundColor?: string | null | undefined;
-        _focusBoxShadow?: string | null | undefined;
-        _transition?: string | null | undefined;
-        _fontSize?: string | null | undefined;
-        _fontWeight?: string | null | undefined;
-        _outerGap?: string | null | undefined;
-        _innerGap?: string | null | undefined;
-        _hintFontSize?: string | null | undefined;
-        _hintColor?: string | null | undefined;
-        _hintMarginLeft?: string | null | undefined;
-        _marginBottom?: string | null | undefined;
+        class?: {
+            container?: string | undefined;
+            row?: string | undefined;
+            hint?: string | undefined;
+            input?: string | undefined;
+        } | undefined;
         value?: string | number | undefined;
         type?: "number" | "text" | "password" | undefined;
         placeholder?: string | undefined;
@@ -27,8 +17,9 @@ declare const __propDef: {
         appendInnerIcon?: string | undefined;
         prependIcon?: string | undefined;
         prependInnerIcon?: string | undefined;
-        iconSize?: number | undefined;
+        iconSize?: string | undefined;
         hint?: string | undefined;
+        input?: HTMLElement | undefined;
     };
     events: {
         change: Event;
@@ -44,19 +35,19 @@ declare const __propDef: {
     slots: {
         prepend: {
             prependIcon: string | undefined;
-            iconSize: number;
+            iconSize: string;
         };
         'prepend-inner': {
             prependInnerIcon: string | undefined;
-            iconSize: number;
+            iconSize: string;
         };
         'append-inner': {
             appendInnerIcon: string | undefined;
-            iconSize: number;
+            iconSize: string;
         };
         append: {
             appendIcon: string | undefined;
-            iconSize: number;
+            iconSize: string;
         };
         hint: {};
     };

package/dist/components/simple/lists/SelectableMenuList.css

@@ -0,0 +1,7 @@
+:root {
+  --selectable-menu-list-default-divider-background-color: rgb(var(--global-color-background-500));
+  --selectable-menu-list-default-divider-height: 1px;
+  --selectable-menu-list-default-icon-gap: 10px;
+  --selectable-menu-list-default-spacing: 1.5rem;
+  --selectable-menu-list-default-selected-color: rgb(var(--global-color-primary-400));
+}