@invopop/popui 0.0.39 → 0.0.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.
|
@@ -60,15 +60,12 @@ onMount(() => {
|
|
|
60
60
|
class="w-4 h-4 {item.destructive ? 'text-danger-500' : 'text-neutral-500'}"
|
|
61
61
|
/>
|
|
62
62
|
{/if}
|
|
63
|
-
<div
|
|
64
|
-
class="whitespace-nowrap flex-1 text-left max-w-40 truncate flex flex-col"
|
|
65
|
-
title={item.label}
|
|
66
|
-
>
|
|
63
|
+
<div class="whitespace-nowrap flex-1 text-left flex flex-col" title={item.label}>
|
|
67
64
|
<span class="flex items-center space-x-1.5">
|
|
68
65
|
{#if item.color}
|
|
69
66
|
<TagStatus status={item.color} dot />
|
|
70
67
|
{/if}
|
|
71
|
-
<span class="{labelStyles} text-base">{item.label}</span>
|
|
68
|
+
<span class="{labelStyles} text-base max-w-40 truncate">{item.label}</span>
|
|
72
69
|
</span>
|
|
73
70
|
|
|
74
71
|
{#if item.country}
|
|
@@ -14,6 +14,7 @@ export let options = [];
|
|
|
14
14
|
export let placeholder = "";
|
|
15
15
|
export let multiple = false;
|
|
16
16
|
export let fullWidth = false;
|
|
17
|
+
export let widthClass = "w-60";
|
|
17
18
|
let selectDropdown;
|
|
18
19
|
let resolvedIcon;
|
|
19
20
|
let isOpen = false;
|
|
@@ -27,10 +28,12 @@ $:
|
|
|
27
28
|
...o,
|
|
28
29
|
selected: multiple ? Boolean(value.find((v) => v.value === o.value)) : o.value === value
|
|
29
30
|
}));
|
|
31
|
+
$:
|
|
32
|
+
selectedItems = items.filter((i) => i.selected);
|
|
30
33
|
$:
|
|
31
34
|
selectedColor = !multiple && items.find((i) => i.selected)?.color;
|
|
32
35
|
$:
|
|
33
|
-
selectedLabel =
|
|
36
|
+
selectedLabel = `${selectedItems[0]?.label || ""}${selectedItems.length > 1 ? " and more..." : ""}` || placeholder;
|
|
34
37
|
$:
|
|
35
38
|
styles = clsx({
|
|
36
39
|
"shadow-active border-workspace-accent hover:border-workspace-accent": isOpen
|
|
@@ -66,7 +69,13 @@ function handleSelected(e) {
|
|
|
66
69
|
{selectedLabel}
|
|
67
70
|
</span>
|
|
68
71
|
</div>
|
|
69
|
-
<DrawerContext
|
|
72
|
+
<DrawerContext
|
|
73
|
+
{widthClass}
|
|
74
|
+
{multiple}
|
|
75
|
+
{items}
|
|
76
|
+
on:click={handleClick}
|
|
77
|
+
on:selected={handleSelected}
|
|
78
|
+
/>
|
|
70
79
|
</BaseDropdown>
|
|
71
80
|
|
|
72
81
|
<style>
|