srcdev-nuxt-components 7.0.3 → 8.0.0

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

@@ -32,7 +32,10 @@
 import type { AlertMaskConfig } from "../../types/components"
 
 const props = defineProps({
-  config: Object as PropType<AlertMaskConfig>,
+  config: {
+    type: Object as PropType<AlertMaskConfig>,
+    default: () => ({}),
+  },
   styleClassPassthrough: {
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],

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

@@ -66,7 +66,6 @@
 </template>
 
 <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/display-avatar/DisplayAvatar.vue

@@ -1,7 +1,6 @@
 <template>
   <component
     :is="props.chip ? DisplayChip : as"
-    tag="div"
     v-bind="props.chip ? (typeof props.chip === 'object' ? { config: props.chip } : { config: chipDefaultConfig }) : {}"
     class="display-avatar"
     :class="[size, elementClasses]"
@@ -15,33 +14,54 @@
   </component>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import DisplayChip from "../display-chip/DisplayChip.vue"
 import type { DisplayChipProps } from "../../types/components"
-export interface AvatarProps {
-  as?: any
-  src?: string
-  alt?: string
-  text?: string
-  size?: "xs" | "s" | "md" | "lg" | "xl" | string
-  chip?: boolean | DisplayChipProps
-  class?: any
-  style?: any
-  styleClassPassthrough?: string | string[]
-}
 
 export interface AvatarSlots {
   default(props?: {}): any
   icon(props?: {}): any
 }
-</script>
 
-<script setup lang="ts">
-const props = withDefaults(defineProps<AvatarProps>(), {
-  as: "span",
-  size: "md",
-  styleClassPassthrough: () => [],
+const props = defineProps({
+  as: {
+    type: [String, Object] as PropType<any>,
+    default: "span",
+  },
+  src: {
+    type: String,
+    default: undefined,
+  },
+  alt: {
+    type: String,
+    default: undefined,
+  },
+  text: {
+    type: String,
+    default: undefined,
+  },
+  size: {
+    type: String as PropType<"xs" | "s" | "md" | "lg" | "xl" | string>,
+    default: "md",
+  },
+  chip: {
+    type: [Boolean, Object] as PropType<boolean | DisplayChipProps>,
+    default: undefined,
+  },
+  class: {
+    type: [String, Array, Object] as PropType<any>,
+    default: undefined,
+  },
+  style: {
+    type: [String, Array, Object] as PropType<any>,
+    default: undefined,
+  },
+  styleClassPassthrough: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: () => [],
+  },
 })
+
 defineSlots<AvatarSlots>()
 
 const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(
@@ -118,5 +138,9 @@ watch(
     border-radius: 50%;
     object-fit: cover;
   }
+
+  .avatar-icon {
+    font-size: 24px;
+  }
 }
 </style>

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

@@ -7,31 +7,36 @@
 </template>
 
 <script setup lang="ts">
-import type { DisplayChipProps } from "../../types/components"
-
-interface ChipSlots {
-  default(props?: {}): any
-}
-
-const props = withDefaults(defineProps<DisplayChipProps>(), {
-  tag: "div",
-  shape: "circle",
-  config: () => ({
-    size: "12px",
-    maskWidth: "4px",
-    offset: "0px",
-    angle: "90deg",
-    icon: undefined,
-    label: undefined,
-  }),
-  styleClassPassthrough: () => [],
+import type { DisplayChipConfig } from "../../types/components"
+
+const props = defineProps({
+  tag: {
+    type: String as PropType<"div" | "span">,
+    default: "div",
+  },
+  shape: {
+    type: String as PropType<"circle" | "square">,
+    default: "circle",
+  },
+  config: {
+    type: Object as PropType<DisplayChipConfig>,
+    default: () => ({
+      size: "12px",
+      maskWidth: "4px",
+      offset: "0px",
+      angle: "90deg",
+      icon: undefined,
+      label: undefined,
+    }),
+  },
+  styleClassPassthrough: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: () => [],
+  },
 })
-const slots = defineSlots<ChipSlots>()
-// const slots = useSlots()
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-// Validate and truncate label to max 3 characters
 const validatedLabel = computed(() => {
   if (!props.config?.label) return props.config?.label
   if (props.config.label.length > 3) {

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

@@ -49,32 +49,38 @@
 
 <script setup lang="ts">
 import type {
-  DisplayToastProps,
+  DisplayToastConfig,
   DisplayToastTheme,
   DisplayToastPosition,
   DisplayToastAlignment,
   ToastSlots,
 } from "../../types/components"
 
-const props = withDefaults(defineProps<DisplayToastProps>(), {
-  config: () => ({
-    appearance: {
-      theme: "ghost" as DisplayToastTheme,
-      position: "top" as DisplayToastPosition,
-      alignment: "right" as DisplayToastAlignment,
-      fullWidth: false,
-    },
-    behavior: {
-      autoDismiss: true,
-      duration: 5000,
-      revealDuration: 550,
-    },
-    content: {
-      text: "",
-      customIcon: undefined,
-    },
-  }),
-  styleClassPassthrough: () => [],
+const props = defineProps({
+  config: {
+    type: Object as PropType<DisplayToastConfig>,
+    default: () => ({
+      appearance: {
+        theme: "ghost" as DisplayToastTheme,
+        position: "top" as DisplayToastPosition,
+        alignment: "right" as DisplayToastAlignment,
+        fullWidth: false,
+      },
+      behavior: {
+        autoDismiss: true,
+        duration: 5000,
+        revealDuration: 550,
+      },
+      content: {
+        text: "",
+        customIcon: undefined,
+      },
+    }),
+  },
+  styleClassPassthrough: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: () => [],
+  },
 })
 
 const slots = defineSlots<ToastSlots>()

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

@@ -31,18 +31,40 @@
 <script setup lang="ts">
 import type { DisplayToastTheme } from "../../../types/components"
 
-interface DefaultToastContentProps {
-  theme: DisplayToastTheme
-  customIcon?: string
-  toastId: string
-  toastDisplayText: string
-  toastTitle?: string
-  toastDescription?: string
-  autoDismiss: boolean
-  setDismissToast: () => void
-}
-
-const props = defineProps<DefaultToastContentProps>()
+const props = defineProps({
+  theme: {
+    type: String as PropType<DisplayToastTheme>,
+    required: true,
+  },
+  customIcon: {
+    type: String,
+    default: undefined,
+  },
+  toastId: {
+    type: String,
+    required: true,
+  },
+  toastDisplayText: {
+    type: String,
+    required: true,
+  },
+  toastTitle: {
+    type: String,
+    default: undefined,
+  },
+  toastDescription: {
+    type: String,
+    default: undefined,
+  },
+  autoDismiss: {
+    type: Boolean,
+    required: true,
+  },
+  setDismissToast: {
+    type: Function as PropType<() => void>,
+    required: true,
+  },
+})
 
 const defaultThemeIcons = {
   primary: "akar-icons:info",

package/app/components/masonry-grid-ordered/MasonryGridOrderedGridExperiment.vue

@@ -15,7 +15,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch, type PropType } from "vue"
 import { useElementSize, useResizeObserver } from "@vueuse/core"
 
 const props = defineProps({

package/app/components/masonry-grid-sorted/MasonryGridSorted.vue

@@ -14,8 +14,6 @@
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver } from "@vueuse/core"
-
 const props = defineProps({
   gridData: {
     type: Array as PropType<any[]>,

package/app/components/rotating-carousel/RotatingCarouselImage.vue

@@ -16,17 +16,15 @@
   </component>
 </template>
 
-<script lang="ts">
-interface IAccordianData {
+<script setup lang="ts">
+interface CarouselImageData {
   src: string
   alt: string
 }
-</script>
 
-<script setup lang="ts">
 const props = defineProps({
   data: {
-    type: Array as PropType<IAccordianData[]>,
+    type: Array as PropType<CarouselImageData[]>,
     default: () => [],
   },
   tag: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "7.0.3",
+  "version": "8.0.0",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "scripts": {
@@ -42,8 +42,7 @@
     "nuxt-qrcode": "0.4.8",
     "patch-package": "8.0.1",
     "release-it": "19.2.4",
-    "typescript": "5.9.3",
-    "vue-tsc": "3.2.4"
+    "typescript": "5.9.3"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",