Merge pull request #6560 from element-plus/dev

element-plus · Mar 12, 2022 · d6690f8 · d6690f8
2 parents 2d50c88 + 45d915f
commit d6690f8
Show file tree

Hide file tree

Showing 37 changed files with 494 additions and 163 deletions.
diff --git a/.github/workflows/build-product.yml b/.github/workflows/build-product.yml
@@ -0,0 +1,80 @@
+name: Build Product 👮‍♂️
+
+on: pull_request
+
+jobs:
+  check:
+    name: Build Product Check
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Add dev branch
+        run: git branch dev origin/dev
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Cache ~/.pnpm-store
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-pnpm-store
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ matrix.node-version }}-test-${{ env.cache-name }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.node-version }}-test-${{ env.cache-name }}-
+            ${{ runner.os }}-${{ matrix.node-version }}-test-
+            ${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: Local build
+        run: pnpm build
+
+      - name: Check build product
+        run: sh -c ./scripts/file-check.sh
+
+      - name: Diff gen
+        run: pnpm diff:table
+        env:
+          THRESHOLD: 50
+
+      - name: Read diff file
+        id: diff
+        uses: juliangruber/read-file-action@v1
+        with:
+          path: ./tmp/diff.md
+
+      - uses: actions-cool/check-user-permission@v2
+        id: isTeamMember
+        with:
+          require: 'write'
+          username: ${{ github.event.pull_request.user.login }}
+
+      - name: Set comment
+        uses: actions-cool/maintain-one-comment@v2.0.2
+        if: steps.isTeamMember.outputs.require-result == 'true'
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          body: ${{ steps.diff.outputs.content }}
+          body-include: '<sub>Generated with'
+
+      - name: Echo comment
+        if: steps.isTeamMember.outputs.require-result == 'false'
+        run: |
+          echo 'Error: compressed-size-action was unable to comment on your PR.'
+          echo 'This can happen for PR's originating from a fork without write permissions.'
+          echo ${{ steps.diff.outputs.content }}
diff --git a/.github/workflows/size-report.yml b/.github/workflows/size-report.yml
@@ -0,0 +1,40 @@
+name: 📦 Package Size Report
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  size-report:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: Cache ~/.pnpm-store
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-pnpm-store
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-publish-${{ env.cache-name }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-publish-${{ env.cache-name }}-
+            ${{ runner.os }}-publish-
+            ${{ runner.os }}-
+
+      - uses: preactjs/compressed-size-action@v2
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          pattern: './dist/element-plus/dist/*.{js,mjs,css}'
diff --git a/.github/workflows/welcome.yml b/.github/workflows/welcome.yml
@@ -0,0 +1,28 @@
+name: PR Open Greeting
+# Note that this `pull_request_target` is vulnerable, it grants write access to a fork repo
+# DO NOT ADD ANY CHECKOUT/CACHING in this workflow
+on:
+  pull_request_target:
+    types: [opened]
+
+jobs:
+  pr-open-greeting:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions-cool/check-user-permission@v2
+        id: isTeamMember
+        with:
+          require: 'write'
+          username: ${{ github.event.pull_request.user.login }}
+
+      - uses: actions-awesome/pr-helper@1.0.15
+        if: steps.isTeamMember.outputs.require-result == 'false'
+        with:
+          actions: 'add-assignees, add-reviewers, greeting, add-labels'
+          assignees: 'element-plus/backers'
+          reviewers: 'element-plus/backers'
+          labels: 'Contribution::Community'
+          token: ${{ github.token }}
+          pr-number: ${{ github.event.pull_request.number }}
+          greeting-message: 'Hello %user%, thank you for contributing to %repo%, please see our [guideline](%guideline%) to see how to make contribution'
+          greeting-guideline-address: 'https://github.com/element-plus/element-plus/blob/dev/CONTRIBUTING.md'
diff --git a/.gitignore b/.gitignore
@@ -17,3 +17,4 @@ packages/element-plus/version.ts
 *.local
 cypress/screenshots/*
 cypress/videos/*
+tmp
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,28 @@
 ## Changelog
 
+### 2.1.0
+
+_2022-03-12_
+
+#### Features
+
+- Components [message] support re-render vnode (#6527 by @sxzz)
+
+#### Bug fixes
+
+- Ci remove clean script (#6550 by @JeremyWuuuuu)
+- Ci clean up several warning (#6551 by @HerringtonDarkholme)
+- Ci fix cascader ns querySelector class (#6552 by @HerringtonDarkholme)
+- Build move eslint config to internal (#6553 by @sxzz)
+- Ci suppress warning by mark icon as raw (#6555 by @HerringtonDarkholme)
+- Components [upload] photo-wall wrap (#6546 by @YunYouJun)
+
+#### Refactors
+
+- Components [link] dynamic css vars & fix inner align (#6557 by @YunYouJun)
+- Components [link] refactor (#6543 by @sxzz)
+
+
 ### 2.0.6
 
 _2022-03-11_

diff --git a/build/type-safe.json b/build/type-safe.json
@@ -18,6 +18,7 @@
   "packages/components/collapse-item/",
   "packages/components/dialog/",
   "packages/components/icon/",
+  "packages/components/link/",
   "packages/components/page-header/",
   "packages/components/row/",
   "packages/components/slot/",

diff --git a/docs/en-US/component/message.md b/docs/en-US/component/message.md
@@ -85,7 +85,7 @@ import { ElMessage } from 'element-plus'
 
 In this case you should call `ElMessage(options)`. We have also registered methods for different types, e.g. `ElMessage.success(options)`. You can call `ElMessage.closeAll()` to manually close all the instances.
 
-## App context inheritance <el-tag>> 2.0.2</el-tag>
+## App context inheritance <el-tag> >= 2.0.3</el-tag>
 
 Now message accepts a `context` as second parameter of the message constructor which allows you to inject current app's context to message which allows you to inherit all the properties of the app.
 
@@ -106,26 +106,29 @@ const { appContext } = getCurrentInstance()!
 ElMessage({}, appContext)
 ```
 
-## Options
-
-| Attribute                | Description                                                                    | Type                 | Accepted Values            | Default       |
-| ------------------------ | ------------------------------------------------------------------------------ | -------------------- | -------------------------- | ------------- |
-| message                  | message text                                                                   | string / VNode       | —                          | —             |
-| type                     | message type                                                                   | string               | success/warning/info/error | info          |
-| icon                     | custom icon component, overrides `type`                                        | string / Component   | —                          | —             |
-| dangerouslyUseHTMLString | whether `message` is treated as HTML string                                    | boolean              | —                          | false         |
-| custom-class             | custom class name for Message                                                  | string               | —                          | —             |
-| duration                 | display duration, millisecond. If set to 0, it will not turn off automatically | number               | —                          | 3000          |
-| show-close               | whether to show a close button                                                 | boolean              | —                          | false         |
-| center                   | whether to center the text                                                     | boolean              | —                          | false         |
-| on-close                 | callback function when closed with the message instance as the parameter       | function             | —                          | —             |
-| offset                   | set the distance to the top of viewport                                        | number               | —                          | 20            |
-| appendTo                 | set the root element for the message                                           | string / HTMLElement | -                          | document.body |
-| grouping                 | merge messages with the same content, type of VNode message is not supported   | boolean              | —                          | false         |
-
-## Methods
+## Message API
+
+### Options
+
+| Attribute                  | Description                                                                    | Type                                          | Default         |
+| -------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------- | --------------- |
+| `message`                  | message text                                                                   | `string \| VNode \| (() => VNode)`            | —               |
+| `type`                     | message type                                                                   | `'success' \| 'warning' \| 'info' \| 'error'` | `'info'`        |
+| `icon`                     | custom icon component, overrides `type`                                        | `string \| Component`                         | —               |
+| `dangerouslyUseHTMLString` | whether `message` is treated as HTML string                                    | `boolean`                                     | `false`         |
+| `custom-class`             | custom class name for Message                                                  | `string`                                      | —               |
+| `duration`                 | display duration, millisecond. If set to 0, it will not turn off automatically | `number`                                      | `3000`          |
+| `show-close`               | whether to show a close button                                                 | `boolean`                                     | `false`         |
+| `center`                   | whether to center the text                                                     | `boolean`                                     | `false`         |
+| `on-close`                 | callback function when closed with the message instance as the parameter       | `function`                                    | —               |
+| `offset`                   | set the distance to the top of viewport                                        | `number`                                      | `20`            |
+| `appendTo`                 | set the root element for the message                                           | `string \| HTMLElement`                       | `document.body` |
+| `grouping`                 | merge messages with the same content, type of VNode message is not supported   | `boolean`                                     | `false`         |
+
+### Methods
 
 `Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
-| Method | Description |
-| ---- | ---- |
-| close | close the Message |
+
+| Method  | Description       |
+| ------- | ----------------- |
+| `close` | close the Message |
diff --git a/docs/en-US/component/upload.md b/docs/en-US/component/upload.md
@@ -39,7 +39,7 @@ Use `list-type` to change the fileList style.
 
 :::demo
 
-upload/photo-album
+upload/photo-wall
 
 :::
 

diff --git a/docs/examples/link/with-icon.vue b/docs/examples/link/with-icon.vue
@@ -6,14 +6,13 @@
     </el-link>
   </div>
 </template>
+
 <script setup lang="ts">
 import { Edit, View as IconView } from '@element-plus/icons-vue'
 </script>
+
 <style scoped>
 .el-link {
   margin-right: 8px;
 }
-.el-link .el-icon--right.el-icon {
-  vertical-align: text-bottom;
-}
 </style>
diff --git a/docs/examples/upload/photo-album.vue → docs/examples/upload/photo-wall.vue b/docs/examples/upload/photo-album.vue → docs/examples/upload/photo-wall.vue
@@ -28,6 +28,30 @@ const fileList = ref<UploadUserFile[]>([
     name: 'food2.jpeg',
     url: '/images/guide.png',
   },
+  {
+    name: 'food.jpeg',
+    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+  },
+  {
+    name: 'food2.jpeg',
+    url: '/images/guide.png',
+  },
+  {
+    name: 'food.jpeg',
+    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+  },
+  {
+    name: 'food2.jpeg',
+    url: '/images/guide.png',
+  },
+  {
+    name: 'food.jpeg',
+    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+  },
+  {
+    name: 'food2.jpeg',
+    url: '/images/guide.png',
+  },
 ])
 
 const dialogImageUrl = ref('')

diff --git a/packages/eslint-config/index.js → internal/eslint-config/index.js b/packages/eslint-config/index.js → internal/eslint-config/index.js
diff --git a/packages/eslint-config/package.json → internal/eslint-config/package.json b/packages/eslint-config/package.json → internal/eslint-config/package.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "dev": "pnpm -C play dev",
     "gen": "bash ./scripts/gc.sh",
     "gen:version": "sucrase-node scripts/gen-version.ts",
+    "diff:table": "sucrase-node scripts/build-table.ts",
     "update:version": "sucrase-node scripts/update-version.ts",
     "clean": "pnpm run clean:dist && pnpm run clean -r --stream",
     "clean:dist": "rimraf dist",

diff --git a/packages/components/avatar/__tests__/avatar.spec.tsx b/packages/components/avatar/__tests__/avatar.spec.tsx
@@ -1,4 +1,4 @@
-import { nextTick } from 'vue'
+import { nextTick, markRaw } from 'vue'
 import { mount } from '@vue/test-utils'
 import { User } from '@element-plus/icons-vue'
 import {
@@ -39,7 +39,7 @@ describe('Avatar.vue', () => {
   })
 
   test('icon avatar', () => {
-    const wrapper = _mount(() => <Avatar icon={User} />)
+    const wrapper = _mount(() => <Avatar icon={markRaw(User)} />)
     expect(wrapper.classes()).toContain('el-avatar--icon')
     expect(wrapper.findComponent(User).exists()).toBe(true)
   })

diff --git a/packages/components/button/__tests__/button.spec.tsx b/packages/components/button/__tests__/button.spec.tsx
@@ -1,4 +1,4 @@
-import { ref, nextTick, defineComponent } from 'vue'
+import { ref, nextTick, defineComponent, markRaw } from 'vue'
 import { mount } from '@vue/test-utils'
 import { Loading, Search } from '@element-plus/icons-vue'
 import Button from '../src/button.vue'
@@ -17,7 +17,7 @@ describe('Button.vue', () => {
 
   it('icon', () => {
     const wrapper = mount(Button, {
-      props: { icon: Search },
+      props: { icon: markRaw(Search) },
     })
     expect(wrapper.findComponent(Search).exists()).toBeTruthy()
   })
@@ -111,7 +111,7 @@ describe('Button.vue', () => {
   it('loading icon', () => {
     const wrapper = mount(Button, {
       props: {
-        loadingIcon: Search,
+        loadingIcon: markRaw(Search),
         loading: true,
       },
     })

diff --git a/packages/components/cascader-panel/src/index.vue b/packages/components/cascader-panel/src/index.vue
@@ -276,7 +276,7 @@ export default defineComponent({
         const menuElement = menu?.$el
         if (menuElement) {
           const container = menuElement.querySelector(
-            `.${ns.namespace.value}scrollbar__wrap`
+            `.${ns.namespace.value}-scrollbar__wrap`
           )
           const activeNode =
             menuElement.querySelector(`.${ns.b('node')}.${ns.is('active')}`) ||
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,3 +17,4 @@ packages/element-plus/version.ts @@
     *.local
     cypress/screenshots/*
     cypress/videos/*
+    tmp