adata-ui 2.1.40-beta.17 → 2.1.40-beta.19

package/components/overlays/side-panel/ASidePanel.vue

@@ -1,442 +1,442 @@
-<script setup lang="ts">
-import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
-import {useAdaptive} from "~/composables/useAdaptive";
-
-type Side = 'top' | 'right' | 'bottom' | 'left'
-const props = withDefaults(defineProps<{
-  idName?: string
-  hideCloseBtn?: boolean
-  noClose?: boolean
-  side?: Side
-  rerender?: boolean
-  zIndex?: number | 'auto'
-  width?: string
-  height?: string
-  lockScroll?: boolean
-  lockScrollHtml?: boolean
-  hideScrollbar?: boolean
-  overlayColor?: string
-  overlayOpacity?: number
-  overlayDuration?: number
-  panelColor?: string
-  panelDuration?: number
-  transitionName?: string
-  headerClass?: string
-  bodyClass?: string
-  footerClass?: string
-  dataTestId?: string
-}>(), {
-  idName: "vsp-container",
-  side: "right",
-  zIndex: "auto",
-  width: "auto",
-  height: "auto",
-  lockScroll: true,
-  hideScrollbar: false,
-  overlayColor: "black",
-  overlayOpacity: 0.5,
-  overlayDuration: 500,
-  panelColor: "bg-white dark:bg-gray-900",
-  panelDuration: 300,
-  dataTestId: undefined,
-})
-
-defineEmits<{
-  (e: 'opened'): void
-  (e: 'closed'): void
-}>()
-const modelValue = defineModel()
-
-let teleportContainer: HTMLDivElement | undefined = undefined
-const panel = ref<HTMLElement | null>(null)
-const overlay = ref<HTMLElement | null>(null)
-const footer = ref<HTMLElement | null>(null)
-const header = ref<HTMLElement | null>(null)
-const body = ref<HTMLElement | null>(null)
-const panelSide = ref<Side>(props.side)
-
-
-const device = useAdaptive()
-
-const zIndex = ref<number>();
-const isBodyAlreadyLocked = ref(false);
-
-const attrs = useAttrs()
-
-const closePanel = () => modelValue.value = false
-
-const lockUnlockBodyScroll = (elem: HTMLElement, lock: boolean) => {
-  if (lock) {
-    setTimeout(() => {
-      disableBodyScroll(elem, {
-        reserveScrollBarGap: true,
-        allowTouchMove: elem && elem !== document.body
-      })
-      disableBodyScroll(elem, {reserveScrollBarGap: true})
-      if (props.lockScrollHtml) document.documentElement.style.overflow = 'hidden'
-    }, 0)
-    return
-  }
-  enableBodyScroll(elem)
-  if (props.lockScrollHtml) document.documentElement.style.removeProperty('overflow')
-}
-
-const getMaxZIndex = () =>
-  Math.max(
-    ...Array.from(document.querySelectorAll('body *'), (el) =>
-      parseFloat(window.getComputedStyle(el).zIndex),
-    ).filter((zIndex) => !Number.isNaN(zIndex)),
-    0,
-  );
-
-onMounted(() => {
-  zIndex.value = props.zIndex === 'auto' ? getMaxZIndex() : props.zIndex
-
-  const alreadyCreatedTarget = document.getElementById(props.idName)
-  if (!!alreadyCreatedTarget) return
-  teleportContainer = document.createElement('div')
-  teleportContainer.setAttribute('id', props.idName)
-  document.body.appendChild(teleportContainer)
-})
-
-onBeforeUnmount(() => {
-  if (props.lockScroll && panel.value && modelValue.value) lockUnlockBodyScroll(panel.value, false)
-  if (teleportContainer) document.body.removeChild(teleportContainer)
-})
-
-watch(() => device.value, () => {
-  panelSide.value = device.value.isTablet || device.value.isSmallTablet ? 'bottom': props.side
-}, { immediate: true })
-
-watch(() => [modelValue.value, panel.value], (newP, oldP) => {
-  const wasShown = oldP ? (oldP[0] as boolean) : false
-  const [isShown, panelEl] = newP
-  const isOpening = isShown
-  const isClosing = wasShown && !isShown
-  if (!panelEl) return
-  // if (isOpening) isBodyAlreadyLocked.value = !!document.body.style.overflow
-
-  if (isShown) {
-    if (props.lockScroll) lockUnlockBodyScroll(panelEl, true)
-    return;
-  }
-
-  if (!props.lockScroll || !isClosing || isBodyAlreadyLocked.value) return;
-
-  setTimeout(() => {
-    if (panelEl) lockUnlockBodyScroll(panelEl, false)
-  }, props.panelDuration)
-}, {immediate: true})
-
-const roundedClass = computed(() => {
-  const classes = {
-    left: "rounded-r-lg",
-    right: "rounded-l-lg",
-    top: "rounded-b-lg",
-    bottom: "rounded-t-lg",
-  }
-
-  return classes[panelSide.value]
-})
-
-const overlayStyles = computed(() => ({
-  zIndex: zIndex.value,
-  animationDuration: `${props.overlayDuration}ms`,
-  '--overlay-opacity': props.overlayOpacity,
-  opacity: modelValue.value ? props.overlayOpacity : 0,
-  backgroundColor: props.overlayColor,
-  pointerEvents: !modelValue.value ? 'none' : 'all',
-}));
-
-const panelStyles = computed(() => ({
-  width: ['left', 'right'].includes(panelSide.value) ? props.width : undefined,
-  maxWidth: '100%',
-
-  ...(['top', 'bottom'].includes(panelSide.value)
-    ? {
-      height: device.value.isSmallTablet || device.value.isTablet ? '100%' : props.height,
-      maxHeight: device.value.isMobile ? '90%': '100%',
-    }
-    : {}),
-
-  zIndex: zIndex.value,
-  animationDuration: `${props.panelDuration}ms`,
-
-  ...Object.assign({}, attrs.style),
-}));
-// Mobile swipe
-const positionStart = ref<number>(0)
-const isClose = ref<boolean>(false)
-const modalHeight = ref(0)
-
-const touchstart = (event: TouchEvent) => {
-  isClose.value = false
-  positionStart.value = event.touches[0].clientY
-  modalHeight.value = panel.value?.offsetHeight || 0
-}
-
-const touchmove = (event: TouchEvent) => {
-  if (!device.value.isSmallTablet && !device.value.isTablet) return
-  event.preventDefault();
-  const touchPosition = event.touches[0].clientY
-  const step = touchPosition - positionStart.value
-
-  if (step < 0) return
-
-  const newHeight = modalHeight.value - step
-  panel.value.style.height = `${newHeight}px`
-  isClose.value = step > 65
-}
-
-const touchend = () => {
-  if (isClose.value) {
-    closePanel()
-  } else {
-    panel.value.style.height = `${modalHeight.value}px`
-  }
-}
-</script>
-
-<template>
-  <client-only>
-    <Teleport :to="`#${idName}`">
-      <div class="vsp-wrapper" :class="[modelValue && 'vsp-wrapper--active']">
-        <Transition name="overlay">
-          <div
-            v-show="modelValue"
-            ref="overlay"
-            class="vsp-overlay fixed top-0 left-0 w-full h-full"
-            :style="overlayStyles"
-            @click="() => (noClose ? undefined: closePanel())"
-          />
-        </Transition>
-        <Transition
-          :name="transitionName || `slide-${panelSide}`"
-          @after-enter="$emit('opened')"
-          @after-leave="$emit('closed')">
-          <div
-            v-if="rerender ? modelValue : true"
-            v-show="rerender ? true: modelValue"
-            ref="panel"
-            class="vsp fixed flex flex-col"
-            :class="[`vsp--${panelSide}-side`, $attrs.class, roundedClass, panelColor]"
-            :style="panelStyles"
-            :data-test-id="dataTestId"
-          >
-            <div
-              class="w-full flex justify-center items-center mt-1 lg:hidden"
-              @touchmove="touchmove"
-              @touchstart="touchstart"
-              @touchend="touchend"
-            >
-              <div class="h-1 w-10 bg-[#D9D9D9] rounded m-1" />
-            </div>
-            <div
-              :class="roundedClass"
-              class="absolute w-8 px-2 py-4 bg-blue-700 text-white -left-8 top-8 cursor-pointer lg:block hidden"
-              v-if="!hideCloseBtn"
-              @click="closePanel"
-            >
-              <a-icon-x-mark />
-            </div>
-            <div v-if="!!$slots.header" ref="header"
-                 @touchmove="touchmove"
-                 @touchstart="touchstart"
-                 @touchend="touchend"
-                 :class="[headerClass, 'vsp__header border-b border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']">
-              <slot name="header" :close="closePanel"/>
-            </div>
-            <div
-              ref="body"
-              :class="[
-                  bodyClass,
-                  'vsp__body overflow-y-auto relative flex-grow-1 h-full lg:px-8 p-4',
-                  hideScrollbar ? 'vsp__body--hide-scroll' : '',
-                ]"
-            >
-              <slot name="default" :close="closePanel"/>
-            </div>
-            <div v-if="!!$slots.footer" ref="footer"
-                 :class="[footerClass, 'vsp__footer border-t border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']">
-              <slot name="footer"/>
-            </div>
-          </div>
-        </Transition>
-      </div>
-    </Teleport>
-  </client-only>
-</template>
-
-<style scoped lang="scss">
-.vsp-wrapper {
-  .vsp {
-    &--right-side,
-    &--left-side {
-      top: 0;
-      height: 100%;
-    }
-
-    &--right-side {
-      right: 0;
-      left: unset;
-    }
-
-    &--left-side {
-      right: unset;
-      left: 0;
-    }
-
-    &--bottom-side,
-    &--top-side {
-      left: 0;
-      width: 100%;
-    }
-
-    &--bottom-side {
-      bottom: 0;
-    }
-
-    &--top-side {
-      top: 0;
-    }
-
-    &__body {
-      &.overflow-y-auto::-webkit-scrollbar {
-        width: 8px;
-      }
-
-      &.overflow-y-auto::-webkit-scrollbar-thumb {
-        background: #2C3E5033;
-        border-radius: 6px;
-      }
-
-      &.vsp__body--hide-scroll {
-        scrollbar-width: none;
-
-        &::-webkit-scrollbar {
-          width: 0;
-          height: 0;
-        }
-      }
-    }
-  }
-
-  .overlay-enter-active,
-  .overlay-leave-active {
-    animation: overlay-transition;
-  }
-
-  .overlay-leave-active {
-    animation-direction: reverse;
-  }
-
-  .slide-right-enter-active,
-  .slide-right-leave-active {
-    animation: slide-right;
-  }
-
-  .slide-right-leave-active {
-    animation-direction: reverse;
-  }
-
-  .slide-left-enter-active,
-  .slide-left-leave-active {
-    animation: slide-left;
-  }
-
-  .slide-left-leave-active {
-    animation-direction: reverse;
-  }
-
-  .slide-top-enter-active,
-  .slide-top-leave-active {
-    animation: slide-left;
-  }
-
-  .slide-top-leave-active {
-    animation-direction: reverse;
-  }
-
-  .slide-top-enter-active,
-  .slide-top-leave-active {
-    animation: slide-top;
-  }
-
-  .slide-top-leave-active {
-    animation-direction: reverse;
-  }
-
-  .slide-bottom-enter-active,
-  .slide-bottom-leave-active {
-    animation: slide-bottom;
-  }
-
-  .slide-bottom-leave-active {
-    animation-direction: reverse;
-  }
-
-  @keyframes slide-right {
-    0% {
-      transform: translateX(100%);
-      opacity: 0;
-    }
-    100% {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes slide-left {
-    0% {
-      transform: translateX(-100%);
-      opacity: 0;
-    }
-    100% {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes slide-bottom {
-    0% {
-      transform: translateY(100%);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes slide-top {
-    0% {
-      transform: translateY(-100%);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes slide-top {
-    0% {
-      transform: translateY(-100%);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes overlay-transition {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: var(--overlay-opacity);
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
+import {useAdaptive} from "~/composables/useAdaptive";
+
+type Side = 'top' | 'right' | 'bottom' | 'left'
+const props = withDefaults(defineProps<{
+  idName?: string
+  hideCloseBtn?: boolean
+  noClose?: boolean
+  side?: Side
+  rerender?: boolean
+  zIndex?: number | 'auto'
+  width?: string
+  height?: string
+  lockScroll?: boolean
+  lockScrollHtml?: boolean
+  hideScrollbar?: boolean
+  overlayColor?: string
+  overlayOpacity?: number
+  overlayDuration?: number
+  panelColor?: string
+  panelDuration?: number
+  transitionName?: string
+  headerClass?: string
+  bodyClass?: string
+  footerClass?: string
+  dataTestId?: string
+}>(), {
+  idName: "vsp-container",
+  side: "right",
+  zIndex: "auto",
+  width: "auto",
+  height: "auto",
+  lockScroll: true,
+  hideScrollbar: false,
+  overlayColor: "black",
+  overlayOpacity: 0.5,
+  overlayDuration: 500,
+  panelColor: "bg-white dark:bg-gray-900",
+  panelDuration: 300,
+  dataTestId: undefined,
+})
+
+defineEmits<{
+  (e: 'opened'): void
+  (e: 'closed'): void
+}>()
+const modelValue = defineModel()
+
+let teleportContainer: HTMLDivElement | undefined = undefined
+const panel = ref<HTMLElement | null>(null)
+const overlay = ref<HTMLElement | null>(null)
+const footer = ref<HTMLElement | null>(null)
+const header = ref<HTMLElement | null>(null)
+const body = ref<HTMLElement | null>(null)
+const panelSide = ref<Side>(props.side)
+
+
+const device = useAdaptive()
+
+const zIndex = ref<number>();
+const isBodyAlreadyLocked = ref(false);
+
+const attrs = useAttrs()
+
+const closePanel = () => modelValue.value = false
+
+const lockUnlockBodyScroll = (elem: HTMLElement, lock: boolean) => {
+  if (lock) {
+    setTimeout(() => {
+      disableBodyScroll(elem, {
+        reserveScrollBarGap: true,
+        allowTouchMove: elem && elem !== document.body
+      })
+      disableBodyScroll(elem, {reserveScrollBarGap: true})
+      if (props.lockScrollHtml) document.documentElement.style.overflow = 'hidden'
+    }, 0)
+    return
+  }
+  enableBodyScroll(elem)
+  if (props.lockScrollHtml) document.documentElement.style.removeProperty('overflow')
+}
+
+const getMaxZIndex = () =>
+  Math.max(
+    ...Array.from(document.querySelectorAll('body *'), (el) =>
+      parseFloat(window.getComputedStyle(el).zIndex),
+    ).filter((zIndex) => !Number.isNaN(zIndex)),
+    0,
+  );
+
+onMounted(() => {
+  zIndex.value = props.zIndex === 'auto' ? getMaxZIndex() : props.zIndex
+
+  const alreadyCreatedTarget = document.getElementById(props.idName)
+  if (!!alreadyCreatedTarget) return
+  teleportContainer = document.createElement('div')
+  teleportContainer.setAttribute('id', props.idName)
+  document.body.appendChild(teleportContainer)
+})
+
+onBeforeUnmount(() => {
+  if (props.lockScroll && panel.value && modelValue.value) lockUnlockBodyScroll(panel.value, false)
+  if (teleportContainer) document.body.removeChild(teleportContainer)
+})
+
+watch(() => device.value, () => {
+  panelSide.value = device.value.isTablet || device.value.isSmallTablet ? 'bottom': props.side
+}, { immediate: true })
+
+watch(() => [modelValue.value, panel.value], (newP, oldP) => {
+  const wasShown = oldP ? (oldP[0] as boolean) : false
+  const [isShown, panelEl] = newP
+  const isOpening = isShown
+  const isClosing = wasShown && !isShown
+  if (!panelEl) return
+  // if (isOpening) isBodyAlreadyLocked.value = !!document.body.style.overflow
+
+  if (isShown) {
+    if (props.lockScroll) lockUnlockBodyScroll(panelEl, true)
+    return;
+  }
+
+  if (!props.lockScroll || !isClosing || isBodyAlreadyLocked.value) return;
+
+  setTimeout(() => {
+    if (panelEl) lockUnlockBodyScroll(panelEl, false)
+  }, props.panelDuration)
+}, {immediate: true})
+
+const roundedClass = computed(() => {
+  const classes = {
+    left: "rounded-r-lg",
+    right: "rounded-l-lg",
+    top: "rounded-b-lg",
+    bottom: "rounded-t-lg",
+  }
+
+  return classes[panelSide.value]
+})
+
+const overlayStyles = computed(() => ({
+  zIndex: zIndex.value,
+  animationDuration: `${props.overlayDuration}ms`,
+  '--overlay-opacity': props.overlayOpacity,
+  opacity: modelValue.value ? props.overlayOpacity : 0,
+  backgroundColor: props.overlayColor,
+  pointerEvents: !modelValue.value ? 'none' : 'all',
+}));
+
+const panelStyles = computed(() => ({
+  width: ['left', 'right'].includes(panelSide.value) ? props.width : undefined,
+  maxWidth: '100%',
+
+  ...(['top', 'bottom'].includes(panelSide.value)
+    ? {
+      height: device.value.isSmallTablet || device.value.isTablet ? '100%' : props.height,
+      maxHeight: device.value.isMobile ? '90%': '100%',
+    }
+    : {}),
+
+  zIndex: zIndex.value,
+  animationDuration: `${props.panelDuration}ms`,
+
+  ...Object.assign({}, attrs.style),
+}));
+// Mobile swipe
+const positionStart = ref<number>(0)
+const isClose = ref<boolean>(false)
+const modalHeight = ref(0)
+
+const touchstart = (event: TouchEvent) => {
+  isClose.value = false
+  positionStart.value = event.touches[0].clientY
+  modalHeight.value = panel.value?.offsetHeight || 0
+}
+
+const touchmove = (event: TouchEvent) => {
+  if (!device.value.isSmallTablet && !device.value.isTablet) return
+  event.preventDefault();
+  const touchPosition = event.touches[0].clientY
+  const step = touchPosition - positionStart.value
+
+  if (step < 0) return
+
+  const newHeight = modalHeight.value - step
+  panel.value.style.height = `${newHeight}px`
+  isClose.value = step > 65
+}
+
+const touchend = () => {
+  if (isClose.value) {
+    closePanel()
+  } else {
+    panel.value.style.height = `${modalHeight.value}px`
+  }
+}
+</script>
+
+<template>
+  <client-only>
+    <Teleport :to="`#${idName}`">
+      <div class="vsp-wrapper" :class="[modelValue && 'vsp-wrapper--active']">
+        <Transition name="overlay">
+          <div
+            v-show="modelValue"
+            ref="overlay"
+            class="vsp-overlay fixed top-0 left-0 w-full h-full"
+            :style="overlayStyles"
+            @click="() => (noClose ? undefined: closePanel())"
+          />
+        </Transition>
+        <Transition
+          :name="transitionName || `slide-${panelSide}`"
+          @after-enter="$emit('opened')"
+          @after-leave="$emit('closed')">
+          <div
+            v-if="rerender ? modelValue : true"
+            v-show="rerender ? true: modelValue"
+            ref="panel"
+            class="vsp fixed flex flex-col"
+            :class="[`vsp--${panelSide}-side`, $attrs.class, roundedClass, panelColor]"
+            :style="panelStyles"
+            :data-test-id="dataTestId"
+          >
+            <div
+              class="w-full flex justify-center items-center mt-1 lg:hidden"
+              @touchmove="touchmove"
+              @touchstart="touchstart"
+              @touchend="touchend"
+            >
+              <div class="h-1 w-10 bg-[#D9D9D9] rounded m-1" />
+            </div>
+            <div
+              :class="roundedClass"
+              class="absolute w-8 px-2 py-4 bg-blue-700 text-white -left-8 top-8 cursor-pointer lg:block hidden"
+              v-if="!hideCloseBtn"
+              @click="closePanel"
+            >
+              <a-icon-x-mark />
+            </div>
+            <div v-if="!!$slots.header" ref="header"
+                 @touchmove="touchmove"
+                 @touchstart="touchstart"
+                 @touchend="touchend"
+                 :class="[headerClass, 'vsp__header border-b border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']">
+              <slot name="header" :close="closePanel"/>
+            </div>
+            <div
+              ref="body"
+              :class="[
+                  bodyClass,
+                  'vsp__body overflow-y-auto relative flex-grow-1 h-full lg:px-8 p-4',
+                  hideScrollbar ? 'vsp__body--hide-scroll' : '',
+                ]"
+            >
+              <slot name="default" :close="closePanel"/>
+            </div>
+            <div v-if="!!$slots.footer" ref="footer"
+                 :class="[footerClass, 'vsp__footer border-t border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']">
+              <slot name="footer"/>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Teleport>
+  </client-only>
+</template>
+
+<style scoped lang="scss">
+.vsp-wrapper {
+  .vsp {
+    &--right-side,
+    &--left-side {
+      top: 0;
+      height: 100%;
+    }
+
+    &--right-side {
+      right: 0;
+      left: unset;
+    }
+
+    &--left-side {
+      right: unset;
+      left: 0;
+    }
+
+    &--bottom-side,
+    &--top-side {
+      left: 0;
+      width: 100%;
+    }
+
+    &--bottom-side {
+      bottom: 0;
+    }
+
+    &--top-side {
+      top: 0;
+    }
+
+    &__body {
+      &.overflow-y-auto::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &.overflow-y-auto::-webkit-scrollbar-thumb {
+        background: #2C3E5033;
+        border-radius: 6px;
+      }
+
+      &.vsp__body--hide-scroll {
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+      }
+    }
+  }
+
+  .overlay-enter-active,
+  .overlay-leave-active {
+    animation: overlay-transition;
+  }
+
+  .overlay-leave-active {
+    animation-direction: reverse;
+  }
+
+  .slide-right-enter-active,
+  .slide-right-leave-active {
+    animation: slide-right;
+  }
+
+  .slide-right-leave-active {
+    animation-direction: reverse;
+  }
+
+  .slide-left-enter-active,
+  .slide-left-leave-active {
+    animation: slide-left;
+  }
+
+  .slide-left-leave-active {
+    animation-direction: reverse;
+  }
+
+  .slide-top-enter-active,
+  .slide-top-leave-active {
+    animation: slide-left;
+  }
+
+  .slide-top-leave-active {
+    animation-direction: reverse;
+  }
+
+  .slide-top-enter-active,
+  .slide-top-leave-active {
+    animation: slide-top;
+  }
+
+  .slide-top-leave-active {
+    animation-direction: reverse;
+  }
+
+  .slide-bottom-enter-active,
+  .slide-bottom-leave-active {
+    animation: slide-bottom;
+  }
+
+  .slide-bottom-leave-active {
+    animation-direction: reverse;
+  }
+
+  @keyframes slide-right {
+    0% {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-left {
+    0% {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-bottom {
+    0% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-top {
+    0% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-top {
+    0% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes overlay-transition {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: var(--overlay-opacity);
+    }
+  }
+}
+</style>