srcdev-nuxt-components 3.0.0 → 4.0.0

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

@@ -0,0 +1,132 @@
+<template>
+  <div class="layout-grid-b" :class="[elementClasses]">
+    <section class="top-row">
+      <div class="top-row-slot-1">
+        <div class="top-row-slot-1-inner">
+          <div v-for="key in topRowSlot1ItemCount" class="panel">
+            <slot :name="`top-row-slot1-${key}-content`"></slot>
+          </div>
+        </div>
+      </div>
+
+      <div class="top-row-slot-2">
+        <div class="panel">
+          <slot name="top-row-slot-2"></slot>
+        </div>
+      </div>
+      <div class="top-row-slot-3">
+        <div class="panel">
+          <slot name="top-row-slot-3"></slot>
+        </div>
+      </div>
+    </section>
+
+    <section class="bottom-row">
+      <div v-for="key in bottomRowItemCount" class="panel">
+        <slot :name="`bottom-row-${key}-content`"></slot>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  topRowSlot1ItemCount: {
+    type: Number as PropType<number>,
+    default: 6,
+  },
+  bottomRowItemCount: {
+    type: Number as PropType<number>,
+    default: 4,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+.layout-grid-b {
+  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+  --_color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+  --_gap: 12px;
+
+  .panel {
+    border: 1px solid var(--_border-color);
+    border-radius: 12px;
+    padding: 12px;
+    height: auto;
+  }
+
+  container-type: inline-size;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--_gap);
+  width: 100%;
+  margin-inline: auto;
+
+  .top-row {
+    display: grid;
+    gap: var(--_gap);
+    width: 100%;
+
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'slot1'
+      'slot2'
+      'slot3';
+
+    @container (min-width: 1024px) {
+      grid-template-columns: 1fr minmax(460px, 33%);
+      grid-template-areas:
+        'slot1 slot2'
+        'slot3 slot2';
+    }
+  }
+
+  .top-row-slot-1 {
+    grid-area: slot1;
+    container-type: inline-size;
+
+    .top-row-slot-1-inner {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+
+      gap: var(--_gap);
+
+      @container (min-width: 680px) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      .panel {
+        display: grid;
+      }
+    }
+  }
+
+  .top-row-slot-2 {
+    grid-area: slot2;
+    display: grid;
+  }
+  .top-row-slot-3 {
+    grid-area: slot3;
+    display: grid;
+  }
+
+  .bottom-row {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--_gap);
+  }
+}
+</style>

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

@@ -0,0 +1,157 @@
+<template>
+  <div class="layout-row" :class="elementClasses">
+    <component :is="tag" :data-testid="dataTestid" class="layout-row-inner" :class="variant">
+      <div>
+        <slot name="default"></slot>
+      </div>
+    </component>
+  </div>
+</template>
+
+<script lang="ts">
+const TAGS_ALLOWED = <string[]>['div', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'ul', 'ol'];
+
+const VARIANT_CLASSES = <string[]>[
+  'full',
+  'full-start',
+  'full-end',
+  'popout',
+  'popout-start',
+  'popout-end',
+  'content',
+  'content-start',
+  'content-end',
+  'inset-content',
+  'inset-content-start',
+  'inset-content-end',
+  'full-width',
+  'full-content',
+  'full-content-nopad',
+  'full-content',
+];
+</script>
+
+<script setup lang="ts">
+const props = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'layout-row',
+  },
+  tag: {
+    type: String,
+    default: 'div',
+    validator(value: string) {
+      return TAGS_ALLOWED.includes(value);
+    },
+  },
+  variant: {
+    type: String,
+    required: true,
+    validator(value: string) {
+      return VARIANT_CLASSES.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+/*
+* Page Layout by https://layout-breakouts-builder.vercel.app
+**/
+.layout-row > *,
+.full-width > * {
+  grid-column: content;
+}
+.layout-row,
+.full-width {
+  --minimum-content-padding: 1rem;
+
+  /** TRACK WIDTHS **/
+  --full-max-width: 1fr;
+  --popout-max-width: 1400px;
+  --content-max-width: 1060px;
+  --inset-content-max-width: 840px;
+
+  /** TRACK SIZES **/
+  --full: minmax(var(--minimum-content-padding), 1fr);
+  --popout: minmax(0, calc((var(--popout-max-width) - var(--content-max-width)) * 0.5));
+  --content: minmax(0, calc((var(--content-max-width) - var(--inset-content-max-width)) * 0.5));
+  --inset-content: min(var(--inset-content-max-width), 100% - var(--minimum-content-padding) * 2);
+
+  display: grid;
+  grid-template-columns:
+    [full-start]
+    var(--full)
+    [popout-start]
+    var(--popout)
+    [content-start]
+    var(--content)
+    [inset-content-start]
+    var(--inset-content)
+    [inset-content-end]
+    var(--content)
+    [content-end]
+    var(--popout)
+    [popout-end]
+    var(--full)
+    [full-end];
+}
+
+/** CLASSES **/
+.full {
+  grid-column: full;
+}
+.full-start {
+  grid-column-start: full-start;
+}
+.full-end {
+  grid-column-end: full-end;
+}
+
+.popout {
+  grid-column: popout;
+}
+.popout-start {
+  grid-column-start: popout-start;
+}
+.popout-end {
+  grid-column-end: popout-end;
+}
+
+.content {
+  grid-column: content;
+}
+.content-start {
+  grid-column-start: content-start;
+}
+.content-end {
+  grid-column-end: content-end;
+}
+
+.inset-content {
+  grid-column: inset-content;
+}
+.inset-content-start {
+  grid-column-start: inset-content-start;
+}
+.inset-content-end {
+  grid-column-end: inset-content-end;
+}
+
+.full-width {
+  grid-column: full;
+}
+.full-content,
+.full-content-nopad {
+  grid-column: full;
+}
+.full-content {
+  padding-inline: var(--minimum-content-padding);
+}
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+  <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>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  gridData: {
+    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 {
+  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+  --_color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+
+  columns: var(--_item-min-width);
+  gap: 12px;
+
+  .masonry-grid-item {
+    break-inside: avoid;
+    outline: 0.1rem solid var(--_border-color);
+    padding: 1.2rem;
+    margin-block-end: var(--_masonry-grid-gap);
+  }
+}
+</style>

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

@@ -0,0 +1,115 @@
+<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 {
+  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+
+  columns: var(--_item-min-width);
+  gap: var(--_masonry-grid-gap);
+
+  .masonry-grid-item {
+    break-inside: avoid;
+    outline: 0.1rem solid var(--_border-color);
+    padding: 1.2rem;
+    margin-block-end: var(--_masonry-grid-gap);
+  }
+}
+</style>