@likable-hair/svelte 2.0.8 → 3.0.0

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

@@ -1,44 +1,49 @@
-<script>import { getMonthName, dateToString } from "./utils";
+<script>import "./DatePicker.css";
+import { getMonthName, dateToString } from "./utils";
 import YearSelector from "./YearSelector.svelte";
 import MonthSelector from "./MonthSelector.svelte";
 import Calendar from "./Calendar.svelte";
 import Button from "../buttons/Button.svelte";
-export let selectedYear = (/* @__PURE__ */ new Date()).getFullYear(), selectedMonth = (/* @__PURE__ */ new Date()).getMonth(), selectedDate = /* @__PURE__ */ new Date(), view = "day", locale = "it", primaryColor = "#008080", headerBackgroundColor = primaryColor, arrowColor = primaryColor, hoverColor = "#00808012", selectedDayColor = "black", headerColor = "white", cardColor = "black", cardBackGroundColor = "rgba(255,255,255,0)", selectableYears = [...Array(150).keys()].map(
+import { createEventDispatcher } from "svelte";
+let clazz = {};
+export { clazz as class };
+export let selectedYear = (/* @__PURE__ */ new Date()).getFullYear(), selectedMonth = (/* @__PURE__ */ new Date()).getMonth(), selectedDate = /* @__PURE__ */ new Date(), visibleMonth = selectedMonth, visibleYear = selectedYear, view = "day", locale = "it", selectableYears = [...Array(150).keys()].map(
   (i) => i + ((/* @__PURE__ */ new Date()).getFullYear() - 75)
-), height = "100%", width = "100%";
+);
+let dispatch = createEventDispatcher();
 let selectorText = void 0;
 let elementDisabled = "date";
 $:
   visibleSelector = view == "day" || view == "month";
 $: {
-  selectorText = view == "day" ? getMonthName(selectedMonth, locale) + " " + selectedYear : selectedYear.toString();
+  selectorText = view == "day" ? getMonthName(visibleMonth, locale) + " " + visibleYear : visibleYear.toString();
 }
 $:
   elementDisabled = view == "year" ? "year" : "date";
 function next() {
   if (view == "day") {
-    if (selectedMonth == 11) {
-      selectedMonth = 0;
-      selectedYear += 1;
+    if (visibleMonth == 11) {
+      visibleMonth = 0;
+      visibleYear += 1;
     } else {
-      selectedMonth += 1;
+      visibleMonth += 1;
     }
   } else {
-    if (selectedYear != selectableYears[selectableYears.length - 1])
-      selectedYear++;
+    if (visibleYear != selectableYears[selectableYears.length - 1])
+      visibleYear++;
   }
 }
 function previous() {
   if (view == "day") {
-    if (selectedMonth == 0) {
-      selectedMonth = 11;
-      selectedYear -= 1;
+    if (visibleMonth == 0) {
+      visibleMonth = 11;
+      visibleYear -= 1;
     } else {
-      selectedMonth -= 1;
+      visibleMonth -= 1;
     }
   } else {
-    if (selectedYear != selectableYears[0])
-      selectedYear--;
+    if (visibleYear != selectableYears[0])
+      visibleYear--;
   }
 }
 function SelectorHandler() {
@@ -48,25 +53,24 @@ function SelectorHandler() {
     view = "month";
 }
 function handleYearChange() {
+  dispatch("year-click", {
+    year: selectedYear
+  });
   view = "month";
 }
 function handleMonthChange() {
+  dispatch("month-click", {
+    month: selectedMonth
+  });
   view = "day";
 }
 </script>
 
 <div
-  class="container"
-  style:background={cardBackGroundColor}
-  style:color={cardColor}
-  style:height
-  style:width
+  class="container {clazz.container || ''}"
 >
   <div
-    class="header"
-    style:height="25%"
-    style:background={headerBackgroundColor}
-    style:color={headerColor}
+    class="header {clazz.header || ''}"
   >
     <span
       class:disabled={elementDisabled == "year"}
@@ -75,7 +79,7 @@ function handleMonthChange() {
       }}
       on:keypress={() => {
         view = "year";
-      }}>{selectedYear}</span
+      }}>{visibleYear}</span
     >
     <h2
       class:disabled={elementDisabled == "date"}
