@likable-hair/svelte 3.0.12 → 3.0.14
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/simple/forms/SimpleTextField.svelte +6 -1
- package/dist/components/simple/forms/SimpleTextField.svelte.d.ts +1 -0
- package/dist/components/simple/navigation/TabSwitcher.css +7 -0
- package/dist/components/simple/navigation/TabSwitcher.svelte +44 -22
- package/dist/components/simple/navigation/TabSwitcher.svelte.d.ts +8 -5
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import "./SimpleTextField.css";
|
|
|
3
3
|
import Icon from "../media/Icon.svelte";
|
|
4
4
|
let clazz = {};
|
|
5
5
|
export { clazz as class };
|
|
6
|
-
export let value = void 0, type = "text", placeholder = void 0, disabled = false, readonly = false, appendIcon = void 0, appendInnerIcon = void 0, prependIcon = void 0, prependInnerIcon = void 0, iconSize = "12pt", hint = void 0, input = void 0;
|
|
6
|
+
export let value = void 0, type = "text", placeholder = void 0, disabled = false, readonly = false, appendIcon = void 0, appendInnerIcon = void 0, prependIcon = void 0, prependInnerIcon = void 0, iconSize = "12pt", name = void 0, hint = void 0, input = void 0;
|
|
7
7
|
</script>
|
|
8
8
|
|
|
9
9
|
<div
|
|
@@ -36,6 +36,7 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
|
|
|
36
36
|
on:keypress
|
|
37
37
|
on:keyup
|
|
38
38
|
on:change
|
|
39
|
+
name={name}
|
|
39
40
|
class={clazz.input || ''}
|
|
40
41
|
bind:this={input}
|
|
41
42
|
/>
|
|
@@ -54,6 +55,7 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
|
|
|
54
55
|
on:keypress
|
|
55
56
|
on:keyup
|
|
56
57
|
on:change
|
|
58
|
+
name={name}
|
|
57
59
|
class={clazz.input || ''}
|
|
58
60
|
bind:this={input}
|
|
59
61
|
/>
|
|
@@ -72,6 +74,7 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
|
|
|
72
74
|
on:keypress
|
|
73
75
|
on:keyup
|
|
74
76
|
on:change
|
|
77
|
+
name={name}
|
|
75
78
|
class={clazz.input || ''}
|
|
76
79
|
bind:this={input}
|
|
77
80
|
/>
|
|
@@ -90,6 +93,7 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
|
|
|
90
93
|
on:keypress
|
|
91
94
|
on:keyup
|
|
92
95
|
on:change
|
|
96
|
+
name={name}
|
|
93
97
|
class={clazz.input || ''}
|
|
94
98
|
bind:this={input}
|
|
95
99
|
/>
|
|
@@ -108,6 +112,7 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
|
|
|
108
112
|
on:keypress
|
|
109
113
|
on:keyup
|
|
110
114
|
on:change
|
|
115
|
+
name={name}
|
|
111
116
|
class={clazz.input || ''}
|
|
112
117
|
bind:this={input}
|
|
113
118
|
/>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--tab-switcher-default-selected-color: rgb(var(--global-color-primary-400));
|
|
3
|
+
--tab-switcher-default-guide-color: rgb(var(--global-color-contrast-200));
|
|
4
|
+
--tab-switcher-default-bookmark-color: rgb(var(--global-color-primary-400));
|
|
5
|
+
--tab-switcher-default-gap: 1rem;
|
|
6
|
+
--tab-switcher-default-width: 100%;
|
|
7
|
+
}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
<script context="module"></script>
|
|
2
2
|
|
|
3
3
|
<script>import { afterUpdate, onMount } from "svelte";
|
|
4
|
-
|
|
4
|
+
import "./TabSwitcher.css";
|
|
5
|
+
let clazz = {};
|
|
6
|
+
export { clazz as class };
|
|
7
|
+
export let tabs = [], selected = void 0, mandatory = true;
|
|
5
8
|
let tabButtons = {};
|
|
6
9
|
onMount(() => {
|
|
7
10
|
if (mandatory && !selected && tabs.length > 0)
|
|
@@ -42,23 +45,12 @@ function setBookmarkPosition() {
|
|
|
42
45
|
</script>
|
|
43
46
|
|
|
44
47
|
<div
|
|
45
|
-
|
|
46
|
-
style:display="flex"
|
|
47
|
-
style:flex-wrap="nowrap"
|
|
48
|
-
style:overflow="auto"
|
|
49
|
-
style:width
|
|
48
|
+
class="{clazz.container || ''} tabs-container"
|
|
50
49
|
>
|
|
51
50
|
{#each tabs as tab}
|
|
52
51
|
<div
|
|
53
|
-
style:word-break="keep-all"
|
|
54
|
-
style:white-spaces="nowrap"
|
|
55
|
-
style:-webkit-tap-highlight-color="rgba(0,0,0,0)"
|
|
56
|
-
style:cursor="pointer"
|
|
57
|
-
style:margin-left={margin}
|
|
58
|
-
style:margin-right={margin}
|
|
59
|
-
style:padding="8px"
|
|
60
|
-
style:--tab-switcher-color={color}
|
|
61
52
|
class:selected-tab={tab.name == selected}
|
|
53
|
+
class="tab-label {clazz.tabs || ''} {tab.name == selected ? clazz.selected || '' : ''}"
|
|
62
54
|
on:click={(event) => handleTabClick(tab, event)}
|
|
63
55
|
on:keypress={(event) => handleTabKeypress(tab, event)}
|
|
64
56
|
bind:this={tabButtons[tab.name]}
|
|
@@ -78,19 +70,34 @@ function setBookmarkPosition() {
|
|
|
78
70
|
<span
|
|
79
71
|
style:left={bookmarkLeft + "px"}
|
|
80
72
|
style:width={bookmarkWidth + "px"}
|
|
81
|
-
|
|
82
|
-
class="bookmark"
|
|
73
|
+
class="{clazz.bookmark || ''} bookmark"
|
|
83
74
|
/>
|
|
84
75
|
<span
|
|
85
|
-
|
|
86
|
-
style:width
|
|
87
|
-
class="horizontal-guide"
|
|
76
|
+
class="{clazz.guide || ''} horizontal-guide"
|
|
88
77
|
/>
|
|
89
78
|
</div>
|
|
90
79
|
|
|
91
80
|
<style>
|
|
81
|
+
.tabs-container {
|
|
82
|
+
position: relative;
|
|
83
|
+
display: flex;
|
|
84
|
+
flex-wrap: nowrap;
|
|
85
|
+
overflow: auto;
|
|
86
|
+
gap: var(
|
|
87
|
+
--tab-switcher-gap,
|
|
88
|
+
var(--tab-switcher-default-gap)
|
|
89
|
+
);
|
|
90
|
+
width: var(
|
|
91
|
+
--tab-switcher-width,
|
|
92
|
+
var(--tab-switcher-default-width)
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
|
|
92
96
|
.selected-tab {
|
|
93
|
-
color: var(
|
|
97
|
+
color: var(
|
|
98
|
+
--tab-switcher-selected-color,
|
|
99
|
+
var(--tab-switcher-default-selected-color)
|
|
100
|
+
);
|
|
94
101
|
}
|
|
95
102
|
|
|
96
103
|
.horizontal-guide {
|
|
@@ -98,8 +105,23 @@ function setBookmarkPosition() {
|
|
|
98
105
|
z-index: 5;
|
|
99
106
|
bottom: 0px;
|
|
100
107
|
height: 1px;
|
|
101
|
-
background-color: var(
|
|
108
|
+
background-color: var(
|
|
109
|
+
--tab-switcher-guide-color,
|
|
110
|
+
var(--tab-switcher-default-guide-color)
|
|
111
|
+
);
|
|
102
112
|
opacity: 20%;
|
|
113
|
+
width: var(
|
|
114
|
+
--tab-switcher-width,
|
|
115
|
+
var(--tab-switcher-default-width)
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.tab-label {
|
|
120
|
+
word-break: keep-all;
|
|
121
|
+
white-space: nowrap;
|
|
122
|
+
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
123
|
+
cursor: pointer;
|
|
124
|
+
padding: 8px;
|
|
103
125
|
}
|
|
104
126
|
|
|
105
127
|
.bookmark {
|
|
@@ -110,7 +132,7 @@ function setBookmarkPosition() {
|
|
|
110
132
|
z-index: 10;
|
|
111
133
|
background-color: var(
|
|
112
134
|
--tab-switcher-bookmark-color,
|
|
113
|
-
var(--tab-switcher-color
|
|
135
|
+
var(--tab-switcher-default-bookmark-color)
|
|
114
136
|
);
|
|
115
137
|
transition: left 400ms, width 400ms;
|
|
116
138
|
}
|
|
@@ -4,16 +4,19 @@ export type Tab = {
|
|
|
4
4
|
label: string;
|
|
5
5
|
icon?: string;
|
|
6
6
|
};
|
|
7
|
+
import './TabSwitcher.css';
|
|
7
8
|
declare const __propDef: {
|
|
8
9
|
props: {
|
|
10
|
+
class?: {
|
|
11
|
+
container?: string | undefined;
|
|
12
|
+
tabs?: string | undefined;
|
|
13
|
+
selected?: string | undefined;
|
|
14
|
+
bookmark?: string | undefined;
|
|
15
|
+
guide?: string | undefined;
|
|
16
|
+
} | undefined;
|
|
9
17
|
tabs?: Tab[] | undefined;
|
|
10
18
|
selected?: string | undefined;
|
|
11
19
|
mandatory?: boolean | undefined;
|
|
12
|
-
width?: string | undefined;
|
|
13
|
-
color?: string | undefined;
|
|
14
|
-
bookmarkColor?: string | undefined;
|
|
15
|
-
horizontalGuideColor?: string | undefined;
|
|
16
|
-
margin?: string | undefined;
|
|
17
20
|
};
|
|
18
21
|
events: {
|
|
19
22
|
"tab-click": CustomEvent<{
|