dpzvc3-ui 3.0.6 → 3.1.0

package/src/components/upload/upload.tsx

@@ -0,0 +1,180 @@
+// 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/index.ts

@@ -0,0 +1,175 @@
+/**
+ * Vue 3 组件库入口 ts 版本
+ */
+
+import type { App } 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'
+
+/* ========= Installable 泛型 ========= */
+// export type Installable<T> = T & {
+//   install?: (app: App) => void
+// }
+export type Components = {
+  [K in keyof typeof _components]: any//Installable<typeof _components[K]>
+}
+export const components: Components = {} as Components
+/* ========= 组件集合 ========= */
+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
+}
+/* typeof _component在ts输出
+ // {
+//   VButton: typeof VButton
+//   CheckBox: typeof CheckBox
+//   CheckBoxGroup: typeof CheckBoxGroup
+// }
+如果直接写[K in keyof _components]报错Type '_components' is not a type.  原因就是 _components 是 值，不是类型。
+  •	keyof 只能作用在 类型上。
+  •	所以必须先用 typeof 变成类型：keyof typeof _components。
+*/
+/* ========= 生成 Installable 类型组件集合 ========= */
+// export const components: {
+//   [K in keyof typeof _components]: Installable<typeof _components[K]>
+// } = {} as any
+// 遍历给组件加 install
+Object.keys(_components).forEach((key) => {
+  // const component = _components[key as keyof typeof _components] as Installable<
+  //   typeof _components[keyof typeof _components]
+  //   >
+   const component = _components[key as keyof typeof _components]
+  if (component && !component.install) {
+    component.install = (app: App) => {
+      // console.log(key, component, '----component----')
+      app.component(key, component)
+    }
+  }
+  components[key as keyof typeof _components] = component
+  // console.log(components, '----components----')
+})
+/* ========= 服务组件 ========= */
+export const services: Record<string, any> = {
+  Message,
+  Modal,
+  Prompt,
+  Indicator
+}
+
+Object.keys(services).forEach((key) => {
+  const service = services[key]
+  if (service && !service.install) {
+    service.install = (app: App) => {
+      app.config.globalProperties[`$${key}`] = service
+    }
+  }
+})
+
+/* ========= 全量 install ========= */
+export const install = (app: App) => {
+  if (!app) {
+    console.warn(
+      'dpzvc3 install: app is undefined, ensure you are using Vue 3 createApp'
+    )
+    return
+  }
+  // 注册组件
+  Object.values(components).forEach((comp) => {
+    if (comp.install) {
+      comp.install(app)
+    }
+  })
+
+  // 注册服务
+  Object.values(services).forEach((srv) => {
+    if (srv.install) {
+      srv.install(app)
+    }
+  })
+}
+
+/* ========= 按需导出 ========= */
+export {
+  DpButton,
+  CheckBox,
+  CheckBoxGroup,
+  DpHeader,
+  Message,
+  Modal,
+  Prompt,
+  Picker,
+  RadioBox,
+  Swipe,
+  Tab,
+  SlideBar,
+  TextBar,
+  Upload,
+  ActionSheet,
+  SwitchBar,
+  Rater,
+  Spinner,
+  DpLoadMore,
+  Popup,
+  Indicator,
+  Progress,
+  ToTop,
+  Cell,
+  CellSwipe,
+  Badge,
+  Card
+}
+
+/* ========= 默认导出 ========= */
+export default {
+  install
+}

package/src/lib/MegaPixImage.js

