@invopop/popui 0.0.39 → 0.0.41
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}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
<script>import DrawerContextItem from "./DrawerContextItem.svelte";
|
|
2
2
|
import { Icon } from "@steeze-ui/svelte-icon";
|
|
3
|
-
import { AddCircle,
|
|
3
|
+
import { AddCircle, Settings, Sidebar } from "@invopop/ui-icons";
|
|
4
4
|
import { createEventDispatcher } from "svelte";
|
|
5
5
|
import BaseCounter from "./BaseCounter.svelte";
|
|
6
6
|
import EmptyStateIcon from "./EmptyStateIcon.svelte";
|
|
7
|
+
import { slide } from "svelte/transition";
|
|
8
|
+
import { ChevronRight } from "@steeze-ui/heroicons";
|
|
7
9
|
export let items = [];
|
|
8
10
|
export let multiple = false;
|
|
9
11
|
const dispatch = createEventDispatcher();
|
|
@@ -25,16 +27,21 @@ $:
|
|
|
25
27
|
}
|
|
26
28
|
</script>
|
|
27
29
|
|
|
28
|
-
<div class="w-[300px] border border-neutral-200 rounded-
|
|
30
|
+
<div class="w-[300px] border border-neutral-200 rounded-md shadow-lg bg-white">
|
|
29
31
|
<div class="max-h-[60vh] overflow-y-auto rounded-sm">
|
|
30
32
|
<button
|
|
31
|
-
class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 rounded-t-sm h-
|
|
33
|
+
class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 rounded-t-sm h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
|
|
32
34
|
on:click={() => {
|
|
33
|
-
liveOpen
|
|
35
|
+
if (liveOpen) return
|
|
36
|
+
liveOpen = true
|
|
37
|
+
sandboxOpen = false
|
|
34
38
|
}}
|
|
35
39
|
>
|
|
36
40
|
<div class="flex items-center space-x-1.5">
|
|
37
|
-
<Icon
|
|
41
|
+
<Icon
|
|
42
|
+
src={ChevronRight}
|
|
43
|
+
class="h-4 w-4 text-neutral-500 transition-all transform {liveOpen ? 'rotate-90' : ''}"
|
|
44
|
+
/>
|
|
38
45
|
<span>Live</span>
|
|
39
46
|
</div>
|
|
40
47
|
{#if liveItems.length}
|
|
@@ -42,30 +49,37 @@ $:
|
|
|
42
49
|
{/if}
|
|
43
50
|
</button>
|
|
44
51
|
{#if liveOpen}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
52
|
+
<div transition:slide>
|
|
53
|
+
{#if !liveItems.length}
|
|
54
|
+
<div class="h-[182px]">
|
|
55
|
+
<EmptyStateIcon
|
|
56
|
+
icon={Sidebar}
|
|
57
|
+
title="No workspaces here"
|
|
58
|
+
description="Create a workspace to start"
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
{/if}
|
|
62
|
+
<ul class="p-1 pb-0.5 space-y-1">
|
|
63
|
+
{#each liveItems as item}
|
|
64
|
+
<DrawerContextItem {item} {multiple} workspace on:click />
|
|
65
|
+
{/each}
|
|
66
|
+
</ul>
|
|
67
|
+
</div>
|
|
59
68
|
{/if}
|
|
60
69
|
<button
|
|
61
|
-
class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 h-
|
|
70
|
+
class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
|
|
62
71
|
class:border-t={liveOpen}
|
|
63
72
|
on:click={() => {
|
|
64
|
-
sandboxOpen
|
|
73
|
+
if (sandboxOpen) return
|
|
74
|
+
sandboxOpen = true
|
|
75
|
+
liveOpen = false
|
|
65
76
|
}}
|
|
66
77
|
>
|
|
67
78
|
<div class="flex items-center space-x-1.5">
|
|
68
|
-
<Icon
|
|
79
|
+
<Icon
|
|
80
|
+
src={ChevronRight}
|
|
81
|
+
class="h-4 w-4 text-neutral-500 transition-all transform {sandboxOpen ? 'rotate-90' : ''}"
|
|
82
|
+
/>
|
|
69
83
|
<span>Sandbox</span>
|
|
70
84
|
</div>
|
|
71
85
|
{#if sandboxItems.length}
|
|
@@ -73,20 +87,22 @@ $:
|
|
|
73
87
|
{/if}
|
|
74
88
|
</button>
|
|
75
89
|
{#if sandboxOpen}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
+
<div transition:slide>
|
|
91
|
+
{#if !sandboxItems.length}
|
|
92
|
+
<div class="h-[182px]">
|
|
93
|
+
<EmptyStateIcon
|
|
94
|
+
icon={Sidebar}
|
|
95
|
+
title="No workspaces here"
|
|
96
|
+
description="Create a workspace to start"
|
|
97
|
+
/>
|
|
98
|
+
</div>
|
|
99
|
+
{/if}
|
|
100
|
+
<ul class="p-1 pb-0.5 space-y-1">
|
|
101
|
+
{#each sandboxItems as item}
|
|
102
|
+
<DrawerContextItem {item} {multiple} workspace on:click />
|
|
103
|
+
{/each}
|
|
104
|
+
</ul>
|
|
105
|
+
</div>
|
|
90
106
|
{/if}
|
|
91
107
|
</div>
|
|
92
108
|
|
|
@@ -99,7 +115,7 @@ $:
|
|
|
99
115
|
}}
|
|
100
116
|
>
|
|
101
117
|
<Icon src={AddCircle} class="w-4 h-4 text-neutral-500 flex-shrink-0" />
|
|
102
|
-
<span class="text-neutral-800 tracking-tight text-base">Create workspace</span>
|
|
118
|
+
<span class="text-neutral-800 tracking-tight text-base font-medium">Create workspace</span>
|
|
103
119
|
</button>
|
|
104
120
|
</li>
|
|
105
121
|
<li class="pl-1.5 py-1.5 pr-2 hover:bg-neutral-100 rounded-sm">
|
|
@@ -110,7 +126,7 @@ $:
|
|
|
110
126
|
}}
|
|
111
127
|
>
|
|
112
128
|
<Icon src={Settings} class="w-4 h-4 text-neutral-500" />
|
|
113
|
-
<span class="text-neutral-800 tracking-tight text-base">Settings</span>
|
|
129
|
+
<span class="text-neutral-800 tracking-tight text-base font-medium">Settings</span>
|
|
114
130
|
</button>
|
|
115
131
|
</li>
|
|
116
132
|
</ul>
|
|
@@ -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>
|