dpzvc3-ui 3.1.4 → 3.1.6

package/src/components/picker/area-picker/props.js

@@ -1,17 +0,0 @@
-/**
- * Created by admin on 2025/10/13.
- */
-export default {
-  props: {
-    addressValue: String,
-    styles: {
-      type: Object,
-      default: () => {
-      }
-    },
-    valueSeparator: {
-      type: String,
-      default: '/'
-    }
-  }
-}

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

@@ -1,191 +0,0 @@
-<template>
-  <div :class="classes">
-    <div class="header">
-      <div
-        class="left"
-        @click="cancle"
-      >
-        取消
-      </div>
-      <div
-        class="right"
-        @click="sure"
-      >
-        确定
-      </div>
-    </div>
-
-    <div class="main">
-      <PickerSlot
-        v-if="year"
-        :list="yearList"
-        :init-item="date.year.code"
-        target="year"
-        @change="change"
-      />
-      <PickerSlot
-        v-if="month"
-        :list="monthList"
-        :init-item="date.month.code"
-        target="month"
-        @change="change"
-      />
-      <PickerSlot
-        v-if="day"
-        :list="dayList"
-        :init-item="date.day.code"
-        target="day"
-        @change="change"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, computed, watch, inject } from 'vue'
-import PickerSlot from '../picker-slot.vue'
-import props from './props'
-
-const DAYS = {
-  30: [4, 6, 9, 11],
-  31: [1, 3, 5, 7, 8, 10, 12]
-}
-const prefixCls = 'dpzvc3-date-picker'
-
-export default defineComponent({
-  name: 'DatePicker',
-  components: { PickerSlot },
-  props: {
-    ...props,
-    dateValue: String,
-    year: [Boolean, Array],
-    month: [Boolean, Array],
-    day: [Boolean, Array],
-    valueSeparator: { type: String, default: '-' }
-  },
-  setup (props, { emit }) {
-    const { pickerOnOk, pickeronFail } = inject('DpzVc3Picker')
-    const currentValue = ref(props.dateValue || '')
-
-    const date = ref({
-      year: { code: new Date().getFullYear(), value: String(new Date().getFullYear()), target: 'year', index: 0 },
-      month: { code: new Date().getMonth() + 1, value: String(new Date().getMonth() + 1), target: 'month', index: 0 },
-      day: { code: new Date().getDate(), value: String(new Date().getDate()), target: 'day', index: 0 },
-      formatDate: ''
-    })
-
-    const classes = computed(() => [prefixCls])
-
-    const yearList = computed(() => {
-      if (!props.year) return []
-      let from = 1900
-      let to = new Date().getFullYear()
-      if (Array.isArray(props.year)) {
-        from = props.year[0] ?? from
-        to = props.year[1] ?? to
-      }
-      const list = []
-      for (let i = from, index = 0; i <= to; i++, index++) {
-        list.push({ code: i, value: String(i), target: 'year', index })
-      }
-      return list
-    })
-
-    const monthList = computed(() => {
-      if (!props.month) return []
-      let from = 1
-      let to = 12
-      if (Array.isArray(props.month)) {
-        from = props.month[0] ?? from
-        to = props.month[1] ?? to
-      }
-      const list = []
-      for (let i = from, index = 0; i <= to; i++, index++) {
-        list.push({ code: i, value: String(i), target: 'month', index })
-      }
-      return list
-    })
-
-    const dayList = computed(() => {
-      if (!props.day) return []
-      let from = 1
-      let to = 31
-
-      const month = Number(date.value.month.value)
-      const year = Number(date.value.year.code)
-
-      if (DAYS[30].includes(month)) to = 30
-      else if (DAYS[31].includes(month)) to = 31
-      else {
-        // 二月
-        if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) to = 29
-        else to = 28
-      }
-
-      if (Array.isArray(props.day)) {
-        from = props.day[0] ?? from
-        to = props.day[1] ?? to
-      }
-
-      const list = []
-      for (let i = from, index = 0; i <= to; i++, index++) {
-        list.push({ code: i, value: String(i), target: 'day', index })
-      }
-      return list
-    })
-
-    watch(() => props.dateValue, (val) => {
-      currentValue.value = val
-      initVal()
-    }, { immediate: true })
-
-    function initVal () {
-      if (!currentValue.value) return
-      const [y = '', m = '', d = ''] = currentValue.value.split(props.valueSeparator)
-      if (props.year) date.value.year = { ...date.value.year, code: Number(y), value: y }
-      if (props.month) date.value.month = { ...date.value.month, code: Number(m), value: m }
-      if (props.day) date.value.day = { ...date.value.day, code: Number(d), value: d }
-    }
-
-    function cancle () {
-      // emit('cancle')
-      pickeronFail()
-    }
-
-    function sure () {
-      date.value.formatDate = [date.value.year.value, date.value.month.value, date.value.day.value]
-        .filter(Boolean)
-        .join(props.valueSeparator)
-      // emit('sure', date.value)
-      pickerOnOk(date.value)
-    }
-
-    function change (target, current) {
-      if (target === 'year') date.value.year = { ...date.value.year, ...current }
-      if (target === 'month') date.value.month = { ...date.value.month, ...current }
-      if (target === 'day') date.value.day = { ...date.value.day, ...current }
-
-      date.value.formatDate = [date.value.year.value, date.value.month.value, date.value.day.value]
-        .filter(Boolean)
-        .join(props.valueSeparator)
-
-      emit('change', target, current)
-    }
-
-    return {
-      classes,
-      date,
-      yearList,
-      monthList,
-      dayList,
-      cancle,
-      sure,
-      change
-    }
-  }
-})
-</script>
-
-<style lang="less">
-
-</style>