@@ -116,6 +116,7 @@ class MegaPixImage {
     }
     if (!srcImage.naturalWidth && !srcImage.naturalHeight) {
       this.imageLoadListeners = []
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
       const _this = this
       srcImage.onload = srcImage.onerror = function () {
         const listeners = _this.imageLoadListeners

package/src/{main.js → main.ts}

@@ -4,8 +4,10 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import App from './components/app.vue'
 import Routers from './router'
 import Config from './config/config'
+// import dpzvc3 from 'dpzvc3-ui'
 import dpzvc3 from './index'
-
+// import { count } from './utils/test'
+// console.log(count)
 // 1️⃣ 创建 app
 const app = createApp(App)
 
@@ -19,7 +21,7 @@ app.config.globalProperties.$Config = Config
 const router = createRouter({
   history: createWebHashHistory(), // 等价于 Vue 2 的 mode: 'hash'
   routes: Routers,
-  scrollBehavior () {
+  scrollBehavior() {
     return { top: 0 }
   }
 })

package/src/shims-vue.d.ts

@@ -0,0 +1,37 @@
+// shims-vue.d.ts
+import type { App } from 'vue'
+// import type { BadgeProps } from '@/components/badge'
+// import type { PopupProps } from '@/components/popup'
+// import type { ActionSheetProps } from '@/components/actionSheet'
+// import type { CardProps } from '@/components/card'
+// import type { RaterProps } from '@/components/rater'
+declare module '*.vue' {
+  import { defineComponent } from 'vue'
+
+  // 默认导出的 Vue 组件类型
+  const component: ReturnType<typeof defineComponent> & { install?(app: App): void }
+  export default component
+}
+
+// 全局组件类型声明，让 TS 和 Volar 能在模板里检查 props
+// declare module 'vue' {
+//   export interface GlobalComponents {
+//     Badge: typeof import('@/components/badge')['default'] & { __props: BadgeProps },
+//     Popup: typeof import('@/components/popup')['default'] & { __props: PopupProps },
+//     ActionSheet: typeof import('@/components/actionSheet')['default'] & { __props: ActionSheetProps },
+//     Card: typeof import('@/components/actionSheet')['default'] & { __props: CardProps },
+//     Rater: typeof import('@/components/rater')['default'] & { __props: RaterProps },
+//   }
+// }
+
+// JSX 支持（如果你用 TSX/JSX，这块保留）
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+    interface ElementChildrenAttribute {
+      children: {}
+    }
+  }
+}

package/src/styles/components/radioBox.less

@@ -9,7 +9,11 @@
 //  }
 //}
 @import "../base/variable.less";
-
+.dpzvc3-radioBoxGroup.dpzvc3-radioBoxGroup-vertical {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
 .dpzvc3-radioBoxGroup.dpzvc3-radioBoxGroup-vertical .dpzvc3-radiobox {
   margin-right: 0;
   margin-bottom: 8px;

package/src/styles/components/rater.less

@@ -0,0 +1,16 @@
+.dpzvc3-rater {
+  &-star {
+    color: #e9e9e9;
+    position: relative;
+    display: inline-block;
+    > span {
+      position: absolute;
+      height: 100%;
+      content: '★';
+      left: 0;
+      top: 0;
+      color: #e9e9e9;
+      overflow: hidden;
+    }
+  }
+}

package/src/styles/index.less

@@ -8,6 +8,7 @@
 @import "utils/1px.less";
 
 // components
+@import "components/rater.less";
 @import "components/header.less";
 @import "components/actionsheet.less";
 @import "components/message.less";

package/src/types/index.d.ts

@@ -0,0 +1,157 @@
+// 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'
+
+// // Modal
+// export { default as Modal } from '../components/modal/modal'
+// // 实例调用类型定义
+// export type { ModalInstance } from '../components/modal/types'
+// // Modal 组件的 props 类型定义
+// export type { ModalProps } from '../components/modal/types'
+
+/* ----------------------------------
+ * 2️⃣ 全局组件声明（给 <template> 用）
+ * ---------------------------------- */
+import type { App } from 'vue'
+import type { BadgeProps } from '../components/badge/types'
+import type { PopupProps } from '../components/popup/types'
+import type { ActionSheetProps } from '../components/actionSheet/types'
+import type { CardProps } from '../components/card/types'
+import type { RaterProps } from '../components/rater/types'
+import type { CellProps } from '../components/cell/types'
+import type { CellSwipeProps } from '../components/cellSwipe/types'
+import type { HeaderProps } from '../components/header/types'
+import type { SpinnerProps } from '../components/spinner/types'
+import type { SwipeProps } from '../components/swipe/types'
+import type { ButtonProps } from '../components/button/types'
+import type { PickerProps } from '../components/picker/types'
+import type { SwitchBarProps } from '../components/switchbar/types'
+import type { TabProps } from '../components/tab/types'
+import type { TextBarProps } from '../components/Text/types'
+import type { NumberProps } from '../components/Number/types'
+import type { ToTopProps } from '../components/toTop/types'
+import type { UploadProps } from '../components/upload/types'
+import type { SlideBarProps } from '../components/slideBar/types'
+import type { ModalInstance } from '../components/modal/types'
+import type { MessageInstance } from '../components/message/types'
+import type { IndicatorInstance } from '../components/Indicator/types'
+import type { ProgressProps } from '../components/progress/types'
+import type { LoadmoreProps } from '../components/loadMore/types'
+import type { CheckBoxProps } from '../components/checkBox/types'
+import type { CheckBoxGroupProps } from '../components/checkBox/types'
+import type { RadioBoxProps } from '../components/radioBox/types'
+import type { RadioGroupProps } from '../components/radioBox/types'
+import type { PromptInstance } from '../components/Prompt/types'
+// src/shims-vue.d.ts
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $Modal: ModalInstance
+    $Message: MessageInstance
+    $Indicator: IndicatorInstance
+    $Prompt: PromptInstance
+  }
+  export interface GlobalComponents {
+    // Badge: typeof import('../components/badge')['default'] & {
+    //   install(app: App): void
+    //   // __props: BadgeProps
+    // },
+    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'],
+    CheckBoxGroup: typeof import('../components/checkBox')['CheckBoxGroup'],
+    CheckBox: typeof import('../components/checkBox')['CheckBox'],
+    RadioBoxGroup: typeof import('../components/radioBox')['RadioBoxGroup'],
+    RadioBox: typeof import('../components/radioBox')['RadioBox'],
+  }
+}
+
+/* ----------------------------------
+ * 3️⃣ 必须存在，保证这是 module
+ * ---------------------------------- */
+export {}

package/src/types/js-shims.d.ts

@@ -0,0 +1,36 @@
+// 声明所有 JS 模块，让 TS 知道它们的类型
+declare module '*.js' {
+  const content: any
+  export default content
+}
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<any, any, any>
+  export default component
+}
+
+// 单独声明一些特殊 JS 类
+declare module '../../utils/util' {
+  export function randomStr(length?: number): string
+  export function scrollTop(el: HTMLElement | Window, to?: number, duration?: number): void
+  export const JPEG: any
+}
+
+declare module '../../lib/lib' {
+  const rafTimeout: any
+  export default rafTimeout
+}
+
+declare module '../../lib/MegaPixImage' {
+  const MegaPixImage: any
+  export default MegaPixImage
+}
+
+// 针对 JPEGEncoder 类的情况
+declare module '../../utils/JPEGEncoder' {
+  class JPEGEncoder {
+    encode(data: any): any
+  }
+  const JPEG: JPEGEncoder
+  export default JPEG
+}

package/src/utils/test.ts

@@ -0,0 +1,2 @@
+// src/test.ts
+export const count: number = 123