dpzvc3-ui 3.1.4 → 3.1.6

package/src/components/slideBar/slideBar.tsx

@@ -1,288 +0,0 @@
-// src/components/slideBar/slideBar.tsx
-import {
-  defineComponent,
-  ref,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-  PropType
-} from 'vue'
-import type { SlideBarProps, SlideBarItem } from './types'
-
-export type { SlideBarProps }
-
-const prefixCls = 'dpzvc3-slideBar'
-
-export default defineComponent({
-  name: 'SlideBar',
-
-  props: {
-    scrollHeight: {
-      type: [String, Number] as PropType<string | number>,
-      default: '30px'
-    },
-    height: {
-      type: [String, Number] as PropType<string | number>,
-      default: '100%'
-    },
-    styles: {
-      type: Object as PropType<Record<string, any>>,
-      default: () => ({})
-    },
-    childWidth: {
-      type: Number,
-      default: 70
-    },
-    scrollColor: {
-      type: String,
-      default: '#036eb8'
-    },
-    textAlign: {
-      type: String,
-      default: 'center'
-    },
-    flex: {
-      type: Boolean,
-      default: true
-    },
-    type: {
-      type: String as PropType<SlideBarProps['type']>,
-      default: 'normal'
-    },
-    list: {
-      type: Array as PropType<SlideBarItem[]>,
-      default: () => [{ name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }]
-    },
-    index: {
-      type: Number,
-      default: 0
-    },
-    distanceIndex: {
-      type: Number,
-      default: 1.5
-    },
-    canDrag: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  emits: ['on-change'],
-
-  setup(props: SlideBarProps, { emit, slots }) {
-    const headerRef = ref<HTMLDivElement | null>(null)
-    const contentRef = ref<HTMLDivElement | null>(null)
-
-    const startIndex = ref(props.index ?? 0)
-    const clientWidth = ref(0)
-    const dragging = ref(false)
-    const distance = ref(0)
-    const startTranslateX = ref(0)
-    const startX = ref(0)
-
-    const items = ref(props.list ?? [])
-    const isFlex = ref(!!props.flex)
-    const fixed = ref(false)
-
-    const translateX = ref(0)
-
-    const getItemWidth = computed(() =>
-      isFlex.value
-        ? clientWidth.value / items.value.length
-        : props.childWidth!
-    )
-
-    const classes = computed(() => [prefixCls])
-
-    const headerClasses = computed(() => [
-      `${prefixCls}-header`,
-      { fixed: fixed.value }
-    ])
-
-    const wrapperClasses = computed(() => [
-      `${prefixCls}-wrapper`,
-      isFlex.value ? `${prefixCls}-flex` : `${prefixCls}-slide`,
-      {
-        normal: props.type === 'normal' && isFlex.value,
-        vertical: props.type === 'vertical' && isFlex.value
-      }
-    ])
-
-    const contentClasses = computed(() => [
-      `${prefixCls}-content`,
-      { [`${prefixCls}-dragging`]: dragging.value }
-    ])
-
-    const absoluteClass = computed(() => [`${prefixCls}-wrapper-absolute`])
-    const containerClass = computed(() => [`${prefixCls}-container`])
-
-    const getStyles = computed(() => ({ ...props.styles }))
-
-    const getContainerStyle = computed(() => ({
-      width: clientWidth.value * items.value.length + 'px',
-      transform: `translate3d(${translateX.value}px,0,0)`
-    }))
-
-    const getScrollStyle = computed(() => ({
-      width: getItemWidth.value + 'px',
-      transform: `translate3d(${startIndex.value * getItemWidth.value}px,0,0)`,
-      backgroundColor: props.scrollColor
-    }))
-
-    const maxIndex = computed(() => items.value.length - 1)
-
-    /* tab 切换 */
-    const changeBar = (index: number) => {
-      if (startIndex.value === index) return
-      startIndex.value = index
-      translateX.value = -index * clientWidth.value
-      emit('on-change', index)
-    }
-
-    /* 拖拽逻辑 */
-    const onTouchStart = (e: TouchEvent) => {
-      startTranslateX.value = translateX.value
-      distance.value = 0
-      startX.value = e.touches[0].clientX
-      dragging.value = true
-    }
-
-    const onTouchMove = (e: TouchEvent) => {
-      const currentX = e.touches[0].clientX
-      distance.value = props.distanceIndex
-        ? (currentX - startX.value) / props.distanceIndex
-        : currentX - startX.value
-      translateX.value = startTranslateX.value + distance.value
-    }
-
-    const onTouchEnd = () => {
-      if (distance.value < 0 && Math.abs(distance.value) > clientWidth.value / 2) {
-        slideLeft()
-      } else if (distance.value > 0 && Math.abs(distance.value) > clientWidth.value / 2) {
-        slideRight()
-      } else {
-        translateX.value = startTranslateX.value
-      }
-      dragging.value = false
-    }
-
-    const slideLeft = () => {
-      if (startIndex.value >= maxIndex.value) {
-        translateX.value = startTranslateX.value
-      } else {
-        startIndex.value++
-        translateX.value = startTranslateX.value - clientWidth.value
-      }
-      emit('on-change', startIndex.value)
-    }
-
-    const slideRight = () => {
-      if (startIndex.value <= 0) {
-        translateX.value = startTranslateX.value
-      } else {
-        startIndex.value--
-        translateX.value = startTranslateX.value + clientWidth.value
-      }
-      emit('on-change', startIndex.value)
-    }
-
-    /* 固定 header */
-    const onScroll = () => {
-      if (!headerRef.value) return
-      fixed.value = headerRef.value.getBoundingClientRect().top <= 0
-    }
-
-    const onResize = () => {
-      if (!headerRef.value) return
-      clientWidth.value = headerRef.value.clientWidth
-    }
-
-    onMounted(() => {
-      if (!headerRef.value) return
-      clientWidth.value = headerRef.value.clientWidth
-      translateX.value = -startIndex.value * clientWidth.value
-
-      window.addEventListener('resize', onResize)
-      window.addEventListener('scroll', onScroll)
-
-      if (props.canDrag && contentRef.value) {
-        contentRef.value.addEventListener('touchstart', onTouchStart)
-        contentRef.value.addEventListener('touchmove', onTouchMove)
-        contentRef.value.addEventListener('touchend', onTouchEnd)
-      }
-    })
-
-    onBeforeUnmount(() => {
-      window.removeEventListener('resize', onResize)
-      window.removeEventListener('scroll', onScroll)
-
-      if (props.canDrag && contentRef.value) {
-        contentRef.value.removeEventListener('touchstart', onTouchStart)
-        contentRef.value.removeEventListener('touchmove', onTouchMove)
-        contentRef.value.removeEventListener('touchend', onTouchEnd)
-      }
-    })
-
-    return () => (
-      <div class={classes.value} style={getStyles.value}>
-        {/* header */}
-        <div ref={headerRef} class={headerClasses.value}>
-          <div
-            class={wrapperClasses.value}
-            style={{
-              width: isFlex.value
-                ? 'auto'
-                : items.value.length * getItemWidth.value + 'px'
-            }}
-          >
-            {items.value.map((item, key) => (
-              <div
-                key={key}
-                class={[
-                  'dpzvc3-slideBar-child',
-                  startIndex.value === key && 'active',
-                  !isFlex.value && 'normalChild'
-                ]}
-                style={{
-                  textAlign: props.textAlign,
-                  width: getItemWidth.value + 'px',
-                  height: props.scrollHeight,
-                  lineHeight: String(props.scrollHeight)
-                }}
-                onClick={() => changeBar(key)}
-              >
-                {slots[`slide-bar-header-${key}`]
-                  ? slots[`slide-bar-header-${key}`]!()
-                  : <a class="content ellipse-fir">{item.name}</a>}
-              </div>
-            ))}
-          </div>
-
-          <div class={absoluteClass.value} style={getScrollStyle.value} />
-        </div>
-
-        {/* content */}
-        <div class={containerClass.value} style={{ height: props.height }}>
-          <div
-            ref={contentRef}
-            class={contentClasses.value}
-            style={getContainerStyle.value}
-          >
-            {items.value.map((_, index) => (
-              <div
-                key={index}
-                class={[
-                  'dpzvc3-slideBar-content-item',
-                  startIndex.value === index && 'active'
-                ]}
-                style={{ width: clientWidth.value + 'px' }}
-              >
-                {slots[`slot-item-${index}`]?.()}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    )
-  }
-})

package/src/components/slideBar/types.ts

@@ -1,20 +0,0 @@
-// src/components/slideBar/types.ts
-export interface SlideBarItem {
-  name: string
-  [key: string]: any
-}
-
-export interface SlideBarProps {
-  scrollHeight?: string | number
-  height?: string | number
-  styles?: Record<string, any>
-  childWidth?: number
-  scrollColor?: string
-  textAlign?: string
-  flex?: boolean
-  type?: 'normal' | 'vertical'
-  list?: SlideBarItem[]
-  index?: number
-  distanceIndex?: number
-  canDrag?: boolean
-}

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

@@ -1,42 +0,0 @@
-<template>
-  <div
-    class="dpzvc3-spinner-blade"
-    :style="spinnerStyle"
-  >
-    <div
-      v-for="i in 12"
-      :key="i"
-      class="blade"
-      :class="'blade-' + i"
-      :style="bladeStyle"
-    />
-  </div>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
-import spinnerProps from '../props' // 复用 spinnerProps
-// 如果原来 mixins props 是这样
-// {
-//   color: String,
-//   size: [Number, String]
-// }
-
-export default defineComponent({
-  name: 'Dpzvc3Blade',
-  props: spinnerProps.props,
-  setup (props) {
-    // 计算每个 blade 的样式
-    const bladeStyle = computed(() => {
-      return props.color ? { backgroundColor: props.color } : {}
-    })
-    const { spinnerStyle } = spinnerProps.setup(props)
-    // console.log(spinnerStyle, 'ddds')
-    // 如果需要设置整个 spinner 容器的大小
-    return {
-      bladeStyle,
-      spinnerStyle
-    }
-  }
-})
-</script>

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

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

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

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

@@ -1,52 +0,0 @@
-<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.ts

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

package/src/components/spinner/props.js

@@ -1,28 +0,0 @@
-// 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.tsx

@@ -1,85 +0,0 @@
-// src/components/spinner/spinner.tsx
-import { defineComponent, computed, PropType } from 'vue'
-// import type { DefineComponent } 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'
-
-import type { SpinnerProps, SpinnerType } from './types'
-export type { SpinnerProps }
-
-const SPINNERS = [
-  'blade',
-  'snake',
-  'double-bounce',
-  'triple-bounce',
-  'fading-circle'
-] as const
-
-const SPINNER_MAP = {
-  blade: SpinnerBlade,
-  snake: SpinnerSnake,
-  'double-bounce': SpinnerDoubleBounce,
-  'triple-bounce': SpinnerTripleBounce,
-  'fading-circle': SpinnerFadingCircle
-} as const
-
-function parseSpinner(type: SpinnerType | number): keyof typeof SPINNER_MAP {
-  let value: string | number = type ?? 0
-
-  // 数字类型（索引）
-  if (typeof value === 'number' || /^\d+$/.test(String(value))) {
-    const index = Number(value)
-    if (index >= SPINNERS.length) {
-      console.warn(`'${value}' spinner not found, use the default spinner.`)
-      return SPINNERS[0]
-    }
-    return SPINNERS[index]
-  }
-
-  // 字符串类型
-  if (!SPINNERS.includes(value as any)) {
-    console.warn(`'${value}' spinner not found, use the default spinner.`)
-    return SPINNERS[0]
-  }
-
-  return value as keyof typeof SPINNER_MAP
-}
-// type Compute<T> = { [K in keyof T]: Compute<T[K]> }; // 将类型展开方便提示
-export default defineComponent({
-  name: 'Dpzvc3Spinner',
-
-  props: {
-    size: {
-      type: [Number, String] as PropType<number | string>,
-      default: 30
-    },
-    type: {
-      type: [String, Number] as PropType<SpinnerType | number>,
-      default: 'snake'
-    },
-    color: {
-      type: String as PropType<string>,
-      default: '#39f'
-    }
-  },
-
-  setup(props) {
-    const SpinnerComponent = computed(() => {
-      const key = parseSpinner(props.type)
-      return SPINNER_MAP[key]
-    })
-    return () => {
-      const Comp = SpinnerComponent.value as any
-      return (
-        <Comp
-          size={props.size}
-          type={props.type}
-          color={props.color}
-        />
-      )
-    }
-  }
-})

package/src/components/spinner/types.ts

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

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