srcdev-nuxt-components 1.2.0 → 1.2.2

package/assets/styles/utils/_display.css

@@ -0,0 +1,7 @@
+.display-flex {
+  display: flex;
+}
+
+.display-grid {
+  display: grid;
+}

package/assets/styles/utils/_placement.css

@@ -0,0 +1,73 @@
+/*
+* <div placement="top-left"></siv>
+* <div placement="bottom-right"></siv>
+**/
+
+[placement^='top'] {
+  align-self: start;
+}
+
+[placement^='bottom'] {
+  align-self: end;
+}
+
+[placement^='center'] {
+  align-self: center;
+}
+
+[placement$='left'] {
+  justify-self: start;
+}
+
+[placement$='right'] {
+  justify-self: start;
+}
+
+[placement$='center'] {
+  align-self: center;
+}
+
+/*
+* <div align-content="top-left"></siv>
+* <div align-content="bottom-right"></siv>
+**/
+
+[align-content^='center'] {
+  align-items: center;
+}
+
+[align-content^='top'] {
+  align-items: start;
+}
+
+[align-content^='bottom'] {
+  align-items: end;
+}
+
+[align-content$='center'] {
+  justify-content: center;
+}
+
+[align-content$='left'] {
+  justify-content: start;
+}
+
+[align-content$='right'] {
+  justify-content: end;
+}
+
+[align-content$='space-around'] {
+  justify-content: space-around;
+}
+
+[align-content$='space-between'] {
+  justify-content: space-between;
+}
+
+[gap='12px'] {
+  gap: 12px;
+}
+
+[flex-wrap='wrap'] {
+  flex-wrap: wrap;
+}

package/assets/styles/utils/index.css

@@ -2,3 +2,5 @@
 @import './_margin-helpers';
 @import './_padding-helpers';
 @import './_canvasWidths';
+@import './_display';
+@import './_placement';

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

@@ -79,11 +79,6 @@ const updateGrid = () => {
       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) + '%');
@@ -93,8 +88,6 @@ const updateGrid = () => {
     });
 
     const maxHeight = Math.max(...colHeights);
-
-    // gridWrapper.value.style.height = maxHeight + 'px';
     gridWrapper.value?.style.setProperty('--_wrapper-height', maxHeight + 'px');
   }
 };
@@ -120,9 +113,14 @@ watch(
 
 <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);
@@ -144,12 +142,16 @@ watch(
     }
 
     .masonry-grid-ordered-item {
-      transition: position 0.3s ease, top 0.3s ease, left 0.3s ease;
+      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;
     }
   }
 }

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

@@ -46,12 +46,15 @@ watch(
 
 <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: var(--_masonry-grid-gap);
+  gap: 12px;
 
   .masonry-grid-item {
     break-inside: avoid;
-    outline: 0.1rem solid #cdcdcd;
+    outline: 0.1rem solid var(--_border-color);
     padding: 1.2rem;
     margin-block-end: var(--_masonry-grid-gap);
   }

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

@@ -100,12 +100,14 @@ watch(
 
 <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 #cdcdcd;
+    outline: 0.1rem solid var(--_border-color);
     padding: 1.2rem;
     margin-block-end: var(--_masonry-grid-gap);
   }

package/components/rotating-carousel/RotatingCarouselImage.vue

@@ -0,0 +1,118 @@
+<template>
+  <component
+    :is="tag"
+    class="rotating-carousel"
+    :class="[elementClasses]"
+    :style="`--quantity: ${Object.keys(data).length}; --_rotate-x: ${rotateXProp}; --_perspective: ${perspectiveProp}; --_translateZ: ${translateZProp}; --_animation-play-state: ${
+      pauseOnHover ? 'paused' : 'running'
+    }`"
+  >
+    <div class="slider" style="--quantity: 10">
+      <div v-for="(item, key) in data" :key="key" class="item" :style="`--_position: ${key}`"><NuxtImg :src="item.src" :alt="item.alt" /></div>
+    </div>
+  </component>
+</template>
+
+<script lang="ts">
+const TAGS_ALLOWED = <string[]>['div', 'p', 'span', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'ul', 'ol'];
+interface IAccordianData {
+  src: string;
+  alt: string;
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Array as PropType<IAccordianData[]>,
+    default: () => [],
+  },
+  tag: {
+    type: String,
+    default: 'div',
+    validator(value: string) {
+      return TAGS_ALLOWED.includes(value);
+    },
+  },
+  rotateX: {
+    type: Number,
+    default: 0,
+  },
+  perspective: {
+    type: Number,
+    default: 1000,
+  },
+  translateZ: {
+    type: Number,
+    default: 1000,
+  },
+  pauseOnHover: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const rotateXProp = computed(() => `${props.rotateX.toString()}deg`);
+const perspectiveProp = computed(() => `${props.perspective.toString()}px`);
+const translateZProp = computed(() => `${props.translateZ.toString()}px`);
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@keyframes autoRun {
+  from {
+    transform: perspective(var(--_perspective)) rotateX(var(--_rotate-x)) rotateY(0deg);
+  }
+  to {
+    transform: perspective(var(--_perspective)) rotateX(var(--_rotate-x)) rotateY(360deg);
+  }
+}
+
+.rotating-carousel {
+  width: 100%;
+  height: 100vh;
+  text-align: center;
+  overflow: hidden;
+  position: relative;
+
+  .slider {
+    position: absolute;
+    width: 200px;
+    height: 250px;
+    top: 10%;
+    left: calc(50% - 100px);
+    transform-style: preserve-3d;
+    transform: perspective(var(--_perspective));
+    animation: autoRun 30s linear infinite;
+    z-index: 2;
+
+    &:has(.item img:hover) {
+      animation-play-state: var(--_animation-play-state);
+    }
+
+    .item {
+      position: absolute;
+      inset: 0 0 0 0;
+      transform: rotateY(calc((var(--_position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(var(--_translateZ));
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+}
+</style>

package/nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['modern-normalize', './assets/styles/main.css'],
-  modules: ['@nuxt/icon'],
+  modules: ['@nuxt/icon', '@nuxt/image'],
 
   app: {
     head: {
@@ -32,4 +32,4 @@ export default defineNuxtConfig({
   },
   // plugins: ['css-anchor-positioning'],
   compatibilityDate: '2024-07-13',
-});
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -29,6 +29,7 @@
     "@iconify-json/bitcoin-icons": "1.2.2",
     "@nuxt/eslint-config": "1.0.0",
     "@nuxt/icon": "1.10.3",
+    "@nuxt/image": "^1.9.0",
     "@oddbird/css-anchor-positioning": "0.4.0",
     "eslint": "9.19.0",
     "happy-dom": "16.8.1",