srcdev-nuxt-components 7.0.0 → 7.0.2
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/app/components/alert-mask/AlertMaskCore.vue +1 -1
- package/app/components/canvas-switcher/CanvasSwitcher.vue +1 -5
- package/app/components/carousel-basic/CarouselBasic.vue +1 -22
- package/app/components/deep-expanding-menu/DeepExpandingMenu.vue +5 -2
- package/app/components/display-avatar/DisplayAvatar.vue +1 -1
- package/app/components/display-chip/DisplayChip.vue +3 -20
- package/app/components/display-toast/DisplayToast.vue +1 -1
- package/app/components/display-toast/molecules/DefaultToastContent.vue +1 -1
- package/app/components/image-galleries/SliderGallery.vue +4 -17
- package/app/components/qr-code/DisplayQrCode.vue +1 -1
- package/app/components/responsive-header/NavigationItems.vue +1 -1
- package/app/components/responsive-header/ResponsiveHeader.vue +7 -40
- package/app/composables/useNavigationState.ts +1 -1
- package/app/types/components/canvas-switcher.d.ts +1 -0
- package/app/types/components/carousel-basic.d.ts +19 -0
- package/app/types/components/display-chip.d.ts +15 -0
- package/app/types/components/index.ts +10 -0
- package/app/types/components/responsive-header.d.ts +35 -0
- package/app/types/components/slider-gallery.d.ts +13 -0
- package/app/types/components/tabs.d.ts +5 -0
- package/nuxt.config.ts +1 -0
- package/package.json +14 -12
- package/types.d.ts +1 -3
- package/app/types/index.ts +0 -12
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
</template>
|
|
30
30
|
|
|
31
31
|
<script setup lang="ts">
|
|
32
|
-
import type { AlertMaskConfig } from "../../types/components
|
|
32
|
+
import type { AlertMaskConfig } from "../../types/components"
|
|
33
33
|
|
|
34
34
|
const props = defineProps({
|
|
35
35
|
config: Object as PropType<AlertMaskConfig>,
|
|
@@ -35,12 +35,8 @@
|
|
|
35
35
|
</div>
|
|
36
36
|
</template>
|
|
37
37
|
|
|
38
|
-
<script lang="ts">
|
|
39
|
-
export type MediaCanvas = "mobileCanvas" | "tabletCanvas" | "laptopCanvas" | "desktopCanvas" | "fullWidthCanvas"
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
38
|
<script setup lang="ts">
|
|
43
|
-
|
|
39
|
+
import type { MediaCanvas } from "../../types/components"
|
|
44
40
|
|
|
45
41
|
const canvasName = defineModel<MediaCanvas>("canvasName")
|
|
46
42
|
|
|
@@ -65,29 +65,8 @@
|
|
|
65
65
|
</section>
|
|
66
66
|
</template>
|
|
67
67
|
|
|
68
|
-
<script lang="ts">
|
|
69
|
-
export interface CarouselBasicItem {
|
|
70
|
-
id: number | string
|
|
71
|
-
url: string
|
|
72
|
-
alt: string
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
export interface CarouselModifiedItem {
|
|
76
|
-
id: number | string
|
|
77
|
-
url: string
|
|
78
|
-
alt: string
|
|
79
|
-
order: number
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
export interface ICarouselBasic {
|
|
83
|
-
items: CarouselBasicItem[] | CarouselModifiedItem[]
|
|
84
|
-
total: number
|
|
85
|
-
skip: number
|
|
86
|
-
limit: number
|
|
87
|
-
}
|
|
88
|
-
</script>
|
|
89
|
-
|
|
90
68
|
<script setup lang="ts">
|
|
69
|
+
import type { CarouselBasicItem, CarouselModifiedItem, ICarouselBasic } from "../../types/components"
|
|
91
70
|
import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core"
|
|
92
71
|
|
|
93
72
|
const props = defineProps({
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
</template>
|
|
26
26
|
|
|
27
27
|
<script setup lang="ts">
|
|
28
|
-
import type { ResponsiveHeaderNavItem } from "../../types"
|
|
28
|
+
import type { ResponsiveHeaderNavItem } from "../../types/components"
|
|
29
29
|
const props = defineProps({
|
|
30
30
|
tag: {
|
|
31
31
|
type: String,
|
|
@@ -134,7 +134,10 @@ watch(
|
|
|
134
134
|
left: calc(anchor(left) + 0px);
|
|
135
135
|
|
|
136
136
|
opacity: 0;
|
|
137
|
-
transition:
|
|
137
|
+
transition:
|
|
138
|
+
opacity 200ms,
|
|
139
|
+
display 200ms,
|
|
140
|
+
overlay 200ms;
|
|
138
141
|
transition-behavior: allow-discrete;
|
|
139
142
|
|
|
140
143
|
width: min(100%, 50vw);
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
<script lang="ts">
|
|
19
19
|
import DisplayChip from "../display-chip/DisplayChip.vue"
|
|
20
|
-
import type { DisplayChipProps, DisplayChipConfig } from "../../types"
|
|
20
|
+
import type { DisplayChipProps, DisplayChipConfig } from "../../types/components"
|
|
21
21
|
export interface AvatarProps {
|
|
22
22
|
as?: any
|
|
23
23
|
src?: string
|
|
@@ -6,30 +6,13 @@
|
|
|
6
6
|
</component>
|
|
7
7
|
</template>
|
|
8
8
|
|
|
9
|
-
<script lang="ts">
|
|
10
|
-
|
|
11
|
-
size: string
|
|
12
|
-
maskWidth: string
|
|
13
|
-
offset: string
|
|
14
|
-
angle: string
|
|
15
|
-
icon?: string
|
|
16
|
-
label?: string
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export interface DisplayChipProps {
|
|
20
|
-
tag?: "div" | "span"
|
|
21
|
-
shape?: "circle" | "square"
|
|
22
|
-
config?: DisplayChipConfig
|
|
23
|
-
styleClassPassthrough?: string | string[]
|
|
24
|
-
}
|
|
9
|
+
<script setup lang="ts">
|
|
10
|
+
import type { DisplayChipProps } from "../../types/components"
|
|
25
11
|
|
|
26
|
-
|
|
12
|
+
interface ChipSlots {
|
|
27
13
|
default(props?: {}): any
|
|
28
|
-
// content(props?: {}): any
|
|
29
14
|
}
|
|
30
|
-
</script>
|
|
31
15
|
|
|
32
|
-
<script setup lang="ts">
|
|
33
16
|
const props = withDefaults(defineProps<DisplayChipProps>(), {
|
|
34
17
|
tag: "div",
|
|
35
18
|
shape: "circle",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
</template>
|
|
30
30
|
|
|
31
31
|
<script setup lang="ts">
|
|
32
|
-
import type { DisplayToastTheme } from "../../../types/components
|
|
32
|
+
import type { DisplayToastTheme } from "../../../types/components"
|
|
33
33
|
|
|
34
34
|
interface DefaultToastContentProps {
|
|
35
35
|
theme: DisplayToastTheme
|
|
@@ -53,23 +53,8 @@
|
|
|
53
53
|
</div>
|
|
54
54
|
</template>
|
|
55
55
|
|
|
56
|
-
<script lang="ts">
|
|
57
|
-
export interface IGalleryData {
|
|
58
|
-
src: string
|
|
59
|
-
alt: string
|
|
60
|
-
stylist?: string
|
|
61
|
-
title?: string
|
|
62
|
-
category?: string
|
|
63
|
-
description?: string
|
|
64
|
-
thumbnail?: {
|
|
65
|
-
title: string
|
|
66
|
-
description: string
|
|
67
|
-
}
|
|
68
|
-
textBrightness: "light" | "dark"
|
|
69
|
-
}
|
|
70
|
-
</script>
|
|
71
|
-
|
|
72
56
|
<script setup lang="ts">
|
|
57
|
+
import type { IGalleryData } from "../../types/components"
|
|
73
58
|
const props = defineProps({
|
|
74
59
|
autoRun: {
|
|
75
60
|
type: Boolean,
|
|
@@ -301,7 +286,9 @@ onBeforeUnmount(() => {
|
|
|
301
286
|
justify-content: center;
|
|
302
287
|
color: var(--grayscale-text-body);
|
|
303
288
|
opacity: 1;
|
|
304
|
-
transition:
|
|
289
|
+
transition:
|
|
290
|
+
display 0.5s,
|
|
291
|
+
opacity 0.5s;
|
|
305
292
|
transition-behavior: allow-discrete;
|
|
306
293
|
|
|
307
294
|
&.galleryLoaded {
|
|
@@ -5,7 +5,9 @@
|
|
|
5
5
|
v-for="(navGroup, groupKey) in responsiveNavLinks"
|
|
6
6
|
:key="groupKey"
|
|
7
7
|
class="main-navigation-list"
|
|
8
|
-
:ref="
|
|
8
|
+
:ref="
|
|
9
|
+
(el: Element | ComponentPublicInstance | null) => setNavRef(String(groupKey), el as HTMLUListElement | null)
|
|
10
|
+
"
|
|
9
11
|
>
|
|
10
12
|
<li
|
|
11
13
|
v-for="(link, localIndex) in navGroup"
|
|
@@ -105,45 +107,8 @@
|
|
|
105
107
|
</div>
|
|
106
108
|
</template>
|
|
107
109
|
|
|
108
|
-
<script lang="ts">
|
|
109
|
-
export interface ResponsiveHeaderNavItem {
|
|
110
|
-
name: string
|
|
111
|
-
path?: string
|
|
112
|
-
isExternal?: boolean
|
|
113
|
-
childLinks?: ResponsiveHeaderNavItem[]
|
|
114
|
-
childLinksTitle?: string
|
|
115
|
-
iconName?: string
|
|
116
|
-
config?: ResponsiveHeaderItemRects
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
export interface ResponsiveHeaderProp {
|
|
120
|
-
[key: string]: ResponsiveHeaderNavItem[]
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
export interface IFlooredRect {
|
|
124
|
-
left: number
|
|
125
|
-
right: number
|
|
126
|
-
top: number
|
|
127
|
-
bottom: number
|
|
128
|
-
width: number
|
|
129
|
-
height: number
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
export interface ResponsiveHeaderItemRects {
|
|
133
|
-
left: number
|
|
134
|
-
right: number
|
|
135
|
-
width?: number
|
|
136
|
-
visible: boolean
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
export interface ResponsiveHeaderState {
|
|
140
|
-
hasSecondNav: boolean
|
|
141
|
-
navListVisibility: Record<string, boolean>
|
|
142
|
-
clonedNavLinks?: ResponsiveHeaderProp
|
|
143
|
-
}
|
|
144
|
-
</script>
|
|
145
|
-
|
|
146
110
|
<script setup lang="ts">
|
|
111
|
+
import type { ResponsiveHeaderProp, ResponsiveHeaderState, IFlooredRect } from "../../types/components"
|
|
147
112
|
import { useResizeObserver, onClickOutside } from "@vueuse/core"
|
|
148
113
|
|
|
149
114
|
const props = defineProps({
|
|
@@ -528,7 +493,9 @@ watch(
|
|
|
528
493
|
.main-navigation-item {
|
|
529
494
|
/* width: var(--_main-navigation-item-width); */
|
|
530
495
|
overflow: hidden;
|
|
531
|
-
transition:
|
|
496
|
+
transition:
|
|
497
|
+
opacity 0.2s ease-in-out,
|
|
498
|
+
visibility 0.2s ease-in-out;
|
|
532
499
|
padding-block: var(--_link-focus-visible-outline-width);
|
|
533
500
|
padding-inline: var(--_link-focus-visible-outline-width);
|
|
534
501
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type MediaCanvas = "mobileCanvas" | "tabletCanvas" | "laptopCanvas" | "desktopCanvas" | "fullWidthCanvas"
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface CarouselBasicItem {
|
|
2
|
+
id: number | string
|
|
3
|
+
url: string
|
|
4
|
+
alt: string
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export interface CarouselModifiedItem {
|
|
8
|
+
id: number | string
|
|
9
|
+
url: string
|
|
10
|
+
alt: string
|
|
11
|
+
order: number
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export interface ICarouselBasic {
|
|
15
|
+
items: CarouselBasicItem[] | CarouselModifiedItem[]
|
|
16
|
+
total: number
|
|
17
|
+
skip: number
|
|
18
|
+
limit: number
|
|
19
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface DisplayChipConfig {
|
|
2
|
+
size: string
|
|
3
|
+
maskWidth: string
|
|
4
|
+
offset: string
|
|
5
|
+
angle: string
|
|
6
|
+
icon?: string
|
|
7
|
+
label?: string
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export interface DisplayChipProps {
|
|
11
|
+
tag?: "div" | "span"
|
|
12
|
+
shape?: "circle" | "square"
|
|
13
|
+
config?: DisplayChipConfig
|
|
14
|
+
styleClassPassthrough?: string | string[]
|
|
15
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// Export types from the components directory
|
|
2
|
+
export * from "./carousel-basic.d"
|
|
3
|
+
export * from "./slider-gallery.d"
|
|
4
|
+
export * from "./canvas-switcher.d"
|
|
5
|
+
export * from "./display-chip.d"
|
|
6
|
+
export * from "./tabs.d"
|
|
7
|
+
export * from "./responsive-header.d"
|
|
8
|
+
export * from "./display-toast.d"
|
|
9
|
+
export * from "./qr-code.d"
|
|
10
|
+
export * from "./alert-mask-core.d"
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
export interface ResponsiveHeaderNavItem {
|
|
2
|
+
name: string
|
|
3
|
+
path?: string
|
|
4
|
+
isExternal?: boolean
|
|
5
|
+
childLinks?: ResponsiveHeaderNavItem[]
|
|
6
|
+
childLinksTitle?: string
|
|
7
|
+
iconName?: string
|
|
8
|
+
config?: ResponsiveHeaderItemRects
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface ResponsiveHeaderProp {
|
|
12
|
+
[key: string]: ResponsiveHeaderNavItem[]
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export interface IFlooredRect {
|
|
16
|
+
left: number
|
|
17
|
+
right: number
|
|
18
|
+
top: number
|
|
19
|
+
bottom: number
|
|
20
|
+
width: number
|
|
21
|
+
height: number
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface ResponsiveHeaderItemRects {
|
|
25
|
+
left: number
|
|
26
|
+
right: number
|
|
27
|
+
width?: number
|
|
28
|
+
visible: boolean
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export interface ResponsiveHeaderState {
|
|
32
|
+
hasSecondNav: boolean
|
|
33
|
+
navListVisibility: Record<string, boolean>
|
|
34
|
+
clonedNavLinks?: ResponsiveHeaderProp
|
|
35
|
+
}
|
package/nuxt.config.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "srcdev-nuxt-components",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "7.0.
|
|
4
|
+
"version": "7.0.2",
|
|
5
5
|
"main": "nuxt.config.ts",
|
|
6
6
|
"types": "types.d.ts",
|
|
7
7
|
"scripts": {
|
|
@@ -19,29 +19,31 @@
|
|
|
19
19
|
},
|
|
20
20
|
"files": [
|
|
21
21
|
"app/",
|
|
22
|
+
"types/",
|
|
23
|
+
"app/types/components/",
|
|
22
24
|
"nuxt.config.ts",
|
|
23
25
|
"types.d.ts"
|
|
24
26
|
],
|
|
25
27
|
"devDependencies": {
|
|
26
28
|
"@iconify-json/akar-icons": "1.2.7",
|
|
27
|
-
"@iconify-json/bi": "1.2.
|
|
29
|
+
"@iconify-json/bi": "1.2.7",
|
|
28
30
|
"@iconify-json/bitcoin-icons": "1.2.4",
|
|
29
31
|
"@iconify-json/gravity-ui": "1.2.10",
|
|
30
|
-
"@iconify-json/material-symbols": "1.2.
|
|
32
|
+
"@iconify-json/material-symbols": "1.2.53",
|
|
31
33
|
"@iconify-json/mdi": "1.2.3",
|
|
32
|
-
"@nuxt/eslint": "1.
|
|
33
|
-
"@nuxt/icon": "2.1
|
|
34
|
+
"@nuxt/eslint": "1.13.0",
|
|
35
|
+
"@nuxt/icon": "2.2.1",
|
|
34
36
|
"@nuxt/image": "2.0.0",
|
|
35
|
-
"@nuxtjs/i18n": "10.2.
|
|
36
|
-
"@vueuse/core": "14.
|
|
37
|
-
"eslint": "9.39.
|
|
37
|
+
"@nuxtjs/i18n": "10.2.1",
|
|
38
|
+
"@vueuse/core": "14.1.0",
|
|
39
|
+
"eslint": "9.39.2",
|
|
38
40
|
"focus-trap-vue": "4.1.0",
|
|
39
|
-
"nuxt": "4.
|
|
40
|
-
"nuxt-qrcode": "
|
|
41
|
+
"nuxt": "4.3.0",
|
|
42
|
+
"nuxt-qrcode": "0.4.8",
|
|
41
43
|
"patch-package": "8.0.1",
|
|
42
|
-
"release-it": "19.
|
|
44
|
+
"release-it": "19.2.4",
|
|
43
45
|
"typescript": "5.9.3",
|
|
44
|
-
"vue-tsc": "
|
|
46
|
+
"vue-tsc": "3.2.4"
|
|
45
47
|
},
|
|
46
48
|
"release-it": {
|
|
47
49
|
"$schema": "https://unpkg.com/release-it/schema/release-it.json",
|
package/types.d.ts
CHANGED
package/app/types/index.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export * from "../components/responsive-header/ResponsiveHeader.vue"
|
|
2
|
-
export * from "../components/display-chip/DisplayChip.vue"
|
|
3
|
-
export * from "../components/carousel-basic/CarouselBasic.vue"
|
|
4
|
-
export * from "../components/image-galleries/SliderGallery.vue"
|
|
5
|
-
export * from "../components/display-toast/DisplayToast.vue"
|
|
6
|
-
export * from "../components/alert-mask/AlertMaskCore.vue"
|
|
7
|
-
export * from "../components/canvas-switcher/CanvasSwitcher.vue"
|
|
8
|
-
|
|
9
|
-
// Export types from the components directory
|
|
10
|
-
export * from "./components/display-toast.d"
|
|
11
|
-
export * from "./components/qr-code.d"
|
|
12
|
-
export * from "./components/alert-mask-core.d"
|