srcdev-nuxt-components 6.1.20 → 6.1.22

package/app/components/display-dialog/variants/DisplayDialogConfirm.vue

@@ -18,14 +18,14 @@
 <script setup lang="ts">
 const props = defineProps({
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   dataDialogId: {
     type: String,
     required: true,
   },
-});
+})
 </script>
 
 <style lang="css">

package/app/components/display-dialog/variants/DisplayDialogScrollableContent.vue

@@ -18,7 +18,7 @@
 <script setup lang="ts">
 const props = defineProps({
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   allowContentScroll: {
@@ -29,7 +29,7 @@ const props = defineProps({
     type: String,
     required: true,
   },
-});
+})
 </script>
 
 <style lang="css">

package/app/components/display-grid/DisplayGridCore.vue

@@ -11,12 +11,12 @@ const props = defineProps({
     default: {},
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const gridData = toRef(() => props.gridData);
+const gridData = toRef(() => props.gridData)
 </script>

package/app/components/display-prompt/DisplayPromptCore.vue

@@ -51,7 +51,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   iconColor: {

package/app/components/display-prompt/variants/DisplayPromptError.vue

@@ -19,7 +19,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/display-toast/DisplayToast.vue

@@ -5,12 +5,10 @@
       class="display-toast"
       :class="[
         elementClasses,
+        cssStateClass,
         {
-          [theme]: !slots.default,
           'has-theme': !slots.default,
-          show: publicToastState && !isHiding && displayDurationInt === 0,
-          'use-timer': displayDurationInt > 0,
-          hide: isHiding,
+          'auto-dismiss': autoDismiss,
         },
       ]"
       :data-theme="theme"
@@ -25,13 +23,13 @@
         </div>
         <div class="toast-message">{{ toastDisplayText }}</div>
         <div class="toast-action">
-          <button @click.prevent="closeToast">
+          <button @click.prevent="updateToHiding()">
             <Icon name="material-symbols:close" class="icon" />
             <span class="sr-only">Close</span>
           </button>
         </div>
       </div>
-      <div v-if="displayDurationInt > 0" @transitionend="closeToast()" class="display-toast-progress"></div>
+      <div v-if="autoDismiss" class="display-toast-progress"></div>
     </div>
   </Teleport>
 </template>
@@ -46,7 +44,11 @@ const props = defineProps({
   },
   revealDuration: {
     type: Number,
-    default: 3000,
+    default: 550,
+  },
+  autoDismiss: {
+    type: Boolean,
+    default: true,
   },
   duration: {
     type: Number,
@@ -57,7 +59,7 @@ const props = defineProps({
     default: "",
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })
@@ -76,10 +78,18 @@ const defaultThemeIcons = {
 const slots = useSlots()
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const privateToastState = ref(false)
-const isHiding = ref(false)
+// single state ref
+const state = ref<"idle" | "entering" | "visible" | "hiding">("idle")
+const cssStateClass = computed(() => {
+  return state.value !== "idle" && !props.autoDismiss ? state.value : ""
+})
+
+// external toggle
 const publicToastState = defineModel<boolean>({ default: false })
 
+// computed helpers
+const privateToastState = ref(false)
+
 const revealDurationInt = computed(() => props.revealDuration)
 const revealDuration = computed(() => revealDurationInt.value + "ms")
 const displayDurationInt = computed(() => props.duration)
@@ -88,16 +98,28 @@ const displayDuration = computed(() => displayDurationInt.value + "ms")
 const progressDurationInt = computed(() => Math.floor(displayDurationInt.value - revealDurationInt.value / 2))
 const progressDuration = computed(() => progressDurationInt.value + "ms")
 
-const sendCloseEvent = () => {
+const removeToast = () => {
   publicToastState.value = false
   privateToastState.value = false
-  isHiding.value = false
 }
 
-const closeToast = async () => {
-  isHiding.value = true
+const updateToIdle = () => {
+  state.value = "idle"
+  removeToast()
+}
+const updateToEntering = async () => {
+  privateToastState.value = true
+  state.value = "entering"
+  await useSleep(revealDurationInt.value)
+  updateToVisible()
+}
+const updateToVisible = () => {
+  state.value = "visible"
+}
+const updateToHiding = async () => {
+  state.value = "hiding"
   await useSleep(revealDurationInt.value)
-  sendCloseEvent()
+  updateToIdle()
 }
 
 watch(
@@ -110,22 +132,52 @@ watch(
 watch(
   () => publicToastState.value,
   async (newValue, previousValue) => {
-    if (!previousValue && newValue) {
-      privateToastState.value = true
+    if (props.autoDismiss) {
+      privateToastState.value = newValue
+      await useSleep(displayDurationInt.value)
+      updateToIdle()
+      return
+    }
 
-      if (newValue && displayDurationInt.value > 0) {
-        await useSleep(displayDurationInt.value)
-        sendCloseEvent()
-      }
-    } else if (previousValue && !newValue) {
-      closeToast()
+    if (!previousValue && newValue && state.value === "idle") {
+      updateToEntering()
+    }
+
+    if (previousValue && !newValue && state.value == "visible") {
+      updateToHiding()
     }
   }
 )
 </script>
 
 <style scoped lang="css">
-@keyframes fade-in {
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out {
+  from {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(20px);
+  }
+}
+
+@keyframes slide-in-out {
   5% {
     opacity: 1;
     visibility: visible;
@@ -174,48 +226,29 @@ watch(
 
   z-index: 100;
 
-  &.use-timer {
-    animation: fade-in v-bind(displayDuration) linear;
+  &.auto-dismiss {
+    /* first run slide-in, then slide-out after a delay */
+    animation: slide-in 400ms var(--spring-in-easing) forwards,
+      slide-out 400ms var(--spring-out-easing) forwards v-bind(displayDuration);
   }
 
-  &.show {
-    animation: show v-bind(revealDuration)
-      linear(
-        0,
-        0.029 1.6%,
-        0.123 3.5%,
-        0.651 10.6%,
-        0.862 14.1%,
-        1.002 17.7%,
-        1.046 19.6%,
-        1.074 21.6%,
-        1.087 23.9%,
-        1.086 26.6%,
-        1.014 38.5%,
-        0.994 46.3%,
-        1
-      )
-      forwards;
-  }
+  &:not(&.auto-dismiss) {
+    &.show,
+    &.entering {
+      animation: show v-bind(revealDuration) var(--spring-easing) forwards;
+    }
+
+    &.visible {
+      /* if you want a steady state style, add here */
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
 
-  &.hide {
-    animation: hide v-bind(revealDuration)
-      linear(
-        0,
-        0.006 53.7%,
-        0.986 61.5%,
-        1.014 73.4%,
-        1.087 76.1%,
-        1.074 78.4%,
-        1.046 80.4%,
-        1.002 82.3%,
-        0.862 85.9%,
-        0.651 89.4%,
-        0.123 96.5%,
-        0.029 98.4%,
-        0
-      )
-      forwards;
+    &.hide,
+    &.hiding {
+      animation: hide v-bind(revealDuration) var(--spring-easing) forwards;
+    }
   }
 
   &:hover {
@@ -264,6 +297,9 @@ watch(
     border: 0.1rem solid var(--colour-theme-8);
     border-start-start-radius: 8px;
     border-end-start-radius: 8px;
+    border-start-end-radius: 4px;
+    border-end-end-radius: 4px;
+
     overflow: hidden;
 
     .display-toast-inner {

package/app/components/expanding-panel/ExpandingPanel.vue

@@ -51,7 +51,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/glowing-border/GlowingBorder.vue

@@ -34,7 +34,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/image-galleries/SliderGallery.vue

@@ -13,8 +13,9 @@
             <div v-show="item.stylist !== ''" class="author" :class="item.textBrightness">{{ item.stylist }}</div>
             <div v-show="item.title !== ''" class="title" :class="item.textBrightness">{{ item.title }}</div>
             <div v-show="item.category !== ''" class="topic" :class="item.textBrightness">{{ item.category }}</div>
-            <div v-show="item.description !== ''" class="description" :class="item.textBrightness">{{ item.description
-              }}</div>
+            <div v-show="item.description !== ''" class="description" :class="item.textBrightness">
+              {{ item.description }}
+            </div>
             <div class="buttons" :class="item.textBrightness">
               <button>SEE MORE</button>
             </div>
@@ -27,10 +28,11 @@
           <div class="inner">
             <NuxtImg :src="item.src" :alt="item.alt" />
             <div class="content" :class="item.textBrightness">
-              <div v-show="item.thumbnail?.title !== ''" class="title" :class="item.textBrightness">{{
-                item.thumbnail?.title }}</div>
-              <div v-show="item.thumbnail?.description !== ''" class="description" :class="item.textBrightness">{{
-                item.thumbnail?.description }}
+              <div v-show="item.thumbnail?.title !== ''" class="title" :class="item.textBrightness">
+                {{ item.thumbnail?.title }}
+              </div>
+              <div v-show="item.thumbnail?.description !== ''" class="description" :class="item.textBrightness">
+                {{ item.thumbnail?.description }}
               </div>
             </div>
           </div>
@@ -52,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-import { type IGalleryData } from '@/types/gallery-data';
+import { type IGalleryData } from "@/types/gallery-data"
 
 const props = defineProps({
   autoRun: {
@@ -68,198 +70,197 @@ const props = defineProps({
     default: 3000,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-const galleryData = defineModel<IGalleryData[]>('galleryData');
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const galleryData = defineModel<IGalleryData[]>("galleryData")
 
-const sliderGalleryWrapper = useTemplateRef('sliderGalleryWrapper');
-const sliderGalleryImagesList = useTemplateRef('sliderGalleryImagesList');
-const sliderGalleryThumbnailsList = useTemplateRef('sliderGalleryThumbnailsList');
+const sliderGalleryWrapper = useTemplateRef("sliderGalleryWrapper")
+const sliderGalleryImagesList = useTemplateRef("sliderGalleryImagesList")
+const sliderGalleryThumbnailsList = useTemplateRef("sliderGalleryThumbnailsList")
 
-const transitionRunning = ref(false);
-const galleryLoaded = ref(true);
-const showGallery = ref(false);
-const loadedImages = ref<Set<number>>(new Set());
-const preloadedImages = ref<Array<HTMLImageElement>>([]);
+const transitionRunning = ref(false)
+const galleryLoaded = ref(true)
+const showGallery = ref(false)
+const loadedImages = ref<Set<number>>(new Set())
+const preloadedImages = ref<Array<HTMLImageElement>>([])
 
 onMounted(async () => {
-  await nextTick();
+  await nextTick()
 
   // If no images or galleryData is empty, stop loading
   if (!galleryData.value || galleryData.value.length === 0) {
-    galleryLoaded.value = false;
-    return;
+    galleryLoaded.value = false
+    return
   }
 
   // Create an array to hold image loading promises
-  const imageLoadPromises: Promise<void>[] = [];
+  const imageLoadPromises: Promise<void>[] = []
 
   // Preload the first image at minimum
-  const firstImageIndex = 0;
+  const firstImageIndex = 0
   if (galleryData.value[firstImageIndex]) {
-    const img = new Image();
-    img.src = galleryData.value[firstImageIndex].src;
+    const img = new Image()
+    img.src = galleryData.value[firstImageIndex].src
 
     const promise = new Promise<void>((resolve) => {
       img.onload = () => {
-        loadedImages.value.add(firstImageIndex);
-        resolve();
-      };
+        loadedImages.value.add(firstImageIndex)
+        resolve()
+      }
       img.onerror = () => {
-        loadedImages.value.add(firstImageIndex); // Count as loaded anyway
-        resolve();
-      };
-    });
+        loadedImages.value.add(firstImageIndex) // Count as loaded anyway
+        resolve()
+      }
+    })
 
-    imageLoadPromises.push(promise);
-    preloadedImages.value.push(img);
+    imageLoadPromises.push(promise)
+    preloadedImages.value.push(img)
   }
 
   // Wait for at least the first image to load
-  await Promise.race(imageLoadPromises);
+  await Promise.race(imageLoadPromises)
 
   setTimeout(() => {
-    galleryLoaded.value = false;
-  }, 500);
+    galleryLoaded.value = false
+  }, 500)
 
-  showGallery.value = true;
-  window.addEventListener('keydown', handleKeyDown);
-});
+  showGallery.value = true
+  window.addEventListener("keydown", handleKeyDown)
+})
 
 const handleImageLoad = (index: number) => {
-  loadedImages.value.add(index);
-};
+  loadedImages.value.add(index)
+}
 
 const handleImageError = (index: number) => {
-  loadedImages.value.add(index);
-};
+  loadedImages.value.add(index)
+}
 
 const doNext = () => {
-  if (transitionRunning.value) return;
-  showSlider('next');
-};
+  if (transitionRunning.value) return
+  showSlider("next")
+}
 
 const doPrevious = () => {
-  if (transitionRunning.value) return;
-  showSlider('prev');
-};
+  if (transitionRunning.value) return
+  showSlider("prev")
+}
 
-let runTimeOut: any;
-let runNextAuto: any = null;
+let runTimeOut: any
+let runNextAuto: any = null
 
 function showSlider(type: string) {
-  transitionRunning.value = true;
+  transitionRunning.value = true
 
-  const currentSliderItems = Array.from(sliderGalleryImagesList.value?.children || []);
-  const currentThumbnailItems = Array.from(sliderGalleryThumbnailsList.value?.children || []);
+  const currentSliderItems = Array.from(sliderGalleryImagesList.value?.children || [])
+  const currentThumbnailItems = Array.from(sliderGalleryThumbnailsList.value?.children || [])
 
-  if (type === 'next') {
+  if (type === "next") {
     if (currentSliderItems.length) {
-      const firstItem = currentSliderItems[0];
+      const firstItem = currentSliderItems[0]
       if (firstItem) {
-        sliderGalleryImagesList.value?.appendChild(firstItem);
+        sliderGalleryImagesList.value?.appendChild(firstItem)
       }
     }
 
     if (currentThumbnailItems.length) {
-      const firstThumb = currentThumbnailItems[0];
+      const firstThumb = currentThumbnailItems[0]
       if (firstThumb) {
-        sliderGalleryThumbnailsList.value?.appendChild(firstThumb);
+        sliderGalleryThumbnailsList.value?.appendChild(firstThumb)
       }
     }
 
-    sliderGalleryWrapper.value?.classList.add('next');
+    sliderGalleryWrapper.value?.classList.add("next")
   } else {
     if (currentSliderItems.length) {
-      const lastItem = currentSliderItems[currentSliderItems.length - 1];
+      const lastItem = currentSliderItems[currentSliderItems.length - 1]
       if (lastItem) {
-        lastItem.classList.add('prepend-item');
-        sliderGalleryImagesList.value?.prepend(lastItem);
+        lastItem.classList.add("prepend-item")
+        sliderGalleryImagesList.value?.prepend(lastItem)
       }
     }
 
     if (currentThumbnailItems.length) {
-      const lastThumb = currentThumbnailItems[currentThumbnailItems.length - 1];
+      const lastThumb = currentThumbnailItems[currentThumbnailItems.length - 1]
       if (lastThumb) {
-        lastThumb.classList.add('prepend-item');
-        sliderGalleryThumbnailsList.value?.prepend(lastThumb);
+        lastThumb.classList.add("prepend-item")
+        sliderGalleryThumbnailsList.value?.prepend(lastThumb)
       }
     }
 
-    sliderGalleryWrapper.value?.offsetWidth; // Force reflow
-    sliderGalleryWrapper.value?.classList.add('prev');
+    sliderGalleryWrapper.value?.offsetWidth // Force reflow
+    sliderGalleryWrapper.value?.classList.add("prev")
   }
 
-  clearTimeout(runTimeOut);
+  clearTimeout(runTimeOut)
   runTimeOut = setTimeout(() => {
-
     if (sliderGalleryWrapper.value) {
-      sliderGalleryWrapper.value.classList.remove('next');
-      sliderGalleryWrapper.value.classList.remove('prev');
+      sliderGalleryWrapper.value.classList.remove("next")
+      sliderGalleryWrapper.value.classList.remove("prev")
 
-      const items = sliderGalleryImagesList.value?.querySelectorAll('.prepend-item');
-      items?.forEach((item) => item.classList.remove('prepend-item'));
+      const items = sliderGalleryImagesList.value?.querySelectorAll(".prepend-item")
+      items?.forEach((item) => item.classList.remove("prepend-item"))
 
-      const thumbs = sliderGalleryThumbnailsList.value?.querySelectorAll('.prepend-item');
-      thumbs?.forEach((thumb) => thumb.classList.remove('prepend-item'));
+      const thumbs = sliderGalleryThumbnailsList.value?.querySelectorAll(".prepend-item")
+      thumbs?.forEach((thumb) => thumb.classList.remove("prepend-item"))
     }
-    transitionRunning.value = false;
-  }, props.animationDuration);
+    transitionRunning.value = false
+  }, props.animationDuration)
 
   // Reset auto-run timer
-  clearTimeout(runNextAuto);
+  clearTimeout(runNextAuto)
   runNextAuto = setTimeout(() => {
-    if (!props.autoRun || galleryLoaded.value) return;
-    doNext();
-  }, props.autoRunInterval);
+    if (!props.autoRun || galleryLoaded.value) return
+    doNext()
+  }, props.autoRunInterval)
 }
 
 // Add keyboard navigation event handlers
 const handleKeyDown = (event: KeyboardEvent) => {
   // Don't process key events if transition is running or gallery isn't loaded
   if (transitionRunning.value || galleryLoaded.value) {
-    return;
+    return
   }
 
-  if (event.key === 'ArrowLeft') {
-    doPrevious();
-  } else if (event.key === 'ArrowRight') {
-    doNext();
+  if (event.key === "ArrowLeft") {
+    doPrevious()
+  } else if (event.key === "ArrowRight") {
+    doNext()
   }
-};
+}
 
 // Initialize auto-run only after loading completes
 watch(galleryLoaded, (previousValue, currentValue) => {
   if (!currentValue && props.autoRun) {
-    clearTimeout(runNextAuto);
+    clearTimeout(runNextAuto)
     runNextAuto = setTimeout(() => {
-      doNext();
-    }, props.autoRunInterval);
+      doNext()
+    }, props.autoRunInterval)
   }
-});
+})
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 
 onBeforeUnmount(() => {
-  showGallery.value = false;
-  clearTimeout(runTimeOut);
-  clearTimeout(runNextAuto);
-  window.removeEventListener('keydown', handleKeyDown);
-});
+  showGallery.value = false
+  clearTimeout(runTimeOut)
+  clearTimeout(runNextAuto)
+  window.removeEventListener("keydown", handleKeyDown)
+})
 </script>
 
 <style lang="css">
 .slider-gallery {
-  --_animationDuration: v-bind(animationDuration + 'ms');
+  --_animationDuration: v-bind(animationDuration + "ms");
 
   --_thumbnailAspectRatio: 150 /220;
 
@@ -498,7 +499,7 @@ onBeforeUnmount(() => {
           }
           &.dark {
             color: #000;
-}
+          }
         }
 
         .description {