@likable-hair/svelte 3.2.11 → 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/dates/DatePicker.svelte

@@ -68,7 +68,7 @@ function handleMonthChange() {
 </script>
 
 <div
-  class="container {clazz.container || ''}"
+  class="date-picker-container {clazz.container || ''}"
 >
   <div
     class="header {clazz.header || ''}"
@@ -168,7 +168,7 @@ function handleMonthChange() {
 </div>
 
 <style>
-  .container {
+  .date-picker-container {
     border-radius: 5px;
     height: var(
       --date-picker-height,

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;
+}