dpzvc3-ui 3.0.0

package/src/components/picker/picker-slot.vue

@@ -0,0 +1,217 @@
+<template>
+  <div
+    :class="classes"
+    :style="getStyles"
+  >
+    <ul
+      :class="draggingClass"
+      :style="{ transform: `translate3d(0,${translateY}px,0)` }"
+      @touchstart="_onTouchStart"
+      @touchmove="_onTouchMove"
+      @touchend="_onTouchEnd"
+    >
+      <!-- 上方占位 -->
+      <li :style="{ height: height + 'px' }" />
+      <li :style="{ height: height + 'px' }" />
+
+      <!-- 数据列表 -->
+      <li
+        v-for="(item, index) in list"
+        :key="index"
+        :class="{
+          current: index === current.index,
+          level_1_1: index - current.index === 1,
+          level_2_1: index - current.index === 2,
+          level_3_1: index - current.index >= 3,
+          level_1: index - current.index === -1,
+          level_2: index - current.index === -2,
+          level_3: index - current.index <= -3
+        }"
+        :style="{ textAlign: align, height: height + 'px' }"
+      >
+        {{ item.value }}
+      </li>
+
+      <!-- 下方占位 -->
+      <li :style="{ height: height + 'px' }" />
+      <li :style="{ height: height + 'px' }" />
+    </ul>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch, onMounted } from 'vue'
+
+export default defineComponent({
+  name: 'PickerSlot',
+  props: {
+    styles: Object,
+    list: {
+      type: Array,
+      default: () => []
+    },
+    align: {
+      type: String,
+      default: 'center'
+    },
+    target: {
+      type: String,
+      required: true
+    },
+    initItem: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  setup (props, { emit }) {
+    const count = 7
+    const height = ref(35)
+    const current = ref({})
+    const translateY = ref(0)
+    const currentTranslateY = ref(0)
+    const dragging = ref(false)
+    const startX = ref(0)
+    const startY = ref(0)
+    const delta = ref({ x: 0, y: 0 })
+
+    const classes = computed(() => ['dpzvc3-picker-slot'])
+    const draggingClass = computed(() => ({
+      'dpzvc3-picker-slot-dragging': dragging.value
+    }))
+
+    const wrapperHeight = computed(() => count * height.value)
+
+    const getStyles = ref({})
+    const updateStyles = () => {
+      const styles = { ...props.styles }
+      if (styles.height) {
+        height.value = styles.height / count
+      }
+      getStyles.value = { ...styles, height: wrapperHeight.value + 'px' }
+    }
+    const getSelectedIndex = () => {
+      const maxIndex = props.list.length - 1
+      let index = -Math.round(currentTranslateY.value / height.value)
+      index = Math.max(index, 0)
+      index = Math.min(index, maxIndex)
+      return index
+    }
+    // 初始化样式
+    updateStyles()
+
+    watch(
+      () => props.styles,
+      () => {
+        updateStyles()
+      },
+      { deep: true }
+    )
+
+    // list 数据变化
+    watch(
+      () => props.list,
+      (list) => {
+        if (list.length) {
+          let index = getSelectedIndex()
+          if (index > list.length - 1) index = 0
+          current.value = { ...current.value, ...list[index] }
+          emit('change', props.target, current.value)
+        } else {
+          translateY.value = 0
+        }
+      },
+      { immediate: true }
+    )
+
+    const setSelectedItem = (index) => {
+      translateY.value = currentTranslateY.value = -index * height.value
+      try {
+        if (
+          current.value.code === props.list[index].code &&
+          current.value.value === props.list[index].value
+        ) {
+          return
+        }
+        current.value = {
+          code: props.list[index].code,
+          value: props.list[index].value,
+          target: props.target,
+          index
+        }
+      } catch (e) {
+        current.value = { code: '', value: '', target: props.target, index: '' }
+      }
+      emit('change', props.target, current.value)
+    }
+
+    const scrollToItem = (code) => {
+      props.list.forEach((item, i) => {
+        if (item.code === code) {
+          currentTranslateY.value = translateY.value
+          setSelectedItem(i)
+        }
+      })
+    }
+
+    const _onTouchStart = (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      currentTranslateY.value = translateY.value
+      startX.value = e.touches[0].pageX
+      startY.value = e.touches[0].pageY
+      dragging.value = true
+    }
+
+    const _onTouchMove = (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      delta.value.x = e.touches[0].pageX - startX.value
+      delta.value.y = e.touches[0].pageY - startY.value
+      translateY.value = delta.value.y + currentTranslateY.value
+    }
+
+    const _onTouchEnd = (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      dragging.value = false
+      currentTranslateY.value = translateY.value
+      const index = getSelectedIndex()
+      setSelectedItem(index)
+    }
+    // initItem 变化
+    watch(
+      () => props.initItem,
+      (value) => {
+        if (value === '' || value === null) {
+          current.value = { code: '', target: props.target, index: '', value: '' }
+          emit('change', props.target, current.value)
+        } else {
+          scrollToItem(value)
+        }
+      },
+      { immediate: true }
+    )
+
+    onMounted(() => {
+      if (!props.initItem && props.initItem !== 0) {
+        current.value = { code: '', target: props.target, index: '', value: '' }
+        emit('change', props.target, current.value)
+      } else {
+        scrollToItem(props.initItem)
+      }
+    })
+    return {
+      classes,
+      draggingClass,
+      translateY,
+      height,
+      current,
+      _onTouchStart,
+      _onTouchMove,
+      _onTouchEnd,
+      getStyles,
+      getSelectedIndex
+    }
+  }
+})
+</script>

package/src/components/picker/picker.vue

@@ -0,0 +1,111 @@
+<template>
+  <Popup
+    v-model="visible"
+    height="284px"
+    position="bottom"
+  >
+    <div :class="wrapperClass">
+      <div :class="contentClass">
+        <AreaPicker
+          v-if="type === 'AreaPicker'"
+          :styles="styles"
+          :value-separator="valueSeparator"
+          :address-value="addressValue"
+          @ok="onOk"
+          @fail="onFail"
+        />
+
+        <DatePicker
+          v-if="type === 'DatePicker'"
+          :year="year"
+          :month="month"
+          :day="day"
+          :value-separator="valueSeparator"
+          :date-value="dateValue"
+          @ok="onOk"
+          @fail="onFail"
+        />
+
+        <NormalPicker
+          v-if="type === 'NormalPicker'"
+          :list="list"
+          :init-arr="initArr"
+          @ok="onOk"
+          @fail="onFail"
+          @scroll="onNormalChange"
+        />
+      </div>
+    </div>
+  </Popup>
+</template>
+
+<script>
+import { defineComponent, ref, watch, computed, provide } 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 areaProps from './area-picker/props'
+import dateProps from './date-picker/props'
+import normalProps from './normal-picker/props'
+
+const LIST = ['DatePicker', 'AreaPicker', 'NormalPicker']
+const prefixCls = 'dpzvc3-picker'
+
+export default defineComponent({
+  name: 'Dpzvc3Picker',
+  components: { Popup, AreaPicker, DatePicker, NormalPicker },
+  mixins: [areaProps, dateProps, normalProps],
+  props: {
+    type: {
+      type: String,
+      default: 'DatePicker',
+      validator: (val) => LIST.includes(val)
+    },
+    modelValue: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'sure', 'cancle', 'normal-change'],
+  setup (props, { emit }) {
+    const visible = ref(props.value)
+    watch(() => props.modelValue, (val) => {
+      visible.value = val
+    })
+
+    watch(visible, (val) => {
+      emit('update:value', val)
+    })
+    const wrapperClass = computed(() => [`${prefixCls}-wrapper`])
+    const contentClass = computed(() => [`${prefixCls}-content`])
+
+    const onOk = (val) => {
+      emit('update:modelValue', false)
+      emit('sure', val)
+    }
+
+    const onFail = () => {
+      emit('update:modelValue', false)
+      emit('cancle')
+    }
+
+    const onNormalChange = (val) => {
+      emit('normal-change', val)
+    }
+    provide('DpzVc3Picker', {
+      pickerOnOk: onOk,
+      pickeronFail: onFail,
+      pickerOnNormalChange: onNormalChange
+    })
+    return {
+      visible,
+      wrapperClass,
+      contentClass,
+      onOk,
+      onFail,
+      onNormalChange
+    }
+  }
+})
+</script>

package/src/components/popup/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2025/11/19.
+ */
+import Popup from './popup'
+export default Popup

package/src/components/popup/popup.vue

@@ -0,0 +1,91 @@
+<template>
+  <div :class="classes">
+    <transition name="dpzvc3-ani-fade">
+      <div
+        v-if="mask && visible"
+        class="dpzvc3-popup-mask"
+        @click="close"
+        @touchmove.prevent
+      />
+    </transition>
+    <transition :name="'dpzvc3-ani-' + position">
+      <div
+        v-if="visible"
+        :class="popupClasses"
+        :style="contentStyle"
+      >
+        <slot />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { ref, computed, watch } from 'vue'
+
+const prefixCls = 'dpzvc3-popup'
+
+export default {
+  name: 'Dpzvc3Popup',
+  props: {
+    modelValue: { // Vue 3 v-model 默认绑定
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: String,
+      default: 'bottom',
+      validator: (val) => ['top', 'bottom', 'center'].includes(val)
+    },
+    showMask: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: [Number, String],
+      default: '100%'
+    },
+    height: {
+      type: [Number, String]
+    },
+    styles: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup (props, { emit }) {
+    const visible = ref(props.modelValue)
+    const mask = ref(props.showMask)
+
+    // 同步 props -> 状态
+    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 {
+      visible,
+      mask,
+      classes,
+      popupClasses,
+      contentStyle,
+      close
+    }
+  }
+}
+</script>

package/src/components/progress/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by yishide on 2025/09/26.
+ */
+import Progress from './progress'
+export default Progress

package/src/components/progress/progress.vue

@@ -0,0 +1,86 @@
+<template>
+  <div
+    :class="classes"
+    :style="styles"
+  >
+    <slot name="left" />
+
+    <div :class="outerClass">
+      <div
+        :class="runawayClass"
+        :style="runawayStyle"
+      />
+      <div
+        :class="progressClass"
+        :style="progressStyle"
+      />
+    </div>
+
+    <slot name="right" />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch } from 'vue'
+
+const prefixCls = 'dpzvc3-progress'
+
+export default defineComponent({
+  name: 'DpzVcProgress',
+
+  props: {
+    styles: {
+      type: Object,
+      default: () => ({})
+    },
+    modelValue: {
+      type: [Number, String],
+      default: 0
+    },
+    barHeight: {
+      type: [String, Number],
+      default: 3
+    }
+  },
+
+  setup (props) {
+    /** 当前进度宽度 */
+    const width = ref(Number(props.modelValue) || 0)
+
+    /** 同步外部 value */
+    watch(
+      () => props.modelValue,
+      val => {
+        const num = Number(val) || 0
+        width.value = num >= 100 ? 100 : num
+      },
+      { immediate: true }
+    )
+
+    /** classes */
+    const classes = computed(() => [prefixCls])
+    const outerClass = computed(() => [`${prefixCls}-outer`])
+    const runawayClass = computed(() => [`${prefixCls}-runaway`])
+    const progressClass = computed(() => [`${prefixCls}-progress`])
+
+    /** styles */
+    const runawayStyle = computed(() => ({
+      height: `${props.barHeight}px`
+    }))
+
+    const progressStyle = computed(() => ({
+      height: `${props.barHeight}px`,
+      width: `${width.value}%`
+    }))
+
+    return {
+      classes,
+      outerClass,
+      runawayClass,
+      progressClass,
+      runawayStyle,
+      progressStyle
+    }
+  }
+})
+</script>

