Skip to content

Commit 5b90530

Browse files
Piyush-r-bhaskarPiyush-r-bhaskar
committed
feat(core): some refactoring and new components, styles for plugin redesign
1 parent 979bfbf commit 5b90530

19 files changed

+1814
-58
lines changed

‎src/components/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@ export {default as Topology} from "./topology/Topology.vue";
88
export {default as Status} from "./misc/Status.vue";
99
export {default as TaskIcon} from "./misc/TaskIcon.vue";
1010
export {default as Collapsible} from "./misc/Collapsible.vue";
11+
export {default as CollapsibleV2} from "./plugins_v2/CollapsibleV2.vue";
12+
export {default as SubgroupCard} from "./misc/SubgroupCard.vue";
13+
export {default as ElementCard} from "./misc/ElementCard.vue";
1114

1215
// plugins
1316
export {default as SchemaToHtml} from "./plugins/SchemaToHtml.vue";
17+
export {default as SchemaToHtmlV2} from "./plugins_v2/SchemaToHtmlV2.vue";
1418
export {default as PluginIndex} from "./plugins/PluginIndex.vue";
1519

1620
// content

‎src/components/misc/ElementCard.vue‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<template>
2+
<a :href="hrefWithDefault">
3+
<div class="element-card" :class="{'is-active': isActive}">
4+
<div class="top-row">
5+
<h6 class="text-capitalize">
6+
{{ text }}
7+
</h6>
8+
<ChevronRight />
9+
</div>
10+
<div v-if="title">
11+
<slot name="markdown" :content="title.replace(/ *:(?![ /])/g, ': ')" />
12+
</div>
13+
<div class="plugin-info">
14+
<code class="plugin-class">{{ pluginClass }}</code>
15+
</div>
16+
</div>
17+
</a>
18+
</template>
19+
<script setup lang="ts">
20+
import {slugify} from "../../utils/url";
21+
import {computed} from "vue";
22+
import ChevronRight from "vue-material-design-icons/ChevronRight.vue";
23+
24+
const props = defineProps<{
25+
iconB64Svg: string,
26+
text: string,
27+
routePath: string
28+
pluginClass: string
29+
href?: string | undefined
30+
isActive?: boolean
31+
title?: string
32+
}>();
33+
34+
const hrefWithDefault = computed(() => props.href === undefined
35+
? `${props.routePath}/${slugify(props.text)}`
36+
: props.href);
37+
</script>
38+
39+
<style scoped lang="scss">
40+
@use "../../scss/variables" as variables;
41+
42+
a {
43+
display: block;
44+
height: 100%;
45+
text-decoration: none;
46+
}
47+
48+
.element-card {
49+
width: 100%;
50+
height: 100%;
51+
border-radius: 12px;
52+
border: 1px solid var(--kestra-io-token-color-border-secondary);
53+
padding: 1rem;
54+
background: var(--kestra-io-token-color-background-secondary);
55+
display: grid;
56+
grid-template-columns: 1fr;
57+
grid-template-rows: auto auto 1fr;
58+
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
59+
transition: 0.4s ease-out;
60+
61+
&:hover {
62+
border-color: var(--kestra-io-token-color-border-active);
63+
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
64+
transform: scale(1.025);
65+
}
66+
67+
&.is-active {
68+
border-color: variables.$primary;
69+
}
70+
71+
.top-row {
72+
display: flex;
73+
flex-direction: row;
74+
justify-content: space-between;
75+
align-items: baseline;
76+
min-width: 0;
77+
}
78+
79+
:deep(svg) {
80+
font-size: 1rem;
81+
color: variables.$purple-36 !important;
82+
}
83+
84+
h6 {
85+
color: variables.$white;
86+
font-size: 1rem;
87+
font-weight: 700;
88+
margin: 0;
89+
padding-top: 0;
90+
overflow: hidden;
91+
text-overflow: ellipsis;
92+
white-space: nowrap;
93+
flex: 1 1 auto;
94+
min-width: 0;
95+
}
96+
97+
.plugin-info {
98+
margin-top: 1rem;
99+
min-width: 50px;
100+
max-width: fit-content;
101+
max-height: fit-content;
102+
background: variables.$black-2;
103+
border-radius: 4px;
104+
padding: 0.5rem;
105+
font-size: 0.75rem;
106+
color: var(--ks-content-secondary);
107+
border: 1px solid variables.$black-3;
108+
109+
.plugin-class {
110+
color: variables.$purple-50 !important;
111+
font-size: 12px;
112+
text-overflow: ellipsis;
113+
overflow: hidden;
114+
white-space: nowrap;
115+
display: block;
116+
}
117+
}
118+
119+
:deep(p) {
120+
color: var(--ks-content-secondary);
121+
font-size: 12px !important;
122+
line-height: 1rem;
123+
margin: 0;
124+
margin-top: 0.5rem;
125+
overflow: hidden;
126+
display: -webkit-box;
127+
-webkit-line-clamp: 2;
128+
line-clamp: 2;
129+
-webkit-box-orient: vertical;
130+
}
131+
}
132+
</style>

