dpzvc3-ui 3.1.4 → 3.1.6

package/src/components/modal/modal.tsx

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

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

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

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

@@ -1,13 +0,0 @@
-// 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/area-picker/area-picker.vue

@@ -1,230 +0,0 @@
-<template>
-  <div :class="classes">
-    <div class="header">
-      <div
-        class="left"
-        @click="cancle"
-      >
-        取消
-      </div>
-      <div class="title">
-        请选择区域
-      </div>
-      <div
-        class="right"
-        @click="sure"
-      >
-        确定
-      </div>
-    </div>
-
-    <div class="main">
-      <PickerSlot
-        :list="provinces"
-        :init-item="province.code"
-        target="province"
-        @change="change"
-      />
-      <PickerSlot
-        :list="citys"
-        :init-item="city.code"
-        target="city"
-        @change="change"
-      />
-      <PickerSlot
-        :list="districts"
-        :init-item="district.code"
-        target="district"
-        @change="change"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, computed, watch, inject } from 'vue'
-import CHINA_AREA from 'china-area-data'
-import PickerSlot from '../picker-slot'
-import props from './props'
-
-const prefixCls = 'dpzvc3-picker'
-const rootCode = '86'
-
-export default defineComponent({
-  name: 'AreaPicker',
-  components: { PickerSlot },
-  props: {
-    ...props,
-    addressValue: String,
-    valueSeparator: {
-      type: String,
-      default: '-'
-    }
-  },
-  setup (props, { emit }) {
-    const { pickerOnOk, pickeronFail } = inject('DpzVc3Picker')
-    const currentValue = ref(props.addressValue || '')
-
-    const province = ref({
-      value: '北京市',
-      code: '110000',
-      target: 'province',
-      index: 0
-    })
-
-    const city = ref({
-      value: '市辖区',
-      code: '110100',
-      target: 'city',
-      index: 0
-    })
-
-    const district = ref({
-      value: '东城区',
-      code: '110101',
-      target: 'district',
-      index: 0
-    })
-
-    const classes = computed(() => [prefixCls])
-
-    // 计算省、市、区列表
-    const provinces = computed(() => filter('province'))
-    const citys = computed(() => filter('city', province.value))
-    const districts = computed(() => filter('district', city.value))
-
-    watch(
-      () => props.addressValue,
-      (val) => {
-        currentValue.value = val
-        initVal()
-      },
-      { immediate: true }
-    )
-
-    function initVal () {
-      if (!currentValue.value) return
-      const [provinceName, cityName, districtName] = currentValue.value.split(
-        props.valueSeparator
-      )
-
-      // 省份
-      const provincesData = CHINA_AREA[rootCode]
-      if (provincesData) {
-        Object.keys(provincesData).forEach((item) => {
-          if (provinceName === item || provinceName === provincesData[item]) {
-            province.value.value = provincesData[item]
-            province.value.code = item
-          }
-        })
-      }
-
-      // 城市
-      const cityData = CHINA_AREA[province.value.code]
-      if (cityData) {
-        Object.keys(cityData).forEach((item) => {
-          if (cityName === item || cityName === cityData[item]) {
-            city.value.value = cityData[item]
-            city.value.code = item
-          }
-        })
-      }
-
-      // 区县
-      const districtData = CHINA_AREA[city.value.code]
-      if (districtData) {
-        Object.keys(districtData).forEach((item) => {
-          if (districtName === item || districtName === districtData[item]) {
-            district.value.value = districtData[item]
-            district.value.code = item
-          }
-        })
-      }
-    }
-
-    function filter (target, val = {}) {
-      switch (target) {
-      case 'province': {
-        const data = CHINA_AREA[rootCode]
-        if (!data) return []
-        return Object.keys(data).map((item, index) => ({
-          code: item,
-          value: data[item],
-          target,
-          index
-        }))
-      }
-      case 'city':
-      case 'district': {
-        const listData = CHINA_AREA[val.code]
-        if (!listData) {
-          if (target) {
-            if (target === 'city') city.value = { value: '', code: '', target, index: 0 }
-            if (target === 'district') district.value = { value: '', code: '', target, index: 0 }
-          }
-          return []
-        }
-        return Object.keys(listData).map((item, index) => ({
-          code: item,
-          value: listData[item],
-          target,
-          index
-        }))
-      }
-      }
-    }
-
-    function change (target, current) {
-      if (target === 'province') province.value = { ...province.value, ...current }
-      if (target === 'city') city.value = { ...city.value, ...current }
-      if (target === 'district') district.value = { ...district.value, ...current }
-
-      emit('update:addressValue', [
-        province.value.value,
-        city.value.value,
-        district.value.value
-      ].filter(Boolean).join(props.valueSeparator))
-
-      emit('change', {
-        province: { code: province.value.code, name: province.value.value },
-        city: { code: city.value.code, name: city.value.value },
-        district: { code: district.value.code, name: district.value.value }
-      })
-    }
-
-    function sure () {
-      // emit('sure', {
-      //   province: { code: province.value.code, name: province.value.value },
-      //   city: { code: city.value.code, name: city.value.value },
-      //   district: { code: district.value.code, name: district.value.value },
-      //   formArea: [province.value.value, city.value.value, district.value.value].filter(Boolean).join(props.valueSeparator)
-      // })
-      pickerOnOk({
-        province: { code: province.value.code, name: province.value.value },
-        city: { code: city.value.code, name: city.value.value },
-        district: { code: district.value.code, name: district.value.value },
-        formArea: [province.value.value, city.value.value, district.value.value].filter(Boolean).join(props.valueSeparator)
-      })
-    }
-
-    function cancle () {
-      // emit('cancle')
-      pickeronFail()
-    }
-
-    return {
-      classes,
-      province,
-      city,
-      district,
-      provinces,
-      citys,
-      districts,
-      currentValue,
-      change,
-      sure,
-      cancle
-    }
-  }
-})
-</script>