@likable-hair/svelte 4.2.0 → 4.2.1

package/dist/components/composed/common/MenuOrDrawer.svelte

@@ -3,7 +3,7 @@ import Drawer from '../../simple/navigation/Drawer.svelte';
 import Menu from '../../simple/common/Menu.svelte';
 import MediaQuery from '../../simple/common/MediaQuery.svelte';
 import lodash from 'lodash';
-let { open = $bindable(false), drawerProps, menuProps, children, } = $props();
+let { open = $bindable(), drawerProps, menuProps, children, } = $props();
 const menuPropsDefaultValue = {
     closeOnClickOutside: true,
     _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",

package/dist/components/composed/common/MenuOrDrawerOptions.svelte

@@ -5,7 +5,7 @@
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
 import lodash from 'lodash';
-let { open = $bindable(false), elements = [], onselect, menuProps, drawerProps, } = $props();
+let { open = $bindable(), elements = [], onselect, menuProps, drawerProps, } = $props();
 const menuPropsDefaultValue = {
     anchor: 'bottom-center',
     stayInViewport: true,

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

@@ -48,6 +48,7 @@ declare class __sveltets_Render<Data> {
         menuAnchor?: ComponentProps<typeof Menu>["anchor"];
         menuStayInViewport?: ComponentProps<typeof Menu>["stayInViewport"];
         menuFlipOnOverflow?: ComponentProps<typeof Menu>["flipOnOverflow"];
+        menuMaxHeight?: string;
         adaptInputWidth?: boolean;
         class?: {
             activator?: string;

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

@@ -49,6 +49,10 @@ let activator = $state(), refreshPosition = $state(false), menuElement = $state(
         }
     }
 };
+let selectableYears = $derived.by(() => {
+    const range = maxYearInRange - minYearInRange + 1;
+    return Array.from({ length: range }, (_, i) => minYearInRange + i);
+});
 function handleTextFieldFocus(mobile) {
     if (!mobile || !mobileDialog) {
         menuOpened = true;
@@ -128,10 +132,11 @@ function handleInputChange(e) {
                         selectedDateTo = undefined;
                 }
             }
-            if (oninput) {
+            if (oninput && (id == 'to' || id == 'from')) {
                 oninput({
                     detail: {
-                        datetime: id == "to" ? selectedDateTo : selectedDate
+                        datetime: id == "to" ? selectedDateTo : selectedDate,
+                        type: id,
                     }
                 });
             }
@@ -210,6 +215,7 @@ $effect(() => {
           {appendInnerSnippet}
           {prependSnippet}
           {appendSnippet}
+          autocomplete='off'
           --simple-textfield-default-padding='0.65rem 0.8rem'
           --simple-textfield-default-inner-gap='4px'
         >
@@ -248,6 +254,7 @@ $effect(() => {
             onyearClick={handleYearSelect}
             onmonthClick={handleMonthSelect}
             skipTabs
+            {selectableYears}
             {disabled}
             {type}
           ></DatePicker>
@@ -281,6 +288,7 @@ $effect(() => {
             onyearClick={handleYearSelect}
             onmonthClick={handleMonthSelect}
             skipTabs
+            {selectableYears}
             {disabled}
             {type}
           ></DatePicker>

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

@@ -33,6 +33,7 @@ declare const DatePickerTextField: import("svelte").Component<{
     oninput?: (event: {
         detail: {
             datetime: Date | undefined;
+            type: "from" | "to";
         };
     }) => void;
     activatorSnippet?: Snippet<[{

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

@@ -2,7 +2,7 @@
 import Autocomplete, {} from "../../../components/simple/forms/Autocomplete.svelte";
 import Button from '../../simple/buttons/Button.svelte';
 import Icon from '../../simple/media/Icon.svelte';
-let { items = [], values = $bindable([]), multiple = false, lang = 'en', searchText = $bindable(), maxVisibleChips, placeholder = lang === 'en' ? "Select" : "Seleziona", clearable = true, mandatory = true, icon, menuOpened = $bindable(false), openingId = $bindable("autocomplete-menu"), width, height, minWidth, menuWidth = width, mobileDrawer = false, disabled = false, onchange, itemLabelSnippet, labelSnippet, } = $props();
+let { items = [], values = $bindable([]), multiple = false, lang = 'en', searchText = $bindable(), maxVisibleChips, placeholder = lang === 'en' ? "Select" : "Seleziona", clearable = true, mandatory = true, icon, menuOpened = $bindable(false), openingId = $bindable("autocomplete-menu"), width, height, minWidth = 'none', menuWidth = width, mobileDrawer = false, disabled = false, onchange, itemLabelSnippet, labelSnippet, } = $props();
 let generatedLabel = $derived(values.length == 1 ? values[0].label : `${values.length} Selezionati`);
 function handleCloseClick(event) {
     if (event) {
@@ -44,11 +44,6 @@ function handleCloseClick(event) {
 >
   {#snippet selectionContainerSnippet({ openMenu, handleKeyDown })}
     <Button
-      --button-default-background-color="transparent"
-      --button-default-focus-background-color="rgb(var(--global-color-primary-400), .3)"
-      --button-default-focus-color="rgb(var(--global-color-contrast-900))"
-      --button-default-border="2px solid rgb(var(--global-color-primary-400))"
-      --button-default-color="rgb(var(--global-color-contrast-800))"
       onclick={openMenu}
       onkeydown={(event) => {
         handleKeyDown(event.detail.nativeEvent)
@@ -57,6 +52,20 @@ function handleCloseClick(event) {
           event.detail.nativeEvent.preventDefault()
         }
       }}
+      --button-padding="var(--dropdown-button-padding, 10px 12px)"
+      --button-border='var(--dropdown-button-border, none)'
+      --button-background-color='var(--dropdown-button-background-color, rgb(var(--global-color-background-300), .6))'
+      --button-hover-background-color='var(--dropdown-button-hover-color, rgb(var(--global-color-background-300), .6))'
+      --button-focus-background-color='var(--dropdown-button-focus-color, rgb(var(--global-color-background-300), .6))'
+      --button-active-background-color='var(--dropdown-button-active-color, rgb(var(--global-color-background-300), .6))'
+      --button-hover-color='var(--dropdown-button-hover-color, rgb(var(--global-color-contrast-800)))'
+      --button-color='var(--dropdown-button-color, rgb(var(--global-color-contrast-800)))'
+      --button-focus-color='var(--dropdown-button-focus-color, rgb(var(--global-color-contrast-800)))'
+      --button-border-radius='var(--dropdown-button-border-radius, 4px)'
+      --button-height='var(--dropdown-button-height, 38.78px)'
+      --button-active-box-shadow='var(--dropdown-button-active-box-shadow)'
+      --button-focus-box-shadow='var(--dropdown-button-focus-box-shadow)'
+      --button-box-sizing='var(--dropdown-button-box-sizing, border-box)'
     >
       {#if labelSnippet}
         {@render labelSnippet({ 

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

@@ -0,0 +1,111 @@
+<script lang="ts" generics="Data extends string">import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+import MenuOrDrawer from "../common/MenuOrDrawer.svelte";
+import PeriodSelector from "./PeriodSelector.svelte";
+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', timeRangeLabel = lang == 'en' ? 'Select range mode' : 'Seleziona una modalità', ...rest } = $props();
+let open = $state(false), input = $state(), text = $derived(timeRangeLabel);
+function handleChange(event) {
+    if (timespanSettings?.method == 'quick') {
+        open = false;
+    }
+    onchange?.(event);
+}
+</script>
+
+<SimpleTextField
+  onfocus={() => open = true}
+  oninput={() => text = timeRangeLabel}
+  bind:value={text}
+  bind:input
+>
+  {#snippet appendInnerSnippet()}
+    <Icon
+      name='mdi-chevron-down'
+      onclick={() => {
+        if (!open) open = true
+        else if (valid) open = false
+      }}
+    ></Icon>
+  {/snippet}
+</SimpleTextField>
+<MenuOrDrawer
+  bind:open
+  menuProps={{
+    activator: input,
+    _activatorGap: 16,
+    closeOnClickOutside: valid,
+    _offsetLeft: -16,
+    anchor: 'bottom',
+    flipOnOverflow: true,
+    stayInViewport: true,
+    openingId: 'period-picker',
+    _overflow: 'hidden',
+  }}
+  drawerProps={{
+    closeOnClickOutside: valid,
+    _space: 'min(50%,420px)',
+    _borderRadius: '4px',
+    _overflow: 'hidden',
+  }}
+>
+  {#snippet children({ isDrawer, isMenu })}
+    <div
+      class:menu={isMenu}
+      class:drawer={isDrawer}
+    >
+      <PeriodSelector
+        onchange={handleChange}
+        bind:timespanSettings
+        bind:valid
+        bind:timeRangeLabel
+        bind:isSelectionMode
+        {lang}
+        {...rest}
+      ></PeriodSelector>
+      {#if !isSelectionMode}
+        <div
+          class:button-end={isMenu}
+          class:button-full={isDrawer}
+          in:fly={{ x: 200, duration: 250, delay: 200 }} 
+          out:fly={{ x: 200, duration: 250 }}
+        >
+          <Button
+            disabled={!valid}
+            onclick={() => open = false}
+          >
+            {lang == 'en' ? 'Apply' : 'Applica'}
+          </Button>
+        </div>
+      {/if}
+    </div>
+  {/snippet}
+</MenuOrDrawer>
+
+<style>
+  .menu {
+    padding: 8px;
+    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    background-color: rgb(var(--global-color-background-200));
+    width: 400px;
+    --period-selector-min-height: 290px;
+  }
+
+  .drawer {
+    padding: 12px;
+    --period-selector-max-width: none;
+    --period-selector-list-element-padding: 8px;
+  }
+
+  .button-end {
+    display: flex;
+    justify-content: end;
+  }
+
+  .button-full {
+    display: flex;
+    --button-width: 100%
+  }
+</style>

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

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "svelte";
+import PeriodSelector from "./PeriodSelector.svelte";
+interface Props extends Omit<ComponentProps<typeof PeriodSelector<Data>>, 'showTimeRangeLabel'> {
+}
+declare class __sveltets_Render<Data extends string> {
+    props(): Props;
+    events(): {};
+    slots(): {};
+    bindings(): "timespanSettings" | "valid" | "isSelectionMode";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Data extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Data>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Data>['props']>, ReturnType<__sveltets_Render<Data>['events']>, ReturnType<__sveltets_Render<Data>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Data>['bindings']>;
+    } & ReturnType<__sveltets_Render<Data>['exports']>;
+    <Data extends string>(internal: unknown, props: ReturnType<__sveltets_Render<Data>['props']> & {}): ReturnType<__sveltets_Render<Data>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PeriodPicker: $$IsomorphicComponent;
+type PeriodPicker<Data extends string> = InstanceType<typeof PeriodPicker<Data>>;
+export default PeriodPicker;