element-plus - npm Package Compare versions

Comparing version 1.0.1-alpha.9 to 1.0.1-alpha.10

package.json

 {
   "name": "element-plus",
-  "version": "1.0.1-alpha.9",
+  "version": "1.0.1-alpha.10",
   "scripts": {
@@ -9,3 +9,3 @@ "cz": "npx git-cz",
     "bootstrap": "yarn && npx lerna bootstrap",
-    "build": "yarn bootstrap && yarn build:lib && yarn build:theme && yarn build:esm && yarn build:esm-bundle && yarn build:utils",
+    "build": "yarn bootstrap && yarn build:lib && yarn build:theme",
     "build:lib": "rimraf lib && webpack --config ./build/webpack.config.js",
@@ -122,3 +122,2 @@ "build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js",
   "main": "lib/index.js",
-  "module": "lib/index.esm.js",
   "typings": "types/index.d.ts",
@@ -125,0 +124,0 @@ "unpkg": "lib/index.js",

packages/autocomplete/__tests__/autocomplete.spec.ts

@@ -53,8 +53,12 @@ import { mount } from '@vue/test-utils'
   test('triggerOnFocus', async () => {
-    const wrapper = _mount()
+    const fetchSuggestions = jest.fn()
+    const wrapper = _mount({
+      debounce: 10,
+      fetchSuggestions,
+    })
 
     await wrapper.setProps({ triggerOnFocus: false })
     await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    expect(wrapper.findAll('li').length).toBe(0)
+    await sleep(30)
+    expect(fetchSuggestions).toHaveBeenCalledTimes(0)
 
@@ -65,4 +69,4 @@ await wrapper.find('input').trigger('blur')
     await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    expect(wrapper.findAll('li').length).toBe(4)
+    await sleep(30)
+    expect(fetchSuggestions).toHaveBeenCalledTimes(1)
   })
@@ -92,9 +96,4 @@
   test('popperAppendToBody', async () => {
-    const wrapper = _mount()
-
-    await wrapper.setProps({ popperAppendToBody: true })
-    expect(wrapper.find('.el-popper').exists()).toBe(false)
-
-    await wrapper.setProps({ popperAppendToBody: false })
-    expect(wrapper.find('.el-popper').exists()).toBe(true)
+    _mount({ popperAppendToBody: false })
+    expect(document.body.querySelector('.el-popper__mask')).toBeNull()
   })
@@ -105,3 +104,3 @@
     const wrapper = _mount({
-      debounce: 500,
+      debounce: 10,
       fetchSuggestions,
@@ -117,6 +116,6 @@ })
     expect(fetchSuggestions).toHaveBeenCalledTimes(0)
-    await sleep(600)
+    await sleep(30)
     expect(fetchSuggestions).toHaveBeenCalledTimes(1)
     await wrapper.find('input').trigger('focus')
-    await sleep(600)
+    await sleep(30)
     expect(fetchSuggestions).toHaveBeenCalledTimes(2)
@@ -127,7 +126,10 @@ })
     const wrapper = _mount()
+    const target = wrapper.findComponent({ ref: 'autocomplete' }).vm as any
 
+    await target.select({ value: 'Go', tag: 'go' })
+    expect(wrapper.vm.state).toBe('Go')
+
     await wrapper.setProps({ valueKey: 'tag' })
-    await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    await wrapper.findAll('li')[1].trigger('click')
+
+    await target.select({ value: 'Go', tag: 'go' })
     expect(wrapper.vm.state).toBe('go')
@@ -140,8 +142,9 @@ })
       fetchSuggestions: NOOP,
+      debounce: 10,
     })
     await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    expect(wrapper.find('.el-icon-loading').exists()).toBe(true)
+    await sleep(30)
+    expect(document.body.querySelector('.el-icon-loading')).toBeDefined()
     await wrapper.setProps({ hideLoading: true })
-    expect(wrapper.find('.el-icon-loading').exists()).toBe(false)
+    expect(document.body.querySelector('.el-icon-loading')).toBeNull()
   })
@@ -153,2 +156,3 @@
         selectWhenUnmatched: true,
+        debounce: 10,
       },
@@ -158,3 +162,3 @@ })
     wrapper.vm.handleKeyEnter()
-    await sleep(500)
+    await sleep(30)
     expect(wrapper.vm.highlightedIndex).toBe(-1)
