@stubber/ui 1.4.1 → 1.5.0
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.
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { createEventDispatcher } from "svelte";
|
|
3
|
+
import * as Select from "@stubber/ui/select";
|
|
4
|
+
import * as Tooltip from "@stubber/ui/tooltip";
|
|
5
|
+
import { Button } from "@stubber/ui/button";
|
|
6
|
+
import { toast } from "svelte-sonner";
|
|
7
|
+
|
|
8
|
+
export let orgs = [];
|
|
9
|
+
export let selectedorguuid = undefined;
|
|
10
|
+
export let createOrgLink = "";
|
|
11
|
+
export let loading = false;
|
|
12
|
+
|
|
13
|
+
$: selectedOrg = orgs.find((org) => org.orguuid === selectedorguuid);
|
|
14
|
+
|
|
15
|
+
const dispatch = createEventDispatcher();
|
|
16
|
+
const alertColorMap = {
|
|
17
|
+
error: "danger-500",
|
|
18
|
+
warning: "warning-500",
|
|
19
|
+
success: "success-500",
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
function selectOrg(orguuid) {
|
|
23
|
+
dispatch("selectOrg", orguuid);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function copyToClipboard(uuid, event) {
|
|
27
|
+
if (event) {
|
|
28
|
+
event.stopPropagation();
|
|
29
|
+
event.preventDefault();
|
|
30
|
+
}
|
|
31
|
+
navigator.clipboard.writeText(uuid);
|
|
32
|
+
toast.success("UUID copied to clipboard!");
|
|
33
|
+
}
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<Select.Root bind:selected={selectedorguuid} onSelectedChange={(e) => selectOrg(e?.value)}>
|
|
37
|
+
<Select.Trigger
|
|
38
|
+
class="w-full sm:w-[280px] pl-3 pr-3 py-2 h-auto border-surface-100 transition-colors group"
|
|
39
|
+
>
|
|
40
|
+
<div class="flex items-center w-full">
|
|
41
|
+
<div class="flex items-center justify-center mr-3">
|
|
42
|
+
{#if selectedOrg?.filesrc && !loading}
|
|
43
|
+
<img
|
|
44
|
+
class="h-[25px] w-[25px] object-cover rounded-full"
|
|
45
|
+
src={selectedOrg.filesrc}
|
|
46
|
+
alt={selectedOrg.label}
|
|
47
|
+
/>
|
|
48
|
+
{:else if selectedOrg?.placeholderColor}
|
|
49
|
+
<div
|
|
50
|
+
class="h-[25px] w-[25px] rounded-full"
|
|
51
|
+
style="background-color: {selectedOrg.placeholderColor}"
|
|
52
|
+
/>
|
|
53
|
+
{:else}
|
|
54
|
+
<div class="h-[25px] w-[25px] rounded-full bg-surface-100" />
|
|
55
|
+
{/if}
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
{#if loading}
|
|
59
|
+
<span class="h-[25px] w-40 bg-surface-100 rounded-md" />
|
|
60
|
+
{:else}
|
|
61
|
+
<div class="w-full text-left truncate">
|
|
62
|
+
<p class="text-label text-surface-900 truncate">
|
|
63
|
+
{selectedOrg?.label ?? "No Org"}
|
|
64
|
+
</p>
|
|
65
|
+
{#if selectedOrg?.alert}
|
|
66
|
+
<div class="flex items-center space-x-1">
|
|
67
|
+
<span
|
|
68
|
+
class="h-[6px] w-[6px] bg-{alertColorMap[selectedOrg.alert?.type]} rounded-full"
|
|
69
|
+
/>
|
|
70
|
+
<p class="text-small italic text-{alertColorMap[selectedOrg.alert?.type]}">
|
|
71
|
+
{selectedOrg.alert?.message}
|
|
72
|
+
</p>
|
|
73
|
+
</div>
|
|
74
|
+
{/if}
|
|
75
|
+
</div>
|
|
76
|
+
{/if}
|
|
77
|
+
|
|
78
|
+
{#if selectedOrg}
|
|
79
|
+
<Tooltip.Root openDelay={0} disableHoverableContent={true}>
|
|
80
|
+
<Tooltip.Trigger>
|
|
81
|
+
<div
|
|
82
|
+
class="opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity ml-2 mr-2"
|
|
83
|
+
>
|
|
84
|
+
<i
|
|
85
|
+
role="button"
|
|
86
|
+
tabindex="0"
|
|
87
|
+
on:click={(e) => {
|
|
88
|
+
e.stopPropagation();
|
|
89
|
+
copyToClipboard(selectedOrg.orguuid, e);
|
|
90
|
+
}}
|
|
91
|
+
on:keydown={(e) => {
|
|
92
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
93
|
+
e.stopPropagation();
|
|
94
|
+
copyToClipboard(selectedOrg.orguuid, e);
|
|
95
|
+
}
|
|
96
|
+
}}
|
|
97
|
+
class="far fa-copy text-surface-400 cursor-pointer"
|
|
98
|
+
/>
|
|
99
|
+
</div>
|
|
100
|
+
</Tooltip.Trigger>
|
|
101
|
+
<Tooltip.Content>Copy UUID</Tooltip.Content>
|
|
102
|
+
</Tooltip.Root>
|
|
103
|
+
{/if}
|
|
104
|
+
</div>
|
|
105
|
+
</Select.Trigger>
|
|
106
|
+
|
|
107
|
+
<Select.Content class="w-full sm:w-[280px]">
|
|
108
|
+
{#each orgs as org}
|
|
109
|
+
<div class="relative group">
|
|
110
|
+
<Select.Item value={org.orguuid} class="pr-12">
|
|
111
|
+
<div class="flex items-center w-full">
|
|
112
|
+
<div class="flex items-center justify-center mr-3">
|
|
113
|
+
{#if org.filesrc}
|
|
114
|
+
<img
|
|
115
|
+
class="h-[25px] w-[25px] object-cover rounded-full"
|
|
116
|
+
src={org.filesrc}
|
|
117
|
+
alt={org.label}
|
|
118
|
+
/>
|
|
119
|
+
{:else if org.placeholderColor}
|
|
120
|
+
<div
|
|
121
|
+
class="h-[25px] w-[25px] rounded-full"
|
|
122
|
+
style="background-color: {org.placeholderColor}"
|
|
123
|
+
/>
|
|
124
|
+
{:else}
|
|
125
|
+
<div class="h-[25px] w-[25px] rounded-full bg-surface-100" />
|
|
126
|
+
{/if}
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="flex-1 text-left">
|
|
130
|
+
<p class="text-label text-surface-900">
|
|
131
|
+
{org.label}
|
|
132
|
+
</p>
|
|
133
|
+
{#if org.alert}
|
|
134
|
+
<div class="flex items-center space-x-1">
|
|
135
|
+
<span class="h-[6px] w-[6px] bg-{alertColorMap[org.alert.type]} rounded-full" />
|
|
136
|
+
<p class="text-small italic text-{alertColorMap[org.alert.type]}">
|
|
137
|
+
{org.alert?.message}
|
|
138
|
+
</p>
|
|
139
|
+
</div>
|
|
140
|
+
{/if}
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</Select.Item>
|
|
144
|
+
|
|
145
|
+
<!-- Copy button positioned absolutely -->
|
|
146
|
+
<div class="absolute right-2 top-1/2 -translate-y-1/2">
|
|
147
|
+
<Button
|
|
148
|
+
variant="ghost"
|
|
149
|
+
size="icon"
|
|
150
|
+
class="h-8 w-8 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
|
|
151
|
+
on:click={(e) => {
|
|
152
|
+
e.stopPropagation();
|
|
153
|
+
copyToClipboard(org.orguuid, e);
|
|
154
|
+
}}
|
|
155
|
+
>
|
|
156
|
+
<i class="far fa-copy text-surface-400" />
|
|
157
|
+
</Button>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
{/each}
|
|
161
|
+
|
|
162
|
+
{#if createOrgLink}
|
|
163
|
+
<Select.Separator />
|
|
164
|
+
<a
|
|
165
|
+
href={createOrgLink}
|
|
166
|
+
class="flex items-center px-8 py-2 text-sm text-primary-500 hover:bg-accent rounded-sm"
|
|
167
|
+
>
|
|
168
|
+
<i class="far fa-plus mr-2" />
|
|
169
|
+
<span>Create org</span>
|
|
170
|
+
</a>
|
|
171
|
+
{/if}
|
|
172
|
+
</Select.Content>
|
|
173
|
+
</Select.Root>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} OrgSwitcherNewProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} OrgSwitcherNewEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} OrgSwitcherNewSlots */
|
|
4
|
+
export default class OrgSwitcherNew extends SvelteComponent<{
|
|
5
|
+
orgs?: any[] | undefined;
|
|
6
|
+
selectedorguuid?: any;
|
|
7
|
+
createOrgLink?: string | undefined;
|
|
8
|
+
loading?: boolean | undefined;
|
|
9
|
+
}, {
|
|
10
|
+
selectOrg: CustomEvent<any>;
|
|
11
|
+
} & {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}> {
|
|
14
|
+
}
|
|
15
|
+
export type OrgSwitcherNewProps = typeof __propDef.props;
|
|
16
|
+
export type OrgSwitcherNewEvents = typeof __propDef.events;
|
|
17
|
+
export type OrgSwitcherNewSlots = typeof __propDef.slots;
|
|
18
|
+
import { SvelteComponent } from "svelte";
|
|
19
|
+
declare const __propDef: {
|
|
20
|
+
props: {
|
|
21
|
+
orgs?: any[] | undefined;
|
|
22
|
+
selectedorguuid?: any;
|
|
23
|
+
createOrgLink?: string | undefined;
|
|
24
|
+
loading?: boolean | undefined;
|
|
25
|
+
};
|
|
26
|
+
events: {
|
|
27
|
+
selectOrg: CustomEvent<any>;
|
|
28
|
+
} & {
|
|
29
|
+
[evt: string]: CustomEvent<any>;
|
|
30
|
+
};
|
|
31
|
+
slots: {};
|
|
32
|
+
exports?: undefined;
|
|
33
|
+
bindings?: undefined;
|
|
34
|
+
};
|
|
35
|
+
export {};
|