‎src/components/misc/SubgroupCard.vue‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<template>
2+
<a :href="hrefWithDefault">
3+
<div class="plugin" :class="{'is-active': isActive}">
4+
<div class="top-row">
5+
<div class="icon-content">
6+
<img :src="iconB64Svg" :alt="`${text} icon`">
7+
</div>
8+
<div class="text-content">
9+
<h6>{{ text }}</h6>
10+
<p v-if="description" class="description">{{ description }}</p>
11+
</div>
12+
</div>
13+
<div class="footer">
14+
<hr>
15+
<div class="bottom-row">
16+
<div class="left">
17+
<p v-if="props.totalCount">{{ props.totalCount ?? 0 }} <span>Tasks</span></p>
18+
<p v-if="props.blueprintsCount">{{ props.blueprintsCount ?? 0 }} <span>Blueprints</span></p>
19+
</div>
20+
<ChevronRight />
21+
</div>
22+
</div>
23+
</div>
24+
</a>
25+
</template>
26+
<script setup lang="ts">
27+
import {computed} from "vue";
28+
import {slugify} from "../../utils/url";
29+
import ChevronRight from "vue-material-design-icons/ChevronRight.vue";
30+
31+
const props = withDefaults(defineProps<{
32+
iconB64Svg: string,
33+
text: string,
34+
routePath: string
35+
totalCount: number,
36+
description?: string,
37+
href?: string | undefined
38+
isActive?: boolean,
39+
blueprintsCount?: number
40+
}>(), {
41+
totalCount: 0,
42+
description: "",
43+
href: undefined,
44+
isActive: false,
45+
blueprintsCount: 0,
46+
});
47+
48+
const hrefWithDefault = computed(() => props.href === undefined
49+
? `${props.routePath}/${slugify(props.text)}`
50+
: props.href);
51+
52+
</script>
53+
54+
<style scoped lang="scss">
55+
@use "../../scss/variables" as variables;
56+
@use "../../scss/color-palette" as color-palette;
57+
58+
.plugin {
59+
width: 100%;
60+
height: 152px;
61+
border-radius: 12px;
62+
border: 1px solid var(--kestra-io-token-color-border-secondary);
63+
padding: 1rem;
64+
background: var(--kestra-io-token-color-background-secondary);
65+
display: flex;
66+
flex-direction: column;
67+
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
68+
transition: 0.4s ease-out;
69+
70+
&:hover {
71+
border-color: var(--kestra-io-token-color-border-active);
72+
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
73+
transform: scale(1.025);
74+
}
75+
76+
&.is-active {
77+
border-color: variables.$primary;
78+
}
79+
80+
.top-row {
81+
display: flex;
82+
flex-direction: row;
83+
gap: 1rem;
84+
align-items: flex-start;
85+
margin-bottom: 1rem;
86+
}
87+
88+
.icon-content {
89+
width: 60px;
90+
height: 60px;
91+
background: variables.$gray-100;
92+
border-radius: 8px;
93+
border: 1px solid variables.$white-2;
94+
display: flex;
95+
align-items: center;
96+
justify-content: center;
97+
flex-shrink: 0;
98+
99+
img {
100+
width: 45px;
101+
height: 45px;
102+
}
103+
}
104+
105+
.text-content {
106+
flex: 1;
107+
display: flex;
108+
flex-direction: column;
109+
gap: 0.5rem;
110+
overflow: hidden;
111+
112+
.description {
113+
color: var(--ks-content-secondary);
114+
font-size: 12px !important;
115+
line-height: 1rem;
116+
margin: 0;
117+
overflow: hidden;
118+
display: -webkit-box;
119+
line-clamp: 2;
120+
-webkit-line-clamp: 2;
121+
-webkit-box-orient: vertical;
122+
}
123+
}
124+
125+
h6 {
126+
color: variables.$white;
127+
font-size: 1rem;
128+
font-weight: 700;
129+
margin: 0;
130+
text-overflow: ellipsis;
131+
overflow: hidden;
132+
white-space: nowrap;
133+
padding-top: 0;
134+
}
135+
136+
hr {
137+
border: 1px solid var(--ks-border-primary);
138+
margin: 0;
139+
}
140+
141+
.footer {
142+
margin-top: auto;
143+
display: flex;
144+
flex-direction: column;
145+
}
146+
147+
.bottom-row {
148+
display: flex;
149+
justify-content: space-between;
150+
align-items: center;
151+
color: color-palette.$base-gray-300;
152+
height: 45px;
153+
154+
.left {
155+
display: flex;
156+
gap: 1rem;
157+
align-items: center;
158+
159+
p {
160+
margin: 0;
161+
font-weight: 700;
162+
font-size: 14px !important;
163+
}
164+
165+
span {
166+
color: color-palette.$base-gray-300;
167+
font-weight: normal;
168+
font-size: 12px;
169+
}
170+
}
171+
172+
:deep(svg) {
173+
font-size: 1rem;
174+
color: variables.$purple-36;
175+
}
176+
}
177+
}
178+
</style>

‎src/components/plugins/CollapsibleProperties.vue‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@
6161
extractTypeInfo,
6262
className,
6363
type JSONProperty,
64-
aggregateAllOf
64+
aggregateAllOf,
65+
isDynamic
6566
} from "../../utils/schemaUtils";
6667
import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
6768
import Collapsible from "../misc/Collapsible.vue";
@@ -104,18 +105,6 @@
104105
}
105106
);
106107
107-
const isDynamic = (property: JSONProperty): boolean => {
108-
if (property["$dynamic"] === true) {
109-
return true;
110-
}
111-
112-
if (property["$dynamic"] === false) {
113-
return false;
114-
}
115-
116-
return property.anyOf?.some(prop => prop["$dynamic"] === true) ?? false;
117-
};
118-
119108
function sortedAndAggregated(schema: Record<string, JSONProperty>): Record<string, JSONProperty> {
120109
const requiredKeys = [];
121110
const nonRequiredKeys = [];

0 commit comments

Comments
 (0)