@@ -164,13 +168,17 @@ })
   test('highlightFirstItem', async () => {
-    const wrapper = _mount({ highlightFirstItem: false })
+    const wrapper = _mount({
+      highlightFirstItem: false,
+      debounce: 10,
+    })
 
     await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    expect(wrapper.find('.highlighted').exists()).toBe(false)
+    await sleep(30)
+    expect(document.body.querySelector('.highlighted')).toBeNull()
 
     await wrapper.setProps({ highlightFirstItem: true })
+
     await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    expect(wrapper.find('.highlighted').text()).toBe('Java')
+    await sleep(30)
+    expect(document.body.querySelector('.highlighted')).toBeDefined()
   })
 })

packages/dialog/__tests__/dialog.spec.ts

@@ -100,3 +100,3 @@ import { nextTick } from 'vue'
         props: {
-          mask: false,
+          modal: false,
         },
@@ -103,0 +103,0 @@ })

packages/dialog/src/index.ts

 import {
+  createVNode,
   defineComponent,
+  Fragment,
   Transition,
@@ -8,6 +10,11 @@ Teleport,
   vShow,
+  toDisplayString,
+  renderSlot,
+  withCtx,
 } from 'vue'
 
 import { TrapFocus } from '@element-plus/directives'
+import { stop } from '@element-plus/utils/dom'
 import { isValidWidthUnit } from '@element-plus/utils/validators'
+import { PatchFlags, renderBlock, renderIf } from '@element-plus/utils/vnode'
 
@@ -26,2 +33,9 @@ import ElOverlay from '@element-plus/overlay'
 
