@likable-hair/svelte 4.0.19 → 4.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/composed/forms/DatePickerTextField.svelte +1 -1
  2. package/dist/components/composed/search/FilterEditor.svelte +0 -5
  3. package/dist/components/composed/search/Filters.svelte +7 -3
  4. package/dist/components/simple/common/VerticalDraggableList.css +3 -0
  5. package/dist/components/simple/common/VerticalDraggableList.svelte +8 -6
  6. package/dist/components/simple/common/VerticalDraggableList.svelte.d.ts +2 -0
  7. package/dist/components/simple/dialogs/Dialog.svelte +3 -3
  8. package/dist/components/simple/dialogs/Dialog.svelte.d.ts +1 -1
  9. package/package.json +1 -1
package/dist/components/composed/forms/DatePickerTextField.svelte CHANGED
@@ -7,7 +7,7 @@ import { onMount, tick } from 'svelte';
7
7
  import { DateTime } from 'luxon';
8
8
  import MediaQuery from '../../simple/common/MediaQuery.svelte';
9
9
  import Dialog from '../../simple/dialogs/Dialog.svelte';
10
- let { menuOpened = $bindable(false), openingId = $bindable('date-picker-text-field'), pattern = "dd/MM/yyyy", selectedYear = $bindable(new Date().getFullYear()), selectedMonth = $bindable(new Date().getMonth()), selectedDate = $bindable(undefined), visibleMonth = $bindable(selectedMonth), visibleYear = $bindable(selectedYear), placeholder, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1970, disabled = false, flipOnOverflow = true, class: clazz = {}, ondayClick, oninput, activatorSnippet, appendInnerSnippet, appendSnippet, prependInnerSnippet: prependInnerInternalSnippet, prependSnippet, } = $props();
10
+ let { menuOpened = $bindable(), openingId = $bindable(), pattern = "dd/MM/yyyy", selectedYear = $bindable(new Date().getFullYear()), selectedMonth = $bindable(new Date().getMonth()), selectedDate = $bindable(), visibleMonth = $bindable(selectedMonth), visibleYear = $bindable(selectedYear), placeholder, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1970, disabled = false, flipOnOverflow = true, class: clazz = {}, ondayClick, oninput, activatorSnippet, appendInnerSnippet, appendSnippet, prependInnerSnippet: prependInnerInternalSnippet, prependSnippet, } = $props();
11
11
  let activator = $state(), refreshPosition = $state(false), menuElement = $state(), inputElement = $state(), mask = $state({
12
12
  value: undefined
13
13
  }), maskFactoryArgs = {
package/dist/components/composed/search/FilterEditor.svelte CHANGED
@@ -26,7 +26,6 @@ function closeDropDown() {
26
26
  dropdownOpened = false;
27
27
  }
28
28
  $effect(() => {
29
- console.log('effect 1');
30
29
  if (!!filter) {
31
30
  tick().then(() => {
32
31
  initTmpFilter();
@@ -35,7 +34,6 @@ $effect(() => {
35
34
  }
36
35
  });
37
36
  $effect(() => {
38
- console.log('effect 2');
39
37
  if (!!tmpFilter) {
40
38
  let modes;
41
39
  if (tmpFilter.type == 'string') {
@@ -64,7 +62,6 @@ $effect(() => {
64
62
  }
65
63
  });
66
64
  $effect(() => {
67
- console.log('effect 3');
68
65
  if (!tmpFilter?.advanced) {
69
66
  advancedModeSelectedOptions = [];
70
67
  }
@@ -89,7 +86,6 @@ function handleAdvancedModeSelection() {
89
86
  }
90
87
  let applyFilterDisabled = $derived(!Validator.isValid(tmpFilter) && !forceApplyValid);
91
88
  $effect.pre(() => {
92
- console.log('effect 4');
93
89
  if (!!tmpFilter && tmpFilter.type == 'bool') {
94
90
  if (tmpFilter.value === undefined) {
95
91
  tmpFilter.value = false;
@@ -97,7 +93,6 @@ $effect.pre(() => {
97
93
  }
98
94
  });
99
95
  $effect.pre(() => {
100
- console.log('effect 5');
101
96
  if (!!tmpFilter && tmpFilter.type == 'select') {
102
97
  if (tmpFilter.values === undefined) {
103
98
  tmpFilter.values = [];
package/dist/components/composed/search/Filters.svelte CHANGED
@@ -809,6 +809,9 @@ function onclick(event, stopPropagation = false) {
809
809
 
810
810
 
811
811
  <style>
812
+ * {
813
+ box-sizing: border-box;
814
+ }
812
815
 
813
816
  .sub-filter-button {
814
817
  display: flex;
@@ -891,6 +894,7 @@ function onclick(event, stopPropagation = false) {
891
894
  flex-grow: 0;
892
895
  height: fit-content;
893
896
  position: relative;
897
+ line-height: var(--filters-button-height, var(--filters-default-button-height));
894
898
  }
895
899
 
896
900
  .drawer-content{
@@ -990,7 +994,7 @@ function onclick(event, stopPropagation = false) {
990
994
  font-weight: 600;
991
995
  font-size: 1.5rem;
992
996
  padding: 16px;
993
- height: 32px;
997
+ height: 64px;
994
998
  display: flex;
995
999
  align-items: center;
996
1000
  border-bottom: 1px solid rgb(var(--global-color-background-200));
@@ -1002,13 +1006,13 @@ function onclick(event, stopPropagation = false) {
1002
1006
 
1003
1007
  .dialog-body {
1004
1008
  padding: 16px;
1005
- height: calc(90vh - 96px);
1009
+ height: calc(90vh - 164px);
1006
1010
  max-height: calc(90vh - 164px);
1007
1011
  overflow-y: auto;
1008
1012
  }
1009
1013
 
1010
1014
  .dialog-footer {
1011
- height: 32px;
1015
+ height: 64px;
1012
1016
  padding: 16px;
1013
1017
  display: flex;
1014
1018
  align-items: center;
package/dist/components/simple/common/VerticalDraggableList.css ADDED
@@ -0,0 +1,3 @@
1
+ :root {
2
+ --vertical-draggable-list-default-item-padding: 8px
3
+ }
package/dist/components/simple/common/VerticalDraggableList.svelte CHANGED
@@ -1,4 +1,6 @@
1
- <script lang="ts">import { flip } from "svelte/animate";
1
+ <script lang="ts">import '../../../css/main.css';
2
+ import './VerticalDraggableList.css';
3
+ import { flip } from "svelte/animate";
2
4
  import { dndzone } from "svelte-dnd-action";
3
5
  import {} from "svelte";
4
6
  import { Icon } from "../../..";
@@ -28,11 +30,8 @@ function handleDndFinalize(e) {
28
30
  {#each items as item(item.id)}
29
31
  <div
30
32
  animate:flip="{{duration: flipDurationMs}}"
31
- style="margin-bottom: 12px;"
32
33
  >
33
- <div
34
- class="item-container {clazz}"
35
- >
34
+ <div class="item-container {clazz}">
36
35
  <div
37
36
  style:grid-cols=1
38
37
  >
@@ -58,7 +57,10 @@ function handleDndFinalize(e) {
58
57
  .item-container {
59
58
  display: grid;
60
59
  gap: 12px;
61
- padding: 8px;
60
+ padding: var(
61
+ --vertical-draggable-list-item-padding,
62
+ var(--vertical-draggable-list-default-item-padding)
63
+ );
62
64
  cursor: move;
63
65
  grid-template-columns: 10px auto;
64
66
  }
package/dist/components/simple/common/VerticalDraggableList.svelte.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import '../../../css/main.css';
2
+ import './VerticalDraggableList.css';
1
3
  import { type Snippet } from "svelte";
2
4
  declare const VerticalDraggableList: import("svelte").Component<{
3
5
  items?: {
package/dist/components/simple/dialogs/Dialog.svelte CHANGED
@@ -2,8 +2,8 @@
2
2
  import { BROWSER } from 'esm-env';
3
3
  import { onMount } from "svelte";
4
4
  import Keyboarder, {} from '../../../utils/keyboarder';
5
- let { open = $bindable(false), transition = 'fly-up', _overlayOpacity = "30%", _overlayColor = "#282828", _overlayBackdropFilter, _transitionTimingFunction = 'cubic-bezier(0.075, 0.82, 0.165, 1)', _transitionDuration = '0.5s', topRightSnippet, centerLeftSnippet, centerRightSnippet, children, } = $props();
6
- let zIndex = $state(50), localOpen = $state(open), dialogElement, teleportedUid = undefined, hasBeenOpened = $state(false);
5
+ let { open = $bindable(), transition = 'fly-up', _overlayOpacity = "30%", _overlayColor = "#282828", _overlayBackdropFilter, _transitionTimingFunction = 'cubic-bezier(0.075, 0.82, 0.165, 1)', _transitionDuration = '0.5s', topRightSnippet, centerLeftSnippet, centerRightSnippet, children, } = $props();
6
+ let zIndex = $state(50), localOpen = $state(open || false), dialogElement, teleportedUid = undefined, hasBeenOpened = $state(false);
7
7
  onMount(() => {
8
8
  if (!teleportedUid) {
9
9
  let tp = new Teleporter();
@@ -56,7 +56,7 @@ $effect.pre(() => {
56
56
  }
57
57
  }
58
58
  }
59
- localOpen = open;
59
+ localOpen = open || false;
60
60
  });
61
61
  function closeDialog() {
62
62
  open = false;
package/dist/components/simple/dialogs/Dialog.svelte.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { type Snippet } from "svelte";
2
2
  interface Props {
3
- open: boolean;
3
+ open?: boolean;
4
4
  transition?: 'fly-down' | 'fly-up' | 'fly-horizontal' | 'scale' | 'fade';
5
5
  _overlayOpacity?: string;
6
6
  _overlayColor?: string;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@likable-hair/svelte",
3
3
  "description": "A Svelte component for likablehair and others",
4
- "version": "4.0.19",
4
+ "version": "4.0.21",
5
5
  "scripts": {
6
6
  "host": "vite --host",
7
7
  "dev": "vite dev",