@likable-hair/svelte 4.0.10 → 4.0.11
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.
|
@@ -3,24 +3,15 @@
|
|
|
3
3
|
|
|
4
4
|
<script lang="ts">import { onMount } from "svelte";
|
|
5
5
|
import './TabSwitcher.css';
|
|
6
|
-
import { BROWSER } from 'esm-env';
|
|
7
6
|
import Icon from "../media/Icon.svelte";
|
|
8
|
-
let { tabs = [], selected = $bindable(undefined), mandatory = true, class: clazz = {}, ontabClick,
|
|
7
|
+
let { tabs = [], selected = $bindable(undefined), mandatory = true, class: clazz = {}, ontabClick, appendSnippet, } = $props();
|
|
9
8
|
let tabButtons = {};
|
|
10
9
|
onMount(() => {
|
|
11
10
|
if (mandatory && !selected && tabs.length > 0)
|
|
12
11
|
selected = tabs[0].name;
|
|
13
|
-
if (selected) {
|
|
14
|
-
setBookmarkPosition();
|
|
15
|
-
}
|
|
16
|
-
});
|
|
17
|
-
$effect(() => {
|
|
18
|
-
setBookmarkPosition();
|
|
19
12
|
});
|
|
20
|
-
let bookmarkWidth = $state(0), bookmarkLeft = $state(0);
|
|
21
13
|
function handleTabClick(clickedTab, nativeEvent) {
|
|
22
14
|
selected = clickedTab.name;
|
|
23
|
-
setBookmarkPosition();
|
|
24
15
|
if (ontabClick) {
|
|
25
16
|
ontabClick({
|
|
26
17
|
detail: {
|
|
@@ -30,50 +21,23 @@ function handleTabClick(clickedTab, nativeEvent) {
|
|
|
30
21
|
});
|
|
31
22
|
}
|
|
32
23
|
}
|
|
33
|
-
function handleTabKeypress(clickedTab, nativeEvent) {
|
|
34
|
-
selected = clickedTab.name;
|
|
35
|
-
setBookmarkPosition();
|
|
36
|
-
if (ontabKeypress) {
|
|
37
|
-
ontabKeypress({
|
|
38
|
-
detail: {
|
|
39
|
-
nativeEvent,
|
|
40
|
-
tab: clickedTab
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
function setBookmarkPosition() {
|
|
46
|
-
if (BROWSER) {
|
|
47
|
-
let tabButton = selected
|
|
48
|
-
? tabButtons[selected]
|
|
49
|
-
: undefined;
|
|
50
|
-
if (tabButton) {
|
|
51
|
-
bookmarkWidth = tabButton.offsetWidth - 10;
|
|
52
|
-
bookmarkLeft = tabButton.offsetLeft + 5;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
$effect(() => { if (!!selected)
|
|
57
|
-
setBookmarkPosition(); });
|
|
58
24
|
</script>
|
|
59
25
|
|
|
60
26
|
<div
|
|
61
27
|
class="{clazz.container || ''} tabs-container"
|
|
62
28
|
>
|
|
63
29
|
{#each tabs as tab}
|
|
64
|
-
<
|
|
65
|
-
role="presentation"
|
|
30
|
+
<button
|
|
66
31
|
class:selected-tab={tab.name == selected}
|
|
67
32
|
class="tab-label {clazz.tabs || ''} {tab.name == selected ? clazz.selected || '' : ''}"
|
|
68
33
|
onclick={(event) => handleTabClick(tab, event)}
|
|
69
|
-
onkeypress={(event) => handleTabKeypress(tab, event)}
|
|
70
34
|
bind:this={tabButtons[tab.name]}
|
|
71
35
|
>
|
|
72
36
|
{#if !!tab.icon}
|
|
73
37
|
<Icon name={tab.icon}></Icon>
|
|
74
38
|
{/if}
|
|
75
39
|
{tab.label}
|
|
76
|
-
</
|
|
40
|
+
</button>
|
|
77
41
|
{/each}
|
|
78
42
|
{#if appendSnippet}
|
|
79
43
|
<div
|
|
@@ -84,11 +48,6 @@ $effect(() => { if (!!selected)
|
|
|
84
48
|
{@render appendSnippet()}
|
|
85
49
|
</div>
|
|
86
50
|
{/if}
|
|
87
|
-
<span
|
|
88
|
-
style:left={bookmarkLeft + "px"}
|
|
89
|
-
style:width={bookmarkWidth + "px"}
|
|
90
|
-
class="{clazz.bookmark || ''} bookmark"
|
|
91
|
-
></span>
|
|
92
51
|
<span
|
|
93
52
|
class="{clazz.guide || ''} horizontal-guide"
|
|
94
53
|
></span>
|
|
@@ -110,6 +69,21 @@ $effect(() => { if (!!selected)
|
|
|
110
69
|
);
|
|
111
70
|
}
|
|
112
71
|
|
|
72
|
+
button {
|
|
73
|
+
background: none;
|
|
74
|
+
border: none;
|
|
75
|
+
padding: 0;
|
|
76
|
+
margin: 0;
|
|
77
|
+
color: inherit;
|
|
78
|
+
font: inherit;
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
outline: none;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
button:focus {
|
|
84
|
+
outline: none;
|
|
85
|
+
}
|
|
86
|
+
|
|
113
87
|
.selected-tab {
|
|
114
88
|
color: var(
|
|
115
89
|
--tab-switcher-selected-color,
|
|
@@ -117,9 +91,21 @@ $effect(() => { if (!!selected)
|
|
|
117
91
|
);
|
|
118
92
|
}
|
|
119
93
|
|
|
94
|
+
.selected-tab::after {
|
|
95
|
+
content: '';
|
|
96
|
+
position: absolute;
|
|
97
|
+
bottom: 0px;
|
|
98
|
+
left: 0px;
|
|
99
|
+
right: 0px;
|
|
100
|
+
height: 2px;
|
|
101
|
+
background-color: var(
|
|
102
|
+
--tab-switcher-bookmark-color,
|
|
103
|
+
var(--tab-switcher-default-bookmark-color)
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
|
|
120
107
|
.horizontal-guide {
|
|
121
108
|
position: absolute;
|
|
122
|
-
z-index: 5;
|
|
123
109
|
bottom: 0px;
|
|
124
110
|
height: 1px;
|
|
125
111
|
background-color: var(
|
|
@@ -139,18 +125,6 @@ $effect(() => { if (!!selected)
|
|
|
139
125
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
140
126
|
cursor: pointer;
|
|
141
127
|
padding: 8px;
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
.bookmark {
|
|
145
|
-
position: absolute;
|
|
146
|
-
bottom: 0px;
|
|
147
|
-
height: 2px;
|
|
148
|
-
border-radius: 0.125rem;
|
|
149
|
-
z-index: 10;
|
|
150
|
-
background-color: var(
|
|
151
|
-
--tab-switcher-bookmark-color,
|
|
152
|
-
var(--tab-switcher-default-bookmark-color)
|
|
153
|
-
);
|
|
154
|
-
transition: left 400ms, width 400ms;
|
|
128
|
+
position: relative;
|
|
155
129
|
}
|
|
156
130
|
</style>
|