dpzvc3-ui 3.0.6 → 3.1.0

package/src/components/modal/modal.tsx

@@ -0,0 +1,248 @@
+// src/components/modal/modal.tsx
+import {
+  defineComponent,
+  ref,
+  computed,
+  watch,
+  Transition,
+  PropType
+} from 'vue'
+import VButton from '../button'
+import type { ModalProps } from './types'
+
+export type { ModalProps }
+
+const prefixCls = 'dpzvc3-modal'
+
+export default defineComponent({
+  name: 'Dpzvc3Modal',
+
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    title: String,
+    width: {
+      type: String,
+      default: '70%'
+    },
+    okText: {
+      type: String,
+      default: '确定'
+    },
+    cancleText: {
+      type: String,
+      default: '取消'
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    styles: {
+      type: Object as PropType<Record<string, any>>,
+      default: () => ({})
+    },
+    showHead: {
+      type: Boolean,
+      default: true
+    },
+    footerHide: {
+      type: Boolean,
+      default: false
+    },
+    body: String
+  },
+
+  emits: [
+    'update:modelValue',
+    'on-ok',
+    'on-cancle'
+  ],
+
+  setup(props: ModalProps, { emit, slots }) {
+    const visible = ref(!!props.modelValue)
+    const isHead = ref(!!props.showHead)
+    const buttonLoading = ref(false)
+
+    const getWrapperStyle = computed(() => ({
+      width: props.width,
+      ...(props.styles || {})
+    }))
+
+    /* watch props */
+    watch(
+      () => props.modelValue,
+      val => (visible.value = !!val)
+    )
+
+    watch(
+      () => props.showHead,
+      val => (isHead.value = !!val)
+    )
+
+    /* methods */
+    const close = () => {
+      emit('update:modelValue', false)
+      emit('on-cancle')
+    }
+
+    const mask = () => {
+      if (props.maskClosable && !buttonLoading.value) {
+        close()
+      }
+    }
+
+    const ok = () => {
+      if (props.loading) {
+        buttonLoading.value = true
+      } else {
+        emit('update:modelValue', false)
+      }
+      emit('on-ok')
+    }
+
+    return () => (
+      <>
+        {/* mask */}
+            <Transition name="dpzvc3-ani-fade"
+                v-slots={{
+                default: () =>visible.value && (
+                <div
+                class="dpzvc3-modal-mask"
+                onClick={mask}
+                onTouchstart={(e:any) => e.preventDefault()}
+                onTouchmove={(e:any) => e.preventDefault()}
+                onTouchend={(e:any) => e.preventDefault()}
+                />)
+                }}
+            />
+        {/* </Transition> */}
+{/* <Transition
+          name="dpzvc3-ani-fade"
+          v-slots={{
+            default: () =>
+              mask.value && visible.value && (
+                <div
+                  class={`${prefixCls}-mask`}
+                  onClick={close}
+                  onTouchMove={(e:any) => e.preventDefault()}
+                />
+              )
+          }}
+        /> */}
+            
+
+            {/* modal */}
+            <Transition name="dpzvc3-ani-scale"
+                v-slots={{
+                default: () =>visible.value && (
+                <div
+                class={prefixCls}
+                style={getWrapperStyle.value}
+                >
+                  {/* header */}
+                  {isHead.value && (
+                    <div class={`${prefixCls}-header`}>
+                      {slots.header ? (
+                        slots.header()
+                      ) : (
+                        <div class={`${prefixCls}-header-inner ellipse-fir`}>
+                          {props.title}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* body */}
+                  <div class={`${prefixCls}-body`}>
+                    {slots.body ? slots.body() : props.body}
+                  </div>
+
+                  {/* footer */}
+                  {!props.footerHide && (
+                    <div class={`${prefixCls}-footer`}>
+                      {slots.footer ? (
+                        slots.footer()
+                      ) : (
+                        <>
+                          {props.cancleText && (
+                            <VButton type="primary" onClick={close}>
+                              {props.cancleText}
+                            </VButton>
+                          )}
+                          <VButton
+                            type="normal"
+                            loading={buttonLoading.value}
+                            onClick={ok}
+                          >
+                            {props.okText}
+                          </VButton>
+                        </>
+                      )}
+                    </div>
+                  )}
+                </div>
+                )
+                }}
+            
+            />
+      </>
+    )
+  }
+})
+
+//  {/* <Transition name="dpzvc3-ani-scale"> */}
+//           {visible.value && (
+//             <div
+//               class={prefixCls}
+//               style={getWrapperStyle.value}
+//             >
+//               {/* header */}
+//               {isHead.value && (
+//                 <div class={`${prefixCls}-header`}>
+//                   {slots.header ? (
+//                     slots.header()
+//                   ) : (
+//                     <div class={`${prefixCls}-header-inner ellipse-fir`}>
+//                       {props.title}
+//                     </div>
+//                   )}
+//                 </div>
+//               )}
+
+//               {/* body */}
+//               <div class={`${prefixCls}-body`}>
+//                 {slots.body ? slots.body() : props.body}
+//               </div>
+
+//               {/* footer */}
+//               {!props.footerHide && (
+//                 <div class={`${prefixCls}-footer`}>
+//                   {slots.footer ? (
+//                     slots.footer()
+//                   ) : (
+//                     <>
+//                       {props.cancleText && (
+//                         <VButton type="primary" onClick={close}>
+//                           {props.cancleText}
+//                         </VButton>
+//                       )}
+//                       <VButton
+//                         type="normal"
+//                         loading={buttonLoading.value}
+//                         onClick={ok}
+//                       >
+//                         {props.okText}
+//                       </VButton>
+//                     </>
+//                   )}
+//                 </div>
+//               )}
+//             </div>
+//           )}
+//         {/* </Transition> */}

package/src/components/modal/types.ts

@@ -0,0 +1,51 @@
+// src/components/modal/types.ts
+export type ModalProps ={
+  modelValue?: boolean
+  maskClosable?: boolean
+  title?: string
+  width?: string
+  okText?: string
+  cancleText?: string
+  loading?: boolean
+  styles?: Record<string, any>
+  showHead?: boolean
+  footerHide?: boolean
+  body?: string
+}
+// modal函数调用 传参数与modal props类型声明合并
+export type MergeOptions<T = ModalProps> = {
+    [K in keyof T]: T[K]
+} & {
+    onOk?: () => void
+    onCancle?: () => void
+    onRemove?: () => void
+    showCancle?: boolean,
+    buttonLoading?: boolean,
+}
+
+// modal实例
+export type ModalInstance = {
+  confirm: (options: MergeOptions) => DefaultProps
+  remove: () => void,
+  info: (props: MergeOptions) => DefaultProps
+}
+//开启
+export type DefaultProps = {
+    show: (options: MergeOptions) => any,
+    remove: () => void,
+    component:  MergeOptions
+} | null
+//  visible: false,
+//     modelValue: false,
+//     width: '70%',
+//     body: '',
+//     title: '',
+//     okText: '确定',
+//     cancleText: '取消',
+//     loading: false,
+//     buttonLoading: false,
+//     showCancle: true,
+//     showHead: true,
+//     onOk: () => {},
+//     onCancle: () => {},
+//     onRemove: () => {}

package/src/components/number/Number.tsx

@@ -0,0 +1,143 @@
+import { defineComponent, ref, computed, watch, onMounted, PropType } from 'vue'
+
+const prefixCls = 'dpzvc3-number'
+
+import { NumberProps, NumberEmits } from './types' // 引入类型
+export type { NumberProps } from './types' // 导出类型
+export default defineComponent({
+  name: 'Dpzvc3Number',
+   props: {
+    modelValue: [Number, String],
+    min: { type: [Number, String], default: -Infinity },
+    max: { type: [Number, String], default: Infinity },
+    step: { type: Number, default: 1 },
+    width: { type: Number, default: 60 },
+    height: { type: Number, default: 35 },
+    numberStyle: { type: Object, default: () => ({}) },
+    containerStyle: { type: Object, default: () => ({}) }
+  }, // 强制使用类型as unknown as Record<keyof NumberProps, any>
+  emits: ['update:modelValue', 'input', 'on-input'] as NumberEmits[],
+  setup(props, { emit, slots }) {
+    const currentValue = ref(props.modelValue)
+    const upDisabled = ref(false)
+    const downDisabled = ref(false)
+
+    const classes = computed(() => [prefixCls])
+    const reduceClasses = computed(() => [
+      `${prefixCls}-changevalue`,
+      'left',
+      { disabled: downDisabled.value }
+    ])
+    const addtionClasses = computed(() => [
+      `${prefixCls}-changevalue`,
+      'right',
+      { disabled: upDisabled.value }
+    ])
+    const wrapperClasses = computed(() => [`${prefixCls}-wrapper`])
+    const getChangeStyle = computed(() => ({
+      width: `${props.height}px`,
+      height: `${props.height}px`,
+      lineHeight: `${props.height}px`
+    }))
+    const inputStyle = computed(() => ({
+      ...props.numberStyle,
+      width: `${props.width}px`,
+      height: `${props.height}px`
+    }))
+
+    // 改变值时计算按钮状态
+    const changeVal = (val: number | string) => {
+      const numberVal = Number(val)
+      if (!isNaN(numberVal) || numberVal === 0) {
+        upDisabled.value = numberVal + props.step > Number(props.max)
+        downDisabled.value = numberVal - props.step < Number(props.min)
+      } else {
+        upDisabled.value = true
+        downDisabled.value = true
+      }
+    }
+
+    const setValue = (val: number) => {
+      currentValue.value = val
+      emit('input', val)
+      emit('update:modelValue', val)
+    }
+
+    const changeInput = (e: Event) => {
+      const target = e.target as HTMLInputElement
+      let val = Number(target.value.trim())
+      if (val < Number(props.min)) val = Number(props.min)
+      if (val > Number(props.max)) val = Number(props.max)
+      setValue(val)
+      target.value = String(currentValue.value)
+      emit('on-input', e)
+      emit('update:modelValue', val)
+    }
+
+    const change = (type: 'add' | 'reduce', disabled: boolean) => {
+      if (disabled) return
+      let val = Number(currentValue.value)
+      if (isNaN(val)) return
+      if (type === 'reduce') val -= props.step
+      else val += props.step
+      if (val < Number(props.min)) val = Number(props.min)
+      if (val > Number(props.max)) val = Number(props.max)
+      setValue(val)
+    }
+
+    watch(() => props.modelValue, val => {
+      currentValue.value = val
+    })
+
+    watch(currentValue, val => {
+      changeVal(val!)
+    })
+
+    onMounted(() => {
+      changeVal(currentValue.value!)
+    })
+
+    return () => (
+      <div class={classes.value} style={props.containerStyle}>
+        {/* 减按钮 */}
+        <div
+          class={reduceClasses.value}
+          style={getChangeStyle.value}
+          onClick={() => change('reduce', downDisabled.value)}
+        >
+          {slots.reduce ? slots.reduce() : '-'}
+        </div>
+
+        {/* 输入框 */}
+        <div class={wrapperClasses.value}>
+          <input
+            type="number"
+            style={inputStyle.value}
+            min={props.min}
+            max={props.max}
+            step={props.step}
+            value={currentValue.value}
+            autocomplete="off"
+            onInput={changeInput}
+            onFocus={changeInput}
+            onBlur={changeInput}
+            onChange={changeInput}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.key === 'ArrowUp') change('add', upDisabled.value)
+              if (e.key === 'ArrowDown') change('reduce', downDisabled.value)
+            }}
+          />
+        </div>
+
+        {/* 加按钮 */}
+        <div
+          class={addtionClasses.value}
+          style={getChangeStyle.value}
+          onClick={() => change('add', upDisabled.value)}
+        >
+          {slots.add ? slots.add() : '+'}
+        </div>
+      </div>
+    )
+  }
+})

