feat. 일반 템플릿 로그 추가

layers/components/widgets/slide/Fade.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { Splide, SplideTrack } from '@splidejs/vue-splide'
+import { getPaginationClass } from '#layers/utils/styleUtil'
+import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
+import type { PageDataResourceGroups } from '#layers/types/api/pageData'
+
+interface Props {
+  drag?: boolean
+  autoplay?: boolean
+  interval?: number
+  arrows?: boolean
+  arrowsData?: PageDataResourceGroups
+  pagination?: boolean
+  paginationData?: PageDataResourceGroups
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  drag: true,
+  autoplay: false,
+  interval: 5000,
+  arrows: true,
+  pagination: true,
+})
+
+const emit = defineEmits(['mounted', 'move'])
+
+const splideIndex = defineModel<number>('index', { required: false })
+
+const splideRef = ref()
+
+const options = computed((): ResponsiveOptions => {
+  return {
+    type: 'fade',
+    rewind: true,
+    perPage: 1,
+    perMove: 1,
+    speed: 600,
+    easing: 'ease-in-out',
+    updateOnMove: true,
+    drag: props.drag,
+    autoplay: props.autoplay,
+    interval: props.interval,
+    pauseOnHover: false,
+    pauseOnFocus: false,
+    arrows: props.arrows,
+    pagination: props.pagination,
+    flickPower: 300,
+    classes: {
+      pagination: 'splide-pagination-bullets type-full',
+      page: 'splide-pagination-bullet',
+    },
+  }
+})
+
+const handleSplideMounted = (splide: SplideType) => {
+  emit('mounted', splide)
+
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = splide.index
+  }
+}
+
+const handleMove = (
+  splide: SplideType,
+  newIndex: number,
+  oldIndex: number,
+  destIndex: number
+) => {
+  emit('move', splide, newIndex, oldIndex, destIndex)
+
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = newIndex
+  }
+}
+
+defineExpose({
+  splide: computed(() => splideRef.value?.splide),
+})
+</script>
+
+<template>
+  <Splide
+    ref="splideRef"
+    :options="options"
+    :has-track="false"
+    class="h-full"
+    :style="getPaginationClass(props.paginationData)"
+    @splide:mounted="handleSplideMounted"
+    @splide:move="handleMove"
+  >
+    <SplideTrack>
+      <slot />
+    </SplideTrack>
+    <BlocksSlideArrows v-if="props.arrows" :arrows-data="props.arrowsData" />
+  </Splide>
+</template>
+
+<style scoped>
+.splide:deep(.splide__track) {
+  @apply h-full;
+}
+</style>