fix(project): fix/exporting-fix-for-volar (element-plus#849)

- Using `defineComponent` to wrap component up for Volar support, this should close element-plus#841 - Also made changes for some typing - Removed `merge.ts` since `Object.assign` are now supported natively
liangduoqiang · Dec 6, 2020 · 2280dd5 · 2280dd5
1 parent e8a9074
commit 2280dd5
Show file tree

Hide file tree

Showing 21 changed files with 105 additions and 99 deletions.
diff --git a/packages/badge/src/index.vue b/packages/badge/src/index.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { computed } from 'vue'
+import { computed, defineComponent } from 'vue'
 
 interface IBadgeProps {
   value: string | number
@@ -33,7 +33,7 @@ interface IBadgeProps {
 interface IBadgeSetups {
   content: number | string
 }
-export default {
+export default defineComponent({
   name: 'ElBadge',
   props: {
     value: {
@@ -69,5 +69,5 @@ export default {
       content,
     }
   },
-}
+})
 </script>
diff --git a/packages/carousel/src/main.vue b/packages/carousel/src/main.vue
@@ -60,6 +60,7 @@
 
 <script lang="ts">
 import {
+  defineComponent,
   reactive,
   computed,
   ref,
@@ -76,7 +77,7 @@ import {
 } from '@element-plus/utils/resize-event'
 import { ICarouselProps, CarouselItem, InjectCarouselScope } from './carousel'
 
-export default {
+export default defineComponent({
   name: 'ElCarousel',
   props: {
     initialIndex: {
@@ -386,5 +387,5 @@ export default {
       root,
     }
   },
-}
+})
 </script>
diff --git a/packages/color-picker/src/color.ts b/packages/color-picker/src/color.ts
@@ -1,4 +1,4 @@
-const hsv2hsl = function(hue, sat, val) {
+const hsv2hsl = function(hue: number, sat: number, val: number) {
   return [
     hue,
     (sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,
@@ -8,39 +8,39 @@ const hsv2hsl = function(hue, sat, val) {
 
 // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
 // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
-const isOnePointZero = function(n) {
+const isOnePointZero = function(n: unknown) {
   return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1
 }
 
-const isPercentage = function(n) {
+const isPercentage = function(n: unknown) {
   return typeof n === 'string' && n.indexOf('%') !== -1
 }
 
 // Take input from [0, n] and return it as [0, 1]
-const bound01 = function(value: number | string, max) {
+const bound01 = function(value: number | string, max: number | string) {
   if (isOnePointZero(value)) value = '100%'
 
   const processPercent = isPercentage(value)
-  value = Math.min(max, Math.max(0, parseFloat(value + '')))
+  value = Math.min((max as number), Math.max(0, parseFloat(value + '')))
 
   // Automatically convert percentage into number
   if (processPercent) {
-    value = parseInt((value * max) + '', 10) / 100
+    value = parseInt((value * (max as number)) + '', 10) / 100
   }
 
   // Handle floating point rounding errors
-  if ((Math.abs(value - max) < 0.000001)) {
+  if ((Math.abs(value - (max as number)) < 0.000001)) {
     return 1
   }
 
   // Convert into [0, 1] range if it isn't already
-  return (value % max) / parseFloat(max)
+  return (value % (max as number)) / parseFloat(max as string)
 }
 
 const INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' }
 
 const toHex = function({ r, g, b }) {
-  const hexOne = function(value) {
+  const hexOne = function(value: number) {
     value = Math.min(Math.round(value), 255)
     const high = Math.floor(value / 16)
     const low = value % 16
@@ -54,7 +54,7 @@ const toHex = function({ r, g, b }) {
 
 const HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 }
 
-const parseHexChannel = function(hex) {
+const parseHexChannel = function(hex: string) {
   if (hex.length === 2) {
     return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1])
   }
@@ -153,23 +153,15 @@ export interface Options {
 }
 
 export default class Color {
-  private _hue: number
-  private _saturation: number
-  private _value: number
-  private _alpha: number
-  public enableAlpha: boolean
-  public format: string
-  public value: string
+  private _hue = 0
+  private _saturation = 100
+  private _value = 100
+  private _alpha = 100
+  public enableAlpha = false
+  public format = 'hex'
+  public value = ''
   public selected?: boolean
   constructor(options?: Options) {
-    this._hue = 0
-    this._saturation = 100
-    this._value = 100
-    this._alpha = 100
-
-    this.enableAlpha = false
-    this.format = 'hex'
-    this.value = ''
 
     options = options || {} as Options
 

diff --git a/packages/color-picker/src/draggable.ts b/packages/color-picker/src/draggable.ts
@@ -1,4 +1,5 @@
 import isServer from '@element-plus/utils/isServer'
+import { on, off } from '@element-plus/utils/dom'
 let isDragging = false
 
 export declare interface IOptions {
@@ -7,30 +8,36 @@ export declare interface IOptions {
   end?: (event: Event) => void
 }
 
+const noopFunc = () => false
+
 export default function(element: HTMLElement, options: IOptions) {
   if (isServer) return
-  const moveFn = function(event) {
+
+  const moveFn = function(event: Event) {
     options.drag?.(event)
   }
-  const upFn = function(event) {
-    document.onmousemove = null
-    document.onmouseup = null
-    document.onselectstart = null
-    document.ondragstart = null
+
+  const upFn = function(event: Event) {
+
+    off(document, 'mousemove',moveFn)
+    off(document, 'mouseup', upFn)
+    off(document, 'selectstart', noopFunc)
+    off(document, 'dragstart', noopFunc)
 
     isDragging = false
 
     options.end?.(event)
   }
-  element.onmousedown = function(event) {
+
+  on(element, 'mousedown', function(event) {
     if (isDragging) return
-    document.onselectstart = () => false
-    document.ondragstart = () => false
+    on(document, 'selectstart', noopFunc)
+    on(document, 'dragstart', noopFunc)
+    on(document, 'mousemove', moveFn)
+    on(document, 'mouseup', upFn)
 
-    document.onmousemove = moveFn
-    document.onmouseup = upFn
     isDragging = true
 
     options.start?.(event)
-  }
+  })
 }
diff --git a/packages/date-picker/src/date-picker.ts b/packages/date-picker/src/date-picker.ts
@@ -1,3 +1,4 @@
+import { defineComponent } from 'vue'
 import { DEFAULT_FORMATS_DATE, DEFAULT_FORMATS_DATEPICKER } from '@element-plus/time-picker'
 import { CommonPicker } from '@element-plus/time-picker'
 import DatePickPanel from './date-picker-com/panel-date-pick.vue'
@@ -31,7 +32,7 @@ const getPanel = function(type) {
   return DatePickPanel
 }
 
-export default {
+export default defineComponent({
   name: 'ElDatePicker',
   install: null,
   props: {
@@ -51,4 +52,4 @@ export default {
       default: scopedProps => h(getPanel(props.type), scopedProps),
     })
   },
-}
+})
diff --git a/packages/dialog/src/useDialog.ts b/packages/dialog/src/useDialog.ts
@@ -15,7 +15,7 @@ export const CLOSED_EVENT = 'closed'
 export const OPENED_EVENT = 'opened'
 export { UPDATE_MODEL_EVENT }
 
-export default function(props: UseDialogProps, ctx: SetupContext) {
+export default function useDialog(props: UseDialogProps, ctx: SetupContext) {
   const visible = ref(false)
   const closed = ref(false)
   const dialogRef = ref(null)

diff --git a/packages/directives/repeat-click/index.ts b/packages/directives/repeat-click/index.ts
@@ -1,9 +1,10 @@
 import { on, once } from '@element-plus/utils/dom'
 
+import type { ObjectDirective } from 'vue'
 export default {
   beforeMount(el, binding) {
     let interval = null
-    let startTime
+    let startTime: number
     const handler = () => binding.value && binding.value()
     const clear = () => {
       if (Date.now() - startTime < 100) {
@@ -21,4 +22,4 @@ export default {
       interval = setInterval(handler, 100)
     })
   },
-}
+} as ObjectDirective
diff --git a/packages/menu/src/menu-collapse-transition.vue b/packages/menu/src/menu-collapse-transition.vue
@@ -4,9 +4,10 @@
   </transition>
 </template>
 <script lang="ts">
+import { defineComponent } from 'vue'
 import { addClass, removeClass, hasClass } from '@element-plus/utils/dom'
 
-export default {
+export default defineComponent({
   name: 'ElMenuCollapseTransition',
   setup() {
     return {
@@ -51,5 +52,5 @@ export default {
       },
     }
   },
-}
+})
 </script>
diff --git a/packages/menu/src/menuItem.vue b/packages/menu/src/menuItem.vue
@@ -40,6 +40,7 @@
 </template>
 <script lang="ts">
 import {
+  defineComponent,
   computed,
   onMounted,
   onBeforeUnmount,
@@ -50,7 +51,7 @@ import { IMenuItemProps, RootMenuProvider, SubMenuProvider } from './menu'
 import useMenu from './useMenu'
 import ElTooltip from '@element-plus/tooltip'
 
-export default {
+export default defineComponent({
   name: 'ElMenuItem',
 
   componentName: 'ElMenuItem',
@@ -160,5 +161,5 @@ export default {
       onMouseLeave,
     }
   },
-}
+})
 </script>
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
@@ -90,6 +90,7 @@
 <script lang="ts">
 import mitt from 'mitt'
 import {
+  defineComponent,
   computed,
   ref,
   provide,
@@ -105,7 +106,7 @@ import { ISubmenuProps, RootMenuProvider, SubMenuProvider } from './menu'
 import useMenu from './useMenu'
 import ElPopper from '@element-plus/popper'
 
-export default {
+export default defineComponent({
   name: 'ElSubmenu',
   componentName: 'ElSubmenu',
   components: { ElCollapseTransition, ElPopper },
@@ -428,5 +429,5 @@ export default {
       verticalTitleRef,
     }
   },
-}
+})
 </script>
diff --git a/packages/popover/src/directive.ts b/packages/popover/src/directive.ts
@@ -22,6 +22,9 @@ export default {
   mounted(el, binding, vnode) {
     attachEvents(el, binding, vnode)
   },
+  updated(el, binding, vnode) {
+    attachEvents(el, binding, vnode)
+  },
 } as ObjectDirective
 
 export const VPopover = 'popover'
diff --git a/packages/radio/src/radio-button.vue b/packages/radio/src/radio-button.vue
@@ -37,10 +37,10 @@
   </label>
 </template>
 <script lang="ts">
-import { computed } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useRadio, useRadioAttrs } from './useRadio'
 
-export default {
+export default defineComponent({
   name: 'ElRadioButton',
 
   props: {
@@ -106,5 +106,5 @@ export default {
       activeStyle,
     }
   },
-}
+})
 </script>
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
@@ -11,6 +11,7 @@
 
 <script lang="ts">
 import {
+  defineComponent,
   nextTick,
   computed,
   provide,
@@ -30,7 +31,7 @@ import radioGroupKey from './token'
 import type { PropType } from 'vue'
 import type { ElFormItemContext } from '@element-plus/form'
 
-export default {
+export default defineComponent({
   name: 'ElRadioGroup',
 
   componentName: 'ElRadioGroup',
@@ -127,6 +128,6 @@ export default {
       radioGroup,
     }
   },
-}
+})
 </script>
 
diff --git a/packages/scrollbar/src/bar.ts b/packages/scrollbar/src/bar.ts
@@ -1,8 +1,8 @@
+import { defineComponent, h, computed, ref, getCurrentInstance, onUnmounted, inject, Ref } from 'vue'
 import { on, off } from '@element-plus/utils/dom'
 import { renderThumbStyle, BAR_MAP } from './util'
-import { h, computed, ref, getCurrentInstance, onUnmounted, inject, Ref } from 'vue'
 
-export default {
+export default defineComponent({
   name: 'Bar',
 
   props: {
@@ -83,4 +83,4 @@ export default {
     }),
     )
   },
-}
+})