@likable-hair/svelte 3.1.39 → 3.1.40
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/composed/list/PaginatedTable.svelte +2 -0
- package/dist/components/composed/list/PaginatedTable.svelte.d.ts +4 -0
- package/dist/components/layouts/UnstableDividedSideBarLayout.svelte +26 -1
- package/dist/components/layouts/UnstableDividedSideBarLayout.svelte.d.ts +9 -0
- package/dist/components/simple/lists/ColorInvertedSelector.svelte +5 -2
- package/dist/components/simple/lists/ColorInvertedSelector.svelte.d.ts +1 -0
- package/package.json +1 -1
|
@@ -81,6 +81,8 @@ function handleFiltersChange() {
|
|
|
81
81
|
on:applyFilter={handleFiltersChange}
|
|
82
82
|
on:removeFilter={handleFiltersChange}
|
|
83
83
|
on:removeAllFilters={handleFiltersChange}
|
|
84
|
+
on:removeFilter
|
|
85
|
+
on:removeAllFilter
|
|
84
86
|
--filters-default-wrapper-width="100%"
|
|
85
87
|
{lang}
|
|
86
88
|
{editFilterMode}
|
|
@@ -32,6 +32,10 @@ declare const __propDef: {
|
|
|
32
32
|
calculateRowClasses?: CalculateRowClasses | undefined;
|
|
33
33
|
};
|
|
34
34
|
events: {
|
|
35
|
+
removeFilter: CustomEvent<{
|
|
36
|
+
filter: import("../../../utils/filters/filters").Filter;
|
|
37
|
+
}>;
|
|
38
|
+
removeAllFilter: CustomEvent<any>;
|
|
35
39
|
sort: CustomEvent<{
|
|
36
40
|
sortedBy: string | undefined;
|
|
37
41
|
sortDirection: string;
|
|
@@ -93,7 +93,24 @@ $:
|
|
|
93
93
|
--icon-default-size="1.3rem"
|
|
94
94
|
deletable={false}
|
|
95
95
|
on:select={(e) => handleMenuSelection(e.detail.option)}
|
|
96
|
-
|
|
96
|
+
>
|
|
97
|
+
<svelte:fragment slot="prepend" let:option let:handleClickClose let:index>
|
|
98
|
+
<slot name="prepend" {option} {handleClickClose} {index} {sidebarExpanded}>
|
|
99
|
+
{#if !!option.icon}
|
|
100
|
+
<Icon
|
|
101
|
+
name={option.icon}
|
|
102
|
+
></Icon>
|
|
103
|
+
{/if}
|
|
104
|
+
</slot>
|
|
105
|
+
</svelte:fragment>
|
|
106
|
+
<svelte:fragment slot="option" let:option>
|
|
107
|
+
<slot name="option" {option}>
|
|
108
|
+
<div class="label">
|
|
109
|
+
{option.label}
|
|
110
|
+
</div>
|
|
111
|
+
</slot>
|
|
112
|
+
</svelte:fragment>
|
|
113
|
+
</ColorInvertedSelector>
|
|
97
114
|
</div>
|
|
98
115
|
</slot>
|
|
99
116
|
</div>
|
|
@@ -150,6 +167,14 @@ $:
|
|
|
150
167
|
transition: all .2s cubic-bezier(.4,0,.2,1);
|
|
151
168
|
}
|
|
152
169
|
|
|
170
|
+
.label {
|
|
171
|
+
white-space: nowrap;
|
|
172
|
+
overflow: hidden;
|
|
173
|
+
text-overflow: ellipsis;
|
|
174
|
+
flex: 1;
|
|
175
|
+
position: relative;
|
|
176
|
+
}
|
|
177
|
+
|
|
153
178
|
@media (min-width: 1024.1px) {
|
|
154
179
|
.side-bar.opened {
|
|
155
180
|
width: var(
|
|
@@ -42,6 +42,15 @@ declare const __propDef: {
|
|
|
42
42
|
hamburgerVisible: boolean;
|
|
43
43
|
sidebarExpanded: boolean;
|
|
44
44
|
};
|
|
45
|
+
prepend: {
|
|
46
|
+
option: Option;
|
|
47
|
+
handleClickClose: (option: Option, index: number) => void;
|
|
48
|
+
index: any;
|
|
49
|
+
sidebarExpanded: boolean;
|
|
50
|
+
};
|
|
51
|
+
option: {
|
|
52
|
+
option: Option;
|
|
53
|
+
};
|
|
45
54
|
user: {
|
|
46
55
|
hamburgerVisible: boolean;
|
|
47
56
|
sidebarExpanded: boolean;
|
|
@@ -29,7 +29,7 @@ function handleClickClose(option, index) {
|
|
|
29
29
|
role="listbox"
|
|
30
30
|
>
|
|
31
31
|
{#each options as option, index}
|
|
32
|
-
<li>
|
|
32
|
+
<li >
|
|
33
33
|
<button
|
|
34
34
|
class:selected={selectedIndex == index}
|
|
35
35
|
class="element {clazz?.element || ''} {selectedIndex == index ? clazz.selected : ''}"
|
|
@@ -39,7 +39,7 @@ function handleClickClose(option, index) {
|
|
|
39
39
|
<div class="icon-and-title">
|
|
40
40
|
{#if !!$$slots.prepend || !!option.icon}
|
|
41
41
|
<div>
|
|
42
|
-
<slot name="prepend" {option} {handleClickClose}>
|
|
42
|
+
<slot name="prepend" {option} {handleClickClose} {index}>
|
|
43
43
|
{#if !!option.icon}
|
|
44
44
|
<Icon
|
|
45
45
|
name={option.icon}
|
|
@@ -113,6 +113,7 @@ function handleClickClose(option, index) {
|
|
|
113
113
|
var(--color-inverted-selector-default-font-size)
|
|
114
114
|
);
|
|
115
115
|
max-width: 100%;
|
|
116
|
+
position: var(--color-inverted-selector-icon-and-title-position, relative);
|
|
116
117
|
}
|
|
117
118
|
|
|
118
119
|
.element {
|
|
@@ -138,6 +139,7 @@ function handleClickClose(option, index) {
|
|
|
138
139
|
background-color: transparent;
|
|
139
140
|
font-size: inherit;
|
|
140
141
|
color: inherit;
|
|
142
|
+
position: var(--color-inverted-selector-element-position, relative);
|
|
141
143
|
}
|
|
142
144
|
|
|
143
145
|
.label {
|
|
@@ -145,6 +147,7 @@ function handleClickClose(option, index) {
|
|
|
145
147
|
overflow: hidden;
|
|
146
148
|
text-overflow: ellipsis;
|
|
147
149
|
flex: 1;
|
|
150
|
+
position: relative;
|
|
148
151
|
}
|
|
149
152
|
|
|
150
153
|
.element:not(.selected):hover {
|