@likable-hair/svelte 3.1.6 → 3.1.7

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

@@ -1,4 +1,4 @@
-<script context="module">import SimpleTable from "../../simple/lists/SimpleTable.svelte";
+<script context="module">import SimpleTable, {} from "../../simple/lists/SimpleTable.svelte";
 import Icon from "../../simple/media/Icon.svelte";
 import Paginator from "../../simple/lists/Paginator.svelte";
 import Dropdown from "../forms/Dropdown.svelte";
@@ -14,7 +14,9 @@ export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0,
   { label: "20", value: 20 },
   { label: "50", value: 50 },
   { label: "100", value: 100 }
-], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit";
+], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true;
+export let calculateRowStyles = void 0;
+export let calculateRowClasses = void 0;
 let searchBarInput, searchText = void 0;
 let dispatch = createEventDispatcher();
 let rowsPerPageSelection = [];
@@ -78,9 +80,11 @@ function handleFiltersChange() {
       bind:filters
       on:applyFilter={handleFiltersChange}
       on:removeFilter={handleFiltersChange}
+      on:removeAllFilters={handleFiltersChange}
       --filters-default-wrapper-width="100%"
       {lang}
       {editFilterMode}
+      {showActiveFilters}
     >
       <svelte:fragment slot="append">
         <slot name="filter-append"></slot>
@@ -101,6 +105,8 @@ function handleFiltersChange() {
     bind:sortDirection
     on:sort
     on:rowClick
+    {calculateRowStyles}
+    {calculateRowClasses}
   >
     <svelte:fragment slot="header" let:head>
       <slot name="header" {head} >

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

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
-import SimpleTable from "../../simple/lists/SimpleTable.svelte";
+import SimpleTable, { type CalculateRowClasses, type CalculateRowStyles } from "../../simple/lists/SimpleTable.svelte";
 import Paginator from "../../simple/lists/Paginator.svelte";
 import Dropdown from "../forms/Dropdown.svelte";
 import { type ComponentProps } from "svelte";
 type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
-export type Header = ArrayElement<NonNullable<ComponentProps<SimpleTable>['headers']>>;
+export type Header = ArrayElement<NonNullable<ComponentProps<SimpleTable>["headers"]>>;
 import Filters from "../search/Filters.svelte";
 declare const __propDef: {
     props: {
@@ -27,6 +27,9 @@ declare const __propDef: {
         searchBarPlaceholder?: string | undefined;
         lang?: "it" | "en" | undefined;
         editFilterMode?: "one-edit" | "multi-edit" | undefined;
+        showActiveFilters?: boolean | undefined;
+        calculateRowStyles?: CalculateRowStyles | undefined;
+        calculateRowClasses?: CalculateRowClasses | undefined;
     };
     events: {
         sort: CustomEvent<{
@@ -34,9 +37,7 @@ declare const __propDef: {
             sortDirection: string;
         }>;
         rowClick: CustomEvent<{
-            item: {
-                [key: string]: any;
-            };
+            item: import("../../simple/lists/SimpleTable.svelte").Item;
         }>;
     } & {
         [evt: string]: CustomEvent<any>;
@@ -62,21 +63,15 @@ declare const __propDef: {
             index: any;
             columnIndex: any;
             header: import("../../simple/lists/SimpleTable.svelte").Header;
-            item: {
-                [key: string]: any;
-            };
+            item: import("../../simple/lists/SimpleTable.svelte").Item;
         };
         rowActions: {
             index: any;
-            item: {
-                [key: string]: any;
-            };
+            item: import("../../simple/lists/SimpleTable.svelte").Item;
         };
         append: {
             index: any;
-            item: {
-                [key: string]: any;
-            };
+            item: import("../../simple/lists/SimpleTable.svelte").Item;
         };
         footer: {
             hideRowsPerPage: boolean;

package/dist/components/composed/search/Filters.svelte

@@ -681,7 +681,7 @@ let moreItemsActivator;
             <slot name="content" {mAndDown} {updateMultiFilterValues} {filters}>
               <div class="multi-filters-container" style:grid-template-columns={mAndDown ? '1fr' : '1fr 1fr'}>
                 {#each filters as filter, i}
-                  <div class="filter" style:grid-column={filter.type === 'select' ? 'span 2' : 'auto'}>
+                  <div class="filter" class:wide={filter.type === 'select' || filter.type === 'custom'}>
                     <div class="input">
                       {#if !filter.advanced && filter.type !== 'custom'}
                         <div class="label">
@@ -909,4 +909,12 @@ let moreItemsActivator;
     margin-right: 20px;
   }
 
+  .multi-filters-container .filter {
+    grid-column: auto;
+  }
+
+  .multi-filters-container .filter.wide {
+    grid-column: span 2;
+  }
+
 </style>

package/dist/components/simple/charts/GanymedeBarChart.svelte

@@ -0,0 +1,142 @@
+<script>import { Bar } from "svelte-chartjs";
+import { theme } from "../../..";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  CategoryScale,
+  BarElement
+} from "chart.js";
+import { onMount } from "svelte";
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  BarElement,
+  LinearScale,
+  PointElement,
+  CategoryScale
+);
+export let data = {
+  labels: [],
+  datasets: []
+}, horizontal = false, responsive = true, maintainAspectRatio = true, showLegend = true, showYTicks = false, showXTicks = false, displayYGrid = true, lineWidth = 1, enableZoom = true, resetZoom = false;
+let mounted = false, zoomMounted = false;
+onMount(() => {
+  mounted = true;
+});
+let rgbTooltipColor = void 0;
+let rgbTooltipBackgroundColor = void 0;
+let rgbBackgroundColor = void 0;
+$:
+  rgbTooltipColor = $theme.colors?.[$theme.active]["dark"]["primary"]["300"];
+$:
+  rgbTooltipBackgroundColor = $theme.colors?.[$theme.active]["dark"]["primary"]["900"];
+$:
+  rgbBackgroundColor = $theme.colors?.[$theme.active]["dark"]["background"]["200"];
+$:
+  finalTooltipColor = !!rgbTooltipColor ? `rgb(${rgbTooltipColor}, .8)` : void 0;
+$:
+  finalTooltipBackgroundColor = !!rgbTooltipBackgroundColor ? `rgb(${rgbTooltipBackgroundColor})` : void 0;
+$:
+  finalBackgroundColor = !!rgbBackgroundColor ? `rgb(${rgbBackgroundColor}, .3)` : void 0;
+let chart;
+$:
+  if (!!chart && !!enableZoom && !!resetZoom) {
+    chart.resetZoom();
+    resetZoom = false;
+  }
+$:
+  if (enableZoom && mounted) {
+    import("chartjs-plugin-zoom").then(({ default: zoomPlugin }) => {
+      ChartJS.register(zoomPlugin);
+      zoomMounted = true;
+    });
+  }
+let chartOptions;
+$:
+  chartOptions = {
+    barPercentage: 0.9,
+    borderRadius: 2,
+    categoryPercentage: 0.3,
+    indexAxis: horizontal ? "y" : "x",
+    responsive,
+    maintainAspectRatio,
+    plugins: {
+      tooltip: {
+        displayColors: false,
+        titleColor: finalTooltipColor,
+        backgroundColor: finalTooltipBackgroundColor,
+        titleFont: {
+          size: 14
+        },
+        bodyFont: {
+          size: 14,
+          weight: "bold"
+        }
+      },
+      legend: {
+        display: showLegend
+      },
+      zoom: {
+        pan: {
+          enabled: true,
+          mode: "x",
+          modifierKey: "ctrl"
+        },
+        zoom: {
+          drag: {
+            enabled: true
+          },
+          mode: "x"
+        }
+      }
+    },
+    interaction: {
+      intersect: false
+    },
+    scales: {
+      x: {
+        display: true,
+        title: {
+          display: true
+        },
+        grid: {
+          display: false
+        },
+        border: {
+          display: false
+        },
+        ticks: {
+          display: showYTicks
+        }
+      },
+      y: {
+        display: displayYGrid,
+        title: {},
+        grid: {
+          lineWidth,
+          color: finalBackgroundColor
+        },
+        border: {
+          dash: [10, 10],
+          display: false
+        },
+        ticks: {
+          display: showXTicks
+        }
+      }
+    }
+  };
+</script>
+
+<Bar
+  bind:data={data}
+  options={chartOptions}
+  bind:chart={chart}
+></Bar>

package/dist/components/simple/charts/GanymedeBarChart.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {
+            labels: string[];
+            datasets: {
+                label: string;
+                data: number[];
+                backgroundColor?: string | undefined;
+                borderColor?: string | undefined;
+                hoverBackgroundColor?: string[] | undefined;
+                tension?: number | undefined;
+            }[];
+        } | undefined;
+        horizontal?: boolean | undefined;
+        responsive?: boolean | undefined;
+        maintainAspectRatio?: boolean | undefined;
+        showLegend?: boolean | undefined;
+        showYTicks?: boolean | undefined;
+        showXTicks?: boolean | undefined;
+        displayYGrid?: boolean | undefined;
+        lineWidth?: number | undefined;
+        enableZoom?: boolean | undefined;
+        resetZoom?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GanymedeBarChartProps = typeof __propDef.props;
+export type GanymedeBarChartEvents = typeof __propDef.events;
+export type GanymedeBarChartSlots = typeof __propDef.slots;
+export default class GanymedeBarChart extends SvelteComponent<GanymedeBarChartProps, GanymedeBarChartEvents, GanymedeBarChartSlots> {
+}
+export {};

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

@@ -8,6 +8,8 @@ let clazz = {};
 export { clazz as class };
 const dispatch = createEventDispatcher();
 export let headers = [], items = [], sortedBy = void 0, sortDirection = "asc";
+export let calculateRowStyles = void 0;
+export let calculateRowClasses = void 0;
 function handleHeaderClick(header) {
   if (!!sortedBy && header.value == sortedBy) {
     if (sortDirection == "asc")
@@ -35,7 +37,7 @@ function formatDate(dateTime, dateFormat) {
 </script>
 
 {#if !!items && Array.isArray(items)}
-  <div class="simple-table-container {clazz.container || ''}" >
+  <div class="simple-table-container {clazz.container || ''}">
     <table class="table">
       <thead class="thead {clazz.header || ''}">
         <tr>
@@ -78,9 +80,14 @@ function formatDate(dateTime, dateFormat) {
       </thead>
       <tbody>
         {#each items as item, i}
-          <tr 
-            class="item-tr {clazz.row || ''}" 
+          {@const styles = !!calculateRowStyles ? calculateRowStyles(item) : {}}
+          {@const classes = !!calculateRowClasses ? calculateRowClasses(item) : ""}
+          <tr
+            class="item-tr {clazz.row || ''} {classes}"
             on:click={() => handleRowClick(item)}
+            style:background-color={styles.backgroundColor}
+            style:color={styles.color}
+            style:font-weight={styles.fontWeight}
           >
             {#each headers as header, j}
               <td class="{clazz.cell || ''}">
@@ -95,11 +102,11 @@ function formatDate(dateTime, dateFormat) {
                 {: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 || ''}
-                    />
+                  <Icon
+                    --icon-color={header.type.params?.color}
+                    --icon-size={header.type.params?.size}
+                    name={header.type.params?.name || ""}
+                  />
                 {:else if header.type.key == 'string'}
                   {#if item[header.value] !== undefined && item[header.value] !== null}
                     {item[header.value]}

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

@@ -11,6 +11,15 @@ export type Header = {
         [key: string]: any;
     };
 };
+export interface Item {
+    [key: string]: any;
+}
+export type CalculateRowStyles = (item: Item) => {
+    backgroundColor?: string;
+    color?: string;
+    fontWeight?: string;
+};
+export type CalculateRowClasses = (item: Item) => string | undefined;
 import '../../../css/main.css';
 import './SimpleTable.css';
 import type { ColumnBoolean, ColumnCheckBox, ColumnCustom, ColumnDate, ColumnIcon, ColumnNumber, ColumnString } from './columnTypes';
@@ -23,11 +32,11 @@ declare const __propDef: {
             cell?: string | undefined;
         } | undefined;
         headers?: Header[] | undefined;
-        items?: {
-            [key: string]: any;
-        }[] | undefined;
+        items?: Item[] | undefined;
         sortedBy?: string | undefined;
         sortDirection?: "desc" | "asc" | undefined;
+        calculateRowStyles?: CalculateRowStyles | undefined;
+        calculateRowClasses?: CalculateRowClasses | undefined;
     };
     events: {
         sort: CustomEvent<{
@@ -35,9 +44,7 @@ declare const __propDef: {
             sortDirection: string;
         }>;
         rowClick: CustomEvent<{
-            item: {
-                [key: string]: any;
-            };
+            item: Item;
         }>;
     } & {
         [evt: string]: CustomEvent<any>;
@@ -49,23 +56,17 @@ declare const __propDef: {
         headerLabel: {};
         append: {
             index: any;
-            item: {
-                [key: string]: any;
-            };
+            item: Item;
         };
         custom: {
             index: any;
             columnIndex: any;
             header: Header;
-            item: {
-                [key: string]: any;
-            };
+            item: Item;
         };
         rowActions: {
             index: any;
-            item: {
-                [key: string]: any;
-            };
+            item: Item;
         };
     };
 };

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

@@ -27,8 +27,11 @@ export default class Builder {
     whereColumn(key: string, operator: string, compareColumn: string): Builder;
     orWhereColumn(key: string, compareColumn: string): Builder;
     orWhereColumn(key: string, operator: string, compareColumn: string): Builder;
+    whereJsonSuperset(key: string, object: Object): Builder;
+    orWhereJsonSuperset(key: string, object: Object): Builder;
     private applyWhereClause;
     private applyWhereColumnClause;
+    private applyWhereJsonSupersetClause;
     join(table: string, onCallback: (onBuilder: OnClauseBuilder) => void): this;
     leftJoin(table: string, onCallback: (onBuilder: OnClauseBuilder) => void): this;
     rightJoin(table: string, onCallback: (onBuilder: OnClauseBuilder) => void): this;

package/dist/utils/filters/builder.js

@@ -21,6 +21,12 @@ export default class Builder {
     orWhereColumn(first, second, third) {
         return this.applyWhereColumnClause('or', first, second, third);
     }
+    whereJsonSuperset(first, second) {
+        return this.applyWhereJsonSupersetClause('and', first, second);
+    }
+    orWhereJsonSuperset(first, second) {
+        return this.applyWhereJsonSupersetClause('or', first, second);
+    }
     applyWhereClause(logicalOperator, first, second, third) {
         if (third !== undefined) {
             if (!!second && typeof first == 'string' && typeof second == 'string') {
@@ -87,6 +93,16 @@ export default class Builder {
         }
         return this;
     }
+    applyWhereJsonSupersetClause(logicalOperator, first, second) {
+        this.modifiers.push({
+            method: 'where',
+            kind: 'jsonSuperset',
+            key: first,
+            value: second,
+            logicalOperator: logicalOperator
+        });
+        return this;
+    }
     join(table, onCallback) {
         let onBuilder = new OnClauseBuilder();
         onCallback(onBuilder);

package/dist/utils/filters/filters.js

@@ -72,10 +72,10 @@ export default class Converter {
         }
         else if (params.filter.mode == 'between') {
             if (!!params.filter.from) {
-                params.builder.where(params.filter.column, '>', params.filter.from);
+                params.builder.where(params.filter.column, '>=', params.filter.from);
             }
             if (!!params.filter.to) {
-                params.builder.where(params.filter.column, '<', params.filter.to);
+                params.builder.where(params.filter.column, '<=', params.filter.to);
             }
         }
         return params.builder;
@@ -92,10 +92,10 @@ export default class Converter {
         }
         else if (params.filter.mode == 'between') {
             if (!!params.filter.from) {
-                params.builder.where(params.filter.column, '>', params.filter.from);
+                params.builder.where(params.filter.column, '>=', params.filter.from);
             }
             if (!!params.filter.to) {
-                params.builder.where(params.filter.column, '<', params.filter.to);
+                params.builder.where(params.filter.column, '<=', params.filter.to);
             }
         }
         return params.builder;

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

@@ -3,7 +3,7 @@ type GroupedWhere = {
     method: 'where';
     kind: 'grouped';
     logicalOperator?: 'and' | 'or' | 'andNot' | 'orNot';
-    children: (ObjectWhere | SimpleWhere | GroupedWhere | InWhere | ColumnWhere)[];
+    children: (ObjectWhere | SimpleWhere | GroupedWhere | InWhere | ColumnWhere | WhereJsonSuperset)[];
 };
 type ObjectWhere = {
     method: 'where';
@@ -34,5 +34,12 @@ type InWhere = {
     key: string;
     value: (WhereFilterValue)[];
 };
-export type WhereModifier = SimpleWhere | ObjectWhere | GroupedWhere | InWhere | ColumnWhere;
+type WhereJsonSuperset = {
+    method: 'where';
+    kind: 'jsonSuperset';
+    logicalOperator?: 'and' | 'or' | 'andNot' | 'orNot';
+    key: string;
+    value: Object;
+};
+export type WhereModifier = SimpleWhere | ObjectWhere | GroupedWhere | InWhere | ColumnWhere | WhereJsonSuperset;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",