@likable-hair/svelte 3.0.77 → 3.0.79
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.
- package/dist/components/composed/forms/CountriesAutocomplete.svelte.d.ts +0 -1
- package/dist/components/simple/common/Menu.svelte +1 -1
- package/dist/components/simple/forms/Autocomplete.svelte +2 -4
- package/dist/components/simple/forms/Autocomplete.svelte.d.ts +0 -1
- package/dist/components/simple/forms/TreeEditorItem.svelte +3 -0
- package/dist/components/simple/navigation/Drawer.svelte +91 -47
- package/dist/components/simple/navigation/Drawer.svelte.d.ts +1 -0
- package/package.json +1 -1
|
@@ -33,7 +33,6 @@ declare const __propDef: {
|
|
|
33
33
|
menuOpened?: boolean | undefined;
|
|
34
34
|
closeOnSelect?: boolean | undefined;
|
|
35
35
|
emptySearchTextOnMenuClose?: boolean | undefined;
|
|
36
|
-
emptySearchTextOnTextfieldBlur?: boolean | undefined;
|
|
37
36
|
menuBoxShadow?: string | undefined;
|
|
38
37
|
menuBorderRadius?: string | undefined;
|
|
39
38
|
mobileDrawer?: boolean | undefined;
|
|
@@ -62,7 +62,7 @@ function calculateMenuPosition(params) {
|
|
|
62
62
|
let { top: activatorTop } = params.activator.getBoundingClientRect();
|
|
63
63
|
_top = activatorTop + window.scrollY - _activatorGap - (menuElement?.offsetHeight || 0);
|
|
64
64
|
}
|
|
65
|
-
if (window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
|
|
65
|
+
if (anchor == "right-center" && window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
|
|
66
66
|
let { left: activatorLeft } = params.activator.getBoundingClientRect();
|
|
67
67
|
_left = activatorLeft + window.scrollX - _activatorGap - (menuElement?.offsetWidth || 0);
|
|
68
68
|
}
|
|
@@ -5,7 +5,7 @@ import "./Autocomplete.css";
|
|
|
5
5
|
import { scrollInMenu } from "../common/scroller";
|
|
6
6
|
let clazz = {};
|
|
7
7
|
export { clazz as class };
|
|
8
|
-
export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = !multiple, emptySearchTextOnMenuClose =
|
|
8
|
+
export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false;
|
|
9
9
|
let dispatch = createEventDispatcher();
|
|
10
10
|
function select(item) {
|
|
11
11
|
const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
|
|
@@ -73,8 +73,6 @@ function handleTextFieldFocus() {
|
|
|
73
73
|
openMenu();
|
|
74
74
|
}
|
|
75
75
|
function handleTextFieldBlur() {
|
|
76
|
-
if (emptySearchTextOnTextfieldBlur)
|
|
77
|
-
searchText = void 0;
|
|
78
76
|
}
|
|
79
77
|
let menuElement;
|
|
80
78
|
function handleKeyDown(event) {
|
|
@@ -134,7 +132,7 @@ $:
|
|
|
134
132
|
setTimeout(() => {
|
|
135
133
|
if (!menuOpened && emptySearchTextOnMenuClose)
|
|
136
134
|
searchText = void 0;
|
|
137
|
-
},
|
|
135
|
+
}, 10);
|
|
138
136
|
}
|
|
139
137
|
import Chip from "../navigation/Chip.svelte";
|
|
140
138
|
import Menu from "../common/Menu.svelte";
|
|
@@ -31,7 +31,6 @@ declare const __propDef: {
|
|
|
31
31
|
menuOpened?: boolean | undefined;
|
|
32
32
|
closeOnSelect?: boolean | undefined;
|
|
33
33
|
emptySearchTextOnMenuClose?: boolean | undefined;
|
|
34
|
-
emptySearchTextOnTextfieldBlur?: boolean | undefined;
|
|
35
34
|
menuBoxShadow?: string | undefined;
|
|
36
35
|
menuBorderRadius?: string | undefined;
|
|
37
36
|
mobileDrawer?: boolean | undefined;
|
|
@@ -21,11 +21,13 @@ function initSortable() {
|
|
|
21
21
|
ghostClass: "ghost-drag-element",
|
|
22
22
|
onEnd(ev) {
|
|
23
23
|
dispatch("end", { ev });
|
|
24
|
+
console.log("internal END");
|
|
24
25
|
},
|
|
25
26
|
onChange(ev) {
|
|
26
27
|
dispatch("change", { ev });
|
|
27
28
|
},
|
|
28
29
|
onUpdate(ev) {
|
|
30
|
+
console.log("internal Update");
|
|
29
31
|
}
|
|
30
32
|
});
|
|
31
33
|
}
|
|
@@ -121,6 +123,7 @@ function doUpdateItem(item, inputData) {
|
|
|
121
123
|
inputData: e.detail.inputData
|
|
122
124
|
})
|
|
123
125
|
}}
|
|
126
|
+
on:end
|
|
124
127
|
on:input
|
|
125
128
|
on:click
|
|
126
129
|
>
|
|
@@ -1,62 +1,108 @@
|
|
|
1
1
|
<script>import "../../../css/main.css";
|
|
2
2
|
import "./Drawer.css";
|
|
3
3
|
import Navigator from "./Navigator.svelte";
|
|
4
|
-
import { createEventDispatcher } from "svelte";
|
|
5
|
-
|
|
4
|
+
import { createEventDispatcher, onMount, beforeUpdate } from "svelte";
|
|
5
|
+
import Teleporter from "../../../utils/teleporter";
|
|
6
|
+
import Keyboarder, {} from "../../../utils/keyboarder";
|
|
7
|
+
import { BROWSER } from "esm-env";
|
|
8
|
+
export let open = false, position = "left", overlay = false, items = [], teleportedUid = void 0;
|
|
9
|
+
let drawerElement, localOpen = false;
|
|
6
10
|
const dispatch = createEventDispatcher();
|
|
11
|
+
onMount(() => {
|
|
12
|
+
if (!teleportedUid) {
|
|
13
|
+
let tp = new Teleporter();
|
|
14
|
+
teleportedUid = tp.attachNode(drawerElement);
|
|
15
|
+
}
|
|
16
|
+
let keyboarderHandler = (params) => {
|
|
17
|
+
if (params.key == "Escape" && open)
|
|
18
|
+
closeDrawer();
|
|
19
|
+
};
|
|
20
|
+
Keyboarder.on(keyboarderHandler);
|
|
21
|
+
return () => {
|
|
22
|
+
if (!!teleportedUid) {
|
|
23
|
+
let tp = new Teleporter();
|
|
24
|
+
tp.destroyNode(teleportedUid);
|
|
25
|
+
}
|
|
26
|
+
Keyboarder.off(keyboarderHandler);
|
|
27
|
+
};
|
|
28
|
+
});
|
|
29
|
+
function closeDrawer() {
|
|
30
|
+
open = false;
|
|
31
|
+
overlay = false;
|
|
32
|
+
dispatch("close", {});
|
|
33
|
+
}
|
|
7
34
|
function handleClickOverlay() {
|
|
8
35
|
open = false;
|
|
9
36
|
overlay = false;
|
|
10
|
-
dispatch("close");
|
|
37
|
+
dispatch("close", {});
|
|
11
38
|
}
|
|
12
|
-
|
|
13
|
-
|
|
39
|
+
let zIndex = 50;
|
|
40
|
+
beforeUpdate(() => {
|
|
41
|
+
if (BROWSER && open && localOpen !== open) {
|
|
42
|
+
let otherDialogs = document.querySelectorAll("[data-dialog]");
|
|
43
|
+
let maxZIndex = void 0;
|
|
44
|
+
if (otherDialogs.length > 0) {
|
|
45
|
+
otherDialogs.forEach((dialog) => {
|
|
46
|
+
let computedStyle = getComputedStyle(dialog);
|
|
47
|
+
if (!maxZIndex || maxZIndex < Number(computedStyle.zIndex))
|
|
48
|
+
maxZIndex = Number(computedStyle.zIndex);
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
zIndex = Math.max(maxZIndex || 0, zIndex - 2) + 2;
|
|
14
52
|
overlay = true;
|
|
53
|
+
localOpen = true;
|
|
54
|
+
} else if (BROWSER && !open && localOpen !== open) {
|
|
55
|
+
localOpen = false;
|
|
15
56
|
}
|
|
57
|
+
});
|
|
16
58
|
</script>
|
|
17
59
|
|
|
18
|
-
<div
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
60
|
+
<div class="drawer-container" bind:this={drawerElement} data-drawer={localOpen}>
|
|
61
|
+
<div
|
|
62
|
+
style:position="fixed"
|
|
63
|
+
class="drawer-container"
|
|
64
|
+
class:left={position == 'left'}
|
|
65
|
+
class:right={position == 'right'}
|
|
66
|
+
class:top={position == 'top'}
|
|
67
|
+
class:bottom={position == 'bottom'}
|
|
68
|
+
class:opened={localOpen}
|
|
69
|
+
class:animate-left={position == "left"}
|
|
70
|
+
class:animate-right={position == "right"}
|
|
71
|
+
class:animate-bottom={position == "bottom"}
|
|
72
|
+
class:animate-top={position == "top"}
|
|
73
|
+
style:z-index={zIndex + 1}
|
|
74
|
+
>
|
|
75
|
+
<slot open={localOpen}>
|
|
76
|
+
<div
|
|
77
|
+
style:display="flex"
|
|
78
|
+
style:justify-content="center"
|
|
79
|
+
style:align-items="center"
|
|
80
|
+
style:margin-top={position == "left" || position == "right"
|
|
81
|
+
? "10px"
|
|
82
|
+
: "0px"}
|
|
83
|
+
style:height={position == "top" || position == "bottom"
|
|
84
|
+
? "100%"
|
|
85
|
+
: "fit-content"}
|
|
86
|
+
>
|
|
87
|
+
<Navigator
|
|
88
|
+
{items}
|
|
89
|
+
vertical={position == "right" || position == "left"}
|
|
90
|
+
on:item-click
|
|
91
|
+
/>
|
|
92
|
+
</div>
|
|
93
|
+
</slot>
|
|
94
|
+
</div>
|
|
95
|
+
{#if overlay}
|
|
32
96
|
<div
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
: "fit-content"}
|
|
42
|
-
>
|
|
43
|
-
<Navigator
|
|
44
|
-
{items}
|
|
45
|
-
vertical={position == "right" || position == "left"}
|
|
46
|
-
on:item-click
|
|
47
|
-
/>
|
|
48
|
-
</div>
|
|
49
|
-
</slot>
|
|
97
|
+
on:click={handleClickOverlay}
|
|
98
|
+
on:keypress={handleClickOverlay}
|
|
99
|
+
class="overlay"
|
|
100
|
+
class:overlay-active={localOpen}
|
|
101
|
+
class:overlay-hidden={!localOpen}
|
|
102
|
+
style:z-index={zIndex}
|
|
103
|
+
/>
|
|
104
|
+
{/if}
|
|
50
105
|
</div>
|
|
51
|
-
{#if overlay}
|
|
52
|
-
<div
|
|
53
|
-
on:click={handleClickOverlay}
|
|
54
|
-
on:keypress={handleClickOverlay}
|
|
55
|
-
class="overlay"
|
|
56
|
-
class:overlay-active={open}
|
|
57
|
-
class:overlay-hidden={!open}
|
|
58
|
-
/>
|
|
59
|
-
{/if}
|
|
60
106
|
|
|
61
107
|
<style>
|
|
62
108
|
.animate-left {
|
|
@@ -76,7 +122,6 @@ $:
|
|
|
76
122
|
}
|
|
77
123
|
|
|
78
124
|
.drawer-container {
|
|
79
|
-
z-index: var(--drawer-z-index, var(--drawer-default-z-index));
|
|
80
125
|
background-color: var(
|
|
81
126
|
--drawer-background-color,
|
|
82
127
|
var(--drawer-default-background-color)
|
|
@@ -105,7 +150,6 @@ $:
|
|
|
105
150
|
--drawer-overlay-opacity,
|
|
106
151
|
var(--drawer-default-overlay-opacity)
|
|
107
152
|
);
|
|
108
|
-
z-index: calc(var(--drawer-z-index, var(--drawer-default-z-index)) - 1);
|
|
109
153
|
}
|
|
110
154
|
|
|
111
155
|
.overlay-hidden {
|