@likable-hair/svelte 4.0.20 → 4.0.22

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.
@@ -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 = {
@@ -894,6 +894,7 @@ function onclick(event, stopPropagation = false) {
894
894
  flex-grow: 0;
895
895
  height: fit-content;
896
896
  position: relative;
897
+ line-height: var(--filters-button-height, var(--filters-default-button-height));
897
898
  }
898
899
 
899
900
  .drawer-content{
@@ -4,7 +4,7 @@ import { sidebarOpened } from '../../../stores/layouts/unstableSidebarOpened';
4
4
  let { _activatorGap = 5, _height = 'auto', _overflow = 'auto', _width = 'auto', anchor = 'bottom', closeOnClickOutside = false, flipOnOverflow = $bindable(false), inAnimation = fly, inAnimationConfig = {
5
5
  duration: 100,
6
6
  y: 10,
7
- }, open = $bindable(false), outAnimation = fly, outAnimationConfig = {
7
+ }, open = $bindable(), outAnimation = fly, outAnimationConfig = {
8
8
  duration: 100,
9
9
  y: 10,
10
10
  }, refreshPosition = $bindable(false), stayInViewport = $bindable(false), _borderRadius = undefined, _boxShadow = undefined, _left = undefined, _maxHeight = undefined, _minWidth = undefined, _top = undefined, activator = $bindable(), menuElement = $bindable(), openingId = $bindable(), onkeydown, children, } = $props();
@@ -0,0 +1,3 @@
1
+ :root {
2
+ --vertical-draggable-list-default-item-padding: 8px
3
+ }
@@ -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
  }
@@ -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?: {
@@ -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;
@@ -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.20",
4
+ "version": "4.0.22",
5
5
  "scripts": {
6
6
  "host": "vite --host",
7
7
  "dev": "vite dev",