@invopop/popui 0.0.54 → 0.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.
|
@@ -1,78 +1,16 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import clsx from "clsx";
|
|
1
|
+
<script>import clsx from "clsx";
|
|
3
2
|
import ProfileAvatar from "./ProfileAvatar.svelte";
|
|
4
|
-
import { createFloatingActions } from "svelte-floating-ui";
|
|
5
|
-
import { Company, ExternalLink, Header, Skip, User } from "@invopop/ui-icons";
|
|
6
|
-
import DrawerContext from "./DrawerContext.svelte";
|
|
7
|
-
import { createEventDispatcher } from "svelte";
|
|
8
3
|
export let name = "";
|
|
9
4
|
export let orgName = "";
|
|
10
5
|
export let picture = "";
|
|
11
6
|
export let collapsed = false;
|
|
12
|
-
export let enableSwitchOrg = false;
|
|
13
|
-
const dispatch = createEventDispatcher();
|
|
14
|
-
const [floatingRef, floatingContent] = createFloatingActions({
|
|
15
|
-
strategy: "absolute",
|
|
16
|
-
placement: "top-start",
|
|
17
|
-
middleware: [offset(4)]
|
|
18
|
-
});
|
|
19
|
-
let hovered = false;
|
|
20
|
-
let leaveHoverTimeout = null;
|
|
21
7
|
$:
|
|
22
8
|
styles = clsx({ "p-[5px]": collapsed }, { "w-full pl-1.5 pr-2 py-[7px]": !collapsed });
|
|
23
|
-
$:
|
|
24
|
-
items = [
|
|
25
|
-
{
|
|
26
|
-
label: "Configure Profile",
|
|
27
|
-
value: "profile",
|
|
28
|
-
icon: User
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
label: "Configure Workspace",
|
|
32
|
-
value: "workspace",
|
|
33
|
-
icon: Header
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
label: `Configure ${orgName || "Organization"}`,
|
|
37
|
-
value: "organization",
|
|
38
|
-
icon: Company,
|
|
39
|
-
rightIcon: ExternalLink,
|
|
40
|
-
footer: true
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
label: "Switch Organization",
|
|
44
|
-
value: "switch",
|
|
45
|
-
icon: Skip,
|
|
46
|
-
rightIcon: ExternalLink,
|
|
47
|
-
footer: true
|
|
48
|
-
}
|
|
49
|
-
].filter((i) => {
|
|
50
|
-
if (i.value !== "switch")
|
|
51
|
-
return true;
|
|
52
|
-
return enableSwitchOrg;
|
|
53
|
-
});
|
|
54
|
-
function handleHover() {
|
|
55
|
-
if (leaveHoverTimeout) {
|
|
56
|
-
clearTimeout(leaveHoverTimeout);
|
|
57
|
-
}
|
|
58
|
-
hovered = true;
|
|
59
|
-
}
|
|
60
|
-
function handleBlur() {
|
|
61
|
-
leaveHoverTimeout = setTimeout(() => {
|
|
62
|
-
hovered = false;
|
|
63
|
-
}, 200);
|
|
64
|
-
}
|
|
65
|
-
function handleClickChild(event) {
|
|
66
|
-
dispatch("clickItem", event.detail);
|
|
67
|
-
}
|
|
68
9
|
</script>
|
|
69
10
|
|
|
70
11
|
<button
|
|
71
12
|
class="{styles} text-white text-base flex items-center justify-between space-x-1 focus:border-white-10 active:border-white-10 hover:bg-white-5 rounded"
|
|
72
13
|
on:click
|
|
73
|
-
on:mouseenter={handleHover}
|
|
74
|
-
on:mouseleave={handleBlur}
|
|
75
|
-
use:floatingRef
|
|
76
14
|
>
|
|
77
15
|
<span class="flex items-center space-x-2">
|
|
78
16
|
<ProfileAvatar {name} {picture} dark large />
|
|
@@ -84,14 +22,3 @@ function handleClickChild(event) {
|
|
|
84
22
|
{/if}
|
|
85
23
|
</span>
|
|
86
24
|
</button>
|
|
87
|
-
{#if hovered}
|
|
88
|
-
<div
|
|
89
|
-
use:floatingContent
|
|
90
|
-
role="contentinfo"
|
|
91
|
-
on:mouseenter={handleHover}
|
|
92
|
-
on:mouseleave={handleBlur}
|
|
93
|
-
class="z-30"
|
|
94
|
-
>
|
|
95
|
-
<DrawerContext on:click={handleClickChild} {items} />
|
|
96
|
-
</div>
|
|
97
|
-
{/if}
|
|
@@ -5,11 +5,9 @@ declare const __propDef: {
|
|
|
5
5
|
orgName?: string | undefined;
|
|
6
6
|
picture?: string | undefined;
|
|
7
7
|
collapsed?: boolean | undefined;
|
|
8
|
-
enableSwitchOrg?: boolean | undefined;
|
|
9
8
|
};
|
|
10
9
|
events: {
|
|
11
10
|
click: MouseEvent;
|
|
12
|
-
clickItem: CustomEvent<any>;
|
|
13
11
|
} & {
|
|
14
12
|
[evt: string]: CustomEvent<any>;
|
|
15
13
|
};
|