srcdev-nuxt-components 6.1.20 → 6.1.22

package/app/components/layout-grids/LayoutGridA.vue

@@ -20,19 +20,19 @@
 <script setup lang="ts">
 const props = defineProps({
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 </script>
 
 <style lang="css">

package/app/components/layout-grids/LayoutGridB.vue

@@ -40,19 +40,19 @@ const props = defineProps({
     default: 4,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 </script>
 
 <style lang="css">
@@ -82,15 +82,15 @@ watch(
 
     grid-template-columns: 1fr;
     grid-template-areas:
-      'slot1'
-      'slot2'
-      'slot3';
+      "slot1"
+      "slot2"
+      "slot3";
 
     @container (min-width: 1024px) {
       grid-template-columns: 1fr minmax(460px, 33%);
       grid-template-areas:
-        'slot1 slot2'
-        'slot3 slot2';
+        "slot1 slot2"
+        "slot3 slot2";
     }
   }
 

package/app/components/layout-row/LayoutRow.vue

@@ -56,7 +56,7 @@ const props = defineProps({
     default: null,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   isLandmark: {

package/app/components/magnetic-navigation/MagneticNavigation.vue

@@ -21,7 +21,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/masonry-grid/MasonryGrid.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="masonry-grid-wrapper" :class="[elementClasses]" :style="`--_masonry-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`">
+  <div
+    class="masonry-grid-wrapper"
+    :class="[elementClasses]"
+    :style="`--_masonry-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`"
+  >
     <template v-for="item in gridData" :key="item.id">
       <div class="masonry-grid-item">
         <slot :name="item.id"></slot>
@@ -24,24 +28,24 @@ const props = defineProps({
   },
   unit: {
     type: String,
-    default: 'rem',
+    default: "rem",
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const gridData = toRef(() => props.gridData);
+const gridData = toRef(() => props.gridData)
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 </script>
 
 <style lang="css">

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

@@ -25,7 +25,7 @@ const props = defineProps({
     default: 12,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   mobilePreferredColCount: {

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

@@ -1,5 +1,10 @@
 <template>
-  <div class="masonry-grid-wrapper" :class="[elementClasses]" :style="`--_masonry-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`" ref="gridWrapper">
+  <div
+    class="masonry-grid-wrapper"
+    :class="[elementClasses]"
+    :style="`--_masonry-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`"
+    ref="gridWrapper"
+  >
     <template v-for="item in rearrangedItems" :key="item.id">
       <div class="masonry-grid-item">
         <slot :name="item.id"></slot>
@@ -9,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver } from '@vueuse/core';
+import { useResizeObserver } from "@vueuse/core"
 
 const props = defineProps({
   gridData: {
@@ -26,46 +31,46 @@ const props = defineProps({
   },
   unit: {
     type: String,
-    default: 'rem',
+    default: "rem",
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const gridData = toRef(() => props.gridData);
+const gridData = toRef(() => props.gridData)
 
-const gridWrapper = ref<HTMLDivElement>();
+const gridWrapper = ref<HTMLDivElement>()
 
 const getColumnCountWithinGridWrapper = () => {
-  return gridWrapper.value ? Math.floor(gridWrapper.value.clientWidth / props.itemMinWidth) : 0;
-};
+  return gridWrapper.value ? Math.floor(gridWrapper.value.clientWidth / props.itemMinWidth) : 0
+}
 
 // const columns = ref(4);
 const columns = computed(() => {
-  return gridWrapper.value ? Math.floor(gridWrapper.value.clientWidth / props.itemMinWidth) : 0;
-});
+  return gridWrapper.value ? Math.floor(gridWrapper.value.clientWidth / props.itemMinWidth) : 0
+})
 
 const rearrangeArray = (items: any[], columns: number): any[] => {
-  const rows = Math.ceil(items.length / columns);
-  const rearrangedArray = [];
+  const rows = Math.ceil(items.length / columns)
+  const rearrangedArray = []
 
   for (let col = 0; col < columns; col++) {
     for (let row = 0; row < rows; row++) {
-      const index = row * columns + col;
+      const index = row * columns + col
       if (index < items.length) {
-        rearrangedArray.push(items[index]);
+        rearrangedArray.push(items[index])
       }
     }
   }
 
-  return rearrangedArray;
-};
+  return rearrangedArray
+}
 
-const rearrangedItems = computed(() => rearrangeArray(props.gridData, columns.value));
+const rearrangedItems = computed(() => rearrangeArray(props.gridData, columns.value))
 // const rearrangedItems = computed(() => {
 //   const rows = Math.ceil(props.gridData.length / columns.value);
 //   const rearrangedArray = [];
@@ -85,9 +90,9 @@ const rearrangedItems = computed(() => rearrangeArray(props.gridData, columns.va
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 
 // onMounted(() => {
 //   console.log(getColumnCountWithinGridWrapper());

package/app/components/parallax/SectionParallax.vue

@@ -17,7 +17,7 @@ const props = defineProps({
     type: String,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/pop-over/PopOver.vue

@@ -18,14 +18,14 @@ const props = defineProps({
     required: true,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
+})
 
-const anchorName = `--anchor-${useId()}`;
+const anchorName = `--anchor-${useId()}`
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style scoped lang="css">

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

@@ -87,7 +87,7 @@ const props = defineProps({
     default: () => [],
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

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

@@ -145,7 +145,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   allowExpandOnGesture: {

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

@@ -70,7 +70,7 @@ const props = defineProps({
     default: true,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/tabs/TabsCore.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="tabs-core" :class="`axis-${axis}`">
-    <ul role="tablist" aria-labelledby="channel-name" ref="tabsNavRef" @mouseleave="resetHoverToActivePosition()" class="tabs-list" :class="[elementClasses]">
+    <ul
+      role="tablist"
+      aria-labelledby="channel-name"
+      ref="tabsNavRef"
+      @mouseleave="resetHoverToActivePosition()"
+      class="tabs-list"
+      :class="[elementClasses]"
+    >
       <li v-for="(index, key) in itemCount" :key="key">
         <button
           @click.prevent="navItemClicked($event)"
@@ -17,7 +24,16 @@
       </li>
     </ul>
     <div class="tab-content-wrapper">
-      <div v-for="(item, key) in itemCount" :key="key" class="tab-content" :aria-labelledby="`tab-${key}-trigger`" :id="`tab-${key}-content`" role="region" aria-hidden="true" ref="tabsContentRefs">
+      <div
+        v-for="(item, key) in itemCount"
+        :key="key"
+        class="tab-content"
+        :aria-labelledby="`tab-${key}-trigger`"
+        :id="`tab-${key}-content`"
+        role="region"
+        aria-hidden="true"
+        ref="tabsContentRefs"
+      >
         <slot :name="`tab-${key}-content`"></slot>
       </div>
     </div>
@@ -28,11 +44,11 @@
 const props = defineProps({
   tag: {
     type: String as PropType<string>,
-    default: 'button',
+    default: "button",
   },
   axis: {
-    type: String as PropType<'x' | 'y'>,
-    default: 'x',
+    type: String as PropType<"x" | "y">,
+    default: "x",
   },
   transitionDuration: {
     type: Number as PropType<number>,
@@ -55,21 +71,26 @@ const props = defineProps({
     default: true,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const tabsNavRef = ref<HTMLElement | null>(null);
-const tabsContentRefs = ref<HTMLElement[] | null>(null);
+const tabsNavRef = ref<HTMLElement | null>(null)
+const tabsContentRefs = ref<HTMLElement[] | null>(null)
 
-const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(props.axis, tabsNavRef, tabsContentRefs, props.transitionDuration);
+const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(
+  props.axis,
+  tabsNavRef,
+  tabsContentRefs,
+  props.transitionDuration
+)
 
 onMounted(() => {
-  initNavDecorators();
-});
+  initNavDecorators()
+})
 </script>
 
 <style lang="css">
@@ -85,7 +106,7 @@ onMounted(() => {
     padding: 0;
 
     .nav__hovered {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       right: 0;
@@ -99,7 +120,7 @@ onMounted(() => {
     }
 
     .nav__active {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       right: 0;
@@ -113,7 +134,7 @@ onMounted(() => {
     }
 
     .nav__active-indicator {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       right: 0;
@@ -135,7 +156,7 @@ onMounted(() => {
         opacity: 1;
       }
 
-      &[aria-selected='true'] {
+      &[aria-selected="true"] {
         opacity: 1;
       }
     }
@@ -172,7 +193,7 @@ onMounted(() => {
         color: light-dark(var(--gray-0), var(--gray-12));
       }
 
-      &[aria-selected='true'] {
+      &[aria-selected="true"] {
         color: light-dark(var(--gray-0), var(--gray-12));
       }
 
@@ -184,7 +205,7 @@ onMounted(() => {
 
   .tab-content-wrapper {
     display: grid;
-    grid-template-areas: 'element-stack';
+    grid-template-areas: "element-stack";
 
     background-color: light-dark(var(--gray-9), var(--gray-10));
     border: 0.1rem solid var(--gray-6);
@@ -226,7 +247,7 @@ onMounted(() => {
           /* color: light-dark(var(--gray-0), var(--gray-12)); */
         }
 
-        &[aria-selected='true'] {
+        &[aria-selected="true"] {
           /* color: var(--_tabs-active-text); */
         }
 

package/app/composables/useStyleClassPassthrough.ts

@@ -1,35 +1,32 @@
-export const useStyleClassPassthrough = (styleClassPassthrough: string[]) => {
-  const styleClassPassthroughRef = ref(styleClassPassthrough);
+export const useStyleClassPassthrough = (styleClassPassthrough: string | string[]) => {
+  // Normalize initial value to an array
+  const normalize = (input: string | string[]): string[] =>
+    Array.isArray(input) ? input : input.split(/\s+/).filter(Boolean)
 
-  const elementClasses = computed(() => {
-    return styleClassPassthroughRef.value.join(' ');
-  });
+  const styleClassPassthroughRef = ref<string[]>(normalize(styleClassPassthrough))
+
+  const elementClasses = computed(() => styleClassPassthroughRef.value.join(" "))
 
   const updateElementClasses = (cssClass: string | string[]) => {
-    let cssClasses = [] as string[];
-    if (typeof cssClass === 'string') {
-      cssClasses = [cssClass];
-    } else if (Array.isArray(cssClass)) {
-      cssClasses = cssClass;
-    }
+    const cssClasses = Array.isArray(cssClass) ? cssClass : [cssClass]
 
-    cssClasses.forEach((cssClass) => {
-      if (styleClassPassthroughRef.value.includes(cssClass)) {
-        styleClassPassthroughRef.value = styleClassPassthroughRef.value.filter((className) => className !== cssClass);
+    cssClasses.forEach((cls) => {
+      if (styleClassPassthroughRef.value.includes(cls)) {
+        styleClassPassthroughRef.value = styleClassPassthroughRef.value.filter((c) => c !== cls)
       } else {
-        styleClassPassthroughRef.value.push(cssClass);
+        styleClassPassthroughRef.value.push(cls)
       }
-    });
-  };
+    })
+  }
 
-  const resetElementClasses = (propsClasses: string[]) => {
-    styleClassPassthroughRef.value = propsClasses;
-  };
+  const resetElementClasses = (propsClasses: string | string[]) => {
+    styleClassPassthroughRef.value = normalize(propsClasses)
+  }
 
   return {
     elementClasses,
     updateElementClasses,
     resetElementClasses,
     styleClassPassthroughRef,
-  };
-};
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.20",
+  "version": "6.1.22",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",