dpzvc3-ui 3.0.6 → 3.1.0

package/src/components/popup/popup.tsx

@@ -0,0 +1,68 @@
+import { defineComponent, ref, computed, watch, PropType, Transition } from 'vue'
+import type { PopupProps } from './types'
+export type { PopupProps }
+
+const prefixCls = 'dpzvc3-popup'
+
+export default defineComponent({
+  name: 'Dpzvc3Popup',
+  props: {
+    modelValue: { type: Boolean, default: false },
+    position: { type: String as PropType<PopupProps['position']>, default: 'bottom' },
+    showMask: { type: Boolean, default: true },
+    maskClosable: { type: Boolean, default: true },
+    width: { type: [Number, String] as PropType<number | string>, default: '100%' },
+    height: { type: [Number, String] as PropType<number | string> },
+    styles: { type: Object as PropType<Record<string, string | number>>, default: () => ({}) }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, slots }) {
+    const visible = ref(props.modelValue)
+    const mask = ref(props.showMask)
+
+    watch(() => props.modelValue, val => { visible.value = val })
+    watch(visible, val => { emit('update:modelValue', val) })
+    watch(() => props.showMask, val => { mask.value = val })
+
+    const classes = computed(() => [prefixCls])
+    const popupClasses = computed(() => [`${prefixCls}-${props.position}`, `${prefixCls}-content`])
+    const contentStyle = computed(() => {
+      const heightValue = props.height != null ? props.height : (props.position === 'top' ? 'auto' : '100%')
+      return { ...props.styles, width: props.width, height: heightValue }
+    })
+
+    const close = () => { if (props.maskClosable && mask.value) visible.value = false }
+
+    return () => (
+      <div class={classes.value}>
+        {/* 遮罩层 */}
+        <Transition
+          name="dpzvc3-ani-fade"
+          v-slots={{
+            default: () =>
+              mask.value && visible.value && (
+                <div
+                  class={`${prefixCls}-mask`}
+                  onClick={close}
+                  onTouchMove={(e:any) => e.preventDefault()}
+                />
+              )
+          }}
+        />
+
+        {/* 弹窗内容 */}
+        <Transition
+          name={`dpzvc3-ani-${props.position}`}
+          v-slots={{
+            default: () =>
+              visible.value && (
+                <div class={popupClasses.value} style={contentStyle.value}>
+                  {slots.default?.()}
+                </div>
+              )
+          }}
+        />
+      </div>
+    )
+  }
+})

package/src/components/popup/types.ts

@@ -0,0 +1,9 @@
+export type PopupProps = {
+  modelValue?: boolean
+  position?: 'top' | 'bottom' | 'right' | 'left'
+  showMask?: boolean
+  maskClosable?: boolean
+  width?: number | string
+  height?: number | string
+  styles?: Record<string, string | number>
+}

