@likable-hair/svelte 3.2.3 → 3.2.5

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

@@ -16,7 +16,7 @@ import { fly } from "svelte/transition";
 import Dialog from "../../simple/dialogs/Dialog.svelte";
 import Validator from "../../../utils/filters/validator";
 import ToolTip from "../common/ToolTip.svelte";
-export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters" : "Filtri", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", showActiveFilters = true, filterTitleLabel = lang == "en" ? "Filter by" : "Filtra per", dateLocale = "en", betweenSeparator = lang == "en" ? "and" : "e", trueString = lang == "en" ? "true" : "vero", falseString = lang == "en" ? "false" : "falso", editFilterMode = "one-edit", labelsMapper = lang == "en" ? {
+export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters" : "Filtri", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", showActiveFilters = true, filterTitleLabel = lang == "en" ? "Filter by" : "Filtra per", dateLocale = lang == "en" ? "en" : "it", betweenSeparator = lang == "en" ? "and" : "e", trueString = lang == "en" ? "true" : "vero", falseString = lang == "en" ? "false" : "falso", editFilterMode = "one-edit", labelsMapper = lang == "en" ? {
   "equal": {
     extended: "equal to",
     short: "equal"

package/dist/components/simple/loaders/Skeleton.css

@@ -0,0 +1,6 @@
+:root {
+  --skeleton-default-card-background: rgb(var(--global-color-background-200));
+  --skeleton-default-animation-color: rgb(var(--global-color-background-400));
+  --skeleton-default-card-width: 100%;
+  --skeleton-default-card-height: 100%;
+}

package/dist/components/simple/loaders/Skeleton.svelte

@@ -1,59 +1,46 @@
-<script context="module"></script>
-
-<script>export let sections = [], maxWidth = void 0, maxHeight = void 0, minWidth = void 0, minHeight = void 0, width = "100%", height = "100%", padding = "10px", dark = false;
-$:
-  widthLessPadding = `calc(${width} - (${padding} * 2))`;
-$:
-  heightLessPadding = `calc(${height} - (${padding} * 2))`;
-$:
-  maxWidthLessPadding = `calc(${maxWidth} - (${padding} * 2))`;
-$:
-  maxHeightLessPadding = `calc(${maxHeight} - (${padding} * 2))`;
-$:
-  minWidthLessPadding = `calc(${minWidth} - (${padding} * 2))`;
-$:
-  minHeightLessPadding = `calc(${minHeight} - (${padding} * 2))`;
-$:
-  elementBackground = dark ? "#1a1a1a" : "#eee";
-$:
-  animationBackground = dark ? "#000000e6" : "#ffffffe6";
-$:
-  cardBackground = dark ? "#000000" : "#fff";
+<script>import "../../../css/main.css";
+import "./Skeleton.css";
 </script>
 
 <div
-  style:--skeleton-card-background={cardBackground}
-  style:--skeleton-animation-color={animationBackground}
-  style:width={widthLessPadding}
-  style:height={heightLessPadding}
-  style:max-width={maxWidthLessPadding}
-  style:max-height={maxHeightLessPadding}
-  style:min-width={minWidthLessPadding}
-  style:min-height={minHeightLessPadding}
-  style:padding
-  class="card"
->
-  {#each sections as section}
-    {#if section.type == "image"}
-      <div
-        style:height={section.height}
-        style:background={elementBackground}
-        class="skeleton-image"
-      />
-    {/if}
-  {/each}
-</div>
+  class="skeleton"
+></div>
 
 <style>
-  .skeleton-image {
-    margin-bottom: 10px;
-    border-radius: 5px;
-    overflow: hidden;
-    width: 100%;
-  }
 
-  .card {
-    background: var(--skeleton-card-background);
+  .skeleton {
+    background: var(
+      --skeleton-card-background,
+      var(--skeleton-default-card-background)
+    );
+    width: var(
+      --skeleton-card-width,
+      var(--skeleton-default-card-width)
+    );
+    height: var(
+      --skeleton-card-height,
+      var(--skeleton-default-card-height)
+    );
+    max-width: var(
+      --skeleton-card-max-width,
+      var(--skeleton-default-card-max-width)
+    );
+    max-height: var(
+      --skeleton-card-max-height,
+      var(--skeleton-default-card-max-height)
+    );
+    min-width: var(
+      --skeleton-card-min-width,
+      var(--skeleton-default-card-min-width)
+    );
+    min-height: var(
+      --skeleton-card-min-height,
+      var(--skeleton-default-card-min-height)
+    );
+    padding: var(
+      --skeleton-card-padding,
+      var(--skeleton-default-card-padding)
+    );
     position: relative;
     border-radius: 5px;
     box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);
@@ -69,19 +56,22 @@ $:
     }
   }
 
-  .card::before {
+  .skeleton::before {
     content: "";
     position: absolute;
     background: linear-gradient(
       90deg,
       transparent,
-      var(--skeleton-animation-color),
+      var(
+        --skeleton-animation-color,
+        var(--skeleton-default-animation-color)
+      ),
       transparent
     );
     width: 50%;
     height: 100%;
     top: 0;
     left: 0;
-    animation: loading 1s infinite;
+    animation: loading 1.2s infinite;
   }
 </style>

package/dist/components/simple/loaders/Skeleton.svelte.d.ts

@@ -1,20 +1,8 @@
 import { SvelteComponent } from "svelte";
-export type SectionType = "image" | "text";
+import '../../../css/main.css';
+import './Skeleton.css';
 declare const __propDef: {
-    props: {
-        sections?: {
-            type: SectionType;
-            height?: string | undefined;
-        }[] | undefined;
-        maxWidth?: string | undefined;
-        maxHeight?: string | undefined;
-        minWidth?: string | undefined;
-        minHeight?: string | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
-        padding?: string | undefined;
-        dark?: boolean | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/index.d.ts

@@ -81,3 +81,4 @@ export { default as CollapsibleSideBarLayout } from './components/layouts/Collap
 export { default as StableDividedSideBarLayout } from './components/layouts/StableDividedSideBarLayout.svelte';
 export { default as UnstableDividedSideBarLayout } from './components/layouts/UnstableDividedSideBarLayout.svelte';
 export { default as Converter } from './utils/filters/filters';
+export { default as RadioButton } from './components/simple/forms/RadioButton.svelte';

package/dist/index.js

@@ -81,3 +81,4 @@ export { default as CollapsibleSideBarLayout } from './components/layouts/Collap
 export { default as StableDividedSideBarLayout } from './components/layouts/StableDividedSideBarLayout.svelte';
 export { default as UnstableDividedSideBarLayout } from './components/layouts/UnstableDividedSideBarLayout.svelte';
 export { default as Converter } from './utils/filters/filters';
+export { default as RadioButton } from './components/simple/forms/RadioButton.svelte';

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

@@ -11,6 +11,7 @@ export default class Builder {
     private _modifiers;
     constructor();
     get modifiers(): Modifier[];
+    set modifiers(value: Modifier[]);
     where(callback: (builder: Builder) => void): Builder;
     where(key: Record<string, WhereFilterValue>): Builder;
     where(key: string, value: WhereFilterValue): Builder;

package/dist/utils/filters/builder.js

@@ -7,6 +7,9 @@ export default class Builder {
     get modifiers() {
         return lodash.cloneDeep(this._modifiers);
     }
+    set modifiers(value) {
+        this._modifiers = value;
+    }
     where(first, second, third) {
         return this.applyWhereClause('and', first, second, third);
     }
@@ -52,7 +55,7 @@ export default class Builder {
                 kind: 'inBuilder',
                 logicalOperator: logicalOperator,
                 key: key,
-                children: inBuilder._modifiers.filter((el) => el.method == 'where' || el.method == 'select')
+                children: inBuilder._modifiers.filter((el) => el.method == 'where' || el.method == 'select' || el.method == 'join' || el.method == 'from')
             });
         }
         else {

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

@@ -1,3 +1,5 @@
+import type { FromModifier } from "./from";
+import type { JoinModifier } from "./join";
 import type { SelectModifier } from "./select";
 export type WhereFilterValue = string | number | Date | boolean;
 type GroupedWhere = {
@@ -40,7 +42,7 @@ type InBuilderWhere = {
     kind: 'inBuilder';
     logicalOperator?: 'and' | 'or' | 'andNot' | 'orNot';
     key: string;
-    children: (ObjectWhere | SimpleWhere | GroupedWhere | InWhere | ColumnWhere | JsonSupersetWhere | InBuilderWhere | NullWhere | SelectModifier)[];
+    children: (ObjectWhere | SimpleWhere | GroupedWhere | InWhere | ColumnWhere | JsonSupersetWhere | InBuilderWhere | NullWhere | SelectModifier | JoinModifier | FromModifier)[];
 };
 type JsonSupersetWhere = {
     method: 'where';

package/package.json

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