dpzvc3-ui 3.1.4 → 3.1.6

package/src/components/checkBox/checkbox-group.tsx

@@ -1,75 +0,0 @@
-// src/components/checkbox-group/CheckboxGroup.tsx
-import { defineComponent, ref, watch, provide, PropType } from 'vue'
-import type { CheckBoxGroupProps, CheckBoxGroupValue, CheckBoxGroupExpose, CheckBoxGroupInject } from './types'
-
-const prefixCls = 'dpzvc3-checkBoxGroup'
-
-export default defineComponent({
-  name: 'DpzVcCheckBoxGroup',
-
-  props: {
-    modelValue: {
-      type: Array as PropType<CheckBoxGroupValue>,
-      default: () => []
-    },
-    single: {
-      type: Boolean,
-      default: false
-    },
-    vertical: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['update:modelValue', 'on-change'],
-
-  setup(props, { emit, slots, expose }) {
-    const currentValue = ref<CheckBoxGroupValue>([...props.modelValue])
-
-    /** 对外暴露给 checkbox 的方法 */
-    const toggleOption = (value: CheckBoxGroupValue) => {
-      let newValue: CheckBoxGroupValue = []
-
-      if (props.single) {
-        // 单选模式，只保留第一个
-        newValue = [value[0]]
-      } else {
-        newValue = [...value]
-      }
-
-      currentValue.value = newValue
-      emit('update:modelValue', newValue)
-      emit('on-change', newValue)
-    }
-
-    /** 提供给子组件注入 */
-    provide<CheckBoxGroupInject>('CheckBoxGroup', {
-      currentValue,
-      toggleOption,
-      single: props.single,
-    })
-
-    /** watch 外部 modelValue 同步 */
-    watch(
-      () => props.modelValue,
-      (val) => {
-        currentValue.value = [...val]
-      }
-    )
-
-    /** expose 给父组件通过 ref 调用 */
-    expose<CheckBoxGroupExpose>({
-      toggleOption
-    })
-
-    return () => (
-      <div class={[
-        prefixCls,
-        props.vertical ? `${prefixCls}-vertical` : ''
-      ]}>
-        {slots.default?.()}
-      </div>
-    )
-  }
-})

package/src/components/checkBox/checkbox.tsx

@@ -1,107 +0,0 @@
-// src/components/checkbox/Checkbox.tsx
-import {
-  defineComponent,
-  ref,
-  computed,
-  inject,
-  watch,
-  onMounted,
-  PropType
-} from 'vue'
-import type { CheckBoxProps, CheckBoxGroupInject, CheckBoxLabel } from './types'
-export type { CheckBoxProps }
-
-const prefixCls = 'dpzvc3-checkbox'
-
-export default defineComponent({
-  name: 'DpzVcCheckBox',
-
-  props: {
-    disable: { type: Boolean, default: false },
-    modelValue: { type: Boolean, default: false },
-    label: { type: [String, Number, Boolean] as PropType<CheckBoxLabel> }
-  },
-
-  emits: ['update:modelValue', 'on-change'],
-
-  setup(props, { emit, slots }) {
-    /** 注入 checkboxGroup（由 CheckBoxGroup provide） */
-    const checkboxGroup = inject<CheckBoxGroupInject | null>('CheckBoxGroup', null)
-    const isGroup = ref(!!checkboxGroup)
-
-    const currentValue = ref<boolean>(props.modelValue)
-    const show = ref(true)
-    const slotRef = ref<HTMLElement | null>(null)
-
-    /** classes */
-    const classes = computed(() => [prefixCls])
-    const wrapperClasses = computed(() => [
-      `${prefixCls}-wrapper`,
-      {
-        [`${prefixCls}-checked`]: currentValue.value,
-        [`${prefixCls}-disable`]: props.disable
-      }
-    ])
-    const innerClasses = computed(() => [`${prefixCls}-inner`])
-
-    /** watch 外部 modelValue 同步 */
-    watch(
-      () => props.modelValue,
-      val => {
-        currentValue.value = val
-      }
-    )
-
-    /** change 处理 */
-    const change = (e: Event) => {
-      if (props.disable) return
-
-      const target = e.target as HTMLInputElement
-      const checked = target.checked
-      currentValue.value = checked
-
-      if (isGroup.value && checkboxGroup) {
-        const value = [...checkboxGroup.currentValue.value]
-        const index = value.indexOf(props.label as any)
-        if (checked && index === -1) value.push(props.label as any)
-        if (!checked && index > -1) value.splice(index, 1)
-        checkboxGroup.toggleOption(value)
-      } else {
-        emit('update:modelValue', checked)
-        emit('on-change', checked)
-      }
-    }
-
-    onMounted(() => {
-      if (isGroup.value && checkboxGroup) {
-        const value = [...checkboxGroup.currentValue.value]
-        const index = value.indexOf(props.label as any)
-        if (index !== -1) currentValue.value = true
-      }
-      if (slotRef.value && !slotRef.value.innerHTML) {
-        show.value = false
-      }
-    })
-
-    return () => (
-      <label class={classes.value}>
-        <span class={wrapperClasses.value}>
-          <span class={innerClasses.value} />
-          <input
-            type="checkbox"
-            class={`${prefixCls}-input noselect`}
-            disabled={props.disable}
-            checked={currentValue.value}
-            onChange={change}
-          />
-        </span>
-
-        {show.value && (
-          <span ref={slotRef}>
-            {slots.default?.() ?? props.label}
-          </span>
-        )}
-      </label>
-    )
-  }
-})

package/src/components/checkBox/index.ts

@@ -1,29 +0,0 @@
-/**
- 
- */
-// CheckBox.group = CheckGroup
-// export default CheckBox
-import type { App } from 'vue'
-import CheckBox from './checkbox'
-import CheckBoxGroup from './checkbox-group'
-
-
-
-CheckBox.install = (app: App): void => {
-    app.component('CheckBox', CheckBox); // 注册全局组件
-}
-type IWithInstall<T> = T & { install(app: App): void };
-const _CheckBox = CheckBox as IWithInstall<typeof CheckBox>;
-
-
-
-CheckBoxGroup.install = (app: App): void => {
-    app.component('CheckBoxGroup', CheckBoxGroup); // 注册全局组件
-}
-const _CheckBoxGroup = CheckBoxGroup as IWithInstall<typeof CheckBoxGroup>;
-
-export {
-    _CheckBox as CheckBox,
-    _CheckBoxGroup as CheckBoxGroup
-}
-export type { CheckBoxProps, CheckBoxGroupProps } from './types'

package/src/components/checkBox/types.ts

@@ -1,32 +0,0 @@
-// src/components/checkbox-group/types.ts
-
-// import checkboxGroup from "./checkbox-group"
-// checkbox.types.ts
-import type { Ref } from 'vue'
-
-export type CheckBoxLabel = string | number | boolean
-
-export interface CheckBoxProps {
-  modelValue?: boolean
-  label?: CheckBoxLabel
-  disable?: boolean
-}
-
-export interface CheckBoxGroupInject {
-  currentValue: Ref<Array<string | number>>
-  toggleOption: (value: Array<string | number>) => void
-  single?: boolean
-}
-
-// checkboxGroup.types.ts
-export type CheckBoxGroupValue = Array<string | number>
-
-export interface CheckBoxGroupProps {
-  modelValue?: CheckBoxGroupValue
-  single?: boolean
-  vertical?: boolean
-}
-
-export interface CheckBoxGroupExpose {
-  toggleOption: (value: CheckBoxGroupValue) => void
-}

package/src/components/header/header.tsx

@@ -1,119 +0,0 @@
-// src/components/header/header.tsx
-import {
-  defineComponent,
-  ref,
-  computed,
-  onMounted,
-  watch,
-  PropType
-} from 'vue'
-
-import type { HeaderProps } from './types'
-export type { HeaderProps }
-
-const prefixCls = 'dpzvc3-header'
-
-export default defineComponent({
-  name: 'Dpzvc3Header',
-
-  props: {
-    modelValue: {
-      type: Boolean as PropType<boolean>,
-      default: true
-    },
-    fixed: {
-      type: Boolean as PropType<boolean>,
-      default: true
-    },
-    title: {
-      type: String as PropType<string>,
-      default: ''
-    },
-    wechat: {
-      type: Boolean as PropType<boolean>,
-      default: false
-    }
-  },
-
-  emits: ['update:modelValue'],
-
-  setup(props, { emit, slots }) {
-    const visible = ref<boolean>(props.modelValue)
-    const isWechat = ref<boolean>(props.wechat)
-
-    /** class 计算 */
-    const classes = computed(() => [
-      prefixCls,
-      props.fixed && `${prefixCls}-fixed`
-    ])
-
-    /** UA 判断 */
-    const isWeixin = computed(() =>
-      /micromessenger/i.test(window.navigator.userAgent)
-    )
-
-    const isPcWeixin = computed(() =>
-      /windowswechat/i.test(window.navigator.userAgent)
-    )
-
-    /** v-model 同步 */
-    watch(
-      () => props.modelValue,
-      val => {
-        visible.value = val
-      }
-    )
-
-    watch(
-      () => props.wechat,
-      val => {
-        isWechat.value = val
-      }
-    )
-
-    /** mounted 逻辑 */
-    onMounted(() => {
-      if ((isWeixin.value || isPcWeixin.value) && !isWechat.value) {
-        emit('update:modelValue', false)
-      }
-    })
-
-    /** 返回 */
-    const back = () => {
-      window.history.back()
-    }
-
-    /** JSX render */
-    return () =>
-      visible.value ? (
-        <div class={classes.value}>
-          <header>
-            {/* left */}
-            <div class="left" onClick={back}>
-              {slots.left ? (
-                slots.left()
-              ) : (
-                <>
-                  <span class="arrow" />
-                  <span class="text">返回</span>
-                </>
-              )}
-            </div>
-
-            {/* title */}
-            <div class="title dpzvc3-nowrap">
-              {props.title}
-            </div>
-
-            {/* right */}
-            <div class="right">
-              {slots.right ? slots.right() : <div />}
-            </div>
-          </header>
-
-          {/* 占位 */}
-          {props.fixed && <div class="header-place" />}
-        </div>
-      ) : null
-  }
-})

package/src/components/header/index.ts

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

package/src/components/header/types.ts

@@ -1,7 +0,0 @@
-// src/components/header/types.ts
-export interface HeaderProps {
-  modelValue?: boolean
-  fixed?: boolean
-  title?: string
-  wechat?: boolean
-}

package/src/components/loadMore/index.ts

@@ -1,14 +0,0 @@
-/**
- * Created by admin on 2025/6/19.
- */
-import type { App } from 'vue'
-import DpLoadMore from './loadMore'
-// export default LoadMore
-DpLoadMore.install = (app: App): void => {
-    app.component('DpLoadMore', DpLoadMore); // 注册全局组件
-}
-type IWithInstall<T> = T & { install(app: App): void };
-const _DpLoadMore=DpLoadMore as IWithInstall<typeof DpLoadMore>;
-export default _DpLoadMore
-// export default LoadMore
-export type { LoadmoreProps } from './types'

package/src/components/loadMore/loadMore.tsx

@@ -1,265 +0,0 @@
-// src/components/Loadmore/Loadmore.tsx
-import {
-  defineComponent,
-  ref,
-  computed,
-  watch,
-  onMounted,
-  onBeforeUnmount
-} from 'vue'
-import type { PropType, CSSProperties } from 'vue'
-import Spinner from '../spinner'
-import type { LoadmoreProps } from './types'
-
-const prefixCls = 'dpzvc3-loadmore'
-
-export default defineComponent({
-  name: 'Dpzvc3Loadmore',
-
-  props: {
-    height: {
-      type: [Number, String] as PropType<number | string>,
-      default: '100%'
-    },
-    refresh: Function as PropType<LoadmoreProps['refresh']>,
-    upLoadingText: { type: String, default: '加载中...' },
-    upDistance: { type: Number, default: 70 },
-    upPullText: { type: String, default: '↓ 下拉刷新' },
-    upDropText: { type: String, default: '↑ 释放更新' },
-    maxDistance: { type: Number, default: 0 },
-    speed: { type: Number, default: 3 },
-
-    downEndText: { type: String, default: '没有更多了' },
-    downDropText: { type: String, default: '↑ 上拉加载数据' },
-    downLoadingText: { type: String, default: '加载中...' },
-    downDistance: { type: Number, default: 50 },
-    loadMore: Function as PropType<LoadmoreProps['loadMore']>,
-    hasMore: { type: Boolean, default: true },
-
-    styles: {
-      type: Object as PropType<CSSProperties>,
-      default: () => ({})
-    },
-    auto: { type: Boolean, default: true },
-    autoFill: { type: Boolean, default: true }
-  },
-
-  emits: ['on-change-up-status', 'on-change-down-status'],
-
-  setup(props, { slots, emit, expose }) {
-    const containerRef = ref<HTMLDivElement | null>(null)
-
-    /** 状态 */
-    const translateY = ref(0)
-    const startTranslateY = ref(0)
-    const currentY = ref(0)
-    const startY = ref(0)
-    const upStatus = ref('')
-    const downStatus = ref('')
-    const direction = ref('')
-    const upText = ref('')
-    const downText = ref('')
-    const down = ref(false)
-    const drag = ref(false)
-    const more = ref(props.hasMore)
-
-    /** classes */
-    const containerClasses = computed(() => [prefixCls])
-    const topClasses = computed(() => [
-      `${prefixCls}-top`,
-      { [`${prefixCls}-drag`]: !drag.value }
-    ])
-    const bottomClasses = computed(() => [`${prefixCls}-bottom`])
-    const contentClasses = computed(() => [`${prefixCls}-content`])
-    const statusClass = computed(() => [`${prefixCls}-status`])
-
-    /** watch */
-    watch(upStatus, val => {
-      switch (val) {
-        case 'pull': upText.value = props.upPullText; break
-        case 'drop': upText.value = props.upDropText; break
-        case 'loading': upText.value = props.upLoadingText; break
-      }
-      emit('on-change-up-status', val)
-    })
-
-    watch(downStatus, val => {
-      switch (val) {
-        case 'end': downText.value = props.downEndText; break
-        case 'drop': downText.value = props.downDropText; break
-        case 'loading': downText.value = props.downLoadingText; break
-        default: downText.value = ''; break
-      }
-      emit('on-change-down-status', val)
-    })
-
-    watch(() => props.hasMore, val => {
-      more.value = val
-      if (!val) downStatus.value = 'end'
-    })
-
-    /** utils */
-    const isBottom = () => {
-      const el = containerRef.value
-      return !!el && el.scrollHeight <= el.offsetHeight
-    }
-
-    const onLoadOff = () => {
-      translateY.value = 0
-      upStatus.value = ''
-      downStatus.value = ''
-      if (!more.value) downStatus.value = 'end'
-
-      setTimeout(() => {
-        if (more.value && isBottom()) {
-          direction.value = 'up'
-          downStatus.value = 'loading'
-          props.loadMore?.()
-        }
-      }, 1000)
-    }
-
-    /** scroll */
-    const onScroll = (e: Event) => {
-      e.preventDefault()
-      if (downStatus.value === 'loading') return
-
-      const el = containerRef.value
-      if (!el || !props.loadMore) return
-
-      const scrollTop = el.scrollTop
-      const absY = el.scrollHeight - (el.offsetHeight + scrollTop)
-
-      if (absY > props.downDistance && downStatus.value === 'drop') {
-        downStatus.value = ''
-      } else if (absY <= props.downDistance) {
-        downStatus.value = 'loading'
-        //   props.loadMore()
-          if (more.value) props.loadMore()
-          else setTimeout(onLoadOff, 1000)
-      }
-    }
-
-    /** touch */
-    const onTouchStart = (e: TouchEvent) => {
-      if (upStatus.value === 'loading') return
-      startY.value = e.touches[0].clientY
-      startTranslateY.value = translateY.value
-      down.value = false
-    }
-
-    const onTouchMove = (e: TouchEvent) => {
-      const el = containerRef.value
-      if (!el || upStatus.value === 'loading') return
-
-      currentY.value = e.touches[0].clientY
-      const distance = (currentY.value - startY.value) / props.speed
-      const scrollTop = el.scrollTop
-      direction.value = distance > 0 ? 'down' : 'up'
-
-      if (
-        currentY.value >= startY.value &&
-        props.refresh &&
-        scrollTop === 0 &&
-        direction.value === 'down'
-      ) {
-        e.preventDefault()
-        translateY.value = props.maxDistance > 0
-          ? Math.min(distance - scrollTop, props.maxDistance)
-          : distance - scrollTop
-
-        if (translateY.value < 0) translateY.value = 0
-        upStatus.value = translateY.value >= props.upDistance ? 'drop' : 'pull'
-        drag.value = true
-        down.value = down.value || isBottom()
-      }
-    }
-
-    const onTouchEnd = () => {
-      const el = containerRef.value
-      if (!el || upStatus.value === 'loading') return
-
-      if (direction.value === 'down' && el.scrollTop <= 0) {
-        if (upStatus.value === 'drop') {
-          translateY.value = 40
-          upStatus.value = 'loading'
-          props.refresh?.()
-        } else {
-          translateY.value = 0
-        }
-      }
-      direction.value = ''
-      drag.value = false
-    }
-
-    onMounted(() => {
-      if (props.auto && props.refresh) {
-        translateY.value = 40
-        upStatus.value = 'loading'
-        props.refresh()
-      }
-
-      const el = containerRef.value
-      el?.addEventListener('touchstart', onTouchStart)
-      el?.addEventListener('touchmove', onTouchMove)
-      el?.addEventListener('touchend', onTouchEnd)
-    })
-
-    onBeforeUnmount(() => {
-      const el = containerRef.value
-      el?.removeEventListener('touchstart', onTouchStart)
-      el?.removeEventListener('touchmove', onTouchMove)
-      el?.removeEventListener('touchend', onTouchEnd)
-    })
-    expose({ onLoadOff }) 
-    return () => (
-      <div
-        ref={containerRef}
-        class={containerClasses.value}
-        style={{ height: props.height, ...props.styles }}
-        onScroll={onScroll}
-      >
-        {props.refresh && (
-          <div
-            class={topClasses.value}
-            style={{ height: `${translateY.value}px` }}
-          >
-            <div class={statusClass.value}>
-              {slots.top?.() ?? (
-                <>
-                  <span class="spinner">
-                    {upStatus.value === 'loading' && (
-                      <Spinner size="15" type="snake" />
-                    )}
-                  </span>
-                  <span class="dpzvc3-loadmore-text">{upText.value}</span>
-                </>
-              )}
-            </div>
-          </div>
-        )}
-
-        <div class={contentClasses.value}>
-          {slots.default?.()}
-        </div>
-
-        {props.loadMore && (
-          <div class={bottomClasses.value}>
-            <div class={statusClass.value}>
-              {slots.bottom?.() ?? (
-                <>
-                  <span class="spinner">
-                    {downStatus.value === 'loading' && (
-                      <Spinner size="15" type="snake" />
-                    )}
-                  </span>
-                  <span class="dpzvc3-loadmore-text">{downText.value}</span>
-                </>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    )
-  }
-})

package/src/components/loadMore/types.ts

@@ -1,26 +0,0 @@
-// src/components/Loadmore/types.ts
-export interface LoadmoreProps {
-  height?: number | string
-
-  /** 下拉刷新 */
-  refresh?: () => void
-  upLoadingText?: string
-  upDistance?: number
-  upPullText?: string
-  upDropText?: string
-  maxDistance?: number
-  speed?: number
-
-  /** 上拉加载 */
-  loadMore?: () => void
-  downEndText?: string
-  downDropText?: string
-  downLoadingText?: string
-  downDistance?: number
-  hasMore?: boolean
-
-  /** 其他 */
-  styles?: Record<string, any>
-  auto?: boolean
-  autoFill?: boolean
-}