before delete 3software

src/components/pnShadowScroll.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :class="{'fix-scroll-area-content': hideShadows }">
+    <q-scroll-area
+      :style="{ height: height + 'px' }"
+      class="w100 q-pa-none q-ma-none"
+      @scroll="onScroll"
+      :class=" {
+        'shadow-top': hasScrolled,
+        'shadow-bottom': hasScrolledBottom
+      }"
+      >
+      <slot/>
+      <div class="q-pa-sm"/>
+    </q-scroll-area>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  defineProps<{
+    height: number
+    hideShadows: boolean
+  }>()
+
+  const hasScrolled = ref(false)
+  const hasScrolledBottom = ref(false)
+
+  interface ScrollInfo {
+    verticalPosition: number;
+    verticalPercentage: number;
+    verticalSize: number;
+    verticalContainerSize: number;
+  }
+
+  function onScroll(info: ScrollInfo) {
+    hasScrolled.value = info.verticalPosition > 0
+    const scrollEnd = info.verticalPosition + info.verticalContainerSize >= info.verticalSize - 1
+    hasScrolledBottom.value = !scrollEnd
+  }
+
+</script>
+
+<style scoped>
+  .q-scrollarea {
+    position: relative;
+    transform: translateY(0);
+  }
+
+  .q-scrollarea::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(to bottom, 
+      rgba(0,0,0,0.12) 0%, 
+      rgba(0,0,0,0.08) 50%,
+      transparent 100%
+    );
+    pointer-events: none;
+    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+    transform: translateY(-8px);
+    will-change: opacity, transform;
+    z-index: 1;
+  }
+
+  .q-scrollarea::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(to top, 
+      rgba(0,0,0,0.12) 0%, 
+      rgba(0,0,0,0.08) 50%,
+      transparent 100%
+    );
+    pointer-events: none;
+    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+    transform: translateY(8px);
+    will-change: opacity, transform;
+    z-index: 1;
+  }
+
+  .fix-scroll-area-content:deep(.q-scrollarea::before) {
+    content: none;
+   }
+
+  .fix-scroll-area-content:deep(.q-scrollarea::after) {
+    content: none;
+  }
+
+  .q-scrollarea.shadow-top::before {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .q-scrollarea.shadow-bottom::after {
+    opacity: 1;
+    transform: translateY(0);
+  }
+</style>