srcdev-nuxt-components 6.3.0 → 7.0.1

package/app/components/alert-mask/AlertMaskCore.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import type { AlertMaskConfig } from "../../types/components/alert-mask-core"
+import type { AlertMaskConfig } from "../../types/components"
 
 const props = defineProps({
   config: Object as PropType<AlertMaskConfig>,

package/app/components/canvas-switcher/CanvasSwitcher.vue

@@ -35,12 +35,8 @@
   </div>
 </template>
 
-<script lang="ts">
-export type MediaCanvas = "mobileCanvas" | "tabletCanvas" | "laptopCanvas" | "desktopCanvas" | "fullWidthCanvas"
-</script>
-
 <script setup lang="ts">
-// import type { MediaCanvas } from "@/types"
+import type { MediaCanvas } from "../../types/components"
 
 const canvasName = defineModel<MediaCanvas>("canvasName")
 

package/app/components/carousel-basic/CarouselBasic.vue

@@ -65,29 +65,8 @@
   </section>
 </template>
 
-<script lang="ts">
-export interface CarouselBasicItem {
-  id: number | string
-  url: string
-  alt: string
-}
-
-export interface CarouselModifiedItem {
-  id: number | string
-  url: string
-  alt: string
-  order: number
-}
-
-export interface ICarouselBasic {
-  items: CarouselBasicItem[] | CarouselModifiedItem[]
-  total: number
-  skip: number
-  limit: number
-}
-</script>
-
 <script setup lang="ts">
+import type { CarouselBasicItem, CarouselModifiedItem, ICarouselBasic } from "../../types/components"
 import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core"
 
 const props = defineProps({

package/app/components/deep-expanding-menu/DeepExpandingMenu.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ResponsiveHeaderNavItem } from "../../types"
+import type { ResponsiveHeaderNavItem } from "../../types/components"
 const props = defineProps({
   tag: {
     type: String,
@@ -134,7 +134,10 @@ watch(
           left: calc(anchor(left) + 0px);
 
           opacity: 0;
-          transition: opacity 200ms, display 200ms, overlay 200ms;
+          transition:
+            opacity 200ms,
+            display 200ms,
+            overlay 200ms;
           transition-behavior: allow-discrete;
 
           width: min(100%, 50vw);

package/app/components/display-avatar/DisplayAvatar.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import DisplayChip from "../display-chip/DisplayChip.vue"
-import type { DisplayChipProps, DisplayChipConfig } from "../../types"
+import type { DisplayChipProps, DisplayChipConfig } from "../../types/components"
 export interface AvatarProps {
   as?: any
   src?: string

package/app/components/display-chip/DisplayChip.vue

@@ -6,30 +6,20 @@
   </component>
 </template>
 
-<script lang="ts">
-export interface DisplayChipConfig {
-  size: string
-  maskWidth: string
-  offset: string
-  angle: string
-  icon?: string
-  label?: string
-}
+<script setup lang="ts">
+import type { DisplayChipConfig } from "../../types/components"
 
-export interface DisplayChipProps {
+interface DisplayChipProps {
   tag?: "div" | "span"
   shape?: "circle" | "square"
   config?: DisplayChipConfig
   styleClassPassthrough?: string | string[]
 }
 
-export interface ChipSlots {
+interface ChipSlots {
   default(props?: {}): any
-  // content(props?: {}): any
 }
-</script>
 
-<script setup lang="ts">
 const props = withDefaults(defineProps<DisplayChipProps>(), {
   tag: "div",
   shape: "circle",

package/app/components/display-prompt/DisplayPromptCore.vue

@@ -6,7 +6,7 @@
     ref="promptElementRef"
     tabindex="0"
   >
-    <div class="display-prompt-wrapper" :class="[theme, elementClasses]" data-test-id="display-prompt">
+    <div class="display-prompt-wrapper" :data-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
       <div class="display-prompt-inner">
         <div class="display-prompt-icon" data-test-id="prompt-icon" aria-hidden="true">
           <slot name="customDecoratorIcon">
@@ -197,9 +197,7 @@ onMounted(async () => {
         border-radius: 50%;
         outline: 1px solid var(--colour-theme-3);
 
-        transition:
-          border 200ms ease-in-out,
-          outline 200ms ease-in-out;
+        transition: border 200ms ease-in-out, outline 200ms ease-in-out;
 
         &:hover {
           cursor: pointer;

package/app/components/display-toast/DisplayToast.vue

@@ -8,11 +8,11 @@
         elementClasses,
         cssStateClass,
         positionClasses,
-        theme,
         {
           'has-theme': !slots.default,
         },
       ]"
+      :data-theme="theme"
       :role="toastRole"
       :aria-live="ariaLive"
       :tabindex="slots.default ? undefined : '0'"
@@ -54,7 +54,7 @@ import type {
   DisplayToastPosition,
   DisplayToastAlignment,
   ToastSlots,
-} from "../../types/components/display-toast.d"
+} from "../../types/components"
 
 const props = withDefaults(defineProps<DisplayToastProps>(), {
   config: () => ({

package/app/components/display-toast/molecules/DefaultToastContent.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import type { DisplayToastTheme } from "../../../types/components/display-toast.d"
+import type { DisplayToastTheme } from "../../../types/components"
 
 interface DefaultToastContentProps {
   theme: DisplayToastTheme

package/app/components/image-galleries/SliderGallery.vue

@@ -53,23 +53,8 @@
   </div>
 </template>
 
-<script lang="ts">
-export interface IGalleryData {
-  src: string
-  alt: string
-  stylist?: string
-  title?: string
-  category?: string
-  description?: string
-  thumbnail?: {
-    title: string
-    description: string
-  }
-  textBrightness: "light" | "dark"
-}
-</script>
-
 <script setup lang="ts">
+import type { IGalleryData } from "../../types/components"
 const props = defineProps({
   autoRun: {
     type: Boolean,
@@ -301,7 +286,9 @@ onBeforeUnmount(() => {
     justify-content: center;
     color: var(--grayscale-text-body);
     opacity: 1;
-    transition: display 0.5s, opacity 0.5s;
+    transition:
+      display 0.5s,
+      opacity 0.5s;
     transition-behavior: allow-discrete;
 
     &.galleryLoaded {

package/app/components/qr-code/DisplayQrCode.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import type { QrCodeVariant } from "~/types/components/qr-code" // Adjust the import path as needed
+import type { QrCodeVariant } from "../../types/components"
 
 const props = defineProps({
   qrValue: {

package/app/components/responsive-header/NavigationItems.vue

@@ -79,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ResponsiveHeaderState } from "@/types"
+import type { ResponsiveHeaderState } from "../../types/components"
 
 const props = defineProps({
   mainNavigationState: {

package/app/components/responsive-header/ResponsiveHeader.vue

@@ -5,7 +5,9 @@
         v-for="(navGroup, groupKey) in responsiveNavLinks"
         :key="groupKey"
         class="main-navigation-list"
-        :ref="(el: Element | ComponentPublicInstance | null) => setNavRef(String(groupKey), el as HTMLUListElement | null)"
+        :ref="
+          (el: Element | ComponentPublicInstance | null) => setNavRef(String(groupKey), el as HTMLUListElement | null)
+        "
       >
         <li
           v-for="(link, localIndex) in navGroup"
@@ -105,45 +107,8 @@
   </div>
 </template>
 
-<script lang="ts">
-export interface ResponsiveHeaderNavItem {
-  name: string
-  path?: string
-  isExternal?: boolean
-  childLinks?: ResponsiveHeaderNavItem[]
-  childLinksTitle?: string
-  iconName?: string
-  config?: ResponsiveHeaderItemRects
-}
-
-export interface ResponsiveHeaderProp {
-  [key: string]: ResponsiveHeaderNavItem[]
-}
-
-export interface IFlooredRect {
-  left: number
-  right: number
-  top: number
-  bottom: number
-  width: number
-  height: number
-}
-
-export interface ResponsiveHeaderItemRects {
-  left: number
-  right: number
-  width?: number
-  visible: boolean
-}
-
-export interface ResponsiveHeaderState {
-  hasSecondNav: boolean
-  navListVisibility: Record<string, boolean>
-  clonedNavLinks?: ResponsiveHeaderProp
-}
-</script>
-
 <script setup lang="ts">
+import type { ResponsiveHeaderProp, ResponsiveHeaderState, IFlooredRect } from "../../types/components"
 import { useResizeObserver, onClickOutside } from "@vueuse/core"
 
 const props = defineProps({
@@ -528,7 +493,9 @@ watch(
       .main-navigation-item {
         /* width: var(--_main-navigation-item-width); */
         overflow: hidden;
-        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+        transition:
+          opacity 0.2s ease-in-out,
+          visibility 0.2s ease-in-out;
         padding-block: var(--_link-focus-visible-outline-width);
         padding-inline: var(--_link-focus-visible-outline-width);
 

package/app/composables/useNavigationState.ts

@@ -1,4 +1,4 @@
-import type { IFlooredRect } from "@/types"
+import type { IFlooredRect } from "../types/components"
 
 export const useNavigationState = () => {
   // Simple reactive refs that persist across route changes using useState

package/app/types/components/canvas-switcher.d.ts

@@ -0,0 +1 @@
+export type MediaCanvas = "mobileCanvas" | "tabletCanvas" | "laptopCanvas" | "desktopCanvas" | "fullWidthCanvas"

package/app/types/components/carousel-basic.d.ts

@@ -0,0 +1,19 @@
+export interface CarouselBasicItem {
+  id: number | string
+  url: string
+  alt: string
+}
+
+export interface CarouselModifiedItem {
+  id: number | string
+  url: string
+  alt: string
+  order: number
+}
+
+export interface ICarouselBasic {
+  items: CarouselBasicItem[] | CarouselModifiedItem[]
+  total: number
+  skip: number
+  limit: number
+}

package/app/types/components/display-chip.d.ts

@@ -0,0 +1,8 @@
+export interface DisplayChipConfig {
+  size: string
+  maskWidth: string
+  offset: string
+  angle: string
+  icon?: string
+  label?: string
+}

package/app/types/components/index.ts

@@ -0,0 +1,10 @@
+// Export types from the components directory
+export * from "./carousel-basic.d"
+export * from "./slider-gallery.d"
+export * from "./canvas-switcher.d"
+export * from "./display-chip.d"
+export * from "./tabs.d"
+export * from "./responsive-header.d"
+export * from "./display-toast.d"
+export * from "./qr-code.d"
+export * from "./alert-mask-core.d"

package/app/types/components/responsive-header.d.ts

@@ -0,0 +1,35 @@
+export interface ResponsiveHeaderNavItem {
+  name: string
+  path?: string
+  isExternal?: boolean
+  childLinks?: ResponsiveHeaderNavItem[]
+  childLinksTitle?: string
+  iconName?: string
+  config?: ResponsiveHeaderItemRects
+}
+
+export interface ResponsiveHeaderProp {
+  [key: string]: ResponsiveHeaderNavItem[]
+}
+
+export interface IFlooredRect {
+  left: number
+  right: number
+  top: number
+  bottom: number
+  width: number
+  height: number
+}
+
+export interface ResponsiveHeaderItemRects {
+  left: number
+  right: number
+  width?: number
+  visible: boolean
+}
+
+export interface ResponsiveHeaderState {
+  hasSecondNav: boolean
+  navListVisibility: Record<string, boolean>
+  clonedNavLinks?: ResponsiveHeaderProp
+}

package/app/types/components/slider-gallery.d.ts

@@ -0,0 +1,13 @@
+export interface IGalleryData {
+  src: string
+  alt: string
+  stylist?: string
+  title?: string
+  category?: string
+  description?: string
+  thumbnail?: {
+    title: string
+    description: string
+  }
+  textBrightness: "light" | "dark"
+}

package/app/types/components/tabs.d.ts

@@ -0,0 +1,5 @@
+export interface ITabNav {
+  action?: string
+  name: string
+  path?: string
+}

package/nuxt.config.ts

@@ -42,5 +42,6 @@ export default defineNuxtConfig({
   typescript: {
     includeWorkspace: true,
     strict: true,
+    typeCheck: true,
   },
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.3.0",
+  "version": "7.0.1",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "scripts": {
@@ -19,29 +19,31 @@
   },
   "files": [
     "app/",
+    "types/",
+    "app/types/components/",
     "nuxt.config.ts",
     "types.d.ts"
   ],
   "devDependencies": {
     "@iconify-json/akar-icons": "1.2.7",
-    "@iconify-json/bi": "1.2.6",
+    "@iconify-json/bi": "1.2.7",
     "@iconify-json/bitcoin-icons": "1.2.4",
     "@iconify-json/gravity-ui": "1.2.10",
-    "@iconify-json/material-symbols": "1.2.44",
+    "@iconify-json/material-symbols": "1.2.53",
     "@iconify-json/mdi": "1.2.3",
-    "@nuxt/eslint": "1.10.0",
-    "@nuxt/icon": "2.1.0",
+    "@nuxt/eslint": "1.13.0",
+    "@nuxt/icon": "2.2.1",
     "@nuxt/image": "2.0.0",
-    "@nuxtjs/i18n": "10.2.0",
-    "@vueuse/core": "14.0.0",
-    "eslint": "9.39.1",
+    "@nuxtjs/i18n": "10.2.1",
+    "@vueuse/core": "14.1.0",
+    "eslint": "9.39.2",
     "focus-trap-vue": "4.1.0",
-    "nuxt": "4.2.1",
-    "nuxt-qrcode": "^0.4.8",
+    "nuxt": "4.3.0",
+    "nuxt-qrcode": "0.4.8",
     "patch-package": "8.0.1",
-    "release-it": "19.0.6",
+    "release-it": "19.2.4",
     "typescript": "5.9.3",
-    "vue-tsc": "^3.2.1"
+    "vue-tsc": "3.2.4"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",

package/types.d.ts

@@ -1,4 +1,2 @@
 // Layer type exports for consumers
-export * from "./app/types/components/display-toast.d"
-export * from "./app/types/components/qr-code.d"
-export * from "./app/types/components/alert-mask-core.d"
+export * from "./app/types/components"

package/app/types/index.ts

@@ -1,12 +0,0 @@
-export * from "../components/responsive-header/ResponsiveHeader.vue"
-export * from "../components/display-chip/DisplayChip.vue"
-export * from "../components/carousel-basic/CarouselBasic.vue"
-export * from "../components/image-galleries/SliderGallery.vue"
-export * from "../components/display-toast/DisplayToast.vue"
-export * from "../components/alert-mask/AlertMaskCore.vue"
-export * from "../components/canvas-switcher/CanvasSwitcher.vue"
-
-// Export types from the components directory
-export * from "./components/display-toast.d"
-export * from "./components/qr-code.d"
-export * from "./components/alert-mask-core.d"