@likable-hair/svelte 3.0.11 → 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/layouts/CollapsibleSideBarLayout.svelte +1 -0
- package/dist/components/simple/forms/SimpleTextField.svelte +47 -1
- package/dist/components/simple/forms/SimpleTextField.svelte.d.ts +2 -1
- 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
|
@@ -144,6 +144,7 @@ function handleCollpsabledDividerChange() {
|
|
|
144
144
|
transition-property: width padding-left;
|
|
145
145
|
transition-timing-function: cubic-bezier(.4,0,.2,1);
|
|
146
146
|
transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
|
|
147
|
+
overflow: hidden;
|
|
147
148
|
}
|
|
148
149
|
|
|
149
150
|
.logo-container.collapsed {
|
|
@@ -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,45 @@ 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}
|
|
78
|
+
class={clazz.input || ''}
|
|
79
|
+
bind:this={input}
|
|
80
|
+
/>
|
|
81
|
+
{:else if type == "time"}
|
|
82
|
+
<input
|
|
83
|
+
bind:value={value}
|
|
84
|
+
placeholder={placeholder}
|
|
85
|
+
type="time"
|
|
86
|
+
disabled={disabled}
|
|
87
|
+
readonly={readonly}
|
|
88
|
+
on:change
|
|
89
|
+
on:input
|
|
90
|
+
on:focus
|
|
91
|
+
on:blur
|
|
92
|
+
on:keydown
|
|
93
|
+
on:keypress
|
|
94
|
+
on:keyup
|
|
95
|
+
on:change
|
|
96
|
+
name={name}
|
|
97
|
+
class={clazz.input || ''}
|
|
98
|
+
bind:this={input}
|
|
99
|
+
/>
|
|
100
|
+
{:else if type == "date"}
|
|
101
|
+
<input
|
|
102
|
+
bind:value={value}
|
|
103
|
+
placeholder={placeholder}
|
|
104
|
+
type="date"
|
|
105
|
+
disabled={disabled}
|
|
106
|
+
readonly={readonly}
|
|
107
|
+
on:change
|
|
108
|
+
on:input
|
|
109
|
+
on:focus
|
|
110
|
+
on:blur
|
|
111
|
+
on:keydown
|
|
112
|
+
on:keypress
|
|
113
|
+
on:keyup
|
|
114
|
+
on:change
|
|
115
|
+
name={name}
|
|
75
116
|
class={clazz.input || ''}
|
|
76
117
|
bind:this={input}
|
|
77
118
|
/>
|
|
@@ -217,4 +258,9 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
|
|
|
217
258
|
);
|
|
218
259
|
border: none
|
|
219
260
|
}
|
|
261
|
+
|
|
262
|
+
::-webkit-calendar-picker-indicator {
|
|
263
|
+
opacity: 0;
|
|
264
|
+
}
|
|
265
|
+
|
|
220
266
|
</style>
|
|
@@ -11,7 +11,7 @@ declare const __propDef: {
|
|
|
11
11
|
input?: string | undefined;
|
|
12
12
|
} | undefined;
|
|
13
13
|
value?: string | number | undefined;
|
|
14
|
-
type?: "number" | "text" | "password" | undefined;
|
|
14
|
+
type?: "number" | "text" | "time" | "date" | "password" | undefined;
|
|
15
15
|
placeholder?: string | undefined;
|
|
16
16
|
disabled?: boolean | undefined;
|
|
17
17
|
readonly?: boolean | undefined;
|
|
@@ -20,6 +20,7 @@ declare const __propDef: {
|
|
|
20
20
|
prependIcon?: string | undefined;
|
|
21
21
|
prependInnerIcon?: string | undefined;
|
|
22
22
|
iconSize?: string | undefined;
|
|
23
|
+
name?: string | undefined;
|
|
23
24
|
hint?: string | undefined;
|
|
24
25
|
input?: HTMLElement | undefined;
|
|
25
26
|
};
|
|
@@ -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<{
|