@likable-hair/svelte 4.2.4 → 4.3.0

package/dist/components/composed/forms/IconsDropdown.svelte

@@ -1,51 +1,96 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  export type IconItem<Data = any> = {
+    value: string | number,
+    icon: string,
+    data?: Data
+  };
 </script>
 
-<script lang="ts" generics="Data">import Dropdown from "./Dropdown.svelte";
-import Icon from "../../simple/media/Icon.svelte";
-import Autocomplete, {} from "../../simple/forms/Autocomplete.svelte";
-let { items = [], values = $bindable([]), clearable = false, disabled = false, placeholder = '', width = "auto", minWidth = "auto", menuWidth = "60px", onchange, } = $props();
-let dropdownValues = $state([]);
-$effect(() => {
+<script lang="ts" generics="Data">
+  import Dropdown from "./Dropdown.svelte";
+  import Icon from "../../simple/media/Icon.svelte";
+  import type { ComponentProps } from "svelte";
+  import Autocomplete, { type Item } from "../../simple/forms/Autocomplete.svelte";
+
+  type IconItemData = IconItem<Data>
+
+  type AutocompleteData = { icon: string, data?: Data }
+  type AutocompleteItem = Item<AutocompleteData>
+  interface Props {
+    items?: IconItemData[];
+    values?: IconItemData[];
+    clearable?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    width?: string;
+    minWidth?: string;
+    menuWidth?: string;
+    onchange?: (event: {
+      detail: {
+        unselect: IconItemData | undefined;
+        select: IconItemData | undefined;
+        selection: IconItemData[];
+      }
+    }) => void
+  }
+
+  let {
+    items = [],
+    values = $bindable([]),
+    clearable = false,
+    disabled = false,
+    placeholder = '',
+    width = "auto",
+    minWidth = "auto",
+    menuWidth = "60px",
+    onchange,
+  }: Props = $props();
+
+  let dropdownValues: AutocompleteItem[] = $state([])
+
+  $effect(() => {
     dropdownValues = values.map((e) => ({
-        value: e.value,
-        data: {
-            icon: e.icon,
-            data: e.data
-        }
-    }));
-});
-let dropDownItems = $derived(items.map((e) => ({
-    value: e.value,
-    data: {
+      value: e.value,
+      data: {
         icon: e.icon,
         data: e.data
+      }
+    }))
+  })
+
+  let dropDownItems: AutocompleteItem[] = $derived(items.map((e) => ({
+    value: e.value,
+    data: {
+      icon: e.icon,
+      data: e.data
     }
-})));
-function handleChange(event) {
+  })))
+
+  function handleChange(event: Parameters<NonNullable<ComponentProps<typeof Autocomplete<AutocompleteData>>['onchange']>>[0]) {
     values = event.detail.selection.map((e) => ({
-        value: e.value,
-        icon: e.data.icon,
-        data: e.data.data
-    }));
-    if (onchange) {
-        onchange({
-            detail: {
-                unselect: !!event.detail.unselect ? {
-                    value: event.detail.unselect.value,
-                    icon: event.detail.unselect.data.icon,
-                    data: event.detail.unselect.data.data
-                } : undefined,
-                select: !!event.detail.select ? {
-                    value: event.detail.select.value,
-                    icon: event.detail.select.data.icon,
-                    data: event.detail.select.data.data
-                } : undefined,
-                selection: values
-            }
-        });
+      value: e.value,
+      icon: e.data!.icon,
+      data: e.data!.data
+    }))
+
+    if(onchange) {
+      onchange({
+        detail: {
+          unselect: !!event.detail.unselect ? {
+            value: event.detail.unselect.value,
+            icon: event.detail.unselect.data!.icon,
+            data: event.detail.unselect.data!.data
+          } : undefined,
+          select: !!event.detail.select ? {
+            value: event.detail.select.value,
+            icon: event.detail.select.data!.icon,
+            data: event.detail.select.data!.data
+          } : undefined,
+          selection: values
+        }
+      })
     }
-}
+  }
 </script>
 
 <Dropdown

package/dist/components/composed/forms/IconsDropdown.svelte.d.ts

@@ -3,26 +3,33 @@ export type IconItem<Data = any> = {
     icon: string;
     data?: Data;
 };
