dpzvc3-ui 3.0.0

package/src/components/spinner/behavior/double-bounce.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    class="dpzvc3-spinner-double-bounce"
+    :style="spinnerStyle"
+  >
+    <div
+      v-for="i in 2"
+      :key="i"
+      class="bounce"
+      :class="'bounce-' + i"
+      :style="bounceStyle"
+    />
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent } from 'vue'
+import spinnerProps from '../props' // 复用 spinnerProps
+
+export default defineComponent({
+  name: 'Dpzvc3DoubleBounce',
+  props: spinnerProps.props,
+  setup (props) {
+    const { spinnerStyle } = spinnerProps.setup(props)
+
+    const bounceStyle = computed(() => {
+      return props.color
+        ? { backgroundColor: props.color }
+        : {}
+    })
+
+    return {
+      spinnerStyle,
+      bounceStyle
+    }
+  }
+})
+</script>

package/src/components/spinner/behavior/fading-circle.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="dpzvc3-spinner-fading-circle"
+    :style="spinnerStyle"
+  >
+    <div
+      v-for="i in 12"
+      :key="i"
+      class="block"
+      :class="'block-' + i"
+      :style="blockStyle(i - 1)"
+    >
+      <div
+        class="circle"
+        :class="'circle-' + i"
+        :style="circleStyle(i - 1)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent } from 'vue'
+import spinnerProps from '../props'
+
+export default defineComponent({
+  name: 'Dpzvc3FadingCircle',
+  props: spinnerProps.props,
+  setup (props) {
+    // 使用复用的 spinnerStyle
+    const { spinnerStyle } = spinnerProps.setup(props)
+
+    // block 旋转样式
+    const blockStyle = (index) => {
+      return {
+        transform: `rotate(${30 * index}deg)`
+      }
+    }
+
+    // circle 样式，包括颜色和动画延迟
+    const circleStyle = (index) => {
+      return {
+        backgroundColor: props.color || '#39f',
+        animationDelay: `${(1.2 / 12) * index - 1.2}s`
+      }
+    }
+
+    return {
+      spinnerStyle,
+      blockStyle,
+      circleStyle
+    }
+  }
+})
+</script>

package/src/components/spinner/behavior/snake.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="dpzvc3-spinner-snake"
+    :style="spinnerStyle"
+  />
+</template>
+
+<script>
+import { computed, defineComponent } from 'vue'
+import spinnerProps from '../props'
+
+export default defineComponent({
+  name: 'Dpzvc3Snake',
+  props: spinnerProps.props,
+  setup (props) {
+    // 计算 spinner 样式
+    const spinnerStyle = computed(() => {
+      const style = {}
+
+      if (props.size) {
+        const borderSize = Math.ceil(props.size / 8)
+        style.height = props.size + 'px'
+        style.width = props.size + 'px'
+        style.borderWidth = borderSize + 'px'
+      }
+
+      if (props.color) {
+        style.borderTopColor = props.color
+        style.borderLeftColor = props.color
+        style.borderBottomColor = props.color
+      }
+
+      return style
+    })
+
+    return {
+      spinnerStyle
+    }
+  }
+})
+</script>

package/src/components/spinner/behavior/triple-bounce.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="dpzvc3-spinner-triple-bounce"
+    :style="spinnerStyle"
+  >
+    <div
+      v-for="(i,key) in 3"
+      :key="key"
+      class="bounce"
+      :class="'bounce-' + i"
+      :style="bounceStyle"
+    />
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import props from '../props'
+
+export default {
+  mixins: [props],
+  computed: {
+    // eslint-disable-next-line vue/return-in-computed-property
+    unitSize () {
+      if (this.size) {
+        return Math.round(this.size / 6) * 2
+      }
+    },
+    // eslint-disable-next-line vue/return-in-computed-property
+    spinnerStyle () {
+      if (this.size) {
+        return {
+          padding: (this.size - this.unitSize) / 2 + 'px 0'
+        }
+      }
+    },
+    bounceStyle () {
+      const style = {}
+
+      if (this.size) {
+        style.width = this.unitSize + 'px'
+        style.height = this.unitSize + 'px'
+      }
+
+      if (this.color) {
+        style.backgroundColor = this.color
+      }
+
+      return style
+    }
+  }
+}
+</script>

package/src/components/spinner/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2025/10/16.
+ */
+import Spinner from './spinner'
+export default Spinner

package/src/components/spinner/props.js

