dpzvc3-ui 3.0.7 → 3.1.0

package/src/components/radioBox/radiobox.tsx

@@ -0,0 +1,115 @@
+// src/components/RadioBox/RadioBox.tsx
+import {
+  defineComponent,
+  inject,
+  computed,
+  ref,
+  onMounted
+} from 'vue'
+import type { PropType } from 'vue'
+import type {
+  RadioBoxProps,
+  RadioGroupProvide,
+} from './types'
+export type { RadioBoxProps }
+const prefixCls = 'dpzvc3-radiobox'
+const radioGroupKey = 'radioBoxGroup'
+
+export default defineComponent({
+  name: 'RadioBox',
+
+  props: {
+    label: {
+      type: [String, Number] as PropType<RadioBoxProps['label']>,
+      required: true
+    },
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  emits: ['update:modelValue', 'on-change'],
+
+  setup (props, { emit, slots }) {
+    const slotEl = ref<HTMLElement | null>(null)
+    const show = ref(true)
+
+    /** 注入 RadioGroup（可选） */
+    const group = inject<RadioGroupProvide | null>(
+      radioGroupKey,
+      null
+    )
+
+    /** 是否选中 */
+    const isChecked = computed<boolean>(() => {
+      if (group) {
+        return group.currentValue.value === props.label
+      }
+      return !!props.modelValue
+    })
+
+    /** classes */
+    const classes = computed(() => [prefixCls])
+
+    const wrapperClasses = computed(() => [
+      `${prefixCls}-wrapper`,
+      {
+        [`${prefixCls}-checked`]: isChecked.value,
+        [`${prefixCls}-disable`]: props.disable
+      }
+    ])
+
+    const innerClasses = computed(() => [`${prefixCls}-inner`])
+    const inputClass = computed(() => [`${prefixCls}-input`])
+
+    /** change */
+    const handleChange = (e: Event) => {
+      if (props.disable) return
+
+      const checked = (e.target as HTMLInputElement).checked
+
+      if (group) {
+        group.change(props.label)
+      } else {
+        emit('update:modelValue', checked)
+        emit('on-change', checked)
+      }
+    }
+
+    /** 判断 slot 是否为空 */
+    onMounted(() => {
+      if (!group) {
+        if (slotEl.value && !slotEl.value.innerHTML) {
+          show.value = false
+        }
+      }
+    })
+
+    return () => (
+      <label class={classes.value}>
+        <span class={wrapperClasses.value}>
+          <span class={innerClasses.value}>
+            <input
+              type="radio"
+              disabled={props.disable}
+              checked={isChecked.value}
+              class={inputClass.value}
+              onChange={handleChange}
+            />
+          </span>
+        </span>
+
+        {show.value && (
+          slots.default
+            ? slots.default()
+            : <span ref={slotEl}>{props.label}</span>
+        )}
+      </label>
+    )
+  }
+})

package/src/components/radioBox/types.ts

@@ -0,0 +1,24 @@
+// src/components/radio-group/types.ts
+import type { Ref } from 'vue'
+
+type RadioValue = string | number | boolean
+
+export interface RadioGroupProps {
+  modelValue?: RadioValue
+  vertical?: boolean
+}
+
+export interface RadioGroupProvide {
+  currentValue: Ref<RadioValue>
+  change: (val: RadioValue) => void
+}
+
+
+type RadioBoxValue = string | number
+
+
+export interface RadioBoxProps {
+    label: RadioBoxValue
+    modelValue?: boolean
+    disable?: boolean
+}

package/src/components/rater/index.ts

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

package/src/components/rater/rater.d.ts

@@ -0,0 +1,16 @@
+// src/components/badge/badge.d.ts
+
+import type { App } from 'vue'
+import type { RaterProps } from './types'  // 引入同级 types.ts 中的 BadgeProps
+
+/** Badge 组件实例类型，带 install 方法 */
+declare const Rater: {
+  /** Vue 组件本身 */
+  new (): any
+  /** props 类型引用 */
+  __props?: RaterProps
+  /** install 方法，用于全量注册 */
+  install(app: App): void
+}
+
+export default ActionSheet

package/src/components/rater/raters.tsx

@@ -0,0 +1,101 @@
+// src/components/rater/rater.tsx
+// src/components/rater/rater.tsx
+
+
+import { defineComponent, ref, watch, computed, PropType } from 'vue'
+import type { RaterProps } from './types'
+export type { RaterProps } 
+const prefixCls = 'dpzvc3-rater'
+
+export default defineComponent({
+  name: 'Dpzvc3Rater',
+
+  props: {
+    modelValue: { type: Number as PropType<number>, default: -1 },
+    distance: { type: Number as PropType<number>, default: 10 },
+    max: { type: Number as PropType<number>, default: 5 },
+    size: { type: Number as PropType<number>, default: 18 },
+    star: { type: String as PropType<string>, default: '★' },
+    defaultColor: { type: String as PropType<string>, default: '#ccc' },
+    activeColor: { type: String as PropType<string>, default: '#f5a623' },
+    disabled: { type: Boolean as PropType<boolean>, default: false }
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    const currentValue = ref(props.modelValue)
+
+    watch(() => props.modelValue, v => {
+      currentValue.value = v
+    })
+
+    const classes = computed(() => [prefixCls])
+    const starClass = `${prefixCls}-star`
+
+    /** ⭐️ 关键：提前算好 stars 数组 */
+    const stars = computed(() => {
+      return Array.from({ length: props.max }).map((_, index) => {
+        const baseStyle: Record<string, string> = {
+          fontSize: `${props.size}px`,
+          marginRight: index + 1 < props.max ? `${props.distance}px` : '0px',
+          color: props.defaultColor
+        }
+
+        const activeStyle: Record<string, string> = {
+          fontSize: `${props.size}px`,
+          marginRight: baseStyle.marginRight
+        }
+
+        const [int, decimal] = String(currentValue.value).split('.')
+
+        if (index + 1 <= Number(int)) {
+          activeStyle.color = props.activeColor
+        }
+
+        if (
+          decimal &&
+          Number(decimal) >= 5 &&
+          index + 1 === Number(int) + 1
+        ) {
+          activeStyle.width = '50%'
+          activeStyle.color = props.activeColor
+        }
+
+        return {
+          index,
+          baseStyle,
+          activeStyle
+        }
+      })
+    })
+
+    const onClickStar = (index: number) => {
+      if (props.disabled) return
+      const value = index + 1
+      currentValue.value = value
+      emit('update:modelValue', value)
+    }
+
+    /** ✅ render 里只“消费数据”，不计算 */
+    return () => (
+      <div class={classes.value}>
+        {stars.value.map(item => (
+          <span
+            key={item.index}
+            class={starClass}
+            style={item.baseStyle}
+          >
+            {props.star}
+            <span
+              style={item.activeStyle}
+              onClick={() => onClickStar(item.index)}
+            >
+              {props.star}
+            </span>
+          </span>
+        ))}
+      </div>
+    )
+  }
+})

package/src/components/rater/types.ts

@@ -0,0 +1,10 @@
+export type RaterProps = {
+  modelValue?: number
+  distance?: number
+  max?: number
+  size?: number
+  star?: string
+  defaultColor?: string
+  activeColor?: string
+  disabled?: boolean
+}

package/src/components/slideBar/index.ts

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

package/src/components/slideBar/slideBar.tsx

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

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

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

@@ -0,0 +1,85 @@
+// 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}
+        />
+      )
+    }
+  }
+})