@likable-hair/svelte 3.0.55 → 3.0.56
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/buttons/ActivableButton.svelte +49 -0
- package/dist/components/composed/buttons/ActivableButton.svelte.d.ts +34 -0
- package/dist/components/composed/forms/Dropdown.svelte +27 -3
- package/dist/components/composed/forms/Dropdown.svelte.d.ts +8 -0
- package/dist/components/composed/forms/IconsDropdown.svelte +73 -0
- package/dist/components/composed/forms/IconsDropdown.svelte.d.ts +23 -0
- package/dist/components/simple/buttons/Button.svelte +33 -2
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script>import Button from "../../simple/buttons/Button.svelte";
|
|
2
|
+
export let active = false, buttonProps = {};
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<Button
|
|
6
|
+
on:click={() => active = !active}
|
|
7
|
+
on:click
|
|
8
|
+
{...buttonProps}
|
|
9
|
+
buttonType="text"
|
|
10
|
+
--button-default-text-background-color={active ?
|
|
11
|
+
"var(--activable-button-active-background-color, rgb(var(--global-color-primary-500)))" :
|
|
12
|
+
"var(--activable-button-deactive-background-color, none)"
|
|
13
|
+
}
|
|
14
|
+
--button-default-text-color={active ?
|
|
15
|
+
"var(--activable-button-active-color, rgb(var(--global-color-grey-50)))" :
|
|
16
|
+
"var(--activable-button-deactive-color, rgb(var(--global-color-contrast-900)))"
|
|
17
|
+
}
|
|
18
|
+
--button-default-text-hover-background-color={active ?
|
|
19
|
+
"var(--activable-button-hover-active-background-color, rgb(var(--global-color-primary-500)))" :
|
|
20
|
+
"var(--activable-button-hover-deactive-background-color, rgb(var(--global-color-background-200)))"
|
|
21
|
+
}
|
|
22
|
+
--button-default-text-hover-color={active ?
|
|
23
|
+
"var(--activable-button-hover-active-color, rgb(var(--global-color-grey-50)))" :
|
|
24
|
+
undefined
|
|
25
|
+
}
|
|
26
|
+
--button-default-text-active-background-color={active ?
|
|
27
|
+
"var(--activable-button-active-active-background-color, rgb(var(--global-color-primary-500)))" :
|
|
28
|
+
"var(--activable-button-active-deactive-background-color, rgb(var(--global-color-background-200)))"
|
|
29
|
+
}
|
|
30
|
+
--button-default-text-active-color={active ?
|
|
31
|
+
"var(--activable-button-active-active-color, rgb(var(--global-color-grey-50)))" :
|
|
32
|
+
undefined
|
|
33
|
+
}
|
|
34
|
+
--button-default-text-focus-background-color={active ?
|
|
35
|
+
"var(--activable-button-focus-active-background-color, rgb(var(--global-color-primary-500)))" :
|
|
36
|
+
"var(--activable-button-focus-deactive-background-color, rgb(var(--global-color-background-200)))"
|
|
37
|
+
}
|
|
38
|
+
--button-default-text-focus-color={active ?
|
|
39
|
+
"var(--activable-button-focus-active-color, rgb(var(--global-color-grey-50)))" :
|
|
40
|
+
undefined
|
|
41
|
+
}
|
|
42
|
+
--button-default-disabled-background-color="none"
|
|
43
|
+
--button-default-disabled-color="rgb(var(--global-color-contrast-900), .5)"
|
|
44
|
+
>
|
|
45
|
+
<slot />
|
|
46
|
+
<svelte:fragment slot="append">
|
|
47
|
+
<slot name="append" />
|
|
48
|
+
</svelte:fragment>
|
|
49
|
+
</Button>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
active?: boolean | undefined;
|
|
5
|
+
buttonProps?: {
|
|
6
|
+
[x: string]: any;
|
|
7
|
+
class?: string | undefined;
|
|
8
|
+
buttonType?: "default" | "text" | "icon" | undefined;
|
|
9
|
+
type?: "submit" | "button" | undefined;
|
|
10
|
+
loading?: boolean | undefined;
|
|
11
|
+
icon?: string | undefined;
|
|
12
|
+
tabindex?: number | null | undefined;
|
|
13
|
+
disabled?: boolean | undefined;
|
|
14
|
+
buttonElement?: HTMLElement | undefined;
|
|
15
|
+
} | undefined;
|
|
16
|
+
};
|
|
17
|
+
events: {
|
|
18
|
+
click: CustomEvent<{
|
|
19
|
+
nativeEvent: MouseEvent;
|
|
20
|
+
}>;
|
|
21
|
+
} & {
|
|
22
|
+
[evt: string]: CustomEvent<any>;
|
|
23
|
+
};
|
|
24
|
+
slots: {
|
|
25
|
+
default: {};
|
|
26
|
+
append: {};
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
export type ActivableButtonProps = typeof __propDef.props;
|
|
30
|
+
export type ActivableButtonEvents = typeof __propDef.events;
|
|
31
|
+
export type ActivableButtonSlots = typeof __propDef.slots;
|
|
32
|
+
export default class ActivableButton extends SvelteComponentTyped<ActivableButtonProps, ActivableButtonEvents, ActivableButtonSlots> {
|
|
33
|
+
}
|
|
34
|
+
export {};
|
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
<script context="module"></script>
|
|
2
2
|
|
|
3
|
-
<script>import
|
|
3
|
+
<script>import { cloneDeep } from "lodash";
|
|
4
|
+
import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
|
|
4
5
|
import Button from "../../simple/buttons/Button.svelte";
|
|
5
6
|
import Icon from "../../simple/media/Icon.svelte";
|
|
6
|
-
|
|
7
|
+
import { createEventDispatcher } from "svelte";
|
|
8
|
+
let dispatch = createEventDispatcher();
|
|
9
|
+
export let items = [], values = [], multiple = false, lang = "en", searchText = void 0, maxVisibleChips = void 0, placeholder = lang == "en" ? "Select" : "Seleziona", clearable = true, mandatory = true, icon = void 0, menuOpened = false, openingId = void 0, width = void 0;
|
|
7
10
|
$:
|
|
8
11
|
generatedLabel = values.length == 1 ? values[0].label : `${values.length} Selezionati`;
|
|
9
12
|
function handleCloseClick(event) {
|
|
10
13
|
event.preventDefault();
|
|
11
14
|
event.stopPropagation();
|
|
15
|
+
let valuesBefore = cloneDeep(values);
|
|
12
16
|
values = [];
|
|
17
|
+
dispatch("change", {
|
|
18
|
+
unselect: valuesBefore[0],
|
|
19
|
+
select: void 0,
|
|
20
|
+
selection: []
|
|
21
|
+
});
|
|
13
22
|
}
|
|
14
23
|
</script>
|
|
15
24
|
|
|
@@ -24,6 +33,7 @@ function handleCloseClick(event) {
|
|
|
24
33
|
on:change
|
|
25
34
|
bind:menuOpened
|
|
26
35
|
bind:openingId
|
|
36
|
+
bind:width
|
|
27
37
|
>
|
|
28
38
|
<svelte:fragment slot="selection-container" let:openMenu let:handleKeyDown>
|
|
29
39
|
<Button
|
|
@@ -41,7 +51,16 @@ function handleCloseClick(event) {
|
|
|
41
51
|
}
|
|
42
52
|
}}
|
|
43
53
|
>
|
|
44
|
-
<slot
|
|
54
|
+
<slot
|
|
55
|
+
name="label"
|
|
56
|
+
{values}
|
|
57
|
+
{items}
|
|
58
|
+
{searchText}
|
|
59
|
+
{generatedLabel}
|
|
60
|
+
{placeholder}
|
|
61
|
+
{clearable}
|
|
62
|
+
{handleCloseClick}
|
|
63
|
+
>
|
|
45
64
|
<div class="label">
|
|
46
65
|
{#if !!icon}
|
|
47
66
|
<Icon name={icon}></Icon>
|
|
@@ -67,6 +86,11 @@ function handleCloseClick(event) {
|
|
|
67
86
|
</slot>
|
|
68
87
|
</Button>
|
|
69
88
|
</svelte:fragment>
|
|
89
|
+
<svelte:fragment slot="item-label" let:item >
|
|
90
|
+
<slot name="item-label" {item}>
|
|
91
|
+
{item.label}
|
|
92
|
+
</slot>
|
|
93
|
+
</svelte:fragment>
|
|
70
94
|
</Autocomplete>
|
|
71
95
|
|
|
72
96
|
<style>
|
|
@@ -15,6 +15,7 @@ declare const __propDef: {
|
|
|
15
15
|
icon?: string | undefined;
|
|
16
16
|
menuOpened?: boolean | undefined;
|
|
17
17
|
openingId?: string | undefined;
|
|
18
|
+
width?: string | undefined;
|
|
18
19
|
};
|
|
19
20
|
events: {
|
|
20
21
|
change: CustomEvent<any>;
|
|
@@ -26,6 +27,13 @@ declare const __propDef: {
|
|
|
26
27
|
values: Item[];
|
|
27
28
|
items: Item[];
|
|
28
29
|
searchText: string | undefined;
|
|
30
|
+
generatedLabel: string | number | undefined;
|
|
31
|
+
placeholder: string;
|
|
32
|
+
clearable: boolean;
|
|
33
|
+
handleCloseClick: (event: MouseEvent) => void;
|
|
34
|
+
};
|
|
35
|
+
'item-label': {
|
|
36
|
+
item: Item;
|
|
29
37
|
};
|
|
30
38
|
};
|
|
31
39
|
};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<script context="module"></script>
|
|
2
|
+
|
|
3
|
+
<script>import Dropdown, {} from "./Dropdown.svelte";
|
|
4
|
+
import Icon from "../../simple/media/Icon.svelte";
|
|
5
|
+
export let items = [], values = [], clearable = false;
|
|
6
|
+
let dropdownValues = [];
|
|
7
|
+
$:
|
|
8
|
+
dropdownValues = values.map((e) => ({
|
|
9
|
+
value: e.value,
|
|
10
|
+
data: {
|
|
11
|
+
icon: e.icon,
|
|
12
|
+
data: e.data
|
|
13
|
+
}
|
|
14
|
+
}));
|
|
15
|
+
$:
|
|
16
|
+
dropDownItems = items.map((e) => ({
|
|
17
|
+
value: e.value,
|
|
18
|
+
data: {
|
|
19
|
+
icon: e.icon,
|
|
20
|
+
data: e.data
|
|
21
|
+
}
|
|
22
|
+
}));
|
|
23
|
+
function handleChange(event) {
|
|
24
|
+
values = event.detail.selection.map((e) => ({
|
|
25
|
+
value: e.value,
|
|
26
|
+
icon: e.data.icon,
|
|
27
|
+
data: e.data
|
|
28
|
+
}));
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<Dropdown
|
|
33
|
+
items={dropDownItems}
|
|
34
|
+
clearable={clearable}
|
|
35
|
+
placeholder=""
|
|
36
|
+
bind:values={dropdownValues}
|
|
37
|
+
on:change={handleChange}
|
|
38
|
+
width="60px"
|
|
39
|
+
>
|
|
40
|
+
<svelte:fragment slot="label" let:generatedLabel let:values let:placeholder let:clearable let:handleCloseClick>
|
|
41
|
+
{#if values.length == 0}
|
|
42
|
+
{placeholder}
|
|
43
|
+
{:else if values.length == 1}
|
|
44
|
+
<Icon name={values[0].data.icon}></Icon>
|
|
45
|
+
{:else}
|
|
46
|
+
{generatedLabel}
|
|
47
|
+
{/if}
|
|
48
|
+
{#if clearable && values.length > 0}
|
|
49
|
+
<Icon
|
|
50
|
+
name="mdi-close"
|
|
51
|
+
click
|
|
52
|
+
on:click={handleCloseClick}
|
|
53
|
+
></Icon>
|
|
54
|
+
{:else}
|
|
55
|
+
<Icon name="mdi-chevron-down"></Icon>
|
|
56
|
+
{/if}
|
|
57
|
+
</svelte:fragment>
|
|
58
|
+
<svelte:fragment slot="item-label" let:item>
|
|
59
|
+
<div class="label-container">
|
|
60
|
+
<Icon
|
|
61
|
+
name={item.data.icon}
|
|
62
|
+
--icon-size="20px"
|
|
63
|
+
></Icon>
|
|
64
|
+
</div>
|
|
65
|
+
</svelte:fragment>
|
|
66
|
+
</Dropdown>
|
|
67
|
+
|
|
68
|
+
<style>
|
|
69
|
+
.label-container {
|
|
70
|
+
display: flex;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
}
|
|
73
|
+
</style>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
export type IconItem = {
|
|
3
|
+
value: string | number;
|
|
4
|
+
icon: string;
|
|
5
|
+
data?: any;
|
|
6
|
+
};
|
|
7
|
+
declare const __propDef: {
|
|
8
|
+
props: {
|
|
9
|
+
items?: IconItem[] | undefined;
|
|
10
|
+
values?: IconItem[] | undefined;
|
|
11
|
+
clearable?: boolean | undefined;
|
|
12
|
+
};
|
|
13
|
+
events: {
|
|
14
|
+
[evt: string]: CustomEvent<any>;
|
|
15
|
+
};
|
|
16
|
+
slots: {};
|
|
17
|
+
};
|
|
18
|
+
export type IconsDropdownProps = typeof __propDef.props;
|
|
19
|
+
export type IconsDropdownEvents = typeof __propDef.events;
|
|
20
|
+
export type IconsDropdownSlots = typeof __propDef.slots;
|
|
21
|
+
export default class IconsDropdown extends SvelteComponentTyped<IconsDropdownProps, IconsDropdownEvents, IconsDropdownSlots> {
|
|
22
|
+
}
|
|
23
|
+
export {};
|
|
@@ -232,18 +232,49 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
|
|
|
232
232
|
);
|
|
233
233
|
}
|
|
234
234
|
|
|
235
|
-
.button-text
|
|
235
|
+
.button-text.disabled {
|
|
236
|
+
cursor: not-allowed;
|
|
237
|
+
background-color: var(
|
|
238
|
+
--button-disabled-background-color,
|
|
239
|
+
var(--button-default-disabled-background-color)
|
|
240
|
+
);
|
|
241
|
+
color: var(
|
|
242
|
+
--button-disabled-color,
|
|
243
|
+
var(--button-default-disabled-color)
|
|
244
|
+
);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.button-text:hover:not(.disabled) {
|
|
236
248
|
background-color: var(
|
|
237
249
|
--button-hover-background-color,
|
|
238
250
|
var(--button-default-text-hover-background-color)
|
|
239
251
|
);
|
|
252
|
+
color: var(
|
|
253
|
+
--button-hover-color,
|
|
254
|
+
var(--button-default-text-hover-color)
|
|
255
|
+
);
|
|
240
256
|
}
|
|
241
257
|
|
|
242
|
-
.button-text:active {
|
|
258
|
+
.button-text:active:not(.disabled) {
|
|
243
259
|
background-color: var(
|
|
244
260
|
--button-active-background-color,
|
|
245
261
|
var(--button-default-text-active-background-color)
|
|
246
262
|
);
|
|
263
|
+
color: var(
|
|
264
|
+
--button-active-color,
|
|
265
|
+
var(--button-default-text-active-color)
|
|
266
|
+
);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.button-text:focus:not(.disabled) {
|
|
270
|
+
background-color: var(
|
|
271
|
+
--button-focus-background-color,
|
|
272
|
+
var(--button-default-text-focus-background-color)
|
|
273
|
+
);
|
|
274
|
+
color: var(
|
|
275
|
+
--button-focus-color,
|
|
276
|
+
var(--button-default-text-focus-color)
|
|
277
|
+
);
|
|
247
278
|
}
|
|
248
279
|
|
|
249
280
|
.button-icon {
|
package/dist/index.d.ts
CHANGED
|
@@ -47,6 +47,8 @@ export { default as TabSwitcher } from './components/simple/navigation/TabSwitch
|
|
|
47
47
|
export { default as ProgressBar } from './components/simple/progress/ProgressBar.svelte';
|
|
48
48
|
export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
|
|
49
49
|
export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
|
|
50
|
+
export { default as ActivableButton } from './components/composed/buttons/ActivableButton.svelte';
|
|
51
|
+
export { default as IconsDropdown } from './components/composed/forms/IconsDropdown.svelte';
|
|
50
52
|
export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';
|
|
51
53
|
export { default as Filters } from './components/composed/search/Filters.svelte';
|
|
52
54
|
export { default as GlobalSearchTextField } from './components/composed/search/GlobalSearchTextField.svelte';
|
package/dist/index.js
CHANGED
|
@@ -47,6 +47,8 @@ export { default as TabSwitcher } from './components/simple/navigation/TabSwitch
|
|
|
47
47
|
export { default as ProgressBar } from './components/simple/progress/ProgressBar.svelte';
|
|
48
48
|
export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
|
|
49
49
|
export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
|
|
50
|
+
export { default as ActivableButton } from './components/composed/buttons/ActivableButton.svelte';
|
|
51
|
+
export { default as IconsDropdown } from './components/composed/forms/IconsDropdown.svelte';
|
|
50
52
|
export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';
|
|
51
53
|
export { default as Filters } from './components/composed/search/Filters.svelte';
|
|
52
54
|
export { default as GlobalSearchTextField } from './components/composed/search/GlobalSearchTextField.svelte';
|