boursecu_user/src/views/base/wallet/components/UISlider/index.vue

<template>
  <div ref="container" class="h-[28vh] flex items-end">
    <div ref="el" class="w-full flex flex-col relative h-full test">
      <CardItem v-for="(item,i) in props?.items" :key="i" v-model:sliderIndex="index" :card-number="item?.cart_number"
                :color="colors[i%3]"
                :self-index="i" :shaba="item?.shaba_number" :title="getBankDisplayName(item?.bank_name)" :active="item.sts === 2" :id="item?.id"
                @cardDeleted="handleCardDeleted"
      />
      <div class="absolute bottom-1 right-0 left-0 z-100 flex justify-center items-center opacity-70 pointer-events-none">
        <div class="flex gap-1 bg-gray-500 px-2 py-1 rounded-lg">
          <Transition name="slide-up" mode="out-in" v-for="i in items.length" :key="i">
            <div v-if="i - 1  === index" class="w-2 h-2 rounded-full bg-primary"/>
            <div v-else class="w-2 h-2 rounded-full bg-white"/>
          </Transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
// import {usePointerSwipe} from '@vueuse/core'
// import type {UseSwipeDirection} from '@vueuse/core'
// import type { UseSwipeDirection } from '@vueuse/core'
import { useSwipe } from '@vueuse/core'
import CardItem from './CardItem.vue'
import type { Card } from '@/models/wallet'
import { getBankDisplayName } from '@/utils/bankBranding'

const el = ref(null)
const container = ref<HTMLElement | null>(null)

interface Prop {
  items: Array<Card>
  id: number | string
}

const props = defineProps<Prop>()
const emits = defineEmits(['update:id', 'cardDeleted'])

function handleCardDeleted() {
  emits('cardDeleted')
}

const localValue = computed({
  get() {
    return props.id
  },

  set(value) {
    emits('update:id', value)
  }
})
// const decideSwip = ref<boolean>(false)

const { direction, isSwiping, lengthX, lengthY } = useSwipe(el/*, {
  onSwipeStart(){
    console.log('salam')
  },
  onSwipe(e: PointerEvent, direction: UseSwipeDirection) {
    console.log('container',direction)
    if (!decideSwip.value){
      if (direction === 'up') {
        index.value++
      } else if (direction === 'down') {
        index.value--
      }
      decideSwip.value = true
    }
  },
  onSwipeEnd(e: PointerEvent){
    console.log('container1')

    decideSwip.value = false
  }
}*/)

function getRandomColor() {
  var letters = '0123456789ABCDEF'
  var color = '#'
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)]
  }
  return color
}

const colors = ['#4B84EB', '#889BCD', '#C9A68D']

watch(isSwiping, () => {
  // console.log(direction.value)
  if (isSwiping.value) {
    // console.log('salam')
    if (direction.value === 'up' && props.items.length - 1 > index.value) {
      index.value++
    } else if (direction.value === 'down' && index.value > 0) {
      index.value--
    }
    // console.log(index.value)
  }
})

const index = ref<number>(props.items.length - 1)
onMounted(()=> localValue.value = props.items[index.value]?.id)
watch(index, (n: number)=> {
  console.log(n)
  localValue.value = props.items[n]?.id
})

/*
const items = [
  {
    title: 'بانک ملی',
    cardNumber: 6219861918606103,
    shaba: 'IR590560611828005106225701',
    color: getRandomColor()
  },
  {
    title: 'بانک ملی',
    cardNumber: 6219861918606103,
    shaba: 'IR590560611828005106225701',
    color: getRandomColor()
  },
  {
    title: 'بانک ملت',
    cardNumber: 6219861918606103,
    shaba: 'IR590560611828005106225701',
    color: getRandomColor()
  },
  {
    title: 'بانک سامان',
    cardNumber: 6219861918606103,
    shaba: 'IR590560611828005106225701',
    color: getRandomColor()
  },
  {
    title: 'بانک پاسارگاد',
    cardNumber: 6219861918606103,
    shaba: 'IR590560611828005106225701',
    color: getRandomColor()
  },
  {
    title: 'بانک صادرات',
    cardNumber: 6219861918606103,
    shaba: 'IR590560611828005106225701',
    color: getRandomColor()
  },
  {
    title: 'بانک ملی',
    cardNumber: 6219861918606103,
    shaba: 'IR590560611828005106225701',
    color: getRandomColor()
  },
  {
    title: 'بانک ملت',
    cardNumber: 6219861918606103,
    shaba: 'IR590560611828005106225701',
    color: getRandomColor()
  },
  {
    title: 'بانک سامان',
    cardNumber: 6219861918606103,
    shaba: 'IR590560611828005106225701',
    color: getRandomColor()
  },
  {
    title: 'بانک پاسارگاد',
    cardNumber: 6219861918606103,
    shaba: 'IR590560611828005106225701',
    color: getRandomColor()
  },
]
*/

// const indexCss = computed(()=> index.value)

// watch(index,()=>{
//   key++
//   console.log(key)
// })

// let key = 0
/*function findPosition(pos: number) {
  // console.log(pos,index)
  let debug
  if (pos === index.value){
    debug = 'w-full z-100'
  }
  else /!*if (pos > index.value)*!/{
    debug = `w-[${100 - Math.abs(index.value-pos) * 2}%] z-${100 - Math.abs(index.value-pos)}`
  }
  console.log(debug)
  return debug
}*/
/*
function mouseUp() {
  index.value--
}

function mouseDown() {
  console.log('salam')
  index.value++
}
*/

/*function findPositionStyle(pos: number) {
  // console.log(pos,index)
  let debug
  if (pos === index.value) {
    debug = 'width: 100; z-index: 100; opacity: 1; margin-top: -200px;'
  } else /!*if (pos > index.value)*!/{
    // debug = `w-[${100 - Math.abs(index.value-pos) * 2}%] z-${100 - Math.abs(index.value-pos)}`
    debug = `width: ${100 - Math.abs(index.value - pos) * 3}%;
    z-index: ${100 - Math.abs(index.value - pos)};
    opacity: ${1 - Math.abs((index.value - pos) * 15) / 100};
    margin-top: ${-200 - Math.abs((index.value - pos) * 4)}px;`
  }
  // console.log(debug)
  return debug
}*/
</script>

<style lang="less" scoped>
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.25s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(3px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-3px);
}
//.test .card:first-child
//  margin-top: 0 !important

//.card
//  height: 215px
//  width: 100%
//  align-self: center
//  border-radius: 24px
//  transition: .5s
//
//.card:first-child
//  margin-top: 0 !important

//$total-items: 30

//@for $i from 1 through $total-items
//  .card:nth-child(#{$i})
//    @if($i > v-bind(indexCss))
//      width: calc(percentage(100 - ($i * 4)) / 100)
//    @if($i == v-bind(indexCss))
//      width: 100%
//    @if($i < v-bind(indexCss))
//      width: calc(percentage(100 - ($i * 4)) / 100)

//.animate > div:nth-child(#{$i})
  //  animation-delay: .08s * $i

</style>