@likable-hair/svelte 3.2.12 → 3.3.0

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

@@ -8,6 +8,7 @@ import MediaQuery from "../../simple/common/MediaQuery.svelte";
 import Button from "../../simple/buttons/Button.svelte";
 import Icon from "../../simple/media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
+import { isDateMode, isSelectMode, isStringMode } from "../../../utils/filters/filters";
 import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
 import Chip from "../../simple/navigation/Chip.svelte";
 import FilterEditor from "./FilterEditor.svelte";
@@ -228,6 +229,8 @@ function handleRemoveAllFilters(e) {
     singleFilterMenuOpened = false;
   }
   filters = filters;
+  tmpFilters = {};
+  customToBeInitialized = false;
   dispatch("removeAllFilters");
 }
 function handleMultiEditApplyClick() {
@@ -252,13 +255,24 @@ function handleApplyMultiFilterClick() {
   filters = filters;
   handleMultiEditApplyClick();
 }
-function updateMultiFilterValues(filterName, newValue) {
+function updateMultiFilterValues(filterName, newValue, newValid, mode) {
   let filter = filters.find((f) => f.name === filterName);
   if (!filter)
     throw new Error("cannot find filter with name " + filterName);
   if (!tmpFilters[filterName])
     tmpFilters[filterName] = { ...filter };
   let tmpFilter = tmpFilters[filterName];
+  if ("mode" in tmpFilter && !!mode) {
+    if (tmpFilter.type == "date" && isDateMode(mode)) {
+      tmpFilter.mode = mode;
+    } else if (tmpFilter.type == "number" && isDateMode(mode)) {
+      tmpFilter.mode = mode;
+    } else if (tmpFilter.type == "string" && isStringMode(mode)) {
+      tmpFilter.mode = mode;
+    } else if (tmpFilter.type == "select" && isSelectMode(mode)) {
+      tmpFilter.mode = mode;
+    }
+  }
   if (tmpFilter.type == "select") {
     tmpFilter.values = newValue;
   } else if ("mode" in tmpFilter && tmpFilter.mode == "between") {
@@ -267,6 +281,7 @@ function updateMultiFilterValues(filterName, newValue) {
   } else {
     tmpFilter.value = newValue;
   }
+  tmpFilter.active = newValid;
 }
 let customToBeInitialized = true;
 $:
@@ -512,7 +527,7 @@ let moreItemsActivator;
                 <h1>{addFilterLabel}</h1>
               </div>
               <div class="body">
-                <slot name="content" {mAndDown} {updateMultiFilterValues} {filters}>
+                <slot name="content" {mAndDown} {updateMultiFilterValues} {handleRemoveAllFilters} {filters}>
                   <div class="multi-filters-container" style:grid-template-columns={mAndDown ? '1fr' : '1fr 1fr'}>
                     {#each filters as filter, i}
                       <div class="filter">
@@ -680,7 +695,7 @@ let moreItemsActivator;
             <h1>{addFilterLabel}</h1>
           </div>
           <div class="body">
-            <slot name="content" {mAndDown} {updateMultiFilterValues} {filters}>
+            <slot name="content" {mAndDown} {updateMultiFilterValues} {handleRemoveAllFilters} {filters}>
               <div class="multi-filters-container" style:grid-template-columns={mAndDown ? '1fr' : '1fr 1fr'}>
                 {#each filters as filter, i}
                   <div class="filter" class:wide={filter.type === 'select' || filter.type === 'custom'}>

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

@@ -8,7 +8,7 @@ export type LabelMapper = {
 };
 import './Filters.css';
 import '../../../css/main.css';
-import type { Filter } from '../../../utils/filters/filters';
+import { type DateMode, type Filter, type NumberMode, type SelectMode, type StringMode } from '../../../utils/filters/filters';
 import type { Locale } from '../../simple/dates/utils';
 declare const __propDef: {
     props: {
@@ -51,7 +51,8 @@ declare const __propDef: {
         };
         content: {
             mAndDown: boolean;
-            updateMultiFilterValues: (filterName: string, newValue: any) => void;
+            updateMultiFilterValues: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void;
+            handleRemoveAllFilters: (e?: MouseEvent) => void;
             filters: Filter[];
         };
     };

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

@@ -1,4 +1,4 @@
-<script>import { GenericModes, SelectModes, StringModes } from "../../../utils/filters/filters";
+<script>import { GENERIC_MODES, SELECT_MODES, STRING_MODES } from "../../../utils/filters/filters";
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import DatePickerTextField from "../forms/DatePickerTextField.svelte";
 import Button from "../../simple/buttons/Button.svelte";
@@ -39,13 +39,13 @@ $:
   if (!!tmpFilter) {
     let modes;
     if (tmpFilter.type == "string") {
-      modes = StringModes;
+      modes = STRING_MODES;
     } else if (tmpFilter.type == "date") {
-      modes = GenericModes;
+      modes = GENERIC_MODES;
     } else if (tmpFilter.type == "number") {
-      modes = GenericModes;
+      modes = GENERIC_MODES;
     } else if (tmpFilter.type == "select") {
-      modes = SelectModes;
+      modes = SELECT_MODES;
     }
     if (!!modes) {
       advancedModeOptions = modes.map((mode) => {

package/dist/components/simple/common/Divider.css

@@ -0,0 +1,3 @@
+:root {
+  --divider-default-color: rgb(var(--global-background-color-500));
+}

package/dist/components/simple/common/Divider.svelte

@@ -0,0 +1,13 @@
+<script>import "./Divider.css";
+export let weight = "1px", radius = "0.5px", marginTop = "10px", marginBottom = "10px", marginLeft = "5px", marginRight = "5px";
+</script>
+
+<div
+	style:background-color={'var(--divider-color, var(--divider-default-color))'}
+	style:border-radius={radius}
+	style:height={weight}
+	style:margin-top={marginTop}
+	style:margin-bottom={marginBottom}
+	style:margin-right={marginRight}
+	style:margin-left={marginLeft}
+/>

package/dist/components/simple/common/Divider.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import './Divider.css';
+declare const __propDef: {
+    props: {
+        weight?: string | undefined;
+        radius?: string | undefined;
+        marginTop?: string | undefined;
+        marginBottom?: string | undefined;
+        marginLeft?: string | undefined;
+        marginRight?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DividerProps = typeof __propDef.props;
+export type DividerEvents = typeof __propDef.events;
+export type DividerSlots = typeof __propDef.slots;
+export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
+}
+export {};

package/dist/components/simple/common/InfiniteScroll.svelte

@@ -0,0 +1,37 @@
+<script>import { onDestroy, createEventDispatcher } from "svelte";
+export let treshold = 0, horizontal = false, elementScroll = null, hasMore = true;
+const dispatch = createEventDispatcher();
+let isLoadMore = false, component;
+function onScroll(e) {
+  const element = e.target;
+  const offset = horizontal ? element.scrollWidth - element.clientWidth - element.scrollLeft : element.scrollHeight - element.clientHeight - element.scrollTop;
+  if (offset <= treshold) {
+    if (!isLoadMore && hasMore) {
+      dispatch("loadMore");
+    }
+    isLoadMore = true;
+  } else {
+    isLoadMore = false;
+  }
+}
+$: {
+  if (component || elementScroll) {
+    const element = elementScroll ? elementScroll : component.parentNode;
+    if (element) {
+      element.addEventListener("scroll", onScroll);
+      element.addEventListener("resize", onScroll);
+    }
+  }
+}
+onDestroy(() => {
+  if (component || elementScroll) {
+    const element = elementScroll ? elementScroll : component.parentNode;
+    if (element) {
+      element.removeEventListener("scroll", onScroll);
+      element.removeEventListener("resize", onScroll);
+    }
+  }
+});
+</script>
+
+<div bind:this={component} style:width="0px" />

package/dist/components/simple/common/InfiniteScroll.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        treshold?: number | undefined;
+        horizontal?: boolean | undefined;
+        elementScroll?: HTMLElement | null | undefined;
+        hasMore?: boolean | undefined;
+    };
+    events: {
+        loadMore: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InfiniteScrollProps = typeof __propDef.props;
+export type InfiniteScrollEvents = typeof __propDef.events;
+export type InfiniteScrollSlots = typeof __propDef.slots;
+export default class InfiniteScroll extends SvelteComponent<InfiniteScrollProps, InfiniteScrollEvents, InfiniteScrollSlots> {
+}
+export {};

package/dist/components/simple/common/VerticalDraggableList.svelte

@@ -0,0 +1,52 @@
+<script>import { flip } from "svelte/animate";
+import { dndzone } from "svelte-dnd-action";
+import { createEventDispatcher } from "svelte";
+import { Icon } from "../../..";
+let clazz = "";
+export { clazz as class };
+export let items = [];
+const flipDurationMs = 300;
+function handleDndConsider(e) {
+  items = e.detail.items;
+}
+function handleDndFinalize(e) {
+  items = e.detail.items;
+  dispatch("changeOrder", { items });
+}
+let dispatch = createEventDispatcher();
+</script>
+
+
+<section 
+  use:dndzone={{items, flipDurationMs, dropTargetStyle: {border: '0px dashed #000'}}}
+  on:consider={handleDndConsider} 
+  on:finalize={handleDndFinalize}
+>
+	{#each items as item(item.id)}
+		<div
+      animate:flip="{{duration: flipDurationMs}}"
+      style="margin-bottom: 12px;"
+    > 
+      <div
+        class="item-container {clazz}"
+      >
+        <Icon
+          name="mdi-drag" 
+        />
+        <slot name="item" {item}>
+          {item.name}	
+        </slot>
+      </div>
+		</div>
+	{/each}
+</section>
+
+<style>
+  .item-container {
+    display: grid;
+    gap: 12px;
+    padding: 8px;
+    cursor: move;
+    grid-template-columns: 10px auto;
+  }
+</style>

package/dist/components/simple/common/VerticalDraggableList.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        items?: {
+            id: string;
+            name: string;
+        }[] | undefined;
+    };
+    events: {
+        changeOrder: CustomEvent<{
+            items: {
+                id: string;
+                name: string;
+            }[];
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        item: {
+            item: {
+                id: string;
+                name: string;
+            };
+        };
+    };
+};
+export type VerticalDraggableListProps = typeof __propDef.props;
+export type VerticalDraggableListEvents = typeof __propDef.events;
+export type VerticalDraggableListSlots = typeof __propDef.slots;
+export default class VerticalDraggableList extends SvelteComponent<VerticalDraggableListProps, VerticalDraggableListEvents, VerticalDraggableListSlots> {
+}
+export {};

package/dist/components/simple/forms/Checkbox.svelte

@@ -1,13 +1,36 @@
 <script>import "./Checkbox.css";
 import "../../../css/main.css";
+import { createEventDispatcher, onMount } from "svelte";
 export let value = false, id = void 0, disabled = false;
+onMount(() => {
+  window.addEventListener("keydown", handleKeyDown);
+  window.addEventListener("keyup", handleKeyUp);
+  return () => {
+    window.removeEventListener("keydown", handleKeyDown);
+    window.removeEventListener("keyup", handleKeyUp);
+  };
+});
+function handleKeyDown(event) {
+  if (event.key == "Shift") {
+    shiftKeyPressed = true;
+  }
+}
+function handleKeyUp(event) {
+  if (event.key == "Shift") {
+    shiftKeyPressed = false;
+  }
+}
+let dispatch = createEventDispatcher(), shiftKeyPressed = false;
+function handleChange() {
+  dispatch("change", { shiftKeyPressed });
+}
 </script>
 
 <input
   {id}
   type="checkbox"
   bind:checked={value}
-  on:change
+  on:change={handleChange}
   {disabled}
 />
 

package/dist/components/simple/forms/Checkbox.svelte.d.ts

@@ -8,7 +8,9 @@ declare const __propDef: {
         disabled?: boolean | undefined;
     };
     events: {
-        change: Event;
+        change: CustomEvent<{
+            shiftKeyPressed: boolean;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -0,0 +1,14 @@
+:root {
+  --select-default-border: 1.3px solid rgb(var(--global-color-contrast-300), .3);
+  --select-default-active-border-color: rgb(var(--global-color-primary-500));
+  --option-default-border-color: rgb(var(--global-color-contrast-200));
+  --option-default-background-color: rgb(var(--global-color-background-200));
+  --option-default-color: rgb(var(--global-color-contrast-700));
+  --select-default-border-radius: 5px;
+  --select-default-padding-right: 5px;
+  --select-default-padding-left: 5px;
+  --select-default-background-color: transparent;
+  --select-default-color: rgb(var(--global-color-contrast-900));
+  --select-default-width: 100%;
+  --select-default-height: 36px;
+}

package/dist/components/simple/forms/Select.svelte

@@ -0,0 +1,92 @@
+<script context="module">import "./Select.css";
+</script>
+
+<script>import { Icon } from "../../..";
+export let options, name = void 0, value = void 0, disabled = false, placeholder = void 0;
+</script>
+
+<select
+	{name}
+	bind:value
+	on:change
+	{placeholder}
+	class="select"
+	{disabled}
+>
+	{#each options as option}
+		<option value={option.value} class="option">
+			{#if !!option.icon}
+				<Icon name={option.icon} />
+			{/if}
+			{option.text}
+		</option>
+	{/each}
+</select>
+
+<style>
+	.select {
+		height: var(
+			--select-height, 
+			var(--select-default-height)
+		);
+		width: var(
+			--select-width, 
+			var(--select-default-width)
+		);
+		color: var(
+			--select-color, 
+			var(--select-default-color)
+		);
+		background-color: var(
+			--select-background-color,
+			var(--select-default-background-color)
+		);
+		padding-left: var(
+			--select-padding-left,
+			var(--select-default-padding-left)
+		);
+		padding-right: var(
+			--select-padding-right,
+			var(--select-default-padding-right)
+		);
+		font-size: inherit;
+		font-family: inherit;
+		text-overflow: ellipsis;
+		border-radius: var(
+			--select-border-radius,
+			var(--select-default-border-radius)
+		);
+		border: var(
+			--select-border,
+			var(--select-default-border)
+		);
+	}
+
+	.select:focus,
+	.select:active {
+		border-color: var(
+			--selecr-active-border-color,
+			var(--select-default-active-border-color)
+		 ) !important;
+	}
+
+	.option {
+		padding: 10px;
+		color: var(
+			--option-color,
+			var(--option-default-color)
+		);
+		background-color: var(
+			--option-background-color,
+			var(--option-default-background-color)
+		);
+		border-color: var(
+			--option-border-color,
+			var(--option-default-border-color)
+		);
+	}
+
+	.select:focus {
+		outline: none;
+	}
+</style>

package/dist/components/simple/forms/Select.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import './Select.css';
+export type Option = {
+    icon?: string;
+    value: string | number | undefined;
+    text: string;
+};
+declare const __propDef: {
+    props: {
+        options: Option[];
+        name?: string | undefined;
+        value?: string | number | undefined;
+        disabled?: boolean | undefined;
+        placeholder?: string | undefined;
+    };
+    events: {
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

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

@@ -0,0 +1,14 @@
+:root {
+	--switch-default-padding: 1px;
+	--switch-default-width: 40px;
+	--switch-default-background-color: rgb(var(--global-color-background-300), 0.5);
+	--switch-default-border-radius: 9999px;
+	--switch-default-box-shadow: none;
+	--switch-default-active-toggle-color: rgb(var(--global-color-contrast-900));
+	--switch-default-active-background-color: rgb(var(--global-color-contrast-900));
+	--switch-default-inactive-toggle-color: rgb(var(--global-color-contrast-900));
+	--switch-default-inactive-background-color: rgb(var(--global-color-contrast-900));
+	--switch-default-label-width: 'auto';
+	--switch-default-font-size: 16px;
+	--switch-default-gap: 0.5em;
+}

package/dist/components/simple/forms/Switch.svelte

@@ -1,83 +1,96 @@
-<script>export let value = false, height = "20px", width = "40px", padding = "6px", borderRadius = "10px", toggleActiveColor = "#5c5c5c", toggleDeactiveColor = "#5c5c5c", backgroundActiveColor = "#e6e6e6", backgroundDeactiveColor = "#e6e6e6", animationDuration = "0.1s";
+<script>import { createEventDispatcher } from "svelte";
+import "./Switch.css";
+export let label = "", value = void 0, disabled = false;
+let checked = value;
+const uniqueID = Math.floor(Math.random() * 100);
+function handleClick(event) {
+  const target = event.target || null;
+  const state = target.getAttribute("aria-checked");
+  checked = state === "true" ? false : true;
+  value = checked === true ? true : false;
+  dispatch("change", {
+    label,
+    value: checked
+  });
+}
+let dispatch = createEventDispatcher();
 </script>
 
-<div
-  style:--switch-toggle-active-color={toggleActiveColor}
-  style:--switch-toggle-deactive-color={toggleDeactiveColor}
-  style:--switch-animation-duration={animationDuration}
-  style:--switch-height={height}
-  style:--switch-width={width}
-  style:--switch-padding={padding}
-  style:--switch-border-radius={borderRadius}
-  class="container"
->
-  <div
-    class="inner-container"
-    style:background-color={value
-      ? backgroundActiveColor
-      : backgroundDeactiveColor}
-    on:click={() => (value = !value)}
-    on:keypress={() => (value = !value)}
-  >
-    <input bind:checked={value} type="checkbox" on:change />
-    <span class="slider" />
-  </div>
+<div class="s s--slider">
+	<span id={`switch-${uniqueID}`}>{label}</span>
+	<button {disabled} role="switch" aria-checked={checked} on:click={handleClick} />
 </div>
 
 <style>
-  .container {
-    position: relative;
-    width: var(--switch-width);
-    box-sizing: border-box;
-  }
+	:root {
+		--accent-color: rgb(var(--global-color-primary-500));
+		--size: 40px;
+		--gray: #ccc;
+	}
 
-  input {
-    position: absolute;
-    display: none;
-  }
+	.s--slider {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		font-size: var(
+			--switch-font-size,
+			var(--switch-default-font-size)
+		);
+		gap: var(
+			--switch-gap,
+			var(--switch-default-gap)
+		);
+	}
 
-  .inner-container {
-    position: absolute;
-    width: 100%;
-    height: var(--switch-height);
-    border-radius: var(--switch-border-radius);
-    cursor: pointer;
-    transition: background-color var(--switch-animation-duration) ease;
-  }
+	.s--slider button {
+		width: var(--size);
+		height: calc(var(--size) * 0.55);
+		position: relative;
+		margin: 0;
+		background: var(--gray);
+		border: none;
+	}
 
-  .slider {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--switch-border-radius);
-    transition: var(--switch-animation-duration);
-  }
+	.s--slider button::before {
+		content: '';
+		position: absolute;
+		width: calc(var(--size) / 3);
+		height: calc(var(--size) / 3);
+		background: #fff;
+		top: calc(var(--size) / 10);
+		right: calc(var(--size) / 1.7);
+		transition: transform 0.3s;
+	}
 
-  .slider::before {
-    --switch-toggle-top-padding: calc(var(--switch-padding) / 2);
-    --switch-toggle-left-padding: calc(var(--switch-padding) / 2);
-    --switch-toggle-right-padding: calc(var(--switch-padding) / 2);
-    --switch-toggle-bottom-padding: calc(var(--switch-padding) / 2);
-    content: "";
-    position: absolute;
-    top: var(--switch-toggle-top-padding);
-    left: var(--switch-toggle-left-padding);
-    width: calc(
-      var(--switch-width) / 2 - var(--switch-toggle-right-padding) -
-        var(--switch-toggle-left-padding)
-    );
-    height: calc(
-      var(--switch-height) - var(--switch-toggle-top-padding) -
-        var(--switch-toggle-bottom-padding)
-    );
-    border-radius: var(--switch-border-radius);
-    background-color: var(--switch-toggle-deactive-color);
-    transition: var(--switch-animation-duration);
-  }
+	.s--slider button[aria-checked='true'] {
+		background-color: var(--accent-color);
+	}
 
-  input:checked ~ .slider::before {
-    transform: translateX(calc(var(--switch-width) / 2));
-    background-color: var(--switch-toggle-active-color);
-    box-shadow: none;
-  }
+	.s--slider button[aria-checked='true']::before {
+		transform: translateX(1.3em);
+		transition: transform 0.3s;
+	}
+
+	.s--slider button:focus {
+		box-shadow: 0 0px 0px 1px var(--accent-color);
+	}
+
+	.s--slider button {
+		border-radius: 1.5em;
+	}
+
+	.s--slider button::before {
+		border-radius: 100%;
+	}
+
+	.s--slider button:focus {
+		box-shadow: 0 0px 8px var(--accent-color);
+		border-radius: 1.5em;
+	}
+	span {
+		width: var(
+			--switch-label-width,
+			var(--switch-default-label-width)
+		);
+	}
 </style>