@brumaombra/ui-vintage 0.7.12 → 0.7.13
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 +1 -1
- package/src/components/blog/TableOfContents.vue +1 -1
- package/src/components/empty-state-card/EmptyStateCard.vue +8 -4
- package/src/components/landing/landing-footer/LandingFooter.vue +8 -5
- package/src/components/loading-state-card/LoadingStateCard.vue +8 -4
- package/src/components/ui/card/CardTitle.vue +10 -5
- package/src/lib/common-types.ts +4 -1
- package/src/styles.css +1 -1
package/package.json
CHANGED
|
@@ -354,7 +354,7 @@ onUnmounted(() => {
|
|
|
354
354
|
<Teleport to="body">
|
|
355
355
|
<!-- Mobile persistent control -->
|
|
356
356
|
<Transition name="toc-tab">
|
|
357
|
-
<button v-if="!isDesktop && isDocked" ref="mobileTriggerRef" type="button" class="fixed top-
|
|
357
|
+
<button v-if="!isDesktop && isDocked" ref="mobileTriggerRef" type="button" class="fixed top-4/5 left-0 z-20 flex h-16 w-8 -translate-y-1/2 items-center justify-center rounded-r border border-l-0 border-(--border-light) bg-(--bg-card-light) text-(--text-secondary-light) transition-[background-color,color,transform] duration-200 hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) focus-visible:z-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 dark:border-(--border-dark) dark:bg-(--bg-card-dark) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark) motion-reduce:transition-none" :aria-label="t('uiVintage.blog.openTableOfContents')" :aria-expanded="isMobileOpen" aria-haspopup="dialog" aria-controls="toc-mobile-overlay" @click="openMobileToc">
|
|
358
358
|
<HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" aria-hidden="true" />
|
|
359
359
|
</button>
|
|
360
360
|
</Transition>
|
|
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
|
|
|
4
4
|
import { PackageIcon } from '@hugeicons/core-free-icons';
|
|
5
5
|
import { HugeiconsIcon } from '@hugeicons/vue';
|
|
6
6
|
import { Card, CardContent } from '../ui/card';
|
|
7
|
-
import type { HugeiconsIconDefinition } from '../../lib/common-types';
|
|
7
|
+
import type { HeadingLevel, HugeiconsIconDefinition } from '../../lib/common-types';
|
|
8
8
|
|
|
9
9
|
// Props
|
|
10
10
|
const props = withDefaults(defineProps<{
|
|
@@ -13,12 +13,14 @@ const props = withDefaults(defineProps<{
|
|
|
13
13
|
description?: string;
|
|
14
14
|
titleKey?: string;
|
|
15
15
|
descriptionKey?: string;
|
|
16
|
+
level?: HeadingLevel;
|
|
16
17
|
}>(), {
|
|
17
18
|
icon: () => PackageIcon,
|
|
18
19
|
title: '',
|
|
19
20
|
description: '',
|
|
20
21
|
titleKey: '',
|
|
21
|
-
descriptionKey: ''
|
|
22
|
+
descriptionKey: '',
|
|
23
|
+
level: 3
|
|
22
24
|
});
|
|
23
25
|
|
|
24
26
|
const { t } = useI18n();
|
|
@@ -46,9 +48,11 @@ const resolvedDescription = computed(() => props.description
|
|
|
46
48
|
</div>
|
|
47
49
|
|
|
48
50
|
<!-- Title -->
|
|
49
|
-
<
|
|
51
|
+
<component :is="`h${props.level}`"
|
|
52
|
+
v-if="resolvedTitle"
|
|
53
|
+
class="text-sm font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) md:text-lg">
|
|
50
54
|
{{ resolvedTitle }}
|
|
51
|
-
</
|
|
55
|
+
</component>
|
|
52
56
|
|
|
53
57
|
<!-- Description -->
|
|
54
58
|
<p v-if="resolvedDescription" class="max-w-md text-xs text-(--text-secondary-light) dark:text-(--text-secondary-dark) md:text-sm">
|
|
@@ -5,6 +5,7 @@ import { HugeiconsIcon } from '@hugeicons/vue';
|
|
|
5
5
|
import { computed, type Component, type HTMLAttributes } from 'vue';
|
|
6
6
|
import { useI18n } from 'vue-i18n';
|
|
7
7
|
import { cn } from '../../../lib/utils';
|
|
8
|
+
import type { HeadingLevel } from '../../../lib/common-types';
|
|
8
9
|
|
|
9
10
|
export interface LandingFooterLink {
|
|
10
11
|
id: string;
|
|
@@ -33,6 +34,7 @@ const props = withDefaults(defineProps<{
|
|
|
33
34
|
authorLink?: string;
|
|
34
35
|
year?: number;
|
|
35
36
|
showBottomBar?: boolean;
|
|
37
|
+
level?: HeadingLevel;
|
|
36
38
|
class?: HTMLAttributes['class'];
|
|
37
39
|
containerClass?: HTMLAttributes['class'];
|
|
38
40
|
brandClass?: HTMLAttributes['class'];
|
|
@@ -46,7 +48,8 @@ const props = withDefaults(defineProps<{
|
|
|
46
48
|
authorName: '',
|
|
47
49
|
authorLink: '',
|
|
48
50
|
year: () => new Date().getFullYear(),
|
|
49
|
-
showBottomBar: true
|
|
51
|
+
showBottomBar: true,
|
|
52
|
+
level: 3
|
|
50
53
|
});
|
|
51
54
|
|
|
52
55
|
const { t } = useI18n();
|
|
@@ -94,9 +97,9 @@ const getLinkProps = (link: LandingFooterLink) => {
|
|
|
94
97
|
<div v-if="hasSingleSection" :class="cn('min-w-0 md:flex md:justify-end', props.sectionsClass)">
|
|
95
98
|
<div class="md:text-right">
|
|
96
99
|
<!-- Section title -->
|
|
97
|
-
<
|
|
100
|
+
<component :is="`h${props.level}`" class="mb-4 font-semibold text-foreground">
|
|
98
101
|
{{ props.sections[0]?.title }}
|
|
99
|
-
</
|
|
102
|
+
</component>
|
|
100
103
|
|
|
101
104
|
<!-- Section links -->
|
|
102
105
|
<ul class="space-y-3 text-xs sm:text-sm">
|
|
@@ -113,9 +116,9 @@ const getLinkProps = (link: LandingFooterLink) => {
|
|
|
113
116
|
<div v-else class="flex flex-col gap-8 md:max-w-[60%] md:flex-row md:flex-wrap md:justify-end md:gap-16">
|
|
114
117
|
<div v-for="section in props.sections" :key="section.id" :class="cn('min-w-28', props.sectionsClass)">
|
|
115
118
|
<!-- Section title -->
|
|
116
|
-
<
|
|
119
|
+
<component :is="`h${props.level}`" class="mb-4 font-semibold text-foreground">
|
|
117
120
|
{{ section.title }}
|
|
118
|
-
</
|
|
121
|
+
</component>
|
|
119
122
|
|
|
120
123
|
<!-- Section links -->
|
|
121
124
|
<ul class="space-y-3 text-xs sm:text-sm">
|
|
@@ -4,17 +4,19 @@ import { useI18n } from 'vue-i18n';
|
|
|
4
4
|
import { Loading03Icon } from '@hugeicons/core-free-icons';
|
|
5
5
|
import { HugeiconsIcon } from '@hugeicons/vue';
|
|
6
6
|
import { Card, CardContent } from '../ui/card';
|
|
7
|
-
import type { HugeiconsIconDefinition } from '../../lib/common-types';
|
|
7
|
+
import type { HeadingLevel, HugeiconsIconDefinition } from '../../lib/common-types';
|
|
8
8
|
|
|
9
9
|
// Props
|
|
10
10
|
const props = withDefaults(defineProps<{
|
|
11
11
|
icon?: HugeiconsIconDefinition;
|
|
12
12
|
title?: string;
|
|
13
13
|
description?: string;
|
|
14
|
+
level?: HeadingLevel;
|
|
14
15
|
}>(), {
|
|
15
16
|
icon: () => Loading03Icon,
|
|
16
17
|
title: '',
|
|
17
|
-
description: ''
|
|
18
|
+
description: '',
|
|
19
|
+
level: 3
|
|
18
20
|
});
|
|
19
21
|
|
|
20
22
|
const { t } = useI18n();
|
|
@@ -31,9 +33,11 @@ const resolvedDescription = computed(() => props.description || t('uiVintage.com
|
|
|
31
33
|
</div>
|
|
32
34
|
|
|
33
35
|
<!-- Title -->
|
|
34
|
-
<
|
|
36
|
+
<component :is="`h${props.level}`"
|
|
37
|
+
v-if="resolvedTitle"
|
|
38
|
+
class="text-sm font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) md:text-lg">
|
|
35
39
|
{{ resolvedTitle }}
|
|
36
|
-
</
|
|
40
|
+
</component>
|
|
37
41
|
|
|
38
42
|
<!-- Description -->
|
|
39
43
|
<p v-if="resolvedDescription" class="max-w-md text-xs text-(--text-secondary-light) dark:text-(--text-secondary-dark) md:text-sm">
|
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import type { HTMLAttributes } from 'vue';
|
|
3
3
|
import { cn } from '../../../lib/utils';
|
|
4
|
+
import type { HeadingLevel } from '../../../lib/common-types';
|
|
4
5
|
|
|
5
6
|
// Props
|
|
6
|
-
const props = defineProps<{
|
|
7
|
+
const props = withDefaults(defineProps<{
|
|
7
8
|
class?: HTMLAttributes['class'];
|
|
8
|
-
|
|
9
|
+
level?: HeadingLevel;
|
|
10
|
+
}>(), {
|
|
11
|
+
level: 3
|
|
12
|
+
});
|
|
9
13
|
</script>
|
|
10
14
|
|
|
11
15
|
<template>
|
|
12
|
-
<
|
|
13
|
-
"
|
|
16
|
+
<component :is="`h${props.level}`"
|
|
17
|
+
data-slot="card-title"
|
|
18
|
+
:class="cn('leading-none font-semibold text-sm sm:text-base', props.class)">
|
|
14
19
|
<slot />
|
|
15
|
-
</
|
|
20
|
+
</component>
|
|
16
21
|
</template>
|
package/src/lib/common-types.ts
CHANGED
|
@@ -1,2 +1,5 @@
|
|
|
1
1
|
// Hugeicons icon definition type
|
|
2
|
-
export type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
|
|
2
|
+
export type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
|
|
3
|
+
|
|
4
|
+
// HTML heading levels supported by title components
|
|
5
|
+
export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
package/src/styles.css
CHANGED
|
@@ -28,7 +28,7 @@ html {
|
|
|
28
28
|
--button-primary-hover-light: #df8112;
|
|
29
29
|
--button-primary-dark: #f7a23c;
|
|
30
30
|
--button-primary-hover-dark: #ffb55b;
|
|
31
|
-
--button-primary-foreground-light:
|
|
31
|
+
--button-primary-foreground-light: var(--text-primary-light);
|
|
32
32
|
--button-primary-foreground-dark: #1b1307;
|
|
33
33
|
--button-secondary-light: #ffffff;
|
|
34
34
|
--button-secondary-dark: #171c23;
|