@appscode/design-system 2.2.34 → 2.2.36
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/package.json
CHANGED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed, defineAsyncComponent, ref } from "vue";
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
currentApp: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
|
|
6
|
+
baseUrl: string;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
10
|
+
currentApp: "platform",
|
|
11
|
+
baseUrl: "https://appscode.com",
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
|
|
15
|
+
const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
|
|
16
|
+
const showDrawer = ref(false);
|
|
17
|
+
|
|
18
|
+
function handleIsActiveChange(isActive: string) {
|
|
19
|
+
showDrawer.value = !!isActive?.length;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const getUrl = (products: Props["currentApp"]) => {
|
|
23
|
+
return `${props.baseUrl}/${products}`;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const appList = [
|
|
27
|
+
{
|
|
28
|
+
name: "console",
|
|
29
|
+
url: getUrl("console"),
|
|
30
|
+
icon_url: "https://cdn.appscode.com/images/products/console/console_512x512.svg",
|
|
31
|
+
title: "Console",
|
|
32
|
+
sub_title: "Manage your kubernetes clusters",
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
name: "db",
|
|
36
|
+
url: getUrl("db"),
|
|
37
|
+
icon_url: "https://cdn.appscode.com/images/products/kubedb/kubedb-512x512_1.svg",
|
|
38
|
+
title: "KubeDB",
|
|
39
|
+
sub_title: "Manage your databases",
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: "grafana",
|
|
43
|
+
url: getUrl("grafana"),
|
|
44
|
+
icon_url: "https://cdn.appscode.com/images/products/others/logos/grafana.svg",
|
|
45
|
+
title: "Grafana",
|
|
46
|
+
sub_title: "Analyze your activities",
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
name: "selfhost",
|
|
50
|
+
url: getUrl("selfhost"),
|
|
51
|
+
icon_url: "https://cdn.appscode.com/images/products/selfhost/logos/selfhost.svg",
|
|
52
|
+
title: "SelfHost",
|
|
53
|
+
sub_title: "Host AppsCode on your own cluster",
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
name: "billing",
|
|
57
|
+
url: getUrl("billing"),
|
|
58
|
+
icon_url: "https://cdn.appscode.com/images/products/billing/logos/billing.svg",
|
|
59
|
+
title: "Billing",
|
|
60
|
+
sub_title: "Manage your contracts, licenses & billings",
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
name: "learn",
|
|
64
|
+
url: getUrl("learn"),
|
|
65
|
+
icon_url: "https://cdn.appscode.com/images/products/learn/logos/learn.svg",
|
|
66
|
+
title: "Learn",
|
|
67
|
+
sub_title: "Be an Expert in Cloud Native technologies",
|
|
68
|
+
},
|
|
69
|
+
];
|
|
70
|
+
|
|
71
|
+
const isSelfHosted = computed(() => {
|
|
72
|
+
const list = ["https://appscode.ninja", "https://appscode.com", "http://bb.test:8080"];
|
|
73
|
+
return !list.includes(props.baseUrl);
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
const filteredAppList = appList.filter((element) => {
|
|
77
|
+
// remove own app from dropdown
|
|
78
|
+
if (element.name === props.currentApp) return false;
|
|
79
|
+
|
|
80
|
+
// remove billing selfhost & learn from selfhost mode
|
|
81
|
+
let selfHostList = ["billing", "selfhost", "learn"];
|
|
82
|
+
if (isSelfHosted.value && selfHostList.includes(element.name)) return false;
|
|
83
|
+
|
|
84
|
+
return true;
|
|
85
|
+
});
|
|
86
|
+
</script>
|
|
87
|
+
|
|
88
|
+
<template>
|
|
89
|
+
<navbar-item @on-is-active-change="handleIsActiveChange">
|
|
90
|
+
<template #navbar-item>
|
|
91
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
92
|
+
<path
|
|
93
|
+
d="M6.66667 2H2V6.66667H6.66667V2Z"
|
|
94
|
+
stroke="#061B2D"
|
|
95
|
+
stroke-width="1.5"
|
|
96
|
+
stroke-linecap="round"
|
|
97
|
+
stroke-linejoin="round"
|
|
98
|
+
/>
|
|
99
|
+
<path
|
|
100
|
+
d="M14 2H9.33337V6.66667H14V2Z"
|
|
101
|
+
stroke="#061B2D"
|
|
102
|
+
stroke-width="1.5"
|
|
103
|
+
stroke-linecap="round"
|
|
104
|
+
stroke-linejoin="round"
|
|
105
|
+
/>
|
|
106
|
+
<path
|
|
107
|
+
d="M14 9.33334H9.33337V14H14V9.33334Z"
|
|
108
|
+
stroke="#061B2D"
|
|
109
|
+
stroke-width="1.5"
|
|
110
|
+
stroke-linecap="round"
|
|
111
|
+
stroke-linejoin="round"
|
|
112
|
+
/>
|
|
113
|
+
<path
|
|
114
|
+
d="M6.66667 9.33334H2V14H6.66667V9.33334Z"
|
|
115
|
+
stroke="#061B2D"
|
|
116
|
+
stroke-width="1.5"
|
|
117
|
+
stroke-linecap="round"
|
|
118
|
+
stroke-linejoin="round"
|
|
119
|
+
/>
|
|
120
|
+
</svg>
|
|
121
|
+
</template>
|
|
122
|
+
<template #navbar-content>
|
|
123
|
+
<transition>
|
|
124
|
+
<div v-if="showDrawer">
|
|
125
|
+
<navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
|
|
126
|
+
<ul class="ac-scrollbar p-0 app-drawer">
|
|
127
|
+
<li v-for="app in filteredAppList" :key="app.url">
|
|
128
|
+
<a :href="app.url">
|
|
129
|
+
<article class="media">
|
|
130
|
+
<figure class="media-left">
|
|
131
|
+
<p class="image">
|
|
132
|
+
<img :src="app.icon_url" />
|
|
133
|
+
</p>
|
|
134
|
+
</figure>
|
|
135
|
+
<div class="media-content">
|
|
136
|
+
<div class="content">
|
|
137
|
+
<p>
|
|
138
|
+
<strong>{{ app.title }}</strong>
|
|
139
|
+
<span>{{ app.sub_title }}</span>
|
|
140
|
+
</p>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</article>
|
|
144
|
+
</a>
|
|
145
|
+
</li>
|
|
146
|
+
</ul>
|
|
147
|
+
</navbar-item-content>
|
|
148
|
+
</div>
|
|
149
|
+
</transition>
|
|
150
|
+
</template>
|
|
151
|
+
</navbar-item>
|
|
152
|
+
</template>
|
|
153
|
+
|
|
154
|
+
<style scoped>
|
|
155
|
+
.v-enter-active,
|
|
156
|
+
.v-leave-active {
|
|
157
|
+
transition: opacity 0.5s ease;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.v-enter-from,
|
|
161
|
+
.v-leave-to {
|
|
162
|
+
opacity: 0;
|
|
163
|
+
}
|
|
164
|
+
</style>
|