srcdev-nuxt-components 6.2.11 → 6.2.12

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

@@ -22,18 +22,31 @@
           <Icon name="ic:outline-desktop-mac" class="icon" :class="[{ current: canvasName === 'desktopCanvas' }]" />
         </button>
       </li>
+      <li>
+        <button type="button" @click.stop.prevent="updateCanvas('fullWidthCanvas')">
+          <Icon
+            name="pixelarticons:viewport-wide"
+            class="icon"
+            :class="[{ current: canvasName === 'fullWidthCanvas' }]"
+          />
+        </button>
+      </li>
     </ul>
   </div>
 </template>
 
+<script lang="ts">
+export type MediaCanvas = "mobileCanvas" | "tabletCanvas" | "laptopCanvas" | "desktopCanvas" | "fullWidthCanvas"
+</script>
+
 <script setup lang="ts">
-import type { MediaCanvas } from '@/types/types.canvasName';
+// import type { MediaCanvas } from "@/types"
 
-const canvasName = defineModel<MediaCanvas>('canvasName');
+const canvasName = defineModel<MediaCanvas>("canvasName")
 
 const updateCanvas = (setCanvas: MediaCanvas) => {
-  canvasName.value = setCanvas;
-};
+  canvasName.value = setCanvas
+}
 </script>
 
 <style lang="css">
@@ -74,4 +87,20 @@ const updateCanvas = (setCanvas: MediaCanvas) => {
     }
   }
 }
+
+.mobileCanvas {
+  max-width: 412px;
+}
+.tabletCanvas {
+  max-width: 768px;
+}
+.laptopCanvas {
+  max-width: 1060px;
+}
+.desktopCanvas {
+  max-width: 1280px;
+}
+.fullWidthCanvas {
+  max-width: unset;
+}
 </style>

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

