@likable-hair/svelte 3.0.14 → 3.0.17

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

@@ -0,0 +1,32 @@
+<script>import "../../../css/main.css";
+import Drawer from "../../simple/navigation/Drawer.svelte";
+import Menu from "../../simple/common/Menu.svelte";
+import MediaQuery from "../../simple/common/MediaQuery.svelte";
+export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _bordeRadius = "5px";
+</script>
+
+<MediaQuery let:mAndDown>
+  {#if mAndDown}
+    <Drawer
+      bind:open={open}
+      bind:position={drawerPosition}
+      on:item-click
+    >
+      <slot isDrawer={true} isMenu={false}></slot>
+    </Drawer>
+  {:else}
+    <Menu
+      bind:activator={activator}
+      bind:open={open}
+      closeOnClickOutside
+      _boxShadow={_boxShadow}
+      _height={_height}
+      _maxHeight={_maxHeight}
+      _minWidth={_minWidth}
+      _borderRadius={_bordeRadius}
+      anchor={menuAnchor}
+    >
+      <slot isDrawer={false} isMenu={true}></slot>
+    </Menu>
+  {/if}
+</MediaQuery>

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

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
+import Drawer from '../../simple/navigation/Drawer.svelte';
+import Menu from '../../simple/common/Menu.svelte';
+import type { ComponentProps } from 'svelte';
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        activator: HTMLElement;
+        drawerPosition?: ComponentProps<Drawer>['position'];
+        menuAnchor?: ComponentProps<Menu>['anchor'];
+        _boxShadow?: string | undefined;
+        _height?: string | undefined;
+        _maxHeight?: string | undefined;
+        _minWidth?: string | undefined;
+        _bordeRadius?: string | undefined;
+    };
+    events: {
+        'item-click': CustomEvent<{
+            item: import("../../simple/navigation/Navigator.svelte").Item;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            isDrawer: boolean;
+            isMenu: boolean;
+        };
+    };
+};
+export type MenuOrDrawerProps = typeof __propDef.props;
+export type MenuOrDrawerEvents = typeof __propDef.events;
+export type MenuOrDrawerSlots = typeof __propDef.slots;
+export default class MenuOrDrawer extends SvelteComponentTyped<MenuOrDrawerProps, MenuOrDrawerEvents, MenuOrDrawerSlots> {
+}
+export {};

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

