srcdev-nuxt-components 6.1.19 → 6.1.21

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,
@@ -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/magnetic-navigation/MagneticNavigation.vue

@@ -0,0 +1,160 @@
+<template>
+  <component :is="tag" class="magnetic-navigation" :class="[elementClasses]">
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Blog</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </nav>
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  tag: {
+    type: String,
+    default: "div",
+    validator(value: string) {
+      return ["div", "header", "footer", "nav"].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">
+.magnetic-navigation {
+  /*
+  --_background-image: url("/images/rotating-carousel/image-3.webp");
+
+  background-image: var(--_background-image);
+  background-size: cover;
+  background-position: 0 -400px;
+  background-attachment: fixed;
+*/
+  /* padding-block: 200px 2000px; */
+
+  nav {
+    width: fit-content;
+    margin: 3rem auto;
+    background: hsl(0 0% 0% / 0.8);
+
+    padding: 8px;
+    border-radius: 8px;
+
+    isolation: isolate;
+
+    anchor-name: --hovered-link;
+
+    li:hover {
+      anchor-name: --hovered-link;
+    }
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: calc(anchor(bottom) - 10px);
+      left: calc(anchor(left) + 1rem);
+      right: calc(anchor(right) + 1rem);
+      bottom: calc(anchor(bottom) + 5px);
+      border-radius: 10px;
+
+      position-anchor: --hovered-link;
+
+      transition: 500ms
+        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
+        );
+    }
+
+    &::before {
+      z-index: -1;
+      background: rgb(0 0 0 / 0.2);
+      backdrop-filter: blur(2px);
+    }
+
+    &::after {
+      z-index: -2;
+      background-image: var(--_background-image);
+      background-size: cover;
+      background-position: var(--_background-position);
+      background-attachment: fixed;
+    }
+
+    &:has(a:hover)::before,
+    &:has(a:hover)::after {
+      top: anchor(top);
+      left: anchor(left);
+      right: anchor(right);
+      bottom: anchor(bottom);
+
+      @supports (corner-shape: squircle) {
+        corner-shape: squircle;
+        border-radius: 50%;
+      }
+    }
+
+    &:has(li:first-of-type a:hover)::before,
+    &:has(li:first-of-type a:hover)::after {
+      @supports (corner-shape: squircle) {
+        border-radius: 32px 50% 50% 32px;
+      }
+    }
+
+    &:has(li:last-of-type a:hover)::before,
+    &:has(li:last-of-type a:hover)::after {
+      @supports (corner-shape: squircle) {
+        border-radius: 50% 32px 32px 50%;
+      }
+    }
+
+    @supports (corner-shape: squircle) {
+      border-radius: 24px;
+      corner-shape: squircle;
+    }
+
+    > ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      display: flex;
+      gap: 24px;
+
+      a {
+        display: block;
+        padding: 1rem;
+        text-decoration: none;
+        color: white;
+        font-size: var(--step-7);
+      }
+    }
+  }
+}
+</style>

package/package.json

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