@likable-hair/svelte 3.3.28 → 3.3.30

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

@@ -1,224 +1,165 @@
-<script context="module" lang="ts">
-  export type Item = {
-    value: string | number;
-    label?: string | number;
-    /* eslint-disable  @typescript-eslint/no-explicit-any */
-    data?: any;
-  };
-</script>
-
-<script lang="ts">
-  import '../../../css/main.css'
-  import './Autocomplete.css'
-  import { scrollInMenu } from '../common/scroller';
-
-  let clazz: {
-    activator?: string,
-    menu?: string,
-    simpleTextfield?: ComponentProps<SimpleTextField>['class']
-  } = {};
-	export { clazz as class };
-
-  export let values: Item[] = [],
-    items: Item[],
-    searchFunction: ((item: Item, searchText: string | undefined) => boolean) | undefined =
-      undefined,
-    multiple = false,
-    disabled = false,
-    mandatory = false,
-    placeholder = "",
-    width = "auto",
-    height = "auto",
-    maxWidth: string | undefined = undefined,
-    minWidth: string | undefined = "200px",
-    openingId: string = "autocomplete-menu",
-    searchText: string | undefined = undefined,
-    maxVisibleChips: number | undefined = undefined,
-    menuOpened: boolean = false,
-    closeOnSelect: boolean = !multiple,
-    emptySearchTextOnMenuClose: boolean = true,
-    // menu
-    menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px",
-    menuBorderRadius = "5px",
-    mobileDrawer: boolean = false,
-    menuWidth: string | undefined | null = undefined,
-    menuAnchor: "bottom" | "bottom-center" | "right-center" | undefined = 'bottom-center'
-
-  let dispatch = createEventDispatcher<{
-    change: {
-      unselect: Item | undefined;
-      select: Item | undefined;
-      selection: Item[];
-    }
-  }>();
-
-  function select(item: Item) {
-    if(disabled) return
-
-    const alreadyPresent =
-      values.findIndex((i) => i.value === item.value) != -1;
-
-    if (!alreadyPresent) {
-      if (multiple) values = [...values, item];
-      else values = [item];
-      refreshMenuWidth();
-
-      dispatch("change", {
-        unselect: undefined,
-        select: item,
-        selection: values,
-      });
-    }
-
-    if (!multiple && closeOnSelect) menuOpened = false
-  }
-
-  function unselect(item: Item) {
-    if(disabled) return
-
-    if(values.length == 1 && mandatory) return
-    values = values.filter((i) => i.value != item.value);
+<script context="module"></script>
+
+<script>import "../../../css/main.css";
+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, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, minWidth = "200px", openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = void 0, menuAnchor = "bottom-center";
+let dispatch = createEventDispatcher();
+function select(item) {
+  if (disabled)
+    return;
+  const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+  if (!alreadyPresent) {
+    if (multiple)
+      values = [...values, item];
+    else
+      values = [item];
     refreshMenuWidth();
-
-    dispatch("change", {
-      unselect: item,
-      select: undefined,
-      selection: values,
-    });
-  }
-
-  function pop() {
-    if(values.length == 1 && mandatory) return
-    let poppedElement = values.pop()
-    values = [...values]
-    refreshMenuWidth()
-
     dispatch("change", {
-      unselect: poppedElement,
-      select: undefined,
-      selection: values,
+      unselect: void 0,
+      select: item,
+      selection: values
     });
   }
-
-  function toggle(item: Item) {
-    const alreadyPresent =
-      values.findIndex((i) => i.value === item.value) != -1;
-
-    if (alreadyPresent) unselect(item);
-    else select(item);
-  }
-
-  let localMenuWidth: string | undefined | null = undefined,
-    menuHeight = "auto",
-    refreshPosition = false;
-
-  function openMenu() {
-    refreshMenuWidth();
-    menuOpened = true;
-  }
-
-  function refreshMenuWidth() {
+  if (!multiple && closeOnSelect)
+    menuOpened = false;
+}
+function unselect(item) {
+  if (disabled)
+    return;
+  if (values.length == 1 && mandatory)
+    return;
+  values = values.filter((i) => i.value != item.value);
+  refreshMenuWidth();
+  dispatch("change", {
+    unselect: item,
+    select: void 0,
+    selection: values
+  });
+}
+function pop() {
+  if (values.length == 1 && mandatory)
+    return;
+  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)
+    unselect(item);
+  else
+    select(item);
+}
+let localMenuWidth = void 0, menuHeight = "auto", refreshPosition = false;
+function openMenu() {
+  refreshMenuWidth();
+  menuOpened = true;
+}
+function refreshMenuWidth() {
+  setTimeout(() => {
+    if (menuWidth !== void 0)
+      localMenuWidth = menuWidth;
+    else
+      localMenuWidth = activator.offsetWidth + "px";
     setTimeout(() => {
-      if(menuWidth !== undefined) localMenuWidth = menuWidth
-      else localMenuWidth = activator.offsetWidth + "px"
-
-      setTimeout(() => {
-        refreshPosition = true;
-      }, 1);
+      refreshPosition = true;
     }, 1);
+  }, 1);
+}
+let activator, focusedIndex = void 0;
+function handleTextFieldFocus() {
+  if (disabled)
+    return;
+  focusedIndex = void 0;
+  openMenu();
+}
+function handleTextFieldBlur() {
+}
+let menuElement;
+function handleKeyDown(event) {
+  if (disabled)
+    return;
+  if (event.key == "ArrowDown" && (focusedIndex === void 0 || focusedIndex < filteredItems.length - 1)) {
+    if (focusedIndex === void 0)
+      focusedIndex = 0;
+    else
+      focusedIndex += 1;
+  } else if (event.key == "ArrowUp" && (focusedIndex === void 0 || focusedIndex > 0)) {
+    if (focusedIndex === void 0)
+      focusedIndex = filteredItems.length - 1;
+    else
+      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 = "";
+    if (!!input)
+      input.blur();
+    menuOpened = false;
   }
-
-  let activator: HTMLElement,
-    focusedIndex: number | undefined = undefined;
-  function handleTextFieldFocus() {
-    if(disabled) return
-    focusedIndex = undefined;
-    openMenu();
-  }
-
-  function handleTextFieldBlur() {
-    // closeMenu()
-  }
-
-  let menuElement: HTMLElement;
-  function handleKeyDown(event: { key: string }) {
-    if(disabled) return
-
-    if (
-      event.key == "ArrowDown" &&
-      (focusedIndex === undefined || focusedIndex < filteredItems.length - 1)
-    ) {
-      if (focusedIndex === undefined) focusedIndex = 0;
-      else focusedIndex += 1;
-    } else if (
-      event.key == "ArrowUp" &&
-      (focusedIndex === undefined || focusedIndex > 0)
-    ) {
-      if (focusedIndex === undefined) focusedIndex = filteredItems.length - 1;
-      else focusedIndex -= 1;
-    } else if (event.key == "Enter" && focusedIndex != undefined) {
-      toggle(filteredItems[focusedIndex]);
-    } else if(event.key == 'Backspace' && searchText == '') {
-      pop()
-    } else if(event.key == 'Escape' || event.key == 'Tab') {
-      searchText = ''
-      if(!!input) input.blur()
-      menuOpened = false
-    }
-
-    if(focusedIndex !== undefined && !!menuElement) {
-      let child = menuElement.querySelector<HTMLElement>('.item-' + focusedIndex)
-
-      if(!!child) scrollInMenu(menuElement, child, 'instant')
-    }
+  if (focusedIndex !== void 0 && !!menuElement) {
+    let child = menuElement.querySelector(".item-" + focusedIndex);
+    if (!!child)
+      scrollInMenu(menuElement, child, "instant");
   }
-
-  let input: HTMLElement;
-  function handleContainerClick() {
-    if(disabled) return
-    
-    if (!menuOpened) {
-      if(!!input) input.focus();
-
-      // had to timeout because it was catching click outside
-      setTimeout(() => {
-        openMenu();
-      }, 50);
-    }
+}
+let input;
+function handleContainerClick() {
+  if (disabled)
+    return;
+  if (!menuOpened) {
+    if (!!input)
+      input.focus();
+    setTimeout(() => {
+      openMenu();
+    }, 50);
   }
-
-  let filteredItems: Item[] = items;
-  $: if (searchText) {
-    focusedIndex = undefined;
+}
+let filteredItems = items;
+$:
+  if (searchText) {
+    focusedIndex = void 0;
     filteredItems = items.filter((it) => {
-      if (searchFunction) return searchFunction(it, searchText);
-      else return !!searchText && it.label?.toString().toLowerCase().includes((searchText).toLowerCase());
+      if (searchFunction)
+        return searchFunction(it, searchText);
+      else
+        return !!searchText && it.label?.toString().toLowerCase().includes(searchText.toLowerCase());
     });
   } else {
     filteredItems = items;
   }
-
-  $: notVisibleChipNumber = Math.max((values?.length || 0) - (maxVisibleChips || 0), 0)
-
-  $: if(!menuOpened && emptySearchTextOnMenuClose) {
+$:
+  notVisibleChipNumber = Math.max((values?.length || 0) - (maxVisibleChips || 0), 0);
+$:
+  if (!menuOpened && emptySearchTextOnMenuClose) {
     setTimeout(() => {
-      if(!menuOpened && emptySearchTextOnMenuClose) searchText = undefined
+      if (!menuOpened && emptySearchTextOnMenuClose)
+        searchText = void 0;
     }, 10);
   }
-
-  $: if(!!input) {
-    if(!disabled && values.length != 0) {
-      input.style.width = Math.max(searchText?.length || placeholder?.length, 1) + 'ch'
+$:
+  if (!!input) {
+    if (!disabled && values.length != 0) {
+      input.style.width = Math.max(searchText?.length || placeholder?.length, 1) + "ch";
     } else {
-      input.style.width = 'auto'
+      input.style.width = "auto";
     }
   }
-
-  import Chip from "../navigation/Chip.svelte";
-  import Menu from "../common/Menu.svelte";
-  import { createEventDispatcher, type ComponentProps } from "svelte";
-  import SimpleTextField from "./SimpleTextField.svelte";
-  import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
+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 />
@@ -334,12 +275,14 @@
       </Menu>
     {:else}
       <MenuOrDrawer
-        {activator}
-        _width={localMenuWidth || ""}
-        _height={menuHeight}
-        _maxHeight="300px"
-        _boxShadow={menuBoxShadow}
-        _borderRadius={menuBorderRadius}
+        menuProps={{
+          activator,
+          _width: localMenuWidth || "", 
+          _height: menuHeight,
+          _maxHeight: "300px",
+          _boxShadow: menuBoxShadow,
+          _borderRadius: menuBorderRadius,
+        }}
         bind:open={menuOpened}
         on:close
       >

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

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 export type Item = {
     value: string | number;
     label?: string | number;
@@ -7,89 +8,84 @@ import '../../../css/main.css';
 import './Autocomplete.css';
 import { type ComponentProps } from "svelte";
 import SimpleTextField from "./SimpleTextField.svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+declare const __propDef: {
+    props: {
+        class?: {
+            activator?: string | undefined;
+            menu?: string | undefined;
+            simpleTextfield?: ComponentProps<SimpleTextField>['class'];
+        } | undefined;
+        values?: Item[] | undefined;
+        items: Item[];
+        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;
+        maxWidth?: string | undefined;
+        minWidth?: string | undefined;
+        openingId?: string | undefined;
+        searchText?: string | undefined;
+        maxVisibleChips?: number | undefined;
+        menuOpened?: boolean | undefined;
+        closeOnSelect?: boolean | undefined;
+        emptySearchTextOnMenuClose?: boolean | undefined;
+        menuBoxShadow?: string | undefined;
+        menuBorderRadius?: string | undefined;
+        mobileDrawer?: boolean | undefined;
+        menuWidth?: string | undefined | null;
+        menuAnchor?: "bottom" | "bottom-center" | "right-center" | undefined;
     };
-    z_$$bindings?: Bindings;
-}
-declare const Autocomplete: $$__sveltets_2_IsomorphicComponent<{
-    class?: {
-        activator?: string;
-        menu?: string;
-        simpleTextfield?: ComponentProps<SimpleTextField>["class"];
-    };
-    values?: Item[];
-    items: Item[];
-    searchFunction?: ((item: Item, searchText: string | undefined) => boolean) | undefined;
-    multiple?: boolean;
-    disabled?: boolean;
-    mandatory?: boolean;
-    placeholder?: string;
-    width?: string;
-    height?: string;
-    maxWidth?: string | undefined;
-    minWidth?: string | undefined;
-    openingId?: string;
-    searchText?: string | undefined;
-    maxVisibleChips?: number | undefined;
-    menuOpened?: boolean;
-    closeOnSelect?: boolean;
-    emptySearchTextOnMenuClose?: boolean;
-    menuBoxShadow?: string;
-    menuBorderRadius?: string;
-    mobileDrawer?: boolean;
-    menuWidth?: string | undefined | null;
-    menuAnchor?: "bottom" | "bottom-center" | "right-center" | undefined;
-}, {
-    focus: FocusEvent;
-    blur: FocusEvent;
-    keydown: KeyboardEvent;
-    close: CustomEvent<{}>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    'selection-container': {
-        values: Item[];
-        searchText: string | undefined;
-        disabled: boolean;
-        openMenu: () => void;
-        handleKeyDown: (event: {
-            key: string;
-        }) => void;
-        unselect: (item: Item) => void;
-        select: (item: Item) => void;
-    };
-    selection: {
-        selection: Item;
-        unselect: (item: Item) => void;
-    };
-    'chip-label': {
-        selection: Item;
+    events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
+        keydown: KeyboardEvent;
+        close: CustomEvent<{}>;
+    } & {
+        [evt: string]: CustomEvent<any>;
     };
-    exceedCounter: {
-        notVisibleChipNumber: number;
-        maxVisibleChips: number | undefined;
-        values: Item[];
-        searchText: string | undefined;
-        disabled: boolean;
+    slots: {
+        'selection-container': {
+            values: Item[];
+            searchText: string | undefined;
+            disabled: boolean;
+            openMenu: () => void;
+            handleKeyDown: (event: {
+                key: string;
+            }) => void;
+            unselect: (item: Item) => void;
+            select: (item: Item) => void;
+        };
+        selection: {
+            selection: Item;
+            unselect: (item: Item) => void;
+        };
+        'chip-label': {
+            selection: Item;
+        };
+        exceedCounter: {
+            notVisibleChipNumber: number;
+            maxVisibleChips: number | undefined;
+            values: Item[];
+            searchText: string | undefined;
+            disabled: boolean;
+        };
+        menu: {};
+        item: {
+            item: Item;
+            index: any;
+            selected: boolean;
+        };
+        'item-label': {
+            item: Item;
+        };
     };
-    menu: {};
-    item: {
-        item: Item;
-        index: any;
-        selected: boolean;
-    };
-    'item-label': {
-        item: Item;
-    };
-}, {}, string>;
-type Autocomplete = InstanceType<typeof Autocomplete>;
-export default Autocomplete;
+};
+export type AutocompleteProps = typeof __propDef.props;
+export type AutocompleteEvents = typeof __propDef.events;
+export type AutocompleteSlots = typeof __propDef.slots;
+export default class Autocomplete extends SvelteComponent<AutocompleteProps, AutocompleteEvents, AutocompleteSlots> {
+}
+export {};

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

@@ -1,45 +1,29 @@
-<script lang="ts">
-  import './Checkbox.css'
-  import '../../../css/main.css'
-  import { createEventDispatcher, onMount } from 'svelte';
-
-  export let value = false,
-    id: string | undefined = undefined,
-    disabled = false;
-
-  onMount(() => {
-    window.addEventListener('keydown', handleKeyDown)
-    window.addEventListener('keyup', handleKeyUp)
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown)
-      window.removeEventListener('keyup', handleKeyUp)
-    }
-  })
-
-  function handleKeyDown(event: KeyboardEvent) {
-    if(event.key == 'Shift') {
-      shiftKeyPressed = true
-    }
+<script>import "./Checkbox.css";
+import "../../../css/main.css";
+import { createEventDispatcher, onMount } from "svelte";
+export let value = false, id = void 0, disabled = false;
+onMount(() => {
+  window.addEventListener("keydown", handleKeyDown);
+  window.addEventListener("keyup", handleKeyUp);
+  return () => {
+    window.removeEventListener("keydown", handleKeyDown);
+    window.removeEventListener("keyup", handleKeyUp);
+  };
+});
+function handleKeyDown(event) {
+  if (event.key == "Shift") {
+    shiftKeyPressed = true;
   }
-
-  function handleKeyUp(event: KeyboardEvent) {
-    if(event.key == 'Shift') {
-      shiftKeyPressed = false
-    }
-  }
-
-  let dispatch = createEventDispatcher<{
-    'change': { 
-      shiftKeyPressed: boolean,
-      nativeEvent: Event
-    }
-  }>(),
-    shiftKeyPressed: boolean = false
-
-  function handleChange(e: Event) {
-    dispatch('change', { shiftKeyPressed, nativeEvent: e })
+}
+function handleKeyUp(event) {
+  if (event.key == "Shift") {
+    shiftKeyPressed = false;
   }
+}
+let dispatch = createEventDispatcher(), shiftKeyPressed = false;
+function handleChange(e) {
+  dispatch("change", { shiftKeyPressed, nativeEvent: e });
+}
 </script>
 
 <input
@@ -48,6 +32,7 @@
   bind:checked={value}
   on:change={handleChange}
   {disabled}
+  on:click
 />
 
 <style>