@likable-hair/svelte 3.0.12 → 3.0.15

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.
Files changed (9) hide show
  1. package/dist/components/simple/dialogs/Dialog.svelte.d.ts +1 -1
  2. package/dist/components/simple/forms/SimpleTextField.svelte +6 -1
  3. package/dist/components/simple/forms/SimpleTextField.svelte.d.ts +1 -0
  4. package/dist/components/simple/navigation/TabSwitcher.css +7 -0
  5. package/dist/components/simple/navigation/TabSwitcher.svelte +44 -22
  6. package/dist/components/simple/navigation/TabSwitcher.svelte.d.ts +8 -5
  7. package/dist/index.d.ts +1 -0
  8. package/dist/index.js +1 -0
  9. package/package.json +1 -143
package/dist/components/simple/dialogs/Dialog.svelte.d.ts CHANGED
@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
4
  open?: boolean | undefined;
5
- transition?: "fly-down" | "fly-up" | "fly-horizontal" | "scale" | "fade" | undefined;
5
+ transition?: "scale" | "fly-down" | "fly-up" | "fly-horizontal" | "fade" | undefined;
6
6
  _overlayOpacity?: string | undefined;
7
7
  _overlayColor?: string | undefined;
8
8
  _overlayBackdropFilter?: string | undefined;
package/dist/components/simple/forms/SimpleTextField.svelte CHANGED
@@ -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
  />
package/dist/components/simple/forms/SimpleTextField.svelte.d.ts CHANGED
@@ -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
  };
package/dist/components/simple/navigation/TabSwitcher.css ADDED
@@ -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
+ }
package/dist/components/simple/navigation/TabSwitcher.svelte CHANGED
@@ -1,7 +1,10 @@
1
1
  <script context="module"></script>
2
2
 
3
3
  <script>import { afterUpdate, onMount } from "svelte";
4
- export let tabs = [], selected = void 0, mandatory = true, width = void 0, color = "rgb(51 65 85)", bookmarkColor = void 0, horizontalGuideColor = "rgb(51 65 85)", margin = "12px";
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
- style:position="relative"
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
- style:--tab-switcher-bookmark-color={bookmarkColor || color}
82
- class="bookmark"
73
+ class="{clazz.bookmark || ''} bookmark"
83
74
  />
84
75
  <span
85
- style:--tab-switcher-horizontal-guide-color={horizontalGuideColor || color}
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(--tab-switcher-color, rgb(51 65 85));
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(--tab-switcher-horizontal-guide-color, rgb(51 65 85));
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, rgb(51 65 85))
135
+ var(--tab-switcher-default-bookmark-color)
114
136
  );
115
137
  transition: left 400ms, width 400ms;
116
138
  }
