srcdev-nuxt-components 6.0.0 → 6.1.0

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

@@ -0,0 +1,103 @@
+<template>
+  <div class="layout-grid-a-wrapper" :class="[elementClasses]">
+    <div class="layout-grid-a">
+      <div class="slot1">
+        <slot name="slot1"></slot>
+      </div>
+      <div class="slot2">
+        <slot name="slot2"></slot>
+      </div>
+      <div class="slot3">
+        <slot name="slot3"></slot>
+      </div>
+      <div class="slot4">
+        <slot name="slot4"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  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-a-wrapper {
+  container-type: inline-size;
+
+  .layout-grid-a {
+    display: grid;
+    gap: 20px;
+
+    & > div {
+      padding: 20px;
+      outline: 1px solid light-dark(black, white);
+      border-radius: 5px;
+    }
+
+    @container (min-width: 768px) {
+      grid-template-columns: repeat(2, auto);
+      grid-template-rows: repeat(3, auto);
+
+      .slot1 {
+        grid-column: 1 / span 2;
+        grid-row: 1;
+      }
+
+      .slot2 {
+        grid-column: 1 / span 2;
+        grid-row: 2;
+      }
+
+      .slot3 {
+        grid-column: 1;
+        grid-row: 3;
+      }
+
+      .slot4 {
+        grid-column: 2;
+        grid-row: 3;
+      }
+    }
+
+    @container (min-width: 1060px) {
+      grid-template-columns: repeat(3, auto);
+      grid-template-rows: repeat(2, auto);
+
+      .slot1 {
+        grid-column: 1;
+        grid-row: 1 / span 2;
+      }
+
+      .slot2 {
+        grid-column: 2 / span 2;
+        grid-row: 1;
+      }
+
+      .slot3 {
+        grid-column: 2;
+        grid-row: 2;
+      }
+
+      .slot4 {
+        grid-column: 3;
+        grid-row: 2;
+      }
+    }
+  }
+}
+</style>

package/app/components/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/app/components/layout-row/LayoutRow.vue

@@ -0,0 +1,165 @@
+<template>
+  <component :is="tag" class="layout-row" :class="elementClasses" :id :tab-index="isLandmark ? 0 : null" :aria-label="isLandmark ? 'Layout Row Landmark' : undefined">
+    <div :data-testid="dataTestid" class="layout-row-inner" :class="variant">
+      <div>
+        <slot name="default"></slot>
+      </div>
+    </div>
+  </component>
+</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);
+    },
+  },
+  id: {
+    type: String,
+    default: null,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  isLandmark: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+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/app/components/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/app/components/masonry-grid-ordered/MasonryGridOrdered.vue

@@ -0,0 +1,158 @@
+<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.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.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 {
+  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+  --_transition-duration: 0.3s;
+
+  container-type: inline-size;
+  position: relative;
+
+  transition: max-width var(--_transition-duration) ease;
+
+  .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 var(--_transition-duration) ease, top var(--_transition-duration) ease, left var(--_transition-duration) ease;
+
+      position: var(--_position);
+      top: var(--_position-top);
+      left: var(--_position-left);
+      width: var(--_element-width);
+
+      outline: 0.1rem solid var(--_border-color);
+      padding: 1.2rem;
+      border-radius: 4px;
+    }
+  }
+}
+</style>