dpzvc3-ui 3.1.5 → 3.1.6

package/src/components/swipe/swipe.tsx

@@ -1,292 +0,0 @@
-// 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

@@ -1,21 +0,0 @@
-// 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

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1,58 +0,0 @@
-// 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

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

package/src/components/tab/index.ts

@@ -1,12 +0,0 @@
-/**
- * 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

@@ -1,71 +0,0 @@
-// 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

@@ -1,15 +0,0 @@
-// 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

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1,54 +0,0 @@
-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

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

package/src/components/upload/index.ts

@@ -1,13 +0,0 @@
-/**
- * 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

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