package/src/components/picker/date-picker/props.js

@@ -1,24 +0,0 @@
-/**
- * Created by yishide on 2025/9/13.
- */
-export default {
-  props: {
-    dateValue: String,
-    year: {
-      type: [Boolean, Array],
-      default: true
-    },
-    month: {
-      type: [Boolean, Array],
-      default: true
-    },
-    day: {
-      type: [Boolean, Array],
-      default: true
-    },
-    valueSeparator: {
-      type: String,
-      default: '/'
-    }
-  }
-}

package/src/components/picker/index.ts

@@ -1,12 +0,0 @@
-/**
- * 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/normal-picker/normal-picker.vue

@@ -1,120 +0,0 @@
-<template>
-  <div :class="classes">
-    <div class="header">
-      <div
-        class="left"
-        @click="cancle"
-      >
-        取消
-      </div>
-      <div
-        class="right"
-        @click="sure"
-      >
-        确定
-      </div>
-    </div>
-    <div class="main">
-      <PickerSlot
-        v-for="(item, key) in shadowList"
-        :key="item.target"
-        :target="item.target"
-        :init-item="initItems[key]"
-        :list="item.list"
-        @change="change"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, computed, watch, inject } from 'vue'
-import PickerSlot from '../picker-slot.vue'
-
-const prefixCls = 'dpzvc3-normal-picker'
-
-export default defineComponent({
-  name: 'NormalPicker',
-  components: { PickerSlot },
-  props: {
-    list: { type: Array, default: () => [] },
-    initArr: { type: Array, default: () => [] }
-  },
-  setup (props, { emit }) {
-    const { pickerOnOk, pickeronFail } = inject('DpzVc3Picker')
-
-    /** 初始化选中项 */
-    const initItems = ref(
-      props.initArr.length
-        ? [...props.initArr]
-        : props.list.map(item => item.list?.[0]?.code ?? '')
-    )
-
-    const normal = ref({})
-
-    /**
-     * ⚠️ 关键修复点：
-     * - 不修改 props.list
-     * - 返回全新对象
-     */
-    const shadowList = computed(() => {
-      return props.list.map(item => {
-        const list = (item.list || []).map((child, index) => ({
-          code: child.code ?? child.value,
-          value: child.value,
-          target: child.target ?? item.target,
-          index
-        }))
-
-        return {
-          ...item,
-          list
-        }
-      })
-    })
-
-    const classes = computed(() => [prefixCls])
-
-    watch(
-      () => props.initArr,
-      val => {
-        initItems.value =
-          val.length > 0
-            ? [...val]
-            : props.list.map(item => item.list?.[0]?.code ?? '')
-      }
-    )
-
-    function cancle () {
-      pickeronFail()
-    }
-
-    function sure () {
-      pickerOnOk(normal.value)
-    }
-
-    function change (target, current) {
-      const index = shadowList.value.findIndex(i => i.target === target)
-      if (index !== -1) {
-        initItems.value[index] = current.code
-      }
-
-      normal.value = {
-        ...normal.value,
-        [target]: current
-      }
-
-      emit('scroll', current)
-    }
-
-    return {
-      classes,
-      shadowList,
-      initItems,
-      cancle,
-      sure,
-      change
-    }
-  }
-})
-</script>

package/src/components/picker/normal-picker/props.js

@@ -1,20 +0,0 @@
-/**
- * Created by admin on 2025/11/14.
- */
-export default {
-  props: {
-    list: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    initArr: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-
-  }
-}

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

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