@likable-hair/svelte 3.0.19 → 3.0.21

package/dist/components/simple/dates/DatePickerTextField.svelte

@@ -6,8 +6,10 @@ import Icon from "../media/Icon.svelte";
 import { onMount } from "svelte";
 import { DateTime } from "luxon";
 import { createEventDispatcher } from "svelte";
+import MediaQuery from "../common/MediaQuery.svelte";
+import Dialog from "../dialogs/Dialog.svelte";
 let dispatch = createEventDispatcher();
-export let menuOpened = false, openingId = "date-picker-text-field", pattern = "dd/MM/yyyy", selectedMonth = void 0, selectedYear = void 0, visibleMonth = void 0, visibleYear = void 0, selectedDate = void 0;
+export let menuOpened = false, openingId = "date-picker-text-field", pattern = "dd/MM/yyyy", selectedMonth = void 0, selectedYear = void 0, visibleMonth = void 0, visibleYear = void 0, selectedDate = void 0, placeholder = void 0, mobileDialog = true;
 let activator, refreshPosition = false, menuElement, inputElement, mask = {
   value: void 0
 }, maskFactoryArgs = {
@@ -47,8 +49,10 @@ let activator, refreshPosition = false, menuElement, inputElement, mask = {
     }
   }
 };
-function handleTextFieldFocus() {
-  menuOpened = true;
+function handleTextFieldFocus(mobile) {
+  if (!mobile || !mobileDialog) {
+    menuOpened = true;
+  }
 }
 onMount(() => {
   mask = IMask(
@@ -100,64 +104,90 @@ function handleMonthSelect() {
 }
 </script>
 
-<div 
-  bind:this={activator}
-  style:width="fit-content"
->
-  <SimpleTextField
-    bind:value={mask.value}
-    on:focus={handleTextFieldFocus}
-    on:keypress={handleInputChange}
-    bind:input={inputElement}
-  >
-    <svelte:fragment slot="prepend-inner" let:prependInnerIcon let:iconSize>
-      <slot name="prepend-inner" {prependInnerIcon} {iconSize}>
-        <Icon 
-          name="mdi-calendar"
-          click
-          on:click={() => menuOpened = !menuOpened}
-        ></Icon>
-      </slot>
-    </svelte:fragment>
-    <svelte:fragment slot="append-inner" let:appendInnerIcon let:iconSize>
-      <slot name="append-inner" {appendInnerIcon} {iconSize}>
-      </slot>
-    </svelte:fragment>
-    <svelte:fragment slot="prepend" let:prependIcon let:iconSize>
-      <slot name="append-inner" {prependIcon} {iconSize}>
-      </slot>
-    </svelte:fragment>
-    <svelte:fragment slot="append" let:appendIcon let:iconSize>
-      <slot name="append-inner" {appendIcon} {iconSize}>
-      </slot>
-    </svelte:fragment>
-  </SimpleTextField>
-</div>
-
-<Menu
-  {activator}
-  _width={"300px"}
-  _boxShadow={"rgb(var(--global-color-background-300), .5) 0px 2px 4px"}
-  _borderRadius={"5px"}
-  bind:open={menuOpened}
-  anchor="bottom-center"
-  closeOnClickOutside
-  bind:refreshPosition
-  bind:menuElement
-  bind:openingId={openingId}
->
+<MediaQuery let:mAndDown>
   <div
-    style:background-color="rgb(var(--global-color-background-100))"
+    bind:this={activator}
   >
-    <DatePicker
-      bind:selectedDate={selectedDate}
-      bind:selectedMonth={selectedMonth}
-      bind:selectedYear={selectedYear}
-      bind:visibleMonth
-      bind:visibleYear
-      on:day-click={handleDateSelect}
-      on:year-click={handleYearSelect}
-      on:month-click={handleMonthSelect}
-    ></DatePicker>
+    <SimpleTextField
+      bind:value={mask.value}
+      on:focus={() => handleTextFieldFocus(mAndDown)}
+      on:keypress={handleInputChange}
+      bind:input={inputElement}
+      bind:placeholder
+    >
+      <svelte:fragment slot="prepend-inner" let:prependInnerIcon let:iconSize>
+        <slot name="prepend-inner" {prependInnerIcon} {iconSize}>
+          <Icon
+            name="mdi-calendar"
+            click
+            on:click={() => menuOpened = !menuOpened}
+          ></Icon>
+        </slot>
+      </svelte:fragment>
+      <svelte:fragment slot="append-inner" let:appendInnerIcon let:iconSize>
+        <slot name="append-inner" {appendInnerIcon} {iconSize}>
+        </slot>
+      </svelte:fragment>
+      <svelte:fragment slot="prepend" let:prependIcon let:iconSize>
+        <slot name="append-inner" {prependIcon} {iconSize}>
+        </slot>
+      </svelte:fragment>
+      <svelte:fragment slot="append" let:appendIcon let:iconSize>
+        <slot name="append-inner" {appendIcon} {iconSize}>
+        </slot>
+      </svelte:fragment>
+    </SimpleTextField>
   </div>
-</Menu>
+
+  {#if mAndDown && mobileDialog}
+    <Dialog
+      bind:open={menuOpened}
+    >
+      <div
+        style:background-color="rgb(var(--global-color-background-100))"
+        style:width="300px"
+        style:border-radius="10px"
+      >
+        <DatePicker
+          bind:selectedDate={selectedDate}
+          bind:selectedMonth={selectedMonth}
+          bind:selectedYear={selectedYear}
+          bind:visibleMonth
+          bind:visibleYear
+          on:day-click={handleDateSelect}
+          on:year-click={handleYearSelect}
+          on:month-click={handleMonthSelect}
+        ></DatePicker>
+      </div>
+    </Dialog>
+  {:else}
+    <Menu
+      {activator}
+      _width={"300px"}
+      _boxShadow={"rgb(var(--global-color-background-300), .5) 0px 2px 4px"}
+      _borderRadius={"5px"}
+      bind:open={menuOpened}
+      anchor="bottom-center"
+      closeOnClickOutside
+      bind:refreshPosition
+      bind:menuElement
+      bind:openingId={openingId}
+    >
+      <div
+        style:background-color="rgb(var(--global-color-background-100))"
+      >
+        <DatePicker
+          bind:selectedDate={selectedDate}
+          bind:selectedMonth={selectedMonth}
+          bind:selectedYear={selectedYear}
+          bind:visibleMonth
+          bind:visibleYear
+          on:day-click={handleDateSelect}
+          on:year-click={handleYearSelect}
+          on:month-click={handleMonthSelect}
+        ></DatePicker>
+      </div>
+    </Menu>
+  {/if}
+</MediaQuery>
+

package/dist/components/simple/dates/DatePickerTextField.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         visibleMonth?: number | undefined;
         visibleYear?: number | undefined;
         selectedDate?: Date | undefined;
+        placeholder?: string | undefined;
+        mobileDialog?: boolean | undefined;
     };
     events: {
         'day-click': CustomEvent<{

package/dist/components/simple/dialogs/Dialog.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         open?: boolean | undefined;
-        transition?: "scale" | "fly-down" | "fly-up" | "fly-horizontal" | "fade" | undefined;
+        transition?: "fly-down" | "fly-up" | "fly-horizontal" | "scale" | "fade" | undefined;
         _overlayOpacity?: string | undefined;
         _overlayColor?: string | undefined;
         _overlayBackdropFilter?: string | undefined;

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

@@ -9,4 +9,5 @@
   --autocomplete-default-min-height: 2rem;
   --autocomplete-default-padding: 0.5rem .5rem .5rem .5rem;
   --autocomplete-default-border-radius: 1.5rem;
+  --autocomplete-default-options-max-width: 100%;
 }

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

@@ -5,7 +5,7 @@ import "./Autocomplete.css";
 import { scrollInMenu } from "../common/scroller";
 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", searchText = void 0, maxVisibleChips = void 0, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px";
+export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false;
 let dispatch = createEventDispatcher();
 function select(item) {
   const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
@@ -23,6 +23,8 @@ function select(item) {
   }
 }
 function unselect(item) {
+  if (values.length == 1 && mandatory)
+    return;
   values = values.filter((i) => i.value != item.value);
   refreshMenuWidth();
   dispatch("change", {
@@ -32,6 +34,8 @@ function unselect(item) {
   });
 }
 function pop() {
+  if (values.length == 1 && mandatory)
+    return;
   let poppedElement = values.pop();
   values = [...values];
   refreshMenuWidth();
@@ -48,7 +52,7 @@ function toggle(item) {
   else
     select(item);
 }
-let menuWidth = void 0, menuHeight = "auto", menuOpened = false, refreshPosition = false;
+let menuWidth = void 0, menuHeight = "auto", refreshPosition = false;
 function openMenu() {
   refreshMenuWidth();
   menuOpened = true;
@@ -120,11 +124,12 @@ $:
     filteredItems = items;
   }
 $:
-  notVisibleChipNumber = Math.max(values.length - (maxVisibleChips || 0), 0);
+  notVisibleChipNumber = Math.max((values?.length || 0) - (maxVisibleChips || 0), 0);
 import Chip from "../navigation/Chip.svelte";
 import Menu from "../common/Menu.svelte";
 import { createEventDispatcher } from "svelte";
 import SimpleTextField from "./SimpleTextField.svelte";
+import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
 </script>
 
 <svelte:window />
@@ -143,7 +148,7 @@ import SimpleTextField from "./SimpleTextField.svelte";
     <div
       class="selection-container"
     >
-      {#each values.slice(0, maxVisibleChips) as selection}
+      {#each (values || []).slice(0, maxVisibleChips) as selection}
         <slot name="selection" {selection}>
           <div tabindex="-1">
             <Chip
@@ -151,7 +156,10 @@ import SimpleTextField from "./SimpleTextField.svelte";
               on:close={() => unselect(selection)}
               --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
               buttonTabIndex={-1}
-            >{selection.label}</Chip>
+              truncateText
+            >
+              {selection.label}
+            </Chip>
           </div>
         </slot>
       {/each}
@@ -184,51 +192,93 @@ import SimpleTextField from "./SimpleTextField.svelte";
 </div>
 
 <slot name="menu">
-  <Menu
-    {activator}
-    _width={menuWidth || ""}
-    _height={menuHeight}
-    _maxHeight="300px"
-    _boxShadow={menuBoxShadow}
-    _borderRadius={menuBorderRadius}
-    bind:open={menuOpened}
-    anchor="bottom-center"
-    closeOnClickOutside
-    bind:refreshPosition
-    bind:menuElement
-    bind:openingId={openingId}
-    flipOnOverflow
-  >
-    <ul 
-      class={clazz.menu || ''}
-      style:background-color="rgb(var(--global-color-background-100))"
+  {#if !mobileDrawer}
+    <Menu
+      {activator}
+      _width={menuWidth || ""}
+      _height={menuHeight}
+      _maxHeight="300px"
+      _boxShadow={menuBoxShadow}
+      _borderRadius={menuBorderRadius}
+      bind:open={menuOpened}
+      anchor="bottom-center"
+      closeOnClickOutside
+      bind:refreshPosition
+      bind:menuElement
+      bind:openingId={openingId}
+      flipOnOverflow
     >
-      {#each filteredItems as item, index}
-        <li class="item-{index}">
-          <slot
-            name="item"
-            {item}
-            {index}
-            selected={values.findIndex((i) => {
-              return i.value == item.value;
-            }) != -1}
-          >
-            <div
-              class:selection-item={true}
-              class:focused={index == focusedIndex}
-              class:selected={values.findIndex((i) => {
+      <ul
+        class={clazz.menu || ''}
+        style:background-color="rgb(var(--global-color-background-100))"
+      >
+        {#each filteredItems as item, index}
+          <li class="item-{index}">
+            <slot
+              name="item"
+              {item}
+              {index}
+              selected={(values || []).findIndex((i) => {
                 return i.value == item.value;
               }) != -1}
-              on:click={() => toggle(item)}
-              on:keypress={() => toggle(item)}
             >
-              {item.label}
-            </div>
-          </slot>
-        </li>
-      {/each}
-    </ul>
-  </Menu>
+              <div
+                class:selection-item={true}
+                class:focused={index == focusedIndex}
+                class:selected={(values || []).findIndex((i) => {
+                  return i.value == item.value;
+                }) != -1}
+                on:click={() => toggle(item)}
+                on:keypress={() => toggle(item)}
+              >
+                {item.label}
+              </div>
+            </slot>
+          </li>
+        {/each}
+      </ul>
+    </Menu>
+  {:else}
+    <MenuOrDrawer
+      {activator}
+      _height={menuHeight}
+      _maxHeight="300px"
+      _boxShadow={menuBoxShadow}
+      _borderRadius={menuBorderRadius}
+      bind:open={menuOpened}
+      on:close
+    >
+      <ul
+        class={clazz.menu || ''}
+        style:background-color="rgb(var(--global-color-background-100))"
+      >
+        {#each filteredItems as item, index}
+          <li class="item-{index}">
+            <slot
+              name="item"
+              {item}
+              {index}
+              selected={(values || []).findIndex((i) => {
+                return i.value == item.value;
+              }) != -1}
+            >
+              <div
+                class:selection-item={true}
+                class:focused={index == focusedIndex}
+                class:selected={(values || []).findIndex((i) => {
+                  return i.value == item.value;
+                }) != -1}
+                on:click={() => toggle(item)}
+                on:keypress={() => toggle(item)}
+              >
+                {item.label}
+              </div>
+            </slot>
+          </li>
+        {/each}
+      </ul>
+    </MenuOrDrawer>
+  {/if}
 </slot>
 
 <style>
@@ -267,6 +317,10 @@ import SimpleTextField from "./SimpleTextField.svelte";
 
   .selection-item {
     padding: 10px;
+    max-width: var(--autocomplete-options-max-width, var(--autocomplete-default-options-max-width));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
   .selection-item.selected {

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

@@ -17,6 +17,7 @@ declare const __propDef: {
         searchFunction?: ((item: Item, searchText: string | undefined) => boolean) | undefined;
         multiple?: boolean | undefined;
         disabled?: boolean | undefined;
+        mandatory?: boolean | undefined;
         placeholder?: string | undefined;
         width?: string | undefined;
         height?: string | undefined;
@@ -24,13 +25,16 @@ declare const __propDef: {
         openingId?: string | undefined;
         searchText?: string | undefined;
         maxVisibleChips?: number | undefined;
+        menuOpened?: boolean | undefined;
         menuBoxShadow?: string | undefined;
         menuBorderRadius?: string | undefined;
+        mobileDrawer?: boolean | undefined;
     };
     events: {
         focus: FocusEvent;
         blur: FocusEvent;
         keydown: KeyboardEvent;
+        close: CustomEvent<{}>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/simple/lists/SelectableVerticalList.svelte

@@ -5,7 +5,7 @@ import "./SelectableVerticalList.css";
 import keyboarder from "../../../utils/keyboarder";
 import { createEventDispatcher, onMount } from "svelte";
 import Icon from "../media/Icon.svelte";
-export let activeKeyboard = false, loopSelection = true, focused = void 0, selected = void 0, elements = [];
+export let activeKeyboard = false, loopSelection = true, focused = void 0, selected = void 0, elements = [], centered = false, bicolor = false, appendIconSize = "20pt";
 let dispatch = createEventDispatcher();
 $:
   focusedIndex = elements.findIndex((el) => el.name == focused);
@@ -53,6 +53,12 @@ onMount(() => {
     keyboarder.off(handleKeypress);
   };
 });
+function handleIconClick(index, element) {
+  dispatch("iconClick", {
+    index,
+    element
+  });
+}
 </script>
 
 <ul
@@ -62,6 +68,7 @@ onMount(() => {
   {#each elements as element, index (element.name)}
     <li
       class="element"
+      class:bicolor
       class:focused={focused == element.name}
       aria-selected={selected == element.name}
       on:mouseover={() => handleElementMouseover(element)}
@@ -71,20 +78,19 @@ onMount(() => {
       style:color={element.style?.color}
       style:background-color={element.style?.backgroundColor}
     >
-      <slot 
+      <slot
         name="element"
         focused={focused == element.name}
         selected={selected == element.name}
       >
         {#if !!element.icon}
-          <Icon 
-            name={element.icon} 
-            --icon-default-size="20px"
+          <Icon
+            name={element.icon}
           ></Icon>
         {/if}
-        <div class="title-description-container">
+        <div class="title-description-container" class:centered>
           <div class="title">
-            <slot 
+            <slot
               name="title"
               focused={focused == element.name}
               selected={selected == element.name}
@@ -93,9 +99,9 @@ onMount(() => {
               {element.title}
             </slot>
           </div>
-          {#if !!element.description}  
+          {#if !!element.description}
             <div class="description">
-              <slot 
+              <slot
                 name="description"
                 focused={focused == element.name}
                 selected={selected == element.name}
@@ -106,6 +112,18 @@ onMount(() => {
             </div>
           {/if}
         </div>
+        {#if !!element.appendIcon}
+          <div
+            class="append"
+            on:click|stopPropagation={() => {handleIconClick(index, element)}}
+            on:keypress
+          >
+            <Icon
+              name={element.appendIcon}
+              --icon-size={appendIconSize}
+            ></Icon>
+          </div>
+        {/if}
       </slot>
     </li>
   {/each}
@@ -162,6 +180,17 @@ onMount(() => {
     margin-top: 0.2rem;
   }
 
+  .bicolor:nth-child(even) {
+    background-color: var(
+      --selectable-vertical-list-focus-background-color,
+      var(--selectable-vertical-list-default-focus-background-color)
+    );
+    color: var(
+      --selectable-vertical-list-focus-color,
+      var(--selectable-vertical-list-default-focus-color)
+    )
+  }
+
   .element {
     padding: var(
       --selectable-vertical-list-element-padding,
@@ -183,6 +212,7 @@ onMount(() => {
     display: flex;
     align-items: center;
     gap: 10px;
+    -webkit-tap-highlight-color: transparent;
   }
 
   .title-description-container {
@@ -214,4 +244,17 @@ onMount(() => {
       var(--selectable-vertical-list-default-selection-color)
     )
   }
+
+
+  .centered {
+    width: 100%;
+    text-align: center;
+  }
+
+  .append {
+    padding: 10px 20px 10px 20px;
+    position: absolute;
+    right: 0;
+  }
+
 </style>

package/dist/components/simple/lists/SelectableVerticalList.svelte.d.ts

@@ -9,6 +9,7 @@ export type Element = {
         color?: string;
         backgroundColor?: string;
     };
+    appendIcon?: string;
 };
 import '../../../css/main.css';
 import './SelectableVerticalList.css';
@@ -19,14 +20,22 @@ declare const __propDef: {
         focused?: string | number | undefined;
         selected?: string | number | undefined;
         elements?: Element[] | undefined;
+        centered?: boolean | undefined;
+        bicolor?: boolean | undefined;
+        appendIconSize?: string | undefined;
     };
     events: {
+        keypress: KeyboardEvent;
         select: CustomEvent<{
             element: Element;
         }>;
         focus: CustomEvent<{
             element: Element;
         }>;
+        iconClick: CustomEvent<{
+            index: number;
+            element: Element;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };