dpzvc3-ui 3.0.6 → 3.1.0

package/src/components/button/{button.vue → button.tsx}

@@ -1,50 +1,23 @@
-<template>
-  <div
-    :class="classes"
-    :style="wrapperStyles"
-  >
-    <button
-      :style="styles"
-      :class="buttonClass"
-      :disabled="disabled"
-      @click.stop="handleClick"
-    >
-      <slot name="left">
-        <span
-          v-show="loadingValue"
-          class="loading"
-        >
-          <Spinner
-            type="blade"
-            size="15"
-            color="#ffffff"
-          />
-        </span>
-      </slot>
-      <slot><span>确定</span></slot>
-      <slot name="right" />
-    </button>
-  </div>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
+// src/components/button/button.tsx
+import { defineComponent, computed, PropType } from 'vue'
 import Spinner from '../spinner'
+import type { ButtonProps } from './types'
+
+export type { ButtonProps }
 
 const prefixCls = 'dpzvc3-button'
 
 export default defineComponent({
   name: 'VButton',
-  components: { Spinner },
   props: {
     type: {
-      type: String,
+      type: String as PropType<ButtonProps['type']>,
       default: 'normal',
-      validator: (val) =>
+      validator: (val: string) =>
         ['success', 'loading', 'normal', 'primary', 'warning', 'danger', 'text'].includes(val)
     },
     styles: {
-      type: Object,
+      type: Object as PropType<ButtonProps['styles']>,
       default: () => ({})
     },
     circle: { type: Boolean, default: false },
@@ -54,10 +27,11 @@ export default defineComponent({
     height: { type: String, default: '40px' },
     loading: { type: Boolean, default: false },
     radius: { type: Boolean, default: true },
-    border: { type: String, default: 'all' }
+    border: { type: String as PropType<ButtonProps['border']>, default: 'all' }
   },
-  setup (props, { emit }) {
-    // 外层容器类
+  emits: ['click'],
+  setup(props, { emit, slots }) {
+    /** 外层容器类 */
     const classes = computed(() => [
       prefixCls,
       {
@@ -66,14 +40,14 @@ export default defineComponent({
       }
     ])
 
-    // 外层容器样式
+    /** 外层容器样式 */
     const wrapperStyles = computed(() => ({
       display: props.inline ? 'inline-block' : 'block',
       width: props.width,
       height: props.height
     }))
 
-    // button 类
+    /** button 类 */
     const buttonClass = computed(() => [
       `${prefixCls}-btn`,
       [`dpzvc3-1px-${props.border}`],
@@ -90,22 +64,42 @@ export default defineComponent({
       }
     ])
 
-    // 点击事件
-    const handleClick = (e) => {
+    /** 点击事件 */
+    const handleClick = (e: MouseEvent) => {
       if (props.disabled || props.loading) return
       emit('click', e)
     }
 
-    // 状态
+    /** loading 状态 */
     const loadingValue = computed(() => props.loading)
 
-    return {
-      classes,
-      wrapperStyles,
-      buttonClass,
-      handleClick,
-      loadingValue
-    }
+    /** JSX 渲染 */
+    return () => (
+      <div class={classes.value} style={wrapperStyles.value}>
+        <button
+          class={buttonClass.value}
+          style={props.styles}
+          disabled={props.disabled}
+          onClick={handleClick}
+        >
+          {/* left slot */}
+          {slots.left ? (
+            slots.left()
+          ) : (
+            loadingValue.value && (
+              <span class="loading">
+                <Spinner type="blade" size={15} color="#ffffff" />
+              </span>
+            )
+          )}
+
+          {/* default slot */}
+          {slots.default ? slots.default() : <span>确定</span>}
+
+          {/* right slot */}
+          {slots.right?.()}
+        </button>
+      </div>
+    )
   }
-})
-</script>
+})

package/src/components/button/index.ts

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

package/src/components/button/types.ts

@@ -0,0 +1,13 @@
+// src/components/button/types.ts
+export interface ButtonProps {
+  type?: 'success' | 'loading' | 'normal' | 'primary' | 'warning' | 'danger' | 'text'
+  styles?: Record<string, any>
+  circle?: boolean
+  disabled?: boolean
+  inline?: boolean
+  width?: string
+  height?: string
+  loading?: boolean
+  radius?: boolean
+  border?: 'all' | 'top' | 'bottom' | 'left' | 'right' | 'none'
+}

package/src/components/card/card.d.ts

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

package/src/components/card/card.tsx

@@ -0,0 +1,38 @@
+// src/components/card/card.tsx
+import { defineComponent, computed, PropType } from 'vue'
+
+// export type CardProps = {
+//   width?: string
+// }
+import type { CardProps  } from './types'
+export type { CardProps } 
+
+const prefixCls = 'dpzvc3-card'
+
+export default defineComponent({
+  name: 'Dpzvc3Card',
+  props: {
+    width: { type: String as PropType<string>, default: '100%' }
+  },
+  setup(props, { slots }) {
+    const classes = computed(() => [prefixCls])
+    const headerClass = computed(() => [`${prefixCls}-header`, 'dpzvc3-1px-bottom'])
+    const contentClass = computed(() => [`${prefixCls}-content`])
+    const footerClass = computed(() => [`${prefixCls}-footer`, 'dpzvc3-1px-top'])
+    const cardWidth = computed(() => props.width)
+
+    return () => (
+      <div class={classes.value} style={{ width: cardWidth.value }}>
+        <div class={headerClass.value}>
+          {slots.header?.()}
+        </div>
+        <div class={contentClass.value}>
+          {slots.default ? slots.default() : <div class="main" />}
+        </div>
+        <div class={footerClass.value}>
+          {slots.footer?.()}
+        </div>
+      </div>
+    )
+  }
+})

package/src/components/card/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Created by admin on 2017/7/7.
+ */
+import type { App } from 'vue'
+import Card from './card'
+Card.install = (app: App): void => {
+    app.component('Card', Card); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _Card = Card as IWithInstall<typeof Card>;
+export default _Card
+export type { CardProps } from './types'

package/src/components/card/types.ts

@@ -0,0 +1,3 @@
+export type CardProps = {
+  width?: string
+}

package/src/components/cell/cell.tsx

@@ -0,0 +1,89 @@
+// src/components/cell/cell.tsx
+import { defineComponent, computed,PropType} from 'vue'
+import { useRouter } from 'vue-router'
+
+import type { CellProps } from './types'
+export type { CellProps }
+
+const prefixCls = 'dpzvc3-cell'
+
+export default defineComponent({
+  name: 'Dpzvc3Cell',
+  props: {
+    title: String,
+    value: null,
+    label: String,
+    link: String,
+    hasMask: Boolean
+  },
+  emits: ['touchstart', 'touchmove', 'touchend', 'click'],
+  setup(props, { emit, slots }) {
+    const router = useRouter()
+
+    const toLink = computed(() => {
+      if (!props.link) return ''
+      const resolved = router.resolve(props.link)
+      return resolved.matched.length ? resolved.href : props.link
+    })
+
+    const classes = computed(() => [prefixCls])
+    const maskClass = computed(() => [`${prefixCls}-mask`])
+    const leftClasses = computed(() => [`${prefixCls}-left`])
+    const rightClasses = computed(() => [`${prefixCls}-right`])
+    const wrapperClasses = computed(() => [`${prefixCls}-main`, 'dpzvc3-1px-top'])
+    const titleClass = computed(() => [`${prefixCls}-main-title`])
+    const valueClass = computed(() => [`${prefixCls}-main-value`])
+    const labelClass = computed(() => [`${prefixCls}-main-label`])
+
+    const handleClick = (e: MouseEvent) => {
+      if (props.link) {
+        router.push(props.link)
+      } else {
+        emit('click', e)
+      }
+    }
+
+    const cellTouchStart = (e: TouchEvent) => emit('touchstart', e)
+    const cellTouchMove = (e: TouchEvent) => emit('touchmove', e)
+    const cellTouchEnd = (e: TouchEvent) => emit('touchend', e)
+
+    return () => (
+      <div
+        href={toLink.value}
+        class={classes.value}
+        onClick={handleClick}
+        onTouchstart={cellTouchStart}
+        onTouchmove={cellTouchMove}
+        onTouchend={cellTouchEnd}
+      >
+        {props.hasMask && <span class={maskClass.value} />}
+
+        <div class={leftClasses.value}>
+          {slots.left?.()}
+        </div>
+
+        <div class={wrapperClasses.value}>
+          <div class={titleClass.value}>
+            {slots.icon?.()}
+            {slots.title ? (
+              slots.title()
+            ) : (
+              <>
+                <span>{props.title}</span>
+                <span class={labelClass.value}>{props.label}</span>
+              </>
+            )}
+          </div>
+
+          <div class={valueClass.value}>
+            {slots.value ? slots.value() : <span>{props.value}</span>}
+          </div>
+        </div>
+
+        <div class={rightClasses.value}>
+          {slots.right?.()}
+        </div>
+      </div>
+    )
+  }
+})

package/src/components/cell/index.ts

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

package/src/components/cell/types.ts

@@ -0,0 +1,8 @@
+// src/components/cell/types.ts
+export interface CellProps {
+  title?: string
+  value?: any
+  label?: string
+  link?: string
+  hasMask?: boolean
+}

package/src/components/cellSwipe/cellSwipe.tsx

@@ -0,0 +1,188 @@
+// src/components/cell-swipe/cell-swipe.tsx
+import {
+  ref,
+  reactive,
+  watch,
+  nextTick,
+  onMounted,
+  defineComponent
+} from 'vue'
+
+import Cell from '../cell'
+import type { CellSwipeProps, CellSwipeAction } from './types'
+
+export type { CellSwipeProps }
+
+const translate3d = (x: number) => `translate3d(${x}px,0,0)`
+
+export default defineComponent({
+  name: 'Dpzvc3CellSwipe',
+  props: {
+    title: String,
+    value: null,
+    label: String,
+    link: String,
+    hasMask: Boolean,
+    left: {
+      type: Array as () => CellSwipeAction[],
+      default: () => []
+    },
+    right: {
+      type: Array as () => CellSwipeAction[],
+      default: () => []
+    }
+  },
+  setup(props) {
+    const cellRef = ref<any>(null)
+    const leftRef = ref<HTMLElement | null>(null)
+    const rightRef = ref<HTMLElement | null>(null)
+
+    const state = reactive({
+      translate: 0,
+      startX: 0,
+      currentX: 0,
+      direction: '' as 'left' | 'right' | '',
+      leftWidth: 0,
+      rightWidth: 0,
+      wrapper: null as HTMLElement | null,
+      leftEl: null as HTMLElement | null,
+      rightEl: null as HTMLElement | null
+    })
+
+    const swipe = (translate = 0) => {
+      state.translate = translate
+      state.wrapper && (state.wrapper.style.transform = translate3d(translate))
+      state.leftEl &&
+        (state.leftEl.style.transform = translate3d(-state.leftWidth + translate))
+      state.rightEl &&
+        (state.rightEl.style.transform = translate3d(state.rightWidth + translate))
+    }
+
+    const onTouchStart = (e: TouchEvent) => {
+      state.startX = e.touches[0].clientX
+    }
+
+    const onTouchMove = (e: TouchEvent) => {
+      e.preventDefault()
+      state.currentX = e.touches[0].clientX
+      const diff = state.currentX - state.startX
+      state.direction = diff < 0 ? 'left' : 'right'
+
+      if (state.direction === 'left') {
+        state.translate = Math.max(-state.rightWidth, diff)
+      } else {
+        state.translate = Math.min(state.leftWidth, diff)
+      }
+
+      nextTick(() => swipe(state.translate))
+    }
+
+    const onTouchEnd = () => {
+      if (
+        state.direction === 'right' &&
+        Math.abs(state.translate) > state.leftWidth / 2
+      ) {
+        swipe(state.leftWidth)
+      } else if (
+        state.direction === 'left' &&
+        Math.abs(state.translate) > state.rightWidth / 2
+      ) {
+        swipe(-state.rightWidth)
+      } else {
+        swipe(0)
+      }
+    }
+
+    watch(
+      () => props.left,
+      () => {
+        nextTick(() => {
+          state.leftWidth = leftRef.value?.offsetWidth || 0
+          swipe()
+        })
+      }
+    )
+
+    watch(
+      () => props.right,
+      () => {
+        nextTick(() => {
+          state.rightWidth = rightRef.value?.offsetWidth || 0
+          swipe()
+        })
+      }
+    )
+
+    onMounted(() => {
+      nextTick(() => {
+        if (!cellRef.value) return
+
+        const el = cellRef.value.$el as HTMLElement
+        state.wrapper = el.querySelector('.dpzvc3-cell-main')
+        state.leftEl = leftRef.value?.parentElement || null
+        state.rightEl = rightRef.value?.parentElement || null
+
+        state.leftWidth = state.leftEl?.offsetWidth || 0
+        state.rightWidth = state.rightEl?.offsetWidth || 0
+
+        state.leftEl &&
+          (state.leftEl.style.transform = translate3d(-state.leftWidth))
+        state.rightEl &&
+          (state.rightEl.style.transform = translate3d(state.rightWidth + 1))
+        state.wrapper && (state.wrapper.style.transform = translate3d(0))
+      })
+    })
+
+    return () => (
+      <Cell
+        ref={cellRef}
+        title={props.title}
+        value={props.value}
+        label={props.label}
+        link={props.link}
+        hasMask={props.hasMask}
+        onClick={() => swipe(0)}
+        onTouchstart={onTouchStart}
+        onTouchmove={onTouchMove}
+        onTouchend={onTouchEnd}
+      >
+        {{
+          left: () => (
+            <div ref={leftRef} class="dpzvc3-cell-swipe-group">
+              {props.left?.map((item, index) => (
+                <span
+                  key={index}
+                  class="dpzvc3-cell-swipe-btn"
+                  style={item.style}
+                  innerHTML={item.content}
+                  onClick={(e: any) => {
+                    e.stopPropagation()
+                    item.handleClick?.()
+                    swipe(0)
+                  }}
+                />
+              ))}
+            </div>
+          ),
+          right: () => (
+            <div ref={rightRef} class="dpzvc3-cell-swipe-group">
+              {props.right?.map((item, index) => (
+                <span
+                  key={index}
+                  class="dpzvc3-cell-swipe-btn"
+                  style={item.style}
+                  innerHTML={item.content}
+                  onClick={(e: any) => {
+                    e.stopPropagation()
+                    item.handleClick?.()
+                    swipe(0)
+                  }}
+                />
+              ))}
+            </div>
+          )
+        }}
+      </Cell>
+    )
+  }
+})

package/src/components/cellSwipe/index.ts

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

package/src/components/cellSwipe/types.ts

@@ -0,0 +1,17 @@
+// src/components/cell-swipe/types.ts
+
+export interface CellSwipeAction {
+  content?: string
+  style?: Record<string, string>
+  handleClick?: () => void
+}
+
+export interface CellSwipeProps {
+  title?: string
+  value?: any
+  label?: string
+  link?: string
+  hasMask?: boolean
+  left?: CellSwipeAction[]
+  right?: CellSwipeAction[]
+}

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

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