package/src/components/number/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import Number from './Number'
+Number.install = (app: App): void => {
+    app.component('Number', Number); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _Number=Number as IWithInstall<typeof Number>;
+export default _Number
+// export default Number
+export type { NumberProps } from './types'

package/src/components/number/types.ts

@@ -0,0 +1,13 @@
+// Number/types.ts
+export interface NumberProps {
+  modelValue?: number | string
+  min?: number | string
+  max?: number | string
+  step?: number
+  width?: number
+  height?: number
+  numberStyle?: Record<string, any>
+  containerStyle?: Record<string, any>
+}
+
+export type NumberEmits = 'update:modelValue' | 'input' | 'on-input'

package/src/components/picker/index.ts

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

package/src/components/picker/picker.tsx

@@ -0,0 +1,112 @@
+// src/components/picker/picker.tsx
+import { defineComponent, ref, computed, watch, provide, PropType } from 'vue'
+import Popup from '../popup'
+import AreaPicker from './area-picker/area-picker.vue'
+import DatePicker from './date-picker/date-picker.vue'
+import NormalPicker from './normal-picker/normal-picker.vue'
+import type { PickerProps } from './types'
+
+export type { PickerProps }
+
+const prefixCls = 'dpzvc3-picker'
+const LIST = ['DatePicker', 'AreaPicker', 'NormalPicker']
+
+export default defineComponent({
+  name: 'Dpzvc3Picker',
+  components: { Popup, AreaPicker, DatePicker, NormalPicker },
+  props: {
+    type: {
+      type: String as PropType<PickerProps['type']>,
+      default: 'DatePicker',
+      validator: (val: string) => LIST.includes(val)
+    },
+    modelValue: { type: Boolean, default: false },
+    /** AreaPicker props */
+    addressValue: String,
+    styles: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    valueSeparator: { type: String, default: '/' },
+    /** DatePicker props */
+    dateValue: String,
+    year: { type: [Boolean, Array] as PropType<boolean | any[]>, default: true },
+    month: { type: [Boolean, Array] as PropType<boolean | any[]>, default: true },
+    day: { type: [Boolean, Array] as PropType<boolean | any[]>, default: true },
+    /** NormalPicker props */
+    list: { type: Array as PropType<any[]>, default: () => [] },
+    initArr: { type: Array as PropType<any[]>, default: () => [] }
+  },
+  emits: ['update:modelValue', 'sure', 'cancle', 'normal-change'],
+  setup(props, { emit, slots }) {
+    const visible = ref(props.modelValue)
+
+    watch(() => props.modelValue, val => {
+      visible.value = val
+    })
+
+    watch(visible, val => {
+      emit('update:modelValue', val)
+    })
+
+    const wrapperClass = computed(() => [`${prefixCls}-wrapper`])
+    const contentClass = computed(() => [`${prefixCls}-content`])
+
+    const onOk = (val: any) => {
+      emit('update:modelValue', false)
+      emit('sure', val)
+    }
+
+    const onFail = () => {
+      emit('update:modelValue', false)
+      emit('cancle')
+    }
+
+    const onNormalChange = (val: any) => {
+      emit('normal-change', val)
+    }
+
+    provide('DpzVc3Picker', {
+      pickerOnOk: onOk,
+      pickeronFail: onFail,
+      pickerOnNormalChange: onNormalChange
+    })
+
+    return () => (
+      <Popup v-model={visible.value} height="284px" position="bottom">
+        <div class={wrapperClass.value}>
+          <div class={contentClass.value}>
+            {props.type === 'AreaPicker' && (
+              <AreaPicker
+                styles={props.styles}
+                address-value={props.addressValue}
+                value-separator={props.valueSeparator}
+                onOk={onOk}
+                onFail={onFail}
+              />
+            )}
+
+            {props.type === 'DatePicker' && (
+              <DatePicker
+                year={props.year}
+                month={props.month}
+                day={props.day}
+                date-value={props.dateValue}
+                value-separator={props.valueSeparator}
+                onOk={onOk}
+                onFail={onFail}
+              />
+            )}
+
+            {props.type === 'NormalPicker' && (
+              <NormalPicker
+                list={props.list}
+                init-arr={props.initArr}
+                onOk={onOk}
+                onFail={onFail}
+                onScroll={onNormalChange}
+              />
+            )}
+          </div>
+        </div>
+      </Popup>
+    )
+  }
+})

package/src/components/picker/types.ts

@@ -0,0 +1,17 @@
+// src/components/picker/types.ts
+export interface PickerProps {
+  type?: 'DatePicker' | 'AreaPicker' | 'NormalPicker'
+  modelValue?: boolean
+  /** AreaPicker */
+  addressValue?: string
+  styles?: Record<string, any>
+  valueSeparator?: string
+  /** DatePicker */
+  year?: boolean | any[]
+  month?: boolean | any[]
+  day?: boolean | any[]
+  dateValue?: string
+  /** NormalPicker */
+  list?: any[]
+  initArr?: any[]
+}

package/src/components/popup/index.ts

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

package/src/components/popup/popup.d.ts

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