dpzvc3-ui 3.0.7 → 3.1.1

package/src/components/checkBox/checkbox.tsx

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

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

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

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

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

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

package/src/components/loadMore/index.ts

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

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

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