@@ -0,0 +1,28 @@
+// spinnerProps.js
+import { computed } from 'vue'
+
+export default {
+  props: {
+    size: {
+      type: [Number, String]
+    },
+    color: {
+      type: String
+    }
+  },
+  setup (props) {
+    const spinnerStyle = computed(() => {
+      if (props.size) {
+        return {
+          height: typeof Number(props.size) === 'number' ? `${props.size}px` : props.size,
+          width: typeof Number(props.size) === 'number' ? `${props.size}px` : props.size
+        }
+      }
+      return {}
+    })
+
+    return {
+      spinnerStyle
+    }
+  }
+}

package/src/components/spinner/spinner.vue

@@ -0,0 +1,78 @@
+<template>
+  <component
+    :is="spinnerComponent"
+    :type="type"
+    :size="size"
+    :color="color"
+  />
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+import SpinnerBlade from './behavior/blade.vue'
+import SpinnerSnake from './behavior/snake.vue'
+import SpinnerDoubleBounce from './behavior/double-bounce.vue'
+import SpinnerTripleBounce from './behavior/triple-bounce.vue'
+import SpinnerFadingCircle from './behavior/fading-circle.vue'
+
+const SPINNERS = [
+  'blade',
+  'snake',
+  'double-bounce',
+  'triple-bounce',
+  'fading-circle'
+]
+
+function parseSpinner (index) {
+  index = index || 0
+
+  if (/^\d+$/.test(index)) {
+    if (SPINNERS.length <= index) {
+      console.warn(`'${index}' spinner not found, use the default spinner.`)
+      index = 0
+    }
+    return SPINNERS[index]
+  }
+
+  if (!SPINNERS.includes(index)) {
+    console.warn(`'${index}' spinner not found, use the default spinner.`)
+    index = SPINNERS[0]
+  }
+
+  return index
+}
+
+export default defineComponent({
+  name: 'Dpzvc3Spinner',
+  components: {
+    'spinner-blade': SpinnerBlade,
+    'spinner-snake': SpinnerSnake,
+    'spinner-double-bounce': SpinnerDoubleBounce,
+    'spinner-triple-bounce': SpinnerTripleBounce,
+    'spinner-fading-circle': SpinnerFadingCircle
+  },
+  props: {
+    size: {
+      type: [Number, String],
+      default: 30
+    },
+    type: {
+      type: [String, Number],
+      default: 'snake'
+    },
+    color: {
+      type: String,
+      default: '#39f'
+    }
+  },
+  setup (props) {
+    const spinnerComponent = computed(() => {
+      return `spinner-${parseSpinner(props.type)}`
+    })
+
+    return {
+      spinnerComponent
+    }
+  }
+})
+</script>

package/src/components/swipe/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/11.
+ */
+import Swipe from './swipe'
+export default Swipe

package/src/components/swipe/swipe.vue

