dpzvc3-ui 3.1.4 → 3.1.6

package/src/components/upload/upload.tsx

@@ -1,180 +0,0 @@
-// src/components/upload/upload.tsx
-import {
-  defineComponent,
-  ref,
-  computed,
-  watch,
-  getCurrentInstance,
-  PropType
-} from 'vue'
-import exifr from 'exifr'
-import MegaPixImage from '../../lib/MegaPixImage'
-import { JPEG } from '../../utils/util'
-import type { UploadProps } from './types'
-
-export type { UploadProps }
-
-const prefixCls = 'dpzvc3-upload'
-
-export default defineComponent({
-  name: 'Dpzvc3Upload',
-
-  props: {
-    multiple: {
-      type: Boolean as PropType<boolean>,
-      default: false
-    },
-    accept: {
-      type: String as PropType<string>,
-      default: 'image/*'
-    },
-    styles: {
-      type: Object as PropType<Record<string, any>>,
-      default: () => ({})
-    }
-  },
-
-  emits: ['on-change-file'],
-
-  setup(props: UploadProps, { emit, slots }) {
-    const { proxy } = getCurrentInstance()!
-
-    const files = ref<any[]>([])
-    const fileLength = ref(0)
-    const uploadRef = ref<HTMLInputElement | null>(null)
-
-    const classes = computed(() => [prefixCls])
-    const wrapperClasses = computed(() => [`${prefixCls}-wrapper`])
-
-    watch(files, (val) => {
-      emit('on-change-file', val)
-    })
-
-    const showPhoto = async (e: Event) => {
-      const input = e.target as HTMLInputElement
-      const fileList = input.files
-      if (!fileList || !proxy) return
-
-      (proxy as any).$Indicator?.snake({ text: '上传中' })
-
-      files.value = []
-      fileLength.value = fileList.length
-
-      for (let i = 0; i < fileList.length; i++) {
-        const file = fileList[i]
-        try {
-          const orientation = await exifr.orientation(file)
-
-          const dataURL = await new Promise<string>((resolve, reject) => {
-            const reader = new FileReader()
-            reader.readAsDataURL(file)
-            reader.onload = () => resolve(reader.result as string)
-            reader.onerror = reject
-          })
-
-          const img = new Image()
-          img.src = dataURL
-
-          await new Promise<void>((resolve) => {
-            img.onload = () => {
-              create(img, orientation)
-              resolve()
-            }
-          })
-        } catch (err) {
-          console.error('读取图片失败', err)
-        }
-      }
-
-      input.value = ''
-    }
-
-    const create = (file: HTMLImageElement, orientation?: number) => {
-      const img = new Image()
-      const mpImg = new MegaPixImage(file)
-
-      mpImg.render(img, { maxWidth: 600, quality: 0.8 })
-
-      img.onload = () => {
-        const canvas = document.createElement('canvas')
-        const ctx = canvas.getContext('2d')!
-        canvas.width = img.width
-        canvas.height = img.height
-        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
-
-        let data = canvas.toDataURL('image/jpeg', 0.8)
-
-        if (/iphone/i.test(navigator.userAgent) && orientation && orientation !== 1) {
-          rotateImg(img, orientation, canvas)
-          data = canvas.toDataURL('image/jpeg', 0.8)
-        }
-
-        if (/android/i.test(navigator.userAgent)) {
-          const encoder = new JPEG.JPEGEncoder()
-          data = encoder.encode(
-            ctx.getImageData(0, 0, canvas.width, canvas.height),
-            80
-          )
-        }
-
-        files.value.push({
-          base64: data,
-          clearBase64: data.slice(data.indexOf(',') + 1)
-        })
-
-        if (files.value.length === fileLength.value) {
-          (proxy as any).$Indicator?.remove()
-        }
-      }
-    }
-
-    const rotateImg = (
-      img: HTMLImageElement,
-      orientation: number,
-      canvas: HTMLCanvasElement
-    ) => {
-      const ctx = canvas.getContext('2d')!
-      const width = img.width
-      const height = img.height
-
-      switch (orientation) {
-        case 6:
-          canvas.width = height
-          canvas.height = width
-          ctx.rotate(Math.PI / 2)
-          ctx.drawImage(img, 0, -height)
-          break
-        case 8:
-          canvas.width = height
-          canvas.height = width
-          ctx.rotate(-Math.PI / 2)
-          ctx.drawImage(img, -width, 0)
-          break
-        case 3:
-          canvas.width = width
-          canvas.height = height
-          ctx.rotate(Math.PI)
-          ctx.drawImage(img, -width, -height)
-          break
-      }
-    }
-
-    return () => (
-      <div class={classes.value} style={props.styles}>
-        {slots.default ? (
-          slots.default()
-        ) : (
-          <div class={wrapperClasses.value}>图片上传</div>
-        )}
-
-        <input
-          ref={uploadRef}
-          type="file"
-          accept={props.accept}
-          multiple={props.multiple}
-          onChange={showPhoto}
-        />
-      </div>
-    )
-  }
-})

package/src/config/config.js

@@ -1,16 +0,0 @@
-/**
- * Created by yishide on 16/7/18.
- */
-
-const config = {
-  env: process.env.NODE_ENV,
-  PROJECT: 'dpzvc3',
-  VERSION: '3.0',
-  doc_title: '',
-  baseUrl: '',
-  isIPad: /ipad/i.test(window.navigator.userAgent),
-  isIphone: /iphone|ipad|ipod/i.test(window.navigator.userAgent),
-  isWechat: /MicroMessenger/i.test(window.navigator.userAgent),
-  isUCBrowser: /UCWEB|UCBrowser/i.test(window.navigator.userAgent)
-}
-export default config

package/src/directives/clickoutside.js

@@ -1,42 +0,0 @@
-const clickoutsideContext = '@@clickoutsideContext'
-
-export default {
-  beforeMount (el, binding) {
-    // document 事件处理函数
-    const documentHandler = (e) => {
-      // 如果点击元素本身或其子元素，则不触发
-      if (!el.contains(e.target)) {
-        // 调用传入的方法
-        if (typeof binding.value === 'function') {
-          binding.value(e)
-        }
-      }
-    }
-
-    // 保存上下文信息到 el 上，方便解绑
-    el[clickoutsideContext] = {
-      documentHandler,
-      event: binding.arg || 'click'
-    }
-
-    document.addEventListener(el[clickoutsideContext].event, documentHandler)
-  },
-
-  updated (el, binding) {
-    // 可以在更新时替换方法
-    // binding.value 已经是最新函数
-    el[clickoutsideContext].documentHandler = (e) => {
-      if (!el.contains(e.target) && typeof binding.value === 'function') {
-        binding.value(e)
-      }
-    }
-  },
-
-  unmounted (el) {
-    document.removeEventListener(
-      el[clickoutsideContext].event,
-      el[clickoutsideContext].documentHandler
-    )
-    delete el[clickoutsideContext]
-  }
-}

package/src/directives/tranferDom.js

@@ -1,66 +0,0 @@
-/**
- * Created by admin on 2017/5/5.
- */
-function getTarget (node) {
-  // eslint-disable-next-line no-void
-  if (node === void 0) {
-    node = document.body
-  }
-  if (node === true) { return document.body }
-  return node instanceof window.Node ? node : document.querySelector(node)
-}
-
-const directive = {
-  inserted (el, { value }, vnode) {
-    el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom'
-    const parentNode = el.parentNode
-    const home = document.createComment('')
-    let hasMovedOut = false
-
-    if (value !== false) {
-      parentNode.replaceChild(home, el) // moving out, el is no longer in the document
-      getTarget(value).appendChild(el) // moving into new place
-      hasMovedOut = true
-    }
-    if (!el.__transferDomData) {
-      el.__transferDomData = {
-        parentNode,
-        home,
-        target: getTarget(value),
-        hasMovedOut
-      }
-    }
-  },
-  componentUpdated (el, { value }) {
-    // need to make sure children are done updating (vs. `update`)
-    const ref$1 = el.__transferDomData
-    // homes.get(el)
-    const parentNode = ref$1.parentNode
-    const home = ref$1.home
-    const hasMovedOut = ref$1.hasMovedOut // recall where home is
-
-    if (!hasMovedOut && value) {
-      // remove from document and leave placeholder
-      parentNode.replaceChild(home, el)
-      // append to target
-      getTarget(value).appendChild(el)
-      el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) })
-    } else if (hasMovedOut && value === false) {
-      // previously moved, coming back home
-      parentNode.replaceChild(el, home)
-      el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) })
-    } else if (value) {
-      // already moved, going somewhere else
-      getTarget(value).appendChild(el)
-    }
-  },
-  unbind: function unbind (el, binding) {
-    el.className = el.className.replace('v-transfer-dom', '')
-    if (el.__transferDomData.hasMovedOut === true) {
-      el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
-    }
-    el.__transferDomData = null
-  }
-}
-
-export default directive

package/src/index.d.ts

@@ -1,131 +0,0 @@
-// src/types/index.d.ts
-
-/* ----------------------------------
- * 1️⃣ 按需导出组件 & props（给 TS import 用）
- * ---------------------------------- */
-export { default as Badge } from './components/badge'
-export type { BadgeProps } from './components/badge/types'
-
-export { default as Popup } from './components/popup'
-export type { PopupProps } from './components/popup/types'
-
-export { default as ActionSheet } from './components/actionSheet'
-export type { ActionSheetProps } from './components/actionSheet/types'
-
-export { default as Card } from './components/card'
-export type { CardProps } from './components/card/types'
-
-export { default as Rater } from './components/rater'
-export type { RaterProps } from './components/rater/types'
-
-export { default as Cell } from './components/cell'
-export type { CellProps } from './components/cell/types'
-
-export { default as CellSwipe } from './components/cellSwipe'
-export type { CellSwipeProps } from './components/cellSwipe/types'
-
-export { default as DpHeader } from './components/header'
-export type { HeaderProps } from './components/header/types'
-
-export { default as Spinner } from './components/spinner'
-export type { SpinnerProps } from './components/spinner/types'
-
-export { default as Swipe } from './components/swipe'
-export type { SwipeProps } from './components/swipe/types'
-
-export { default as DpButton } from './components/button'
-export type { ButtonProps } from './components/button/types'
-
-export { default as Picker } from './components/picker'
-export type { PickerProps } from './components/picker/types'
-
-export { default as SwitchBar } from './components/switchbar'
-export type { SwitchBarProps } from './components/switchbar/types'
-
-export { default as Tab } from './components/tab'
-export type { TabProps } from './components/tab/types'
-
-export { default as TextBar } from './components/Text'
-export type { TextBarProps } from './components/Text/types'
-
-export { default as Number } from './components/number'
-export type { NumberProps } from './components/number/types'
-
-export { default as ToTop } from './components/toTop'
-export type { ToTopProps } from './components/toTop/types'
-
-export { default as Upload } from './components/upload'
-export type { UploadProps } from './components/upload/types'
-
-export { default as SlideBar } from './components/slideBar'
-export type { SlideBarProps } from './components/slideBar/types'
-
-export { default as DpProgress } from './components/progress'
-export type { ProgressProps } from './components/progress/types'
-
-export { default as DpLoadMore } from './components/loadMore'
-export type { LoadmoreProps } from './components/loadMore/types'
-
-export { default as CheckBox, default as CheckBoxGroup } from './components/checkBox'
-export type { CheckBoxProps, CheckBoxGroupProps } from './components/checkBox/types'
-
-export { default as RadioBox, default as RadioBoxGroup } from './components/radioBox'
-export type { RadioBoxProps, RadioGroupProps } from './components/radioBox/types'
-
-/* ----------------------------------
- * 2️⃣ 全局组件声明（给 <template> 用）
- * ---------------------------------- */
-import type { App } from 'vue'
-import type { ModalInstance } from './components/modal/types'
-import type { MessageInstance } from './components/message/types'
-import type { IndicatorInstance } from './components/Indicator/types'
-import type { PromptInstance } from './components/prompt/types'
-
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $Modal: ModalInstance
-    $Message: MessageInstance
-    $Indicator: IndicatorInstance
-    $Prompt: PromptInstance
-  }
-
-  export interface GlobalComponents {
-    Badge: typeof import('./components/badge')['default']
-    Popup: typeof import('./components/popup')['default']
-    ActionSheet: typeof import('./components/actionSheet')['default']
-    Card: typeof import('./components/card')['default']
-    Rater: typeof import('./components/rater')['default']
-    Cell: typeof import('./components/cell')['default']
-    CellSwipe: typeof import('./components/cellSwipe')['default']
-    DpHeader: typeof import('./components/header')['default']
-    Spinner: typeof import('./components/spinner')['default']
-    Swipe: typeof import('./components/swipe')['default']
-    DpButton: typeof import('./components/button')['default']
-    Picker: typeof import('./components/picker')['default']
-    SwitchBar: typeof import('./components/switchbar')['default']
-    Tab: typeof import('./components/tab')['default']
-    TextBar: typeof import('./components/Text')['default']
-    Number: typeof import('./components/number')['default']
-    ToTop: typeof import('./components/toTop')['default']
-    Upload: typeof import('./components/upload')['default']
-    SlideBar: typeof import('./components/slideBar')['default']
-    DpProgress: typeof import('./components/progress')['default']
-    DpLoadMore: typeof import('./components/loadMore')['default']
-    CheckBox: typeof import('./components/checkBox')['CheckBox']
-    CheckBoxGroup: typeof import('./components/checkBox')['CheckBoxGroup']
-    RadioBox: typeof import('./components/radioBox')['RadioBox']
-    RadioBoxGroup: typeof import('./components/radioBox')['RadioBoxGroup']
-  }
-}
-
-/* ----------------------------------
- * 3️⃣ 默认导出整个组件库为 Vue 插件
- * ---------------------------------- */
-import type { Plugin } from 'vue'
-export const Dpzvc3UI: Plugin
-export default Dpzvc3UI
-
-/* ----------------------------------
- * 4️⃣ 保证这是 module
- * ---------------------------------- */
-export {}

package/src/index.ts

@@ -1,136 +0,0 @@
-/**
- * Vue 3 组件库入口 ts 版本
- */
-
-import type { App, Plugin } from 'vue'
-
-/* ========= 组件引入 ========= */
-import DpButton from './components/button'
-import { CheckBox, CheckBoxGroup } from './components/checkBox'
-import DpHeader from './components/header'
-import Message from './components/message'
-import Modal from './components/modal'
-import Picker from './components/picker'
-import { RadioBox, RadioBoxGroup } from './components/radioBox'
-import Swipe from './components/swipe'
-import Tab from './components/tab'
-import Prompt from './components/prompt'
-import SlideBar from './components/slideBar'
-import TextBar from './components/Text'
-import Upload from './components/upload'
-import ActionSheet from './components/actionSheet'
-import SwitchBar from './components/switchbar'
-import Rater from './components/rater'
-import Spinner from './components/spinner'
-import DpLoadMore from './components/loadMore'
-import Popup from './components/popup'
-import Indicator from './components/Indicator'
-import Progress from './components/progress'
-import ToTop from './components/toTop'
-import Cell from './components/cell'
-import CellSwipe from './components/cellSwipe'
-import Badge from './components/badge'
-import Card from './components/card'
-import Number from './components/number'
-
-/* ========= 组件集合 ========= */
-const components = {
-  DpButton,
-  CheckBox,
-  CheckBoxGroup,
-  RadioBox,
-  RadioBoxGroup,
-  DpHeader,
-  Picker,
-  Swipe,
-  Tab,
-  SlideBar,
-  TextBar,
-  Number,
-  Upload,
-  ActionSheet,
-  SwitchBar,
-  Rater,
-  Spinner,
-  DpLoadMore,
-  Popup,
-  DpProgress: Progress,
-  ToTop,
-  Cell,
-  CellSwipe,
-  Badge,
-  Card
-} as const
-
-/* ========= 服务组件 ========= */
-const services = {
-  Message,
-  Modal,
-  Prompt,
-  Indicator
-} as const
-
-/* ========= 遍历注册组件 ========= */
-Object.values(components).forEach((comp: any) => {
-  if (comp && !comp.install) {
-    comp.install = (app: App) => {
-      app.component(comp.name, comp)
-    }
-  }
-})
-
-/* ========= 遍历注册服务 ========= */
-Object.values(services).forEach((srv: any, idx) => {
-  if (srv && !srv.install) {
-    const key = Object.keys(services)[idx]
-    srv.install = (app: App) => {
-      app.config.globalProperties[`$${key}`] = srv
-    }
-  }
-})
-
-/* ========= 全量 install ========= */
-export const install: Plugin['install'] = (app: App) => {
-  Object.values(components).forEach((comp: any) => {
-    comp.install?.(app)
-  })
-  Object.values(services).forEach((srv: any) => {
-    srv.install?.(app)
-  })
-}
-
-/* ========= 按需导出 ========= */
-export {
-  DpButton,
-  CheckBox,
-  CheckBoxGroup,
-  DpHeader,
-  Message,
-  Modal,
-  Prompt,
-  Picker,
-  RadioBox,
-  RadioBoxGroup,
-  Swipe,
-  Tab,
-  SlideBar,
-  TextBar,
-  Upload,
-  ActionSheet,
-  SwitchBar,
-  Rater,
-  Spinner,
-  DpLoadMore,
-  Popup,
-  Indicator,
-  Progress,
-  ToTop,
-  Cell,
-  CellSwipe,
-  Badge,
-  Card
-}
-
-/* ========= 默认导出 ========= */
-const Dpzvc3UI: Plugin = { install }
-export default Dpzvc3UI