-declare class __sveltets_Render<Data> {
-    props(): {
-        items?: IconItem<Data>[] | undefined;
-        values?: IconItem<Data>[] | undefined;
+declare function $$render<Data>(): {
+    props: {
+        items?: IconItem<Data>[];
+        values?: IconItem<Data>[];
         clearable?: boolean;
         disabled?: boolean;
         placeholder?: string;
         width?: string;
         minWidth?: string;
         menuWidth?: string;
-        onchange?: ((event: {
+        onchange?: (event: {
             detail: {
                 unselect: IconItem<Data> | undefined;
                 select: IconItem<Data> | undefined;
                 selection: IconItem<Data>[];
             };
-        }) => void) | undefined;
+        }) => void;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "values";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Data> {
+    props(): ReturnType<typeof $$render<Data>>['props'];
+    events(): ReturnType<typeof $$render<Data>>['events'];
+    slots(): ReturnType<typeof $$render<Data>>['slots'];
     bindings(): "values";
     exports(): {};
 }

package/dist/components/composed/forms/LabelAndSelect.svelte

@@ -1,10 +1,51 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+	export type Option = {
+		icon?: string
+		value: string | number | undefined
+		text: string
+	};
 </script>
 
-<script lang="ts">import { Icon, ToolTip } from "../../..";
-import Select from "../../simple/forms/Select.svelte";
-let { value = $bindable(undefined), label, description = undefined, info = undefined, name, options, disabled = false, orientation = 'vertical', class: clazz = {}, onchange, } = $props();
-let infoActivator = $state();
+<script lang="ts">
+	import { Icon, ToolTip } from "../../..";
+	import Select from "../../simple/forms/Select.svelte";
+    import type { ComponentProps } from "svelte";
+  
+	interface Props {
+    value?: string | number;
+    label: string;
+    description?: string;
+    info?: string;
+    name: string;
+    options: Option[];
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+		class?: {
+			label?: string
+			input?: {
+				container?: string
+				row?: string
+				input?: string
+			}
+		}
+		onchange?: ComponentProps<typeof Select>['onchange']
+  }
+
+  let {
+    value = $bindable(undefined),
+    label,
+    description = undefined,
+    info = undefined,
+    name,
+    options,
+    disabled = false,
+    orientation = 'vertical',
+		class: clazz = {},
+		onchange,
+  }: Props = $props();
+
+	let infoActivator: HTMLElement | undefined = $state()
+
 </script>
 
 <div

package/dist/components/composed/forms/LabelAndTextField.svelte

@@ -1,6 +1,59 @@
-<script lang="ts">import { Icon, ToolTip, SimpleTextField } from "../../..";
-let { value = $bindable(undefined), label = undefined, description = undefined, info = undefined, placeholder = '', name, type = 'text', readonly = false, error = false, disabled = false, orientation = 'vertical', class: clazz = {}, onfocus, oninput, onkeydown, appendInnerSnippet, prependInnerSnippet, } = $props();
-let infoActivator = $state();
+<script lang="ts">
+	import { Icon, ToolTip, SimpleTextField } from "../../..";
+    import type { ComponentProps } from "svelte";
+
+	interface Props {
+    value?: string | number;
+    label?: string;
+    description?: string;
+    info?: string;
+    placeholder?: string;
+    name: string;
+    type?: 'password' | 'text' | 'number';
+    readonly?: boolean;
+    error?: boolean;
+    errorText?: string;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+		class?: {
+			label?: string
+			input?: {
+				container?: string,
+				row?: string,
+				field?: string,
+				hint?: string,
+				input?: string
+			}
+		}
+		onkeydown?: ComponentProps<typeof SimpleTextField>['onkeydown']
+		onfocus?: ComponentProps<typeof SimpleTextField>['onfocus']
+		oninput?: ComponentProps<typeof SimpleTextField>['oninput']
+		prependInnerSnippet?: ComponentProps<typeof SimpleTextField>['prependInnerSnippet']
+		appendInnerSnippet?: ComponentProps<typeof SimpleTextField>['appendInnerSnippet']
+  }
+
+  let {
+    value = $bindable(undefined),
+    label = undefined,
+    description = undefined,
+    info = undefined,
+    placeholder = '',
+    name,
+    type = 'text',
+    readonly = false,
+    error = false,
+    disabled = false,
+    orientation = 'vertical',
+		class: clazz = {},
+		onfocus,
+		oninput,
+		onkeydown,
+		appendInnerSnippet,
+		prependInnerSnippet,
+  }: Props = $props();
+
+	let infoActivator: HTMLElement | undefined = $state()
+		
 </script>
 
 <div

package/dist/components/composed/forms/PeriodPicker.svelte

@@ -1,23 +1,43 @@
-<script lang="ts" generics="Data extends string">import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-import MenuOrDrawer from "../common/MenuOrDrawer.svelte";
-import PeriodSelector, { getPeriodLabel } from "./PeriodSelector.svelte"; // Import helper
-import Button from "../../simple/buttons/Button.svelte";
-import { fly } from "svelte/transition";
-import Icon from "../../simple/media/Icon.svelte";
-let { onchange, timespanSettings = $bindable(), valid = $bindable(), isSelectionMode = $bindable(), lang = 'en', quickSelectOptions, ...rest } = $props();
-let open = $state(false), input = $state(), text = $derived(getPeriodLabel(timespanSettings, lang, quickSelectOptions));
-function handleChange(event) {
+<script lang="ts" generics="Data extends string">
+  import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+  import type { ComponentProps } from "svelte";
+  import MenuOrDrawer from "../common/MenuOrDrawer.svelte";
+  import PeriodSelector, { getPeriodLabel } from "./PeriodSelector.svelte"; // Import helper
+  import Button from "../../simple/buttons/Button.svelte";
+  import { fly } from "svelte/transition";
+  import Icon from "../../simple/media/Icon.svelte";
+
+  interface Props extends 
+    Omit<ComponentProps<typeof PeriodSelector<Data>>, 'showTimeRangeLabel'> {
+  }
+
+  let {
+    onchange,
+    timespanSettings = $bindable(),
+    valid = $bindable(),
+    isSelectionMode = $bindable(),
+    lang = 'en',
+    quickSelectOptions,
+    ...rest
+  }: Props = $props()
+
+  let open = $state(false),
+    input: HTMLElement | undefined = $state(),
+    text = $derived(getPeriodLabel(timespanSettings, lang, quickSelectOptions))
+
+  function handleChange(event: Parameters<NonNullable<ComponentProps<typeof PeriodSelector<Data>>['onchange']>>[0]) {
     if (timespanSettings?.method == 'quick') {
-        open = false;
+      open = false
     }
-    onchange?.(event);
-}
-function openMenu() {
-    if (!open)
-        open = true;
-    else if (valid)
-        open = false;
-}
+
+    onchange?.(event)
+  }
+
+  function openMenu() {
+    if (!open) open = true
+    else if (valid) open = false
+  }
+
 </script>
 
 <SimpleTextField

package/dist/components/composed/forms/PeriodPicker.svelte.d.ts

@@ -1,11 +1,36 @@
-import type { ComponentProps } from "svelte";
-import PeriodSelector from "./PeriodSelector.svelte";
-interface Props extends Omit<ComponentProps<typeof PeriodSelector<Data>>, 'showTimeRangeLabel'> {
-}
+declare function $$render<Data extends string>(): {
+    props: Omit<{
+        timespanSettings?: import("./PeriodSelector.svelte").TimespanSettings<Data> | undefined;
+        quickSelectOptions?: {
+            value: Data;
+            label: string;
+        }[] | undefined;
+        valid?: boolean;
+        mode?: "default" | "datepicker";
+        lang?: "it" | "en";
+        locale?: "it" | "en";
+        showTimeRangeLabel?: boolean;
+        isSelectionMode?: boolean;
+        onchange?: ((event: {
+            timespanSettings?: import("./PeriodSelector.svelte").TimespanSettings<Data> | undefined;
+        }) => void) | undefined;
+        quickRangeConvertor?: ((value: string) => {
+            from?: Date;
+            to: Date;
+        } | undefined) | undefined;
+        setTimespanLabel?: ((params: {
+            timespanSettings: import("./PeriodSelector.svelte").TimespanSettings<Data> | undefined;
+        }) => string) | undefined;
+    }, "showTimeRangeLabel">;
+    exports: {};
+    bindings: "timespanSettings" | "valid" | "isSelectionMode";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<Data extends string> {
-    props(): Props;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<Data>>['props'];
+    events(): ReturnType<typeof $$render<Data>>['events'];
+    slots(): ReturnType<typeof $$render<Data>>['slots'];
     bindings(): "timespanSettings" | "valid" | "isSelectionMode";
     exports(): {};
 }