@@ -0,0 +1,48 @@
+<script context="module"></script>
+
+<script>import "../../../css/main.css";
+import MenuOrDrawer from "./MenuOrDrawer.svelte";
+import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
+export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", elements = [], _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _bordeRadius = "5px";
+let selected;
+let focused;
+$:
+  if (!!selected)
+    selected = void 0;
+$:
+  if (!!focused && !open)
+    focused = void 0;
+</script>
+
+<MenuOrDrawer
+  bind:open
+  bind:activator
+  bind:drawerPosition
+  bind:menuAnchor
+  {_boxShadow}
+  {_height}
+  {_maxHeight}
+  {_minWidth}
+  {_bordeRadius}
+  let:isDrawer
+  --drawer-default-space={`${Math.min(elements?.length || 0, 5) * 56}px`}
+>
+  <div class="selectable-list-wrapper">
+    <SelectableVerticalList
+      bind:selected
+      bind:focused
+      bind:elements
+      --selectable-vertical-list-default-width={isDrawer ? '100%' : 'auto'}
+      --selectable-vertical-list-default-element-height={isDrawer ? '56px' : 'auto'}
+      --selectable-vertical-list-default-title-font-size="null"
+      on:select={() => open = false}
+      on:select
+    ></SelectableVerticalList>
+  </div>
+</MenuOrDrawer>
+
+<style>
+  .selectable-list-wrapper {
+    background-color: rgb(var(--global-color-background-100));
+  }
+</style>

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

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+import '../../../css/main.css';
+import type { ComponentProps } from 'svelte';
+import type Drawer from '../../simple/navigation/Drawer.svelte';
+import type Menu from '../../simple/common/Menu.svelte';
+import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        activator: HTMLElement;
+        drawerPosition?: ComponentProps<Drawer>['position'];
+        menuAnchor?: ComponentProps<Menu>['anchor'];
+        elements?: ComponentProps<SelectableVerticalList>['elements'];
+        _boxShadow?: string | undefined;
+        _height?: string | undefined;
+        _maxHeight?: string | undefined;
+        _minWidth?: string | undefined;
+        _bordeRadius?: string | undefined;
+    };
+    events: {
+        select: CustomEvent<{
+            element: import("../../simple/lists/SelectableVerticalList.svelte").Element;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuOrDrawerOptionsProps = typeof __propDef.props;
+export type MenuOrDrawerOptionsEvents = typeof __propDef.events;
+export type MenuOrDrawerOptionsSlots = typeof __propDef.slots;
+export default class MenuOrDrawerOptions extends SvelteComponentTyped<MenuOrDrawerOptionsProps, MenuOrDrawerOptionsEvents, MenuOrDrawerOptionsSlots> {
+}
+export {};

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

@@ -0,0 +1,40 @@
+<script context="module"></script>
+
+<script>import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
+import debounceStore from "../../../stores/debounce";
+import { writable } from "svelte/store";
+export let items = [], values = [], multiple = false, searcher, searchThreshold = 2, debounceTimeout = 500, searching = false, search = false, searchText = void 0, maxVisibleChips = void 0;
+const searchTextValue = writable(searchText);
+$:
+  searchTextDebounce = debounceStore(searchTextValue, debounceTimeout);
+$:
+  if (!!$searchTextDebounce && searchThreshold <= $searchTextDebounce.length) {
+    searching = true;
+    searcher({ searchText: $searchTextDebounce }).then((it) => {
+      items = it;
+    }).finally(() => {
+      searching = false;
+    });
+  }
+$:
+  if (search) {
+    search = false;
+    searching = true;
+    searcher({ searchText: $searchTextDebounce }).then((it) => {
+      items = it;
+    }).finally(() => {
+      searching = false;
+    });
+  }
+$:
+  $searchTextValue = searchText;
+</script>
+
+<Autocomplete
+  bind:items
+  bind:values
+  bind:searchText
+  bind:multiple
+  bind:maxVisibleChips
+  searchFunction={() => true}
+></Autocomplete>

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Item } from "../../../components/simple/forms/Autocomplete.svelte";
+export type { Item };
+declare const __propDef: {
+    props: {
+        items?: Item[] | undefined;
+        values?: Item[] | undefined;
+        multiple?: boolean | undefined;
+        searcher: (params: {
+            searchText: string;
+        }) => Promise<Item[]>;
+        searchThreshold?: number | undefined;
+        debounceTimeout?: number | undefined;
+        searching?: boolean | undefined;
+        search?: boolean | undefined;
+        searchText?: string | undefined;
+        maxVisibleChips?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AsyncAutocompleteProps = typeof __propDef.props;
+export type AsyncAutocompleteEvents = typeof __propDef.events;
+export type AsyncAutocompleteSlots = typeof __propDef.slots;
+export default class AsyncAutocomplete extends SvelteComponentTyped<AsyncAutocompleteProps, AsyncAutocompleteEvents, AsyncAutocompleteSlots> {
+}

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

@@ -0,0 +1,84 @@
+<script>import "../../../css/main.css";
+import { createEventDispatcher } from "svelte";
+export let loading = false, marginTop = "20px", cancelText = "Annulla", confirmText = "Salva", confirmDisable = false, cancelDisable = false;
+let dispatch = createEventDispatcher();
+function handleConfirm(event) {
+  if (!confirmDisable) {
+    dispatch("confirm-click", {
+      nativeEvent: event.detail.nativeEvent
+    });
+  }
+}
+function handleCancel(nativeEvent) {
+  if (!cancelDisable) {
+    dispatch("cancel-click", {
+      nativeEvent
+    });
+  }
+}
+import Button from "../../simple/buttons/Button.svelte";
+</script>
+
+<div
+  style:margin-top={marginTop}
+  class="button-container"
+>
+  <div
+    class="link-button-container"
+  >
+    <div></div>
+    <slot name="cancel-button" {loading} {handleCancel} {cancelText}>
+      <button
+        class="text-button"
+        on:click={handleCancel}
+      >{cancelText}</button>
+    </slot>
+  </div>
+  <slot name="confirm-button" {loading} {handleConfirm} {confirmDisable} {confirmText}>
+    <Button
+      loading={loading}
+      on:click={handleConfirm}
+      disabled={confirmDisable}
+    >{confirmText}</Button>
+  </slot>
+</div>
+
+
+<style>
+  @media (max-width: 768px){
+  	.button-container {
+      flex-direction: column-reverse;
+    }
+  }
+
+  @media (min-width: 769px){
+    .button-container {
+      justify-content: end;
+      align-items: center;
+      gap: 15px;
+    }
+  }
+
+  .text-button {
+    font-family: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    background-image: none;
+  }
+
+  .button-container {
+    display: flex;
+  }
+
+  .link-button-container {
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

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

@@ -0,0 +1,41 @@
+import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
+declare const __propDef: {
+    props: {
+        loading?: boolean | undefined;
+        marginTop?: string | undefined;
+        cancelText?: string | undefined;
+        confirmText?: string | undefined;
+        confirmDisable?: boolean | undefined;
+        cancelDisable?: boolean | undefined;
+    };
+    events: {
+        "confirm-click": CustomEvent<{
+            nativeEvent: MouseEvent;
+        }>;
+        "cancel-click": CustomEvent<{
+            nativeEvent: MouseEvent | KeyboardEvent;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'cancel-button': {
+            loading: boolean;
+            handleCancel: (nativeEvent: MouseEvent | KeyboardEvent) => void;
+            cancelText: string;
+        };
+        'confirm-button': {
+            loading: boolean;
+            handleConfirm: (event: any) => void;
+            confirmDisable: boolean;
+            confirmText: string;
+        };
+    };
+};
+export type ConfirmOrCancelButtonsProps = typeof __propDef.props;
+export type ConfirmOrCancelButtonsEvents = typeof __propDef.events;
+export type ConfirmOrCancelButtonsSlots = typeof __propDef.slots;
+export default class ConfirmOrCancelButtons extends SvelteComponentTyped<ConfirmOrCancelButtonsProps, ConfirmOrCancelButtonsEvents, ConfirmOrCancelButtonsSlots> {
+}
+export {};

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

@@ -0,0 +1,79 @@
+<script context="module"></script>
+
+<script>import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
+import Button from "../../simple/buttons/Button.svelte";
+import Icon from "../../simple/media/Icon.svelte";
+export let items = [], values = [], multiple = false, searchText = void 0, maxVisibleChips = void 0, placeholder = "Seleziona", icon = void 0;
+$:
+  generatedLabel = values.length == 1 ? values[0].label : `${values.length} Selezionati`;
+function handleCloseClick(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  values = [];
+}
+</script>
+
+<Autocomplete
+  bind:items
+  bind:values
+  bind:searchText
+  bind:multiple
+  bind:maxVisibleChips
+  searchFunction={() => true}
+>
+  <svelte:fragment slot="selection-container" let:openMenu let:handleKeyDown>
+    <Button 
+      --button-default-background-color="transparent"
+      --button-default-border="2px solid rgb(var(--global-color-primary-400))"
+      --button-default-color="rgb(var(--global-color-contrast-800))"
+      on:click={openMenu}
+      on:keydown={(event) => {
+        handleKeyDown(event.detail.nativeEvent)
+        if(event.detail.nativeEvent.key == 'ArrowDown' || event.detail.nativeEvent.key == 'ArrowUp') {
+          event.detail.nativeEvent.stopPropagation()
+          event.detail.nativeEvent.preventDefault()
+        }
+      }}
+    >
+      <slot name="label" {values} {items} {searchText}>
+        <div class="label">
+          {#if !!icon}
+            <Icon name={icon}></Icon>
+          {/if}
+          {#if values.length == 0}
+            <div class="space-between">
+              <div>{placeholder}</div>
+              <Icon name="mdi-chevron-down"></Icon>
+            </div>
+          {:else}
+            <div class="space-between">
+              <div>{generatedLabel}</div>
+              <Icon 
+                name="mdi-close"
+                click
+                on:click={handleCloseClick}
+              ></Icon>
+            </div>
+          {/if}
+        </div>
+      </slot>
+    </Button>
+  </svelte:fragment>
+</Autocomplete>
+
+<style>
+  .label {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+    width: 130px;
+  }
+
+  .space-between {
+    flex-grow: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

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

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Item } from "../../../components/simple/forms/Autocomplete.svelte";
+export type { Item };
+declare const __propDef: {
+    props: {
+        items?: Item[] | undefined;
+        values?: Item[] | undefined;
+        multiple?: boolean | undefined;
+        searchText?: string | undefined;
+        maxVisibleChips?: number | undefined;
+        placeholder?: string | undefined;
+        icon?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {
+            values: Item[];
+            items: Item[];
+            searchText: string | undefined;
+        };
+    };
+};
+export type DropdownProps = typeof __propDef.props;
+export type DropdownEvents = typeof __propDef.events;
+export type DropdownSlots = typeof __propDef.slots;
+export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
+}

package/dist/components/composed/list/PaginatedTable.svelte

@@ -0,0 +1,152 @@
+<!-- <script lang="ts" context="module">
+  export type Header = {
+    value: string;
+    label: string;
+    type: "boolean" | "string" | "number" | "date" | "custom";
+    width?: string;
+    minWidth?: string;
+    data?: { [key: string]: any };
+  };
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+	import type { Filter } from '../../../types/filter';
+	import StandardPaginator from './StandardPaginator.svelte';
+	import StandardSelect from './StandardSelect.svelte';
+	import StandardTable from "./StandardTable.svelte";
+
+  export let headers: Header[] = [],
+    filters: Filter[] = [],
+    width: string = "auto",
+    page: number = 1,
+    perPage: number = 20,
+    perPageOptions: number[] = [20, 50, 100],
+    reload: boolean = false,
+    loading: boolean = false,
+    loadingText: string = "Caricamento ...",
+    noDataText: string = "Nessun elemento disponibile",
+    fetcher: (params: {
+      page: number,
+      perPage: number,
+      filters: Filter[]
+    }) => Promise<{
+      data: any[],
+      meta: PaginationData
+    }>
+
+  let items: { [key: string]: any }[] = [],
+    maxPage: number | undefined = undefined
+
+  onMount(() => {
+    loadRows()
+  })
+
+  async function loadRows() {
+    if(!!fetcher) {
+      loading = true
+      let results = await fetcher({page, perPage, filters})
+
+      items = results.data
+      page = results.meta.currentPage
+      maxPage = results.meta.lastPage
+      loading = false
+    }
+  }
+
+  function handlePaginationChange() {
+    loadRows()
+  }
+
+  function handlePerPageChange() {
+    page = 1
+    loadRows()
+  }
+
+  $: perPageOptionsFormatted = perPageOptions.map((el) => {
+    return {
+      value: el,
+      text: el.toString()
+    }
+  })
+  $: if(reload) {
+    loadRows().then(() => {
+      reload = false
+    })
+  }
+
+  $: filters && loadRows()
+
+</script>
+
+<div class="top-actions">
+
+</div>
+<div class="table">
+  <StandardTable
+    headers={headers}
+    width={width}
+    items={items}
+  >
+    <svelte:fragment slot="appendLastColumn" let:item>
+      <slot name="appendLastColumn" item={item}></slot>
+    </svelte:fragment>
+
+    <svelte:fragment slot="customColumn" let:item let:header>
+      <slot name="customColumn" item={item} header={header}></slot>
+    </svelte:fragment>
+  </StandardTable>
+  {#if loading}
+    <div class="loading-text">
+      {loadingText}
+    </div>
+  {:else if items.length == 0}
+    <div class="no-data">
+      {noDataText}
+    </div>
+  {/if}
+</div>
+<div class="footer">
+  <div>
+    <StandardSelect
+      bind:value={perPage}
+      options={perPageOptionsFormatted}
+      on:change={handlePerPageChange}
+    ></StandardSelect>
+  </div>
+  <div>
+    <StandardPaginator
+      bind:page={page}
+      bind:maxPage={maxPage}
+      on:change={handlePaginationChange}
+    ></StandardPaginator>
+  </div>
+</div>
+
+<style>
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  .loading-text {
+    height: 200px;
+    max-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--global-light-contrast-color);
+    font-size: .9rem;
+  }
+
+  .no-data {
+    height: 200px;
+    max-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--global-light-contrast-color);
+    font-size: .9rem;
+  }
+</style> -->

package/dist/components/composed/list/PaginatedTable.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PaginatedTableProps = typeof __propDef.props;
+export type PaginatedTableEvents = typeof __propDef.events;
+export type PaginatedTableSlots = typeof __propDef.slots;
+export default class PaginatedTable extends SvelteComponentTyped<PaginatedTableProps, PaginatedTableEvents, PaginatedTableSlots> {
+}
+export {};

package/dist/components/composed/list/Paginator.css

@@ -0,0 +1,4 @@
+:root {
+  --paginator-default-selected-background-color: rgb(var(--global-color-primary-500));
+  --paginator-default-selected-color: rgb(var(--global-color-grey-100))
+}