@sugarat/theme 0.5.10 → 0.5.12-beta.0

package/src/components/Carousel.vue

@@ -0,0 +1,254 @@
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+
+const props = defineProps({
+  height: { type: String, default: '300px' },
+  initialIndex: { type: Number, default: 0 },
+  trigger: { type: String, default: 'hover' },
+  autoplay: { type: Boolean, default: true },
+  interval: { type: Number, default: 3000 },
+  indicatorPosition: { type: String, default: '' },
+  arrow: { type: String, default: 'hover' },
+  type: { type: String, default: '' },
+  loop: { type: Boolean, default: true },
+  direction: { type: String, default: 'horizontal' },
+  pauseOnHover: { type: Boolean, default: true },
+})
+
+const activeIndex = ref(props.initialIndex)
+const items = ref<any[]>([])
+const timer = ref<any>(null)
+
+function addItem(item: any) {
+  items.value.push(item)
+}
+
+function removeItem(uid: number) {
+  const index = items.value.findIndex(item => item.uid === uid)
+  if (index > -1)
+    items.value.splice(index, 1)
+}
+
+provide('carousel', {
+  addItem,
+  removeItem,
+  activeIndex,
+  items,
+  type: computed(() => props.type),
+  direction: computed(() => props.direction),
+})
+
+function startTimer() {
+  if (typeof window === 'undefined')
+    return
+  if (props.interval <= 0 || !props.autoplay || timer.value)
+    return
+  timer.value = setInterval(playSlides, props.interval)
+}
+
+function pauseTimer() {
+  if (timer.value) {
+    clearInterval(timer.value)
+    timer.value = null
+  }
+}
+
+function playSlides() {
+  if (activeIndex.value < items.value.length - 1) {
+    activeIndex.value++
+  }
+  else if (props.loop) {
+    activeIndex.value = 0
+  }
+}
+
+function setActiveItem(index: number) {
+  activeIndex.value = index
+}
+
+function prev() {
+  setActiveItem(activeIndex.value > 0 ? activeIndex.value - 1 : items.value.length - 1)
+}
+
+function next() {
+  setActiveItem(activeIndex.value < items.value.length - 1 ? activeIndex.value + 1 : 0)
+}
+
+function handleIndicatorClick(index: number) {
+  activeIndex.value = index
+}
+
+const hover = ref(false)
+
+function handleMouseEnter() {
+  hover.value = true
+  if (props.pauseOnHover)
+    pauseTimer()
+}
+
+function handleMouseLeave() {
+  hover.value = false
+  if (props.pauseOnHover)
+    startTimer()
+}
+
+watch(() => props.autoplay, (val) => {
+  val ? startTimer() : pauseTimer()
+})
+
+onMounted(() => {
+  startTimer()
+})
+
+onUnmounted(() => {
+  pauseTimer()
+})
+</script>
+
+<template>
+  <div
+    class="sugar-carousel"
+    :class="{ 'sugar-carousel--card': type === 'card' }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="sugar-carousel__container" :style="{ height }">
+      <slot />
+      <transition name="carousel-arrow-left">
+        <button
+          v-if="arrow !== 'never' && items.length > 1"
+          v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
+          type="button"
+          class="sugar-carousel__arrow sugar-carousel__arrow--left"
+          @click.stop="prev"
+        >
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z" /></svg>
+        </button>
+      </transition>
+      <transition name="carousel-arrow-right">
+        <button
+          v-if="arrow !== 'never' && items.length > 1"
+          v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
+          type="button"
+          class="sugar-carousel__arrow sugar-carousel__arrow--right"
+          @click.stop="next"
+        >
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z" /></svg>
+        </button>
+      </transition>
+    </div>
+
+    <ul v-if="indicatorPosition !== 'none' && items.length > 1" class="sugar-carousel__indicators">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="sugar-carousel__indicator"
+        :class="{ 'is-active': index === activeIndex }"
+        @mouseenter="trigger === 'hover' && setActiveItem(index)"
+        @click.stop="handleIndicatorClick(index)"
+      >
+        <button class="sugar-carousel__button" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sugar-carousel {
+  position: relative;
+  overflow: hidden; // simplified
+  &:hover {
+    .sugar-carousel__arrow {
+      display: inline-flex;
+    }
+  }
+}
+
+.sugar-carousel__container {
+  position: relative;
+  height: 300px;
+  overflow: hidden;
+}
+
+.sugar-carousel__indicators {
+  position: absolute;
+  list-style: none;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+  padding: 0;
+  z-index: 20;
+}
+
+.sugar-carousel__indicator {
+  display: inline-block;
+  background-color: transparent;
+  padding: 12px 4px;
+  cursor: pointer;
+
+  &.is-active button {
+    opacity: 1;
+  }
+}
+
+.sugar-carousel__button {
+  display: block;
+  opacity: 0.48;
+  width: 30px;
+  height: 2px;
+  background-color: #d3dce6; // element-plus default like
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  transition: .3s;
+}
+
+.sugar-carousel__arrow {
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  height: 36px;
+  width: 36px;
+  cursor: pointer;
+  transition: .3s;
+  border-radius: 50%;
+  background-color: rgba(31, 45, 61, .11);
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  z-index: 20;
+  transform: translateY(-50%);
+  text-align: center;
+  font-size: 12px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    background-color: rgba(31, 45, 61, .23);
+  }
+
+  &--left {
+    left: 16px;
+  }
+
+  &--right {
+    right: 16px;
+  }
+}
+.carousel-arrow-left-enter-from,
+.carousel-arrow-left-leave-to {
+  opacity: 0;
+  transform: translateY(-50%) translateX(-10px);
+}
+
+.carousel-arrow-right-enter-from,
+.carousel-arrow-right-leave-to {
+  opacity: 0;
+  transform: translateY(-50%) translateX(10px);
+}
+</style>

