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

- Using `defineComponent` to wrap component up for Volar support, this should close #841
- Also made changes for some typing
- Removed `merge.ts` since `Object.assign` are now supported natively

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>

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>

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
 

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) {
-    if (isDragging) return
-    document.onselectstart = () => false
-    document.ondragstart = () => false
 
-    document.onmousemove = moveFn
-    document.onmouseup = upFn
+  on(element, 'mousedown', function(event) {
+    if (isDragging) return
+    on(document, 'selectstart', noopFunc)
+    on(document, 'dragstart', noopFunc)
+    on(document, 'mousemove', moveFn)
+    on(document, 'mouseup', upFn)
+
     isDragging = true
 
     options.start?.(event)
-  }
+  })
 }

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),
     })
   },
-}
+})

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)

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

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>

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>

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>

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'

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>

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>
 

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 {
     }),
     )
   },
-}
+})

packages/select/src/select-dropdown.vue

@@ -8,12 +8,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, inject, onBeforeUnmount, onMounted, ref } from 'vue'
-import { selectKey } from './token'
+<script  lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  inject,
+  ref,
+} from 'vue'
 import { addResizeListener, removeResizeListener, ResizableElement } from '@element-plus/utils/resize-event'
+import {
+  selectKey,
+} from './token'
 
-export default {
+
+export default defineComponent({
   name: 'ElSelectDropdown',
 
   componentName: 'ElSelectDropdown',
@@ -47,5 +57,5 @@ export default {
       isMultiple,
     }
   },
-}
+})
 </script>

packages/table/src/filter-panel.vue

@@ -85,12 +85,8 @@
 </template>
 
 <script lang='ts'>
-import ElPopper from '@element-plus/popper'
-import { t } from '@element-plus/locale'
-import ElCheckbox from '@element-plus/checkbox'
-import ElCheckboxGroup from '@element-plus/checkbox-group'
-import ElScrollbar from '@element-plus/scrollbar'
 import {
+  defineComponent,
   ref,
   computed,
   getCurrentInstance,
@@ -98,8 +94,14 @@ import {
   WritableComputedRef,
   PropType,
 } from 'vue'
+import ElPopper from '@element-plus/popper'
+import { t } from '@element-plus/locale'
+import ElCheckbox from '@element-plus/checkbox'
+import ElCheckboxGroup from '@element-plus/checkbox-group'
+import ElScrollbar from '@element-plus/scrollbar'
+
 import { Store, TableColumnCtx, TableHeader } from './table.type'
-export default {
+export default defineComponent({
   name: 'ElTableFilterPanel',
   components: {
     ElCheckbox,
@@ -224,5 +226,5 @@ export default {
       showFilterPanel,
     }
   },
-}
+})
 </script>

packages/table/src/store/watcher.ts

@@ -1,5 +1,4 @@
 import { ref, getCurrentInstance, unref } from 'vue'
-import merge from '@element-plus/utils/merge'
 import {
   getKeysMap,
   getRowIdentity,
@@ -327,10 +326,10 @@ function useWatcher() {
       rightFixedTableHeader,
     } = instance.refs as AnyObject
     let panels = {}
-    if (tableHeader) panels = merge(panels, tableHeader.filterPanels)
-    if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels)
+    if (tableHeader) panels = Object.assign(panels, tableHeader.filterPanels)
+    if (fixedTableHeader) panels = Object.assign(panels, fixedTableHeader.filterPanels)
     if (rightFixedTableHeader)
-      panels = merge(panels, rightFixedTableHeader.filterPanels)
+      panels = Object.assign(panels, rightFixedTableHeader.filterPanels)
 
     const keys = Object.keys(panels)
     if (!keys.length) return

packages/time-picker/src/time-picker.ts

@@ -1,6 +1,6 @@
+import { defineComponent, h } from 'vue'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
-import { h } from 'vue'
 import { DEFAULT_FORMATS_TIME } from './common/constant'
 import Picker from './common/picker.vue'
 import TimePickPanel from './time-picker-com/panel-time-pick.vue'
@@ -8,7 +8,7 @@ import TimeRangePanel from './time-picker-com/panel-time-range.vue'
 
 dayjs.extend(customParseFormat)
 
-export default {
+export default defineComponent({
   name: 'ElTimePicker',
   install: null,
   props: {
@@ -29,4 +29,4 @@ export default {
       default: scopedProps => h(panel, scopedProps),
     })
   },
-}
+})

packages/transition/collapse-transition/index.vue

@@ -5,9 +5,10 @@
   </transition>
 </template>
 <script lang='ts'>
+import { defineComponent } from 'vue'
 import { addClass, removeClass } from '@element-plus/utils/dom'
 
-export default {
+export default defineComponent({
   name: 'ElCollapseTransition',
   setup() {
     return {
@@ -76,6 +77,6 @@ export default {
       },
     }
   },
-}
+})
 </script>
 

packages/tree/src/model/node.ts

@@ -1,6 +1,5 @@
 import { markNodeData, NODE_KEY } from './util'
 import TreeStore from './tree-store'
-import objectAssign from '@element-plus/utils/merge'
 
 import {
   TreeNodeOptions,
@@ -245,7 +244,7 @@ export default class Node {
           }
         }
       }
-      objectAssign(child, {
+      Object.assign(child, {
         parent: this,
         store: this.store,
       })
@@ -344,7 +343,7 @@ export default class Node {
 
   doCreateChildren(array: TreeNodeData[], defaultProps: TreeNodeLoadedDefaultProps = {}): void {
     array.forEach(item => {
-      this.insertChild(objectAssign({ data: item }, defaultProps), undefined, true)
+      this.insertChild(Object.assign({ data: item }, defaultProps), undefined, true)
     })
   }
 

packages/utils/merge.ts

@@ -1,14 +0,0 @@
-export default function objectAssign(target, ...agrvs) {
-  for (let i = 0, j = agrvs.length; i < j; i++) {
-    const source = agrvs[i] || {}
-    for (const prop in source) {
-      if (source.hasOwnProperty(prop)) {
-        const value = source[prop]
-        if (value !== undefined) {
-          target[prop] = value
-        }
-      }
-    }
-  }
-  return target
-}