@xen-orchestra/web-core 0.3.0 → 0.4.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.
- package/lib/components/input/VtsLabel.vue +76 -0
- package/lib/components/ui/actions-title/UiActionsTitle.vue +18 -0
- package/lib/components/ui/title/UiTitle.vue +39 -0
- package/lib/locales/de.json +1 -0
- package/lib/locales/en.json +1 -0
- package/lib/locales/fa.json +1 -0
- package/lib/locales/fr.json +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<!-- WIP -->
|
|
2
|
+
<template>
|
|
3
|
+
<div :class="accent" class="vts-label">
|
|
4
|
+
<VtsIcon accent="current" :icon class="left-icon" />
|
|
5
|
+
<span :class="{ required }" class="typo c2-semi-bold label"><slot /></span>
|
|
6
|
+
<!-- @TODO: Replace it by the VtsLink component when available -->
|
|
7
|
+
<a v-if="href" :href class="link">
|
|
8
|
+
<span class="typo p3-regular-underline">{{ $t('learn-more') }}</span>
|
|
9
|
+
<VtsIcon accent="current" :icon="faUpRightFromSquare" class="link-icon" />
|
|
10
|
+
</a>
|
|
11
|
+
</div>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script lang="ts" setup>
|
|
15
|
+
import VtsIcon from '@core/components/icon/VtsIcon.vue'
|
|
16
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
|
|
17
|
+
import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
|
|
18
|
+
|
|
19
|
+
defineProps<{
|
|
20
|
+
accent: 'brand' | 'warning' | 'danger'
|
|
21
|
+
icon?: IconDefinition
|
|
22
|
+
required?: boolean
|
|
23
|
+
href?: string
|
|
24
|
+
}>()
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<style lang="postcss" scoped>
|
|
28
|
+
/**
|
|
29
|
+
ACCENT
|
|
30
|
+
--vts-label--color
|
|
31
|
+
*/
|
|
32
|
+
.vts-label {
|
|
33
|
+
&.brand {
|
|
34
|
+
--vts-label--color: var(--color-neutral-txt-primary);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&.warning {
|
|
38
|
+
--vts-label--color: var(--color-warning-txt-base);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&.danger {
|
|
42
|
+
--vts-label--color: var(--color-danger-txt-base);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* IMPLEMENTATION */
|
|
47
|
+
.vts-label {
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
|
|
51
|
+
.left-icon {
|
|
52
|
+
margin-right: 0.8rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.label {
|
|
56
|
+
color: var(--vts-label--color);
|
|
57
|
+
|
|
58
|
+
&.required::after {
|
|
59
|
+
content: '*';
|
|
60
|
+
margin-left: 0.4rem;
|
|
61
|
+
color: var(--color-normal-txt-base);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.link {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
gap: 0.8rem;
|
|
69
|
+
margin-left: auto;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.link-icon {
|
|
73
|
+
font-size: 0.8rem;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<!-- v2 -->
|
|
2
|
+
<template>
|
|
3
|
+
<span class="actions-title typo p2-regular">
|
|
4
|
+
<slot />
|
|
5
|
+
</span>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script lang="ts" setup>
|
|
9
|
+
defineSlots<{
|
|
10
|
+
default(): any
|
|
11
|
+
}>()
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<style scoped lang="postcss">
|
|
15
|
+
.actions-title {
|
|
16
|
+
color: var(--color-neutral-txt-secondary);
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<!-- v2 -->
|
|
2
|
+
<template>
|
|
3
|
+
<div class="ui-title">
|
|
4
|
+
<div class="typo h4-medium label">
|
|
5
|
+
<slot />
|
|
6
|
+
</div>
|
|
7
|
+
<div v-if="slots.actions" class="actions">
|
|
8
|
+
<slot name="actions" />
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script setup lang="ts">
|
|
14
|
+
const slots = defineSlots<{
|
|
15
|
+
default(): any
|
|
16
|
+
actions?(): any
|
|
17
|
+
}>()
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<style scoped lang="postcss">
|
|
21
|
+
.ui-title {
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
gap: 2.4rem;
|
|
25
|
+
padding-block-end: 0.4rem;
|
|
26
|
+
border-bottom: 0.1rem solid var(--color-normal-txt-base);
|
|
27
|
+
|
|
28
|
+
.label {
|
|
29
|
+
color: var(--color-normal-txt-base);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.actions {
|
|
33
|
+
margin-inline-start: auto;
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
gap: 0.8rem;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
</style>
|
package/lib/locales/de.json
CHANGED
package/lib/locales/en.json
CHANGED
package/lib/locales/fa.json
CHANGED
package/lib/locales/fr.json
CHANGED