dpzvc3-ui 3.0.6 → 3.1.0

package/src/components/spinner/types.ts

@@ -0,0 +1,20 @@
+// src/components/spinner/types.ts
+export type SpinnerType =
+  | 'blade'
+  | 'snake'
+  | 'double-bounce'
+  | 'triple-bounce'
+  | 'fading-circle'
+
+// type Compute<T> = { [K in keyof T]: T[K] extends Object ? Compute<T[K]> : T[K] }; // 将类型展开方便提示
+// interface Spinner {
+//   size?: number | string
+//   type?: SpinnerType | number
+//   color?: string
+// }
+// export type SpinnerProps = Compute<Spinner>
+export interface SpinnerProps {
+  size?: number | string
+  type?: SpinnerType | number
+  color?: string
+}

package/src/components/swipe/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Created by admin on 2017/5/11.
+ */
+import type { App } from 'vue'
+import Swipe from './swipe'
+// export default Swipe
+Swipe.install = (app: App): void => {
+    app.component('Swipe', Swipe); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _Swipe=Swipe as IWithInstall<typeof Swipe>;
+export default _Swipe
+export type { SwipeProps } from './types'

package/src/components/swipe/swipe.tsx

@@ -0,0 +1,292 @@
+// src/components/swipe/swipe.tsx
+import {
+  defineComponent,
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  PropType
+} from 'vue'
+import rafTimeout from '../../lib/lib'
+import type { SwipeItem, SwipeProps } from './types'
+
+export type { SwipeProps }
+
+const prefixCls = 'dpzvc3-swipe'
+
+export default defineComponent({
+  name: 'Dpzvc3Swipe',
+
+  props: {
+    auto: { type: Boolean, default: true },
+    list: { type: Array as PropType<SwipeItem[]>, default: () => [] },
+    startIndex: { type: Number, default: 0 },
+    height: { type: [Number, String] as PropType<number | string>, default: 'auto' },
+    dots: { type: String as PropType<'top' | 'bottom'>, 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, { slots }) {
+    const swipeRef = ref<HTMLDivElement | null>(null)
+    const wrapper = ref<HTMLDivElement | null>(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.startIndex)
+    const timer = ref<null | (() => void)>(null)
+
+    const localList = ref<SwipeItem[]>([...props.list])
+    const transitionRef = ref('transform .2s ease-out')
+
+    /** 是否多列 */
+    const isMultiple = computed(() => {
+      if (props.perpage <= 1) return false
+
+      const page = props.perpage
+      const result: SwipeItem[][] = []
+      let temp: SwipeItem[] = []
+
+      localList.value.forEach((item, idx) => {
+        temp.push(item)
+        if (temp.length === page || idx === localList.value.length - 1) {
+          result.push(temp)
+          temp = []
+        }
+      })
+
+      // ⚠️ 保持与你原逻辑一致（computed 内有副作用）
+      localList.value = result as any
+      return true
+    })
+
+    /** 实际渲染数组 */
+    const arrayList = computed<any[]>(() => {
+      if (!localList.value.length) return []
+      return props.loop
+        ? [...localList.value, localList.value[0]]
+        : localList.value
+    })
+
+    const dotLength = computed(() => localList.value.length)
+    const minIndex = computed(() => 0)
+    const maxIndex = computed(() =>
+      props.loop ? arrayList.value.length - 2 : arrayList.value.length - 1
+    )
+
+    /** class / style */
+    const classes = computed(() => [prefixCls])
+    const wrapperClasses = computed(() => [
+      `${prefixCls}-wrapper`,
+      { [`${prefixCls}-dragging`]: dragging.value }
+    ])
+    const multipleClass = `${prefixCls}-multiple`
+    const singleClass = `${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)`,
+      transition: transitionRef.value
+    }))
+
+    /** 点击 */
+    function choose(item: SwipeItem, index: number, e?: Event) {
+      if (item.onClick) {
+        item.onClick(item, index)
+      } else if (item.link) {
+        if (/https?:\/\//i.test(item.link)) {
+          window.location.href = item.link
+        }
+      }
+    }
+
+    /** touch */
+    function onTouchStart(e: TouchEvent) {
+      dragging.value = true
+      autoSwipe.value = false
+      startX.value = e.touches[0].clientX
+      currentTranslateX.value = translateX.value
+      distance.value = 0
+      clearTimer()
+    }
+
+    function onTouchMove(e: TouchEvent) {
+      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 ? onLoopSlideLeft() : onSlideLeft()
+      } else if (distance.value > 0 && Math.abs(distance.value) > clientWidth.value / 5) {
+        props.loop ? onLoopSlideRight() : onSlideRight()
+      } else {
+        translateX.value = currentTranslateX.value
+      }
+
+      dragging.value = false
+      autoSwipe.value = true
+      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 = rafTimeout(() => {
+        if (!dragging.value && autoSwipe.value) {
+          translateX.value -= clientWidth.value
+          slideIndex.value++
+          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)
+      slideIndex.value = minIndex.value
+      autoSwipe.value = false
+      transitionRef.value = 'none'
+      translateX.value = -slideIndex.value * clientWidth.value
+      setTimeout(() => {
+        autoSwipe.value = true
+        transitionRef.value = 'transform .2s ease-out'
+      })
+    }
+
+    function clearTimer() {
+      timer.value?.()
+      timer.value = null
+    }
+
+    function onResize() {
+      clientWidth.value = swipeRef.value?.clientWidth || 0
+    }
+
+    onMounted(() => {
+      clientWidth.value = swipeRef.value?.clientWidth || 0
+      props.auto && autoSlide()
+
+      wrapper.value?.addEventListener('touchstart', onTouchStart)
+      wrapper.value?.addEventListener('touchmove', onTouchMove)
+      wrapper.value?.addEventListener('touchend', onTouchEnd)
+
+      window.addEventListener('resize', onResize)
+    })
+
+    onBeforeUnmount(() => {
+      wrapper.value?.removeEventListener('touchstart', onTouchStart)
+      wrapper.value?.removeEventListener('touchmove', onTouchMove)
+      wrapper.value?.removeEventListener('touchend', onTouchEnd)
+      window.removeEventListener('resize', onResize)
+      clearTimer()
+    })
+
+    /** render */
+    return () => (
+      <div
+        ref={swipeRef}
+        class={classes.value}
+        style={{ height: props.height }}
+      >
+        <div
+          ref={wrapper}
+          class={wrapperClasses.value}
+          style={wrapperStyle.value}
+        >
+          {arrayList.value.map((item: any, index: number) => (
+            <div key={index} class={itemClasses.value}>
+              {isMultiple.value ? (
+                item.map((sub: SwipeItem, i: number) => (
+                  <a
+                    key={i}
+                    class={multipleClass}
+                    onClick={(e: any) => choose(sub, i, e)}
+                  >
+                    {slots.default?.({ item: sub, index: i }) ?? (
+                      <>
+                        <img src={sub.image} />
+                        <span>{sub.spec}</span>
+                      </>
+                    )}
+                  </a>
+                ))
+              ) : (
+                <a
+                  class={singleClass}
+                  onClick={(e: any) => choose(item, index, e)}
+                >
+                  {slots.default?.({ item, index }) ?? (
+                    <>
+                      <img src={item.image} />
+                      <span>{item.spec}</span>
+                    </>
+                  )}
+                </a>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div class={dotsClasses.value}>
+          {Array.from({ length: dotLength.value }).map((_, i) => (
+            <span
+              key={i}
+              class={[
+                'dpzvc3-swipe-dots-item',
+                i === slideIndex.value ? 'active' : ''
+              ]}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+})

package/src/components/swipe/types.ts

@@ -0,0 +1,21 @@
+// src/components/swipe/types.ts
+export interface SwipeItem {
+  image?: string
+  spec?: string
+  link?: string
+  onClick?: (item: SwipeItem, index: number) => void
+  [key: string]: any
+}
+
+export interface SwipeProps {
+  auto?: boolean
+  list?: SwipeItem[]
+  startIndex?: number
+  height?: number | string
+  dots?: 'top' | 'bottom'
+  multiple?: boolean
+  distanceIndex?: number
+  loop?: boolean
+  speed?: number
+  perpage?: number
+}

package/src/components/switchbar/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Created by admin on 2025/09/26.
+ */
+import type { App } from 'vue'
+import SwitchBar from './switchbar'
+SwitchBar.install = (app: App): void => {
+    app.component('SwitchBar', SwitchBar); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _SwitchBar=SwitchBar as IWithInstall<typeof SwitchBar>;
+export default _SwitchBar
+// export default SwitchBar
+export type { SwitchBarProps } from './types'

package/src/components/switchbar/switchbar.tsx

@@ -0,0 +1,58 @@
+// src/components/switchbar/switchbar.tsx
+import { defineComponent, ref, computed, watch, onMounted, PropType } from 'vue'
+import { randomStr } from '../../utils/util'
+import type { SwitchBarProps } from './types'
+
+export type { SwitchBarProps }
+
+const prefixCls = 'dpzvc3-switch'
+
+export default defineComponent({
+  name: 'SwitchBar',
+  props: {
+    id: { type: String, default: null },
+    modelValue: { type: Boolean, default: false },
+    size: { type: String as PropType<'small' | 'large'>, default: 'small' }
+  },
+  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
+    })
+
+    // 内部变化通知父组件
+    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 () => (
+      <div class={classes.value}>
+        <input
+          id={name.value}
+          type="checkbox"
+          class={inputCheckClasses.value}
+          v-model={currentValue.value}
+        />
+        <label for={name.value} class={sizeClasses.value} />
+      </div>
+    )
+  }
+})

package/src/components/switchbar/types.ts

@@ -0,0 +1,6 @@
+// src/components/switchbar/types.ts
+export interface SwitchBarProps {
+  id?: string
+  modelValue?: boolean
+  size?: 'small' | 'large'
+}

package/src/components/tab/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Created by admin on 2025/10/15.
+ */
+import type { App } from 'vue'
+import Tab from './tab'
+Tab.install = (app: App): void => {
+    app.component('Tab', Tab); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _Tab=Tab as IWithInstall<typeof Tab>;
+export default _Tab
+export type { TabProps } from './types'

package/src/components/tab/tab.tsx

@@ -0,0 +1,71 @@
+// src/components/tab/tab.tsx
+import { defineComponent, ref, computed, watch, PropType } from 'vue'
+import type { TabProps, TabItem } from './types'
+import { RouterLink } from 'vue-router'
+
+export type { TabProps }
+
+const prefixCls = 'dpzvc3-tab'
+
+export default defineComponent({
+  name: 'Dpzvc3Tab',
+  props: {
+    items: { type: Array as PropType<TabItem[]>, default: () => [] },
+    modelValue: { type: Boolean, default: true },
+    index: { type: [Number, String], default: 0 },
+    border: { type: Boolean, default: true },
+    styles: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+  },
+  setup(props) {
+    const show = ref(props.modelValue)
+
+    watch(() => props.modelValue, val => {
+      show.value = val
+    })
+
+    const classes = computed(() => [prefixCls])
+    const getStyles = computed(() => ({ ...props.styles }))
+
+    const itemClass = (index: number) => {
+      const _class = [`tab-item-${index}`]
+      if (Number(props.index) === Number(index)) _class.push('cur')
+      return _class
+    }
+
+    const getIconHtml = (index: number) => {
+      const item = props.items[index]
+      if (!item) return ''
+      return Number(props.index) === Number(index) ? (item.iconCur || item.icon) : item.icon
+    }
+
+    return () => (
+      show.value && (
+        <div class={classes.value} style={getStyles.value}>
+          <ul>
+            {props.items?.map((item, idx) => {
+              const isExternal = /^(http|https):\/\//i.test(item.path)
+              const iconHtml = getIconHtml(idx)
+              const cls = itemClass(idx)
+
+              return (
+                <li key={idx}>
+                  {isExternal ? (
+                    <a href={item.path} class={cls}>
+                      <span innerHTML={iconHtml} />
+                      <p>{item.name}</p>
+                    </a>
+                  ) : (
+                    <RouterLink to={item.path} class={cls}>
+                      <span innerHTML={iconHtml} />
+                      <p>{item.name}</p>
+                    </RouterLink>
+                  )}
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      )
+    )
+  }
+})

package/src/components/tab/types.ts

@@ -0,0 +1,15 @@
+// src/components/tab/types.ts
+export interface TabItem {
+  name: string
+  path: string
+  icon?: string
+  iconCur?: string
+}
+
+export interface TabProps {
+  items?: TabItem[]
+  modelValue?: boolean
+  index?: number | string
+  border?: boolean
+  styles?: Record<string, any>
+}

package/src/components/toTop/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Created by admin on 2025/11/29.
+ */
+import type { App } from 'vue'
+import ToTop from './toTop'
+ToTop.install = (app: App): void => {
+    app.component('ToTop', ToTop); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _ToTop=ToTop as IWithInstall<typeof ToTop>;
+export default _ToTop
+// export default ToTop
+export type { ToTopProps } from './types'

package/src/components/toTop/toTop.tsx

@@ -0,0 +1,54 @@
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { scrollTop } from '../../utils/util'
+import { ToTopProps } from './types'
+
+const prefixCls = 'dpzvc3-toTop'
+
+export default defineComponent({
+  name: 'ToTop',
+  props: {
+    distance: { type: Number, default: 200 },
+    bottom: { type: [Number, String], default: 30 },
+    right: { type: [Number, String], default: 30 },
+    duration: { type: Number, default: 1000 }
+  }, //as unknown as Record<keyof ToTopProps, any>
+  setup(props: ToTopProps) {
+    const back = ref(false)
+
+    const classes = computed(() => [prefixCls])
+    const wrapperClasses = computed(() => [`${prefixCls}-wrapper`])
+    const positionStyles = computed(() => ({
+      bottom: typeof props.bottom === 'number' ? props.bottom + 'px' : props.bottom,
+      right: typeof props.right === 'number' ? props.right + 'px' : props.right
+    }))
+
+    const scroll = () => {
+      back.value = window.pageYOffset > (props.distance || 0)
+    }
+
+    const toTopHandler = () => {
+      scrollTop(window, window.pageYOffset, 0, props.duration || 1000)
+    }
+
+    onMounted(() => {
+      window.addEventListener('scroll', scroll, false)
+      window.addEventListener('resize', scroll, false)
+      scroll() // 初始化判断
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('scroll', scroll, false)
+      window.removeEventListener('resize', scroll, false)
+    })
+
+    return () => {
+      return back.value ? (
+        <div class={classes.value} style={positionStyles.value} onClick={toTopHandler}>
+          <slot>
+            <div class={wrapperClasses.value}></div>
+          </slot>
+        </div>
+      ) : null
+    }
+  }
+})

package/src/components/toTop/types.ts

@@ -0,0 +1,7 @@
+// ToTop/types.ts
+export interface ToTopProps {
+  distance?: number
+  bottom?: number | string
+  right?: number | string
+  duration?: number
+}

package/src/components/upload/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Created by admin on 2025/10/26.
+ */
+import type { App } from 'vue'
+import Upload from './upload'
+Upload.install = (app: App): void => {
+    app.component('Upload', Upload); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _Upload=Upload as IWithInstall<typeof Upload>;
+export default _Upload
+// export default Upload
+export type { UploadProps } from './types'

package/src/components/upload/types.ts

@@ -0,0 +1,9 @@
+// src/components/upload/types.ts
+export interface UploadProps {
+  /** 是否支持多选 */
+  multiple?: boolean
+  /** input accept */
+  accept?: string
+  /** 外层样式 */
+  styles?: Record<string, any>
+}