@@ -0,0 +1,281 @@
+<template>
+  <div
+    ref="swipeRef"
+    :class="classes"
+    :style="{ height }"
+  >
+    <div
+      ref="wrapper"
+      :class="wrapperClasses"
+      :style="wrapperStyle"
+    >
+      <template v-if="arrayList.length">
+        <div
+          v-for="(item, index) in arrayList"
+          :key="index"
+          :class="itemClasses"
+        >
+          <template v-if="isMultiple">
+            <a
+              v-for="(_item, $index) in item"
+              :key="$index"
+              :class="multipleClass"
+              @click="choose(_item, $index, $event)"
+            >
+              <slot
+                :item="_item"
+                :index="$index"
+              >
+                <img :src="_item.image">
+                <span>{{ _item.spec }}</span>
+              </slot>
+            </a>
+          </template>
+          <template v-else>
+            <a
+              :class="singleClass"
+              @click="choose(item, index, $event)"
+            >
+              <slot
+                :item="item"
+                :index="index"
+              >
+                <img :src="item.image">
+                <span>{{ item.spec }}</span>
+              </slot>
+            </a>
+          </template>
+        </div>
+      </template>
+    </div>
+
+    <div :class="dotsClasses">
+      <span
+        v-for="(item, index) in dotLength"
+        :key="index"
+        :class="['dpzvc3-swipe-dots-item', (loop ? index + 1 : index) === slideIndex ? 'active' : '']"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+
+const prefixCls = 'dpzvc3-swipe'
+
+export default defineComponent({
+  name: 'Dpzvc3Swipe',
+  props: {
+    auto: { type: Boolean, default: true },
+    list: { type: Array, default: () => [] },
+    startIndex: { type: Number, default: 0 },
+    height: { type: [Number, String], default: 'auto' },
+    dots: { type: String, default: 'bottom' },
+    multiple: { type: Boolean, default: false },
+    distanceIndex: { type: Number, default: 1.5 },
+    loop: { type: Boolean, default: true },
+    speed: { type: Number, default: 2 },
+    perpage: { type: Number, default: 1 }
+  },
+  setup (props) {
+    const wrapper = ref(null)
+    const swipeRef = ref(null)
+    const clientWidth = ref(0)
+    const translateX = ref(0)
+    const currentTranslateX = ref(0)
+    const dragging = ref(false)
+    const autoSwipe = ref(true)
+    const startX = ref(0)
+    const distance = ref(0)
+    const slideIndex = ref(props.loop ? props.startIndex + 1 : props.startIndex)
+    const timer = ref(null)
+    const localList = ref([...props.list])
+
+    const isMultiple = computed(() => {
+      if (props.perpage <= 1) return false
+      const page = props.perpage
+      const multipleArr = []
+      let arr = []
+      localList.value.forEach((item, idx) => {
+        arr.push(item)
+        if (arr.length === page || idx === localList.value.length - 1) {
+          multipleArr.push(arr)
+          arr = []
+        }
+      })
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      localList.value = multipleArr
+      return true
+    })
+
+    const arrayList = computed(() => {
+      if (!localList.value.length) return []
+      if (props.loop) {
+        return [localList.value[localList.value.length - 1], ...localList.value, localList.value[0]]
+      }
+      return localList.value
+    })
+
+    const dotLength = computed(() => localList.value.length)
+
+    const minIndex = computed(() => (props.loop ? 1 : 0))
+    const maxIndex = computed(() => (props.loop ? arrayList.value.length - 2 : arrayList.value.length - 1))
+
+    const classes = computed(() => [prefixCls])
+    const wrapperClasses = computed(() => [prefixCls + '-wrapper', { [`${prefixCls}-dragging`]: dragging.value }])
+    const multipleClass = computed(() => prefixCls + '-multiple')
+    const singleClass = computed(() => prefixCls + '-single')
+    const itemClasses = computed(() => [prefixCls + '-item', { multiple: isMultiple.value }])
+    const dotsClasses = computed(() => [
+      prefixCls + '-dots',
+      { [`${prefixCls}-dots-bottom`]: props.dots === 'bottom', [`${prefixCls}-dots-top`]: props.dots === 'top' }
+    ])
+    const wrapperStyle = computed(() => ({
+      width: arrayList.value.length * clientWidth.value + 'px',
+      transform: `translate3d(${translateX.value}px,0,0)`,
+      height: 'auto'
+    }))
+
+    function choose (item, index, e) {
+      if (item.onClick && typeof item.onClick === 'function') {
+        item.onClick(item, index)
+      } else if (item.link) {
+        if (/https?:\/\//i.test(item.link)) {
+          window.location.href = item.link
+        } else if (e?.router) {
+          e.preventDefault()
+          e.router.push(item.link)
+        }
+      }
+    }
+
+    function onTouchStart (e) {
+      dragging.value = true
+      autoSwipe.value = false
+      startX.value = e.touches[0].clientX
+      currentTranslateX.value = translateX.value
+      distance.value = 0
+      clearTimer()
+    }
+
+    function onTouchMove (e) {
+      const currentX = e.touches[0].clientX
+      distance.value = props.distanceIndex ? (currentX - startX.value) / props.distanceIndex : currentX - startX.value
+      translateX.value = currentTranslateX.value + distance.value
+    }
+
+    function onTouchEnd () {
+      if (distance.value < 0 && Math.abs(distance.value) > clientWidth.value / 5) {
+        props.loop && props.auto ? onLoopSlideLeft() : onSlideLeft()
+      } else if (distance.value > 0 && Math.abs(distance.value) > clientWidth.value / 5) {
+        props.loop && props.auto ? onLoopSlideRight() : onSlideRight()
+      } else {
+        translateX.value = currentTranslateX.value
+      }
+      dragging.value = false
+      autoSwipe.value = true
+      if (props.auto) autoSlide()
+    }
+
+    function onSlideLeft () {
+      if (slideIndex.value < maxIndex.value) slideIndex.value++
+      translateX.value = -slideIndex.value * clientWidth.value
+    }
+    function onSlideRight () {
+      if (slideIndex.value > minIndex.value) slideIndex.value--
+      translateX.value = -slideIndex.value * clientWidth.value
+    }
+    function onLoopSlideLeft () {
+      onSlideLeft()
+      if (slideIndex.value > maxIndex.value) {
+        slideIndex.value = maxIndex.value
+      }
+    }
+    function onLoopSlideRight () {
+      onSlideRight()
+      if (slideIndex.value < minIndex.value) {
+        slideIndex.value = minIndex.value
+      }
+    }
+
+    function autoSlide () {
+      timer.value = setTimeout(() => {
+        if (!dragging.value && autoSwipe.value) {
+          translateX.value -= clientWidth.value
+          slideIndex.value++
+          // console.log(slideIndex.value, maxIndex.value, 'dsdadddasdss')
+          if (slideIndex.value > maxIndex.value && props.loop) {
+            slideIndex.value = minIndex.value
+            wrapper.value.addEventListener('transitionend', resetSlide, false)
+          }
+          autoSlide()
+        }
+      }, props.speed < 1 ? 1000 : props.speed * 1000)
+    }
+
+    function resetSlide () {
+      wrapper.value.removeEventListener('transitionend', resetSlide, false)
+
+      slideIndex.value = minIndex.value
+      autoSwipe.value = false
+      // this.translateX = -this.slideIndex * this.clientWidth
+      translateX.value = -slideIndex.value * clientWidth.value
+      setTimeout(() => {
+        autoSwipe.value = true
+      }, 0)
+    }
+
+    function clearTimer () {
+      if (timer.value) clearTimeout(timer.value)
+      timer.value = null
+    }
+
+    function onResize () {
+      if (wrapper.value) clientWidth.value = wrapper.value.clientWidth
+    }
+
+    onMounted(() => {
+      // nextTick(() => {
+      clientWidth.value = swipeRef.value ? swipeRef.value.clientWidth : 0
+      if (props.auto) autoSlide()
+
+      if (wrapper.value) {
+        wrapper.value.addEventListener('touchstart', onTouchStart)
+        wrapper.value.addEventListener('touchmove', onTouchMove)
+        wrapper.value.addEventListener('touchend', onTouchEnd)
+      }
+      window.addEventListener('resize', onResize)
+      // })
+    })
+
+    onBeforeUnmount(() => {
+      if (wrapper.value) {
+        wrapper.value.removeEventListener('touchstart', onTouchStart)
+        wrapper.value.removeEventListener('touchmove', onTouchMove)
+        wrapper.value.removeEventListener('touchend', onTouchEnd)
+      }
+      window.removeEventListener('resize', onResize)
+      clearTimer()
+    })
+
+    return {
+      wrapper,
+      translateX,
+      slideIndex,
+      classes,
+      wrapperClasses,
+      multipleClass,
+      singleClass,
+      itemClasses,
+      dotsClasses,
+      arrayList,
+      isMultiple,
+      dotLength,
+      wrapperStyle,
+      choose,
+      swipeRef
+    }
+  }
+})
+</script>

