@likable-hair/svelte 3.1.8 → 3.1.10
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.
|
@@ -8,6 +8,8 @@ export { clazz as class };
|
|
|
8
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, menuWidth = void 0;
|
|
9
9
|
let dispatch = createEventDispatcher();
|
|
10
10
|
function select(item) {
|
|
11
|
+
if (disabled)
|
|
12
|
+
return;
|
|
11
13
|
const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
|
|
12
14
|
if (!alreadyPresent) {
|
|
13
15
|
if (multiple)
|
|
@@ -25,6 +27,8 @@ function select(item) {
|
|
|
25
27
|
menuOpened = false;
|
|
26
28
|
}
|
|
27
29
|
function unselect(item) {
|
|
30
|
+
if (disabled)
|
|
31
|
+
return;
|
|
28
32
|
if (values.length == 1 && mandatory)
|
|
29
33
|
return;
|
|
30
34
|
values = values.filter((i) => i.value != item.value);
|
|
@@ -72,6 +76,8 @@ function refreshMenuWidth() {
|
|
|
72
76
|
}
|
|
73
77
|
let activator, focusedIndex = void 0;
|
|
74
78
|
function handleTextFieldFocus() {
|
|
79
|
+
if (disabled)
|
|
80
|
+
return;
|
|
75
81
|
focusedIndex = void 0;
|
|
76
82
|
openMenu();
|
|
77
83
|
}
|
|
@@ -79,6 +85,8 @@ function handleTextFieldBlur() {
|
|
|
79
85
|
}
|
|
80
86
|
let menuElement;
|
|
81
87
|
function handleKeyDown(event) {
|
|
88
|
+
if (disabled)
|
|
89
|
+
return;
|
|
82
90
|
if (event.key == "ArrowDown" && (focusedIndex === void 0 || focusedIndex < filteredItems.length - 1)) {
|
|
83
91
|
if (focusedIndex === void 0)
|
|
84
92
|
focusedIndex = 0;
|
|
@@ -107,6 +115,8 @@ function handleKeyDown(event) {
|
|
|
107
115
|
}
|
|
108
116
|
let input;
|
|
109
117
|
function handleContainerClick() {
|
|
118
|
+
if (disabled)
|
|
119
|
+
return;
|
|
110
120
|
if (!menuOpened) {
|
|
111
121
|
if (!!input)
|
|
112
122
|
input.focus();
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
--checkbox-default-active-inner-color: rgb(var(--global-color-grey-50));
|
|
4
4
|
--checkbox-default-focus-shadow: 2px rgb(var(--global-color-primary-500), .3);
|
|
5
5
|
--checkbox-default-border-color: rgb(var(--global-color-contrast-300), .2);
|
|
6
|
-
--checkbox-default-border-hover-color:
|
|
6
|
+
--checkbox-default-border-hover-color: rgb(var(--global-color-primary-500));
|
|
7
7
|
--checkbox-default-background-color: rgb(var(--global-color-background-200));
|
|
8
8
|
--checkbox-default-disabled-color: rgb(var(--global-color-background-200), .5);
|
|
9
9
|
--checkbox-default-disabled-active-color: rgb(var(--global-color-primary-500));
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<script>import { afterUpdate, onMount } from "svelte";
|
|
4
4
|
import "./TabSwitcher.css";
|
|
5
|
+
import { BROWSER } from "esm-env";
|
|
5
6
|
let clazz = {};
|
|
6
7
|
export { clazz as class };
|
|
7
8
|
export let tabs = [], selected = void 0, mandatory = true;
|
|
@@ -37,12 +38,17 @@ function handleTabKeypress(clickedTab, nativeEvent) {
|
|
|
37
38
|
});
|
|
38
39
|
}
|
|
39
40
|
function setBookmarkPosition() {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
if (BROWSER) {
|
|
42
|
+
let tabButton = selected ? tabButtons[selected] : void 0;
|
|
43
|
+
if (tabButton) {
|
|
44
|
+
bookmarkWidth = tabButton.offsetWidth - 10;
|
|
45
|
+
bookmarkLeft = tabButton.offsetLeft + 5;
|
|
46
|
+
}
|
|
44
47
|
}
|
|
45
48
|
}
|
|
49
|
+
$:
|
|
50
|
+
if (!!selected)
|
|
51
|
+
setBookmarkPosition();
|
|
46
52
|
</script>
|
|
47
53
|
|
|
48
54
|
<div
|
|
@@ -50,6 +56,7 @@ function setBookmarkPosition() {
|
|
|
50
56
|
>
|
|
51
57
|
{#each tabs as tab}
|
|
52
58
|
<div
|
|
59
|
+
role="presentation"
|
|
53
60
|
class:selected-tab={tab.name == selected}
|
|
54
61
|
class="tab-label {clazz.tabs || ''} {tab.name == selected ? clazz.selected || '' : ''}"
|
|
55
62
|
on:click={(event) => handleTabClick(tab, event)}
|