@likable-hair/svelte 3.0.19 → 3.0.21

package/dist/components/simple/lists/SimpleTable.svelte

@@ -2,7 +2,6 @@
 
 <script>import "../../../css/main.css";
 import "./SimpleTable.css";
-import { dateToString } from "../dates/utils";
 import Icon from "../media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
 let clazz = {};
@@ -25,6 +24,9 @@ function handleHeaderClick(header) {
     sortDirection
   });
 }
+function formatDate(dateTime, dateFormat) {
+  return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);
+}
 </script>
 
 {#if !!items && Array.isArray(items)}
@@ -33,8 +35,8 @@ function handleHeaderClick(header) {
       <thead class="thead {clazz.header || ''}">
         <tr>
           {#each headers as head}
-            <th 
-              style:width={head.width} 
+            <th
+              style:width={head.width}
               style:min-width={head.minWidth}
               class:sortable={head.sortable}
               on:click={() => handleHeaderClick(head)}
@@ -46,16 +48,16 @@ function handleHeaderClick(header) {
                   </slot>
                 </span>
                 {#if head.sortable}
-                  <span 
+                  <span
                     class="header-sort-icon"
                     class:active={sortedBy == head.value}
-                    class:asc={sortDirection == 'asc'}
-                    class:desc={sortDirection == 'desc'}
+                    class:asc={sortDirection == "asc"}
+                    class:desc={sortDirection == "desc"}
                   >
-                    {#if sortDirection == 'asc'}
-                      <Icon name="mdi-arrow-up"></Icon>
+                    {#if sortDirection == "asc"}
+                      <Icon name="mdi-arrow-up" />
                     {:else}
-                      <Icon name="mdi-arrow-down"></Icon>
+                      <Icon name="mdi-arrow-down" />
                     {/if}
                   </span>
                 {/if}
@@ -74,7 +76,7 @@ function handleHeaderClick(header) {
           <tr class="item-tr {clazz.row || ''}">
             {#each headers as header, j}
               <td class="{clazz.cell || ''}">
-                {#if header.type == "custom"}
+                {#if header.type.key == "custom"}
                   <slot
                     name="custom"
                     index={i}
@@ -82,9 +84,15 @@ function handleHeaderClick(header) {
                     {header}
                     {item}
                   />
-                {:else if header.type == "date"}
-                  {dateToString(item[header.value], "dayAndHours", "it")}
-                {:else}
+                {:else if  header.type.key == "date"}
+                  {formatDate(item[header.value], header.type.params)}
+                {:else if header.type.key == "icon"}
+                    <Icon 
+                     --icon-color={header.type.params?.color }  
+                     --icon-size={header.type.params?.size} 
+                      name={header.type.params?.name || ''}
+                    />
+                {:else} 
                   {item[header.value]}
                 {/if}
               </td>
@@ -104,10 +112,7 @@ function handleHeaderClick(header) {
 
 <style>
   .simple-table-container {
-    width: var(
-      --simple-table-width,
-      var(--simple-table-default-width)
-    );
+    width: var(--simple-table-width, var(--simple-table-default-width));
     min-width: var(
       --simple-table-min-width,
       var(--simple-table-default-min-width)
@@ -116,10 +121,7 @@ function handleHeaderClick(header) {
       --simple-table-max-width,
       var(--simple-table-default-max-width)
     );
-    height: var(
-      --simple-table-height,
-      var(--simple-table-default-height)
-    );
+    height: var(--simple-table-height, var(--simple-table-default-height));
     min-height: var(
       --simple-table-min-height,
       var(--simple-table-default-min-height)
@@ -158,7 +160,7 @@ function handleHeaderClick(header) {
 
   .thead th.sortable {
     cursor: pointer;
-    transition: all .1s ease-in;
+    transition: all 0.1s ease-in;
     user-select: none;
   }
 
@@ -221,7 +223,7 @@ function handleHeaderClick(header) {
       --simple-table-row-height,
       var(--simple-table-default-row-height)
     );
-    transition: background-color .1s ease-in-out;
+    transition: background-color 0.1s ease-in-out;
   }
 
   .item-tr:hover {

package/dist/components/simple/lists/SimpleTable.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+export type HeaderType = ColumnBoolean | ColumnString | ColumnNumber | ColumnDate | ColumnIcon | ColumnCheckBox | ColumnCustom;
 export type Header = {
     value: string;
     label: string;
-    type: "boolean" | "string" | "number" | "date" | "custom";
+    type: HeaderType;
     width?: string;
     minWidth?: string;
     sortable?: boolean;
@@ -12,6 +13,7 @@ export type Header = {
 };
 import '../../../css/main.css';
 import './SimpleTable.css';
+import type { ColumnBoolean, ColumnCheckBox, ColumnCustom, ColumnDate, ColumnIcon, ColumnNumber, ColumnString } from './columnTypes';
 declare const __propDef: {
     props: {
         class?: {

package/dist/components/simple/lists/columnTypes.d.ts

@@ -0,0 +1,35 @@
+export type ColumnDate = {
+    key: "date";
+    params: {
+        format: string;
+        locale: string;
+    };
+};
+export type ColumnIcon = {
+    key: "icon";
+    params: {
+        name: string;
+        color: string;
+        size: string;
+    };
+};
+export type ColumnBoolean = {
+    key: "boolean";
+    params?: {};
+};
+export type ColumnString = {
+    key: "string";
+    params?: {};
+};
+export type ColumnNumber = {
+    key: "number";
+    params?: {};
+};
+export type ColumnCustom = {
+    key: "custom";
+    params?: {};
+};
+export type ColumnCheckBox = {
+    key: "checkbox";
+    params?: {};
+};

package/dist/components/simple/lists/columnTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/components/simple/media/DescriptiveAvatar.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         src: string;
         title?: string | undefined;
         description?: string | undefined;
-        direction?: "row" | "column" | undefined;
+        direction?: "column" | "row" | undefined;
         reverse?: boolean | undefined;
         avatarSpacing?: string | undefined;
         width?: string | undefined;

package/dist/components/simple/navigation/Chip.css

@@ -10,5 +10,6 @@
   --chip-default-font-size: inherit;
   --chip-default-line-height: inherit;
   --chip-default-cursor: pointer;
-  --chip-default-hover-background-color: rgb(var(--global-color-primary-600))
+  --chip-default-hover-background-color: rgb(var(--global-color-primary-600));
+  --chip-default-text-max-width: 200px
 }

package/dist/components/simple/navigation/Chip.svelte

@@ -3,12 +3,13 @@ import "./Chip.css";
 import Icon from "../media/Icon.svelte";
 import Button from "../buttons/Button.svelte";
 import { createEventDispatcher } from "svelte";
-export let close = false, closeIcon = "mdi-close-circle", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, buttonTabIndex = null;
+export let close = false, closeIcon = "mdi-close-circle", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, buttonTabIndex = null, truncateText = false;
 const dispatch = createEventDispatcher();
 function handleChipClick() {
   dispatch("click");
 }
-function handleCloseClick() {
+function handleCloseClick(e) {
+  e.detail.nativeEvent.stopPropagation();
   dispatch("close");
 }
 </script>
@@ -26,8 +27,9 @@ function handleCloseClick() {
       <Icon name={filterIcon} />
     </div>
   {/if}
-  <div 
-    class="text" 
+  <div
+    class="text"
+    class:truncate={truncateText}
   >
     <slot />
   </div>
@@ -40,7 +42,8 @@ function handleCloseClick() {
         --button-background-color="transparent"
         --button-padding="0px"
         --button-color="var(--chip-color, var(--chip-default-color))"
-        on:click={handleCloseClick}
+        on:click
+        ={handleCloseClick}
       />
     </div>
   {/if}
@@ -69,6 +72,14 @@ function handleCloseClick() {
     );
   }
 
+  .truncate {
+    max-width: var(--chip-text-max-width, var(--chip-default-text-max-width));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+
   .chip:not(.outlined) {
     background-color: var(
       --chip-background-color,

package/dist/components/simple/navigation/Chip.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         label?: boolean | undefined;
         outlined?: boolean | undefined;
         buttonTabIndex?: number | null | undefined;
+        truncateText?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/dist/components/simple/navigation/Drawer.svelte

@@ -1,10 +1,18 @@
 <script>import "../../../css/main.css";
 import "./Drawer.css";
 import Navigator from "./Navigator.svelte";
+import { createEventDispatcher } from "svelte";
 export let open = false, position = "left", overlay = true, items = [];
+const dispatch = createEventDispatcher();
 function handleClickOverlay() {
   open = false;
+  overlay = false;
+  dispatch("close");
 }
+$:
+  if (open) {
+    overlay = true;
+  }
 </script>
 
 <div
@@ -75,6 +83,8 @@ function handleClickOverlay() {
     );
     color: var(--drawer-color, var(--drawer-default-color));
     overflow: var(--drawer-overflow, var(--drawer-default-overflow));
+    border-radius: var(--drawer-border-radius);
+    margin: var(--drawer-margin);
   }
 
   .overlay {

package/dist/components/simple/navigation/Drawer.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         'item-click': CustomEvent<{
             item: Item;
         }>;
+        close: CustomEvent<{}>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export { default as ProgressBar } from './components/simple/progress/ProgressBar
 export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
 export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
 export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';
+export { default as Filters } from './components/composed/search/Filters.svelte';
 export { default as mediaQuery } from './stores/mediaQuery';
 export { default as theme, toggleTheme, setTheme } from './stores/theme';
 export { default as SimpleTimeLine } from './components/simple/timeline/SimpleTimeLine.svelte';

package/dist/index.js

@@ -46,6 +46,7 @@ export { default as ProgressBar } from './components/simple/progress/ProgressBar
 export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
 export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
 export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';
+export { default as Filters } from './components/composed/search/Filters.svelte';
 export { default as mediaQuery } from './stores/mediaQuery';
 export { default as theme, toggleTheme, setTheme } from './stores/theme';
 export { default as SimpleTimeLine } from './components/simple/timeline/SimpleTimeLine.svelte';

package/dist/utils/filters/builder.d.ts

@@ -0,0 +1,43 @@
+import type { JoinModifier } from "./modifiers/join";
+import type { WhereModifier } from "./modifiers/where";
+export type Modifier = WhereModifier | JoinModifier;
+export type JsonQuery = {
+    modifiers: Modifier[];
+};
+export default class Builder {
+    private modifiers;
+    constructor();
+    where(callback: (builder: Builder) => void): Builder;
+    where(key: Record<string, string | number | Date>): Builder;
+    where(key: string, value: string | number | Date): Builder;
+    where(key: string, operator: string, value: string | number | Date | boolean): Builder;
+    whereNot(callback: (builder: Builder) => void): Builder;
+    whereNot(key: Record<string, string | number | Date>): Builder;
+    whereNot(key: string, value: string | number | Date): Builder;
+    whereNot(key: string, operator: string, value: string | number | Date): Builder;
+    orWhere(callback: (builder: Builder) => void): Builder;
+    orWhere(key: Record<string, string | number | Date>): Builder;
+    orWhere(key: string, value: string | number | Date): Builder;
+    orWhere(key: string, operator: string, value: string | number | Date): Builder;
+    orWhereNot(callback: (builder: Builder) => void): Builder;
+    orWhereNot(key: Record<string, string | number | Date>): Builder;
+    orWhereNot(key: string, value: string | number | Date): Builder;
+    orWhereNot(key: string, operator: string, value: string | number | Date): Builder;
+    private applyWhereClause;
+    join(table: string, onCallback: (onBuilder: OnClauseBuilder) => void): this;
+    leftJoin(table: string, onCallback: (onBuilder: OnClauseBuilder) => void): this;
+    rightJoin(table: string, onCallback: (onBuilder: OnClauseBuilder) => void): this;
+    private applyJoinClause;
+    toJson(): JsonQuery;
+}
+import type { JoinModifierOnClause } from "./modifiers/join";
+declare class OnClauseBuilder {
+    private onClauses;
+    constructor();
+    get json(): JoinModifierOnClause[];
+    on(from: string, to: string): void;
+    on(from: string, operator: string, to: string): void;
+    orOn(from: string, to: string): void;
+    orOn(from: string, operator: string, to: string): void;
+}
+export {};

package/dist/utils/filters/builder.js

@@ -0,0 +1,137 @@
+export default class Builder {
+    modifiers = [];
+    constructor() {
+        this.modifiers = [];
+    }
+    where(first, second, third) {
+        return this.applyWhereClause('and', first, second, third);
+    }
+    whereNot(first, second, third) {
+        return this.applyWhereClause('andNot', first, second, third);
+    }
+    orWhere(first, second, third) {
+        return this.applyWhereClause('or', first, second, third);
+    }
+    orWhereNot(first, second, third) {
+        return this.applyWhereClause('orNot', first, second, third);
+    }
+    applyWhereClause(logicalOperator, first, second, third) {
+        if (!!third) {
+            if (!!second && typeof first == 'string' && typeof second == 'string') {
+                this.modifiers.push({
+                    method: 'where',
+                    kind: 'simple',
+                    key: first,
+                    operator: second,
+                    value: third,
+                    logicalOperator: logicalOperator
+                });
+            }
+            else if (typeof first == 'object') {
+                this.modifiers.push({
+                    method: 'where',
+                    kind: 'object',
+                    values: first,
+                    logicalOperator
+                });
+            }
+        }
+        else if (typeof first == 'string' && !!second) {
+            this.modifiers.push({
+                method: 'where',
+                kind: 'simple',
+                key: first,
+                value: second,
+                logicalOperator
+            });
+        }
+        else if (typeof first == 'function') {
+            let builder = new Builder();
+            first(builder);
+            if (!builder.modifiers.every(el => el.method == 'where'))
+                throw new Error('inconsistent json query from where callback');
+            this.modifiers.push({
+                method: 'where',
+                kind: 'grouped',
+                logicalOperator,
+                children: builder.modifiers.filter((el) => el.method == 'where')
+            });
+        }
+        return this;
+    }
+    join(table, onCallback) {
+        let onBuilder = new OnClauseBuilder();
+        onCallback(onBuilder);
+        this.applyJoinClause('inner', table, onBuilder.json);
+        return this;
+    }
+    leftJoin(table, onCallback) {
+        let onBuilder = new OnClauseBuilder();
+        onCallback(onBuilder);
+        this.applyJoinClause('left', table, onBuilder.json);
+        return this;
+    }
+    rightJoin(table, onCallback) {
+        let onBuilder = new OnClauseBuilder();
+        onCallback(onBuilder);
+        this.applyJoinClause('right', table, onBuilder.json);
+        return this;
+    }
+    applyJoinClause(kind, table, on) {
+        this.modifiers.push({
+            method: 'join',
+            kind: kind,
+            on: on,
+            table: table
+        });
+        return this;
+    }
+    toJson() {
+        return {
+            modifiers: this.modifiers
+        };
+    }
+}
+class OnClauseBuilder {
+    onClauses;
+    constructor() {
+        this.onClauses = [];
+    }
+    get json() {
+        return this.onClauses;
+    }
+    on(first, second, third) {
+        if (!third) {
+            this.onClauses.push({
+                from: first,
+                operator: '=',
+                to: second
+            });
+        }
+        else {
+            this.onClauses.push({
+                from: first,
+                operator: second,
+                to: third
+            });
+        }
+    }
+    orOn(first, second, third) {
+        if (!third) {
+            this.onClauses.push({
+                from: first,
+                operator: '=',
+                to: second,
+                logicalOperator: 'or'
+            });
+        }
+        else {
+            this.onClauses.push({
+                from: first,
+                operator: second,
+                to: third,
+                logicalOperator: 'or'
+            });
+        }
+    }
+}

package/dist/utils/filters/filters.d.ts

@@ -0,0 +1,89 @@
+import Builder from "./builder";
+export declare const StringModes: readonly ["equal", "like", "ilike"];
+export type StringMode = typeof StringModes[number];
+export declare const GenericModes: readonly ["equal", "greater", "lower", "between"];
+export type DateMode = typeof GenericModes[number];
+export type NumberMode = typeof GenericModes[number];
+export declare const SelectModes: readonly ["equal", "different"];
+export type SelectMode = typeof SelectModes[number];
+type MultiStringFilter = {
+    type: 'multiString';
+    columns: string[];
+    operator?: 'or' | 'and';
+    value?: string;
+};
+type ChoiceFilter = {
+    type: 'choice';
+    column: string;
+    value?: string;
+    operator?: 'or' | 'and';
+    options: any[];
+};
+type StringFilter = {
+    type: 'string';
+    column: string;
+    value?: string;
+    mode?: StringMode;
+};
+type DateFilter = {
+    type: 'date';
+    column: string;
+} & ({
+    mode: 'between';
+    from?: Date;
+    to?: Date;
+} | {
+    mode: 'equal' | 'greater' | 'lower';
+    value?: Date;
+});
+type NumberFilter = {
+    type: 'number';
+    column: string;
+} & ({
+    mode: 'between';
+    from?: number;
+    to?: number;
+} | {
+    mode: 'equal' | 'greater' | 'lower';
+    value?: number;
+});
+type SelectFilter = {
+    type: 'select';
+    column: string;
+    mode: SelectMode;
+    items: {
+        value: string | number;
+        label: string;
+    }[];
+    values?: {
+        value: string | number;
+        label?: string | number;
+    }[];
+};
+type BoolFilter = {
+    type: 'bool';
+    column: string;
+    mode: 'equal';
+    value?: boolean;
+    advanced?: false;
+    desctiprion: string;
+};
+export type Filter = {
+    name: string;
+    active?: boolean;
+    hidden?: boolean;
+    label: string;
+    advanced?: boolean;
+} & (StringFilter | MultiStringFilter | ChoiceFilter | DateFilter | NumberFilter | SelectFilter | BoolFilter);
+export default class Converter {
+    constructor();
+    createBuilder(params: {
+        filters: Filter[];
+    }): Builder;
+    private applyStringFilter;
+    private applyDateFilter;
+    private applyNumberFilter;
+    private applySelectFilter;
+    private applyBooleanFilter;
+}
+export {};