package/src/components/prompt/confirm.js

@@ -0,0 +1,91 @@
+/**
+ * Vue 3 prompt confirm
+ * 使用 createVNode + render
+ */
+
+import { createVNode, render } from 'vue'
+import Prompt from './prompt.vue'
+
+// let seed = 0
+
+Prompt.newInstance = (properties = {}) => {
+  // const id = `dpzvc3-prompt-${seed++}`
+  const instance = null
+  // 容器
+  const container = document.createElement('div')
+  // container.id = id
+  document.body.appendChild(container)
+  // 组件 props（默认值）
+  const props = {
+    value: false,
+    text: '',
+    placeholderText: '请输入',
+    width: '70%',
+    title: '',
+    okText: '确定',
+    cancleText: '取消',
+    loading: false,
+    showCancle: true,
+    spec: '',
+    message: '',
+    validator: null,
+    onOk: () => {},
+    onCancle: () => {},
+    ...properties
+  }
+
+  const updateVNode = () => {
+    // vnode
+    // console.log(props, 'props')
+    const vnode = createVNode(Prompt, {
+      ...props,
+      // 给动态挂载组件绑定 update:value 事件
+      'onUpdate:value': (val) => {
+        // 当子组件 emit('update:value', false) 时执行
+        if (val === false) {
+          vnode.component.props.value = false // 关闭内部显示
+          destroy() // 销毁 DOM
+        }
+      },
+      onRemove: destroy
+    })
+    // 挂载
+    render(vnode, container)
+    // instance = vnode.component
+  }
+  // 销毁
+  const destroy = () => {
+    props.value = false
+    setTimeout(() => {
+      render(null, container)
+    }, 300)
+  }
+
+  return {
+    /**
+     * 显示
+     */
+    show (options = {}) {
+      // alert(1)
+      Object.keys(options).forEach(key => {
+        props[key] = options[key]
+      })
+      // console.log(instance.props, 'props')
+      props.value = true
+      updateVNode()
+    },
+
+    /**
+     * 关闭
+     */
+    remove () {
+      props.value = false
+
+      destroy()
+    },
+
+    component: instance
+  }
+}
+
+export default Prompt

package/src/components/prompt/index.js

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