@likable-hair/svelte 3.3.6 → 3.3.8

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.
@@ -61,10 +61,12 @@ const [send, receive] = crossfade({
61
61
  let clazz = {};
62
62
  export { clazz as class };
63
63
  const dispatch = createEventDispatcher();
64
- export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], hasMoreToLoad = false, totalRows = rows.length, searchText = void 0, renderedRowsNumber = 100, sectionRowsNumber = 100, sectionTreshold = sectionRowsNumber, backwardTresholdPixel = 100, forwardTresholdPixel = 100;
65
- let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, renderedRows = rows.slice(currentSectionNumber * sectionRowsNumber, currentSectionNumber * sectionRowsNumber + renderedRowsNumber), userScrolling = true;
64
+ export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], hasMoreToLoad = false, totalRows = rows.length, searchText = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionTreshold = 2, backwardTresholdPixel = 100, forwardTresholdPixel = 100;
65
+ let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true;
66
66
  $:
67
67
  totalSections = rows.length / sectionRowsNumber;
68
+ $:
69
+ renderedRows = rows.slice(currentSectionNumber * sectionRowsNumber, currentSectionNumber * sectionRowsNumber + renderedRowsNumber);
68
70
  let openHeaderDrawer = false, headersToSelect = !!headers ? headers.filter((h) => {
69
71
  return !headersToShowInTable.find((hst) => hst.value == h.value);
70
72
  }).map((h) => {
@@ -274,6 +276,10 @@ $:
274
276
  if (searchText != void 0)
275
277
  handleSearchChange(searchText);
276
278
  function handleFiltersChange() {
279
+ userScrolling = false;
280
+ currentSectionNumber = 0;
281
+ tableContainer.scrollTop = 0;
282
+ setTimeout(() => userScrolling = true, 20);
277
283
  dispatch("filtersChange", {
278
284
  builder: globalBuilder
279
285
  });
@@ -559,13 +565,12 @@ function handleRemoveFilter(filter) {
559
565
  handleSearchChange(searchText);
560
566
  }
561
567
  function handleLoadForward() {
562
- currentSectionNumber = currentSectionNumber + 1;
563
568
  userScrolling = false;
564
569
  let topElementsHeight = 0;
565
570
  for (let i = 0; i < sectionRowsNumber; i++) {
566
571
  topElementsHeight += tableBody?.children.item(i)?.getBoundingClientRect().height || 0;
567
572
  }
568
- renderedRows = rows.slice(currentSectionNumber * sectionRowsNumber, currentSectionNumber * sectionRowsNumber + renderedRowsNumber);
573
+ currentSectionNumber = currentSectionNumber + 1;
569
574
  tableContainer.scrollTop -= topElementsHeight;
570
575
  setTimeout(() => userScrolling = true, 20);
571
576
  if (totalSections - sectionTreshold < currentSectionNumber) {
@@ -573,13 +578,12 @@ function handleLoadForward() {
573
578
  }
574
579
  }
575
580
  function handleLoadBackward() {
576
- currentSectionNumber = currentSectionNumber - 1;
577
581
  userScrolling = false;
578
582
  let topElementsHeight = 0;
579
583
  for (let i = renderedRows.length - 1; i > renderedRows.length - sectionRowsNumber + 1; i--) {
580
584
  topElementsHeight += tableBody?.children.item(i)?.getBoundingClientRect().height || 0;
581
585
  }
582
- renderedRows = rows.slice(currentSectionNumber * sectionRowsNumber, currentSectionNumber * sectionRowsNumber + renderedRowsNumber);
586
+ currentSectionNumber = currentSectionNumber - 1;
583
587
  tableContainer.scrollTop += topElementsHeight;
584
588
  setTimeout(() => userScrolling = true, 20);
585
589
  }
@@ -58,6 +58,7 @@ function handleClickClose(option, index) {
58
58
  <div
59
59
  on:click|stopPropagation={() => { }}
60
60
  on:keydown={() => { }}
61
+ role="presentation"
61
62
  >
62
63
  <slot name="append" {option} {handleClickClose}>
63
64
  {#if deletable}
@@ -0,0 +1,18 @@
1
+ :root {
2
+ --hierarchy-menu-default-gap: 4px;
3
+ --hierarchy-menu-default-width: 100%;
4
+ --hierarchy-menu-default-element-border-radius: 8px;
5
+ --hierarchy-menu-default-element-background-color: transparent;
6
+ --hierarchy-menu-default-element-color: inherit;
7
+ --hierarchy-menu-default-element-hover-background-color: rgb(var(--global-color-background-300), .5);
8
+ --hierarchy-menu-default-element-hover-color: inherit;
9
+ --hierarchy-menu-default-element-active-background-color: rgb(var(--global-color-background-300), .5);
10
+ --hierarchy-menu-default-element-active-color: inherit;
11
+ --hierarchy-menu-default-element-selected-background-color: rgb(var(--global-color-primary-500), .6);
12
+ --hierarchy-menu-default-element-selected-color: rgb(var(--global-color-grey-50));
13
+ --hierarchy-menu-default-element-selected-font-weight: 700;
14
+ --hierarchy-menu-default-element-padding: 8px;
15
+ --hierarchy-menu-default-element-cursor: pointer;
16
+ --hierarchy-menu-default-icon-button-padding: 0px 12px 0px 2px;
17
+ --hierarchy-menu-default-sub-options-padding: 8px 0px 8px 40px;
18
+ }
@@ -0,0 +1,276 @@
1
+ <script context="module"></script>
2
+
3
+ <script>import "../../../css/main.css";
4
+ import "./HierarchyMenu.css";
5
+ import { createEventDispatcher } from "svelte";
6
+ import { Icon } from "../../..";
7
+ import { slide } from "svelte/transition";
8
+ import { sineIn } from "svelte/easing";
9
+ export let options, selected = void 0, expanded = [], iconsOnly = false;
10
+ let dispatch = createEventDispatcher();
11
+ function handleOptionClick(option) {
12
+ selected = option.name;
13
+ dispatch("optionClick", { option });
14
+ }
15
+ function handleExpandOptionClick(option) {
16
+ if (expanded.includes(option.name))
17
+ expanded = expanded.filter((e) => e !== option.name);
18
+ else
19
+ expanded = [...expanded, option.name];
20
+ }
21
+ </script>
22
+
23
+ <div class="hierarchy-container">
24
+ {#each options as option}
25
+ {@const isExpanded = expanded.includes(option.name)}
26
+ <div class="menu-element">
27
+ <div
28
+ class="main-option"
29
+ role="presentation"
30
+ class:selected={option.name === selected}
31
+ on:click={() => handleOptionClick(option)}
32
+ >
33
+ <div>
34
+ <slot name="prepend" {option}>
35
+ {#if !!option.options}
36
+ <button
37
+ class="style-less-button icon-button"
38
+ class:no-transform={iconsOnly}
39
+ on:click|stopPropagation={(event) => {
40
+ if(!iconsOnly) {
41
+ handleExpandOptionClick(option)
42
+ } else {
43
+ handleOptionClick(option)
44
+ }
45
+ }}
46
+ >
47
+ {#if !!option.icon}
48
+ <Icon name={option.icon} />
49
+ {:else if isExpanded}
50
+ <Icon name="mdi-chevron-down" />
51
+ {:else}
52
+ <Icon name="mdi-chevron-right" />
53
+ {/if}
54
+ </button>
55
+
56
+ {#if !iconsOnly}
57
+ <button
58
+ class="style-less-button expand-button"
59
+ on:click|stopPropagation={() => handleExpandOptionClick(option)}
60
+ >
61
+ {#if isExpanded}
62
+ <Icon name="mdi-chevron-down" />
63
+ {:else}
64
+ <Icon name="mdi-chevron-right" />
65
+ {/if}
66
+ </button>
67
+ {/if}
68
+ {:else if !!option.icon}
69
+ <div class="icon-only">
70
+ <Icon name={option.icon} />
71
+ </div>
72
+ {/if}
73
+ </slot>
74
+ </div>
75
+ {#if !iconsOnly}
76
+ <slot name="option" {option}>
77
+ <div class="label">
78
+ {option.label}
79
+ </div>
80
+ </slot>
81
+ {#if !!$$slots.append}
82
+ <div
83
+ on:click|stopPropagation={() => {}}
84
+ on:keydown={() => {}}
85
+ role="presentation"
86
+ >
87
+ <slot name="append" {option} />
88
+ </div>
89
+ {/if}
90
+ {/if}
91
+ </div>
92
+ {#if !!option.options && isExpanded && !iconsOnly}
93
+ <div
94
+ class="sub-options-container"
95
+ transition:slide={{
96
+ duration: 150,
97
+ easing: sineIn,
98
+ }}
99
+ >
100
+ {#each option.options as subOption}
101
+ <div class="sub-menu-element">
102
+ <div
103
+ role="presentation"
104
+ class:selected={subOption.name === selected}
105
+ on:click={() => handleOptionClick(subOption)}
106
+ class="main-option sub-element-main-option"
107
+ >
108
+ <div>
109
+ <slot name="prepend" option={subOption}>
110
+ <div class="style-less-button sub-icon-button">
111
+ {#if !!subOption.icon}
112
+ <Icon name={subOption.icon} />
113
+ {/if}
114
+ </div>
115
+ </slot>
116
+ </div>
117
+ <slot name="option" option={subOption}>
118
+ <div class="label">
119
+ {subOption.label}
120
+ </div>
121
+ </slot>
122
+ {#if !!$$slots.append}
123
+ <div
124
+ on:click|stopPropagation={() => {}}
125
+ on:keydown={() => {}}
126
+ role="presentation"
127
+ >
128
+ <slot name="append" option={subOption} />
129
+ </div>
130
+ {/if}
131
+ </div>
132
+ </div>
133
+ {/each}
134
+ </div>
135
+ {/if}
136
+ </div>
137
+ {/each}
138
+ </div>
139
+
140
+ <style>
141
+ .hierarchy-container {
142
+ display: flex;
143
+ flex-direction: column;
144
+ gap: var(--hierarchy-menu-gap, var(--hierarchy-menu-default-gap));
145
+ height: var(--hierarchy-menu-height, var(--hierarchy-menu-default-height));
146
+ width: var(--hierarchy-menu-width, var(--hierarchy-menu-default-width));
147
+ }
148
+
149
+ .sub-options-container {
150
+ display: flex;
151
+ flex-direction: column;
152
+ gap: var(--hierarchy-menu-gap, var(--hierarchy-menu-default-gap));
153
+ margin-top: var(--hierarchy-menu-gap, var(--hierarchy-menu-default-gap));
154
+ margin-bottom: var(--hierarchy-menu-gap, var(--hierarchy-menu-default-gap));
155
+ }
156
+
157
+ .sub-element-main-option {
158
+ padding: var(
159
+ --hierarchy-menu-sub-options-padding,
160
+ var(--hierarchy-menu-default-sub-options-padding)
161
+ );
162
+ }
163
+
164
+ .main-option {
165
+ display: flex;
166
+ align-items: center;
167
+ gap: 4px;
168
+ cursor: var(
169
+ --hierarchy-menu-element-cursor,
170
+ var(--hierarchy-menu-default-element-cursor)
171
+ );
172
+ border-radius: var(
173
+ --hierarchy-menu-element-border-radius,
174
+ var(--hierarchy-menu-default-element-border-radius)
175
+ );
176
+ background-color: var(
177
+ --hierarchy-menu-element-background-color,
178
+ var(--hierarchy-menu-default-element-background-color)
179
+ );
180
+ color: var(
181
+ --hierarchy-menu-element-color,
182
+ var(--hierarchy-menu-default-element-color)
183
+ );
184
+ }
185
+
186
+ .main-option:not(.sub-element-main-option) {
187
+ padding: var(
188
+ --hierarchy-menu-element-padding,
189
+ var(--hierarchy-menu-default-element-padding)
190
+ );
191
+ }
192
+
193
+ .main-option.selected {
194
+ background-color: var(
195
+ --hierarchy-menu-element-selected-background-color,
196
+ var(--hierarchy-menu-default-element-selected-background-color)
197
+ );
198
+ color: var(
199
+ --hierarchy-menu-element-selected-color,
200
+ var(--hierarchy-menu-default-element-selected-color)
201
+ );
202
+ font-weight: var(
203
+ --hierarchy-menu-element-selected-font-weight,
204
+ var(--hierarchy-menu-default-element-selected-font-weight)
205
+ );
206
+ }
207
+
208
+ .main-option:hover:not(.selected) {
209
+ background-color: var(
210
+ --hierarchy-menu-element-hover-background-color,
211
+ var(--hierarchy-menu-default-element-hover-background-color)
212
+ );
213
+ color: var(
214
+ --hierarchy-menu-element-hover-color,
215
+ var(--hierarchy-menu-default-element-hover-color)
216
+ );
217
+ }
218
+
219
+ .main-option:active:not(.selected) {
220
+ background-color: var(
221
+ --hierarchy-menu-element-active-background-color,
222
+ var(--hierarchy-menu-default-element-active-background-color)
223
+ );
224
+ color: var(
225
+ --hierarchy-menu-element-active-color,
226
+ var(--hierarchy-menu-default-element-active-color)
227
+ );
228
+ }
229
+
230
+ .style-less-button {
231
+ background: none;
232
+ color: inherit;
233
+ border: none;
234
+ padding: 0;
235
+ font: inherit;
236
+ cursor: pointer;
237
+ outline: inherit;
238
+ }
239
+
240
+ .main-option:hover .expand-button {
241
+ display: block;
242
+ }
243
+
244
+ .main-option:hover .icon-button:not(.no-transform) {
245
+ display: none;
246
+ }
247
+
248
+ .icon-only {
249
+ padding: var(
250
+ --hierarchy-menu-icon-button-padding,
251
+ var(--hierarchy-menu-default-icon-button-padding)
252
+ );
253
+ }
254
+
255
+ .expand-button {
256
+ display: none;
257
+ padding: var(
258
+ --hierarchy-menu-icon-button-padding,
259
+ var(--hierarchy-menu-default-icon-button-padding)
260
+ );
261
+ }
262
+
263
+ .icon-button {
264
+ padding: var(
265
+ --hierarchy-menu-icon-button-padding,
266
+ var(--hierarchy-menu-default-icon-button-padding)
267
+ );
268
+ }
269
+
270
+ .sub-icon-button {
271
+ padding: var(
272
+ --hierarchy-menu-icon-button-padding,
273
+ var(--hierarchy-menu-default-icon-button-padding)
274
+ );
275
+ }
276
+ </style>
@@ -0,0 +1,42 @@
1
+ import { SvelteComponent } from "svelte";
2
+ export type Option = {
3
+ label: string;
4
+ name: string;
5
+ icon?: string;
6
+ href?: string;
7
+ options?: Omit<Option, "options">[];
8
+ };
9
+ import "../../../css/main.css";
10
+ import "./HierarchyMenu.css";
11
+ declare const __propDef: {
12
+ props: {
13
+ options: Option[];
14
+ selected?: string | undefined;
15
+ expanded?: string[] | undefined;
16
+ iconsOnly?: boolean | undefined;
17
+ };
18
+ events: {
19
+ optionClick: CustomEvent<{
20
+ option: Option;
21
+ }>;
22
+ } & {
23
+ [evt: string]: CustomEvent<any>;
24
+ };
25
+ slots: {
26
+ prepend: {
27
+ option: Omit<Option, "options">;
28
+ };
29
+ option: {
30
+ option: Omit<Option, "options">;
31
+ };
32
+ append: {
33
+ option: Omit<Option, "options">;
34
+ };
35
+ };
36
+ };
37
+ export type HierarchyMenuProps = typeof __propDef.props;
38
+ export type HierarchyMenuEvents = typeof __propDef.events;
39
+ export type HierarchyMenuSlots = typeof __propDef.slots;
40
+ export default class HierarchyMenu extends SvelteComponent<HierarchyMenuProps, HierarchyMenuEvents, HierarchyMenuSlots> {
41
+ }
42
+ export {};
package/dist/index.d.ts CHANGED
@@ -30,6 +30,7 @@ export { default as SelectableMenuList } from './components/simple/lists/Selecta
30
30
  export { default as SelectableVerticalList } from './components/simple/lists/SelectableVerticalList.svelte';
31
31
  export { default as SidebarMenuList } from './components/simple/lists/SidebarMenuList.svelte';
32
32
  export { default as SimpleTable } from './components/simple/lists/SimpleTable.svelte';
33
+ export { default as HierarchyMenu } from './components/simple/lists/HierarchyMenu.svelte';
33
34
  export { default as CircularLoader } from './components/simple/loaders/CircularLoader.svelte';
34
35
  export { default as Skeleton } from './components/simple/loaders/Skeleton.svelte';
35
36
  export { default as AlertBanner } from './components/simple/notifiers/AlertBanner.svelte';
package/dist/index.js CHANGED
@@ -30,6 +30,7 @@ export { default as SelectableMenuList } from './components/simple/lists/Selecta
30
30
  export { default as SelectableVerticalList } from './components/simple/lists/SelectableVerticalList.svelte';
31
31
  export { default as SidebarMenuList } from './components/simple/lists/SidebarMenuList.svelte';
32
32
  export { default as SimpleTable } from './components/simple/lists/SimpleTable.svelte';
33
+ export { default as HierarchyMenu } from './components/simple/lists/HierarchyMenu.svelte';
33
34
  export { default as CircularLoader } from './components/simple/loaders/CircularLoader.svelte';
34
35
  export { default as Skeleton } from './components/simple/loaders/Skeleton.svelte';
35
36
  export { default as AlertBanner } from './components/simple/notifiers/AlertBanner.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 and others",
4
- "version": "3.3.6",
4
+ "version": "3.3.8",
5
5
  "scripts": {
6
6
  "host": "vite --host",
7
7
  "dev": "vite dev",