package/src/components/progress/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Created by yishide on 2025/09/26.
+ */
+import type { App } from 'vue'
+import Progress from './progress'
+Progress.install = (app: App): void => {
+    app.component('DpProgress', Progress); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _Progress=Progress as IWithInstall<typeof Progress>;
+export default _Progress
+export type { ProgressProps } from './types'

package/src/components/progress/progress.tsx

@@ -0,0 +1,81 @@
+// src/components/Progress/Progress.tsx
+import {
+  defineComponent,
+  ref,
+  computed,
+  watch
+} from 'vue'
+import type { PropType, CSSProperties } from 'vue'
+import type { ProgressProps } from './types'
+export type { ProgressProps }
+
+const prefixCls = 'dpzvc3-progress'
+
+export default defineComponent({
+  name: 'DpzVcProgress',
+
+  props: {
+    styles: {
+      type: Object as PropType<CSSProperties>,
+      default: () => ({})
+    },
+    modelValue: {
+      type: [Number, String] as PropType<number | string>,
+      default: 0
+    },
+    barHeight: {
+      type: [Number, String] as PropType<number | string>,
+      default: 3
+    }
+  },
+
+  setup(props, { slots }) {
+    /** 当前进度 */
+    const width = ref<number>(0)
+
+    /** 同步 v-model */
+    watch(
+      () => props.modelValue,
+      (val) => {
+        const num = Number(val) || 0
+        width.value = num >= 100 ? 100 : num
+      },
+      { immediate: true }
+    )
+
+    /** class */
+    const classes = computed(() => [prefixCls])
+    const outerClass = computed(() => [`${prefixCls}-outer`])
+    const runawayClass = computed(() => [`${prefixCls}-runaway`])
+    const progressClass = computed(() => [`${prefixCls}-progress`])
+
+    /** style */
+    const runawayStyle = computed<CSSProperties>(() => ({
+      height: `${props.barHeight}px`
+    }))
+
+    const progressStyle = computed<CSSProperties>(() => ({
+      height: `${props.barHeight}px`,
+      width: `${width.value}%`
+    }))
+
+    return () => (
+      <div class={classes.value} style={props.styles}>
+        {slots.left?.()}
+
+        <div class={outerClass.value}>
+          <div
+            class={runawayClass.value}
+            style={runawayStyle.value}
+          />
+          <div
+            class={progressClass.value}
+            style={progressStyle.value}
+          />
+        </div>
+
+        {slots.right?.()}
+      </div>
+    )
+  }
+})

package/src/components/progress/types.ts

@@ -0,0 +1,9 @@
+// src/components/Progress/types.ts
+export interface ProgressProps {
+  /** 自定义样式 */
+  styles?: Record<string, any>
+  /** 当前进度 */
+  modelValue?: number | string
+  /** 进度条高度 */
+  barHeight?: number | string
+}

package/src/components/prompt/{confirm.js → confirm.ts}

@@ -4,19 +4,19 @@
  */
 
 import { createVNode, render } from 'vue'
-import Prompt from './prompt.vue'
-
+import Prompt from './prompt'
+import type { MergePromptOptions, PromptProps } from './types'
 // let seed = 0
 
-Prompt.newInstance = (properties = {}) => {
+function createPromptInstance (properties:MergePromptOptions = {}) {
   // const id = `dpzvc3-prompt-${seed++}`
-  const instance = null
+  // const instance = null
   // 容器
   const container = document.createElement('div')
   // container.id = id
   document.body.appendChild(container)
   // 组件 props（默认值）
-  const props = {
+  const props: MergePromptOptions = {
     value: false,
     text: '',
     placeholderText: '请输入',
@@ -33,17 +33,24 @@ Prompt.newInstance = (properties = {}) => {
     onCancle: () => {},
     ...properties
   }
-
+const mergeProps = <T extends object, K extends keyof T>(
+  target: T,
+  source: Partial<T>
+) =>{
+  (Object.keys(source) as K[]).forEach((key) => {
+    target[key] = source[key]!
+  })
+}
   const updateVNode = () => {
     // vnode
     // console.log(props, 'props')
     const vnode = createVNode(Prompt, {
       ...props,
       // 给动态挂载组件绑定 update:value 事件
-      'onUpdate:value': (val) => {
+      'onUpdate:value': (val: boolean) => {
         // 当子组件 emit('update:value', false) 时执行
         if (val === false) {
-          vnode.component.props.value = false // 关闭内部显示
+          vnode.component!.props.value = false // 关闭内部显示
           destroy() // 销毁 DOM
         }
       },
@@ -65,11 +72,16 @@ Prompt.newInstance = (properties = {}) => {
     /**
      * 显示
      */
-    show (options = {}) {
+    show (options: PromptProps = {}) {
       // alert(1)
-      Object.keys(options).forEach(key => {
-        props[key] = options[key]
-      })
+      mergeProps(props, options)
+      // Object.keys(options).forEach((key) => {
+      //   const typeKey = key as keyof PromptProps
+      //   const val = options[typeKey];
+      //   // if (val) { 
+      //       props[typeKey] = val
+      //   // }
+      // })
       // console.log(instance.props, 'props')
       props.value = true
       updateVNode()
@@ -84,8 +96,9 @@ Prompt.newInstance = (properties = {}) => {
       destroy()
     },
 
-    component: instance
+    // component: instance
   }
 }
 
-export default Prompt
+// export default Prompt
+export { createPromptInstance }

package/src/components/prompt/index.ts

@@ -0,0 +1,50 @@
+/**
+ * Created by admin on 2025/12/10.
+ * Rewritten for Vue 3 (no createApp)
+ */
+
+import {createPromptInstance } from './confirm'
+import type { MergePromptOptions, PromptInstance, DefaultPromptProps } from './types'
+let promptInstance: DefaultPromptProps
+
+function getPromptInstance () {
+  if (!promptInstance) {
+    promptInstance = createPromptInstance({
+      closable: true,
+      maskClosable: false,
+      // footerHide: false
+    })
+  }
+  return promptInstance
+}
+
+/**
+ * confirm 核心方法
+ */
+function confirm (options: MergePromptOptions = {}) {
+  const instance: DefaultPromptProps = getPromptInstance()!
+
+  // 组件销毁回调
+  options.onRemove = () => {
+    promptInstance = null
+  }
+
+  instance.show(options)
+}
+
+/**
+ * info 弹窗
+ */
+const Prompt: PromptInstance = {
+  info: (props: MergePromptOptions = {}) => { 
+    props.showCancle = true
+    return confirm(props)
+  },
+  remove: () => {
+    if (!promptInstance) return false
+    const instance = getPromptInstance()!
+    instance.remove()
+  } 
+}
+
+export default Prompt

package/src/components/prompt/prompt.tsx

@@ -0,0 +1,161 @@
+// src/components/Prompt/Prompt.tsx
+import {
+  defineComponent,
+  ref,
+  watch
+} from 'vue'
+import type { PropType } from 'vue'
+import type { PromptProps } from './types'
+
+import Modal from '../modal/modal'
+import TextBar from '../Text/textBar'
+import DpButton from '../button/button'
+
+export default defineComponent({
+  name: 'Dpzvc3Prompt',
+
+  props: {
+    value: { type: Boolean, default: false },
+    text: { type: String, default: '' },
+    closable: { type: Boolean, default: true },
+    maskClosable: { type: Boolean, default: true },
+    title: String,
+    width: { type: String, default: '220px' },
+    okText: { type: String, default: '确定' },
+    cancleText: { type: String, default: '取消' },
+    loading: { type: Boolean, default: false },
+    styles: Object as PropType<Record<string, any>>,
+    spec: { type: String, default: '提示' },
+    validator: {
+      type: [RegExp, Function] as PropType<PromptProps['validator'] | null>,
+      default: null
+    },
+    msg: String,
+    placeholderText: String,
+    onOk: {
+      type: Function as PropType<(val: string) => void>,
+      default: () => {}
+    },
+    onCancle: {
+      type: Function as PropType<() => void>,
+      default: () => {}
+    }
+  },
+
+  emits: ['update:value', 'on-ok', 'on-cancle'],
+
+  setup (props, { emit }) {
+    /** 内部状态 */
+    const visible = ref(props.value)
+    const texts = ref(props.text)
+    const message = ref(props.msg || '')
+    const placeholder = ref(props.placeholderText)
+    const buttonLoading = ref(false)
+
+    /** 同步外部 */
+    watch(() => props.value, val => {
+      visible.value = val
+    })
+
+    watch(() => props.text, val => {
+      texts.value = val
+    })
+
+    watch(() => props.loading, val => {
+      buttonLoading.value = val
+    })
+
+    /** 确定 */
+    const ok = () => {
+      let valid: boolean | string = true
+
+      if (props.validator) {
+        if (props.validator instanceof RegExp) {
+          valid = props.validator.test(texts.value)
+        } else if (typeof props.validator === 'function') {
+          valid = props.validator(texts.value)
+        }
+      }
+
+      if (valid !== true) {
+        message.value = typeof valid === 'string' ? valid : ''
+        return
+      }
+
+      emit('update:value', false)
+      props.onOk?.(texts.value)
+      emit('on-ok', texts.value)
+    }
+
+    /** 取消 */
+    const cancle = () => {
+      emit('update:value', false)
+      props.onCancle?.()
+      emit('on-cancle')
+    }
+
+    return () => (
+      <Modal
+        v-model={visible.value}
+        width={props.width}
+        title={props.title}
+        style={props.styles}
+        maskClosable={props.maskClosable}
+      >
+        {{
+          header: () => (
+            <div
+              class="dpzvc3-modal-header-inner ellipse-fir"
+              innerHTML={props.title}
+            />
+          ),
+
+          body: () => (
+            <div class="dpzvc3-prompt-body-inner">
+              <div class="dpzvc3-prompt-content">
+                <span class="dpzvc3-prompt-spec">
+                  {props.spec}
+                </span>
+
+                <TextBar
+                  v-model={texts.value}
+                  type="text"
+                  placeholder={placeholder.value}
+                />
+
+                {message.value && (
+                  <div
+                    class="dpzvc3-prompt-error"
+                    innerHTML={message.value}
+                  />
+                )}
+              </div>
+            </div>
+          ),
+
+          footer: () => (
+            <>
+              <DpButton
+                styles={{ background: '#ffffff', color: 'red' }}
+                onClick={ok}
+              >
+                {{
+                  'button-inner': () => props.okText
+                }}
+              </DpButton>
+
+              <DpButton
+                styles={{ background: '#ffffff', color: '#ccc' }}
+                onClick={cancle}
+              >
+                {{
+                  'button-inner': () => props.cancleText
+                }}
+              </DpButton>
+            </>
+          )
+        }}
+      </Modal>
+    )
+  }
+})

package/src/components/prompt/types.ts

@@ -0,0 +1,45 @@
+// src/components/Prompt/types.ts
+import type { CSSProperties } from 'vue'
+type PromptValidator =
+  | RegExp
+  | ((val: string) => boolean | string)
+
+export interface PromptProps {
+  value?: boolean
+  text?: string
+  closable?: boolean
+  maskClosable?: boolean
+  title?: string
+  width?: string
+  okText?: string
+  cancleText?: string
+  loading?: boolean
+  styles?: CSSProperties
+  spec?: string
+  validator?: PromptValidator | null
+  msg?: string
+  placeholderText?: string
+  onOk?: (val: string) => void
+  onCancle?: () => void
+}
+
+export type MergePromptOptions<T = PromptProps> = {
+    [K in keyof T]: T[K]
+} & {
+    onRemove?: () => void
+  showCancle?: boolean,
+    message?: string
+}
+
+
+// Prompt实例
+export type PromptInstance = {
+  remove: () => void,
+  info: (props: MergePromptOptions) => any
+}
+//开启
+export type DefaultPromptProps = {
+    show: (options: MergePromptOptions) => any,
+    remove: () => void,
+    // component: ComponentPublicInstance
+} | null

package/src/components/radioBox/index.ts

@@ -0,0 +1,34 @@
+/**
+ * Created by admin on 2017/4/19.
+ */
+// import RadioBox from './radiobox.vue'
+// import RadioBoxGroup from './radiobox-group.vue'
+
+// RadioBox.group = RadioBoxGroup
+// export default RadioBox
+import type { App } from 'vue'
+import RadioBox from './radiobox'
+import RadioBoxGroup from './radiobox-group'
+
+RadioBox.install = (app: App): void => {
+    app.component('RadioBox', RadioBox); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _RadioBox = RadioBox as IWithInstall<typeof RadioBox>;
+
+
+
+RadioBoxGroup.install = (app: App): void => {
+    app.component('RadioBoxGroup', RadioBoxGroup); // 注册全局组件
+}
+const _RadioBoxGroup = RadioBoxGroup as IWithInstall<typeof RadioBoxGroup>;
+
+export {
+    _RadioBox as RadioBox,
+    _RadioBoxGroup as RadioBoxGroup
+}
+// export {
+//     RadioBox,
+//     RadioBoxGroup
+// }
+export type { RadioBoxProps, RadioGroupProps } from './types'    

package/src/components/radioBox/radiobox-group.tsx

@@ -0,0 +1,66 @@
+// src/components/radio-group/RadioGroup.tsx
+import {
+  defineComponent,
+  computed,
+  watch,
+  provide,
+  ref,
+  PropType
+} from 'vue'
+import type { RadioGroupProps, RadioGroupProvide } from './types'
+export type { RadioGroupProps }
+
+const prefixCls = 'dpzvc3-radioBoxGroup'
+
+export default defineComponent({
+  name: 'DpzVcRadioGroup',
+
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean] as PropType<RadioGroupProps['modelValue']>,
+      default: ''
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  emits: ['update:modelValue', 'on-change', 'on-form-change'],
+
+  setup(props, { emit, slots }) {
+    const currentValue = ref<RadioGroupProps['modelValue']>(props.modelValue) as RadioGroupProvide['currentValue']
+
+    /** 提供给 Radio 子组件 */
+    const change = (val: RadioGroupProps['modelValue']) => {
+      currentValue.value = val!
+      emit('update:modelValue', val)
+      emit('on-change', val)
+      emit('on-form-change', val)
+    }
+
+    provide<RadioGroupProvide>('radioBoxGroup', {
+      currentValue,
+      change
+    })
+
+    /** 监听外部 v-model */
+    watch(
+      () => props.modelValue,
+      val => {
+        currentValue.value = val
+      }
+    )
+
+    const classes = computed(() => [
+      prefixCls,
+      { [`${prefixCls}-vertical`]: props.vertical }
+    ])
+
+    return () => (
+      <div class={classes.value}>
+        {slots.default?.()}
+      </div>
+    )
+  }
+})