srcdev-nuxt-components 2.5.18 → 3.0.0

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

@@ -1,132 +0,0 @@
-<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

@@ -1,157 +0,0 @@
-<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

@@ -1,62 +0,0 @@
-<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

@@ -1,115 +0,0 @@
-<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>