srcdev-nuxt-components 1.1.7 → 1.2.0

package/assets/styles/utils/_margin-helpers.css

@@ -1,4 +1,30 @@
 /* Margin */
+.mi-auto {
+  margin-inline: auto;
+}
+.mis-auto {
+  margin-inline-start: auto;
+}
+.mie-auto {
+  margin-inline-end: auto;
+}
+.mb-auto {
+  margin-block: auto;
+}
+.mbs-auto {
+  margin-block-start: auto;
+}
+.mbe-auto {
+  margin-block-end: auto;
+}
+
+.mb-0 {
+  margin-block: 0;
+}
+.mi-0 {
+  margin-inline: 0;
+}
+
 .m-0 {
   margin: 0;
 }

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="masonry-grid-ordered" :class="[elementClasses]">
+    <div class="masonry-grid-ordered-wrapper" ref="gridWrapper">
+      <div v-for="item in gridData" :key="item.id" class="masonry-grid-ordered-item" ref="gridItemsRefs">
+        <slot :name="item.id"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBreakpoints, useElementSize, useResizeObserver } from '@vueuse/core';
+
+const props = defineProps({
+  gridData: {
+    type: Object,
+    default: {},
+  },
+  minTileWidth: {
+    type: Number,
+    default: 312,
+  },
+  gap: {
+    type: Number,
+    default: 12,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  mobilePreferredColCount: {
+    type: Number,
+    default: 1,
+  },
+  fixedWidth: {
+    type: Boolean,
+    default: false,
+  },
+  justify: {
+    type: String as PropType<String>,
+    default: 'left',
+    validator: (val: string) => ['left', 'center', 'right'].includes(val),
+  },
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const gridData = toRef(() => props.gridData);
+
+const minTileWidth = toRef(() => props.minTileWidth);
+const gridWrapper = ref<null | HTMLDivElement>(null);
+const gridItemsRefs = ref<HTMLDivElement[]>([]);
+const { width } = useElementSize(gridWrapper);
+const columnCount = computed(() => {
+  return Math.floor(width.value / minTileWidth.value);
+});
+
+const gapNum = toRef(props.gap);
+const gapStr = toRef(props.gap + 'px');
+
+const fixedWidth = toRef(() => props.fixedWidth);
+const minTileWidthStr = toRef(props.minTileWidth + 'px');
+const maxTileWidth = computed(() => {
+  return fixedWidth.value ? minTileWidth.value + 'px' : '1fr';
+});
+
+const justify = computed(() => {
+  return fixedWidth.value ? props.justify : 'stretch';
+});
+
+const updateGrid = () => {
+  if (gridWrapper.value !== null) {
+    const wrapperWidth = gridWrapper.value?.offsetWidth ?? 0;
+    const itemWidth = fixedWidth.value ? minTileWidth.value : Math.floor((wrapperWidth - (columnCount.value - 1) * gapNum.value) / columnCount.value);
+
+    const colHeights = Array(columnCount.value).fill(0);
+
+    gridItemsRefs.value.forEach((item) => {
+      const minHeight = Math.min(...colHeights);
+      const minIndex = colHeights.indexOf(minHeight);
+
+      // item.style.position = 'absolute';
+      // item.style.top = minHeight + 'px';
+      // item.style.width = itemWidth + 'px';
+      // item.style.left = minIndex * (100 / columnCount.value) + '%';
+
+      item?.style.setProperty('--_position', 'absolute');
+      item?.style.setProperty('--_position-top', minHeight + 'px');
+      item?.style.setProperty('--_position-left', minIndex * (100 / columnCount.value) + '%');
+      item?.style.setProperty('--_element-width', itemWidth + 'px');
+
+      colHeights[minIndex] += Math.floor(item.offsetHeight + gapNum.value);
+    });
+
+    const maxHeight = Math.max(...colHeights);
+
+    // gridWrapper.value.style.height = maxHeight + 'px';
+    gridWrapper.value?.style.setProperty('--_wrapper-height', maxHeight + 'px');
+  }
+};
+
+useResizeObserver(gridWrapper, () => {
+  updateGrid();
+});
+
+watch(
+  () => fixedWidth.value,
+  () => {
+    updateGrid();
+  }
+);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style scoped lang="css">
+.masonry-grid-ordered {
+  container-type: inline-size;
+  position: relative;
+
+  .masonry-grid-ordered-wrapper {
+    display: grid;
+    justify-self: v-bind(justify);
+    grid-gap: v-bind(gapStr);
+    grid-template-columns: repeat(1, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
+    position: relative;
+
+    height: var(--_wrapper-height);
+
+    @container (min-width: 768px) {
+      grid-template-columns: repeat(2, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
+    }
+
+    @container (min-width: 1024px) {
+      grid-template-columns: repeat(3, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
+    }
+    @container (min-width: 1280px) {
+      grid-template-columns: repeat(4, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
+    }
+
+    .masonry-grid-ordered-item {
+      transition: position 0.3s ease, top 0.3s ease, left 0.3s ease;
+
+      position: var(--_position);
+      top: var(--_position-top);
+      left: var(--_position-left);
+      width: var(--_element-width);
+    }
+  }
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="masonry-grid-wrapper">
+  <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>
@@ -14,20 +14,46 @@ const props = defineProps({
     type: Object,
     default: {},
   },
+  itemMinWidth: {
+    type: Number,
+    default: 300,
+  },
+  gap: {
+    type: Number,
+    default: 1.2,
+  },
+  unit: {
+    type: String,
+    default: 'rem',
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
 });
 
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
 const gridData = toRef(() => props.gridData);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 .masonry-grid-wrapper {
-  columns: 300px;
+  columns: var(--_item-min-width);
+  gap: var(--_masonry-grid-gap);
 
   .masonry-grid-item {
     break-inside: avoid;
     outline: 0.1rem solid #cdcdcd;
     padding: 1.2rem;
-    margin-block-end: 1.2rem;
+    margin-block-end: var(--_masonry-grid-gap);
   }
 }
 </style>

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

@@ -0,0 +1,113 @@
+<template>
+  <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>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core';
+
+const props = defineProps({
+  gridData: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+  itemMinWidth: {
+    type: Number,
+    default: 300,
+  },
+  gap: {
+    type: Number,
+    default: 1.2,
+  },
+  unit: {
+    type: String,
+    default: 'rem',
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const gridData = toRef(() => props.gridData);
+
+const gridWrapper = ref<HTMLDivElement>();
+
+const getColumnCountWithinGridWrapper = () => {
+  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;
+});
+
+const rearrangeArray = (items: any[], columns: number): any[] => {
+  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;
+      if (index < items.length) {
+        rearrangedArray.push(items[index]);
+      }
+    }
+  }
+
+  return rearrangedArray;
+};
+
+const rearrangedItems = computed(() => rearrangeArray(props.gridData, columns.value));
+// const rearrangedItems = computed(() => {
+//   const rows = Math.ceil(props.gridData.length / columns.value);
+//   const rearrangedArray = [];
+
+//   for (let col = 0; col < columns.value; col++) {
+//     for (let row = 0; row < rows; row++) {
+//       const index = row * columns.value + col;
+//       if (index < props.gridData.length) {
+//         rearrangedArray.push(props.gridData[index]);
+//       }
+//     }
+//   }
+
+//   return rearrangedArray;
+// });
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+// onMounted(() => {
+//   console.log(getColumnCountWithinGridWrapper());
+// });
+
+// useResizeObserver(gridWrapper, () => {
+//   console.log(getColumnCountWithinGridWrapper());
+// });
+</script>
+
+<style lang="css">
+.masonry-grid-wrapper {
+  columns: var(--_item-min-width);
+  gap: var(--_masonry-grid-gap);
+
+  .masonry-grid-item {
+    break-inside: avoid;
+    outline: 0.1rem solid #cdcdcd;
+    padding: 1.2rem;
+    margin-block-end: var(--_masonry-grid-gap);
+  }
+}
+</style>

package/package.json

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