@@ -86,18 +90,19 @@ function handleMonthChange() {
         view = "day";
       }}
     >
-      {dateToString(selectedDate, "dayAndMonth", locale)}
+      {#if !!selectedDate}
+        {dateToString(selectedDate, "dayAndMonth", locale)}
+      {/if}
     </h2>
   </div>
-  <div class="body" style:height="75%">
+  <div class="body">
     {#if visibleSelector}
-      <div class="selector-row" style:height="25%">
+      <div class="selector-row {clazz.selectorRow || ''}" style:height="calc(var(--date-picker-height, var(--date-picker-default-height)) / 8 * 1)">
         <div class="row-elem">
           <Button
-            color={arrowColor}
-            hoverBackgroundColor={hoverColor}
-            type="icon"
-            iconSize={25}
+            --button-background-color="transparent"
+            buttonType="icon"
+            --icon-size="25pt"
             icon="mdi-chevron-left"
             on:click={previous}
           />
@@ -107,7 +112,6 @@ function handleMonthChange() {
             <div
               on:click={SelectorHandler}
               on:keypress={SelectorHandler}
-              style:--primary-color={primaryColor}
             >
               {selectorText}
             </div>
@@ -115,10 +119,9 @@ function handleMonthChange() {
         </div>
         <div class="row-elem">
           <Button
-            color={arrowColor}
-            hoverBackgroundColor={hoverColor}
-            type="icon"
-            iconSize={25}
+            --button-background-color="transparent"
+            buttonType="icon"
+            --icon-size="25pt"
             icon="mdi-chevron-right"
             on:click={next}
           />
@@ -127,32 +130,26 @@ function handleMonthChange() {
     {/if}
     {#if view == "month"}
       <MonthSelector
-        height="75%"
-        {width}
-        bind:selectedMonth
+        --month-selector-height="calc((var(--date-picker-height, var(--date-picker-default-height)) / 8 * 5) - 10px)"
+        --month-selector-width="var(--date-picker-width, var(--date-picker-default-width))"
+        bind:selectedMonth={visibleMonth}
         on:click={handleMonthChange}
         {locale}
-        monthSelectedColor={primaryColor}
-        monthSelectedTextColor={selectedDayColor}
       />
     {:else if view == "year"}
       <YearSelector
-        height="100%"
-        {width}
-        bind:selectedYear
+        --year-selector-height="calc(var(--date-picker-height, var(--date-picker-default-height)) / 8 * 6)"
+        bind:selectedYear={visibleYear}
         {selectableYears}
         on:click={handleYearChange}
       />
     {:else}
       <Calendar
-        height="75%"
-        {width}
-        bind:visibleMonth={selectedMonth}
-        bind:visibleYear={selectedYear}
+        --calendar-height="calc((var(--date-picker-height, var(--date-picker-default-height)) / 8 * 5) - 10px)"
+        --calendar-width="var(--date-picker-width, var(--date-picker-default-width))"
+        bind:visibleMonth={visibleMonth}
+        bind:visibleYear={visibleYear}
         bind:selectedDate
-        dayHoverColor={hoverColor}
-        daySelectedColor={primaryColor}
-        selectedTextColor={selectedDayColor}
         {locale}
         on:day-click
       />
@@ -163,12 +160,35 @@ function handleMonthChange() {
 <style>
   .container {
     border-radius: 5px;
+    height: var(
+      --date-picker-height,
+      var(--date-picker-default-height)
+    );
+    width: var(
+      --date-picker-width,
+      var(--date-picker-default-width)
+    );
+    box-shadow: var(
+      --date-picker-box-shadow,
+      var(--date-picker-default-box-shadow)
+    );
   }
+
   .header {
     border-radius: 5px 5px 0 0;
+    background-color: var(
+      --date-picker-header-background-color,
+      var(--date-picker-default-header-background-color)
+    );
+    height: calc(var(--date-picker-height, var(--date-picker-default-height)) / 4);
+    color: var(
+      --date-picker-header-color,
+      var(--date-picker-default-header-color)
+    );
   }
   .header > h2 {
-    margin-left: 30px;
+    margin-left: 15px;
+    margin-top: 5px;
     transition: 0.1s;
     opacity: 0.8;
   }
@@ -205,7 +225,6 @@ function handleMonthChange() {
   }
   .selector > div:hover {
     cursor: pointer;
-    color: var(--primary-color);
   }
   .disabled {
     pointer-events: none;

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

@@ -1,23 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
+import './DatePicker.css';
 import type { Locale } from "./utils";
 declare const __propDef: {
     props: {
+        class?: {
+            container?: string | undefined;
+            header?: string | undefined;
+            selectorRow?: string | undefined;
+        } | undefined;
         selectedYear?: number | undefined;
         selectedMonth?: number | undefined;
-        selectedDate?: Date | undefined;
+        selectedDate?: Date | null | undefined;
+        visibleMonth?: number | undefined;
+        visibleYear?: number | undefined;
         view?: "day" | "year" | "month" | undefined;
         locale?: Locale | undefined;
-        primaryColor?: string | undefined;
-        headerBackgroundColor?: string | undefined;
-        arrowColor?: string | undefined;
-        hoverColor?: string | undefined;
-        selectedDayColor?: string | undefined;
-        headerColor?: string | undefined;
-        cardColor?: string | undefined;
-        cardBackGroundColor?: string | undefined;
         selectableYears?: number[] | undefined;
-        height?: string | undefined;
-        width?: string | undefined;
     };
     events: {
         'day-click': CustomEvent<{
@@ -25,6 +23,12 @@ declare const __propDef: {
             selected: boolean;
             extraMonth: boolean;
         }>;
+        'year-click': CustomEvent<{
+            year: number;
+        }>;
+        'month-click': CustomEvent<{
+            month: number;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -0,0 +1,148 @@
+<script>import IMask, { InputMask } from "imask";
+import SimpleTextField from "../forms/SimpleTextField.svelte";
+import DatePicker from "./DatePicker.svelte";
+import Menu from "../common/Menu.svelte";
+import Icon from "../media/Icon.svelte";
+import { onMount } from "svelte";
+import { DateTime } from "luxon";
+import { createEventDispatcher } from "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;
+let activator, refreshPosition = false, menuElement, inputElement, mask = {
+  value: void 0
+}, maskFactoryArgs = {
+  mask: Date,
+  pattern,
+  format: function(date) {
+    return DateTime.fromJSDate(date).toFormat(pattern);
+  },
+  parse: function(str) {
+    return DateTime.fromFormat(str, pattern).toJSDate();
+  },
+  blocks: {
+    yyyy: {
+      mask: IMask.MaskedRange,
+      from: 1970,
+      to: 2030
+    },
+    MM: {
+      mask: IMask.MaskedRange,
+      from: 1,
+      to: 12
+    },
+    dd: {
+      mask: IMask.MaskedRange,
+      from: 1,
+      to: 31
+    },
+    HH: {
+      mask: IMask.MaskedRange,
+      from: 0,
+      to: 23
+    },
+    mm: {
+      mask: IMask.MaskedRange,
+      from: 0,
+      to: 59
+    }
+  }
+};
+function handleTextFieldFocus() {
+  menuOpened = true;
+}
+onMount(() => {
+  mask = IMask(
+    inputElement,
+    maskFactoryArgs
+  );
+});
+function handleInputChange() {
+  setTimeout(() => {
+    const typedValue = mask.value;
+    if (!!typedValue) {
+      const dayOfMonthIndex = pattern.indexOf("dd");
+      const dayOfMonth = typedValue.substring(dayOfMonthIndex, dayOfMonthIndex + 2);
+      const monthIndex = pattern.indexOf("MM");
+      const oneBasedMonth = typedValue.substring(monthIndex, monthIndex + 2);
+      if (oneBasedMonth.length == 2) {
+        selectedMonth = Number(oneBasedMonth) - 1;
+        visibleMonth = selectedMonth;
+      }
+      const yearIndex = pattern.indexOf("yyyy");
+      const year = typedValue.substring(yearIndex, yearIndex + 4);
+      if (year.length == 4) {
+        selectedYear = Number(year);
+        visibleYear = selectedYear;
+      }
+      if (typedValue.length == pattern.length) {
+        selectedDate = DateTime.fromObject({
+          day: Number(dayOfMonth),
+          month: Number(oneBasedMonth),
+          year: Number(year)
+        }).toJSDate();
+      }
+    }
+  }, 30);
+}
+function handleDateSelect(ev) {
+  if (!!selectedDate) {
+    mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
+  }
+  dispatch("day-click", {
+    dateStat: ev.detail.dateStat
+  });
+}
+function handleYearSelect() {
+  mask.value = "";
+}
+function handleMonthSelect() {
+  mask.value = "";
+}
+</script>
+
+<div 
+  bind:this={activator}
+>
+  <SimpleTextField
+    bind:value={mask.value}
+    on:focus={handleTextFieldFocus}
+    on:keypress={handleInputChange}
+    bind:input={inputElement}
+  >
+    <svelte:fragment slot="prepend-inner">
+      <Icon 
+        name="mdi-calendar"
+        click
+        on:click={() => menuOpened = !menuOpened}
+      ></Icon>
+    </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}
+>
+  <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>

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { DateStat } from './utils';
+declare const __propDef: {
+    props: {
+        menuOpened?: boolean | undefined;
+        openingId?: string | undefined;
+        pattern?: string | undefined;
+        selectedMonth?: number | undefined;
+        selectedYear?: number | undefined;
+        visibleMonth?: number | undefined;
+        visibleYear?: number | undefined;
+        selectedDate?: Date | undefined;
+    };
+    events: {
+        'day-click': CustomEvent<{
+            dateStat: DateStat;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DatePickerTextFieldProps = typeof __propDef.props;
+export type DatePickerTextFieldEvents = typeof __propDef.events;
+export type DatePickerTextFieldSlots = typeof __propDef.slots;
+export default class DatePickerTextField extends SvelteComponentTyped<DatePickerTextFieldProps, DatePickerTextFieldEvents, DatePickerTextFieldSlots> {
+}
+export {};

package/dist/components/simple/dates/MonthSelector.css

@@ -0,0 +1,4 @@
+:root {
+  --month-selector-default-height: 100%;
+  --month-selector-default-width: 100%;
+}

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

@@ -1,5 +1,8 @@
-<script>import { getMonthName } from "./utils";
-export let selectedMonth = void 0, locale = "it", height = "100%", width = "100%", monthSelectedColor = "#adadad", monthSelectedTextColor = "#21a";
+<script>import "./MonthSelector.css";
+import { getMonthName } from "./utils";
+let clazz = {};
+export { clazz as class };
+export let selectedMonth = void 0, locale = "it";
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
 function handleMonthClick(monthIndex) {
@@ -11,7 +14,7 @@ function handleMonthClick(monthIndex) {
 import Button from "../buttons/Button.svelte";
 </script>
 
-<div style:height style:width class="selector-container">
+<div class="selector-container {clazz.container || ''}">
   {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as monthIndex}
     <slot
       name="selector"
@@ -19,12 +22,12 @@ import Button from "../buttons/Button.svelte";
       monthName={getMonthName(monthIndex, locale)}
     >
       <Button
-        active={monthIndex == selectedMonth}
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-        activeBackgroundColor={monthSelectedColor}
-        color={monthIndex == selectedMonth ? monthSelectedTextColor : null}
+        --button-background-color={monthIndex == selectedMonth ? "rgb(var(--global-color-primary-500))" : "trasparent"}
+        --button-hover-background-color={monthIndex == selectedMonth ? "var(--button-background-color)" : "rgb(var(--global-color-primary-500), .2)"}
+        --button-color={monthIndex == selectedMonth ?  "rgb(var(--global-color-grey-50))" : undefined}
+        --button-font-weight="500"
+        class={clazz.buttons}
+        buttonType="text"
         on:click={() => handleMonthClick(monthIndex)}
       >
         <slot
@@ -44,5 +47,13 @@ import Button from "../buttons/Button.svelte";
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 5px;
+    height: var(
+      --month-selector-height,
+      var(--month-selector-default-height)
+    );
+    width: var(
+      --month-selector-width,
+      var(--month-selector-default-width)
+    );
   }
 </style>

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

@@ -1,13 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+import './MonthSelector.css';
 import type { Locale } from "./utils";
 declare const __propDef: {
     props: {
+        class?: {
+            buttons?: string | undefined;
+            container?: string | undefined;
+        } | undefined;
         selectedMonth?: number | undefined;
         locale?: Locale | undefined;
-        height?: string | undefined;
-        width?: string | undefined;
-        monthSelectedColor?: string | undefined;
-        monthSelectedTextColor?: string | undefined;
     };
     events: {
         click: CustomEvent<{

package/dist/components/simple/dates/YearSelector.css

@@ -0,0 +1,4 @@
+:root {
+  --year-selector-default-height: 100%;
+  --year-selector-default-width: 100%;
+}

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

@@ -1,8 +1,11 @@
-<script>import { scrollAtCenter } from "../common/scroller";
+<script>import "./YearSelector.css";
+import { scrollAtCenter } from "../common/scroller";
 import { createEventDispatcher, onMount } from "svelte";
+let clazz = void 0;
+export { clazz as class };
 export let selectedYear = void 0, selectableYears = [...Array(150).keys()].map(
   (i) => i + ((/* @__PURE__ */ new Date()).getFullYear() - 75)
-), height = "100%", width = "100%";
+);
 let container, targetButtons = {};
 onMount(() => {
   if (selectedYear)
@@ -19,16 +22,18 @@ function handleYearClick(year) {
 import Button from "../buttons/Button.svelte";
 </script>
 
-<div bind:this={container} style:height style:width class="selector-container">
+<div bind:this={container} class="selector-container {clazz || ''}">
   {#each selectableYears as year}
-    <slot name="selector" {year}>
-      <div bind:this={targetButtons[year]}>
+    <slot name="selector" {year} {handleYearClick}>
+      <div bind:this={targetButtons[year]} style:width="100%">
         <Button
-          height="30px"
-          active={year == selectedYear}
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
+          --button-background-color={year == selectedYear ? "rgb(var(--global-color-primary-500))" : "trasparent"}
+          --button-hover-background-color={year == selectedYear ? "var(--button-background-color)" : "rgb(var(--global-color-primary-500), .2)"}
+          --button-color={year == selectedYear ?  "rgb(var(--global-color-grey-50))" : undefined}
+          --button-font-weight="500"
+          --button-width="var(--year-selector-width, var(--year-selector-default-width))"
+          --button-padding=".5rem 0px"
+          buttonType="text"
           on:click={() => handleYearClick(year)}
         >
           <slot name="label" {year}>
@@ -49,5 +54,13 @@ import Button from "../buttons/Button.svelte";
 <style>
   .selector-container {
     overflow-y: auto;
+    height: var(
+      --year-selector-height,
+      var(--year-selector-default-height)
+    );
+    width: var(
+      --year-selector-width,
+      var(--year-selector-default-width)
+    );
   }
 </style>

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

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import './YearSelector.css';
 declare const __propDef: {
     props: {
+        class?: string | undefined;
         selectedYear?: number | undefined;
         selectableYears?: number[] | undefined;
-        height?: string | undefined;
-        width?: string | undefined;
     };
     events: {
         click: CustomEvent<{
@@ -16,6 +16,7 @@ declare const __propDef: {
     slots: {
         selector: {
             year: number;
+            handleYearClick: (year: number) => void;
         };
         label: {
             year: number;

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

@@ -0,0 +1,12 @@
+:root {
+  --autocomplete-default-selected-item-background-color: rgb(var(--global-color-primary-500));
+  --autocomplete-default-selected-item-color: rgb(var(--global-color-grey-50));
+  --autocomplete-default-focused-item-background-color: rgb(var(--global-color-primary-500), .2);
+  --autocomplete-default-focused-item-color: rgb(var(--global-color-contrast-900));
+  --autocomplete-default-hover-item-background-color: rgb(var(--global-color-primary-500), .1);
+  --autocomplete-default-hover-item-color: rgb(var(--global-color-contrast-900));
+  --autocomplete-default-background-color: rgb(var(--global-color-background-300), .5);
+  --autocomplete-default-min-height: 2rem;
+  --autocomplete-default-padding: 0.5rem .5rem .5rem .5rem;
+  --autocomplete-default-border-radius: 1.5rem;
+}