+const closeIcon = createVNode('i', { class: 'el-dialog__close el-icon el-icon-close' }, null, PatchFlags.HOISTED)
+const headerKls = { class: 'el-dialog__header' }
+const bodyKls = { class: 'el-dialog__body' }
+const titleKls = { class: 'el-dialog__title' }
+const footerKls = { class: 'el-dialog__footer', key: 0 }
+
+
 export default defineComponent({
@@ -119,23 +133,21 @@ name: 'ElDialog',
     const { $slots } = this
-    const closeBtn = this.showClose
-      ? h(
-        'button',
-        {
-          type: 'button',
-          class: 'el-dialog__headerbtn',
-          ariaLabel: 'close',
-          onClick: this.handleClose,
-        },
-        h('i', { class: 'el-dialog__close el-icon el-icon-close' }),
-      )
-      : null
-    const header = h(
-      'div',
+    const closeBtn = renderIf(this.showClose, 'button',
       {
-        class: 'el-dialog__header',
+        type: 'button',
+        class: 'el-dialog__headerbtn',
+        ariaLabel: 'close',
+        onClick: this.handleClose,
       },
+      [closeIcon],
+      PatchFlags.PROPS,
+      ['onClick'],
+    )
+
+    const header = createVNode(
+      'div',
+      headerKls,
       [
-        $slots.header
-          ? $slots.header()
-          : h('span', { class: 'el-dialog__title' }, this.title),
+        renderSlot($slots, 'header', {}, () =>
+          [createVNode('span', titleKls, toDisplayString(this.title), PatchFlags.TEXT)],
+        ),
         closeBtn,
@@ -145,15 +157,11 @@ ],
 
-    const body = h(
+    const body = createVNode(
       'div',
-      {
-        class: 'el-dialog__body',
-      },
-      $slots.default?.(),
+      bodyKls,
+      [renderSlot($slots, 'default')],
     )
 
-    const footer = $slots.footer
-      ? h('div', { class: 'el-dialog__footer' }, $slots.footer())
-      : null
+    const footer = renderIf(!!$slots.footer, 'div', footerKls, [renderSlot($slots, 'footer')])
 
-    const dialog = h(
+    const dialog = createVNode(
       'div',
@@ -174,5 +182,7 @@ {
         style: this.style,
-        onClick: (e: MouseEvent) => e.stopPropagation(),
+        onClick: stop,
       },
       [header, body, footer],
+      PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS,
+      ['ariaLabel', 'onClick'],
     )
@@ -182,3 +192,3 @@
     const overlay = withDirectives(
-      h(
+      createVNode(
         ElOverlay,
@@ -191,31 +201,29 @@ {
         {
-          default: () => trappedDialog,
+          default: withCtx(() => [trappedDialog]),
         },
-      ),
-      [[vShow, this.visible]],
-    )
+        PatchFlags.PROPS,
+        ['mask', 'onClick', 'zIndex'],
+      ), [[vShow, this.visible]])
 
-    const renderer = h(
+
+    const renderer = createVNode(
       Transition,
       {
         name: 'dialog-fade',
-        onAfterEnter: this.afterEnter,
-        onAfterLeave: this.afterLeave,
+        'onAfter-enter': this.afterEnter,
+        'onAfter-leave': this.afterLeave,
       },
       {
-        default: () => overlay,
+        default: () => [overlay],
       },
+      PatchFlags.PROPS,
+      ['onAfter-enter', 'onAfter-leave'],
     )
 
-    if (this.appendToBody) {
-      return h(
-        Teleport,
-        {
-          to: 'body',
-        },
-        renderer,
-      )
-    }
-    return renderer
+    return renderBlock(Fragment, null, [
+      this.appendToBody
+        ? h(Teleport, { key: 0, to: 'body' }, [renderer])
+        : h(Fragment, { key: 1 }, [renderer]),
+    ])
   },
 })

packages/element-plus/index.ts

@@ -37,2 +37,3 @@ import type { App } from 'vue'
 import ElInput from '@element-plus/input'
+import ElLoading from '@element-plus/loading'
 import ElTransfer from '@element-plus/transfer'
@@ -95,2 +96,3 @@ import ElDialog from '@element-plus/dialog'
   ElInput,
+  ElLoading,
   ElTransfer,
@@ -153,2 +155,3 @@ ElDialog,
   ElInput(app)
+  ElLoading(app)
   ElTransfer(app)
@@ -155,0 +158,0 @@ ElDialog(app)

packages/element-plus/package.json

@@ -28,2 +28,4 @@ {
     "@element-plus/icon": "^0.0.0",
+    "@element-plus/input": "^0.0.0",
+    "@element-plus/input-number": "^0.0.0",
     "@element-plus/layout": "^0.0.0",
@@ -30,0 +32,0 @@ "@element-plus/link": "^0.0.0",

packages/notification/index.ts

@@ -6,1 +6,3 @@ import { App } from 'vue'
 }
+
+export { Notify }

packages/popper/src/renderers/index.ts

@@ -1,4 +0,4 @@
-export { default as renderMask } from './mask'
+export { default as Mask } from './mask'
 export { default as renderPopper } from './popper'
 export { default as renderTrigger } from './trigger'
 export { default as renderArrow } from './arrow'

packages/popper/src/renderers/mask.ts

@@ -1,3 +0,2 @@
-import { h, withDirectives } from 'vue'
-import type { VNode } from 'vue'
+import { withDirectives, renderSlot, createVNode } from 'vue'
 import { ClickOutside } from '@element-plus/directives'
@@ -7,13 +6,57 @@
   hide: () => void
+  manualMode: boolean
 }
 
-export default function renderMask(popper: VNode, { hide }: IRenderMaskProps): VNode {
-  return withDirectives(
-    h('div', {
-      class: 'el-popper__mask',
-    }, popper),
-    // marking excludes as any due to the current version of Vue's definition file
-    // DOES NOT support types other than string as arguments
-    [[ClickOutside, hide]],
-  )
+const _hoist1 = {
+  key: 0,
+  class: 'el-popper__mask',
 }
+
+const _hoist2 = {
+  key: 1,
+  class: 'el-popper__mask',
+}
+
+// export default function renderMask(popper: VNode, { hide, manualMode }: IRenderMaskProps): VNode {
+//   return manualMode ? withDirectives(
+//     renderBlock('div', _hoist1, [popper]),
+//     // marking excludes as any due to the current version of Vue's definition file
+//     // DOES NOT support types other than string as arguments
+//     [[ClickOutside, hide]],
+//   ) : renderBlock('div', _hoist2, [popper])
+// }
+
+export default ({
+  hide,
+  manualMode,
+}: IRenderMaskProps, { slots }) => {
+  const children = renderSlot(slots, 'default')
+  return manualMode
+    ? withDirectives(
+      createVNode('div', _hoist1, [ children ]), [[ClickOutside, hide]],
+    )
+    : createVNode('div', _hoist2, [ children ])
+}
+
+
+// defineComponent({
+//   template: `
+//     <div v-if="!manualMode" v-click-outside="hide">
+//       <slot />
+//     </div>
+//     <div v-else>
+//       <slot />
+//     </div>
+//   `,
+//   directives: {
+//     ClickOutside,
+//   },
+//   props: {
+//     hide: {
+//       type: Function as PropType<() => void>,
+//     },
+//     manualMode: {
+//       type: Boolean,
+//     },
+//   },
+// })

packages/popper/src/use-popper/index.ts

@@ -266,2 +266,3 @@ import {
     initializePopper,
+    isManualMode,
     arrowRef,
@@ -268,0 +269,0 @@ events,

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 3 instances in 1 package

Improved metrics

Number of low supply chain risk alerts

3

decreased by-97.86%

Number of medium supply chain risk alerts

4

decreased by-81.82%

Worsened metrics

Total package byte prevSize

3808214

decreased by-37.29%

Number of package files

800

decreased by-37.25%

Lines of code

37635

decreased by-38.61%

No dependency changes