srcdev-nuxt-components 2.3.2 → 2.4.0

package/components/display-banner/DisplayBanner.vue

@@ -0,0 +1,62 @@
+<template>
+  <component :is="tag" class="display-banner" :class="[elementClasses]">
+    <div v-if="$slots.canvas" class="canvas">
+      <slot name="canvas"></slot>
+    </div>
+    <div v-if="$slots.content" class="content">
+      <slot name="content"></slot>
+    </div>
+  </component>
+</template>
+
+<script lang="ts">
+const TAGS_ALLOWED = <string[]>['div', 'p', 'span', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'ul', 'ol'];
+</script>
+
+<script setup lang="ts">
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div',
+    validator(value: string) {
+      return TAGS_ALLOWED.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+.display-banner {
+  display: grid;
+  grid-template-areas: 'banner';
+  container-type: inline-size;
+
+  .canvas {
+    grid-area: banner;
+
+    .image {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content {
+    grid-area: banner;
+  }
+}
+</style>

package/components/image-galleries/SliderGallery.vue

@@ -8,7 +8,8 @@
     <div v-if="showGallery" class="gallery-content" :class="[{ galleryLoaded: !galleryLoaded }]">
       <div class="list" ref="sliderGalleryImagesList">
         <div v-for="(item, index) in galleryData" :key="index" class="item">
-          <NuxtImg :src="item.src" :alt="item.alt" @load="handleImageLoad(index)" @error="handleImageError(index)" loading="lazy" />
+          <NuxtImg :src="item.src" :alt="item.alt" @load="handleImageLoad(index)" @error="handleImageError(index)"
+            loading="lazy" />
           <div class="content">
             <div class="author">{{ item.stylist }}</div>
             <div class="title">{{ item.title }}</div>
@@ -27,15 +28,20 @@
             <img :src="item.src" :alt="item.alt" loading="lazy" />
             <div class="content">
               <div class="title" v-show="item.thumbnail?.title !== ''">{{ item.thumbnail?.title }}</div>
-              <div class="description" v-show="item.thumbnail?.description !== ''">{{ item.thumbnail?.description }}</div>
+              <div class="description" v-show="item.thumbnail?.description !== ''">{{ item.thumbnail?.description }}
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <div class="arrows">
-        <button id="prev" ref="prevDom" @click.prevent="doPrevious()"><</button>
-        <button id="next" ref="nextDom" @click.prevent="doNext()">></button>
+        <button id="prev" ref="prevDom" @click.prevent="doPrevious()">
+          <Icon name="ic:outline-keyboard-arrow-left" class="arrows-icon" />
+        </button>
+        <button id="next" ref="nextDom" @click.prevent="doNext()">
+          <Icon name="ic:outline-keyboard-arrow-right" class="arrows-icon" />
+        </button>
       </div>
 
       <div class="time"></div>
@@ -474,24 +480,46 @@ onBeforeUnmount(() => {
     width: 300px;
     max-width: 30%;
     display: flex;
-    gap: 10px;
+    gap: 20px;
     align-items: center;
 
     button {
+      display: grid;
+      justify-content: center;
+      align-items: center;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background-color: #eee4;
-      border: none;
       color: #fff;
       font-family: monospace;
       font-weight: bold;
       transition: 0.5s;
 
+      border-width: 2px;
+      border-style: solid;
+      border-color: white;
+
+      &#prev {
+        --_translateX: -2px;
+      }
+
+      &#next {
+        --_translateX: 2px;
+      }
+
       &:hover {
         background-color: #fff;
         color: #000;
       }
+
+      .arrows-icon {
+        color: currentColor;
+        font-weight: 900;
+        height: 40px;
+        width: 40px;
+        translate: var(--_translateX) -3px;
+      }
     }
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -27,18 +27,18 @@
   "devDependencies": {
     "@iconify-json/akar-icons": "1.2.2",
     "@iconify-json/bitcoin-icons": "1.2.2",
-    "@nuxt/eslint": "^1.3.0",
-    "@nuxt/eslint-config": "1.2.0",
-    "@nuxt/icon": "1.11.0",
+    "@nuxt/eslint": "1.3.0",
+    "@nuxt/eslint-config": "1.3.0",
+    "@nuxt/icon": "1.12.0",
     "@nuxt/image": "1.10.0",
     "happy-dom": "16.8.1",
-    "nuxt": "3.16.0",
+    "nuxt": "3.17.2",
     "release-it": "18.1.2",
-    "typescript": "5.8.2"
+    "typescript": "5.8.3"
   },
   "dependencies": {
-    "@oddbird/css-anchor-positioning": "0.4.0",
-    "@vueuse/core": "13.0.0",
+    "@oddbird/css-anchor-positioning": "0.6.0",
+    "@vueuse/core": "13.1.0",
     "focus-trap-vue": "4.0.3",
     "modern-normalize": "3.0.1"
   },