From 2280dd5c5e6e9e5bb3a15ac4693f6079b6e5dcb6 Mon Sep 17 00:00:00 2001 From: jeremywu <591449570@qq.com> Date: Sun, 6 Dec 2020 23:52:47 +0800 Subject: [PATCH] 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 | 6 +-- packages/carousel/src/main.vue | 5 ++- packages/color-picker/src/color.ts | 42 ++++++++----------- packages/color-picker/src/draggable.ts | 33 +++++++++------ packages/date-picker/src/date-picker.ts | 5 ++- packages/dialog/src/useDialog.ts | 2 +- packages/directives/repeat-click/index.ts | 5 ++- .../menu/src/menu-collapse-transition.vue | 5 ++- packages/menu/src/menuItem.vue | 5 ++- packages/menu/src/submenu.vue | 5 ++- packages/popover/src/directive.ts | 3 ++ packages/radio/src/radio-button.vue | 6 +-- packages/radio/src/radio-group.vue | 5 ++- packages/scrollbar/src/bar.ts | 6 +-- packages/select/src/select-dropdown.vue | 20 ++++++--- packages/table/src/filter-panel.vue | 16 +++---- packages/table/src/store/watcher.ts | 7 ++-- packages/time-picker/src/time-picker.ts | 6 +-- .../transition/collapse-transition/index.vue | 5 ++- packages/tree/src/model/node.ts | 5 +-- packages/utils/merge.ts | 14 ------- 21 files changed, 106 insertions(+), 100 deletions(-) delete mode 100644 packages/utils/merge.ts diff --git a/packages/badge/src/index.vue b/packages/badge/src/index.vue index 44ede6e866..1caf2eb455 100644 --- a/packages/badge/src/index.vue +++ b/packages/badge/src/index.vue @@ -20,7 +20,7 @@ diff --git a/packages/carousel/src/main.vue b/packages/carousel/src/main.vue index dba9059143..cd099eda71 100644 --- a/packages/carousel/src/main.vue +++ b/packages/carousel/src/main.vue @@ -60,6 +60,7 @@ diff --git a/packages/color-picker/src/color.ts b/packages/color-picker/src/color.ts index b6fcb47439..179d1811ea 100644 --- 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 // -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 index fed311c9eb..5e2e97ce5b 100644 --- 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) { - 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) - } + }) } diff --git a/packages/date-picker/src/date-picker.ts b/packages/date-picker/src/date-picker.ts index 5a48dbbc35..44bb6c7053 100644 --- 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 index 5249b52ac9..4b80c4112a 100644 --- 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 index 24daa0538a..1a36d0582f 100644 --- 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 index dd0bfc6997..c6fd805ddf 100644 --- a/packages/menu/src/menu-collapse-transition.vue +++ b/packages/menu/src/menu-collapse-transition.vue @@ -4,9 +4,10 @@ diff --git a/packages/menu/src/menuItem.vue b/packages/menu/src/menuItem.vue index 6fa8a4be09..ecb3f1d09d 100644 --- a/packages/menu/src/menuItem.vue +++ b/packages/menu/src/menuItem.vue @@ -40,6 +40,7 @@ diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue index b64aabcd34..dd735ca123 100644 --- a/packages/menu/src/submenu.vue +++ b/packages/menu/src/submenu.vue @@ -90,6 +90,7 @@ diff --git a/packages/popover/src/directive.ts b/packages/popover/src/directive.ts index a0375e151a..db7c85122c 100644 --- 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 index 419cd0f8b7..3be9b90c72 100644 --- a/packages/radio/src/radio-button.vue +++ b/packages/radio/src/radio-button.vue @@ -37,10 +37,10 @@ diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue index 6ada51fbac..21ab9416d8 100644 --- a/packages/radio/src/radio-group.vue +++ b/packages/radio/src/radio-group.vue @@ -11,6 +11,7 @@ diff --git a/packages/scrollbar/src/bar.ts b/packages/scrollbar/src/bar.ts index 1f40b64cfc..1d364b75d7 100644 --- 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 { }), ) }, -} +}) diff --git a/packages/select/src/select-dropdown.vue b/packages/select/src/select-dropdown.vue index 58bfee7ad8..fe440b32df 100644 --- a/packages/select/src/select-dropdown.vue +++ b/packages/select/src/select-dropdown.vue @@ -8,12 +8,22 @@ - diff --git a/packages/table/src/filter-panel.vue b/packages/table/src/filter-panel.vue index 7bccc20ef1..3d4bdc41d5 100644 --- a/packages/table/src/filter-panel.vue +++ b/packages/table/src/filter-panel.vue @@ -85,12 +85,8 @@ diff --git a/packages/table/src/store/watcher.ts b/packages/table/src/store/watcher.ts index 44edcd0dcc..ade7fa682a 100644 --- a/packages/table/src/store/watcher.ts +++ b/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 diff --git a/packages/time-picker/src/time-picker.ts b/packages/time-picker/src/time-picker.ts index 40bfc23003..ce68a17b7d 100644 --- a/packages/time-picker/src/time-picker.ts +++ b/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), }) }, -} +}) diff --git a/packages/transition/collapse-transition/index.vue b/packages/transition/collapse-transition/index.vue index 790ad88d55..2bd2b6e27c 100644 --- a/packages/transition/collapse-transition/index.vue +++ b/packages/transition/collapse-transition/index.vue @@ -5,9 +5,10 @@ diff --git a/packages/tree/src/model/node.ts b/packages/tree/src/model/node.ts index ce7c97d69b..2bf6e86ef5 100644 --- a/packages/tree/src/model/node.ts +++ b/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) }) } diff --git a/packages/utils/merge.ts b/packages/utils/merge.ts deleted file mode 100644 index 117068eabc..0000000000 --- a/packages/utils/merge.ts +++ /dev/null @@ -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 -}