srcdev-nuxt-components 6.1.9 → 6.1.11

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/expanding-panel/ExpandingPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="expanding-panel" :class="[elementClasses]">
-    <details class="expanding-panel-details" :name>
-      <summary class="expanding-panel-summary" :id="triggerId" :aria-controls="contentId">
+    <details class="expanding-panel-details" :name :open>
+      <summary @click="handleToggle" class="expanding-panel-summary" :id="triggerId" :aria-controls="contentId">
         <span class="label-wrapper">
           <slot name="summary"></slot>
         </span>
@@ -34,6 +34,10 @@ const props = defineProps({
     type: Number,
     default: 400,
   },
+  forceOpened: {
+    type: Boolean,
+    default: false,
+  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
@@ -45,8 +49,15 @@ const name = computed(() => props.name || useId())
 const triggerId = computed(() => `id-${name.value}-trigger`)
 const contentId = computed(() => `id-${name.value}-content`)
 const animationDurationStr = computed(() => `${props.animationDuration}ms`)
+const open = computed(() => props.forceOpened)
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+
+const handleToggle = (event: Event) => {
+  if (props.forceOpened) {
+    event.preventDefault()
+  }
+}
 </script>
 
 <style lang="css">

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

@@ -15,40 +15,6 @@
   </component>
 </template>
 
-<script lang="ts">
-export const TAGS_ALLOWED = <string[]>[
-  "div",
-  "section",
-  "article",
-  "aside",
-  "header",
-  "footer",
-  "main",
-  "nav",
-  "ul",
-  "ol",
-]
-
-export 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: {
@@ -59,14 +25,30 @@ const props = defineProps({
     type: String,
     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",
+      ].includes(value)
     },
   },
   id: {

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.9",
+  "version": "6.1.11",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",