@appscode/design-system 2.17.29 → 2.17.31
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,162 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { defineProps, defineEmits, type Component, defineAsyncComponent, ref } from "vue";
|
|
3
|
+
import AcButton from "../../v3/button/Button.vue";
|
|
4
|
+
const Skeletons = defineAsyncComponent(() => import("../skeleton/Skeletons.vue"));
|
|
5
|
+
const Skeleton = defineAsyncComponent(() => import("../skeleton/Skeleton.vue"));
|
|
6
|
+
const LinkIcon = defineAsyncComponent(() => import("../icons/BillableInfo.vue"));
|
|
7
|
+
interface UsageRow {
|
|
8
|
+
icon?: Component;
|
|
9
|
+
label: string;
|
|
10
|
+
values: (string | number)[];
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
type Header = string | { label: string; button?: boolean; text?: string };
|
|
14
|
+
|
|
15
|
+
const props = withDefaults(
|
|
16
|
+
defineProps<{
|
|
17
|
+
title?: string;
|
|
18
|
+
thead?: Header[];
|
|
19
|
+
tbody?: UsageRow[];
|
|
20
|
+
isLoaderActive?: boolean;
|
|
21
|
+
}>(),
|
|
22
|
+
{
|
|
23
|
+
title: "Total Usage Data",
|
|
24
|
+
thead: () => [],
|
|
25
|
+
tbody: () => [],
|
|
26
|
+
isLoaderActive: false,
|
|
27
|
+
},
|
|
28
|
+
);
|
|
29
|
+
|
|
30
|
+
const emit = defineEmits<{
|
|
31
|
+
"header-button-click": [index: number];
|
|
32
|
+
}>();
|
|
33
|
+
|
|
34
|
+
const handleHeaderButtonClick = (index: number) => {
|
|
35
|
+
emit("header-button-click", index);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const hoveredRow = ref<number | null>(null);
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<div class="columns is-multiline">
|
|
43
|
+
<div class="column is-12">
|
|
44
|
+
<h5>{{ title }}</h5>
|
|
45
|
+
<div class="usage-table-card">
|
|
46
|
+
<div class="table-row thead">
|
|
47
|
+
<div class="table-cell has-text-weight-normal">{{ thead[0] }}</div>
|
|
48
|
+
<div class="table-cell has-text-weight-normal">{{ thead[1] }}</div>
|
|
49
|
+
<div
|
|
50
|
+
class="table-cell has-text-weight-normal has-background-white has-text-centered is-flex is-justify-content-center b-1 ml-40"
|
|
51
|
+
>
|
|
52
|
+
<span class="width-70 is-flex is-align-items-center is-justify-content-flex-end">{{ thead[2] }}</span>
|
|
53
|
+
<span class="b-r-1 mx-4"></span>
|
|
54
|
+
<span class="width-70 is-flex is-align-items-center">{{ thead[3] }}</span>
|
|
55
|
+
<span class="b-l-1 px-2 is-flex is-align-items-center is-clickable">
|
|
56
|
+
<ac-button @click="handleHeaderButtonClick(1)" modifier-classes="is-text has-text-primary p-0 height-16">
|
|
57
|
+
<LinkIcon />
|
|
58
|
+
</ac-button>
|
|
59
|
+
</span>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="table-cell has-text-weight-normal is-flex is-justify-content-end gap-5">
|
|
62
|
+
<div>{{ thead[4] }}</div>
|
|
63
|
+
<div class="is-flex is-clickable">
|
|
64
|
+
<ac-button modifier-classes="is-text has-text-primary p-0 height-16" @click="handleHeaderButtonClick(1)">
|
|
65
|
+
<LinkIcon />
|
|
66
|
+
</ac-button>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div v-for="(row, rowIndex) in tbody" :key="rowIndex" class="table-row">
|
|
72
|
+
<div class="table-cell">
|
|
73
|
+
<div class="is-flex gap-8">
|
|
74
|
+
<span class="icon" v-if="row.icon">
|
|
75
|
+
<component :is="row.icon" />
|
|
76
|
+
</span>
|
|
77
|
+
<span>{{ row.label }}</span>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<div class="table-cell has-text-weight-normal">
|
|
82
|
+
<div v-if="isLoaderActive">
|
|
83
|
+
<skeletons>
|
|
84
|
+
<template #default>
|
|
85
|
+
<Skeleton />
|
|
86
|
+
</template>
|
|
87
|
+
</skeletons>
|
|
88
|
+
</div>
|
|
89
|
+
<div v-else @mouseenter="hoveredRow = rowIndex" @mouseleave="hoveredRow = null">
|
|
90
|
+
<span>{{ row.values[0] }}</span>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div
|
|
95
|
+
class="table-cell has-text-weight-normal has-background-white has-text-centered is-flex is-justify-content-center b-1 ml-40 relative-cell"
|
|
96
|
+
:class="{ 'highlighted-cell': hoveredRow === rowIndex }"
|
|
97
|
+
>
|
|
98
|
+
<div v-if="hoveredRow === rowIndex" class="tooltip">Sum = ({{ row.values[1] }} + {{ row.values[2] }})</div>
|
|
99
|
+
|
|
100
|
+
<span class="width-70 is-flex is-justify-content-flex-end">
|
|
101
|
+
<Skeleton v-if="isLoaderActive" />
|
|
102
|
+
<template v-else>{{ row.values[1] }}</template>
|
|
103
|
+
</span>
|
|
104
|
+
<span class="b-r-1 mx-4"></span>
|
|
105
|
+
<span class="width-70 is-flex">
|
|
106
|
+
<Skeleton v-if="isLoaderActive" />
|
|
107
|
+
<template v-else>{{ row.values[2] }}</template>
|
|
108
|
+
</span>
|
|
109
|
+
<span class="width-30"></span>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="table-cell has-text-weight-normal">
|
|
112
|
+
<div v-if="isLoaderActive">
|
|
113
|
+
<skeletons>
|
|
114
|
+
<template #default>
|
|
115
|
+
<Skeleton />
|
|
116
|
+
</template>
|
|
117
|
+
</skeletons>
|
|
118
|
+
</div>
|
|
119
|
+
<div v-else>{{ row.values[3] }}</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</template>
|
|
126
|
+
|
|
127
|
+
<style scoped>
|
|
128
|
+
.highlighted-cell {
|
|
129
|
+
border: 1px dashed #333 !important;
|
|
130
|
+
background-color: #f1f1f1 !important;
|
|
131
|
+
position: relative;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.relative-cell {
|
|
135
|
+
position: relative;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.tooltip {
|
|
139
|
+
position: absolute;
|
|
140
|
+
top: -26px;
|
|
141
|
+
left: 50%;
|
|
142
|
+
transform: translateX(-50%);
|
|
143
|
+
background: #333;
|
|
144
|
+
color: #fff;
|
|
145
|
+
padding: 4px 8px;
|
|
146
|
+
font-size: 12px;
|
|
147
|
+
border-radius: 4px;
|
|
148
|
+
white-space: nowrap;
|
|
149
|
+
z-index: 10;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.tooltip::after {
|
|
153
|
+
content: "";
|
|
154
|
+
position: absolute;
|
|
155
|
+
bottom: -4px;
|
|
156
|
+
left: 50%;
|
|
157
|
+
transform: translateX(-50%);
|
|
158
|
+
border-width: 5px;
|
|
159
|
+
border-style: solid;
|
|
160
|
+
border-color: #333 transparent transparent;
|
|
161
|
+
}
|
|
162
|
+
</style>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
|
|
3
|
+
<!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE -->
|
|
4
|
+
<path
|
|
5
|
+
fill="none"
|
|
6
|
+
stroke="currentColor"
|
|
7
|
+
stroke-linecap="round"
|
|
8
|
+
stroke-linejoin="round"
|
|
9
|
+
stroke-width="2"
|
|
10
|
+
d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
|
|
11
|
+
/>
|
|
12
|
+
</svg>
|
|
13
|
+
</template>
|