From 2b495b2712a99fb62beea3d4f22d05b4e1876366 Mon Sep 17 00:00:00 2001 From: nigi <67454874+wen403@users.noreply.github.com> Date: Fri, 8 Dec 2023 18:48:56 +0800 Subject: [PATCH] fix: footer slot not working in dialog and drawer (#35) Co-authored-by: nigi-wen <wenzepeng403@gmail.com> --- docs/.vuepress/clientAppEnhance.ts | 2 +- packages/components/package.json | 2 +- packages/components/src/form-dialog/index.ts | 15 ++- packages/components/src/form-drawer/index.ts | 23 +++- yarn.lock | 127 ++++++++++++------- 5 files changed, 105 insertions(+), 64 deletions(-) diff --git a/docs/.vuepress/clientAppEnhance.ts b/docs/.vuepress/clientAppEnhance.ts index bce6f45..bbe2529 100644 --- a/docs/.vuepress/clientAppEnhance.ts +++ b/docs/.vuepress/clientAppEnhance.ts @@ -10,5 +10,5 @@ export default defineClientAppEnhance(({ app }) => { // app.component(name, component) // } app.component('dumi-previewer', DumiPreviewer) - app.use(ElementPlus, { size: 'small' }) + app.use(ElementPlus, { size: 'default' }) }) diff --git a/packages/components/package.json b/packages/components/package.json index 294a2c2..eabce68 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -51,7 +51,7 @@ "@formily/reactive-vue": "^2.0.20", "@formily/shared": "^2.0.20", "@formily/vue": "^2.0.20", - "element-plus": "^2.1.11", + "element-plus": "^2.4.0", "resize-observer-polyfill": "^1.5.1", "vue-slicksort": "^1.2.0", "vuedraggable": "^4.1.0" diff --git a/packages/components/src/form-dialog/index.ts b/packages/components/src/form-dialog/index.ts index 1f787b0..774037e 100644 --- a/packages/components/src/form-dialog/index.ts +++ b/packages/components/src/form-dialog/index.ts @@ -23,6 +23,8 @@ import { createApp, PropType, h, + onMounted, + ref, } from 'vue' import { isValidElement, @@ -374,20 +376,21 @@ export function FormDialog( const FormDialogFooter = defineComponent({ name: 'FFormDialogFooter', setup(props, { slots }) { - return () => { - // 临时解决方案 + const teleportComponent = ref<VNode | null>(null) + + onMounted(() => { if (document.querySelector(`#${PORTAL_TARGET_NAME}`)) { - return h( + teleportComponent.value = h( Teleport as any, { to: `#${PORTAL_TARGET_NAME}`, }, slots ) - } else { - return null } - } + }) + + return () => teleportComponent.value }, }) diff --git a/packages/components/src/form-drawer/index.ts b/packages/components/src/form-drawer/index.ts index 7b81895..40d09b1 100644 --- a/packages/components/src/form-drawer/index.ts +++ b/packages/components/src/form-drawer/index.ts @@ -17,7 +17,15 @@ import type { } from 'element-plus' // import { t } from 'element-plus/lib/locale' -import { Component, VNode, defineComponent, Teleport, createApp } from 'vue' +import { + Component, + VNode, + defineComponent, + Teleport, + createApp, + onMounted, + ref, +} from 'vue' import { isValidElement, resolveComponent, @@ -402,20 +410,21 @@ export function FormDrawer( const FormDrawerFooter = defineComponent({ name: 'FFormDrawerFooter', setup(props, { slots }) { - return () => { - // 临时解决方案 + const teleportComponent = ref<VNode | null>(null) + + onMounted(() => { if (document.querySelector(`#${PORTAL_TARGET_NAME}`)) { - return h( + teleportComponent.value = h( Teleport, { to: `#${PORTAL_TARGET_NAME}`, }, slots ) - } else { - return null } - } + }) + + return () => teleportComponent.value }, }) diff --git a/yarn.lock b/yarn.lock index 411315a..97624dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -535,15 +535,20 @@ integrity sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ== "@ctrl/tinycolor@^3.4.1": - version "3.4.1" - resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz" - integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw== + version "3.6.1" + resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31" + integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA== "@element-plus/icons-vue@^1.1.1", "@element-plus/icons-vue@^1.1.4": version "1.1.4" resolved "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz" integrity sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ== +"@element-plus/icons-vue@^2.0.6": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz#7ad90d08a8c0d5fd3af31c4f73264ca89614397a" + integrity sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA== + "@endemolshinegroup/cosmiconfig-typescript-loader@^3.0.2": version "3.0.2" resolved "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz" @@ -574,10 +579,12 @@ resolved "https://registry.npmjs.org/@floating-ui/core/-/core-0.6.1.tgz" integrity sha512-Y30eVMcZva8o84c0HcXAtDO4BEzPJMvF6+B7x7urL2xbAqVsGJhojOyHLaoQHQYjb6OkqRq5kO+zeySycQwKqg== -"@floating-ui/core@^0.6.2": - version "0.6.2" - resolved "https://registry.npmjs.org/@floating-ui/core/-/core-0.6.2.tgz" - integrity sha512-jktYRmZwmau63adUG3GKOAVCofBXkk55S/zQ94XOorAHhwqFIOFAy1rSp2N0Wp6/tGbe9V3u/ExlGZypyY17rg== +"@floating-ui/core@^1.4.2": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c" + integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg== + dependencies: + "@floating-ui/utils" "^0.1.3" "@floating-ui/dom@^0.4.2": version "0.4.4" @@ -586,12 +593,18 @@ dependencies: "@floating-ui/core" "^0.6.1" -"@floating-ui/dom@^0.4.5": - version "0.4.5" - resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.4.5.tgz" - integrity sha512-b+prvQgJt8pieaKYMSJBXHxX/DYwdLsAWxKYqnO5dO2V4oo/TYBZJAUQCVNjTWWsrs6o4VDrNcP9+E70HAhJdw== +"@floating-ui/dom@^1.0.1": + version "1.5.3" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa" + integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA== dependencies: - "@floating-ui/core" "^0.6.2" + "@floating-ui/core" "^1.4.2" + "@floating-ui/utils" "^0.1.3" + +"@floating-ui/utils@^0.1.3": + version "0.1.6" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9" + integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A== "@formily/core@2.0.20", "@formily/core@^2.0.20": version "2.0.20" @@ -1822,9 +1835,9 @@ resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz" integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw== -"@popperjs/core@npm:@sxzz/popperjs-es@^2.11.6": +"@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7": version "2.11.7" - resolved "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz" + resolved "https://registry.yarnpkg.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz#a7f69e3665d3da9b115f9e71671dae1b97e13671" integrity sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ== "@rollup/plugin-commonjs@^17.0.0": @@ -2074,16 +2087,16 @@ integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA== "@types/lodash-es@^4.17.6": - version "4.17.6" - resolved "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz" - integrity sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg== + version "4.17.9" + resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.9.tgz#49dbe5112e23c54f2b387d860b7d03028ce170c2" + integrity sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ== dependencies: "@types/lodash" "*" "@types/lodash@*", "@types/lodash@^4.14.182": - version "4.14.182" - resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz" - integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q== + version "4.14.199" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.199.tgz#c3edb5650149d847a277a8961a7ad360c474e9bf" + integrity sha512-Vrjz5N5Ia4SEzWWgIVwnHNEnb1UE1XMkvY5DGXrAeOGE9imk0hgTHh5GyDjLDJi9OTCn9oo9dXH1uToK1VRfrg== "@types/markdown-it@^12.2.3": version "12.2.3" @@ -2164,6 +2177,11 @@ resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz" integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ== +"@types/web-bluetooth@^0.0.16": + version "0.0.16" + resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8" + integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ== + "@types/yargs-parser@*": version "21.0.0" resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz" @@ -2677,13 +2695,14 @@ "@vueuse/shared" "8.2.5" vue-demi "*" -"@vueuse/core@^8.2.6": - version "8.3.1" - resolved "https://registry.npmjs.org/@vueuse/core/-/core-8.3.1.tgz" - integrity sha512-WiXUgVyPG9elGx3G8UV8g+zqbEJ2hYacrPICogAxDdW6hnxxcUFdF7FtvDroJ/DxWmo2pg8XNNz07ybfnZyJbw== +"@vueuse/core@^9.1.0": + version "9.13.0" + resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.13.0.tgz#2f69e66d1905c1e4eebc249a01759cf88ea00cf4" + integrity sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw== dependencies: - "@vueuse/metadata" "8.3.1" - "@vueuse/shared" "8.3.1" + "@types/web-bluetooth" "^0.0.16" + "@vueuse/metadata" "9.13.0" + "@vueuse/shared" "9.13.0" vue-demi "*" "@vueuse/metadata@8.2.5": @@ -2691,10 +2710,10 @@ resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.2.5.tgz" integrity sha512-Lk9plJjh9cIdiRdcj16dau+2LANxIdFCiTgdfzwYXbflxq0QnMBeOD2qHgKDE7fuVrtPcVWj8VSuZEx1HRfNQA== -"@vueuse/metadata@8.3.1": - version "8.3.1" - resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.3.1.tgz" - integrity sha512-1aZaFL44HzXXkfN6Q7KMDOXBFKTHDClHlOJBxtN8rTBXIIScoGOrJCpxWiQ4kuVg95MzG/pHrd3P4wd8poL9XQ== +"@vueuse/metadata@9.13.0": + version "9.13.0" + resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.13.0.tgz#bc25a6cdad1b1a93c36ce30191124da6520539ff" + integrity sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ== "@vueuse/shared@5.3.0": version "5.3.0" @@ -2710,10 +2729,10 @@ dependencies: vue-demi "*" -"@vueuse/shared@8.3.1": - version "8.3.1" - resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-8.3.1.tgz" - integrity sha512-7HKLCcxp4dtONq6QSSoavblo9riYgqzw7jhqiC0/VUYMXKzqj1G/GznOzTmY8Wi8uKKT197JqjKQ1DKt2j/0+A== +"@vueuse/shared@9.13.0": + version "9.13.0" + resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.13.0.tgz#089ff4cc4e2e7a4015e57a8f32e4b39d096353b9" + integrity sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw== dependencies: vue-demi "*" @@ -3129,6 +3148,11 @@ async-validator@^4.0.7: resolved "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz" integrity sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ== +async-validator@^4.2.5: + version "4.2.5" + resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339" + integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg== + async@^2.6.2: version "2.6.3" resolved "https://registry.npmjs.org/async/-/async-2.6.3.tgz" @@ -4651,10 +4675,10 @@ dayjs@^1.11.0: resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.0.tgz" integrity sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug== -dayjs@^1.11.1: - version "1.11.1" - resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.1.tgz" - integrity sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA== +dayjs@^1.11.3: + version "1.11.10" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0" + integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ== debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9: version "2.6.9" @@ -5092,26 +5116,26 @@ element-plus@^2.0.1: memoize-one "^6.0.0" normalize-wheel-es "^1.1.2" -element-plus@^2.1.11: - version "2.1.11" - resolved "https://registry.npmjs.org/element-plus/-/element-plus-2.1.11.tgz" - integrity sha512-s4X0I8s787tv+9UdekBC1g7v42Fj4bucPAmu03EjbgrGrV7BJvkoBGuK52lNfu4yC76bl6Uyjesd5Fu8CMakSw== +element-plus@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-2.4.0.tgz#e79249ac4c0a606d377c2f31ad553aa992286fe3" + integrity sha512-yJEa8LXkGOOgkfkeqMMEdeX/Dc8EH9qPcRuX91dlhSXxgCKKbp9tH3QFTOG99ibZsrN/Em62nh7ddvbc7I1frw== dependencies: "@ctrl/tinycolor" "^3.4.1" - "@element-plus/icons-vue" "^1.1.4" - "@floating-ui/dom" "^0.4.5" - "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.6" + "@element-plus/icons-vue" "^2.0.6" + "@floating-ui/dom" "^1.0.1" + "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7" "@types/lodash" "^4.14.182" "@types/lodash-es" "^4.17.6" - "@vueuse/core" "^8.2.6" - async-validator "^4.0.7" - dayjs "^1.11.1" + "@vueuse/core" "^9.1.0" + async-validator "^4.2.5" + dayjs "^1.11.3" escape-html "^1.0.3" lodash "^4.17.21" lodash-es "^4.17.21" lodash-unified "^1.0.2" memoize-one "^6.0.0" - normalize-wheel-es "^1.1.2" + normalize-wheel-es "^1.2.0" emittery@^0.8.1: version "0.8.1" @@ -9668,6 +9692,11 @@ normalize-wheel-es@^1.1.2: resolved "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz" integrity sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png== +normalize-wheel-es@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz#0fa2593d619f7245a541652619105ab076acf09e" + integrity sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw== + npm-bundled@^1.1.1: version "1.1.2" resolved "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz"