srcdev-nuxt-components 5.0.3 → 6.0.0

package/components/layout-grids/LayoutGridA.vue

@@ -1,103 +0,0 @@
-<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/components/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/layout-row/LayoutRow.vue

@@ -1,165 +0,0 @@
-<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/components/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/masonry-grid-ordered/MasonryGridOrdered.vue

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