srcdev-nuxt-components 6.1.8 → 6.1.10

package/app/components/clipped-panels/ClippedPanel.vue

@@ -4,40 +4,49 @@
   </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',
+    default: "div",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
+      return [
+        "div",
+        "p",
+        "span",
+        "section",
+        "article",
+        "aside",
+        "header",
+        "footer",
+        "main",
+        "nav",
+        "ul",
+        "ol",
+      ].includes(value)
     },
   },
   variant: {
     type: String,
-    default: 'square',
+    default: "square",
     validator(value: string) {
-      return ['circle-cutout', 'rectangle', 'square'].includes(value);
+      return ["circle-cutout", "rectangle", "square"].includes(value)
     },
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 </script>
 
 <style lang="css">
@@ -54,20 +63,23 @@ watch(
   aspect-ratio: 1;
 
   &.rectangle {
-
     --_max-x-position: 300px;
     --_curve-radius: 10px;
 
-    clip-path: path('M 10, 50 L 140, 50 A 10, 10, 0, 0, 0 150, 40 L 150, 10 A 10, 10, 0, 0, 1 160, 0 L 290, 0 A 10, 10, 0, 0, 1 300, 10 L 300, 190 A 10, 10, 0, 0, 1 290, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z');
+    clip-path: path(
+      "M 10, 50 L 140, 50 A 10, 10, 0, 0, 0 150, 40 L 150, 10 A 10, 10, 0, 0, 1 160, 0 L 290, 0 A 10, 10, 0, 0, 1 300, 10 L 300, 190 A 10, 10, 0, 0, 1 290, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z"
+    );
     width: 300px;
   }
   &.square {
     /* clip-path: path('M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 L 110, 0 L 190, 0 L 200, 10 L 200, 190 L 190, 200 L 10, 200 L 0, 190 L 0, 60 L 10, 50 Z'); */
-    clip-path: path('M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 A 10, 10, 0, 0, 1 110, 0 L 190, 0 A 10, 10, 0, 0, 1 200, 10 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z');
+    clip-path: path(
+      "M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 A 10, 10, 0, 0, 1 110, 0 L 190, 0 A 10, 10, 0, 0, 1 200, 10 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z"
+    );
     width: 200px;
   }
   &.circle-cutout {
-    clip-path: path('M  Z');
+    clip-path: path("M  Z");
   }
 }
 </style>

package/app/components/deep-expanding-menu/DeepExpandingMenu.vue

@@ -25,8 +25,6 @@
 </template>
 
 <script lang="ts">
-const TAGS_ALLOWED = <string[]>["div", "section", "nav", "ul", "ol"]
-
 interface ResponsiveHeaderNavItem {
   name: string
   path?: string
@@ -42,7 +40,7 @@ const props = defineProps({
     type: String,
     default: "nav",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value)
+      return ["div", "section", "nav", "ul", "ol"].includes(value)
     },
   },
   navLinks: {

package/app/components/deep-expanding-menu/DeepExpandingMenuOld.vue

@@ -30,7 +30,7 @@ const props = defineProps({
     type: String,
     default: "nav",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value)
+      return ["div", "section", "nav", "ul", "ol"].includes(value)
     },
   },
   navLinks: {
@@ -64,8 +64,6 @@ onMounted(() => {
 </script>
 
 <script lang="ts">
-const TAGS_ALLOWED = <string[]>["div", "section", "nav", "ul", "ol"]
-
 interface ResponsiveHeaderNavItem {
   name: string
   path?: string

package/app/components/display-banner/DisplayBanner.vue

@@ -9,40 +9,48 @@
   </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',
+    default: "div",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
+      return [
+        "div",
+        "p",
+        "span",
+        "section",
+        "article",
+        "aside",
+        "header",
+        "footer",
+        "main",
+        "nav",
+        "ul",
+        "ol",
+      ].includes(value)
     },
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 </script>
 
 <style lang="css">
 .display-banner {
   display: grid;
-  grid-template-areas: 'banner';
+  grid-template-areas: "banner";
   container-type: inline-size;
   overflow: hidden;
 

package/app/components/layout-row/LayoutRow.vue

@@ -1,5 +1,12 @@
 <template>
-  <component :is="tag" class="layout-row" :class="elementClasses" :id :tab-index="isLandmark ? 0 : null" :aria-label="isLandmark ? 'Layout Row Landmark' : undefined">
+  <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>
@@ -8,47 +15,41 @@
   </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',
+    default: "layout-row",
   },
   tag: {
     type: String,
-    default: 'div',
+    default: "div",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
+      return ["div", "section", "article", "aside", "header", "footer", "main", "nav", "ul", "ol"].includes(value)
     },
   },
   variant: {
     type: String,
     required: true,
     validator(value: string) {
-      return VARIANT_CLASSES.includes(value);
+      return [
+        "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",
+      ].includes(value)
     },
   },
   id: {
@@ -63,9 +64,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

package/app/components/rotating-carousel/RotatingCarouselImage.vue

@@ -3,20 +3,23 @@
     :is="tag"
     class="rotating-carousel"
     :class="[elementClasses]"
-    :style="`--_rotate-x: ${rotateXProp}deg; --_perspective: ${perspectiveProp}; --_translateZ: ${translateZProp}; --_animation-play-state: ${pauseOnHover ? 'paused' : 'running'}`"
+    :style="`--_rotate-x: ${rotateXProp}deg; --_perspective: ${perspectiveProp}; --_translateZ: ${translateZProp}; --_animation-play-state: ${
+      pauseOnHover ? 'paused' : 'running'
+    }`"
     ref="carouselRef"
   >
     <div class="slider" :style="`--quantity: ${Object.keys(data).length}`">
-      <div v-for="(item, key) in data" :key="key" class="item" :style="`--_position: ${key}`"><NuxtImg :src="item.src" :alt="item.alt" /></div>
+      <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;
+  src: string
+  alt: string
 }
 </script>
 
@@ -28,9 +31,22 @@ const props = defineProps({
   },
   tag: {
     type: String,
-    default: 'div',
+    default: "div",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
+      return [
+        "div",
+        "p",
+        "span",
+        "section",
+        "article",
+        "aside",
+        "header",
+        "footer",
+        "main",
+        "nav",
+        "ul",
+        "ol",
+      ].includes(value)
     },
   },
   rotateX: {
@@ -57,77 +73,77 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const perspectiveProp = computed(() => `${props.perspective.toString()}px`);
-const translateZProp = computed(() => `${props.translateZ.toString()}px`);
+const perspectiveProp = computed(() => `${props.perspective.toString()}px`)
+const translateZProp = computed(() => `${props.translateZ.toString()}px`)
 
-const carouselRef = ref<HTMLElement | null>(null);
-const rotateXProp = ref(props.rotateX);
-const minRotateX = -32;
-const maxRotateX = 32;
+const carouselRef = ref<HTMLElement | null>(null)
+const rotateXProp = ref(props.rotateX)
+const minRotateX = -32
+const maxRotateX = 32
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 
 watch(
   () => props.rotateX,
   () => {
     if (!props.useParallaxEffect) {
-      console.log('rotateXProp changed: ', rotateXProp.value);
+      console.log("rotateXProp changed: ", rotateXProp.value)
 
-      rotateXProp.value = props.rotateX;
+      rotateXProp.value = props.rotateX
     }
   }
-);
+)
 
 watch(
   () => props.useParallaxEffect,
   (currentValue) => {
     if (currentValue) {
-      handleScroll();
-      window.addEventListener('scroll', handleScroll);
+      handleScroll()
+      window.addEventListener("scroll", handleScroll)
     } else {
-      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener("scroll", handleScroll)
     }
   }
-);
+)
 
 const handleScroll = () => {
-  if (!carouselRef.value) return;
-  if ('IntersectionObserver' in window) {
-    const rect = carouselRef.value.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
+  if (!carouselRef.value) return
+  if ("IntersectionObserver" in window) {
+    const rect = carouselRef.value.getBoundingClientRect()
+    const viewportHeight = window.innerHeight
 
-    const elementCenter = rect.top + rect.height / 2;
-    const viewportCenter = viewportHeight / 2;
-    const distanceFromCenter = viewportCenter - elementCenter;
-    const maxDistance = viewportHeight / 2 + rect.height / 2;
+    const elementCenter = rect.top + rect.height / 2
+    const viewportCenter = viewportHeight / 2
+    const distanceFromCenter = viewportCenter - elementCenter
+    const maxDistance = viewportHeight / 2 + rect.height / 2
 
-    const progress = (distanceFromCenter + maxDistance) / (maxDistance * 2);
-    const clampedProgress = Math.max(0, Math.min(1, progress));
+    const progress = (distanceFromCenter + maxDistance) / (maxDistance * 2)
+    const clampedProgress = Math.max(0, Math.min(1, progress))
 
-    rotateXProp.value = minRotateX + (maxRotateX - minRotateX) * clampedProgress;
+    rotateXProp.value = minRotateX + (maxRotateX - minRotateX) * clampedProgress
   }
-};
+}
 
 onMounted(async () => {
   if (props.useParallaxEffect) {
-    handleScroll();
-    await nextTick();
-    window.addEventListener('scroll', handleScroll);
+    handleScroll()
+    await nextTick()
+    window.addEventListener("scroll", handleScroll)
   }
-});
+})
 
 onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll);
-});
+  window.removeEventListener("scroll", handleScroll)
+})
 </script>
 
 <style lang="css">

package/nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   // css: ["modern-normalize", "./app/assets/styles/main.css"],
-  modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/image"],
+  modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/image", "@nuxtjs/i18n"],
   app: {
     head: {
       htmlAttrs: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.8",
+  "version": "6.1.10",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -36,6 +36,7 @@
     "typescript": "5.9.2"
   },
   "dependencies": {
+    "@nuxtjs/i18n": "^10.0.6",
     "focus-trap-vue": "4.0.3"
   },
   "release-it": {