package/dist/components/simple/navigation/TabSwitcher.svelte.d.ts CHANGED
@@ -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<{
package/dist/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export { default as Calendar } from './components/simple/dates/Calendar.svelte';
10
10
  export { default as DatePicker } from './components/simple/dates/DatePicker.svelte';
11
11
  export { default as MonthSelector } from './components/simple/dates/MonthSelector.svelte';
12
12
  export { default as TimePickerTextField } from './components/simple/dates/TimePickerTextField.svelte';
13
+ export { default as DatePickerTextField } from './components/simple/dates/DatePickerTextField.svelte';
13
14
  export { default as YearSelector } from './components/simple/dates/YearSelector.svelte';
14
15
  export { default as Dialog } from './components/simple/dialogs/Dialog.svelte';
15
16
  export { default as Autocomplete } from './components/simple/forms/Autocomplete.svelte';
package/dist/index.js CHANGED
@@ -10,6 +10,7 @@ export { default as Calendar } from './components/simple/dates/Calendar.svelte';
10
10
  export { default as DatePicker } from './components/simple/dates/DatePicker.svelte';
11
11
  export { default as MonthSelector } from './components/simple/dates/MonthSelector.svelte';
12
12
  export { default as TimePickerTextField } from './components/simple/dates/TimePickerTextField.svelte';
13
+ export { default as DatePickerTextField } from './components/simple/dates/DatePickerTextField.svelte';
13
14
  export { default as YearSelector } from './components/simple/dates/YearSelector.svelte';
14
15
  export { default as Dialog } from './components/simple/dialogs/Dialog.svelte';
15
16
  export { default as Autocomplete } from './components/simple/forms/Autocomplete.svelte';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@likable-hair/svelte",
3
3
  "description": "A Svelte component for likablehair",
4
- "version": "3.0.12",
4
+ "version": "3.0.15",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
7
7
  "build": "vite build && npm run package",
@@ -63,147 +63,5 @@
63
63
  "imask": "^7.1.0-alpha.0",
64
64
  "lodash": "^4.17.21",
65
65
  "luxon": "^3.3.0"
66
- },
67
- "typesVersions": {
68
- ">4.0": {
69
- "buttons/Button.svelte": [
70
- "./package/buttons/Button.svelte.d.ts"
71
- ],
72
- "common/Card.svelte": [
73
- "./package/common/Card.svelte.d.ts"
74
- ],
75
- "common/Gesture.svelte": [
76
- "./package/common/Gesture.svelte.d.ts"
77
- ],
78
- "common/IntersectionObserver.svelte": [
79
- "./package/common/IntersectionObserver.svelte.d.ts"
80
- ],
81
- "common/MediaQuery.svelte": [
82
- "./package/common/MediaQuery.svelte.d.ts"
83
- ],
84
- "common/Menu.svelte": [
85
- "./package/common/Menu.svelte.d.ts"
86
- ],
87
- "common/SimpleTable.svelte": [
88
- "./package/common/SimpleTable.svelte.d.ts"
89
- ],
90
- "common/scroller": [
91
- "./package/common/scroller.d.ts"
92
- ],
93
- "dates/Calendar.svelte": [
94
- "./package/dates/Calendar.svelte.d.ts"
95
- ],
96
- "dates/DatePicker.svelte": [
97
- "./package/dates/DatePicker.svelte.d.ts"
98
- ],
99
- "dates/MonthSelector.svelte": [
100
- "./package/dates/MonthSelector.svelte.d.ts"
101
- ],
102
- "dates/TimePickerTextField.svelte": [
103
- "./package/dates/TimePickerTextField.svelte.d.ts"
104
- ],
105
- "dates/YearSelector.svelte": [
106
- "./package/dates/YearSelector.svelte.d.ts"
107
- ],
108
- "dates/utils": [
109
- "./package/dates/utils.d.ts"
110
- ],
111
- "dialogs/Dialog.svelte": [
112
- "./package/dialogs/Dialog.svelte.d.ts"
113
- ],
114
- "forms/Autocomplete.svelte": [
115
- "./package/forms/Autocomplete.svelte.d.ts"
116
- ],
117
- "forms/Checkbox.svelte": [
118
- "./package/forms/Checkbox.svelte.d.ts"
119
- ],
120
- "forms/FileInput.svelte": [
121
- "./package/forms/FileInput.svelte.d.ts"
122
- ],
123
- "forms/FileInputList.svelte": [
124
- "./package/forms/FileInputList.svelte.d.ts"
125
- ],
126
- "forms/Switch.svelte": [
127
- "./package/forms/Switch.svelte.d.ts"
128
- ],
129
- "forms/Textarea.svelte": [
130
- "./package/forms/Textarea.svelte.d.ts"
131
- ],
132
- "forms/Textfield.svelte": [
133
- "./package/forms/Textfield.svelte.d.ts"
134
- ],
135
- "forms/VerticalSwitch.svelte": [
136
- "./package/forms/VerticalSwitch.svelte.d.ts"
137
- ],
138
- "forms/VerticalTextSwitch.svelte": [
139
- "./package/forms/VerticalTextSwitch.svelte.d.ts"
140
- ],
141
- "loaders/CircularLoader.svelte": [
142
- "./package/loaders/CircularLoader.svelte.d.ts"
143
- ],
144
- "loaders/Skeleton.svelte": [
145
- "./package/loaders/Skeleton.svelte.d.ts"
146
- ],
147
- "loaders/sectionType": [
148
- "./package/loaders/sectionType.d.ts"
149
- ],
150
- "media/AttachmentDownloader.svelte": [
151
- "./package/media/AttachmentDownloader.svelte.d.ts"
152
- ],
153
- "media/Avatar.svelte": [
154
- "./package/media/Avatar.svelte.d.ts"
155
- ],
156
- "media/Carousel.svelte": [
157
- "./package/media/Carousel.svelte.d.ts"
158
- ],
159
- "media/DescriptiveAvatar.svelte": [
160
- "./package/media/DescriptiveAvatar.svelte.d.ts"
161
- ],
162
- "media/Gallery.svelte": [
163
- "./package/media/Gallery.svelte.d.ts"
164
- ],
165
- "media/Icon.svelte": [
166
- "./package/media/Icon.svelte.d.ts"
167
- ],
168
- "media/Image.svelte": [
169
- "./package/media/Image.svelte.d.ts"
170
- ],
171
- "media/ImageGrid.svelte": [
172
- "./package/media/ImageGrid.svelte.d.ts"
173
- ],
174
- "navigation/Breadcrumb.svelte": [
175
- "./package/navigation/Breadcrumb.svelte.d.ts"
176
- ],
177
- "navigation/Chip.svelte": [
178
- "./package/navigation/Chip.svelte.d.ts"
179
- ],
180
- "navigation/Drawer.svelte": [
181
- "./package/navigation/Drawer.svelte.d.ts"
182
- ],
183
- "navigation/HeaderMenu.svelte": [
184
- "./package/navigation/HeaderMenu.svelte.d.ts"
185
- ],
186
- "navigation/Navigator.svelte": [
187
- "./package/navigation/Navigator.svelte.d.ts"
188
- ],
189
- "navigation/TabSwitcher.svelte": [
190
- "./package/navigation/TabSwitcher.svelte.d.ts"
191
- ],
192
- "progress/ProgressBar.svelte": [
193
- "./package/progress/ProgressBar.svelte.d.ts"
194
- ],
195
- "shop/ProductCard.svelte": [
196
- "./package/shop/ProductCard.svelte.d.ts"
197
- ],
198
- "shop/ProductsGrid.svelte": [
199
- "./package/shop/ProductsGrid.svelte.d.ts"
200
- ],
201
- "stores/mediaQuery": [
202
- "./package/stores/mediaQuery.d.ts"
203
- ],
204
- "timeline/SimpleTimeLine.svelte": [
205
- "./package/timeline/SimpleTimeLine.svelte.d.ts"
206
- ]
207
- }
208
66
  }
209
67
  }