@@ -0,0 +1,265 @@
+<template>
+  <div class="masonry-grid-ordered" :class="[elementClasses]">
+    <div
+      class="masonry-grid-ordered-wrapper"
+      :class="[{ 'multiple-cols': !isSingleColumn, 'setup-complete': isSetupComplete }]"
+      ref="gridWrapper"
+    >
+      <div v-for="item in props.gridData" :key="item.id" class="masonry-grid-ordered-item" ref="gridItemsRefs">
+        <div class="masonry-grid-ordered-content" ref="gridContentRefs">
+          <slot :name="item.id"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch, type PropType } from "vue"
+import { useElementSize, useResizeObserver } from "@vueuse/core"
+
+const props = defineProps({
+  gridData: {
+    type: Array as PropType<{ id: string }[]>,
+    default: () => [],
+  },
+  minTileWidth: {
+    type: Number,
+    default: 312,
+  },
+  gap: {
+    type: Number,
+    default: 12,
+  },
+  styleClassPassthrough: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: () => [],
+  },
+  fixedWidth: {
+    type: Boolean,
+    default: false,
+  },
+  justify: {
+    type: String as PropType<"left" | "center" | "right">,
+    default: "left",
+    validator: (val: string) => ["left", "center", "right"].includes(val),
+  },
+})
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+
+const gridWrapper = ref<null | HTMLDivElement>(null)
+const gridItemsRefs = ref<HTMLDivElement[]>([])
+const gridContentRefs = ref<HTMLDivElement[]>([])
+const { width } = useElementSize(gridWrapper)
+
+// Track item properties for masonry positioning
+interface ItemData {
+  height: number
+  column: number
+  row: number
+  top: number
+  bottom: number
+  translateY: number
+}
+const itemDataArray = ref<ItemData[]>([])
+const isSetupComplete = ref(false)
+
+const columnCount = computed(() => {
+  if (width.value === 0) return 1
+  // Match the CSS container query breakpoint (636px hard-coded for now)
+  // if (width.value < 636) return 1
+  return Math.max(1, Math.floor(width.value / (props.minTileWidth + props.gap)))
+})
+
+const isSingleColumn = computed(() => columnCount.value === 1)
+
+const gapStr = computed(() => `${props.gap}px`)
+
+const minTileWidthStr = computed(() => `${props.minTileWidth}px`)
+const maxTileWidth = computed(() => {
+  return props.fixedWidth ? `${props.minTileWidth}px` : "1fr"
+})
+
+const justifyContent = computed(() => {
+  return props.fixedWidth ? props.justify : "stretch"
+})
+
+const updateGrid = () => {
+  if (gridWrapper.value !== null && columnCount.value > 1) {
+    // Initialize or reset the item data array
+    itemDataArray.value = Array(props.gridData.length)
+      .fill(null)
+      .map(() => ({ height: 0, column: 0, row: 0, top: 0, bottom: 0, translateY: 0 }))
+
+    // Step 1: Hide items for measurement
+    gridItemsRefs.value.forEach((itemEl) => {
+      if (itemEl) {
+        itemEl.style.setProperty("--_opacity", "0")
+      }
+    })
+
+    // Force a reflow to get accurate measurements in grid layout
+    void gridWrapper.value.offsetHeight
+
+    // Step 2: Measure heights and store in array
+    gridContentRefs.value.forEach((contentEl, index) => {
+      if (!contentEl || !gridItemsRefs.value[index] || !itemDataArray.value[index]) return
+
+      const itemEl = gridItemsRefs.value[index]
+      const contentHeight = contentEl.offsetHeight
+
+      // Calculate which column this item would be in based on CSS Grid's auto-fit
+      const column = index % columnCount.value
+
+      // Calculate which row this item would be in based on CSS Grid's auto-fit
+      const row = Math.floor(index / columnCount.value)
+
+      let top: number
+      let bottom: number
+      let translateY: number
+
+      // Always get the actual measured position first
+      const wrapperRect = gridWrapper.value!.getBoundingClientRect()
+      const itemRect = itemEl.getBoundingClientRect()
+      const actualTop = itemRect.top - wrapperRect.top
+
+      if (row === 0) {
+        // First row: use natural CSS Grid position
+        top = actualTop
+        bottom = top + contentHeight
+        translateY = 0 // No transform needed for first row
+      } else {
+        // Subsequent rows: position based on item above in same column
+        const itemAboveIndex = index - columnCount.value
+        const itemAbove = itemDataArray.value[itemAboveIndex]
+
+        if (itemAbove) {
+          top = itemAbove.bottom + props.gap
+          bottom = top + contentHeight
+          // Calculate the transform needed to move from actual position to desired position
+          translateY = top - actualTop
+        } else {
+          // Fallback to natural position if no item above found
+          top = actualTop
+          bottom = top + contentHeight
+          translateY = 0
+        }
+      }
+
+      // Store the data in our tracking array
+      itemDataArray.value[index].height = contentHeight
+      itemDataArray.value[index].column = column
+      itemDataArray.value[index].row = row
+      itemDataArray.value[index].top = top
+      itemDataArray.value[index].bottom = bottom
+      itemDataArray.value[index].translateY = translateY
+
+      // Set the CSS custom properties
+      itemEl.style.setProperty("--_item-height", `${contentHeight}px`)
+      itemEl.style.setProperty("--_translate-y", `${translateY}px`)
+      itemEl.style.setProperty("--_opacity", "1")
+    })
+
+    // Log the complete item data array when calculations are complete
+    // console.log("📊 Item data array:", itemDataArray.value)
+
+    // Mark setup as complete
+    isSetupComplete.value = true
+  } else {
+    // Reset setup state for single column
+    isSetupComplete.value = false
+
+    // Reset item data array
+    itemDataArray.value = []
+
+    // Single column: reset to normal flow
+    gridItemsRefs.value.forEach((itemEl) => {
+      if (itemEl) {
+        itemEl.style.removeProperty("--_opacity")
+        itemEl.style.removeProperty("--_item-height")
+        itemEl.style.removeProperty("--_translate-y")
+      }
+    })
+    gridWrapper.value?.style.removeProperty("--_wrapper-height")
+  }
+}
+
+useResizeObserver(gridWrapper, async () => {
+  // console.log("useResizeObserver triggered")
+  // itemDataArray.value = [] // Clear previous data
+  // await useSleep(100)
+  // console.log("useResizeObserver after sleep")
+  nextTick(() => updateGrid())
+
+  // requestAnimationFrame(() => {
+  // updateGrid()
+  // nextTick(() => updateGrid())
+  // })
+
+  // Add a small delay to ensure DOM is fully rendered and measured
+  // setTimeout(() => {
+  //   nextTick(() => updateGrid())
+  // }, 100)
+})
+
+onMounted(() => {
+  // Add a small delay to ensure DOM is fully rendered and measured
+  setTimeout(() => {
+    nextTick(() => updateGrid())
+  }, 100)
+})
+
+watch(
+  () => props.fixedWidth,
+  () => {
+    updateGrid()
+  }
+)
+
+watch(
+  () => props.gridData,
+  () => {
+    // nextTick(() => updateGrid())
+  }
+)
+
+watch(
+  () => width.value,
+  (newWidth) => {
+    if (newWidth > 0) {
+      // nextTick(() => updateGrid())
+    }
+  }
+)
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough)
+  }
+)
+</script>
+
+<style lang="css">
+.masonry-grid-ordered {
+  --_transition-duration: 0.3s;
+
+  .masonry-grid-ordered-wrapper {
+    display: grid;
+    gap: v-bind(gapStr);
+    grid-template-columns: repeat(auto-fit, minmax(v-bind(minTileWidthStr), 1fr));
+
+    height: var(--_wrapper-height, auto);
+
+    &.multiple-cols {
+      .masonry-grid-ordered-item {
+        height: var(--_item-height, auto);
+        opacity: var(--_opacity, 1);
+        transform: translateY(var(--_translate-y, 0px));
+        transition: transform var(--_transition-duration) ease;
+      }
+    }
+  }
+}
+</style>

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

@@ -5,7 +5,7 @@
         v-for="(navGroup, groupKey) in responsiveNavLinks"
         :key="groupKey"
         class="main-navigation-list"
-        :ref="(el: HTMLUListElement | 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"
@@ -263,8 +263,8 @@ const mainNavigationState = ref<ResponsiveHeaderState>({
 
 const navRefs = ref<Record<string, HTMLUListElement | null>>({})
 
-const setNavRef = (key: string, el: HTMLUListElement | null) => {
-  navRefs.value[key] = el
+const setNavRef = (key: string, el: Element | ComponentPublicInstance | null) => {
+  navRefs.value[key] = el as HTMLUListElement | null
 }
 
 const navigationWrapperRects = computed({

package/app/composables/useNavigationState.ts

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

package/app/types/index.ts

@@ -4,3 +4,4 @@ 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"

package/package.json

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