package/src/components/switchbar/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2025/09/26.
+ */
+import SwitchBar from './switchbar'
+export default SwitchBar

package/src/components/switchbar/switchbar.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :class="classes">
+    <input
+      :id="name"
+      v-model="currentValue"
+      type="checkbox"
+      :class="inputCheckClasses"
+    >
+    <label
+      :for="name"
+      :class="sizeClasses"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch, onMounted } from 'vue'
+import { randomStr } from '../../utils/util'
+
+const prefixCls = 'dpzvc3-switch'
+
+export default defineComponent({
+  name: 'SwitchBar',
+  props: {
+    id: {
+      type: String,
+      default: null
+    },
+    modelValue: { // Vue 3 使用 v-model 绑定 modelValue
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'small',
+      validator (val) {
+        return ['small', 'large'].includes(val)
+      }
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit }) {
+    const name = ref(props.id || '')
+    const currentValue = ref(props.modelValue)
+
+    // 监听外部 v-model 变化
+    watch(() => props.modelValue, val => {
+      currentValue.value = val
+    })
+
+    // 监听内部 value 变化，通知父组件
+    watch(currentValue, val => {
+      emit('update:modelValue', val)
+    })
+
+    // 组件挂载时，如果没有传 id，自动生成
+    onMounted(() => {
+      if (!props.id) {
+        name.value = Date.now() + '_' + randomStr()
+      }
+    })
+
+    const classes = computed(() => [prefixCls])
+    const inputCheckClasses = computed(() => [`${prefixCls}-checkbox`, 'hidden'])
+    const sizeClasses = computed(() => [
+      `${prefixCls}-ui`,
+      { small: props.size === 'small' }
+    ])
+
+    return {
+      name,
+      currentValue,
+      classes,
+      inputCheckClasses,
+      sizeClasses
+    }
+  }
+})
+</script>

package/src/components/tab/index.js

@@ -0,0 +1,6 @@
+/**
+ * Created by admin on 2025/10/15.
+ */
+import Tab from './tab.vue'
+
+export default Tab