package/src/components/CarouselItem.vue

@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted } from 'vue'
+
+const instance = getCurrentInstance()
+const uid = instance?.uid
+
+const carousel = inject('carousel') as any
+const { activeIndex, items, type, addItem, removeItem } = carousel
+
+const index = computed(() => {
+  return items.value.findIndex((item: any) => item.uid === uid)
+})
+
+const isActive = computed(() => index.value === activeIndex.value)
+
+// Card logic
+const CARD_SCALE = 0.83
+
+const cardStyle = computed(() => {
+  if (type.value !== 'card') {
+    // Normal mode: simplified translate
+    // const isPrev = index.value === activeIndex.value - 1 || (activeIndex.value === 0 && index.value === items.value.length - 1)
+    // const isNext = index.value === activeIndex.value + 1 || (activeIndex.value === items.value.length - 1 && index.value === 0)
+
+    // Simple show/hide for normal mode or use CSS transition
+    // Better: use transform
+    // const offset = index.value - activeIndex.value
+    // Handle loop wrap
+    // ... too complex to implement full logic in one go.
+    // Let's rely on simple absolute positioning and z-index for normal fade/slide
+
+    return {
+      transform: `translateX(${(index.value - activeIndex.value) * 100}%)`,
+      zIndex: isActive.value ? 2 : 1,
+    }
+  }
+
+  // Card Mode
+  // const parentWidth = instance?.parent?.vnode?.el?.offsetWidth || 0 // Need parent width
+  // Actually simpler:
+  // Active: translate(0) scale(1)
+  // Prev: translate(-50%) scale(0.83)
+  // Next: translate(50%) scale(0.83)
+  // Others: hidden or further
+
+  const active = activeIndex.value
+  const count = items.value.length
+  const idx = index.value
+
+  // Logic from Element Plus (simplified)
+  const processIndex = (index: number, activeIndex: number, length: number) => {
+    if (activeIndex === 0 && index === length - 1)
+      return -1
+    if (activeIndex === length - 1 && index === 0)
+      return length
+    if (index < activeIndex - 1 && activeIndex - index >= length / 2)
+      return length + 1
+    if (index > activeIndex + 1 && index - activeIndex >= length / 2)
+      return -2
+    return index
+  }
+
+  const calculatedIndex = processIndex(idx, active, count)
+
+  const inStage = Math.round(Math.abs(calculatedIndex - active)) <= 1
+
+  const translate = (() => {
+    if (calculatedIndex === active)
+      return 0
+    if (Math.abs(calculatedIndex - active) > 1)
+      return 0 // Should be hidden really
+    return calculatedIndex > active ? '50%' : '-50%'
+  })()
+
+  const scale = calculatedIndex === active ? 1 : CARD_SCALE
+  const zIndex = calculatedIndex === active ? 10 : 0 // Simplified
+
+  return {
+    transform: `translateX(${translate}) scale(${scale})`,
+    zIndex,
+    opacity: inStage ? 1 : 0, // Hide others
+    display: inStage ? 'block' : 'none', // optimize
+  }
+})
+
+onMounted(() => {
+  addItem({ uid })
+})
+onUnmounted(() => {
+  removeItem(uid)
+})
+</script>
+
+<template>
+  <div
+    v-if="type !== 'card' || cardStyle.display !== 'none'"
+    class="sugar-carousel__item"
+    :class="{
+      'is-active': isActive,
+      'is-in-stage': type === 'card' && cardStyle.opacity === 1,
+      'sugar-carousel__item--card': type === 'card',
+    }"
+    :style="cardStyle"
+  >
+    <div v-if="type === 'card'" v-show="!isActive" class="sugar-carousel__mask" />
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sugar-carousel__item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  overflow: hidden;
+  z-index: 0;
+  transition: transform 0.4s ease-in-out;
+  background-color: transparent; // Default
+}
+
+.sugar-carousel__item--card {
+  width: 50%;
+  left: 25%; // Center it initially?
+  // Actually if we use translateX 50% or -50%, it's relative to item width.
+  // Element Plus Card:
+  // Item width is 50%.
+  // Active item is at translateX(containerWidth/4).
+  // Prev item at translateX(0).
+  // Next item at translateX(containerWidth/2).
+
+  // My simplified CSS logic:
+  // left: 25% (centers the 50% width item in container)
+  // active: translate(0) -> centered
+  // prev: translate(-50% of item) -> -25% of container? No, -50% of 50% is -25% width.
+  // left 25% - 25% = 0% (Left aligned)
+  // next: translate(50% of item) -> +25% of container.
+  // left 25% + 25% = 50% (Right aligned)
+  // This works!
+}
+
+.sugar-carousel__mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: #fff;
+    opacity: 0.24;
+    transition: .2s;
+}
+</style>

package/src/components/Image.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+defineProps({
+  src: { type: String, default: '' },
+  alt: { type: String, default: '' },
+  loading: { type: String, default: 'eager' },
+})
+</script>
+
+<template>
+  <div class="sugar-image">
+    <img
+      :src="src"
+      :alt="alt"
+      :loading="loading as any"
+      class="sugar-image__inner"
+    >
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sugar-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  &__inner {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+    object-fit: inherit;
+    cursor: pointer;
+  }
+}
+</style>