From 9cad48db6c56c3e2796a9d6da881817ef13b6eca Mon Sep 17 00:00:00 2001 From: AdaKing88 <369509171> Date: 星期三, 23 八月 2023 11:34:10 +0800 Subject: [PATCH] 初版 --- src/components/control/input/index.vue | 49 src/components/control/wangeditor/index.vue | 69 src/layout/components/Main.vue | 25 public/vue3.js | 15929 ++++++++ src/api/JianGuan.js | 16 src/views/gaixian/g04.vue | 322 src/components/pagination/index.vue | 69 public/g05.docx | 0 src/api/FBapi.js | 16 src/api/DBapi.js | 16 src/views/b/weixiu.vue | 311 src/styles/icon.scss | 9 src/components/table/requestHook.js | 174 src/api/JBapi.js | 16 src/components/svgIcon/Index.vue | 38 src/components/svgIcon/icon/user.svg | 1 public/g06.docx | 0 src/views/gaixian/g12.vue | 333 src/components/HelloWorld.vue | 21 public/guanxian.docx | 0 src/store/index.js | 14 src/assets/zhCn.js | 125 src/views/GXtable/Index.vue | 1079 src/views/SCTJtable/Index.vue | 348 src/views/system/departUser/index.vue | 0 public/~$anxian.docx | 0 public/jiguan2.docx | 0 public/~$db.docx | 0 src/api/BXKapi.js | 16 src/hook/permissionHook.js | 17 src/router/permit.js | 43 src/utils/common.js | 49 src/utils/format.js | 42 src/components/control/select/index.vue | 41 src/views/gaixian/Index.vue | 231 src/views/gaixian/g06.vue | 345 public/element-index.css | 16294 ++++++++ public/db.docx | 0 src/components/form/index.vue | 128 src/views/gaixian/g10.vue | 326 public/g08.docx | 0 src/layout/components/Aside.vue | 120 src/api/head.js | 96 src/router/index_back1.js | 29 src/views/HJtable/Index.vue | 978 src/views/system/role/index.vue | 784 public/~$iguan2.docx | 0 src/views/b/zonghe.vue | 382 public/g02.docx | 0 src/views/gaixian/g09.vue | 391 src/assets/print/packages/print.js | 95 src/components/search/index.vue | 130 src/components/table/index.vue | 121 src/layout/components/Header.vue | 107 src/views/gaixian/g17.vue | 332 public/jbj.docx | 0 src/api/Guanxian.js | 16 src/views/layout/components/Aside.vue | 142 src/views/system/menu/index.vue | 663 src/views/console/Index.vue | 18 src/views/history/screenTable.vue | 115 src/views/system/Role.vue | 790 src/views/user/Index.vue | 748 src/views/system/Menu.vue | 122 public/g03.docx | 0 src/views/layout/components/Main.vue | 25 src/store/modules/app.js | 73 src/styles/normalize.scss | 375 public/g09.docx | 0 src/api/dep.js | 49 src/api/HJapi.js | 16 public/g12.docx | 0 src/views/gaixian/g15.vue | 358 public/index.html | 25 src/views/gaixian/g02.vue | 348 public/g15.docx | 0 src/components/svgIcon/icon/information.svg | 1 src/assets/images/logo.png | 0 src/components/svgIcon/svg.js | 7 src/components/switch/index.vue | 71 src/views/history/Index.vue | 253 src/views/layout/Index.vue | 43 src/api/b.js | 51 src/styles/sassConfig.scss | 10 src/utils/request.js | 76 public/hj.docx | 0 src/views/JBJtable/Index.vue | 751 src/api/account.js | 104 src/components/arj/arj-table.vue | 50 src/views/b/jihua.vue | 310 src/layout/Index.vue | 43 src/views/DBtable/Index.vue | 439 src/styles/main.scss | 14 src/js/data.js | 7 public/g13.docx | 0 public/jg.docx | 0 src/views/gaixian/g13.vue | 329 src/views/Bianxk/Index.vue | 361 src/views/datamanager/screenTable.vue | 115 public/fb.docx | 0 src/router/index copy.js | 218 src/components/control/inputNumber/index.vue | 41 src/views/system/User.vue | 748 src/views/gaixian/g03.vue | 307 public/g14.docx | 0 src/components/svgIcon/icon/system.svg | 2 src/components/form/hook/rulesHook.js | 88 src/assets/images/login_bk.jpg | 0 src/views/gaixian/header.vue | 27 public/favicon.ico | 0 src/views/system/depart/index.vue | 672 src/api/SCTJapi.js | 16 src/hook/infoHook.js | 19 src/assets/print/index.js | 13 src/plugins/directive.js | 33 public/jiguan.docx | 0 src/assets/print/packages/printarea.js | 461 src/views/gaixian/g07.vue | 337 src/components/control/keyword/index.vue | 74 src/components/control/switch/index.vue | 89 src/utils/print.js | 35 public/element-plus.js | 56327 +++++++++++++++++++++++++++++ src/store/modules/info.js | 22 src/views/system/Depart.vue | 676 src/views/gaixian/g11.vue | 328 src/router/index.js | 47 src/utils/global.js | 59 src/views/b/shengchan.vue | 351 src/views/user/Index copy.vue | 598 src/views/user/screenTable.vue | 115 src/components/svgIcon/icon/logout.svg | 1 src/main.js | 36 src/views/ZJBGtable/Index.vue | 0 src/views/gaixian/g05.vue | 396 src/views/gaixian/g18.vue | 346 src/components/control/cascader/index.vue | 96 src/hook/dialogHook.js | 27 src/views/Home.vue | 17 src/views/account/Login.vue | 450 src/js/elemCode.js | 15 src/views/JGJtable/Index.vue | 677 src/api/role.js | 51 src/views/datamanager/Index.vue | 253 src/api/gaixian.js | 275 public/g16.docx | 0 public/g10.docx | 0 src/views/JGGXtable/Index.vue | 419 public/g17.docx | 0 src/assets/print/packages/css/print.css | 3 public/hj - 副本.docx | 0 src/views/gaixian/g08.vue | 322 src/views/gaixian/g16.vue | 333 src/components/control/date/index.vue | 52 public/g11.docx | 0 src/api/JiGuan.js | 16 src/views/FBtable/Index.vue | 703 src/views/gaixian/screenTable.vue | 115 src/components/svgIcon/icon/home.svg | 1 src/plugins/elementui.js | 35 src/utils/cookies.js | 18 src/components/table/configHook.js | 39 src/components/control/checkbox/index.vue | 43 src/components/form/hook/relationHook.js | 34 src/assets/images/logo-min.png | 0 src/views/About.vue | 5 src/components/wangeditor/index.vue | 67 src/store/modules/permission.js | 123 src/api/menu.js | 35 src/styles/elementui.scss | 34 src/utils/validate.js | 40 src/views/layout/components/Header.vue | 107 public/~$jiguan.docx | 0 src/components/svgIcon/icon/menuBtn.svg | 1 src/views/system/user/index.vue | 748 src/components/control/textarea/index.vue | 44 public/g07.docx | 0 public/g04.docx | 0 src/views/gaixian/g01.vue | 405 src/views/gaixian/g14.vue | 588 src/App.vue | 21 src/components/control/upload/index.vue | 88 src/assets/print/packages/images/print-icon.png | 0 public/g01.docx | 0 src/components/control/radio/index.vue | 71 184 files changed, 115,848 insertions(+), 0 deletions(-) diff --git a/public/db.docx b/public/db.docx new file mode 100644 index 0000000..0aabbec --- /dev/null +++ b/public/db.docx Binary files differ diff --git a/public/element-index.css b/public/element-index.css new file mode 100644 index 0000000..e8c8a37 --- /dev/null +++ b/public/element-index.css @@ -0,0 +1,16294 @@ +@charset "UTF-8"; + +@font-face { + font-family: element-icons; + src: url(fonts/element-icons.woff) format("woff"), url(fonts/element-icons.ttf) format("truetype"); + font-weight: 400; + font-display: "auto"; + font-style: normal +} + +[class*=" el-icon-"], +[class^=el-icon-] { + font-family: element-icons !important; + speak: none; + font-style: normal; + font-weight: 400; + font-variant: normal; + text-transform: none; + line-height: 1; + vertical-align: baseline; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.el-icon-ice-cream-round:before { + content: "\e6a0" +} + +.el-icon-ice-cream-square:before { + content: "\e6a3" +} + +.el-icon-lollipop:before { + content: "\e6a4" +} + +.el-icon-potato-strips:before { + content: "\e6a5" +} + +.el-icon-milk-tea:before { + content: "\e6a6" +} + +.el-icon-ice-drink:before { + content: "\e6a7" +} + +.el-icon-ice-tea:before { + content: "\e6a9" +} + +.el-icon-coffee:before { + content: "\e6aa" +} + +.el-icon-orange:before { + content: "\e6ab" +} + +.el-icon-pear:before { + content: "\e6ac" +} + +.el-icon-apple:before { + content: "\e6ad" +} + +.el-icon-cherry:before { + content: "\e6ae" +} + +.el-icon-watermelon:before { + content: "\e6af" +} + +.el-icon-grape:before { + content: "\e6b0" +} + +.el-icon-refrigerator:before { + content: "\e6b1" +} + +.el-icon-goblet-square-full:before { + content: "\e6b2" +} + +.el-icon-goblet-square:before { + content: "\e6b3" +} + +.el-icon-goblet-full:before { + content: "\e6b4" +} + +.el-icon-goblet:before { + content: "\e6b5" +} + +.el-icon-cold-drink:before { + content: "\e6b6" +} + +.el-icon-coffee-cup:before { + content: "\e6b8" +} + +.el-icon-water-cup:before { + content: "\e6b9" +} + +.el-icon-hot-water:before { + content: "\e6ba" +} + +.el-icon-ice-cream:before { + content: "\e6bb" +} + +.el-icon-dessert:before { + content: "\e6bc" +} + +.el-icon-sugar:before { + content: "\e6bd" +} + +.el-icon-tableware:before { + content: "\e6be" +} + +.el-icon-burger:before { + content: "\e6bf" +} + +.el-icon-knife-fork:before { + content: "\e6c1" +} + +.el-icon-fork-spoon:before { + content: "\e6c2" +} + +.el-icon-chicken:before { + content: "\e6c3" +} + +.el-icon-food:before { + content: "\e6c4" +} + +.el-icon-dish-1:before { + content: "\e6c5" +} + +.el-icon-dish:before { + content: "\e6c6" +} + +.el-icon-moon-night:before { + content: "\e6ee" +} + +.el-icon-moon:before { + content: "\e6f0" +} + +.el-icon-cloudy-and-sunny:before { + content: "\e6f1" +} + +.el-icon-partly-cloudy:before { + content: "\e6f2" +} + +.el-icon-cloudy:before { + content: "\e6f3" +} + +.el-icon-sunny:before { + content: "\e6f6" +} + +.el-icon-sunset:before { + content: "\e6f7" +} + +.el-icon-sunrise-1:before { + content: "\e6f8" +} + +.el-icon-sunrise:before { + content: "\e6f9" +} + +.el-icon-heavy-rain:before { + content: "\e6fa" +} + +.el-icon-lightning:before { + content: "\e6fb" +} + +.el-icon-light-rain:before { + content: "\e6fc" +} + +.el-icon-wind-power:before { + content: "\e6fd" +} + +.el-icon-baseball:before { + content: "\e712" +} + +.el-icon-soccer:before { + content: "\e713" +} + +.el-icon-football:before { + content: "\e715" +} + +.el-icon-basketball:before { + content: "\e716" +} + +.el-icon-ship:before { + content: "\e73f" +} + +.el-icon-truck:before { + content: "\e740" +} + +.el-icon-bicycle:before { + content: "\e741" +} + +.el-icon-mobile-phone:before { + content: "\e6d3" +} + +.el-icon-service:before { + content: "\e6d4" +} + +.el-icon-key:before { + content: "\e6e2" +} + +.el-icon-unlock:before { + content: "\e6e4" +} + +.el-icon-lock:before { + content: "\e6e5" +} + +.el-icon-watch:before { + content: "\e6fe" +} + +.el-icon-watch-1:before { + content: "\e6ff" +} + +.el-icon-timer:before { + content: "\e702" +} + +.el-icon-alarm-clock:before { + content: "\e703" +} + +.el-icon-map-location:before { + content: "\e704" +} + +.el-icon-delete-location:before { + content: "\e705" +} + +.el-icon-add-location:before { + content: "\e706" +} + +.el-icon-location-information:before { + content: "\e707" +} + +.el-icon-location-outline:before { + content: "\e708" +} + +.el-icon-location:before { + content: "\e79e" +} + +.el-icon-place:before { + content: "\e709" +} + +.el-icon-discover:before { + content: "\e70a" +} + +.el-icon-first-aid-kit:before { + content: "\e70b" +} + +.el-icon-trophy-1:before { + content: "\e70c" +} + +.el-icon-trophy:before { + content: "\e70d" +} + +.el-icon-medal:before { + content: "\e70e" +} + +.el-icon-medal-1:before { + content: "\e70f" +} + +.el-icon-stopwatch:before { + content: "\e710" +} + +.el-icon-mic:before { + content: "\e711" +} + +.el-icon-copy-document:before { + content: "\e718" +} + +.el-icon-full-screen:before { + content: "\e719" +} + +.el-icon-switch-button:before { + content: "\e71b" +} + +.el-icon-aim:before { + content: "\e71c" +} + +.el-icon-crop:before { + content: "\e71d" +} + +.el-icon-odometer:before { + content: "\e71e" +} + +.el-icon-time:before { + content: "\e71f" +} + +.el-icon-bangzhu:before { + content: "\e724" +} + +.el-icon-close-notification:before { + content: "\e726" +} + +.el-icon-microphone:before { + content: "\e727" +} + +.el-icon-turn-off-microphone:before { + content: "\e728" +} + +.el-icon-position:before { + content: "\e729" +} + +.el-icon-postcard:before { + content: "\e72a" +} + +.el-icon-message:before { + content: "\e72b" +} + +.el-icon-chat-line-square:before { + content: "\e72d" +} + +.el-icon-chat-dot-square:before { + content: "\e72e" +} + +.el-icon-chat-dot-round:before { + content: "\e72f" +} + +.el-icon-chat-square:before { + content: "\e730" +} + +.el-icon-chat-line-round:before { + content: "\e731" +} + +.el-icon-chat-round:before { + content: "\e732" +} + +.el-icon-set-up:before { + content: "\e733" +} + +.el-icon-turn-off:before { + content: "\e734" +} + +.el-icon-open:before { + content: "\e735" +} + +.el-icon-connection:before { + content: "\e736" +} + +.el-icon-link:before { + content: "\e737" +} + +.el-icon-cpu:before { + content: "\e738" +} + +.el-icon-thumb:before { + content: "\e739" +} + +.el-icon-female:before { + content: "\e73a" +} + +.el-icon-male:before { + content: "\e73b" +} + +.el-icon-guide:before { + content: "\e73c" +} + +.el-icon-news:before { + content: "\e73e" +} + +.el-icon-price-tag:before { + content: "\e744" +} + +.el-icon-discount:before { + content: "\e745" +} + +.el-icon-wallet:before { + content: "\e747" +} + +.el-icon-coin:before { + content: "\e748" +} + +.el-icon-money:before { + content: "\e749" +} + +.el-icon-bank-card:before { + content: "\e74a" +} + +.el-icon-box:before { + content: "\e74b" +} + +.el-icon-present:before { + content: "\e74c" +} + +.el-icon-sell:before { + content: "\e6d5" +} + +.el-icon-sold-out:before { + content: "\e6d6" +} + +.el-icon-shopping-bag-2:before { + content: "\e74d" +} + +.el-icon-shopping-bag-1:before { + content: "\e74e" +} + +.el-icon-shopping-cart-2:before { + content: "\e74f" +} + +.el-icon-shopping-cart-1:before { + content: "\e750" +} + +.el-icon-shopping-cart-full:before { + content: "\e751" +} + +.el-icon-smoking:before { + content: "\e752" +} + +.el-icon-no-smoking:before { + content: "\e753" +} + +.el-icon-house:before { + content: "\e754" +} + +.el-icon-table-lamp:before { + content: "\e755" +} + +.el-icon-school:before { + content: "\e756" +} + +.el-icon-office-building:before { + content: "\e757" +} + +.el-icon-toilet-paper:before { + content: "\e758" +} + +.el-icon-notebook-2:before { + content: "\e759" +} + +.el-icon-notebook-1:before { + content: "\e75a" +} + +.el-icon-files:before { + content: "\e75b" +} + +.el-icon-collection:before { + content: "\e75c" +} + +.el-icon-receiving:before { + content: "\e75d" +} + +.el-icon-suitcase-1:before { + content: "\e760" +} + +.el-icon-suitcase:before { + content: "\e761" +} + +.el-icon-film:before { + content: "\e763" +} + +.el-icon-collection-tag:before { + content: "\e765" +} + +.el-icon-data-analysis:before { + content: "\e766" +} + +.el-icon-pie-chart:before { + content: "\e767" +} + +.el-icon-data-board:before { + content: "\e768" +} + +.el-icon-data-line:before { + content: "\e76d" +} + +.el-icon-reading:before { + content: "\e769" +} + +.el-icon-magic-stick:before { + content: "\e76a" +} + +.el-icon-coordinate:before { + content: "\e76b" +} + +.el-icon-mouse:before { + content: "\e76c" +} + +.el-icon-brush:before { + content: "\e76e" +} + +.el-icon-headset:before { + content: "\e76f" +} + +.el-icon-umbrella:before { + content: "\e770" +} + +.el-icon-scissors:before { + content: "\e771" +} + +.el-icon-mobile:before { + content: "\e773" +} + +.el-icon-attract:before { + content: "\e774" +} + +.el-icon-monitor:before { + content: "\e775" +} + +.el-icon-search:before { + content: "\e778" +} + +.el-icon-takeaway-box:before { + content: "\e77a" +} + +.el-icon-paperclip:before { + content: "\e77d" +} + +.el-icon-printer:before { + content: "\e77e" +} + +.el-icon-document-add:before { + content: "\e782" +} + +.el-icon-document:before { + content: "\e785" +} + +.el-icon-document-checked:before { + content: "\e786" +} + +.el-icon-document-copy:before { + content: "\e787" +} + +.el-icon-document-delete:before { + content: "\e788" +} + +.el-icon-document-remove:before { + content: "\e789" +} + +.el-icon-tickets:before { + content: "\e78b" +} + +.el-icon-folder-checked:before { + content: "\e77f" +} + +.el-icon-folder-delete:before { + content: "\e780" +} + +.el-icon-folder-remove:before { + content: "\e781" +} + +.el-icon-folder-add:before { + content: "\e783" +} + +.el-icon-folder-opened:before { + content: "\e784" +} + +.el-icon-folder:before { + content: "\e78a" +} + +.el-icon-edit-outline:before { + content: "\e764" +} + +.el-icon-edit:before { + content: "\e78c" +} + +.el-icon-date:before { + content: "\e78e" +} + +.el-icon-c-scale-to-original:before { + content: "\e7c6" +} + +.el-icon-view:before { + content: "\e6ce" +} + +.el-icon-loading:before { + content: "\e6cf" +} + +.el-icon-rank:before { + content: "\e6d1" +} + +.el-icon-sort-down:before { + content: "\e7c4" +} + +.el-icon-sort-up:before { + content: "\e7c5" +} + +.el-icon-sort:before { + content: "\e6d2" +} + +.el-icon-finished:before { + content: "\e6cd" +} + +.el-icon-refresh-left:before { + content: "\e6c7" +} + +.el-icon-refresh-right:before { + content: "\e6c8" +} + +.el-icon-refresh:before { + content: "\e6d0" +} + +.el-icon-video-play:before { + content: "\e7c0" +} + +.el-icon-video-pause:before { + content: "\e7c1" +} + +.el-icon-d-arrow-right:before { + content: "\e6dc" +} + +.el-icon-d-arrow-left:before { + content: "\e6dd" +} + +.el-icon-arrow-up:before { + content: "\e6e1" +} + +.el-icon-arrow-down:before { + content: "\e6df" +} + +.el-icon-arrow-right:before { + content: "\e6e0" +} + +.el-icon-arrow-left:before { + content: "\e6de" +} + +.el-icon-top-right:before { + content: "\e6e7" +} + +.el-icon-top-left:before { + content: "\e6e8" +} + +.el-icon-top:before { + content: "\e6e6" +} + +.el-icon-bottom:before { + content: "\e6eb" +} + +.el-icon-right:before { + content: "\e6e9" +} + +.el-icon-back:before { + content: "\e6ea" +} + +.el-icon-bottom-right:before { + content: "\e6ec" +} + +.el-icon-bottom-left:before { + content: "\e6ed" +} + +.el-icon-caret-top:before { + content: "\e78f" +} + +.el-icon-caret-bottom:before { + content: "\e790" +} + +.el-icon-caret-right:before { + content: "\e791" +} + +.el-icon-caret-left:before { + content: "\e792" +} + +.el-icon-d-caret:before { + content: "\e79a" +} + +.el-icon-share:before { + content: "\e793" +} + +.el-icon-menu:before { + content: "\e798" +} + +.el-icon-s-grid:before { + content: "\e7a6" +} + +.el-icon-s-check:before { + content: "\e7a7" +} + +.el-icon-s-data:before { + content: "\e7a8" +} + +.el-icon-s-opportunity:before { + content: "\e7aa" +} + +.el-icon-s-custom:before { + content: "\e7ab" +} + +.el-icon-s-claim:before { + content: "\e7ad" +} + +.el-icon-s-finance:before { + content: "\e7ae" +} + +.el-icon-s-comment:before { + content: "\e7af" +} + +.el-icon-s-flag:before { + content: "\e7b0" +} + +.el-icon-s-marketing:before { + content: "\e7b1" +} + +.el-icon-s-shop:before { + content: "\e7b4" +} + +.el-icon-s-open:before { + content: "\e7b5" +} + +.el-icon-s-management:before { + content: "\e7b6" +} + +.el-icon-s-ticket:before { + content: "\e7b7" +} + +.el-icon-s-release:before { + content: "\e7b8" +} + +.el-icon-s-home:before { + content: "\e7b9" +} + +.el-icon-s-promotion:before { + content: "\e7ba" +} + +.el-icon-s-operation:before { + content: "\e7bb" +} + +.el-icon-s-unfold:before { + content: "\e7bc" +} + +.el-icon-s-fold:before { + content: "\e7a9" +} + +.el-icon-s-platform:before { + content: "\e7bd" +} + +.el-icon-s-order:before { + content: "\e7be" +} + +.el-icon-s-cooperation:before { + content: "\e7bf" +} + +.el-icon-bell:before { + content: "\e725" +} + +.el-icon-message-solid:before { + content: "\e799" +} + +.el-icon-video-camera:before { + content: "\e772" +} + +.el-icon-video-camera-solid:before { + content: "\e796" +} + +.el-icon-camera:before { + content: "\e779" +} + +.el-icon-camera-solid:before { + content: "\e79b" +} + +.el-icon-download:before { + content: "\e77c" +} + +.el-icon-upload2:before { + content: "\e77b" +} + +.el-icon-upload:before { + content: "\e7c3" +} + +.el-icon-picture-outline-round:before { + content: "\e75f" +} + +.el-icon-picture-outline:before { + content: "\e75e" +} + +.el-icon-picture:before { + content: "\e79f" +} + +.el-icon-close:before { + content: "\e6db" +} + +.el-icon-check:before { + content: "\e6da" +} + +.el-icon-plus:before { + content: "\e6d9" +} + +.el-icon-minus:before { + content: "\e6d8" +} + +.el-icon-help:before { + content: "\e73d" +} + +.el-icon-s-help:before { + content: "\e7b3" +} + +.el-icon-circle-close:before { + content: "\e78d" +} + +.el-icon-circle-check:before { + content: "\e720" +} + +.el-icon-circle-plus-outline:before { + content: "\e723" +} + +.el-icon-remove-outline:before { + content: "\e722" +} + +.el-icon-zoom-out:before { + content: "\e776" +} + +.el-icon-zoom-in:before { + content: "\e777" +} + +.el-icon-error:before { + content: "\e79d" +} + +.el-icon-success:before { + content: "\e79c" +} + +.el-icon-circle-plus:before { + content: "\e7a0" +} + +.el-icon-remove:before { + content: "\e7a2" +} + +.el-icon-info:before { + content: "\e7a1" +} + +.el-icon-question:before { + content: "\e7a4" +} + +.el-icon-warning-outline:before { + content: "\e6c9" +} + +.el-icon-warning:before { + content: "\e7a3" +} + +.el-icon-goods:before { + content: "\e7c2" +} + +.el-icon-s-goods:before { + content: "\e7b2" +} + +.el-icon-star-off:before { + content: "\e717" +} + +.el-icon-star-on:before { + content: "\e797" +} + +.el-icon-more-outline:before { + content: "\e6cc" +} + +.el-icon-more:before { + content: "\e794" +} + +.el-icon-phone-outline:before { + content: "\e6cb" +} + +.el-icon-phone:before { + content: "\e795" +} + +.el-icon-user:before { + content: "\e6e3" +} + +.el-icon-user-solid:before { + content: "\e7a5" +} + +.el-icon-setting:before { + content: "\e6ca" +} + +.el-icon-s-tools:before { + content: "\e7ac" +} + +.el-icon-delete:before { + content: "\e6d7" +} + +.el-icon-delete-solid:before { + content: "\e7c9" +} + +.el-icon-eleme:before { + content: "\e7c7" +} + +.el-icon-platform-eleme:before { + content: "\e7ca" +} + +.el-icon-loading { + -webkit-animation: rotating 2s linear infinite; + animation: rotating 2s linear infinite +} + +.el-icon--right { + margin-left: 5px +} + +.el-icon--left { + margin-right: 5px +} + +@-webkit-keyframes rotating { + 0% { + -webkit-transform: rotateZ(0); + transform: rotateZ(0) + } + + 100% { + -webkit-transform: rotateZ(360deg); + transform: rotateZ(360deg) + } +} + +@keyframes rotating { + 0% { + -webkit-transform: rotateZ(0); + transform: rotateZ(0) + } + + 100% { + -webkit-transform: rotateZ(360deg); + transform: rotateZ(360deg) + } +} + +.el-pagination { + white-space: nowrap; + padding: 2px 5px; + color: #303133; + font-weight: 700 +} + +.el-pagination::after, +.el-pagination::before { + display: table; + content: "" +} + +.el-pagination::after { + clear: both +} + +.el-pagination button, +.el-pagination span:not([class*=suffix]) { + display: inline-block; + font-size: 13px; + min-width: 35.5px; + height: 28px; + line-height: 28px; + vertical-align: top; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-pagination .el-input__inner { + text-align: center; + -moz-appearance: textfield; + line-height: normal +} + +.el-pagination .el-input__suffix { + right: 0; + -webkit-transform: scale(.8); + transform: scale(.8) +} + +.el-pagination .el-select .el-input { + width: 100px; + margin: 0 5px +} + +.el-pagination .el-select .el-input .el-input__inner { + padding-right: 25px; + border-radius: 3px +} + +.el-pagination button { + border: none; + padding: 0 6px; + background: 0 0 +} + +.el-pagination button:focus { + outline: 0 +} + +.el-pagination button:hover { + color: #409EFF +} + +.el-pagination button:disabled { + color: #C0C4CC; + background-color: #FFF; + cursor: not-allowed +} + +.el-pagination .btn-next, +.el-pagination .btn-prev { + background: center center no-repeat #FFF; + background-size: 16px; + cursor: pointer; + margin: 0; + color: #303133 +} + +.el-pagination .btn-next .el-icon, +.el-pagination .btn-prev .el-icon { + display: block; + font-size: 12px; + font-weight: 700 +} + +.el-pagination .btn-prev { + padding-right: 12px +} + +.el-pagination .btn-next { + padding-left: 12px +} + +.el-pagination .el-pager li.disabled { + color: #C0C4CC; + cursor: not-allowed +} + +.el-pager li, +.el-pager li.btn-quicknext:hover, +.el-pager li.btn-quickprev:hover { + cursor: pointer +} + +.el-pagination--small .btn-next, +.el-pagination--small .btn-prev, +.el-pagination--small .el-pager li, +.el-pagination--small .el-pager li.btn-quicknext, +.el-pagination--small .el-pager li.btn-quickprev, +.el-pagination--small .el-pager li:last-child { + border-color: transparent; + font-size: 12px; + line-height: 22px; + height: 22px; + min-width: 22px +} + +.el-pagination--small .arrow.disabled { + visibility: hidden +} + +.el-pagination--small .more::before, +.el-pagination--small li.more::before { + line-height: 24px +} + +.el-pagination--small button, +.el-pagination--small span:not([class*=suffix]) { + height: 22px; + line-height: 22px +} + +.el-pagination--small .el-pagination__editor, +.el-pagination--small .el-pagination__editor.el-input .el-input__inner { + height: 22px +} + +.el-pagination__sizes { + margin: 0 10px 0 0; + font-weight: 400; + color: #606266 +} + +.el-pagination__sizes .el-input .el-input__inner { + font-size: 13px; + padding-left: 8px +} + +.el-pagination__sizes .el-input .el-input__inner:hover { + border-color: #409EFF +} + +.el-pagination__total { + margin-right: 10px; + font-weight: 400; + color: #606266 +} + +.el-pagination__jump { + margin-left: 24px; + font-weight: 400; + color: #606266 +} + +.el-pagination__jump .el-input__inner { + padding: 0 3px +} + +.el-pagination__rightwrapper { + float: right +} + +.el-pagination__editor { + line-height: 18px; + padding: 0 2px; + height: 28px; + text-align: center; + margin: 0 2px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 3px +} + +.el-pager, +.el-pagination.is-background .btn-next, +.el-pagination.is-background .btn-prev { + padding: 0 +} + +.el-dialog, +.el-pager li { + -webkit-box-sizing: border-box +} + +.el-pagination__editor.el-input { + width: 50px +} + +.el-pagination__editor.el-input .el-input__inner { + height: 28px +} + +.el-pagination__editor .el-input__inner::-webkit-inner-spin-button, +.el-pagination__editor .el-input__inner::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0 +} + +.el-pagination.is-background .btn-next, +.el-pagination.is-background .btn-prev, +.el-pagination.is-background .el-pager li { + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px +} + +.el-pagination.is-background .btn-next.disabled, +.el-pagination.is-background .btn-next:disabled, +.el-pagination.is-background .btn-prev.disabled, +.el-pagination.is-background .btn-prev:disabled, +.el-pagination.is-background .el-pager li.disabled { + color: #C0C4CC +} + +.el-pagination.is-background .el-pager li:not(.disabled):hover { + color: #409EFF +} + +.el-pagination.is-background .el-pager li:not(.disabled).active { + background-color: #409EFF; + color: #FFF +} + +.el-pagination.is-background.el-pagination--small .btn-next, +.el-pagination.is-background.el-pagination--small .btn-prev, +.el-pagination.is-background.el-pagination--small .el-pager li { + margin: 0 3px; + min-width: 22px +} + +.el-pager, +.el-pager li { + vertical-align: top; + margin: 0; + display: inline-block +} + +.el-pager { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + list-style: none; + font-size: 0 +} + +.el-pager .more::before { + line-height: 30px +} + +.el-pager li { + padding: 0 4px; + background: #FFF; + font-size: 13px; + min-width: 35.5px; + height: 28px; + line-height: 28px; + box-sizing: border-box; + text-align: center +} + +.el-pager li.btn-quicknext, +.el-pager li.btn-quickprev { + line-height: 28px; + color: #303133 +} + +.el-pager li.btn-quicknext.disabled, +.el-pager li.btn-quickprev.disabled { + color: #C0C4CC +} + +.el-pager li.active+li { + border-left: 0 +} + +.el-pager li:hover { + color: #409EFF +} + +.el-pager li.active { + color: #409EFF; + cursor: default +} + +@-webkit-keyframes v-modal-in { + 0% { + opacity: 0 + } +} + +@-webkit-keyframes v-modal-out { + 100% { + opacity: 0 + } +} + +.el-dialog { + position: relative; + margin: 0 auto 50px; + background: #FFF; + border-radius: 2px; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); + box-shadow: 0 1px 3px rgba(0, 0, 0, .3); + box-sizing: border-box; + width: 50% +} + +.el-dialog.is-fullscreen { + width: 100%; + margin-top: 0; + margin-bottom: 0; + height: 100%; + overflow: auto +} + +.el-dialog__wrapper { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + margin: 0 +} + +.el-dialog__header { + padding: 20px 20px 10px +} + +.el-dialog__headerbtn { + position: absolute; + top: 20px; + right: 20px; + padding: 0; + background: 0 0; + border: none; + outline: 0; + cursor: pointer; + font-size: 16px +} + +.el-dialog__headerbtn .el-dialog__close { + color: #909399 +} + +.el-dialog__headerbtn:focus .el-dialog__close, +.el-dialog__headerbtn:hover .el-dialog__close { + color: #409EFF +} + +.el-dialog__title { + line-height: 24px; + font-size: 18px; + color: #303133 +} + +.el-dialog__body { + padding: 30px 20px; + color: #606266; + font-size: 14px; + word-break: break-all +} + +.el-dialog__footer { + padding: 10px 20px 20px; + text-align: right; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-dialog--center { + text-align: center +} + +.el-dialog--center .el-dialog__body { + text-align: initial; + padding: 25px 25px 30px +} + +.el-dialog--center .el-dialog__footer { + text-align: inherit +} + +.dialog-fade-enter-active { + -webkit-animation: dialog-fade-in .3s; + animation: dialog-fade-in .3s +} + +.dialog-fade-leave-active { + -webkit-animation: dialog-fade-out .3s; + animation: dialog-fade-out .3s +} + +@-webkit-keyframes dialog-fade-in { + 0% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } +} + +@keyframes dialog-fade-in { + 0% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } +} + +@-webkit-keyframes dialog-fade-out { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } + + 100% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } +} + +@keyframes dialog-fade-out { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } + + 100% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } +} + +.el-autocomplete { + position: relative; + display: inline-block +} + +.el-autocomplete-suggestion { + margin: 5px 0; + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + border-radius: 4px; + border: 1px solid #E4E7ED; + -webkit-box-sizing: border-box; + box-sizing: border-box; + background-color: #FFF +} + +.el-autocomplete-suggestion__wrap { + max-height: 280px; + padding: 10px 0; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-autocomplete-suggestion__list { + margin: 0; + padding: 0 +} + +.el-autocomplete-suggestion li { + padding: 0 20px; + margin: 0; + line-height: 34px; + cursor: pointer; + color: #606266; + font-size: 14px; + list-style: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis +} + +.el-autocomplete-suggestion li.highlighted, +.el-autocomplete-suggestion li:hover { + background-color: #F5F7FA +} + +.el-autocomplete-suggestion li.divider { + margin-top: 6px; + border-top: 1px solid #000 +} + +.el-autocomplete-suggestion li.divider:last-child { + margin-bottom: -6px +} + +.el-autocomplete-suggestion.is-loading li { + text-align: center; + height: 100px; + line-height: 100px; + font-size: 20px; + color: #999 +} + +.el-autocomplete-suggestion.is-loading li::after { + display: inline-block; + content: ""; + height: 100%; + vertical-align: middle +} + +.el-autocomplete-suggestion.is-loading li:hover { + background-color: #FFF +} + +.el-autocomplete-suggestion.is-loading .el-icon-loading { + vertical-align: middle +} + +.el-dropdown { + display: inline-block; + position: relative; + color: #606266; + font-size: 14px +} + +.el-dropdown .el-button-group { + display: block +} + +.el-dropdown .el-button-group .el-button { + float: none +} + +.el-dropdown .el-dropdown__caret-button { + padding-left: 5px; + padding-right: 5px; + position: relative; + border-left: none +} + +.el-dropdown .el-dropdown__caret-button::before { + content: ''; + position: absolute; + display: block; + width: 1px; + top: 5px; + bottom: 5px; + left: 0; + background: rgba(255, 255, 255, .5) +} + +.el-dropdown .el-dropdown__caret-button.el-button--default::before { + background: rgba(220, 223, 230, .5) +} + +.el-dropdown .el-dropdown__caret-button:hover:not(.is-disabled)::before { + top: 0; + bottom: 0 +} + +.el-dropdown .el-dropdown__caret-button .el-dropdown__icon { + padding-left: 0 +} + +.el-dropdown__icon { + font-size: 12px; + margin: 0 3px +} + +.el-dropdown .el-dropdown-selfdefine:focus:active, +.el-dropdown .el-dropdown-selfdefine:focus:not(.focusing) { + outline-width: 0 +} + +.el-dropdown [disabled] { + cursor: not-allowed; + color: #bbb +} + +.el-dropdown-menu { + position: absolute; + top: 0; + left: 0; + z-index: 10; + padding: 10px 0; + margin: 5px 0; + background-color: #FFF; + border: 1px solid #EBEEF5; + border-radius: 4px; + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) +} + +.el-dropdown-menu__item, +.el-menu-item { + font-size: 14px; + padding: 0 20px; + cursor: pointer +} + +.el-dropdown-menu__item { + list-style: none; + line-height: 36px; + margin: 0; + color: #606266; + outline: 0 +} + +.el-dropdown-menu__item:focus, +.el-dropdown-menu__item:not(.is-disabled):hover { + background-color: #ecf5ff; + color: #66b1ff +} + +.el-dropdown-menu__item i { + margin-right: 5px +} + +.el-dropdown-menu__item--divided { + position: relative; + margin-top: 6px; + border-top: 1px solid #EBEEF5 +} + +.el-dropdown-menu__item--divided:before { + content: ''; + height: 6px; + display: block; + margin: 0 -20px; + background-color: #FFF +} + +.el-dropdown-menu__item.is-disabled { + cursor: default; + color: #bbb; + pointer-events: none +} + +.el-dropdown-menu--medium { + padding: 6px 0 +} + +.el-dropdown-menu--medium .el-dropdown-menu__item { + line-height: 30px; + padding: 0 17px; + font-size: 14px +} + +.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided { + margin-top: 6px +} + +.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided:before { + height: 6px; + margin: 0 -17px +} + +.el-dropdown-menu--small { + padding: 6px 0 +} + +.el-dropdown-menu--small .el-dropdown-menu__item { + line-height: 27px; + padding: 0 15px; + font-size: 13px +} + +.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided { + margin-top: 4px +} + +.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided:before { + height: 4px; + margin: 0 -15px +} + +.el-dropdown-menu--mini { + padding: 3px 0 +} + +.el-dropdown-menu--mini .el-dropdown-menu__item { + line-height: 24px; + padding: 0 10px; + font-size: 12px +} + +.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided { + margin-top: 3px +} + +.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided:before { + height: 3px; + margin: 0 -10px +} + +.el-menu { + border-right: solid 1px #e6e6e6; + list-style: none; + position: relative; + margin: 0; + padding-left: 0; + background-color: #FFF +} + +.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, +.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, +.el-menu--horizontal>.el-submenu .el-submenu__title:hover { + background-color: #fff +} + +.el-menu::after, +.el-menu::before { + display: table; + content: "" +} + +.el-breadcrumb__item:last-child .el-breadcrumb__separator, +.el-menu--collapse>.el-menu-item .el-submenu__icon-arrow, +.el-menu--collapse>.el-submenu>.el-submenu__title .el-submenu__icon-arrow { + display: none +} + +.el-menu::after { + clear: both +} + +.el-menu.el-menu--horizontal { + border-bottom: solid 1px #e6e6e6 +} + +.el-menu--horizontal { + border-right: none +} + +.el-menu--horizontal>.el-menu-item { + float: left; + height: 60px; + line-height: 60px; + margin: 0; + border-bottom: 2px solid transparent; + color: #909399 +} + +.el-menu--horizontal>.el-menu-item a, +.el-menu--horizontal>.el-menu-item a:hover { + color: inherit +} + +.el-menu--horizontal>.el-submenu { + float: left +} + +.el-menu--horizontal>.el-submenu:focus, +.el-menu--horizontal>.el-submenu:hover { + outline: 0 +} + +.el-menu--horizontal>.el-submenu:focus .el-submenu__title, +.el-menu--horizontal>.el-submenu:hover .el-submenu__title { + color: #303133 +} + +.el-menu--horizontal>.el-submenu.is-active .el-submenu__title { + border-bottom: 2px solid #409EFF; + color: #303133 +} + +.el-menu--horizontal>.el-submenu .el-submenu__title { + height: 60px; + line-height: 60px; + border-bottom: 2px solid transparent; + color: #909399 +} + +.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow { + position: static; + vertical-align: middle; + margin-left: 8px; + margin-top: -3px +} + +.el-menu--collapse .el-submenu, +.el-menu-item { + position: relative +} + +.el-menu--horizontal .el-menu .el-menu-item, +.el-menu--horizontal .el-menu .el-submenu__title { + background-color: #FFF; + float: none; + height: 36px; + line-height: 36px; + padding: 0 10px; + color: #909399 +} + +.el-menu--horizontal .el-menu .el-menu-item.is-active, +.el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title { + color: #303133 +} + +.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, +.el-menu--horizontal .el-menu-item:not(.is-disabled):hover { + outline: 0; + color: #303133 +} + +.el-menu--horizontal>.el-menu-item.is-active { + border-bottom: 2px solid #409EFF; + color: #303133 +} + +.el-menu--collapse { + width: 64px +} + +.el-menu--collapse>.el-menu-item [class^=el-icon-], +.el-menu--collapse>.el-submenu>.el-submenu__title [class^=el-icon-] { + margin: 0; + vertical-align: middle; + width: 24px; + text-align: center +} + +.el-menu--collapse>.el-menu-item span, +.el-menu--collapse>.el-submenu>.el-submenu__title span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block +} + +.el-menu-item, +.el-submenu__title { + height: 56px; + line-height: 56px; + list-style: none +} + +.el-menu--collapse>.el-menu-item.is-active i { + color: inherit +} + +.el-menu--collapse .el-menu .el-submenu { + min-width: 200px +} + +.el-menu--collapse .el-submenu .el-menu { + position: absolute; + margin-left: 5px; + top: 0; + left: 100%; + z-index: 10; + border: 1px solid #E4E7ED; + border-radius: 2px; + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) +} + +.el-menu--collapse .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow { + -webkit-transform: none; + transform: none +} + +.el-menu--popup { + z-index: 100; + min-width: 200px; + border: none; + padding: 5px 0; + border-radius: 2px; + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) +} + +.el-menu--popup-bottom-start { + margin-top: 5px +} + +.el-menu--popup-right-start { + margin-left: 5px; + margin-right: 5px +} + +.el-menu-item { + color: #303133; + -webkit-transition: border-color .3s, background-color .3s, color .3s; + transition: border-color .3s, background-color .3s, color .3s; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap +} + +.el-radio-button__inner, +.el-submenu__title { + -webkit-box-sizing: border-box; + position: relative; + white-space: nowrap +} + +.el-menu-item * { + vertical-align: middle +} + +.el-menu-item i { + color: #909399 +} + +.el-menu-item:focus, +.el-menu-item:hover { + outline: 0; + background-color: #ecf5ff +} + +.el-menu-item.is-disabled { + opacity: .25; + cursor: not-allowed; + background: 0 0 !important +} + +.el-menu-item [class^=el-icon-] { + margin-right: 5px; + width: 24px; + text-align: center; + font-size: 18px; + vertical-align: middle +} + +.el-menu-item.is-active { + color: #409EFF +} + +.el-menu-item.is-active i { + color: inherit +} + +.el-submenu { + list-style: none; + margin: 0; + padding-left: 0 +} + +.el-submenu__title { + font-size: 14px; + color: #303133; + padding: 0 20px; + cursor: pointer; + -webkit-transition: border-color .3s, background-color .3s, color .3s; + transition: border-color .3s, background-color .3s, color .3s; + box-sizing: border-box +} + +.el-submenu__title * { + vertical-align: middle +} + +.el-submenu__title i { + color: #909399 +} + +.el-submenu__title:focus, +.el-submenu__title:hover { + outline: 0; + background-color: #ecf5ff +} + +.el-submenu__title.is-disabled { + opacity: .25; + cursor: not-allowed; + background: 0 0 !important +} + +.el-submenu__title:hover { + background-color: #ecf5ff +} + +.el-submenu .el-menu { + border: none +} + +.el-submenu .el-menu-item { + height: 50px; + line-height: 50px; + padding: 0 45px; + min-width: 200px +} + +.el-submenu__icon-arrow { + position: absolute; + top: 50%; + right: 20px; + margin-top: -7px; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + font-size: 12px +} + +.el-submenu.is-active .el-submenu__title { + border-bottom-color: #409EFF +} + +.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow { + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg) +} + +.el-submenu.is-disabled .el-menu-item, +.el-submenu.is-disabled .el-submenu__title { + opacity: .25; + cursor: not-allowed; + background: 0 0 !important +} + +.el-submenu [class^=el-icon-] { + vertical-align: middle; + margin-right: 5px; + width: 24px; + text-align: center; + font-size: 18px +} + +.el-menu-item-group>ul { + padding: 0 +} + +.el-menu-item-group__title { + padding: 7px 0 7px 20px; + line-height: normal; + font-size: 12px; + color: #909399 +} + +.el-radio-button__inner, +.el-radio-group { + display: inline-block; + line-height: 1; + vertical-align: middle +} + +.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow { + -webkit-transition: .2s; + transition: .2s; + opacity: 0 +} + +.el-radio-group { + font-size: 0 +} + +.el-radio-button { + position: relative; + display: inline-block; + outline: 0 +} + +.el-radio-button__inner { + background: #FFF; + border: 1px solid #DCDFE6; + font-weight: 500; + border-left: 0; + color: #606266; + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: 0; + margin: 0; + cursor: pointer; + -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); + transition: all .3s cubic-bezier(.645, .045, .355, 1); + padding: 12px 20px; + font-size: 14px; + border-radius: 0 +} + +.el-radio-button__inner.is-round { + padding: 12px 20px +} + +.el-radio-button__inner:hover { + color: #409EFF +} + +.el-radio-button__inner [class*=el-icon-] { + line-height: .9 +} + +.el-radio-button__inner [class*=el-icon-]+span { + margin-left: 5px +} + +.el-radio-button:first-child .el-radio-button__inner { + border-left: 1px solid #DCDFE6; + border-radius: 4px 0 0 4px; + -webkit-box-shadow: none !important; + box-shadow: none !important +} + +.el-radio-button__orig-radio { + opacity: 0; + outline: 0; + position: absolute; + z-index: -1 +} + +.el-radio-button__orig-radio:checked+.el-radio-button__inner { + color: #FFF; + background-color: #409EFF; + border-color: #409EFF; + -webkit-box-shadow: -1px 0 0 0 #409EFF; + box-shadow: -1px 0 0 0 #409EFF +} + +.el-radio-button__orig-radio:disabled+.el-radio-button__inner { + color: #C0C4CC; + cursor: not-allowed; + background-image: none; + background-color: #FFF; + border-color: #EBEEF5; + -webkit-box-shadow: none; + box-shadow: none +} + +.el-radio-button__orig-radio:disabled:checked+.el-radio-button__inner { + background-color: #F2F6FC +} + +.el-radio-button:last-child .el-radio-button__inner { + border-radius: 0 4px 4px 0 +} + +.el-radio-button:first-child:last-child .el-radio-button__inner { + border-radius: 4px +} + +.el-radio-button--medium .el-radio-button__inner { + padding: 10px 20px; + font-size: 14px; + border-radius: 0 +} + +.el-radio-button--medium .el-radio-button__inner.is-round { + padding: 10px 20px +} + +.el-radio-button--small .el-radio-button__inner { + padding: 9px 15px; + font-size: 12px; + border-radius: 0 +} + +.el-radio-button--small .el-radio-button__inner.is-round { + padding: 9px 15px +} + +.el-radio-button--mini .el-radio-button__inner { + padding: 7px 15px; + font-size: 12px; + border-radius: 0 +} + +.el-radio-button--mini .el-radio-button__inner.is-round { + padding: 7px 15px +} + +.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) { + -webkit-box-shadow: 0 0 2px 2px #409EFF; + box-shadow: 0 0 2px 2px #409EFF +} + +.el-picker-panel, +.el-popover, +.el-select-dropdown, +.el-table-filter, +.el-time-panel { + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) +} + +.el-switch { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + font-size: 14px; + line-height: 20px; + height: 20px; + vertical-align: middle +} + +.el-switch__core, +.el-switch__label { + display: inline-block; + cursor: pointer +} + +.el-switch.is-disabled .el-switch__core, +.el-switch.is-disabled .el-switch__label { + cursor: not-allowed +} + +.el-switch__label { + -webkit-transition: .2s; + transition: .2s; + height: 20px; + font-size: 14px; + font-weight: 500; + vertical-align: middle; + color: #303133 +} + +.el-switch__label.is-active { + color: #409EFF +} + +.el-switch__label--left { + margin-right: 10px +} + +.el-switch__label--right { + margin-left: 10px +} + +.el-switch__label * { + line-height: 1; + font-size: 14px; + display: inline-block +} + +.el-switch__input { + position: absolute; + width: 0; + height: 0; + opacity: 0; + margin: 0 +} + +.el-switch__core { + margin: 0; + position: relative; + width: 40px; + height: 20px; + border: 1px solid #DCDFE6; + outline: 0; + border-radius: 10px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + background: #DCDFE6; + -webkit-transition: border-color .3s, background-color .3s; + transition: border-color .3s, background-color .3s; + vertical-align: middle +} + +.el-input__prefix, +.el-input__suffix { + -webkit-transition: all .3s; + color: #C0C4CC +} + +.el-switch__core:after { + content: ""; + position: absolute; + top: 1px; + left: 1px; + border-radius: 100%; + -webkit-transition: all .3s; + transition: all .3s; + width: 16px; + height: 16px; + background-color: #FFF +} + +.el-switch.is-checked .el-switch__core { + border-color: #409EFF; + background-color: #409EFF +} + +.el-switch.is-checked .el-switch__core::after { + left: 100%; + margin-left: -17px +} + +.el-switch.is-disabled { + opacity: .6 +} + +.el-switch--wide .el-switch__label.el-switch__label--left span { + left: 10px +} + +.el-switch--wide .el-switch__label.el-switch__label--right span { + right: 10px +} + +.el-switch .label-fade-enter, +.el-switch .label-fade-leave-active { + opacity: 0 +} + +.el-select-dropdown { + position: absolute; + z-index: 1001; + border: 1px solid #E4E7ED; + border-radius: 4px; + background-color: #FFF; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 5px 0 +} + +.el-select-dropdown.is-multiple .el-select-dropdown__item { + padding-right: 40px +} + +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected { + color: #409EFF; + background-color: #FFF +} + +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover { + background-color: #F5F7FA +} + +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after { + position: absolute; + right: 20px; + font-family: element-icons; + content: "\e6da"; + font-size: 12px; + font-weight: 700; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list { + padding: 0 +} + +.el-select-dropdown__empty { + padding: 10px 0; + margin: 0; + text-align: center; + color: #999; + font-size: 14px +} + +.el-select-dropdown__wrap { + max-height: 274px +} + +.el-select-dropdown__list { + list-style: none; + padding: 6px 0; + margin: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-select-dropdown__item { + font-size: 14px; + padding: 0 20px; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #606266; + height: 34px; + line-height: 34px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + cursor: pointer +} + +.el-select-dropdown__item.is-disabled { + color: #C0C4CC; + cursor: not-allowed +} + +.el-select-dropdown__item.is-disabled:hover { + background-color: #FFF +} + +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover { + background-color: #F5F7FA +} + +.el-select-dropdown__item.selected { + color: #409EFF; + font-weight: 700 +} + +.el-select-group { + margin: 0; + padding: 0 +} + +.el-select-group__wrap { + position: relative; + list-style: none; + margin: 0; + padding: 0 +} + +.el-select-group__wrap:not(:last-of-type) { + padding-bottom: 24px +} + +.el-select-group__wrap:not(:last-of-type)::after { + content: ''; + position: absolute; + display: block; + left: 20px; + right: 20px; + bottom: 12px; + height: 1px; + background: #E4E7ED +} + +.el-select-group__title { + padding-left: 20px; + font-size: 12px; + color: #909399; + line-height: 30px +} + +.el-select-group .el-select-dropdown__item { + padding-left: 20px +} + +.el-select { + display: inline-block; + position: relative +} + +.el-select .el-select__tags>span { + display: contents +} + +.el-select:hover .el-input__inner { + border-color: #C0C4CC +} + +.el-select .el-input__inner { + cursor: pointer; + padding-right: 35px +} + +.el-select .el-input__inner:focus { + border-color: #409EFF +} + +.el-select .el-input .el-select__caret { + color: #C0C4CC; + font-size: 14px; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg); + cursor: pointer +} + +.el-select .el-input .el-select__caret.is-reverse { + -webkit-transform: rotateZ(0); + transform: rotateZ(0) +} + +.el-select .el-input .el-select__caret.is-show-close { + font-size: 14px; + text-align: center; + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg); + border-radius: 100%; + color: #C0C4CC; + -webkit-transition: color .2s cubic-bezier(.645, .045, .355, 1); + transition: color .2s cubic-bezier(.645, .045, .355, 1) +} + +.el-select .el-input .el-select__caret.is-show-close:hover { + color: #909399 +} + +.el-select .el-input.is-disabled .el-input__inner { + cursor: not-allowed +} + +.el-select .el-input.is-disabled .el-input__inner:hover { + border-color: #E4E7ED +} + +.el-range-editor.is-active, +.el-range-editor.is-active:hover, +.el-select .el-input.is-focus .el-input__inner { + border-color: #409EFF +} + +.el-select>.el-input { + display: block +} + +.el-select__input { + border: none; + outline: 0; + padding: 0; + margin-left: 15px; + color: #666; + font-size: 14px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + height: 28px; + background-color: transparent +} + +.el-select__input.is-mini { + height: 14px +} + +.el-select__close { + cursor: pointer; + position: absolute; + top: 8px; + z-index: 1000; + right: 25px; + color: #C0C4CC; + line-height: 18px; + font-size: 14px +} + +.el-select__close:hover { + color: #909399 +} + +.el-select__tags { + position: absolute; + line-height: normal; + white-space: normal; + z-index: 1; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap +} + +.el-select__tags-text { + overflow: hidden; + text-overflow: ellipsis +} + +.el-select .el-tag { + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-color: transparent; + margin: 2px 0 2px 6px; + background-color: #f0f2f5; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + max-width: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.el-select .el-tag__close.el-icon-close { + background-color: #C0C4CC; + top: 0; + color: #FFF; + -ms-flex-negative: 0; + flex-shrink: 0 +} + +.el-select .el-tag__close.el-icon-close:hover { + background-color: #909399 +} + +.el-table, +.el-table__expanded-cell { + background-color: #FFF +} + +.el-select .el-tag__close.el-icon-close::before { + display: block; + -webkit-transform: translate(0, .5px); + transform: translate(0, .5px) +} + +.el-table { + position: relative; + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + width: 100%; + max-width: 100%; + font-size: 14px; + color: #606266 +} + +.el-table__empty-block { + min-height: 60px; + text-align: center; + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.el-table__empty-text { + line-height: 60px; + width: 50%; + color: #909399 +} + +.el-table__expand-column .cell { + padding: 0; + text-align: center +} + +.el-table__expand-icon { + position: relative; + cursor: pointer; + color: #666; + font-size: 12px; + -webkit-transition: -webkit-transform .2s ease-in-out; + transition: -webkit-transform .2s ease-in-out; + transition: transform .2s ease-in-out; + transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; + height: 20px +} + +.el-table__expand-icon--expanded { + -webkit-transform: rotate(90deg); + transform: rotate(90deg) +} + +.el-table__expand-icon>.el-icon { + position: absolute; + left: 50%; + top: 50%; + margin-left: -5px; + margin-top: -5px +} + +.el-table__expanded-cell[class*=cell] { + padding: 20px 50px +} + +.el-table__expanded-cell:hover { + background-color: transparent !important +} + +.el-table__placeholder { + display: inline-block; + width: 20px +} + +.el-table__append-wrapper { + overflow: hidden +} + +.el-table--fit { + border-right: 0; + border-bottom: 0 +} + +.el-table--fit .el-table__cell.gutter { + border-right-width: 1px +} + +.el-table--scrollable-x .el-table__body-wrapper { + overflow-x: auto +} + +.el-table--scrollable-y .el-table__body-wrapper { + overflow-y: auto +} + +.el-table thead { + color: #909399; + font-weight: 500 +} + +.el-table thead.is-group th.el-table__cell { + background: #F5F7FA +} + +.el-table .el-table__cell { + padding: 12px 0; + min-width: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + text-overflow: ellipsis; + vertical-align: middle; + position: relative; + text-align: left +} + +.el-table .el-table__cell.is-center { + text-align: center +} + +.el-table .el-table__cell.is-right { + text-align: right +} + +.el-table .el-table__cell.gutter { + width: 15px; + border-right-width: 0; + border-bottom-width: 0; + padding: 0 +} + +.el-table .el-table__cell.is-hidden>* { + visibility: hidden +} + +.el-table--medium .el-table__cell { + padding: 10px 0 +} + +.el-table--small { + font-size: 12px +} + +.el-table--small .el-table__cell { + padding: 8px 0 +} + +.el-table--mini { + font-size: 12px +} + +.el-table--mini .el-table__cell { + padding: 6px 0 +} + +.el-table tr { + background-color: #FFF +} + +.el-table tr input[type=checkbox] { + margin: 0 +} + +.el-table td.el-table__cell, +.el-table th.el-table__cell.is-leaf { + border-bottom: 1px solid #EBEEF5 +} + +.el-table th.el-table__cell.is-sortable { + cursor: pointer +} + +.el-table th.el-table__cell { + overflow: hidden; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #FFF +} + +.el-table th.el-table__cell>.cell { + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + vertical-align: middle; + padding-left: 10px; + padding-right: 10px; + width: 100% +} + +.el-table th.el-table__cell>.cell.highlight { + color: #409EFF +} + +.el-table th.el-table__cell.required>div::before { + display: inline-block; + content: ""; + width: 8px; + height: 8px; + border-radius: 50%; + background: #ff4d51; + margin-right: 5px; + vertical-align: middle +} + +.el-table td.el-table__cell div { + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-date-table td, +.el-table .cell, +.el-table-filter { + -webkit-box-sizing: border-box +} + +.el-table td.el-table__cell.gutter { + width: 0 +} + +.el-table .cell { + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + word-break: break-all; + line-height: 23px; + padding-left: 10px; + padding-right: 10px +} + +.el-table .cell.el-tooltip { + white-space: nowrap; + min-width: 50px +} + +.el-table--border, +.el-table--group { + border: 1px solid #EBEEF5 +} + +.el-table--border::after, +.el-table--group::after, +.el-table::before { + content: ''; + position: absolute; + background-color: #EBEEF5; + z-index: 1 +} + +.el-table--border::after, +.el-table--group::after { + top: 0; + right: 0; + width: 1px; + height: 100% +} + +.el-table::before { + left: 0; + bottom: 0; + width: 100%; + height: 1px +} + +.el-table--border { + border-right: none; + border-bottom: none +} + +.el-table--border.el-loading-parent--relative { + border-color: transparent +} + +.el-table--border .el-table__cell, +.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { + border-right: 1px solid #EBEEF5 +} + +.el-table--border .el-table__cell:first-child .cell { + padding-left: 10px +} + +.el-table--border th.el-table__cell.gutter:last-of-type { + border-bottom: 1px solid #EBEEF5; + border-bottom-width: 1px +} + +.el-table--border th.el-table__cell, +.el-table__fixed-right-patch { + border-bottom: 1px solid #EBEEF5 +} + +.el-table--hidden { + visibility: hidden +} + +.el-table__fixed, +.el-table__fixed-right { + position: absolute; + top: 0; + left: 0; + overflow-x: hidden; + overflow-y: hidden; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .12); + box-shadow: 0 0 10px rgba(0, 0, 0, .12) +} + +.el-table__fixed-right::before, +.el-table__fixed::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1px; + background-color: #EBEEF5; + z-index: 4 +} + +.el-table__fixed-right-patch { + position: absolute; + top: -1px; + right: 0; + background-color: #FFF +} + +.el-table__fixed-right { + top: 0; + left: auto; + right: 0 +} + +.el-table__fixed-right .el-table__fixed-body-wrapper, +.el-table__fixed-right .el-table__fixed-footer-wrapper, +.el-table__fixed-right .el-table__fixed-header-wrapper { + left: auto; + right: 0 +} + +.el-table__fixed-header-wrapper { + position: absolute; + left: 0; + top: 0; + z-index: 3 +} + +.el-table__fixed-footer-wrapper { + position: absolute; + left: 0; + bottom: 0; + z-index: 3 +} + +.el-table__fixed-footer-wrapper tbody td.el-table__cell { + border-top: 1px solid #EBEEF5; + background-color: #F5F7FA; + color: #606266 +} + +.el-table__fixed-body-wrapper { + position: absolute; + left: 0; + top: 37px; + overflow: hidden; + z-index: 3 +} + +.el-table__body-wrapper, +.el-table__footer-wrapper, +.el-table__header-wrapper { + width: 100% +} + +.el-table__footer-wrapper { + margin-top: -1px +} + +.el-table__footer-wrapper td.el-table__cell { + border-top: 1px solid #EBEEF5 +} + +.el-table__body, +.el-table__footer, +.el-table__header { + table-layout: fixed; + border-collapse: separate +} + +.el-table__footer-wrapper, +.el-table__header-wrapper { + overflow: hidden +} + +.el-table__footer-wrapper tbody td.el-table__cell, +.el-table__header-wrapper tbody td.el-table__cell { + background-color: #F5F7FA; + color: #606266 +} + +.el-table__body-wrapper { + overflow: hidden; + position: relative +} + +.el-table__body-wrapper.is-scrolling-left~.el-table__fixed, +.el-table__body-wrapper.is-scrolling-none~.el-table__fixed, +.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right, +.el-table__body-wrapper.is-scrolling-right~.el-table__fixed-right { + -webkit-box-shadow: none; + box-shadow: none +} + +.el-table__body-wrapper .el-table--border.is-scrolling-right~.el-table__fixed-right { + border-left: 1px solid #EBEEF5 +} + +.el-table .caret-wrapper { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 34px; + width: 24px; + vertical-align: middle; + cursor: pointer; + overflow: initial; + position: relative +} + +.el-table .sort-caret { + width: 0; + height: 0; + border: 5px solid transparent; + position: absolute; + left: 7px +} + +.el-table .sort-caret.ascending { + border-bottom-color: #C0C4CC; + top: 5px +} + +.el-table .sort-caret.descending { + border-top-color: #C0C4CC; + bottom: 7px +} + +.el-table .ascending .sort-caret.ascending { + border-bottom-color: #409EFF +} + +.el-table .descending .sort-caret.descending { + border-top-color: #409EFF +} + +.el-table .hidden-columns { + visibility: hidden; + position: absolute; + z-index: -1 +} + +.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { + background: #FAFAFA +} + +.el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell { + background-color: #ecf5ff +} + +.el-table__body tr.hover-row.current-row>td.el-table__cell, +.el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, +.el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, +.el-table__body tr.hover-row>td.el-table__cell { + background-color: #F5F7FA +} + +.el-table__body tr.current-row>td.el-table__cell { + background-color: #ecf5ff +} + +.el-table__column-resize-proxy { + position: absolute; + left: 200px; + top: 0; + bottom: 0; + width: 0; + border-left: 1px solid #EBEEF5; + z-index: 10 +} + +.el-table__column-filter-trigger { + display: inline-block; + line-height: 34px; + cursor: pointer +} + +.el-table__column-filter-trigger i { + color: #909399; + font-size: 12px; + -webkit-transform: scale(.75); + transform: scale(.75) +} + +.el-table--enable-row-transition .el-table__body td.el-table__cell { + -webkit-transition: background-color .25s ease; + transition: background-color .25s ease +} + +.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { + background-color: #F5F7FA +} + +.el-table--fluid-height .el-table__fixed, +.el-table--fluid-height .el-table__fixed-right { + bottom: 0; + overflow: hidden +} + +.el-table [class*=el-table__row--level] .el-table__expand-icon { + display: inline-block; + width: 20px; + line-height: 20px; + height: 20px; + text-align: center; + margin-right: 3px +} + +.el-table-column--selection .cell { + padding-left: 14px; + padding-right: 14px +} + +.el-table-filter { + border: 1px solid #EBEEF5; + border-radius: 2px; + background-color: #FFF; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + box-sizing: border-box; + margin: 2px 0 +} + +.el-table-filter__list { + padding: 5px 0; + margin: 0; + list-style: none; + min-width: 100px +} + +.el-table-filter__list-item { + line-height: 36px; + padding: 0 10px; + cursor: pointer; + font-size: 14px +} + +.el-table-filter__list-item:hover { + background-color: #ecf5ff; + color: #66b1ff +} + +.el-table-filter__list-item.is-active { + background-color: #409EFF; + color: #FFF +} + +.el-table-filter__content { + min-width: 100px +} + +.el-table-filter__bottom { + border-top: 1px solid #EBEEF5; + padding: 8px +} + +.el-table-filter__bottom button { + background: 0 0; + border: none; + color: #606266; + cursor: pointer; + font-size: 13px; + padding: 0 3px +} + +.el-date-table td.in-range div, +.el-date-table td.in-range div:hover, +.el-date-table.is-week-mode .el-date-table__row.current div, +.el-date-table.is-week-mode .el-date-table__row:hover div { + background-color: #F2F6FC +} + +.el-table-filter__bottom button:hover { + color: #409EFF +} + +.el-table-filter__bottom button:focus { + outline: 0 +} + +.el-table-filter__bottom button.is-disabled { + color: #C0C4CC; + cursor: not-allowed +} + +.el-table-filter__wrap { + max-height: 280px +} + +.el-table-filter__checkbox-group { + padding: 10px +} + +.el-table-filter__checkbox-group label.el-checkbox { + display: block; + margin-right: 5px; + margin-bottom: 8px; + margin-left: 5px +} + +.el-table-filter__checkbox-group .el-checkbox:last-child { + margin-bottom: 0 +} + +.el-date-table { + font-size: 12px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.el-date-table.is-week-mode .el-date-table__row:hover td.available:hover { + color: #606266 +} + +.el-date-table.is-week-mode .el-date-table__row:hover td:first-child div { + margin-left: 5px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px +} + +.el-date-table.is-week-mode .el-date-table__row:hover td:last-child div { + margin-right: 5px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px +} + +.el-date-table td { + width: 32px; + height: 30px; + padding: 4px 0; + box-sizing: border-box; + text-align: center; + cursor: pointer; + position: relative +} + +.el-date-table td div { + height: 30px; + padding: 3px 0; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-date-table td span { + width: 24px; + height: 24px; + display: block; + margin: 0 auto; + line-height: 24px; + position: absolute; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + border-radius: 50% +} + +.el-date-table td.next-month, +.el-date-table td.prev-month { + color: #C0C4CC +} + +.el-date-table td.today { + position: relative +} + +.el-date-table td.today span { + color: #409EFF; + font-weight: 700 +} + +.el-date-table td.today.end-date span, +.el-date-table td.today.start-date span { + color: #FFF +} + +.el-date-table td.available:hover { + color: #409EFF +} + +.el-date-table td.current:not(.disabled) span { + color: #FFF; + background-color: #409EFF +} + +.el-date-table td.end-date div, +.el-date-table td.start-date div { + color: #FFF +} + +.el-date-table td.end-date span, +.el-date-table td.start-date span { + background-color: #409EFF +} + +.el-date-table td.start-date div { + margin-left: 5px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px +} + +.el-date-table td.end-date div { + margin-right: 5px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px +} + +.el-date-table td.disabled div { + background-color: #F5F7FA; + opacity: 1; + cursor: not-allowed; + color: #C0C4CC +} + +.el-date-table td.selected div { + margin-left: 5px; + margin-right: 5px; + background-color: #F2F6FC; + border-radius: 15px +} + +.el-date-table td.selected div:hover { + background-color: #F2F6FC +} + +.el-date-table td.selected span { + background-color: #409EFF; + color: #FFF; + border-radius: 15px +} + +.el-date-table td.week { + font-size: 80%; + color: #606266 +} + +.el-month-table, +.el-year-table { + font-size: 12px; + border-collapse: collapse +} + +.el-date-table th { + padding: 5px; + color: #606266; + font-weight: 400; + border-bottom: solid 1px #EBEEF5 +} + +.el-month-table { + margin: -1px +} + +.el-month-table td { + text-align: center; + padding: 8px 0; + cursor: pointer +} + +.el-month-table td div { + height: 48px; + padding: 6px 0; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-month-table td.today .cell { + color: #409EFF; + font-weight: 700 +} + +.el-month-table td.today.end-date .cell, +.el-month-table td.today.start-date .cell { + color: #FFF +} + +.el-month-table td.disabled .cell { + background-color: #F5F7FA; + cursor: not-allowed; + color: #C0C4CC +} + +.el-month-table td.disabled .cell:hover { + color: #C0C4CC +} + +.el-month-table td .cell { + width: 60px; + height: 36px; + display: block; + line-height: 36px; + color: #606266; + margin: 0 auto; + border-radius: 18px +} + +.el-month-table td .cell:hover { + color: #409EFF +} + +.el-month-table td.in-range div, +.el-month-table td.in-range div:hover { + background-color: #F2F6FC +} + +.el-month-table td.end-date div, +.el-month-table td.start-date div { + color: #FFF +} + +.el-month-table td.end-date .cell, +.el-month-table td.start-date .cell { + color: #FFF; + background-color: #409EFF +} + +.el-month-table td.start-date div { + border-top-left-radius: 24px; + border-bottom-left-radius: 24px +} + +.el-month-table td.end-date div { + border-top-right-radius: 24px; + border-bottom-right-radius: 24px +} + +.el-month-table td.current:not(.disabled) .cell { + color: #409EFF +} + +.el-year-table { + margin: -1px +} + +.el-year-table .el-icon { + color: #303133 +} + +.el-year-table td { + text-align: center; + padding: 20px 3px; + cursor: pointer +} + +.el-year-table td.today .cell { + color: #409EFF; + font-weight: 700 +} + +.el-year-table td.disabled .cell { + background-color: #F5F7FA; + cursor: not-allowed; + color: #C0C4CC +} + +.el-year-table td.disabled .cell:hover { + color: #C0C4CC +} + +.el-year-table td .cell { + width: 48px; + height: 32px; + display: block; + line-height: 32px; + color: #606266; + margin: 0 auto +} + +.el-year-table td .cell:hover, +.el-year-table td.current:not(.disabled) .cell { + color: #409EFF +} + +.el-date-range-picker { + width: 646px +} + +.el-date-range-picker.has-sidebar { + width: 756px +} + +.el-date-range-picker table { + table-layout: fixed; + width: 100% +} + +.el-date-range-picker .el-picker-panel__body { + min-width: 513px +} + +.el-date-range-picker .el-picker-panel__content { + margin: 0 +} + +.el-date-range-picker__header { + position: relative; + text-align: center; + height: 28px +} + +.el-date-range-picker__header [class*=arrow-left] { + float: left +} + +.el-date-range-picker__header [class*=arrow-right] { + float: right +} + +.el-date-range-picker__header div { + font-size: 16px; + font-weight: 500; + margin-right: 50px +} + +.el-date-range-picker__content { + float: left; + width: 50%; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 16px +} + +.el-date-range-picker__content.is-left { + border-right: 1px solid #e4e4e4 +} + +.el-date-range-picker__content .el-date-range-picker__header div { + margin-left: 50px; + margin-right: 50px +} + +.el-date-range-picker__editors-wrap { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: table-cell +} + +.el-date-range-picker__editors-wrap.is-right { + text-align: right +} + +.el-date-range-picker__time-header { + position: relative; + border-bottom: 1px solid #e4e4e4; + font-size: 12px; + padding: 8px 5px 5px; + display: table; + width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-date-range-picker__time-header>.el-icon-arrow-right { + font-size: 20px; + vertical-align: middle; + display: table-cell; + color: #303133 +} + +.el-date-range-picker__time-picker-wrap { + position: relative; + display: table-cell; + padding: 0 5px +} + +.el-date-range-picker__time-picker-wrap .el-picker-panel { + position: absolute; + top: 13px; + right: 0; + z-index: 1; + background: #FFF +} + +.el-date-picker { + width: 322px +} + +.el-date-picker.has-sidebar.has-time { + width: 434px +} + +.el-date-picker.has-sidebar { + width: 438px +} + +.el-date-picker.has-time .el-picker-panel__body-wrapper { + position: relative +} + +.el-date-picker .el-picker-panel__content { + width: 292px +} + +.el-date-picker table { + table-layout: fixed; + width: 100% +} + +.el-date-picker__editor-wrap { + position: relative; + display: table-cell; + padding: 0 5px +} + +.el-date-picker__time-header { + position: relative; + border-bottom: 1px solid #e4e4e4; + font-size: 12px; + padding: 8px 5px 5px; + display: table; + width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-date-picker__header { + margin: 12px; + text-align: center +} + +.el-date-picker__header--bordered { + margin-bottom: 0; + padding-bottom: 12px; + border-bottom: solid 1px #EBEEF5 +} + +.el-date-picker__header--bordered+.el-picker-panel__content { + margin-top: 0 +} + +.el-date-picker__header-label { + font-size: 16px; + font-weight: 500; + padding: 0 5px; + line-height: 22px; + text-align: center; + cursor: pointer; + color: #606266 +} + +.el-date-picker__header-label.active, +.el-date-picker__header-label:hover { + color: #409EFF +} + +.el-date-picker__prev-btn { + float: left +} + +.el-date-picker__next-btn { + float: right +} + +.el-date-picker__time-wrap { + padding: 10px; + text-align: center +} + +.el-date-picker__time-label { + float: left; + cursor: pointer; + line-height: 30px; + margin-left: 10px +} + +.time-select { + margin: 5px 0; + min-width: 0 +} + +.time-select .el-picker-panel__content { + max-height: 200px; + margin: 0 +} + +.time-select-item { + padding: 8px 10px; + font-size: 14px; + line-height: 20px +} + +.time-select-item.selected:not(.disabled) { + color: #409EFF; + font-weight: 700 +} + +.time-select-item.disabled { + color: #E4E7ED; + cursor: not-allowed +} + +.time-select-item:hover { + background-color: #F5F7FA; + font-weight: 700; + cursor: pointer +} + +.el-date-editor { + position: relative; + display: inline-block; + text-align: left +} + +.el-date-editor.el-input, +.el-date-editor.el-input__inner { + width: 220px +} + +.el-date-editor--monthrange.el-input, +.el-date-editor--monthrange.el-input__inner { + width: 300px +} + +.el-date-editor--daterange.el-input, +.el-date-editor--daterange.el-input__inner, +.el-date-editor--timerange.el-input, +.el-date-editor--timerange.el-input__inner { + width: 350px +} + +.el-date-editor--datetimerange.el-input, +.el-date-editor--datetimerange.el-input__inner { + width: 400px +} + +.el-date-editor--dates .el-input__inner { + text-overflow: ellipsis; + white-space: nowrap +} + +.el-date-editor .el-icon-circle-close { + cursor: pointer +} + +.el-date-editor .el-range__icon { + font-size: 14px; + margin-left: -5px; + color: #C0C4CC; + float: left; + line-height: 32px +} + +.el-date-editor .el-range-input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + outline: 0; + display: inline-block; + height: 100%; + margin: 0; + padding: 0; + width: 39%; + text-align: center; + font-size: 14px; + color: #606266 +} + +.el-date-editor .el-range-input::-webkit-input-placeholder { + color: #C0C4CC +} + +.el-date-editor .el-range-input:-ms-input-placeholder { + color: #C0C4CC +} + +.el-date-editor .el-range-input::-ms-input-placeholder { + color: #C0C4CC +} + +.el-date-editor .el-range-input::placeholder { + color: #C0C4CC +} + +.el-date-editor .el-range-separator { + display: inline-block; + height: 100%; + padding: 0 5px; + margin: 0; + text-align: center; + line-height: 32px; + font-size: 14px; + width: 5%; + color: #303133 +} + +.el-date-editor .el-range__close-icon { + font-size: 14px; + color: #C0C4CC; + width: 25px; + display: inline-block; + float: right; + line-height: 32px +} + +.el-range-editor.el-input__inner { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 3px 10px +} + +.el-range-editor .el-range-input { + line-height: 1 +} + +.el-range-editor--medium.el-input__inner { + height: 36px +} + +.el-range-editor--medium .el-range-separator { + line-height: 28px; + font-size: 14px +} + +.el-range-editor--medium .el-range-input { + font-size: 14px +} + +.el-range-editor--medium .el-range__close-icon, +.el-range-editor--medium .el-range__icon { + line-height: 28px +} + +.el-range-editor--small.el-input__inner { + height: 32px +} + +.el-range-editor--small .el-range-separator { + line-height: 24px; + font-size: 13px +} + +.el-range-editor--small .el-range-input { + font-size: 13px +} + +.el-range-editor--small .el-range__close-icon, +.el-range-editor--small .el-range__icon { + line-height: 24px +} + +.el-range-editor--mini.el-input__inner { + height: 28px +} + +.el-range-editor--mini .el-range-separator { + line-height: 20px; + font-size: 12px +} + +.el-range-editor--mini .el-range-input { + font-size: 12px +} + +.el-range-editor--mini .el-range__close-icon, +.el-range-editor--mini .el-range__icon { + line-height: 20px +} + +.el-range-editor.is-disabled { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed +} + +.el-range-editor.is-disabled:focus, +.el-range-editor.is-disabled:hover { + border-color: #E4E7ED +} + +.el-range-editor.is-disabled input { + background-color: #F5F7FA; + color: #C0C4CC; + cursor: not-allowed +} + +.el-range-editor.is-disabled input::-webkit-input-placeholder { + color: #C0C4CC +} + +.el-range-editor.is-disabled input:-ms-input-placeholder { + color: #C0C4CC +} + +.el-range-editor.is-disabled input::-ms-input-placeholder { + color: #C0C4CC +} + +.el-range-editor.is-disabled input::placeholder { + color: #C0C4CC +} + +.el-range-editor.is-disabled .el-range-separator { + color: #C0C4CC +} + +.el-picker-panel { + color: #606266; + border: 1px solid #E4E7ED; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + background: #FFF; + border-radius: 4px; + line-height: 30px; + margin: 5px 0 +} + +.el-picker-panel__body-wrapper::after, +.el-picker-panel__body::after { + content: ""; + display: table; + clear: both +} + +.el-picker-panel__content { + position: relative; + margin: 15px +} + +.el-picker-panel__footer { + border-top: 1px solid #e4e4e4; + padding: 4px; + text-align: right; + background-color: #FFF; + position: relative; + font-size: 0 +} + +.el-picker-panel__shortcut { + display: block; + width: 100%; + border: 0; + background-color: transparent; + line-height: 28px; + font-size: 14px; + color: #606266; + padding-left: 12px; + text-align: left; + outline: 0; + cursor: pointer +} + +.el-picker-panel__shortcut:hover { + color: #409EFF +} + +.el-picker-panel__shortcut.active { + background-color: #e6f1fe; + color: #409EFF +} + +.el-picker-panel__btn { + border: 1px solid #dcdcdc; + color: #333; + line-height: 24px; + border-radius: 2px; + padding: 0 20px; + cursor: pointer; + background-color: transparent; + outline: 0; + font-size: 12px +} + +.el-picker-panel__btn[disabled] { + color: #ccc; + cursor: not-allowed +} + +.el-picker-panel__icon-btn { + font-size: 12px; + color: #303133; + border: 0; + background: 0 0; + cursor: pointer; + outline: 0; + margin-top: 8px +} + +.el-picker-panel__icon-btn:hover { + color: #409EFF +} + +.el-picker-panel__icon-btn.is-disabled { + color: #bbb +} + +.el-picker-panel__icon-btn.is-disabled:hover { + cursor: not-allowed +} + +.el-picker-panel__link-btn { + vertical-align: middle +} + +.el-picker-panel [slot=sidebar], +.el-picker-panel__sidebar { + position: absolute; + top: 0; + bottom: 0; + width: 110px; + border-right: 1px solid #e4e4e4; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-top: 6px; + background-color: #FFF; + overflow: auto +} + +.el-picker-panel [slot=sidebar]+.el-picker-panel__body, +.el-picker-panel__sidebar+.el-picker-panel__body { + margin-left: 110px +} + +.el-time-spinner.has-seconds .el-time-spinner__wrapper { + width: 33.3% +} + +.el-time-spinner__wrapper { + max-height: 190px; + overflow: auto; + display: inline-block; + width: 50%; + vertical-align: top; + position: relative +} + +.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { + padding-bottom: 15px +} + +.el-time-spinner__input.el-input .el-input__inner, +.el-time-spinner__list { + padding: 0; + text-align: center +} + +.el-time-spinner__wrapper.is-arrow { + -webkit-box-sizing: border-box; + box-sizing: border-box; + text-align: center; + overflow: hidden +} + +.el-time-spinner__wrapper.is-arrow .el-time-spinner__list { + -webkit-transform: translateY(-32px); + transform: translateY(-32px) +} + +.el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active) { + background: #FFF; + cursor: default +} + +.el-time-spinner__arrow { + font-size: 12px; + color: #909399; + position: absolute; + left: 0; + width: 100%; + z-index: 1; + text-align: center; + height: 30px; + line-height: 30px; + cursor: pointer +} + +.el-time-spinner__arrow:hover { + color: #409EFF +} + +.el-time-spinner__arrow.el-icon-arrow-up { + top: 10px +} + +.el-time-spinner__arrow.el-icon-arrow-down { + bottom: 10px +} + +.el-time-spinner__input.el-input { + width: 70% +} + +.el-time-spinner__list { + margin: 0; + list-style: none +} + +.el-time-spinner__list::after, +.el-time-spinner__list::before { + content: ''; + display: block; + width: 100%; + height: 80px +} + +.el-time-spinner__item { + height: 32px; + line-height: 32px; + font-size: 12px; + color: #606266 +} + +.el-time-spinner__item:hover:not(.disabled):not(.active) { + background: #F5F7FA; + cursor: pointer +} + +.el-time-spinner__item.active:not(.disabled) { + color: #303133; + font-weight: 700 +} + +.el-time-spinner__item.disabled { + color: #C0C4CC; + cursor: not-allowed +} + +.el-time-panel { + margin: 5px 0; + border: 1px solid #E4E7ED; + background-color: #FFF; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + border-radius: 2px; + position: absolute; + width: 180px; + left: 0; + z-index: 1000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-sizing: content-box; + box-sizing: content-box +} + +.el-time-panel__content { + font-size: 0; + position: relative; + overflow: hidden +} + +.el-time-panel__content::after, +.el-time-panel__content::before { + content: ""; + top: 50%; + position: absolute; + margin-top: -15px; + height: 32px; + z-index: -1; + left: 0; + right: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-top: 6px; + text-align: left; + border-top: 1px solid #E4E7ED; + border-bottom: 1px solid #E4E7ED +} + +.el-time-panel__content::after { + left: 50%; + margin-left: 12%; + margin-right: 12% +} + +.el-time-panel__content::before { + padding-left: 50%; + margin-right: 12%; + margin-left: 12% +} + +.el-time-panel__content.has-seconds::after { + left: calc(100% / 3 * 2) +} + +.el-time-panel__content.has-seconds::before { + padding-left: calc(100% / 3) +} + +.el-time-panel__footer { + border-top: 1px solid #e4e4e4; + padding: 4px; + height: 36px; + line-height: 25px; + text-align: right; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-time-panel__btn { + border: none; + line-height: 28px; + padding: 0 5px; + margin: 0 5px; + cursor: pointer; + background-color: transparent; + outline: 0; + font-size: 12px; + color: #303133 +} + +.el-time-panel__btn.confirm { + font-weight: 800; + color: #409EFF +} + +.el-time-range-picker { + width: 354px; + overflow: visible +} + +.el-time-range-picker__content { + position: relative; + text-align: center; + padding: 10px +} + +.el-time-range-picker__cell { + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 4px 7px 7px; + width: 50%; + display: inline-block +} + +.el-time-range-picker__header { + margin-bottom: 5px; + text-align: center; + font-size: 14px +} + +.el-time-range-picker__body { + border-radius: 2px; + border: 1px solid #E4E7ED +} + +.el-popover { + position: absolute; + background: #FFF; + min-width: 150px; + border-radius: 4px; + border: 1px solid #EBEEF5; + padding: 12px; + z-index: 2000; + color: #606266; + line-height: 1.4; + text-align: justify; + font-size: 14px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + word-break: break-all +} + +.el-card.is-always-shadow, +.el-card.is-hover-shadow:focus, +.el-card.is-hover-shadow:hover, +.el-cascader__dropdown, +.el-color-picker__panel, +.el-message-box, +.el-notification { + -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) +} + +.el-popover--plain { + padding: 18px 20px +} + +.el-popover__title { + color: #303133; + font-size: 16px; + line-height: 1; + margin-bottom: 12px +} + +.el-popover:focus, +.el-popover:focus:active, +.el-popover__reference:focus:hover, +.el-popover__reference:focus:not(.focusing) { + outline-width: 0 +} + +.v-modal-enter { + -webkit-animation: v-modal-in .2s ease; + animation: v-modal-in .2s ease +} + +.v-modal-leave { + -webkit-animation: v-modal-out .2s ease forwards; + animation: v-modal-out .2s ease forwards +} + +@keyframes v-modal-in { + 0% { + opacity: 0 + } +} + +@keyframes v-modal-out { + 100% { + opacity: 0 + } +} + +.v-modal { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: .5; + background: #000 +} + +.el-popup-parent--hidden { + overflow: hidden +} + +.el-message-box { + display: inline-block; + width: 420px; + padding-bottom: 10px; + vertical-align: middle; + background-color: #FFF; + border-radius: 4px; + border: 1px solid #EBEEF5; + font-size: 18px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + text-align: left; + overflow: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden +} + +.el-message-box__wrapper { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + text-align: center +} + +.el-message-box__wrapper::after { + content: ""; + display: inline-block; + height: 100%; + width: 0; + vertical-align: middle +} + +.el-message-box__header { + position: relative; + padding: 15px 15px 10px +} + +.el-message-box__title { + padding-left: 0; + margin-bottom: 0; + font-size: 18px; + line-height: 1; + color: #303133 +} + +.el-message-box__headerbtn { + position: absolute; + top: 15px; + right: 15px; + padding: 0; + border: none; + outline: 0; + background: 0 0; + font-size: 16px; + cursor: pointer +} + +.el-form-item.is-error .el-input__inner, +.el-form-item.is-error .el-input__inner:focus, +.el-form-item.is-error .el-textarea__inner, +.el-form-item.is-error .el-textarea__inner:focus, +.el-message-box__input input.invalid, +.el-message-box__input input.invalid:focus { + border-color: #F56C6C +} + +.el-message-box__headerbtn .el-message-box__close { + color: #909399 +} + +.el-message-box__headerbtn:focus .el-message-box__close, +.el-message-box__headerbtn:hover .el-message-box__close { + color: #409EFF +} + +.el-message-box__content { + padding: 10px 15px; + color: #606266; + font-size: 14px +} + +.el-message-box__container { + position: relative +} + +.el-message-box__input { + padding-top: 15px +} + +.el-message-box__status { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + font-size: 24px !important +} + +.el-message-box__status::before { + padding-left: 1px +} + +.el-message-box__status+.el-message-box__message { + padding-left: 36px; + padding-right: 12px +} + +.el-message-box__status.el-icon-success { + color: #67C23A +} + +.el-message-box__status.el-icon-info { + color: #909399 +} + +.el-message-box__status.el-icon-warning { + color: #E6A23C +} + +.el-message-box__status.el-icon-error { + color: #F56C6C +} + +.el-message-box__message { + margin: 0 +} + +.el-message-box__message p { + margin: 0; + line-height: 24px +} + +.el-message-box__errormsg { + color: #F56C6C; + font-size: 12px; + min-height: 18px; + margin-top: 2px +} + +.el-message-box__btns { + padding: 5px 15px 0; + text-align: right +} + +.el-message-box__btns button:nth-child(2) { + margin-left: 10px +} + +.el-message-box__btns-reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse +} + +.el-message-box--center { + padding-bottom: 30px +} + +.el-message-box--center .el-message-box__header { + padding-top: 30px +} + +.el-message-box--center .el-message-box__title { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center +} + +.el-message-box--center .el-message-box__status { + position: relative; + top: auto; + padding-right: 5px; + text-align: center; + -webkit-transform: translateY(-1px); + transform: translateY(-1px) +} + +.el-message-box--center .el-message-box__message { + margin-left: 0 +} + +.el-message-box--center .el-message-box__btns, +.el-message-box--center .el-message-box__content { + text-align: center +} + +.el-message-box--center .el-message-box__content { + padding-left: 27px; + padding-right: 27px +} + +.msgbox-fade-enter-active { + -webkit-animation: msgbox-fade-in .3s; + animation: msgbox-fade-in .3s +} + +.msgbox-fade-leave-active { + -webkit-animation: msgbox-fade-out .3s; + animation: msgbox-fade-out .3s +} + +@-webkit-keyframes msgbox-fade-in { + 0% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } +} + +@keyframes msgbox-fade-in { + 0% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } +} + +@-webkit-keyframes msgbox-fade-out { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } + + 100% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } +} + +@keyframes msgbox-fade-out { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } + + 100% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } +} + +.el-breadcrumb { + font-size: 14px; + line-height: 1 +} + +.el-breadcrumb::after, +.el-breadcrumb::before { + display: table; + content: "" +} + +.el-breadcrumb::after { + clear: both +} + +.el-breadcrumb__separator { + margin: 0 9px; + font-weight: 700; + color: #C0C4CC +} + +.el-breadcrumb__separator[class*=icon] { + margin: 0 6px; + font-weight: 400 +} + +.el-breadcrumb__item { + float: left +} + +.el-breadcrumb__inner { + color: #606266 +} + +.el-breadcrumb__inner a, +.el-breadcrumb__inner.is-link { + font-weight: 700; + text-decoration: none; + -webkit-transition: color .2s cubic-bezier(.645, .045, .355, 1); + transition: color .2s cubic-bezier(.645, .045, .355, 1); + color: #303133 +} + +.el-breadcrumb__inner a:hover, +.el-breadcrumb__inner.is-link:hover { + color: #409EFF; + cursor: pointer +} + +.el-breadcrumb__item:last-child .el-breadcrumb__inner, +.el-breadcrumb__item:last-child .el-breadcrumb__inner a, +.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, +.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover { + font-weight: 400; + color: #606266; + cursor: text +} + +.el-form--label-left .el-form-item__label { + text-align: left +} + +.el-form--label-top .el-form-item__label { + float: none; + display: inline-block; + text-align: left; + padding: 0 0 10px +} + +.el-form--inline .el-form-item { + display: inline-block; + margin-right: 10px; + vertical-align: top +} + +.el-form--inline .el-form-item__label { + float: none; + display: inline-block +} + +.el-form--inline .el-form-item__content { + display: inline-block; + vertical-align: top +} + +.el-form--inline.el-form--label-top .el-form-item__content { + display: block +} + +.el-form-item { + margin-bottom: 22px +} + +.el-form-item::after, +.el-form-item::before { + display: table; + content: "" +} + +.el-form-item::after { + clear: both +} + +.el-form-item .el-form-item { + margin-bottom: 0 +} + +.el-form-item--mini.el-form-item, +.el-form-item--small.el-form-item { + margin-bottom: 18px +} + +.el-form-item .el-input__validateIcon { + display: none +} + +.el-form-item--medium .el-form-item__content, +.el-form-item--medium .el-form-item__label { + line-height: 36px +} + +.el-form-item--small .el-form-item__content, +.el-form-item--small .el-form-item__label { + line-height: 32px +} + +.el-form-item--small .el-form-item__error { + padding-top: 2px +} + +.el-form-item--mini .el-form-item__content, +.el-form-item--mini .el-form-item__label { + line-height: 28px +} + +.el-form-item--mini .el-form-item__error { + padding-top: 1px +} + +.el-form-item__label-wrap { + float: left +} + +.el-form-item__label-wrap .el-form-item__label { + display: inline-block; + float: none +} + +.el-form-item__label { + text-align: right; + vertical-align: middle; + float: left; + font-size: 14px; + color: #606266; + line-height: 40px; + padding: 0 12px 0 0; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-form-item__content { + line-height: 40px; + position: relative; + font-size: 14px +} + +.el-form-item__content::after, +.el-form-item__content::before { + display: table; + content: "" +} + +.el-form-item__content::after { + clear: both +} + +.el-form-item__content .el-input-group { + vertical-align: top +} + +.el-form-item__error { + color: #F56C6C; + font-size: 12px; + line-height: 1; + padding-top: 4px; + position: absolute; + top: 100%; + left: 0 +} + +.el-form-item__error--inline { + position: relative; + top: auto; + left: auto; + display: inline-block; + margin-left: 10px +} + +.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, +.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before { + content: '*'; + color: #F56C6C; + margin-right: 4px +} + +.el-form-item.is-error .el-input-group__append .el-input__inner, +.el-form-item.is-error .el-input-group__prepend .el-input__inner { + border-color: transparent +} + +.el-form-item.is-error .el-input__validateIcon { + color: #F56C6C +} + +.el-form-item--feedback .el-input__validateIcon { + display: inline-block +} + +.el-tabs__header { + padding: 0; + position: relative; + margin: 0 0 15px +} + +.el-tabs__active-bar { + position: absolute; + bottom: 0; + left: 0; + height: 2px; + background-color: #409EFF; + z-index: 1; + -webkit-transition: -webkit-transform .3s cubic-bezier(.645, .045, .355, 1); + transition: -webkit-transform .3s cubic-bezier(.645, .045, .355, 1); + transition: transform .3s cubic-bezier(.645, .045, .355, 1); + transition: transform .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1); + list-style: none +} + +.el-tabs__new-tab { + float: right; + border: 1px solid #d3dce6; + height: 18px; + width: 18px; + line-height: 18px; + margin: 12px 0 9px 10px; + border-radius: 3px; + text-align: center; + font-size: 12px; + color: #d3dce6; + cursor: pointer; + -webkit-transition: all .15s; + transition: all .15s +} + +.el-tabs__new-tab .el-icon-plus { + -webkit-transform: scale(.8, .8); + transform: scale(.8, .8) +} + +.el-tabs__new-tab:hover { + color: #409EFF +} + +.el-tabs__nav-wrap { + overflow: hidden; + margin-bottom: -1px; + position: relative +} + +.el-tabs__nav-wrap::after { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background-color: #E4E7ED; + z-index: 1 +} + +.el-tabs__nav-wrap.is-scrollable { + padding: 0 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-tabs__nav-scroll { + overflow: hidden +} + +.el-tabs__nav-next, +.el-tabs__nav-prev { + position: absolute; + cursor: pointer; + line-height: 44px; + font-size: 12px; + color: #909399 +} + +.el-tabs__nav-next { + right: 0 +} + +.el-tabs__nav-prev { + left: 0 +} + +.el-tabs__nav { + white-space: nowrap; + position: relative; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + float: left; + z-index: 2 +} + +.el-tabs__nav.is-stretch { + min-width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex +} + +.el-tabs__nav.is-stretch>* { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + text-align: center +} + +.el-tabs__item { + padding: 0 20px; + height: 40px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + line-height: 40px; + display: inline-block; + list-style: none; + font-size: 14px; + font-weight: 500; + color: #303133; + position: relative +} + +.el-tabs__item:focus, +.el-tabs__item:focus:active { + outline: 0 +} + +.el-tabs__item:focus.is-active.is-focus:not(:active) { + -webkit-box-shadow: 0 0 2px 2px #409EFF inset; + box-shadow: 0 0 2px 2px #409EFF inset; + border-radius: 3px +} + +.el-tabs__item .el-icon-close { + border-radius: 50%; + text-align: center; + -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); + transition: all .3s cubic-bezier(.645, .045, .355, 1); + margin-left: 5px +} + +.el-tabs__item .el-icon-close:before { + -webkit-transform: scale(.9); + transform: scale(.9); + display: inline-block +} + +.el-tabs--card>.el-tabs__header .el-tabs__active-bar, +.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left, +.el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right { + display: none +} + +.el-tabs__item .el-icon-close:hover { + background-color: #C0C4CC; + color: #FFF +} + +.el-tabs__item.is-active { + color: #409EFF +} + +.el-tabs__item:hover { + color: #409EFF; + cursor: pointer +} + +.el-tabs__item.is-disabled { + color: #C0C4CC; + cursor: default +} + +.el-tabs__content { + overflow: hidden; + position: relative +} + +.el-tabs--card>.el-tabs__header { + border-bottom: 1px solid #E4E7ED +} + +.el-tabs--card>.el-tabs__header .el-tabs__nav-wrap::after { + content: none +} + +.el-tabs--card>.el-tabs__header .el-tabs__nav { + border: 1px solid #E4E7ED; + border-bottom: none; + border-radius: 4px 4px 0 0; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close { + position: relative; + font-size: 12px; + width: 0; + height: 14px; + vertical-align: middle; + line-height: 15px; + overflow: hidden; + top: -1px; + right: -2px; + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50% +} + +.el-tabs--card>.el-tabs__header .el-tabs__item { + border-bottom: 1px solid transparent; + border-left: 1px solid #E4E7ED; + -webkit-transition: color .3s cubic-bezier(.645, .045, .355, 1), padding .3s cubic-bezier(.645, .045, .355, 1); + transition: color .3s cubic-bezier(.645, .045, .355, 1), padding .3s cubic-bezier(.645, .045, .355, 1) +} + +.el-tabs--card>.el-tabs__header .el-tabs__item:first-child { + border-left: none +} + +.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover { + padding-left: 13px; + padding-right: 13px +} + +.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close { + width: 14px +} + +.el-tabs--card>.el-tabs__header .el-tabs__item.is-active { + border-bottom-color: #FFF +} + +.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable { + padding-left: 20px; + padding-right: 20px +} + +.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close { + width: 14px +} + +.el-tabs--border-card { + background: #FFF; + border: 1px solid #DCDFE6; + -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04) +} + +.el-tabs--border-card>.el-tabs__content { + padding: 15px +} + +.el-tabs--border-card>.el-tabs__header { + background-color: #F5F7FA; + border-bottom: 1px solid #E4E7ED; + margin: 0 +} + +.el-tabs--border-card>.el-tabs__header .el-tabs__nav-wrap::after { + content: none +} + +.el-tabs--border-card>.el-tabs__header .el-tabs__item { + -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); + transition: all .3s cubic-bezier(.645, .045, .355, 1); + border: 1px solid transparent; + margin-top: -1px; + color: #909399 +} + +.el-tabs--border-card>.el-tabs__header .el-tabs__item+.el-tabs__item, +.el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child { + margin-left: -1px +} + +.el-col-offset-0, +.el-tabs--border-card>.el-tabs__header .is-scrollable .el-tabs__item:first-child { + margin-left: 0 +} + +.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active { + color: #409EFF; + background-color: #FFF; + border-right-color: #DCDFE6; + border-left-color: #DCDFE6 +} + +.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover { + color: #409EFF +} + +.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-disabled { + color: #C0C4CC +} + +.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2), +.el-tabs--bottom .el-tabs__item.is-top:nth-child(2), +.el-tabs--top .el-tabs__item.is-bottom:nth-child(2), +.el-tabs--top .el-tabs__item.is-top:nth-child(2) { + padding-left: 0 +} + +.el-tabs--bottom .el-tabs__item.is-bottom:last-child, +.el-tabs--bottom .el-tabs__item.is-top:last-child, +.el-tabs--top .el-tabs__item.is-bottom:last-child, +.el-tabs--top .el-tabs__item.is-top:last-child { + padding-right: 0 +} + +.el-cascader-menu:last-child .el-cascader-node, +.el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, +.el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, +.el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, +.el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:last-child, +.el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, +.el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, +.el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, +.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child { + padding-right: 20px +} + +.el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2), +.el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2), +.el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2), +.el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2), +.el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2), +.el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2), +.el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2), +.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2) { + padding-left: 20px +} + +.el-tabs--bottom .el-tabs__header.is-bottom { + margin-bottom: 0; + margin-top: 10px +} + +.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom { + border-bottom: 0; + border-top: 1px solid #DCDFE6 +} + +.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom { + margin-top: -1px; + margin-bottom: 0 +} + +.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active) { + border: 1px solid transparent +} + +.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom { + margin: 0 -1px -1px +} + +.el-tabs--left, +.el-tabs--right { + overflow: hidden +} + +.el-tabs--left .el-tabs__header.is-left, +.el-tabs--left .el-tabs__header.is-right, +.el-tabs--left .el-tabs__nav-scroll, +.el-tabs--left .el-tabs__nav-wrap.is-left, +.el-tabs--left .el-tabs__nav-wrap.is-right, +.el-tabs--right .el-tabs__header.is-left, +.el-tabs--right .el-tabs__header.is-right, +.el-tabs--right .el-tabs__nav-scroll, +.el-tabs--right .el-tabs__nav-wrap.is-left, +.el-tabs--right .el-tabs__nav-wrap.is-right { + height: 100% +} + +.el-tabs--left .el-tabs__active-bar.is-left, +.el-tabs--left .el-tabs__active-bar.is-right, +.el-tabs--right .el-tabs__active-bar.is-left, +.el-tabs--right .el-tabs__active-bar.is-right { + top: 0; + bottom: auto; + width: 2px; + height: auto +} + +.el-tabs--left .el-tabs__nav-wrap.is-left, +.el-tabs--left .el-tabs__nav-wrap.is-right, +.el-tabs--right .el-tabs__nav-wrap.is-left, +.el-tabs--right .el-tabs__nav-wrap.is-right { + margin-bottom: 0 +} + +.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next, +.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev, +.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next, +.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev, +.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next, +.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev, +.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next, +.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev { + height: 30px; + line-height: 30px; + width: 100%; + text-align: center; + cursor: pointer +} + +.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next i, +.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev i, +.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next i, +.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev i, +.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next i, +.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev i, +.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next i, +.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev i { + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg) +} + +.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev, +.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev, +.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev, +.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev { + left: auto; + top: 0 +} + +.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next, +.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next, +.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next, +.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next { + right: auto; + bottom: 0 +} + +.el-tabs--left .el-tabs__active-bar.is-left, +.el-tabs--left .el-tabs__nav-wrap.is-left::after { + right: 0; + left: auto +} + +.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable, +.el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable, +.el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable, +.el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable { + padding: 30px 0 +} + +.el-tabs--left .el-tabs__nav-wrap.is-left::after, +.el-tabs--left .el-tabs__nav-wrap.is-right::after, +.el-tabs--right .el-tabs__nav-wrap.is-left::after, +.el-tabs--right .el-tabs__nav-wrap.is-right::after { + height: 100%; + width: 2px; + bottom: auto; + top: 0 +} + +.el-tabs--left .el-tabs__nav.is-left, +.el-tabs--left .el-tabs__nav.is-right, +.el-tabs--right .el-tabs__nav.is-left, +.el-tabs--right .el-tabs__nav.is-right { + float: none +} + +.el-tabs--left .el-tabs__item.is-left, +.el-tabs--left .el-tabs__item.is-right, +.el-tabs--right .el-tabs__item.is-left, +.el-tabs--right .el-tabs__item.is-right { + display: block +} + +.el-tabs--left .el-tabs__header.is-left { + float: left; + margin-bottom: 0; + margin-right: 10px +} + +.el-button-group>.el-button:not(:last-child), +.el-tabs--left .el-tabs__nav-wrap.is-left { + margin-right: -1px +} + +.el-tabs--left .el-tabs__item.is-left { + text-align: right +} + +.el-tabs--left.el-tabs--card .el-tabs__item.is-left { + border-left: none; + border-right: 1px solid #E4E7ED; + border-bottom: none; + border-top: 1px solid #E4E7ED; + text-align: left +} + +.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child { + border-right: 1px solid #E4E7ED; + border-top: none +} + +.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active { + border: 1px solid #E4E7ED; + border-right-color: #fff; + border-left: none; + border-bottom: none +} + +.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child { + border-top: none +} + +.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child { + border-bottom: none +} + +.el-tabs--left.el-tabs--card .el-tabs__nav { + border-radius: 4px 0 0 4px; + border-bottom: 1px solid #E4E7ED; + border-right: none +} + +.el-tabs--left.el-tabs--card .el-tabs__new-tab { + float: none +} + +.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left { + border-right: 1px solid #dfe4ed +} + +.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left { + border: 1px solid transparent; + margin: -1px 0 -1px -1px +} + +.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active { + border-color: #d1dbe5 transparent +} + +.el-tabs--right .el-tabs__header.is-right { + float: right; + margin-bottom: 0; + margin-left: 10px +} + +.el-tabs--right .el-tabs__nav-wrap.is-right { + margin-left: -1px +} + +.el-tabs--right .el-tabs__nav-wrap.is-right::after { + left: 0; + right: auto +} + +.el-tabs--right .el-tabs__active-bar.is-right { + left: 0 +} + +.el-tabs--right.el-tabs--card .el-tabs__item.is-right { + border-bottom: none; + border-top: 1px solid #E4E7ED +} + +.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child { + border-left: 1px solid #E4E7ED; + border-top: none +} + +.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active { + border: 1px solid #E4E7ED; + border-left-color: #fff; + border-right: none; + border-bottom: none +} + +.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child { + border-top: none +} + +.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child { + border-bottom: none +} + +.el-tabs--right.el-tabs--card .el-tabs__nav { + border-radius: 0 4px 4px 0; + border-bottom: 1px solid #E4E7ED; + border-left: none +} + +.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right { + border-left: 1px solid #dfe4ed +} + +.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right { + border: 1px solid transparent; + margin: -1px -1px -1px 0 +} + +.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active { + border-color: #d1dbe5 transparent +} + +.slideInLeft-transition, +.slideInRight-transition { + display: inline-block +} + +.slideInRight-enter { + -webkit-animation: slideInRight-enter .3s; + animation: slideInRight-enter .3s +} + +.slideInRight-leave { + position: absolute; + left: 0; + right: 0; + -webkit-animation: slideInRight-leave .3s; + animation: slideInRight-leave .3s +} + +.slideInLeft-enter { + -webkit-animation: slideInLeft-enter .3s; + animation: slideInLeft-enter .3s +} + +.slideInLeft-leave { + position: absolute; + left: 0; + right: 0; + -webkit-animation: slideInLeft-leave .3s; + animation: slideInLeft-leave .3s +} + +@-webkit-keyframes slideInRight-enter { + 0% { + opacity: 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(100%); + transform: translateX(100%) + } + + to { + opacity: 1; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@keyframes slideInRight-enter { + 0% { + opacity: 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(100%); + transform: translateX(100%) + } + + to { + opacity: 1; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@-webkit-keyframes slideInRight-leave { + 0% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1 + } + + 100% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); + opacity: 0 + } +} + +@keyframes slideInRight-leave { + 0% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1 + } + + 100% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); + opacity: 0 + } +} + +@-webkit-keyframes slideInLeft-enter { + 0% { + opacity: 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%) + } + + to { + opacity: 1; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@keyframes slideInLeft-enter { + 0% { + opacity: 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%) + } + + to { + opacity: 1; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@-webkit-keyframes slideInLeft-leave { + 0% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1 + } + + 100% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0 + } +} + +@keyframes slideInLeft-leave { + 0% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1 + } + + 100% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0 + } +} + +.el-tree { + position: relative; + cursor: default; + background: #FFF; + color: #606266 +} + +.el-tree__empty-block { + position: relative; + min-height: 60px; + text-align: center; + width: 100%; + height: 100% +} + +.el-tree__empty-text { + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + color: #909399; + font-size: 14px +} + +.el-tree__drop-indicator { + position: absolute; + left: 0; + right: 0; + height: 1px; + background-color: #409EFF +} + +.el-tree-node { + white-space: nowrap; + outline: 0 +} + +.el-tree-node:focus>.el-tree-node__content { + background-color: #F5F7FA +} + +.el-tree-node.is-drop-inner>.el-tree-node__content .el-tree-node__label { + background-color: #409EFF; + color: #fff +} + +.el-tree-node__content:hover, +.el-upload-list__item:hover { + background-color: #F5F7FA +} + +.el-tree-node__content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 26px; + cursor: pointer +} + +.el-tree-node__content>.el-tree-node__expand-icon { + padding: 6px +} + +.el-tree-node__content>label.el-checkbox { + margin-right: 8px +} + +.el-tree.is-dragging .el-tree-node__content { + cursor: move +} + +.el-tree.is-dragging .el-tree-node__content * { + pointer-events: none +} + +.el-tree.is-dragging.is-drop-not-allow .el-tree-node__content { + cursor: not-allowed +} + +.el-tree-node__expand-icon { + cursor: pointer; + color: #C0C4CC; + font-size: 12px; + -webkit-transform: rotate(0); + transform: rotate(0); + -webkit-transition: -webkit-transform .3s ease-in-out; + transition: -webkit-transform .3s ease-in-out; + transition: transform .3s ease-in-out; + transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out +} + +.el-tree-node__expand-icon.expanded { + -webkit-transform: rotate(90deg); + transform: rotate(90deg) +} + +.el-tree-node__expand-icon.is-leaf { + color: transparent; + cursor: default +} + +.el-tree-node__label { + font-size: 14px +} + +.el-tree-node__loading-icon { + margin-right: 8px; + font-size: 14px; + color: #C0C4CC +} + +.el-tree-node>.el-tree-node__children { + overflow: hidden; + background-color: transparent +} + +.el-tree-node.is-expanded>.el-tree-node__children { + display: block +} + +.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { + background-color: #f0f7ff +} + +.el-alert { + width: 100%; + padding: 8px 16px; + margin: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 4px; + position: relative; + background-color: #FFF; + overflow: hidden; + opacity: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-transition: opacity .2s; + transition: opacity .2s +} + +.el-alert.is-light .el-alert__closebtn { + color: #C0C4CC +} + +.el-alert.is-dark .el-alert__closebtn, +.el-alert.is-dark .el-alert__description { + color: #FFF +} + +.el-alert.is-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center +} + +.el-alert--success.is-light { + background-color: #f0f9eb; + color: #67C23A +} + +.el-alert--success.is-light .el-alert__description { + color: #67C23A +} + +.el-alert--success.is-dark { + background-color: #67C23A; + color: #FFF +} + +.el-alert--info.is-light { + background-color: #f4f4f5; + color: #909399 +} + +.el-alert--info.is-dark { + background-color: #909399; + color: #FFF +} + +.el-alert--info .el-alert__description { + color: #909399 +} + +.el-alert--warning.is-light { + background-color: #fdf6ec; + color: #E6A23C +} + +.el-alert--warning.is-light .el-alert__description { + color: #E6A23C +} + +.el-alert--warning.is-dark { + background-color: #E6A23C; + color: #FFF +} + +.el-alert--error.is-light { + background-color: #fef0f0; + color: #F56C6C +} + +.el-alert--error.is-light .el-alert__description { + color: #F56C6C +} + +.el-alert--error.is-dark { + background-color: #F56C6C; + color: #FFF +} + +.el-alert__content { + display: table-cell; + padding: 0 8px +} + +.el-alert__icon { + font-size: 16px; + width: 16px +} + +.el-alert__icon.is-big { + font-size: 28px; + width: 28px +} + +.el-alert__title { + font-size: 13px; + line-height: 18px +} + +.el-alert__title.is-bold { + font-weight: 700 +} + +.el-alert .el-alert__description { + font-size: 12px; + margin: 5px 0 0 +} + +.el-alert__closebtn { + font-size: 12px; + opacity: 1; + position: absolute; + top: 12px; + right: 15px; + cursor: pointer +} + +.el-alert-fade-enter, +.el-alert-fade-leave-active, +.el-loading-fade-enter, +.el-loading-fade-leave-active, +.el-notification-fade-leave-active, +.el-upload iframe { + opacity: 0 +} + +.el-carousel__arrow--right, +.el-notification.right { + right: 16px +} + +.el-alert__closebtn.is-customed { + font-style: normal; + font-size: 13px; + top: 9px +} + +.el-notification { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 330px; + padding: 14px 26px 14px 13px; + border-radius: 8px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #EBEEF5; + position: fixed; + background-color: #FFF; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + -webkit-transition: opacity .3s, left .3s, right .3s, top .4s, bottom .3s, -webkit-transform .3s; + transition: opacity .3s, left .3s, right .3s, top .4s, bottom .3s, -webkit-transform .3s; + transition: opacity .3s, transform .3s, left .3s, right .3s, top .4s, bottom .3s; + transition: opacity .3s, transform .3s, left .3s, right .3s, top .4s, bottom .3s, -webkit-transform .3s; + overflow: hidden +} + +.el-notification.left { + left: 16px +} + +.el-notification__group { + margin-left: 13px; + margin-right: 8px +} + +.el-notification__title { + font-weight: 700; + font-size: 16px; + color: #303133; + margin: 0 +} + +.el-notification__content { + font-size: 14px; + line-height: 21px; + margin: 6px 0 0; + color: #606266; + text-align: justify +} + +.el-notification__content p { + margin: 0 +} + +.el-notification__icon { + height: 24px; + width: 24px; + font-size: 24px +} + +.el-notification__closeBtn { + position: absolute; + top: 18px; + right: 15px; + cursor: pointer; + color: #909399; + font-size: 16px +} + +.el-notification__closeBtn:hover { + color: #606266 +} + +.el-notification .el-icon-success { + color: #67C23A +} + +.el-notification .el-icon-error { + color: #F56C6C +} + +.el-notification .el-icon-info { + color: #909399 +} + +.el-notification .el-icon-warning { + color: #E6A23C +} + +.el-notification-fade-enter.right { + right: 0; + -webkit-transform: translateX(100%); + transform: translateX(100%) +} + +.el-notification-fade-enter.left { + left: 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%) +} + +.el-input-number { + position: relative; + display: inline-block; + width: 180px; + line-height: 38px +} + +.el-input-number .el-input { + display: block +} + +.el-input-number .el-input__inner { + -webkit-appearance: none; + padding-left: 50px; + padding-right: 50px; + text-align: center +} + +.el-input-number__decrease, +.el-input-number__increase { + position: absolute; + z-index: 1; + top: 1px; + width: 40px; + height: auto; + text-align: center; + background: #F5F7FA; + color: #606266; + cursor: pointer; + font-size: 13px +} + +.el-input-number__decrease:hover, +.el-input-number__increase:hover { + color: #409EFF +} + +.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), +.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) { + border-color: #409EFF +} + +.el-input-number__decrease.is-disabled, +.el-input-number__increase.is-disabled { + color: #C0C4CC; + cursor: not-allowed +} + +.el-input-number__increase { + right: 1px; + border-radius: 0 4px 4px 0; + border-left: 1px solid #DCDFE6 +} + +.el-input-number__decrease { + left: 1px; + border-radius: 4px 0 0 4px; + border-right: 1px solid #DCDFE6 +} + +.el-input-number.is-disabled .el-input-number__decrease, +.el-input-number.is-disabled .el-input-number__increase { + border-color: #E4E7ED; + color: #E4E7ED +} + +.el-input-number.is-disabled .el-input-number__decrease:hover, +.el-input-number.is-disabled .el-input-number__increase:hover { + color: #E4E7ED; + cursor: not-allowed +} + +.el-input-number--medium { + width: 200px; + line-height: 34px +} + +.el-input-number--medium .el-input-number__decrease, +.el-input-number--medium .el-input-number__increase { + width: 36px; + font-size: 14px +} + +.el-input-number--medium .el-input__inner { + padding-left: 43px; + padding-right: 43px +} + +.el-input-number--small { + width: 130px; + line-height: 30px +} + +.el-input-number--small .el-input-number__decrease, +.el-input-number--small .el-input-number__increase { + width: 32px; + font-size: 13px +} + +.el-input-number--small .el-input-number__decrease [class*=el-icon], +.el-input-number--small .el-input-number__increase [class*=el-icon] { + -webkit-transform: scale(.9); + transform: scale(.9) +} + +.el-input-number--small .el-input__inner { + padding-left: 39px; + padding-right: 39px +} + +.el-input-number--mini { + width: 130px; + line-height: 26px +} + +.el-input-number--mini .el-input-number__decrease, +.el-input-number--mini .el-input-number__increase { + width: 28px; + font-size: 12px +} + +.el-input-number--mini .el-input-number__decrease [class*=el-icon], +.el-input-number--mini .el-input-number__increase [class*=el-icon] { + -webkit-transform: scale(.8); + transform: scale(.8) +} + +.el-input-number--mini .el-input__inner { + padding-left: 35px; + padding-right: 35px +} + +.el-input-number.is-without-controls .el-input__inner { + padding-left: 15px; + padding-right: 15px +} + +.el-input-number.is-controls-right .el-input__inner { + padding-left: 15px; + padding-right: 50px +} + +.el-input-number.is-controls-right .el-input-number__decrease, +.el-input-number.is-controls-right .el-input-number__increase { + height: auto; + line-height: 19px +} + +.el-input-number.is-controls-right .el-input-number__decrease [class*=el-icon], +.el-input-number.is-controls-right .el-input-number__increase [class*=el-icon] { + -webkit-transform: scale(.8); + transform: scale(.8) +} + +.el-input-number.is-controls-right .el-input-number__increase { + border-radius: 0 4px 0 0; + border-bottom: 1px solid #DCDFE6 +} + +.el-input-number.is-controls-right .el-input-number__decrease { + right: 1px; + bottom: 1px; + top: auto; + left: auto; + border-right: none; + border-left: 1px solid #DCDFE6; + border-radius: 0 0 4px +} + +.el-input-number.is-controls-right[class*=medium] [class*=decrease], +.el-input-number.is-controls-right[class*=medium] [class*=increase] { + line-height: 17px +} + +.el-input-number.is-controls-right[class*=small] [class*=decrease], +.el-input-number.is-controls-right[class*=small] [class*=increase] { + line-height: 15px +} + +.el-input-number.is-controls-right[class*=mini] [class*=decrease], +.el-input-number.is-controls-right[class*=mini] [class*=increase] { + line-height: 13px +} + +.el-tooltip:focus:hover, +.el-tooltip:focus:not(.focusing) { + outline-width: 0 +} + +.el-tooltip__popper { + position: absolute; + border-radius: 4px; + padding: 10px; + z-index: 2000; + font-size: 12px; + line-height: 1.2; + min-width: 10px; + word-wrap: break-word +} + +.el-tooltip__popper .popper__arrow, +.el-tooltip__popper .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid +} + +.el-tooltip__popper .popper__arrow { + border-width: 6px +} + +.el-tooltip__popper .popper__arrow::after { + content: " "; + border-width: 5px +} + +.el-button-group::after, +.el-button-group::before, +.el-color-dropdown__main-wrapper::after, +.el-link.is-underline:hover:after, +.el-page-header__left::after, +.el-progress-bar__inner::after, +.el-row::after, +.el-row::before, +.el-slider::after, +.el-slider::before, +.el-slider__button-wrapper::after, +.el-transfer-panel .el-transfer-panel__footer::after, +.el-upload-cover::after, +.el-upload-list--picture-card .el-upload-list__item-actions::after { + content: "" +} + +.el-tooltip__popper[x-placement^=top] { + margin-bottom: 12px +} + +.el-tooltip__popper[x-placement^=top] .popper__arrow { + bottom: -6px; + border-top-color: #303133; + border-bottom-width: 0 +} + +.el-tooltip__popper[x-placement^=top] .popper__arrow::after { + bottom: 1px; + margin-left: -5px; + border-top-color: #303133; + border-bottom-width: 0 +} + +.el-tooltip__popper[x-placement^=bottom] { + margin-top: 12px +} + +.el-tooltip__popper[x-placement^=bottom] .popper__arrow { + top: -6px; + border-top-width: 0; + border-bottom-color: #303133 +} + +.el-tooltip__popper[x-placement^=bottom] .popper__arrow::after { + top: 1px; + margin-left: -5px; + border-top-width: 0; + border-bottom-color: #303133 +} + +.el-tooltip__popper[x-placement^=right] { + margin-left: 12px +} + +.el-tooltip__popper[x-placement^=right] .popper__arrow { + left: -6px; + border-right-color: #303133; + border-left-width: 0 +} + +.el-tooltip__popper[x-placement^=right] .popper__arrow::after { + bottom: -5px; + left: 1px; + border-right-color: #303133; + border-left-width: 0 +} + +.el-tooltip__popper[x-placement^=left] { + margin-right: 12px +} + +.el-tooltip__popper[x-placement^=left] .popper__arrow { + right: -6px; + border-right-width: 0; + border-left-color: #303133 +} + +.el-tooltip__popper[x-placement^=left] .popper__arrow::after { + right: 1px; + bottom: -5px; + margin-left: -5px; + border-right-width: 0; + border-left-color: #303133 +} + +.el-tooltip__popper.is-dark { + background: #303133; + color: #FFF +} + +.el-tooltip__popper.is-light { + background: #FFF; + border: 1px solid #303133 +} + +.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow { + border-top-color: #303133 +} + +.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow::after { + border-top-color: #FFF +} + +.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow { + border-bottom-color: #303133 +} + +.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow::after { + border-bottom-color: #FFF +} + +.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow { + border-left-color: #303133 +} + +.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow::after { + border-left-color: #FFF +} + +.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow { + border-right-color: #303133 +} + +.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow::after { + border-right-color: #FFF +} + +.el-slider::after, +.el-slider::before { + display: table +} + +.el-slider__button-wrapper .el-tooltip, +.el-slider__button-wrapper::after { + display: inline-block; + vertical-align: middle +} + +.el-slider::after { + clear: both +} + +.el-slider__runway { + width: 100%; + height: 6px; + margin: 16px 0; + background-color: #E4E7ED; + border-radius: 3px; + position: relative; + cursor: pointer; + vertical-align: middle +} + +.el-slider__runway.show-input { + margin-right: 160px; + width: auto +} + +.el-slider__runway.disabled { + cursor: default +} + +.el-slider__runway.disabled .el-slider__bar { + background-color: #C0C4CC +} + +.el-slider__runway.disabled .el-slider__button { + border-color: #C0C4CC +} + +.el-slider__runway.disabled .el-slider__button-wrapper.dragging, +.el-slider__runway.disabled .el-slider__button-wrapper.hover, +.el-slider__runway.disabled .el-slider__button-wrapper:hover { + cursor: not-allowed +} + +.el-slider__runway.disabled .el-slider__button.dragging, +.el-slider__runway.disabled .el-slider__button.hover, +.el-slider__runway.disabled .el-slider__button:hover { + -webkit-transform: scale(1); + transform: scale(1); + cursor: not-allowed +} + +.el-slider__button-wrapper, +.el-slider__stop { + -webkit-transform: translateX(-50%); + position: absolute +} + +.el-slider__input { + float: right; + margin-top: 3px; + width: 130px +} + +.el-slider__input.el-input-number--mini { + margin-top: 5px +} + +.el-slider__input.el-input-number--medium { + margin-top: 0 +} + +.el-slider__input.el-input-number--large { + margin-top: -2px +} + +.el-slider__bar { + height: 6px; + background-color: #409EFF; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + position: absolute +} + +.el-slider__button-wrapper { + height: 36px; + width: 36px; + z-index: 1001; + top: -15px; + transform: translateX(-50%); + background-color: transparent; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + line-height: normal +} + +.el-image-viewer__btn, +.el-slider__button, +.el-step__icon-inner { + -moz-user-select: none; + -ms-user-select: none +} + +.el-slider__button-wrapper::after { + height: 100% +} + +.el-slider__button-wrapper.hover, +.el-slider__button-wrapper:hover { + cursor: -webkit-grab; + cursor: grab +} + +.el-slider__button-wrapper.dragging { + cursor: -webkit-grabbing; + cursor: grabbing +} + +.el-slider__button { + width: 16px; + height: 16px; + border: 2px solid #409EFF; + background-color: #FFF; + border-radius: 50%; + -webkit-transition: .2s; + transition: .2s; + -webkit-user-select: none; + user-select: none +} + +.el-slider__button.dragging, +.el-slider__button.hover, +.el-slider__button:hover { + -webkit-transform: scale(1.2); + transform: scale(1.2) +} + +.el-slider__button.hover, +.el-slider__button:hover { + cursor: -webkit-grab; + cursor: grab +} + +.el-slider__button.dragging { + cursor: -webkit-grabbing; + cursor: grabbing +} + +.el-slider__stop { + height: 6px; + width: 6px; + border-radius: 100%; + background-color: #FFF; + transform: translateX(-50%) +} + +.el-slider__marks { + top: 0; + left: 12px; + width: 18px; + height: 100% +} + +.el-slider__marks-text { + position: absolute; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + font-size: 14px; + color: #909399; + margin-top: 15px +} + +.el-slider.is-vertical { + position: relative +} + +.el-slider.is-vertical .el-slider__runway { + width: 6px; + height: 100%; + margin: 0 16px +} + +.el-slider.is-vertical .el-slider__bar { + width: 6px; + height: auto; + border-radius: 0 0 3px 3px +} + +.el-slider.is-vertical .el-slider__button-wrapper { + top: auto; + left: -15px; + -webkit-transform: translateY(50%); + transform: translateY(50%) +} + +.el-slider.is-vertical .el-slider__stop { + -webkit-transform: translateY(50%); + transform: translateY(50%) +} + +.el-slider.is-vertical.el-slider--with-input { + padding-bottom: 58px +} + +.el-slider.is-vertical.el-slider--with-input .el-slider__input { + overflow: visible; + float: none; + position: absolute; + bottom: 22px; + width: 36px; + margin-top: 15px +} + +.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input__inner { + text-align: center; + padding-left: 5px; + padding-right: 5px +} + +.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease, +.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase { + top: 32px; + margin-top: -1px; + border: 1px solid #DCDFE6; + line-height: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1); + transition: border-color .2s cubic-bezier(.645, .045, .355, 1) +} + +.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease { + width: 18px; + right: 18px; + border-bottom-left-radius: 4px +} + +.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase { + width: 19px; + border-bottom-right-radius: 4px +} + +.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase~.el-input .el-input__inner { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0 +} + +.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__decrease, +.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__increase { + border-color: #C0C4CC +} + +.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__decrease, +.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__increase { + border-color: #409EFF +} + +.el-slider.is-vertical .el-slider__marks-text { + margin-top: 0; + left: 15px; + -webkit-transform: translateY(50%); + transform: translateY(50%) +} + +.el-loading-parent--relative { + position: relative !important +} + +.el-loading-parent--hidden { + overflow: hidden !important +} + +.el-loading-mask { + position: absolute; + z-index: 2000; + background-color: rgba(255, 255, 255, .9); + margin: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + -webkit-transition: opacity .3s; + transition: opacity .3s +} + +.el-loading-mask.is-fullscreen { + position: fixed +} + +.el-loading-mask.is-fullscreen .el-loading-spinner { + margin-top: -25px +} + +.el-loading-mask.is-fullscreen .el-loading-spinner .circular { + height: 50px; + width: 50px +} + +.el-loading-spinner { + top: 50%; + margin-top: -21px; + width: 100%; + text-align: center; + position: absolute +} + +.el-col-pull-0, +.el-col-pull-1, +.el-col-pull-10, +.el-col-pull-11, +.el-col-pull-12, +.el-col-pull-13, +.el-col-pull-14, +.el-col-pull-15, +.el-col-pull-16, +.el-col-pull-17, +.el-col-pull-18, +.el-col-pull-19, +.el-col-pull-2, +.el-col-pull-20, +.el-col-pull-21, +.el-col-pull-22, +.el-col-pull-23, +.el-col-pull-24, +.el-col-pull-3, +.el-col-pull-4, +.el-col-pull-5, +.el-col-pull-6, +.el-col-pull-7, +.el-col-pull-8, +.el-col-pull-9, +.el-col-push-0, +.el-col-push-1, +.el-col-push-10, +.el-col-push-11, +.el-col-push-12, +.el-col-push-13, +.el-col-push-14, +.el-col-push-15, +.el-col-push-16, +.el-col-push-17, +.el-col-push-18, +.el-col-push-19, +.el-col-push-2, +.el-col-push-20, +.el-col-push-21, +.el-col-push-22, +.el-col-push-23, +.el-col-push-24, +.el-col-push-3, +.el-col-push-4, +.el-col-push-5, +.el-col-push-6, +.el-col-push-7, +.el-col-push-8, +.el-col-push-9, +.el-row, +.el-upload-dragger, +.el-upload-list__item { + position: relative +} + +.el-loading-spinner .el-loading-text { + color: #409EFF; + margin: 3px 0; + font-size: 14px +} + +.el-loading-spinner .circular { + height: 42px; + width: 42px; + -webkit-animation: loading-rotate 2s linear infinite; + animation: loading-rotate 2s linear infinite +} + +.el-loading-spinner .path { + -webkit-animation: loading-dash 1.5s ease-in-out infinite; + animation: loading-dash 1.5s ease-in-out infinite; + stroke-dasharray: 90, 150; + stroke-dashoffset: 0; + stroke-width: 2; + stroke: #409EFF; + stroke-linecap: round +} + +.el-loading-spinner i { + color: #409EFF +} + +@-webkit-keyframes loading-rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +@keyframes loading-rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +@-webkit-keyframes loading-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0 + } + + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -40px + } + + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -120px + } +} + +@keyframes loading-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0 + } + + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -40px + } + + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -120px + } +} + +.el-row { + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-row::after, +.el-row::before { + display: table +} + +.el-row::after { + clear: both +} + +.el-row--flex { + display: -webkit-box; + display: -ms-flexbox; + display: flex +} + +.el-col-0, +.el-row--flex:after, +.el-row--flex:before { + display: none +} + +.el-row--flex.is-justify-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center +} + +.el-row--flex.is-justify-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end +} + +.el-row--flex.is-justify-space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between +} + +.el-row--flex.is-justify-space-around { + -ms-flex-pack: distribute; + justify-content: space-around +} + +.el-row--flex.is-align-top { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start +} + +.el-row--flex.is-align-middle { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.el-row--flex.is-align-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end +} + +[class*=el-col-] { + float: left; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-col-0 { + width: 0% +} + +.el-col-pull-0 { + right: 0 +} + +.el-col-push-0 { + left: 0 +} + +.el-col-1 { + width: 4.16667% +} + +.el-col-offset-1 { + margin-left: 4.16667% +} + +.el-col-pull-1 { + right: 4.16667% +} + +.el-col-push-1 { + left: 4.16667% +} + +.el-col-2 { + width: 8.33333% +} + +.el-col-offset-2 { + margin-left: 8.33333% +} + +.el-col-pull-2 { + right: 8.33333% +} + +.el-col-push-2 { + left: 8.33333% +} + +.el-col-3 { + width: 12.5% +} + +.el-col-offset-3 { + margin-left: 12.5% +} + +.el-col-pull-3 { + right: 12.5% +} + +.el-col-push-3 { + left: 12.5% +} + +.el-col-4 { + width: 16.66667% +} + +.el-col-offset-4 { + margin-left: 16.66667% +} + +.el-col-pull-4 { + right: 16.66667% +} + +.el-col-push-4 { + left: 16.66667% +} + +.el-col-5 { + width: 20.83333% +} + +.el-col-offset-5 { + margin-left: 20.83333% +} + +.el-col-pull-5 { + right: 20.83333% +} + +.el-col-push-5 { + left: 20.83333% +} + +.el-col-6 { + width: 25% +} + +.el-col-offset-6 { + margin-left: 25% +} + +.el-col-pull-6 { + right: 25% +} + +.el-col-push-6 { + left: 25% +} + +.el-col-7 { + width: 29.16667% +} + +.el-col-offset-7 { + margin-left: 29.16667% +} + +.el-col-pull-7 { + right: 29.16667% +} + +.el-col-push-7 { + left: 29.16667% +} + +.el-col-8 { + width: 33.33333% +} + +.el-col-offset-8 { + margin-left: 33.33333% +} + +.el-col-pull-8 { + right: 33.33333% +} + +.el-col-push-8 { + left: 33.33333% +} + +.el-col-9 { + width: 37.5% +} + +.el-col-offset-9 { + margin-left: 37.5% +} + +.el-col-pull-9 { + right: 37.5% +} + +.el-col-push-9 { + left: 37.5% +} + +.el-col-10 { + width: 41.66667% +} + +.el-col-offset-10 { + margin-left: 41.66667% +} + +.el-col-pull-10 { + right: 41.66667% +} + +.el-col-push-10 { + left: 41.66667% +} + +.el-col-11 { + width: 45.83333% +} + +.el-col-offset-11 { + margin-left: 45.83333% +} + +.el-col-pull-11 { + right: 45.83333% +} + +.el-col-push-11 { + left: 45.83333% +} + +.el-col-12 { + width: 50% +} + +.el-col-offset-12 { + margin-left: 50% +} + +.el-col-pull-12 { + right: 50% +} + +.el-col-push-12 { + left: 50% +} + +.el-col-13 { + width: 54.16667% +} + +.el-col-offset-13 { + margin-left: 54.16667% +} + +.el-col-pull-13 { + right: 54.16667% +} + +.el-col-push-13 { + left: 54.16667% +} + +.el-col-14 { + width: 58.33333% +} + +.el-col-offset-14 { + margin-left: 58.33333% +} + +.el-col-pull-14 { + right: 58.33333% +} + +.el-col-push-14 { + left: 58.33333% +} + +.el-col-15 { + width: 62.5% +} + +.el-col-offset-15 { + margin-left: 62.5% +} + +.el-col-pull-15 { + right: 62.5% +} + +.el-col-push-15 { + left: 62.5% +} + +.el-col-16 { + width: 66.66667% +} + +.el-col-offset-16 { + margin-left: 66.66667% +} + +.el-col-pull-16 { + right: 66.66667% +} + +.el-col-push-16 { + left: 66.66667% +} + +.el-col-17 { + width: 70.83333% +} + +.el-col-offset-17 { + margin-left: 70.83333% +} + +.el-col-pull-17 { + right: 70.83333% +} + +.el-col-push-17 { + left: 70.83333% +} + +.el-col-18 { + width: 75% +} + +.el-col-offset-18 { + margin-left: 75% +} + +.el-col-pull-18 { + right: 75% +} + +.el-col-push-18 { + left: 75% +} + +.el-col-19 { + width: 79.16667% +} + +.el-col-offset-19 { + margin-left: 79.16667% +} + +.el-col-pull-19 { + right: 79.16667% +} + +.el-col-push-19 { + left: 79.16667% +} + +.el-col-20 { + width: 83.33333% +} + +.el-col-offset-20 { + margin-left: 83.33333% +} + +.el-col-pull-20 { + right: 83.33333% +} + +.el-col-push-20 { + left: 83.33333% +} + +.el-col-21 { + width: 87.5% +} + +.el-col-offset-21 { + margin-left: 87.5% +} + +.el-col-pull-21 { + right: 87.5% +} + +.el-col-push-21 { + left: 87.5% +} + +.el-col-22 { + width: 91.66667% +} + +.el-col-offset-22 { + margin-left: 91.66667% +} + +.el-col-pull-22 { + right: 91.66667% +} + +.el-col-push-22 { + left: 91.66667% +} + +.el-col-23 { + width: 95.83333% +} + +.el-col-offset-23 { + margin-left: 95.83333% +} + +.el-col-pull-23 { + right: 95.83333% +} + +.el-col-push-23 { + left: 95.83333% +} + +.el-col-24 { + width: 100% +} + +.el-col-offset-24 { + margin-left: 100% +} + +.el-col-pull-24 { + right: 100% +} + +.el-col-push-24 { + left: 100% +} + +@media only screen and (max-width:767px) { + .el-col-xs-0 { + display: none; + width: 0% + } + + .el-col-xs-offset-0 { + margin-left: 0 + } + + .el-col-xs-pull-0 { + position: relative; + right: 0 + } + + .el-col-xs-push-0 { + position: relative; + left: 0 + } + + .el-col-xs-1 { + width: 4.16667% + } + + .el-col-xs-offset-1 { + margin-left: 4.16667% + } + + .el-col-xs-pull-1 { + position: relative; + right: 4.16667% + } + + .el-col-xs-push-1 { + position: relative; + left: 4.16667% + } + + .el-col-xs-2 { + width: 8.33333% + } + + .el-col-xs-offset-2 { + margin-left: 8.33333% + } + + .el-col-xs-pull-2 { + position: relative; + right: 8.33333% + } + + .el-col-xs-push-2 { + position: relative; + left: 8.33333% + } + + .el-col-xs-3 { + width: 12.5% + } + + .el-col-xs-offset-3 { + margin-left: 12.5% + } + + .el-col-xs-pull-3 { + position: relative; + right: 12.5% + } + + .el-col-xs-push-3 { + position: relative; + left: 12.5% + } + + .el-col-xs-4 { + width: 16.66667% + } + + .el-col-xs-offset-4 { + margin-left: 16.66667% + } + + .el-col-xs-pull-4 { + position: relative; + right: 16.66667% + } + + .el-col-xs-push-4 { + position: relative; + left: 16.66667% + } + + .el-col-xs-5 { + width: 20.83333% + } + + .el-col-xs-offset-5 { + margin-left: 20.83333% + } + + .el-col-xs-pull-5 { + position: relative; + right: 20.83333% + } + + .el-col-xs-push-5 { + position: relative; + left: 20.83333% + } + + .el-col-xs-6 { + width: 25% + } + + .el-col-xs-offset-6 { + margin-left: 25% + } + + .el-col-xs-pull-6 { + position: relative; + right: 25% + } + + .el-col-xs-push-6 { + position: relative; + left: 25% + } + + .el-col-xs-7 { + width: 29.16667% + } + + .el-col-xs-offset-7 { + margin-left: 29.16667% + } + + .el-col-xs-pull-7 { + position: relative; + right: 29.16667% + } + + .el-col-xs-push-7 { + position: relative; + left: 29.16667% + } + + .el-col-xs-8 { + width: 33.33333% + } + + .el-col-xs-offset-8 { + margin-left: 33.33333% + } + + .el-col-xs-pull-8 { + position: relative; + right: 33.33333% + } + + .el-col-xs-push-8 { + position: relative; + left: 33.33333% + } + + .el-col-xs-9 { + width: 37.5% + } + + .el-col-xs-offset-9 { + margin-left: 37.5% + } + + .el-col-xs-pull-9 { + position: relative; + right: 37.5% + } + + .el-col-xs-push-9 { + position: relative; + left: 37.5% + } + + .el-col-xs-10 { + width: 41.66667% + } + + .el-col-xs-offset-10 { + margin-left: 41.66667% + } + + .el-col-xs-pull-10 { + position: relative; + right: 41.66667% + } + + .el-col-xs-push-10 { + position: relative; + left: 41.66667% + } + + .el-col-xs-11 { + width: 45.83333% + } + + .el-col-xs-offset-11 { + margin-left: 45.83333% + } + + .el-col-xs-pull-11 { + position: relative; + right: 45.83333% + } + + .el-col-xs-push-11 { + position: relative; + left: 45.83333% + } + + .el-col-xs-12 { + width: 50% + } + + .el-col-xs-offset-12 { + margin-left: 50% + } + + .el-col-xs-pull-12 { + position: relative; + right: 50% + } + + .el-col-xs-push-12 { + position: relative; + left: 50% + } + + .el-col-xs-13 { + width: 54.16667% + } + + .el-col-xs-offset-13 { + margin-left: 54.16667% + } + + .el-col-xs-pull-13 { + position: relative; + right: 54.16667% + } + + .el-col-xs-push-13 { + position: relative; + left: 54.16667% + } + + .el-col-xs-14 { + width: 58.33333% + } + + .el-col-xs-offset-14 { + margin-left: 58.33333% + } + + .el-col-xs-pull-14 { + position: relative; + right: 58.33333% + } + + .el-col-xs-push-14 { + position: relative; + left: 58.33333% + } + + .el-col-xs-15 { + width: 62.5% + } + + .el-col-xs-offset-15 { + margin-left: 62.5% + } + + .el-col-xs-pull-15 { + position: relative; + right: 62.5% + } + + .el-col-xs-push-15 { + position: relative; + left: 62.5% + } + + .el-col-xs-16 { + width: 66.66667% + } + + .el-col-xs-offset-16 { + margin-left: 66.66667% + } + + .el-col-xs-pull-16 { + position: relative; + right: 66.66667% + } + + .el-col-xs-push-16 { + position: relative; + left: 66.66667% + } + + .el-col-xs-17 { + width: 70.83333% + } + + .el-col-xs-offset-17 { + margin-left: 70.83333% + } + + .el-col-xs-pull-17 { + position: relative; + right: 70.83333% + } + + .el-col-xs-push-17 { + position: relative; + left: 70.83333% + } + + .el-col-xs-18 { + width: 75% + } + + .el-col-xs-offset-18 { + margin-left: 75% + } + + .el-col-xs-pull-18 { + position: relative; + right: 75% + } + + .el-col-xs-push-18 { + position: relative; + left: 75% + } + + .el-col-xs-19 { + width: 79.16667% + } + + .el-col-xs-offset-19 { + margin-left: 79.16667% + } + + .el-col-xs-pull-19 { + position: relative; + right: 79.16667% + } + + .el-col-xs-push-19 { + position: relative; + left: 79.16667% + } + + .el-col-xs-20 { + width: 83.33333% + } + + .el-col-xs-offset-20 { + margin-left: 83.33333% + } + + .el-col-xs-pull-20 { + position: relative; + right: 83.33333% + } + + .el-col-xs-push-20 { + position: relative; + left: 83.33333% + } + + .el-col-xs-21 { + width: 87.5% + } + + .el-col-xs-offset-21 { + margin-left: 87.5% + } + + .el-col-xs-pull-21 { + position: relative; + right: 87.5% + } + + .el-col-xs-push-21 { + position: relative; + left: 87.5% + } + + .el-col-xs-22 { + width: 91.66667% + } + + .el-col-xs-offset-22 { + margin-left: 91.66667% + } + + .el-col-xs-pull-22 { + position: relative; + right: 91.66667% + } + + .el-col-xs-push-22 { + position: relative; + left: 91.66667% + } + + .el-col-xs-23 { + width: 95.83333% + } + + .el-col-xs-offset-23 { + margin-left: 95.83333% + } + + .el-col-xs-pull-23 { + position: relative; + right: 95.83333% + } + + .el-col-xs-push-23 { + position: relative; + left: 95.83333% + } + + .el-col-xs-24 { + width: 100% + } + + .el-col-xs-offset-24 { + margin-left: 100% + } + + .el-col-xs-pull-24 { + position: relative; + right: 100% + } + + .el-col-xs-push-24 { + position: relative; + left: 100% + } +} + +@media only screen and (min-width:768px) { + .el-col-sm-0 { + display: none; + width: 0% + } + + .el-col-sm-offset-0 { + margin-left: 0 + } + + .el-col-sm-pull-0 { + position: relative; + right: 0 + } + + .el-col-sm-push-0 { + position: relative; + left: 0 + } + + .el-col-sm-1 { + width: 4.16667% + } + + .el-col-sm-offset-1 { + margin-left: 4.16667% + } + + .el-col-sm-pull-1 { + position: relative; + right: 4.16667% + } + + .el-col-sm-push-1 { + position: relative; + left: 4.16667% + } + + .el-col-sm-2 { + width: 8.33333% + } + + .el-col-sm-offset-2 { + margin-left: 8.33333% + } + + .el-col-sm-pull-2 { + position: relative; + right: 8.33333% + } + + .el-col-sm-push-2 { + position: relative; + left: 8.33333% + } + + .el-col-sm-3 { + width: 12.5% + } + + .el-col-sm-offset-3 { + margin-left: 12.5% + } + + .el-col-sm-pull-3 { + position: relative; + right: 12.5% + } + + .el-col-sm-push-3 { + position: relative; + left: 12.5% + } + + .el-col-sm-4 { + width: 16.66667% + } + + .el-col-sm-offset-4 { + margin-left: 16.66667% + } + + .el-col-sm-pull-4 { + position: relative; + right: 16.66667% + } + + .el-col-sm-push-4 { + position: relative; + left: 16.66667% + } + + .el-col-sm-5 { + width: 20.83333% + } + + .el-col-sm-offset-5 { + margin-left: 20.83333% + } + + .el-col-sm-pull-5 { + position: relative; + right: 20.83333% + } + + .el-col-sm-push-5 { + position: relative; + left: 20.83333% + } + + .el-col-sm-6 { + width: 25% + } + + .el-col-sm-offset-6 { + margin-left: 25% + } + + .el-col-sm-pull-6 { + position: relative; + right: 25% + } + + .el-col-sm-push-6 { + position: relative; + left: 25% + } + + .el-col-sm-7 { + width: 29.16667% + } + + .el-col-sm-offset-7 { + margin-left: 29.16667% + } + + .el-col-sm-pull-7 { + position: relative; + right: 29.16667% + } + + .el-col-sm-push-7 { + position: relative; + left: 29.16667% + } + + .el-col-sm-8 { + width: 33.33333% + } + + .el-col-sm-offset-8 { + margin-left: 33.33333% + } + + .el-col-sm-pull-8 { + position: relative; + right: 33.33333% + } + + .el-col-sm-push-8 { + position: relative; + left: 33.33333% + } + + .el-col-sm-9 { + width: 37.5% + } + + .el-col-sm-offset-9 { + margin-left: 37.5% + } + + .el-col-sm-pull-9 { + position: relative; + right: 37.5% + } + + .el-col-sm-push-9 { + position: relative; + left: 37.5% + } + + .el-col-sm-10 { + width: 41.66667% + } + + .el-col-sm-offset-10 { + margin-left: 41.66667% + } + + .el-col-sm-pull-10 { + position: relative; + right: 41.66667% + } + + .el-col-sm-push-10 { + position: relative; + left: 41.66667% + } + + .el-col-sm-11 { + width: 45.83333% + } + + .el-col-sm-offset-11 { + margin-left: 45.83333% + } + + .el-col-sm-pull-11 { + position: relative; + right: 45.83333% + } + + .el-col-sm-push-11 { + position: relative; + left: 45.83333% + } + + .el-col-sm-12 { + width: 50% + } + + .el-col-sm-offset-12 { + margin-left: 50% + } + + .el-col-sm-pull-12 { + position: relative; + right: 50% + } + + .el-col-sm-push-12 { + position: relative; + left: 50% + } + + .el-col-sm-13 { + width: 54.16667% + } + + .el-col-sm-offset-13 { + margin-left: 54.16667% + } + + .el-col-sm-pull-13 { + position: relative; + right: 54.16667% + } + + .el-col-sm-push-13 { + position: relative; + left: 54.16667% + } + + .el-col-sm-14 { + width: 58.33333% + } + + .el-col-sm-offset-14 { + margin-left: 58.33333% + } + + .el-col-sm-pull-14 { + position: relative; + right: 58.33333% + } + + .el-col-sm-push-14 { + position: relative; + left: 58.33333% + } + + .el-col-sm-15 { + width: 62.5% + } + + .el-col-sm-offset-15 { + margin-left: 62.5% + } + + .el-col-sm-pull-15 { + position: relative; + right: 62.5% + } + + .el-col-sm-push-15 { + position: relative; + left: 62.5% + } + + .el-col-sm-16 { + width: 66.66667% + } + + .el-col-sm-offset-16 { + margin-left: 66.66667% + } + + .el-col-sm-pull-16 { + position: relative; + right: 66.66667% + } + + .el-col-sm-push-16 { + position: relative; + left: 66.66667% + } + + .el-col-sm-17 { + width: 70.83333% + } + + .el-col-sm-offset-17 { + margin-left: 70.83333% + } + + .el-col-sm-pull-17 { + position: relative; + right: 70.83333% + } + + .el-col-sm-push-17 { + position: relative; + left: 70.83333% + } + + .el-col-sm-18 { + width: 75% + } + + .el-col-sm-offset-18 { + margin-left: 75% + } + + .el-col-sm-pull-18 { + position: relative; + right: 75% + } + + .el-col-sm-push-18 { + position: relative; + left: 75% + } + + .el-col-sm-19 { + width: 79.16667% + } + + .el-col-sm-offset-19 { + margin-left: 79.16667% + } + + .el-col-sm-pull-19 { + position: relative; + right: 79.16667% + } + + .el-col-sm-push-19 { + position: relative; + left: 79.16667% + } + + .el-col-sm-20 { + width: 83.33333% + } + + .el-col-sm-offset-20 { + margin-left: 83.33333% + } + + .el-col-sm-pull-20 { + position: relative; + right: 83.33333% + } + + .el-col-sm-push-20 { + position: relative; + left: 83.33333% + } + + .el-col-sm-21 { + width: 87.5% + } + + .el-col-sm-offset-21 { + margin-left: 87.5% + } + + .el-col-sm-pull-21 { + position: relative; + right: 87.5% + } + + .el-col-sm-push-21 { + position: relative; + left: 87.5% + } + + .el-col-sm-22 { + width: 91.66667% + } + + .el-col-sm-offset-22 { + margin-left: 91.66667% + } + + .el-col-sm-pull-22 { + position: relative; + right: 91.66667% + } + + .el-col-sm-push-22 { + position: relative; + left: 91.66667% + } + + .el-col-sm-23 { + width: 95.83333% + } + + .el-col-sm-offset-23 { + margin-left: 95.83333% + } + + .el-col-sm-pull-23 { + position: relative; + right: 95.83333% + } + + .el-col-sm-push-23 { + position: relative; + left: 95.83333% + } + + .el-col-sm-24 { + width: 100% + } + + .el-col-sm-offset-24 { + margin-left: 100% + } + + .el-col-sm-pull-24 { + position: relative; + right: 100% + } + + .el-col-sm-push-24 { + position: relative; + left: 100% + } +} + +@media only screen and (min-width:992px) { + .el-col-md-0 { + display: none; + width: 0% + } + + .el-col-md-offset-0 { + margin-left: 0 + } + + .el-col-md-pull-0 { + position: relative; + right: 0 + } + + .el-col-md-push-0 { + position: relative; + left: 0 + } + + .el-col-md-1 { + width: 4.16667% + } + + .el-col-md-offset-1 { + margin-left: 4.16667% + } + + .el-col-md-pull-1 { + position: relative; + right: 4.16667% + } + + .el-col-md-push-1 { + position: relative; + left: 4.16667% + } + + .el-col-md-2 { + width: 8.33333% + } + + .el-col-md-offset-2 { + margin-left: 8.33333% + } + + .el-col-md-pull-2 { + position: relative; + right: 8.33333% + } + + .el-col-md-push-2 { + position: relative; + left: 8.33333% + } + + .el-col-md-3 { + width: 12.5% + } + + .el-col-md-offset-3 { + margin-left: 12.5% + } + + .el-col-md-pull-3 { + position: relative; + right: 12.5% + } + + .el-col-md-push-3 { + position: relative; + left: 12.5% + } + + .el-col-md-4 { + width: 16.66667% + } + + .el-col-md-offset-4 { + margin-left: 16.66667% + } + + .el-col-md-pull-4 { + position: relative; + right: 16.66667% + } + + .el-col-md-push-4 { + position: relative; + left: 16.66667% + } + + .el-col-md-5 { + width: 20.83333% + } + + .el-col-md-offset-5 { + margin-left: 20.83333% + } + + .el-col-md-pull-5 { + position: relative; + right: 20.83333% + } + + .el-col-md-push-5 { + position: relative; + left: 20.83333% + } + + .el-col-md-6 { + width: 25% + } + + .el-col-md-offset-6 { + margin-left: 25% + } + + .el-col-md-pull-6 { + position: relative; + right: 25% + } + + .el-col-md-push-6 { + position: relative; + left: 25% + } + + .el-col-md-7 { + width: 29.16667% + } + + .el-col-md-offset-7 { + margin-left: 29.16667% + } + + .el-col-md-pull-7 { + position: relative; + right: 29.16667% + } + + .el-col-md-push-7 { + position: relative; + left: 29.16667% + } + + .el-col-md-8 { + width: 33.33333% + } + + .el-col-md-offset-8 { + margin-left: 33.33333% + } + + .el-col-md-pull-8 { + position: relative; + right: 33.33333% + } + + .el-col-md-push-8 { + position: relative; + left: 33.33333% + } + + .el-col-md-9 { + width: 37.5% + } + + .el-col-md-offset-9 { + margin-left: 37.5% + } + + .el-col-md-pull-9 { + position: relative; + right: 37.5% + } + + .el-col-md-push-9 { + position: relative; + left: 37.5% + } + + .el-col-md-10 { + width: 41.66667% + } + + .el-col-md-offset-10 { + margin-left: 41.66667% + } + + .el-col-md-pull-10 { + position: relative; + right: 41.66667% + } + + .el-col-md-push-10 { + position: relative; + left: 41.66667% + } + + .el-col-md-11 { + width: 45.83333% + } + + .el-col-md-offset-11 { + margin-left: 45.83333% + } + + .el-col-md-pull-11 { + position: relative; + right: 45.83333% + } + + .el-col-md-push-11 { + position: relative; + left: 45.83333% + } + + .el-col-md-12 { + width: 50% + } + + .el-col-md-offset-12 { + margin-left: 50% + } + + .el-col-md-pull-12 { + position: relative; + right: 50% + } + + .el-col-md-push-12 { + position: relative; + left: 50% + } + + .el-col-md-13 { + width: 54.16667% + } + + .el-col-md-offset-13 { + margin-left: 54.16667% + } + + .el-col-md-pull-13 { + position: relative; + right: 54.16667% + } + + .el-col-md-push-13 { + position: relative; + left: 54.16667% + } + + .el-col-md-14 { + width: 58.33333% + } + + .el-col-md-offset-14 { + margin-left: 58.33333% + } + + .el-col-md-pull-14 { + position: relative; + right: 58.33333% + } + + .el-col-md-push-14 { + position: relative; + left: 58.33333% + } + + .el-col-md-15 { + width: 62.5% + } + + .el-col-md-offset-15 { + margin-left: 62.5% + } + + .el-col-md-pull-15 { + position: relative; + right: 62.5% + } + + .el-col-md-push-15 { + position: relative; + left: 62.5% + } + + .el-col-md-16 { + width: 66.66667% + } + + .el-col-md-offset-16 { + margin-left: 66.66667% + } + + .el-col-md-pull-16 { + position: relative; + right: 66.66667% + } + + .el-col-md-push-16 { + position: relative; + left: 66.66667% + } + + .el-col-md-17 { + width: 70.83333% + } + + .el-col-md-offset-17 { + margin-left: 70.83333% + } + + .el-col-md-pull-17 { + position: relative; + right: 70.83333% + } + + .el-col-md-push-17 { + position: relative; + left: 70.83333% + } + + .el-col-md-18 { + width: 75% + } + + .el-col-md-offset-18 { + margin-left: 75% + } + + .el-col-md-pull-18 { + position: relative; + right: 75% + } + + .el-col-md-push-18 { + position: relative; + left: 75% + } + + .el-col-md-19 { + width: 79.16667% + } + + .el-col-md-offset-19 { + margin-left: 79.16667% + } + + .el-col-md-pull-19 { + position: relative; + right: 79.16667% + } + + .el-col-md-push-19 { + position: relative; + left: 79.16667% + } + + .el-col-md-20 { + width: 83.33333% + } + + .el-col-md-offset-20 { + margin-left: 83.33333% + } + + .el-col-md-pull-20 { + position: relative; + right: 83.33333% + } + + .el-col-md-push-20 { + position: relative; + left: 83.33333% + } + + .el-col-md-21 { + width: 87.5% + } + + .el-col-md-offset-21 { + margin-left: 87.5% + } + + .el-col-md-pull-21 { + position: relative; + right: 87.5% + } + + .el-col-md-push-21 { + position: relative; + left: 87.5% + } + + .el-col-md-22 { + width: 91.66667% + } + + .el-col-md-offset-22 { + margin-left: 91.66667% + } + + .el-col-md-pull-22 { + position: relative; + right: 91.66667% + } + + .el-col-md-push-22 { + position: relative; + left: 91.66667% + } + + .el-col-md-23 { + width: 95.83333% + } + + .el-col-md-offset-23 { + margin-left: 95.83333% + } + + .el-col-md-pull-23 { + position: relative; + right: 95.83333% + } + + .el-col-md-push-23 { + position: relative; + left: 95.83333% + } + + .el-col-md-24 { + width: 100% + } + + .el-col-md-offset-24 { + margin-left: 100% + } + + .el-col-md-pull-24 { + position: relative; + right: 100% + } + + .el-col-md-push-24 { + position: relative; + left: 100% + } +} + +@media only screen and (min-width:1200px) { + .el-col-lg-0 { + display: none; + width: 0% + } + + .el-col-lg-offset-0 { + margin-left: 0 + } + + .el-col-lg-pull-0 { + position: relative; + right: 0 + } + + .el-col-lg-push-0 { + position: relative; + left: 0 + } + + .el-col-lg-1 { + width: 4.16667% + } + + .el-col-lg-offset-1 { + margin-left: 4.16667% + } + + .el-col-lg-pull-1 { + position: relative; + right: 4.16667% + } + + .el-col-lg-push-1 { + position: relative; + left: 4.16667% + } + + .el-col-lg-2 { + width: 8.33333% + } + + .el-col-lg-offset-2 { + margin-left: 8.33333% + } + + .el-col-lg-pull-2 { + position: relative; + right: 8.33333% + } + + .el-col-lg-push-2 { + position: relative; + left: 8.33333% + } + + .el-col-lg-3 { + width: 12.5% + } + + .el-col-lg-offset-3 { + margin-left: 12.5% + } + + .el-col-lg-pull-3 { + position: relative; + right: 12.5% + } + + .el-col-lg-push-3 { + position: relative; + left: 12.5% + } + + .el-col-lg-4 { + width: 16.66667% + } + + .el-col-lg-offset-4 { + margin-left: 16.66667% + } + + .el-col-lg-pull-4 { + position: relative; + right: 16.66667% + } + + .el-col-lg-push-4 { + position: relative; + left: 16.66667% + } + + .el-col-lg-5 { + width: 20.83333% + } + + .el-col-lg-offset-5 { + margin-left: 20.83333% + } + + .el-col-lg-pull-5 { + position: relative; + right: 20.83333% + } + + .el-col-lg-push-5 { + position: relative; + left: 20.83333% + } + + .el-col-lg-6 { + width: 25% + } + + .el-col-lg-offset-6 { + margin-left: 25% + } + + .el-col-lg-pull-6 { + position: relative; + right: 25% + } + + .el-col-lg-push-6 { + position: relative; + left: 25% + } + + .el-col-lg-7 { + width: 29.16667% + } + + .el-col-lg-offset-7 { + margin-left: 29.16667% + } + + .el-col-lg-pull-7 { + position: relative; + right: 29.16667% + } + + .el-col-lg-push-7 { + position: relative; + left: 29.16667% + } + + .el-col-lg-8 { + width: 33.33333% + } + + .el-col-lg-offset-8 { + margin-left: 33.33333% + } + + .el-col-lg-pull-8 { + position: relative; + right: 33.33333% + } + + .el-col-lg-push-8 { + position: relative; + left: 33.33333% + } + + .el-col-lg-9 { + width: 37.5% + } + + .el-col-lg-offset-9 { + margin-left: 37.5% + } + + .el-col-lg-pull-9 { + position: relative; + right: 37.5% + } + + .el-col-lg-push-9 { + position: relative; + left: 37.5% + } + + .el-col-lg-10 { + width: 41.66667% + } + + .el-col-lg-offset-10 { + margin-left: 41.66667% + } + + .el-col-lg-pull-10 { + position: relative; + right: 41.66667% + } + + .el-col-lg-push-10 { + position: relative; + left: 41.66667% + } + + .el-col-lg-11 { + width: 45.83333% + } + + .el-col-lg-offset-11 { + margin-left: 45.83333% + } + + .el-col-lg-pull-11 { + position: relative; + right: 45.83333% + } + + .el-col-lg-push-11 { + position: relative; + left: 45.83333% + } + + .el-col-lg-12 { + width: 50% + } + + .el-col-lg-offset-12 { + margin-left: 50% + } + + .el-col-lg-pull-12 { + position: relative; + right: 50% + } + + .el-col-lg-push-12 { + position: relative; + left: 50% + } + + .el-col-lg-13 { + width: 54.16667% + } + + .el-col-lg-offset-13 { + margin-left: 54.16667% + } + + .el-col-lg-pull-13 { + position: relative; + right: 54.16667% + } + + .el-col-lg-push-13 { + position: relative; + left: 54.16667% + } + + .el-col-lg-14 { + width: 58.33333% + } + + .el-col-lg-offset-14 { + margin-left: 58.33333% + } + + .el-col-lg-pull-14 { + position: relative; + right: 58.33333% + } + + .el-col-lg-push-14 { + position: relative; + left: 58.33333% + } + + .el-col-lg-15 { + width: 62.5% + } + + .el-col-lg-offset-15 { + margin-left: 62.5% + } + + .el-col-lg-pull-15 { + position: relative; + right: 62.5% + } + + .el-col-lg-push-15 { + position: relative; + left: 62.5% + } + + .el-col-lg-16 { + width: 66.66667% + } + + .el-col-lg-offset-16 { + margin-left: 66.66667% + } + + .el-col-lg-pull-16 { + position: relative; + right: 66.66667% + } + + .el-col-lg-push-16 { + position: relative; + left: 66.66667% + } + + .el-col-lg-17 { + width: 70.83333% + } + + .el-col-lg-offset-17 { + margin-left: 70.83333% + } + + .el-col-lg-pull-17 { + position: relative; + right: 70.83333% + } + + .el-col-lg-push-17 { + position: relative; + left: 70.83333% + } + + .el-col-lg-18 { + width: 75% + } + + .el-col-lg-offset-18 { + margin-left: 75% + } + + .el-col-lg-pull-18 { + position: relative; + right: 75% + } + + .el-col-lg-push-18 { + position: relative; + left: 75% + } + + .el-col-lg-19 { + width: 79.16667% + } + + .el-col-lg-offset-19 { + margin-left: 79.16667% + } + + .el-col-lg-pull-19 { + position: relative; + right: 79.16667% + } + + .el-col-lg-push-19 { + position: relative; + left: 79.16667% + } + + .el-col-lg-20 { + width: 83.33333% + } + + .el-col-lg-offset-20 { + margin-left: 83.33333% + } + + .el-col-lg-pull-20 { + position: relative; + right: 83.33333% + } + + .el-col-lg-push-20 { + position: relative; + left: 83.33333% + } + + .el-col-lg-21 { + width: 87.5% + } + + .el-col-lg-offset-21 { + margin-left: 87.5% + } + + .el-col-lg-pull-21 { + position: relative; + right: 87.5% + } + + .el-col-lg-push-21 { + position: relative; + left: 87.5% + } + + .el-col-lg-22 { + width: 91.66667% + } + + .el-col-lg-offset-22 { + margin-left: 91.66667% + } + + .el-col-lg-pull-22 { + position: relative; + right: 91.66667% + } + + .el-col-lg-push-22 { + position: relative; + left: 91.66667% + } + + .el-col-lg-23 { + width: 95.83333% + } + + .el-col-lg-offset-23 { + margin-left: 95.83333% + } + + .el-col-lg-pull-23 { + position: relative; + right: 95.83333% + } + + .el-col-lg-push-23 { + position: relative; + left: 95.83333% + } + + .el-col-lg-24 { + width: 100% + } + + .el-col-lg-offset-24 { + margin-left: 100% + } + + .el-col-lg-pull-24 { + position: relative; + right: 100% + } + + .el-col-lg-push-24 { + position: relative; + left: 100% + } +} + +@media only screen and (min-width:1920px) { + .el-col-xl-0 { + display: none; + width: 0% + } + + .el-col-xl-offset-0 { + margin-left: 0 + } + + .el-col-xl-pull-0 { + position: relative; + right: 0 + } + + .el-col-xl-push-0 { + position: relative; + left: 0 + } + + .el-col-xl-1 { + width: 4.16667% + } + + .el-col-xl-offset-1 { + margin-left: 4.16667% + } + + .el-col-xl-pull-1 { + position: relative; + right: 4.16667% + } + + .el-col-xl-push-1 { + position: relative; + left: 4.16667% + } + + .el-col-xl-2 { + width: 8.33333% + } + + .el-col-xl-offset-2 { + margin-left: 8.33333% + } + + .el-col-xl-pull-2 { + position: relative; + right: 8.33333% + } + + .el-col-xl-push-2 { + position: relative; + left: 8.33333% + } + + .el-col-xl-3 { + width: 12.5% + } + + .el-col-xl-offset-3 { + margin-left: 12.5% + } + + .el-col-xl-pull-3 { + position: relative; + right: 12.5% + } + + .el-col-xl-push-3 { + position: relative; + left: 12.5% + } + + .el-col-xl-4 { + width: 16.66667% + } + + .el-col-xl-offset-4 { + margin-left: 16.66667% + } + + .el-col-xl-pull-4 { + position: relative; + right: 16.66667% + } + + .el-col-xl-push-4 { + position: relative; + left: 16.66667% + } + + .el-col-xl-5 { + width: 20.83333% + } + + .el-col-xl-offset-5 { + margin-left: 20.83333% + } + + .el-col-xl-pull-5 { + position: relative; + right: 20.83333% + } + + .el-col-xl-push-5 { + position: relative; + left: 20.83333% + } + + .el-col-xl-6 { + width: 25% + } + + .el-col-xl-offset-6 { + margin-left: 25% + } + + .el-col-xl-pull-6 { + position: relative; + right: 25% + } + + .el-col-xl-push-6 { + position: relative; + left: 25% + } + + .el-col-xl-7 { + width: 29.16667% + } + + .el-col-xl-offset-7 { + margin-left: 29.16667% + } + + .el-col-xl-pull-7 { + position: relative; + right: 29.16667% + } + + .el-col-xl-push-7 { + position: relative; + left: 29.16667% + } + + .el-col-xl-8 { + width: 33.33333% + } + + .el-col-xl-offset-8 { + margin-left: 33.33333% + } + + .el-col-xl-pull-8 { + position: relative; + right: 33.33333% + } + + .el-col-xl-push-8 { + position: relative; + left: 33.33333% + } + + .el-col-xl-9 { + width: 37.5% + } + + .el-col-xl-offset-9 { + margin-left: 37.5% + } + + .el-col-xl-pull-9 { + position: relative; + right: 37.5% + } + + .el-col-xl-push-9 { + position: relative; + left: 37.5% + } + + .el-col-xl-10 { + width: 41.66667% + } + + .el-col-xl-offset-10 { + margin-left: 41.66667% + } + + .el-col-xl-pull-10 { + position: relative; + right: 41.66667% + } + + .el-col-xl-push-10 { + position: relative; + left: 41.66667% + } + + .el-col-xl-11 { + width: 45.83333% + } + + .el-col-xl-offset-11 { + margin-left: 45.83333% + } + + .el-col-xl-pull-11 { + position: relative; + right: 45.83333% + } + + .el-col-xl-push-11 { + position: relative; + left: 45.83333% + } + + .el-col-xl-12 { + width: 50% + } + + .el-col-xl-offset-12 { + margin-left: 50% + } + + .el-col-xl-pull-12 { + position: relative; + right: 50% + } + + .el-col-xl-push-12 { + position: relative; + left: 50% + } + + .el-col-xl-13 { + width: 54.16667% + } + + .el-col-xl-offset-13 { + margin-left: 54.16667% + } + + .el-col-xl-pull-13 { + position: relative; + right: 54.16667% + } + + .el-col-xl-push-13 { + position: relative; + left: 54.16667% + } + + .el-col-xl-14 { + width: 58.33333% + } + + .el-col-xl-offset-14 { + margin-left: 58.33333% + } + + .el-col-xl-pull-14 { + position: relative; + right: 58.33333% + } + + .el-col-xl-push-14 { + position: relative; + left: 58.33333% + } + + .el-col-xl-15 { + width: 62.5% + } + + .el-col-xl-offset-15 { + margin-left: 62.5% + } + + .el-col-xl-pull-15 { + position: relative; + right: 62.5% + } + + .el-col-xl-push-15 { + position: relative; + left: 62.5% + } + + .el-col-xl-16 { + width: 66.66667% + } + + .el-col-xl-offset-16 { + margin-left: 66.66667% + } + + .el-col-xl-pull-16 { + position: relative; + right: 66.66667% + } + + .el-col-xl-push-16 { + position: relative; + left: 66.66667% + } + + .el-col-xl-17 { + width: 70.83333% + } + + .el-col-xl-offset-17 { + margin-left: 70.83333% + } + + .el-col-xl-pull-17 { + position: relative; + right: 70.83333% + } + + .el-col-xl-push-17 { + position: relative; + left: 70.83333% + } + + .el-col-xl-18 { + width: 75% + } + + .el-col-xl-offset-18 { + margin-left: 75% + } + + .el-col-xl-pull-18 { + position: relative; + right: 75% + } + + .el-col-xl-push-18 { + position: relative; + left: 75% + } + + .el-col-xl-19 { + width: 79.16667% + } + + .el-col-xl-offset-19 { + margin-left: 79.16667% + } + + .el-col-xl-pull-19 { + position: relative; + right: 79.16667% + } + + .el-col-xl-push-19 { + position: relative; + left: 79.16667% + } + + .el-col-xl-20 { + width: 83.33333% + } + + .el-col-xl-offset-20 { + margin-left: 83.33333% + } + + .el-col-xl-pull-20 { + position: relative; + right: 83.33333% + } + + .el-col-xl-push-20 { + position: relative; + left: 83.33333% + } + + .el-col-xl-21 { + width: 87.5% + } + + .el-col-xl-offset-21 { + margin-left: 87.5% + } + + .el-col-xl-pull-21 { + position: relative; + right: 87.5% + } + + .el-col-xl-push-21 { + position: relative; + left: 87.5% + } + + .el-col-xl-22 { + width: 91.66667% + } + + .el-col-xl-offset-22 { + margin-left: 91.66667% + } + + .el-col-xl-pull-22 { + position: relative; + right: 91.66667% + } + + .el-col-xl-push-22 { + position: relative; + left: 91.66667% + } + + .el-col-xl-23 { + width: 95.83333% + } + + .el-col-xl-offset-23 { + margin-left: 95.83333% + } + + .el-col-xl-pull-23 { + position: relative; + right: 95.83333% + } + + .el-col-xl-push-23 { + position: relative; + left: 95.83333% + } + + .el-col-xl-24 { + width: 100% + } + + .el-col-xl-offset-24 { + margin-left: 100% + } + + .el-col-xl-pull-24 { + position: relative; + right: 100% + } + + .el-col-xl-push-24 { + position: relative; + left: 100% + } +} + +@-webkit-keyframes progress { + 0% { + background-position: 0 0 + } + + 100% { + background-position: 32px 0 + } +} + +.el-upload { + display: inline-block; + text-align: center; + cursor: pointer; + outline: 0 +} + +.el-upload__input { + display: none +} + +.el-upload__tip { + font-size: 12px; + color: #606266; + margin-top: 7px +} + +.el-upload iframe { + position: absolute; + z-index: -1; + top: 0; + left: 0; + filter: alpha(opacity=0) +} + +.el-upload--picture-card { + background-color: #fbfdff; + border: 1px dashed #c0ccda; + border-radius: 6px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 148px; + height: 148px; + cursor: pointer; + line-height: 146px; + vertical-align: top +} + +.el-upload--picture-card i { + font-size: 28px; + color: #8c939d +} + +.el-upload--picture-card:hover, +.el-upload:focus { + border-color: #409EFF; + color: #409EFF +} + +.el-upload:focus .el-upload-dragger { + border-color: #409EFF +} + +.el-upload-dragger { + background-color: #fff; + border: 1px dashed #d9d9d9; + border-radius: 6px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 360px; + height: 180px; + text-align: center; + cursor: pointer; + overflow: hidden +} + +.el-upload-dragger .el-icon-upload { + font-size: 67px; + color: #C0C4CC; + margin: 40px 0 16px; + line-height: 50px +} + +.el-upload-dragger+.el-upload__tip { + text-align: center +} + +.el-upload-dragger~.el-upload__files { + border-top: 1px solid #DCDFE6; + margin-top: 7px; + padding-top: 5px +} + +.el-upload-dragger .el-upload__text { + color: #606266; + font-size: 14px; + text-align: center +} + +.el-upload-dragger .el-upload__text em { + color: #409EFF; + font-style: normal +} + +.el-upload-dragger:hover { + border-color: #409EFF +} + +.el-upload-dragger.is-dragover { + background-color: rgba(32, 159, 255, .06); + border: 2px dashed #409EFF +} + +.el-upload-list { + margin: 0; + padding: 0; + list-style: none +} + +.el-upload-list__item { + -webkit-transition: all .5s cubic-bezier(.55, 0, .1, 1); + transition: all .5s cubic-bezier(.55, 0, .1, 1); + font-size: 14px; + color: #606266; + line-height: 1.8; + margin-top: 5px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 4px; + width: 100% +} + +.el-upload-list__item .el-progress { + position: absolute; + top: 20px; + width: 100% +} + +.el-upload-list__item .el-progress__text { + position: absolute; + right: 0; + top: -13px +} + +.el-upload-list__item .el-progress-bar { + margin-right: 0; + padding-right: 0 +} + +.el-upload-list__item:first-child { + margin-top: 10px +} + +.el-upload-list__item .el-icon-upload-success { + color: #67C23A +} + +.el-upload-list__item .el-icon-close { + display: none; + position: absolute; + top: 5px; + right: 5px; + cursor: pointer; + opacity: .75; + color: #606266 +} + +.el-upload-list__item .el-icon-close:hover { + opacity: 1 +} + +.el-upload-list__item .el-icon-close-tip { + display: none; + position: absolute; + top: 5px; + right: 5px; + font-size: 12px; + cursor: pointer; + opacity: 1; + color: #409EFF +} + +.el-upload-list__item:hover .el-icon-close { + display: inline-block +} + +.el-upload-list__item:hover .el-progress__text { + display: none +} + +.el-upload-list__item.is-success .el-upload-list__item-status-label { + display: block +} + +.el-upload-list__item.is-success .el-upload-list__item-name:focus, +.el-upload-list__item.is-success .el-upload-list__item-name:hover { + color: #409EFF; + cursor: pointer +} + +.el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip { + display: inline-block +} + +.el-upload-list__item.is-success:active, +.el-upload-list__item.is-success:not(.focusing):focus { + outline-width: 0 +} + +.el-upload-list__item.is-success:active .el-icon-close-tip, +.el-upload-list__item.is-success:focus .el-upload-list__item-status-label, +.el-upload-list__item.is-success:hover .el-upload-list__item-status-label, +.el-upload-list__item.is-success:not(.focusing):focus .el-icon-close-tip { + display: none +} + +.el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label { + display: block +} + +.el-upload-list__item-name { + color: #606266; + display: block; + margin-right: 40px; + overflow: hidden; + padding-left: 4px; + text-overflow: ellipsis; + -webkit-transition: color .3s; + transition: color .3s; + white-space: nowrap +} + +.el-upload-list__item-name [class^=el-icon] { + height: 100%; + margin-right: 7px; + color: #909399; + line-height: inherit +} + +.el-upload-list__item-status-label { + position: absolute; + right: 5px; + top: 0; + line-height: inherit; + display: none +} + +.el-upload-list__item-delete { + position: absolute; + right: 10px; + top: 0; + font-size: 12px; + color: #606266; + display: none +} + +.el-upload-list__item-delete:hover { + color: #409EFF +} + +.el-upload-list--picture-card { + margin: 0; + display: inline; + vertical-align: top +} + +.el-upload-list--picture-card .el-upload-list__item { + overflow: hidden; + background-color: #fff; + border: 1px solid #c0ccda; + border-radius: 6px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 148px; + height: 148px; + margin: 0 8px 8px 0; + display: inline-block +} + +.el-upload-list--picture-card .el-upload-list__item .el-icon-check, +.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check { + color: #FFF +} + +.el-upload-list--picture-card .el-upload-list__item .el-icon-close, +.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label { + display: none +} + +.el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text { + display: block +} + +.el-upload-list--picture-card .el-upload-list__item-name { + display: none +} + +.el-upload-list--picture-card .el-upload-list__item-thumbnail { + width: 100%; + height: 100% +} + +.el-upload-list--picture-card .el-upload-list__item-status-label { + position: absolute; + right: -15px; + top: -6px; + width: 40px; + height: 24px; + background: #13ce66; + text-align: center; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, .2); + box-shadow: 0 0 1pc 1px rgba(0, 0, 0, .2) +} + +.el-upload-list--picture-card .el-upload-list__item-status-label i { + font-size: 12px; + margin-top: 11px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg) +} + +.el-upload-list--picture-card .el-upload-list__item-actions { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + cursor: default; + text-align: center; + color: #fff; + opacity: 0; + font-size: 20px; + background-color: rgba(0, 0, 0, .5); + -webkit-transition: opacity .3s; + transition: opacity .3s +} + +.el-upload-list--picture-card .el-upload-list__item-actions::after { + display: inline-block; + height: 100%; + vertical-align: middle +} + +.el-upload-list--picture-card .el-upload-list__item-actions span { + display: none; + cursor: pointer +} + +.el-upload-list--picture-card .el-upload-list__item-actions span+span { + margin-left: 15px +} + +.el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete { + position: static; + font-size: inherit; + color: inherit +} + +.el-upload-list--picture-card .el-upload-list__item-actions:hover { + opacity: 1 +} + +.el-upload-list--picture-card .el-upload-list__item-actions:hover span { + display: inline-block +} + +.el-upload-list--picture-card .el-progress { + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + bottom: auto; + width: 126px +} + +.el-upload-list--picture-card .el-progress .el-progress__text { + top: 50% +} + +.el-upload-list--picture .el-upload-list__item { + overflow: hidden; + z-index: 0; + background-color: #fff; + border: 1px solid #c0ccda; + border-radius: 6px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin-top: 10px; + padding: 10px 10px 10px 90px; + height: 92px +} + +.el-upload-list--picture .el-upload-list__item .el-icon-check, +.el-upload-list--picture .el-upload-list__item .el-icon-circle-check { + color: #FFF +} + +.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label { + background: 0 0; + -webkit-box-shadow: none; + box-shadow: none; + top: -2px; + right: -12px +} + +.el-upload-list--picture .el-upload-list__item:hover .el-progress__text { + display: block +} + +.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name { + line-height: 70px; + margin-top: 0 +} + +.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i { + display: none +} + +.el-upload-list--picture .el-upload-list__item-thumbnail { + vertical-align: middle; + display: inline-block; + width: 70px; + height: 70px; + float: left; + position: relative; + z-index: 1; + margin-left: -80px; + background-color: #FFF +} + +.el-upload-list--picture .el-upload-list__item-name { + display: block; + margin-top: 20px +} + +.el-upload-list--picture .el-upload-list__item-name i { + font-size: 70px; + line-height: 1; + position: absolute; + left: 9px; + top: 10px +} + +.el-upload-list--picture .el-upload-list__item-status-label { + position: absolute; + right: -17px; + top: -7px; + width: 46px; + height: 26px; + background: #13ce66; + text-align: center; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-shadow: 0 1px 1px #ccc; + box-shadow: 0 1px 1px #ccc +} + +.el-upload-list--picture .el-upload-list__item-status-label i { + font-size: 12px; + margin-top: 12px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg) +} + +.el-upload-list--picture .el-progress { + position: relative; + top: -7px +} + +.el-upload-cover { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 10; + cursor: default +} + +.el-upload-cover::after { + display: inline-block; + height: 100%; + vertical-align: middle +} + +.el-upload-cover img { + display: block; + width: 100%; + height: 100% +} + +.el-upload-cover__label { + position: absolute; + right: -15px; + top: -6px; + width: 40px; + height: 24px; + background: #13ce66; + text-align: center; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, .2); + box-shadow: 0 0 1pc 1px rgba(0, 0, 0, .2) +} + +.el-upload-cover__label i { + font-size: 12px; + margin-top: 11px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + color: #fff +} + +.el-upload-cover__progress { + display: inline-block; + vertical-align: middle; + position: static; + width: 243px +} + +.el-upload-cover__progress+.el-upload__inner { + opacity: 0 +} + +.el-upload-cover__content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.el-upload-cover__interact { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, .72); + text-align: center +} + +.el-upload-cover__interact .btn { + display: inline-block; + color: #FFF; + font-size: 14px; + cursor: pointer; + vertical-align: middle; + -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + margin-top: 60px +} + +.el-upload-cover__interact .btn span { + opacity: 0; + -webkit-transition: opacity .15s linear; + transition: opacity .15s linear +} + +.el-upload-cover__interact .btn:not(:first-child) { + margin-left: 35px +} + +.el-upload-cover__interact .btn:hover { + -webkit-transform: translateY(-13px); + transform: translateY(-13px) +} + +.el-upload-cover__interact .btn:hover span { + opacity: 1 +} + +.el-upload-cover__interact .btn i { + color: #FFF; + display: block; + font-size: 24px; + line-height: inherit; + margin: 0 auto 5px +} + +.el-upload-cover__title { + position: absolute; + bottom: 0; + left: 0; + background-color: #FFF; + height: 36px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 400; + text-align: left; + padding: 0 10px; + margin: 0; + line-height: 36px; + font-size: 14px; + color: #303133 +} + +.el-upload-cover+.el-upload__inner { + opacity: 0; + position: relative; + z-index: 1 +} + +.el-progress { + position: relative; + line-height: 1 +} + +.el-progress__text { + font-size: 14px; + color: #606266; + display: inline-block; + vertical-align: middle; + margin-left: 10px; + line-height: 1 +} + +.el-progress__text i { + vertical-align: middle; + display: block +} + +.el-progress--circle, +.el-progress--dashboard { + display: inline-block +} + +.el-progress--circle .el-progress__text, +.el-progress--dashboard .el-progress__text { + position: absolute; + top: 50%; + left: 0; + width: 100%; + text-align: center; + margin: 0; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%) +} + +.el-progress--circle .el-progress__text i, +.el-progress--dashboard .el-progress__text i { + vertical-align: middle; + display: inline-block +} + +.el-progress--without-text .el-progress__text { + display: none +} + +.el-progress--without-text .el-progress-bar { + padding-right: 0; + margin-right: 0; + display: block +} + +.el-progress--text-inside .el-progress-bar { + padding-right: 0; + margin-right: 0 +} + +.el-progress.is-success .el-progress-bar__inner { + background-color: #67C23A +} + +.el-progress.is-success .el-progress__text { + color: #67C23A +} + +.el-progress.is-warning .el-progress-bar__inner { + background-color: #E6A23C +} + +.el-badge__content, +.el-progress.is-exception .el-progress-bar__inner { + background-color: #F56C6C +} + +.el-progress.is-warning .el-progress__text { + color: #E6A23C +} + +.el-progress.is-exception .el-progress__text { + color: #F56C6C +} + +.el-progress-bar { + padding-right: 50px; + display: inline-block; + vertical-align: middle; + width: 100%; + margin-right: -55px; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-card__header, +.el-message, +.el-step__icon { + -webkit-box-sizing: border-box +} + +.el-progress-bar__outer { + height: 6px; + border-radius: 100px; + background-color: #EBEEF5; + overflow: hidden; + position: relative; + vertical-align: middle +} + +.el-progress-bar__inner { + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: #409EFF; + text-align: right; + border-radius: 100px; + line-height: 1; + white-space: nowrap; + -webkit-transition: width .6s ease; + transition: width .6s ease +} + +.el-progress-bar__inner::after { + display: inline-block; + height: 100%; + vertical-align: middle +} + +.el-progress-bar__innerText { + display: inline-block; + vertical-align: middle; + color: #FFF; + font-size: 12px; + margin: 0 5px +} + +@keyframes progress { + 0% { + background-position: 0 0 + } + + 100% { + background-position: 32px 0 + } +} + +.el-time-spinner { + width: 100%; + white-space: nowrap +} + +.el-spinner { + display: inline-block; + vertical-align: middle +} + +.el-spinner-inner { + -webkit-animation: rotate 2s linear infinite; + animation: rotate 2s linear infinite; + width: 50px; + height: 50px +} + +.el-spinner-inner .path { + stroke: #ececec; + stroke-linecap: round; + -webkit-animation: dash 1.5s ease-in-out infinite; + animation: dash 1.5s ease-in-out infinite +} + +@-webkit-keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +@-webkit-keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0 + } + + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35 + } + + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124 + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0 + } + + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35 + } + + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124 + } +} + +.el-message { + min-width: 380px; + box-sizing: border-box; + border-radius: 4px; + border-width: 1px; + border-style: solid; + border-color: #EBEEF5; + position: fixed; + left: 50%; + top: 20px; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + background-color: #edf2fc; + -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s; + transition: opacity .3s, top .4s, -webkit-transform .4s; + transition: opacity .3s, transform .4s, top .4s; + transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s; + overflow: hidden; + padding: 15px 15px 15px 20px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.el-message.is-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center +} + +.el-message.is-closable .el-message__content { + padding-right: 16px +} + +.el-message p { + margin: 0 +} + +.el-message--info .el-message__content { + color: #909399 +} + +.el-message--success { + background-color: #f0f9eb; + border-color: #e1f3d8 +} + +.el-message--success .el-message__content { + color: #67C23A +} + +.el-message--warning { + background-color: #fdf6ec; + border-color: #faecd8 +} + +.el-message--warning .el-message__content { + color: #E6A23C +} + +.el-message--error { + background-color: #fef0f0; + border-color: #fde2e2 +} + +.el-message--error .el-message__content { + color: #F56C6C +} + +.el-message__icon { + margin-right: 10px +} + +.el-message__content { + padding: 0; + font-size: 14px; + line-height: 1 +} + +.el-message__content:focus { + outline-width: 0 +} + +.el-message__closeBtn { + position: absolute; + top: 50%; + right: 15px; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + cursor: pointer; + color: #C0C4CC; + font-size: 16px +} + +.el-message__closeBtn:focus { + outline-width: 0 +} + +.el-message__closeBtn:hover { + color: #909399 +} + +.el-message .el-icon-success { + color: #67C23A +} + +.el-message .el-icon-error { + color: #F56C6C +} + +.el-message .el-icon-info { + color: #909399 +} + +.el-message .el-icon-warning { + color: #E6A23C +} + +.el-message-fade-enter, +.el-message-fade-leave-active { + opacity: 0; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%) +} + +.el-badge { + position: relative; + vertical-align: middle; + display: inline-block +} + +.el-badge__content { + border-radius: 10px; + color: #FFF; + display: inline-block; + font-size: 12px; + height: 18px; + line-height: 18px; + padding: 0 6px; + text-align: center; + white-space: nowrap; + border: 1px solid #FFF +} + +.el-badge__content.is-fixed { + position: absolute; + top: 0; + right: 10px; + -webkit-transform: translateY(-50%) translateX(100%); + transform: translateY(-50%) translateX(100%) +} + +.el-rate__icon, +.el-rate__item { + position: relative; + display: inline-block +} + +.el-badge__content.is-fixed.is-dot { + right: 5px +} + +.el-badge__content.is-dot { + height: 8px; + width: 8px; + padding: 0; + right: 0; + border-radius: 50% +} + +.el-badge__content--primary { + background-color: #409EFF +} + +.el-badge__content--success { + background-color: #67C23A +} + +.el-badge__content--warning { + background-color: #E6A23C +} + +.el-badge__content--info { + background-color: #909399 +} + +.el-badge__content--danger { + background-color: #F56C6C +} + +.el-card { + border-radius: 4px; + border: 1px solid #EBEEF5; + background-color: #FFF; + overflow: hidden; + color: #303133; + -webkit-transition: .3s; + transition: .3s +} + +.el-card.is-always-shadow, +.el-card.is-hover-shadow:focus, +.el-card.is-hover-shadow:hover { + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) +} + +.el-card__header { + padding: 18px 20px; + border-bottom: 1px solid #EBEEF5; + box-sizing: border-box +} + +.el-card__body, +.el-main { + padding: 20px +} + +.el-rate { + height: 20px; + line-height: 1 +} + +.el-rate:active, +.el-rate:focus { + outline-width: 0 +} + +.el-rate__item { + font-size: 0; + vertical-align: middle +} + +.el-rate__icon { + font-size: 18px; + margin-right: 6px; + color: #C0C4CC; + -webkit-transition: .3s; + transition: .3s +} + +.el-rate__decimal, +.el-rate__icon .path2 { + position: absolute; + top: 0; + left: 0 +} + +.el-rate__icon.hover { + -webkit-transform: scale(1.15); + transform: scale(1.15) +} + +.el-rate__decimal { + display: inline-block; + overflow: hidden +} + +.el-step.is-vertical, +.el-steps { + display: -webkit-box; + display: -ms-flexbox +} + +.el-rate__text { + font-size: 14px; + vertical-align: middle +} + +.el-steps { + display: flex +} + +.el-steps--simple { + padding: 13px 8%; + border-radius: 4px; + background: #F5F7FA +} + +.el-steps--horizontal { + white-space: nowrap +} + +.el-steps--vertical { + height: 100%; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column +} + +.el-step { + position: relative; + -ms-flex-negative: 1; + flex-shrink: 1 +} + +.el-step:last-of-type .el-step__line { + display: none +} + +.el-step:last-of-type.is-flex { + -ms-flex-preferred-size: auto !important; + flex-basis: auto !important; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0 +} + +.el-step:last-of-type .el-step__description, +.el-step:last-of-type .el-step__main { + padding-right: 0 +} + +.el-step__head { + position: relative; + width: 100% +} + +.el-step__head.is-process { + color: #303133; + border-color: #303133 +} + +.el-step__head.is-wait { + color: #C0C4CC; + border-color: #C0C4CC +} + +.el-step__head.is-success { + color: #67C23A; + border-color: #67C23A +} + +.el-step__head.is-error { + color: #F56C6C; + border-color: #F56C6C +} + +.el-step__head.is-finish { + color: #409EFF; + border-color: #409EFF +} + +.el-step__icon { + position: relative; + z-index: 1; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 24px; + height: 24px; + font-size: 14px; + box-sizing: border-box; + background: #FFF; + -webkit-transition: .15s ease-out; + transition: .15s ease-out +} + +.el-step.is-horizontal, +.el-step__icon-inner { + display: inline-block +} + +.el-step__icon.is-text { + border-radius: 50%; + border: 2px solid; + border-color: inherit +} + +.el-step__icon.is-icon { + width: 40px +} + +.el-step__icon-inner { + -webkit-user-select: none; + user-select: none; + text-align: center; + font-weight: 700; + line-height: 1; + color: inherit +} + +.el-step__icon-inner[class*=el-icon]:not(.is-status) { + font-size: 25px; + font-weight: 400 +} + +.el-step__icon-inner.is-status { + -webkit-transform: translateY(1px); + transform: translateY(1px) +} + +.el-step__line { + position: absolute; + border-color: inherit; + background-color: #C0C4CC +} + +.el-step__line-inner { + display: block; + border-width: 1px; + border-style: solid; + border-color: inherit; + -webkit-transition: .15s ease-out; + transition: .15s ease-out; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 0; + height: 0 +} + +.el-step__main { + white-space: normal; + text-align: left +} + +.el-step__title { + font-size: 16px; + line-height: 38px +} + +.el-step__title.is-process { + font-weight: 700; + color: #303133 +} + +.el-step__title.is-wait { + color: #C0C4CC +} + +.el-step__title.is-success { + color: #67C23A +} + +.el-step__title.is-error { + color: #F56C6C +} + +.el-step__title.is-finish { + color: #409EFF +} + +.el-step__description { + padding-right: 10%; + margin-top: -5px; + font-size: 12px; + line-height: 20px; + font-weight: 400 +} + +.el-step__description.is-process { + color: #303133 +} + +.el-step__description.is-wait { + color: #C0C4CC +} + +.el-step__description.is-success { + color: #67C23A +} + +.el-step__description.is-error { + color: #F56C6C +} + +.el-step__description.is-finish { + color: #409EFF +} + +.el-step.is-horizontal .el-step__line { + height: 2px; + top: 11px; + left: 0; + right: 0 +} + +.el-step.is-vertical { + display: flex +} + +.el-step.is-vertical .el-step__head { + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + width: 24px +} + +.el-step.is-vertical .el-step__main { + padding-left: 10px; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1 +} + +.el-step.is-vertical .el-step__title { + line-height: 24px; + padding-bottom: 8px +} + +.el-step.is-vertical .el-step__line { + width: 2px; + top: 0; + bottom: 0; + left: 11px +} + +.el-step.is-vertical .el-step__icon.is-icon { + width: 24px +} + +.el-step.is-center .el-step__head, +.el-step.is-center .el-step__main { + text-align: center +} + +.el-step.is-center .el-step__description { + padding-left: 20%; + padding-right: 20% +} + +.el-step.is-center .el-step__line { + left: 50%; + right: -50% +} + +.el-step.is-simple { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.el-step.is-simple .el-step__head { + width: auto; + font-size: 0; + padding-right: 10px +} + +.el-step.is-simple .el-step__icon { + background: 0 0; + width: 16px; + height: 16px; + font-size: 12px +} + +.el-step.is-simple .el-step__icon-inner[class*=el-icon]:not(.is-status) { + font-size: 18px +} + +.el-step.is-simple .el-step__icon-inner.is-status { + -webkit-transform: scale(.8) translateY(1px); + transform: scale(.8) translateY(1px) +} + +.el-step.is-simple .el-step__main { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1 +} + +.el-step.is-simple .el-step__title { + font-size: 16px; + line-height: 20px +} + +.el-step.is-simple:not(:last-of-type) .el-step__title { + max-width: 50%; + word-break: break-all +} + +.el-step.is-simple .el-step__arrow { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center +} + +.el-step.is-simple .el-step__arrow::after, +.el-step.is-simple .el-step__arrow::before { + content: ''; + display: inline-block; + position: absolute; + height: 15px; + width: 1px; + background: #C0C4CC +} + +.el-step.is-simple .el-step__arrow::before { + -webkit-transform: rotate(-45deg) translateY(-4px); + transform: rotate(-45deg) translateY(-4px); + -webkit-transform-origin: 0 0; + transform-origin: 0 0 +} + +.el-step.is-simple .el-step__arrow::after { + -webkit-transform: rotate(45deg) translateY(4px); + transform: rotate(45deg) translateY(4px); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100% +} + +.el-step.is-simple:last-of-type .el-step__arrow { + display: none +} + +.el-carousel { + position: relative +} + +.el-carousel--horizontal { + overflow-x: hidden +} + +.el-carousel--vertical { + overflow-y: hidden +} + +.el-carousel__container { + position: relative; + height: 300px +} + +.el-carousel__arrow { + border: none; + outline: 0; + padding: 0; + margin: 0; + height: 36px; + width: 36px; + cursor: pointer; + -webkit-transition: .3s; + transition: .3s; + border-radius: 50%; + background-color: rgba(31, 45, 61, .11); + color: #FFF; + position: absolute; + top: 50%; + z-index: 10; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + text-align: center; + font-size: 12px +} + +.el-carousel__arrow--left { + left: 16px +} + +.el-carousel__arrow:hover { + background-color: rgba(31, 45, 61, .23) +} + +.el-carousel__arrow i { + cursor: pointer +} + +.el-carousel__indicators { + position: absolute; + list-style: none; + margin: 0; + padding: 0; + z-index: 2 +} + +.el-carousel__indicators--horizontal { + bottom: 0; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%) +} + +.el-carousel__indicators--vertical { + right: 0; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%) +} + +.el-carousel__indicators--outside { + bottom: 26px; + text-align: center; + position: static; + -webkit-transform: none; + transform: none +} + +.el-carousel__indicators--outside .el-carousel__indicator:hover button { + opacity: .64 +} + +.el-carousel__indicators--outside button { + background-color: #C0C4CC; + opacity: .24 +} + +.el-carousel__indicators--labels { + left: 0; + right: 0; + -webkit-transform: none; + transform: none; + text-align: center +} + +.el-carousel__indicators--labels .el-carousel__button { + height: auto; + width: auto; + padding: 2px 18px; + font-size: 12px +} + +.el-carousel__indicators--labels .el-carousel__indicator { + padding: 6px 4px +} + +.el-carousel__indicator { + background-color: transparent; + cursor: pointer +} + +.el-carousel__indicator:hover button { + opacity: .72 +} + +.el-carousel__indicator--horizontal { + display: inline-block; + padding: 12px 4px +} + +.el-carousel__indicator--vertical { + padding: 4px 12px +} + +.el-carousel__indicator--vertical .el-carousel__button { + width: 2px; + height: 15px +} + +.el-carousel__indicator.is-active button { + opacity: 1 +} + +.el-carousel__button { + display: block; + opacity: .48; + width: 30px; + height: 2px; + background-color: #FFF; + border: none; + outline: 0; + padding: 0; + margin: 0; + cursor: pointer; + -webkit-transition: .3s; + transition: .3s +} + +.el-carousel__item, +.el-carousel__mask { + height: 100%; + position: absolute; + top: 0; + left: 0 +} + +.carousel-arrow-left-enter, +.carousel-arrow-left-leave-active { + -webkit-transform: translateY(-50%) translateX(-10px); + transform: translateY(-50%) translateX(-10px); + opacity: 0 +} + +.carousel-arrow-right-enter, +.carousel-arrow-right-leave-active { + -webkit-transform: translateY(-50%) translateX(10px); + transform: translateY(-50%) translateX(10px); + opacity: 0 +} + +.el-carousel__item { + width: 100%; + display: inline-block; + overflow: hidden; + z-index: 0 +} + +.el-carousel__item.is-active { + z-index: 2 +} + +.el-carousel__item.is-animating { + -webkit-transition: -webkit-transform .4s ease-in-out; + transition: -webkit-transform .4s ease-in-out; + transition: transform .4s ease-in-out; + transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out +} + +.el-carousel__item--card { + width: 50%; + -webkit-transition: -webkit-transform .4s ease-in-out; + transition: -webkit-transform .4s ease-in-out; + transition: transform .4s ease-in-out; + transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out +} + +.el-carousel__item--card.is-in-stage { + cursor: pointer; + z-index: 1 +} + +.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask, +.el-carousel__item--card.is-in-stage:hover .el-carousel__mask { + opacity: .12 +} + +.el-carousel__item--card.is-active { + z-index: 2 +} + +.el-carousel__mask { + width: 100%; + background-color: #FFF; + opacity: .24; + -webkit-transition: .2s; + transition: .2s +} + +.fade-in-linear-enter-active, +.fade-in-linear-leave-active { + -webkit-transition: opacity .2s linear; + transition: opacity .2s linear +} + +.fade-in-linear-enter, +.fade-in-linear-leave, +.fade-in-linear-leave-active { + opacity: 0 +} + +.el-fade-in-linear-enter-active, +.el-fade-in-linear-leave-active { + -webkit-transition: opacity .2s linear; + transition: opacity .2s linear +} + +.el-fade-in-linear-enter, +.el-fade-in-linear-leave, +.el-fade-in-linear-leave-active { + opacity: 0 +} + +.el-fade-in-enter-active, +.el-fade-in-leave-active { + -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1); + transition: all .3s cubic-bezier(.55, 0, .1, 1) +} + +.el-fade-in-enter, +.el-fade-in-leave-active { + opacity: 0 +} + +.el-zoom-in-center-enter-active, +.el-zoom-in-center-leave-active { + -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1); + transition: all .3s cubic-bezier(.55, 0, .1, 1) +} + +.el-zoom-in-center-enter, +.el-zoom-in-center-leave-active { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0) +} + +.el-zoom-in-top-enter-active, +.el-zoom-in-top-leave-active { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + -webkit-transform-origin: center top; + transform-origin: center top +} + +.el-zoom-in-top-enter, +.el-zoom-in-top-leave-active { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0) +} + +.el-zoom-in-bottom-enter-active, +.el-zoom-in-bottom-leave-active { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + -webkit-transform-origin: center bottom; + transform-origin: center bottom +} + +.el-zoom-in-bottom-enter, +.el-zoom-in-bottom-leave-active { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0) +} + +.el-zoom-in-left-enter-active, +.el-zoom-in-left-leave-active { + opacity: 1; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + -webkit-transform-origin: top left; + transform-origin: top left +} + +.el-zoom-in-left-enter, +.el-zoom-in-left-leave-active { + opacity: 0; + -webkit-transform: scale(.45, .45); + transform: scale(.45, .45) +} + +.collapse-transition { + -webkit-transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out; + transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out +} + +.horizontal-collapse-transition { + -webkit-transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out; + transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out +} + +.el-list-enter-active, +.el-list-leave-active { + -webkit-transition: all 1s; + transition: all 1s +} + +.el-list-enter, +.el-list-leave-active { + opacity: 0; + -webkit-transform: translateY(-30px); + transform: translateY(-30px) +} + +.el-opacity-transition { + -webkit-transition: opacity .3s cubic-bezier(.55, 0, .1, 1); + transition: opacity .3s cubic-bezier(.55, 0, .1, 1) +} + +.el-collapse { + border-top: 1px solid #EBEEF5; + border-bottom: 1px solid #EBEEF5 +} + +.el-collapse-item.is-disabled .el-collapse-item__header { + color: #bbb; + cursor: not-allowed +} + +.el-collapse-item__header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 48px; + line-height: 48px; + background-color: #FFF; + color: #303133; + cursor: pointer; + border-bottom: 1px solid #EBEEF5; + font-size: 13px; + font-weight: 500; + -webkit-transition: border-bottom-color .3s; + transition: border-bottom-color .3s; + outline: 0 +} + +.el-collapse-item__arrow { + margin: 0 8px 0 auto; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + font-weight: 300 +} + +.el-collapse-item__arrow.is-active { + -webkit-transform: rotate(90deg); + transform: rotate(90deg) +} + +.el-collapse-item__header.focusing:focus:not(:hover) { + color: #409EFF +} + +.el-collapse-item__header.is-active { + border-bottom-color: transparent +} + +.el-collapse-item__wrap { + will-change: height; + background-color: #FFF; + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-bottom: 1px solid #EBEEF5 +} + +.el-cascader__search-input, +.el-cascader__tags, +.el-tag { + -webkit-box-sizing: border-box +} + +.el-collapse-item__content { + padding-bottom: 25px; + font-size: 13px; + color: #303133; + line-height: 1.769230769230769 +} + +.el-collapse-item:last-child { + margin-bottom: -1px +} + +.el-popper .popper__arrow, +.el-popper .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid +} + +.el-cascader, +.el-tag { + display: inline-block +} + +.el-popper .popper__arrow { + border-width: 6px; + -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03)); + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03)) +} + +.el-popper .popper__arrow::after { + content: " "; + border-width: 6px +} + +.el-popper[x-placement^=top] { + margin-bottom: 12px +} + +.el-popper[x-placement^=top] .popper__arrow { + bottom: -6px; + left: 50%; + margin-right: 3px; + border-top-color: #EBEEF5; + border-bottom-width: 0 +} + +.el-popper[x-placement^=top] .popper__arrow::after { + bottom: 1px; + margin-left: -6px; + border-top-color: #FFF; + border-bottom-width: 0 +} + +.el-popper[x-placement^=bottom] { + margin-top: 12px +} + +.el-popper[x-placement^=bottom] .popper__arrow { + top: -6px; + left: 50%; + margin-right: 3px; + border-top-width: 0; + border-bottom-color: #EBEEF5 +} + +.el-popper[x-placement^=bottom] .popper__arrow::after { + top: 1px; + margin-left: -6px; + border-top-width: 0; + border-bottom-color: #FFF +} + +.el-popper[x-placement^=right] { + margin-left: 12px +} + +.el-popper[x-placement^=right] .popper__arrow { + top: 50%; + left: -6px; + margin-bottom: 3px; + border-right-color: #EBEEF5; + border-left-width: 0 +} + +.el-popper[x-placement^=right] .popper__arrow::after { + bottom: -6px; + left: 1px; + border-right-color: #FFF; + border-left-width: 0 +} + +.el-popper[x-placement^=left] { + margin-right: 12px +} + +.el-popper[x-placement^=left] .popper__arrow { + top: 50%; + right: -6px; + margin-bottom: 3px; + border-right-width: 0; + border-left-color: #EBEEF5 +} + +.el-popper[x-placement^=left] .popper__arrow::after { + right: 1px; + bottom: -6px; + margin-left: -6px; + border-right-width: 0; + border-left-color: #FFF +} + +.el-tag { + background-color: #ecf5ff; + border-color: #d9ecff; + height: 32px; + padding: 0 10px; + line-height: 30px; + font-size: 12px; + color: #409EFF; + border-width: 1px; + border-style: solid; + border-radius: 4px; + box-sizing: border-box; + white-space: nowrap +} + +.el-tag.is-hit { + border-color: #409EFF +} + +.el-tag .el-tag__close { + color: #409eff +} + +.el-tag .el-tag__close:hover { + color: #FFF; + background-color: #409eff +} + +.el-tag.el-tag--info { + background-color: #f4f4f5; + border-color: #e9e9eb; + color: #909399 +} + +.el-tag.el-tag--info.is-hit { + border-color: #909399 +} + +.el-tag.el-tag--info .el-tag__close { + color: #909399 +} + +.el-tag.el-tag--info .el-tag__close:hover { + color: #FFF; + background-color: #909399 +} + +.el-tag.el-tag--success { + background-color: #f0f9eb; + border-color: #e1f3d8; + color: #67c23a +} + +.el-tag.el-tag--success.is-hit { + border-color: #67C23A +} + +.el-tag.el-tag--success .el-tag__close { + color: #67c23a +} + +.el-tag.el-tag--success .el-tag__close:hover { + color: #FFF; + background-color: #67c23a +} + +.el-tag.el-tag--warning { + background-color: #fdf6ec; + border-color: #faecd8; + color: #e6a23c +} + +.el-tag.el-tag--warning.is-hit { + border-color: #E6A23C +} + +.el-tag.el-tag--warning .el-tag__close { + color: #e6a23c +} + +.el-tag.el-tag--warning .el-tag__close:hover { + color: #FFF; + background-color: #e6a23c +} + +.el-tag.el-tag--danger { + background-color: #fef0f0; + border-color: #fde2e2; + color: #f56c6c +} + +.el-tag.el-tag--danger.is-hit { + border-color: #F56C6C +} + +.el-tag.el-tag--danger .el-tag__close { + color: #f56c6c +} + +.el-tag.el-tag--danger .el-tag__close:hover { + color: #FFF; + background-color: #f56c6c +} + +.el-tag .el-icon-close { + border-radius: 50%; + text-align: center; + position: relative; + cursor: pointer; + font-size: 12px; + height: 16px; + width: 16px; + line-height: 16px; + vertical-align: middle; + top: -1px; + right: -5px +} + +.el-tag .el-icon-close::before { + display: block +} + +.el-tag--dark { + background-color: #409eff; + border-color: #409eff; + color: #fff +} + +.el-tag--dark.is-hit { + border-color: #409EFF +} + +.el-tag--dark .el-tag__close { + color: #fff +} + +.el-tag--dark .el-tag__close:hover { + color: #FFF; + background-color: #66b1ff +} + +.el-tag--dark.el-tag--info { + background-color: #909399; + border-color: #909399; + color: #fff +} + +.el-tag--dark.el-tag--info.is-hit { + border-color: #909399 +} + +.el-tag--dark.el-tag--info .el-tag__close { + color: #fff +} + +.el-tag--dark.el-tag--info .el-tag__close:hover { + color: #FFF; + background-color: #a6a9ad +} + +.el-tag--dark.el-tag--success { + background-color: #67c23a; + border-color: #67c23a; + color: #fff +} + +.el-tag--dark.el-tag--success.is-hit { + border-color: #67C23A +} + +.el-tag--dark.el-tag--success .el-tag__close { + color: #fff +} + +.el-tag--dark.el-tag--success .el-tag__close:hover { + color: #FFF; + background-color: #85ce61 +} + +.el-tag--dark.el-tag--warning { + background-color: #e6a23c; + border-color: #e6a23c; + color: #fff +} + +.el-tag--dark.el-tag--warning.is-hit { + border-color: #E6A23C +} + +.el-tag--dark.el-tag--warning .el-tag__close { + color: #fff +} + +.el-tag--dark.el-tag--warning .el-tag__close:hover { + color: #FFF; + background-color: #ebb563 +} + +.el-tag--dark.el-tag--danger { + background-color: #f56c6c; + border-color: #f56c6c; + color: #fff +} + +.el-tag--dark.el-tag--danger.is-hit { + border-color: #F56C6C +} + +.el-tag--dark.el-tag--danger .el-tag__close { + color: #fff +} + +.el-tag--dark.el-tag--danger .el-tag__close:hover { + color: #FFF; + background-color: #f78989 +} + +.el-tag--plain { + background-color: #fff; + border-color: #b3d8ff; + color: #409eff +} + +.el-tag--plain.is-hit { + border-color: #409EFF +} + +.el-tag--plain .el-tag__close { + color: #409eff +} + +.el-tag--plain .el-tag__close:hover { + color: #FFF; + background-color: #409eff +} + +.el-tag--plain.el-tag--info { + background-color: #fff; + border-color: #d3d4d6; + color: #909399 +} + +.el-tag--plain.el-tag--info.is-hit { + border-color: #909399 +} + +.el-tag--plain.el-tag--info .el-tag__close { + color: #909399 +} + +.el-tag--plain.el-tag--info .el-tag__close:hover { + color: #FFF; + background-color: #909399 +} + +.el-tag--plain.el-tag--success { + background-color: #fff; + border-color: #c2e7b0; + color: #67c23a +} + +.el-tag--plain.el-tag--success.is-hit { + border-color: #67C23A +} + +.el-tag--plain.el-tag--success .el-tag__close { + color: #67c23a +} + +.el-tag--plain.el-tag--success .el-tag__close:hover { + color: #FFF; + background-color: #67c23a +} + +.el-tag--plain.el-tag--warning { + background-color: #fff; + border-color: #f5dab1; + color: #e6a23c +} + +.el-tag--plain.el-tag--warning.is-hit { + border-color: #E6A23C +} + +.el-tag--plain.el-tag--warning .el-tag__close { + color: #e6a23c +} + +.el-tag--plain.el-tag--warning .el-tag__close:hover { + color: #FFF; + background-color: #e6a23c +} + +.el-tag--plain.el-tag--danger { + background-color: #fff; + border-color: #fbc4c4; + color: #f56c6c +} + +.el-tag--plain.el-tag--danger.is-hit { + border-color: #F56C6C +} + +.el-tag--plain.el-tag--danger .el-tag__close { + color: #f56c6c +} + +.el-tag--plain.el-tag--danger .el-tag__close:hover { + color: #FFF; + background-color: #f56c6c +} + +.el-tag--medium { + height: 28px; + line-height: 26px +} + +.el-tag--medium .el-icon-close { + -webkit-transform: scale(.8); + transform: scale(.8) +} + +.el-tag--small { + height: 24px; + padding: 0 8px; + line-height: 22px +} + +.el-tag--small .el-icon-close { + -webkit-transform: scale(.8); + transform: scale(.8) +} + +.el-tag--mini { + height: 20px; + padding: 0 5px; + line-height: 19px +} + +.el-tag--mini .el-icon-close { + margin-left: -3px; + -webkit-transform: scale(.7); + transform: scale(.7) +} + +.el-cascader { + position: relative; + font-size: 14px; + line-height: 40px +} + +.el-cascader:not(.is-disabled):hover .el-input__inner { + cursor: pointer; + border-color: #C0C4CC +} + +.el-cascader .el-input .el-input__inner:focus, +.el-cascader .el-input.is-focus .el-input__inner { + border-color: #409EFF +} + +.el-cascader .el-input { + cursor: pointer +} + +.el-cascader .el-input .el-input__inner { + text-overflow: ellipsis +} + +.el-cascader .el-input .el-icon-arrow-down { + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + font-size: 14px +} + +.el-cascader .el-input .el-icon-arrow-down.is-reverse { + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg) +} + +.el-cascader .el-input .el-icon-circle-close:hover { + color: #909399 +} + +.el-cascader--medium { + font-size: 14px; + line-height: 36px +} + +.el-cascader--small { + font-size: 13px; + line-height: 32px +} + +.el-cascader--mini { + font-size: 12px; + line-height: 28px +} + +.el-cascader.is-disabled .el-cascader__label { + z-index: 2; + color: #C0C4CC +} + +.el-cascader__dropdown { + margin: 5px 0; + font-size: 14px; + background: #FFF; + border: 1px solid #E4E7ED; + border-radius: 4px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) +} + +.el-cascader__tags { + position: absolute; + left: 0; + right: 30px; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + line-height: normal; + text-align: left; + box-sizing: border-box +} + +.el-cascader__tags .el-tag { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + max-width: 100%; + margin: 2px 0 2px 6px; + text-overflow: ellipsis; + background: #f0f2f5 +} + +.el-cascader__tags .el-tag:not(.is-hit) { + border-color: transparent +} + +.el-cascader__tags .el-tag>span { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + overflow: hidden; + text-overflow: ellipsis +} + +.el-cascader__tags .el-tag .el-icon-close { + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; + background-color: #C0C4CC; + color: #FFF +} + +.el-cascader__tags .el-tag .el-icon-close:hover { + background-color: #909399 +} + +.el-cascader__suggestion-panel { + border-radius: 4px +} + +.el-cascader__suggestion-list { + max-height: 204px; + margin: 0; + padding: 6px 0; + font-size: 14px; + color: #606266; + text-align: center +} + +.el-cascader__suggestion-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 34px; + padding: 0 15px; + text-align: left; + outline: 0; + cursor: pointer +} + +.el-cascader__suggestion-item:focus, +.el-cascader__suggestion-item:hover { + background: #F5F7FA +} + +.el-cascader__suggestion-item.is-checked { + color: #409EFF; + font-weight: 700 +} + +.el-cascader__suggestion-item>span { + margin-right: 10px +} + +.el-cascader__empty-text { + margin: 10px 0; + color: #C0C4CC +} + +.el-cascader__search-input { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + height: 24px; + min-width: 60px; + margin: 2px 0 2px 15px; + padding: 0; + color: #606266; + border: none; + outline: 0; + box-sizing: border-box +} + +.el-cascader__search-input::-webkit-input-placeholder { + color: #C0C4CC +} + +.el-cascader__search-input:-ms-input-placeholder { + color: #C0C4CC +} + +.el-cascader__search-input::-ms-input-placeholder { + color: #C0C4CC +} + +.el-cascader__search-input::placeholder { + color: #C0C4CC +} + +.el-color-predefine { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + font-size: 12px; + margin-top: 8px; + width: 280px +} + +.el-color-predefine__colors { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + -ms-flex-wrap: wrap; + flex-wrap: wrap +} + +.el-color-predefine__color-selector { + margin: 0 0 8px 8px; + width: 20px; + height: 20px; + border-radius: 4px; + cursor: pointer +} + +.el-color-predefine__color-selector:nth-child(10n+1) { + margin-left: 0 +} + +.el-color-predefine__color-selector.selected { + -webkit-box-shadow: 0 0 3px 2px #409EFF; + box-shadow: 0 0 3px 2px #409EFF +} + +.el-color-predefine__color-selector>div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 100%; + border-radius: 3px +} + +.el-color-predefine__color-selector.is-alpha { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) +} + +.el-color-hue-slider { + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 280px; + height: 12px; + background-color: red; + padding: 0 2px +} + +.el-color-hue-slider__bar { + position: relative; + background: -webkit-gradient(linear, left top, right top, from(red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red)); + background: linear-gradient(to right, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%); + height: 100% +} + +.el-color-hue-slider__thumb { + position: absolute; + cursor: pointer; + -webkit-box-sizing: border-box; + box-sizing: border-box; + left: 0; + top: 0; + width: 4px; + height: 100%; + border-radius: 1px; + background: #fff; + border: 1px solid #f0f0f0; + -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .6); + box-shadow: 0 0 2px rgba(0, 0, 0, .6); + z-index: 1 +} + +.el-color-hue-slider.is-vertical { + width: 12px; + height: 180px; + padding: 2px 0 +} + +.el-color-hue-slider.is-vertical .el-color-hue-slider__bar { + background: -webkit-gradient(linear, left top, left bottom, from(red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red)); + background: linear-gradient(to bottom, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%) +} + +.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb { + left: 0; + top: 0; + width: 100%; + height: 4px +} + +.el-color-svpanel { + position: relative; + width: 280px; + height: 180px +} + +.el-color-svpanel__black, +.el-color-svpanel__white { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0 +} + +.el-color-svpanel__white { + background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255, 255, 255, 0))); + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)) +} + +.el-color-svpanel__black { + background: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0, 0, 0, 0))); + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)) +} + +.el-color-svpanel__cursor { + position: absolute +} + +.el-color-svpanel__cursor>div { + cursor: head; + width: 4px; + height: 4px; + -webkit-box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4); + box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4); + border-radius: 50%; + -webkit-transform: translate(-2px, -2px); + transform: translate(-2px, -2px) +} + +.el-color-alpha-slider { + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 280px; + height: 12px; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) +} + +.el-color-alpha-slider__bar { + position: relative; + background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white)); + background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%); + height: 100% +} + +.el-color-alpha-slider__thumb { + position: absolute; + cursor: pointer; + -webkit-box-sizing: border-box; + box-sizing: border-box; + left: 0; + top: 0; + width: 4px; + height: 100%; + border-radius: 1px; + background: #fff; + border: 1px solid #f0f0f0; + -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .6); + box-shadow: 0 0 2px rgba(0, 0, 0, .6); + z-index: 1 +} + +.el-color-alpha-slider.is-vertical { + width: 20px; + height: 180px +} + +.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar { + background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white)); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%) +} + +.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb { + left: 0; + top: 0; + width: 100%; + height: 4px +} + +.el-color-dropdown { + width: 300px +} + +.el-color-dropdown__main-wrapper { + margin-bottom: 6px +} + +.el-color-dropdown__main-wrapper::after { + display: table; + clear: both +} + +.el-color-dropdown__btns { + margin-top: 6px; + text-align: right +} + +.el-color-dropdown__value { + float: left; + line-height: 26px; + font-size: 12px; + color: #000; + width: 160px +} + +.el-color-dropdown__btn { + border: 1px solid #dcdcdc; + color: #333; + line-height: 24px; + border-radius: 2px; + padding: 0 20px; + cursor: pointer; + background-color: transparent; + outline: 0; + font-size: 12px +} + +.el-color-dropdown__btn[disabled] { + color: #ccc; + cursor: not-allowed +} + +.el-color-dropdown__btn:hover { + color: #409EFF; + border-color: #409EFF +} + +.el-color-dropdown__link-btn { + cursor: pointer; + color: #409EFF; + text-decoration: none; + padding: 15px; + font-size: 12px +} + +.el-color-dropdown__link-btn:hover { + color: tint(#409EFF, 20%) +} + +.el-color-picker { + display: inline-block; + position: relative; + line-height: normal; + height: 40px +} + +.el-color-picker.is-disabled .el-color-picker__trigger { + cursor: not-allowed +} + +.el-color-picker--medium { + height: 36px +} + +.el-color-picker--medium .el-color-picker__trigger { + height: 36px; + width: 36px +} + +.el-color-picker--medium .el-color-picker__mask { + height: 34px; + width: 34px +} + +.el-color-picker--small { + height: 32px +} + +.el-color-picker--small .el-color-picker__trigger { + height: 32px; + width: 32px +} + +.el-color-picker--small .el-color-picker__mask { + height: 30px; + width: 30px +} + +.el-color-picker--small .el-color-picker__empty, +.el-color-picker--small .el-color-picker__icon { + -webkit-transform: translate3d(-50%, -50%, 0) scale(.8); + transform: translate3d(-50%, -50%, 0) scale(.8) +} + +.el-color-picker--mini { + height: 28px +} + +.el-color-picker--mini .el-color-picker__trigger { + height: 28px; + width: 28px +} + +.el-color-picker--mini .el-color-picker__mask { + height: 26px; + width: 26px +} + +.el-color-picker--mini .el-color-picker__empty, +.el-color-picker--mini .el-color-picker__icon { + -webkit-transform: translate3d(-50%, -50%, 0) scale(.8); + transform: translate3d(-50%, -50%, 0) scale(.8) +} + +.el-color-picker__mask { + height: 38px; + width: 38px; + border-radius: 4px; + position: absolute; + top: 1px; + left: 1px; + z-index: 1; + cursor: not-allowed; + background-color: rgba(255, 255, 255, .7) +} + +.el-color-picker__trigger { + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 40px; + width: 40px; + padding: 4px; + border: 1px solid #e6e6e6; + border-radius: 4px; + font-size: 0; + position: relative; + cursor: pointer +} + +.el-color-picker__color { + position: relative; + display: block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #999; + border-radius: 2px; + width: 100%; + height: 100%; + text-align: center +} + +.el-color-picker__icon, +.el-input, +.el-textarea { + display: inline-block; + width: 100% +} + +.el-color-picker__color.is-alpha { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) +} + +.el-color-picker__color-inner { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0 +} + +.el-color-picker__empty { + font-size: 12px; + color: #999; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate3d(-50%, -50%, 0); + transform: translate3d(-50%, -50%, 0) +} + +.el-color-picker__icon { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate3d(-50%, -50%, 0); + transform: translate3d(-50%, -50%, 0); + color: #FFF; + text-align: center; + font-size: 12px +} + +.el-input__prefix, +.el-input__suffix { + position: absolute; + top: 0; + text-align: center +} + +.el-color-picker__panel { + position: absolute; + z-index: 10; + padding: 6px; + -webkit-box-sizing: content-box; + box-sizing: content-box; + background-color: #FFF; + border: 1px solid #EBEEF5; + border-radius: 4px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) +} + +.el-input__inner, +.el-textarea__inner, +.el-transfer-panel { + -webkit-box-sizing: border-box +} + +.el-textarea { + position: relative; + vertical-align: bottom; + font-size: 14px +} + +.el-textarea__inner { + display: block; + resize: vertical; + padding: 5px 15px; + line-height: 1.5; + box-sizing: border-box; + width: 100%; + font-size: inherit; + color: #606266; + background-color: #FFF; + background-image: none; + border: 1px solid #DCDFE6; + border-radius: 4px; + -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1); + transition: border-color .2s cubic-bezier(.645, .045, .355, 1) +} + +.el-textarea__inner::-webkit-input-placeholder { + color: #C0C4CC +} + +.el-textarea__inner:-ms-input-placeholder { + color: #C0C4CC +} + +.el-textarea__inner::-ms-input-placeholder { + color: #C0C4CC +} + +.el-textarea__inner::placeholder { + color: #C0C4CC +} + +.el-textarea__inner:hover { + border-color: #C0C4CC +} + +.el-textarea__inner:focus { + outline: 0; + border-color: #409EFF +} + +.el-textarea .el-input__count { + color: #909399; + background: #FFF; + position: absolute; + font-size: 12px; + bottom: 5px; + right: 10px +} + +.el-textarea.is-disabled .el-textarea__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed +} + +.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder { + color: #C0C4CC +} + +.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder { + color: #C0C4CC +} + +.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder { + color: #C0C4CC +} + +.el-textarea.is-disabled .el-textarea__inner::placeholder { + color: #C0C4CC +} + +.el-textarea.is-exceed .el-textarea__inner { + border-color: #F56C6C +} + +.el-textarea.is-exceed .el-input__count { + color: #F56C6C +} + +.el-input { + position: relative; + font-size: 14px +} + +.el-input::-webkit-scrollbar { + z-index: 11; + width: 6px +} + +.el-input::-webkit-scrollbar:horizontal { + height: 6px +} + +.el-input::-webkit-scrollbar-thumb { + border-radius: 5px; + width: 6px; + background: #b4bccc +} + +.el-input::-webkit-scrollbar-corner { + background: #fff +} + +.el-input::-webkit-scrollbar-track { + background: #fff +} + +.el-input::-webkit-scrollbar-track-piece { + background: #fff; + width: 6px +} + +.el-input .el-input__clear { + color: #C0C4CC; + font-size: 14px; + cursor: pointer; + -webkit-transition: color .2s cubic-bezier(.645, .045, .355, 1); + transition: color .2s cubic-bezier(.645, .045, .355, 1) +} + +.el-input .el-input__clear:hover { + color: #909399 +} + +.el-input .el-input__count { + height: 100%; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #909399; + font-size: 12px +} + +.el-input-group__append .el-button, +.el-input-group__append .el-input, +.el-input-group__prepend .el-button, +.el-input-group__prepend .el-input, +.el-input__inner { + font-size: inherit +} + +.el-input .el-input__count .el-input__count-inner { + background: #FFF; + line-height: initial; + display: inline-block; + padding: 0 5px +} + +.el-input__inner { + -webkit-appearance: none; + background-color: #FFF; + background-image: none; + border-radius: 4px; + border: 1px solid #DCDFE6; + box-sizing: border-box; + color: #606266; + display: inline-block; + height: 40px; + line-height: 40px; + outline: 0; + padding: 0 15px; + -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1); + transition: border-color .2s cubic-bezier(.645, .045, .355, 1); + width: 100% +} + +.el-input__inner::-ms-reveal { + display: none +} + +.el-input__inner::-webkit-input-placeholder { + color: #C0C4CC +} + +.el-input__inner:-ms-input-placeholder { + color: #C0C4CC +} + +.el-input__inner::-ms-input-placeholder { + color: #C0C4CC +} + +.el-input__inner::placeholder { + color: #C0C4CC +} + +.el-input__inner:hover { + border-color: #C0C4CC +} + +.el-input.is-active .el-input__inner, +.el-input__inner:focus { + border-color: #409EFF; + outline: 0 +} + +.el-input__suffix { + height: 100%; + right: 5px; + transition: all .3s; + pointer-events: none +} + +.el-input__suffix-inner { + pointer-events: all +} + +.el-input__prefix { + height: 100%; + left: 5px; + transition: all .3s +} + +.el-input__icon { + height: 100%; + width: 25px; + text-align: center; + -webkit-transition: all .3s; + transition: all .3s; + line-height: 40px +} + +.el-input__icon:after { + content: ''; + height: 100%; + width: 0; + display: inline-block; + vertical-align: middle +} + +.el-input__validateIcon { + pointer-events: none +} + +.el-input.is-disabled .el-input__inner { + background-color: #F5F7FA; + border-color: #E4E7ED; + color: #C0C4CC; + cursor: not-allowed +} + +.el-input.is-disabled .el-input__inner::-webkit-input-placeholder { + color: #C0C4CC +} + +.el-input.is-disabled .el-input__inner:-ms-input-placeholder { + color: #C0C4CC +} + +.el-input.is-disabled .el-input__inner::-ms-input-placeholder { + color: #C0C4CC +} + +.el-input.is-disabled .el-input__inner::placeholder { + color: #C0C4CC +} + +.el-input.is-disabled .el-input__icon { + cursor: not-allowed +} + +.el-image-viewer__btn, +.el-image__preview, +.el-link, +.el-transfer-panel__filter .el-icon-circle-close { + cursor: pointer +} + +.el-input.is-exceed .el-input__inner { + border-color: #F56C6C +} + +.el-input.is-exceed .el-input__suffix .el-input__count { + color: #F56C6C +} + +.el-input--suffix .el-input__inner { + padding-right: 30px +} + +.el-input--prefix .el-input__inner { + padding-left: 30px +} + +.el-input--medium { + font-size: 14px +} + +.el-input--medium .el-input__inner { + height: 36px; + line-height: 36px +} + +.el-input--medium .el-input__icon { + line-height: 36px +} + +.el-input--small { + font-size: 13px +} + +.el-input--small .el-input__inner { + height: 32px; + line-height: 32px +} + +.el-input--small .el-input__icon { + line-height: 32px +} + +.el-input--mini { + font-size: 12px +} + +.el-input--mini .el-input__inner { + height: 28px; + line-height: 28px +} + +.el-input--mini .el-input__icon { + line-height: 28px +} + +.el-input-group { + line-height: normal; + display: inline-table; + width: 100%; + border-collapse: separate; + border-spacing: 0 +} + +.el-input-group>.el-input__inner { + vertical-align: middle; + display: table-cell +} + +.el-input-group__append, +.el-input-group__prepend { + background-color: #F5F7FA; + color: #909399; + vertical-align: middle; + display: table-cell; + position: relative; + border: 1px solid #DCDFE6; + border-radius: 4px; + padding: 0 20px; + width: 1px; + white-space: nowrap +} + +.el-input-group--append .el-input__inner, +.el-input-group__prepend { + border-top-right-radius: 0; + border-bottom-right-radius: 0 +} + +.el-input-group__append:focus, +.el-input-group__prepend:focus { + outline: 0 +} + +.el-input-group__append .el-button, +.el-input-group__append .el-select, +.el-input-group__prepend .el-button, +.el-input-group__prepend .el-select { + display: inline-block; + margin: -10px -20px +} + +.el-input-group__append button.el-button, +.el-input-group__append div.el-select .el-input__inner, +.el-input-group__append div.el-select:hover .el-input__inner, +.el-input-group__prepend button.el-button, +.el-input-group__prepend div.el-select .el-input__inner, +.el-input-group__prepend div.el-select:hover .el-input__inner { + border-color: transparent; + background-color: transparent; + color: inherit; + border-top: 0; + border-bottom: 0 +} + +.el-input-group__prepend { + border-right: 0 +} + +.el-input-group__append { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0 +} + +.el-input-group--append .el-select .el-input.is-focus .el-input__inner, +.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner { + border-color: transparent +} + +.el-input-group--prepend .el-input__inner { + border-top-left-radius: 0; + border-bottom-left-radius: 0 +} + +.el-input__inner::-ms-clear { + display: none; + width: 0; + height: 0 +} + +.el-transfer { + font-size: 14px +} + +.el-transfer__buttons { + display: inline-block; + vertical-align: middle; + padding: 0 30px +} + +.el-transfer__button { + display: block; + margin: 0 auto; + padding: 10px; + border-radius: 50%; + color: #FFF; + background-color: #409EFF; + font-size: 0 +} + +.el-button-group>.el-button+.el-button, +.el-transfer-panel__item+.el-transfer-panel__item, +.el-transfer__button [class*=el-icon-]+span { + margin-left: 0 +} + +.el-divider__text, +.el-image__error, +.el-link, +.el-timeline, +.el-transfer__button i, +.el-transfer__button span { + font-size: 14px +} + +.el-transfer__button.is-with-texts { + border-radius: 4px +} + +.el-transfer__button.is-disabled, +.el-transfer__button.is-disabled:hover { + border: 1px solid #DCDFE6; + background-color: #F5F7FA; + color: #C0C4CC +} + +.el-transfer__button:first-child { + margin-bottom: 10px +} + +.el-transfer__button:nth-child(2) { + margin: 0 +} + +.el-transfer-panel { + border: 1px solid #EBEEF5; + border-radius: 4px; + overflow: hidden; + background: #FFF; + display: inline-block; + vertical-align: middle; + width: 200px; + max-height: 100%; + box-sizing: border-box; + position: relative +} + +.el-transfer-panel__body { + height: 246px +} + +.el-transfer-panel__body.is-with-footer { + padding-bottom: 40px +} + +.el-transfer-panel__list { + margin: 0; + padding: 6px 0; + list-style: none; + height: 246px; + overflow: auto; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-transfer-panel__list.is-filterable { + height: 194px; + padding-top: 0 +} + +.el-transfer-panel__item { + height: 30px; + line-height: 30px; + padding-left: 15px; + display: block !important +} + +.el-transfer-panel__item.el-checkbox { + color: #606266 +} + +.el-transfer-panel__item:hover { + color: #409EFF +} + +.el-transfer-panel__item.el-checkbox .el-checkbox__label { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-left: 24px; + line-height: 30px +} + +.el-transfer-panel__item .el-checkbox__input { + position: absolute; + top: 8px +} + +.el-transfer-panel__filter { + text-align: center; + margin: 15px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: block; + width: auto +} + +.el-transfer-panel__filter .el-input__inner { + height: 32px; + width: 100%; + font-size: 12px; + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 16px; + padding-right: 10px; + padding-left: 30px +} + +.el-transfer-panel__filter .el-input__icon { + margin-left: 5px +} + +.el-transfer-panel .el-transfer-panel__header { + height: 40px; + line-height: 40px; + background: #F5F7FA; + margin: 0; + padding-left: 15px; + border-bottom: 1px solid #EBEEF5; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #000 +} + +.el-container, +.el-header { + -webkit-box-sizing: border-box +} + +.el-transfer-panel .el-transfer-panel__header .el-checkbox { + display: block; + line-height: 40px +} + +.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label { + font-size: 16px; + color: #303133; + font-weight: 400 +} + +.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span { + position: absolute; + right: 15px; + color: #909399; + font-size: 12px; + font-weight: 400 +} + +.el-transfer-panel .el-transfer-panel__footer { + height: 40px; + background: #FFF; + margin: 0; + padding: 0; + border-top: 1px solid #EBEEF5; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 1 +} + +.el-transfer-panel .el-transfer-panel__footer::after { + display: inline-block; + height: 100%; + vertical-align: middle +} + +.el-container, +.el-timeline-item__node { + display: -webkit-box; + display: -ms-flexbox +} + +.el-transfer-panel .el-transfer-panel__footer .el-checkbox { + padding-left: 20px; + color: #606266 +} + +.el-transfer-panel .el-transfer-panel__empty { + margin: 0; + height: 30px; + line-height: 30px; + padding: 6px 15px 0; + color: #909399; + text-align: center +} + +.el-transfer-panel .el-checkbox__label { + padding-left: 8px +} + +.el-transfer-panel .el-checkbox__inner { + height: 14px; + width: 14px; + border-radius: 3px +} + +.el-transfer-panel .el-checkbox__inner::after { + height: 6px; + width: 3px; + left: 4px +} + +.el-container { + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + -ms-flex-preferred-size: auto; + flex-basis: auto; + box-sizing: border-box; + min-width: 0 +} + +.el-container.is-vertical, +.el-drawer, +.el-empty, +.el-result { + -webkit-box-orient: vertical; + -webkit-box-direction: normal +} + +.el-container.is-vertical { + -ms-flex-direction: column; + flex-direction: column +} + +.el-header { + padding: 0 20px; + box-sizing: border-box; + -ms-flex-negative: 0; + flex-shrink: 0 +} + +.el-aside { + overflow: auto; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -ms-flex-negative: 0; + flex-shrink: 0 +} + +.el-main { + display: block; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + -ms-flex-preferred-size: auto; + flex-basis: auto; + overflow: auto; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.el-footer { + padding: 0 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -ms-flex-negative: 0; + flex-shrink: 0 +} + +.el-timeline { + margin: 0; + list-style: none +} + +.el-timeline .el-timeline-item:last-child .el-timeline-item__tail { + display: none +} + +.el-timeline-item { + position: relative; + padding-bottom: 20px +} + +.el-timeline-item__wrapper { + position: relative; + padding-left: 28px; + top: -3px +} + +.el-timeline-item__tail { + position: absolute; + left: 4px; + height: 100%; + border-left: 2px solid #E4E7ED +} + +.el-timeline-item__icon { + color: #FFF; + font-size: 13px +} + +.el-timeline-item__node { + position: absolute; + background-color: #E4E7ED; + border-radius: 50%; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.el-image__error, +.el-timeline-item__dot { + display: -webkit-box; + display: -ms-flexbox +} + +.el-timeline-item__node--normal { + left: -1px; + width: 12px; + height: 12px +} + +.el-timeline-item__node--large { + left: -2px; + width: 14px; + height: 14px +} + +.el-timeline-item__node--primary { + background-color: #409EFF +} + +.el-timeline-item__node--success { + background-color: #67C23A +} + +.el-timeline-item__node--warning { + background-color: #E6A23C +} + +.el-timeline-item__node--danger { + background-color: #F56C6C +} + +.el-timeline-item__node--info { + background-color: #909399 +} + +.el-timeline-item__dot { + position: absolute; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.el-timeline-item__content { + color: #303133 +} + +.el-timeline-item__timestamp { + color: #909399; + line-height: 1; + font-size: 13px +} + +.el-timeline-item__timestamp.is-top { + margin-bottom: 8px; + padding-top: 4px +} + +.el-timeline-item__timestamp.is-bottom { + margin-top: 8px +} + +.el-link { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + vertical-align: middle; + position: relative; + text-decoration: none; + outline: 0; + padding: 0; + font-weight: 500 +} + +.el-link.is-underline:hover:after { + position: absolute; + left: 0; + right: 0; + height: 0; + bottom: 0; + border-bottom: 1px solid #409EFF +} + +.el-link.el-link--default:after, +.el-link.el-link--primary.is-underline:hover:after, +.el-link.el-link--primary:after { + border-color: #409EFF +} + +.el-link.is-disabled { + cursor: not-allowed +} + +.el-link [class*=el-icon-]+span { + margin-left: 5px +} + +.el-link.el-link--default { + color: #606266 +} + +.el-link.el-link--default:hover { + color: #409EFF +} + +.el-link.el-link--default.is-disabled { + color: #C0C4CC +} + +.el-link.el-link--primary { + color: #409EFF +} + +.el-link.el-link--primary:hover { + color: #66b1ff +} + +.el-link.el-link--primary.is-disabled { + color: #a0cfff +} + +.el-link.el-link--danger.is-underline:hover:after, +.el-link.el-link--danger:after { + border-color: #F56C6C +} + +.el-link.el-link--danger { + color: #F56C6C +} + +.el-link.el-link--danger:hover { + color: #f78989 +} + +.el-link.el-link--danger.is-disabled { + color: #fab6b6 +} + +.el-link.el-link--success.is-underline:hover:after, +.el-link.el-link--success:after { + border-color: #67C23A +} + +.el-link.el-link--success { + color: #67C23A +} + +.el-link.el-link--success:hover { + color: #85ce61 +} + +.el-link.el-link--success.is-disabled { + color: #b3e19d +} + +.el-link.el-link--warning.is-underline:hover:after, +.el-link.el-link--warning:after { + border-color: #E6A23C +} + +.el-link.el-link--warning { + color: #E6A23C +} + +.el-link.el-link--warning:hover { + color: #ebb563 +} + +.el-link.el-link--warning.is-disabled { + color: #f3d19e +} + +.el-link.el-link--info.is-underline:hover:after, +.el-link.el-link--info:after { + border-color: #909399 +} + +.el-link.el-link--info { + color: #909399 +} + +.el-link.el-link--info:hover { + color: #a6a9ad +} + +.el-link.el-link--info.is-disabled { + color: #c8c9cc +} + +.el-divider { + background-color: #DCDFE6; + position: relative +} + +.el-divider--horizontal { + display: block; + height: 1px; + width: 100%; + margin: 24px 0 +} + +.el-divider--vertical { + display: inline-block; + width: 1px; + height: 1em; + margin: 0 8px; + vertical-align: middle; + position: relative +} + +.el-divider__text { + position: absolute; + background-color: #FFF; + padding: 0 20px; + font-weight: 500; + color: #303133 +} + +.el-image__error, +.el-image__placeholder { + background: #F5F7FA +} + +.el-divider__text.is-left { + left: 20px; + -webkit-transform: translateY(-50%); + transform: translateY(-50%) +} + +.el-divider__text.is-center { + left: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%) +} + +.el-divider__text.is-right { + right: 20px; + -webkit-transform: translateY(-50%); + transform: translateY(-50%) +} + +.el-image__error, +.el-image__inner, +.el-image__placeholder { + width: 100%; + height: 100% +} + +.el-image { + position: relative; + display: inline-block; + overflow: hidden +} + +.el-image__inner { + vertical-align: top +} + +.el-image__inner--center { + position: relative; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + display: block +} + +.el-image__error { + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #C0C4CC; + vertical-align: middle +} + +.el-image-viewer__wrapper { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0 +} + +.el-image-viewer__btn { + position: absolute; + z-index: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + border-radius: 50%; + opacity: .8; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-user-select: none; + user-select: none +} + +.el-button, +.el-checkbox, +.el-checkbox-button__inner, +.el-empty__image img, +.el-radio { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none +} + +.el-image-viewer__close { + top: 40px; + right: 40px; + width: 40px; + height: 40px; + font-size: 24px; + color: #fff; + background-color: #606266 +} + +.el-image-viewer__canvas { + width: 100%; + height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.el-image-viewer__actions { + left: 50%; + bottom: 30px; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + width: 282px; + height: 44px; + padding: 0 23px; + background-color: #606266; + border-color: #fff; + border-radius: 22px +} + +.el-image-viewer__actions__inner { + width: 100%; + height: 100%; + text-align: justify; + cursor: default; + font-size: 23px; + color: #fff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around +} + +.el-image-viewer__next, +.el-image-viewer__prev { + width: 44px; + height: 44px; + font-size: 24px; + color: #fff; + background-color: #606266; + border-color: #fff; + top: 50% +} + +.el-image-viewer__prev { + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + left: 40px +} + +.el-image-viewer__next { + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + right: 40px; + text-indent: 2px +} + +.el-image-viewer__mask { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + opacity: .5; + background: #000 +} + +.viewer-fade-enter-active { + -webkit-animation: viewer-fade-in .3s; + animation: viewer-fade-in .3s +} + +.viewer-fade-leave-active { + -webkit-animation: viewer-fade-out .3s; + animation: viewer-fade-out .3s +} + +@-webkit-keyframes viewer-fade-in { + 0% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } +} + +@keyframes viewer-fade-in { + 0% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } +} + +@-webkit-keyframes viewer-fade-out { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } + + 100% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } +} + +@keyframes viewer-fade-out { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } + + 100% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } +} + +.el-button { + display: inline-block; + line-height: 1; + white-space: nowrap; + cursor: pointer; + background: #FFF; + border: 1px solid #DCDFE6; + color: #606266; + -webkit-appearance: none; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: 0; + margin: 0; + -webkit-transition: .1s; + transition: .1s; + font-weight: 500; + padding: 12px 20px; + font-size: 14px; + border-radius: 4px +} + +.el-button+.el-button, +.el-checkbox.is-bordered+.el-checkbox.is-bordered { + margin-left: 10px +} + +.el-button:focus, +.el-button:hover { + color: #409EFF; + border-color: #c6e2ff; + background-color: #ecf5ff +} + +.el-button:active { + color: #3a8ee6; + border-color: #3a8ee6; + outline: 0 +} + +.el-button::-moz-focus-inner { + border: 0 +} + +.el-button [class*=el-icon-]+span { + margin-left: 5px +} + +.el-button.is-plain:focus, +.el-button.is-plain:hover { + background: #FFF; + border-color: #409EFF; + color: #409EFF +} + +.el-button.is-active, +.el-button.is-plain:active { + color: #3a8ee6; + border-color: #3a8ee6 +} + +.el-button.is-plain:active { + background: #FFF; + outline: 0 +} + +.el-button.is-disabled, +.el-button.is-disabled:focus, +.el-button.is-disabled:hover { + color: #C0C4CC; + cursor: not-allowed; + background-image: none; + background-color: #FFF; + border-color: #EBEEF5 +} + +.el-button.is-disabled.el-button--text { + background-color: transparent +} + +.el-button.is-disabled.is-plain, +.el-button.is-disabled.is-plain:focus, +.el-button.is-disabled.is-plain:hover { + background-color: #FFF; + border-color: #EBEEF5; + color: #C0C4CC +} + +.el-button.is-loading { + position: relative; + pointer-events: none +} + +.el-button.is-loading:before { + pointer-events: none; + content: ''; + position: absolute; + left: -1px; + top: -1px; + right: -1px; + bottom: -1px; + border-radius: inherit; + background-color: rgba(255, 255, 255, .35) +} + +.el-button.is-round { + border-radius: 20px; + padding: 12px 23px +} + +.el-button.is-circle { + border-radius: 50%; + padding: 12px +} + +.el-button--primary { + color: #FFF; + background-color: #409EFF; + border-color: #409EFF +} + +.el-button--primary:focus, +.el-button--primary:hover { + background: #66b1ff; + border-color: #66b1ff; + color: #FFF +} + +.el-button--primary.is-active, +.el-button--primary:active { + background: #3a8ee6; + border-color: #3a8ee6; + color: #FFF +} + +.el-button--primary:active { + outline: 0 +} + +.el-button--primary.is-disabled, +.el-button--primary.is-disabled:active, +.el-button--primary.is-disabled:focus, +.el-button--primary.is-disabled:hover { + color: #FFF; + background-color: #a0cfff; + border-color: #a0cfff +} + +.el-button--primary.is-plain { + color: #409EFF; + background: #ecf5ff; + border-color: #b3d8ff +} + +.el-button--primary.is-plain:focus, +.el-button--primary.is-plain:hover { + background: #409EFF; + border-color: #409EFF; + color: #FFF +} + +.el-button--primary.is-plain:active { + background: #3a8ee6; + border-color: #3a8ee6; + color: #FFF; + outline: 0 +} + +.el-button--primary.is-plain.is-disabled, +.el-button--primary.is-plain.is-disabled:active, +.el-button--primary.is-plain.is-disabled:focus, +.el-button--primary.is-plain.is-disabled:hover { + color: #8cc5ff; + background-color: #ecf5ff; + border-color: #d9ecff +} + +.el-button--success { + color: #FFF; + background-color: #67C23A; + border-color: #67C23A +} + +.el-button--success:focus, +.el-button--success:hover { + background: #85ce61; + border-color: #85ce61; + color: #FFF +} + +.el-button--success.is-active, +.el-button--success:active { + background: #5daf34; + border-color: #5daf34; + color: #FFF +} + +.el-button--success:active { + outline: 0 +} + +.el-button--success.is-disabled, +.el-button--success.is-disabled:active, +.el-button--success.is-disabled:focus, +.el-button--success.is-disabled:hover { + color: #FFF; + background-color: #b3e19d; + border-color: #b3e19d +} + +.el-button--success.is-plain { + color: #67C23A; + background: #f0f9eb; + border-color: #c2e7b0 +} + +.el-button--success.is-plain:focus, +.el-button--success.is-plain:hover { + background: #67C23A; + border-color: #67C23A; + color: #FFF +} + +.el-button--success.is-plain:active { + background: #5daf34; + border-color: #5daf34; + color: #FFF; + outline: 0 +} + +.el-button--success.is-plain.is-disabled, +.el-button--success.is-plain.is-disabled:active, +.el-button--success.is-plain.is-disabled:focus, +.el-button--success.is-plain.is-disabled:hover { + color: #a4da89; + background-color: #f0f9eb; + border-color: #e1f3d8 +} + +.el-button--warning { + color: #FFF; + background-color: #E6A23C; + border-color: #E6A23C +} + +.el-button--warning:focus, +.el-button--warning:hover { + background: #ebb563; + border-color: #ebb563; + color: #FFF +} + +.el-button--warning.is-active, +.el-button--warning:active { + background: #cf9236; + border-color: #cf9236; + color: #FFF +} + +.el-button--warning:active { + outline: 0 +} + +.el-button--warning.is-disabled, +.el-button--warning.is-disabled:active, +.el-button--warning.is-disabled:focus, +.el-button--warning.is-disabled:hover { + color: #FFF; + background-color: #f3d19e; + border-color: #f3d19e +} + +.el-button--warning.is-plain { + color: #E6A23C; + background: #fdf6ec; + border-color: #f5dab1 +} + +.el-button--warning.is-plain:focus, +.el-button--warning.is-plain:hover { + background: #E6A23C; + border-color: #E6A23C; + color: #FFF +} + +.el-button--warning.is-plain:active { + background: #cf9236; + border-color: #cf9236; + color: #FFF; + outline: 0 +} + +.el-button--warning.is-plain.is-disabled, +.el-button--warning.is-plain.is-disabled:active, +.el-button--warning.is-plain.is-disabled:focus, +.el-button--warning.is-plain.is-disabled:hover { + color: #f0c78a; + background-color: #fdf6ec; + border-color: #faecd8 +} + +.el-button--danger { + color: #FFF; + background-color: #F56C6C; + border-color: #F56C6C +} + +.el-button--danger:focus, +.el-button--danger:hover { + background: #f78989; + border-color: #f78989; + color: #FFF +} + +.el-button--danger.is-active, +.el-button--danger:active { + background: #dd6161; + border-color: #dd6161; + color: #FFF +} + +.el-button--danger:active { + outline: 0 +} + +.el-button--danger.is-disabled, +.el-button--danger.is-disabled:active, +.el-button--danger.is-disabled:focus, +.el-button--danger.is-disabled:hover { + color: #FFF; + background-color: #fab6b6; + border-color: #fab6b6 +} + +.el-button--danger.is-plain { + color: #F56C6C; + background: #fef0f0; + border-color: #fbc4c4 +} + +.el-button--danger.is-plain:focus, +.el-button--danger.is-plain:hover { + background: #F56C6C; + border-color: #F56C6C; + color: #FFF +} + +.el-button--danger.is-plain:active { + background: #dd6161; + border-color: #dd6161; + color: #FFF; + outline: 0 +} + +.el-button--danger.is-plain.is-disabled, +.el-button--danger.is-plain.is-disabled:active, +.el-button--danger.is-plain.is-disabled:focus, +.el-button--danger.is-plain.is-disabled:hover { + color: #f9a7a7; + background-color: #fef0f0; + border-color: #fde2e2 +} + +.el-button--info { + color: #FFF; + background-color: #909399; + border-color: #909399 +} + +.el-button--info:focus, +.el-button--info:hover { + background: #a6a9ad; + border-color: #a6a9ad; + color: #FFF +} + +.el-button--info.is-active, +.el-button--info:active { + background: #82848a; + border-color: #82848a; + color: #FFF +} + +.el-button--info:active { + outline: 0 +} + +.el-button--info.is-disabled, +.el-button--info.is-disabled:active, +.el-button--info.is-disabled:focus, +.el-button--info.is-disabled:hover { + color: #FFF; + background-color: #c8c9cc; + border-color: #c8c9cc +} + +.el-button--info.is-plain { + color: #909399; + background: #f4f4f5; + border-color: #d3d4d6 +} + +.el-button--info.is-plain:focus, +.el-button--info.is-plain:hover { + background: #909399; + border-color: #909399; + color: #FFF +} + +.el-button--info.is-plain:active { + background: #82848a; + border-color: #82848a; + color: #FFF; + outline: 0 +} + +.el-button--info.is-plain.is-disabled, +.el-button--info.is-plain.is-disabled:active, +.el-button--info.is-plain.is-disabled:focus, +.el-button--info.is-plain.is-disabled:hover { + color: #bcbec2; + background-color: #f4f4f5; + border-color: #e9e9eb +} + +.el-button--medium { + padding: 10px 20px; + font-size: 14px; + border-radius: 4px +} + +.el-button--medium.is-round { + padding: 10px 20px +} + +.el-button--medium.is-circle { + padding: 10px +} + +.el-button--small { + padding: 9px 15px; + font-size: 12px; + border-radius: 3px +} + +.el-button--small.is-round { + padding: 9px 15px +} + +.el-button--small.is-circle { + padding: 9px +} + +.el-button--mini, +.el-button--mini.is-round { + padding: 7px 15px +} + +.el-button--mini { + font-size: 12px; + border-radius: 3px +} + +.el-button--mini.is-circle { + padding: 7px +} + +.el-button--text { + border-color: transparent; + color: #409EFF; + background: 0 0; + padding-left: 0; + padding-right: 0 +} + +.el-button--text:focus, +.el-button--text:hover { + color: #66b1ff; + border-color: transparent; + background-color: transparent +} + +.el-button--text:active { + color: #3a8ee6; + border-color: transparent; + background-color: transparent +} + +.el-button--text.is-disabled, +.el-button--text.is-disabled:focus, +.el-button--text.is-disabled:hover { + border-color: transparent +} + +.el-button-group .el-button--danger:last-child, +.el-button-group .el-button--danger:not(:first-child):not(:last-child), +.el-button-group .el-button--info:last-child, +.el-button-group .el-button--info:not(:first-child):not(:last-child), +.el-button-group .el-button--primary:last-child, +.el-button-group .el-button--primary:not(:first-child):not(:last-child), +.el-button-group .el-button--success:last-child, +.el-button-group .el-button--success:not(:first-child):not(:last-child), +.el-button-group .el-button--warning:last-child, +.el-button-group .el-button--warning:not(:first-child):not(:last-child), +.el-button-group>.el-dropdown>.el-button { + border-left-color: rgba(255, 255, 255, .5) +} + +.el-button-group .el-button--danger:first-child, +.el-button-group .el-button--danger:not(:first-child):not(:last-child), +.el-button-group .el-button--info:first-child, +.el-button-group .el-button--info:not(:first-child):not(:last-child), +.el-button-group .el-button--primary:first-child, +.el-button-group .el-button--primary:not(:first-child):not(:last-child), +.el-button-group .el-button--success:first-child, +.el-button-group .el-button--success:not(:first-child):not(:last-child), +.el-button-group .el-button--warning:first-child, +.el-button-group .el-button--warning:not(:first-child):not(:last-child) { + border-right-color: rgba(255, 255, 255, .5) +} + +.el-button-group { + display: inline-block; + vertical-align: middle +} + +.el-button-group::after, +.el-button-group::before { + display: table +} + +.el-button-group::after { + clear: both +} + +.el-button-group>.el-button { + float: left; + position: relative +} + +.el-button-group>.el-button.is-disabled { + z-index: 1 +} + +.el-button-group>.el-button:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0 +} + +.el-button-group>.el-button:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0 +} + +.el-button-group>.el-button:first-child:last-child { + border-radius: 4px +} + +.el-button-group>.el-button:first-child:last-child.is-round { + border-radius: 20px +} + +.el-button-group>.el-button:first-child:last-child.is-circle { + border-radius: 50% +} + +.el-button-group>.el-button:not(:first-child):not(:last-child) { + border-radius: 0 +} + +.el-button-group>.el-button.is-active, +.el-button-group>.el-button:not(.is-disabled):active, +.el-button-group>.el-button:not(.is-disabled):focus, +.el-button-group>.el-button:not(.is-disabled):hover { + z-index: 1 +} + +.el-button-group>.el-dropdown>.el-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0 +} + +.el-calendar { + background-color: #fff +} + +.el-calendar__header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 12px 20px; + border-bottom: 1px solid #EBEEF5 +} + +.el-backtop, +.el-page-header { + display: -webkit-box; + display: -ms-flexbox +} + +.el-calendar__title { + color: #000; + -ms-flex-item-align: center; + align-self: center +} + +.el-calendar__body { + padding: 12px 20px 35px +} + +.el-calendar-table { + table-layout: fixed; + width: 100% +} + +.el-calendar-table thead th { + padding: 12px 0; + color: #606266; + font-weight: 400 +} + +.el-calendar-table:not(.is-range) td.next, +.el-calendar-table:not(.is-range) td.prev { + color: #C0C4CC +} + +.el-backtop, +.el-calendar-table td.is-today { + color: #409EFF +} + +.el-calendar-table td { + border-bottom: 1px solid #EBEEF5; + border-right: 1px solid #EBEEF5; + vertical-align: top; + -webkit-transition: background-color .2s ease; + transition: background-color .2s ease +} + +.el-calendar-table td.is-selected { + background-color: #F2F8FE +} + +.el-calendar-table tr:first-child td { + border-top: 1px solid #EBEEF5 +} + +.el-calendar-table tr td:first-child { + border-left: 1px solid #EBEEF5 +} + +.el-calendar-table tr.el-calendar-table__row--hide-border td { + border-top: none +} + +.el-calendar-table .el-calendar-day { + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 8px; + height: 85px +} + +.el-calendar-table .el-calendar-day:hover { + cursor: pointer; + background-color: #F2F8FE +} + +.el-backtop { + position: fixed; + background-color: #FFF; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 20px; + -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .12); + box-shadow: 0 0 6px rgba(0, 0, 0, .12); + cursor: pointer; + z-index: 5 +} + +.el-backtop:hover { + background-color: #F2F6FC +} + +.el-page-header { + display: flex; + line-height: 24px +} + +.el-page-header__left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + cursor: pointer; + margin-right: 40px; + position: relative +} + +.el-page-header__left::after { + position: absolute; + width: 1px; + height: 16px; + right: -20px; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + background-color: #DCDFE6 +} + +.el-checkbox, +.el-checkbox__input { + display: inline-block; + position: relative; + white-space: nowrap +} + +.el-page-header__left .el-icon-back { + font-size: 18px; + margin-right: 6px; + -ms-flex-item-align: center; + align-self: center +} + +.el-page-header__title { + font-size: 14px; + font-weight: 500 +} + +.el-page-header__content { + font-size: 18px; + color: #303133 +} + +.el-checkbox { + color: #606266; + font-weight: 500; + font-size: 14px; + cursor: pointer; + user-select: none; + margin-right: 30px +} + +.el-checkbox.is-bordered { + padding: 9px 20px 9px 10px; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + line-height: normal; + height: 40px +} + +.el-checkbox.is-bordered.is-checked { + border-color: #409EFF +} + +.el-checkbox.is-bordered.is-disabled { + border-color: #EBEEF5; + cursor: not-allowed +} + +.el-checkbox.is-bordered.el-checkbox--medium { + padding: 7px 20px 7px 10px; + border-radius: 4px; + height: 36px +} + +.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label { + line-height: 17px; + font-size: 14px +} + +.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner { + height: 14px; + width: 14px +} + +.el-checkbox.is-bordered.el-checkbox--small { + padding: 5px 15px 5px 10px; + border-radius: 3px; + height: 32px +} + +.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label { + line-height: 15px; + font-size: 12px +} + +.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner { + height: 12px; + width: 12px +} + +.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after { + height: 6px; + width: 2px +} + +.el-checkbox.is-bordered.el-checkbox--mini { + padding: 3px 15px 3px 10px; + border-radius: 3px; + height: 28px +} + +.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label { + line-height: 12px; + font-size: 12px +} + +.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner { + height: 12px; + width: 12px +} + +.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after { + height: 6px; + width: 2px +} + +.el-checkbox__input { + cursor: pointer; + outline: 0; + line-height: 1; + vertical-align: middle +} + +.el-checkbox__input.is-disabled .el-checkbox__inner { + background-color: #edf2fc; + border-color: #DCDFE6; + cursor: not-allowed +} + +.el-checkbox__input.is-disabled .el-checkbox__inner::after { + cursor: not-allowed; + border-color: #C0C4CC +} + +.el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label { + cursor: not-allowed +} + +.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner { + background-color: #F2F6FC; + border-color: #DCDFE6 +} + +.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after { + border-color: #C0C4CC +} + +.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner { + background-color: #F2F6FC; + border-color: #DCDFE6 +} + +.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before { + background-color: #C0C4CC; + border-color: #C0C4CC +} + +.el-checkbox__input.is-checked .el-checkbox__inner, +.el-checkbox__input.is-indeterminate .el-checkbox__inner { + background-color: #409EFF; + border-color: #409EFF +} + +.el-checkbox__input.is-disabled+span.el-checkbox__label { + color: #C0C4CC; + cursor: not-allowed +} + +.el-checkbox__input.is-checked .el-checkbox__inner::after { + -webkit-transform: rotate(45deg) scaleY(1); + transform: rotate(45deg) scaleY(1) +} + +.el-checkbox__input.is-checked+.el-checkbox__label { + color: #409EFF +} + +.el-checkbox__input.is-focus .el-checkbox__inner { + border-color: #409EFF +} + +.el-checkbox__input.is-indeterminate .el-checkbox__inner::before { + content: ''; + position: absolute; + display: block; + background-color: #FFF; + height: 2px; + -webkit-transform: scale(.5); + transform: scale(.5); + left: 0; + right: 0; + top: 5px +} + +.el-checkbox__input.is-indeterminate .el-checkbox__inner::after { + display: none +} + +.el-checkbox__inner { + display: inline-block; + position: relative; + border: 1px solid #DCDFE6; + border-radius: 2px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 14px; + height: 14px; + background-color: #FFF; + z-index: 1; + -webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46); + transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46) +} + +.el-checkbox__inner:hover { + border-color: #409EFF +} + +.el-checkbox__inner::after { + -webkit-box-sizing: content-box; + box-sizing: content-box; + content: ""; + border: 1px solid #FFF; + border-left: 0; + border-top: 0; + height: 7px; + left: 4px; + position: absolute; + top: 1px; + -webkit-transform: rotate(45deg) scaleY(0); + transform: rotate(45deg) scaleY(0); + width: 3px; + -webkit-transition: -webkit-transform .15s ease-in .05s; + transition: -webkit-transform .15s ease-in .05s; + transition: transform .15s ease-in .05s; + transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s; + -webkit-transform-origin: center; + transform-origin: center +} + +.el-checkbox__original { + opacity: 0; + outline: 0; + position: absolute; + margin: 0; + width: 0; + height: 0; + z-index: -1 +} + +.el-checkbox-button, +.el-checkbox-button__inner { + display: inline-block; + position: relative +} + +.el-checkbox__label { + display: inline-block; + padding-left: 10px; + line-height: 19px; + font-size: 14px +} + +.el-checkbox:last-of-type { + margin-right: 0 +} + +.el-checkbox-button__inner { + line-height: 1; + font-weight: 500; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + background: #FFF; + border: 1px solid #DCDFE6; + border-left: 0; + color: #606266; + -webkit-appearance: none; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: 0; + margin: 0; + -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); + transition: all .3s cubic-bezier(.645, .045, .355, 1); + padding: 12px 20px; + font-size: 14px; + border-radius: 0 +} + +.el-checkbox-button__inner.is-round { + padding: 12px 20px +} + +.el-checkbox-button__inner:hover { + color: #409EFF +} + +.el-checkbox-button__inner [class*=el-icon-] { + line-height: .9 +} + +.el-checkbox-button__inner [class*=el-icon-]+span { + margin-left: 5px +} + +.el-checkbox-button__original { + opacity: 0; + outline: 0; + position: absolute; + margin: 0; + z-index: -1 +} + +.el-radio, +.el-radio__inner, +.el-radio__input { + position: relative; + display: inline-block +} + +.el-checkbox-button.is-checked .el-checkbox-button__inner { + color: #FFF; + background-color: #409EFF; + border-color: #409EFF; + -webkit-box-shadow: -1px 0 0 0 #8cc5ff; + box-shadow: -1px 0 0 0 #8cc5ff +} + +.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner { + border-left-color: #409EFF +} + +.el-checkbox-button.is-disabled .el-checkbox-button__inner { + color: #C0C4CC; + cursor: not-allowed; + background-image: none; + background-color: #FFF; + border-color: #EBEEF5; + -webkit-box-shadow: none; + box-shadow: none +} + +.el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner { + border-left-color: #EBEEF5 +} + +.el-checkbox-button:first-child .el-checkbox-button__inner { + border-left: 1px solid #DCDFE6; + border-radius: 4px 0 0 4px; + -webkit-box-shadow: none !important; + box-shadow: none !important +} + +.el-checkbox-button.is-focus .el-checkbox-button__inner { + border-color: #409EFF +} + +.el-checkbox-button:last-child .el-checkbox-button__inner { + border-radius: 0 4px 4px 0 +} + +.el-checkbox-button--medium .el-checkbox-button__inner { + padding: 10px 20px; + font-size: 14px; + border-radius: 0 +} + +.el-checkbox-button--medium .el-checkbox-button__inner.is-round { + padding: 10px 20px +} + +.el-checkbox-button--small .el-checkbox-button__inner { + padding: 9px 15px; + font-size: 12px; + border-radius: 0 +} + +.el-checkbox-button--small .el-checkbox-button__inner.is-round { + padding: 9px 15px +} + +.el-checkbox-button--mini .el-checkbox-button__inner { + padding: 7px 15px; + font-size: 12px; + border-radius: 0 +} + +.el-checkbox-button--mini .el-checkbox-button__inner.is-round { + padding: 7px 15px +} + +.el-checkbox-group { + font-size: 0 +} + +.el-avatar, +.el-cascader-panel, +.el-radio, +.el-radio--medium.is-bordered .el-radio__label, +.el-radio__label { + font-size: 14px +} + +.el-radio { + color: #606266; + font-weight: 500; + line-height: 1; + cursor: pointer; + white-space: nowrap; + outline: 0; + margin-right: 30px +} + +.el-cascader-node>.el-radio, +.el-radio:last-child { + margin-right: 0 +} + +.el-radio.is-bordered { + padding: 12px 20px 0 10px; + border-radius: 4px; + border: 1px solid #DCDFE6; + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 40px +} + +.el-cascader-menu, +.el-cascader-menu__list, +.el-radio__inner { + -webkit-box-sizing: border-box +} + +.el-radio.is-bordered.is-checked { + border-color: #409EFF +} + +.el-radio.is-bordered.is-disabled { + cursor: not-allowed; + border-color: #EBEEF5 +} + +.el-radio__input.is-disabled .el-radio__inner, +.el-radio__input.is-disabled.is-checked .el-radio__inner { + background-color: #F5F7FA; + border-color: #E4E7ED +} + +.el-radio.is-bordered+.el-radio.is-bordered { + margin-left: 10px +} + +.el-radio--medium.is-bordered { + padding: 10px 20px 0 10px; + border-radius: 4px; + height: 36px +} + +.el-radio--mini.is-bordered .el-radio__label, +.el-radio--small.is-bordered .el-radio__label { + font-size: 12px +} + +.el-radio--medium.is-bordered .el-radio__inner { + height: 14px; + width: 14px +} + +.el-radio--small.is-bordered { + padding: 8px 15px 0 10px; + border-radius: 3px; + height: 32px +} + +.el-radio--small.is-bordered .el-radio__inner { + height: 12px; + width: 12px +} + +.el-radio--mini.is-bordered { + padding: 6px 15px 0 10px; + border-radius: 3px; + height: 28px +} + +.el-radio--mini.is-bordered .el-radio__inner { + height: 12px; + width: 12px +} + +.el-radio__input { + white-space: nowrap; + cursor: pointer; + outline: 0; + line-height: 1; + vertical-align: middle +} + +.el-radio__input.is-disabled .el-radio__inner { + cursor: not-allowed +} + +.el-radio__input.is-disabled .el-radio__inner::after { + cursor: not-allowed; + background-color: #F5F7FA +} + +.el-radio__input.is-disabled .el-radio__inner+.el-radio__label { + cursor: not-allowed +} + +.el-radio__input.is-disabled.is-checked .el-radio__inner::after { + background-color: #C0C4CC +} + +.el-radio__input.is-disabled+span.el-radio__label { + color: #C0C4CC; + cursor: not-allowed +} + +.el-radio__input.is-checked .el-radio__inner { + border-color: #409EFF; + background: #409EFF +} + +.el-radio__input.is-checked .el-radio__inner::after { + -webkit-transform: translate(-50%, -50%) scale(1); + transform: translate(-50%, -50%) scale(1) +} + +.el-radio__input.is-checked+.el-radio__label { + color: #409EFF +} + +.el-radio__input.is-focus .el-radio__inner { + border-color: #409EFF +} + +.el-radio__inner { + border: 1px solid #DCDFE6; + border-radius: 100%; + width: 14px; + height: 14px; + background-color: #FFF; + cursor: pointer; + box-sizing: border-box +} + +.el-radio__inner:hover { + border-color: #409EFF +} + +.el-radio__inner::after { + width: 4px; + height: 4px; + border-radius: 100%; + background-color: #FFF; + content: ""; + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform .15s ease-in; + transition: -webkit-transform .15s ease-in; + transition: transform .15s ease-in; + transition: transform .15s ease-in, -webkit-transform .15s ease-in +} + +.el-radio__original { + opacity: 0; + outline: 0; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: 0 +} + +.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner { + -webkit-box-shadow: 0 0 2px 2px #409EFF; + box-shadow: 0 0 2px 2px #409EFF +} + +.el-radio__label { + padding-left: 10px +} + +.el-scrollbar { + overflow: hidden; + position: relative +} + +.el-scrollbar:active>.el-scrollbar__bar, +.el-scrollbar:focus>.el-scrollbar__bar, +.el-scrollbar:hover>.el-scrollbar__bar { + opacity: 1; + -webkit-transition: opacity 340ms ease-out; + transition: opacity 340ms ease-out +} + +.el-scrollbar__wrap { + overflow: scroll; + height: 100% +} + +.el-scrollbar__wrap--hidden-default { + scrollbar-width: none +} + +.el-scrollbar__wrap--hidden-default::-webkit-scrollbar { + width: 0; + height: 0 +} + +.el-scrollbar__thumb { + position: relative; + display: block; + width: 0; + height: 0; + cursor: pointer; + border-radius: inherit; + background-color: rgba(144, 147, 153, .3); + -webkit-transition: .3s background-color; + transition: .3s background-color +} + +.el-scrollbar__thumb:hover { + background-color: rgba(144, 147, 153, .5) +} + +.el-scrollbar__bar { + position: absolute; + right: 2px; + bottom: 2px; + z-index: 1; + border-radius: 4px; + opacity: 0; + -webkit-transition: opacity 120ms ease-out; + transition: opacity 120ms ease-out +} + +.el-scrollbar__bar.is-vertical { + width: 6px; + top: 2px +} + +.el-scrollbar__bar.is-vertical>div { + width: 100% +} + +.el-scrollbar__bar.is-horizontal { + height: 6px; + left: 2px +} + +.el-scrollbar__bar.is-horizontal>div { + height: 100% +} + +.el-cascader-panel { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + border-radius: 4px +} + +.el-cascader-panel.is-bordered { + border: 1px solid #E4E7ED; + border-radius: 4px +} + +.el-cascader-menu { + min-width: 180px; + box-sizing: border-box; + color: #606266; + border-right: solid 1px #E4E7ED +} + +.el-cascader-menu:last-child { + border-right: none +} + +.el-cascader-menu__wrap { + height: 204px +} + +.el-cascader-menu__list { + position: relative; + min-height: 100%; + margin: 0; + padding: 6px 0; + list-style: none; + box-sizing: border-box +} + +.el-cascader-menu__hover-zone { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none +} + +.el-cascader-menu__empty-text { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; + color: #C0C4CC +} + +.el-cascader-node { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 30px 0 20px; + height: 34px; + line-height: 34px; + outline: 0 +} + +.el-cascader-node.is-selectable.in-active-path { + color: #606266 +} + +.el-cascader-node.in-active-path, +.el-cascader-node.is-active, +.el-cascader-node.is-selectable.in-checked-path { + color: #409EFF; + font-weight: 700 +} + +.el-cascader-node:not(.is-disabled) { + cursor: pointer +} + +.el-cascader-node:not(.is-disabled):focus, +.el-cascader-node:not(.is-disabled):hover { + background: #F5F7FA +} + +.el-cascader-node.is-disabled { + color: #C0C4CC; + cursor: not-allowed +} + +.el-cascader-node__prefix { + position: absolute; + left: 10px +} + +.el-cascader-node__postfix { + position: absolute; + right: 10px +} + +.el-cascader-node__label { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + padding: 0 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis +} + +.el-cascader-node>.el-radio .el-radio__label { + padding-left: 0 +} + +.el-avatar { + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + text-align: center; + overflow: hidden; + color: #fff; + background: #C0C4CC; + width: 40px; + height: 40px; + line-height: 40px +} + +.el-drawer, +.el-drawer__body>* { + -webkit-box-sizing: border-box +} + +.el-avatar>img { + display: block; + height: 100%; + vertical-align: middle +} + +.el-empty__image img, +.el-empty__image svg { + vertical-align: top; + height: 100%; + width: 100% +} + +.el-avatar--circle { + border-radius: 50% +} + +.el-avatar--square { + border-radius: 4px +} + +.el-avatar--icon { + font-size: 18px +} + +.el-avatar--large { + width: 40px; + height: 40px; + line-height: 40px +} + +.el-avatar--medium { + width: 36px; + height: 36px; + line-height: 36px +} + +.el-avatar--small { + width: 28px; + height: 28px; + line-height: 28px +} + +@-webkit-keyframes el-drawer-fade-in { + 0% { + opacity: 0 + } + + 100% { + opacity: 1 + } +} + +@keyframes el-drawer-fade-in { + 0% { + opacity: 0 + } + + 100% { + opacity: 1 + } +} + +@-webkit-keyframes rtl-drawer-in { + 0% { + -webkit-transform: translate(100%, 0); + transform: translate(100%, 0) + } + + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } +} + +@keyframes rtl-drawer-in { + 0% { + -webkit-transform: translate(100%, 0); + transform: translate(100%, 0) + } + + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } +} + +@-webkit-keyframes rtl-drawer-out { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } + + 100% { + -webkit-transform: translate(100%, 0); + transform: translate(100%, 0) + } +} + +@keyframes rtl-drawer-out { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } + + 100% { + -webkit-transform: translate(100%, 0); + transform: translate(100%, 0) + } +} + +@-webkit-keyframes ltr-drawer-in { + 0% { + -webkit-transform: translate(-100%, 0); + transform: translate(-100%, 0) + } + + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } +} + +@keyframes ltr-drawer-in { + 0% { + -webkit-transform: translate(-100%, 0); + transform: translate(-100%, 0) + } + + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } +} + +@-webkit-keyframes ltr-drawer-out { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } + + 100% { + -webkit-transform: translate(-100%, 0); + transform: translate(-100%, 0) + } +} + +@keyframes ltr-drawer-out { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } + + 100% { + -webkit-transform: translate(-100%, 0); + transform: translate(-100%, 0) + } +} + +@-webkit-keyframes ttb-drawer-in { + 0% { + -webkit-transform: translate(0, -100%); + transform: translate(0, -100%) + } + + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } +} + +@keyframes ttb-drawer-in { + 0% { + -webkit-transform: translate(0, -100%); + transform: translate(0, -100%) + } + + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } +} + +@-webkit-keyframes ttb-drawer-out { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } + + 100% { + -webkit-transform: translate(0, -100%); + transform: translate(0, -100%) + } +} + +@keyframes ttb-drawer-out { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } + + 100% { + -webkit-transform: translate(0, -100%); + transform: translate(0, -100%) + } +} + +@-webkit-keyframes btt-drawer-in { + 0% { + -webkit-transform: translate(0, 100%); + transform: translate(0, 100%) + } + + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } +} + +@keyframes btt-drawer-in { + 0% { + -webkit-transform: translate(0, 100%); + transform: translate(0, 100%) + } + + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } +} + +@-webkit-keyframes btt-drawer-out { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } + + 100% { + -webkit-transform: translate(0, 100%); + transform: translate(0, 100%) + } +} + +@keyframes btt-drawer-out { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } + + 100% { + -webkit-transform: translate(0, 100%); + transform: translate(0, 100%) + } +} + +.el-drawer { + position: absolute; + box-sizing: border-box; + background-color: #FFF; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12); + box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12); + overflow: hidden; + outline: 0 +} + +.el-drawer.rtl { + -webkit-animation: rtl-drawer-out .3s; + animation: rtl-drawer-out .3s; + right: 0 +} + +.el-drawer__open .el-drawer.rtl { + -webkit-animation: rtl-drawer-in .3s 1ms; + animation: rtl-drawer-in .3s 1ms +} + +.el-drawer.ltr { + -webkit-animation: ltr-drawer-out .3s; + animation: ltr-drawer-out .3s; + left: 0 +} + +.el-drawer__open .el-drawer.ltr { + -webkit-animation: ltr-drawer-in .3s 1ms; + animation: ltr-drawer-in .3s 1ms +} + +.el-drawer.ttb { + -webkit-animation: ttb-drawer-out .3s; + animation: ttb-drawer-out .3s; + top: 0 +} + +.el-drawer__open .el-drawer.ttb { + -webkit-animation: ttb-drawer-in .3s 1ms; + animation: ttb-drawer-in .3s 1ms +} + +.el-drawer.btt { + -webkit-animation: btt-drawer-out .3s; + animation: btt-drawer-out .3s; + bottom: 0 +} + +.el-drawer__open .el-drawer.btt { + -webkit-animation: btt-drawer-in .3s 1ms; + animation: btt-drawer-in .3s 1ms +} + +.el-drawer__wrapper { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + margin: 0 +} + +.el-drawer__header { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #72767b; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-bottom: 32px; + padding: 20px 20px 0 +} + +.el-drawer__header>:first-child { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1 +} + +.el-drawer__title { + margin: 0; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + line-height: inherit; + font-size: 1rem +} + +.el-drawer__close-btn { + border: none; + cursor: pointer; + font-size: 20px; + color: inherit; + background-color: transparent +} + +.el-drawer__body { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + overflow: auto +} + +.el-drawer__body>* { + box-sizing: border-box +} + +.el-drawer.ltr, +.el-drawer.rtl { + height: 100%; + top: 0; + bottom: 0 +} + +.el-drawer.btt, +.el-drawer.ttb { + width: 100%; + left: 0; + right: 0 +} + +.el-drawer__container { + position: relative; + left: 0; + right: 0; + top: 0; + bottom: 0; + height: 100%; + width: 100% +} + +.el-drawer-fade-enter-active { + -webkit-animation: el-drawer-fade-in .3s; + animation: el-drawer-fade-in .3s +} + +.el-drawer-fade-leave-active { + animation: el-drawer-fade-in .3s reverse +} + +.el-statistic { + width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + color: #000; + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5715; + list-style: none; + -webkit-font-feature-settings: "tnum"; + font-feature-settings: "tnum"; + text-align: center +} + +.el-statistic .head { + margin-bottom: 4px; + color: #00073; + font-size: 14px +} + +.el-statistic .con { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.el-statistic .con .number { + font-size: 20px; + padding: 0 4px +} + +.el-statistic .con span { + display: inline-block; + margin: 0; + line-height: 100% +} + +.el-popconfirm__main, +.el-skeleton__image { + display: -ms-flexbox; + -webkit-box-align: center; + display: -webkit-box +} + +.el-popconfirm__main { + display: flex; + -ms-flex-align: center; + align-items: center +} + +.el-popconfirm__icon { + margin-right: 5px +} + +.el-popconfirm__action { + text-align: right; + margin: 0 +} + +@-webkit-keyframes el-skeleton-loading { + 0% { + background-position: 100% 50% + } + + 100% { + background-position: 0 50% + } +} + +@keyframes el-skeleton-loading { + 0% { + background-position: 100% 50% + } + + 100% { + background-position: 0 50% + } +} + +.el-skeleton { + width: 100% +} + +.el-skeleton__first-line, +.el-skeleton__paragraph { + height: 16px; + margin-top: 16px; + background: #f2f2f2 +} + +.el-skeleton.is-animated .el-skeleton__item { + background: -webkit-gradient(linear, left top, right top, color-stop(25%, #f2f2f2), color-stop(37%, #e6e6e6), color-stop(63%, #f2f2f2)); + background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + background-size: 400% 100%; + -webkit-animation: el-skeleton-loading 1.4s ease infinite; + animation: el-skeleton-loading 1.4s ease infinite +} + +.el-skeleton__item { + background: #f2f2f2; + display: inline-block; + height: 16px; + border-radius: 4px; + width: 100% +} + +.el-skeleton__circle { + border-radius: 50%; + width: 36px; + height: 36px; + line-height: 36px +} + +.el-skeleton__circle--lg { + width: 40px; + height: 40px; + line-height: 40px +} + +.el-skeleton__circle--md { + width: 28px; + height: 28px; + line-height: 28px +} + +.el-skeleton__button { + height: 40px; + width: 64px; + border-radius: 4px +} + +.el-skeleton__p { + width: 100% +} + +.el-skeleton__p.is-last { + width: 61% +} + +.el-skeleton__p.is-first { + width: 33% +} + +.el-skeleton__text { + width: 100%; + height: 13px +} + +.el-skeleton__caption { + height: 12px +} + +.el-skeleton__h1 { + height: 20px +} + +.el-skeleton__h3 { + height: 18px +} + +.el-skeleton__h5 { + height: 16px +} + +.el-skeleton__image { + width: unset; + display: flex; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + border-radius: 0 +} + +.el-skeleton__image svg { + fill: #DCDDE0; + width: 22%; + height: 22% +} + +.el-empty { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 40px 0 +} + +.el-empty__image { + width: 160px +} + +.el-empty__image img { + user-select: none; + -o-object-fit: contain; + object-fit: contain +} + +.el-empty__image svg { + fill: #DCDDE0 +} + +.el-empty__description { + margin-top: 20px +} + +.el-empty__description p { + margin: 0; + font-size: 14px; + color: #909399 +} + +.el-empty__bottom, +.el-result__title { + margin-top: 20px +} + +.el-descriptions { + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 14px; + color: #303133 +} + +.el-descriptions__header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-bottom: 20px +} + +.el-descriptions__title { + font-size: 16px; + font-weight: 700 +} + +.el-descriptions--mini, +.el-descriptions--small { + font-size: 12px +} + +.el-descriptions__body { + color: #606266; + background-color: #FFF +} + +.el-descriptions__body .el-descriptions__table { + border-collapse: collapse; + width: 100%; + table-layout: fixed +} + +.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell { + -webkit-box-sizing: border-box; + box-sizing: border-box; + text-align: left; + font-weight: 400; + line-height: 1.5 +} + +.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-left { + text-align: left +} + +.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-center { + text-align: center +} + +.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-right { + text-align: right +} + +.el-descriptions .is-bordered { + table-layout: auto +} + +.el-descriptions .is-bordered .el-descriptions-item__cell { + border: 1px solid #EBEEF5; + padding: 12px 10px +} + +.el-descriptions :not(.is-bordered) .el-descriptions-item__cell { + padding-bottom: 12px +} + +.el-descriptions--medium.is-bordered .el-descriptions-item__cell { + padding: 10px +} + +.el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell { + padding-bottom: 10px +} + +.el-descriptions--small.is-bordered .el-descriptions-item__cell { + padding: 8px 10px +} + +.el-descriptions--small:not(.is-bordered) .el-descriptions-item__cell { + padding-bottom: 8px +} + +.el-descriptions--mini.is-bordered .el-descriptions-item__cell { + padding: 6px 10px +} + +.el-descriptions--mini:not(.is-bordered) .el-descriptions-item__cell { + padding-bottom: 6px +} + +.el-descriptions-item { + vertical-align: top +} + +.el-descriptions-item__container { + display: -webkit-box; + display: -ms-flexbox; + display: flex +} + +.el-descriptions-item__container .el-descriptions-item__content, +.el-descriptions-item__container .el-descriptions-item__label { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline +} + +.el-descriptions-item__container .el-descriptions-item__content { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1 +} + +.el-descriptions-item__label.has-colon::after { + content: ':'; + position: relative; + top: -.5px +} + +.el-descriptions-item__label.is-bordered-label { + font-weight: 700; + color: #909399; + background: #fafafa +} + +.el-descriptions-item__label:not(.is-bordered-label) { + margin-right: 10px +} + +.el-descriptions-item__content { + word-break: break-word; + overflow-wrap: break-word +} + +.el-result { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 40px 30px +} + +.el-result__icon svg { + width: 64px; + height: 64px +} + +.el-result__title p { + margin: 0; + font-size: 20px; + color: #303133; + line-height: 1.3 +} + +.el-result__subtitle { + margin-top: 10px +} + +.el-result__subtitle p { + margin: 0; + font-size: 14px; + color: #606266; + line-height: 1.3 +} + +.el-result__extra { + margin-top: 30px +} + +.el-result .icon-success { + fill: #67C23A +} + +.el-result .icon-error { + fill: #F56C6C +} + +.el-result .icon-info { + fill: #909399 +} + +.el-result .icon-warning { + fill: #E6A23C +} \ No newline at end of file diff --git a/public/element-plus.js b/public/element-plus.js new file mode 100644 index 0000000..ced3237 --- /dev/null +++ b/public/element-plus.js @@ -0,0 +1,56327 @@ +/*! Element Plus v2.3.1 */ + +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) : + typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ElementPlus = {}, global.Vue)); + })(this, (function (exports, vue) { 'use strict'; + + const FOCUSABLE_ELEMENT_SELECTORS = `a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])`; + const isVisible = (element) => { + const computed = getComputedStyle(element); + return computed.position === "fixed" ? false : element.offsetParent !== null; + }; + const obtainAllFocusableElements$1 = (element) => { + return Array.from(element.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS)).filter((item) => isFocusable(item) && isVisible(item)); + }; + const isFocusable = (element) => { + if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute("tabIndex") !== null) { + return true; + } + if (element.disabled) { + return false; + } + switch (element.nodeName) { + case "A": { + return !!element.href && element.rel !== "ignore"; + } + case "INPUT": { + return !(element.type === "hidden" || element.type === "file"); + } + case "BUTTON": + case "SELECT": + case "TEXTAREA": { + return true; + } + default: { + return false; + } + } + }; + const triggerEvent = function(elm, name, ...opts) { + let eventName; + if (name.includes("mouse") || name.includes("click")) { + eventName = "MouseEvents"; + } else if (name.includes("key")) { + eventName = "KeyboardEvent"; + } else { + eventName = "HTMLEvents"; + } + const evt = document.createEvent(eventName); + evt.initEvent(name, ...opts); + elm.dispatchEvent(evt); + return elm; + }; + const isLeaf = (el) => !el.getAttribute("aria-owns"); + const getSibling = (el, distance, elClass) => { + const { parentNode } = el; + if (!parentNode) + return null; + const siblings = parentNode.querySelectorAll(elClass); + const index = Array.prototype.indexOf.call(siblings, el); + return siblings[index + distance] || null; + }; + const focusNode = (el) => { + if (!el) + return; + el.focus(); + !isLeaf(el) && el.click(); + }; + + const composeEventHandlers = (theirsHandler, oursHandler, { checkForDefaultPrevented = true } = {}) => { + const handleEvent = (event) => { + const shouldPrevent = theirsHandler == null ? void 0 : theirsHandler(event); + if (checkForDefaultPrevented === false || !shouldPrevent) { + return oursHandler == null ? void 0 : oursHandler(event); + } + }; + return handleEvent; + }; + const whenMouse = (handler) => { + return (e) => e.pointerType === "mouse" ? handler(e) : void 0; + }; + + var __defProp$9 = Object.defineProperty; + var __defProps$6 = Object.defineProperties; + var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors; + var __getOwnPropSymbols$b = Object.getOwnPropertySymbols; + var __hasOwnProp$b = Object.prototype.hasOwnProperty; + var __propIsEnum$b = Object.prototype.propertyIsEnumerable; + var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; + var __spreadValues$9 = (a, b) => { + for (var prop in b || (b = {})) + if (__hasOwnProp$b.call(b, prop)) + __defNormalProp$9(a, prop, b[prop]); + if (__getOwnPropSymbols$b) + for (var prop of __getOwnPropSymbols$b(b)) { + if (__propIsEnum$b.call(b, prop)) + __defNormalProp$9(a, prop, b[prop]); + } + return a; + }; + var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b)); + function computedEager(fn, options) { + var _a; + const result = vue.shallowRef(); + vue.watchEffect(() => { + result.value = fn(); + }, __spreadProps$6(__spreadValues$9({}, options), { + flush: (_a = options == null ? void 0 : options.flush) != null ? _a : "sync" + })); + return vue.readonly(result); + } + + var _a; + const isClient = typeof window !== "undefined"; + const isDef = (val) => typeof val !== "undefined"; + const isBoolean$1 = (val) => typeof val === "boolean"; + const isNumber$1 = (val) => typeof val === "number"; + const isString$2 = (val) => typeof val === "string"; + const noop$1 = () => { + }; + const isIOS = isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent); + + function resolveUnref(r) { + return typeof r === "function" ? r() : vue.unref(r); + } + + function createFilterWrapper(filter, fn) { + function wrapper(...args) { + filter(() => fn.apply(this, args), { fn, thisArg: this, args }); + } + return wrapper; + } + function debounceFilter(ms, options = {}) { + let timer; + let maxTimer; + const filter = (invoke) => { + const duration = resolveUnref(ms); + const maxDuration = resolveUnref(options.maxWait); + if (timer) + clearTimeout(timer); + if (duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) { + if (maxTimer) { + clearTimeout(maxTimer); + maxTimer = null; + } + return invoke(); + } + if (maxDuration && !maxTimer) { + maxTimer = setTimeout(() => { + if (timer) + clearTimeout(timer); + maxTimer = null; + invoke(); + }, maxDuration); + } + timer = setTimeout(() => { + if (maxTimer) + clearTimeout(maxTimer); + maxTimer = null; + invoke(); + }, duration); + }; + return filter; + } + function throttleFilter(ms, trailing = true, leading = true) { + let lastExec = 0; + let timer; + let isLeading = true; + const clear = () => { + if (timer) { + clearTimeout(timer); + timer = void 0; + } + }; + const filter = (invoke) => { + const duration = resolveUnref(ms); + const elapsed = Date.now() - lastExec; + clear(); + if (duration <= 0) { + lastExec = Date.now(); + return invoke(); + } + if (elapsed > duration && (leading || !isLeading)) { + lastExec = Date.now(); + invoke(); + } else if (trailing) { + timer = setTimeout(() => { + lastExec = Date.now(); + isLeading = true; + clear(); + invoke(); + }, duration); + } + if (!leading && !timer) + timer = setTimeout(() => isLeading = true, duration); + isLeading = false; + }; + return filter; + } + function identity$1(arg) { + return arg; + } + + function tryOnScopeDispose(fn) { + if (vue.getCurrentScope()) { + vue.onScopeDispose(fn); + return true; + } + return false; + } + + function useDebounceFn(fn, ms = 200, options = {}) { + return createFilterWrapper(debounceFilter(ms, options), fn); + } + + function refDebounced(value, ms = 200, options = {}) { + if (ms <= 0) + return value; + const debounced = vue.ref(value.value); + const updater = useDebounceFn(() => { + debounced.value = value.value; + }, ms, options); + vue.watch(value, () => updater()); + return debounced; + } + + function useThrottleFn(fn, ms = 200, trailing = false, leading = true) { + return createFilterWrapper(throttleFilter(ms, trailing, leading), fn); + } + + function tryOnMounted(fn, sync = true) { + if (vue.getCurrentInstance()) + vue.onMounted(fn); + else if (sync) + fn(); + else + vue.nextTick(fn); + } + + function useTimeoutFn(cb, interval, options = {}) { + const { + immediate = true + } = options; + const isPending = vue.ref(false); + let timer = null; + function clear() { + if (timer) { + clearTimeout(timer); + timer = null; + } + } + function stop() { + isPending.value = false; + clear(); + } + function start(...args) { + clear(); + isPending.value = true; + timer = setTimeout(() => { + isPending.value = false; + timer = null; + cb(...args); + }, resolveUnref(interval)); + } + if (immediate) { + isPending.value = true; + if (isClient) + start(); + } + tryOnScopeDispose(stop); + return { + isPending, + start, + stop + }; + } + + function unrefElement(elRef) { + var _a; + const plain = resolveUnref(elRef); + return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain; + } + + const defaultWindow = isClient ? window : void 0; + const defaultDocument = isClient ? window.document : void 0; + + function useEventListener(...args) { + let target; + let event; + let listener; + let options; + if (isString$2(args[0])) { + [event, listener, options] = args; + target = defaultWindow; + } else { + [target, event, listener, options] = args; + } + if (!target) + return noop$1; + let cleanup = noop$1; + const stopWatch = vue.watch(() => unrefElement(target), (el) => { + cleanup(); + if (!el) + return; + el.addEventListener(event, listener, options); + cleanup = () => { + el.removeEventListener(event, listener, options); + cleanup = noop$1; + }; + }, { immediate: true, flush: "post" }); + const stop = () => { + stopWatch(); + cleanup(); + }; + tryOnScopeDispose(stop); + return stop; + } + + function onClickOutside(target, handler, options = {}) { + const { window = defaultWindow, ignore, capture = true, detectIframe = false } = options; + if (!window) + return; + const shouldListen = vue.ref(true); + let fallback; + const listener = (event) => { + window.clearTimeout(fallback); + const el = unrefElement(target); + const composedPath = event.composedPath(); + if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value) + return; + if (ignore && ignore.length > 0) { + if (ignore.some((target2) => { + const el2 = unrefElement(target2); + return el2 && (event.target === el2 || composedPath.includes(el2)); + })) + return; + } + handler(event); + }; + const cleanup = [ + useEventListener(window, "click", listener, { passive: true, capture }), + useEventListener(window, "pointerdown", (e) => { + const el = unrefElement(target); + shouldListen.value = !!el && !e.composedPath().includes(el); + }, { passive: true }), + useEventListener(window, "pointerup", (e) => { + if (e.button === 0) { + const path = e.composedPath(); + e.composedPath = () => path; + fallback = window.setTimeout(() => listener(e), 50); + } + }, { passive: true }), + detectIframe && useEventListener(window, "blur", (event) => { + var _a; + const el = unrefElement(target); + if (((_a = document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(document.activeElement))) + handler(event); + }) + ].filter(Boolean); + const stop = () => cleanup.forEach((fn) => fn()); + return stop; + } + + function useSupported(callback, sync = false) { + const isSupported = vue.ref(); + const update = () => isSupported.value = Boolean(callback()); + update(); + tryOnMounted(update, sync); + return isSupported; + } + + const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {}; + const globalKey = "__vueuse_ssr_handlers__"; + _global[globalKey] = _global[globalKey] || {}; + _global[globalKey]; + + function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } = {}) { + const variable = vue.ref(initialValue); + const elRef = vue.computed(() => { + var _a; + return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement); + }); + vue.watch([elRef, () => resolveUnref(prop)], ([el, prop2]) => { + var _a; + if (el && window) { + const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim(); + variable.value = value || initialValue; + } + }, { immediate: true }); + vue.watch(variable, (val) => { + var _a; + if ((_a = elRef.value) == null ? void 0 : _a.style) + elRef.value.style.setProperty(resolveUnref(prop), val); + }); + return variable; + } + + function useDocumentVisibility({ document = defaultDocument } = {}) { + if (!document) + return vue.ref("visible"); + const visibility = vue.ref(document.visibilityState); + useEventListener(document, "visibilitychange", () => { + visibility.value = document.visibilityState; + }); + return visibility; + } + + var __getOwnPropSymbols$f = Object.getOwnPropertySymbols; + var __hasOwnProp$f = Object.prototype.hasOwnProperty; + var __propIsEnum$f = Object.prototype.propertyIsEnumerable; + var __objRest$2 = (source, exclude) => { + var target = {}; + for (var prop in source) + if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0) + target[prop] = source[prop]; + if (source != null && __getOwnPropSymbols$f) + for (var prop of __getOwnPropSymbols$f(source)) { + if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop)) + target[prop] = source[prop]; + } + return target; + }; + function useResizeObserver(target, callback, options = {}) { + const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]); + let observer; + const isSupported = useSupported(() => window && "ResizeObserver" in window); + const cleanup = () => { + if (observer) { + observer.disconnect(); + observer = void 0; + } + }; + const stopWatch = vue.watch(() => unrefElement(target), (el) => { + cleanup(); + if (isSupported.value && window && el) { + observer = new ResizeObserver(callback); + observer.observe(el, observerOptions); + } + }, { immediate: true, flush: "post" }); + const stop = () => { + cleanup(); + stopWatch(); + }; + tryOnScopeDispose(stop); + return { + isSupported, + stop + }; + } + + function useElementBounding(target, options = {}) { + const { + reset = true, + windowResize = true, + windowScroll = true, + immediate = true + } = options; + const height = vue.ref(0); + const bottom = vue.ref(0); + const left = vue.ref(0); + const right = vue.ref(0); + const top = vue.ref(0); + const width = vue.ref(0); + const x = vue.ref(0); + const y = vue.ref(0); + function update() { + const el = unrefElement(target); + if (!el) { + if (reset) { + height.value = 0; + bottom.value = 0; + left.value = 0; + right.value = 0; + top.value = 0; + width.value = 0; + x.value = 0; + y.value = 0; + } + return; + } + const rect = el.getBoundingClientRect(); + height.value = rect.height; + bottom.value = rect.bottom; + left.value = rect.left; + right.value = rect.right; + top.value = rect.top; + width.value = rect.width; + x.value = rect.x; + y.value = rect.y; + } + useResizeObserver(target, update); + vue.watch(() => unrefElement(target), (ele) => !ele && update()); + if (windowScroll) + useEventListener("scroll", update, { passive: true }); + if (windowResize) + useEventListener("resize", update, { passive: true }); + tryOnMounted(() => { + if (immediate) + update(); + }); + return { + height, + bottom, + left, + right, + top, + width, + x, + y, + update + }; + } + + var SwipeDirection; + (function(SwipeDirection2) { + SwipeDirection2["UP"] = "UP"; + SwipeDirection2["RIGHT"] = "RIGHT"; + SwipeDirection2["DOWN"] = "DOWN"; + SwipeDirection2["LEFT"] = "LEFT"; + SwipeDirection2["NONE"] = "NONE"; + })(SwipeDirection || (SwipeDirection = {})); + + var __defProp = Object.defineProperty; + var __getOwnPropSymbols = Object.getOwnPropertySymbols; + var __hasOwnProp = Object.prototype.hasOwnProperty; + var __propIsEnum = Object.prototype.propertyIsEnumerable; + var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; + var __spreadValues = (a, b) => { + for (var prop in b || (b = {})) + if (__hasOwnProp.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + if (__getOwnPropSymbols) + for (var prop of __getOwnPropSymbols(b)) { + if (__propIsEnum.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + } + return a; + }; + const _TransitionPresets = { + easeInSine: [0.12, 0, 0.39, 0], + easeOutSine: [0.61, 1, 0.88, 1], + easeInOutSine: [0.37, 0, 0.63, 1], + easeInQuad: [0.11, 0, 0.5, 0], + easeOutQuad: [0.5, 1, 0.89, 1], + easeInOutQuad: [0.45, 0, 0.55, 1], + easeInCubic: [0.32, 0, 0.67, 0], + easeOutCubic: [0.33, 1, 0.68, 1], + easeInOutCubic: [0.65, 0, 0.35, 1], + easeInQuart: [0.5, 0, 0.75, 0], + easeOutQuart: [0.25, 1, 0.5, 1], + easeInOutQuart: [0.76, 0, 0.24, 1], + easeInQuint: [0.64, 0, 0.78, 0], + easeOutQuint: [0.22, 1, 0.36, 1], + easeInOutQuint: [0.83, 0, 0.17, 1], + easeInExpo: [0.7, 0, 0.84, 0], + easeOutExpo: [0.16, 1, 0.3, 1], + easeInOutExpo: [0.87, 0, 0.13, 1], + easeInCirc: [0.55, 0, 1, 0.45], + easeOutCirc: [0, 0.55, 0.45, 1], + easeInOutCirc: [0.85, 0, 0.15, 1], + easeInBack: [0.36, 0, 0.66, -0.56], + easeOutBack: [0.34, 1.56, 0.64, 1], + easeInOutBack: [0.68, -0.6, 0.32, 1.6] + }; + __spreadValues({ + linear: identity$1 + }, _TransitionPresets); + + function useVModel(props, key, emit, options = {}) { + var _a, _b, _c; + const { + passive = false, + eventName, + deep = false, + defaultValue + } = options; + const vm = vue.getCurrentInstance(); + const _emit = emit || (vm == null ? void 0 : vm.emit) || ((_a = vm == null ? void 0 : vm.$emit) == null ? void 0 : _a.bind(vm)) || ((_c = (_b = vm == null ? void 0 : vm.proxy) == null ? void 0 : _b.$emit) == null ? void 0 : _c.bind(vm == null ? void 0 : vm.proxy)); + let event = eventName; + if (!key) { + { + key = "modelValue"; + } + } + event = eventName || event || `update:${key.toString()}`; + const getValue = () => isDef(props[key]) ? props[key] : defaultValue; + if (passive) { + const proxy = vue.ref(getValue()); + vue.watch(() => props[key], (v) => proxy.value = v); + vue.watch(proxy, (v) => { + if (v !== props[key] || deep) + _emit(event, v); + }, { + deep + }); + return proxy; + } else { + return vue.computed({ + get() { + return getValue(); + }, + set(value) { + _emit(event, value); + } + }); + } + } + + function useWindowFocus({ window = defaultWindow } = {}) { + if (!window) + return vue.ref(false); + const focused = vue.ref(window.document.hasFocus()); + useEventListener(window, "blur", () => { + focused.value = false; + }); + useEventListener(window, "focus", () => { + focused.value = true; + }); + return focused; + } + + function useWindowSize(options = {}) { + const { + window = defaultWindow, + initialWidth = Infinity, + initialHeight = Infinity, + listenOrientation = true + } = options; + const width = vue.ref(initialWidth); + const height = vue.ref(initialHeight); + const update = () => { + if (window) { + width.value = window.innerWidth; + height.value = window.innerHeight; + } + }; + update(); + tryOnMounted(update); + useEventListener("resize", update, { passive: true }); + if (listenOrientation) + useEventListener("orientationchange", update, { passive: true }); + return { width, height }; + } + + const isInContainer = (el, container) => { + if (!isClient || !el || !container) + return false; + const elRect = el.getBoundingClientRect(); + let containerRect; + if (container instanceof Element) { + containerRect = container.getBoundingClientRect(); + } else { + containerRect = { + top: 0, + right: window.innerWidth, + bottom: window.innerHeight, + left: 0 + }; + } + return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right; + }; + const getOffsetTop = (el) => { + let offset = 0; + let parent = el; + while (parent) { + offset += parent.offsetTop; + parent = parent.offsetParent; + } + return offset; + }; + const getOffsetTopDistance = (el, containerEl) => { + return Math.abs(getOffsetTop(el) - getOffsetTop(containerEl)); + }; + const getClientXY = (event) => { + let clientX; + let clientY; + if (event.type === "touchend") { + clientY = event.changedTouches[0].clientY; + clientX = event.changedTouches[0].clientX; + } else if (event.type.startsWith("touch")) { + clientY = event.touches[0].clientY; + clientX = event.touches[0].clientX; + } else { + clientY = event.clientY; + clientX = event.clientX; + } + return { + clientX, + clientY + }; + }; + + const NOOP = () => { + }; + const hasOwnProperty$p = Object.prototype.hasOwnProperty; + const hasOwn = (val, key) => hasOwnProperty$p.call(val, key); + const isArray$1 = Array.isArray; + const isDate$1 = (val) => toTypeString(val) === "[object Date]"; + const isFunction$1 = (val) => typeof val === "function"; + const isString$1 = (val) => typeof val === "string"; + const isObject$1 = (val) => val !== null && typeof val === "object"; + const isPromise = (val) => { + return isObject$1(val) && isFunction$1(val.then) && isFunction$1(val.catch); + }; + const objectToString$1 = Object.prototype.toString; + const toTypeString = (value) => objectToString$1.call(value); + const toRawType = (value) => { + return toTypeString(value).slice(8, -1); + }; + const cacheStringFunction = (fn) => { + const cache = /* @__PURE__ */ Object.create(null); + return (str) => { + const hit = cache[str]; + return hit || (cache[str] = fn(str)); + }; + }; + const camelizeRE = /-(\w)/g; + const camelize = cacheStringFunction((str) => { + return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : ""); + }); + const hyphenateRE = /\B([A-Z])/g; + const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, "-$1").toLowerCase()); + const capitalize$2 = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1)); + + var freeGlobal = typeof global == "object" && global && global.Object === Object && global; + + var freeSelf = typeof self == "object" && self && self.Object === Object && self; + var root = freeGlobal || freeSelf || Function("return this")(); + + var Symbol$1 = root.Symbol; + + var objectProto$s = Object.prototype; + var hasOwnProperty$o = objectProto$s.hasOwnProperty; + var nativeObjectToString$3 = objectProto$s.toString; + var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : void 0; + function getRawTag(value) { + var isOwn = hasOwnProperty$o.call(value, symToStringTag$1), tag = value[symToStringTag$1]; + try { + value[symToStringTag$1] = void 0; + var unmasked = true; + } catch (e) { + } + var result = nativeObjectToString$3.call(value); + if (unmasked) { + if (isOwn) { + value[symToStringTag$1] = tag; + } else { + delete value[symToStringTag$1]; + } + } + return result; + } + + var objectProto$r = Object.prototype; + var nativeObjectToString$2 = objectProto$r.toString; + function objectToString(value) { + return nativeObjectToString$2.call(value); + } + + var nullTag = "[object Null]"; + var undefinedTag = "[object Undefined]"; + var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : void 0; + function baseGetTag(value) { + if (value == null) { + return value === void 0 ? undefinedTag : nullTag; + } + return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value); + } + + function isObjectLike(value) { + return value != null && typeof value == "object"; + } + + var symbolTag$3 = "[object Symbol]"; + function isSymbol(value) { + return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag$3; + } + + var NAN$2 = 0 / 0; + function baseToNumber(value) { + if (typeof value == "number") { + return value; + } + if (isSymbol(value)) { + return NAN$2; + } + return +value; + } + + function arrayMap(array, iteratee) { + var index = -1, length = array == null ? 0 : array.length, result = Array(length); + while (++index < length) { + result[index] = iteratee(array[index], index, array); + } + return result; + } + + var isArray = Array.isArray; + + var INFINITY$5 = 1 / 0; + var symbolProto$2 = Symbol$1 ? Symbol$1.prototype : void 0; + var symbolToString = symbolProto$2 ? symbolProto$2.toString : void 0; + function baseToString(value) { + if (typeof value == "string") { + return value; + } + if (isArray(value)) { + return arrayMap(value, baseToString) + ""; + } + if (isSymbol(value)) { + return symbolToString ? symbolToString.call(value) : ""; + } + var result = value + ""; + return result == "0" && 1 / value == -INFINITY$5 ? "-0" : result; + } + + function createMathOperation(operator, defaultValue) { + return function(value, other) { + var result; + if (value === void 0 && other === void 0) { + return defaultValue; + } + if (value !== void 0) { + result = value; + } + if (other !== void 0) { + if (result === void 0) { + return other; + } + if (typeof value == "string" || typeof other == "string") { + value = baseToString(value); + other = baseToString(other); + } else { + value = baseToNumber(value); + other = baseToNumber(other); + } + result = operator(value, other); + } + return result; + }; + } + + var add = createMathOperation(function(augend, addend) { + return augend + addend; + }, 0); + + var reWhitespace = /\s/; + function trimmedEndIndex(string) { + var index = string.length; + while (index-- && reWhitespace.test(string.charAt(index))) { + } + return index; + } + + var reTrimStart$2 = /^\s+/; + function baseTrim(string) { + return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart$2, "") : string; + } + + function isObject(value) { + var type = typeof value; + return value != null && (type == "object" || type == "function"); + } + + var NAN$1 = 0 / 0; + var reIsBadHex = /^[-+]0x[0-9a-f]+$/i; + var reIsBinary = /^0b[01]+$/i; + var reIsOctal = /^0o[0-7]+$/i; + var freeParseInt = parseInt; + function toNumber(value) { + if (typeof value == "number") { + return value; + } + if (isSymbol(value)) { + return NAN$1; + } + if (isObject(value)) { + var other = typeof value.valueOf == "function" ? value.valueOf() : value; + value = isObject(other) ? other + "" : other; + } + if (typeof value != "string") { + return value === 0 ? value : +value; + } + value = baseTrim(value); + var isBinary = reIsBinary.test(value); + return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN$1 : +value; + } + + var INFINITY$4 = 1 / 0; + var MAX_INTEGER = 17976931348623157e292; + function toFinite(value) { + if (!value) { + return value === 0 ? value : 0; + } + value = toNumber(value); + if (value === INFINITY$4 || value === -INFINITY$4) { + var sign = value < 0 ? -1 : 1; + return sign * MAX_INTEGER; + } + return value === value ? value : 0; + } + + function toInteger(value) { + var result = toFinite(value), remainder = result % 1; + return result === result ? remainder ? result - remainder : result : 0; + } + + var FUNC_ERROR_TEXT$b = "Expected a function"; + function after(n, func) { + if (typeof func != "function") { + throw new TypeError(FUNC_ERROR_TEXT$b); + } + n = toInteger(n); + return function() { + if (--n < 1) { + return func.apply(this, arguments); + } + }; + } + + function identity(value) { + return value; + } + + var asyncTag = "[object AsyncFunction]"; + var funcTag$2 = "[object Function]"; + var genTag$1 = "[object GeneratorFunction]"; + var proxyTag = "[object Proxy]"; + function isFunction(value) { + if (!isObject(value)) { + return false; + } + var tag = baseGetTag(value); + return tag == funcTag$2 || tag == genTag$1 || tag == asyncTag || tag == proxyTag; + } + + var coreJsData = root["__core-js_shared__"]; + + var maskSrcKey = function() { + var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || ""); + return uid ? "Symbol(src)_1." + uid : ""; + }(); + function isMasked(func) { + return !!maskSrcKey && maskSrcKey in func; + } + + var funcProto$2 = Function.prototype; + var funcToString$2 = funcProto$2.toString; + function toSource(func) { + if (func != null) { + try { + return funcToString$2.call(func); + } catch (e) { + } + try { + return func + ""; + } catch (e) { + } + } + return ""; + } + + var reRegExpChar$1 = /[\\^$.*+?()[\]{}|]/g; + var reIsHostCtor = /^\[object .+?Constructor\]$/; + var funcProto$1 = Function.prototype; + var objectProto$q = Object.prototype; + var funcToString$1 = funcProto$1.toString; + var hasOwnProperty$n = objectProto$q.hasOwnProperty; + var reIsNative = RegExp("^" + funcToString$1.call(hasOwnProperty$n).replace(reRegExpChar$1, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"); + function baseIsNative(value) { + if (!isObject(value) || isMasked(value)) { + return false; + } + var pattern = isFunction(value) ? reIsNative : reIsHostCtor; + return pattern.test(toSource(value)); + } + + function getValue$1(object, key) { + return object == null ? void 0 : object[key]; + } + + function getNative(object, key) { + var value = getValue$1(object, key); + return baseIsNative(value) ? value : void 0; + } + + var WeakMap = getNative(root, "WeakMap"); + + var metaMap = WeakMap && new WeakMap(); + + var baseSetData = !metaMap ? identity : function(func, data) { + metaMap.set(func, data); + return func; + }; + + var objectCreate = Object.create; + var baseCreate = function() { + function object() { + } + return function(proto) { + if (!isObject(proto)) { + return {}; + } + if (objectCreate) { + return objectCreate(proto); + } + object.prototype = proto; + var result = new object(); + object.prototype = void 0; + return result; + }; + }(); + + function createCtor(Ctor) { + return function() { + var args = arguments; + switch (args.length) { + case 0: + return new Ctor(); + case 1: + return new Ctor(args[0]); + case 2: + return new Ctor(args[0], args[1]); + case 3: + return new Ctor(args[0], args[1], args[2]); + case 4: + return new Ctor(args[0], args[1], args[2], args[3]); + case 5: + return new Ctor(args[0], args[1], args[2], args[3], args[4]); + case 6: + return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5]); + case 7: + return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]); + } + var thisBinding = baseCreate(Ctor.prototype), result = Ctor.apply(thisBinding, args); + return isObject(result) ? result : thisBinding; + }; + } + + var WRAP_BIND_FLAG$8 = 1; + function createBind(func, bitmask, thisArg) { + var isBind = bitmask & WRAP_BIND_FLAG$8, Ctor = createCtor(func); + function wrapper() { + var fn = this && this !== root && this instanceof wrapper ? Ctor : func; + return fn.apply(isBind ? thisArg : this, arguments); + } + return wrapper; + } + + function apply(func, thisArg, args) { + switch (args.length) { + case 0: + return func.call(thisArg); + case 1: + return func.call(thisArg, args[0]); + case 2: + return func.call(thisArg, args[0], args[1]); + case 3: + return func.call(thisArg, args[0], args[1], args[2]); + } + return func.apply(thisArg, args); + } + + var nativeMax$g = Math.max; + function composeArgs(args, partials, holders, isCurried) { + var argsIndex = -1, argsLength = args.length, holdersLength = holders.length, leftIndex = -1, leftLength = partials.length, rangeLength = nativeMax$g(argsLength - holdersLength, 0), result = Array(leftLength + rangeLength), isUncurried = !isCurried; + while (++leftIndex < leftLength) { + result[leftIndex] = partials[leftIndex]; + } + while (++argsIndex < holdersLength) { + if (isUncurried || argsIndex < argsLength) { + result[holders[argsIndex]] = args[argsIndex]; + } + } + while (rangeLength--) { + result[leftIndex++] = args[argsIndex++]; + } + return result; + } + + var nativeMax$f = Math.max; + function composeArgsRight(args, partials, holders, isCurried) { + var argsIndex = -1, argsLength = args.length, holdersIndex = -1, holdersLength = holders.length, rightIndex = -1, rightLength = partials.length, rangeLength = nativeMax$f(argsLength - holdersLength, 0), result = Array(rangeLength + rightLength), isUncurried = !isCurried; + while (++argsIndex < rangeLength) { + result[argsIndex] = args[argsIndex]; + } + var offset = argsIndex; + while (++rightIndex < rightLength) { + result[offset + rightIndex] = partials[rightIndex]; + } + while (++holdersIndex < holdersLength) { + if (isUncurried || argsIndex < argsLength) { + result[offset + holders[holdersIndex]] = args[argsIndex++]; + } + } + return result; + } + + function countHolders(array, placeholder) { + var length = array.length, result = 0; + while (length--) { + if (array[length] === placeholder) { + ++result; + } + } + return result; + } + + function baseLodash() { + } + + var MAX_ARRAY_LENGTH$6 = 4294967295; + function LazyWrapper(value) { + this.__wrapped__ = value; + this.__actions__ = []; + this.__dir__ = 1; + this.__filtered__ = false; + this.__iteratees__ = []; + this.__takeCount__ = MAX_ARRAY_LENGTH$6; + this.__views__ = []; + } + LazyWrapper.prototype = baseCreate(baseLodash.prototype); + LazyWrapper.prototype.constructor = LazyWrapper; + + function noop() { + } + + var getData = !metaMap ? noop : function(func) { + return metaMap.get(func); + }; + + var realNames = {}; + + var objectProto$p = Object.prototype; + var hasOwnProperty$m = objectProto$p.hasOwnProperty; + function getFuncName(func) { + var result = func.name + "", array = realNames[result], length = hasOwnProperty$m.call(realNames, result) ? array.length : 0; + while (length--) { + var data = array[length], otherFunc = data.func; + if (otherFunc == null || otherFunc == func) { + return data.name; + } + } + return result; + } + + function LodashWrapper(value, chainAll) { + this.__wrapped__ = value; + this.__actions__ = []; + this.__chain__ = !!chainAll; + this.__index__ = 0; + this.__values__ = void 0; + } + LodashWrapper.prototype = baseCreate(baseLodash.prototype); + LodashWrapper.prototype.constructor = LodashWrapper; + + function copyArray(source, array) { + var index = -1, length = source.length; + array || (array = Array(length)); + while (++index < length) { + array[index] = source[index]; + } + return array; + } + + function wrapperClone(wrapper) { + if (wrapper instanceof LazyWrapper) { + return wrapper.clone(); + } + var result = new LodashWrapper(wrapper.__wrapped__, wrapper.__chain__); + result.__actions__ = copyArray(wrapper.__actions__); + result.__index__ = wrapper.__index__; + result.__values__ = wrapper.__values__; + return result; + } + + var objectProto$o = Object.prototype; + var hasOwnProperty$l = objectProto$o.hasOwnProperty; + function lodash(value) { + if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) { + if (value instanceof LodashWrapper) { + return value; + } + if (hasOwnProperty$l.call(value, "__wrapped__")) { + return wrapperClone(value); + } + } + return new LodashWrapper(value); + } + lodash.prototype = baseLodash.prototype; + lodash.prototype.constructor = lodash; + + function isLaziable(func) { + var funcName = getFuncName(func), other = lodash[funcName]; + if (typeof other != "function" || !(funcName in LazyWrapper.prototype)) { + return false; + } + if (func === other) { + return true; + } + var data = getData(other); + return !!data && func === data[0]; + } + + var HOT_COUNT = 800; + var HOT_SPAN = 16; + var nativeNow = Date.now; + function shortOut(func) { + var count = 0, lastCalled = 0; + return function() { + var stamp = nativeNow(), remaining = HOT_SPAN - (stamp - lastCalled); + lastCalled = stamp; + if (remaining > 0) { + if (++count >= HOT_COUNT) { + return arguments[0]; + } + } else { + count = 0; + } + return func.apply(void 0, arguments); + }; + } + + var setData = shortOut(baseSetData); + + var reWrapDetails = /\{\n\/\* \[wrapped with (.+)\] \*/; + var reSplitDetails = /,? & /; + function getWrapDetails(source) { + var match = source.match(reWrapDetails); + return match ? match[1].split(reSplitDetails) : []; + } + + var reWrapComment = /\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/; + function insertWrapDetails(source, details) { + var length = details.length; + if (!length) { + return source; + } + var lastIndex = length - 1; + details[lastIndex] = (length > 1 ? "& " : "") + details[lastIndex]; + details = details.join(length > 2 ? ", " : " "); + return source.replace(reWrapComment, "{\n/* [wrapped with " + details + "] */\n"); + } + + function constant(value) { + return function() { + return value; + }; + } + + var defineProperty = function() { + try { + var func = getNative(Object, "defineProperty"); + func({}, "", {}); + return func; + } catch (e) { + } + }(); + + var baseSetToString = !defineProperty ? identity : function(func, string) { + return defineProperty(func, "toString", { + "configurable": true, + "enumerable": false, + "value": constant(string), + "writable": true + }); + }; + + var setToString = shortOut(baseSetToString); + + function arrayEach(array, iteratee) { + var index = -1, length = array == null ? 0 : array.length; + while (++index < length) { + if (iteratee(array[index], index, array) === false) { + break; + } + } + return array; + } + + function baseFindIndex(array, predicate, fromIndex, fromRight) { + var length = array.length, index = fromIndex + (fromRight ? 1 : -1); + while (fromRight ? index-- : ++index < length) { + if (predicate(array[index], index, array)) { + return index; + } + } + return -1; + } + + function baseIsNaN(value) { + return value !== value; + } + + function strictIndexOf(array, value, fromIndex) { + var index = fromIndex - 1, length = array.length; + while (++index < length) { + if (array[index] === value) { + return index; + } + } + return -1; + } + + function baseIndexOf(array, value, fromIndex) { + return value === value ? strictIndexOf(array, value, fromIndex) : baseFindIndex(array, baseIsNaN, fromIndex); + } + + function arrayIncludes(array, value) { + var length = array == null ? 0 : array.length; + return !!length && baseIndexOf(array, value, 0) > -1; + } + + var WRAP_BIND_FLAG$7 = 1; + var WRAP_BIND_KEY_FLAG$6 = 2; + var WRAP_CURRY_FLAG$6 = 8; + var WRAP_CURRY_RIGHT_FLAG$3 = 16; + var WRAP_PARTIAL_FLAG$6 = 32; + var WRAP_PARTIAL_RIGHT_FLAG$3 = 64; + var WRAP_ARY_FLAG$4 = 128; + var WRAP_REARG_FLAG$3 = 256; + var WRAP_FLIP_FLAG$2 = 512; + var wrapFlags = [ + ["ary", WRAP_ARY_FLAG$4], + ["bind", WRAP_BIND_FLAG$7], + ["bindKey", WRAP_BIND_KEY_FLAG$6], + ["curry", WRAP_CURRY_FLAG$6], + ["curryRight", WRAP_CURRY_RIGHT_FLAG$3], + ["flip", WRAP_FLIP_FLAG$2], + ["partial", WRAP_PARTIAL_FLAG$6], + ["partialRight", WRAP_PARTIAL_RIGHT_FLAG$3], + ["rearg", WRAP_REARG_FLAG$3] + ]; + function updateWrapDetails(details, bitmask) { + arrayEach(wrapFlags, function(pair) { + var value = "_." + pair[0]; + if (bitmask & pair[1] && !arrayIncludes(details, value)) { + details.push(value); + } + }); + return details.sort(); + } + + function setWrapToString(wrapper, reference, bitmask) { + var source = reference + ""; + return setToString(wrapper, insertWrapDetails(source, updateWrapDetails(getWrapDetails(source), bitmask))); + } + + var WRAP_BIND_FLAG$6 = 1; + var WRAP_BIND_KEY_FLAG$5 = 2; + var WRAP_CURRY_BOUND_FLAG$1 = 4; + var WRAP_CURRY_FLAG$5 = 8; + var WRAP_PARTIAL_FLAG$5 = 32; + var WRAP_PARTIAL_RIGHT_FLAG$2 = 64; + function createRecurry(func, bitmask, wrapFunc, placeholder, thisArg, partials, holders, argPos, ary, arity) { + var isCurry = bitmask & WRAP_CURRY_FLAG$5, newHolders = isCurry ? holders : void 0, newHoldersRight = isCurry ? void 0 : holders, newPartials = isCurry ? partials : void 0, newPartialsRight = isCurry ? void 0 : partials; + bitmask |= isCurry ? WRAP_PARTIAL_FLAG$5 : WRAP_PARTIAL_RIGHT_FLAG$2; + bitmask &= ~(isCurry ? WRAP_PARTIAL_RIGHT_FLAG$2 : WRAP_PARTIAL_FLAG$5); + if (!(bitmask & WRAP_CURRY_BOUND_FLAG$1)) { + bitmask &= ~(WRAP_BIND_FLAG$6 | WRAP_BIND_KEY_FLAG$5); + } + var newData = [ + func, + bitmask, + thisArg, + newPartials, + newHolders, + newPartialsRight, + newHoldersRight, + argPos, + ary, + arity + ]; + var result = wrapFunc.apply(void 0, newData); + if (isLaziable(func)) { + setData(result, newData); + } + result.placeholder = placeholder; + return setWrapToString(result, func, bitmask); + } + + function getHolder(func) { + var object = func; + return object.placeholder; + } + + var MAX_SAFE_INTEGER$5 = 9007199254740991; + var reIsUint = /^(?:0|[1-9]\d*)$/; + function isIndex(value, length) { + var type = typeof value; + length = length == null ? MAX_SAFE_INTEGER$5 : length; + return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length); + } + + var nativeMin$e = Math.min; + function reorder(array, indexes) { + var arrLength = array.length, length = nativeMin$e(indexes.length, arrLength), oldArray = copyArray(array); + while (length--) { + var index = indexes[length]; + array[length] = isIndex(index, arrLength) ? oldArray[index] : void 0; + } + return array; + } + + var PLACEHOLDER$1 = "__lodash_placeholder__"; + function replaceHolders(array, placeholder) { + var index = -1, length = array.length, resIndex = 0, result = []; + while (++index < length) { + var value = array[index]; + if (value === placeholder || value === PLACEHOLDER$1) { + array[index] = PLACEHOLDER$1; + result[resIndex++] = index; + } + } + return result; + } + + var WRAP_BIND_FLAG$5 = 1; + var WRAP_BIND_KEY_FLAG$4 = 2; + var WRAP_CURRY_FLAG$4 = 8; + var WRAP_CURRY_RIGHT_FLAG$2 = 16; + var WRAP_ARY_FLAG$3 = 128; + var WRAP_FLIP_FLAG$1 = 512; + function createHybrid(func, bitmask, thisArg, partials, holders, partialsRight, holdersRight, argPos, ary, arity) { + var isAry = bitmask & WRAP_ARY_FLAG$3, isBind = bitmask & WRAP_BIND_FLAG$5, isBindKey = bitmask & WRAP_BIND_KEY_FLAG$4, isCurried = bitmask & (WRAP_CURRY_FLAG$4 | WRAP_CURRY_RIGHT_FLAG$2), isFlip = bitmask & WRAP_FLIP_FLAG$1, Ctor = isBindKey ? void 0 : createCtor(func); + function wrapper() { + var length = arguments.length, args = Array(length), index = length; + while (index--) { + args[index] = arguments[index]; + } + if (isCurried) { + var placeholder = getHolder(wrapper), holdersCount = countHolders(args, placeholder); + } + if (partials) { + args = composeArgs(args, partials, holders, isCurried); + } + if (partialsRight) { + args = composeArgsRight(args, partialsRight, holdersRight, isCurried); + } + length -= holdersCount; + if (isCurried && length < arity) { + var newHolders = replaceHolders(args, placeholder); + return createRecurry(func, bitmask, createHybrid, wrapper.placeholder, thisArg, args, newHolders, argPos, ary, arity - length); + } + var thisBinding = isBind ? thisArg : this, fn = isBindKey ? thisBinding[func] : func; + length = args.length; + if (argPos) { + args = reorder(args, argPos); + } else if (isFlip && length > 1) { + args.reverse(); + } + if (isAry && ary < length) { + args.length = ary; + } + if (this && this !== root && this instanceof wrapper) { + fn = Ctor || createCtor(fn); + } + return fn.apply(thisBinding, args); + } + return wrapper; + } + + function createCurry(func, bitmask, arity) { + var Ctor = createCtor(func); + function wrapper() { + var length = arguments.length, args = Array(length), index = length, placeholder = getHolder(wrapper); + while (index--) { + args[index] = arguments[index]; + } + var holders = length < 3 && args[0] !== placeholder && args[length - 1] !== placeholder ? [] : replaceHolders(args, placeholder); + length -= holders.length; + if (length < arity) { + return createRecurry(func, bitmask, createHybrid, wrapper.placeholder, void 0, args, holders, void 0, void 0, arity - length); + } + var fn = this && this !== root && this instanceof wrapper ? Ctor : func; + return apply(fn, this, args); + } + return wrapper; + } + + var WRAP_BIND_FLAG$4 = 1; + function createPartial(func, bitmask, thisArg, partials) { + var isBind = bitmask & WRAP_BIND_FLAG$4, Ctor = createCtor(func); + function wrapper() { + var argsIndex = -1, argsLength = arguments.length, leftIndex = -1, leftLength = partials.length, args = Array(leftLength + argsLength), fn = this && this !== root && this instanceof wrapper ? Ctor : func; + while (++leftIndex < leftLength) { + args[leftIndex] = partials[leftIndex]; + } + while (argsLength--) { + args[leftIndex++] = arguments[++argsIndex]; + } + return apply(fn, isBind ? thisArg : this, args); + } + return wrapper; + } + + var PLACEHOLDER = "__lodash_placeholder__"; + var WRAP_BIND_FLAG$3 = 1; + var WRAP_BIND_KEY_FLAG$3 = 2; + var WRAP_CURRY_BOUND_FLAG = 4; + var WRAP_CURRY_FLAG$3 = 8; + var WRAP_ARY_FLAG$2 = 128; + var WRAP_REARG_FLAG$2 = 256; + var nativeMin$d = Math.min; + function mergeData(data, source) { + var bitmask = data[1], srcBitmask = source[1], newBitmask = bitmask | srcBitmask, isCommon = newBitmask < (WRAP_BIND_FLAG$3 | WRAP_BIND_KEY_FLAG$3 | WRAP_ARY_FLAG$2); + var isCombo = srcBitmask == WRAP_ARY_FLAG$2 && bitmask == WRAP_CURRY_FLAG$3 || srcBitmask == WRAP_ARY_FLAG$2 && bitmask == WRAP_REARG_FLAG$2 && data[7].length <= source[8] || srcBitmask == (WRAP_ARY_FLAG$2 | WRAP_REARG_FLAG$2) && source[7].length <= source[8] && bitmask == WRAP_CURRY_FLAG$3; + if (!(isCommon || isCombo)) { + return data; + } + if (srcBitmask & WRAP_BIND_FLAG$3) { + data[2] = source[2]; + newBitmask |= bitmask & WRAP_BIND_FLAG$3 ? 0 : WRAP_CURRY_BOUND_FLAG; + } + var value = source[3]; + if (value) { + var partials = data[3]; + data[3] = partials ? composeArgs(partials, value, source[4]) : value; + data[4] = partials ? replaceHolders(data[3], PLACEHOLDER) : source[4]; + } + value = source[5]; + if (value) { + partials = data[5]; + data[5] = partials ? composeArgsRight(partials, value, source[6]) : value; + data[6] = partials ? replaceHolders(data[5], PLACEHOLDER) : source[6]; + } + value = source[7]; + if (value) { + data[7] = value; + } + if (srcBitmask & WRAP_ARY_FLAG$2) { + data[8] = data[8] == null ? source[8] : nativeMin$d(data[8], source[8]); + } + if (data[9] == null) { + data[9] = source[9]; + } + data[0] = source[0]; + data[1] = newBitmask; + return data; + } + + var FUNC_ERROR_TEXT$a = "Expected a function"; + var WRAP_BIND_FLAG$2 = 1; + var WRAP_BIND_KEY_FLAG$2 = 2; + var WRAP_CURRY_FLAG$2 = 8; + var WRAP_CURRY_RIGHT_FLAG$1 = 16; + var WRAP_PARTIAL_FLAG$4 = 32; + var WRAP_PARTIAL_RIGHT_FLAG$1 = 64; + var nativeMax$e = Math.max; + function createWrap(func, bitmask, thisArg, partials, holders, argPos, ary, arity) { + var isBindKey = bitmask & WRAP_BIND_KEY_FLAG$2; + if (!isBindKey && typeof func != "function") { + throw new TypeError(FUNC_ERROR_TEXT$a); + } + var length = partials ? partials.length : 0; + if (!length) { + bitmask &= ~(WRAP_PARTIAL_FLAG$4 | WRAP_PARTIAL_RIGHT_FLAG$1); + partials = holders = void 0; + } + ary = ary === void 0 ? ary : nativeMax$e(toInteger(ary), 0); + arity = arity === void 0 ? arity : toInteger(arity); + length -= holders ? holders.length : 0; + if (bitmask & WRAP_PARTIAL_RIGHT_FLAG$1) { + var partialsRight = partials, holdersRight = holders; + partials = holders = void 0; + } + var data = isBindKey ? void 0 : getData(func); + var newData = [ + func, + bitmask, + thisArg, + partials, + holders, + partialsRight, + holdersRight, + argPos, + ary, + arity + ]; + if (data) { + mergeData(newData, data); + } + func = newData[0]; + bitmask = newData[1]; + thisArg = newData[2]; + partials = newData[3]; + holders = newData[4]; + arity = newData[9] = newData[9] === void 0 ? isBindKey ? 0 : func.length : nativeMax$e(newData[9] - length, 0); + if (!arity && bitmask & (WRAP_CURRY_FLAG$2 | WRAP_CURRY_RIGHT_FLAG$1)) { + bitmask &= ~(WRAP_CURRY_FLAG$2 | WRAP_CURRY_RIGHT_FLAG$1); + } + if (!bitmask || bitmask == WRAP_BIND_FLAG$2) { + var result = createBind(func, bitmask, thisArg); + } else if (bitmask == WRAP_CURRY_FLAG$2 || bitmask == WRAP_CURRY_RIGHT_FLAG$1) { + result = createCurry(func, bitmask, arity); + } else if ((bitmask == WRAP_PARTIAL_FLAG$4 || bitmask == (WRAP_BIND_FLAG$2 | WRAP_PARTIAL_FLAG$4)) && !holders.length) { + result = createPartial(func, bitmask, thisArg, partials); + } else { + result = createHybrid.apply(void 0, newData); + } + var setter = data ? baseSetData : setData; + return setWrapToString(setter(result, newData), func, bitmask); + } + + var WRAP_ARY_FLAG$1 = 128; + function ary(func, n, guard) { + n = guard ? void 0 : n; + n = func && n == null ? func.length : n; + return createWrap(func, WRAP_ARY_FLAG$1, void 0, void 0, void 0, void 0, n); + } + + function baseAssignValue(object, key, value) { + if (key == "__proto__" && defineProperty) { + defineProperty(object, key, { + "configurable": true, + "enumerable": true, + "value": value, + "writable": true + }); + } else { + object[key] = value; + } + } + + function eq(value, other) { + return value === other || value !== value && other !== other; + } + + var objectProto$n = Object.prototype; + var hasOwnProperty$k = objectProto$n.hasOwnProperty; + function assignValue(object, key, value) { + var objValue = object[key]; + if (!(hasOwnProperty$k.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) { + baseAssignValue(object, key, value); + } + } + + function copyObject(source, props, object, customizer) { + var isNew = !object; + object || (object = {}); + var index = -1, length = props.length; + while (++index < length) { + var key = props[index]; + var newValue = customizer ? customizer(object[key], source[key], key, object, source) : void 0; + if (newValue === void 0) { + newValue = source[key]; + } + if (isNew) { + baseAssignValue(object, key, newValue); + } else { + assignValue(object, key, newValue); + } + } + return object; + } + + var nativeMax$d = Math.max; + function overRest(func, start, transform) { + start = nativeMax$d(start === void 0 ? func.length - 1 : start, 0); + return function() { + var args = arguments, index = -1, length = nativeMax$d(args.length - start, 0), array = Array(length); + while (++index < length) { + array[index] = args[start + index]; + } + index = -1; + var otherArgs = Array(start + 1); + while (++index < start) { + otherArgs[index] = args[index]; + } + otherArgs[start] = transform(array); + return apply(func, this, otherArgs); + }; + } + + function baseRest(func, start) { + return setToString(overRest(func, start, identity), func + ""); + } + + var MAX_SAFE_INTEGER$4 = 9007199254740991; + function isLength(value) { + return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER$4; + } + + function isArrayLike(value) { + return value != null && isLength(value.length) && !isFunction(value); + } + + function isIterateeCall(value, index, object) { + if (!isObject(object)) { + return false; + } + var type = typeof index; + if (type == "number" ? isArrayLike(object) && isIndex(index, object.length) : type == "string" && index in object) { + return eq(object[index], value); + } + return false; + } + + function createAssigner(assigner) { + return baseRest(function(object, sources) { + var index = -1, length = sources.length, customizer = length > 1 ? sources[length - 1] : void 0, guard = length > 2 ? sources[2] : void 0; + customizer = assigner.length > 3 && typeof customizer == "function" ? (length--, customizer) : void 0; + if (guard && isIterateeCall(sources[0], sources[1], guard)) { + customizer = length < 3 ? void 0 : customizer; + length = 1; + } + object = Object(object); + while (++index < length) { + var source = sources[index]; + if (source) { + assigner(object, source, index, customizer); + } + } + return object; + }); + } + + var objectProto$m = Object.prototype; + function isPrototype(value) { + var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto$m; + return value === proto; + } + + function baseTimes(n, iteratee) { + var index = -1, result = Array(n); + while (++index < n) { + result[index] = iteratee(index); + } + return result; + } + + var argsTag$3 = "[object Arguments]"; + function baseIsArguments(value) { + return isObjectLike(value) && baseGetTag(value) == argsTag$3; + } + + var objectProto$l = Object.prototype; + var hasOwnProperty$j = objectProto$l.hasOwnProperty; + var propertyIsEnumerable$1 = objectProto$l.propertyIsEnumerable; + var isArguments = baseIsArguments(function() { + return arguments; + }()) ? baseIsArguments : function(value) { + return isObjectLike(value) && hasOwnProperty$j.call(value, "callee") && !propertyIsEnumerable$1.call(value, "callee"); + }; + + function stubFalse() { + return false; + } + + var freeExports$2 = typeof exports == "object" && exports && !exports.nodeType && exports; + var freeModule$2 = freeExports$2 && typeof module == "object" && module && !module.nodeType && module; + var moduleExports$2 = freeModule$2 && freeModule$2.exports === freeExports$2; + var Buffer$1 = moduleExports$2 ? root.Buffer : void 0; + var nativeIsBuffer = Buffer$1 ? Buffer$1.isBuffer : void 0; + var isBuffer = nativeIsBuffer || stubFalse; + + var argsTag$2 = "[object Arguments]"; + var arrayTag$2 = "[object Array]"; + var boolTag$4 = "[object Boolean]"; + var dateTag$4 = "[object Date]"; + var errorTag$3 = "[object Error]"; + var funcTag$1 = "[object Function]"; + var mapTag$9 = "[object Map]"; + var numberTag$4 = "[object Number]"; + var objectTag$4 = "[object Object]"; + var regexpTag$4 = "[object RegExp]"; + var setTag$9 = "[object Set]"; + var stringTag$4 = "[object String]"; + var weakMapTag$3 = "[object WeakMap]"; + var arrayBufferTag$4 = "[object ArrayBuffer]"; + var dataViewTag$4 = "[object DataView]"; + var float32Tag$2 = "[object Float32Array]"; + var float64Tag$2 = "[object Float64Array]"; + var int8Tag$2 = "[object Int8Array]"; + var int16Tag$2 = "[object Int16Array]"; + var int32Tag$2 = "[object Int32Array]"; + var uint8Tag$2 = "[object Uint8Array]"; + var uint8ClampedTag$2 = "[object Uint8ClampedArray]"; + var uint16Tag$2 = "[object Uint16Array]"; + var uint32Tag$2 = "[object Uint32Array]"; + var typedArrayTags = {}; + typedArrayTags[float32Tag$2] = typedArrayTags[float64Tag$2] = typedArrayTags[int8Tag$2] = typedArrayTags[int16Tag$2] = typedArrayTags[int32Tag$2] = typedArrayTags[uint8Tag$2] = typedArrayTags[uint8ClampedTag$2] = typedArrayTags[uint16Tag$2] = typedArrayTags[uint32Tag$2] = true; + typedArrayTags[argsTag$2] = typedArrayTags[arrayTag$2] = typedArrayTags[arrayBufferTag$4] = typedArrayTags[boolTag$4] = typedArrayTags[dataViewTag$4] = typedArrayTags[dateTag$4] = typedArrayTags[errorTag$3] = typedArrayTags[funcTag$1] = typedArrayTags[mapTag$9] = typedArrayTags[numberTag$4] = typedArrayTags[objectTag$4] = typedArrayTags[regexpTag$4] = typedArrayTags[setTag$9] = typedArrayTags[stringTag$4] = typedArrayTags[weakMapTag$3] = false; + function baseIsTypedArray(value) { + return isObjectLike(value) && isLength(value.length) && !!typedArrayTags[baseGetTag(value)]; + } + + function baseUnary(func) { + return function(value) { + return func(value); + }; + } + + var freeExports$1 = typeof exports == "object" && exports && !exports.nodeType && exports; + var freeModule$1 = freeExports$1 && typeof module == "object" && module && !module.nodeType && module; + var moduleExports$1 = freeModule$1 && freeModule$1.exports === freeExports$1; + var freeProcess = moduleExports$1 && freeGlobal.process; + var nodeUtil = function() { + try { + var types = freeModule$1 && freeModule$1.require && freeModule$1.require("util").types; + if (types) { + return types; + } + return freeProcess && freeProcess.binding && freeProcess.binding("util"); + } catch (e) { + } + }(); + + var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray; + var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray; + + var objectProto$k = Object.prototype; + var hasOwnProperty$i = objectProto$k.hasOwnProperty; + function arrayLikeKeys(value, inherited) { + var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length; + for (var key in value) { + if ((inherited || hasOwnProperty$i.call(value, key)) && !(skipIndexes && (key == "length" || isBuff && (key == "offset" || key == "parent") || isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || isIndex(key, length)))) { + result.push(key); + } + } + return result; + } + + function overArg(func, transform) { + return function(arg) { + return func(transform(arg)); + }; + } + + var nativeKeys = overArg(Object.keys, Object); + + var objectProto$j = Object.prototype; + var hasOwnProperty$h = objectProto$j.hasOwnProperty; + function baseKeys(object) { + if (!isPrototype(object)) { + return nativeKeys(object); + } + var result = []; + for (var key in Object(object)) { + if (hasOwnProperty$h.call(object, key) && key != "constructor") { + result.push(key); + } + } + return result; + } + + function keys(object) { + return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object); + } + + var objectProto$i = Object.prototype; + var hasOwnProperty$g = objectProto$i.hasOwnProperty; + var assign = createAssigner(function(object, source) { + if (isPrototype(source) || isArrayLike(source)) { + copyObject(source, keys(source), object); + return; + } + for (var key in source) { + if (hasOwnProperty$g.call(source, key)) { + assignValue(object, key, source[key]); + } + } + }); + + function nativeKeysIn(object) { + var result = []; + if (object != null) { + for (var key in Object(object)) { + result.push(key); + } + } + return result; + } + + var objectProto$h = Object.prototype; + var hasOwnProperty$f = objectProto$h.hasOwnProperty; + function baseKeysIn(object) { + if (!isObject(object)) { + return nativeKeysIn(object); + } + var isProto = isPrototype(object), result = []; + for (var key in object) { + if (!(key == "constructor" && (isProto || !hasOwnProperty$f.call(object, key)))) { + result.push(key); + } + } + return result; + } + + function keysIn(object) { + return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object); + } + + var assignIn = createAssigner(function(object, source) { + copyObject(source, keysIn(source), object); + }); + + var assignInWith = createAssigner(function(object, source, srcIndex, customizer) { + copyObject(source, keysIn(source), object, customizer); + }); + + var assignWith = createAssigner(function(object, source, srcIndex, customizer) { + copyObject(source, keys(source), object, customizer); + }); + + var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/; + var reIsPlainProp = /^\w*$/; + function isKey(value, object) { + if (isArray(value)) { + return false; + } + var type = typeof value; + if (type == "number" || type == "symbol" || type == "boolean" || value == null || isSymbol(value)) { + return true; + } + return reIsPlainProp.test(value) || !reIsDeepProp.test(value) || object != null && value in Object(object); + } + + var nativeCreate = getNative(Object, "create"); + + function hashClear() { + this.__data__ = nativeCreate ? nativeCreate(null) : {}; + this.size = 0; + } + + function hashDelete(key) { + var result = this.has(key) && delete this.__data__[key]; + this.size -= result ? 1 : 0; + return result; + } + + var HASH_UNDEFINED$2 = "__lodash_hash_undefined__"; + var objectProto$g = Object.prototype; + var hasOwnProperty$e = objectProto$g.hasOwnProperty; + function hashGet(key) { + var data = this.__data__; + if (nativeCreate) { + var result = data[key]; + return result === HASH_UNDEFINED$2 ? void 0 : result; + } + return hasOwnProperty$e.call(data, key) ? data[key] : void 0; + } + + var objectProto$f = Object.prototype; + var hasOwnProperty$d = objectProto$f.hasOwnProperty; + function hashHas(key) { + var data = this.__data__; + return nativeCreate ? data[key] !== void 0 : hasOwnProperty$d.call(data, key); + } + + var HASH_UNDEFINED$1 = "__lodash_hash_undefined__"; + function hashSet(key, value) { + var data = this.__data__; + this.size += this.has(key) ? 0 : 1; + data[key] = nativeCreate && value === void 0 ? HASH_UNDEFINED$1 : value; + return this; + } + + function Hash(entries) { + var index = -1, length = entries == null ? 0 : entries.length; + this.clear(); + while (++index < length) { + var entry = entries[index]; + this.set(entry[0], entry[1]); + } + } + Hash.prototype.clear = hashClear; + Hash.prototype["delete"] = hashDelete; + Hash.prototype.get = hashGet; + Hash.prototype.has = hashHas; + Hash.prototype.set = hashSet; + + function listCacheClear() { + this.__data__ = []; + this.size = 0; + } + + function assocIndexOf(array, key) { + var length = array.length; + while (length--) { + if (eq(array[length][0], key)) { + return length; + } + } + return -1; + } + + var arrayProto$5 = Array.prototype; + var splice$2 = arrayProto$5.splice; + function listCacheDelete(key) { + var data = this.__data__, index = assocIndexOf(data, key); + if (index < 0) { + return false; + } + var lastIndex = data.length - 1; + if (index == lastIndex) { + data.pop(); + } else { + splice$2.call(data, index, 1); + } + --this.size; + return true; + } + + function listCacheGet(key) { + var data = this.__data__, index = assocIndexOf(data, key); + return index < 0 ? void 0 : data[index][1]; + } + + function listCacheHas(key) { + return assocIndexOf(this.__data__, key) > -1; + } + + function listCacheSet(key, value) { + var data = this.__data__, index = assocIndexOf(data, key); + if (index < 0) { + ++this.size; + data.push([key, value]); + } else { + data[index][1] = value; + } + return this; + } + + function ListCache(entries) { + var index = -1, length = entries == null ? 0 : entries.length; + this.clear(); + while (++index < length) { + var entry = entries[index]; + this.set(entry[0], entry[1]); + } + } + ListCache.prototype.clear = listCacheClear; + ListCache.prototype["delete"] = listCacheDelete; + ListCache.prototype.get = listCacheGet; + ListCache.prototype.has = listCacheHas; + ListCache.prototype.set = listCacheSet; + + var Map$1 = getNative(root, "Map"); + + function mapCacheClear() { + this.size = 0; + this.__data__ = { + "hash": new Hash(), + "map": new (Map$1 || ListCache)(), + "string": new Hash() + }; + } + + function isKeyable(value) { + var type = typeof value; + return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value !== "__proto__" : value === null; + } + + function getMapData(map, key) { + var data = map.__data__; + return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map; + } + + function mapCacheDelete(key) { + var result = getMapData(this, key)["delete"](key); + this.size -= result ? 1 : 0; + return result; + } + + function mapCacheGet(key) { + return getMapData(this, key).get(key); + } + + function mapCacheHas(key) { + return getMapData(this, key).has(key); + } + + function mapCacheSet(key, value) { + var data = getMapData(this, key), size = data.size; + data.set(key, value); + this.size += data.size == size ? 0 : 1; + return this; + } + + function MapCache(entries) { + var index = -1, length = entries == null ? 0 : entries.length; + this.clear(); + while (++index < length) { + var entry = entries[index]; + this.set(entry[0], entry[1]); + } + } + MapCache.prototype.clear = mapCacheClear; + MapCache.prototype["delete"] = mapCacheDelete; + MapCache.prototype.get = mapCacheGet; + MapCache.prototype.has = mapCacheHas; + MapCache.prototype.set = mapCacheSet; + + var FUNC_ERROR_TEXT$9 = "Expected a function"; + function memoize(func, resolver) { + if (typeof func != "function" || resolver != null && typeof resolver != "function") { + throw new TypeError(FUNC_ERROR_TEXT$9); + } + var memoized = function() { + var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache; + if (cache.has(key)) { + return cache.get(key); + } + var result = func.apply(this, args); + memoized.cache = cache.set(key, result) || cache; + return result; + }; + memoized.cache = new (memoize.Cache || MapCache)(); + return memoized; + } + memoize.Cache = MapCache; + + var MAX_MEMOIZE_SIZE = 500; + function memoizeCapped(func) { + var result = memoize(func, function(key) { + if (cache.size === MAX_MEMOIZE_SIZE) { + cache.clear(); + } + return key; + }); + var cache = result.cache; + return result; + } + + var rePropName = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g; + var reEscapeChar = /\\(\\)?/g; + var stringToPath = memoizeCapped(function(string) { + var result = []; + if (string.charCodeAt(0) === 46) { + result.push(""); + } + string.replace(rePropName, function(match, number, quote, subString) { + result.push(quote ? subString.replace(reEscapeChar, "$1") : number || match); + }); + return result; + }); + + function toString(value) { + return value == null ? "" : baseToString(value); + } + + function castPath(value, object) { + if (isArray(value)) { + return value; + } + return isKey(value, object) ? [value] : stringToPath(toString(value)); + } + + var INFINITY$3 = 1 / 0; + function toKey(value) { + if (typeof value == "string" || isSymbol(value)) { + return value; + } + var result = value + ""; + return result == "0" && 1 / value == -INFINITY$3 ? "-0" : result; + } + + function baseGet(object, path) { + path = castPath(path, object); + var index = 0, length = path.length; + while (object != null && index < length) { + object = object[toKey(path[index++])]; + } + return index && index == length ? object : void 0; + } + + function get(object, path, defaultValue) { + var result = object == null ? void 0 : baseGet(object, path); + return result === void 0 ? defaultValue : result; + } + + function baseAt(object, paths) { + var index = -1, length = paths.length, result = Array(length), skip = object == null; + while (++index < length) { + result[index] = skip ? void 0 : get(object, paths[index]); + } + return result; + } + + function arrayPush(array, values) { + var index = -1, length = values.length, offset = array.length; + while (++index < length) { + array[offset + index] = values[index]; + } + return array; + } + + var spreadableSymbol = Symbol$1 ? Symbol$1.isConcatSpreadable : void 0; + function isFlattenable(value) { + return isArray(value) || isArguments(value) || !!(spreadableSymbol && value && value[spreadableSymbol]); + } + + function baseFlatten(array, depth, predicate, isStrict, result) { + var index = -1, length = array.length; + predicate || (predicate = isFlattenable); + result || (result = []); + while (++index < length) { + var value = array[index]; + if (depth > 0 && predicate(value)) { + if (depth > 1) { + baseFlatten(value, depth - 1, predicate, isStrict, result); + } else { + arrayPush(result, value); + } + } else if (!isStrict) { + result[result.length] = value; + } + } + return result; + } + + function flatten(array) { + var length = array == null ? 0 : array.length; + return length ? baseFlatten(array, 1) : []; + } + + function flatRest(func) { + return setToString(overRest(func, void 0, flatten), func + ""); + } + + var at$1 = flatRest(baseAt); + + var getPrototype = overArg(Object.getPrototypeOf, Object); + + var objectTag$3 = "[object Object]"; + var funcProto = Function.prototype; + var objectProto$e = Object.prototype; + var funcToString = funcProto.toString; + var hasOwnProperty$c = objectProto$e.hasOwnProperty; + var objectCtorString = funcToString.call(Object); + function isPlainObject(value) { + if (!isObjectLike(value) || baseGetTag(value) != objectTag$3) { + return false; + } + var proto = getPrototype(value); + if (proto === null) { + return true; + } + var Ctor = hasOwnProperty$c.call(proto, "constructor") && proto.constructor; + return typeof Ctor == "function" && Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString; + } + + var domExcTag = "[object DOMException]"; + var errorTag$2 = "[object Error]"; + function isError(value) { + if (!isObjectLike(value)) { + return false; + } + var tag = baseGetTag(value); + return tag == errorTag$2 || tag == domExcTag || typeof value.message == "string" && typeof value.name == "string" && !isPlainObject(value); + } + + var attempt = baseRest(function(func, args) { + try { + return apply(func, void 0, args); + } catch (e) { + return isError(e) ? e : new Error(e); + } + }); + + var FUNC_ERROR_TEXT$8 = "Expected a function"; + function before(n, func) { + var result; + if (typeof func != "function") { + throw new TypeError(FUNC_ERROR_TEXT$8); + } + n = toInteger(n); + return function() { + if (--n > 0) { + result = func.apply(this, arguments); + } + if (n <= 1) { + func = void 0; + } + return result; + }; + } + + var WRAP_BIND_FLAG$1 = 1; + var WRAP_PARTIAL_FLAG$3 = 32; + var bind = baseRest(function(func, thisArg, partials) { + var bitmask = WRAP_BIND_FLAG$1; + if (partials.length) { + var holders = replaceHolders(partials, getHolder(bind)); + bitmask |= WRAP_PARTIAL_FLAG$3; + } + return createWrap(func, bitmask, thisArg, partials, holders); + }); + bind.placeholder = {}; + + var bindAll = flatRest(function(object, methodNames) { + arrayEach(methodNames, function(key) { + key = toKey(key); + baseAssignValue(object, key, bind(object[key], object)); + }); + return object; + }); + + var WRAP_BIND_FLAG = 1; + var WRAP_BIND_KEY_FLAG$1 = 2; + var WRAP_PARTIAL_FLAG$2 = 32; + var bindKey = baseRest(function(object, key, partials) { + var bitmask = WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG$1; + if (partials.length) { + var holders = replaceHolders(partials, getHolder(bindKey)); + bitmask |= WRAP_PARTIAL_FLAG$2; + } + return createWrap(key, bitmask, object, partials, holders); + }); + bindKey.placeholder = {}; + + function baseSlice(array, start, end) { + var index = -1, length = array.length; + if (start < 0) { + start = -start > length ? 0 : length + start; + } + end = end > length ? length : end; + if (end < 0) { + end += length; + } + length = start > end ? 0 : end - start >>> 0; + start >>>= 0; + var result = Array(length); + while (++index < length) { + result[index] = array[index + start]; + } + return result; + } + + function castSlice(array, start, end) { + var length = array.length; + end = end === void 0 ? length : end; + return !start && end >= length ? array : baseSlice(array, start, end); + } + + var rsAstralRange$3 = "\\ud800-\\udfff"; + var rsComboMarksRange$4 = "\\u0300-\\u036f"; + var reComboHalfMarksRange$4 = "\\ufe20-\\ufe2f"; + var rsComboSymbolsRange$4 = "\\u20d0-\\u20ff"; + var rsComboRange$4 = rsComboMarksRange$4 + reComboHalfMarksRange$4 + rsComboSymbolsRange$4; + var rsVarRange$3 = "\\ufe0e\\ufe0f"; + var rsZWJ$3 = "\\u200d"; + var reHasUnicode = RegExp("[" + rsZWJ$3 + rsAstralRange$3 + rsComboRange$4 + rsVarRange$3 + "]"); + function hasUnicode(string) { + return reHasUnicode.test(string); + } + + function asciiToArray(string) { + return string.split(""); + } + + var rsAstralRange$2 = "\\ud800-\\udfff"; + var rsComboMarksRange$3 = "\\u0300-\\u036f"; + var reComboHalfMarksRange$3 = "\\ufe20-\\ufe2f"; + var rsComboSymbolsRange$3 = "\\u20d0-\\u20ff"; + var rsComboRange$3 = rsComboMarksRange$3 + reComboHalfMarksRange$3 + rsComboSymbolsRange$3; + var rsVarRange$2 = "\\ufe0e\\ufe0f"; + var rsAstral$1 = "[" + rsAstralRange$2 + "]"; + var rsCombo$3 = "[" + rsComboRange$3 + "]"; + var rsFitz$2 = "\\ud83c[\\udffb-\\udfff]"; + var rsModifier$2 = "(?:" + rsCombo$3 + "|" + rsFitz$2 + ")"; + var rsNonAstral$2 = "[^" + rsAstralRange$2 + "]"; + var rsRegional$2 = "(?:\\ud83c[\\udde6-\\uddff]){2}"; + var rsSurrPair$2 = "[\\ud800-\\udbff][\\udc00-\\udfff]"; + var rsZWJ$2 = "\\u200d"; + var reOptMod$2 = rsModifier$2 + "?"; + var rsOptVar$2 = "[" + rsVarRange$2 + "]?"; + var rsOptJoin$2 = "(?:" + rsZWJ$2 + "(?:" + [rsNonAstral$2, rsRegional$2, rsSurrPair$2].join("|") + ")" + rsOptVar$2 + reOptMod$2 + ")*"; + var rsSeq$2 = rsOptVar$2 + reOptMod$2 + rsOptJoin$2; + var rsSymbol$1 = "(?:" + [rsNonAstral$2 + rsCombo$3 + "?", rsCombo$3, rsRegional$2, rsSurrPair$2, rsAstral$1].join("|") + ")"; + var reUnicode$1 = RegExp(rsFitz$2 + "(?=" + rsFitz$2 + ")|" + rsSymbol$1 + rsSeq$2, "g"); + function unicodeToArray(string) { + return string.match(reUnicode$1) || []; + } + + function stringToArray(string) { + return hasUnicode(string) ? unicodeToArray(string) : asciiToArray(string); + } + + function createCaseFirst(methodName) { + return function(string) { + string = toString(string); + var strSymbols = hasUnicode(string) ? stringToArray(string) : void 0; + var chr = strSymbols ? strSymbols[0] : string.charAt(0); + var trailing = strSymbols ? castSlice(strSymbols, 1).join("") : string.slice(1); + return chr[methodName]() + trailing; + }; + } + + var upperFirst = createCaseFirst("toUpperCase"); + + function capitalize$1(string) { + return upperFirst(toString(string).toLowerCase()); + } + + function arrayReduce(array, iteratee, accumulator, initAccum) { + var index = -1, length = array == null ? 0 : array.length; + if (initAccum && length) { + accumulator = array[++index]; + } + while (++index < length) { + accumulator = iteratee(accumulator, array[index], index, array); + } + return accumulator; + } + + function basePropertyOf(object) { + return function(key) { + return object == null ? void 0 : object[key]; + }; + } + + var deburredLetters = { + "\xC0": "A", + "\xC1": "A", + "\xC2": "A", + "\xC3": "A", + "\xC4": "A", + "\xC5": "A", + "\xE0": "a", + "\xE1": "a", + "\xE2": "a", + "\xE3": "a", + "\xE4": "a", + "\xE5": "a", + "\xC7": "C", + "\xE7": "c", + "\xD0": "D", + "\xF0": "d", + "\xC8": "E", + "\xC9": "E", + "\xCA": "E", + "\xCB": "E", + "\xE8": "e", + "\xE9": "e", + "\xEA": "e", + "\xEB": "e", + "\xCC": "I", + "\xCD": "I", + "\xCE": "I", + "\xCF": "I", + "\xEC": "i", + "\xED": "i", + "\xEE": "i", + "\xEF": "i", + "\xD1": "N", + "\xF1": "n", + "\xD2": "O", + "\xD3": "O", + "\xD4": "O", + "\xD5": "O", + "\xD6": "O", + "\xD8": "O", + "\xF2": "o", + "\xF3": "o", + "\xF4": "o", + "\xF5": "o", + "\xF6": "o", + "\xF8": "o", + "\xD9": "U", + "\xDA": "U", + "\xDB": "U", + "\xDC": "U", + "\xF9": "u", + "\xFA": "u", + "\xFB": "u", + "\xFC": "u", + "\xDD": "Y", + "\xFD": "y", + "\xFF": "y", + "\xC6": "Ae", + "\xE6": "ae", + "\xDE": "Th", + "\xFE": "th", + "\xDF": "ss", + "\u0100": "A", + "\u0102": "A", + "\u0104": "A", + "\u0101": "a", + "\u0103": "a", + "\u0105": "a", + "\u0106": "C", + "\u0108": "C", + "\u010A": "C", + "\u010C": "C", + "\u0107": "c", + "\u0109": "c", + "\u010B": "c", + "\u010D": "c", + "\u010E": "D", + "\u0110": "D", + "\u010F": "d", + "\u0111": "d", + "\u0112": "E", + "\u0114": "E", + "\u0116": "E", + "\u0118": "E", + "\u011A": "E", + "\u0113": "e", + "\u0115": "e", + "\u0117": "e", + "\u0119": "e", + "\u011B": "e", + "\u011C": "G", + "\u011E": "G", + "\u0120": "G", + "\u0122": "G", + "\u011D": "g", + "\u011F": "g", + "\u0121": "g", + "\u0123": "g", + "\u0124": "H", + "\u0126": "H", + "\u0125": "h", + "\u0127": "h", + "\u0128": "I", + "\u012A": "I", + "\u012C": "I", + "\u012E": "I", + "\u0130": "I", + "\u0129": "i", + "\u012B": "i", + "\u012D": "i", + "\u012F": "i", + "\u0131": "i", + "\u0134": "J", + "\u0135": "j", + "\u0136": "K", + "\u0137": "k", + "\u0138": "k", + "\u0139": "L", + "\u013B": "L", + "\u013D": "L", + "\u013F": "L", + "\u0141": "L", + "\u013A": "l", + "\u013C": "l", + "\u013E": "l", + "\u0140": "l", + "\u0142": "l", + "\u0143": "N", + "\u0145": "N", + "\u0147": "N", + "\u014A": "N", + "\u0144": "n", + "\u0146": "n", + "\u0148": "n", + "\u014B": "n", + "\u014C": "O", + "\u014E": "O", + "\u0150": "O", + "\u014D": "o", + "\u014F": "o", + "\u0151": "o", + "\u0154": "R", + "\u0156": "R", + "\u0158": "R", + "\u0155": "r", + "\u0157": "r", + "\u0159": "r", + "\u015A": "S", + "\u015C": "S", + "\u015E": "S", + "\u0160": "S", + "\u015B": "s", + "\u015D": "s", + "\u015F": "s", + "\u0161": "s", + "\u0162": "T", + "\u0164": "T", + "\u0166": "T", + "\u0163": "t", + "\u0165": "t", + "\u0167": "t", + "\u0168": "U", + "\u016A": "U", + "\u016C": "U", + "\u016E": "U", + "\u0170": "U", + "\u0172": "U", + "\u0169": "u", + "\u016B": "u", + "\u016D": "u", + "\u016F": "u", + "\u0171": "u", + "\u0173": "u", + "\u0174": "W", + "\u0175": "w", + "\u0176": "Y", + "\u0177": "y", + "\u0178": "Y", + "\u0179": "Z", + "\u017B": "Z", + "\u017D": "Z", + "\u017A": "z", + "\u017C": "z", + "\u017E": "z", + "\u0132": "IJ", + "\u0133": "ij", + "\u0152": "Oe", + "\u0153": "oe", + "\u0149": "'n", + "\u017F": "s" + }; + var deburrLetter = basePropertyOf(deburredLetters); + + var reLatin = /[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g; + var rsComboMarksRange$2 = "\\u0300-\\u036f"; + var reComboHalfMarksRange$2 = "\\ufe20-\\ufe2f"; + var rsComboSymbolsRange$2 = "\\u20d0-\\u20ff"; + var rsComboRange$2 = rsComboMarksRange$2 + reComboHalfMarksRange$2 + rsComboSymbolsRange$2; + var rsCombo$2 = "[" + rsComboRange$2 + "]"; + var reComboMark = RegExp(rsCombo$2, "g"); + function deburr(string) { + string = toString(string); + return string && string.replace(reLatin, deburrLetter).replace(reComboMark, ""); + } + + var reAsciiWord = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g; + function asciiWords(string) { + return string.match(reAsciiWord) || []; + } + + var reHasUnicodeWord = /[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/; + function hasUnicodeWord(string) { + return reHasUnicodeWord.test(string); + } + + var rsAstralRange$1 = "\\ud800-\\udfff"; + var rsComboMarksRange$1 = "\\u0300-\\u036f"; + var reComboHalfMarksRange$1 = "\\ufe20-\\ufe2f"; + var rsComboSymbolsRange$1 = "\\u20d0-\\u20ff"; + var rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1; + var rsDingbatRange = "\\u2700-\\u27bf"; + var rsLowerRange = "a-z\\xdf-\\xf6\\xf8-\\xff"; + var rsMathOpRange = "\\xac\\xb1\\xd7\\xf7"; + var rsNonCharRange = "\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf"; + var rsPunctuationRange = "\\u2000-\\u206f"; + var rsSpaceRange = " \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000"; + var rsUpperRange = "A-Z\\xc0-\\xd6\\xd8-\\xde"; + var rsVarRange$1 = "\\ufe0e\\ufe0f"; + var rsBreakRange = rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange; + var rsApos$1 = "['\u2019]"; + var rsBreak = "[" + rsBreakRange + "]"; + var rsCombo$1 = "[" + rsComboRange$1 + "]"; + var rsDigits = "\\d+"; + var rsDingbat = "[" + rsDingbatRange + "]"; + var rsLower = "[" + rsLowerRange + "]"; + var rsMisc = "[^" + rsAstralRange$1 + rsBreakRange + rsDigits + rsDingbatRange + rsLowerRange + rsUpperRange + "]"; + var rsFitz$1 = "\\ud83c[\\udffb-\\udfff]"; + var rsModifier$1 = "(?:" + rsCombo$1 + "|" + rsFitz$1 + ")"; + var rsNonAstral$1 = "[^" + rsAstralRange$1 + "]"; + var rsRegional$1 = "(?:\\ud83c[\\udde6-\\uddff]){2}"; + var rsSurrPair$1 = "[\\ud800-\\udbff][\\udc00-\\udfff]"; + var rsUpper = "[" + rsUpperRange + "]"; + var rsZWJ$1 = "\\u200d"; + var rsMiscLower = "(?:" + rsLower + "|" + rsMisc + ")"; + var rsMiscUpper = "(?:" + rsUpper + "|" + rsMisc + ")"; + var rsOptContrLower = "(?:" + rsApos$1 + "(?:d|ll|m|re|s|t|ve))?"; + var rsOptContrUpper = "(?:" + rsApos$1 + "(?:D|LL|M|RE|S|T|VE))?"; + var reOptMod$1 = rsModifier$1 + "?"; + var rsOptVar$1 = "[" + rsVarRange$1 + "]?"; + var rsOptJoin$1 = "(?:" + rsZWJ$1 + "(?:" + [rsNonAstral$1, rsRegional$1, rsSurrPair$1].join("|") + ")" + rsOptVar$1 + reOptMod$1 + ")*"; + var rsOrdLower = "\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])"; + var rsOrdUpper = "\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])"; + var rsSeq$1 = rsOptVar$1 + reOptMod$1 + rsOptJoin$1; + var rsEmoji = "(?:" + [rsDingbat, rsRegional$1, rsSurrPair$1].join("|") + ")" + rsSeq$1; + var reUnicodeWord = RegExp([ + rsUpper + "?" + rsLower + "+" + rsOptContrLower + "(?=" + [rsBreak, rsUpper, "$"].join("|") + ")", + rsMiscUpper + "+" + rsOptContrUpper + "(?=" + [rsBreak, rsUpper + rsMiscLower, "$"].join("|") + ")", + rsUpper + "?" + rsMiscLower + "+" + rsOptContrLower, + rsUpper + "+" + rsOptContrUpper, + rsOrdUpper, + rsOrdLower, + rsDigits, + rsEmoji + ].join("|"), "g"); + function unicodeWords(string) { + return string.match(reUnicodeWord) || []; + } + + function words(string, pattern, guard) { + string = toString(string); + pattern = guard ? void 0 : pattern; + if (pattern === void 0) { + return hasUnicodeWord(string) ? unicodeWords(string) : asciiWords(string); + } + return string.match(pattern) || []; + } + + var rsApos = "['\u2019]"; + var reApos = RegExp(rsApos, "g"); + function createCompounder(callback) { + return function(string) { + return arrayReduce(words(deburr(string).replace(reApos, "")), callback, ""); + }; + } + + var camelCase = createCompounder(function(result, word, index) { + word = word.toLowerCase(); + return result + (index ? capitalize$1(word) : word); + }); + + function castArray$1() { + if (!arguments.length) { + return []; + } + var value = arguments[0]; + return isArray(value) ? value : [value]; + } + + var nativeIsFinite$1 = root.isFinite; + var nativeMin$c = Math.min; + function createRound(methodName) { + var func = Math[methodName]; + return function(number, precision) { + number = toNumber(number); + precision = precision == null ? 0 : nativeMin$c(toInteger(precision), 292); + if (precision && nativeIsFinite$1(number)) { + var pair = (toString(number) + "e").split("e"), value = func(pair[0] + "e" + (+pair[1] + precision)); + pair = (toString(value) + "e").split("e"); + return +(pair[0] + "e" + (+pair[1] - precision)); + } + return func(number); + }; + } + + var ceil = createRound("ceil"); + + function chain(value) { + var result = lodash(value); + result.__chain__ = true; + return result; + } + + var nativeCeil$3 = Math.ceil; + var nativeMax$c = Math.max; + function chunk(array, size, guard) { + if (guard ? isIterateeCall(array, size, guard) : size === void 0) { + size = 1; + } else { + size = nativeMax$c(toInteger(size), 0); + } + var length = array == null ? 0 : array.length; + if (!length || size < 1) { + return []; + } + var index = 0, resIndex = 0, result = Array(nativeCeil$3(length / size)); + while (index < length) { + result[resIndex++] = baseSlice(array, index, index += size); + } + return result; + } + + function baseClamp(number, lower, upper) { + if (number === number) { + if (upper !== void 0) { + number = number <= upper ? number : upper; + } + if (lower !== void 0) { + number = number >= lower ? number : lower; + } + } + return number; + } + + function clamp(number, lower, upper) { + if (upper === void 0) { + upper = lower; + lower = void 0; + } + if (upper !== void 0) { + upper = toNumber(upper); + upper = upper === upper ? upper : 0; + } + if (lower !== void 0) { + lower = toNumber(lower); + lower = lower === lower ? lower : 0; + } + return baseClamp(toNumber(number), lower, upper); + } + + function stackClear() { + this.__data__ = new ListCache(); + this.size = 0; + } + + function stackDelete(key) { + var data = this.__data__, result = data["delete"](key); + this.size = data.size; + return result; + } + + function stackGet(key) { + return this.__data__.get(key); + } + + function stackHas(key) { + return this.__data__.has(key); + } + + var LARGE_ARRAY_SIZE$2 = 200; + function stackSet(key, value) { + var data = this.__data__; + if (data instanceof ListCache) { + var pairs = data.__data__; + if (!Map$1 || pairs.length < LARGE_ARRAY_SIZE$2 - 1) { + pairs.push([key, value]); + this.size = ++data.size; + return this; + } + data = this.__data__ = new MapCache(pairs); + } + data.set(key, value); + this.size = data.size; + return this; + } + + function Stack(entries) { + var data = this.__data__ = new ListCache(entries); + this.size = data.size; + } + Stack.prototype.clear = stackClear; + Stack.prototype["delete"] = stackDelete; + Stack.prototype.get = stackGet; + Stack.prototype.has = stackHas; + Stack.prototype.set = stackSet; + + function baseAssign(object, source) { + return object && copyObject(source, keys(source), object); + } + + function baseAssignIn(object, source) { + return object && copyObject(source, keysIn(source), object); + } + + var freeExports = typeof exports == "object" && exports && !exports.nodeType && exports; + var freeModule = freeExports && typeof module == "object" && module && !module.nodeType && module; + var moduleExports = freeModule && freeModule.exports === freeExports; + var Buffer = moduleExports ? root.Buffer : void 0; + var allocUnsafe = Buffer ? Buffer.allocUnsafe : void 0; + function cloneBuffer(buffer, isDeep) { + if (isDeep) { + return buffer.slice(); + } + var length = buffer.length, result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length); + buffer.copy(result); + return result; + } + + function arrayFilter(array, predicate) { + var index = -1, length = array == null ? 0 : array.length, resIndex = 0, result = []; + while (++index < length) { + var value = array[index]; + if (predicate(value, index, array)) { + result[resIndex++] = value; + } + } + return result; + } + + function stubArray() { + return []; + } + + var objectProto$d = Object.prototype; + var propertyIsEnumerable = objectProto$d.propertyIsEnumerable; + var nativeGetSymbols$1 = Object.getOwnPropertySymbols; + var getSymbols = !nativeGetSymbols$1 ? stubArray : function(object) { + if (object == null) { + return []; + } + object = Object(object); + return arrayFilter(nativeGetSymbols$1(object), function(symbol) { + return propertyIsEnumerable.call(object, symbol); + }); + }; + + function copySymbols(source, object) { + return copyObject(source, getSymbols(source), object); + } + + var nativeGetSymbols = Object.getOwnPropertySymbols; + var getSymbolsIn = !nativeGetSymbols ? stubArray : function(object) { + var result = []; + while (object) { + arrayPush(result, getSymbols(object)); + object = getPrototype(object); + } + return result; + }; + + function copySymbolsIn(source, object) { + return copyObject(source, getSymbolsIn(source), object); + } + + function baseGetAllKeys(object, keysFunc, symbolsFunc) { + var result = keysFunc(object); + return isArray(object) ? result : arrayPush(result, symbolsFunc(object)); + } + + function getAllKeys(object) { + return baseGetAllKeys(object, keys, getSymbols); + } + + function getAllKeysIn(object) { + return baseGetAllKeys(object, keysIn, getSymbolsIn); + } + + var DataView = getNative(root, "DataView"); + + var Promise$1 = getNative(root, "Promise"); + + var Set$1 = getNative(root, "Set"); + + var mapTag$8 = "[object Map]"; + var objectTag$2 = "[object Object]"; + var promiseTag = "[object Promise]"; + var setTag$8 = "[object Set]"; + var weakMapTag$2 = "[object WeakMap]"; + var dataViewTag$3 = "[object DataView]"; + var dataViewCtorString = toSource(DataView); + var mapCtorString = toSource(Map$1); + var promiseCtorString = toSource(Promise$1); + var setCtorString = toSource(Set$1); + var weakMapCtorString = toSource(WeakMap); + var getTag = baseGetTag; + if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag$3 || Map$1 && getTag(new Map$1()) != mapTag$8 || Promise$1 && getTag(Promise$1.resolve()) != promiseTag || Set$1 && getTag(new Set$1()) != setTag$8 || WeakMap && getTag(new WeakMap()) != weakMapTag$2) { + getTag = function(value) { + var result = baseGetTag(value), Ctor = result == objectTag$2 ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : ""; + if (ctorString) { + switch (ctorString) { + case dataViewCtorString: + return dataViewTag$3; + case mapCtorString: + return mapTag$8; + case promiseCtorString: + return promiseTag; + case setCtorString: + return setTag$8; + case weakMapCtorString: + return weakMapTag$2; + } + } + return result; + }; + } + var getTag$1 = getTag; + + var objectProto$c = Object.prototype; + var hasOwnProperty$b = objectProto$c.hasOwnProperty; + function initCloneArray(array) { + var length = array.length, result = new array.constructor(length); + if (length && typeof array[0] == "string" && hasOwnProperty$b.call(array, "index")) { + result.index = array.index; + result.input = array.input; + } + return result; + } + + var Uint8Array = root.Uint8Array; + + function cloneArrayBuffer(arrayBuffer) { + var result = new arrayBuffer.constructor(arrayBuffer.byteLength); + new Uint8Array(result).set(new Uint8Array(arrayBuffer)); + return result; + } + + function cloneDataView(dataView, isDeep) { + var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer; + return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength); + } + + var reFlags$1 = /\w*$/; + function cloneRegExp(regexp) { + var result = new regexp.constructor(regexp.source, reFlags$1.exec(regexp)); + result.lastIndex = regexp.lastIndex; + return result; + } + + var symbolProto$1 = Symbol$1 ? Symbol$1.prototype : void 0; + var symbolValueOf$1 = symbolProto$1 ? symbolProto$1.valueOf : void 0; + function cloneSymbol(symbol) { + return symbolValueOf$1 ? Object(symbolValueOf$1.call(symbol)) : {}; + } + + function cloneTypedArray(typedArray, isDeep) { + var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer; + return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length); + } + + var boolTag$3 = "[object Boolean]"; + var dateTag$3 = "[object Date]"; + var mapTag$7 = "[object Map]"; + var numberTag$3 = "[object Number]"; + var regexpTag$3 = "[object RegExp]"; + var setTag$7 = "[object Set]"; + var stringTag$3 = "[object String]"; + var symbolTag$2 = "[object Symbol]"; + var arrayBufferTag$3 = "[object ArrayBuffer]"; + var dataViewTag$2 = "[object DataView]"; + var float32Tag$1 = "[object Float32Array]"; + var float64Tag$1 = "[object Float64Array]"; + var int8Tag$1 = "[object Int8Array]"; + var int16Tag$1 = "[object Int16Array]"; + var int32Tag$1 = "[object Int32Array]"; + var uint8Tag$1 = "[object Uint8Array]"; + var uint8ClampedTag$1 = "[object Uint8ClampedArray]"; + var uint16Tag$1 = "[object Uint16Array]"; + var uint32Tag$1 = "[object Uint32Array]"; + function initCloneByTag(object, tag, isDeep) { + var Ctor = object.constructor; + switch (tag) { + case arrayBufferTag$3: + return cloneArrayBuffer(object); + case boolTag$3: + case dateTag$3: + return new Ctor(+object); + case dataViewTag$2: + return cloneDataView(object, isDeep); + case float32Tag$1: + case float64Tag$1: + case int8Tag$1: + case int16Tag$1: + case int32Tag$1: + case uint8Tag$1: + case uint8ClampedTag$1: + case uint16Tag$1: + case uint32Tag$1: + return cloneTypedArray(object, isDeep); + case mapTag$7: + return new Ctor(); + case numberTag$3: + case stringTag$3: + return new Ctor(object); + case regexpTag$3: + return cloneRegExp(object); + case setTag$7: + return new Ctor(); + case symbolTag$2: + return cloneSymbol(object); + } + } + + function initCloneObject(object) { + return typeof object.constructor == "function" && !isPrototype(object) ? baseCreate(getPrototype(object)) : {}; + } + + var mapTag$6 = "[object Map]"; + function baseIsMap(value) { + return isObjectLike(value) && getTag$1(value) == mapTag$6; + } + + var nodeIsMap = nodeUtil && nodeUtil.isMap; + var isMap = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap; + + var setTag$6 = "[object Set]"; + function baseIsSet(value) { + return isObjectLike(value) && getTag$1(value) == setTag$6; + } + + var nodeIsSet = nodeUtil && nodeUtil.isSet; + var isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet; + + var CLONE_DEEP_FLAG$7 = 1; + var CLONE_FLAT_FLAG$1 = 2; + var CLONE_SYMBOLS_FLAG$5 = 4; + var argsTag$1 = "[object Arguments]"; + var arrayTag$1 = "[object Array]"; + var boolTag$2 = "[object Boolean]"; + var dateTag$2 = "[object Date]"; + var errorTag$1 = "[object Error]"; + var funcTag = "[object Function]"; + var genTag = "[object GeneratorFunction]"; + var mapTag$5 = "[object Map]"; + var numberTag$2 = "[object Number]"; + var objectTag$1 = "[object Object]"; + var regexpTag$2 = "[object RegExp]"; + var setTag$5 = "[object Set]"; + var stringTag$2 = "[object String]"; + var symbolTag$1 = "[object Symbol]"; + var weakMapTag$1 = "[object WeakMap]"; + var arrayBufferTag$2 = "[object ArrayBuffer]"; + var dataViewTag$1 = "[object DataView]"; + var float32Tag = "[object Float32Array]"; + var float64Tag = "[object Float64Array]"; + var int8Tag = "[object Int8Array]"; + var int16Tag = "[object Int16Array]"; + var int32Tag = "[object Int32Array]"; + var uint8Tag = "[object Uint8Array]"; + var uint8ClampedTag = "[object Uint8ClampedArray]"; + var uint16Tag = "[object Uint16Array]"; + var uint32Tag = "[object Uint32Array]"; + var cloneableTags = {}; + cloneableTags[argsTag$1] = cloneableTags[arrayTag$1] = cloneableTags[arrayBufferTag$2] = cloneableTags[dataViewTag$1] = cloneableTags[boolTag$2] = cloneableTags[dateTag$2] = cloneableTags[float32Tag] = cloneableTags[float64Tag] = cloneableTags[int8Tag] = cloneableTags[int16Tag] = cloneableTags[int32Tag] = cloneableTags[mapTag$5] = cloneableTags[numberTag$2] = cloneableTags[objectTag$1] = cloneableTags[regexpTag$2] = cloneableTags[setTag$5] = cloneableTags[stringTag$2] = cloneableTags[symbolTag$1] = cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] = cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true; + cloneableTags[errorTag$1] = cloneableTags[funcTag] = cloneableTags[weakMapTag$1] = false; + function baseClone(value, bitmask, customizer, key, object, stack) { + var result, isDeep = bitmask & CLONE_DEEP_FLAG$7, isFlat = bitmask & CLONE_FLAT_FLAG$1, isFull = bitmask & CLONE_SYMBOLS_FLAG$5; + if (customizer) { + result = object ? customizer(value, key, object, stack) : customizer(value); + } + if (result !== void 0) { + return result; + } + if (!isObject(value)) { + return value; + } + var isArr = isArray(value); + if (isArr) { + result = initCloneArray(value); + if (!isDeep) { + return copyArray(value, result); + } + } else { + var tag = getTag$1(value), isFunc = tag == funcTag || tag == genTag; + if (isBuffer(value)) { + return cloneBuffer(value, isDeep); + } + if (tag == objectTag$1 || tag == argsTag$1 || isFunc && !object) { + result = isFlat || isFunc ? {} : initCloneObject(value); + if (!isDeep) { + return isFlat ? copySymbolsIn(value, baseAssignIn(result, value)) : copySymbols(value, baseAssign(result, value)); + } + } else { + if (!cloneableTags[tag]) { + return object ? value : {}; + } + result = initCloneByTag(value, tag, isDeep); + } + } + stack || (stack = new Stack()); + var stacked = stack.get(value); + if (stacked) { + return stacked; + } + stack.set(value, result); + if (isSet(value)) { + value.forEach(function(subValue) { + result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack)); + }); + } else if (isMap(value)) { + value.forEach(function(subValue, key2) { + result.set(key2, baseClone(subValue, bitmask, customizer, key2, value, stack)); + }); + } + var keysFunc = isFull ? isFlat ? getAllKeysIn : getAllKeys : isFlat ? keysIn : keys; + var props = isArr ? void 0 : keysFunc(value); + arrayEach(props || value, function(subValue, key2) { + if (props) { + key2 = subValue; + subValue = value[key2]; + } + assignValue(result, key2, baseClone(subValue, bitmask, customizer, key2, value, stack)); + }); + return result; + } + + var CLONE_SYMBOLS_FLAG$4 = 4; + function clone(value) { + return baseClone(value, CLONE_SYMBOLS_FLAG$4); + } + + var CLONE_DEEP_FLAG$6 = 1; + var CLONE_SYMBOLS_FLAG$3 = 4; + function cloneDeep(value) { + return baseClone(value, CLONE_DEEP_FLAG$6 | CLONE_SYMBOLS_FLAG$3); + } + + var CLONE_DEEP_FLAG$5 = 1; + var CLONE_SYMBOLS_FLAG$2 = 4; + function cloneDeepWith(value, customizer) { + customizer = typeof customizer == "function" ? customizer : void 0; + return baseClone(value, CLONE_DEEP_FLAG$5 | CLONE_SYMBOLS_FLAG$2, customizer); + } + + var CLONE_SYMBOLS_FLAG$1 = 4; + function cloneWith(value, customizer) { + customizer = typeof customizer == "function" ? customizer : void 0; + return baseClone(value, CLONE_SYMBOLS_FLAG$1, customizer); + } + + function wrapperCommit() { + return new LodashWrapper(this.value(), this.__chain__); + } + + function compact(array) { + var index = -1, length = array == null ? 0 : array.length, resIndex = 0, result = []; + while (++index < length) { + var value = array[index]; + if (value) { + result[resIndex++] = value; + } + } + return result; + } + + function concat() { + var length = arguments.length; + if (!length) { + return []; + } + var args = Array(length - 1), array = arguments[0], index = length; + while (index--) { + args[index - 1] = arguments[index]; + } + return arrayPush(isArray(array) ? copyArray(array) : [array], baseFlatten(args, 1)); + } + + var HASH_UNDEFINED = "__lodash_hash_undefined__"; + function setCacheAdd(value) { + this.__data__.set(value, HASH_UNDEFINED); + return this; + } + + function setCacheHas(value) { + return this.__data__.has(value); + } + + function SetCache(values) { + var index = -1, length = values == null ? 0 : values.length; + this.__data__ = new MapCache(); + while (++index < length) { + this.add(values[index]); + } + } + SetCache.prototype.add = SetCache.prototype.push = setCacheAdd; + SetCache.prototype.has = setCacheHas; + + function arraySome(array, predicate) { + var index = -1, length = array == null ? 0 : array.length; + while (++index < length) { + if (predicate(array[index], index, array)) { + return true; + } + } + return false; + } + + function cacheHas(cache, key) { + return cache.has(key); + } + + var COMPARE_PARTIAL_FLAG$5 = 1; + var COMPARE_UNORDERED_FLAG$3 = 2; + function equalArrays(array, other, bitmask, customizer, equalFunc, stack) { + var isPartial = bitmask & COMPARE_PARTIAL_FLAG$5, arrLength = array.length, othLength = other.length; + if (arrLength != othLength && !(isPartial && othLength > arrLength)) { + return false; + } + var arrStacked = stack.get(array); + var othStacked = stack.get(other); + if (arrStacked && othStacked) { + return arrStacked == other && othStacked == array; + } + var index = -1, result = true, seen = bitmask & COMPARE_UNORDERED_FLAG$3 ? new SetCache() : void 0; + stack.set(array, other); + stack.set(other, array); + while (++index < arrLength) { + var arrValue = array[index], othValue = other[index]; + if (customizer) { + var compared = isPartial ? customizer(othValue, arrValue, index, other, array, stack) : customizer(arrValue, othValue, index, array, other, stack); + } + if (compared !== void 0) { + if (compared) { + continue; + } + result = false; + break; + } + if (seen) { + if (!arraySome(other, function(othValue2, othIndex) { + if (!cacheHas(seen, othIndex) && (arrValue === othValue2 || equalFunc(arrValue, othValue2, bitmask, customizer, stack))) { + return seen.push(othIndex); + } + })) { + result = false; + break; + } + } else if (!(arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) { + result = false; + break; + } + } + stack["delete"](array); + stack["delete"](other); + return result; + } + + function mapToArray(map) { + var index = -1, result = Array(map.size); + map.forEach(function(value, key) { + result[++index] = [key, value]; + }); + return result; + } + + function setToArray(set) { + var index = -1, result = Array(set.size); + set.forEach(function(value) { + result[++index] = value; + }); + return result; + } + + var COMPARE_PARTIAL_FLAG$4 = 1; + var COMPARE_UNORDERED_FLAG$2 = 2; + var boolTag$1 = "[object Boolean]"; + var dateTag$1 = "[object Date]"; + var errorTag = "[object Error]"; + var mapTag$4 = "[object Map]"; + var numberTag$1 = "[object Number]"; + var regexpTag$1 = "[object RegExp]"; + var setTag$4 = "[object Set]"; + var stringTag$1 = "[object String]"; + var symbolTag = "[object Symbol]"; + var arrayBufferTag$1 = "[object ArrayBuffer]"; + var dataViewTag = "[object DataView]"; + var symbolProto = Symbol$1 ? Symbol$1.prototype : void 0; + var symbolValueOf = symbolProto ? symbolProto.valueOf : void 0; + function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) { + switch (tag) { + case dataViewTag: + if (object.byteLength != other.byteLength || object.byteOffset != other.byteOffset) { + return false; + } + object = object.buffer; + other = other.buffer; + case arrayBufferTag$1: + if (object.byteLength != other.byteLength || !equalFunc(new Uint8Array(object), new Uint8Array(other))) { + return false; + } + return true; + case boolTag$1: + case dateTag$1: + case numberTag$1: + return eq(+object, +other); + case errorTag: + return object.name == other.name && object.message == other.message; + case regexpTag$1: + case stringTag$1: + return object == other + ""; + case mapTag$4: + var convert = mapToArray; + case setTag$4: + var isPartial = bitmask & COMPARE_PARTIAL_FLAG$4; + convert || (convert = setToArray); + if (object.size != other.size && !isPartial) { + return false; + } + var stacked = stack.get(object); + if (stacked) { + return stacked == other; + } + bitmask |= COMPARE_UNORDERED_FLAG$2; + stack.set(object, other); + var result = equalArrays(convert(object), convert(other), bitmask, customizer, equalFunc, stack); + stack["delete"](object); + return result; + case symbolTag: + if (symbolValueOf) { + return symbolValueOf.call(object) == symbolValueOf.call(other); + } + } + return false; + } + + var COMPARE_PARTIAL_FLAG$3 = 1; + var objectProto$b = Object.prototype; + var hasOwnProperty$a = objectProto$b.hasOwnProperty; + function equalObjects(object, other, bitmask, customizer, equalFunc, stack) { + var isPartial = bitmask & COMPARE_PARTIAL_FLAG$3, objProps = getAllKeys(object), objLength = objProps.length, othProps = getAllKeys(other), othLength = othProps.length; + if (objLength != othLength && !isPartial) { + return false; + } + var index = objLength; + while (index--) { + var key = objProps[index]; + if (!(isPartial ? key in other : hasOwnProperty$a.call(other, key))) { + return false; + } + } + var objStacked = stack.get(object); + var othStacked = stack.get(other); + if (objStacked && othStacked) { + return objStacked == other && othStacked == object; + } + var result = true; + stack.set(object, other); + stack.set(other, object); + var skipCtor = isPartial; + while (++index < objLength) { + key = objProps[index]; + var objValue = object[key], othValue = other[key]; + if (customizer) { + var compared = isPartial ? customizer(othValue, objValue, key, other, object, stack) : customizer(objValue, othValue, key, object, other, stack); + } + if (!(compared === void 0 ? objValue === othValue || equalFunc(objValue, othValue, bitmask, customizer, stack) : compared)) { + result = false; + break; + } + skipCtor || (skipCtor = key == "constructor"); + } + if (result && !skipCtor) { + var objCtor = object.constructor, othCtor = other.constructor; + if (objCtor != othCtor && ("constructor" in object && "constructor" in other) && !(typeof objCtor == "function" && objCtor instanceof objCtor && typeof othCtor == "function" && othCtor instanceof othCtor)) { + result = false; + } + } + stack["delete"](object); + stack["delete"](other); + return result; + } + + var COMPARE_PARTIAL_FLAG$2 = 1; + var argsTag = "[object Arguments]"; + var arrayTag = "[object Array]"; + var objectTag = "[object Object]"; + var objectProto$a = Object.prototype; + var hasOwnProperty$9 = objectProto$a.hasOwnProperty; + function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) { + var objIsArr = isArray(object), othIsArr = isArray(other), objTag = objIsArr ? arrayTag : getTag$1(object), othTag = othIsArr ? arrayTag : getTag$1(other); + objTag = objTag == argsTag ? objectTag : objTag; + othTag = othTag == argsTag ? objectTag : othTag; + var objIsObj = objTag == objectTag, othIsObj = othTag == objectTag, isSameTag = objTag == othTag; + if (isSameTag && isBuffer(object)) { + if (!isBuffer(other)) { + return false; + } + objIsArr = true; + objIsObj = false; + } + if (isSameTag && !objIsObj) { + stack || (stack = new Stack()); + return objIsArr || isTypedArray(object) ? equalArrays(object, other, bitmask, customizer, equalFunc, stack) : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack); + } + if (!(bitmask & COMPARE_PARTIAL_FLAG$2)) { + var objIsWrapped = objIsObj && hasOwnProperty$9.call(object, "__wrapped__"), othIsWrapped = othIsObj && hasOwnProperty$9.call(other, "__wrapped__"); + if (objIsWrapped || othIsWrapped) { + var objUnwrapped = objIsWrapped ? object.value() : object, othUnwrapped = othIsWrapped ? other.value() : other; + stack || (stack = new Stack()); + return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack); + } + } + if (!isSameTag) { + return false; + } + stack || (stack = new Stack()); + return equalObjects(object, other, bitmask, customizer, equalFunc, stack); + } + + function baseIsEqual(value, other, bitmask, customizer, stack) { + if (value === other) { + return true; + } + if (value == null || other == null || !isObjectLike(value) && !isObjectLike(other)) { + return value !== value && other !== other; + } + return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack); + } + + var COMPARE_PARTIAL_FLAG$1 = 1; + var COMPARE_UNORDERED_FLAG$1 = 2; + function baseIsMatch(object, source, matchData, customizer) { + var index = matchData.length, length = index, noCustomizer = !customizer; + if (object == null) { + return !length; + } + object = Object(object); + while (index--) { + var data = matchData[index]; + if (noCustomizer && data[2] ? data[1] !== object[data[0]] : !(data[0] in object)) { + return false; + } + } + while (++index < length) { + data = matchData[index]; + var key = data[0], objValue = object[key], srcValue = data[1]; + if (noCustomizer && data[2]) { + if (objValue === void 0 && !(key in object)) { + return false; + } + } else { + var stack = new Stack(); + if (customizer) { + var result = customizer(objValue, srcValue, key, object, source, stack); + } + if (!(result === void 0 ? baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG$1 | COMPARE_UNORDERED_FLAG$1, customizer, stack) : result)) { + return false; + } + } + } + return true; + } + + function isStrictComparable(value) { + return value === value && !isObject(value); + } + + function getMatchData(object) { + var result = keys(object), length = result.length; + while (length--) { + var key = result[length], value = object[key]; + result[length] = [key, value, isStrictComparable(value)]; + } + return result; + } + + function matchesStrictComparable(key, srcValue) { + return function(object) { + if (object == null) { + return false; + } + return object[key] === srcValue && (srcValue !== void 0 || key in Object(object)); + }; + } + + function baseMatches(source) { + var matchData = getMatchData(source); + if (matchData.length == 1 && matchData[0][2]) { + return matchesStrictComparable(matchData[0][0], matchData[0][1]); + } + return function(object) { + return object === source || baseIsMatch(object, source, matchData); + }; + } + + function baseHasIn(object, key) { + return object != null && key in Object(object); + } + + function hasPath(object, path, hasFunc) { + path = castPath(path, object); + var index = -1, length = path.length, result = false; + while (++index < length) { + var key = toKey(path[index]); + if (!(result = object != null && hasFunc(object, key))) { + break; + } + object = object[key]; + } + if (result || ++index != length) { + return result; + } + length = object == null ? 0 : object.length; + return !!length && isLength(length) && isIndex(key, length) && (isArray(object) || isArguments(object)); + } + + function hasIn(object, path) { + return object != null && hasPath(object, path, baseHasIn); + } + + var COMPARE_PARTIAL_FLAG = 1; + var COMPARE_UNORDERED_FLAG = 2; + function baseMatchesProperty(path, srcValue) { + if (isKey(path) && isStrictComparable(srcValue)) { + return matchesStrictComparable(toKey(path), srcValue); + } + return function(object) { + var objValue = get(object, path); + return objValue === void 0 && objValue === srcValue ? hasIn(object, path) : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG); + }; + } + + function baseProperty(key) { + return function(object) { + return object == null ? void 0 : object[key]; + }; + } + + function basePropertyDeep(path) { + return function(object) { + return baseGet(object, path); + }; + } + + function property(path) { + return isKey(path) ? baseProperty(toKey(path)) : basePropertyDeep(path); + } + + function baseIteratee(value) { + if (typeof value == "function") { + return value; + } + if (value == null) { + return identity; + } + if (typeof value == "object") { + return isArray(value) ? baseMatchesProperty(value[0], value[1]) : baseMatches(value); + } + return property(value); + } + + var FUNC_ERROR_TEXT$7 = "Expected a function"; + function cond(pairs) { + var length = pairs == null ? 0 : pairs.length, toIteratee = baseIteratee; + pairs = !length ? [] : arrayMap(pairs, function(pair) { + if (typeof pair[1] != "function") { + throw new TypeError(FUNC_ERROR_TEXT$7); + } + return [toIteratee(pair[0]), pair[1]]; + }); + return baseRest(function(args) { + var index = -1; + while (++index < length) { + var pair = pairs[index]; + if (apply(pair[0], this, args)) { + return apply(pair[1], this, args); + } + } + }); + } + + function baseConformsTo(object, source, props) { + var length = props.length; + if (object == null) { + return !length; + } + object = Object(object); + while (length--) { + var key = props[length], predicate = source[key], value = object[key]; + if (value === void 0 && !(key in object) || !predicate(value)) { + return false; + } + } + return true; + } + + function baseConforms(source) { + var props = keys(source); + return function(object) { + return baseConformsTo(object, source, props); + }; + } + + var CLONE_DEEP_FLAG$4 = 1; + function conforms(source) { + return baseConforms(baseClone(source, CLONE_DEEP_FLAG$4)); + } + + function conformsTo(object, source) { + return source == null || baseConformsTo(object, source, keys(source)); + } + + function arrayAggregator(array, setter, iteratee, accumulator) { + var index = -1, length = array == null ? 0 : array.length; + while (++index < length) { + var value = array[index]; + setter(accumulator, value, iteratee(value), array); + } + return accumulator; + } + + function createBaseFor(fromRight) { + return function(object, iteratee, keysFunc) { + var index = -1, iterable = Object(object), props = keysFunc(object), length = props.length; + while (length--) { + var key = props[fromRight ? length : ++index]; + if (iteratee(iterable[key], key, iterable) === false) { + break; + } + } + return object; + }; + } + + var baseFor = createBaseFor(); + + function baseForOwn(object, iteratee) { + return object && baseFor(object, iteratee, keys); + } + + function createBaseEach(eachFunc, fromRight) { + return function(collection, iteratee) { + if (collection == null) { + return collection; + } + if (!isArrayLike(collection)) { + return eachFunc(collection, iteratee); + } + var length = collection.length, index = fromRight ? length : -1, iterable = Object(collection); + while (fromRight ? index-- : ++index < length) { + if (iteratee(iterable[index], index, iterable) === false) { + break; + } + } + return collection; + }; + } + + var baseEach = createBaseEach(baseForOwn); + + function baseAggregator(collection, setter, iteratee, accumulator) { + baseEach(collection, function(value, key, collection2) { + setter(accumulator, value, iteratee(value), collection2); + }); + return accumulator; + } + + function createAggregator(setter, initializer) { + return function(collection, iteratee) { + var func = isArray(collection) ? arrayAggregator : baseAggregator, accumulator = initializer ? initializer() : {}; + return func(collection, setter, baseIteratee(iteratee), accumulator); + }; + } + + var objectProto$9 = Object.prototype; + var hasOwnProperty$8 = objectProto$9.hasOwnProperty; + var countBy = createAggregator(function(result, value, key) { + if (hasOwnProperty$8.call(result, key)) { + ++result[key]; + } else { + baseAssignValue(result, key, 1); + } + }); + + function create(prototype, properties) { + var result = baseCreate(prototype); + return properties == null ? result : baseAssign(result, properties); + } + + var WRAP_CURRY_FLAG$1 = 8; + function curry(func, arity, guard) { + arity = guard ? void 0 : arity; + var result = createWrap(func, WRAP_CURRY_FLAG$1, void 0, void 0, void 0, void 0, void 0, arity); + result.placeholder = curry.placeholder; + return result; + } + curry.placeholder = {}; + + var WRAP_CURRY_RIGHT_FLAG = 16; + function curryRight(func, arity, guard) { + arity = guard ? void 0 : arity; + var result = createWrap(func, WRAP_CURRY_RIGHT_FLAG, void 0, void 0, void 0, void 0, void 0, arity); + result.placeholder = curryRight.placeholder; + return result; + } + curryRight.placeholder = {}; + + var now = function() { + return root.Date.now(); + }; + + var FUNC_ERROR_TEXT$6 = "Expected a function"; + var nativeMax$b = Math.max; + var nativeMin$b = Math.min; + function debounce(func, wait, options) { + var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true; + if (typeof func != "function") { + throw new TypeError(FUNC_ERROR_TEXT$6); + } + wait = toNumber(wait) || 0; + if (isObject(options)) { + leading = !!options.leading; + maxing = "maxWait" in options; + maxWait = maxing ? nativeMax$b(toNumber(options.maxWait) || 0, wait) : maxWait; + trailing = "trailing" in options ? !!options.trailing : trailing; + } + function invokeFunc(time) { + var args = lastArgs, thisArg = lastThis; + lastArgs = lastThis = void 0; + lastInvokeTime = time; + result = func.apply(thisArg, args); + return result; + } + function leadingEdge(time) { + lastInvokeTime = time; + timerId = setTimeout(timerExpired, wait); + return leading ? invokeFunc(time) : result; + } + function remainingWait(time) { + var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall; + return maxing ? nativeMin$b(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting; + } + function shouldInvoke(time) { + var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime; + return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait; + } + function timerExpired() { + var time = now(); + if (shouldInvoke(time)) { + return trailingEdge(time); + } + timerId = setTimeout(timerExpired, remainingWait(time)); + } + function trailingEdge(time) { + timerId = void 0; + if (trailing && lastArgs) { + return invokeFunc(time); + } + lastArgs = lastThis = void 0; + return result; + } + function cancel() { + if (timerId !== void 0) { + clearTimeout(timerId); + } + lastInvokeTime = 0; + lastArgs = lastCallTime = lastThis = timerId = void 0; + } + function flush() { + return timerId === void 0 ? result : trailingEdge(now()); + } + function debounced() { + var time = now(), isInvoking = shouldInvoke(time); + lastArgs = arguments; + lastThis = this; + lastCallTime = time; + if (isInvoking) { + if (timerId === void 0) { + return leadingEdge(lastCallTime); + } + if (maxing) { + clearTimeout(timerId); + timerId = setTimeout(timerExpired, wait); + return invokeFunc(lastCallTime); + } + } + if (timerId === void 0) { + timerId = setTimeout(timerExpired, wait); + } + return result; + } + debounced.cancel = cancel; + debounced.flush = flush; + return debounced; + } + + function defaultTo(value, defaultValue) { + return value == null || value !== value ? defaultValue : value; + } + + var objectProto$8 = Object.prototype; + var hasOwnProperty$7 = objectProto$8.hasOwnProperty; + var defaults = baseRest(function(object, sources) { + object = Object(object); + var index = -1; + var length = sources.length; + var guard = length > 2 ? sources[2] : void 0; + if (guard && isIterateeCall(sources[0], sources[1], guard)) { + length = 1; + } + while (++index < length) { + var source = sources[index]; + var props = keysIn(source); + var propsIndex = -1; + var propsLength = props.length; + while (++propsIndex < propsLength) { + var key = props[propsIndex]; + var value = object[key]; + if (value === void 0 || eq(value, objectProto$8[key]) && !hasOwnProperty$7.call(object, key)) { + object[key] = source[key]; + } + } + } + return object; + }); + + function assignMergeValue(object, key, value) { + if (value !== void 0 && !eq(object[key], value) || value === void 0 && !(key in object)) { + baseAssignValue(object, key, value); + } + } + + function isArrayLikeObject(value) { + return isObjectLike(value) && isArrayLike(value); + } + + function safeGet(object, key) { + if (key === "constructor" && typeof object[key] === "function") { + return; + } + if (key == "__proto__") { + return; + } + return object[key]; + } + + function toPlainObject(value) { + return copyObject(value, keysIn(value)); + } + + function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) { + var objValue = safeGet(object, key), srcValue = safeGet(source, key), stacked = stack.get(srcValue); + if (stacked) { + assignMergeValue(object, key, stacked); + return; + } + var newValue = customizer ? customizer(objValue, srcValue, key + "", object, source, stack) : void 0; + var isCommon = newValue === void 0; + if (isCommon) { + var isArr = isArray(srcValue), isBuff = !isArr && isBuffer(srcValue), isTyped = !isArr && !isBuff && isTypedArray(srcValue); + newValue = srcValue; + if (isArr || isBuff || isTyped) { + if (isArray(objValue)) { + newValue = objValue; + } else if (isArrayLikeObject(objValue)) { + newValue = copyArray(objValue); + } else if (isBuff) { + isCommon = false; + newValue = cloneBuffer(srcValue, true); + } else if (isTyped) { + isCommon = false; + newValue = cloneTypedArray(srcValue, true); + } else { + newValue = []; + } + } else if (isPlainObject(srcValue) || isArguments(srcValue)) { + newValue = objValue; + if (isArguments(objValue)) { + newValue = toPlainObject(objValue); + } else if (!isObject(objValue) || isFunction(objValue)) { + newValue = initCloneObject(srcValue); + } + } else { + isCommon = false; + } + } + if (isCommon) { + stack.set(srcValue, newValue); + mergeFunc(newValue, srcValue, srcIndex, customizer, stack); + stack["delete"](srcValue); + } + assignMergeValue(object, key, newValue); + } + + function baseMerge(object, source, srcIndex, customizer, stack) { + if (object === source) { + return; + } + baseFor(source, function(srcValue, key) { + stack || (stack = new Stack()); + if (isObject(srcValue)) { + baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack); + } else { + var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + "", object, source, stack) : void 0; + if (newValue === void 0) { + newValue = srcValue; + } + assignMergeValue(object, key, newValue); + } + }, keysIn); + } + + function customDefaultsMerge(objValue, srcValue, key, object, source, stack) { + if (isObject(objValue) && isObject(srcValue)) { + stack.set(srcValue, objValue); + baseMerge(objValue, srcValue, void 0, customDefaultsMerge, stack); + stack["delete"](srcValue); + } + return objValue; + } + + var mergeWith = createAssigner(function(object, source, srcIndex, customizer) { + baseMerge(object, source, srcIndex, customizer); + }); + + var defaultsDeep = baseRest(function(args) { + args.push(void 0, customDefaultsMerge); + return apply(mergeWith, void 0, args); + }); + + var FUNC_ERROR_TEXT$5 = "Expected a function"; + function baseDelay(func, wait, args) { + if (typeof func != "function") { + throw new TypeError(FUNC_ERROR_TEXT$5); + } + return setTimeout(function() { + func.apply(void 0, args); + }, wait); + } + + var defer = baseRest(function(func, args) { + return baseDelay(func, 1, args); + }); + + var delay = baseRest(function(func, wait, args) { + return baseDelay(func, toNumber(wait) || 0, args); + }); + + function arrayIncludesWith(array, value, comparator) { + var index = -1, length = array == null ? 0 : array.length; + while (++index < length) { + if (comparator(value, array[index])) { + return true; + } + } + return false; + } + + var LARGE_ARRAY_SIZE$1 = 200; + function baseDifference(array, values, iteratee, comparator) { + var index = -1, includes = arrayIncludes, isCommon = true, length = array.length, result = [], valuesLength = values.length; + if (!length) { + return result; + } + if (iteratee) { + values = arrayMap(values, baseUnary(iteratee)); + } + if (comparator) { + includes = arrayIncludesWith; + isCommon = false; + } else if (values.length >= LARGE_ARRAY_SIZE$1) { + includes = cacheHas; + isCommon = false; + values = new SetCache(values); + } + outer: + while (++index < length) { + var value = array[index], computed = iteratee == null ? value : iteratee(value); + value = comparator || value !== 0 ? value : 0; + if (isCommon && computed === computed) { + var valuesIndex = valuesLength; + while (valuesIndex--) { + if (values[valuesIndex] === computed) { + continue outer; + } + } + result.push(value); + } else if (!includes(values, computed, comparator)) { + result.push(value); + } + } + return result; + } + + var difference = baseRest(function(array, values) { + return isArrayLikeObject(array) ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true)) : []; + }); + + function last(array) { + var length = array == null ? 0 : array.length; + return length ? array[length - 1] : void 0; + } + + var differenceBy = baseRest(function(array, values) { + var iteratee = last(values); + if (isArrayLikeObject(iteratee)) { + iteratee = void 0; + } + return isArrayLikeObject(array) ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), baseIteratee(iteratee)) : []; + }); + + var differenceWith = baseRest(function(array, values) { + var comparator = last(values); + if (isArrayLikeObject(comparator)) { + comparator = void 0; + } + return isArrayLikeObject(array) ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), void 0, comparator) : []; + }); + + var divide = createMathOperation(function(dividend, divisor) { + return dividend / divisor; + }, 1); + + function drop(array, n, guard) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + n = guard || n === void 0 ? 1 : toInteger(n); + return baseSlice(array, n < 0 ? 0 : n, length); + } + + function dropRight(array, n, guard) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + n = guard || n === void 0 ? 1 : toInteger(n); + n = length - n; + return baseSlice(array, 0, n < 0 ? 0 : n); + } + + function baseWhile(array, predicate, isDrop, fromRight) { + var length = array.length, index = fromRight ? length : -1; + while ((fromRight ? index-- : ++index < length) && predicate(array[index], index, array)) { + } + return isDrop ? baseSlice(array, fromRight ? 0 : index, fromRight ? index + 1 : length) : baseSlice(array, fromRight ? index + 1 : 0, fromRight ? length : index); + } + + function dropRightWhile(array, predicate) { + return array && array.length ? baseWhile(array, baseIteratee(predicate), true, true) : []; + } + + function dropWhile(array, predicate) { + return array && array.length ? baseWhile(array, baseIteratee(predicate), true) : []; + } + + function castFunction(value) { + return typeof value == "function" ? value : identity; + } + + function forEach(collection, iteratee) { + var func = isArray(collection) ? arrayEach : baseEach; + return func(collection, castFunction(iteratee)); + } + + function arrayEachRight(array, iteratee) { + var length = array == null ? 0 : array.length; + while (length--) { + if (iteratee(array[length], length, array) === false) { + break; + } + } + return array; + } + + var baseForRight = createBaseFor(true); + + function baseForOwnRight(object, iteratee) { + return object && baseForRight(object, iteratee, keys); + } + + var baseEachRight = createBaseEach(baseForOwnRight, true); + + function forEachRight(collection, iteratee) { + var func = isArray(collection) ? arrayEachRight : baseEachRight; + return func(collection, castFunction(iteratee)); + } + + function endsWith(string, target, position) { + string = toString(string); + target = baseToString(target); + var length = string.length; + position = position === void 0 ? length : baseClamp(toInteger(position), 0, length); + var end = position; + position -= target.length; + return position >= 0 && string.slice(position, end) == target; + } + + function baseToPairs(object, props) { + return arrayMap(props, function(key) { + return [key, object[key]]; + }); + } + + function setToPairs(set) { + var index = -1, result = Array(set.size); + set.forEach(function(value) { + result[++index] = [value, value]; + }); + return result; + } + + var mapTag$3 = "[object Map]"; + var setTag$3 = "[object Set]"; + function createToPairs(keysFunc) { + return function(object) { + var tag = getTag$1(object); + if (tag == mapTag$3) { + return mapToArray(object); + } + if (tag == setTag$3) { + return setToPairs(object); + } + return baseToPairs(object, keysFunc(object)); + }; + } + + var toPairs = createToPairs(keys); + + var toPairsIn = createToPairs(keysIn); + + var htmlEscapes = { + "&": "&", + "<": "<", + ">": ">", + '"': """, + "'": "'" + }; + var escapeHtmlChar = basePropertyOf(htmlEscapes); + + var reUnescapedHtml = /[&<>"']/g; + var reHasUnescapedHtml = RegExp(reUnescapedHtml.source); + function escape(string) { + string = toString(string); + return string && reHasUnescapedHtml.test(string) ? string.replace(reUnescapedHtml, escapeHtmlChar) : string; + } + + var reRegExpChar = /[\\^$.*+?()[\]{}|]/g; + var reHasRegExpChar = RegExp(reRegExpChar.source); + function escapeRegExp(string) { + string = toString(string); + return string && reHasRegExpChar.test(string) ? string.replace(reRegExpChar, "\\$&") : string; + } + + function arrayEvery(array, predicate) { + var index = -1, length = array == null ? 0 : array.length; + while (++index < length) { + if (!predicate(array[index], index, array)) { + return false; + } + } + return true; + } + + function baseEvery(collection, predicate) { + var result = true; + baseEach(collection, function(value, index, collection2) { + result = !!predicate(value, index, collection2); + return result; + }); + return result; + } + + function every(collection, predicate, guard) { + var func = isArray(collection) ? arrayEvery : baseEvery; + if (guard && isIterateeCall(collection, predicate, guard)) { + predicate = void 0; + } + return func(collection, baseIteratee(predicate)); + } + + var MAX_ARRAY_LENGTH$5 = 4294967295; + function toLength(value) { + return value ? baseClamp(toInteger(value), 0, MAX_ARRAY_LENGTH$5) : 0; + } + + function baseFill(array, value, start, end) { + var length = array.length; + start = toInteger(start); + if (start < 0) { + start = -start > length ? 0 : length + start; + } + end = end === void 0 || end > length ? length : toInteger(end); + if (end < 0) { + end += length; + } + end = start > end ? 0 : toLength(end); + while (start < end) { + array[start++] = value; + } + return array; + } + + function fill(array, value, start, end) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + if (start && typeof start != "number" && isIterateeCall(array, value, start)) { + start = 0; + end = length; + } + return baseFill(array, value, start, end); + } + + function baseFilter(collection, predicate) { + var result = []; + baseEach(collection, function(value, index, collection2) { + if (predicate(value, index, collection2)) { + result.push(value); + } + }); + return result; + } + + function filter(collection, predicate) { + var func = isArray(collection) ? arrayFilter : baseFilter; + return func(collection, baseIteratee(predicate)); + } + + function createFind(findIndexFunc) { + return function(collection, predicate, fromIndex) { + var iterable = Object(collection); + if (!isArrayLike(collection)) { + var iteratee = baseIteratee(predicate); + collection = keys(collection); + predicate = function(key) { + return iteratee(iterable[key], key, iterable); + }; + } + var index = findIndexFunc(collection, predicate, fromIndex); + return index > -1 ? iterable[iteratee ? collection[index] : index] : void 0; + }; + } + + var nativeMax$a = Math.max; + function findIndex(array, predicate, fromIndex) { + var length = array == null ? 0 : array.length; + if (!length) { + return -1; + } + var index = fromIndex == null ? 0 : toInteger(fromIndex); + if (index < 0) { + index = nativeMax$a(length + index, 0); + } + return baseFindIndex(array, baseIteratee(predicate), index); + } + + var find = createFind(findIndex); + + function baseFindKey(collection, predicate, eachFunc) { + var result; + eachFunc(collection, function(value, key, collection2) { + if (predicate(value, key, collection2)) { + result = key; + return false; + } + }); + return result; + } + + function findKey(object, predicate) { + return baseFindKey(object, baseIteratee(predicate), baseForOwn); + } + + var nativeMax$9 = Math.max; + var nativeMin$a = Math.min; + function findLastIndex(array, predicate, fromIndex) { + var length = array == null ? 0 : array.length; + if (!length) { + return -1; + } + var index = length - 1; + if (fromIndex !== void 0) { + index = toInteger(fromIndex); + index = fromIndex < 0 ? nativeMax$9(length + index, 0) : nativeMin$a(index, length - 1); + } + return baseFindIndex(array, baseIteratee(predicate), index, true); + } + + var findLast = createFind(findLastIndex); + + function findLastKey(object, predicate) { + return baseFindKey(object, baseIteratee(predicate), baseForOwnRight); + } + + function head(array) { + return array && array.length ? array[0] : void 0; + } + + function baseMap(collection, iteratee) { + var index = -1, result = isArrayLike(collection) ? Array(collection.length) : []; + baseEach(collection, function(value, key, collection2) { + result[++index] = iteratee(value, key, collection2); + }); + return result; + } + + function map(collection, iteratee) { + var func = isArray(collection) ? arrayMap : baseMap; + return func(collection, baseIteratee(iteratee)); + } + + function flatMap(collection, iteratee) { + return baseFlatten(map(collection, iteratee), 1); + } + + var INFINITY$2 = 1 / 0; + function flatMapDeep(collection, iteratee) { + return baseFlatten(map(collection, iteratee), INFINITY$2); + } + + function flatMapDepth(collection, iteratee, depth) { + depth = depth === void 0 ? 1 : toInteger(depth); + return baseFlatten(map(collection, iteratee), depth); + } + + var INFINITY$1 = 1 / 0; + function flattenDeep(array) { + var length = array == null ? 0 : array.length; + return length ? baseFlatten(array, INFINITY$1) : []; + } + + function flattenDepth(array, depth) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + depth = depth === void 0 ? 1 : toInteger(depth); + return baseFlatten(array, depth); + } + + var WRAP_FLIP_FLAG = 512; + function flip(func) { + return createWrap(func, WRAP_FLIP_FLAG); + } + + var floor$1 = createRound("floor"); + + var FUNC_ERROR_TEXT$4 = "Expected a function"; + var WRAP_CURRY_FLAG = 8; + var WRAP_PARTIAL_FLAG$1 = 32; + var WRAP_ARY_FLAG = 128; + var WRAP_REARG_FLAG$1 = 256; + function createFlow(fromRight) { + return flatRest(function(funcs) { + var length = funcs.length, index = length, prereq = LodashWrapper.prototype.thru; + if (fromRight) { + funcs.reverse(); + } + while (index--) { + var func = funcs[index]; + if (typeof func != "function") { + throw new TypeError(FUNC_ERROR_TEXT$4); + } + if (prereq && !wrapper && getFuncName(func) == "wrapper") { + var wrapper = new LodashWrapper([], true); + } + } + index = wrapper ? index : length; + while (++index < length) { + func = funcs[index]; + var funcName = getFuncName(func), data = funcName == "wrapper" ? getData(func) : void 0; + if (data && isLaziable(data[0]) && data[1] == (WRAP_ARY_FLAG | WRAP_CURRY_FLAG | WRAP_PARTIAL_FLAG$1 | WRAP_REARG_FLAG$1) && !data[4].length && data[9] == 1) { + wrapper = wrapper[getFuncName(data[0])].apply(wrapper, data[3]); + } else { + wrapper = func.length == 1 && isLaziable(func) ? wrapper[funcName]() : wrapper.thru(func); + } + } + return function() { + var args = arguments, value = args[0]; + if (wrapper && args.length == 1 && isArray(value)) { + return wrapper.plant(value).value(); + } + var index2 = 0, result = length ? funcs[index2].apply(this, args) : value; + while (++index2 < length) { + result = funcs[index2].call(this, result); + } + return result; + }; + }); + } + + var flow = createFlow(); + + var flowRight = createFlow(true); + + function forIn(object, iteratee) { + return object == null ? object : baseFor(object, castFunction(iteratee), keysIn); + } + + function forInRight(object, iteratee) { + return object == null ? object : baseForRight(object, castFunction(iteratee), keysIn); + } + + function forOwn(object, iteratee) { + return object && baseForOwn(object, castFunction(iteratee)); + } + + function forOwnRight(object, iteratee) { + return object && baseForOwnRight(object, castFunction(iteratee)); + } + + function fromPairs(pairs) { + var index = -1, length = pairs == null ? 0 : pairs.length, result = {}; + while (++index < length) { + var pair = pairs[index]; + result[pair[0]] = pair[1]; + } + return result; + } + + function baseFunctions(object, props) { + return arrayFilter(props, function(key) { + return isFunction(object[key]); + }); + } + + function functions(object) { + return object == null ? [] : baseFunctions(object, keys(object)); + } + + function functionsIn(object) { + return object == null ? [] : baseFunctions(object, keysIn(object)); + } + + var objectProto$7 = Object.prototype; + var hasOwnProperty$6 = objectProto$7.hasOwnProperty; + var groupBy = createAggregator(function(result, value, key) { + if (hasOwnProperty$6.call(result, key)) { + result[key].push(value); + } else { + baseAssignValue(result, key, [value]); + } + }); + + function baseGt(value, other) { + return value > other; + } + + function createRelationalOperation(operator) { + return function(value, other) { + if (!(typeof value == "string" && typeof other == "string")) { + value = toNumber(value); + other = toNumber(other); + } + return operator(value, other); + }; + } + + var gt$1 = createRelationalOperation(baseGt); + + var gte = createRelationalOperation(function(value, other) { + return value >= other; + }); + + var objectProto$6 = Object.prototype; + var hasOwnProperty$5 = objectProto$6.hasOwnProperty; + function baseHas(object, key) { + return object != null && hasOwnProperty$5.call(object, key); + } + + function has(object, path) { + return object != null && hasPath(object, path, baseHas); + } + + var nativeMax$8 = Math.max; + var nativeMin$9 = Math.min; + function baseInRange(number, start, end) { + return number >= nativeMin$9(start, end) && number < nativeMax$8(start, end); + } + + function inRange(number, start, end) { + start = toFinite(start); + if (end === void 0) { + end = start; + start = 0; + } else { + end = toFinite(end); + } + number = toNumber(number); + return baseInRange(number, start, end); + } + + var stringTag = "[object String]"; + function isString(value) { + return typeof value == "string" || !isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag; + } + + function baseValues(object, props) { + return arrayMap(props, function(key) { + return object[key]; + }); + } + + function values(object) { + return object == null ? [] : baseValues(object, keys(object)); + } + + var nativeMax$7 = Math.max; + function includes(collection, value, fromIndex, guard) { + collection = isArrayLike(collection) ? collection : values(collection); + fromIndex = fromIndex && !guard ? toInteger(fromIndex) : 0; + var length = collection.length; + if (fromIndex < 0) { + fromIndex = nativeMax$7(length + fromIndex, 0); + } + return isString(collection) ? fromIndex <= length && collection.indexOf(value, fromIndex) > -1 : !!length && baseIndexOf(collection, value, fromIndex) > -1; + } + + var nativeMax$6 = Math.max; + function indexOf(array, value, fromIndex) { + var length = array == null ? 0 : array.length; + if (!length) { + return -1; + } + var index = fromIndex == null ? 0 : toInteger(fromIndex); + if (index < 0) { + index = nativeMax$6(length + index, 0); + } + return baseIndexOf(array, value, index); + } + + function initial(array) { + var length = array == null ? 0 : array.length; + return length ? baseSlice(array, 0, -1) : []; + } + + var nativeMin$8 = Math.min; + function baseIntersection(arrays, iteratee, comparator) { + var includes = comparator ? arrayIncludesWith : arrayIncludes, length = arrays[0].length, othLength = arrays.length, othIndex = othLength, caches = Array(othLength), maxLength = Infinity, result = []; + while (othIndex--) { + var array = arrays[othIndex]; + if (othIndex && iteratee) { + array = arrayMap(array, baseUnary(iteratee)); + } + maxLength = nativeMin$8(array.length, maxLength); + caches[othIndex] = !comparator && (iteratee || length >= 120 && array.length >= 120) ? new SetCache(othIndex && array) : void 0; + } + array = arrays[0]; + var index = -1, seen = caches[0]; + outer: + while (++index < length && result.length < maxLength) { + var value = array[index], computed = iteratee ? iteratee(value) : value; + value = comparator || value !== 0 ? value : 0; + if (!(seen ? cacheHas(seen, computed) : includes(result, computed, comparator))) { + othIndex = othLength; + while (--othIndex) { + var cache = caches[othIndex]; + if (!(cache ? cacheHas(cache, computed) : includes(arrays[othIndex], computed, comparator))) { + continue outer; + } + } + if (seen) { + seen.push(computed); + } + result.push(value); + } + } + return result; + } + + function castArrayLikeObject(value) { + return isArrayLikeObject(value) ? value : []; + } + + var intersection = baseRest(function(arrays) { + var mapped = arrayMap(arrays, castArrayLikeObject); + return mapped.length && mapped[0] === arrays[0] ? baseIntersection(mapped) : []; + }); + + var intersectionBy = baseRest(function(arrays) { + var iteratee = last(arrays), mapped = arrayMap(arrays, castArrayLikeObject); + if (iteratee === last(mapped)) { + iteratee = void 0; + } else { + mapped.pop(); + } + return mapped.length && mapped[0] === arrays[0] ? baseIntersection(mapped, baseIteratee(iteratee)) : []; + }); + + var intersectionWith = baseRest(function(arrays) { + var comparator = last(arrays), mapped = arrayMap(arrays, castArrayLikeObject); + comparator = typeof comparator == "function" ? comparator : void 0; + if (comparator) { + mapped.pop(); + } + return mapped.length && mapped[0] === arrays[0] ? baseIntersection(mapped, void 0, comparator) : []; + }); + + function baseInverter(object, setter, iteratee, accumulator) { + baseForOwn(object, function(value, key, object2) { + setter(accumulator, iteratee(value), key, object2); + }); + return accumulator; + } + + function createInverter(setter, toIteratee) { + return function(object, iteratee) { + return baseInverter(object, setter, toIteratee(iteratee), {}); + }; + } + + var objectProto$5 = Object.prototype; + var nativeObjectToString$1 = objectProto$5.toString; + var invert = createInverter(function(result, value, key) { + if (value != null && typeof value.toString != "function") { + value = nativeObjectToString$1.call(value); + } + result[value] = key; + }, constant(identity)); + + var objectProto$4 = Object.prototype; + var hasOwnProperty$4 = objectProto$4.hasOwnProperty; + var nativeObjectToString = objectProto$4.toString; + var invertBy = createInverter(function(result, value, key) { + if (value != null && typeof value.toString != "function") { + value = nativeObjectToString.call(value); + } + if (hasOwnProperty$4.call(result, value)) { + result[value].push(key); + } else { + result[value] = [key]; + } + }, baseIteratee); + + function parent(object, path) { + return path.length < 2 ? object : baseGet(object, baseSlice(path, 0, -1)); + } + + function baseInvoke(object, path, args) { + path = castPath(path, object); + object = parent(object, path); + var func = object == null ? object : object[toKey(last(path))]; + return func == null ? void 0 : apply(func, object, args); + } + + var invoke = baseRest(baseInvoke); + + var invokeMap = baseRest(function(collection, path, args) { + var index = -1, isFunc = typeof path == "function", result = isArrayLike(collection) ? Array(collection.length) : []; + baseEach(collection, function(value) { + result[++index] = isFunc ? apply(path, value, args) : baseInvoke(value, path, args); + }); + return result; + }); + + var arrayBufferTag = "[object ArrayBuffer]"; + function baseIsArrayBuffer(value) { + return isObjectLike(value) && baseGetTag(value) == arrayBufferTag; + } + + var nodeIsArrayBuffer = nodeUtil && nodeUtil.isArrayBuffer; + var isArrayBuffer = nodeIsArrayBuffer ? baseUnary(nodeIsArrayBuffer) : baseIsArrayBuffer; + + var boolTag = "[object Boolean]"; + function isBoolean(value) { + return value === true || value === false || isObjectLike(value) && baseGetTag(value) == boolTag; + } + + var dateTag = "[object Date]"; + function baseIsDate(value) { + return isObjectLike(value) && baseGetTag(value) == dateTag; + } + + var nodeIsDate = nodeUtil && nodeUtil.isDate; + var isDate = nodeIsDate ? baseUnary(nodeIsDate) : baseIsDate; + + function isElement$2(value) { + return isObjectLike(value) && value.nodeType === 1 && !isPlainObject(value); + } + + var mapTag$2 = "[object Map]"; + var setTag$2 = "[object Set]"; + var objectProto$3 = Object.prototype; + var hasOwnProperty$3 = objectProto$3.hasOwnProperty; + function isEmpty$1(value) { + if (value == null) { + return true; + } + if (isArrayLike(value) && (isArray(value) || typeof value == "string" || typeof value.splice == "function" || isBuffer(value) || isTypedArray(value) || isArguments(value))) { + return !value.length; + } + var tag = getTag$1(value); + if (tag == mapTag$2 || tag == setTag$2) { + return !value.size; + } + if (isPrototype(value)) { + return !baseKeys(value).length; + } + for (var key in value) { + if (hasOwnProperty$3.call(value, key)) { + return false; + } + } + return true; + } + + function isEqual$1(value, other) { + return baseIsEqual(value, other); + } + + function isEqualWith(value, other, customizer) { + customizer = typeof customizer == "function" ? customizer : void 0; + var result = customizer ? customizer(value, other) : void 0; + return result === void 0 ? baseIsEqual(value, other, void 0, customizer) : !!result; + } + + var nativeIsFinite = root.isFinite; + function isFinite(value) { + return typeof value == "number" && nativeIsFinite(value); + } + + function isInteger(value) { + return typeof value == "number" && value == toInteger(value); + } + + function isMatch(object, source) { + return object === source || baseIsMatch(object, source, getMatchData(source)); + } + + function isMatchWith(object, source, customizer) { + customizer = typeof customizer == "function" ? customizer : void 0; + return baseIsMatch(object, source, getMatchData(source), customizer); + } + + var numberTag = "[object Number]"; + function isNumber(value) { + return typeof value == "number" || isObjectLike(value) && baseGetTag(value) == numberTag; + } + + function isNaN$1(value) { + return isNumber(value) && value != +value; + } + + var isMaskable = coreJsData ? isFunction : stubFalse; + + var CORE_ERROR_TEXT = "Unsupported core-js use. Try https://npms.io/search?q=ponyfill."; + function isNative(value) { + if (isMaskable(value)) { + throw new Error(CORE_ERROR_TEXT); + } + return baseIsNative(value); + } + + function isNil(value) { + return value == null; + } + + function isNull(value) { + return value === null; + } + + var regexpTag = "[object RegExp]"; + function baseIsRegExp(value) { + return isObjectLike(value) && baseGetTag(value) == regexpTag; + } + + var nodeIsRegExp = nodeUtil && nodeUtil.isRegExp; + var isRegExp = nodeIsRegExp ? baseUnary(nodeIsRegExp) : baseIsRegExp; + + var MAX_SAFE_INTEGER$3 = 9007199254740991; + function isSafeInteger(value) { + return isInteger(value) && value >= -MAX_SAFE_INTEGER$3 && value <= MAX_SAFE_INTEGER$3; + } + + function isUndefined$1(value) { + return value === void 0; + } + + var weakMapTag = "[object WeakMap]"; + function isWeakMap(value) { + return isObjectLike(value) && getTag$1(value) == weakMapTag; + } + + var weakSetTag = "[object WeakSet]"; + function isWeakSet(value) { + return isObjectLike(value) && baseGetTag(value) == weakSetTag; + } + + var CLONE_DEEP_FLAG$3 = 1; + function iteratee(func) { + return baseIteratee(typeof func == "function" ? func : baseClone(func, CLONE_DEEP_FLAG$3)); + } + + var arrayProto$4 = Array.prototype; + var nativeJoin = arrayProto$4.join; + function join(array, separator) { + return array == null ? "" : nativeJoin.call(array, separator); + } + + var kebabCase = createCompounder(function(result, word, index) { + return result + (index ? "-" : "") + word.toLowerCase(); + }); + + var keyBy = createAggregator(function(result, value, key) { + baseAssignValue(result, key, value); + }); + + function strictLastIndexOf(array, value, fromIndex) { + var index = fromIndex + 1; + while (index--) { + if (array[index] === value) { + return index; + } + } + return index; + } + + var nativeMax$5 = Math.max; + var nativeMin$7 = Math.min; + function lastIndexOf(array, value, fromIndex) { + var length = array == null ? 0 : array.length; + if (!length) { + return -1; + } + var index = length; + if (fromIndex !== void 0) { + index = toInteger(fromIndex); + index = index < 0 ? nativeMax$5(length + index, 0) : nativeMin$7(index, length - 1); + } + return value === value ? strictLastIndexOf(array, value, index) : baseFindIndex(array, baseIsNaN, index, true); + } + + var lowerCase = createCompounder(function(result, word, index) { + return result + (index ? " " : "") + word.toLowerCase(); + }); + + var lowerFirst = createCaseFirst("toLowerCase"); + + function baseLt(value, other) { + return value < other; + } + + var lt$1 = createRelationalOperation(baseLt); + + var lte = createRelationalOperation(function(value, other) { + return value <= other; + }); + + function mapKeys(object, iteratee) { + var result = {}; + iteratee = baseIteratee(iteratee); + baseForOwn(object, function(value, key, object2) { + baseAssignValue(result, iteratee(value, key, object2), value); + }); + return result; + } + + function mapValues(object, iteratee) { + var result = {}; + iteratee = baseIteratee(iteratee); + baseForOwn(object, function(value, key, object2) { + baseAssignValue(result, key, iteratee(value, key, object2)); + }); + return result; + } + + var CLONE_DEEP_FLAG$2 = 1; + function matches(source) { + return baseMatches(baseClone(source, CLONE_DEEP_FLAG$2)); + } + + var CLONE_DEEP_FLAG$1 = 1; + function matchesProperty(path, srcValue) { + return baseMatchesProperty(path, baseClone(srcValue, CLONE_DEEP_FLAG$1)); + } + + function baseExtremum(array, iteratee, comparator) { + var index = -1, length = array.length; + while (++index < length) { + var value = array[index], current = iteratee(value); + if (current != null && (computed === void 0 ? current === current && !isSymbol(current) : comparator(current, computed))) { + var computed = current, result = value; + } + } + return result; + } + + function max$3(array) { + return array && array.length ? baseExtremum(array, identity, baseGt) : void 0; + } + + function maxBy(array, iteratee) { + return array && array.length ? baseExtremum(array, baseIteratee(iteratee), baseGt) : void 0; + } + + function baseSum(array, iteratee) { + var result, index = -1, length = array.length; + while (++index < length) { + var current = iteratee(array[index]); + if (current !== void 0) { + result = result === void 0 ? current : result + current; + } + } + return result; + } + + var NAN = 0 / 0; + function baseMean(array, iteratee) { + var length = array == null ? 0 : array.length; + return length ? baseSum(array, iteratee) / length : NAN; + } + + function mean(array) { + return baseMean(array, identity); + } + + function meanBy(array, iteratee) { + return baseMean(array, baseIteratee(iteratee)); + } + + var merge = createAssigner(function(object, source, srcIndex) { + baseMerge(object, source, srcIndex); + }); + + var method = baseRest(function(path, args) { + return function(object) { + return baseInvoke(object, path, args); + }; + }); + + var methodOf = baseRest(function(object, args) { + return function(path) { + return baseInvoke(object, path, args); + }; + }); + + function min$3(array) { + return array && array.length ? baseExtremum(array, identity, baseLt) : void 0; + } + + function minBy(array, iteratee) { + return array && array.length ? baseExtremum(array, baseIteratee(iteratee), baseLt) : void 0; + } + + function mixin$1(object, source, options) { + var props = keys(source), methodNames = baseFunctions(source, props); + var chain = !(isObject(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object); + arrayEach(methodNames, function(methodName) { + var func = source[methodName]; + object[methodName] = func; + if (isFunc) { + object.prototype[methodName] = function() { + var chainAll = this.__chain__; + if (chain || chainAll) { + var result = object(this.__wrapped__), actions = result.__actions__ = copyArray(this.__actions__); + actions.push({ "func": func, "args": arguments, "thisArg": object }); + result.__chain__ = chainAll; + return result; + } + return func.apply(object, arrayPush([this.value()], arguments)); + }; + } + }); + return object; + } + + var multiply = createMathOperation(function(multiplier, multiplicand) { + return multiplier * multiplicand; + }, 1); + + var FUNC_ERROR_TEXT$3 = "Expected a function"; + function negate(predicate) { + if (typeof predicate != "function") { + throw new TypeError(FUNC_ERROR_TEXT$3); + } + return function() { + var args = arguments; + switch (args.length) { + case 0: + return !predicate.call(this); + case 1: + return !predicate.call(this, args[0]); + case 2: + return !predicate.call(this, args[0], args[1]); + case 3: + return !predicate.call(this, args[0], args[1], args[2]); + } + return !predicate.apply(this, args); + }; + } + + function iteratorToArray(iterator) { + var data, result = []; + while (!(data = iterator.next()).done) { + result.push(data.value); + } + return result; + } + + var mapTag$1 = "[object Map]"; + var setTag$1 = "[object Set]"; + var symIterator$1 = Symbol$1 ? Symbol$1.iterator : void 0; + function toArray(value) { + if (!value) { + return []; + } + if (isArrayLike(value)) { + return isString(value) ? stringToArray(value) : copyArray(value); + } + if (symIterator$1 && value[symIterator$1]) { + return iteratorToArray(value[symIterator$1]()); + } + var tag = getTag$1(value), func = tag == mapTag$1 ? mapToArray : tag == setTag$1 ? setToArray : values; + return func(value); + } + + function wrapperNext() { + if (this.__values__ === void 0) { + this.__values__ = toArray(this.value()); + } + var done = this.__index__ >= this.__values__.length, value = done ? void 0 : this.__values__[this.__index__++]; + return { "done": done, "value": value }; + } + + function baseNth(array, n) { + var length = array.length; + if (!length) { + return; + } + n += n < 0 ? length : 0; + return isIndex(n, length) ? array[n] : void 0; + } + + function nth(array, n) { + return array && array.length ? baseNth(array, toInteger(n)) : void 0; + } + + function nthArg(n) { + n = toInteger(n); + return baseRest(function(args) { + return baseNth(args, n); + }); + } + + function baseUnset(object, path) { + path = castPath(path, object); + object = parent(object, path); + return object == null || delete object[toKey(last(path))]; + } + + function customOmitClone(value) { + return isPlainObject(value) ? void 0 : value; + } + + var CLONE_DEEP_FLAG = 1; + var CLONE_FLAT_FLAG = 2; + var CLONE_SYMBOLS_FLAG = 4; + var omit = flatRest(function(object, paths) { + var result = {}; + if (object == null) { + return result; + } + var isDeep = false; + paths = arrayMap(paths, function(path) { + path = castPath(path, object); + isDeep || (isDeep = path.length > 1); + return path; + }); + copyObject(object, getAllKeysIn(object), result); + if (isDeep) { + result = baseClone(result, CLONE_DEEP_FLAG | CLONE_FLAT_FLAG | CLONE_SYMBOLS_FLAG, customOmitClone); + } + var length = paths.length; + while (length--) { + baseUnset(result, paths[length]); + } + return result; + }); + + function baseSet(object, path, value, customizer) { + if (!isObject(object)) { + return object; + } + path = castPath(path, object); + var index = -1, length = path.length, lastIndex = length - 1, nested = object; + while (nested != null && ++index < length) { + var key = toKey(path[index]), newValue = value; + if (key === "__proto__" || key === "constructor" || key === "prototype") { + return object; + } + if (index != lastIndex) { + var objValue = nested[key]; + newValue = customizer ? customizer(objValue, key, nested) : void 0; + if (newValue === void 0) { + newValue = isObject(objValue) ? objValue : isIndex(path[index + 1]) ? [] : {}; + } + } + assignValue(nested, key, newValue); + nested = nested[key]; + } + return object; + } + + function basePickBy(object, paths, predicate) { + var index = -1, length = paths.length, result = {}; + while (++index < length) { + var path = paths[index], value = baseGet(object, path); + if (predicate(value, path)) { + baseSet(result, castPath(path, object), value); + } + } + return result; + } + + function pickBy(object, predicate) { + if (object == null) { + return {}; + } + var props = arrayMap(getAllKeysIn(object), function(prop) { + return [prop]; + }); + predicate = baseIteratee(predicate); + return basePickBy(object, props, function(value, path) { + return predicate(value, path[0]); + }); + } + + function omitBy(object, predicate) { + return pickBy(object, negate(baseIteratee(predicate))); + } + + function once(func) { + return before(2, func); + } + + function baseSortBy(array, comparer) { + var length = array.length; + array.sort(comparer); + while (length--) { + array[length] = array[length].value; + } + return array; + } + + function compareAscending(value, other) { + if (value !== other) { + var valIsDefined = value !== void 0, valIsNull = value === null, valIsReflexive = value === value, valIsSymbol = isSymbol(value); + var othIsDefined = other !== void 0, othIsNull = other === null, othIsReflexive = other === other, othIsSymbol = isSymbol(other); + if (!othIsNull && !othIsSymbol && !valIsSymbol && value > other || valIsSymbol && othIsDefined && othIsReflexive && !othIsNull && !othIsSymbol || valIsNull && othIsDefined && othIsReflexive || !valIsDefined && othIsReflexive || !valIsReflexive) { + return 1; + } + if (!valIsNull && !valIsSymbol && !othIsSymbol && value < other || othIsSymbol && valIsDefined && valIsReflexive && !valIsNull && !valIsSymbol || othIsNull && valIsDefined && valIsReflexive || !othIsDefined && valIsReflexive || !othIsReflexive) { + return -1; + } + } + return 0; + } + + function compareMultiple(object, other, orders) { + var index = -1, objCriteria = object.criteria, othCriteria = other.criteria, length = objCriteria.length, ordersLength = orders.length; + while (++index < length) { + var result = compareAscending(objCriteria[index], othCriteria[index]); + if (result) { + if (index >= ordersLength) { + return result; + } + var order = orders[index]; + return result * (order == "desc" ? -1 : 1); + } + } + return object.index - other.index; + } + + function baseOrderBy(collection, iteratees, orders) { + if (iteratees.length) { + iteratees = arrayMap(iteratees, function(iteratee) { + if (isArray(iteratee)) { + return function(value) { + return baseGet(value, iteratee.length === 1 ? iteratee[0] : iteratee); + }; + } + return iteratee; + }); + } else { + iteratees = [identity]; + } + var index = -1; + iteratees = arrayMap(iteratees, baseUnary(baseIteratee)); + var result = baseMap(collection, function(value, key, collection2) { + var criteria = arrayMap(iteratees, function(iteratee) { + return iteratee(value); + }); + return { "criteria": criteria, "index": ++index, "value": value }; + }); + return baseSortBy(result, function(object, other) { + return compareMultiple(object, other, orders); + }); + } + + function orderBy$1(collection, iteratees, orders, guard) { + if (collection == null) { + return []; + } + if (!isArray(iteratees)) { + iteratees = iteratees == null ? [] : [iteratees]; + } + orders = guard ? void 0 : orders; + if (!isArray(orders)) { + orders = orders == null ? [] : [orders]; + } + return baseOrderBy(collection, iteratees, orders); + } + + function createOver(arrayFunc) { + return flatRest(function(iteratees) { + iteratees = arrayMap(iteratees, baseUnary(baseIteratee)); + return baseRest(function(args) { + var thisArg = this; + return arrayFunc(iteratees, function(iteratee) { + return apply(iteratee, thisArg, args); + }); + }); + }); + } + + var over = createOver(arrayMap); + + var castRest = baseRest; + + var nativeMin$6 = Math.min; + var overArgs = castRest(function(func, transforms) { + transforms = transforms.length == 1 && isArray(transforms[0]) ? arrayMap(transforms[0], baseUnary(baseIteratee)) : arrayMap(baseFlatten(transforms, 1), baseUnary(baseIteratee)); + var funcsLength = transforms.length; + return baseRest(function(args) { + var index = -1, length = nativeMin$6(args.length, funcsLength); + while (++index < length) { + args[index] = transforms[index].call(this, args[index]); + } + return apply(func, this, args); + }); + }); + + var overEvery = createOver(arrayEvery); + + var overSome = createOver(arraySome); + + var MAX_SAFE_INTEGER$2 = 9007199254740991; + var nativeFloor$3 = Math.floor; + function baseRepeat(string, n) { + var result = ""; + if (!string || n < 1 || n > MAX_SAFE_INTEGER$2) { + return result; + } + do { + if (n % 2) { + result += string; + } + n = nativeFloor$3(n / 2); + if (n) { + string += string; + } + } while (n); + return result; + } + + var asciiSize = baseProperty("length"); + + var rsAstralRange = "\\ud800-\\udfff"; + var rsComboMarksRange = "\\u0300-\\u036f"; + var reComboHalfMarksRange = "\\ufe20-\\ufe2f"; + var rsComboSymbolsRange = "\\u20d0-\\u20ff"; + var rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange; + var rsVarRange = "\\ufe0e\\ufe0f"; + var rsAstral = "[" + rsAstralRange + "]"; + var rsCombo = "[" + rsComboRange + "]"; + var rsFitz = "\\ud83c[\\udffb-\\udfff]"; + var rsModifier = "(?:" + rsCombo + "|" + rsFitz + ")"; + var rsNonAstral = "[^" + rsAstralRange + "]"; + var rsRegional = "(?:\\ud83c[\\udde6-\\uddff]){2}"; + var rsSurrPair = "[\\ud800-\\udbff][\\udc00-\\udfff]"; + var rsZWJ = "\\u200d"; + var reOptMod = rsModifier + "?"; + var rsOptVar = "[" + rsVarRange + "]?"; + var rsOptJoin = "(?:" + rsZWJ + "(?:" + [rsNonAstral, rsRegional, rsSurrPair].join("|") + ")" + rsOptVar + reOptMod + ")*"; + var rsSeq = rsOptVar + reOptMod + rsOptJoin; + var rsSymbol = "(?:" + [rsNonAstral + rsCombo + "?", rsCombo, rsRegional, rsSurrPair, rsAstral].join("|") + ")"; + var reUnicode = RegExp(rsFitz + "(?=" + rsFitz + ")|" + rsSymbol + rsSeq, "g"); + function unicodeSize(string) { + var result = reUnicode.lastIndex = 0; + while (reUnicode.test(string)) { + ++result; + } + return result; + } + + function stringSize(string) { + return hasUnicode(string) ? unicodeSize(string) : asciiSize(string); + } + + var nativeCeil$2 = Math.ceil; + function createPadding(length, chars) { + chars = chars === void 0 ? " " : baseToString(chars); + var charsLength = chars.length; + if (charsLength < 2) { + return charsLength ? baseRepeat(chars, length) : chars; + } + var result = baseRepeat(chars, nativeCeil$2(length / stringSize(chars))); + return hasUnicode(chars) ? castSlice(stringToArray(result), 0, length).join("") : result.slice(0, length); + } + + var nativeCeil$1 = Math.ceil; + var nativeFloor$2 = Math.floor; + function pad(string, length, chars) { + string = toString(string); + length = toInteger(length); + var strLength = length ? stringSize(string) : 0; + if (!length || strLength >= length) { + return string; + } + var mid = (length - strLength) / 2; + return createPadding(nativeFloor$2(mid), chars) + string + createPadding(nativeCeil$1(mid), chars); + } + + function padEnd(string, length, chars) { + string = toString(string); + length = toInteger(length); + var strLength = length ? stringSize(string) : 0; + return length && strLength < length ? string + createPadding(length - strLength, chars) : string; + } + + function padStart(string, length, chars) { + string = toString(string); + length = toInteger(length); + var strLength = length ? stringSize(string) : 0; + return length && strLength < length ? createPadding(length - strLength, chars) + string : string; + } + + var reTrimStart$1 = /^\s+/; + var nativeParseInt = root.parseInt; + function parseInt$1(string, radix, guard) { + if (guard || radix == null) { + radix = 0; + } else if (radix) { + radix = +radix; + } + return nativeParseInt(toString(string).replace(reTrimStart$1, ""), radix || 0); + } + + var WRAP_PARTIAL_FLAG = 32; + var partial = baseRest(function(func, partials) { + var holders = replaceHolders(partials, getHolder(partial)); + return createWrap(func, WRAP_PARTIAL_FLAG, void 0, partials, holders); + }); + partial.placeholder = {}; + + var WRAP_PARTIAL_RIGHT_FLAG = 64; + var partialRight = baseRest(function(func, partials) { + var holders = replaceHolders(partials, getHolder(partialRight)); + return createWrap(func, WRAP_PARTIAL_RIGHT_FLAG, void 0, partials, holders); + }); + partialRight.placeholder = {}; + + var partition = createAggregator(function(result, value, key) { + result[key ? 0 : 1].push(value); + }, function() { + return [[], []]; + }); + + function basePick(object, paths) { + return basePickBy(object, paths, function(value, path) { + return hasIn(object, path); + }); + } + + var pick = flatRest(function(object, paths) { + return object == null ? {} : basePick(object, paths); + }); + + function wrapperPlant(value) { + var result, parent = this; + while (parent instanceof baseLodash) { + var clone = wrapperClone(parent); + clone.__index__ = 0; + clone.__values__ = void 0; + if (result) { + previous.__wrapped__ = clone; + } else { + result = clone; + } + var previous = clone; + parent = parent.__wrapped__; + } + previous.__wrapped__ = value; + return result; + } + + function propertyOf(object) { + return function(path) { + return object == null ? void 0 : baseGet(object, path); + }; + } + + function baseIndexOfWith(array, value, fromIndex, comparator) { + var index = fromIndex - 1, length = array.length; + while (++index < length) { + if (comparator(array[index], value)) { + return index; + } + } + return -1; + } + + var arrayProto$3 = Array.prototype; + var splice$1 = arrayProto$3.splice; + function basePullAll(array, values, iteratee, comparator) { + var indexOf = comparator ? baseIndexOfWith : baseIndexOf, index = -1, length = values.length, seen = array; + if (array === values) { + values = copyArray(values); + } + if (iteratee) { + seen = arrayMap(array, baseUnary(iteratee)); + } + while (++index < length) { + var fromIndex = 0, value = values[index], computed = iteratee ? iteratee(value) : value; + while ((fromIndex = indexOf(seen, computed, fromIndex, comparator)) > -1) { + if (seen !== array) { + splice$1.call(seen, fromIndex, 1); + } + splice$1.call(array, fromIndex, 1); + } + } + return array; + } + + function pullAll(array, values) { + return array && array.length && values && values.length ? basePullAll(array, values) : array; + } + + var pull = baseRest(pullAll); + + function pullAllBy(array, values, iteratee) { + return array && array.length && values && values.length ? basePullAll(array, values, baseIteratee(iteratee)) : array; + } + + function pullAllWith(array, values, comparator) { + return array && array.length && values && values.length ? basePullAll(array, values, void 0, comparator) : array; + } + + var arrayProto$2 = Array.prototype; + var splice = arrayProto$2.splice; + function basePullAt(array, indexes) { + var length = array ? indexes.length : 0, lastIndex = length - 1; + while (length--) { + var index = indexes[length]; + if (length == lastIndex || index !== previous) { + var previous = index; + if (isIndex(index)) { + splice.call(array, index, 1); + } else { + baseUnset(array, index); + } + } + } + return array; + } + + var pullAt = flatRest(function(array, indexes) { + var length = array == null ? 0 : array.length, result = baseAt(array, indexes); + basePullAt(array, arrayMap(indexes, function(index) { + return isIndex(index, length) ? +index : index; + }).sort(compareAscending)); + return result; + }); + + var nativeFloor$1 = Math.floor; + var nativeRandom$1 = Math.random; + function baseRandom(lower, upper) { + return lower + nativeFloor$1(nativeRandom$1() * (upper - lower + 1)); + } + + var freeParseFloat = parseFloat; + var nativeMin$5 = Math.min; + var nativeRandom = Math.random; + function random(lower, upper, floating) { + if (floating && typeof floating != "boolean" && isIterateeCall(lower, upper, floating)) { + upper = floating = void 0; + } + if (floating === void 0) { + if (typeof upper == "boolean") { + floating = upper; + upper = void 0; + } else if (typeof lower == "boolean") { + floating = lower; + lower = void 0; + } + } + if (lower === void 0 && upper === void 0) { + lower = 0; + upper = 1; + } else { + lower = toFinite(lower); + if (upper === void 0) { + upper = lower; + lower = 0; + } else { + upper = toFinite(upper); + } + } + if (lower > upper) { + var temp = lower; + lower = upper; + upper = temp; + } + if (floating || lower % 1 || upper % 1) { + var rand = nativeRandom(); + return nativeMin$5(lower + rand * (upper - lower + freeParseFloat("1e-" + ((rand + "").length - 1))), upper); + } + return baseRandom(lower, upper); + } + + var nativeCeil = Math.ceil; + var nativeMax$4 = Math.max; + function baseRange(start, end, step, fromRight) { + var index = -1, length = nativeMax$4(nativeCeil((end - start) / (step || 1)), 0), result = Array(length); + while (length--) { + result[fromRight ? length : ++index] = start; + start += step; + } + return result; + } + + function createRange(fromRight) { + return function(start, end, step) { + if (step && typeof step != "number" && isIterateeCall(start, end, step)) { + end = step = void 0; + } + start = toFinite(start); + if (end === void 0) { + end = start; + start = 0; + } else { + end = toFinite(end); + } + step = step === void 0 ? start < end ? 1 : -1 : toFinite(step); + return baseRange(start, end, step, fromRight); + }; + } + + var range$1 = createRange(); + + var rangeRight = createRange(true); + + var WRAP_REARG_FLAG = 256; + var rearg = flatRest(function(func, indexes) { + return createWrap(func, WRAP_REARG_FLAG, void 0, void 0, void 0, indexes); + }); + + function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) { + eachFunc(collection, function(value, index, collection2) { + accumulator = initAccum ? (initAccum = false, value) : iteratee(accumulator, value, index, collection2); + }); + return accumulator; + } + + function reduce(collection, iteratee, accumulator) { + var func = isArray(collection) ? arrayReduce : baseReduce, initAccum = arguments.length < 3; + return func(collection, baseIteratee(iteratee), accumulator, initAccum, baseEach); + } + + function arrayReduceRight(array, iteratee, accumulator, initAccum) { + var length = array == null ? 0 : array.length; + if (initAccum && length) { + accumulator = array[--length]; + } + while (length--) { + accumulator = iteratee(accumulator, array[length], length, array); + } + return accumulator; + } + + function reduceRight(collection, iteratee, accumulator) { + var func = isArray(collection) ? arrayReduceRight : baseReduce, initAccum = arguments.length < 3; + return func(collection, baseIteratee(iteratee), accumulator, initAccum, baseEachRight); + } + + function reject(collection, predicate) { + var func = isArray(collection) ? arrayFilter : baseFilter; + return func(collection, negate(baseIteratee(predicate))); + } + + function remove(array, predicate) { + var result = []; + if (!(array && array.length)) { + return result; + } + var index = -1, indexes = [], length = array.length; + predicate = baseIteratee(predicate); + while (++index < length) { + var value = array[index]; + if (predicate(value, index, array)) { + result.push(value); + indexes.push(index); + } + } + basePullAt(array, indexes); + return result; + } + + function repeat(string, n, guard) { + if (guard ? isIterateeCall(string, n, guard) : n === void 0) { + n = 1; + } else { + n = toInteger(n); + } + return baseRepeat(toString(string), n); + } + + function replace() { + var args = arguments, string = toString(args[0]); + return args.length < 3 ? string : string.replace(args[1], args[2]); + } + + var FUNC_ERROR_TEXT$2 = "Expected a function"; + function rest(func, start) { + if (typeof func != "function") { + throw new TypeError(FUNC_ERROR_TEXT$2); + } + start = start === void 0 ? start : toInteger(start); + return baseRest(func, start); + } + + function result(object, path, defaultValue) { + path = castPath(path, object); + var index = -1, length = path.length; + if (!length) { + length = 1; + object = void 0; + } + while (++index < length) { + var value = object == null ? void 0 : object[toKey(path[index])]; + if (value === void 0) { + index = length; + value = defaultValue; + } + object = isFunction(value) ? value.call(object) : value; + } + return object; + } + + var arrayProto$1 = Array.prototype; + var nativeReverse = arrayProto$1.reverse; + function reverse(array) { + return array == null ? array : nativeReverse.call(array); + } + + var round$1 = createRound("round"); + + function arraySample(array) { + var length = array.length; + return length ? array[baseRandom(0, length - 1)] : void 0; + } + + function baseSample(collection) { + return arraySample(values(collection)); + } + + function sample(collection) { + var func = isArray(collection) ? arraySample : baseSample; + return func(collection); + } + + function shuffleSelf(array, size) { + var index = -1, length = array.length, lastIndex = length - 1; + size = size === void 0 ? length : size; + while (++index < size) { + var rand = baseRandom(index, lastIndex), value = array[rand]; + array[rand] = array[index]; + array[index] = value; + } + array.length = size; + return array; + } + + function arraySampleSize(array, n) { + return shuffleSelf(copyArray(array), baseClamp(n, 0, array.length)); + } + + function baseSampleSize(collection, n) { + var array = values(collection); + return shuffleSelf(array, baseClamp(n, 0, array.length)); + } + + function sampleSize(collection, n, guard) { + if (guard ? isIterateeCall(collection, n, guard) : n === void 0) { + n = 1; + } else { + n = toInteger(n); + } + var func = isArray(collection) ? arraySampleSize : baseSampleSize; + return func(collection, n); + } + + function set(object, path, value) { + return object == null ? object : baseSet(object, path, value); + } + + function setWith(object, path, value, customizer) { + customizer = typeof customizer == "function" ? customizer : void 0; + return object == null ? object : baseSet(object, path, value, customizer); + } + + function arrayShuffle(array) { + return shuffleSelf(copyArray(array)); + } + + function baseShuffle(collection) { + return shuffleSelf(values(collection)); + } + + function shuffle(collection) { + var func = isArray(collection) ? arrayShuffle : baseShuffle; + return func(collection); + } + + var mapTag = "[object Map]"; + var setTag = "[object Set]"; + function size(collection) { + if (collection == null) { + return 0; + } + if (isArrayLike(collection)) { + return isString(collection) ? stringSize(collection) : collection.length; + } + var tag = getTag$1(collection); + if (tag == mapTag || tag == setTag) { + return collection.size; + } + return baseKeys(collection).length; + } + + function slice(array, start, end) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + if (end && typeof end != "number" && isIterateeCall(array, start, end)) { + start = 0; + end = length; + } else { + start = start == null ? 0 : toInteger(start); + end = end === void 0 ? length : toInteger(end); + } + return baseSlice(array, start, end); + } + + var snakeCase = createCompounder(function(result, word, index) { + return result + (index ? "_" : "") + word.toLowerCase(); + }); + + function baseSome(collection, predicate) { + var result; + baseEach(collection, function(value, index, collection2) { + result = predicate(value, index, collection2); + return !result; + }); + return !!result; + } + + function some(collection, predicate, guard) { + var func = isArray(collection) ? arraySome : baseSome; + if (guard && isIterateeCall(collection, predicate, guard)) { + predicate = void 0; + } + return func(collection, baseIteratee(predicate)); + } + + var sortBy = baseRest(function(collection, iteratees) { + if (collection == null) { + return []; + } + var length = iteratees.length; + if (length > 1 && isIterateeCall(collection, iteratees[0], iteratees[1])) { + iteratees = []; + } else if (length > 2 && isIterateeCall(iteratees[0], iteratees[1], iteratees[2])) { + iteratees = [iteratees[0]]; + } + return baseOrderBy(collection, baseFlatten(iteratees, 1), []); + }); + + var MAX_ARRAY_LENGTH$4 = 4294967295; + var MAX_ARRAY_INDEX = MAX_ARRAY_LENGTH$4 - 1; + var nativeFloor = Math.floor; + var nativeMin$4 = Math.min; + function baseSortedIndexBy(array, value, iteratee, retHighest) { + var low = 0, high = array == null ? 0 : array.length; + if (high === 0) { + return 0; + } + value = iteratee(value); + var valIsNaN = value !== value, valIsNull = value === null, valIsSymbol = isSymbol(value), valIsUndefined = value === void 0; + while (low < high) { + var mid = nativeFloor((low + high) / 2), computed = iteratee(array[mid]), othIsDefined = computed !== void 0, othIsNull = computed === null, othIsReflexive = computed === computed, othIsSymbol = isSymbol(computed); + if (valIsNaN) { + var setLow = retHighest || othIsReflexive; + } else if (valIsUndefined) { + setLow = othIsReflexive && (retHighest || othIsDefined); + } else if (valIsNull) { + setLow = othIsReflexive && othIsDefined && (retHighest || !othIsNull); + } else if (valIsSymbol) { + setLow = othIsReflexive && othIsDefined && !othIsNull && (retHighest || !othIsSymbol); + } else if (othIsNull || othIsSymbol) { + setLow = false; + } else { + setLow = retHighest ? computed <= value : computed < value; + } + if (setLow) { + low = mid + 1; + } else { + high = mid; + } + } + return nativeMin$4(high, MAX_ARRAY_INDEX); + } + + var MAX_ARRAY_LENGTH$3 = 4294967295; + var HALF_MAX_ARRAY_LENGTH = MAX_ARRAY_LENGTH$3 >>> 1; + function baseSortedIndex(array, value, retHighest) { + var low = 0, high = array == null ? low : array.length; + if (typeof value == "number" && value === value && high <= HALF_MAX_ARRAY_LENGTH) { + while (low < high) { + var mid = low + high >>> 1, computed = array[mid]; + if (computed !== null && !isSymbol(computed) && (retHighest ? computed <= value : computed < value)) { + low = mid + 1; + } else { + high = mid; + } + } + return high; + } + return baseSortedIndexBy(array, value, identity, retHighest); + } + + function sortedIndex(array, value) { + return baseSortedIndex(array, value); + } + + function sortedIndexBy(array, value, iteratee) { + return baseSortedIndexBy(array, value, baseIteratee(iteratee)); + } + + function sortedIndexOf(array, value) { + var length = array == null ? 0 : array.length; + if (length) { + var index = baseSortedIndex(array, value); + if (index < length && eq(array[index], value)) { + return index; + } + } + return -1; + } + + function sortedLastIndex(array, value) { + return baseSortedIndex(array, value, true); + } + + function sortedLastIndexBy(array, value, iteratee) { + return baseSortedIndexBy(array, value, baseIteratee(iteratee), true); + } + + function sortedLastIndexOf(array, value) { + var length = array == null ? 0 : array.length; + if (length) { + var index = baseSortedIndex(array, value, true) - 1; + if (eq(array[index], value)) { + return index; + } + } + return -1; + } + + function baseSortedUniq(array, iteratee) { + var index = -1, length = array.length, resIndex = 0, result = []; + while (++index < length) { + var value = array[index], computed = iteratee ? iteratee(value) : value; + if (!index || !eq(computed, seen)) { + var seen = computed; + result[resIndex++] = value === 0 ? 0 : value; + } + } + return result; + } + + function sortedUniq(array) { + return array && array.length ? baseSortedUniq(array) : []; + } + + function sortedUniqBy(array, iteratee) { + return array && array.length ? baseSortedUniq(array, baseIteratee(iteratee)) : []; + } + + var MAX_ARRAY_LENGTH$2 = 4294967295; + function split(string, separator, limit) { + if (limit && typeof limit != "number" && isIterateeCall(string, separator, limit)) { + separator = limit = void 0; + } + limit = limit === void 0 ? MAX_ARRAY_LENGTH$2 : limit >>> 0; + if (!limit) { + return []; + } + string = toString(string); + if (string && (typeof separator == "string" || separator != null && !isRegExp(separator))) { + separator = baseToString(separator); + if (!separator && hasUnicode(string)) { + return castSlice(stringToArray(string), 0, limit); + } + } + return string.split(separator, limit); + } + + var FUNC_ERROR_TEXT$1 = "Expected a function"; + var nativeMax$3 = Math.max; + function spread(func, start) { + if (typeof func != "function") { + throw new TypeError(FUNC_ERROR_TEXT$1); + } + start = start == null ? 0 : nativeMax$3(toInteger(start), 0); + return baseRest(function(args) { + var array = args[start], otherArgs = castSlice(args, 0, start); + if (array) { + arrayPush(otherArgs, array); + } + return apply(func, this, otherArgs); + }); + } + + var startCase = createCompounder(function(result, word, index) { + return result + (index ? " " : "") + upperFirst(word); + }); + + function startsWith(string, target, position) { + string = toString(string); + position = position == null ? 0 : baseClamp(toInteger(position), 0, string.length); + target = baseToString(target); + return string.slice(position, position + target.length) == target; + } + + function stubObject() { + return {}; + } + + function stubString() { + return ""; + } + + function stubTrue() { + return true; + } + + var subtract = createMathOperation(function(minuend, subtrahend) { + return minuend - subtrahend; + }, 0); + + function sum$1(array) { + return array && array.length ? baseSum(array, identity) : 0; + } + + function sumBy(array, iteratee) { + return array && array.length ? baseSum(array, baseIteratee(iteratee)) : 0; + } + + function tail(array) { + var length = array == null ? 0 : array.length; + return length ? baseSlice(array, 1, length) : []; + } + + function take(array, n, guard) { + if (!(array && array.length)) { + return []; + } + n = guard || n === void 0 ? 1 : toInteger(n); + return baseSlice(array, 0, n < 0 ? 0 : n); + } + + function takeRight(array, n, guard) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + n = guard || n === void 0 ? 1 : toInteger(n); + n = length - n; + return baseSlice(array, n < 0 ? 0 : n, length); + } + + function takeRightWhile(array, predicate) { + return array && array.length ? baseWhile(array, baseIteratee(predicate), false, true) : []; + } + + function takeWhile(array, predicate) { + return array && array.length ? baseWhile(array, baseIteratee(predicate)) : []; + } + + function tap(value, interceptor) { + interceptor(value); + return value; + } + + var objectProto$2 = Object.prototype; + var hasOwnProperty$2 = objectProto$2.hasOwnProperty; + function customDefaultsAssignIn(objValue, srcValue, key, object) { + if (objValue === void 0 || eq(objValue, objectProto$2[key]) && !hasOwnProperty$2.call(object, key)) { + return srcValue; + } + return objValue; + } + + var stringEscapes = { + "\\": "\\", + "'": "'", + "\n": "n", + "\r": "r", + "\u2028": "u2028", + "\u2029": "u2029" + }; + function escapeStringChar(chr) { + return "\\" + stringEscapes[chr]; + } + + var reInterpolate = /<%=([\s\S]+?)%>/g; + + var reEscape = /<%-([\s\S]+?)%>/g; + + var reEvaluate = /<%([\s\S]+?)%>/g; + + var templateSettings = { + "escape": reEscape, + "evaluate": reEvaluate, + "interpolate": reInterpolate, + "variable": "", + "imports": { + "_": { "escape": escape } + } + }; + + var INVALID_TEMPL_VAR_ERROR_TEXT = "Invalid `variable` option passed into `_.template`"; + var reEmptyStringLeading = /\b__p \+= '';/g; + var reEmptyStringMiddle = /\b(__p \+=) '' \+/g; + var reEmptyStringTrailing = /(__e\(.*?\)|\b__t\)) \+\n'';/g; + var reForbiddenIdentifierChars = /[()=,{}\[\]\/\s]/; + var reEsTemplate = /\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g; + var reNoMatch = /($^)/; + var reUnescapedString = /['\n\r\u2028\u2029\\]/g; + var objectProto$1 = Object.prototype; + var hasOwnProperty$1 = objectProto$1.hasOwnProperty; + function template(string, options, guard) { + var settings = templateSettings.imports._.templateSettings || templateSettings; + if (guard && isIterateeCall(string, options, guard)) { + options = void 0; + } + string = toString(string); + options = assignInWith({}, options, settings, customDefaultsAssignIn); + var imports = assignInWith({}, options.imports, settings.imports, customDefaultsAssignIn), importsKeys = keys(imports), importsValues = baseValues(imports, importsKeys); + var isEscaping, isEvaluating, index = 0, interpolate = options.interpolate || reNoMatch, source = "__p += '"; + var reDelimiters = RegExp((options.escape || reNoMatch).source + "|" + interpolate.source + "|" + (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source + "|" + (options.evaluate || reNoMatch).source + "|$", "g"); + var sourceURL = hasOwnProperty$1.call(options, "sourceURL") ? "//# sourceURL=" + (options.sourceURL + "").replace(/\s/g, " ") + "\n" : ""; + string.replace(reDelimiters, function(match, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset) { + interpolateValue || (interpolateValue = esTemplateValue); + source += string.slice(index, offset).replace(reUnescapedString, escapeStringChar); + if (escapeValue) { + isEscaping = true; + source += "' +\n__e(" + escapeValue + ") +\n'"; + } + if (evaluateValue) { + isEvaluating = true; + source += "';\n" + evaluateValue + ";\n__p += '"; + } + if (interpolateValue) { + source += "' +\n((__t = (" + interpolateValue + ")) == null ? '' : __t) +\n'"; + } + index = offset + match.length; + return match; + }); + source += "';\n"; + var variable = hasOwnProperty$1.call(options, "variable") && options.variable; + if (!variable) { + source = "with (obj) {\n" + source + "\n}\n"; + } else if (reForbiddenIdentifierChars.test(variable)) { + throw new Error(INVALID_TEMPL_VAR_ERROR_TEXT); + } + source = (isEvaluating ? source.replace(reEmptyStringLeading, "") : source).replace(reEmptyStringMiddle, "$1").replace(reEmptyStringTrailing, "$1;"); + source = "function(" + (variable || "obj") + ") {\n" + (variable ? "" : "obj || (obj = {});\n") + "var __t, __p = ''" + (isEscaping ? ", __e = _.escape" : "") + (isEvaluating ? ", __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n" : ";\n") + source + "return __p\n}"; + var result = attempt(function() { + return Function(importsKeys, sourceURL + "return " + source).apply(void 0, importsValues); + }); + result.source = source; + if (isError(result)) { + throw result; + } + return result; + } + + var FUNC_ERROR_TEXT = "Expected a function"; + function throttle(func, wait, options) { + var leading = true, trailing = true; + if (typeof func != "function") { + throw new TypeError(FUNC_ERROR_TEXT); + } + if (isObject(options)) { + leading = "leading" in options ? !!options.leading : leading; + trailing = "trailing" in options ? !!options.trailing : trailing; + } + return debounce(func, wait, { + "leading": leading, + "maxWait": wait, + "trailing": trailing + }); + } + + function thru(value, interceptor) { + return interceptor(value); + } + + var MAX_SAFE_INTEGER$1 = 9007199254740991; + var MAX_ARRAY_LENGTH$1 = 4294967295; + var nativeMin$3 = Math.min; + function times(n, iteratee) { + n = toInteger(n); + if (n < 1 || n > MAX_SAFE_INTEGER$1) { + return []; + } + var index = MAX_ARRAY_LENGTH$1, length = nativeMin$3(n, MAX_ARRAY_LENGTH$1); + iteratee = castFunction(iteratee); + n -= MAX_ARRAY_LENGTH$1; + var result = baseTimes(length, iteratee); + while (++index < n) { + iteratee(index); + } + return result; + } + + function wrapperToIterator() { + return this; + } + + function baseWrapperValue(value, actions) { + var result = value; + if (result instanceof LazyWrapper) { + result = result.value(); + } + return arrayReduce(actions, function(result2, action) { + return action.func.apply(action.thisArg, arrayPush([result2], action.args)); + }, result); + } + + function wrapperValue() { + return baseWrapperValue(this.__wrapped__, this.__actions__); + } + + function toLower(value) { + return toString(value).toLowerCase(); + } + + function toPath(value) { + if (isArray(value)) { + return arrayMap(value, toKey); + } + return isSymbol(value) ? [value] : copyArray(stringToPath(toString(value))); + } + + var MAX_SAFE_INTEGER = 9007199254740991; + function toSafeInteger(value) { + return value ? baseClamp(toInteger(value), -MAX_SAFE_INTEGER, MAX_SAFE_INTEGER) : value === 0 ? value : 0; + } + + function toUpper(value) { + return toString(value).toUpperCase(); + } + + function transform(object, iteratee, accumulator) { + var isArr = isArray(object), isArrLike = isArr || isBuffer(object) || isTypedArray(object); + iteratee = baseIteratee(iteratee); + if (accumulator == null) { + var Ctor = object && object.constructor; + if (isArrLike) { + accumulator = isArr ? new Ctor() : []; + } else if (isObject(object)) { + accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object)) : {}; + } else { + accumulator = {}; + } + } + (isArrLike ? arrayEach : baseForOwn)(object, function(value, index, object2) { + return iteratee(accumulator, value, index, object2); + }); + return accumulator; + } + + function charsEndIndex(strSymbols, chrSymbols) { + var index = strSymbols.length; + while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) { + } + return index; + } + + function charsStartIndex(strSymbols, chrSymbols) { + var index = -1, length = strSymbols.length; + while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) { + } + return index; + } + + function trim(string, chars, guard) { + string = toString(string); + if (string && (guard || chars === void 0)) { + return baseTrim(string); + } + if (!string || !(chars = baseToString(chars))) { + return string; + } + var strSymbols = stringToArray(string), chrSymbols = stringToArray(chars), start = charsStartIndex(strSymbols, chrSymbols), end = charsEndIndex(strSymbols, chrSymbols) + 1; + return castSlice(strSymbols, start, end).join(""); + } + + function trimEnd(string, chars, guard) { + string = toString(string); + if (string && (guard || chars === void 0)) { + return string.slice(0, trimmedEndIndex(string) + 1); + } + if (!string || !(chars = baseToString(chars))) { + return string; + } + var strSymbols = stringToArray(string), end = charsEndIndex(strSymbols, stringToArray(chars)) + 1; + return castSlice(strSymbols, 0, end).join(""); + } + + var reTrimStart = /^\s+/; + function trimStart(string, chars, guard) { + string = toString(string); + if (string && (guard || chars === void 0)) { + return string.replace(reTrimStart, ""); + } + if (!string || !(chars = baseToString(chars))) { + return string; + } + var strSymbols = stringToArray(string), start = charsStartIndex(strSymbols, stringToArray(chars)); + return castSlice(strSymbols, start).join(""); + } + + var DEFAULT_TRUNC_LENGTH = 30; + var DEFAULT_TRUNC_OMISSION = "..."; + var reFlags = /\w*$/; + function truncate(string, options) { + var length = DEFAULT_TRUNC_LENGTH, omission = DEFAULT_TRUNC_OMISSION; + if (isObject(options)) { + var separator = "separator" in options ? options.separator : separator; + length = "length" in options ? toInteger(options.length) : length; + omission = "omission" in options ? baseToString(options.omission) : omission; + } + string = toString(string); + var strLength = string.length; + if (hasUnicode(string)) { + var strSymbols = stringToArray(string); + strLength = strSymbols.length; + } + if (length >= strLength) { + return string; + } + var end = length - stringSize(omission); + if (end < 1) { + return omission; + } + var result = strSymbols ? castSlice(strSymbols, 0, end).join("") : string.slice(0, end); + if (separator === void 0) { + return result + omission; + } + if (strSymbols) { + end += result.length - end; + } + if (isRegExp(separator)) { + if (string.slice(end).search(separator)) { + var match, substring = result; + if (!separator.global) { + separator = RegExp(separator.source, toString(reFlags.exec(separator)) + "g"); + } + separator.lastIndex = 0; + while (match = separator.exec(substring)) { + var newEnd = match.index; + } + result = result.slice(0, newEnd === void 0 ? end : newEnd); + } + } else if (string.indexOf(baseToString(separator), end) != end) { + var index = result.lastIndexOf(separator); + if (index > -1) { + result = result.slice(0, index); + } + } + return result + omission; + } + + function unary(func) { + return ary(func, 1); + } + + var htmlUnescapes = { + "&": "&", + "<": "<", + ">": ">", + """: '"', + "'": "'" + }; + var unescapeHtmlChar = basePropertyOf(htmlUnescapes); + + var reEscapedHtml = /&(?:amp|lt|gt|quot|#39);/g; + var reHasEscapedHtml = RegExp(reEscapedHtml.source); + function unescape(string) { + string = toString(string); + return string && reHasEscapedHtml.test(string) ? string.replace(reEscapedHtml, unescapeHtmlChar) : string; + } + + var INFINITY = 1 / 0; + var createSet = !(Set$1 && 1 / setToArray(new Set$1([, -0]))[1] == INFINITY) ? noop : function(values) { + return new Set$1(values); + }; + + var LARGE_ARRAY_SIZE = 200; + function baseUniq(array, iteratee, comparator) { + var index = -1, includes = arrayIncludes, length = array.length, isCommon = true, result = [], seen = result; + if (comparator) { + isCommon = false; + includes = arrayIncludesWith; + } else if (length >= LARGE_ARRAY_SIZE) { + var set = iteratee ? null : createSet(array); + if (set) { + return setToArray(set); + } + isCommon = false; + includes = cacheHas; + seen = new SetCache(); + } else { + seen = iteratee ? [] : result; + } + outer: + while (++index < length) { + var value = array[index], computed = iteratee ? iteratee(value) : value; + value = comparator || value !== 0 ? value : 0; + if (isCommon && computed === computed) { + var seenIndex = seen.length; + while (seenIndex--) { + if (seen[seenIndex] === computed) { + continue outer; + } + } + if (iteratee) { + seen.push(computed); + } + result.push(value); + } else if (!includes(seen, computed, comparator)) { + if (seen !== result) { + seen.push(computed); + } + result.push(value); + } + } + return result; + } + + var union = baseRest(function(arrays) { + return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true)); + }); + + var unionBy = baseRest(function(arrays) { + var iteratee = last(arrays); + if (isArrayLikeObject(iteratee)) { + iteratee = void 0; + } + return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true), baseIteratee(iteratee)); + }); + + var unionWith = baseRest(function(arrays) { + var comparator = last(arrays); + comparator = typeof comparator == "function" ? comparator : void 0; + return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true), void 0, comparator); + }); + + function uniq(array) { + return array && array.length ? baseUniq(array) : []; + } + + function uniqBy(array, iteratee) { + return array && array.length ? baseUniq(array, baseIteratee(iteratee)) : []; + } + + function uniqWith(array, comparator) { + comparator = typeof comparator == "function" ? comparator : void 0; + return array && array.length ? baseUniq(array, void 0, comparator) : []; + } + + var idCounter = 0; + function uniqueId(prefix) { + var id = ++idCounter; + return toString(prefix) + id; + } + + function unset(object, path) { + return object == null ? true : baseUnset(object, path); + } + + var nativeMax$2 = Math.max; + function unzip(array) { + if (!(array && array.length)) { + return []; + } + var length = 0; + array = arrayFilter(array, function(group) { + if (isArrayLikeObject(group)) { + length = nativeMax$2(group.length, length); + return true; + } + }); + return baseTimes(length, function(index) { + return arrayMap(array, baseProperty(index)); + }); + } + + function unzipWith(array, iteratee) { + if (!(array && array.length)) { + return []; + } + var result = unzip(array); + if (iteratee == null) { + return result; + } + return arrayMap(result, function(group) { + return apply(iteratee, void 0, group); + }); + } + + function baseUpdate(object, path, updater, customizer) { + return baseSet(object, path, updater(baseGet(object, path)), customizer); + } + + function update(object, path, updater) { + return object == null ? object : baseUpdate(object, path, castFunction(updater)); + } + + function updateWith(object, path, updater, customizer) { + customizer = typeof customizer == "function" ? customizer : void 0; + return object == null ? object : baseUpdate(object, path, castFunction(updater), customizer); + } + + var upperCase = createCompounder(function(result, word, index) { + return result + (index ? " " : "") + word.toUpperCase(); + }); + + function valuesIn(object) { + return object == null ? [] : baseValues(object, keysIn(object)); + } + + var without = baseRest(function(array, values) { + return isArrayLikeObject(array) ? baseDifference(array, values) : []; + }); + + function wrap(value, wrapper) { + return partial(castFunction(wrapper), value); + } + + var wrapperAt = flatRest(function(paths) { + var length = paths.length, start = length ? paths[0] : 0, value = this.__wrapped__, interceptor = function(object) { + return baseAt(object, paths); + }; + if (length > 1 || this.__actions__.length || !(value instanceof LazyWrapper) || !isIndex(start)) { + return this.thru(interceptor); + } + value = value.slice(start, +start + (length ? 1 : 0)); + value.__actions__.push({ + "func": thru, + "args": [interceptor], + "thisArg": void 0 + }); + return new LodashWrapper(value, this.__chain__).thru(function(array) { + if (length && !array.length) { + array.push(void 0); + } + return array; + }); + }); + + function wrapperChain() { + return chain(this); + } + + function wrapperReverse() { + var value = this.__wrapped__; + if (value instanceof LazyWrapper) { + var wrapped = value; + if (this.__actions__.length) { + wrapped = new LazyWrapper(this); + } + wrapped = wrapped.reverse(); + wrapped.__actions__.push({ + "func": thru, + "args": [reverse], + "thisArg": void 0 + }); + return new LodashWrapper(wrapped, this.__chain__); + } + return this.thru(reverse); + } + + function baseXor(arrays, iteratee, comparator) { + var length = arrays.length; + if (length < 2) { + return length ? baseUniq(arrays[0]) : []; + } + var index = -1, result = Array(length); + while (++index < length) { + var array = arrays[index], othIndex = -1; + while (++othIndex < length) { + if (othIndex != index) { + result[index] = baseDifference(result[index] || array, arrays[othIndex], iteratee, comparator); + } + } + } + return baseUniq(baseFlatten(result, 1), iteratee, comparator); + } + + var xor = baseRest(function(arrays) { + return baseXor(arrayFilter(arrays, isArrayLikeObject)); + }); + + var xorBy = baseRest(function(arrays) { + var iteratee = last(arrays); + if (isArrayLikeObject(iteratee)) { + iteratee = void 0; + } + return baseXor(arrayFilter(arrays, isArrayLikeObject), baseIteratee(iteratee)); + }); + + var xorWith = baseRest(function(arrays) { + var comparator = last(arrays); + comparator = typeof comparator == "function" ? comparator : void 0; + return baseXor(arrayFilter(arrays, isArrayLikeObject), void 0, comparator); + }); + + var zip = baseRest(unzip); + + function baseZipObject(props, values, assignFunc) { + var index = -1, length = props.length, valsLength = values.length, result = {}; + while (++index < length) { + var value = index < valsLength ? values[index] : void 0; + assignFunc(result, props[index], value); + } + return result; + } + + function zipObject(props, values) { + return baseZipObject(props || [], values || [], assignValue); + } + + function zipObjectDeep(props, values) { + return baseZipObject(props || [], values || [], baseSet); + } + + var zipWith = baseRest(function(arrays) { + var length = arrays.length, iteratee = length > 1 ? arrays[length - 1] : void 0; + iteratee = typeof iteratee == "function" ? (arrays.pop(), iteratee) : void 0; + return unzipWith(arrays, iteratee); + }); + + var array = { + chunk, + compact, + concat, + difference, + differenceBy, + differenceWith, + drop, + dropRight, + dropRightWhile, + dropWhile, + fill, + findIndex, + findLastIndex, + first: head, + flatten, + flattenDeep, + flattenDepth, + fromPairs, + head, + indexOf, + initial, + intersection, + intersectionBy, + intersectionWith, + join, + last, + lastIndexOf, + nth, + pull, + pullAll, + pullAllBy, + pullAllWith, + pullAt, + remove, + reverse, + slice, + sortedIndex, + sortedIndexBy, + sortedIndexOf, + sortedLastIndex, + sortedLastIndexBy, + sortedLastIndexOf, + sortedUniq, + sortedUniqBy, + tail, + take, + takeRight, + takeRightWhile, + takeWhile, + union, + unionBy, + unionWith, + uniq, + uniqBy, + uniqWith, + unzip, + unzipWith, + without, + xor, + xorBy, + xorWith, + zip, + zipObject, + zipObjectDeep, + zipWith + }; + + var collection = { + countBy, + each: forEach, + eachRight: forEachRight, + every, + filter, + find, + findLast, + flatMap, + flatMapDeep, + flatMapDepth, + forEach, + forEachRight, + groupBy, + includes, + invokeMap, + keyBy, + map, + orderBy: orderBy$1, + partition, + reduce, + reduceRight, + reject, + sample, + sampleSize, + shuffle, + size, + some, + sortBy + }; + + var date$1 = { + now + }; + + var func = { + after, + ary, + before, + bind, + bindKey, + curry, + curryRight, + debounce, + defer, + delay, + flip, + memoize, + negate, + once, + overArgs, + partial, + partialRight, + rearg, + rest, + spread, + throttle, + unary, + wrap + }; + + var lang = { + castArray: castArray$1, + clone, + cloneDeep, + cloneDeepWith, + cloneWith, + conformsTo, + eq, + gt: gt$1, + gte, + isArguments, + isArray, + isArrayBuffer, + isArrayLike, + isArrayLikeObject, + isBoolean, + isBuffer, + isDate, + isElement: isElement$2, + isEmpty: isEmpty$1, + isEqual: isEqual$1, + isEqualWith, + isError, + isFinite, + isFunction, + isInteger, + isLength, + isMap, + isMatch, + isMatchWith, + isNaN: isNaN$1, + isNative, + isNil, + isNull, + isNumber, + isObject, + isObjectLike, + isPlainObject, + isRegExp, + isSafeInteger, + isSet, + isString, + isSymbol, + isTypedArray, + isUndefined: isUndefined$1, + isWeakMap, + isWeakSet, + lt: lt$1, + lte, + toArray, + toFinite, + toInteger, + toLength, + toNumber, + toPlainObject, + toSafeInteger, + toString + }; + + var math = { + add, + ceil, + divide, + floor: floor$1, + max: max$3, + maxBy, + mean, + meanBy, + min: min$3, + minBy, + multiply, + round: round$1, + subtract, + sum: sum$1, + sumBy + }; + + var number = { + clamp, + inRange, + random + }; + + var object = { + assign, + assignIn, + assignInWith, + assignWith, + at: at$1, + create, + defaults, + defaultsDeep, + entries: toPairs, + entriesIn: toPairsIn, + extend: assignIn, + extendWith: assignInWith, + findKey, + findLastKey, + forIn, + forInRight, + forOwn, + forOwnRight, + functions, + functionsIn, + get, + has, + hasIn, + invert, + invertBy, + invoke, + keys, + keysIn, + mapKeys, + mapValues, + merge, + mergeWith, + omit, + omitBy, + pick, + pickBy, + result, + set, + setWith, + toPairs, + toPairsIn, + transform, + unset, + update, + updateWith, + values, + valuesIn + }; + + var seq = { + at: wrapperAt, + chain, + commit: wrapperCommit, + lodash, + next: wrapperNext, + plant: wrapperPlant, + reverse: wrapperReverse, + tap, + thru, + toIterator: wrapperToIterator, + toJSON: wrapperValue, + value: wrapperValue, + valueOf: wrapperValue, + wrapperChain + }; + + var string$1 = { + camelCase, + capitalize: capitalize$1, + deburr, + endsWith, + escape, + escapeRegExp, + kebabCase, + lowerCase, + lowerFirst, + pad, + padEnd, + padStart, + parseInt: parseInt$1, + repeat, + replace, + snakeCase, + split, + startCase, + startsWith, + template, + templateSettings, + toLower, + toUpper, + trim, + trimEnd, + trimStart, + truncate, + unescape, + upperCase, + upperFirst, + words + }; + + var util = { + attempt, + bindAll, + cond, + conforms, + constant, + defaultTo, + flow, + flowRight, + identity, + iteratee, + matches, + matchesProperty, + method, + methodOf, + mixin: mixin$1, + noop, + nthArg, + over, + overEvery, + overSome, + property, + propertyOf, + range: range$1, + rangeRight, + stubArray, + stubFalse, + stubObject, + stubString, + stubTrue, + times, + toPath, + uniqueId + }; + + function lazyClone() { + var result = new LazyWrapper(this.__wrapped__); + result.__actions__ = copyArray(this.__actions__); + result.__dir__ = this.__dir__; + result.__filtered__ = this.__filtered__; + result.__iteratees__ = copyArray(this.__iteratees__); + result.__takeCount__ = this.__takeCount__; + result.__views__ = copyArray(this.__views__); + return result; + } + + function lazyReverse() { + if (this.__filtered__) { + var result = new LazyWrapper(this); + result.__dir__ = -1; + result.__filtered__ = true; + } else { + result = this.clone(); + result.__dir__ *= -1; + } + return result; + } + + var nativeMax$1 = Math.max; + var nativeMin$2 = Math.min; + function getView(start, end, transforms) { + var index = -1, length = transforms.length; + while (++index < length) { + var data = transforms[index], size = data.size; + switch (data.type) { + case "drop": + start += size; + break; + case "dropRight": + end -= size; + break; + case "take": + end = nativeMin$2(end, start + size); + break; + case "takeRight": + start = nativeMax$1(start, end - size); + break; + } + } + return { "start": start, "end": end }; + } + + var LAZY_FILTER_FLAG$1 = 1; + var LAZY_MAP_FLAG = 2; + var nativeMin$1 = Math.min; + function lazyValue() { + var array = this.__wrapped__.value(), dir = this.__dir__, isArr = isArray(array), isRight = dir < 0, arrLength = isArr ? array.length : 0, view = getView(0, arrLength, this.__views__), start = view.start, end = view.end, length = end - start, index = isRight ? end : start - 1, iteratees = this.__iteratees__, iterLength = iteratees.length, resIndex = 0, takeCount = nativeMin$1(length, this.__takeCount__); + if (!isArr || !isRight && arrLength == length && takeCount == length) { + return baseWrapperValue(array, this.__actions__); + } + var result = []; + outer: + while (length-- && resIndex < takeCount) { + index += dir; + var iterIndex = -1, value = array[index]; + while (++iterIndex < iterLength) { + var data = iteratees[iterIndex], iteratee = data.iteratee, type = data.type, computed = iteratee(value); + if (type == LAZY_MAP_FLAG) { + value = computed; + } else if (!computed) { + if (type == LAZY_FILTER_FLAG$1) { + continue outer; + } else { + break outer; + } + } + } + result[resIndex++] = value; + } + return result; + } + + var VERSION = "4.17.21"; + var WRAP_BIND_KEY_FLAG = 2; + var LAZY_FILTER_FLAG = 1; + var LAZY_WHILE_FLAG = 3; + var MAX_ARRAY_LENGTH = 4294967295; + var arrayProto = Array.prototype; + var objectProto = Object.prototype; + var hasOwnProperty = objectProto.hasOwnProperty; + var symIterator = Symbol$1 ? Symbol$1.iterator : void 0; + var nativeMax = Math.max; + var nativeMin = Math.min; + var mixin = function(func2) { + return function(object2, source, options) { + if (options == null) { + var isObj = isObject(source), props = isObj && keys(source), methodNames = props && props.length && baseFunctions(source, props); + if (!(methodNames ? methodNames.length : isObj)) { + options = source; + source = object2; + object2 = this; + } + } + return func2(object2, source, options); + }; + }(mixin$1); + lodash.after = func.after; + lodash.ary = func.ary; + lodash.assign = object.assign; + lodash.assignIn = object.assignIn; + lodash.assignInWith = object.assignInWith; + lodash.assignWith = object.assignWith; + lodash.at = object.at; + lodash.before = func.before; + lodash.bind = func.bind; + lodash.bindAll = util.bindAll; + lodash.bindKey = func.bindKey; + lodash.castArray = lang.castArray; + lodash.chain = seq.chain; + lodash.chunk = array.chunk; + lodash.compact = array.compact; + lodash.concat = array.concat; + lodash.cond = util.cond; + lodash.conforms = util.conforms; + lodash.constant = util.constant; + lodash.countBy = collection.countBy; + lodash.create = object.create; + lodash.curry = func.curry; + lodash.curryRight = func.curryRight; + lodash.debounce = func.debounce; + lodash.defaults = object.defaults; + lodash.defaultsDeep = object.defaultsDeep; + lodash.defer = func.defer; + lodash.delay = func.delay; + lodash.difference = array.difference; + lodash.differenceBy = array.differenceBy; + lodash.differenceWith = array.differenceWith; + lodash.drop = array.drop; + lodash.dropRight = array.dropRight; + lodash.dropRightWhile = array.dropRightWhile; + lodash.dropWhile = array.dropWhile; + lodash.fill = array.fill; + lodash.filter = collection.filter; + lodash.flatMap = collection.flatMap; + lodash.flatMapDeep = collection.flatMapDeep; + lodash.flatMapDepth = collection.flatMapDepth; + lodash.flatten = array.flatten; + lodash.flattenDeep = array.flattenDeep; + lodash.flattenDepth = array.flattenDepth; + lodash.flip = func.flip; + lodash.flow = util.flow; + lodash.flowRight = util.flowRight; + lodash.fromPairs = array.fromPairs; + lodash.functions = object.functions; + lodash.functionsIn = object.functionsIn; + lodash.groupBy = collection.groupBy; + lodash.initial = array.initial; + lodash.intersection = array.intersection; + lodash.intersectionBy = array.intersectionBy; + lodash.intersectionWith = array.intersectionWith; + lodash.invert = object.invert; + lodash.invertBy = object.invertBy; + lodash.invokeMap = collection.invokeMap; + lodash.iteratee = util.iteratee; + lodash.keyBy = collection.keyBy; + lodash.keys = keys; + lodash.keysIn = object.keysIn; + lodash.map = collection.map; + lodash.mapKeys = object.mapKeys; + lodash.mapValues = object.mapValues; + lodash.matches = util.matches; + lodash.matchesProperty = util.matchesProperty; + lodash.memoize = func.memoize; + lodash.merge = object.merge; + lodash.mergeWith = object.mergeWith; + lodash.method = util.method; + lodash.methodOf = util.methodOf; + lodash.mixin = mixin; + lodash.negate = negate; + lodash.nthArg = util.nthArg; + lodash.omit = object.omit; + lodash.omitBy = object.omitBy; + lodash.once = func.once; + lodash.orderBy = collection.orderBy; + lodash.over = util.over; + lodash.overArgs = func.overArgs; + lodash.overEvery = util.overEvery; + lodash.overSome = util.overSome; + lodash.partial = func.partial; + lodash.partialRight = func.partialRight; + lodash.partition = collection.partition; + lodash.pick = object.pick; + lodash.pickBy = object.pickBy; + lodash.property = util.property; + lodash.propertyOf = util.propertyOf; + lodash.pull = array.pull; + lodash.pullAll = array.pullAll; + lodash.pullAllBy = array.pullAllBy; + lodash.pullAllWith = array.pullAllWith; + lodash.pullAt = array.pullAt; + lodash.range = util.range; + lodash.rangeRight = util.rangeRight; + lodash.rearg = func.rearg; + lodash.reject = collection.reject; + lodash.remove = array.remove; + lodash.rest = func.rest; + lodash.reverse = array.reverse; + lodash.sampleSize = collection.sampleSize; + lodash.set = object.set; + lodash.setWith = object.setWith; + lodash.shuffle = collection.shuffle; + lodash.slice = array.slice; + lodash.sortBy = collection.sortBy; + lodash.sortedUniq = array.sortedUniq; + lodash.sortedUniqBy = array.sortedUniqBy; + lodash.split = string$1.split; + lodash.spread = func.spread; + lodash.tail = array.tail; + lodash.take = array.take; + lodash.takeRight = array.takeRight; + lodash.takeRightWhile = array.takeRightWhile; + lodash.takeWhile = array.takeWhile; + lodash.tap = seq.tap; + lodash.throttle = func.throttle; + lodash.thru = thru; + lodash.toArray = lang.toArray; + lodash.toPairs = object.toPairs; + lodash.toPairsIn = object.toPairsIn; + lodash.toPath = util.toPath; + lodash.toPlainObject = lang.toPlainObject; + lodash.transform = object.transform; + lodash.unary = func.unary; + lodash.union = array.union; + lodash.unionBy = array.unionBy; + lodash.unionWith = array.unionWith; + lodash.uniq = array.uniq; + lodash.uniqBy = array.uniqBy; + lodash.uniqWith = array.uniqWith; + lodash.unset = object.unset; + lodash.unzip = array.unzip; + lodash.unzipWith = array.unzipWith; + lodash.update = object.update; + lodash.updateWith = object.updateWith; + lodash.values = object.values; + lodash.valuesIn = object.valuesIn; + lodash.without = array.without; + lodash.words = string$1.words; + lodash.wrap = func.wrap; + lodash.xor = array.xor; + lodash.xorBy = array.xorBy; + lodash.xorWith = array.xorWith; + lodash.zip = array.zip; + lodash.zipObject = array.zipObject; + lodash.zipObjectDeep = array.zipObjectDeep; + lodash.zipWith = array.zipWith; + lodash.entries = object.toPairs; + lodash.entriesIn = object.toPairsIn; + lodash.extend = object.assignIn; + lodash.extendWith = object.assignInWith; + mixin(lodash, lodash); + lodash.add = math.add; + lodash.attempt = util.attempt; + lodash.camelCase = string$1.camelCase; + lodash.capitalize = string$1.capitalize; + lodash.ceil = math.ceil; + lodash.clamp = number.clamp; + lodash.clone = lang.clone; + lodash.cloneDeep = lang.cloneDeep; + lodash.cloneDeepWith = lang.cloneDeepWith; + lodash.cloneWith = lang.cloneWith; + lodash.conformsTo = lang.conformsTo; + lodash.deburr = string$1.deburr; + lodash.defaultTo = util.defaultTo; + lodash.divide = math.divide; + lodash.endsWith = string$1.endsWith; + lodash.eq = lang.eq; + lodash.escape = string$1.escape; + lodash.escapeRegExp = string$1.escapeRegExp; + lodash.every = collection.every; + lodash.find = collection.find; + lodash.findIndex = array.findIndex; + lodash.findKey = object.findKey; + lodash.findLast = collection.findLast; + lodash.findLastIndex = array.findLastIndex; + lodash.findLastKey = object.findLastKey; + lodash.floor = math.floor; + lodash.forEach = collection.forEach; + lodash.forEachRight = collection.forEachRight; + lodash.forIn = object.forIn; + lodash.forInRight = object.forInRight; + lodash.forOwn = object.forOwn; + lodash.forOwnRight = object.forOwnRight; + lodash.get = object.get; + lodash.gt = lang.gt; + lodash.gte = lang.gte; + lodash.has = object.has; + lodash.hasIn = object.hasIn; + lodash.head = array.head; + lodash.identity = identity; + lodash.includes = collection.includes; + lodash.indexOf = array.indexOf; + lodash.inRange = number.inRange; + lodash.invoke = object.invoke; + lodash.isArguments = lang.isArguments; + lodash.isArray = isArray; + lodash.isArrayBuffer = lang.isArrayBuffer; + lodash.isArrayLike = lang.isArrayLike; + lodash.isArrayLikeObject = lang.isArrayLikeObject; + lodash.isBoolean = lang.isBoolean; + lodash.isBuffer = lang.isBuffer; + lodash.isDate = lang.isDate; + lodash.isElement = lang.isElement; + lodash.isEmpty = lang.isEmpty; + lodash.isEqual = lang.isEqual; + lodash.isEqualWith = lang.isEqualWith; + lodash.isError = lang.isError; + lodash.isFinite = lang.isFinite; + lodash.isFunction = lang.isFunction; + lodash.isInteger = lang.isInteger; + lodash.isLength = lang.isLength; + lodash.isMap = lang.isMap; + lodash.isMatch = lang.isMatch; + lodash.isMatchWith = lang.isMatchWith; + lodash.isNaN = lang.isNaN; + lodash.isNative = lang.isNative; + lodash.isNil = lang.isNil; + lodash.isNull = lang.isNull; + lodash.isNumber = lang.isNumber; + lodash.isObject = isObject; + lodash.isObjectLike = lang.isObjectLike; + lodash.isPlainObject = lang.isPlainObject; + lodash.isRegExp = lang.isRegExp; + lodash.isSafeInteger = lang.isSafeInteger; + lodash.isSet = lang.isSet; + lodash.isString = lang.isString; + lodash.isSymbol = lang.isSymbol; + lodash.isTypedArray = lang.isTypedArray; + lodash.isUndefined = lang.isUndefined; + lodash.isWeakMap = lang.isWeakMap; + lodash.isWeakSet = lang.isWeakSet; + lodash.join = array.join; + lodash.kebabCase = string$1.kebabCase; + lodash.last = last; + lodash.lastIndexOf = array.lastIndexOf; + lodash.lowerCase = string$1.lowerCase; + lodash.lowerFirst = string$1.lowerFirst; + lodash.lt = lang.lt; + lodash.lte = lang.lte; + lodash.max = math.max; + lodash.maxBy = math.maxBy; + lodash.mean = math.mean; + lodash.meanBy = math.meanBy; + lodash.min = math.min; + lodash.minBy = math.minBy; + lodash.stubArray = util.stubArray; + lodash.stubFalse = util.stubFalse; + lodash.stubObject = util.stubObject; + lodash.stubString = util.stubString; + lodash.stubTrue = util.stubTrue; + lodash.multiply = math.multiply; + lodash.nth = array.nth; + lodash.noop = util.noop; + lodash.now = date$1.now; + lodash.pad = string$1.pad; + lodash.padEnd = string$1.padEnd; + lodash.padStart = string$1.padStart; + lodash.parseInt = string$1.parseInt; + lodash.random = number.random; + lodash.reduce = collection.reduce; + lodash.reduceRight = collection.reduceRight; + lodash.repeat = string$1.repeat; + lodash.replace = string$1.replace; + lodash.result = object.result; + lodash.round = math.round; + lodash.sample = collection.sample; + lodash.size = collection.size; + lodash.snakeCase = string$1.snakeCase; + lodash.some = collection.some; + lodash.sortedIndex = array.sortedIndex; + lodash.sortedIndexBy = array.sortedIndexBy; + lodash.sortedIndexOf = array.sortedIndexOf; + lodash.sortedLastIndex = array.sortedLastIndex; + lodash.sortedLastIndexBy = array.sortedLastIndexBy; + lodash.sortedLastIndexOf = array.sortedLastIndexOf; + lodash.startCase = string$1.startCase; + lodash.startsWith = string$1.startsWith; + lodash.subtract = math.subtract; + lodash.sum = math.sum; + lodash.sumBy = math.sumBy; + lodash.template = string$1.template; + lodash.times = util.times; + lodash.toFinite = lang.toFinite; + lodash.toInteger = toInteger; + lodash.toLength = lang.toLength; + lodash.toLower = string$1.toLower; + lodash.toNumber = lang.toNumber; + lodash.toSafeInteger = lang.toSafeInteger; + lodash.toString = lang.toString; + lodash.toUpper = string$1.toUpper; + lodash.trim = string$1.trim; + lodash.trimEnd = string$1.trimEnd; + lodash.trimStart = string$1.trimStart; + lodash.truncate = string$1.truncate; + lodash.unescape = string$1.unescape; + lodash.uniqueId = util.uniqueId; + lodash.upperCase = string$1.upperCase; + lodash.upperFirst = string$1.upperFirst; + lodash.each = collection.forEach; + lodash.eachRight = collection.forEachRight; + lodash.first = array.head; + mixin(lodash, function() { + var source = {}; + baseForOwn(lodash, function(func2, methodName) { + if (!hasOwnProperty.call(lodash.prototype, methodName)) { + source[methodName] = func2; + } + }); + return source; + }(), { "chain": false }); + lodash.VERSION = VERSION; + (lodash.templateSettings = string$1.templateSettings).imports._ = lodash; + arrayEach(["bind", "bindKey", "curry", "curryRight", "partial", "partialRight"], function(methodName) { + lodash[methodName].placeholder = lodash; + }); + arrayEach(["drop", "take"], function(methodName, index) { + LazyWrapper.prototype[methodName] = function(n) { + n = n === void 0 ? 1 : nativeMax(toInteger(n), 0); + var result = this.__filtered__ && !index ? new LazyWrapper(this) : this.clone(); + if (result.__filtered__) { + result.__takeCount__ = nativeMin(n, result.__takeCount__); + } else { + result.__views__.push({ + "size": nativeMin(n, MAX_ARRAY_LENGTH), + "type": methodName + (result.__dir__ < 0 ? "Right" : "") + }); + } + return result; + }; + LazyWrapper.prototype[methodName + "Right"] = function(n) { + return this.reverse()[methodName](n).reverse(); + }; + }); + arrayEach(["filter", "map", "takeWhile"], function(methodName, index) { + var type = index + 1, isFilter = type == LAZY_FILTER_FLAG || type == LAZY_WHILE_FLAG; + LazyWrapper.prototype[methodName] = function(iteratee) { + var result = this.clone(); + result.__iteratees__.push({ + "iteratee": baseIteratee(iteratee), + "type": type + }); + result.__filtered__ = result.__filtered__ || isFilter; + return result; + }; + }); + arrayEach(["head", "last"], function(methodName, index) { + var takeName = "take" + (index ? "Right" : ""); + LazyWrapper.prototype[methodName] = function() { + return this[takeName](1).value()[0]; + }; + }); + arrayEach(["initial", "tail"], function(methodName, index) { + var dropName = "drop" + (index ? "" : "Right"); + LazyWrapper.prototype[methodName] = function() { + return this.__filtered__ ? new LazyWrapper(this) : this[dropName](1); + }; + }); + LazyWrapper.prototype.compact = function() { + return this.filter(identity); + }; + LazyWrapper.prototype.find = function(predicate) { + return this.filter(predicate).head(); + }; + LazyWrapper.prototype.findLast = function(predicate) { + return this.reverse().find(predicate); + }; + LazyWrapper.prototype.invokeMap = baseRest(function(path, args) { + if (typeof path == "function") { + return new LazyWrapper(this); + } + return this.map(function(value) { + return baseInvoke(value, path, args); + }); + }); + LazyWrapper.prototype.reject = function(predicate) { + return this.filter(negate(baseIteratee(predicate))); + }; + LazyWrapper.prototype.slice = function(start, end) { + start = toInteger(start); + var result = this; + if (result.__filtered__ && (start > 0 || end < 0)) { + return new LazyWrapper(result); + } + if (start < 0) { + result = result.takeRight(-start); + } else if (start) { + result = result.drop(start); + } + if (end !== void 0) { + end = toInteger(end); + result = end < 0 ? result.dropRight(-end) : result.take(end - start); + } + return result; + }; + LazyWrapper.prototype.takeRightWhile = function(predicate) { + return this.reverse().takeWhile(predicate).reverse(); + }; + LazyWrapper.prototype.toArray = function() { + return this.take(MAX_ARRAY_LENGTH); + }; + baseForOwn(LazyWrapper.prototype, function(func2, methodName) { + var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName), isTaker = /^(?:head|last)$/.test(methodName), lodashFunc = lodash[isTaker ? "take" + (methodName == "last" ? "Right" : "") : methodName], retUnwrapped = isTaker || /^find/.test(methodName); + if (!lodashFunc) { + return; + } + lodash.prototype[methodName] = function() { + var value = this.__wrapped__, args = isTaker ? [1] : arguments, isLazy = value instanceof LazyWrapper, iteratee = args[0], useLazy = isLazy || isArray(value); + var interceptor = function(value2) { + var result2 = lodashFunc.apply(lodash, arrayPush([value2], args)); + return isTaker && chainAll ? result2[0] : result2; + }; + if (useLazy && checkIteratee && typeof iteratee == "function" && iteratee.length != 1) { + isLazy = useLazy = false; + } + var chainAll = this.__chain__, isHybrid = !!this.__actions__.length, isUnwrapped = retUnwrapped && !chainAll, onlyLazy = isLazy && !isHybrid; + if (!retUnwrapped && useLazy) { + value = onlyLazy ? value : new LazyWrapper(this); + var result = func2.apply(value, args); + result.__actions__.push({ "func": thru, "args": [interceptor], "thisArg": void 0 }); + return new LodashWrapper(result, chainAll); + } + if (isUnwrapped && onlyLazy) { + return func2.apply(this, args); + } + result = this.thru(interceptor); + return isUnwrapped ? isTaker ? result.value()[0] : result.value() : result; + }; + }); + arrayEach(["pop", "push", "shift", "sort", "splice", "unshift"], function(methodName) { + var func2 = arrayProto[methodName], chainName = /^(?:push|sort|unshift)$/.test(methodName) ? "tap" : "thru", retUnwrapped = /^(?:pop|shift)$/.test(methodName); + lodash.prototype[methodName] = function() { + var args = arguments; + if (retUnwrapped && !this.__chain__) { + var value = this.value(); + return func2.apply(isArray(value) ? value : [], args); + } + return this[chainName](function(value2) { + return func2.apply(isArray(value2) ? value2 : [], args); + }); + }; + }); + baseForOwn(LazyWrapper.prototype, function(func2, methodName) { + var lodashFunc = lodash[methodName]; + if (lodashFunc) { + var key = lodashFunc.name + ""; + if (!hasOwnProperty.call(realNames, key)) { + realNames[key] = []; + } + realNames[key].push({ "name": methodName, "func": lodashFunc }); + } + }); + realNames[createHybrid(void 0, WRAP_BIND_KEY_FLAG).name] = [{ + "name": "wrapper", + "func": void 0 + }]; + LazyWrapper.prototype.clone = lazyClone; + LazyWrapper.prototype.reverse = lazyReverse; + LazyWrapper.prototype.value = lazyValue; + lodash.prototype.at = seq.at; + lodash.prototype.chain = seq.wrapperChain; + lodash.prototype.commit = seq.commit; + lodash.prototype.next = seq.next; + lodash.prototype.plant = seq.plant; + lodash.prototype.reverse = seq.reverse; + lodash.prototype.toJSON = lodash.prototype.valueOf = lodash.prototype.value = seq.value; + lodash.prototype.first = lodash.prototype.head; + if (symIterator) { + lodash.prototype[symIterator] = seq.toIterator; + } + /** + * @license + * Lodash (Custom Build) <https://lodash.com/> + * Build: `lodash modularize exports="es" -o ./` + * Copyright OpenJS Foundation and other contributors <https://openjsf.org/> + * Released under MIT license <https://lodash.com/license> + * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE> + * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + */ + + const isUndefined = (val) => val === void 0; + const isEmpty = (val) => !val && val !== 0 || isArray$1(val) && val.length === 0 || isObject$1(val) && !Object.keys(val).length; + const isElement$1 = (e) => { + if (typeof Element === "undefined") + return false; + return e instanceof Element; + }; + const isPropAbsent = (prop) => { + return isNil(prop); + }; + const isStringNumber = (val) => { + if (!isString$1(val)) { + return false; + } + return !Number.isNaN(Number(val)); + }; + + const escapeStringRegexp = (string = "") => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d"); + const capitalize = (str) => capitalize$2(str); + + const keysOf = (arr) => Object.keys(arr); + const entriesOf = (arr) => Object.entries(arr); + const getProp = (obj, path, defaultValue) => { + return { + get value() { + return get(obj, path, defaultValue); + }, + set value(val) { + set(obj, path, val); + } + }; + }; + + class ElementPlusError extends Error { + constructor(m) { + super(m); + this.name = "ElementPlusError"; + } + } + function throwError(scope, m) { + throw new ElementPlusError(`[${scope}] ${m}`); + } + function debugWarn(scope, message) { + } + + const classNameToArray = (cls = "") => cls.split(" ").filter((item) => !!item.trim()); + const hasClass = (el, cls) => { + if (!el || !cls) + return false; + if (cls.includes(" ")) + throw new Error("className should not contain space."); + return el.classList.contains(cls); + }; + const addClass = (el, cls) => { + if (!el || !cls.trim()) + return; + el.classList.add(...classNameToArray(cls)); + }; + const removeClass = (el, cls) => { + if (!el || !cls.trim()) + return; + el.classList.remove(...classNameToArray(cls)); + }; + const getStyle = (element, styleName) => { + var _a; + if (!isClient || !element || !styleName) + return ""; + let key = camelize(styleName); + if (key === "float") + key = "cssFloat"; + try { + const style = element.style[key]; + if (style) + return style; + const computed = (_a = document.defaultView) == null ? void 0 : _a.getComputedStyle(element, ""); + return computed ? computed[key] : ""; + } catch (e) { + return element.style[key]; + } + }; + function addUnit(value, defaultUnit = "px") { + if (!value) + return ""; + if (isNumber$1(value) || isStringNumber(value)) { + return `${value}${defaultUnit}`; + } else if (isString$1(value)) { + return value; + } + } + + const isScroll = (el, isVertical) => { + if (!isClient) + return false; + const key = { + undefined: "overflow", + true: "overflow-y", + false: "overflow-x" + }[String(isVertical)]; + const overflow = getStyle(el, key); + return ["scroll", "auto", "overlay"].some((s) => overflow.includes(s)); + }; + const getScrollContainer = (el, isVertical) => { + if (!isClient) + return; + let parent = el; + while (parent) { + if ([window, document, document.documentElement].includes(parent)) + return window; + if (isScroll(parent, isVertical)) + return parent; + parent = parent.parentNode; + } + return parent; + }; + let scrollBarWidth; + const getScrollBarWidth = (namespace) => { + var _a; + if (!isClient) + return 0; + if (scrollBarWidth !== void 0) + return scrollBarWidth; + const outer = document.createElement("div"); + outer.className = `${namespace}-scrollbar__wrap`; + outer.style.visibility = "hidden"; + outer.style.width = "100px"; + outer.style.position = "absolute"; + outer.style.top = "-9999px"; + document.body.appendChild(outer); + const widthNoScroll = outer.offsetWidth; + outer.style.overflow = "scroll"; + const inner = document.createElement("div"); + inner.style.width = "100%"; + outer.appendChild(inner); + const widthWithScroll = inner.offsetWidth; + (_a = outer.parentNode) == null ? void 0 : _a.removeChild(outer); + scrollBarWidth = widthNoScroll - widthWithScroll; + return scrollBarWidth; + }; + function scrollIntoView(container, selected) { + if (!isClient) + return; + if (!selected) { + container.scrollTop = 0; + return; + } + const offsetParents = []; + let pointer = selected.offsetParent; + while (pointer !== null && container !== pointer && container.contains(pointer)) { + offsetParents.push(pointer); + pointer = pointer.offsetParent; + } + const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0); + const bottom = top + selected.offsetHeight; + const viewRectTop = container.scrollTop; + const viewRectBottom = viewRectTop + container.clientHeight; + if (top < viewRectTop) { + container.scrollTop = top; + } else if (bottom > viewRectBottom) { + container.scrollTop = bottom - container.clientHeight; + } + } + + let target = !isClient ? void 0 : document.body; + function createGlobalNode(id) { + const el = document.createElement("div"); + if (id !== void 0) { + el.setAttribute("id", id); + } + target.appendChild(el); + return el; + } + function removeGlobalNode(el) { + el.remove(); + } + + var export_helper_default = (sfc, props) => { + let target = sfc.__vccOpts || sfc; + for (let [key, val] of props) + target[key] = val; + return target; + }; + var _sfc_main6 = { + name: "ArrowDown" + }; + var _hoisted_16$1 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_26 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z" + }, null, -1); + var _hoisted_36 = [ + _hoisted_26 + ]; + function _sfc_render6(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_16$1, _hoisted_36); + } + var arrow_down_default = /* @__PURE__ */ export_helper_default(_sfc_main6, [["render", _sfc_render6], ["__file", "arrow-down.vue"]]); + var _sfc_main8 = { + name: "ArrowLeft" + }; + var _hoisted_18$1 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_28 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z" + }, null, -1); + var _hoisted_38 = [ + _hoisted_28 + ]; + function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_18$1, _hoisted_38); + } + var arrow_left_default = /* @__PURE__ */ export_helper_default(_sfc_main8, [["render", _sfc_render8], ["__file", "arrow-left.vue"]]); + var _sfc_main10 = { + name: "ArrowRight" + }; + var _hoisted_110 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_210 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z" + }, null, -1); + var _hoisted_310 = [ + _hoisted_210 + ]; + function _sfc_render10(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_110, _hoisted_310); + } + var arrow_right_default = /* @__PURE__ */ export_helper_default(_sfc_main10, [["render", _sfc_render10], ["__file", "arrow-right.vue"]]); + var _sfc_main12 = { + name: "ArrowUp" + }; + var _hoisted_112 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_212 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z" + }, null, -1); + var _hoisted_312 = [ + _hoisted_212 + ]; + function _sfc_render12(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_112, _hoisted_312); + } + var arrow_up_default = /* @__PURE__ */ export_helper_default(_sfc_main12, [["render", _sfc_render12], ["__file", "arrow-up.vue"]]); + var _sfc_main14 = { + name: "Back" + }; + var _hoisted_114 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_214 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z" + }, null, -1); + var _hoisted_314 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z" + }, null, -1); + var _hoisted_44 = [ + _hoisted_214, + _hoisted_314 + ]; + function _sfc_render14(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_114, _hoisted_44); + } + var back_default = /* @__PURE__ */ export_helper_default(_sfc_main14, [["render", _sfc_render14], ["__file", "back.vue"]]); + var _sfc_main29 = { + name: "Calendar" + }; + var _hoisted_129 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_229 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M128 384v512h768V192H768v32a32 32 0 1 1-64 0v-32H320v32a32 32 0 0 1-64 0v-32H128v128h768v64H128zm192-256h384V96a32 32 0 1 1 64 0v32h160a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h160V96a32 32 0 0 1 64 0v32zm-32 384h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm192-192h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm192-192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64z" + }, null, -1); + var _hoisted_328 = [ + _hoisted_229 + ]; + function _sfc_render29(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_129, _hoisted_328); + } + var calendar_default = /* @__PURE__ */ export_helper_default(_sfc_main29, [["render", _sfc_render29], ["__file", "calendar.vue"]]); + var _sfc_main34 = { + name: "CaretRight" + }; + var _hoisted_134 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_234 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M384 192v640l384-320.064z" + }, null, -1); + var _hoisted_333 = [ + _hoisted_234 + ]; + function _sfc_render34(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_134, _hoisted_333); + } + var caret_right_default = /* @__PURE__ */ export_helper_default(_sfc_main34, [["render", _sfc_render34], ["__file", "caret-right.vue"]]); + var _sfc_main35 = { + name: "CaretTop" + }; + var _hoisted_135 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_235 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 320 192 704h639.936z" + }, null, -1); + var _hoisted_334 = [ + _hoisted_235 + ]; + function _sfc_render35(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_135, _hoisted_334); + } + var caret_top_default = /* @__PURE__ */ export_helper_default(_sfc_main35, [["render", _sfc_render35], ["__file", "caret-top.vue"]]); + var _sfc_main43 = { + name: "Check" + }; + var _hoisted_143 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_243 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z" + }, null, -1); + var _hoisted_342 = [ + _hoisted_243 + ]; + function _sfc_render43(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_143, _hoisted_342); + } + var check_default = /* @__PURE__ */ export_helper_default(_sfc_main43, [["render", _sfc_render43], ["__file", "check.vue"]]); + var _sfc_main47 = { + name: "CircleCheckFilled" + }; + var _hoisted_147 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_247 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z" + }, null, -1); + var _hoisted_346 = [ + _hoisted_247 + ]; + function _sfc_render47(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_147, _hoisted_346); + } + var circle_check_filled_default = /* @__PURE__ */ export_helper_default(_sfc_main47, [["render", _sfc_render47], ["__file", "circle-check-filled.vue"]]); + var _sfc_main48 = { + name: "CircleCheck" + }; + var _hoisted_148 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_248 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" + }, null, -1); + var _hoisted_347 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z" + }, null, -1); + var _hoisted_414 = [ + _hoisted_248, + _hoisted_347 + ]; + function _sfc_render48(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_148, _hoisted_414); + } + var circle_check_default = /* @__PURE__ */ export_helper_default(_sfc_main48, [["render", _sfc_render48], ["__file", "circle-check.vue"]]); + var _sfc_main49 = { + name: "CircleCloseFilled" + }; + var _hoisted_149 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_249 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z" + }, null, -1); + var _hoisted_348 = [ + _hoisted_249 + ]; + function _sfc_render49(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_149, _hoisted_348); + } + var circle_close_filled_default = /* @__PURE__ */ export_helper_default(_sfc_main49, [["render", _sfc_render49], ["__file", "circle-close-filled.vue"]]); + var _sfc_main50 = { + name: "CircleClose" + }; + var _hoisted_150 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_250 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z" + }, null, -1); + var _hoisted_349 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" + }, null, -1); + var _hoisted_415 = [ + _hoisted_250, + _hoisted_349 + ]; + function _sfc_render50(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_150, _hoisted_415); + } + var circle_close_default = /* @__PURE__ */ export_helper_default(_sfc_main50, [["render", _sfc_render50], ["__file", "circle-close.vue"]]); + var _sfc_main53 = { + name: "Clock" + }; + var _hoisted_153 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_253 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" + }, null, -1); + var _hoisted_352 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z" + }, null, -1); + var _hoisted_417 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32z" + }, null, -1); + var _hoisted_55 = [ + _hoisted_253, + _hoisted_352, + _hoisted_417 + ]; + function _sfc_render53(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_153, _hoisted_55); + } + var clock_default = /* @__PURE__ */ export_helper_default(_sfc_main53, [["render", _sfc_render53], ["__file", "clock.vue"]]); + var _sfc_main55 = { + name: "Close" + }; + var _hoisted_155 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_255 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z" + }, null, -1); + var _hoisted_354 = [ + _hoisted_255 + ]; + function _sfc_render55(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_155, _hoisted_354); + } + var close_default = /* @__PURE__ */ export_helper_default(_sfc_main55, [["render", _sfc_render55], ["__file", "close.vue"]]); + var _sfc_main71 = { + name: "DArrowLeft" + }; + var _hoisted_171 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_271 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z" + }, null, -1); + var _hoisted_370 = [ + _hoisted_271 + ]; + function _sfc_render71(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_171, _hoisted_370); + } + var d_arrow_left_default = /* @__PURE__ */ export_helper_default(_sfc_main71, [["render", _sfc_render71], ["__file", "d-arrow-left.vue"]]); + var _sfc_main72 = { + name: "DArrowRight" + }; + var _hoisted_172 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_272 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688zm-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z" + }, null, -1); + var _hoisted_371 = [ + _hoisted_272 + ]; + function _sfc_render72(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_172, _hoisted_371); + } + var d_arrow_right_default = /* @__PURE__ */ export_helper_default(_sfc_main72, [["render", _sfc_render72], ["__file", "d-arrow-right.vue"]]); + var _sfc_main79 = { + name: "Delete" + }; + var _hoisted_179 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_279 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z" + }, null, -1); + var _hoisted_378 = [ + _hoisted_279 + ]; + function _sfc_render79(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_179, _hoisted_378); + } + var delete_default = /* @__PURE__ */ export_helper_default(_sfc_main79, [["render", _sfc_render79], ["__file", "delete.vue"]]); + var _sfc_main89 = { + name: "Document" + }; + var _hoisted_189 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_289 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z" + }, null, -1); + var _hoisted_388 = [ + _hoisted_289 + ]; + function _sfc_render89(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_189, _hoisted_388); + } + var document_default = /* @__PURE__ */ export_helper_default(_sfc_main89, [["render", _sfc_render89], ["__file", "document.vue"]]); + var _sfc_main117 = { + name: "FullScreen" + }; + var _hoisted_1117 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2117 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z" + }, null, -1); + var _hoisted_3116 = [ + _hoisted_2117 + ]; + function _sfc_render117(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1117, _hoisted_3116); + } + var full_screen_default = /* @__PURE__ */ export_helper_default(_sfc_main117, [["render", _sfc_render117], ["__file", "full-screen.vue"]]); + var _sfc_main130 = { + name: "Hide" + }; + var _hoisted_1130 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2130 = /* @__PURE__ */ vue.createElementVNode("path", { + d: "M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z", + fill: "currentColor" + }, null, -1); + var _hoisted_3129 = /* @__PURE__ */ vue.createElementVNode("path", { + d: "M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z", + fill: "currentColor" + }, null, -1); + var _hoisted_436 = [ + _hoisted_2130, + _hoisted_3129 + ]; + function _sfc_render130(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1130, _hoisted_436); + } + var hide_default = /* @__PURE__ */ export_helper_default(_sfc_main130, [["render", _sfc_render130], ["__file", "hide.vue"]]); + var _sfc_main140 = { + name: "InfoFilled" + }; + var _hoisted_1140 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2140 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 64a448 448 0 1 1 0 896.064A448 448 0 0 1 512 64zm67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344zM590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 0 1-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 0 1 7.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z" + }, null, -1); + var _hoisted_3139 = [ + _hoisted_2140 + ]; + function _sfc_render140(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1140, _hoisted_3139); + } + var info_filled_default = /* @__PURE__ */ export_helper_default(_sfc_main140, [["render", _sfc_render140], ["__file", "info-filled.vue"]]); + var _sfc_main147 = { + name: "Loading" + }; + var _hoisted_1147 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2147 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z" + }, null, -1); + var _hoisted_3146 = [ + _hoisted_2147 + ]; + function _sfc_render147(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1147, _hoisted_3146); + } + var loading_default = /* @__PURE__ */ export_helper_default(_sfc_main147, [["render", _sfc_render147], ["__file", "loading.vue"]]); + var _sfc_main165 = { + name: "Minus" + }; + var _hoisted_1165 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2165 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z" + }, null, -1); + var _hoisted_3164 = [ + _hoisted_2165 + ]; + function _sfc_render165(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1165, _hoisted_3164); + } + var minus_default = /* @__PURE__ */ export_helper_default(_sfc_main165, [["render", _sfc_render165], ["__file", "minus.vue"]]); + var _sfc_main170 = { + name: "MoreFilled" + }; + var _hoisted_1170 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2170 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M176 416a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224z" + }, null, -1); + var _hoisted_3169 = [ + _hoisted_2170 + ]; + function _sfc_render170(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1170, _hoisted_3169); + } + var more_filled_default = /* @__PURE__ */ export_helper_default(_sfc_main170, [["render", _sfc_render170], ["__file", "more-filled.vue"]]); + var _sfc_main171 = { + name: "More" + }; + var _hoisted_1171 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2171 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M176 416a112 112 0 1 0 0 224 112 112 0 0 0 0-224m0 64a48 48 0 1 1 0 96 48 48 0 0 1 0-96zm336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96z" + }, null, -1); + var _hoisted_3170 = [ + _hoisted_2171 + ]; + function _sfc_render171(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1171, _hoisted_3170); + } + var more_default = /* @__PURE__ */ export_helper_default(_sfc_main171, [["render", _sfc_render171], ["__file", "more.vue"]]); + var _sfc_main191 = { + name: "PictureFilled" + }; + var _hoisted_1191 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2191 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M96 896a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h832a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H96zm315.52-228.48-68.928-68.928a32 32 0 0 0-45.248 0L128 768.064h778.688l-242.112-290.56a32 32 0 0 0-49.216 0L458.752 665.408a32 32 0 0 1-47.232 2.112zM256 384a96 96 0 1 0 192.064-.064A96 96 0 0 0 256 384z" + }, null, -1); + var _hoisted_3190 = [ + _hoisted_2191 + ]; + function _sfc_render191(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1191, _hoisted_3190); + } + var picture_filled_default = /* @__PURE__ */ export_helper_default(_sfc_main191, [["render", _sfc_render191], ["__file", "picture-filled.vue"]]); + var _sfc_main197 = { + name: "Plus" + }; + var _hoisted_1197 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2197 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z" + }, null, -1); + var _hoisted_3196 = [ + _hoisted_2197 + ]; + function _sfc_render197(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1197, _hoisted_3196); + } + var plus_default = /* @__PURE__ */ export_helper_default(_sfc_main197, [["render", _sfc_render197], ["__file", "plus.vue"]]); + var _sfc_main206 = { + name: "QuestionFilled" + }; + var _hoisted_1206 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2206 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76 6.336-12.672 15.488-24.64 28.16-35.2 33.792-29.568 54.208-48.576 60.544-55.616 16.896-22.528 26.048-51.392 26.048-86.592 0-42.944-14.08-76.736-42.24-101.376-28.16-25.344-65.472-37.312-111.232-37.312zm-12.672 406.208a54.272 54.272 0 0 0-38.72 14.784 49.408 49.408 0 0 0-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.848 54.848 0 0 0 523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0 0 16.192-38.72 51.968 51.968 0 0 0-15.488-38.016 55.936 55.936 0 0 0-39.424-14.784z" + }, null, -1); + var _hoisted_3205 = [ + _hoisted_2206 + ]; + function _sfc_render206(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1206, _hoisted_3205); + } + var question_filled_default = /* @__PURE__ */ export_helper_default(_sfc_main206, [["render", _sfc_render206], ["__file", "question-filled.vue"]]); + var _sfc_main210 = { + name: "RefreshLeft" + }; + var _hoisted_1210 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2210 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z" + }, null, -1); + var _hoisted_3209 = [ + _hoisted_2210 + ]; + function _sfc_render210(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1210, _hoisted_3209); + } + var refresh_left_default = /* @__PURE__ */ export_helper_default(_sfc_main210, [["render", _sfc_render210], ["__file", "refresh-left.vue"]]); + var _sfc_main211 = { + name: "RefreshRight" + }; + var _hoisted_1211 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2211 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z" + }, null, -1); + var _hoisted_3210 = [ + _hoisted_2211 + ]; + function _sfc_render211(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1211, _hoisted_3210); + } + var refresh_right_default = /* @__PURE__ */ export_helper_default(_sfc_main211, [["render", _sfc_render211], ["__file", "refresh-right.vue"]]); + var _sfc_main217 = { + name: "ScaleToOriginal" + }; + var _hoisted_1217 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2217 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M813.176 180.706a60.235 60.235 0 0 1 60.236 60.235v481.883a60.235 60.235 0 0 1-60.236 60.235H210.824a60.235 60.235 0 0 1-60.236-60.235V240.94a60.235 60.235 0 0 1 60.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0 0 90.353 240.94v481.883a120.47 120.47 0 0 0 120.47 120.47h602.353a120.47 120.47 0 0 0 120.471-120.47V240.94a120.47 120.47 0 0 0-120.47-120.47zm-120.47 180.705a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 0 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zm-361.412 0a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 1 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zM512 361.412a30.118 30.118 0 0 0-30.118 30.117v30.118a30.118 30.118 0 0 0 60.236 0V391.53A30.118 30.118 0 0 0 512 361.412zM512 512a30.118 30.118 0 0 0-30.118 30.118v30.117a30.118 30.118 0 0 0 60.236 0v-30.117A30.118 30.118 0 0 0 512 512z" + }, null, -1); + var _hoisted_3216 = [ + _hoisted_2217 + ]; + function _sfc_render217(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1217, _hoisted_3216); + } + var scale_to_original_default = /* @__PURE__ */ export_helper_default(_sfc_main217, [["render", _sfc_render217], ["__file", "scale-to-original.vue"]]); + var _sfc_main220 = { + name: "Search" + }; + var _hoisted_1220 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2220 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z" + }, null, -1); + var _hoisted_3219 = [ + _hoisted_2220 + ]; + function _sfc_render220(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1220, _hoisted_3219); + } + var search_default = /* @__PURE__ */ export_helper_default(_sfc_main220, [["render", _sfc_render220], ["__file", "search.vue"]]); + var _sfc_main236 = { + name: "SortDown" + }; + var _hoisted_1236 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2236 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M576 96v709.568L333.312 562.816A32 32 0 1 0 288 608l297.408 297.344A32 32 0 0 0 640 882.688V96a32 32 0 0 0-64 0z" + }, null, -1); + var _hoisted_3235 = [ + _hoisted_2236 + ]; + function _sfc_render236(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1236, _hoisted_3235); + } + var sort_down_default = /* @__PURE__ */ export_helper_default(_sfc_main236, [["render", _sfc_render236], ["__file", "sort-down.vue"]]); + var _sfc_main237 = { + name: "SortUp" + }; + var _hoisted_1237 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2237 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M384 141.248V928a32 32 0 1 0 64 0V218.56l242.688 242.688A32 32 0 1 0 736 416L438.592 118.656A32 32 0 0 0 384 141.248z" + }, null, -1); + var _hoisted_3236 = [ + _hoisted_2237 + ]; + function _sfc_render237(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1237, _hoisted_3236); + } + var sort_up_default = /* @__PURE__ */ export_helper_default(_sfc_main237, [["render", _sfc_render237], ["__file", "sort-up.vue"]]); + var _sfc_main240 = { + name: "StarFilled" + }; + var _hoisted_1240 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2240 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z" + }, null, -1); + var _hoisted_3239 = [ + _hoisted_2240 + ]; + function _sfc_render240(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1240, _hoisted_3239); + } + var star_filled_default = /* @__PURE__ */ export_helper_default(_sfc_main240, [["render", _sfc_render240], ["__file", "star-filled.vue"]]); + var _sfc_main241 = { + name: "Star" + }; + var _hoisted_1241 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2241 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z" + }, null, -1); + var _hoisted_3240 = [ + _hoisted_2241 + ]; + function _sfc_render241(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1241, _hoisted_3240); + } + var star_default = /* @__PURE__ */ export_helper_default(_sfc_main241, [["render", _sfc_render241], ["__file", "star.vue"]]); + var _sfc_main243 = { + name: "SuccessFilled" + }; + var _hoisted_1243 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2243 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z" + }, null, -1); + var _hoisted_3242 = [ + _hoisted_2243 + ]; + function _sfc_render243(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1243, _hoisted_3242); + } + var success_filled_default = /* @__PURE__ */ export_helper_default(_sfc_main243, [["render", _sfc_render243], ["__file", "success-filled.vue"]]); + var _sfc_main274 = { + name: "View" + }; + var _hoisted_1274 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2274 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z" + }, null, -1); + var _hoisted_3273 = [ + _hoisted_2274 + ]; + function _sfc_render274(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1274, _hoisted_3273); + } + var view_default = /* @__PURE__ */ export_helper_default(_sfc_main274, [["render", _sfc_render274], ["__file", "view.vue"]]); + var _sfc_main277 = { + name: "WarningFilled" + }; + var _hoisted_1277 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2277 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256zm0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z" + }, null, -1); + var _hoisted_3276 = [ + _hoisted_2277 + ]; + function _sfc_render277(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1277, _hoisted_3276); + } + var warning_filled_default = /* @__PURE__ */ export_helper_default(_sfc_main277, [["render", _sfc_render277], ["__file", "warning-filled.vue"]]); + var _sfc_main282 = { + name: "ZoomIn" + }; + var _hoisted_1282 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2282 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z" + }, null, -1); + var _hoisted_3281 = [ + _hoisted_2282 + ]; + function _sfc_render282(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1282, _hoisted_3281); + } + var zoom_in_default = /* @__PURE__ */ export_helper_default(_sfc_main282, [["render", _sfc_render282], ["__file", "zoom-in.vue"]]); + var _sfc_main283 = { + name: "ZoomOut" + }; + var _hoisted_1283 = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg" + }; + var _hoisted_2283 = /* @__PURE__ */ vue.createElementVNode("path", { + fill: "currentColor", + d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z" + }, null, -1); + var _hoisted_3282 = [ + _hoisted_2283 + ]; + function _sfc_render283(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1283, _hoisted_3282); + } + var zoom_out_default = /* @__PURE__ */ export_helper_default(_sfc_main283, [["render", _sfc_render283], ["__file", "zoom-out.vue"]]); + /*! Element Plus Icons Vue v2.0.6 */ + + const epPropKey = "__epPropKey"; + const definePropType = (val) => val; + const isEpProp = (val) => isObject$1(val) && !!val[epPropKey]; + const buildProp = (prop, key) => { + if (!isObject$1(prop) || isEpProp(prop)) + return prop; + const { values, required, default: defaultValue, type, validator } = prop; + const _validator = values || validator ? (val) => { + let valid = false; + let allowedValues = []; + if (values) { + allowedValues = Array.from(values); + if (hasOwn(prop, "default")) { + allowedValues.push(defaultValue); + } + valid || (valid = allowedValues.includes(val)); + } + if (validator) + valid || (valid = validator(val)); + if (!valid && allowedValues.length > 0) { + const allowValuesText = [...new Set(allowedValues)].map((value) => JSON.stringify(value)).join(", "); + vue.warn(`Invalid prop: validation failed${key ? ` for prop "${key}"` : ""}. Expected one of [${allowValuesText}], got value ${JSON.stringify(val)}.`); + } + return valid; + } : void 0; + const epProp = { + type, + required: !!required, + validator: _validator, + [epPropKey]: true + }; + if (hasOwn(prop, "default")) + epProp.default = defaultValue; + return epProp; + }; + const buildProps = (props) => fromPairs(Object.entries(props).map(([key, option]) => [ + key, + buildProp(option, key) + ])); + + const iconPropType = definePropType([ + String, + Object, + Function + ]); + const CloseComponents = { + Close: close_default + }; + const TypeComponents = { + Close: close_default, + SuccessFilled: success_filled_default, + InfoFilled: info_filled_default, + WarningFilled: warning_filled_default, + CircleCloseFilled: circle_close_filled_default + }; + const TypeComponentsMap = { + success: success_filled_default, + warning: warning_filled_default, + error: circle_close_filled_default, + info: info_filled_default + }; + const ValidateComponentsMap = { + validating: loading_default, + success: circle_check_default, + error: circle_close_default + }; + + const withInstall = (main, extra) => { + main.install = (app) => { + for (const comp of [main, ...Object.values(extra != null ? extra : {})]) { + app.component(comp.name, comp); + } + }; + if (extra) { + for (const [key, comp] of Object.entries(extra)) { + main[key] = comp; + } + } + return main; + }; + const withInstallFunction = (fn, name) => { + fn.install = (app) => { + fn._context = app._context; + app.config.globalProperties[name] = fn; + }; + return fn; + }; + const withInstallDirective = (directive, name) => { + directive.install = (app) => { + app.directive(name, directive); + }; + return directive; + }; + const withNoopInstall = (component) => { + component.install = NOOP; + return component; + }; + + const composeRefs = (...refs) => { + return (el) => { + refs.forEach((ref) => { + if (isFunction$1(ref)) { + ref(el); + } else { + ref.value = el; + } + }); + }; + }; + + const EVENT_CODE = { + tab: "Tab", + enter: "Enter", + space: "Space", + left: "ArrowLeft", + up: "ArrowUp", + right: "ArrowRight", + down: "ArrowDown", + esc: "Escape", + delete: "Delete", + backspace: "Backspace", + numpadEnter: "NumpadEnter", + pageUp: "PageUp", + pageDown: "PageDown", + home: "Home", + end: "End" + }; + + const datePickTypes = [ + "year", + "month", + "date", + "dates", + "week", + "datetime", + "datetimerange", + "daterange", + "monthrange" + ]; + const WEEK_DAYS = [ + "sun", + "mon", + "tue", + "wed", + "thu", + "fri", + "sat" + ]; + + const UPDATE_MODEL_EVENT = "update:modelValue"; + const CHANGE_EVENT = "change"; + const INPUT_EVENT = "input"; + + const INSTALLED_KEY = Symbol("INSTALLED_KEY"); + + const componentSizes = ["", "default", "small", "large"]; + const componentSizeMap = { + large: 40, + default: 32, + small: 24 + }; + + const getComponentSize = (size) => { + return componentSizeMap[size || "default"]; + }; + + const isValidComponentSize = (val) => ["", ...componentSizes].includes(val); + + var PatchFlags = /* @__PURE__ */ ((PatchFlags2) => { + PatchFlags2[PatchFlags2["TEXT"] = 1] = "TEXT"; + PatchFlags2[PatchFlags2["CLASS"] = 2] = "CLASS"; + PatchFlags2[PatchFlags2["STYLE"] = 4] = "STYLE"; + PatchFlags2[PatchFlags2["PROPS"] = 8] = "PROPS"; + PatchFlags2[PatchFlags2["FULL_PROPS"] = 16] = "FULL_PROPS"; + PatchFlags2[PatchFlags2["HYDRATE_EVENTS"] = 32] = "HYDRATE_EVENTS"; + PatchFlags2[PatchFlags2["STABLE_FRAGMENT"] = 64] = "STABLE_FRAGMENT"; + PatchFlags2[PatchFlags2["KEYED_FRAGMENT"] = 128] = "KEYED_FRAGMENT"; + PatchFlags2[PatchFlags2["UNKEYED_FRAGMENT"] = 256] = "UNKEYED_FRAGMENT"; + PatchFlags2[PatchFlags2["NEED_PATCH"] = 512] = "NEED_PATCH"; + PatchFlags2[PatchFlags2["DYNAMIC_SLOTS"] = 1024] = "DYNAMIC_SLOTS"; + PatchFlags2[PatchFlags2["HOISTED"] = -1] = "HOISTED"; + PatchFlags2[PatchFlags2["BAIL"] = -2] = "BAIL"; + return PatchFlags2; + })(PatchFlags || {}); + function isFragment(node) { + return vue.isVNode(node) && node.type === vue.Fragment; + } + function isComment(node) { + return vue.isVNode(node) && node.type === vue.Comment; + } + function isValidElementNode(node) { + return vue.isVNode(node) && !isFragment(node) && !isComment(node); + } + const getNormalizedProps = (node) => { + if (!vue.isVNode(node)) { + return {}; + } + const raw = node.props || {}; + const type = (vue.isVNode(node.type) ? node.type.props : void 0) || {}; + const props = {}; + Object.keys(type).forEach((key) => { + if (hasOwn(type[key], "default")) { + props[key] = type[key].default; + } + }); + Object.keys(raw).forEach((key) => { + props[camelize(key)] = raw[key]; + }); + return props; + }; + const ensureOnlyChild = (children) => { + if (!isArray$1(children) || children.length > 1) { + throw new Error("expect to receive a single Vue element child"); + } + return children[0]; + }; + const flattedChildren = (children) => { + const vNodes = isArray$1(children) ? children : [children]; + const result = []; + vNodes.forEach((child) => { + var _a; + if (isArray$1(child)) { + result.push(...flattedChildren(child)); + } else if (vue.isVNode(child) && isArray$1(child.children)) { + result.push(...flattedChildren(child.children)); + } else { + result.push(child); + if (vue.isVNode(child) && ((_a = child.component) == null ? void 0 : _a.subTree)) { + result.push(...flattedChildren(child.component.subTree)); + } + } + }); + return result; + }; + + const unique = (arr) => [...new Set(arr)]; + const castArray = (arr) => { + if (!arr && arr !== 0) + return []; + return Array.isArray(arr) ? arr : [arr]; + }; + + const isFirefox = () => isClient && /firefox/i.test(window.navigator.userAgent); + + const isKorean = (text) => /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(text); + + const rAF = (fn) => isClient ? window.requestAnimationFrame(fn) : setTimeout(fn, 16); + const cAF = (handle) => isClient ? window.cancelAnimationFrame(handle) : clearTimeout(handle); + + const generateId = () => Math.floor(Math.random() * 1e4); + + const mutable = (val) => val; + + const DEFAULT_EXCLUDE_KEYS = ["class", "style"]; + const LISTENER_PREFIX = /^on[A-Z]/; + const useAttrs = (params = {}) => { + const { excludeListeners = false, excludeKeys } = params; + const allExcludeKeys = vue.computed(() => { + return ((excludeKeys == null ? void 0 : excludeKeys.value) || []).concat(DEFAULT_EXCLUDE_KEYS); + }); + const instance = vue.getCurrentInstance(); + if (!instance) { + return vue.computed(() => ({})); + } + return vue.computed(() => { + var _a; + return fromPairs(Object.entries((_a = instance.proxy) == null ? void 0 : _a.$attrs).filter(([key]) => !allExcludeKeys.value.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key)))); + }); + }; + + const useDeprecated = ({ from, replacement, scope, version, ref, type = "API" }, condition) => { + vue.watch(() => vue.unref(condition), (val) => { + }, { + immediate: true + }); + }; + + const useDraggable = (targetRef, dragRef, draggable) => { + let transform = { + offsetX: 0, + offsetY: 0 + }; + const onMousedown = (e) => { + const downX = e.clientX; + const downY = e.clientY; + const { offsetX, offsetY } = transform; + const targetRect = targetRef.value.getBoundingClientRect(); + const targetLeft = targetRect.left; + const targetTop = targetRect.top; + const targetWidth = targetRect.width; + const targetHeight = targetRect.height; + const clientWidth = document.documentElement.clientWidth; + const clientHeight = document.documentElement.clientHeight; + const minLeft = -targetLeft + offsetX; + const minTop = -targetTop + offsetY; + const maxLeft = clientWidth - targetLeft - targetWidth + offsetX; + const maxTop = clientHeight - targetTop - targetHeight + offsetY; + const onMousemove = (e2) => { + const moveX = Math.min(Math.max(offsetX + e2.clientX - downX, minLeft), maxLeft); + const moveY = Math.min(Math.max(offsetY + e2.clientY - downY, minTop), maxTop); + transform = { + offsetX: moveX, + offsetY: moveY + }; + targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`; + }; + const onMouseup = () => { + document.removeEventListener("mousemove", onMousemove); + document.removeEventListener("mouseup", onMouseup); + }; + document.addEventListener("mousemove", onMousemove); + document.addEventListener("mouseup", onMouseup); + }; + const onDraggable = () => { + if (dragRef.value && targetRef.value) { + dragRef.value.addEventListener("mousedown", onMousedown); + } + }; + const offDraggable = () => { + if (dragRef.value && targetRef.value) { + dragRef.value.removeEventListener("mousedown", onMousedown); + } + }; + vue.onMounted(() => { + vue.watchEffect(() => { + if (draggable.value) { + onDraggable(); + } else { + offDraggable(); + } + }); + }); + vue.onBeforeUnmount(() => { + offDraggable(); + }); + }; + + const useFocus = (el) => { + return { + focus: () => { + var _a, _b; + (_b = (_a = el.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a); + } + }; + }; + + var English = { + name: "en", + el: { + colorpicker: { + confirm: "OK", + clear: "Clear", + defaultLabel: "color picker", + description: "current color is {color}. press enter to select a new color." + }, + datepicker: { + now: "Now", + today: "Today", + cancel: "Cancel", + clear: "Clear", + confirm: "OK", + dateTablePrompt: "Use the arrow keys and enter to select the day of the month", + monthTablePrompt: "Use the arrow keys and enter to select the month", + yearTablePrompt: "Use the arrow keys and enter to select the year", + selectedDate: "Selected date", + selectDate: "Select date", + selectTime: "Select time", + startDate: "Start Date", + startTime: "Start Time", + endDate: "End Date", + endTime: "End Time", + prevYear: "Previous Year", + nextYear: "Next Year", + prevMonth: "Previous Month", + nextMonth: "Next Month", + year: "", + month1: "January", + month2: "February", + month3: "March", + month4: "April", + month5: "May", + month6: "June", + month7: "July", + month8: "August", + month9: "September", + month10: "October", + month11: "November", + month12: "December", + week: "week", + weeks: { + sun: "Sun", + mon: "Mon", + tue: "Tue", + wed: "Wed", + thu: "Thu", + fri: "Fri", + sat: "Sat" + }, + weeksFull: { + sun: "Sunday", + mon: "Monday", + tue: "Tuesday", + wed: "Wednesday", + thu: "Thursday", + fri: "Friday", + sat: "Saturday" + }, + months: { + jan: "Jan", + feb: "Feb", + mar: "Mar", + apr: "Apr", + may: "May", + jun: "Jun", + jul: "Jul", + aug: "Aug", + sep: "Sep", + oct: "Oct", + nov: "Nov", + dec: "Dec" + } + }, + inputNumber: { + decrease: "decrease number", + increase: "increase number" + }, + select: { + loading: "Loading", + noMatch: "No matching data", + noData: "No data", + placeholder: "Select" + }, + dropdown: { + toggleDropdown: "Toggle Dropdown" + }, + cascader: { + noMatch: "No matching data", + loading: "Loading", + placeholder: "Select", + noData: "No data" + }, + pagination: { + goto: "Go to", + pagesize: "/page", + total: "Total {total}", + pageClassifier: "", + page: "Page", + prev: "Go to previous page", + next: "Go to next page", + currentPage: "page {pager}", + prevPages: "Previous {pager} pages", + nextPages: "Next {pager} pages", + deprecationWarning: "Deprecated usages detected, please refer to the el-pagination documentation for more details" + }, + dialog: { + close: "Close this dialog" + }, + drawer: { + close: "Close this dialog" + }, + messagebox: { + title: "Message", + confirm: "OK", + cancel: "Cancel", + error: "Illegal input", + close: "Close this dialog" + }, + upload: { + deleteTip: "press delete to remove", + delete: "Delete", + preview: "Preview", + continue: "Continue" + }, + slider: { + defaultLabel: "slider between {min} and {max}", + defaultRangeStartLabel: "pick start value", + defaultRangeEndLabel: "pick end value" + }, + table: { + emptyText: "No Data", + confirmFilter: "Confirm", + resetFilter: "Reset", + clearFilter: "All", + sumText: "Sum" + }, + tree: { + emptyText: "No Data" + }, + transfer: { + noMatch: "No matching data", + noData: "No data", + titles: ["List 1", "List 2"], + filterPlaceholder: "Enter keyword", + noCheckedFormat: "{total} items", + hasCheckedFormat: "{checked}/{total} checked" + }, + image: { + error: "FAILED" + }, + pageHeader: { + title: "Back" + }, + popconfirm: { + confirmButtonText: "Yes", + cancelButtonText: "No" + } + } + }; + + const buildTranslator = (locale) => (path, option) => translate(path, option, vue.unref(locale)); + const translate = (path, option, locale) => get(locale, path, path).replace(/\{(\w+)\}/g, (_, key) => { + var _a; + return `${(_a = option == null ? void 0 : option[key]) != null ? _a : `{${key}}`}`; + }); + const buildLocaleContext = (locale) => { + const lang = vue.computed(() => vue.unref(locale).name); + const localeRef = vue.isRef(locale) ? locale : vue.ref(locale); + return { + lang, + locale: localeRef, + t: buildTranslator(locale) + }; + }; + const localeContextKey = Symbol("localeContextKey"); + const useLocale = (localeOverrides) => { + const locale = localeOverrides || vue.inject(localeContextKey, vue.ref()); + return buildLocaleContext(vue.computed(() => locale.value || English)); + }; + + let activeEffectScope; + function recordEffectScope(effect2, scope = activeEffectScope) { + if (scope && scope.active) { + scope.effects.push(effect2); + } + } + const createDep = (effects) => { + const dep = new Set(effects); + dep.w = 0; + dep.n = 0; + return dep; + }; + const wasTracked = (dep) => (dep.w & trackOpBit) > 0; + const newTracked = (dep) => (dep.n & trackOpBit) > 0; + const initDepMarkers = ({ deps }) => { + if (deps.length) { + for (let i = 0; i < deps.length; i++) { + deps[i].w |= trackOpBit; + } + } + }; + const finalizeDepMarkers = (effect2) => { + const { deps } = effect2; + if (deps.length) { + let ptr = 0; + for (let i = 0; i < deps.length; i++) { + const dep = deps[i]; + if (wasTracked(dep) && !newTracked(dep)) { + dep.delete(effect2); + } else { + deps[ptr++] = dep; + } + dep.w &= ~trackOpBit; + dep.n &= ~trackOpBit; + } + deps.length = ptr; + } + }; + let effectTrackDepth = 0; + let trackOpBit = 1; + const maxMarkerBits = 30; + let activeEffect; + class ReactiveEffect { + constructor(fn, scheduler2 = null, scope) { + this.fn = fn; + this.scheduler = scheduler2; + this.active = true; + this.deps = []; + this.parent = void 0; + recordEffectScope(this, scope); + } + run() { + if (!this.active) { + return this.fn(); + } + let parent = activeEffect; + let lastShouldTrack = shouldTrack; + while (parent) { + if (parent === this) { + return; + } + parent = parent.parent; + } + try { + this.parent = activeEffect; + activeEffect = this; + shouldTrack = true; + trackOpBit = 1 << ++effectTrackDepth; + if (effectTrackDepth <= maxMarkerBits) { + initDepMarkers(this); + } else { + cleanupEffect(this); + } + return this.fn(); + } finally { + if (effectTrackDepth <= maxMarkerBits) { + finalizeDepMarkers(this); + } + trackOpBit = 1 << --effectTrackDepth; + activeEffect = this.parent; + shouldTrack = lastShouldTrack; + this.parent = void 0; + if (this.deferStop) { + this.stop(); + } + } + } + stop() { + if (activeEffect === this) { + this.deferStop = true; + } else if (this.active) { + cleanupEffect(this); + if (this.onStop) { + this.onStop(); + } + this.active = false; + } + } + } + function cleanupEffect(effect2) { + const { deps } = effect2; + if (deps.length) { + for (let i = 0; i < deps.length; i++) { + deps[i].delete(effect2); + } + deps.length = 0; + } + } + let shouldTrack = true; + function trackEffects(dep, debuggerEventExtraInfo) { + let shouldTrack2 = false; + if (effectTrackDepth <= maxMarkerBits) { + if (!newTracked(dep)) { + dep.n |= trackOpBit; + shouldTrack2 = !wasTracked(dep); + } + } else { + shouldTrack2 = !dep.has(activeEffect); + } + if (shouldTrack2) { + dep.add(activeEffect); + activeEffect.deps.push(dep); + } + } + function triggerEffects(dep, debuggerEventExtraInfo) { + const effects = isArray$1(dep) ? dep : [...dep]; + for (const effect2 of effects) { + if (effect2.computed) { + triggerEffect(effect2); + } + } + for (const effect2 of effects) { + if (!effect2.computed) { + triggerEffect(effect2); + } + } + } + function triggerEffect(effect2, debuggerEventExtraInfo) { + if (effect2 !== activeEffect || effect2.allowRecurse) { + if (effect2.scheduler) { + effect2.scheduler(); + } else { + effect2.run(); + } + } + } + function toRaw(observed) { + const raw = observed && observed["__v_raw"]; + return raw ? toRaw(raw) : observed; + } + function trackRefValue(ref2) { + if (shouldTrack && activeEffect) { + ref2 = toRaw(ref2); + { + trackEffects(ref2.dep || (ref2.dep = createDep())); + } + } + } + function triggerRefValue(ref2, newVal) { + ref2 = toRaw(ref2); + if (ref2.dep) { + { + triggerEffects(ref2.dep); + } + } + } + class ComputedRefImpl { + constructor(getter, _setter, isReadonly2, isSSR) { + this._setter = _setter; + this.dep = void 0; + this.__v_isRef = true; + this._dirty = true; + this.effect = new ReactiveEffect(getter, () => { + if (!this._dirty) { + this._dirty = true; + triggerRefValue(this); + } + }); + this.effect.computed = this; + this.effect.active = this._cacheable = !isSSR; + this["__v_isReadonly"] = isReadonly2; + } + get value() { + const self = toRaw(this); + trackRefValue(self); + if (self._dirty || !self._cacheable) { + self._dirty = false; + self._value = self.effect.run(); + } + return self._value; + } + set value(newValue) { + this._setter(newValue); + } + } + function computed(getterOrOptions, debugOptions, isSSR = false) { + let getter; + let setter; + const onlyGetter = isFunction$1(getterOrOptions); + if (onlyGetter) { + getter = getterOrOptions; + setter = NOOP; + } else { + getter = getterOrOptions.get; + setter = getterOrOptions.set; + } + const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR); + return cRef; + } + + const defaultNamespace = "el"; + const statePrefix = "is-"; + const _bem = (namespace, block, blockSuffix, element, modifier) => { + let cls = `${namespace}-${block}`; + if (blockSuffix) { + cls += `-${blockSuffix}`; + } + if (element) { + cls += `__${element}`; + } + if (modifier) { + cls += `--${modifier}`; + } + return cls; + }; + const namespaceContextKey = Symbol("namespaceContextKey"); + const useGetDerivedNamespace = (namespaceOverrides) => { + const derivedNamespace = namespaceOverrides || vue.inject(namespaceContextKey, vue.ref(defaultNamespace)); + const namespace = vue.computed(() => { + return vue.unref(derivedNamespace) || defaultNamespace; + }); + return namespace; + }; + const useNamespace = (block, namespaceOverrides) => { + const namespace = useGetDerivedNamespace(namespaceOverrides); + const b = (blockSuffix = "") => _bem(namespace.value, block, blockSuffix, "", ""); + const e = (element) => element ? _bem(namespace.value, block, "", element, "") : ""; + const m = (modifier) => modifier ? _bem(namespace.value, block, "", "", modifier) : ""; + const be = (blockSuffix, element) => blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, "") : ""; + const em = (element, modifier) => element && modifier ? _bem(namespace.value, block, "", element, modifier) : ""; + const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, "", modifier) : ""; + const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : ""; + const is = (name, ...args) => { + const state = args.length >= 1 ? args[0] : true; + return name && state ? `${statePrefix}${name}` : ""; + }; + const cssVar = (object) => { + const styles = {}; + for (const key in object) { + if (object[key]) { + styles[`--${namespace.value}-${key}`] = object[key]; + } + } + return styles; + }; + const cssVarBlock = (object) => { + const styles = {}; + for (const key in object) { + if (object[key]) { + styles[`--${namespace.value}-${block}-${key}`] = object[key]; + } + } + return styles; + }; + const cssVarName = (name) => `--${namespace.value}-${name}`; + const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`; + return { + namespace, + b, + e, + m, + be, + em, + bm, + bem, + is, + cssVar, + cssVarName, + cssVarBlock, + cssVarBlockName + }; + }; + + const useLockscreen = (trigger, options = {}) => { + if (!vue.isRef(trigger)) { + throwError("[useLockscreen]", "You need to pass a ref param to this function"); + } + const ns = options.ns || useNamespace("popup"); + const hiddenCls = computed(() => ns.bm("parent", "hidden")); + if (!isClient || hasClass(document.body, hiddenCls.value)) { + return; + } + let scrollBarWidth = 0; + let withoutHiddenClass = false; + let bodyWidth = "0"; + const cleanup = () => { + setTimeout(() => { + removeClass(document == null ? void 0 : document.body, hiddenCls.value); + if (withoutHiddenClass && document) { + document.body.style.width = bodyWidth; + } + }, 200); + }; + vue.watch(trigger, (val) => { + if (!val) { + cleanup(); + return; + } + withoutHiddenClass = !hasClass(document.body, hiddenCls.value); + if (withoutHiddenClass) { + bodyWidth = document.body.style.width; + } + scrollBarWidth = getScrollBarWidth(ns.namespace.value); + const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight; + const bodyOverflowY = getStyle(document.body, "overflowY"); + if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === "scroll") && withoutHiddenClass) { + document.body.style.width = `calc(100% - ${scrollBarWidth}px)`; + } + addClass(document.body, hiddenCls.value); + }); + vue.onScopeDispose(() => cleanup()); + }; + + const modalStack = []; + const closeModal = (e) => { + if (modalStack.length === 0) + return; + if (e.code === EVENT_CODE.esc) { + e.stopPropagation(); + const topModal = modalStack[modalStack.length - 1]; + topModal.handleClose(); + } + }; + const useModal = (instance, visibleRef) => { + vue.watch(visibleRef, (val) => { + if (val) { + modalStack.push(instance); + } else { + modalStack.splice(modalStack.indexOf(instance), 1); + } + }); + }; + if (isClient) + useEventListener(document, "keydown", closeModal); + + const _prop = buildProp({ + type: definePropType(Boolean), + default: null + }); + const _event = buildProp({ + type: definePropType(Function) + }); + const createModelToggleComposable = (name) => { + const updateEventKey = `update:${name}`; + const updateEventKeyRaw = `onUpdate:${name}`; + const useModelToggleEmits2 = [updateEventKey]; + const useModelToggleProps2 = { + [name]: _prop, + [updateEventKeyRaw]: _event + }; + const useModelToggle2 = ({ + indicator, + toggleReason, + shouldHideWhenRouteChanges, + shouldProceed, + onShow, + onHide + }) => { + const instance = vue.getCurrentInstance(); + const { emit } = instance; + const props = instance.props; + const hasUpdateHandler = vue.computed(() => isFunction$1(props[updateEventKeyRaw])); + const isModelBindingAbsent = vue.computed(() => props[name] === null); + const doShow = (event) => { + if (indicator.value === true) { + return; + } + indicator.value = true; + if (toggleReason) { + toggleReason.value = event; + } + if (isFunction$1(onShow)) { + onShow(event); + } + }; + const doHide = (event) => { + if (indicator.value === false) { + return; + } + indicator.value = false; + if (toggleReason) { + toggleReason.value = event; + } + if (isFunction$1(onHide)) { + onHide(event); + } + }; + const show = (event) => { + if (props.disabled === true || isFunction$1(shouldProceed) && !shouldProceed()) + return; + const shouldEmit = hasUpdateHandler.value && isClient; + if (shouldEmit) { + emit(updateEventKey, true); + } + if (isModelBindingAbsent.value || !shouldEmit) { + doShow(event); + } + }; + const hide = (event) => { + if (props.disabled === true || !isClient) + return; + const shouldEmit = hasUpdateHandler.value && isClient; + if (shouldEmit) { + emit(updateEventKey, false); + } + if (isModelBindingAbsent.value || !shouldEmit) { + doHide(event); + } + }; + const onChange = (val) => { + if (!isBoolean$1(val)) + return; + if (props.disabled && val) { + if (hasUpdateHandler.value) { + emit(updateEventKey, false); + } + } else if (indicator.value !== val) { + if (val) { + doShow(); + } else { + doHide(); + } + } + }; + const toggle = () => { + if (indicator.value) { + hide(); + } else { + show(); + } + }; + vue.watch(() => props[name], onChange); + if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) { + vue.watch(() => ({ + ...instance.proxy.$route + }), () => { + if (shouldHideWhenRouteChanges.value && indicator.value) { + hide(); + } + }); + } + vue.onMounted(() => { + onChange(props[name]); + }); + return { + hide, + show, + toggle, + hasUpdateHandler + }; + }; + return { + useModelToggle: useModelToggle2, + useModelToggleProps: useModelToggleProps2, + useModelToggleEmits: useModelToggleEmits2 + }; + }; + const { useModelToggle, useModelToggleProps, useModelToggleEmits } = createModelToggleComposable("modelValue"); + + const usePreventGlobal = (indicator, evt, cb) => { + const prevent = (e) => { + if (cb(e)) + e.stopImmediatePropagation(); + }; + let stop = void 0; + vue.watch(() => indicator.value, (val) => { + if (val) { + stop = useEventListener(document, evt, prevent, true); + } else { + stop == null ? void 0 : stop(); + } + }, { immediate: true }); + }; + + const useProp = (name) => { + const vm = vue.getCurrentInstance(); + return vue.computed(() => { + var _a, _b; + return (_b = (_a = vm == null ? void 0 : vm.proxy) == null ? void 0 : _a.$props) == null ? void 0 : _b[name]; + }); + }; + + var E$1="top",R="bottom",W="right",P$1="left",me="auto",G=[E$1,R,W,P$1],U$1="start",J="end",Xe="clippingParents",je="viewport",K="popper",Ye="reference",De=G.reduce(function(t,e){return t.concat([e+"-"+U$1,e+"-"+J])},[]),Ee=[].concat(G,[me]).reduce(function(t,e){return t.concat([e,e+"-"+U$1,e+"-"+J])},[]),Ge="beforeRead",Je="read",Ke="afterRead",Qe="beforeMain",Ze="main",et="afterMain",tt="beforeWrite",nt="write",rt="afterWrite",ot=[Ge,Je,Ke,Qe,Ze,et,tt,nt,rt];function C(t){return t?(t.nodeName||"").toLowerCase():null}function H(t){if(t==null)return window;if(t.toString()!=="[object Window]"){var e=t.ownerDocument;return e&&e.defaultView||window}return t}function Q(t){var e=H(t).Element;return t instanceof e||t instanceof Element}function B(t){var e=H(t).HTMLElement;return t instanceof e||t instanceof HTMLElement}function Pe(t){if(typeof ShadowRoot=="undefined")return !1;var e=H(t).ShadowRoot;return t instanceof e||t instanceof ShadowRoot}function Mt(t){var e=t.state;Object.keys(e.elements).forEach(function(n){var r=e.styles[n]||{},o=e.attributes[n]||{},i=e.elements[n];!B(i)||!C(i)||(Object.assign(i.style,r),Object.keys(o).forEach(function(a){var s=o[a];s===!1?i.removeAttribute(a):i.setAttribute(a,s===!0?"":s);}));});}function Rt(t){var e=t.state,n={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,n.popper),e.styles=n,e.elements.arrow&&Object.assign(e.elements.arrow.style,n.arrow),function(){Object.keys(e.elements).forEach(function(r){var o=e.elements[r],i=e.attributes[r]||{},a=Object.keys(e.styles.hasOwnProperty(r)?e.styles[r]:n[r]),s=a.reduce(function(f,c){return f[c]="",f},{});!B(o)||!C(o)||(Object.assign(o.style,s),Object.keys(i).forEach(function(f){o.removeAttribute(f);}));});}}var Ae={name:"applyStyles",enabled:!0,phase:"write",fn:Mt,effect:Rt,requires:["computeStyles"]};function q(t){return t.split("-")[0]}var X$1=Math.max,ve=Math.min,Z=Math.round;function ee(t,e){e===void 0&&(e=!1);var n=t.getBoundingClientRect(),r=1,o=1;if(B(t)&&e){var i=t.offsetHeight,a=t.offsetWidth;a>0&&(r=Z(n.width)/a||1),i>0&&(o=Z(n.height)/i||1);}return {width:n.width/r,height:n.height/o,top:n.top/o,right:n.right/r,bottom:n.bottom/o,left:n.left/r,x:n.left/r,y:n.top/o}}function ke(t){var e=ee(t),n=t.offsetWidth,r=t.offsetHeight;return Math.abs(e.width-n)<=1&&(n=e.width),Math.abs(e.height-r)<=1&&(r=e.height),{x:t.offsetLeft,y:t.offsetTop,width:n,height:r}}function it(t,e){var n=e.getRootNode&&e.getRootNode();if(t.contains(e))return !0;if(n&&Pe(n)){var r=e;do{if(r&&t.isSameNode(r))return !0;r=r.parentNode||r.host;}while(r)}return !1}function N$1(t){return H(t).getComputedStyle(t)}function Wt(t){return ["table","td","th"].indexOf(C(t))>=0}function I$1(t){return ((Q(t)?t.ownerDocument:t.document)||window.document).documentElement}function ge(t){return C(t)==="html"?t:t.assignedSlot||t.parentNode||(Pe(t)?t.host:null)||I$1(t)}function at(t){return !B(t)||N$1(t).position==="fixed"?null:t.offsetParent}function Bt(t){var e=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1,n=navigator.userAgent.indexOf("Trident")!==-1;if(n&&B(t)){var r=N$1(t);if(r.position==="fixed")return null}var o=ge(t);for(Pe(o)&&(o=o.host);B(o)&&["html","body"].indexOf(C(o))<0;){var i=N$1(o);if(i.transform!=="none"||i.perspective!=="none"||i.contain==="paint"||["transform","perspective"].indexOf(i.willChange)!==-1||e&&i.willChange==="filter"||e&&i.filter&&i.filter!=="none")return o;o=o.parentNode;}return null}function se(t){for(var e=H(t),n=at(t);n&&Wt(n)&&N$1(n).position==="static";)n=at(n);return n&&(C(n)==="html"||C(n)==="body"&&N$1(n).position==="static")?e:n||Bt(t)||e}function Le(t){return ["top","bottom"].indexOf(t)>=0?"x":"y"}function fe(t,e,n){return X$1(t,ve(e,n))}function St(t,e,n){var r=fe(t,e,n);return r>n?n:r}function st(){return {top:0,right:0,bottom:0,left:0}}function ft(t){return Object.assign({},st(),t)}function ct(t,e){return e.reduce(function(n,r){return n[r]=t,n},{})}var Tt=function(t,e){return t=typeof t=="function"?t(Object.assign({},e.rects,{placement:e.placement})):t,ft(typeof t!="number"?t:ct(t,G))};function Ht(t){var e,n=t.state,r=t.name,o=t.options,i=n.elements.arrow,a=n.modifiersData.popperOffsets,s=q(n.placement),f=Le(s),c=[P$1,W].indexOf(s)>=0,u=c?"height":"width";if(!(!i||!a)){var m=Tt(o.padding,n),v=ke(i),l=f==="y"?E$1:P$1,h=f==="y"?R:W,p=n.rects.reference[u]+n.rects.reference[f]-a[f]-n.rects.popper[u],g=a[f]-n.rects.reference[f],x=se(i),y=x?f==="y"?x.clientHeight||0:x.clientWidth||0:0,$=p/2-g/2,d=m[l],b=y-v[u]-m[h],w=y/2-v[u]/2+$,O=fe(d,w,b),j=f;n.modifiersData[r]=(e={},e[j]=O,e.centerOffset=O-w,e);}}function Ct(t){var e=t.state,n=t.options,r=n.element,o=r===void 0?"[data-popper-arrow]":r;o!=null&&(typeof o=="string"&&(o=e.elements.popper.querySelector(o),!o)||!it(e.elements.popper,o)||(e.elements.arrow=o));}var pt={name:"arrow",enabled:!0,phase:"main",fn:Ht,effect:Ct,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function te(t){return t.split("-")[1]}var qt={top:"auto",right:"auto",bottom:"auto",left:"auto"};function Vt(t){var e=t.x,n=t.y,r=window,o=r.devicePixelRatio||1;return {x:Z(e*o)/o||0,y:Z(n*o)/o||0}}function ut(t){var e,n=t.popper,r=t.popperRect,o=t.placement,i=t.variation,a=t.offsets,s=t.position,f=t.gpuAcceleration,c=t.adaptive,u=t.roundOffsets,m=t.isFixed,v=a.x,l=v===void 0?0:v,h=a.y,p=h===void 0?0:h,g=typeof u=="function"?u({x:l,y:p}):{x:l,y:p};l=g.x,p=g.y;var x=a.hasOwnProperty("x"),y=a.hasOwnProperty("y"),$=P$1,d=E$1,b=window;if(c){var w=se(n),O="clientHeight",j="clientWidth";if(w===H(n)&&(w=I$1(n),N$1(w).position!=="static"&&s==="absolute"&&(O="scrollHeight",j="scrollWidth")),w=w,o===E$1||(o===P$1||o===W)&&i===J){d=R;var A=m&&w===b&&b.visualViewport?b.visualViewport.height:w[O];p-=A-r.height,p*=f?1:-1;}if(o===P$1||(o===E$1||o===R)&&i===J){$=W;var k=m&&w===b&&b.visualViewport?b.visualViewport.width:w[j];l-=k-r.width,l*=f?1:-1;}}var D=Object.assign({position:s},c&&qt),S=u===!0?Vt({x:l,y:p}):{x:l,y:p};if(l=S.x,p=S.y,f){var L;return Object.assign({},D,(L={},L[d]=y?"0":"",L[$]=x?"0":"",L.transform=(b.devicePixelRatio||1)<=1?"translate("+l+"px, "+p+"px)":"translate3d("+l+"px, "+p+"px, 0)",L))}return Object.assign({},D,(e={},e[d]=y?p+"px":"",e[$]=x?l+"px":"",e.transform="",e))}function Nt(t){var e=t.state,n=t.options,r=n.gpuAcceleration,o=r===void 0?!0:r,i=n.adaptive,a=i===void 0?!0:i,s=n.roundOffsets,f=s===void 0?!0:s,c={placement:q(e.placement),variation:te(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:o,isFixed:e.options.strategy==="fixed"};e.modifiersData.popperOffsets!=null&&(e.styles.popper=Object.assign({},e.styles.popper,ut(Object.assign({},c,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:a,roundOffsets:f})))),e.modifiersData.arrow!=null&&(e.styles.arrow=Object.assign({},e.styles.arrow,ut(Object.assign({},c,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:f})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement});}var Me={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:Nt,data:{}},ye={passive:!0};function It(t){var e=t.state,n=t.instance,r=t.options,o=r.scroll,i=o===void 0?!0:o,a=r.resize,s=a===void 0?!0:a,f=H(e.elements.popper),c=[].concat(e.scrollParents.reference,e.scrollParents.popper);return i&&c.forEach(function(u){u.addEventListener("scroll",n.update,ye);}),s&&f.addEventListener("resize",n.update,ye),function(){i&&c.forEach(function(u){u.removeEventListener("scroll",n.update,ye);}),s&&f.removeEventListener("resize",n.update,ye);}}var Re={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:It,data:{}},_t={left:"right",right:"left",bottom:"top",top:"bottom"};function be(t){return t.replace(/left|right|bottom|top/g,function(e){return _t[e]})}var zt={start:"end",end:"start"};function lt(t){return t.replace(/start|end/g,function(e){return zt[e]})}function We(t){var e=H(t),n=e.pageXOffset,r=e.pageYOffset;return {scrollLeft:n,scrollTop:r}}function Be(t){return ee(I$1(t)).left+We(t).scrollLeft}function Ft(t){var e=H(t),n=I$1(t),r=e.visualViewport,o=n.clientWidth,i=n.clientHeight,a=0,s=0;return r&&(o=r.width,i=r.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(a=r.offsetLeft,s=r.offsetTop)),{width:o,height:i,x:a+Be(t),y:s}}function Ut(t){var e,n=I$1(t),r=We(t),o=(e=t.ownerDocument)==null?void 0:e.body,i=X$1(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=X$1(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),s=-r.scrollLeft+Be(t),f=-r.scrollTop;return N$1(o||n).direction==="rtl"&&(s+=X$1(n.clientWidth,o?o.clientWidth:0)-i),{width:i,height:a,x:s,y:f}}function Se(t){var e=N$1(t),n=e.overflow,r=e.overflowX,o=e.overflowY;return /auto|scroll|overlay|hidden/.test(n+o+r)}function dt(t){return ["html","body","#document"].indexOf(C(t))>=0?t.ownerDocument.body:B(t)&&Se(t)?t:dt(ge(t))}function ce(t,e){var n;e===void 0&&(e=[]);var r=dt(t),o=r===((n=t.ownerDocument)==null?void 0:n.body),i=H(r),a=o?[i].concat(i.visualViewport||[],Se(r)?r:[]):r,s=e.concat(a);return o?s:s.concat(ce(ge(a)))}function Te(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function Xt(t){var e=ee(t);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}function ht(t,e){return e===je?Te(Ft(t)):Q(e)?Xt(e):Te(Ut(I$1(t)))}function Yt(t){var e=ce(ge(t)),n=["absolute","fixed"].indexOf(N$1(t).position)>=0,r=n&&B(t)?se(t):t;return Q(r)?e.filter(function(o){return Q(o)&&it(o,r)&&C(o)!=="body"}):[]}function Gt(t,e,n){var r=e==="clippingParents"?Yt(t):[].concat(e),o=[].concat(r,[n]),i=o[0],a=o.reduce(function(s,f){var c=ht(t,f);return s.top=X$1(c.top,s.top),s.right=ve(c.right,s.right),s.bottom=ve(c.bottom,s.bottom),s.left=X$1(c.left,s.left),s},ht(t,i));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function mt(t){var e=t.reference,n=t.element,r=t.placement,o=r?q(r):null,i=r?te(r):null,a=e.x+e.width/2-n.width/2,s=e.y+e.height/2-n.height/2,f;switch(o){case E$1:f={x:a,y:e.y-n.height};break;case R:f={x:a,y:e.y+e.height};break;case W:f={x:e.x+e.width,y:s};break;case P$1:f={x:e.x-n.width,y:s};break;default:f={x:e.x,y:e.y};}var c=o?Le(o):null;if(c!=null){var u=c==="y"?"height":"width";switch(i){case U$1:f[c]=f[c]-(e[u]/2-n[u]/2);break;case J:f[c]=f[c]+(e[u]/2-n[u]/2);break}}return f}function ne(t,e){e===void 0&&(e={});var n=e,r=n.placement,o=r===void 0?t.placement:r,i=n.boundary,a=i===void 0?Xe:i,s=n.rootBoundary,f=s===void 0?je:s,c=n.elementContext,u=c===void 0?K:c,m=n.altBoundary,v=m===void 0?!1:m,l=n.padding,h=l===void 0?0:l,p=ft(typeof h!="number"?h:ct(h,G)),g=u===K?Ye:K,x=t.rects.popper,y=t.elements[v?g:u],$=Gt(Q(y)?y:y.contextElement||I$1(t.elements.popper),a,f),d=ee(t.elements.reference),b=mt({reference:d,element:x,strategy:"absolute",placement:o}),w=Te(Object.assign({},x,b)),O=u===K?w:d,j={top:$.top-O.top+p.top,bottom:O.bottom-$.bottom+p.bottom,left:$.left-O.left+p.left,right:O.right-$.right+p.right},A=t.modifiersData.offset;if(u===K&&A){var k=A[o];Object.keys(j).forEach(function(D){var S=[W,R].indexOf(D)>=0?1:-1,L=[E$1,R].indexOf(D)>=0?"y":"x";j[D]+=k[L]*S;});}return j}function Jt(t,e){e===void 0&&(e={});var n=e,r=n.placement,o=n.boundary,i=n.rootBoundary,a=n.padding,s=n.flipVariations,f=n.allowedAutoPlacements,c=f===void 0?Ee:f,u=te(r),m=u?s?De:De.filter(function(h){return te(h)===u}):G,v=m.filter(function(h){return c.indexOf(h)>=0});v.length===0&&(v=m);var l=v.reduce(function(h,p){return h[p]=ne(t,{placement:p,boundary:o,rootBoundary:i,padding:a})[q(p)],h},{});return Object.keys(l).sort(function(h,p){return l[h]-l[p]})}function Kt(t){if(q(t)===me)return [];var e=be(t);return [lt(t),e,lt(e)]}function Qt(t){var e=t.state,n=t.options,r=t.name;if(!e.modifiersData[r]._skip){for(var o=n.mainAxis,i=o===void 0?!0:o,a=n.altAxis,s=a===void 0?!0:a,f=n.fallbackPlacements,c=n.padding,u=n.boundary,m=n.rootBoundary,v=n.altBoundary,l=n.flipVariations,h=l===void 0?!0:l,p=n.allowedAutoPlacements,g=e.options.placement,x=q(g),y=x===g,$=f||(y||!h?[be(g)]:Kt(g)),d=[g].concat($).reduce(function(z,V){return z.concat(q(V)===me?Jt(e,{placement:V,boundary:u,rootBoundary:m,padding:c,flipVariations:h,allowedAutoPlacements:p}):V)},[]),b=e.rects.reference,w=e.rects.popper,O=new Map,j=!0,A=d[0],k=0;k<d.length;k++){var D=d[k],S=q(D),L=te(D)===U$1,re=[E$1,R].indexOf(S)>=0,oe=re?"width":"height",M=ne(e,{placement:D,boundary:u,rootBoundary:m,altBoundary:v,padding:c}),T=re?L?W:P$1:L?R:E$1;b[oe]>w[oe]&&(T=be(T));var pe=be(T),_=[];if(i&&_.push(M[S]<=0),s&&_.push(M[T]<=0,M[pe]<=0),_.every(function(z){return z})){A=D,j=!1;break}O.set(D,_);}if(j)for(var ue=h?3:1,xe=function(z){var V=d.find(function(de){var ae=O.get(de);if(ae)return ae.slice(0,z).every(function(Y){return Y})});if(V)return A=V,"break"},ie=ue;ie>0;ie--){var le=xe(ie);if(le==="break")break}e.placement!==A&&(e.modifiersData[r]._skip=!0,e.placement=A,e.reset=!0);}}var vt={name:"flip",enabled:!0,phase:"main",fn:Qt,requiresIfExists:["offset"],data:{_skip:!1}};function gt(t,e,n){return n===void 0&&(n={x:0,y:0}),{top:t.top-e.height-n.y,right:t.right-e.width+n.x,bottom:t.bottom-e.height+n.y,left:t.left-e.width-n.x}}function yt(t){return [E$1,W,R,P$1].some(function(e){return t[e]>=0})}function Zt(t){var e=t.state,n=t.name,r=e.rects.reference,o=e.rects.popper,i=e.modifiersData.preventOverflow,a=ne(e,{elementContext:"reference"}),s=ne(e,{altBoundary:!0}),f=gt(a,r),c=gt(s,o,i),u=yt(f),m=yt(c);e.modifiersData[n]={referenceClippingOffsets:f,popperEscapeOffsets:c,isReferenceHidden:u,hasPopperEscaped:m},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":u,"data-popper-escaped":m});}var bt={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:Zt};function en(t,e,n){var r=q(t),o=[P$1,E$1].indexOf(r)>=0?-1:1,i=typeof n=="function"?n(Object.assign({},e,{placement:t})):n,a=i[0],s=i[1];return a=a||0,s=(s||0)*o,[P$1,W].indexOf(r)>=0?{x:s,y:a}:{x:a,y:s}}function tn(t){var e=t.state,n=t.options,r=t.name,o=n.offset,i=o===void 0?[0,0]:o,a=Ee.reduce(function(u,m){return u[m]=en(m,e.rects,i),u},{}),s=a[e.placement],f=s.x,c=s.y;e.modifiersData.popperOffsets!=null&&(e.modifiersData.popperOffsets.x+=f,e.modifiersData.popperOffsets.y+=c),e.modifiersData[r]=a;}var wt={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:tn};function nn(t){var e=t.state,n=t.name;e.modifiersData[n]=mt({reference:e.rects.reference,element:e.rects.popper,strategy:"absolute",placement:e.placement});}var He={name:"popperOffsets",enabled:!0,phase:"read",fn:nn,data:{}};function rn(t){return t==="x"?"y":"x"}function on(t){var e=t.state,n=t.options,r=t.name,o=n.mainAxis,i=o===void 0?!0:o,a=n.altAxis,s=a===void 0?!1:a,f=n.boundary,c=n.rootBoundary,u=n.altBoundary,m=n.padding,v=n.tether,l=v===void 0?!0:v,h=n.tetherOffset,p=h===void 0?0:h,g=ne(e,{boundary:f,rootBoundary:c,padding:m,altBoundary:u}),x=q(e.placement),y=te(e.placement),$=!y,d=Le(x),b=rn(d),w=e.modifiersData.popperOffsets,O=e.rects.reference,j=e.rects.popper,A=typeof p=="function"?p(Object.assign({},e.rects,{placement:e.placement})):p,k=typeof A=="number"?{mainAxis:A,altAxis:A}:Object.assign({mainAxis:0,altAxis:0},A),D=e.modifiersData.offset?e.modifiersData.offset[e.placement]:null,S={x:0,y:0};if(w){if(i){var L,re=d==="y"?E$1:P$1,oe=d==="y"?R:W,M=d==="y"?"height":"width",T=w[d],pe=T+g[re],_=T-g[oe],ue=l?-j[M]/2:0,xe=y===U$1?O[M]:j[M],ie=y===U$1?-j[M]:-O[M],le=e.elements.arrow,z=l&&le?ke(le):{width:0,height:0},V=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:st(),de=V[re],ae=V[oe],Y=fe(0,O[M],z[M]),jt=$?O[M]/2-ue-Y-de-k.mainAxis:xe-Y-de-k.mainAxis,Dt=$?-O[M]/2+ue+Y+ae+k.mainAxis:ie+Y+ae+k.mainAxis,Oe=e.elements.arrow&&se(e.elements.arrow),Et=Oe?d==="y"?Oe.clientTop||0:Oe.clientLeft||0:0,Ce=(L=D==null?void 0:D[d])!=null?L:0,Pt=T+jt-Ce-Et,At=T+Dt-Ce,qe=fe(l?ve(pe,Pt):pe,T,l?X$1(_,At):_);w[d]=qe,S[d]=qe-T;}if(s){var Ve,kt=d==="x"?E$1:P$1,Lt=d==="x"?R:W,F=w[b],he=b==="y"?"height":"width",Ne=F+g[kt],Ie=F-g[Lt],$e=[E$1,P$1].indexOf(x)!==-1,_e=(Ve=D==null?void 0:D[b])!=null?Ve:0,ze=$e?Ne:F-O[he]-j[he]-_e+k.altAxis,Fe=$e?F+O[he]+j[he]-_e-k.altAxis:Ie,Ue=l&&$e?St(ze,F,Fe):fe(l?ze:Ne,F,l?Fe:Ie);w[b]=Ue,S[b]=Ue-F;}e.modifiersData[r]=S;}}var xt={name:"preventOverflow",enabled:!0,phase:"main",fn:on,requiresIfExists:["offset"]};function an(t){return {scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function sn(t){return t===H(t)||!B(t)?We(t):an(t)}function fn(t){var e=t.getBoundingClientRect(),n=Z(e.width)/t.offsetWidth||1,r=Z(e.height)/t.offsetHeight||1;return n!==1||r!==1}function cn(t,e,n){n===void 0&&(n=!1);var r=B(e),o=B(e)&&fn(e),i=I$1(e),a=ee(t,o),s={scrollLeft:0,scrollTop:0},f={x:0,y:0};return (r||!r&&!n)&&((C(e)!=="body"||Se(i))&&(s=sn(e)),B(e)?(f=ee(e,!0),f.x+=e.clientLeft,f.y+=e.clientTop):i&&(f.x=Be(i))),{x:a.left+s.scrollLeft-f.x,y:a.top+s.scrollTop-f.y,width:a.width,height:a.height}}function pn(t){var e=new Map,n=new Set,r=[];t.forEach(function(i){e.set(i.name,i);});function o(i){n.add(i.name);var a=[].concat(i.requires||[],i.requiresIfExists||[]);a.forEach(function(s){if(!n.has(s)){var f=e.get(s);f&&o(f);}}),r.push(i);}return t.forEach(function(i){n.has(i.name)||o(i);}),r}function un(t){var e=pn(t);return ot.reduce(function(n,r){return n.concat(e.filter(function(o){return o.phase===r}))},[])}function ln(t){var e;return function(){return e||(e=new Promise(function(n){Promise.resolve().then(function(){e=void 0,n(t());});})),e}}function dn(t){var e=t.reduce(function(n,r){var o=n[r.name];return n[r.name]=o?Object.assign({},o,r,{options:Object.assign({},o.options,r.options),data:Object.assign({},o.data,r.data)}):r,n},{});return Object.keys(e).map(function(n){return e[n]})}var Ot={placement:"bottom",modifiers:[],strategy:"absolute"};function $t(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return !e.some(function(r){return !(r&&typeof r.getBoundingClientRect=="function")})}function we(t){t===void 0&&(t={});var e=t,n=e.defaultModifiers,r=n===void 0?[]:n,o=e.defaultOptions,i=o===void 0?Ot:o;return function(a,s,f){f===void 0&&(f=i);var c={placement:"bottom",orderedModifiers:[],options:Object.assign({},Ot,i),modifiersData:{},elements:{reference:a,popper:s},attributes:{},styles:{}},u=[],m=!1,v={state:c,setOptions:function(p){var g=typeof p=="function"?p(c.options):p;h(),c.options=Object.assign({},i,c.options,g),c.scrollParents={reference:Q(a)?ce(a):a.contextElement?ce(a.contextElement):[],popper:ce(s)};var x=un(dn([].concat(r,c.options.modifiers)));return c.orderedModifiers=x.filter(function(y){return y.enabled}),l(),v.update()},forceUpdate:function(){if(!m){var p=c.elements,g=p.reference,x=p.popper;if($t(g,x)){c.rects={reference:cn(g,se(x),c.options.strategy==="fixed"),popper:ke(x)},c.reset=!1,c.placement=c.options.placement,c.orderedModifiers.forEach(function(j){return c.modifiersData[j.name]=Object.assign({},j.data)});for(var y=0;y<c.orderedModifiers.length;y++){if(c.reset===!0){c.reset=!1,y=-1;continue}var $=c.orderedModifiers[y],d=$.fn,b=$.options,w=b===void 0?{}:b,O=$.name;typeof d=="function"&&(c=d({state:c,options:w,name:O,instance:v})||c);}}}},update:ln(function(){return new Promise(function(p){v.forceUpdate(),p(c);})}),destroy:function(){h(),m=!0;}};if(!$t(a,s))return v;v.setOptions(f).then(function(p){!m&&f.onFirstUpdate&&f.onFirstUpdate(p);});function l(){c.orderedModifiers.forEach(function(p){var g=p.name,x=p.options,y=x===void 0?{}:x,$=p.effect;if(typeof $=="function"){var d=$({state:c,name:g,instance:v,options:y}),b=function(){};u.push(d||b);}});}function h(){u.forEach(function(p){return p()}),u=[];}return v}}we();var mn=[Re,He,Me,Ae];we({defaultModifiers:mn});var gn=[Re,He,Me,Ae,wt,vt,xt,pt,bt],yn=we({defaultModifiers:gn}); + + const usePopper = (referenceElementRef, popperElementRef, opts = {}) => { + const stateUpdater = { + name: "updateState", + enabled: true, + phase: "write", + fn: ({ state }) => { + const derivedState = deriveState(state); + Object.assign(states.value, derivedState); + }, + requires: ["computeStyles"] + }; + const options = vue.computed(() => { + const { onFirstUpdate, placement, strategy, modifiers } = vue.unref(opts); + return { + onFirstUpdate, + placement: placement || "bottom", + strategy: strategy || "absolute", + modifiers: [ + ...modifiers || [], + stateUpdater, + { name: "applyStyles", enabled: false } + ] + }; + }); + const instanceRef = vue.shallowRef(); + const states = vue.ref({ + styles: { + popper: { + position: vue.unref(options).strategy, + left: "0", + top: "0" + }, + arrow: { + position: "absolute" + } + }, + attributes: {} + }); + const destroy = () => { + if (!instanceRef.value) + return; + instanceRef.value.destroy(); + instanceRef.value = void 0; + }; + vue.watch(options, (newOptions) => { + const instance = vue.unref(instanceRef); + if (instance) { + instance.setOptions(newOptions); + } + }, { + deep: true + }); + vue.watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => { + destroy(); + if (!referenceElement || !popperElement) + return; + instanceRef.value = yn(referenceElement, popperElement, vue.unref(options)); + }); + vue.onBeforeUnmount(() => { + destroy(); + }); + return { + state: vue.computed(() => { + var _a; + return { ...((_a = vue.unref(instanceRef)) == null ? void 0 : _a.state) || {} }; + }), + styles: vue.computed(() => vue.unref(states).styles), + attributes: vue.computed(() => vue.unref(states).attributes), + update: () => { + var _a; + return (_a = vue.unref(instanceRef)) == null ? void 0 : _a.update(); + }, + forceUpdate: () => { + var _a; + return (_a = vue.unref(instanceRef)) == null ? void 0 : _a.forceUpdate(); + }, + instanceRef: vue.computed(() => vue.unref(instanceRef)) + }; + }; + function deriveState(state) { + const elements = Object.keys(state.elements); + const styles = fromPairs(elements.map((element) => [element, state.styles[element] || {}])); + const attributes = fromPairs(elements.map((element) => [element, state.attributes[element]])); + return { + styles, + attributes + }; + } + + const useRestoreActive = (toggle, initialFocus) => { + let previousActive; + vue.watch(() => toggle.value, (val) => { + var _a, _b; + if (val) { + previousActive = document.activeElement; + if (vue.isRef(initialFocus)) { + (_b = (_a = initialFocus.value).focus) == null ? void 0 : _b.call(_a); + } + } else { + { + previousActive.focus(); + } + } + }); + }; + + const useSameTarget = (handleClick) => { + if (!handleClick) { + return { onClick: NOOP, onMousedown: NOOP, onMouseup: NOOP }; + } + let mousedownTarget = false; + let mouseupTarget = false; + const onClick = (e) => { + if (mousedownTarget && mouseupTarget) { + handleClick(e); + } + mousedownTarget = mouseupTarget = false; + }; + const onMousedown = (e) => { + mousedownTarget = e.target === e.currentTarget; + }; + const onMouseup = (e) => { + mouseupTarget = e.target === e.currentTarget; + }; + return { onClick, onMousedown, onMouseup }; + }; + + const useTeleport = (contentRenderer, appendToBody) => { + const isTeleportVisible = vue.ref(false); + if (!isClient) { + return { + isTeleportVisible, + showTeleport: NOOP, + hideTeleport: NOOP, + renderTeleport: NOOP + }; + } + let $el = null; + const showTeleport = () => { + isTeleportVisible.value = true; + if ($el !== null) + return; + $el = createGlobalNode(); + }; + const hideTeleport = () => { + isTeleportVisible.value = false; + if ($el !== null) { + removeGlobalNode($el); + $el = null; + } + }; + const renderTeleport = () => { + return appendToBody.value !== true ? contentRenderer() : isTeleportVisible.value ? [vue.h(vue.Teleport, { to: $el }, contentRenderer())] : void 0; + }; + vue.onUnmounted(hideTeleport); + return { + isTeleportVisible, + showTeleport, + hideTeleport, + renderTeleport + }; + }; + + const useThrottleRender = (loading, throttle = 0) => { + if (throttle === 0) + return loading; + const throttled = vue.ref(false); + let timeoutHandle = 0; + const dispatchThrottling = () => { + if (timeoutHandle) { + clearTimeout(timeoutHandle); + } + timeoutHandle = window.setTimeout(() => { + throttled.value = loading.value; + }, throttle); + }; + vue.onMounted(dispatchThrottling); + vue.watch(() => loading.value, (val) => { + if (val) { + dispatchThrottling(); + } else { + throttled.value = val; + } + }); + return throttled; + }; + + function useTimeout() { + let timeoutHandle; + const registerTimeout = (fn, delay) => { + cancelTimeout(); + timeoutHandle = window.setTimeout(fn, delay); + }; + const cancelTimeout = () => window.clearTimeout(timeoutHandle); + tryOnScopeDispose(() => cancelTimeout()); + return { + registerTimeout, + cancelTimeout + }; + } + + const AFTER_APPEAR = "after-appear"; + const AFTER_ENTER = "after-enter"; + const AFTER_LEAVE = "after-leave"; + const APPEAR = "appear"; + const APPEAR_CANCELLED = "appear-cancelled"; + const BEFORE_ENTER = "before-enter"; + const BEFORE_LEAVE = "before-leave"; + const ENTER = "enter"; + const ENTER_CANCELLED = "enter-cancelled"; + const LEAVE = "leave"; + const LEAVE_CANCELLED = "leave-cancelled"; + const useTransitionFallthroughEmits = [ + AFTER_APPEAR, + AFTER_ENTER, + AFTER_LEAVE, + APPEAR, + APPEAR_CANCELLED, + BEFORE_ENTER, + BEFORE_LEAVE, + ENTER, + ENTER_CANCELLED, + LEAVE, + LEAVE_CANCELLED + ]; + const useTransitionFallthrough = () => { + const { emit } = vue.getCurrentInstance(); + return { + onAfterAppear: () => { + emit(AFTER_APPEAR); + }, + onAfterEnter: () => { + emit(AFTER_ENTER); + }, + onAfterLeave: () => { + emit(AFTER_LEAVE); + }, + onAppearCancelled: () => { + emit(APPEAR_CANCELLED); + }, + onBeforeEnter: () => { + emit(BEFORE_ENTER); + }, + onBeforeLeave: () => { + emit(BEFORE_LEAVE); + }, + onEnter: () => { + emit(ENTER); + }, + onEnterCancelled: () => { + emit(ENTER_CANCELLED); + }, + onLeave: () => { + emit(LEAVE); + }, + onLeaveCancelled: () => { + emit(LEAVE_CANCELLED); + } + }; + }; + + const defaultIdInjection = { + prefix: Math.floor(Math.random() * 1e4), + current: 0 + }; + const ID_INJECTION_KEY = Symbol("elIdInjection"); + const useIdInjection = () => { + return vue.getCurrentInstance() ? vue.inject(ID_INJECTION_KEY, defaultIdInjection) : defaultIdInjection; + }; + const useId = (deterministicId) => { + const idInjection = useIdInjection(); + const namespace = useGetDerivedNamespace(); + const idRef = vue.computed(() => vue.unref(deterministicId) || `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`); + return idRef; + }; + + let registeredEscapeHandlers = []; + const cachedHandler = (e) => { + const event = e; + if (event.key === EVENT_CODE.esc) { + registeredEscapeHandlers.forEach((registeredHandler) => registeredHandler(event)); + } + }; + const useEscapeKeydown = (handler) => { + vue.onMounted(() => { + if (registeredEscapeHandlers.length === 0) { + document.addEventListener("keydown", cachedHandler); + } + if (isClient) + registeredEscapeHandlers.push(handler); + }); + vue.onBeforeUnmount(() => { + registeredEscapeHandlers = registeredEscapeHandlers.filter((registeredHandler) => registeredHandler !== handler); + if (registeredEscapeHandlers.length === 0) { + if (isClient) + document.removeEventListener("keydown", cachedHandler); + } + }); + }; + + let cachedContainer; + const usePopperContainerId = () => { + const namespace = useGetDerivedNamespace(); + const idInjection = useIdInjection(); + const id = vue.computed(() => { + return `${namespace.value}-popper-container-${idInjection.prefix}`; + }); + const selector = vue.computed(() => `#${id.value}`); + return { + id, + selector + }; + }; + const createContainer = (id) => { + const container = document.createElement("div"); + container.id = id; + document.body.appendChild(container); + return container; + }; + const usePopperContainer = () => { + const { id, selector } = usePopperContainerId(); + vue.onBeforeMount(() => { + if (!isClient) + return; + if (!cachedContainer && !document.body.querySelector(selector.value)) { + cachedContainer = createContainer(id.value); + } + }); + return { + id, + selector + }; + }; + + const useDelayedRender = ({ + indicator, + intermediateIndicator, + shouldSetIntermediate = () => true, + beforeShow, + afterShow, + afterHide, + beforeHide + }) => { + vue.watch(() => vue.unref(indicator), (val) => { + if (val) { + beforeShow == null ? void 0 : beforeShow(); + vue.nextTick(() => { + if (!vue.unref(indicator)) + return; + if (shouldSetIntermediate("show")) { + intermediateIndicator.value = true; + } + }); + } else { + beforeHide == null ? void 0 : beforeHide(); + vue.nextTick(() => { + if (vue.unref(indicator)) + return; + if (shouldSetIntermediate("hide")) { + intermediateIndicator.value = false; + } + }); + } + }); + vue.watch(() => intermediateIndicator.value, (val) => { + if (val) { + afterShow == null ? void 0 : afterShow(); + } else { + afterHide == null ? void 0 : afterHide(); + } + }); + }; + + const useDelayedToggleProps = buildProps({ + showAfter: { + type: Number, + default: 0 + }, + hideAfter: { + type: Number, + default: 200 + }, + autoClose: { + type: Number, + default: 0 + } + }); + const useDelayedToggle = ({ + showAfter, + hideAfter, + autoClose, + open, + close + }) => { + const { registerTimeout } = useTimeout(); + const { + registerTimeout: registerTimeoutForAutoClose, + cancelTimeout: cancelTimeoutForAutoClose + } = useTimeout(); + const onOpen = (event) => { + registerTimeout(() => { + open(event); + const _autoClose = vue.unref(autoClose); + if (isNumber$1(_autoClose) && _autoClose > 0) { + registerTimeoutForAutoClose(() => { + close(event); + }, _autoClose); + } + }, vue.unref(showAfter)); + }; + const onClose = (event) => { + cancelTimeoutForAutoClose(); + registerTimeout(() => { + close(event); + }, vue.unref(hideAfter)); + }; + return { + onOpen, + onClose + }; + }; + + const FORWARD_REF_INJECTION_KEY = Symbol("elForwardRef"); + const useForwardRef = (forwardRef) => { + const setForwardRef = (el) => { + forwardRef.value = el; + }; + vue.provide(FORWARD_REF_INJECTION_KEY, { + setForwardRef + }); + }; + const useForwardRefDirective = (setForwardRef) => { + return { + mounted(el) { + setForwardRef(el); + }, + updated(el) { + setForwardRef(el); + }, + unmounted() { + setForwardRef(null); + } + }; + }; + + const zIndex = vue.ref(0); + const defaultInitialZIndex = 2e3; + const zIndexContextKey = Symbol("zIndexContextKey"); + const useZIndex = (zIndexOverrides) => { + const zIndexInjection = zIndexOverrides || vue.inject(zIndexContextKey, void 0); + const initialZIndex = vue.computed(() => { + const zIndexFromInjection = vue.unref(zIndexInjection); + return isNumber$1(zIndexFromInjection) ? zIndexFromInjection : defaultInitialZIndex; + }); + const currentZIndex = vue.computed(() => initialZIndex.value + zIndex.value); + const nextZIndex = () => { + zIndex.value++; + return currentZIndex.value; + }; + return { + initialZIndex, + currentZIndex, + nextZIndex + }; + }; + + function getSide(placement) { + return placement.split('-')[0]; + } + + function getAlignment(placement) { + return placement.split('-')[1]; + } + + function getMainAxisFromPlacement(placement) { + return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y'; + } + + function getLengthFromAxis(axis) { + return axis === 'y' ? 'height' : 'width'; + } + + function computeCoordsFromPlacement(_ref, placement, rtl) { + let { + reference, + floating + } = _ref; + const commonX = reference.x + reference.width / 2 - floating.width / 2; + const commonY = reference.y + reference.height / 2 - floating.height / 2; + const mainAxis = getMainAxisFromPlacement(placement); + const length = getLengthFromAxis(mainAxis); + const commonAlign = reference[length] / 2 - floating[length] / 2; + const side = getSide(placement); + const isVertical = mainAxis === 'x'; + let coords; + + switch (side) { + case 'top': + coords = { + x: commonX, + y: reference.y - floating.height + }; + break; + + case 'bottom': + coords = { + x: commonX, + y: reference.y + reference.height + }; + break; + + case 'right': + coords = { + x: reference.x + reference.width, + y: commonY + }; + break; + + case 'left': + coords = { + x: reference.x - floating.width, + y: commonY + }; + break; + + default: + coords = { + x: reference.x, + y: reference.y + }; + } + + switch (getAlignment(placement)) { + case 'start': + coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1); + break; + + case 'end': + coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1); + break; + } + + return coords; + } + + /** + * Computes the `x` and `y` coordinates that will place the floating element + * next to a reference element when it is given a certain positioning strategy. + * + * This export does not have any `platform` interface logic. You will need to + * write one for the platform you are using Floating UI with. + */ + + const computePosition$1 = async (reference, floating, config) => { + const { + placement = 'bottom', + strategy = 'absolute', + middleware = [], + platform + } = config; + const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating)); + + if (process.env.NODE_ENV !== "production") { + if (platform == null) { + console.error(['Floating UI: `platform` property was not passed to config. If you', 'want to use Floating UI on the web, install @floating-ui/dom', 'instead of the /core package. Otherwise, you can create your own', '`platform`: https://floating-ui.com/docs/platform'].join(' ')); + } + + if (middleware.filter(_ref => { + let { + name + } = _ref; + return name === 'autoPlacement' || name === 'flip'; + }).length > 1) { + throw new Error(['Floating UI: duplicate `flip` and/or `autoPlacement`', 'middleware detected. This will lead to an infinite loop. Ensure only', 'one of either has been passed to the `middleware` array.'].join(' ')); + } + } + + let rects = await platform.getElementRects({ + reference, + floating, + strategy + }); + let { + x, + y + } = computeCoordsFromPlacement(rects, placement, rtl); + let statefulPlacement = placement; + let middlewareData = {}; + let resetCount = 0; + + for (let i = 0; i < middleware.length; i++) { + const { + name, + fn + } = middleware[i]; + const { + x: nextX, + y: nextY, + data, + reset + } = await fn({ + x, + y, + initialPlacement: placement, + placement: statefulPlacement, + strategy, + middlewareData, + rects, + platform, + elements: { + reference, + floating + } + }); + x = nextX != null ? nextX : x; + y = nextY != null ? nextY : y; + middlewareData = { ...middlewareData, + [name]: { ...middlewareData[name], + ...data + } + }; + + if (process.env.NODE_ENV !== "production") { + if (resetCount > 50) { + console.warn(['Floating UI: The middleware lifecycle appears to be running in an', 'infinite loop. This is usually caused by a `reset` continually', 'being returned without a break condition.'].join(' ')); + } + } + + if (reset && resetCount <= 50) { + resetCount++; + + if (typeof reset === 'object') { + if (reset.placement) { + statefulPlacement = reset.placement; + } + + if (reset.rects) { + rects = reset.rects === true ? await platform.getElementRects({ + reference, + floating, + strategy + }) : reset.rects; + } + + ({ + x, + y + } = computeCoordsFromPlacement(rects, statefulPlacement, rtl)); + } + + i = -1; + continue; + } + } + + return { + x, + y, + placement: statefulPlacement, + strategy, + middlewareData + }; + }; + + function expandPaddingObject(padding) { + return { + top: 0, + right: 0, + bottom: 0, + left: 0, + ...padding + }; + } + + function getSideObjectFromPadding(padding) { + return typeof padding !== 'number' ? expandPaddingObject(padding) : { + top: padding, + right: padding, + bottom: padding, + left: padding + }; + } + + function rectToClientRect(rect) { + return { ...rect, + top: rect.y, + left: rect.x, + right: rect.x + rect.width, + bottom: rect.y + rect.height + }; + } + + const min$2 = Math.min; + const max$2 = Math.max; + + function within(min$1, value, max$1) { + return max$2(min$1, min$2(value, max$1)); + } + + /** + * Positions an inner element of the floating element such that it is centered + * to the reference element. + * @see https://floating-ui.com/docs/arrow + */ + const arrow = options => ({ + name: 'arrow', + options, + + async fn(middlewareArguments) { + // Since `element` is required, we don't Partial<> the type + const { + element, + padding = 0 + } = options != null ? options : {}; + const { + x, + y, + placement, + rects, + platform + } = middlewareArguments; + + if (element == null) { + if (process.env.NODE_ENV !== "production") { + console.warn('Floating UI: No `element` was passed to the `arrow` middleware.'); + } + + return {}; + } + + const paddingObject = getSideObjectFromPadding(padding); + const coords = { + x, + y + }; + const axis = getMainAxisFromPlacement(placement); + const alignment = getAlignment(placement); + const length = getLengthFromAxis(axis); + const arrowDimensions = await platform.getDimensions(element); + const minProp = axis === 'y' ? 'top' : 'left'; + const maxProp = axis === 'y' ? 'bottom' : 'right'; + const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length]; + const startDiff = coords[axis] - rects.reference[axis]; + const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element)); + let clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0; + + if (clientSize === 0) { + clientSize = rects.floating[length]; + } + + const centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the floating element if the center + // point is outside the floating element's bounds + + const min = paddingObject[minProp]; + const max = clientSize - arrowDimensions[length] - paddingObject[maxProp]; + const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference; + const offset = within(min, center, max); // Make sure that arrow points at the reference + + const alignmentPadding = alignment === 'start' ? paddingObject[minProp] : paddingObject[maxProp]; + const shouldAddOffset = alignmentPadding > 0 && center !== offset && rects.reference[length] <= rects.floating[length]; + const alignmentOffset = shouldAddOffset ? center < min ? min - center : max - center : 0; + return { + [axis]: coords[axis] - alignmentOffset, + data: { + [axis]: offset, + centerOffset: center - offset + } + }; + } + + }); + + async function convertValueToCoords(middlewareArguments, value) { + const { + placement, + platform, + elements + } = middlewareArguments; + const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)); + const side = getSide(placement); + const alignment = getAlignment(placement); + const isVertical = getMainAxisFromPlacement(placement) === 'x'; + const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1; + const crossAxisMulti = rtl && isVertical ? -1 : 1; + const rawValue = typeof value === 'function' ? value(middlewareArguments) : value; // eslint-disable-next-line prefer-const + + let { + mainAxis, + crossAxis, + alignmentAxis + } = typeof rawValue === 'number' ? { + mainAxis: rawValue, + crossAxis: 0, + alignmentAxis: null + } : { + mainAxis: 0, + crossAxis: 0, + alignmentAxis: null, + ...rawValue + }; + + if (alignment && typeof alignmentAxis === 'number') { + crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis; + } + + return isVertical ? { + x: crossAxis * crossAxisMulti, + y: mainAxis * mainAxisMulti + } : { + x: mainAxis * mainAxisMulti, + y: crossAxis * crossAxisMulti + }; + } + /** + * Displaces the floating element from its reference element. + * @see https://floating-ui.com/docs/offset + */ + + const offset = function (value) { + if (value === void 0) { + value = 0; + } + + return { + name: 'offset', + options: value, + + async fn(middlewareArguments) { + const { + x, + y + } = middlewareArguments; + const diffCoords = await convertValueToCoords(middlewareArguments, value); + return { + x: x + diffCoords.x, + y: y + diffCoords.y, + data: diffCoords + }; + } + + }; + }; + + function isWindow(value) { + return value && value.document && value.location && value.alert && value.setInterval; + } + function getWindow(node) { + if (node == null) { + return window; + } + + if (!isWindow(node)) { + const ownerDocument = node.ownerDocument; + return ownerDocument ? ownerDocument.defaultView || window : window; + } + + return node; + } + + function getComputedStyle$1(element) { + return getWindow(element).getComputedStyle(element); + } + + function getNodeName(node) { + return isWindow(node) ? '' : node ? (node.nodeName || '').toLowerCase() : ''; + } + + function getUAString() { + const uaData = navigator.userAgentData; + + if (uaData != null && uaData.brands) { + return uaData.brands.map(item => item.brand + "/" + item.version).join(' '); + } + + return navigator.userAgent; + } + + function isHTMLElement(value) { + return value instanceof getWindow(value).HTMLElement; + } + function isElement(value) { + return value instanceof getWindow(value).Element; + } + function isNode(value) { + return value instanceof getWindow(value).Node; + } + function isShadowRoot(node) { + // Browsers without `ShadowRoot` support + if (typeof ShadowRoot === 'undefined') { + return false; + } + + const OwnElement = getWindow(node).ShadowRoot; + return node instanceof OwnElement || node instanceof ShadowRoot; + } + function isOverflowElement(element) { + // Firefox wants us to check `-x` and `-y` variations as well + const { + overflow, + overflowX, + overflowY + } = getComputedStyle$1(element); + return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); + } + function isTableElement(element) { + return ['table', 'td', 'th'].includes(getNodeName(element)); + } + function isContainingBlock(element) { + // TODO: Try and use feature detection here instead + const isFirefox = /firefox/i.test(getUAString()); + const css = getComputedStyle$1(element); // This is non-exhaustive but covers the most common CSS properties that + // create a containing block. + // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block + + return css.transform !== 'none' || css.perspective !== 'none' || // @ts-ignore (TS 4.1 compat) + css.contain === 'paint' || ['transform', 'perspective'].includes(css.willChange) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false); + } + function isLayoutViewport() { + // Not Safari + return !/^((?!chrome|android).)*safari/i.test(getUAString()); // Feature detection for this fails in various ways + // 鈥� Always-visible scrollbar or not + // 鈥� Width of <html>, etc. + // const vV = win.visualViewport; + // return vV ? Math.abs(win.innerWidth / vV.scale - vV.width) < 0.5 : true; + } + + const min$1 = Math.min; + const max$1 = Math.max; + const round = Math.round; + + function getBoundingClientRect(element, includeScale, isFixedStrategy) { + var _win$visualViewport$o, _win$visualViewport, _win$visualViewport$o2, _win$visualViewport2; + + if (includeScale === void 0) { + includeScale = false; + } + + if (isFixedStrategy === void 0) { + isFixedStrategy = false; + } + + const clientRect = element.getBoundingClientRect(); + let scaleX = 1; + let scaleY = 1; + + if (includeScale && isHTMLElement(element)) { + scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1; + scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1; + } + + const win = isElement(element) ? getWindow(element) : window; + const addVisualOffsets = !isLayoutViewport() && isFixedStrategy; + const x = (clientRect.left + (addVisualOffsets ? (_win$visualViewport$o = (_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) != null ? _win$visualViewport$o : 0 : 0)) / scaleX; + const y = (clientRect.top + (addVisualOffsets ? (_win$visualViewport$o2 = (_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) != null ? _win$visualViewport$o2 : 0 : 0)) / scaleY; + const width = clientRect.width / scaleX; + const height = clientRect.height / scaleY; + return { + width, + height, + top: y, + right: x + width, + bottom: y + height, + left: x, + x, + y + }; + } + + function getDocumentElement(node) { + return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement; + } + + function getNodeScroll(element) { + if (isElement(element)) { + return { + scrollLeft: element.scrollLeft, + scrollTop: element.scrollTop + }; + } + + return { + scrollLeft: element.pageXOffset, + scrollTop: element.pageYOffset + }; + } + + function getWindowScrollBarX(element) { + // If <html> has a CSS width greater than the viewport, then this will be + // incorrect for RTL. + return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft; + } + + function isScaled(element) { + const rect = getBoundingClientRect(element); + return round(rect.width) !== element.offsetWidth || round(rect.height) !== element.offsetHeight; + } + + function getRectRelativeToOffsetParent(element, offsetParent, strategy) { + const isOffsetParentAnElement = isHTMLElement(offsetParent); + const documentElement = getDocumentElement(offsetParent); + const rect = getBoundingClientRect(element, // @ts-ignore - checked above (TS 4.1 compat) + isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed'); + let scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + const offsets = { + x: 0, + y: 0 + }; + + if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') { + if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { + scroll = getNodeScroll(offsetParent); + } + + if (isHTMLElement(offsetParent)) { + const offsetRect = getBoundingClientRect(offsetParent, true); + offsets.x = offsetRect.x + offsetParent.clientLeft; + offsets.y = offsetRect.y + offsetParent.clientTop; + } else if (documentElement) { + offsets.x = getWindowScrollBarX(documentElement); + } + } + + return { + x: rect.left + scroll.scrollLeft - offsets.x, + y: rect.top + scroll.scrollTop - offsets.y, + width: rect.width, + height: rect.height + }; + } + + function getParentNode(node) { + if (getNodeName(node) === 'html') { + return node; + } + + return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle + // @ts-ignore + node.assignedSlot || // step into the shadow DOM of the parent of a slotted node + node.parentNode || ( // DOM Element detected + isShadowRoot(node) ? node.host : null) || // ShadowRoot detected + getDocumentElement(node) // fallback + + ); + } + + function getTrueOffsetParent(element) { + if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') { + return null; + } + + return composedOffsetParent(element); + } + /** + * Polyfills the old offsetParent behavior from before the spec was changed: + * https://github.com/w3c/csswg-drafts/issues/159 + */ + + + function composedOffsetParent(element) { + let { + offsetParent + } = element; + let ancestor = element; + let foundInsideSlot = false; + + while (ancestor && ancestor !== offsetParent) { + const { + assignedSlot + } = ancestor; + + if (assignedSlot) { + let newOffsetParent = assignedSlot.offsetParent; + + if (getComputedStyle$1(assignedSlot).display === 'contents') { + const hadStyleAttribute = assignedSlot.hasAttribute('style'); + const oldDisplay = assignedSlot.style.display; + assignedSlot.style.display = getComputedStyle$1(ancestor).display; + newOffsetParent = assignedSlot.offsetParent; + assignedSlot.style.display = oldDisplay; + + if (!hadStyleAttribute) { + assignedSlot.removeAttribute('style'); + } + } + + ancestor = assignedSlot; + + if (offsetParent !== newOffsetParent) { + offsetParent = newOffsetParent; + foundInsideSlot = true; + } + } else if (isShadowRoot(ancestor) && ancestor.host && foundInsideSlot) { + break; + } + + ancestor = isShadowRoot(ancestor) && ancestor.host || ancestor.parentNode; + } + + return offsetParent; + } + + function getContainingBlock(element) { + let currentNode = getParentNode(element); + + if (isShadowRoot(currentNode)) { + currentNode = currentNode.host; + } + + while (isHTMLElement(currentNode) && !['html', 'body'].includes(getNodeName(currentNode))) { + if (isContainingBlock(currentNode)) { + return currentNode; + } else { + const parent = currentNode.parentNode; + currentNode = isShadowRoot(parent) ? parent.host : parent; + } + } + + return null; + } // Gets the closest ancestor positioned element. Handles some edge cases, + // such as table ancestors and cross browser bugs. + + + function getOffsetParent(element) { + const window = getWindow(element); + let offsetParent = getTrueOffsetParent(element); + + while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') { + offsetParent = getTrueOffsetParent(offsetParent); + } + + if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) { + return window; + } + + return offsetParent || getContainingBlock(element) || window; + } + + function getDimensions(element) { + if (isHTMLElement(element)) { + return { + width: element.offsetWidth, + height: element.offsetHeight + }; + } + + const rect = getBoundingClientRect(element); + return { + width: rect.width, + height: rect.height + }; + } + + function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) { + let { + rect, + offsetParent, + strategy + } = _ref; + const isOffsetParentAnElement = isHTMLElement(offsetParent); + const documentElement = getDocumentElement(offsetParent); + + if (offsetParent === documentElement) { + return rect; + } + + let scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + const offsets = { + x: 0, + y: 0 + }; + + if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') { + if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { + scroll = getNodeScroll(offsetParent); + } + + if (isHTMLElement(offsetParent)) { + const offsetRect = getBoundingClientRect(offsetParent, true); + offsets.x = offsetRect.x + offsetParent.clientLeft; + offsets.y = offsetRect.y + offsetParent.clientTop; + } // This doesn't appear to be need to be negated. + // else if (documentElement) { + // offsets.x = getWindowScrollBarX(documentElement); + // } + + } + + return { ...rect, + x: rect.x - scroll.scrollLeft + offsets.x, + y: rect.y - scroll.scrollTop + offsets.y + }; + } + + function getViewportRect(element, strategy) { + const win = getWindow(element); + const html = getDocumentElement(element); + const visualViewport = win.visualViewport; + let width = html.clientWidth; + let height = html.clientHeight; + let x = 0; + let y = 0; + + if (visualViewport) { + width = visualViewport.width; + height = visualViewport.height; + const layoutViewport = isLayoutViewport(); + + if (layoutViewport || !layoutViewport && strategy === 'fixed') { + x = visualViewport.offsetLeft; + y = visualViewport.offsetTop; + } + } + + return { + width, + height, + x, + y + }; + } + + // of the `<html>` and `<body>` rect bounds if horizontally scrollable + + function getDocumentRect(element) { + var _element$ownerDocumen; + + const html = getDocumentElement(element); + const scroll = getNodeScroll(element); + const body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; + const width = max$1(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); + const height = max$1(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); + let x = -scroll.scrollLeft + getWindowScrollBarX(element); + const y = -scroll.scrollTop; + + if (getComputedStyle$1(body || html).direction === 'rtl') { + x += max$1(html.clientWidth, body ? body.clientWidth : 0) - width; + } + + return { + width, + height, + x, + y + }; + } + + function getNearestOverflowAncestor(node) { + const parentNode = getParentNode(node); + + if (['html', 'body', '#document'].includes(getNodeName(parentNode))) { + // @ts-ignore assume body is always available + return node.ownerDocument.body; + } + + if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) { + return parentNode; + } + + return getNearestOverflowAncestor(parentNode); + } + + function getOverflowAncestors(node, list) { + var _node$ownerDocument; + + if (list === void 0) { + list = []; + } + + const scrollableAncestor = getNearestOverflowAncestor(node); + const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body); + const win = getWindow(scrollableAncestor); + const target = isBody ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) : scrollableAncestor; + const updatedList = list.concat(target); + return isBody ? updatedList : // @ts-ignore: isBody tells us target will be an HTMLElement here + updatedList.concat(getOverflowAncestors(target)); + } + + function contains(parent, child) { + const rootNode = child.getRootNode == null ? void 0 : child.getRootNode(); // First, attempt with faster native method + + if (parent.contains(child)) { + return true; + } // then fallback to custom implementation with Shadow DOM support + else if (rootNode && isShadowRoot(rootNode)) { + let next = child; + + do { + // use `===` replace node.isSameNode() + if (next && parent === next) { + return true; + } // @ts-ignore: need a better way to handle this... + + + next = next.parentNode || next.host; + } while (next); + } + + return false; + } + + function getInnerBoundingClientRect(element, strategy) { + const clientRect = getBoundingClientRect(element, false, strategy === 'fixed'); + const top = clientRect.top + element.clientTop; + const left = clientRect.left + element.clientLeft; + return { + top, + left, + x: left, + y: top, + right: left + element.clientWidth, + bottom: top + element.clientHeight, + width: element.clientWidth, + height: element.clientHeight + }; + } + + function getClientRectFromClippingAncestor(element, clippingParent, strategy) { + if (clippingParent === 'viewport') { + return rectToClientRect(getViewportRect(element, strategy)); + } + + if (isElement(clippingParent)) { + return getInnerBoundingClientRect(clippingParent, strategy); + } + + return rectToClientRect(getDocumentRect(getDocumentElement(element))); + } // A "clipping ancestor" is an overflowable container with the characteristic of + // clipping (or hiding) overflowing elements with a position different from + // `initial` + + + function getClippingAncestors(element) { + const clippingAncestors = getOverflowAncestors(element); + const canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle$1(element).position); + const clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element; + + if (!isElement(clipperElement)) { + return []; + } // @ts-ignore isElement check ensures we return Array<Element> + + + return clippingAncestors.filter(clippingAncestors => isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body'); + } // Gets the maximum area that the element is visible in due to any number of + // clipping ancestors + + + function getClippingRect(_ref) { + let { + element, + boundary, + rootBoundary, + strategy + } = _ref; + const mainClippingAncestors = boundary === 'clippingAncestors' ? getClippingAncestors(element) : [].concat(boundary); + const clippingAncestors = [...mainClippingAncestors, rootBoundary]; + const firstClippingAncestor = clippingAncestors[0]; + const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => { + const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy); + accRect.top = max$1(rect.top, accRect.top); + accRect.right = min$1(rect.right, accRect.right); + accRect.bottom = min$1(rect.bottom, accRect.bottom); + accRect.left = max$1(rect.left, accRect.left); + return accRect; + }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy)); + return { + width: clippingRect.right - clippingRect.left, + height: clippingRect.bottom - clippingRect.top, + x: clippingRect.left, + y: clippingRect.top + }; + } + + const platform = { + getClippingRect, + convertOffsetParentRelativeRectToViewportRelativeRect, + isElement, + getDimensions, + getOffsetParent, + getDocumentElement, + getElementRects: _ref => { + let { + reference, + floating, + strategy + } = _ref; + return { + reference: getRectRelativeToOffsetParent(reference, getOffsetParent(floating), strategy), + floating: { ...getDimensions(floating), + x: 0, + y: 0 + } + }; + }, + getClientRects: element => Array.from(element.getClientRects()), + isRTL: element => getComputedStyle$1(element).direction === 'rtl' + }; + + /** + * Computes the `x` and `y` coordinates that will place the floating element + * next to a reference element when it is given a certain CSS positioning + * strategy. + */ + + const computePosition = (reference, floating, options) => computePosition$1(reference, floating, { + platform, + ...options + }); + + const useFloatingProps = buildProps({}); + const unrefReference = (elRef) => { + if (!isClient) + return; + if (!elRef) + return elRef; + const unrefEl = unrefElement(elRef); + if (unrefEl) + return unrefEl; + return vue.isRef(elRef) ? unrefEl : elRef; + }; + const getPositionDataWithUnit = (record, key) => { + const value = record == null ? void 0 : record[key]; + return isNil(value) ? "" : `${value}px`; + }; + const useFloating = ({ + middleware, + placement, + strategy + }) => { + const referenceRef = vue.ref(); + const contentRef = vue.ref(); + const x = vue.ref(); + const y = vue.ref(); + const middlewareData = vue.ref({}); + const states = { + x, + y, + placement, + strategy, + middlewareData + }; + const update = async () => { + if (!isClient) + return; + const referenceEl = unrefReference(referenceRef); + const contentEl = unrefElement(contentRef); + if (!referenceEl || !contentEl) + return; + const data = await computePosition(referenceEl, contentEl, { + placement: vue.unref(placement), + strategy: vue.unref(strategy), + middleware: vue.unref(middleware) + }); + keysOf(states).forEach((key) => { + states[key].value = data[key]; + }); + }; + vue.onMounted(() => { + vue.watchEffect(() => { + update(); + }); + }); + return { + ...states, + update, + referenceRef, + contentRef + }; + }; + const arrowMiddleware = ({ + arrowRef, + padding + }) => { + return { + name: "arrow", + options: { + element: arrowRef, + padding + }, + fn(args) { + const arrowEl = vue.unref(arrowRef); + if (!arrowEl) + return {}; + return arrow({ + element: arrowEl, + padding + }).fn(args); + } + }; + }; + + function useCursor(input) { + const selectionRef = vue.ref(); + function recordCursor() { + if (input.value == void 0) + return; + const { selectionStart, selectionEnd, value } = input.value; + if (selectionStart == null || selectionEnd == null) + return; + const beforeTxt = value.slice(0, Math.max(0, selectionStart)); + const afterTxt = value.slice(Math.max(0, selectionEnd)); + selectionRef.value = { + selectionStart, + selectionEnd, + value, + beforeTxt, + afterTxt + }; + } + function setCursor() { + if (input.value == void 0 || selectionRef.value == void 0) + return; + const { value } = input.value; + const { beforeTxt, afterTxt, selectionStart } = selectionRef.value; + if (beforeTxt == void 0 || afterTxt == void 0 || selectionStart == void 0) + return; + let startPos = value.length; + if (value.endsWith(afterTxt)) { + startPos = value.length - afterTxt.length; + } else if (value.startsWith(beforeTxt)) { + startPos = beforeTxt.length; + } else { + const beforeLastChar = beforeTxt[selectionStart - 1]; + const newIndex = value.indexOf(beforeLastChar, selectionStart - 1); + if (newIndex !== -1) { + startPos = newIndex + 1; + } + } + input.value.setSelectionRange(startPos, startPos); + } + return [recordCursor, setCursor]; + } + + const getOrderedChildren = (vm, childComponentName, children) => { + const nodes = flattedChildren(vm.subTree).filter((n) => { + var _a; + return vue.isVNode(n) && ((_a = n.type) == null ? void 0 : _a.name) === childComponentName && !!n.component; + }); + const uids = nodes.map((n) => n.component.uid); + return uids.map((uid) => children[uid]).filter((p) => !!p); + }; + const useOrderedChildren = (vm, childComponentName) => { + const children = {}; + const orderedChildren = vue.shallowRef([]); + const addChild = (child) => { + children[child.uid] = child; + orderedChildren.value = getOrderedChildren(vm, childComponentName, children); + }; + const removeChild = (uid) => { + delete children[uid]; + orderedChildren.value = orderedChildren.value.filter((children2) => children2.uid !== uid); + }; + return { + children: orderedChildren, + addChild, + removeChild + }; + }; + + const useSizeProp = buildProp({ + type: String, + values: componentSizes, + required: false + }); + const useSizeProps = { + size: useSizeProp + }; + const SIZE_INJECTION_KEY = Symbol("size"); + const useGlobalSize = () => { + const injectedSize = vue.inject(SIZE_INJECTION_KEY, {}); + return vue.computed(() => { + return vue.unref(injectedSize.size) || ""; + }); + }; + + const configProviderContextKey = Symbol(); + + const globalConfig = vue.ref(); + function useGlobalConfig(key, defaultValue = void 0) { + const config = vue.getCurrentInstance() ? vue.inject(configProviderContextKey, globalConfig) : globalConfig; + if (key) { + return vue.computed(() => { + var _a, _b; + return (_b = (_a = config.value) == null ? void 0 : _a[key]) != null ? _b : defaultValue; + }); + } else { + return config; + } + } + function useGlobalComponentSettings(block, sizeFallback) { + const config = useGlobalConfig(); + const ns = useNamespace(block, vue.computed(() => { + var _a; + return ((_a = config.value) == null ? void 0 : _a.namespace) || defaultNamespace; + })); + const locale = useLocale(vue.computed(() => { + var _a; + return (_a = config.value) == null ? void 0 : _a.locale; + })); + const zIndex = useZIndex(vue.computed(() => { + var _a; + return ((_a = config.value) == null ? void 0 : _a.zIndex) || defaultInitialZIndex; + })); + const size = vue.computed(() => { + var _a; + return vue.unref(sizeFallback) || ((_a = config.value) == null ? void 0 : _a.size) || ""; + }); + provideGlobalConfig(vue.computed(() => vue.unref(config) || {})); + return { + ns, + locale, + zIndex, + size + }; + } + const provideGlobalConfig = (config, app, global = false) => { + var _a; + const inSetup = !!vue.getCurrentInstance(); + const oldConfig = inSetup ? useGlobalConfig() : void 0; + const provideFn = (_a = app == null ? void 0 : app.provide) != null ? _a : inSetup ? vue.provide : void 0; + if (!provideFn) { + return; + } + const context = vue.computed(() => { + const cfg = vue.unref(config); + if (!(oldConfig == null ? void 0 : oldConfig.value)) + return cfg; + return mergeConfig(oldConfig.value, cfg); + }); + provideFn(configProviderContextKey, context); + provideFn(localeContextKey, vue.computed(() => context.value.locale)); + provideFn(namespaceContextKey, vue.computed(() => context.value.namespace)); + provideFn(zIndexContextKey, vue.computed(() => context.value.zIndex)); + provideFn(SIZE_INJECTION_KEY, { + size: vue.computed(() => context.value.size || "") + }); + if (global || !globalConfig.value) { + globalConfig.value = context.value; + } + return context; + }; + const mergeConfig = (a, b) => { + var _a; + const keys = [.../* @__PURE__ */ new Set([...keysOf(a), ...keysOf(b)])]; + const obj = {}; + for (const key of keys) { + obj[key] = (_a = b[key]) != null ? _a : a[key]; + } + return obj; + }; + + const configProviderProps = buildProps({ + a11y: { + type: Boolean, + default: true + }, + locale: { + type: definePropType(Object) + }, + size: useSizeProp, + button: { + type: definePropType(Object) + }, + experimentalFeatures: { + type: definePropType(Object) + }, + keyboardNavigation: { + type: Boolean, + default: true + }, + message: { + type: definePropType(Object) + }, + zIndex: Number, + namespace: { + type: String, + default: "el" + } + }); + + const messageConfig = {}; + const ConfigProvider = vue.defineComponent({ + name: "ElConfigProvider", + props: configProviderProps, + setup(props, { slots }) { + vue.watch(() => props.message, (val) => { + Object.assign(messageConfig, val != null ? val : {}); + }, { immediate: true, deep: true }); + const config = provideGlobalConfig(props); + return () => vue.renderSlot(slots, "default", { config: config == null ? void 0 : config.value }); + } + }); + + const ElConfigProvider = withInstall(ConfigProvider); + + const version$1 = "2.3.1"; + + const makeInstaller = (components = []) => { + const install = (app, options) => { + if (app[INSTALLED_KEY]) + return; + app[INSTALLED_KEY] = true; + components.forEach((c) => app.use(c)); + if (options) + provideGlobalConfig(options, app, true); + }; + return { + version: version$1, + install + }; + }; + + const affixProps = buildProps({ + zIndex: { + type: definePropType([Number, String]), + default: 100 + }, + target: { + type: String, + default: "" + }, + offset: { + type: Number, + default: 0 + }, + position: { + type: String, + values: ["top", "bottom"], + default: "top" + } + }); + const affixEmits = { + scroll: ({ scrollTop, fixed }) => isNumber$1(scrollTop) && isBoolean$1(fixed), + [CHANGE_EVENT]: (fixed) => isBoolean$1(fixed) + }; + + var _export_sfc = (sfc, props) => { + const target = sfc.__vccOpts || sfc; + for (const [key, val] of props) { + target[key] = val; + } + return target; + }; + + const COMPONENT_NAME$n = "ElAffix"; + const __default__$1C = vue.defineComponent({ + name: COMPONENT_NAME$n + }); + const _sfc_main$2i = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1C, + props: affixProps, + emits: affixEmits, + setup(__props, { expose, emit }) { + const props = __props; + const ns = useNamespace("affix"); + const target = vue.shallowRef(); + const root = vue.shallowRef(); + const scrollContainer = vue.shallowRef(); + const { height: windowHeight } = useWindowSize(); + const { + height: rootHeight, + width: rootWidth, + top: rootTop, + bottom: rootBottom, + update: updateRoot + } = useElementBounding(root, { windowScroll: false }); + const targetRect = useElementBounding(target); + const fixed = vue.ref(false); + const scrollTop = vue.ref(0); + const transform = vue.ref(0); + const rootStyle = vue.computed(() => { + return { + height: fixed.value ? `${rootHeight.value}px` : "", + width: fixed.value ? `${rootWidth.value}px` : "" + }; + }); + const affixStyle = vue.computed(() => { + if (!fixed.value) + return {}; + const offset = props.offset ? addUnit(props.offset) : 0; + return { + height: `${rootHeight.value}px`, + width: `${rootWidth.value}px`, + top: props.position === "top" ? offset : "", + bottom: props.position === "bottom" ? offset : "", + transform: transform.value ? `translateY(${transform.value}px)` : "", + zIndex: props.zIndex + }; + }); + const update = () => { + if (!scrollContainer.value) + return; + scrollTop.value = scrollContainer.value instanceof Window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop || 0; + if (props.position === "top") { + if (props.target) { + const difference = targetRect.bottom.value - props.offset - rootHeight.value; + fixed.value = props.offset > rootTop.value && targetRect.bottom.value > 0; + transform.value = difference < 0 ? difference : 0; + } else { + fixed.value = props.offset > rootTop.value; + } + } else if (props.target) { + const difference = windowHeight.value - targetRect.top.value - props.offset - rootHeight.value; + fixed.value = windowHeight.value - props.offset < rootBottom.value && windowHeight.value > targetRect.top.value; + transform.value = difference < 0 ? -difference : 0; + } else { + fixed.value = windowHeight.value - props.offset < rootBottom.value; + } + }; + const handleScroll = () => { + updateRoot(); + emit("scroll", { + scrollTop: scrollTop.value, + fixed: fixed.value + }); + }; + vue.watch(fixed, (val) => emit("change", val)); + vue.onMounted(() => { + var _a; + if (props.target) { + target.value = (_a = document.querySelector(props.target)) != null ? _a : void 0; + if (!target.value) + throwError(COMPONENT_NAME$n, `Target is not existed: ${props.target}`); + } else { + target.value = document.documentElement; + } + scrollContainer.value = getScrollContainer(root.value, true); + updateRoot(); + }); + useEventListener(scrollContainer, "scroll", handleScroll); + vue.watchEffect(update); + expose({ + update, + updateRoot + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + ref_key: "root", + ref: root, + class: vue.normalizeClass(vue.unref(ns).b()), + style: vue.normalizeStyle(vue.unref(rootStyle)) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass({ [vue.unref(ns).m("fixed")]: fixed.value }), + style: vue.normalizeStyle(vue.unref(affixStyle)) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 6) + ], 6); + }; + } + }); + var Affix = /* @__PURE__ */ _export_sfc(_sfc_main$2i, [["__file", "affix.vue"]]); + + const ElAffix = withInstall(Affix); + + const iconProps = buildProps({ + size: { + type: definePropType([Number, String]) + }, + color: { + type: String + } + }); + + const __default__$1B = vue.defineComponent({ + name: "ElIcon", + inheritAttrs: false + }); + const _sfc_main$2h = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1B, + props: iconProps, + setup(__props) { + const props = __props; + const ns = useNamespace("icon"); + const style = vue.computed(() => { + const { size, color } = props; + if (!size && !color) + return {}; + return { + fontSize: isUndefined(size) ? void 0 : addUnit(size), + "--color": color + }; + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({ + class: vue.unref(ns).b(), + style: vue.unref(style) + }, _ctx.$attrs), [ + vue.renderSlot(_ctx.$slots, "default") + ], 16); + }; + } + }); + var Icon = /* @__PURE__ */ _export_sfc(_sfc_main$2h, [["__file", "icon.vue"]]); + + const ElIcon = withInstall(Icon); + + const alertEffects = ["light", "dark"]; + const alertProps = buildProps({ + title: { + type: String, + default: "" + }, + description: { + type: String, + default: "" + }, + type: { + type: String, + values: keysOf(TypeComponentsMap), + default: "info" + }, + closable: { + type: Boolean, + default: true + }, + closeText: { + type: String, + default: "" + }, + showIcon: Boolean, + center: Boolean, + effect: { + type: String, + values: alertEffects, + default: "light" + } + }); + const alertEmits = { + close: (evt) => evt instanceof MouseEvent + }; + + const __default__$1A = vue.defineComponent({ + name: "ElAlert" + }); + const _sfc_main$2g = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1A, + props: alertProps, + emits: alertEmits, + setup(__props, { emit }) { + const props = __props; + const { Close } = TypeComponents; + const slots = vue.useSlots(); + const ns = useNamespace("alert"); + const visible = vue.ref(true); + const iconComponent = vue.computed(() => TypeComponentsMap[props.type]); + const iconClass = vue.computed(() => [ + ns.e("icon"), + { [ns.is("big")]: !!props.description || !!slots.default } + ]); + const isBoldTitle = vue.computed(() => { + return { [ns.is("bold")]: props.description || slots.default }; + }); + const close = (evt) => { + visible.value = false; + emit("close", evt); + }; + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.Transition, { + name: vue.unref(ns).b("fade"), + persisted: "" + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createElementVNode("div", { + class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.type), vue.unref(ns).is("center", _ctx.center), vue.unref(ns).is(_ctx.effect)]), + role: "alert" + }, [ + _ctx.showIcon && vue.unref(iconComponent) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(iconClass)) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(iconComponent)))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("content")) + }, [ + _ctx.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + class: vue.normalizeClass([vue.unref(ns).e("title"), vue.unref(isBoldTitle)]) + }, [ + vue.renderSlot(_ctx.$slots, "title", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.title), 1) + ]) + ], 2)) : vue.createCommentVNode("v-if", true), + _ctx.$slots.default || _ctx.description ? (vue.openBlock(), vue.createElementBlock("p", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("description")) + }, [ + vue.renderSlot(_ctx.$slots, "default", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.description), 1) + ]) + ], 2)) : vue.createCommentVNode("v-if", true), + _ctx.closable ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [ + _ctx.closeText ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass([vue.unref(ns).e("close-btn"), vue.unref(ns).is("customed")]), + onClick: close + }, vue.toDisplayString(_ctx.closeText), 3)) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("close-btn")), + onClick: close + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(Close)) + ]), + _: 1 + }, 8, ["class"])) + ], 64)) : vue.createCommentVNode("v-if", true) + ], 2) + ], 2), [ + [vue.vShow, visible.value] + ]) + ]), + _: 3 + }, 8, ["name"]); + }; + } + }); + var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["__file", "alert.vue"]]); + + const ElAlert = withInstall(Alert); + + const formContextKey = Symbol("formContextKey"); + const formItemContextKey = Symbol("formItemContextKey"); + + const useFormSize = (fallback, ignore = {}) => { + const emptyRef = vue.ref(void 0); + const size = ignore.prop ? emptyRef : useProp("size"); + const globalConfig = ignore.global ? emptyRef : useGlobalSize(); + const form = ignore.form ? { size: void 0 } : vue.inject(formContextKey, void 0); + const formItem = ignore.formItem ? { size: void 0 } : vue.inject(formItemContextKey, void 0); + return vue.computed(() => size.value || vue.unref(fallback) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || globalConfig.value || ""); + }; + const useFormDisabled = (fallback) => { + const disabled = useProp("disabled"); + const form = vue.inject(formContextKey, void 0); + return vue.computed(() => disabled.value || vue.unref(fallback) || (form == null ? void 0 : form.disabled) || false); + }; + const useSize = useFormSize; + const useDisabled = useFormDisabled; + + const useFormItem = () => { + const form = vue.inject(formContextKey, void 0); + const formItem = vue.inject(formItemContextKey, void 0); + return { + form, + formItem + }; + }; + const useFormItemInputId = (props, { + formItemContext, + disableIdGeneration, + disableIdManagement + }) => { + if (!disableIdGeneration) { + disableIdGeneration = vue.ref(false); + } + if (!disableIdManagement) { + disableIdManagement = vue.ref(false); + } + const inputId = vue.ref(); + let idUnwatch = void 0; + const isLabeledByFormItem = vue.computed(() => { + var _a; + return !!(!props.label && formItemContext && formItemContext.inputIds && ((_a = formItemContext.inputIds) == null ? void 0 : _a.length) <= 1); + }); + vue.onMounted(() => { + idUnwatch = vue.watch([vue.toRef(props, "id"), disableIdGeneration], ([id, disableIdGeneration2]) => { + const newId = id != null ? id : !disableIdGeneration2 ? useId().value : void 0; + if (newId !== inputId.value) { + if (formItemContext == null ? void 0 : formItemContext.removeInputId) { + inputId.value && formItemContext.removeInputId(inputId.value); + if (!(disableIdManagement == null ? void 0 : disableIdManagement.value) && !disableIdGeneration2 && newId) { + formItemContext.addInputId(newId); + } + } + inputId.value = newId; + } + }, { immediate: true }); + }); + vue.onUnmounted(() => { + idUnwatch && idUnwatch(); + if (formItemContext == null ? void 0 : formItemContext.removeInputId) { + inputId.value && formItemContext.removeInputId(inputId.value); + } + }); + return { + isLabeledByFormItem, + inputId + }; + }; + + const formMetaProps = buildProps({ + size: { + type: String, + values: componentSizes + }, + disabled: Boolean + }); + const formProps = buildProps({ + ...formMetaProps, + model: Object, + rules: { + type: definePropType(Object) + }, + labelPosition: { + type: String, + values: ["left", "right", "top"], + default: "right" + }, + requireAsteriskPosition: { + type: String, + values: ["left", "right"], + default: "left" + }, + labelWidth: { + type: [String, Number], + default: "" + }, + labelSuffix: { + type: String, + default: "" + }, + inline: Boolean, + inlineMessage: Boolean, + statusIcon: Boolean, + showMessage: { + type: Boolean, + default: true + }, + validateOnRuleChange: { + type: Boolean, + default: true + }, + hideRequiredAsterisk: { + type: Boolean, + default: false + }, + scrollToError: Boolean + }); + const formEmits = { + validate: (prop, isValid, message) => (isArray$1(prop) || isString$1(prop)) && isBoolean$1(isValid) && isString$1(message) + }; + + function useFormLabelWidth() { + const potentialLabelWidthArr = vue.ref([]); + const autoLabelWidth = vue.computed(() => { + if (!potentialLabelWidthArr.value.length) + return "0"; + const max = Math.max(...potentialLabelWidthArr.value); + return max ? `${max}px` : ""; + }); + function getLabelWidthIndex(width) { + const index = potentialLabelWidthArr.value.indexOf(width); + if (index === -1 && autoLabelWidth.value === "0") ; + return index; + } + function registerLabelWidth(val, oldVal) { + if (val && oldVal) { + const index = getLabelWidthIndex(oldVal); + potentialLabelWidthArr.value.splice(index, 1, val); + } else if (val) { + potentialLabelWidthArr.value.push(val); + } + } + function deregisterLabelWidth(val) { + const index = getLabelWidthIndex(val); + if (index > -1) { + potentialLabelWidthArr.value.splice(index, 1); + } + } + return { + autoLabelWidth, + registerLabelWidth, + deregisterLabelWidth + }; + } + const filterFields = (fields, props) => { + const normalized = castArray$1(props); + return normalized.length > 0 ? fields.filter((field) => field.prop && normalized.includes(field.prop)) : fields; + }; + + const COMPONENT_NAME$m = "ElForm"; + const __default__$1z = vue.defineComponent({ + name: COMPONENT_NAME$m + }); + const _sfc_main$2f = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1z, + props: formProps, + emits: formEmits, + setup(__props, { expose, emit }) { + const props = __props; + const fields = []; + const formSize = useFormSize(); + const ns = useNamespace("form"); + const formClasses = vue.computed(() => { + const { labelPosition, inline } = props; + return [ + ns.b(), + ns.m(formSize.value || "default"), + { + [ns.m(`label-${labelPosition}`)]: labelPosition, + [ns.m("inline")]: inline + } + ]; + }); + const addField = (field) => { + fields.push(field); + }; + const removeField = (field) => { + if (field.prop) { + fields.splice(fields.indexOf(field), 1); + } + }; + const resetFields = (properties = []) => { + if (!props.model) { + return; + } + filterFields(fields, properties).forEach((field) => field.resetField()); + }; + const clearValidate = (props2 = []) => { + filterFields(fields, props2).forEach((field) => field.clearValidate()); + }; + const isValidatable = vue.computed(() => { + const hasModel = !!props.model; + return hasModel; + }); + const obtainValidateFields = (props2) => { + if (fields.length === 0) + return []; + const filteredFields = filterFields(fields, props2); + if (!filteredFields.length) { + return []; + } + return filteredFields; + }; + const validate = async (callback) => validateField(void 0, callback); + const doValidateField = async (props2 = []) => { + if (!isValidatable.value) + return false; + const fields2 = obtainValidateFields(props2); + if (fields2.length === 0) + return true; + let validationErrors = {}; + for (const field of fields2) { + try { + await field.validate(""); + } catch (fields3) { + validationErrors = { + ...validationErrors, + ...fields3 + }; + } + } + if (Object.keys(validationErrors).length === 0) + return true; + return Promise.reject(validationErrors); + }; + const validateField = async (modelProps = [], callback) => { + const shouldThrow = !isFunction$1(callback); + try { + const result = await doValidateField(modelProps); + if (result === true) { + callback == null ? void 0 : callback(result); + } + return result; + } catch (e) { + if (e instanceof Error) + throw e; + const invalidFields = e; + if (props.scrollToError) { + scrollToField(Object.keys(invalidFields)[0]); + } + callback == null ? void 0 : callback(false, invalidFields); + return shouldThrow && Promise.reject(invalidFields); + } + }; + const scrollToField = (prop) => { + var _a; + const field = filterFields(fields, prop)[0]; + if (field) { + (_a = field.$el) == null ? void 0 : _a.scrollIntoView(); + } + }; + vue.watch(() => props.rules, () => { + if (props.validateOnRuleChange) { + validate().catch((err) => debugWarn()); + } + }, { deep: true }); + vue.provide(formContextKey, vue.reactive({ + ...vue.toRefs(props), + emit, + resetFields, + clearValidate, + validateField, + addField, + removeField, + ...useFormLabelWidth() + })); + expose({ + validate, + validateField, + resetFields, + clearValidate, + scrollToField + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("form", { + class: vue.normalizeClass(vue.unref(formClasses)) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2); + }; + } + }); + var Form = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["__file", "form.vue"]]); + + function _extends() { + _extends = Object.assign ? Object.assign.bind() : function(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + return target; + }; + return _extends.apply(this, arguments); + } + function _inheritsLoose(subClass, superClass) { + subClass.prototype = Object.create(superClass.prototype); + subClass.prototype.constructor = subClass; + _setPrototypeOf(subClass, superClass); + } + function _getPrototypeOf(o) { + _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf2(o2) { + return o2.__proto__ || Object.getPrototypeOf(o2); + }; + return _getPrototypeOf(o); + } + function _setPrototypeOf(o, p) { + _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o2, p2) { + o2.__proto__ = p2; + return o2; + }; + return _setPrototypeOf(o, p); + } + function _isNativeReflectConstruct() { + if (typeof Reflect === "undefined" || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if (typeof Proxy === "function") + return true; + try { + Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })); + return true; + } catch (e) { + return false; + } + } + function _construct(Parent, args, Class) { + if (_isNativeReflectConstruct()) { + _construct = Reflect.construct.bind(); + } else { + _construct = function _construct2(Parent2, args2, Class2) { + var a = [null]; + a.push.apply(a, args2); + var Constructor = Function.bind.apply(Parent2, a); + var instance = new Constructor(); + if (Class2) + _setPrototypeOf(instance, Class2.prototype); + return instance; + }; + } + return _construct.apply(null, arguments); + } + function _isNativeFunction(fn) { + return Function.toString.call(fn).indexOf("[native code]") !== -1; + } + function _wrapNativeSuper(Class) { + var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0; + _wrapNativeSuper = function _wrapNativeSuper2(Class2) { + if (Class2 === null || !_isNativeFunction(Class2)) + return Class2; + if (typeof Class2 !== "function") { + throw new TypeError("Super expression must either be null or a function"); + } + if (typeof _cache !== "undefined") { + if (_cache.has(Class2)) + return _cache.get(Class2); + _cache.set(Class2, Wrapper); + } + function Wrapper() { + return _construct(Class2, arguments, _getPrototypeOf(this).constructor); + } + Wrapper.prototype = Object.create(Class2.prototype, { + constructor: { + value: Wrapper, + enumerable: false, + writable: true, + configurable: true + } + }); + return _setPrototypeOf(Wrapper, Class2); + }; + return _wrapNativeSuper(Class); + } + var formatRegExp = /%[sdj%]/g; + var warning = function warning2() { + }; + if (typeof process !== "undefined" && process.env && false) { + warning = function warning3(type4, errors) { + if (typeof console !== "undefined" && console.warn && typeof ASYNC_VALIDATOR_NO_WARNING === "undefined") { + if (errors.every(function(e) { + return typeof e === "string"; + })) { + console.warn(type4, errors); + } + } + }; + } + function convertFieldsError(errors) { + if (!errors || !errors.length) + return null; + var fields = {}; + errors.forEach(function(error) { + var field = error.field; + fields[field] = fields[field] || []; + fields[field].push(error); + }); + return fields; + } + function format(template) { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + var i = 0; + var len = args.length; + if (typeof template === "function") { + return template.apply(null, args); + } + if (typeof template === "string") { + var str = template.replace(formatRegExp, function(x) { + if (x === "%%") { + return "%"; + } + if (i >= len) { + return x; + } + switch (x) { + case "%s": + return String(args[i++]); + case "%d": + return Number(args[i++]); + case "%j": + try { + return JSON.stringify(args[i++]); + } catch (_) { + return "[Circular]"; + } + break; + default: + return x; + } + }); + return str; + } + return template; + } + function isNativeStringType(type4) { + return type4 === "string" || type4 === "url" || type4 === "hex" || type4 === "email" || type4 === "date" || type4 === "pattern"; + } + function isEmptyValue(value, type4) { + if (value === void 0 || value === null) { + return true; + } + if (type4 === "array" && Array.isArray(value) && !value.length) { + return true; + } + if (isNativeStringType(type4) && typeof value === "string" && !value) { + return true; + } + return false; + } + function asyncParallelArray(arr, func, callback) { + var results = []; + var total = 0; + var arrLength = arr.length; + function count(errors) { + results.push.apply(results, errors || []); + total++; + if (total === arrLength) { + callback(results); + } + } + arr.forEach(function(a) { + func(a, count); + }); + } + function asyncSerialArray(arr, func, callback) { + var index = 0; + var arrLength = arr.length; + function next(errors) { + if (errors && errors.length) { + callback(errors); + return; + } + var original = index; + index = index + 1; + if (original < arrLength) { + func(arr[original], next); + } else { + callback([]); + } + } + next([]); + } + function flattenObjArr(objArr) { + var ret = []; + Object.keys(objArr).forEach(function(k) { + ret.push.apply(ret, objArr[k] || []); + }); + return ret; + } + var AsyncValidationError = /* @__PURE__ */ function(_Error) { + _inheritsLoose(AsyncValidationError2, _Error); + function AsyncValidationError2(errors, fields) { + var _this; + _this = _Error.call(this, "Async Validation Error") || this; + _this.errors = errors; + _this.fields = fields; + return _this; + } + return AsyncValidationError2; + }(/* @__PURE__ */ _wrapNativeSuper(Error)); + function asyncMap(objArr, option, func, callback, source) { + if (option.first) { + var _pending = new Promise(function(resolve, reject) { + var next = function next2(errors) { + callback(errors); + return errors.length ? reject(new AsyncValidationError(errors, convertFieldsError(errors))) : resolve(source); + }; + var flattenArr = flattenObjArr(objArr); + asyncSerialArray(flattenArr, func, next); + }); + _pending["catch"](function(e) { + return e; + }); + return _pending; + } + var firstFields = option.firstFields === true ? Object.keys(objArr) : option.firstFields || []; + var objArrKeys = Object.keys(objArr); + var objArrLength = objArrKeys.length; + var total = 0; + var results = []; + var pending = new Promise(function(resolve, reject) { + var next = function next2(errors) { + results.push.apply(results, errors); + total++; + if (total === objArrLength) { + callback(results); + return results.length ? reject(new AsyncValidationError(results, convertFieldsError(results))) : resolve(source); + } + }; + if (!objArrKeys.length) { + callback(results); + resolve(source); + } + objArrKeys.forEach(function(key) { + var arr = objArr[key]; + if (firstFields.indexOf(key) !== -1) { + asyncSerialArray(arr, func, next); + } else { + asyncParallelArray(arr, func, next); + } + }); + }); + pending["catch"](function(e) { + return e; + }); + return pending; + } + function isErrorObj(obj) { + return !!(obj && obj.message !== void 0); + } + function getValue(value, path) { + var v = value; + for (var i = 0; i < path.length; i++) { + if (v == void 0) { + return v; + } + v = v[path[i]]; + } + return v; + } + function complementError(rule, source) { + return function(oe) { + var fieldValue; + if (rule.fullFields) { + fieldValue = getValue(source, rule.fullFields); + } else { + fieldValue = source[oe.field || rule.fullField]; + } + if (isErrorObj(oe)) { + oe.field = oe.field || rule.fullField; + oe.fieldValue = fieldValue; + return oe; + } + return { + message: typeof oe === "function" ? oe() : oe, + fieldValue, + field: oe.field || rule.fullField + }; + }; + } + function deepMerge(target, source) { + if (source) { + for (var s in source) { + if (source.hasOwnProperty(s)) { + var value = source[s]; + if (typeof value === "object" && typeof target[s] === "object") { + target[s] = _extends({}, target[s], value); + } else { + target[s] = value; + } + } + } + } + return target; + } + var required$1 = function required(rule, value, source, errors, options, type4) { + if (rule.required && (!source.hasOwnProperty(rule.field) || isEmptyValue(value, type4 || rule.type))) { + errors.push(format(options.messages.required, rule.fullField)); + } + }; + var whitespace = function whitespace2(rule, value, source, errors, options) { + if (/^\s+$/.test(value) || value === "") { + errors.push(format(options.messages.whitespace, rule.fullField)); + } + }; + var urlReg; + var getUrlRegex = function() { + if (urlReg) { + return urlReg; + } + var word = "[a-fA-F\\d:]"; + var b = function b2(options) { + return options && options.includeBoundaries ? "(?:(?<=\\s|^)(?=" + word + ")|(?<=" + word + ")(?=\\s|$))" : ""; + }; + var v4 = "(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]\\d|\\d)(?:\\.(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]\\d|\\d)){3}"; + var v6seg = "[a-fA-F\\d]{1,4}"; + var v6 = ("\n(?:\n(?:" + v6seg + ":){7}(?:" + v6seg + "|:)| // 1:2:3:4:5:6:7:: 1:2:3:4:5:6:7:8\n(?:" + v6seg + ":){6}(?:" + v4 + "|:" + v6seg + "|:)| // 1:2:3:4:5:6:: 1:2:3:4:5:6::8 1:2:3:4:5:6::8 1:2:3:4:5:6::1.2.3.4\n(?:" + v6seg + ":){5}(?::" + v4 + "|(?::" + v6seg + "){1,2}|:)| // 1:2:3:4:5:: 1:2:3:4:5::7:8 1:2:3:4:5::8 1:2:3:4:5::7:1.2.3.4\n(?:" + v6seg + ":){4}(?:(?::" + v6seg + "){0,1}:" + v4 + "|(?::" + v6seg + "){1,3}|:)| // 1:2:3:4:: 1:2:3:4::6:7:8 1:2:3:4::8 1:2:3:4::6:7:1.2.3.4\n(?:" + v6seg + ":){3}(?:(?::" + v6seg + "){0,2}:" + v4 + "|(?::" + v6seg + "){1,4}|:)| // 1:2:3:: 1:2:3::5:6:7:8 1:2:3::8 1:2:3::5:6:7:1.2.3.4\n(?:" + v6seg + ":){2}(?:(?::" + v6seg + "){0,3}:" + v4 + "|(?::" + v6seg + "){1,5}|:)| // 1:2:: 1:2::4:5:6:7:8 1:2::8 1:2::4:5:6:7:1.2.3.4\n(?:" + v6seg + ":){1}(?:(?::" + v6seg + "){0,4}:" + v4 + "|(?::" + v6seg + "){1,6}|:)| // 1:: 1::3:4:5:6:7:8 1::8 1::3:4:5:6:7:1.2.3.4\n(?::(?:(?::" + v6seg + "){0,5}:" + v4 + "|(?::" + v6seg + "){1,7}|:)) // ::2:3:4:5:6:7:8 ::2:3:4:5:6:7:8 ::8 ::1.2.3.4\n)(?:%[0-9a-zA-Z]{1,})? // %eth0 %1\n").replace(/\s*\/\/.*$/gm, "").replace(/\n/g, "").trim(); + var v46Exact = new RegExp("(?:^" + v4 + "$)|(?:^" + v6 + "$)"); + var v4exact = new RegExp("^" + v4 + "$"); + var v6exact = new RegExp("^" + v6 + "$"); + var ip = function ip2(options) { + return options && options.exact ? v46Exact : new RegExp("(?:" + b(options) + v4 + b(options) + ")|(?:" + b(options) + v6 + b(options) + ")", "g"); + }; + ip.v4 = function(options) { + return options && options.exact ? v4exact : new RegExp("" + b(options) + v4 + b(options), "g"); + }; + ip.v6 = function(options) { + return options && options.exact ? v6exact : new RegExp("" + b(options) + v6 + b(options), "g"); + }; + var protocol = "(?:(?:[a-z]+:)?//)"; + var auth = "(?:\\S+(?::\\S*)?@)?"; + var ipv4 = ip.v4().source; + var ipv6 = ip.v6().source; + var host = "(?:(?:[a-z\\u00a1-\\uffff0-9][-_]*)*[a-z\\u00a1-\\uffff0-9]+)"; + var domain = "(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*"; + var tld = "(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))"; + var port = "(?::\\d{2,5})?"; + var path = '(?:[/?#][^\\s"]*)?'; + var regex = "(?:" + protocol + "|www\\.)" + auth + "(?:localhost|" + ipv4 + "|" + ipv6 + "|" + host + domain + tld + ")" + port + path; + urlReg = new RegExp("(?:^" + regex + "$)", "i"); + return urlReg; + }; + var pattern$2 = { + email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+\.)+[a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}))$/, + hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i + }; + var types = { + integer: function integer(value) { + return types.number(value) && parseInt(value, 10) === value; + }, + "float": function float(value) { + return types.number(value) && !types.integer(value); + }, + array: function array(value) { + return Array.isArray(value); + }, + regexp: function regexp(value) { + if (value instanceof RegExp) { + return true; + } + try { + return !!new RegExp(value); + } catch (e) { + return false; + } + }, + date: function date(value) { + return typeof value.getTime === "function" && typeof value.getMonth === "function" && typeof value.getYear === "function" && !isNaN(value.getTime()); + }, + number: function number(value) { + if (isNaN(value)) { + return false; + } + return typeof value === "number"; + }, + object: function object(value) { + return typeof value === "object" && !types.array(value); + }, + method: function method(value) { + return typeof value === "function"; + }, + email: function email(value) { + return typeof value === "string" && value.length <= 320 && !!value.match(pattern$2.email); + }, + url: function url(value) { + return typeof value === "string" && value.length <= 2048 && !!value.match(getUrlRegex()); + }, + hex: function hex(value) { + return typeof value === "string" && !!value.match(pattern$2.hex); + } + }; + var type$1 = function type(rule, value, source, errors, options) { + if (rule.required && value === void 0) { + required$1(rule, value, source, errors, options); + return; + } + var custom = ["integer", "float", "array", "regexp", "object", "method", "email", "number", "date", "url", "hex"]; + var ruleType = rule.type; + if (custom.indexOf(ruleType) > -1) { + if (!types[ruleType](value)) { + errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type)); + } + } else if (ruleType && typeof value !== rule.type) { + errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type)); + } + }; + var range = function range2(rule, value, source, errors, options) { + var len = typeof rule.len === "number"; + var min = typeof rule.min === "number"; + var max = typeof rule.max === "number"; + var spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g; + var val = value; + var key = null; + var num = typeof value === "number"; + var str = typeof value === "string"; + var arr = Array.isArray(value); + if (num) { + key = "number"; + } else if (str) { + key = "string"; + } else if (arr) { + key = "array"; + } + if (!key) { + return false; + } + if (arr) { + val = value.length; + } + if (str) { + val = value.replace(spRegexp, "_").length; + } + if (len) { + if (val !== rule.len) { + errors.push(format(options.messages[key].len, rule.fullField, rule.len)); + } + } else if (min && !max && val < rule.min) { + errors.push(format(options.messages[key].min, rule.fullField, rule.min)); + } else if (max && !min && val > rule.max) { + errors.push(format(options.messages[key].max, rule.fullField, rule.max)); + } else if (min && max && (val < rule.min || val > rule.max)) { + errors.push(format(options.messages[key].range, rule.fullField, rule.min, rule.max)); + } + }; + var ENUM$1 = "enum"; + var enumerable$1 = function enumerable(rule, value, source, errors, options) { + rule[ENUM$1] = Array.isArray(rule[ENUM$1]) ? rule[ENUM$1] : []; + if (rule[ENUM$1].indexOf(value) === -1) { + errors.push(format(options.messages[ENUM$1], rule.fullField, rule[ENUM$1].join(", "))); + } + }; + var pattern$1 = function pattern(rule, value, source, errors, options) { + if (rule.pattern) { + if (rule.pattern instanceof RegExp) { + rule.pattern.lastIndex = 0; + if (!rule.pattern.test(value)) { + errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern)); + } + } else if (typeof rule.pattern === "string") { + var _pattern = new RegExp(rule.pattern); + if (!_pattern.test(value)) { + errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern)); + } + } + } + }; + var rules = { + required: required$1, + whitespace, + type: type$1, + range, + "enum": enumerable$1, + pattern: pattern$1 + }; + var string = function string2(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value, "string") && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options, "string"); + if (!isEmptyValue(value, "string")) { + rules.type(rule, value, source, errors, options); + rules.range(rule, value, source, errors, options); + rules.pattern(rule, value, source, errors, options); + if (rule.whitespace === true) { + rules.whitespace(rule, value, source, errors, options); + } + } + } + callback(errors); + }; + var method2 = function method3(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + if (value !== void 0) { + rules.type(rule, value, source, errors, options); + } + } + callback(errors); + }; + var number2 = function number3(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (value === "") { + value = void 0; + } + if (isEmptyValue(value) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + if (value !== void 0) { + rules.type(rule, value, source, errors, options); + rules.range(rule, value, source, errors, options); + } + } + callback(errors); + }; + var _boolean = function _boolean2(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + if (value !== void 0) { + rules.type(rule, value, source, errors, options); + } + } + callback(errors); + }; + var regexp2 = function regexp3(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + if (!isEmptyValue(value)) { + rules.type(rule, value, source, errors, options); + } + } + callback(errors); + }; + var integer2 = function integer3(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + if (value !== void 0) { + rules.type(rule, value, source, errors, options); + rules.range(rule, value, source, errors, options); + } + } + callback(errors); + }; + var floatFn = function floatFn2(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + if (value !== void 0) { + rules.type(rule, value, source, errors, options); + rules.range(rule, value, source, errors, options); + } + } + callback(errors); + }; + var array2 = function array3(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if ((value === void 0 || value === null) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options, "array"); + if (value !== void 0 && value !== null) { + rules.type(rule, value, source, errors, options); + rules.range(rule, value, source, errors, options); + } + } + callback(errors); + }; + var object2 = function object3(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + if (value !== void 0) { + rules.type(rule, value, source, errors, options); + } + } + callback(errors); + }; + var ENUM = "enum"; + var enumerable2 = function enumerable3(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + if (value !== void 0) { + rules[ENUM](rule, value, source, errors, options); + } + } + callback(errors); + }; + var pattern2 = function pattern3(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value, "string") && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + if (!isEmptyValue(value, "string")) { + rules.pattern(rule, value, source, errors, options); + } + } + callback(errors); + }; + var date2 = function date3(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value, "date") && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + if (!isEmptyValue(value, "date")) { + var dateObject; + if (value instanceof Date) { + dateObject = value; + } else { + dateObject = new Date(value); + } + rules.type(rule, dateObject, source, errors, options); + if (dateObject) { + rules.range(rule, dateObject.getTime(), source, errors, options); + } + } + } + callback(errors); + }; + var required2 = function required3(rule, value, callback, source, options) { + var errors = []; + var type4 = Array.isArray(value) ? "array" : typeof value; + rules.required(rule, value, source, errors, options, type4); + callback(errors); + }; + var type2 = function type3(rule, value, callback, source, options) { + var ruleType = rule.type; + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value, ruleType) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options, ruleType); + if (!isEmptyValue(value, ruleType)) { + rules.type(rule, value, source, errors, options); + } + } + callback(errors); + }; + var any = function any2(rule, value, callback, source, options) { + var errors = []; + var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); + if (validate) { + if (isEmptyValue(value) && !rule.required) { + return callback(); + } + rules.required(rule, value, source, errors, options); + } + callback(errors); + }; + var validators = { + string, + method: method2, + number: number2, + "boolean": _boolean, + regexp: regexp2, + integer: integer2, + "float": floatFn, + array: array2, + object: object2, + "enum": enumerable2, + pattern: pattern2, + date: date2, + url: type2, + hex: type2, + email: type2, + required: required2, + any + }; + function newMessages() { + return { + "default": "Validation error on field %s", + required: "%s is required", + "enum": "%s must be one of %s", + whitespace: "%s cannot be empty", + date: { + format: "%s date %s is invalid for format %s", + parse: "%s date could not be parsed, %s is invalid ", + invalid: "%s date %s is invalid" + }, + types: { + string: "%s is not a %s", + method: "%s is not a %s (function)", + array: "%s is not an %s", + object: "%s is not an %s", + number: "%s is not a %s", + date: "%s is not a %s", + "boolean": "%s is not a %s", + integer: "%s is not an %s", + "float": "%s is not a %s", + regexp: "%s is not a valid %s", + email: "%s is not a valid %s", + url: "%s is not a valid %s", + hex: "%s is not a valid %s" + }, + string: { + len: "%s must be exactly %s characters", + min: "%s must be at least %s characters", + max: "%s cannot be longer than %s characters", + range: "%s must be between %s and %s characters" + }, + number: { + len: "%s must equal %s", + min: "%s cannot be less than %s", + max: "%s cannot be greater than %s", + range: "%s must be between %s and %s" + }, + array: { + len: "%s must be exactly %s in length", + min: "%s cannot be less than %s in length", + max: "%s cannot be greater than %s in length", + range: "%s must be between %s and %s in length" + }, + pattern: { + mismatch: "%s value %s does not match pattern %s" + }, + clone: function clone() { + var cloned = JSON.parse(JSON.stringify(this)); + cloned.clone = this.clone; + return cloned; + } + }; + } + var messages = newMessages(); + var Schema = /* @__PURE__ */ function() { + function Schema2(descriptor) { + this.rules = null; + this._messages = messages; + this.define(descriptor); + } + var _proto = Schema2.prototype; + _proto.define = function define(rules2) { + var _this = this; + if (!rules2) { + throw new Error("Cannot configure a schema with no rules"); + } + if (typeof rules2 !== "object" || Array.isArray(rules2)) { + throw new Error("Rules must be an object"); + } + this.rules = {}; + Object.keys(rules2).forEach(function(name) { + var item = rules2[name]; + _this.rules[name] = Array.isArray(item) ? item : [item]; + }); + }; + _proto.messages = function messages2(_messages) { + if (_messages) { + this._messages = deepMerge(newMessages(), _messages); + } + return this._messages; + }; + _proto.validate = function validate(source_, o, oc) { + var _this2 = this; + if (o === void 0) { + o = {}; + } + if (oc === void 0) { + oc = function oc2() { + }; + } + var source = source_; + var options = o; + var callback = oc; + if (typeof options === "function") { + callback = options; + options = {}; + } + if (!this.rules || Object.keys(this.rules).length === 0) { + if (callback) { + callback(null, source); + } + return Promise.resolve(source); + } + function complete(results) { + var errors = []; + var fields = {}; + function add(e) { + if (Array.isArray(e)) { + var _errors; + errors = (_errors = errors).concat.apply(_errors, e); + } else { + errors.push(e); + } + } + for (var i = 0; i < results.length; i++) { + add(results[i]); + } + if (!errors.length) { + callback(null, source); + } else { + fields = convertFieldsError(errors); + callback(errors, fields); + } + } + if (options.messages) { + var messages$1 = this.messages(); + if (messages$1 === messages) { + messages$1 = newMessages(); + } + deepMerge(messages$1, options.messages); + options.messages = messages$1; + } else { + options.messages = this.messages(); + } + var series = {}; + var keys = options.keys || Object.keys(this.rules); + keys.forEach(function(z) { + var arr = _this2.rules[z]; + var value = source[z]; + arr.forEach(function(r) { + var rule = r; + if (typeof rule.transform === "function") { + if (source === source_) { + source = _extends({}, source); + } + value = source[z] = rule.transform(value); + } + if (typeof rule === "function") { + rule = { + validator: rule + }; + } else { + rule = _extends({}, rule); + } + rule.validator = _this2.getValidationMethod(rule); + if (!rule.validator) { + return; + } + rule.field = z; + rule.fullField = rule.fullField || z; + rule.type = _this2.getType(rule); + series[z] = series[z] || []; + series[z].push({ + rule, + value, + source, + field: z + }); + }); + }); + var errorFields = {}; + return asyncMap(series, options, function(data, doIt) { + var rule = data.rule; + var deep = (rule.type === "object" || rule.type === "array") && (typeof rule.fields === "object" || typeof rule.defaultField === "object"); + deep = deep && (rule.required || !rule.required && data.value); + rule.field = data.field; + function addFullField(key, schema) { + return _extends({}, schema, { + fullField: rule.fullField + "." + key, + fullFields: rule.fullFields ? [].concat(rule.fullFields, [key]) : [key] + }); + } + function cb(e) { + if (e === void 0) { + e = []; + } + var errorList = Array.isArray(e) ? e : [e]; + if (!options.suppressWarning && errorList.length) { + Schema2.warning("async-validator:", errorList); + } + if (errorList.length && rule.message !== void 0) { + errorList = [].concat(rule.message); + } + var filledErrors = errorList.map(complementError(rule, source)); + if (options.first && filledErrors.length) { + errorFields[rule.field] = 1; + return doIt(filledErrors); + } + if (!deep) { + doIt(filledErrors); + } else { + if (rule.required && !data.value) { + if (rule.message !== void 0) { + filledErrors = [].concat(rule.message).map(complementError(rule, source)); + } else if (options.error) { + filledErrors = [options.error(rule, format(options.messages.required, rule.field))]; + } + return doIt(filledErrors); + } + var fieldsSchema = {}; + if (rule.defaultField) { + Object.keys(data.value).map(function(key) { + fieldsSchema[key] = rule.defaultField; + }); + } + fieldsSchema = _extends({}, fieldsSchema, data.rule.fields); + var paredFieldsSchema = {}; + Object.keys(fieldsSchema).forEach(function(field) { + var fieldSchema = fieldsSchema[field]; + var fieldSchemaList = Array.isArray(fieldSchema) ? fieldSchema : [fieldSchema]; + paredFieldsSchema[field] = fieldSchemaList.map(addFullField.bind(null, field)); + }); + var schema = new Schema2(paredFieldsSchema); + schema.messages(options.messages); + if (data.rule.options) { + data.rule.options.messages = options.messages; + data.rule.options.error = options.error; + } + schema.validate(data.value, data.rule.options || options, function(errs) { + var finalErrors = []; + if (filledErrors && filledErrors.length) { + finalErrors.push.apply(finalErrors, filledErrors); + } + if (errs && errs.length) { + finalErrors.push.apply(finalErrors, errs); + } + doIt(finalErrors.length ? finalErrors : null); + }); + } + } + var res; + if (rule.asyncValidator) { + res = rule.asyncValidator(rule, data.value, cb, data.source, options); + } else if (rule.validator) { + try { + res = rule.validator(rule, data.value, cb, data.source, options); + } catch (error) { + console.error == null ? void 0 : console.error(error); + if (!options.suppressValidatorError) { + setTimeout(function() { + throw error; + }, 0); + } + cb(error.message); + } + if (res === true) { + cb(); + } else if (res === false) { + cb(typeof rule.message === "function" ? rule.message(rule.fullField || rule.field) : rule.message || (rule.fullField || rule.field) + " fails"); + } else if (res instanceof Array) { + cb(res); + } else if (res instanceof Error) { + cb(res.message); + } + } + if (res && res.then) { + res.then(function() { + return cb(); + }, function(e) { + return cb(e); + }); + } + }, function(results) { + complete(results); + }, source); + }; + _proto.getType = function getType(rule) { + if (rule.type === void 0 && rule.pattern instanceof RegExp) { + rule.type = "pattern"; + } + if (typeof rule.validator !== "function" && rule.type && !validators.hasOwnProperty(rule.type)) { + throw new Error(format("Unknown rule type %s", rule.type)); + } + return rule.type || "string"; + }; + _proto.getValidationMethod = function getValidationMethod(rule) { + if (typeof rule.validator === "function") { + return rule.validator; + } + var keys = Object.keys(rule); + var messageIndex = keys.indexOf("message"); + if (messageIndex !== -1) { + keys.splice(messageIndex, 1); + } + if (keys.length === 1 && keys[0] === "required") { + return validators.required; + } + return validators[this.getType(rule)] || void 0; + }; + return Schema2; + }(); + Schema.register = function register(type4, validator) { + if (typeof validator !== "function") { + throw new Error("Cannot register a validator by type, validator is not a function"); + } + validators[type4] = validator; + }; + Schema.warning = warning; + Schema.messages = messages; + Schema.validators = validators; + + const formItemValidateStates = [ + "", + "error", + "validating", + "success" + ]; + const formItemProps = buildProps({ + label: String, + labelWidth: { + type: [String, Number], + default: "" + }, + prop: { + type: definePropType([String, Array]) + }, + required: { + type: Boolean, + default: void 0 + }, + rules: { + type: definePropType([Object, Array]) + }, + error: String, + validateStatus: { + type: String, + values: formItemValidateStates + }, + for: String, + inlineMessage: { + type: [String, Boolean], + default: "" + }, + showMessage: { + type: Boolean, + default: true + }, + size: { + type: String, + values: componentSizes + } + }); + + const COMPONENT_NAME$l = "ElLabelWrap"; + var FormLabelWrap = vue.defineComponent({ + name: COMPONENT_NAME$l, + props: { + isAutoWidth: Boolean, + updateAll: Boolean + }, + setup(props, { + slots + }) { + const formContext = vue.inject(formContextKey, void 0); + const formItemContext = vue.inject(formItemContextKey); + if (!formItemContext) + throwError(COMPONENT_NAME$l, "usage: <el-form-item><label-wrap /></el-form-item>"); + const ns = useNamespace("form"); + const el = vue.ref(); + const computedWidth = vue.ref(0); + const getLabelWidth = () => { + var _a; + if ((_a = el.value) == null ? void 0 : _a.firstElementChild) { + const width = window.getComputedStyle(el.value.firstElementChild).width; + return Math.ceil(Number.parseFloat(width)); + } else { + return 0; + } + }; + const updateLabelWidth = (action = "update") => { + vue.nextTick(() => { + if (slots.default && props.isAutoWidth) { + if (action === "update") { + computedWidth.value = getLabelWidth(); + } else if (action === "remove") { + formContext == null ? void 0 : formContext.deregisterLabelWidth(computedWidth.value); + } + } + }); + }; + const updateLabelWidthFn = () => updateLabelWidth("update"); + vue.onMounted(() => { + updateLabelWidthFn(); + }); + vue.onBeforeUnmount(() => { + updateLabelWidth("remove"); + }); + vue.onUpdated(() => updateLabelWidthFn()); + vue.watch(computedWidth, (val, oldVal) => { + if (props.updateAll) { + formContext == null ? void 0 : formContext.registerLabelWidth(val, oldVal); + } + }); + useResizeObserver(vue.computed(() => { + var _a, _b; + return (_b = (_a = el.value) == null ? void 0 : _a.firstElementChild) != null ? _b : null; + }), updateLabelWidthFn); + return () => { + var _a, _b; + if (!slots) + return null; + const { + isAutoWidth + } = props; + if (isAutoWidth) { + const autoLabelWidth = formContext == null ? void 0 : formContext.autoLabelWidth; + const hasLabel = formItemContext == null ? void 0 : formItemContext.hasLabel; + const style = {}; + if (hasLabel && autoLabelWidth && autoLabelWidth !== "auto") { + const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth.value); + const marginPosition = formContext.labelPosition === "left" ? "marginRight" : "marginLeft"; + if (marginWidth) { + style[marginPosition] = `${marginWidth}px`; + } + } + return vue.createVNode("div", { + "ref": el, + "class": [ns.be("item", "label-wrap")], + "style": style + }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]); + } else { + return vue.createVNode(vue.Fragment, { + "ref": el + }, [(_b = slots.default) == null ? void 0 : _b.call(slots)]); + } + }; + } + }); + + const _hoisted_1$13 = ["role", "aria-labelledby"]; + const __default__$1y = vue.defineComponent({ + name: "ElFormItem" + }); + const _sfc_main$2e = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1y, + props: formItemProps, + setup(__props, { expose }) { + const props = __props; + const slots = vue.useSlots(); + const formContext = vue.inject(formContextKey, void 0); + const parentFormItemContext = vue.inject(formItemContextKey, void 0); + const _size = useFormSize(void 0, { formItem: false }); + const ns = useNamespace("form-item"); + const labelId = useId().value; + const inputIds = vue.ref([]); + const validateState = vue.ref(""); + const validateStateDebounced = refDebounced(validateState, 100); + const validateMessage = vue.ref(""); + const formItemRef = vue.ref(); + let initialValue = void 0; + let isResettingField = false; + const labelStyle = vue.computed(() => { + if ((formContext == null ? void 0 : formContext.labelPosition) === "top") { + return {}; + } + const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || ""); + if (labelWidth) + return { width: labelWidth }; + return {}; + }); + const contentStyle = vue.computed(() => { + if ((formContext == null ? void 0 : formContext.labelPosition) === "top" || (formContext == null ? void 0 : formContext.inline)) { + return {}; + } + if (!props.label && !props.labelWidth && isNested) { + return {}; + } + const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || ""); + if (!props.label && !slots.label) { + return { marginLeft: labelWidth }; + } + return {}; + }); + const formItemClasses = vue.computed(() => [ + ns.b(), + ns.m(_size.value), + ns.is("error", validateState.value === "error"), + ns.is("validating", validateState.value === "validating"), + ns.is("success", validateState.value === "success"), + ns.is("required", isRequired.value || props.required), + ns.is("no-asterisk", formContext == null ? void 0 : formContext.hideRequiredAsterisk), + (formContext == null ? void 0 : formContext.requireAsteriskPosition) === "right" ? "asterisk-right" : "asterisk-left", + { [ns.m("feedback")]: formContext == null ? void 0 : formContext.statusIcon } + ]); + const _inlineMessage = vue.computed(() => isBoolean$1(props.inlineMessage) ? props.inlineMessage : (formContext == null ? void 0 : formContext.inlineMessage) || false); + const validateClasses = vue.computed(() => [ + ns.e("error"), + { [ns.em("error", "inline")]: _inlineMessage.value } + ]); + const propString = vue.computed(() => { + if (!props.prop) + return ""; + return isString$1(props.prop) ? props.prop : props.prop.join("."); + }); + const hasLabel = vue.computed(() => { + return !!(props.label || slots.label); + }); + const labelFor = vue.computed(() => { + return props.for || inputIds.value.length === 1 ? inputIds.value[0] : void 0; + }); + const isGroup = vue.computed(() => { + return !labelFor.value && hasLabel.value; + }); + const isNested = !!parentFormItemContext; + const fieldValue = vue.computed(() => { + const model = formContext == null ? void 0 : formContext.model; + if (!model || !props.prop) { + return; + } + return getProp(model, props.prop).value; + }); + const normalizedRules = vue.computed(() => { + const { required } = props; + const rules = []; + if (props.rules) { + rules.push(...castArray$1(props.rules)); + } + const formRules = formContext == null ? void 0 : formContext.rules; + if (formRules && props.prop) { + const _rules = getProp(formRules, props.prop).value; + if (_rules) { + rules.push(...castArray$1(_rules)); + } + } + if (required !== void 0) { + const requiredRules = rules.map((rule, i) => [rule, i]).filter(([rule]) => Object.keys(rule).includes("required")); + if (requiredRules.length > 0) { + for (const [rule, i] of requiredRules) { + if (rule.required === required) + continue; + rules[i] = { ...rule, required }; + } + } else { + rules.push({ required }); + } + } + return rules; + }); + const validateEnabled = vue.computed(() => normalizedRules.value.length > 0); + const getFilteredRule = (trigger) => { + const rules = normalizedRules.value; + return rules.filter((rule) => { + if (!rule.trigger || !trigger) + return true; + if (Array.isArray(rule.trigger)) { + return rule.trigger.includes(trigger); + } else { + return rule.trigger === trigger; + } + }).map(({ trigger: trigger2, ...rule }) => rule); + }; + const isRequired = vue.computed(() => normalizedRules.value.some((rule) => rule.required)); + const shouldShowError = vue.computed(() => { + var _a; + return validateStateDebounced.value === "error" && props.showMessage && ((_a = formContext == null ? void 0 : formContext.showMessage) != null ? _a : true); + }); + const currentLabel = vue.computed(() => `${props.label || ""}${(formContext == null ? void 0 : formContext.labelSuffix) || ""}`); + const setValidationState = (state) => { + validateState.value = state; + }; + const onValidationFailed = (error) => { + var _a, _b; + const { errors, fields } = error; + if (!errors || !fields) { + console.error(error); + } + setValidationState("error"); + validateMessage.value = errors ? (_b = (_a = errors == null ? void 0 : errors[0]) == null ? void 0 : _a.message) != null ? _b : `${props.prop} is required` : ""; + formContext == null ? void 0 : formContext.emit("validate", props.prop, false, validateMessage.value); + }; + const onValidationSucceeded = () => { + setValidationState("success"); + formContext == null ? void 0 : formContext.emit("validate", props.prop, true, ""); + }; + const doValidate = async (rules) => { + const modelName = propString.value; + const validator = new Schema({ + [modelName]: rules + }); + return validator.validate({ [modelName]: fieldValue.value }, { firstFields: true }).then(() => { + onValidationSucceeded(); + return true; + }).catch((err) => { + onValidationFailed(err); + return Promise.reject(err); + }); + }; + const validate = async (trigger, callback) => { + if (isResettingField || !props.prop) { + return false; + } + const hasCallback = isFunction$1(callback); + if (!validateEnabled.value) { + callback == null ? void 0 : callback(false); + return false; + } + const rules = getFilteredRule(trigger); + if (rules.length === 0) { + callback == null ? void 0 : callback(true); + return true; + } + setValidationState("validating"); + return doValidate(rules).then(() => { + callback == null ? void 0 : callback(true); + return true; + }).catch((err) => { + const { fields } = err; + callback == null ? void 0 : callback(false, fields); + return hasCallback ? false : Promise.reject(fields); + }); + }; + const clearValidate = () => { + setValidationState(""); + validateMessage.value = ""; + isResettingField = false; + }; + const resetField = async () => { + const model = formContext == null ? void 0 : formContext.model; + if (!model || !props.prop) + return; + const computedValue = getProp(model, props.prop); + isResettingField = true; + computedValue.value = clone(initialValue); + await vue.nextTick(); + clearValidate(); + isResettingField = false; + }; + const addInputId = (id) => { + if (!inputIds.value.includes(id)) { + inputIds.value.push(id); + } + }; + const removeInputId = (id) => { + inputIds.value = inputIds.value.filter((listId) => listId !== id); + }; + vue.watch(() => props.error, (val) => { + validateMessage.value = val || ""; + setValidationState(val ? "error" : ""); + }, { immediate: true }); + vue.watch(() => props.validateStatus, (val) => setValidationState(val || "")); + const context = vue.reactive({ + ...vue.toRefs(props), + $el: formItemRef, + size: _size, + validateState, + labelId, + inputIds, + isGroup, + hasLabel, + addInputId, + removeInputId, + resetField, + clearValidate, + validate + }); + vue.provide(formItemContextKey, context); + vue.onMounted(() => { + if (props.prop) { + formContext == null ? void 0 : formContext.addField(context); + initialValue = clone(fieldValue.value); + } + }); + vue.onBeforeUnmount(() => { + formContext == null ? void 0 : formContext.removeField(context); + }); + expose({ + size: _size, + validateMessage, + validateState, + validate, + clearValidate, + resetField + }); + return (_ctx, _cache) => { + var _a; + return vue.openBlock(), vue.createElementBlock("div", { + ref_key: "formItemRef", + ref: formItemRef, + class: vue.normalizeClass(vue.unref(formItemClasses)), + role: vue.unref(isGroup) ? "group" : void 0, + "aria-labelledby": vue.unref(isGroup) ? vue.unref(labelId) : void 0 + }, [ + vue.createVNode(vue.unref(FormLabelWrap), { + "is-auto-width": vue.unref(labelStyle).width === "auto", + "update-all": ((_a = vue.unref(formContext)) == null ? void 0 : _a.labelWidth) === "auto" + }, { + default: vue.withCtx(() => [ + vue.unref(hasLabel) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(labelFor) ? "label" : "div"), { + key: 0, + id: vue.unref(labelId), + for: vue.unref(labelFor), + class: vue.normalizeClass(vue.unref(ns).e("label")), + style: vue.normalizeStyle(vue.unref(labelStyle)) + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "label", { label: vue.unref(currentLabel) }, () => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(currentLabel)), 1) + ]) + ]), + _: 3 + }, 8, ["id", "for", "class", "style"])) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["is-auto-width", "update-all"]), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("content")), + style: vue.normalizeStyle(vue.unref(contentStyle)) + }, [ + vue.renderSlot(_ctx.$slots, "default"), + vue.createVNode(vue.TransitionGroup, { + name: `${vue.unref(ns).namespace.value}-zoom-in-top` + }, { + default: vue.withCtx(() => [ + vue.unref(shouldShowError) ? vue.renderSlot(_ctx.$slots, "error", { + key: 0, + error: validateMessage.value + }, () => [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(validateClasses)) + }, vue.toDisplayString(validateMessage.value), 3) + ]) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["name"]) + ], 6) + ], 10, _hoisted_1$13); + }; + } + }); + var FormItem = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["__file", "form-item.vue"]]); + + const ElForm = withInstall(Form, { + FormItem + }); + const ElFormItem = withNoopInstall(FormItem); + + let hiddenTextarea = void 0; + const HIDDEN_STYLE = ` + height:0 !important; + visibility:hidden !important; + ${isFirefox() ? "" : "overflow:hidden !important;"} + position:absolute !important; + z-index:-1000 !important; + top:0 !important; + right:0 !important; + `; + const CONTEXT_STYLE = [ + "letter-spacing", + "line-height", + "padding-top", + "padding-bottom", + "font-family", + "font-weight", + "font-size", + "text-rendering", + "text-transform", + "width", + "text-indent", + "padding-left", + "padding-right", + "border-width", + "box-sizing" + ]; + function calculateNodeStyling(targetElement) { + const style = window.getComputedStyle(targetElement); + const boxSizing = style.getPropertyValue("box-sizing"); + const paddingSize = Number.parseFloat(style.getPropertyValue("padding-bottom")) + Number.parseFloat(style.getPropertyValue("padding-top")); + const borderSize = Number.parseFloat(style.getPropertyValue("border-bottom-width")) + Number.parseFloat(style.getPropertyValue("border-top-width")); + const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";"); + return { contextStyle, paddingSize, borderSize, boxSizing }; + } + function calcTextareaHeight(targetElement, minRows = 1, maxRows) { + var _a; + if (!hiddenTextarea) { + hiddenTextarea = document.createElement("textarea"); + document.body.appendChild(hiddenTextarea); + } + const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement); + hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`); + hiddenTextarea.value = targetElement.value || targetElement.placeholder || ""; + let height = hiddenTextarea.scrollHeight; + const result = {}; + if (boxSizing === "border-box") { + height = height + borderSize; + } else if (boxSizing === "content-box") { + height = height - paddingSize; + } + hiddenTextarea.value = ""; + const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize; + if (isNumber$1(minRows)) { + let minHeight = singleRowHeight * minRows; + if (boxSizing === "border-box") { + minHeight = minHeight + paddingSize + borderSize; + } + height = Math.max(minHeight, height); + result.minHeight = `${minHeight}px`; + } + if (isNumber$1(maxRows)) { + let maxHeight = singleRowHeight * maxRows; + if (boxSizing === "border-box") { + maxHeight = maxHeight + paddingSize + borderSize; + } + height = Math.min(maxHeight, height); + } + result.height = `${height}px`; + (_a = hiddenTextarea.parentNode) == null ? void 0 : _a.removeChild(hiddenTextarea); + hiddenTextarea = void 0; + return result; + } + + const inputProps = buildProps({ + id: { + type: String, + default: void 0 + }, + size: useSizeProp, + disabled: Boolean, + modelValue: { + type: definePropType([ + String, + Number, + Object + ]), + default: "" + }, + type: { + type: String, + default: "text" + }, + resize: { + type: String, + values: ["none", "both", "horizontal", "vertical"] + }, + autosize: { + type: definePropType([Boolean, Object]), + default: false + }, + autocomplete: { + type: String, + default: "off" + }, + formatter: { + type: Function + }, + parser: { + type: Function + }, + placeholder: { + type: String + }, + form: { + type: String + }, + readonly: { + type: Boolean, + default: false + }, + clearable: { + type: Boolean, + default: false + }, + showPassword: { + type: Boolean, + default: false + }, + showWordLimit: { + type: Boolean, + default: false + }, + suffixIcon: { + type: iconPropType + }, + prefixIcon: { + type: iconPropType + }, + containerRole: { + type: String, + default: void 0 + }, + label: { + type: String, + default: void 0 + }, + tabindex: { + type: [String, Number], + default: 0 + }, + validateEvent: { + type: Boolean, + default: true + }, + inputStyle: { + type: definePropType([Object, Array, String]), + default: () => mutable({}) + } + }); + const inputEmits = { + [UPDATE_MODEL_EVENT]: (value) => isString$1(value), + input: (value) => isString$1(value), + change: (value) => isString$1(value), + focus: (evt) => evt instanceof FocusEvent, + blur: (evt) => evt instanceof FocusEvent, + clear: () => true, + mouseleave: (evt) => evt instanceof MouseEvent, + mouseenter: (evt) => evt instanceof MouseEvent, + keydown: (evt) => evt instanceof Event, + compositionstart: (evt) => evt instanceof CompositionEvent, + compositionupdate: (evt) => evt instanceof CompositionEvent, + compositionend: (evt) => evt instanceof CompositionEvent + }; + + const _hoisted_1$12 = ["role"]; + const _hoisted_2$G = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form"]; + const _hoisted_3$l = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"]; + const __default__$1x = vue.defineComponent({ + name: "ElInput", + inheritAttrs: false + }); + const _sfc_main$2d = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1x, + props: inputProps, + emits: inputEmits, + setup(__props, { expose, emit }) { + const props = __props; + const rawAttrs = vue.useAttrs(); + const slots = vue.useSlots(); + const containerAttrs = vue.computed(() => { + const comboBoxAttrs = {}; + if (props.containerRole === "combobox") { + comboBoxAttrs["aria-haspopup"] = rawAttrs["aria-haspopup"]; + comboBoxAttrs["aria-owns"] = rawAttrs["aria-owns"]; + comboBoxAttrs["aria-expanded"] = rawAttrs["aria-expanded"]; + } + return comboBoxAttrs; + }); + const containerKls = vue.computed(() => [ + props.type === "textarea" ? nsTextarea.b() : nsInput.b(), + nsInput.m(inputSize.value), + nsInput.is("disabled", inputDisabled.value), + nsInput.is("exceed", inputExceed.value), + { + [nsInput.b("group")]: slots.prepend || slots.append, + [nsInput.bm("group", "append")]: slots.append, + [nsInput.bm("group", "prepend")]: slots.prepend, + [nsInput.m("prefix")]: slots.prefix || props.prefixIcon, + [nsInput.m("suffix")]: slots.suffix || props.suffixIcon || props.clearable || props.showPassword, + [nsInput.bm("suffix", "password-clear")]: showClear.value && showPwdVisible.value + }, + rawAttrs.class + ]); + const wrapperKls = vue.computed(() => [ + nsInput.e("wrapper"), + nsInput.is("focus", focused.value) + ]); + const attrs = useAttrs({ + excludeKeys: vue.computed(() => { + return Object.keys(containerAttrs.value); + }) + }); + const { form, formItem } = useFormItem(); + const { inputId } = useFormItemInputId(props, { + formItemContext: formItem + }); + const inputSize = useFormSize(); + const inputDisabled = useFormDisabled(); + const nsInput = useNamespace("input"); + const nsTextarea = useNamespace("textarea"); + const input = vue.shallowRef(); + const textarea = vue.shallowRef(); + const focused = vue.ref(false); + const hovering = vue.ref(false); + const isComposing = vue.ref(false); + const passwordVisible = vue.ref(false); + const countStyle = vue.ref(); + const textareaCalcStyle = vue.shallowRef(props.inputStyle); + const _ref = vue.computed(() => input.value || textarea.value); + const needStatusIcon = vue.computed(() => { + var _a; + return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false; + }); + const validateState = vue.computed(() => (formItem == null ? void 0 : formItem.validateState) || ""); + const validateIcon = vue.computed(() => validateState.value && ValidateComponentsMap[validateState.value]); + const passwordIcon = vue.computed(() => passwordVisible.value ? view_default : hide_default); + const containerStyle = vue.computed(() => [ + rawAttrs.style, + props.inputStyle + ]); + const textareaStyle = vue.computed(() => [ + props.inputStyle, + textareaCalcStyle.value, + { resize: props.resize } + ]); + const nativeInputValue = vue.computed(() => isNil(props.modelValue) ? "" : String(props.modelValue)); + const showClear = vue.computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (focused.value || hovering.value)); + const showPwdVisible = vue.computed(() => props.showPassword && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (!!nativeInputValue.value || focused.value)); + const isWordLimitVisible = vue.computed(() => props.showWordLimit && !!attrs.value.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword); + const textLength = vue.computed(() => nativeInputValue.value.length); + const inputExceed = vue.computed(() => !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength)); + const suffixVisible = vue.computed(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value); + const [recordCursor, setCursor] = useCursor(input); + useResizeObserver(textarea, (entries) => { + if (!isWordLimitVisible.value || props.resize !== "both") + return; + const entry = entries[0]; + const { width } = entry.contentRect; + countStyle.value = { + right: `calc(100% - ${width + 15 + 6}px)` + }; + }); + const resizeTextarea = () => { + const { type, autosize } = props; + if (!isClient || type !== "textarea" || !textarea.value) + return; + if (autosize) { + const minRows = isObject$1(autosize) ? autosize.minRows : void 0; + const maxRows = isObject$1(autosize) ? autosize.maxRows : void 0; + textareaCalcStyle.value = { + ...calcTextareaHeight(textarea.value, minRows, maxRows) + }; + } else { + textareaCalcStyle.value = { + minHeight: calcTextareaHeight(textarea.value).minHeight + }; + } + }; + const setNativeInputValue = () => { + const input2 = _ref.value; + if (!input2 || input2.value === nativeInputValue.value) + return; + input2.value = nativeInputValue.value; + }; + const handleInput = async (event) => { + recordCursor(); + let { value } = event.target; + if (props.formatter) { + value = props.parser ? props.parser(value) : value; + value = props.formatter(value); + } + if (isComposing.value) + return; + if (value === nativeInputValue.value) { + setNativeInputValue(); + return; + } + emit(UPDATE_MODEL_EVENT, value); + emit("input", value); + await vue.nextTick(); + setNativeInputValue(); + setCursor(); + }; + const handleChange = (event) => { + emit("change", event.target.value); + }; + const handleCompositionStart = (event) => { + emit("compositionstart", event); + isComposing.value = true; + }; + const handleCompositionUpdate = (event) => { + var _a; + emit("compositionupdate", event); + const text = (_a = event.target) == null ? void 0 : _a.value; + const lastCharacter = text[text.length - 1] || ""; + isComposing.value = !isKorean(lastCharacter); + }; + const handleCompositionEnd = (event) => { + emit("compositionend", event); + if (isComposing.value) { + isComposing.value = false; + handleInput(event); + } + }; + const handlePasswordVisible = () => { + passwordVisible.value = !passwordVisible.value; + focus(); + }; + const focus = async () => { + var _a; + await vue.nextTick(); + (_a = _ref.value) == null ? void 0 : _a.focus(); + }; + const blur = () => { + var _a; + return (_a = _ref.value) == null ? void 0 : _a.blur(); + }; + const handleFocus = (event) => { + focused.value = true; + emit("focus", event); + }; + const handleBlur = (event) => { + var _a; + focused.value = false; + emit("blur", event); + if (props.validateEvent) { + (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn()); + } + }; + const handleMouseLeave = (evt) => { + hovering.value = false; + emit("mouseleave", evt); + }; + const handleMouseEnter = (evt) => { + hovering.value = true; + emit("mouseenter", evt); + }; + const handleKeydown = (evt) => { + emit("keydown", evt); + }; + const select = () => { + var _a; + (_a = _ref.value) == null ? void 0 : _a.select(); + }; + const clear = () => { + emit(UPDATE_MODEL_EVENT, ""); + emit("change", ""); + emit("clear"); + emit("input", ""); + }; + vue.watch(() => props.modelValue, () => { + var _a; + vue.nextTick(() => resizeTextarea()); + if (props.validateEvent) { + (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn()); + } + }); + vue.watch(nativeInputValue, () => setNativeInputValue()); + vue.watch(() => props.type, async () => { + await vue.nextTick(); + setNativeInputValue(); + resizeTextarea(); + }); + vue.onMounted(() => { + if (!props.formatter && props.parser) ; + setNativeInputValue(); + vue.nextTick(resizeTextarea); + }); + expose({ + input, + textarea, + ref: _ref, + textareaStyle, + autosize: vue.toRef(props, "autosize"), + focus, + blur, + select, + clear, + resizeTextarea + }); + return (_ctx, _cache) => { + return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps(vue.unref(containerAttrs), { + class: vue.unref(containerKls), + style: vue.unref(containerStyle), + role: _ctx.containerRole, + onMouseenter: handleMouseEnter, + onMouseleave: handleMouseLeave + }), [ + vue.createCommentVNode(" input "), + _ctx.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.createCommentVNode(" prepend slot "), + _ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(nsInput).be("group", "prepend")) + }, [ + vue.renderSlot(_ctx.$slots, "prepend") + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(wrapperKls)) + }, [ + vue.createCommentVNode(" prefix slot "), + _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + class: vue.normalizeClass(vue.unref(nsInput).e("prefix")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(nsInput).e("prefix-inner")), + onClick: focus + }, [ + vue.renderSlot(_ctx.$slots, "prefix"), + _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(nsInput).e("icon")) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.prefixIcon))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ], 2) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("input", vue.mergeProps({ + id: vue.unref(inputId), + ref_key: "input", + ref: input, + class: vue.unref(nsInput).e("inner") + }, vue.unref(attrs), { + type: _ctx.showPassword ? passwordVisible.value ? "text" : "password" : _ctx.type, + disabled: vue.unref(inputDisabled), + formatter: _ctx.formatter, + parser: _ctx.parser, + readonly: _ctx.readonly, + autocomplete: _ctx.autocomplete, + tabindex: _ctx.tabindex, + "aria-label": _ctx.label, + placeholder: _ctx.placeholder, + style: _ctx.inputStyle, + form: props.form, + onCompositionstart: handleCompositionStart, + onCompositionupdate: handleCompositionUpdate, + onCompositionend: handleCompositionEnd, + onInput: handleInput, + onFocus: handleFocus, + onBlur: handleBlur, + onChange: handleChange, + onKeydown: handleKeydown + }), null, 16, _hoisted_2$G), + vue.createCommentVNode(" suffix slot "), + vue.unref(suffixVisible) ? (vue.openBlock(), vue.createElementBlock("span", { + key: 1, + class: vue.normalizeClass(vue.unref(nsInput).e("suffix")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(nsInput).e("suffix-inner")), + onClick: focus + }, [ + !vue.unref(showClear) || !vue.unref(showPwdVisible) || !vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.renderSlot(_ctx.$slots, "suffix"), + _ctx.suffixIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(nsInput).e("icon")) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.suffixIcon))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ], 64)) : vue.createCommentVNode("v-if", true), + vue.unref(showClear) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 1, + class: vue.normalizeClass([vue.unref(nsInput).e("icon"), vue.unref(nsInput).e("clear")]), + onMousedown: vue.withModifiers(vue.unref(NOOP), ["prevent"]), + onClick: clear + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(circle_close_default)) + ]), + _: 1 + }, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true), + vue.unref(showPwdVisible) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 2, + class: vue.normalizeClass([vue.unref(nsInput).e("icon"), vue.unref(nsInput).e("password")]), + onClick: handlePasswordVisible + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(passwordIcon)))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true), + vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock("span", { + key: 3, + class: vue.normalizeClass(vue.unref(nsInput).e("count")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(nsInput).e("count-inner")) + }, vue.toDisplayString(vue.unref(textLength)) + " / " + vue.toDisplayString(vue.unref(attrs).maxlength), 3) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.unref(validateState) && vue.unref(validateIcon) && vue.unref(needStatusIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 4, + class: vue.normalizeClass([ + vue.unref(nsInput).e("icon"), + vue.unref(nsInput).e("validateIcon"), + vue.unref(nsInput).is("loading", vue.unref(validateState) === "validating") + ]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(validateIcon)))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ], 2) + ], 2)) : vue.createCommentVNode("v-if", true) + ], 2), + vue.createCommentVNode(" append slot "), + _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(vue.unref(nsInput).be("group", "append")) + }, [ + vue.renderSlot(_ctx.$slots, "append") + ], 2)) : vue.createCommentVNode("v-if", true) + ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [ + vue.createCommentVNode(" textarea "), + vue.createElementVNode("textarea", vue.mergeProps({ + id: vue.unref(inputId), + ref_key: "textarea", + ref: textarea, + class: vue.unref(nsTextarea).e("inner") + }, vue.unref(attrs), { + tabindex: _ctx.tabindex, + disabled: vue.unref(inputDisabled), + readonly: _ctx.readonly, + autocomplete: _ctx.autocomplete, + style: vue.unref(textareaStyle), + "aria-label": _ctx.label, + placeholder: _ctx.placeholder, + form: props.form, + onCompositionstart: handleCompositionStart, + onCompositionupdate: handleCompositionUpdate, + onCompositionend: handleCompositionEnd, + onInput: handleInput, + onFocus: handleFocus, + onBlur: handleBlur, + onChange: handleChange, + onKeydown: handleKeydown + }), null, 16, _hoisted_3$l), + vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + style: vue.normalizeStyle(countStyle.value), + class: vue.normalizeClass(vue.unref(nsInput).e("count")) + }, vue.toDisplayString(vue.unref(textLength)) + " / " + vue.toDisplayString(vue.unref(attrs).maxlength), 7)) : vue.createCommentVNode("v-if", true) + ], 64)) + ], 16, _hoisted_1$12)), [ + [vue.vShow, _ctx.type !== "hidden"] + ]); + }; + } + }); + var Input = /* @__PURE__ */ _export_sfc(_sfc_main$2d, [["__file", "input.vue"]]); + + const ElInput = withInstall(Input); + + const GAP = 4; + const BAR_MAP = { + vertical: { + offset: "offsetHeight", + scroll: "scrollTop", + scrollSize: "scrollHeight", + size: "height", + key: "vertical", + axis: "Y", + client: "clientY", + direction: "top" + }, + horizontal: { + offset: "offsetWidth", + scroll: "scrollLeft", + scrollSize: "scrollWidth", + size: "width", + key: "horizontal", + axis: "X", + client: "clientX", + direction: "left" + } + }; + const renderThumbStyle$1 = ({ + move, + size, + bar + }) => ({ + [bar.size]: size, + transform: `translate${bar.axis}(${move}%)` + }); + + const scrollbarContextKey = Symbol("scrollbarContextKey"); + + const thumbProps = buildProps({ + vertical: Boolean, + size: String, + move: Number, + ratio: { + type: Number, + required: true + }, + always: Boolean + }); + + const COMPONENT_NAME$k = "Thumb"; + const _sfc_main$2c = /* @__PURE__ */ vue.defineComponent({ + __name: "thumb", + props: thumbProps, + setup(__props) { + const props = __props; + const scrollbar = vue.inject(scrollbarContextKey); + const ns = useNamespace("scrollbar"); + if (!scrollbar) + throwError(COMPONENT_NAME$k, "can not inject scrollbar context"); + const instance = vue.ref(); + const thumb = vue.ref(); + const thumbState = vue.ref({}); + const visible = vue.ref(false); + let cursorDown = false; + let cursorLeave = false; + let originalOnSelectStart = isClient ? document.onselectstart : null; + const bar = vue.computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]); + const thumbStyle = vue.computed(() => renderThumbStyle$1({ + size: props.size, + move: props.move, + bar: bar.value + })); + const offsetRatio = vue.computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]); + const clickThumbHandler = (e) => { + var _a; + e.stopPropagation(); + if (e.ctrlKey || [1, 2].includes(e.button)) + return; + (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges(); + startDrag(e); + const el = e.currentTarget; + if (!el) + return; + thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]); + }; + const clickTrackHandler = (e) => { + if (!thumb.value || !instance.value || !scrollbar.wrapElement) + return; + const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]); + const thumbHalf = thumb.value[bar.value.offset] / 2; + const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset]; + scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100; + }; + const startDrag = (e) => { + e.stopImmediatePropagation(); + cursorDown = true; + document.addEventListener("mousemove", mouseMoveDocumentHandler); + document.addEventListener("mouseup", mouseUpDocumentHandler); + originalOnSelectStart = document.onselectstart; + document.onselectstart = () => false; + }; + const mouseMoveDocumentHandler = (e) => { + if (!instance.value || !thumb.value) + return; + if (cursorDown === false) + return; + const prevPage = thumbState.value[bar.value.axis]; + if (!prevPage) + return; + const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1; + const thumbClickPosition = thumb.value[bar.value.offset] - prevPage; + const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset]; + scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100; + }; + const mouseUpDocumentHandler = () => { + cursorDown = false; + thumbState.value[bar.value.axis] = 0; + document.removeEventListener("mousemove", mouseMoveDocumentHandler); + document.removeEventListener("mouseup", mouseUpDocumentHandler); + restoreOnselectstart(); + if (cursorLeave) + visible.value = false; + }; + const mouseMoveScrollbarHandler = () => { + cursorLeave = false; + visible.value = !!props.size; + }; + const mouseLeaveScrollbarHandler = () => { + cursorLeave = true; + visible.value = cursorDown; + }; + vue.onBeforeUnmount(() => { + restoreOnselectstart(); + document.removeEventListener("mouseup", mouseUpDocumentHandler); + }); + const restoreOnselectstart = () => { + if (document.onselectstart !== originalOnSelectStart) + document.onselectstart = originalOnSelectStart; + }; + useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler); + useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.Transition, { + name: vue.unref(ns).b("fade"), + persisted: "" + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createElementVNode("div", { + ref_key: "instance", + ref: instance, + class: vue.normalizeClass([vue.unref(ns).e("bar"), vue.unref(ns).is(vue.unref(bar).key)]), + onMousedown: clickTrackHandler + }, [ + vue.createElementVNode("div", { + ref_key: "thumb", + ref: thumb, + class: vue.normalizeClass(vue.unref(ns).e("thumb")), + style: vue.normalizeStyle(vue.unref(thumbStyle)), + onMousedown: clickThumbHandler + }, null, 38) + ], 34), [ + [vue.vShow, _ctx.always || visible.value] + ]) + ]), + _: 1 + }, 8, ["name"]); + }; + } + }); + var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["__file", "thumb.vue"]]); + + const barProps = buildProps({ + always: { + type: Boolean, + default: true + }, + width: String, + height: String, + ratioX: { + type: Number, + default: 1 + }, + ratioY: { + type: Number, + default: 1 + } + }); + + const _sfc_main$2b = /* @__PURE__ */ vue.defineComponent({ + __name: "bar", + props: barProps, + setup(__props, { expose }) { + const props = __props; + const moveX = vue.ref(0); + const moveY = vue.ref(0); + const handleScroll = (wrap) => { + if (wrap) { + const offsetHeight = wrap.offsetHeight - GAP; + const offsetWidth = wrap.offsetWidth - GAP; + moveY.value = wrap.scrollTop * 100 / offsetHeight * props.ratioY; + moveX.value = wrap.scrollLeft * 100 / offsetWidth * props.ratioX; + } + }; + expose({ + handleScroll + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [ + vue.createVNode(Thumb, { + move: moveX.value, + ratio: _ctx.ratioX, + size: _ctx.width, + always: _ctx.always + }, null, 8, ["move", "ratio", "size", "always"]), + vue.createVNode(Thumb, { + move: moveY.value, + ratio: _ctx.ratioY, + size: _ctx.height, + vertical: "", + always: _ctx.always + }, null, 8, ["move", "ratio", "size", "always"]) + ], 64); + }; + } + }); + var Bar = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["__file", "bar.vue"]]); + + const scrollbarProps = buildProps({ + height: { + type: [String, Number], + default: "" + }, + maxHeight: { + type: [String, Number], + default: "" + }, + native: { + type: Boolean, + default: false + }, + wrapStyle: { + type: definePropType([String, Object, Array]), + default: "" + }, + wrapClass: { + type: [String, Array], + default: "" + }, + viewClass: { + type: [String, Array], + default: "" + }, + viewStyle: { + type: [String, Array, Object], + default: "" + }, + noresize: Boolean, + tag: { + type: String, + default: "div" + }, + always: Boolean, + minSize: { + type: Number, + default: 20 + } + }); + const scrollbarEmits = { + scroll: ({ + scrollTop, + scrollLeft + }) => [scrollTop, scrollLeft].every(isNumber$1) + }; + + const COMPONENT_NAME$j = "ElScrollbar"; + const __default__$1w = vue.defineComponent({ + name: COMPONENT_NAME$j + }); + const _sfc_main$2a = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1w, + props: scrollbarProps, + emits: scrollbarEmits, + setup(__props, { expose, emit }) { + const props = __props; + const ns = useNamespace("scrollbar"); + let stopResizeObserver = void 0; + let stopResizeListener = void 0; + const scrollbarRef = vue.ref(); + const wrapRef = vue.ref(); + const resizeRef = vue.ref(); + const sizeWidth = vue.ref("0"); + const sizeHeight = vue.ref("0"); + const barRef = vue.ref(); + const ratioY = vue.ref(1); + const ratioX = vue.ref(1); + const style = vue.computed(() => { + const style2 = {}; + if (props.height) + style2.height = addUnit(props.height); + if (props.maxHeight) + style2.maxHeight = addUnit(props.maxHeight); + return [props.wrapStyle, style2]; + }); + const wrapKls = vue.computed(() => { + return [ + props.wrapClass, + ns.e("wrap"), + { [ns.em("wrap", "hidden-default")]: !props.native } + ]; + }); + const resizeKls = vue.computed(() => { + return [ns.e("view"), props.viewClass]; + }); + const handleScroll = () => { + var _a; + if (wrapRef.value) { + (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value); + emit("scroll", { + scrollTop: wrapRef.value.scrollTop, + scrollLeft: wrapRef.value.scrollLeft + }); + } + }; + function scrollTo(arg1, arg2) { + if (isObject$1(arg1)) { + wrapRef.value.scrollTo(arg1); + } else if (isNumber$1(arg1) && isNumber$1(arg2)) { + wrapRef.value.scrollTo(arg1, arg2); + } + } + const setScrollTop = (value) => { + if (!isNumber$1(value)) { + return; + } + wrapRef.value.scrollTop = value; + }; + const setScrollLeft = (value) => { + if (!isNumber$1(value)) { + return; + } + wrapRef.value.scrollLeft = value; + }; + const update = () => { + if (!wrapRef.value) + return; + const offsetHeight = wrapRef.value.offsetHeight - GAP; + const offsetWidth = wrapRef.value.offsetWidth - GAP; + const originalHeight = offsetHeight ** 2 / wrapRef.value.scrollHeight; + const originalWidth = offsetWidth ** 2 / wrapRef.value.scrollWidth; + const height = Math.max(originalHeight, props.minSize); + const width = Math.max(originalWidth, props.minSize); + ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height)); + ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width)); + sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ""; + sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ""; + }; + vue.watch(() => props.noresize, (noresize) => { + if (noresize) { + stopResizeObserver == null ? void 0 : stopResizeObserver(); + stopResizeListener == null ? void 0 : stopResizeListener(); + } else { + ({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update)); + stopResizeListener = useEventListener("resize", update); + } + }, { immediate: true }); + vue.watch(() => [props.maxHeight, props.height], () => { + if (!props.native) + vue.nextTick(() => { + var _a; + update(); + if (wrapRef.value) { + (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value); + } + }); + }); + vue.provide(scrollbarContextKey, vue.reactive({ + scrollbarElement: scrollbarRef, + wrapElement: wrapRef + })); + vue.onMounted(() => { + if (!props.native) + vue.nextTick(() => { + update(); + }); + }); + vue.onUpdated(() => update()); + expose({ + wrapRef, + update, + scrollTo, + setScrollTop, + setScrollLeft, + handleScroll + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + ref_key: "scrollbarRef", + ref: scrollbarRef, + class: vue.normalizeClass(vue.unref(ns).b()) + }, [ + vue.createElementVNode("div", { + ref_key: "wrapRef", + ref: wrapRef, + class: vue.normalizeClass(vue.unref(wrapKls)), + style: vue.normalizeStyle(vue.unref(style)), + onScroll: handleScroll + }, [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), { + ref_key: "resizeRef", + ref: resizeRef, + class: vue.normalizeClass(vue.unref(resizeKls)), + style: vue.normalizeStyle(_ctx.viewStyle) + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["class", "style"])) + ], 38), + !_ctx.native ? (vue.openBlock(), vue.createBlock(Bar, { + key: 0, + ref_key: "barRef", + ref: barRef, + height: sizeHeight.value, + width: sizeWidth.value, + always: _ctx.always, + "ratio-x": ratioX.value, + "ratio-y": ratioY.value + }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : vue.createCommentVNode("v-if", true) + ], 2); + }; + } + }); + var Scrollbar$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["__file", "scrollbar.vue"]]); + + const ElScrollbar = withInstall(Scrollbar$1); + + const POPPER_INJECTION_KEY = Symbol("popper"); + const POPPER_CONTENT_INJECTION_KEY = Symbol("popperContent"); + + const Effect = { + LIGHT: "light", + DARK: "dark" + }; + const roleTypes = [ + "dialog", + "grid", + "group", + "listbox", + "menu", + "navigation", + "tooltip", + "tree" + ]; + const popperProps = buildProps({ + role: { + type: String, + values: roleTypes, + default: "tooltip" + } + }); + const usePopperProps = popperProps; + + const __default__$1v = vue.defineComponent({ + name: "ElPopper", + inheritAttrs: false + }); + const _sfc_main$29 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1v, + props: popperProps, + setup(__props, { expose }) { + const props = __props; + const triggerRef = vue.ref(); + const popperInstanceRef = vue.ref(); + const contentRef = vue.ref(); + const referenceRef = vue.ref(); + const role = vue.computed(() => props.role); + const popperProvides = { + triggerRef, + popperInstanceRef, + contentRef, + referenceRef, + role + }; + expose(popperProvides); + vue.provide(POPPER_INJECTION_KEY, popperProvides); + return (_ctx, _cache) => { + return vue.renderSlot(_ctx.$slots, "default"); + }; + } + }); + var Popper = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["__file", "popper.vue"]]); + + const popperArrowProps = buildProps({ + arrowOffset: { + type: Number, + default: 5 + } + }); + const usePopperArrowProps = popperArrowProps; + + const __default__$1u = vue.defineComponent({ + name: "ElPopperArrow", + inheritAttrs: false + }); + const _sfc_main$28 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1u, + props: popperArrowProps, + setup(__props, { expose }) { + const props = __props; + const ns = useNamespace("popper"); + const { arrowOffset, arrowRef, arrowStyle } = vue.inject(POPPER_CONTENT_INJECTION_KEY, void 0); + vue.watch(() => props.arrowOffset, (val) => { + arrowOffset.value = val; + }); + vue.onBeforeUnmount(() => { + arrowRef.value = void 0; + }); + expose({ + arrowRef + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("span", { + ref_key: "arrowRef", + ref: arrowRef, + class: vue.normalizeClass(vue.unref(ns).e("arrow")), + style: vue.normalizeStyle(vue.unref(arrowStyle)), + "data-popper-arrow": "" + }, null, 6); + }; + } + }); + var ElPopperArrow = /* @__PURE__ */ _export_sfc(_sfc_main$28, [["__file", "arrow.vue"]]); + + const NAME = "ElOnlyChild"; + const OnlyChild = vue.defineComponent({ + name: NAME, + setup(_, { + slots, + attrs + }) { + var _a; + const forwardRefInjection = vue.inject(FORWARD_REF_INJECTION_KEY); + const forwardRefDirective = useForwardRefDirective((_a = forwardRefInjection == null ? void 0 : forwardRefInjection.setForwardRef) != null ? _a : NOOP); + return () => { + var _a2; + const defaultSlot = (_a2 = slots.default) == null ? void 0 : _a2.call(slots, attrs); + if (!defaultSlot) + return null; + if (defaultSlot.length > 1) { + return null; + } + const firstLegitNode = findFirstLegitChild(defaultSlot); + if (!firstLegitNode) { + return null; + } + return vue.withDirectives(vue.cloneVNode(firstLegitNode, attrs), [[forwardRefDirective]]); + }; + } + }); + function findFirstLegitChild(node) { + if (!node) + return null; + const children = node; + for (const child of children) { + if (isObject$1(child)) { + switch (child.type) { + case vue.Comment: + continue; + case vue.Text: + case "svg": + return wrapTextContent(child); + case vue.Fragment: + return findFirstLegitChild(child.children); + default: + return child; + } + } + return wrapTextContent(child); + } + return null; + } + function wrapTextContent(s) { + const ns = useNamespace("only-child"); + return vue.createVNode("span", { + "class": ns.e("content") + }, [s]); + } + + const popperTriggerProps = buildProps({ + virtualRef: { + type: definePropType(Object) + }, + virtualTriggering: Boolean, + onMouseenter: { + type: definePropType(Function) + }, + onMouseleave: { + type: definePropType(Function) + }, + onClick: { + type: definePropType(Function) + }, + onKeydown: { + type: definePropType(Function) + }, + onFocus: { + type: definePropType(Function) + }, + onBlur: { + type: definePropType(Function) + }, + onContextmenu: { + type: definePropType(Function) + }, + id: String, + open: Boolean + }); + const usePopperTriggerProps = popperTriggerProps; + + const __default__$1t = vue.defineComponent({ + name: "ElPopperTrigger", + inheritAttrs: false + }); + const _sfc_main$27 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1t, + props: popperTriggerProps, + setup(__props, { expose }) { + const props = __props; + const { role, triggerRef } = vue.inject(POPPER_INJECTION_KEY, void 0); + useForwardRef(triggerRef); + const ariaControls = vue.computed(() => { + return ariaHaspopup.value ? props.id : void 0; + }); + const ariaDescribedby = vue.computed(() => { + if (role && role.value === "tooltip") { + return props.open && props.id ? props.id : void 0; + } + return void 0; + }); + const ariaHaspopup = vue.computed(() => { + if (role && role.value !== "tooltip") { + return role.value; + } + return void 0; + }); + const ariaExpanded = vue.computed(() => { + return ariaHaspopup.value ? `${props.open}` : void 0; + }); + let virtualTriggerAriaStopWatch = void 0; + vue.onMounted(() => { + vue.watch(() => props.virtualRef, (virtualEl) => { + if (virtualEl) { + triggerRef.value = unrefElement(virtualEl); + } + }, { + immediate: true + }); + vue.watch(triggerRef, (el, prevEl) => { + virtualTriggerAriaStopWatch == null ? void 0 : virtualTriggerAriaStopWatch(); + virtualTriggerAriaStopWatch = void 0; + if (isElement$1(el)) { + [ + "onMouseenter", + "onMouseleave", + "onClick", + "onKeydown", + "onFocus", + "onBlur", + "onContextmenu" + ].forEach((eventName) => { + var _a; + const handler = props[eventName]; + if (handler) { + el.addEventListener(eventName.slice(2).toLowerCase(), handler); + (_a = prevEl == null ? void 0 : prevEl.removeEventListener) == null ? void 0 : _a.call(prevEl, eventName.slice(2).toLowerCase(), handler); + } + }); + virtualTriggerAriaStopWatch = vue.watch([ariaControls, ariaDescribedby, ariaHaspopup, ariaExpanded], (watches) => { + [ + "aria-controls", + "aria-describedby", + "aria-haspopup", + "aria-expanded" + ].forEach((key, idx) => { + isNil(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]); + }); + }, { immediate: true }); + } + if (isElement$1(prevEl)) { + [ + "aria-controls", + "aria-describedby", + "aria-haspopup", + "aria-expanded" + ].forEach((key) => prevEl.removeAttribute(key)); + } + }, { + immediate: true + }); + }); + vue.onBeforeUnmount(() => { + virtualTriggerAriaStopWatch == null ? void 0 : virtualTriggerAriaStopWatch(); + virtualTriggerAriaStopWatch = void 0; + }); + expose({ + triggerRef + }); + return (_ctx, _cache) => { + return !_ctx.virtualTriggering ? (vue.openBlock(), vue.createBlock(vue.unref(OnlyChild), vue.mergeProps({ key: 0 }, _ctx.$attrs, { + "aria-controls": vue.unref(ariaControls), + "aria-describedby": vue.unref(ariaDescribedby), + "aria-expanded": vue.unref(ariaExpanded), + "aria-haspopup": vue.unref(ariaHaspopup) + }), { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 16, ["aria-controls", "aria-describedby", "aria-expanded", "aria-haspopup"])) : vue.createCommentVNode("v-if", true); + }; + } + }); + var ElPopperTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$27, [["__file", "trigger.vue"]]); + + const FOCUS_AFTER_TRAPPED = "focus-trap.focus-after-trapped"; + const FOCUS_AFTER_RELEASED = "focus-trap.focus-after-released"; + const FOCUSOUT_PREVENTED = "focus-trap.focusout-prevented"; + const FOCUS_AFTER_TRAPPED_OPTS = { + cancelable: true, + bubbles: false + }; + const FOCUSOUT_PREVENTED_OPTS = { + cancelable: true, + bubbles: false + }; + const ON_TRAP_FOCUS_EVT = "focusAfterTrapped"; + const ON_RELEASE_FOCUS_EVT = "focusAfterReleased"; + const FOCUS_TRAP_INJECTION_KEY = Symbol("elFocusTrap"); + + const focusReason = vue.ref(); + const lastUserFocusTimestamp = vue.ref(0); + const lastAutomatedFocusTimestamp = vue.ref(0); + let focusReasonUserCount = 0; + const obtainAllFocusableElements = (element) => { + const nodes = []; + const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, { + acceptNode: (node) => { + const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden"; + if (node.disabled || node.hidden || isHiddenInput) + return NodeFilter.FILTER_SKIP; + return node.tabIndex >= 0 || node === document.activeElement ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; + } + }); + while (walker.nextNode()) + nodes.push(walker.currentNode); + return nodes; + }; + const getVisibleElement = (elements, container) => { + for (const element of elements) { + if (!isHidden(element, container)) + return element; + } + }; + const isHidden = (element, container) => { + if (getComputedStyle(element).visibility === "hidden") + return true; + while (element) { + if (container && element === container) + return false; + if (getComputedStyle(element).display === "none") + return true; + element = element.parentElement; + } + return false; + }; + const getEdges = (container) => { + const focusable = obtainAllFocusableElements(container); + const first = getVisibleElement(focusable, container); + const last = getVisibleElement(focusable.reverse(), container); + return [first, last]; + }; + const isSelectable = (element) => { + return element instanceof HTMLInputElement && "select" in element; + }; + const tryFocus = (element, shouldSelect) => { + if (element && element.focus) { + const prevFocusedElement = document.activeElement; + element.focus({ preventScroll: true }); + lastAutomatedFocusTimestamp.value = window.performance.now(); + if (element !== prevFocusedElement && isSelectable(element) && shouldSelect) { + element.select(); + } + } + }; + function removeFromStack(list, item) { + const copy = [...list]; + const idx = list.indexOf(item); + if (idx !== -1) { + copy.splice(idx, 1); + } + return copy; + } + const createFocusableStack = () => { + let stack = []; + const push = (layer) => { + const currentLayer = stack[0]; + if (currentLayer && layer !== currentLayer) { + currentLayer.pause(); + } + stack = removeFromStack(stack, layer); + stack.unshift(layer); + }; + const remove = (layer) => { + var _a, _b; + stack = removeFromStack(stack, layer); + (_b = (_a = stack[0]) == null ? void 0 : _a.resume) == null ? void 0 : _b.call(_a); + }; + return { + push, + remove + }; + }; + const focusFirstDescendant = (elements, shouldSelect = false) => { + const prevFocusedElement = document.activeElement; + for (const element of elements) { + tryFocus(element, shouldSelect); + if (document.activeElement !== prevFocusedElement) + return; + } + }; + const focusableStack = createFocusableStack(); + const isFocusCausedByUserEvent = () => { + return lastUserFocusTimestamp.value > lastAutomatedFocusTimestamp.value; + }; + const notifyFocusReasonPointer = () => { + focusReason.value = "pointer"; + lastUserFocusTimestamp.value = window.performance.now(); + }; + const notifyFocusReasonKeydown = () => { + focusReason.value = "keyboard"; + lastUserFocusTimestamp.value = window.performance.now(); + }; + const useFocusReason = () => { + vue.onMounted(() => { + if (focusReasonUserCount === 0) { + document.addEventListener("mousedown", notifyFocusReasonPointer); + document.addEventListener("touchstart", notifyFocusReasonPointer); + document.addEventListener("keydown", notifyFocusReasonKeydown); + } + focusReasonUserCount++; + }); + vue.onBeforeUnmount(() => { + focusReasonUserCount--; + if (focusReasonUserCount <= 0) { + document.removeEventListener("mousedown", notifyFocusReasonPointer); + document.removeEventListener("touchstart", notifyFocusReasonPointer); + document.removeEventListener("keydown", notifyFocusReasonKeydown); + } + }); + return { + focusReason, + lastUserFocusTimestamp, + lastAutomatedFocusTimestamp + }; + }; + const createFocusOutPreventedEvent = (detail) => { + return new CustomEvent(FOCUSOUT_PREVENTED, { + ...FOCUSOUT_PREVENTED_OPTS, + detail + }); + }; + + const _sfc_main$26 = vue.defineComponent({ + name: "ElFocusTrap", + inheritAttrs: false, + props: { + loop: Boolean, + trapped: Boolean, + focusTrapEl: Object, + focusStartEl: { + type: [Object, String], + default: "first" + } + }, + emits: [ + ON_TRAP_FOCUS_EVT, + ON_RELEASE_FOCUS_EVT, + "focusin", + "focusout", + "focusout-prevented", + "release-requested" + ], + setup(props, { emit }) { + const forwardRef = vue.ref(); + let lastFocusBeforeTrapped; + let lastFocusAfterTrapped; + const { focusReason } = useFocusReason(); + useEscapeKeydown((event) => { + if (props.trapped && !focusLayer.paused) { + emit("release-requested", event); + } + }); + const focusLayer = { + paused: false, + pause() { + this.paused = true; + }, + resume() { + this.paused = false; + } + }; + const onKeydown = (e) => { + if (!props.loop && !props.trapped) + return; + if (focusLayer.paused) + return; + const { key, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e; + const { loop } = props; + const isTabbing = key === EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey; + const currentFocusingEl = document.activeElement; + if (isTabbing && currentFocusingEl) { + const container = currentTarget; + const [first, last] = getEdges(container); + const isTabbable = first && last; + if (!isTabbable) { + if (currentFocusingEl === container) { + const focusoutPreventedEvent = createFocusOutPreventedEvent({ + focusReason: focusReason.value + }); + emit("focusout-prevented", focusoutPreventedEvent); + if (!focusoutPreventedEvent.defaultPrevented) { + e.preventDefault(); + } + } + } else { + if (!shiftKey && currentFocusingEl === last) { + const focusoutPreventedEvent = createFocusOutPreventedEvent({ + focusReason: focusReason.value + }); + emit("focusout-prevented", focusoutPreventedEvent); + if (!focusoutPreventedEvent.defaultPrevented) { + e.preventDefault(); + if (loop) + tryFocus(first, true); + } + } else if (shiftKey && [first, container].includes(currentFocusingEl)) { + const focusoutPreventedEvent = createFocusOutPreventedEvent({ + focusReason: focusReason.value + }); + emit("focusout-prevented", focusoutPreventedEvent); + if (!focusoutPreventedEvent.defaultPrevented) { + e.preventDefault(); + if (loop) + tryFocus(last, true); + } + } + } + } + }; + vue.provide(FOCUS_TRAP_INJECTION_KEY, { + focusTrapRef: forwardRef, + onKeydown + }); + vue.watch(() => props.focusTrapEl, (focusTrapEl) => { + if (focusTrapEl) { + forwardRef.value = focusTrapEl; + } + }, { immediate: true }); + vue.watch([forwardRef], ([forwardRef2], [oldForwardRef]) => { + if (forwardRef2) { + forwardRef2.addEventListener("keydown", onKeydown); + forwardRef2.addEventListener("focusin", onFocusIn); + forwardRef2.addEventListener("focusout", onFocusOut); + } + if (oldForwardRef) { + oldForwardRef.removeEventListener("keydown", onKeydown); + oldForwardRef.removeEventListener("focusin", onFocusIn); + oldForwardRef.removeEventListener("focusout", onFocusOut); + } + }); + const trapOnFocus = (e) => { + emit(ON_TRAP_FOCUS_EVT, e); + }; + const releaseOnFocus = (e) => emit(ON_RELEASE_FOCUS_EVT, e); + const onFocusIn = (e) => { + const trapContainer = vue.unref(forwardRef); + if (!trapContainer) + return; + const target = e.target; + const relatedTarget = e.relatedTarget; + const isFocusedInTrap = target && trapContainer.contains(target); + if (!props.trapped) { + const isPrevFocusedInTrap = relatedTarget && trapContainer.contains(relatedTarget); + if (!isPrevFocusedInTrap) { + lastFocusBeforeTrapped = relatedTarget; + } + } + if (isFocusedInTrap) + emit("focusin", e); + if (focusLayer.paused) + return; + if (props.trapped) { + if (isFocusedInTrap) { + lastFocusAfterTrapped = target; + } else { + tryFocus(lastFocusAfterTrapped, true); + } + } + }; + const onFocusOut = (e) => { + const trapContainer = vue.unref(forwardRef); + if (focusLayer.paused || !trapContainer) + return; + if (props.trapped) { + const relatedTarget = e.relatedTarget; + if (!isNil(relatedTarget) && !trapContainer.contains(relatedTarget)) { + setTimeout(() => { + if (!focusLayer.paused && props.trapped) { + const focusoutPreventedEvent = createFocusOutPreventedEvent({ + focusReason: focusReason.value + }); + emit("focusout-prevented", focusoutPreventedEvent); + if (!focusoutPreventedEvent.defaultPrevented) { + tryFocus(lastFocusAfterTrapped, true); + } + } + }, 0); + } + } else { + const target = e.target; + const isFocusedInTrap = target && trapContainer.contains(target); + if (!isFocusedInTrap) + emit("focusout", e); + } + }; + async function startTrap() { + await vue.nextTick(); + const trapContainer = vue.unref(forwardRef); + if (trapContainer) { + focusableStack.push(focusLayer); + const prevFocusedElement = trapContainer.contains(document.activeElement) ? lastFocusBeforeTrapped : document.activeElement; + lastFocusBeforeTrapped = prevFocusedElement; + const isPrevFocusContained = trapContainer.contains(prevFocusedElement); + if (!isPrevFocusContained) { + const focusEvent = new Event(FOCUS_AFTER_TRAPPED, FOCUS_AFTER_TRAPPED_OPTS); + trapContainer.addEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus); + trapContainer.dispatchEvent(focusEvent); + if (!focusEvent.defaultPrevented) { + vue.nextTick(() => { + let focusStartEl = props.focusStartEl; + if (!isString$1(focusStartEl)) { + tryFocus(focusStartEl); + if (document.activeElement !== focusStartEl) { + focusStartEl = "first"; + } + } + if (focusStartEl === "first") { + focusFirstDescendant(obtainAllFocusableElements(trapContainer), true); + } + if (document.activeElement === prevFocusedElement || focusStartEl === "container") { + tryFocus(trapContainer); + } + }); + } + } + } + } + function stopTrap() { + const trapContainer = vue.unref(forwardRef); + if (trapContainer) { + trapContainer.removeEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus); + const releasedEvent = new CustomEvent(FOCUS_AFTER_RELEASED, { + ...FOCUS_AFTER_TRAPPED_OPTS, + detail: { + focusReason: focusReason.value + } + }); + trapContainer.addEventListener(FOCUS_AFTER_RELEASED, releaseOnFocus); + trapContainer.dispatchEvent(releasedEvent); + if (!releasedEvent.defaultPrevented && (focusReason.value == "keyboard" || !isFocusCausedByUserEvent() || trapContainer.contains(document.activeElement))) { + tryFocus(lastFocusBeforeTrapped != null ? lastFocusBeforeTrapped : document.body); + } + trapContainer.removeEventListener(FOCUS_AFTER_RELEASED, trapOnFocus); + focusableStack.remove(focusLayer); + } + } + vue.onMounted(() => { + if (props.trapped) { + startTrap(); + } + vue.watch(() => props.trapped, (trapped) => { + if (trapped) { + startTrap(); + } else { + stopTrap(); + } + }); + }); + vue.onBeforeUnmount(() => { + if (props.trapped) { + stopTrap(); + } + }); + return { + onKeydown + }; + } + }); + function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) { + return vue.renderSlot(_ctx.$slots, "default", { handleKeydown: _ctx.onKeydown }); + } + var ElFocusTrap = /* @__PURE__ */ _export_sfc(_sfc_main$26, [["render", _sfc_render$v], ["__file", "focus-trap.vue"]]); + + const POSITIONING_STRATEGIES = ["fixed", "absolute"]; + const popperCoreConfigProps = buildProps({ + boundariesPadding: { + type: Number, + default: 0 + }, + fallbackPlacements: { + type: definePropType(Array), + default: void 0 + }, + gpuAcceleration: { + type: Boolean, + default: true + }, + offset: { + type: Number, + default: 12 + }, + placement: { + type: String, + values: Ee, + default: "bottom" + }, + popperOptions: { + type: definePropType(Object), + default: () => ({}) + }, + strategy: { + type: String, + values: POSITIONING_STRATEGIES, + default: "absolute" + } + }); + const popperContentProps = buildProps({ + ...popperCoreConfigProps, + id: String, + style: { + type: definePropType([String, Array, Object]) + }, + className: { + type: definePropType([String, Array, Object]) + }, + effect: { + type: String, + default: "dark" + }, + visible: Boolean, + enterable: { + type: Boolean, + default: true + }, + pure: Boolean, + focusOnShow: { + type: Boolean, + default: false + }, + trapping: { + type: Boolean, + default: false + }, + popperClass: { + type: definePropType([String, Array, Object]) + }, + popperStyle: { + type: definePropType([String, Array, Object]) + }, + referenceEl: { + type: definePropType(Object) + }, + triggerTargetEl: { + type: definePropType(Object) + }, + stopPopperMouseEvent: { + type: Boolean, + default: true + }, + ariaLabel: { + type: String, + default: void 0 + }, + virtualTriggering: Boolean, + zIndex: Number + }); + const popperContentEmits = { + mouseenter: (evt) => evt instanceof MouseEvent, + mouseleave: (evt) => evt instanceof MouseEvent, + focus: () => true, + blur: () => true, + close: () => true + }; + const usePopperCoreConfigProps = popperCoreConfigProps; + const usePopperContentProps = popperContentProps; + const usePopperContentEmits = popperContentEmits; + + const buildPopperOptions = (props, modifiers = []) => { + const { placement, strategy, popperOptions } = props; + const options = { + placement, + strategy, + ...popperOptions, + modifiers: [...genModifiers(props), ...modifiers] + }; + deriveExtraModifiers(options, popperOptions == null ? void 0 : popperOptions.modifiers); + return options; + }; + const unwrapMeasurableEl = ($el) => { + if (!isClient) + return; + return unrefElement($el); + }; + function genModifiers(options) { + const { offset, gpuAcceleration, fallbackPlacements } = options; + return [ + { + name: "offset", + options: { + offset: [0, offset != null ? offset : 12] + } + }, + { + name: "preventOverflow", + options: { + padding: { + top: 2, + bottom: 2, + left: 5, + right: 5 + } + } + }, + { + name: "flip", + options: { + padding: 5, + fallbackPlacements + } + }, + { + name: "computeStyles", + options: { + gpuAcceleration + } + } + ]; + } + function deriveExtraModifiers(options, modifiers) { + if (modifiers) { + options.modifiers = [...options.modifiers, ...modifiers != null ? modifiers : []]; + } + } + + const DEFAULT_ARROW_OFFSET = 0; + const usePopperContent = (props) => { + const { popperInstanceRef, contentRef, triggerRef, role } = vue.inject(POPPER_INJECTION_KEY, void 0); + const arrowRef = vue.ref(); + const arrowOffset = vue.ref(); + const eventListenerModifier = vue.computed(() => { + return { + name: "eventListeners", + enabled: !!props.visible + }; + }); + const arrowModifier = vue.computed(() => { + var _a; + const arrowEl = vue.unref(arrowRef); + const offset = (_a = vue.unref(arrowOffset)) != null ? _a : DEFAULT_ARROW_OFFSET; + return { + name: "arrow", + enabled: !isUndefined$1(arrowEl), + options: { + element: arrowEl, + padding: offset + } + }; + }); + const options = vue.computed(() => { + return { + onFirstUpdate: () => { + update(); + }, + ...buildPopperOptions(props, [ + vue.unref(arrowModifier), + vue.unref(eventListenerModifier) + ]) + }; + }); + const computedReference = vue.computed(() => unwrapMeasurableEl(props.referenceEl) || vue.unref(triggerRef)); + const { attributes, state, styles, update, forceUpdate, instanceRef } = usePopper(computedReference, contentRef, options); + vue.watch(instanceRef, (instance) => popperInstanceRef.value = instance); + vue.onMounted(() => { + vue.watch(() => { + var _a; + return (_a = vue.unref(computedReference)) == null ? void 0 : _a.getBoundingClientRect(); + }, () => { + update(); + }); + }); + return { + attributes, + arrowRef, + contentRef, + instanceRef, + state, + styles, + role, + forceUpdate, + update + }; + }; + + const usePopperContentDOM = (props, { + attributes, + styles, + role + }) => { + const { nextZIndex } = useZIndex(); + const ns = useNamespace("popper"); + const contentAttrs = vue.computed(() => vue.unref(attributes).popper); + const contentZIndex = vue.ref(props.zIndex || nextZIndex()); + const contentClass = vue.computed(() => [ + ns.b(), + ns.is("pure", props.pure), + ns.is(props.effect), + props.popperClass + ]); + const contentStyle = vue.computed(() => { + return [ + { zIndex: vue.unref(contentZIndex) }, + props.popperStyle || {}, + vue.unref(styles).popper + ]; + }); + const ariaModal = vue.computed(() => role.value === "dialog" ? "false" : void 0); + const arrowStyle = vue.computed(() => vue.unref(styles).arrow || {}); + const updateZIndex = () => { + contentZIndex.value = props.zIndex || nextZIndex(); + }; + return { + ariaModal, + arrowStyle, + contentAttrs, + contentClass, + contentStyle, + contentZIndex, + updateZIndex + }; + }; + + const usePopperContentFocusTrap = (props, emit) => { + const trapped = vue.ref(false); + const focusStartRef = vue.ref(); + const onFocusAfterTrapped = () => { + emit("focus"); + }; + const onFocusAfterReleased = (event) => { + var _a; + if (((_a = event.detail) == null ? void 0 : _a.focusReason) !== "pointer") { + focusStartRef.value = "first"; + emit("blur"); + } + }; + const onFocusInTrap = (event) => { + if (props.visible && !trapped.value) { + if (event.target) { + focusStartRef.value = event.target; + } + trapped.value = true; + } + }; + const onFocusoutPrevented = (event) => { + if (!props.trapping) { + if (event.detail.focusReason === "pointer") { + event.preventDefault(); + } + trapped.value = false; + } + }; + const onReleaseRequested = () => { + trapped.value = false; + emit("close"); + }; + return { + focusStartRef, + trapped, + onFocusAfterReleased, + onFocusAfterTrapped, + onFocusInTrap, + onFocusoutPrevented, + onReleaseRequested + }; + }; + + const __default__$1s = vue.defineComponent({ + name: "ElPopperContent" + }); + const _sfc_main$25 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1s, + props: popperContentProps, + emits: popperContentEmits, + setup(__props, { expose, emit }) { + const props = __props; + const { + focusStartRef, + trapped, + onFocusAfterReleased, + onFocusAfterTrapped, + onFocusInTrap, + onFocusoutPrevented, + onReleaseRequested + } = usePopperContentFocusTrap(props, emit); + const { attributes, arrowRef, contentRef, styles, instanceRef, role, update } = usePopperContent(props); + const { + ariaModal, + arrowStyle, + contentAttrs, + contentClass, + contentStyle, + updateZIndex + } = usePopperContentDOM(props, { + styles, + attributes, + role + }); + const formItemContext = vue.inject(formItemContextKey, void 0); + const arrowOffset = vue.ref(); + vue.provide(POPPER_CONTENT_INJECTION_KEY, { + arrowStyle, + arrowRef, + arrowOffset + }); + if (formItemContext && (formItemContext.addInputId || formItemContext.removeInputId)) { + vue.provide(formItemContextKey, { + ...formItemContext, + addInputId: NOOP, + removeInputId: NOOP + }); + } + let triggerTargetAriaStopWatch = void 0; + const updatePopper = (shouldUpdateZIndex = true) => { + update(); + shouldUpdateZIndex && updateZIndex(); + }; + const togglePopperAlive = () => { + updatePopper(false); + if (props.visible && props.focusOnShow) { + trapped.value = true; + } else if (props.visible === false) { + trapped.value = false; + } + }; + vue.onMounted(() => { + vue.watch(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => { + triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch(); + triggerTargetAriaStopWatch = void 0; + const el = vue.unref(triggerTargetEl || contentRef.value); + const prevEl = vue.unref(prevTriggerTargetEl || contentRef.value); + if (isElement$1(el)) { + triggerTargetAriaStopWatch = vue.watch([role, () => props.ariaLabel, ariaModal, () => props.id], (watches) => { + ["role", "aria-label", "aria-modal", "id"].forEach((key, idx) => { + isNil(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]); + }); + }, { immediate: true }); + } + if (prevEl !== el && isElement$1(prevEl)) { + ["role", "aria-label", "aria-modal", "id"].forEach((key) => { + prevEl.removeAttribute(key); + }); + } + }, { immediate: true }); + vue.watch(() => props.visible, togglePopperAlive, { immediate: true }); + }); + vue.onBeforeUnmount(() => { + triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch(); + triggerTargetAriaStopWatch = void 0; + }); + expose({ + popperContentRef: contentRef, + popperInstanceRef: instanceRef, + updatePopper, + contentStyle + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ + ref_key: "contentRef", + ref: contentRef + }, vue.unref(contentAttrs), { + style: vue.unref(contentStyle), + class: vue.unref(contentClass), + tabindex: "-1", + onMouseenter: _cache[0] || (_cache[0] = (e) => _ctx.$emit("mouseenter", e)), + onMouseleave: _cache[1] || (_cache[1] = (e) => _ctx.$emit("mouseleave", e)) + }), [ + vue.createVNode(vue.unref(ElFocusTrap), { + trapped: vue.unref(trapped), + "trap-on-focus-in": true, + "focus-trap-el": vue.unref(contentRef), + "focus-start-el": vue.unref(focusStartRef), + onFocusAfterTrapped: vue.unref(onFocusAfterTrapped), + onFocusAfterReleased: vue.unref(onFocusAfterReleased), + onFocusin: vue.unref(onFocusInTrap), + onFocusoutPrevented: vue.unref(onFocusoutPrevented), + onReleaseRequested: vue.unref(onReleaseRequested) + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusin", "onFocusoutPrevented", "onReleaseRequested"]) + ], 16); + }; + } + }); + var ElPopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$25, [["__file", "content.vue"]]); + + const ElPopper = withInstall(Popper); + + const TOOLTIP_INJECTION_KEY = Symbol("elTooltip"); + + const useTooltipContentProps = buildProps({ + ...useDelayedToggleProps, + ...popperContentProps, + appendTo: { + type: definePropType([String, Object]) + }, + content: { + type: String, + default: "" + }, + rawContent: { + type: Boolean, + default: false + }, + persistent: Boolean, + ariaLabel: String, + visible: { + type: definePropType(Boolean), + default: null + }, + transition: String, + teleported: { + type: Boolean, + default: true + }, + disabled: Boolean + }); + + const useTooltipTriggerProps = buildProps({ + ...popperTriggerProps, + disabled: Boolean, + trigger: { + type: definePropType([String, Array]), + default: "hover" + }, + triggerKeys: { + type: definePropType(Array), + default: () => [EVENT_CODE.enter, EVENT_CODE.space] + } + }); + + const { + useModelToggleProps: useTooltipModelToggleProps, + useModelToggleEmits: useTooltipModelToggleEmits, + useModelToggle: useTooltipModelToggle + } = createModelToggleComposable("visible"); + const useTooltipProps = buildProps({ + ...popperProps, + ...useTooltipModelToggleProps, + ...useTooltipContentProps, + ...useTooltipTriggerProps, + ...popperArrowProps, + showArrow: { + type: Boolean, + default: true + } + }); + const tooltipEmits = [ + ...useTooltipModelToggleEmits, + "before-show", + "before-hide", + "show", + "hide", + "open", + "close" + ]; + + const isTriggerType = (trigger, type) => { + if (isArray$1(trigger)) { + return trigger.includes(type); + } + return trigger === type; + }; + const whenTrigger = (trigger, type, handler) => { + return (e) => { + isTriggerType(vue.unref(trigger), type) && handler(e); + }; + }; + + const __default__$1r = vue.defineComponent({ + name: "ElTooltipTrigger" + }); + const _sfc_main$24 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1r, + props: useTooltipTriggerProps, + setup(__props, { expose }) { + const props = __props; + const ns = useNamespace("tooltip"); + const { controlled, id, open, onOpen, onClose, onToggle } = vue.inject(TOOLTIP_INJECTION_KEY, void 0); + const triggerRef = vue.ref(null); + const stopWhenControlledOrDisabled = () => { + if (vue.unref(controlled) || props.disabled) { + return true; + } + }; + const trigger = vue.toRef(props, "trigger"); + const onMouseenter = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "hover", onOpen)); + const onMouseleave = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "hover", onClose)); + const onClick = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "click", (e) => { + if (e.button === 0) { + onToggle(e); + } + })); + const onFocus = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "focus", onOpen)); + const onBlur = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "focus", onClose)); + const onContextMenu = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "contextmenu", (e) => { + e.preventDefault(); + onToggle(e); + })); + const onKeydown = composeEventHandlers(stopWhenControlledOrDisabled, (e) => { + const { code } = e; + if (props.triggerKeys.includes(code)) { + e.preventDefault(); + onToggle(e); + } + }); + expose({ + triggerRef + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElPopperTrigger), { + id: vue.unref(id), + "virtual-ref": _ctx.virtualRef, + open: vue.unref(open), + "virtual-triggering": _ctx.virtualTriggering, + class: vue.normalizeClass(vue.unref(ns).e("trigger")), + onBlur: vue.unref(onBlur), + onClick: vue.unref(onClick), + onContextmenu: vue.unref(onContextMenu), + onFocus: vue.unref(onFocus), + onMouseenter: vue.unref(onMouseenter), + onMouseleave: vue.unref(onMouseleave), + onKeydown: vue.unref(onKeydown) + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["id", "virtual-ref", "open", "virtual-triggering", "class", "onBlur", "onClick", "onContextmenu", "onFocus", "onMouseenter", "onMouseleave", "onKeydown"]); + }; + } + }); + var ElTooltipTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$24, [["__file", "trigger.vue"]]); + + const __default__$1q = vue.defineComponent({ + name: "ElTooltipContent", + inheritAttrs: false + }); + const _sfc_main$23 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1q, + props: useTooltipContentProps, + setup(__props, { expose }) { + const props = __props; + const { selector } = usePopperContainerId(); + const ns = useNamespace("tooltip"); + const contentRef = vue.ref(null); + const destroyed = vue.ref(false); + const { + controlled, + id, + open, + trigger, + onClose, + onOpen, + onShow, + onHide, + onBeforeShow, + onBeforeHide + } = vue.inject(TOOLTIP_INJECTION_KEY, void 0); + const transitionClass = vue.computed(() => { + return props.transition || `${ns.namespace.value}-fade-in-linear`; + }); + const persistentRef = vue.computed(() => { + return props.persistent; + }); + vue.onBeforeUnmount(() => { + destroyed.value = true; + }); + const shouldRender = vue.computed(() => { + return vue.unref(persistentRef) ? true : vue.unref(open); + }); + const shouldShow = vue.computed(() => { + return props.disabled ? false : vue.unref(open); + }); + const appendTo = vue.computed(() => { + return props.appendTo || selector.value; + }); + const contentStyle = vue.computed(() => { + var _a; + return (_a = props.style) != null ? _a : {}; + }); + const ariaHidden = vue.computed(() => !vue.unref(open)); + const onTransitionLeave = () => { + onHide(); + }; + const stopWhenControlled = () => { + if (vue.unref(controlled)) + return true; + }; + const onContentEnter = composeEventHandlers(stopWhenControlled, () => { + if (props.enterable && vue.unref(trigger) === "hover") { + onOpen(); + } + }); + const onContentLeave = composeEventHandlers(stopWhenControlled, () => { + if (vue.unref(trigger) === "hover") { + onClose(); + } + }); + const onBeforeEnter = () => { + var _a, _b; + (_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a); + onBeforeShow == null ? void 0 : onBeforeShow(); + }; + const onBeforeLeave = () => { + onBeforeHide == null ? void 0 : onBeforeHide(); + }; + const onAfterShow = () => { + onShow(); + stopHandle = onClickOutside(vue.computed(() => { + var _a; + return (_a = contentRef.value) == null ? void 0 : _a.popperContentRef; + }), () => { + if (vue.unref(controlled)) + return; + const $trigger = vue.unref(trigger); + if ($trigger !== "hover") { + onClose(); + } + }); + }; + const onBlur = () => { + if (!props.virtualTriggering) { + onClose(); + } + }; + let stopHandle; + vue.watch(() => vue.unref(open), (val) => { + if (!val) { + stopHandle == null ? void 0 : stopHandle(); + } + }, { + flush: "post" + }); + vue.watch(() => props.content, () => { + var _a, _b; + (_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a); + }); + expose({ + contentRef + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.Teleport, { + disabled: !_ctx.teleported, + to: vue.unref(appendTo) + }, [ + vue.createVNode(vue.Transition, { + name: vue.unref(transitionClass), + onAfterLeave: onTransitionLeave, + onBeforeEnter, + onAfterEnter: onAfterShow, + onBeforeLeave + }, { + default: vue.withCtx(() => [ + vue.unref(shouldRender) ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(ElPopperContent), vue.mergeProps({ + key: 0, + id: vue.unref(id), + ref_key: "contentRef", + ref: contentRef + }, _ctx.$attrs, { + "aria-label": _ctx.ariaLabel, + "aria-hidden": vue.unref(ariaHidden), + "boundaries-padding": _ctx.boundariesPadding, + "fallback-placements": _ctx.fallbackPlacements, + "gpu-acceleration": _ctx.gpuAcceleration, + offset: _ctx.offset, + placement: _ctx.placement, + "popper-options": _ctx.popperOptions, + strategy: _ctx.strategy, + effect: _ctx.effect, + enterable: _ctx.enterable, + pure: _ctx.pure, + "popper-class": _ctx.popperClass, + "popper-style": [_ctx.popperStyle, vue.unref(contentStyle)], + "reference-el": _ctx.referenceEl, + "trigger-target-el": _ctx.triggerTargetEl, + visible: vue.unref(shouldShow), + "z-index": _ctx.zIndex, + onMouseenter: vue.unref(onContentEnter), + onMouseleave: vue.unref(onContentLeave), + onBlur, + onClose: vue.unref(onClose) + }), { + default: vue.withCtx(() => [ + !destroyed.value ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 16, ["id", "aria-label", "aria-hidden", "boundaries-padding", "fallback-placements", "gpu-acceleration", "offset", "placement", "popper-options", "strategy", "effect", "enterable", "pure", "popper-class", "popper-style", "reference-el", "trigger-target-el", "visible", "z-index", "onMouseenter", "onMouseleave", "onClose"])), [ + [vue.vShow, vue.unref(shouldShow)] + ]) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["name"]) + ], 8, ["disabled", "to"]); + }; + } + }); + var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["__file", "content.vue"]]); + + const _hoisted_1$11 = ["innerHTML"]; + const _hoisted_2$F = { key: 1 }; + const __default__$1p = vue.defineComponent({ + name: "ElTooltip" + }); + const _sfc_main$22 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1p, + props: useTooltipProps, + emits: tooltipEmits, + setup(__props, { expose, emit }) { + const props = __props; + usePopperContainer(); + const id = useId(); + const popperRef = vue.ref(); + const contentRef = vue.ref(); + const updatePopper = () => { + var _a; + const popperComponent = vue.unref(popperRef); + if (popperComponent) { + (_a = popperComponent.popperInstanceRef) == null ? void 0 : _a.update(); + } + }; + const open = vue.ref(false); + const toggleReason = vue.ref(); + const { show, hide, hasUpdateHandler } = useTooltipModelToggle({ + indicator: open, + toggleReason + }); + const { onOpen, onClose } = useDelayedToggle({ + showAfter: vue.toRef(props, "showAfter"), + hideAfter: vue.toRef(props, "hideAfter"), + autoClose: vue.toRef(props, "autoClose"), + open: show, + close: hide + }); + const controlled = vue.computed(() => isBoolean$1(props.visible) && !hasUpdateHandler.value); + vue.provide(TOOLTIP_INJECTION_KEY, { + controlled, + id, + open: vue.readonly(open), + trigger: vue.toRef(props, "trigger"), + onOpen: (event) => { + onOpen(event); + }, + onClose: (event) => { + onClose(event); + }, + onToggle: (event) => { + if (vue.unref(open)) { + onClose(event); + } else { + onOpen(event); + } + }, + onShow: () => { + emit("show", toggleReason.value); + }, + onHide: () => { + emit("hide", toggleReason.value); + }, + onBeforeShow: () => { + emit("before-show", toggleReason.value); + }, + onBeforeHide: () => { + emit("before-hide", toggleReason.value); + }, + updatePopper + }); + vue.watch(() => props.disabled, (disabled) => { + if (disabled && open.value) { + open.value = false; + } + }); + const isFocusInsideContent = () => { + var _a, _b; + const popperContent = (_b = (_a = contentRef.value) == null ? void 0 : _a.contentRef) == null ? void 0 : _b.popperContentRef; + return popperContent && popperContent.contains(document.activeElement); + }; + vue.onDeactivated(() => open.value && hide()); + expose({ + popperRef, + contentRef, + isFocusInsideContent, + updatePopper, + onOpen, + onClose, + hide + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElPopper), { + ref_key: "popperRef", + ref: popperRef, + role: _ctx.role + }, { + default: vue.withCtx(() => [ + vue.createVNode(ElTooltipTrigger, { + disabled: _ctx.disabled, + trigger: _ctx.trigger, + "trigger-keys": _ctx.triggerKeys, + "virtual-ref": _ctx.virtualRef, + "virtual-triggering": _ctx.virtualTriggering + }, { + default: vue.withCtx(() => [ + _ctx.$slots.default ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["disabled", "trigger", "trigger-keys", "virtual-ref", "virtual-triggering"]), + vue.createVNode(ElTooltipContent, { + ref_key: "contentRef", + ref: contentRef, + "aria-label": _ctx.ariaLabel, + "boundaries-padding": _ctx.boundariesPadding, + content: _ctx.content, + disabled: _ctx.disabled, + effect: _ctx.effect, + enterable: _ctx.enterable, + "fallback-placements": _ctx.fallbackPlacements, + "hide-after": _ctx.hideAfter, + "gpu-acceleration": _ctx.gpuAcceleration, + offset: _ctx.offset, + persistent: _ctx.persistent, + "popper-class": _ctx.popperClass, + "popper-style": _ctx.popperStyle, + placement: _ctx.placement, + "popper-options": _ctx.popperOptions, + pure: _ctx.pure, + "raw-content": _ctx.rawContent, + "reference-el": _ctx.referenceEl, + "trigger-target-el": _ctx.triggerTargetEl, + "show-after": _ctx.showAfter, + strategy: _ctx.strategy, + teleported: _ctx.teleported, + transition: _ctx.transition, + "virtual-triggering": _ctx.virtualTriggering, + "z-index": _ctx.zIndex, + "append-to": _ctx.appendTo + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "content", {}, () => [ + _ctx.rawContent ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + innerHTML: _ctx.content + }, null, 8, _hoisted_1$11)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$F, vue.toDisplayString(_ctx.content), 1)) + ]), + _ctx.showArrow ? (vue.openBlock(), vue.createBlock(vue.unref(ElPopperArrow), { + key: 0, + "arrow-offset": _ctx.arrowOffset + }, null, 8, ["arrow-offset"])) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["aria-label", "boundaries-padding", "content", "disabled", "effect", "enterable", "fallback-placements", "hide-after", "gpu-acceleration", "offset", "persistent", "popper-class", "popper-style", "placement", "popper-options", "pure", "raw-content", "reference-el", "trigger-target-el", "show-after", "strategy", "teleported", "transition", "virtual-triggering", "z-index", "append-to"]) + ]), + _: 3 + }, 8, ["role"]); + }; + } + }); + var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$22, [["__file", "tooltip.vue"]]); + + const ElTooltip = withInstall(Tooltip); + + const autocompleteProps = buildProps({ + valueKey: { + type: String, + default: "value" + }, + modelValue: { + type: [String, Number], + default: "" + }, + debounce: { + type: Number, + default: 300 + }, + placement: { + type: definePropType(String), + values: [ + "top", + "top-start", + "top-end", + "bottom", + "bottom-start", + "bottom-end" + ], + default: "bottom-start" + }, + fetchSuggestions: { + type: definePropType([Function, Array]), + default: NOOP + }, + popperClass: { + type: String, + default: "" + }, + triggerOnFocus: { + type: Boolean, + default: true + }, + selectWhenUnmatched: { + type: Boolean, + default: false + }, + hideLoading: { + type: Boolean, + default: false + }, + label: { + type: String + }, + teleported: useTooltipContentProps.teleported, + highlightFirstItem: { + type: Boolean, + default: false + }, + fitInputWidth: { + type: Boolean, + default: false + }, + clearable: { + type: Boolean, + default: false + }, + disabled: { + type: Boolean, + default: false + }, + name: String + }); + const autocompleteEmits = { + [UPDATE_MODEL_EVENT]: (value) => isString$1(value), + [INPUT_EVENT]: (value) => isString$1(value), + [CHANGE_EVENT]: (value) => isString$1(value), + focus: (evt) => evt instanceof FocusEvent, + blur: (evt) => evt instanceof FocusEvent, + clear: () => true, + select: (item) => isObject$1(item) + }; + + const _hoisted_1$10 = ["aria-expanded", "aria-owns"]; + const _hoisted_2$E = { key: 0 }; + const _hoisted_3$k = ["id", "aria-selected", "onClick"]; + const COMPONENT_NAME$i = "ElAutocomplete"; + const __default__$1o = vue.defineComponent({ + name: COMPONENT_NAME$i, + inheritAttrs: false + }); + const _sfc_main$21 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1o, + props: autocompleteProps, + emits: autocompleteEmits, + setup(__props, { expose, emit }) { + const props = __props; + const attrs = useAttrs(); + const rawAttrs = vue.useAttrs(); + const disabled = useFormDisabled(); + const ns = useNamespace("autocomplete"); + const inputRef = vue.ref(); + const regionRef = vue.ref(); + const popperRef = vue.ref(); + const listboxRef = vue.ref(); + let readonly = false; + let ignoreFocusEvent = false; + const suggestions = vue.ref([]); + const highlightedIndex = vue.ref(-1); + const dropdownWidth = vue.ref(""); + const activated = vue.ref(false); + const suggestionDisabled = vue.ref(false); + const loading = vue.ref(false); + const listboxId = vue.computed(() => ns.b(String(generateId()))); + const styles = vue.computed(() => rawAttrs.style); + const suggestionVisible = vue.computed(() => { + const isValidData = suggestions.value.length > 0; + return (isValidData || loading.value) && activated.value; + }); + const suggestionLoading = vue.computed(() => !props.hideLoading && loading.value); + const refInput = vue.computed(() => { + if (inputRef.value) { + return Array.from(inputRef.value.$el.querySelectorAll("input")); + } + return []; + }); + const onSuggestionShow = async () => { + await vue.nextTick(); + if (suggestionVisible.value) { + dropdownWidth.value = `${inputRef.value.$el.offsetWidth}px`; + } + }; + const onHide = () => { + highlightedIndex.value = -1; + }; + const getData = async (queryString) => { + if (suggestionDisabled.value) + return; + const cb = (suggestionList) => { + loading.value = false; + if (suggestionDisabled.value) + return; + if (isArray$1(suggestionList)) { + suggestions.value = suggestionList; + highlightedIndex.value = props.highlightFirstItem ? 0 : -1; + } else { + throwError(COMPONENT_NAME$i, "autocomplete suggestions must be an array"); + } + }; + loading.value = true; + if (isArray$1(props.fetchSuggestions)) { + cb(props.fetchSuggestions); + } else { + const result = await props.fetchSuggestions(queryString, cb); + if (isArray$1(result)) + cb(result); + } + }; + const debouncedGetData = debounce(getData, props.debounce); + const handleInput = (value) => { + const valuePresented = !!value; + emit(INPUT_EVENT, value); + emit(UPDATE_MODEL_EVENT, value); + suggestionDisabled.value = false; + activated.value || (activated.value = valuePresented); + if (!props.triggerOnFocus && !value) { + suggestionDisabled.value = true; + suggestions.value = []; + return; + } + debouncedGetData(value); + }; + const handleMouseDown = (event) => { + var _a; + if (disabled.value) + return; + if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) { + activated.value = true; + } + }; + const handleChange = (value) => { + emit(CHANGE_EVENT, value); + }; + const handleFocus = (evt) => { + if (!ignoreFocusEvent) { + activated.value = true; + emit("focus", evt); + if (props.triggerOnFocus && !readonly) { + debouncedGetData(String(props.modelValue)); + } + } else { + ignoreFocusEvent = false; + } + }; + const handleBlur = (evt) => { + setTimeout(() => { + var _a; + if ((_a = popperRef.value) == null ? void 0 : _a.isFocusInsideContent()) { + ignoreFocusEvent = true; + return; + } + activated.value && close(); + emit("blur", evt); + }); + }; + const handleClear = () => { + activated.value = false; + emit(UPDATE_MODEL_EVENT, ""); + emit("clear"); + }; + const handleKeyEnter = async () => { + if (suggestionVisible.value && highlightedIndex.value >= 0 && highlightedIndex.value < suggestions.value.length) { + handleSelect(suggestions.value[highlightedIndex.value]); + } else if (props.selectWhenUnmatched) { + emit("select", { value: props.modelValue }); + suggestions.value = []; + highlightedIndex.value = -1; + } + }; + const handleKeyEscape = (evt) => { + if (suggestionVisible.value) { + evt.preventDefault(); + evt.stopPropagation(); + close(); + } + }; + const close = () => { + activated.value = false; + }; + const focus = () => { + var _a; + (_a = inputRef.value) == null ? void 0 : _a.focus(); + }; + const blur = () => { + var _a; + (_a = inputRef.value) == null ? void 0 : _a.blur(); + }; + const handleSelect = async (item) => { + emit(INPUT_EVENT, item[props.valueKey]); + emit(UPDATE_MODEL_EVENT, item[props.valueKey]); + emit("select", item); + suggestions.value = []; + highlightedIndex.value = -1; + }; + const highlight = (index) => { + if (!suggestionVisible.value || loading.value) + return; + if (index < 0) { + highlightedIndex.value = -1; + return; + } + if (index >= suggestions.value.length) { + index = suggestions.value.length - 1; + } + const suggestion = regionRef.value.querySelector(`.${ns.be("suggestion", "wrap")}`); + const suggestionList = suggestion.querySelectorAll(`.${ns.be("suggestion", "list")} li`); + const highlightItem = suggestionList[index]; + const scrollTop = suggestion.scrollTop; + const { offsetTop, scrollHeight } = highlightItem; + if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) { + suggestion.scrollTop += scrollHeight; + } + if (offsetTop < scrollTop) { + suggestion.scrollTop -= scrollHeight; + } + highlightedIndex.value = index; + inputRef.value.ref.setAttribute("aria-activedescendant", `${listboxId.value}-item-${highlightedIndex.value}`); + }; + onClickOutside(listboxRef, () => { + suggestionVisible.value && close(); + }); + vue.onMounted(() => { + inputRef.value.ref.setAttribute("role", "textbox"); + inputRef.value.ref.setAttribute("aria-autocomplete", "list"); + inputRef.value.ref.setAttribute("aria-controls", "id"); + inputRef.value.ref.setAttribute("aria-activedescendant", `${listboxId.value}-item-${highlightedIndex.value}`); + readonly = inputRef.value.ref.hasAttribute("readonly"); + }); + expose({ + highlightedIndex, + activated, + loading, + inputRef, + popperRef, + suggestions, + handleSelect, + handleKeyEnter, + focus, + blur, + close, + highlight + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), { + ref_key: "popperRef", + ref: popperRef, + visible: vue.unref(suggestionVisible), + placement: _ctx.placement, + "fallback-placements": ["bottom-start", "top-start"], + "popper-class": [vue.unref(ns).e("popper"), _ctx.popperClass], + teleported: _ctx.teleported, + "gpu-acceleration": false, + pure: "", + "manual-mode": "", + effect: "light", + trigger: "click", + transition: `${vue.unref(ns).namespace.value}-zoom-in-top`, + persistent: "", + onBeforeShow: onSuggestionShow, + onHide + }, { + content: vue.withCtx(() => [ + vue.createElementVNode("div", { + ref_key: "regionRef", + ref: regionRef, + class: vue.normalizeClass([vue.unref(ns).b("suggestion"), vue.unref(ns).is("loading", vue.unref(suggestionLoading))]), + style: vue.normalizeStyle({ + [_ctx.fitInputWidth ? "width" : "minWidth"]: dropdownWidth.value, + outline: "none" + }), + role: "region" + }, [ + vue.createVNode(vue.unref(ElScrollbar), { + id: vue.unref(listboxId), + tag: "ul", + "wrap-class": vue.unref(ns).be("suggestion", "wrap"), + "view-class": vue.unref(ns).be("suggestion", "list"), + role: "listbox" + }, { + default: vue.withCtx(() => [ + vue.unref(suggestionLoading) ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$E, [ + vue.createVNode(vue.unref(ElIcon), { + class: vue.normalizeClass(vue.unref(ns).is("loading")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(loading_default)) + ]), + _: 1 + }, 8, ["class"]) + ])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(suggestions.value, (item, index) => { + return vue.openBlock(), vue.createElementBlock("li", { + id: `${vue.unref(listboxId)}-item-${index}`, + key: index, + class: vue.normalizeClass({ highlighted: highlightedIndex.value === index }), + role: "option", + "aria-selected": highlightedIndex.value === index, + onClick: ($event) => handleSelect(item) + }, [ + vue.renderSlot(_ctx.$slots, "default", { item }, () => [ + vue.createTextVNode(vue.toDisplayString(item[_ctx.valueKey]), 1) + ]) + ], 10, _hoisted_3$k); + }), 128)) + ]), + _: 3 + }, 8, ["id", "wrap-class", "view-class"]) + ], 6) + ]), + default: vue.withCtx(() => [ + vue.createElementVNode("div", { + ref_key: "listboxRef", + ref: listboxRef, + class: vue.normalizeClass([vue.unref(ns).b(), _ctx.$attrs.class]), + style: vue.normalizeStyle(vue.unref(styles)), + role: "combobox", + "aria-haspopup": "listbox", + "aria-expanded": vue.unref(suggestionVisible), + "aria-owns": vue.unref(listboxId) + }, [ + vue.createVNode(vue.unref(ElInput), vue.mergeProps({ + ref_key: "inputRef", + ref: inputRef + }, vue.unref(attrs), { + clearable: _ctx.clearable, + disabled: vue.unref(disabled), + name: _ctx.name, + "model-value": _ctx.modelValue, + onInput: handleInput, + onChange: handleChange, + onFocus: handleFocus, + onBlur: handleBlur, + onClear: handleClear, + onKeydown: [ + _cache[0] || (_cache[0] = vue.withKeys(vue.withModifiers(($event) => highlight(highlightedIndex.value - 1), ["prevent"]), ["up"])), + _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(($event) => highlight(highlightedIndex.value + 1), ["prevent"]), ["down"])), + vue.withKeys(handleKeyEnter, ["enter"]), + vue.withKeys(close, ["tab"]), + vue.withKeys(handleKeyEscape, ["esc"]) + ], + onMousedown: handleMouseDown + }), vue.createSlots({ _: 2 }, [ + _ctx.$slots.prepend ? { + name: "prepend", + fn: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "prepend") + ]) + } : void 0, + _ctx.$slots.append ? { + name: "append", + fn: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "append") + ]) + } : void 0, + _ctx.$slots.prefix ? { + name: "prefix", + fn: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "prefix") + ]) + } : void 0, + _ctx.$slots.suffix ? { + name: "suffix", + fn: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "suffix") + ]) + } : void 0 + ]), 1040, ["clearable", "disabled", "name", "model-value", "onKeydown"]) + ], 14, _hoisted_1$10) + ]), + _: 3 + }, 8, ["visible", "placement", "popper-class", "teleported", "transition"]); + }; + } + }); + var Autocomplete = /* @__PURE__ */ _export_sfc(_sfc_main$21, [["__file", "autocomplete.vue"]]); + + const ElAutocomplete = withInstall(Autocomplete); + + const avatarProps = buildProps({ + size: { + type: [Number, String], + values: componentSizes, + default: "", + validator: (val) => isNumber$1(val) + }, + shape: { + type: String, + values: ["circle", "square"], + default: "circle" + }, + icon: { + type: iconPropType + }, + src: { + type: String, + default: "" + }, + alt: String, + srcSet: String, + fit: { + type: definePropType(String), + default: "cover" + } + }); + const avatarEmits = { + error: (evt) => evt instanceof Event + }; + + const _hoisted_1$$ = ["src", "alt", "srcset"]; + const __default__$1n = vue.defineComponent({ + name: "ElAvatar" + }); + const _sfc_main$20 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1n, + props: avatarProps, + emits: avatarEmits, + setup(__props, { emit }) { + const props = __props; + const ns = useNamespace("avatar"); + const hasLoadError = vue.ref(false); + const avatarClass = vue.computed(() => { + const { size, icon, shape } = props; + const classList = [ns.b()]; + if (isString$1(size)) + classList.push(ns.m(size)); + if (icon) + classList.push(ns.m("icon")); + if (shape) + classList.push(ns.m(shape)); + return classList; + }); + const sizeStyle = vue.computed(() => { + const { size } = props; + return isNumber$1(size) ? ns.cssVarBlock({ + size: addUnit(size) || "" + }) : void 0; + }); + const fitStyle = vue.computed(() => ({ + objectFit: props.fit + })); + vue.watch(() => props.src, () => hasLoadError.value = false); + function handleError(e) { + hasLoadError.value = true; + emit("error", e); + } + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("span", { + class: vue.normalizeClass(vue.unref(avatarClass)), + style: vue.normalizeStyle(vue.unref(sizeStyle)) + }, [ + (_ctx.src || _ctx.srcSet) && !hasLoadError.value ? (vue.openBlock(), vue.createElementBlock("img", { + key: 0, + src: _ctx.src, + alt: _ctx.alt, + srcset: _ctx.srcSet, + style: vue.normalizeStyle(vue.unref(fitStyle)), + onError: handleError + }, null, 44, _hoisted_1$$)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) + ]), + _: 1 + })) : vue.renderSlot(_ctx.$slots, "default", { key: 2 }) + ], 6); + }; + } + }); + var Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$20, [["__file", "avatar.vue"]]); + + const ElAvatar = withInstall(Avatar); + + const backtopProps = { + visibilityHeight: { + type: Number, + default: 200 + }, + target: { + type: String, + default: "" + }, + right: { + type: Number, + default: 40 + }, + bottom: { + type: Number, + default: 40 + } + }; + const backtopEmits = { + click: (evt) => evt instanceof MouseEvent + }; + + const useBackTop = (props, emit, componentName) => { + const el = vue.shallowRef(); + const container = vue.shallowRef(); + const visible = vue.ref(false); + const handleScroll = () => { + if (el.value) + visible.value = el.value.scrollTop >= props.visibilityHeight; + }; + const handleClick = (event) => { + var _a; + (_a = el.value) == null ? void 0 : _a.scrollTo({ top: 0, behavior: "smooth" }); + emit("click", event); + }; + const handleScrollThrottled = useThrottleFn(handleScroll, 300, true); + useEventListener(container, "scroll", handleScrollThrottled); + vue.onMounted(() => { + var _a; + container.value = document; + el.value = document.documentElement; + if (props.target) { + el.value = (_a = document.querySelector(props.target)) != null ? _a : void 0; + if (!el.value) { + throwError(componentName, `target does not exist: ${props.target}`); + } + container.value = el.value; + } + }); + return { + visible, + handleClick + }; + }; + + const COMPONENT_NAME$h = "ElBacktop"; + const __default__$1m = vue.defineComponent({ + name: COMPONENT_NAME$h + }); + const _sfc_main$1$ = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1m, + props: backtopProps, + emits: backtopEmits, + setup(__props, { emit }) { + const props = __props; + const ns = useNamespace("backtop"); + const { handleClick, visible } = useBackTop(props, emit, COMPONENT_NAME$h); + const backTopStyle = vue.computed(() => ({ + right: `${props.right}px`, + bottom: `${props.bottom}px` + })); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.Transition, { + name: `${vue.unref(ns).namespace.value}-fade-in` + }, { + default: vue.withCtx(() => [ + vue.unref(visible) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + style: vue.normalizeStyle(vue.unref(backTopStyle)), + class: vue.normalizeClass(vue.unref(ns).b()), + onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => vue.unref(handleClick) && vue.unref(handleClick)(...args), ["stop"])) + }, [ + vue.renderSlot(_ctx.$slots, "default", {}, () => [ + vue.createVNode(vue.unref(ElIcon), { + class: vue.normalizeClass(vue.unref(ns).e("icon")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(caret_top_default)) + ]), + _: 1 + }, 8, ["class"]) + ]) + ], 6)) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["name"]); + }; + } + }); + var Backtop = /* @__PURE__ */ _export_sfc(_sfc_main$1$, [["__file", "backtop.vue"]]); + + const ElBacktop = withInstall(Backtop); + + const badgeProps = buildProps({ + value: { + type: [String, Number], + default: "" + }, + max: { + type: Number, + default: 99 + }, + isDot: Boolean, + hidden: Boolean, + type: { + type: String, + values: ["primary", "success", "warning", "info", "danger"], + default: "danger" + } + }); + + const _hoisted_1$_ = ["textContent"]; + const __default__$1l = vue.defineComponent({ + name: "ElBadge" + }); + const _sfc_main$1_ = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1l, + props: badgeProps, + setup(__props, { expose }) { + const props = __props; + const ns = useNamespace("badge"); + const content = vue.computed(() => { + if (props.isDot) + return ""; + if (isNumber$1(props.value) && isNumber$1(props.max)) { + return props.max < props.value ? `${props.max}+` : `${props.value}`; + } + return `${props.value}`; + }); + expose({ + content + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(ns).b()) + }, [ + vue.renderSlot(_ctx.$slots, "default"), + vue.createVNode(vue.Transition, { + name: `${vue.unref(ns).namespace.value}-zoom-in-center`, + persisted: "" + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createElementVNode("sup", { + class: vue.normalizeClass([ + vue.unref(ns).e("content"), + vue.unref(ns).em("content", _ctx.type), + vue.unref(ns).is("fixed", !!_ctx.$slots.default), + vue.unref(ns).is("dot", _ctx.isDot) + ]), + textContent: vue.toDisplayString(vue.unref(content)) + }, null, 10, _hoisted_1$_), [ + [vue.vShow, !_ctx.hidden && (vue.unref(content) || _ctx.isDot)] + ]) + ]), + _: 1 + }, 8, ["name"]) + ], 2); + }; + } + }); + var Badge = /* @__PURE__ */ _export_sfc(_sfc_main$1_, [["__file", "badge.vue"]]); + + const ElBadge = withInstall(Badge); + + const breadcrumbKey = Symbol("breadcrumbKey"); + + const breadcrumbProps = buildProps({ + separator: { + type: String, + default: "/" + }, + separatorIcon: { + type: iconPropType + } + }); + + const __default__$1k = vue.defineComponent({ + name: "ElBreadcrumb" + }); + const _sfc_main$1Z = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1k, + props: breadcrumbProps, + setup(__props) { + const props = __props; + const ns = useNamespace("breadcrumb"); + const breadcrumb = vue.ref(); + vue.provide(breadcrumbKey, props); + vue.onMounted(() => { + const items = breadcrumb.value.querySelectorAll(`.${ns.e("item")}`); + if (items.length) { + items[items.length - 1].setAttribute("aria-current", "page"); + } + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + ref_key: "breadcrumb", + ref: breadcrumb, + class: vue.normalizeClass(vue.unref(ns).b()), + "aria-label": "Breadcrumb", + role: "navigation" + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2); + }; + } + }); + var Breadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$1Z, [["__file", "breadcrumb.vue"]]); + + const breadcrumbItemProps = buildProps({ + to: { + type: definePropType([String, Object]), + default: "" + }, + replace: { + type: Boolean, + default: false + } + }); + + const __default__$1j = vue.defineComponent({ + name: "ElBreadcrumbItem" + }); + const _sfc_main$1Y = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1j, + props: breadcrumbItemProps, + setup(__props) { + const props = __props; + const instance = vue.getCurrentInstance(); + const breadcrumbContext = vue.inject(breadcrumbKey, void 0); + const ns = useNamespace("breadcrumb"); + const { separator, separatorIcon } = vue.toRefs(breadcrumbContext); + const router = instance.appContext.config.globalProperties.$router; + const link = vue.ref(); + const onClick = () => { + if (!props.to || !router) + return; + props.replace ? router.replace(props.to) : router.push(props.to); + }; + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("span", { + class: vue.normalizeClass(vue.unref(ns).e("item")) + }, [ + vue.createElementVNode("span", { + ref_key: "link", + ref: link, + class: vue.normalizeClass([vue.unref(ns).e("inner"), vue.unref(ns).is("link", !!_ctx.to)]), + role: "link", + onClick + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2), + vue.unref(separatorIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("separator")) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(separatorIcon)))) + ]), + _: 1 + }, 8, ["class"])) : (vue.openBlock(), vue.createElementBlock("span", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("separator")), + role: "presentation" + }, vue.toDisplayString(vue.unref(separator)), 3)) + ], 2); + }; + } + }); + var BreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$1Y, [["__file", "breadcrumb-item.vue"]]); + + const ElBreadcrumb = withInstall(Breadcrumb, { + BreadcrumbItem + }); + const ElBreadcrumbItem = withNoopInstall(BreadcrumbItem); + + const buttonGroupContextKey = Symbol("buttonGroupContextKey"); + + const useButton = (props, emit) => { + useDeprecated({ + from: "type.text", + replacement: "link", + version: "3.0.0", + scope: "props", + ref: "https://element-plus.org/en-US/component/button.html#button-attributes" + }, vue.computed(() => props.type === "text")); + const buttonGroupContext = vue.inject(buttonGroupContextKey, void 0); + const globalConfig = useGlobalConfig("button"); + const { form } = useFormItem(); + const _size = useFormSize(vue.computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size)); + const _disabled = useFormDisabled(); + const _ref = vue.ref(); + const slots = vue.useSlots(); + const _type = vue.computed(() => props.type || (buttonGroupContext == null ? void 0 : buttonGroupContext.type) || ""); + const autoInsertSpace = vue.computed(() => { + var _a, _b, _c; + return (_c = (_b = props.autoInsertSpace) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.autoInsertSpace) != null ? _c : false; + }); + const shouldAddSpace = vue.computed(() => { + var _a; + const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots); + if (autoInsertSpace.value && (defaultSlot == null ? void 0 : defaultSlot.length) === 1) { + const slot = defaultSlot[0]; + if ((slot == null ? void 0 : slot.type) === vue.Text) { + const text = slot.children; + return /^\p{Unified_Ideograph}{2}$/u.test(text.trim()); + } + } + return false; + }); + const handleClick = (evt) => { + if (props.nativeType === "reset") { + form == null ? void 0 : form.resetFields(); + } + emit("click", evt); + }; + return { + _disabled, + _size, + _type, + _ref, + shouldAddSpace, + handleClick + }; + }; + + const buttonTypes = [ + "default", + "primary", + "success", + "warning", + "info", + "danger", + "text", + "" + ]; + const buttonNativeTypes = ["button", "submit", "reset"]; + const buttonProps = buildProps({ + size: useSizeProp, + disabled: Boolean, + type: { + type: String, + values: buttonTypes, + default: "" + }, + icon: { + type: iconPropType + }, + nativeType: { + type: String, + values: buttonNativeTypes, + default: "button" + }, + loading: Boolean, + loadingIcon: { + type: iconPropType, + default: () => loading_default + }, + plain: Boolean, + text: Boolean, + link: Boolean, + bg: Boolean, + autofocus: Boolean, + round: Boolean, + circle: Boolean, + color: String, + dark: Boolean, + autoInsertSpace: { + type: Boolean, + default: void 0 + } + }); + const buttonEmits = { + click: (evt) => evt instanceof MouseEvent + }; + + function bound01$1(n, max) { + if (isOnePointZero$1(n)) { + n = "100%"; + } + var isPercent = isPercentage$1(n); + n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n))); + if (isPercent) { + n = parseInt(String(n * max), 10) / 100; + } + if (Math.abs(n - max) < 1e-6) { + return 1; + } + if (max === 360) { + n = (n < 0 ? n % max + max : n % max) / parseFloat(String(max)); + } else { + n = n % max / parseFloat(String(max)); + } + return n; + } + function clamp01(val) { + return Math.min(1, Math.max(0, val)); + } + function isOnePointZero$1(n) { + return typeof n === "string" && n.indexOf(".") !== -1 && parseFloat(n) === 1; + } + function isPercentage$1(n) { + return typeof n === "string" && n.indexOf("%") !== -1; + } + function boundAlpha(a) { + a = parseFloat(a); + if (isNaN(a) || a < 0 || a > 1) { + a = 1; + } + return a; + } + function convertToPercentage(n) { + if (n <= 1) { + return "".concat(Number(n) * 100, "%"); + } + return n; + } + function pad2(c) { + return c.length === 1 ? "0" + c : String(c); + } + + function rgbToRgb(r, g, b) { + return { + r: bound01$1(r, 255) * 255, + g: bound01$1(g, 255) * 255, + b: bound01$1(b, 255) * 255 + }; + } + function rgbToHsl(r, g, b) { + r = bound01$1(r, 255); + g = bound01$1(g, 255); + b = bound01$1(b, 255); + var max = Math.max(r, g, b); + var min = Math.min(r, g, b); + var h = 0; + var s = 0; + var l = (max + min) / 2; + if (max === min) { + s = 0; + h = 0; + } else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } + return { h, s, l }; + } + function hue2rgb(p, q, t) { + if (t < 0) { + t += 1; + } + if (t > 1) { + t -= 1; + } + if (t < 1 / 6) { + return p + (q - p) * (6 * t); + } + if (t < 1 / 2) { + return q; + } + if (t < 2 / 3) { + return p + (q - p) * (2 / 3 - t) * 6; + } + return p; + } + function hslToRgb(h, s, l) { + var r; + var g; + var b; + h = bound01$1(h, 360); + s = bound01$1(s, 100); + l = bound01$1(l, 100); + if (s === 0) { + g = l; + b = l; + r = l; + } else { + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } + return { r: r * 255, g: g * 255, b: b * 255 }; + } + function rgbToHsv(r, g, b) { + r = bound01$1(r, 255); + g = bound01$1(g, 255); + b = bound01$1(b, 255); + var max = Math.max(r, g, b); + var min = Math.min(r, g, b); + var h = 0; + var v = max; + var d = max - min; + var s = max === 0 ? 0 : d / max; + if (max === min) { + h = 0; + } else { + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } + return { h, s, v }; + } + function hsvToRgb(h, s, v) { + h = bound01$1(h, 360) * 6; + s = bound01$1(s, 100); + v = bound01$1(v, 100); + var i = Math.floor(h); + var f = h - i; + var p = v * (1 - s); + var q = v * (1 - f * s); + var t = v * (1 - (1 - f) * s); + var mod = i % 6; + var r = [v, q, p, p, t, v][mod]; + var g = [t, v, v, q, p, p][mod]; + var b = [p, p, t, v, v, q][mod]; + return { r: r * 255, g: g * 255, b: b * 255 }; + } + function rgbToHex(r, g, b, allow3Char) { + var hex = [ + pad2(Math.round(r).toString(16)), + pad2(Math.round(g).toString(16)), + pad2(Math.round(b).toString(16)) + ]; + if (allow3Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1))) { + return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); + } + return hex.join(""); + } + function rgbaToHex(r, g, b, a, allow4Char) { + var hex = [ + pad2(Math.round(r).toString(16)), + pad2(Math.round(g).toString(16)), + pad2(Math.round(b).toString(16)), + pad2(convertDecimalToHex(a)) + ]; + if (allow4Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1)) && hex[3].startsWith(hex[3].charAt(1))) { + return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); + } + return hex.join(""); + } + function convertDecimalToHex(d) { + return Math.round(parseFloat(d) * 255).toString(16); + } + function convertHexToDecimal(h) { + return parseIntFromHex(h) / 255; + } + function parseIntFromHex(val) { + return parseInt(val, 16); + } + function numberInputToObject(color) { + return { + r: color >> 16, + g: (color & 65280) >> 8, + b: color & 255 + }; + } + + var names = { + aliceblue: "#f0f8ff", + antiquewhite: "#faebd7", + aqua: "#00ffff", + aquamarine: "#7fffd4", + azure: "#f0ffff", + beige: "#f5f5dc", + bisque: "#ffe4c4", + black: "#000000", + blanchedalmond: "#ffebcd", + blue: "#0000ff", + blueviolet: "#8a2be2", + brown: "#a52a2a", + burlywood: "#deb887", + cadetblue: "#5f9ea0", + chartreuse: "#7fff00", + chocolate: "#d2691e", + coral: "#ff7f50", + cornflowerblue: "#6495ed", + cornsilk: "#fff8dc", + crimson: "#dc143c", + cyan: "#00ffff", + darkblue: "#00008b", + darkcyan: "#008b8b", + darkgoldenrod: "#b8860b", + darkgray: "#a9a9a9", + darkgreen: "#006400", + darkgrey: "#a9a9a9", + darkkhaki: "#bdb76b", + darkmagenta: "#8b008b", + darkolivegreen: "#556b2f", + darkorange: "#ff8c00", + darkorchid: "#9932cc", + darkred: "#8b0000", + darksalmon: "#e9967a", + darkseagreen: "#8fbc8f", + darkslateblue: "#483d8b", + darkslategray: "#2f4f4f", + darkslategrey: "#2f4f4f", + darkturquoise: "#00ced1", + darkviolet: "#9400d3", + deeppink: "#ff1493", + deepskyblue: "#00bfff", + dimgray: "#696969", + dimgrey: "#696969", + dodgerblue: "#1e90ff", + firebrick: "#b22222", + floralwhite: "#fffaf0", + forestgreen: "#228b22", + fuchsia: "#ff00ff", + gainsboro: "#dcdcdc", + ghostwhite: "#f8f8ff", + goldenrod: "#daa520", + gold: "#ffd700", + gray: "#808080", + green: "#008000", + greenyellow: "#adff2f", + grey: "#808080", + honeydew: "#f0fff0", + hotpink: "#ff69b4", + indianred: "#cd5c5c", + indigo: "#4b0082", + ivory: "#fffff0", + khaki: "#f0e68c", + lavenderblush: "#fff0f5", + lavender: "#e6e6fa", + lawngreen: "#7cfc00", + lemonchiffon: "#fffacd", + lightblue: "#add8e6", + lightcoral: "#f08080", + lightcyan: "#e0ffff", + lightgoldenrodyellow: "#fafad2", + lightgray: "#d3d3d3", + lightgreen: "#90ee90", + lightgrey: "#d3d3d3", + lightpink: "#ffb6c1", + lightsalmon: "#ffa07a", + lightseagreen: "#20b2aa", + lightskyblue: "#87cefa", + lightslategray: "#778899", + lightslategrey: "#778899", + lightsteelblue: "#b0c4de", + lightyellow: "#ffffe0", + lime: "#00ff00", + limegreen: "#32cd32", + linen: "#faf0e6", + magenta: "#ff00ff", + maroon: "#800000", + mediumaquamarine: "#66cdaa", + mediumblue: "#0000cd", + mediumorchid: "#ba55d3", + mediumpurple: "#9370db", + mediumseagreen: "#3cb371", + mediumslateblue: "#7b68ee", + mediumspringgreen: "#00fa9a", + mediumturquoise: "#48d1cc", + mediumvioletred: "#c71585", + midnightblue: "#191970", + mintcream: "#f5fffa", + mistyrose: "#ffe4e1", + moccasin: "#ffe4b5", + navajowhite: "#ffdead", + navy: "#000080", + oldlace: "#fdf5e6", + olive: "#808000", + olivedrab: "#6b8e23", + orange: "#ffa500", + orangered: "#ff4500", + orchid: "#da70d6", + palegoldenrod: "#eee8aa", + palegreen: "#98fb98", + paleturquoise: "#afeeee", + palevioletred: "#db7093", + papayawhip: "#ffefd5", + peachpuff: "#ffdab9", + peru: "#cd853f", + pink: "#ffc0cb", + plum: "#dda0dd", + powderblue: "#b0e0e6", + purple: "#800080", + rebeccapurple: "#663399", + red: "#ff0000", + rosybrown: "#bc8f8f", + royalblue: "#4169e1", + saddlebrown: "#8b4513", + salmon: "#fa8072", + sandybrown: "#f4a460", + seagreen: "#2e8b57", + seashell: "#fff5ee", + sienna: "#a0522d", + silver: "#c0c0c0", + skyblue: "#87ceeb", + slateblue: "#6a5acd", + slategray: "#708090", + slategrey: "#708090", + snow: "#fffafa", + springgreen: "#00ff7f", + steelblue: "#4682b4", + tan: "#d2b48c", + teal: "#008080", + thistle: "#d8bfd8", + tomato: "#ff6347", + turquoise: "#40e0d0", + violet: "#ee82ee", + wheat: "#f5deb3", + white: "#ffffff", + whitesmoke: "#f5f5f5", + yellow: "#ffff00", + yellowgreen: "#9acd32" + }; + + function inputToRGB(color) { + var rgb = { r: 0, g: 0, b: 0 }; + var a = 1; + var s = null; + var v = null; + var l = null; + var ok = false; + var format = false; + if (typeof color === "string") { + color = stringInputToObject(color); + } + if (typeof color === "object") { + if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { + rgb = rgbToRgb(color.r, color.g, color.b); + ok = true; + format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; + } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { + s = convertToPercentage(color.s); + v = convertToPercentage(color.v); + rgb = hsvToRgb(color.h, s, v); + ok = true; + format = "hsv"; + } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { + s = convertToPercentage(color.s); + l = convertToPercentage(color.l); + rgb = hslToRgb(color.h, s, l); + ok = true; + format = "hsl"; + } + if (Object.prototype.hasOwnProperty.call(color, "a")) { + a = color.a; + } + } + a = boundAlpha(a); + return { + ok, + format: color.format || format, + r: Math.min(255, Math.max(rgb.r, 0)), + g: Math.min(255, Math.max(rgb.g, 0)), + b: Math.min(255, Math.max(rgb.b, 0)), + a + }; + } + var CSS_INTEGER = "[-\\+]?\\d+%?"; + var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; + var CSS_UNIT = "(?:".concat(CSS_NUMBER, ")|(?:").concat(CSS_INTEGER, ")"); + var PERMISSIVE_MATCH3 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?"); + var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?"); + var matchers = { + CSS_UNIT: new RegExp(CSS_UNIT), + rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), + rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), + hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), + hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), + hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), + hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), + hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, + hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, + hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, + hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ + }; + function stringInputToObject(color) { + color = color.trim().toLowerCase(); + if (color.length === 0) { + return false; + } + var named = false; + if (names[color]) { + color = names[color]; + named = true; + } else if (color === "transparent") { + return { r: 0, g: 0, b: 0, a: 0, format: "name" }; + } + var match = matchers.rgb.exec(color); + if (match) { + return { r: match[1], g: match[2], b: match[3] }; + } + match = matchers.rgba.exec(color); + if (match) { + return { r: match[1], g: match[2], b: match[3], a: match[4] }; + } + match = matchers.hsl.exec(color); + if (match) { + return { h: match[1], s: match[2], l: match[3] }; + } + match = matchers.hsla.exec(color); + if (match) { + return { h: match[1], s: match[2], l: match[3], a: match[4] }; + } + match = matchers.hsv.exec(color); + if (match) { + return { h: match[1], s: match[2], v: match[3] }; + } + match = matchers.hsva.exec(color); + if (match) { + return { h: match[1], s: match[2], v: match[3], a: match[4] }; + } + match = matchers.hex8.exec(color); + if (match) { + return { + r: parseIntFromHex(match[1]), + g: parseIntFromHex(match[2]), + b: parseIntFromHex(match[3]), + a: convertHexToDecimal(match[4]), + format: named ? "name" : "hex8" + }; + } + match = matchers.hex6.exec(color); + if (match) { + return { + r: parseIntFromHex(match[1]), + g: parseIntFromHex(match[2]), + b: parseIntFromHex(match[3]), + format: named ? "name" : "hex" + }; + } + match = matchers.hex4.exec(color); + if (match) { + return { + r: parseIntFromHex(match[1] + match[1]), + g: parseIntFromHex(match[2] + match[2]), + b: parseIntFromHex(match[3] + match[3]), + a: convertHexToDecimal(match[4] + match[4]), + format: named ? "name" : "hex8" + }; + } + match = matchers.hex3.exec(color); + if (match) { + return { + r: parseIntFromHex(match[1] + match[1]), + g: parseIntFromHex(match[2] + match[2]), + b: parseIntFromHex(match[3] + match[3]), + format: named ? "name" : "hex" + }; + } + return false; + } + function isValidCSSUnit(color) { + return Boolean(matchers.CSS_UNIT.exec(String(color))); + } + + var TinyColor = function() { + function TinyColor2(color, opts) { + if (color === void 0) { + color = ""; + } + if (opts === void 0) { + opts = {}; + } + var _a; + if (color instanceof TinyColor2) { + return color; + } + if (typeof color === "number") { + color = numberInputToObject(color); + } + this.originalInput = color; + var rgb = inputToRGB(color); + this.originalInput = color; + this.r = rgb.r; + this.g = rgb.g; + this.b = rgb.b; + this.a = rgb.a; + this.roundA = Math.round(100 * this.a) / 100; + this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format; + this.gradientType = opts.gradientType; + if (this.r < 1) { + this.r = Math.round(this.r); + } + if (this.g < 1) { + this.g = Math.round(this.g); + } + if (this.b < 1) { + this.b = Math.round(this.b); + } + this.isValid = rgb.ok; + } + TinyColor2.prototype.isDark = function() { + return this.getBrightness() < 128; + }; + TinyColor2.prototype.isLight = function() { + return !this.isDark(); + }; + TinyColor2.prototype.getBrightness = function() { + var rgb = this.toRgb(); + return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3; + }; + TinyColor2.prototype.getLuminance = function() { + var rgb = this.toRgb(); + var R; + var G; + var B; + var RsRGB = rgb.r / 255; + var GsRGB = rgb.g / 255; + var BsRGB = rgb.b / 255; + if (RsRGB <= 0.03928) { + R = RsRGB / 12.92; + } else { + R = Math.pow((RsRGB + 0.055) / 1.055, 2.4); + } + if (GsRGB <= 0.03928) { + G = GsRGB / 12.92; + } else { + G = Math.pow((GsRGB + 0.055) / 1.055, 2.4); + } + if (BsRGB <= 0.03928) { + B = BsRGB / 12.92; + } else { + B = Math.pow((BsRGB + 0.055) / 1.055, 2.4); + } + return 0.2126 * R + 0.7152 * G + 0.0722 * B; + }; + TinyColor2.prototype.getAlpha = function() { + return this.a; + }; + TinyColor2.prototype.setAlpha = function(alpha) { + this.a = boundAlpha(alpha); + this.roundA = Math.round(100 * this.a) / 100; + return this; + }; + TinyColor2.prototype.toHsv = function() { + var hsv = rgbToHsv(this.r, this.g, this.b); + return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a }; + }; + TinyColor2.prototype.toHsvString = function() { + var hsv = rgbToHsv(this.r, this.g, this.b); + var h = Math.round(hsv.h * 360); + var s = Math.round(hsv.s * 100); + var v = Math.round(hsv.v * 100); + return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")"); + }; + TinyColor2.prototype.toHsl = function() { + var hsl = rgbToHsl(this.r, this.g, this.b); + return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a }; + }; + TinyColor2.prototype.toHslString = function() { + var hsl = rgbToHsl(this.r, this.g, this.b); + var h = Math.round(hsl.h * 360); + var s = Math.round(hsl.s * 100); + var l = Math.round(hsl.l * 100); + return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(this.roundA, ")"); + }; + TinyColor2.prototype.toHex = function(allow3Char) { + if (allow3Char === void 0) { + allow3Char = false; + } + return rgbToHex(this.r, this.g, this.b, allow3Char); + }; + TinyColor2.prototype.toHexString = function(allow3Char) { + if (allow3Char === void 0) { + allow3Char = false; + } + return "#" + this.toHex(allow3Char); + }; + TinyColor2.prototype.toHex8 = function(allow4Char) { + if (allow4Char === void 0) { + allow4Char = false; + } + return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char); + }; + TinyColor2.prototype.toHex8String = function(allow4Char) { + if (allow4Char === void 0) { + allow4Char = false; + } + return "#" + this.toHex8(allow4Char); + }; + TinyColor2.prototype.toRgb = function() { + return { + r: Math.round(this.r), + g: Math.round(this.g), + b: Math.round(this.b), + a: this.a + }; + }; + TinyColor2.prototype.toRgbString = function() { + var r = Math.round(this.r); + var g = Math.round(this.g); + var b = Math.round(this.b); + return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(this.roundA, ")"); + }; + TinyColor2.prototype.toPercentageRgb = function() { + var fmt = function(x) { + return "".concat(Math.round(bound01$1(x, 255) * 100), "%"); + }; + return { + r: fmt(this.r), + g: fmt(this.g), + b: fmt(this.b), + a: this.a + }; + }; + TinyColor2.prototype.toPercentageRgbString = function() { + var rnd = function(x) { + return Math.round(bound01$1(x, 255) * 100); + }; + return this.a === 1 ? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)") : "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")"); + }; + TinyColor2.prototype.toName = function() { + if (this.a === 0) { + return "transparent"; + } + if (this.a < 1) { + return false; + } + var hex = "#" + rgbToHex(this.r, this.g, this.b, false); + for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) { + var _b = _a[_i], key = _b[0], value = _b[1]; + if (hex === value) { + return key; + } + } + return false; + }; + TinyColor2.prototype.toString = function(format) { + var formatSet = Boolean(format); + format = format !== null && format !== void 0 ? format : this.format; + var formattedString = false; + var hasAlpha = this.a < 1 && this.a >= 0; + var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith("hex") || format === "name"); + if (needsAlphaFormat) { + if (format === "name" && this.a === 0) { + return this.toName(); + } + return this.toRgbString(); + } + if (format === "rgb") { + formattedString = this.toRgbString(); + } + if (format === "prgb") { + formattedString = this.toPercentageRgbString(); + } + if (format === "hex" || format === "hex6") { + formattedString = this.toHexString(); + } + if (format === "hex3") { + formattedString = this.toHexString(true); + } + if (format === "hex4") { + formattedString = this.toHex8String(true); + } + if (format === "hex8") { + formattedString = this.toHex8String(); + } + if (format === "name") { + formattedString = this.toName(); + } + if (format === "hsl") { + formattedString = this.toHslString(); + } + if (format === "hsv") { + formattedString = this.toHsvString(); + } + return formattedString || this.toHexString(); + }; + TinyColor2.prototype.toNumber = function() { + return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b); + }; + TinyColor2.prototype.clone = function() { + return new TinyColor2(this.toString()); + }; + TinyColor2.prototype.lighten = function(amount) { + if (amount === void 0) { + amount = 10; + } + var hsl = this.toHsl(); + hsl.l += amount / 100; + hsl.l = clamp01(hsl.l); + return new TinyColor2(hsl); + }; + TinyColor2.prototype.brighten = function(amount) { + if (amount === void 0) { + amount = 10; + } + var rgb = this.toRgb(); + rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100)))); + rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100)))); + rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100)))); + return new TinyColor2(rgb); + }; + TinyColor2.prototype.darken = function(amount) { + if (amount === void 0) { + amount = 10; + } + var hsl = this.toHsl(); + hsl.l -= amount / 100; + hsl.l = clamp01(hsl.l); + return new TinyColor2(hsl); + }; + TinyColor2.prototype.tint = function(amount) { + if (amount === void 0) { + amount = 10; + } + return this.mix("white", amount); + }; + TinyColor2.prototype.shade = function(amount) { + if (amount === void 0) { + amount = 10; + } + return this.mix("black", amount); + }; + TinyColor2.prototype.desaturate = function(amount) { + if (amount === void 0) { + amount = 10; + } + var hsl = this.toHsl(); + hsl.s -= amount / 100; + hsl.s = clamp01(hsl.s); + return new TinyColor2(hsl); + }; + TinyColor2.prototype.saturate = function(amount) { + if (amount === void 0) { + amount = 10; + } + var hsl = this.toHsl(); + hsl.s += amount / 100; + hsl.s = clamp01(hsl.s); + return new TinyColor2(hsl); + }; + TinyColor2.prototype.greyscale = function() { + return this.desaturate(100); + }; + TinyColor2.prototype.spin = function(amount) { + var hsl = this.toHsl(); + var hue = (hsl.h + amount) % 360; + hsl.h = hue < 0 ? 360 + hue : hue; + return new TinyColor2(hsl); + }; + TinyColor2.prototype.mix = function(color, amount) { + if (amount === void 0) { + amount = 50; + } + var rgb1 = this.toRgb(); + var rgb2 = new TinyColor2(color).toRgb(); + var p = amount / 100; + var rgba = { + r: (rgb2.r - rgb1.r) * p + rgb1.r, + g: (rgb2.g - rgb1.g) * p + rgb1.g, + b: (rgb2.b - rgb1.b) * p + rgb1.b, + a: (rgb2.a - rgb1.a) * p + rgb1.a + }; + return new TinyColor2(rgba); + }; + TinyColor2.prototype.analogous = function(results, slices) { + if (results === void 0) { + results = 6; + } + if (slices === void 0) { + slices = 30; + } + var hsl = this.toHsl(); + var part = 360 / slices; + var ret = [this]; + for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; ) { + hsl.h = (hsl.h + part) % 360; + ret.push(new TinyColor2(hsl)); + } + return ret; + }; + TinyColor2.prototype.complement = function() { + var hsl = this.toHsl(); + hsl.h = (hsl.h + 180) % 360; + return new TinyColor2(hsl); + }; + TinyColor2.prototype.monochromatic = function(results) { + if (results === void 0) { + results = 6; + } + var hsv = this.toHsv(); + var h = hsv.h; + var s = hsv.s; + var v = hsv.v; + var res = []; + var modification = 1 / results; + while (results--) { + res.push(new TinyColor2({ h, s, v })); + v = (v + modification) % 1; + } + return res; + }; + TinyColor2.prototype.splitcomplement = function() { + var hsl = this.toHsl(); + var h = hsl.h; + return [ + this, + new TinyColor2({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }), + new TinyColor2({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }) + ]; + }; + TinyColor2.prototype.onBackground = function(background) { + var fg = this.toRgb(); + var bg = new TinyColor2(background).toRgb(); + return new TinyColor2({ + r: bg.r + (fg.r - bg.r) * fg.a, + g: bg.g + (fg.g - bg.g) * fg.a, + b: bg.b + (fg.b - bg.b) * fg.a + }); + }; + TinyColor2.prototype.triad = function() { + return this.polyad(3); + }; + TinyColor2.prototype.tetrad = function() { + return this.polyad(4); + }; + TinyColor2.prototype.polyad = function(n) { + var hsl = this.toHsl(); + var h = hsl.h; + var result = [this]; + var increment = 360 / n; + for (var i = 1; i < n; i++) { + result.push(new TinyColor2({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l })); + } + return result; + }; + TinyColor2.prototype.equals = function(color) { + return this.toRgbString() === new TinyColor2(color).toRgbString(); + }; + return TinyColor2; + }(); + + function darken(color, amount = 20) { + return color.mix("#141414", amount).toString(); + } + function useButtonCustomStyle(props) { + const _disabled = useFormDisabled(); + const ns = useNamespace("button"); + return vue.computed(() => { + let styles = {}; + const buttonColor = props.color; + if (buttonColor) { + const color = new TinyColor(buttonColor); + const activeBgColor = props.dark ? color.tint(20).toString() : darken(color, 20); + if (props.plain) { + styles = ns.cssVarBlock({ + "bg-color": props.dark ? darken(color, 90) : color.tint(90).toString(), + "text-color": buttonColor, + "border-color": props.dark ? darken(color, 50) : color.tint(50).toString(), + "hover-text-color": `var(${ns.cssVarName("color-white")})`, + "hover-bg-color": buttonColor, + "hover-border-color": buttonColor, + "active-bg-color": activeBgColor, + "active-text-color": `var(${ns.cssVarName("color-white")})`, + "active-border-color": activeBgColor + }); + if (_disabled.value) { + styles[ns.cssVarBlockName("disabled-bg-color")] = props.dark ? darken(color, 90) : color.tint(90).toString(); + styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? darken(color, 50) : color.tint(50).toString(); + styles[ns.cssVarBlockName("disabled-border-color")] = props.dark ? darken(color, 80) : color.tint(80).toString(); + } + } else { + const hoverBgColor = props.dark ? darken(color, 30) : color.tint(30).toString(); + const textColor = color.isDark() ? `var(${ns.cssVarName("color-white")})` : `var(${ns.cssVarName("color-black")})`; + styles = ns.cssVarBlock({ + "bg-color": buttonColor, + "text-color": textColor, + "border-color": buttonColor, + "hover-bg-color": hoverBgColor, + "hover-text-color": textColor, + "hover-border-color": hoverBgColor, + "active-bg-color": activeBgColor, + "active-border-color": activeBgColor + }); + if (_disabled.value) { + const disabledButtonColor = props.dark ? darken(color, 50) : color.tint(50).toString(); + styles[ns.cssVarBlockName("disabled-bg-color")] = disabledButtonColor; + styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? "rgba(255, 255, 255, 0.5)" : `var(${ns.cssVarName("color-white")})`; + styles[ns.cssVarBlockName("disabled-border-color")] = disabledButtonColor; + } + } + } + return styles; + }); + } + + const _hoisted_1$Z = ["aria-disabled", "disabled", "autofocus", "type"]; + const __default__$1i = vue.defineComponent({ + name: "ElButton" + }); + const _sfc_main$1X = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1i, + props: buttonProps, + emits: buttonEmits, + setup(__props, { expose, emit }) { + const props = __props; + const buttonStyle = useButtonCustomStyle(props); + const ns = useNamespace("button"); + const { _ref, _size, _type, _disabled, shouldAddSpace, handleClick } = useButton(props, emit); + expose({ + ref: _ref, + size: _size, + type: _type, + disabled: _disabled, + shouldAddSpace + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("button", { + ref_key: "_ref", + ref: _ref, + class: vue.normalizeClass([ + vue.unref(ns).b(), + vue.unref(ns).m(vue.unref(_type)), + vue.unref(ns).m(vue.unref(_size)), + vue.unref(ns).is("disabled", vue.unref(_disabled)), + vue.unref(ns).is("loading", _ctx.loading), + vue.unref(ns).is("plain", _ctx.plain), + vue.unref(ns).is("round", _ctx.round), + vue.unref(ns).is("circle", _ctx.circle), + vue.unref(ns).is("text", _ctx.text), + vue.unref(ns).is("link", _ctx.link), + vue.unref(ns).is("has-bg", _ctx.bg) + ]), + "aria-disabled": vue.unref(_disabled) || _ctx.loading, + disabled: vue.unref(_disabled) || _ctx.loading, + autofocus: _ctx.autofocus, + type: _ctx.nativeType, + style: vue.normalizeStyle(vue.unref(buttonStyle)), + onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleClick) && vue.unref(handleClick)(...args)) + }, [ + _ctx.loading ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + _ctx.$slots.loading ? vue.renderSlot(_ctx.$slots, "loading", { key: 0 }) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 1, + class: vue.normalizeClass(vue.unref(ns).is("loading")) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.loadingIcon))) + ]), + _: 1 + }, 8, ["class"])) + ], 64)) : _ctx.icon || _ctx.$slots.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, { + default: vue.withCtx(() => [ + _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon), { key: 0 })) : vue.renderSlot(_ctx.$slots, "icon", { key: 1 }) + ]), + _: 3 + })) : vue.createCommentVNode("v-if", true), + _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", { + key: 2, + class: vue.normalizeClass({ [vue.unref(ns).em("text", "expand")]: vue.unref(shouldAddSpace) }) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2)) : vue.createCommentVNode("v-if", true) + ], 14, _hoisted_1$Z); + }; + } + }); + var Button = /* @__PURE__ */ _export_sfc(_sfc_main$1X, [["__file", "button.vue"]]); + + const buttonGroupProps = { + size: buttonProps.size, + type: buttonProps.type + }; + + const __default__$1h = vue.defineComponent({ + name: "ElButtonGroup" + }); + const _sfc_main$1W = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1h, + props: buttonGroupProps, + setup(__props) { + const props = __props; + vue.provide(buttonGroupContextKey, vue.reactive({ + size: vue.toRef(props, "size"), + type: vue.toRef(props, "type") + })); + const ns = useNamespace("button"); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(`${vue.unref(ns).b("group")}`) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2); + }; + } + }); + var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1W, [["__file", "button-group.vue"]]); + + const ElButton = withInstall(Button, { + ButtonGroup + }); + const ElButtonGroup$1 = withNoopInstall(ButtonGroup); + + var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; + + var dayjs_min = {exports: {}}; + + (function(module, exports) { + !function(t, e) { + module.exports = e() ; + }(commonjsGlobal, function() { + var t = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", f = "month", h = "quarter", c = "year", d = "date", $ = "Invalid Date", l = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_") }, m = function(t2, e2, n2) { + var r2 = String(t2); + return !r2 || r2.length >= e2 ? t2 : "" + Array(e2 + 1 - r2.length).join(n2) + t2; + }, g = { s: m, z: function(t2) { + var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r2 = Math.floor(n2 / 60), i2 = n2 % 60; + return (e2 <= 0 ? "+" : "-") + m(r2, 2, "0") + ":" + m(i2, 2, "0"); + }, m: function t2(e2, n2) { + if (e2.date() < n2.date()) + return -t2(n2, e2); + var r2 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r2, f), s2 = n2 - i2 < 0, u2 = e2.clone().add(r2 + (s2 ? -1 : 1), f); + return +(-(r2 + (n2 - i2) / (s2 ? i2 - u2 : u2 - i2)) || 0); + }, a: function(t2) { + return t2 < 0 ? Math.ceil(t2) || 0 : Math.floor(t2); + }, p: function(t2) { + return { M: f, y: c, w: o, d: a, D: d, h: u, m: s, s: i, ms: r, Q: h }[t2] || String(t2 || "").toLowerCase().replace(/s$/, ""); + }, u: function(t2) { + return t2 === void 0; + } }, v = "en", D = {}; + D[v] = M; + var p = function(t2) { + return t2 instanceof _; + }, S = function t2(e2, n2, r2) { + var i2; + if (!e2) + return v; + if (typeof e2 == "string") { + var s2 = e2.toLowerCase(); + D[s2] && (i2 = s2), n2 && (D[s2] = n2, i2 = s2); + var u2 = e2.split("-"); + if (!i2 && u2.length > 1) + return t2(u2[0]); + } else { + var a2 = e2.name; + D[a2] = e2, i2 = a2; + } + return !r2 && i2 && (v = i2), i2 || !r2 && v; + }, w = function(t2, e2) { + if (p(t2)) + return t2.clone(); + var n2 = typeof e2 == "object" ? e2 : {}; + return n2.date = t2, n2.args = arguments, new _(n2); + }, O = g; + O.l = S, O.i = p, O.w = function(t2, e2) { + return w(t2, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset }); + }; + var _ = function() { + function M2(t2) { + this.$L = S(t2.locale, null, true), this.parse(t2); + } + var m2 = M2.prototype; + return m2.parse = function(t2) { + this.$d = function(t3) { + var e2 = t3.date, n2 = t3.utc; + if (e2 === null) + return new Date(NaN); + if (O.u(e2)) + return new Date(); + if (e2 instanceof Date) + return new Date(e2); + if (typeof e2 == "string" && !/Z$/i.test(e2)) { + var r2 = e2.match(l); + if (r2) { + var i2 = r2[2] - 1 || 0, s2 = (r2[7] || "0").substring(0, 3); + return n2 ? new Date(Date.UTC(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2)) : new Date(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2); + } + } + return new Date(e2); + }(t2), this.$x = t2.x || {}, this.init(); + }, m2.init = function() { + var t2 = this.$d; + this.$y = t2.getFullYear(), this.$M = t2.getMonth(), this.$D = t2.getDate(), this.$W = t2.getDay(), this.$H = t2.getHours(), this.$m = t2.getMinutes(), this.$s = t2.getSeconds(), this.$ms = t2.getMilliseconds(); + }, m2.$utils = function() { + return O; + }, m2.isValid = function() { + return !(this.$d.toString() === $); + }, m2.isSame = function(t2, e2) { + var n2 = w(t2); + return this.startOf(e2) <= n2 && n2 <= this.endOf(e2); + }, m2.isAfter = function(t2, e2) { + return w(t2) < this.startOf(e2); + }, m2.isBefore = function(t2, e2) { + return this.endOf(e2) < w(t2); + }, m2.$g = function(t2, e2, n2) { + return O.u(t2) ? this[e2] : this.set(n2, t2); + }, m2.unix = function() { + return Math.floor(this.valueOf() / 1e3); + }, m2.valueOf = function() { + return this.$d.getTime(); + }, m2.startOf = function(t2, e2) { + var n2 = this, r2 = !!O.u(e2) || e2, h2 = O.p(t2), $2 = function(t3, e3) { + var i2 = O.w(n2.$u ? Date.UTC(n2.$y, e3, t3) : new Date(n2.$y, e3, t3), n2); + return r2 ? i2 : i2.endOf(a); + }, l2 = function(t3, e3) { + return O.w(n2.toDate()[t3].apply(n2.toDate("s"), (r2 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2); + }, y2 = this.$W, M3 = this.$M, m3 = this.$D, g2 = "set" + (this.$u ? "UTC" : ""); + switch (h2) { + case c: + return r2 ? $2(1, 0) : $2(31, 11); + case f: + return r2 ? $2(1, M3) : $2(0, M3 + 1); + case o: + var v2 = this.$locale().weekStart || 0, D2 = (y2 < v2 ? y2 + 7 : y2) - v2; + return $2(r2 ? m3 - D2 : m3 + (6 - D2), M3); + case a: + case d: + return l2(g2 + "Hours", 0); + case u: + return l2(g2 + "Minutes", 1); + case s: + return l2(g2 + "Seconds", 2); + case i: + return l2(g2 + "Milliseconds", 3); + default: + return this.clone(); + } + }, m2.endOf = function(t2) { + return this.startOf(t2, false); + }, m2.$set = function(t2, e2) { + var n2, o2 = O.p(t2), h2 = "set" + (this.$u ? "UTC" : ""), $2 = (n2 = {}, n2[a] = h2 + "Date", n2[d] = h2 + "Date", n2[f] = h2 + "Month", n2[c] = h2 + "FullYear", n2[u] = h2 + "Hours", n2[s] = h2 + "Minutes", n2[i] = h2 + "Seconds", n2[r] = h2 + "Milliseconds", n2)[o2], l2 = o2 === a ? this.$D + (e2 - this.$W) : e2; + if (o2 === f || o2 === c) { + var y2 = this.clone().set(d, 1); + y2.$d[$2](l2), y2.init(), this.$d = y2.set(d, Math.min(this.$D, y2.daysInMonth())).$d; + } else + $2 && this.$d[$2](l2); + return this.init(), this; + }, m2.set = function(t2, e2) { + return this.clone().$set(t2, e2); + }, m2.get = function(t2) { + return this[O.p(t2)](); + }, m2.add = function(r2, h2) { + var d2, $2 = this; + r2 = Number(r2); + var l2 = O.p(h2), y2 = function(t2) { + var e2 = w($2); + return O.w(e2.date(e2.date() + Math.round(t2 * r2)), $2); + }; + if (l2 === f) + return this.set(f, this.$M + r2); + if (l2 === c) + return this.set(c, this.$y + r2); + if (l2 === a) + return y2(1); + if (l2 === o) + return y2(7); + var M3 = (d2 = {}, d2[s] = e, d2[u] = n, d2[i] = t, d2)[l2] || 1, m3 = this.$d.getTime() + r2 * M3; + return O.w(m3, this); + }, m2.subtract = function(t2, e2) { + return this.add(-1 * t2, e2); + }, m2.format = function(t2) { + var e2 = this, n2 = this.$locale(); + if (!this.isValid()) + return n2.invalidDate || $; + var r2 = t2 || "YYYY-MM-DDTHH:mm:ssZ", i2 = O.z(this), s2 = this.$H, u2 = this.$m, a2 = this.$M, o2 = n2.weekdays, f2 = n2.months, h2 = function(t3, n3, i3, s3) { + return t3 && (t3[n3] || t3(e2, r2)) || i3[n3].slice(0, s3); + }, c2 = function(t3) { + return O.s(s2 % 12 || 12, t3, "0"); + }, d2 = n2.meridiem || function(t3, e3, n3) { + var r3 = t3 < 12 ? "AM" : "PM"; + return n3 ? r3.toLowerCase() : r3; + }, l2 = { YY: String(this.$y).slice(-2), YYYY: this.$y, M: a2 + 1, MM: O.s(a2 + 1, 2, "0"), MMM: h2(n2.monthsShort, a2, f2, 3), MMMM: h2(f2, a2), D: this.$D, DD: O.s(this.$D, 2, "0"), d: String(this.$W), dd: h2(n2.weekdaysMin, this.$W, o2, 2), ddd: h2(n2.weekdaysShort, this.$W, o2, 3), dddd: o2[this.$W], H: String(s2), HH: O.s(s2, 2, "0"), h: c2(1), hh: c2(2), a: d2(s2, u2, true), A: d2(s2, u2, false), m: String(u2), mm: O.s(u2, 2, "0"), s: String(this.$s), ss: O.s(this.$s, 2, "0"), SSS: O.s(this.$ms, 3, "0"), Z: i2 }; + return r2.replace(y, function(t3, e3) { + return e3 || l2[t3] || i2.replace(":", ""); + }); + }, m2.utcOffset = function() { + return 15 * -Math.round(this.$d.getTimezoneOffset() / 15); + }, m2.diff = function(r2, d2, $2) { + var l2, y2 = O.p(d2), M3 = w(r2), m3 = (M3.utcOffset() - this.utcOffset()) * e, g2 = this - M3, v2 = O.m(this, M3); + return v2 = (l2 = {}, l2[c] = v2 / 12, l2[f] = v2, l2[h] = v2 / 3, l2[o] = (g2 - m3) / 6048e5, l2[a] = (g2 - m3) / 864e5, l2[u] = g2 / n, l2[s] = g2 / e, l2[i] = g2 / t, l2)[y2] || g2, $2 ? v2 : O.a(v2); + }, m2.daysInMonth = function() { + return this.endOf(f).$D; + }, m2.$locale = function() { + return D[this.$L]; + }, m2.locale = function(t2, e2) { + if (!t2) + return this.$L; + var n2 = this.clone(), r2 = S(t2, e2, true); + return r2 && (n2.$L = r2), n2; + }, m2.clone = function() { + return O.w(this.$d, this); + }, m2.toDate = function() { + return new Date(this.valueOf()); + }, m2.toJSON = function() { + return this.isValid() ? this.toISOString() : null; + }, m2.toISOString = function() { + return this.$d.toISOString(); + }, m2.toString = function() { + return this.$d.toUTCString(); + }, M2; + }(), T = _.prototype; + return w.prototype = T, [["$ms", r], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", f], ["$y", c], ["$D", d]].forEach(function(t2) { + T[t2[1]] = function(e2) { + return this.$g(e2, t2[0], t2[1]); + }; + }), w.extend = function(t2, e2) { + return t2.$i || (t2(e2, _, w), t2.$i = true), w; + }, w.locale = S, w.isDayjs = p, w.unix = function(t2) { + return w(1e3 * t2); + }, w.en = D[v], w.Ls = D, w.p = {}, w; + }); + })(dayjs_min); + var dayjs = dayjs_min.exports; + + var customParseFormat$1 = {exports: {}}; + + (function(module, exports) { + !function(e, t) { + module.exports = t() ; + }(commonjsGlobal, function() { + var e = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" }, t = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g, n = /\d\d/, r = /\d\d?/, i = /\d*[^-_:/,()\s\d]+/, o = {}, s = function(e2) { + return (e2 = +e2) + (e2 > 68 ? 1900 : 2e3); + }; + var a = function(e2) { + return function(t2) { + this[e2] = +t2; + }; + }, f = [/[+-]\d\d:?(\d\d)?|Z/, function(e2) { + (this.zone || (this.zone = {})).offset = function(e3) { + if (!e3) + return 0; + if (e3 === "Z") + return 0; + var t2 = e3.match(/([+-]|\d\d)/g), n2 = 60 * t2[1] + (+t2[2] || 0); + return n2 === 0 ? 0 : t2[0] === "+" ? -n2 : n2; + }(e2); + }], h = function(e2) { + var t2 = o[e2]; + return t2 && (t2.indexOf ? t2 : t2.s.concat(t2.f)); + }, u = function(e2, t2) { + var n2, r2 = o.meridiem; + if (r2) { + for (var i2 = 1; i2 <= 24; i2 += 1) + if (e2.indexOf(r2(i2, 0, t2)) > -1) { + n2 = i2 > 12; + break; + } + } else + n2 = e2 === (t2 ? "pm" : "PM"); + return n2; + }, d = { A: [i, function(e2) { + this.afternoon = u(e2, false); + }], a: [i, function(e2) { + this.afternoon = u(e2, true); + }], S: [/\d/, function(e2) { + this.milliseconds = 100 * +e2; + }], SS: [n, function(e2) { + this.milliseconds = 10 * +e2; + }], SSS: [/\d{3}/, function(e2) { + this.milliseconds = +e2; + }], s: [r, a("seconds")], ss: [r, a("seconds")], m: [r, a("minutes")], mm: [r, a("minutes")], H: [r, a("hours")], h: [r, a("hours")], HH: [r, a("hours")], hh: [r, a("hours")], D: [r, a("day")], DD: [n, a("day")], Do: [i, function(e2) { + var t2 = o.ordinal, n2 = e2.match(/\d+/); + if (this.day = n2[0], t2) + for (var r2 = 1; r2 <= 31; r2 += 1) + t2(r2).replace(/\[|\]/g, "") === e2 && (this.day = r2); + }], M: [r, a("month")], MM: [n, a("month")], MMM: [i, function(e2) { + var t2 = h("months"), n2 = (h("monthsShort") || t2.map(function(e3) { + return e3.slice(0, 3); + })).indexOf(e2) + 1; + if (n2 < 1) + throw new Error(); + this.month = n2 % 12 || n2; + }], MMMM: [i, function(e2) { + var t2 = h("months").indexOf(e2) + 1; + if (t2 < 1) + throw new Error(); + this.month = t2 % 12 || t2; + }], Y: [/[+-]?\d+/, a("year")], YY: [n, function(e2) { + this.year = s(e2); + }], YYYY: [/\d{4}/, a("year")], Z: f, ZZ: f }; + function c(n2) { + var r2, i2; + r2 = n2, i2 = o && o.formats; + for (var s2 = (n2 = r2.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function(t2, n3, r3) { + var o2 = r3 && r3.toUpperCase(); + return n3 || i2[r3] || e[r3] || i2[o2].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function(e2, t3, n4) { + return t3 || n4.slice(1); + }); + })).match(t), a2 = s2.length, f2 = 0; f2 < a2; f2 += 1) { + var h2 = s2[f2], u2 = d[h2], c2 = u2 && u2[0], l = u2 && u2[1]; + s2[f2] = l ? { regex: c2, parser: l } : h2.replace(/^\[|\]$/g, ""); + } + return function(e2) { + for (var t2 = {}, n3 = 0, r3 = 0; n3 < a2; n3 += 1) { + var i3 = s2[n3]; + if (typeof i3 == "string") + r3 += i3.length; + else { + var o2 = i3.regex, f3 = i3.parser, h3 = e2.slice(r3), u3 = o2.exec(h3)[0]; + f3.call(t2, u3), e2 = e2.replace(u3, ""); + } + } + return function(e3) { + var t3 = e3.afternoon; + if (t3 !== void 0) { + var n4 = e3.hours; + t3 ? n4 < 12 && (e3.hours += 12) : n4 === 12 && (e3.hours = 0), delete e3.afternoon; + } + }(t2), t2; + }; + } + return function(e2, t2, n2) { + n2.p.customParseFormat = true, e2 && e2.parseTwoDigitYear && (s = e2.parseTwoDigitYear); + var r2 = t2.prototype, i2 = r2.parse; + r2.parse = function(e3) { + var t3 = e3.date, r3 = e3.utc, s2 = e3.args; + this.$u = r3; + var a2 = s2[1]; + if (typeof a2 == "string") { + var f2 = s2[2] === true, h2 = s2[3] === true, u2 = f2 || h2, d2 = s2[2]; + h2 && (d2 = s2[2]), o = this.$locale(), !f2 && d2 && (o = n2.Ls[d2]), this.$d = function(e4, t4, n3) { + try { + if (["x", "X"].indexOf(t4) > -1) + return new Date((t4 === "X" ? 1e3 : 1) * e4); + var r4 = c(t4)(e4), i3 = r4.year, o2 = r4.month, s3 = r4.day, a3 = r4.hours, f3 = r4.minutes, h3 = r4.seconds, u3 = r4.milliseconds, d3 = r4.zone, l2 = new Date(), m2 = s3 || (i3 || o2 ? 1 : l2.getDate()), M2 = i3 || l2.getFullYear(), Y = 0; + i3 && !o2 || (Y = o2 > 0 ? o2 - 1 : l2.getMonth()); + var p = a3 || 0, v = f3 || 0, D = h3 || 0, g = u3 || 0; + return d3 ? new Date(Date.UTC(M2, Y, m2, p, v, D, g + 60 * d3.offset * 1e3)) : n3 ? new Date(Date.UTC(M2, Y, m2, p, v, D, g)) : new Date(M2, Y, m2, p, v, D, g); + } catch (e5) { + return new Date(""); + } + }(t3, a2, r3), this.init(), d2 && d2 !== true && (this.$L = this.locale(d2).$L), u2 && t3 != this.format(a2) && (this.$d = new Date("")), o = {}; + } else if (a2 instanceof Array) + for (var l = a2.length, m = 1; m <= l; m += 1) { + s2[1] = a2[m - 1]; + var M = n2.apply(this, s2); + if (M.isValid()) { + this.$d = M.$d, this.$L = M.$L, this.init(); + break; + } + m === l && (this.$d = new Date("")); + } + else + i2.call(this, e3); + }; + }; + }); + })(customParseFormat$1); + var customParseFormat = customParseFormat$1.exports; + + const timeUnits$1 = ["hours", "minutes", "seconds"]; + const DEFAULT_FORMATS_TIME = "HH:mm:ss"; + const DEFAULT_FORMATS_DATE = "YYYY-MM-DD"; + const DEFAULT_FORMATS_DATEPICKER = { + date: DEFAULT_FORMATS_DATE, + dates: DEFAULT_FORMATS_DATE, + week: "gggg[w]ww", + year: "YYYY", + month: "YYYY-MM", + datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`, + monthrange: "YYYY-MM", + daterange: DEFAULT_FORMATS_DATE, + datetimerange: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}` + }; + + const buildTimeList = (value, bound) => { + return [ + value > 0 ? value - 1 : void 0, + value, + value < bound ? value + 1 : void 0 + ]; + }; + const rangeArr = (n) => Array.from(Array.from({ length: n }).keys()); + const extractDateFormat = (format) => { + return format.replace(/\W?m{1,2}|\W?ZZ/g, "").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi, "").trim(); + }; + const extractTimeFormat = (format) => { + return format.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?Y{2,4}/g, "").trim(); + }; + const dateEquals = function(a, b) { + const aIsDate = isDate$1(a); + const bIsDate = isDate$1(b); + if (aIsDate && bIsDate) { + return a.getTime() === b.getTime(); + } + if (!aIsDate && !bIsDate) { + return a === b; + } + return false; + }; + const valueEquals = function(a, b) { + const aIsArray = isArray$1(a); + const bIsArray = isArray$1(b); + if (aIsArray && bIsArray) { + if (a.length !== b.length) { + return false; + } + return a.every((item, index) => dateEquals(item, b[index])); + } + if (!aIsArray && !bIsArray) { + return dateEquals(a, b); + } + return false; + }; + const parseDate = function(date, format, lang) { + const day = isEmpty(format) || format === "x" ? dayjs(date).locale(lang) : dayjs(date, format).locale(lang); + return day.isValid() ? day : void 0; + }; + const formatter = function(date, format, lang) { + if (isEmpty(format)) + return date; + if (format === "x") + return +date; + return dayjs(date).locale(lang).format(format); + }; + const makeList = (total, method) => { + var _a; + const arr = []; + const disabledArr = method == null ? void 0 : method(); + for (let i = 0; i < total; i++) { + arr.push((_a = disabledArr == null ? void 0 : disabledArr.includes(i)) != null ? _a : false); + } + return arr; + }; + + const disabledTimeListsProps = buildProps({ + disabledHours: { + type: definePropType(Function) + }, + disabledMinutes: { + type: definePropType(Function) + }, + disabledSeconds: { + type: definePropType(Function) + } + }); + const timePanelSharedProps = buildProps({ + visible: Boolean, + actualVisible: { + type: Boolean, + default: void 0 + }, + format: { + type: String, + default: "" + } + }); + + const timePickerDefaultProps = buildProps({ + id: { + type: definePropType([Array, String]) + }, + name: { + type: definePropType([Array, String]), + default: "" + }, + popperClass: { + type: String, + default: "" + }, + format: String, + valueFormat: String, + type: { + type: String, + default: "" + }, + clearable: { + type: Boolean, + default: true + }, + clearIcon: { + type: definePropType([String, Object]), + default: circle_close_default + }, + editable: { + type: Boolean, + default: true + }, + prefixIcon: { + type: definePropType([String, Object]), + default: "" + }, + size: useSizeProp, + readonly: { + type: Boolean, + default: false + }, + disabled: { + type: Boolean, + default: false + }, + placeholder: { + type: String, + default: "" + }, + popperOptions: { + type: definePropType(Object), + default: () => ({}) + }, + modelValue: { + type: definePropType([Date, Array, String, Number]), + default: "" + }, + rangeSeparator: { + type: String, + default: "-" + }, + startPlaceholder: String, + endPlaceholder: String, + defaultValue: { + type: definePropType([Date, Array]) + }, + defaultTime: { + type: definePropType([Date, Array]) + }, + isRange: { + type: Boolean, + default: false + }, + ...disabledTimeListsProps, + disabledDate: { + type: Function + }, + cellClassName: { + type: Function + }, + shortcuts: { + type: Array, + default: () => [] + }, + arrowControl: { + type: Boolean, + default: false + }, + label: { + type: String, + default: void 0 + }, + tabindex: { + type: definePropType([String, Number]), + default: 0 + }, + validateEvent: { + type: Boolean, + default: true + }, + unlinkPanels: Boolean + }); + + const _hoisted_1$Y = ["id", "name", "placeholder", "value", "disabled", "readonly"]; + const _hoisted_2$D = ["id", "name", "placeholder", "value", "disabled", "readonly"]; + const __default__$1g = vue.defineComponent({ + name: "Picker" + }); + const _sfc_main$1V = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1g, + props: timePickerDefaultProps, + emits: [ + "update:modelValue", + "change", + "focus", + "blur", + "calendar-change", + "panel-change", + "visible-change", + "keydown" + ], + setup(__props, { expose, emit }) { + const props = __props; + const { lang } = useLocale(); + const nsDate = useNamespace("date"); + const nsInput = useNamespace("input"); + const nsRange = useNamespace("range"); + const { form, formItem } = useFormItem(); + const elPopperOptions = vue.inject("ElPopperOptions", {}); + const refPopper = vue.ref(); + const inputRef = vue.ref(); + const pickerVisible = vue.ref(false); + const pickerActualVisible = vue.ref(false); + const valueOnOpen = vue.ref(null); + let hasJustTabExitedInput = false; + let ignoreFocusEvent = false; + vue.watch(pickerVisible, (val) => { + if (!val) { + userInput.value = null; + vue.nextTick(() => { + emitChange(props.modelValue); + }); + } else { + vue.nextTick(() => { + if (val) { + valueOnOpen.value = props.modelValue; + } + }); + } + }); + const emitChange = (val, isClear) => { + if (isClear || !valueEquals(val, valueOnOpen.value)) { + emit("change", val); + props.validateEvent && (formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn())); + } + }; + const emitInput = (input) => { + if (!valueEquals(props.modelValue, input)) { + let formatted; + if (isArray$1(input)) { + formatted = input.map((item) => formatter(item, props.valueFormat, lang.value)); + } else if (input) { + formatted = formatter(input, props.valueFormat, lang.value); + } + emit("update:modelValue", input ? formatted : input, lang.value); + } + }; + const emitKeydown = (e) => { + emit("keydown", e); + }; + const refInput = vue.computed(() => { + if (inputRef.value) { + const _r = isRangeInput.value ? inputRef.value : inputRef.value.$el; + return Array.from(_r.querySelectorAll("input")); + } + return []; + }); + const setSelectionRange = (start, end, pos) => { + const _inputs = refInput.value; + if (!_inputs.length) + return; + if (!pos || pos === "min") { + _inputs[0].setSelectionRange(start, end); + _inputs[0].focus(); + } else if (pos === "max") { + _inputs[1].setSelectionRange(start, end); + _inputs[1].focus(); + } + }; + const focusOnInputBox = () => { + focus(true, true); + vue.nextTick(() => { + ignoreFocusEvent = false; + }); + }; + const onPick = (date = "", visible = false) => { + if (!visible) { + ignoreFocusEvent = true; + } + pickerVisible.value = visible; + let result; + if (isArray$1(date)) { + result = date.map((_) => _.toDate()); + } else { + result = date ? date.toDate() : date; + } + userInput.value = null; + emitInput(result); + }; + const onBeforeShow = () => { + pickerActualVisible.value = true; + }; + const onShow = () => { + emit("visible-change", true); + }; + const onKeydownPopperContent = (event) => { + if ((event == null ? void 0 : event.key) === EVENT_CODE.esc) { + focus(true, true); + } + }; + const onHide = () => { + pickerActualVisible.value = false; + pickerVisible.value = false; + ignoreFocusEvent = false; + emit("visible-change", false); + }; + const handleOpen = () => { + pickerVisible.value = true; + }; + const handleClose = () => { + pickerVisible.value = false; + }; + const focus = (focusStartInput = true, isIgnoreFocusEvent = false) => { + ignoreFocusEvent = isIgnoreFocusEvent; + const [leftInput, rightInput] = vue.unref(refInput); + let input = leftInput; + if (!focusStartInput && isRangeInput.value) { + input = rightInput; + } + if (input) { + input.focus(); + } + }; + const handleFocusInput = (e) => { + if (props.readonly || pickerDisabled.value || pickerVisible.value || ignoreFocusEvent) { + return; + } + pickerVisible.value = true; + emit("focus", e); + }; + let currentHandleBlurDeferCallback = void 0; + const handleBlurInput = (e) => { + const handleBlurDefer = async () => { + setTimeout(() => { + var _a; + if (currentHandleBlurDeferCallback === handleBlurDefer) { + if (!(((_a = refPopper.value) == null ? void 0 : _a.isFocusInsideContent()) && !hasJustTabExitedInput) && refInput.value.filter((input) => { + return input.contains(document.activeElement); + }).length === 0) { + handleChange(); + pickerVisible.value = false; + emit("blur", e); + props.validateEvent && (formItem == null ? void 0 : formItem.validate("blur").catch((err) => debugWarn())); + } + hasJustTabExitedInput = false; + } + }, 0); + }; + currentHandleBlurDeferCallback = handleBlurDefer; + handleBlurDefer(); + }; + const pickerDisabled = vue.computed(() => { + return props.disabled || (form == null ? void 0 : form.disabled); + }); + const parsedValue = vue.computed(() => { + let dayOrDays; + if (valueIsEmpty.value) { + if (pickerOptions.value.getDefaultValue) { + dayOrDays = pickerOptions.value.getDefaultValue(); + } + } else { + if (isArray$1(props.modelValue)) { + dayOrDays = props.modelValue.map((d) => parseDate(d, props.valueFormat, lang.value)); + } else { + dayOrDays = parseDate(props.modelValue, props.valueFormat, lang.value); + } + } + if (pickerOptions.value.getRangeAvailableTime) { + const availableResult = pickerOptions.value.getRangeAvailableTime(dayOrDays); + if (!isEqual$1(availableResult, dayOrDays)) { + dayOrDays = availableResult; + emitInput(isArray$1(dayOrDays) ? dayOrDays.map((_) => _.toDate()) : dayOrDays.toDate()); + } + } + if (isArray$1(dayOrDays) && dayOrDays.some((day) => !day)) { + dayOrDays = []; + } + return dayOrDays; + }); + const displayValue = vue.computed(() => { + if (!pickerOptions.value.panelReady) + return ""; + const formattedValue = formatDayjsToString(parsedValue.value); + if (isArray$1(userInput.value)) { + return [ + userInput.value[0] || formattedValue && formattedValue[0] || "", + userInput.value[1] || formattedValue && formattedValue[1] || "" + ]; + } else if (userInput.value !== null) { + return userInput.value; + } + if (!isTimePicker.value && valueIsEmpty.value) + return ""; + if (!pickerVisible.value && valueIsEmpty.value) + return ""; + if (formattedValue) { + return isDatesPicker.value ? formattedValue.join(", ") : formattedValue; + } + return ""; + }); + const isTimeLikePicker = vue.computed(() => props.type.includes("time")); + const isTimePicker = vue.computed(() => props.type.startsWith("time")); + const isDatesPicker = vue.computed(() => props.type === "dates"); + const triggerIcon = vue.computed(() => props.prefixIcon || (isTimeLikePicker.value ? clock_default : calendar_default)); + const showClose = vue.ref(false); + const onClearIconClick = (event) => { + if (props.readonly || pickerDisabled.value) + return; + if (showClose.value) { + event.stopPropagation(); + focusOnInputBox(); + emitInput(null); + emitChange(null, true); + showClose.value = false; + pickerVisible.value = false; + pickerOptions.value.handleClear && pickerOptions.value.handleClear(); + } + }; + const valueIsEmpty = vue.computed(() => { + const { modelValue } = props; + return !modelValue || isArray$1(modelValue) && !modelValue.filter(Boolean).length; + }); + const onMouseDownInput = async (event) => { + var _a; + if (props.readonly || pickerDisabled.value) + return; + if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) { + pickerVisible.value = true; + } + }; + const onMouseEnter = () => { + if (props.readonly || pickerDisabled.value) + return; + if (!valueIsEmpty.value && props.clearable) { + showClose.value = true; + } + }; + const onMouseLeave = () => { + showClose.value = false; + }; + const onTouchStartInput = (event) => { + var _a; + if (props.readonly || pickerDisabled.value) + return; + if (((_a = event.touches[0].target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) { + pickerVisible.value = true; + } + }; + const isRangeInput = vue.computed(() => { + return props.type.includes("range"); + }); + const pickerSize = useFormSize(); + const popperEl = vue.computed(() => { + var _a, _b; + return (_b = (_a = vue.unref(refPopper)) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef; + }); + const actualInputRef = vue.computed(() => { + var _a; + if (vue.unref(isRangeInput)) { + return vue.unref(inputRef); + } + return (_a = vue.unref(inputRef)) == null ? void 0 : _a.$el; + }); + onClickOutside(actualInputRef, (e) => { + const unrefedPopperEl = vue.unref(popperEl); + const inputEl = vue.unref(actualInputRef); + if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || e.composedPath().includes(inputEl)) + return; + pickerVisible.value = false; + }); + const userInput = vue.ref(null); + const handleChange = () => { + if (userInput.value) { + const value = parseUserInputToDayjs(displayValue.value); + if (value) { + if (isValidValue(value)) { + emitInput(isArray$1(value) ? value.map((_) => _.toDate()) : value.toDate()); + userInput.value = null; + } + } + } + if (userInput.value === "") { + emitInput(null); + emitChange(null); + userInput.value = null; + } + }; + const parseUserInputToDayjs = (value) => { + if (!value) + return null; + return pickerOptions.value.parseUserInput(value); + }; + const formatDayjsToString = (value) => { + if (!value) + return null; + return pickerOptions.value.formatToString(value); + }; + const isValidValue = (value) => { + return pickerOptions.value.isValidValue(value); + }; + const handleKeydownInput = async (event) => { + if (props.readonly || pickerDisabled.value) + return; + const { code } = event; + emitKeydown(event); + if (code === EVENT_CODE.esc) { + if (pickerVisible.value === true) { + pickerVisible.value = false; + event.preventDefault(); + event.stopPropagation(); + } + return; + } + if (code === EVENT_CODE.down) { + if (pickerOptions.value.handleFocusPicker) { + event.preventDefault(); + event.stopPropagation(); + } + if (pickerVisible.value === false) { + pickerVisible.value = true; + await vue.nextTick(); + } + if (pickerOptions.value.handleFocusPicker) { + pickerOptions.value.handleFocusPicker(); + return; + } + } + if (code === EVENT_CODE.tab) { + hasJustTabExitedInput = true; + return; + } + if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) { + if (userInput.value === null || userInput.value === "" || isValidValue(parseUserInputToDayjs(displayValue.value))) { + handleChange(); + pickerVisible.value = false; + } + event.stopPropagation(); + return; + } + if (userInput.value) { + event.stopPropagation(); + return; + } + if (pickerOptions.value.handleKeydownInput) { + pickerOptions.value.handleKeydownInput(event); + } + }; + const onUserInput = (e) => { + userInput.value = e; + if (!pickerVisible.value) { + pickerVisible.value = true; + } + }; + const handleStartInput = (event) => { + const target = event.target; + if (userInput.value) { + userInput.value = [target.value, userInput.value[1]]; + } else { + userInput.value = [target.value, null]; + } + }; + const handleEndInput = (event) => { + const target = event.target; + if (userInput.value) { + userInput.value = [userInput.value[0], target.value]; + } else { + userInput.value = [null, target.value]; + } + }; + const handleStartChange = () => { + var _a; + const values = userInput.value; + const value = parseUserInputToDayjs(values && values[0]); + const parsedVal = vue.unref(parsedValue); + if (value && value.isValid()) { + userInput.value = [ + formatDayjsToString(value), + ((_a = displayValue.value) == null ? void 0 : _a[1]) || null + ]; + const newValue = [value, parsedVal && (parsedVal[1] || null)]; + if (isValidValue(newValue)) { + emitInput(newValue); + userInput.value = null; + } + } + }; + const handleEndChange = () => { + var _a; + const values = vue.unref(userInput); + const value = parseUserInputToDayjs(values && values[1]); + const parsedVal = vue.unref(parsedValue); + if (value && value.isValid()) { + userInput.value = [ + ((_a = vue.unref(displayValue)) == null ? void 0 : _a[0]) || null, + formatDayjsToString(value) + ]; + const newValue = [parsedVal && parsedVal[0], value]; + if (isValidValue(newValue)) { + emitInput(newValue); + userInput.value = null; + } + } + }; + const pickerOptions = vue.ref({}); + const onSetPickerOption = (e) => { + pickerOptions.value[e[0]] = e[1]; + pickerOptions.value.panelReady = true; + }; + const onCalendarChange = (e) => { + emit("calendar-change", e); + }; + const onPanelChange = (value, mode, view) => { + emit("panel-change", value, mode, view); + }; + vue.provide("EP_PICKER_BASE", { + props + }); + expose({ + focus, + handleFocusInput, + handleBlurInput, + handleOpen, + handleClose, + onPick + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), vue.mergeProps({ + ref_key: "refPopper", + ref: refPopper, + visible: pickerVisible.value, + effect: "light", + pure: "", + trigger: "click" + }, _ctx.$attrs, { + role: "dialog", + teleported: "", + transition: `${vue.unref(nsDate).namespace.value}-zoom-in-top`, + "popper-class": [`${vue.unref(nsDate).namespace.value}-picker__popper`, _ctx.popperClass], + "popper-options": vue.unref(elPopperOptions), + "fallback-placements": ["bottom", "top", "right", "left"], + "gpu-acceleration": false, + "stop-popper-mouse-event": false, + "hide-after": 0, + persistent: "", + onBeforeShow, + onShow, + onHide + }), { + default: vue.withCtx(() => [ + !vue.unref(isRangeInput) ? (vue.openBlock(), vue.createBlock(vue.unref(ElInput), { + key: 0, + id: _ctx.id, + ref_key: "inputRef", + ref: inputRef, + "container-role": "combobox", + "model-value": vue.unref(displayValue), + name: _ctx.name, + size: vue.unref(pickerSize), + disabled: vue.unref(pickerDisabled), + placeholder: _ctx.placeholder, + class: vue.normalizeClass([vue.unref(nsDate).b("editor"), vue.unref(nsDate).bm("editor", _ctx.type), _ctx.$attrs.class]), + style: vue.normalizeStyle(_ctx.$attrs.style), + readonly: !_ctx.editable || _ctx.readonly || vue.unref(isDatesPicker) || _ctx.type === "week", + label: _ctx.label, + tabindex: _ctx.tabindex, + "validate-event": false, + onInput: onUserInput, + onFocus: handleFocusInput, + onBlur: handleBlurInput, + onKeydown: handleKeydownInput, + onChange: handleChange, + onMousedown: onMouseDownInput, + onMouseenter: onMouseEnter, + onMouseleave: onMouseLeave, + onTouchstart: onTouchStartInput, + onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => { + }, ["stop"])) + }, { + prefix: vue.withCtx(() => [ + vue.unref(triggerIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(nsInput).e("icon")), + onMousedown: vue.withModifiers(onMouseDownInput, ["prevent"]), + onTouchstart: onTouchStartInput + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(triggerIcon)))) + ]), + _: 1 + }, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true) + ]), + suffix: vue.withCtx(() => [ + showClose.value && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(`${vue.unref(nsInput).e("icon")} clear-icon`), + onClick: vue.withModifiers(onClearIconClick, ["stop"]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon))) + ]), + _: 1 + }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true) + ]), + _: 1 + }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "label", "tabindex", "onKeydown"])) : (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + ref_key: "inputRef", + ref: inputRef, + class: vue.normalizeClass([ + vue.unref(nsDate).b("editor"), + vue.unref(nsDate).bm("editor", _ctx.type), + vue.unref(nsInput).e("wrapper"), + vue.unref(nsDate).is("disabled", vue.unref(pickerDisabled)), + vue.unref(nsDate).is("active", pickerVisible.value), + vue.unref(nsRange).b("editor"), + vue.unref(pickerSize) ? vue.unref(nsRange).bm("editor", vue.unref(pickerSize)) : "", + _ctx.$attrs.class + ]), + style: vue.normalizeStyle(_ctx.$attrs.style), + onClick: handleFocusInput, + onMouseenter: onMouseEnter, + onMouseleave: onMouseLeave, + onTouchstart: onTouchStartInput, + onKeydown: handleKeydownInput + }, [ + vue.unref(triggerIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass([vue.unref(nsInput).e("icon"), vue.unref(nsRange).e("icon")]), + onMousedown: vue.withModifiers(onMouseDownInput, ["prevent"]), + onTouchstart: onTouchStartInput + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(triggerIcon)))) + ]), + _: 1 + }, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("input", { + id: _ctx.id && _ctx.id[0], + autocomplete: "off", + name: _ctx.name && _ctx.name[0], + placeholder: _ctx.startPlaceholder, + value: vue.unref(displayValue) && vue.unref(displayValue)[0], + disabled: vue.unref(pickerDisabled), + readonly: !_ctx.editable || _ctx.readonly, + class: vue.normalizeClass(vue.unref(nsRange).b("input")), + onMousedown: onMouseDownInput, + onInput: handleStartInput, + onChange: handleStartChange, + onFocus: handleFocusInput, + onBlur: handleBlurInput + }, null, 42, _hoisted_1$Y), + vue.renderSlot(_ctx.$slots, "range-separator", {}, () => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(nsRange).b("separator")) + }, vue.toDisplayString(_ctx.rangeSeparator), 3) + ]), + vue.createElementVNode("input", { + id: _ctx.id && _ctx.id[1], + autocomplete: "off", + name: _ctx.name && _ctx.name[1], + placeholder: _ctx.endPlaceholder, + value: vue.unref(displayValue) && vue.unref(displayValue)[1], + disabled: vue.unref(pickerDisabled), + readonly: !_ctx.editable || _ctx.readonly, + class: vue.normalizeClass(vue.unref(nsRange).b("input")), + onMousedown: onMouseDownInput, + onFocus: handleFocusInput, + onBlur: handleBlurInput, + onInput: handleEndInput, + onChange: handleEndChange + }, null, 42, _hoisted_2$D), + _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 1, + class: vue.normalizeClass([ + vue.unref(nsInput).e("icon"), + vue.unref(nsRange).e("close-icon"), + { + [vue.unref(nsRange).e("close-icon--hidden")]: !showClose.value + } + ]), + onClick: onClearIconClick + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ], 38)) + ]), + content: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default", { + visible: pickerVisible.value, + actualVisible: pickerActualVisible.value, + parsedValue: vue.unref(parsedValue), + format: _ctx.format, + unlinkPanels: _ctx.unlinkPanels, + type: _ctx.type, + defaultValue: _ctx.defaultValue, + onPick, + onSelectRange: setSelectionRange, + onSetPickerOption, + onCalendarChange, + onPanelChange, + onKeydown: onKeydownPopperContent, + onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => { + }, ["stop"])) + }) + ]), + _: 3 + }, 16, ["visible", "transition", "popper-class", "popper-options"]); + }; + } + }); + var CommonPicker = /* @__PURE__ */ _export_sfc(_sfc_main$1V, [["__file", "picker.vue"]]); + + const panelTimePickerProps = buildProps({ + ...timePanelSharedProps, + datetimeRole: String, + parsedValue: { + type: definePropType(Object) + } + }); + + const useTimePanel = ({ + getAvailableHours, + getAvailableMinutes, + getAvailableSeconds + }) => { + const getAvailableTime = (date, role, first, compareDate) => { + const availableTimeGetters = { + hour: getAvailableHours, + minute: getAvailableMinutes, + second: getAvailableSeconds + }; + let result = date; + ["hour", "minute", "second"].forEach((type) => { + if (availableTimeGetters[type]) { + let availableTimeSlots; + const method = availableTimeGetters[type]; + switch (type) { + case "minute": { + availableTimeSlots = method(result.hour(), role, compareDate); + break; + } + case "second": { + availableTimeSlots = method(result.hour(), result.minute(), role, compareDate); + break; + } + default: { + availableTimeSlots = method(role, compareDate); + break; + } + } + if ((availableTimeSlots == null ? void 0 : availableTimeSlots.length) && !availableTimeSlots.includes(result[type]())) { + const pos = first ? 0 : availableTimeSlots.length - 1; + result = result[type](availableTimeSlots[pos]); + } + } + }); + return result; + }; + const timePickerOptions = {}; + const onSetOption = ([key, val]) => { + timePickerOptions[key] = val; + }; + return { + timePickerOptions, + getAvailableTime, + onSetOption + }; + }; + + const makeAvailableArr = (disabledList) => { + const trueOrNumber = (isDisabled, index) => isDisabled || index; + const getNumber = (predicate) => predicate !== true; + return disabledList.map(trueOrNumber).filter(getNumber); + }; + const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) => { + const getHoursList = (role, compare) => { + return makeList(24, disabledHours && (() => disabledHours == null ? void 0 : disabledHours(role, compare))); + }; + const getMinutesList = (hour, role, compare) => { + return makeList(60, disabledMinutes && (() => disabledMinutes == null ? void 0 : disabledMinutes(hour, role, compare))); + }; + const getSecondsList = (hour, minute, role, compare) => { + return makeList(60, disabledSeconds && (() => disabledSeconds == null ? void 0 : disabledSeconds(hour, minute, role, compare))); + }; + return { + getHoursList, + getMinutesList, + getSecondsList + }; + }; + const buildAvailableTimeSlotGetter = (disabledHours, disabledMinutes, disabledSeconds) => { + const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(disabledHours, disabledMinutes, disabledSeconds); + const getAvailableHours = (role, compare) => { + return makeAvailableArr(getHoursList(role, compare)); + }; + const getAvailableMinutes = (hour, role, compare) => { + return makeAvailableArr(getMinutesList(hour, role, compare)); + }; + const getAvailableSeconds = (hour, minute, role, compare) => { + return makeAvailableArr(getSecondsList(hour, minute, role, compare)); + }; + return { + getAvailableHours, + getAvailableMinutes, + getAvailableSeconds + }; + }; + const useOldValue = (props) => { + const oldValue = vue.ref(props.parsedValue); + vue.watch(() => props.visible, (val) => { + if (!val) { + oldValue.value = props.parsedValue; + } + }); + return oldValue; + }; + + const nodeList = /* @__PURE__ */ new Map(); + let startClick; + if (isClient) { + document.addEventListener("mousedown", (e) => startClick = e); + document.addEventListener("mouseup", (e) => { + for (const handlers of nodeList.values()) { + for (const { documentHandler } of handlers) { + documentHandler(e, startClick); + } + } + }); + } + function createDocumentHandler(el, binding) { + let excludes = []; + if (Array.isArray(binding.arg)) { + excludes = binding.arg; + } else if (isElement$1(binding.arg)) { + excludes.push(binding.arg); + } + return function(mouseup, mousedown) { + const popperRef = binding.instance.popperRef; + const mouseUpTarget = mouseup.target; + const mouseDownTarget = mousedown == null ? void 0 : mousedown.target; + const isBound = !binding || !binding.instance; + const isTargetExists = !mouseUpTarget || !mouseDownTarget; + const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget); + const isSelf = el === mouseUpTarget; + const isTargetExcluded = excludes.length && excludes.some((item) => item == null ? void 0 : item.contains(mouseUpTarget)) || excludes.length && excludes.includes(mouseDownTarget); + const isContainedByPopper = popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget)); + if (isBound || isTargetExists || isContainedByEl || isSelf || isTargetExcluded || isContainedByPopper) { + return; + } + binding.value(mouseup, mousedown); + }; + } + const ClickOutside = { + beforeMount(el, binding) { + if (!nodeList.has(el)) { + nodeList.set(el, []); + } + nodeList.get(el).push({ + documentHandler: createDocumentHandler(el, binding), + bindingFn: binding.value + }); + }, + updated(el, binding) { + if (!nodeList.has(el)) { + nodeList.set(el, []); + } + const handlers = nodeList.get(el); + const oldHandlerIndex = handlers.findIndex((item) => item.bindingFn === binding.oldValue); + const newHandler = { + documentHandler: createDocumentHandler(el, binding), + bindingFn: binding.value + }; + if (oldHandlerIndex >= 0) { + handlers.splice(oldHandlerIndex, 1, newHandler); + } else { + handlers.push(newHandler); + } + }, + unmounted(el) { + nodeList.delete(el); + } + }; + + const REPEAT_INTERVAL = 100; + const REPEAT_DELAY = 600; + const vRepeatClick = { + beforeMount(el, binding) { + const value = binding.value; + const { interval = REPEAT_INTERVAL, delay = REPEAT_DELAY } = isFunction$1(value) ? {} : value; + let intervalId; + let delayId; + const handler = () => isFunction$1(value) ? value() : value.handler(); + const clear = () => { + if (delayId) { + clearTimeout(delayId); + delayId = void 0; + } + if (intervalId) { + clearInterval(intervalId); + intervalId = void 0; + } + }; + el.addEventListener("mousedown", (evt) => { + if (evt.button !== 0) + return; + clear(); + handler(); + document.addEventListener("mouseup", () => clear(), { + once: true + }); + delayId = setTimeout(() => { + intervalId = setInterval(() => { + handler(); + }, interval); + }, delay); + }); + } + }; + + const FOCUSABLE_CHILDREN = "_trap-focus-children"; + const FOCUS_STACK = []; + const FOCUS_HANDLER = (e) => { + if (FOCUS_STACK.length === 0) + return; + const focusableElement = FOCUS_STACK[FOCUS_STACK.length - 1][FOCUSABLE_CHILDREN]; + if (focusableElement.length > 0 && e.code === EVENT_CODE.tab) { + if (focusableElement.length === 1) { + e.preventDefault(); + if (document.activeElement !== focusableElement[0]) { + focusableElement[0].focus(); + } + return; + } + const goingBackward = e.shiftKey; + const isFirst = e.target === focusableElement[0]; + const isLast = e.target === focusableElement[focusableElement.length - 1]; + if (isFirst && goingBackward) { + e.preventDefault(); + focusableElement[focusableElement.length - 1].focus(); + } + if (isLast && !goingBackward) { + e.preventDefault(); + focusableElement[0].focus(); + } + } + }; + const TrapFocus = { + beforeMount(el) { + el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements$1(el); + FOCUS_STACK.push(el); + if (FOCUS_STACK.length <= 1) { + document.addEventListener("keydown", FOCUS_HANDLER); + } + }, + updated(el) { + vue.nextTick(() => { + el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements$1(el); + }); + }, + unmounted() { + FOCUS_STACK.shift(); + if (FOCUS_STACK.length === 0) { + document.removeEventListener("keydown", FOCUS_HANDLER); + } + } + }; + + var v=!1,o,f,s,u,d,N,l,p,m,w,D,x,E,M,F;function a(){if(!v){v=!0;var e=navigator.userAgent,n=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),i=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(x=/\b(iPhone|iP[ao]d)/.exec(e),E=/\b(iP[ao]d)/.exec(e),w=/Android/i.exec(e),M=/FBAN\/\w+;/i.exec(e),F=/Mobile/i.exec(e),D=!!/Win64/.exec(e),n){o=n[1]?parseFloat(n[1]):n[5]?parseFloat(n[5]):NaN,o&&document&&document.documentMode&&(o=document.documentMode);var r=/(?:Trident\/(\d+.\d+))/.exec(e);N=r?parseFloat(r[1])+4:o,f=n[2]?parseFloat(n[2]):NaN,s=n[3]?parseFloat(n[3]):NaN,u=n[4]?parseFloat(n[4]):NaN,u?(n=/(?:Chrome\/(\d+\.\d+))/.exec(e),d=n&&n[1]?parseFloat(n[1]):NaN):d=NaN;}else o=f=s=d=u=NaN;if(i){if(i[1]){var t=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);l=t?parseFloat(t[1].replace("_",".")):!0;}else l=!1;p=!!i[2],m=!!i[3];}else l=p=m=!1;}}var _={ie:function(){return a()||o},ieCompatibilityMode:function(){return a()||N>o},ie64:function(){return _.ie()&&D},firefox:function(){return a()||f},opera:function(){return a()||s},webkit:function(){return a()||u},safari:function(){return _.webkit()},chrome:function(){return a()||d},windows:function(){return a()||p},osx:function(){return a()||l},linux:function(){return a()||m},iphone:function(){return a()||x},mobile:function(){return a()||x||E||w||F},nativeApp:function(){return a()||M},android:function(){return a()||w},ipad:function(){return a()||E}},A=_;var c=!!(typeof window<"u"&&window.document&&window.document.createElement),U={canUseDOM:c,canUseWorkers:typeof Worker<"u",canUseEventListeners:c&&!!(window.addEventListener||window.attachEvent),canUseViewport:c&&!!window.screen,isInWorker:!c},h=U;var X;h.canUseDOM&&(X=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0);function S(e,n){if(!h.canUseDOM||n&&!("addEventListener"in document))return !1;var i="on"+e,r=i in document;if(!r){var t=document.createElement("div");t.setAttribute(i,"return;"),r=typeof t[i]=="function";}return !r&&X&&e==="wheel"&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var b=S;var O=10,I=40,P=800;function T(e){var n=0,i=0,r=0,t=0;return "detail"in e&&(i=e.detail),"wheelDelta"in e&&(i=-e.wheelDelta/120),"wheelDeltaY"in e&&(i=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(n=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(n=i,i=0),r=n*O,t=i*O,"deltaY"in e&&(t=e.deltaY),"deltaX"in e&&(r=e.deltaX),(r||t)&&e.deltaMode&&(e.deltaMode==1?(r*=I,t*=I):(r*=P,t*=P)),r&&!n&&(n=r<1?-1:1),t&&!i&&(i=t<1?-1:1),{spinX:n,spinY:i,pixelX:r,pixelY:t}}T.getEventType=function(){return A.firefox()?"DOMMouseScroll":b("wheel")?"wheel":"mousewheel"};var Y=T;/** + * Checks if an event is supported in the current execution environment. + * + * NOTE: This will not work correctly for non-generic events such as `change`, + * `reset`, `load`, `error`, and `select`. + * + * Borrows from Modernizr. + * + * @param {string} eventNameSuffix Event name, e.g. "click". + * @param {?boolean} capture Check if the capture phase is supported. + * @return {boolean} True if the event is supported. + * @internal + * @license Modernizr 3.0.0pre (Custom Build) | MIT + */ + + const mousewheel = function(element, callback) { + if (element && element.addEventListener) { + const fn = function(event) { + const normalized = Y(event); + callback && Reflect.apply(callback, this, [event, normalized]); + }; + element.addEventListener("wheel", fn, { passive: true }); + } + }; + const Mousewheel = { + beforeMount(el, binding) { + mousewheel(el, binding.value); + } + }; + + const basicTimeSpinnerProps = buildProps({ + role: { + type: String, + required: true + }, + spinnerDate: { + type: definePropType(Object), + required: true + }, + showSeconds: { + type: Boolean, + default: true + }, + arrowControl: Boolean, + amPmMode: { + type: definePropType(String), + default: "" + }, + ...disabledTimeListsProps + }); + + const _hoisted_1$X = ["onClick"]; + const _hoisted_2$C = ["onMouseenter"]; + const _sfc_main$1U = /* @__PURE__ */ vue.defineComponent({ + __name: "basic-time-spinner", + props: basicTimeSpinnerProps, + emits: ["change", "select-range", "set-option"], + setup(__props, { emit }) { + const props = __props; + const ns = useNamespace("time"); + const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds); + let isScrolling = false; + const currentScrollbar = vue.ref(); + const listHoursRef = vue.ref(); + const listMinutesRef = vue.ref(); + const listSecondsRef = vue.ref(); + const listRefsMap = { + hours: listHoursRef, + minutes: listMinutesRef, + seconds: listSecondsRef + }; + const spinnerItems = vue.computed(() => { + return props.showSeconds ? timeUnits$1 : timeUnits$1.slice(0, 2); + }); + const timePartials = vue.computed(() => { + const { spinnerDate } = props; + const hours = spinnerDate.hour(); + const minutes = spinnerDate.minute(); + const seconds = spinnerDate.second(); + return { hours, minutes, seconds }; + }); + const timeList = vue.computed(() => { + const { hours, minutes } = vue.unref(timePartials); + return { + hours: getHoursList(props.role), + minutes: getMinutesList(hours, props.role), + seconds: getSecondsList(hours, minutes, props.role) + }; + }); + const arrowControlTimeList = vue.computed(() => { + const { hours, minutes, seconds } = vue.unref(timePartials); + return { + hours: buildTimeList(hours, 23), + minutes: buildTimeList(minutes, 59), + seconds: buildTimeList(seconds, 59) + }; + }); + const debouncedResetScroll = debounce((type) => { + isScrolling = false; + adjustCurrentSpinner(type); + }, 200); + const getAmPmFlag = (hour) => { + const shouldShowAmPm = !!props.amPmMode; + if (!shouldShowAmPm) + return ""; + const isCapital = props.amPmMode === "A"; + let content = hour < 12 ? " am" : " pm"; + if (isCapital) + content = content.toUpperCase(); + return content; + }; + const emitSelectRange = (type) => { + let range; + switch (type) { + case "hours": + range = [0, 2]; + break; + case "minutes": + range = [3, 5]; + break; + case "seconds": + range = [6, 8]; + break; + } + const [left, right] = range; + emit("select-range", left, right); + currentScrollbar.value = type; + }; + const adjustCurrentSpinner = (type) => { + adjustSpinner(type, vue.unref(timePartials)[type]); + }; + const adjustSpinners = () => { + adjustCurrentSpinner("hours"); + adjustCurrentSpinner("minutes"); + adjustCurrentSpinner("seconds"); + }; + const getScrollbarElement = (el) => el.querySelector(`.${ns.namespace.value}-scrollbar__wrap`); + const adjustSpinner = (type, value) => { + if (props.arrowControl) + return; + const scrollbar = vue.unref(listRefsMap[type]); + if (scrollbar && scrollbar.$el) { + getScrollbarElement(scrollbar.$el).scrollTop = Math.max(0, value * typeItemHeight(type)); + } + }; + const typeItemHeight = (type) => { + const scrollbar = vue.unref(listRefsMap[type]); + return (scrollbar == null ? void 0 : scrollbar.$el.querySelector("li").offsetHeight) || 0; + }; + const onIncrement = () => { + scrollDown(1); + }; + const onDecrement = () => { + scrollDown(-1); + }; + const scrollDown = (step) => { + if (!currentScrollbar.value) { + emitSelectRange("hours"); + } + const label = currentScrollbar.value; + const now = vue.unref(timePartials)[label]; + const total = currentScrollbar.value === "hours" ? 24 : 60; + const next = findNextUnDisabled(label, now, step, total); + modifyDateField(label, next); + adjustSpinner(label, next); + vue.nextTick(() => emitSelectRange(label)); + }; + const findNextUnDisabled = (type, now, step, total) => { + let next = (now + step + total) % total; + const list = vue.unref(timeList)[type]; + while (list[next] && next !== now) { + next = (next + step + total) % total; + } + return next; + }; + const modifyDateField = (type, value) => { + const list = vue.unref(timeList)[type]; + const isDisabled = list[value]; + if (isDisabled) + return; + const { hours, minutes, seconds } = vue.unref(timePartials); + let changeTo; + switch (type) { + case "hours": + changeTo = props.spinnerDate.hour(value).minute(minutes).second(seconds); + break; + case "minutes": + changeTo = props.spinnerDate.hour(hours).minute(value).second(seconds); + break; + case "seconds": + changeTo = props.spinnerDate.hour(hours).minute(minutes).second(value); + break; + } + emit("change", changeTo); + }; + const handleClick = (type, { value, disabled }) => { + if (!disabled) { + modifyDateField(type, value); + emitSelectRange(type); + adjustSpinner(type, value); + } + }; + const handleScroll = (type) => { + isScrolling = true; + debouncedResetScroll(type); + const value = Math.min(Math.round((getScrollbarElement(vue.unref(listRefsMap[type]).$el).scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)), type === "hours" ? 23 : 59); + modifyDateField(type, value); + }; + const scrollBarHeight = (type) => { + return vue.unref(listRefsMap[type]).$el.offsetHeight; + }; + const bindScrollEvent = () => { + const bindFunction = (type) => { + const scrollbar = vue.unref(listRefsMap[type]); + if (scrollbar && scrollbar.$el) { + getScrollbarElement(scrollbar.$el).onscroll = () => { + handleScroll(type); + }; + } + }; + bindFunction("hours"); + bindFunction("minutes"); + bindFunction("seconds"); + }; + vue.onMounted(() => { + vue.nextTick(() => { + !props.arrowControl && bindScrollEvent(); + adjustSpinners(); + if (props.role === "start") + emitSelectRange("hours"); + }); + }); + const setRef = (scrollbar, type) => { + listRefsMap[type].value = scrollbar; + }; + emit("set-option", [`${props.role}_scrollDown`, scrollDown]); + emit("set-option", [`${props.role}_emitSelectRange`, emitSelectRange]); + vue.watch(() => props.spinnerDate, () => { + if (isScrolling) + return; + adjustSpinners(); + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([vue.unref(ns).b("spinner"), { "has-seconds": _ctx.showSeconds }]) + }, [ + !_ctx.arrowControl ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(vue.unref(spinnerItems), (item) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElScrollbar), { + key: item, + ref_for: true, + ref: (scrollbar) => setRef(scrollbar, item), + class: vue.normalizeClass(vue.unref(ns).be("spinner", "wrapper")), + "wrap-style": "max-height: inherit;", + "view-class": vue.unref(ns).be("spinner", "list"), + noresize: "", + tag: "ul", + onMouseenter: ($event) => emitSelectRange(item), + onMousemove: ($event) => adjustCurrentSpinner(item) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(timeList)[item], (disabled, key) => { + return vue.openBlock(), vue.createElementBlock("li", { + key, + class: vue.normalizeClass([ + vue.unref(ns).be("spinner", "item"), + vue.unref(ns).is("active", key === vue.unref(timePartials)[item]), + vue.unref(ns).is("disabled", disabled) + ]), + onClick: ($event) => handleClick(item, { value: key, disabled }) + }, [ + item === "hours" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.createTextVNode(vue.toDisplayString(("0" + (_ctx.amPmMode ? key % 12 || 12 : key)).slice(-2)) + vue.toDisplayString(getAmPmFlag(key)), 1) + ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [ + vue.createTextVNode(vue.toDisplayString(("0" + key).slice(-2)), 1) + ], 64)) + ], 10, _hoisted_1$X); + }), 128)) + ]), + _: 2 + }, 1032, ["class", "view-class", "onMouseenter", "onMousemove"]); + }), 128)) : vue.createCommentVNode("v-if", true), + _ctx.arrowControl ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(vue.unref(spinnerItems), (item) => { + return vue.openBlock(), vue.createElementBlock("div", { + key: item, + class: vue.normalizeClass([vue.unref(ns).be("spinner", "wrapper"), vue.unref(ns).is("arrow")]), + onMouseenter: ($event) => emitSelectRange(item) + }, [ + vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + class: vue.normalizeClass(["arrow-up", vue.unref(ns).be("spinner", "arrow")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_up_default)) + ]), + _: 1 + }, 8, ["class"])), [ + [vue.unref(vRepeatClick), onDecrement] + ]), + vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + class: vue.normalizeClass(["arrow-down", vue.unref(ns).be("spinner", "arrow")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_down_default)) + ]), + _: 1 + }, 8, ["class"])), [ + [vue.unref(vRepeatClick), onIncrement] + ]), + vue.createElementVNode("ul", { + class: vue.normalizeClass(vue.unref(ns).be("spinner", "list")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(arrowControlTimeList)[item], (time, key) => { + return vue.openBlock(), vue.createElementBlock("li", { + key, + class: vue.normalizeClass([ + vue.unref(ns).be("spinner", "item"), + vue.unref(ns).is("active", time === vue.unref(timePartials)[item]), + vue.unref(ns).is("disabled", vue.unref(timeList)[item][time]) + ]) + }, [ + typeof time === "number" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + item === "hours" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.createTextVNode(vue.toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + vue.toDisplayString(getAmPmFlag(time)), 1) + ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [ + vue.createTextVNode(vue.toDisplayString(("0" + time).slice(-2)), 1) + ], 64)) + ], 64)) : vue.createCommentVNode("v-if", true) + ], 2); + }), 128)) + ], 2) + ], 42, _hoisted_2$C); + }), 128)) : vue.createCommentVNode("v-if", true) + ], 2); + }; + } + }); + var TimeSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["__file", "basic-time-spinner.vue"]]); + + const _sfc_main$1T = /* @__PURE__ */ vue.defineComponent({ + __name: "panel-time-pick", + props: panelTimePickerProps, + emits: ["pick", "select-range", "set-picker-option"], + setup(__props, { emit }) { + const props = __props; + const pickerBase = vue.inject("EP_PICKER_BASE"); + const { + arrowControl, + disabledHours, + disabledMinutes, + disabledSeconds, + defaultValue + } = pickerBase.props; + const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds); + const ns = useNamespace("time"); + const { t, lang } = useLocale(); + const selectionRange = vue.ref([0, 2]); + const oldValue = useOldValue(props); + const transitionName = vue.computed(() => { + return isUndefined(props.actualVisible) ? `${ns.namespace.value}-zoom-in-top` : ""; + }); + const showSeconds = vue.computed(() => { + return props.format.includes("ss"); + }); + const amPmMode = vue.computed(() => { + if (props.format.includes("A")) + return "A"; + if (props.format.includes("a")) + return "a"; + return ""; + }); + const isValidValue = (_date) => { + const parsedDate = dayjs(_date).locale(lang.value); + const result = getRangeAvailableTime(parsedDate); + return parsedDate.isSame(result); + }; + const handleCancel = () => { + emit("pick", oldValue.value, false); + }; + const handleConfirm = (visible = false, first = false) => { + if (first) + return; + emit("pick", props.parsedValue, visible); + }; + const handleChange = (_date) => { + if (!props.visible) { + return; + } + const result = getRangeAvailableTime(_date).millisecond(0); + emit("pick", result, true); + }; + const setSelectionRange = (start, end) => { + emit("select-range", start, end); + selectionRange.value = [start, end]; + }; + const changeSelectionRange = (step) => { + const list = [0, 3].concat(showSeconds.value ? [6] : []); + const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["seconds"] : []); + const index = list.indexOf(selectionRange.value[0]); + const next = (index + step + list.length) % list.length; + timePickerOptions["start_emitSelectRange"](mapping[next]); + }; + const handleKeydown = (event) => { + const code = event.code; + const { left, right, up, down } = EVENT_CODE; + if ([left, right].includes(code)) { + const step = code === left ? -1 : 1; + changeSelectionRange(step); + event.preventDefault(); + return; + } + if ([up, down].includes(code)) { + const step = code === up ? -1 : 1; + timePickerOptions["start_scrollDown"](step); + event.preventDefault(); + return; + } + }; + const { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({ + getAvailableHours, + getAvailableMinutes, + getAvailableSeconds + }); + const getRangeAvailableTime = (date) => { + return getAvailableTime(date, props.datetimeRole || "", true); + }; + const parseUserInput = (value) => { + if (!value) + return null; + return dayjs(value, props.format).locale(lang.value); + }; + const formatToString = (value) => { + if (!value) + return null; + return value.format(props.format); + }; + const getDefaultValue = () => { + return dayjs(defaultValue).locale(lang.value); + }; + emit("set-picker-option", ["isValidValue", isValidValue]); + emit("set-picker-option", ["formatToString", formatToString]); + emit("set-picker-option", ["parseUserInput", parseUserInput]); + emit("set-picker-option", ["handleKeydownInput", handleKeydown]); + emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]); + emit("set-picker-option", ["getDefaultValue", getDefaultValue]); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.Transition, { name: vue.unref(transitionName) }, { + default: vue.withCtx(() => [ + _ctx.actualVisible || _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).b("panel")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass([vue.unref(ns).be("panel", "content"), { "has-seconds": vue.unref(showSeconds) }]) + }, [ + vue.createVNode(TimeSpinner, { + ref: "spinner", + role: _ctx.datetimeRole || "start", + "arrow-control": vue.unref(arrowControl), + "show-seconds": vue.unref(showSeconds), + "am-pm-mode": vue.unref(amPmMode), + "spinner-date": _ctx.parsedValue, + "disabled-hours": vue.unref(disabledHours), + "disabled-minutes": vue.unref(disabledMinutes), + "disabled-seconds": vue.unref(disabledSeconds), + onChange: handleChange, + onSetOption: vue.unref(onSetOption), + onSelectRange: setSelectionRange + }, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onSetOption"]) + ], 2), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).be("panel", "footer")) + }, [ + vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(ns).be("panel", "btn"), "cancel"]), + onClick: handleCancel + }, vue.toDisplayString(vue.unref(t)("el.datepicker.cancel")), 3), + vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(ns).be("panel", "btn"), "confirm"]), + onClick: _cache[0] || (_cache[0] = ($event) => handleConfirm()) + }, vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 3) + ], 2) + ], 2)) : vue.createCommentVNode("v-if", true) + ]), + _: 1 + }, 8, ["name"]); + }; + } + }); + var TimePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1T, [["__file", "panel-time-pick.vue"]]); + + const panelTimeRangeProps = buildProps({ + ...timePanelSharedProps, + parsedValue: { + type: definePropType(Array) + } + }); + + const _hoisted_1$W = ["disabled"]; + const _sfc_main$1S = /* @__PURE__ */ vue.defineComponent({ + __name: "panel-time-range", + props: panelTimeRangeProps, + emits: ["pick", "select-range", "set-picker-option"], + setup(__props, { emit }) { + const props = __props; + const makeSelectRange = (start, end) => { + const result = []; + for (let i = start; i <= end; i++) { + result.push(i); + } + return result; + }; + const { t, lang } = useLocale(); + const nsTime = useNamespace("time"); + const nsPicker = useNamespace("picker"); + const pickerBase = vue.inject("EP_PICKER_BASE"); + const { + arrowControl, + disabledHours, + disabledMinutes, + disabledSeconds, + defaultValue + } = pickerBase.props; + const startTime = vue.computed(() => props.parsedValue[0]); + const endTime = vue.computed(() => props.parsedValue[1]); + const oldValue = useOldValue(props); + const handleCancel = () => { + emit("pick", oldValue.value, false); + }; + const showSeconds = vue.computed(() => { + return props.format.includes("ss"); + }); + const amPmMode = vue.computed(() => { + if (props.format.includes("A")) + return "A"; + if (props.format.includes("a")) + return "a"; + return ""; + }); + const handleConfirm = (visible = false) => { + emit("pick", [startTime.value, endTime.value], visible); + }; + const handleMinChange = (date) => { + handleChange(date.millisecond(0), endTime.value); + }; + const handleMaxChange = (date) => { + handleChange(startTime.value, date.millisecond(0)); + }; + const isValidValue = (_date) => { + const parsedDate = _date.map((_) => dayjs(_).locale(lang.value)); + const result = getRangeAvailableTime(parsedDate); + return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1]); + }; + const handleChange = (start, end) => { + emit("pick", [start, end], true); + }; + const btnConfirmDisabled = vue.computed(() => { + return startTime.value > endTime.value; + }); + const selectionRange = vue.ref([0, 2]); + const setMinSelectionRange = (start, end) => { + emit("select-range", start, end, "min"); + selectionRange.value = [start, end]; + }; + const offset = vue.computed(() => showSeconds.value ? 11 : 8); + const setMaxSelectionRange = (start, end) => { + emit("select-range", start, end, "max"); + const _offset = vue.unref(offset); + selectionRange.value = [start + _offset, end + _offset]; + }; + const changeSelectionRange = (step) => { + const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11]; + const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["seconds"] : []); + const index = list.indexOf(selectionRange.value[0]); + const next = (index + step + list.length) % list.length; + const half = list.length / 2; + if (next < half) { + timePickerOptions["start_emitSelectRange"](mapping[next]); + } else { + timePickerOptions["end_emitSelectRange"](mapping[next - half]); + } + }; + const handleKeydown = (event) => { + const code = event.code; + const { left, right, up, down } = EVENT_CODE; + if ([left, right].includes(code)) { + const step = code === left ? -1 : 1; + changeSelectionRange(step); + event.preventDefault(); + return; + } + if ([up, down].includes(code)) { + const step = code === up ? -1 : 1; + const role = selectionRange.value[0] < offset.value ? "start" : "end"; + timePickerOptions[`${role}_scrollDown`](step); + event.preventDefault(); + return; + } + }; + const disabledHours_ = (role, compare) => { + const defaultDisable = disabledHours ? disabledHours(role) : []; + const isStart = role === "start"; + const compareDate = compare || (isStart ? endTime.value : startTime.value); + const compareHour = compareDate.hour(); + const nextDisable = isStart ? makeSelectRange(compareHour + 1, 23) : makeSelectRange(0, compareHour - 1); + return union(defaultDisable, nextDisable); + }; + const disabledMinutes_ = (hour, role, compare) => { + const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : []; + const isStart = role === "start"; + const compareDate = compare || (isStart ? endTime.value : startTime.value); + const compareHour = compareDate.hour(); + if (hour !== compareHour) { + return defaultDisable; + } + const compareMinute = compareDate.minute(); + const nextDisable = isStart ? makeSelectRange(compareMinute + 1, 59) : makeSelectRange(0, compareMinute - 1); + return union(defaultDisable, nextDisable); + }; + const disabledSeconds_ = (hour, minute, role, compare) => { + const defaultDisable = disabledSeconds ? disabledSeconds(hour, minute, role) : []; + const isStart = role === "start"; + const compareDate = compare || (isStart ? endTime.value : startTime.value); + const compareHour = compareDate.hour(); + const compareMinute = compareDate.minute(); + if (hour !== compareHour || minute !== compareMinute) { + return defaultDisable; + } + const compareSecond = compareDate.second(); + const nextDisable = isStart ? makeSelectRange(compareSecond + 1, 59) : makeSelectRange(0, compareSecond - 1); + return union(defaultDisable, nextDisable); + }; + const getRangeAvailableTime = ([start, end]) => { + return [ + getAvailableTime(start, "start", true, end), + getAvailableTime(end, "end", false, start) + ]; + }; + const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = buildAvailableTimeSlotGetter(disabledHours_, disabledMinutes_, disabledSeconds_); + const { + timePickerOptions, + getAvailableTime, + onSetOption + } = useTimePanel({ + getAvailableHours, + getAvailableMinutes, + getAvailableSeconds + }); + const parseUserInput = (days) => { + if (!days) + return null; + if (isArray$1(days)) { + return days.map((d) => dayjs(d, props.format).locale(lang.value)); + } + return dayjs(days, props.format).locale(lang.value); + }; + const formatToString = (days) => { + if (!days) + return null; + if (isArray$1(days)) { + return days.map((d) => d.format(props.format)); + } + return days.format(props.format); + }; + const getDefaultValue = () => { + if (isArray$1(defaultValue)) { + return defaultValue.map((d) => dayjs(d).locale(lang.value)); + } + const defaultDay = dayjs(defaultValue).locale(lang.value); + return [defaultDay, defaultDay.add(60, "m")]; + }; + emit("set-picker-option", ["formatToString", formatToString]); + emit("set-picker-option", ["parseUserInput", parseUserInput]); + emit("set-picker-option", ["isValidValue", isValidValue]); + emit("set-picker-option", ["handleKeydownInput", handleKeydown]); + emit("set-picker-option", ["getDefaultValue", getDefaultValue]); + emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]); + return (_ctx, _cache) => { + return _ctx.actualVisible ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass([vue.unref(nsTime).b("range-picker"), vue.unref(nsPicker).b("panel")]) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "content")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "cell")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "header")) + }, vue.toDisplayString(vue.unref(t)("el.datepicker.startTime")), 3), + vue.createElementVNode("div", { + class: vue.normalizeClass([ + vue.unref(nsTime).be("range-picker", "body"), + vue.unref(nsTime).be("panel", "content"), + vue.unref(nsTime).is("arrow", vue.unref(arrowControl)), + { "has-seconds": vue.unref(showSeconds) } + ]) + }, [ + vue.createVNode(TimeSpinner, { + ref: "minSpinner", + role: "start", + "show-seconds": vue.unref(showSeconds), + "am-pm-mode": vue.unref(amPmMode), + "arrow-control": vue.unref(arrowControl), + "spinner-date": vue.unref(startTime), + "disabled-hours": disabledHours_, + "disabled-minutes": disabledMinutes_, + "disabled-seconds": disabledSeconds_, + onChange: handleMinChange, + onSetOption: vue.unref(onSetOption), + onSelectRange: setMinSelectionRange + }, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "onSetOption"]) + ], 2) + ], 2), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "cell")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "header")) + }, vue.toDisplayString(vue.unref(t)("el.datepicker.endTime")), 3), + vue.createElementVNode("div", { + class: vue.normalizeClass([ + vue.unref(nsTime).be("range-picker", "body"), + vue.unref(nsTime).be("panel", "content"), + vue.unref(nsTime).is("arrow", vue.unref(arrowControl)), + { "has-seconds": vue.unref(showSeconds) } + ]) + }, [ + vue.createVNode(TimeSpinner, { + ref: "maxSpinner", + role: "end", + "show-seconds": vue.unref(showSeconds), + "am-pm-mode": vue.unref(amPmMode), + "arrow-control": vue.unref(arrowControl), + "spinner-date": vue.unref(endTime), + "disabled-hours": disabledHours_, + "disabled-minutes": disabledMinutes_, + "disabled-seconds": disabledSeconds_, + onChange: handleMaxChange, + onSetOption: vue.unref(onSetOption), + onSelectRange: setMaxSelectionRange + }, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "onSetOption"]) + ], 2) + ], 2) + ], 2), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(nsTime).be("panel", "footer")) + }, [ + vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(nsTime).be("panel", "btn"), "cancel"]), + onClick: _cache[0] || (_cache[0] = ($event) => handleCancel()) + }, vue.toDisplayString(vue.unref(t)("el.datepicker.cancel")), 3), + vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(nsTime).be("panel", "btn"), "confirm"]), + disabled: vue.unref(btnConfirmDisabled), + onClick: _cache[1] || (_cache[1] = ($event) => handleConfirm()) + }, vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 11, _hoisted_1$W) + ], 2) + ], 2)) : vue.createCommentVNode("v-if", true); + }; + } + }); + var TimeRangePanel = /* @__PURE__ */ _export_sfc(_sfc_main$1S, [["__file", "panel-time-range.vue"]]); + + dayjs.extend(customParseFormat); + var TimePicker = vue.defineComponent({ + name: "ElTimePicker", + install: null, + props: { + ...timePickerDefaultProps, + isRange: { + type: Boolean, + default: false + } + }, + emits: ["update:modelValue"], + setup(props, ctx) { + const commonPicker = vue.ref(); + const [type, Panel] = props.isRange ? ["timerange", TimeRangePanel] : ["time", TimePickPanel]; + const modelUpdater = (value) => ctx.emit("update:modelValue", value); + vue.provide("ElPopperOptions", props.popperOptions); + ctx.expose({ + focus: (e) => { + var _a; + (_a = commonPicker.value) == null ? void 0 : _a.handleFocusInput(e); + }, + blur: (e) => { + var _a; + (_a = commonPicker.value) == null ? void 0 : _a.handleBlurInput(e); + }, + handleOpen: () => { + var _a; + (_a = commonPicker.value) == null ? void 0 : _a.handleOpen(); + }, + handleClose: () => { + var _a; + (_a = commonPicker.value) == null ? void 0 : _a.handleClose(); + } + }); + return () => { + var _a; + const format = (_a = props.format) != null ? _a : DEFAULT_FORMATS_TIME; + return vue.createVNode(CommonPicker, vue.mergeProps(props, { + "ref": commonPicker, + "type": type, + "format": format, + "onUpdate:modelValue": modelUpdater + }), { + default: (props2) => vue.createVNode(Panel, props2, null) + }); + }; + } + }); + + const _TimePicker = TimePicker; + _TimePicker.install = (app) => { + app.component(_TimePicker.name, _TimePicker); + }; + const ElTimePicker = _TimePicker; + + const getPrevMonthLastDays = (date, count) => { + const lastDay = date.subtract(1, "month").endOf("month").date(); + return rangeArr(count).map((_, index) => lastDay - (count - index - 1)); + }; + const getMonthDays = (date) => { + const days = date.daysInMonth(); + return rangeArr(days).map((_, index) => index + 1); + }; + const toNestedArr = (days) => rangeArr(days.length / 7).map((index) => { + const start = index * 7; + return days.slice(start, start + 7); + }); + const dateTableProps = buildProps({ + selectedDay: { + type: definePropType(Object) + }, + range: { + type: definePropType(Array) + }, + date: { + type: definePropType(Object), + required: true + }, + hideHeader: { + type: Boolean + } + }); + const dateTableEmits = { + pick: (value) => isObject$1(value) + }; + + var localeData$1 = {exports: {}}; + + (function(module, exports) { + !function(n, e) { + module.exports = e() ; + }(commonjsGlobal, function() { + return function(n, e, t) { + var r = e.prototype, o = function(n2) { + return n2 && (n2.indexOf ? n2 : n2.s); + }, u = function(n2, e2, t2, r2, u2) { + var i2 = n2.name ? n2 : n2.$locale(), a2 = o(i2[e2]), s2 = o(i2[t2]), f = a2 || s2.map(function(n3) { + return n3.slice(0, r2); + }); + if (!u2) + return f; + var d = i2.weekStart; + return f.map(function(n3, e3) { + return f[(e3 + (d || 0)) % 7]; + }); + }, i = function() { + return t.Ls[t.locale()]; + }, a = function(n2, e2) { + return n2.formats[e2] || function(n3) { + return n3.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function(n4, e3, t2) { + return e3 || t2.slice(1); + }); + }(n2.formats[e2.toUpperCase()]); + }, s = function() { + var n2 = this; + return { months: function(e2) { + return e2 ? e2.format("MMMM") : u(n2, "months"); + }, monthsShort: function(e2) { + return e2 ? e2.format("MMM") : u(n2, "monthsShort", "months", 3); + }, firstDayOfWeek: function() { + return n2.$locale().weekStart || 0; + }, weekdays: function(e2) { + return e2 ? e2.format("dddd") : u(n2, "weekdays"); + }, weekdaysMin: function(e2) { + return e2 ? e2.format("dd") : u(n2, "weekdaysMin", "weekdays", 2); + }, weekdaysShort: function(e2) { + return e2 ? e2.format("ddd") : u(n2, "weekdaysShort", "weekdays", 3); + }, longDateFormat: function(e2) { + return a(n2.$locale(), e2); + }, meridiem: this.$locale().meridiem, ordinal: this.$locale().ordinal }; + }; + r.localeData = function() { + return s.bind(this)(); + }, t.localeData = function() { + var n2 = i(); + return { firstDayOfWeek: function() { + return n2.weekStart || 0; + }, weekdays: function() { + return t.weekdays(); + }, weekdaysShort: function() { + return t.weekdaysShort(); + }, weekdaysMin: function() { + return t.weekdaysMin(); + }, months: function() { + return t.months(); + }, monthsShort: function() { + return t.monthsShort(); + }, longDateFormat: function(e2) { + return a(n2, e2); + }, meridiem: n2.meridiem, ordinal: n2.ordinal }; + }, t.months = function() { + return u(i(), "months"); + }, t.monthsShort = function() { + return u(i(), "monthsShort", "months", 3); + }, t.weekdays = function(n2) { + return u(i(), "weekdays", null, null, n2); + }, t.weekdaysShort = function(n2) { + return u(i(), "weekdaysShort", "weekdays", 3, n2); + }, t.weekdaysMin = function(n2) { + return u(i(), "weekdaysMin", "weekdays", 2, n2); + }; + }; + }); + })(localeData$1); + var localeData = localeData$1.exports; + + const useDateTable = (props, emit) => { + dayjs.extend(localeData); + const firstDayOfWeek = dayjs.localeData().firstDayOfWeek(); + const { t, lang } = useLocale(); + const now = dayjs().locale(lang.value); + const isInRange = vue.computed(() => !!props.range && !!props.range.length); + const rows = vue.computed(() => { + let days = []; + if (isInRange.value) { + const [start, end] = props.range; + const currentMonthRange = rangeArr(end.date() - start.date() + 1).map((index) => ({ + text: start.date() + index, + type: "current" + })); + let remaining = currentMonthRange.length % 7; + remaining = remaining === 0 ? 0 : 7 - remaining; + const nextMonthRange = rangeArr(remaining).map((_, index) => ({ + text: index + 1, + type: "next" + })); + days = currentMonthRange.concat(nextMonthRange); + } else { + const firstDay = props.date.startOf("month").day(); + const prevMonthDays = getPrevMonthLastDays(props.date, (firstDay - firstDayOfWeek + 7) % 7).map((day) => ({ + text: day, + type: "prev" + })); + const currentMonthDays = getMonthDays(props.date).map((day) => ({ + text: day, + type: "current" + })); + days = [...prevMonthDays, ...currentMonthDays]; + const remaining = 7 - (days.length % 7 || 7); + const nextMonthDays = rangeArr(remaining).map((_, index) => ({ + text: index + 1, + type: "next" + })); + days = days.concat(nextMonthDays); + } + return toNestedArr(days); + }); + const weekDays = vue.computed(() => { + const start = firstDayOfWeek; + if (start === 0) { + return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`)); + } else { + return WEEK_DAYS.slice(start).concat(WEEK_DAYS.slice(0, start)).map((_) => t(`el.datepicker.weeks.${_}`)); + } + }); + const getFormattedDate = (day, type) => { + switch (type) { + case "prev": + return props.date.startOf("month").subtract(1, "month").date(day); + case "next": + return props.date.startOf("month").add(1, "month").date(day); + case "current": + return props.date.date(day); + } + }; + const handlePickDay = ({ text, type }) => { + const date = getFormattedDate(text, type); + emit("pick", date); + }; + const getSlotData = ({ text, type }) => { + const day = getFormattedDate(text, type); + return { + isSelected: day.isSame(props.selectedDay), + type: `${type}-month`, + day: day.format("YYYY-MM-DD"), + date: day.toDate() + }; + }; + return { + now, + isInRange, + rows, + weekDays, + getFormattedDate, + handlePickDay, + getSlotData + }; + }; + + const _hoisted_1$V = { key: 0 }; + const _hoisted_2$B = ["onClick"]; + const __default__$1f = vue.defineComponent({ + name: "DateTable" + }); + const _sfc_main$1R = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1f, + props: dateTableProps, + emits: dateTableEmits, + setup(__props, { expose, emit }) { + const props = __props; + const { + isInRange, + now, + rows, + weekDays, + getFormattedDate, + handlePickDay, + getSlotData + } = useDateTable(props, emit); + const nsTable = useNamespace("calendar-table"); + const nsDay = useNamespace("calendar-day"); + const getCellClass = ({ text, type }) => { + const classes = [type]; + if (type === "current") { + const date = getFormattedDate(text, type); + if (date.isSame(props.selectedDay, "day")) { + classes.push(nsDay.is("selected")); + } + if (date.isSame(now, "day")) { + classes.push(nsDay.is("today")); + } + } + return classes; + }; + expose({ + getFormattedDate + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("table", { + class: vue.normalizeClass([vue.unref(nsTable).b(), vue.unref(nsTable).is("range", vue.unref(isInRange))]), + cellspacing: "0", + cellpadding: "0" + }, [ + !_ctx.hideHeader ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1$V, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(weekDays), (day) => { + return vue.openBlock(), vue.createElementBlock("th", { key: day }, vue.toDisplayString(day), 1); + }), 128)) + ])) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("tbody", null, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rows), (row, index) => { + return vue.openBlock(), vue.createElementBlock("tr", { + key: index, + class: vue.normalizeClass({ + [vue.unref(nsTable).e("row")]: true, + [vue.unref(nsTable).em("row", "hide-border")]: index === 0 && _ctx.hideHeader + }) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, key) => { + return vue.openBlock(), vue.createElementBlock("td", { + key, + class: vue.normalizeClass(getCellClass(cell)), + onClick: ($event) => vue.unref(handlePickDay)(cell) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(nsDay).b()) + }, [ + vue.renderSlot(_ctx.$slots, "date-cell", { + data: vue.unref(getSlotData)(cell) + }, () => [ + vue.createElementVNode("span", null, vue.toDisplayString(cell.text), 1) + ]) + ], 2) + ], 10, _hoisted_2$B); + }), 128)) + ], 2); + }), 128)) + ]) + ], 2); + }; + } + }); + var DateTable$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1R, [["__file", "date-table.vue"]]); + + const adjacentMonth = (start, end) => { + const firstMonthLastDay = start.endOf("month"); + const lastMonthFirstDay = end.startOf("month"); + const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, "week"); + const lastMonthStartDay = isSameWeek ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay; + return [ + [start, firstMonthLastDay], + [lastMonthStartDay.startOf("week"), end] + ]; + }; + const threeConsecutiveMonth = (start, end) => { + const firstMonthLastDay = start.endOf("month"); + const secondMonthFirstDay = start.add(1, "month").startOf("month"); + const secondMonthStartDay = firstMonthLastDay.isSame(secondMonthFirstDay, "week") ? secondMonthFirstDay.add(1, "week") : secondMonthFirstDay; + const secondMonthLastDay = secondMonthStartDay.endOf("month"); + const lastMonthFirstDay = end.startOf("month"); + const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, "week") ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay; + return [ + [start, firstMonthLastDay], + [secondMonthStartDay.startOf("week"), secondMonthLastDay], + [lastMonthStartDay.startOf("week"), end] + ]; + }; + const useCalendar = (props, emit, componentName) => { + const slots = vue.useSlots(); + const { lang } = useLocale(); + const selectedDay = vue.ref(); + const now = dayjs().locale(lang.value); + const realSelectedDay = vue.computed({ + get() { + if (!props.modelValue) + return selectedDay.value; + return date.value; + }, + set(val) { + if (!val) + return; + selectedDay.value = val; + const result = val.toDate(); + emit(INPUT_EVENT, result); + emit(UPDATE_MODEL_EVENT, result); + } + }); + const validatedRange = vue.computed(() => { + if (!props.range) + return []; + const rangeArrDayjs = props.range.map((_) => dayjs(_).locale(lang.value)); + const [startDayjs, endDayjs] = rangeArrDayjs; + if (startDayjs.isAfter(endDayjs)) { + return []; + } + if (startDayjs.isSame(endDayjs, "month")) { + return calculateValidatedDateRange(startDayjs, endDayjs); + } else { + if (startDayjs.add(1, "month").month() !== endDayjs.month()) { + return []; + } + return calculateValidatedDateRange(startDayjs, endDayjs); + } + }); + const date = vue.computed(() => { + if (!props.modelValue) { + return realSelectedDay.value || (validatedRange.value.length ? validatedRange.value[0][0] : now); + } else { + return dayjs(props.modelValue).locale(lang.value); + } + }); + const prevMonthDayjs = vue.computed(() => date.value.subtract(1, "month").date(1)); + const nextMonthDayjs = vue.computed(() => date.value.add(1, "month").date(1)); + const prevYearDayjs = vue.computed(() => date.value.subtract(1, "year").date(1)); + const nextYearDayjs = vue.computed(() => date.value.add(1, "year").date(1)); + const calculateValidatedDateRange = (startDayjs, endDayjs) => { + const firstDay = startDayjs.startOf("week"); + const lastDay = endDayjs.endOf("week"); + const firstMonth = firstDay.get("month"); + const lastMonth = lastDay.get("month"); + if (firstMonth === lastMonth) { + return [[firstDay, lastDay]]; + } else if ((firstMonth + 1) % 12 === lastMonth) { + return adjacentMonth(firstDay, lastDay); + } else if (firstMonth + 2 === lastMonth || (firstMonth + 1) % 11 === lastMonth) { + return threeConsecutiveMonth(firstDay, lastDay); + } else { + return []; + } + }; + const pickDay = (day) => { + realSelectedDay.value = day; + }; + const selectDate = (type) => { + const dateMap = { + "prev-month": prevMonthDayjs.value, + "next-month": nextMonthDayjs.value, + "prev-year": prevYearDayjs.value, + "next-year": nextYearDayjs.value, + today: now + }; + const day = dateMap[type]; + if (!day.isSame(date.value, "day")) { + pickDay(day); + } + }; + useDeprecated({ + from: '"dateCell"', + replacement: '"date-cell"', + scope: "ElCalendar", + version: "2.3.0", + ref: "https://element-plus.org/en-US/component/calendar.html#slots", + type: "Slot" + }, vue.computed(() => !!slots.dateCell)); + return { + calculateValidatedDateRange, + date, + realSelectedDay, + pickDay, + selectDate, + validatedRange + }; + }; + + const isValidRange$1 = (range) => isArray$1(range) && range.length === 2 && range.every((item) => isDate$1(item)); + const calendarProps = buildProps({ + modelValue: { + type: Date + }, + range: { + type: definePropType(Array), + validator: isValidRange$1 + } + }); + const calendarEmits = { + [UPDATE_MODEL_EVENT]: (value) => isDate$1(value), + [INPUT_EVENT]: (value) => isDate$1(value) + }; + + const COMPONENT_NAME$g = "ElCalendar"; + const __default__$1e = vue.defineComponent({ + name: COMPONENT_NAME$g + }); + const _sfc_main$1Q = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1e, + props: calendarProps, + emits: calendarEmits, + setup(__props, { expose, emit }) { + const props = __props; + const ns = useNamespace("calendar"); + const { + calculateValidatedDateRange, + date, + pickDay, + realSelectedDay, + selectDate, + validatedRange + } = useCalendar(props, emit); + const { t } = useLocale(); + const i18nDate = vue.computed(() => { + const pickedMonth = `el.datepicker.month${date.value.format("M")}`; + return `${date.value.year()} ${t("el.datepicker.year")} ${t(pickedMonth)}`; + }); + expose({ + selectedDay: realSelectedDay, + pickDay, + selectDate, + calculateValidatedDateRange + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(ns).b()) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("header")) + }, [ + vue.renderSlot(_ctx.$slots, "header", { date: vue.unref(i18nDate) }, () => [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("title")) + }, vue.toDisplayString(vue.unref(i18nDate)), 3), + vue.unref(validatedRange).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("button-group")) + }, [ + vue.createVNode(vue.unref(ElButtonGroup$1), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(ElButton), { + size: "small", + onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(selectDate)("prev-month")) + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.prevMonth")), 1) + ]), + _: 1 + }), + vue.createVNode(vue.unref(ElButton), { + size: "small", + onClick: _cache[1] || (_cache[1] = ($event) => vue.unref(selectDate)("today")) + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.today")), 1) + ]), + _: 1 + }), + vue.createVNode(vue.unref(ElButton), { + size: "small", + onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(selectDate)("next-month")) + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.nextMonth")), 1) + ]), + _: 1 + }) + ]), + _: 1 + }) + ], 2)) : vue.createCommentVNode("v-if", true) + ]) + ], 2), + vue.unref(validatedRange).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("body")) + }, [ + vue.createVNode(DateTable$1, { + date: vue.unref(date), + "selected-day": vue.unref(realSelectedDay), + onPick: vue.unref(pickDay) + }, vue.createSlots({ _: 2 }, [ + _ctx.$slots["date-cell"] || _ctx.$slots.dateCell ? { + name: "date-cell", + fn: vue.withCtx((data) => [ + _ctx.$slots["date-cell"] ? vue.renderSlot(_ctx.$slots, "date-cell", vue.normalizeProps(vue.mergeProps({ key: 0 }, data))) : vue.renderSlot(_ctx.$slots, "dateCell", vue.normalizeProps(vue.mergeProps({ key: 1 }, data))) + ]) + } : void 0 + ]), 1032, ["date", "selected-day", "onPick"]) + ], 2)) : (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("body")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(validatedRange), (range_, index) => { + return vue.openBlock(), vue.createBlock(DateTable$1, { + key: index, + date: range_[0], + "selected-day": vue.unref(realSelectedDay), + range: range_, + "hide-header": index !== 0, + onPick: vue.unref(pickDay) + }, vue.createSlots({ _: 2 }, [ + _ctx.$slots["date-cell"] || _ctx.$slots.dateCell ? { + name: "date-cell", + fn: vue.withCtx((data) => [ + _ctx.$slots["date-cell"] ? vue.renderSlot(_ctx.$slots, "date-cell", vue.normalizeProps(vue.mergeProps({ key: 0 }, data))) : vue.renderSlot(_ctx.$slots, "dateCell", vue.normalizeProps(vue.mergeProps({ key: 1 }, data))) + ]) + } : void 0 + ]), 1032, ["date", "selected-day", "range", "hide-header", "onPick"]); + }), 128)) + ], 2)) + ], 2); + }; + } + }); + var Calendar = /* @__PURE__ */ _export_sfc(_sfc_main$1Q, [["__file", "calendar.vue"]]); + + const ElCalendar = withInstall(Calendar); + + const cardProps = buildProps({ + header: { + type: String, + default: "" + }, + bodyStyle: { + type: definePropType([String, Object, Array]), + default: "" + }, + shadow: { + type: String, + values: ["always", "hover", "never"], + default: "always" + } + }); + + const __default__$1d = vue.defineComponent({ + name: "ElCard" + }); + const _sfc_main$1P = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1d, + props: cardProps, + setup(__props) { + const ns = useNamespace("card"); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).is(`${_ctx.shadow}-shadow`)]) + }, [ + _ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("header")) + }, [ + vue.renderSlot(_ctx.$slots, "header", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.header), 1) + ]) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("body")), + style: vue.normalizeStyle(_ctx.bodyStyle) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 6) + ], 2); + }; + } + }); + var Card = /* @__PURE__ */ _export_sfc(_sfc_main$1P, [["__file", "card.vue"]]); + + const ElCard = withInstall(Card); + + const carouselProps = buildProps({ + initialIndex: { + type: Number, + default: 0 + }, + height: { + type: String, + default: "" + }, + trigger: { + type: String, + values: ["hover", "click"], + default: "hover" + }, + autoplay: { + type: Boolean, + default: true + }, + interval: { + type: Number, + default: 3e3 + }, + indicatorPosition: { + type: String, + values: ["", "none", "outside"], + default: "" + }, + arrow: { + type: String, + values: ["always", "hover", "never"], + default: "hover" + }, + type: { + type: String, + values: ["", "card"], + default: "" + }, + loop: { + type: Boolean, + default: true + }, + direction: { + type: String, + values: ["horizontal", "vertical"], + default: "horizontal" + }, + pauseOnHover: { + type: Boolean, + default: true + } + }); + const carouselEmits = { + change: (current, prev) => [current, prev].every(isNumber$1) + }; + + const carouselContextKey = Symbol("carouselContextKey"); + + const THROTTLE_TIME = 300; + const useCarousel = (props, emit, componentName) => { + const { + children: items, + addChild: addItem, + removeChild: removeItem + } = useOrderedChildren(vue.getCurrentInstance(), "ElCarouselItem"); + const activeIndex = vue.ref(-1); + const timer = vue.ref(null); + const hover = vue.ref(false); + const root = vue.ref(); + const arrowDisplay = vue.computed(() => props.arrow !== "never" && !vue.unref(isVertical)); + const hasLabel = vue.computed(() => { + return items.value.some((item) => item.props.label.toString().length > 0); + }); + const isCardType = vue.computed(() => props.type === "card"); + const isVertical = vue.computed(() => props.direction === "vertical"); + const throttledArrowClick = throttle((index) => { + setActiveItem(index); + }, THROTTLE_TIME, { trailing: true }); + const throttledIndicatorHover = throttle((index) => { + handleIndicatorHover(index); + }, THROTTLE_TIME); + function pauseTimer() { + if (timer.value) { + clearInterval(timer.value); + timer.value = null; + } + } + function startTimer() { + if (props.interval <= 0 || !props.autoplay || timer.value) + return; + timer.value = setInterval(() => playSlides(), props.interval); + } + const playSlides = () => { + if (activeIndex.value < items.value.length - 1) { + activeIndex.value = activeIndex.value + 1; + } else if (props.loop) { + activeIndex.value = 0; + } + }; + function setActiveItem(index) { + if (isString$1(index)) { + const filteredItems = items.value.filter((item) => item.props.name === index); + if (filteredItems.length > 0) { + index = items.value.indexOf(filteredItems[0]); + } + } + index = Number(index); + if (Number.isNaN(index) || index !== Math.floor(index)) { + return; + } + const itemCount = items.value.length; + const oldIndex = activeIndex.value; + if (index < 0) { + activeIndex.value = props.loop ? itemCount - 1 : 0; + } else if (index >= itemCount) { + activeIndex.value = props.loop ? 0 : itemCount - 1; + } else { + activeIndex.value = index; + } + if (oldIndex === activeIndex.value) { + resetItemPosition(oldIndex); + } + resetTimer(); + } + function resetItemPosition(oldIndex) { + items.value.forEach((item, index) => { + item.translateItem(index, activeIndex.value, oldIndex); + }); + } + function itemInStage(item, index) { + var _a, _b, _c, _d; + const _items = vue.unref(items); + const itemCount = _items.length; + if (itemCount === 0 || !item.states.inStage) + return false; + const nextItemIndex = index + 1; + const prevItemIndex = index - 1; + const lastItemIndex = itemCount - 1; + const isLastItemActive = _items[lastItemIndex].states.active; + const isFirstItemActive = _items[0].states.active; + const isNextItemActive = (_b = (_a = _items[nextItemIndex]) == null ? void 0 : _a.states) == null ? void 0 : _b.active; + const isPrevItemActive = (_d = (_c = _items[prevItemIndex]) == null ? void 0 : _c.states) == null ? void 0 : _d.active; + if (index === lastItemIndex && isFirstItemActive || isNextItemActive) { + return "left"; + } else if (index === 0 && isLastItemActive || isPrevItemActive) { + return "right"; + } + return false; + } + function handleMouseEnter() { + hover.value = true; + if (props.pauseOnHover) { + pauseTimer(); + } + } + function handleMouseLeave() { + hover.value = false; + startTimer(); + } + function handleButtonEnter(arrow) { + if (vue.unref(isVertical)) + return; + items.value.forEach((item, index) => { + if (arrow === itemInStage(item, index)) { + item.states.hover = true; + } + }); + } + function handleButtonLeave() { + if (vue.unref(isVertical)) + return; + items.value.forEach((item) => { + item.states.hover = false; + }); + } + function handleIndicatorClick(index) { + activeIndex.value = index; + } + function handleIndicatorHover(index) { + if (props.trigger === "hover" && index !== activeIndex.value) { + activeIndex.value = index; + } + } + function prev() { + setActiveItem(activeIndex.value - 1); + } + function next() { + setActiveItem(activeIndex.value + 1); + } + function resetTimer() { + pauseTimer(); + startTimer(); + } + vue.watch(() => activeIndex.value, (current, prev2) => { + resetItemPosition(prev2); + if (prev2 > -1) { + emit("change", current, prev2); + } + }); + vue.watch(() => props.autoplay, (autoplay) => { + autoplay ? startTimer() : pauseTimer(); + }); + vue.watch(() => props.loop, () => { + setActiveItem(activeIndex.value); + }); + vue.watch(() => props.interval, () => { + resetTimer(); + }); + vue.watch(() => items.value, () => { + if (items.value.length > 0) + setActiveItem(props.initialIndex); + }); + const resizeObserver = vue.shallowRef(); + vue.onMounted(() => { + resizeObserver.value = useResizeObserver(root.value, () => { + resetItemPosition(); + }); + startTimer(); + }); + vue.onBeforeUnmount(() => { + pauseTimer(); + if (root.value && resizeObserver.value) + resizeObserver.value.stop(); + }); + vue.provide(carouselContextKey, { + root, + isCardType, + isVertical, + items, + loop: props.loop, + addItem, + removeItem, + setActiveItem + }); + return { + root, + activeIndex, + arrowDisplay, + hasLabel, + hover, + isCardType, + items, + handleButtonEnter, + handleButtonLeave, + handleIndicatorClick, + handleMouseEnter, + handleMouseLeave, + setActiveItem, + prev, + next, + throttledArrowClick, + throttledIndicatorHover + }; + }; + + const _hoisted_1$U = ["onMouseenter", "onClick"]; + const _hoisted_2$A = { key: 0 }; + const COMPONENT_NAME$f = "ElCarousel"; + const __default__$1c = vue.defineComponent({ + name: COMPONENT_NAME$f + }); + const _sfc_main$1O = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1c, + props: carouselProps, + emits: carouselEmits, + setup(__props, { expose, emit }) { + const props = __props; + const { + root, + activeIndex, + arrowDisplay, + hasLabel, + hover, + isCardType, + items, + handleButtonEnter, + handleButtonLeave, + handleIndicatorClick, + handleMouseEnter, + handleMouseLeave, + setActiveItem, + prev, + next, + throttledArrowClick, + throttledIndicatorHover + } = useCarousel(props, emit); + const ns = useNamespace("carousel"); + const carouselClasses = vue.computed(() => { + const classes = [ns.b(), ns.m(props.direction)]; + if (vue.unref(isCardType)) { + classes.push(ns.m("card")); + } + return classes; + }); + const indicatorsClasses = vue.computed(() => { + const classes = [ns.e("indicators"), ns.em("indicators", props.direction)]; + if (vue.unref(hasLabel)) { + classes.push(ns.em("indicators", "labels")); + } + if (props.indicatorPosition === "outside" || vue.unref(isCardType)) { + classes.push(ns.em("indicators", "outside")); + } + return classes; + }); + expose({ + setActiveItem, + prev, + next + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + ref_key: "root", + ref: root, + class: vue.normalizeClass(vue.unref(carouselClasses)), + onMouseenter: _cache[6] || (_cache[6] = vue.withModifiers((...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args), ["stop"])), + onMouseleave: _cache[7] || (_cache[7] = vue.withModifiers((...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args), ["stop"])) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("container")), + style: vue.normalizeStyle({ height: _ctx.height }) + }, [ + vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, { + key: 0, + name: "carousel-arrow-left", + persisted: "" + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "left")]), + onMouseenter: _cache[0] || (_cache[0] = ($event) => vue.unref(handleButtonEnter)("left")), + onMouseleave: _cache[1] || (_cache[1] = (...args) => vue.unref(handleButtonLeave) && vue.unref(handleButtonLeave)(...args)), + onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) - 1), ["stop"])) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_left_default)) + ]), + _: 1 + }) + ], 34), [ + [ + vue.vShow, + (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) > 0) + ] + ]) + ]), + _: 1 + })) : vue.createCommentVNode("v-if", true), + vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, { + key: 1, + name: "carousel-arrow-right", + persisted: "" + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "right")]), + onMouseenter: _cache[3] || (_cache[3] = ($event) => vue.unref(handleButtonEnter)("right")), + onMouseleave: _cache[4] || (_cache[4] = (...args) => vue.unref(handleButtonLeave) && vue.unref(handleButtonLeave)(...args)), + onClick: _cache[5] || (_cache[5] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) + 1), ["stop"])) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_right_default)) + ]), + _: 1 + }) + ], 34), [ + [ + vue.vShow, + (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) < vue.unref(items).length - 1) + ] + ]) + ]), + _: 1 + })) : vue.createCommentVNode("v-if", true), + vue.renderSlot(_ctx.$slots, "default") + ], 6), + _ctx.indicatorPosition !== "none" ? (vue.openBlock(), vue.createElementBlock("ul", { + key: 0, + class: vue.normalizeClass(vue.unref(indicatorsClasses)) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (item, index) => { + return vue.openBlock(), vue.createElementBlock("li", { + key: index, + class: vue.normalizeClass([ + vue.unref(ns).e("indicator"), + vue.unref(ns).em("indicator", _ctx.direction), + vue.unref(ns).is("active", index === vue.unref(activeIndex)) + ]), + onMouseenter: ($event) => vue.unref(throttledIndicatorHover)(index), + onClick: vue.withModifiers(($event) => vue.unref(handleIndicatorClick)(index), ["stop"]) + }, [ + vue.createElementVNode("button", { + class: vue.normalizeClass(vue.unref(ns).e("button")) + }, [ + vue.unref(hasLabel) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$A, vue.toDisplayString(item.props.label), 1)) : vue.createCommentVNode("v-if", true) + ], 2) + ], 42, _hoisted_1$U); + }), 128)) + ], 2)) : vue.createCommentVNode("v-if", true) + ], 34); + }; + } + }); + var Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$1O, [["__file", "carousel.vue"]]); + + const carouselItemProps = buildProps({ + name: { type: String, default: "" }, + label: { + type: [String, Number], + default: "" + } + }); + + const useCarouselItem = (props, componentName) => { + const carouselContext = vue.inject(carouselContextKey); + const instance = vue.getCurrentInstance(); + const CARD_SCALE = 0.83; + const hover = vue.ref(false); + const translate = vue.ref(0); + const scale = vue.ref(1); + const active = vue.ref(false); + const ready = vue.ref(false); + const inStage = vue.ref(false); + const animating = vue.ref(false); + const { isCardType, isVertical } = carouselContext; + function processIndex(index, activeIndex, length) { + const lastItemIndex = length - 1; + const prevItemIndex = activeIndex - 1; + const nextItemIndex = activeIndex + 1; + const halfItemIndex = length / 2; + if (activeIndex === 0 && index === lastItemIndex) { + return -1; + } else if (activeIndex === lastItemIndex && index === 0) { + return length; + } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) { + return length + 1; + } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) { + return -2; + } + return index; + } + function calcCardTranslate(index, activeIndex) { + var _a; + const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0; + if (inStage.value) { + return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4; + } else if (index < activeIndex) { + return -(1 + CARD_SCALE) * parentWidth / 4; + } else { + return (3 + CARD_SCALE) * parentWidth / 4; + } + } + function calcTranslate(index, activeIndex, isVertical2) { + const rootEl = carouselContext.root.value; + if (!rootEl) + return 0; + const distance = (isVertical2 ? rootEl.offsetHeight : rootEl.offsetWidth) || 0; + return distance * (index - activeIndex); + } + const translateItem = (index, activeIndex, oldIndex) => { + var _a; + const _isCardType = vue.unref(isCardType); + const carouselItemLength = (_a = carouselContext.items.value.length) != null ? _a : Number.NaN; + const isActive = index === activeIndex; + if (!_isCardType && !isUndefined(oldIndex)) { + animating.value = isActive || index === oldIndex; + } + if (!isActive && carouselItemLength > 2 && carouselContext.loop) { + index = processIndex(index, activeIndex, carouselItemLength); + } + const _isVertical = vue.unref(isVertical); + active.value = isActive; + if (_isCardType) { + inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1; + translate.value = calcCardTranslate(index, activeIndex); + scale.value = vue.unref(active) ? 1 : CARD_SCALE; + } else { + translate.value = calcTranslate(index, activeIndex, _isVertical); + } + ready.value = true; + }; + function handleItemClick() { + if (carouselContext && vue.unref(isCardType)) { + const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid); + carouselContext.setActiveItem(index); + } + } + vue.onMounted(() => { + carouselContext.addItem({ + props, + states: vue.reactive({ + hover, + translate, + scale, + active, + ready, + inStage, + animating + }), + uid: instance.uid, + translateItem + }); + }); + vue.onUnmounted(() => { + carouselContext.removeItem(instance.uid); + }); + return { + active, + animating, + hover, + inStage, + isVertical, + translate, + isCardType, + scale, + ready, + handleItemClick + }; + }; + + const __default__$1b = vue.defineComponent({ + name: "ElCarouselItem" + }); + const _sfc_main$1N = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1b, + props: carouselItemProps, + setup(__props) { + const props = __props; + const ns = useNamespace("carousel"); + const { + active, + animating, + hover, + inStage, + isVertical, + translate, + isCardType, + scale, + ready, + handleItemClick + } = useCarouselItem(props); + const itemStyle = vue.computed(() => { + const translateType = `translate${vue.unref(isVertical) ? "Y" : "X"}`; + const _translate = `${translateType}(${vue.unref(translate)}px)`; + const _scale = `scale(${vue.unref(scale)})`; + const transform = [_translate, _scale].join(" "); + return { + transform + }; + }); + return (_ctx, _cache) => { + return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([ + vue.unref(ns).e("item"), + vue.unref(ns).is("active", vue.unref(active)), + vue.unref(ns).is("in-stage", vue.unref(inStage)), + vue.unref(ns).is("hover", vue.unref(hover)), + vue.unref(ns).is("animating", vue.unref(animating)), + { [vue.unref(ns).em("item", "card")]: vue.unref(isCardType) } + ]), + style: vue.normalizeStyle(vue.unref(itemStyle)), + onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleItemClick) && vue.unref(handleItemClick)(...args)) + }, [ + vue.unref(isCardType) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("mask")) + }, null, 2)), [ + [vue.vShow, !vue.unref(active)] + ]) : vue.createCommentVNode("v-if", true), + vue.renderSlot(_ctx.$slots, "default") + ], 6)), [ + [vue.vShow, vue.unref(ready)] + ]); + }; + } + }); + var CarouselItem = /* @__PURE__ */ _export_sfc(_sfc_main$1N, [["__file", "carousel-item.vue"]]); + + const ElCarousel = withInstall(Carousel, { + CarouselItem + }); + const ElCarouselItem = withNoopInstall(CarouselItem); + + const checkboxProps = { + modelValue: { + type: [Number, String, Boolean], + default: void 0 + }, + label: { + type: [String, Boolean, Number, Object] + }, + indeterminate: Boolean, + disabled: Boolean, + checked: Boolean, + name: { + type: String, + default: void 0 + }, + trueLabel: { + type: [String, Number], + default: void 0 + }, + falseLabel: { + type: [String, Number], + default: void 0 + }, + id: { + type: String, + default: void 0 + }, + controls: { + type: String, + default: void 0 + }, + border: Boolean, + size: useSizeProp, + tabindex: [String, Number], + validateEvent: { + type: Boolean, + default: true + } + }; + const checkboxEmits = { + [UPDATE_MODEL_EVENT]: (val) => isString$1(val) || isNumber$1(val) || isBoolean$1(val), + change: (val) => isString$1(val) || isNumber$1(val) || isBoolean$1(val) + }; + + const checkboxGroupContextKey = Symbol("checkboxGroupContextKey"); + + const useCheckboxDisabled = ({ + model, + isChecked + }) => { + const checkboxGroup = vue.inject(checkboxGroupContextKey, void 0); + const isLimitDisabled = vue.computed(() => { + var _a, _b; + const max = (_a = checkboxGroup == null ? void 0 : checkboxGroup.max) == null ? void 0 : _a.value; + const min = (_b = checkboxGroup == null ? void 0 : checkboxGroup.min) == null ? void 0 : _b.value; + return !isUndefined(max) && model.value.length >= max && !isChecked.value || !isUndefined(min) && model.value.length <= min && isChecked.value; + }); + const isDisabled = useFormDisabled(vue.computed(() => (checkboxGroup == null ? void 0 : checkboxGroup.disabled.value) || isLimitDisabled.value)); + return { + isDisabled, + isLimitDisabled + }; + }; + + const useCheckboxEvent = (props, { + model, + isLimitExceeded, + hasOwnLabel, + isDisabled, + isLabeledByFormItem + }) => { + const checkboxGroup = vue.inject(checkboxGroupContextKey, void 0); + const { formItem } = useFormItem(); + const { emit } = vue.getCurrentInstance(); + function getLabeledValue(value) { + var _a, _b; + return value === props.trueLabel || value === true ? (_a = props.trueLabel) != null ? _a : true : (_b = props.falseLabel) != null ? _b : false; + } + function emitChangeEvent(checked, e) { + emit("change", getLabeledValue(checked), e); + } + function handleChange(e) { + if (isLimitExceeded.value) + return; + const target = e.target; + emit("change", getLabeledValue(target.checked), e); + } + async function onClickRoot(e) { + if (isLimitExceeded.value) + return; + if (!hasOwnLabel.value && !isDisabled.value && isLabeledByFormItem.value) { + const eventTargets = e.composedPath(); + const hasLabel = eventTargets.some((item) => item.tagName === "LABEL"); + if (!hasLabel) { + model.value = getLabeledValue([false, props.falseLabel].includes(model.value)); + await vue.nextTick(); + emitChangeEvent(model.value, e); + } + } + } + const validateEvent = vue.computed(() => (checkboxGroup == null ? void 0 : checkboxGroup.validateEvent) || props.validateEvent); + vue.watch(() => props.modelValue, () => { + if (validateEvent.value) { + formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn()); + } + }); + return { + handleChange, + onClickRoot + }; + }; + + const useCheckboxModel = (props) => { + const selfModel = vue.ref(false); + const { emit } = vue.getCurrentInstance(); + const checkboxGroup = vue.inject(checkboxGroupContextKey, void 0); + const isGroup = vue.computed(() => isUndefined(checkboxGroup) === false); + const isLimitExceeded = vue.ref(false); + const model = vue.computed({ + get() { + var _a, _b; + return isGroup.value ? (_a = checkboxGroup == null ? void 0 : checkboxGroup.modelValue) == null ? void 0 : _a.value : (_b = props.modelValue) != null ? _b : selfModel.value; + }, + set(val) { + var _a, _b; + if (isGroup.value && isArray$1(val)) { + isLimitExceeded.value = ((_a = checkboxGroup == null ? void 0 : checkboxGroup.max) == null ? void 0 : _a.value) !== void 0 && val.length > (checkboxGroup == null ? void 0 : checkboxGroup.max.value); + isLimitExceeded.value === false && ((_b = checkboxGroup == null ? void 0 : checkboxGroup.changeEvent) == null ? void 0 : _b.call(checkboxGroup, val)); + } else { + emit(UPDATE_MODEL_EVENT, val); + selfModel.value = val; + } + } + }); + return { + model, + isGroup, + isLimitExceeded + }; + }; + + const useCheckboxStatus = (props, slots, { model }) => { + const checkboxGroup = vue.inject(checkboxGroupContextKey, void 0); + const isFocused = vue.ref(false); + const isChecked = vue.computed(() => { + const value = model.value; + if (isBoolean$1(value)) { + return value; + } else if (isArray$1(value)) { + if (isObject$1(props.label)) { + return value.map(vue.toRaw).some((o) => isEqual$1(o, props.label)); + } else { + return value.map(vue.toRaw).includes(props.label); + } + } else if (value !== null && value !== void 0) { + return value === props.trueLabel; + } else { + return !!value; + } + }); + const checkboxButtonSize = useFormSize(vue.computed(() => { + var _a; + return (_a = checkboxGroup == null ? void 0 : checkboxGroup.size) == null ? void 0 : _a.value; + }), { + prop: true + }); + const checkboxSize = useFormSize(vue.computed(() => { + var _a; + return (_a = checkboxGroup == null ? void 0 : checkboxGroup.size) == null ? void 0 : _a.value; + })); + const hasOwnLabel = vue.computed(() => { + return !!(slots.default || props.label); + }); + return { + checkboxButtonSize, + isChecked, + isFocused, + checkboxSize, + hasOwnLabel + }; + }; + + const setStoreValue = (props, { model }) => { + function addToStore() { + if (isArray$1(model.value) && !model.value.includes(props.label)) { + model.value.push(props.label); + } else { + model.value = props.trueLabel || true; + } + } + props.checked && addToStore(); + }; + const useCheckbox = (props, slots) => { + const { formItem: elFormItem } = useFormItem(); + const { model, isGroup, isLimitExceeded } = useCheckboxModel(props); + const { + isFocused, + isChecked, + checkboxButtonSize, + checkboxSize, + hasOwnLabel + } = useCheckboxStatus(props, slots, { model }); + const { isDisabled } = useCheckboxDisabled({ model, isChecked }); + const { inputId, isLabeledByFormItem } = useFormItemInputId(props, { + formItemContext: elFormItem, + disableIdGeneration: hasOwnLabel, + disableIdManagement: isGroup + }); + const { handleChange, onClickRoot } = useCheckboxEvent(props, { + model, + isLimitExceeded, + hasOwnLabel, + isDisabled, + isLabeledByFormItem + }); + setStoreValue(props, { model }); + return { + inputId, + isLabeledByFormItem, + isChecked, + isDisabled, + isFocused, + checkboxButtonSize, + checkboxSize, + hasOwnLabel, + model, + handleChange, + onClickRoot + }; + }; + + const _hoisted_1$T = ["tabindex", "role", "aria-checked"]; + const _hoisted_2$z = ["id", "aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"]; + const _hoisted_3$j = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"]; + const __default__$1a = vue.defineComponent({ + name: "ElCheckbox" + }); + const _sfc_main$1M = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1a, + props: checkboxProps, + emits: checkboxEmits, + setup(__props) { + const props = __props; + const slots = vue.useSlots(); + const { + inputId, + isLabeledByFormItem, + isChecked, + isDisabled, + isFocused, + checkboxSize, + hasOwnLabel, + model, + handleChange, + onClickRoot + } = useCheckbox(props, slots); + const ns = useNamespace("checkbox"); + const compKls = vue.computed(() => { + return [ + ns.b(), + ns.m(checkboxSize.value), + ns.is("disabled", isDisabled.value), + ns.is("bordered", props.border), + ns.is("checked", isChecked.value) + ]; + }); + const spanKls = vue.computed(() => { + return [ + ns.e("input"), + ns.is("disabled", isDisabled.value), + ns.is("checked", isChecked.value), + ns.is("indeterminate", props.indeterminate), + ns.is("focus", isFocused.value) + ]; + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(!vue.unref(hasOwnLabel) && vue.unref(isLabeledByFormItem) ? "span" : "label"), { + class: vue.normalizeClass(vue.unref(compKls)), + "aria-controls": _ctx.indeterminate ? _ctx.controls : null, + onClick: vue.unref(onClickRoot) + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(spanKls)), + tabindex: _ctx.indeterminate ? 0 : void 0, + role: _ctx.indeterminate ? "checkbox" : void 0, + "aria-checked": _ctx.indeterminate ? "mixed" : void 0 + }, [ + _ctx.trueLabel || _ctx.falseLabel ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", { + key: 0, + id: vue.unref(inputId), + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(model) ? model.value = $event : null), + class: vue.normalizeClass(vue.unref(ns).e("original")), + type: "checkbox", + "aria-hidden": _ctx.indeterminate ? "true" : "false", + name: _ctx.name, + tabindex: _ctx.tabindex, + disabled: vue.unref(isDisabled), + "true-value": _ctx.trueLabel, + "false-value": _ctx.falseLabel, + onChange: _cache[1] || (_cache[1] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)), + onFocus: _cache[2] || (_cache[2] = ($event) => isFocused.value = true), + onBlur: _cache[3] || (_cache[3] = ($event) => isFocused.value = false) + }, null, 42, _hoisted_2$z)), [ + [vue.vModelCheckbox, vue.unref(model)] + ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", { + key: 1, + id: vue.unref(inputId), + "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(model) ? model.value = $event : null), + class: vue.normalizeClass(vue.unref(ns).e("original")), + type: "checkbox", + "aria-hidden": _ctx.indeterminate ? "true" : "false", + disabled: vue.unref(isDisabled), + value: _ctx.label, + name: _ctx.name, + tabindex: _ctx.tabindex, + onChange: _cache[5] || (_cache[5] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)), + onFocus: _cache[6] || (_cache[6] = ($event) => isFocused.value = true), + onBlur: _cache[7] || (_cache[7] = ($event) => isFocused.value = false) + }, null, 42, _hoisted_3$j)), [ + [vue.vModelCheckbox, vue.unref(model)] + ]), + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(ns).e("inner")) + }, null, 2) + ], 10, _hoisted_1$T), + vue.unref(hasOwnLabel) ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("label")) + }, [ + vue.renderSlot(_ctx.$slots, "default"), + !_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.createTextVNode(vue.toDisplayString(_ctx.label), 1) + ], 64)) : vue.createCommentVNode("v-if", true) + ], 2)) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["class", "aria-controls", "onClick"]); + }; + } + }); + var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$1M, [["__file", "checkbox.vue"]]); + + const _hoisted_1$S = ["name", "tabindex", "disabled", "true-value", "false-value"]; + const _hoisted_2$y = ["name", "tabindex", "disabled", "value"]; + const __default__$19 = vue.defineComponent({ + name: "ElCheckboxButton" + }); + const _sfc_main$1L = /* @__PURE__ */ vue.defineComponent({ + ...__default__$19, + props: checkboxProps, + emits: checkboxEmits, + setup(__props) { + const props = __props; + const slots = vue.useSlots(); + const { + isFocused, + isChecked, + isDisabled, + checkboxButtonSize, + model, + handleChange + } = useCheckbox(props, slots); + const checkboxGroup = vue.inject(checkboxGroupContextKey, void 0); + const ns = useNamespace("checkbox"); + const activeStyle = vue.computed(() => { + var _a, _b, _c, _d; + const fillValue = (_b = (_a = checkboxGroup == null ? void 0 : checkboxGroup.fill) == null ? void 0 : _a.value) != null ? _b : ""; + return { + backgroundColor: fillValue, + borderColor: fillValue, + color: (_d = (_c = checkboxGroup == null ? void 0 : checkboxGroup.textColor) == null ? void 0 : _c.value) != null ? _d : "", + boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : void 0 + }; + }); + const labelKls = vue.computed(() => { + return [ + ns.b("button"), + ns.bm("button", checkboxButtonSize.value), + ns.is("disabled", isDisabled.value), + ns.is("checked", isChecked.value), + ns.is("focus", isFocused.value) + ]; + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("label", { + class: vue.normalizeClass(vue.unref(labelKls)) + }, [ + _ctx.trueLabel || _ctx.falseLabel ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", { + key: 0, + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(model) ? model.value = $event : null), + class: vue.normalizeClass(vue.unref(ns).be("button", "original")), + type: "checkbox", + name: _ctx.name, + tabindex: _ctx.tabindex, + disabled: vue.unref(isDisabled), + "true-value": _ctx.trueLabel, + "false-value": _ctx.falseLabel, + onChange: _cache[1] || (_cache[1] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)), + onFocus: _cache[2] || (_cache[2] = ($event) => isFocused.value = true), + onBlur: _cache[3] || (_cache[3] = ($event) => isFocused.value = false) + }, null, 42, _hoisted_1$S)), [ + [vue.vModelCheckbox, vue.unref(model)] + ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", { + key: 1, + "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(model) ? model.value = $event : null), + class: vue.normalizeClass(vue.unref(ns).be("button", "original")), + type: "checkbox", + name: _ctx.name, + tabindex: _ctx.tabindex, + disabled: vue.unref(isDisabled), + value: _ctx.label, + onChange: _cache[5] || (_cache[5] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)), + onFocus: _cache[6] || (_cache[6] = ($event) => isFocused.value = true), + onBlur: _cache[7] || (_cache[7] = ($event) => isFocused.value = false) + }, null, 42, _hoisted_2$y)), [ + [vue.vModelCheckbox, vue.unref(model)] + ]), + _ctx.$slots.default || _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", { + key: 2, + class: vue.normalizeClass(vue.unref(ns).be("button", "inner")), + style: vue.normalizeStyle(vue.unref(isChecked) ? vue.unref(activeStyle) : void 0) + }, [ + vue.renderSlot(_ctx.$slots, "default", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.label), 1) + ]) + ], 6)) : vue.createCommentVNode("v-if", true) + ], 2); + }; + } + }); + var CheckboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1L, [["__file", "checkbox-button.vue"]]); + + const checkboxGroupProps = buildProps({ + modelValue: { + type: definePropType(Array), + default: () => [] + }, + disabled: Boolean, + min: Number, + max: Number, + size: useSizeProp, + label: String, + fill: String, + textColor: String, + tag: { + type: String, + default: "div" + }, + validateEvent: { + type: Boolean, + default: true + } + }); + const checkboxGroupEmits = { + [UPDATE_MODEL_EVENT]: (val) => isArray$1(val), + change: (val) => isArray$1(val) + }; + + const __default__$18 = vue.defineComponent({ + name: "ElCheckboxGroup" + }); + const _sfc_main$1K = /* @__PURE__ */ vue.defineComponent({ + ...__default__$18, + props: checkboxGroupProps, + emits: checkboxGroupEmits, + setup(__props, { emit }) { + const props = __props; + const ns = useNamespace("checkbox"); + const { formItem } = useFormItem(); + const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, { + formItemContext: formItem + }); + const changeEvent = async (value) => { + emit(UPDATE_MODEL_EVENT, value); + await vue.nextTick(); + emit("change", value); + }; + const modelValue = vue.computed({ + get() { + return props.modelValue; + }, + set(val) { + changeEvent(val); + } + }); + vue.provide(checkboxGroupContextKey, { + ...pick(vue.toRefs(props), [ + "size", + "min", + "max", + "disabled", + "validateEvent", + "fill", + "textColor" + ]), + modelValue, + changeEvent + }); + vue.watch(() => props.modelValue, () => { + if (props.validateEvent) { + formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn()); + } + }); + return (_ctx, _cache) => { + var _a; + return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), { + id: vue.unref(groupId), + class: vue.normalizeClass(vue.unref(ns).b("group")), + role: "group", + "aria-label": !vue.unref(isLabeledByFormItem) ? _ctx.label || "checkbox-group" : void 0, + "aria-labelledby": vue.unref(isLabeledByFormItem) ? (_a = vue.unref(formItem)) == null ? void 0 : _a.labelId : void 0 + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["id", "class", "aria-label", "aria-labelledby"]); + }; + } + }); + var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["__file", "checkbox-group.vue"]]); + + const ElCheckbox = withInstall(Checkbox, { + CheckboxButton, + CheckboxGroup + }); + const ElCheckboxButton = withNoopInstall(CheckboxButton); + const ElCheckboxGroup$1 = withNoopInstall(CheckboxGroup); + + const radioPropsBase = buildProps({ + size: useSizeProp, + disabled: Boolean, + label: { + type: [String, Number, Boolean], + default: "" + } + }); + const radioProps = buildProps({ + ...radioPropsBase, + modelValue: { + type: [String, Number, Boolean], + default: "" + }, + name: { + type: String, + default: "" + }, + border: Boolean + }); + const radioEmits = { + [UPDATE_MODEL_EVENT]: (val) => isString$1(val) || isNumber$1(val) || isBoolean$1(val), + [CHANGE_EVENT]: (val) => isString$1(val) || isNumber$1(val) || isBoolean$1(val) + }; + + const radioGroupKey = Symbol("radioGroupKey"); + + const useRadio = (props, emit) => { + const radioRef = vue.ref(); + const radioGroup = vue.inject(radioGroupKey, void 0); + const isGroup = vue.computed(() => !!radioGroup); + const modelValue = vue.computed({ + get() { + return isGroup.value ? radioGroup.modelValue : props.modelValue; + }, + set(val) { + if (isGroup.value) { + radioGroup.changeEvent(val); + } else { + emit && emit(UPDATE_MODEL_EVENT, val); + } + radioRef.value.checked = props.modelValue === props.label; + } + }); + const size = useFormSize(vue.computed(() => radioGroup == null ? void 0 : radioGroup.size)); + const disabled = useFormDisabled(vue.computed(() => radioGroup == null ? void 0 : radioGroup.disabled)); + const focus = vue.ref(false); + const tabIndex = vue.computed(() => { + return disabled.value || isGroup.value && modelValue.value !== props.label ? -1 : 0; + }); + return { + radioRef, + isGroup, + radioGroup, + focus, + size, + disabled, + tabIndex, + modelValue + }; + }; + + const _hoisted_1$R = ["value", "name", "disabled"]; + const __default__$17 = vue.defineComponent({ + name: "ElRadio" + }); + const _sfc_main$1J = /* @__PURE__ */ vue.defineComponent({ + ...__default__$17, + props: radioProps, + emits: radioEmits, + setup(__props, { emit }) { + const props = __props; + const ns = useNamespace("radio"); + const { radioRef, radioGroup, focus, size, disabled, modelValue } = useRadio(props, emit); + function handleChange() { + vue.nextTick(() => emit("change", modelValue.value)); + } + return (_ctx, _cache) => { + var _a; + return vue.openBlock(), vue.createElementBlock("label", { + class: vue.normalizeClass([ + vue.unref(ns).b(), + vue.unref(ns).is("disabled", vue.unref(disabled)), + vue.unref(ns).is("focus", vue.unref(focus)), + vue.unref(ns).is("bordered", _ctx.border), + vue.unref(ns).is("checked", vue.unref(modelValue) === _ctx.label), + vue.unref(ns).m(vue.unref(size)) + ]) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass([ + vue.unref(ns).e("input"), + vue.unref(ns).is("disabled", vue.unref(disabled)), + vue.unref(ns).is("checked", vue.unref(modelValue) === _ctx.label) + ]) + }, [ + vue.withDirectives(vue.createElementVNode("input", { + ref_key: "radioRef", + ref: radioRef, + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(modelValue) ? modelValue.value = $event : null), + class: vue.normalizeClass(vue.unref(ns).e("original")), + value: _ctx.label, + name: _ctx.name || ((_a = vue.unref(radioGroup)) == null ? void 0 : _a.name), + disabled: vue.unref(disabled), + type: "radio", + onFocus: _cache[1] || (_cache[1] = ($event) => focus.value = true), + onBlur: _cache[2] || (_cache[2] = ($event) => focus.value = false), + onChange: handleChange + }, null, 42, _hoisted_1$R), [ + [vue.vModelRadio, vue.unref(modelValue)] + ]), + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(ns).e("inner")) + }, null, 2) + ], 2), + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(ns).e("label")), + onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => { + }, ["stop"])) + }, [ + vue.renderSlot(_ctx.$slots, "default", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.label), 1) + ]) + ], 34) + ], 2); + }; + } + }); + var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__file", "radio.vue"]]); + + const radioButtonProps = buildProps({ + ...radioPropsBase, + name: { + type: String, + default: "" + } + }); + + const _hoisted_1$Q = ["value", "name", "disabled"]; + const __default__$16 = vue.defineComponent({ + name: "ElRadioButton" + }); + const _sfc_main$1I = /* @__PURE__ */ vue.defineComponent({ + ...__default__$16, + props: radioButtonProps, + setup(__props) { + const props = __props; + const ns = useNamespace("radio"); + const { radioRef, focus, size, disabled, modelValue, radioGroup } = useRadio(props); + const activeStyle = vue.computed(() => { + return { + backgroundColor: (radioGroup == null ? void 0 : radioGroup.fill) || "", + borderColor: (radioGroup == null ? void 0 : radioGroup.fill) || "", + boxShadow: (radioGroup == null ? void 0 : radioGroup.fill) ? `-1px 0 0 0 ${radioGroup.fill}` : "", + color: (radioGroup == null ? void 0 : radioGroup.textColor) || "" + }; + }); + return (_ctx, _cache) => { + var _a; + return vue.openBlock(), vue.createElementBlock("label", { + class: vue.normalizeClass([ + vue.unref(ns).b("button"), + vue.unref(ns).is("active", vue.unref(modelValue) === _ctx.label), + vue.unref(ns).is("disabled", vue.unref(disabled)), + vue.unref(ns).is("focus", vue.unref(focus)), + vue.unref(ns).bm("button", vue.unref(size)) + ]) + }, [ + vue.withDirectives(vue.createElementVNode("input", { + ref_key: "radioRef", + ref: radioRef, + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(modelValue) ? modelValue.value = $event : null), + class: vue.normalizeClass(vue.unref(ns).be("button", "original-radio")), + value: _ctx.label, + type: "radio", + name: _ctx.name || ((_a = vue.unref(radioGroup)) == null ? void 0 : _a.name), + disabled: vue.unref(disabled), + onFocus: _cache[1] || (_cache[1] = ($event) => focus.value = true), + onBlur: _cache[2] || (_cache[2] = ($event) => focus.value = false) + }, null, 42, _hoisted_1$Q), [ + [vue.vModelRadio, vue.unref(modelValue)] + ]), + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(ns).be("button", "inner")), + style: vue.normalizeStyle(vue.unref(modelValue) === _ctx.label ? vue.unref(activeStyle) : {}), + onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => { + }, ["stop"])) + }, [ + vue.renderSlot(_ctx.$slots, "default", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.label), 1) + ]) + ], 38) + ], 2); + }; + } + }); + var RadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$1I, [["__file", "radio-button.vue"]]); + + const radioGroupProps = buildProps({ + id: { + type: String, + default: void 0 + }, + size: useSizeProp, + disabled: Boolean, + modelValue: { + type: [String, Number, Boolean], + default: "" + }, + fill: { + type: String, + default: "" + }, + label: { + type: String, + default: void 0 + }, + textColor: { + type: String, + default: "" + }, + name: { + type: String, + default: void 0 + }, + validateEvent: { + type: Boolean, + default: true + } + }); + const radioGroupEmits = radioEmits; + + const _hoisted_1$P = ["id", "aria-label", "aria-labelledby"]; + const __default__$15 = vue.defineComponent({ + name: "ElRadioGroup" + }); + const _sfc_main$1H = /* @__PURE__ */ vue.defineComponent({ + ...__default__$15, + props: radioGroupProps, + emits: radioGroupEmits, + setup(__props, { emit }) { + const props = __props; + const ns = useNamespace("radio"); + const radioId = useId(); + const radioGroupRef = vue.ref(); + const { formItem } = useFormItem(); + const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, { + formItemContext: formItem + }); + const changeEvent = (value) => { + emit(UPDATE_MODEL_EVENT, value); + vue.nextTick(() => emit("change", value)); + }; + vue.onMounted(() => { + const radios = radioGroupRef.value.querySelectorAll("[type=radio]"); + const firstLabel = radios[0]; + if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) { + firstLabel.tabIndex = 0; + } + }); + const name = vue.computed(() => { + return props.name || radioId.value; + }); + vue.provide(radioGroupKey, vue.reactive({ + ...vue.toRefs(props), + changeEvent, + name + })); + vue.watch(() => props.modelValue, () => { + if (props.validateEvent) { + formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn()); + } + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + id: vue.unref(groupId), + ref_key: "radioGroupRef", + ref: radioGroupRef, + class: vue.normalizeClass(vue.unref(ns).b("group")), + role: "radiogroup", + "aria-label": !vue.unref(isLabeledByFormItem) ? _ctx.label || "radio-group" : void 0, + "aria-labelledby": vue.unref(isLabeledByFormItem) ? vue.unref(formItem).labelId : void 0 + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 10, _hoisted_1$P); + }; + } + }); + var RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["__file", "radio-group.vue"]]); + + const ElRadio = withInstall(Radio, { + RadioButton, + RadioGroup + }); + const ElRadioGroup = withNoopInstall(RadioGroup); + const ElRadioButton = withNoopInstall(RadioButton); + + var NodeContent$1 = vue.defineComponent({ + name: "NodeContent", + setup() { + const ns = useNamespace("cascader-node"); + return { + ns + }; + }, + render() { + const { ns } = this; + const { node, panel } = this.$parent; + const { data, label } = node; + const { renderLabelFn } = panel; + return vue.h("span", { class: ns.e("label") }, renderLabelFn ? renderLabelFn({ node, data }) : label); + } + }); + + const CASCADER_PANEL_INJECTION_KEY = Symbol(); + + const _sfc_main$1G = vue.defineComponent({ + name: "ElCascaderNode", + components: { + ElCheckbox, + ElRadio, + NodeContent: NodeContent$1, + ElIcon, + Check: check_default, + Loading: loading_default, + ArrowRight: arrow_right_default + }, + props: { + node: { + type: Object, + required: true + }, + menuId: String + }, + emits: ["expand"], + setup(props, { emit }) { + const panel = vue.inject(CASCADER_PANEL_INJECTION_KEY); + const ns = useNamespace("cascader-node"); + const isHoverMenu = vue.computed(() => panel.isHoverMenu); + const multiple = vue.computed(() => panel.config.multiple); + const checkStrictly = vue.computed(() => panel.config.checkStrictly); + const checkedNodeId = vue.computed(() => { + var _a; + return (_a = panel.checkedNodes[0]) == null ? void 0 : _a.uid; + }); + const isDisabled = vue.computed(() => props.node.isDisabled); + const isLeaf = vue.computed(() => props.node.isLeaf); + const expandable = vue.computed(() => checkStrictly.value && !isLeaf.value || !isDisabled.value); + const inExpandingPath = vue.computed(() => isInPath(panel.expandingNode)); + const inCheckedPath = vue.computed(() => checkStrictly.value && panel.checkedNodes.some(isInPath)); + const isInPath = (node) => { + var _a; + const { level, uid } = props.node; + return ((_a = node == null ? void 0 : node.pathNodes[level - 1]) == null ? void 0 : _a.uid) === uid; + }; + const doExpand = () => { + if (inExpandingPath.value) + return; + panel.expandNode(props.node); + }; + const doCheck = (checked) => { + const { node } = props; + if (checked === node.checked) + return; + panel.handleCheckChange(node, checked); + }; + const doLoad = () => { + panel.lazyLoad(props.node, () => { + if (!isLeaf.value) + doExpand(); + }); + }; + const handleHoverExpand = (e) => { + if (!isHoverMenu.value) + return; + handleExpand(); + !isLeaf.value && emit("expand", e); + }; + const handleExpand = () => { + const { node } = props; + if (!expandable.value || node.loading) + return; + node.loaded ? doExpand() : doLoad(); + }; + const handleClick = () => { + if (isHoverMenu.value && !isLeaf.value) + return; + if (isLeaf.value && !isDisabled.value && !checkStrictly.value && !multiple.value) { + handleCheck(true); + } else { + handleExpand(); + } + }; + const handleSelectCheck = (checked) => { + if (checkStrictly.value) { + doCheck(checked); + if (props.node.loaded) { + doExpand(); + } + } else { + handleCheck(checked); + } + }; + const handleCheck = (checked) => { + if (!props.node.loaded) { + doLoad(); + } else { + doCheck(checked); + !checkStrictly.value && doExpand(); + } + }; + return { + panel, + isHoverMenu, + multiple, + checkStrictly, + checkedNodeId, + isDisabled, + isLeaf, + expandable, + inExpandingPath, + inCheckedPath, + ns, + handleHoverExpand, + handleExpand, + handleClick, + handleCheck, + handleSelectCheck + }; + } + }); + const _hoisted_1$O = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"]; + const _hoisted_2$x = /* @__PURE__ */ vue.createElementVNode("span", null, null, -1); + function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_checkbox = vue.resolveComponent("el-checkbox"); + const _component_el_radio = vue.resolveComponent("el-radio"); + const _component_check = vue.resolveComponent("check"); + const _component_el_icon = vue.resolveComponent("el-icon"); + const _component_node_content = vue.resolveComponent("node-content"); + const _component_loading = vue.resolveComponent("loading"); + const _component_arrow_right = vue.resolveComponent("arrow-right"); + return vue.openBlock(), vue.createElementBlock("li", { + id: `${_ctx.menuId}-${_ctx.node.uid}`, + role: "menuitem", + "aria-haspopup": !_ctx.isLeaf, + "aria-owns": _ctx.isLeaf ? null : _ctx.menuId, + "aria-expanded": _ctx.inExpandingPath, + tabindex: _ctx.expandable ? -1 : void 0, + class: vue.normalizeClass([ + _ctx.ns.b(), + _ctx.ns.is("selectable", _ctx.checkStrictly), + _ctx.ns.is("active", _ctx.node.checked), + _ctx.ns.is("disabled", !_ctx.expandable), + _ctx.inExpandingPath && "in-active-path", + _ctx.inCheckedPath && "in-checked-path" + ]), + onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.handleHoverExpand && _ctx.handleHoverExpand(...args)), + onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.handleHoverExpand && _ctx.handleHoverExpand(...args)), + onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)) + }, [ + vue.createCommentVNode(" prefix "), + _ctx.multiple ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, { + key: 0, + "model-value": _ctx.node.checked, + indeterminate: _ctx.node.indeterminate, + disabled: _ctx.isDisabled, + onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => { + }, ["stop"])), + "onUpdate:modelValue": _ctx.handleSelectCheck + }, null, 8, ["model-value", "indeterminate", "disabled", "onUpdate:modelValue"])) : _ctx.checkStrictly ? (vue.openBlock(), vue.createBlock(_component_el_radio, { + key: 1, + "model-value": _ctx.checkedNodeId, + label: _ctx.node.uid, + disabled: _ctx.isDisabled, + "onUpdate:modelValue": _ctx.handleSelectCheck, + onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => { + }, ["stop"])) + }, { + default: vue.withCtx(() => [ + vue.createCommentVNode("\n Add an empty element to avoid render label,\n do not use empty fragment here for https://github.com/vuejs/vue-next/pull/2485\n "), + _hoisted_2$x + ]), + _: 1 + }, 8, ["model-value", "label", "disabled", "onUpdate:modelValue"])) : _ctx.isLeaf && _ctx.node.checked ? (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 2, + class: vue.normalizeClass(_ctx.ns.e("prefix")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_check) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true), + vue.createCommentVNode(" content "), + vue.createVNode(_component_node_content), + vue.createCommentVNode(" postfix "), + !_ctx.isLeaf ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [ + _ctx.node.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 0, + class: vue.normalizeClass([_ctx.ns.is("loading"), _ctx.ns.e("postfix")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_loading) + ]), + _: 1 + }, 8, ["class"])) : (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 1, + class: vue.normalizeClass(["arrow-right", _ctx.ns.e("postfix")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_arrow_right) + ]), + _: 1 + }, 8, ["class"])) + ], 64)) : vue.createCommentVNode("v-if", true) + ], 42, _hoisted_1$O); + } + var ElCascaderNode = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$u], ["__file", "node.vue"]]); + + const _sfc_main$1F = vue.defineComponent({ + name: "ElCascaderMenu", + components: { + Loading: loading_default, + ElIcon, + ElScrollbar, + ElCascaderNode + }, + props: { + nodes: { + type: Array, + required: true + }, + index: { + type: Number, + required: true + } + }, + setup(props) { + const instance = vue.getCurrentInstance(); + const ns = useNamespace("cascader-menu"); + const { t } = useLocale(); + const id = generateId(); + let activeNode = null; + let hoverTimer = null; + const panel = vue.inject(CASCADER_PANEL_INJECTION_KEY); + const hoverZone = vue.ref(null); + const isEmpty = vue.computed(() => !props.nodes.length); + const isLoading = vue.computed(() => !panel.initialLoaded); + const menuId = vue.computed(() => `cascader-menu-${id}-${props.index}`); + const handleExpand = (e) => { + activeNode = e.target; + }; + const handleMouseMove = (e) => { + if (!panel.isHoverMenu || !activeNode || !hoverZone.value) + return; + if (activeNode.contains(e.target)) { + clearHoverTimer(); + const el = instance.vnode.el; + const { left } = el.getBoundingClientRect(); + const { offsetWidth, offsetHeight } = el; + const startX = e.clientX - left; + const top = activeNode.offsetTop; + const bottom = top + activeNode.offsetHeight; + hoverZone.value.innerHTML = ` + <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} 0 V${top} Z" /> + <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" /> + `; + } else if (!hoverTimer) { + hoverTimer = window.setTimeout(clearHoverZone, panel.config.hoverThreshold); + } + }; + const clearHoverTimer = () => { + if (!hoverTimer) + return; + clearTimeout(hoverTimer); + hoverTimer = null; + }; + const clearHoverZone = () => { + if (!hoverZone.value) + return; + hoverZone.value.innerHTML = ""; + clearHoverTimer(); + }; + return { + ns, + panel, + hoverZone, + isEmpty, + isLoading, + menuId, + t, + handleExpand, + handleMouseMove, + clearHoverZone + }; + } + }); + function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_cascader_node = vue.resolveComponent("el-cascader-node"); + const _component_loading = vue.resolveComponent("loading"); + const _component_el_icon = vue.resolveComponent("el-icon"); + const _component_el_scrollbar = vue.resolveComponent("el-scrollbar"); + return vue.openBlock(), vue.createBlock(_component_el_scrollbar, { + key: _ctx.menuId, + tag: "ul", + role: "menu", + class: vue.normalizeClass(_ctx.ns.b()), + "wrap-class": _ctx.ns.e("wrap"), + "view-class": [_ctx.ns.e("list"), _ctx.ns.is("empty", _ctx.isEmpty)], + onMousemove: _ctx.handleMouseMove, + onMouseleave: _ctx.clearHoverZone + }, { + default: vue.withCtx(() => { + var _a; + return [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.nodes, (node) => { + return vue.openBlock(), vue.createBlock(_component_el_cascader_node, { + key: node.uid, + node, + "menu-id": _ctx.menuId, + onExpand: _ctx.handleExpand + }, null, 8, ["node", "menu-id", "onExpand"]); + }), 128)), + _ctx.isLoading ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(_ctx.ns.e("empty-text")) + }, [ + vue.createVNode(_component_el_icon, { + size: "14", + class: vue.normalizeClass(_ctx.ns.is("loading")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_loading) + ]), + _: 1 + }, 8, ["class"]), + vue.createTextVNode(" " + vue.toDisplayString(_ctx.t("el.cascader.loading")), 1) + ], 2)) : _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(_ctx.ns.e("empty-text")) + }, vue.toDisplayString(_ctx.t("el.cascader.noData")), 3)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (vue.openBlock(), vue.createElementBlock("svg", { + key: 2, + ref: "hoverZone", + class: vue.normalizeClass(_ctx.ns.e("hover-zone")) + }, null, 2)) : vue.createCommentVNode("v-if", true) + ]; + }), + _: 1 + }, 8, ["class", "wrap-class", "view-class", "onMousemove", "onMouseleave"]); + } + var ElCascaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$t], ["__file", "menu.vue"]]); + + let uid = 0; + const calculatePathNodes = (node) => { + const nodes = [node]; + let { parent } = node; + while (parent) { + nodes.unshift(parent); + parent = parent.parent; + } + return nodes; + }; + class Node$2 { + constructor(data, config, parent, root = false) { + this.data = data; + this.config = config; + this.parent = parent; + this.root = root; + this.uid = uid++; + this.checked = false; + this.indeterminate = false; + this.loading = false; + const { value: valueKey, label: labelKey, children: childrenKey } = config; + const childrenData = data[childrenKey]; + const pathNodes = calculatePathNodes(this); + this.level = root ? 0 : parent ? parent.level + 1 : 1; + this.value = data[valueKey]; + this.label = data[labelKey]; + this.pathNodes = pathNodes; + this.pathValues = pathNodes.map((node) => node.value); + this.pathLabels = pathNodes.map((node) => node.label); + this.childrenData = childrenData; + this.children = (childrenData || []).map((child) => new Node$2(child, config, this)); + this.loaded = !config.lazy || this.isLeaf || !isEmpty(childrenData); + } + get isDisabled() { + const { data, parent, config } = this; + const { disabled, checkStrictly } = config; + const isDisabled = isFunction$1(disabled) ? disabled(data, this) : !!data[disabled]; + return isDisabled || !checkStrictly && (parent == null ? void 0 : parent.isDisabled); + } + get isLeaf() { + const { data, config, childrenData, loaded } = this; + const { lazy, leaf } = config; + const isLeaf = isFunction$1(leaf) ? leaf(data, this) : data[leaf]; + return isUndefined(isLeaf) ? lazy && !loaded ? false : !(Array.isArray(childrenData) && childrenData.length) : !!isLeaf; + } + get valueByOption() { + return this.config.emitPath ? this.pathValues : this.value; + } + appendChild(childData) { + const { childrenData, children } = this; + const node = new Node$2(childData, this.config, this); + if (Array.isArray(childrenData)) { + childrenData.push(childData); + } else { + this.childrenData = [childData]; + } + children.push(node); + return node; + } + calcText(allLevels, separator) { + const text = allLevels ? this.pathLabels.join(separator) : this.label; + this.text = text; + return text; + } + broadcast(event, ...args) { + const handlerName = `onParent${capitalize(event)}`; + this.children.forEach((child) => { + if (child) { + child.broadcast(event, ...args); + child[handlerName] && child[handlerName](...args); + } + }); + } + emit(event, ...args) { + const { parent } = this; + const handlerName = `onChild${capitalize(event)}`; + if (parent) { + parent[handlerName] && parent[handlerName](...args); + parent.emit(event, ...args); + } + } + onParentCheck(checked) { + if (!this.isDisabled) { + this.setCheckState(checked); + } + } + onChildCheck() { + const { children } = this; + const validChildren = children.filter((child) => !child.isDisabled); + const checked = validChildren.length ? validChildren.every((child) => child.checked) : false; + this.setCheckState(checked); + } + setCheckState(checked) { + const totalNum = this.children.length; + const checkedNum = this.children.reduce((c, p) => { + const num = p.checked ? 1 : p.indeterminate ? 0.5 : 0; + return c + num; + }, 0); + this.checked = this.loaded && this.children.filter((child) => !child.isDisabled).every((child) => child.loaded && child.checked) && checked; + this.indeterminate = this.loaded && checkedNum !== totalNum && checkedNum > 0; + } + doCheck(checked) { + if (this.checked === checked) + return; + const { checkStrictly, multiple } = this.config; + if (checkStrictly || !multiple) { + this.checked = checked; + } else { + this.broadcast("check", checked); + this.setCheckState(checked); + this.emit("check"); + } + } + } + var Node$3 = Node$2; + + const flatNodes = (nodes, leafOnly) => { + return nodes.reduce((res, node) => { + if (node.isLeaf) { + res.push(node); + } else { + !leafOnly && res.push(node); + res = res.concat(flatNodes(node.children, leafOnly)); + } + return res; + }, []); + }; + class Store { + constructor(data, config) { + this.config = config; + const nodes = (data || []).map((nodeData) => new Node$3(nodeData, this.config)); + this.nodes = nodes; + this.allNodes = flatNodes(nodes, false); + this.leafNodes = flatNodes(nodes, true); + } + getNodes() { + return this.nodes; + } + getFlattedNodes(leafOnly) { + return leafOnly ? this.leafNodes : this.allNodes; + } + appendNode(nodeData, parentNode) { + const node = parentNode ? parentNode.appendChild(nodeData) : new Node$3(nodeData, this.config); + if (!parentNode) + this.nodes.push(node); + this.allNodes.push(node); + node.isLeaf && this.leafNodes.push(node); + } + appendNodes(nodeDataList, parentNode) { + nodeDataList.forEach((nodeData) => this.appendNode(nodeData, parentNode)); + } + getNodeByValue(value, leafOnly = false) { + if (!value && value !== 0) + return null; + const node = this.getFlattedNodes(leafOnly).find((node2) => isEqual$1(node2.value, value) || isEqual$1(node2.pathValues, value)); + return node || null; + } + getSameNode(node) { + if (!node) + return null; + const node_ = this.getFlattedNodes(false).find(({ value, level }) => isEqual$1(node.value, value) && node.level === level); + return node_ || null; + } + } + + const CommonProps = buildProps({ + modelValue: { + type: definePropType([Number, String, Array]) + }, + options: { + type: definePropType(Array), + default: () => [] + }, + props: { + type: definePropType(Object), + default: () => ({}) + } + }); + const DefaultProps = { + expandTrigger: "click", + multiple: false, + checkStrictly: false, + emitPath: true, + lazy: false, + lazyLoad: NOOP, + value: "value", + label: "label", + children: "children", + leaf: "leaf", + disabled: "disabled", + hoverThreshold: 500 + }; + const useCascaderConfig = (props) => { + return vue.computed(() => ({ + ...DefaultProps, + ...props.props + })); + }; + + const getMenuIndex = (el) => { + if (!el) + return 0; + const pieces = el.id.split("-"); + return Number(pieces[pieces.length - 2]); + }; + const checkNode = (el) => { + if (!el) + return; + const input = el.querySelector("input"); + if (input) { + input.click(); + } else if (isLeaf(el)) { + el.click(); + } + }; + const sortByOriginalOrder = (oldNodes, newNodes) => { + const newNodesCopy = newNodes.slice(0); + const newIds = newNodesCopy.map((node) => node.uid); + const res = oldNodes.reduce((acc, item) => { + const index = newIds.indexOf(item.uid); + if (index > -1) { + acc.push(item); + newNodesCopy.splice(index, 1); + newIds.splice(index, 1); + } + return acc; + }, []); + res.push(...newNodesCopy); + return res; + }; + + const _sfc_main$1E = vue.defineComponent({ + name: "ElCascaderPanel", + components: { + ElCascaderMenu + }, + props: { + ...CommonProps, + border: { + type: Boolean, + default: true + }, + renderLabel: Function + }, + emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, "close", "expand-change"], + setup(props, { emit, slots }) { + let manualChecked = false; + const ns = useNamespace("cascader"); + const config = useCascaderConfig(props); + let store = null; + const initialLoaded = vue.ref(true); + const menuList = vue.ref([]); + const checkedValue = vue.ref(null); + const menus = vue.ref([]); + const expandingNode = vue.ref(null); + const checkedNodes = vue.ref([]); + const isHoverMenu = vue.computed(() => config.value.expandTrigger === "hover"); + const renderLabelFn = vue.computed(() => props.renderLabel || slots.default); + const initStore = () => { + const { options } = props; + const cfg = config.value; + manualChecked = false; + store = new Store(options, cfg); + menus.value = [store.getNodes()]; + if (cfg.lazy && isEmpty(props.options)) { + initialLoaded.value = false; + lazyLoad(void 0, (list) => { + if (list) { + store = new Store(list, cfg); + menus.value = [store.getNodes()]; + } + initialLoaded.value = true; + syncCheckedValue(false, true); + }); + } else { + syncCheckedValue(false, true); + } + }; + const lazyLoad = (node, cb) => { + const cfg = config.value; + node = node || new Node$3({}, cfg, void 0, true); + node.loading = true; + const resolve = (dataList) => { + const _node = node; + const parent = _node.root ? null : _node; + dataList && (store == null ? void 0 : store.appendNodes(dataList, parent)); + _node.loading = false; + _node.loaded = true; + _node.childrenData = _node.childrenData || []; + cb && cb(dataList); + }; + cfg.lazyLoad(node, resolve); + }; + const expandNode = (node, silent) => { + var _a; + const { level } = node; + const newMenus = menus.value.slice(0, level); + let newExpandingNode; + if (node.isLeaf) { + newExpandingNode = node.pathNodes[level - 2]; + } else { + newExpandingNode = node; + newMenus.push(node.children); + } + if (((_a = expandingNode.value) == null ? void 0 : _a.uid) !== (newExpandingNode == null ? void 0 : newExpandingNode.uid)) { + expandingNode.value = node; + menus.value = newMenus; + !silent && emit("expand-change", (node == null ? void 0 : node.pathValues) || []); + } + }; + const handleCheckChange = (node, checked, emitClose = true) => { + const { checkStrictly, multiple } = config.value; + const oldNode = checkedNodes.value[0]; + manualChecked = true; + !multiple && (oldNode == null ? void 0 : oldNode.doCheck(false)); + node.doCheck(checked); + calculateCheckedValue(); + emitClose && !multiple && !checkStrictly && emit("close"); + !emitClose && !multiple && !checkStrictly && expandParentNode(node); + }; + const expandParentNode = (node) => { + if (!node) + return; + node = node.parent; + expandParentNode(node); + node && expandNode(node); + }; + const getFlattedNodes = (leafOnly) => { + return store == null ? void 0 : store.getFlattedNodes(leafOnly); + }; + const getCheckedNodes = (leafOnly) => { + var _a; + return (_a = getFlattedNodes(leafOnly)) == null ? void 0 : _a.filter((node) => node.checked !== false); + }; + const clearCheckedNodes = () => { + checkedNodes.value.forEach((node) => node.doCheck(false)); + calculateCheckedValue(); + menus.value = menus.value.slice(0, 1); + expandingNode.value = null; + emit("expand-change", []); + }; + const calculateCheckedValue = () => { + var _a; + const { checkStrictly, multiple } = config.value; + const oldNodes = checkedNodes.value; + const newNodes = getCheckedNodes(!checkStrictly); + const nodes = sortByOriginalOrder(oldNodes, newNodes); + const values = nodes.map((node) => node.valueByOption); + checkedNodes.value = nodes; + checkedValue.value = multiple ? values : (_a = values[0]) != null ? _a : null; + }; + const syncCheckedValue = (loaded = false, forced = false) => { + const { modelValue } = props; + const { lazy, multiple, checkStrictly } = config.value; + const leafOnly = !checkStrictly; + if (!initialLoaded.value || manualChecked || !forced && isEqual$1(modelValue, checkedValue.value)) + return; + if (lazy && !loaded) { + const values = unique(flattenDeep(castArray(modelValue))); + const nodes = values.map((val) => store == null ? void 0 : store.getNodeByValue(val)).filter((node) => !!node && !node.loaded && !node.loading); + if (nodes.length) { + nodes.forEach((node) => { + lazyLoad(node, () => syncCheckedValue(false, forced)); + }); + } else { + syncCheckedValue(true, forced); + } + } else { + const values = multiple ? castArray(modelValue) : [modelValue]; + const nodes = unique(values.map((val) => store == null ? void 0 : store.getNodeByValue(val, leafOnly))); + syncMenuState(nodes, forced); + checkedValue.value = cloneDeep(modelValue); + } + }; + const syncMenuState = (newCheckedNodes, reserveExpandingState = true) => { + const { checkStrictly } = config.value; + const oldNodes = checkedNodes.value; + const newNodes = newCheckedNodes.filter((node) => !!node && (checkStrictly || node.isLeaf)); + const oldExpandingNode = store == null ? void 0 : store.getSameNode(expandingNode.value); + const newExpandingNode = reserveExpandingState && oldExpandingNode || newNodes[0]; + if (newExpandingNode) { + newExpandingNode.pathNodes.forEach((node) => expandNode(node, true)); + } else { + expandingNode.value = null; + } + oldNodes.forEach((node) => node.doCheck(false)); + newNodes.forEach((node) => node.doCheck(true)); + checkedNodes.value = newNodes; + vue.nextTick(scrollToExpandingNode); + }; + const scrollToExpandingNode = () => { + if (!isClient) + return; + menuList.value.forEach((menu) => { + const menuElement = menu == null ? void 0 : menu.$el; + if (menuElement) { + const container = menuElement.querySelector(`.${ns.namespace.value}-scrollbar__wrap`); + const activeNode = menuElement.querySelector(`.${ns.b("node")}.${ns.is("active")}`) || menuElement.querySelector(`.${ns.b("node")}.in-active-path`); + scrollIntoView(container, activeNode); + } + }); + }; + const handleKeyDown = (e) => { + const target = e.target; + const { code } = e; + switch (code) { + case EVENT_CODE.up: + case EVENT_CODE.down: { + e.preventDefault(); + const distance = code === EVENT_CODE.up ? -1 : 1; + focusNode(getSibling(target, distance, `.${ns.b("node")}[tabindex="-1"]`)); + break; + } + case EVENT_CODE.left: { + e.preventDefault(); + const preMenu = menuList.value[getMenuIndex(target) - 1]; + const expandedNode = preMenu == null ? void 0 : preMenu.$el.querySelector(`.${ns.b("node")}[aria-expanded="true"]`); + focusNode(expandedNode); + break; + } + case EVENT_CODE.right: { + e.preventDefault(); + const nextMenu = menuList.value[getMenuIndex(target) + 1]; + const firstNode = nextMenu == null ? void 0 : nextMenu.$el.querySelector(`.${ns.b("node")}[tabindex="-1"]`); + focusNode(firstNode); + break; + } + case EVENT_CODE.enter: + checkNode(target); + break; + } + }; + vue.provide(CASCADER_PANEL_INJECTION_KEY, vue.reactive({ + config, + expandingNode, + checkedNodes, + isHoverMenu, + initialLoaded, + renderLabelFn, + lazyLoad, + expandNode, + handleCheckChange + })); + vue.watch([config, () => props.options], initStore, { + deep: true, + immediate: true + }); + vue.watch(() => props.modelValue, () => { + manualChecked = false; + syncCheckedValue(); + }, { + deep: true + }); + vue.watch(() => checkedValue.value, (val) => { + if (!isEqual$1(val, props.modelValue)) { + emit(UPDATE_MODEL_EVENT, val); + emit(CHANGE_EVENT, val); + } + }); + vue.onBeforeUpdate(() => menuList.value = []); + vue.onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue()); + return { + ns, + menuList, + menus, + checkedNodes, + handleKeyDown, + handleCheckChange, + getFlattedNodes, + getCheckedNodes, + clearCheckedNodes, + calculateCheckedValue, + scrollToExpandingNode + }; + } + }); + function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_cascader_menu = vue.resolveComponent("el-cascader-menu"); + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([_ctx.ns.b("panel"), _ctx.ns.is("bordered", _ctx.border)]), + onKeydown: _cache[0] || (_cache[0] = (...args) => _ctx.handleKeyDown && _ctx.handleKeyDown(...args)) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menus, (menu, index) => { + return vue.openBlock(), vue.createBlock(_component_el_cascader_menu, { + key: index, + ref_for: true, + ref: (item) => _ctx.menuList[index] = item, + index, + nodes: [...menu] + }, null, 8, ["index", "nodes"]); + }), 128)) + ], 34); + } + var CascaderPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$s], ["__file", "index.vue"]]); + + CascaderPanel.install = (app) => { + app.component(CascaderPanel.name, CascaderPanel); + }; + const _CascaderPanel = CascaderPanel; + const ElCascaderPanel = _CascaderPanel; + + const tagProps = buildProps({ + closable: Boolean, + type: { + type: String, + values: ["success", "info", "warning", "danger", ""], + default: "" + }, + hit: Boolean, + disableTransitions: Boolean, + color: { + type: String, + default: "" + }, + size: { + type: String, + values: componentSizes, + default: "" + }, + effect: { + type: String, + values: ["dark", "light", "plain"], + default: "light" + }, + round: Boolean + }); + const tagEmits = { + close: (evt) => evt instanceof MouseEvent, + click: (evt) => evt instanceof MouseEvent + }; + + const __default__$14 = vue.defineComponent({ + name: "ElTag" + }); + const _sfc_main$1D = /* @__PURE__ */ vue.defineComponent({ + ...__default__$14, + props: tagProps, + emits: tagEmits, + setup(__props, { emit }) { + const props = __props; + const tagSize = useFormSize(); + const ns = useNamespace("tag"); + const classes = vue.computed(() => { + const { type, hit, effect, closable, round } = props; + return [ + ns.b(), + ns.is("closable", closable), + ns.m(type), + ns.m(tagSize.value), + ns.m(effect), + ns.is("hit", hit), + ns.is("round", round) + ]; + }); + const handleClose = (event) => { + emit("close", event); + }; + const handleClick = (event) => { + emit("click", event); + }; + return (_ctx, _cache) => { + return _ctx.disableTransitions ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + class: vue.normalizeClass(vue.unref(classes)), + style: vue.normalizeStyle({ backgroundColor: _ctx.color }), + onClick: handleClick + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(ns).e("content")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2), + _ctx.closable ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("close")), + onClick: vue.withModifiers(handleClose, ["stop"]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(close_default)) + ]), + _: 1 + }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true) + ], 6)) : (vue.openBlock(), vue.createBlock(vue.Transition, { + key: 1, + name: `${vue.unref(ns).namespace.value}-zoom-in-center`, + appear: "" + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(classes)), + style: vue.normalizeStyle({ backgroundColor: _ctx.color }), + onClick: handleClick + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(ns).e("content")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2), + _ctx.closable ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("close")), + onClick: vue.withModifiers(handleClose, ["stop"]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(close_default)) + ]), + _: 1 + }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true) + ], 6) + ]), + _: 3 + }, 8, ["name"])); + }; + } + }); + var Tag = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__file", "tag.vue"]]); + + const ElTag = withInstall(Tag); + + const cascaderProps = buildProps({ + ...CommonProps, + size: useSizeProp, + placeholder: String, + disabled: Boolean, + clearable: Boolean, + filterable: Boolean, + filterMethod: { + type: definePropType(Function), + default: (node, keyword) => node.text.includes(keyword) + }, + separator: { + type: String, + default: " / " + }, + showAllLevels: { + type: Boolean, + default: true + }, + collapseTags: Boolean, + collapseTagsTooltip: { + type: Boolean, + default: false + }, + debounce: { + type: Number, + default: 300 + }, + beforeFilter: { + type: definePropType(Function), + default: () => true + }, + popperClass: { + type: String, + default: "" + }, + teleported: useTooltipContentProps.teleported, + tagType: { ...tagProps.type, default: "info" }, + validateEvent: { + type: Boolean, + default: true + } + }); + const cascaderEmits = { + [UPDATE_MODEL_EVENT]: (val) => !!val || val === null, + [CHANGE_EVENT]: (val) => !!val || val === null, + focus: (evt) => evt instanceof FocusEvent, + blur: (evt) => evt instanceof FocusEvent, + visibleChange: (val) => isBoolean$1(val), + expandChange: (val) => !!val, + removeTag: (val) => !!val + }; + + const _hoisted_1$N = { key: 0 }; + const _hoisted_2$w = ["placeholder", "onKeydown"]; + const _hoisted_3$i = ["onClick"]; + const COMPONENT_NAME$e = "ElCascader"; + const __default__$13 = vue.defineComponent({ + name: COMPONENT_NAME$e + }); + const _sfc_main$1C = /* @__PURE__ */ vue.defineComponent({ + ...__default__$13, + props: cascaderProps, + emits: cascaderEmits, + setup(__props, { expose, emit }) { + const props = __props; + const popperOptions = { + modifiers: [ + { + name: "arrowPosition", + enabled: true, + phase: "main", + fn: ({ state }) => { + const { modifiersData, placement } = state; + if (["right", "left", "bottom", "top"].includes(placement)) + return; + modifiersData.arrow.x = 35; + }, + requires: ["arrow"] + } + ] + }; + const attrs = vue.useAttrs(); + let inputInitialHeight = 0; + let pressDeleteCount = 0; + const nsCascader = useNamespace("cascader"); + const nsInput = useNamespace("input"); + const { t } = useLocale(); + const { form, formItem } = useFormItem(); + const tooltipRef = vue.ref(null); + const input = vue.ref(null); + const tagWrapper = vue.ref(null); + const cascaderPanelRef = vue.ref(null); + const suggestionPanel = vue.ref(null); + const popperVisible = vue.ref(false); + const inputHover = vue.ref(false); + const filtering = vue.ref(false); + const filterFocus = vue.ref(false); + const inputValue = vue.ref(""); + const searchInputValue = vue.ref(""); + const presentTags = vue.ref([]); + const allPresentTags = vue.ref([]); + const suggestions = vue.ref([]); + const isOnComposition = vue.ref(false); + const cascaderStyle = vue.computed(() => { + return attrs.style; + }); + const isDisabled = vue.computed(() => props.disabled || (form == null ? void 0 : form.disabled)); + const inputPlaceholder = vue.computed(() => props.placeholder || t("el.cascader.placeholder")); + const currentPlaceholder = vue.computed(() => searchInputValue.value || presentTags.value.length > 0 || isOnComposition.value ? "" : inputPlaceholder.value); + const realSize = useFormSize(); + const tagSize = vue.computed(() => ["small"].includes(realSize.value) ? "small" : "default"); + const multiple = vue.computed(() => !!props.props.multiple); + const readonly = vue.computed(() => !props.filterable || multiple.value); + const searchKeyword = vue.computed(() => multiple.value ? searchInputValue.value : inputValue.value); + const checkedNodes = vue.computed(() => { + var _a; + return ((_a = cascaderPanelRef.value) == null ? void 0 : _a.checkedNodes) || []; + }); + const clearBtnVisible = vue.computed(() => { + if (!props.clearable || isDisabled.value || filtering.value || !inputHover.value) + return false; + return !!checkedNodes.value.length; + }); + const presentText = vue.computed(() => { + const { showAllLevels, separator } = props; + const nodes = checkedNodes.value; + return nodes.length ? multiple.value ? "" : nodes[0].calcText(showAllLevels, separator) : ""; + }); + const checkedValue = vue.computed({ + get() { + return cloneDeep(props.modelValue); + }, + set(val) { + emit(UPDATE_MODEL_EVENT, val); + emit(CHANGE_EVENT, val); + if (props.validateEvent) { + formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn()); + } + } + }); + const cascaderKls = vue.computed(() => { + return [ + nsCascader.b(), + nsCascader.m(realSize.value), + nsCascader.is("disabled", isDisabled.value), + attrs.class + ]; + }); + const cascaderIconKls = vue.computed(() => { + return [ + nsInput.e("icon"), + "icon-arrow-down", + nsCascader.is("reverse", popperVisible.value) + ]; + }); + const inputClass = vue.computed(() => { + return nsCascader.is("focus", popperVisible.value || filterFocus.value); + }); + const contentRef = vue.computed(() => { + var _a, _b; + return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef; + }); + const togglePopperVisible = (visible) => { + var _a, _b, _c; + if (isDisabled.value) + return; + visible = visible != null ? visible : !popperVisible.value; + if (visible !== popperVisible.value) { + popperVisible.value = visible; + (_b = (_a = input.value) == null ? void 0 : _a.input) == null ? void 0 : _b.setAttribute("aria-expanded", `${visible}`); + if (visible) { + updatePopperPosition(); + vue.nextTick((_c = cascaderPanelRef.value) == null ? void 0 : _c.scrollToExpandingNode); + } else if (props.filterable) { + syncPresentTextValue(); + } + emit("visibleChange", visible); + } + }; + const updatePopperPosition = () => { + vue.nextTick(() => { + var _a; + (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper(); + }); + }; + const hideSuggestionPanel = () => { + filtering.value = false; + }; + const genTag = (node) => { + const { showAllLevels, separator } = props; + return { + node, + key: node.uid, + text: node.calcText(showAllLevels, separator), + hitState: false, + closable: !isDisabled.value && !node.isDisabled, + isCollapseTag: false + }; + }; + const deleteTag = (tag) => { + var _a; + const node = tag.node; + node.doCheck(false); + (_a = cascaderPanelRef.value) == null ? void 0 : _a.calculateCheckedValue(); + emit("removeTag", node.valueByOption); + }; + const calculatePresentTags = () => { + if (!multiple.value) + return; + const nodes = checkedNodes.value; + const tags = []; + const allTags = []; + nodes.forEach((node) => allTags.push(genTag(node))); + allPresentTags.value = allTags; + if (nodes.length) { + const [first, ...rest] = nodes; + const restCount = rest.length; + tags.push(genTag(first)); + if (restCount) { + if (props.collapseTags) { + tags.push({ + key: -1, + text: `+ ${restCount}`, + closable: false, + isCollapseTag: true + }); + } else { + rest.forEach((node) => tags.push(genTag(node))); + } + } + } + presentTags.value = tags; + }; + const calculateSuggestions = () => { + var _a, _b; + const { filterMethod, showAllLevels, separator } = props; + const res = (_b = (_a = cascaderPanelRef.value) == null ? void 0 : _a.getFlattedNodes(!props.props.checkStrictly)) == null ? void 0 : _b.filter((node) => { + if (node.isDisabled) + return false; + node.calcText(showAllLevels, separator); + return filterMethod(node, searchKeyword.value); + }); + if (multiple.value) { + presentTags.value.forEach((tag) => { + tag.hitState = false; + }); + allPresentTags.value.forEach((tag) => { + tag.hitState = false; + }); + } + filtering.value = true; + suggestions.value = res; + updatePopperPosition(); + }; + const focusFirstNode = () => { + var _a; + let firstNode; + if (filtering.value && suggestionPanel.value) { + firstNode = suggestionPanel.value.$el.querySelector(`.${nsCascader.e("suggestion-item")}`); + } else { + firstNode = (_a = cascaderPanelRef.value) == null ? void 0 : _a.$el.querySelector(`.${nsCascader.b("node")}[tabindex="-1"]`); + } + if (firstNode) { + firstNode.focus(); + !filtering.value && firstNode.click(); + } + }; + const updateStyle = () => { + var _a, _b; + const inputInner = (_a = input.value) == null ? void 0 : _a.input; + const tagWrapperEl = tagWrapper.value; + const suggestionPanelEl = (_b = suggestionPanel.value) == null ? void 0 : _b.$el; + if (!isClient || !inputInner) + return; + if (suggestionPanelEl) { + const suggestionList = suggestionPanelEl.querySelector(`.${nsCascader.e("suggestion-list")}`); + suggestionList.style.minWidth = `${inputInner.offsetWidth}px`; + } + if (tagWrapperEl) { + const { offsetHeight } = tagWrapperEl; + const height = presentTags.value.length > 0 ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px` : `${inputInitialHeight}px`; + inputInner.style.height = height; + updatePopperPosition(); + } + }; + const getCheckedNodes = (leafOnly) => { + var _a; + return (_a = cascaderPanelRef.value) == null ? void 0 : _a.getCheckedNodes(leafOnly); + }; + const handleExpandChange = (value) => { + updatePopperPosition(); + emit("expandChange", value); + }; + const handleComposition = (event) => { + var _a; + const text = (_a = event.target) == null ? void 0 : _a.value; + if (event.type === "compositionend") { + isOnComposition.value = false; + vue.nextTick(() => handleInput(text)); + } else { + const lastCharacter = text[text.length - 1] || ""; + isOnComposition.value = !isKorean(lastCharacter); + } + }; + const handleKeyDown = (e) => { + if (isOnComposition.value) + return; + switch (e.code) { + case EVENT_CODE.enter: + togglePopperVisible(); + break; + case EVENT_CODE.down: + togglePopperVisible(true); + vue.nextTick(focusFirstNode); + e.preventDefault(); + break; + case EVENT_CODE.esc: + if (popperVisible.value === true) { + e.preventDefault(); + e.stopPropagation(); + togglePopperVisible(false); + } + break; + case EVENT_CODE.tab: + togglePopperVisible(false); + break; + } + }; + const handleClear = () => { + var _a; + (_a = cascaderPanelRef.value) == null ? void 0 : _a.clearCheckedNodes(); + if (!popperVisible.value && props.filterable) { + syncPresentTextValue(); + } + togglePopperVisible(false); + }; + const syncPresentTextValue = () => { + const { value } = presentText; + inputValue.value = value; + searchInputValue.value = value; + }; + const handleSuggestionClick = (node) => { + var _a, _b; + const { checked } = node; + if (multiple.value) { + (_a = cascaderPanelRef.value) == null ? void 0 : _a.handleCheckChange(node, !checked, false); + } else { + !checked && ((_b = cascaderPanelRef.value) == null ? void 0 : _b.handleCheckChange(node, true, false)); + togglePopperVisible(false); + } + }; + const handleSuggestionKeyDown = (e) => { + const target = e.target; + const { code } = e; + switch (code) { + case EVENT_CODE.up: + case EVENT_CODE.down: { + const distance = code === EVENT_CODE.up ? -1 : 1; + focusNode(getSibling(target, distance, `.${nsCascader.e("suggestion-item")}[tabindex="-1"]`)); + break; + } + case EVENT_CODE.enter: + target.click(); + break; + } + }; + const handleDelete = () => { + const tags = presentTags.value; + const lastTag = tags[tags.length - 1]; + pressDeleteCount = searchInputValue.value ? 0 : pressDeleteCount + 1; + if (!lastTag || !pressDeleteCount || props.collapseTags && tags.length > 1) + return; + if (lastTag.hitState) { + deleteTag(lastTag); + } else { + lastTag.hitState = true; + } + }; + const handleFocus = (e) => { + const el = e.target; + const name = nsCascader.e("search-input"); + if (el.className === name) { + filterFocus.value = true; + } + emit("focus", e); + }; + const handleBlur = (e) => { + filterFocus.value = false; + emit("blur", e); + }; + const handleFilter = debounce(() => { + const { value } = searchKeyword; + if (!value) + return; + const passed = props.beforeFilter(value); + if (isPromise(passed)) { + passed.then(calculateSuggestions).catch(() => { + }); + } else if (passed !== false) { + calculateSuggestions(); + } else { + hideSuggestionPanel(); + } + }, props.debounce); + const handleInput = (val, e) => { + !popperVisible.value && togglePopperVisible(true); + if (e == null ? void 0 : e.isComposing) + return; + val ? handleFilter() : hideSuggestionPanel(); + }; + vue.watch(filtering, updatePopperPosition); + vue.watch([checkedNodes, isDisabled], calculatePresentTags); + vue.watch(presentTags, () => { + vue.nextTick(() => updateStyle()); + }); + vue.watch(presentText, syncPresentTextValue, { immediate: true }); + vue.onMounted(() => { + const inputInner = input.value.input; + const inputInnerHeight = Number.parseFloat(useCssVar(nsInput.cssVarName("input-height"), inputInner).value) - 2; + inputInitialHeight = inputInner.offsetHeight || inputInnerHeight; + useResizeObserver(inputInner, updateStyle); + }); + expose({ + getCheckedNodes, + cascaderPanelRef, + togglePopperVisible, + contentRef + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), { + ref_key: "tooltipRef", + ref: tooltipRef, + visible: popperVisible.value, + teleported: _ctx.teleported, + "popper-class": [vue.unref(nsCascader).e("dropdown"), _ctx.popperClass], + "popper-options": popperOptions, + "fallback-placements": [ + "bottom-start", + "bottom", + "top-start", + "top", + "right", + "left" + ], + "stop-popper-mouse-event": false, + "gpu-acceleration": false, + placement: "bottom-start", + transition: `${vue.unref(nsCascader).namespace.value}-zoom-in-top`, + effect: "light", + pure: "", + persistent: "", + onHide: hideSuggestionPanel + }, { + default: vue.withCtx(() => [ + vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(cascaderKls)), + style: vue.normalizeStyle(vue.unref(cascaderStyle)), + onClick: _cache[5] || (_cache[5] = () => togglePopperVisible(vue.unref(readonly) ? void 0 : true)), + onKeydown: handleKeyDown, + onMouseenter: _cache[6] || (_cache[6] = ($event) => inputHover.value = true), + onMouseleave: _cache[7] || (_cache[7] = ($event) => inputHover.value = false) + }, [ + vue.createVNode(vue.unref(ElInput), { + ref_key: "input", + ref: input, + modelValue: inputValue.value, + "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => inputValue.value = $event), + placeholder: vue.unref(currentPlaceholder), + readonly: vue.unref(readonly), + disabled: vue.unref(isDisabled), + "validate-event": false, + size: vue.unref(realSize), + class: vue.normalizeClass(vue.unref(inputClass)), + tabindex: vue.unref(multiple) && _ctx.filterable && !vue.unref(isDisabled) ? -1 : void 0, + onCompositionstart: handleComposition, + onCompositionupdate: handleComposition, + onCompositionend: handleComposition, + onFocus: handleFocus, + onBlur: handleBlur, + onInput: handleInput + }, { + suffix: vue.withCtx(() => [ + vue.unref(clearBtnVisible) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: "clear", + class: vue.normalizeClass([vue.unref(nsInput).e("icon"), "icon-circle-close"]), + onClick: vue.withModifiers(handleClear, ["stop"]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(circle_close_default)) + ]), + _: 1 + }, 8, ["class", "onClick"])) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: "arrow-down", + class: vue.normalizeClass(vue.unref(cascaderIconKls)), + onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => togglePopperVisible(), ["stop"])) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_down_default)) + ]), + _: 1 + }, 8, ["class"])) + ]), + _: 1 + }, 8, ["modelValue", "placeholder", "readonly", "disabled", "size", "class", "tabindex"]), + vue.unref(multiple) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + ref_key: "tagWrapper", + ref: tagWrapper, + class: vue.normalizeClass(vue.unref(nsCascader).e("tags")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(presentTags.value, (tag) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElTag), { + key: tag.key, + type: _ctx.tagType, + size: vue.unref(tagSize), + hit: tag.hitState, + closable: tag.closable, + "disable-transitions": "", + onClose: ($event) => deleteTag(tag) + }, { + default: vue.withCtx(() => [ + tag.isCollapseTag === false ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$N, vue.toDisplayString(tag.text), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), { + key: 1, + disabled: popperVisible.value || !_ctx.collapseTagsTooltip, + "fallback-placements": ["bottom", "top", "right", "left"], + placement: "bottom", + effect: "light" + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", null, vue.toDisplayString(tag.text), 1) + ]), + content: vue.withCtx(() => [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(nsCascader).e("collapse-tags")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(allPresentTags.value.slice(1), (tag2, idx) => { + return vue.openBlock(), vue.createElementBlock("div", { + key: idx, + class: vue.normalizeClass(vue.unref(nsCascader).e("collapse-tag")) + }, [ + (vue.openBlock(), vue.createBlock(vue.unref(ElTag), { + key: tag2.key, + class: "in-tooltip", + type: _ctx.tagType, + size: vue.unref(tagSize), + hit: tag2.hitState, + closable: tag2.closable, + "disable-transitions": "", + onClose: ($event) => deleteTag(tag2) + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", null, vue.toDisplayString(tag2.text), 1) + ]), + _: 2 + }, 1032, ["type", "size", "hit", "closable", "onClose"])) + ], 2); + }), 128)) + ], 2) + ]), + _: 2 + }, 1032, ["disabled"])) + ]), + _: 2 + }, 1032, ["type", "size", "hit", "closable", "onClose"]); + }), 128)), + _ctx.filterable && !vue.unref(isDisabled) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", { + key: 0, + "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => searchInputValue.value = $event), + type: "text", + class: vue.normalizeClass(vue.unref(nsCascader).e("search-input")), + placeholder: vue.unref(presentText) ? "" : vue.unref(inputPlaceholder), + onInput: _cache[3] || (_cache[3] = (e) => handleInput(searchInputValue.value, e)), + onClick: _cache[4] || (_cache[4] = vue.withModifiers(($event) => togglePopperVisible(true), ["stop"])), + onKeydown: vue.withKeys(handleDelete, ["delete"]), + onCompositionstart: handleComposition, + onCompositionupdate: handleComposition, + onCompositionend: handleComposition, + onFocus: handleFocus, + onBlur: handleBlur + }, null, 42, _hoisted_2$w)), [ + [vue.vModelText, searchInputValue.value] + ]) : vue.createCommentVNode("v-if", true) + ], 2)) : vue.createCommentVNode("v-if", true) + ], 38)), [ + [vue.unref(ClickOutside), () => togglePopperVisible(false), vue.unref(contentRef)] + ]) + ]), + content: vue.withCtx(() => [ + vue.withDirectives(vue.createVNode(vue.unref(_CascaderPanel), { + ref_key: "cascaderPanelRef", + ref: cascaderPanelRef, + modelValue: vue.unref(checkedValue), + "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => vue.isRef(checkedValue) ? checkedValue.value = $event : null), + options: _ctx.options, + props: props.props, + border: false, + "render-label": _ctx.$slots.default, + onExpandChange: handleExpandChange, + onClose: _cache[9] || (_cache[9] = ($event) => _ctx.$nextTick(() => togglePopperVisible(false))) + }, null, 8, ["modelValue", "options", "props", "render-label"]), [ + [vue.vShow, !filtering.value] + ]), + _ctx.filterable ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(ElScrollbar), { + key: 0, + ref_key: "suggestionPanel", + ref: suggestionPanel, + tag: "ul", + class: vue.normalizeClass(vue.unref(nsCascader).e("suggestion-panel")), + "view-class": vue.unref(nsCascader).e("suggestion-list"), + onKeydown: handleSuggestionKeyDown + }, { + default: vue.withCtx(() => [ + suggestions.value.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(suggestions.value, (item) => { + return vue.openBlock(), vue.createElementBlock("li", { + key: item.uid, + class: vue.normalizeClass([ + vue.unref(nsCascader).e("suggestion-item"), + vue.unref(nsCascader).is("checked", item.checked) + ]), + tabindex: -1, + onClick: ($event) => handleSuggestionClick(item) + }, [ + vue.createElementVNode("span", null, vue.toDisplayString(item.text), 1), + item.checked ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(check_default)) + ]), + _: 1 + })) : vue.createCommentVNode("v-if", true) + ], 10, _hoisted_3$i); + }), 128)) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [ + vue.createElementVNode("li", { + class: vue.normalizeClass(vue.unref(nsCascader).e("empty-text")) + }, vue.toDisplayString(vue.unref(t)("el.cascader.noMatch")), 3) + ]) + ]), + _: 3 + }, 8, ["class", "view-class"])), [ + [vue.vShow, filtering.value] + ]) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["visible", "teleported", "popper-class", "transition"]); + }; + } + }); + var Cascader = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__file", "cascader.vue"]]); + + Cascader.install = (app) => { + app.component(Cascader.name, Cascader); + }; + const _Cascader = Cascader; + const ElCascader = _Cascader; + + const checkTagProps = buildProps({ + checked: { + type: Boolean, + default: false + } + }); + const checkTagEmits = { + "update:checked": (value) => isBoolean$1(value), + [CHANGE_EVENT]: (value) => isBoolean$1(value) + }; + + const __default__$12 = vue.defineComponent({ + name: "ElCheckTag" + }); + const _sfc_main$1B = /* @__PURE__ */ vue.defineComponent({ + ...__default__$12, + props: checkTagProps, + emits: checkTagEmits, + setup(__props, { emit }) { + const props = __props; + const ns = useNamespace("check-tag"); + const handleChange = () => { + const checked = !props.checked; + emit(CHANGE_EVENT, checked); + emit("update:checked", checked); + }; + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("span", { + class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).is("checked", _ctx.checked)]), + onClick: handleChange + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2); + }; + } + }); + var CheckTag = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__file", "check-tag.vue"]]); + + const ElCheckTag = withInstall(CheckTag); + + const rowContextKey = Symbol("rowContextKey"); + + const RowJustify = [ + "start", + "center", + "end", + "space-around", + "space-between", + "space-evenly" + ]; + const RowAlign = ["top", "middle", "bottom"]; + const rowProps = buildProps({ + tag: { + type: String, + default: "div" + }, + gutter: { + type: Number, + default: 0 + }, + justify: { + type: String, + values: RowJustify, + default: "start" + }, + align: { + type: String, + values: RowAlign, + default: "top" + } + }); + + const __default__$11 = vue.defineComponent({ + name: "ElRow" + }); + const _sfc_main$1A = /* @__PURE__ */ vue.defineComponent({ + ...__default__$11, + props: rowProps, + setup(__props) { + const props = __props; + const ns = useNamespace("row"); + const gutter = vue.computed(() => props.gutter); + vue.provide(rowContextKey, { + gutter + }); + const style = vue.computed(() => { + const styles = {}; + if (!props.gutter) { + return styles; + } + styles.marginRight = styles.marginLeft = `-${props.gutter / 2}px`; + return styles; + }); + const rowKls = vue.computed(() => [ + ns.b(), + ns.is(`justify-${props.justify}`, props.justify !== "start"), + ns.is(`align-${props.align}`, props.align !== "top") + ]); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), { + class: vue.normalizeClass(vue.unref(rowKls)), + style: vue.normalizeStyle(vue.unref(style)) + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["class", "style"]); + }; + } + }); + var Row$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__file", "row.vue"]]); + + const ElRow = withInstall(Row$1); + + const colProps = buildProps({ + tag: { + type: String, + default: "div" + }, + span: { + type: Number, + default: 24 + }, + offset: { + type: Number, + default: 0 + }, + pull: { + type: Number, + default: 0 + }, + push: { + type: Number, + default: 0 + }, + xs: { + type: definePropType([Number, Object]), + default: () => mutable({}) + }, + sm: { + type: definePropType([Number, Object]), + default: () => mutable({}) + }, + md: { + type: definePropType([Number, Object]), + default: () => mutable({}) + }, + lg: { + type: definePropType([Number, Object]), + default: () => mutable({}) + }, + xl: { + type: definePropType([Number, Object]), + default: () => mutable({}) + } + }); + + const __default__$10 = vue.defineComponent({ + name: "ElCol" + }); + const _sfc_main$1z = /* @__PURE__ */ vue.defineComponent({ + ...__default__$10, + props: colProps, + setup(__props) { + const props = __props; + const { gutter } = vue.inject(rowContextKey, { gutter: vue.computed(() => 0) }); + const ns = useNamespace("col"); + const style = vue.computed(() => { + const styles = {}; + if (gutter.value) { + styles.paddingLeft = styles.paddingRight = `${gutter.value / 2}px`; + } + return styles; + }); + const colKls = vue.computed(() => { + const classes = []; + const pos = ["span", "offset", "pull", "push"]; + pos.forEach((prop) => { + const size = props[prop]; + if (isNumber$1(size)) { + if (prop === "span") + classes.push(ns.b(`${props[prop]}`)); + else if (size > 0) + classes.push(ns.b(`${prop}-${props[prop]}`)); + } + }); + const sizes = ["xs", "sm", "md", "lg", "xl"]; + sizes.forEach((size) => { + if (isNumber$1(props[size])) { + classes.push(ns.b(`${size}-${props[size]}`)); + } else if (isObject$1(props[size])) { + Object.entries(props[size]).forEach(([prop, sizeProp]) => { + classes.push(prop !== "span" ? ns.b(`${size}-${prop}-${sizeProp}`) : ns.b(`${size}-${sizeProp}`)); + }); + } + }); + if (gutter.value) { + classes.push(ns.is("guttered")); + } + return [ns.b(), classes]; + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), { + class: vue.normalizeClass(vue.unref(colKls)), + style: vue.normalizeStyle(vue.unref(style)) + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["class", "style"]); + }; + } + }); + var Col = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__file", "col.vue"]]); + + const ElCol = withInstall(Col); + + const emitChangeFn = (value) => typeof isNumber$1(value); + const collapseProps = buildProps({ + accordion: Boolean, + modelValue: { + type: definePropType([Array, String, Number]), + default: () => mutable([]) + } + }); + const collapseEmits = { + [UPDATE_MODEL_EVENT]: emitChangeFn, + [CHANGE_EVENT]: emitChangeFn + }; + + const collapseContextKey = Symbol("collapseContextKey"); + + const useCollapse = (props, emit) => { + const activeNames = vue.ref(castArray$1(props.modelValue)); + const setActiveNames = (_activeNames) => { + activeNames.value = _activeNames; + const value = props.accordion ? activeNames.value[0] : activeNames.value; + emit(UPDATE_MODEL_EVENT, value); + emit(CHANGE_EVENT, value); + }; + const handleItemClick = (name) => { + if (props.accordion) { + setActiveNames([activeNames.value[0] === name ? "" : name]); + } else { + const _activeNames = [...activeNames.value]; + const index = _activeNames.indexOf(name); + if (index > -1) { + _activeNames.splice(index, 1); + } else { + _activeNames.push(name); + } + setActiveNames(_activeNames); + } + }; + vue.watch(() => props.modelValue, () => activeNames.value = castArray$1(props.modelValue), { deep: true }); + vue.provide(collapseContextKey, { + activeNames, + handleItemClick + }); + return { + activeNames, + setActiveNames + }; + }; + const useCollapseDOM = () => { + const ns = useNamespace("collapse"); + const rootKls = vue.computed(() => ns.b()); + return { + rootKls + }; + }; + + const __default__$$ = vue.defineComponent({ + name: "ElCollapse" + }); + const _sfc_main$1y = /* @__PURE__ */ vue.defineComponent({ + ...__default__$$, + props: collapseProps, + emits: collapseEmits, + setup(__props, { expose, emit }) { + const props = __props; + const { activeNames, setActiveNames } = useCollapse(props, emit); + const { rootKls } = useCollapseDOM(); + expose({ + activeNames, + setActiveNames + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(rootKls)), + role: "tablist", + "aria-multiselectable": "true" + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2); + }; + } + }); + var Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["__file", "collapse.vue"]]); + + const __default__$_ = vue.defineComponent({ + name: "ElCollapseTransition" + }); + const _sfc_main$1x = /* @__PURE__ */ vue.defineComponent({ + ...__default__$_, + setup(__props) { + const ns = useNamespace("collapse-transition"); + const on = { + beforeEnter(el) { + if (!el.dataset) + el.dataset = {}; + el.dataset.oldPaddingTop = el.style.paddingTop; + el.dataset.oldPaddingBottom = el.style.paddingBottom; + el.style.maxHeight = 0; + el.style.paddingTop = 0; + el.style.paddingBottom = 0; + }, + enter(el) { + el.dataset.oldOverflow = el.style.overflow; + if (el.scrollHeight !== 0) { + el.style.maxHeight = `${el.scrollHeight}px`; + el.style.paddingTop = el.dataset.oldPaddingTop; + el.style.paddingBottom = el.dataset.oldPaddingBottom; + } else { + el.style.maxHeight = 0; + el.style.paddingTop = el.dataset.oldPaddingTop; + el.style.paddingBottom = el.dataset.oldPaddingBottom; + } + el.style.overflow = "hidden"; + }, + afterEnter(el) { + el.style.maxHeight = ""; + el.style.overflow = el.dataset.oldOverflow; + }, + beforeLeave(el) { + if (!el.dataset) + el.dataset = {}; + el.dataset.oldPaddingTop = el.style.paddingTop; + el.dataset.oldPaddingBottom = el.style.paddingBottom; + el.dataset.oldOverflow = el.style.overflow; + el.style.maxHeight = `${el.scrollHeight}px`; + el.style.overflow = "hidden"; + }, + leave(el) { + if (el.scrollHeight !== 0) { + el.style.maxHeight = 0; + el.style.paddingTop = 0; + el.style.paddingBottom = 0; + } + }, + afterLeave(el) { + el.style.maxHeight = ""; + el.style.overflow = el.dataset.oldOverflow; + el.style.paddingTop = el.dataset.oldPaddingTop; + el.style.paddingBottom = el.dataset.oldPaddingBottom; + } + }; + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({ + name: vue.unref(ns).b() + }, vue.toHandlers(on)), { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 16, ["name"]); + }; + } + }); + var CollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__file", "collapse-transition.vue"]]); + + CollapseTransition.install = (app) => { + app.component(CollapseTransition.name, CollapseTransition); + }; + const _CollapseTransition = CollapseTransition; + const ElCollapseTransition = _CollapseTransition; + + const collapseItemProps = buildProps({ + title: { + type: String, + default: "" + }, + name: { + type: definePropType([String, Number]), + default: () => generateId() + }, + disabled: Boolean + }); + + const useCollapseItem = (props) => { + const collapse = vue.inject(collapseContextKey); + const focusing = vue.ref(false); + const isClick = vue.ref(false); + const id = vue.ref(generateId()); + const isActive = vue.computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(props.name)); + const handleFocus = () => { + setTimeout(() => { + if (!isClick.value) { + focusing.value = true; + } else { + isClick.value = false; + } + }, 50); + }; + const handleHeaderClick = () => { + if (props.disabled) + return; + collapse == null ? void 0 : collapse.handleItemClick(props.name); + focusing.value = false; + isClick.value = true; + }; + const handleEnterClick = () => { + collapse == null ? void 0 : collapse.handleItemClick(props.name); + }; + return { + focusing, + id, + isActive, + handleFocus, + handleHeaderClick, + handleEnterClick + }; + }; + const useCollapseItemDOM = (props, { focusing, isActive, id }) => { + const ns = useNamespace("collapse"); + const rootKls = vue.computed(() => [ + ns.b("item"), + ns.is("active", vue.unref(isActive)), + ns.is("disabled", props.disabled) + ]); + const headKls = vue.computed(() => [ + ns.be("item", "header"), + ns.is("active", vue.unref(isActive)), + { focusing: vue.unref(focusing) && !props.disabled } + ]); + const arrowKls = vue.computed(() => [ + ns.be("item", "arrow"), + ns.is("active", vue.unref(isActive)) + ]); + const itemWrapperKls = vue.computed(() => ns.be("item", "wrap")); + const itemContentKls = vue.computed(() => ns.be("item", "content")); + const scopedContentId = vue.computed(() => ns.b(`content-${vue.unref(id)}`)); + const scopedHeadId = vue.computed(() => ns.b(`head-${vue.unref(id)}`)); + return { + arrowKls, + headKls, + rootKls, + itemWrapperKls, + itemContentKls, + scopedContentId, + scopedHeadId + }; + }; + + const _hoisted_1$M = ["aria-expanded", "aria-controls", "aria-describedby"]; + const _hoisted_2$v = ["id", "tabindex"]; + const _hoisted_3$h = ["id", "aria-hidden", "aria-labelledby"]; + const __default__$Z = vue.defineComponent({ + name: "ElCollapseItem" + }); + const _sfc_main$1w = /* @__PURE__ */ vue.defineComponent({ + ...__default__$Z, + props: collapseItemProps, + setup(__props, { expose }) { + const props = __props; + const { + focusing, + id, + isActive, + handleFocus, + handleHeaderClick, + handleEnterClick + } = useCollapseItem(props); + const { + arrowKls, + headKls, + rootKls, + itemWrapperKls, + itemContentKls, + scopedContentId, + scopedHeadId + } = useCollapseItemDOM(props, { focusing, isActive, id }); + expose({ + isActive + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(rootKls)) + }, [ + vue.createElementVNode("div", { + role: "tab", + "aria-expanded": vue.unref(isActive), + "aria-controls": vue.unref(scopedContentId), + "aria-describedby": vue.unref(scopedContentId) + }, [ + vue.createElementVNode("div", { + id: vue.unref(scopedHeadId), + class: vue.normalizeClass(vue.unref(headKls)), + role: "button", + tabindex: _ctx.disabled ? -1 : 0, + onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleHeaderClick) && vue.unref(handleHeaderClick)(...args)), + onKeypress: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => vue.unref(handleEnterClick) && vue.unref(handleEnterClick)(...args), ["stop", "prevent"]), ["space", "enter"])), + onFocus: _cache[2] || (_cache[2] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)), + onBlur: _cache[3] || (_cache[3] = ($event) => focusing.value = false) + }, [ + vue.renderSlot(_ctx.$slots, "title", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.title), 1) + ]), + vue.createVNode(vue.unref(ElIcon), { + class: vue.normalizeClass(vue.unref(arrowKls)) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_right_default)) + ]), + _: 1 + }, 8, ["class"]) + ], 42, _hoisted_2$v) + ], 8, _hoisted_1$M), + vue.createVNode(vue.unref(_CollapseTransition), null, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createElementVNode("div", { + id: vue.unref(scopedContentId), + class: vue.normalizeClass(vue.unref(itemWrapperKls)), + role: "tabpanel", + "aria-hidden": !vue.unref(isActive), + "aria-labelledby": vue.unref(scopedHeadId) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(itemContentKls)) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2) + ], 10, _hoisted_3$h), [ + [vue.vShow, vue.unref(isActive)] + ]) + ]), + _: 3 + }) + ], 2); + }; + } + }); + var CollapseItem = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__file", "collapse-item.vue"]]); + + const ElCollapse = withInstall(Collapse, { + CollapseItem + }); + const ElCollapseItem = withNoopInstall(CollapseItem); + + const alphaSliderProps = buildProps({ + color: { + type: definePropType(Object), + required: true + }, + vertical: { + type: Boolean, + default: false + } + }); + + let isDragging = false; + function draggable(element, options) { + if (!isClient) + return; + const moveFn = function(event) { + var _a; + (_a = options.drag) == null ? void 0 : _a.call(options, event); + }; + const upFn = function(event) { + var _a; + document.removeEventListener("mousemove", moveFn); + document.removeEventListener("mouseup", upFn); + document.removeEventListener("touchmove", moveFn); + document.removeEventListener("touchend", upFn); + document.onselectstart = null; + document.ondragstart = null; + isDragging = false; + (_a = options.end) == null ? void 0 : _a.call(options, event); + }; + const downFn = function(event) { + var _a; + if (isDragging) + return; + event.preventDefault(); + document.onselectstart = () => false; + document.ondragstart = () => false; + document.addEventListener("mousemove", moveFn); + document.addEventListener("mouseup", upFn); + document.addEventListener("touchmove", moveFn); + document.addEventListener("touchend", upFn); + isDragging = true; + (_a = options.start) == null ? void 0 : _a.call(options, event); + }; + element.addEventListener("mousedown", downFn); + element.addEventListener("touchstart", downFn); + } + + const useAlphaSlider = (props) => { + const instance = vue.getCurrentInstance(); + const thumb = vue.shallowRef(); + const bar = vue.shallowRef(); + function handleClick(event) { + const target = event.target; + if (target !== thumb.value) { + handleDrag(event); + } + } + function handleDrag(event) { + if (!bar.value || !thumb.value) + return; + const el = instance.vnode.el; + const rect = el.getBoundingClientRect(); + const { clientX, clientY } = getClientXY(event); + if (!props.vertical) { + let left = clientX - rect.left; + left = Math.max(thumb.value.offsetWidth / 2, left); + left = Math.min(left, rect.width - thumb.value.offsetWidth / 2); + props.color.set("alpha", Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100)); + } else { + let top = clientY - rect.top; + top = Math.max(thumb.value.offsetHeight / 2, top); + top = Math.min(top, rect.height - thumb.value.offsetHeight / 2); + props.color.set("alpha", Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100)); + } + } + return { + thumb, + bar, + handleDrag, + handleClick + }; + }; + const useAlphaSliderDOM = (props, { + bar, + thumb, + handleDrag + }) => { + const instance = vue.getCurrentInstance(); + const ns = useNamespace("color-alpha-slider"); + const thumbLeft = vue.ref(0); + const thumbTop = vue.ref(0); + const background = vue.ref(); + function getThumbLeft() { + if (!thumb.value) + return 0; + if (props.vertical) + return 0; + const el = instance.vnode.el; + const alpha = props.color.get("alpha"); + if (!el) + return 0; + return Math.round(alpha * (el.offsetWidth - thumb.value.offsetWidth / 2) / 100); + } + function getThumbTop() { + if (!thumb.value) + return 0; + const el = instance.vnode.el; + if (!props.vertical) + return 0; + const alpha = props.color.get("alpha"); + if (!el) + return 0; + return Math.round(alpha * (el.offsetHeight - thumb.value.offsetHeight / 2) / 100); + } + function getBackground() { + if (props.color && props.color.value) { + const { r, g, b } = props.color.toRgb(); + return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`; + } + return ""; + } + function update() { + thumbLeft.value = getThumbLeft(); + thumbTop.value = getThumbTop(); + background.value = getBackground(); + } + vue.onMounted(() => { + if (!bar.value || !thumb.value) + return; + const dragConfig = { + drag: (event) => { + handleDrag(event); + }, + end: (event) => { + handleDrag(event); + } + }; + draggable(bar.value, dragConfig); + draggable(thumb.value, dragConfig); + update(); + }); + vue.watch(() => props.color.get("alpha"), () => update()); + vue.watch(() => props.color.value, () => update()); + const rootKls = vue.computed(() => [ns.b(), ns.is("vertical", props.vertical)]); + const barKls = vue.computed(() => ns.e("bar")); + const thumbKls = vue.computed(() => ns.e("thumb")); + const barStyle = vue.computed(() => ({ background: background.value })); + const thumbStyle = vue.computed(() => ({ + left: addUnit(thumbLeft.value), + top: addUnit(thumbTop.value) + })); + return { rootKls, barKls, barStyle, thumbKls, thumbStyle, update }; + }; + + const COMPONENT_NAME$d = "ElColorAlphaSlider"; + const __default__$Y = vue.defineComponent({ + name: COMPONENT_NAME$d + }); + const _sfc_main$1v = /* @__PURE__ */ vue.defineComponent({ + ...__default__$Y, + props: alphaSliderProps, + setup(__props, { expose }) { + const props = __props; + const { bar, thumb, handleDrag, handleClick } = useAlphaSlider(props); + const { rootKls, barKls, barStyle, thumbKls, thumbStyle, update } = useAlphaSliderDOM(props, { + bar, + thumb, + handleDrag + }); + expose({ + update, + bar, + thumb + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(rootKls)) + }, [ + vue.createElementVNode("div", { + ref_key: "bar", + ref: bar, + class: vue.normalizeClass(vue.unref(barKls)), + style: vue.normalizeStyle(vue.unref(barStyle)), + onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleClick) && vue.unref(handleClick)(...args)) + }, null, 6), + vue.createElementVNode("div", { + ref_key: "thumb", + ref: thumb, + class: vue.normalizeClass(vue.unref(thumbKls)), + style: vue.normalizeStyle(vue.unref(thumbStyle)) + }, null, 6) + ], 2); + }; + } + }); + var AlphaSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["__file", "alpha-slider.vue"]]); + + const _sfc_main$1u = vue.defineComponent({ + name: "ElColorHueSlider", + props: { + color: { + type: Object, + required: true + }, + vertical: Boolean + }, + setup(props) { + const ns = useNamespace("color-hue-slider"); + const instance = vue.getCurrentInstance(); + const thumb = vue.ref(); + const bar = vue.ref(); + const thumbLeft = vue.ref(0); + const thumbTop = vue.ref(0); + const hueValue = vue.computed(() => { + return props.color.get("hue"); + }); + vue.watch(() => hueValue.value, () => { + update(); + }); + function handleClick(event) { + const target = event.target; + if (target !== thumb.value) { + handleDrag(event); + } + } + function handleDrag(event) { + if (!bar.value || !thumb.value) + return; + const el = instance.vnode.el; + const rect = el.getBoundingClientRect(); + const { clientX, clientY } = getClientXY(event); + let hue; + if (!props.vertical) { + let left = clientX - rect.left; + left = Math.min(left, rect.width - thumb.value.offsetWidth / 2); + left = Math.max(thumb.value.offsetWidth / 2, left); + hue = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360); + } else { + let top = clientY - rect.top; + top = Math.min(top, rect.height - thumb.value.offsetHeight / 2); + top = Math.max(thumb.value.offsetHeight / 2, top); + hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360); + } + props.color.set("hue", hue); + } + function getThumbLeft() { + if (!thumb.value) + return 0; + const el = instance.vnode.el; + if (props.vertical) + return 0; + const hue = props.color.get("hue"); + if (!el) + return 0; + return Math.round(hue * (el.offsetWidth - thumb.value.offsetWidth / 2) / 360); + } + function getThumbTop() { + if (!thumb.value) + return 0; + const el = instance.vnode.el; + if (!props.vertical) + return 0; + const hue = props.color.get("hue"); + if (!el) + return 0; + return Math.round(hue * (el.offsetHeight - thumb.value.offsetHeight / 2) / 360); + } + function update() { + thumbLeft.value = getThumbLeft(); + thumbTop.value = getThumbTop(); + } + vue.onMounted(() => { + if (!bar.value || !thumb.value) + return; + const dragConfig = { + drag: (event) => { + handleDrag(event); + }, + end: (event) => { + handleDrag(event); + } + }; + draggable(bar.value, dragConfig); + draggable(thumb.value, dragConfig); + update(); + }); + return { + bar, + thumb, + thumbLeft, + thumbTop, + hueValue, + handleClick, + update, + ns + }; + } + }); + function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.is("vertical", _ctx.vertical)]) + }, [ + vue.createElementVNode("div", { + ref: "bar", + class: vue.normalizeClass(_ctx.ns.e("bar")), + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)) + }, null, 2), + vue.createElementVNode("div", { + ref: "thumb", + class: vue.normalizeClass(_ctx.ns.e("thumb")), + style: vue.normalizeStyle({ + left: _ctx.thumbLeft + "px", + top: _ctx.thumbTop + "px" + }) + }, null, 6) + ], 2); + } + var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$r], ["__file", "hue-slider.vue"]]); + + const colorPickerProps = buildProps({ + modelValue: String, + id: String, + showAlpha: Boolean, + colorFormat: String, + disabled: Boolean, + size: useSizeProp, + popperClass: { + type: String, + default: "" + }, + label: { + type: String, + default: void 0 + }, + tabindex: { + type: [String, Number], + default: 0 + }, + predefine: { + type: definePropType(Array) + }, + validateEvent: { + type: Boolean, + default: true + } + }); + const colorPickerEmits = { + [UPDATE_MODEL_EVENT]: (val) => isString$1(val) || isNil(val), + [CHANGE_EVENT]: (val) => isString$1(val) || isNil(val), + activeChange: (val) => isString$1(val) || isNil(val) + }; + const colorPickerContextKey = Symbol("colorPickerContextKey"); + + const hsv2hsl = function(hue, sat, val) { + return [ + hue, + sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue) || 0, + hue / 2 + ]; + }; + const isOnePointZero = function(n) { + return typeof n === "string" && n.includes(".") && Number.parseFloat(n) === 1; + }; + const isPercentage = function(n) { + return typeof n === "string" && n.includes("%"); + }; + const bound01 = function(value, max) { + if (isOnePointZero(value)) + value = "100%"; + const processPercent = isPercentage(value); + value = Math.min(max, Math.max(0, Number.parseFloat(`${value}`))); + if (processPercent) { + value = Number.parseInt(`${value * max}`, 10) / 100; + } + if (Math.abs(value - max) < 1e-6) { + return 1; + } + return value % max / Number.parseFloat(max); + }; + const INT_HEX_MAP = { + 10: "A", + 11: "B", + 12: "C", + 13: "D", + 14: "E", + 15: "F" + }; + const hexOne = (value) => { + value = Math.min(Math.round(value), 255); + const high = Math.floor(value / 16); + const low = value % 16; + return `${INT_HEX_MAP[high] || high}${INT_HEX_MAP[low] || low}`; + }; + const toHex = function({ r, g, b }) { + if (Number.isNaN(+r) || Number.isNaN(+g) || Number.isNaN(+b)) + return ""; + return `#${hexOne(r)}${hexOne(g)}${hexOne(b)}`; + }; + const HEX_INT_MAP = { + A: 10, + B: 11, + C: 12, + D: 13, + E: 14, + F: 15 + }; + const parseHexChannel = function(hex) { + if (hex.length === 2) { + return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]); + } + return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]; + }; + const hsl2hsv = function(hue, sat, light) { + sat = sat / 100; + light = light / 100; + let smin = sat; + const lmin = Math.max(light, 0.01); + light *= 2; + sat *= light <= 1 ? light : 2 - light; + smin *= lmin <= 1 ? lmin : 2 - lmin; + const v = (light + sat) / 2; + const sv = light === 0 ? 2 * smin / (lmin + smin) : 2 * sat / (light + sat); + return { + h: hue, + s: sv * 100, + v: v * 100 + }; + }; + const rgb2hsv = (r, g, b) => { + r = bound01(r, 255); + g = bound01(g, 255); + b = bound01(b, 255); + const max = Math.max(r, g, b); + const min = Math.min(r, g, b); + let h; + const v = max; + const d = max - min; + const s = max === 0 ? 0 : d / max; + if (max === min) { + h = 0; + } else { + switch (max) { + case r: { + h = (g - b) / d + (g < b ? 6 : 0); + break; + } + case g: { + h = (b - r) / d + 2; + break; + } + case b: { + h = (r - g) / d + 4; + break; + } + } + h /= 6; + } + return { h: h * 360, s: s * 100, v: v * 100 }; + }; + const hsv2rgb = function(h, s, v) { + h = bound01(h, 360) * 6; + s = bound01(s, 100); + v = bound01(v, 100); + const i = Math.floor(h); + const f = h - i; + const p = v * (1 - s); + const q = v * (1 - f * s); + const t = v * (1 - (1 - f) * s); + const mod = i % 6; + const r = [v, q, p, p, t, v][mod]; + const g = [t, v, v, q, p, p][mod]; + const b = [p, p, t, v, v, q][mod]; + return { + r: Math.round(r * 255), + g: Math.round(g * 255), + b: Math.round(b * 255) + }; + }; + class Color { + constructor(options = {}) { + this._hue = 0; + this._saturation = 100; + this._value = 100; + this._alpha = 100; + this.enableAlpha = false; + this.format = "hex"; + this.value = ""; + for (const option in options) { + if (hasOwn(options, option)) { + this[option] = options[option]; + } + } + if (options.value) { + this.fromString(options.value); + } else { + this.doOnChange(); + } + } + set(prop, value) { + if (arguments.length === 1 && typeof prop === "object") { + for (const p in prop) { + if (hasOwn(prop, p)) { + this.set(p, prop[p]); + } + } + return; + } + this[`_${prop}`] = value; + this.doOnChange(); + } + get(prop) { + if (prop === "alpha") { + return Math.floor(this[`_${prop}`]); + } + return this[`_${prop}`]; + } + toRgb() { + return hsv2rgb(this._hue, this._saturation, this._value); + } + fromString(value) { + if (!value) { + this._hue = 0; + this._saturation = 100; + this._value = 100; + this.doOnChange(); + return; + } + const fromHSV = (h, s, v) => { + this._hue = Math.max(0, Math.min(360, h)); + this._saturation = Math.max(0, Math.min(100, s)); + this._value = Math.max(0, Math.min(100, v)); + this.doOnChange(); + }; + if (value.includes("hsl")) { + const parts = value.replace(/hsla|hsl|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10)); + if (parts.length === 4) { + this._alpha = Number.parseFloat(parts[3]) * 100; + } else if (parts.length === 3) { + this._alpha = 100; + } + if (parts.length >= 3) { + const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]); + fromHSV(h, s, v); + } + } else if (value.includes("hsv")) { + const parts = value.replace(/hsva|hsv|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10)); + if (parts.length === 4) { + this._alpha = Number.parseFloat(parts[3]) * 100; + } else if (parts.length === 3) { + this._alpha = 100; + } + if (parts.length >= 3) { + fromHSV(parts[0], parts[1], parts[2]); + } + } else if (value.includes("rgb")) { + const parts = value.replace(/rgba|rgb|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10)); + if (parts.length === 4) { + this._alpha = Number.parseFloat(parts[3]) * 100; + } else if (parts.length === 3) { + this._alpha = 100; + } + if (parts.length >= 3) { + const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]); + fromHSV(h, s, v); + } + } else if (value.includes("#")) { + const hex = value.replace("#", "").trim(); + if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{8}$/.test(hex)) + return; + let r, g, b; + if (hex.length === 3) { + r = parseHexChannel(hex[0] + hex[0]); + g = parseHexChannel(hex[1] + hex[1]); + b = parseHexChannel(hex[2] + hex[2]); + } else if (hex.length === 6 || hex.length === 8) { + r = parseHexChannel(hex.slice(0, 2)); + g = parseHexChannel(hex.slice(2, 4)); + b = parseHexChannel(hex.slice(4, 6)); + } + if (hex.length === 8) { + this._alpha = parseHexChannel(hex.slice(6)) / 255 * 100; + } else if (hex.length === 3 || hex.length === 6) { + this._alpha = 100; + } + const { h, s, v } = rgb2hsv(r, g, b); + fromHSV(h, s, v); + } + } + compare(color) { + return Math.abs(color._hue - this._hue) < 2 && Math.abs(color._saturation - this._saturation) < 1 && Math.abs(color._value - this._value) < 1 && Math.abs(color._alpha - this._alpha) < 1; + } + doOnChange() { + const { _hue, _saturation, _value, _alpha, format } = this; + if (this.enableAlpha) { + switch (format) { + case "hsl": { + const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100); + this.value = `hsla(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%, ${this.get("alpha") / 100})`; + break; + } + case "hsv": { + this.value = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%, ${this.get("alpha") / 100})`; + break; + } + case "hex": { + this.value = `${toHex(hsv2rgb(_hue, _saturation, _value))}${hexOne(_alpha * 255 / 100)}`; + break; + } + default: { + const { r, g, b } = hsv2rgb(_hue, _saturation, _value); + this.value = `rgba(${r}, ${g}, ${b}, ${this.get("alpha") / 100})`; + } + } + } else { + switch (format) { + case "hsl": { + const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100); + this.value = `hsl(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%)`; + break; + } + case "hsv": { + this.value = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%)`; + break; + } + case "rgb": { + const { r, g, b } = hsv2rgb(_hue, _saturation, _value); + this.value = `rgb(${r}, ${g}, ${b})`; + break; + } + default: { + this.value = toHex(hsv2rgb(_hue, _saturation, _value)); + } + } + } + } + } + + const _sfc_main$1t = vue.defineComponent({ + props: { + colors: { + type: Array, + required: true + }, + color: { + type: Object, + required: true + } + }, + setup(props) { + const ns = useNamespace("color-predefine"); + const { currentColor } = vue.inject(colorPickerContextKey); + const rgbaColors = vue.ref(parseColors(props.colors, props.color)); + vue.watch(() => currentColor.value, (val) => { + const color = new Color(); + color.fromString(val); + rgbaColors.value.forEach((item) => { + item.selected = color.compare(item); + }); + }); + vue.watchEffect(() => { + rgbaColors.value = parseColors(props.colors, props.color); + }); + function handleSelect(index) { + props.color.fromString(props.colors[index]); + } + function parseColors(colors, color) { + return colors.map((value) => { + const c = new Color(); + c.enableAlpha = true; + c.format = "rgba"; + c.fromString(value); + c.selected = c.value === color.value; + return c; + }); + } + return { + rgbaColors, + handleSelect, + ns + }; + } + }); + const _hoisted_1$L = ["onClick"]; + function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(_ctx.ns.b()) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("colors")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rgbaColors, (item, index) => { + return vue.openBlock(), vue.createElementBlock("div", { + key: _ctx.colors[index], + class: vue.normalizeClass([ + _ctx.ns.e("color-selector"), + _ctx.ns.is("alpha", item._alpha < 100), + { selected: item.selected } + ]), + onClick: ($event) => _ctx.handleSelect(index) + }, [ + vue.createElementVNode("div", { + style: vue.normalizeStyle({ backgroundColor: item.value }) + }, null, 4) + ], 10, _hoisted_1$L); + }), 128)) + ], 2) + ], 2); + } + var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$q], ["__file", "predefine.vue"]]); + + const _sfc_main$1s = vue.defineComponent({ + name: "ElSlPanel", + props: { + color: { + type: Object, + required: true + } + }, + setup(props) { + const ns = useNamespace("color-svpanel"); + const instance = vue.getCurrentInstance(); + const cursorTop = vue.ref(0); + const cursorLeft = vue.ref(0); + const background = vue.ref("hsl(0, 100%, 50%)"); + const colorValue = vue.computed(() => { + const hue = props.color.get("hue"); + const value = props.color.get("value"); + return { hue, value }; + }); + function update() { + const saturation = props.color.get("saturation"); + const value = props.color.get("value"); + const el = instance.vnode.el; + const { clientWidth: width, clientHeight: height } = el; + cursorLeft.value = saturation * width / 100; + cursorTop.value = (100 - value) * height / 100; + background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`; + } + function handleDrag(event) { + const el = instance.vnode.el; + const rect = el.getBoundingClientRect(); + const { clientX, clientY } = getClientXY(event); + let left = clientX - rect.left; + let top = clientY - rect.top; + left = Math.max(0, left); + left = Math.min(left, rect.width); + top = Math.max(0, top); + top = Math.min(top, rect.height); + cursorLeft.value = left; + cursorTop.value = top; + props.color.set({ + saturation: left / rect.width * 100, + value: 100 - top / rect.height * 100 + }); + } + vue.watch(() => colorValue.value, () => { + update(); + }); + vue.onMounted(() => { + draggable(instance.vnode.el, { + drag: (event) => { + handleDrag(event); + }, + end: (event) => { + handleDrag(event); + } + }); + update(); + }); + return { + cursorTop, + cursorLeft, + background, + colorValue, + handleDrag, + update, + ns + }; + } + }); + const _hoisted_1$K = /* @__PURE__ */ vue.createElementVNode("div", null, null, -1); + const _hoisted_2$u = [ + _hoisted_1$K + ]; + function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(_ctx.ns.b()), + style: vue.normalizeStyle({ + backgroundColor: _ctx.background + }) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("white")) + }, null, 2), + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("black")) + }, null, 2), + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("cursor")), + style: vue.normalizeStyle({ + top: _ctx.cursorTop + "px", + left: _ctx.cursorLeft + "px" + }) + }, _hoisted_2$u, 6) + ], 6); + } + var SvPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$p], ["__file", "sv-panel.vue"]]); + + const _hoisted_1$J = ["id", "aria-label", "aria-labelledby", "aria-description", "tabindex", "onKeydown"]; + const __default__$X = vue.defineComponent({ + name: "ElColorPicker" + }); + const _sfc_main$1r = /* @__PURE__ */ vue.defineComponent({ + ...__default__$X, + props: colorPickerProps, + emits: colorPickerEmits, + setup(__props, { expose, emit }) { + const props = __props; + const { t } = useLocale(); + const ns = useNamespace("color"); + const { formItem } = useFormItem(); + const colorSize = useFormSize(); + const colorDisabled = useFormDisabled(); + const { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, { + formItemContext: formItem + }); + const hue = vue.ref(); + const sv = vue.ref(); + const alpha = vue.ref(); + const popper = vue.ref(); + let shouldActiveChange = true; + const color = vue.reactive(new Color({ + enableAlpha: props.showAlpha, + format: props.colorFormat || "", + value: props.modelValue + })); + const showPicker = vue.ref(false); + const showPanelColor = vue.ref(false); + const customInput = vue.ref(""); + const displayedColor = vue.computed(() => { + if (!props.modelValue && !showPanelColor.value) { + return "transparent"; + } + return displayedRgb(color, props.showAlpha); + }); + const currentColor = vue.computed(() => { + return !props.modelValue && !showPanelColor.value ? "" : color.value; + }); + const buttonAriaLabel = vue.computed(() => { + return !isLabeledByFormItem.value ? props.label || t("el.colorpicker.defaultLabel") : void 0; + }); + const buttonAriaLabelledby = vue.computed(() => { + return isLabeledByFormItem.value ? formItem == null ? void 0 : formItem.labelId : void 0; + }); + const btnKls = vue.computed(() => { + return [ + ns.b("picker"), + ns.is("disabled", colorDisabled.value), + ns.bm("picker", colorSize.value) + ]; + }); + function displayedRgb(color2, showAlpha) { + if (!(color2 instanceof Color)) { + throw new TypeError("color should be instance of _color Class"); + } + const { r, g, b } = color2.toRgb(); + return showAlpha ? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})` : `rgb(${r}, ${g}, ${b})`; + } + function setShowPicker(value) { + showPicker.value = value; + } + const debounceSetShowPicker = debounce(setShowPicker, 100); + function hide() { + debounceSetShowPicker(false); + resetColor(); + } + function resetColor() { + vue.nextTick(() => { + if (props.modelValue) { + color.fromString(props.modelValue); + } else { + color.value = ""; + vue.nextTick(() => { + showPanelColor.value = false; + }); + } + }); + } + function handleTrigger() { + if (colorDisabled.value) + return; + debounceSetShowPicker(!showPicker.value); + } + function handleConfirm() { + color.fromString(customInput.value); + } + function confirmValue() { + const value = color.value; + emit(UPDATE_MODEL_EVENT, value); + emit("change", value); + if (props.validateEvent) { + formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn()); + } + debounceSetShowPicker(false); + vue.nextTick(() => { + const newColor = new Color({ + enableAlpha: props.showAlpha, + format: props.colorFormat || "", + value: props.modelValue + }); + if (!color.compare(newColor)) { + resetColor(); + } + }); + } + function clear() { + debounceSetShowPicker(false); + emit(UPDATE_MODEL_EVENT, null); + emit("change", null); + if (props.modelValue !== null && props.validateEvent) { + formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn()); + } + resetColor(); + } + vue.onMounted(() => { + if (props.modelValue) { + customInput.value = currentColor.value; + } + }); + vue.watch(() => props.modelValue, (newVal) => { + if (!newVal) { + showPanelColor.value = false; + } else if (newVal && newVal !== color.value) { + shouldActiveChange = false; + color.fromString(newVal); + } + }); + vue.watch(() => currentColor.value, (val) => { + customInput.value = val; + shouldActiveChange && emit("activeChange", val); + shouldActiveChange = true; + }); + vue.watch(() => color.value, () => { + if (!props.modelValue && !showPanelColor.value) { + showPanelColor.value = true; + } + }); + vue.watch(() => showPicker.value, () => { + vue.nextTick(() => { + var _a, _b, _c; + (_a = hue.value) == null ? void 0 : _a.update(); + (_b = sv.value) == null ? void 0 : _b.update(); + (_c = alpha.value) == null ? void 0 : _c.update(); + }); + }); + vue.provide(colorPickerContextKey, { + currentColor + }); + expose({ + color + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), { + ref_key: "popper", + ref: popper, + visible: showPicker.value, + "show-arrow": false, + "fallback-placements": ["bottom", "top", "right", "left"], + offset: 0, + "gpu-acceleration": false, + "popper-class": [vue.unref(ns).be("picker", "panel"), vue.unref(ns).b("dropdown"), _ctx.popperClass], + "stop-popper-mouse-event": false, + effect: "light", + trigger: "click", + transition: `${vue.unref(ns).namespace.value}-zoom-in-top`, + persistent: "" + }, { + content: vue.withCtx(() => [ + vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", null, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).be("dropdown", "main-wrapper")) + }, [ + vue.createVNode(HueSlider, { + ref_key: "hue", + ref: hue, + class: "hue-slider", + color: vue.unref(color), + vertical: "" + }, null, 8, ["color"]), + vue.createVNode(SvPanel, { + ref: "svPanel", + color: vue.unref(color) + }, null, 8, ["color"]) + ], 2), + _ctx.showAlpha ? (vue.openBlock(), vue.createBlock(AlphaSlider, { + key: 0, + ref_key: "alpha", + ref: alpha, + color: vue.unref(color) + }, null, 8, ["color"])) : vue.createCommentVNode("v-if", true), + _ctx.predefine ? (vue.openBlock(), vue.createBlock(Predefine, { + key: 1, + ref: "predefine", + color: vue.unref(color), + colors: _ctx.predefine + }, null, 8, ["color", "colors"])) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).be("dropdown", "btns")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(ns).be("dropdown", "value")) + }, [ + vue.createVNode(vue.unref(ElInput), { + modelValue: customInput.value, + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customInput.value = $event), + "validate-event": false, + size: "small", + onKeyup: vue.withKeys(handleConfirm, ["enter"]), + onBlur: handleConfirm + }, null, 8, ["modelValue", "onKeyup"]) + ], 2), + vue.createVNode(vue.unref(ElButton), { + class: vue.normalizeClass(vue.unref(ns).be("dropdown", "link-btn")), + text: "", + size: "small", + onClick: clear + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.colorpicker.clear")), 1) + ]), + _: 1 + }, 8, ["class"]), + vue.createVNode(vue.unref(ElButton), { + plain: "", + size: "small", + class: vue.normalizeClass(vue.unref(ns).be("dropdown", "btn")), + onClick: confirmValue + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.colorpicker.confirm")), 1) + ]), + _: 1 + }, 8, ["class"]) + ], 2) + ])), [ + [vue.unref(ClickOutside), hide] + ]) + ]), + default: vue.withCtx(() => [ + vue.createElementVNode("div", { + id: vue.unref(buttonId), + class: vue.normalizeClass(vue.unref(btnKls)), + role: "button", + "aria-label": vue.unref(buttonAriaLabel), + "aria-labelledby": vue.unref(buttonAriaLabelledby), + "aria-description": vue.unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }), + tabindex: _ctx.tabindex, + onKeydown: vue.withKeys(handleTrigger, ["enter"]) + }, [ + vue.unref(colorDisabled) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).be("picker", "mask")) + }, null, 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).be("picker", "trigger")), + onClick: handleTrigger + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass([vue.unref(ns).be("picker", "color"), vue.unref(ns).is("alpha", _ctx.showAlpha)]) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(ns).be("picker", "color-inner")), + style: vue.normalizeStyle({ + backgroundColor: vue.unref(displayedColor) + }) + }, [ + vue.withDirectives(vue.createVNode(vue.unref(ElIcon), { + class: vue.normalizeClass([vue.unref(ns).be("picker", "icon"), vue.unref(ns).is("icon-arrow-down")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_down_default)) + ]), + _: 1 + }, 8, ["class"]), [ + [vue.vShow, _ctx.modelValue || showPanelColor.value] + ]), + !_ctx.modelValue && !showPanelColor.value ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass([vue.unref(ns).be("picker", "empty"), vue.unref(ns).is("icon-close")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(close_default)) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ], 6) + ], 2) + ], 2) + ], 42, _hoisted_1$J) + ]), + _: 1 + }, 8, ["visible", "popper-class", "transition"]); + }; + } + }); + var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["__file", "color-picker.vue"]]); + + const ElColorPicker = withInstall(ColorPicker); + + const __default__$W = vue.defineComponent({ + name: "ElContainer" + }); + const _sfc_main$1q = /* @__PURE__ */ vue.defineComponent({ + ...__default__$W, + props: { + direction: { + type: String + } + }, + setup(__props) { + const props = __props; + const slots = vue.useSlots(); + const ns = useNamespace("container"); + const isVertical = vue.computed(() => { + if (props.direction === "vertical") { + return true; + } else if (props.direction === "horizontal") { + return false; + } + if (slots && slots.default) { + const vNodes = slots.default(); + return vNodes.some((vNode) => { + const tag = vNode.type.name; + return tag === "ElHeader" || tag === "ElFooter"; + }); + } else { + return false; + } + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("section", { + class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).is("vertical", vue.unref(isVertical))]) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2); + }; + } + }); + var Container = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["__file", "container.vue"]]); + + const __default__$V = vue.defineComponent({ + name: "ElAside" + }); + const _sfc_main$1p = /* @__PURE__ */ vue.defineComponent({ + ...__default__$V, + props: { + width: { + type: String, + default: null + } + }, + setup(__props) { + const props = __props; + const ns = useNamespace("aside"); + const style = vue.computed(() => props.width ? ns.cssVarBlock({ width: props.width }) : {}); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("aside", { + class: vue.normalizeClass(vue.unref(ns).b()), + style: vue.normalizeStyle(vue.unref(style)) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 6); + }; + } + }); + var Aside = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__file", "aside.vue"]]); + + const __default__$U = vue.defineComponent({ + name: "ElFooter" + }); + const _sfc_main$1o = /* @__PURE__ */ vue.defineComponent({ + ...__default__$U, + props: { + height: { + type: String, + default: null + } + }, + setup(__props) { + const props = __props; + const ns = useNamespace("footer"); + const style = vue.computed(() => props.height ? ns.cssVarBlock({ height: props.height }) : {}); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("footer", { + class: vue.normalizeClass(vue.unref(ns).b()), + style: vue.normalizeStyle(vue.unref(style)) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 6); + }; + } + }); + var Footer$2 = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__file", "footer.vue"]]); + + const __default__$T = vue.defineComponent({ + name: "ElHeader" + }); + const _sfc_main$1n = /* @__PURE__ */ vue.defineComponent({ + ...__default__$T, + props: { + height: { + type: String, + default: null + } + }, + setup(__props) { + const props = __props; + const ns = useNamespace("header"); + const style = vue.computed(() => { + return props.height ? ns.cssVarBlock({ + height: props.height + }) : {}; + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("header", { + class: vue.normalizeClass(vue.unref(ns).b()), + style: vue.normalizeStyle(vue.unref(style)) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 6); + }; + } + }); + var Header$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__file", "header.vue"]]); + + const __default__$S = vue.defineComponent({ + name: "ElMain" + }); + const _sfc_main$1m = /* @__PURE__ */ vue.defineComponent({ + ...__default__$S, + setup(__props) { + const ns = useNamespace("main"); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("main", { + class: vue.normalizeClass(vue.unref(ns).b()) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2); + }; + } + }); + var Main = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__file", "main.vue"]]); + + const ElContainer = withInstall(Container, { + Aside, + Footer: Footer$2, + Header: Header$1, + Main + }); + const ElAside = withNoopInstall(Aside); + const ElFooter = withNoopInstall(Footer$2); + const ElHeader = withNoopInstall(Header$1); + const ElMain = withNoopInstall(Main); + + var advancedFormat$1 = {exports: {}}; + + (function(module, exports) { + !function(e, t) { + module.exports = t() ; + }(commonjsGlobal, function() { + return function(e, t, r) { + var n = t.prototype, s = n.format; + r.en.ordinal = function(e2) { + var t2 = ["th", "st", "nd", "rd"], r2 = e2 % 100; + return "[" + e2 + (t2[(r2 - 20) % 10] || t2[r2] || t2[0]) + "]"; + }, n.format = function(e2) { + var t2 = this, r2 = this.$locale(); + if (!this.isValid()) + return s.bind(this)(e2); + var n2 = this.$utils(), a = (e2 || "YYYY-MM-DDTHH:mm:ssZ").replace(/\[([^\]]+)]|Q|wo|ww|w|WW|W|zzz|z|gggg|GGGG|Do|X|x|k{1,2}|S/g, function(e3) { + switch (e3) { + case "Q": + return Math.ceil((t2.$M + 1) / 3); + case "Do": + return r2.ordinal(t2.$D); + case "gggg": + return t2.weekYear(); + case "GGGG": + return t2.isoWeekYear(); + case "wo": + return r2.ordinal(t2.week(), "W"); + case "w": + case "ww": + return n2.s(t2.week(), e3 === "w" ? 1 : 2, "0"); + case "W": + case "WW": + return n2.s(t2.isoWeek(), e3 === "W" ? 1 : 2, "0"); + case "k": + case "kk": + return n2.s(String(t2.$H === 0 ? 24 : t2.$H), e3 === "k" ? 1 : 2, "0"); + case "X": + return Math.floor(t2.$d.getTime() / 1e3); + case "x": + return t2.$d.getTime(); + case "z": + return "[" + t2.offsetName() + "]"; + case "zzz": + return "[" + t2.offsetName("long") + "]"; + default: + return e3; + } + }); + return s.bind(this)(a); + }; + }; + }); + })(advancedFormat$1); + var advancedFormat = advancedFormat$1.exports; + + var weekOfYear$1 = {exports: {}}; + + (function(module, exports) { + !function(e, t) { + module.exports = t() ; + }(commonjsGlobal, function() { + var e = "week", t = "year"; + return function(i, n, r) { + var f = n.prototype; + f.week = function(i2) { + if (i2 === void 0 && (i2 = null), i2 !== null) + return this.add(7 * (i2 - this.week()), "day"); + var n2 = this.$locale().yearStart || 1; + if (this.month() === 11 && this.date() > 25) { + var f2 = r(this).startOf(t).add(1, t).date(n2), s = r(this).endOf(e); + if (f2.isBefore(s)) + return 1; + } + var a = r(this).startOf(t).date(n2).startOf(e).subtract(1, "millisecond"), o = this.diff(a, e, true); + return o < 0 ? r(this).startOf("week").week() : Math.ceil(o); + }, f.weeks = function(e2) { + return e2 === void 0 && (e2 = null), this.week(e2); + }; + }; + }); + })(weekOfYear$1); + var weekOfYear = weekOfYear$1.exports; + + var weekYear$1 = {exports: {}}; + + (function(module, exports) { + !function(e, t) { + module.exports = t() ; + }(commonjsGlobal, function() { + return function(e, t) { + t.prototype.weekYear = function() { + var e2 = this.month(), t2 = this.week(), n = this.year(); + return t2 === 1 && e2 === 11 ? n + 1 : e2 === 0 && t2 >= 52 ? n - 1 : n; + }; + }; + }); + })(weekYear$1); + var weekYear = weekYear$1.exports; + + var dayOfYear$1 = {exports: {}}; + + (function(module, exports) { + !function(e, t) { + module.exports = t() ; + }(commonjsGlobal, function() { + return function(e, t, n) { + t.prototype.dayOfYear = function(e2) { + var t2 = Math.round((n(this).startOf("day") - n(this).startOf("year")) / 864e5) + 1; + return e2 == null ? t2 : this.add(e2 - t2, "day"); + }; + }; + }); + })(dayOfYear$1); + var dayOfYear = dayOfYear$1.exports; + + var isSameOrAfter$1 = {exports: {}}; + + (function(module, exports) { + !function(e, t) { + module.exports = t() ; + }(commonjsGlobal, function() { + return function(e, t) { + t.prototype.isSameOrAfter = function(e2, t2) { + return this.isSame(e2, t2) || this.isAfter(e2, t2); + }; + }; + }); + })(isSameOrAfter$1); + var isSameOrAfter = isSameOrAfter$1.exports; + + var isSameOrBefore$1 = {exports: {}}; + + (function(module, exports) { + !function(e, i) { + module.exports = i() ; + }(commonjsGlobal, function() { + return function(e, i) { + i.prototype.isSameOrBefore = function(e2, i2) { + return this.isSame(e2, i2) || this.isBefore(e2, i2); + }; + }; + }); + })(isSameOrBefore$1); + var isSameOrBefore = isSameOrBefore$1.exports; + + const ROOT_PICKER_INJECTION_KEY = Symbol(); + + const datePickerProps = buildProps({ + type: { + type: definePropType(String), + default: "date" + } + }); + + const selectionModes = ["date", "dates", "year", "month", "week", "range"]; + const datePickerSharedProps = buildProps({ + disabledDate: { + type: definePropType(Function) + }, + date: { + type: definePropType(Object), + required: true + }, + minDate: { + type: definePropType(Object) + }, + maxDate: { + type: definePropType(Object) + }, + parsedValue: { + type: definePropType([Object, Array]) + }, + rangeState: { + type: definePropType(Object), + default: () => ({ + endDate: null, + selecting: false + }) + } + }); + const panelSharedProps = buildProps({ + type: { + type: definePropType(String), + required: true, + values: datePickTypes + } + }); + const panelRangeSharedProps = buildProps({ + unlinkPanels: Boolean, + parsedValue: { + type: definePropType(Array) + } + }); + const selectionModeWithDefault = (mode) => { + return { + type: String, + values: selectionModes, + default: mode + }; + }; + + const panelDatePickProps = buildProps({ + ...panelSharedProps, + parsedValue: { + type: definePropType([Object, Array]) + }, + visible: { + type: Boolean + }, + format: { + type: String, + default: "" + } + }); + + const basicDateTableProps = buildProps({ + ...datePickerSharedProps, + cellClassName: { + type: definePropType(Function) + }, + showWeekNumber: Boolean, + selectionMode: selectionModeWithDefault("date") + }); + + const isValidRange = (range) => { + if (!isArray$1(range)) + return false; + const [left, right] = range; + return dayjs.isDayjs(left) && dayjs.isDayjs(right) && left.isSameOrBefore(right); + }; + const getDefaultValue = (defaultValue, { lang, unit, unlinkPanels }) => { + let start; + if (isArray$1(defaultValue)) { + let [left, right] = defaultValue.map((d) => dayjs(d).locale(lang)); + if (!unlinkPanels) { + right = left.add(1, unit); + } + return [left, right]; + } else if (defaultValue) { + start = dayjs(defaultValue); + } else { + start = dayjs(); + } + start = start.locale(lang); + return [start, start.add(1, unit)]; + }; + const buildPickerTable = (dimension, rows, { + columnIndexOffset, + startDate, + nextEndDate, + now, + unit, + relativeDateGetter, + setCellMetadata, + setRowMetadata + }) => { + for (let rowIndex = 0; rowIndex < dimension.row; rowIndex++) { + const row = rows[rowIndex]; + for (let columnIndex = 0; columnIndex < dimension.column; columnIndex++) { + let cell = row[columnIndex + columnIndexOffset]; + if (!cell) { + cell = { + row: rowIndex, + column: columnIndex, + type: "normal", + inRange: false, + start: false, + end: false + }; + } + const index = rowIndex * dimension.column + columnIndex; + const nextStartDate = relativeDateGetter(index); + cell.dayjs = nextStartDate; + cell.date = nextStartDate.toDate(); + cell.timestamp = nextStartDate.valueOf(); + cell.type = "normal"; + cell.inRange = !!(startDate && nextStartDate.isSameOrAfter(startDate, unit) && nextEndDate && nextStartDate.isSameOrBefore(nextEndDate, unit)) || !!(startDate && nextStartDate.isSameOrBefore(startDate, unit) && nextEndDate && nextStartDate.isSameOrAfter(nextEndDate, unit)); + if (startDate == null ? void 0 : startDate.isSameOrAfter(nextEndDate)) { + cell.start = !!nextEndDate && nextStartDate.isSame(nextEndDate, unit); + cell.end = startDate && nextStartDate.isSame(startDate, unit); + } else { + cell.start = !!startDate && nextStartDate.isSame(startDate, unit); + cell.end = !!nextEndDate && nextStartDate.isSame(nextEndDate, unit); + } + const isToday = nextStartDate.isSame(now, unit); + if (isToday) { + cell.type = "today"; + } + setCellMetadata == null ? void 0 : setCellMetadata(cell, { rowIndex, columnIndex }); + row[columnIndex + columnIndexOffset] = cell; + } + setRowMetadata == null ? void 0 : setRowMetadata(row); + } + }; + + const basicCellProps = buildProps({ + cell: { + type: definePropType(Object) + } + }); + + var ElDatePickerCell = vue.defineComponent({ + name: "ElDatePickerCell", + props: basicCellProps, + setup(props) { + const ns = useNamespace("date-table-cell"); + const { + slots + } = vue.inject(ROOT_PICKER_INJECTION_KEY); + return () => { + const { + cell + } = props; + if (slots.default) { + const list = slots.default(cell).filter((item) => { + return item.patchFlag !== -2 && item.type.toString() !== "Symbol(Comment)"; + }); + if (list.length) { + return list; + } + } + return vue.createVNode("div", { + "class": ns.b() + }, [vue.createVNode("span", { + "class": ns.e("text") + }, [cell == null ? void 0 : cell.text])]); + }; + } + }); + + const _hoisted_1$I = ["aria-label", "onMousedown"]; + const _hoisted_2$t = { + key: 0, + scope: "col" + }; + const _hoisted_3$g = ["aria-label"]; + const _hoisted_4$b = ["aria-current", "aria-selected", "tabindex"]; + const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({ + __name: "basic-date-table", + props: basicDateTableProps, + emits: ["changerange", "pick", "select"], + setup(__props, { expose, emit }) { + const props = __props; + const ns = useNamespace("date-table"); + const { t, lang } = useLocale(); + const tbodyRef = vue.ref(); + const currentCellRef = vue.ref(); + const lastRow = vue.ref(); + const lastColumn = vue.ref(); + const tableRows = vue.ref([[], [], [], [], [], []]); + let focusWithClick = false; + const firstDayOfWeek = props.date.$locale().weekStart || 7; + const WEEKS_CONSTANT = props.date.locale("en").localeData().weekdaysShort().map((_) => _.toLowerCase()); + const offsetDay = vue.computed(() => { + return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek; + }); + const startDate = vue.computed(() => { + const startDayOfMonth = props.date.startOf("month"); + return startDayOfMonth.subtract(startDayOfMonth.day() || 7, "day"); + }); + const WEEKS = vue.computed(() => { + return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7); + }); + const hasCurrent = vue.computed(() => { + return flatten(rows.value).some((row) => { + return row.isCurrent; + }); + }); + const days = vue.computed(() => { + const startOfMonth = props.date.startOf("month"); + const startOfMonthDay = startOfMonth.day() || 7; + const dateCountOfMonth = startOfMonth.daysInMonth(); + const dateCountOfLastMonth = startOfMonth.subtract(1, "month").daysInMonth(); + return { + startOfMonthDay, + dateCountOfMonth, + dateCountOfLastMonth + }; + }); + const selectedDate = vue.computed(() => { + return props.selectionMode === "dates" ? castArray(props.parsedValue) : []; + }); + const setDateText = (cell, { + count, + rowIndex, + columnIndex + }) => { + const { startOfMonthDay, dateCountOfMonth, dateCountOfLastMonth } = vue.unref(days); + const offset = vue.unref(offsetDay); + if (rowIndex >= 0 && rowIndex <= 1) { + const numberOfDaysFromPreviousMonth = startOfMonthDay + offset < 0 ? 7 + startOfMonthDay + offset : startOfMonthDay + offset; + if (columnIndex + rowIndex * 7 >= numberOfDaysFromPreviousMonth) { + cell.text = count; + return true; + } else { + cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - columnIndex % 7) + 1 + rowIndex * 7; + cell.type = "prev-month"; + } + } else { + if (count <= dateCountOfMonth) { + cell.text = count; + } else { + cell.text = count - dateCountOfMonth; + cell.type = "next-month"; + } + return true; + } + return false; + }; + const setCellMetadata = (cell, { + columnIndex, + rowIndex + }, count) => { + const { disabledDate, cellClassName } = props; + const _selectedDate = vue.unref(selectedDate); + const shouldIncrement = setDateText(cell, { count, rowIndex, columnIndex }); + const cellDate = cell.dayjs.toDate(); + cell.selected = _selectedDate.find((d) => d.valueOf() === cell.dayjs.valueOf()); + cell.isSelected = !!cell.selected; + cell.isCurrent = isCurrent(cell); + cell.disabled = disabledDate == null ? void 0 : disabledDate(cellDate); + cell.customClass = cellClassName == null ? void 0 : cellClassName(cellDate); + return shouldIncrement; + }; + const setRowMetadata = (row) => { + if (props.selectionMode === "week") { + const [start, end] = props.showWeekNumber ? [1, 7] : [0, 6]; + const isActive = isWeekActive(row[start + 1]); + row[start].inRange = isActive; + row[start].start = isActive; + row[end].inRange = isActive; + row[end].end = isActive; + } + }; + const rows = vue.computed(() => { + const { minDate, maxDate, rangeState, showWeekNumber } = props; + const offset = offsetDay.value; + const rows_ = tableRows.value; + const dateUnit = "day"; + let count = 1; + if (showWeekNumber) { + for (let rowIndex = 0; rowIndex < 6; rowIndex++) { + if (!rows_[rowIndex][0]) { + rows_[rowIndex][0] = { + type: "week", + text: startDate.value.add(rowIndex * 7 + 1, dateUnit).week() + }; + } + } + } + buildPickerTable({ row: 6, column: 7 }, rows_, { + startDate: minDate, + columnIndexOffset: showWeekNumber ? 1 : 0, + nextEndDate: rangeState.endDate || maxDate || rangeState.selecting && minDate || null, + now: dayjs().locale(vue.unref(lang)).startOf(dateUnit), + unit: dateUnit, + relativeDateGetter: (idx) => startDate.value.add(idx - offset, dateUnit), + setCellMetadata: (...args) => { + if (setCellMetadata(...args, count)) { + count += 1; + } + }, + setRowMetadata + }); + return rows_; + }); + vue.watch(() => props.date, async () => { + var _a, _b; + if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) { + await vue.nextTick(); + (_b = currentCellRef.value) == null ? void 0 : _b.focus(); + } + }); + const focus = async () => { + var _a; + (_a = currentCellRef.value) == null ? void 0 : _a.focus(); + }; + const isNormalDay = (type = "") => { + return ["normal", "today"].includes(type); + }; + const isCurrent = (cell) => { + return props.selectionMode === "date" && isNormalDay(cell.type) && cellMatchesDate(cell, props.parsedValue); + }; + const cellMatchesDate = (cell, date) => { + if (!date) + return false; + return dayjs(date).locale(lang.value).isSame(props.date.date(Number(cell.text)), "day"); + }; + const getCellClasses = (cell) => { + const classes = []; + if (isNormalDay(cell.type) && !cell.disabled) { + classes.push("available"); + if (cell.type === "today") { + classes.push("today"); + } + } else { + classes.push(cell.type); + } + if (isCurrent(cell)) { + classes.push("current"); + } + if (cell.inRange && (isNormalDay(cell.type) || props.selectionMode === "week")) { + classes.push("in-range"); + if (cell.start) { + classes.push("start-date"); + } + if (cell.end) { + classes.push("end-date"); + } + } + if (cell.disabled) { + classes.push("disabled"); + } + if (cell.selected) { + classes.push("selected"); + } + if (cell.customClass) { + classes.push(cell.customClass); + } + return classes.join(" "); + }; + const getDateOfCell = (row, column) => { + const offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value; + return startDate.value.add(offsetFromStart, "day"); + }; + const handleMouseMove = (event) => { + var _a; + if (!props.rangeState.selecting) + return; + let target = event.target; + if (target.tagName === "SPAN") { + target = (_a = target.parentNode) == null ? void 0 : _a.parentNode; + } + if (target.tagName === "DIV") { + target = target.parentNode; + } + if (target.tagName !== "TD") + return; + const row = target.parentNode.rowIndex - 1; + const column = target.cellIndex; + if (rows.value[row][column].disabled) + return; + if (row !== lastRow.value || column !== lastColumn.value) { + lastRow.value = row; + lastColumn.value = column; + emit("changerange", { + selecting: true, + endDate: getDateOfCell(row, column) + }); + } + }; + const isSelectedCell = (cell) => { + return !hasCurrent.value && (cell == null ? void 0 : cell.text) === 1 && cell.type === "normal" || cell.isCurrent; + }; + const handleFocus = (event) => { + if (focusWithClick || hasCurrent.value || props.selectionMode !== "date") + return; + handlePickDate(event, true); + }; + const handleMouseDown = (event) => { + const target = event.target.closest("td"); + if (!target) + return; + focusWithClick = true; + }; + const handleMouseUp = (event) => { + const target = event.target.closest("td"); + if (!target) + return; + focusWithClick = false; + }; + const handlePickDate = (event, isKeyboardMovement = false) => { + const target = event.target.closest("td"); + if (!target) + return; + const row = target.parentNode.rowIndex - 1; + const column = target.cellIndex; + const cell = rows.value[row][column]; + if (cell.disabled || cell.type === "week") + return; + const newDate = getDateOfCell(row, column); + if (props.selectionMode === "range") { + if (!props.rangeState.selecting || !props.minDate) { + emit("pick", { minDate: newDate, maxDate: null }); + emit("select", true); + } else { + if (newDate >= props.minDate) { + emit("pick", { minDate: props.minDate, maxDate: newDate }); + } else { + emit("pick", { minDate: newDate, maxDate: props.minDate }); + } + emit("select", false); + } + } else if (props.selectionMode === "date") { + emit("pick", newDate, isKeyboardMovement); + } else if (props.selectionMode === "week") { + const weekNumber = newDate.week(); + const value = `${newDate.year()}w${weekNumber}`; + emit("pick", { + year: newDate.year(), + week: weekNumber, + value, + date: newDate.startOf("week") + }); + } else if (props.selectionMode === "dates") { + const newValue = cell.selected ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.valueOf()) !== newDate.valueOf()) : castArray(props.parsedValue).concat([newDate]); + emit("pick", newValue); + } + }; + const isWeekActive = (cell) => { + if (props.selectionMode !== "week") + return false; + let newDate = props.date.startOf("day"); + if (cell.type === "prev-month") { + newDate = newDate.subtract(1, "month"); + } + if (cell.type === "next-month") { + newDate = newDate.add(1, "month"); + } + newDate = newDate.date(Number.parseInt(cell.text, 10)); + if (props.parsedValue && !Array.isArray(props.parsedValue)) { + const dayOffset = (props.parsedValue.day() - firstDayOfWeek + 7) % 7 - 1; + const weekDate = props.parsedValue.subtract(dayOffset, "day"); + return weekDate.isSame(newDate, "day"); + } + return false; + }; + expose({ + focus + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("table", { + role: "grid", + "aria-label": vue.unref(t)("el.datepicker.dateTablePrompt"), + cellspacing: "0", + cellpadding: "0", + class: vue.normalizeClass([vue.unref(ns).b(), { "is-week-mode": _ctx.selectionMode === "week" }]), + onClick: handlePickDate, + onMousemove: handleMouseMove, + onMousedown: vue.withModifiers(handleMouseDown, ["prevent"]), + onMouseup: handleMouseUp + }, [ + vue.createElementVNode("tbody", { + ref_key: "tbodyRef", + ref: tbodyRef + }, [ + vue.createElementVNode("tr", null, [ + _ctx.showWeekNumber ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_2$t, vue.toDisplayString(vue.unref(t)("el.datepicker.week")), 1)) : vue.createCommentVNode("v-if", true), + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(WEEKS), (week, key) => { + return vue.openBlock(), vue.createElementBlock("th", { + key, + scope: "col", + "aria-label": vue.unref(t)("el.datepicker.weeksFull." + week) + }, vue.toDisplayString(vue.unref(t)("el.datepicker.weeks." + week)), 9, _hoisted_3$g); + }), 128)) + ]), + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rows), (row, rowKey) => { + return vue.openBlock(), vue.createElementBlock("tr", { + key: rowKey, + class: vue.normalizeClass([vue.unref(ns).e("row"), { current: isWeekActive(row[1]) }]) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, columnKey) => { + return vue.openBlock(), vue.createElementBlock("td", { + key: `${rowKey}.${columnKey}`, + ref_for: true, + ref: (el) => isSelectedCell(cell) && (currentCellRef.value = el), + class: vue.normalizeClass(getCellClasses(cell)), + "aria-current": cell.isCurrent ? "date" : void 0, + "aria-selected": cell.isCurrent, + tabindex: isSelectedCell(cell) ? 0 : -1, + onFocus: handleFocus + }, [ + vue.createVNode(vue.unref(ElDatePickerCell), { cell }, null, 8, ["cell"]) + ], 42, _hoisted_4$b); + }), 128)) + ], 2); + }), 128)) + ], 512) + ], 42, _hoisted_1$I); + }; + } + }); + var DateTable = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__file", "basic-date-table.vue"]]); + + const basicMonthTableProps = buildProps({ + ...datePickerSharedProps, + selectionMode: selectionModeWithDefault("month") + }); + + const _hoisted_1$H = ["aria-label"]; + const _hoisted_2$s = ["aria-selected", "aria-label", "tabindex", "onKeydown"]; + const _hoisted_3$f = { class: "cell" }; + const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({ + __name: "basic-month-table", + props: basicMonthTableProps, + emits: ["changerange", "pick", "select"], + setup(__props, { expose, emit }) { + const props = __props; + const datesInMonth = (year, month, lang2) => { + const firstDay = dayjs().locale(lang2).startOf("month").month(month).year(year); + const numOfDays = firstDay.daysInMonth(); + return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate()); + }; + const ns = useNamespace("month-table"); + const { t, lang } = useLocale(); + const tbodyRef = vue.ref(); + const currentCellRef = vue.ref(); + const months = vue.ref(props.date.locale("en").localeData().monthsShort().map((_) => _.toLowerCase())); + const tableRows = vue.ref([ + [], + [], + [] + ]); + const lastRow = vue.ref(); + const lastColumn = vue.ref(); + const rows = vue.computed(() => { + var _a, _b; + const rows2 = tableRows.value; + const now = dayjs().locale(lang.value).startOf("month"); + for (let i = 0; i < 3; i++) { + const row = rows2[i]; + for (let j = 0; j < 4; j++) { + const cell = row[j] || (row[j] = { + row: i, + column: j, + type: "normal", + inRange: false, + start: false, + end: false, + text: -1, + disabled: false + }); + cell.type = "normal"; + const index = i * 4 + j; + const calTime = props.date.startOf("year").month(index); + const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate || null; + cell.inRange = !!(props.minDate && calTime.isSameOrAfter(props.minDate, "month") && calEndDate && calTime.isSameOrBefore(calEndDate, "month")) || !!(props.minDate && calTime.isSameOrBefore(props.minDate, "month") && calEndDate && calTime.isSameOrAfter(calEndDate, "month")); + if ((_a = props.minDate) == null ? void 0 : _a.isSameOrAfter(calEndDate)) { + cell.start = !!(calEndDate && calTime.isSame(calEndDate, "month")); + cell.end = props.minDate && calTime.isSame(props.minDate, "month"); + } else { + cell.start = !!(props.minDate && calTime.isSame(props.minDate, "month")); + cell.end = !!(calEndDate && calTime.isSame(calEndDate, "month")); + } + const isToday = now.isSame(calTime); + if (isToday) { + cell.type = "today"; + } + cell.text = index; + cell.disabled = ((_b = props.disabledDate) == null ? void 0 : _b.call(props, calTime.toDate())) || false; + } + } + return rows2; + }); + const focus = () => { + var _a; + (_a = currentCellRef.value) == null ? void 0 : _a.focus(); + }; + const getCellStyle = (cell) => { + const style = {}; + const year = props.date.year(); + const today = new Date(); + const month = cell.text; + style.disabled = props.disabledDate ? datesInMonth(year, month, lang.value).every(props.disabledDate) : false; + style.current = castArray(props.parsedValue).findIndex((date) => dayjs.isDayjs(date) && date.year() === year && date.month() === month) >= 0; + style.today = today.getFullYear() === year && today.getMonth() === month; + if (cell.inRange) { + style["in-range"] = true; + if (cell.start) { + style["start-date"] = true; + } + if (cell.end) { + style["end-date"] = true; + } + } + return style; + }; + const isSelectedCell = (cell) => { + const year = props.date.year(); + const month = cell.text; + return castArray(props.date).findIndex((date) => date.year() === year && date.month() === month) >= 0; + }; + const handleMouseMove = (event) => { + var _a; + if (!props.rangeState.selecting) + return; + let target = event.target; + if (target.tagName === "A") { + target = (_a = target.parentNode) == null ? void 0 : _a.parentNode; + } + if (target.tagName === "DIV") { + target = target.parentNode; + } + if (target.tagName !== "TD") + return; + const row = target.parentNode.rowIndex; + const column = target.cellIndex; + if (rows.value[row][column].disabled) + return; + if (row !== lastRow.value || column !== lastColumn.value) { + lastRow.value = row; + lastColumn.value = column; + emit("changerange", { + selecting: true, + endDate: props.date.startOf("year").month(row * 4 + column) + }); + } + }; + const handleMonthTableClick = (event) => { + var _a; + const target = (_a = event.target) == null ? void 0 : _a.closest("td"); + if ((target == null ? void 0 : target.tagName) !== "TD") + return; + if (hasClass(target, "disabled")) + return; + const column = target.cellIndex; + const row = target.parentNode.rowIndex; + const month = row * 4 + column; + const newDate = props.date.startOf("year").month(month); + if (props.selectionMode === "range") { + if (!props.rangeState.selecting) { + emit("pick", { minDate: newDate, maxDate: null }); + emit("select", true); + } else { + if (props.minDate && newDate >= props.minDate) { + emit("pick", { minDate: props.minDate, maxDate: newDate }); + } else { + emit("pick", { minDate: newDate, maxDate: props.minDate }); + } + emit("select", false); + } + } else { + emit("pick", month); + } + }; + vue.watch(() => props.date, async () => { + var _a, _b; + if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) { + await vue.nextTick(); + (_b = currentCellRef.value) == null ? void 0 : _b.focus(); + } + }); + expose({ + focus + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("table", { + role: "grid", + "aria-label": vue.unref(t)("el.datepicker.monthTablePrompt"), + class: vue.normalizeClass(vue.unref(ns).b()), + onClick: handleMonthTableClick, + onMousemove: handleMouseMove + }, [ + vue.createElementVNode("tbody", { + ref_key: "tbodyRef", + ref: tbodyRef + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rows), (row, key) => { + return vue.openBlock(), vue.createElementBlock("tr", { key }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => { + return vue.openBlock(), vue.createElementBlock("td", { + key: key_, + ref_for: true, + ref: (el) => isSelectedCell(cell) && (currentCellRef.value = el), + class: vue.normalizeClass(getCellStyle(cell)), + "aria-selected": `${isSelectedCell(cell)}`, + "aria-label": vue.unref(t)(`el.datepicker.month${+cell.text + 1}`), + tabindex: isSelectedCell(cell) ? 0 : -1, + onKeydown: [ + vue.withKeys(vue.withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["space"]), + vue.withKeys(vue.withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["enter"]) + ] + }, [ + vue.createElementVNode("div", null, [ + vue.createElementVNode("span", _hoisted_3$f, vue.toDisplayString(vue.unref(t)("el.datepicker.months." + months.value[cell.text])), 1) + ]) + ], 42, _hoisted_2$s); + }), 128)) + ]); + }), 128)) + ], 512) + ], 42, _hoisted_1$H); + }; + } + }); + var MonthTable = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__file", "basic-month-table.vue"]]); + + const { date, disabledDate, parsedValue } = datePickerSharedProps; + const basicYearTableProps = buildProps({ + date, + disabledDate, + parsedValue + }); + + const _hoisted_1$G = ["aria-label"]; + const _hoisted_2$r = ["aria-selected", "tabindex", "onKeydown"]; + const _hoisted_3$e = { class: "cell" }; + const _hoisted_4$a = { key: 1 }; + const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({ + __name: "basic-year-table", + props: basicYearTableProps, + emits: ["pick"], + setup(__props, { expose, emit }) { + const props = __props; + const datesInYear = (year, lang2) => { + const firstDay = dayjs(String(year)).locale(lang2).startOf("year"); + const lastDay = firstDay.endOf("year"); + const numOfDays = lastDay.dayOfYear(); + return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate()); + }; + const ns = useNamespace("year-table"); + const { t, lang } = useLocale(); + const tbodyRef = vue.ref(); + const currentCellRef = vue.ref(); + const startYear = vue.computed(() => { + return Math.floor(props.date.year() / 10) * 10; + }); + const focus = () => { + var _a; + (_a = currentCellRef.value) == null ? void 0 : _a.focus(); + }; + const getCellKls = (year) => { + const kls = {}; + const today = dayjs().locale(lang.value); + kls.disabled = props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false; + kls.current = castArray(props.parsedValue).findIndex((d) => d.year() === year) >= 0; + kls.today = today.year() === year; + return kls; + }; + const isSelectedCell = (year) => { + return year === startYear.value && props.date.year() < startYear.value && props.date.year() > startYear.value + 9 || castArray(props.date).findIndex((date) => date.year() === year) >= 0; + }; + const handleYearTableClick = (event) => { + const clickTarget = event.target; + const target = clickTarget.closest("td"); + if (target && target.textContent) { + if (hasClass(target, "disabled")) + return; + const year = target.textContent || target.innerText; + emit("pick", Number(year)); + } + }; + vue.watch(() => props.date, async () => { + var _a, _b; + if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) { + await vue.nextTick(); + (_b = currentCellRef.value) == null ? void 0 : _b.focus(); + } + }); + expose({ + focus + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("table", { + role: "grid", + "aria-label": vue.unref(t)("el.datepicker.yearTablePrompt"), + class: vue.normalizeClass(vue.unref(ns).b()), + onClick: handleYearTableClick + }, [ + vue.createElementVNode("tbody", { + ref_key: "tbodyRef", + ref: tbodyRef + }, [ + (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(3, (_, i) => { + return vue.createElementVNode("tr", { key: i }, [ + (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(4, (__, j) => { + return vue.openBlock(), vue.createElementBlock(vue.Fragment, { + key: i + "_" + j + }, [ + i * 4 + j < 10 ? (vue.openBlock(), vue.createElementBlock("td", { + key: 0, + ref_for: true, + ref: (el) => isSelectedCell(vue.unref(startYear) + i * 4 + j) && (currentCellRef.value = el), + class: vue.normalizeClass(["available", getCellKls(vue.unref(startYear) + i * 4 + j)]), + "aria-selected": `${isSelectedCell(vue.unref(startYear) + i * 4 + j)}`, + tabindex: isSelectedCell(vue.unref(startYear) + i * 4 + j) ? 0 : -1, + onKeydown: [ + vue.withKeys(vue.withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]), + vue.withKeys(vue.withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"]) + ] + }, [ + vue.createElementVNode("span", _hoisted_3$e, vue.toDisplayString(vue.unref(startYear) + i * 4 + j), 1) + ], 42, _hoisted_2$r)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_4$a)) + ], 64); + }), 64)) + ]); + }), 64)) + ], 512) + ], 10, _hoisted_1$G); + }; + } + }); + var YearTable = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__file", "basic-year-table.vue"]]); + + const _hoisted_1$F = ["onClick"]; + const _hoisted_2$q = ["aria-label"]; + const _hoisted_3$d = ["aria-label"]; + const _hoisted_4$9 = ["aria-label"]; + const _hoisted_5$7 = ["aria-label"]; + const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({ + __name: "panel-date-pick", + props: panelDatePickProps, + emits: ["pick", "set-picker-option", "panel-change"], + setup(__props, { emit: contextEmit }) { + const props = __props; + const timeWithinRange = (_, __, ___) => true; + const ppNs = useNamespace("picker-panel"); + const dpNs = useNamespace("date-picker"); + const attrs = vue.useAttrs(); + const slots = vue.useSlots(); + const { t, lang } = useLocale(); + const pickerBase = vue.inject("EP_PICKER_BASE"); + const popper = vue.inject(TOOLTIP_INJECTION_KEY); + const { shortcuts, disabledDate, cellClassName, defaultTime, arrowControl } = pickerBase.props; + const defaultValue = vue.toRef(pickerBase.props, "defaultValue"); + const currentViewRef = vue.ref(); + const innerDate = vue.ref(dayjs().locale(lang.value)); + const isChangeToNow = vue.ref(false); + const defaultTimeD = vue.computed(() => { + return dayjs(defaultTime).locale(lang.value); + }); + const month = vue.computed(() => { + return innerDate.value.month(); + }); + const year = vue.computed(() => { + return innerDate.value.year(); + }); + const selectableRange = vue.ref([]); + const userInputDate = vue.ref(null); + const userInputTime = vue.ref(null); + const checkDateWithinRange = (date) => { + return selectableRange.value.length > 0 ? timeWithinRange(date, selectableRange.value, props.format || "HH:mm:ss") : true; + }; + const formatEmit = (emitDayjs) => { + if (defaultTime && !visibleTime.value && !isChangeToNow.value) { + return defaultTimeD.value.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date()); + } + if (showTime.value) + return emitDayjs.millisecond(0); + return emitDayjs.startOf("day"); + }; + const emit = (value, ...args) => { + if (!value) { + contextEmit("pick", value, ...args); + } else if (isArray$1(value)) { + const dates = value.map(formatEmit); + contextEmit("pick", dates, ...args); + } else { + contextEmit("pick", formatEmit(value), ...args); + } + userInputDate.value = null; + userInputTime.value = null; + isChangeToNow.value = false; + }; + const handleDatePick = (value, keepOpen) => { + if (selectionMode.value === "date") { + value = value; + let newDate = props.parsedValue ? props.parsedValue.year(value.year()).month(value.month()).date(value.date()) : value; + if (!checkDateWithinRange(newDate)) { + newDate = selectableRange.value[0][0].year(value.year()).month(value.month()).date(value.date()); + } + innerDate.value = newDate; + emit(newDate, showTime.value || keepOpen); + } else if (selectionMode.value === "week") { + emit(value.date); + } else if (selectionMode.value === "dates") { + emit(value, true); + } + }; + const moveByMonth = (forward) => { + const action = forward ? "add" : "subtract"; + innerDate.value = innerDate.value[action](1, "month"); + handlePanelChange("month"); + }; + const moveByYear = (forward) => { + const currentDate = innerDate.value; + const action = forward ? "add" : "subtract"; + innerDate.value = currentView.value === "year" ? currentDate[action](10, "year") : currentDate[action](1, "year"); + handlePanelChange("year"); + }; + const currentView = vue.ref("date"); + const yearLabel = vue.computed(() => { + const yearTranslation = t("el.datepicker.year"); + if (currentView.value === "year") { + const startYear = Math.floor(year.value / 10) * 10; + if (yearTranslation) { + return `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}`; + } + return `${startYear} - ${startYear + 9}`; + } + return `${year.value} ${yearTranslation}`; + }); + const handleShortcutClick = (shortcut) => { + const shortcutValue = isFunction$1(shortcut.value) ? shortcut.value() : shortcut.value; + if (shortcutValue) { + emit(dayjs(shortcutValue).locale(lang.value)); + return; + } + if (shortcut.onClick) { + shortcut.onClick({ + attrs, + slots, + emit: contextEmit + }); + } + }; + const selectionMode = vue.computed(() => { + const { type } = props; + if (["week", "month", "year", "dates"].includes(type)) + return type; + return "date"; + }); + const keyboardMode = vue.computed(() => { + return selectionMode.value === "date" ? currentView.value : selectionMode.value; + }); + const hasShortcuts = vue.computed(() => !!shortcuts.length); + const handleMonthPick = async (month2) => { + innerDate.value = innerDate.value.startOf("month").month(month2); + if (selectionMode.value === "month") { + emit(innerDate.value, false); + } else { + currentView.value = "date"; + if (["month", "year", "date", "week"].includes(selectionMode.value)) { + emit(innerDate.value, true); + await vue.nextTick(); + handleFocusPicker(); + } + } + handlePanelChange("month"); + }; + const handleYearPick = async (year2) => { + if (selectionMode.value === "year") { + innerDate.value = innerDate.value.startOf("year").year(year2); + emit(innerDate.value, false); + } else { + innerDate.value = innerDate.value.year(year2); + currentView.value = "month"; + if (["month", "year", "date", "week"].includes(selectionMode.value)) { + emit(innerDate.value, true); + await vue.nextTick(); + handleFocusPicker(); + } + } + handlePanelChange("year"); + }; + const showPicker = async (view) => { + currentView.value = view; + await vue.nextTick(); + handleFocusPicker(); + }; + const showTime = vue.computed(() => props.type === "datetime" || props.type === "datetimerange"); + const footerVisible = vue.computed(() => { + return showTime.value || selectionMode.value === "dates"; + }); + const onConfirm = () => { + if (selectionMode.value === "dates") { + emit(props.parsedValue); + } else { + let result = props.parsedValue; + if (!result) { + const defaultTimeD2 = dayjs(defaultTime).locale(lang.value); + const defaultValueD = getDefaultValue(); + result = defaultTimeD2.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date()); + } + innerDate.value = result; + emit(result); + } + }; + const changeToNow = () => { + const now = dayjs().locale(lang.value); + const nowDate = now.toDate(); + isChangeToNow.value = true; + if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) { + innerDate.value = dayjs().locale(lang.value); + emit(innerDate.value); + } + }; + const timeFormat = vue.computed(() => { + return extractTimeFormat(props.format); + }); + const dateFormat = vue.computed(() => { + return extractDateFormat(props.format); + }); + const visibleTime = vue.computed(() => { + if (userInputTime.value) + return userInputTime.value; + if (!props.parsedValue && !defaultValue.value) + return; + return (props.parsedValue || innerDate.value).format(timeFormat.value); + }); + const visibleDate = vue.computed(() => { + if (userInputDate.value) + return userInputDate.value; + if (!props.parsedValue && !defaultValue.value) + return; + return (props.parsedValue || innerDate.value).format(dateFormat.value); + }); + const timePickerVisible = vue.ref(false); + const onTimePickerInputFocus = () => { + timePickerVisible.value = true; + }; + const handleTimePickClose = () => { + timePickerVisible.value = false; + }; + const getUnits = (date) => { + return { + hour: date.hour(), + minute: date.minute(), + second: date.second(), + year: date.year(), + month: date.month(), + date: date.date() + }; + }; + const handleTimePick = (value, visible, first) => { + const { hour, minute, second } = getUnits(value); + const newDate = props.parsedValue ? props.parsedValue.hour(hour).minute(minute).second(second) : value; + innerDate.value = newDate; + emit(innerDate.value, true); + if (!first) { + timePickerVisible.value = visible; + } + }; + const handleVisibleTimeChange = (value) => { + const newDate = dayjs(value, timeFormat.value).locale(lang.value); + if (newDate.isValid() && checkDateWithinRange(newDate)) { + const { year: year2, month: month2, date } = getUnits(innerDate.value); + innerDate.value = newDate.year(year2).month(month2).date(date); + userInputTime.value = null; + timePickerVisible.value = false; + emit(innerDate.value, true); + } + }; + const handleVisibleDateChange = (value) => { + const newDate = dayjs(value, dateFormat.value).locale(lang.value); + if (newDate.isValid()) { + if (disabledDate && disabledDate(newDate.toDate())) { + return; + } + const { hour, minute, second } = getUnits(innerDate.value); + innerDate.value = newDate.hour(hour).minute(minute).second(second); + userInputDate.value = null; + emit(innerDate.value, true); + } + }; + const isValidValue = (date) => { + return dayjs.isDayjs(date) && date.isValid() && (disabledDate ? !disabledDate(date.toDate()) : true); + }; + const formatToString = (value) => { + if (selectionMode.value === "dates") { + return value.map((_) => _.format(props.format)); + } + return value.format(props.format); + }; + const parseUserInput = (value) => { + return dayjs(value, props.format).locale(lang.value); + }; + const getDefaultValue = () => { + const parseDate = dayjs(defaultValue.value).locale(lang.value); + if (!defaultValue.value) { + const defaultTimeDValue = defaultTimeD.value; + return dayjs().hour(defaultTimeDValue.hour()).minute(defaultTimeDValue.minute()).second(defaultTimeDValue.second()).locale(lang.value); + } + return parseDate; + }; + const handleFocusPicker = async () => { + var _a; + if (["week", "month", "year", "date"].includes(selectionMode.value)) { + (_a = currentViewRef.value) == null ? void 0 : _a.focus(); + if (selectionMode.value === "week") { + handleKeyControl(EVENT_CODE.down); + } + } + }; + const handleKeydownTable = (event) => { + const { code } = event; + const validCode = [ + EVENT_CODE.up, + EVENT_CODE.down, + EVENT_CODE.left, + EVENT_CODE.right, + EVENT_CODE.home, + EVENT_CODE.end, + EVENT_CODE.pageUp, + EVENT_CODE.pageDown + ]; + if (validCode.includes(code)) { + handleKeyControl(code); + event.stopPropagation(); + event.preventDefault(); + } + if ([EVENT_CODE.enter, EVENT_CODE.space].includes(code) && userInputDate.value === null && userInputTime.value === null) { + event.preventDefault(); + emit(innerDate.value, false); + } + }; + const handleKeyControl = (code) => { + var _a; + const { up, down, left, right, home, end, pageUp, pageDown } = EVENT_CODE; + const mapping = { + year: { + [up]: -4, + [down]: 4, + [left]: -1, + [right]: 1, + offset: (date, step) => date.setFullYear(date.getFullYear() + step) + }, + month: { + [up]: -4, + [down]: 4, + [left]: -1, + [right]: 1, + offset: (date, step) => date.setMonth(date.getMonth() + step) + }, + week: { + [up]: -1, + [down]: 1, + [left]: -1, + [right]: 1, + offset: (date, step) => date.setDate(date.getDate() + step * 7) + }, + date: { + [up]: -7, + [down]: 7, + [left]: -1, + [right]: 1, + [home]: (date) => -date.getDay(), + [end]: (date) => -date.getDay() + 6, + [pageUp]: (date) => -new Date(date.getFullYear(), date.getMonth(), 0).getDate(), + [pageDown]: (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(), + offset: (date, step) => date.setDate(date.getDate() + step) + } + }; + const newDate = innerDate.value.toDate(); + while (Math.abs(innerDate.value.diff(newDate, "year", true)) < 1) { + const map = mapping[keyboardMode.value]; + if (!map) + return; + map.offset(newDate, isFunction$1(map[code]) ? map[code](newDate) : (_a = map[code]) != null ? _a : 0); + if (disabledDate && disabledDate(newDate)) { + break; + } + const result = dayjs(newDate).locale(lang.value); + innerDate.value = result; + contextEmit("pick", result, true); + break; + } + }; + const handlePanelChange = (mode) => { + contextEmit("panel-change", innerDate.value.toDate(), mode, currentView.value); + }; + vue.watch(() => selectionMode.value, (val) => { + if (["month", "year"].includes(val)) { + currentView.value = val; + return; + } + currentView.value = "date"; + }, { immediate: true }); + vue.watch(() => currentView.value, () => { + popper == null ? void 0 : popper.updatePopper(); + }); + vue.watch(() => defaultValue.value, (val) => { + if (val) { + innerDate.value = getDefaultValue(); + } + }, { immediate: true }); + vue.watch(() => props.parsedValue, (val) => { + if (val) { + if (selectionMode.value === "dates") + return; + if (Array.isArray(val)) + return; + innerDate.value = val; + } else { + innerDate.value = getDefaultValue(); + } + }, { immediate: true }); + contextEmit("set-picker-option", ["isValidValue", isValidValue]); + contextEmit("set-picker-option", ["formatToString", formatToString]); + contextEmit("set-picker-option", ["parseUserInput", parseUserInput]); + contextEmit("set-picker-option", ["handleFocusPicker", handleFocusPicker]); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([ + vue.unref(ppNs).b(), + vue.unref(dpNs).b(), + { + "has-sidebar": _ctx.$slots.sidebar || vue.unref(hasShortcuts), + "has-time": vue.unref(showTime) + } + ]) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ppNs).e("body-wrapper")) + }, [ + vue.renderSlot(_ctx.$slots, "sidebar", { + class: vue.normalizeClass(vue.unref(ppNs).e("sidebar")) + }), + vue.unref(hasShortcuts) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ppNs).e("sidebar")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(shortcuts), (shortcut, key) => { + return vue.openBlock(), vue.createElementBlock("button", { + key, + type: "button", + class: vue.normalizeClass(vue.unref(ppNs).e("shortcut")), + onClick: ($event) => handleShortcutClick(shortcut) + }, vue.toDisplayString(shortcut.text), 11, _hoisted_1$F); + }), 128)) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ppNs).e("body")) + }, [ + vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(dpNs).e("time-header")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(dpNs).e("editor-wrap")) + }, [ + vue.createVNode(vue.unref(ElInput), { + placeholder: vue.unref(t)("el.datepicker.selectDate"), + "model-value": vue.unref(visibleDate), + size: "small", + "validate-event": false, + onInput: _cache[0] || (_cache[0] = (val) => userInputDate.value = val), + onChange: handleVisibleDateChange + }, null, 8, ["placeholder", "model-value"]) + ], 2), + vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", { + class: vue.normalizeClass(vue.unref(dpNs).e("editor-wrap")) + }, [ + vue.createVNode(vue.unref(ElInput), { + placeholder: vue.unref(t)("el.datepicker.selectTime"), + "model-value": vue.unref(visibleTime), + size: "small", + "validate-event": false, + onFocus: onTimePickerInputFocus, + onInput: _cache[1] || (_cache[1] = (val) => userInputTime.value = val), + onChange: handleVisibleTimeChange + }, null, 8, ["placeholder", "model-value"]), + vue.createVNode(vue.unref(TimePickPanel), { + visible: timePickerVisible.value, + format: vue.unref(timeFormat), + "time-arrow-control": vue.unref(arrowControl), + "parsed-value": innerDate.value, + onPick: handleTimePick + }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"]) + ], 2)), [ + [vue.unref(ClickOutside), handleTimePickClose] + ]) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.withDirectives(vue.createElementVNode("div", { + class: vue.normalizeClass([ + vue.unref(dpNs).e("header"), + (currentView.value === "year" || currentView.value === "month") && vue.unref(dpNs).e("header--bordered") + ]) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(dpNs).e("prev-btn")) + }, [ + vue.createElementVNode("button", { + type: "button", + "aria-label": vue.unref(t)(`el.datepicker.prevYear`), + class: vue.normalizeClass(["d-arrow-left", vue.unref(ppNs).e("icon-btn")]), + onClick: _cache[2] || (_cache[2] = ($event) => moveByYear(false)) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(d_arrow_left_default)) + ]), + _: 1 + }) + ], 10, _hoisted_2$q), + vue.withDirectives(vue.createElementVNode("button", { + type: "button", + "aria-label": vue.unref(t)(`el.datepicker.prevMonth`), + class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]), + onClick: _cache[3] || (_cache[3] = ($event) => moveByMonth(false)) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_left_default)) + ]), + _: 1 + }) + ], 10, _hoisted_3$d), [ + [vue.vShow, currentView.value === "date"] + ]) + ], 2), + vue.createElementVNode("span", { + role: "button", + class: vue.normalizeClass(vue.unref(dpNs).e("header-label")), + "aria-live": "polite", + tabindex: "0", + onKeydown: _cache[4] || (_cache[4] = vue.withKeys(($event) => showPicker("year"), ["enter"])), + onClick: _cache[5] || (_cache[5] = ($event) => showPicker("year")) + }, vue.toDisplayString(vue.unref(yearLabel)), 35), + vue.withDirectives(vue.createElementVNode("span", { + role: "button", + "aria-live": "polite", + tabindex: "0", + class: vue.normalizeClass([ + vue.unref(dpNs).e("header-label"), + { active: currentView.value === "month" } + ]), + onKeydown: _cache[6] || (_cache[6] = vue.withKeys(($event) => showPicker("month"), ["enter"])), + onClick: _cache[7] || (_cache[7] = ($event) => showPicker("month")) + }, vue.toDisplayString(vue.unref(t)(`el.datepicker.month${vue.unref(month) + 1}`)), 35), [ + [vue.vShow, currentView.value === "date"] + ]), + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(dpNs).e("next-btn")) + }, [ + vue.withDirectives(vue.createElementVNode("button", { + type: "button", + "aria-label": vue.unref(t)(`el.datepicker.nextMonth`), + class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]), + onClick: _cache[8] || (_cache[8] = ($event) => moveByMonth(true)) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_right_default)) + ]), + _: 1 + }) + ], 10, _hoisted_4$9), [ + [vue.vShow, currentView.value === "date"] + ]), + vue.createElementVNode("button", { + type: "button", + "aria-label": vue.unref(t)(`el.datepicker.nextYear`), + class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]), + onClick: _cache[9] || (_cache[9] = ($event) => moveByYear(true)) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(d_arrow_right_default)) + ]), + _: 1 + }) + ], 10, _hoisted_5$7) + ], 2) + ], 2), [ + [vue.vShow, currentView.value !== "time"] + ]), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ppNs).e("content")), + onKeydown: handleKeydownTable + }, [ + currentView.value === "date" ? (vue.openBlock(), vue.createBlock(DateTable, { + key: 0, + ref_key: "currentViewRef", + ref: currentViewRef, + "selection-mode": vue.unref(selectionMode), + date: innerDate.value, + "parsed-value": _ctx.parsedValue, + "disabled-date": vue.unref(disabledDate), + "cell-class-name": vue.unref(cellClassName), + onPick: handleDatePick + }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "cell-class-name"])) : vue.createCommentVNode("v-if", true), + currentView.value === "year" ? (vue.openBlock(), vue.createBlock(YearTable, { + key: 1, + ref_key: "currentViewRef", + ref: currentViewRef, + date: innerDate.value, + "disabled-date": vue.unref(disabledDate), + "parsed-value": _ctx.parsedValue, + onPick: handleYearPick + }, null, 8, ["date", "disabled-date", "parsed-value"])) : vue.createCommentVNode("v-if", true), + currentView.value === "month" ? (vue.openBlock(), vue.createBlock(MonthTable, { + key: 2, + ref_key: "currentViewRef", + ref: currentViewRef, + date: innerDate.value, + "parsed-value": _ctx.parsedValue, + "disabled-date": vue.unref(disabledDate), + onPick: handleMonthPick + }, null, 8, ["date", "parsed-value", "disabled-date"])) : vue.createCommentVNode("v-if", true) + ], 34) + ], 2) + ], 2), + vue.withDirectives(vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ppNs).e("footer")) + }, [ + vue.withDirectives(vue.createVNode(vue.unref(ElButton), { + text: "", + size: "small", + class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")), + onClick: changeToNow + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.now")), 1) + ]), + _: 1 + }, 8, ["class"]), [ + [vue.vShow, vue.unref(selectionMode) !== "dates"] + ]), + vue.createVNode(vue.unref(ElButton), { + plain: "", + size: "small", + class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")), + onClick: onConfirm + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 1) + ]), + _: 1 + }, 8, ["class"]) + ], 2), [ + [vue.vShow, vue.unref(footerVisible) && currentView.value === "date"] + ]) + ], 2); + }; + } + }); + var DatePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__file", "panel-date-pick.vue"]]); + + const panelDateRangeProps = buildProps({ + ...panelSharedProps, + ...panelRangeSharedProps + }); + + const useShortcut = (lang) => { + const { emit } = vue.getCurrentInstance(); + const attrs = vue.useAttrs(); + const slots = vue.useSlots(); + const handleShortcutClick = (shortcut) => { + const shortcutValues = isFunction$1(shortcut.value) ? shortcut.value() : shortcut.value; + if (shortcutValues) { + emit("pick", [ + dayjs(shortcutValues[0]).locale(lang.value), + dayjs(shortcutValues[1]).locale(lang.value) + ]); + return; + } + if (shortcut.onClick) { + shortcut.onClick({ + attrs, + slots, + emit + }); + } + }; + return handleShortcutClick; + }; + + const useRangePicker = (props, { + defaultValue, + leftDate, + rightDate, + unit, + onParsedValueChanged + }) => { + const { emit } = vue.getCurrentInstance(); + const { pickerNs } = vue.inject(ROOT_PICKER_INJECTION_KEY); + const drpNs = useNamespace("date-range-picker"); + const { t, lang } = useLocale(); + const handleShortcutClick = useShortcut(lang); + const minDate = vue.ref(); + const maxDate = vue.ref(); + const rangeState = vue.ref({ + endDate: null, + selecting: false + }); + const handleChangeRange = (val) => { + rangeState.value = val; + }; + const handleRangeConfirm = (visible = false) => { + const _minDate = vue.unref(minDate); + const _maxDate = vue.unref(maxDate); + if (isValidRange([_minDate, _maxDate])) { + emit("pick", [_minDate, _maxDate], visible); + } + }; + const onSelect = (selecting) => { + rangeState.value.selecting = selecting; + if (!selecting) { + rangeState.value.endDate = null; + } + }; + const restoreDefault = () => { + const [start, end] = getDefaultValue(vue.unref(defaultValue), { + lang: vue.unref(lang), + unit, + unlinkPanels: props.unlinkPanels + }); + minDate.value = void 0; + maxDate.value = void 0; + leftDate.value = start; + rightDate.value = end; + }; + vue.watch(defaultValue, (val) => { + if (val) { + restoreDefault(); + } + }, { immediate: true }); + vue.watch(() => props.parsedValue, (parsedValue) => { + if (isArray$1(parsedValue) && parsedValue.length === 2) { + const [start, end] = parsedValue; + minDate.value = start; + leftDate.value = start; + maxDate.value = end; + onParsedValueChanged(vue.unref(minDate), vue.unref(maxDate)); + } else { + restoreDefault(); + } + }, { immediate: true }); + return { + minDate, + maxDate, + rangeState, + lang, + ppNs: pickerNs, + drpNs, + handleChangeRange, + handleRangeConfirm, + handleShortcutClick, + onSelect, + t + }; + }; + + const _hoisted_1$E = ["onClick"]; + const _hoisted_2$p = ["disabled"]; + const _hoisted_3$c = ["disabled"]; + const _hoisted_4$8 = ["disabled"]; + const _hoisted_5$6 = ["disabled"]; + const unit$1 = "month"; + const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({ + __name: "panel-date-range", + props: panelDateRangeProps, + emits: [ + "pick", + "set-picker-option", + "calendar-change", + "panel-change" + ], + setup(__props, { emit }) { + const props = __props; + const pickerBase = vue.inject("EP_PICKER_BASE"); + const { + disabledDate, + cellClassName, + format, + defaultTime, + arrowControl, + clearable + } = pickerBase.props; + const shortcuts = vue.toRef(pickerBase.props, "shortcuts"); + const defaultValue = vue.toRef(pickerBase.props, "defaultValue"); + const { lang } = useLocale(); + const leftDate = vue.ref(dayjs().locale(lang.value)); + const rightDate = vue.ref(dayjs().locale(lang.value).add(1, unit$1)); + const { + minDate, + maxDate, + rangeState, + ppNs, + drpNs, + handleChangeRange, + handleRangeConfirm, + handleShortcutClick, + onSelect, + t + } = useRangePicker(props, { + defaultValue, + leftDate, + rightDate, + unit: unit$1, + onParsedValueChanged + }); + const dateUserInput = vue.ref({ + min: null, + max: null + }); + const timeUserInput = vue.ref({ + min: null, + max: null + }); + const leftLabel = vue.computed(() => { + return `${leftDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${leftDate.value.month() + 1}`)}`; + }); + const rightLabel = vue.computed(() => { + return `${rightDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${rightDate.value.month() + 1}`)}`; + }); + const leftYear = vue.computed(() => { + return leftDate.value.year(); + }); + const leftMonth = vue.computed(() => { + return leftDate.value.month(); + }); + const rightYear = vue.computed(() => { + return rightDate.value.year(); + }); + const rightMonth = vue.computed(() => { + return rightDate.value.month(); + }); + const hasShortcuts = vue.computed(() => !!shortcuts.value.length); + const minVisibleDate = vue.computed(() => { + if (dateUserInput.value.min !== null) + return dateUserInput.value.min; + if (minDate.value) + return minDate.value.format(dateFormat.value); + return ""; + }); + const maxVisibleDate = vue.computed(() => { + if (dateUserInput.value.max !== null) + return dateUserInput.value.max; + if (maxDate.value || minDate.value) + return (maxDate.value || minDate.value).format(dateFormat.value); + return ""; + }); + const minVisibleTime = vue.computed(() => { + if (timeUserInput.value.min !== null) + return timeUserInput.value.min; + if (minDate.value) + return minDate.value.format(timeFormat.value); + return ""; + }); + const maxVisibleTime = vue.computed(() => { + if (timeUserInput.value.max !== null) + return timeUserInput.value.max; + if (maxDate.value || minDate.value) + return (maxDate.value || minDate.value).format(timeFormat.value); + return ""; + }); + const timeFormat = vue.computed(() => { + return extractTimeFormat(format); + }); + const dateFormat = vue.computed(() => { + return extractDateFormat(format); + }); + const leftPrevYear = () => { + leftDate.value = leftDate.value.subtract(1, "year"); + if (!props.unlinkPanels) { + rightDate.value = leftDate.value.add(1, "month"); + } + handlePanelChange("year"); + }; + const leftPrevMonth = () => { + leftDate.value = leftDate.value.subtract(1, "month"); + if (!props.unlinkPanels) { + rightDate.value = leftDate.value.add(1, "month"); + } + handlePanelChange("month"); + }; + const rightNextYear = () => { + if (!props.unlinkPanels) { + leftDate.value = leftDate.value.add(1, "year"); + rightDate.value = leftDate.value.add(1, "month"); + } else { + rightDate.value = rightDate.value.add(1, "year"); + } + handlePanelChange("year"); + }; + const rightNextMonth = () => { + if (!props.unlinkPanels) { + leftDate.value = leftDate.value.add(1, "month"); + rightDate.value = leftDate.value.add(1, "month"); + } else { + rightDate.value = rightDate.value.add(1, "month"); + } + handlePanelChange("month"); + }; + const leftNextYear = () => { + leftDate.value = leftDate.value.add(1, "year"); + handlePanelChange("year"); + }; + const leftNextMonth = () => { + leftDate.value = leftDate.value.add(1, "month"); + handlePanelChange("month"); + }; + const rightPrevYear = () => { + rightDate.value = rightDate.value.subtract(1, "year"); + handlePanelChange("year"); + }; + const rightPrevMonth = () => { + rightDate.value = rightDate.value.subtract(1, "month"); + handlePanelChange("month"); + }; + const handlePanelChange = (mode) => { + emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode); + }; + const enableMonthArrow = vue.computed(() => { + const nextMonth = (leftMonth.value + 1) % 12; + const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0; + return props.unlinkPanels && new Date(leftYear.value + yearOffset, nextMonth) < new Date(rightYear.value, rightMonth.value); + }); + const enableYearArrow = vue.computed(() => { + return props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12; + }); + const btnDisabled = vue.computed(() => { + return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidRange([minDate.value, maxDate.value])); + }); + const showTime = vue.computed(() => props.type === "datetime" || props.type === "datetimerange"); + const formatEmit = (emitDayjs, index) => { + if (!emitDayjs) + return; + if (defaultTime) { + const defaultTimeD = dayjs(defaultTime[index] || defaultTime).locale(lang.value); + return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date()); + } + return emitDayjs; + }; + const handleRangePick = (val, close = true) => { + const min_ = val.minDate; + const max_ = val.maxDate; + const minDate_ = formatEmit(min_, 0); + const maxDate_ = formatEmit(max_, 1); + if (maxDate.value === maxDate_ && minDate.value === minDate_) { + return; + } + emit("calendar-change", [min_.toDate(), max_ && max_.toDate()]); + maxDate.value = maxDate_; + minDate.value = minDate_; + if (!close || showTime.value) + return; + handleRangeConfirm(); + }; + const minTimePickerVisible = vue.ref(false); + const maxTimePickerVisible = vue.ref(false); + const handleMinTimeClose = () => { + minTimePickerVisible.value = false; + }; + const handleMaxTimeClose = () => { + maxTimePickerVisible.value = false; + }; + const handleDateInput = (value, type) => { + dateUserInput.value[type] = value; + const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value); + if (parsedValueD.isValid()) { + if (disabledDate && disabledDate(parsedValueD.toDate())) { + return; + } + if (type === "min") { + leftDate.value = parsedValueD; + minDate.value = (minDate.value || leftDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date()); + if (!props.unlinkPanels) { + rightDate.value = parsedValueD.add(1, "month"); + maxDate.value = minDate.value.add(1, "month"); + } + } else { + rightDate.value = parsedValueD; + maxDate.value = (maxDate.value || rightDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date()); + if (!props.unlinkPanels) { + leftDate.value = parsedValueD.subtract(1, "month"); + minDate.value = maxDate.value.subtract(1, "month"); + } + } + } + }; + const handleDateChange = (_, type) => { + dateUserInput.value[type] = null; + }; + const handleTimeInput = (value, type) => { + timeUserInput.value[type] = value; + const parsedValueD = dayjs(value, timeFormat.value).locale(lang.value); + if (parsedValueD.isValid()) { + if (type === "min") { + minTimePickerVisible.value = true; + minDate.value = (minDate.value || leftDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second()); + if (!maxDate.value || maxDate.value.isBefore(minDate.value)) { + maxDate.value = minDate.value; + } + } else { + maxTimePickerVisible.value = true; + maxDate.value = (maxDate.value || rightDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second()); + rightDate.value = maxDate.value; + if (maxDate.value && maxDate.value.isBefore(minDate.value)) { + minDate.value = maxDate.value; + } + } + } + }; + const handleTimeChange = (value, type) => { + timeUserInput.value[type] = null; + if (type === "min") { + leftDate.value = minDate.value; + minTimePickerVisible.value = false; + } else { + rightDate.value = maxDate.value; + maxTimePickerVisible.value = false; + } + }; + const handleMinTimePick = (value, visible, first) => { + if (timeUserInput.value.min) + return; + if (value) { + leftDate.value = value; + minDate.value = (minDate.value || leftDate.value).hour(value.hour()).minute(value.minute()).second(value.second()); + } + if (!first) { + minTimePickerVisible.value = visible; + } + if (!maxDate.value || maxDate.value.isBefore(minDate.value)) { + maxDate.value = minDate.value; + rightDate.value = value; + } + }; + const handleMaxTimePick = (value, visible, first) => { + if (timeUserInput.value.max) + return; + if (value) { + rightDate.value = value; + maxDate.value = (maxDate.value || rightDate.value).hour(value.hour()).minute(value.minute()).second(value.second()); + } + if (!first) { + maxTimePickerVisible.value = visible; + } + if (maxDate.value && maxDate.value.isBefore(minDate.value)) { + minDate.value = maxDate.value; + } + }; + const handleClear = () => { + leftDate.value = getDefaultValue(vue.unref(defaultValue), { + lang: vue.unref(lang), + unit: "month", + unlinkPanels: props.unlinkPanels + })[0]; + rightDate.value = leftDate.value.add(1, "month"); + emit("pick", null); + }; + const formatToString = (value) => { + return isArray$1(value) ? value.map((_) => _.format(format)) : value.format(format); + }; + const parseUserInput = (value) => { + return isArray$1(value) ? value.map((_) => dayjs(_, format).locale(lang.value)) : dayjs(value, format).locale(lang.value); + }; + function onParsedValueChanged(minDate2, maxDate2) { + if (props.unlinkPanels && maxDate2) { + const minDateYear = (minDate2 == null ? void 0 : minDate2.year()) || 0; + const minDateMonth = (minDate2 == null ? void 0 : minDate2.month()) || 0; + const maxDateYear = maxDate2.year(); + const maxDateMonth = maxDate2.month(); + rightDate.value = minDateYear === maxDateYear && minDateMonth === maxDateMonth ? maxDate2.add(1, unit$1) : maxDate2; + } else { + rightDate.value = leftDate.value.add(1, unit$1); + if (maxDate2) { + rightDate.value = rightDate.value.hour(maxDate2.hour()).minute(maxDate2.minute()).second(maxDate2.second()); + } + } + } + emit("set-picker-option", ["isValidValue", isValidRange]); + emit("set-picker-option", ["parseUserInput", parseUserInput]); + emit("set-picker-option", ["formatToString", formatToString]); + emit("set-picker-option", ["handleClear", handleClear]); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([ + vue.unref(ppNs).b(), + vue.unref(drpNs).b(), + { + "has-sidebar": _ctx.$slots.sidebar || vue.unref(hasShortcuts), + "has-time": vue.unref(showTime) + } + ]) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ppNs).e("body-wrapper")) + }, [ + vue.renderSlot(_ctx.$slots, "sidebar", { + class: vue.normalizeClass(vue.unref(ppNs).e("sidebar")) + }), + vue.unref(hasShortcuts) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ppNs).e("sidebar")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(shortcuts), (shortcut, key) => { + return vue.openBlock(), vue.createElementBlock("button", { + key, + type: "button", + class: vue.normalizeClass(vue.unref(ppNs).e("shortcut")), + onClick: ($event) => vue.unref(handleShortcutClick)(shortcut) + }, vue.toDisplayString(shortcut.text), 11, _hoisted_1$E); + }), 128)) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ppNs).e("body")) + }, [ + vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(drpNs).e("time-header")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(drpNs).e("editors-wrap")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap")) + }, [ + vue.createVNode(vue.unref(ElInput), { + size: "small", + disabled: vue.unref(rangeState).selecting, + placeholder: vue.unref(t)("el.datepicker.startDate"), + class: vue.normalizeClass(vue.unref(drpNs).e("editor")), + "model-value": vue.unref(minVisibleDate), + "validate-event": false, + onInput: _cache[0] || (_cache[0] = (val) => handleDateInput(val, "min")), + onChange: _cache[1] || (_cache[1] = (val) => handleDateChange(val, "min")) + }, null, 8, ["disabled", "placeholder", "class", "model-value"]) + ], 2), + vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", { + class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap")) + }, [ + vue.createVNode(vue.unref(ElInput), { + size: "small", + class: vue.normalizeClass(vue.unref(drpNs).e("editor")), + disabled: vue.unref(rangeState).selecting, + placeholder: vue.unref(t)("el.datepicker.startTime"), + "model-value": vue.unref(minVisibleTime), + "validate-event": false, + onFocus: _cache[2] || (_cache[2] = ($event) => minTimePickerVisible.value = true), + onInput: _cache[3] || (_cache[3] = (val) => handleTimeInput(val, "min")), + onChange: _cache[4] || (_cache[4] = (val) => handleTimeChange(val, "min")) + }, null, 8, ["class", "disabled", "placeholder", "model-value"]), + vue.createVNode(vue.unref(TimePickPanel), { + visible: minTimePickerVisible.value, + format: vue.unref(timeFormat), + "datetime-role": "start", + "time-arrow-control": vue.unref(arrowControl), + "parsed-value": leftDate.value, + onPick: handleMinTimePick + }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"]) + ], 2)), [ + [vue.unref(ClickOutside), handleMinTimeClose] + ]) + ], 2), + vue.createElementVNode("span", null, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_right_default)) + ]), + _: 1 + }) + ]), + vue.createElementVNode("span", { + class: vue.normalizeClass([vue.unref(drpNs).e("editors-wrap"), "is-right"]) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap")) + }, [ + vue.createVNode(vue.unref(ElInput), { + size: "small", + class: vue.normalizeClass(vue.unref(drpNs).e("editor")), + disabled: vue.unref(rangeState).selecting, + placeholder: vue.unref(t)("el.datepicker.endDate"), + "model-value": vue.unref(maxVisibleDate), + readonly: !vue.unref(minDate), + "validate-event": false, + onInput: _cache[5] || (_cache[5] = (val) => handleDateInput(val, "max")), + onChange: _cache[6] || (_cache[6] = (val) => handleDateChange(val, "max")) + }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"]) + ], 2), + vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", { + class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap")) + }, [ + vue.createVNode(vue.unref(ElInput), { + size: "small", + class: vue.normalizeClass(vue.unref(drpNs).e("editor")), + disabled: vue.unref(rangeState).selecting, + placeholder: vue.unref(t)("el.datepicker.endTime"), + "model-value": vue.unref(maxVisibleTime), + readonly: !vue.unref(minDate), + "validate-event": false, + onFocus: _cache[7] || (_cache[7] = ($event) => vue.unref(minDate) && (maxTimePickerVisible.value = true)), + onInput: _cache[8] || (_cache[8] = (val) => handleTimeInput(val, "max")), + onChange: _cache[9] || (_cache[9] = (val) => handleTimeChange(val, "max")) + }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"]), + vue.createVNode(vue.unref(TimePickPanel), { + "datetime-role": "end", + visible: maxTimePickerVisible.value, + format: vue.unref(timeFormat), + "time-arrow-control": vue.unref(arrowControl), + "parsed-value": rightDate.value, + onPick: handleMaxTimePick + }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"]) + ], 2)), [ + [vue.unref(ClickOutside), handleMaxTimeClose] + ]) + ], 2) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-left"]) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(drpNs).e("header")) + }, [ + vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-left"]), + onClick: leftPrevYear + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(d_arrow_left_default)) + ]), + _: 1 + }) + ], 2), + vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]), + onClick: leftPrevMonth + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_left_default)) + ]), + _: 1 + }) + ], 2), + _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", { + key: 0, + type: "button", + disabled: !vue.unref(enableYearArrow), + class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-right"]), + onClick: leftNextYear + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(d_arrow_right_default)) + ]), + _: 1 + }) + ], 10, _hoisted_2$p)) : vue.createCommentVNode("v-if", true), + _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", { + key: 1, + type: "button", + disabled: !vue.unref(enableMonthArrow), + class: vue.normalizeClass([[ + vue.unref(ppNs).e("icon-btn"), + { "is-disabled": !vue.unref(enableMonthArrow) } + ], "arrow-right"]), + onClick: leftNextMonth + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_right_default)) + ]), + _: 1 + }) + ], 10, _hoisted_3$c)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1) + ], 2), + vue.createVNode(DateTable, { + "selection-mode": "range", + date: leftDate.value, + "min-date": vue.unref(minDate), + "max-date": vue.unref(maxDate), + "range-state": vue.unref(rangeState), + "disabled-date": vue.unref(disabledDate), + "cell-class-name": vue.unref(cellClassName), + onChangerange: vue.unref(handleChangeRange), + onPick: handleRangePick, + onSelect: vue.unref(onSelect) + }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"]) + ], 2), + vue.createElementVNode("div", { + class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-right"]) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(drpNs).e("header")) + }, [ + _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", { + key: 0, + type: "button", + disabled: !vue.unref(enableYearArrow), + class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-left"]), + onClick: rightPrevYear + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(d_arrow_left_default)) + ]), + _: 1 + }) + ], 10, _hoisted_4$8)) : vue.createCommentVNode("v-if", true), + _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", { + key: 1, + type: "button", + disabled: !vue.unref(enableMonthArrow), + class: vue.normalizeClass([[ + vue.unref(ppNs).e("icon-btn"), + { "is-disabled": !vue.unref(enableMonthArrow) } + ], "arrow-left"]), + onClick: rightPrevMonth + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_left_default)) + ]), + _: 1 + }) + ], 10, _hoisted_5$6)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]), + onClick: rightNextYear + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(d_arrow_right_default)) + ]), + _: 1 + }) + ], 2), + vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]), + onClick: rightNextMonth + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_right_default)) + ]), + _: 1 + }) + ], 2), + vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(rightLabel)), 1) + ], 2), + vue.createVNode(DateTable, { + "selection-mode": "range", + date: rightDate.value, + "min-date": vue.unref(minDate), + "max-date": vue.unref(maxDate), + "range-state": vue.unref(rangeState), + "disabled-date": vue.unref(disabledDate), + "cell-class-name": vue.unref(cellClassName), + onChangerange: vue.unref(handleChangeRange), + onPick: handleRangePick, + onSelect: vue.unref(onSelect) + }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"]) + ], 2) + ], 2) + ], 2), + vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ppNs).e("footer")) + }, [ + vue.unref(clearable) ? (vue.openBlock(), vue.createBlock(vue.unref(ElButton), { + key: 0, + text: "", + size: "small", + class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")), + onClick: handleClear + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.clear")), 1) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true), + vue.createVNode(vue.unref(ElButton), { + plain: "", + size: "small", + class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")), + disabled: vue.unref(btnDisabled), + onClick: _cache[10] || (_cache[10] = ($event) => vue.unref(handleRangeConfirm)(false)) + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 1) + ]), + _: 1 + }, 8, ["class", "disabled"]) + ], 2)) : vue.createCommentVNode("v-if", true) + ], 2); + }; + } + }); + var DateRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["__file", "panel-date-range.vue"]]); + + const panelMonthRangeProps = buildProps({ + ...panelRangeSharedProps + }); + const panelMonthRangeEmits = ["pick", "set-picker-option"]; + + const useMonthRangeHeader = ({ + unlinkPanels, + leftDate, + rightDate + }) => { + const { t } = useLocale(); + const leftPrevYear = () => { + leftDate.value = leftDate.value.subtract(1, "year"); + if (!unlinkPanels.value) { + rightDate.value = rightDate.value.subtract(1, "year"); + } + }; + const rightNextYear = () => { + if (!unlinkPanels.value) { + leftDate.value = leftDate.value.add(1, "year"); + } + rightDate.value = rightDate.value.add(1, "year"); + }; + const leftNextYear = () => { + leftDate.value = leftDate.value.add(1, "year"); + }; + const rightPrevYear = () => { + rightDate.value = rightDate.value.subtract(1, "year"); + }; + const leftLabel = vue.computed(() => { + return `${leftDate.value.year()} ${t("el.datepicker.year")}`; + }); + const rightLabel = vue.computed(() => { + return `${rightDate.value.year()} ${t("el.datepicker.year")}`; + }); + const leftYear = vue.computed(() => { + return leftDate.value.year(); + }); + const rightYear = vue.computed(() => { + return rightDate.value.year() === leftDate.value.year() ? leftDate.value.year() + 1 : rightDate.value.year(); + }); + return { + leftPrevYear, + rightNextYear, + leftNextYear, + rightPrevYear, + leftLabel, + rightLabel, + leftYear, + rightYear + }; + }; + + const _hoisted_1$D = ["onClick"]; + const _hoisted_2$o = ["disabled"]; + const _hoisted_3$b = ["disabled"]; + const unit = "year"; + const __default__$R = vue.defineComponent({ + name: "DatePickerMonthRange" + }); + const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({ + ...__default__$R, + props: panelMonthRangeProps, + emits: panelMonthRangeEmits, + setup(__props, { emit }) { + const props = __props; + const { lang } = useLocale(); + const pickerBase = vue.inject("EP_PICKER_BASE"); + const { shortcuts, disabledDate, format } = pickerBase.props; + const defaultValue = vue.toRef(pickerBase.props, "defaultValue"); + const leftDate = vue.ref(dayjs().locale(lang.value)); + const rightDate = vue.ref(dayjs().locale(lang.value).add(1, unit)); + const { + minDate, + maxDate, + rangeState, + ppNs, + drpNs, + handleChangeRange, + handleRangeConfirm, + handleShortcutClick, + onSelect + } = useRangePicker(props, { + defaultValue, + leftDate, + rightDate, + unit, + onParsedValueChanged + }); + const hasShortcuts = vue.computed(() => !!shortcuts.length); + const { + leftPrevYear, + rightNextYear, + leftNextYear, + rightPrevYear, + leftLabel, + rightLabel, + leftYear, + rightYear + } = useMonthRangeHeader({ + unlinkPanels: vue.toRef(props, "unlinkPanels"), + leftDate, + rightDate + }); + const enableYearArrow = vue.computed(() => { + return props.unlinkPanels && rightYear.value > leftYear.value + 1; + }); + const handleRangePick = (val, close = true) => { + const minDate_ = val.minDate; + const maxDate_ = val.maxDate; + if (maxDate.value === maxDate_ && minDate.value === minDate_) { + return; + } + maxDate.value = maxDate_; + minDate.value = minDate_; + if (!close) + return; + handleRangeConfirm(); + }; + const formatToString = (days) => { + return days.map((day) => day.format(format)); + }; + function onParsedValueChanged(minDate2, maxDate2) { + if (props.unlinkPanels && maxDate2) { + const minDateYear = (minDate2 == null ? void 0 : minDate2.year()) || 0; + const maxDateYear = maxDate2.year(); + rightDate.value = minDateYear === maxDateYear ? maxDate2.add(1, unit) : maxDate2; + } else { + rightDate.value = leftDate.value.add(1, unit); + } + } + emit("set-picker-option", ["formatToString", formatToString]); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([ + vue.unref(ppNs).b(), + vue.unref(drpNs).b(), + { + "has-sidebar": Boolean(_ctx.$slots.sidebar) || vue.unref(hasShortcuts) + } + ]) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ppNs).e("body-wrapper")) + }, [ + vue.renderSlot(_ctx.$slots, "sidebar", { + class: vue.normalizeClass(vue.unref(ppNs).e("sidebar")) + }), + vue.unref(hasShortcuts) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ppNs).e("sidebar")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(shortcuts), (shortcut, key) => { + return vue.openBlock(), vue.createElementBlock("button", { + key, + type: "button", + class: vue.normalizeClass(vue.unref(ppNs).e("shortcut")), + onClick: ($event) => vue.unref(handleShortcutClick)(shortcut) + }, vue.toDisplayString(shortcut.text), 11, _hoisted_1$D); + }), 128)) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ppNs).e("body")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-left"]) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(drpNs).e("header")) + }, [ + vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-left"]), + onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(leftPrevYear) && vue.unref(leftPrevYear)(...args)) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(d_arrow_left_default)) + ]), + _: 1 + }) + ], 2), + _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", { + key: 0, + type: "button", + disabled: !vue.unref(enableYearArrow), + class: vue.normalizeClass([[ + vue.unref(ppNs).e("icon-btn"), + { [vue.unref(ppNs).is("disabled")]: !vue.unref(enableYearArrow) } + ], "d-arrow-right"]), + onClick: _cache[1] || (_cache[1] = (...args) => vue.unref(leftNextYear) && vue.unref(leftNextYear)(...args)) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(d_arrow_right_default)) + ]), + _: 1 + }) + ], 10, _hoisted_2$o)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1) + ], 2), + vue.createVNode(MonthTable, { + "selection-mode": "range", + date: leftDate.value, + "min-date": vue.unref(minDate), + "max-date": vue.unref(maxDate), + "range-state": vue.unref(rangeState), + "disabled-date": vue.unref(disabledDate), + onChangerange: vue.unref(handleChangeRange), + onPick: handleRangePick, + onSelect: vue.unref(onSelect) + }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"]) + ], 2), + vue.createElementVNode("div", { + class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-right"]) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(drpNs).e("header")) + }, [ + _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", { + key: 0, + type: "button", + disabled: !vue.unref(enableYearArrow), + class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-left"]), + onClick: _cache[2] || (_cache[2] = (...args) => vue.unref(rightPrevYear) && vue.unref(rightPrevYear)(...args)) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(d_arrow_left_default)) + ]), + _: 1 + }) + ], 10, _hoisted_3$b)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("button", { + type: "button", + class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]), + onClick: _cache[3] || (_cache[3] = (...args) => vue.unref(rightNextYear) && vue.unref(rightNextYear)(...args)) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(d_arrow_right_default)) + ]), + _: 1 + }) + ], 2), + vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(rightLabel)), 1) + ], 2), + vue.createVNode(MonthTable, { + "selection-mode": "range", + date: rightDate.value, + "min-date": vue.unref(minDate), + "max-date": vue.unref(maxDate), + "range-state": vue.unref(rangeState), + "disabled-date": vue.unref(disabledDate), + onChangerange: vue.unref(handleChangeRange), + onPick: handleRangePick, + onSelect: vue.unref(onSelect) + }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"]) + ], 2) + ], 2) + ], 2) + ], 2); + }; + } + }); + var MonthRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["__file", "panel-month-range.vue"]]); + + const getPanel = function(type) { + switch (type) { + case "daterange": + case "datetimerange": { + return DateRangePickPanel; + } + case "monthrange": { + return MonthRangePickPanel; + } + default: { + return DatePickPanel; + } + } + }; + + dayjs.extend(localeData); + dayjs.extend(advancedFormat); + dayjs.extend(customParseFormat); + dayjs.extend(weekOfYear); + dayjs.extend(weekYear); + dayjs.extend(dayOfYear); + dayjs.extend(isSameOrAfter); + dayjs.extend(isSameOrBefore); + var DatePicker = vue.defineComponent({ + name: "ElDatePicker", + install: null, + props: { + ...timePickerDefaultProps, + ...datePickerProps + }, + emits: ["update:modelValue"], + setup(props, { + expose, + emit, + slots + }) { + const ns = useNamespace("picker-panel"); + vue.provide("ElPopperOptions", vue.reactive(vue.toRef(props, "popperOptions"))); + vue.provide(ROOT_PICKER_INJECTION_KEY, { + slots, + pickerNs: ns + }); + const commonPicker = vue.ref(); + const refProps = { + focus: (focusStartInput = true) => { + var _a; + (_a = commonPicker.value) == null ? void 0 : _a.focus(focusStartInput); + }, + handleOpen: () => { + var _a; + (_a = commonPicker.value) == null ? void 0 : _a.handleOpen(); + }, + handleClose: () => { + var _a; + (_a = commonPicker.value) == null ? void 0 : _a.handleClose(); + } + }; + expose(refProps); + const onModelValueUpdated = (val) => { + emit("update:modelValue", val); + }; + return () => { + var _a; + const format = (_a = props.format) != null ? _a : DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE; + const Component = getPanel(props.type); + return vue.createVNode(CommonPicker, vue.mergeProps(props, { + "format": format, + "type": props.type, + "ref": commonPicker, + "onUpdate:modelValue": onModelValueUpdated + }), { + default: (scopedProps) => vue.createVNode(Component, scopedProps, null), + "range-separator": slots["range-separator"] + }); + }; + } + }); + + const _DatePicker = DatePicker; + _DatePicker.install = (app) => { + app.component(_DatePicker.name, _DatePicker); + }; + const ElDatePicker = _DatePicker; + + const descriptionsKey = Symbol("elDescriptions"); + + var ElDescriptionsCell = vue.defineComponent({ + name: "ElDescriptionsCell", + props: { + cell: { + type: Object + }, + tag: { + type: String + }, + type: { + type: String + } + }, + setup() { + const descriptions = vue.inject(descriptionsKey, {}); + return { + descriptions + }; + }, + render() { + var _a, _b, _c, _d, _e, _f; + const item = getNormalizedProps(this.cell); + const { border, direction } = this.descriptions; + const isVertical = direction === "vertical"; + const label = ((_c = (_b = (_a = this.cell) == null ? void 0 : _a.children) == null ? void 0 : _b.label) == null ? void 0 : _c.call(_b)) || item.label; + const content = (_f = (_e = (_d = this.cell) == null ? void 0 : _d.children) == null ? void 0 : _e.default) == null ? void 0 : _f.call(_e); + const span = item.span; + const align = item.align ? `is-${item.align}` : ""; + const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align; + const className = item.className; + const labelClassName = item.labelClassName; + const style = { + width: addUnit(item.width), + minWidth: addUnit(item.minWidth) + }; + const ns = useNamespace("descriptions"); + switch (this.type) { + case "label": + return vue.h(this.tag, { + style, + class: [ + ns.e("cell"), + ns.e("label"), + ns.is("bordered-label", border), + ns.is("vertical-label", isVertical), + labelAlign, + labelClassName + ], + colSpan: isVertical ? span : 1 + }, label); + case "content": + return vue.h(this.tag, { + style, + class: [ + ns.e("cell"), + ns.e("content"), + ns.is("bordered-content", border), + ns.is("vertical-content", isVertical), + align, + className + ], + colSpan: isVertical ? span : span * 2 - 1 + }, content); + default: + return vue.h("td", { + style, + class: [ns.e("cell"), align], + colSpan: span + }, [ + !isNil(label) ? vue.h("span", { + class: [ns.e("label"), labelClassName] + }, label) : void 0, + vue.h("span", { + class: [ns.e("content"), className] + }, content) + ]); + } + } + }); + + const descriptionsRowProps = buildProps({ + row: { + type: Array, + default: () => [] + } + }); + + const _hoisted_1$C = { key: 1 }; + const __default__$Q = vue.defineComponent({ + name: "ElDescriptionsRow" + }); + const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({ + ...__default__$Q, + props: descriptionsRowProps, + setup(__props) { + const descriptions = vue.inject(descriptionsKey, {}); + return (_ctx, _cache) => { + return vue.unref(descriptions).direction === "vertical" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.createElementVNode("tr", null, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.row, (cell, index) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElDescriptionsCell), { + key: `tr1-${index}`, + cell, + tag: "th", + type: "label" + }, null, 8, ["cell"]); + }), 128)) + ]), + vue.createElementVNode("tr", null, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.row, (cell, index) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElDescriptionsCell), { + key: `tr2-${index}`, + cell, + tag: "td", + type: "content" + }, null, 8, ["cell"]); + }), 128)) + ]) + ], 64)) : (vue.openBlock(), vue.createElementBlock("tr", _hoisted_1$C, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.row, (cell, index) => { + return vue.openBlock(), vue.createElementBlock(vue.Fragment, { + key: `tr3-${index}` + }, [ + vue.unref(descriptions).border ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.createVNode(vue.unref(ElDescriptionsCell), { + cell, + tag: "td", + type: "label" + }, null, 8, ["cell"]), + vue.createVNode(vue.unref(ElDescriptionsCell), { + cell, + tag: "td", + type: "content" + }, null, 8, ["cell"]) + ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(ElDescriptionsCell), { + key: 1, + cell, + tag: "td", + type: "both" + }, null, 8, ["cell"])) + ], 64); + }), 128)) + ])); + }; + } + }); + var ElDescriptionsRow = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["__file", "descriptions-row.vue"]]); + + const descriptionProps = buildProps({ + border: { + type: Boolean, + default: false + }, + column: { + type: Number, + default: 3 + }, + direction: { + type: String, + values: ["horizontal", "vertical"], + default: "horizontal" + }, + size: useSizeProp, + title: { + type: String, + default: "" + }, + extra: { + type: String, + default: "" + } + }); + + const __default__$P = vue.defineComponent({ + name: "ElDescriptions" + }); + const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({ + ...__default__$P, + props: descriptionProps, + setup(__props) { + const props = __props; + const ns = useNamespace("descriptions"); + const descriptionsSize = useFormSize(); + const slots = vue.useSlots(); + vue.provide(descriptionsKey, props); + const descriptionKls = vue.computed(() => [ns.b(), ns.m(descriptionsSize.value)]); + const filledNode = (node, span, count, isLast = false) => { + if (!node.props) { + node.props = {}; + } + if (span > count) { + node.props.span = count; + } + if (isLast) { + node.props.span = span; + } + return node; + }; + const getRows = () => { + var _a; + const children = flattedChildren((_a = slots.default) == null ? void 0 : _a.call(slots)).filter((node) => { + var _a2; + return ((_a2 = node == null ? void 0 : node.type) == null ? void 0 : _a2.name) === "ElDescriptionsItem"; + }); + const rows = []; + let temp = []; + let count = props.column; + let totalSpan = 0; + children.forEach((node, index) => { + var _a2; + const span = ((_a2 = node.props) == null ? void 0 : _a2.span) || 1; + if (index < children.length - 1) { + totalSpan += span > count ? count : span; + } + if (index === children.length - 1) { + const lastSpan = props.column - totalSpan % props.column; + temp.push(filledNode(node, lastSpan, count, true)); + rows.push(temp); + return; + } + if (span < count) { + count -= span; + temp.push(node); + } else { + temp.push(filledNode(node, span, count)); + rows.push(temp); + count = props.column; + temp = []; + } + }); + return rows; + }; + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(descriptionKls)) + }, [ + _ctx.title || _ctx.extra || _ctx.$slots.title || _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("header")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("title")) + }, [ + vue.renderSlot(_ctx.$slots, "title", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.title), 1) + ]) + ], 2), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("extra")) + }, [ + vue.renderSlot(_ctx.$slots, "extra", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.extra), 1) + ]) + ], 2) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("body")) + }, [ + vue.createElementVNode("table", { + class: vue.normalizeClass([vue.unref(ns).e("table"), vue.unref(ns).is("bordered", _ctx.border)]) + }, [ + vue.createElementVNode("tbody", null, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(getRows(), (row, index) => { + return vue.openBlock(), vue.createBlock(ElDescriptionsRow, { + key: index, + row + }, null, 8, ["row"]); + }), 128)) + ]) + ], 2) + ], 2) + ], 2); + }; + } + }); + var Descriptions = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__file", "description.vue"]]); + + var DescriptionsItem = vue.defineComponent({ + name: "ElDescriptionsItem", + props: { + label: { + type: String, + default: "" + }, + span: { + type: Number, + default: 1 + }, + width: { + type: [String, Number], + default: "" + }, + minWidth: { + type: [String, Number], + default: "" + }, + align: { + type: String, + default: "left" + }, + labelAlign: { + type: String, + default: "" + }, + className: { + type: String, + default: "" + }, + labelClassName: { + type: String, + default: "" + } + } + }); + + const ElDescriptions = withInstall(Descriptions, { + DescriptionsItem + }); + const ElDescriptionsItem = withNoopInstall(DescriptionsItem); + + const overlayProps = buildProps({ + mask: { + type: Boolean, + default: true + }, + customMaskEvent: { + type: Boolean, + default: false + }, + overlayClass: { + type: definePropType([ + String, + Array, + Object + ]) + }, + zIndex: { + type: definePropType([String, Number]) + } + }); + const overlayEmits = { + click: (evt) => evt instanceof MouseEvent + }; + const BLOCK = "overlay"; + var Overlay$1 = vue.defineComponent({ + name: "ElOverlay", + props: overlayProps, + emits: overlayEmits, + setup(props, { slots, emit }) { + const ns = useNamespace(BLOCK); + const onMaskClick = (e) => { + emit("click", e); + }; + const { onClick, onMousedown, onMouseup } = useSameTarget(props.customMaskEvent ? void 0 : onMaskClick); + return () => { + return props.mask ? vue.createVNode("div", { + class: [ns.b(), props.overlayClass], + style: { + zIndex: props.zIndex + }, + onClick, + onMousedown, + onMouseup + }, [vue.renderSlot(slots, "default")], PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS, ["onClick", "onMouseup", "onMousedown"]) : vue.h("div", { + class: props.overlayClass, + style: { + zIndex: props.zIndex, + position: "fixed", + top: "0px", + right: "0px", + bottom: "0px", + left: "0px" + } + }, [vue.renderSlot(slots, "default")]); + }; + } + }); + + const ElOverlay = Overlay$1; + + const dialogInjectionKey = Symbol("dialogInjectionKey"); + + const dialogContentProps = buildProps({ + center: { + type: Boolean, + default: false + }, + alignCenter: { + type: Boolean, + default: false + }, + closeIcon: { + type: iconPropType + }, + customClass: { + type: String, + default: "" + }, + draggable: { + type: Boolean, + default: false + }, + fullscreen: { + type: Boolean, + default: false + }, + showClose: { + type: Boolean, + default: true + }, + title: { + type: String, + default: "" + } + }); + const dialogContentEmits = { + close: () => true + }; + + const _hoisted_1$B = ["aria-label"]; + const _hoisted_2$n = ["id"]; + const __default__$O = vue.defineComponent({ name: "ElDialogContent" }); + const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({ + ...__default__$O, + props: dialogContentProps, + emits: dialogContentEmits, + setup(__props) { + const props = __props; + const { t } = useLocale(); + const { Close } = CloseComponents; + const { dialogRef, headerRef, bodyId, ns, style } = vue.inject(dialogInjectionKey); + const { focusTrapRef } = vue.inject(FOCUS_TRAP_INJECTION_KEY); + const composedDialogRef = composeRefs(focusTrapRef, dialogRef); + const draggable = vue.computed(() => props.draggable); + useDraggable(dialogRef, headerRef, draggable); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + ref: vue.unref(composedDialogRef), + class: vue.normalizeClass([ + vue.unref(ns).b(), + vue.unref(ns).is("fullscreen", _ctx.fullscreen), + vue.unref(ns).is("draggable", vue.unref(draggable)), + vue.unref(ns).is("align-center", _ctx.alignCenter), + { [vue.unref(ns).m("center")]: _ctx.center }, + _ctx.customClass + ]), + style: vue.normalizeStyle(vue.unref(style)), + tabindex: "-1" + }, [ + vue.createElementVNode("header", { + ref_key: "headerRef", + ref: headerRef, + class: vue.normalizeClass(vue.unref(ns).e("header")) + }, [ + vue.renderSlot(_ctx.$slots, "header", {}, () => [ + vue.createElementVNode("span", { + role: "heading", + class: vue.normalizeClass(vue.unref(ns).e("title")) + }, vue.toDisplayString(_ctx.title), 3) + ]), + _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", { + key: 0, + "aria-label": vue.unref(t)("el.dialog.close"), + class: vue.normalizeClass(vue.unref(ns).e("headerbtn")), + type: "button", + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close")) + }, [ + vue.createVNode(vue.unref(ElIcon), { + class: vue.normalizeClass(vue.unref(ns).e("close")) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon || vue.unref(Close)))) + ]), + _: 1 + }, 8, ["class"]) + ], 10, _hoisted_1$B)) : vue.createCommentVNode("v-if", true) + ], 2), + vue.createElementVNode("div", { + id: vue.unref(bodyId), + class: vue.normalizeClass(vue.unref(ns).e("body")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 10, _hoisted_2$n), + _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("footer", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("footer")) + }, [ + vue.renderSlot(_ctx.$slots, "footer") + ], 2)) : vue.createCommentVNode("v-if", true) + ], 6); + }; + } + }); + var ElDialogContent = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__file", "dialog-content.vue"]]); + + const dialogProps = buildProps({ + ...dialogContentProps, + appendToBody: { + type: Boolean, + default: false + }, + beforeClose: { + type: definePropType(Function) + }, + destroyOnClose: { + type: Boolean, + default: false + }, + closeOnClickModal: { + type: Boolean, + default: true + }, + closeOnPressEscape: { + type: Boolean, + default: true + }, + lockScroll: { + type: Boolean, + default: true + }, + modal: { + type: Boolean, + default: true + }, + openDelay: { + type: Number, + default: 0 + }, + closeDelay: { + type: Number, + default: 0 + }, + top: { + type: String + }, + modelValue: { + type: Boolean, + default: false + }, + modalClass: String, + width: { + type: [String, Number] + }, + zIndex: { + type: Number + }, + trapFocus: { + type: Boolean, + default: false + } + }); + const dialogEmits = { + open: () => true, + opened: () => true, + close: () => true, + closed: () => true, + [UPDATE_MODEL_EVENT]: (value) => isBoolean$1(value), + openAutoFocus: () => true, + closeAutoFocus: () => true + }; + + const useDialog = (props, targetRef) => { + const instance = vue.getCurrentInstance(); + const emit = instance.emit; + const { nextZIndex } = useZIndex(); + let lastPosition = ""; + const titleId = useId(); + const bodyId = useId(); + const visible = vue.ref(false); + const closed = vue.ref(false); + const rendered = vue.ref(false); + const zIndex = vue.ref(props.zIndex || nextZIndex()); + let openTimer = void 0; + let closeTimer = void 0; + const namespace = useGlobalConfig("namespace", defaultNamespace); + const style = vue.computed(() => { + const style2 = {}; + const varPrefix = `--${namespace.value}-dialog`; + if (!props.fullscreen) { + if (props.top) { + style2[`${varPrefix}-margin-top`] = props.top; + } + if (props.width) { + style2[`${varPrefix}-width`] = addUnit(props.width); + } + } + return style2; + }); + const overlayDialogStyle = vue.computed(() => { + if (props.alignCenter) { + return { display: "flex" }; + } + return {}; + }); + function afterEnter() { + emit("opened"); + } + function afterLeave() { + emit("closed"); + emit(UPDATE_MODEL_EVENT, false); + if (props.destroyOnClose) { + rendered.value = false; + } + } + function beforeLeave() { + emit("close"); + } + function open() { + closeTimer == null ? void 0 : closeTimer(); + openTimer == null ? void 0 : openTimer(); + if (props.openDelay && props.openDelay > 0) { + ({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay)); + } else { + doOpen(); + } + } + function close() { + openTimer == null ? void 0 : openTimer(); + closeTimer == null ? void 0 : closeTimer(); + if (props.closeDelay && props.closeDelay > 0) { + ({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay)); + } else { + doClose(); + } + } + function handleClose() { + function hide(shouldCancel) { + if (shouldCancel) + return; + closed.value = true; + visible.value = false; + } + if (props.beforeClose) { + props.beforeClose(hide); + } else { + close(); + } + } + function onModalClick() { + if (props.closeOnClickModal) { + handleClose(); + } + } + function doOpen() { + if (!isClient) + return; + visible.value = true; + } + function doClose() { + visible.value = false; + } + function onOpenAutoFocus() { + emit("openAutoFocus"); + } + function onCloseAutoFocus() { + emit("closeAutoFocus"); + } + function onFocusoutPrevented(event) { + var _a; + if (((_a = event.detail) == null ? void 0 : _a.focusReason) === "pointer") { + event.preventDefault(); + } + } + if (props.lockScroll) { + useLockscreen(visible); + } + function onCloseRequested() { + if (props.closeOnPressEscape) { + handleClose(); + } + } + vue.watch(() => props.modelValue, (val) => { + if (val) { + closed.value = false; + open(); + rendered.value = true; + zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex(); + vue.nextTick(() => { + emit("open"); + if (targetRef.value) { + targetRef.value.scrollTop = 0; + } + }); + } else { + if (visible.value) { + close(); + } + } + }); + vue.watch(() => props.fullscreen, (val) => { + if (!targetRef.value) + return; + if (val) { + lastPosition = targetRef.value.style.transform; + targetRef.value.style.transform = ""; + } else { + targetRef.value.style.transform = lastPosition; + } + }); + vue.onMounted(() => { + if (props.modelValue) { + visible.value = true; + rendered.value = true; + open(); + } + }); + return { + afterEnter, + afterLeave, + beforeLeave, + handleClose, + onModalClick, + close, + doClose, + onOpenAutoFocus, + onCloseAutoFocus, + onCloseRequested, + onFocusoutPrevented, + titleId, + bodyId, + closed, + style, + overlayDialogStyle, + rendered, + visible, + zIndex + }; + }; + + const _hoisted_1$A = ["aria-label", "aria-labelledby", "aria-describedby"]; + const __default__$N = vue.defineComponent({ + name: "ElDialog", + inheritAttrs: false + }); + const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({ + ...__default__$N, + props: dialogProps, + emits: dialogEmits, + setup(__props, { expose }) { + const props = __props; + const slots = vue.useSlots(); + useDeprecated({ + scope: "el-dialog", + from: "the title slot", + replacement: "the header slot", + version: "3.0.0", + ref: "https://element-plus.org/en-US/component/dialog.html#slots" + }, vue.computed(() => !!slots.title)); + useDeprecated({ + scope: "el-dialog", + from: "custom-class", + replacement: "class", + version: "2.3.0", + ref: "https://element-plus.org/en-US/component/dialog.html#attributes", + type: "Attribute" + }, vue.computed(() => !!props.customClass)); + const ns = useNamespace("dialog"); + const dialogRef = vue.ref(); + const headerRef = vue.ref(); + const dialogContentRef = vue.ref(); + const { + visible, + titleId, + bodyId, + style, + overlayDialogStyle, + rendered, + zIndex, + afterEnter, + afterLeave, + beforeLeave, + handleClose, + onModalClick, + onOpenAutoFocus, + onCloseAutoFocus, + onCloseRequested, + onFocusoutPrevented + } = useDialog(props, dialogRef); + vue.provide(dialogInjectionKey, { + dialogRef, + headerRef, + bodyId, + ns, + rendered, + style + }); + const overlayEvent = useSameTarget(onModalClick); + const draggable = vue.computed(() => props.draggable && !props.fullscreen); + expose({ + visible, + dialogContentRef + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.Teleport, { + to: "body", + disabled: !_ctx.appendToBody + }, [ + vue.createVNode(vue.Transition, { + name: "dialog-fade", + onAfterEnter: vue.unref(afterEnter), + onAfterLeave: vue.unref(afterLeave), + onBeforeLeave: vue.unref(beforeLeave), + persisted: "" + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createVNode(vue.unref(ElOverlay), { + "custom-mask-event": "", + mask: _ctx.modal, + "overlay-class": _ctx.modalClass, + "z-index": vue.unref(zIndex) + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("div", { + role: "dialog", + "aria-modal": "true", + "aria-label": _ctx.title || void 0, + "aria-labelledby": !_ctx.title ? vue.unref(titleId) : void 0, + "aria-describedby": vue.unref(bodyId), + class: vue.normalizeClass(`${vue.unref(ns).namespace.value}-overlay-dialog`), + style: vue.normalizeStyle(vue.unref(overlayDialogStyle)), + onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(overlayEvent).onClick && vue.unref(overlayEvent).onClick(...args)), + onMousedown: _cache[1] || (_cache[1] = (...args) => vue.unref(overlayEvent).onMousedown && vue.unref(overlayEvent).onMousedown(...args)), + onMouseup: _cache[2] || (_cache[2] = (...args) => vue.unref(overlayEvent).onMouseup && vue.unref(overlayEvent).onMouseup(...args)) + }, [ + vue.createVNode(vue.unref(ElFocusTrap), { + loop: "", + trapped: vue.unref(visible), + "focus-start-el": "container", + onFocusAfterTrapped: vue.unref(onOpenAutoFocus), + onFocusAfterReleased: vue.unref(onCloseAutoFocus), + onFocusoutPrevented: vue.unref(onFocusoutPrevented), + onReleaseRequested: vue.unref(onCloseRequested) + }, { + default: vue.withCtx(() => [ + vue.unref(rendered) ? (vue.openBlock(), vue.createBlock(ElDialogContent, vue.mergeProps({ + key: 0, + ref_key: "dialogContentRef", + ref: dialogContentRef + }, _ctx.$attrs, { + "custom-class": _ctx.customClass, + center: _ctx.center, + "align-center": _ctx.alignCenter, + "close-icon": _ctx.closeIcon, + draggable: vue.unref(draggable), + fullscreen: _ctx.fullscreen, + "show-close": _ctx.showClose, + title: _ctx.title, + onClose: vue.unref(handleClose) + }), vue.createSlots({ + header: vue.withCtx(() => [ + !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", { + key: 0, + close: vue.unref(handleClose), + titleId: vue.unref(titleId), + titleClass: vue.unref(ns).e("title") + }) : vue.renderSlot(_ctx.$slots, "title", { key: 1 }) + ]), + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 2 + }, [ + _ctx.$slots.footer ? { + name: "footer", + fn: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "footer") + ]) + } : void 0 + ]), 1040, ["custom-class", "center", "align-center", "close-icon", "draggable", "fullscreen", "show-close", "title", "onClose"])) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"]) + ], 46, _hoisted_1$A) + ]), + _: 3 + }, 8, ["mask", "overlay-class", "z-index"]), [ + [vue.vShow, vue.unref(visible)] + ]) + ]), + _: 3 + }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"]) + ], 8, ["disabled"]); + }; + } + }); + var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["__file", "dialog.vue"]]); + + const ElDialog = withInstall(Dialog); + + const dividerProps = buildProps({ + direction: { + type: String, + values: ["horizontal", "vertical"], + default: "horizontal" + }, + contentPosition: { + type: String, + values: ["left", "center", "right"], + default: "center" + }, + borderStyle: { + type: definePropType(String), + default: "solid" + } + }); + + const __default__$M = vue.defineComponent({ + name: "ElDivider" + }); + const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({ + ...__default__$M, + props: dividerProps, + setup(__props) { + const props = __props; + const ns = useNamespace("divider"); + const dividerStyle = vue.computed(() => { + return ns.cssVar({ + "border-style": props.borderStyle + }); + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.direction)]), + style: vue.normalizeStyle(vue.unref(dividerStyle)), + role: "separator" + }, [ + _ctx.$slots.default && _ctx.direction !== "vertical" ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass([vue.unref(ns).e("text"), vue.unref(ns).is(_ctx.contentPosition)]) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2)) : vue.createCommentVNode("v-if", true) + ], 6); + }; + } + }); + var Divider = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__file", "divider.vue"]]); + + const ElDivider = withInstall(Divider); + + const drawerProps = buildProps({ + ...dialogProps, + direction: { + type: String, + default: "rtl", + values: ["ltr", "rtl", "ttb", "btt"] + }, + size: { + type: [String, Number], + default: "30%" + }, + withHeader: { + type: Boolean, + default: true + }, + modalFade: { + type: Boolean, + default: true + } + }); + const drawerEmits = dialogEmits; + + const _sfc_main$1a = vue.defineComponent({ + name: "ElDrawer", + components: { + ElOverlay, + ElFocusTrap, + ElIcon, + Close: close_default + }, + inheritAttrs: false, + props: drawerProps, + emits: drawerEmits, + setup(props, { slots }) { + useDeprecated({ + scope: "el-drawer", + from: "the title slot", + replacement: "the header slot", + version: "3.0.0", + ref: "https://element-plus.org/en-US/component/drawer.html#slots" + }, vue.computed(() => !!slots.title)); + useDeprecated({ + scope: "el-drawer", + from: "custom-class", + replacement: "class", + version: "2.3.0", + ref: "https://element-plus.org/en-US/component/drawer.html#attributes", + type: "Attribute" + }, vue.computed(() => !!props.customClass)); + const drawerRef = vue.ref(); + const focusStartRef = vue.ref(); + const ns = useNamespace("drawer"); + const { t } = useLocale(); + const isHorizontal = vue.computed(() => props.direction === "rtl" || props.direction === "ltr"); + const drawerSize = vue.computed(() => addUnit(props.size)); + return { + ...useDialog(props, drawerRef), + drawerRef, + focusStartRef, + isHorizontal, + drawerSize, + ns, + t + }; + } + }); + const _hoisted_1$z = ["aria-label", "aria-labelledby", "aria-describedby"]; + const _hoisted_2$m = ["id"]; + const _hoisted_3$a = ["aria-label"]; + const _hoisted_4$7 = ["id"]; + function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) { + const _component_close = vue.resolveComponent("close"); + const _component_el_icon = vue.resolveComponent("el-icon"); + const _component_el_focus_trap = vue.resolveComponent("el-focus-trap"); + const _component_el_overlay = vue.resolveComponent("el-overlay"); + return vue.openBlock(), vue.createBlock(vue.Teleport, { + to: "body", + disabled: !_ctx.appendToBody + }, [ + vue.createVNode(vue.Transition, { + name: _ctx.ns.b("fade"), + onAfterEnter: _ctx.afterEnter, + onAfterLeave: _ctx.afterLeave, + onBeforeLeave: _ctx.beforeLeave, + persisted: "" + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createVNode(_component_el_overlay, { + mask: _ctx.modal, + "overlay-class": _ctx.modalClass, + "z-index": _ctx.zIndex, + onClick: _ctx.onModalClick + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_el_focus_trap, { + loop: "", + trapped: _ctx.visible, + "focus-trap-el": _ctx.drawerRef, + "focus-start-el": _ctx.focusStartRef, + onReleaseRequested: _ctx.onCloseRequested + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("div", vue.mergeProps({ + ref: "drawerRef", + "aria-modal": "true", + "aria-label": _ctx.title || void 0, + "aria-labelledby": !_ctx.title ? _ctx.titleId : void 0, + "aria-describedby": _ctx.bodyId + }, _ctx.$attrs, { + class: [_ctx.ns.b(), _ctx.direction, _ctx.visible && "open", _ctx.customClass], + style: _ctx.isHorizontal ? "width: " + _ctx.drawerSize : "height: " + _ctx.drawerSize, + role: "dialog", + onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => { + }, ["stop"])) + }), [ + vue.createElementVNode("span", { + ref: "focusStartRef", + class: vue.normalizeClass(_ctx.ns.e("sr-focus")), + tabindex: "-1" + }, null, 2), + _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", { + key: 0, + class: vue.normalizeClass(_ctx.ns.e("header")) + }, [ + !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", { + key: 0, + close: _ctx.handleClose, + titleId: _ctx.titleId, + titleClass: _ctx.ns.e("title") + }, () => [ + !_ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + id: _ctx.titleId, + role: "heading", + class: vue.normalizeClass(_ctx.ns.e("title")) + }, vue.toDisplayString(_ctx.title), 11, _hoisted_2$m)) : vue.createCommentVNode("v-if", true) + ]) : vue.renderSlot(_ctx.$slots, "title", { key: 1 }, () => [ + vue.createCommentVNode(" DEPRECATED SLOT ") + ]), + _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", { + key: 2, + "aria-label": _ctx.t("el.drawer.close"), + class: vue.normalizeClass(_ctx.ns.e("close-btn")), + type: "button", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args)) + }, [ + vue.createVNode(_component_el_icon, { + class: vue.normalizeClass(_ctx.ns.e("close")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_close) + ]), + _: 1 + }, 8, ["class"]) + ], 10, _hoisted_3$a)) : vue.createCommentVNode("v-if", true) + ], 2)) : vue.createCommentVNode("v-if", true), + _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + id: _ctx.bodyId, + class: vue.normalizeClass(_ctx.ns.e("body")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 10, _hoisted_4$7)) : vue.createCommentVNode("v-if", true), + _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", { + key: 2, + class: vue.normalizeClass(_ctx.ns.e("footer")) + }, [ + vue.renderSlot(_ctx.$slots, "footer") + ], 2)) : vue.createCommentVNode("v-if", true) + ], 16, _hoisted_1$z) + ]), + _: 3 + }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"]) + ]), + _: 3 + }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [ + [vue.vShow, _ctx.visible] + ]) + ]), + _: 3 + }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"]) + ], 8, ["disabled"]); + } + var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$o], ["__file", "drawer.vue"]]); + + const ElDrawer = withInstall(Drawer); + + const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({ + inheritAttrs: false + }); + function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) { + return vue.renderSlot(_ctx.$slots, "default"); + } + var Collection = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$n], ["__file", "collection.vue"]]); + + const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({ + name: "ElCollectionItem", + inheritAttrs: false + }); + function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) { + return vue.renderSlot(_ctx.$slots, "default"); + } + var CollectionItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$m], ["__file", "collection-item.vue"]]); + + const COLLECTION_ITEM_SIGN = `data-el-collection-item`; + const createCollectionWithScope = (name) => { + const COLLECTION_NAME = `El${name}Collection`; + const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`; + const COLLECTION_INJECTION_KEY = Symbol(COLLECTION_NAME); + const COLLECTION_ITEM_INJECTION_KEY = Symbol(COLLECTION_ITEM_NAME); + const ElCollection = { + ...Collection, + name: COLLECTION_NAME, + setup() { + const collectionRef = vue.ref(null); + const itemMap = /* @__PURE__ */ new Map(); + const getItems = () => { + const collectionEl = vue.unref(collectionRef); + if (!collectionEl) + return []; + const orderedNodes = Array.from(collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`)); + const items = [...itemMap.values()]; + return items.sort((a, b) => orderedNodes.indexOf(a.ref) - orderedNodes.indexOf(b.ref)); + }; + vue.provide(COLLECTION_INJECTION_KEY, { + itemMap, + getItems, + collectionRef + }); + } + }; + const ElCollectionItem = { + ...CollectionItem, + name: COLLECTION_ITEM_NAME, + setup(_, { attrs }) { + const collectionItemRef = vue.ref(null); + const collectionInjection = vue.inject(COLLECTION_INJECTION_KEY, void 0); + vue.provide(COLLECTION_ITEM_INJECTION_KEY, { + collectionItemRef + }); + vue.onMounted(() => { + const collectionItemEl = vue.unref(collectionItemRef); + if (collectionItemEl) { + collectionInjection.itemMap.set(collectionItemEl, { + ref: collectionItemEl, + ...attrs + }); + } + }); + vue.onBeforeUnmount(() => { + const collectionItemEl = vue.unref(collectionItemRef); + collectionInjection.itemMap.delete(collectionItemEl); + }); + } + }; + return { + COLLECTION_INJECTION_KEY, + COLLECTION_ITEM_INJECTION_KEY, + ElCollection, + ElCollectionItem + }; + }; + + const rovingFocusGroupProps = buildProps({ + style: { type: definePropType([String, Array, Object]) }, + currentTabId: { + type: definePropType(String) + }, + defaultCurrentTabId: String, + loop: Boolean, + dir: { + type: String, + values: ["ltr", "rtl"], + default: "ltr" + }, + orientation: { + type: definePropType(String) + }, + onBlur: Function, + onFocus: Function, + onMousedown: Function + }); + const { + ElCollection: ElCollection$1, + ElCollectionItem: ElCollectionItem$1, + COLLECTION_INJECTION_KEY: COLLECTION_INJECTION_KEY$1, + COLLECTION_ITEM_INJECTION_KEY: COLLECTION_ITEM_INJECTION_KEY$1 + } = createCollectionWithScope("RovingFocusGroup"); + + const ROVING_FOCUS_GROUP_INJECTION_KEY = Symbol("elRovingFocusGroup"); + const ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY = Symbol("elRovingFocusGroupItem"); + + const MAP_KEY_TO_FOCUS_INTENT = { + ArrowLeft: "prev", + ArrowUp: "prev", + ArrowRight: "next", + ArrowDown: "next", + PageUp: "first", + Home: "first", + PageDown: "last", + End: "last" + }; + const getDirectionAwareKey = (key, dir) => { + if (dir !== "rtl") + return key; + switch (key) { + case EVENT_CODE.right: + return EVENT_CODE.left; + case EVENT_CODE.left: + return EVENT_CODE.right; + default: + return key; + } + }; + const getFocusIntent = (event, orientation, dir) => { + const key = getDirectionAwareKey(event.key, dir); + if (orientation === "vertical" && [EVENT_CODE.left, EVENT_CODE.right].includes(key)) + return void 0; + if (orientation === "horizontal" && [EVENT_CODE.up, EVENT_CODE.down].includes(key)) + return void 0; + return MAP_KEY_TO_FOCUS_INTENT[key]; + }; + const reorderArray = (array, atIdx) => { + return array.map((_, idx) => array[(idx + atIdx) % array.length]); + }; + const focusFirst = (elements) => { + const { activeElement: prevActive } = document; + for (const element of elements) { + if (element === prevActive) + return; + element.focus(); + if (prevActive !== document.activeElement) + return; + } + }; + + const CURRENT_TAB_ID_CHANGE_EVT = "currentTabIdChange"; + const ENTRY_FOCUS_EVT = "rovingFocusGroup.entryFocus"; + const EVT_OPTS = { bubbles: false, cancelable: true }; + const _sfc_main$17 = vue.defineComponent({ + name: "ElRovingFocusGroupImpl", + inheritAttrs: false, + props: rovingFocusGroupProps, + emits: [CURRENT_TAB_ID_CHANGE_EVT, "entryFocus"], + setup(props, { emit }) { + var _a; + const currentTabbedId = vue.ref((_a = props.currentTabId || props.defaultCurrentTabId) != null ? _a : null); + const isBackingOut = vue.ref(false); + const isClickFocus = vue.ref(false); + const rovingFocusGroupRef = vue.ref(null); + const { getItems } = vue.inject(COLLECTION_INJECTION_KEY$1, void 0); + const rovingFocusGroupRootStyle = vue.computed(() => { + return [ + { + outline: "none" + }, + props.style + ]; + }); + const onItemFocus = (tabbedId) => { + emit(CURRENT_TAB_ID_CHANGE_EVT, tabbedId); + }; + const onItemShiftTab = () => { + isBackingOut.value = true; + }; + const onMousedown = composeEventHandlers((e) => { + var _a2; + (_a2 = props.onMousedown) == null ? void 0 : _a2.call(props, e); + }, () => { + isClickFocus.value = true; + }); + const onFocus = composeEventHandlers((e) => { + var _a2; + (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e); + }, (e) => { + const isKeyboardFocus = !vue.unref(isClickFocus); + const { target, currentTarget } = e; + if (target === currentTarget && isKeyboardFocus && !vue.unref(isBackingOut)) { + const entryFocusEvt = new Event(ENTRY_FOCUS_EVT, EVT_OPTS); + currentTarget == null ? void 0 : currentTarget.dispatchEvent(entryFocusEvt); + if (!entryFocusEvt.defaultPrevented) { + const items = getItems().filter((item) => item.focusable); + const activeItem = items.find((item) => item.active); + const currentItem = items.find((item) => item.id === vue.unref(currentTabbedId)); + const candidates = [activeItem, currentItem, ...items].filter(Boolean); + const candidateNodes = candidates.map((item) => item.ref); + focusFirst(candidateNodes); + } + } + isClickFocus.value = false; + }); + const onBlur = composeEventHandlers((e) => { + var _a2; + (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e); + }, () => { + isBackingOut.value = false; + }); + const handleEntryFocus = (...args) => { + emit("entryFocus", ...args); + }; + vue.provide(ROVING_FOCUS_GROUP_INJECTION_KEY, { + currentTabbedId: vue.readonly(currentTabbedId), + loop: vue.toRef(props, "loop"), + tabIndex: vue.computed(() => { + return vue.unref(isBackingOut) ? -1 : 0; + }), + rovingFocusGroupRef, + rovingFocusGroupRootStyle, + orientation: vue.toRef(props, "orientation"), + dir: vue.toRef(props, "dir"), + onItemFocus, + onItemShiftTab, + onBlur, + onFocus, + onMousedown + }); + vue.watch(() => props.currentTabId, (val) => { + currentTabbedId.value = val != null ? val : null; + }); + useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus); + } + }); + function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) { + return vue.renderSlot(_ctx.$slots, "default"); + } + var ElRovingFocusGroupImpl = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$l], ["__file", "roving-focus-group-impl.vue"]]); + + const _sfc_main$16 = vue.defineComponent({ + name: "ElRovingFocusGroup", + components: { + ElFocusGroupCollection: ElCollection$1, + ElRovingFocusGroupImpl + } + }); + function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_roving_focus_group_impl = vue.resolveComponent("el-roving-focus-group-impl"); + const _component_el_focus_group_collection = vue.resolveComponent("el-focus-group-collection"); + return vue.openBlock(), vue.createBlock(_component_el_focus_group_collection, null, { + default: vue.withCtx(() => [ + vue.createVNode(_component_el_roving_focus_group_impl, vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 16) + ]), + _: 3 + }); + } + var ElRovingFocusGroup = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$k], ["__file", "roving-focus-group.vue"]]); + + const _sfc_main$15 = vue.defineComponent({ + components: { + ElRovingFocusCollectionItem: ElCollectionItem$1 + }, + props: { + focusable: { + type: Boolean, + default: true + }, + active: { + type: Boolean, + default: false + } + }, + emits: ["mousedown", "focus", "keydown"], + setup(props, { emit }) { + const { currentTabbedId, loop, onItemFocus, onItemShiftTab } = vue.inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0); + const { getItems } = vue.inject(COLLECTION_INJECTION_KEY$1, void 0); + const id = useId(); + const rovingFocusGroupItemRef = vue.ref(null); + const handleMousedown = composeEventHandlers((e) => { + emit("mousedown", e); + }, (e) => { + if (!props.focusable) { + e.preventDefault(); + } else { + onItemFocus(vue.unref(id)); + } + }); + const handleFocus = composeEventHandlers((e) => { + emit("focus", e); + }, () => { + onItemFocus(vue.unref(id)); + }); + const handleKeydown = composeEventHandlers((e) => { + emit("keydown", e); + }, (e) => { + const { key, shiftKey, target, currentTarget } = e; + if (key === EVENT_CODE.tab && shiftKey) { + onItemShiftTab(); + return; + } + if (target !== currentTarget) + return; + const focusIntent = getFocusIntent(e); + if (focusIntent) { + e.preventDefault(); + const items = getItems().filter((item) => item.focusable); + let elements = items.map((item) => item.ref); + switch (focusIntent) { + case "last": { + elements.reverse(); + break; + } + case "prev": + case "next": { + if (focusIntent === "prev") { + elements.reverse(); + } + const currentIdx = elements.indexOf(currentTarget); + elements = loop.value ? reorderArray(elements, currentIdx + 1) : elements.slice(currentIdx + 1); + break; + } + } + vue.nextTick(() => { + focusFirst(elements); + }); + } + }); + const isCurrentTab = vue.computed(() => currentTabbedId.value === vue.unref(id)); + vue.provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, { + rovingFocusGroupItemRef, + tabIndex: vue.computed(() => vue.unref(isCurrentTab) ? 0 : -1), + handleMousedown, + handleFocus, + handleKeydown + }); + return { + id, + handleKeydown, + handleFocus, + handleMousedown + }; + } + }); + function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_roving_focus_collection_item = vue.resolveComponent("el-roving-focus-collection-item"); + return vue.openBlock(), vue.createBlock(_component_el_roving_focus_collection_item, { + id: _ctx.id, + focusable: _ctx.focusable, + active: _ctx.active + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["id", "focusable", "active"]); + } + var ElRovingFocusItem = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$j], ["__file", "roving-focus-item.vue"]]); + + const dropdownProps = buildProps({ + trigger: useTooltipTriggerProps.trigger, + effect: { + ...useTooltipContentProps.effect, + default: "light" + }, + type: { + type: definePropType(String) + }, + placement: { + type: definePropType(String), + default: "bottom" + }, + popperOptions: { + type: definePropType(Object), + default: () => ({}) + }, + id: String, + size: { + type: String, + default: "" + }, + splitButton: Boolean, + hideOnClick: { + type: Boolean, + default: true + }, + loop: { + type: Boolean, + default: true + }, + showTimeout: { + type: Number, + default: 150 + }, + hideTimeout: { + type: Number, + default: 150 + }, + tabindex: { + type: definePropType([Number, String]), + default: 0 + }, + maxHeight: { + type: definePropType([Number, String]), + default: "" + }, + popperClass: { + type: String, + default: "" + }, + disabled: { + type: Boolean, + default: false + }, + role: { + type: String, + default: "menu" + }, + buttonProps: { + type: definePropType(Object) + }, + teleported: useTooltipContentProps.teleported + }); + const dropdownItemProps = buildProps({ + command: { + type: [Object, String, Number], + default: () => ({}) + }, + disabled: Boolean, + divided: Boolean, + textValue: String, + icon: { + type: iconPropType + } + }); + const dropdownMenuProps = buildProps({ + onKeydown: { type: definePropType(Function) } + }); + const FIRST_KEYS = [ + EVENT_CODE.down, + EVENT_CODE.pageDown, + EVENT_CODE.home + ]; + const LAST_KEYS = [EVENT_CODE.up, EVENT_CODE.pageUp, EVENT_CODE.end]; + const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS]; + const { + ElCollection, + ElCollectionItem, + COLLECTION_INJECTION_KEY, + COLLECTION_ITEM_INJECTION_KEY + } = createCollectionWithScope("Dropdown"); + + const DROPDOWN_INJECTION_KEY = Symbol("elDropdown"); + + const { ButtonGroup: ElButtonGroup } = ElButton; + const _sfc_main$14 = vue.defineComponent({ + name: "ElDropdown", + components: { + ElButton, + ElButtonGroup, + ElScrollbar, + ElDropdownCollection: ElCollection, + ElTooltip, + ElRovingFocusGroup, + ElOnlyChild: OnlyChild, + ElIcon, + ArrowDown: arrow_down_default + }, + props: dropdownProps, + emits: ["visible-change", "click", "command"], + setup(props, { emit }) { + const _instance = vue.getCurrentInstance(); + const ns = useNamespace("dropdown"); + const { t } = useLocale(); + const triggeringElementRef = vue.ref(); + const referenceElementRef = vue.ref(); + const popperRef = vue.ref(null); + const contentRef = vue.ref(null); + const scrollbar = vue.ref(null); + const currentTabId = vue.ref(null); + const isUsingKeyboard = vue.ref(false); + const triggerKeys = [EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.down]; + const wrapStyle = vue.computed(() => ({ + maxHeight: addUnit(props.maxHeight) + })); + const dropdownTriggerKls = vue.computed(() => [ns.m(dropdownSize.value)]); + const defaultTriggerId = useId().value; + const triggerId = vue.computed(() => { + return props.id || defaultTriggerId; + }); + vue.watch([triggeringElementRef, vue.toRef(props, "trigger")], ([triggeringElement, trigger], [prevTriggeringElement]) => { + var _a, _b, _c; + const triggerArray = isArray$1(trigger) ? trigger : [trigger]; + if ((_a = prevTriggeringElement == null ? void 0 : prevTriggeringElement.$el) == null ? void 0 : _a.removeEventListener) { + prevTriggeringElement.$el.removeEventListener("pointerenter", onAutofocusTriggerEnter); + } + if ((_b = triggeringElement == null ? void 0 : triggeringElement.$el) == null ? void 0 : _b.removeEventListener) { + triggeringElement.$el.removeEventListener("pointerenter", onAutofocusTriggerEnter); + } + if (((_c = triggeringElement == null ? void 0 : triggeringElement.$el) == null ? void 0 : _c.addEventListener) && triggerArray.includes("hover")) { + triggeringElement.$el.addEventListener("pointerenter", onAutofocusTriggerEnter); + } + }, { immediate: true }); + vue.onBeforeUnmount(() => { + var _a, _b; + if ((_b = (_a = triggeringElementRef.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.removeEventListener) { + triggeringElementRef.value.$el.removeEventListener("pointerenter", onAutofocusTriggerEnter); + } + }); + function handleClick() { + handleClose(); + } + function handleClose() { + var _a; + (_a = popperRef.value) == null ? void 0 : _a.onClose(); + } + function handleOpen() { + var _a; + (_a = popperRef.value) == null ? void 0 : _a.onOpen(); + } + const dropdownSize = useFormSize(); + function commandHandler(...args) { + emit("command", ...args); + } + function onAutofocusTriggerEnter() { + var _a, _b; + (_b = (_a = triggeringElementRef.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.focus(); + } + function onItemEnter() { + } + function onItemLeave() { + const contentEl = vue.unref(contentRef); + contentEl == null ? void 0 : contentEl.focus(); + currentTabId.value = null; + } + function handleCurrentTabIdChange(id) { + currentTabId.value = id; + } + function handleEntryFocus(e) { + if (!isUsingKeyboard.value) { + e.preventDefault(); + e.stopImmediatePropagation(); + } + } + function handleBeforeShowTooltip() { + emit("visible-change", true); + } + function handleShowTooltip(event) { + if ((event == null ? void 0 : event.type) === "keydown") { + contentRef.value.focus(); + } + } + function handleBeforeHideTooltip() { + emit("visible-change", false); + } + vue.provide(DROPDOWN_INJECTION_KEY, { + contentRef, + role: vue.computed(() => props.role), + triggerId, + isUsingKeyboard, + onItemEnter, + onItemLeave + }); + vue.provide("elDropdown", { + instance: _instance, + dropdownSize, + handleClick, + commandHandler, + trigger: vue.toRef(props, "trigger"), + hideOnClick: vue.toRef(props, "hideOnClick") + }); + const onFocusAfterTrapped = (e) => { + var _a, _b; + e.preventDefault(); + (_b = (_a = contentRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a, { + preventScroll: true + }); + }; + const handlerMainButtonClick = (event) => { + emit("click", event); + }; + return { + t, + ns, + scrollbar, + wrapStyle, + dropdownTriggerKls, + dropdownSize, + triggerId, + triggerKeys, + currentTabId, + handleCurrentTabIdChange, + handlerMainButtonClick, + handleEntryFocus, + handleClose, + handleOpen, + handleBeforeShowTooltip, + handleShowTooltip, + handleBeforeHideTooltip, + onFocusAfterTrapped, + popperRef, + contentRef, + triggeringElementRef, + referenceElementRef + }; + } + }); + function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) { + var _a; + const _component_el_dropdown_collection = vue.resolveComponent("el-dropdown-collection"); + const _component_el_roving_focus_group = vue.resolveComponent("el-roving-focus-group"); + const _component_el_scrollbar = vue.resolveComponent("el-scrollbar"); + const _component_el_only_child = vue.resolveComponent("el-only-child"); + const _component_el_tooltip = vue.resolveComponent("el-tooltip"); + const _component_el_button = vue.resolveComponent("el-button"); + const _component_arrow_down = vue.resolveComponent("arrow-down"); + const _component_el_icon = vue.resolveComponent("el-icon"); + const _component_el_button_group = vue.resolveComponent("el-button-group"); + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.is("disabled", _ctx.disabled)]) + }, [ + vue.createVNode(_component_el_tooltip, { + ref: "popperRef", + role: _ctx.role, + effect: _ctx.effect, + "fallback-placements": ["bottom", "top"], + "popper-options": _ctx.popperOptions, + "gpu-acceleration": false, + "hide-after": _ctx.trigger === "hover" ? _ctx.hideTimeout : 0, + "manual-mode": true, + placement: _ctx.placement, + "popper-class": [_ctx.ns.e("popper"), _ctx.popperClass], + "reference-element": (_a = _ctx.referenceElementRef) == null ? void 0 : _a.$el, + trigger: _ctx.trigger, + "trigger-keys": _ctx.triggerKeys, + "trigger-target-el": _ctx.contentRef, + "show-after": _ctx.trigger === "hover" ? _ctx.showTimeout : 0, + "stop-popper-mouse-event": false, + "virtual-ref": _ctx.triggeringElementRef, + "virtual-triggering": _ctx.splitButton, + disabled: _ctx.disabled, + transition: `${_ctx.ns.namespace.value}-zoom-in-top`, + teleported: _ctx.teleported, + pure: "", + persistent: "", + onBeforeShow: _ctx.handleBeforeShowTooltip, + onShow: _ctx.handleShowTooltip, + onBeforeHide: _ctx.handleBeforeHideTooltip + }, vue.createSlots({ + content: vue.withCtx(() => [ + vue.createVNode(_component_el_scrollbar, { + ref: "scrollbar", + "wrap-style": _ctx.wrapStyle, + tag: "div", + "view-class": _ctx.ns.e("list") + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_el_roving_focus_group, { + loop: _ctx.loop, + "current-tab-id": _ctx.currentTabId, + orientation: "horizontal", + onCurrentTabIdChange: _ctx.handleCurrentTabIdChange, + onEntryFocus: _ctx.handleEntryFocus + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_el_dropdown_collection, null, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "dropdown") + ]), + _: 3 + }) + ]), + _: 3 + }, 8, ["loop", "current-tab-id", "onCurrentTabIdChange", "onEntryFocus"]) + ]), + _: 3 + }, 8, ["wrap-style", "view-class"]) + ]), + _: 2 + }, [ + !_ctx.splitButton ? { + name: "default", + fn: vue.withCtx(() => [ + vue.createVNode(_component_el_only_child, { + id: _ctx.triggerId, + ref: "triggeringElementRef", + role: "button", + tabindex: _ctx.tabindex + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["id", "tabindex"]) + ]) + } : void 0 + ]), 1032, ["role", "effect", "popper-options", "hide-after", "placement", "popper-class", "reference-element", "trigger", "trigger-keys", "trigger-target-el", "show-after", "virtual-ref", "virtual-triggering", "disabled", "transition", "teleported", "onBeforeShow", "onShow", "onBeforeHide"]), + _ctx.splitButton ? (vue.openBlock(), vue.createBlock(_component_el_button_group, { key: 0 }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_el_button, vue.mergeProps({ ref: "referenceElementRef" }, _ctx.buttonProps, { + size: _ctx.dropdownSize, + type: _ctx.type, + disabled: _ctx.disabled, + tabindex: _ctx.tabindex, + onClick: _ctx.handlerMainButtonClick + }), { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 16, ["size", "type", "disabled", "tabindex", "onClick"]), + vue.createVNode(_component_el_button, vue.mergeProps({ + id: _ctx.triggerId, + ref: "triggeringElementRef" + }, _ctx.buttonProps, { + role: "button", + size: _ctx.dropdownSize, + type: _ctx.type, + class: _ctx.ns.e("caret-button"), + disabled: _ctx.disabled, + tabindex: _ctx.tabindex, + "aria-label": _ctx.t("el.dropdown.toggleDropdown") + }), { + default: vue.withCtx(() => [ + vue.createVNode(_component_el_icon, { + class: vue.normalizeClass(_ctx.ns.e("icon")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_arrow_down) + ]), + _: 1 + }, 8, ["class"]) + ]), + _: 1 + }, 16, ["id", "size", "type", "class", "disabled", "tabindex", "aria-label"]) + ]), + _: 3 + })) : vue.createCommentVNode("v-if", true) + ], 2); + } + var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$i], ["__file", "dropdown.vue"]]); + + const _sfc_main$13 = vue.defineComponent({ + name: "DropdownItemImpl", + components: { + ElIcon + }, + props: dropdownItemProps, + emits: ["pointermove", "pointerleave", "click", "clickimpl"], + setup(_, { emit }) { + const ns = useNamespace("dropdown"); + const { role: menuRole } = vue.inject(DROPDOWN_INJECTION_KEY, void 0); + const { collectionItemRef: dropdownCollectionItemRef } = vue.inject(COLLECTION_ITEM_INJECTION_KEY, void 0); + const { collectionItemRef: rovingFocusCollectionItemRef } = vue.inject(COLLECTION_ITEM_INJECTION_KEY$1, void 0); + const { + rovingFocusGroupItemRef, + tabIndex, + handleFocus, + handleKeydown: handleItemKeydown, + handleMousedown + } = vue.inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, void 0); + const itemRef = composeRefs(dropdownCollectionItemRef, rovingFocusCollectionItemRef, rovingFocusGroupItemRef); + const role = vue.computed(() => { + if (menuRole.value === "menu") { + return "menuitem"; + } else if (menuRole.value === "navigation") { + return "link"; + } + return "button"; + }); + const handleKeydown = composeEventHandlers((e) => { + const { code } = e; + if (code === EVENT_CODE.enter || code === EVENT_CODE.space) { + e.preventDefault(); + e.stopImmediatePropagation(); + emit("clickimpl", e); + return true; + } + }, handleItemKeydown); + return { + ns, + itemRef, + dataset: { + [COLLECTION_ITEM_SIGN]: "" + }, + role, + tabIndex, + handleFocus, + handleKeydown, + handleMousedown + }; + } + }); + const _hoisted_1$y = ["aria-disabled", "tabindex", "role"]; + function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_icon = vue.resolveComponent("el-icon"); + return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [ + _ctx.divided ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({ + key: 0, + role: "separator", + class: _ctx.ns.bem("menu", "item", "divided") + }, _ctx.$attrs), null, 16)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("li", vue.mergeProps({ ref: _ctx.itemRef }, { ..._ctx.dataset, ..._ctx.$attrs }, { + "aria-disabled": _ctx.disabled, + class: [_ctx.ns.be("menu", "item"), _ctx.ns.is("disabled", _ctx.disabled)], + tabindex: _ctx.tabIndex, + role: _ctx.role, + onClick: _cache[0] || (_cache[0] = (e) => _ctx.$emit("clickimpl", e)), + onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)), + onKeydown: _cache[2] || (_cache[2] = vue.withModifiers((...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args), ["self"])), + onMousedown: _cache[3] || (_cache[3] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args)), + onPointermove: _cache[4] || (_cache[4] = (e) => _ctx.$emit("pointermove", e)), + onPointerleave: _cache[5] || (_cache[5] = (e) => _ctx.$emit("pointerleave", e)) + }), [ + _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) + ]), + _: 1 + })) : vue.createCommentVNode("v-if", true), + vue.renderSlot(_ctx.$slots, "default") + ], 16, _hoisted_1$y) + ], 64); + } + var ElDropdownItemImpl = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$h], ["__file", "dropdown-item-impl.vue"]]); + + const useDropdown = () => { + const elDropdown = vue.inject("elDropdown", {}); + const _elDropdownSize = vue.computed(() => elDropdown == null ? void 0 : elDropdown.dropdownSize); + return { + elDropdown, + _elDropdownSize + }; + }; + + const _sfc_main$12 = vue.defineComponent({ + name: "ElDropdownItem", + components: { + ElDropdownCollectionItem: ElCollectionItem, + ElRovingFocusItem, + ElDropdownItemImpl + }, + inheritAttrs: false, + props: dropdownItemProps, + emits: ["pointermove", "pointerleave", "click"], + setup(props, { emit, attrs }) { + const { elDropdown } = useDropdown(); + const _instance = vue.getCurrentInstance(); + const itemRef = vue.ref(null); + const textContent = vue.computed(() => { + var _a, _b; + return (_b = (_a = vue.unref(itemRef)) == null ? void 0 : _a.textContent) != null ? _b : ""; + }); + const { onItemEnter, onItemLeave } = vue.inject(DROPDOWN_INJECTION_KEY, void 0); + const handlePointerMove = composeEventHandlers((e) => { + emit("pointermove", e); + return e.defaultPrevented; + }, whenMouse((e) => { + if (props.disabled) { + onItemLeave(e); + return; + } + const target = e.currentTarget; + if (target === document.activeElement || target.contains(document.activeElement)) { + return; + } + onItemEnter(e); + if (!e.defaultPrevented) { + target == null ? void 0 : target.focus(); + } + })); + const handlePointerLeave = composeEventHandlers((e) => { + emit("pointerleave", e); + return e.defaultPrevented; + }, whenMouse((e) => { + onItemLeave(e); + })); + const handleClick = composeEventHandlers((e) => { + if (props.disabled) { + return; + } + emit("click", e); + return e.type !== "keydown" && e.defaultPrevented; + }, (e) => { + var _a, _b, _c; + if (props.disabled) { + e.stopImmediatePropagation(); + return; + } + if ((_a = elDropdown == null ? void 0 : elDropdown.hideOnClick) == null ? void 0 : _a.value) { + (_b = elDropdown.handleClick) == null ? void 0 : _b.call(elDropdown); + } + (_c = elDropdown.commandHandler) == null ? void 0 : _c.call(elDropdown, props.command, _instance, e); + }); + const propsAndAttrs = vue.computed(() => { + return { ...props, ...attrs }; + }); + return { + handleClick, + handlePointerMove, + handlePointerLeave, + textContent, + propsAndAttrs + }; + } + }); + function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) { + var _a; + const _component_el_dropdown_item_impl = vue.resolveComponent("el-dropdown-item-impl"); + const _component_el_roving_focus_item = vue.resolveComponent("el-roving-focus-item"); + const _component_el_dropdown_collection_item = vue.resolveComponent("el-dropdown-collection-item"); + return vue.openBlock(), vue.createBlock(_component_el_dropdown_collection_item, { + disabled: _ctx.disabled, + "text-value": (_a = _ctx.textValue) != null ? _a : _ctx.textContent + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_el_roving_focus_item, { + focusable: !_ctx.disabled + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_el_dropdown_item_impl, vue.mergeProps(_ctx.propsAndAttrs, { + onPointerleave: _ctx.handlePointerLeave, + onPointermove: _ctx.handlePointerMove, + onClickimpl: _ctx.handleClick + }), { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 16, ["onPointerleave", "onPointermove", "onClickimpl"]) + ]), + _: 3 + }, 8, ["focusable"]) + ]), + _: 3 + }, 8, ["disabled", "text-value"]); + } + var DropdownItem = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$g], ["__file", "dropdown-item.vue"]]); + + const _sfc_main$11 = vue.defineComponent({ + name: "ElDropdownMenu", + props: dropdownMenuProps, + setup(props) { + const ns = useNamespace("dropdown"); + const { _elDropdownSize } = useDropdown(); + const size = _elDropdownSize.value; + const { focusTrapRef, onKeydown } = vue.inject(FOCUS_TRAP_INJECTION_KEY, void 0); + const { contentRef, role, triggerId } = vue.inject(DROPDOWN_INJECTION_KEY, void 0); + const { collectionRef: dropdownCollectionRef, getItems } = vue.inject(COLLECTION_INJECTION_KEY, void 0); + const { + rovingFocusGroupRef, + rovingFocusGroupRootStyle, + tabIndex, + onBlur, + onFocus, + onMousedown + } = vue.inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0); + const { collectionRef: rovingFocusGroupCollectionRef } = vue.inject(COLLECTION_INJECTION_KEY$1, void 0); + const dropdownKls = vue.computed(() => { + return [ns.b("menu"), ns.bm("menu", size == null ? void 0 : size.value)]; + }); + const dropdownListWrapperRef = composeRefs(contentRef, dropdownCollectionRef, focusTrapRef, rovingFocusGroupRef, rovingFocusGroupCollectionRef); + const composedKeydown = composeEventHandlers((e) => { + var _a; + (_a = props.onKeydown) == null ? void 0 : _a.call(props, e); + }, (e) => { + const { currentTarget, code, target } = e; + currentTarget.contains(target); + if (EVENT_CODE.tab === code) { + e.stopImmediatePropagation(); + } + e.preventDefault(); + if (target !== vue.unref(contentRef)) + return; + if (!FIRST_LAST_KEYS.includes(code)) + return; + const items = getItems().filter((item) => !item.disabled); + const targets = items.map((item) => item.ref); + if (LAST_KEYS.includes(code)) { + targets.reverse(); + } + focusFirst(targets); + }); + const handleKeydown = (e) => { + composedKeydown(e); + onKeydown(e); + }; + return { + size, + rovingFocusGroupRootStyle, + tabIndex, + dropdownKls, + role, + triggerId, + dropdownListWrapperRef, + handleKeydown, + onBlur, + onFocus, + onMousedown + }; + } + }); + const _hoisted_1$x = ["role", "aria-labelledby"]; + function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("ul", { + ref: _ctx.dropdownListWrapperRef, + class: vue.normalizeClass(_ctx.dropdownKls), + style: vue.normalizeStyle(_ctx.rovingFocusGroupRootStyle), + tabindex: -1, + role: _ctx.role, + "aria-labelledby": _ctx.triggerId, + onBlur: _cache[0] || (_cache[0] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)), + onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)), + onKeydown: _cache[2] || (_cache[2] = vue.withModifiers((...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args), ["self"])), + onMousedown: _cache[3] || (_cache[3] = vue.withModifiers((...args) => _ctx.onMousedown && _ctx.onMousedown(...args), ["self"])) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 46, _hoisted_1$x); + } + var DropdownMenu = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$f], ["__file", "dropdown-menu.vue"]]); + + const ElDropdown = withInstall(Dropdown, { + DropdownItem, + DropdownMenu + }); + const ElDropdownItem = withNoopInstall(DropdownItem); + const ElDropdownMenu = withNoopInstall(DropdownMenu); + + const _hoisted_1$w = { + viewBox: "0 0 79 86", + version: "1.1", + xmlns: "http://www.w3.org/2000/svg", + "xmlns:xlink": "http://www.w3.org/1999/xlink" + }; + const _hoisted_2$l = ["id"]; + const _hoisted_3$9 = ["stop-color"]; + const _hoisted_4$6 = ["stop-color"]; + const _hoisted_5$5 = ["id"]; + const _hoisted_6$1 = ["stop-color"]; + const _hoisted_7 = ["stop-color"]; + const _hoisted_8 = ["id"]; + const _hoisted_9 = { + id: "Illustrations", + stroke: "none", + "stroke-width": "1", + fill: "none", + "fill-rule": "evenodd" + }; + const _hoisted_10 = { + id: "B-type", + transform: "translate(-1268.000000, -535.000000)" + }; + const _hoisted_11 = { + id: "Group-2", + transform: "translate(1268.000000, 535.000000)" + }; + const _hoisted_12 = ["fill"]; + const _hoisted_13 = ["fill"]; + const _hoisted_14 = { + id: "Group-Copy", + transform: "translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)" + }; + const _hoisted_15 = ["fill"]; + const _hoisted_16 = ["fill"]; + const _hoisted_17 = ["fill"]; + const _hoisted_18 = ["fill"]; + const _hoisted_19 = ["fill"]; + const _hoisted_20 = { + id: "Rectangle-Copy-17", + transform: "translate(53.000000, 45.000000)" + }; + const _hoisted_21 = ["fill", "xlink:href"]; + const _hoisted_22 = ["fill", "mask"]; + const _hoisted_23 = ["fill"]; + const __default__$L = vue.defineComponent({ + name: "ImgEmpty" + }); + const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$L, + setup(__props) { + const ns = useNamespace("empty"); + const id = useId(); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$w, [ + vue.createElementVNode("defs", null, [ + vue.createElementVNode("linearGradient", { + id: `linearGradient-1-${vue.unref(id)}`, + x1: "38.8503086%", + y1: "0%", + x2: "61.1496914%", + y2: "100%" + }, [ + vue.createElementVNode("stop", { + "stop-color": `var(${vue.unref(ns).cssVarBlockName("fill-color-1")})`, + offset: "0%" + }, null, 8, _hoisted_3$9), + vue.createElementVNode("stop", { + "stop-color": `var(${vue.unref(ns).cssVarBlockName("fill-color-4")})`, + offset: "100%" + }, null, 8, _hoisted_4$6) + ], 8, _hoisted_2$l), + vue.createElementVNode("linearGradient", { + id: `linearGradient-2-${vue.unref(id)}`, + x1: "0%", + y1: "9.5%", + x2: "100%", + y2: "90.5%" + }, [ + vue.createElementVNode("stop", { + "stop-color": `var(${vue.unref(ns).cssVarBlockName("fill-color-1")})`, + offset: "0%" + }, null, 8, _hoisted_6$1), + vue.createElementVNode("stop", { + "stop-color": `var(${vue.unref(ns).cssVarBlockName("fill-color-6")})`, + offset: "100%" + }, null, 8, _hoisted_7) + ], 8, _hoisted_5$5), + vue.createElementVNode("rect", { + id: `path-3-${vue.unref(id)}`, + x: "0", + y: "0", + width: "17", + height: "36" + }, null, 8, _hoisted_8) + ]), + vue.createElementVNode("g", _hoisted_9, [ + vue.createElementVNode("g", _hoisted_10, [ + vue.createElementVNode("g", _hoisted_11, [ + vue.createElementVNode("path", { + id: "Oval-Copy-2", + d: "M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z", + fill: `var(${vue.unref(ns).cssVarBlockName("fill-color-3")})` + }, null, 8, _hoisted_12), + vue.createElementVNode("polygon", { + id: "Rectangle-Copy-14", + fill: `var(${vue.unref(ns).cssVarBlockName("fill-color-7")})`, + transform: "translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) ", + points: "13 58 53 58 42 45 2 45" + }, null, 8, _hoisted_13), + vue.createElementVNode("g", _hoisted_14, [ + vue.createElementVNode("polygon", { + id: "Rectangle-Copy-10", + fill: `var(${vue.unref(ns).cssVarBlockName("fill-color-7")})`, + transform: "translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) ", + points: "2.84078316e-14 3 18 3 23 7 5 7" + }, null, 8, _hoisted_15), + vue.createElementVNode("polygon", { + id: "Rectangle-Copy-11", + fill: `var(${vue.unref(ns).cssVarBlockName("fill-color-5")})`, + points: "-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43" + }, null, 8, _hoisted_16), + vue.createElementVNode("rect", { + id: "Rectangle-Copy-12", + fill: `url(#linearGradient-1-${vue.unref(id)})`, + transform: "translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) ", + x: "38", + y: "7", + width: "17", + height: "36" + }, null, 8, _hoisted_17), + vue.createElementVNode("polygon", { + id: "Rectangle-Copy-13", + fill: `var(${vue.unref(ns).cssVarBlockName("fill-color-2")})`, + transform: "translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) ", + points: "24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12" + }, null, 8, _hoisted_18) + ]), + vue.createElementVNode("rect", { + id: "Rectangle-Copy-15", + fill: `url(#linearGradient-2-${vue.unref(id)})`, + x: "13", + y: "45", + width: "40", + height: "36" + }, null, 8, _hoisted_19), + vue.createElementVNode("g", _hoisted_20, [ + vue.createElementVNode("use", { + id: "Mask", + fill: `var(${vue.unref(ns).cssVarBlockName("fill-color-8")})`, + transform: "translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) ", + "xlink:href": `#path-3-${vue.unref(id)}` + }, null, 8, _hoisted_21), + vue.createElementVNode("polygon", { + id: "Rectangle-Copy", + fill: `var(${vue.unref(ns).cssVarBlockName("fill-color-9")})`, + mask: `url(#mask-4-${vue.unref(id)})`, + transform: "translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) ", + points: "7 0 24 0 20 18 7 16.5" + }, null, 8, _hoisted_22) + ]), + vue.createElementVNode("polygon", { + id: "Rectangle-Copy-18", + fill: `var(${vue.unref(ns).cssVarBlockName("fill-color-2")})`, + transform: "translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) ", + points: "62 45 79 45 70 58 53 58" + }, null, 8, _hoisted_23) + ]) + ]) + ]) + ]); + }; + } + }); + var ImgEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__file", "img-empty.vue"]]); + + const emptyProps = buildProps({ + image: { + type: String, + default: "" + }, + imageSize: Number, + description: { + type: String, + default: "" + } + }); + + const _hoisted_1$v = ["src"]; + const _hoisted_2$k = { key: 1 }; + const __default__$K = vue.defineComponent({ + name: "ElEmpty" + }); + const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({ + ...__default__$K, + props: emptyProps, + setup(__props) { + const props = __props; + const { t } = useLocale(); + const ns = useNamespace("empty"); + const emptyDescription = vue.computed(() => props.description || t("el.table.emptyText")); + const imageStyle = vue.computed(() => ({ + width: addUnit(props.imageSize) + })); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(ns).b()) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("image")), + style: vue.normalizeStyle(vue.unref(imageStyle)) + }, [ + _ctx.image ? (vue.openBlock(), vue.createElementBlock("img", { + key: 0, + src: _ctx.image, + ondragstart: "return false" + }, null, 8, _hoisted_1$v)) : vue.renderSlot(_ctx.$slots, "image", { key: 1 }, () => [ + vue.createVNode(ImgEmpty) + ]) + ], 6), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("description")) + }, [ + _ctx.$slots.description ? vue.renderSlot(_ctx.$slots, "description", { key: 0 }) : (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$k, vue.toDisplayString(vue.unref(emptyDescription)), 1)) + ], 2), + _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("bottom")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2)) : vue.createCommentVNode("v-if", true) + ], 2); + }; + } + }); + var Empty = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__file", "empty.vue"]]); + + const ElEmpty = withInstall(Empty); + + const imageViewerProps = buildProps({ + urlList: { + type: definePropType(Array), + default: () => mutable([]) + }, + zIndex: { + type: Number + }, + initialIndex: { + type: Number, + default: 0 + }, + infinite: { + type: Boolean, + default: true + }, + hideOnClickModal: { + type: Boolean, + default: false + }, + teleported: { + type: Boolean, + default: false + }, + closeOnPressEscape: { + type: Boolean, + default: true + }, + zoomRate: { + type: Number, + default: 1.2 + } + }); + const imageViewerEmits = { + close: () => true, + switch: (index) => isNumber$1(index) + }; + + const _hoisted_1$u = ["src"]; + const __default__$J = vue.defineComponent({ + name: "ElImageViewer" + }); + const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({ + ...__default__$J, + props: imageViewerProps, + emits: imageViewerEmits, + setup(__props, { expose, emit }) { + const props = __props; + const modes = { + CONTAIN: { + name: "contain", + icon: vue.markRaw(full_screen_default) + }, + ORIGINAL: { + name: "original", + icon: vue.markRaw(scale_to_original_default) + } + }; + const { t } = useLocale(); + const ns = useNamespace("image-viewer"); + const { nextZIndex } = useZIndex(); + const wrapper = vue.ref(); + const imgRefs = vue.ref([]); + const scopeEventListener = vue.effectScope(); + const loading = vue.ref(true); + const activeIndex = vue.ref(props.initialIndex); + const mode = vue.shallowRef(modes.CONTAIN); + const transform = vue.ref({ + scale: 1, + deg: 0, + offsetX: 0, + offsetY: 0, + enableTransition: false + }); + const isSingle = vue.computed(() => { + const { urlList } = props; + return urlList.length <= 1; + }); + const isFirst = vue.computed(() => { + return activeIndex.value === 0; + }); + const isLast = vue.computed(() => { + return activeIndex.value === props.urlList.length - 1; + }); + const currentImg = vue.computed(() => { + return props.urlList[activeIndex.value]; + }); + const imgStyle = vue.computed(() => { + const { scale, deg, offsetX, offsetY, enableTransition } = transform.value; + let translateX = offsetX / scale; + let translateY = offsetY / scale; + switch (deg % 360) { + case 90: + case -270: + [translateX, translateY] = [translateY, -translateX]; + break; + case 180: + case -180: + [translateX, translateY] = [-translateX, -translateY]; + break; + case 270: + case -90: + [translateX, translateY] = [-translateY, translateX]; + break; + } + const style = { + transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`, + transition: enableTransition ? "transform .3s" : "" + }; + if (mode.value.name === modes.CONTAIN.name) { + style.maxWidth = style.maxHeight = "100%"; + } + return style; + }); + const computedZIndex = vue.computed(() => { + return isNumber$1(props.zIndex) ? props.zIndex : nextZIndex(); + }); + function hide() { + unregisterEventListener(); + emit("close"); + } + function registerEventListener() { + const keydownHandler = throttle((e) => { + switch (e.code) { + case EVENT_CODE.esc: + props.closeOnPressEscape && hide(); + break; + case EVENT_CODE.space: + toggleMode(); + break; + case EVENT_CODE.left: + prev(); + break; + case EVENT_CODE.up: + handleActions("zoomIn"); + break; + case EVENT_CODE.right: + next(); + break; + case EVENT_CODE.down: + handleActions("zoomOut"); + break; + } + }); + const mousewheelHandler = throttle((e) => { + const delta = e.deltaY || e.deltaX; + handleActions(delta < 0 ? "zoomIn" : "zoomOut", { + zoomRate: props.zoomRate, + enableTransition: false + }); + }); + scopeEventListener.run(() => { + useEventListener(document, "keydown", keydownHandler); + useEventListener(document, "wheel", mousewheelHandler); + }); + } + function unregisterEventListener() { + scopeEventListener.stop(); + } + function handleImgLoad() { + loading.value = false; + } + function handleImgError(e) { + loading.value = false; + e.target.alt = t("el.image.error"); + } + function handleMouseDown(e) { + if (loading.value || e.button !== 0 || !wrapper.value) + return; + transform.value.enableTransition = false; + const { offsetX, offsetY } = transform.value; + const startX = e.pageX; + const startY = e.pageY; + const dragHandler = throttle((ev) => { + transform.value = { + ...transform.value, + offsetX: offsetX + ev.pageX - startX, + offsetY: offsetY + ev.pageY - startY + }; + }); + const removeMousemove = useEventListener(document, "mousemove", dragHandler); + useEventListener(document, "mouseup", () => { + removeMousemove(); + }); + e.preventDefault(); + } + function reset() { + transform.value = { + scale: 1, + deg: 0, + offsetX: 0, + offsetY: 0, + enableTransition: false + }; + } + function toggleMode() { + if (loading.value) + return; + const modeNames = keysOf(modes); + const modeValues = Object.values(modes); + const currentMode = mode.value.name; + const index = modeValues.findIndex((i) => i.name === currentMode); + const nextIndex = (index + 1) % modeNames.length; + mode.value = modes[modeNames[nextIndex]]; + reset(); + } + function setActiveItem(index) { + const len = props.urlList.length; + activeIndex.value = (index + len) % len; + } + function prev() { + if (isFirst.value && !props.infinite) + return; + setActiveItem(activeIndex.value - 1); + } + function next() { + if (isLast.value && !props.infinite) + return; + setActiveItem(activeIndex.value + 1); + } + function handleActions(action, options = {}) { + if (loading.value) + return; + const { zoomRate, rotateDeg, enableTransition } = { + zoomRate: props.zoomRate, + rotateDeg: 90, + enableTransition: true, + ...options + }; + switch (action) { + case "zoomOut": + if (transform.value.scale > 0.2) { + transform.value.scale = Number.parseFloat((transform.value.scale / zoomRate).toFixed(3)); + } + break; + case "zoomIn": + if (transform.value.scale < 7) { + transform.value.scale = Number.parseFloat((transform.value.scale * zoomRate).toFixed(3)); + } + break; + case "clockwise": + transform.value.deg += rotateDeg; + break; + case "anticlockwise": + transform.value.deg -= rotateDeg; + break; + } + transform.value.enableTransition = enableTransition; + } + vue.watch(currentImg, () => { + vue.nextTick(() => { + const $img = imgRefs.value[0]; + if (!($img == null ? void 0 : $img.complete)) { + loading.value = true; + } + }); + }); + vue.watch(activeIndex, (val) => { + reset(); + emit("switch", val); + }); + vue.onMounted(() => { + var _a, _b; + registerEventListener(); + (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a); + }); + expose({ + setActiveItem + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.Teleport, { + to: "body", + disabled: !_ctx.teleported + }, [ + vue.createVNode(vue.Transition, { + name: "viewer-fade", + appear: "" + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("div", { + ref_key: "wrapper", + ref: wrapper, + tabindex: -1, + class: vue.normalizeClass(vue.unref(ns).e("wrapper")), + style: vue.normalizeStyle({ zIndex: vue.unref(computedZIndex) }) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("mask")), + onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"])) + }, null, 2), + vue.createCommentVNode(" CLOSE "), + vue.createElementVNode("span", { + class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")]), + onClick: hide + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(close_default)) + ]), + _: 1 + }) + ], 2), + vue.createCommentVNode(" ARROW "), + !vue.unref(isSingle) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass([ + vue.unref(ns).e("btn"), + vue.unref(ns).e("prev"), + vue.unref(ns).is("disabled", !_ctx.infinite && vue.unref(isFirst)) + ]), + onClick: prev + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_left_default)) + ]), + _: 1 + }) + ], 2), + vue.createElementVNode("span", { + class: vue.normalizeClass([ + vue.unref(ns).e("btn"), + vue.unref(ns).e("next"), + vue.unref(ns).is("disabled", !_ctx.infinite && vue.unref(isLast)) + ]), + onClick: next + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_right_default)) + ]), + _: 1 + }) + ], 2) + ], 64)) : vue.createCommentVNode("v-if", true), + vue.createCommentVNode(" ACTIONS "), + vue.createElementVNode("div", { + class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")]) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("actions__inner")) + }, [ + vue.createVNode(vue.unref(ElIcon), { + onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(zoom_out_default)) + ]), + _: 1 + }), + vue.createVNode(vue.unref(ElIcon), { + onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(zoom_in_default)) + ]), + _: 1 + }), + vue.createElementVNode("i", { + class: vue.normalizeClass(vue.unref(ns).e("actions__divider")) + }, null, 2), + vue.createVNode(vue.unref(ElIcon), { onClick: toggleMode }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(mode).icon))) + ]), + _: 1 + }), + vue.createElementVNode("i", { + class: vue.normalizeClass(vue.unref(ns).e("actions__divider")) + }, null, 2), + vue.createVNode(vue.unref(ElIcon), { + onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(refresh_left_default)) + ]), + _: 1 + }), + vue.createVNode(vue.unref(ElIcon), { + onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(refresh_right_default)) + ]), + _: 1 + }) + ], 2) + ], 2), + vue.createCommentVNode(" CANVAS "), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("canvas")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => { + return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", { + ref_for: true, + ref: (el) => imgRefs.value[i] = el, + key: url, + src: url, + style: vue.normalizeStyle(vue.unref(imgStyle)), + class: vue.normalizeClass(vue.unref(ns).e("img")), + onLoad: handleImgLoad, + onError: handleImgError, + onMousedown: handleMouseDown + }, null, 46, _hoisted_1$u)), [ + [vue.vShow, i === activeIndex.value] + ]); + }), 128)) + ], 2), + vue.renderSlot(_ctx.$slots, "default") + ], 6) + ]), + _: 3 + }) + ], 8, ["disabled"]); + }; + } + }); + var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__file", "image-viewer.vue"]]); + + const ElImageViewer = withInstall(ImageViewer); + + const imageProps = buildProps({ + hideOnClickModal: { + type: Boolean, + default: false + }, + src: { + type: String, + default: "" + }, + fit: { + type: String, + values: ["", "contain", "cover", "fill", "none", "scale-down"], + default: "" + }, + loading: { + type: String, + values: ["eager", "lazy"] + }, + lazy: { + type: Boolean, + default: false + }, + scrollContainer: { + type: definePropType([String, Object]) + }, + previewSrcList: { + type: definePropType(Array), + default: () => mutable([]) + }, + previewTeleported: { + type: Boolean, + default: false + }, + zIndex: { + type: Number + }, + initialIndex: { + type: Number, + default: 0 + }, + infinite: { + type: Boolean, + default: true + }, + closeOnPressEscape: { + type: Boolean, + default: true + }, + zoomRate: { + type: Number, + default: 1.2 + } + }); + const imageEmits = { + load: (evt) => evt instanceof Event, + error: (evt) => evt instanceof Event, + switch: (val) => isNumber$1(val), + close: () => true, + show: () => true + }; + + const _hoisted_1$t = ["src", "loading"]; + const _hoisted_2$j = { key: 0 }; + const __default__$I = vue.defineComponent({ + name: "ElImage", + inheritAttrs: false + }); + const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({ + ...__default__$I, + props: imageProps, + emits: imageEmits, + setup(__props, { emit }) { + const props = __props; + let prevOverflow = ""; + const { t } = useLocale(); + const ns = useNamespace("image"); + const rawAttrs = vue.useAttrs(); + const attrs = useAttrs(); + const imageSrc = vue.ref(); + const hasLoadError = vue.ref(false); + const isLoading = vue.ref(true); + const showViewer = vue.ref(false); + const container = vue.ref(); + const _scrollContainer = vue.ref(); + const supportLoading = isClient && "loading" in HTMLImageElement.prototype; + let stopScrollListener; + let stopWheelListener; + const containerStyle = vue.computed(() => rawAttrs.style); + const imageStyle = vue.computed(() => { + const { fit } = props; + if (isClient && fit) { + return { objectFit: fit }; + } + return {}; + }); + const preview = vue.computed(() => { + const { previewSrcList } = props; + return Array.isArray(previewSrcList) && previewSrcList.length > 0; + }); + const imageIndex = vue.computed(() => { + const { previewSrcList, initialIndex } = props; + let previewIndex = initialIndex; + if (initialIndex > previewSrcList.length - 1) { + previewIndex = 0; + } + return previewIndex; + }); + const isManual = vue.computed(() => { + if (props.loading === "eager") + return false; + return !supportLoading && props.loading === "lazy" || props.lazy; + }); + const loadImage = () => { + if (!isClient) + return; + isLoading.value = true; + hasLoadError.value = false; + imageSrc.value = props.src; + }; + function handleLoad(event) { + isLoading.value = false; + hasLoadError.value = false; + emit("load", event); + } + function handleError(event) { + isLoading.value = false; + hasLoadError.value = true; + emit("error", event); + } + function handleLazyLoad() { + if (isInContainer(container.value, _scrollContainer.value)) { + loadImage(); + removeLazyLoadListener(); + } + } + const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200); + async function addLazyLoadListener() { + var _a; + if (!isClient) + return; + await vue.nextTick(); + const { scrollContainer } = props; + if (isElement$1(scrollContainer)) { + _scrollContainer.value = scrollContainer; + } else if (isString$1(scrollContainer) && scrollContainer !== "") { + _scrollContainer.value = (_a = document.querySelector(scrollContainer)) != null ? _a : void 0; + } else if (container.value) { + _scrollContainer.value = getScrollContainer(container.value); + } + if (_scrollContainer.value) { + stopScrollListener = useEventListener(_scrollContainer, "scroll", lazyLoadHandler); + setTimeout(() => handleLazyLoad(), 100); + } + } + function removeLazyLoadListener() { + if (!isClient || !_scrollContainer.value || !lazyLoadHandler) + return; + stopScrollListener == null ? void 0 : stopScrollListener(); + _scrollContainer.value = void 0; + } + function wheelHandler(e) { + if (!e.ctrlKey) + return; + if (e.deltaY < 0) { + e.preventDefault(); + return false; + } else if (e.deltaY > 0) { + e.preventDefault(); + return false; + } + } + function clickHandler() { + if (!preview.value) + return; + stopWheelListener = useEventListener("wheel", wheelHandler, { + passive: false + }); + prevOverflow = document.body.style.overflow; + document.body.style.overflow = "hidden"; + showViewer.value = true; + emit("show"); + } + function closeViewer() { + stopWheelListener == null ? void 0 : stopWheelListener(); + document.body.style.overflow = prevOverflow; + showViewer.value = false; + emit("close"); + } + function switchViewer(val) { + emit("switch", val); + } + vue.watch(() => props.src, () => { + if (isManual.value) { + isLoading.value = true; + hasLoadError.value = false; + removeLazyLoadListener(); + addLazyLoadListener(); + } else { + loadImage(); + } + }); + vue.onMounted(() => { + if (isManual.value) { + addLazyLoadListener(); + } else { + loadImage(); + } + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + ref_key: "container", + ref: container, + class: vue.normalizeClass([vue.unref(ns).b(), _ctx.$attrs.class]), + style: vue.normalizeStyle(vue.unref(containerStyle)) + }, [ + imageSrc.value !== void 0 && !hasLoadError.value ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({ key: 0 }, vue.unref(attrs), { + src: imageSrc.value, + loading: _ctx.loading, + style: vue.unref(imageStyle), + class: [ + vue.unref(ns).e("inner"), + vue.unref(preview) && vue.unref(ns).e("preview"), + isLoading.value && vue.unref(ns).is("loading") + ], + onClick: clickHandler, + onLoad: handleLoad, + onError: handleError + }), null, 16, _hoisted_1$t)) : vue.createCommentVNode("v-if", true), + isLoading.value || hasLoadError.value ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("wrapper")) + }, [ + isLoading.value ? vue.renderSlot(_ctx.$slots, "placeholder", { key: 0 }, () => [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("placeholder")) + }, null, 2) + ]) : hasLoadError.value ? vue.renderSlot(_ctx.$slots, "error", { key: 1 }, () => [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("error")) + }, vue.toDisplayString(vue.unref(t)("el.image.error")), 3) + ]) : vue.createCommentVNode("v-if", true) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.unref(preview) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [ + showViewer.value ? (vue.openBlock(), vue.createBlock(vue.unref(ElImageViewer), { + key: 0, + "z-index": _ctx.zIndex, + "initial-index": vue.unref(imageIndex), + infinite: _ctx.infinite, + "zoom-rate": _ctx.zoomRate, + "url-list": _ctx.previewSrcList, + "hide-on-click-modal": _ctx.hideOnClickModal, + teleported: _ctx.previewTeleported, + "close-on-press-escape": _ctx.closeOnPressEscape, + onClose: closeViewer, + onSwitch: switchViewer + }, { + default: vue.withCtx(() => [ + _ctx.$slots.viewer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$j, [ + vue.renderSlot(_ctx.$slots, "viewer") + ])) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["z-index", "initial-index", "infinite", "zoom-rate", "url-list", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : vue.createCommentVNode("v-if", true) + ], 64)) : vue.createCommentVNode("v-if", true) + ], 6); + }; + } + }); + var Image = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__file", "image.vue"]]); + + const ElImage = withInstall(Image); + + const inputNumberProps = buildProps({ + id: { + type: String, + default: void 0 + }, + step: { + type: Number, + default: 1 + }, + stepStrictly: Boolean, + max: { + type: Number, + default: Number.POSITIVE_INFINITY + }, + min: { + type: Number, + default: Number.NEGATIVE_INFINITY + }, + modelValue: Number, + readonly: Boolean, + disabled: Boolean, + size: useSizeProp, + controls: { + type: Boolean, + default: true + }, + controlsPosition: { + type: String, + default: "", + values: ["", "right"] + }, + valueOnClear: { + type: [String, Number, null], + validator: (val) => val === null || isNumber$1(val) || ["min", "max"].includes(val), + default: null + }, + name: String, + label: String, + placeholder: String, + precision: { + type: Number, + validator: (val) => val >= 0 && val === Number.parseInt(`${val}`, 10) + }, + validateEvent: { + type: Boolean, + default: true + } + }); + const inputNumberEmits = { + [CHANGE_EVENT]: (cur, prev) => prev !== cur, + blur: (e) => e instanceof FocusEvent, + focus: (e) => e instanceof FocusEvent, + [INPUT_EVENT]: (val) => isNumber$1(val) || isNil(val), + [UPDATE_MODEL_EVENT]: (val) => isNumber$1(val) || isNil(val) + }; + + const _hoisted_1$s = ["aria-label", "onKeydown"]; + const _hoisted_2$i = ["aria-label", "onKeydown"]; + const __default__$H = vue.defineComponent({ + name: "ElInputNumber" + }); + const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({ + ...__default__$H, + props: inputNumberProps, + emits: inputNumberEmits, + setup(__props, { expose, emit }) { + const props = __props; + const { t } = useLocale(); + const ns = useNamespace("input-number"); + const input = vue.ref(); + const data = vue.reactive({ + currentValue: props.modelValue, + userInput: null + }); + const { formItem } = useFormItem(); + const minDisabled = vue.computed(() => isNumber$1(props.modelValue) && props.modelValue <= props.min); + const maxDisabled = vue.computed(() => isNumber$1(props.modelValue) && props.modelValue >= props.max); + const numPrecision = vue.computed(() => { + const stepPrecision = getPrecision(props.step); + if (!isUndefined(props.precision)) { + if (stepPrecision > props.precision) ; + return props.precision; + } else { + return Math.max(getPrecision(props.modelValue), stepPrecision); + } + }); + const controlsAtRight = vue.computed(() => { + return props.controls && props.controlsPosition === "right"; + }); + const inputNumberSize = useFormSize(); + const inputNumberDisabled = useFormDisabled(); + const displayValue = vue.computed(() => { + if (data.userInput !== null) { + return data.userInput; + } + let currentValue = data.currentValue; + if (isNil(currentValue)) + return ""; + if (isNumber$1(currentValue)) { + if (Number.isNaN(currentValue)) + return ""; + if (!isUndefined(props.precision)) { + currentValue = currentValue.toFixed(props.precision); + } + } + return currentValue; + }); + const toPrecision = (num, pre) => { + if (isUndefined(pre)) + pre = numPrecision.value; + if (pre === 0) + return Math.round(num); + let snum = String(num); + const pointPos = snum.indexOf("."); + if (pointPos === -1) + return num; + const nums = snum.replace(".", "").split(""); + const datum = nums[pointPos + pre]; + if (!datum) + return num; + const length = snum.length; + if (snum.charAt(length - 1) === "5") { + snum = `${snum.slice(0, Math.max(0, length - 1))}6`; + } + return Number.parseFloat(Number(snum).toFixed(pre)); + }; + const getPrecision = (value) => { + if (isNil(value)) + return 0; + const valueString = value.toString(); + const dotPosition = valueString.indexOf("."); + let precision = 0; + if (dotPosition !== -1) { + precision = valueString.length - dotPosition - 1; + } + return precision; + }; + const ensurePrecision = (val, coefficient = 1) => { + if (!isNumber$1(val)) + return data.currentValue; + return toPrecision(val + props.step * coefficient); + }; + const increase = () => { + if (props.readonly || inputNumberDisabled.value || maxDisabled.value) + return; + const value = Number(displayValue.value) || 0; + const newVal = ensurePrecision(value); + setCurrentValue(newVal); + emit(INPUT_EVENT, data.currentValue); + }; + const decrease = () => { + if (props.readonly || inputNumberDisabled.value || minDisabled.value) + return; + const value = Number(displayValue.value) || 0; + const newVal = ensurePrecision(value, -1); + setCurrentValue(newVal); + emit(INPUT_EVENT, data.currentValue); + }; + const verifyValue = (value, update) => { + const { max, min, step, precision, stepStrictly, valueOnClear } = props; + let newVal = Number(value); + if (isNil(value) || Number.isNaN(newVal)) { + return null; + } + if (value === "") { + if (valueOnClear === null) { + return null; + } + newVal = isString$1(valueOnClear) ? { min, max }[valueOnClear] : valueOnClear; + } + if (stepStrictly) { + newVal = toPrecision(Math.round(newVal / step) * step, precision); + } + if (!isUndefined(precision)) { + newVal = toPrecision(newVal, precision); + } + if (newVal > max || newVal < min) { + newVal = newVal > max ? max : min; + update && emit(UPDATE_MODEL_EVENT, newVal); + } + return newVal; + }; + const setCurrentValue = (value, emitChange = true) => { + var _a; + const oldVal = data.currentValue; + const newVal = verifyValue(value); + if (!emitChange) { + emit(UPDATE_MODEL_EVENT, newVal); + return; + } + if (oldVal === newVal) + return; + data.userInput = null; + emit(UPDATE_MODEL_EVENT, newVal); + emit(CHANGE_EVENT, newVal, oldVal); + if (props.validateEvent) { + (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn()); + } + data.currentValue = newVal; + }; + const handleInput = (value) => { + data.userInput = value; + const newVal = value === "" ? null : Number(value); + emit(INPUT_EVENT, newVal); + setCurrentValue(newVal, false); + }; + const handleInputChange = (value) => { + const newVal = value !== "" ? Number(value) : ""; + if (isNumber$1(newVal) && !Number.isNaN(newVal) || value === "") { + setCurrentValue(newVal); + } + data.userInput = null; + }; + const focus = () => { + var _a, _b; + (_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a); + }; + const blur = () => { + var _a, _b; + (_b = (_a = input.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a); + }; + const handleFocus = (event) => { + emit("focus", event); + }; + const handleBlur = (event) => { + var _a; + emit("blur", event); + if (props.validateEvent) { + (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn()); + } + }; + vue.watch(() => props.modelValue, (value) => { + const userInput = verifyValue(data.userInput); + const newValue = verifyValue(value, true); + if (!isNumber$1(userInput) && (!userInput || userInput !== newValue)) { + data.currentValue = newValue; + data.userInput = null; + } + }, { immediate: true }); + vue.onMounted(() => { + var _a; + const { min, max, modelValue } = props; + const innerInput = (_a = input.value) == null ? void 0 : _a.input; + innerInput.setAttribute("role", "spinbutton"); + if (Number.isFinite(max)) { + innerInput.setAttribute("aria-valuemax", String(max)); + } else { + innerInput.removeAttribute("aria-valuemax"); + } + if (Number.isFinite(min)) { + innerInput.setAttribute("aria-valuemin", String(min)); + } else { + innerInput.removeAttribute("aria-valuemin"); + } + innerInput.setAttribute("aria-valuenow", String(data.currentValue)); + innerInput.setAttribute("aria-disabled", String(inputNumberDisabled.value)); + if (!isNumber$1(modelValue) && modelValue != null) { + let val = Number(modelValue); + if (Number.isNaN(val)) { + val = null; + } + emit(UPDATE_MODEL_EVENT, val); + } + }); + vue.onUpdated(() => { + var _a; + const innerInput = (_a = input.value) == null ? void 0 : _a.input; + innerInput == null ? void 0 : innerInput.setAttribute("aria-valuenow", `${data.currentValue}`); + }); + expose({ + focus, + blur + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([ + vue.unref(ns).b(), + vue.unref(ns).m(vue.unref(inputNumberSize)), + vue.unref(ns).is("disabled", vue.unref(inputNumberDisabled)), + vue.unref(ns).is("without-controls", !_ctx.controls), + vue.unref(ns).is("controls-right", vue.unref(controlsAtRight)) + ]), + onDragstart: _cache[1] || (_cache[1] = vue.withModifiers(() => { + }, ["prevent"])) + }, [ + _ctx.controls ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", { + key: 0, + role: "button", + "aria-label": vue.unref(t)("el.inputNumber.decrease"), + class: vue.normalizeClass([vue.unref(ns).e("decrease"), vue.unref(ns).is("disabled", vue.unref(minDisabled))]), + onKeydown: vue.withKeys(decrease, ["enter"]) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.unref(controlsAtRight) ? (vue.openBlock(), vue.createBlock(vue.unref(arrow_down_default), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(minus_default), { key: 1 })) + ]), + _: 1 + }) + ], 42, _hoisted_1$s)), [ + [vue.unref(vRepeatClick), decrease] + ]) : vue.createCommentVNode("v-if", true), + _ctx.controls ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", { + key: 1, + role: "button", + "aria-label": vue.unref(t)("el.inputNumber.increase"), + class: vue.normalizeClass([vue.unref(ns).e("increase"), vue.unref(ns).is("disabled", vue.unref(maxDisabled))]), + onKeydown: vue.withKeys(increase, ["enter"]) + }, [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.unref(controlsAtRight) ? (vue.openBlock(), vue.createBlock(vue.unref(arrow_up_default), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(plus_default), { key: 1 })) + ]), + _: 1 + }) + ], 42, _hoisted_2$i)), [ + [vue.unref(vRepeatClick), increase] + ]) : vue.createCommentVNode("v-if", true), + vue.createVNode(vue.unref(ElInput), { + id: _ctx.id, + ref_key: "input", + ref: input, + type: "number", + step: _ctx.step, + "model-value": vue.unref(displayValue), + placeholder: _ctx.placeholder, + readonly: _ctx.readonly, + disabled: vue.unref(inputNumberDisabled), + size: vue.unref(inputNumberSize), + max: _ctx.max, + min: _ctx.min, + name: _ctx.name, + label: _ctx.label, + "validate-event": false, + onWheel: _cache[0] || (_cache[0] = vue.withModifiers(() => { + }, ["prevent"])), + onKeydown: [ + vue.withKeys(vue.withModifiers(increase, ["prevent"]), ["up"]), + vue.withKeys(vue.withModifiers(decrease, ["prevent"]), ["down"]) + ], + onBlur: handleBlur, + onFocus: handleFocus, + onInput: handleInput, + onChange: handleInputChange + }, null, 8, ["id", "step", "model-value", "placeholder", "readonly", "disabled", "size", "max", "min", "name", "label", "onKeydown"]) + ], 34); + }; + } + }); + var InputNumber = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__file", "input-number.vue"]]); + + const ElInputNumber = withInstall(InputNumber); + + const linkProps = buildProps({ + type: { + type: String, + values: ["primary", "success", "warning", "info", "danger", "default"], + default: "default" + }, + underline: { + type: Boolean, + default: true + }, + disabled: { type: Boolean, default: false }, + href: { type: String, default: "" }, + icon: { + type: iconPropType + } + }); + const linkEmits = { + click: (evt) => evt instanceof MouseEvent + }; + + const _hoisted_1$r = ["href"]; + const __default__$G = vue.defineComponent({ + name: "ElLink" + }); + const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({ + ...__default__$G, + props: linkProps, + emits: linkEmits, + setup(__props, { emit }) { + const props = __props; + const ns = useNamespace("link"); + const linkKls = vue.computed(() => [ + ns.b(), + ns.m(props.type), + ns.is("disabled", props.disabled), + ns.is("underline", props.underline && !props.disabled) + ]); + function handleClick(event) { + if (!props.disabled) + emit("click", event); + } + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("a", { + class: vue.normalizeClass(vue.unref(linkKls)), + href: _ctx.disabled || !_ctx.href ? void 0 : _ctx.href, + onClick: handleClick + }, [ + _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) + ]), + _: 1 + })) : vue.createCommentVNode("v-if", true), + _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("inner")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2)) : vue.createCommentVNode("v-if", true), + _ctx.$slots.icon ? vue.renderSlot(_ctx.$slots, "icon", { key: 2 }) : vue.createCommentVNode("v-if", true) + ], 10, _hoisted_1$r); + }; + } + }); + var Link = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__file", "link.vue"]]); + + const ElLink = withInstall(Link); + + class SubMenu$1 { + constructor(parent, domNode) { + this.parent = parent; + this.domNode = domNode; + this.subIndex = 0; + this.subIndex = 0; + this.init(); + } + init() { + this.subMenuItems = this.domNode.querySelectorAll("li"); + this.addListeners(); + } + gotoSubIndex(idx) { + if (idx === this.subMenuItems.length) { + idx = 0; + } else if (idx < 0) { + idx = this.subMenuItems.length - 1; + } + this.subMenuItems[idx].focus(); + this.subIndex = idx; + } + addListeners() { + const parentNode = this.parent.domNode; + Array.prototype.forEach.call(this.subMenuItems, (el) => { + el.addEventListener("keydown", (event) => { + let prevDef = false; + switch (event.code) { + case EVENT_CODE.down: { + this.gotoSubIndex(this.subIndex + 1); + prevDef = true; + break; + } + case EVENT_CODE.up: { + this.gotoSubIndex(this.subIndex - 1); + prevDef = true; + break; + } + case EVENT_CODE.tab: { + triggerEvent(parentNode, "mouseleave"); + break; + } + case EVENT_CODE.enter: + case EVENT_CODE.space: { + prevDef = true; + event.currentTarget.click(); + break; + } + } + if (prevDef) { + event.preventDefault(); + event.stopPropagation(); + } + return false; + }); + }); + } + } + var SubMenu$2 = SubMenu$1; + + class MenuItem$1 { + constructor(domNode, namespace) { + this.domNode = domNode; + this.submenu = null; + this.submenu = null; + this.init(namespace); + } + init(namespace) { + this.domNode.setAttribute("tabindex", "0"); + const menuChild = this.domNode.querySelector(`.${namespace}-menu`); + if (menuChild) { + this.submenu = new SubMenu$2(this, menuChild); + } + this.addListeners(); + } + addListeners() { + this.domNode.addEventListener("keydown", (event) => { + let prevDef = false; + switch (event.code) { + case EVENT_CODE.down: { + triggerEvent(event.currentTarget, "mouseenter"); + this.submenu && this.submenu.gotoSubIndex(0); + prevDef = true; + break; + } + case EVENT_CODE.up: { + triggerEvent(event.currentTarget, "mouseenter"); + this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1); + prevDef = true; + break; + } + case EVENT_CODE.tab: { + triggerEvent(event.currentTarget, "mouseleave"); + break; + } + case EVENT_CODE.enter: + case EVENT_CODE.space: { + prevDef = true; + event.currentTarget.click(); + break; + } + } + if (prevDef) { + event.preventDefault(); + } + }); + } + } + var MenuItem$2 = MenuItem$1; + + class Menu$1 { + constructor(domNode, namespace) { + this.domNode = domNode; + this.init(namespace); + } + init(namespace) { + const menuChildren = this.domNode.childNodes; + Array.from(menuChildren).forEach((child) => { + if (child.nodeType === 1) { + new MenuItem$2(child, namespace); + } + }); + } + } + var Menubar = Menu$1; + + const _sfc_main$W = vue.defineComponent({ + name: "ElMenuCollapseTransition", + setup() { + const ns = useNamespace("menu"); + const listeners = { + onBeforeEnter: (el) => el.style.opacity = "0.2", + onEnter(el, done) { + addClass(el, `${ns.namespace.value}-opacity-transition`); + el.style.opacity = "1"; + done(); + }, + onAfterEnter(el) { + removeClass(el, `${ns.namespace.value}-opacity-transition`); + el.style.opacity = ""; + }, + onBeforeLeave(el) { + if (!el.dataset) { + el.dataset = {}; + } + if (hasClass(el, ns.m("collapse"))) { + removeClass(el, ns.m("collapse")); + el.dataset.oldOverflow = el.style.overflow; + el.dataset.scrollWidth = el.clientWidth.toString(); + addClass(el, ns.m("collapse")); + } else { + addClass(el, ns.m("collapse")); + el.dataset.oldOverflow = el.style.overflow; + el.dataset.scrollWidth = el.clientWidth.toString(); + removeClass(el, ns.m("collapse")); + } + el.style.width = `${el.scrollWidth}px`; + el.style.overflow = "hidden"; + }, + onLeave(el) { + addClass(el, "horizontal-collapse-transition"); + el.style.width = `${el.dataset.scrollWidth}px`; + } + }; + return { + listeners + }; + } + }); + function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({ mode: "out-in" }, _ctx.listeners), { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 16); + } + var ElMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$e], ["__file", "menu-collapse-transition.vue"]]); + + function useMenu(instance, currentIndex) { + const indexPath = vue.computed(() => { + let parent = instance.parent; + const path = [currentIndex.value]; + while (parent.type.name !== "ElMenu") { + if (parent.props.index) { + path.unshift(parent.props.index); + } + parent = parent.parent; + } + return path; + }); + const parentMenu = vue.computed(() => { + let parent = instance.parent; + while (parent && !["ElMenu", "ElSubMenu"].includes(parent.type.name)) { + parent = parent.parent; + } + return parent; + }); + return { + parentMenu, + indexPath + }; + } + + function useMenuColor(props) { + const menuBarColor = vue.computed(() => { + const color = props.backgroundColor; + if (!color) { + return ""; + } else { + return new TinyColor(color).shade(20).toString(); + } + }); + return menuBarColor; + } + + const useMenuCssVar = (props, level) => { + const ns = useNamespace("menu"); + return vue.computed(() => { + return ns.cssVarBlock({ + "text-color": props.textColor || "", + "hover-text-color": props.textColor || "", + "bg-color": props.backgroundColor || "", + "hover-bg-color": useMenuColor(props).value || "", + "active-color": props.activeTextColor || "", + level: `${level}` + }); + }); + }; + + const subMenuProps = buildProps({ + index: { + type: String, + required: true + }, + showTimeout: { + type: Number, + default: 300 + }, + hideTimeout: { + type: Number, + default: 300 + }, + popperClass: String, + disabled: Boolean, + popperAppendToBody: { + type: Boolean, + default: void 0 + }, + teleported: { + type: Boolean, + default: void 0 + }, + popperOffset: { + type: Number, + default: 6 + }, + expandCloseIcon: { + type: iconPropType + }, + expandOpenIcon: { + type: iconPropType + }, + collapseCloseIcon: { + type: iconPropType + }, + collapseOpenIcon: { + type: iconPropType + } + }); + const COMPONENT_NAME$c = "ElSubMenu"; + var SubMenu = vue.defineComponent({ + name: COMPONENT_NAME$c, + props: subMenuProps, + setup(props, { slots, expose }) { + useDeprecated({ + from: "popper-append-to-body", + replacement: "teleported", + scope: COMPONENT_NAME$c, + version: "2.3.0", + ref: "https://element-plus.org/en-US/component/menu.html#submenu-attributes" + }, vue.computed(() => props.popperAppendToBody !== void 0)); + const instance = vue.getCurrentInstance(); + const { indexPath, parentMenu } = useMenu(instance, vue.computed(() => props.index)); + const nsMenu = useNamespace("menu"); + const nsSubMenu = useNamespace("sub-menu"); + const rootMenu = vue.inject("rootMenu"); + if (!rootMenu) + throwError(COMPONENT_NAME$c, "can not inject root menu"); + const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`); + if (!subMenu) + throwError(COMPONENT_NAME$c, "can not inject sub menu"); + const items = vue.ref({}); + const subMenus = vue.ref({}); + let timeout; + const mouseInChild = vue.ref(false); + const verticalTitleRef = vue.ref(); + const vPopper = vue.ref(null); + const currentPlacement = vue.computed(() => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start"); + const subMenuTitleIcon = vue.computed(() => { + return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? props.expandCloseIcon && props.expandOpenIcon ? opened.value ? props.expandOpenIcon : props.expandCloseIcon : arrow_down_default : props.collapseCloseIcon && props.collapseOpenIcon ? opened.value ? props.collapseOpenIcon : props.collapseCloseIcon : arrow_right_default; + }); + const isFirstLevel = vue.computed(() => { + return subMenu.level === 0; + }); + const appendToBody = vue.computed(() => { + var _a; + const value = (_a = props.teleported) != null ? _a : props.popperAppendToBody; + return value === void 0 ? isFirstLevel.value : value; + }); + const menuTransitionName = vue.computed(() => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`); + const fallbackPlacements = vue.computed(() => mode.value === "horizontal" && isFirstLevel.value ? [ + "bottom-start", + "bottom-end", + "top-start", + "top-end", + "right-start", + "left-start" + ] : [ + "right-start", + "left-start", + "bottom-start", + "bottom-end", + "top-start", + "top-end" + ]); + const opened = vue.computed(() => rootMenu.openedMenus.includes(props.index)); + const active = vue.computed(() => { + let isActive = false; + Object.values(items.value).forEach((item2) => { + if (item2.active) { + isActive = true; + } + }); + Object.values(subMenus.value).forEach((subItem) => { + if (subItem.active) { + isActive = true; + } + }); + return isActive; + }); + const backgroundColor = vue.computed(() => rootMenu.props.backgroundColor || ""); + const activeTextColor = vue.computed(() => rootMenu.props.activeTextColor || ""); + const textColor = vue.computed(() => rootMenu.props.textColor || ""); + const mode = vue.computed(() => rootMenu.props.mode); + const item = vue.reactive({ + index: props.index, + indexPath, + active + }); + const titleStyle = vue.computed(() => { + if (mode.value !== "horizontal") { + return { + color: textColor.value + }; + } + return { + borderBottomColor: active.value ? rootMenu.props.activeTextColor ? activeTextColor.value : "" : "transparent", + color: active.value ? activeTextColor.value : textColor.value + }; + }); + const doDestroy = () => { + var _a, _b, _c; + return (_c = (_b = (_a = vPopper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.popperInstanceRef) == null ? void 0 : _c.destroy(); + }; + const handleCollapseToggle = (value) => { + if (!value) { + doDestroy(); + } + }; + const handleClick = () => { + if (rootMenu.props.menuTrigger === "hover" && rootMenu.props.mode === "horizontal" || rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) + return; + rootMenu.handleSubMenuClick({ + index: props.index, + indexPath: indexPath.value, + active: active.value + }); + }; + const handleMouseenter = (event, showTimeout = props.showTimeout) => { + var _a; + if (event.type === "focus") { + return; + } + if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) { + return; + } + subMenu.mouseInChild.value = true; + timeout == null ? void 0 : timeout(); + ({ stop: timeout } = useTimeoutFn(() => { + rootMenu.openMenu(props.index, indexPath.value); + }, showTimeout)); + if (appendToBody.value) { + (_a = parentMenu.value.vnode.el) == null ? void 0 : _a.dispatchEvent(new MouseEvent("mouseenter")); + } + }; + const handleMouseleave = (deepDispatch = false) => { + var _a, _b; + if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical") { + return; + } + timeout == null ? void 0 : timeout(); + subMenu.mouseInChild.value = false; + ({ stop: timeout } = useTimeoutFn(() => !mouseInChild.value && rootMenu.closeMenu(props.index, indexPath.value), props.hideTimeout)); + if (appendToBody.value && deepDispatch) { + if (((_a = instance.parent) == null ? void 0 : _a.type.name) === "ElSubMenu") { + (_b = subMenu.handleMouseleave) == null ? void 0 : _b.call(subMenu, true); + } + } + }; + vue.watch(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value))); + { + const addSubMenu = (item2) => { + subMenus.value[item2.index] = item2; + }; + const removeSubMenu = (item2) => { + delete subMenus.value[item2.index]; + }; + vue.provide(`subMenu:${instance.uid}`, { + addSubMenu, + removeSubMenu, + handleMouseleave, + mouseInChild, + level: subMenu.level + 1 + }); + } + expose({ + opened + }); + vue.onMounted(() => { + rootMenu.addSubMenu(item); + subMenu.addSubMenu(item); + }); + vue.onBeforeUnmount(() => { + subMenu.removeSubMenu(item); + rootMenu.removeSubMenu(item); + }); + return () => { + var _a; + const titleTag = [ + (_a = slots.title) == null ? void 0 : _a.call(slots), + vue.h(ElIcon, { + class: nsSubMenu.e("icon-arrow"), + style: { + transform: opened.value ? props.expandCloseIcon && props.expandOpenIcon || props.collapseCloseIcon && props.collapseOpenIcon && rootMenu.props.collapse ? "none" : "rotateZ(180deg)" : "none" + } + }, { + default: () => isString$1(subMenuTitleIcon.value) ? vue.h(instance.appContext.components[subMenuTitleIcon.value]) : vue.h(subMenuTitleIcon.value) + }) + ]; + const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1); + const child = rootMenu.isMenuPopup ? vue.h(ElTooltip, { + ref: vPopper, + visible: opened.value, + effect: "light", + pure: true, + offset: props.popperOffset, + showArrow: false, + persistent: true, + popperClass: props.popperClass, + placement: currentPlacement.value, + teleported: appendToBody.value, + fallbackPlacements: fallbackPlacements.value, + transition: menuTransitionName.value, + gpuAcceleration: false + }, { + content: () => { + var _a2; + return vue.h("div", { + class: [ + nsMenu.m(mode.value), + nsMenu.m("popup-container"), + props.popperClass + ], + onMouseenter: (evt) => handleMouseenter(evt, 100), + onMouseleave: () => handleMouseleave(true), + onFocus: (evt) => handleMouseenter(evt, 100) + }, [ + vue.h("ul", { + class: [ + nsMenu.b(), + nsMenu.m("popup"), + nsMenu.m(`popup-${currentPlacement.value}`) + ], + style: ulStyle.value + }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]) + ]); + }, + default: () => vue.h("div", { + class: nsSubMenu.e("title"), + style: [ + titleStyle.value, + { backgroundColor: backgroundColor.value } + ], + onClick: handleClick + }, titleTag) + }) : vue.h(vue.Fragment, {}, [ + vue.h("div", { + class: nsSubMenu.e("title"), + style: [ + titleStyle.value, + { backgroundColor: backgroundColor.value } + ], + ref: verticalTitleRef, + onClick: handleClick + }, titleTag), + vue.h(_CollapseTransition, {}, { + default: () => { + var _a2; + return vue.withDirectives(vue.h("ul", { + role: "menu", + class: [nsMenu.b(), nsMenu.m("inline")], + style: ulStyle.value + }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]), [[vue.vShow, opened.value]]); + } + }) + ]); + return vue.h("li", { + class: [ + nsSubMenu.b(), + nsSubMenu.is("active", active.value), + nsSubMenu.is("opened", opened.value), + nsSubMenu.is("disabled", props.disabled) + ], + role: "menuitem", + ariaHaspopup: true, + ariaExpanded: opened.value, + onMouseenter: handleMouseenter, + onMouseleave: () => handleMouseleave(true), + onFocus: handleMouseenter + }, [child]); + }; + } + }); + + const menuProps = buildProps({ + mode: { + type: String, + values: ["horizontal", "vertical"], + default: "vertical" + }, + defaultActive: { + type: String, + default: "" + }, + defaultOpeneds: { + type: definePropType(Array), + default: () => mutable([]) + }, + uniqueOpened: Boolean, + router: Boolean, + menuTrigger: { + type: String, + values: ["hover", "click"], + default: "hover" + }, + collapse: Boolean, + backgroundColor: String, + textColor: String, + activeTextColor: String, + collapseTransition: { + type: Boolean, + default: true + }, + ellipsis: { + type: Boolean, + default: true + }, + popperEffect: { + type: String, + values: ["dark", "light"], + default: "dark" + } + }); + const checkIndexPath = (indexPath) => Array.isArray(indexPath) && indexPath.every((path) => isString$1(path)); + const menuEmits = { + close: (index, indexPath) => isString$1(index) && checkIndexPath(indexPath), + open: (index, indexPath) => isString$1(index) && checkIndexPath(indexPath), + select: (index, indexPath, item, routerResult) => isString$1(index) && checkIndexPath(indexPath) && isObject$1(item) && (routerResult === void 0 || routerResult instanceof Promise) + }; + var Menu = vue.defineComponent({ + name: "ElMenu", + props: menuProps, + emits: menuEmits, + setup(props, { emit, slots, expose }) { + const instance = vue.getCurrentInstance(); + const router = instance.appContext.config.globalProperties.$router; + const menu = vue.ref(); + const nsMenu = useNamespace("menu"); + const nsSubMenu = useNamespace("sub-menu"); + const sliceIndex = vue.ref(-1); + const openedMenus = vue.ref(props.defaultOpeneds && !props.collapse ? props.defaultOpeneds.slice(0) : []); + const activeIndex = vue.ref(props.defaultActive); + const items = vue.ref({}); + const subMenus = vue.ref({}); + const isMenuPopup = vue.computed(() => { + return props.mode === "horizontal" || props.mode === "vertical" && props.collapse; + }); + const initMenu = () => { + const activeItem = activeIndex.value && items.value[activeIndex.value]; + if (!activeItem || props.mode === "horizontal" || props.collapse) + return; + const indexPath = activeItem.indexPath; + indexPath.forEach((index) => { + const subMenu = subMenus.value[index]; + subMenu && openMenu(index, subMenu.indexPath); + }); + }; + const openMenu = (index, indexPath) => { + if (openedMenus.value.includes(index)) + return; + if (props.uniqueOpened) { + openedMenus.value = openedMenus.value.filter((index2) => indexPath.includes(index2)); + } + openedMenus.value.push(index); + emit("open", index, indexPath); + }; + const close = (index) => { + const i = openedMenus.value.indexOf(index); + if (i !== -1) { + openedMenus.value.splice(i, 1); + } + }; + const closeMenu = (index, indexPath) => { + close(index); + emit("close", index, indexPath); + }; + const handleSubMenuClick = ({ + index, + indexPath + }) => { + const isOpened = openedMenus.value.includes(index); + if (isOpened) { + closeMenu(index, indexPath); + } else { + openMenu(index, indexPath); + } + }; + const handleMenuItemClick = (menuItem) => { + if (props.mode === "horizontal" || props.collapse) { + openedMenus.value = []; + } + const { index, indexPath } = menuItem; + if (index === void 0 || indexPath === void 0) + return; + if (props.router && router) { + const route = menuItem.route || index; + const routerResult = router.push(route).then((res) => { + if (!res) + activeIndex.value = index; + return res; + }); + emit("select", index, indexPath, { index, indexPath, route }, routerResult); + } else { + activeIndex.value = index; + emit("select", index, indexPath, { index, indexPath }); + } + }; + const updateActiveIndex = (val) => { + const itemsInData = items.value; + const item = itemsInData[val] || activeIndex.value && itemsInData[activeIndex.value] || itemsInData[props.defaultActive]; + if (item) { + activeIndex.value = item.index; + } else { + activeIndex.value = val; + } + }; + const calcSliceIndex = () => { + var _a, _b; + if (!menu.value) + return -1; + const items2 = Array.from((_b = (_a = menu.value) == null ? void 0 : _a.childNodes) != null ? _b : []).filter((item) => item.nodeName !== "#text" || item.nodeValue); + const moreItemWidth = 64; + const paddingLeft = Number.parseInt(getComputedStyle(menu.value).paddingLeft, 10); + const paddingRight = Number.parseInt(getComputedStyle(menu.value).paddingRight, 10); + const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight; + let calcWidth = 0; + let sliceIndex2 = 0; + items2.forEach((item, index) => { + calcWidth += item.offsetWidth || 0; + if (calcWidth <= menuWidth - moreItemWidth) { + sliceIndex2 = index + 1; + } + }); + return sliceIndex2 === items2.length ? -1 : sliceIndex2; + }; + const debounce = (fn, wait = 33.34) => { + let timmer; + return () => { + timmer && clearTimeout(timmer); + timmer = setTimeout(() => { + fn(); + }, wait); + }; + }; + let isFirstTimeRender = true; + const handleResize = () => { + const callback = () => { + sliceIndex.value = -1; + vue.nextTick(() => { + sliceIndex.value = calcSliceIndex(); + }); + }; + isFirstTimeRender ? callback() : debounce(callback)(); + isFirstTimeRender = false; + }; + vue.watch(() => props.defaultActive, (currentActive) => { + if (!items.value[currentActive]) { + activeIndex.value = ""; + } + updateActiveIndex(currentActive); + }); + vue.watch(() => props.collapse, (value) => { + if (value) + openedMenus.value = []; + }); + vue.watch(items.value, initMenu); + let resizeStopper; + vue.watchEffect(() => { + if (props.mode === "horizontal" && props.ellipsis) + resizeStopper = useResizeObserver(menu, handleResize).stop; + else + resizeStopper == null ? void 0 : resizeStopper(); + }); + { + const addSubMenu = (item) => { + subMenus.value[item.index] = item; + }; + const removeSubMenu = (item) => { + delete subMenus.value[item.index]; + }; + const addMenuItem = (item) => { + items.value[item.index] = item; + }; + const removeMenuItem = (item) => { + delete items.value[item.index]; + }; + vue.provide("rootMenu", vue.reactive({ + props, + openedMenus, + items, + subMenus, + activeIndex, + isMenuPopup, + addMenuItem, + removeMenuItem, + addSubMenu, + removeSubMenu, + openMenu, + closeMenu, + handleMenuItemClick, + handleSubMenuClick + })); + vue.provide(`subMenu:${instance.uid}`, { + addSubMenu, + removeSubMenu, + mouseInChild: vue.ref(false), + level: 0 + }); + } + vue.onMounted(() => { + if (props.mode === "horizontal") { + new Menubar(instance.vnode.el, nsMenu.namespace.value); + } + }); + { + const open = (index) => { + const { indexPath } = subMenus.value[index]; + indexPath.forEach((i) => openMenu(i, indexPath)); + }; + expose({ + open, + close, + handleResize + }); + } + return () => { + var _a, _b; + let slot = (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : []; + const vShowMore = []; + if (props.mode === "horizontal" && menu.value) { + const originalSlot = flattedChildren(slot); + const slotDefault = sliceIndex.value === -1 ? originalSlot : originalSlot.slice(0, sliceIndex.value); + const slotMore = sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value); + if ((slotMore == null ? void 0 : slotMore.length) && props.ellipsis) { + slot = slotDefault; + vShowMore.push(vue.h(SubMenu, { + index: "sub-menu-more", + class: nsSubMenu.e("hide-arrow") + }, { + title: () => vue.h(ElIcon, { + class: nsSubMenu.e("icon-more") + }, { default: () => vue.h(more_default) }), + default: () => slotMore + })); + } + } + const ulStyle = useMenuCssVar(props, 0); + const vMenu = vue.h("ul", { + key: String(props.collapse), + role: "menubar", + ref: menu, + style: ulStyle.value, + class: { + [nsMenu.b()]: true, + [nsMenu.m(props.mode)]: true, + [nsMenu.m("collapse")]: props.collapse + } + }, [...slot, ...vShowMore]); + if (props.collapseTransition && props.mode === "vertical") { + return vue.h(ElMenuCollapseTransition, () => vMenu); + } + return vMenu; + }; + } + }); + + const menuItemProps = buildProps({ + index: { + type: definePropType([String, null]), + default: null + }, + route: { + type: definePropType([String, Object]) + }, + disabled: Boolean + }); + const menuItemEmits = { + click: (item) => isString$1(item.index) && Array.isArray(item.indexPath) + }; + + const COMPONENT_NAME$b = "ElMenuItem"; + const _sfc_main$V = vue.defineComponent({ + name: COMPONENT_NAME$b, + components: { + ElTooltip + }, + props: menuItemProps, + emits: menuItemEmits, + setup(props, { emit }) { + const instance = vue.getCurrentInstance(); + const rootMenu = vue.inject("rootMenu"); + const nsMenu = useNamespace("menu"); + const nsMenuItem = useNamespace("menu-item"); + if (!rootMenu) + throwError(COMPONENT_NAME$b, "can not inject root menu"); + const { parentMenu, indexPath } = useMenu(instance, vue.toRef(props, "index")); + const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`); + if (!subMenu) + throwError(COMPONENT_NAME$b, "can not inject sub menu"); + const active = vue.computed(() => props.index === rootMenu.activeIndex); + const item = vue.reactive({ + index: props.index, + indexPath, + active + }); + const handleClick = () => { + if (!props.disabled) { + rootMenu.handleMenuItemClick({ + index: props.index, + indexPath: indexPath.value, + route: props.route + }); + emit("click", item); + } + }; + vue.onMounted(() => { + subMenu.addSubMenu(item); + rootMenu.addMenuItem(item); + }); + vue.onBeforeUnmount(() => { + subMenu.removeSubMenu(item); + rootMenu.removeMenuItem(item); + }); + return { + parentMenu, + rootMenu, + active, + nsMenu, + nsMenuItem, + handleClick + }; + } + }); + function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_tooltip = vue.resolveComponent("el-tooltip"); + return vue.openBlock(), vue.createElementBlock("li", { + class: vue.normalizeClass([ + _ctx.nsMenuItem.b(), + _ctx.nsMenuItem.is("active", _ctx.active), + _ctx.nsMenuItem.is("disabled", _ctx.disabled) + ]), + role: "menuitem", + tabindex: "-1", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)) + }, [ + _ctx.parentMenu.type.name === "ElMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, { + key: 0, + effect: _ctx.rootMenu.props.popperEffect, + placement: "right", + "fallback-placements": ["left"], + persistent: "" + }, { + content: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "title") + ]), + default: vue.withCtx(() => [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.nsMenu.be("tooltip", "trigger")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2) + ]), + _: 3 + }, 8, ["effect"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [ + vue.renderSlot(_ctx.$slots, "default"), + vue.renderSlot(_ctx.$slots, "title") + ], 64)) + ], 2); + } + var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$d], ["__file", "menu-item.vue"]]); + + const menuItemGroupProps = { + title: String + }; + + const COMPONENT_NAME$a = "ElMenuItemGroup"; + const _sfc_main$U = vue.defineComponent({ + name: COMPONENT_NAME$a, + props: menuItemGroupProps, + setup() { + const ns = useNamespace("menu-item-group"); + return { + ns + }; + } + }); + function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("li", { + class: vue.normalizeClass(_ctx.ns.b()) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("title")) + }, [ + !_ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.createTextVNode(vue.toDisplayString(_ctx.title), 1) + ], 64)) : vue.renderSlot(_ctx.$slots, "title", { key: 1 }) + ], 2), + vue.createElementVNode("ul", null, [ + vue.renderSlot(_ctx.$slots, "default") + ]) + ], 2); + } + var MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$c], ["__file", "menu-item-group.vue"]]); + + const ElMenu = withInstall(Menu, { + MenuItem, + MenuItemGroup, + SubMenu + }); + const ElMenuItem = withNoopInstall(MenuItem); + const ElMenuItemGroup = withNoopInstall(MenuItemGroup); + const ElSubMenu = withNoopInstall(SubMenu); + + const pageHeaderProps = buildProps({ + icon: { + type: iconPropType, + default: () => back_default + }, + title: String, + content: { + type: String, + default: "" + } + }); + const pageHeaderEmits = { + back: () => true + }; + + const _hoisted_1$q = ["aria-label"]; + const __default__$F = vue.defineComponent({ + name: "ElPageHeader" + }); + const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({ + ...__default__$F, + props: pageHeaderProps, + emits: pageHeaderEmits, + setup(__props, { emit }) { + const slots = vue.useSlots(); + const { t } = useLocale(); + const ns = useNamespace("page-header"); + const kls = vue.computed(() => { + return [ + ns.b(), + { + [ns.m("has-breadcrumb")]: !!slots.breadcrumb, + [ns.m("has-extra")]: !!slots.extra, + [ns.is("contentful")]: !!slots.default + } + ]; + }); + function handleClick() { + emit("back"); + } + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(kls)) + }, [ + _ctx.$slots.breadcrumb ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("breadcrumb")) + }, [ + vue.renderSlot(_ctx.$slots, "breadcrumb") + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("header")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("left")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("back")), + role: "button", + tabindex: "0", + onClick: handleClick + }, [ + _ctx.icon || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + "aria-label": _ctx.title || vue.unref(t)("el.pageHeader.title"), + class: vue.normalizeClass(vue.unref(ns).e("icon")) + }, [ + vue.renderSlot(_ctx.$slots, "icon", {}, () => [ + _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) + ]), + _: 1 + })) : vue.createCommentVNode("v-if", true) + ]) + ], 10, _hoisted_1$q)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("title")) + }, [ + vue.renderSlot(_ctx.$slots, "title", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.title || vue.unref(t)("el.pageHeader.title")), 1) + ]) + ], 2) + ], 2), + vue.createVNode(vue.unref(ElDivider), { direction: "vertical" }), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("content")) + }, [ + vue.renderSlot(_ctx.$slots, "content", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.content), 1) + ]) + ], 2) + ], 2), + _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("extra")) + }, [ + vue.renderSlot(_ctx.$slots, "extra") + ], 2)) : vue.createCommentVNode("v-if", true) + ], 2), + _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("main")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2)) : vue.createCommentVNode("v-if", true) + ], 2); + }; + } + }); + var PageHeader = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__file", "page-header.vue"]]); + + const ElPageHeader = withInstall(PageHeader); + + const elPaginationKey = Symbol("elPaginationKey"); + + const paginationPrevProps = buildProps({ + disabled: Boolean, + currentPage: { + type: Number, + default: 1 + }, + prevText: { + type: String + }, + prevIcon: { + type: iconPropType + } + }); + const paginationPrevEmits = { + click: (evt) => evt instanceof MouseEvent + }; + + const _hoisted_1$p = ["disabled", "aria-label", "aria-disabled"]; + const _hoisted_2$h = { key: 0 }; + const __default__$E = vue.defineComponent({ + name: "ElPaginationPrev" + }); + const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({ + ...__default__$E, + props: paginationPrevProps, + emits: paginationPrevEmits, + setup(__props) { + const props = __props; + const { t } = useLocale(); + const internalDisabled = vue.computed(() => props.disabled || props.currentPage <= 1); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("button", { + type: "button", + class: "btn-prev", + disabled: vue.unref(internalDisabled), + "aria-label": _ctx.prevText || vue.unref(t)("el.pagination.prev"), + "aria-disabled": vue.unref(internalDisabled), + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event)) + }, [ + _ctx.prevText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$h, vue.toDisplayString(_ctx.prevText), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.prevIcon))) + ]), + _: 1 + })) + ], 8, _hoisted_1$p); + }; + } + }); + var Prev = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__file", "prev.vue"]]); + + const paginationNextProps = buildProps({ + disabled: Boolean, + currentPage: { + type: Number, + default: 1 + }, + pageCount: { + type: Number, + default: 50 + }, + nextText: { + type: String + }, + nextIcon: { + type: iconPropType + } + }); + + const _hoisted_1$o = ["disabled", "aria-label", "aria-disabled"]; + const _hoisted_2$g = { key: 0 }; + const __default__$D = vue.defineComponent({ + name: "ElPaginationNext" + }); + const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({ + ...__default__$D, + props: paginationNextProps, + emits: ["click"], + setup(__props) { + const props = __props; + const { t } = useLocale(); + const internalDisabled = vue.computed(() => props.disabled || props.currentPage === props.pageCount || props.pageCount === 0); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("button", { + type: "button", + class: "btn-next", + disabled: vue.unref(internalDisabled), + "aria-label": _ctx.nextText || vue.unref(t)("el.pagination.next"), + "aria-disabled": vue.unref(internalDisabled), + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event)) + }, [ + _ctx.nextText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$g, vue.toDisplayString(_ctx.nextText), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.nextIcon))) + ]), + _: 1 + })) + ], 8, _hoisted_1$o); + }; + } + }); + var Next = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__file", "next.vue"]]); + + const selectGroupKey = Symbol("ElSelectGroup"); + const selectKey = Symbol("ElSelect"); + + function useOption$1(props, states) { + const select = vue.inject(selectKey); + const selectGroup = vue.inject(selectGroupKey, { disabled: false }); + const isObject = vue.computed(() => { + return Object.prototype.toString.call(props.value).toLowerCase() === "[object object]"; + }); + const itemSelected = vue.computed(() => { + if (!select.props.multiple) { + return isEqual(props.value, select.props.modelValue); + } else { + return contains(select.props.modelValue, props.value); + } + }); + const limitReached = vue.computed(() => { + if (select.props.multiple) { + const modelValue = select.props.modelValue || []; + return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0; + } else { + return false; + } + }); + const currentLabel = vue.computed(() => { + return props.label || (isObject.value ? "" : props.value); + }); + const currentValue = vue.computed(() => { + return props.value || props.label || ""; + }); + const isDisabled = vue.computed(() => { + return props.disabled || states.groupDisabled || limitReached.value; + }); + const instance = vue.getCurrentInstance(); + const contains = (arr = [], target) => { + if (!isObject.value) { + return arr && arr.includes(target); + } else { + const valueKey = select.props.valueKey; + return arr && arr.some((item) => { + return vue.toRaw(get(item, valueKey)) === get(target, valueKey); + }); + } + }; + const isEqual = (a, b) => { + if (!isObject.value) { + return a === b; + } else { + const { valueKey } = select.props; + return get(a, valueKey) === get(b, valueKey); + } + }; + const hoverItem = () => { + if (!props.disabled && !selectGroup.disabled) { + select.hoverIndex = select.optionsArray.indexOf(instance.proxy); + } + }; + vue.watch(() => currentLabel.value, () => { + if (!props.created && !select.props.remote) + select.setSelected(); + }); + vue.watch(() => props.value, (val, oldVal) => { + const { remote, valueKey } = select.props; + if (!Object.is(val, oldVal)) { + select.onOptionDestroy(oldVal, instance.proxy); + select.onOptionCreate(instance.proxy); + } + if (!props.created && !remote) { + if (valueKey && typeof val === "object" && typeof oldVal === "object" && val[valueKey] === oldVal[valueKey]) { + return; + } + select.setSelected(); + } + }); + vue.watch(() => selectGroup.disabled, () => { + states.groupDisabled = selectGroup.disabled; + }, { immediate: true }); + const { queryChange } = vue.toRaw(select); + vue.watch(queryChange, (changes) => { + const { query } = vue.unref(changes); + const regexp = new RegExp(escapeStringRegexp(query), "i"); + states.visible = regexp.test(currentLabel.value) || props.created; + if (!states.visible) { + select.filteredOptionsCount--; + } + }, { immediate: true }); + return { + select, + currentLabel, + currentValue, + itemSelected, + isDisabled, + hoverItem + }; + } + + const _sfc_main$Q = vue.defineComponent({ + name: "ElOption", + componentName: "ElOption", + props: { + value: { + required: true, + type: [String, Number, Boolean, Object] + }, + label: [String, Number], + created: Boolean, + disabled: { + type: Boolean, + default: false + } + }, + setup(props) { + const ns = useNamespace("select"); + const states = vue.reactive({ + index: -1, + groupDisabled: false, + visible: true, + hitState: false, + hover: false + }); + const { currentLabel, itemSelected, isDisabled, select, hoverItem } = useOption$1(props, states); + const { visible, hover } = vue.toRefs(states); + const vm = vue.getCurrentInstance().proxy; + select.onOptionCreate(vm); + vue.onBeforeUnmount(() => { + const key = vm.value; + const { selected } = select; + const selectedOptions = select.props.multiple ? selected : [selected]; + const doesSelected = selectedOptions.some((item) => { + return item.value === vm.value; + }); + vue.nextTick(() => { + if (select.cachedOptions.get(key) === vm && !doesSelected) { + select.cachedOptions.delete(key); + } + }); + select.onOptionDestroy(key, vm); + }); + function selectOptionClick() { + if (props.disabled !== true && states.groupDisabled !== true) { + select.handleOptionSelect(vm, true); + } + } + return { + ns, + currentLabel, + itemSelected, + isDisabled, + select, + hoverItem, + visible, + hover, + selectOptionClick, + states + }; + } + }); + function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) { + return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", { + class: vue.normalizeClass([ + _ctx.ns.be("dropdown", "item"), + _ctx.ns.is("disabled", _ctx.isDisabled), + { + selected: _ctx.itemSelected, + hover: _ctx.hover + } + ]), + onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)), + onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"])) + }, [ + vue.renderSlot(_ctx.$slots, "default", {}, () => [ + vue.createElementVNode("span", null, vue.toDisplayString(_ctx.currentLabel), 1) + ]) + ], 34)), [ + [vue.vShow, _ctx.visible] + ]); + } + var Option = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$b], ["__file", "option.vue"]]); + + const _sfc_main$P = vue.defineComponent({ + name: "ElSelectDropdown", + componentName: "ElSelectDropdown", + setup() { + const select = vue.inject(selectKey); + const ns = useNamespace("select"); + const popperClass = vue.computed(() => select.props.popperClass); + const isMultiple = vue.computed(() => select.props.multiple); + const isFitInputWidth = vue.computed(() => select.props.fitInputWidth); + const minWidth = vue.ref(""); + function updateMinWidth() { + var _a; + minWidth.value = `${(_a = select.selectWrapper) == null ? void 0 : _a.offsetWidth}px`; + } + vue.onMounted(() => { + updateMinWidth(); + useResizeObserver(select.selectWrapper, updateMinWidth); + }); + return { + ns, + minWidth, + popperClass, + isMultiple, + isFitInputWidth + }; + } + }); + function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([_ctx.ns.b("dropdown"), _ctx.ns.is("multiple", _ctx.isMultiple), _ctx.popperClass]), + style: vue.normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth }) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 6); + } + var ElSelectMenu$1 = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$a], ["__file", "select-dropdown.vue"]]); + + function useSelectStates(props) { + const { t } = useLocale(); + return vue.reactive({ + options: /* @__PURE__ */ new Map(), + cachedOptions: /* @__PURE__ */ new Map(), + createdLabel: null, + createdSelected: false, + selected: props.multiple ? [] : {}, + inputLength: 20, + inputWidth: 0, + optionsCount: 0, + filteredOptionsCount: 0, + visible: false, + softFocus: false, + selectedLabel: "", + hoverIndex: -1, + query: "", + previousQuery: null, + inputHovering: false, + cachedPlaceHolder: "", + currentPlaceholder: t("el.select.placeholder"), + menuVisibleOnFocus: false, + isOnComposition: false, + isSilentBlur: false, + prefixWidth: 11, + tagInMultiLine: false, + mouseEnter: false + }); + } + const useSelect$3 = (props, states, ctx) => { + const { t } = useLocale(); + const ns = useNamespace("select"); + useDeprecated({ + from: "suffixTransition", + replacement: "override style scheme", + version: "2.3.0", + scope: "props", + ref: "https://element-plus.org/en-US/component/select.html#select-attributes" + }, vue.computed(() => props.suffixTransition === false)); + const reference = vue.ref(null); + const input = vue.ref(null); + const iOSInput = vue.ref(null); + const tooltipRef = vue.ref(null); + const tags = vue.ref(null); + const selectWrapper = vue.ref(null); + const scrollbar = vue.ref(null); + const hoverOption = vue.ref(-1); + const queryChange = vue.shallowRef({ query: "" }); + const groupQueryChange = vue.shallowRef(""); + const optionList = vue.ref([]); + let originClientHeight = 0; + const { form, formItem } = useFormItem(); + const readonly = vue.computed(() => !props.filterable || props.multiple || !states.visible); + const selectDisabled = vue.computed(() => props.disabled || (form == null ? void 0 : form.disabled)); + const showClose = vue.computed(() => { + const hasValue = props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== ""; + const criteria = props.clearable && !selectDisabled.value && states.inputHovering && hasValue; + return criteria; + }); + const iconComponent = vue.computed(() => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon); + const iconReverse = vue.computed(() => ns.is("reverse", iconComponent.value && states.visible && props.suffixTransition)); + const debounce$1 = vue.computed(() => props.remote ? 300 : 0); + const emptyText = vue.computed(() => { + if (props.loading) { + return props.loadingText || t("el.select.loading"); + } else { + if (props.remote && states.query === "" && states.options.size === 0) + return false; + if (props.filterable && states.query && states.options.size > 0 && states.filteredOptionsCount === 0) { + return props.noMatchText || t("el.select.noMatch"); + } + if (states.options.size === 0) { + return props.noDataText || t("el.select.noData"); + } + } + return null; + }); + const optionsArray = vue.computed(() => { + const list = Array.from(states.options.values()); + const newList = []; + optionList.value.forEach((item) => { + const index = list.findIndex((i) => i.currentLabel === item); + if (index > -1) { + newList.push(list[index]); + } + }); + return newList.length ? newList : list; + }); + const cachedOptionsArray = vue.computed(() => Array.from(states.cachedOptions.values())); + const showNewOption = vue.computed(() => { + const hasExistingOption = optionsArray.value.filter((option) => { + return !option.created; + }).some((option) => { + return option.currentLabel === states.query; + }); + return props.filterable && props.allowCreate && states.query !== "" && !hasExistingOption; + }); + const selectSize = useFormSize(); + const collapseTagSize = vue.computed(() => ["small"].includes(selectSize.value) ? "small" : "default"); + const dropMenuVisible = vue.computed({ + get() { + return states.visible && emptyText.value !== false; + }, + set(val) { + states.visible = val; + } + }); + vue.watch([() => selectDisabled.value, () => selectSize.value, () => form == null ? void 0 : form.size], () => { + vue.nextTick(() => { + resetInputHeight(); + }); + }); + vue.watch(() => props.placeholder, (val) => { + states.cachedPlaceHolder = states.currentPlaceholder = val; + }); + vue.watch(() => props.modelValue, (val, oldVal) => { + if (props.multiple) { + resetInputHeight(); + if (val && val.length > 0 || input.value && states.query !== "") { + states.currentPlaceholder = ""; + } else { + states.currentPlaceholder = states.cachedPlaceHolder; + } + if (props.filterable && !props.reserveKeyword) { + states.query = ""; + handleQueryChange(states.query); + } + } + setSelected(); + if (props.filterable && !props.multiple) { + states.inputLength = 20; + } + if (!isEqual$1(val, oldVal) && props.validateEvent) { + formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn()); + } + }, { + flush: "post", + deep: true + }); + vue.watch(() => states.visible, (val) => { + var _a, _b, _c, _d, _e; + if (!val) { + if (props.filterable) { + if (isFunction$1(props.filterMethod)) { + props.filterMethod(""); + } + if (isFunction$1(props.remoteMethod)) { + props.remoteMethod(""); + } + } + input.value && input.value.blur(); + states.query = ""; + states.previousQuery = null; + states.selectedLabel = ""; + states.inputLength = 20; + states.menuVisibleOnFocus = false; + resetHoverIndex(); + vue.nextTick(() => { + if (input.value && input.value.value === "" && states.selected.length === 0) { + states.currentPlaceholder = states.cachedPlaceHolder; + } + }); + if (!props.multiple) { + if (states.selected) { + if (props.filterable && props.allowCreate && states.createdSelected && states.createdLabel) { + states.selectedLabel = states.createdLabel; + } else { + states.selectedLabel = states.selected.currentLabel; + } + if (props.filterable) + states.query = states.selectedLabel; + } + if (props.filterable) { + states.currentPlaceholder = states.cachedPlaceHolder; + } + } + } else { + (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a); + if (props.filterable) { + states.filteredOptionsCount = states.optionsCount; + states.query = props.remote ? "" : states.selectedLabel; + (_d = (_c = iOSInput.value) == null ? void 0 : _c.focus) == null ? void 0 : _d.call(_c); + if (props.multiple) { + (_e = input.value) == null ? void 0 : _e.focus(); + } else { + if (states.selectedLabel) { + states.currentPlaceholder = `${states.selectedLabel}`; + states.selectedLabel = ""; + } + } + handleQueryChange(states.query); + if (!props.multiple && !props.remote) { + queryChange.value.query = ""; + vue.triggerRef(queryChange); + vue.triggerRef(groupQueryChange); + } + } + } + ctx.emit("visible-change", val); + }); + vue.watch(() => states.options.entries(), () => { + var _a, _b, _c; + if (!isClient) + return; + (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a); + if (props.multiple) { + resetInputHeight(); + } + const inputs = ((_c = selectWrapper.value) == null ? void 0 : _c.querySelectorAll("input")) || []; + if (!Array.from(inputs).includes(document.activeElement)) { + setSelected(); + } + if (props.defaultFirstOption && (props.filterable || props.remote) && states.filteredOptionsCount) { + checkDefaultFirstOption(); + } + }, { + flush: "post" + }); + vue.watch(() => states.hoverIndex, (val) => { + if (isNumber$1(val) && val > -1) { + hoverOption.value = optionsArray.value[val] || {}; + } else { + hoverOption.value = {}; + } + optionsArray.value.forEach((option) => { + option.hover = hoverOption.value === option; + }); + }); + const resetInputHeight = () => { + vue.nextTick(() => { + var _a, _b; + if (!reference.value) + return; + const input2 = reference.value.$el.querySelector("input"); + originClientHeight = originClientHeight || (input2.clientHeight > 0 ? input2.clientHeight + 2 : 0); + const _tags = tags.value; + const gotSize = getComponentSize(selectSize.value || (form == null ? void 0 : form.size)); + const sizeInMap = gotSize === originClientHeight || originClientHeight <= 0 ? gotSize : originClientHeight; + const isElHidden = input2.offsetParent === null; + !isElHidden && (input2.style.height = `${(states.selected.length === 0 ? sizeInMap : Math.max(_tags ? _tags.clientHeight + (_tags.clientHeight > sizeInMap ? 6 : 0) : 0, sizeInMap)) - 2}px`); + states.tagInMultiLine = Number.parseFloat(input2.style.height) >= sizeInMap; + if (states.visible && emptyText.value !== false) { + (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a); + } + }); + }; + const handleQueryChange = async (val) => { + if (states.previousQuery === val || states.isOnComposition) + return; + if (states.previousQuery === null && (isFunction$1(props.filterMethod) || isFunction$1(props.remoteMethod))) { + states.previousQuery = val; + return; + } + states.previousQuery = val; + vue.nextTick(() => { + var _a, _b; + if (states.visible) + (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a); + }); + states.hoverIndex = -1; + if (props.multiple && props.filterable) { + vue.nextTick(() => { + const length = input.value.value.length * 15 + 20; + states.inputLength = props.collapseTags ? Math.min(50, length) : length; + managePlaceholder(); + resetInputHeight(); + }); + } + if (props.remote && isFunction$1(props.remoteMethod)) { + states.hoverIndex = -1; + props.remoteMethod(val); + } else if (isFunction$1(props.filterMethod)) { + props.filterMethod(val); + vue.triggerRef(groupQueryChange); + } else { + states.filteredOptionsCount = states.optionsCount; + queryChange.value.query = val; + vue.triggerRef(queryChange); + vue.triggerRef(groupQueryChange); + } + if (props.defaultFirstOption && (props.filterable || props.remote) && states.filteredOptionsCount) { + await vue.nextTick(); + checkDefaultFirstOption(); + } + }; + const managePlaceholder = () => { + if (states.currentPlaceholder !== "") { + states.currentPlaceholder = input.value.value ? "" : states.cachedPlaceHolder; + } + }; + const checkDefaultFirstOption = () => { + const optionsInDropdown = optionsArray.value.filter((n) => n.visible && !n.disabled && !n.states.groupDisabled); + const userCreatedOption = optionsInDropdown.find((n) => n.created); + const firstOriginOption = optionsInDropdown[0]; + states.hoverIndex = getValueIndex(optionsArray.value, userCreatedOption || firstOriginOption); + }; + const setSelected = () => { + var _a; + if (!props.multiple) { + const option = getOption(props.modelValue); + if ((_a = option.props) == null ? void 0 : _a.created) { + states.createdLabel = option.props.value; + states.createdSelected = true; + } else { + states.createdSelected = false; + } + states.selectedLabel = option.currentLabel; + states.selected = option; + if (props.filterable) + states.query = states.selectedLabel; + return; + } else { + states.selectedLabel = ""; + } + const result = []; + if (Array.isArray(props.modelValue)) { + props.modelValue.forEach((value) => { + result.push(getOption(value)); + }); + } + states.selected = result; + vue.nextTick(() => { + resetInputHeight(); + }); + }; + const getOption = (value) => { + let option; + const isObjectValue = toRawType(value).toLowerCase() === "object"; + const isNull = toRawType(value).toLowerCase() === "null"; + const isUndefined = toRawType(value).toLowerCase() === "undefined"; + for (let i = states.cachedOptions.size - 1; i >= 0; i--) { + const cachedOption = cachedOptionsArray.value[i]; + const isEqualValue = isObjectValue ? get(cachedOption.value, props.valueKey) === get(value, props.valueKey) : cachedOption.value === value; + if (isEqualValue) { + option = { + value, + currentLabel: cachedOption.currentLabel, + isDisabled: cachedOption.isDisabled + }; + break; + } + } + if (option) + return option; + const label = isObjectValue ? value.label : !isNull && !isUndefined ? value : ""; + const newOption = { + value, + currentLabel: label + }; + if (props.multiple) { + newOption.hitState = false; + } + return newOption; + }; + const resetHoverIndex = () => { + setTimeout(() => { + const valueKey = props.valueKey; + if (!props.multiple) { + states.hoverIndex = optionsArray.value.findIndex((item) => { + return getValueKey(item) === getValueKey(states.selected); + }); + } else { + if (states.selected.length > 0) { + states.hoverIndex = Math.min.apply(null, states.selected.map((selected) => { + return optionsArray.value.findIndex((item) => { + return get(item, valueKey) === get(selected, valueKey); + }); + })); + } else { + states.hoverIndex = -1; + } + } + }, 300); + }; + const handleResize = () => { + var _a, _b; + resetInputWidth(); + (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a); + if (props.multiple) + resetInputHeight(); + }; + const resetInputWidth = () => { + var _a; + states.inputWidth = (_a = reference.value) == null ? void 0 : _a.$el.offsetWidth; + }; + const onInputChange = () => { + if (props.filterable && states.query !== states.selectedLabel) { + states.query = states.selectedLabel; + handleQueryChange(states.query); + } + }; + const debouncedOnInputChange = debounce(() => { + onInputChange(); + }, debounce$1.value); + const debouncedQueryChange = debounce((e) => { + handleQueryChange(e.target.value); + }, debounce$1.value); + const emitChange = (val) => { + if (!isEqual$1(props.modelValue, val)) { + ctx.emit(CHANGE_EVENT, val); + } + }; + const deletePrevTag = (e) => { + if (e.target.value.length <= 0 && !toggleLastOptionHitState()) { + const value = props.modelValue.slice(); + value.pop(); + ctx.emit(UPDATE_MODEL_EVENT, value); + emitChange(value); + } + if (e.target.value.length === 1 && props.modelValue.length === 0) { + states.currentPlaceholder = states.cachedPlaceHolder; + } + }; + const deleteTag = (event, tag) => { + const index = states.selected.indexOf(tag); + if (index > -1 && !selectDisabled.value) { + const value = props.modelValue.slice(); + value.splice(index, 1); + ctx.emit(UPDATE_MODEL_EVENT, value); + emitChange(value); + ctx.emit("remove-tag", tag.value); + } + event.stopPropagation(); + }; + const deleteSelected = (event) => { + event.stopPropagation(); + const value = props.multiple ? [] : ""; + if (!isString$1(value)) { + for (const item of states.selected) { + if (item.isDisabled) + value.push(item.value); + } + } + ctx.emit(UPDATE_MODEL_EVENT, value); + emitChange(value); + states.hoverIndex = -1; + states.visible = false; + ctx.emit("clear"); + }; + const handleOptionSelect = (option, byClick) => { + var _a; + if (props.multiple) { + const value = (props.modelValue || []).slice(); + const optionIndex = getValueIndex(value, option.value); + if (optionIndex > -1) { + value.splice(optionIndex, 1); + } else if (props.multipleLimit <= 0 || value.length < props.multipleLimit) { + value.push(option.value); + } + ctx.emit(UPDATE_MODEL_EVENT, value); + emitChange(value); + if (option.created) { + states.query = ""; + handleQueryChange(""); + states.inputLength = 20; + } + if (props.filterable) + (_a = input.value) == null ? void 0 : _a.focus(); + } else { + ctx.emit(UPDATE_MODEL_EVENT, option.value); + emitChange(option.value); + states.visible = false; + } + states.isSilentBlur = byClick; + setSoftFocus(); + if (states.visible) + return; + vue.nextTick(() => { + scrollToOption(option); + }); + }; + const getValueIndex = (arr = [], value) => { + if (!isObject$1(value)) + return arr.indexOf(value); + const valueKey = props.valueKey; + let index = -1; + arr.some((item, i) => { + if (vue.toRaw(get(item, valueKey)) === get(value, valueKey)) { + index = i; + return true; + } + return false; + }); + return index; + }; + const setSoftFocus = () => { + states.softFocus = true; + const _input = input.value || reference.value; + if (_input) { + _input == null ? void 0 : _input.focus(); + } + }; + const scrollToOption = (option) => { + var _a, _b, _c, _d, _e; + const targetOption = Array.isArray(option) ? option[0] : option; + let target = null; + if (targetOption == null ? void 0 : targetOption.value) { + const options = optionsArray.value.filter((item) => item.value === targetOption.value); + if (options.length > 0) { + target = options[0].$el; + } + } + if (tooltipRef.value && target) { + const menu = (_d = (_c = (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef) == null ? void 0 : _c.querySelector) == null ? void 0 : _d.call(_c, `.${ns.be("dropdown", "wrap")}`); + if (menu) { + scrollIntoView(menu, target); + } + } + (_e = scrollbar.value) == null ? void 0 : _e.handleScroll(); + }; + const onOptionCreate = (vm) => { + states.optionsCount++; + states.filteredOptionsCount++; + states.options.set(vm.value, vm); + states.cachedOptions.set(vm.value, vm); + }; + const onOptionDestroy = (key, vm) => { + if (states.options.get(key) === vm) { + states.optionsCount--; + states.filteredOptionsCount--; + states.options.delete(key); + } + }; + const resetInputState = (e) => { + if (e.code !== EVENT_CODE.backspace) + toggleLastOptionHitState(false); + states.inputLength = input.value.value.length * 15 + 20; + resetInputHeight(); + }; + const toggleLastOptionHitState = (hit) => { + if (!Array.isArray(states.selected)) + return; + const option = states.selected[states.selected.length - 1]; + if (!option) + return; + if (hit === true || hit === false) { + option.hitState = hit; + return hit; + } + option.hitState = !option.hitState; + return option.hitState; + }; + const handleComposition = (event) => { + const text = event.target.value; + if (event.type === "compositionend") { + states.isOnComposition = false; + vue.nextTick(() => handleQueryChange(text)); + } else { + const lastCharacter = text[text.length - 1] || ""; + states.isOnComposition = !isKorean(lastCharacter); + } + }; + const handleMenuEnter = () => { + vue.nextTick(() => scrollToOption(states.selected)); + }; + const handleFocus = (event) => { + if (!states.softFocus) { + if (props.automaticDropdown || props.filterable) { + if (props.filterable && !states.visible) { + states.menuVisibleOnFocus = true; + } + states.visible = true; + } + ctx.emit("focus", event); + } else { + states.softFocus = false; + } + }; + const blur = () => { + var _a, _b, _c; + states.visible = false; + (_a = reference.value) == null ? void 0 : _a.blur(); + (_c = (_b = iOSInput.value) == null ? void 0 : _b.blur) == null ? void 0 : _c.call(_b); + }; + const handleBlur = (event) => { + vue.nextTick(() => { + if (states.isSilentBlur) { + states.isSilentBlur = false; + } else { + ctx.emit("blur", event); + } + }); + states.softFocus = false; + }; + const handleClearClick = (event) => { + deleteSelected(event); + }; + const handleClose = () => { + states.visible = false; + }; + const handleKeydownEscape = (event) => { + if (states.visible) { + event.preventDefault(); + event.stopPropagation(); + states.visible = false; + } + }; + const toggleMenu = (e) => { + var _a; + if (e && !states.mouseEnter) { + return; + } + if (!selectDisabled.value) { + if (states.menuVisibleOnFocus) { + states.menuVisibleOnFocus = false; + } else { + if (!tooltipRef.value || !tooltipRef.value.isFocusInsideContent()) { + states.visible = !states.visible; + } + } + if (states.visible) { + (_a = input.value || reference.value) == null ? void 0 : _a.focus(); + } + } + }; + const selectOption = () => { + if (!states.visible) { + toggleMenu(); + } else { + if (optionsArray.value[states.hoverIndex]) { + handleOptionSelect(optionsArray.value[states.hoverIndex], void 0); + } + } + }; + const getValueKey = (item) => { + return isObject$1(item.value) ? get(item.value, props.valueKey) : item.value; + }; + const optionsAllDisabled = vue.computed(() => optionsArray.value.filter((option) => option.visible).every((option) => option.disabled)); + const showTagList = vue.computed(() => states.selected.slice(0, props.maxCollapseTags)); + const collapseTagList = vue.computed(() => states.selected.slice(props.maxCollapseTags)); + const navigateOptions = (direction) => { + if (!states.visible) { + states.visible = true; + return; + } + if (states.options.size === 0 || states.filteredOptionsCount === 0) + return; + if (states.isOnComposition) + return; + if (!optionsAllDisabled.value) { + if (direction === "next") { + states.hoverIndex++; + if (states.hoverIndex === states.options.size) { + states.hoverIndex = 0; + } + } else if (direction === "prev") { + states.hoverIndex--; + if (states.hoverIndex < 0) { + states.hoverIndex = states.options.size - 1; + } + } + const option = optionsArray.value[states.hoverIndex]; + if (option.disabled === true || option.states.groupDisabled === true || !option.visible) { + navigateOptions(direction); + } + vue.nextTick(() => scrollToOption(hoverOption.value)); + } + }; + const handleMouseEnter = () => { + states.mouseEnter = true; + }; + const handleMouseLeave = () => { + states.mouseEnter = false; + }; + return { + optionList, + optionsArray, + selectSize, + handleResize, + debouncedOnInputChange, + debouncedQueryChange, + deletePrevTag, + deleteTag, + deleteSelected, + handleOptionSelect, + scrollToOption, + readonly, + resetInputHeight, + showClose, + iconComponent, + iconReverse, + showNewOption, + collapseTagSize, + setSelected, + managePlaceholder, + selectDisabled, + emptyText, + toggleLastOptionHitState, + resetInputState, + handleComposition, + onOptionCreate, + onOptionDestroy, + handleMenuEnter, + handleFocus, + blur, + handleBlur, + handleClearClick, + handleClose, + handleKeydownEscape, + toggleMenu, + selectOption, + getValueKey, + navigateOptions, + dropMenuVisible, + queryChange, + groupQueryChange, + showTagList, + collapseTagList, + reference, + input, + iOSInput, + tooltipRef, + tags, + selectWrapper, + scrollbar, + handleMouseEnter, + handleMouseLeave + }; + }; + + var ElOptions = vue.defineComponent({ + name: "ElOptions", + emits: ["update-options"], + setup(_, { slots, emit }) { + let cachedOptions = []; + function isSameOptions(a, b) { + if (a.length !== b.length) + return false; + for (const [index] of a.entries()) { + if (a[index] != b[index]) { + return false; + } + } + return true; + } + return () => { + var _a, _b; + const children = (_a = slots.default) == null ? void 0 : _a.call(slots); + const filteredOptions = []; + function filterOptions(children2) { + if (!Array.isArray(children2)) + return; + children2.forEach((item) => { + var _a2, _b2, _c, _d; + const name = (_a2 = (item == null ? void 0 : item.type) || {}) == null ? void 0 : _a2.name; + if (name === "ElOptionGroup") { + filterOptions(!isString$1(item.children) && !Array.isArray(item.children) && isFunction$1((_b2 = item.children) == null ? void 0 : _b2.default) ? (_c = item.children) == null ? void 0 : _c.default() : item.children); + } else if (name === "ElOption") { + filteredOptions.push((_d = item.props) == null ? void 0 : _d.label); + } else if (Array.isArray(item.children)) { + filterOptions(item.children); + } + }); + } + if (children.length) { + filterOptions((_b = children[0]) == null ? void 0 : _b.children); + } + if (!isSameOptions(filteredOptions, cachedOptions)) { + cachedOptions = filteredOptions; + emit("update-options", filteredOptions); + } + return children; + }; + } + }); + + const COMPONENT_NAME$9 = "ElSelect"; + const _sfc_main$O = vue.defineComponent({ + name: COMPONENT_NAME$9, + componentName: COMPONENT_NAME$9, + components: { + ElInput, + ElSelectMenu: ElSelectMenu$1, + ElOption: Option, + ElOptions, + ElTag, + ElScrollbar, + ElTooltip, + ElIcon + }, + directives: { ClickOutside }, + props: { + name: String, + id: String, + modelValue: { + type: [Array, String, Number, Boolean, Object], + default: void 0 + }, + autocomplete: { + type: String, + default: "off" + }, + automaticDropdown: Boolean, + size: { + type: String, + validator: isValidComponentSize + }, + effect: { + type: String, + default: "light" + }, + disabled: Boolean, + clearable: Boolean, + filterable: Boolean, + allowCreate: Boolean, + loading: Boolean, + popperClass: { + type: String, + default: "" + }, + popperOptions: { + type: Object, + default: () => ({}) + }, + remote: Boolean, + loadingText: String, + noMatchText: String, + noDataText: String, + remoteMethod: Function, + filterMethod: Function, + multiple: Boolean, + multipleLimit: { + type: Number, + default: 0 + }, + placeholder: { + type: String + }, + defaultFirstOption: Boolean, + reserveKeyword: { + type: Boolean, + default: true + }, + valueKey: { + type: String, + default: "value" + }, + collapseTags: Boolean, + collapseTagsTooltip: { + type: Boolean, + default: false + }, + maxCollapseTags: { + type: Number, + default: 1 + }, + teleported: useTooltipContentProps.teleported, + persistent: { + type: Boolean, + default: true + }, + clearIcon: { + type: iconPropType, + default: circle_close_default + }, + fitInputWidth: { + type: Boolean, + default: false + }, + suffixIcon: { + type: iconPropType, + default: arrow_down_default + }, + tagType: { ...tagProps.type, default: "info" }, + validateEvent: { + type: Boolean, + default: true + }, + remoteShowSuffix: { + type: Boolean, + default: false + }, + suffixTransition: { + type: Boolean, + default: true + }, + placement: { + type: String, + values: Ee, + default: "bottom-start" + } + }, + emits: [ + UPDATE_MODEL_EVENT, + CHANGE_EVENT, + "remove-tag", + "clear", + "visible-change", + "focus", + "blur" + ], + setup(props, ctx) { + const nsSelect = useNamespace("select"); + const nsInput = useNamespace("input"); + const { t } = useLocale(); + const states = useSelectStates(props); + const { + optionList, + optionsArray, + selectSize, + readonly, + handleResize, + collapseTagSize, + debouncedOnInputChange, + debouncedQueryChange, + deletePrevTag, + deleteTag, + deleteSelected, + handleOptionSelect, + scrollToOption, + setSelected, + resetInputHeight, + managePlaceholder, + showClose, + selectDisabled, + iconComponent, + iconReverse, + showNewOption, + emptyText, + toggleLastOptionHitState, + resetInputState, + handleComposition, + onOptionCreate, + onOptionDestroy, + handleMenuEnter, + handleFocus, + blur, + handleBlur, + handleClearClick, + handleClose, + handleKeydownEscape, + toggleMenu, + selectOption, + getValueKey, + navigateOptions, + dropMenuVisible, + reference, + input, + iOSInput, + tooltipRef, + tags, + selectWrapper, + scrollbar, + queryChange, + groupQueryChange, + handleMouseEnter, + handleMouseLeave, + showTagList, + collapseTagList + } = useSelect$3(props, states, ctx); + const { focus } = useFocus(reference); + const { + inputWidth, + selected, + inputLength, + filteredOptionsCount, + visible, + softFocus, + selectedLabel, + hoverIndex, + query, + inputHovering, + currentPlaceholder, + menuVisibleOnFocus, + isOnComposition, + isSilentBlur, + options, + cachedOptions, + optionsCount, + prefixWidth, + tagInMultiLine + } = vue.toRefs(states); + const wrapperKls = vue.computed(() => { + const classList = [nsSelect.b()]; + const _selectSize = vue.unref(selectSize); + if (_selectSize) { + classList.push(nsSelect.m(_selectSize)); + } + if (props.disabled) { + classList.push(nsSelect.m("disabled")); + } + return classList; + }); + const selectTagsStyle = vue.computed(() => ({ + maxWidth: `${vue.unref(inputWidth) - 32}px`, + width: "100%" + })); + const tagTextStyle = vue.computed(() => { + const maxWidth = vue.unref(inputWidth) > 123 ? vue.unref(inputWidth) - 123 : vue.unref(inputWidth) - 75; + return { maxWidth: `${maxWidth}px` }; + }); + vue.provide(selectKey, vue.reactive({ + props, + options, + optionsArray, + cachedOptions, + optionsCount, + filteredOptionsCount, + hoverIndex, + handleOptionSelect, + onOptionCreate, + onOptionDestroy, + selectWrapper, + selected, + setSelected, + queryChange, + groupQueryChange + })); + vue.onMounted(() => { + states.cachedPlaceHolder = currentPlaceholder.value = props.placeholder || (() => t("el.select.placeholder")); + if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) { + currentPlaceholder.value = ""; + } + useResizeObserver(selectWrapper, handleResize); + if (props.remote && props.multiple) { + resetInputHeight(); + } + vue.nextTick(() => { + const refEl = reference.value && reference.value.$el; + if (!refEl) + return; + inputWidth.value = refEl.getBoundingClientRect().width; + if (ctx.slots.prefix) { + const prefix = refEl.querySelector(`.${nsInput.e("prefix")}`); + prefixWidth.value = Math.max(prefix.getBoundingClientRect().width + 5, 30); + } + }); + setSelected(); + }); + if (props.multiple && !Array.isArray(props.modelValue)) { + ctx.emit(UPDATE_MODEL_EVENT, []); + } + if (!props.multiple && Array.isArray(props.modelValue)) { + ctx.emit(UPDATE_MODEL_EVENT, ""); + } + const popperPaneRef = vue.computed(() => { + var _a, _b; + return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef; + }); + const onOptionsRendered = (v) => { + optionList.value = v; + }; + return { + isIOS, + onOptionsRendered, + tagInMultiLine, + prefixWidth, + selectSize, + readonly, + handleResize, + collapseTagSize, + debouncedOnInputChange, + debouncedQueryChange, + deletePrevTag, + deleteTag, + deleteSelected, + handleOptionSelect, + scrollToOption, + inputWidth, + selected, + inputLength, + filteredOptionsCount, + visible, + softFocus, + selectedLabel, + hoverIndex, + query, + inputHovering, + currentPlaceholder, + menuVisibleOnFocus, + isOnComposition, + isSilentBlur, + options, + resetInputHeight, + managePlaceholder, + showClose, + selectDisabled, + iconComponent, + iconReverse, + showNewOption, + emptyText, + toggleLastOptionHitState, + resetInputState, + handleComposition, + handleMenuEnter, + handleFocus, + blur, + handleBlur, + handleClearClick, + handleClose, + handleKeydownEscape, + toggleMenu, + selectOption, + getValueKey, + navigateOptions, + dropMenuVisible, + focus, + reference, + input, + iOSInput, + tooltipRef, + popperPaneRef, + tags, + selectWrapper, + scrollbar, + wrapperKls, + selectTagsStyle, + nsSelect, + tagTextStyle, + handleMouseEnter, + handleMouseLeave, + showTagList, + collapseTagList + }; + } + }); + const _hoisted_1$n = ["disabled", "autocomplete"]; + const _hoisted_2$f = ["disabled"]; + const _hoisted_3$8 = { style: { "height": "100%", "display": "flex", "justify-content": "center", "align-items": "center" } }; + function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_tag = vue.resolveComponent("el-tag"); + const _component_el_tooltip = vue.resolveComponent("el-tooltip"); + const _component_el_icon = vue.resolveComponent("el-icon"); + const _component_el_input = vue.resolveComponent("el-input"); + const _component_el_option = vue.resolveComponent("el-option"); + const _component_el_options = vue.resolveComponent("el-options"); + const _component_el_scrollbar = vue.resolveComponent("el-scrollbar"); + const _component_el_select_menu = vue.resolveComponent("el-select-menu"); + const _directive_click_outside = vue.resolveDirective("click-outside"); + return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { + ref: "selectWrapper", + class: vue.normalizeClass(_ctx.wrapperKls), + onMouseenter: _cache[21] || (_cache[21] = (...args) => _ctx.handleMouseEnter && _ctx.handleMouseEnter(...args)), + onMouseleave: _cache[22] || (_cache[22] = (...args) => _ctx.handleMouseLeave && _ctx.handleMouseLeave(...args)), + onClick: _cache[23] || (_cache[23] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"])) + }, [ + vue.createVNode(_component_el_tooltip, { + ref: "tooltipRef", + visible: _ctx.dropMenuVisible, + placement: _ctx.placement, + teleported: _ctx.teleported, + "popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass], + "popper-options": _ctx.popperOptions, + "fallback-placements": ["bottom-start", "top-start", "right", "left"], + effect: _ctx.effect, + pure: "", + trigger: "click", + transition: `${_ctx.nsSelect.namespace.value}-zoom-in-top`, + "stop-popper-mouse-event": false, + "gpu-acceleration": false, + persistent: _ctx.persistent, + onShow: _ctx.handleMenuEnter + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("div", { + class: "select-trigger", + onMouseenter: _cache[19] || (_cache[19] = ($event) => _ctx.inputHovering = true), + onMouseleave: _cache[20] || (_cache[20] = ($event) => _ctx.inputHovering = false) + }, [ + _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + ref: "tags", + class: vue.normalizeClass(_ctx.nsSelect.e("tags")), + style: vue.normalizeStyle(_ctx.selectTagsStyle) + }, [ + _ctx.collapseTags && _ctx.selected.length ? (vue.openBlock(), vue.createBlock(vue.Transition, { + key: 0, + onAfterLeave: _ctx.resetInputHeight + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass([ + _ctx.nsSelect.b("tags-wrapper"), + { "has-prefix": _ctx.prefixWidth && _ctx.selected.length } + ]) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.showTagList, (item) => { + return vue.openBlock(), vue.createBlock(_component_el_tag, { + key: _ctx.getValueKey(item), + closable: !_ctx.selectDisabled && !item.isDisabled, + size: _ctx.collapseTagSize, + hit: item.hitState, + type: _ctx.tagType, + "disable-transitions": "", + onClose: ($event) => _ctx.deleteTag($event, item) + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")), + style: vue.normalizeStyle(_ctx.tagTextStyle) + }, vue.toDisplayString(item.currentLabel), 7) + ]), + _: 2 + }, 1032, ["closable", "size", "hit", "type", "onClose"]); + }), 128)), + _ctx.selected.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(_component_el_tag, { + key: 0, + closable: false, + size: _ctx.collapseTagSize, + type: _ctx.tagType, + "disable-transitions": "" + }, { + default: vue.withCtx(() => [ + _ctx.collapseTagsTooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, { + key: 0, + disabled: _ctx.dropMenuVisible, + "fallback-placements": ["bottom", "top", "right", "left"], + effect: _ctx.effect, + placement: "bottom", + teleported: _ctx.teleported + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")) + }, "+ " + vue.toDisplayString(_ctx.selected.length - _ctx.maxCollapseTags), 3) + ]), + content: vue.withCtx(() => [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.nsSelect.e("collapse-tags")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.collapseTagList, (item) => { + return vue.openBlock(), vue.createElementBlock("div", { + key: _ctx.getValueKey(item), + class: vue.normalizeClass(_ctx.nsSelect.e("collapse-tag")) + }, [ + vue.createVNode(_component_el_tag, { + class: "in-tooltip", + closable: !_ctx.selectDisabled && !item.isDisabled, + size: _ctx.collapseTagSize, + hit: item.hitState, + type: _ctx.tagType, + "disable-transitions": "", + style: { margin: "2px" }, + onClose: ($event) => _ctx.deleteTag($event, item) + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")), + style: vue.normalizeStyle({ + maxWidth: _ctx.inputWidth - 75 + "px" + }) + }, vue.toDisplayString(item.currentLabel), 7) + ]), + _: 2 + }, 1032, ["closable", "size", "hit", "type", "onClose"]) + ], 2); + }), 128)) + ], 2) + ]), + _: 1 + }, 8, ["disabled", "effect", "teleported"])) : (vue.openBlock(), vue.createElementBlock("span", { + key: 1, + class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")) + }, "+ " + vue.toDisplayString(_ctx.selected.length - _ctx.maxCollapseTags), 3)) + ]), + _: 1 + }, 8, ["size", "type"])) : vue.createCommentVNode("v-if", true) + ], 2) + ]), + _: 1 + }, 8, ["onAfterLeave"])) : vue.createCommentVNode("v-if", true), + !_ctx.collapseTags ? (vue.openBlock(), vue.createBlock(vue.Transition, { + key: 1, + onAfterLeave: _ctx.resetInputHeight + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass([ + _ctx.nsSelect.b("tags-wrapper"), + { "has-prefix": _ctx.prefixWidth && _ctx.selected.length } + ]) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected, (item) => { + return vue.openBlock(), vue.createBlock(_component_el_tag, { + key: _ctx.getValueKey(item), + closable: !_ctx.selectDisabled && !item.isDisabled, + size: _ctx.collapseTagSize, + hit: item.hitState, + type: _ctx.tagType, + "disable-transitions": "", + onClose: ($event) => _ctx.deleteTag($event, item) + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")), + style: vue.normalizeStyle({ maxWidth: _ctx.inputWidth - 75 + "px" }) + }, vue.toDisplayString(item.currentLabel), 7) + ]), + _: 2 + }, 1032, ["closable", "size", "hit", "type", "onClose"]); + }), 128)) + ], 2) + ]), + _: 1 + }, 8, ["onAfterLeave"])) : vue.createCommentVNode("v-if", true), + _ctx.filterable ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", { + key: 2, + ref: "input", + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.query = $event), + type: "text", + class: vue.normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]), + disabled: _ctx.selectDisabled, + autocomplete: _ctx.autocomplete, + style: vue.normalizeStyle({ + marginLeft: _ctx.prefixWidth && !_ctx.selected.length || _ctx.tagInMultiLine ? `${_ctx.prefixWidth}px` : "", + flexGrow: 1, + width: `${_ctx.inputLength / (_ctx.inputWidth - 32)}%`, + maxWidth: `${_ctx.inputWidth - 42}px` + }), + onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)), + onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)), + onKeyup: _cache[3] || (_cache[3] = (...args) => _ctx.managePlaceholder && _ctx.managePlaceholder(...args)), + onKeydown: [ + _cache[4] || (_cache[4] = (...args) => _ctx.resetInputState && _ctx.resetInputState(...args)), + _cache[5] || (_cache[5] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["prevent"]), ["down"])), + _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["prevent"]), ["up"])), + _cache[7] || (_cache[7] = vue.withKeys((...args) => _ctx.handleKeydownEscape && _ctx.handleKeydownEscape(...args), ["esc"])), + _cache[8] || (_cache[8] = vue.withKeys(vue.withModifiers((...args) => _ctx.selectOption && _ctx.selectOption(...args), ["stop", "prevent"]), ["enter"])), + _cache[9] || (_cache[9] = vue.withKeys((...args) => _ctx.deletePrevTag && _ctx.deletePrevTag(...args), ["delete"])), + _cache[10] || (_cache[10] = vue.withKeys(($event) => _ctx.visible = false, ["tab"])) + ], + onCompositionstart: _cache[11] || (_cache[11] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)), + onCompositionupdate: _cache[12] || (_cache[12] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)), + onCompositionend: _cache[13] || (_cache[13] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)), + onInput: _cache[14] || (_cache[14] = (...args) => _ctx.debouncedQueryChange && _ctx.debouncedQueryChange(...args)) + }, null, 46, _hoisted_1$n)), [ + [vue.vModelText, _ctx.query] + ]) : vue.createCommentVNode("v-if", true) + ], 6)) : vue.createCommentVNode("v-if", true), + vue.createCommentVNode(" fix: https://github.com/element-plus/element-plus/issues/11415 "), + _ctx.isIOS && !_ctx.multiple && _ctx.filterable && _ctx.readonly ? (vue.openBlock(), vue.createElementBlock("input", { + key: 1, + ref: "iOSInput", + class: vue.normalizeClass([ + _ctx.nsSelect.e("input"), + _ctx.nsSelect.is(_ctx.selectSize), + _ctx.nsSelect.em("input", "iOS") + ]), + disabled: _ctx.selectDisabled, + type: "text" + }, null, 10, _hoisted_2$f)) : vue.createCommentVNode("v-if", true), + vue.createVNode(_component_el_input, { + id: _ctx.id, + ref: "reference", + modelValue: _ctx.selectedLabel, + "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => _ctx.selectedLabel = $event), + type: "text", + placeholder: typeof _ctx.currentPlaceholder === "function" ? _ctx.currentPlaceholder() : _ctx.currentPlaceholder, + name: _ctx.name, + autocomplete: _ctx.autocomplete, + size: _ctx.selectSize, + disabled: _ctx.selectDisabled, + readonly: _ctx.readonly, + "validate-event": false, + class: vue.normalizeClass([_ctx.nsSelect.is("focus", _ctx.visible)]), + tabindex: _ctx.multiple && _ctx.filterable ? -1 : void 0, + onFocus: _ctx.handleFocus, + onBlur: _ctx.handleBlur, + onInput: _ctx.debouncedOnInputChange, + onPaste: _ctx.debouncedOnInputChange, + onCompositionstart: _ctx.handleComposition, + onCompositionupdate: _ctx.handleComposition, + onCompositionend: _ctx.handleComposition, + onKeydown: [ + _cache[16] || (_cache[16] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"])), + _cache[17] || (_cache[17] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"])), + vue.withKeys(vue.withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]), + vue.withKeys(_ctx.handleKeydownEscape, ["esc"]), + _cache[18] || (_cache[18] = vue.withKeys(($event) => _ctx.visible = false, ["tab"])) + ] + }, vue.createSlots({ + suffix: vue.withCtx(() => [ + _ctx.iconComponent && !_ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 0, + class: vue.normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon"), _ctx.iconReverse]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true), + _ctx.showClose && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 1, + class: vue.normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon")]), + onClick: _ctx.handleClearClick + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon))) + ]), + _: 1 + }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true) + ]), + _: 2 + }, [ + _ctx.$slots.prefix ? { + name: "prefix", + fn: vue.withCtx(() => [ + vue.createElementVNode("div", _hoisted_3$8, [ + vue.renderSlot(_ctx.$slots, "prefix") + ]) + ]) + } : void 0 + ]), 1032, ["id", "modelValue", "placeholder", "name", "autocomplete", "size", "disabled", "readonly", "class", "tabindex", "onFocus", "onBlur", "onInput", "onPaste", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onKeydown"]) + ], 32) + ]), + content: vue.withCtx(() => [ + vue.createVNode(_component_el_select_menu, null, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createVNode(_component_el_scrollbar, { + ref: "scrollbar", + tag: "ul", + "wrap-class": _ctx.nsSelect.be("dropdown", "wrap"), + "view-class": _ctx.nsSelect.be("dropdown", "list"), + class: vue.normalizeClass([ + _ctx.nsSelect.is("empty", !_ctx.allowCreate && Boolean(_ctx.query) && _ctx.filteredOptionsCount === 0) + ]) + }, { + default: vue.withCtx(() => [ + _ctx.showNewOption ? (vue.openBlock(), vue.createBlock(_component_el_option, { + key: 0, + value: _ctx.query, + created: true + }, null, 8, ["value"])) : vue.createCommentVNode("v-if", true), + vue.createVNode(_component_el_options, { onUpdateOptions: _ctx.onOptionsRendered }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["onUpdateOptions"]) + ]), + _: 3 + }, 8, ["wrap-class", "view-class", "class"]), [ + [vue.vShow, _ctx.options.size > 0 && !_ctx.loading] + ]), + _ctx.emptyText && (!_ctx.allowCreate || _ctx.loading || _ctx.allowCreate && _ctx.options.size === 0) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + _ctx.$slots.empty ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }) : (vue.openBlock(), vue.createElementBlock("p", { + key: 1, + class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "empty")) + }, vue.toDisplayString(_ctx.emptyText), 3)) + ], 64)) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }) + ]), + _: 3 + }, 8, ["visible", "placement", "teleported", "popper-class", "popper-options", "effect", "transition", "persistent", "onShow"]) + ], 34)), [ + [_directive_click_outside, _ctx.handleClose, _ctx.popperPaneRef] + ]); + } + var Select$1 = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$9], ["__file", "select.vue"]]); + + const _sfc_main$N = vue.defineComponent({ + name: "ElOptionGroup", + componentName: "ElOptionGroup", + props: { + label: String, + disabled: { + type: Boolean, + default: false + } + }, + setup(props) { + const ns = useNamespace("select"); + const visible = vue.ref(true); + const instance = vue.getCurrentInstance(); + const children = vue.ref([]); + vue.provide(selectGroupKey, vue.reactive({ + ...vue.toRefs(props) + })); + const select = vue.inject(selectKey); + vue.onMounted(() => { + children.value = flattedChildren(instance.subTree); + }); + const flattedChildren = (node) => { + const children2 = []; + if (Array.isArray(node.children)) { + node.children.forEach((child) => { + var _a; + if (child.type && child.type.name === "ElOption" && child.component && child.component.proxy) { + children2.push(child.component.proxy); + } else if ((_a = child.children) == null ? void 0 : _a.length) { + children2.push(...flattedChildren(child)); + } + }); + } + return children2; + }; + const { groupQueryChange } = vue.toRaw(select); + vue.watch(groupQueryChange, () => { + visible.value = children.value.some((option) => option.visible === true); + }, { flush: "post" }); + return { + visible, + ns + }; + } + }); + function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) { + return vue.withDirectives((vue.openBlock(), vue.createElementBlock("ul", { + class: vue.normalizeClass(_ctx.ns.be("group", "wrap")) + }, [ + vue.createElementVNode("li", { + class: vue.normalizeClass(_ctx.ns.be("group", "title")) + }, vue.toDisplayString(_ctx.label), 3), + vue.createElementVNode("li", null, [ + vue.createElementVNode("ul", { + class: vue.normalizeClass(_ctx.ns.b("group")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2) + ]) + ], 2)), [ + [vue.vShow, _ctx.visible] + ]); + } + var OptionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$8], ["__file", "option-group.vue"]]); + + const ElSelect = withInstall(Select$1, { + Option, + OptionGroup + }); + const ElOption = withNoopInstall(Option); + const ElOptionGroup = withNoopInstall(OptionGroup); + + const usePagination = () => vue.inject(elPaginationKey, {}); + + const paginationSizesProps = buildProps({ + pageSize: { + type: Number, + required: true + }, + pageSizes: { + type: definePropType(Array), + default: () => mutable([10, 20, 30, 40, 50, 100]) + }, + popperClass: { + type: String + }, + disabled: Boolean, + size: { + type: String, + values: componentSizes + } + }); + + const __default__$C = vue.defineComponent({ + name: "ElPaginationSizes" + }); + const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({ + ...__default__$C, + props: paginationSizesProps, + emits: ["page-size-change"], + setup(__props, { emit }) { + const props = __props; + const { t } = useLocale(); + const ns = useNamespace("pagination"); + const pagination = usePagination(); + const innerPageSize = vue.ref(props.pageSize); + vue.watch(() => props.pageSizes, (newVal, oldVal) => { + if (isEqual$1(newVal, oldVal)) + return; + if (Array.isArray(newVal)) { + const pageSize = newVal.includes(props.pageSize) ? props.pageSize : props.pageSizes[0]; + emit("page-size-change", pageSize); + } + }); + vue.watch(() => props.pageSize, (newVal) => { + innerPageSize.value = newVal; + }); + const innerPageSizes = vue.computed(() => props.pageSizes); + function handleChange(val) { + var _a; + if (val !== innerPageSize.value) { + innerPageSize.value = val; + (_a = pagination.handleSizeChange) == null ? void 0 : _a.call(pagination, Number(val)); + } + } + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("span", { + class: vue.normalizeClass(vue.unref(ns).e("sizes")) + }, [ + vue.createVNode(vue.unref(ElSelect), { + "model-value": innerPageSize.value, + disabled: _ctx.disabled, + "popper-class": _ctx.popperClass, + size: _ctx.size, + "validate-event": false, + onChange: handleChange + }, { + default: vue.withCtx(() => [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(innerPageSizes), (item) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElOption), { + key: item, + value: item, + label: item + vue.unref(t)("el.pagination.pagesize") + }, null, 8, ["value", "label"]); + }), 128)) + ]), + _: 1 + }, 8, ["model-value", "disabled", "popper-class", "size"]) + ], 2); + }; + } + }); + var Sizes = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__file", "sizes.vue"]]); + + const paginationJumperProps = buildProps({ + size: { + type: String, + values: componentSizes + } + }); + + const _hoisted_1$m = ["disabled"]; + const __default__$B = vue.defineComponent({ + name: "ElPaginationJumper" + }); + const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({ + ...__default__$B, + props: paginationJumperProps, + setup(__props) { + const { t } = useLocale(); + const ns = useNamespace("pagination"); + const { pageCount, disabled, currentPage, changeEvent } = usePagination(); + const userInput = vue.ref(); + const innerValue = vue.computed(() => { + var _a; + return (_a = userInput.value) != null ? _a : currentPage == null ? void 0 : currentPage.value; + }); + function handleInput(val) { + userInput.value = +val; + } + function handleChange(val) { + val = Math.trunc(+val); + changeEvent == null ? void 0 : changeEvent(+val); + userInput.value = void 0; + } + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("span", { + class: vue.normalizeClass(vue.unref(ns).e("jump")), + disabled: vue.unref(disabled) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass([vue.unref(ns).e("goto")]) + }, vue.toDisplayString(vue.unref(t)("el.pagination.goto")), 3), + vue.createVNode(vue.unref(ElInput), { + size: _ctx.size, + class: vue.normalizeClass([vue.unref(ns).e("editor"), vue.unref(ns).is("in-pagination")]), + min: 1, + max: vue.unref(pageCount), + disabled: vue.unref(disabled), + "model-value": vue.unref(innerValue), + "validate-event": false, + label: vue.unref(t)("el.pagination.page"), + type: "number", + "onUpdate:modelValue": handleInput, + onChange: handleChange + }, null, 8, ["size", "class", "max", "disabled", "model-value", "label"]), + vue.createElementVNode("span", { + class: vue.normalizeClass([vue.unref(ns).e("classifier")]) + }, vue.toDisplayString(vue.unref(t)("el.pagination.pageClassifier")), 3) + ], 10, _hoisted_1$m); + }; + } + }); + var Jumper = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__file", "jumper.vue"]]); + + const paginationTotalProps = buildProps({ + total: { + type: Number, + default: 1e3 + } + }); + + const _hoisted_1$l = ["disabled"]; + const __default__$A = vue.defineComponent({ + name: "ElPaginationTotal" + }); + const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({ + ...__default__$A, + props: paginationTotalProps, + setup(__props) { + const { t } = useLocale(); + const ns = useNamespace("pagination"); + const { disabled } = usePagination(); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("span", { + class: vue.normalizeClass(vue.unref(ns).e("total")), + disabled: vue.unref(disabled) + }, vue.toDisplayString(vue.unref(t)("el.pagination.total", { + total: _ctx.total + })), 11, _hoisted_1$l); + }; + } + }); + var Total = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__file", "total.vue"]]); + + const paginationPagerProps = buildProps({ + currentPage: { + type: Number, + default: 1 + }, + pageCount: { + type: Number, + required: true + }, + pagerCount: { + type: Number, + default: 7 + }, + disabled: Boolean + }); + + const _hoisted_1$k = ["onKeyup"]; + const _hoisted_2$e = ["aria-current", "aria-label", "tabindex"]; + const _hoisted_3$7 = ["tabindex", "aria-label"]; + const _hoisted_4$5 = ["aria-current", "aria-label", "tabindex"]; + const _hoisted_5$4 = ["tabindex", "aria-label"]; + const _hoisted_6 = ["aria-current", "aria-label", "tabindex"]; + const __default__$z = vue.defineComponent({ + name: "ElPaginationPager" + }); + const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({ + ...__default__$z, + props: paginationPagerProps, + emits: ["change"], + setup(__props, { emit }) { + const props = __props; + const nsPager = useNamespace("pager"); + const nsIcon = useNamespace("icon"); + const { t } = useLocale(); + const showPrevMore = vue.ref(false); + const showNextMore = vue.ref(false); + const quickPrevHover = vue.ref(false); + const quickNextHover = vue.ref(false); + const quickPrevFocus = vue.ref(false); + const quickNextFocus = vue.ref(false); + const pagers = vue.computed(() => { + const pagerCount = props.pagerCount; + const halfPagerCount = (pagerCount - 1) / 2; + const currentPage = Number(props.currentPage); + const pageCount = Number(props.pageCount); + let showPrevMore2 = false; + let showNextMore2 = false; + if (pageCount > pagerCount) { + if (currentPage > pagerCount - halfPagerCount) { + showPrevMore2 = true; + } + if (currentPage < pageCount - halfPagerCount) { + showNextMore2 = true; + } + } + const array = []; + if (showPrevMore2 && !showNextMore2) { + const startPage = pageCount - (pagerCount - 2); + for (let i = startPage; i < pageCount; i++) { + array.push(i); + } + } else if (!showPrevMore2 && showNextMore2) { + for (let i = 2; i < pagerCount; i++) { + array.push(i); + } + } else if (showPrevMore2 && showNextMore2) { + const offset = Math.floor(pagerCount / 2) - 1; + for (let i = currentPage - offset; i <= currentPage + offset; i++) { + array.push(i); + } + } else { + for (let i = 2; i < pageCount; i++) { + array.push(i); + } + } + return array; + }); + const tabindex = vue.computed(() => props.disabled ? -1 : 0); + vue.watchEffect(() => { + const halfPagerCount = (props.pagerCount - 1) / 2; + showPrevMore.value = false; + showNextMore.value = false; + if (props.pageCount > props.pagerCount) { + if (props.currentPage > props.pagerCount - halfPagerCount) { + showPrevMore.value = true; + } + if (props.currentPage < props.pageCount - halfPagerCount) { + showNextMore.value = true; + } + } + }); + function onMouseEnter(forward = false) { + if (props.disabled) + return; + if (forward) { + quickPrevHover.value = true; + } else { + quickNextHover.value = true; + } + } + function onFocus(forward = false) { + if (forward) { + quickPrevFocus.value = true; + } else { + quickNextFocus.value = true; + } + } + function onEnter(e) { + const target = e.target; + if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("number")) { + const newPage = Number(target.textContent); + if (newPage !== props.currentPage) { + emit("change", newPage); + } + } else if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("more")) { + onPagerClick(e); + } + } + function onPagerClick(event) { + const target = event.target; + if (target.tagName.toLowerCase() === "ul" || props.disabled) { + return; + } + let newPage = Number(target.textContent); + const pageCount = props.pageCount; + const currentPage = props.currentPage; + const pagerCountOffset = props.pagerCount - 2; + if (target.className.includes("more")) { + if (target.className.includes("quickprev")) { + newPage = currentPage - pagerCountOffset; + } else if (target.className.includes("quicknext")) { + newPage = currentPage + pagerCountOffset; + } + } + if (!Number.isNaN(+newPage)) { + if (newPage < 1) { + newPage = 1; + } + if (newPage > pageCount) { + newPage = pageCount; + } + } + if (newPage !== currentPage) { + emit("change", newPage); + } + } + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("ul", { + class: vue.normalizeClass(vue.unref(nsPager).b()), + onClick: onPagerClick, + onKeyup: vue.withKeys(onEnter, ["enter"]) + }, [ + _ctx.pageCount > 0 ? (vue.openBlock(), vue.createElementBlock("li", { + key: 0, + class: vue.normalizeClass([[ + vue.unref(nsPager).is("active", _ctx.currentPage === 1), + vue.unref(nsPager).is("disabled", _ctx.disabled) + ], "number"]), + "aria-current": _ctx.currentPage === 1, + "aria-label": vue.unref(t)("el.pagination.currentPage", { pager: 1 }), + tabindex: vue.unref(tabindex) + }, " 1 ", 10, _hoisted_2$e)) : vue.createCommentVNode("v-if", true), + showPrevMore.value ? (vue.openBlock(), vue.createElementBlock("li", { + key: 1, + class: vue.normalizeClass([ + "more", + "btn-quickprev", + vue.unref(nsIcon).b(), + vue.unref(nsPager).is("disabled", _ctx.disabled) + ]), + tabindex: vue.unref(tabindex), + "aria-label": vue.unref(t)("el.pagination.prevPages", { pager: _ctx.pagerCount - 2 }), + onMouseenter: _cache[0] || (_cache[0] = ($event) => onMouseEnter(true)), + onMouseleave: _cache[1] || (_cache[1] = ($event) => quickPrevHover.value = false), + onFocus: _cache[2] || (_cache[2] = ($event) => onFocus(true)), + onBlur: _cache[3] || (_cache[3] = ($event) => quickPrevFocus.value = false) + }, [ + (quickPrevHover.value || quickPrevFocus.value) && !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(d_arrow_left_default), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(more_filled_default), { key: 1 })) + ], 42, _hoisted_3$7)) : vue.createCommentVNode("v-if", true), + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(pagers), (pager) => { + return vue.openBlock(), vue.createElementBlock("li", { + key: pager, + class: vue.normalizeClass([[ + vue.unref(nsPager).is("active", _ctx.currentPage === pager), + vue.unref(nsPager).is("disabled", _ctx.disabled) + ], "number"]), + "aria-current": _ctx.currentPage === pager, + "aria-label": vue.unref(t)("el.pagination.currentPage", { pager }), + tabindex: vue.unref(tabindex) + }, vue.toDisplayString(pager), 11, _hoisted_4$5); + }), 128)), + showNextMore.value ? (vue.openBlock(), vue.createElementBlock("li", { + key: 2, + class: vue.normalizeClass([ + "more", + "btn-quicknext", + vue.unref(nsIcon).b(), + vue.unref(nsPager).is("disabled", _ctx.disabled) + ]), + tabindex: vue.unref(tabindex), + "aria-label": vue.unref(t)("el.pagination.nextPages", { pager: _ctx.pagerCount - 2 }), + onMouseenter: _cache[4] || (_cache[4] = ($event) => onMouseEnter()), + onMouseleave: _cache[5] || (_cache[5] = ($event) => quickNextHover.value = false), + onFocus: _cache[6] || (_cache[6] = ($event) => onFocus()), + onBlur: _cache[7] || (_cache[7] = ($event) => quickNextFocus.value = false) + }, [ + (quickNextHover.value || quickNextFocus.value) && !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(d_arrow_right_default), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(more_filled_default), { key: 1 })) + ], 42, _hoisted_5$4)) : vue.createCommentVNode("v-if", true), + _ctx.pageCount > 1 ? (vue.openBlock(), vue.createElementBlock("li", { + key: 3, + class: vue.normalizeClass([[ + vue.unref(nsPager).is("active", _ctx.currentPage === _ctx.pageCount), + vue.unref(nsPager).is("disabled", _ctx.disabled) + ], "number"]), + "aria-current": _ctx.currentPage === _ctx.pageCount, + "aria-label": vue.unref(t)("el.pagination.currentPage", { pager: _ctx.pageCount }), + tabindex: vue.unref(tabindex) + }, vue.toDisplayString(_ctx.pageCount), 11, _hoisted_6)) : vue.createCommentVNode("v-if", true) + ], 42, _hoisted_1$k); + }; + } + }); + var Pager = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__file", "pager.vue"]]); + + const isAbsent = (v) => typeof v !== "number"; + const paginationProps = buildProps({ + total: Number, + pageSize: Number, + defaultPageSize: Number, + currentPage: Number, + defaultCurrentPage: Number, + pageCount: Number, + pagerCount: { + type: Number, + validator: (value) => { + return isNumber$1(value) && Math.trunc(value) === value && value > 4 && value < 22 && value % 2 === 1; + }, + default: 7 + }, + layout: { + type: String, + default: ["prev", "pager", "next", "jumper", "->", "total"].join(", ") + }, + pageSizes: { + type: definePropType(Array), + default: () => mutable([10, 20, 30, 40, 50, 100]) + }, + popperClass: { + type: String, + default: "" + }, + prevText: { + type: String, + default: "" + }, + prevIcon: { + type: iconPropType, + default: () => arrow_left_default + }, + nextText: { + type: String, + default: "" + }, + nextIcon: { + type: iconPropType, + default: () => arrow_right_default + }, + small: Boolean, + background: Boolean, + disabled: Boolean, + hideOnSinglePage: Boolean + }); + const paginationEmits = { + "update:current-page": (val) => isNumber$1(val), + "update:page-size": (val) => isNumber$1(val), + "size-change": (val) => isNumber$1(val), + "current-change": (val) => isNumber$1(val), + "prev-click": (val) => isNumber$1(val), + "next-click": (val) => isNumber$1(val) + }; + const componentName = "ElPagination"; + var Pagination = vue.defineComponent({ + name: componentName, + props: paginationProps, + emits: paginationEmits, + setup(props, { emit, slots }) { + const { t } = useLocale(); + const ns = useNamespace("pagination"); + const vnodeProps = vue.getCurrentInstance().vnode.props || {}; + const hasCurrentPageListener = "onUpdate:currentPage" in vnodeProps || "onUpdate:current-page" in vnodeProps || "onCurrentChange" in vnodeProps; + const hasPageSizeListener = "onUpdate:pageSize" in vnodeProps || "onUpdate:page-size" in vnodeProps || "onSizeChange" in vnodeProps; + const assertValidUsage = vue.computed(() => { + if (isAbsent(props.total) && isAbsent(props.pageCount)) + return false; + if (!isAbsent(props.currentPage) && !hasCurrentPageListener) + return false; + if (props.layout.includes("sizes")) { + if (!isAbsent(props.pageCount)) { + if (!hasPageSizeListener) + return false; + } else if (!isAbsent(props.total)) { + if (!isAbsent(props.pageSize)) { + if (!hasPageSizeListener) { + return false; + } + } + } + } + return true; + }); + const innerPageSize = vue.ref(isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize); + const innerCurrentPage = vue.ref(isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage); + const pageSizeBridge = vue.computed({ + get() { + return isAbsent(props.pageSize) ? innerPageSize.value : props.pageSize; + }, + set(v) { + if (isAbsent(props.pageSize)) { + innerPageSize.value = v; + } + if (hasPageSizeListener) { + emit("update:page-size", v); + emit("size-change", v); + } + } + }); + const pageCountBridge = vue.computed(() => { + let pageCount = 0; + if (!isAbsent(props.pageCount)) { + pageCount = props.pageCount; + } else if (!isAbsent(props.total)) { + pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.value)); + } + return pageCount; + }); + const currentPageBridge = vue.computed({ + get() { + return isAbsent(props.currentPage) ? innerCurrentPage.value : props.currentPage; + }, + set(v) { + let newCurrentPage = v; + if (v < 1) { + newCurrentPage = 1; + } else if (v > pageCountBridge.value) { + newCurrentPage = pageCountBridge.value; + } + if (isAbsent(props.currentPage)) { + innerCurrentPage.value = newCurrentPage; + } + if (hasCurrentPageListener) { + emit("update:current-page", newCurrentPage); + emit("current-change", newCurrentPage); + } + } + }); + vue.watch(pageCountBridge, (val) => { + if (currentPageBridge.value > val) + currentPageBridge.value = val; + }); + function handleCurrentChange(val) { + currentPageBridge.value = val; + } + function handleSizeChange(val) { + pageSizeBridge.value = val; + const newPageCount = pageCountBridge.value; + if (currentPageBridge.value > newPageCount) { + currentPageBridge.value = newPageCount; + } + } + function prev() { + if (props.disabled) + return; + currentPageBridge.value -= 1; + emit("prev-click", currentPageBridge.value); + } + function next() { + if (props.disabled) + return; + currentPageBridge.value += 1; + emit("next-click", currentPageBridge.value); + } + function addClass(element, cls) { + if (element) { + if (!element.props) { + element.props = {}; + } + element.props.class = [element.props.class, cls].join(" "); + } + } + vue.provide(elPaginationKey, { + pageCount: pageCountBridge, + disabled: vue.computed(() => props.disabled), + currentPage: currentPageBridge, + changeEvent: handleCurrentChange, + handleSizeChange + }); + return () => { + var _a, _b; + if (!assertValidUsage.value) { + debugWarn(componentName, t("el.pagination.deprecationWarning")); + return null; + } + if (!props.layout) + return null; + if (props.hideOnSinglePage && pageCountBridge.value <= 1) + return null; + const rootChildren = []; + const rightWrapperChildren = []; + const rightWrapperRoot = vue.h("div", { class: ns.e("rightwrapper") }, rightWrapperChildren); + const TEMPLATE_MAP = { + prev: vue.h(Prev, { + disabled: props.disabled, + currentPage: currentPageBridge.value, + prevText: props.prevText, + prevIcon: props.prevIcon, + onClick: prev + }), + jumper: vue.h(Jumper, { + size: props.small ? "small" : "default" + }), + pager: vue.h(Pager, { + currentPage: currentPageBridge.value, + pageCount: pageCountBridge.value, + pagerCount: props.pagerCount, + onChange: handleCurrentChange, + disabled: props.disabled + }), + next: vue.h(Next, { + disabled: props.disabled, + currentPage: currentPageBridge.value, + pageCount: pageCountBridge.value, + nextText: props.nextText, + nextIcon: props.nextIcon, + onClick: next + }), + sizes: vue.h(Sizes, { + pageSize: pageSizeBridge.value, + pageSizes: props.pageSizes, + popperClass: props.popperClass, + disabled: props.disabled, + size: props.small ? "small" : "default" + }), + slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : null, + total: vue.h(Total, { total: isAbsent(props.total) ? 0 : props.total }) + }; + const components = props.layout.split(",").map((item) => item.trim()); + let haveRightWrapper = false; + components.forEach((c) => { + if (c === "->") { + haveRightWrapper = true; + return; + } + if (!haveRightWrapper) { + rootChildren.push(TEMPLATE_MAP[c]); + } else { + rightWrapperChildren.push(TEMPLATE_MAP[c]); + } + }); + addClass(rootChildren[0], ns.is("first")); + addClass(rootChildren[rootChildren.length - 1], ns.is("last")); + if (haveRightWrapper && rightWrapperChildren.length > 0) { + addClass(rightWrapperChildren[0], ns.is("first")); + addClass(rightWrapperChildren[rightWrapperChildren.length - 1], ns.is("last")); + rootChildren.push(rightWrapperRoot); + } + return vue.h("div", { + class: [ + ns.b(), + ns.is("background", props.background), + { + [ns.m("small")]: props.small + } + ] + }, rootChildren); + }; + } + }); + + const ElPagination = withInstall(Pagination); + + const popconfirmProps = buildProps({ + title: String, + confirmButtonText: String, + cancelButtonText: String, + confirmButtonType: { + type: String, + values: buttonTypes, + default: "primary" + }, + cancelButtonType: { + type: String, + values: buttonTypes, + default: "text" + }, + icon: { + type: iconPropType, + default: () => question_filled_default + }, + iconColor: { + type: String, + default: "#f90" + }, + hideIcon: { + type: Boolean, + default: false + }, + hideAfter: { + type: Number, + default: 200 + }, + teleported: useTooltipContentProps.teleported, + persistent: useTooltipContentProps.persistent, + width: { + type: [String, Number], + default: 150 + } + }); + const popconfirmEmits = { + confirm: (e) => e instanceof MouseEvent, + cancel: (e) => e instanceof MouseEvent + }; + + const __default__$y = vue.defineComponent({ + name: "ElPopconfirm" + }); + const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({ + ...__default__$y, + props: popconfirmProps, + emits: popconfirmEmits, + setup(__props, { emit }) { + const props = __props; + const { t } = useLocale(); + const ns = useNamespace("popconfirm"); + const tooltipRef = vue.ref(); + const hidePopper = () => { + var _a, _b; + (_b = (_a = tooltipRef.value) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a); + }; + const style = vue.computed(() => { + return { + width: addUnit(props.width) + }; + }); + const confirm = (e) => { + emit("confirm", e); + hidePopper(); + }; + const cancel = (e) => { + emit("cancel", e); + hidePopper(); + }; + const finalConfirmButtonText = vue.computed(() => props.confirmButtonText || t("el.popconfirm.confirmButtonText")); + const finalCancelButtonText = vue.computed(() => props.cancelButtonText || t("el.popconfirm.cancelButtonText")); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), vue.mergeProps({ + ref_key: "tooltipRef", + ref: tooltipRef, + trigger: "click", + effect: "light" + }, _ctx.$attrs, { + "popper-class": `${vue.unref(ns).namespace.value}-popover`, + "popper-style": vue.unref(style), + teleported: _ctx.teleported, + "fallback-placements": ["bottom", "top", "right", "left"], + "hide-after": _ctx.hideAfter, + persistent: _ctx.persistent + }), { + content: vue.withCtx(() => [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).b()) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("main")) + }, [ + !_ctx.hideIcon && _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("icon")), + style: vue.normalizeStyle({ color: _ctx.iconColor }) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) + ]), + _: 1 + }, 8, ["class", "style"])) : vue.createCommentVNode("v-if", true), + vue.createTextVNode(" " + vue.toDisplayString(_ctx.title), 1) + ], 2), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("action")) + }, [ + vue.createVNode(vue.unref(ElButton), { + size: "small", + type: _ctx.cancelButtonType === "text" ? "" : _ctx.cancelButtonType, + text: _ctx.cancelButtonType === "text", + onClick: cancel + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(finalCancelButtonText)), 1) + ]), + _: 1 + }, 8, ["type", "text"]), + vue.createVNode(vue.unref(ElButton), { + size: "small", + type: _ctx.confirmButtonType === "text" ? "" : _ctx.confirmButtonType, + text: _ctx.confirmButtonType === "text", + onClick: confirm + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(vue.unref(finalConfirmButtonText)), 1) + ]), + _: 1 + }, 8, ["type", "text"]) + ], 2) + ], 2) + ]), + default: vue.withCtx(() => [ + _ctx.$slots.reference ? vue.renderSlot(_ctx.$slots, "reference", { key: 0 }) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 16, ["popper-class", "popper-style", "teleported", "hide-after", "persistent"]); + }; + } + }); + var Popconfirm = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__file", "popconfirm.vue"]]); + + const ElPopconfirm = withInstall(Popconfirm); + + const popoverProps = buildProps({ + trigger: useTooltipTriggerProps.trigger, + placement: dropdownProps.placement, + disabled: useTooltipTriggerProps.disabled, + visible: useTooltipContentProps.visible, + transition: useTooltipContentProps.transition, + popperOptions: dropdownProps.popperOptions, + tabindex: dropdownProps.tabindex, + content: useTooltipContentProps.content, + popperStyle: useTooltipContentProps.popperStyle, + popperClass: useTooltipContentProps.popperClass, + enterable: { + ...useTooltipContentProps.enterable, + default: true + }, + effect: { + ...useTooltipContentProps.effect, + default: "light" + }, + teleported: useTooltipContentProps.teleported, + title: String, + width: { + type: [String, Number], + default: 150 + }, + offset: { + type: Number, + default: void 0 + }, + showAfter: { + type: Number, + default: 0 + }, + hideAfter: { + type: Number, + default: 200 + }, + autoClose: { + type: Number, + default: 0 + }, + showArrow: { + type: Boolean, + default: true + }, + persistent: { + type: Boolean, + default: true + }, + "onUpdate:visible": { + type: Function + } + }); + const popoverEmits = { + "update:visible": (value) => isBoolean$1(value), + "before-enter": () => true, + "before-leave": () => true, + "after-enter": () => true, + "after-leave": () => true + }; + + const updateEventKeyRaw = `onUpdate:visible`; + const __default__$x = vue.defineComponent({ + name: "ElPopover" + }); + const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({ + ...__default__$x, + props: popoverProps, + emits: popoverEmits, + setup(__props, { expose, emit }) { + const props = __props; + const onUpdateVisible = vue.computed(() => { + return props[updateEventKeyRaw]; + }); + const ns = useNamespace("popover"); + const tooltipRef = vue.ref(); + const popperRef = vue.computed(() => { + var _a; + return (_a = vue.unref(tooltipRef)) == null ? void 0 : _a.popperRef; + }); + const style = vue.computed(() => { + return [ + { + width: addUnit(props.width) + }, + props.popperStyle + ]; + }); + const kls = vue.computed(() => { + return [ns.b(), props.popperClass, { [ns.m("plain")]: !!props.content }]; + }); + const gpuAcceleration = vue.computed(() => { + return props.transition === `${ns.namespace.value}-fade-in-linear`; + }); + const hide = () => { + var _a; + (_a = tooltipRef.value) == null ? void 0 : _a.hide(); + }; + const beforeEnter = () => { + emit("before-enter"); + }; + const beforeLeave = () => { + emit("before-leave"); + }; + const afterEnter = () => { + emit("after-enter"); + }; + const afterLeave = () => { + emit("update:visible", false); + emit("after-leave"); + }; + expose({ + popperRef, + hide + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), vue.mergeProps({ + ref_key: "tooltipRef", + ref: tooltipRef + }, _ctx.$attrs, { + trigger: _ctx.trigger, + placement: _ctx.placement, + disabled: _ctx.disabled, + visible: _ctx.visible, + transition: _ctx.transition, + "popper-options": _ctx.popperOptions, + tabindex: _ctx.tabindex, + content: _ctx.content, + offset: _ctx.offset, + "show-after": _ctx.showAfter, + "hide-after": _ctx.hideAfter, + "auto-close": _ctx.autoClose, + "show-arrow": _ctx.showArrow, + "aria-label": _ctx.title, + effect: _ctx.effect, + enterable: _ctx.enterable, + "popper-class": vue.unref(kls), + "popper-style": vue.unref(style), + teleported: _ctx.teleported, + persistent: _ctx.persistent, + "gpu-acceleration": vue.unref(gpuAcceleration), + "onUpdate:visible": vue.unref(onUpdateVisible), + onBeforeShow: beforeEnter, + onBeforeHide: beforeLeave, + onShow: afterEnter, + onHide: afterLeave + }), { + content: vue.withCtx(() => [ + _ctx.title ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("title")), + role: "title" + }, vue.toDisplayString(_ctx.title), 3)) : vue.createCommentVNode("v-if", true), + vue.renderSlot(_ctx.$slots, "default", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.content), 1) + ]) + ]), + default: vue.withCtx(() => [ + _ctx.$slots.reference ? vue.renderSlot(_ctx.$slots, "reference", { key: 0 }) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 16, ["trigger", "placement", "disabled", "visible", "transition", "popper-options", "tabindex", "content", "offset", "show-after", "hide-after", "auto-close", "show-arrow", "aria-label", "effect", "enterable", "popper-class", "popper-style", "teleported", "persistent", "gpu-acceleration", "onUpdate:visible"]); + }; + } + }); + var Popover = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__file", "popover.vue"]]); + + const attachEvents = (el, binding) => { + const popperComponent = binding.arg || binding.value; + const popover = popperComponent == null ? void 0 : popperComponent.popperRef; + if (popover) { + popover.triggerRef = el; + } + }; + var PopoverDirective = { + mounted(el, binding) { + attachEvents(el, binding); + }, + updated(el, binding) { + attachEvents(el, binding); + } + }; + const VPopover = "popover"; + + const ElPopoverDirective = withInstallDirective(PopoverDirective, VPopover); + const ElPopover = withInstall(Popover, { + directive: ElPopoverDirective + }); + + const progressProps = buildProps({ + type: { + type: String, + default: "line", + values: ["line", "circle", "dashboard"] + }, + percentage: { + type: Number, + default: 0, + validator: (val) => val >= 0 && val <= 100 + }, + status: { + type: String, + default: "", + values: ["", "success", "exception", "warning"] + }, + indeterminate: { + type: Boolean, + default: false + }, + duration: { + type: Number, + default: 3 + }, + strokeWidth: { + type: Number, + default: 6 + }, + strokeLinecap: { + type: definePropType(String), + default: "round" + }, + textInside: { + type: Boolean, + default: false + }, + width: { + type: Number, + default: 126 + }, + showText: { + type: Boolean, + default: true + }, + color: { + type: definePropType([ + String, + Array, + Function + ]), + default: "" + }, + format: { + type: definePropType(Function), + default: (percentage) => `${percentage}%` + } + }); + + const _hoisted_1$j = ["aria-valuenow"]; + const _hoisted_2$d = { viewBox: "0 0 100 100" }; + const _hoisted_3$6 = ["d", "stroke", "stroke-width"]; + const _hoisted_4$4 = ["d", "stroke", "opacity", "stroke-linecap", "stroke-width"]; + const _hoisted_5$3 = { key: 0 }; + const __default__$w = vue.defineComponent({ + name: "ElProgress" + }); + const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({ + ...__default__$w, + props: progressProps, + setup(__props) { + const props = __props; + const STATUS_COLOR_MAP = { + success: "#13ce66", + exception: "#ff4949", + warning: "#e6a23c", + default: "#20a0ff" + }; + const ns = useNamespace("progress"); + const barStyle = vue.computed(() => ({ + width: `${props.percentage}%`, + animationDuration: `${props.duration}s`, + backgroundColor: getCurrentColor(props.percentage) + })); + const relativeStrokeWidth = vue.computed(() => (props.strokeWidth / props.width * 100).toFixed(1)); + const radius = vue.computed(() => { + if (["circle", "dashboard"].includes(props.type)) { + return Number.parseInt(`${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`, 10); + } + return 0; + }); + const trackPath = vue.computed(() => { + const r = radius.value; + const isDashboard = props.type === "dashboard"; + return ` + M 50 50 + m 0 ${isDashboard ? "" : "-"}${r} + a ${r} ${r} 0 1 1 0 ${isDashboard ? "-" : ""}${r * 2} + a ${r} ${r} 0 1 1 0 ${isDashboard ? "" : "-"}${r * 2} + `; + }); + const perimeter = vue.computed(() => 2 * Math.PI * radius.value); + const rate = vue.computed(() => props.type === "dashboard" ? 0.75 : 1); + const strokeDashoffset = vue.computed(() => { + const offset = -1 * perimeter.value * (1 - rate.value) / 2; + return `${offset}px`; + }); + const trailPathStyle = vue.computed(() => ({ + strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`, + strokeDashoffset: strokeDashoffset.value + })); + const circlePathStyle = vue.computed(() => ({ + strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100)}px, ${perimeter.value}px`, + strokeDashoffset: strokeDashoffset.value, + transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease, opacity ease 0.6s" + })); + const stroke = vue.computed(() => { + let ret; + if (props.color) { + ret = getCurrentColor(props.percentage); + } else { + ret = STATUS_COLOR_MAP[props.status] || STATUS_COLOR_MAP.default; + } + return ret; + }); + const statusIcon = vue.computed(() => { + if (props.status === "warning") { + return warning_filled_default; + } + if (props.type === "line") { + return props.status === "success" ? circle_check_default : circle_close_default; + } else { + return props.status === "success" ? check_default : close_default; + } + }); + const progressTextSize = vue.computed(() => { + return props.type === "line" ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2; + }); + const content = vue.computed(() => props.format(props.percentage)); + function getColors(color) { + const span = 100 / color.length; + const seriesColors = color.map((seriesColor, index) => { + if (isString$1(seriesColor)) { + return { + color: seriesColor, + percentage: (index + 1) * span + }; + } + return seriesColor; + }); + return seriesColors.sort((a, b) => a.percentage - b.percentage); + } + const getCurrentColor = (percentage) => { + var _a; + const { color } = props; + if (isFunction$1(color)) { + return color(percentage); + } else if (isString$1(color)) { + return color; + } else { + const colors = getColors(color); + for (const color2 of colors) { + if (color2.percentage > percentage) + return color2.color; + } + return (_a = colors[colors.length - 1]) == null ? void 0 : _a.color; + } + }; + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([ + vue.unref(ns).b(), + vue.unref(ns).m(_ctx.type), + vue.unref(ns).is(_ctx.status), + { + [vue.unref(ns).m("without-text")]: !_ctx.showText, + [vue.unref(ns).m("text-inside")]: _ctx.textInside + } + ]), + role: "progressbar", + "aria-valuenow": _ctx.percentage, + "aria-valuemin": "0", + "aria-valuemax": "100" + }, [ + _ctx.type === "line" ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).b("bar")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).be("bar", "outer")), + style: vue.normalizeStyle({ height: `${_ctx.strokeWidth}px` }) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass([ + vue.unref(ns).be("bar", "inner"), + { [vue.unref(ns).bem("bar", "inner", "indeterminate")]: _ctx.indeterminate } + ]), + style: vue.normalizeStyle(vue.unref(barStyle)) + }, [ + (_ctx.showText || _ctx.$slots.default) && _ctx.textInside ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).be("bar", "innerText")) + }, [ + vue.renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [ + vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(content)), 1) + ]) + ], 2)) : vue.createCommentVNode("v-if", true) + ], 6) + ], 6) + ], 2)) : (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).b("circle")), + style: vue.normalizeStyle({ height: `${_ctx.width}px`, width: `${_ctx.width}px` }) + }, [ + (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$d, [ + vue.createElementVNode("path", { + class: vue.normalizeClass(vue.unref(ns).be("circle", "track")), + d: vue.unref(trackPath), + stroke: `var(${vue.unref(ns).cssVarName("fill-color-light")}, #e5e9f2)`, + "stroke-width": vue.unref(relativeStrokeWidth), + fill: "none", + style: vue.normalizeStyle(vue.unref(trailPathStyle)) + }, null, 14, _hoisted_3$6), + vue.createElementVNode("path", { + class: vue.normalizeClass(vue.unref(ns).be("circle", "path")), + d: vue.unref(trackPath), + stroke: vue.unref(stroke), + fill: "none", + opacity: _ctx.percentage ? 1 : 0, + "stroke-linecap": _ctx.strokeLinecap, + "stroke-width": vue.unref(relativeStrokeWidth), + style: vue.normalizeStyle(vue.unref(circlePathStyle)) + }, null, 14, _hoisted_4$4) + ])) + ], 6)), + (_ctx.showText || _ctx.$slots.default) && !_ctx.textInside ? (vue.openBlock(), vue.createElementBlock("div", { + key: 2, + class: vue.normalizeClass(vue.unref(ns).e("text")), + style: vue.normalizeStyle({ fontSize: `${vue.unref(progressTextSize)}px` }) + }, [ + vue.renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [ + !_ctx.status ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$3, vue.toDisplayString(vue.unref(content)), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(statusIcon)))) + ]), + _: 1 + })) + ]) + ], 6)) : vue.createCommentVNode("v-if", true) + ], 10, _hoisted_1$j); + }; + } + }); + var Progress = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__file", "progress.vue"]]); + + const ElProgress = withInstall(Progress); + + const rateProps = buildProps({ + modelValue: { + type: Number, + default: 0 + }, + id: { + type: String, + default: void 0 + }, + lowThreshold: { + type: Number, + default: 2 + }, + highThreshold: { + type: Number, + default: 4 + }, + max: { + type: Number, + default: 5 + }, + colors: { + type: definePropType([Array, Object]), + default: () => mutable(["", "", ""]) + }, + voidColor: { + type: String, + default: "" + }, + disabledVoidColor: { + type: String, + default: "" + }, + icons: { + type: definePropType([Array, Object]), + default: () => [star_filled_default, star_filled_default, star_filled_default] + }, + voidIcon: { + type: iconPropType, + default: () => star_default + }, + disabledVoidIcon: { + type: iconPropType, + default: () => star_filled_default + }, + disabled: Boolean, + allowHalf: Boolean, + showText: Boolean, + showScore: Boolean, + textColor: { + type: String, + default: "" + }, + texts: { + type: definePropType(Array), + default: () => mutable([ + "Extremely bad", + "Disappointed", + "Fair", + "Satisfied", + "Surprise" + ]) + }, + scoreTemplate: { + type: String, + default: "{value}" + }, + size: useSizeProp, + label: { + type: String, + default: void 0 + }, + clearable: { + type: Boolean, + default: false + } + }); + const rateEmits = { + [CHANGE_EVENT]: (value) => isNumber$1(value), + [UPDATE_MODEL_EVENT]: (value) => isNumber$1(value) + }; + + const _hoisted_1$i = ["id", "aria-label", "aria-labelledby", "aria-valuenow", "aria-valuetext", "aria-valuemax"]; + const _hoisted_2$c = ["onMousemove", "onClick"]; + const __default__$v = vue.defineComponent({ + name: "ElRate" + }); + const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({ + ...__default__$v, + props: rateProps, + emits: rateEmits, + setup(__props, { expose, emit }) { + const props = __props; + function getValueFromMap(value, map) { + const isExcludedObject = (val) => isObject$1(val); + const matchedKeys = Object.keys(map).map((key) => +key).filter((key) => { + const val = map[key]; + const excluded = isExcludedObject(val) ? val.excluded : false; + return excluded ? value < key : value <= key; + }).sort((a, b) => a - b); + const matchedValue = map[matchedKeys[0]]; + return isExcludedObject(matchedValue) && matchedValue.value || matchedValue; + } + const formContext = vue.inject(formContextKey, void 0); + const formItemContext = vue.inject(formItemContextKey, void 0); + const rateSize = useFormSize(); + const ns = useNamespace("rate"); + const { inputId, isLabeledByFormItem } = useFormItemInputId(props, { + formItemContext + }); + const currentValue = vue.ref(props.modelValue); + const hoverIndex = vue.ref(-1); + const pointerAtLeftHalf = vue.ref(true); + const rateClasses = vue.computed(() => [ns.b(), ns.m(rateSize.value)]); + const rateDisabled = vue.computed(() => props.disabled || (formContext == null ? void 0 : formContext.disabled)); + const rateStyles = vue.computed(() => { + return ns.cssVarBlock({ + "void-color": props.voidColor, + "disabled-void-color": props.disabledVoidColor, + "fill-color": activeColor.value + }); + }); + const text = vue.computed(() => { + let result = ""; + if (props.showScore) { + result = props.scoreTemplate.replace(/\{\s*value\s*\}/, rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`); + } else if (props.showText) { + result = props.texts[Math.ceil(currentValue.value) - 1]; + } + return result; + }); + const valueDecimal = vue.computed(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100); + const colorMap = vue.computed(() => isArray$1(props.colors) ? { + [props.lowThreshold]: props.colors[0], + [props.highThreshold]: { value: props.colors[1], excluded: true }, + [props.max]: props.colors[2] + } : props.colors); + const activeColor = vue.computed(() => { + const color = getValueFromMap(currentValue.value, colorMap.value); + return isObject$1(color) ? "" : color; + }); + const decimalStyle = vue.computed(() => { + let width = ""; + if (rateDisabled.value) { + width = `${valueDecimal.value}%`; + } else if (props.allowHalf) { + width = "50%"; + } + return { + color: activeColor.value, + width + }; + }); + const componentMap = vue.computed(() => { + let icons = isArray$1(props.icons) ? [...props.icons] : { ...props.icons }; + icons = vue.markRaw(icons); + return isArray$1(icons) ? { + [props.lowThreshold]: icons[0], + [props.highThreshold]: { + value: icons[1], + excluded: true + }, + [props.max]: icons[2] + } : icons; + }); + const decimalIconComponent = vue.computed(() => getValueFromMap(props.modelValue, componentMap.value)); + const voidComponent = vue.computed(() => rateDisabled.value ? isString$1(props.disabledVoidIcon) ? props.disabledVoidIcon : vue.markRaw(props.disabledVoidIcon) : isString$1(props.voidIcon) ? props.voidIcon : vue.markRaw(props.voidIcon)); + const activeComponent = vue.computed(() => getValueFromMap(currentValue.value, componentMap.value)); + function showDecimalIcon(item) { + const showWhenDisabled = rateDisabled.value && valueDecimal.value > 0 && item - 1 < props.modelValue && item > props.modelValue; + const showWhenAllowHalf = props.allowHalf && pointerAtLeftHalf.value && item - 0.5 <= currentValue.value && item > currentValue.value; + return showWhenDisabled || showWhenAllowHalf; + } + function emitValue(value) { + if (props.clearable && value === props.modelValue) { + value = 0; + } + emit(UPDATE_MODEL_EVENT, value); + if (props.modelValue !== value) { + emit("change", value); + } + } + function selectValue(value) { + if (rateDisabled.value) { + return; + } + if (props.allowHalf && pointerAtLeftHalf.value) { + emitValue(currentValue.value); + } else { + emitValue(value); + } + } + function handleKey(e) { + if (rateDisabled.value) { + return; + } + let _currentValue = currentValue.value; + const code = e.code; + if (code === EVENT_CODE.up || code === EVENT_CODE.right) { + if (props.allowHalf) { + _currentValue += 0.5; + } else { + _currentValue += 1; + } + e.stopPropagation(); + e.preventDefault(); + } else if (code === EVENT_CODE.left || code === EVENT_CODE.down) { + if (props.allowHalf) { + _currentValue -= 0.5; + } else { + _currentValue -= 1; + } + e.stopPropagation(); + e.preventDefault(); + } + _currentValue = _currentValue < 0 ? 0 : _currentValue; + _currentValue = _currentValue > props.max ? props.max : _currentValue; + emit(UPDATE_MODEL_EVENT, _currentValue); + emit("change", _currentValue); + return _currentValue; + } + function setCurrentValue(value, event) { + if (rateDisabled.value) { + return; + } + if (props.allowHalf && event) { + let target = event.target; + if (hasClass(target, ns.e("item"))) { + target = target.querySelector(`.${ns.e("icon")}`); + } + if (target.clientWidth === 0 || hasClass(target, ns.e("decimal"))) { + target = target.parentNode; + } + pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth; + currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value; + } else { + currentValue.value = value; + } + hoverIndex.value = value; + } + function resetCurrentValue() { + if (rateDisabled.value) { + return; + } + if (props.allowHalf) { + pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue); + } + currentValue.value = props.modelValue; + hoverIndex.value = -1; + } + vue.watch(() => props.modelValue, (val) => { + currentValue.value = val; + pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue); + }); + if (!props.modelValue) { + emit(UPDATE_MODEL_EVENT, 0); + } + expose({ + setCurrentValue, + resetCurrentValue + }); + return (_ctx, _cache) => { + var _a; + return vue.openBlock(), vue.createElementBlock("div", { + id: vue.unref(inputId), + class: vue.normalizeClass([vue.unref(rateClasses), vue.unref(ns).is("disabled", vue.unref(rateDisabled))]), + role: "slider", + "aria-label": !vue.unref(isLabeledByFormItem) ? _ctx.label || "rating" : void 0, + "aria-labelledby": vue.unref(isLabeledByFormItem) ? (_a = vue.unref(formItemContext)) == null ? void 0 : _a.labelId : void 0, + "aria-valuenow": currentValue.value, + "aria-valuetext": vue.unref(text) || void 0, + "aria-valuemin": "0", + "aria-valuemax": _ctx.max, + tabindex: "0", + style: vue.normalizeStyle(vue.unref(rateStyles)), + onKeydown: handleKey + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.max, (item, key) => { + return vue.openBlock(), vue.createElementBlock("span", { + key, + class: vue.normalizeClass(vue.unref(ns).e("item")), + onMousemove: ($event) => setCurrentValue(item, $event), + onMouseleave: resetCurrentValue, + onClick: ($event) => selectValue(item) + }, [ + vue.createVNode(vue.unref(ElIcon), { + class: vue.normalizeClass([ + vue.unref(ns).e("icon"), + { hover: hoverIndex.value === item }, + vue.unref(ns).is("active", item <= currentValue.value) + ]) + }, { + default: vue.withCtx(() => [ + !showDecimalIcon(item) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(activeComponent)), null, null, 512)), [ + [vue.vShow, item <= currentValue.value] + ]), + vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(voidComponent)), null, null, 512)), [ + [vue.vShow, !(item <= currentValue.value)] + ]) + ], 64)) : vue.createCommentVNode("v-if", true), + showDecimalIcon(item) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 1, + style: vue.normalizeStyle(vue.unref(decimalStyle)), + class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(ns).e("decimal")]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(decimalIconComponent)))) + ]), + _: 1 + }, 8, ["style", "class"])) : vue.createCommentVNode("v-if", true) + ]), + _: 2 + }, 1032, ["class"]) + ], 42, _hoisted_2$c); + }), 128)), + _ctx.showText || _ctx.showScore ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("text")) + }, vue.toDisplayString(vue.unref(text)), 3)) : vue.createCommentVNode("v-if", true) + ], 46, _hoisted_1$i); + }; + } + }); + var Rate = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__file", "rate.vue"]]); + + const ElRate = withInstall(Rate); + + const IconMap = { + success: "icon-success", + warning: "icon-warning", + error: "icon-error", + info: "icon-info" + }; + const IconComponentMap = { + [IconMap.success]: circle_check_filled_default, + [IconMap.warning]: warning_filled_default, + [IconMap.error]: circle_close_filled_default, + [IconMap.info]: info_filled_default + }; + const resultProps = buildProps({ + title: { + type: String, + default: "" + }, + subTitle: { + type: String, + default: "" + }, + icon: { + type: String, + values: ["success", "warning", "info", "error"], + default: "info" + } + }); + + const __default__$u = vue.defineComponent({ + name: "ElResult" + }); + const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({ + ...__default__$u, + props: resultProps, + setup(__props) { + const props = __props; + const ns = useNamespace("result"); + const resultIcon = vue.computed(() => { + const icon = props.icon; + const iconClass = icon && IconMap[icon] ? IconMap[icon] : "icon-info"; + const iconComponent = IconComponentMap[iconClass] || IconComponentMap["icon-info"]; + return { + class: iconClass, + component: iconComponent + }; + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(ns).b()) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("icon")) + }, [ + vue.renderSlot(_ctx.$slots, "icon", {}, () => [ + vue.unref(resultIcon).component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(resultIcon).component), { + key: 0, + class: vue.normalizeClass(vue.unref(resultIcon).class) + }, null, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ]) + ], 2), + _ctx.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("title")) + }, [ + vue.renderSlot(_ctx.$slots, "title", {}, () => [ + vue.createElementVNode("p", null, vue.toDisplayString(_ctx.title), 1) + ]) + ], 2)) : vue.createCommentVNode("v-if", true), + _ctx.subTitle || _ctx.$slots["sub-title"] ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("subtitle")) + }, [ + vue.renderSlot(_ctx.$slots, "sub-title", {}, () => [ + vue.createElementVNode("p", null, vue.toDisplayString(_ctx.subTitle), 1) + ]) + ], 2)) : vue.createCommentVNode("v-if", true), + _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", { + key: 2, + class: vue.normalizeClass(vue.unref(ns).e("extra")) + }, [ + vue.renderSlot(_ctx.$slots, "extra") + ], 2)) : vue.createCommentVNode("v-if", true) + ], 2); + }; + } + }); + var Result = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__file", "result.vue"]]); + + const ElResult = withInstall(Result); + + var safeIsNaN = Number.isNaN || function ponyfill(value) { + return typeof value === "number" && value !== value; + }; + function isEqual(first, second) { + if (first === second) { + return true; + } + if (safeIsNaN(first) && safeIsNaN(second)) { + return true; + } + return false; + } + function areInputsEqual(newInputs, lastInputs) { + if (newInputs.length !== lastInputs.length) { + return false; + } + for (var i = 0; i < newInputs.length; i++) { + if (!isEqual(newInputs[i], lastInputs[i])) { + return false; + } + } + return true; + } + function memoizeOne(resultFn, isEqual2) { + if (isEqual2 === void 0) { + isEqual2 = areInputsEqual; + } + var cache = null; + function memoized() { + var newArgs = []; + for (var _i = 0; _i < arguments.length; _i++) { + newArgs[_i] = arguments[_i]; + } + if (cache && cache.lastThis === this && isEqual2(newArgs, cache.lastArgs)) { + return cache.lastResult; + } + var lastResult = resultFn.apply(this, newArgs); + cache = { + lastResult, + lastArgs: newArgs, + lastThis: this + }; + return lastResult; + } + memoized.clear = function clear() { + cache = null; + }; + return memoized; + } + + const useCache = () => { + const vm = vue.getCurrentInstance(); + const props = vm.proxy.$props; + return vue.computed(() => { + const _getItemStyleCache = (_, __, ___) => ({}); + return props.perfMode ? memoize(_getItemStyleCache) : memoizeOne(_getItemStyleCache); + }); + }; + + const DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50; + const ITEM_RENDER_EVT = "itemRendered"; + const SCROLL_EVT = "scroll"; + const FORWARD = "forward"; + const BACKWARD = "backward"; + const AUTO_ALIGNMENT = "auto"; + const SMART_ALIGNMENT = "smart"; + const START_ALIGNMENT = "start"; + const CENTERED_ALIGNMENT = "center"; + const END_ALIGNMENT = "end"; + const HORIZONTAL = "horizontal"; + const VERTICAL = "vertical"; + const LTR = "ltr"; + const RTL = "rtl"; + const RTL_OFFSET_NAG = "negative"; + const RTL_OFFSET_POS_ASC = "positive-ascending"; + const RTL_OFFSET_POS_DESC = "positive-descending"; + const ScrollbarDirKey = { + [HORIZONTAL]: "left", + [VERTICAL]: "top" + }; + const SCROLLBAR_MIN_SIZE = 20; + + const LayoutKeys = { + [HORIZONTAL]: "deltaX", + [VERTICAL]: "deltaY" + }; + const useWheel = ({ atEndEdge, atStartEdge, layout }, onWheelDelta) => { + let frameHandle; + let offset = 0; + const hasReachedEdge = (offset2) => { + const edgeReached = offset2 < 0 && atStartEdge.value || offset2 > 0 && atEndEdge.value; + return edgeReached; + }; + const onWheel = (e) => { + cAF(frameHandle); + const newOffset = e[LayoutKeys[layout.value]]; + if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset)) + return; + offset += newOffset; + if (!isFirefox()) { + e.preventDefault(); + } + frameHandle = rAF(() => { + onWheelDelta(offset); + offset = 0; + }); + }; + return { + hasReachedEdge, + onWheel + }; + }; + var useWheel$1 = useWheel; + + const itemSize$1 = buildProp({ + type: definePropType([Number, Function]), + required: true + }); + const estimatedItemSize = buildProp({ + type: Number + }); + const cache = buildProp({ + type: Number, + default: 2 + }); + const direction = buildProp({ + type: String, + values: ["ltr", "rtl"], + default: "ltr" + }); + const initScrollOffset = buildProp({ + type: Number, + default: 0 + }); + const total = buildProp({ + type: Number, + required: true + }); + const layout = buildProp({ + type: String, + values: ["horizontal", "vertical"], + default: VERTICAL + }); + const virtualizedProps = buildProps({ + className: { + type: String, + default: "" + }, + containerElement: { + type: definePropType([String, Object]), + default: "div" + }, + data: { + type: definePropType(Array), + default: () => mutable([]) + }, + direction, + height: { + type: [String, Number], + required: true + }, + innerElement: { + type: [String, Object], + default: "div" + }, + style: { + type: definePropType([Object, String, Array]) + }, + useIsScrolling: { + type: Boolean, + default: false + }, + width: { + type: [Number, String], + required: false + }, + perfMode: { + type: Boolean, + default: true + }, + scrollbarAlwaysOn: { + type: Boolean, + default: false + } + }); + const virtualizedListProps = buildProps({ + cache, + estimatedItemSize, + layout, + initScrollOffset, + total, + itemSize: itemSize$1, + ...virtualizedProps + }); + const scrollbarSize = { + type: Number, + default: 6 + }; + const startGap = { type: Number, default: 0 }; + const endGap = { type: Number, default: 2 }; + const virtualizedGridProps = buildProps({ + columnCache: cache, + columnWidth: itemSize$1, + estimatedColumnWidth: estimatedItemSize, + estimatedRowHeight: estimatedItemSize, + initScrollLeft: initScrollOffset, + initScrollTop: initScrollOffset, + itemKey: { + type: definePropType(Function), + default: ({ + columnIndex, + rowIndex + }) => `${rowIndex}:${columnIndex}` + }, + rowCache: cache, + rowHeight: itemSize$1, + totalColumn: total, + totalRow: total, + hScrollbarSize: scrollbarSize, + vScrollbarSize: scrollbarSize, + scrollbarStartGap: startGap, + scrollbarEndGap: endGap, + role: String, + ...virtualizedProps + }); + const virtualizedScrollbarProps = buildProps({ + alwaysOn: Boolean, + class: String, + layout, + total, + ratio: { + type: Number, + required: true + }, + clientSize: { + type: Number, + required: true + }, + scrollFrom: { + type: Number, + required: true + }, + scrollbarSize, + startGap, + endGap, + visible: Boolean + }); + + const getScrollDir = (prev, cur) => prev < cur ? FORWARD : BACKWARD; + const isHorizontal = (dir) => dir === LTR || dir === RTL || dir === HORIZONTAL; + const isRTL = (dir) => dir === RTL; + let cachedRTLResult = null; + function getRTLOffsetType(recalculate = false) { + if (cachedRTLResult === null || recalculate) { + const outerDiv = document.createElement("div"); + const outerStyle = outerDiv.style; + outerStyle.width = "50px"; + outerStyle.height = "50px"; + outerStyle.overflow = "scroll"; + outerStyle.direction = "rtl"; + const innerDiv = document.createElement("div"); + const innerStyle = innerDiv.style; + innerStyle.width = "100px"; + innerStyle.height = "100px"; + outerDiv.appendChild(innerDiv); + document.body.appendChild(outerDiv); + if (outerDiv.scrollLeft > 0) { + cachedRTLResult = RTL_OFFSET_POS_DESC; + } else { + outerDiv.scrollLeft = 1; + if (outerDiv.scrollLeft === 0) { + cachedRTLResult = RTL_OFFSET_NAG; + } else { + cachedRTLResult = RTL_OFFSET_POS_ASC; + } + } + document.body.removeChild(outerDiv); + return cachedRTLResult; + } + return cachedRTLResult; + } + function renderThumbStyle({ move, size, bar }, layout) { + const style = {}; + const translate = `translate${bar.axis}(${move}px)`; + style[bar.size] = size; + style.transform = translate; + style.msTransform = translate; + style.webkitTransform = translate; + if (layout === "horizontal") { + style.height = "100%"; + } else { + style.width = "100%"; + } + return style; + } + + const ScrollBar = vue.defineComponent({ + name: "ElVirtualScrollBar", + props: virtualizedScrollbarProps, + emits: ["scroll", "start-move", "stop-move"], + setup(props, { emit }) { + const GAP = vue.computed(() => props.startGap + props.endGap); + const nsVirtualScrollbar = useNamespace("virtual-scrollbar"); + const nsScrollbar = useNamespace("scrollbar"); + const trackRef = vue.ref(); + const thumbRef = vue.ref(); + let frameHandle = null; + let onselectstartStore = null; + const state = vue.reactive({ + isDragging: false, + traveled: 0 + }); + const bar = vue.computed(() => BAR_MAP[props.layout]); + const trackSize = vue.computed(() => props.clientSize - vue.unref(GAP)); + const trackStyle = vue.computed(() => ({ + position: "absolute", + width: `${HORIZONTAL === props.layout ? trackSize.value : props.scrollbarSize}px`, + height: `${HORIZONTAL === props.layout ? props.scrollbarSize : trackSize.value}px`, + [ScrollbarDirKey[props.layout]]: "2px", + right: "2px", + bottom: "2px", + borderRadius: "4px" + })); + const thumbSize = vue.computed(() => { + const ratio = props.ratio; + const clientSize = props.clientSize; + if (ratio >= 100) { + return Number.POSITIVE_INFINITY; + } + if (ratio >= 50) { + return ratio * clientSize / 100; + } + const SCROLLBAR_MAX_SIZE = clientSize / 3; + return Math.floor(Math.min(Math.max(ratio * clientSize, SCROLLBAR_MIN_SIZE), SCROLLBAR_MAX_SIZE)); + }); + const thumbStyle = vue.computed(() => { + if (!Number.isFinite(thumbSize.value)) { + return { + display: "none" + }; + } + const thumb = `${thumbSize.value}px`; + const style = renderThumbStyle({ + bar: bar.value, + size: thumb, + move: state.traveled + }, props.layout); + return style; + }); + const totalSteps = vue.computed(() => Math.floor(props.clientSize - thumbSize.value - vue.unref(GAP))); + const attachEvents = () => { + window.addEventListener("mousemove", onMouseMove); + window.addEventListener("mouseup", onMouseUp); + const thumbEl = vue.unref(thumbRef); + if (!thumbEl) + return; + onselectstartStore = document.onselectstart; + document.onselectstart = () => false; + thumbEl.addEventListener("touchmove", onMouseMove); + thumbEl.addEventListener("touchend", onMouseUp); + }; + const detachEvents = () => { + window.removeEventListener("mousemove", onMouseMove); + window.removeEventListener("mouseup", onMouseUp); + document.onselectstart = onselectstartStore; + onselectstartStore = null; + const thumbEl = vue.unref(thumbRef); + if (!thumbEl) + return; + thumbEl.removeEventListener("touchmove", onMouseMove); + thumbEl.removeEventListener("touchend", onMouseUp); + }; + const onThumbMouseDown = (e) => { + e.stopImmediatePropagation(); + if (e.ctrlKey || [1, 2].includes(e.button)) { + return; + } + state.isDragging = true; + state[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]); + emit("start-move"); + attachEvents(); + }; + const onMouseUp = () => { + state.isDragging = false; + state[bar.value.axis] = 0; + emit("stop-move"); + detachEvents(); + }; + const onMouseMove = (e) => { + const { isDragging } = state; + if (!isDragging) + return; + if (!thumbRef.value || !trackRef.value) + return; + const prevPage = state[bar.value.axis]; + if (!prevPage) + return; + cAF(frameHandle); + const offset = (trackRef.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1; + const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage; + const distance = offset - thumbClickPosition; + frameHandle = rAF(() => { + state.traveled = Math.max(props.startGap, Math.min(distance, totalSteps.value)); + emit("scroll", distance, totalSteps.value); + }); + }; + const clickTrackHandler = (e) => { + const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]); + const thumbHalf = thumbRef.value[bar.value.offset] / 2; + const distance = offset - thumbHalf; + state.traveled = Math.max(0, Math.min(distance, totalSteps.value)); + emit("scroll", distance, totalSteps.value); + }; + vue.watch(() => props.scrollFrom, (v) => { + if (state.isDragging) + return; + state.traveled = Math.ceil(v * totalSteps.value); + }); + vue.onBeforeUnmount(() => { + detachEvents(); + }); + return () => { + return vue.h("div", { + role: "presentation", + ref: trackRef, + class: [ + nsVirtualScrollbar.b(), + props.class, + (props.alwaysOn || state.isDragging) && "always-on" + ], + style: trackStyle.value, + onMousedown: vue.withModifiers(clickTrackHandler, ["stop", "prevent"]), + onTouchstartPrevent: onThumbMouseDown + }, vue.h("div", { + ref: thumbRef, + class: nsScrollbar.e("thumb"), + style: thumbStyle.value, + onMousedown: onThumbMouseDown + }, [])); + }; + } + }); + var Scrollbar = ScrollBar; + + const createList = ({ + name, + getOffset, + getItemSize, + getItemOffset, + getEstimatedTotalSize, + getStartIndexForOffset, + getStopIndexForStartIndex, + initCache, + clearCache, + validateProps + }) => { + return vue.defineComponent({ + name: name != null ? name : "ElVirtualList", + props: virtualizedListProps, + emits: [ITEM_RENDER_EVT, SCROLL_EVT], + setup(props, { emit, expose }) { + validateProps(props); + const instance = vue.getCurrentInstance(); + const ns = useNamespace("vl"); + const dynamicSizeCache = vue.ref(initCache(props, instance)); + const getItemStyleCache = useCache(); + const windowRef = vue.ref(); + const innerRef = vue.ref(); + const scrollbarRef = vue.ref(); + const states = vue.ref({ + isScrolling: false, + scrollDir: "forward", + scrollOffset: isNumber$1(props.initScrollOffset) ? props.initScrollOffset : 0, + updateRequested: false, + isScrollbarDragging: false, + scrollbarAlwaysOn: props.scrollbarAlwaysOn + }); + const itemsToRender = vue.computed(() => { + const { total, cache } = props; + const { isScrolling, scrollDir, scrollOffset } = vue.unref(states); + if (total === 0) { + return [0, 0, 0, 0]; + } + const startIndex = getStartIndexForOffset(props, scrollOffset, vue.unref(dynamicSizeCache)); + const stopIndex = getStopIndexForStartIndex(props, startIndex, scrollOffset, vue.unref(dynamicSizeCache)); + const cacheBackward = !isScrolling || scrollDir === BACKWARD ? Math.max(1, cache) : 1; + const cacheForward = !isScrolling || scrollDir === FORWARD ? Math.max(1, cache) : 1; + return [ + Math.max(0, startIndex - cacheBackward), + Math.max(0, Math.min(total - 1, stopIndex + cacheForward)), + startIndex, + stopIndex + ]; + }); + const estimatedTotalSize = vue.computed(() => getEstimatedTotalSize(props, vue.unref(dynamicSizeCache))); + const _isHorizontal = vue.computed(() => isHorizontal(props.layout)); + const windowStyle = vue.computed(() => [ + { + position: "relative", + [`overflow-${_isHorizontal.value ? "x" : "y"}`]: "scroll", + WebkitOverflowScrolling: "touch", + willChange: "transform" + }, + { + direction: props.direction, + height: isNumber$1(props.height) ? `${props.height}px` : props.height, + width: isNumber$1(props.width) ? `${props.width}px` : props.width + }, + props.style + ]); + const innerStyle = vue.computed(() => { + const size = vue.unref(estimatedTotalSize); + const horizontal = vue.unref(_isHorizontal); + return { + height: horizontal ? "100%" : `${size}px`, + pointerEvents: vue.unref(states).isScrolling ? "none" : void 0, + width: horizontal ? `${size}px` : "100%" + }; + }); + const clientSize = vue.computed(() => _isHorizontal.value ? props.width : props.height); + const { onWheel } = useWheel$1({ + atStartEdge: vue.computed(() => states.value.scrollOffset <= 0), + atEndEdge: vue.computed(() => states.value.scrollOffset >= estimatedTotalSize.value), + layout: vue.computed(() => props.layout) + }, (offset) => { + var _a, _b; + (_b = (_a = scrollbarRef.value).onMouseUp) == null ? void 0 : _b.call(_a); + scrollTo(Math.min(states.value.scrollOffset + offset, estimatedTotalSize.value - clientSize.value)); + }); + const emitEvents = () => { + const { total } = props; + if (total > 0) { + const [cacheStart, cacheEnd, visibleStart, visibleEnd] = vue.unref(itemsToRender); + emit(ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd); + } + const { scrollDir, scrollOffset, updateRequested } = vue.unref(states); + emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested); + }; + const scrollVertically = (e) => { + const { clientHeight, scrollHeight, scrollTop } = e.currentTarget; + const _states = vue.unref(states); + if (_states.scrollOffset === scrollTop) { + return; + } + const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)); + states.value = { + ..._states, + isScrolling: true, + scrollDir: getScrollDir(_states.scrollOffset, scrollOffset), + scrollOffset, + updateRequested: false + }; + vue.nextTick(resetIsScrolling); + }; + const scrollHorizontally = (e) => { + const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget; + const _states = vue.unref(states); + if (_states.scrollOffset === scrollLeft) { + return; + } + const { direction } = props; + let scrollOffset = scrollLeft; + if (direction === RTL) { + switch (getRTLOffsetType()) { + case RTL_OFFSET_NAG: { + scrollOffset = -scrollLeft; + break; + } + case RTL_OFFSET_POS_DESC: { + scrollOffset = scrollWidth - clientWidth - scrollLeft; + break; + } + } + } + scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth)); + states.value = { + ..._states, + isScrolling: true, + scrollDir: getScrollDir(_states.scrollOffset, scrollOffset), + scrollOffset, + updateRequested: false + }; + vue.nextTick(resetIsScrolling); + }; + const onScroll = (e) => { + vue.unref(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e); + emitEvents(); + }; + const onScrollbarScroll = (distanceToGo, totalSteps) => { + const offset = (estimatedTotalSize.value - clientSize.value) / totalSteps * distanceToGo; + scrollTo(Math.min(estimatedTotalSize.value - clientSize.value, offset)); + }; + const scrollTo = (offset) => { + offset = Math.max(offset, 0); + if (offset === vue.unref(states).scrollOffset) { + return; + } + states.value = { + ...vue.unref(states), + scrollOffset: offset, + scrollDir: getScrollDir(vue.unref(states).scrollOffset, offset), + updateRequested: true + }; + vue.nextTick(resetIsScrolling); + }; + const scrollToItem = (idx, alignment = AUTO_ALIGNMENT) => { + const { scrollOffset } = vue.unref(states); + idx = Math.max(0, Math.min(idx, props.total - 1)); + scrollTo(getOffset(props, idx, alignment, scrollOffset, vue.unref(dynamicSizeCache))); + }; + const getItemStyle = (idx) => { + const { direction, itemSize, layout } = props; + const itemStyleCache = getItemStyleCache.value(clearCache && itemSize, clearCache && layout, clearCache && direction); + let style; + if (hasOwn(itemStyleCache, String(idx))) { + style = itemStyleCache[idx]; + } else { + const offset = getItemOffset(props, idx, vue.unref(dynamicSizeCache)); + const size = getItemSize(props, idx, vue.unref(dynamicSizeCache)); + const horizontal = vue.unref(_isHorizontal); + const isRtl = direction === RTL; + const offsetHorizontal = horizontal ? offset : 0; + itemStyleCache[idx] = style = { + position: "absolute", + left: isRtl ? void 0 : `${offsetHorizontal}px`, + right: isRtl ? `${offsetHorizontal}px` : void 0, + top: !horizontal ? `${offset}px` : 0, + height: !horizontal ? `${size}px` : "100%", + width: horizontal ? `${size}px` : "100%" + }; + } + return style; + }; + const resetIsScrolling = () => { + states.value.isScrolling = false; + vue.nextTick(() => { + getItemStyleCache.value(-1, null, null); + }); + }; + const resetScrollTop = () => { + const window = windowRef.value; + if (window) { + window.scrollTop = 0; + } + }; + vue.onMounted(() => { + if (!isClient) + return; + const { initScrollOffset } = props; + const windowElement = vue.unref(windowRef); + if (isNumber$1(initScrollOffset) && windowElement) { + if (vue.unref(_isHorizontal)) { + windowElement.scrollLeft = initScrollOffset; + } else { + windowElement.scrollTop = initScrollOffset; + } + } + emitEvents(); + }); + vue.onUpdated(() => { + const { direction, layout } = props; + const { scrollOffset, updateRequested } = vue.unref(states); + const windowElement = vue.unref(windowRef); + if (updateRequested && windowElement) { + if (layout === HORIZONTAL) { + if (direction === RTL) { + switch (getRTLOffsetType()) { + case RTL_OFFSET_NAG: { + windowElement.scrollLeft = -scrollOffset; + break; + } + case RTL_OFFSET_POS_ASC: { + windowElement.scrollLeft = scrollOffset; + break; + } + default: { + const { clientWidth, scrollWidth } = windowElement; + windowElement.scrollLeft = scrollWidth - clientWidth - scrollOffset; + break; + } + } + } else { + windowElement.scrollLeft = scrollOffset; + } + } else { + windowElement.scrollTop = scrollOffset; + } + } + }); + const api = { + ns, + clientSize, + estimatedTotalSize, + windowStyle, + windowRef, + innerRef, + innerStyle, + itemsToRender, + scrollbarRef, + states, + getItemStyle, + onScroll, + onScrollbarScroll, + onWheel, + scrollTo, + scrollToItem, + resetScrollTop + }; + expose({ + windowRef, + innerRef, + getItemStyleCache, + scrollTo, + scrollToItem, + resetScrollTop, + states + }); + return api; + }, + render(ctx) { + var _a; + const { + $slots, + className, + clientSize, + containerElement, + data, + getItemStyle, + innerElement, + itemsToRender, + innerStyle, + layout, + total, + onScroll, + onScrollbarScroll, + onWheel, + states, + useIsScrolling, + windowStyle, + ns + } = ctx; + const [start, end] = itemsToRender; + const Container = vue.resolveDynamicComponent(containerElement); + const Inner = vue.resolveDynamicComponent(innerElement); + const children = []; + if (total > 0) { + for (let i = start; i <= end; i++) { + children.push((_a = $slots.default) == null ? void 0 : _a.call($slots, { + data, + key: i, + index: i, + isScrolling: useIsScrolling ? states.isScrolling : void 0, + style: getItemStyle(i) + })); + } + } + const InnerNode = [ + vue.h(Inner, { + style: innerStyle, + ref: "innerRef" + }, !isString$1(Inner) ? { + default: () => children + } : children) + ]; + const scrollbar = vue.h(Scrollbar, { + ref: "scrollbarRef", + clientSize, + layout, + onScroll: onScrollbarScroll, + ratio: clientSize * 100 / this.estimatedTotalSize, + scrollFrom: states.scrollOffset / (this.estimatedTotalSize - clientSize), + total + }); + const listContainer = vue.h(Container, { + class: [ns.e("window"), className], + style: windowStyle, + onScroll, + onWheel, + ref: "windowRef", + key: 0 + }, !isString$1(Container) ? { default: () => [InnerNode] } : [InnerNode]); + return vue.h("div", { + key: 0, + class: [ns.e("wrapper"), states.scrollbarAlwaysOn ? "always-on" : ""] + }, [listContainer, scrollbar]); + } + }); + }; + var createList$1 = createList; + + const FixedSizeList = createList$1({ + name: "ElFixedSizeList", + getItemOffset: ({ itemSize }, index) => index * itemSize, + getItemSize: ({ itemSize }) => itemSize, + getEstimatedTotalSize: ({ total, itemSize }) => itemSize * total, + getOffset: ({ height, total, itemSize, layout, width }, index, alignment, scrollOffset) => { + const size = isHorizontal(layout) ? width : height; + const lastItemOffset = Math.max(0, total * itemSize - size); + const maxOffset = Math.min(lastItemOffset, index * itemSize); + const minOffset = Math.max(0, (index + 1) * itemSize - size); + if (alignment === SMART_ALIGNMENT) { + if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) { + alignment = AUTO_ALIGNMENT; + } else { + alignment = CENTERED_ALIGNMENT; + } + } + switch (alignment) { + case START_ALIGNMENT: { + return maxOffset; + } + case END_ALIGNMENT: { + return minOffset; + } + case CENTERED_ALIGNMENT: { + const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2); + if (middleOffset < Math.ceil(size / 2)) { + return 0; + } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) { + return lastItemOffset; + } else { + return middleOffset; + } + } + case AUTO_ALIGNMENT: + default: { + if (scrollOffset >= minOffset && scrollOffset <= maxOffset) { + return scrollOffset; + } else if (scrollOffset < minOffset) { + return minOffset; + } else { + return maxOffset; + } + } + } + }, + getStartIndexForOffset: ({ total, itemSize }, offset) => Math.max(0, Math.min(total - 1, Math.floor(offset / itemSize))), + getStopIndexForStartIndex: ({ height, total, itemSize, layout, width }, startIndex, scrollOffset) => { + const offset = startIndex * itemSize; + const size = isHorizontal(layout) ? width : height; + const numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize); + return Math.max(0, Math.min(total - 1, startIndex + numVisibleItems - 1)); + }, + initCache() { + return void 0; + }, + clearCache: true, + validateProps() { + } + }); + var FixedSizeList$1 = FixedSizeList; + + const getItemFromCache$1 = (props, index, listCache) => { + const { itemSize } = props; + const { items, lastVisitedIndex } = listCache; + if (index > lastVisitedIndex) { + let offset = 0; + if (lastVisitedIndex >= 0) { + const item = items[lastVisitedIndex]; + offset = item.offset + item.size; + } + for (let i = lastVisitedIndex + 1; i <= index; i++) { + const size = itemSize(i); + items[i] = { + offset, + size + }; + offset += size; + } + listCache.lastVisitedIndex = index; + } + return items[index]; + }; + const findItem$1 = (props, listCache, offset) => { + const { items, lastVisitedIndex } = listCache; + const lastVisitedOffset = lastVisitedIndex > 0 ? items[lastVisitedIndex].offset : 0; + if (lastVisitedOffset >= offset) { + return bs$1(props, listCache, 0, lastVisitedIndex, offset); + } + return es$1(props, listCache, Math.max(0, lastVisitedIndex), offset); + }; + const bs$1 = (props, listCache, low, high, offset) => { + while (low <= high) { + const mid = low + Math.floor((high - low) / 2); + const currentOffset = getItemFromCache$1(props, mid, listCache).offset; + if (currentOffset === offset) { + return mid; + } else if (currentOffset < offset) { + low = mid + 1; + } else if (currentOffset > offset) { + high = mid - 1; + } + } + return Math.max(0, low - 1); + }; + const es$1 = (props, listCache, index, offset) => { + const { total } = props; + let exponent = 1; + while (index < total && getItemFromCache$1(props, index, listCache).offset < offset) { + index += exponent; + exponent *= 2; + } + return bs$1(props, listCache, Math.floor(index / 2), Math.min(index, total - 1), offset); + }; + const getEstimatedTotalSize = ({ total }, { items, estimatedItemSize, lastVisitedIndex }) => { + let totalSizeOfMeasuredItems = 0; + if (lastVisitedIndex >= total) { + lastVisitedIndex = total - 1; + } + if (lastVisitedIndex >= 0) { + const item = items[lastVisitedIndex]; + totalSizeOfMeasuredItems = item.offset + item.size; + } + const numUnmeasuredItems = total - lastVisitedIndex - 1; + const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize; + return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems; + }; + const DynamicSizeList = createList$1({ + name: "ElDynamicSizeList", + getItemOffset: (props, index, listCache) => getItemFromCache$1(props, index, listCache).offset, + getItemSize: (_, index, { items }) => items[index].size, + getEstimatedTotalSize, + getOffset: (props, index, alignment, scrollOffset, listCache) => { + const { height, layout, width } = props; + const size = isHorizontal(layout) ? width : height; + const item = getItemFromCache$1(props, index, listCache); + const estimatedTotalSize = getEstimatedTotalSize(props, listCache); + const maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, item.offset)); + const minOffset = Math.max(0, item.offset - size + item.size); + if (alignment === SMART_ALIGNMENT) { + if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) { + alignment = AUTO_ALIGNMENT; + } else { + alignment = CENTERED_ALIGNMENT; + } + } + switch (alignment) { + case START_ALIGNMENT: { + return maxOffset; + } + case END_ALIGNMENT: { + return minOffset; + } + case CENTERED_ALIGNMENT: { + return Math.round(minOffset + (maxOffset - minOffset) / 2); + } + case AUTO_ALIGNMENT: + default: { + if (scrollOffset >= minOffset && scrollOffset <= maxOffset) { + return scrollOffset; + } else if (scrollOffset < minOffset) { + return minOffset; + } else { + return maxOffset; + } + } + } + }, + getStartIndexForOffset: (props, offset, listCache) => findItem$1(props, listCache, offset), + getStopIndexForStartIndex: (props, startIndex, scrollOffset, listCache) => { + const { height, total, layout, width } = props; + const size = isHorizontal(layout) ? width : height; + const item = getItemFromCache$1(props, startIndex, listCache); + const maxOffset = scrollOffset + size; + let offset = item.offset + item.size; + let stopIndex = startIndex; + while (stopIndex < total - 1 && offset < maxOffset) { + stopIndex++; + offset += getItemFromCache$1(props, stopIndex, listCache).size; + } + return stopIndex; + }, + initCache({ estimatedItemSize = DEFAULT_DYNAMIC_LIST_ITEM_SIZE }, instance) { + const cache = { + items: {}, + estimatedItemSize, + lastVisitedIndex: -1 + }; + cache.clearCacheAfterIndex = (index, forceUpdate = true) => { + var _a, _b; + cache.lastVisitedIndex = Math.min(cache.lastVisitedIndex, index - 1); + (_a = instance.exposed) == null ? void 0 : _a.getItemStyleCache(-1); + if (forceUpdate) { + (_b = instance.proxy) == null ? void 0 : _b.$forceUpdate(); + } + }; + return cache; + }, + clearCache: false, + validateProps: ({ itemSize }) => { + } + }); + var DynamicSizeList$1 = DynamicSizeList; + + const useGridWheel = ({ atXEndEdge, atXStartEdge, atYEndEdge, atYStartEdge }, onWheelDelta) => { + let frameHandle = null; + let xOffset = 0; + let yOffset = 0; + const hasReachedEdge = (x, y) => { + const xEdgeReached = x <= 0 && atXStartEdge.value || x >= 0 && atXEndEdge.value; + const yEdgeReached = y <= 0 && atYStartEdge.value || y >= 0 && atYEndEdge.value; + return xEdgeReached && yEdgeReached; + }; + const onWheel = (e) => { + cAF(frameHandle); + let x = e.deltaX; + let y = e.deltaY; + if (Math.abs(x) > Math.abs(y)) { + y = 0; + } else { + x = 0; + } + if (e.shiftKey && y !== 0) { + x = y; + y = 0; + } + if (hasReachedEdge(xOffset, yOffset) && hasReachedEdge(xOffset + x, yOffset + y)) + return; + xOffset += x; + yOffset += y; + e.preventDefault(); + frameHandle = rAF(() => { + onWheelDelta(xOffset, yOffset); + xOffset = 0; + yOffset = 0; + }); + }; + return { + hasReachedEdge, + onWheel + }; + }; + + const createGrid = ({ + name, + clearCache, + getColumnPosition, + getColumnStartIndexForOffset, + getColumnStopIndexForStartIndex, + getEstimatedTotalHeight, + getEstimatedTotalWidth, + getColumnOffset, + getRowOffset, + getRowPosition, + getRowStartIndexForOffset, + getRowStopIndexForStartIndex, + initCache, + injectToInstance, + validateProps + }) => { + return vue.defineComponent({ + name: name != null ? name : "ElVirtualList", + props: virtualizedGridProps, + emits: [ITEM_RENDER_EVT, SCROLL_EVT], + setup(props, { emit, expose, slots }) { + const ns = useNamespace("vl"); + validateProps(props); + const instance = vue.getCurrentInstance(); + const cache = vue.ref(initCache(props, instance)); + injectToInstance == null ? void 0 : injectToInstance(instance, cache); + const windowRef = vue.ref(); + const hScrollbar = vue.ref(); + const vScrollbar = vue.ref(); + const innerRef = vue.ref(null); + const states = vue.ref({ + isScrolling: false, + scrollLeft: isNumber$1(props.initScrollLeft) ? props.initScrollLeft : 0, + scrollTop: isNumber$1(props.initScrollTop) ? props.initScrollTop : 0, + updateRequested: false, + xAxisScrollDir: FORWARD, + yAxisScrollDir: FORWARD + }); + const getItemStyleCache = useCache(); + const parsedHeight = vue.computed(() => Number.parseInt(`${props.height}`, 10)); + const parsedWidth = vue.computed(() => Number.parseInt(`${props.width}`, 10)); + const columnsToRender = vue.computed(() => { + const { totalColumn, totalRow, columnCache } = props; + const { isScrolling, xAxisScrollDir, scrollLeft } = vue.unref(states); + if (totalColumn === 0 || totalRow === 0) { + return [0, 0, 0, 0]; + } + const startIndex = getColumnStartIndexForOffset(props, scrollLeft, vue.unref(cache)); + const stopIndex = getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, vue.unref(cache)); + const cacheBackward = !isScrolling || xAxisScrollDir === BACKWARD ? Math.max(1, columnCache) : 1; + const cacheForward = !isScrolling || xAxisScrollDir === FORWARD ? Math.max(1, columnCache) : 1; + return [ + Math.max(0, startIndex - cacheBackward), + Math.max(0, Math.min(totalColumn - 1, stopIndex + cacheForward)), + startIndex, + stopIndex + ]; + }); + const rowsToRender = vue.computed(() => { + const { totalColumn, totalRow, rowCache } = props; + const { isScrolling, yAxisScrollDir, scrollTop } = vue.unref(states); + if (totalColumn === 0 || totalRow === 0) { + return [0, 0, 0, 0]; + } + const startIndex = getRowStartIndexForOffset(props, scrollTop, vue.unref(cache)); + const stopIndex = getRowStopIndexForStartIndex(props, startIndex, scrollTop, vue.unref(cache)); + const cacheBackward = !isScrolling || yAxisScrollDir === BACKWARD ? Math.max(1, rowCache) : 1; + const cacheForward = !isScrolling || yAxisScrollDir === FORWARD ? Math.max(1, rowCache) : 1; + return [ + Math.max(0, startIndex - cacheBackward), + Math.max(0, Math.min(totalRow - 1, stopIndex + cacheForward)), + startIndex, + stopIndex + ]; + }); + const estimatedTotalHeight = vue.computed(() => getEstimatedTotalHeight(props, vue.unref(cache))); + const estimatedTotalWidth = vue.computed(() => getEstimatedTotalWidth(props, vue.unref(cache))); + const windowStyle = vue.computed(() => { + var _a; + return [ + { + position: "relative", + overflow: "hidden", + WebkitOverflowScrolling: "touch", + willChange: "transform" + }, + { + direction: props.direction, + height: isNumber$1(props.height) ? `${props.height}px` : props.height, + width: isNumber$1(props.width) ? `${props.width}px` : props.width + }, + (_a = props.style) != null ? _a : {} + ]; + }); + const innerStyle = vue.computed(() => { + const width = `${vue.unref(estimatedTotalWidth)}px`; + const height = `${vue.unref(estimatedTotalHeight)}px`; + return { + height, + pointerEvents: vue.unref(states).isScrolling ? "none" : void 0, + width + }; + }); + const emitEvents = () => { + const { totalColumn, totalRow } = props; + if (totalColumn > 0 && totalRow > 0) { + const [ + columnCacheStart, + columnCacheEnd, + columnVisibleStart, + columnVisibleEnd + ] = vue.unref(columnsToRender); + const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] = vue.unref(rowsToRender); + emit(ITEM_RENDER_EVT, { + columnCacheStart, + columnCacheEnd, + rowCacheStart, + rowCacheEnd, + columnVisibleStart, + columnVisibleEnd, + rowVisibleStart, + rowVisibleEnd + }); + } + const { + scrollLeft, + scrollTop, + updateRequested, + xAxisScrollDir, + yAxisScrollDir + } = vue.unref(states); + emit(SCROLL_EVT, { + xAxisScrollDir, + scrollLeft, + yAxisScrollDir, + scrollTop, + updateRequested + }); + }; + const onScroll = (e) => { + const { + clientHeight, + clientWidth, + scrollHeight, + scrollLeft, + scrollTop, + scrollWidth + } = e.currentTarget; + const _states = vue.unref(states); + if (_states.scrollTop === scrollTop && _states.scrollLeft === scrollLeft) { + return; + } + let _scrollLeft = scrollLeft; + if (isRTL(props.direction)) { + switch (getRTLOffsetType()) { + case RTL_OFFSET_NAG: + _scrollLeft = -scrollLeft; + break; + case RTL_OFFSET_POS_DESC: + _scrollLeft = scrollWidth - clientWidth - scrollLeft; + break; + } + } + states.value = { + ..._states, + isScrolling: true, + scrollLeft: _scrollLeft, + scrollTop: Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)), + updateRequested: true, + xAxisScrollDir: getScrollDir(_states.scrollLeft, _scrollLeft), + yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop) + }; + vue.nextTick(() => resetIsScrolling()); + onUpdated(); + emitEvents(); + }; + const onVerticalScroll = (distance, totalSteps) => { + const height = vue.unref(parsedHeight); + const offset = (estimatedTotalHeight.value - height) / totalSteps * distance; + scrollTo({ + scrollTop: Math.min(estimatedTotalHeight.value - height, offset) + }); + }; + const onHorizontalScroll = (distance, totalSteps) => { + const width = vue.unref(parsedWidth); + const offset = (estimatedTotalWidth.value - width) / totalSteps * distance; + scrollTo({ + scrollLeft: Math.min(estimatedTotalWidth.value - width, offset) + }); + }; + const { onWheel } = useGridWheel({ + atXStartEdge: vue.computed(() => states.value.scrollLeft <= 0), + atXEndEdge: vue.computed(() => states.value.scrollLeft >= estimatedTotalWidth.value - vue.unref(parsedWidth)), + atYStartEdge: vue.computed(() => states.value.scrollTop <= 0), + atYEndEdge: vue.computed(() => states.value.scrollTop >= estimatedTotalHeight.value - vue.unref(parsedHeight)) + }, (x, y) => { + var _a, _b, _c, _d; + (_b = (_a = hScrollbar.value) == null ? void 0 : _a.onMouseUp) == null ? void 0 : _b.call(_a); + (_d = (_c = hScrollbar.value) == null ? void 0 : _c.onMouseUp) == null ? void 0 : _d.call(_c); + const width = vue.unref(parsedWidth); + const height = vue.unref(parsedHeight); + scrollTo({ + scrollLeft: Math.min(states.value.scrollLeft + x, estimatedTotalWidth.value - width), + scrollTop: Math.min(states.value.scrollTop + y, estimatedTotalHeight.value - height) + }); + }); + const scrollTo = ({ + scrollLeft = states.value.scrollLeft, + scrollTop = states.value.scrollTop + }) => { + scrollLeft = Math.max(scrollLeft, 0); + scrollTop = Math.max(scrollTop, 0); + const _states = vue.unref(states); + if (scrollTop === _states.scrollTop && scrollLeft === _states.scrollLeft) { + return; + } + states.value = { + ..._states, + xAxisScrollDir: getScrollDir(_states.scrollLeft, scrollLeft), + yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop), + scrollLeft, + scrollTop, + updateRequested: true + }; + vue.nextTick(() => resetIsScrolling()); + onUpdated(); + emitEvents(); + }; + const scrollToItem = (rowIndex = 0, columnIdx = 0, alignment = AUTO_ALIGNMENT) => { + const _states = vue.unref(states); + columnIdx = Math.max(0, Math.min(columnIdx, props.totalColumn - 1)); + rowIndex = Math.max(0, Math.min(rowIndex, props.totalRow - 1)); + const scrollBarWidth = getScrollBarWidth(ns.namespace.value); + const _cache = vue.unref(cache); + const estimatedHeight = getEstimatedTotalHeight(props, _cache); + const estimatedWidth = getEstimatedTotalWidth(props, _cache); + scrollTo({ + scrollLeft: getColumnOffset(props, columnIdx, alignment, _states.scrollLeft, _cache, estimatedWidth > props.width ? scrollBarWidth : 0), + scrollTop: getRowOffset(props, rowIndex, alignment, _states.scrollTop, _cache, estimatedHeight > props.height ? scrollBarWidth : 0) + }); + }; + const getItemStyle = (rowIndex, columnIndex) => { + const { columnWidth, direction, rowHeight } = props; + const itemStyleCache = getItemStyleCache.value(clearCache && columnWidth, clearCache && rowHeight, clearCache && direction); + const key = `${rowIndex},${columnIndex}`; + if (hasOwn(itemStyleCache, key)) { + return itemStyleCache[key]; + } else { + const [, left] = getColumnPosition(props, columnIndex, vue.unref(cache)); + const _cache = vue.unref(cache); + const rtl = isRTL(direction); + const [height, top] = getRowPosition(props, rowIndex, _cache); + const [width] = getColumnPosition(props, columnIndex, _cache); + itemStyleCache[key] = { + position: "absolute", + left: rtl ? void 0 : `${left}px`, + right: rtl ? `${left}px` : void 0, + top: `${top}px`, + height: `${height}px`, + width: `${width}px` + }; + return itemStyleCache[key]; + } + }; + const resetIsScrolling = () => { + states.value.isScrolling = false; + vue.nextTick(() => { + getItemStyleCache.value(-1, null, null); + }); + }; + vue.onMounted(() => { + if (!isClient) + return; + const { initScrollLeft, initScrollTop } = props; + const windowElement = vue.unref(windowRef); + if (windowElement) { + if (isNumber$1(initScrollLeft)) { + windowElement.scrollLeft = initScrollLeft; + } + if (isNumber$1(initScrollTop)) { + windowElement.scrollTop = initScrollTop; + } + } + emitEvents(); + }); + const onUpdated = () => { + const { direction } = props; + const { scrollLeft, scrollTop, updateRequested } = vue.unref(states); + const windowElement = vue.unref(windowRef); + if (updateRequested && windowElement) { + if (direction === RTL) { + switch (getRTLOffsetType()) { + case RTL_OFFSET_NAG: { + windowElement.scrollLeft = -scrollLeft; + break; + } + case RTL_OFFSET_POS_ASC: { + windowElement.scrollLeft = scrollLeft; + break; + } + default: { + const { clientWidth, scrollWidth } = windowElement; + windowElement.scrollLeft = scrollWidth - clientWidth - scrollLeft; + break; + } + } + } else { + windowElement.scrollLeft = Math.max(0, scrollLeft); + } + windowElement.scrollTop = Math.max(0, scrollTop); + } + }; + const { resetAfterColumnIndex, resetAfterRowIndex, resetAfter } = instance.proxy; + expose({ + windowRef, + innerRef, + getItemStyleCache, + scrollTo, + scrollToItem, + states, + resetAfterColumnIndex, + resetAfterRowIndex, + resetAfter + }); + const renderScrollbars = () => { + const { + scrollbarAlwaysOn, + scrollbarStartGap, + scrollbarEndGap, + totalColumn, + totalRow + } = props; + const width = vue.unref(parsedWidth); + const height = vue.unref(parsedHeight); + const estimatedWidth = vue.unref(estimatedTotalWidth); + const estimatedHeight = vue.unref(estimatedTotalHeight); + const { scrollLeft, scrollTop } = vue.unref(states); + const horizontalScrollbar = vue.h(Scrollbar, { + ref: hScrollbar, + alwaysOn: scrollbarAlwaysOn, + startGap: scrollbarStartGap, + endGap: scrollbarEndGap, + class: ns.e("horizontal"), + clientSize: width, + layout: "horizontal", + onScroll: onHorizontalScroll, + ratio: width * 100 / estimatedWidth, + scrollFrom: scrollLeft / (estimatedWidth - width), + total: totalRow, + visible: true + }); + const verticalScrollbar = vue.h(Scrollbar, { + ref: vScrollbar, + alwaysOn: scrollbarAlwaysOn, + startGap: scrollbarStartGap, + endGap: scrollbarEndGap, + class: ns.e("vertical"), + clientSize: height, + layout: "vertical", + onScroll: onVerticalScroll, + ratio: height * 100 / estimatedHeight, + scrollFrom: scrollTop / (estimatedHeight - height), + total: totalColumn, + visible: true + }); + return { + horizontalScrollbar, + verticalScrollbar + }; + }; + const renderItems = () => { + var _a; + const [columnStart, columnEnd] = vue.unref(columnsToRender); + const [rowStart, rowEnd] = vue.unref(rowsToRender); + const { data, totalColumn, totalRow, useIsScrolling, itemKey } = props; + const children = []; + if (totalRow > 0 && totalColumn > 0) { + for (let row = rowStart; row <= rowEnd; row++) { + for (let column = columnStart; column <= columnEnd; column++) { + children.push((_a = slots.default) == null ? void 0 : _a.call(slots, { + columnIndex: column, + data, + key: itemKey({ columnIndex: column, data, rowIndex: row }), + isScrolling: useIsScrolling ? vue.unref(states).isScrolling : void 0, + style: getItemStyle(row, column), + rowIndex: row + })); + } + } + } + return children; + }; + const renderInner = () => { + const Inner = vue.resolveDynamicComponent(props.innerElement); + const children = renderItems(); + return [ + vue.h(Inner, { + style: vue.unref(innerStyle), + ref: innerRef + }, !isString$1(Inner) ? { + default: () => children + } : children) + ]; + }; + const renderWindow = () => { + const Container = vue.resolveDynamicComponent(props.containerElement); + const { horizontalScrollbar, verticalScrollbar } = renderScrollbars(); + const Inner = renderInner(); + return vue.h("div", { + key: 0, + class: ns.e("wrapper"), + role: props.role + }, [ + vue.h(Container, { + class: props.className, + style: vue.unref(windowStyle), + onScroll, + onWheel, + ref: windowRef + }, !isString$1(Container) ? { default: () => Inner } : Inner), + horizontalScrollbar, + verticalScrollbar + ]); + }; + return renderWindow; + } + }); + }; + var createGrid$1 = createGrid; + + const FixedSizeGrid = createGrid$1({ + name: "ElFixedSizeGrid", + getColumnPosition: ({ columnWidth }, index) => [ + columnWidth, + index * columnWidth + ], + getRowPosition: ({ rowHeight }, index) => [ + rowHeight, + index * rowHeight + ], + getEstimatedTotalHeight: ({ totalRow, rowHeight }) => rowHeight * totalRow, + getEstimatedTotalWidth: ({ totalColumn, columnWidth }) => columnWidth * totalColumn, + getColumnOffset: ({ totalColumn, columnWidth, width }, columnIndex, alignment, scrollLeft, _, scrollBarWidth) => { + width = Number(width); + const lastColumnOffset = Math.max(0, totalColumn * columnWidth - width); + const maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth); + const minOffset = Math.max(0, columnIndex * columnWidth - width + scrollBarWidth + columnWidth); + if (alignment === "smart") { + if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) { + alignment = AUTO_ALIGNMENT; + } else { + alignment = CENTERED_ALIGNMENT; + } + } + switch (alignment) { + case START_ALIGNMENT: + return maxOffset; + case END_ALIGNMENT: + return minOffset; + case CENTERED_ALIGNMENT: { + const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2); + if (middleOffset < Math.ceil(width / 2)) { + return 0; + } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) { + return lastColumnOffset; + } else { + return middleOffset; + } + } + case AUTO_ALIGNMENT: + default: + if (scrollLeft >= minOffset && scrollLeft <= maxOffset) { + return scrollLeft; + } else if (minOffset > maxOffset) { + return minOffset; + } else if (scrollLeft < minOffset) { + return minOffset; + } else { + return maxOffset; + } + } + }, + getRowOffset: ({ rowHeight, height, totalRow }, rowIndex, align, scrollTop, _, scrollBarWidth) => { + height = Number(height); + const lastRowOffset = Math.max(0, totalRow * rowHeight - height); + const maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight); + const minOffset = Math.max(0, rowIndex * rowHeight - height + scrollBarWidth + rowHeight); + if (align === SMART_ALIGNMENT) { + if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) { + align = AUTO_ALIGNMENT; + } else { + align = CENTERED_ALIGNMENT; + } + } + switch (align) { + case START_ALIGNMENT: + return maxOffset; + case END_ALIGNMENT: + return minOffset; + case CENTERED_ALIGNMENT: { + const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2); + if (middleOffset < Math.ceil(height / 2)) { + return 0; + } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) { + return lastRowOffset; + } else { + return middleOffset; + } + } + case AUTO_ALIGNMENT: + default: + if (scrollTop >= minOffset && scrollTop <= maxOffset) { + return scrollTop; + } else if (minOffset > maxOffset) { + return minOffset; + } else if (scrollTop < minOffset) { + return minOffset; + } else { + return maxOffset; + } + } + }, + getColumnStartIndexForOffset: ({ columnWidth, totalColumn }, scrollLeft) => Math.max(0, Math.min(totalColumn - 1, Math.floor(scrollLeft / columnWidth))), + getColumnStopIndexForStartIndex: ({ columnWidth, totalColumn, width }, startIndex, scrollLeft) => { + const left = startIndex * columnWidth; + const visibleColumnsCount = Math.ceil((width + scrollLeft - left) / columnWidth); + return Math.max(0, Math.min(totalColumn - 1, startIndex + visibleColumnsCount - 1)); + }, + getRowStartIndexForOffset: ({ rowHeight, totalRow }, scrollTop) => Math.max(0, Math.min(totalRow - 1, Math.floor(scrollTop / rowHeight))), + getRowStopIndexForStartIndex: ({ rowHeight, totalRow, height }, startIndex, scrollTop) => { + const top = startIndex * rowHeight; + const numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight); + return Math.max(0, Math.min(totalRow - 1, startIndex + numVisibleRows - 1)); + }, + initCache: () => void 0, + clearCache: true, + validateProps: ({ columnWidth, rowHeight }) => { + } + }); + var FixedSizeGrid$1 = FixedSizeGrid; + + const { max, min, floor } = Math; + const ACCESS_SIZER_KEY_MAP = { + column: "columnWidth", + row: "rowHeight" + }; + const ACCESS_LAST_VISITED_KEY_MAP = { + column: "lastVisitedColumnIndex", + row: "lastVisitedRowIndex" + }; + const getItemFromCache = (props, index, gridCache, type) => { + const [cachedItems, sizer, lastVisited] = [ + gridCache[type], + props[ACCESS_SIZER_KEY_MAP[type]], + gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]] + ]; + if (index > lastVisited) { + let offset = 0; + if (lastVisited >= 0) { + const item = cachedItems[lastVisited]; + offset = item.offset + item.size; + } + for (let i = lastVisited + 1; i <= index; i++) { + const size = sizer(i); + cachedItems[i] = { + offset, + size + }; + offset += size; + } + gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]] = index; + } + return cachedItems[index]; + }; + const bs = (props, gridCache, low, high, offset, type) => { + while (low <= high) { + const mid = low + floor((high - low) / 2); + const currentOffset = getItemFromCache(props, mid, gridCache, type).offset; + if (currentOffset === offset) { + return mid; + } else if (currentOffset < offset) { + low = mid + 1; + } else { + high = mid - 1; + } + } + return max(0, low - 1); + }; + const es = (props, gridCache, idx, offset, type) => { + const total = type === "column" ? props.totalColumn : props.totalRow; + let exponent = 1; + while (idx < total && getItemFromCache(props, idx, gridCache, type).offset < offset) { + idx += exponent; + exponent *= 2; + } + return bs(props, gridCache, floor(idx / 2), min(idx, total - 1), offset, type); + }; + const findItem = (props, gridCache, offset, type) => { + const [cache, lastVisitedIndex] = [ + gridCache[type], + gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]] + ]; + const lastVisitedItemOffset = lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0; + if (lastVisitedItemOffset >= offset) { + return bs(props, gridCache, 0, lastVisitedIndex, offset, type); + } + return es(props, gridCache, max(0, lastVisitedIndex), offset, type); + }; + const getEstimatedTotalHeight = ({ totalRow }, { estimatedRowHeight, lastVisitedRowIndex, row }) => { + let sizeOfVisitedRows = 0; + if (lastVisitedRowIndex >= totalRow) { + lastVisitedRowIndex = totalRow - 1; + } + if (lastVisitedRowIndex >= 0) { + const item = row[lastVisitedRowIndex]; + sizeOfVisitedRows = item.offset + item.size; + } + const unvisitedItems = totalRow - lastVisitedRowIndex - 1; + const sizeOfUnvisitedItems = unvisitedItems * estimatedRowHeight; + return sizeOfVisitedRows + sizeOfUnvisitedItems; + }; + const getEstimatedTotalWidth = ({ totalColumn }, { column, estimatedColumnWidth, lastVisitedColumnIndex }) => { + let sizeOfVisitedColumns = 0; + if (lastVisitedColumnIndex > totalColumn) { + lastVisitedColumnIndex = totalColumn - 1; + } + if (lastVisitedColumnIndex >= 0) { + const item = column[lastVisitedColumnIndex]; + sizeOfVisitedColumns = item.offset + item.size; + } + const unvisitedItems = totalColumn - lastVisitedColumnIndex - 1; + const sizeOfUnvisitedItems = unvisitedItems * estimatedColumnWidth; + return sizeOfVisitedColumns + sizeOfUnvisitedItems; + }; + const ACCESS_ESTIMATED_SIZE_KEY_MAP = { + column: getEstimatedTotalWidth, + row: getEstimatedTotalHeight + }; + const getOffset$1 = (props, index, alignment, scrollOffset, cache, type, scrollBarWidth) => { + const [size, estimatedSizeAssociates] = [ + type === "row" ? props.height : props.width, + ACCESS_ESTIMATED_SIZE_KEY_MAP[type] + ]; + const item = getItemFromCache(props, index, cache, type); + const estimatedSize = estimatedSizeAssociates(props, cache); + const maxOffset = max(0, min(estimatedSize - size, item.offset)); + const minOffset = max(0, item.offset - size + scrollBarWidth + item.size); + if (alignment === SMART_ALIGNMENT) { + if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) { + alignment = AUTO_ALIGNMENT; + } else { + alignment = CENTERED_ALIGNMENT; + } + } + switch (alignment) { + case START_ALIGNMENT: { + return maxOffset; + } + case END_ALIGNMENT: { + return minOffset; + } + case CENTERED_ALIGNMENT: { + return Math.round(minOffset + (maxOffset - minOffset) / 2); + } + case AUTO_ALIGNMENT: + default: { + if (scrollOffset >= minOffset && scrollOffset <= maxOffset) { + return scrollOffset; + } else if (minOffset > maxOffset) { + return minOffset; + } else if (scrollOffset < minOffset) { + return minOffset; + } else { + return maxOffset; + } + } + } + }; + const DynamicSizeGrid = createGrid$1({ + name: "ElDynamicSizeGrid", + getColumnPosition: (props, idx, cache) => { + const item = getItemFromCache(props, idx, cache, "column"); + return [item.size, item.offset]; + }, + getRowPosition: (props, idx, cache) => { + const item = getItemFromCache(props, idx, cache, "row"); + return [item.size, item.offset]; + }, + getColumnOffset: (props, columnIndex, alignment, scrollLeft, cache, scrollBarWidth) => getOffset$1(props, columnIndex, alignment, scrollLeft, cache, "column", scrollBarWidth), + getRowOffset: (props, rowIndex, alignment, scrollTop, cache, scrollBarWidth) => getOffset$1(props, rowIndex, alignment, scrollTop, cache, "row", scrollBarWidth), + getColumnStartIndexForOffset: (props, scrollLeft, cache) => findItem(props, cache, scrollLeft, "column"), + getColumnStopIndexForStartIndex: (props, startIndex, scrollLeft, cache) => { + const item = getItemFromCache(props, startIndex, cache, "column"); + const maxOffset = scrollLeft + props.width; + let offset = item.offset + item.size; + let stopIndex = startIndex; + while (stopIndex < props.totalColumn - 1 && offset < maxOffset) { + stopIndex++; + offset += getItemFromCache(props, startIndex, cache, "column").size; + } + return stopIndex; + }, + getEstimatedTotalHeight, + getEstimatedTotalWidth, + getRowStartIndexForOffset: (props, scrollTop, cache) => findItem(props, cache, scrollTop, "row"), + getRowStopIndexForStartIndex: (props, startIndex, scrollTop, cache) => { + const { totalRow, height } = props; + const item = getItemFromCache(props, startIndex, cache, "row"); + const maxOffset = scrollTop + height; + let offset = item.size + item.offset; + let stopIndex = startIndex; + while (stopIndex < totalRow - 1 && offset < maxOffset) { + stopIndex++; + offset += getItemFromCache(props, stopIndex, cache, "row").size; + } + return stopIndex; + }, + injectToInstance: (instance, cache) => { + const resetAfter = ({ columnIndex, rowIndex }, forceUpdate) => { + var _a, _b; + forceUpdate = isUndefined(forceUpdate) ? true : forceUpdate; + if (isNumber$1(columnIndex)) { + cache.value.lastVisitedColumnIndex = Math.min(cache.value.lastVisitedColumnIndex, columnIndex - 1); + } + if (isNumber$1(rowIndex)) { + cache.value.lastVisitedRowIndex = Math.min(cache.value.lastVisitedRowIndex, rowIndex - 1); + } + (_a = instance.exposed) == null ? void 0 : _a.getItemStyleCache.value(-1, null, null); + if (forceUpdate) + (_b = instance.proxy) == null ? void 0 : _b.$forceUpdate(); + }; + const resetAfterColumnIndex = (columnIndex, forceUpdate) => { + resetAfter({ + columnIndex + }, forceUpdate); + }; + const resetAfterRowIndex = (rowIndex, forceUpdate) => { + resetAfter({ + rowIndex + }, forceUpdate); + }; + Object.assign(instance.proxy, { + resetAfterColumnIndex, + resetAfterRowIndex, + resetAfter + }); + }, + initCache: ({ + estimatedColumnWidth = DEFAULT_DYNAMIC_LIST_ITEM_SIZE, + estimatedRowHeight = DEFAULT_DYNAMIC_LIST_ITEM_SIZE + }) => { + const cache = { + column: {}, + estimatedColumnWidth, + estimatedRowHeight, + lastVisitedColumnIndex: -1, + lastVisitedRowIndex: -1, + row: {} + }; + return cache; + }, + clearCache: false, + validateProps: ({ columnWidth, rowHeight }) => { + } + }); + var DynamicSizeGrid$1 = DynamicSizeGrid; + + const _sfc_main$D = vue.defineComponent({ + props: { + item: { + type: Object, + required: true + }, + style: Object, + height: Number + }, + setup() { + const ns = useNamespace("select"); + return { + ns + }; + } + }); + function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) { + return _ctx.item.isTitle ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(_ctx.ns.be("group", "title")), + style: vue.normalizeStyle([_ctx.style, { lineHeight: `${_ctx.height}px` }]) + }, vue.toDisplayString(_ctx.item.label), 7)) : (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(_ctx.ns.be("group", "split")), + style: vue.normalizeStyle(_ctx.style) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.ns.be("group", "split-dash")), + style: vue.normalizeStyle({ top: `${_ctx.height / 2}px` }) + }, null, 6) + ], 6)); + } + var GroupItem = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$7], ["__file", "group-item.vue"]]); + + function useOption(props, { emit }) { + return { + hoverItem: () => { + if (!props.disabled) { + emit("hover", props.index); + } + }, + selectOptionClick: () => { + if (!props.disabled) { + emit("select", props.item, props.index); + } + } + }; + } + + const SelectProps = { + allowCreate: Boolean, + autocomplete: { + type: String, + default: "none" + }, + automaticDropdown: Boolean, + clearable: Boolean, + clearIcon: { + type: [String, Object], + default: circle_close_default + }, + effect: { + type: String, + default: "light" + }, + collapseTags: Boolean, + collapseTagsTooltip: { + type: Boolean, + default: false + }, + maxCollapseTags: { + type: Number, + default: 1 + }, + defaultFirstOption: Boolean, + disabled: Boolean, + estimatedOptionHeight: { + type: Number, + default: void 0 + }, + filterable: Boolean, + filterMethod: Function, + height: { + type: Number, + default: 170 + }, + itemHeight: { + type: Number, + default: 34 + }, + id: String, + loading: Boolean, + loadingText: String, + label: String, + modelValue: [Array, String, Number, Boolean, Object], + multiple: Boolean, + multipleLimit: { + type: Number, + default: 0 + }, + name: String, + noDataText: String, + noMatchText: String, + remoteMethod: Function, + reserveKeyword: { + type: Boolean, + default: true + }, + options: { + type: Array, + required: true + }, + placeholder: { + type: String + }, + teleported: useTooltipContentProps.teleported, + persistent: { + type: Boolean, + default: true + }, + popperClass: { + type: String, + default: "" + }, + popperOptions: { + type: Object, + default: () => ({}) + }, + remote: Boolean, + size: { + type: String, + validator: isValidComponentSize + }, + valueKey: { + type: String, + default: "value" + }, + scrollbarAlwaysOn: { + type: Boolean, + default: false + }, + validateEvent: { + type: Boolean, + default: true + }, + placement: { + type: definePropType(String), + values: Ee, + default: "bottom-start" + } + }; + const OptionProps = { + data: Array, + disabled: Boolean, + hovering: Boolean, + item: Object, + index: Number, + style: Object, + selected: Boolean, + created: Boolean + }; + + const _sfc_main$C = vue.defineComponent({ + props: OptionProps, + emits: ["select", "hover"], + setup(props, { emit }) { + const ns = useNamespace("select"); + const { hoverItem, selectOptionClick } = useOption(props, { emit }); + return { + ns, + hoverItem, + selectOptionClick + }; + } + }); + const _hoisted_1$h = ["aria-selected"]; + function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) { + return vue.openBlock(), vue.createElementBlock("li", { + "aria-selected": _ctx.selected, + style: vue.normalizeStyle(_ctx.style), + class: vue.normalizeClass([ + _ctx.ns.be("dropdown", "option-item"), + _ctx.ns.is("selected", _ctx.selected), + _ctx.ns.is("disabled", _ctx.disabled), + _ctx.ns.is("created", _ctx.created), + { hover: _ctx.hovering } + ]), + onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)), + onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"])) + }, [ + vue.renderSlot(_ctx.$slots, "default", { + item: _ctx.item, + index: _ctx.index, + disabled: _ctx.disabled + }, () => [ + vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.label), 1) + ]) + ], 46, _hoisted_1$h); + } + var OptionItem = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$6], ["__file", "option-item.vue"]]); + + const selectV2InjectionKey = Symbol("ElSelectV2Injection"); + + var ElSelectMenu = vue.defineComponent({ + name: "ElSelectDropdown", + props: { + data: { + type: Array, + required: true + }, + hoveringIndex: Number, + width: Number + }, + setup(props, { + slots, + expose + }) { + const select = vue.inject(selectV2InjectionKey); + const ns = useNamespace("select"); + const cachedHeights = vue.ref([]); + const listRef = vue.ref(); + const size = vue.computed(() => props.data.length); + vue.watch(() => size.value, () => { + var _a, _b; + (_b = (_a = select.popper.value).updatePopper) == null ? void 0 : _b.call(_a); + }); + const isSized = vue.computed(() => isUndefined(select.props.estimatedOptionHeight)); + const listProps = vue.computed(() => { + if (isSized.value) { + return { + itemSize: select.props.itemHeight + }; + } + return { + estimatedSize: select.props.estimatedOptionHeight, + itemSize: (idx) => cachedHeights.value[idx] + }; + }); + const contains = (arr = [], target) => { + const { + props: { + valueKey + } + } = select; + if (!isObject$1(target)) { + return arr.includes(target); + } + return arr && arr.some((item) => { + return get(item, valueKey) === get(target, valueKey); + }); + }; + const isEqual = (selected, target) => { + if (!isObject$1(target)) { + return selected === target; + } else { + const { + valueKey + } = select.props; + return get(selected, valueKey) === get(target, valueKey); + } + }; + const isItemSelected = (modelValue, target) => { + const { + valueKey + } = select.props; + if (select.props.multiple) { + return contains(modelValue, get(target, valueKey)); + } + return isEqual(modelValue, get(target, valueKey)); + }; + const isItemDisabled = (modelValue, selected) => { + const { + disabled, + multiple, + multipleLimit + } = select.props; + return disabled || !selected && (multiple ? multipleLimit > 0 && modelValue.length >= multipleLimit : false); + }; + const isItemHovering = (target) => props.hoveringIndex === target; + const scrollToItem = (index) => { + const list = listRef.value; + if (list) { + list.scrollToItem(index); + } + }; + const resetScrollTop = () => { + const list = listRef.value; + if (list) { + list.resetScrollTop(); + } + }; + expose({ + listRef, + isSized, + isItemDisabled, + isItemHovering, + isItemSelected, + scrollToItem, + resetScrollTop + }); + const Item = (itemProps) => { + const { + index, + data, + style + } = itemProps; + const sized = vue.unref(isSized); + const { + itemSize, + estimatedSize + } = vue.unref(listProps); + const { + modelValue + } = select.props; + const { + onSelect, + onHover + } = select; + const item = data[index]; + if (item.type === "Group") { + return vue.createVNode(GroupItem, { + "item": item, + "style": style, + "height": sized ? itemSize : estimatedSize + }, null); + } + const isSelected = isItemSelected(modelValue, item); + const isDisabled = isItemDisabled(modelValue, isSelected); + const isHovering = isItemHovering(index); + return vue.createVNode(OptionItem, vue.mergeProps(itemProps, { + "selected": isSelected, + "disabled": item.disabled || isDisabled, + "created": !!item.created, + "hovering": isHovering, + "item": item, + "onSelect": onSelect, + "onHover": onHover + }), { + default: (props2) => { + var _a; + return ((_a = slots.default) == null ? void 0 : _a.call(slots, props2)) || vue.createVNode("span", null, [item.label]); + } + }); + }; + const { + onKeyboardNavigate, + onKeyboardSelect + } = select; + const onForward = () => { + onKeyboardNavigate("forward"); + }; + const onBackward = () => { + onKeyboardNavigate("backward"); + }; + const onEscOrTab = () => { + select.expanded = false; + }; + const onKeydown = (e) => { + const { + code + } = e; + const { + tab, + esc, + down, + up, + enter + } = EVENT_CODE; + if (code !== tab) { + e.preventDefault(); + e.stopPropagation(); + } + switch (code) { + case tab: + case esc: { + onEscOrTab(); + break; + } + case down: { + onForward(); + break; + } + case up: { + onBackward(); + break; + } + case enter: { + onKeyboardSelect(); + break; + } + } + }; + return () => { + var _a; + const { + data, + width + } = props; + const { + height, + multiple, + scrollbarAlwaysOn + } = select.props; + if (data.length === 0) { + return vue.createVNode("div", { + "class": ns.b("dropdown"), + "style": { + width: `${width}px` + } + }, [(_a = slots.empty) == null ? void 0 : _a.call(slots)]); + } + const List = vue.unref(isSized) ? FixedSizeList$1 : DynamicSizeList$1; + return vue.createVNode("div", { + "class": [ns.b("dropdown"), ns.is("multiple", multiple)] + }, [vue.createVNode(List, vue.mergeProps({ + "ref": listRef + }, vue.unref(listProps), { + "className": ns.be("dropdown", "list"), + "scrollbarAlwaysOn": scrollbarAlwaysOn, + "data": data, + "height": height, + "width": width, + "total": data.length, + "onKeydown": onKeydown + }), { + default: (props2) => vue.createVNode(Item, props2, null) + })]); + }; + } + }); + + function useAllowCreate(props, states) { + const createOptionCount = vue.ref(0); + const cachedSelectedOption = vue.ref(null); + const enableAllowCreateMode = vue.computed(() => { + return props.allowCreate && props.filterable; + }); + function hasExistingOption(query) { + const hasValue = (option) => option.value === query; + return props.options && props.options.some(hasValue) || states.createdOptions.some(hasValue); + } + function selectNewOption(option) { + if (!enableAllowCreateMode.value) { + return; + } + if (props.multiple && option.created) { + createOptionCount.value++; + } else { + cachedSelectedOption.value = option; + } + } + function createNewOption(query) { + if (enableAllowCreateMode.value) { + if (query && query.length > 0 && !hasExistingOption(query)) { + const newOption = { + value: query, + label: query, + created: true, + disabled: false + }; + if (states.createdOptions.length >= createOptionCount.value) { + states.createdOptions[createOptionCount.value] = newOption; + } else { + states.createdOptions.push(newOption); + } + } else { + if (props.multiple) { + states.createdOptions.length = createOptionCount.value; + } else { + const selectedOption = cachedSelectedOption.value; + states.createdOptions.length = 0; + if (selectedOption && selectedOption.created) { + states.createdOptions.push(selectedOption); + } + } + } + } + } + function removeNewOption(option) { + if (!enableAllowCreateMode.value || !option || !option.created || option.created && props.reserveKeyword && states.inputValue === option.label) { + return; + } + const idx = states.createdOptions.findIndex((it) => it.value === option.value); + if (~idx) { + states.createdOptions.splice(idx, 1); + createOptionCount.value--; + } + } + function clearAllNewOption() { + if (enableAllowCreateMode.value) { + states.createdOptions.length = 0; + createOptionCount.value = 0; + } + } + return { + createNewOption, + removeNewOption, + selectNewOption, + clearAllNewOption + }; + } + + const flattenOptions = (options) => { + const flattened = []; + options.forEach((option) => { + if (isArray$1(option.options)) { + flattened.push({ + label: option.label, + isTitle: true, + type: "Group" + }); + option.options.forEach((o) => { + flattened.push(o); + }); + flattened.push({ + type: "Group" + }); + } else { + flattened.push(option); + } + }); + return flattened; + }; + + function useInput(handleInput) { + const isComposing = vue.ref(false); + const handleCompositionStart = () => { + isComposing.value = true; + }; + const handleCompositionUpdate = (event) => { + const text = event.target.value; + const lastCharacter = text[text.length - 1] || ""; + isComposing.value = !isKorean(lastCharacter); + }; + const handleCompositionEnd = (event) => { + if (isComposing.value) { + isComposing.value = false; + if (isFunction$1(handleInput)) { + handleInput(event); + } + } + }; + return { + handleCompositionStart, + handleCompositionUpdate, + handleCompositionEnd + }; + } + + const DEFAULT_INPUT_PLACEHOLDER = ""; + const MINIMUM_INPUT_WIDTH = 11; + const TAG_BASE_WIDTH = { + larget: 51, + default: 42, + small: 33 + }; + const useSelect$1 = (props, emit) => { + const { t } = useLocale(); + const nsSelectV2 = useNamespace("select-v2"); + const nsInput = useNamespace("input"); + const { form: elForm, formItem: elFormItem } = useFormItem(); + const states = vue.reactive({ + inputValue: DEFAULT_INPUT_PLACEHOLDER, + displayInputValue: DEFAULT_INPUT_PLACEHOLDER, + calculatedWidth: 0, + cachedPlaceholder: "", + cachedOptions: [], + createdOptions: [], + createdLabel: "", + createdSelected: false, + currentPlaceholder: "", + hoveringIndex: -1, + comboBoxHovering: false, + isOnComposition: false, + isSilentBlur: false, + isComposing: false, + inputLength: 20, + selectWidth: 200, + initialInputHeight: 0, + previousQuery: null, + previousValue: void 0, + query: "", + selectedLabel: "", + softFocus: false, + tagInMultiLine: false + }); + const selectedIndex = vue.ref(-1); + const popperSize = vue.ref(-1); + const controlRef = vue.ref(null); + const inputRef = vue.ref(null); + const menuRef = vue.ref(null); + const popper = vue.ref(null); + const selectRef = vue.ref(null); + const selectionRef = vue.ref(null); + const calculatorRef = vue.ref(null); + const expanded = vue.ref(false); + const selectDisabled = vue.computed(() => props.disabled || (elForm == null ? void 0 : elForm.disabled)); + const popupHeight = vue.computed(() => { + const totalHeight = filteredOptions.value.length * 34; + return totalHeight > props.height ? props.height : totalHeight; + }); + const hasModelValue = vue.computed(() => { + return !isNil(props.modelValue); + }); + const showClearBtn = vue.computed(() => { + const hasValue = props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : hasModelValue.value; + const criteria = props.clearable && !selectDisabled.value && states.comboBoxHovering && hasValue; + return criteria; + }); + const iconComponent = vue.computed(() => props.remote && props.filterable ? "" : arrow_up_default); + const iconReverse = vue.computed(() => iconComponent.value && nsSelectV2.is("reverse", expanded.value)); + const validateState = vue.computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || ""); + const validateIcon = vue.computed(() => ValidateComponentsMap[validateState.value]); + const debounce$1 = vue.computed(() => props.remote ? 300 : 0); + const emptyText = vue.computed(() => { + const options = filteredOptions.value; + if (props.loading) { + return props.loadingText || t("el.select.loading"); + } else { + if (props.remote && states.inputValue === "" && options.length === 0) + return false; + if (props.filterable && states.inputValue && options.length > 0) { + return props.noMatchText || t("el.select.noMatch"); + } + if (options.length === 0) { + return props.noDataText || t("el.select.noData"); + } + } + return null; + }); + const filteredOptions = vue.computed(() => { + const isValidOption = (o) => { + const query = states.inputValue; + const regexp = new RegExp(escapeStringRegexp(query), "i"); + const containsQueryString = query ? regexp.test(o.label || "") : true; + return containsQueryString; + }; + if (props.loading) { + return []; + } + return flattenOptions(props.options.concat(states.createdOptions).map((v) => { + if (isArray$1(v.options)) { + const filtered = v.options.filter(isValidOption); + if (filtered.length > 0) { + return { + ...v, + options: filtered + }; + } + } else { + if (props.remote || isValidOption(v)) { + return v; + } + } + return null; + }).filter((v) => v !== null)); + }); + const optionsAllDisabled = vue.computed(() => filteredOptions.value.every((option) => option.disabled)); + const selectSize = useFormSize(); + const collapseTagSize = vue.computed(() => selectSize.value === "small" ? "small" : "default"); + const tagMaxWidth = vue.computed(() => { + const select = selectionRef.value; + const size = collapseTagSize.value || "default"; + const paddingLeft = select ? Number.parseInt(getComputedStyle(select).paddingLeft) : 0; + const paddingRight = select ? Number.parseInt(getComputedStyle(select).paddingRight) : 0; + return states.selectWidth - paddingRight - paddingLeft - TAG_BASE_WIDTH[size]; + }); + const calculatePopperSize = () => { + var _a; + popperSize.value = ((_a = selectRef.value) == null ? void 0 : _a.offsetWidth) || 200; + }; + const inputWrapperStyle = vue.computed(() => { + return { + width: `${states.calculatedWidth === 0 ? MINIMUM_INPUT_WIDTH : Math.ceil(states.calculatedWidth) + MINIMUM_INPUT_WIDTH}px` + }; + }); + const shouldShowPlaceholder = vue.computed(() => { + if (isArray$1(props.modelValue)) { + return props.modelValue.length === 0 && !states.displayInputValue; + } + return props.filterable ? states.displayInputValue.length === 0 : true; + }); + const currentPlaceholder = vue.computed(() => { + const _placeholder = props.placeholder || t("el.select.placeholder"); + return props.multiple || isNil(props.modelValue) ? _placeholder : states.selectedLabel; + }); + const popperRef = vue.computed(() => { + var _a, _b; + return (_b = (_a = popper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef; + }); + const indexRef = vue.computed(() => { + if (props.multiple) { + const len = props.modelValue.length; + if (props.modelValue.length > 0) { + return filteredOptions.value.findIndex((o) => o.value === props.modelValue[len - 1]); + } + } else { + if (props.modelValue) { + return filteredOptions.value.findIndex((o) => o.value === props.modelValue); + } + } + return -1; + }); + const dropdownMenuVisible = vue.computed({ + get() { + return expanded.value && emptyText.value !== false; + }, + set(val) { + expanded.value = val; + } + }); + const showTagList = vue.computed(() => states.cachedOptions.slice(0, props.maxCollapseTags)); + const collapseTagList = vue.computed(() => states.cachedOptions.slice(props.maxCollapseTags)); + const { + createNewOption, + removeNewOption, + selectNewOption, + clearAllNewOption + } = useAllowCreate(props, states); + const { + handleCompositionStart, + handleCompositionUpdate, + handleCompositionEnd + } = useInput((e) => onInput(e)); + const focusAndUpdatePopup = () => { + var _a, _b, _c; + (_b = (_a = inputRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a); + (_c = popper.value) == null ? void 0 : _c.updatePopper(); + }; + const toggleMenu = () => { + if (props.automaticDropdown) + return; + if (!selectDisabled.value) { + if (states.isComposing) + states.softFocus = true; + return vue.nextTick(() => { + var _a, _b; + expanded.value = !expanded.value; + (_b = (_a = inputRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a); + }); + } + }; + const onInputChange = () => { + if (props.filterable && states.inputValue !== states.selectedLabel) { + states.query = states.selectedLabel; + } + handleQueryChange(states.inputValue); + return vue.nextTick(() => { + createNewOption(states.inputValue); + }); + }; + const debouncedOnInputChange = debounce(onInputChange, debounce$1.value); + const handleQueryChange = (val) => { + if (states.previousQuery === val) { + return; + } + states.previousQuery = val; + if (props.filterable && isFunction$1(props.filterMethod)) { + props.filterMethod(val); + } else if (props.filterable && props.remote && isFunction$1(props.remoteMethod)) { + props.remoteMethod(val); + } + }; + const emitChange = (val) => { + if (!isEqual$1(props.modelValue, val)) { + emit(CHANGE_EVENT, val); + } + }; + const update = (val) => { + emit(UPDATE_MODEL_EVENT, val); + emitChange(val); + states.previousValue = val == null ? void 0 : val.toString(); + }; + const getValueIndex = (arr = [], value) => { + if (!isObject$1(value)) { + return arr.indexOf(value); + } + const valueKey = props.valueKey; + let index = -1; + arr.some((item, i) => { + if (get(item, valueKey) === get(value, valueKey)) { + index = i; + return true; + } + return false; + }); + return index; + }; + const getValueKey = (item) => { + return isObject$1(item) ? get(item, props.valueKey) : item; + }; + const getLabel = (item) => { + return isObject$1(item) ? item.label : item; + }; + const resetInputHeight = () => { + return vue.nextTick(() => { + var _a, _b; + if (!inputRef.value) + return; + const selection = selectionRef.value; + selectRef.value.height = selection.offsetHeight; + if (expanded.value && emptyText.value !== false) { + (_b = (_a = popper.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a); + } + }); + }; + const handleResize = () => { + var _a, _b; + resetInputWidth(); + calculatePopperSize(); + (_b = (_a = popper.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a); + if (props.multiple) { + return resetInputHeight(); + } + }; + const resetInputWidth = () => { + const select = selectionRef.value; + if (select) { + states.selectWidth = select.getBoundingClientRect().width; + } + }; + const onSelect = (option, idx, byClick = true) => { + var _a, _b; + if (props.multiple) { + let selectedOptions = props.modelValue.slice(); + const index = getValueIndex(selectedOptions, getValueKey(option)); + if (index > -1) { + selectedOptions = [ + ...selectedOptions.slice(0, index), + ...selectedOptions.slice(index + 1) + ]; + states.cachedOptions.splice(index, 1); + removeNewOption(option); + } else if (props.multipleLimit <= 0 || selectedOptions.length < props.multipleLimit) { + selectedOptions = [...selectedOptions, getValueKey(option)]; + states.cachedOptions.push(option); + selectNewOption(option); + updateHoveringIndex(idx); + } + update(selectedOptions); + if (option.created) { + states.query = ""; + handleQueryChange(""); + states.inputLength = 20; + } + if (props.filterable && !props.reserveKeyword) { + (_b = (_a = inputRef.value).focus) == null ? void 0 : _b.call(_a); + onUpdateInputValue(""); + } + if (props.filterable) { + states.calculatedWidth = calculatorRef.value.getBoundingClientRect().width; + } + resetInputHeight(); + setSoftFocus(); + } else { + selectedIndex.value = idx; + states.selectedLabel = option.label; + update(getValueKey(option)); + expanded.value = false; + states.isComposing = false; + states.isSilentBlur = byClick; + selectNewOption(option); + if (!option.created) { + clearAllNewOption(); + } + updateHoveringIndex(idx); + } + }; + const deleteTag = (event, tag) => { + const { valueKey } = props; + const index = props.modelValue.indexOf(get(tag, valueKey)); + if (index > -1 && !selectDisabled.value) { + const value = [ + ...props.modelValue.slice(0, index), + ...props.modelValue.slice(index + 1) + ]; + states.cachedOptions.splice(index, 1); + update(value); + emit("remove-tag", get(tag, valueKey)); + states.softFocus = true; + removeNewOption(tag); + return vue.nextTick(focusAndUpdatePopup); + } + event.stopPropagation(); + }; + const handleFocus = (event) => { + const focused = states.isComposing; + states.isComposing = true; + if (!states.softFocus) { + if (!focused) + emit("focus", event); + } else { + states.softFocus = false; + } + }; + const handleBlur = (event) => { + states.softFocus = false; + return vue.nextTick(() => { + var _a, _b; + (_b = (_a = inputRef.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a); + if (calculatorRef.value) { + states.calculatedWidth = calculatorRef.value.getBoundingClientRect().width; + } + if (states.isSilentBlur) { + states.isSilentBlur = false; + } else { + if (states.isComposing) { + emit("blur", event); + } + } + states.isComposing = false; + }); + }; + const handleEsc = () => { + if (states.displayInputValue.length > 0) { + onUpdateInputValue(""); + } else { + expanded.value = false; + } + }; + const handleDel = (e) => { + if (states.displayInputValue.length === 0) { + e.preventDefault(); + const selected = props.modelValue.slice(); + selected.pop(); + removeNewOption(states.cachedOptions.pop()); + update(selected); + } + }; + const handleClear = () => { + let emptyValue; + if (isArray$1(props.modelValue)) { + emptyValue = []; + } else { + emptyValue = void 0; + } + states.softFocus = true; + if (props.multiple) { + states.cachedOptions = []; + } else { + states.selectedLabel = ""; + } + expanded.value = false; + update(emptyValue); + emit("clear"); + clearAllNewOption(); + return vue.nextTick(focusAndUpdatePopup); + }; + const onUpdateInputValue = (val) => { + states.displayInputValue = val; + states.inputValue = val; + }; + const onKeyboardNavigate = (direction, hoveringIndex = void 0) => { + const options = filteredOptions.value; + if (!["forward", "backward"].includes(direction) || selectDisabled.value || options.length <= 0 || optionsAllDisabled.value) { + return; + } + if (!expanded.value) { + return toggleMenu(); + } + if (hoveringIndex === void 0) { + hoveringIndex = states.hoveringIndex; + } + let newIndex = -1; + if (direction === "forward") { + newIndex = hoveringIndex + 1; + if (newIndex >= options.length) { + newIndex = 0; + } + } else if (direction === "backward") { + newIndex = hoveringIndex - 1; + if (newIndex < 0 || newIndex >= options.length) { + newIndex = options.length - 1; + } + } + const option = options[newIndex]; + if (option.disabled || option.type === "Group") { + return onKeyboardNavigate(direction, newIndex); + } else { + updateHoveringIndex(newIndex); + scrollToItem(newIndex); + } + }; + const onKeyboardSelect = () => { + if (!expanded.value) { + return toggleMenu(); + } else if (~states.hoveringIndex && filteredOptions.value[states.hoveringIndex]) { + onSelect(filteredOptions.value[states.hoveringIndex], states.hoveringIndex, false); + } + }; + const updateHoveringIndex = (idx) => { + states.hoveringIndex = idx; + }; + const resetHoveringIndex = () => { + states.hoveringIndex = -1; + }; + const setSoftFocus = () => { + var _a; + const _input = inputRef.value; + if (_input) { + (_a = _input.focus) == null ? void 0 : _a.call(_input); + } + }; + const onInput = (event) => { + const value = event.target.value; + onUpdateInputValue(value); + if (states.displayInputValue.length > 0 && !expanded.value) { + expanded.value = true; + } + states.calculatedWidth = calculatorRef.value.getBoundingClientRect().width; + if (props.multiple) { + resetInputHeight(); + } + if (props.remote) { + debouncedOnInputChange(); + } else { + return onInputChange(); + } + }; + const handleClickOutside = () => { + expanded.value = false; + return handleBlur(); + }; + const handleMenuEnter = () => { + states.inputValue = states.displayInputValue; + return vue.nextTick(() => { + if (~indexRef.value) { + updateHoveringIndex(indexRef.value); + scrollToItem(states.hoveringIndex); + } + }); + }; + const scrollToItem = (index) => { + menuRef.value.scrollToItem(index); + }; + const initStates = () => { + resetHoveringIndex(); + if (props.multiple) { + if (props.modelValue.length > 0) { + let initHovering = false; + states.cachedOptions.length = 0; + states.previousValue = props.modelValue.toString(); + props.modelValue.forEach((selected) => { + const itemIndex = filteredOptions.value.findIndex((option) => getValueKey(option) === selected); + if (~itemIndex) { + states.cachedOptions.push(filteredOptions.value[itemIndex]); + if (!initHovering) { + updateHoveringIndex(itemIndex); + } + initHovering = true; + } + }); + } else { + states.cachedOptions = []; + states.previousValue = void 0; + } + } else { + if (hasModelValue.value) { + states.previousValue = props.modelValue; + const options = filteredOptions.value; + const selectedItemIndex = options.findIndex((option) => getValueKey(option) === getValueKey(props.modelValue)); + if (~selectedItemIndex) { + states.selectedLabel = options[selectedItemIndex].label; + updateHoveringIndex(selectedItemIndex); + } else { + states.selectedLabel = `${props.modelValue}`; + } + } else { + states.selectedLabel = ""; + states.previousValue = void 0; + } + } + clearAllNewOption(); + calculatePopperSize(); + }; + vue.watch(expanded, (val) => { + var _a, _b; + emit("visible-change", val); + if (val) { + (_b = (_a = popper.value).update) == null ? void 0 : _b.call(_a); + } else { + states.displayInputValue = ""; + states.previousQuery = null; + createNewOption(""); + } + }); + vue.watch(() => props.modelValue, (val, oldVal) => { + var _a; + if (!val || val.toString() !== states.previousValue) { + initStates(); + } + if (!isEqual$1(val, oldVal) && props.validateEvent) { + (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn()); + } + }, { + deep: true + }); + vue.watch(() => props.options, () => { + const input = inputRef.value; + if (!input || input && document.activeElement !== input) { + initStates(); + } + }, { + deep: true + }); + vue.watch(filteredOptions, () => { + return vue.nextTick(menuRef.value.resetScrollTop); + }); + vue.onMounted(() => { + initStates(); + }); + useResizeObserver(selectRef, handleResize); + return { + collapseTagSize, + currentPlaceholder, + expanded, + emptyText, + popupHeight, + debounce: debounce$1, + filteredOptions, + iconComponent, + iconReverse, + inputWrapperStyle, + popperSize, + dropdownMenuVisible, + hasModelValue, + shouldShowPlaceholder, + selectDisabled, + selectSize, + showClearBtn, + states, + tagMaxWidth, + nsSelectV2, + nsInput, + calculatorRef, + controlRef, + inputRef, + menuRef, + popper, + selectRef, + selectionRef, + popperRef, + validateState, + validateIcon, + showTagList, + collapseTagList, + debouncedOnInputChange, + deleteTag, + getLabel, + getValueKey, + handleBlur, + handleClear, + handleClickOutside, + handleDel, + handleEsc, + handleFocus, + handleMenuEnter, + handleResize, + toggleMenu, + scrollTo: scrollToItem, + onInput, + onKeyboardNavigate, + onKeyboardSelect, + onSelect, + onHover: updateHoveringIndex, + onUpdateInputValue, + handleCompositionStart, + handleCompositionEnd, + handleCompositionUpdate + }; + }; + var useSelect$2 = useSelect$1; + + const _sfc_main$B = vue.defineComponent({ + name: "ElSelectV2", + components: { + ElSelectMenu, + ElTag, + ElTooltip, + ElIcon + }, + directives: { ClickOutside, ModelText: vue.vModelText }, + props: SelectProps, + emits: [ + UPDATE_MODEL_EVENT, + CHANGE_EVENT, + "remove-tag", + "clear", + "visible-change", + "focus", + "blur" + ], + setup(props, { emit }) { + const modelValue = vue.computed(() => { + const { modelValue: rawModelValue, multiple } = props; + const fallback = multiple ? [] : void 0; + if (isArray$1(rawModelValue)) { + return multiple ? rawModelValue : fallback; + } + return multiple ? fallback : rawModelValue; + }); + const API = useSelect$2(vue.reactive({ + ...vue.toRefs(props), + modelValue + }), emit); + vue.provide(selectV2InjectionKey, { + props: vue.reactive({ + ...vue.toRefs(props), + height: API.popupHeight, + modelValue + }), + popper: API.popper, + onSelect: API.onSelect, + onHover: API.onHover, + onKeyboardNavigate: API.onKeyboardNavigate, + onKeyboardSelect: API.onKeyboardSelect + }); + return { + ...API, + modelValue + }; + } + }); + const _hoisted_1$g = { key: 0 }; + const _hoisted_2$b = ["id", "autocomplete", "aria-expanded", "aria-labelledby", "disabled", "readonly", "name", "unselectable"]; + const _hoisted_3$5 = ["textContent"]; + const _hoisted_4$3 = ["id", "aria-labelledby", "aria-expanded", "autocomplete", "disabled", "name", "readonly", "unselectable"]; + const _hoisted_5$2 = ["textContent"]; + function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_tag = vue.resolveComponent("el-tag"); + const _component_el_tooltip = vue.resolveComponent("el-tooltip"); + const _component_el_icon = vue.resolveComponent("el-icon"); + const _component_el_select_menu = vue.resolveComponent("el-select-menu"); + const _directive_model_text = vue.resolveDirective("model-text"); + const _directive_click_outside = vue.resolveDirective("click-outside"); + return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { + ref: "selectRef", + class: vue.normalizeClass([_ctx.nsSelectV2.b(), _ctx.nsSelectV2.m(_ctx.selectSize)]), + onClick: _cache[24] || (_cache[24] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"])), + onMouseenter: _cache[25] || (_cache[25] = ($event) => _ctx.states.comboBoxHovering = true), + onMouseleave: _cache[26] || (_cache[26] = ($event) => _ctx.states.comboBoxHovering = false) + }, [ + vue.createVNode(_component_el_tooltip, { + ref: "popper", + visible: _ctx.dropdownMenuVisible, + teleported: _ctx.teleported, + "popper-class": [_ctx.nsSelectV2.e("popper"), _ctx.popperClass], + "gpu-acceleration": false, + "stop-popper-mouse-event": false, + "popper-options": _ctx.popperOptions, + "fallback-placements": ["bottom-start", "top-start", "right", "left"], + effect: _ctx.effect, + placement: _ctx.placement, + pure: "", + transition: `${_ctx.nsSelectV2.namespace.value}-zoom-in-top`, + trigger: "click", + persistent: _ctx.persistent, + onBeforeShow: _ctx.handleMenuEnter, + onHide: _cache[23] || (_cache[23] = ($event) => _ctx.states.inputValue = _ctx.states.displayInputValue) + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("div", { + ref: "selectionRef", + class: vue.normalizeClass([ + _ctx.nsSelectV2.e("wrapper"), + _ctx.nsSelectV2.is("focused", _ctx.states.isComposing || _ctx.expanded), + _ctx.nsSelectV2.is("hovering", _ctx.states.comboBoxHovering), + _ctx.nsSelectV2.is("filterable", _ctx.filterable), + _ctx.nsSelectV2.is("disabled", _ctx.selectDisabled) + ]) + }, [ + _ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [ + vue.renderSlot(_ctx.$slots, "prefix") + ])) : vue.createCommentVNode("v-if", true), + _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(_ctx.nsSelectV2.e("selection")) + }, [ + _ctx.collapseTags && _ctx.modelValue.length > 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.showTagList, (item) => { + return vue.openBlock(), vue.createElementBlock("div", { + key: _ctx.getValueKey(item), + class: vue.normalizeClass(_ctx.nsSelectV2.e("selected-item")) + }, [ + vue.createVNode(_component_el_tag, { + closable: !_ctx.selectDisabled && !(item == null ? void 0 : item.disable), + size: _ctx.collapseTagSize, + type: "info", + "disable-transitions": "", + onClose: ($event) => _ctx.deleteTag($event, item) + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.nsSelectV2.e("tags-text")), + style: vue.normalizeStyle({ + maxWidth: `${_ctx.tagMaxWidth}px` + }) + }, vue.toDisplayString(item == null ? void 0 : item.label), 7) + ]), + _: 2 + }, 1032, ["closable", "size", "onClose"]) + ], 2); + }), 128)), + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.nsSelectV2.e("selected-item")) + }, [ + _ctx.modelValue.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(_component_el_tag, { + key: 0, + closable: false, + size: _ctx.collapseTagSize, + type: "info", + "disable-transitions": "" + }, { + default: vue.withCtx(() => [ + _ctx.collapseTagsTooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, { + key: 0, + disabled: _ctx.dropdownMenuVisible, + "fallback-placements": ["bottom", "top", "right", "left"], + effect: _ctx.effect, + placement: "bottom", + teleported: false + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.nsSelectV2.e("tags-text")), + style: vue.normalizeStyle({ + maxWidth: `${_ctx.tagMaxWidth}px` + }) + }, "+ " + vue.toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 7) + ]), + content: vue.withCtx(() => [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.nsSelectV2.e("selection")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.collapseTagList, (selected) => { + return vue.openBlock(), vue.createElementBlock("div", { + key: _ctx.getValueKey(selected), + class: vue.normalizeClass(_ctx.nsSelectV2.e("selected-item")) + }, [ + vue.createVNode(_component_el_tag, { + closable: !_ctx.selectDisabled && !selected.disabled, + size: _ctx.collapseTagSize, + class: "in-tooltip", + type: "info", + "disable-transitions": "", + onClose: ($event) => _ctx.deleteTag($event, selected) + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.nsSelectV2.e("tags-text")), + style: vue.normalizeStyle({ + maxWidth: `${_ctx.tagMaxWidth}px` + }) + }, vue.toDisplayString(_ctx.getLabel(selected)), 7) + ]), + _: 2 + }, 1032, ["closable", "size", "onClose"]) + ], 2); + }), 128)) + ], 2) + ]), + _: 1 + }, 8, ["disabled", "effect"])) : (vue.openBlock(), vue.createElementBlock("span", { + key: 1, + class: vue.normalizeClass(_ctx.nsSelectV2.e("tags-text")), + style: vue.normalizeStyle({ + maxWidth: `${_ctx.tagMaxWidth}px` + }) + }, "+ " + vue.toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 7)) + ]), + _: 1 + }, 8, ["size"])) : vue.createCommentVNode("v-if", true) + ], 2) + ], 64)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.states.cachedOptions, (selected) => { + return vue.openBlock(), vue.createElementBlock("div", { + key: _ctx.getValueKey(selected), + class: vue.normalizeClass(_ctx.nsSelectV2.e("selected-item")) + }, [ + vue.createVNode(_component_el_tag, { + closable: !_ctx.selectDisabled && !selected.disabled, + size: _ctx.collapseTagSize, + type: "info", + "disable-transitions": "", + onClose: ($event) => _ctx.deleteTag($event, selected) + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.nsSelectV2.e("tags-text")), + style: vue.normalizeStyle({ + maxWidth: `${_ctx.tagMaxWidth}px` + }) + }, vue.toDisplayString(_ctx.getLabel(selected)), 7) + ]), + _: 2 + }, 1032, ["closable", "size", "onClose"]) + ], 2); + }), 128)), + vue.createElementVNode("div", { + class: vue.normalizeClass([ + _ctx.nsSelectV2.e("selected-item"), + _ctx.nsSelectV2.e("input-wrapper") + ]), + style: vue.normalizeStyle(_ctx.inputWrapperStyle) + }, [ + vue.withDirectives(vue.createElementVNode("input", { + id: _ctx.id, + ref: "inputRef", + autocomplete: _ctx.autocomplete, + "aria-autocomplete": "list", + "aria-haspopup": "listbox", + autocapitalize: "off", + "aria-expanded": _ctx.expanded, + "aria-labelledby": _ctx.label, + class: vue.normalizeClass([ + _ctx.nsSelectV2.is(_ctx.selectSize), + _ctx.nsSelectV2.e("combobox-input") + ]), + disabled: _ctx.disabled, + role: "combobox", + readonly: !_ctx.filterable, + spellcheck: "false", + type: "text", + name: _ctx.name, + unselectable: _ctx.expanded ? "on" : void 0, + "onUpdate:modelValue": _cache[0] || (_cache[0] = (...args) => _ctx.onUpdateInputValue && _ctx.onUpdateInputValue(...args)), + onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)), + onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)), + onInput: _cache[3] || (_cache[3] = (...args) => _ctx.onInput && _ctx.onInput(...args)), + onCompositionstart: _cache[4] || (_cache[4] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)), + onCompositionupdate: _cache[5] || (_cache[5] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)), + onCompositionend: _cache[6] || (_cache[6] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)), + onKeydown: [ + _cache[7] || (_cache[7] = vue.withKeys(vue.withModifiers(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"])), + _cache[8] || (_cache[8] = vue.withKeys(vue.withModifiers(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"])), + _cache[9] || (_cache[9] = vue.withKeys(vue.withModifiers((...args) => _ctx.onKeyboardSelect && _ctx.onKeyboardSelect(...args), ["stop", "prevent"]), ["enter"])), + _cache[10] || (_cache[10] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleEsc && _ctx.handleEsc(...args), ["stop", "prevent"]), ["esc"])), + _cache[11] || (_cache[11] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleDel && _ctx.handleDel(...args), ["stop"]), ["delete"])) + ] + }, null, 42, _hoisted_2$b), [ + [_directive_model_text, _ctx.states.displayInputValue] + ]), + _ctx.filterable ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + ref: "calculatorRef", + "aria-hidden": "true", + class: vue.normalizeClass(_ctx.nsSelectV2.e("input-calculator")), + textContent: vue.toDisplayString(_ctx.states.displayInputValue) + }, null, 10, _hoisted_3$5)) : vue.createCommentVNode("v-if", true) + ], 6) + ], 2)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass([ + _ctx.nsSelectV2.e("selected-item"), + _ctx.nsSelectV2.e("input-wrapper") + ]) + }, [ + vue.withDirectives(vue.createElementVNode("input", { + id: _ctx.id, + ref: "inputRef", + "aria-autocomplete": "list", + "aria-haspopup": "listbox", + "aria-labelledby": _ctx.label, + "aria-expanded": _ctx.expanded, + autocapitalize: "off", + autocomplete: _ctx.autocomplete, + class: vue.normalizeClass(_ctx.nsSelectV2.e("combobox-input")), + disabled: _ctx.disabled, + name: _ctx.name, + role: "combobox", + readonly: !_ctx.filterable, + spellcheck: "false", + type: "text", + unselectable: _ctx.expanded ? "on" : void 0, + onCompositionstart: _cache[12] || (_cache[12] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)), + onCompositionupdate: _cache[13] || (_cache[13] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)), + onCompositionend: _cache[14] || (_cache[14] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)), + onFocus: _cache[15] || (_cache[15] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)), + onBlur: _cache[16] || (_cache[16] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)), + onInput: _cache[17] || (_cache[17] = (...args) => _ctx.onInput && _ctx.onInput(...args)), + onKeydown: [ + _cache[18] || (_cache[18] = vue.withKeys(vue.withModifiers(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"])), + _cache[19] || (_cache[19] = vue.withKeys(vue.withModifiers(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"])), + _cache[20] || (_cache[20] = vue.withKeys(vue.withModifiers((...args) => _ctx.onKeyboardSelect && _ctx.onKeyboardSelect(...args), ["stop", "prevent"]), ["enter"])), + _cache[21] || (_cache[21] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleEsc && _ctx.handleEsc(...args), ["stop", "prevent"]), ["esc"])) + ], + "onUpdate:modelValue": _cache[22] || (_cache[22] = (...args) => _ctx.onUpdateInputValue && _ctx.onUpdateInputValue(...args)) + }, null, 42, _hoisted_4$3), [ + [_directive_model_text, _ctx.states.displayInputValue] + ]) + ], 2), + _ctx.filterable ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + ref: "calculatorRef", + "aria-hidden": "true", + class: vue.normalizeClass([ + _ctx.nsSelectV2.e("selected-item"), + _ctx.nsSelectV2.e("input-calculator") + ]), + textContent: vue.toDisplayString(_ctx.states.displayInputValue) + }, null, 10, _hoisted_5$2)) : vue.createCommentVNode("v-if", true) + ], 64)), + _ctx.shouldShowPlaceholder ? (vue.openBlock(), vue.createElementBlock("span", { + key: 3, + class: vue.normalizeClass([ + _ctx.nsSelectV2.e("placeholder"), + _ctx.nsSelectV2.is("transparent", _ctx.multiple ? _ctx.modelValue.length === 0 : !_ctx.hasModelValue) + ]) + }, vue.toDisplayString(_ctx.currentPlaceholder), 3)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.nsSelectV2.e("suffix")) + }, [ + _ctx.iconComponent ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 0, + class: vue.normalizeClass([_ctx.nsSelectV2.e("caret"), _ctx.nsInput.e("icon"), _ctx.iconReverse]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) + ]), + _: 1 + }, 8, ["class"])), [ + [vue.vShow, !_ctx.showClearBtn] + ]) : vue.createCommentVNode("v-if", true), + _ctx.showClearBtn && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 1, + class: vue.normalizeClass([_ctx.nsSelectV2.e("caret"), _ctx.nsInput.e("icon")]), + onClick: vue.withModifiers(_ctx.handleClear, ["prevent", "stop"]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon))) + ]), + _: 1 + }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true), + _ctx.validateState && _ctx.validateIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 2, + class: vue.normalizeClass([_ctx.nsInput.e("icon"), _ctx.nsInput.e("validateIcon")]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.validateIcon))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ], 2) + ], 2) + ]), + content: vue.withCtx(() => [ + vue.createVNode(_component_el_select_menu, { + ref: "menuRef", + data: _ctx.filteredOptions, + width: _ctx.popperSize, + "hovering-index": _ctx.states.hoveringIndex, + "scrollbar-always-on": _ctx.scrollbarAlwaysOn + }, { + default: vue.withCtx((scope) => [ + vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(scope))) + ]), + empty: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "empty", {}, () => [ + vue.createElementVNode("p", { + class: vue.normalizeClass(_ctx.nsSelectV2.e("empty")) + }, vue.toDisplayString(_ctx.emptyText ? _ctx.emptyText : ""), 3) + ]) + ]), + _: 3 + }, 8, ["data", "width", "hovering-index", "scrollbar-always-on"]) + ]), + _: 3 + }, 8, ["visible", "teleported", "popper-class", "popper-options", "effect", "placement", "transition", "persistent", "onBeforeShow"]) + ], 34)), [ + [_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef] + ]); + } + var Select = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$5], ["__file", "select.vue"]]); + + Select.install = (app) => { + app.component(Select.name, Select); + }; + const _Select = Select; + const ElSelectV2 = _Select; + + const skeletonProps = buildProps({ + animated: { + type: Boolean, + default: false + }, + count: { + type: Number, + default: 1 + }, + rows: { + type: Number, + default: 3 + }, + loading: { + type: Boolean, + default: true + }, + throttle: { + type: Number + } + }); + + const skeletonItemProps = buildProps({ + variant: { + type: String, + values: [ + "circle", + "rect", + "h1", + "h3", + "text", + "caption", + "p", + "image", + "button" + ], + default: "text" + } + }); + + const __default__$t = vue.defineComponent({ + name: "ElSkeletonItem" + }); + const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({ + ...__default__$t, + props: skeletonItemProps, + setup(__props) { + const ns = useNamespace("skeleton"); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([vue.unref(ns).e("item"), vue.unref(ns).e(_ctx.variant)]) + }, [ + _ctx.variant === "image" ? (vue.openBlock(), vue.createBlock(vue.unref(picture_filled_default), { key: 0 })) : vue.createCommentVNode("v-if", true) + ], 2); + }; + } + }); + var SkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__file", "skeleton-item.vue"]]); + + const __default__$s = vue.defineComponent({ + name: "ElSkeleton" + }); + const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({ + ...__default__$s, + props: skeletonProps, + setup(__props, { expose }) { + const props = __props; + const ns = useNamespace("skeleton"); + const uiLoading = useThrottleRender(vue.toRef(props, "loading"), props.throttle); + expose({ + uiLoading + }); + return (_ctx, _cache) => { + return vue.unref(uiLoading) ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ + key: 0, + class: [vue.unref(ns).b(), vue.unref(ns).is("animated", _ctx.animated)] + }, _ctx.$attrs), [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.count, (i) => { + return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: i }, [ + _ctx.loading ? vue.renderSlot(_ctx.$slots, "template", { key: i }, () => [ + vue.createVNode(SkeletonItem, { + class: vue.normalizeClass(vue.unref(ns).is("first")), + variant: "p" + }, null, 8, ["class"]), + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (item) => { + return vue.openBlock(), vue.createBlock(SkeletonItem, { + key: item, + class: vue.normalizeClass([ + vue.unref(ns).e("paragraph"), + vue.unref(ns).is("last", item === _ctx.rows && _ctx.rows > 1) + ]), + variant: "p" + }, null, 8, ["class"]); + }), 128)) + ]) : vue.createCommentVNode("v-if", true) + ], 64); + }), 128)) + ], 16)) : vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.$attrs))); + }; + } + }); + var Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__file", "skeleton.vue"]]); + + const ElSkeleton = withInstall(Skeleton, { + SkeletonItem + }); + const ElSkeletonItem = withNoopInstall(SkeletonItem); + + const sliderContextKey = Symbol("sliderContextKey"); + + const sliderProps = buildProps({ + modelValue: { + type: definePropType([Number, Array]), + default: 0 + }, + id: { + type: String, + default: void 0 + }, + min: { + type: Number, + default: 0 + }, + max: { + type: Number, + default: 100 + }, + step: { + type: Number, + default: 1 + }, + showInput: Boolean, + showInputControls: { + type: Boolean, + default: true + }, + size: useSizeProp, + inputSize: useSizeProp, + showStops: Boolean, + showTooltip: { + type: Boolean, + default: true + }, + formatTooltip: { + type: definePropType(Function), + default: void 0 + }, + disabled: Boolean, + range: Boolean, + vertical: Boolean, + height: String, + debounce: { + type: Number, + default: 300 + }, + label: { + type: String, + default: void 0 + }, + rangeStartLabel: { + type: String, + default: void 0 + }, + rangeEndLabel: { + type: String, + default: void 0 + }, + formatValueText: { + type: definePropType(Function), + default: void 0 + }, + tooltipClass: { + type: String, + default: void 0 + }, + placement: { + type: String, + values: Ee, + default: "top" + }, + marks: { + type: definePropType(Object) + }, + validateEvent: { + type: Boolean, + default: true + } + }); + const isValidValue$1 = (value) => isNumber$1(value) || isArray$1(value) && value.every(isNumber$1); + const sliderEmits = { + [UPDATE_MODEL_EVENT]: isValidValue$1, + [INPUT_EVENT]: isValidValue$1, + [CHANGE_EVENT]: isValidValue$1 + }; + + const useLifecycle = (props, initData, resetSize) => { + const sliderWrapper = vue.ref(); + vue.onMounted(async () => { + if (props.range) { + if (Array.isArray(props.modelValue)) { + initData.firstValue = Math.max(props.min, props.modelValue[0]); + initData.secondValue = Math.min(props.max, props.modelValue[1]); + } else { + initData.firstValue = props.min; + initData.secondValue = props.max; + } + initData.oldValue = [initData.firstValue, initData.secondValue]; + } else { + if (typeof props.modelValue !== "number" || Number.isNaN(props.modelValue)) { + initData.firstValue = props.min; + } else { + initData.firstValue = Math.min(props.max, Math.max(props.min, props.modelValue)); + } + initData.oldValue = initData.firstValue; + } + useEventListener(window, "resize", resetSize); + await vue.nextTick(); + resetSize(); + }); + return { + sliderWrapper + }; + }; + + const useMarks = (props) => { + return vue.computed(() => { + if (!props.marks) { + return []; + } + const marksKeys = Object.keys(props.marks); + return marksKeys.map(Number.parseFloat).sort((a, b) => a - b).filter((point) => point <= props.max && point >= props.min).map((point) => ({ + point, + position: (point - props.min) * 100 / (props.max - props.min), + mark: props.marks[point] + })); + }); + }; + + const useSlide = (props, initData, emit) => { + const { form: elForm, formItem: elFormItem } = useFormItem(); + const slider = vue.shallowRef(); + const firstButton = vue.ref(); + const secondButton = vue.ref(); + const buttonRefs = { + firstButton, + secondButton + }; + const sliderDisabled = vue.computed(() => { + return props.disabled || (elForm == null ? void 0 : elForm.disabled) || false; + }); + const minValue = vue.computed(() => { + return Math.min(initData.firstValue, initData.secondValue); + }); + const maxValue = vue.computed(() => { + return Math.max(initData.firstValue, initData.secondValue); + }); + const barSize = vue.computed(() => { + return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstValue - props.min) / (props.max - props.min)}%`; + }); + const barStart = vue.computed(() => { + return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%"; + }); + const runwayStyle = vue.computed(() => { + return props.vertical ? { height: props.height } : {}; + }); + const barStyle = vue.computed(() => { + return props.vertical ? { + height: barSize.value, + bottom: barStart.value + } : { + width: barSize.value, + left: barStart.value + }; + }); + const resetSize = () => { + if (slider.value) { + initData.sliderSize = slider.value[`client${props.vertical ? "Height" : "Width"}`]; + } + }; + const getButtonRefByPercent = (percent) => { + const targetValue = props.min + percent * (props.max - props.min) / 100; + if (!props.range) { + return firstButton; + } + let buttonRefName; + if (Math.abs(minValue.value - targetValue) < Math.abs(maxValue.value - targetValue)) { + buttonRefName = initData.firstValue < initData.secondValue ? "firstButton" : "secondButton"; + } else { + buttonRefName = initData.firstValue > initData.secondValue ? "firstButton" : "secondButton"; + } + return buttonRefs[buttonRefName]; + }; + const setPosition = (percent) => { + const buttonRef = getButtonRefByPercent(percent); + buttonRef.value.setPosition(percent); + return buttonRef; + }; + const setFirstValue = (firstValue) => { + initData.firstValue = firstValue; + _emit(props.range ? [minValue.value, maxValue.value] : firstValue); + }; + const setSecondValue = (secondValue) => { + initData.secondValue = secondValue; + if (props.range) { + _emit([minValue.value, maxValue.value]); + } + }; + const _emit = (val) => { + emit(UPDATE_MODEL_EVENT, val); + emit(INPUT_EVENT, val); + }; + const emitChange = async () => { + await vue.nextTick(); + emit(CHANGE_EVENT, props.range ? [minValue.value, maxValue.value] : props.modelValue); + }; + const handleSliderPointerEvent = (event) => { + var _a, _b, _c, _d, _e, _f; + if (sliderDisabled.value || initData.dragging) + return; + resetSize(); + let newPercent = 0; + if (props.vertical) { + const clientY = (_c = (_b = (_a = event.touches) == null ? void 0 : _a.item(0)) == null ? void 0 : _b.clientY) != null ? _c : event.clientY; + const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom; + newPercent = (sliderOffsetBottom - clientY) / initData.sliderSize * 100; + } else { + const clientX = (_f = (_e = (_d = event.touches) == null ? void 0 : _d.item(0)) == null ? void 0 : _e.clientX) != null ? _f : event.clientX; + const sliderOffsetLeft = slider.value.getBoundingClientRect().left; + newPercent = (clientX - sliderOffsetLeft) / initData.sliderSize * 100; + } + if (newPercent < 0 || newPercent > 100) + return; + return setPosition(newPercent); + }; + const onSliderWrapperPrevent = (event) => { + var _a, _b; + if (((_a = buttonRefs["firstButton"].value) == null ? void 0 : _a.dragging) || ((_b = buttonRefs["secondButton"].value) == null ? void 0 : _b.dragging)) { + event.preventDefault(); + } + }; + const onSliderDown = async (event) => { + const buttonRef = handleSliderPointerEvent(event); + if (buttonRef) { + await vue.nextTick(); + buttonRef.value.onButtonDown(event); + } + }; + const onSliderClick = (event) => { + const buttonRef = handleSliderPointerEvent(event); + if (buttonRef) { + emitChange(); + } + }; + return { + elFormItem, + slider, + firstButton, + secondButton, + sliderDisabled, + minValue, + maxValue, + runwayStyle, + barStyle, + resetSize, + setPosition, + emitChange, + onSliderWrapperPrevent, + onSliderClick, + onSliderDown, + setFirstValue, + setSecondValue + }; + }; + + const { left, down, right, up, home, end, pageUp, pageDown } = EVENT_CODE; + const useTooltip = (props, formatTooltip, showTooltip) => { + const tooltip = vue.ref(); + const tooltipVisible = vue.ref(false); + const enableFormat = vue.computed(() => { + return formatTooltip.value instanceof Function; + }); + const formatValue = vue.computed(() => { + return enableFormat.value && formatTooltip.value(props.modelValue) || props.modelValue; + }); + const displayTooltip = debounce(() => { + showTooltip.value && (tooltipVisible.value = true); + }, 50); + const hideTooltip = debounce(() => { + showTooltip.value && (tooltipVisible.value = false); + }, 50); + return { + tooltip, + tooltipVisible, + formatValue, + displayTooltip, + hideTooltip + }; + }; + const useSliderButton = (props, initData, emit) => { + const { + disabled, + min, + max, + step, + showTooltip, + precision, + sliderSize, + formatTooltip, + emitChange, + resetSize, + updateDragging + } = vue.inject(sliderContextKey); + const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip); + const button = vue.ref(); + const currentPosition = vue.computed(() => { + return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`; + }); + const wrapperStyle = vue.computed(() => { + return props.vertical ? { bottom: currentPosition.value } : { left: currentPosition.value }; + }); + const handleMouseEnter = () => { + initData.hovering = true; + displayTooltip(); + }; + const handleMouseLeave = () => { + initData.hovering = false; + if (!initData.dragging) { + hideTooltip(); + } + }; + const onButtonDown = (event) => { + if (disabled.value) + return; + event.preventDefault(); + onDragStart(event); + window.addEventListener("mousemove", onDragging); + window.addEventListener("touchmove", onDragging); + window.addEventListener("mouseup", onDragEnd); + window.addEventListener("touchend", onDragEnd); + window.addEventListener("contextmenu", onDragEnd); + button.value.focus(); + }; + const incrementPosition = (amount) => { + if (disabled.value) + return; + initData.newPosition = Number.parseFloat(currentPosition.value) + amount / (max.value - min.value) * 100; + setPosition(initData.newPosition); + emitChange(); + }; + const onLeftKeyDown = () => { + incrementPosition(-step.value); + }; + const onRightKeyDown = () => { + incrementPosition(step.value); + }; + const onPageDownKeyDown = () => { + incrementPosition(-step.value * 4); + }; + const onPageUpKeyDown = () => { + incrementPosition(step.value * 4); + }; + const onHomeKeyDown = () => { + if (disabled.value) + return; + setPosition(0); + emitChange(); + }; + const onEndKeyDown = () => { + if (disabled.value) + return; + setPosition(100); + emitChange(); + }; + const onKeyDown = (event) => { + let isPreventDefault = true; + if ([left, down].includes(event.key)) { + onLeftKeyDown(); + } else if ([right, up].includes(event.key)) { + onRightKeyDown(); + } else if (event.key === home) { + onHomeKeyDown(); + } else if (event.key === end) { + onEndKeyDown(); + } else if (event.key === pageDown) { + onPageDownKeyDown(); + } else if (event.key === pageUp) { + onPageUpKeyDown(); + } else { + isPreventDefault = false; + } + isPreventDefault && event.preventDefault(); + }; + const getClientXY = (event) => { + let clientX; + let clientY; + if (event.type.startsWith("touch")) { + clientY = event.touches[0].clientY; + clientX = event.touches[0].clientX; + } else { + clientY = event.clientY; + clientX = event.clientX; + } + return { + clientX, + clientY + }; + }; + const onDragStart = (event) => { + initData.dragging = true; + initData.isClick = true; + const { clientX, clientY } = getClientXY(event); + if (props.vertical) { + initData.startY = clientY; + } else { + initData.startX = clientX; + } + initData.startPosition = Number.parseFloat(currentPosition.value); + initData.newPosition = initData.startPosition; + }; + const onDragging = (event) => { + if (initData.dragging) { + initData.isClick = false; + displayTooltip(); + resetSize(); + let diff; + const { clientX, clientY } = getClientXY(event); + if (props.vertical) { + initData.currentY = clientY; + diff = (initData.startY - initData.currentY) / sliderSize.value * 100; + } else { + initData.currentX = clientX; + diff = (initData.currentX - initData.startX) / sliderSize.value * 100; + } + initData.newPosition = initData.startPosition + diff; + setPosition(initData.newPosition); + } + }; + const onDragEnd = () => { + if (initData.dragging) { + setTimeout(() => { + initData.dragging = false; + if (!initData.hovering) { + hideTooltip(); + } + if (!initData.isClick) { + setPosition(initData.newPosition); + } + emitChange(); + }, 0); + window.removeEventListener("mousemove", onDragging); + window.removeEventListener("touchmove", onDragging); + window.removeEventListener("mouseup", onDragEnd); + window.removeEventListener("touchend", onDragEnd); + window.removeEventListener("contextmenu", onDragEnd); + } + }; + const setPosition = async (newPosition) => { + if (newPosition === null || Number.isNaN(+newPosition)) + return; + if (newPosition < 0) { + newPosition = 0; + } else if (newPosition > 100) { + newPosition = 100; + } + const lengthPerStep = 100 / ((max.value - min.value) / step.value); + const steps = Math.round(newPosition / lengthPerStep); + let value = steps * lengthPerStep * (max.value - min.value) * 0.01 + min.value; + value = Number.parseFloat(value.toFixed(precision.value)); + if (value !== props.modelValue) { + emit(UPDATE_MODEL_EVENT, value); + } + if (!initData.dragging && props.modelValue !== initData.oldValue) { + initData.oldValue = props.modelValue; + } + await vue.nextTick(); + initData.dragging && displayTooltip(); + tooltip.value.updatePopper(); + }; + vue.watch(() => initData.dragging, (val) => { + updateDragging(val); + }); + return { + disabled, + button, + tooltip, + tooltipVisible, + showTooltip, + wrapperStyle, + formatValue, + handleMouseEnter, + handleMouseLeave, + onButtonDown, + onKeyDown, + setPosition + }; + }; + + const useStops = (props, initData, minValue, maxValue) => { + const stops = vue.computed(() => { + if (!props.showStops || props.min > props.max) + return []; + if (props.step === 0) { + return []; + } + const stopCount = (props.max - props.min) / props.step; + const stepWidth = 100 * props.step / (props.max - props.min); + const result = Array.from({ length: stopCount - 1 }).map((_, index) => (index + 1) * stepWidth); + if (props.range) { + return result.filter((step) => { + return step < 100 * (minValue.value - props.min) / (props.max - props.min) || step > 100 * (maxValue.value - props.min) / (props.max - props.min); + }); + } else { + return result.filter((step) => step > 100 * (initData.firstValue - props.min) / (props.max - props.min)); + } + }); + const getStopStyle = (position) => { + return props.vertical ? { bottom: `${position}%` } : { left: `${position}%` }; + }; + return { + stops, + getStopStyle + }; + }; + + const useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => { + const _emit = (val) => { + emit(UPDATE_MODEL_EVENT, val); + emit(INPUT_EVENT, val); + }; + const valueChanged = () => { + if (props.range) { + return ![minValue.value, maxValue.value].every((item, index) => item === initData.oldValue[index]); + } else { + return props.modelValue !== initData.oldValue; + } + }; + const setValues = () => { + var _a, _b; + if (props.min > props.max) { + throwError("Slider", "min should not be greater than max."); + } + const val = props.modelValue; + if (props.range && Array.isArray(val)) { + if (val[1] < props.min) { + _emit([props.min, props.min]); + } else if (val[0] > props.max) { + _emit([props.max, props.max]); + } else if (val[0] < props.min) { + _emit([props.min, val[1]]); + } else if (val[1] > props.max) { + _emit([val[0], props.max]); + } else { + initData.firstValue = val[0]; + initData.secondValue = val[1]; + if (valueChanged()) { + if (props.validateEvent) { + (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn()); + } + initData.oldValue = val.slice(); + } + } + } else if (!props.range && typeof val === "number" && !Number.isNaN(val)) { + if (val < props.min) { + _emit(props.min); + } else if (val > props.max) { + _emit(props.max); + } else { + initData.firstValue = val; + if (valueChanged()) { + if (props.validateEvent) { + (_b = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _b.call(elFormItem, "change").catch((err) => debugWarn()); + } + initData.oldValue = val; + } + } + } + }; + setValues(); + vue.watch(() => initData.dragging, (val) => { + if (!val) { + setValues(); + } + }); + vue.watch(() => props.modelValue, (val, oldVal) => { + if (initData.dragging || Array.isArray(val) && Array.isArray(oldVal) && val.every((item, index) => item === oldVal[index]) && initData.firstValue === val[0] && initData.secondValue === val[1]) { + return; + } + setValues(); + }, { + deep: true + }); + vue.watch(() => [props.min, props.max], () => { + setValues(); + }); + }; + + const sliderButtonProps = buildProps({ + modelValue: { + type: Number, + default: 0 + }, + vertical: Boolean, + tooltipClass: String, + placement: { + type: String, + values: Ee, + default: "top" + } + }); + const sliderButtonEmits = { + [UPDATE_MODEL_EVENT]: (value) => isNumber$1(value) + }; + + const _hoisted_1$f = ["tabindex"]; + const __default__$r = vue.defineComponent({ + name: "ElSliderButton" + }); + const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({ + ...__default__$r, + props: sliderButtonProps, + emits: sliderButtonEmits, + setup(__props, { expose, emit }) { + const props = __props; + const ns = useNamespace("slider"); + const initData = vue.reactive({ + hovering: false, + dragging: false, + isClick: false, + startX: 0, + currentX: 0, + startY: 0, + currentY: 0, + startPosition: 0, + newPosition: 0, + oldValue: props.modelValue + }); + const { + disabled, + button, + tooltip, + showTooltip, + tooltipVisible, + wrapperStyle, + formatValue, + handleMouseEnter, + handleMouseLeave, + onButtonDown, + onKeyDown, + setPosition + } = useSliderButton(props, initData, emit); + const { hovering, dragging } = vue.toRefs(initData); + expose({ + onButtonDown, + onKeyDown, + setPosition, + hovering, + dragging + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + ref_key: "button", + ref: button, + class: vue.normalizeClass([vue.unref(ns).e("button-wrapper"), { hover: vue.unref(hovering), dragging: vue.unref(dragging) }]), + style: vue.normalizeStyle(vue.unref(wrapperStyle)), + tabindex: vue.unref(disabled) ? -1 : 0, + onMouseenter: _cache[0] || (_cache[0] = (...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args)), + onMouseleave: _cache[1] || (_cache[1] = (...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args)), + onMousedown: _cache[2] || (_cache[2] = (...args) => vue.unref(onButtonDown) && vue.unref(onButtonDown)(...args)), + onTouchstart: _cache[3] || (_cache[3] = (...args) => vue.unref(onButtonDown) && vue.unref(onButtonDown)(...args)), + onFocus: _cache[4] || (_cache[4] = (...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args)), + onBlur: _cache[5] || (_cache[5] = (...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args)), + onKeydown: _cache[6] || (_cache[6] = (...args) => vue.unref(onKeyDown) && vue.unref(onKeyDown)(...args)) + }, [ + vue.createVNode(vue.unref(ElTooltip), { + ref_key: "tooltip", + ref: tooltip, + visible: vue.unref(tooltipVisible), + placement: _ctx.placement, + "fallback-placements": ["top", "bottom", "right", "left"], + "stop-popper-mouse-event": false, + "popper-class": _ctx.tooltipClass, + disabled: !vue.unref(showTooltip), + persistent: "" + }, { + content: vue.withCtx(() => [ + vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)), 1) + ]), + default: vue.withCtx(() => [ + vue.createElementVNode("div", { + class: vue.normalizeClass([vue.unref(ns).e("button"), { hover: vue.unref(hovering), dragging: vue.unref(dragging) }]) + }, null, 2) + ]), + _: 1 + }, 8, ["visible", "placement", "popper-class", "disabled"]) + ], 46, _hoisted_1$f); + }; + } + }); + var SliderButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__file", "button.vue"]]); + + const sliderMarkerProps = buildProps({ + mark: { + type: definePropType([String, Object]), + default: void 0 + } + }); + var SliderMarker = vue.defineComponent({ + name: "ElSliderMarker", + props: sliderMarkerProps, + setup(props) { + const ns = useNamespace("slider"); + const label = vue.computed(() => { + return isString$1(props.mark) ? props.mark : props.mark.label; + }); + const style = vue.computed(() => isString$1(props.mark) ? void 0 : props.mark.style); + return () => vue.h("div", { + class: ns.e("marks-text"), + style: style.value + }, label.value); + } + }); + + const _hoisted_1$e = ["id", "role", "aria-label", "aria-labelledby"]; + const _hoisted_2$a = { key: 1 }; + const __default__$q = vue.defineComponent({ + name: "ElSlider" + }); + const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({ + ...__default__$q, + props: sliderProps, + emits: sliderEmits, + setup(__props, { expose, emit }) { + const props = __props; + const ns = useNamespace("slider"); + const { t } = useLocale(); + const initData = vue.reactive({ + firstValue: 0, + secondValue: 0, + oldValue: 0, + dragging: false, + sliderSize: 1 + }); + const { + elFormItem, + slider, + firstButton, + secondButton, + sliderDisabled, + minValue, + maxValue, + runwayStyle, + barStyle, + resetSize, + emitChange, + onSliderWrapperPrevent, + onSliderClick, + onSliderDown, + setFirstValue, + setSecondValue + } = useSlide(props, initData, emit); + const { stops, getStopStyle } = useStops(props, initData, minValue, maxValue); + const { inputId, isLabeledByFormItem } = useFormItemInputId(props, { + formItemContext: elFormItem + }); + const sliderWrapperSize = useFormSize(); + const sliderInputSize = vue.computed(() => props.inputSize || sliderWrapperSize.value); + const groupLabel = vue.computed(() => { + return props.label || t("el.slider.defaultLabel", { + min: props.min, + max: props.max + }); + }); + const firstButtonLabel = vue.computed(() => { + if (props.range) { + return props.rangeStartLabel || t("el.slider.defaultRangeStartLabel"); + } else { + return groupLabel.value; + } + }); + const firstValueText = vue.computed(() => { + return props.formatValueText ? props.formatValueText(firstValue.value) : `${firstValue.value}`; + }); + const secondButtonLabel = vue.computed(() => { + return props.rangeEndLabel || t("el.slider.defaultRangeEndLabel"); + }); + const secondValueText = vue.computed(() => { + return props.formatValueText ? props.formatValueText(secondValue.value) : `${secondValue.value}`; + }); + const sliderKls = vue.computed(() => [ + ns.b(), + ns.m(sliderWrapperSize.value), + ns.is("vertical", props.vertical), + { [ns.m("with-input")]: props.showInput } + ]); + const markList = useMarks(props); + useWatch(props, initData, minValue, maxValue, emit, elFormItem); + const precision = vue.computed(() => { + const precisions = [props.min, props.max, props.step].map((item) => { + const decimal = `${item}`.split(".")[1]; + return decimal ? decimal.length : 0; + }); + return Math.max.apply(null, precisions); + }); + const { sliderWrapper } = useLifecycle(props, initData, resetSize); + const { firstValue, secondValue, sliderSize } = vue.toRefs(initData); + const updateDragging = (val) => { + initData.dragging = val; + }; + vue.provide(sliderContextKey, { + ...vue.toRefs(props), + sliderSize, + disabled: sliderDisabled, + precision, + emitChange, + resetSize, + updateDragging + }); + expose({ + onSliderClick + }); + return (_ctx, _cache) => { + var _a, _b; + return vue.openBlock(), vue.createElementBlock("div", { + id: _ctx.range ? vue.unref(inputId) : void 0, + ref_key: "sliderWrapper", + ref: sliderWrapper, + class: vue.normalizeClass(vue.unref(sliderKls)), + role: _ctx.range ? "group" : void 0, + "aria-label": _ctx.range && !vue.unref(isLabeledByFormItem) ? vue.unref(groupLabel) : void 0, + "aria-labelledby": _ctx.range && vue.unref(isLabeledByFormItem) ? (_a = vue.unref(elFormItem)) == null ? void 0 : _a.labelId : void 0, + onTouchstart: _cache[2] || (_cache[2] = (...args) => vue.unref(onSliderWrapperPrevent) && vue.unref(onSliderWrapperPrevent)(...args)), + onTouchmove: _cache[3] || (_cache[3] = (...args) => vue.unref(onSliderWrapperPrevent) && vue.unref(onSliderWrapperPrevent)(...args)) + }, [ + vue.createElementVNode("div", { + ref_key: "slider", + ref: slider, + class: vue.normalizeClass([ + vue.unref(ns).e("runway"), + { "show-input": _ctx.showInput && !_ctx.range }, + vue.unref(ns).is("disabled", vue.unref(sliderDisabled)) + ]), + style: vue.normalizeStyle(vue.unref(runwayStyle)), + onMousedown: _cache[0] || (_cache[0] = (...args) => vue.unref(onSliderDown) && vue.unref(onSliderDown)(...args)), + onTouchstart: _cache[1] || (_cache[1] = (...args) => vue.unref(onSliderDown) && vue.unref(onSliderDown)(...args)) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("bar")), + style: vue.normalizeStyle(vue.unref(barStyle)) + }, null, 6), + vue.createVNode(SliderButton, { + id: !_ctx.range ? vue.unref(inputId) : void 0, + ref_key: "firstButton", + ref: firstButton, + "model-value": vue.unref(firstValue), + vertical: _ctx.vertical, + "tooltip-class": _ctx.tooltipClass, + placement: _ctx.placement, + role: "slider", + "aria-label": _ctx.range || !vue.unref(isLabeledByFormItem) ? vue.unref(firstButtonLabel) : void 0, + "aria-labelledby": !_ctx.range && vue.unref(isLabeledByFormItem) ? (_b = vue.unref(elFormItem)) == null ? void 0 : _b.labelId : void 0, + "aria-valuemin": _ctx.min, + "aria-valuemax": _ctx.range ? vue.unref(secondValue) : _ctx.max, + "aria-valuenow": vue.unref(firstValue), + "aria-valuetext": vue.unref(firstValueText), + "aria-orientation": _ctx.vertical ? "vertical" : "horizontal", + "aria-disabled": vue.unref(sliderDisabled), + "onUpdate:modelValue": vue.unref(setFirstValue) + }, null, 8, ["id", "model-value", "vertical", "tooltip-class", "placement", "aria-label", "aria-labelledby", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "onUpdate:modelValue"]), + _ctx.range ? (vue.openBlock(), vue.createBlock(SliderButton, { + key: 0, + ref_key: "secondButton", + ref: secondButton, + "model-value": vue.unref(secondValue), + vertical: _ctx.vertical, + "tooltip-class": _ctx.tooltipClass, + placement: _ctx.placement, + role: "slider", + "aria-label": vue.unref(secondButtonLabel), + "aria-valuemin": vue.unref(firstValue), + "aria-valuemax": _ctx.max, + "aria-valuenow": vue.unref(secondValue), + "aria-valuetext": vue.unref(secondValueText), + "aria-orientation": _ctx.vertical ? "vertical" : "horizontal", + "aria-disabled": vue.unref(sliderDisabled), + "onUpdate:modelValue": vue.unref(setSecondValue) + }, null, 8, ["model-value", "vertical", "tooltip-class", "placement", "aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "onUpdate:modelValue"])) : vue.createCommentVNode("v-if", true), + _ctx.showStops ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(stops), (item, key) => { + return vue.openBlock(), vue.createElementBlock("div", { + key, + class: vue.normalizeClass(vue.unref(ns).e("stop")), + style: vue.normalizeStyle(vue.unref(getStopStyle)(item)) + }, null, 6); + }), 128)) + ])) : vue.createCommentVNode("v-if", true), + vue.unref(markList).length > 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [ + vue.createElementVNode("div", null, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(markList), (item, key) => { + return vue.openBlock(), vue.createElementBlock("div", { + key, + style: vue.normalizeStyle(vue.unref(getStopStyle)(item.position)), + class: vue.normalizeClass([vue.unref(ns).e("stop"), vue.unref(ns).e("marks-stop")]) + }, null, 6); + }), 128)) + ]), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("marks")) + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(markList), (item, key) => { + return vue.openBlock(), vue.createBlock(vue.unref(SliderMarker), { + key, + mark: item.mark, + style: vue.normalizeStyle(vue.unref(getStopStyle)(item.position)) + }, null, 8, ["mark", "style"]); + }), 128)) + ], 2) + ], 64)) : vue.createCommentVNode("v-if", true) + ], 38), + _ctx.showInput && !_ctx.range ? (vue.openBlock(), vue.createBlock(vue.unref(ElInputNumber), { + key: 0, + ref: "input", + "model-value": vue.unref(firstValue), + class: vue.normalizeClass(vue.unref(ns).e("input")), + step: _ctx.step, + disabled: vue.unref(sliderDisabled), + controls: _ctx.showInputControls, + min: _ctx.min, + max: _ctx.max, + debounce: _ctx.debounce, + size: vue.unref(sliderInputSize), + "onUpdate:modelValue": vue.unref(setFirstValue), + onChange: vue.unref(emitChange) + }, null, 8, ["model-value", "class", "step", "disabled", "controls", "min", "max", "debounce", "size", "onUpdate:modelValue", "onChange"])) : vue.createCommentVNode("v-if", true) + ], 42, _hoisted_1$e); + }; + } + }); + var Slider = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__file", "slider.vue"]]); + + const ElSlider = withInstall(Slider); + + const spaceItemProps = buildProps({ + prefixCls: { + type: String + } + }); + const SpaceItem = vue.defineComponent({ + name: "ElSpaceItem", + props: spaceItemProps, + setup(props, { slots }) { + const ns = useNamespace("space"); + const classes = vue.computed(() => `${props.prefixCls || ns.b()}__item`); + return () => vue.h("div", { class: classes.value }, vue.renderSlot(slots, "default")); + } + }); + var Item = SpaceItem; + + const SIZE_MAP = { + small: 8, + default: 12, + large: 16 + }; + function useSpace(props) { + const ns = useNamespace("space"); + const classes = vue.computed(() => [ns.b(), ns.m(props.direction), props.class]); + const horizontalSize = vue.ref(0); + const verticalSize = vue.ref(0); + const containerStyle = vue.computed(() => { + const wrapKls = props.wrap || props.fill ? { flexWrap: "wrap", marginBottom: `-${verticalSize.value}px` } : {}; + const alignment = { + alignItems: props.alignment + }; + return [wrapKls, alignment, props.style]; + }); + const itemStyle = vue.computed(() => { + const itemBaseStyle = { + paddingBottom: `${verticalSize.value}px`, + marginRight: `${horizontalSize.value}px` + }; + const fillStyle = props.fill ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } : {}; + return [itemBaseStyle, fillStyle]; + }); + vue.watchEffect(() => { + const { size = "small", wrap, direction: dir, fill } = props; + if (isArray$1(size)) { + const [h = 0, v = 0] = size; + horizontalSize.value = h; + verticalSize.value = v; + } else { + let val; + if (isNumber$1(size)) { + val = size; + } else { + val = SIZE_MAP[size || "small"] || SIZE_MAP.small; + } + if ((wrap || fill) && dir === "horizontal") { + horizontalSize.value = verticalSize.value = val; + } else { + if (dir === "horizontal") { + horizontalSize.value = val; + verticalSize.value = 0; + } else { + verticalSize.value = val; + horizontalSize.value = 0; + } + } + } + }); + return { + classes, + containerStyle, + itemStyle + }; + } + + const spaceProps = buildProps({ + direction: { + type: String, + values: ["horizontal", "vertical"], + default: "horizontal" + }, + class: { + type: definePropType([ + String, + Object, + Array + ]), + default: "" + }, + style: { + type: definePropType([String, Array, Object]), + default: "" + }, + alignment: { + type: definePropType(String), + default: "center" + }, + prefixCls: { + type: String + }, + spacer: { + type: definePropType([Object, String, Number, Array]), + default: null, + validator: (val) => vue.isVNode(val) || isNumber$1(val) || isString$1(val) + }, + wrap: Boolean, + fill: Boolean, + fillRatio: { + type: Number, + default: 100 + }, + size: { + type: [String, Array, Number], + values: componentSizes, + validator: (val) => { + return isNumber$1(val) || isArray$1(val) && val.length === 2 && val.every(isNumber$1); + } + } + }); + const Space = vue.defineComponent({ + name: "ElSpace", + props: spaceProps, + setup(props, { slots }) { + const { classes, containerStyle, itemStyle } = useSpace(props); + function extractChildren(children, parentKey = "", extractedChildren = []) { + const { prefixCls } = props; + children.forEach((child, loopKey) => { + if (isFragment(child)) { + if (isArray$1(child.children)) { + child.children.forEach((nested, key) => { + if (isFragment(nested) && isArray$1(nested.children)) { + extractChildren(nested.children, `${parentKey + key}-`, extractedChildren); + } else { + extractedChildren.push(vue.createVNode(Item, { + style: itemStyle.value, + prefixCls, + key: `nested-${parentKey + key}` + }, { + default: () => [nested] + }, PatchFlags.PROPS | PatchFlags.STYLE, ["style", "prefixCls"])); + } + }); + } + } else if (isValidElementNode(child)) { + extractedChildren.push(vue.createVNode(Item, { + style: itemStyle.value, + prefixCls, + key: `LoopKey${parentKey + loopKey}` + }, { + default: () => [child] + }, PatchFlags.PROPS | PatchFlags.STYLE, ["style", "prefixCls"])); + } + }); + return extractedChildren; + } + return () => { + var _a; + const { spacer, direction } = props; + const children = vue.renderSlot(slots, "default", { key: 0 }, () => []); + if (((_a = children.children) != null ? _a : []).length === 0) + return null; + if (isArray$1(children.children)) { + let extractedChildren = extractChildren(children.children); + if (spacer) { + const len = extractedChildren.length - 1; + extractedChildren = extractedChildren.reduce((acc, child, idx) => { + const children2 = [...acc, child]; + if (idx !== len) { + children2.push(vue.createVNode("span", { + style: [ + itemStyle.value, + direction === "vertical" ? "width: 100%" : null + ], + key: idx + }, [ + vue.isVNode(spacer) ? spacer : vue.createTextVNode(spacer, PatchFlags.TEXT) + ], PatchFlags.STYLE)); + } + return children2; + }, []); + } + return vue.createVNode("div", { + class: classes.value, + style: containerStyle.value + }, extractedChildren, PatchFlags.STYLE | PatchFlags.CLASS); + } + return children.children; + }; + } + }); + + const ElSpace = withInstall(Space); + + const statisticProps = buildProps({ + decimalSeparator: { + type: String, + default: "." + }, + groupSeparator: { + type: String, + default: "," + }, + precision: { + type: Number, + default: 0 + }, + formatter: Function, + value: { + type: definePropType([Number, Object]), + default: 0 + }, + prefix: String, + suffix: String, + title: String, + valueStyle: { + type: definePropType([String, Object, Array]) + } + }); + + const __default__$p = vue.defineComponent({ + name: "ElStatistic" + }); + const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({ + ...__default__$p, + props: statisticProps, + setup(__props, { expose }) { + const props = __props; + const ns = useNamespace("statistic"); + const displayValue = vue.computed(() => { + const { value, formatter, precision, decimalSeparator, groupSeparator } = props; + if (isFunction$1(formatter)) + return formatter(value); + if (!isNumber$1(value)) + return value; + let [integer, decimal = ""] = String(value).split("."); + decimal = decimal.padEnd(precision, "0").slice(0, precision > 0 ? precision : 0); + integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator); + return [integer, decimal].join(decimal ? decimalSeparator : ""); + }); + expose({ + displayValue + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(ns).b()) + }, [ + _ctx.$slots.title || _ctx.title ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("head")) + }, [ + vue.renderSlot(_ctx.$slots, "title", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.title), 1) + ]) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("content")) + }, [ + _ctx.$slots.prefix || _ctx.prefix ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("prefix")) + }, [ + vue.renderSlot(_ctx.$slots, "prefix", {}, () => [ + vue.createElementVNode("span", null, vue.toDisplayString(_ctx.prefix), 1) + ]) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(ns).e("number")), + style: vue.normalizeStyle(_ctx.valueStyle) + }, vue.toDisplayString(vue.unref(displayValue)), 7), + _ctx.$slots.suffix || _ctx.suffix ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("suffix")) + }, [ + vue.renderSlot(_ctx.$slots, "suffix", {}, () => [ + vue.createElementVNode("span", null, vue.toDisplayString(_ctx.suffix), 1) + ]) + ], 2)) : vue.createCommentVNode("v-if", true) + ], 2) + ], 2); + }; + } + }); + var Statistic = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__file", "statistic.vue"]]); + + const ElStatistic = withInstall(Statistic); + + const countdownProps = buildProps({ + format: { + type: String, + default: "HH:mm:ss" + }, + prefix: String, + suffix: String, + title: String, + value: { + type: definePropType([Number, Object]), + default: 0 + }, + valueStyle: { + type: definePropType([String, Object, Array]) + } + }); + const countdownEmits = { + finish: () => true, + [CHANGE_EVENT]: (value) => isNumber$1(value) + }; + + const timeUnits = [ + ["Y", 1e3 * 60 * 60 * 24 * 365], + ["M", 1e3 * 60 * 60 * 24 * 30], + ["D", 1e3 * 60 * 60 * 24], + ["H", 1e3 * 60 * 60], + ["m", 1e3 * 60], + ["s", 1e3], + ["S", 1] + ]; + const getTime = (value) => { + return isNumber$1(value) ? new Date(value).getTime() : value.valueOf(); + }; + const formatTime$1 = (timestamp, format) => { + let timeLeft = timestamp; + const escapeRegex = /\[([^\]]*)]/g; + const replacedText = timeUnits.reduce((current, [name, unit]) => { + const replaceRegex = new RegExp(`${name}+(?![^\\[\\]]*\\])`, "g"); + if (replaceRegex.test(current)) { + const value = Math.floor(timeLeft / unit); + timeLeft -= value * unit; + return current.replace(replaceRegex, (match) => String(value).padStart(match.length, "0")); + } + return current; + }, format); + return replacedText.replace(escapeRegex, "$1"); + }; + + const __default__$o = vue.defineComponent({ + name: "ElCountdown" + }); + const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({ + ...__default__$o, + props: countdownProps, + emits: countdownEmits, + setup(__props, { expose, emit }) { + const props = __props; + let timer; + const rawValue = vue.ref(getTime(props.value) - Date.now()); + const displayValue = vue.computed(() => formatTime$1(rawValue.value, props.format)); + const formatter = (val) => formatTime$1(val, props.format); + const stopTimer = () => { + if (timer) { + cAF(timer); + timer = void 0; + } + }; + const startTimer = () => { + const timestamp = getTime(props.value); + const frameFunc = () => { + let diff = timestamp - Date.now(); + emit("change", diff); + if (diff <= 0) { + diff = 0; + stopTimer(); + emit("finish"); + } else { + timer = rAF(frameFunc); + } + rawValue.value = diff; + }; + timer = rAF(frameFunc); + }; + vue.watch(() => [props.value, props.format], () => { + stopTimer(); + startTimer(); + }, { + immediate: true + }); + vue.onBeforeUnmount(() => { + stopTimer(); + }); + expose({ + displayValue + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElStatistic), { + value: rawValue.value, + title: _ctx.title, + prefix: _ctx.prefix, + suffix: _ctx.suffix, + "value-style": _ctx.valueStyle, + formatter + }, vue.createSlots({ _: 2 }, [ + vue.renderList(_ctx.$slots, (_, name) => { + return { + name, + fn: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, name) + ]) + }; + }) + ]), 1032, ["value", "title", "prefix", "suffix", "value-style"]); + }; + } + }); + var Countdown = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__file", "countdown.vue"]]); + + const ElCountdown = withInstall(Countdown); + + const stepsProps = buildProps({ + space: { + type: [Number, String], + default: "" + }, + active: { + type: Number, + default: 0 + }, + direction: { + type: String, + default: "horizontal", + values: ["horizontal", "vertical"] + }, + alignCenter: { + type: Boolean + }, + simple: { + type: Boolean + }, + finishStatus: { + type: String, + values: ["wait", "process", "finish", "error", "success"], + default: "finish" + }, + processStatus: { + type: String, + values: ["wait", "process", "finish", "error", "success"], + default: "process" + } + }); + const stepsEmits = { + [CHANGE_EVENT]: (newVal, oldVal) => [newVal, oldVal].every(isNumber$1) + }; + + const __default__$n = vue.defineComponent({ + name: "ElSteps" + }); + const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({ + ...__default__$n, + props: stepsProps, + emits: stepsEmits, + setup(__props, { emit }) { + const props = __props; + const ns = useNamespace("steps"); + const steps = vue.ref([]); + vue.watch(steps, () => { + steps.value.forEach((instance, index) => { + instance.setIndex(index); + }); + }); + vue.provide("ElSteps", { props, steps }); + vue.watch(() => props.active, (newVal, oldVal) => { + emit(CHANGE_EVENT, newVal, oldVal); + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.simple ? "simple" : _ctx.direction)]) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2); + }; + } + }); + var Steps = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__file", "steps.vue"]]); + + const stepProps = buildProps({ + title: { + type: String, + default: "" + }, + icon: { + type: iconPropType + }, + description: { + type: String, + default: "" + }, + status: { + type: String, + values: ["", "wait", "process", "finish", "error", "success"], + default: "" + } + }); + + const __default__$m = vue.defineComponent({ + name: "ElStep" + }); + const _sfc_main$t = vue.defineComponent({ + ...__default__$m, + props: stepProps, + setup(__props) { + const props = __props; + const ns = useNamespace("step"); + const index = vue.ref(-1); + const lineStyle = vue.ref({}); + const internalStatus = vue.ref(""); + const parent = vue.inject("ElSteps"); + const currentInstance = vue.getCurrentInstance(); + vue.onMounted(() => { + vue.watch([ + () => parent.props.active, + () => parent.props.processStatus, + () => parent.props.finishStatus + ], ([active]) => { + updateStatus(active); + }, { immediate: true }); + }); + vue.onBeforeUnmount(() => { + parent.steps.value = parent.steps.value.filter((instance) => instance.uid !== (currentInstance == null ? void 0 : currentInstance.uid)); + }); + const currentStatus = vue.computed(() => { + return props.status || internalStatus.value; + }); + const prevStatus = vue.computed(() => { + const prevStep = parent.steps.value[index.value - 1]; + return prevStep ? prevStep.currentStatus : "wait"; + }); + const isCenter = vue.computed(() => { + return parent.props.alignCenter; + }); + const isVertical = vue.computed(() => { + return parent.props.direction === "vertical"; + }); + const isSimple = vue.computed(() => { + return parent.props.simple; + }); + const stepsCount = vue.computed(() => { + return parent.steps.value.length; + }); + const isLast = vue.computed(() => { + var _a; + return ((_a = parent.steps.value[stepsCount.value - 1]) == null ? void 0 : _a.uid) === (currentInstance == null ? void 0 : currentInstance.uid); + }); + const space = vue.computed(() => { + return isSimple.value ? "" : parent.props.space; + }); + const style = vue.computed(() => { + const style2 = { + flexBasis: isNumber$1(space.value) ? `${space.value}px` : space.value ? space.value : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%` + }; + if (isVertical.value) + return style2; + if (isLast.value) { + style2.maxWidth = `${100 / stepsCount.value}%`; + } + return style2; + }); + const setIndex = (val) => { + index.value = val; + }; + const calcProgress = (status) => { + const isWait = status === "wait"; + const style2 = { + transitionDelay: `${isWait ? "-" : ""}${150 * index.value}ms` + }; + const step = status === parent.props.processStatus || isWait ? 0 : 100; + style2.borderWidth = step && !isSimple.value ? "1px" : 0; + style2[parent.props.direction === "vertical" ? "height" : "width"] = `${step}%`; + lineStyle.value = style2; + }; + const updateStatus = (activeIndex) => { + if (activeIndex > index.value) { + internalStatus.value = parent.props.finishStatus; + } else if (activeIndex === index.value && prevStatus.value !== "error") { + internalStatus.value = parent.props.processStatus; + } else { + internalStatus.value = "wait"; + } + const prevChild = parent.steps.value[index.value - 1]; + if (prevChild) + prevChild.calcProgress(internalStatus.value); + }; + const stepItemState = vue.reactive({ + uid: vue.computed(() => currentInstance == null ? void 0 : currentInstance.uid), + currentStatus, + setIndex, + calcProgress + }); + parent.steps.value = [...parent.steps.value, stepItemState]; + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + style: vue.normalizeStyle(vue.unref(style)), + class: vue.normalizeClass([ + vue.unref(ns).b(), + vue.unref(ns).is(vue.unref(isSimple) ? "simple" : vue.unref(parent).props.direction), + vue.unref(ns).is("flex", vue.unref(isLast) && !vue.unref(space) && !vue.unref(isCenter)), + vue.unref(ns).is("center", vue.unref(isCenter) && !vue.unref(isVertical) && !vue.unref(isSimple)) + ]) + }, [ + vue.createCommentVNode(" icon & line "), + vue.createElementVNode("div", { + class: vue.normalizeClass([vue.unref(ns).e("head"), vue.unref(ns).is(vue.unref(currentStatus))]) + }, [ + !vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("line")) + }, [ + vue.createElementVNode("i", { + class: vue.normalizeClass(vue.unref(ns).e("line-inner")), + style: vue.normalizeStyle(lineStyle.value) + }, null, 6) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(ns).is(_ctx.icon || _ctx.$slots.icon ? "icon" : "text")]) + }, [ + vue.renderSlot(_ctx.$slots, "icon", {}, () => [ + _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("icon-inner")) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) + ]), + _: 1 + }, 8, ["class"])) : vue.unref(currentStatus) === "success" ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 1, + class: vue.normalizeClass([vue.unref(ns).e("icon-inner"), vue.unref(ns).is("status")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(check_default)) + ]), + _: 1 + }, 8, ["class"])) : vue.unref(currentStatus) === "error" ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 2, + class: vue.normalizeClass([vue.unref(ns).e("icon-inner"), vue.unref(ns).is("status")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(close_default)) + ]), + _: 1 + }, 8, ["class"])) : !vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 3, + class: vue.normalizeClass(vue.unref(ns).e("icon-inner")) + }, vue.toDisplayString(index.value + 1), 3)) : vue.createCommentVNode("v-if", true) + ]) + ], 2) + ], 2), + vue.createCommentVNode(" title & description "), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("main")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass([vue.unref(ns).e("title"), vue.unref(ns).is(vue.unref(currentStatus))]) + }, [ + vue.renderSlot(_ctx.$slots, "title", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.title), 1) + ]) + ], 2), + vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("arrow")) + }, null, 2)) : (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass([vue.unref(ns).e("description"), vue.unref(ns).is(vue.unref(currentStatus))]) + }, [ + vue.renderSlot(_ctx.$slots, "description", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.description), 1) + ]) + ], 2)) + ], 2) + ], 6); + }; + } + }); + var Step = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__file", "item.vue"]]); + + const ElSteps = withInstall(Steps, { + Step + }); + const ElStep = withNoopInstall(Step); + + const switchProps = buildProps({ + modelValue: { + type: [Boolean, String, Number], + default: false + }, + value: { + type: [Boolean, String, Number], + default: false + }, + disabled: { + type: Boolean, + default: false + }, + width: { + type: [String, Number], + default: "" + }, + inlinePrompt: { + type: Boolean, + default: false + }, + activeIcon: { + type: iconPropType + }, + inactiveIcon: { + type: iconPropType + }, + activeText: { + type: String, + default: "" + }, + inactiveText: { + type: String, + default: "" + }, + activeColor: { + type: String, + default: "" + }, + inactiveColor: { + type: String, + default: "" + }, + borderColor: { + type: String, + default: "" + }, + activeValue: { + type: [Boolean, String, Number], + default: true + }, + inactiveValue: { + type: [Boolean, String, Number], + default: false + }, + name: { + type: String, + default: "" + }, + validateEvent: { + type: Boolean, + default: true + }, + id: String, + loading: { + type: Boolean, + default: false + }, + beforeChange: { + type: definePropType(Function) + }, + size: { + type: String, + validator: isValidComponentSize + }, + tabindex: { + type: [String, Number] + } + }); + const switchEmits = { + [UPDATE_MODEL_EVENT]: (val) => isBoolean$1(val) || isString$1(val) || isNumber$1(val), + [CHANGE_EVENT]: (val) => isBoolean$1(val) || isString$1(val) || isNumber$1(val), + [INPUT_EVENT]: (val) => isBoolean$1(val) || isString$1(val) || isNumber$1(val) + }; + + const _hoisted_1$d = ["onClick"]; + const _hoisted_2$9 = ["id", "aria-checked", "aria-disabled", "name", "true-value", "false-value", "disabled", "tabindex", "onKeydown"]; + const _hoisted_3$4 = ["aria-hidden"]; + const _hoisted_4$2 = ["aria-hidden"]; + const _hoisted_5$1 = ["aria-hidden"]; + const COMPONENT_NAME$8 = "ElSwitch"; + const __default__$l = vue.defineComponent({ + name: COMPONENT_NAME$8 + }); + const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({ + ...__default__$l, + props: switchProps, + emits: switchEmits, + setup(__props, { expose, emit }) { + const props = __props; + const vm = vue.getCurrentInstance(); + const { formItem } = useFormItem(); + const switchSize = useFormSize(); + const ns = useNamespace("switch"); + useDeprecated({ + from: '"value"', + replacement: '"model-value" or "v-model"', + scope: COMPONENT_NAME$8, + version: "2.3.0", + ref: "https://element-plus.org/en-US/component/switch.html#attributes", + type: "Attribute" + }, vue.computed(() => { + var _a; + return !!((_a = vm.vnode.props) == null ? void 0 : _a.value); + })); + const { inputId } = useFormItemInputId(props, { + formItemContext: formItem + }); + const switchDisabled = useFormDisabled(vue.computed(() => props.loading)); + const isControlled = vue.ref(props.modelValue !== false); + const input = vue.ref(); + const core = vue.ref(); + const switchKls = vue.computed(() => [ + ns.b(), + ns.m(switchSize.value), + ns.is("disabled", switchDisabled.value), + ns.is("checked", checked.value) + ]); + const coreStyle = vue.computed(() => ({ + width: addUnit(props.width) + })); + vue.watch(() => props.modelValue, () => { + isControlled.value = true; + }); + vue.watch(() => props.value, () => { + isControlled.value = false; + }); + const actualValue = vue.computed(() => { + return isControlled.value ? props.modelValue : props.value; + }); + const checked = vue.computed(() => actualValue.value === props.activeValue); + if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) { + emit(UPDATE_MODEL_EVENT, props.inactiveValue); + emit(CHANGE_EVENT, props.inactiveValue); + emit(INPUT_EVENT, props.inactiveValue); + } + vue.watch(checked, (val) => { + var _a; + input.value.checked = val; + if (props.validateEvent) { + (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn()); + } + }); + const handleChange = () => { + const val = checked.value ? props.inactiveValue : props.activeValue; + emit(UPDATE_MODEL_EVENT, val); + emit(CHANGE_EVENT, val); + emit(INPUT_EVENT, val); + vue.nextTick(() => { + input.value.checked = checked.value; + }); + }; + const switchValue = () => { + if (switchDisabled.value) + return; + const { beforeChange } = props; + if (!beforeChange) { + handleChange(); + return; + } + const shouldChange = beforeChange(); + const isPromiseOrBool = [ + isPromise(shouldChange), + isBoolean$1(shouldChange) + ].includes(true); + if (!isPromiseOrBool) { + throwError(COMPONENT_NAME$8, "beforeChange must return type `Promise<boolean>` or `boolean`"); + } + if (isPromise(shouldChange)) { + shouldChange.then((result) => { + if (result) { + handleChange(); + } + }).catch((e) => { + }); + } else if (shouldChange) { + handleChange(); + } + }; + const styles = vue.computed(() => { + return ns.cssVarBlock({ + ...props.activeColor ? { "on-color": props.activeColor } : null, + ...props.inactiveColor ? { "off-color": props.inactiveColor } : null, + ...props.borderColor ? { "border-color": props.borderColor } : null + }); + }); + const focus = () => { + var _a, _b; + (_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a); + }; + vue.onMounted(() => { + input.value.checked = checked.value; + }); + expose({ + focus, + checked + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(switchKls)), + style: vue.normalizeStyle(vue.unref(styles)), + onClick: vue.withModifiers(switchValue, ["prevent"]) + }, [ + vue.createElementVNode("input", { + id: vue.unref(inputId), + ref_key: "input", + ref: input, + class: vue.normalizeClass(vue.unref(ns).e("input")), + type: "checkbox", + role: "switch", + "aria-checked": vue.unref(checked), + "aria-disabled": vue.unref(switchDisabled), + name: _ctx.name, + "true-value": _ctx.activeValue, + "false-value": _ctx.inactiveValue, + disabled: vue.unref(switchDisabled), + tabindex: _ctx.tabindex, + onChange: handleChange, + onKeydown: vue.withKeys(switchValue, ["enter"]) + }, null, 42, _hoisted_2$9), + !_ctx.inlinePrompt && (_ctx.inactiveIcon || _ctx.inactiveText) ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + class: vue.normalizeClass([ + vue.unref(ns).e("label"), + vue.unref(ns).em("label", "left"), + vue.unref(ns).is("active", !vue.unref(checked)) + ]) + }, [ + _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveIcon))) + ]), + _: 1 + })) : vue.createCommentVNode("v-if", true), + !_ctx.inactiveIcon && _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock("span", { + key: 1, + "aria-hidden": vue.unref(checked) + }, vue.toDisplayString(_ctx.inactiveText), 9, _hoisted_3$4)) : vue.createCommentVNode("v-if", true) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("span", { + ref_key: "core", + ref: core, + class: vue.normalizeClass(vue.unref(ns).e("core")), + style: vue.normalizeStyle(vue.unref(coreStyle)) + }, [ + _ctx.inlinePrompt ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("inner")) + }, [ + _ctx.activeIcon || _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(ns).is("icon")) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(checked) ? _ctx.activeIcon : _ctx.inactiveIcon))) + ]), + _: 1 + }, 8, ["class"])) : _ctx.activeText || _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock("span", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).is("text")), + "aria-hidden": !vue.unref(checked) + }, vue.toDisplayString(vue.unref(checked) ? _ctx.activeText : _ctx.inactiveText), 11, _hoisted_4$2)) : vue.createCommentVNode("v-if", true) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("action")) + }, [ + _ctx.loading ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(ns).is("loading")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(loading_default)) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ], 2) + ], 6), + !_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (vue.openBlock(), vue.createElementBlock("span", { + key: 1, + class: vue.normalizeClass([ + vue.unref(ns).e("label"), + vue.unref(ns).em("label", "right"), + vue.unref(ns).is("active", vue.unref(checked)) + ]) + }, [ + _ctx.activeIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeIcon))) + ]), + _: 1 + })) : vue.createCommentVNode("v-if", true), + !_ctx.activeIcon && _ctx.activeText ? (vue.openBlock(), vue.createElementBlock("span", { + key: 1, + "aria-hidden": !vue.unref(checked) + }, vue.toDisplayString(_ctx.activeText), 9, _hoisted_5$1)) : vue.createCommentVNode("v-if", true) + ], 2)) : vue.createCommentVNode("v-if", true) + ], 14, _hoisted_1$d); + }; + } + }); + var Switch = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__file", "switch.vue"]]); + + const ElSwitch = withInstall(Switch); + + var matchHtmlRegExp = /["'&<>]/; + var escapeHtml_1 = escapeHtml; + function escapeHtml(string) { + var str = "" + string; + var match = matchHtmlRegExp.exec(str); + if (!match) { + return str; + } + var escape; + var html = ""; + var index = 0; + var lastIndex = 0; + for (index = match.index; index < str.length; index++) { + switch (str.charCodeAt(index)) { + case 34: + escape = """; + break; + case 38: + escape = "&"; + break; + case 39: + escape = "'"; + break; + case 60: + escape = "<"; + break; + case 62: + escape = ">"; + break; + default: + continue; + } + if (lastIndex !== index) { + html += str.substring(lastIndex, index); + } + lastIndex = index + 1; + html += escape; + } + return lastIndex !== index ? html + str.substring(lastIndex, index) : html; + } + /*! + * escape-html + * Copyright(c) 2012-2013 TJ Holowaychuk + * Copyright(c) 2015 Andreas Lubbe + * Copyright(c) 2015 Tiancheng "Timothy" Gu + * MIT Licensed + */ + + const getCell = function(event) { + var _a; + return (_a = event.target) == null ? void 0 : _a.closest("td"); + }; + const orderBy = function(array, sortKey, reverse, sortMethod, sortBy) { + if (!sortKey && !sortMethod && (!sortBy || Array.isArray(sortBy) && !sortBy.length)) { + return array; + } + if (typeof reverse === "string") { + reverse = reverse === "descending" ? -1 : 1; + } else { + reverse = reverse && reverse < 0 ? -1 : 1; + } + const getKey = sortMethod ? null : function(value, index) { + if (sortBy) { + if (!Array.isArray(sortBy)) { + sortBy = [sortBy]; + } + return sortBy.map((by) => { + if (typeof by === "string") { + return get(value, by); + } else { + return by(value, index, array); + } + }); + } + if (sortKey !== "$key") { + if (isObject$1(value) && "$value" in value) + value = value.$value; + } + return [isObject$1(value) ? get(value, sortKey) : value]; + }; + const compare = function(a, b) { + if (sortMethod) { + return sortMethod(a.value, b.value); + } + for (let i = 0, len = a.key.length; i < len; i++) { + if (a.key[i] < b.key[i]) { + return -1; + } + if (a.key[i] > b.key[i]) { + return 1; + } + } + return 0; + }; + return array.map((value, index) => { + return { + value, + index, + key: getKey ? getKey(value, index) : null + }; + }).sort((a, b) => { + let order = compare(a, b); + if (!order) { + order = a.index - b.index; + } + return order * +reverse; + }).map((item) => item.value); + }; + const getColumnById = function(table, columnId) { + let column = null; + table.columns.forEach((item) => { + if (item.id === columnId) { + column = item; + } + }); + return column; + }; + const getColumnByKey = function(table, columnKey) { + let column = null; + for (let i = 0; i < table.columns.length; i++) { + const item = table.columns[i]; + if (item.columnKey === columnKey) { + column = item; + break; + } + } + if (!column) + throwError("ElTable", `No column matching with column-key: ${columnKey}`); + return column; + }; + const getColumnByCell = function(table, cell, namespace) { + const matches = (cell.className || "").match(new RegExp(`${namespace}-table_[^\\s]+`, "gm")); + if (matches) { + return getColumnById(table, matches[0]); + } + return null; + }; + const getRowIdentity = (row, rowKey) => { + if (!row) + throw new Error("Row is required when get row identity"); + if (typeof rowKey === "string") { + if (!rowKey.includes(".")) { + return `${row[rowKey]}`; + } + const key = rowKey.split("."); + let current = row; + for (const element of key) { + current = current[element]; + } + return `${current}`; + } else if (typeof rowKey === "function") { + return rowKey.call(null, row); + } + }; + const getKeysMap = function(array, rowKey) { + const arrayMap = {}; + (array || []).forEach((row, index) => { + arrayMap[getRowIdentity(row, rowKey)] = { row, index }; + }); + return arrayMap; + }; + function mergeOptions(defaults, config) { + const options = {}; + let key; + for (key in defaults) { + options[key] = defaults[key]; + } + for (key in config) { + if (hasOwn(config, key)) { + const value = config[key]; + if (typeof value !== "undefined") { + options[key] = value; + } + } + } + return options; + } + function parseWidth(width) { + if (width === "") + return width; + if (width !== void 0) { + width = Number.parseInt(width, 10); + if (Number.isNaN(width)) { + width = ""; + } + } + return width; + } + function parseMinWidth(minWidth) { + if (minWidth === "") + return minWidth; + if (minWidth !== void 0) { + minWidth = parseWidth(minWidth); + if (Number.isNaN(minWidth)) { + minWidth = 80; + } + } + return minWidth; + } + function parseHeight(height) { + if (typeof height === "number") { + return height; + } + if (typeof height === "string") { + if (/^\d+(?:px)?$/.test(height)) { + return Number.parseInt(height, 10); + } else { + return height; + } + } + return null; + } + function compose(...funcs) { + if (funcs.length === 0) { + return (arg) => arg; + } + if (funcs.length === 1) { + return funcs[0]; + } + return funcs.reduce((a, b) => (...args) => a(b(...args))); + } + function toggleRowStatus(statusArr, row, newVal) { + let changed = false; + const index = statusArr.indexOf(row); + const included = index !== -1; + const toggleStatus = (type) => { + if (type === "add") { + statusArr.push(row); + } else { + statusArr.splice(index, 1); + } + changed = true; + if (isArray$1(row.children)) { + row.children.forEach((item) => { + toggleRowStatus(statusArr, item, newVal != null ? newVal : !included); + }); + } + }; + if (isBoolean$1(newVal)) { + if (newVal && !included) { + toggleStatus("add"); + } else if (!newVal && included) { + toggleStatus("remove"); + } + } else { + included ? toggleStatus("remove") : toggleStatus("add"); + } + return changed; + } + function walkTreeNode(root, cb, childrenKey = "children", lazyKey = "hasChildren") { + const isNil = (array) => !(Array.isArray(array) && array.length); + function _walker(parent, children, level) { + cb(parent, children, level); + children.forEach((item) => { + if (item[lazyKey]) { + cb(item, null, level + 1); + return; + } + const children2 = item[childrenKey]; + if (!isNil(children2)) { + _walker(item, children2, level + 1); + } + }); + } + root.forEach((item) => { + if (item[lazyKey]) { + cb(item, null, 0); + return; + } + const children = item[childrenKey]; + if (!isNil(children)) { + _walker(item, children, 0); + } + }); + } + let removePopper; + function createTablePopper(parentNode, trigger, popperContent, nextZIndex, tooltipOptions) { + tooltipOptions = merge({ + enterable: true, + showArrow: true + }, tooltipOptions); + const ns = parentNode == null ? void 0 : parentNode.dataset.prefix; + const scrollContainer = parentNode == null ? void 0 : parentNode.querySelector(`.${ns}-scrollbar__wrap`); + function renderContent() { + const isLight = tooltipOptions.effect === "light"; + const content2 = document.createElement("div"); + content2.className = [ + `${ns}-popper`, + isLight ? "is-light" : "is-dark", + tooltipOptions.popperClass || "" + ].join(" "); + popperContent = escapeHtml_1(popperContent); + content2.innerHTML = popperContent; + content2.style.zIndex = String(nextZIndex()); + parentNode == null ? void 0 : parentNode.appendChild(content2); + return content2; + } + function renderArrow() { + const arrow = document.createElement("div"); + arrow.className = `${ns}-popper__arrow`; + return arrow; + } + function showPopper() { + popperInstance && popperInstance.update(); + } + removePopper == null ? void 0 : removePopper(); + removePopper = () => { + try { + popperInstance && popperInstance.destroy(); + content && (parentNode == null ? void 0 : parentNode.removeChild(content)); + trigger.removeEventListener("mouseenter", onOpen); + trigger.removeEventListener("mouseleave", onClose); + scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", removePopper); + removePopper = void 0; + } catch (e) { + } + }; + let popperInstance = null; + let onOpen = showPopper; + let onClose = removePopper; + if (tooltipOptions.enterable) { + ({ onOpen, onClose } = useDelayedToggle({ + showAfter: tooltipOptions.showAfter, + hideAfter: tooltipOptions.hideAfter, + open: showPopper, + close: removePopper + })); + } + const content = renderContent(); + content.onmouseenter = onOpen; + content.onmouseleave = onClose; + const modifiers = []; + if (tooltipOptions.offset) { + modifiers.push({ + name: "offset", + options: { + offset: [0, tooltipOptions.offset] + } + }); + } + if (tooltipOptions.showArrow) { + const arrow = content.appendChild(renderArrow()); + modifiers.push({ + name: "arrow", + options: { + element: arrow, + padding: 10 + } + }); + } + const popperOptions = tooltipOptions.popperOptions || {}; + popperInstance = yn(trigger, content, { + placement: tooltipOptions.placement || "top", + strategy: "fixed", + ...popperOptions, + modifiers: popperOptions.modifiers ? modifiers.concat(popperOptions.modifiers) : modifiers + }); + trigger.addEventListener("mouseenter", onOpen); + trigger.addEventListener("mouseleave", onClose); + scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", removePopper); + return popperInstance; + } + function getCurrentColumns(column) { + if (column.children) { + return flatMap(column.children, getCurrentColumns); + } else { + return [column]; + } + } + function getColSpan(colSpan, column) { + return colSpan + column.colSpan; + } + const isFixedColumn = (index, fixed, store, realColumns) => { + let start = 0; + let after = index; + const columns = store.states.columns.value; + if (realColumns) { + const curColumns = getCurrentColumns(realColumns[index]); + const preColumns = columns.slice(0, columns.indexOf(curColumns[0])); + start = preColumns.reduce(getColSpan, 0); + after = start + curColumns.reduce(getColSpan, 0) - 1; + } else { + start = index; + } + let fixedLayout; + switch (fixed) { + case "left": + if (after < store.states.fixedLeafColumnsLength.value) { + fixedLayout = "left"; + } + break; + case "right": + if (start >= columns.length - store.states.rightFixedLeafColumnsLength.value) { + fixedLayout = "right"; + } + break; + default: + if (after < store.states.fixedLeafColumnsLength.value) { + fixedLayout = "left"; + } else if (start >= columns.length - store.states.rightFixedLeafColumnsLength.value) { + fixedLayout = "right"; + } + } + return fixedLayout ? { + direction: fixedLayout, + start, + after + } : {}; + }; + const getFixedColumnsClass = (namespace, index, fixed, store, realColumns, offset = 0) => { + const classes = []; + const { direction, start, after } = isFixedColumn(index, fixed, store, realColumns); + if (direction) { + const isLeft = direction === "left"; + classes.push(`${namespace}-fixed-column--${direction}`); + if (isLeft && after + offset === store.states.fixedLeafColumnsLength.value - 1) { + classes.push("is-last-column"); + } else if (!isLeft && start - offset === store.states.columns.value.length - store.states.rightFixedLeafColumnsLength.value) { + classes.push("is-first-column"); + } + } + return classes; + }; + function getOffset(offset, column) { + return offset + (column.realWidth === null || Number.isNaN(column.realWidth) ? Number(column.width) : column.realWidth); + } + const getFixedColumnOffset = (index, fixed, store, realColumns) => { + const { + direction, + start = 0, + after = 0 + } = isFixedColumn(index, fixed, store, realColumns); + if (!direction) { + return; + } + const styles = {}; + const isLeft = direction === "left"; + const columns = store.states.columns.value; + if (isLeft) { + styles.left = columns.slice(0, start).reduce(getOffset, 0); + } else { + styles.right = columns.slice(after + 1).reverse().reduce(getOffset, 0); + } + return styles; + }; + const ensurePosition = (style, key) => { + if (!style) + return; + if (!Number.isNaN(style[key])) { + style[key] = `${style[key]}px`; + } + }; + + function useExpand(watcherData) { + const instance = vue.getCurrentInstance(); + const defaultExpandAll = vue.ref(false); + const expandRows = vue.ref([]); + const updateExpandRows = () => { + const data = watcherData.data.value || []; + const rowKey = watcherData.rowKey.value; + if (defaultExpandAll.value) { + expandRows.value = data.slice(); + } else if (rowKey) { + const expandRowsMap = getKeysMap(expandRows.value, rowKey); + expandRows.value = data.reduce((prev, row) => { + const rowId = getRowIdentity(row, rowKey); + const rowInfo = expandRowsMap[rowId]; + if (rowInfo) { + prev.push(row); + } + return prev; + }, []); + } else { + expandRows.value = []; + } + }; + const toggleRowExpansion = (row, expanded) => { + const changed = toggleRowStatus(expandRows.value, row, expanded); + if (changed) { + instance.emit("expand-change", row, expandRows.value.slice()); + } + }; + const setExpandRowKeys = (rowKeys) => { + instance.store.assertRowKey(); + const data = watcherData.data.value || []; + const rowKey = watcherData.rowKey.value; + const keysMap = getKeysMap(data, rowKey); + expandRows.value = rowKeys.reduce((prev, cur) => { + const info = keysMap[cur]; + if (info) { + prev.push(info.row); + } + return prev; + }, []); + }; + const isRowExpanded = (row) => { + const rowKey = watcherData.rowKey.value; + if (rowKey) { + const expandMap = getKeysMap(expandRows.value, rowKey); + return !!expandMap[getRowIdentity(row, rowKey)]; + } + return expandRows.value.includes(row); + }; + return { + updateExpandRows, + toggleRowExpansion, + setExpandRowKeys, + isRowExpanded, + states: { + expandRows, + defaultExpandAll + } + }; + } + + function useCurrent(watcherData) { + const instance = vue.getCurrentInstance(); + const _currentRowKey = vue.ref(null); + const currentRow = vue.ref(null); + const setCurrentRowKey = (key) => { + instance.store.assertRowKey(); + _currentRowKey.value = key; + setCurrentRowByKey(key); + }; + const restoreCurrentRowKey = () => { + _currentRowKey.value = null; + }; + const setCurrentRowByKey = (key) => { + const { data, rowKey } = watcherData; + let _currentRow = null; + if (rowKey.value) { + _currentRow = (vue.unref(data) || []).find((item) => getRowIdentity(item, rowKey.value) === key); + } + currentRow.value = _currentRow; + instance.emit("current-change", currentRow.value, null); + }; + const updateCurrentRow = (_currentRow) => { + const oldCurrentRow = currentRow.value; + if (_currentRow && _currentRow !== oldCurrentRow) { + currentRow.value = _currentRow; + instance.emit("current-change", currentRow.value, oldCurrentRow); + return; + } + if (!_currentRow && oldCurrentRow) { + currentRow.value = null; + instance.emit("current-change", null, oldCurrentRow); + } + }; + const updateCurrentRowData = () => { + const rowKey = watcherData.rowKey.value; + const data = watcherData.data.value || []; + const oldCurrentRow = currentRow.value; + if (!data.includes(oldCurrentRow) && oldCurrentRow) { + if (rowKey) { + const currentRowKey = getRowIdentity(oldCurrentRow, rowKey); + setCurrentRowByKey(currentRowKey); + } else { + currentRow.value = null; + } + if (currentRow.value === null) { + instance.emit("current-change", null, oldCurrentRow); + } + } else if (_currentRowKey.value) { + setCurrentRowByKey(_currentRowKey.value); + restoreCurrentRowKey(); + } + }; + return { + setCurrentRowKey, + restoreCurrentRowKey, + setCurrentRowByKey, + updateCurrentRow, + updateCurrentRowData, + states: { + _currentRowKey, + currentRow + } + }; + } + + function useTree$2(watcherData) { + const expandRowKeys = vue.ref([]); + const treeData = vue.ref({}); + const indent = vue.ref(16); + const lazy = vue.ref(false); + const lazyTreeNodeMap = vue.ref({}); + const lazyColumnIdentifier = vue.ref("hasChildren"); + const childrenColumnName = vue.ref("children"); + const instance = vue.getCurrentInstance(); + const normalizedData = vue.computed(() => { + if (!watcherData.rowKey.value) + return {}; + const data = watcherData.data.value || []; + return normalize(data); + }); + const normalizedLazyNode = vue.computed(() => { + const rowKey = watcherData.rowKey.value; + const keys = Object.keys(lazyTreeNodeMap.value); + const res = {}; + if (!keys.length) + return res; + keys.forEach((key) => { + if (lazyTreeNodeMap.value[key].length) { + const item = { children: [] }; + lazyTreeNodeMap.value[key].forEach((row) => { + const currentRowKey = getRowIdentity(row, rowKey); + item.children.push(currentRowKey); + if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) { + res[currentRowKey] = { children: [] }; + } + }); + res[key] = item; + } + }); + return res; + }); + const normalize = (data) => { + const rowKey = watcherData.rowKey.value; + const res = {}; + walkTreeNode(data, (parent, children, level) => { + const parentId = getRowIdentity(parent, rowKey); + if (Array.isArray(children)) { + res[parentId] = { + children: children.map((row) => getRowIdentity(row, rowKey)), + level + }; + } else if (lazy.value) { + res[parentId] = { + children: [], + lazy: true, + level + }; + } + }, childrenColumnName.value, lazyColumnIdentifier.value); + return res; + }; + const updateTreeData = (ifChangeExpandRowKeys = false, ifExpandAll = ((_a) => (_a = instance.store) == null ? void 0 : _a.states.defaultExpandAll.value)()) => { + var _a2; + const nested = normalizedData.value; + const normalizedLazyNode_ = normalizedLazyNode.value; + const keys = Object.keys(nested); + const newTreeData = {}; + if (keys.length) { + const oldTreeData = vue.unref(treeData); + const rootLazyRowKeys = []; + const getExpanded = (oldValue, key) => { + if (ifChangeExpandRowKeys) { + if (expandRowKeys.value) { + return ifExpandAll || expandRowKeys.value.includes(key); + } else { + return !!(ifExpandAll || (oldValue == null ? void 0 : oldValue.expanded)); + } + } else { + const included = ifExpandAll || expandRowKeys.value && expandRowKeys.value.includes(key); + return !!((oldValue == null ? void 0 : oldValue.expanded) || included); + } + }; + keys.forEach((key) => { + const oldValue = oldTreeData[key]; + const newValue = { ...nested[key] }; + newValue.expanded = getExpanded(oldValue, key); + if (newValue.lazy) { + const { loaded = false, loading = false } = oldValue || {}; + newValue.loaded = !!loaded; + newValue.loading = !!loading; + rootLazyRowKeys.push(key); + } + newTreeData[key] = newValue; + }); + const lazyKeys = Object.keys(normalizedLazyNode_); + if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) { + lazyKeys.forEach((key) => { + const oldValue = oldTreeData[key]; + const lazyNodeChildren = normalizedLazyNode_[key].children; + if (rootLazyRowKeys.includes(key)) { + if (newTreeData[key].children.length !== 0) { + throw new Error("[ElTable]children must be an empty array."); + } + newTreeData[key].children = lazyNodeChildren; + } else { + const { loaded = false, loading = false } = oldValue || {}; + newTreeData[key] = { + lazy: true, + loaded: !!loaded, + loading: !!loading, + expanded: getExpanded(oldValue, key), + children: lazyNodeChildren, + level: "" + }; + } + }); + } + } + treeData.value = newTreeData; + (_a2 = instance.store) == null ? void 0 : _a2.updateTableScrollY(); + }; + vue.watch(() => expandRowKeys.value, () => { + updateTreeData(true); + }); + vue.watch(() => normalizedData.value, () => { + updateTreeData(); + }); + vue.watch(() => normalizedLazyNode.value, () => { + updateTreeData(); + }); + const updateTreeExpandKeys = (value) => { + expandRowKeys.value = value; + updateTreeData(); + }; + const toggleTreeExpansion = (row, expanded) => { + instance.store.assertRowKey(); + const rowKey = watcherData.rowKey.value; + const id = getRowIdentity(row, rowKey); + const data = id && treeData.value[id]; + if (id && data && "expanded" in data) { + const oldExpanded = data.expanded; + expanded = typeof expanded === "undefined" ? !data.expanded : expanded; + treeData.value[id].expanded = expanded; + if (oldExpanded !== expanded) { + instance.emit("expand-change", row, expanded); + } + instance.store.updateTableScrollY(); + } + }; + const loadOrToggle = (row) => { + instance.store.assertRowKey(); + const rowKey = watcherData.rowKey.value; + const id = getRowIdentity(row, rowKey); + const data = treeData.value[id]; + if (lazy.value && data && "loaded" in data && !data.loaded) { + loadData(row, id, data); + } else { + toggleTreeExpansion(row, void 0); + } + }; + const loadData = (row, key, treeNode) => { + const { load } = instance.props; + if (load && !treeData.value[key].loaded) { + treeData.value[key].loading = true; + load(row, treeNode, (data) => { + if (!Array.isArray(data)) { + throw new TypeError("[ElTable] data must be an array"); + } + treeData.value[key].loading = false; + treeData.value[key].loaded = true; + treeData.value[key].expanded = true; + if (data.length) { + lazyTreeNodeMap.value[key] = data; + } + instance.emit("expand-change", row, true); + }); + } + }; + return { + loadData, + loadOrToggle, + toggleTreeExpansion, + updateTreeExpandKeys, + updateTreeData, + normalize, + states: { + expandRowKeys, + treeData, + indent, + lazy, + lazyTreeNodeMap, + lazyColumnIdentifier, + childrenColumnName + } + }; + } + + const sortData = (data, states) => { + const sortingColumn = states.sortingColumn; + if (!sortingColumn || typeof sortingColumn.sortable === "string") { + return data; + } + return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy); + }; + const doFlattenColumns = (columns) => { + const result = []; + columns.forEach((column) => { + if (column.children) { + result.push.apply(result, doFlattenColumns(column.children)); + } else { + result.push(column); + } + }); + return result; + }; + function useWatcher$1() { + var _a; + const instance = vue.getCurrentInstance(); + const { size: tableSize } = vue.toRefs((_a = instance.proxy) == null ? void 0 : _a.$props); + const rowKey = vue.ref(null); + const data = vue.ref([]); + const _data = vue.ref([]); + const isComplex = vue.ref(false); + const _columns = vue.ref([]); + const originColumns = vue.ref([]); + const columns = vue.ref([]); + const fixedColumns = vue.ref([]); + const rightFixedColumns = vue.ref([]); + const leafColumns = vue.ref([]); + const fixedLeafColumns = vue.ref([]); + const rightFixedLeafColumns = vue.ref([]); + const updateOrderFns = []; + const leafColumnsLength = vue.ref(0); + const fixedLeafColumnsLength = vue.ref(0); + const rightFixedLeafColumnsLength = vue.ref(0); + const isAllSelected = vue.ref(false); + const selection = vue.ref([]); + const reserveSelection = vue.ref(false); + const selectOnIndeterminate = vue.ref(false); + const selectable = vue.ref(null); + const filters = vue.ref({}); + const filteredData = vue.ref(null); + const sortingColumn = vue.ref(null); + const sortProp = vue.ref(null); + const sortOrder = vue.ref(null); + const hoverRow = vue.ref(null); + vue.watch(data, () => instance.state && scheduleLayout(false), { + deep: true + }); + const assertRowKey = () => { + if (!rowKey.value) + throw new Error("[ElTable] prop row-key is required"); + }; + const updateChildFixed = (column) => { + var _a2; + (_a2 = column.children) == null ? void 0 : _a2.forEach((childColumn) => { + childColumn.fixed = column.fixed; + updateChildFixed(childColumn); + }); + }; + const updateColumns = () => { + _columns.value.forEach((column) => { + updateChildFixed(column); + }); + fixedColumns.value = _columns.value.filter((column) => column.fixed === true || column.fixed === "left"); + rightFixedColumns.value = _columns.value.filter((column) => column.fixed === "right"); + if (fixedColumns.value.length > 0 && _columns.value[0] && _columns.value[0].type === "selection" && !_columns.value[0].fixed) { + _columns.value[0].fixed = true; + fixedColumns.value.unshift(_columns.value[0]); + } + const notFixedColumns = _columns.value.filter((column) => !column.fixed); + originColumns.value = [].concat(fixedColumns.value).concat(notFixedColumns).concat(rightFixedColumns.value); + const leafColumns2 = doFlattenColumns(notFixedColumns); + const fixedLeafColumns2 = doFlattenColumns(fixedColumns.value); + const rightFixedLeafColumns2 = doFlattenColumns(rightFixedColumns.value); + leafColumnsLength.value = leafColumns2.length; + fixedLeafColumnsLength.value = fixedLeafColumns2.length; + rightFixedLeafColumnsLength.value = rightFixedLeafColumns2.length; + columns.value = [].concat(fixedLeafColumns2).concat(leafColumns2).concat(rightFixedLeafColumns2); + isComplex.value = fixedColumns.value.length > 0 || rightFixedColumns.value.length > 0; + }; + const scheduleLayout = (needUpdateColumns, immediate = false) => { + if (needUpdateColumns) { + updateColumns(); + } + if (immediate) { + instance.state.doLayout(); + } else { + instance.state.debouncedUpdateLayout(); + } + }; + const isSelected = (row) => { + return selection.value.includes(row); + }; + const clearSelection = () => { + isAllSelected.value = false; + const oldSelection = selection.value; + if (oldSelection.length) { + selection.value = []; + instance.emit("selection-change", []); + } + }; + const cleanSelection = () => { + let deleted; + if (rowKey.value) { + deleted = []; + const selectedMap = getKeysMap(selection.value, rowKey.value); + const dataMap = getKeysMap(data.value, rowKey.value); + for (const key in selectedMap) { + if (hasOwn(selectedMap, key) && !dataMap[key]) { + deleted.push(selectedMap[key].row); + } + } + } else { + deleted = selection.value.filter((item) => !data.value.includes(item)); + } + if (deleted.length) { + const newSelection = selection.value.filter((item) => !deleted.includes(item)); + selection.value = newSelection; + instance.emit("selection-change", newSelection.slice()); + } + }; + const getSelectionRows = () => { + return (selection.value || []).slice(); + }; + const toggleRowSelection = (row, selected = void 0, emitChange = true) => { + const changed = toggleRowStatus(selection.value, row, selected); + if (changed) { + const newSelection = (selection.value || []).slice(); + if (emitChange) { + instance.emit("select", newSelection, row); + } + instance.emit("selection-change", newSelection); + } + }; + const _toggleAllSelection = () => { + var _a2, _b; + const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selection.value.length); + isAllSelected.value = value; + let selectionChanged = false; + let childrenCount = 0; + const rowKey2 = (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.rowKey.value; + data.value.forEach((row, index) => { + const rowIndex = index + childrenCount; + if (selectable.value) { + if (selectable.value.call(null, row, rowIndex) && toggleRowStatus(selection.value, row, value)) { + selectionChanged = true; + } + } else { + if (toggleRowStatus(selection.value, row, value)) { + selectionChanged = true; + } + } + childrenCount += getChildrenCount(getRowIdentity(row, rowKey2)); + }); + if (selectionChanged) { + instance.emit("selection-change", selection.value ? selection.value.slice() : []); + } + instance.emit("select-all", selection.value); + }; + const updateSelectionByRowKey = () => { + const selectedMap = getKeysMap(selection.value, rowKey.value); + data.value.forEach((row) => { + const rowId = getRowIdentity(row, rowKey.value); + const rowInfo = selectedMap[rowId]; + if (rowInfo) { + selection.value[rowInfo.index] = row; + } + }); + }; + const updateAllSelected = () => { + var _a2, _b, _c; + if (((_a2 = data.value) == null ? void 0 : _a2.length) === 0) { + isAllSelected.value = false; + return; + } + let selectedMap; + if (rowKey.value) { + selectedMap = getKeysMap(selection.value, rowKey.value); + } + const isSelected2 = function(row) { + if (selectedMap) { + return !!selectedMap[getRowIdentity(row, rowKey.value)]; + } else { + return selection.value.includes(row); + } + }; + let isAllSelected_ = true; + let selectedCount = 0; + let childrenCount = 0; + for (let i = 0, j = (data.value || []).length; i < j; i++) { + const keyProp = (_c = (_b = instance == null ? void 0 : instance.store) == null ? void 0 : _b.states) == null ? void 0 : _c.rowKey.value; + const rowIndex = i + childrenCount; + const item = data.value[i]; + const isRowSelectable = selectable.value && selectable.value.call(null, item, rowIndex); + if (!isSelected2(item)) { + if (!selectable.value || isRowSelectable) { + isAllSelected_ = false; + break; + } + } else { + selectedCount++; + } + childrenCount += getChildrenCount(getRowIdentity(item, keyProp)); + } + if (selectedCount === 0) + isAllSelected_ = false; + isAllSelected.value = isAllSelected_; + }; + const getChildrenCount = (rowKey2) => { + var _a2; + if (!instance || !instance.store) + return 0; + const { treeData } = instance.store.states; + let count = 0; + const children = (_a2 = treeData.value[rowKey2]) == null ? void 0 : _a2.children; + if (children) { + count += children.length; + children.forEach((childKey) => { + count += getChildrenCount(childKey); + }); + } + return count; + }; + const updateFilters = (columns2, values) => { + if (!Array.isArray(columns2)) { + columns2 = [columns2]; + } + const filters_ = {}; + columns2.forEach((col) => { + filters.value[col.id] = values; + filters_[col.columnKey || col.id] = values; + }); + return filters_; + }; + const updateSort = (column, prop, order) => { + if (sortingColumn.value && sortingColumn.value !== column) { + sortingColumn.value.order = null; + } + sortingColumn.value = column; + sortProp.value = prop; + sortOrder.value = order; + }; + const execFilter = () => { + let sourceData = vue.unref(_data); + Object.keys(filters.value).forEach((columnId) => { + const values = filters.value[columnId]; + if (!values || values.length === 0) + return; + const column = getColumnById({ + columns: columns.value + }, columnId); + if (column && column.filterMethod) { + sourceData = sourceData.filter((row) => { + return values.some((value) => column.filterMethod.call(null, value, row, column)); + }); + } + }); + filteredData.value = sourceData; + }; + const execSort = () => { + data.value = sortData(filteredData.value, { + sortingColumn: sortingColumn.value, + sortProp: sortProp.value, + sortOrder: sortOrder.value + }); + }; + const execQuery = (ignore = void 0) => { + if (!(ignore && ignore.filter)) { + execFilter(); + } + execSort(); + }; + const clearFilter = (columnKeys) => { + const { tableHeaderRef } = instance.refs; + if (!tableHeaderRef) + return; + const panels = Object.assign({}, tableHeaderRef.filterPanels); + const keys = Object.keys(panels); + if (!keys.length) + return; + if (typeof columnKeys === "string") { + columnKeys = [columnKeys]; + } + if (Array.isArray(columnKeys)) { + const columns_ = columnKeys.map((key) => getColumnByKey({ + columns: columns.value + }, key)); + keys.forEach((key) => { + const column = columns_.find((col) => col.id === key); + if (column) { + column.filteredValue = []; + } + }); + instance.store.commit("filterChange", { + column: columns_, + values: [], + silent: true, + multi: true + }); + } else { + keys.forEach((key) => { + const column = columns.value.find((col) => col.id === key); + if (column) { + column.filteredValue = []; + } + }); + filters.value = {}; + instance.store.commit("filterChange", { + column: {}, + values: [], + silent: true + }); + } + }; + const clearSort = () => { + if (!sortingColumn.value) + return; + updateSort(null, null, null); + instance.store.commit("changeSortCondition", { + silent: true + }); + }; + const { + setExpandRowKeys, + toggleRowExpansion, + updateExpandRows, + states: expandStates, + isRowExpanded + } = useExpand({ + data, + rowKey + }); + const { + updateTreeExpandKeys, + toggleTreeExpansion, + updateTreeData, + loadOrToggle, + states: treeStates + } = useTree$2({ + data, + rowKey + }); + const { + updateCurrentRowData, + updateCurrentRow, + setCurrentRowKey, + states: currentData + } = useCurrent({ + data, + rowKey + }); + const setExpandRowKeysAdapter = (val) => { + setExpandRowKeys(val); + updateTreeExpandKeys(val); + }; + const toggleRowExpansionAdapter = (row, expanded) => { + const hasExpandColumn = columns.value.some(({ type }) => type === "expand"); + if (hasExpandColumn) { + toggleRowExpansion(row, expanded); + } else { + toggleTreeExpansion(row, expanded); + } + }; + return { + assertRowKey, + updateColumns, + scheduleLayout, + isSelected, + clearSelection, + cleanSelection, + getSelectionRows, + toggleRowSelection, + _toggleAllSelection, + toggleAllSelection: null, + updateSelectionByRowKey, + updateAllSelected, + updateFilters, + updateCurrentRow, + updateSort, + execFilter, + execSort, + execQuery, + clearFilter, + clearSort, + toggleRowExpansion, + setExpandRowKeysAdapter, + setCurrentRowKey, + toggleRowExpansionAdapter, + isRowExpanded, + updateExpandRows, + updateCurrentRowData, + loadOrToggle, + updateTreeData, + states: { + tableSize, + rowKey, + data, + _data, + isComplex, + _columns, + originColumns, + columns, + fixedColumns, + rightFixedColumns, + leafColumns, + fixedLeafColumns, + rightFixedLeafColumns, + updateOrderFns, + leafColumnsLength, + fixedLeafColumnsLength, + rightFixedLeafColumnsLength, + isAllSelected, + selection, + reserveSelection, + selectOnIndeterminate, + selectable, + filters, + filteredData, + sortingColumn, + sortProp, + sortOrder, + hoverRow, + ...expandStates, + ...treeStates, + ...currentData + } + }; + } + + function replaceColumn(array, column) { + return array.map((item) => { + var _a; + if (item.id === column.id) { + return column; + } else if ((_a = item.children) == null ? void 0 : _a.length) { + item.children = replaceColumn(item.children, column); + } + return item; + }); + } + function sortColumn(array) { + array.forEach((item) => { + var _a, _b; + item.no = (_a = item.getColumnIndex) == null ? void 0 : _a.call(item); + if ((_b = item.children) == null ? void 0 : _b.length) { + sortColumn(item.children); + } + }); + array.sort((cur, pre) => cur.no - pre.no); + } + function useStore() { + const instance = vue.getCurrentInstance(); + const watcher = useWatcher$1(); + const ns = useNamespace("table"); + const mutations = { + setData(states, data) { + const dataInstanceChanged = vue.unref(states._data) !== data; + states.data.value = data; + states._data.value = data; + instance.store.execQuery(); + instance.store.updateCurrentRowData(); + instance.store.updateExpandRows(); + instance.store.updateTreeData(instance.store.states.defaultExpandAll.value); + if (vue.unref(states.reserveSelection)) { + instance.store.assertRowKey(); + instance.store.updateSelectionByRowKey(); + } else { + if (dataInstanceChanged) { + instance.store.clearSelection(); + } else { + instance.store.cleanSelection(); + } + } + instance.store.updateAllSelected(); + if (instance.$ready) { + instance.store.scheduleLayout(); + } + }, + insertColumn(states, column, parent, updateColumnOrder) { + const array = vue.unref(states._columns); + let newColumns = []; + if (!parent) { + array.push(column); + newColumns = array; + } else { + if (parent && !parent.children) { + parent.children = []; + } + parent.children.push(column); + newColumns = replaceColumn(array, parent); + } + sortColumn(newColumns); + states._columns.value = newColumns; + states.updateOrderFns.push(updateColumnOrder); + if (column.type === "selection") { + states.selectable.value = column.selectable; + states.reserveSelection.value = column.reserveSelection; + } + if (instance.$ready) { + instance.store.updateColumns(); + instance.store.scheduleLayout(); + } + }, + updateColumnOrder(states, column) { + var _a; + const newColumnIndex = (_a = column.getColumnIndex) == null ? void 0 : _a.call(column); + if (newColumnIndex === column.no) + return; + sortColumn(states._columns.value); + if (instance.$ready) { + instance.store.updateColumns(); + } + }, + removeColumn(states, column, parent, updateColumnOrder) { + const array = vue.unref(states._columns) || []; + if (parent) { + parent.children.splice(parent.children.findIndex((item) => item.id === column.id), 1); + vue.nextTick(() => { + var _a; + if (((_a = parent.children) == null ? void 0 : _a.length) === 0) { + delete parent.children; + } + }); + states._columns.value = replaceColumn(array, parent); + } else { + const index = array.indexOf(column); + if (index > -1) { + array.splice(index, 1); + states._columns.value = array; + } + } + const updateFnIndex = states.updateOrderFns.indexOf(updateColumnOrder); + updateFnIndex > -1 && states.updateOrderFns.splice(updateFnIndex, 1); + if (instance.$ready) { + instance.store.updateColumns(); + instance.store.scheduleLayout(); + } + }, + sort(states, options) { + const { prop, order, init } = options; + if (prop) { + const column = vue.unref(states.columns).find((column2) => column2.property === prop); + if (column) { + column.order = order; + instance.store.updateSort(column, prop, order); + instance.store.commit("changeSortCondition", { init }); + } + } + }, + changeSortCondition(states, options) { + const { sortingColumn, sortProp, sortOrder } = states; + const columnValue = vue.unref(sortingColumn), propValue = vue.unref(sortProp), orderValue = vue.unref(sortOrder); + if (orderValue === null) { + states.sortingColumn.value = null; + states.sortProp.value = null; + } + const ignore = { filter: true }; + instance.store.execQuery(ignore); + if (!options || !(options.silent || options.init)) { + instance.emit("sort-change", { + column: columnValue, + prop: propValue, + order: orderValue + }); + } + instance.store.updateTableScrollY(); + }, + filterChange(_states, options) { + const { column, values, silent } = options; + const newFilters = instance.store.updateFilters(column, values); + instance.store.execQuery(); + if (!silent) { + instance.emit("filter-change", newFilters); + } + instance.store.updateTableScrollY(); + }, + toggleAllSelection() { + instance.store.toggleAllSelection(); + }, + rowSelectedChanged(_states, row) { + instance.store.toggleRowSelection(row); + instance.store.updateAllSelected(); + }, + setHoverRow(states, row) { + states.hoverRow.value = row; + }, + setCurrentRow(_states, row) { + instance.store.updateCurrentRow(row); + } + }; + const commit = function(name, ...args) { + const mutations2 = instance.store.mutations; + if (mutations2[name]) { + mutations2[name].apply(instance, [instance.store.states].concat(args)); + } else { + throw new Error(`Action not found: ${name}`); + } + }; + const updateTableScrollY = function() { + vue.nextTick(() => instance.layout.updateScrollY.apply(instance.layout)); + }; + return { + ns, + ...watcher, + mutations, + commit, + updateTableScrollY + }; + } + + const InitialStateMap = { + rowKey: "rowKey", + defaultExpandAll: "defaultExpandAll", + selectOnIndeterminate: "selectOnIndeterminate", + indent: "indent", + lazy: "lazy", + data: "data", + ["treeProps.hasChildren"]: { + key: "lazyColumnIdentifier", + default: "hasChildren" + }, + ["treeProps.children"]: { + key: "childrenColumnName", + default: "children" + } + }; + function createStore(table, props) { + if (!table) { + throw new Error("Table is required."); + } + const store = useStore(); + store.toggleAllSelection = debounce(store._toggleAllSelection, 10); + Object.keys(InitialStateMap).forEach((key) => { + handleValue(getArrKeysValue(props, key), key, store); + }); + proxyTableProps(store, props); + return store; + } + function proxyTableProps(store, props) { + Object.keys(InitialStateMap).forEach((key) => { + vue.watch(() => getArrKeysValue(props, key), (value) => { + handleValue(value, key, store); + }); + }); + } + function handleValue(value, propsKey, store) { + let newVal = value; + let storeKey = InitialStateMap[propsKey]; + if (typeof InitialStateMap[propsKey] === "object") { + storeKey = storeKey.key; + newVal = newVal || InitialStateMap[propsKey].default; + } + store.states[storeKey].value = newVal; + } + function getArrKeysValue(props, keys) { + if (keys.includes(".")) { + const keyList = keys.split("."); + let value = props; + keyList.forEach((key) => { + value = value[key]; + }); + return value; + } else { + return props[keys]; + } + } + + class TableLayout { + constructor(options) { + this.observers = []; + this.table = null; + this.store = null; + this.columns = []; + this.fit = true; + this.showHeader = true; + this.height = vue.ref(null); + this.scrollX = vue.ref(false); + this.scrollY = vue.ref(false); + this.bodyWidth = vue.ref(null); + this.fixedWidth = vue.ref(null); + this.rightFixedWidth = vue.ref(null); + this.gutterWidth = 0; + for (const name in options) { + if (hasOwn(options, name)) { + if (vue.isRef(this[name])) { + this[name].value = options[name]; + } else { + this[name] = options[name]; + } + } + } + if (!this.table) { + throw new Error("Table is required for Table Layout"); + } + if (!this.store) { + throw new Error("Store is required for Table Layout"); + } + } + updateScrollY() { + const height = this.height.value; + if (height === null) + return false; + const scrollBarRef = this.table.refs.scrollBarRef; + if (this.table.vnode.el && (scrollBarRef == null ? void 0 : scrollBarRef.wrapRef)) { + let scrollY = true; + const prevScrollY = this.scrollY.value; + scrollY = scrollBarRef.wrapRef.scrollHeight > scrollBarRef.wrapRef.clientHeight; + this.scrollY.value = scrollY; + return prevScrollY !== scrollY; + } + return false; + } + setHeight(value, prop = "height") { + if (!isClient) + return; + const el = this.table.vnode.el; + value = parseHeight(value); + this.height.value = Number(value); + if (!el && (value || value === 0)) + return vue.nextTick(() => this.setHeight(value, prop)); + if (typeof value === "number") { + el.style[prop] = `${value}px`; + this.updateElsHeight(); + } else if (typeof value === "string") { + el.style[prop] = value; + this.updateElsHeight(); + } + } + setMaxHeight(value) { + this.setHeight(value, "max-height"); + } + getFlattenColumns() { + const flattenColumns = []; + const columns = this.table.store.states.columns.value; + columns.forEach((column) => { + if (column.isColumnGroup) { + flattenColumns.push.apply(flattenColumns, column.columns); + } else { + flattenColumns.push(column); + } + }); + return flattenColumns; + } + updateElsHeight() { + this.updateScrollY(); + this.notifyObservers("scrollable"); + } + headerDisplayNone(elm) { + if (!elm) + return true; + let headerChild = elm; + while (headerChild.tagName !== "DIV") { + if (getComputedStyle(headerChild).display === "none") { + return true; + } + headerChild = headerChild.parentElement; + } + return false; + } + updateColumnsWidth() { + if (!isClient) + return; + const fit = this.fit; + const bodyWidth = this.table.vnode.el.clientWidth; + let bodyMinWidth = 0; + const flattenColumns = this.getFlattenColumns(); + const flexColumns = flattenColumns.filter((column) => typeof column.width !== "number"); + flattenColumns.forEach((column) => { + if (typeof column.width === "number" && column.realWidth) + column.realWidth = null; + }); + if (flexColumns.length > 0 && fit) { + flattenColumns.forEach((column) => { + bodyMinWidth += Number(column.width || column.minWidth || 80); + }); + if (bodyMinWidth <= bodyWidth) { + this.scrollX.value = false; + const totalFlexWidth = bodyWidth - bodyMinWidth; + if (flexColumns.length === 1) { + flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth; + } else { + const allColumnsWidth = flexColumns.reduce((prev, column) => prev + Number(column.minWidth || 80), 0); + const flexWidthPerPixel = totalFlexWidth / allColumnsWidth; + let noneFirstWidth = 0; + flexColumns.forEach((column, index) => { + if (index === 0) + return; + const flexWidth = Math.floor(Number(column.minWidth || 80) * flexWidthPerPixel); + noneFirstWidth += flexWidth; + column.realWidth = Number(column.minWidth || 80) + flexWidth; + }); + flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth; + } + } else { + this.scrollX.value = true; + flexColumns.forEach((column) => { + column.realWidth = Number(column.minWidth); + }); + } + this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth); + this.table.state.resizeState.value.width = this.bodyWidth.value; + } else { + flattenColumns.forEach((column) => { + if (!column.width && !column.minWidth) { + column.realWidth = 80; + } else { + column.realWidth = Number(column.width || column.minWidth); + } + bodyMinWidth += column.realWidth; + }); + this.scrollX.value = bodyMinWidth > bodyWidth; + this.bodyWidth.value = bodyMinWidth; + } + const fixedColumns = this.store.states.fixedColumns.value; + if (fixedColumns.length > 0) { + let fixedWidth = 0; + fixedColumns.forEach((column) => { + fixedWidth += Number(column.realWidth || column.width); + }); + this.fixedWidth.value = fixedWidth; + } + const rightFixedColumns = this.store.states.rightFixedColumns.value; + if (rightFixedColumns.length > 0) { + let rightFixedWidth = 0; + rightFixedColumns.forEach((column) => { + rightFixedWidth += Number(column.realWidth || column.width); + }); + this.rightFixedWidth.value = rightFixedWidth; + } + this.notifyObservers("columns"); + } + addObserver(observer) { + this.observers.push(observer); + } + removeObserver(observer) { + const index = this.observers.indexOf(observer); + if (index !== -1) { + this.observers.splice(index, 1); + } + } + notifyObservers(event) { + const observers = this.observers; + observers.forEach((observer) => { + var _a, _b; + switch (event) { + case "columns": + (_a = observer.state) == null ? void 0 : _a.onColumnsChange(this); + break; + case "scrollable": + (_b = observer.state) == null ? void 0 : _b.onScrollableChange(this); + break; + default: + throw new Error(`Table Layout don't have event ${event}.`); + } + }); + } + } + var TableLayout$1 = TableLayout; + + const { CheckboxGroup: ElCheckboxGroup } = ElCheckbox; + const _sfc_main$r = vue.defineComponent({ + name: "ElTableFilterPanel", + components: { + ElCheckbox, + ElCheckboxGroup, + ElScrollbar, + ElTooltip, + ElIcon, + ArrowDown: arrow_down_default, + ArrowUp: arrow_up_default + }, + directives: { ClickOutside }, + props: { + placement: { + type: String, + default: "bottom-start" + }, + store: { + type: Object + }, + column: { + type: Object + }, + upDataColumn: { + type: Function + } + }, + setup(props) { + const instance = vue.getCurrentInstance(); + const { t } = useLocale(); + const ns = useNamespace("table-filter"); + const parent = instance == null ? void 0 : instance.parent; + if (!parent.filterPanels.value[props.column.id]) { + parent.filterPanels.value[props.column.id] = instance; + } + const tooltipVisible = vue.ref(false); + const tooltip = vue.ref(null); + const filters = vue.computed(() => { + return props.column && props.column.filters; + }); + const filterValue = vue.computed({ + get: () => { + var _a; + return (((_a = props.column) == null ? void 0 : _a.filteredValue) || [])[0]; + }, + set: (value) => { + if (filteredValue.value) { + if (typeof value !== "undefined" && value !== null) { + filteredValue.value.splice(0, 1, value); + } else { + filteredValue.value.splice(0, 1); + } + } + } + }); + const filteredValue = vue.computed({ + get() { + if (props.column) { + return props.column.filteredValue || []; + } + return []; + }, + set(value) { + if (props.column) { + props.upDataColumn("filteredValue", value); + } + } + }); + const multiple = vue.computed(() => { + if (props.column) { + return props.column.filterMultiple; + } + return true; + }); + const isActive = (filter) => { + return filter.value === filterValue.value; + }; + const hidden = () => { + tooltipVisible.value = false; + }; + const showFilterPanel = (e) => { + e.stopPropagation(); + tooltipVisible.value = !tooltipVisible.value; + }; + const hideFilterPanel = () => { + tooltipVisible.value = false; + }; + const handleConfirm = () => { + confirmFilter(filteredValue.value); + hidden(); + }; + const handleReset = () => { + filteredValue.value = []; + confirmFilter(filteredValue.value); + hidden(); + }; + const handleSelect = (_filterValue) => { + filterValue.value = _filterValue; + if (typeof _filterValue !== "undefined" && _filterValue !== null) { + confirmFilter(filteredValue.value); + } else { + confirmFilter([]); + } + hidden(); + }; + const confirmFilter = (filteredValue2) => { + props.store.commit("filterChange", { + column: props.column, + values: filteredValue2 + }); + props.store.updateAllSelected(); + }; + vue.watch(tooltipVisible, (value) => { + if (props.column) { + props.upDataColumn("filterOpened", value); + } + }, { + immediate: true + }); + const popperPaneRef = vue.computed(() => { + var _a, _b; + return (_b = (_a = tooltip.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef; + }); + return { + tooltipVisible, + multiple, + filteredValue, + filterValue, + filters, + handleConfirm, + handleReset, + handleSelect, + isActive, + t, + ns, + showFilterPanel, + hideFilterPanel, + popperPaneRef, + tooltip + }; + } + }); + const _hoisted_1$c = { key: 0 }; + const _hoisted_2$8 = ["disabled"]; + const _hoisted_3$3 = ["label", "onClick"]; + function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_checkbox = vue.resolveComponent("el-checkbox"); + const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group"); + const _component_el_scrollbar = vue.resolveComponent("el-scrollbar"); + const _component_arrow_up = vue.resolveComponent("arrow-up"); + const _component_arrow_down = vue.resolveComponent("arrow-down"); + const _component_el_icon = vue.resolveComponent("el-icon"); + const _component_el_tooltip = vue.resolveComponent("el-tooltip"); + const _directive_click_outside = vue.resolveDirective("click-outside"); + return vue.openBlock(), vue.createBlock(_component_el_tooltip, { + ref: "tooltip", + visible: _ctx.tooltipVisible, + offset: 0, + placement: _ctx.placement, + "show-arrow": false, + "stop-popper-mouse-event": false, + teleported: "", + effect: "light", + pure: "", + "popper-class": _ctx.ns.b(), + persistent: "" + }, { + content: vue.withCtx(() => [ + _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("content")) + }, [ + vue.createVNode(_component_el_scrollbar, { + "wrap-class": _ctx.ns.e("wrap") + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_el_checkbox_group, { + modelValue: _ctx.filteredValue, + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.filteredValue = $event), + class: vue.normalizeClass(_ctx.ns.e("checkbox-group")) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => { + return vue.openBlock(), vue.createBlock(_component_el_checkbox, { + key: filter.value, + label: filter.value + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(filter.text), 1) + ]), + _: 2 + }, 1032, ["label"]); + }), 128)) + ]), + _: 1 + }, 8, ["modelValue", "class"]) + ]), + _: 1 + }, 8, ["wrap-class"]) + ], 2), + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("bottom")) + }, [ + vue.createElementVNode("button", { + class: vue.normalizeClass({ [_ctx.ns.is("disabled")]: _ctx.filteredValue.length === 0 }), + disabled: _ctx.filteredValue.length === 0, + type: "button", + onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleConfirm && _ctx.handleConfirm(...args)) + }, vue.toDisplayString(_ctx.t("el.table.confirmFilter")), 11, _hoisted_2$8), + vue.createElementVNode("button", { + type: "button", + onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleReset && _ctx.handleReset(...args)) + }, vue.toDisplayString(_ctx.t("el.table.resetFilter")), 1) + ], 2) + ])) : (vue.openBlock(), vue.createElementBlock("ul", { + key: 1, + class: vue.normalizeClass(_ctx.ns.e("list")) + }, [ + vue.createElementVNode("li", { + class: vue.normalizeClass([ + _ctx.ns.e("list-item"), + { + [_ctx.ns.is("active")]: _ctx.filterValue === void 0 || _ctx.filterValue === null + } + ]), + onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleSelect(null)) + }, vue.toDisplayString(_ctx.t("el.table.clearFilter")), 3), + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => { + return vue.openBlock(), vue.createElementBlock("li", { + key: filter.value, + class: vue.normalizeClass([_ctx.ns.e("list-item"), _ctx.ns.is("active", _ctx.isActive(filter))]), + label: filter.value, + onClick: ($event) => _ctx.handleSelect(filter.value) + }, vue.toDisplayString(filter.text), 11, _hoisted_3$3); + }), 128)) + ], 2)) + ]), + default: vue.withCtx(() => [ + vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", { + class: vue.normalizeClass([ + `${_ctx.ns.namespace.value}-table__column-filter-trigger`, + `${_ctx.ns.namespace.value}-none-outline` + ]), + onClick: _cache[4] || (_cache[4] = (...args) => _ctx.showFilterPanel && _ctx.showFilterPanel(...args)) + }, [ + vue.createVNode(_component_el_icon, null, { + default: vue.withCtx(() => [ + _ctx.column.filterOpened ? (vue.openBlock(), vue.createBlock(_component_arrow_up, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_arrow_down, { key: 1 })) + ]), + _: 1 + }) + ], 2)), [ + [_directive_click_outside, _ctx.hideFilterPanel, _ctx.popperPaneRef] + ]) + ]), + _: 1 + }, 8, ["visible", "placement", "popper-class"]); + } + var FilterPanel = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$4], ["__file", "filter-panel.vue"]]); + + function useLayoutObserver(root) { + const instance = vue.getCurrentInstance(); + vue.onBeforeMount(() => { + tableLayout.value.addObserver(instance); + }); + vue.onMounted(() => { + onColumnsChange(tableLayout.value); + onScrollableChange(tableLayout.value); + }); + vue.onUpdated(() => { + onColumnsChange(tableLayout.value); + onScrollableChange(tableLayout.value); + }); + vue.onUnmounted(() => { + tableLayout.value.removeObserver(instance); + }); + const tableLayout = vue.computed(() => { + const layout = root.layout; + if (!layout) { + throw new Error("Can not find table layout."); + } + return layout; + }); + const onColumnsChange = (layout) => { + var _a; + const cols = ((_a = root.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col")) || []; + if (!cols.length) + return; + const flattenColumns = layout.getFlattenColumns(); + const columnsMap = {}; + flattenColumns.forEach((column) => { + columnsMap[column.id] = column; + }); + for (let i = 0, j = cols.length; i < j; i++) { + const col = cols[i]; + const name = col.getAttribute("name"); + const column = columnsMap[name]; + if (column) { + col.setAttribute("width", column.realWidth || column.width); + } + } + }; + const onScrollableChange = (layout) => { + var _a, _b; + const cols = ((_a = root.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col[name=gutter]")) || []; + for (let i = 0, j = cols.length; i < j; i++) { + const col = cols[i]; + col.setAttribute("width", layout.scrollY.value ? layout.gutterWidth : "0"); + } + const ths = ((_b = root.vnode.el) == null ? void 0 : _b.querySelectorAll("th.gutter")) || []; + for (let i = 0, j = ths.length; i < j; i++) { + const th = ths[i]; + th.style.width = layout.scrollY.value ? `${layout.gutterWidth}px` : "0"; + th.style.display = layout.scrollY.value ? "" : "none"; + } + }; + return { + tableLayout: tableLayout.value, + onColumnsChange, + onScrollableChange + }; + } + + const TABLE_INJECTION_KEY = Symbol("ElTable"); + + function useEvent(props, emit) { + const instance = vue.getCurrentInstance(); + const parent = vue.inject(TABLE_INJECTION_KEY); + const handleFilterClick = (event) => { + event.stopPropagation(); + return; + }; + const handleHeaderClick = (event, column) => { + if (!column.filters && column.sortable) { + handleSortClick(event, column, false); + } else if (column.filterable && !column.sortable) { + handleFilterClick(event); + } + parent == null ? void 0 : parent.emit("header-click", column, event); + }; + const handleHeaderContextMenu = (event, column) => { + parent == null ? void 0 : parent.emit("header-contextmenu", column, event); + }; + const draggingColumn = vue.ref(null); + const dragging = vue.ref(false); + const dragState = vue.ref({}); + const handleMouseDown = (event, column) => { + if (!isClient) + return; + if (column.children && column.children.length > 0) + return; + if (draggingColumn.value && props.border) { + dragging.value = true; + const table = parent; + emit("set-drag-visible", true); + const tableEl = table == null ? void 0 : table.vnode.el; + const tableLeft = tableEl.getBoundingClientRect().left; + const columnEl = instance.vnode.el.querySelector(`th.${column.id}`); + const columnRect = columnEl.getBoundingClientRect(); + const minLeft = columnRect.left - tableLeft + 30; + addClass(columnEl, "noclick"); + dragState.value = { + startMouseLeft: event.clientX, + startLeft: columnRect.right - tableLeft, + startColumnLeft: columnRect.left - tableLeft, + tableLeft + }; + const resizeProxy = table == null ? void 0 : table.refs.resizeProxy; + resizeProxy.style.left = `${dragState.value.startLeft}px`; + document.onselectstart = function() { + return false; + }; + document.ondragstart = function() { + return false; + }; + const handleMouseMove2 = (event2) => { + const deltaLeft = event2.clientX - dragState.value.startMouseLeft; + const proxyLeft = dragState.value.startLeft + deltaLeft; + resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`; + }; + const handleMouseUp = () => { + if (dragging.value) { + const { startColumnLeft, startLeft } = dragState.value; + const finalLeft = Number.parseInt(resizeProxy.style.left, 10); + const columnWidth = finalLeft - startColumnLeft; + column.width = column.realWidth = columnWidth; + table == null ? void 0 : table.emit("header-dragend", column.width, startLeft - startColumnLeft, column, event); + requestAnimationFrame(() => { + props.store.scheduleLayout(false, true); + }); + document.body.style.cursor = ""; + dragging.value = false; + draggingColumn.value = null; + dragState.value = {}; + emit("set-drag-visible", false); + } + document.removeEventListener("mousemove", handleMouseMove2); + document.removeEventListener("mouseup", handleMouseUp); + document.onselectstart = null; + document.ondragstart = null; + setTimeout(() => { + removeClass(columnEl, "noclick"); + }, 0); + }; + document.addEventListener("mousemove", handleMouseMove2); + document.addEventListener("mouseup", handleMouseUp); + } + }; + const handleMouseMove = (event, column) => { + var _a; + if (column.children && column.children.length > 0) + return; + const target = (_a = event.target) == null ? void 0 : _a.closest("th"); + if (!column || !column.resizable) + return; + if (!dragging.value && props.border) { + const rect = target.getBoundingClientRect(); + const bodyStyle = document.body.style; + if (rect.width > 12 && rect.right - event.pageX < 8) { + bodyStyle.cursor = "col-resize"; + if (hasClass(target, "is-sortable")) { + target.style.cursor = "col-resize"; + } + draggingColumn.value = column; + } else if (!dragging.value) { + bodyStyle.cursor = ""; + if (hasClass(target, "is-sortable")) { + target.style.cursor = "pointer"; + } + draggingColumn.value = null; + } + } + }; + const handleMouseOut = () => { + if (!isClient) + return; + document.body.style.cursor = ""; + }; + const toggleOrder = ({ order, sortOrders }) => { + if (order === "") + return sortOrders[0]; + const index = sortOrders.indexOf(order || null); + return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1]; + }; + const handleSortClick = (event, column, givenOrder) => { + var _a; + event.stopPropagation(); + const order = column.order === givenOrder ? null : givenOrder || toggleOrder(column); + const target = (_a = event.target) == null ? void 0 : _a.closest("th"); + if (target) { + if (hasClass(target, "noclick")) { + removeClass(target, "noclick"); + return; + } + } + if (!column.sortable) + return; + const states = props.store.states; + let sortProp = states.sortProp.value; + let sortOrder; + const sortingColumn = states.sortingColumn.value; + if (sortingColumn !== column || sortingColumn === column && sortingColumn.order === null) { + if (sortingColumn) { + sortingColumn.order = null; + } + states.sortingColumn.value = column; + sortProp = column.property; + } + if (!order) { + sortOrder = column.order = null; + } else { + sortOrder = column.order = order; + } + states.sortProp.value = sortProp; + states.sortOrder.value = sortOrder; + parent == null ? void 0 : parent.store.commit("changeSortCondition"); + }; + return { + handleHeaderClick, + handleHeaderContextMenu, + handleMouseDown, + handleMouseMove, + handleMouseOut, + handleSortClick, + handleFilterClick + }; + } + + function useStyle$2(props) { + const parent = vue.inject(TABLE_INJECTION_KEY); + const ns = useNamespace("table"); + const getHeaderRowStyle = (rowIndex) => { + const headerRowStyle = parent == null ? void 0 : parent.props.headerRowStyle; + if (typeof headerRowStyle === "function") { + return headerRowStyle.call(null, { rowIndex }); + } + return headerRowStyle; + }; + const getHeaderRowClass = (rowIndex) => { + const classes = []; + const headerRowClassName = parent == null ? void 0 : parent.props.headerRowClassName; + if (typeof headerRowClassName === "string") { + classes.push(headerRowClassName); + } else if (typeof headerRowClassName === "function") { + classes.push(headerRowClassName.call(null, { rowIndex })); + } + return classes.join(" "); + }; + const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => { + var _a; + let headerCellStyles = (_a = parent == null ? void 0 : parent.props.headerCellStyle) != null ? _a : {}; + if (typeof headerCellStyles === "function") { + headerCellStyles = headerCellStyles.call(null, { + rowIndex, + columnIndex, + row, + column + }); + } + const fixedStyle = getFixedColumnOffset(columnIndex, column.fixed, props.store, row); + ensurePosition(fixedStyle, "left"); + ensurePosition(fixedStyle, "right"); + return Object.assign({}, headerCellStyles, fixedStyle); + }; + const getHeaderCellClass = (rowIndex, columnIndex, row, column) => { + const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, column.fixed, props.store, row); + const classes = [ + column.id, + column.order, + column.headerAlign, + column.className, + column.labelClassName, + ...fixedClasses + ]; + if (!column.children) { + classes.push("is-leaf"); + } + if (column.sortable) { + classes.push("is-sortable"); + } + const headerCellClassName = parent == null ? void 0 : parent.props.headerCellClassName; + if (typeof headerCellClassName === "string") { + classes.push(headerCellClassName); + } else if (typeof headerCellClassName === "function") { + classes.push(headerCellClassName.call(null, { + rowIndex, + columnIndex, + row, + column + })); + } + classes.push(ns.e("cell")); + return classes.filter((className) => Boolean(className)).join(" "); + }; + return { + getHeaderRowStyle, + getHeaderRowClass, + getHeaderCellStyle, + getHeaderCellClass + }; + } + + const getAllColumns = (columns) => { + const result = []; + columns.forEach((column) => { + if (column.children) { + result.push(column); + result.push.apply(result, getAllColumns(column.children)); + } else { + result.push(column); + } + }); + return result; + }; + const convertToRows = (originColumns) => { + let maxLevel = 1; + const traverse = (column, parent) => { + if (parent) { + column.level = parent.level + 1; + if (maxLevel < column.level) { + maxLevel = column.level; + } + } + if (column.children) { + let colSpan = 0; + column.children.forEach((subColumn) => { + traverse(subColumn, column); + colSpan += subColumn.colSpan; + }); + column.colSpan = colSpan; + } else { + column.colSpan = 1; + } + }; + originColumns.forEach((column) => { + column.level = 1; + traverse(column, void 0); + }); + const rows = []; + for (let i = 0; i < maxLevel; i++) { + rows.push([]); + } + const allColumns = getAllColumns(originColumns); + allColumns.forEach((column) => { + if (!column.children) { + column.rowSpan = maxLevel - column.level + 1; + } else { + column.rowSpan = 1; + column.children.forEach((col) => col.isSubColumn = true); + } + rows[column.level - 1].push(column); + }); + return rows; + }; + function useUtils$1(props) { + const parent = vue.inject(TABLE_INJECTION_KEY); + const columnRows = vue.computed(() => { + return convertToRows(props.store.states.originColumns.value); + }); + const isGroup = vue.computed(() => { + const result = columnRows.value.length > 1; + if (result && parent) { + parent.state.isGroup.value = true; + } + return result; + }); + const toggleAllSelection = (event) => { + event.stopPropagation(); + parent == null ? void 0 : parent.store.commit("toggleAllSelection"); + }; + return { + isGroup, + toggleAllSelection, + columnRows + }; + } + + var TableHeader = vue.defineComponent({ + name: "ElTableHeader", + components: { + ElCheckbox + }, + props: { + fixed: { + type: String, + default: "" + }, + store: { + required: true, + type: Object + }, + border: Boolean, + defaultSort: { + type: Object, + default: () => { + return { + prop: "", + order: "" + }; + } + } + }, + setup(props, { emit }) { + const instance = vue.getCurrentInstance(); + const parent = vue.inject(TABLE_INJECTION_KEY); + const ns = useNamespace("table"); + const filterPanels = vue.ref({}); + const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent); + vue.onMounted(async () => { + await vue.nextTick(); + await vue.nextTick(); + const { prop, order } = props.defaultSort; + parent == null ? void 0 : parent.store.commit("sort", { prop, order, init: true }); + }); + const { + handleHeaderClick, + handleHeaderContextMenu, + handleMouseDown, + handleMouseMove, + handleMouseOut, + handleSortClick, + handleFilterClick + } = useEvent(props, emit); + const { + getHeaderRowStyle, + getHeaderRowClass, + getHeaderCellStyle, + getHeaderCellClass + } = useStyle$2(props); + const { isGroup, toggleAllSelection, columnRows } = useUtils$1(props); + instance.state = { + onColumnsChange, + onScrollableChange + }; + instance.filterPanels = filterPanels; + return { + ns, + filterPanels, + onColumnsChange, + onScrollableChange, + columnRows, + getHeaderRowClass, + getHeaderRowStyle, + getHeaderCellClass, + getHeaderCellStyle, + handleHeaderClick, + handleHeaderContextMenu, + handleMouseDown, + handleMouseMove, + handleMouseOut, + handleSortClick, + handleFilterClick, + isGroup, + toggleAllSelection + }; + }, + render() { + const { + ns, + isGroup, + columnRows, + getHeaderCellStyle, + getHeaderCellClass, + getHeaderRowClass, + getHeaderRowStyle, + handleHeaderClick, + handleHeaderContextMenu, + handleMouseDown, + handleMouseMove, + handleSortClick, + handleMouseOut, + store, + $parent + } = this; + let rowSpan = 1; + return vue.h("thead", { + class: { [ns.is("group")]: isGroup } + }, columnRows.map((subColumns, rowIndex) => vue.h("tr", { + class: getHeaderRowClass(rowIndex), + key: rowIndex, + style: getHeaderRowStyle(rowIndex) + }, subColumns.map((column, cellIndex) => { + if (column.rowSpan > rowSpan) { + rowSpan = column.rowSpan; + } + return vue.h("th", { + class: getHeaderCellClass(rowIndex, cellIndex, subColumns, column), + colspan: column.colSpan, + key: `${column.id}-thead`, + rowspan: column.rowSpan, + style: getHeaderCellStyle(rowIndex, cellIndex, subColumns, column), + onClick: ($event) => handleHeaderClick($event, column), + onContextmenu: ($event) => handleHeaderContextMenu($event, column), + onMousedown: ($event) => handleMouseDown($event, column), + onMousemove: ($event) => handleMouseMove($event, column), + onMouseout: handleMouseOut + }, [ + vue.h("div", { + class: [ + "cell", + column.filteredValue && column.filteredValue.length > 0 ? "highlight" : "" + ] + }, [ + column.renderHeader ? column.renderHeader({ + column, + $index: cellIndex, + store, + _self: $parent + }) : column.label, + column.sortable && vue.h("span", { + onClick: ($event) => handleSortClick($event, column), + class: "caret-wrapper" + }, [ + vue.h("i", { + onClick: ($event) => handleSortClick($event, column, "ascending"), + class: "sort-caret ascending" + }), + vue.h("i", { + onClick: ($event) => handleSortClick($event, column, "descending"), + class: "sort-caret descending" + }) + ]), + column.filterable && vue.h(FilterPanel, { + store, + placement: column.filterPlacement || "bottom-start", + column, + upDataColumn: (key, value) => { + column[key] = value; + } + }) + ]) + ]); + })))); + } + }); + + function useEvents(props) { + const parent = vue.inject(TABLE_INJECTION_KEY); + const tooltipContent = vue.ref(""); + const tooltipTrigger = vue.ref(vue.h("div")); + const { nextZIndex } = useZIndex(); + const handleEvent = (event, row, name) => { + var _a; + const table = parent; + const cell = getCell(event); + let column; + const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix; + if (cell) { + column = getColumnByCell({ + columns: props.store.states.columns.value + }, cell, namespace); + if (column) { + table == null ? void 0 : table.emit(`cell-${name}`, row, column, cell, event); + } + } + table == null ? void 0 : table.emit(`row-${name}`, row, column, event); + }; + const handleDoubleClick = (event, row) => { + handleEvent(event, row, "dblclick"); + }; + const handleClick = (event, row) => { + props.store.commit("setCurrentRow", row); + handleEvent(event, row, "click"); + }; + const handleContextMenu = (event, row) => { + handleEvent(event, row, "contextmenu"); + }; + const handleMouseEnter = debounce((index) => { + props.store.commit("setHoverRow", index); + }, 30); + const handleMouseLeave = debounce(() => { + props.store.commit("setHoverRow", null); + }, 30); + const handleCellMouseEnter = (event, row, tooltipOptions) => { + var _a; + const table = parent; + const cell = getCell(event); + const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix; + if (cell) { + const column = getColumnByCell({ + columns: props.store.states.columns.value + }, cell, namespace); + const hoverState = table.hoverState = { cell, column, row }; + table == null ? void 0 : table.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event); + } + if (!tooltipOptions) { + return; + } + const cellChild = event.target.querySelector(".cell"); + if (!(hasClass(cellChild, `${namespace}-tooltip`) && cellChild.childNodes.length)) { + return; + } + const range = document.createRange(); + range.setStart(cellChild, 0); + range.setEnd(cellChild, cellChild.childNodes.length); + const rangeWidth = Math.round(range.getBoundingClientRect().width); + const padding = (Number.parseInt(getStyle(cellChild, "paddingLeft"), 10) || 0) + (Number.parseInt(getStyle(cellChild, "paddingRight"), 10) || 0); + if (rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) { + createTablePopper(parent == null ? void 0 : parent.refs.tableWrapper, cell, cell.innerText || cell.textContent, nextZIndex, tooltipOptions); + } + }; + const handleCellMouseLeave = (event) => { + const cell = getCell(event); + if (!cell) + return; + const oldHoverState = parent == null ? void 0 : parent.hoverState; + parent == null ? void 0 : parent.emit("cell-mouse-leave", oldHoverState == null ? void 0 : oldHoverState.row, oldHoverState == null ? void 0 : oldHoverState.column, oldHoverState == null ? void 0 : oldHoverState.cell, event); + }; + return { + handleDoubleClick, + handleClick, + handleContextMenu, + handleMouseEnter, + handleMouseLeave, + handleCellMouseEnter, + handleCellMouseLeave, + tooltipContent, + tooltipTrigger + }; + } + + function useStyles$1(props) { + const parent = vue.inject(TABLE_INJECTION_KEY); + const ns = useNamespace("table"); + const getRowStyle = (row, rowIndex) => { + const rowStyle = parent == null ? void 0 : parent.props.rowStyle; + if (typeof rowStyle === "function") { + return rowStyle.call(null, { + row, + rowIndex + }); + } + return rowStyle || null; + }; + const getRowClass = (row, rowIndex) => { + const classes = [ns.e("row")]; + if ((parent == null ? void 0 : parent.props.highlightCurrentRow) && row === props.store.states.currentRow.value) { + classes.push("current-row"); + } + if (props.stripe && rowIndex % 2 === 1) { + classes.push(ns.em("row", "striped")); + } + const rowClassName = parent == null ? void 0 : parent.props.rowClassName; + if (typeof rowClassName === "string") { + classes.push(rowClassName); + } else if (typeof rowClassName === "function") { + classes.push(rowClassName.call(null, { + row, + rowIndex + })); + } + return classes; + }; + const getCellStyle = (rowIndex, columnIndex, row, column) => { + const cellStyle = parent == null ? void 0 : parent.props.cellStyle; + let cellStyles = cellStyle != null ? cellStyle : {}; + if (typeof cellStyle === "function") { + cellStyles = cellStyle.call(null, { + rowIndex, + columnIndex, + row, + column + }); + } + const fixedStyle = getFixedColumnOffset(columnIndex, props == null ? void 0 : props.fixed, props.store); + ensurePosition(fixedStyle, "left"); + ensurePosition(fixedStyle, "right"); + return Object.assign({}, cellStyles, fixedStyle); + }; + const getCellClass = (rowIndex, columnIndex, row, column, offset) => { + const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, props == null ? void 0 : props.fixed, props.store, void 0, offset); + const classes = [column.id, column.align, column.className, ...fixedClasses]; + const cellClassName = parent == null ? void 0 : parent.props.cellClassName; + if (typeof cellClassName === "string") { + classes.push(cellClassName); + } else if (typeof cellClassName === "function") { + classes.push(cellClassName.call(null, { + rowIndex, + columnIndex, + row, + column + })); + } + classes.push(ns.e("cell")); + return classes.filter((className) => Boolean(className)).join(" "); + }; + const getSpan = (row, column, rowIndex, columnIndex) => { + let rowspan = 1; + let colspan = 1; + const fn = parent == null ? void 0 : parent.props.spanMethod; + if (typeof fn === "function") { + const result = fn({ + row, + column, + rowIndex, + columnIndex + }); + if (Array.isArray(result)) { + rowspan = result[0]; + colspan = result[1]; + } else if (typeof result === "object") { + rowspan = result.rowspan; + colspan = result.colspan; + } + } + return { rowspan, colspan }; + }; + const getColspanRealWidth = (columns, colspan, index) => { + if (colspan < 1) { + return columns[index].realWidth; + } + const widthArr = columns.map(({ realWidth, width }) => realWidth || width).slice(index, index + colspan); + return Number(widthArr.reduce((acc, width) => Number(acc) + Number(width), -1)); + }; + return { + getRowStyle, + getRowClass, + getCellStyle, + getCellClass, + getSpan, + getColspanRealWidth + }; + } + + function useRender$1(props) { + const parent = vue.inject(TABLE_INJECTION_KEY); + const ns = useNamespace("table"); + const { + handleDoubleClick, + handleClick, + handleContextMenu, + handleMouseEnter, + handleMouseLeave, + handleCellMouseEnter, + handleCellMouseLeave, + tooltipContent, + tooltipTrigger + } = useEvents(props); + const { + getRowStyle, + getRowClass, + getCellStyle, + getCellClass, + getSpan, + getColspanRealWidth + } = useStyles$1(props); + const firstDefaultColumnIndex = vue.computed(() => { + return props.store.states.columns.value.findIndex(({ type }) => type === "default"); + }); + const getKeyOfRow = (row, index) => { + const rowKey = parent.props.rowKey; + if (rowKey) { + return getRowIdentity(row, rowKey); + } + return index; + }; + const rowRender = (row, $index, treeRowData, expanded = false) => { + const { tooltipEffect, tooltipOptions, store } = props; + const { indent, columns } = store.states; + const rowClasses = getRowClass(row, $index); + let display = true; + if (treeRowData) { + rowClasses.push(ns.em("row", `level-${treeRowData.level}`)); + display = treeRowData.display; + } + const displayStyle = display ? null : { + display: "none" + }; + return vue.h("tr", { + style: [displayStyle, getRowStyle(row, $index)], + class: rowClasses, + key: getKeyOfRow(row, $index), + onDblclick: ($event) => handleDoubleClick($event, row), + onClick: ($event) => handleClick($event, row), + onContextmenu: ($event) => handleContextMenu($event, row), + onMouseenter: () => handleMouseEnter($index), + onMouseleave: handleMouseLeave + }, columns.value.map((column, cellIndex) => { + const { rowspan, colspan } = getSpan(row, column, $index, cellIndex); + if (!rowspan || !colspan) { + return null; + } + const columnData = { ...column }; + columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex); + const data = { + store: props.store, + _self: props.context || parent, + column: columnData, + row, + $index, + cellIndex, + expanded + }; + if (cellIndex === firstDefaultColumnIndex.value && treeRowData) { + data.treeNode = { + indent: treeRowData.level * indent.value, + level: treeRowData.level + }; + if (typeof treeRowData.expanded === "boolean") { + data.treeNode.expanded = treeRowData.expanded; + if ("loading" in treeRowData) { + data.treeNode.loading = treeRowData.loading; + } + if ("noLazyChildren" in treeRowData) { + data.treeNode.noLazyChildren = treeRowData.noLazyChildren; + } + } + } + const baseKey = `${$index},${cellIndex}`; + const patchKey = columnData.columnKey || columnData.rawColumnKey || ""; + const tdChildren = cellChildren(cellIndex, column, data); + const mergedTooltipOptions = column.showOverflowTooltip && merge({ + effect: tooltipEffect + }, tooltipOptions, column.showOverflowTooltip); + return vue.h("td", { + style: getCellStyle($index, cellIndex, row, column), + class: getCellClass($index, cellIndex, row, column, colspan - 1), + key: `${patchKey}${baseKey}`, + rowspan, + colspan, + onMouseenter: ($event) => handleCellMouseEnter($event, row, mergedTooltipOptions), + onMouseleave: handleCellMouseLeave + }, [tdChildren]); + })); + }; + const cellChildren = (cellIndex, column, data) => { + return column.renderCell(data); + }; + const wrappedRowRender = (row, $index) => { + const store = props.store; + const { isRowExpanded, assertRowKey } = store; + const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states; + const columns = store.states.columns.value; + const hasExpandColumn = columns.some(({ type }) => type === "expand"); + if (hasExpandColumn) { + const expanded = isRowExpanded(row); + const tr = rowRender(row, $index, void 0, expanded); + const renderExpanded = parent.renderExpanded; + if (expanded) { + if (!renderExpanded) { + console.error("[Element Error]renderExpanded is required."); + return tr; + } + return [ + [ + tr, + vue.h("tr", { + key: `expanded-row__${tr.key}` + }, [ + vue.h("td", { + colspan: columns.length, + class: `${ns.e("cell")} ${ns.e("expanded-cell")}` + }, [renderExpanded({ row, $index, store, expanded })]) + ]) + ] + ]; + } else { + return [[tr]]; + } + } else if (Object.keys(treeData.value).length) { + assertRowKey(); + const key = getRowIdentity(row, rowKey.value); + let cur = treeData.value[key]; + let treeRowData = null; + if (cur) { + treeRowData = { + expanded: cur.expanded, + level: cur.level, + display: true + }; + if (typeof cur.lazy === "boolean") { + if (typeof cur.loaded === "boolean" && cur.loaded) { + treeRowData.noLazyChildren = !(cur.children && cur.children.length); + } + treeRowData.loading = cur.loading; + } + } + const tmp = [rowRender(row, $index, treeRowData)]; + if (cur) { + let i = 0; + const traverse = (children, parent2) => { + if (!(children && children.length && parent2)) + return; + children.forEach((node) => { + const innerTreeRowData = { + display: parent2.display && parent2.expanded, + level: parent2.level + 1, + expanded: false, + noLazyChildren: false, + loading: false + }; + const childKey = getRowIdentity(node, rowKey.value); + if (childKey === void 0 || childKey === null) { + throw new Error("For nested data item, row-key is required."); + } + cur = { ...treeData.value[childKey] }; + if (cur) { + innerTreeRowData.expanded = cur.expanded; + cur.level = cur.level || innerTreeRowData.level; + cur.display = !!(cur.expanded && innerTreeRowData.display); + if (typeof cur.lazy === "boolean") { + if (typeof cur.loaded === "boolean" && cur.loaded) { + innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length); + } + innerTreeRowData.loading = cur.loading; + } + } + i++; + tmp.push(rowRender(node, $index + i, innerTreeRowData)); + if (cur) { + const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value]; + traverse(nodes2, cur); + } + }); + }; + cur.display = true; + const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value]; + traverse(nodes, cur); + } + return tmp; + } else { + return rowRender(row, $index, void 0); + } + }; + return { + wrappedRowRender, + tooltipContent, + tooltipTrigger + }; + } + + const defaultProps$2 = { + store: { + required: true, + type: Object + }, + stripe: Boolean, + tooltipEffect: String, + tooltipOptions: { + type: Object + }, + context: { + default: () => ({}), + type: Object + }, + rowClassName: [String, Function], + rowStyle: [Object, Function], + fixed: { + type: String, + default: "" + }, + highlight: Boolean + }; + var defaultProps$3 = defaultProps$2; + + var TableBody = vue.defineComponent({ + name: "ElTableBody", + props: defaultProps$3, + setup(props) { + const instance = vue.getCurrentInstance(); + const parent = vue.inject(TABLE_INJECTION_KEY); + const ns = useNamespace("table"); + const { wrappedRowRender, tooltipContent, tooltipTrigger } = useRender$1(props); + const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent); + vue.watch(props.store.states.hoverRow, (newVal, oldVal) => { + if (!props.store.states.isComplex.value || !isClient) + return; + let raf = window.requestAnimationFrame; + if (!raf) { + raf = (fn) => window.setTimeout(fn, 16); + } + raf(() => { + const el = instance == null ? void 0 : instance.vnode.el; + const rows = Array.from((el == null ? void 0 : el.children) || []).filter((e) => e == null ? void 0 : e.classList.contains(`${ns.e("row")}`)); + const oldRow = rows[oldVal]; + const newRow = rows[newVal]; + if (oldRow) { + removeClass(oldRow, "hover-row"); + } + if (newRow) { + addClass(newRow, "hover-row"); + } + }); + }); + vue.onUnmounted(() => { + var _a; + (_a = removePopper) == null ? void 0 : _a(); + }); + return { + ns, + onColumnsChange, + onScrollableChange, + wrappedRowRender, + tooltipContent, + tooltipTrigger + }; + }, + render() { + const { wrappedRowRender, store } = this; + const data = store.states.data.value || []; + return vue.h("tbody", {}, [ + data.reduce((acc, row) => { + return acc.concat(wrappedRowRender(row, acc.length)); + }, []) + ]); + } + }); + + function hColgroup(props) { + const isAuto = props.tableLayout === "auto"; + let columns = props.columns || []; + if (isAuto) { + if (columns.every((column) => column.width === void 0)) { + columns = []; + } + } + const getPropsData = (column) => { + const propsData = { + key: `${props.tableLayout}_${column.id}`, + style: {}, + name: void 0 + }; + if (isAuto) { + propsData.style = { + width: `${column.width}px` + }; + } else { + propsData.name = column.id; + } + return propsData; + }; + return vue.h("colgroup", {}, columns.map((column) => vue.h("col", getPropsData(column)))); + } + hColgroup.props = ["columns", "tableLayout"]; + + function useMapState() { + const table = vue.inject(TABLE_INJECTION_KEY); + const store = table == null ? void 0 : table.store; + const leftFixedLeafCount = vue.computed(() => { + return store.states.fixedLeafColumnsLength.value; + }); + const rightFixedLeafCount = vue.computed(() => { + return store.states.rightFixedColumns.value.length; + }); + const columnsCount = vue.computed(() => { + return store.states.columns.value.length; + }); + const leftFixedCount = vue.computed(() => { + return store.states.fixedColumns.value.length; + }); + const rightFixedCount = vue.computed(() => { + return store.states.rightFixedColumns.value.length; + }); + return { + leftFixedLeafCount, + rightFixedLeafCount, + columnsCount, + leftFixedCount, + rightFixedCount, + columns: store.states.columns + }; + } + + function useStyle$1(props) { + const { columns } = useMapState(); + const ns = useNamespace("table"); + const getCellClasses = (columns2, cellIndex) => { + const column = columns2[cellIndex]; + const classes = [ + ns.e("cell"), + column.id, + column.align, + column.labelClassName, + ...getFixedColumnsClass(ns.b(), cellIndex, column.fixed, props.store) + ]; + if (column.className) { + classes.push(column.className); + } + if (!column.children) { + classes.push(ns.is("leaf")); + } + return classes; + }; + const getCellStyles = (column, cellIndex) => { + const fixedStyle = getFixedColumnOffset(cellIndex, column.fixed, props.store); + ensurePosition(fixedStyle, "left"); + ensurePosition(fixedStyle, "right"); + return fixedStyle; + }; + return { + getCellClasses, + getCellStyles, + columns + }; + } + + var TableFooter = vue.defineComponent({ + name: "ElTableFooter", + props: { + fixed: { + type: String, + default: "" + }, + store: { + required: true, + type: Object + }, + summaryMethod: Function, + sumText: String, + border: Boolean, + defaultSort: { + type: Object, + default: () => { + return { + prop: "", + order: "" + }; + } + } + }, + setup(props) { + const { getCellClasses, getCellStyles, columns } = useStyle$1(props); + const ns = useNamespace("table"); + return { + ns, + getCellClasses, + getCellStyles, + columns + }; + }, + render() { + const { + columns, + getCellStyles, + getCellClasses, + summaryMethod, + sumText, + ns + } = this; + const data = this.store.states.data.value; + let sums = []; + if (summaryMethod) { + sums = summaryMethod({ + columns, + data + }); + } else { + columns.forEach((column, index) => { + if (index === 0) { + sums[index] = sumText; + return; + } + const values = data.map((item) => Number(item[column.property])); + const precisions = []; + let notNumber = true; + values.forEach((value) => { + if (!Number.isNaN(+value)) { + notNumber = false; + const decimal = `${value}`.split(".")[1]; + precisions.push(decimal ? decimal.length : 0); + } + }); + const precision = Math.max.apply(null, precisions); + if (!notNumber) { + sums[index] = values.reduce((prev, curr) => { + const value = Number(curr); + if (!Number.isNaN(+value)) { + return Number.parseFloat((prev + curr).toFixed(Math.min(precision, 20))); + } else { + return prev; + } + }, 0); + } else { + sums[index] = ""; + } + }); + } + return vue.h("table", { + class: ns.e("footer"), + cellspacing: "0", + cellpadding: "0", + border: "0" + }, [ + hColgroup({ + columns + }), + vue.h("tbody", [ + vue.h("tr", {}, [ + ...columns.map((column, cellIndex) => vue.h("td", { + key: cellIndex, + colspan: column.colSpan, + rowspan: column.rowSpan, + class: getCellClasses(columns, cellIndex), + style: getCellStyles(column, cellIndex) + }, [ + vue.h("div", { + class: ["cell", column.labelClassName] + }, [sums[cellIndex]]) + ])) + ]) + ]) + ]); + } + }); + + function useUtils(store) { + const setCurrentRow = (row) => { + store.commit("setCurrentRow", row); + }; + const getSelectionRows = () => { + return store.getSelectionRows(); + }; + const toggleRowSelection = (row, selected) => { + store.toggleRowSelection(row, selected, false); + store.updateAllSelected(); + }; + const clearSelection = () => { + store.clearSelection(); + }; + const clearFilter = (columnKeys) => { + store.clearFilter(columnKeys); + }; + const toggleAllSelection = () => { + store.commit("toggleAllSelection"); + }; + const toggleRowExpansion = (row, expanded) => { + store.toggleRowExpansionAdapter(row, expanded); + }; + const clearSort = () => { + store.clearSort(); + }; + const sort = (prop, order) => { + store.commit("sort", { prop, order }); + }; + return { + setCurrentRow, + getSelectionRows, + toggleRowSelection, + clearSelection, + clearFilter, + toggleAllSelection, + toggleRowExpansion, + clearSort, + sort + }; + } + + function useStyle(props, layout, store, table) { + const isHidden = vue.ref(false); + const renderExpanded = vue.ref(null); + const resizeProxyVisible = vue.ref(false); + const setDragVisible = (visible) => { + resizeProxyVisible.value = visible; + }; + const resizeState = vue.ref({ + width: null, + height: null, + headerHeight: null + }); + const isGroup = vue.ref(false); + const scrollbarViewStyle = { + display: "inline-block", + verticalAlign: "middle" + }; + const tableWidth = vue.ref(); + const tableScrollHeight = vue.ref(0); + const bodyScrollHeight = vue.ref(0); + const headerScrollHeight = vue.ref(0); + const footerScrollHeight = vue.ref(0); + vue.watchEffect(() => { + layout.setHeight(props.height); + }); + vue.watchEffect(() => { + layout.setMaxHeight(props.maxHeight); + }); + vue.watch(() => [props.currentRowKey, store.states.rowKey], ([currentRowKey, rowKey]) => { + if (!vue.unref(rowKey) || !vue.unref(currentRowKey)) + return; + store.setCurrentRowKey(`${currentRowKey}`); + }, { + immediate: true + }); + vue.watch(() => props.data, (data) => { + table.store.commit("setData", data); + }, { + immediate: true, + deep: true + }); + vue.watchEffect(() => { + if (props.expandRowKeys) { + store.setExpandRowKeysAdapter(props.expandRowKeys); + } + }); + const handleMouseLeave = () => { + table.store.commit("setHoverRow", null); + if (table.hoverState) + table.hoverState = null; + }; + const handleHeaderFooterMousewheel = (event, data) => { + const { pixelX, pixelY } = data; + if (Math.abs(pixelX) >= Math.abs(pixelY)) { + table.refs.bodyWrapper.scrollLeft += data.pixelX / 5; + } + }; + const shouldUpdateHeight = vue.computed(() => { + return props.height || props.maxHeight || store.states.fixedColumns.value.length > 0 || store.states.rightFixedColumns.value.length > 0; + }); + const tableBodyStyles = vue.computed(() => { + return { + width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : "" + }; + }); + const doLayout = () => { + if (shouldUpdateHeight.value) { + layout.updateElsHeight(); + } + layout.updateColumnsWidth(); + requestAnimationFrame(syncPosition); + }; + vue.onMounted(async () => { + await vue.nextTick(); + store.updateColumns(); + bindEvents(); + requestAnimationFrame(doLayout); + const el = table.vnode.el; + const tableHeader = table.refs.headerWrapper; + if (props.flexible && el && el.parentElement) { + el.parentElement.style.minWidth = "0"; + } + resizeState.value = { + width: tableWidth.value = el.offsetWidth, + height: el.offsetHeight, + headerHeight: props.showHeader && tableHeader ? tableHeader.offsetHeight : null + }; + store.states.columns.value.forEach((column) => { + if (column.filteredValue && column.filteredValue.length) { + table.store.commit("filterChange", { + column, + values: column.filteredValue, + silent: true + }); + } + }); + table.$ready = true; + }); + const setScrollClassByEl = (el, className) => { + if (!el) + return; + const classList = Array.from(el.classList).filter((item) => !item.startsWith("is-scrolling-")); + classList.push(layout.scrollX.value ? className : "is-scrolling-none"); + el.className = classList.join(" "); + }; + const setScrollClass = (className) => { + const { tableWrapper } = table.refs; + setScrollClassByEl(tableWrapper, className); + }; + const hasScrollClass = (className) => { + const { tableWrapper } = table.refs; + return !!(tableWrapper && tableWrapper.classList.contains(className)); + }; + const syncPosition = function() { + if (!table.refs.scrollBarRef) + return; + if (!layout.scrollX.value) { + const scrollingNoneClass = "is-scrolling-none"; + if (!hasScrollClass(scrollingNoneClass)) { + setScrollClass(scrollingNoneClass); + } + return; + } + const scrollContainer = table.refs.scrollBarRef.wrapRef; + if (!scrollContainer) + return; + const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer; + const { headerWrapper, footerWrapper } = table.refs; + if (headerWrapper) + headerWrapper.scrollLeft = scrollLeft; + if (footerWrapper) + footerWrapper.scrollLeft = scrollLeft; + const maxScrollLeftPosition = scrollWidth - offsetWidth - 1; + if (scrollLeft >= maxScrollLeftPosition) { + setScrollClass("is-scrolling-right"); + } else if (scrollLeft === 0) { + setScrollClass("is-scrolling-left"); + } else { + setScrollClass("is-scrolling-middle"); + } + }; + const bindEvents = () => { + if (!table.refs.scrollBarRef) + return; + if (table.refs.scrollBarRef.wrapRef) { + useEventListener(table.refs.scrollBarRef.wrapRef, "scroll", syncPosition, { + passive: true + }); + } + if (props.fit) { + useResizeObserver(table.vnode.el, resizeListener); + } else { + useEventListener(window, "resize", resizeListener); + } + useResizeObserver(table.refs.bodyWrapper, () => { + var _a, _b; + resizeListener(); + (_b = (_a = table.refs) == null ? void 0 : _a.scrollBarRef) == null ? void 0 : _b.update(); + }); + }; + const resizeListener = () => { + var _a, _b, _c; + const el = table.vnode.el; + if (!table.$ready || !el) + return; + let shouldUpdateLayout = false; + const { + width: oldWidth, + height: oldHeight, + headerHeight: oldHeaderHeight + } = resizeState.value; + const width = tableWidth.value = el.offsetWidth; + if (oldWidth !== width) { + shouldUpdateLayout = true; + } + const height = el.offsetHeight; + if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) { + shouldUpdateLayout = true; + } + const tableHeader = props.tableLayout === "fixed" ? table.refs.headerWrapper : (_a = table.refs.tableHeaderRef) == null ? void 0 : _a.$el; + if (props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) !== oldHeaderHeight) { + shouldUpdateLayout = true; + } + tableScrollHeight.value = ((_b = table.refs.tableWrapper) == null ? void 0 : _b.scrollHeight) || 0; + headerScrollHeight.value = (tableHeader == null ? void 0 : tableHeader.scrollHeight) || 0; + footerScrollHeight.value = ((_c = table.refs.footerWrapper) == null ? void 0 : _c.offsetHeight) || 0; + bodyScrollHeight.value = tableScrollHeight.value - headerScrollHeight.value - footerScrollHeight.value; + if (shouldUpdateLayout) { + resizeState.value = { + width, + height, + headerHeight: props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) || 0 + }; + doLayout(); + } + }; + const tableSize = useFormSize(); + const bodyWidth = vue.computed(() => { + const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout; + return bodyWidth_.value ? `${bodyWidth_.value - (scrollY.value ? gutterWidth : 0)}px` : ""; + }); + const tableLayout = vue.computed(() => { + if (props.maxHeight) + return "fixed"; + return props.tableLayout; + }); + const emptyBlockStyle = vue.computed(() => { + if (props.data && props.data.length) + return null; + let height = "100%"; + if (props.height && bodyScrollHeight.value) { + height = `${bodyScrollHeight.value}px`; + } + const width = tableWidth.value; + return { + width: width ? `${width}px` : "", + height + }; + }); + const tableInnerStyle = vue.computed(() => { + if (props.height) { + return { + height: !Number.isNaN(Number(props.height)) ? `${props.height}px` : props.height + }; + } + if (props.maxHeight) { + return { + maxHeight: !Number.isNaN(Number(props.maxHeight)) ? `${props.maxHeight}px` : props.maxHeight + }; + } + return {}; + }); + const scrollbarStyle = vue.computed(() => { + if (props.height) { + return { + height: "100%" + }; + } + if (props.maxHeight) { + if (!Number.isNaN(Number(props.maxHeight))) { + const maxHeight = props.maxHeight; + const reachMaxHeight = tableScrollHeight.value >= Number(maxHeight); + if (reachMaxHeight) { + return { + maxHeight: `${tableScrollHeight.value - headerScrollHeight.value - footerScrollHeight.value}px` + }; + } + } else { + return { + maxHeight: `calc(${props.maxHeight} - ${headerScrollHeight.value + footerScrollHeight.value}px)` + }; + } + } + return {}; + }); + const handleFixedMousewheel = (event, data) => { + const bodyWrapper = table.refs.bodyWrapper; + if (Math.abs(data.spinY) > 0) { + const currentScrollTop = bodyWrapper.scrollTop; + if (data.pixelY < 0 && currentScrollTop !== 0) { + event.preventDefault(); + } + if (data.pixelY > 0 && bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop) { + event.preventDefault(); + } + bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5); + } else { + bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5); + } + }; + return { + isHidden, + renderExpanded, + setDragVisible, + isGroup, + handleMouseLeave, + handleHeaderFooterMousewheel, + tableSize, + emptyBlockStyle, + handleFixedMousewheel, + resizeProxyVisible, + bodyWidth, + resizeState, + doLayout, + tableBodyStyles, + tableLayout, + scrollbarViewStyle, + tableInnerStyle, + scrollbarStyle + }; + } + + function useKeyRender(table) { + const observer = vue.ref(); + const initWatchDom = () => { + const el = table.vnode.el; + const columnsWrapper = el.querySelector(".hidden-columns"); + const config = { childList: true, subtree: true }; + const updateOrderFns = table.store.states.updateOrderFns; + observer.value = new MutationObserver(() => { + updateOrderFns.forEach((fn) => fn()); + }); + observer.value.observe(columnsWrapper, config); + }; + vue.onMounted(() => { + initWatchDom(); + }); + vue.onUnmounted(() => { + var _a; + (_a = observer.value) == null ? void 0 : _a.disconnect(); + }); + } + + var defaultProps$1 = { + data: { + type: Array, + default: () => [] + }, + size: useSizeProp, + width: [String, Number], + height: [String, Number], + maxHeight: [String, Number], + fit: { + type: Boolean, + default: true + }, + stripe: Boolean, + border: Boolean, + rowKey: [String, Function], + showHeader: { + type: Boolean, + default: true + }, + showSummary: Boolean, + sumText: String, + summaryMethod: Function, + rowClassName: [String, Function], + rowStyle: [Object, Function], + cellClassName: [String, Function], + cellStyle: [Object, Function], + headerRowClassName: [String, Function], + headerRowStyle: [Object, Function], + headerCellClassName: [String, Function], + headerCellStyle: [Object, Function], + highlightCurrentRow: Boolean, + currentRowKey: [String, Number], + emptyText: String, + expandRowKeys: Array, + defaultExpandAll: Boolean, + defaultSort: Object, + tooltipEffect: String, + tooltipOptions: Object, + spanMethod: Function, + selectOnIndeterminate: { + type: Boolean, + default: true + }, + indent: { + type: Number, + default: 16 + }, + treeProps: { + type: Object, + default: () => { + return { + hasChildren: "hasChildren", + children: "children" + }; + } + }, + lazy: Boolean, + load: Function, + style: { + type: Object, + default: () => ({}) + }, + className: { + type: String, + default: "" + }, + tableLayout: { + type: String, + default: "fixed" + }, + scrollbarAlwaysOn: { + type: Boolean, + default: false + }, + flexible: Boolean + }; + + const useScrollbar$1 = () => { + const scrollBarRef = vue.ref(); + const scrollTo = (options, yCoord) => { + const scrollbar = scrollBarRef.value; + if (scrollbar) { + scrollbar.scrollTo(options, yCoord); + } + }; + const setScrollPosition = (position, offset) => { + const scrollbar = scrollBarRef.value; + if (scrollbar && isNumber$1(offset) && ["Top", "Left"].includes(position)) { + scrollbar[`setScroll${position}`](offset); + } + }; + const setScrollTop = (top) => setScrollPosition("Top", top); + const setScrollLeft = (left) => setScrollPosition("Left", left); + return { + scrollBarRef, + scrollTo, + setScrollTop, + setScrollLeft + }; + }; + + let tableIdSeed = 1; + const _sfc_main$q = vue.defineComponent({ + name: "ElTable", + directives: { + Mousewheel + }, + components: { + TableHeader, + TableBody, + TableFooter, + ElScrollbar, + hColgroup + }, + props: defaultProps$1, + emits: [ + "select", + "select-all", + "selection-change", + "cell-mouse-enter", + "cell-mouse-leave", + "cell-contextmenu", + "cell-click", + "cell-dblclick", + "row-click", + "row-contextmenu", + "row-dblclick", + "header-click", + "header-contextmenu", + "sort-change", + "filter-change", + "current-change", + "header-dragend", + "expand-change" + ], + setup(props) { + const { t } = useLocale(); + const ns = useNamespace("table"); + const table = vue.getCurrentInstance(); + vue.provide(TABLE_INJECTION_KEY, table); + const store = createStore(table, props); + table.store = store; + const layout = new TableLayout$1({ + store: table.store, + table, + fit: props.fit, + showHeader: props.showHeader + }); + table.layout = layout; + const isEmpty = vue.computed(() => (store.states.data.value || []).length === 0); + const { + setCurrentRow, + getSelectionRows, + toggleRowSelection, + clearSelection, + clearFilter, + toggleAllSelection, + toggleRowExpansion, + clearSort, + sort + } = useUtils(store); + const { + isHidden, + renderExpanded, + setDragVisible, + isGroup, + handleMouseLeave, + handleHeaderFooterMousewheel, + tableSize, + emptyBlockStyle, + handleFixedMousewheel, + resizeProxyVisible, + bodyWidth, + resizeState, + doLayout, + tableBodyStyles, + tableLayout, + scrollbarViewStyle, + tableInnerStyle, + scrollbarStyle + } = useStyle(props, layout, store, table); + const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar$1(); + const debouncedUpdateLayout = debounce(doLayout, 50); + const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`; + table.tableId = tableId; + table.state = { + isGroup, + resizeState, + doLayout, + debouncedUpdateLayout + }; + const computedSumText = vue.computed(() => props.sumText || t("el.table.sumText")); + const computedEmptyText = vue.computed(() => { + return props.emptyText || t("el.table.emptyText"); + }); + useKeyRender(table); + return { + ns, + layout, + store, + handleHeaderFooterMousewheel, + handleMouseLeave, + tableId, + tableSize, + isHidden, + isEmpty, + renderExpanded, + resizeProxyVisible, + resizeState, + isGroup, + bodyWidth, + tableBodyStyles, + emptyBlockStyle, + debouncedUpdateLayout, + handleFixedMousewheel, + setCurrentRow, + getSelectionRows, + toggleRowSelection, + clearSelection, + clearFilter, + toggleAllSelection, + toggleRowExpansion, + clearSort, + doLayout, + sort, + t, + setDragVisible, + context: table, + computedSumText, + computedEmptyText, + tableLayout, + scrollbarViewStyle, + tableInnerStyle, + scrollbarStyle, + scrollBarRef, + scrollTo, + setScrollLeft, + setScrollTop + }; + } + }); + const _hoisted_1$b = ["data-prefix"]; + const _hoisted_2$7 = { + ref: "hiddenColumns", + class: "hidden-columns" + }; + function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) { + const _component_hColgroup = vue.resolveComponent("hColgroup"); + const _component_table_header = vue.resolveComponent("table-header"); + const _component_table_body = vue.resolveComponent("table-body"); + const _component_el_scrollbar = vue.resolveComponent("el-scrollbar"); + const _component_table_footer = vue.resolveComponent("table-footer"); + const _directive_mousewheel = vue.resolveDirective("mousewheel"); + return vue.openBlock(), vue.createElementBlock("div", { + ref: "tableWrapper", + class: vue.normalizeClass([ + { + [_ctx.ns.m("fit")]: _ctx.fit, + [_ctx.ns.m("striped")]: _ctx.stripe, + [_ctx.ns.m("border")]: _ctx.border || _ctx.isGroup, + [_ctx.ns.m("hidden")]: _ctx.isHidden, + [_ctx.ns.m("group")]: _ctx.isGroup, + [_ctx.ns.m("fluid-height")]: _ctx.maxHeight, + [_ctx.ns.m("scrollable-x")]: _ctx.layout.scrollX.value, + [_ctx.ns.m("scrollable-y")]: _ctx.layout.scrollY.value, + [_ctx.ns.m("enable-row-hover")]: !_ctx.store.states.isComplex.value, + [_ctx.ns.m("enable-row-transition")]: (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100, + "has-footer": _ctx.showSummary + }, + _ctx.ns.m(_ctx.tableSize), + _ctx.className, + _ctx.ns.b(), + _ctx.ns.m(`layout-${_ctx.tableLayout}`) + ]), + style: vue.normalizeStyle(_ctx.style), + "data-prefix": _ctx.ns.namespace.value, + onMouseleave: _cache[0] || (_cache[0] = ($event) => _ctx.handleMouseLeave()) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("inner-wrapper")), + style: vue.normalizeStyle(_ctx.tableInnerStyle) + }, [ + vue.createElementVNode("div", _hoisted_2$7, [ + vue.renderSlot(_ctx.$slots, "default") + ], 512), + _ctx.showHeader && _ctx.tableLayout === "fixed" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { + key: 0, + ref: "headerWrapper", + class: vue.normalizeClass(_ctx.ns.e("header-wrapper")) + }, [ + vue.createElementVNode("table", { + ref: "tableHeader", + class: vue.normalizeClass(_ctx.ns.e("header")), + style: vue.normalizeStyle(_ctx.tableBodyStyles), + border: "0", + cellpadding: "0", + cellspacing: "0" + }, [ + vue.createVNode(_component_hColgroup, { + columns: _ctx.store.states.columns.value, + "table-layout": _ctx.tableLayout + }, null, 8, ["columns", "table-layout"]), + vue.createVNode(_component_table_header, { + ref: "tableHeaderRef", + border: _ctx.border, + "default-sort": _ctx.defaultSort, + store: _ctx.store, + onSetDragVisible: _ctx.setDragVisible + }, null, 8, ["border", "default-sort", "store", "onSetDragVisible"]) + ], 6) + ], 2)), [ + [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel] + ]) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + ref: "bodyWrapper", + class: vue.normalizeClass(_ctx.ns.e("body-wrapper")) + }, [ + vue.createVNode(_component_el_scrollbar, { + ref: "scrollBarRef", + "view-style": _ctx.scrollbarViewStyle, + "wrap-style": _ctx.scrollbarStyle, + always: _ctx.scrollbarAlwaysOn + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("table", { + ref: "tableBody", + class: vue.normalizeClass(_ctx.ns.e("body")), + cellspacing: "0", + cellpadding: "0", + border: "0", + style: vue.normalizeStyle({ + width: _ctx.bodyWidth, + tableLayout: _ctx.tableLayout + }) + }, [ + vue.createVNode(_component_hColgroup, { + columns: _ctx.store.states.columns.value, + "table-layout": _ctx.tableLayout + }, null, 8, ["columns", "table-layout"]), + _ctx.showHeader && _ctx.tableLayout === "auto" ? (vue.openBlock(), vue.createBlock(_component_table_header, { + key: 0, + ref: "tableHeaderRef", + border: _ctx.border, + "default-sort": _ctx.defaultSort, + store: _ctx.store, + onSetDragVisible: _ctx.setDragVisible + }, null, 8, ["border", "default-sort", "store", "onSetDragVisible"])) : vue.createCommentVNode("v-if", true), + vue.createVNode(_component_table_body, { + context: _ctx.context, + highlight: _ctx.highlightCurrentRow, + "row-class-name": _ctx.rowClassName, + "tooltip-effect": _ctx.tooltipEffect, + "tooltip-options": _ctx.tooltipOptions, + "row-style": _ctx.rowStyle, + store: _ctx.store, + stripe: _ctx.stripe + }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "tooltip-options", "row-style", "store", "stripe"]) + ], 6), + _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + ref: "emptyBlock", + style: vue.normalizeStyle(_ctx.emptyBlockStyle), + class: vue.normalizeClass(_ctx.ns.e("empty-block")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.ns.e("empty-text")) + }, [ + vue.renderSlot(_ctx.$slots, "empty", {}, () => [ + vue.createTextVNode(vue.toDisplayString(_ctx.computedEmptyText), 1) + ]) + ], 2) + ], 6)) : vue.createCommentVNode("v-if", true), + _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + ref: "appendWrapper", + class: vue.normalizeClass(_ctx.ns.e("append-wrapper")) + }, [ + vue.renderSlot(_ctx.$slots, "append") + ], 2)) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 8, ["view-style", "wrap-style", "always"]) + ], 2), + _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { + key: 1, + ref: "footerWrapper", + class: vue.normalizeClass(_ctx.ns.e("footer-wrapper")) + }, [ + vue.createVNode(_component_table_footer, { + border: _ctx.border, + "default-sort": _ctx.defaultSort, + store: _ctx.store, + style: vue.normalizeStyle(_ctx.tableBodyStyles), + "sum-text": _ctx.computedSumText, + "summary-method": _ctx.summaryMethod + }, null, 8, ["border", "default-sort", "store", "style", "sum-text", "summary-method"]) + ], 2)), [ + [vue.vShow, !_ctx.isEmpty], + [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel] + ]) : vue.createCommentVNode("v-if", true), + _ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", { + key: 2, + class: vue.normalizeClass(_ctx.ns.e("border-left-patch")) + }, null, 2)) : vue.createCommentVNode("v-if", true) + ], 6), + vue.withDirectives(vue.createElementVNode("div", { + ref: "resizeProxy", + class: vue.normalizeClass(_ctx.ns.e("column-resize-proxy")) + }, null, 2), [ + [vue.vShow, _ctx.resizeProxyVisible] + ]) + ], 46, _hoisted_1$b); + } + var Table = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$3], ["__file", "table.vue"]]); + + const defaultClassNames = { + selection: "table-column--selection", + expand: "table__expand-column" + }; + const cellStarts = { + default: { + order: "" + }, + selection: { + width: 48, + minWidth: 48, + realWidth: 48, + order: "" + }, + expand: { + width: 48, + minWidth: 48, + realWidth: 48, + order: "" + }, + index: { + width: 48, + minWidth: 48, + realWidth: 48, + order: "" + } + }; + const getDefaultClassName = (type) => { + return defaultClassNames[type] || ""; + }; + const cellForced = { + selection: { + renderHeader({ store }) { + function isDisabled() { + return store.states.data.value && store.states.data.value.length === 0; + } + return vue.h(ElCheckbox, { + disabled: isDisabled(), + size: store.states.tableSize.value, + indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value, + "onUpdate:modelValue": store.toggleAllSelection, + modelValue: store.states.isAllSelected.value + }); + }, + renderCell({ + row, + column, + store, + $index + }) { + return vue.h(ElCheckbox, { + disabled: column.selectable ? !column.selectable.call(null, row, $index) : false, + size: store.states.tableSize.value, + onChange: () => { + store.commit("rowSelectedChanged", row); + }, + onClick: (event) => event.stopPropagation(), + modelValue: store.isSelected(row) + }); + }, + sortable: false, + resizable: false + }, + index: { + renderHeader({ column }) { + return column.label || "#"; + }, + renderCell({ + column, + $index + }) { + let i = $index + 1; + const index = column.index; + if (typeof index === "number") { + i = $index + index; + } else if (typeof index === "function") { + i = index($index); + } + return vue.h("div", {}, [i]); + }, + sortable: false + }, + expand: { + renderHeader({ column }) { + return column.label || ""; + }, + renderCell({ + row, + store, + expanded + }) { + const { ns } = store; + const classes = [ns.e("expand-icon")]; + if (expanded) { + classes.push(ns.em("expand-icon", "expanded")); + } + const callback = function(e) { + e.stopPropagation(); + store.toggleRowExpansion(row); + }; + return vue.h("div", { + class: classes, + onClick: callback + }, { + default: () => { + return [ + vue.h(ElIcon, null, { + default: () => { + return [vue.h(arrow_right_default)]; + } + }) + ]; + } + }); + }, + sortable: false, + resizable: false + } + }; + function defaultRenderCell({ + row, + column, + $index + }) { + var _a; + const property = column.property; + const value = property && getProp(row, property).value; + if (column && column.formatter) { + return column.formatter(row, column, value, $index); + } + return ((_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) || ""; + } + function treeCellPrefix({ + row, + treeNode, + store + }, createPlaceholder = false) { + const { ns } = store; + if (!treeNode) { + if (createPlaceholder) { + return [ + vue.h("span", { + class: ns.e("placeholder") + }) + ]; + } + return null; + } + const ele = []; + const callback = function(e) { + e.stopPropagation(); + if (treeNode.loading) { + return; + } + store.loadOrToggle(row); + }; + if (treeNode.indent) { + ele.push(vue.h("span", { + class: ns.e("indent"), + style: { "padding-left": `${treeNode.indent}px` } + })); + } + if (typeof treeNode.expanded === "boolean" && !treeNode.noLazyChildren) { + const expandClasses = [ + ns.e("expand-icon"), + treeNode.expanded ? ns.em("expand-icon", "expanded") : "" + ]; + let icon = arrow_right_default; + if (treeNode.loading) { + icon = loading_default; + } + ele.push(vue.h("div", { + class: expandClasses, + onClick: callback + }, { + default: () => { + return [ + vue.h(ElIcon, { class: { [ns.is("loading")]: treeNode.loading } }, { + default: () => [vue.h(icon)] + }) + ]; + } + })); + } else { + ele.push(vue.h("span", { + class: ns.e("placeholder") + })); + } + return ele; + } + + function getAllAliases(props, aliases) { + return props.reduce((prev, cur) => { + prev[cur] = cur; + return prev; + }, aliases); + } + function useWatcher(owner, props_) { + const instance = vue.getCurrentInstance(); + const registerComplexWatchers = () => { + const props = ["fixed"]; + const aliases = { + realWidth: "width", + realMinWidth: "minWidth" + }; + const allAliases = getAllAliases(props, aliases); + Object.keys(allAliases).forEach((key) => { + const columnKey = aliases[key]; + if (hasOwn(props_, columnKey)) { + vue.watch(() => props_[columnKey], (newVal) => { + let value = newVal; + if (columnKey === "width" && key === "realWidth") { + value = parseWidth(newVal); + } + if (columnKey === "minWidth" && key === "realMinWidth") { + value = parseMinWidth(newVal); + } + instance.columnConfig.value[columnKey] = value; + instance.columnConfig.value[key] = value; + const updateColumns = columnKey === "fixed"; + owner.value.store.scheduleLayout(updateColumns); + }); + } + }); + }; + const registerNormalWatchers = () => { + const props = [ + "label", + "filters", + "filterMultiple", + "sortable", + "index", + "formatter", + "className", + "labelClassName", + "showOverflowTooltip" + ]; + const aliases = { + property: "prop", + align: "realAlign", + headerAlign: "realHeaderAlign" + }; + const allAliases = getAllAliases(props, aliases); + Object.keys(allAliases).forEach((key) => { + const columnKey = aliases[key]; + if (hasOwn(props_, columnKey)) { + vue.watch(() => props_[columnKey], (newVal) => { + instance.columnConfig.value[key] = newVal; + }); + } + }); + }; + return { + registerComplexWatchers, + registerNormalWatchers + }; + } + + function useRender(props, slots, owner) { + const instance = vue.getCurrentInstance(); + const columnId = vue.ref(""); + const isSubColumn = vue.ref(false); + const realAlign = vue.ref(); + const realHeaderAlign = vue.ref(); + const ns = useNamespace("table"); + vue.watchEffect(() => { + realAlign.value = props.align ? `is-${props.align}` : null; + realAlign.value; + }); + vue.watchEffect(() => { + realHeaderAlign.value = props.headerAlign ? `is-${props.headerAlign}` : realAlign.value; + realHeaderAlign.value; + }); + const columnOrTableParent = vue.computed(() => { + let parent = instance.vnode.vParent || instance.parent; + while (parent && !parent.tableId && !parent.columnId) { + parent = parent.vnode.vParent || parent.parent; + } + return parent; + }); + const hasTreeColumn = vue.computed(() => { + const { store } = instance.parent; + if (!store) + return false; + const { treeData } = store.states; + const treeDataValue = treeData.value; + return treeDataValue && Object.keys(treeDataValue).length > 0; + }); + const realWidth = vue.ref(parseWidth(props.width)); + const realMinWidth = vue.ref(parseMinWidth(props.minWidth)); + const setColumnWidth = (column) => { + if (realWidth.value) + column.width = realWidth.value; + if (realMinWidth.value) { + column.minWidth = realMinWidth.value; + } + if (!realWidth.value && realMinWidth.value) { + column.width = void 0; + } + if (!column.minWidth) { + column.minWidth = 80; + } + column.realWidth = Number(column.width === void 0 ? column.minWidth : column.width); + return column; + }; + const setColumnForcedProps = (column) => { + const type = column.type; + const source = cellForced[type] || {}; + Object.keys(source).forEach((prop) => { + const value = source[prop]; + if (prop !== "className" && value !== void 0) { + column[prop] = value; + } + }); + const className = getDefaultClassName(type); + if (className) { + const forceClass = `${vue.unref(ns.namespace)}-${className}`; + column.className = column.className ? `${column.className} ${forceClass}` : forceClass; + } + return column; + }; + const checkSubColumn = (children) => { + if (Array.isArray(children)) { + children.forEach((child) => check(child)); + } else { + check(children); + } + function check(item) { + var _a; + if (((_a = item == null ? void 0 : item.type) == null ? void 0 : _a.name) === "ElTableColumn") { + item.vParent = instance; + } + } + }; + const setColumnRenders = (column) => { + if (props.renderHeader) ; else if (column.type !== "selection") { + column.renderHeader = (scope) => { + instance.columnConfig.value["label"]; + const renderHeader = slots.header; + return renderHeader ? renderHeader(scope) : column.label; + }; + } + let originRenderCell = column.renderCell; + if (column.type === "expand") { + column.renderCell = (data) => vue.h("div", { + class: "cell" + }, [originRenderCell(data)]); + owner.value.renderExpanded = (data) => { + return slots.default ? slots.default(data) : slots.default; + }; + } else { + originRenderCell = originRenderCell || defaultRenderCell; + column.renderCell = (data) => { + let children = null; + if (slots.default) { + const vnodes = slots.default(data); + children = vnodes.some((v) => v.type !== vue.Comment) ? vnodes : originRenderCell(data); + } else { + children = originRenderCell(data); + } + const { columns } = owner.value.store.states; + const firstUserColumnIndex = columns.value.findIndex((item) => item.type === "default"); + const shouldCreatePlaceholder = hasTreeColumn.value && data.cellIndex === firstUserColumnIndex; + const prefix = treeCellPrefix(data, shouldCreatePlaceholder); + const props2 = { + class: "cell", + style: {} + }; + if (column.showOverflowTooltip) { + props2.class = `${props2.class} ${vue.unref(ns.namespace)}-tooltip`; + props2.style = { + width: `${(data.column.realWidth || Number(data.column.width)) - 1}px` + }; + } + checkSubColumn(children); + return vue.h("div", props2, [prefix, children]); + }; + } + return column; + }; + const getPropsData = (...propsKey) => { + return propsKey.reduce((prev, cur) => { + if (Array.isArray(cur)) { + cur.forEach((key) => { + prev[key] = props[key]; + }); + } + return prev; + }, {}); + }; + const getColumnElIndex = (children, child) => { + return Array.prototype.indexOf.call(children, child); + }; + const updateColumnOrder = () => { + owner.value.store.commit("updateColumnOrder", instance.columnConfig.value); + }; + return { + columnId, + realAlign, + isSubColumn, + realHeaderAlign, + columnOrTableParent, + setColumnWidth, + setColumnForcedProps, + setColumnRenders, + getPropsData, + getColumnElIndex, + updateColumnOrder + }; + } + + var defaultProps = { + type: { + type: String, + default: "default" + }, + label: String, + className: String, + labelClassName: String, + property: String, + prop: String, + width: { + type: [String, Number], + default: "" + }, + minWidth: { + type: [String, Number], + default: "" + }, + renderHeader: Function, + sortable: { + type: [Boolean, String], + default: false + }, + sortMethod: Function, + sortBy: [String, Function, Array], + resizable: { + type: Boolean, + default: true + }, + columnKey: String, + align: String, + headerAlign: String, + showOverflowTooltip: [Boolean, Object], + fixed: [Boolean, String], + formatter: Function, + selectable: Function, + reserveSelection: Boolean, + filterMethod: Function, + filteredValue: Array, + filters: Array, + filterPlacement: String, + filterMultiple: { + type: Boolean, + default: true + }, + index: [Number, Function], + sortOrders: { + type: Array, + default: () => { + return ["ascending", "descending", null]; + }, + validator: (val) => { + return val.every((order) => ["ascending", "descending", null].includes(order)); + } + } + }; + + let columnIdSeed = 1; + var ElTableColumn$1 = vue.defineComponent({ + name: "ElTableColumn", + components: { + ElCheckbox + }, + props: defaultProps, + setup(props, { slots }) { + const instance = vue.getCurrentInstance(); + const columnConfig = vue.ref({}); + const owner = vue.computed(() => { + let parent2 = instance.parent; + while (parent2 && !parent2.tableId) { + parent2 = parent2.parent; + } + return parent2; + }); + const { registerNormalWatchers, registerComplexWatchers } = useWatcher(owner, props); + const { + columnId, + isSubColumn, + realHeaderAlign, + columnOrTableParent, + setColumnWidth, + setColumnForcedProps, + setColumnRenders, + getPropsData, + getColumnElIndex, + realAlign, + updateColumnOrder + } = useRender(props, slots, owner); + const parent = columnOrTableParent.value; + columnId.value = `${parent.tableId || parent.columnId}_column_${columnIdSeed++}`; + vue.onBeforeMount(() => { + isSubColumn.value = owner.value !== parent; + const type = props.type || "default"; + const sortable = props.sortable === "" ? true : props.sortable; + const defaults = { + ...cellStarts[type], + id: columnId.value, + type, + property: props.prop || props.property, + align: realAlign, + headerAlign: realHeaderAlign, + showOverflowTooltip: props.showOverflowTooltip, + filterable: props.filters || props.filterMethod, + filteredValue: [], + filterPlacement: "", + isColumnGroup: false, + isSubColumn: false, + filterOpened: false, + sortable, + index: props.index, + rawColumnKey: instance.vnode.key + }; + const basicProps = [ + "columnKey", + "label", + "className", + "labelClassName", + "type", + "renderHeader", + "formatter", + "fixed", + "resizable" + ]; + const sortProps = ["sortMethod", "sortBy", "sortOrders"]; + const selectProps = ["selectable", "reserveSelection"]; + const filterProps = [ + "filterMethod", + "filters", + "filterMultiple", + "filterOpened", + "filteredValue", + "filterPlacement" + ]; + let column = getPropsData(basicProps, sortProps, selectProps, filterProps); + column = mergeOptions(defaults, column); + const chains = compose(setColumnRenders, setColumnWidth, setColumnForcedProps); + column = chains(column); + columnConfig.value = column; + registerNormalWatchers(); + registerComplexWatchers(); + }); + vue.onMounted(() => { + var _a; + const parent2 = columnOrTableParent.value; + const children = isSubColumn.value ? parent2.vnode.el.children : (_a = parent2.refs.hiddenColumns) == null ? void 0 : _a.children; + const getColumnIndex = () => getColumnElIndex(children || [], instance.vnode.el); + columnConfig.value.getColumnIndex = getColumnIndex; + const columnIndex = getColumnIndex(); + columnIndex > -1 && owner.value.store.commit("insertColumn", columnConfig.value, isSubColumn.value ? parent2.columnConfig.value : null, updateColumnOrder); + }); + vue.onBeforeUnmount(() => { + owner.value.store.commit("removeColumn", columnConfig.value, isSubColumn.value ? parent.columnConfig.value : null, updateColumnOrder); + }); + instance.columnId = columnId.value; + instance.columnConfig = columnConfig; + return; + }, + render() { + var _a, _b, _c; + try { + const renderDefault = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, { + row: {}, + column: {}, + $index: -1 + }); + const children = []; + if (Array.isArray(renderDefault)) { + for (const childNode of renderDefault) { + if (((_c = childNode.type) == null ? void 0 : _c.name) === "ElTableColumn" || childNode.shapeFlag & 2) { + children.push(childNode); + } else if (childNode.type === vue.Fragment && Array.isArray(childNode.children)) { + childNode.children.forEach((vnode2) => { + if ((vnode2 == null ? void 0 : vnode2.patchFlag) !== 1024 && !isString$1(vnode2 == null ? void 0 : vnode2.children)) { + children.push(vnode2); + } + }); + } + } + } + const vnode = vue.h("div", children); + return vnode; + } catch (e) { + return vue.h("div", []); + } + } + }); + + const ElTable = withInstall(Table, { + TableColumn: ElTableColumn$1 + }); + const ElTableColumn = withNoopInstall(ElTableColumn$1); + + var SortOrder = /* @__PURE__ */ ((SortOrder2) => { + SortOrder2["ASC"] = "asc"; + SortOrder2["DESC"] = "desc"; + return SortOrder2; + })(SortOrder || {}); + var Alignment = /* @__PURE__ */ ((Alignment2) => { + Alignment2["CENTER"] = "center"; + Alignment2["RIGHT"] = "right"; + return Alignment2; + })(Alignment || {}); + var FixedDir = /* @__PURE__ */ ((FixedDir2) => { + FixedDir2["LEFT"] = "left"; + FixedDir2["RIGHT"] = "right"; + return FixedDir2; + })(FixedDir || {}); + const oppositeOrderMap = { + ["asc" /* ASC */]: "desc" /* DESC */, + ["desc" /* DESC */]: "asc" /* ASC */ + }; + + const placeholderSign = Symbol("placeholder"); + + const calcColumnStyle = (column, fixedColumn, fixed) => { + var _a; + const flex = { + flexGrow: 0, + flexShrink: 0, + ...fixed ? {} : { + flexGrow: column.flexGrow || 0, + flexShrink: column.flexShrink || 1 + } + }; + if (!fixed) { + flex.flexShrink = 1; + } + const style = { + ...(_a = column.style) != null ? _a : {}, + ...flex, + flexBasis: "auto", + width: column.width + }; + if (!fixedColumn) { + if (column.maxWidth) + style.maxWidth = column.maxWidth; + if (column.minWidth) + style.minWidth = column.minWidth; + } + return style; + }; + + function useColumns(props, columns, fixed) { + const visibleColumns = vue.computed(() => { + return vue.unref(columns).filter((column) => !column.hidden); + }); + const fixedColumnsOnLeft = vue.computed(() => vue.unref(visibleColumns).filter((column) => column.fixed === "left" || column.fixed === true)); + const fixedColumnsOnRight = vue.computed(() => vue.unref(visibleColumns).filter((column) => column.fixed === "right")); + const normalColumns = vue.computed(() => vue.unref(visibleColumns).filter((column) => !column.fixed)); + const mainColumns = vue.computed(() => { + const ret = []; + vue.unref(fixedColumnsOnLeft).forEach((column) => { + ret.push({ + ...column, + placeholderSign + }); + }); + vue.unref(normalColumns).forEach((column) => { + ret.push(column); + }); + vue.unref(fixedColumnsOnRight).forEach((column) => { + ret.push({ + ...column, + placeholderSign + }); + }); + return ret; + }); + const hasFixedColumns = vue.computed(() => { + return vue.unref(fixedColumnsOnLeft).length || vue.unref(fixedColumnsOnRight).length; + }); + const columnsStyles = vue.computed(() => { + const _columns = vue.unref(columns); + return _columns.reduce((style, column) => { + style[column.key] = calcColumnStyle(column, vue.unref(fixed), props.fixed); + return style; + }, {}); + }); + const columnsTotalWidth = vue.computed(() => { + return vue.unref(visibleColumns).reduce((width, column) => width + column.width, 0); + }); + const getColumn = (key) => { + return vue.unref(columns).find((column) => column.key === key); + }; + const getColumnStyle = (key) => { + return vue.unref(columnsStyles)[key]; + }; + const updateColumnWidth = (column, width) => { + column.width = width; + }; + function onColumnSorted(e) { + var _a; + const { key } = e.currentTarget.dataset; + if (!key) + return; + const { sortState, sortBy } = props; + let order = SortOrder.ASC; + if (isObject$1(sortState)) { + order = oppositeOrderMap[sortState[key]]; + } else { + order = oppositeOrderMap[sortBy.order]; + } + (_a = props.onColumnSort) == null ? void 0 : _a.call(props, { column: getColumn(key), key, order }); + } + return { + columns, + columnsStyles, + columnsTotalWidth, + fixedColumnsOnLeft, + fixedColumnsOnRight, + hasFixedColumns, + mainColumns, + normalColumns, + visibleColumns, + getColumn, + getColumnStyle, + updateColumnWidth, + onColumnSorted + }; + } + + const useScrollbar = (props, { + mainTableRef, + leftTableRef, + rightTableRef, + onMaybeEndReached + }) => { + const scrollPos = vue.ref({ scrollLeft: 0, scrollTop: 0 }); + function doScroll(params) { + var _a, _b, _c; + const { scrollTop } = params; + (_a = mainTableRef.value) == null ? void 0 : _a.scrollTo(params); + (_b = leftTableRef.value) == null ? void 0 : _b.scrollToTop(scrollTop); + (_c = rightTableRef.value) == null ? void 0 : _c.scrollToTop(scrollTop); + } + function scrollTo(params) { + scrollPos.value = params; + doScroll(params); + } + function scrollToTop(scrollTop) { + scrollPos.value.scrollTop = scrollTop; + doScroll(vue.unref(scrollPos)); + } + function scrollToLeft(scrollLeft) { + var _a, _b; + scrollPos.value.scrollLeft = scrollLeft; + (_b = (_a = mainTableRef.value) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, vue.unref(scrollPos)); + } + function onScroll(params) { + var _a; + scrollTo(params); + (_a = props.onScroll) == null ? void 0 : _a.call(props, params); + } + function onVerticalScroll({ scrollTop }) { + const { scrollTop: currentScrollTop } = vue.unref(scrollPos); + if (scrollTop !== currentScrollTop) + scrollToTop(scrollTop); + } + function scrollToRow(row, strategy = "auto") { + var _a; + (_a = mainTableRef.value) == null ? void 0 : _a.scrollToRow(row, strategy); + } + vue.watch(() => vue.unref(scrollPos).scrollTop, (cur, prev) => { + if (cur > prev) + onMaybeEndReached(); + }); + return { + scrollPos, + scrollTo, + scrollToLeft, + scrollToTop, + scrollToRow, + onScroll, + onVerticalScroll + }; + }; + + const useRow = (props, { mainTableRef, leftTableRef, rightTableRef }) => { + const vm = vue.getCurrentInstance(); + const { emit } = vm; + const isResetting = vue.shallowRef(false); + const hoveringRowKey = vue.shallowRef(null); + const expandedRowKeys = vue.ref(props.defaultExpandedRowKeys || []); + const lastRenderedRowIndex = vue.ref(-1); + const resetIndex = vue.shallowRef(null); + const rowHeights = vue.ref({}); + const pendingRowHeights = vue.ref({}); + const leftTableHeights = vue.shallowRef({}); + const mainTableHeights = vue.shallowRef({}); + const rightTableHeights = vue.shallowRef({}); + const isDynamic = vue.computed(() => isNumber$1(props.estimatedRowHeight)); + function onRowsRendered(params) { + var _a; + (_a = props.onRowsRendered) == null ? void 0 : _a.call(props, params); + if (params.rowCacheEnd > vue.unref(lastRenderedRowIndex)) { + lastRenderedRowIndex.value = params.rowCacheEnd; + } + } + function onRowHovered({ hovered, rowKey }) { + hoveringRowKey.value = hovered ? rowKey : null; + } + function onRowExpanded({ + expanded, + rowData, + rowIndex, + rowKey + }) { + var _a, _b; + const _expandedRowKeys = [...vue.unref(expandedRowKeys)]; + const currentKeyIndex = _expandedRowKeys.indexOf(rowKey); + if (expanded) { + if (currentKeyIndex === -1) + _expandedRowKeys.push(rowKey); + } else { + if (currentKeyIndex > -1) + _expandedRowKeys.splice(currentKeyIndex, 1); + } + expandedRowKeys.value = _expandedRowKeys; + emit("update:expandedRowKeys", _expandedRowKeys); + (_a = props.onRowExpand) == null ? void 0 : _a.call(props, { + expanded, + rowData, + rowIndex, + rowKey + }); + (_b = props.onExpandedRowsChange) == null ? void 0 : _b.call(props, _expandedRowKeys); + } + const flushingRowHeights = debounce(() => { + var _a, _b, _c, _d; + isResetting.value = true; + rowHeights.value = { ...vue.unref(rowHeights), ...vue.unref(pendingRowHeights) }; + resetAfterIndex(vue.unref(resetIndex), false); + pendingRowHeights.value = {}; + resetIndex.value = null; + (_a = mainTableRef.value) == null ? void 0 : _a.forceUpdate(); + (_b = leftTableRef.value) == null ? void 0 : _b.forceUpdate(); + (_c = rightTableRef.value) == null ? void 0 : _c.forceUpdate(); + (_d = vm.proxy) == null ? void 0 : _d.$forceUpdate(); + isResetting.value = false; + }, 0); + function resetAfterIndex(index, forceUpdate = false) { + if (!vue.unref(isDynamic)) + return; + [mainTableRef, leftTableRef, rightTableRef].forEach((tableRef) => { + const table = vue.unref(tableRef); + if (table) + table.resetAfterRowIndex(index, forceUpdate); + }); + } + function resetHeights(rowKey, height, rowIdx) { + const resetIdx = vue.unref(resetIndex); + if (resetIdx === null) { + resetIndex.value = rowIdx; + } else { + if (resetIdx > rowIdx) { + resetIndex.value = rowIdx; + } + } + pendingRowHeights.value[rowKey] = height; + } + function onRowHeightChange({ rowKey, height, rowIndex }, fixedDir) { + if (!fixedDir) { + mainTableHeights.value[rowKey] = height; + } else { + if (fixedDir === FixedDir.RIGHT) { + rightTableHeights.value[rowKey] = height; + } else { + leftTableHeights.value[rowKey] = height; + } + } + const maximumHeight = Math.max(...[leftTableHeights, rightTableHeights, mainTableHeights].map((records) => records.value[rowKey] || 0)); + if (vue.unref(rowHeights)[rowKey] !== maximumHeight) { + resetHeights(rowKey, maximumHeight, rowIndex); + flushingRowHeights(); + } + } + return { + hoveringRowKey, + expandedRowKeys, + lastRenderedRowIndex, + isDynamic, + isResetting, + rowHeights, + resetAfterIndex, + onRowExpanded, + onRowHovered, + onRowsRendered, + onRowHeightChange + }; + }; + + const useData = (props, { expandedRowKeys, lastRenderedRowIndex, resetAfterIndex }) => { + const depthMap = vue.ref({}); + const flattenedData = vue.computed(() => { + const depths = {}; + const { data: data2, rowKey } = props; + const _expandedRowKeys = vue.unref(expandedRowKeys); + if (!_expandedRowKeys || !_expandedRowKeys.length) + return data2; + const array = []; + const keysSet = /* @__PURE__ */ new Set(); + _expandedRowKeys.forEach((x) => keysSet.add(x)); + let copy = data2.slice(); + copy.forEach((x) => depths[x[rowKey]] = 0); + while (copy.length > 0) { + const item = copy.shift(); + array.push(item); + if (keysSet.has(item[rowKey]) && Array.isArray(item.children) && item.children.length > 0) { + copy = [...item.children, ...copy]; + item.children.forEach((child) => depths[child[rowKey]] = depths[item[rowKey]] + 1); + } + } + depthMap.value = depths; + return array; + }); + const data = vue.computed(() => { + const { data: data2, expandColumnKey } = props; + return expandColumnKey ? vue.unref(flattenedData) : data2; + }); + vue.watch(data, (val, prev) => { + if (val !== prev) { + lastRenderedRowIndex.value = -1; + resetAfterIndex(0, true); + } + }); + return { + data, + depthMap + }; + }; + + const sumReducer = (sum2, num) => sum2 + num; + const sum = (listLike) => { + return isArray$1(listLike) ? listLike.reduce(sumReducer, 0) : listLike; + }; + const tryCall = (fLike, params, defaultRet = {}) => { + return isFunction$1(fLike) ? fLike(params) : fLike != null ? fLike : defaultRet; + }; + const enforceUnit = (style) => { + ["width", "maxWidth", "minWidth", "height"].forEach((key) => { + style[key] = addUnit(style[key]); + }); + return style; + }; + const componentToSlot = (ComponentLike) => vue.isVNode(ComponentLike) ? (props) => vue.h(ComponentLike, props) : ComponentLike; + + const useStyles = (props, { + columnsTotalWidth, + data, + fixedColumnsOnLeft, + fixedColumnsOnRight + }) => { + const bodyWidth = vue.computed(() => { + const { fixed, width, vScrollbarSize } = props; + const ret = width - vScrollbarSize; + return fixed ? Math.max(Math.round(vue.unref(columnsTotalWidth)), ret) : ret; + }); + const headerWidth = vue.computed(() => vue.unref(bodyWidth) + (props.fixed ? props.vScrollbarSize : 0)); + const mainTableHeight = vue.computed(() => { + const { height = 0, maxHeight = 0, footerHeight: footerHeight2, hScrollbarSize } = props; + if (maxHeight > 0) { + const _fixedRowsHeight = vue.unref(fixedRowsHeight); + const _rowsHeight = vue.unref(rowsHeight); + const _headerHeight = vue.unref(headerHeight); + const total = _headerHeight + _fixedRowsHeight + _rowsHeight + hScrollbarSize; + return Math.min(total, maxHeight - footerHeight2); + } + return height - footerHeight2; + }); + const rowsHeight = vue.computed(() => { + const { rowHeight, estimatedRowHeight } = props; + const _data = vue.unref(data); + if (isNumber$1(estimatedRowHeight)) { + return _data.length * estimatedRowHeight; + } + return _data.length * rowHeight; + }); + const fixedTableHeight = vue.computed(() => { + const { maxHeight } = props; + const tableHeight = vue.unref(mainTableHeight); + if (isNumber$1(maxHeight) && maxHeight > 0) + return tableHeight; + const totalHeight = vue.unref(rowsHeight) + vue.unref(headerHeight) + vue.unref(fixedRowsHeight); + return Math.min(tableHeight, totalHeight); + }); + const mapColumn = (column) => column.width; + const leftTableWidth = vue.computed(() => sum(vue.unref(fixedColumnsOnLeft).map(mapColumn))); + const rightTableWidth = vue.computed(() => sum(vue.unref(fixedColumnsOnRight).map(mapColumn))); + const headerHeight = vue.computed(() => sum(props.headerHeight)); + const fixedRowsHeight = vue.computed(() => { + var _a; + return (((_a = props.fixedData) == null ? void 0 : _a.length) || 0) * props.rowHeight; + }); + const windowHeight = vue.computed(() => { + return vue.unref(mainTableHeight) - vue.unref(headerHeight) - vue.unref(fixedRowsHeight); + }); + const rootStyle = vue.computed(() => { + const { style = {}, height, width } = props; + return enforceUnit({ + ...style, + height, + width + }); + }); + const footerHeight = vue.computed(() => enforceUnit({ height: props.footerHeight })); + const emptyStyle = vue.computed(() => ({ + top: addUnit(vue.unref(headerHeight)), + bottom: addUnit(props.footerHeight), + width: addUnit(props.width) + })); + return { + bodyWidth, + fixedTableHeight, + mainTableHeight, + leftTableWidth, + rightTableWidth, + headerWidth, + rowsHeight, + windowHeight, + footerHeight, + emptyStyle, + rootStyle, + headerHeight + }; + }; + + const useAutoResize = (props) => { + const sizer = vue.ref(); + const width$ = vue.ref(0); + const height$ = vue.ref(0); + let resizerStopper; + vue.onMounted(() => { + resizerStopper = useResizeObserver(sizer, ([entry]) => { + const { width, height } = entry.contentRect; + const { paddingLeft, paddingRight, paddingTop, paddingBottom } = getComputedStyle(entry.target); + const left = Number.parseInt(paddingLeft) || 0; + const right = Number.parseInt(paddingRight) || 0; + const top = Number.parseInt(paddingTop) || 0; + const bottom = Number.parseInt(paddingBottom) || 0; + width$.value = width - left - right; + height$.value = height - top - bottom; + }).stop; + }); + vue.onBeforeUnmount(() => { + resizerStopper == null ? void 0 : resizerStopper(); + }); + vue.watch([width$, height$], ([width, height]) => { + var _a; + (_a = props.onResize) == null ? void 0 : _a.call(props, { + width, + height + }); + }); + return { + sizer, + width: width$, + height: height$ + }; + }; + + function useTable(props) { + const mainTableRef = vue.ref(); + const leftTableRef = vue.ref(); + const rightTableRef = vue.ref(); + const { + columns, + columnsStyles, + columnsTotalWidth, + fixedColumnsOnLeft, + fixedColumnsOnRight, + hasFixedColumns, + mainColumns, + onColumnSorted + } = useColumns(props, vue.toRef(props, "columns"), vue.toRef(props, "fixed")); + const { + scrollTo, + scrollToLeft, + scrollToTop, + scrollToRow, + onScroll, + onVerticalScroll, + scrollPos + } = useScrollbar(props, { + mainTableRef, + leftTableRef, + rightTableRef, + onMaybeEndReached + }); + const { + expandedRowKeys, + hoveringRowKey, + lastRenderedRowIndex, + isDynamic, + isResetting, + rowHeights, + resetAfterIndex, + onRowExpanded, + onRowHeightChange, + onRowHovered, + onRowsRendered + } = useRow(props, { + mainTableRef, + leftTableRef, + rightTableRef + }); + const { data, depthMap } = useData(props, { + expandedRowKeys, + lastRenderedRowIndex, + resetAfterIndex + }); + const { + bodyWidth, + fixedTableHeight, + mainTableHeight, + leftTableWidth, + rightTableWidth, + headerWidth, + rowsHeight, + windowHeight, + footerHeight, + emptyStyle, + rootStyle, + headerHeight + } = useStyles(props, { + columnsTotalWidth, + data, + fixedColumnsOnLeft, + fixedColumnsOnRight + }); + const isScrolling = vue.shallowRef(false); + const containerRef = vue.ref(); + const showEmpty = vue.computed(() => { + const noData = vue.unref(data).length === 0; + return isArray$1(props.fixedData) ? props.fixedData.length === 0 && noData : noData; + }); + function getRowHeight(rowIndex) { + const { estimatedRowHeight, rowHeight, rowKey } = props; + if (!estimatedRowHeight) + return rowHeight; + return vue.unref(rowHeights)[vue.unref(data)[rowIndex][rowKey]] || estimatedRowHeight; + } + function onMaybeEndReached() { + const { onEndReached } = props; + if (!onEndReached) + return; + const { scrollTop } = vue.unref(scrollPos); + const _totalHeight = vue.unref(rowsHeight); + const clientHeight = vue.unref(windowHeight); + const heightUntilEnd = _totalHeight - (scrollTop + clientHeight) + props.hScrollbarSize; + if (vue.unref(lastRenderedRowIndex) >= 0 && _totalHeight === scrollTop + vue.unref(mainTableHeight) - vue.unref(headerHeight)) { + onEndReached(heightUntilEnd); + } + } + vue.watch(() => props.expandedRowKeys, (val) => expandedRowKeys.value = val, { + deep: true + }); + return { + columns, + containerRef, + mainTableRef, + leftTableRef, + rightTableRef, + isDynamic, + isResetting, + isScrolling, + hoveringRowKey, + hasFixedColumns, + columnsStyles, + columnsTotalWidth, + data, + expandedRowKeys, + depthMap, + fixedColumnsOnLeft, + fixedColumnsOnRight, + mainColumns, + bodyWidth, + emptyStyle, + rootStyle, + headerWidth, + footerHeight, + mainTableHeight, + fixedTableHeight, + leftTableWidth, + rightTableWidth, + showEmpty, + getRowHeight, + onColumnSorted, + onRowHovered, + onRowExpanded, + onRowsRendered, + onRowHeightChange, + scrollTo, + scrollToLeft, + scrollToTop, + scrollToRow, + onScroll, + onVerticalScroll + }; + } + + const TableV2InjectionKey = Symbol("tableV2"); + + const classType = String; + const columns = { + type: definePropType(Array), + required: true + }; + const fixedDataType = { + type: definePropType(Array) + }; + const dataType = { + ...fixedDataType, + required: true + }; + const expandColumnKey = String; + const expandKeys = { + type: definePropType(Array), + default: () => mutable([]) + }; + const requiredNumber = { + type: Number, + required: true + }; + const rowKey = { + type: definePropType([String, Number, Symbol]), + default: "id" + }; + const styleType = { + type: definePropType(Object) + }; + + const tableV2RowProps = buildProps({ + class: String, + columns, + columnsStyles: { + type: definePropType(Object), + required: true + }, + depth: Number, + expandColumnKey, + estimatedRowHeight: { + ...virtualizedGridProps.estimatedRowHeight, + default: void 0 + }, + isScrolling: Boolean, + onRowExpand: { + type: definePropType(Function) + }, + onRowHover: { + type: definePropType(Function) + }, + onRowHeightChange: { + type: definePropType(Function) + }, + rowData: { + type: definePropType(Object), + required: true + }, + rowEventHandlers: { + type: definePropType(Object) + }, + rowIndex: { + type: Number, + required: true + }, + rowKey, + style: { + type: definePropType(Object) + } + }); + + const requiredNumberType = { + type: Number, + required: true + }; + const tableV2HeaderProps = buildProps({ + class: String, + columns, + fixedHeaderData: { + type: definePropType(Array) + }, + headerData: { + type: definePropType(Array), + required: true + }, + headerHeight: { + type: definePropType([Number, Array]), + default: 50 + }, + rowWidth: requiredNumberType, + rowHeight: { + type: Number, + default: 50 + }, + height: requiredNumberType, + width: requiredNumberType + }); + + const tableV2GridProps = buildProps({ + columns, + data: dataType, + fixedData: fixedDataType, + estimatedRowHeight: tableV2RowProps.estimatedRowHeight, + width: requiredNumber, + height: requiredNumber, + headerWidth: requiredNumber, + headerHeight: tableV2HeaderProps.headerHeight, + bodyWidth: requiredNumber, + rowHeight: requiredNumber, + cache: virtualizedListProps.cache, + useIsScrolling: Boolean, + scrollbarAlwaysOn: virtualizedGridProps.scrollbarAlwaysOn, + scrollbarStartGap: virtualizedGridProps.scrollbarStartGap, + scrollbarEndGap: virtualizedGridProps.scrollbarEndGap, + class: classType, + style: styleType, + containerStyle: styleType, + getRowHeight: { + type: definePropType(Function), + required: true + }, + rowKey: tableV2RowProps.rowKey, + onRowsRendered: { + type: definePropType(Function) + }, + onScroll: { + type: definePropType(Function) + } + }); + + const tableV2Props = buildProps({ + cache: tableV2GridProps.cache, + estimatedRowHeight: tableV2RowProps.estimatedRowHeight, + rowKey, + headerClass: { + type: definePropType([ + String, + Function + ]) + }, + headerProps: { + type: definePropType([ + Object, + Function + ]) + }, + headerCellProps: { + type: definePropType([ + Object, + Function + ]) + }, + headerHeight: tableV2HeaderProps.headerHeight, + footerHeight: { + type: Number, + default: 0 + }, + rowClass: { + type: definePropType([String, Function]) + }, + rowProps: { + type: definePropType([Object, Function]) + }, + rowHeight: { + type: Number, + default: 50 + }, + cellProps: { + type: definePropType([ + Object, + Function + ]) + }, + columns, + data: dataType, + dataGetter: { + type: definePropType(Function) + }, + fixedData: fixedDataType, + expandColumnKey: tableV2RowProps.expandColumnKey, + expandedRowKeys: expandKeys, + defaultExpandedRowKeys: expandKeys, + class: classType, + fixed: Boolean, + style: { + type: definePropType(Object) + }, + width: requiredNumber, + height: requiredNumber, + maxHeight: Number, + useIsScrolling: Boolean, + indentSize: { + type: Number, + default: 12 + }, + iconSize: { + type: Number, + default: 12 + }, + hScrollbarSize: virtualizedGridProps.hScrollbarSize, + vScrollbarSize: virtualizedGridProps.vScrollbarSize, + scrollbarAlwaysOn: virtualizedScrollbarProps.alwaysOn, + sortBy: { + type: definePropType(Object), + default: () => ({}) + }, + sortState: { + type: definePropType(Object), + default: void 0 + }, + onColumnSort: { + type: definePropType(Function) + }, + onExpandedRowsChange: { + type: definePropType(Function) + }, + onEndReached: { + type: definePropType(Function) + }, + onRowExpand: tableV2RowProps.onRowExpand, + onScroll: tableV2GridProps.onScroll, + onRowsRendered: tableV2GridProps.onRowsRendered, + rowEventHandlers: tableV2RowProps.rowEventHandlers + }); + + const TableV2Cell = (props, { + slots + }) => { + var _a; + const { + cellData, + style + } = props; + const displayText = ((_a = cellData == null ? void 0 : cellData.toString) == null ? void 0 : _a.call(cellData)) || ""; + return vue.createVNode("div", { + "class": props.class, + "title": displayText, + "style": style + }, [slots.default ? slots.default(props) : displayText]); + }; + TableV2Cell.displayName = "ElTableV2Cell"; + TableV2Cell.inheritAttrs = false; + var TableCell = TableV2Cell; + + const HeaderCell = (props, { + slots + }) => { + var _a, _b; + return slots.default ? slots.default(props) : vue.createVNode("div", { + "class": props.class, + "title": (_a = props.column) == null ? void 0 : _a.title + }, [(_b = props.column) == null ? void 0 : _b.title]); + }; + HeaderCell.displayName = "ElTableV2HeaderCell"; + HeaderCell.inheritAttrs = false; + var HeaderCell$1 = HeaderCell; + + const tableV2HeaderRowProps = buildProps({ + class: String, + columns, + columnsStyles: { + type: definePropType(Object), + required: true + }, + headerIndex: Number, + style: { type: definePropType(Object) } + }); + + const TableV2HeaderRow = vue.defineComponent({ + name: "ElTableV2HeaderRow", + props: tableV2HeaderRowProps, + setup(props, { + slots + }) { + return () => { + const { + columns, + columnsStyles, + headerIndex, + style + } = props; + let Cells = columns.map((column, columnIndex) => { + return slots.cell({ + columns, + column, + columnIndex, + headerIndex, + style: columnsStyles[column.key] + }); + }); + if (slots.header) { + Cells = slots.header({ + cells: Cells.map((node) => { + if (isArray$1(node) && node.length === 1) { + return node[0]; + } + return node; + }), + columns, + headerIndex + }); + } + return vue.createVNode("div", { + "class": props.class, + "style": style, + "role": "row" + }, [Cells]); + }; + } + }); + var HeaderRow = TableV2HeaderRow; + + const COMPONENT_NAME$7 = "ElTableV2Header"; + const TableV2Header = vue.defineComponent({ + name: COMPONENT_NAME$7, + props: tableV2HeaderProps, + setup(props, { + slots, + expose + }) { + const ns = useNamespace("table-v2"); + const headerRef = vue.ref(); + const headerStyle = vue.computed(() => enforceUnit({ + width: props.width, + height: props.height + })); + const rowStyle = vue.computed(() => enforceUnit({ + width: props.rowWidth, + height: props.height + })); + const headerHeights = vue.computed(() => castArray$1(vue.unref(props.headerHeight))); + const scrollToLeft = (left) => { + const headerEl = vue.unref(headerRef); + vue.nextTick(() => { + (headerEl == null ? void 0 : headerEl.scroll) && headerEl.scroll({ + left + }); + }); + }; + const renderFixedRows = () => { + const fixedRowClassName = ns.e("fixed-header-row"); + const { + columns, + fixedHeaderData, + rowHeight + } = props; + return fixedHeaderData == null ? void 0 : fixedHeaderData.map((fixedRowData, fixedRowIndex) => { + var _a; + const style = enforceUnit({ + height: rowHeight, + width: "100%" + }); + return (_a = slots.fixed) == null ? void 0 : _a.call(slots, { + class: fixedRowClassName, + columns, + rowData: fixedRowData, + rowIndex: -(fixedRowIndex + 1), + style + }); + }); + }; + const renderDynamicRows = () => { + const dynamicRowClassName = ns.e("dynamic-header-row"); + const { + columns + } = props; + return vue.unref(headerHeights).map((rowHeight, rowIndex) => { + var _a; + const style = enforceUnit({ + width: "100%", + height: rowHeight + }); + return (_a = slots.dynamic) == null ? void 0 : _a.call(slots, { + class: dynamicRowClassName, + columns, + headerIndex: rowIndex, + style + }); + }); + }; + expose({ + scrollToLeft + }); + return () => { + if (props.height <= 0) + return; + return vue.createVNode("div", { + "ref": headerRef, + "class": props.class, + "style": vue.unref(headerStyle), + "role": "rowgroup" + }, [vue.createVNode("div", { + "style": vue.unref(rowStyle), + "class": ns.e("header") + }, [renderDynamicRows(), renderFixedRows()])]); + }; + } + }); + var Header = TableV2Header; + + const useTableRow = (props) => { + const { + isScrolling + } = vue.inject(TableV2InjectionKey); + const measured = vue.ref(false); + const rowRef = vue.ref(); + const measurable = vue.computed(() => { + return isNumber$1(props.estimatedRowHeight) && props.rowIndex >= 0; + }); + const doMeasure = (isInit = false) => { + const $rowRef = vue.unref(rowRef); + if (!$rowRef) + return; + const { + columns, + onRowHeightChange, + rowKey, + rowIndex, + style + } = props; + const { + height + } = $rowRef.getBoundingClientRect(); + measured.value = true; + vue.nextTick(() => { + if (isInit || height !== Number.parseInt(style.height)) { + const firstColumn = columns[0]; + const isPlaceholder = (firstColumn == null ? void 0 : firstColumn.placeholderSign) === placeholderSign; + onRowHeightChange == null ? void 0 : onRowHeightChange({ + rowKey, + height, + rowIndex + }, firstColumn && !isPlaceholder && firstColumn.fixed); + } + }); + }; + const eventHandlers = vue.computed(() => { + const { + rowData, + rowIndex, + rowKey, + onRowHover + } = props; + const handlers = props.rowEventHandlers || {}; + const eventHandlers2 = {}; + Object.entries(handlers).forEach(([eventName, handler]) => { + if (isFunction$1(handler)) { + eventHandlers2[eventName] = (event) => { + handler({ + event, + rowData, + rowIndex, + rowKey + }); + }; + } + }); + if (onRowHover) { + [{ + name: "onMouseleave", + hovered: false + }, { + name: "onMouseenter", + hovered: true + }].forEach(({ + name, + hovered + }) => { + const existedHandler = eventHandlers2[name]; + eventHandlers2[name] = (event) => { + onRowHover({ + event, + hovered, + rowData, + rowIndex, + rowKey + }); + existedHandler == null ? void 0 : existedHandler(event); + }; + }); + } + return eventHandlers2; + }); + const onExpand = (expanded) => { + const { + onRowExpand, + rowData, + rowIndex, + rowKey + } = props; + onRowExpand == null ? void 0 : onRowExpand({ + expanded, + rowData, + rowIndex, + rowKey + }); + }; + vue.onMounted(() => { + if (vue.unref(measurable)) { + doMeasure(true); + } + }); + return { + isScrolling, + measurable, + measured, + rowRef, + eventHandlers, + onExpand + }; + }; + const COMPONENT_NAME$6 = "ElTableV2TableRow"; + const TableV2Row = vue.defineComponent({ + name: COMPONENT_NAME$6, + props: tableV2RowProps, + setup(props, { + expose, + slots, + attrs + }) { + const { + eventHandlers, + isScrolling, + measurable, + measured, + rowRef, + onExpand + } = useTableRow(props); + expose({ + onExpand + }); + return () => { + const { + columns, + columnsStyles, + expandColumnKey, + depth, + rowData, + rowIndex, + style + } = props; + let ColumnCells = columns.map((column, columnIndex) => { + const expandable = isArray$1(rowData.children) && rowData.children.length > 0 && column.key === expandColumnKey; + return slots.cell({ + column, + columns, + columnIndex, + depth, + style: columnsStyles[column.key], + rowData, + rowIndex, + isScrolling: vue.unref(isScrolling), + expandIconProps: expandable ? { + rowData, + rowIndex, + onExpand + } : void 0 + }); + }); + if (slots.row) { + ColumnCells = slots.row({ + cells: ColumnCells.map((node) => { + if (isArray$1(node) && node.length === 1) { + return node[0]; + } + return node; + }), + style, + columns, + depth, + rowData, + rowIndex, + isScrolling: vue.unref(isScrolling) + }); + } + if (vue.unref(measurable)) { + const { + height, + ...exceptHeightStyle + } = style || {}; + const _measured = vue.unref(measured); + return vue.createVNode("div", vue.mergeProps({ + "ref": rowRef, + "class": props.class, + "style": _measured ? style : exceptHeightStyle, + "role": "row" + }, attrs, vue.unref(eventHandlers)), [ColumnCells]); + } + return vue.createVNode("div", vue.mergeProps(attrs, { + "ref": rowRef, + "class": props.class, + "style": style, + "role": "row" + }, vue.unref(eventHandlers)), [ColumnCells]); + }; + } + }); + var Row = TableV2Row; + + const SortIcon = (props) => { + const { + sortOrder + } = props; + return vue.createVNode(ElIcon, { + "size": 14, + "class": props.class + }, { + default: () => [sortOrder === SortOrder.ASC ? vue.createVNode(sort_up_default, null, null) : vue.createVNode(sort_down_default, null, null)] + }); + }; + var SortIcon$1 = SortIcon; + + const ExpandIcon = (props) => { + const { + expanded, + expandable, + onExpand, + style, + size + } = props; + const expandIconProps = { + onClick: expandable ? () => onExpand(!expanded) : void 0, + class: props.class + }; + return vue.createVNode(ElIcon, vue.mergeProps(expandIconProps, { + "size": size, + "style": style + }), { + default: () => [vue.createVNode(arrow_right_default, null, null)] + }); + }; + var ExpandIcon$1 = ExpandIcon; + + const COMPONENT_NAME$5 = "ElTableV2Grid"; + const useTableGrid = (props) => { + const headerRef = vue.ref(); + const bodyRef = vue.ref(); + const totalHeight = vue.computed(() => { + const { + data, + rowHeight, + estimatedRowHeight + } = props; + if (estimatedRowHeight) { + return; + } + return data.length * rowHeight; + }); + const fixedRowHeight = vue.computed(() => { + const { + fixedData, + rowHeight + } = props; + return ((fixedData == null ? void 0 : fixedData.length) || 0) * rowHeight; + }); + const headerHeight = vue.computed(() => sum(props.headerHeight)); + const gridHeight = vue.computed(() => { + const { + height + } = props; + return Math.max(0, height - vue.unref(headerHeight) - vue.unref(fixedRowHeight)); + }); + const hasHeader = vue.computed(() => { + return vue.unref(headerHeight) + vue.unref(fixedRowHeight) > 0; + }); + const itemKey = ({ + data, + rowIndex + }) => data[rowIndex][props.rowKey]; + function onItemRendered({ + rowCacheStart, + rowCacheEnd, + rowVisibleStart, + rowVisibleEnd + }) { + var _a; + (_a = props.onRowsRendered) == null ? void 0 : _a.call(props, { + rowCacheStart, + rowCacheEnd, + rowVisibleStart, + rowVisibleEnd + }); + } + function resetAfterRowIndex(index, forceUpdate2) { + var _a; + (_a = bodyRef.value) == null ? void 0 : _a.resetAfterRowIndex(index, forceUpdate2); + } + function scrollTo(leftOrOptions, top) { + const header$ = vue.unref(headerRef); + const body$ = vue.unref(bodyRef); + if (!header$ || !body$) + return; + if (isObject$1(leftOrOptions)) { + header$.scrollToLeft(leftOrOptions.scrollLeft); + body$.scrollTo(leftOrOptions); + } else { + header$.scrollToLeft(leftOrOptions); + body$.scrollTo({ + scrollLeft: leftOrOptions, + scrollTop: top + }); + } + } + function scrollToTop(scrollTop) { + var _a; + (_a = vue.unref(bodyRef)) == null ? void 0 : _a.scrollTo({ + scrollTop + }); + } + function scrollToRow(row, strategy) { + var _a; + (_a = vue.unref(bodyRef)) == null ? void 0 : _a.scrollToItem(row, 1, strategy); + } + function forceUpdate() { + var _a, _b; + (_a = vue.unref(bodyRef)) == null ? void 0 : _a.$forceUpdate(); + (_b = vue.unref(headerRef)) == null ? void 0 : _b.$forceUpdate(); + } + return { + bodyRef, + forceUpdate, + fixedRowHeight, + gridHeight, + hasHeader, + headerHeight, + headerRef, + totalHeight, + itemKey, + onItemRendered, + resetAfterRowIndex, + scrollTo, + scrollToTop, + scrollToRow + }; + }; + const TableGrid = vue.defineComponent({ + name: COMPONENT_NAME$5, + props: tableV2GridProps, + setup(props, { + slots, + expose + }) { + const { + ns + } = vue.inject(TableV2InjectionKey); + const { + bodyRef, + fixedRowHeight, + gridHeight, + hasHeader, + headerRef, + headerHeight, + totalHeight, + forceUpdate, + itemKey, + onItemRendered, + resetAfterRowIndex, + scrollTo, + scrollToTop, + scrollToRow + } = useTableGrid(props); + expose({ + forceUpdate, + totalHeight, + scrollTo, + scrollToTop, + scrollToRow, + resetAfterRowIndex + }); + const getColumnWidth = () => props.bodyWidth; + return () => { + const { + cache, + columns, + data, + fixedData, + useIsScrolling, + scrollbarAlwaysOn, + scrollbarEndGap, + scrollbarStartGap, + style, + rowHeight, + bodyWidth, + estimatedRowHeight, + headerWidth, + height, + width, + getRowHeight, + onScroll + } = props; + const isDynamicRowEnabled = isNumber$1(estimatedRowHeight); + const Grid = isDynamicRowEnabled ? DynamicSizeGrid$1 : FixedSizeGrid$1; + const _headerHeight = vue.unref(headerHeight); + return vue.createVNode("div", { + "role": "table", + "class": [ns.e("table"), props.class], + "style": style + }, [vue.createVNode(Grid, { + "ref": bodyRef, + "data": data, + "useIsScrolling": useIsScrolling, + "itemKey": itemKey, + "columnCache": 0, + "columnWidth": isDynamicRowEnabled ? getColumnWidth : bodyWidth, + "totalColumn": 1, + "totalRow": data.length, + "rowCache": cache, + "rowHeight": isDynamicRowEnabled ? getRowHeight : rowHeight, + "width": width, + "height": vue.unref(gridHeight), + "class": ns.e("body"), + "role": "rowgroup", + "scrollbarStartGap": scrollbarStartGap, + "scrollbarEndGap": scrollbarEndGap, + "scrollbarAlwaysOn": scrollbarAlwaysOn, + "onScroll": onScroll, + "onItemRendered": onItemRendered, + "perfMode": false + }, { + default: (params) => { + var _a; + const rowData = data[params.rowIndex]; + return (_a = slots.row) == null ? void 0 : _a.call(slots, { + ...params, + columns, + rowData + }); + } + }), vue.unref(hasHeader) && vue.createVNode(Header, { + "ref": headerRef, + "class": ns.e("header-wrapper"), + "columns": columns, + "headerData": data, + "headerHeight": props.headerHeight, + "fixedHeaderData": fixedData, + "rowWidth": headerWidth, + "rowHeight": rowHeight, + "width": width, + "height": Math.min(_headerHeight + vue.unref(fixedRowHeight), height) + }, { + dynamic: slots.header, + fixed: slots.row + })]); + }; + } + }); + + function _isSlot$5(s) { + return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s); + } + const MainTable = (props, { + slots + }) => { + const { + mainTableRef, + ...rest + } = props; + return vue.createVNode(TableGrid, vue.mergeProps({ + "ref": mainTableRef + }, rest), _isSlot$5(slots) ? slots : { + default: () => [slots] + }); + }; + + function _isSlot$4(s) { + return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s); + } + const LeftTable$1 = (props, { + slots + }) => { + if (!props.columns.length) + return; + const { + leftTableRef, + ...rest + } = props; + return vue.createVNode(TableGrid, vue.mergeProps({ + "ref": leftTableRef + }, rest), _isSlot$4(slots) ? slots : { + default: () => [slots] + }); + }; + + function _isSlot$3(s) { + return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s); + } + const LeftTable = (props, { + slots + }) => { + if (!props.columns.length) + return; + const { + rightTableRef, + ...rest + } = props; + return vue.createVNode(TableGrid, vue.mergeProps({ + "ref": rightTableRef + }, rest), _isSlot$3(slots) ? slots : { + default: () => [slots] + }); + }; + + function _isSlot$2(s) { + return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s); + } + const RowRenderer = (props, { + slots + }) => { + const { + columns, + columnsStyles, + depthMap, + expandColumnKey, + expandedRowKeys, + estimatedRowHeight, + hasFixedColumns, + hoveringRowKey, + rowData, + rowIndex, + style, + isScrolling, + rowProps, + rowClass, + rowKey, + rowEventHandlers, + ns, + onRowHovered, + onRowExpanded + } = props; + const rowKls = tryCall(rowClass, { + columns, + rowData, + rowIndex + }, ""); + const additionalProps = tryCall(rowProps, { + columns, + rowData, + rowIndex + }); + const _rowKey = rowData[rowKey]; + const depth = depthMap[_rowKey] || 0; + const canExpand = Boolean(expandColumnKey); + const isFixedRow = rowIndex < 0; + const kls = [ns.e("row"), rowKls, { + [ns.e(`row-depth-${depth}`)]: canExpand && rowIndex >= 0, + [ns.is("expanded")]: canExpand && expandedRowKeys.includes(_rowKey), + [ns.is("hovered")]: !isScrolling && _rowKey === hoveringRowKey, + [ns.is("fixed")]: !depth && isFixedRow, + [ns.is("customized")]: Boolean(slots.row) + }]; + const onRowHover = hasFixedColumns ? onRowHovered : void 0; + const _rowProps = { + ...additionalProps, + columns, + columnsStyles, + class: kls, + depth, + expandColumnKey, + estimatedRowHeight: isFixedRow ? void 0 : estimatedRowHeight, + isScrolling, + rowIndex, + rowData, + rowKey: _rowKey, + rowEventHandlers, + style + }; + return vue.createVNode(Row, vue.mergeProps(_rowProps, { + "onRowHover": onRowHover, + "onRowExpand": onRowExpanded + }), _isSlot$2(slots) ? slots : { + default: () => [slots] + }); + }; + + const CellRenderer = ({ + columns, + column, + columnIndex, + depth, + expandIconProps, + isScrolling, + rowData, + rowIndex, + style, + expandedRowKeys, + ns, + cellProps: _cellProps, + expandColumnKey, + indentSize, + iconSize, + rowKey + }, { + slots + }) => { + const cellStyle = enforceUnit(style); + if (column.placeholderSign === placeholderSign) { + return vue.createVNode("div", { + "class": ns.em("row-cell", "placeholder"), + "style": cellStyle + }, null); + } + const { + cellRenderer, + dataKey, + dataGetter + } = column; + const columnCellRenderer = componentToSlot(cellRenderer); + const CellComponent = columnCellRenderer || slots.default || ((props) => vue.createVNode(TableCell, props, null)); + const cellData = isFunction$1(dataGetter) ? dataGetter({ + columns, + column, + columnIndex, + rowData, + rowIndex + }) : get(rowData, dataKey != null ? dataKey : ""); + const extraCellProps = tryCall(_cellProps, { + cellData, + columns, + column, + columnIndex, + rowIndex, + rowData + }); + const cellProps = { + class: ns.e("cell-text"), + columns, + column, + columnIndex, + cellData, + isScrolling, + rowData, + rowIndex + }; + const Cell = CellComponent(cellProps); + const kls = [ns.e("row-cell"), column.class, column.align === Alignment.CENTER && ns.is("align-center"), column.align === Alignment.RIGHT && ns.is("align-right")]; + const expandable = rowIndex >= 0 && column.key === expandColumnKey; + const expanded = rowIndex >= 0 && expandedRowKeys.includes(rowData[rowKey]); + let IconOrPlaceholder; + const iconStyle = `margin-inline-start: ${depth * indentSize}px;`; + if (expandable) { + if (isObject$1(expandIconProps)) { + IconOrPlaceholder = vue.createVNode(ExpandIcon$1, vue.mergeProps(expandIconProps, { + "class": [ns.e("expand-icon"), ns.is("expanded", expanded)], + "size": iconSize, + "expanded": expanded, + "style": iconStyle, + "expandable": true + }), null); + } else { + IconOrPlaceholder = vue.createVNode("div", { + "style": [iconStyle, `width: ${iconSize}px; height: ${iconSize}px;`].join(" ") + }, null); + } + } + return vue.createVNode("div", vue.mergeProps({ + "class": kls, + "style": cellStyle + }, extraCellProps, { + "role": "cell" + }), [IconOrPlaceholder, Cell]); + }; + CellRenderer.inheritAttrs = false; + + function _isSlot$1(s) { + return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s); + } + const HeaderRenderer = ({ + columns, + columnsStyles, + headerIndex, + style, + headerClass, + headerProps, + ns + }, { + slots + }) => { + const param = { + columns, + headerIndex + }; + const kls = [ns.e("header-row"), tryCall(headerClass, param, ""), { + [ns.is("customized")]: Boolean(slots.header) + }]; + const extraProps = { + ...tryCall(headerProps, param), + columnsStyles, + class: kls, + columns, + headerIndex, + style + }; + return vue.createVNode(HeaderRow, extraProps, _isSlot$1(slots) ? slots : { + default: () => [slots] + }); + }; + + const HeaderCellRenderer = (props, { + slots + }) => { + const { + column, + ns, + style, + onColumnSorted + } = props; + const cellStyle = enforceUnit(style); + if (column.placeholderSign === placeholderSign) { + return vue.createVNode("div", { + "class": ns.em("header-row-cell", "placeholder"), + "style": cellStyle + }, null); + } + const { + headerCellRenderer, + headerClass, + sortable + } = column; + const cellProps = { + ...props, + class: ns.e("header-cell-text") + }; + const cellRenderer = componentToSlot(headerCellRenderer) || slots.default || ((props2) => vue.createVNode(HeaderCell$1, props2, null)); + const Cell = cellRenderer(cellProps); + const { + sortBy, + sortState, + headerCellProps + } = props; + let sorting, sortOrder; + if (sortState) { + const order = sortState[column.key]; + sorting = Boolean(oppositeOrderMap[order]); + sortOrder = sorting ? order : SortOrder.ASC; + } else { + sorting = column.key === sortBy.key; + sortOrder = sorting ? sortBy.order : SortOrder.ASC; + } + const cellKls = [ns.e("header-cell"), tryCall(headerClass, props, ""), column.align === Alignment.CENTER && ns.is("align-center"), column.align === Alignment.RIGHT && ns.is("align-right"), sortable && ns.is("sortable")]; + const cellWrapperProps = { + ...tryCall(headerCellProps, props), + onClick: column.sortable ? onColumnSorted : void 0, + class: cellKls, + style: cellStyle, + ["data-key"]: column.key + }; + return vue.createVNode("div", vue.mergeProps(cellWrapperProps, { + "role": "columnheader" + }), [Cell, sortable && vue.createVNode(SortIcon$1, { + "class": [ns.e("sort-icon"), sorting && ns.is("sorting")], + "sortOrder": sortOrder + }, null)]); + }; + + const Footer$1 = (props, { + slots + }) => { + var _a; + return vue.createVNode("div", { + "class": props.class, + "style": props.style + }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]); + }; + Footer$1.displayName = "ElTableV2Footer"; + + const Footer = (props, { + slots + }) => { + return vue.createVNode("div", { + "class": props.class, + "style": props.style + }, [slots.default ? slots.default() : vue.createVNode(ElEmpty, null, null)]); + }; + Footer.displayName = "ElTableV2Empty"; + + const Overlay = (props, { + slots + }) => { + var _a; + return vue.createVNode("div", { + "class": props.class, + "style": props.style + }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]); + }; + Overlay.displayName = "ElTableV2Overlay"; + + function _isSlot(s) { + return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s); + } + const COMPONENT_NAME$4 = "ElTableV2"; + const TableV2 = vue.defineComponent({ + name: COMPONENT_NAME$4, + props: tableV2Props, + setup(props, { + slots, + expose + }) { + const ns = useNamespace("table-v2"); + const { + columnsStyles, + fixedColumnsOnLeft, + fixedColumnsOnRight, + mainColumns, + mainTableHeight, + fixedTableHeight, + leftTableWidth, + rightTableWidth, + data, + depthMap, + expandedRowKeys, + hasFixedColumns, + hoveringRowKey, + mainTableRef, + leftTableRef, + rightTableRef, + isDynamic, + isResetting, + isScrolling, + bodyWidth, + emptyStyle, + rootStyle, + headerWidth, + footerHeight, + showEmpty, + scrollTo, + scrollToLeft, + scrollToTop, + scrollToRow, + getRowHeight, + onColumnSorted, + onRowHeightChange, + onRowHovered, + onRowExpanded, + onRowsRendered, + onScroll, + onVerticalScroll + } = useTable(props); + expose({ + scrollTo, + scrollToLeft, + scrollToTop, + scrollToRow + }); + vue.provide(TableV2InjectionKey, { + ns, + isResetting, + hoveringRowKey, + isScrolling + }); + return () => { + const { + cache, + cellProps, + estimatedRowHeight, + expandColumnKey, + fixedData, + headerHeight, + headerClass, + headerProps, + headerCellProps, + sortBy, + sortState, + rowHeight, + rowClass, + rowEventHandlers, + rowKey, + rowProps, + scrollbarAlwaysOn, + indentSize, + iconSize, + useIsScrolling, + vScrollbarSize, + width + } = props; + const _data = vue.unref(data); + const mainTableProps = { + cache, + class: ns.e("main"), + columns: vue.unref(mainColumns), + data: _data, + fixedData, + estimatedRowHeight, + bodyWidth: vue.unref(bodyWidth), + headerHeight, + headerWidth: vue.unref(headerWidth), + height: vue.unref(mainTableHeight), + mainTableRef, + rowKey, + rowHeight, + scrollbarAlwaysOn, + scrollbarStartGap: 2, + scrollbarEndGap: vScrollbarSize, + useIsScrolling, + width, + getRowHeight, + onRowsRendered, + onScroll + }; + const leftColumnsWidth = vue.unref(leftTableWidth); + const _fixedTableHeight = vue.unref(fixedTableHeight); + const leftTableProps = { + cache, + class: ns.e("left"), + columns: vue.unref(fixedColumnsOnLeft), + data: _data, + estimatedRowHeight, + leftTableRef, + rowHeight, + bodyWidth: leftColumnsWidth, + headerWidth: leftColumnsWidth, + headerHeight, + height: _fixedTableHeight, + rowKey, + scrollbarAlwaysOn, + scrollbarStartGap: 2, + scrollbarEndGap: vScrollbarSize, + useIsScrolling, + width: leftColumnsWidth, + getRowHeight, + onScroll: onVerticalScroll + }; + const rightColumnsWidth = vue.unref(rightTableWidth); + const rightColumnsWidthWithScrollbar = rightColumnsWidth + vScrollbarSize; + const rightTableProps = { + cache, + class: ns.e("right"), + columns: vue.unref(fixedColumnsOnRight), + data: _data, + estimatedRowHeight, + rightTableRef, + rowHeight, + bodyWidth: rightColumnsWidthWithScrollbar, + headerWidth: rightColumnsWidthWithScrollbar, + headerHeight, + height: _fixedTableHeight, + rowKey, + scrollbarAlwaysOn, + scrollbarStartGap: 2, + scrollbarEndGap: vScrollbarSize, + width: rightColumnsWidthWithScrollbar, + style: `--${vue.unref(ns.namespace)}-table-scrollbar-size: ${vScrollbarSize}px`, + useIsScrolling, + getRowHeight, + onScroll: onVerticalScroll + }; + const _columnsStyles = vue.unref(columnsStyles); + const tableRowProps = { + ns, + depthMap: vue.unref(depthMap), + columnsStyles: _columnsStyles, + expandColumnKey, + expandedRowKeys: vue.unref(expandedRowKeys), + estimatedRowHeight, + hasFixedColumns: vue.unref(hasFixedColumns), + hoveringRowKey: vue.unref(hoveringRowKey), + rowProps, + rowClass, + rowKey, + rowEventHandlers, + onRowHovered, + onRowExpanded, + onRowHeightChange + }; + const tableCellProps = { + cellProps, + expandColumnKey, + indentSize, + iconSize, + rowKey, + expandedRowKeys: vue.unref(expandedRowKeys), + ns + }; + const tableHeaderProps = { + ns, + headerClass, + headerProps, + columnsStyles: _columnsStyles + }; + const tableHeaderCellProps = { + ns, + sortBy, + sortState, + headerCellProps, + onColumnSorted + }; + const tableSlots = { + row: (props2) => vue.createVNode(RowRenderer, vue.mergeProps(props2, tableRowProps), { + row: slots.row, + cell: (props3) => { + let _slot; + return slots.cell ? vue.createVNode(CellRenderer, vue.mergeProps(props3, tableCellProps, { + "style": _columnsStyles[props3.column.key] + }), _isSlot(_slot = slots.cell(props3)) ? _slot : { + default: () => [_slot] + }) : vue.createVNode(CellRenderer, vue.mergeProps(props3, tableCellProps, { + "style": _columnsStyles[props3.column.key] + }), null); + } + }), + header: (props2) => vue.createVNode(HeaderRenderer, vue.mergeProps(props2, tableHeaderProps), { + header: slots.header, + cell: (props3) => { + let _slot2; + return slots["header-cell"] ? vue.createVNode(HeaderCellRenderer, vue.mergeProps(props3, tableHeaderCellProps, { + "style": _columnsStyles[props3.column.key] + }), _isSlot(_slot2 = slots["header-cell"](props3)) ? _slot2 : { + default: () => [_slot2] + }) : vue.createVNode(HeaderCellRenderer, vue.mergeProps(props3, tableHeaderCellProps, { + "style": _columnsStyles[props3.column.key] + }), null); + } + }) + }; + const rootKls = [props.class, ns.b(), ns.e("root"), { + [ns.is("dynamic")]: vue.unref(isDynamic) + }]; + const footerProps = { + class: ns.e("footer"), + style: vue.unref(footerHeight) + }; + return vue.createVNode("div", { + "class": rootKls, + "style": vue.unref(rootStyle) + }, [vue.createVNode(MainTable, mainTableProps, _isSlot(tableSlots) ? tableSlots : { + default: () => [tableSlots] + }), vue.createVNode(LeftTable$1, leftTableProps, _isSlot(tableSlots) ? tableSlots : { + default: () => [tableSlots] + }), vue.createVNode(LeftTable, rightTableProps, _isSlot(tableSlots) ? tableSlots : { + default: () => [tableSlots] + }), slots.footer && vue.createVNode(Footer$1, footerProps, { + default: slots.footer + }), vue.unref(showEmpty) && vue.createVNode(Footer, { + "class": ns.e("empty"), + "style": vue.unref(emptyStyle) + }, { + default: slots.empty + }), slots.overlay && vue.createVNode(Overlay, { + "class": ns.e("overlay") + }, { + default: slots.overlay + })]); + }; + } + }); + var TableV2$1 = TableV2; + + const autoResizerProps = buildProps({ + disableWidth: Boolean, + disableHeight: Boolean, + onResize: { + type: definePropType(Function) + } + }); + + const AutoResizer = vue.defineComponent({ + name: "ElAutoResizer", + props: autoResizerProps, + setup(props, { + slots + }) { + const ns = useNamespace("auto-resizer"); + const { + height, + width, + sizer + } = useAutoResize(props); + const style = { + width: "100%", + height: "100%" + }; + return () => { + var _a; + return vue.createVNode("div", { + "ref": sizer, + "class": ns.b(), + "style": style + }, [(_a = slots.default) == null ? void 0 : _a.call(slots, { + height: height.value, + width: width.value + })]); + }; + } + }); + + const ElTableV2 = withInstall(TableV2$1); + const ElAutoResizer = withInstall(AutoResizer); + + const tabsRootContextKey = Symbol("tabsRootContextKey"); + + const tabBarProps = buildProps({ + tabs: { + type: definePropType(Array), + default: () => mutable([]) + } + }); + + const COMPONENT_NAME$3 = "ElTabBar"; + const __default__$k = vue.defineComponent({ + name: COMPONENT_NAME$3 + }); + const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({ + ...__default__$k, + props: tabBarProps, + setup(__props, { expose }) { + const props = __props; + const instance = vue.getCurrentInstance(); + const rootTabs = vue.inject(tabsRootContextKey); + if (!rootTabs) + throwError(COMPONENT_NAME$3, "<el-tabs><el-tab-bar /></el-tabs>"); + const ns = useNamespace("tabs"); + const barRef = vue.ref(); + const barStyle = vue.ref(); + const getBarStyle = () => { + let offset = 0; + let tabSize = 0; + const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height"; + const sizeDir = sizeName === "width" ? "x" : "y"; + const position = sizeDir === "x" ? "left" : "top"; + props.tabs.every((tab) => { + var _a, _b; + const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`]; + if (!$el) + return false; + if (!tab.active) { + return true; + } + offset = $el[`offset${capitalize(position)}`]; + tabSize = $el[`client${capitalize(sizeName)}`]; + const tabStyles = window.getComputedStyle($el); + if (sizeName === "width") { + if (props.tabs.length > 1) { + tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight); + } + offset += Number.parseFloat(tabStyles.paddingLeft); + } + return false; + }); + return { + [sizeName]: `${tabSize}px`, + transform: `translate${capitalize(sizeDir)}(${offset}px)` + }; + }; + const update = () => barStyle.value = getBarStyle(); + vue.watch(() => props.tabs, async () => { + await vue.nextTick(); + update(); + }, { immediate: true }); + useResizeObserver(barRef, () => update()); + expose({ + ref: barRef, + update + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + ref_key: "barRef", + ref: barRef, + class: vue.normalizeClass([vue.unref(ns).e("active-bar"), vue.unref(ns).is(vue.unref(rootTabs).props.tabPosition)]), + style: vue.normalizeStyle(barStyle.value) + }, null, 6); + }; + } + }); + var TabBar = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__file", "tab-bar.vue"]]); + + const tabNavProps = buildProps({ + panes: { + type: definePropType(Array), + default: () => mutable([]) + }, + currentName: { + type: [String, Number], + default: "" + }, + editable: Boolean, + type: { + type: String, + values: ["card", "border-card", ""], + default: "" + }, + stretch: Boolean + }); + const tabNavEmits = { + tabClick: (tab, tabName, ev) => ev instanceof Event, + tabRemove: (tab, ev) => ev instanceof Event + }; + const COMPONENT_NAME$2 = "ElTabNav"; + const TabNav = vue.defineComponent({ + name: COMPONENT_NAME$2, + props: tabNavProps, + emits: tabNavEmits, + setup(props, { + expose, + emit + }) { + const vm = vue.getCurrentInstance(); + const rootTabs = vue.inject(tabsRootContextKey); + if (!rootTabs) + throwError(COMPONENT_NAME$2, `<el-tabs><tab-nav /></el-tabs>`); + const ns = useNamespace("tabs"); + const visibility = useDocumentVisibility(); + const focused = useWindowFocus(); + const navScroll$ = vue.ref(); + const nav$ = vue.ref(); + const el$ = vue.ref(); + const tabBarRef = vue.ref(); + const scrollable = vue.ref(false); + const navOffset = vue.ref(0); + const isFocus = vue.ref(false); + const focusable = vue.ref(true); + const sizeName = vue.computed(() => ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height"); + const navStyle = vue.computed(() => { + const dir = sizeName.value === "width" ? "X" : "Y"; + return { + transform: `translate${dir}(-${navOffset.value}px)` + }; + }); + const scrollPrev = () => { + if (!navScroll$.value) + return; + const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`]; + const currentOffset = navOffset.value; + if (!currentOffset) + return; + const newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0; + navOffset.value = newOffset; + }; + const scrollNext = () => { + if (!navScroll$.value || !nav$.value) + return; + const navSize = nav$.value[`offset${capitalize(sizeName.value)}`]; + const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`]; + const currentOffset = navOffset.value; + if (navSize - currentOffset <= containerSize) + return; + const newOffset = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize; + navOffset.value = newOffset; + }; + const scrollToActiveTab = async () => { + const nav = nav$.value; + if (!scrollable.value || !el$.value || !navScroll$.value || !nav) + return; + await vue.nextTick(); + const activeTab = el$.value.querySelector(".is-active"); + if (!activeTab) + return; + const navScroll = navScroll$.value; + const isHorizontal = ["top", "bottom"].includes(rootTabs.props.tabPosition); + const activeTabBounding = activeTab.getBoundingClientRect(); + const navScrollBounding = navScroll.getBoundingClientRect(); + const maxOffset = isHorizontal ? nav.offsetWidth - navScrollBounding.width : nav.offsetHeight - navScrollBounding.height; + const currentOffset = navOffset.value; + let newOffset = currentOffset; + if (isHorizontal) { + if (activeTabBounding.left < navScrollBounding.left) { + newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left); + } + if (activeTabBounding.right > navScrollBounding.right) { + newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right; + } + } else { + if (activeTabBounding.top < navScrollBounding.top) { + newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top); + } + if (activeTabBounding.bottom > navScrollBounding.bottom) { + newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom); + } + } + newOffset = Math.max(newOffset, 0); + navOffset.value = Math.min(newOffset, maxOffset); + }; + const update = () => { + var _a; + if (!nav$.value || !navScroll$.value) + return; + props.stretch && ((_a = tabBarRef.value) == null ? void 0 : _a.update()); + const navSize = nav$.value[`offset${capitalize(sizeName.value)}`]; + const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`]; + const currentOffset = navOffset.value; + if (containerSize < navSize) { + scrollable.value = scrollable.value || {}; + scrollable.value.prev = currentOffset; + scrollable.value.next = currentOffset + containerSize < navSize; + if (navSize - currentOffset < containerSize) { + navOffset.value = navSize - containerSize; + } + } else { + scrollable.value = false; + if (currentOffset > 0) { + navOffset.value = 0; + } + } + }; + const changeTab = (e) => { + const code = e.code; + const { + up, + down, + left, + right + } = EVENT_CODE; + if (![up, down, left, right].includes(code)) + return; + const tabList = Array.from(e.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)")); + const currentIndex = tabList.indexOf(e.target); + let nextIndex; + if (code === left || code === up) { + if (currentIndex === 0) { + nextIndex = tabList.length - 1; + } else { + nextIndex = currentIndex - 1; + } + } else { + if (currentIndex < tabList.length - 1) { + nextIndex = currentIndex + 1; + } else { + nextIndex = 0; + } + } + tabList[nextIndex].focus({ + preventScroll: true + }); + tabList[nextIndex].click(); + setFocus(); + }; + const setFocus = () => { + if (focusable.value) + isFocus.value = true; + }; + const removeFocus = () => isFocus.value = false; + vue.watch(visibility, (visibility2) => { + if (visibility2 === "hidden") { + focusable.value = false; + } else if (visibility2 === "visible") { + setTimeout(() => focusable.value = true, 50); + } + }); + vue.watch(focused, (focused2) => { + if (focused2) { + setTimeout(() => focusable.value = true, 50); + } else { + focusable.value = false; + } + }); + useResizeObserver(el$, update); + vue.onMounted(() => setTimeout(() => scrollToActiveTab(), 0)); + vue.onUpdated(() => update()); + expose({ + scrollToActiveTab, + removeFocus + }); + vue.watch(() => props.panes, () => vm.update(), { + flush: "post", + deep: true + }); + return () => { + const scrollBtn = scrollable.value ? [vue.createVNode("span", { + "class": [ns.e("nav-prev"), ns.is("disabled", !scrollable.value.prev)], + "onClick": scrollPrev + }, [vue.createVNode(ElIcon, null, { + default: () => [vue.createVNode(arrow_left_default, null, null)] + })]), vue.createVNode("span", { + "class": [ns.e("nav-next"), ns.is("disabled", !scrollable.value.next)], + "onClick": scrollNext + }, [vue.createVNode(ElIcon, null, { + default: () => [vue.createVNode(arrow_right_default, null, null)] + })])] : null; + const tabs = props.panes.map((pane, index) => { + var _a, _b, _c, _d; + const uid = pane.uid; + const disabled = pane.props.disabled; + const tabName = (_b = (_a = pane.props.name) != null ? _a : pane.index) != null ? _b : `${index}`; + const closable = !disabled && (pane.isClosable || props.editable); + pane.index = `${index}`; + const btnClose = closable ? vue.createVNode(ElIcon, { + "class": "is-icon-close", + "onClick": (ev) => emit("tabRemove", pane, ev) + }, { + default: () => [vue.createVNode(close_default, null, null)] + }) : null; + const tabLabelContent = ((_d = (_c = pane.slots).label) == null ? void 0 : _d.call(_c)) || pane.props.label; + const tabindex = !disabled && pane.active ? 0 : -1; + return vue.createVNode("div", { + "ref": `tab-${uid}`, + "class": [ns.e("item"), ns.is(rootTabs.props.tabPosition), ns.is("active", pane.active), ns.is("disabled", disabled), ns.is("closable", closable), ns.is("focus", isFocus.value)], + "id": `tab-${tabName}`, + "key": `tab-${uid}`, + "aria-controls": `pane-${tabName}`, + "role": "tab", + "aria-selected": pane.active, + "tabindex": tabindex, + "onFocus": () => setFocus(), + "onBlur": () => removeFocus(), + "onClick": (ev) => { + removeFocus(); + emit("tabClick", pane, tabName, ev); + }, + "onKeydown": (ev) => { + if (closable && (ev.code === EVENT_CODE.delete || ev.code === EVENT_CODE.backspace)) { + emit("tabRemove", pane, ev); + } + } + }, [...[tabLabelContent, btnClose]]); + }); + return vue.createVNode("div", { + "ref": el$, + "class": [ns.e("nav-wrap"), ns.is("scrollable", !!scrollable.value), ns.is(rootTabs.props.tabPosition)] + }, [scrollBtn, vue.createVNode("div", { + "class": ns.e("nav-scroll"), + "ref": navScroll$ + }, [vue.createVNode("div", { + "class": [ns.e("nav"), ns.is(rootTabs.props.tabPosition), ns.is("stretch", props.stretch && ["top", "bottom"].includes(rootTabs.props.tabPosition))], + "ref": nav$, + "style": navStyle.value, + "role": "tablist", + "onKeydown": changeTab + }, [...[!props.type ? vue.createVNode(TabBar, { + "ref": tabBarRef, + "tabs": [...props.panes] + }, null) : null, tabs]])])]); + }; + } + }); + + const tabsProps = buildProps({ + type: { + type: String, + values: ["card", "border-card", ""], + default: "" + }, + activeName: { + type: [String, Number] + }, + closable: Boolean, + addable: Boolean, + modelValue: { + type: [String, Number] + }, + editable: Boolean, + tabPosition: { + type: String, + values: ["top", "right", "bottom", "left"], + default: "top" + }, + beforeLeave: { + type: definePropType(Function), + default: () => true + }, + stretch: Boolean + }); + const isPaneName = (value) => isString$1(value) || isNumber$1(value); + const tabsEmits = { + [UPDATE_MODEL_EVENT]: (name) => isPaneName(name), + tabClick: (pane, ev) => ev instanceof Event, + tabChange: (name) => isPaneName(name), + edit: (paneName, action) => ["remove", "add"].includes(action), + tabRemove: (name) => isPaneName(name), + tabAdd: () => true + }; + var Tabs = vue.defineComponent({ + name: "ElTabs", + props: tabsProps, + emits: tabsEmits, + setup(props, { + emit, + slots, + expose + }) { + var _a, _b; + const ns = useNamespace("tabs"); + const { + children: panes, + addChild: registerPane, + removeChild: unregisterPane + } = useOrderedChildren(vue.getCurrentInstance(), "ElTabPane"); + const nav$ = vue.ref(); + const currentName = vue.ref((_b = (_a = props.modelValue) != null ? _a : props.activeName) != null ? _b : "0"); + const changeCurrentName = (value) => { + currentName.value = value; + emit(UPDATE_MODEL_EVENT, value); + emit("tabChange", value); + }; + const setCurrentName = async (value) => { + var _a2, _b2, _c; + if (currentName.value === value || isUndefined(value)) + return; + try { + const canLeave = await ((_a2 = props.beforeLeave) == null ? void 0 : _a2.call(props, value, currentName.value)); + if (canLeave !== false) { + changeCurrentName(value); + (_c = (_b2 = nav$.value) == null ? void 0 : _b2.removeFocus) == null ? void 0 : _c.call(_b2); + } + } catch (e) { + } + }; + const handleTabClick = (tab, tabName, event) => { + if (tab.props.disabled) + return; + setCurrentName(tabName); + emit("tabClick", tab, event); + }; + const handleTabRemove = (pane, ev) => { + if (pane.props.disabled || isUndefined(pane.props.name)) + return; + ev.stopPropagation(); + emit("edit", pane.props.name, "remove"); + emit("tabRemove", pane.props.name); + }; + const handleTabAdd = () => { + emit("edit", void 0, "add"); + emit("tabAdd"); + }; + useDeprecated({ + from: '"activeName"', + replacement: '"model-value" or "v-model"', + scope: "ElTabs", + version: "2.3.0", + ref: "https://element-plus.org/en-US/component/tabs.html#attributes", + type: "Attribute" + }, vue.computed(() => !!props.activeName)); + vue.watch(() => props.activeName, (modelValue) => setCurrentName(modelValue)); + vue.watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue)); + vue.watch(currentName, async () => { + var _a2; + await vue.nextTick(); + (_a2 = nav$.value) == null ? void 0 : _a2.scrollToActiveTab(); + }); + vue.provide(tabsRootContextKey, { + props, + currentName, + registerPane, + unregisterPane + }); + expose({ + currentName + }); + return () => { + const newButton = props.editable || props.addable ? vue.createVNode("span", { + "class": ns.e("new-tab"), + "tabindex": "0", + "onClick": handleTabAdd, + "onKeydown": (ev) => { + if (ev.code === EVENT_CODE.enter) + handleTabAdd(); + } + }, [vue.createVNode(ElIcon, { + "class": ns.is("icon-plus") + }, { + default: () => [vue.createVNode(plus_default, null, null)] + })]) : null; + const header = vue.createVNode("div", { + "class": [ns.e("header"), ns.is(props.tabPosition)] + }, [newButton, vue.createVNode(TabNav, { + "ref": nav$, + "currentName": currentName.value, + "editable": props.editable, + "type": props.type, + "panes": panes.value, + "stretch": props.stretch, + "onTabClick": handleTabClick, + "onTabRemove": handleTabRemove + }, null)]); + const panels = vue.createVNode("div", { + "class": ns.e("content") + }, [vue.renderSlot(slots, "default")]); + return vue.createVNode("div", { + "class": [ns.b(), ns.m(props.tabPosition), { + [ns.m("card")]: props.type === "card", + [ns.m("border-card")]: props.type === "border-card" + }] + }, [...props.tabPosition !== "bottom" ? [header, panels] : [panels, header]]); + }; + } + }); + + const tabPaneProps = buildProps({ + label: { + type: String, + default: "" + }, + name: { + type: [String, Number] + }, + closable: Boolean, + disabled: Boolean, + lazy: Boolean + }); + + const _hoisted_1$a = ["id", "aria-hidden", "aria-labelledby"]; + const COMPONENT_NAME$1 = "ElTabPane"; + const __default__$j = vue.defineComponent({ + name: COMPONENT_NAME$1 + }); + const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({ + ...__default__$j, + props: tabPaneProps, + setup(__props) { + const props = __props; + const instance = vue.getCurrentInstance(); + const slots = vue.useSlots(); + const tabsRoot = vue.inject(tabsRootContextKey); + if (!tabsRoot) + throwError(COMPONENT_NAME$1, "usage: <el-tabs><el-tab-pane /></el-tabs/>"); + const ns = useNamespace("tab-pane"); + const index = vue.ref(); + const isClosable = vue.computed(() => props.closable || tabsRoot.props.closable); + const active = computedEager(() => { + var _a; + return tabsRoot.currentName.value === ((_a = props.name) != null ? _a : index.value); + }); + const loaded = vue.ref(active.value); + const paneName = vue.computed(() => { + var _a; + return (_a = props.name) != null ? _a : index.value; + }); + const shouldBeRender = computedEager(() => !props.lazy || loaded.value || active.value); + vue.watch(active, (val) => { + if (val) + loaded.value = true; + }); + const pane = vue.reactive({ + uid: instance.uid, + slots, + props, + paneName, + active, + index, + isClosable + }); + vue.onMounted(() => { + tabsRoot.registerPane(pane); + }); + vue.onUnmounted(() => { + tabsRoot.unregisterPane(pane.uid); + }); + return (_ctx, _cache) => { + return vue.unref(shouldBeRender) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { + key: 0, + id: `pane-${vue.unref(paneName)}`, + class: vue.normalizeClass(vue.unref(ns).b()), + role: "tabpanel", + "aria-hidden": !vue.unref(active), + "aria-labelledby": `tab-${vue.unref(paneName)}` + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 10, _hoisted_1$a)), [ + [vue.vShow, vue.unref(active)] + ]) : vue.createCommentVNode("v-if", true); + }; + } + }); + var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__file", "tab-pane.vue"]]); + + const ElTabs = withInstall(Tabs, { + TabPane + }); + const ElTabPane = withNoopInstall(TabPane); + + const textProps = buildProps({ + type: { + type: String, + values: ["primary", "success", "info", "warning", "danger", ""], + default: "" + }, + size: { + type: String, + values: componentSizes, + default: "" + }, + truncated: { + type: Boolean + }, + tag: { + type: String, + default: "span" + } + }); + + const __default__$i = vue.defineComponent({ + name: "ElText" + }); + const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({ + ...__default__$i, + props: textProps, + setup(__props) { + const props = __props; + const textSize = useFormSize(); + const ns = useNamespace("text"); + const textKls = vue.computed(() => [ + ns.b(), + ns.m(props.type), + ns.m(textSize.value), + ns.is("truncated", props.truncated) + ]); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), { + class: vue.normalizeClass(vue.unref(textKls)) + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["class"]); + }; + } + }); + var Text = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__file", "text.vue"]]); + + const ElText = withInstall(Text); + + const timeSelectProps = buildProps({ + format: { + type: String, + default: "HH:mm" + }, + modelValue: String, + disabled: Boolean, + editable: { + type: Boolean, + default: true + }, + effect: { + type: String, + default: "light" + }, + clearable: { + type: Boolean, + default: true + }, + size: useSizeProp, + placeholder: String, + start: { + type: String, + default: "09:00" + }, + end: { + type: String, + default: "18:00" + }, + step: { + type: String, + default: "00:30" + }, + minTime: String, + maxTime: String, + name: String, + prefixIcon: { + type: definePropType([String, Object]), + default: () => clock_default + }, + clearIcon: { + type: definePropType([String, Object]), + default: () => circle_close_default + } + }); + + const parseTime = (time) => { + const values = (time || "").split(":"); + if (values.length >= 2) { + let hours = Number.parseInt(values[0], 10); + const minutes = Number.parseInt(values[1], 10); + const timeUpper = time.toUpperCase(); + if (timeUpper.includes("AM") && hours === 12) { + hours = 0; + } else if (timeUpper.includes("PM") && hours !== 12) { + hours += 12; + } + return { + hours, + minutes + }; + } + return null; + }; + const compareTime = (time1, time2) => { + const value1 = parseTime(time1); + if (!value1) + return -1; + const value2 = parseTime(time2); + if (!value2) + return -1; + const minutes1 = value1.minutes + value1.hours * 60; + const minutes2 = value2.minutes + value2.hours * 60; + if (minutes1 === minutes2) { + return 0; + } + return minutes1 > minutes2 ? 1 : -1; + }; + const padTime = (time) => { + return `${time}`.padStart(2, "0"); + }; + const formatTime = (time) => { + return `${padTime(time.hours)}:${padTime(time.minutes)}`; + }; + const nextTime = (time, step) => { + const timeValue = parseTime(time); + if (!timeValue) + return ""; + const stepValue = parseTime(step); + if (!stepValue) + return ""; + const next = { + hours: timeValue.hours, + minutes: timeValue.minutes + }; + next.minutes += stepValue.minutes; + next.hours += stepValue.hours; + next.hours += Math.floor(next.minutes / 60); + next.minutes = next.minutes % 60; + return formatTime(next); + }; + + const __default__$h = vue.defineComponent({ + name: "ElTimeSelect" + }); + const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({ + ...__default__$h, + props: timeSelectProps, + emits: ["change", "blur", "focus", "update:modelValue"], + setup(__props, { expose }) { + const props = __props; + dayjs.extend(customParseFormat); + const { Option: ElOption } = ElSelect; + const nsInput = useNamespace("input"); + const select = vue.ref(); + const _disabled = useFormDisabled(); + const value = vue.computed(() => props.modelValue); + const start = vue.computed(() => { + const time = parseTime(props.start); + return time ? formatTime(time) : null; + }); + const end = vue.computed(() => { + const time = parseTime(props.end); + return time ? formatTime(time) : null; + }); + const step = vue.computed(() => { + const time = parseTime(props.step); + return time ? formatTime(time) : null; + }); + const minTime = vue.computed(() => { + const time = parseTime(props.minTime || ""); + return time ? formatTime(time) : null; + }); + const maxTime = vue.computed(() => { + const time = parseTime(props.maxTime || ""); + return time ? formatTime(time) : null; + }); + const items = vue.computed(() => { + const result = []; + if (props.start && props.end && props.step) { + let current = start.value; + let currentTime; + while (current && end.value && compareTime(current, end.value) <= 0) { + currentTime = dayjs(current, "HH:mm").format(props.format); + result.push({ + value: currentTime, + disabled: compareTime(current, minTime.value || "-1:-1") <= 0 || compareTime(current, maxTime.value || "100:100") >= 0 + }); + current = nextTime(current, step.value); + } + } + return result; + }); + const blur = () => { + var _a, _b; + (_b = (_a = select.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a); + }; + const focus = () => { + var _a, _b; + (_b = (_a = select.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a); + }; + expose({ + blur, + focus + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElSelect), { + ref_key: "select", + ref: select, + "model-value": vue.unref(value), + disabled: vue.unref(_disabled), + clearable: _ctx.clearable, + "clear-icon": _ctx.clearIcon, + size: _ctx.size, + effect: _ctx.effect, + placeholder: _ctx.placeholder, + "default-first-option": "", + filterable: _ctx.editable, + "onUpdate:modelValue": _cache[0] || (_cache[0] = (event) => _ctx.$emit("update:modelValue", event)), + onChange: _cache[1] || (_cache[1] = (event) => _ctx.$emit("change", event)), + onBlur: _cache[2] || (_cache[2] = (event) => _ctx.$emit("blur", event)), + onFocus: _cache[3] || (_cache[3] = (event) => _ctx.$emit("focus", event)) + }, { + prefix: vue.withCtx(() => [ + _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(nsInput).e("prefix-icon")) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.prefixIcon))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ]), + default: vue.withCtx(() => [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (item) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElOption), { + key: item.value, + label: item.value, + value: item.value, + disabled: item.disabled + }, null, 8, ["label", "value", "disabled"]); + }), 128)) + ]), + _: 1 + }, 8, ["model-value", "disabled", "clearable", "clear-icon", "size", "effect", "placeholder", "filterable"]); + }; + } + }); + var TimeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__file", "time-select.vue"]]); + + TimeSelect.install = (app) => { + app.component(TimeSelect.name, TimeSelect); + }; + const _TimeSelect = TimeSelect; + const ElTimeSelect = _TimeSelect; + + const Timeline = vue.defineComponent({ + name: "ElTimeline", + setup(_, { slots }) { + const ns = useNamespace("timeline"); + vue.provide("timeline", slots); + return () => { + return vue.h("ul", { class: [ns.b()] }, [vue.renderSlot(slots, "default")]); + }; + } + }); + var Timeline$1 = Timeline; + + const timelineItemProps = buildProps({ + timestamp: { + type: String, + default: "" + }, + hideTimestamp: { + type: Boolean, + default: false + }, + center: { + type: Boolean, + default: false + }, + placement: { + type: String, + values: ["top", "bottom"], + default: "bottom" + }, + type: { + type: String, + values: ["primary", "success", "warning", "danger", "info"], + default: "" + }, + color: { + type: String, + default: "" + }, + size: { + type: String, + values: ["normal", "large"], + default: "normal" + }, + icon: { + type: iconPropType + }, + hollow: { + type: Boolean, + default: false + } + }); + + const __default__$g = vue.defineComponent({ + name: "ElTimelineItem" + }); + const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({ + ...__default__$g, + props: timelineItemProps, + setup(__props) { + const ns = useNamespace("timeline-item"); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("li", { + class: vue.normalizeClass([vue.unref(ns).b(), { [vue.unref(ns).e("center")]: _ctx.center }]) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("tail")) + }, null, 2), + !_ctx.$slots.dot ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass([ + vue.unref(ns).e("node"), + vue.unref(ns).em("node", _ctx.size || ""), + vue.unref(ns).em("node", _ctx.type || ""), + vue.unref(ns).is("hollow", _ctx.hollow) + ]), + style: vue.normalizeStyle({ + backgroundColor: _ctx.color + }) + }, [ + _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("icon")) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ], 6)) : vue.createCommentVNode("v-if", true), + _ctx.$slots.dot ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("dot")) + }, [ + vue.renderSlot(_ctx.$slots, "dot") + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("wrapper")) + }, [ + !_ctx.hideTimestamp && _ctx.placement === "top" ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass([vue.unref(ns).e("timestamp"), vue.unref(ns).is("top")]) + }, vue.toDisplayString(_ctx.timestamp), 3)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("content")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2), + !_ctx.hideTimestamp && _ctx.placement === "bottom" ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass([vue.unref(ns).e("timestamp"), vue.unref(ns).is("bottom")]) + }, vue.toDisplayString(_ctx.timestamp), 3)) : vue.createCommentVNode("v-if", true) + ], 2) + ], 2); + }; + } + }); + var TimelineItem = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__file", "timeline-item.vue"]]); + + const ElTimeline = withInstall(Timeline$1, { + TimelineItem + }); + const ElTimelineItem = withNoopInstall(TimelineItem); + + const tooltipV2CommonProps = buildProps({ + nowrap: Boolean + }); + var TooltipV2Sides = /* @__PURE__ */ ((TooltipV2Sides2) => { + TooltipV2Sides2["top"] = "top"; + TooltipV2Sides2["bottom"] = "bottom"; + TooltipV2Sides2["left"] = "left"; + TooltipV2Sides2["right"] = "right"; + return TooltipV2Sides2; + })(TooltipV2Sides || {}); + const tooltipV2Sides = Object.values(TooltipV2Sides); + + const tooltipV2ArrowProps = buildProps({ + width: { + type: Number, + default: 10 + }, + height: { + type: Number, + default: 10 + }, + style: { + type: definePropType(Object), + default: null + } + }); + const tooltipV2ArrowSpecialProps = buildProps({ + side: { + type: definePropType(String), + values: tooltipV2Sides, + required: true + } + }); + + const tooltipV2Strategies = ["absolute", "fixed"]; + const tooltipV2Placements = [ + "top-start", + "top-end", + "top", + "bottom-start", + "bottom-end", + "bottom", + "left-start", + "left-end", + "left", + "right-start", + "right-end", + "right" + ]; + const tooltipV2ContentProps = buildProps({ + ariaLabel: String, + arrowPadding: { + type: definePropType(Number), + default: 5 + }, + effect: { + type: String, + default: "" + }, + contentClass: String, + placement: { + type: definePropType(String), + values: tooltipV2Placements, + default: "bottom" + }, + reference: { + type: definePropType(Object), + default: null + }, + offset: { + type: Number, + default: 8 + }, + strategy: { + type: definePropType(String), + values: tooltipV2Strategies, + default: "absolute" + }, + showArrow: { + type: Boolean, + default: false + } + }); + + const tooltipV2RootProps = buildProps({ + delayDuration: { + type: Number, + default: 300 + }, + defaultOpen: Boolean, + open: { + type: Boolean, + default: void 0 + }, + onOpenChange: { + type: definePropType(Function) + }, + "onUpdate:open": { + type: definePropType(Function) + } + }); + + const EventHandler = { + type: definePropType(Function) + }; + const tooltipV2TriggerProps = buildProps({ + onBlur: EventHandler, + onClick: EventHandler, + onFocus: EventHandler, + onMouseDown: EventHandler, + onMouseEnter: EventHandler, + onMouseLeave: EventHandler + }); + + const tooltipV2Props = buildProps({ + ...tooltipV2RootProps, + ...tooltipV2ArrowProps, + ...tooltipV2TriggerProps, + ...tooltipV2ContentProps, + alwaysOn: Boolean, + fullTransition: Boolean, + transitionProps: { + type: definePropType(Object), + default: null + }, + teleported: Boolean, + to: { + type: definePropType(String), + default: "body" + } + }); + + const tooltipV2RootKey = Symbol("tooltipV2"); + const tooltipV2ContentKey = Symbol("tooltipV2Content"); + const TOOLTIP_V2_OPEN = "tooltip_v2.open"; + + const __default__$f = vue.defineComponent({ + name: "ElTooltipV2Root" + }); + const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({ + ...__default__$f, + props: tooltipV2RootProps, + setup(__props, { expose }) { + const props = __props; + const _open = vue.ref(props.defaultOpen); + const triggerRef = vue.ref(null); + const open = vue.computed({ + get: () => isPropAbsent(props.open) ? _open.value : props.open, + set: (open2) => { + var _a; + _open.value = open2; + (_a = props["onUpdate:open"]) == null ? void 0 : _a.call(props, open2); + } + }); + const isOpenDelayed = vue.computed(() => isNumber$1(props.delayDuration) && props.delayDuration > 0); + const { start: onDelayedOpen, stop: clearTimer } = useTimeoutFn(() => { + open.value = true; + }, vue.computed(() => props.delayDuration), { + immediate: false + }); + const ns = useNamespace("tooltip-v2"); + const contentId = useId(); + const onNormalOpen = () => { + clearTimer(); + open.value = true; + }; + const onDelayOpen = () => { + vue.unref(isOpenDelayed) ? onDelayedOpen() : onNormalOpen(); + }; + const onOpen = onNormalOpen; + const onClose = () => { + clearTimer(); + open.value = false; + }; + const onChange = (open2) => { + var _a; + if (open2) { + document.dispatchEvent(new CustomEvent(TOOLTIP_V2_OPEN)); + onOpen(); + } + (_a = props.onOpenChange) == null ? void 0 : _a.call(props, open2); + }; + vue.watch(open, onChange); + vue.onMounted(() => { + document.addEventListener(TOOLTIP_V2_OPEN, onClose); + }); + vue.onBeforeUnmount(() => { + clearTimer(); + document.removeEventListener(TOOLTIP_V2_OPEN, onClose); + }); + vue.provide(tooltipV2RootKey, { + contentId, + triggerRef, + ns, + onClose, + onDelayOpen, + onOpen + }); + expose({ + onOpen, + onClose + }); + return (_ctx, _cache) => { + return vue.renderSlot(_ctx.$slots, "default", { open: vue.unref(open) }); + }; + } + }); + var TooltipV2Root = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__file", "root.vue"]]); + + const __default__$e = vue.defineComponent({ + name: "ElTooltipV2Arrow" + }); + const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({ + ...__default__$e, + props: { + ...tooltipV2ArrowProps, + ...tooltipV2ArrowSpecialProps + }, + setup(__props) { + const props = __props; + const { ns } = vue.inject(tooltipV2RootKey); + const { arrowRef } = vue.inject(tooltipV2ContentKey); + const arrowStyle = vue.computed(() => { + const { style, width, height } = props; + const namespace = ns.namespace.value; + return { + [`--${namespace}-tooltip-v2-arrow-width`]: `${width}px`, + [`--${namespace}-tooltip-v2-arrow-height`]: `${height}px`, + [`--${namespace}-tooltip-v2-arrow-border-width`]: `${width / 2}px`, + [`--${namespace}-tooltip-v2-arrow-cover-width`]: width / 2 - 1, + ...style || {} + }; + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("span", { + ref_key: "arrowRef", + ref: arrowRef, + style: vue.normalizeStyle(vue.unref(arrowStyle)), + class: vue.normalizeClass(vue.unref(ns).e("arrow")) + }, null, 6); + }; + } + }); + var TooltipV2Arrow = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__file", "arrow.vue"]]); + + const visualHiddenProps = buildProps({ + style: { + type: definePropType([String, Object, Array]), + default: () => ({}) + } + }); + + const __default__$d = vue.defineComponent({ + name: "ElVisuallyHidden" + }); + const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({ + ...__default__$d, + props: visualHiddenProps, + setup(__props) { + const props = __props; + const computedStyle = vue.computed(() => { + return [ + props.style, + { + position: "absolute", + border: 0, + width: 1, + height: 1, + padding: 0, + margin: -1, + overflow: "hidden", + clip: "rect(0, 0, 0, 0)", + whiteSpace: "nowrap", + wordWrap: "normal" + } + ]; + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("span", vue.mergeProps(_ctx.$attrs, { style: vue.unref(computedStyle) }), [ + vue.renderSlot(_ctx.$slots, "default") + ], 16); + }; + } + }); + var ElVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__file", "visual-hidden.vue"]]); + + const _hoisted_1$9 = ["data-side"]; + const __default__$c = vue.defineComponent({ + name: "ElTooltipV2Content" + }); + const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({ + ...__default__$c, + props: { ...tooltipV2ContentProps, ...tooltipV2CommonProps }, + setup(__props) { + const props = __props; + const { triggerRef, contentId } = vue.inject(tooltipV2RootKey); + const placement = vue.ref(props.placement); + const strategy = vue.ref(props.strategy); + const arrowRef = vue.ref(null); + const { referenceRef, contentRef, middlewareData, x, y, update } = useFloating({ + placement, + strategy, + middleware: vue.computed(() => { + const middleware = [offset(props.offset)]; + if (props.showArrow) { + middleware.push(arrowMiddleware({ + arrowRef + })); + } + return middleware; + }) + }); + const zIndex = useZIndex().nextZIndex(); + const ns = useNamespace("tooltip-v2"); + const side = vue.computed(() => { + return placement.value.split("-")[0]; + }); + const contentStyle = vue.computed(() => { + return { + position: vue.unref(strategy), + top: `${vue.unref(y) || 0}px`, + left: `${vue.unref(x) || 0}px`, + zIndex + }; + }); + const arrowStyle = vue.computed(() => { + if (!props.showArrow) + return {}; + const { arrow } = vue.unref(middlewareData); + return { + [`--${ns.namespace.value}-tooltip-v2-arrow-x`]: `${arrow == null ? void 0 : arrow.x}px` || "", + [`--${ns.namespace.value}-tooltip-v2-arrow-y`]: `${arrow == null ? void 0 : arrow.y}px` || "" + }; + }); + const contentClass = vue.computed(() => [ + ns.e("content"), + ns.is("dark", props.effect === "dark"), + ns.is(vue.unref(strategy)), + props.contentClass + ]); + vue.watch(arrowRef, () => update()); + vue.watch(() => props.placement, (val) => placement.value = val); + vue.onMounted(() => { + vue.watch(() => props.reference || triggerRef.value, (el) => { + referenceRef.value = el || void 0; + }, { + immediate: true + }); + }); + vue.provide(tooltipV2ContentKey, { arrowRef }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + ref_key: "contentRef", + ref: contentRef, + style: vue.normalizeStyle(vue.unref(contentStyle)), + "data-tooltip-v2-root": "" + }, [ + !_ctx.nowrap ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + "data-side": vue.unref(side), + class: vue.normalizeClass(vue.unref(contentClass)) + }, [ + vue.renderSlot(_ctx.$slots, "default", { + contentStyle: vue.unref(contentStyle), + contentClass: vue.unref(contentClass) + }), + vue.createVNode(vue.unref(ElVisuallyHidden), { + id: vue.unref(contentId), + role: "tooltip" + }, { + default: vue.withCtx(() => [ + _ctx.ariaLabel ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ + vue.createTextVNode(vue.toDisplayString(_ctx.ariaLabel), 1) + ], 64)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }) + ]), + _: 3 + }, 8, ["id"]), + vue.renderSlot(_ctx.$slots, "arrow", { + style: vue.normalizeStyle(vue.unref(arrowStyle)), + side: vue.unref(side) + }) + ], 10, _hoisted_1$9)) : vue.createCommentVNode("v-if", true) + ], 4); + }; + } + }); + var TooltipV2Content = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__file", "content.vue"]]); + + const forwardRefProps = buildProps({ + setRef: { + type: definePropType(Function), + required: true + }, + onlyChild: Boolean + }); + var ForwardRef = vue.defineComponent({ + props: forwardRefProps, + setup(props, { + slots + }) { + const fragmentRef = vue.ref(); + const setRef = composeRefs(fragmentRef, (el) => { + if (el) { + props.setRef(el.nextElementSibling); + } else { + props.setRef(null); + } + }); + return () => { + var _a; + const [firstChild] = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || []; + const child = props.onlyChild ? ensureOnlyChild(firstChild.children) : firstChild.children; + return vue.createVNode(vue.Fragment, { + "ref": setRef + }, [child]); + }; + } + }); + + const __default__$b = vue.defineComponent({ + name: "ElTooltipV2Trigger" + }); + const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({ + ...__default__$b, + props: { + ...tooltipV2CommonProps, + ...tooltipV2TriggerProps + }, + setup(__props) { + const props = __props; + const { onClose, onOpen, onDelayOpen, triggerRef, contentId } = vue.inject(tooltipV2RootKey); + let isMousedown = false; + const setTriggerRef = (el) => { + triggerRef.value = el; + }; + const onMouseup = () => { + isMousedown = false; + }; + const onMouseenter = composeEventHandlers(props.onMouseEnter, onDelayOpen); + const onMouseleave = composeEventHandlers(props.onMouseLeave, onClose); + const onMousedown = composeEventHandlers(props.onMouseDown, () => { + onClose(); + isMousedown = true; + document.addEventListener("mouseup", onMouseup, { once: true }); + }); + const onFocus = composeEventHandlers(props.onFocus, () => { + if (!isMousedown) + onOpen(); + }); + const onBlur = composeEventHandlers(props.onBlur, onClose); + const onClick = composeEventHandlers(props.onClick, (e) => { + if (e.detail === 0) + onClose(); + }); + const events = { + blur: onBlur, + click: onClick, + focus: onFocus, + mousedown: onMousedown, + mouseenter: onMouseenter, + mouseleave: onMouseleave + }; + const setEvents = (el, events2, type) => { + if (el) { + Object.entries(events2).forEach(([name, handler]) => { + el[type](name, handler); + }); + } + }; + vue.watch(triggerRef, (triggerEl, previousTriggerEl) => { + setEvents(triggerEl, events, "addEventListener"); + setEvents(previousTriggerEl, events, "removeEventListener"); + if (triggerEl) { + triggerEl.setAttribute("aria-describedby", contentId.value); + } + }); + vue.onBeforeUnmount(() => { + setEvents(triggerRef.value, events, "removeEventListener"); + document.removeEventListener("mouseup", onMouseup); + }); + return (_ctx, _cache) => { + return _ctx.nowrap ? (vue.openBlock(), vue.createBlock(vue.unref(ForwardRef), { + key: 0, + "set-ref": setTriggerRef, + "only-child": "" + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + })) : (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({ + key: 1, + ref_key: "triggerRef", + ref: triggerRef + }, _ctx.$attrs), [ + vue.renderSlot(_ctx.$slots, "default") + ], 16)); + }; + } + }); + var TooltipV2Trigger = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__file", "trigger.vue"]]); + + const __default__$a = vue.defineComponent({ + name: "ElTooltipV2" + }); + const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({ + ...__default__$a, + props: tooltipV2Props, + setup(__props) { + const props = __props; + const refedProps = vue.toRefs(props); + const arrowProps = vue.reactive(pick(refedProps, Object.keys(tooltipV2ArrowProps))); + const contentProps = vue.reactive(pick(refedProps, Object.keys(tooltipV2ContentProps))); + const rootProps = vue.reactive(pick(refedProps, Object.keys(tooltipV2RootProps))); + const triggerProps = vue.reactive(pick(refedProps, Object.keys(tooltipV2TriggerProps))); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(TooltipV2Root, vue.normalizeProps(vue.guardReactiveProps(rootProps)), { + default: vue.withCtx(({ open }) => [ + vue.createVNode(TooltipV2Trigger, vue.mergeProps(triggerProps, { nowrap: "" }), { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "trigger") + ]), + _: 3 + }, 16), + (vue.openBlock(), vue.createBlock(vue.Teleport, { + to: _ctx.to, + disabled: !_ctx.teleported + }, [ + _ctx.fullTransition ? (vue.openBlock(), vue.createBlock(vue.Transition, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.transitionProps)), { + default: vue.withCtx(() => [ + _ctx.alwaysOn || open ? (vue.openBlock(), vue.createBlock(TooltipV2Content, vue.normalizeProps(vue.mergeProps({ key: 0 }, contentProps)), { + arrow: vue.withCtx(({ style, side }) => [ + _ctx.showArrow ? (vue.openBlock(), vue.createBlock(TooltipV2Arrow, vue.mergeProps({ key: 0 }, arrowProps, { + style, + side + }), null, 16, ["style", "side"])) : vue.createCommentVNode("v-if", true) + ]), + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 16)) : vue.createCommentVNode("v-if", true) + ]), + _: 2 + }, 1040)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [ + _ctx.alwaysOn || open ? (vue.openBlock(), vue.createBlock(TooltipV2Content, vue.normalizeProps(vue.mergeProps({ key: 0 }, contentProps)), { + arrow: vue.withCtx(({ style, side }) => [ + _ctx.showArrow ? (vue.openBlock(), vue.createBlock(TooltipV2Arrow, vue.mergeProps({ key: 0 }, arrowProps, { + style, + side + }), null, 16, ["style", "side"])) : vue.createCommentVNode("v-if", true) + ]), + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 16)) : vue.createCommentVNode("v-if", true) + ], 64)) + ], 8, ["to", "disabled"])) + ]), + _: 3 + }, 16); + }; + } + }); + var TooltipV2 = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__file", "tooltip.vue"]]); + + const ElTooltipV2 = withInstall(TooltipV2); + + const LEFT_CHECK_CHANGE_EVENT = "left-check-change"; + const RIGHT_CHECK_CHANGE_EVENT = "right-check-change"; + const transferProps = buildProps({ + data: { + type: definePropType(Array), + default: () => [] + }, + titles: { + type: definePropType(Array), + default: () => [] + }, + buttonTexts: { + type: definePropType(Array), + default: () => [] + }, + filterPlaceholder: String, + filterMethod: { + type: definePropType(Function) + }, + leftDefaultChecked: { + type: definePropType(Array), + default: () => [] + }, + rightDefaultChecked: { + type: definePropType(Array), + default: () => [] + }, + renderContent: { + type: definePropType(Function) + }, + modelValue: { + type: definePropType(Array), + default: () => [] + }, + format: { + type: definePropType(Object), + default: () => ({}) + }, + filterable: Boolean, + props: { + type: definePropType(Object), + default: () => mutable({ + label: "label", + key: "key", + disabled: "disabled" + }) + }, + targetOrder: { + type: String, + values: ["original", "push", "unshift"], + default: "original" + }, + validateEvent: { + type: Boolean, + default: true + } + }); + const transferCheckedChangeFn = (value, movedKeys) => [value, movedKeys].every(isArray$1) || isArray$1(value) && isNil(movedKeys); + const transferEmits = { + [CHANGE_EVENT]: (value, direction, movedKeys) => [value, movedKeys].every(isArray$1) && ["left", "right"].includes(direction), + [UPDATE_MODEL_EVENT]: (value) => isArray$1(value), + [LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn, + [RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn + }; + + const CHECKED_CHANGE_EVENT = "checked-change"; + const transferPanelProps = buildProps({ + data: transferProps.data, + optionRender: { + type: definePropType(Function) + }, + placeholder: String, + title: String, + filterable: Boolean, + format: transferProps.format, + filterMethod: transferProps.filterMethod, + defaultChecked: transferProps.leftDefaultChecked, + props: transferProps.props + }); + const transferPanelEmits = { + [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn + }; + + const usePropsAlias = (props) => { + const initProps = { + label: "label", + key: "key", + disabled: "disabled" + }; + return vue.computed(() => ({ + ...initProps, + ...props.props + })); + }; + + const useCheck$1 = (props, panelState, emit) => { + const propsAlias = usePropsAlias(props); + const filteredData = vue.computed(() => { + return props.data.filter((item) => { + if (isFunction$1(props.filterMethod)) { + return props.filterMethod(panelState.query, item); + } else { + const label = String(item[propsAlias.value.label] || item[propsAlias.value.key]); + return label.toLowerCase().includes(panelState.query.toLowerCase()); + } + }); + }); + const checkableData = vue.computed(() => filteredData.value.filter((item) => !item[propsAlias.value.disabled])); + const checkedSummary = vue.computed(() => { + const checkedLength = panelState.checked.length; + const dataLength = props.data.length; + const { noChecked, hasChecked } = props.format; + if (noChecked && hasChecked) { + return checkedLength > 0 ? hasChecked.replace(/\${checked}/g, checkedLength.toString()).replace(/\${total}/g, dataLength.toString()) : noChecked.replace(/\${total}/g, dataLength.toString()); + } else { + return `${checkedLength}/${dataLength}`; + } + }); + const isIndeterminate = vue.computed(() => { + const checkedLength = panelState.checked.length; + return checkedLength > 0 && checkedLength < checkableData.value.length; + }); + const updateAllChecked = () => { + const checkableDataKeys = checkableData.value.map((item) => item[propsAlias.value.key]); + panelState.allChecked = checkableDataKeys.length > 0 && checkableDataKeys.every((item) => panelState.checked.includes(item)); + }; + const handleAllCheckedChange = (value) => { + panelState.checked = value ? checkableData.value.map((item) => item[propsAlias.value.key]) : []; + }; + vue.watch(() => panelState.checked, (val, oldVal) => { + updateAllChecked(); + if (panelState.checkChangeByUser) { + const movedKeys = val.concat(oldVal).filter((v) => !val.includes(v) || !oldVal.includes(v)); + emit(CHECKED_CHANGE_EVENT, val, movedKeys); + } else { + emit(CHECKED_CHANGE_EVENT, val); + panelState.checkChangeByUser = true; + } + }); + vue.watch(checkableData, () => { + updateAllChecked(); + }); + vue.watch(() => props.data, () => { + const checked = []; + const filteredDataKeys = filteredData.value.map((item) => item[propsAlias.value.key]); + panelState.checked.forEach((item) => { + if (filteredDataKeys.includes(item)) { + checked.push(item); + } + }); + panelState.checkChangeByUser = false; + panelState.checked = checked; + }); + vue.watch(() => props.defaultChecked, (val, oldVal) => { + if (oldVal && val.length === oldVal.length && val.every((item) => oldVal.includes(item))) + return; + const checked = []; + const checkableDataKeys = checkableData.value.map((item) => item[propsAlias.value.key]); + val.forEach((item) => { + if (checkableDataKeys.includes(item)) { + checked.push(item); + } + }); + panelState.checkChangeByUser = false; + panelState.checked = checked; + }, { + immediate: true + }); + return { + filteredData, + checkableData, + checkedSummary, + isIndeterminate, + updateAllChecked, + handleAllCheckedChange + }; + }; + + const useCheckedChange = (checkedState, emit) => { + const onSourceCheckedChange = (val, movedKeys) => { + checkedState.leftChecked = val; + if (!movedKeys) + return; + emit(LEFT_CHECK_CHANGE_EVENT, val, movedKeys); + }; + const onTargetCheckedChange = (val, movedKeys) => { + checkedState.rightChecked = val; + if (!movedKeys) + return; + emit(RIGHT_CHECK_CHANGE_EVENT, val, movedKeys); + }; + return { + onSourceCheckedChange, + onTargetCheckedChange + }; + }; + + const useComputedData = (props) => { + const propsAlias = usePropsAlias(props); + const dataObj = vue.computed(() => props.data.reduce((o, cur) => (o[cur[propsAlias.value.key]] = cur) && o, {})); + const sourceData = vue.computed(() => props.data.filter((item) => !props.modelValue.includes(item[propsAlias.value.key]))); + const targetData = vue.computed(() => { + if (props.targetOrder === "original") { + return props.data.filter((item) => props.modelValue.includes(item[propsAlias.value.key])); + } else { + return props.modelValue.reduce((arr, cur) => { + const val = dataObj.value[cur]; + if (val) { + arr.push(val); + } + return arr; + }, []); + } + }); + return { + sourceData, + targetData + }; + }; + + const useMove = (props, checkedState, emit) => { + const propsAlias = usePropsAlias(props); + const _emit = (value, direction, movedKeys) => { + emit(UPDATE_MODEL_EVENT, value); + emit(CHANGE_EVENT, value, direction, movedKeys); + }; + const addToLeft = () => { + const currentValue = props.modelValue.slice(); + checkedState.rightChecked.forEach((item) => { + const index = currentValue.indexOf(item); + if (index > -1) { + currentValue.splice(index, 1); + } + }); + _emit(currentValue, "left", checkedState.rightChecked); + }; + const addToRight = () => { + let currentValue = props.modelValue.slice(); + const itemsToBeMoved = props.data.filter((item) => { + const itemKey = item[propsAlias.value.key]; + return checkedState.leftChecked.includes(itemKey) && !props.modelValue.includes(itemKey); + }).map((item) => item[propsAlias.value.key]); + currentValue = props.targetOrder === "unshift" ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved); + if (props.targetOrder === "original") { + currentValue = props.data.filter((item) => currentValue.includes(item[propsAlias.value.key])).map((item) => item[propsAlias.value.key]); + } + _emit(currentValue, "right", checkedState.leftChecked); + }; + return { + addToLeft, + addToRight + }; + }; + + const __default__$9 = vue.defineComponent({ + name: "ElTransferPanel" + }); + const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({ + ...__default__$9, + props: transferPanelProps, + emits: transferPanelEmits, + setup(__props, { expose, emit }) { + const props = __props; + const slots = vue.useSlots(); + const OptionContent = ({ option }) => option; + const { t } = useLocale(); + const ns = useNamespace("transfer"); + const panelState = vue.reactive({ + checked: [], + allChecked: false, + query: "", + checkChangeByUser: true + }); + const propsAlias = usePropsAlias(props); + const { + filteredData, + checkedSummary, + isIndeterminate, + handleAllCheckedChange + } = useCheck$1(props, panelState, emit); + const hasNoMatch = vue.computed(() => !isEmpty(panelState.query) && isEmpty(filteredData.value)); + const hasFooter = vue.computed(() => !isEmpty(slots.default()[0].children)); + const { checked, allChecked, query } = vue.toRefs(panelState); + expose({ + query + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(ns).b("panel")) + }, [ + vue.createElementVNode("p", { + class: vue.normalizeClass(vue.unref(ns).be("panel", "header")) + }, [ + vue.createVNode(vue.unref(ElCheckbox), { + modelValue: vue.unref(allChecked), + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(allChecked) ? allChecked.value = $event : null), + indeterminate: vue.unref(isIndeterminate), + "validate-event": false, + onChange: vue.unref(handleAllCheckedChange) + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(_ctx.title) + " ", 1), + vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(checkedSummary)), 1) + ]), + _: 1 + }, 8, ["modelValue", "indeterminate", "onChange"]) + ], 2), + vue.createElementVNode("div", { + class: vue.normalizeClass([vue.unref(ns).be("panel", "body"), vue.unref(ns).is("with-footer", vue.unref(hasFooter))]) + }, [ + _ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(ElInput), { + key: 0, + modelValue: vue.unref(query), + "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(query) ? query.value = $event : null), + class: vue.normalizeClass(vue.unref(ns).be("panel", "filter")), + size: "default", + placeholder: _ctx.placeholder, + "prefix-icon": vue.unref(search_default), + clearable: "", + "validate-event": false + }, null, 8, ["modelValue", "class", "placeholder", "prefix-icon"])) : vue.createCommentVNode("v-if", true), + vue.withDirectives(vue.createVNode(vue.unref(ElCheckboxGroup$1), { + modelValue: vue.unref(checked), + "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(checked) ? checked.value = $event : null), + "validate-event": false, + class: vue.normalizeClass([vue.unref(ns).is("filterable", _ctx.filterable), vue.unref(ns).be("panel", "list")]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(filteredData), (item) => { + return vue.openBlock(), vue.createBlock(vue.unref(ElCheckbox), { + key: item[vue.unref(propsAlias).key], + class: vue.normalizeClass(vue.unref(ns).be("panel", "item")), + label: item[vue.unref(propsAlias).key], + disabled: item[vue.unref(propsAlias).disabled], + "validate-event": false + }, { + default: vue.withCtx(() => { + var _a; + return [ + vue.createVNode(OptionContent, { + option: (_a = _ctx.optionRender) == null ? void 0 : _a.call(_ctx, item) + }, null, 8, ["option"]) + ]; + }), + _: 2 + }, 1032, ["class", "label", "disabled"]); + }), 128)) + ]), + _: 1 + }, 8, ["modelValue", "class"]), [ + [vue.vShow, !vue.unref(hasNoMatch) && !vue.unref(isEmpty)(_ctx.data)] + ]), + vue.withDirectives(vue.createElementVNode("p", { + class: vue.normalizeClass(vue.unref(ns).be("panel", "empty")) + }, vue.toDisplayString(vue.unref(hasNoMatch) ? vue.unref(t)("el.transfer.noMatch") : vue.unref(t)("el.transfer.noData")), 3), [ + [vue.vShow, vue.unref(hasNoMatch) || vue.unref(isEmpty)(_ctx.data)] + ]) + ], 2), + vue.unref(hasFooter) ? (vue.openBlock(), vue.createElementBlock("p", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).be("panel", "footer")) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 2)) : vue.createCommentVNode("v-if", true) + ], 2); + }; + } + }); + var TransferPanel = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__file", "transfer-panel.vue"]]); + + const _hoisted_1$8 = { key: 0 }; + const _hoisted_2$6 = { key: 0 }; + const __default__$8 = vue.defineComponent({ + name: "ElTransfer" + }); + const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({ + ...__default__$8, + props: transferProps, + emits: transferEmits, + setup(__props, { expose, emit }) { + const props = __props; + const slots = vue.useSlots(); + const { t } = useLocale(); + const ns = useNamespace("transfer"); + const { formItem } = useFormItem(); + const checkedState = vue.reactive({ + leftChecked: [], + rightChecked: [] + }); + const propsAlias = usePropsAlias(props); + const { sourceData, targetData } = useComputedData(props); + const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(checkedState, emit); + const { addToLeft, addToRight } = useMove(props, checkedState, emit); + const leftPanel = vue.ref(); + const rightPanel = vue.ref(); + const clearQuery = (which) => { + switch (which) { + case "left": + leftPanel.value.query = ""; + break; + case "right": + rightPanel.value.query = ""; + break; + } + }; + const hasButtonTexts = vue.computed(() => props.buttonTexts.length === 2); + const leftPanelTitle = vue.computed(() => props.titles[0] || t("el.transfer.titles.0")); + const rightPanelTitle = vue.computed(() => props.titles[1] || t("el.transfer.titles.1")); + const panelFilterPlaceholder = vue.computed(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder")); + vue.watch(() => props.modelValue, () => { + var _a; + if (props.validateEvent) { + (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn()); + } + }); + const optionRender = vue.computed(() => (option) => { + if (props.renderContent) + return props.renderContent(vue.h, option); + if (slots.default) + return slots.default({ option }); + return vue.h("span", option[propsAlias.value.label] || option[propsAlias.value.key]); + }); + expose({ + clearQuery, + leftPanel, + rightPanel + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass(vue.unref(ns).b()) + }, [ + vue.createVNode(TransferPanel, { + ref_key: "leftPanel", + ref: leftPanel, + data: vue.unref(sourceData), + "option-render": vue.unref(optionRender), + placeholder: vue.unref(panelFilterPlaceholder), + title: vue.unref(leftPanelTitle), + filterable: _ctx.filterable, + format: _ctx.format, + "filter-method": _ctx.filterMethod, + "default-checked": _ctx.leftDefaultChecked, + props: props.props, + onCheckedChange: vue.unref(onSourceCheckedChange) + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "left-footer") + ]), + _: 3 + }, 8, ["data", "option-render", "placeholder", "title", "filterable", "format", "filter-method", "default-checked", "props", "onCheckedChange"]), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("buttons")) + }, [ + vue.createVNode(vue.unref(ElButton), { + type: "primary", + class: vue.normalizeClass([vue.unref(ns).e("button"), vue.unref(ns).is("with-texts", vue.unref(hasButtonTexts))]), + disabled: vue.unref(isEmpty)(checkedState.rightChecked), + onClick: vue.unref(addToLeft) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_left_default)) + ]), + _: 1 + }), + !vue.unref(isUndefined)(_ctx.buttonTexts[0]) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$8, vue.toDisplayString(_ctx.buttonTexts[0]), 1)) : vue.createCommentVNode("v-if", true) + ]), + _: 1 + }, 8, ["class", "disabled", "onClick"]), + vue.createVNode(vue.unref(ElButton), { + type: "primary", + class: vue.normalizeClass([vue.unref(ns).e("button"), vue.unref(ns).is("with-texts", vue.unref(hasButtonTexts))]), + disabled: vue.unref(isEmpty)(checkedState.leftChecked), + onClick: vue.unref(addToRight) + }, { + default: vue.withCtx(() => [ + !vue.unref(isUndefined)(_ctx.buttonTexts[1]) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$6, vue.toDisplayString(_ctx.buttonTexts[1]), 1)) : vue.createCommentVNode("v-if", true), + vue.createVNode(vue.unref(ElIcon), null, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(arrow_right_default)) + ]), + _: 1 + }) + ]), + _: 1 + }, 8, ["class", "disabled", "onClick"]) + ], 2), + vue.createVNode(TransferPanel, { + ref_key: "rightPanel", + ref: rightPanel, + data: vue.unref(targetData), + "option-render": vue.unref(optionRender), + placeholder: vue.unref(panelFilterPlaceholder), + filterable: _ctx.filterable, + format: _ctx.format, + "filter-method": _ctx.filterMethod, + title: vue.unref(rightPanelTitle), + "default-checked": _ctx.rightDefaultChecked, + props: props.props, + onCheckedChange: vue.unref(onTargetCheckedChange) + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "right-footer") + ]), + _: 3 + }, 8, ["data", "option-render", "placeholder", "filterable", "format", "filter-method", "title", "default-checked", "props", "onCheckedChange"]) + ], 2); + }; + } + }); + var Transfer = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__file", "transfer.vue"]]); + + const ElTransfer = withInstall(Transfer); + + const NODE_KEY = "$treeNodeId"; + const markNodeData = function(node, data) { + if (!data || data[NODE_KEY]) + return; + Object.defineProperty(data, NODE_KEY, { + value: node.id, + enumerable: false, + configurable: false, + writable: false + }); + }; + const getNodeKey = function(key, data) { + if (!key) + return data[NODE_KEY]; + return data[key]; + }; + const handleCurrentChange = (store, emit, setCurrent) => { + const preCurrentNode = store.value.currentNode; + setCurrent(); + const currentNode = store.value.currentNode; + if (preCurrentNode === currentNode) + return; + emit("current-change", currentNode ? currentNode.data : null, currentNode); + }; + + const getChildState = (node) => { + let all = true; + let none = true; + let allWithoutDisable = true; + for (let i = 0, j = node.length; i < j; i++) { + const n = node[i]; + if (n.checked !== true || n.indeterminate) { + all = false; + if (!n.disabled) { + allWithoutDisable = false; + } + } + if (n.checked !== false || n.indeterminate) { + none = false; + } + } + return { all, none, allWithoutDisable, half: !all && !none }; + }; + const reInitChecked = function(node) { + if (node.childNodes.length === 0 || node.loading) + return; + const { all, none, half } = getChildState(node.childNodes); + if (all) { + node.checked = true; + node.indeterminate = false; + } else if (half) { + node.checked = false; + node.indeterminate = true; + } else if (none) { + node.checked = false; + node.indeterminate = false; + } + const parent = node.parent; + if (!parent || parent.level === 0) + return; + if (!node.store.checkStrictly) { + reInitChecked(parent); + } + }; + const getPropertyFromData = function(node, prop) { + const props = node.store.props; + const data = node.data || {}; + const config = props[prop]; + if (typeof config === "function") { + return config(data, node); + } else if (typeof config === "string") { + return data[config]; + } else if (typeof config === "undefined") { + const dataProp = data[prop]; + return dataProp === void 0 ? "" : dataProp; + } + }; + let nodeIdSeed = 0; + class Node { + constructor(options) { + this.id = nodeIdSeed++; + this.text = null; + this.checked = false; + this.indeterminate = false; + this.data = null; + this.expanded = false; + this.parent = null; + this.visible = true; + this.isCurrent = false; + this.canFocus = false; + for (const name in options) { + if (hasOwn(options, name)) { + this[name] = options[name]; + } + } + this.level = 0; + this.loaded = false; + this.childNodes = []; + this.loading = false; + if (this.parent) { + this.level = this.parent.level + 1; + } + } + initialize() { + const store = this.store; + if (!store) { + throw new Error("[Node]store is required!"); + } + store.registerNode(this); + const props = store.props; + if (props && typeof props.isLeaf !== "undefined") { + const isLeaf = getPropertyFromData(this, "isLeaf"); + if (typeof isLeaf === "boolean") { + this.isLeafByUser = isLeaf; + } + } + if (store.lazy !== true && this.data) { + this.setData(this.data); + if (store.defaultExpandAll) { + this.expanded = true; + this.canFocus = true; + } + } else if (this.level > 0 && store.lazy && store.defaultExpandAll) { + this.expand(); + } + if (!Array.isArray(this.data)) { + markNodeData(this, this.data); + } + if (!this.data) + return; + const defaultExpandedKeys = store.defaultExpandedKeys; + const key = store.key; + if (key && defaultExpandedKeys && defaultExpandedKeys.includes(this.key)) { + this.expand(null, store.autoExpandParent); + } + if (key && store.currentNodeKey !== void 0 && this.key === store.currentNodeKey) { + store.currentNode = this; + store.currentNode.isCurrent = true; + } + if (store.lazy) { + store._initDefaultCheckedNode(this); + } + this.updateLeafState(); + if (this.parent && (this.level === 1 || this.parent.expanded === true)) + this.canFocus = true; + } + setData(data) { + if (!Array.isArray(data)) { + markNodeData(this, data); + } + this.data = data; + this.childNodes = []; + let children; + if (this.level === 0 && Array.isArray(this.data)) { + children = this.data; + } else { + children = getPropertyFromData(this, "children") || []; + } + for (let i = 0, j = children.length; i < j; i++) { + this.insertChild({ data: children[i] }); + } + } + get label() { + return getPropertyFromData(this, "label"); + } + get key() { + const nodeKey = this.store.key; + if (this.data) + return this.data[nodeKey]; + return null; + } + get disabled() { + return getPropertyFromData(this, "disabled"); + } + get nextSibling() { + const parent = this.parent; + if (parent) { + const index = parent.childNodes.indexOf(this); + if (index > -1) { + return parent.childNodes[index + 1]; + } + } + return null; + } + get previousSibling() { + const parent = this.parent; + if (parent) { + const index = parent.childNodes.indexOf(this); + if (index > -1) { + return index > 0 ? parent.childNodes[index - 1] : null; + } + } + return null; + } + contains(target, deep = true) { + return (this.childNodes || []).some((child) => child === target || deep && child.contains(target)); + } + remove() { + const parent = this.parent; + if (parent) { + parent.removeChild(this); + } + } + insertChild(child, index, batch) { + if (!child) + throw new Error("InsertChild error: child is required."); + if (!(child instanceof Node)) { + if (!batch) { + const children = this.getChildren(true); + if (!children.includes(child.data)) { + if (typeof index === "undefined" || index < 0) { + children.push(child.data); + } else { + children.splice(index, 0, child.data); + } + } + } + Object.assign(child, { + parent: this, + store: this.store + }); + child = vue.reactive(new Node(child)); + if (child instanceof Node) { + child.initialize(); + } + } + child.level = this.level + 1; + if (typeof index === "undefined" || index < 0) { + this.childNodes.push(child); + } else { + this.childNodes.splice(index, 0, child); + } + this.updateLeafState(); + } + insertBefore(child, ref) { + let index; + if (ref) { + index = this.childNodes.indexOf(ref); + } + this.insertChild(child, index); + } + insertAfter(child, ref) { + let index; + if (ref) { + index = this.childNodes.indexOf(ref); + if (index !== -1) + index += 1; + } + this.insertChild(child, index); + } + removeChild(child) { + const children = this.getChildren() || []; + const dataIndex = children.indexOf(child.data); + if (dataIndex > -1) { + children.splice(dataIndex, 1); + } + const index = this.childNodes.indexOf(child); + if (index > -1) { + this.store && this.store.deregisterNode(child); + child.parent = null; + this.childNodes.splice(index, 1); + } + this.updateLeafState(); + } + removeChildByData(data) { + let targetNode = null; + for (let i = 0; i < this.childNodes.length; i++) { + if (this.childNodes[i].data === data) { + targetNode = this.childNodes[i]; + break; + } + } + if (targetNode) { + this.removeChild(targetNode); + } + } + expand(callback, expandParent) { + const done = () => { + if (expandParent) { + let parent = this.parent; + while (parent.level > 0) { + parent.expanded = true; + parent = parent.parent; + } + } + this.expanded = true; + if (callback) + callback(); + this.childNodes.forEach((item) => { + item.canFocus = true; + }); + }; + if (this.shouldLoadData()) { + this.loadData((data) => { + if (Array.isArray(data)) { + if (this.checked) { + this.setChecked(true, true); + } else if (!this.store.checkStrictly) { + reInitChecked(this); + } + done(); + } + }); + } else { + done(); + } + } + doCreateChildren(array, defaultProps = {}) { + array.forEach((item) => { + this.insertChild(Object.assign({ data: item }, defaultProps), void 0, true); + }); + } + collapse() { + this.expanded = false; + this.childNodes.forEach((item) => { + item.canFocus = false; + }); + } + shouldLoadData() { + return this.store.lazy === true && this.store.load && !this.loaded; + } + updateLeafState() { + if (this.store.lazy === true && this.loaded !== true && typeof this.isLeafByUser !== "undefined") { + this.isLeaf = this.isLeafByUser; + return; + } + const childNodes = this.childNodes; + if (!this.store.lazy || this.store.lazy === true && this.loaded === true) { + this.isLeaf = !childNodes || childNodes.length === 0; + return; + } + this.isLeaf = false; + } + setChecked(value, deep, recursion, passValue) { + this.indeterminate = value === "half"; + this.checked = value === true; + if (this.store.checkStrictly) + return; + if (!(this.shouldLoadData() && !this.store.checkDescendants)) { + const { all, allWithoutDisable } = getChildState(this.childNodes); + if (!this.isLeaf && !all && allWithoutDisable) { + this.checked = false; + value = false; + } + const handleDescendants = () => { + if (deep) { + const childNodes = this.childNodes; + for (let i = 0, j = childNodes.length; i < j; i++) { + const child = childNodes[i]; + passValue = passValue || value !== false; + const isCheck = child.disabled ? child.checked : passValue; + child.setChecked(isCheck, deep, true, passValue); + } + const { half, all: all2 } = getChildState(childNodes); + if (!all2) { + this.checked = all2; + this.indeterminate = half; + } + } + }; + if (this.shouldLoadData()) { + this.loadData(() => { + handleDescendants(); + reInitChecked(this); + }, { + checked: value !== false + }); + return; + } else { + handleDescendants(); + } + } + const parent = this.parent; + if (!parent || parent.level === 0) + return; + if (!recursion) { + reInitChecked(parent); + } + } + getChildren(forceInit = false) { + if (this.level === 0) + return this.data; + const data = this.data; + if (!data) + return null; + const props = this.store.props; + let children = "children"; + if (props) { + children = props.children || "children"; + } + if (data[children] === void 0) { + data[children] = null; + } + if (forceInit && !data[children]) { + data[children] = []; + } + return data[children]; + } + updateChildren() { + const newData = this.getChildren() || []; + const oldData = this.childNodes.map((node) => node.data); + const newDataMap = {}; + const newNodes = []; + newData.forEach((item, index) => { + const key = item[NODE_KEY]; + const isNodeExists = !!key && oldData.findIndex((data) => data[NODE_KEY] === key) >= 0; + if (isNodeExists) { + newDataMap[key] = { index, data: item }; + } else { + newNodes.push({ index, data: item }); + } + }); + if (!this.store.lazy) { + oldData.forEach((item) => { + if (!newDataMap[item[NODE_KEY]]) + this.removeChildByData(item); + }); + } + newNodes.forEach(({ index, data }) => { + this.insertChild({ data }, index); + }); + this.updateLeafState(); + } + loadData(callback, defaultProps = {}) { + if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) { + this.loading = true; + const resolve = (children) => { + this.childNodes = []; + this.doCreateChildren(children, defaultProps); + this.loaded = true; + this.loading = false; + this.updateLeafState(); + if (callback) { + callback.call(this, children); + } + }; + this.store.load(this, resolve); + } else { + if (callback) { + callback.call(this); + } + } + } + } + var Node$1 = Node; + + class TreeStore { + constructor(options) { + this.currentNode = null; + this.currentNodeKey = null; + for (const option in options) { + if (hasOwn(options, option)) { + this[option] = options[option]; + } + } + this.nodesMap = {}; + } + initialize() { + this.root = new Node$1({ + data: this.data, + store: this + }); + this.root.initialize(); + if (this.lazy && this.load) { + const loadFn = this.load; + loadFn(this.root, (data) => { + this.root.doCreateChildren(data); + this._initDefaultCheckedNodes(); + }); + } else { + this._initDefaultCheckedNodes(); + } + } + filter(value) { + const filterNodeMethod = this.filterNodeMethod; + const lazy = this.lazy; + const traverse = function(node) { + const childNodes = node.root ? node.root.childNodes : node.childNodes; + childNodes.forEach((child) => { + child.visible = filterNodeMethod.call(child, value, child.data, child); + traverse(child); + }); + if (!node.visible && childNodes.length) { + let allHidden = true; + allHidden = !childNodes.some((child) => child.visible); + if (node.root) { + node.root.visible = allHidden === false; + } else { + node.visible = allHidden === false; + } + } + if (!value) + return; + if (node.visible && !node.isLeaf && !lazy) + node.expand(); + }; + traverse(this); + } + setData(newVal) { + const instanceChanged = newVal !== this.root.data; + if (instanceChanged) { + this.root.setData(newVal); + this._initDefaultCheckedNodes(); + } else { + this.root.updateChildren(); + } + } + getNode(data) { + if (data instanceof Node$1) + return data; + const key = isObject$1(data) ? getNodeKey(this.key, data) : data; + return this.nodesMap[key] || null; + } + insertBefore(data, refData) { + const refNode = this.getNode(refData); + refNode.parent.insertBefore({ data }, refNode); + } + insertAfter(data, refData) { + const refNode = this.getNode(refData); + refNode.parent.insertAfter({ data }, refNode); + } + remove(data) { + const node = this.getNode(data); + if (node && node.parent) { + if (node === this.currentNode) { + this.currentNode = null; + } + node.parent.removeChild(node); + } + } + append(data, parentData) { + const parentNode = parentData ? this.getNode(parentData) : this.root; + if (parentNode) { + parentNode.insertChild({ data }); + } + } + _initDefaultCheckedNodes() { + const defaultCheckedKeys = this.defaultCheckedKeys || []; + const nodesMap = this.nodesMap; + defaultCheckedKeys.forEach((checkedKey) => { + const node = nodesMap[checkedKey]; + if (node) { + node.setChecked(true, !this.checkStrictly); + } + }); + } + _initDefaultCheckedNode(node) { + const defaultCheckedKeys = this.defaultCheckedKeys || []; + if (defaultCheckedKeys.includes(node.key)) { + node.setChecked(true, !this.checkStrictly); + } + } + setDefaultCheckedKey(newVal) { + if (newVal !== this.defaultCheckedKeys) { + this.defaultCheckedKeys = newVal; + this._initDefaultCheckedNodes(); + } + } + registerNode(node) { + const key = this.key; + if (!node || !node.data) + return; + if (!key) { + this.nodesMap[node.id] = node; + } else { + const nodeKey = node.key; + if (nodeKey !== void 0) + this.nodesMap[node.key] = node; + } + } + deregisterNode(node) { + const key = this.key; + if (!key || !node || !node.data) + return; + node.childNodes.forEach((child) => { + this.deregisterNode(child); + }); + delete this.nodesMap[node.key]; + } + getCheckedNodes(leafOnly = false, includeHalfChecked = false) { + const checkedNodes = []; + const traverse = function(node) { + const childNodes = node.root ? node.root.childNodes : node.childNodes; + childNodes.forEach((child) => { + if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) { + checkedNodes.push(child.data); + } + traverse(child); + }); + }; + traverse(this); + return checkedNodes; + } + getCheckedKeys(leafOnly = false) { + return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]); + } + getHalfCheckedNodes() { + const nodes = []; + const traverse = function(node) { + const childNodes = node.root ? node.root.childNodes : node.childNodes; + childNodes.forEach((child) => { + if (child.indeterminate) { + nodes.push(child.data); + } + traverse(child); + }); + }; + traverse(this); + return nodes; + } + getHalfCheckedKeys() { + return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]); + } + _getAllNodes() { + const allNodes = []; + const nodesMap = this.nodesMap; + for (const nodeKey in nodesMap) { + if (hasOwn(nodesMap, nodeKey)) { + allNodes.push(nodesMap[nodeKey]); + } + } + return allNodes; + } + updateChildren(key, data) { + const node = this.nodesMap[key]; + if (!node) + return; + const childNodes = node.childNodes; + for (let i = childNodes.length - 1; i >= 0; i--) { + const child = childNodes[i]; + this.remove(child.data); + } + for (let i = 0, j = data.length; i < j; i++) { + const child = data[i]; + this.append(child, node.data); + } + } + _setCheckedKeys(key, leafOnly = false, checkedKeys) { + const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level); + const cache = /* @__PURE__ */ Object.create(null); + const keys = Object.keys(checkedKeys); + allNodes.forEach((node) => node.setChecked(false, false)); + for (let i = 0, j = allNodes.length; i < j; i++) { + const node = allNodes[i]; + const nodeKey = node.data[key].toString(); + const checked = keys.includes(nodeKey); + if (!checked) { + if (node.checked && !cache[nodeKey]) { + node.setChecked(false, false); + } + continue; + } + let parent = node.parent; + while (parent && parent.level > 0) { + cache[parent.data[key]] = true; + parent = parent.parent; + } + if (node.isLeaf || this.checkStrictly) { + node.setChecked(true, false); + continue; + } + node.setChecked(true, true); + if (leafOnly) { + node.setChecked(false, false); + const traverse = function(node2) { + const childNodes = node2.childNodes; + childNodes.forEach((child) => { + if (!child.isLeaf) { + child.setChecked(false, false); + } + traverse(child); + }); + }; + traverse(node); + } + } + } + setCheckedNodes(array, leafOnly = false) { + const key = this.key; + const checkedKeys = {}; + array.forEach((item) => { + checkedKeys[(item || {})[key]] = true; + }); + this._setCheckedKeys(key, leafOnly, checkedKeys); + } + setCheckedKeys(keys, leafOnly = false) { + this.defaultCheckedKeys = keys; + const key = this.key; + const checkedKeys = {}; + keys.forEach((key2) => { + checkedKeys[key2] = true; + }); + this._setCheckedKeys(key, leafOnly, checkedKeys); + } + setDefaultExpandedKeys(keys) { + keys = keys || []; + this.defaultExpandedKeys = keys; + keys.forEach((key) => { + const node = this.getNode(key); + if (node) + node.expand(null, this.autoExpandParent); + }); + } + setChecked(data, checked, deep) { + const node = this.getNode(data); + if (node) { + node.setChecked(!!checked, deep); + } + } + getCurrentNode() { + return this.currentNode; + } + setCurrentNode(currentNode) { + const prevCurrentNode = this.currentNode; + if (prevCurrentNode) { + prevCurrentNode.isCurrent = false; + } + this.currentNode = currentNode; + this.currentNode.isCurrent = true; + } + setUserCurrentNode(node, shouldAutoExpandParent = true) { + const key = node[this.key]; + const currNode = this.nodesMap[key]; + this.setCurrentNode(currNode); + if (shouldAutoExpandParent && this.currentNode.level > 1) { + this.currentNode.parent.expand(null, true); + } + } + setCurrentNodeKey(key, shouldAutoExpandParent = true) { + if (key === null || key === void 0) { + this.currentNode && (this.currentNode.isCurrent = false); + this.currentNode = null; + return; + } + const node = this.getNode(key); + if (node) { + this.setCurrentNode(node); + if (shouldAutoExpandParent && this.currentNode.level > 1) { + this.currentNode.parent.expand(null, true); + } + } + } + } + + const _sfc_main$c = vue.defineComponent({ + name: "ElTreeNodeContent", + props: { + node: { + type: Object, + required: true + }, + renderContent: Function + }, + setup(props) { + const ns = useNamespace("tree"); + const nodeInstance = vue.inject("NodeInstance"); + const tree = vue.inject("RootTree"); + return () => { + const node = props.node; + const { data, store } = node; + return props.renderContent ? props.renderContent(vue.h, { _self: nodeInstance, node, data, store }) : tree.ctx.slots.default ? tree.ctx.slots.default({ node, data }) : vue.h("span", { class: ns.be("node", "label") }, [node.label]); + }; + } + }); + var NodeContent = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__file", "tree-node-content.vue"]]); + + function useNodeExpandEventBroadcast(props) { + const parentNodeMap = vue.inject("TreeNodeMap", null); + const currentNodeMap = { + treeNodeExpand: (node) => { + if (props.node !== node) { + props.node.collapse(); + } + }, + children: [] + }; + if (parentNodeMap) { + parentNodeMap.children.push(currentNodeMap); + } + vue.provide("TreeNodeMap", currentNodeMap); + return { + broadcastExpanded: (node) => { + if (!props.accordion) + return; + for (const childNode of currentNodeMap.children) { + childNode.treeNodeExpand(node); + } + } + }; + } + + const dragEventsKey = Symbol("dragEvents"); + function useDragNodeHandler({ props, ctx, el$, dropIndicator$, store }) { + const ns = useNamespace("tree"); + const dragState = vue.ref({ + showDropIndicator: false, + draggingNode: null, + dropNode: null, + allowDrop: true, + dropType: null + }); + const treeNodeDragStart = ({ event, treeNode }) => { + if (typeof props.allowDrag === "function" && !props.allowDrag(treeNode.node)) { + event.preventDefault(); + return false; + } + event.dataTransfer.effectAllowed = "move"; + try { + event.dataTransfer.setData("text/plain", ""); + } catch (e) { + } + dragState.value.draggingNode = treeNode; + ctx.emit("node-drag-start", treeNode.node, event); + }; + const treeNodeDragOver = ({ event, treeNode }) => { + const dropNode = treeNode; + const oldDropNode = dragState.value.dropNode; + if (oldDropNode && oldDropNode !== dropNode) { + removeClass(oldDropNode.$el, ns.is("drop-inner")); + } + const draggingNode = dragState.value.draggingNode; + if (!draggingNode || !dropNode) + return; + let dropPrev = true; + let dropInner = true; + let dropNext = true; + let userAllowDropInner = true; + if (typeof props.allowDrop === "function") { + dropPrev = props.allowDrop(draggingNode.node, dropNode.node, "prev"); + userAllowDropInner = dropInner = props.allowDrop(draggingNode.node, dropNode.node, "inner"); + dropNext = props.allowDrop(draggingNode.node, dropNode.node, "next"); + } + event.dataTransfer.dropEffect = dropInner || dropPrev || dropNext ? "move" : "none"; + if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) { + if (oldDropNode) { + ctx.emit("node-drag-leave", draggingNode.node, oldDropNode.node, event); + } + ctx.emit("node-drag-enter", draggingNode.node, dropNode.node, event); + } + if (dropPrev || dropInner || dropNext) { + dragState.value.dropNode = dropNode; + } + if (dropNode.node.nextSibling === draggingNode.node) { + dropNext = false; + } + if (dropNode.node.previousSibling === draggingNode.node) { + dropPrev = false; + } + if (dropNode.node.contains(draggingNode.node, false)) { + dropInner = false; + } + if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) { + dropPrev = false; + dropInner = false; + dropNext = false; + } + const targetPosition = dropNode.$el.getBoundingClientRect(); + const treePosition = el$.value.getBoundingClientRect(); + let dropType; + const prevPercent = dropPrev ? dropInner ? 0.25 : dropNext ? 0.45 : 1 : -1; + const nextPercent = dropNext ? dropInner ? 0.75 : dropPrev ? 0.55 : 0 : 1; + let indicatorTop = -9999; + const distance = event.clientY - targetPosition.top; + if (distance < targetPosition.height * prevPercent) { + dropType = "before"; + } else if (distance > targetPosition.height * nextPercent) { + dropType = "after"; + } else if (dropInner) { + dropType = "inner"; + } else { + dropType = "none"; + } + const iconPosition = dropNode.$el.querySelector(`.${ns.be("node", "expand-icon")}`).getBoundingClientRect(); + const dropIndicator = dropIndicator$.value; + if (dropType === "before") { + indicatorTop = iconPosition.top - treePosition.top; + } else if (dropType === "after") { + indicatorTop = iconPosition.bottom - treePosition.top; + } + dropIndicator.style.top = `${indicatorTop}px`; + dropIndicator.style.left = `${iconPosition.right - treePosition.left}px`; + if (dropType === "inner") { + addClass(dropNode.$el, ns.is("drop-inner")); + } else { + removeClass(dropNode.$el, ns.is("drop-inner")); + } + dragState.value.showDropIndicator = dropType === "before" || dropType === "after"; + dragState.value.allowDrop = dragState.value.showDropIndicator || userAllowDropInner; + dragState.value.dropType = dropType; + ctx.emit("node-drag-over", draggingNode.node, dropNode.node, event); + }; + const treeNodeDragEnd = (event) => { + const { draggingNode, dropType, dropNode } = dragState.value; + event.preventDefault(); + event.dataTransfer.dropEffect = "move"; + if (draggingNode && dropNode) { + const draggingNodeCopy = { data: draggingNode.node.data }; + if (dropType !== "none") { + draggingNode.node.remove(); + } + if (dropType === "before") { + dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node); + } else if (dropType === "after") { + dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node); + } else if (dropType === "inner") { + dropNode.node.insertChild(draggingNodeCopy); + } + if (dropType !== "none") { + store.value.registerNode(draggingNodeCopy); + } + removeClass(dropNode.$el, ns.is("drop-inner")); + ctx.emit("node-drag-end", draggingNode.node, dropNode.node, dropType, event); + if (dropType !== "none") { + ctx.emit("node-drop", draggingNode.node, dropNode.node, dropType, event); + } + } + if (draggingNode && !dropNode) { + ctx.emit("node-drag-end", draggingNode.node, null, dropType, event); + } + dragState.value.showDropIndicator = false; + dragState.value.draggingNode = null; + dragState.value.dropNode = null; + dragState.value.allowDrop = true; + }; + vue.provide(dragEventsKey, { + treeNodeDragStart, + treeNodeDragOver, + treeNodeDragEnd + }); + return { + dragState + }; + } + + const _sfc_main$b = vue.defineComponent({ + name: "ElTreeNode", + components: { + ElCollapseTransition: _CollapseTransition, + ElCheckbox, + NodeContent, + ElIcon, + Loading: loading_default + }, + props: { + node: { + type: Node$1, + default: () => ({}) + }, + props: { + type: Object, + default: () => ({}) + }, + accordion: Boolean, + renderContent: Function, + renderAfterExpand: Boolean, + showCheckbox: { + type: Boolean, + default: false + } + }, + emits: ["node-expand"], + setup(props, ctx) { + const ns = useNamespace("tree"); + const { broadcastExpanded } = useNodeExpandEventBroadcast(props); + const tree = vue.inject("RootTree"); + const expanded = vue.ref(false); + const childNodeRendered = vue.ref(false); + const oldChecked = vue.ref(null); + const oldIndeterminate = vue.ref(null); + const node$ = vue.ref(null); + const dragEvents = vue.inject(dragEventsKey); + const instance = vue.getCurrentInstance(); + vue.provide("NodeInstance", instance); + if (props.node.expanded) { + expanded.value = true; + childNodeRendered.value = true; + } + const childrenKey = tree.props["children"] || "children"; + vue.watch(() => { + const children = props.node.data[childrenKey]; + return children && [...children]; + }, () => { + props.node.updateChildren(); + }); + vue.watch(() => props.node.indeterminate, (val) => { + handleSelectChange(props.node.checked, val); + }); + vue.watch(() => props.node.checked, (val) => { + handleSelectChange(val, props.node.indeterminate); + }); + vue.watch(() => props.node.expanded, (val) => { + vue.nextTick(() => expanded.value = val); + if (val) { + childNodeRendered.value = true; + } + }); + const getNodeKey$1 = (node) => { + return getNodeKey(tree.props.nodeKey, node.data); + }; + const getNodeClass = (node) => { + const nodeClassFunc = props.props.class; + if (!nodeClassFunc) { + return {}; + } + let className; + if (isFunction$1(nodeClassFunc)) { + const { data } = node; + className = nodeClassFunc(data, node); + } else { + className = nodeClassFunc; + } + if (isString$1(className)) { + return { [className]: true }; + } else { + return className; + } + }; + const handleSelectChange = (checked, indeterminate) => { + if (oldChecked.value !== checked || oldIndeterminate.value !== indeterminate) { + tree.ctx.emit("check-change", props.node.data, checked, indeterminate); + } + oldChecked.value = checked; + oldIndeterminate.value = indeterminate; + }; + const handleClick = (e) => { + handleCurrentChange(tree.store, tree.ctx.emit, () => tree.store.value.setCurrentNode(props.node)); + tree.currentNode.value = props.node; + if (tree.props.expandOnClickNode) { + handleExpandIconClick(); + } + if (tree.props.checkOnClickNode && !props.node.disabled) { + handleCheckChange(null, { + target: { checked: !props.node.checked } + }); + } + tree.ctx.emit("node-click", props.node.data, props.node, instance, e); + }; + const handleContextMenu = (event) => { + if (tree.instance.vnode.props["onNodeContextmenu"]) { + event.stopPropagation(); + event.preventDefault(); + } + tree.ctx.emit("node-contextmenu", event, props.node.data, props.node, instance); + }; + const handleExpandIconClick = () => { + if (props.node.isLeaf) + return; + if (expanded.value) { + tree.ctx.emit("node-collapse", props.node.data, props.node, instance); + props.node.collapse(); + } else { + props.node.expand(); + ctx.emit("node-expand", props.node.data, props.node, instance); + } + }; + const handleCheckChange = (value, ev) => { + props.node.setChecked(ev.target.checked, !tree.props.checkStrictly); + vue.nextTick(() => { + const store = tree.store.value; + tree.ctx.emit("check", props.node.data, { + checkedNodes: store.getCheckedNodes(), + checkedKeys: store.getCheckedKeys(), + halfCheckedNodes: store.getHalfCheckedNodes(), + halfCheckedKeys: store.getHalfCheckedKeys() + }); + }); + }; + const handleChildNodeExpand = (nodeData, node, instance2) => { + broadcastExpanded(node); + tree.ctx.emit("node-expand", nodeData, node, instance2); + }; + const handleDragStart = (event) => { + if (!tree.props.draggable) + return; + dragEvents.treeNodeDragStart({ event, treeNode: props }); + }; + const handleDragOver = (event) => { + event.preventDefault(); + if (!tree.props.draggable) + return; + dragEvents.treeNodeDragOver({ + event, + treeNode: { $el: node$.value, node: props.node } + }); + }; + const handleDrop = (event) => { + event.preventDefault(); + }; + const handleDragEnd = (event) => { + if (!tree.props.draggable) + return; + dragEvents.treeNodeDragEnd(event); + }; + return { + ns, + node$, + tree, + expanded, + childNodeRendered, + oldChecked, + oldIndeterminate, + getNodeKey: getNodeKey$1, + getNodeClass, + handleSelectChange, + handleClick, + handleContextMenu, + handleExpandIconClick, + handleCheckChange, + handleChildNodeExpand, + handleDragStart, + handleDragOver, + handleDrop, + handleDragEnd, + CaretRight: caret_right_default + }; + } + }); + const _hoisted_1$7 = ["aria-expanded", "aria-disabled", "aria-checked", "draggable", "data-key"]; + const _hoisted_2$5 = ["aria-expanded"]; + function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_icon = vue.resolveComponent("el-icon"); + const _component_el_checkbox = vue.resolveComponent("el-checkbox"); + const _component_loading = vue.resolveComponent("loading"); + const _component_node_content = vue.resolveComponent("node-content"); + const _component_el_tree_node = vue.resolveComponent("el-tree-node"); + const _component_el_collapse_transition = vue.resolveComponent("el-collapse-transition"); + return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { + ref: "node$", + class: vue.normalizeClass([ + _ctx.ns.b("node"), + _ctx.ns.is("expanded", _ctx.expanded), + _ctx.ns.is("current", _ctx.node.isCurrent), + _ctx.ns.is("hidden", !_ctx.node.visible), + _ctx.ns.is("focusable", !_ctx.node.disabled), + _ctx.ns.is("checked", !_ctx.node.disabled && _ctx.node.checked), + _ctx.getNodeClass(_ctx.node) + ]), + role: "treeitem", + tabindex: "-1", + "aria-expanded": _ctx.expanded, + "aria-disabled": _ctx.node.disabled, + "aria-checked": _ctx.node.checked, + draggable: _ctx.tree.props.draggable, + "data-key": _ctx.getNodeKey(_ctx.node), + onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"])), + onContextmenu: _cache[2] || (_cache[2] = (...args) => _ctx.handleContextMenu && _ctx.handleContextMenu(...args)), + onDragstart: _cache[3] || (_cache[3] = vue.withModifiers((...args) => _ctx.handleDragStart && _ctx.handleDragStart(...args), ["stop"])), + onDragover: _cache[4] || (_cache[4] = vue.withModifiers((...args) => _ctx.handleDragOver && _ctx.handleDragOver(...args), ["stop"])), + onDragend: _cache[5] || (_cache[5] = vue.withModifiers((...args) => _ctx.handleDragEnd && _ctx.handleDragEnd(...args), ["stop"])), + onDrop: _cache[6] || (_cache[6] = vue.withModifiers((...args) => _ctx.handleDrop && _ctx.handleDrop(...args), ["stop"])) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.be("node", "content")), + style: vue.normalizeStyle({ paddingLeft: (_ctx.node.level - 1) * _ctx.tree.props.indent + "px" }) + }, [ + _ctx.tree.props.icon || _ctx.CaretRight ? (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 0, + class: vue.normalizeClass([ + _ctx.ns.be("node", "expand-icon"), + _ctx.ns.is("leaf", _ctx.node.isLeaf), + { + expanded: !_ctx.node.isLeaf && _ctx.expanded + } + ]), + onClick: vue.withModifiers(_ctx.handleExpandIconClick, ["stop"]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tree.props.icon || _ctx.CaretRight))) + ]), + _: 1 + }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true), + _ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, { + key: 1, + "model-value": _ctx.node.checked, + indeterminate: _ctx.node.indeterminate, + disabled: !!_ctx.node.disabled, + onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => { + }, ["stop"])), + onChange: _ctx.handleCheckChange + }, null, 8, ["model-value", "indeterminate", "disabled", "onChange"])) : vue.createCommentVNode("v-if", true), + _ctx.node.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 2, + class: vue.normalizeClass([_ctx.ns.be("node", "loading-icon"), _ctx.ns.is("loading")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_loading) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true), + vue.createVNode(_component_node_content, { + node: _ctx.node, + "render-content": _ctx.renderContent + }, null, 8, ["node", "render-content"]) + ], 6), + vue.createVNode(_component_el_collapse_transition, null, { + default: vue.withCtx(() => [ + !_ctx.renderAfterExpand || _ctx.childNodeRendered ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(_ctx.ns.be("node", "children")), + role: "group", + "aria-expanded": _ctx.expanded + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.node.childNodes, (child) => { + return vue.openBlock(), vue.createBlock(_component_el_tree_node, { + key: _ctx.getNodeKey(child), + "render-content": _ctx.renderContent, + "render-after-expand": _ctx.renderAfterExpand, + "show-checkbox": _ctx.showCheckbox, + node: child, + accordion: _ctx.accordion, + props: _ctx.props, + onNodeExpand: _ctx.handleChildNodeExpand + }, null, 8, ["render-content", "render-after-expand", "show-checkbox", "node", "accordion", "props", "onNodeExpand"]); + }), 128)) + ], 10, _hoisted_2$5)), [ + [vue.vShow, _ctx.expanded] + ]) : vue.createCommentVNode("v-if", true) + ]), + _: 1 + }) + ], 42, _hoisted_1$7)), [ + [vue.vShow, _ctx.node.visible] + ]); + } + var ElTreeNode$1 = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$2], ["__file", "tree-node.vue"]]); + + function useKeydown({ el$ }, store) { + const ns = useNamespace("tree"); + const treeItems = vue.shallowRef([]); + const checkboxItems = vue.shallowRef([]); + vue.onMounted(() => { + initTabIndex(); + }); + vue.onUpdated(() => { + treeItems.value = Array.from(el$.value.querySelectorAll("[role=treeitem]")); + checkboxItems.value = Array.from(el$.value.querySelectorAll("input[type=checkbox]")); + }); + vue.watch(checkboxItems, (val) => { + val.forEach((checkbox) => { + checkbox.setAttribute("tabindex", "-1"); + }); + }); + const handleKeydown = (ev) => { + const currentItem = ev.target; + if (!currentItem.className.includes(ns.b("node"))) + return; + const code = ev.code; + treeItems.value = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`)); + const currentIndex = treeItems.value.indexOf(currentItem); + let nextIndex; + if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) { + ev.preventDefault(); + if (code === EVENT_CODE.up) { + nextIndex = currentIndex === -1 ? 0 : currentIndex !== 0 ? currentIndex - 1 : treeItems.value.length - 1; + const startIndex = nextIndex; + while (true) { + if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus) + break; + nextIndex--; + if (nextIndex === startIndex) { + nextIndex = -1; + break; + } + if (nextIndex < 0) { + nextIndex = treeItems.value.length - 1; + } + } + } else { + nextIndex = currentIndex === -1 ? 0 : currentIndex < treeItems.value.length - 1 ? currentIndex + 1 : 0; + const startIndex = nextIndex; + while (true) { + if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus) + break; + nextIndex++; + if (nextIndex === startIndex) { + nextIndex = -1; + break; + } + if (nextIndex >= treeItems.value.length) { + nextIndex = 0; + } + } + } + nextIndex !== -1 && treeItems.value[nextIndex].focus(); + } + if ([EVENT_CODE.left, EVENT_CODE.right].includes(code)) { + ev.preventDefault(); + currentItem.click(); + } + const hasInput = currentItem.querySelector('[type="checkbox"]'); + if ([EVENT_CODE.enter, EVENT_CODE.space].includes(code) && hasInput) { + ev.preventDefault(); + hasInput.click(); + } + }; + useEventListener(el$, "keydown", handleKeydown); + const initTabIndex = () => { + var _a; + treeItems.value = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`)); + checkboxItems.value = Array.from(el$.value.querySelectorAll("input[type=checkbox]")); + const checkedItem = el$.value.querySelectorAll(`.${ns.is("checked")}[role=treeitem]`); + if (checkedItem.length) { + checkedItem[0].setAttribute("tabindex", "0"); + return; + } + (_a = treeItems.value[0]) == null ? void 0 : _a.setAttribute("tabindex", "0"); + }; + } + + const _sfc_main$a = vue.defineComponent({ + name: "ElTree", + components: { ElTreeNode: ElTreeNode$1 }, + props: { + data: { + type: Array, + default: () => [] + }, + emptyText: { + type: String + }, + renderAfterExpand: { + type: Boolean, + default: true + }, + nodeKey: String, + checkStrictly: Boolean, + defaultExpandAll: Boolean, + expandOnClickNode: { + type: Boolean, + default: true + }, + checkOnClickNode: Boolean, + checkDescendants: { + type: Boolean, + default: false + }, + autoExpandParent: { + type: Boolean, + default: true + }, + defaultCheckedKeys: Array, + defaultExpandedKeys: Array, + currentNodeKey: [String, Number], + renderContent: Function, + showCheckbox: { + type: Boolean, + default: false + }, + draggable: { + type: Boolean, + default: false + }, + allowDrag: Function, + allowDrop: Function, + props: { + type: Object, + default: () => ({ + children: "children", + label: "label", + disabled: "disabled" + }) + }, + lazy: { + type: Boolean, + default: false + }, + highlightCurrent: Boolean, + load: Function, + filterNodeMethod: Function, + accordion: Boolean, + indent: { + type: Number, + default: 18 + }, + icon: { + type: iconPropType + } + }, + emits: [ + "check-change", + "current-change", + "node-click", + "node-contextmenu", + "node-collapse", + "node-expand", + "check", + "node-drag-start", + "node-drag-end", + "node-drop", + "node-drag-leave", + "node-drag-enter", + "node-drag-over" + ], + setup(props, ctx) { + const { t } = useLocale(); + const ns = useNamespace("tree"); + const store = vue.ref(new TreeStore({ + key: props.nodeKey, + data: props.data, + lazy: props.lazy, + props: props.props, + load: props.load, + currentNodeKey: props.currentNodeKey, + checkStrictly: props.checkStrictly, + checkDescendants: props.checkDescendants, + defaultCheckedKeys: props.defaultCheckedKeys, + defaultExpandedKeys: props.defaultExpandedKeys, + autoExpandParent: props.autoExpandParent, + defaultExpandAll: props.defaultExpandAll, + filterNodeMethod: props.filterNodeMethod + })); + store.value.initialize(); + const root = vue.ref(store.value.root); + const currentNode = vue.ref(null); + const el$ = vue.ref(null); + const dropIndicator$ = vue.ref(null); + const { broadcastExpanded } = useNodeExpandEventBroadcast(props); + const { dragState } = useDragNodeHandler({ + props, + ctx, + el$, + dropIndicator$, + store + }); + useKeydown({ el$ }, store); + const isEmpty = vue.computed(() => { + const { childNodes } = root.value; + return !childNodes || childNodes.length === 0 || childNodes.every(({ visible }) => !visible); + }); + vue.watch(() => props.currentNodeKey, (newVal) => { + store.value.setCurrentNodeKey(newVal); + }); + vue.watch(() => props.defaultCheckedKeys, (newVal) => { + store.value.setDefaultCheckedKey(newVal); + }); + vue.watch(() => props.defaultExpandedKeys, (newVal) => { + store.value.setDefaultExpandedKeys(newVal); + }); + vue.watch(() => props.data, (newVal) => { + store.value.setData(newVal); + }, { deep: true }); + vue.watch(() => props.checkStrictly, (newVal) => { + store.value.checkStrictly = newVal; + }); + const filter = (value) => { + if (!props.filterNodeMethod) + throw new Error("[Tree] filterNodeMethod is required when filter"); + store.value.filter(value); + }; + const getNodeKey$1 = (node) => { + return getNodeKey(props.nodeKey, node.data); + }; + const getNodePath = (data) => { + if (!props.nodeKey) + throw new Error("[Tree] nodeKey is required in getNodePath"); + const node = store.value.getNode(data); + if (!node) + return []; + const path = [node.data]; + let parent = node.parent; + while (parent && parent !== root.value) { + path.push(parent.data); + parent = parent.parent; + } + return path.reverse(); + }; + const getCheckedNodes = (leafOnly, includeHalfChecked) => { + return store.value.getCheckedNodes(leafOnly, includeHalfChecked); + }; + const getCheckedKeys = (leafOnly) => { + return store.value.getCheckedKeys(leafOnly); + }; + const getCurrentNode = () => { + const currentNode2 = store.value.getCurrentNode(); + return currentNode2 ? currentNode2.data : null; + }; + const getCurrentKey = () => { + if (!props.nodeKey) + throw new Error("[Tree] nodeKey is required in getCurrentKey"); + const currentNode2 = getCurrentNode(); + return currentNode2 ? currentNode2[props.nodeKey] : null; + }; + const setCheckedNodes = (nodes, leafOnly) => { + if (!props.nodeKey) + throw new Error("[Tree] nodeKey is required in setCheckedNodes"); + store.value.setCheckedNodes(nodes, leafOnly); + }; + const setCheckedKeys = (keys, leafOnly) => { + if (!props.nodeKey) + throw new Error("[Tree] nodeKey is required in setCheckedKeys"); + store.value.setCheckedKeys(keys, leafOnly); + }; + const setChecked = (data, checked, deep) => { + store.value.setChecked(data, checked, deep); + }; + const getHalfCheckedNodes = () => { + return store.value.getHalfCheckedNodes(); + }; + const getHalfCheckedKeys = () => { + return store.value.getHalfCheckedKeys(); + }; + const setCurrentNode = (node, shouldAutoExpandParent = true) => { + if (!props.nodeKey) + throw new Error("[Tree] nodeKey is required in setCurrentNode"); + handleCurrentChange(store, ctx.emit, () => store.value.setUserCurrentNode(node, shouldAutoExpandParent)); + }; + const setCurrentKey = (key, shouldAutoExpandParent = true) => { + if (!props.nodeKey) + throw new Error("[Tree] nodeKey is required in setCurrentKey"); + handleCurrentChange(store, ctx.emit, () => store.value.setCurrentNodeKey(key, shouldAutoExpandParent)); + }; + const getNode = (data) => { + return store.value.getNode(data); + }; + const remove = (data) => { + store.value.remove(data); + }; + const append = (data, parentNode) => { + store.value.append(data, parentNode); + }; + const insertBefore = (data, refNode) => { + store.value.insertBefore(data, refNode); + }; + const insertAfter = (data, refNode) => { + store.value.insertAfter(data, refNode); + }; + const handleNodeExpand = (nodeData, node, instance) => { + broadcastExpanded(node); + ctx.emit("node-expand", nodeData, node, instance); + }; + const updateKeyChildren = (key, data) => { + if (!props.nodeKey) + throw new Error("[Tree] nodeKey is required in updateKeyChild"); + store.value.updateChildren(key, data); + }; + vue.provide("RootTree", { + ctx, + props, + store, + root, + currentNode, + instance: vue.getCurrentInstance() + }); + vue.provide(formItemContextKey, void 0); + return { + ns, + store, + root, + currentNode, + dragState, + el$, + dropIndicator$, + isEmpty, + filter, + getNodeKey: getNodeKey$1, + getNodePath, + getCheckedNodes, + getCheckedKeys, + getCurrentNode, + getCurrentKey, + setCheckedNodes, + setCheckedKeys, + setChecked, + getHalfCheckedNodes, + getHalfCheckedKeys, + setCurrentNode, + setCurrentKey, + t, + getNode, + remove, + append, + insertBefore, + insertAfter, + handleNodeExpand, + updateKeyChildren + }; + } + }); + function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) { + var _a; + const _component_el_tree_node = vue.resolveComponent("el-tree-node"); + return vue.openBlock(), vue.createElementBlock("div", { + ref: "el$", + class: vue.normalizeClass([ + _ctx.ns.b(), + _ctx.ns.is("dragging", !!_ctx.dragState.draggingNode), + _ctx.ns.is("drop-not-allow", !_ctx.dragState.allowDrop), + _ctx.ns.is("drop-inner", _ctx.dragState.dropType === "inner"), + { [_ctx.ns.m("highlight-current")]: _ctx.highlightCurrent } + ]), + role: "tree" + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.root.childNodes, (child) => { + return vue.openBlock(), vue.createBlock(_component_el_tree_node, { + key: _ctx.getNodeKey(child), + node: child, + props: _ctx.props, + accordion: _ctx.accordion, + "render-after-expand": _ctx.renderAfterExpand, + "show-checkbox": _ctx.showCheckbox, + "render-content": _ctx.renderContent, + onNodeExpand: _ctx.handleNodeExpand + }, null, 8, ["node", "props", "accordion", "render-after-expand", "show-checkbox", "render-content", "onNodeExpand"]); + }), 128)), + _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + class: vue.normalizeClass(_ctx.ns.e("empty-block")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(_ctx.ns.e("empty-text")) + }, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : _ctx.t("el.tree.emptyText")), 3) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.withDirectives(vue.createElementVNode("div", { + ref: "dropIndicator$", + class: vue.normalizeClass(_ctx.ns.e("drop-indicator")) + }, null, 2), [ + [vue.vShow, _ctx.dragState.showDropIndicator] + ]) + ], 2); + } + var Tree = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$1], ["__file", "tree.vue"]]); + + Tree.install = (app) => { + app.component(Tree.name, Tree); + }; + const _Tree = Tree; + const ElTree = _Tree; + + const useSelect = (props, { attrs }, { + tree, + key + }) => { + const ns = useNamespace("tree-select"); + const result = { + ...pick(vue.toRefs(props), Object.keys(ElSelect.props)), + ...attrs, + valueKey: key, + popperClass: vue.computed(() => { + const classes = [ns.e("popper")]; + if (props.popperClass) + classes.push(props.popperClass); + return classes.join(" "); + }), + filterMethod: (keyword = "") => { + if (props.filterMethod) + props.filterMethod(keyword); + vue.nextTick(() => { + var _a; + (_a = tree.value) == null ? void 0 : _a.filter(keyword); + }); + }, + onVisibleChange: (visible) => { + var _a; + (_a = attrs.onVisibleChange) == null ? void 0 : _a.call(attrs, visible); + if (props.filterable && visible) { + result.filterMethod(); + } + } + }; + return result; + }; + + const component = vue.defineComponent({ + extends: ElOption, + setup(props, ctx) { + const result = ElOption.setup(props, ctx); + delete result.selectOptionClick; + const vm = vue.getCurrentInstance().proxy; + vue.nextTick(() => { + if (!result.select.cachedOptions.get(vm.value)) { + result.select.onOptionCreate(vm); + } + }); + return result; + }, + methods: { + selectOptionClick() { + this.$el.parentElement.click(); + } + } + }); + var TreeSelectOption = component; + + function isValidValue(val) { + return val || val === 0; + } + function isValidArray(val) { + return Array.isArray(val) && val.length; + } + function toValidArray(val) { + return Array.isArray(val) ? val : isValidValue(val) ? [val] : []; + } + function treeFind(treeData, findCallback, getChildren, resultCallback, parent) { + for (let i = 0; i < treeData.length; i++) { + const data = treeData[i]; + if (findCallback(data, i, treeData, parent)) { + return resultCallback ? resultCallback(data, i, treeData, parent) : data; + } else { + const children = getChildren(data); + if (isValidArray(children)) { + const find = treeFind(children, findCallback, getChildren, resultCallback, data); + if (find) + return find; + } + } + } + } + function treeEach(treeData, callback, getChildren, parent) { + for (let i = 0; i < treeData.length; i++) { + const data = treeData[i]; + callback(data, i, treeData, parent); + const children = getChildren(data); + if (isValidArray(children)) { + treeEach(children, callback, getChildren, data); + } + } + } + + const useTree$1 = (props, { attrs, slots, emit }, { + select, + tree, + key + }) => { + vue.watch(() => props.modelValue, () => { + if (props.showCheckbox) { + vue.nextTick(() => { + const treeInstance = tree.value; + if (treeInstance && !isEqual$1(treeInstance.getCheckedKeys(), toValidArray(props.modelValue))) { + treeInstance.setCheckedKeys(toValidArray(props.modelValue)); + } + }); + } + }, { + immediate: true, + deep: true + }); + const propsMap = vue.computed(() => ({ + value: key.value, + label: "label", + children: "children", + disabled: "disabled", + isLeaf: "isLeaf", + ...props.props + })); + const getNodeValByProp = (prop, data) => { + var _a; + const propVal = propsMap.value[prop]; + if (isFunction$1(propVal)) { + return propVal(data, (_a = tree.value) == null ? void 0 : _a.getNode(getNodeValByProp("value", data))); + } else { + return data[propVal]; + } + }; + const defaultExpandedParentKeys = toValidArray(props.modelValue).map((value) => { + return treeFind(props.data || [], (data) => getNodeValByProp("value", data) === value, (data) => getNodeValByProp("children", data), (data, index, array, parent) => parent && getNodeValByProp("value", parent)); + }).filter((item) => isValidValue(item)); + const cacheOptions = vue.computed(() => { + if (!props.renderAfterExpand && !props.lazy) + return []; + const options = []; + treeEach(props.data.concat(props.cacheData), (node) => { + const value = getNodeValByProp("value", node); + options.push({ + value, + currentLabel: getNodeValByProp("label", node), + isDisabled: getNodeValByProp("disabled", node) + }); + }, (data) => getNodeValByProp("children", data)); + return options; + }); + return { + ...pick(vue.toRefs(props), Object.keys(_Tree.props)), + ...attrs, + nodeKey: key, + expandOnClickNode: vue.computed(() => { + return !props.checkStrictly && props.expandOnClickNode; + }), + defaultExpandedKeys: vue.computed(() => { + return props.defaultExpandedKeys ? props.defaultExpandedKeys.concat(defaultExpandedParentKeys) : defaultExpandedParentKeys; + }), + renderContent: (h, { node, data, store }) => { + return h(TreeSelectOption, { + value: getNodeValByProp("value", data), + label: getNodeValByProp("label", data), + disabled: getNodeValByProp("disabled", data) + }, props.renderContent ? () => props.renderContent(h, { node, data, store }) : slots.default ? () => slots.default({ node, data, store }) : void 0); + }, + filterNodeMethod: (value, data, node) => { + var _a; + if (props.filterNodeMethod) + return props.filterNodeMethod(value, data, node); + if (!value) + return true; + return (_a = getNodeValByProp("label", data)) == null ? void 0 : _a.includes(value); + }, + onNodeClick: (data, node, e) => { + var _a, _b, _c; + (_a = attrs.onNodeClick) == null ? void 0 : _a.call(attrs, data, node, e); + if (props.showCheckbox && props.checkOnClickNode) + return; + if (!props.showCheckbox && (props.checkStrictly || node.isLeaf)) { + if (!getNodeValByProp("disabled", data)) { + const option = (_b = select.value) == null ? void 0 : _b.options.get(getNodeValByProp("value", data)); + (_c = select.value) == null ? void 0 : _c.handleOptionSelect(option, true); + } + } else if (props.expandOnClickNode) { + e.proxy.handleExpandIconClick(); + } + }, + onCheck: (data, params) => { + var _a; + (_a = attrs.onCheck) == null ? void 0 : _a.call(attrs, data, params); + const dataValue = getNodeValByProp("value", data); + if (props.checkStrictly) { + emit(UPDATE_MODEL_EVENT, props.multiple ? params.checkedKeys : params.checkedKeys.includes(dataValue) ? dataValue : void 0); + } else { + if (props.multiple) { + emit(UPDATE_MODEL_EVENT, tree.value.getCheckedKeys(true)); + } else { + const firstLeaf = treeFind([data], (data2) => !isValidArray(getNodeValByProp("children", data2)) && !getNodeValByProp("disabled", data2), (data2) => getNodeValByProp("children", data2)); + const firstLeafKey = firstLeaf ? getNodeValByProp("value", firstLeaf) : void 0; + const hasCheckedChild = isValidValue(props.modelValue) && !!treeFind([data], (data2) => getNodeValByProp("value", data2) === props.modelValue, (data2) => getNodeValByProp("children", data2)); + emit(UPDATE_MODEL_EVENT, firstLeafKey === props.modelValue || hasCheckedChild ? void 0 : firstLeafKey); + } + } + }, + cacheOptions + }; + }; + + var CacheOptions = vue.defineComponent({ + props: { + data: { + type: Array, + default: () => [] + } + }, + setup(props) { + const select = vue.inject(selectKey); + vue.watch(() => props.data, () => { + var _a; + props.data.forEach((item) => { + if (!select.cachedOptions.has(item.value)) { + select.cachedOptions.set(item.value, item); + } + }); + const inputs = ((_a = select.selectWrapper) == null ? void 0 : _a.querySelectorAll("input")) || []; + if (!Array.from(inputs).includes(document.activeElement)) { + select.setSelected(); + } + }, { flush: "post", immediate: true }); + return () => void 0; + } + }); + + const _sfc_main$9 = vue.defineComponent({ + name: "ElTreeSelect", + inheritAttrs: false, + props: { + ...ElSelect.props, + ..._Tree.props, + cacheData: { + type: Array, + default: () => [] + } + }, + setup(props, context) { + const { slots, expose } = context; + const select = vue.ref(); + const tree = vue.ref(); + const key = vue.computed(() => props.nodeKey || props.valueKey || "value"); + const selectProps = useSelect(props, context, { select, tree, key }); + const { cacheOptions, ...treeProps } = useTree$1(props, context, { + select, + tree, + key + }); + const methods = vue.reactive({}); + expose(methods); + vue.onMounted(() => { + Object.assign(methods, { + ...pick(tree.value, [ + "filter", + "updateKeyChildren", + "getCheckedNodes", + "setCheckedNodes", + "getCheckedKeys", + "setCheckedKeys", + "setChecked", + "getHalfCheckedNodes", + "getHalfCheckedKeys", + "getCurrentKey", + "getCurrentNode", + "setCurrentKey", + "setCurrentNode", + "getNode", + "remove", + "append", + "insertBefore", + "insertAfter" + ]), + ...pick(select.value, ["focus", "blur"]) + }); + }); + return () => vue.h(ElSelect, vue.reactive({ + ...selectProps, + ref: (ref2) => select.value = ref2 + }), { + ...slots, + default: () => [ + vue.h(CacheOptions, { data: cacheOptions.value }), + vue.h(_Tree, vue.reactive({ + ...treeProps, + ref: (ref2) => tree.value = ref2 + })) + ] + }); + } + }); + var TreeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__file", "tree-select.vue"]]); + + TreeSelect.install = (app) => { + app.component(TreeSelect.name, TreeSelect); + }; + const _TreeSelect = TreeSelect; + const ElTreeSelect = _TreeSelect; + + const ROOT_TREE_INJECTION_KEY = Symbol(); + const EMPTY_NODE = { + key: -1, + level: -1, + data: {} + }; + var TreeOptionsEnum = /* @__PURE__ */ ((TreeOptionsEnum2) => { + TreeOptionsEnum2["KEY"] = "id"; + TreeOptionsEnum2["LABEL"] = "label"; + TreeOptionsEnum2["CHILDREN"] = "children"; + TreeOptionsEnum2["DISABLED"] = "disabled"; + return TreeOptionsEnum2; + })(TreeOptionsEnum || {}); + var SetOperationEnum = /* @__PURE__ */ ((SetOperationEnum2) => { + SetOperationEnum2["ADD"] = "add"; + SetOperationEnum2["DELETE"] = "delete"; + return SetOperationEnum2; + })(SetOperationEnum || {}); + const itemSize = { + type: Number, + default: 26 + }; + const treeProps = buildProps({ + data: { + type: definePropType(Array), + default: () => mutable([]) + }, + emptyText: { + type: String + }, + height: { + type: Number, + default: 200 + }, + props: { + type: definePropType(Object), + default: () => mutable({ + children: "children" /* CHILDREN */, + label: "label" /* LABEL */, + disabled: "disabled" /* DISABLED */, + value: "id" /* KEY */ + }) + }, + highlightCurrent: { + type: Boolean, + default: false + }, + showCheckbox: { + type: Boolean, + default: false + }, + defaultCheckedKeys: { + type: definePropType(Array), + default: () => mutable([]) + }, + checkStrictly: { + type: Boolean, + default: false + }, + defaultExpandedKeys: { + type: definePropType(Array), + default: () => mutable([]) + }, + indent: { + type: Number, + default: 16 + }, + itemSize, + icon: { + type: iconPropType + }, + expandOnClickNode: { + type: Boolean, + default: true + }, + checkOnClickNode: { + type: Boolean, + default: false + }, + currentNodeKey: { + type: definePropType([String, Number]) + }, + accordion: { + type: Boolean, + default: false + }, + filterMethod: { + type: definePropType(Function) + }, + perfMode: { + type: Boolean, + default: true + } + }); + const treeNodeProps = buildProps({ + node: { + type: definePropType(Object), + default: () => mutable(EMPTY_NODE) + }, + expanded: { + type: Boolean, + default: false + }, + checked: { + type: Boolean, + default: false + }, + indeterminate: { + type: Boolean, + default: false + }, + showCheckbox: { + type: Boolean, + default: false + }, + disabled: { + type: Boolean, + default: false + }, + current: { + type: Boolean, + default: false + }, + hiddenExpandIcon: { + type: Boolean, + default: false + }, + itemSize + }); + const treeNodeContentProps = buildProps({ + node: { + type: definePropType(Object), + required: true + } + }); + const NODE_CLICK = "node-click"; + const NODE_EXPAND = "node-expand"; + const NODE_COLLAPSE = "node-collapse"; + const CURRENT_CHANGE = "current-change"; + const NODE_CHECK = "check"; + const NODE_CHECK_CHANGE = "check-change"; + const NODE_CONTEXTMENU = "node-contextmenu"; + const treeEmits = { + [NODE_CLICK]: (data, node, e) => data && node && e, + [NODE_EXPAND]: (data, node) => data && node, + [NODE_COLLAPSE]: (data, node) => data && node, + [CURRENT_CHANGE]: (data, node) => data && node, + [NODE_CHECK]: (data, checkedInfo) => data && checkedInfo, + [NODE_CHECK_CHANGE]: (data, checked) => data && typeof checked === "boolean", + [NODE_CONTEXTMENU]: (event, data, node) => event && data && node + }; + const treeNodeEmits = { + click: (node, e) => !!(node && e), + toggle: (node) => !!node, + check: (node, checked) => node && typeof checked === "boolean" + }; + + function useCheck(props, tree) { + const checkedKeys = vue.ref(/* @__PURE__ */ new Set()); + const indeterminateKeys = vue.ref(/* @__PURE__ */ new Set()); + const { emit } = vue.getCurrentInstance(); + vue.watch([() => tree.value, () => props.defaultCheckedKeys], () => { + return vue.nextTick(() => { + _setCheckedKeys(props.defaultCheckedKeys); + }); + }, { + immediate: true + }); + const updateCheckedKeys = () => { + if (!tree.value || !props.showCheckbox || props.checkStrictly) { + return; + } + const { levelTreeNodeMap, maxLevel } = tree.value; + const checkedKeySet = checkedKeys.value; + const indeterminateKeySet = /* @__PURE__ */ new Set(); + for (let level = maxLevel - 1; level >= 1; --level) { + const nodes = levelTreeNodeMap.get(level); + if (!nodes) + continue; + nodes.forEach((node) => { + const children = node.children; + if (children) { + let allChecked = true; + let hasChecked = false; + for (const childNode of children) { + const key = childNode.key; + if (checkedKeySet.has(key)) { + hasChecked = true; + } else if (indeterminateKeySet.has(key)) { + allChecked = false; + hasChecked = true; + break; + } else { + allChecked = false; + } + } + if (allChecked) { + checkedKeySet.add(node.key); + } else if (hasChecked) { + indeterminateKeySet.add(node.key); + checkedKeySet.delete(node.key); + } else { + checkedKeySet.delete(node.key); + indeterminateKeySet.delete(node.key); + } + } + }); + } + indeterminateKeys.value = indeterminateKeySet; + }; + const isChecked = (node) => checkedKeys.value.has(node.key); + const isIndeterminate = (node) => indeterminateKeys.value.has(node.key); + const toggleCheckbox = (node, isChecked2, nodeClick = true) => { + const checkedKeySet = checkedKeys.value; + const toggle = (node2, checked) => { + checkedKeySet[checked ? SetOperationEnum.ADD : SetOperationEnum.DELETE](node2.key); + const children = node2.children; + if (!props.checkStrictly && children) { + children.forEach((childNode) => { + if (!childNode.disabled) { + toggle(childNode, checked); + } + }); + } + }; + toggle(node, isChecked2); + updateCheckedKeys(); + if (nodeClick) { + afterNodeCheck(node, isChecked2); + } + }; + const afterNodeCheck = (node, checked) => { + const { checkedNodes, checkedKeys: checkedKeys2 } = getChecked(); + const { halfCheckedNodes, halfCheckedKeys } = getHalfChecked(); + emit(NODE_CHECK, node.data, { + checkedKeys: checkedKeys2, + checkedNodes, + halfCheckedKeys, + halfCheckedNodes + }); + emit(NODE_CHECK_CHANGE, node.data, checked); + }; + function getCheckedKeys(leafOnly = false) { + return getChecked(leafOnly).checkedKeys; + } + function getCheckedNodes(leafOnly = false) { + return getChecked(leafOnly).checkedNodes; + } + function getHalfCheckedKeys() { + return getHalfChecked().halfCheckedKeys; + } + function getHalfCheckedNodes() { + return getHalfChecked().halfCheckedNodes; + } + function getChecked(leafOnly = false) { + const checkedNodes = []; + const keys = []; + if ((tree == null ? void 0 : tree.value) && props.showCheckbox) { + const { treeNodeMap } = tree.value; + checkedKeys.value.forEach((key) => { + const node = treeNodeMap.get(key); + if (node && (!leafOnly || leafOnly && node.isLeaf)) { + keys.push(key); + checkedNodes.push(node.data); + } + }); + } + return { + checkedKeys: keys, + checkedNodes + }; + } + function getHalfChecked() { + const halfCheckedNodes = []; + const halfCheckedKeys = []; + if ((tree == null ? void 0 : tree.value) && props.showCheckbox) { + const { treeNodeMap } = tree.value; + indeterminateKeys.value.forEach((key) => { + const node = treeNodeMap.get(key); + if (node) { + halfCheckedKeys.push(key); + halfCheckedNodes.push(node.data); + } + }); + } + return { + halfCheckedNodes, + halfCheckedKeys + }; + } + function setCheckedKeys(keys) { + checkedKeys.value.clear(); + indeterminateKeys.value.clear(); + _setCheckedKeys(keys); + } + function setChecked(key, isChecked2) { + if ((tree == null ? void 0 : tree.value) && props.showCheckbox) { + const node = tree.value.treeNodeMap.get(key); + if (node) { + toggleCheckbox(node, isChecked2, false); + } + } + } + function _setCheckedKeys(keys) { + if (tree == null ? void 0 : tree.value) { + const { treeNodeMap } = tree.value; + if (props.showCheckbox && treeNodeMap && keys) { + for (const key of keys) { + const node = treeNodeMap.get(key); + if (node && !isChecked(node)) { + toggleCheckbox(node, true, false); + } + } + } + } + } + return { + updateCheckedKeys, + toggleCheckbox, + isChecked, + isIndeterminate, + getCheckedKeys, + getCheckedNodes, + getHalfCheckedKeys, + getHalfCheckedNodes, + setChecked, + setCheckedKeys + }; + } + + function useFilter(props, tree) { + const hiddenNodeKeySet = vue.ref(/* @__PURE__ */ new Set([])); + const hiddenExpandIconKeySet = vue.ref(/* @__PURE__ */ new Set([])); + const filterable = vue.computed(() => { + return isFunction$1(props.filterMethod); + }); + function doFilter(query) { + var _a; + if (!filterable.value) { + return; + } + const expandKeySet = /* @__PURE__ */ new Set(); + const hiddenExpandIconKeys = hiddenExpandIconKeySet.value; + const hiddenKeys = hiddenNodeKeySet.value; + const family = []; + const nodes = ((_a = tree.value) == null ? void 0 : _a.treeNodes) || []; + const filter = props.filterMethod; + hiddenKeys.clear(); + function traverse(nodes2) { + nodes2.forEach((node) => { + family.push(node); + if (filter == null ? void 0 : filter(query, node.data)) { + family.forEach((member) => { + expandKeySet.add(member.key); + }); + } else if (node.isLeaf) { + hiddenKeys.add(node.key); + } + const children = node.children; + if (children) { + traverse(children); + } + if (!node.isLeaf) { + if (!expandKeySet.has(node.key)) { + hiddenKeys.add(node.key); + } else if (children) { + let allHidden = true; + for (const childNode of children) { + if (!hiddenKeys.has(childNode.key)) { + allHidden = false; + break; + } + } + if (allHidden) { + hiddenExpandIconKeys.add(node.key); + } else { + hiddenExpandIconKeys.delete(node.key); + } + } + } + family.pop(); + }); + } + traverse(nodes); + return expandKeySet; + } + function isForceHiddenExpandIcon(node) { + return hiddenExpandIconKeySet.value.has(node.key); + } + return { + hiddenExpandIconKeySet, + hiddenNodeKeySet, + doFilter, + isForceHiddenExpandIcon + }; + } + + function useTree(props, emit) { + const expandedKeySet = vue.ref(new Set(props.defaultExpandedKeys)); + const currentKey = vue.ref(); + const tree = vue.shallowRef(); + vue.watch(() => props.currentNodeKey, (key) => { + currentKey.value = key; + }, { + immediate: true + }); + vue.watch(() => props.data, (data) => { + setData(data); + }, { + immediate: true + }); + const { + isIndeterminate, + isChecked, + toggleCheckbox, + getCheckedKeys, + getCheckedNodes, + getHalfCheckedKeys, + getHalfCheckedNodes, + setChecked, + setCheckedKeys + } = useCheck(props, tree); + const { doFilter, hiddenNodeKeySet, isForceHiddenExpandIcon } = useFilter(props, tree); + const valueKey = vue.computed(() => { + var _a; + return ((_a = props.props) == null ? void 0 : _a.value) || TreeOptionsEnum.KEY; + }); + const childrenKey = vue.computed(() => { + var _a; + return ((_a = props.props) == null ? void 0 : _a.children) || TreeOptionsEnum.CHILDREN; + }); + const disabledKey = vue.computed(() => { + var _a; + return ((_a = props.props) == null ? void 0 : _a.disabled) || TreeOptionsEnum.DISABLED; + }); + const labelKey = vue.computed(() => { + var _a; + return ((_a = props.props) == null ? void 0 : _a.label) || TreeOptionsEnum.LABEL; + }); + const flattenTree = vue.computed(() => { + const expandedKeys = expandedKeySet.value; + const hiddenKeys = hiddenNodeKeySet.value; + const flattenNodes = []; + const nodes = tree.value && tree.value.treeNodes || []; + function traverse() { + const stack = []; + for (let i = nodes.length - 1; i >= 0; --i) { + stack.push(nodes[i]); + } + while (stack.length) { + const node = stack.pop(); + if (!node) + continue; + if (!hiddenKeys.has(node.key)) { + flattenNodes.push(node); + } + if (expandedKeys.has(node.key)) { + const children = node.children; + if (children) { + const length = children.length; + for (let i = length - 1; i >= 0; --i) { + stack.push(children[i]); + } + } + } + } + } + traverse(); + return flattenNodes; + }); + const isNotEmpty = vue.computed(() => { + return flattenTree.value.length > 0; + }); + function createTree(data) { + const treeNodeMap = /* @__PURE__ */ new Map(); + const levelTreeNodeMap = /* @__PURE__ */ new Map(); + let maxLevel = 1; + function traverse(nodes, level = 1, parent = void 0) { + var _a; + const siblings = []; + for (const rawNode of nodes) { + const value = getKey(rawNode); + const node = { + level, + key: value, + data: rawNode + }; + node.label = getLabel(rawNode); + node.parent = parent; + const children = getChildren(rawNode); + node.disabled = getDisabled(rawNode); + node.isLeaf = !children || children.length === 0; + if (children && children.length) { + node.children = traverse(children, level + 1, node); + } + siblings.push(node); + treeNodeMap.set(value, node); + if (!levelTreeNodeMap.has(level)) { + levelTreeNodeMap.set(level, []); + } + (_a = levelTreeNodeMap.get(level)) == null ? void 0 : _a.push(node); + } + if (level > maxLevel) { + maxLevel = level; + } + return siblings; + } + const treeNodes = traverse(data); + return { + treeNodeMap, + levelTreeNodeMap, + maxLevel, + treeNodes + }; + } + function filter(query) { + const keys = doFilter(query); + if (keys) { + expandedKeySet.value = keys; + } + } + function getChildren(node) { + return node[childrenKey.value]; + } + function getKey(node) { + if (!node) { + return ""; + } + return node[valueKey.value]; + } + function getDisabled(node) { + return node[disabledKey.value]; + } + function getLabel(node) { + return node[labelKey.value]; + } + function toggleExpand(node) { + const expandedKeys = expandedKeySet.value; + if (expandedKeys.has(node.key)) { + collapseNode(node); + } else { + expandNode(node); + } + } + function setExpandedKeys(keys) { + expandedKeySet.value = new Set(keys); + } + function handleNodeClick(node, e) { + emit(NODE_CLICK, node.data, node, e); + handleCurrentChange(node); + if (props.expandOnClickNode) { + toggleExpand(node); + } + if (props.showCheckbox && props.checkOnClickNode && !node.disabled) { + toggleCheckbox(node, !isChecked(node), true); + } + } + function handleCurrentChange(node) { + if (!isCurrent(node)) { + currentKey.value = node.key; + emit(CURRENT_CHANGE, node.data, node); + } + } + function handleNodeCheck(node, checked) { + toggleCheckbox(node, checked); + } + function expandNode(node) { + const keySet = expandedKeySet.value; + if (tree.value && props.accordion) { + const { treeNodeMap } = tree.value; + keySet.forEach((key) => { + const treeNode = treeNodeMap.get(key); + if (node && node.level === (treeNode == null ? void 0 : treeNode.level)) { + keySet.delete(key); + } + }); + } + keySet.add(node.key); + emit(NODE_EXPAND, node.data, node); + } + function collapseNode(node) { + expandedKeySet.value.delete(node.key); + emit(NODE_COLLAPSE, node.data, node); + } + function isExpanded(node) { + return expandedKeySet.value.has(node.key); + } + function isDisabled(node) { + return !!node.disabled; + } + function isCurrent(node) { + const current = currentKey.value; + return !!current && current === node.key; + } + function getCurrentNode() { + var _a, _b; + if (!currentKey.value) + return void 0; + return (_b = (_a = tree.value) == null ? void 0 : _a.treeNodeMap.get(currentKey.value)) == null ? void 0 : _b.data; + } + function getCurrentKey() { + return currentKey.value; + } + function setCurrentKey(key) { + currentKey.value = key; + } + function setData(data) { + vue.nextTick(() => tree.value = createTree(data)); + } + function getNode(data) { + var _a; + const key = isObject$1(data) ? getKey(data) : data; + return (_a = tree.value) == null ? void 0 : _a.treeNodeMap.get(key); + } + return { + tree, + flattenTree, + isNotEmpty, + getKey, + getChildren, + toggleExpand, + toggleCheckbox, + isExpanded, + isChecked, + isIndeterminate, + isDisabled, + isCurrent, + isForceHiddenExpandIcon, + handleNodeClick, + handleNodeCheck, + getCurrentNode, + getCurrentKey, + setCurrentKey, + getCheckedKeys, + getCheckedNodes, + getHalfCheckedKeys, + getHalfCheckedNodes, + setChecked, + setCheckedKeys, + filter, + setData, + getNode, + expandNode, + collapseNode, + setExpandedKeys + }; + } + + var ElNodeContent = vue.defineComponent({ + name: "ElTreeNodeContent", + props: treeNodeContentProps, + setup(props) { + const tree = vue.inject(ROOT_TREE_INJECTION_KEY); + const ns = useNamespace("tree"); + return () => { + const node = props.node; + const { data } = node; + return (tree == null ? void 0 : tree.ctx.slots.default) ? tree.ctx.slots.default({ node, data }) : vue.h("span", { class: ns.be("node", "label") }, [node == null ? void 0 : node.label]); + }; + } + }); + + const _hoisted_1$6 = ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick"]; + const __default__$7 = vue.defineComponent({ + name: "ElTreeNode" + }); + const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$7, + props: treeNodeProps, + emits: treeNodeEmits, + setup(__props, { emit }) { + const props = __props; + const tree = vue.inject(ROOT_TREE_INJECTION_KEY); + const ns = useNamespace("tree"); + const indent = vue.computed(() => { + var _a; + return (_a = tree == null ? void 0 : tree.props.indent) != null ? _a : 16; + }); + const icon = vue.computed(() => { + var _a; + return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : caret_right_default; + }); + const handleClick = (e) => { + emit("click", props.node, e); + }; + const handleExpandIconClick = () => { + emit("toggle", props.node); + }; + const handleCheckChange = (value) => { + emit("check", props.node, value); + }; + const handleContextMenu = (event) => { + var _a, _b, _c, _d; + if ((_c = (_b = (_a = tree == null ? void 0 : tree.instance) == null ? void 0 : _a.vnode) == null ? void 0 : _b.props) == null ? void 0 : _c["onNodeContextmenu"]) { + event.stopPropagation(); + event.preventDefault(); + } + tree == null ? void 0 : tree.ctx.emit(NODE_CONTEXTMENU, event, (_d = props.node) == null ? void 0 : _d.data, props.node); + }; + return (_ctx, _cache) => { + var _a, _b, _c; + return vue.openBlock(), vue.createElementBlock("div", { + ref: "node$", + class: vue.normalizeClass([ + vue.unref(ns).b("node"), + vue.unref(ns).is("expanded", _ctx.expanded), + vue.unref(ns).is("current", _ctx.current), + vue.unref(ns).is("focusable", !_ctx.disabled), + vue.unref(ns).is("checked", !_ctx.disabled && _ctx.checked) + ]), + role: "treeitem", + tabindex: "-1", + "aria-expanded": _ctx.expanded, + "aria-disabled": _ctx.disabled, + "aria-checked": _ctx.checked, + "data-key": (_a = _ctx.node) == null ? void 0 : _a.key, + onClick: vue.withModifiers(handleClick, ["stop"]), + onContextmenu: handleContextMenu + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).be("node", "content")), + style: vue.normalizeStyle({ + paddingLeft: `${(_ctx.node.level - 1) * vue.unref(indent)}px`, + height: _ctx.itemSize + "px" + }) + }, [ + vue.unref(icon) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass([ + vue.unref(ns).is("leaf", !!((_b = _ctx.node) == null ? void 0 : _b.isLeaf)), + vue.unref(ns).is("hidden", _ctx.hiddenExpandIcon), + { + expanded: !((_c = _ctx.node) == null ? void 0 : _c.isLeaf) && _ctx.expanded + }, + vue.unref(ns).be("node", "expand-icon") + ]), + onClick: vue.withModifiers(handleExpandIconClick, ["stop"]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(icon)))) + ]), + _: 1 + }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true), + _ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(vue.unref(ElCheckbox), { + key: 1, + "model-value": _ctx.checked, + indeterminate: _ctx.indeterminate, + disabled: _ctx.disabled, + onChange: handleCheckChange, + onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => { + }, ["stop"])) + }, null, 8, ["model-value", "indeterminate", "disabled"])) : vue.createCommentVNode("v-if", true), + vue.createVNode(vue.unref(ElNodeContent), { node: _ctx.node }, null, 8, ["node"]) + ], 6) + ], 42, _hoisted_1$6); + }; + } + }); + var ElTreeNode = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__file", "tree-node.vue"]]); + + const __default__$6 = vue.defineComponent({ + name: "ElTreeV2" + }); + const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$6, + props: treeProps, + emits: treeEmits, + setup(__props, { expose, emit }) { + const props = __props; + const slots = vue.useSlots(); + const treeNodeSize = vue.computed(() => props.itemSize); + vue.provide(ROOT_TREE_INJECTION_KEY, { + ctx: { + emit, + slots + }, + props, + instance: vue.getCurrentInstance() + }); + vue.provide(formItemContextKey, void 0); + const { t } = useLocale(); + const ns = useNamespace("tree"); + const { + flattenTree, + isNotEmpty, + toggleExpand, + isExpanded, + isIndeterminate, + isChecked, + isDisabled, + isCurrent, + isForceHiddenExpandIcon, + handleNodeClick, + handleNodeCheck, + toggleCheckbox, + getCurrentNode, + getCurrentKey, + setCurrentKey, + getCheckedKeys, + getCheckedNodes, + getHalfCheckedKeys, + getHalfCheckedNodes, + setChecked, + setCheckedKeys, + filter, + setData, + getNode, + expandNode, + collapseNode, + setExpandedKeys + } = useTree(props, emit); + expose({ + toggleCheckbox, + getCurrentNode, + getCurrentKey, + setCurrentKey, + getCheckedKeys, + getCheckedNodes, + getHalfCheckedKeys, + getHalfCheckedNodes, + setChecked, + setCheckedKeys, + filter, + setData, + getNode, + expandNode, + collapseNode, + setExpandedKeys + }); + return (_ctx, _cache) => { + var _a; + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([vue.unref(ns).b(), { [vue.unref(ns).m("highlight-current")]: _ctx.highlightCurrent }]), + role: "tree" + }, [ + vue.unref(isNotEmpty) ? (vue.openBlock(), vue.createBlock(vue.unref(FixedSizeList$1), { + key: 0, + "class-name": vue.unref(ns).b("virtual-list"), + data: vue.unref(flattenTree), + total: vue.unref(flattenTree).length, + height: _ctx.height, + "item-size": vue.unref(treeNodeSize), + "perf-mode": _ctx.perfMode + }, { + default: vue.withCtx(({ data, index, style }) => [ + (vue.openBlock(), vue.createBlock(ElTreeNode, { + key: data[index].key, + style: vue.normalizeStyle(style), + node: data[index], + expanded: vue.unref(isExpanded)(data[index]), + "show-checkbox": _ctx.showCheckbox, + checked: vue.unref(isChecked)(data[index]), + indeterminate: vue.unref(isIndeterminate)(data[index]), + "item-size": vue.unref(treeNodeSize), + disabled: vue.unref(isDisabled)(data[index]), + current: vue.unref(isCurrent)(data[index]), + "hidden-expand-icon": vue.unref(isForceHiddenExpandIcon)(data[index]), + onClick: vue.unref(handleNodeClick), + onToggle: vue.unref(toggleExpand), + onCheck: vue.unref(handleNodeCheck) + }, null, 8, ["style", "node", "expanded", "show-checkbox", "checked", "indeterminate", "item-size", "disabled", "current", "hidden-expand-icon", "onClick", "onToggle", "onCheck"])) + ]), + _: 1 + }, 8, ["class-name", "data", "total", "height", "item-size", "perf-mode"])) : (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(vue.unref(ns).e("empty-block")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(ns).e("empty-text")) + }, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : vue.unref(t)("el.tree.emptyText")), 3) + ], 2)) + ], 2); + }; + } + }); + var TreeV2 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__file", "tree.vue"]]); + + const ElTreeV2 = withInstall(TreeV2); + + const uploadContextKey = Symbol("uploadContextKey"); + + const SCOPE$2 = "ElUpload"; + class UploadAjaxError extends Error { + constructor(message, status, method, url) { + super(message); + this.name = "UploadAjaxError"; + this.status = status; + this.method = method; + this.url = url; + } + } + function getError(action, option, xhr) { + let msg; + if (xhr.response) { + msg = `${xhr.response.error || xhr.response}`; + } else if (xhr.responseText) { + msg = `${xhr.responseText}`; + } else { + msg = `fail to ${option.method} ${action} ${xhr.status}`; + } + return new UploadAjaxError(msg, xhr.status, option.method, action); + } + function getBody(xhr) { + const text = xhr.responseText || xhr.response; + if (!text) { + return text; + } + try { + return JSON.parse(text); + } catch (e) { + return text; + } + } + const ajaxUpload = (option) => { + if (typeof XMLHttpRequest === "undefined") + throwError(SCOPE$2, "XMLHttpRequest is undefined"); + const xhr = new XMLHttpRequest(); + const action = option.action; + if (xhr.upload) { + xhr.upload.addEventListener("progress", (evt) => { + const progressEvt = evt; + progressEvt.percent = evt.total > 0 ? evt.loaded / evt.total * 100 : 0; + option.onProgress(progressEvt); + }); + } + const formData = new FormData(); + if (option.data) { + for (const [key, value] of Object.entries(option.data)) { + if (Array.isArray(value)) + formData.append(key, ...value); + else + formData.append(key, value); + } + } + formData.append(option.filename, option.file, option.file.name); + xhr.addEventListener("error", () => { + option.onError(getError(action, option, xhr)); + }); + xhr.addEventListener("load", () => { + if (xhr.status < 200 || xhr.status >= 300) { + return option.onError(getError(action, option, xhr)); + } + option.onSuccess(getBody(xhr)); + }); + xhr.open(option.method, action, true); + if (option.withCredentials && "withCredentials" in xhr) { + xhr.withCredentials = true; + } + const headers = option.headers || {}; + if (headers instanceof Headers) { + headers.forEach((value, key) => xhr.setRequestHeader(key, value)); + } else { + for (const [key, value] of Object.entries(headers)) { + if (isNil(value)) + continue; + xhr.setRequestHeader(key, String(value)); + } + } + xhr.send(formData); + return xhr; + }; + + const uploadListTypes = ["text", "picture", "picture-card"]; + let fileId = 1; + const genFileId = () => Date.now() + fileId++; + const uploadBaseProps = buildProps({ + action: { + type: String, + default: "#" + }, + headers: { + type: definePropType(Object) + }, + method: { + type: String, + default: "post" + }, + data: { + type: Object, + default: () => mutable({}) + }, + multiple: { + type: Boolean, + default: false + }, + name: { + type: String, + default: "file" + }, + drag: { + type: Boolean, + default: false + }, + withCredentials: Boolean, + showFileList: { + type: Boolean, + default: true + }, + accept: { + type: String, + default: "" + }, + type: { + type: String, + default: "select" + }, + fileList: { + type: definePropType(Array), + default: () => mutable([]) + }, + autoUpload: { + type: Boolean, + default: true + }, + listType: { + type: String, + values: uploadListTypes, + default: "text" + }, + httpRequest: { + type: definePropType(Function), + default: ajaxUpload + }, + disabled: Boolean, + limit: Number + }); + const uploadProps = buildProps({ + ...uploadBaseProps, + beforeUpload: { + type: definePropType(Function), + default: NOOP + }, + beforeRemove: { + type: definePropType(Function) + }, + onRemove: { + type: definePropType(Function), + default: NOOP + }, + onChange: { + type: definePropType(Function), + default: NOOP + }, + onPreview: { + type: definePropType(Function), + default: NOOP + }, + onSuccess: { + type: definePropType(Function), + default: NOOP + }, + onProgress: { + type: definePropType(Function), + default: NOOP + }, + onError: { + type: definePropType(Function), + default: NOOP + }, + onExceed: { + type: definePropType(Function), + default: NOOP + } + }); + + const uploadListProps = buildProps({ + files: { + type: definePropType(Array), + default: () => mutable([]) + }, + disabled: { + type: Boolean, + default: false + }, + handlePreview: { + type: definePropType(Function), + default: NOOP + }, + listType: { + type: String, + values: uploadListTypes, + default: "text" + } + }); + const uploadListEmits = { + remove: (file) => !!file + }; + + const _hoisted_1$5 = ["onKeydown"]; + const _hoisted_2$4 = ["src"]; + const _hoisted_3$2 = ["onClick"]; + const _hoisted_4$1 = ["onClick"]; + const _hoisted_5 = ["onClick"]; + const __default__$5 = vue.defineComponent({ + name: "ElUploadList" + }); + const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$5, + props: uploadListProps, + emits: uploadListEmits, + setup(__props, { emit }) { + const { t } = useLocale(); + const nsUpload = useNamespace("upload"); + const nsIcon = useNamespace("icon"); + const nsList = useNamespace("list"); + const disabled = useFormDisabled(); + const focusing = vue.ref(false); + const handleRemove = (file) => { + emit("remove", file); + }; + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.TransitionGroup, { + tag: "ul", + class: vue.normalizeClass([ + vue.unref(nsUpload).b("list"), + vue.unref(nsUpload).bm("list", _ctx.listType), + vue.unref(nsUpload).is("disabled", vue.unref(disabled)) + ]), + name: vue.unref(nsList).b() + }, { + default: vue.withCtx(() => [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.files, (file) => { + return vue.openBlock(), vue.createElementBlock("li", { + key: file.uid || file.name, + class: vue.normalizeClass([ + vue.unref(nsUpload).be("list", "item"), + vue.unref(nsUpload).is(file.status), + { focusing: focusing.value } + ]), + tabindex: "0", + onKeydown: vue.withKeys(($event) => !vue.unref(disabled) && handleRemove(file), ["delete"]), + onFocus: _cache[0] || (_cache[0] = ($event) => focusing.value = true), + onBlur: _cache[1] || (_cache[1] = ($event) => focusing.value = false), + onClick: _cache[2] || (_cache[2] = ($event) => focusing.value = false) + }, [ + vue.renderSlot(_ctx.$slots, "default", { file }, () => [ + _ctx.listType === "picture" || file.status !== "uploading" && _ctx.listType === "picture-card" ? (vue.openBlock(), vue.createElementBlock("img", { + key: 0, + class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-thumbnail")), + src: file.url, + alt: "" + }, null, 10, _hoisted_2$4)) : vue.createCommentVNode("v-if", true), + file.status === "uploading" || _ctx.listType !== "picture-card" ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-info")) + }, [ + vue.createElementVNode("a", { + class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-name")), + onClick: vue.withModifiers(($event) => _ctx.handlePreview(file), ["prevent"]) + }, [ + vue.createVNode(vue.unref(ElIcon), { + class: vue.normalizeClass(vue.unref(nsIcon).m("document")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(document_default)) + ]), + _: 1 + }, 8, ["class"]), + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-file-name")) + }, vue.toDisplayString(file.name), 3) + ], 10, _hoisted_3$2), + file.status === "uploading" ? (vue.openBlock(), vue.createBlock(vue.unref(ElProgress), { + key: 0, + type: _ctx.listType === "picture-card" ? "circle" : "line", + "stroke-width": _ctx.listType === "picture-card" ? 6 : 2, + percentage: Number(file.percentage), + style: vue.normalizeStyle(_ctx.listType === "picture-card" ? "" : "margin-top: 0.5rem") + }, null, 8, ["type", "stroke-width", "percentage", "style"])) : vue.createCommentVNode("v-if", true) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("label", { + class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-status-label")) + }, [ + _ctx.listType === "text" ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass([vue.unref(nsIcon).m("upload-success"), vue.unref(nsIcon).m("circle-check")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(circle_check_default)) + ]), + _: 1 + }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 1, + class: vue.normalizeClass([vue.unref(nsIcon).m("upload-success"), vue.unref(nsIcon).m("check")]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(check_default)) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true) + ], 2), + !vue.unref(disabled) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 2, + class: vue.normalizeClass(vue.unref(nsIcon).m("close")), + onClick: ($event) => handleRemove(file) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(close_default)) + ]), + _: 2 + }, 1032, ["class", "onClick"])) : vue.createCommentVNode("v-if", true), + vue.createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"), + vue.createCommentVNode(" This is a bug which needs to be fixed "), + vue.createCommentVNode(" TODO: Fix the incorrect navigation interaction "), + !vue.unref(disabled) ? (vue.openBlock(), vue.createElementBlock("i", { + key: 3, + class: vue.normalizeClass(vue.unref(nsIcon).m("close-tip")) + }, vue.toDisplayString(vue.unref(t)("el.upload.deleteTip")), 3)) : vue.createCommentVNode("v-if", true), + _ctx.listType === "picture-card" ? (vue.openBlock(), vue.createElementBlock("span", { + key: 4, + class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-actions")) + }, [ + vue.createElementVNode("span", { + class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-preview")), + onClick: ($event) => _ctx.handlePreview(file) + }, [ + vue.createVNode(vue.unref(ElIcon), { + class: vue.normalizeClass(vue.unref(nsIcon).m("zoom-in")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(zoom_in_default)) + ]), + _: 1 + }, 8, ["class"]) + ], 10, _hoisted_4$1), + !vue.unref(disabled) ? (vue.openBlock(), vue.createElementBlock("span", { + key: 0, + class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-delete")), + onClick: ($event) => handleRemove(file) + }, [ + vue.createVNode(vue.unref(ElIcon), { + class: vue.normalizeClass(vue.unref(nsIcon).m("delete")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(delete_default)) + ]), + _: 1 + }, 8, ["class"]) + ], 10, _hoisted_5)) : vue.createCommentVNode("v-if", true) + ], 2)) : vue.createCommentVNode("v-if", true) + ]) + ], 42, _hoisted_1$5); + }), 128)), + vue.renderSlot(_ctx.$slots, "append") + ]), + _: 3 + }, 8, ["class", "name"]); + }; + } + }); + var UploadList = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__file", "upload-list.vue"]]); + + const uploadDraggerProps = buildProps({ + disabled: { + type: Boolean, + default: false + } + }); + const uploadDraggerEmits = { + file: (file) => isArray$1(file) + }; + + const _hoisted_1$4 = ["onDrop", "onDragover"]; + const COMPONENT_NAME = "ElUploadDrag"; + const __default__$4 = vue.defineComponent({ + name: COMPONENT_NAME + }); + const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$4, + props: uploadDraggerProps, + emits: uploadDraggerEmits, + setup(__props, { emit }) { + const uploaderContext = vue.inject(uploadContextKey); + if (!uploaderContext) { + throwError(COMPONENT_NAME, "usage: <el-upload><el-upload-dragger /></el-upload>"); + } + const ns = useNamespace("upload"); + const dragover = vue.ref(false); + const disabled = useFormDisabled(); + const onDrop = (e) => { + if (disabled.value) + return; + dragover.value = false; + e.stopPropagation(); + const files = Array.from(e.dataTransfer.files); + const accept = uploaderContext.accept.value; + if (!accept) { + emit("file", files); + return; + } + const filesFiltered = files.filter((file) => { + const { type, name } = file; + const extension = name.includes(".") ? `.${name.split(".").pop()}` : ""; + const baseType = type.replace(/\/.*$/, ""); + return accept.split(",").map((type2) => type2.trim()).filter((type2) => type2).some((acceptedType) => { + if (acceptedType.startsWith(".")) { + return extension === acceptedType; + } + if (/\/\*$/.test(acceptedType)) { + return baseType === acceptedType.replace(/\/\*$/, ""); + } + if (/^[^/]+\/[^/]+$/.test(acceptedType)) { + return type === acceptedType; + } + return false; + }); + }); + emit("file", filesFiltered); + }; + const onDragover = () => { + if (!disabled.value) + dragover.value = true; + }; + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([vue.unref(ns).b("dragger"), vue.unref(ns).is("dragover", dragover.value)]), + onDrop: vue.withModifiers(onDrop, ["prevent"]), + onDragover: vue.withModifiers(onDragover, ["prevent"]), + onDragleave: _cache[0] || (_cache[0] = vue.withModifiers(($event) => dragover.value = false, ["prevent"])) + }, [ + vue.renderSlot(_ctx.$slots, "default") + ], 42, _hoisted_1$4); + }; + } + }); + var UploadDragger = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "upload-dragger.vue"]]); + + const uploadContentProps = buildProps({ + ...uploadBaseProps, + beforeUpload: { + type: definePropType(Function), + default: NOOP + }, + onRemove: { + type: definePropType(Function), + default: NOOP + }, + onStart: { + type: definePropType(Function), + default: NOOP + }, + onSuccess: { + type: definePropType(Function), + default: NOOP + }, + onProgress: { + type: definePropType(Function), + default: NOOP + }, + onError: { + type: definePropType(Function), + default: NOOP + }, + onExceed: { + type: definePropType(Function), + default: NOOP + } + }); + + const _hoisted_1$3 = ["onKeydown"]; + const _hoisted_2$3 = ["name", "multiple", "accept"]; + const __default__$3 = vue.defineComponent({ + name: "ElUploadContent", + inheritAttrs: false + }); + const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$3, + props: uploadContentProps, + setup(__props, { expose }) { + const props = __props; + const ns = useNamespace("upload"); + const disabled = useFormDisabled(); + const requests = vue.shallowRef({}); + const inputRef = vue.shallowRef(); + const uploadFiles = (files) => { + if (files.length === 0) + return; + const { autoUpload, limit, fileList, multiple, onStart, onExceed } = props; + if (limit && fileList.length + files.length > limit) { + onExceed(files, fileList); + return; + } + if (!multiple) { + files = files.slice(0, 1); + } + for (const file of files) { + const rawFile = file; + rawFile.uid = genFileId(); + onStart(rawFile); + if (autoUpload) + upload(rawFile); + } + }; + const upload = async (rawFile) => { + inputRef.value.value = ""; + if (!props.beforeUpload) { + return doUpload(rawFile); + } + let hookResult; + try { + hookResult = await props.beforeUpload(rawFile); + } catch (e) { + hookResult = false; + } + if (hookResult === false) { + props.onRemove(rawFile); + return; + } + let file = rawFile; + if (hookResult instanceof Blob) { + if (hookResult instanceof File) { + file = hookResult; + } else { + file = new File([hookResult], rawFile.name, { + type: rawFile.type + }); + } + } + doUpload(Object.assign(file, { + uid: rawFile.uid + })); + }; + const doUpload = (rawFile) => { + const { + headers, + data, + method, + withCredentials, + name: filename, + action, + onProgress, + onSuccess, + onError, + httpRequest + } = props; + const { uid } = rawFile; + const options = { + headers: headers || {}, + withCredentials, + file: rawFile, + data, + method, + filename, + action, + onProgress: (evt) => { + onProgress(evt, rawFile); + }, + onSuccess: (res) => { + onSuccess(res, rawFile); + delete requests.value[uid]; + }, + onError: (err) => { + onError(err, rawFile); + delete requests.value[uid]; + } + }; + const request = httpRequest(options); + requests.value[uid] = request; + if (request instanceof Promise) { + request.then(options.onSuccess, options.onError); + } + }; + const handleChange = (e) => { + const files = e.target.files; + if (!files) + return; + uploadFiles(Array.from(files)); + }; + const handleClick = () => { + if (!disabled.value) { + inputRef.value.value = ""; + inputRef.value.click(); + } + }; + const handleKeydown = () => { + handleClick(); + }; + const abort = (file) => { + const _reqs = entriesOf(requests.value).filter(file ? ([uid]) => String(file.uid) === uid : () => true); + _reqs.forEach(([uid, req]) => { + if (req instanceof XMLHttpRequest) + req.abort(); + delete requests.value[uid]; + }); + }; + expose({ + abort, + upload + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", { + class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.listType), vue.unref(ns).is("drag", _ctx.drag)]), + tabindex: "0", + onClick: handleClick, + onKeydown: vue.withKeys(vue.withModifiers(handleKeydown, ["self"]), ["enter", "space"]) + }, [ + _ctx.drag ? (vue.openBlock(), vue.createBlock(UploadDragger, { + key: 0, + disabled: vue.unref(disabled), + onFile: uploadFiles + }, { + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 + }, 8, ["disabled"])) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }), + vue.createElementVNode("input", { + ref_key: "inputRef", + ref: inputRef, + class: vue.normalizeClass(vue.unref(ns).e("input")), + name: _ctx.name, + multiple: _ctx.multiple, + accept: _ctx.accept, + type: "file", + onChange: handleChange, + onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => { + }, ["stop"])) + }, null, 42, _hoisted_2$3) + ], 42, _hoisted_1$3); + }; + } + }); + var UploadContent = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "upload-content.vue"]]); + + const SCOPE$1 = "ElUpload"; + const revokeObjectURL = (file) => { + var _a; + if ((_a = file.url) == null ? void 0 : _a.startsWith("blob:")) { + URL.revokeObjectURL(file.url); + } + }; + const useHandlers = (props, uploadRef) => { + const uploadFiles = useVModel(props, "fileList", void 0, { passive: true }); + const getFile = (rawFile) => uploadFiles.value.find((file) => file.uid === rawFile.uid); + function abort(file) { + var _a; + (_a = uploadRef.value) == null ? void 0 : _a.abort(file); + } + function clearFiles(states = ["ready", "uploading", "success", "fail"]) { + uploadFiles.value = uploadFiles.value.filter((row) => !states.includes(row.status)); + } + const handleError = (err, rawFile) => { + const file = getFile(rawFile); + if (!file) + return; + console.error(err); + file.status = "fail"; + uploadFiles.value.splice(uploadFiles.value.indexOf(file), 1); + props.onError(err, file, uploadFiles.value); + props.onChange(file, uploadFiles.value); + }; + const handleProgress = (evt, rawFile) => { + const file = getFile(rawFile); + if (!file) + return; + props.onProgress(evt, file, uploadFiles.value); + file.status = "uploading"; + file.percentage = Math.round(evt.percent); + }; + const handleSuccess = (response, rawFile) => { + const file = getFile(rawFile); + if (!file) + return; + file.status = "success"; + file.response = response; + props.onSuccess(response, file, uploadFiles.value); + props.onChange(file, uploadFiles.value); + }; + const handleStart = (file) => { + if (isNil(file.uid)) + file.uid = genFileId(); + const uploadFile = { + name: file.name, + percentage: 0, + status: "ready", + size: file.size, + raw: file, + uid: file.uid + }; + if (props.listType === "picture-card" || props.listType === "picture") { + try { + uploadFile.url = URL.createObjectURL(file); + } catch (err) { + debugWarn(SCOPE$1, err.message); + props.onError(err, uploadFile, uploadFiles.value); + } + } + uploadFiles.value = [...uploadFiles.value, uploadFile]; + props.onChange(uploadFile, uploadFiles.value); + }; + const handleRemove = async (file) => { + const uploadFile = file instanceof File ? getFile(file) : file; + if (!uploadFile) + throwError(SCOPE$1, "file to be removed not found"); + const doRemove = (file2) => { + abort(file2); + const fileList = uploadFiles.value; + fileList.splice(fileList.indexOf(file2), 1); + props.onRemove(file2, fileList); + revokeObjectURL(file2); + }; + if (props.beforeRemove) { + const before = await props.beforeRemove(uploadFile, uploadFiles.value); + if (before !== false) + doRemove(uploadFile); + } else { + doRemove(uploadFile); + } + }; + function submit() { + uploadFiles.value.filter(({ status }) => status === "ready").forEach(({ raw }) => { + var _a; + return raw && ((_a = uploadRef.value) == null ? void 0 : _a.upload(raw)); + }); + } + vue.watch(() => props.listType, (val) => { + if (val !== "picture-card" && val !== "picture") { + return; + } + uploadFiles.value = uploadFiles.value.map((file) => { + const { raw, url } = file; + if (!url && raw) { + try { + file.url = URL.createObjectURL(raw); + } catch (err) { + props.onError(err, file, uploadFiles.value); + } + } + return file; + }); + }); + vue.watch(uploadFiles, (files) => { + for (const file of files) { + file.uid || (file.uid = genFileId()); + file.status || (file.status = "success"); + } + }, { immediate: true, deep: true }); + return { + uploadFiles, + abort, + clearFiles, + handleError, + handleProgress, + handleStart, + handleSuccess, + handleRemove, + submit + }; + }; + + const __default__$2 = vue.defineComponent({ + name: "ElUpload" + }); + const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$2, + props: uploadProps, + setup(__props, { expose }) { + const props = __props; + const slots = vue.useSlots(); + const disabled = useFormDisabled(); + const uploadRef = vue.shallowRef(); + const { + abort, + submit, + clearFiles, + uploadFiles, + handleStart, + handleError, + handleRemove, + handleSuccess, + handleProgress + } = useHandlers(props, uploadRef); + const isPictureCard = vue.computed(() => props.listType === "picture-card"); + const uploadContentProps = vue.computed(() => ({ + ...props, + fileList: uploadFiles.value, + onStart: handleStart, + onProgress: handleProgress, + onSuccess: handleSuccess, + onError: handleError, + onRemove: handleRemove + })); + vue.onBeforeUnmount(() => { + uploadFiles.value.forEach(({ url }) => { + if (url == null ? void 0 : url.startsWith("blob:")) + URL.revokeObjectURL(url); + }); + }); + vue.provide(uploadContextKey, { + accept: vue.toRef(props, "accept") + }); + expose({ + abort, + submit, + clearFiles, + handleStart, + handleRemove + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createElementBlock("div", null, [ + vue.unref(isPictureCard) && _ctx.showFileList ? (vue.openBlock(), vue.createBlock(UploadList, { + key: 0, + disabled: vue.unref(disabled), + "list-type": _ctx.listType, + files: vue.unref(uploadFiles), + "handle-preview": _ctx.onPreview, + onRemove: vue.unref(handleRemove) + }, vue.createSlots({ + append: vue.withCtx(() => [ + vue.createVNode(UploadContent, vue.mergeProps({ + ref_key: "uploadRef", + ref: uploadRef + }, vue.unref(uploadContentProps)), { + default: vue.withCtx(() => [ + vue.unref(slots).trigger ? vue.renderSlot(_ctx.$slots, "trigger", { key: 0 }) : vue.createCommentVNode("v-if", true), + !vue.unref(slots).trigger && vue.unref(slots).default ? vue.renderSlot(_ctx.$slots, "default", { key: 1 }) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 16) + ]), + _: 2 + }, [ + _ctx.$slots.file ? { + name: "default", + fn: vue.withCtx(({ file }) => [ + vue.renderSlot(_ctx.$slots, "file", { file }) + ]) + } : void 0 + ]), 1032, ["disabled", "list-type", "files", "handle-preview", "onRemove"])) : vue.createCommentVNode("v-if", true), + !vue.unref(isPictureCard) || vue.unref(isPictureCard) && !_ctx.showFileList ? (vue.openBlock(), vue.createBlock(UploadContent, vue.mergeProps({ + key: 1, + ref_key: "uploadRef", + ref: uploadRef + }, vue.unref(uploadContentProps)), { + default: vue.withCtx(() => [ + vue.unref(slots).trigger ? vue.renderSlot(_ctx.$slots, "trigger", { key: 0 }) : vue.createCommentVNode("v-if", true), + !vue.unref(slots).trigger && vue.unref(slots).default ? vue.renderSlot(_ctx.$slots, "default", { key: 1 }) : vue.createCommentVNode("v-if", true) + ]), + _: 3 + }, 16)) : vue.createCommentVNode("v-if", true), + _ctx.$slots.trigger ? vue.renderSlot(_ctx.$slots, "default", { key: 2 }) : vue.createCommentVNode("v-if", true), + vue.renderSlot(_ctx.$slots, "tip"), + !vue.unref(isPictureCard) && _ctx.showFileList ? (vue.openBlock(), vue.createBlock(UploadList, { + key: 3, + disabled: vue.unref(disabled), + "list-type": _ctx.listType, + files: vue.unref(uploadFiles), + "handle-preview": _ctx.onPreview, + onRemove: vue.unref(handleRemove) + }, vue.createSlots({ _: 2 }, [ + _ctx.$slots.file ? { + name: "default", + fn: vue.withCtx(({ file }) => [ + vue.renderSlot(_ctx.$slots, "file", { file }) + ]) + } : void 0 + ]), 1032, ["disabled", "list-type", "files", "handle-preview", "onRemove"])) : vue.createCommentVNode("v-if", true) + ]); + }; + } + }); + var Upload = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "upload.vue"]]); + + const ElUpload = withInstall(Upload); + + var Components = [ + ElAffix, + ElAlert, + ElAutocomplete, + ElAutoResizer, + ElAvatar, + ElBacktop, + ElBadge, + ElBreadcrumb, + ElBreadcrumbItem, + ElButton, + ElButtonGroup$1, + ElCalendar, + ElCard, + ElCarousel, + ElCarouselItem, + ElCascader, + ElCascaderPanel, + ElCheckTag, + ElCheckbox, + ElCheckboxButton, + ElCheckboxGroup$1, + ElCol, + ElCollapse, + ElCollapseItem, + ElCollapseTransition, + ElColorPicker, + ElConfigProvider, + ElContainer, + ElAside, + ElFooter, + ElHeader, + ElMain, + ElDatePicker, + ElDescriptions, + ElDescriptionsItem, + ElDialog, + ElDivider, + ElDrawer, + ElDropdown, + ElDropdownItem, + ElDropdownMenu, + ElEmpty, + ElForm, + ElFormItem, + ElIcon, + ElImage, + ElImageViewer, + ElInput, + ElInputNumber, + ElLink, + ElMenu, + ElMenuItem, + ElMenuItemGroup, + ElSubMenu, + ElPageHeader, + ElPagination, + ElPopconfirm, + ElPopover, + ElPopper, + ElProgress, + ElRadio, + ElRadioButton, + ElRadioGroup, + ElRate, + ElResult, + ElRow, + ElScrollbar, + ElSelect, + ElOption, + ElOptionGroup, + ElSelectV2, + ElSkeleton, + ElSkeletonItem, + ElSlider, + ElSpace, + ElStatistic, + ElCountdown, + ElSteps, + ElStep, + ElSwitch, + ElTable, + ElTableColumn, + ElTableV2, + ElTabs, + ElTabPane, + ElTag, + ElText, + ElTimePicker, + ElTimeSelect, + ElTimeline, + ElTimelineItem, + ElTooltip, + ElTooltipV2, + ElTransfer, + ElTree, + ElTreeSelect, + ElTreeV2, + ElUpload + ]; + + const SCOPE = "ElInfiniteScroll"; + const CHECK_INTERVAL = 50; + const DEFAULT_DELAY = 200; + const DEFAULT_DISTANCE = 0; + const attributes = { + delay: { + type: Number, + default: DEFAULT_DELAY + }, + distance: { + type: Number, + default: DEFAULT_DISTANCE + }, + disabled: { + type: Boolean, + default: false + }, + immediate: { + type: Boolean, + default: true + } + }; + const getScrollOptions = (el, instance) => { + return Object.entries(attributes).reduce((acm, [name, option]) => { + var _a, _b; + const { type, default: defaultValue } = option; + const attrVal = el.getAttribute(`infinite-scroll-${name}`); + let value = (_b = (_a = instance[attrVal]) != null ? _a : attrVal) != null ? _b : defaultValue; + value = value === "false" ? false : value; + value = type(value); + acm[name] = Number.isNaN(value) ? defaultValue : value; + return acm; + }, {}); + }; + const destroyObserver = (el) => { + const { observer } = el[SCOPE]; + if (observer) { + observer.disconnect(); + delete el[SCOPE].observer; + } + }; + const handleScroll = (el, cb) => { + const { container, containerEl, instance, observer, lastScrollTop } = el[SCOPE]; + const { disabled, distance } = getScrollOptions(el, instance); + const { clientHeight, scrollHeight, scrollTop } = containerEl; + const delta = scrollTop - lastScrollTop; + el[SCOPE].lastScrollTop = scrollTop; + if (observer || disabled || delta < 0) + return; + let shouldTrigger = false; + if (container === el) { + shouldTrigger = scrollHeight - (clientHeight + scrollTop) <= distance; + } else { + const { clientTop, scrollHeight: height } = el; + const offsetTop = getOffsetTopDistance(el, containerEl); + shouldTrigger = scrollTop + clientHeight >= offsetTop + clientTop + height - distance; + } + if (shouldTrigger) { + cb.call(instance); + } + }; + function checkFull(el, cb) { + const { containerEl, instance } = el[SCOPE]; + const { disabled } = getScrollOptions(el, instance); + if (disabled || containerEl.clientHeight === 0) + return; + if (containerEl.scrollHeight <= containerEl.clientHeight) { + cb.call(instance); + } else { + destroyObserver(el); + } + } + const InfiniteScroll = { + async mounted(el, binding) { + const { instance, value: cb } = binding; + if (!isFunction$1(cb)) { + throwError(SCOPE, "'v-infinite-scroll' binding value must be a function"); + } + await vue.nextTick(); + const { delay, immediate } = getScrollOptions(el, instance); + const container = getScrollContainer(el, true); + const containerEl = container === window ? document.documentElement : container; + const onScroll = throttle(handleScroll.bind(null, el, cb), delay); + if (!container) + return; + el[SCOPE] = { + instance, + container, + containerEl, + delay, + cb, + onScroll, + lastScrollTop: containerEl.scrollTop + }; + if (immediate) { + const observer = new MutationObserver(throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL)); + el[SCOPE].observer = observer; + observer.observe(el, { childList: true, subtree: true }); + checkFull(el, cb); + } + container.addEventListener("scroll", onScroll); + }, + unmounted(el) { + const { container, onScroll } = el[SCOPE]; + container == null ? void 0 : container.removeEventListener("scroll", onScroll); + destroyObserver(el); + }, + async updated(el) { + if (!el[SCOPE]) { + await vue.nextTick(); + } else { + const { containerEl, cb, observer } = el[SCOPE]; + if (containerEl.clientHeight && observer) { + checkFull(el, cb); + } + } + } + }; + var InfiniteScroll$1 = InfiniteScroll; + + const _InfiniteScroll = InfiniteScroll$1; + _InfiniteScroll.install = (app) => { + app.directive("InfiniteScroll", _InfiniteScroll); + }; + const ElInfiniteScroll = _InfiniteScroll; + + function createLoadingComponent(options) { + let afterLeaveTimer; + const afterLeaveFlag = vue.ref(false); + const data = vue.reactive({ + ...options, + originalPosition: "", + originalOverflow: "", + visible: false + }); + function setText(text) { + data.text = text; + } + function destroySelf() { + const target = data.parent; + const ns = vm.ns; + if (!target.vLoadingAddClassList) { + let loadingNumber = target.getAttribute("loading-number"); + loadingNumber = Number.parseInt(loadingNumber) - 1; + if (!loadingNumber) { + removeClass(target, ns.bm("parent", "relative")); + target.removeAttribute("loading-number"); + } else { + target.setAttribute("loading-number", loadingNumber.toString()); + } + removeClass(target, ns.bm("parent", "hidden")); + } + removeElLoadingChild(); + loadingInstance.unmount(); + } + function removeElLoadingChild() { + var _a, _b; + (_b = (_a = vm.$el) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(vm.$el); + } + function close() { + var _a; + if (options.beforeClose && !options.beforeClose()) + return; + afterLeaveFlag.value = true; + clearTimeout(afterLeaveTimer); + afterLeaveTimer = window.setTimeout(handleAfterLeave, 400); + data.visible = false; + (_a = options.closed) == null ? void 0 : _a.call(options); + } + function handleAfterLeave() { + if (!afterLeaveFlag.value) + return; + const target = data.parent; + afterLeaveFlag.value = false; + target.vLoadingAddClassList = void 0; + destroySelf(); + } + const elLoadingComponent = vue.defineComponent({ + name: "ElLoading", + setup(_, { expose }) { + const { ns } = useGlobalComponentSettings("loading"); + const zIndex = useZIndex(); + expose({ + ns, + zIndex + }); + return () => { + const svg = data.spinner || data.svg; + const spinner = vue.h("svg", { + class: "circular", + viewBox: data.svgViewBox ? data.svgViewBox : "0 0 50 50", + ...svg ? { innerHTML: svg } : {} + }, [ + vue.h("circle", { + class: "path", + cx: "25", + cy: "25", + r: "20", + fill: "none" + }) + ]); + const spinnerText = data.text ? vue.h("p", { class: ns.b("text") }, [data.text]) : void 0; + return vue.h(vue.Transition, { + name: ns.b("fade"), + onAfterLeave: handleAfterLeave + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createVNode("div", { + style: { + backgroundColor: data.background || "" + }, + class: [ + ns.b("mask"), + data.customClass, + data.fullscreen ? "is-fullscreen" : "" + ] + }, [ + vue.h("div", { + class: ns.b("spinner") + }, [spinner, spinnerText]) + ]), [[vue.vShow, data.visible]]) + ]) + }); + }; + } + }); + const loadingInstance = vue.createApp(elLoadingComponent); + const vm = loadingInstance.mount(document.createElement("div")); + return { + ...vue.toRefs(data), + setText, + removeElLoadingChild, + close, + handleAfterLeave, + vm, + get $el() { + return vm.$el; + } + }; + } + + let fullscreenInstance = void 0; + const Loading = function(options = {}) { + if (!isClient) + return void 0; + const resolved = resolveOptions(options); + if (resolved.fullscreen && fullscreenInstance) { + return fullscreenInstance; + } + const instance = createLoadingComponent({ + ...resolved, + closed: () => { + var _a; + (_a = resolved.closed) == null ? void 0 : _a.call(resolved); + if (resolved.fullscreen) + fullscreenInstance = void 0; + } + }); + addStyle(resolved, resolved.parent, instance); + addClassList(resolved, resolved.parent, instance); + resolved.parent.vLoadingAddClassList = () => addClassList(resolved, resolved.parent, instance); + let loadingNumber = resolved.parent.getAttribute("loading-number"); + if (!loadingNumber) { + loadingNumber = "1"; + } else { + loadingNumber = `${Number.parseInt(loadingNumber) + 1}`; + } + resolved.parent.setAttribute("loading-number", loadingNumber); + resolved.parent.appendChild(instance.$el); + vue.nextTick(() => instance.visible.value = resolved.visible); + if (resolved.fullscreen) { + fullscreenInstance = instance; + } + return instance; + }; + const resolveOptions = (options) => { + var _a, _b, _c, _d; + let target; + if (isString$1(options.target)) { + target = (_a = document.querySelector(options.target)) != null ? _a : document.body; + } else { + target = options.target || document.body; + } + return { + parent: target === document.body || options.body ? document.body : target, + background: options.background || "", + svg: options.svg || "", + svgViewBox: options.svgViewBox || "", + spinner: options.spinner || false, + text: options.text || "", + fullscreen: target === document.body && ((_b = options.fullscreen) != null ? _b : true), + lock: (_c = options.lock) != null ? _c : false, + customClass: options.customClass || "", + visible: (_d = options.visible) != null ? _d : true, + target + }; + }; + const addStyle = async (options, parent, instance) => { + const { nextZIndex } = instance.vm.zIndex; + const maskStyle = {}; + if (options.fullscreen) { + instance.originalPosition.value = getStyle(document.body, "position"); + instance.originalOverflow.value = getStyle(document.body, "overflow"); + maskStyle.zIndex = nextZIndex(); + } else if (options.parent === document.body) { + instance.originalPosition.value = getStyle(document.body, "position"); + await vue.nextTick(); + for (const property of ["top", "left"]) { + const scroll = property === "top" ? "scrollTop" : "scrollLeft"; + maskStyle[property] = `${options.target.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] - Number.parseInt(getStyle(document.body, `margin-${property}`), 10)}px`; + } + for (const property of ["height", "width"]) { + maskStyle[property] = `${options.target.getBoundingClientRect()[property]}px`; + } + } else { + instance.originalPosition.value = getStyle(parent, "position"); + } + for (const [key, value] of Object.entries(maskStyle)) { + instance.$el.style[key] = value; + } + }; + const addClassList = (options, parent, instance) => { + const ns = instance.vm.ns; + if (!["absolute", "fixed", "sticky"].includes(instance.originalPosition.value)) { + addClass(parent, ns.bm("parent", "relative")); + } else { + removeClass(parent, ns.bm("parent", "relative")); + } + if (options.fullscreen && options.lock) { + addClass(parent, ns.bm("parent", "hidden")); + } else { + removeClass(parent, ns.bm("parent", "hidden")); + } + }; + + const INSTANCE_KEY = Symbol("ElLoading"); + const createInstance = (el, binding) => { + var _a, _b, _c, _d; + const vm = binding.instance; + const getBindingProp = (key) => isObject$1(binding.value) ? binding.value[key] : void 0; + const resolveExpression = (key) => { + const data = isString$1(key) && (vm == null ? void 0 : vm[key]) || key; + if (data) + return vue.ref(data); + else + return data; + }; + const getProp = (name) => resolveExpression(getBindingProp(name) || el.getAttribute(`element-loading-${hyphenate(name)}`)); + const fullscreen = (_a = getBindingProp("fullscreen")) != null ? _a : binding.modifiers.fullscreen; + const options = { + text: getProp("text"), + svg: getProp("svg"), + svgViewBox: getProp("svgViewBox"), + spinner: getProp("spinner"), + background: getProp("background"), + customClass: getProp("customClass"), + fullscreen, + target: (_b = getBindingProp("target")) != null ? _b : fullscreen ? void 0 : el, + body: (_c = getBindingProp("body")) != null ? _c : binding.modifiers.body, + lock: (_d = getBindingProp("lock")) != null ? _d : binding.modifiers.lock + }; + el[INSTANCE_KEY] = { + options, + instance: Loading(options) + }; + }; + const updateOptions = (newOptions, originalOptions) => { + for (const key of Object.keys(originalOptions)) { + if (vue.isRef(originalOptions[key])) + originalOptions[key].value = newOptions[key]; + } + }; + const vLoading = { + mounted(el, binding) { + if (binding.value) { + createInstance(el, binding); + } + }, + updated(el, binding) { + const instance = el[INSTANCE_KEY]; + if (binding.oldValue !== binding.value) { + if (binding.value && !binding.oldValue) { + createInstance(el, binding); + } else if (binding.value && binding.oldValue) { + if (isObject$1(binding.value)) + updateOptions(binding.value, instance.options); + } else { + instance == null ? void 0 : instance.instance.close(); + } + } + }, + unmounted(el) { + var _a; + (_a = el[INSTANCE_KEY]) == null ? void 0 : _a.instance.close(); + } + }; + + const ElLoading = { + install(app) { + app.directive("loading", vLoading); + app.config.globalProperties.$loading = Loading; + }, + directive: vLoading, + service: Loading + }; + + const messageTypes = ["success", "info", "warning", "error"]; + const messageDefaults = mutable({ + customClass: "", + center: false, + dangerouslyUseHTMLString: false, + duration: 3e3, + icon: void 0, + id: "", + message: "", + onClose: void 0, + showClose: false, + type: "info", + offset: 16, + zIndex: 0, + grouping: false, + repeatNum: 1, + appendTo: isClient ? document.body : void 0 + }); + const messageProps = buildProps({ + customClass: { + type: String, + default: messageDefaults.customClass + }, + center: { + type: Boolean, + default: messageDefaults.center + }, + dangerouslyUseHTMLString: { + type: Boolean, + default: messageDefaults.dangerouslyUseHTMLString + }, + duration: { + type: Number, + default: messageDefaults.duration + }, + icon: { + type: iconPropType, + default: messageDefaults.icon + }, + id: { + type: String, + default: messageDefaults.id + }, + message: { + type: definePropType([ + String, + Object, + Function + ]), + default: messageDefaults.message + }, + onClose: { + type: definePropType(Function), + required: false + }, + showClose: { + type: Boolean, + default: messageDefaults.showClose + }, + type: { + type: String, + values: messageTypes, + default: messageDefaults.type + }, + offset: { + type: Number, + default: messageDefaults.offset + }, + zIndex: { + type: Number, + default: messageDefaults.zIndex + }, + grouping: { + type: Boolean, + default: messageDefaults.grouping + }, + repeatNum: { + type: Number, + default: messageDefaults.repeatNum + } + }); + const messageEmits = { + destroy: () => true + }; + + const instances = vue.shallowReactive([]); + const getInstance = (id) => { + const idx = instances.findIndex((instance) => instance.id === id); + const current = instances[idx]; + let prev; + if (idx > 0) { + prev = instances[idx - 1]; + } + return { current, prev }; + }; + const getLastOffset = (id) => { + const { prev } = getInstance(id); + if (!prev) + return 0; + return prev.vm.exposed.bottom.value; + }; + const getOffsetOrSpace = (id, offset) => { + const idx = instances.findIndex((instance) => instance.id === id); + return idx > 0 ? 20 : offset; + }; + + const _hoisted_1$2 = ["id"]; + const _hoisted_2$2 = ["innerHTML"]; + const __default__$1 = vue.defineComponent({ + name: "ElMessage" + }); + const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({ + ...__default__$1, + props: messageProps, + emits: messageEmits, + setup(__props, { expose }) { + const props = __props; + const { Close } = TypeComponents; + const { ns, zIndex } = useGlobalComponentSettings("message"); + const { currentZIndex, nextZIndex } = zIndex; + const messageRef = vue.ref(); + const visible = vue.ref(false); + const height = vue.ref(0); + let stopTimer = void 0; + const badgeType = vue.computed(() => props.type ? props.type === "error" ? "danger" : props.type : "info"); + const typeClass = vue.computed(() => { + const type = props.type; + return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] }; + }); + const iconComponent = vue.computed(() => props.icon || TypeComponentsMap[props.type] || ""); + const lastOffset = vue.computed(() => getLastOffset(props.id)); + const offset = vue.computed(() => getOffsetOrSpace(props.id, props.offset) + lastOffset.value); + const bottom = vue.computed(() => height.value + offset.value); + const customStyle = vue.computed(() => ({ + top: `${offset.value}px`, + zIndex: currentZIndex.value + })); + function startTimer() { + if (props.duration === 0) + return; + ({ stop: stopTimer } = useTimeoutFn(() => { + close(); + }, props.duration)); + } + function clearTimer() { + stopTimer == null ? void 0 : stopTimer(); + } + function close() { + visible.value = false; + } + function keydown({ code }) { + if (code === EVENT_CODE.esc) { + close(); + } + } + vue.onMounted(() => { + startTimer(); + nextZIndex(); + visible.value = true; + }); + vue.watch(() => props.repeatNum, () => { + clearTimer(); + startTimer(); + }); + useEventListener(document, "keydown", keydown); + useResizeObserver(messageRef, () => { + height.value = messageRef.value.getBoundingClientRect().height; + }); + expose({ + visible, + bottom, + close + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.Transition, { + name: vue.unref(ns).b("fade"), + onBeforeLeave: _ctx.onClose, + onAfterLeave: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("destroy")), + persisted: "" + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createElementVNode("div", { + id: _ctx.id, + ref_key: "messageRef", + ref: messageRef, + class: vue.normalizeClass([ + vue.unref(ns).b(), + { [vue.unref(ns).m(_ctx.type)]: _ctx.type && !_ctx.icon }, + vue.unref(ns).is("center", _ctx.center), + vue.unref(ns).is("closable", _ctx.showClose), + _ctx.customClass + ]), + style: vue.normalizeStyle(vue.unref(customStyle)), + role: "alert", + onMouseenter: clearTimer, + onMouseleave: startTimer + }, [ + _ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(ElBadge), { + key: 0, + value: _ctx.repeatNum, + type: vue.unref(badgeType), + class: vue.normalizeClass(vue.unref(ns).e("badge")) + }, null, 8, ["value", "type", "class"])) : vue.createCommentVNode("v-if", true), + vue.unref(iconComponent) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 1, + class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(typeClass)]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(iconComponent)))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true), + vue.renderSlot(_ctx.$slots, "default", {}, () => [ + !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("content")) + }, vue.toDisplayString(_ctx.message), 3)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [ + vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "), + vue.createElementVNode("p", { + class: vue.normalizeClass(vue.unref(ns).e("content")), + innerHTML: _ctx.message + }, null, 10, _hoisted_2$2) + ], 2112)) + ]), + _ctx.showClose ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 2, + class: vue.normalizeClass(vue.unref(ns).e("closeBtn")), + onClick: vue.withModifiers(close, ["stop"]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(Close)) + ]), + _: 1 + }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true) + ], 46, _hoisted_1$2), [ + [vue.vShow, visible.value] + ]) + ]), + _: 3 + }, 8, ["name", "onBeforeLeave"]); + }; + } + }); + var MessageConstructor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "message.vue"]]); + + let seed$1 = 1; + const normalizeOptions = (params) => { + const options = !params || isString$1(params) || vue.isVNode(params) || isFunction$1(params) ? { message: params } : params; + const normalized = { + ...messageDefaults, + ...options + }; + if (!normalized.appendTo) { + normalized.appendTo = document.body; + } else if (isString$1(normalized.appendTo)) { + let appendTo = document.querySelector(normalized.appendTo); + if (!isElement$1(appendTo)) { + appendTo = document.body; + } + normalized.appendTo = appendTo; + } + return normalized; + }; + const closeMessage = (instance) => { + const idx = instances.indexOf(instance); + if (idx === -1) + return; + instances.splice(idx, 1); + const { handler } = instance; + handler.close(); + }; + const createMessage = ({ appendTo, ...options }, context) => { + const id = `message_${seed$1++}`; + const userOnClose = options.onClose; + const container = document.createElement("div"); + const props = { + ...options, + id, + onClose: () => { + userOnClose == null ? void 0 : userOnClose(); + closeMessage(instance); + }, + onDestroy: () => { + vue.render(null, container); + } + }; + const vnode = vue.createVNode(MessageConstructor, props, isFunction$1(props.message) || vue.isVNode(props.message) ? { + default: isFunction$1(props.message) ? props.message : () => props.message + } : null); + vnode.appContext = context || message._context; + vue.render(vnode, container); + appendTo.appendChild(container.firstElementChild); + const vm = vnode.component; + const handler = { + close: () => { + vm.exposed.visible.value = false; + } + }; + const instance = { + id, + vnode, + vm, + handler, + props: vnode.component.props + }; + return instance; + }; + const message = (options = {}, context) => { + if (!isClient) + return { close: () => void 0 }; + if (isNumber$1(messageConfig.max) && instances.length >= messageConfig.max) { + return { close: () => void 0 }; + } + const normalized = normalizeOptions(options); + if (normalized.grouping && instances.length) { + const instance2 = instances.find(({ vnode: vm }) => { + var _a; + return ((_a = vm.props) == null ? void 0 : _a.message) === normalized.message; + }); + if (instance2) { + instance2.props.repeatNum += 1; + instance2.props.type = normalized.type; + return instance2.handler; + } + } + const instance = createMessage(normalized, context); + instances.push(instance); + return instance.handler; + }; + messageTypes.forEach((type) => { + message[type] = (options = {}, appContext) => { + const normalized = normalizeOptions(options); + return message({ ...normalized, type }, appContext); + }; + }); + function closeAll$1(type) { + for (const instance of instances) { + if (!type || type === instance.props.type) { + instance.handler.close(); + } + } + } + message.closeAll = closeAll$1; + message._context = null; + var Message = message; + + const ElMessage = withInstallFunction(Message, "$message"); + + const _sfc_main$1 = vue.defineComponent({ + name: "ElMessageBox", + directives: { + TrapFocus + }, + components: { + ElButton, + ElFocusTrap, + ElInput, + ElOverlay, + ElIcon, + ...TypeComponents + }, + inheritAttrs: false, + props: { + buttonSize: { + type: String, + validator: isValidComponentSize + }, + modal: { + type: Boolean, + default: true + }, + lockScroll: { + type: Boolean, + default: true + }, + showClose: { + type: Boolean, + default: true + }, + closeOnClickModal: { + type: Boolean, + default: true + }, + closeOnPressEscape: { + type: Boolean, + default: true + }, + closeOnHashChange: { + type: Boolean, + default: true + }, + center: Boolean, + draggable: Boolean, + roundButton: { + default: false, + type: Boolean + }, + container: { + type: String, + default: "body" + }, + boxType: { + type: String, + default: "" + } + }, + emits: ["vanish", "action"], + setup(props, { emit }) { + const { + locale, + zIndex, + ns, + size: btnSize + } = useGlobalComponentSettings("message-box", vue.computed(() => props.buttonSize)); + const { t } = locale; + const { nextZIndex } = zIndex; + const visible = vue.ref(false); + const state = vue.reactive({ + autofocus: true, + beforeClose: null, + callback: null, + cancelButtonText: "", + cancelButtonClass: "", + confirmButtonText: "", + confirmButtonClass: "", + customClass: "", + customStyle: {}, + dangerouslyUseHTMLString: false, + distinguishCancelAndClose: false, + icon: "", + inputPattern: null, + inputPlaceholder: "", + inputType: "text", + inputValue: null, + inputValidator: null, + inputErrorMessage: "", + message: null, + modalFade: true, + modalClass: "", + showCancelButton: false, + showConfirmButton: true, + type: "", + title: void 0, + showInput: false, + action: "", + confirmButtonLoading: false, + cancelButtonLoading: false, + confirmButtonDisabled: false, + editorErrorMessage: "", + validateError: false, + zIndex: nextZIndex() + }); + const typeClass = vue.computed(() => { + const type = state.type; + return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] }; + }); + const contentId = useId(); + const inputId = useId(); + const iconComponent = vue.computed(() => state.icon || TypeComponentsMap[state.type] || ""); + const hasMessage = vue.computed(() => !!state.message); + const rootRef = vue.ref(); + const headerRef = vue.ref(); + const focusStartRef = vue.ref(); + const inputRef = vue.ref(); + const confirmRef = vue.ref(); + const confirmButtonClasses = vue.computed(() => state.confirmButtonClass); + vue.watch(() => state.inputValue, async (val) => { + await vue.nextTick(); + if (props.boxType === "prompt" && val !== null) { + validate(); + } + }, { immediate: true }); + vue.watch(() => visible.value, (val) => { + var _a, _b; + if (val) { + if (props.boxType !== "prompt") { + if (state.autofocus) { + focusStartRef.value = (_b = (_a = confirmRef.value) == null ? void 0 : _a.$el) != null ? _b : rootRef.value; + } else { + focusStartRef.value = rootRef.value; + } + } + state.zIndex = nextZIndex(); + } + if (props.boxType !== "prompt") + return; + if (val) { + vue.nextTick().then(() => { + var _a2; + if (inputRef.value && inputRef.value.$el) { + if (state.autofocus) { + focusStartRef.value = (_a2 = getInputElement()) != null ? _a2 : rootRef.value; + } else { + focusStartRef.value = rootRef.value; + } + } + }); + } else { + state.editorErrorMessage = ""; + state.validateError = false; + } + }); + const draggable = vue.computed(() => props.draggable); + useDraggable(rootRef, headerRef, draggable); + vue.onMounted(async () => { + await vue.nextTick(); + if (props.closeOnHashChange) { + window.addEventListener("hashchange", doClose); + } + }); + vue.onBeforeUnmount(() => { + if (props.closeOnHashChange) { + window.removeEventListener("hashchange", doClose); + } + }); + function doClose() { + if (!visible.value) + return; + visible.value = false; + vue.nextTick(() => { + if (state.action) + emit("action", state.action); + }); + } + const handleWrapperClick = () => { + if (props.closeOnClickModal) { + handleAction(state.distinguishCancelAndClose ? "close" : "cancel"); + } + }; + const overlayEvent = useSameTarget(handleWrapperClick); + const handleInputEnter = (e) => { + if (state.inputType !== "textarea") { + e.preventDefault(); + return handleAction("confirm"); + } + }; + const handleAction = (action) => { + var _a; + if (props.boxType === "prompt" && action === "confirm" && !validate()) { + return; + } + state.action = action; + if (state.beforeClose) { + (_a = state.beforeClose) == null ? void 0 : _a.call(state, action, state, doClose); + } else { + doClose(); + } + }; + const validate = () => { + if (props.boxType === "prompt") { + const inputPattern = state.inputPattern; + if (inputPattern && !inputPattern.test(state.inputValue || "")) { + state.editorErrorMessage = state.inputErrorMessage || t("el.messagebox.error"); + state.validateError = true; + return false; + } + const inputValidator = state.inputValidator; + if (typeof inputValidator === "function") { + const validateResult = inputValidator(state.inputValue); + if (validateResult === false) { + state.editorErrorMessage = state.inputErrorMessage || t("el.messagebox.error"); + state.validateError = true; + return false; + } + if (typeof validateResult === "string") { + state.editorErrorMessage = validateResult; + state.validateError = true; + return false; + } + } + } + state.editorErrorMessage = ""; + state.validateError = false; + return true; + }; + const getInputElement = () => { + const inputRefs = inputRef.value.$refs; + return inputRefs.input || inputRefs.textarea; + }; + const handleClose = () => { + handleAction("close"); + }; + const onCloseRequested = () => { + if (props.closeOnPressEscape) { + handleClose(); + } + }; + if (props.lockScroll) { + useLockscreen(visible); + } + useRestoreActive(visible); + return { + ...vue.toRefs(state), + ns, + overlayEvent, + visible, + hasMessage, + typeClass, + contentId, + inputId, + btnSize, + iconComponent, + confirmButtonClasses, + rootRef, + focusStartRef, + headerRef, + inputRef, + confirmRef, + doClose, + handleClose, + onCloseRequested, + handleWrapperClick, + handleInputEnter, + handleAction, + t + }; + } + }); + const _hoisted_1$1 = ["aria-label", "aria-describedby"]; + const _hoisted_2$1 = ["aria-label"]; + const _hoisted_3$1 = ["id"]; + function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_icon = vue.resolveComponent("el-icon"); + const _component_close = vue.resolveComponent("close"); + const _component_el_input = vue.resolveComponent("el-input"); + const _component_el_button = vue.resolveComponent("el-button"); + const _component_el_focus_trap = vue.resolveComponent("el-focus-trap"); + const _component_el_overlay = vue.resolveComponent("el-overlay"); + return vue.openBlock(), vue.createBlock(vue.Transition, { + name: "fade-in-linear", + onAfterLeave: _cache[11] || (_cache[11] = ($event) => _ctx.$emit("vanish")), + persisted: "" + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createVNode(_component_el_overlay, { + "z-index": _ctx.zIndex, + "overlay-class": [_ctx.ns.is("message-box"), _ctx.modalClass], + mask: _ctx.modal + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("div", { + role: "dialog", + "aria-label": _ctx.title, + "aria-modal": "true", + "aria-describedby": !_ctx.showInput ? _ctx.contentId : void 0, + class: vue.normalizeClass(`${_ctx.ns.namespace.value}-overlay-message-box`), + onClick: _cache[8] || (_cache[8] = (...args) => _ctx.overlayEvent.onClick && _ctx.overlayEvent.onClick(...args)), + onMousedown: _cache[9] || (_cache[9] = (...args) => _ctx.overlayEvent.onMousedown && _ctx.overlayEvent.onMousedown(...args)), + onMouseup: _cache[10] || (_cache[10] = (...args) => _ctx.overlayEvent.onMouseup && _ctx.overlayEvent.onMouseup(...args)) + }, [ + vue.createVNode(_component_el_focus_trap, { + loop: "", + trapped: _ctx.visible, + "focus-trap-el": _ctx.rootRef, + "focus-start-el": _ctx.focusStartRef, + onReleaseRequested: _ctx.onCloseRequested + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("div", { + ref: "rootRef", + class: vue.normalizeClass([ + _ctx.ns.b(), + _ctx.customClass, + _ctx.ns.is("draggable", _ctx.draggable), + { [_ctx.ns.m("center")]: _ctx.center } + ]), + style: vue.normalizeStyle(_ctx.customStyle), + tabindex: "-1", + onClick: _cache[7] || (_cache[7] = vue.withModifiers(() => { + }, ["stop"])) + }, [ + _ctx.title !== null && _ctx.title !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", { + key: 0, + ref: "headerRef", + class: vue.normalizeClass(_ctx.ns.e("header")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("title")) + }, [ + _ctx.iconComponent && _ctx.center ? (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 0, + class: vue.normalizeClass([_ctx.ns.e("status"), _ctx.typeClass]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1) + ], 2), + _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", { + key: 0, + type: "button", + class: vue.normalizeClass(_ctx.ns.e("headerbtn")), + "aria-label": _ctx.t("el.messagebox.close"), + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel")), + onKeydown: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"])) + }, [ + vue.createVNode(_component_el_icon, { + class: vue.normalizeClass(_ctx.ns.e("close")) + }, { + default: vue.withCtx(() => [ + vue.createVNode(_component_close) + ]), + _: 1 + }, 8, ["class"]) + ], 42, _hoisted_2$1)) : vue.createCommentVNode("v-if", true) + ], 2)) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + id: _ctx.contentId, + class: vue.normalizeClass(_ctx.ns.e("content")) + }, [ + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("container")) + }, [ + _ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (vue.openBlock(), vue.createBlock(_component_el_icon, { + key: 0, + class: vue.normalizeClass([_ctx.ns.e("status"), _ctx.typeClass]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true), + _ctx.hasMessage ? (vue.openBlock(), vue.createElementBlock("div", { + key: 1, + class: vue.normalizeClass(_ctx.ns.e("message")) + }, [ + vue.renderSlot(_ctx.$slots, "default", {}, () => [ + !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.showInput ? "label" : "p"), { + key: 0, + for: _ctx.showInput ? _ctx.inputId : void 0 + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(!_ctx.dangerouslyUseHTMLString ? _ctx.message : ""), 1) + ]), + _: 1 + }, 8, ["for"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.showInput ? "label" : "p"), { + key: 1, + for: _ctx.showInput ? _ctx.inputId : void 0, + innerHTML: _ctx.message + }, null, 8, ["for", "innerHTML"])) + ]) + ], 2)) : vue.createCommentVNode("v-if", true) + ], 2), + vue.withDirectives(vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("input")) + }, [ + vue.createVNode(_component_el_input, { + id: _ctx.inputId, + ref: "inputRef", + modelValue: _ctx.inputValue, + "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.inputValue = $event), + type: _ctx.inputType, + placeholder: _ctx.inputPlaceholder, + "aria-invalid": _ctx.validateError, + class: vue.normalizeClass({ invalid: _ctx.validateError }), + onKeydown: vue.withKeys(_ctx.handleInputEnter, ["enter"]) + }, null, 8, ["id", "modelValue", "type", "placeholder", "aria-invalid", "class", "onKeydown"]), + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("errormsg")), + style: vue.normalizeStyle({ + visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden" + }) + }, vue.toDisplayString(_ctx.editorErrorMessage), 7) + ], 2), [ + [vue.vShow, _ctx.showInput] + ]) + ], 10, _hoisted_3$1), + vue.createElementVNode("div", { + class: vue.normalizeClass(_ctx.ns.e("btns")) + }, [ + _ctx.showCancelButton ? (vue.openBlock(), vue.createBlock(_component_el_button, { + key: 0, + loading: _ctx.cancelButtonLoading, + class: vue.normalizeClass([_ctx.cancelButtonClass]), + round: _ctx.roundButton, + size: _ctx.btnSize, + onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleAction("cancel")), + onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"])) + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1) + ]), + _: 1 + }, 8, ["loading", "class", "round", "size"])) : vue.createCommentVNode("v-if", true), + vue.withDirectives(vue.createVNode(_component_el_button, { + ref: "confirmRef", + type: "primary", + loading: _ctx.confirmButtonLoading, + class: vue.normalizeClass([_ctx.confirmButtonClasses]), + round: _ctx.roundButton, + disabled: _ctx.confirmButtonDisabled, + size: _ctx.btnSize, + onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleAction("confirm")), + onKeydown: _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"])) + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1) + ]), + _: 1 + }, 8, ["loading", "class", "round", "disabled", "size"]), [ + [vue.vShow, _ctx.showConfirmButton] + ]) + ], 2) + ], 6) + ]), + _: 3 + }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"]) + ], 42, _hoisted_1$1) + ]), + _: 3 + }, 8, ["z-index", "overlay-class", "mask"]), [ + [vue.vShow, _ctx.visible] + ]) + ]), + _: 3 + }); + } + var MessageBoxConstructor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render], ["__file", "index.vue"]]); + + const messageInstance = /* @__PURE__ */ new Map(); + const getAppendToElement = (props) => { + let appendTo = document.body; + if (props.appendTo) { + if (isString$1(props.appendTo)) { + appendTo = document.querySelector(props.appendTo); + } + if (isElement$1(props.appendTo)) { + appendTo = props.appendTo; + } + if (!isElement$1(appendTo)) { + appendTo = document.body; + } + } + return appendTo; + }; + const initInstance = (props, container, appContext = null) => { + const vnode = vue.createVNode(MessageBoxConstructor, props, isFunction$1(props.message) || vue.isVNode(props.message) ? { + default: isFunction$1(props.message) ? props.message : () => props.message + } : null); + vnode.appContext = appContext; + vue.render(vnode, container); + getAppendToElement(props).appendChild(container.firstElementChild); + return vnode.component; + }; + const genContainer = () => { + return document.createElement("div"); + }; + const showMessage = (options, appContext) => { + const container = genContainer(); + options.onVanish = () => { + vue.render(null, container); + messageInstance.delete(vm); + }; + options.onAction = (action) => { + const currentMsg = messageInstance.get(vm); + let resolve; + if (options.showInput) { + resolve = { value: vm.inputValue, action }; + } else { + resolve = action; + } + if (options.callback) { + options.callback(resolve, instance.proxy); + } else { + if (action === "cancel" || action === "close") { + if (options.distinguishCancelAndClose && action !== "cancel") { + currentMsg.reject("close"); + } else { + currentMsg.reject("cancel"); + } + } else { + currentMsg.resolve(resolve); + } + } + }; + const instance = initInstance(options, container, appContext); + const vm = instance.proxy; + for (const prop in options) { + if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) { + vm[prop] = options[prop]; + } + } + vm.visible = true; + return vm; + }; + function MessageBox(options, appContext = null) { + if (!isClient) + return Promise.reject(); + let callback; + if (isString$1(options) || vue.isVNode(options)) { + options = { + message: options + }; + } else { + callback = options.callback; + } + return new Promise((resolve, reject) => { + const vm = showMessage(options, appContext != null ? appContext : MessageBox._context); + messageInstance.set(vm, { + options, + callback, + resolve, + reject + }); + }); + } + const MESSAGE_BOX_VARIANTS = ["alert", "confirm", "prompt"]; + const MESSAGE_BOX_DEFAULT_OPTS = { + alert: { closeOnPressEscape: false, closeOnClickModal: false }, + confirm: { showCancelButton: true }, + prompt: { showCancelButton: true, showInput: true } + }; + MESSAGE_BOX_VARIANTS.forEach((boxType) => { + MessageBox[boxType] = messageBoxFactory(boxType); + }); + function messageBoxFactory(boxType) { + return (message, title, options, appContext) => { + let titleOrOpts = ""; + if (isObject$1(title)) { + options = title; + titleOrOpts = ""; + } else if (isUndefined(title)) { + titleOrOpts = ""; + } else { + titleOrOpts = title; + } + return MessageBox(Object.assign({ + title: titleOrOpts, + message, + type: "", + ...MESSAGE_BOX_DEFAULT_OPTS[boxType] + }, options, { + boxType + }), appContext); + }; + } + MessageBox.close = () => { + messageInstance.forEach((_, vm) => { + vm.doClose(); + }); + messageInstance.clear(); + }; + MessageBox._context = null; + + const _MessageBox = MessageBox; + _MessageBox.install = (app) => { + _MessageBox._context = app._context; + app.config.globalProperties.$msgbox = _MessageBox; + app.config.globalProperties.$messageBox = _MessageBox; + app.config.globalProperties.$alert = _MessageBox.alert; + app.config.globalProperties.$confirm = _MessageBox.confirm; + app.config.globalProperties.$prompt = _MessageBox.prompt; + }; + const ElMessageBox = _MessageBox; + + const notificationTypes = [ + "success", + "info", + "warning", + "error" + ]; + const notificationProps = buildProps({ + customClass: { + type: String, + default: "" + }, + dangerouslyUseHTMLString: { + type: Boolean, + default: false + }, + duration: { + type: Number, + default: 4500 + }, + icon: { + type: iconPropType + }, + id: { + type: String, + default: "" + }, + message: { + type: definePropType([String, Object]), + default: "" + }, + offset: { + type: Number, + default: 0 + }, + onClick: { + type: definePropType(Function), + default: () => void 0 + }, + onClose: { + type: definePropType(Function), + required: true + }, + position: { + type: String, + values: ["top-right", "top-left", "bottom-right", "bottom-left"], + default: "top-right" + }, + showClose: { + type: Boolean, + default: true + }, + title: { + type: String, + default: "" + }, + type: { + type: String, + values: [...notificationTypes, ""], + default: "" + }, + zIndex: { + type: Number, + default: 0 + } + }); + const notificationEmits = { + destroy: () => true + }; + + const _hoisted_1 = ["id"]; + const _hoisted_2 = ["textContent"]; + const _hoisted_3 = { key: 0 }; + const _hoisted_4 = ["innerHTML"]; + const __default__ = vue.defineComponent({ + name: "ElNotification" + }); + const _sfc_main = /* @__PURE__ */ vue.defineComponent({ + ...__default__, + props: notificationProps, + emits: notificationEmits, + setup(__props, { expose }) { + const props = __props; + const { ns, zIndex } = useGlobalComponentSettings("notification"); + const { nextZIndex, currentZIndex } = zIndex; + const { Close } = CloseComponents; + const visible = vue.ref(false); + let timer = void 0; + const typeClass = vue.computed(() => { + const type = props.type; + return type && TypeComponentsMap[props.type] ? ns.m(type) : ""; + }); + const iconComponent = vue.computed(() => { + if (!props.type) + return props.icon; + return TypeComponentsMap[props.type] || props.icon; + }); + const horizontalClass = vue.computed(() => props.position.endsWith("right") ? "right" : "left"); + const verticalProperty = vue.computed(() => props.position.startsWith("top") ? "top" : "bottom"); + const positionStyle = vue.computed(() => { + return { + [verticalProperty.value]: `${props.offset}px`, + zIndex: currentZIndex.value + }; + }); + function startTimer() { + if (props.duration > 0) { + ({ stop: timer } = useTimeoutFn(() => { + if (visible.value) + close(); + }, props.duration)); + } + } + function clearTimer() { + timer == null ? void 0 : timer(); + } + function close() { + visible.value = false; + } + function onKeydown({ code }) { + if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) { + clearTimer(); + } else if (code === EVENT_CODE.esc) { + if (visible.value) { + close(); + } + } else { + startTimer(); + } + } + vue.onMounted(() => { + startTimer(); + nextZIndex(); + visible.value = true; + }); + useEventListener(document, "keydown", onKeydown); + expose({ + visible, + close + }); + return (_ctx, _cache) => { + return vue.openBlock(), vue.createBlock(vue.Transition, { + name: vue.unref(ns).b("fade"), + onBeforeLeave: _ctx.onClose, + onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("destroy")), + persisted: "" + }, { + default: vue.withCtx(() => [ + vue.withDirectives(vue.createElementVNode("div", { + id: _ctx.id, + class: vue.normalizeClass([vue.unref(ns).b(), _ctx.customClass, vue.unref(horizontalClass)]), + style: vue.normalizeStyle(vue.unref(positionStyle)), + role: "alert", + onMouseenter: clearTimer, + onMouseleave: startTimer, + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args)) + }, [ + vue.unref(iconComponent) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(typeClass)]) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(iconComponent)))) + ]), + _: 1 + }, 8, ["class"])) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("group")) + }, [ + vue.createElementVNode("h2", { + class: vue.normalizeClass(vue.unref(ns).e("title")), + textContent: vue.toDisplayString(_ctx.title) + }, null, 10, _hoisted_2), + vue.withDirectives(vue.createElementVNode("div", { + class: vue.normalizeClass(vue.unref(ns).e("content")), + style: vue.normalizeStyle(!!_ctx.title ? void 0 : { margin: 0 }) + }, [ + vue.renderSlot(_ctx.$slots, "default", {}, () => [ + !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [ + vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "), + vue.createElementVNode("p", { innerHTML: _ctx.message }, null, 8, _hoisted_4) + ], 2112)) + ]) + ], 6), [ + [vue.vShow, _ctx.message] + ]), + _ctx.showClose ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { + key: 0, + class: vue.normalizeClass(vue.unref(ns).e("closeBtn")), + onClick: vue.withModifiers(close, ["stop"]) + }, { + default: vue.withCtx(() => [ + vue.createVNode(vue.unref(Close)) + ]), + _: 1 + }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true) + ], 2) + ], 46, _hoisted_1), [ + [vue.vShow, visible.value] + ]) + ]), + _: 3 + }, 8, ["name", "onBeforeLeave"]); + }; + } + }); + var NotificationConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "notification.vue"]]); + + const notifications = { + "top-left": [], + "top-right": [], + "bottom-left": [], + "bottom-right": [] + }; + const GAP_SIZE = 16; + let seed = 1; + const notify = function(options = {}, context = null) { + if (!isClient) + return { close: () => void 0 }; + if (typeof options === "string" || vue.isVNode(options)) { + options = { message: options }; + } + const position = options.position || "top-right"; + let verticalOffset = options.offset || 0; + notifications[position].forEach(({ vm: vm2 }) => { + var _a; + verticalOffset += (((_a = vm2.el) == null ? void 0 : _a.offsetHeight) || 0) + GAP_SIZE; + }); + verticalOffset += GAP_SIZE; + const id = `notification_${seed++}`; + const userOnClose = options.onClose; + const props = { + ...options, + offset: verticalOffset, + id, + onClose: () => { + close(id, position, userOnClose); + } + }; + let appendTo = document.body; + if (isElement$1(options.appendTo)) { + appendTo = options.appendTo; + } else if (isString$1(options.appendTo)) { + appendTo = document.querySelector(options.appendTo); + } + if (!isElement$1(appendTo)) { + appendTo = document.body; + } + const container = document.createElement("div"); + const vm = vue.createVNode(NotificationConstructor, props, vue.isVNode(props.message) ? { + default: () => props.message + } : null); + vm.appContext = context != null ? context : notify._context; + vm.props.onDestroy = () => { + vue.render(null, container); + }; + vue.render(vm, container); + notifications[position].push({ vm }); + appendTo.appendChild(container.firstElementChild); + return { + close: () => { + vm.component.exposed.visible.value = false; + } + }; + }; + notificationTypes.forEach((type) => { + notify[type] = (options = {}) => { + if (typeof options === "string" || vue.isVNode(options)) { + options = { + message: options + }; + } + return notify({ + ...options, + type + }); + }; + }); + function close(id, position, userOnClose) { + const orientedNotifications = notifications[position]; + const idx = orientedNotifications.findIndex(({ vm: vm2 }) => { + var _a; + return ((_a = vm2.component) == null ? void 0 : _a.props.id) === id; + }); + if (idx === -1) + return; + const { vm } = orientedNotifications[idx]; + if (!vm) + return; + userOnClose == null ? void 0 : userOnClose(vm); + const removedHeight = vm.el.offsetHeight; + const verticalPos = position.split("-")[0]; + orientedNotifications.splice(idx, 1); + const len = orientedNotifications.length; + if (len < 1) + return; + for (let i = idx; i < len; i++) { + const { el, component } = orientedNotifications[i].vm; + const pos = Number.parseInt(el.style[verticalPos], 10) - removedHeight - GAP_SIZE; + component.props.offset = pos; + } + } + function closeAll() { + for (const orientedNotifications of Object.values(notifications)) { + orientedNotifications.forEach(({ vm }) => { + vm.component.exposed.visible.value = false; + }); + } + } + notify.closeAll = closeAll; + notify._context = null; + var Notify = notify; + + const ElNotification = withInstallFunction(Notify, "$notify"); + + var Plugins = [ + ElInfiniteScroll, + ElLoading, + ElMessage, + ElMessageBox, + ElNotification, + ElPopoverDirective + ]; + + var installer = makeInstaller([...Components, ...Plugins]); + + const install = installer.install; + const version = installer.version; + + exports.BAR_MAP = BAR_MAP; + exports.CASCADER_PANEL_INJECTION_KEY = CASCADER_PANEL_INJECTION_KEY; + exports.CHANGE_EVENT = CHANGE_EVENT; + exports.ClickOutside = ClickOutside; + exports.CommonPicker = CommonPicker; + exports.CommonProps = CommonProps; + exports.DEFAULT_FORMATS_DATE = DEFAULT_FORMATS_DATE; + exports.DEFAULT_FORMATS_DATEPICKER = DEFAULT_FORMATS_DATEPICKER; + exports.DEFAULT_FORMATS_TIME = DEFAULT_FORMATS_TIME; + exports.DROPDOWN_COLLECTION_INJECTION_KEY = COLLECTION_INJECTION_KEY; + exports.DROPDOWN_COLLECTION_ITEM_INJECTION_KEY = COLLECTION_ITEM_INJECTION_KEY; + exports.DROPDOWN_INJECTION_KEY = DROPDOWN_INJECTION_KEY; + exports.DefaultProps = DefaultProps; + exports.DynamicSizeGrid = DynamicSizeGrid$1; + exports.DynamicSizeList = DynamicSizeList$1; + exports.EVENT_CODE = EVENT_CODE; + exports.Effect = Effect; + exports.ElAffix = ElAffix; + exports.ElAlert = ElAlert; + exports.ElAside = ElAside; + exports.ElAutoResizer = ElAutoResizer; + exports.ElAutocomplete = ElAutocomplete; + exports.ElAvatar = ElAvatar; + exports.ElBacktop = ElBacktop; + exports.ElBadge = ElBadge; + exports.ElBreadcrumb = ElBreadcrumb; + exports.ElBreadcrumbItem = ElBreadcrumbItem; + exports.ElButton = ElButton; + exports.ElButtonGroup = ElButtonGroup$1; + exports.ElCalendar = ElCalendar; + exports.ElCard = ElCard; + exports.ElCarousel = ElCarousel; + exports.ElCarouselItem = ElCarouselItem; + exports.ElCascader = ElCascader; + exports.ElCascaderPanel = ElCascaderPanel; + exports.ElCheckTag = ElCheckTag; + exports.ElCheckbox = ElCheckbox; + exports.ElCheckboxButton = ElCheckboxButton; + exports.ElCheckboxGroup = ElCheckboxGroup$1; + exports.ElCol = ElCol; + exports.ElCollapse = ElCollapse; + exports.ElCollapseItem = ElCollapseItem; + exports.ElCollapseTransition = ElCollapseTransition; + exports.ElCollection = ElCollection; + exports.ElCollectionItem = ElCollectionItem; + exports.ElColorPicker = ElColorPicker; + exports.ElConfigProvider = ElConfigProvider; + exports.ElContainer = ElContainer; + exports.ElCountdown = ElCountdown; + exports.ElDatePicker = ElDatePicker; + exports.ElDescriptions = ElDescriptions; + exports.ElDescriptionsItem = ElDescriptionsItem; + exports.ElDialog = ElDialog; + exports.ElDivider = ElDivider; + exports.ElDrawer = ElDrawer; + exports.ElDropdown = ElDropdown; + exports.ElDropdownItem = ElDropdownItem; + exports.ElDropdownMenu = ElDropdownMenu; + exports.ElEmpty = ElEmpty; + exports.ElFooter = ElFooter; + exports.ElForm = ElForm; + exports.ElFormItem = ElFormItem; + exports.ElHeader = ElHeader; + exports.ElIcon = ElIcon; + exports.ElImage = ElImage; + exports.ElImageViewer = ElImageViewer; + exports.ElInfiniteScroll = ElInfiniteScroll; + exports.ElInput = ElInput; + exports.ElInputNumber = ElInputNumber; + exports.ElLink = ElLink; + exports.ElLoading = ElLoading; + exports.ElLoadingDirective = vLoading; + exports.ElLoadingService = Loading; + exports.ElMain = ElMain; + exports.ElMenu = ElMenu; + exports.ElMenuItem = ElMenuItem; + exports.ElMenuItemGroup = ElMenuItemGroup; + exports.ElMessage = ElMessage; + exports.ElMessageBox = ElMessageBox; + exports.ElNotification = ElNotification; + exports.ElOption = ElOption; + exports.ElOptionGroup = ElOptionGroup; + exports.ElOverlay = ElOverlay; + exports.ElPageHeader = ElPageHeader; + exports.ElPagination = ElPagination; + exports.ElPopconfirm = ElPopconfirm; + exports.ElPopover = ElPopover; + exports.ElPopoverDirective = ElPopoverDirective; + exports.ElPopper = ElPopper; + exports.ElPopperArrow = ElPopperArrow; + exports.ElPopperContent = ElPopperContent; + exports.ElPopperTrigger = ElPopperTrigger; + exports.ElProgress = ElProgress; + exports.ElRadio = ElRadio; + exports.ElRadioButton = ElRadioButton; + exports.ElRadioGroup = ElRadioGroup; + exports.ElRate = ElRate; + exports.ElResult = ElResult; + exports.ElRow = ElRow; + exports.ElScrollbar = ElScrollbar; + exports.ElSelect = ElSelect; + exports.ElSelectV2 = ElSelectV2; + exports.ElSkeleton = ElSkeleton; + exports.ElSkeletonItem = ElSkeletonItem; + exports.ElSlider = ElSlider; + exports.ElSpace = ElSpace; + exports.ElStatistic = ElStatistic; + exports.ElStep = ElStep; + exports.ElSteps = ElSteps; + exports.ElSubMenu = ElSubMenu; + exports.ElSwitch = ElSwitch; + exports.ElTabPane = ElTabPane; + exports.ElTable = ElTable; + exports.ElTableColumn = ElTableColumn; + exports.ElTableV2 = ElTableV2; + exports.ElTabs = ElTabs; + exports.ElTag = ElTag; + exports.ElText = ElText; + exports.ElTimePicker = ElTimePicker; + exports.ElTimeSelect = ElTimeSelect; + exports.ElTimeline = ElTimeline; + exports.ElTimelineItem = ElTimelineItem; + exports.ElTooltip = ElTooltip; + exports.ElTransfer = ElTransfer; + exports.ElTree = ElTree; + exports.ElTreeSelect = ElTreeSelect; + exports.ElTreeV2 = ElTreeV2; + exports.ElUpload = ElUpload; + exports.FIRST_KEYS = FIRST_KEYS; + exports.FIRST_LAST_KEYS = FIRST_LAST_KEYS; + exports.FORWARD_REF_INJECTION_KEY = FORWARD_REF_INJECTION_KEY; + exports.FixedSizeGrid = FixedSizeGrid$1; + exports.FixedSizeList = FixedSizeList$1; + exports.GAP = GAP; + exports.ID_INJECTION_KEY = ID_INJECTION_KEY; + exports.INPUT_EVENT = INPUT_EVENT; + exports.INSTALLED_KEY = INSTALLED_KEY; + exports.IconComponentMap = IconComponentMap; + exports.IconMap = IconMap; + exports.LAST_KEYS = LAST_KEYS; + exports.LEFT_CHECK_CHANGE_EVENT = LEFT_CHECK_CHANGE_EVENT; + exports.Mousewheel = Mousewheel; + exports.POPPER_CONTENT_INJECTION_KEY = POPPER_CONTENT_INJECTION_KEY; + exports.POPPER_INJECTION_KEY = POPPER_INJECTION_KEY; + exports.RIGHT_CHECK_CHANGE_EVENT = RIGHT_CHECK_CHANGE_EVENT; + exports.ROOT_PICKER_INJECTION_KEY = ROOT_PICKER_INJECTION_KEY; + exports.RowAlign = RowAlign; + exports.RowJustify = RowJustify; + exports.SIZE_INJECTION_KEY = SIZE_INJECTION_KEY; + exports.TOOLTIP_INJECTION_KEY = TOOLTIP_INJECTION_KEY; + exports.TableV2 = TableV2$1; + exports.TableV2Alignment = Alignment; + exports.TableV2FixedDir = FixedDir; + exports.TableV2Placeholder = placeholderSign; + exports.TableV2SortOrder = SortOrder; + exports.TimePickPanel = TimePickPanel; + exports.TrapFocus = TrapFocus; + exports.UPDATE_MODEL_EVENT = UPDATE_MODEL_EVENT; + exports.WEEK_DAYS = WEEK_DAYS; + exports.affixEmits = affixEmits; + exports.affixProps = affixProps; + exports.alertEffects = alertEffects; + exports.alertEmits = alertEmits; + exports.alertProps = alertProps; + exports.arrowMiddleware = arrowMiddleware; + exports.autoResizerProps = autoResizerProps; + exports.autocompleteEmits = autocompleteEmits; + exports.autocompleteProps = autocompleteProps; + exports.avatarEmits = avatarEmits; + exports.avatarProps = avatarProps; + exports.backtopEmits = backtopEmits; + exports.backtopProps = backtopProps; + exports.badgeProps = badgeProps; + exports.breadcrumbItemProps = breadcrumbItemProps; + exports.breadcrumbKey = breadcrumbKey; + exports.breadcrumbProps = breadcrumbProps; + exports.buildLocaleContext = buildLocaleContext; + exports.buildTimeList = buildTimeList; + exports.buildTranslator = buildTranslator; + exports.buttonEmits = buttonEmits; + exports.buttonGroupContextKey = buttonGroupContextKey; + exports.buttonNativeTypes = buttonNativeTypes; + exports.buttonProps = buttonProps; + exports.buttonTypes = buttonTypes; + exports.calendarEmits = calendarEmits; + exports.calendarProps = calendarProps; + exports.cardProps = cardProps; + exports.carouselContextKey = carouselContextKey; + exports.carouselEmits = carouselEmits; + exports.carouselItemProps = carouselItemProps; + exports.carouselProps = carouselProps; + exports.cascaderEmits = cascaderEmits; + exports.cascaderProps = cascaderProps; + exports.checkTagEmits = checkTagEmits; + exports.checkTagProps = checkTagProps; + exports.checkboxEmits = checkboxEmits; + exports.checkboxGroupContextKey = checkboxGroupContextKey; + exports.checkboxGroupEmits = checkboxGroupEmits; + exports.checkboxGroupProps = checkboxGroupProps; + exports.checkboxProps = checkboxProps; + exports.colProps = colProps; + exports.collapseContextKey = collapseContextKey; + exports.collapseEmits = collapseEmits; + exports.collapseItemProps = collapseItemProps; + exports.collapseProps = collapseProps; + exports.colorPickerContextKey = colorPickerContextKey; + exports.colorPickerEmits = colorPickerEmits; + exports.colorPickerProps = colorPickerProps; + exports.componentSizeMap = componentSizeMap; + exports.componentSizes = componentSizes; + exports.configProviderContextKey = configProviderContextKey; + exports.configProviderProps = configProviderProps; + exports.countdownEmits = countdownEmits; + exports.countdownProps = countdownProps; + exports.createModelToggleComposable = createModelToggleComposable; + exports.dateEquals = dateEquals; + exports.datePickTypes = datePickTypes; + exports.dayjs = dayjs; + exports["default"] = installer; + exports.defaultInitialZIndex = defaultInitialZIndex; + exports.defaultNamespace = defaultNamespace; + exports.descriptionProps = descriptionProps; + exports.dialogEmits = dialogEmits; + exports.dialogInjectionKey = dialogInjectionKey; + exports.dialogProps = dialogProps; + exports.dividerProps = dividerProps; + exports.drawerEmits = drawerEmits; + exports.drawerProps = drawerProps; + exports.dropdownItemProps = dropdownItemProps; + exports.dropdownMenuProps = dropdownMenuProps; + exports.dropdownProps = dropdownProps; + exports.elPaginationKey = elPaginationKey; + exports.emitChangeFn = emitChangeFn; + exports.emptyProps = emptyProps; + exports.extractDateFormat = extractDateFormat; + exports.extractTimeFormat = extractTimeFormat; + exports.formContextKey = formContextKey; + exports.formEmits = formEmits; + exports.formItemContextKey = formItemContextKey; + exports.formItemProps = formItemProps; + exports.formItemValidateStates = formItemValidateStates; + exports.formProps = formProps; + exports.formatter = formatter; + exports.genFileId = genFileId; + exports.getPositionDataWithUnit = getPositionDataWithUnit; + exports.iconProps = iconProps; + exports.imageEmits = imageEmits; + exports.imageProps = imageProps; + exports.imageViewerEmits = imageViewerEmits; + exports.imageViewerProps = imageViewerProps; + exports.inputEmits = inputEmits; + exports.inputNumberEmits = inputNumberEmits; + exports.inputNumberProps = inputNumberProps; + exports.inputProps = inputProps; + exports.install = install; + exports.linkEmits = linkEmits; + exports.linkProps = linkProps; + exports.localeContextKey = localeContextKey; + exports.makeInstaller = makeInstaller; + exports.makeList = makeList; + exports.menuEmits = menuEmits; + exports.menuItemEmits = menuItemEmits; + exports.menuItemGroupProps = menuItemGroupProps; + exports.menuItemProps = menuItemProps; + exports.menuProps = menuProps; + exports.messageConfig = messageConfig; + exports.messageDefaults = messageDefaults; + exports.messageEmits = messageEmits; + exports.messageProps = messageProps; + exports.messageTypes = messageTypes; + exports.namespaceContextKey = namespaceContextKey; + exports.notificationEmits = notificationEmits; + exports.notificationProps = notificationProps; + exports.notificationTypes = notificationTypes; + exports.overlayEmits = overlayEmits; + exports.overlayProps = overlayProps; + exports.pageHeaderEmits = pageHeaderEmits; + exports.pageHeaderProps = pageHeaderProps; + exports.paginationEmits = paginationEmits; + exports.paginationProps = paginationProps; + exports.parseDate = parseDate; + exports.popconfirmEmits = popconfirmEmits; + exports.popconfirmProps = popconfirmProps; + exports.popoverEmits = popoverEmits; + exports.popoverProps = popoverProps; + exports.popperArrowProps = popperArrowProps; + exports.popperContentEmits = popperContentEmits; + exports.popperContentProps = popperContentProps; + exports.popperCoreConfigProps = popperCoreConfigProps; + exports.popperProps = popperProps; + exports.popperTriggerProps = popperTriggerProps; + exports.progressProps = progressProps; + exports.provideGlobalConfig = provideGlobalConfig; + exports.radioButtonProps = radioButtonProps; + exports.radioEmits = radioEmits; + exports.radioGroupEmits = radioGroupEmits; + exports.radioGroupKey = radioGroupKey; + exports.radioGroupProps = radioGroupProps; + exports.radioProps = radioProps; + exports.radioPropsBase = radioPropsBase; + exports.rangeArr = rangeArr; + exports.rateEmits = rateEmits; + exports.rateProps = rateProps; + exports.renderThumbStyle = renderThumbStyle$1; + exports.resultProps = resultProps; + exports.roleTypes = roleTypes; + exports.rowContextKey = rowContextKey; + exports.rowProps = rowProps; + exports.scrollbarContextKey = scrollbarContextKey; + exports.scrollbarEmits = scrollbarEmits; + exports.scrollbarProps = scrollbarProps; + exports.selectGroupKey = selectGroupKey; + exports.selectKey = selectKey; + exports.selectV2InjectionKey = selectV2InjectionKey; + exports.skeletonItemProps = skeletonItemProps; + exports.skeletonProps = skeletonProps; + exports.sliderContextKey = sliderContextKey; + exports.sliderEmits = sliderEmits; + exports.sliderProps = sliderProps; + exports.spaceProps = spaceProps; + exports.statisticProps = statisticProps; + exports.stepProps = stepProps; + exports.stepsEmits = stepsEmits; + exports.stepsProps = stepsProps; + exports.subMenuProps = subMenuProps; + exports.switchEmits = switchEmits; + exports.switchProps = switchProps; + exports.tabBarProps = tabBarProps; + exports.tabNavEmits = tabNavEmits; + exports.tabNavProps = tabNavProps; + exports.tabPaneProps = tabPaneProps; + exports.tableV2Props = tableV2Props; + exports.tableV2RowProps = tableV2RowProps; + exports.tabsEmits = tabsEmits; + exports.tabsProps = tabsProps; + exports.tabsRootContextKey = tabsRootContextKey; + exports.tagEmits = tagEmits; + exports.tagProps = tagProps; + exports.textProps = textProps; + exports.thumbProps = thumbProps; + exports.timePickerDefaultProps = timePickerDefaultProps; + exports.timeUnits = timeUnits$1; + exports.timelineItemProps = timelineItemProps; + exports.tooltipEmits = tooltipEmits; + exports.transferCheckedChangeFn = transferCheckedChangeFn; + exports.transferEmits = transferEmits; + exports.transferProps = transferProps; + exports.translate = translate; + exports.uploadBaseProps = uploadBaseProps; + exports.uploadContentProps = uploadContentProps; + exports.uploadContextKey = uploadContextKey; + exports.uploadDraggerEmits = uploadDraggerEmits; + exports.uploadDraggerProps = uploadDraggerProps; + exports.uploadListEmits = uploadListEmits; + exports.uploadListProps = uploadListProps; + exports.uploadListTypes = uploadListTypes; + exports.uploadProps = uploadProps; + exports.useAttrs = useAttrs; + exports.useCascaderConfig = useCascaderConfig; + exports.useCursor = useCursor; + exports.useDelayedRender = useDelayedRender; + exports.useDelayedToggle = useDelayedToggle; + exports.useDelayedToggleProps = useDelayedToggleProps; + exports.useDeprecated = useDeprecated; + exports.useDialog = useDialog; + exports.useDisabled = useDisabled; + exports.useDraggable = useDraggable; + exports.useEscapeKeydown = useEscapeKeydown; + exports.useFloating = useFloating; + exports.useFloatingProps = useFloatingProps; + exports.useFocus = useFocus; + exports.useFormDisabled = useFormDisabled; + exports.useFormItem = useFormItem; + exports.useFormItemInputId = useFormItemInputId; + exports.useFormSize = useFormSize; + exports.useForwardRef = useForwardRef; + exports.useForwardRefDirective = useForwardRefDirective; + exports.useGetDerivedNamespace = useGetDerivedNamespace; + exports.useGlobalComponentSettings = useGlobalComponentSettings; + exports.useGlobalConfig = useGlobalConfig; + exports.useGlobalSize = useGlobalSize; + exports.useId = useId; + exports.useIdInjection = useIdInjection; + exports.useLocale = useLocale; + exports.useLockscreen = useLockscreen; + exports.useModal = useModal; + exports.useModelToggle = useModelToggle; + exports.useModelToggleEmits = useModelToggleEmits; + exports.useModelToggleProps = useModelToggleProps; + exports.useNamespace = useNamespace; + exports.useOrderedChildren = useOrderedChildren; + exports.usePopper = usePopper; + exports.usePopperArrowProps = usePopperArrowProps; + exports.usePopperContainer = usePopperContainer; + exports.usePopperContainerId = usePopperContainerId; + exports.usePopperContentEmits = usePopperContentEmits; + exports.usePopperContentProps = usePopperContentProps; + exports.usePopperCoreConfigProps = usePopperCoreConfigProps; + exports.usePopperProps = usePopperProps; + exports.usePopperTriggerProps = usePopperTriggerProps; + exports.usePreventGlobal = usePreventGlobal; + exports.useProp = useProp; + exports.useRestoreActive = useRestoreActive; + exports.useSameTarget = useSameTarget; + exports.useSize = useSize; + exports.useSizeProp = useSizeProp; + exports.useSizeProps = useSizeProps; + exports.useSpace = useSpace; + exports.useTeleport = useTeleport; + exports.useThrottleRender = useThrottleRender; + exports.useTimeout = useTimeout; + exports.useTooltipContentProps = useTooltipContentProps; + exports.useTooltipModelToggle = useTooltipModelToggle; + exports.useTooltipModelToggleEmits = useTooltipModelToggleEmits; + exports.useTooltipModelToggleProps = useTooltipModelToggleProps; + exports.useTooltipProps = useTooltipProps; + exports.useTooltipTriggerProps = useTooltipTriggerProps; + exports.useTransitionFallthrough = useTransitionFallthrough; + exports.useTransitionFallthroughEmits = useTransitionFallthroughEmits; + exports.useZIndex = useZIndex; + exports.vLoading = vLoading; + exports.vRepeatClick = vRepeatClick; + exports.valueEquals = valueEquals; + exports.version = version; + exports.virtualizedGridProps = virtualizedGridProps; + exports.virtualizedListProps = virtualizedListProps; + exports.virtualizedProps = virtualizedProps; + exports.virtualizedScrollbarProps = virtualizedScrollbarProps; + exports.zIndexContextKey = zIndexContextKey; + + Object.defineProperty(exports, '__esModule', { value: true }); + + })); \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..df36fcf --- /dev/null +++ b/public/favicon.ico Binary files differ diff --git a/public/fb.docx b/public/fb.docx new file mode 100644 index 0000000..2810487 --- /dev/null +++ b/public/fb.docx Binary files differ diff --git a/public/g01.docx b/public/g01.docx new file mode 100644 index 0000000..5343ed8 --- /dev/null +++ b/public/g01.docx Binary files differ diff --git a/public/g02.docx b/public/g02.docx new file mode 100644 index 0000000..e3f80ba --- /dev/null +++ b/public/g02.docx Binary files differ diff --git a/public/g03.docx b/public/g03.docx new file mode 100644 index 0000000..1ced53a --- /dev/null +++ b/public/g03.docx Binary files differ diff --git a/public/g04.docx b/public/g04.docx new file mode 100644 index 0000000..52aeebe --- /dev/null +++ b/public/g04.docx Binary files differ diff --git a/public/g05.docx b/public/g05.docx new file mode 100644 index 0000000..78ead96 --- /dev/null +++ b/public/g05.docx Binary files differ diff --git a/public/g06.docx b/public/g06.docx new file mode 100644 index 0000000..660f9e5 --- /dev/null +++ b/public/g06.docx Binary files differ diff --git a/public/g07.docx b/public/g07.docx new file mode 100644 index 0000000..41da976 --- /dev/null +++ b/public/g07.docx Binary files differ diff --git a/public/g08.docx b/public/g08.docx new file mode 100644 index 0000000..92b7627 --- /dev/null +++ b/public/g08.docx Binary files differ diff --git a/public/g09.docx b/public/g09.docx new file mode 100644 index 0000000..64f078e --- /dev/null +++ b/public/g09.docx Binary files differ diff --git a/public/g10.docx b/public/g10.docx new file mode 100644 index 0000000..ba45176 --- /dev/null +++ b/public/g10.docx Binary files differ diff --git a/public/g11.docx b/public/g11.docx new file mode 100644 index 0000000..62a27a4 --- /dev/null +++ b/public/g11.docx Binary files differ diff --git a/public/g12.docx b/public/g12.docx new file mode 100644 index 0000000..f6fa68f --- /dev/null +++ b/public/g12.docx Binary files differ diff --git a/public/g13.docx b/public/g13.docx new file mode 100644 index 0000000..d30e3a7 --- /dev/null +++ b/public/g13.docx Binary files differ diff --git a/public/g14.docx b/public/g14.docx new file mode 100644 index 0000000..209a21c --- /dev/null +++ b/public/g14.docx Binary files differ diff --git a/public/g15.docx b/public/g15.docx new file mode 100644 index 0000000..6e5c7cf --- /dev/null +++ b/public/g15.docx Binary files differ diff --git a/public/g16.docx b/public/g16.docx new file mode 100644 index 0000000..6137d1f --- /dev/null +++ b/public/g16.docx Binary files differ diff --git a/public/g17.docx b/public/g17.docx new file mode 100644 index 0000000..e43b575 --- /dev/null +++ b/public/g17.docx Binary files differ diff --git a/public/guanxian.docx b/public/guanxian.docx new file mode 100644 index 0000000..c513020 --- /dev/null +++ b/public/guanxian.docx Binary files differ diff --git "a/public/hj - \345\211\257\346\234\254.docx" "b/public/hj - \345\211\257\346\234\254.docx" new file mode 100644 index 0000000..689bd82 --- /dev/null +++ "b/public/hj - \345\211\257\346\234\254.docx" Binary files differ diff --git a/public/hj.docx b/public/hj.docx new file mode 100644 index 0000000..f6af61f --- /dev/null +++ b/public/hj.docx Binary files differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..145f87d --- /dev/null +++ b/public/index.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang=""> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width,initial-scale=1.0"> + <!-- vue3鏈�鏂扮増鏈� --> + <script src="vue3.js"></script> + <!-- 寮曞叆Element Plus UI 缁勪欢搴� --> + <link rel="stylesheet" href="element-index.css" /> + <script src="element-plus.js"></script> + <!-- 璇█鍖� --> + <!-- <script src="https://unpkg.com/browse/element-plus@1.2.0-beta.4/es/locale/lang/zh-cn.mjs"></script> --> + <link rel="icon" href="<%= BASE_URL %>favicon.ico"> + <title>濂ョ憺閲� MESS 绠$悊骞冲彴</title> + </head> + <body> + <noscript> + <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> + </noscript> + <div id="app"></div> + <!-- built files will be auto injected --> + + </body> +</html> diff --git a/public/jbj.docx b/public/jbj.docx new file mode 100644 index 0000000..d419de0 --- /dev/null +++ b/public/jbj.docx Binary files differ diff --git a/public/jg.docx b/public/jg.docx new file mode 100644 index 0000000..1d39813 --- /dev/null +++ b/public/jg.docx Binary files differ diff --git a/public/jiguan.docx b/public/jiguan.docx new file mode 100644 index 0000000..1d53f04 --- /dev/null +++ b/public/jiguan.docx Binary files differ diff --git a/public/jiguan2.docx b/public/jiguan2.docx new file mode 100644 index 0000000..2b482eb --- /dev/null +++ b/public/jiguan2.docx Binary files differ diff --git a/public/vue3.js b/public/vue3.js new file mode 100644 index 0000000..faa2b30 --- /dev/null +++ b/public/vue3.js @@ -0,0 +1,15929 @@ +var Vue = (function (exports) { + 'use strict'; + + /** + * Make a map and return a function for checking if a key + * is in that map. + * IMPORTANT: all calls of this function must be prefixed with + * \/\*#\_\_PURE\_\_\*\/ + * So that rollup can tree-shake them if necessary. + */ + function makeMap(str, expectsLowerCase) { + const map = Object.create(null); + const list = str.split(','); + for (let i = 0; i < list.length; i++) { + map[list[i]] = true; + } + return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val]; + } + + /** + * dev only flag -> name mapping + */ + const PatchFlagNames = { + [1 /* TEXT */]: `TEXT`, + [2 /* CLASS */]: `CLASS`, + [4 /* STYLE */]: `STYLE`, + [8 /* PROPS */]: `PROPS`, + [16 /* FULL_PROPS */]: `FULL_PROPS`, + [32 /* HYDRATE_EVENTS */]: `HYDRATE_EVENTS`, + [64 /* STABLE_FRAGMENT */]: `STABLE_FRAGMENT`, + [128 /* KEYED_FRAGMENT */]: `KEYED_FRAGMENT`, + [256 /* UNKEYED_FRAGMENT */]: `UNKEYED_FRAGMENT`, + [512 /* NEED_PATCH */]: `NEED_PATCH`, + [1024 /* DYNAMIC_SLOTS */]: `DYNAMIC_SLOTS`, + [2048 /* DEV_ROOT_FRAGMENT */]: `DEV_ROOT_FRAGMENT`, + [-1 /* HOISTED */]: `HOISTED`, + [-2 /* BAIL */]: `BAIL` + }; + + /** + * Dev only + */ + const slotFlagsText = { + [1 /* STABLE */]: 'STABLE', + [2 /* DYNAMIC */]: 'DYNAMIC', + [3 /* FORWARDED */]: 'FORWARDED' + }; + + const GLOBALS_WHITE_LISTED = 'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' + + 'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' + + 'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt'; + const isGloballyWhitelisted = /*#__PURE__*/ makeMap(GLOBALS_WHITE_LISTED); + + const range = 2; + function generateCodeFrame(source, start = 0, end = source.length) { + // Split the content into individual lines but capture the newline sequence + // that separated each line. This is important because the actual sequence is + // needed to properly take into account the full line length for offset + // comparison + let lines = source.split(/(\r?\n)/); + // Separate the lines and newline sequences into separate arrays for easier referencing + const newlineSequences = lines.filter((_, idx) => idx % 2 === 1); + lines = lines.filter((_, idx) => idx % 2 === 0); + let count = 0; + const res = []; + for (let i = 0; i < lines.length; i++) { + count += + lines[i].length + + ((newlineSequences[i] && newlineSequences[i].length) || 0); + if (count >= start) { + for (let j = i - range; j <= i + range || end > count; j++) { + if (j < 0 || j >= lines.length) + continue; + const line = j + 1; + res.push(`${line}${' '.repeat(Math.max(3 - String(line).length, 0))}| ${lines[j]}`); + const lineLength = lines[j].length; + const newLineSeqLength = (newlineSequences[j] && newlineSequences[j].length) || 0; + if (j === i) { + // push underline + const pad = start - (count - (lineLength + newLineSeqLength)); + const length = Math.max(1, end > count ? lineLength - pad : end - start); + res.push(` | ` + ' '.repeat(pad) + '^'.repeat(length)); + } + else if (j > i) { + if (end > count) { + const length = Math.max(Math.min(end - count, lineLength), 1); + res.push(` | ` + '^'.repeat(length)); + } + count += lineLength + newLineSeqLength; + } + } + break; + } + } + return res.join('\n'); + } + + /** + * On the client we only need to offer special cases for boolean attributes that + * have different names from their corresponding dom properties: + * - itemscope -> N/A + * - allowfullscreen -> allowFullscreen + * - formnovalidate -> formNoValidate + * - ismap -> isMap + * - nomodule -> noModule + * - novalidate -> noValidate + * - readonly -> readOnly + */ + const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`; + const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs); + /** + * Boolean attributes should be included if the value is truthy or ''. + * e.g. `<select multiple>` compiles to `{ multiple: '' }` + */ + function includeBooleanAttr(value) { + return !!value || value === ''; + } + + function normalizeStyle(value) { + if (isArray(value)) { + const res = {}; + for (let i = 0; i < value.length; i++) { + const item = value[i]; + const normalized = isString(item) + ? parseStringStyle(item) + : normalizeStyle(item); + if (normalized) { + for (const key in normalized) { + res[key] = normalized[key]; + } + } + } + return res; + } + else if (isString(value)) { + return value; + } + else if (isObject(value)) { + return value; + } + } + const listDelimiterRE = /;(?![^(]*\))/g; + const propertyDelimiterRE = /:(.+)/; + function parseStringStyle(cssText) { + const ret = {}; + cssText.split(listDelimiterRE).forEach(item => { + if (item) { + const tmp = item.split(propertyDelimiterRE); + tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim()); + } + }); + return ret; + } + function normalizeClass(value) { + let res = ''; + if (isString(value)) { + res = value; + } + else if (isArray(value)) { + for (let i = 0; i < value.length; i++) { + const normalized = normalizeClass(value[i]); + if (normalized) { + res += normalized + ' '; + } + } + } + else if (isObject(value)) { + for (const name in value) { + if (value[name]) { + res += name + ' '; + } + } + } + return res.trim(); + } + function normalizeProps(props) { + if (!props) + return null; + let { class: klass, style } = props; + if (klass && !isString(klass)) { + props.class = normalizeClass(klass); + } + if (style) { + props.style = normalizeStyle(style); + } + return props; + } + + // These tag configs are shared between compiler-dom and runtime-dom, so they + // https://developer.mozilla.org/en-US/docs/Web/HTML/Element + const HTML_TAGS = 'html,body,base,head,link,meta,style,title,address,article,aside,footer,' + + 'header,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,' + + 'figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,' + + 'data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,' + + 'time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,' + + 'canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,' + + 'th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,' + + 'option,output,progress,select,textarea,details,dialog,menu,' + + 'summary,template,blockquote,iframe,tfoot'; + // https://developer.mozilla.org/en-US/docs/Web/SVG/Element + const SVG_TAGS = 'svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,' + + 'defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,' + + 'feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,' + + 'feDistanceLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,' + + 'feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,' + + 'fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,' + + 'foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,' + + 'mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,' + + 'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' + + 'text,textPath,title,tspan,unknown,use,view'; + const VOID_TAGS = 'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'; + /** + * Compiler only. + * Do NOT use in runtime code paths unless behind `true` flag. + */ + const isHTMLTag = /*#__PURE__*/ makeMap(HTML_TAGS); + /** + * Compiler only. + * Do NOT use in runtime code paths unless behind `true` flag. + */ + const isSVGTag = /*#__PURE__*/ makeMap(SVG_TAGS); + /** + * Compiler only. + * Do NOT use in runtime code paths unless behind `true` flag. + */ + const isVoidTag = /*#__PURE__*/ makeMap(VOID_TAGS); + + function looseCompareArrays(a, b) { + if (a.length !== b.length) + return false; + let equal = true; + for (let i = 0; equal && i < a.length; i++) { + equal = looseEqual(a[i], b[i]); + } + return equal; + } + function looseEqual(a, b) { + if (a === b) + return true; + let aValidType = isDate(a); + let bValidType = isDate(b); + if (aValidType || bValidType) { + return aValidType && bValidType ? a.getTime() === b.getTime() : false; + } + aValidType = isSymbol(a); + bValidType = isSymbol(b); + if (aValidType || bValidType) { + return a === b; + } + aValidType = isArray(a); + bValidType = isArray(b); + if (aValidType || bValidType) { + return aValidType && bValidType ? looseCompareArrays(a, b) : false; + } + aValidType = isObject(a); + bValidType = isObject(b); + if (aValidType || bValidType) { + /* istanbul ignore if: this if will probably never be called */ + if (!aValidType || !bValidType) { + return false; + } + const aKeysCount = Object.keys(a).length; + const bKeysCount = Object.keys(b).length; + if (aKeysCount !== bKeysCount) { + return false; + } + for (const key in a) { + const aHasKey = a.hasOwnProperty(key); + const bHasKey = b.hasOwnProperty(key); + if ((aHasKey && !bHasKey) || + (!aHasKey && bHasKey) || + !looseEqual(a[key], b[key])) { + return false; + } + } + } + return String(a) === String(b); + } + function looseIndexOf(arr, val) { + return arr.findIndex(item => looseEqual(item, val)); + } + + /** + * For converting {{ interpolation }} values to displayed strings. + * @private + */ + const toDisplayString = (val) => { + return isString(val) + ? val + : val == null + ? '' + : isArray(val) || + (isObject(val) && + (val.toString === objectToString || !isFunction(val.toString))) + ? JSON.stringify(val, replacer, 2) + : String(val); + }; + const replacer = (_key, val) => { + // can't use isRef here since @vue/shared has no deps + if (val && val.__v_isRef) { + return replacer(_key, val.value); + } + else if (isMap(val)) { + return { + [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val]) => { + entries[`${key} =>`] = val; + return entries; + }, {}) + }; + } + else if (isSet(val)) { + return { + [`Set(${val.size})`]: [...val.values()] + }; + } + else if (isObject(val) && !isArray(val) && !isPlainObject(val)) { + return String(val); + } + return val; + }; + + const EMPTY_OBJ = Object.freeze({}) + ; + const EMPTY_ARR = Object.freeze([]) ; + const NOOP = () => { }; + /** + * Always return false. + */ + const NO = () => false; + const onRE = /^on[^a-z]/; + const isOn = (key) => onRE.test(key); + const isModelListener = (key) => key.startsWith('onUpdate:'); + const extend = Object.assign; + const remove = (arr, el) => { + const i = arr.indexOf(el); + if (i > -1) { + arr.splice(i, 1); + } + }; + const hasOwnProperty = Object.prototype.hasOwnProperty; + const hasOwn = (val, key) => hasOwnProperty.call(val, key); + const isArray = Array.isArray; + const isMap = (val) => toTypeString(val) === '[object Map]'; + const isSet = (val) => toTypeString(val) === '[object Set]'; + const isDate = (val) => toTypeString(val) === '[object Date]'; + const isFunction = (val) => typeof val === 'function'; + const isString = (val) => typeof val === 'string'; + const isSymbol = (val) => typeof val === 'symbol'; + const isObject = (val) => val !== null && typeof val === 'object'; + const isPromise = (val) => { + return isObject(val) && isFunction(val.then) && isFunction(val.catch); + }; + const objectToString = Object.prototype.toString; + const toTypeString = (value) => objectToString.call(value); + const toRawType = (value) => { + // extract "RawType" from strings like "[object RawType]" + return toTypeString(value).slice(8, -1); + }; + const isPlainObject = (val) => toTypeString(val) === '[object Object]'; + const isIntegerKey = (key) => isString(key) && + key !== 'NaN' && + key[0] !== '-' && + '' + parseInt(key, 10) === key; + const isReservedProp = /*#__PURE__*/ makeMap( + // the leading comma is intentional so empty string "" is also included + ',key,ref,ref_for,ref_key,' + + 'onVnodeBeforeMount,onVnodeMounted,' + + 'onVnodeBeforeUpdate,onVnodeUpdated,' + + 'onVnodeBeforeUnmount,onVnodeUnmounted'); + const isBuiltInDirective = /*#__PURE__*/ makeMap('bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo'); + const cacheStringFunction = (fn) => { + const cache = Object.create(null); + return ((str) => { + const hit = cache[str]; + return hit || (cache[str] = fn(str)); + }); + }; + const camelizeRE = /-(\w)/g; + /** + * @private + */ + const camelize = cacheStringFunction((str) => { + return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : '')); + }); + const hyphenateRE = /\B([A-Z])/g; + /** + * @private + */ + const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, '-$1').toLowerCase()); + /** + * @private + */ + const capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1)); + /** + * @private + */ + const toHandlerKey = cacheStringFunction((str) => str ? `on${capitalize(str)}` : ``); + // compare whether a value has changed, accounting for NaN. + const hasChanged = (value, oldValue) => !Object.is(value, oldValue); + const invokeArrayFns = (fns, arg) => { + for (let i = 0; i < fns.length; i++) { + fns[i](arg); + } + }; + const def = (obj, key, value) => { + Object.defineProperty(obj, key, { + configurable: true, + enumerable: false, + value + }); + }; + const toNumber = (val) => { + const n = parseFloat(val); + return isNaN(n) ? val : n; + }; + let _globalThis; + const getGlobalThis = () => { + return (_globalThis || + (_globalThis = + typeof globalThis !== 'undefined' + ? globalThis + : typeof self !== 'undefined' + ? self + : typeof window !== 'undefined' + ? window + : typeof global !== 'undefined' + ? global + : {})); + }; + + function warn(msg, ...args) { + console.warn(`[Vue warn] ${msg}`, ...args); + } + + let activeEffectScope; + class EffectScope { + constructor(detached = false) { + /** + * @internal + */ + this.active = true; + /** + * @internal + */ + this.effects = []; + /** + * @internal + */ + this.cleanups = []; + if (!detached && activeEffectScope) { + this.parent = activeEffectScope; + this.index = + (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(this) - 1; + } + } + run(fn) { + if (this.active) { + const currentEffectScope = activeEffectScope; + try { + activeEffectScope = this; + return fn(); + } + finally { + activeEffectScope = currentEffectScope; + } + } + else { + warn(`cannot run an inactive effect scope.`); + } + } + /** + * This should only be called on non-detached scopes + * @internal + */ + on() { + activeEffectScope = this; + } + /** + * This should only be called on non-detached scopes + * @internal + */ + off() { + activeEffectScope = this.parent; + } + stop(fromParent) { + if (this.active) { + let i, l; + for (i = 0, l = this.effects.length; i < l; i++) { + this.effects[i].stop(); + } + for (i = 0, l = this.cleanups.length; i < l; i++) { + this.cleanups[i](); + } + if (this.scopes) { + for (i = 0, l = this.scopes.length; i < l; i++) { + this.scopes[i].stop(true); + } + } + // nested scope, dereference from parent to avoid memory leaks + if (this.parent && !fromParent) { + // optimized O(1) removal + const last = this.parent.scopes.pop(); + if (last && last !== this) { + this.parent.scopes[this.index] = last; + last.index = this.index; + } + } + this.active = false; + } + } + } + function effectScope(detached) { + return new EffectScope(detached); + } + function recordEffectScope(effect, scope = activeEffectScope) { + if (scope && scope.active) { + scope.effects.push(effect); + } + } + function getCurrentScope() { + return activeEffectScope; + } + function onScopeDispose(fn) { + if (activeEffectScope) { + activeEffectScope.cleanups.push(fn); + } + else { + warn(`onScopeDispose() is called when there is no active effect scope` + + ` to be associated with.`); + } + } + + const createDep = (effects) => { + const dep = new Set(effects); + dep.w = 0; + dep.n = 0; + return dep; + }; + const wasTracked = (dep) => (dep.w & trackOpBit) > 0; + const newTracked = (dep) => (dep.n & trackOpBit) > 0; + const initDepMarkers = ({ deps }) => { + if (deps.length) { + for (let i = 0; i < deps.length; i++) { + deps[i].w |= trackOpBit; // set was tracked + } + } + }; + const finalizeDepMarkers = (effect) => { + const { deps } = effect; + if (deps.length) { + let ptr = 0; + for (let i = 0; i < deps.length; i++) { + const dep = deps[i]; + if (wasTracked(dep) && !newTracked(dep)) { + dep.delete(effect); + } + else { + deps[ptr++] = dep; + } + // clear bits + dep.w &= ~trackOpBit; + dep.n &= ~trackOpBit; + } + deps.length = ptr; + } + }; + + const targetMap = new WeakMap(); + // The number of effects currently being tracked recursively. + let effectTrackDepth = 0; + let trackOpBit = 1; + /** + * The bitwise track markers support at most 30 levels of recursion. + * This value is chosen to enable modern JS engines to use a SMI on all platforms. + * When recursion depth is greater, fall back to using a full cleanup. + */ + const maxMarkerBits = 30; + let activeEffect; + const ITERATE_KEY = Symbol('iterate' ); + const MAP_KEY_ITERATE_KEY = Symbol('Map key iterate' ); + class ReactiveEffect { + constructor(fn, scheduler = null, scope) { + this.fn = fn; + this.scheduler = scheduler; + this.active = true; + this.deps = []; + this.parent = undefined; + recordEffectScope(this, scope); + } + run() { + if (!this.active) { + return this.fn(); + } + let parent = activeEffect; + let lastShouldTrack = shouldTrack; + while (parent) { + if (parent === this) { + return; + } + parent = parent.parent; + } + try { + this.parent = activeEffect; + activeEffect = this; + shouldTrack = true; + trackOpBit = 1 << ++effectTrackDepth; + if (effectTrackDepth <= maxMarkerBits) { + initDepMarkers(this); + } + else { + cleanupEffect(this); + } + return this.fn(); + } + finally { + if (effectTrackDepth <= maxMarkerBits) { + finalizeDepMarkers(this); + } + trackOpBit = 1 << --effectTrackDepth; + activeEffect = this.parent; + shouldTrack = lastShouldTrack; + this.parent = undefined; + if (this.deferStop) { + this.stop(); + } + } + } + stop() { + // stopped while running itself - defer the cleanup + if (activeEffect === this) { + this.deferStop = true; + } + else if (this.active) { + cleanupEffect(this); + if (this.onStop) { + this.onStop(); + } + this.active = false; + } + } + } + function cleanupEffect(effect) { + const { deps } = effect; + if (deps.length) { + for (let i = 0; i < deps.length; i++) { + deps[i].delete(effect); + } + deps.length = 0; + } + } + function effect(fn, options) { + if (fn.effect) { + fn = fn.effect.fn; + } + const _effect = new ReactiveEffect(fn); + if (options) { + extend(_effect, options); + if (options.scope) + recordEffectScope(_effect, options.scope); + } + if (!options || !options.lazy) { + _effect.run(); + } + const runner = _effect.run.bind(_effect); + runner.effect = _effect; + return runner; + } + function stop(runner) { + runner.effect.stop(); + } + let shouldTrack = true; + const trackStack = []; + function pauseTracking() { + trackStack.push(shouldTrack); + shouldTrack = false; + } + function resetTracking() { + const last = trackStack.pop(); + shouldTrack = last === undefined ? true : last; + } + function track(target, type, key) { + if (shouldTrack && activeEffect) { + let depsMap = targetMap.get(target); + if (!depsMap) { + targetMap.set(target, (depsMap = new Map())); + } + let dep = depsMap.get(key); + if (!dep) { + depsMap.set(key, (dep = createDep())); + } + const eventInfo = { effect: activeEffect, target, type, key } + ; + trackEffects(dep, eventInfo); + } + } + function trackEffects(dep, debuggerEventExtraInfo) { + let shouldTrack = false; + if (effectTrackDepth <= maxMarkerBits) { + if (!newTracked(dep)) { + dep.n |= trackOpBit; // set newly tracked + shouldTrack = !wasTracked(dep); + } + } + else { + // Full cleanup mode. + shouldTrack = !dep.has(activeEffect); + } + if (shouldTrack) { + dep.add(activeEffect); + activeEffect.deps.push(dep); + if (activeEffect.onTrack) { + activeEffect.onTrack(Object.assign({ effect: activeEffect }, debuggerEventExtraInfo)); + } + } + } + function trigger(target, type, key, newValue, oldValue, oldTarget) { + const depsMap = targetMap.get(target); + if (!depsMap) { + // never been tracked + return; + } + let deps = []; + if (type === "clear" /* CLEAR */) { + // collection being cleared + // trigger all effects for target + deps = [...depsMap.values()]; + } + else if (key === 'length' && isArray(target)) { + depsMap.forEach((dep, key) => { + if (key === 'length' || key >= newValue) { + deps.push(dep); + } + }); + } + else { + // schedule runs for SET | ADD | DELETE + if (key !== void 0) { + deps.push(depsMap.get(key)); + } + // also run for iteration key on ADD | DELETE | Map.SET + switch (type) { + case "add" /* ADD */: + if (!isArray(target)) { + deps.push(depsMap.get(ITERATE_KEY)); + if (isMap(target)) { + deps.push(depsMap.get(MAP_KEY_ITERATE_KEY)); + } + } + else if (isIntegerKey(key)) { + // new index added to array -> length changes + deps.push(depsMap.get('length')); + } + break; + case "delete" /* DELETE */: + if (!isArray(target)) { + deps.push(depsMap.get(ITERATE_KEY)); + if (isMap(target)) { + deps.push(depsMap.get(MAP_KEY_ITERATE_KEY)); + } + } + break; + case "set" /* SET */: + if (isMap(target)) { + deps.push(depsMap.get(ITERATE_KEY)); + } + break; + } + } + const eventInfo = { target, type, key, newValue, oldValue, oldTarget } + ; + if (deps.length === 1) { + if (deps[0]) { + { + triggerEffects(deps[0], eventInfo); + } + } + } + else { + const effects = []; + for (const dep of deps) { + if (dep) { + effects.push(...dep); + } + } + { + triggerEffects(createDep(effects), eventInfo); + } + } + } + function triggerEffects(dep, debuggerEventExtraInfo) { + // spread into array for stabilization + const effects = isArray(dep) ? dep : [...dep]; + for (const effect of effects) { + if (effect.computed) { + triggerEffect(effect, debuggerEventExtraInfo); + } + } + for (const effect of effects) { + if (!effect.computed) { + triggerEffect(effect, debuggerEventExtraInfo); + } + } + } + function triggerEffect(effect, debuggerEventExtraInfo) { + if (effect !== activeEffect || effect.allowRecurse) { + if (effect.onTrigger) { + effect.onTrigger(extend({ effect }, debuggerEventExtraInfo)); + } + if (effect.scheduler) { + effect.scheduler(); + } + else { + effect.run(); + } + } + } + + const isNonTrackableKeys = /*#__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`); + const builtInSymbols = new Set( + /*#__PURE__*/ + Object.getOwnPropertyNames(Symbol) + // ios10.x Object.getOwnPropertyNames(Symbol) can enumerate 'arguments' and 'caller' + // but accessing them on Symbol leads to TypeError because Symbol is a strict mode + // function + .filter(key => key !== 'arguments' && key !== 'caller') + .map(key => Symbol[key]) + .filter(isSymbol)); + const get = /*#__PURE__*/ createGetter(); + const shallowGet = /*#__PURE__*/ createGetter(false, true); + const readonlyGet = /*#__PURE__*/ createGetter(true); + const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true); + const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations(); + function createArrayInstrumentations() { + const instrumentations = {}; + ['includes', 'indexOf', 'lastIndexOf'].forEach(key => { + instrumentations[key] = function (...args) { + const arr = toRaw(this); + for (let i = 0, l = this.length; i < l; i++) { + track(arr, "get" /* GET */, i + ''); + } + // we run the method using the original args first (which may be reactive) + const res = arr[key](...args); + if (res === -1 || res === false) { + // if that didn't work, run it again using raw values. + return arr[key](...args.map(toRaw)); + } + else { + return res; + } + }; + }); + ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(key => { + instrumentations[key] = function (...args) { + pauseTracking(); + const res = toRaw(this)[key].apply(this, args); + resetTracking(); + return res; + }; + }); + return instrumentations; + } + function createGetter(isReadonly = false, shallow = false) { + return function get(target, key, receiver) { + if (key === "__v_isReactive" /* IS_REACTIVE */) { + return !isReadonly; + } + else if (key === "__v_isReadonly" /* IS_READONLY */) { + return isReadonly; + } + else if (key === "__v_isShallow" /* IS_SHALLOW */) { + return shallow; + } + else if (key === "__v_raw" /* RAW */ && + receiver === + (isReadonly + ? shallow + ? shallowReadonlyMap + : readonlyMap + : shallow + ? shallowReactiveMap + : reactiveMap).get(target)) { + return target; + } + const targetIsArray = isArray(target); + if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) { + return Reflect.get(arrayInstrumentations, key, receiver); + } + const res = Reflect.get(target, key, receiver); + if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) { + return res; + } + if (!isReadonly) { + track(target, "get" /* GET */, key); + } + if (shallow) { + return res; + } + if (isRef(res)) { + // ref unwrapping - skip unwrap for Array + integer key. + return targetIsArray && isIntegerKey(key) ? res : res.value; + } + if (isObject(res)) { + // Convert returned value into a proxy as well. we do the isObject check + // here to avoid invalid value warning. Also need to lazy access readonly + // and reactive here to avoid circular dependency. + return isReadonly ? readonly(res) : reactive(res); + } + return res; + }; + } + const set = /*#__PURE__*/ createSetter(); + const shallowSet = /*#__PURE__*/ createSetter(true); + function createSetter(shallow = false) { + return function set(target, key, value, receiver) { + let oldValue = target[key]; + if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) { + return false; + } + if (!shallow && !isReadonly(value)) { + if (!isShallow(value)) { + value = toRaw(value); + oldValue = toRaw(oldValue); + } + if (!isArray(target) && isRef(oldValue) && !isRef(value)) { + oldValue.value = value; + return true; + } + } + const hadKey = isArray(target) && isIntegerKey(key) + ? Number(key) < target.length + : hasOwn(target, key); + const result = Reflect.set(target, key, value, receiver); + // don't trigger if target is something up in the prototype chain of original + if (target === toRaw(receiver)) { + if (!hadKey) { + trigger(target, "add" /* ADD */, key, value); + } + else if (hasChanged(value, oldValue)) { + trigger(target, "set" /* SET */, key, value, oldValue); + } + } + return result; + }; + } + function deleteProperty(target, key) { + const hadKey = hasOwn(target, key); + const oldValue = target[key]; + const result = Reflect.deleteProperty(target, key); + if (result && hadKey) { + trigger(target, "delete" /* DELETE */, key, undefined, oldValue); + } + return result; + } + function has(target, key) { + const result = Reflect.has(target, key); + if (!isSymbol(key) || !builtInSymbols.has(key)) { + track(target, "has" /* HAS */, key); + } + return result; + } + function ownKeys(target) { + track(target, "iterate" /* ITERATE */, isArray(target) ? 'length' : ITERATE_KEY); + return Reflect.ownKeys(target); + } + const mutableHandlers = { + get, + set, + deleteProperty, + has, + ownKeys + }; + const readonlyHandlers = { + get: readonlyGet, + set(target, key) { + { + warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target); + } + return true; + }, + deleteProperty(target, key) { + { + warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target); + } + return true; + } + }; + const shallowReactiveHandlers = /*#__PURE__*/ extend({}, mutableHandlers, { + get: shallowGet, + set: shallowSet + }); + // Props handlers are special in the sense that it should not unwrap top-level + // refs (in order to allow refs to be explicitly passed down), but should + // retain the reactivity of the normal readonly object. + const shallowReadonlyHandlers = /*#__PURE__*/ extend({}, readonlyHandlers, { + get: shallowReadonlyGet + }); + + const toShallow = (value) => value; + const getProto = (v) => Reflect.getPrototypeOf(v); + function get$1(target, key, isReadonly = false, isShallow = false) { + // #1772: readonly(reactive(Map)) should return readonly + reactive version + // of the value + target = target["__v_raw" /* RAW */]; + const rawTarget = toRaw(target); + const rawKey = toRaw(key); + if (!isReadonly) { + if (key !== rawKey) { + track(rawTarget, "get" /* GET */, key); + } + track(rawTarget, "get" /* GET */, rawKey); + } + const { has } = getProto(rawTarget); + const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive; + if (has.call(rawTarget, key)) { + return wrap(target.get(key)); + } + else if (has.call(rawTarget, rawKey)) { + return wrap(target.get(rawKey)); + } + else if (target !== rawTarget) { + // #3602 readonly(reactive(Map)) + // ensure that the nested reactive `Map` can do tracking for itself + target.get(key); + } + } + function has$1(key, isReadonly = false) { + const target = this["__v_raw" /* RAW */]; + const rawTarget = toRaw(target); + const rawKey = toRaw(key); + if (!isReadonly) { + if (key !== rawKey) { + track(rawTarget, "has" /* HAS */, key); + } + track(rawTarget, "has" /* HAS */, rawKey); + } + return key === rawKey + ? target.has(key) + : target.has(key) || target.has(rawKey); + } + function size(target, isReadonly = false) { + target = target["__v_raw" /* RAW */]; + !isReadonly && track(toRaw(target), "iterate" /* ITERATE */, ITERATE_KEY); + return Reflect.get(target, 'size', target); + } + function add(value) { + value = toRaw(value); + const target = toRaw(this); + const proto = getProto(target); + const hadKey = proto.has.call(target, value); + if (!hadKey) { + target.add(value); + trigger(target, "add" /* ADD */, value, value); + } + return this; + } + function set$1(key, value) { + value = toRaw(value); + const target = toRaw(this); + const { has, get } = getProto(target); + let hadKey = has.call(target, key); + if (!hadKey) { + key = toRaw(key); + hadKey = has.call(target, key); + } + else { + checkIdentityKeys(target, has, key); + } + const oldValue = get.call(target, key); + target.set(key, value); + if (!hadKey) { + trigger(target, "add" /* ADD */, key, value); + } + else if (hasChanged(value, oldValue)) { + trigger(target, "set" /* SET */, key, value, oldValue); + } + return this; + } + function deleteEntry(key) { + const target = toRaw(this); + const { has, get } = getProto(target); + let hadKey = has.call(target, key); + if (!hadKey) { + key = toRaw(key); + hadKey = has.call(target, key); + } + else { + checkIdentityKeys(target, has, key); + } + const oldValue = get ? get.call(target, key) : undefined; + // forward the operation before queueing reactions + const result = target.delete(key); + if (hadKey) { + trigger(target, "delete" /* DELETE */, key, undefined, oldValue); + } + return result; + } + function clear() { + const target = toRaw(this); + const hadItems = target.size !== 0; + const oldTarget = isMap(target) + ? new Map(target) + : new Set(target) + ; + // forward the operation before queueing reactions + const result = target.clear(); + if (hadItems) { + trigger(target, "clear" /* CLEAR */, undefined, undefined, oldTarget); + } + return result; + } + function createForEach(isReadonly, isShallow) { + return function forEach(callback, thisArg) { + const observed = this; + const target = observed["__v_raw" /* RAW */]; + const rawTarget = toRaw(target); + const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive; + !isReadonly && track(rawTarget, "iterate" /* ITERATE */, ITERATE_KEY); + return target.forEach((value, key) => { + // important: make sure the callback is + // 1. invoked with the reactive map as `this` and 3rd arg + // 2. the value received should be a corresponding reactive/readonly. + return callback.call(thisArg, wrap(value), wrap(key), observed); + }); + }; + } + function createIterableMethod(method, isReadonly, isShallow) { + return function (...args) { + const target = this["__v_raw" /* RAW */]; + const rawTarget = toRaw(target); + const targetIsMap = isMap(rawTarget); + const isPair = method === 'entries' || (method === Symbol.iterator && targetIsMap); + const isKeyOnly = method === 'keys' && targetIsMap; + const innerIterator = target[method](...args); + const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive; + !isReadonly && + track(rawTarget, "iterate" /* ITERATE */, isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY); + // return a wrapped iterator which returns observed versions of the + // values emitted from the real iterator + return { + // iterator protocol + next() { + const { value, done } = innerIterator.next(); + return done + ? { value, done } + : { + value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value), + done + }; + }, + // iterable protocol + [Symbol.iterator]() { + return this; + } + }; + }; + } + function createReadonlyMethod(type) { + return function (...args) { + { + const key = args[0] ? `on key "${args[0]}" ` : ``; + console.warn(`${capitalize(type)} operation ${key}failed: target is readonly.`, toRaw(this)); + } + return type === "delete" /* DELETE */ ? false : this; + }; + } + function createInstrumentations() { + const mutableInstrumentations = { + get(key) { + return get$1(this, key); + }, + get size() { + return size(this); + }, + has: has$1, + add, + set: set$1, + delete: deleteEntry, + clear, + forEach: createForEach(false, false) + }; + const shallowInstrumentations = { + get(key) { + return get$1(this, key, false, true); + }, + get size() { + return size(this); + }, + has: has$1, + add, + set: set$1, + delete: deleteEntry, + clear, + forEach: createForEach(false, true) + }; + const readonlyInstrumentations = { + get(key) { + return get$1(this, key, true); + }, + get size() { + return size(this, true); + }, + has(key) { + return has$1.call(this, key, true); + }, + add: createReadonlyMethod("add" /* ADD */), + set: createReadonlyMethod("set" /* SET */), + delete: createReadonlyMethod("delete" /* DELETE */), + clear: createReadonlyMethod("clear" /* CLEAR */), + forEach: createForEach(true, false) + }; + const shallowReadonlyInstrumentations = { + get(key) { + return get$1(this, key, true, true); + }, + get size() { + return size(this, true); + }, + has(key) { + return has$1.call(this, key, true); + }, + add: createReadonlyMethod("add" /* ADD */), + set: createReadonlyMethod("set" /* SET */), + delete: createReadonlyMethod("delete" /* DELETE */), + clear: createReadonlyMethod("clear" /* CLEAR */), + forEach: createForEach(true, true) + }; + const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]; + iteratorMethods.forEach(method => { + mutableInstrumentations[method] = createIterableMethod(method, false, false); + readonlyInstrumentations[method] = createIterableMethod(method, true, false); + shallowInstrumentations[method] = createIterableMethod(method, false, true); + shallowReadonlyInstrumentations[method] = createIterableMethod(method, true, true); + }); + return [ + mutableInstrumentations, + readonlyInstrumentations, + shallowInstrumentations, + shallowReadonlyInstrumentations + ]; + } + const [mutableInstrumentations, readonlyInstrumentations, shallowInstrumentations, shallowReadonlyInstrumentations] = /* #__PURE__*/ createInstrumentations(); + function createInstrumentationGetter(isReadonly, shallow) { + const instrumentations = shallow + ? isReadonly + ? shallowReadonlyInstrumentations + : shallowInstrumentations + : isReadonly + ? readonlyInstrumentations + : mutableInstrumentations; + return (target, key, receiver) => { + if (key === "__v_isReactive" /* IS_REACTIVE */) { + return !isReadonly; + } + else if (key === "__v_isReadonly" /* IS_READONLY */) { + return isReadonly; + } + else if (key === "__v_raw" /* RAW */) { + return target; + } + return Reflect.get(hasOwn(instrumentations, key) && key in target + ? instrumentations + : target, key, receiver); + }; + } + const mutableCollectionHandlers = { + get: /*#__PURE__*/ createInstrumentationGetter(false, false) + }; + const shallowCollectionHandlers = { + get: /*#__PURE__*/ createInstrumentationGetter(false, true) + }; + const readonlyCollectionHandlers = { + get: /*#__PURE__*/ createInstrumentationGetter(true, false) + }; + const shallowReadonlyCollectionHandlers = { + get: /*#__PURE__*/ createInstrumentationGetter(true, true) + }; + function checkIdentityKeys(target, has, key) { + const rawKey = toRaw(key); + if (rawKey !== key && has.call(target, rawKey)) { + const type = toRawType(target); + console.warn(`Reactive ${type} contains both the raw and reactive ` + + `versions of the same object${type === `Map` ? ` as keys` : ``}, ` + + `which can lead to inconsistencies. ` + + `Avoid differentiating between the raw and reactive versions ` + + `of an object and only use the reactive version if possible.`); + } + } + + const reactiveMap = new WeakMap(); + const shallowReactiveMap = new WeakMap(); + const readonlyMap = new WeakMap(); + const shallowReadonlyMap = new WeakMap(); + function targetTypeMap(rawType) { + switch (rawType) { + case 'Object': + case 'Array': + return 1 /* COMMON */; + case 'Map': + case 'Set': + case 'WeakMap': + case 'WeakSet': + return 2 /* COLLECTION */; + default: + return 0 /* INVALID */; + } + } + function getTargetType(value) { + return value["__v_skip" /* SKIP */] || !Object.isExtensible(value) + ? 0 /* INVALID */ + : targetTypeMap(toRawType(value)); + } + function reactive(target) { + // if trying to observe a readonly proxy, return the readonly version. + if (isReadonly(target)) { + return target; + } + return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap); + } + /** + * Return a shallowly-reactive copy of the original object, where only the root + * level properties are reactive. It also does not auto-unwrap refs (even at the + * root level). + */ + function shallowReactive(target) { + return createReactiveObject(target, false, shallowReactiveHandlers, shallowCollectionHandlers, shallowReactiveMap); + } + /** + * Creates a readonly copy of the original object. Note the returned copy is not + * made reactive, but `readonly` can be called on an already reactive object. + */ + function readonly(target) { + return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap); + } + /** + * Returns a reactive-copy of the original object, where only the root level + * properties are readonly, and does NOT unwrap refs nor recursively convert + * returned properties. + * This is used for creating the props proxy object for stateful components. + */ + function shallowReadonly(target) { + return createReactiveObject(target, true, shallowReadonlyHandlers, shallowReadonlyCollectionHandlers, shallowReadonlyMap); + } + function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) { + if (!isObject(target)) { + { + console.warn(`value cannot be made reactive: ${String(target)}`); + } + return target; + } + // target is already a Proxy, return it. + // exception: calling readonly() on a reactive object + if (target["__v_raw" /* RAW */] && + !(isReadonly && target["__v_isReactive" /* IS_REACTIVE */])) { + return target; + } + // target already has corresponding Proxy + const existingProxy = proxyMap.get(target); + if (existingProxy) { + return existingProxy; + } + // only specific value types can be observed. + const targetType = getTargetType(target); + if (targetType === 0 /* INVALID */) { + return target; + } + const proxy = new Proxy(target, targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers); + proxyMap.set(target, proxy); + return proxy; + } + function isReactive(value) { + if (isReadonly(value)) { + return isReactive(value["__v_raw" /* RAW */]); + } + return !!(value && value["__v_isReactive" /* IS_REACTIVE */]); + } + function isReadonly(value) { + return !!(value && value["__v_isReadonly" /* IS_READONLY */]); + } + function isShallow(value) { + return !!(value && value["__v_isShallow" /* IS_SHALLOW */]); + } + function isProxy(value) { + return isReactive(value) || isReadonly(value); + } + function toRaw(observed) { + const raw = observed && observed["__v_raw" /* RAW */]; + return raw ? toRaw(raw) : observed; + } + function markRaw(value) { + def(value, "__v_skip" /* SKIP */, true); + return value; + } + const toReactive = (value) => isObject(value) ? reactive(value) : value; + const toReadonly = (value) => isObject(value) ? readonly(value) : value; + + function trackRefValue(ref) { + if (shouldTrack && activeEffect) { + ref = toRaw(ref); + { + trackEffects(ref.dep || (ref.dep = createDep()), { + target: ref, + type: "get" /* GET */, + key: 'value' + }); + } + } + } + function triggerRefValue(ref, newVal) { + ref = toRaw(ref); + if (ref.dep) { + { + triggerEffects(ref.dep, { + target: ref, + type: "set" /* SET */, + key: 'value', + newValue: newVal + }); + } + } + } + function isRef(r) { + return !!(r && r.__v_isRef === true); + } + function ref(value) { + return createRef(value, false); + } + function shallowRef(value) { + return createRef(value, true); + } + function createRef(rawValue, shallow) { + if (isRef(rawValue)) { + return rawValue; + } + return new RefImpl(rawValue, shallow); + } + class RefImpl { + constructor(value, __v_isShallow) { + this.__v_isShallow = __v_isShallow; + this.dep = undefined; + this.__v_isRef = true; + this._rawValue = __v_isShallow ? value : toRaw(value); + this._value = __v_isShallow ? value : toReactive(value); + } + get value() { + trackRefValue(this); + return this._value; + } + set value(newVal) { + newVal = this.__v_isShallow ? newVal : toRaw(newVal); + if (hasChanged(newVal, this._rawValue)) { + this._rawValue = newVal; + this._value = this.__v_isShallow ? newVal : toReactive(newVal); + triggerRefValue(this, newVal); + } + } + } + function triggerRef(ref) { + triggerRefValue(ref, ref.value ); + } + function unref(ref) { + return isRef(ref) ? ref.value : ref; + } + const shallowUnwrapHandlers = { + get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)), + set: (target, key, value, receiver) => { + const oldValue = target[key]; + if (isRef(oldValue) && !isRef(value)) { + oldValue.value = value; + return true; + } + else { + return Reflect.set(target, key, value, receiver); + } + } + }; + function proxyRefs(objectWithRefs) { + return isReactive(objectWithRefs) + ? objectWithRefs + : new Proxy(objectWithRefs, shallowUnwrapHandlers); + } + class CustomRefImpl { + constructor(factory) { + this.dep = undefined; + this.__v_isRef = true; + const { get, set } = factory(() => trackRefValue(this), () => triggerRefValue(this)); + this._get = get; + this._set = set; + } + get value() { + return this._get(); + } + set value(newVal) { + this._set(newVal); + } + } + function customRef(factory) { + return new CustomRefImpl(factory); + } + function toRefs(object) { + if (!isProxy(object)) { + console.warn(`toRefs() expects a reactive object but received a plain one.`); + } + const ret = isArray(object) ? new Array(object.length) : {}; + for (const key in object) { + ret[key] = toRef(object, key); + } + return ret; + } + class ObjectRefImpl { + constructor(_object, _key, _defaultValue) { + this._object = _object; + this._key = _key; + this._defaultValue = _defaultValue; + this.__v_isRef = true; + } + get value() { + const val = this._object[this._key]; + return val === undefined ? this._defaultValue : val; + } + set value(newVal) { + this._object[this._key] = newVal; + } + } + function toRef(object, key, defaultValue) { + const val = object[key]; + return isRef(val) + ? val + : new ObjectRefImpl(object, key, defaultValue); + } + + class ComputedRefImpl { + constructor(getter, _setter, isReadonly, isSSR) { + this._setter = _setter; + this.dep = undefined; + this.__v_isRef = true; + this._dirty = true; + this.effect = new ReactiveEffect(getter, () => { + if (!this._dirty) { + this._dirty = true; + triggerRefValue(this); + } + }); + this.effect.computed = this; + this.effect.active = this._cacheable = !isSSR; + this["__v_isReadonly" /* IS_READONLY */] = isReadonly; + } + get value() { + // the computed ref may get wrapped by other proxies e.g. readonly() #3376 + const self = toRaw(this); + trackRefValue(self); + if (self._dirty || !self._cacheable) { + self._dirty = false; + self._value = self.effect.run(); + } + return self._value; + } + set value(newValue) { + this._setter(newValue); + } + } + function computed(getterOrOptions, debugOptions, isSSR = false) { + let getter; + let setter; + const onlyGetter = isFunction(getterOrOptions); + if (onlyGetter) { + getter = getterOrOptions; + setter = () => { + console.warn('Write operation failed: computed value is readonly'); + } + ; + } + else { + getter = getterOrOptions.get; + setter = getterOrOptions.set; + } + const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR); + if (debugOptions && !isSSR) { + cRef.effect.onTrack = debugOptions.onTrack; + cRef.effect.onTrigger = debugOptions.onTrigger; + } + return cRef; + } + + const stack = []; + function pushWarningContext(vnode) { + stack.push(vnode); + } + function popWarningContext() { + stack.pop(); + } + function warn$1(msg, ...args) { + // avoid props formatting or warn handler tracking deps that might be mutated + // during patch, leading to infinite recursion. + pauseTracking(); + const instance = stack.length ? stack[stack.length - 1].component : null; + const appWarnHandler = instance && instance.appContext.config.warnHandler; + const trace = getComponentTrace(); + if (appWarnHandler) { + callWithErrorHandling(appWarnHandler, instance, 11 /* APP_WARN_HANDLER */, [ + msg + args.join(''), + instance && instance.proxy, + trace + .map(({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`) + .join('\n'), + trace + ]); + } + else { + const warnArgs = [`[Vue warn]: ${msg}`, ...args]; + /* istanbul ignore if */ + if (trace.length && + // avoid spamming console during tests + !false) { + warnArgs.push(`\n`, ...formatTrace(trace)); + } + console.warn(...warnArgs); + } + resetTracking(); + } + function getComponentTrace() { + let currentVNode = stack[stack.length - 1]; + if (!currentVNode) { + return []; + } + // we can't just use the stack because it will be incomplete during updates + // that did not start from the root. Re-construct the parent chain using + // instance parent pointers. + const normalizedStack = []; + while (currentVNode) { + const last = normalizedStack[0]; + if (last && last.vnode === currentVNode) { + last.recurseCount++; + } + else { + normalizedStack.push({ + vnode: currentVNode, + recurseCount: 0 + }); + } + const parentInstance = currentVNode.component && currentVNode.component.parent; + currentVNode = parentInstance && parentInstance.vnode; + } + return normalizedStack; + } + /* istanbul ignore next */ + function formatTrace(trace) { + const logs = []; + trace.forEach((entry, i) => { + logs.push(...(i === 0 ? [] : [`\n`]), ...formatTraceEntry(entry)); + }); + return logs; + } + function formatTraceEntry({ vnode, recurseCount }) { + const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``; + const isRoot = vnode.component ? vnode.component.parent == null : false; + const open = ` at <${formatComponentName(vnode.component, vnode.type, isRoot)}`; + const close = `>` + postfix; + return vnode.props + ? [open, ...formatProps(vnode.props), close] + : [open + close]; + } + /* istanbul ignore next */ + function formatProps(props) { + const res = []; + const keys = Object.keys(props); + keys.slice(0, 3).forEach(key => { + res.push(...formatProp(key, props[key])); + }); + if (keys.length > 3) { + res.push(` ...`); + } + return res; + } + /* istanbul ignore next */ + function formatProp(key, value, raw) { + if (isString(value)) { + value = JSON.stringify(value); + return raw ? value : [`${key}=${value}`]; + } + else if (typeof value === 'number' || + typeof value === 'boolean' || + value == null) { + return raw ? value : [`${key}=${value}`]; + } + else if (isRef(value)) { + value = formatProp(key, toRaw(value.value), true); + return raw ? value : [`${key}=Ref<`, value, `>`]; + } + else if (isFunction(value)) { + return [`${key}=fn${value.name ? `<${value.name}>` : ``}`]; + } + else { + value = toRaw(value); + return raw ? value : [`${key}=`, value]; + } + } + + const ErrorTypeStrings = { + ["sp" /* SERVER_PREFETCH */]: 'serverPrefetch hook', + ["bc" /* BEFORE_CREATE */]: 'beforeCreate hook', + ["c" /* CREATED */]: 'created hook', + ["bm" /* BEFORE_MOUNT */]: 'beforeMount hook', + ["m" /* MOUNTED */]: 'mounted hook', + ["bu" /* BEFORE_UPDATE */]: 'beforeUpdate hook', + ["u" /* UPDATED */]: 'updated', + ["bum" /* BEFORE_UNMOUNT */]: 'beforeUnmount hook', + ["um" /* UNMOUNTED */]: 'unmounted hook', + ["a" /* ACTIVATED */]: 'activated hook', + ["da" /* DEACTIVATED */]: 'deactivated hook', + ["ec" /* ERROR_CAPTURED */]: 'errorCaptured hook', + ["rtc" /* RENDER_TRACKED */]: 'renderTracked hook', + ["rtg" /* RENDER_TRIGGERED */]: 'renderTriggered hook', + [0 /* SETUP_FUNCTION */]: 'setup function', + [1 /* RENDER_FUNCTION */]: 'render function', + [2 /* WATCH_GETTER */]: 'watcher getter', + [3 /* WATCH_CALLBACK */]: 'watcher callback', + [4 /* WATCH_CLEANUP */]: 'watcher cleanup function', + [5 /* NATIVE_EVENT_HANDLER */]: 'native event handler', + [6 /* COMPONENT_EVENT_HANDLER */]: 'component event handler', + [7 /* VNODE_HOOK */]: 'vnode hook', + [8 /* DIRECTIVE_HOOK */]: 'directive hook', + [9 /* TRANSITION_HOOK */]: 'transition hook', + [10 /* APP_ERROR_HANDLER */]: 'app errorHandler', + [11 /* APP_WARN_HANDLER */]: 'app warnHandler', + [12 /* FUNCTION_REF */]: 'ref function', + [13 /* ASYNC_COMPONENT_LOADER */]: 'async component loader', + [14 /* SCHEDULER */]: 'scheduler flush. This is likely a Vue internals bug. ' + + 'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core' + }; + function callWithErrorHandling(fn, instance, type, args) { + let res; + try { + res = args ? fn(...args) : fn(); + } + catch (err) { + handleError(err, instance, type); + } + return res; + } + function callWithAsyncErrorHandling(fn, instance, type, args) { + if (isFunction(fn)) { + const res = callWithErrorHandling(fn, instance, type, args); + if (res && isPromise(res)) { + res.catch(err => { + handleError(err, instance, type); + }); + } + return res; + } + const values = []; + for (let i = 0; i < fn.length; i++) { + values.push(callWithAsyncErrorHandling(fn[i], instance, type, args)); + } + return values; + } + function handleError(err, instance, type, throwInDev = true) { + const contextVNode = instance ? instance.vnode : null; + if (instance) { + let cur = instance.parent; + // the exposed instance is the render proxy to keep it consistent with 2.x + const exposedInstance = instance.proxy; + // in production the hook receives only the error code + const errorInfo = ErrorTypeStrings[type] ; + while (cur) { + const errorCapturedHooks = cur.ec; + if (errorCapturedHooks) { + for (let i = 0; i < errorCapturedHooks.length; i++) { + if (errorCapturedHooks[i](err, exposedInstance, errorInfo) === false) { + return; + } + } + } + cur = cur.parent; + } + // app-level handling + const appErrorHandler = instance.appContext.config.errorHandler; + if (appErrorHandler) { + callWithErrorHandling(appErrorHandler, null, 10 /* APP_ERROR_HANDLER */, [err, exposedInstance, errorInfo]); + return; + } + } + logError(err, type, contextVNode, throwInDev); + } + function logError(err, type, contextVNode, throwInDev = true) { + { + const info = ErrorTypeStrings[type]; + if (contextVNode) { + pushWarningContext(contextVNode); + } + warn$1(`Unhandled error${info ? ` during execution of ${info}` : ``}`); + if (contextVNode) { + popWarningContext(); + } + // crash in dev by default so it's more noticeable + if (throwInDev) { + throw err; + } + else { + console.error(err); + } + } + } + + let isFlushing = false; + let isFlushPending = false; + const queue = []; + let flushIndex = 0; + const pendingPreFlushCbs = []; + let activePreFlushCbs = null; + let preFlushIndex = 0; + const pendingPostFlushCbs = []; + let activePostFlushCbs = null; + let postFlushIndex = 0; + const resolvedPromise = /*#__PURE__*/ Promise.resolve(); + let currentFlushPromise = null; + let currentPreFlushParentJob = null; + const RECURSION_LIMIT = 100; + function nextTick(fn) { + const p = currentFlushPromise || resolvedPromise; + return fn ? p.then(this ? fn.bind(this) : fn) : p; + } + // #2768 + // Use binary-search to find a suitable position in the queue, + // so that the queue maintains the increasing order of job's id, + // which can prevent the job from being skipped and also can avoid repeated patching. + function findInsertionIndex(id) { + // the start index should be `flushIndex + 1` + let start = flushIndex + 1; + let end = queue.length; + while (start < end) { + const middle = (start + end) >>> 1; + const middleJobId = getId(queue[middle]); + middleJobId < id ? (start = middle + 1) : (end = middle); + } + return start; + } + function queueJob(job) { + // the dedupe search uses the startIndex argument of Array.includes() + // by default the search index includes the current job that is being run + // so it cannot recursively trigger itself again. + // if the job is a watch() callback, the search will start with a +1 index to + // allow it recursively trigger itself - it is the user's responsibility to + // ensure it doesn't end up in an infinite loop. + if ((!queue.length || + !queue.includes(job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)) && + job !== currentPreFlushParentJob) { + if (job.id == null) { + queue.push(job); + } + else { + queue.splice(findInsertionIndex(job.id), 0, job); + } + queueFlush(); + } + } + function queueFlush() { + if (!isFlushing && !isFlushPending) { + isFlushPending = true; + currentFlushPromise = resolvedPromise.then(flushJobs); + } + } + function invalidateJob(job) { + const i = queue.indexOf(job); + if (i > flushIndex) { + queue.splice(i, 1); + } + } + function queueCb(cb, activeQueue, pendingQueue, index) { + if (!isArray(cb)) { + if (!activeQueue || + !activeQueue.includes(cb, cb.allowRecurse ? index + 1 : index)) { + pendingQueue.push(cb); + } + } + else { + // if cb is an array, it is a component lifecycle hook which can only be + // triggered by a job, which is already deduped in the main queue, so + // we can skip duplicate check here to improve perf + pendingQueue.push(...cb); + } + queueFlush(); + } + function queuePreFlushCb(cb) { + queueCb(cb, activePreFlushCbs, pendingPreFlushCbs, preFlushIndex); + } + function queuePostFlushCb(cb) { + queueCb(cb, activePostFlushCbs, pendingPostFlushCbs, postFlushIndex); + } + function flushPreFlushCbs(seen, parentJob = null) { + if (pendingPreFlushCbs.length) { + currentPreFlushParentJob = parentJob; + activePreFlushCbs = [...new Set(pendingPreFlushCbs)]; + pendingPreFlushCbs.length = 0; + { + seen = seen || new Map(); + } + for (preFlushIndex = 0; preFlushIndex < activePreFlushCbs.length; preFlushIndex++) { + if (checkRecursiveUpdates(seen, activePreFlushCbs[preFlushIndex])) { + continue; + } + activePreFlushCbs[preFlushIndex](); + } + activePreFlushCbs = null; + preFlushIndex = 0; + currentPreFlushParentJob = null; + // recursively flush until it drains + flushPreFlushCbs(seen, parentJob); + } + } + function flushPostFlushCbs(seen) { + // flush any pre cbs queued during the flush (e.g. pre watchers) + flushPreFlushCbs(); + if (pendingPostFlushCbs.length) { + const deduped = [...new Set(pendingPostFlushCbs)]; + pendingPostFlushCbs.length = 0; + // #1947 already has active queue, nested flushPostFlushCbs call + if (activePostFlushCbs) { + activePostFlushCbs.push(...deduped); + return; + } + activePostFlushCbs = deduped; + { + seen = seen || new Map(); + } + activePostFlushCbs.sort((a, b) => getId(a) - getId(b)); + for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) { + if (checkRecursiveUpdates(seen, activePostFlushCbs[postFlushIndex])) { + continue; + } + activePostFlushCbs[postFlushIndex](); + } + activePostFlushCbs = null; + postFlushIndex = 0; + } + } + const getId = (job) => job.id == null ? Infinity : job.id; + function flushJobs(seen) { + isFlushPending = false; + isFlushing = true; + { + seen = seen || new Map(); + } + flushPreFlushCbs(seen); + // Sort queue before flush. + // This ensures that: + // 1. Components are updated from parent to child. (because parent is always + // created before the child so its render effect will have smaller + // priority number) + // 2. If a component is unmounted during a parent component's update, + // its update can be skipped. + queue.sort((a, b) => getId(a) - getId(b)); + // conditional usage of checkRecursiveUpdate must be determined out of + // try ... catch block since Rollup by default de-optimizes treeshaking + // inside try-catch. This can leave all warning code unshaked. Although + // they would get eventually shaken by a minifier like terser, some minifiers + // would fail to do that (e.g. https://github.com/evanw/esbuild/issues/1610) + const check = (job) => checkRecursiveUpdates(seen, job) + ; + try { + for (flushIndex = 0; flushIndex < queue.length; flushIndex++) { + const job = queue[flushIndex]; + if (job && job.active !== false) { + if (true && check(job)) { + continue; + } + // console.log(`running:`, job.id) + callWithErrorHandling(job, null, 14 /* SCHEDULER */); + } + } + } + finally { + flushIndex = 0; + queue.length = 0; + flushPostFlushCbs(seen); + isFlushing = false; + currentFlushPromise = null; + // some postFlushCb queued jobs! + // keep flushing until it drains. + if (queue.length || + pendingPreFlushCbs.length || + pendingPostFlushCbs.length) { + flushJobs(seen); + } + } + } + function checkRecursiveUpdates(seen, fn) { + if (!seen.has(fn)) { + seen.set(fn, 1); + } + else { + const count = seen.get(fn); + if (count > RECURSION_LIMIT) { + const instance = fn.ownerInstance; + const componentName = instance && getComponentName(instance.type); + warn$1(`Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. ` + + `This means you have a reactive effect that is mutating its own ` + + `dependencies and thus recursively triggering itself. Possible sources ` + + `include component template, render function, updated hook or ` + + `watcher source function.`); + return true; + } + else { + seen.set(fn, count + 1); + } + } + } + + /* eslint-disable no-restricted-globals */ + let isHmrUpdating = false; + const hmrDirtyComponents = new Set(); + // Expose the HMR runtime on the global object + // This makes it entirely tree-shakable without polluting the exports and makes + // it easier to be used in toolings like vue-loader + // Note: for a component to be eligible for HMR it also needs the __hmrId option + // to be set so that its instances can be registered / removed. + { + getGlobalThis().__VUE_HMR_RUNTIME__ = { + createRecord: tryWrap(createRecord), + rerender: tryWrap(rerender), + reload: tryWrap(reload) + }; + } + const map = new Map(); + function registerHMR(instance) { + const id = instance.type.__hmrId; + let record = map.get(id); + if (!record) { + createRecord(id, instance.type); + record = map.get(id); + } + record.instances.add(instance); + } + function unregisterHMR(instance) { + map.get(instance.type.__hmrId).instances.delete(instance); + } + function createRecord(id, initialDef) { + if (map.has(id)) { + return false; + } + map.set(id, { + initialDef: normalizeClassComponent(initialDef), + instances: new Set() + }); + return true; + } + function normalizeClassComponent(component) { + return isClassComponent(component) ? component.__vccOpts : component; + } + function rerender(id, newRender) { + const record = map.get(id); + if (!record) { + return; + } + // update initial record (for not-yet-rendered component) + record.initialDef.render = newRender; + [...record.instances].forEach(instance => { + if (newRender) { + instance.render = newRender; + normalizeClassComponent(instance.type).render = newRender; + } + instance.renderCache = []; + // this flag forces child components with slot content to update + isHmrUpdating = true; + instance.update(); + isHmrUpdating = false; + }); + } + function reload(id, newComp) { + const record = map.get(id); + if (!record) + return; + newComp = normalizeClassComponent(newComp); + // update initial def (for not-yet-rendered components) + updateComponentDef(record.initialDef, newComp); + // create a snapshot which avoids the set being mutated during updates + const instances = [...record.instances]; + for (const instance of instances) { + const oldComp = normalizeClassComponent(instance.type); + if (!hmrDirtyComponents.has(oldComp)) { + // 1. Update existing comp definition to match new one + if (oldComp !== record.initialDef) { + updateComponentDef(oldComp, newComp); + } + // 2. mark definition dirty. This forces the renderer to replace the + // component on patch. + hmrDirtyComponents.add(oldComp); + } + // 3. invalidate options resolution cache + instance.appContext.optionsCache.delete(instance.type); + // 4. actually update + if (instance.ceReload) { + // custom element + hmrDirtyComponents.add(oldComp); + instance.ceReload(newComp.styles); + hmrDirtyComponents.delete(oldComp); + } + else if (instance.parent) { + // 4. Force the parent instance to re-render. This will cause all updated + // components to be unmounted and re-mounted. Queue the update so that we + // don't end up forcing the same parent to re-render multiple times. + queueJob(instance.parent.update); + // instance is the inner component of an async custom element + // invoke to reset styles + if (instance.parent.type.__asyncLoader && + instance.parent.ceReload) { + instance.parent.ceReload(newComp.styles); + } + } + else if (instance.appContext.reload) { + // root instance mounted via createApp() has a reload method + instance.appContext.reload(); + } + else if (typeof window !== 'undefined') { + // root instance inside tree created via raw render(). Force reload. + window.location.reload(); + } + else { + console.warn('[HMR] Root or manually mounted instance modified. Full reload required.'); + } + } + // 5. make sure to cleanup dirty hmr components after update + queuePostFlushCb(() => { + for (const instance of instances) { + hmrDirtyComponents.delete(normalizeClassComponent(instance.type)); + } + }); + } + function updateComponentDef(oldComp, newComp) { + extend(oldComp, newComp); + for (const key in oldComp) { + if (key !== '__file' && !(key in newComp)) { + delete oldComp[key]; + } + } + } + function tryWrap(fn) { + return (id, arg) => { + try { + return fn(id, arg); + } + catch (e) { + console.error(e); + console.warn(`[HMR] Something went wrong during Vue component hot-reload. ` + + `Full reload required.`); + } + }; + } + + let buffer = []; + let devtoolsNotInstalled = false; + function emit(event, ...args) { + if (exports.devtools) { + exports.devtools.emit(event, ...args); + } + else if (!devtoolsNotInstalled) { + buffer.push({ event, args }); + } + } + function setDevtoolsHook(hook, target) { + var _a, _b; + exports.devtools = hook; + if (exports.devtools) { + exports.devtools.enabled = true; + buffer.forEach(({ event, args }) => exports.devtools.emit(event, ...args)); + buffer = []; + } + else if ( + // handle late devtools injection - only do this if we are in an actual + // browser environment to avoid the timer handle stalling test runner exit + // (#4815) + typeof window !== 'undefined' && + // some envs mock window but not fully + window.HTMLElement && + // also exclude jsdom + !((_b = (_a = window.navigator) === null || _a === void 0 ? void 0 : _a.userAgent) === null || _b === void 0 ? void 0 : _b.includes('jsdom'))) { + const replay = (target.__VUE_DEVTOOLS_HOOK_REPLAY__ = + target.__VUE_DEVTOOLS_HOOK_REPLAY__ || []); + replay.push((newHook) => { + setDevtoolsHook(newHook, target); + }); + // clear buffer after 3s - the user probably doesn't have devtools installed + // at all, and keeping the buffer will cause memory leaks (#4738) + setTimeout(() => { + if (!exports.devtools) { + target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null; + devtoolsNotInstalled = true; + buffer = []; + } + }, 3000); + } + else { + // non-browser env, assume not installed + devtoolsNotInstalled = true; + buffer = []; + } + } + function devtoolsInitApp(app, version) { + emit("app:init" /* APP_INIT */, app, version, { + Fragment, + Text, + Comment, + Static + }); + } + function devtoolsUnmountApp(app) { + emit("app:unmount" /* APP_UNMOUNT */, app); + } + const devtoolsComponentAdded = /*#__PURE__*/ createDevtoolsComponentHook("component:added" /* COMPONENT_ADDED */); + const devtoolsComponentUpdated = + /*#__PURE__*/ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */); + const devtoolsComponentRemoved = + /*#__PURE__*/ createDevtoolsComponentHook("component:removed" /* COMPONENT_REMOVED */); + function createDevtoolsComponentHook(hook) { + return (component) => { + emit(hook, component.appContext.app, component.uid, component.parent ? component.parent.uid : undefined, component); + }; + } + const devtoolsPerfStart = /*#__PURE__*/ createDevtoolsPerformanceHook("perf:start" /* PERFORMANCE_START */); + const devtoolsPerfEnd = /*#__PURE__*/ createDevtoolsPerformanceHook("perf:end" /* PERFORMANCE_END */); + function createDevtoolsPerformanceHook(hook) { + return (component, type, time) => { + emit(hook, component.appContext.app, component.uid, component, type, time); + }; + } + function devtoolsComponentEmit(component, event, params) { + emit("component:emit" /* COMPONENT_EMIT */, component.appContext.app, component, event, params); + } + + function emit$1(instance, event, ...rawArgs) { + if (instance.isUnmounted) + return; + const props = instance.vnode.props || EMPTY_OBJ; + { + const { emitsOptions, propsOptions: [propsOptions] } = instance; + if (emitsOptions) { + if (!(event in emitsOptions) && + !(false )) { + if (!propsOptions || !(toHandlerKey(event) in propsOptions)) { + warn$1(`Component emitted event "${event}" but it is neither declared in ` + + `the emits option nor as an "${toHandlerKey(event)}" prop.`); + } + } + else { + const validator = emitsOptions[event]; + if (isFunction(validator)) { + const isValid = validator(...rawArgs); + if (!isValid) { + warn$1(`Invalid event arguments: event validation failed for event "${event}".`); + } + } + } + } + } + let args = rawArgs; + const isModelListener = event.startsWith('update:'); + // for v-model update:xxx events, apply modifiers on args + const modelArg = isModelListener && event.slice(7); + if (modelArg && modelArg in props) { + const modifiersKey = `${modelArg === 'modelValue' ? 'model' : modelArg}Modifiers`; + const { number, trim } = props[modifiersKey] || EMPTY_OBJ; + if (trim) { + args = rawArgs.map(a => a.trim()); + } + if (number) { + args = rawArgs.map(toNumber); + } + } + { + devtoolsComponentEmit(instance, event, args); + } + { + const lowerCaseEvent = event.toLowerCase(); + if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) { + warn$1(`Event "${lowerCaseEvent}" is emitted in component ` + + `${formatComponentName(instance, instance.type)} but the handler is registered for "${event}". ` + + `Note that HTML attributes are case-insensitive and you cannot use ` + + `v-on to listen to camelCase events when using in-DOM templates. ` + + `You should probably use "${hyphenate(event)}" instead of "${event}".`); + } + } + let handlerName; + let handler = props[(handlerName = toHandlerKey(event))] || + // also try camelCase event handler (#2249) + props[(handlerName = toHandlerKey(camelize(event)))]; + // for v-model update:xxx events, also trigger kebab-case equivalent + // for props passed via kebab-case + if (!handler && isModelListener) { + handler = props[(handlerName = toHandlerKey(hyphenate(event)))]; + } + if (handler) { + callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args); + } + const onceHandler = props[handlerName + `Once`]; + if (onceHandler) { + if (!instance.emitted) { + instance.emitted = {}; + } + else if (instance.emitted[handlerName]) { + return; + } + instance.emitted[handlerName] = true; + callWithAsyncErrorHandling(onceHandler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args); + } + } + function normalizeEmitsOptions(comp, appContext, asMixin = false) { + const cache = appContext.emitsCache; + const cached = cache.get(comp); + if (cached !== undefined) { + return cached; + } + const raw = comp.emits; + let normalized = {}; + // apply mixin/extends props + let hasExtends = false; + if (!isFunction(comp)) { + const extendEmits = (raw) => { + const normalizedFromExtend = normalizeEmitsOptions(raw, appContext, true); + if (normalizedFromExtend) { + hasExtends = true; + extend(normalized, normalizedFromExtend); + } + }; + if (!asMixin && appContext.mixins.length) { + appContext.mixins.forEach(extendEmits); + } + if (comp.extends) { + extendEmits(comp.extends); + } + if (comp.mixins) { + comp.mixins.forEach(extendEmits); + } + } + if (!raw && !hasExtends) { + cache.set(comp, null); + return null; + } + if (isArray(raw)) { + raw.forEach(key => (normalized[key] = null)); + } + else { + extend(normalized, raw); + } + cache.set(comp, normalized); + return normalized; + } + // Check if an incoming prop key is a declared emit event listener. + // e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are + // both considered matched listeners. + function isEmitListener(options, key) { + if (!options || !isOn(key)) { + return false; + } + key = key.slice(2).replace(/Once$/, ''); + return (hasOwn(options, key[0].toLowerCase() + key.slice(1)) || + hasOwn(options, hyphenate(key)) || + hasOwn(options, key)); + } + + /** + * mark the current rendering instance for asset resolution (e.g. + * resolveComponent, resolveDirective) during render + */ + let currentRenderingInstance = null; + let currentScopeId = null; + /** + * Note: rendering calls maybe nested. The function returns the parent rendering + * instance if present, which should be restored after the render is done: + * + * ```js + * const prev = setCurrentRenderingInstance(i) + * // ...render + * setCurrentRenderingInstance(prev) + * ``` + */ + function setCurrentRenderingInstance(instance) { + const prev = currentRenderingInstance; + currentRenderingInstance = instance; + currentScopeId = (instance && instance.type.__scopeId) || null; + return prev; + } + /** + * Set scope id when creating hoisted vnodes. + * @private compiler helper + */ + function pushScopeId(id) { + currentScopeId = id; + } + /** + * Technically we no longer need this after 3.0.8 but we need to keep the same + * API for backwards compat w/ code generated by compilers. + * @private + */ + function popScopeId() { + currentScopeId = null; + } + /** + * Only for backwards compat + * @private + */ + const withScopeId = (_id) => withCtx; + /** + * Wrap a slot function to memoize current rendering instance + * @private compiler helper + */ + function withCtx(fn, ctx = currentRenderingInstance, isNonScopedSlot // false only + ) { + if (!ctx) + return fn; + // already normalized + if (fn._n) { + return fn; + } + const renderFnWithContext = (...args) => { + // If a user calls a compiled slot inside a template expression (#1745), it + // can mess up block tracking, so by default we disable block tracking and + // force bail out when invoking a compiled slot (indicated by the ._d flag). + // This isn't necessary if rendering a compiled `<slot>`, so we flip the + // ._d flag off when invoking the wrapped fn inside `renderSlot`. + if (renderFnWithContext._d) { + setBlockTracking(-1); + } + const prevInstance = setCurrentRenderingInstance(ctx); + const res = fn(...args); + setCurrentRenderingInstance(prevInstance); + if (renderFnWithContext._d) { + setBlockTracking(1); + } + { + devtoolsComponentUpdated(ctx); + } + return res; + }; + // mark normalized to avoid duplicated wrapping + renderFnWithContext._n = true; + // mark this as compiled by default + // this is used in vnode.ts -> normalizeChildren() to set the slot + // rendering flag. + renderFnWithContext._c = true; + // disable block tracking by default + renderFnWithContext._d = true; + return renderFnWithContext; + } + + /** + * dev only flag to track whether $attrs was used during render. + * If $attrs was used during render then the warning for failed attrs + * fallthrough can be suppressed. + */ + let accessedAttrs = false; + function markAttrsAccessed() { + accessedAttrs = true; + } + function renderComponentRoot(instance) { + const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx, inheritAttrs } = instance; + let result; + let fallthroughAttrs; + const prev = setCurrentRenderingInstance(instance); + { + accessedAttrs = false; + } + try { + if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) { + // withProxy is a proxy with a different `has` trap only for + // runtime-compiled render functions using `with` block. + const proxyToUse = withProxy || proxy; + result = normalizeVNode(render.call(proxyToUse, proxyToUse, renderCache, props, setupState, data, ctx)); + fallthroughAttrs = attrs; + } + else { + // functional + const render = Component; + // in dev, mark attrs accessed if optional props (attrs === props) + if (true && attrs === props) { + markAttrsAccessed(); + } + result = normalizeVNode(render.length > 1 + ? render(props, true + ? { + get attrs() { + markAttrsAccessed(); + return attrs; + }, + slots, + emit + } + : { attrs, slots, emit }) + : render(props, null /* we know it doesn't need it */)); + fallthroughAttrs = Component.props + ? attrs + : getFunctionalFallthrough(attrs); + } + } + catch (err) { + blockStack.length = 0; + handleError(err, instance, 1 /* RENDER_FUNCTION */); + result = createVNode(Comment); + } + // attr merging + // in dev mode, comments are preserved, and it's possible for a template + // to have comments along side the root element which makes it a fragment + let root = result; + let setRoot = undefined; + if (result.patchFlag > 0 && + result.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) { + [root, setRoot] = getChildRoot(result); + } + if (fallthroughAttrs && inheritAttrs !== false) { + const keys = Object.keys(fallthroughAttrs); + const { shapeFlag } = root; + if (keys.length) { + if (shapeFlag & (1 /* ELEMENT */ | 6 /* COMPONENT */)) { + if (propsOptions && keys.some(isModelListener)) { + // If a v-model listener (onUpdate:xxx) has a corresponding declared + // prop, it indicates this component expects to handle v-model and + // it should not fallthrough. + // related: #1543, #1643, #1989 + fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions); + } + root = cloneVNode(root, fallthroughAttrs); + } + else if (!accessedAttrs && root.type !== Comment) { + const allAttrs = Object.keys(attrs); + const eventAttrs = []; + const extraAttrs = []; + for (let i = 0, l = allAttrs.length; i < l; i++) { + const key = allAttrs[i]; + if (isOn(key)) { + // ignore v-model handlers when they fail to fallthrough + if (!isModelListener(key)) { + // remove `on`, lowercase first letter to reflect event casing + // accurately + eventAttrs.push(key[2].toLowerCase() + key.slice(3)); + } + } + else { + extraAttrs.push(key); + } + } + if (extraAttrs.length) { + warn$1(`Extraneous non-props attributes (` + + `${extraAttrs.join(', ')}) ` + + `were passed to component but could not be automatically inherited ` + + `because component renders fragment or text root nodes.`); + } + if (eventAttrs.length) { + warn$1(`Extraneous non-emits event listeners (` + + `${eventAttrs.join(', ')}) ` + + `were passed to component but could not be automatically inherited ` + + `because component renders fragment or text root nodes. ` + + `If the listener is intended to be a component custom event listener only, ` + + `declare it using the "emits" option.`); + } + } + } + } + // inherit directives + if (vnode.dirs) { + if (!isElementRoot(root)) { + warn$1(`Runtime directive used on component with non-element root node. ` + + `The directives will not function as intended.`); + } + // clone before mutating since the root may be a hoisted vnode + root = cloneVNode(root); + root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs; + } + // inherit transition data + if (vnode.transition) { + if (!isElementRoot(root)) { + warn$1(`Component inside <Transition> renders non-element root node ` + + `that cannot be animated.`); + } + root.transition = vnode.transition; + } + if (setRoot) { + setRoot(root); + } + else { + result = root; + } + setCurrentRenderingInstance(prev); + return result; + } + /** + * dev only + * In dev mode, template root level comments are rendered, which turns the + * template into a fragment root, but we need to locate the single element + * root for attrs and scope id processing. + */ + const getChildRoot = (vnode) => { + const rawChildren = vnode.children; + const dynamicChildren = vnode.dynamicChildren; + const childRoot = filterSingleRoot(rawChildren); + if (!childRoot) { + return [vnode, undefined]; + } + const index = rawChildren.indexOf(childRoot); + const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1; + const setRoot = (updatedRoot) => { + rawChildren[index] = updatedRoot; + if (dynamicChildren) { + if (dynamicIndex > -1) { + dynamicChildren[dynamicIndex] = updatedRoot; + } + else if (updatedRoot.patchFlag > 0) { + vnode.dynamicChildren = [...dynamicChildren, updatedRoot]; + } + } + }; + return [normalizeVNode(childRoot), setRoot]; + }; + function filterSingleRoot(children) { + let singleRoot; + for (let i = 0; i < children.length; i++) { + const child = children[i]; + if (isVNode(child)) { + // ignore user comment + if (child.type !== Comment || child.children === 'v-if') { + if (singleRoot) { + // has more than 1 non-comment child, return now + return; + } + else { + singleRoot = child; + } + } + } + else { + return; + } + } + return singleRoot; + } + const getFunctionalFallthrough = (attrs) => { + let res; + for (const key in attrs) { + if (key === 'class' || key === 'style' || isOn(key)) { + (res || (res = {}))[key] = attrs[key]; + } + } + return res; + }; + const filterModelListeners = (attrs, props) => { + const res = {}; + for (const key in attrs) { + if (!isModelListener(key) || !(key.slice(9) in props)) { + res[key] = attrs[key]; + } + } + return res; + }; + const isElementRoot = (vnode) => { + return (vnode.shapeFlag & (6 /* COMPONENT */ | 1 /* ELEMENT */) || + vnode.type === Comment // potential v-if branch switch + ); + }; + function shouldUpdateComponent(prevVNode, nextVNode, optimized) { + const { props: prevProps, children: prevChildren, component } = prevVNode; + const { props: nextProps, children: nextChildren, patchFlag } = nextVNode; + const emits = component.emitsOptions; + // Parent component's render function was hot-updated. Since this may have + // caused the child component's slots content to have changed, we need to + // force the child to update as well. + if ((prevChildren || nextChildren) && isHmrUpdating) { + return true; + } + // force child update for runtime directive or transition on component vnode. + if (nextVNode.dirs || nextVNode.transition) { + return true; + } + if (optimized && patchFlag >= 0) { + if (patchFlag & 1024 /* DYNAMIC_SLOTS */) { + // slot content that references values that might have changed, + // e.g. in a v-for + return true; + } + if (patchFlag & 16 /* FULL_PROPS */) { + if (!prevProps) { + return !!nextProps; + } + // presence of this flag indicates props are always non-null + return hasPropsChanged(prevProps, nextProps, emits); + } + else if (patchFlag & 8 /* PROPS */) { + const dynamicProps = nextVNode.dynamicProps; + for (let i = 0; i < dynamicProps.length; i++) { + const key = dynamicProps[i]; + if (nextProps[key] !== prevProps[key] && + !isEmitListener(emits, key)) { + return true; + } + } + } + } + else { + // this path is only taken by manually written render functions + // so presence of any children leads to a forced update + if (prevChildren || nextChildren) { + if (!nextChildren || !nextChildren.$stable) { + return true; + } + } + if (prevProps === nextProps) { + return false; + } + if (!prevProps) { + return !!nextProps; + } + if (!nextProps) { + return true; + } + return hasPropsChanged(prevProps, nextProps, emits); + } + return false; + } + function hasPropsChanged(prevProps, nextProps, emitsOptions) { + const nextKeys = Object.keys(nextProps); + if (nextKeys.length !== Object.keys(prevProps).length) { + return true; + } + for (let i = 0; i < nextKeys.length; i++) { + const key = nextKeys[i]; + if (nextProps[key] !== prevProps[key] && + !isEmitListener(emitsOptions, key)) { + return true; + } + } + return false; + } + function updateHOCHostEl({ vnode, parent }, el // HostNode + ) { + while (parent && parent.subTree === vnode) { + (vnode = parent.vnode).el = el; + parent = parent.parent; + } + } + + const isSuspense = (type) => type.__isSuspense; + // Suspense exposes a component-like API, and is treated like a component + // in the compiler, but internally it's a special built-in type that hooks + // directly into the renderer. + const SuspenseImpl = { + name: 'Suspense', + // In order to make Suspense tree-shakable, we need to avoid importing it + // directly in the renderer. The renderer checks for the __isSuspense flag + // on a vnode's type and calls the `process` method, passing in renderer + // internals. + __isSuspense: true, + process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, + // platform-specific impl passed from renderer + rendererInternals) { + if (n1 == null) { + mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals); + } + else { + patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotScopeIds, optimized, rendererInternals); + } + }, + hydrate: hydrateSuspense, + create: createSuspenseBoundary, + normalize: normalizeSuspenseChildren + }; + // Force-casted public typing for h and TSX props inference + const Suspense = (SuspenseImpl ); + function triggerEvent(vnode, name) { + const eventListener = vnode.props && vnode.props[name]; + if (isFunction(eventListener)) { + eventListener(); + } + } + function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) { + const { p: patch, o: { createElement } } = rendererInternals; + const hiddenContainer = createElement('div'); + const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, slotScopeIds, optimized, rendererInternals)); + // start mounting the content subtree in an off-dom container + patch(null, (suspense.pendingBranch = vnode.ssContent), hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds); + // now check if we have encountered any async deps + if (suspense.deps > 0) { + // has async + // invoke @fallback event + triggerEvent(vnode, 'onPending'); + triggerEvent(vnode, 'onFallback'); + // mount the fallback tree + patch(null, vnode.ssFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context + isSVG, slotScopeIds); + setActiveBranch(suspense, vnode.ssFallback); + } + else { + // Suspense has no async deps. Just resolve. + suspense.resolve(); + } + } + function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotScopeIds, optimized, { p: patch, um: unmount, o: { createElement } }) { + const suspense = (n2.suspense = n1.suspense); + suspense.vnode = n2; + n2.el = n1.el; + const newBranch = n2.ssContent; + const newFallback = n2.ssFallback; + const { activeBranch, pendingBranch, isInFallback, isHydrating } = suspense; + if (pendingBranch) { + suspense.pendingBranch = newBranch; + if (isSameVNodeType(newBranch, pendingBranch)) { + // same root type but content may have changed. + patch(pendingBranch, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized); + if (suspense.deps <= 0) { + suspense.resolve(); + } + else if (isInFallback) { + patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context + isSVG, slotScopeIds, optimized); + setActiveBranch(suspense, newFallback); + } + } + else { + // toggled before pending tree is resolved + suspense.pendingId++; + if (isHydrating) { + // if toggled before hydration is finished, the current DOM tree is + // no longer valid. set it as the active branch so it will be unmounted + // when resolved + suspense.isHydrating = false; + suspense.activeBranch = pendingBranch; + } + else { + unmount(pendingBranch, parentComponent, suspense); + } + // increment pending ID. this is used to invalidate async callbacks + // reset suspense state + suspense.deps = 0; + // discard effects from pending branch + suspense.effects.length = 0; + // discard previous container + suspense.hiddenContainer = createElement('div'); + if (isInFallback) { + // already in fallback state + patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized); + if (suspense.deps <= 0) { + suspense.resolve(); + } + else { + patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context + isSVG, slotScopeIds, optimized); + setActiveBranch(suspense, newFallback); + } + } + else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) { + // toggled "back" to current active branch + patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG, slotScopeIds, optimized); + // force resolve + suspense.resolve(true); + } + else { + // switched to a 3rd branch + patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized); + if (suspense.deps <= 0) { + suspense.resolve(); + } + } + } + } + else { + if (activeBranch && isSameVNodeType(newBranch, activeBranch)) { + // root did not change, just normal patch + patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG, slotScopeIds, optimized); + setActiveBranch(suspense, newBranch); + } + else { + // root node toggled + // invoke @pending event + triggerEvent(n2, 'onPending'); + // mount pending branch in off-dom container + suspense.pendingBranch = newBranch; + suspense.pendingId++; + patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized); + if (suspense.deps <= 0) { + // incoming branch has no async deps, resolve now. + suspense.resolve(); + } + else { + const { timeout, pendingId } = suspense; + if (timeout > 0) { + setTimeout(() => { + if (suspense.pendingId === pendingId) { + suspense.fallback(newFallback); + } + }, timeout); + } + else if (timeout === 0) { + suspense.fallback(newFallback); + } + } + } + } + } + let hasWarned = false; + function createSuspenseBoundary(vnode, parent, parentComponent, container, hiddenContainer, anchor, isSVG, slotScopeIds, optimized, rendererInternals, isHydrating = false) { + /* istanbul ignore if */ + if (!hasWarned) { + hasWarned = true; + // @ts-ignore `console.info` cannot be null error + console[console.info ? 'info' : 'log'](`<Suspense> is an experimental feature and its API will likely change.`); + } + const { p: patch, m: move, um: unmount, n: next, o: { parentNode, remove } } = rendererInternals; + const timeout = toNumber(vnode.props && vnode.props.timeout); + const suspense = { + vnode, + parent, + parentComponent, + isSVG, + container, + hiddenContainer, + anchor, + deps: 0, + pendingId: 0, + timeout: typeof timeout === 'number' ? timeout : -1, + activeBranch: null, + pendingBranch: null, + isInFallback: true, + isHydrating, + isUnmounted: false, + effects: [], + resolve(resume = false) { + { + if (!resume && !suspense.pendingBranch) { + throw new Error(`suspense.resolve() is called without a pending branch.`); + } + if (suspense.isUnmounted) { + throw new Error(`suspense.resolve() is called on an already unmounted suspense boundary.`); + } + } + const { vnode, activeBranch, pendingBranch, pendingId, effects, parentComponent, container } = suspense; + if (suspense.isHydrating) { + suspense.isHydrating = false; + } + else if (!resume) { + const delayEnter = activeBranch && + pendingBranch.transition && + pendingBranch.transition.mode === 'out-in'; + if (delayEnter) { + activeBranch.transition.afterLeave = () => { + if (pendingId === suspense.pendingId) { + move(pendingBranch, container, anchor, 0 /* ENTER */); + } + }; + } + // this is initial anchor on mount + let { anchor } = suspense; + // unmount current active tree + if (activeBranch) { + // if the fallback tree was mounted, it may have been moved + // as part of a parent suspense. get the latest anchor for insertion + anchor = next(activeBranch); + unmount(activeBranch, parentComponent, suspense, true); + } + if (!delayEnter) { + // move content from off-dom container to actual container + move(pendingBranch, container, anchor, 0 /* ENTER */); + } + } + setActiveBranch(suspense, pendingBranch); + suspense.pendingBranch = null; + suspense.isInFallback = false; + // flush buffered effects + // check if there is a pending parent suspense + let parent = suspense.parent; + let hasUnresolvedAncestor = false; + while (parent) { + if (parent.pendingBranch) { + // found a pending parent suspense, merge buffered post jobs + // into that parent + parent.effects.push(...effects); + hasUnresolvedAncestor = true; + break; + } + parent = parent.parent; + } + // no pending parent suspense, flush all jobs + if (!hasUnresolvedAncestor) { + queuePostFlushCb(effects); + } + suspense.effects = []; + // invoke @resolve event + triggerEvent(vnode, 'onResolve'); + }, + fallback(fallbackVNode) { + if (!suspense.pendingBranch) { + return; + } + const { vnode, activeBranch, parentComponent, container, isSVG } = suspense; + // invoke @fallback event + triggerEvent(vnode, 'onFallback'); + const anchor = next(activeBranch); + const mountFallback = () => { + if (!suspense.isInFallback) { + return; + } + // mount the fallback tree + patch(null, fallbackVNode, container, anchor, parentComponent, null, // fallback tree will not have suspense context + isSVG, slotScopeIds, optimized); + setActiveBranch(suspense, fallbackVNode); + }; + const delayEnter = fallbackVNode.transition && fallbackVNode.transition.mode === 'out-in'; + if (delayEnter) { + activeBranch.transition.afterLeave = mountFallback; + } + suspense.isInFallback = true; + // unmount current active branch + unmount(activeBranch, parentComponent, null, // no suspense so unmount hooks fire now + true // shouldRemove + ); + if (!delayEnter) { + mountFallback(); + } + }, + move(container, anchor, type) { + suspense.activeBranch && + move(suspense.activeBranch, container, anchor, type); + suspense.container = container; + }, + next() { + return suspense.activeBranch && next(suspense.activeBranch); + }, + registerDep(instance, setupRenderEffect) { + const isInPendingSuspense = !!suspense.pendingBranch; + if (isInPendingSuspense) { + suspense.deps++; + } + const hydratedEl = instance.vnode.el; + instance + .asyncDep.catch(err => { + handleError(err, instance, 0 /* SETUP_FUNCTION */); + }) + .then(asyncSetupResult => { + // retry when the setup() promise resolves. + // component may have been unmounted before resolve. + if (instance.isUnmounted || + suspense.isUnmounted || + suspense.pendingId !== instance.suspenseId) { + return; + } + // retry from this component + instance.asyncResolved = true; + const { vnode } = instance; + { + pushWarningContext(vnode); + } + handleSetupResult(instance, asyncSetupResult, false); + if (hydratedEl) { + // vnode may have been replaced if an update happened before the + // async dep is resolved. + vnode.el = hydratedEl; + } + const placeholder = !hydratedEl && instance.subTree.el; + setupRenderEffect(instance, vnode, + // component may have been moved before resolve. + // if this is not a hydration, instance.subTree will be the comment + // placeholder. + parentNode(hydratedEl || instance.subTree.el), + // anchor will not be used if this is hydration, so only need to + // consider the comment placeholder case. + hydratedEl ? null : next(instance.subTree), suspense, isSVG, optimized); + if (placeholder) { + remove(placeholder); + } + updateHOCHostEl(instance, vnode.el); + { + popWarningContext(); + } + // only decrease deps count if suspense is not already resolved + if (isInPendingSuspense && --suspense.deps === 0) { + suspense.resolve(); + } + }); + }, + unmount(parentSuspense, doRemove) { + suspense.isUnmounted = true; + if (suspense.activeBranch) { + unmount(suspense.activeBranch, parentComponent, parentSuspense, doRemove); + } + if (suspense.pendingBranch) { + unmount(suspense.pendingBranch, parentComponent, parentSuspense, doRemove); + } + } + }; + return suspense; + } + function hydrateSuspense(node, vnode, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals, hydrateNode) { + /* eslint-disable no-restricted-globals */ + const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, node.parentNode, document.createElement('div'), null, isSVG, slotScopeIds, optimized, rendererInternals, true /* hydrating */)); + // there are two possible scenarios for server-rendered suspense: + // - success: ssr content should be fully resolved + // - failure: ssr content should be the fallback branch. + // however, on the client we don't really know if it has failed or not + // attempt to hydrate the DOM assuming it has succeeded, but we still + // need to construct a suspense boundary first + const result = hydrateNode(node, (suspense.pendingBranch = vnode.ssContent), parentComponent, suspense, slotScopeIds, optimized); + if (suspense.deps === 0) { + suspense.resolve(); + } + return result; + /* eslint-enable no-restricted-globals */ + } + function normalizeSuspenseChildren(vnode) { + const { shapeFlag, children } = vnode; + const isSlotChildren = shapeFlag & 32 /* SLOTS_CHILDREN */; + vnode.ssContent = normalizeSuspenseSlot(isSlotChildren ? children.default : children); + vnode.ssFallback = isSlotChildren + ? normalizeSuspenseSlot(children.fallback) + : createVNode(Comment); + } + function normalizeSuspenseSlot(s) { + let block; + if (isFunction(s)) { + const trackBlock = isBlockTreeEnabled && s._c; + if (trackBlock) { + // disableTracking: false + // allow block tracking for compiled slots + // (see ./componentRenderContext.ts) + s._d = false; + openBlock(); + } + s = s(); + if (trackBlock) { + s._d = true; + block = currentBlock; + closeBlock(); + } + } + if (isArray(s)) { + const singleChild = filterSingleRoot(s); + if (!singleChild) { + warn$1(`<Suspense> slots expect a single root node.`); + } + s = singleChild; + } + s = normalizeVNode(s); + if (block && !s.dynamicChildren) { + s.dynamicChildren = block.filter(c => c !== s); + } + return s; + } + function queueEffectWithSuspense(fn, suspense) { + if (suspense && suspense.pendingBranch) { + if (isArray(fn)) { + suspense.effects.push(...fn); + } + else { + suspense.effects.push(fn); + } + } + else { + queuePostFlushCb(fn); + } + } + function setActiveBranch(suspense, branch) { + suspense.activeBranch = branch; + const { vnode, parentComponent } = suspense; + const el = (vnode.el = branch.el); + // in case suspense is the root node of a component, + // recursively update the HOC el + if (parentComponent && parentComponent.subTree === vnode) { + parentComponent.vnode.el = el; + updateHOCHostEl(parentComponent, el); + } + } + + function provide(key, value) { + if (!currentInstance) { + { + warn$1(`provide() can only be used inside setup().`); + } + } + else { + let provides = currentInstance.provides; + // by default an instance inherits its parent's provides object + // but when it needs to provide values of its own, it creates its + // own provides object using parent provides object as prototype. + // this way in `inject` we can simply look up injections from direct + // parent and let the prototype chain do the work. + const parentProvides = currentInstance.parent && currentInstance.parent.provides; + if (parentProvides === provides) { + provides = currentInstance.provides = Object.create(parentProvides); + } + // TS doesn't allow symbol as index type + provides[key] = value; + } + } + function inject(key, defaultValue, treatDefaultAsFactory = false) { + // fallback to `currentRenderingInstance` so that this can be called in + // a functional component + const instance = currentInstance || currentRenderingInstance; + if (instance) { + // #2400 + // to support `app.use` plugins, + // fallback to appContext's `provides` if the instance is at root + const provides = instance.parent == null + ? instance.vnode.appContext && instance.vnode.appContext.provides + : instance.parent.provides; + if (provides && key in provides) { + // TS doesn't allow symbol as index type + return provides[key]; + } + else if (arguments.length > 1) { + return treatDefaultAsFactory && isFunction(defaultValue) + ? defaultValue.call(instance.proxy) + : defaultValue; + } + else { + warn$1(`injection "${String(key)}" not found.`); + } + } + else { + warn$1(`inject() can only be used inside setup() or functional components.`); + } + } + + // Simple effect. + function watchEffect(effect, options) { + return doWatch(effect, null, options); + } + function watchPostEffect(effect, options) { + return doWatch(effect, null, (Object.assign(Object.assign({}, options), { flush: 'post' }) )); + } + function watchSyncEffect(effect, options) { + return doWatch(effect, null, (Object.assign(Object.assign({}, options), { flush: 'sync' }) )); + } + // initial value for watchers to trigger on undefined initial values + const INITIAL_WATCHER_VALUE = {}; + // implementation + function watch(source, cb, options) { + if (!isFunction(cb)) { + warn$1(`\`watch(fn, options?)\` signature has been moved to a separate API. ` + + `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` + + `supports \`watch(source, cb, options?) signature.`); + } + return doWatch(source, cb, options); + } + function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) { + if (!cb) { + if (immediate !== undefined) { + warn$1(`watch() "immediate" option is only respected when using the ` + + `watch(source, callback, options?) signature.`); + } + if (deep !== undefined) { + warn$1(`watch() "deep" option is only respected when using the ` + + `watch(source, callback, options?) signature.`); + } + } + const warnInvalidSource = (s) => { + warn$1(`Invalid watch source: `, s, `A watch source can only be a getter/effect function, a ref, ` + + `a reactive object, or an array of these types.`); + }; + const instance = currentInstance; + let getter; + let forceTrigger = false; + let isMultiSource = false; + if (isRef(source)) { + getter = () => source.value; + forceTrigger = isShallow(source); + } + else if (isReactive(source)) { + getter = () => source; + deep = true; + } + else if (isArray(source)) { + isMultiSource = true; + forceTrigger = source.some(s => isReactive(s) || isShallow(s)); + getter = () => source.map(s => { + if (isRef(s)) { + return s.value; + } + else if (isReactive(s)) { + return traverse(s); + } + else if (isFunction(s)) { + return callWithErrorHandling(s, instance, 2 /* WATCH_GETTER */); + } + else { + warnInvalidSource(s); + } + }); + } + else if (isFunction(source)) { + if (cb) { + // getter with cb + getter = () => callWithErrorHandling(source, instance, 2 /* WATCH_GETTER */); + } + else { + // no cb -> simple effect + getter = () => { + if (instance && instance.isUnmounted) { + return; + } + if (cleanup) { + cleanup(); + } + return callWithAsyncErrorHandling(source, instance, 3 /* WATCH_CALLBACK */, [onCleanup]); + }; + } + } + else { + getter = NOOP; + warnInvalidSource(source); + } + if (cb && deep) { + const baseGetter = getter; + getter = () => traverse(baseGetter()); + } + let cleanup; + let onCleanup = (fn) => { + cleanup = effect.onStop = () => { + callWithErrorHandling(fn, instance, 4 /* WATCH_CLEANUP */); + }; + }; + let oldValue = isMultiSource ? [] : INITIAL_WATCHER_VALUE; + const job = () => { + if (!effect.active) { + return; + } + if (cb) { + // watch(source, cb) + const newValue = effect.run(); + if (deep || + forceTrigger || + (isMultiSource + ? newValue.some((v, i) => hasChanged(v, oldValue[i])) + : hasChanged(newValue, oldValue)) || + (false )) { + // cleanup before running cb again + if (cleanup) { + cleanup(); + } + callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [ + newValue, + // pass undefined as the old value when it's changed for the first time + oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue, + onCleanup + ]); + oldValue = newValue; + } + } + else { + // watchEffect + effect.run(); + } + }; + // important: mark the job as a watcher callback so that scheduler knows + // it is allowed to self-trigger (#1727) + job.allowRecurse = !!cb; + let scheduler; + if (flush === 'sync') { + scheduler = job; // the scheduler function gets called directly + } + else if (flush === 'post') { + scheduler = () => queuePostRenderEffect(job, instance && instance.suspense); + } + else { + // default: 'pre' + scheduler = () => queuePreFlushCb(job); + } + const effect = new ReactiveEffect(getter, scheduler); + { + effect.onTrack = onTrack; + effect.onTrigger = onTrigger; + } + // initial run + if (cb) { + if (immediate) { + job(); + } + else { + oldValue = effect.run(); + } + } + else if (flush === 'post') { + queuePostRenderEffect(effect.run.bind(effect), instance && instance.suspense); + } + else { + effect.run(); + } + return () => { + effect.stop(); + if (instance && instance.scope) { + remove(instance.scope.effects, effect); + } + }; + } + // this.$watch + function instanceWatch(source, value, options) { + const publicThis = this.proxy; + const getter = isString(source) + ? source.includes('.') + ? createPathGetter(publicThis, source) + : () => publicThis[source] + : source.bind(publicThis, publicThis); + let cb; + if (isFunction(value)) { + cb = value; + } + else { + cb = value.handler; + options = value; + } + const cur = currentInstance; + setCurrentInstance(this); + const res = doWatch(getter, cb.bind(publicThis), options); + if (cur) { + setCurrentInstance(cur); + } + else { + unsetCurrentInstance(); + } + return res; + } + function createPathGetter(ctx, path) { + const segments = path.split('.'); + return () => { + let cur = ctx; + for (let i = 0; i < segments.length && cur; i++) { + cur = cur[segments[i]]; + } + return cur; + }; + } + function traverse(value, seen) { + if (!isObject(value) || value["__v_skip" /* SKIP */]) { + return value; + } + seen = seen || new Set(); + if (seen.has(value)) { + return value; + } + seen.add(value); + if (isRef(value)) { + traverse(value.value, seen); + } + else if (isArray(value)) { + for (let i = 0; i < value.length; i++) { + traverse(value[i], seen); + } + } + else if (isSet(value) || isMap(value)) { + value.forEach((v) => { + traverse(v, seen); + }); + } + else if (isPlainObject(value)) { + for (const key in value) { + traverse(value[key], seen); + } + } + return value; + } + + function useTransitionState() { + const state = { + isMounted: false, + isLeaving: false, + isUnmounting: false, + leavingVNodes: new Map() + }; + onMounted(() => { + state.isMounted = true; + }); + onBeforeUnmount(() => { + state.isUnmounting = true; + }); + return state; + } + const TransitionHookValidator = [Function, Array]; + const BaseTransitionImpl = { + name: `BaseTransition`, + props: { + mode: String, + appear: Boolean, + persisted: Boolean, + // enter + onBeforeEnter: TransitionHookValidator, + onEnter: TransitionHookValidator, + onAfterEnter: TransitionHookValidator, + onEnterCancelled: TransitionHookValidator, + // leave + onBeforeLeave: TransitionHookValidator, + onLeave: TransitionHookValidator, + onAfterLeave: TransitionHookValidator, + onLeaveCancelled: TransitionHookValidator, + // appear + onBeforeAppear: TransitionHookValidator, + onAppear: TransitionHookValidator, + onAfterAppear: TransitionHookValidator, + onAppearCancelled: TransitionHookValidator + }, + setup(props, { slots }) { + const instance = getCurrentInstance(); + const state = useTransitionState(); + let prevTransitionKey; + return () => { + const children = slots.default && getTransitionRawChildren(slots.default(), true); + if (!children || !children.length) { + return; + } + let child = children[0]; + if (children.length > 1) { + let hasFound = false; + // locate first non-comment child + for (const c of children) { + if (c.type !== Comment) { + if (hasFound) { + // warn more than one non-comment child + warn$1('<transition> can only be used on a single element or component. ' + + 'Use <transition-group> for lists.'); + break; + } + child = c; + hasFound = true; + } + } + } + // there's no need to track reactivity for these props so use the raw + // props for a bit better perf + const rawProps = toRaw(props); + const { mode } = rawProps; + // check mode + if (mode && + mode !== 'in-out' && + mode !== 'out-in' && + mode !== 'default') { + warn$1(`invalid <transition> mode: ${mode}`); + } + if (state.isLeaving) { + return emptyPlaceholder(child); + } + // in the case of <transition><keep-alive/></transition>, we need to + // compare the type of the kept-alive children. + const innerChild = getKeepAliveChild(child); + if (!innerChild) { + return emptyPlaceholder(child); + } + const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance); + setTransitionHooks(innerChild, enterHooks); + const oldChild = instance.subTree; + const oldInnerChild = oldChild && getKeepAliveChild(oldChild); + let transitionKeyChanged = false; + const { getTransitionKey } = innerChild.type; + if (getTransitionKey) { + const key = getTransitionKey(); + if (prevTransitionKey === undefined) { + prevTransitionKey = key; + } + else if (key !== prevTransitionKey) { + prevTransitionKey = key; + transitionKeyChanged = true; + } + } + // handle mode + if (oldInnerChild && + oldInnerChild.type !== Comment && + (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) { + const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance); + // update old tree's hooks in case of dynamic transition + setTransitionHooks(oldInnerChild, leavingHooks); + // switching between different views + if (mode === 'out-in') { + state.isLeaving = true; + // return placeholder node and queue update when leave finishes + leavingHooks.afterLeave = () => { + state.isLeaving = false; + instance.update(); + }; + return emptyPlaceholder(child); + } + else if (mode === 'in-out' && innerChild.type !== Comment) { + leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => { + const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild); + leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild; + // early removal callback + el._leaveCb = () => { + earlyRemove(); + el._leaveCb = undefined; + delete enterHooks.delayedLeave; + }; + enterHooks.delayedLeave = delayedLeave; + }; + } + } + return child; + }; + } + }; + // export the public type for h/tsx inference + // also to avoid inline import() in generated d.ts files + const BaseTransition = BaseTransitionImpl; + function getLeavingNodesForType(state, vnode) { + const { leavingVNodes } = state; + let leavingVNodesCache = leavingVNodes.get(vnode.type); + if (!leavingVNodesCache) { + leavingVNodesCache = Object.create(null); + leavingVNodes.set(vnode.type, leavingVNodesCache); + } + return leavingVNodesCache; + } + // The transition hooks are attached to the vnode as vnode.transition + // and will be called at appropriate timing in the renderer. + function resolveTransitionHooks(vnode, props, state, instance) { + const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props; + const key = String(vnode.key); + const leavingVNodesCache = getLeavingNodesForType(state, vnode); + const callHook = (hook, args) => { + hook && + callWithAsyncErrorHandling(hook, instance, 9 /* TRANSITION_HOOK */, args); + }; + const callAsyncHook = (hook, args) => { + const done = args[1]; + callHook(hook, args); + if (isArray(hook)) { + if (hook.every(hook => hook.length <= 1)) + done(); + } + else if (hook.length <= 1) { + done(); + } + }; + const hooks = { + mode, + persisted, + beforeEnter(el) { + let hook = onBeforeEnter; + if (!state.isMounted) { + if (appear) { + hook = onBeforeAppear || onBeforeEnter; + } + else { + return; + } + } + // for same element (v-show) + if (el._leaveCb) { + el._leaveCb(true /* cancelled */); + } + // for toggled element with same key (v-if) + const leavingVNode = leavingVNodesCache[key]; + if (leavingVNode && + isSameVNodeType(vnode, leavingVNode) && + leavingVNode.el._leaveCb) { + // force early removal (not cancelled) + leavingVNode.el._leaveCb(); + } + callHook(hook, [el]); + }, + enter(el) { + let hook = onEnter; + let afterHook = onAfterEnter; + let cancelHook = onEnterCancelled; + if (!state.isMounted) { + if (appear) { + hook = onAppear || onEnter; + afterHook = onAfterAppear || onAfterEnter; + cancelHook = onAppearCancelled || onEnterCancelled; + } + else { + return; + } + } + let called = false; + const done = (el._enterCb = (cancelled) => { + if (called) + return; + called = true; + if (cancelled) { + callHook(cancelHook, [el]); + } + else { + callHook(afterHook, [el]); + } + if (hooks.delayedLeave) { + hooks.delayedLeave(); + } + el._enterCb = undefined; + }); + if (hook) { + callAsyncHook(hook, [el, done]); + } + else { + done(); + } + }, + leave(el, remove) { + const key = String(vnode.key); + if (el._enterCb) { + el._enterCb(true /* cancelled */); + } + if (state.isUnmounting) { + return remove(); + } + callHook(onBeforeLeave, [el]); + let called = false; + const done = (el._leaveCb = (cancelled) => { + if (called) + return; + called = true; + remove(); + if (cancelled) { + callHook(onLeaveCancelled, [el]); + } + else { + callHook(onAfterLeave, [el]); + } + el._leaveCb = undefined; + if (leavingVNodesCache[key] === vnode) { + delete leavingVNodesCache[key]; + } + }); + leavingVNodesCache[key] = vnode; + if (onLeave) { + callAsyncHook(onLeave, [el, done]); + } + else { + done(); + } + }, + clone(vnode) { + return resolveTransitionHooks(vnode, props, state, instance); + } + }; + return hooks; + } + // the placeholder really only handles one special case: KeepAlive + // in the case of a KeepAlive in a leave phase we need to return a KeepAlive + // placeholder with empty content to avoid the KeepAlive instance from being + // unmounted. + function emptyPlaceholder(vnode) { + if (isKeepAlive(vnode)) { + vnode = cloneVNode(vnode); + vnode.children = null; + return vnode; + } + } + function getKeepAliveChild(vnode) { + return isKeepAlive(vnode) + ? vnode.children + ? vnode.children[0] + : undefined + : vnode; + } + function setTransitionHooks(vnode, hooks) { + if (vnode.shapeFlag & 6 /* COMPONENT */ && vnode.component) { + setTransitionHooks(vnode.component.subTree, hooks); + } + else if (vnode.shapeFlag & 128 /* SUSPENSE */) { + vnode.ssContent.transition = hooks.clone(vnode.ssContent); + vnode.ssFallback.transition = hooks.clone(vnode.ssFallback); + } + else { + vnode.transition = hooks; + } + } + function getTransitionRawChildren(children, keepComment = false, parentKey) { + let ret = []; + let keyedFragmentCount = 0; + for (let i = 0; i < children.length; i++) { + let child = children[i]; + // #5360 inherit parent key in case of <template v-for> + const key = parentKey == null + ? child.key + : String(parentKey) + String(child.key != null ? child.key : i); + // handle fragment children case, e.g. v-for + if (child.type === Fragment) { + if (child.patchFlag & 128 /* KEYED_FRAGMENT */) + keyedFragmentCount++; + ret = ret.concat(getTransitionRawChildren(child.children, keepComment, key)); + } + // comment placeholders should be skipped, e.g. v-if + else if (keepComment || child.type !== Comment) { + ret.push(key != null ? cloneVNode(child, { key }) : child); + } + } + // #1126 if a transition children list contains multiple sub fragments, these + // fragments will be merged into a flat children array. Since each v-for + // fragment may contain different static bindings inside, we need to de-op + // these children to force full diffs to ensure correct behavior. + if (keyedFragmentCount > 1) { + for (let i = 0; i < ret.length; i++) { + ret[i].patchFlag = -2 /* BAIL */; + } + } + return ret; + } + + // implementation, close to no-op + function defineComponent(options) { + return isFunction(options) ? { setup: options, name: options.name } : options; + } + + const isAsyncWrapper = (i) => !!i.type.__asyncLoader; + function defineAsyncComponent(source) { + if (isFunction(source)) { + source = { loader: source }; + } + const { loader, loadingComponent, errorComponent, delay = 200, timeout, // undefined = never times out + suspensible = true, onError: userOnError } = source; + let pendingRequest = null; + let resolvedComp; + let retries = 0; + const retry = () => { + retries++; + pendingRequest = null; + return load(); + }; + const load = () => { + let thisRequest; + return (pendingRequest || + (thisRequest = pendingRequest = + loader() + .catch(err => { + err = err instanceof Error ? err : new Error(String(err)); + if (userOnError) { + return new Promise((resolve, reject) => { + const userRetry = () => resolve(retry()); + const userFail = () => reject(err); + userOnError(err, userRetry, userFail, retries + 1); + }); + } + else { + throw err; + } + }) + .then((comp) => { + if (thisRequest !== pendingRequest && pendingRequest) { + return pendingRequest; + } + if (!comp) { + warn$1(`Async component loader resolved to undefined. ` + + `If you are using retry(), make sure to return its return value.`); + } + // interop module default + if (comp && + (comp.__esModule || comp[Symbol.toStringTag] === 'Module')) { + comp = comp.default; + } + if (comp && !isObject(comp) && !isFunction(comp)) { + throw new Error(`Invalid async component load result: ${comp}`); + } + resolvedComp = comp; + return comp; + }))); + }; + return defineComponent({ + name: 'AsyncComponentWrapper', + __asyncLoader: load, + get __asyncResolved() { + return resolvedComp; + }, + setup() { + const instance = currentInstance; + // already resolved + if (resolvedComp) { + return () => createInnerComp(resolvedComp, instance); + } + const onError = (err) => { + pendingRequest = null; + handleError(err, instance, 13 /* ASYNC_COMPONENT_LOADER */, !errorComponent /* do not throw in dev if user provided error component */); + }; + // suspense-controlled or SSR. + if ((suspensible && instance.suspense) || + (false )) { + return load() + .then(comp => { + return () => createInnerComp(comp, instance); + }) + .catch(err => { + onError(err); + return () => errorComponent + ? createVNode(errorComponent, { + error: err + }) + : null; + }); + } + const loaded = ref(false); + const error = ref(); + const delayed = ref(!!delay); + if (delay) { + setTimeout(() => { + delayed.value = false; + }, delay); + } + if (timeout != null) { + setTimeout(() => { + if (!loaded.value && !error.value) { + const err = new Error(`Async component timed out after ${timeout}ms.`); + onError(err); + error.value = err; + } + }, timeout); + } + load() + .then(() => { + loaded.value = true; + if (instance.parent && isKeepAlive(instance.parent.vnode)) { + // parent is keep-alive, force update so the loaded component's + // name is taken into account + queueJob(instance.parent.update); + } + }) + .catch(err => { + onError(err); + error.value = err; + }); + return () => { + if (loaded.value && resolvedComp) { + return createInnerComp(resolvedComp, instance); + } + else if (error.value && errorComponent) { + return createVNode(errorComponent, { + error: error.value + }); + } + else if (loadingComponent && !delayed.value) { + return createVNode(loadingComponent); + } + }; + } + }); + } + function createInnerComp(comp, { vnode: { ref, props, children, shapeFlag }, parent }) { + const vnode = createVNode(comp, props, children); + // ensure inner component inherits the async wrapper's ref owner + vnode.ref = ref; + return vnode; + } + + const isKeepAlive = (vnode) => vnode.type.__isKeepAlive; + const KeepAliveImpl = { + name: `KeepAlive`, + // Marker for special handling inside the renderer. We are not using a === + // check directly on KeepAlive in the renderer, because importing it directly + // would prevent it from being tree-shaken. + __isKeepAlive: true, + props: { + include: [String, RegExp, Array], + exclude: [String, RegExp, Array], + max: [String, Number] + }, + setup(props, { slots }) { + const instance = getCurrentInstance(); + // KeepAlive communicates with the instantiated renderer via the + // ctx where the renderer passes in its internals, + // and the KeepAlive instance exposes activate/deactivate implementations. + // The whole point of this is to avoid importing KeepAlive directly in the + // renderer to facilitate tree-shaking. + const sharedContext = instance.ctx; + const cache = new Map(); + const keys = new Set(); + let current = null; + { + instance.__v_cache = cache; + } + const parentSuspense = instance.suspense; + const { renderer: { p: patch, m: move, um: _unmount, o: { createElement } } } = sharedContext; + const storageContainer = createElement('div'); + sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => { + const instance = vnode.component; + move(vnode, container, anchor, 0 /* ENTER */, parentSuspense); + // in case props have changed + patch(instance.vnode, vnode, container, anchor, instance, parentSuspense, isSVG, vnode.slotScopeIds, optimized); + queuePostRenderEffect(() => { + instance.isDeactivated = false; + if (instance.a) { + invokeArrayFns(instance.a); + } + const vnodeHook = vnode.props && vnode.props.onVnodeMounted; + if (vnodeHook) { + invokeVNodeHook(vnodeHook, instance.parent, vnode); + } + }, parentSuspense); + { + // Update components tree + devtoolsComponentAdded(instance); + } + }; + sharedContext.deactivate = (vnode) => { + const instance = vnode.component; + move(vnode, storageContainer, null, 1 /* LEAVE */, parentSuspense); + queuePostRenderEffect(() => { + if (instance.da) { + invokeArrayFns(instance.da); + } + const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted; + if (vnodeHook) { + invokeVNodeHook(vnodeHook, instance.parent, vnode); + } + instance.isDeactivated = true; + }, parentSuspense); + { + // Update components tree + devtoolsComponentAdded(instance); + } + }; + function unmount(vnode) { + // reset the shapeFlag so it can be properly unmounted + resetShapeFlag(vnode); + _unmount(vnode, instance, parentSuspense, true); + } + function pruneCache(filter) { + cache.forEach((vnode, key) => { + const name = getComponentName(vnode.type); + if (name && (!filter || !filter(name))) { + pruneCacheEntry(key); + } + }); + } + function pruneCacheEntry(key) { + const cached = cache.get(key); + if (!current || cached.type !== current.type) { + unmount(cached); + } + else if (current) { + // current active instance should no longer be kept-alive. + // we can't unmount it now but it might be later, so reset its flag now. + resetShapeFlag(current); + } + cache.delete(key); + keys.delete(key); + } + // prune cache on include/exclude prop change + watch(() => [props.include, props.exclude], ([include, exclude]) => { + include && pruneCache(name => matches(include, name)); + exclude && pruneCache(name => !matches(exclude, name)); + }, + // prune post-render after `current` has been updated + { flush: 'post', deep: true }); + // cache sub tree after render + let pendingCacheKey = null; + const cacheSubtree = () => { + // fix #1621, the pendingCacheKey could be 0 + if (pendingCacheKey != null) { + cache.set(pendingCacheKey, getInnerChild(instance.subTree)); + } + }; + onMounted(cacheSubtree); + onUpdated(cacheSubtree); + onBeforeUnmount(() => { + cache.forEach(cached => { + const { subTree, suspense } = instance; + const vnode = getInnerChild(subTree); + if (cached.type === vnode.type) { + // current instance will be unmounted as part of keep-alive's unmount + resetShapeFlag(vnode); + // but invoke its deactivated hook here + const da = vnode.component.da; + da && queuePostRenderEffect(da, suspense); + return; + } + unmount(cached); + }); + }); + return () => { + pendingCacheKey = null; + if (!slots.default) { + return null; + } + const children = slots.default(); + const rawVNode = children[0]; + if (children.length > 1) { + { + warn$1(`KeepAlive should contain exactly one component child.`); + } + current = null; + return children; + } + else if (!isVNode(rawVNode) || + (!(rawVNode.shapeFlag & 4 /* STATEFUL_COMPONENT */) && + !(rawVNode.shapeFlag & 128 /* SUSPENSE */))) { + current = null; + return rawVNode; + } + let vnode = getInnerChild(rawVNode); + const comp = vnode.type; + // for async components, name check should be based in its loaded + // inner component if available + const name = getComponentName(isAsyncWrapper(vnode) + ? vnode.type.__asyncResolved || {} + : comp); + const { include, exclude, max } = props; + if ((include && (!name || !matches(include, name))) || + (exclude && name && matches(exclude, name))) { + current = vnode; + return rawVNode; + } + const key = vnode.key == null ? comp : vnode.key; + const cachedVNode = cache.get(key); + // clone vnode if it's reused because we are going to mutate it + if (vnode.el) { + vnode = cloneVNode(vnode); + if (rawVNode.shapeFlag & 128 /* SUSPENSE */) { + rawVNode.ssContent = vnode; + } + } + // #1513 it's possible for the returned vnode to be cloned due to attr + // fallthrough or scopeId, so the vnode here may not be the final vnode + // that is mounted. Instead of caching it directly, we store the pending + // key and cache `instance.subTree` (the normalized vnode) in + // beforeMount/beforeUpdate hooks. + pendingCacheKey = key; + if (cachedVNode) { + // copy over mounted state + vnode.el = cachedVNode.el; + vnode.component = cachedVNode.component; + if (vnode.transition) { + // recursively update transition hooks on subTree + setTransitionHooks(vnode, vnode.transition); + } + // avoid vnode being mounted as fresh + vnode.shapeFlag |= 512 /* COMPONENT_KEPT_ALIVE */; + // make this key the freshest + keys.delete(key); + keys.add(key); + } + else { + keys.add(key); + // prune oldest entry + if (max && keys.size > parseInt(max, 10)) { + pruneCacheEntry(keys.values().next().value); + } + } + // avoid vnode being unmounted + vnode.shapeFlag |= 256 /* COMPONENT_SHOULD_KEEP_ALIVE */; + current = vnode; + return isSuspense(rawVNode.type) ? rawVNode : vnode; + }; + } + }; + // export the public type for h/tsx inference + // also to avoid inline import() in generated d.ts files + const KeepAlive = KeepAliveImpl; + function matches(pattern, name) { + if (isArray(pattern)) { + return pattern.some((p) => matches(p, name)); + } + else if (isString(pattern)) { + return pattern.split(',').includes(name); + } + else if (pattern.test) { + return pattern.test(name); + } + /* istanbul ignore next */ + return false; + } + function onActivated(hook, target) { + registerKeepAliveHook(hook, "a" /* ACTIVATED */, target); + } + function onDeactivated(hook, target) { + registerKeepAliveHook(hook, "da" /* DEACTIVATED */, target); + } + function registerKeepAliveHook(hook, type, target = currentInstance) { + // cache the deactivate branch check wrapper for injected hooks so the same + // hook can be properly deduped by the scheduler. "__wdc" stands for "with + // deactivation check". + const wrappedHook = hook.__wdc || + (hook.__wdc = () => { + // only fire the hook if the target instance is NOT in a deactivated branch. + let current = target; + while (current) { + if (current.isDeactivated) { + return; + } + current = current.parent; + } + return hook(); + }); + injectHook(type, wrappedHook, target); + // In addition to registering it on the target instance, we walk up the parent + // chain and register it on all ancestor instances that are keep-alive roots. + // This avoids the need to walk the entire component tree when invoking these + // hooks, and more importantly, avoids the need to track child components in + // arrays. + if (target) { + let current = target.parent; + while (current && current.parent) { + if (isKeepAlive(current.parent.vnode)) { + injectToKeepAliveRoot(wrappedHook, type, target, current); + } + current = current.parent; + } + } + } + function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) { + // injectHook wraps the original for error handling, so make sure to remove + // the wrapped version. + const injected = injectHook(type, hook, keepAliveRoot, true /* prepend */); + onUnmounted(() => { + remove(keepAliveRoot[type], injected); + }, target); + } + function resetShapeFlag(vnode) { + let shapeFlag = vnode.shapeFlag; + if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) { + shapeFlag -= 256 /* COMPONENT_SHOULD_KEEP_ALIVE */; + } + if (shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) { + shapeFlag -= 512 /* COMPONENT_KEPT_ALIVE */; + } + vnode.shapeFlag = shapeFlag; + } + function getInnerChild(vnode) { + return vnode.shapeFlag & 128 /* SUSPENSE */ ? vnode.ssContent : vnode; + } + + function injectHook(type, hook, target = currentInstance, prepend = false) { + if (target) { + const hooks = target[type] || (target[type] = []); + // cache the error handling wrapper for injected hooks so the same hook + // can be properly deduped by the scheduler. "__weh" stands for "with error + // handling". + const wrappedHook = hook.__weh || + (hook.__weh = (...args) => { + if (target.isUnmounted) { + return; + } + // disable tracking inside all lifecycle hooks + // since they can potentially be called inside effects. + pauseTracking(); + // Set currentInstance during hook invocation. + // This assumes the hook does not synchronously trigger other hooks, which + // can only be false when the user does something really funky. + setCurrentInstance(target); + const res = callWithAsyncErrorHandling(hook, target, type, args); + unsetCurrentInstance(); + resetTracking(); + return res; + }); + if (prepend) { + hooks.unshift(wrappedHook); + } + else { + hooks.push(wrappedHook); + } + return wrappedHook; + } + else { + const apiName = toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, '')); + warn$1(`${apiName} is called when there is no active component instance to be ` + + `associated with. ` + + `Lifecycle injection APIs can only be used during execution of setup().` + + (` If you are using async setup(), make sure to register lifecycle ` + + `hooks before the first await statement.` + )); + } + } + const createHook = (lifecycle) => (hook, target = currentInstance) => + // post-create lifecycle registrations are noops during SSR (except for serverPrefetch) + (!isInSSRComponentSetup || lifecycle === "sp" /* SERVER_PREFETCH */) && + injectHook(lifecycle, hook, target); + const onBeforeMount = createHook("bm" /* BEFORE_MOUNT */); + const onMounted = createHook("m" /* MOUNTED */); + const onBeforeUpdate = createHook("bu" /* BEFORE_UPDATE */); + const onUpdated = createHook("u" /* UPDATED */); + const onBeforeUnmount = createHook("bum" /* BEFORE_UNMOUNT */); + const onUnmounted = createHook("um" /* UNMOUNTED */); + const onServerPrefetch = createHook("sp" /* SERVER_PREFETCH */); + const onRenderTriggered = createHook("rtg" /* RENDER_TRIGGERED */); + const onRenderTracked = createHook("rtc" /* RENDER_TRACKED */); + function onErrorCaptured(hook, target = currentInstance) { + injectHook("ec" /* ERROR_CAPTURED */, hook, target); + } + + /** + Runtime helper for applying directives to a vnode. Example usage: + + const comp = resolveComponent('comp') + const foo = resolveDirective('foo') + const bar = resolveDirective('bar') + + return withDirectives(h(comp), [ + [foo, this.x], + [bar, this.y] + ]) + */ + function validateDirectiveName(name) { + if (isBuiltInDirective(name)) { + warn$1('Do not use built-in directive ids as custom directive id: ' + name); + } + } + /** + * Adds directives to a VNode. + */ + function withDirectives(vnode, directives) { + const internalInstance = currentRenderingInstance; + if (internalInstance === null) { + warn$1(`withDirectives can only be used inside render functions.`); + return vnode; + } + const instance = getExposeProxy(internalInstance) || + internalInstance.proxy; + const bindings = vnode.dirs || (vnode.dirs = []); + for (let i = 0; i < directives.length; i++) { + let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]; + if (isFunction(dir)) { + dir = { + mounted: dir, + updated: dir + }; + } + if (dir.deep) { + traverse(value); + } + bindings.push({ + dir, + instance, + value, + oldValue: void 0, + arg, + modifiers + }); + } + return vnode; + } + function invokeDirectiveHook(vnode, prevVNode, instance, name) { + const bindings = vnode.dirs; + const oldBindings = prevVNode && prevVNode.dirs; + for (let i = 0; i < bindings.length; i++) { + const binding = bindings[i]; + if (oldBindings) { + binding.oldValue = oldBindings[i].value; + } + let hook = binding.dir[name]; + if (hook) { + // disable tracking inside all lifecycle hooks + // since they can potentially be called inside effects. + pauseTracking(); + callWithAsyncErrorHandling(hook, instance, 8 /* DIRECTIVE_HOOK */, [ + vnode.el, + binding, + vnode, + prevVNode + ]); + resetTracking(); + } + } + } + + const COMPONENTS = 'components'; + const DIRECTIVES = 'directives'; + /** + * @private + */ + function resolveComponent(name, maybeSelfReference) { + return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name; + } + const NULL_DYNAMIC_COMPONENT = Symbol(); + /** + * @private + */ + function resolveDynamicComponent(component) { + if (isString(component)) { + return resolveAsset(COMPONENTS, component, false) || component; + } + else { + // invalid types will fallthrough to createVNode and raise warning + return (component || NULL_DYNAMIC_COMPONENT); + } + } + /** + * @private + */ + function resolveDirective(name) { + return resolveAsset(DIRECTIVES, name); + } + // implementation + function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) { + const instance = currentRenderingInstance || currentInstance; + if (instance) { + const Component = instance.type; + // explicit self name has highest priority + if (type === COMPONENTS) { + const selfName = getComponentName(Component); + if (selfName && + (selfName === name || + selfName === camelize(name) || + selfName === capitalize(camelize(name)))) { + return Component; + } + } + const res = + // local registration + // check instance[type] first which is resolved for options API + resolve(instance[type] || Component[type], name) || + // global registration + resolve(instance.appContext[type], name); + if (!res && maybeSelfReference) { + // fallback to implicit self-reference + return Component; + } + if (warnMissing && !res) { + const extra = type === COMPONENTS + ? `\nIf this is a native custom element, make sure to exclude it from ` + + `component resolution via compilerOptions.isCustomElement.` + : ``; + warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`); + } + return res; + } + else { + warn$1(`resolve${capitalize(type.slice(0, -1))} ` + + `can only be used in render() or setup().`); + } + } + function resolve(registry, name) { + return (registry && + (registry[name] || + registry[camelize(name)] || + registry[capitalize(camelize(name))])); + } + + /** + * Actual implementation + */ + function renderList(source, renderItem, cache, index) { + let ret; + const cached = (cache && cache[index]); + if (isArray(source) || isString(source)) { + ret = new Array(source.length); + for (let i = 0, l = source.length; i < l; i++) { + ret[i] = renderItem(source[i], i, undefined, cached && cached[i]); + } + } + else if (typeof source === 'number') { + if (!Number.isInteger(source)) { + warn$1(`The v-for range expect an integer value but got ${source}.`); + } + ret = new Array(source); + for (let i = 0; i < source; i++) { + ret[i] = renderItem(i + 1, i, undefined, cached && cached[i]); + } + } + else if (isObject(source)) { + if (source[Symbol.iterator]) { + ret = Array.from(source, (item, i) => renderItem(item, i, undefined, cached && cached[i])); + } + else { + const keys = Object.keys(source); + ret = new Array(keys.length); + for (let i = 0, l = keys.length; i < l; i++) { + const key = keys[i]; + ret[i] = renderItem(source[key], key, i, cached && cached[i]); + } + } + } + else { + ret = []; + } + if (cache) { + cache[index] = ret; + } + return ret; + } + + /** + * Compiler runtime helper for creating dynamic slots object + * @private + */ + function createSlots(slots, dynamicSlots) { + for (let i = 0; i < dynamicSlots.length; i++) { + const slot = dynamicSlots[i]; + // array of dynamic slot generated by <template v-for="..." #[...]> + if (isArray(slot)) { + for (let j = 0; j < slot.length; j++) { + slots[slot[j].name] = slot[j].fn; + } + } + else if (slot) { + // conditional single slot generated by <template v-if="..." #foo> + slots[slot.name] = slot.fn; + } + } + return slots; + } + + /** + * Compiler runtime helper for rendering `<slot/>` + * @private + */ + function renderSlot(slots, name, props = {}, + // this is not a user-facing function, so the fallback is always generated by + // the compiler and guaranteed to be a function returning an array + fallback, noSlotted) { + if (currentRenderingInstance.isCE || + (currentRenderingInstance.parent && + isAsyncWrapper(currentRenderingInstance.parent) && + currentRenderingInstance.parent.isCE)) { + return createVNode('slot', name === 'default' ? null : { name }, fallback && fallback()); + } + let slot = slots[name]; + if (slot && slot.length > 1) { + warn$1(`SSR-optimized slot function detected in a non-SSR-optimized render ` + + `function. You need to mark this component with $dynamic-slots in the ` + + `parent template.`); + slot = () => []; + } + // a compiled slot disables block tracking by default to avoid manual + // invocation interfering with template-based block tracking, but in + // `renderSlot` we can be sure that it's template-based so we can force + // enable it. + if (slot && slot._c) { + slot._d = false; + } + openBlock(); + const validSlotContent = slot && ensureValidVNode(slot(props)); + const rendered = createBlock(Fragment, { key: props.key || `_${name}` }, validSlotContent || (fallback ? fallback() : []), validSlotContent && slots._ === 1 /* STABLE */ + ? 64 /* STABLE_FRAGMENT */ + : -2 /* BAIL */); + if (!noSlotted && rendered.scopeId) { + rendered.slotScopeIds = [rendered.scopeId + '-s']; + } + if (slot && slot._c) { + slot._d = true; + } + return rendered; + } + function ensureValidVNode(vnodes) { + return vnodes.some(child => { + if (!isVNode(child)) + return true; + if (child.type === Comment) + return false; + if (child.type === Fragment && + !ensureValidVNode(child.children)) + return false; + return true; + }) + ? vnodes + : null; + } + + /** + * For prefixing keys in v-on="obj" with "on" + * @private + */ + function toHandlers(obj) { + const ret = {}; + if (!isObject(obj)) { + warn$1(`v-on with no argument expects an object value.`); + return ret; + } + for (const key in obj) { + ret[toHandlerKey(key)] = obj[key]; + } + return ret; + } + + /** + * #2437 In Vue 3, functional components do not have a public instance proxy but + * they exist in the internal parent chain. For code that relies on traversing + * public $parent chains, skip functional ones and go to the parent instead. + */ + const getPublicInstance = (i) => { + if (!i) + return null; + if (isStatefulComponent(i)) + return getExposeProxy(i) || i.proxy; + return getPublicInstance(i.parent); + }; + const publicPropertiesMap = + // Move PURE marker to new line to workaround compiler discarding it + // due to type annotation + /*#__PURE__*/ extend(Object.create(null), { + $: i => i, + $el: i => i.vnode.el, + $data: i => i.data, + $props: i => (shallowReadonly(i.props) ), + $attrs: i => (shallowReadonly(i.attrs) ), + $slots: i => (shallowReadonly(i.slots) ), + $refs: i => (shallowReadonly(i.refs) ), + $parent: i => getPublicInstance(i.parent), + $root: i => getPublicInstance(i.root), + $emit: i => i.emit, + $options: i => (resolveMergedOptions(i) ), + $forceUpdate: i => i.f || (i.f = () => queueJob(i.update)), + $nextTick: i => i.n || (i.n = nextTick.bind(i.proxy)), + $watch: i => (instanceWatch.bind(i) ) + }); + const isReservedPrefix = (key) => key === '_' || key === '$'; + const PublicInstanceProxyHandlers = { + get({ _: instance }, key) { + const { ctx, setupState, data, props, accessCache, type, appContext } = instance; + // for internal formatters to know that this is a Vue instance + if (key === '__isVue') { + return true; + } + // prioritize <script setup> bindings during dev. + // this allows even properties that start with _ or $ to be used - so that + // it aligns with the production behavior where the render fn is inlined and + // indeed has access to all declared variables. + if (setupState !== EMPTY_OBJ && + setupState.__isScriptSetup && + hasOwn(setupState, key)) { + return setupState[key]; + } + // data / props / ctx + // This getter gets called for every property access on the render context + // during render and is a major hotspot. The most expensive part of this + // is the multiple hasOwn() calls. It's much faster to do a simple property + // access on a plain object, so we use an accessCache object (with null + // prototype) to memoize what access type a key corresponds to. + let normalizedProps; + if (key[0] !== '$') { + const n = accessCache[key]; + if (n !== undefined) { + switch (n) { + case 1 /* SETUP */: + return setupState[key]; + case 2 /* DATA */: + return data[key]; + case 4 /* CONTEXT */: + return ctx[key]; + case 3 /* PROPS */: + return props[key]; + // default: just fallthrough + } + } + else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) { + accessCache[key] = 1 /* SETUP */; + return setupState[key]; + } + else if (data !== EMPTY_OBJ && hasOwn(data, key)) { + accessCache[key] = 2 /* DATA */; + return data[key]; + } + else if ( + // only cache other properties when instance has declared (thus stable) + // props + (normalizedProps = instance.propsOptions[0]) && + hasOwn(normalizedProps, key)) { + accessCache[key] = 3 /* PROPS */; + return props[key]; + } + else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) { + accessCache[key] = 4 /* CONTEXT */; + return ctx[key]; + } + else if (shouldCacheAccess) { + accessCache[key] = 0 /* OTHER */; + } + } + const publicGetter = publicPropertiesMap[key]; + let cssModule, globalProperties; + // public $xxx properties + if (publicGetter) { + if (key === '$attrs') { + track(instance, "get" /* GET */, key); + markAttrsAccessed(); + } + return publicGetter(instance); + } + else if ( + // css module (injected by vue-loader) + (cssModule = type.__cssModules) && + (cssModule = cssModule[key])) { + return cssModule; + } + else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) { + // user may set custom properties to `this` that start with `$` + accessCache[key] = 4 /* CONTEXT */; + return ctx[key]; + } + else if ( + // global properties + ((globalProperties = appContext.config.globalProperties), + hasOwn(globalProperties, key))) { + { + return globalProperties[key]; + } + } + else if (currentRenderingInstance && + (!isString(key) || + // #1091 avoid internal isRef/isVNode checks on component instance leading + // to infinite warning loop + key.indexOf('__v') !== 0)) { + if (data !== EMPTY_OBJ && isReservedPrefix(key[0]) && hasOwn(data, key)) { + warn$1(`Property ${JSON.stringify(key)} must be accessed via $data because it starts with a reserved ` + + `character ("$" or "_") and is not proxied on the render context.`); + } + else if (instance === currentRenderingInstance) { + warn$1(`Property ${JSON.stringify(key)} was accessed during render ` + + `but is not defined on instance.`); + } + } + }, + set({ _: instance }, key, value) { + const { data, setupState, ctx } = instance; + if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) { + setupState[key] = value; + return true; + } + else if (data !== EMPTY_OBJ && hasOwn(data, key)) { + data[key] = value; + return true; + } + else if (hasOwn(instance.props, key)) { + warn$1(`Attempting to mutate prop "${key}". Props are readonly.`, instance); + return false; + } + if (key[0] === '$' && key.slice(1) in instance) { + warn$1(`Attempting to mutate public property "${key}". ` + + `Properties starting with $ are reserved and readonly.`, instance); + return false; + } + else { + if (key in instance.appContext.config.globalProperties) { + Object.defineProperty(ctx, key, { + enumerable: true, + configurable: true, + value + }); + } + else { + ctx[key] = value; + } + } + return true; + }, + has({ _: { data, setupState, accessCache, ctx, appContext, propsOptions } }, key) { + let normalizedProps; + return (!!accessCache[key] || + (data !== EMPTY_OBJ && hasOwn(data, key)) || + (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) || + ((normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key)) || + hasOwn(ctx, key) || + hasOwn(publicPropertiesMap, key) || + hasOwn(appContext.config.globalProperties, key)); + }, + defineProperty(target, key, descriptor) { + if (descriptor.get != null) { + // invalidate key cache of a getter based property #5417 + target._.accessCache[key] = 0; + } + else if (hasOwn(descriptor, 'value')) { + this.set(target, key, descriptor.value, null); + } + return Reflect.defineProperty(target, key, descriptor); + } + }; + { + PublicInstanceProxyHandlers.ownKeys = (target) => { + warn$1(`Avoid app logic that relies on enumerating keys on a component instance. ` + + `The keys will be empty in production mode to avoid performance overhead.`); + return Reflect.ownKeys(target); + }; + } + const RuntimeCompiledPublicInstanceProxyHandlers = /*#__PURE__*/ extend({}, PublicInstanceProxyHandlers, { + get(target, key) { + // fast path for unscopables when using `with` block + if (key === Symbol.unscopables) { + return; + } + return PublicInstanceProxyHandlers.get(target, key, target); + }, + has(_, key) { + const has = key[0] !== '_' && !isGloballyWhitelisted(key); + if (!has && PublicInstanceProxyHandlers.has(_, key)) { + warn$1(`Property ${JSON.stringify(key)} should not start with _ which is a reserved prefix for Vue internals.`); + } + return has; + } + }); + // dev only + // In dev mode, the proxy target exposes the same properties as seen on `this` + // for easier console inspection. In prod mode it will be an empty object so + // these properties definitions can be skipped. + function createDevRenderContext(instance) { + const target = {}; + // expose internal instance for proxy handlers + Object.defineProperty(target, `_`, { + configurable: true, + enumerable: false, + get: () => instance + }); + // expose public properties + Object.keys(publicPropertiesMap).forEach(key => { + Object.defineProperty(target, key, { + configurable: true, + enumerable: false, + get: () => publicPropertiesMap[key](instance), + // intercepted by the proxy so no need for implementation, + // but needed to prevent set errors + set: NOOP + }); + }); + return target; + } + // dev only + function exposePropsOnRenderContext(instance) { + const { ctx, propsOptions: [propsOptions] } = instance; + if (propsOptions) { + Object.keys(propsOptions).forEach(key => { + Object.defineProperty(ctx, key, { + enumerable: true, + configurable: true, + get: () => instance.props[key], + set: NOOP + }); + }); + } + } + // dev only + function exposeSetupStateOnRenderContext(instance) { + const { ctx, setupState } = instance; + Object.keys(toRaw(setupState)).forEach(key => { + if (!setupState.__isScriptSetup) { + if (isReservedPrefix(key[0])) { + warn$1(`setup() return property ${JSON.stringify(key)} should not start with "$" or "_" ` + + `which are reserved prefixes for Vue internals.`); + return; + } + Object.defineProperty(ctx, key, { + enumerable: true, + configurable: true, + get: () => setupState[key], + set: NOOP + }); + } + }); + } + + function createDuplicateChecker() { + const cache = Object.create(null); + return (type, key) => { + if (cache[key]) { + warn$1(`${type} property "${key}" is already defined in ${cache[key]}.`); + } + else { + cache[key] = type; + } + }; + } + let shouldCacheAccess = true; + function applyOptions(instance) { + const options = resolveMergedOptions(instance); + const publicThis = instance.proxy; + const ctx = instance.ctx; + // do not cache property access on public proxy during state initialization + shouldCacheAccess = false; + // call beforeCreate first before accessing other options since + // the hook may mutate resolved options (#2791) + if (options.beforeCreate) { + callHook(options.beforeCreate, instance, "bc" /* BEFORE_CREATE */); + } + const { + // state + data: dataOptions, computed: computedOptions, methods, watch: watchOptions, provide: provideOptions, inject: injectOptions, + // lifecycle + created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, beforeUnmount, destroyed, unmounted, render, renderTracked, renderTriggered, errorCaptured, serverPrefetch, + // public API + expose, inheritAttrs, + // assets + components, directives, filters } = options; + const checkDuplicateProperties = createDuplicateChecker() ; + { + const [propsOptions] = instance.propsOptions; + if (propsOptions) { + for (const key in propsOptions) { + checkDuplicateProperties("Props" /* PROPS */, key); + } + } + } + // options initialization order (to be consistent with Vue 2): + // - props (already done outside of this function) + // - inject + // - methods + // - data (deferred since it relies on `this` access) + // - computed + // - watch (deferred since it relies on `this` access) + if (injectOptions) { + resolveInjections(injectOptions, ctx, checkDuplicateProperties, instance.appContext.config.unwrapInjectedRef); + } + if (methods) { + for (const key in methods) { + const methodHandler = methods[key]; + if (isFunction(methodHandler)) { + // In dev mode, we use the `createRenderContext` function to define + // methods to the proxy target, and those are read-only but + // reconfigurable, so it needs to be redefined here + { + Object.defineProperty(ctx, key, { + value: methodHandler.bind(publicThis), + configurable: true, + enumerable: true, + writable: true + }); + } + { + checkDuplicateProperties("Methods" /* METHODS */, key); + } + } + else { + warn$1(`Method "${key}" has type "${typeof methodHandler}" in the component definition. ` + + `Did you reference the function correctly?`); + } + } + } + if (dataOptions) { + if (!isFunction(dataOptions)) { + warn$1(`The data option must be a function. ` + + `Plain object usage is no longer supported.`); + } + const data = dataOptions.call(publicThis, publicThis); + if (isPromise(data)) { + warn$1(`data() returned a Promise - note data() cannot be async; If you ` + + `intend to perform data fetching before component renders, use ` + + `async setup() + <Suspense>.`); + } + if (!isObject(data)) { + warn$1(`data() should return an object.`); + } + else { + instance.data = reactive(data); + { + for (const key in data) { + checkDuplicateProperties("Data" /* DATA */, key); + // expose data on ctx during dev + if (!isReservedPrefix(key[0])) { + Object.defineProperty(ctx, key, { + configurable: true, + enumerable: true, + get: () => data[key], + set: NOOP + }); + } + } + } + } + } + // state initialization complete at this point - start caching access + shouldCacheAccess = true; + if (computedOptions) { + for (const key in computedOptions) { + const opt = computedOptions[key]; + const get = isFunction(opt) + ? opt.bind(publicThis, publicThis) + : isFunction(opt.get) + ? opt.get.bind(publicThis, publicThis) + : NOOP; + if (get === NOOP) { + warn$1(`Computed property "${key}" has no getter.`); + } + const set = !isFunction(opt) && isFunction(opt.set) + ? opt.set.bind(publicThis) + : () => { + warn$1(`Write operation failed: computed property "${key}" is readonly.`); + } + ; + const c = computed$1({ + get, + set + }); + Object.defineProperty(ctx, key, { + enumerable: true, + configurable: true, + get: () => c.value, + set: v => (c.value = v) + }); + { + checkDuplicateProperties("Computed" /* COMPUTED */, key); + } + } + } + if (watchOptions) { + for (const key in watchOptions) { + createWatcher(watchOptions[key], ctx, publicThis, key); + } + } + if (provideOptions) { + const provides = isFunction(provideOptions) + ? provideOptions.call(publicThis) + : provideOptions; + Reflect.ownKeys(provides).forEach(key => { + provide(key, provides[key]); + }); + } + if (created) { + callHook(created, instance, "c" /* CREATED */); + } + function registerLifecycleHook(register, hook) { + if (isArray(hook)) { + hook.forEach(_hook => register(_hook.bind(publicThis))); + } + else if (hook) { + register(hook.bind(publicThis)); + } + } + registerLifecycleHook(onBeforeMount, beforeMount); + registerLifecycleHook(onMounted, mounted); + registerLifecycleHook(onBeforeUpdate, beforeUpdate); + registerLifecycleHook(onUpdated, updated); + registerLifecycleHook(onActivated, activated); + registerLifecycleHook(onDeactivated, deactivated); + registerLifecycleHook(onErrorCaptured, errorCaptured); + registerLifecycleHook(onRenderTracked, renderTracked); + registerLifecycleHook(onRenderTriggered, renderTriggered); + registerLifecycleHook(onBeforeUnmount, beforeUnmount); + registerLifecycleHook(onUnmounted, unmounted); + registerLifecycleHook(onServerPrefetch, serverPrefetch); + if (isArray(expose)) { + if (expose.length) { + const exposed = instance.exposed || (instance.exposed = {}); + expose.forEach(key => { + Object.defineProperty(exposed, key, { + get: () => publicThis[key], + set: val => (publicThis[key] = val) + }); + }); + } + else if (!instance.exposed) { + instance.exposed = {}; + } + } + // options that are handled when creating the instance but also need to be + // applied from mixins + if (render && instance.render === NOOP) { + instance.render = render; + } + if (inheritAttrs != null) { + instance.inheritAttrs = inheritAttrs; + } + // asset options. + if (components) + instance.components = components; + if (directives) + instance.directives = directives; + } + function resolveInjections(injectOptions, ctx, checkDuplicateProperties = NOOP, unwrapRef = false) { + if (isArray(injectOptions)) { + injectOptions = normalizeInject(injectOptions); + } + for (const key in injectOptions) { + const opt = injectOptions[key]; + let injected; + if (isObject(opt)) { + if ('default' in opt) { + injected = inject(opt.from || key, opt.default, true /* treat default function as factory */); + } + else { + injected = inject(opt.from || key); + } + } + else { + injected = inject(opt); + } + if (isRef(injected)) { + // TODO remove the check in 3.3 + if (unwrapRef) { + Object.defineProperty(ctx, key, { + enumerable: true, + configurable: true, + get: () => injected.value, + set: v => (injected.value = v) + }); + } + else { + { + warn$1(`injected property "${key}" is a ref and will be auto-unwrapped ` + + `and no longer needs \`.value\` in the next minor release. ` + + `To opt-in to the new behavior now, ` + + `set \`app.config.unwrapInjectedRef = true\` (this config is ` + + `temporary and will not be needed in the future.)`); + } + ctx[key] = injected; + } + } + else { + ctx[key] = injected; + } + { + checkDuplicateProperties("Inject" /* INJECT */, key); + } + } + } + function callHook(hook, instance, type) { + callWithAsyncErrorHandling(isArray(hook) + ? hook.map(h => h.bind(instance.proxy)) + : hook.bind(instance.proxy), instance, type); + } + function createWatcher(raw, ctx, publicThis, key) { + const getter = key.includes('.') + ? createPathGetter(publicThis, key) + : () => publicThis[key]; + if (isString(raw)) { + const handler = ctx[raw]; + if (isFunction(handler)) { + watch(getter, handler); + } + else { + warn$1(`Invalid watch handler specified by key "${raw}"`, handler); + } + } + else if (isFunction(raw)) { + watch(getter, raw.bind(publicThis)); + } + else if (isObject(raw)) { + if (isArray(raw)) { + raw.forEach(r => createWatcher(r, ctx, publicThis, key)); + } + else { + const handler = isFunction(raw.handler) + ? raw.handler.bind(publicThis) + : ctx[raw.handler]; + if (isFunction(handler)) { + watch(getter, handler, raw); + } + else { + warn$1(`Invalid watch handler specified by key "${raw.handler}"`, handler); + } + } + } + else { + warn$1(`Invalid watch option: "${key}"`, raw); + } + } + /** + * Resolve merged options and cache it on the component. + * This is done only once per-component since the merging does not involve + * instances. + */ + function resolveMergedOptions(instance) { + const base = instance.type; + const { mixins, extends: extendsOptions } = base; + const { mixins: globalMixins, optionsCache: cache, config: { optionMergeStrategies } } = instance.appContext; + const cached = cache.get(base); + let resolved; + if (cached) { + resolved = cached; + } + else if (!globalMixins.length && !mixins && !extendsOptions) { + { + resolved = base; + } + } + else { + resolved = {}; + if (globalMixins.length) { + globalMixins.forEach(m => mergeOptions(resolved, m, optionMergeStrategies, true)); + } + mergeOptions(resolved, base, optionMergeStrategies); + } + cache.set(base, resolved); + return resolved; + } + function mergeOptions(to, from, strats, asMixin = false) { + const { mixins, extends: extendsOptions } = from; + if (extendsOptions) { + mergeOptions(to, extendsOptions, strats, true); + } + if (mixins) { + mixins.forEach((m) => mergeOptions(to, m, strats, true)); + } + for (const key in from) { + if (asMixin && key === 'expose') { + warn$1(`"expose" option is ignored when declared in mixins or extends. ` + + `It should only be declared in the base component itself.`); + } + else { + const strat = internalOptionMergeStrats[key] || (strats && strats[key]); + to[key] = strat ? strat(to[key], from[key]) : from[key]; + } + } + return to; + } + const internalOptionMergeStrats = { + data: mergeDataFn, + props: mergeObjectOptions, + emits: mergeObjectOptions, + // objects + methods: mergeObjectOptions, + computed: mergeObjectOptions, + // lifecycle + beforeCreate: mergeAsArray, + created: mergeAsArray, + beforeMount: mergeAsArray, + mounted: mergeAsArray, + beforeUpdate: mergeAsArray, + updated: mergeAsArray, + beforeDestroy: mergeAsArray, + beforeUnmount: mergeAsArray, + destroyed: mergeAsArray, + unmounted: mergeAsArray, + activated: mergeAsArray, + deactivated: mergeAsArray, + errorCaptured: mergeAsArray, + serverPrefetch: mergeAsArray, + // assets + components: mergeObjectOptions, + directives: mergeObjectOptions, + // watch + watch: mergeWatchOptions, + // provide / inject + provide: mergeDataFn, + inject: mergeInject + }; + function mergeDataFn(to, from) { + if (!from) { + return to; + } + if (!to) { + return from; + } + return function mergedDataFn() { + return (extend)(isFunction(to) ? to.call(this, this) : to, isFunction(from) ? from.call(this, this) : from); + }; + } + function mergeInject(to, from) { + return mergeObjectOptions(normalizeInject(to), normalizeInject(from)); + } + function normalizeInject(raw) { + if (isArray(raw)) { + const res = {}; + for (let i = 0; i < raw.length; i++) { + res[raw[i]] = raw[i]; + } + return res; + } + return raw; + } + function mergeAsArray(to, from) { + return to ? [...new Set([].concat(to, from))] : from; + } + function mergeObjectOptions(to, from) { + return to ? extend(extend(Object.create(null), to), from) : from; + } + function mergeWatchOptions(to, from) { + if (!to) + return from; + if (!from) + return to; + const merged = extend(Object.create(null), to); + for (const key in from) { + merged[key] = mergeAsArray(to[key], from[key]); + } + return merged; + } + + function initProps(instance, rawProps, isStateful, // result of bitwise flag comparison + isSSR = false) { + const props = {}; + const attrs = {}; + def(attrs, InternalObjectKey, 1); + instance.propsDefaults = Object.create(null); + setFullProps(instance, rawProps, props, attrs); + // ensure all declared prop keys are present + for (const key in instance.propsOptions[0]) { + if (!(key in props)) { + props[key] = undefined; + } + } + // validation + { + validateProps(rawProps || {}, props, instance); + } + if (isStateful) { + // stateful + instance.props = isSSR ? props : shallowReactive(props); + } + else { + if (!instance.type.props) { + // functional w/ optional props, props === attrs + instance.props = attrs; + } + else { + // functional w/ declared props + instance.props = props; + } + } + instance.attrs = attrs; + } + function updateProps(instance, rawProps, rawPrevProps, optimized) { + const { props, attrs, vnode: { patchFlag } } = instance; + const rawCurrentProps = toRaw(props); + const [options] = instance.propsOptions; + let hasAttrsChanged = false; + if ( + // always force full diff in dev + // - #1942 if hmr is enabled with sfc component + // - vite#872 non-sfc component used by sfc component + !((instance.type.__hmrId || + (instance.parent && instance.parent.type.__hmrId))) && + (optimized || patchFlag > 0) && + !(patchFlag & 16 /* FULL_PROPS */)) { + if (patchFlag & 8 /* PROPS */) { + // Compiler-generated props & no keys change, just set the updated + // the props. + const propsToUpdate = instance.vnode.dynamicProps; + for (let i = 0; i < propsToUpdate.length; i++) { + let key = propsToUpdate[i]; + // skip if the prop key is a declared emit event listener + if (isEmitListener(instance.emitsOptions, key)) { + continue; + } + // PROPS flag guarantees rawProps to be non-null + const value = rawProps[key]; + if (options) { + // attr / props separation was done on init and will be consistent + // in this code path, so just check if attrs have it. + if (hasOwn(attrs, key)) { + if (value !== attrs[key]) { + attrs[key] = value; + hasAttrsChanged = true; + } + } + else { + const camelizedKey = camelize(key); + props[camelizedKey] = resolvePropValue(options, rawCurrentProps, camelizedKey, value, instance, false /* isAbsent */); + } + } + else { + if (value !== attrs[key]) { + attrs[key] = value; + hasAttrsChanged = true; + } + } + } + } + } + else { + // full props update. + if (setFullProps(instance, rawProps, props, attrs)) { + hasAttrsChanged = true; + } + // in case of dynamic props, check if we need to delete keys from + // the props object + let kebabKey; + for (const key in rawCurrentProps) { + if (!rawProps || + // for camelCase + (!hasOwn(rawProps, key) && + // it's possible the original props was passed in as kebab-case + // and converted to camelCase (#955) + ((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey)))) { + if (options) { + if (rawPrevProps && + // for camelCase + (rawPrevProps[key] !== undefined || + // for kebab-case + rawPrevProps[kebabKey] !== undefined)) { + props[key] = resolvePropValue(options, rawCurrentProps, key, undefined, instance, true /* isAbsent */); + } + } + else { + delete props[key]; + } + } + } + // in the case of functional component w/o props declaration, props and + // attrs point to the same object so it should already have been updated. + if (attrs !== rawCurrentProps) { + for (const key in attrs) { + if (!rawProps || + (!hasOwn(rawProps, key) && + (!false ))) { + delete attrs[key]; + hasAttrsChanged = true; + } + } + } + } + // trigger updates for $attrs in case it's used in component slots + if (hasAttrsChanged) { + trigger(instance, "set" /* SET */, '$attrs'); + } + { + validateProps(rawProps || {}, props, instance); + } + } + function setFullProps(instance, rawProps, props, attrs) { + const [options, needCastKeys] = instance.propsOptions; + let hasAttrsChanged = false; + let rawCastValues; + if (rawProps) { + for (let key in rawProps) { + // key, ref are reserved and never passed down + if (isReservedProp(key)) { + continue; + } + const value = rawProps[key]; + // prop option names are camelized during normalization, so to support + // kebab -> camel conversion here we need to camelize the key. + let camelKey; + if (options && hasOwn(options, (camelKey = camelize(key)))) { + if (!needCastKeys || !needCastKeys.includes(camelKey)) { + props[camelKey] = value; + } + else { + (rawCastValues || (rawCastValues = {}))[camelKey] = value; + } + } + else if (!isEmitListener(instance.emitsOptions, key)) { + if (!(key in attrs) || value !== attrs[key]) { + attrs[key] = value; + hasAttrsChanged = true; + } + } + } + } + if (needCastKeys) { + const rawCurrentProps = toRaw(props); + const castValues = rawCastValues || EMPTY_OBJ; + for (let i = 0; i < needCastKeys.length; i++) { + const key = needCastKeys[i]; + props[key] = resolvePropValue(options, rawCurrentProps, key, castValues[key], instance, !hasOwn(castValues, key)); + } + } + return hasAttrsChanged; + } + function resolvePropValue(options, props, key, value, instance, isAbsent) { + const opt = options[key]; + if (opt != null) { + const hasDefault = hasOwn(opt, 'default'); + // default values + if (hasDefault && value === undefined) { + const defaultValue = opt.default; + if (opt.type !== Function && isFunction(defaultValue)) { + const { propsDefaults } = instance; + if (key in propsDefaults) { + value = propsDefaults[key]; + } + else { + setCurrentInstance(instance); + value = propsDefaults[key] = defaultValue.call(null, props); + unsetCurrentInstance(); + } + } + else { + value = defaultValue; + } + } + // boolean casting + if (opt[0 /* shouldCast */]) { + if (isAbsent && !hasDefault) { + value = false; + } + else if (opt[1 /* shouldCastTrue */] && + (value === '' || value === hyphenate(key))) { + value = true; + } + } + } + return value; + } + function normalizePropsOptions(comp, appContext, asMixin = false) { + const cache = appContext.propsCache; + const cached = cache.get(comp); + if (cached) { + return cached; + } + const raw = comp.props; + const normalized = {}; + const needCastKeys = []; + // apply mixin/extends props + let hasExtends = false; + if (!isFunction(comp)) { + const extendProps = (raw) => { + hasExtends = true; + const [props, keys] = normalizePropsOptions(raw, appContext, true); + extend(normalized, props); + if (keys) + needCastKeys.push(...keys); + }; + if (!asMixin && appContext.mixins.length) { + appContext.mixins.forEach(extendProps); + } + if (comp.extends) { + extendProps(comp.extends); + } + if (comp.mixins) { + comp.mixins.forEach(extendProps); + } + } + if (!raw && !hasExtends) { + cache.set(comp, EMPTY_ARR); + return EMPTY_ARR; + } + if (isArray(raw)) { + for (let i = 0; i < raw.length; i++) { + if (!isString(raw[i])) { + warn$1(`props must be strings when using array syntax.`, raw[i]); + } + const normalizedKey = camelize(raw[i]); + if (validatePropName(normalizedKey)) { + normalized[normalizedKey] = EMPTY_OBJ; + } + } + } + else if (raw) { + if (!isObject(raw)) { + warn$1(`invalid props options`, raw); + } + for (const key in raw) { + const normalizedKey = camelize(key); + if (validatePropName(normalizedKey)) { + const opt = raw[key]; + const prop = (normalized[normalizedKey] = + isArray(opt) || isFunction(opt) ? { type: opt } : opt); + if (prop) { + const booleanIndex = getTypeIndex(Boolean, prop.type); + const stringIndex = getTypeIndex(String, prop.type); + prop[0 /* shouldCast */] = booleanIndex > -1; + prop[1 /* shouldCastTrue */] = + stringIndex < 0 || booleanIndex < stringIndex; + // if the prop needs boolean casting or default value + if (booleanIndex > -1 || hasOwn(prop, 'default')) { + needCastKeys.push(normalizedKey); + } + } + } + } + } + const res = [normalized, needCastKeys]; + cache.set(comp, res); + return res; + } + function validatePropName(key) { + if (key[0] !== '$') { + return true; + } + else { + warn$1(`Invalid prop name: "${key}" is a reserved property.`); + } + return false; + } + // use function string name to check type constructors + // so that it works across vms / iframes. + function getType(ctor) { + const match = ctor && ctor.toString().match(/^\s*function (\w+)/); + return match ? match[1] : ctor === null ? 'null' : ''; + } + function isSameType(a, b) { + return getType(a) === getType(b); + } + function getTypeIndex(type, expectedTypes) { + if (isArray(expectedTypes)) { + return expectedTypes.findIndex(t => isSameType(t, type)); + } + else if (isFunction(expectedTypes)) { + return isSameType(expectedTypes, type) ? 0 : -1; + } + return -1; + } + /** + * dev only + */ + function validateProps(rawProps, props, instance) { + const resolvedValues = toRaw(props); + const options = instance.propsOptions[0]; + for (const key in options) { + let opt = options[key]; + if (opt == null) + continue; + validateProp(key, resolvedValues[key], opt, !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key))); + } + } + /** + * dev only + */ + function validateProp(name, value, prop, isAbsent) { + const { type, required, validator } = prop; + // required! + if (required && isAbsent) { + warn$1('Missing required prop: "' + name + '"'); + return; + } + // missing but optional + if (value == null && !prop.required) { + return; + } + // type check + if (type != null && type !== true) { + let isValid = false; + const types = isArray(type) ? type : [type]; + const expectedTypes = []; + // value is valid as long as one of the specified types match + for (let i = 0; i < types.length && !isValid; i++) { + const { valid, expectedType } = assertType(value, types[i]); + expectedTypes.push(expectedType || ''); + isValid = valid; + } + if (!isValid) { + warn$1(getInvalidTypeMessage(name, value, expectedTypes)); + return; + } + } + // custom validator + if (validator && !validator(value)) { + warn$1('Invalid prop: custom validator check failed for prop "' + name + '".'); + } + } + const isSimpleType = /*#__PURE__*/ makeMap('String,Number,Boolean,Function,Symbol,BigInt'); + /** + * dev only + */ + function assertType(value, type) { + let valid; + const expectedType = getType(type); + if (isSimpleType(expectedType)) { + const t = typeof value; + valid = t === expectedType.toLowerCase(); + // for primitive wrapper objects + if (!valid && t === 'object') { + valid = value instanceof type; + } + } + else if (expectedType === 'Object') { + valid = isObject(value); + } + else if (expectedType === 'Array') { + valid = isArray(value); + } + else if (expectedType === 'null') { + valid = value === null; + } + else { + valid = value instanceof type; + } + return { + valid, + expectedType + }; + } + /** + * dev only + */ + function getInvalidTypeMessage(name, value, expectedTypes) { + let message = `Invalid prop: type check failed for prop "${name}".` + + ` Expected ${expectedTypes.map(capitalize).join(' | ')}`; + const expectedType = expectedTypes[0]; + const receivedType = toRawType(value); + const expectedValue = styleValue(value, expectedType); + const receivedValue = styleValue(value, receivedType); + // check if we need to specify expected value + if (expectedTypes.length === 1 && + isExplicable(expectedType) && + !isBoolean(expectedType, receivedType)) { + message += ` with value ${expectedValue}`; + } + message += `, got ${receivedType} `; + // check if we need to specify received value + if (isExplicable(receivedType)) { + message += `with value ${receivedValue}.`; + } + return message; + } + /** + * dev only + */ + function styleValue(value, type) { + if (type === 'String') { + return `"${value}"`; + } + else if (type === 'Number') { + return `${Number(value)}`; + } + else { + return `${value}`; + } + } + /** + * dev only + */ + function isExplicable(type) { + const explicitTypes = ['string', 'number', 'boolean']; + return explicitTypes.some(elem => type.toLowerCase() === elem); + } + /** + * dev only + */ + function isBoolean(...args) { + return args.some(elem => elem.toLowerCase() === 'boolean'); + } + + const isInternalKey = (key) => key[0] === '_' || key === '$stable'; + const normalizeSlotValue = (value) => isArray(value) + ? value.map(normalizeVNode) + : [normalizeVNode(value)]; + const normalizeSlot = (key, rawSlot, ctx) => { + if (rawSlot._n) { + // already normalized - #5353 + return rawSlot; + } + const normalized = withCtx((...args) => { + if (currentInstance) { + warn$1(`Slot "${key}" invoked outside of the render function: ` + + `this will not track dependencies used in the slot. ` + + `Invoke the slot function inside the render function instead.`); + } + return normalizeSlotValue(rawSlot(...args)); + }, ctx); + normalized._c = false; + return normalized; + }; + const normalizeObjectSlots = (rawSlots, slots, instance) => { + const ctx = rawSlots._ctx; + for (const key in rawSlots) { + if (isInternalKey(key)) + continue; + const value = rawSlots[key]; + if (isFunction(value)) { + slots[key] = normalizeSlot(key, value, ctx); + } + else if (value != null) { + { + warn$1(`Non-function value encountered for slot "${key}". ` + + `Prefer function slots for better performance.`); + } + const normalized = normalizeSlotValue(value); + slots[key] = () => normalized; + } + } + }; + const normalizeVNodeSlots = (instance, children) => { + if (!isKeepAlive(instance.vnode) && + !(false )) { + warn$1(`Non-function value encountered for default slot. ` + + `Prefer function slots for better performance.`); + } + const normalized = normalizeSlotValue(children); + instance.slots.default = () => normalized; + }; + const initSlots = (instance, children) => { + if (instance.vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) { + const type = children._; + if (type) { + // users can get the shallow readonly version of the slots object through `this.$slots`, + // we should avoid the proxy object polluting the slots of the internal instance + instance.slots = toRaw(children); + // make compiler marker non-enumerable + def(children, '_', type); + } + else { + normalizeObjectSlots(children, (instance.slots = {})); + } + } + else { + instance.slots = {}; + if (children) { + normalizeVNodeSlots(instance, children); + } + } + def(instance.slots, InternalObjectKey, 1); + }; + const updateSlots = (instance, children, optimized) => { + const { vnode, slots } = instance; + let needDeletionCheck = true; + let deletionComparisonTarget = EMPTY_OBJ; + if (vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) { + const type = children._; + if (type) { + // compiled slots. + if (isHmrUpdating) { + // Parent was HMR updated so slot content may have changed. + // force update slots and mark instance for hmr as well + extend(slots, children); + } + else if (optimized && type === 1 /* STABLE */) { + // compiled AND stable. + // no need to update, and skip stale slots removal. + needDeletionCheck = false; + } + else { + // compiled but dynamic (v-if/v-for on slots) - update slots, but skip + // normalization. + extend(slots, children); + // #2893 + // when rendering the optimized slots by manually written render function, + // we need to delete the `slots._` flag if necessary to make subsequent updates reliable, + // i.e. let the `renderSlot` create the bailed Fragment + if (!optimized && type === 1 /* STABLE */) { + delete slots._; + } + } + } + else { + needDeletionCheck = !children.$stable; + normalizeObjectSlots(children, slots); + } + deletionComparisonTarget = children; + } + else if (children) { + // non slot object children (direct value) passed to a component + normalizeVNodeSlots(instance, children); + deletionComparisonTarget = { default: 1 }; + } + // delete stale slots + if (needDeletionCheck) { + for (const key in slots) { + if (!isInternalKey(key) && !(key in deletionComparisonTarget)) { + delete slots[key]; + } + } + } + }; + + function createAppContext() { + return { + app: null, + config: { + isNativeTag: NO, + performance: false, + globalProperties: {}, + optionMergeStrategies: {}, + errorHandler: undefined, + warnHandler: undefined, + compilerOptions: {} + }, + mixins: [], + components: {}, + directives: {}, + provides: Object.create(null), + optionsCache: new WeakMap(), + propsCache: new WeakMap(), + emitsCache: new WeakMap() + }; + } + let uid = 0; + function createAppAPI(render, hydrate) { + return function createApp(rootComponent, rootProps = null) { + if (!isFunction(rootComponent)) { + rootComponent = Object.assign({}, rootComponent); + } + if (rootProps != null && !isObject(rootProps)) { + warn$1(`root props passed to app.mount() must be an object.`); + rootProps = null; + } + const context = createAppContext(); + const installedPlugins = new Set(); + let isMounted = false; + const app = (context.app = { + _uid: uid++, + _component: rootComponent, + _props: rootProps, + _container: null, + _context: context, + _instance: null, + version, + get config() { + return context.config; + }, + set config(v) { + { + warn$1(`app.config cannot be replaced. Modify individual options instead.`); + } + }, + use(plugin, ...options) { + if (installedPlugins.has(plugin)) { + warn$1(`Plugin has already been applied to target app.`); + } + else if (plugin && isFunction(plugin.install)) { + installedPlugins.add(plugin); + plugin.install(app, ...options); + } + else if (isFunction(plugin)) { + installedPlugins.add(plugin); + plugin(app, ...options); + } + else { + warn$1(`A plugin must either be a function or an object with an "install" ` + + `function.`); + } + return app; + }, + mixin(mixin) { + { + if (!context.mixins.includes(mixin)) { + context.mixins.push(mixin); + } + else { + warn$1('Mixin has already been applied to target app' + + (mixin.name ? `: ${mixin.name}` : '')); + } + } + return app; + }, + component(name, component) { + { + validateComponentName(name, context.config); + } + if (!component) { + return context.components[name]; + } + if (context.components[name]) { + warn$1(`Component "${name}" has already been registered in target app.`); + } + context.components[name] = component; + return app; + }, + directive(name, directive) { + { + validateDirectiveName(name); + } + if (!directive) { + return context.directives[name]; + } + if (context.directives[name]) { + warn$1(`Directive "${name}" has already been registered in target app.`); + } + context.directives[name] = directive; + return app; + }, + mount(rootContainer, isHydrate, isSVG) { + if (!isMounted) { + // #5571 + if (rootContainer.__vue_app__) { + warn$1(`There is already an app instance mounted on the host container.\n` + + ` If you want to mount another app on the same host container,` + + ` you need to unmount the previous app by calling \`app.unmount()\` first.`); + } + const vnode = createVNode(rootComponent, rootProps); + // store app context on the root VNode. + // this will be set on the root instance on initial mount. + vnode.appContext = context; + // HMR root reload + { + context.reload = () => { + render(cloneVNode(vnode), rootContainer, isSVG); + }; + } + if (isHydrate && hydrate) { + hydrate(vnode, rootContainer); + } + else { + render(vnode, rootContainer, isSVG); + } + isMounted = true; + app._container = rootContainer; + rootContainer.__vue_app__ = app; + { + app._instance = vnode.component; + devtoolsInitApp(app, version); + } + return getExposeProxy(vnode.component) || vnode.component.proxy; + } + else { + warn$1(`App has already been mounted.\n` + + `If you want to remount the same app, move your app creation logic ` + + `into a factory function and create fresh app instances for each ` + + `mount - e.g. \`const createMyApp = () => createApp(App)\``); + } + }, + unmount() { + if (isMounted) { + render(null, app._container); + { + app._instance = null; + devtoolsUnmountApp(app); + } + delete app._container.__vue_app__; + } + else { + warn$1(`Cannot unmount an app that is not mounted.`); + } + }, + provide(key, value) { + if (key in context.provides) { + warn$1(`App already provides property with key "${String(key)}". ` + + `It will be overwritten with the new value.`); + } + context.provides[key] = value; + return app; + } + }); + return app; + }; + } + + /** + * Function for handling a template ref + */ + function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) { + if (isArray(rawRef)) { + rawRef.forEach((r, i) => setRef(r, oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef), parentSuspense, vnode, isUnmount)); + return; + } + if (isAsyncWrapper(vnode) && !isUnmount) { + // when mounting async components, nothing needs to be done, + // because the template ref is forwarded to inner component + return; + } + const refValue = vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */ + ? getExposeProxy(vnode.component) || vnode.component.proxy + : vnode.el; + const value = isUnmount ? null : refValue; + const { i: owner, r: ref } = rawRef; + if (!owner) { + warn$1(`Missing ref owner context. ref cannot be used on hoisted vnodes. ` + + `A vnode with ref must be created inside the render function.`); + return; + } + const oldRef = oldRawRef && oldRawRef.r; + const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs; + const setupState = owner.setupState; + // dynamic ref changed. unset old ref + if (oldRef != null && oldRef !== ref) { + if (isString(oldRef)) { + refs[oldRef] = null; + if (hasOwn(setupState, oldRef)) { + setupState[oldRef] = null; + } + } + else if (isRef(oldRef)) { + oldRef.value = null; + } + } + if (isFunction(ref)) { + callWithErrorHandling(ref, owner, 12 /* FUNCTION_REF */, [value, refs]); + } + else { + const _isString = isString(ref); + const _isRef = isRef(ref); + if (_isString || _isRef) { + const doSet = () => { + if (rawRef.f) { + const existing = _isString ? refs[ref] : ref.value; + if (isUnmount) { + isArray(existing) && remove(existing, refValue); + } + else { + if (!isArray(existing)) { + if (_isString) { + refs[ref] = [refValue]; + if (hasOwn(setupState, ref)) { + setupState[ref] = refs[ref]; + } + } + else { + ref.value = [refValue]; + if (rawRef.k) + refs[rawRef.k] = ref.value; + } + } + else if (!existing.includes(refValue)) { + existing.push(refValue); + } + } + } + else if (_isString) { + refs[ref] = value; + if (hasOwn(setupState, ref)) { + setupState[ref] = value; + } + } + else if (isRef(ref)) { + ref.value = value; + if (rawRef.k) + refs[rawRef.k] = value; + } + else { + warn$1('Invalid template ref type:', ref, `(${typeof ref})`); + } + }; + if (value) { + doSet.id = -1; + queuePostRenderEffect(doSet, parentSuspense); + } + else { + doSet(); + } + } + else { + warn$1('Invalid template ref type:', ref, `(${typeof ref})`); + } + } + } + + let hasMismatch = false; + const isSVGContainer = (container) => /svg/.test(container.namespaceURI) && container.tagName !== 'foreignObject'; + const isComment = (node) => node.nodeType === 8 /* COMMENT */; + // Note: hydration is DOM-specific + // But we have to place it in core due to tight coupling with core - splitting + // it out creates a ton of unnecessary complexity. + // Hydration also depends on some renderer internal logic which needs to be + // passed in via arguments. + function createHydrationFunctions(rendererInternals) { + const { mt: mountComponent, p: patch, o: { patchProp, createText, nextSibling, parentNode, remove, insert, createComment } } = rendererInternals; + const hydrate = (vnode, container) => { + if (!container.hasChildNodes()) { + warn$1(`Attempting to hydrate existing markup but container is empty. ` + + `Performing full mount instead.`); + patch(null, vnode, container); + flushPostFlushCbs(); + return; + } + hasMismatch = false; + hydrateNode(container.firstChild, vnode, null, null, null); + flushPostFlushCbs(); + if (hasMismatch && !false) { + // this error should show up in production + console.error(`Hydration completed but contains mismatches.`); + } + }; + const hydrateNode = (node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized = false) => { + const isFragmentStart = isComment(node) && node.data === '['; + const onMismatch = () => handleMismatch(node, vnode, parentComponent, parentSuspense, slotScopeIds, isFragmentStart); + const { type, ref, shapeFlag, patchFlag } = vnode; + const domType = node.nodeType; + vnode.el = node; + if (patchFlag === -2 /* BAIL */) { + optimized = false; + vnode.dynamicChildren = null; + } + let nextNode = null; + switch (type) { + case Text: + if (domType !== 3 /* TEXT */) { + // #5728 empty text node inside a slot can cause hydration failure + // because the server rendered HTML won't contain a text node + if (vnode.children === '') { + insert((vnode.el = createText('')), parentNode(node), node); + nextNode = node; + } + else { + nextNode = onMismatch(); + } + } + else { + if (node.data !== vnode.children) { + hasMismatch = true; + warn$1(`Hydration text mismatch:` + + `\n- Client: ${JSON.stringify(node.data)}` + + `\n- Server: ${JSON.stringify(vnode.children)}`); + node.data = vnode.children; + } + nextNode = nextSibling(node); + } + break; + case Comment: + if (domType !== 8 /* COMMENT */ || isFragmentStart) { + nextNode = onMismatch(); + } + else { + nextNode = nextSibling(node); + } + break; + case Static: + if (domType !== 1 /* ELEMENT */) { + nextNode = onMismatch(); + } + else { + // determine anchor, adopt content + nextNode = node; + // if the static vnode has its content stripped during build, + // adopt it from the server-rendered HTML. + const needToAdoptContent = !vnode.children.length; + for (let i = 0; i < vnode.staticCount; i++) { + if (needToAdoptContent) + vnode.children += nextNode.outerHTML; + if (i === vnode.staticCount - 1) { + vnode.anchor = nextNode; + } + nextNode = nextSibling(nextNode); + } + return nextNode; + } + break; + case Fragment: + if (!isFragmentStart) { + nextNode = onMismatch(); + } + else { + nextNode = hydrateFragment(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized); + } + break; + default: + if (shapeFlag & 1 /* ELEMENT */) { + if (domType !== 1 /* ELEMENT */ || + vnode.type.toLowerCase() !== + node.tagName.toLowerCase()) { + nextNode = onMismatch(); + } + else { + nextNode = hydrateElement(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized); + } + } + else if (shapeFlag & 6 /* COMPONENT */) { + // when setting up the render effect, if the initial vnode already + // has .el set, the component will perform hydration instead of mount + // on its sub-tree. + vnode.slotScopeIds = slotScopeIds; + const container = parentNode(node); + mountComponent(vnode, container, null, parentComponent, parentSuspense, isSVGContainer(container), optimized); + // component may be async, so in the case of fragments we cannot rely + // on component's rendered output to determine the end of the fragment + // instead, we do a lookahead to find the end anchor node. + nextNode = isFragmentStart + ? locateClosingAsyncAnchor(node) + : nextSibling(node); + // #4293 teleport as component root + if (nextNode && + isComment(nextNode) && + nextNode.data === 'teleport end') { + nextNode = nextSibling(nextNode); + } + // #3787 + // if component is async, it may get moved / unmounted before its + // inner component is loaded, so we need to give it a placeholder + // vnode that matches its adopted DOM. + if (isAsyncWrapper(vnode)) { + let subTree; + if (isFragmentStart) { + subTree = createVNode(Fragment); + subTree.anchor = nextNode + ? nextNode.previousSibling + : container.lastChild; + } + else { + subTree = + node.nodeType === 3 ? createTextVNode('') : createVNode('div'); + } + subTree.el = node; + vnode.component.subTree = subTree; + } + } + else if (shapeFlag & 64 /* TELEPORT */) { + if (domType !== 8 /* COMMENT */) { + nextNode = onMismatch(); + } + else { + nextNode = vnode.type.hydrate(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, rendererInternals, hydrateChildren); + } + } + else if (shapeFlag & 128 /* SUSPENSE */) { + nextNode = vnode.type.hydrate(node, vnode, parentComponent, parentSuspense, isSVGContainer(parentNode(node)), slotScopeIds, optimized, rendererInternals, hydrateNode); + } + else { + warn$1('Invalid HostVNode type:', type, `(${typeof type})`); + } + } + if (ref != null) { + setRef(ref, null, parentSuspense, vnode); + } + return nextNode; + }; + const hydrateElement = (el, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => { + optimized = optimized || !!vnode.dynamicChildren; + const { type, props, patchFlag, shapeFlag, dirs } = vnode; + // #4006 for form elements with non-string v-model value bindings + // e.g. <option :value="obj">, <input type="checkbox" :true-value="1"> + const forcePatchValue = (type === 'input' && dirs) || type === 'option'; + // skip props & children if this is hoisted static nodes + // #5405 in dev, always hydrate children for HMR + { + if (dirs) { + invokeDirectiveHook(vnode, null, parentComponent, 'created'); + } + // props + if (props) { + if (forcePatchValue || + !optimized || + patchFlag & (16 /* FULL_PROPS */ | 32 /* HYDRATE_EVENTS */)) { + for (const key in props) { + if ((forcePatchValue && key.endsWith('value')) || + (isOn(key) && !isReservedProp(key))) { + patchProp(el, key, null, props[key], false, undefined, parentComponent); + } + } + } + else if (props.onClick) { + // Fast path for click listeners (which is most often) to avoid + // iterating through props. + patchProp(el, 'onClick', null, props.onClick, false, undefined, parentComponent); + } + } + // vnode / directive hooks + let vnodeHooks; + if ((vnodeHooks = props && props.onVnodeBeforeMount)) { + invokeVNodeHook(vnodeHooks, parentComponent, vnode); + } + if (dirs) { + invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount'); + } + if ((vnodeHooks = props && props.onVnodeMounted) || dirs) { + queueEffectWithSuspense(() => { + vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode); + dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted'); + }, parentSuspense); + } + // children + if (shapeFlag & 16 /* ARRAY_CHILDREN */ && + // skip if element has innerHTML / textContent + !(props && (props.innerHTML || props.textContent))) { + let next = hydrateChildren(el.firstChild, vnode, el, parentComponent, parentSuspense, slotScopeIds, optimized); + let hasWarned = false; + while (next) { + hasMismatch = true; + if (!hasWarned) { + warn$1(`Hydration children mismatch in <${vnode.type}>: ` + + `server rendered element contains more child nodes than client vdom.`); + hasWarned = true; + } + // The SSRed DOM contains more nodes than it should. Remove them. + const cur = next; + next = next.nextSibling; + remove(cur); + } + } + else if (shapeFlag & 8 /* TEXT_CHILDREN */) { + if (el.textContent !== vnode.children) { + hasMismatch = true; + warn$1(`Hydration text content mismatch in <${vnode.type}>:\n` + + `- Client: ${el.textContent}\n` + + `- Server: ${vnode.children}`); + el.textContent = vnode.children; + } + } + } + return el.nextSibling; + }; + const hydrateChildren = (node, parentVNode, container, parentComponent, parentSuspense, slotScopeIds, optimized) => { + optimized = optimized || !!parentVNode.dynamicChildren; + const children = parentVNode.children; + const l = children.length; + let hasWarned = false; + for (let i = 0; i < l; i++) { + const vnode = optimized + ? children[i] + : (children[i] = normalizeVNode(children[i])); + if (node) { + node = hydrateNode(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized); + } + else if (vnode.type === Text && !vnode.children) { + continue; + } + else { + hasMismatch = true; + if (!hasWarned) { + warn$1(`Hydration children mismatch in <${container.tagName.toLowerCase()}>: ` + + `server rendered element contains fewer child nodes than client vdom.`); + hasWarned = true; + } + // the SSRed DOM didn't contain enough nodes. Mount the missing ones. + patch(null, vnode, container, null, parentComponent, parentSuspense, isSVGContainer(container), slotScopeIds); + } + } + return node; + }; + const hydrateFragment = (node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => { + const { slotScopeIds: fragmentSlotScopeIds } = vnode; + if (fragmentSlotScopeIds) { + slotScopeIds = slotScopeIds + ? slotScopeIds.concat(fragmentSlotScopeIds) + : fragmentSlotScopeIds; + } + const container = parentNode(node); + const next = hydrateChildren(nextSibling(node), vnode, container, parentComponent, parentSuspense, slotScopeIds, optimized); + if (next && isComment(next) && next.data === ']') { + return nextSibling((vnode.anchor = next)); + } + else { + // fragment didn't hydrate successfully, since we didn't get a end anchor + // back. This should have led to node/children mismatch warnings. + hasMismatch = true; + // since the anchor is missing, we need to create one and insert it + insert((vnode.anchor = createComment(`]`)), container, next); + return next; + } + }; + const handleMismatch = (node, vnode, parentComponent, parentSuspense, slotScopeIds, isFragment) => { + hasMismatch = true; + warn$1(`Hydration node mismatch:\n- Client vnode:`, vnode.type, `\n- Server rendered DOM:`, node, node.nodeType === 3 /* TEXT */ + ? `(text)` + : isComment(node) && node.data === '[' + ? `(start of fragment)` + : ``); + vnode.el = null; + if (isFragment) { + // remove excessive fragment nodes + const end = locateClosingAsyncAnchor(node); + while (true) { + const next = nextSibling(node); + if (next && next !== end) { + remove(next); + } + else { + break; + } + } + } + const next = nextSibling(node); + const container = parentNode(node); + remove(node); + patch(null, vnode, container, next, parentComponent, parentSuspense, isSVGContainer(container), slotScopeIds); + return next; + }; + const locateClosingAsyncAnchor = (node) => { + let match = 0; + while (node) { + node = nextSibling(node); + if (node && isComment(node)) { + if (node.data === '[') + match++; + if (node.data === ']') { + if (match === 0) { + return nextSibling(node); + } + else { + match--; + } + } + } + } + return node; + }; + return [hydrate, hydrateNode]; + } + + /* eslint-disable no-restricted-globals */ + let supported; + let perf; + function startMeasure(instance, type) { + if (instance.appContext.config.performance && isSupported()) { + perf.mark(`vue-${type}-${instance.uid}`); + } + { + devtoolsPerfStart(instance, type, isSupported() ? perf.now() : Date.now()); + } + } + function endMeasure(instance, type) { + if (instance.appContext.config.performance && isSupported()) { + const startTag = `vue-${type}-${instance.uid}`; + const endTag = startTag + `:end`; + perf.mark(endTag); + perf.measure(`<${formatComponentName(instance, instance.type)}> ${type}`, startTag, endTag); + perf.clearMarks(startTag); + perf.clearMarks(endTag); + } + { + devtoolsPerfEnd(instance, type, isSupported() ? perf.now() : Date.now()); + } + } + function isSupported() { + if (supported !== undefined) { + return supported; + } + if (typeof window !== 'undefined' && window.performance) { + supported = true; + perf = window.performance; + } + else { + supported = false; + } + return supported; + } + + const queuePostRenderEffect = queueEffectWithSuspense + ; + /** + * The createRenderer function accepts two generic arguments: + * HostNode and HostElement, corresponding to Node and Element types in the + * host environment. For example, for runtime-dom, HostNode would be the DOM + * `Node` interface and HostElement would be the DOM `Element` interface. + * + * Custom renderers can pass in the platform specific types like this: + * + * ``` js + * const { render, createApp } = createRenderer<Node, Element>({ + * patchProp, + * ...nodeOps + * }) + * ``` + */ + function createRenderer(options) { + return baseCreateRenderer(options); + } + // Separate API for creating hydration-enabled renderer. + // Hydration logic is only used when calling this function, making it + // tree-shakable. + function createHydrationRenderer(options) { + return baseCreateRenderer(options, createHydrationFunctions); + } + // implementation + function baseCreateRenderer(options, createHydrationFns) { + const target = getGlobalThis(); + target.__VUE__ = true; + { + setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, target); + } + const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, setScopeId: hostSetScopeId = NOOP, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent } = options; + // Note: functions inside this closure should use `const xxx = () => {}` + // style in order to prevent being inlined by minifiers. + const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, slotScopeIds = null, optimized = isHmrUpdating ? false : !!n2.dynamicChildren) => { + if (n1 === n2) { + return; + } + // patching & not same type, unmount old tree + if (n1 && !isSameVNodeType(n1, n2)) { + anchor = getNextHostNode(n1); + unmount(n1, parentComponent, parentSuspense, true); + n1 = null; + } + if (n2.patchFlag === -2 /* BAIL */) { + optimized = false; + n2.dynamicChildren = null; + } + const { type, ref, shapeFlag } = n2; + switch (type) { + case Text: + processText(n1, n2, container, anchor); + break; + case Comment: + processCommentNode(n1, n2, container, anchor); + break; + case Static: + if (n1 == null) { + mountStaticNode(n2, container, anchor, isSVG); + } + else { + patchStaticNode(n1, n2, container, isSVG); + } + break; + case Fragment: + processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + break; + default: + if (shapeFlag & 1 /* ELEMENT */) { + processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + else if (shapeFlag & 6 /* COMPONENT */) { + processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + else if (shapeFlag & 64 /* TELEPORT */) { + type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals); + } + else if (shapeFlag & 128 /* SUSPENSE */) { + type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals); + } + else { + warn$1('Invalid VNode type:', type, `(${typeof type})`); + } + } + // set ref + if (ref != null && parentComponent) { + setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2); + } + }; + const processText = (n1, n2, container, anchor) => { + if (n1 == null) { + hostInsert((n2.el = hostCreateText(n2.children)), container, anchor); + } + else { + const el = (n2.el = n1.el); + if (n2.children !== n1.children) { + hostSetText(el, n2.children); + } + } + }; + const processCommentNode = (n1, n2, container, anchor) => { + if (n1 == null) { + hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor); + } + else { + // there's no support for dynamic comments + n2.el = n1.el; + } + }; + const mountStaticNode = (n2, container, anchor, isSVG) => { + [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG, n2.el, n2.anchor); + }; + /** + * Dev / HMR only + */ + const patchStaticNode = (n1, n2, container, isSVG) => { + // static nodes are only patched during dev for HMR + if (n2.children !== n1.children) { + const anchor = hostNextSibling(n1.anchor); + // remove existing + removeStaticNode(n1); + [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG); + } + else { + n2.el = n1.el; + n2.anchor = n1.anchor; + } + }; + const moveStaticNode = ({ el, anchor }, container, nextSibling) => { + let next; + while (el && el !== anchor) { + next = hostNextSibling(el); + hostInsert(el, container, nextSibling); + el = next; + } + hostInsert(anchor, container, nextSibling); + }; + const removeStaticNode = ({ el, anchor }) => { + let next; + while (el && el !== anchor) { + next = hostNextSibling(el); + hostRemove(el); + el = next; + } + hostRemove(anchor); + }; + const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { + isSVG = isSVG || n2.type === 'svg'; + if (n1 == null) { + mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + else { + patchElement(n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + }; + const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { + let el; + let vnodeHook; + const { type, props, shapeFlag, transition, patchFlag, dirs } = vnode; + { + el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is, props); + // mount children first, since some props may rely on child content + // being already rendered, e.g. `<select value>` + if (shapeFlag & 8 /* TEXT_CHILDREN */) { + hostSetElementText(el, vnode.children); + } + else if (shapeFlag & 16 /* ARRAY_CHILDREN */) { + mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', slotScopeIds, optimized); + } + if (dirs) { + invokeDirectiveHook(vnode, null, parentComponent, 'created'); + } + // props + if (props) { + for (const key in props) { + if (key !== 'value' && !isReservedProp(key)) { + hostPatchProp(el, key, null, props[key], isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren); + } + } + /** + * Special case for setting value on DOM elements: + * - it can be order-sensitive (e.g. should be set *after* min/max, #2325, #4024) + * - it needs to be forced (#1471) + * #2353 proposes adding another renderer option to configure this, but + * the properties affects are so finite it is worth special casing it + * here to reduce the complexity. (Special casing it also should not + * affect non-DOM renderers) + */ + if ('value' in props) { + hostPatchProp(el, 'value', null, props.value); + } + if ((vnodeHook = props.onVnodeBeforeMount)) { + invokeVNodeHook(vnodeHook, parentComponent, vnode); + } + } + // scopeId + setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent); + } + { + Object.defineProperty(el, '__vnode', { + value: vnode, + enumerable: false + }); + Object.defineProperty(el, '__vueParentComponent', { + value: parentComponent, + enumerable: false + }); + } + if (dirs) { + invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount'); + } + // #1583 For inside suspense + suspense not resolved case, enter hook should call when suspense resolved + // #1689 For inside suspense + suspense resolved case, just call it + const needCallTransitionHooks = (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) && + transition && + !transition.persisted; + if (needCallTransitionHooks) { + transition.beforeEnter(el); + } + hostInsert(el, container, anchor); + if ((vnodeHook = props && props.onVnodeMounted) || + needCallTransitionHooks || + dirs) { + queuePostRenderEffect(() => { + vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode); + needCallTransitionHooks && transition.enter(el); + dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted'); + }, parentSuspense); + } + }; + const setScopeId = (el, vnode, scopeId, slotScopeIds, parentComponent) => { + if (scopeId) { + hostSetScopeId(el, scopeId); + } + if (slotScopeIds) { + for (let i = 0; i < slotScopeIds.length; i++) { + hostSetScopeId(el, slotScopeIds[i]); + } + } + if (parentComponent) { + let subTree = parentComponent.subTree; + if (subTree.patchFlag > 0 && + subTree.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) { + subTree = + filterSingleRoot(subTree.children) || subTree; + } + if (vnode === subTree) { + const parentVNode = parentComponent.vnode; + setScopeId(el, parentVNode, parentVNode.scopeId, parentVNode.slotScopeIds, parentComponent.parent); + } + } + }; + const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, start = 0) => { + for (let i = start; i < children.length; i++) { + const child = (children[i] = optimized + ? cloneIfMounted(children[i]) + : normalizeVNode(children[i])); + patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + }; + const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { + const el = (n2.el = n1.el); + let { patchFlag, dynamicChildren, dirs } = n2; + // #1426 take the old vnode's patch flag into account since user may clone a + // compiler-generated vnode, which de-opts to FULL_PROPS + patchFlag |= n1.patchFlag & 16 /* FULL_PROPS */; + const oldProps = n1.props || EMPTY_OBJ; + const newProps = n2.props || EMPTY_OBJ; + let vnodeHook; + // disable recurse in beforeUpdate hooks + parentComponent && toggleRecurse(parentComponent, false); + if ((vnodeHook = newProps.onVnodeBeforeUpdate)) { + invokeVNodeHook(vnodeHook, parentComponent, n2, n1); + } + if (dirs) { + invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate'); + } + parentComponent && toggleRecurse(parentComponent, true); + if (isHmrUpdating) { + // HMR updated, force full diff + patchFlag = 0; + optimized = false; + dynamicChildren = null; + } + const areChildrenSVG = isSVG && n2.type !== 'foreignObject'; + if (dynamicChildren) { + patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds); + if (parentComponent && parentComponent.type.__hmrId) { + traverseStaticChildren(n1, n2); + } + } + else if (!optimized) { + // full diff + patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds, false); + } + if (patchFlag > 0) { + // the presence of a patchFlag means this element's render code was + // generated by the compiler and can take the fast path. + // in this path old node and new node are guaranteed to have the same shape + // (i.e. at the exact same position in the source template) + if (patchFlag & 16 /* FULL_PROPS */) { + // element props contain dynamic keys, full diff needed + patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG); + } + else { + // class + // this flag is matched when the element has dynamic class bindings. + if (patchFlag & 2 /* CLASS */) { + if (oldProps.class !== newProps.class) { + hostPatchProp(el, 'class', null, newProps.class, isSVG); + } + } + // style + // this flag is matched when the element has dynamic style bindings + if (patchFlag & 4 /* STYLE */) { + hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG); + } + // props + // This flag is matched when the element has dynamic prop/attr bindings + // other than class and style. The keys of dynamic prop/attrs are saved for + // faster iteration. + // Note dynamic keys like :[foo]="bar" will cause this optimization to + // bail out and go through a full diff because we need to unset the old key + if (patchFlag & 8 /* PROPS */) { + // if the flag is present then dynamicProps must be non-null + const propsToUpdate = n2.dynamicProps; + for (let i = 0; i < propsToUpdate.length; i++) { + const key = propsToUpdate[i]; + const prev = oldProps[key]; + const next = newProps[key]; + // #1471 force patch value + if (next !== prev || key === 'value') { + hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren); + } + } + } + } + // text + // This flag is matched when the element has only dynamic text children. + if (patchFlag & 1 /* TEXT */) { + if (n1.children !== n2.children) { + hostSetElementText(el, n2.children); + } + } + } + else if (!optimized && dynamicChildren == null) { + // unoptimized, full diff + patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG); + } + if ((vnodeHook = newProps.onVnodeUpdated) || dirs) { + queuePostRenderEffect(() => { + vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1); + dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated'); + }, parentSuspense); + } + }; + // The fast path for blocks. + const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG, slotScopeIds) => { + for (let i = 0; i < newChildren.length; i++) { + const oldVNode = oldChildren[i]; + const newVNode = newChildren[i]; + // Determine the container (parent element) for the patch. + const container = + // oldVNode may be an errored async setup() component inside Suspense + // which will not have a mounted element + oldVNode.el && + // - In the case of a Fragment, we need to provide the actual parent + // of the Fragment itself so it can move its children. + (oldVNode.type === Fragment || + // - In the case of different nodes, there is going to be a replacement + // which also requires the correct parent container + !isSameVNodeType(oldVNode, newVNode) || + // - In the case of a component, it could contain anything. + oldVNode.shapeFlag & (6 /* COMPONENT */ | 64 /* TELEPORT */)) + ? hostParentNode(oldVNode.el) + : // In other cases, the parent container is not actually used so we + // just pass the block element here to avoid a DOM parentNode call. + fallbackContainer; + patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, true); + } + }; + const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => { + if (oldProps !== newProps) { + for (const key in newProps) { + // empty string is not valid prop + if (isReservedProp(key)) + continue; + const next = newProps[key]; + const prev = oldProps[key]; + // defer patching value + if (next !== prev && key !== 'value') { + hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren); + } + } + if (oldProps !== EMPTY_OBJ) { + for (const key in oldProps) { + if (!isReservedProp(key) && !(key in newProps)) { + hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren); + } + } + } + if ('value' in newProps) { + hostPatchProp(el, 'value', oldProps.value, newProps.value); + } + } + }; + const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { + const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText('')); + const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText('')); + let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2; + if (// #5523 dev root fragment may inherit directives + (isHmrUpdating || patchFlag & 2048 /* DEV_ROOT_FRAGMENT */)) { + // HMR updated / Dev root fragment (w/ comments), force full diff + patchFlag = 0; + optimized = false; + dynamicChildren = null; + } + // check if this is a slot fragment with :slotted scope ids + if (fragmentSlotScopeIds) { + slotScopeIds = slotScopeIds + ? slotScopeIds.concat(fragmentSlotScopeIds) + : fragmentSlotScopeIds; + } + if (n1 == null) { + hostInsert(fragmentStartAnchor, container, anchor); + hostInsert(fragmentEndAnchor, container, anchor); + // a fragment can only have array children + // since they are either generated by the compiler, or implicitly created + // from arrays. + mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + else { + if (patchFlag > 0 && + patchFlag & 64 /* STABLE_FRAGMENT */ && + dynamicChildren && + // #2715 the previous fragment could've been a BAILed one as a result + // of renderSlot() with no valid children + n1.dynamicChildren) { + // a stable fragment (template root or <template v-for>) doesn't need to + // patch children order, but it may contain dynamicChildren. + patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG, slotScopeIds); + if (parentComponent && parentComponent.type.__hmrId) { + traverseStaticChildren(n1, n2); + } + else if ( + // #2080 if the stable fragment has a key, it's a <template v-for> that may + // get moved around. Make sure all root level vnodes inherit el. + // #2134 or if it's a component root, it may also get moved around + // as the component is being moved. + n2.key != null || + (parentComponent && n2 === parentComponent.subTree)) { + traverseStaticChildren(n1, n2, true /* shallow */); + } + } + else { + // keyed / unkeyed, or manual fragments. + // for keyed & unkeyed, since they are compiler generated from v-for, + // each child is guaranteed to be a block so the fragment will never + // have dynamicChildren. + patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + } + }; + const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { + n2.slotScopeIds = slotScopeIds; + if (n1 == null) { + if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) { + parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized); + } + else { + mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized); + } + } + else { + updateComponent(n1, n2, optimized); + } + }; + const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => { + const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense)); + if (instance.type.__hmrId) { + registerHMR(instance); + } + { + pushWarningContext(initialVNode); + startMeasure(instance, `mount`); + } + // inject renderer internals for keepAlive + if (isKeepAlive(initialVNode)) { + instance.ctx.renderer = internals; + } + // resolve props and slots for setup context + { + { + startMeasure(instance, `init`); + } + setupComponent(instance); + { + endMeasure(instance, `init`); + } + } + // setup() is async. This component relies on async logic to be resolved + // before proceeding + if (instance.asyncDep) { + parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect); + // Give it a placeholder if this is not hydration + // TODO handle self-defined fallback + if (!initialVNode.el) { + const placeholder = (instance.subTree = createVNode(Comment)); + processCommentNode(null, placeholder, container, anchor); + } + return; + } + setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized); + { + popWarningContext(); + endMeasure(instance, `mount`); + } + }; + const updateComponent = (n1, n2, optimized) => { + const instance = (n2.component = n1.component); + if (shouldUpdateComponent(n1, n2, optimized)) { + if (instance.asyncDep && + !instance.asyncResolved) { + // async & still pending - just update props and slots + // since the component's reactive effect for render isn't set-up yet + { + pushWarningContext(n2); + } + updateComponentPreRender(instance, n2, optimized); + { + popWarningContext(); + } + return; + } + else { + // normal update + instance.next = n2; + // in case the child component is also queued, remove it to avoid + // double updating the same child component in the same flush. + invalidateJob(instance.update); + // instance.update is the reactive effect. + instance.update(); + } + } + else { + // no update needed. just copy over properties + n2.el = n1.el; + instance.vnode = n2; + } + }; + const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => { + const componentUpdateFn = () => { + if (!instance.isMounted) { + let vnodeHook; + const { el, props } = initialVNode; + const { bm, m, parent } = instance; + const isAsyncWrapperVNode = isAsyncWrapper(initialVNode); + toggleRecurse(instance, false); + // beforeMount hook + if (bm) { + invokeArrayFns(bm); + } + // onVnodeBeforeMount + if (!isAsyncWrapperVNode && + (vnodeHook = props && props.onVnodeBeforeMount)) { + invokeVNodeHook(vnodeHook, parent, initialVNode); + } + toggleRecurse(instance, true); + if (el && hydrateNode) { + // vnode has adopted host node - perform hydration instead of mount. + const hydrateSubTree = () => { + { + startMeasure(instance, `render`); + } + instance.subTree = renderComponentRoot(instance); + { + endMeasure(instance, `render`); + } + { + startMeasure(instance, `hydrate`); + } + hydrateNode(el, instance.subTree, instance, parentSuspense, null); + { + endMeasure(instance, `hydrate`); + } + }; + if (isAsyncWrapperVNode) { + initialVNode.type.__asyncLoader().then( + // note: we are moving the render call into an async callback, + // which means it won't track dependencies - but it's ok because + // a server-rendered async wrapper is already in resolved state + // and it will never need to change. + () => !instance.isUnmounted && hydrateSubTree()); + } + else { + hydrateSubTree(); + } + } + else { + { + startMeasure(instance, `render`); + } + const subTree = (instance.subTree = renderComponentRoot(instance)); + { + endMeasure(instance, `render`); + } + { + startMeasure(instance, `patch`); + } + patch(null, subTree, container, anchor, instance, parentSuspense, isSVG); + { + endMeasure(instance, `patch`); + } + initialVNode.el = subTree.el; + } + // mounted hook + if (m) { + queuePostRenderEffect(m, parentSuspense); + } + // onVnodeMounted + if (!isAsyncWrapperVNode && + (vnodeHook = props && props.onVnodeMounted)) { + const scopedInitialVNode = initialVNode; + queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, scopedInitialVNode), parentSuspense); + } + // activated hook for keep-alive roots. + // #1742 activated hook must be accessed after first render + // since the hook may be injected by a child keep-alive + if (initialVNode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */ || + (parent && + isAsyncWrapper(parent.vnode) && + parent.vnode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */)) { + instance.a && queuePostRenderEffect(instance.a, parentSuspense); + } + instance.isMounted = true; + { + devtoolsComponentAdded(instance); + } + // #2458: deference mount-only object parameters to prevent memleaks + initialVNode = container = anchor = null; + } + else { + // updateComponent + // This is triggered by mutation of component's own state (next: null) + // OR parent calling processComponent (next: VNode) + let { next, bu, u, parent, vnode } = instance; + let originNext = next; + let vnodeHook; + { + pushWarningContext(next || instance.vnode); + } + // Disallow component effect recursion during pre-lifecycle hooks. + toggleRecurse(instance, false); + if (next) { + next.el = vnode.el; + updateComponentPreRender(instance, next, optimized); + } + else { + next = vnode; + } + // beforeUpdate hook + if (bu) { + invokeArrayFns(bu); + } + // onVnodeBeforeUpdate + if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) { + invokeVNodeHook(vnodeHook, parent, next, vnode); + } + toggleRecurse(instance, true); + // render + { + startMeasure(instance, `render`); + } + const nextTree = renderComponentRoot(instance); + { + endMeasure(instance, `render`); + } + const prevTree = instance.subTree; + instance.subTree = nextTree; + { + startMeasure(instance, `patch`); + } + patch(prevTree, nextTree, + // parent may have changed if it's in a teleport + hostParentNode(prevTree.el), + // anchor may have changed if it's in a fragment + getNextHostNode(prevTree), instance, parentSuspense, isSVG); + { + endMeasure(instance, `patch`); + } + next.el = nextTree.el; + if (originNext === null) { + // self-triggered update. In case of HOC, update parent component + // vnode el. HOC is indicated by parent instance's subTree pointing + // to child component's vnode + updateHOCHostEl(instance, nextTree.el); + } + // updated hook + if (u) { + queuePostRenderEffect(u, parentSuspense); + } + // onVnodeUpdated + if ((vnodeHook = next.props && next.props.onVnodeUpdated)) { + queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, next, vnode), parentSuspense); + } + { + devtoolsComponentUpdated(instance); + } + { + popWarningContext(); + } + } + }; + // create reactive effect for rendering + const effect = (instance.effect = new ReactiveEffect(componentUpdateFn, () => queueJob(update), instance.scope // track it in component's effect scope + )); + const update = (instance.update = () => effect.run()); + update.id = instance.uid; + // allowRecurse + // #1801, #2043 component render effects should allow recursive updates + toggleRecurse(instance, true); + { + effect.onTrack = instance.rtc + ? e => invokeArrayFns(instance.rtc, e) + : void 0; + effect.onTrigger = instance.rtg + ? e => invokeArrayFns(instance.rtg, e) + : void 0; + update.ownerInstance = instance; + } + update(); + }; + const updateComponentPreRender = (instance, nextVNode, optimized) => { + nextVNode.component = instance; + const prevProps = instance.vnode.props; + instance.vnode = nextVNode; + instance.next = null; + updateProps(instance, nextVNode.props, prevProps, optimized); + updateSlots(instance, nextVNode.children, optimized); + pauseTracking(); + // props update may have triggered pre-flush watchers. + // flush them before the render update. + flushPreFlushCbs(undefined, instance.update); + resetTracking(); + }; + const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => { + const c1 = n1 && n1.children; + const prevShapeFlag = n1 ? n1.shapeFlag : 0; + const c2 = n2.children; + const { patchFlag, shapeFlag } = n2; + // fast path + if (patchFlag > 0) { + if (patchFlag & 128 /* KEYED_FRAGMENT */) { + // this could be either fully-keyed or mixed (some keyed some not) + // presence of patchFlag means children are guaranteed to be arrays + patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + return; + } + else if (patchFlag & 256 /* UNKEYED_FRAGMENT */) { + // unkeyed + patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + return; + } + } + // children has 3 possibilities: text, array or no children. + if (shapeFlag & 8 /* TEXT_CHILDREN */) { + // text children fast path + if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) { + unmountChildren(c1, parentComponent, parentSuspense); + } + if (c2 !== c1) { + hostSetElementText(container, c2); + } + } + else { + if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) { + // prev children was array + if (shapeFlag & 16 /* ARRAY_CHILDREN */) { + // two arrays, cannot assume anything, do full diff + patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + else { + // no new children, just unmount old + unmountChildren(c1, parentComponent, parentSuspense, true); + } + } + else { + // prev children was text OR null + // new children is array OR null + if (prevShapeFlag & 8 /* TEXT_CHILDREN */) { + hostSetElementText(container, ''); + } + // mount new if array + if (shapeFlag & 16 /* ARRAY_CHILDREN */) { + mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + } + } + }; + const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { + c1 = c1 || EMPTY_ARR; + c2 = c2 || EMPTY_ARR; + const oldLength = c1.length; + const newLength = c2.length; + const commonLength = Math.min(oldLength, newLength); + let i; + for (i = 0; i < commonLength; i++) { + const nextChild = (c2[i] = optimized + ? cloneIfMounted(c2[i]) + : normalizeVNode(c2[i])); + patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + if (oldLength > newLength) { + // remove old + unmountChildren(c1, parentComponent, parentSuspense, true, false, commonLength); + } + else { + // mount new + mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, commonLength); + } + }; + // can be all-keyed or mixed + const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { + let i = 0; + const l2 = c2.length; + let e1 = c1.length - 1; // prev ending index + let e2 = l2 - 1; // next ending index + // 1. sync from start + // (a b) c + // (a b) d e + while (i <= e1 && i <= e2) { + const n1 = c1[i]; + const n2 = (c2[i] = optimized + ? cloneIfMounted(c2[i]) + : normalizeVNode(c2[i])); + if (isSameVNodeType(n1, n2)) { + patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + else { + break; + } + i++; + } + // 2. sync from end + // a (b c) + // d e (b c) + while (i <= e1 && i <= e2) { + const n1 = c1[e1]; + const n2 = (c2[e2] = optimized + ? cloneIfMounted(c2[e2]) + : normalizeVNode(c2[e2])); + if (isSameVNodeType(n1, n2)) { + patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + else { + break; + } + e1--; + e2--; + } + // 3. common sequence + mount + // (a b) + // (a b) c + // i = 2, e1 = 1, e2 = 2 + // (a b) + // c (a b) + // i = 0, e1 = -1, e2 = 0 + if (i > e1) { + if (i <= e2) { + const nextPos = e2 + 1; + const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor; + while (i <= e2) { + patch(null, (c2[i] = optimized + ? cloneIfMounted(c2[i]) + : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + i++; + } + } + } + // 4. common sequence + unmount + // (a b) c + // (a b) + // i = 2, e1 = 2, e2 = 1 + // a (b c) + // (b c) + // i = 0, e1 = 0, e2 = -1 + else if (i > e2) { + while (i <= e1) { + unmount(c1[i], parentComponent, parentSuspense, true); + i++; + } + } + // 5. unknown sequence + // [i ... e1 + 1]: a b [c d e] f g + // [i ... e2 + 1]: a b [e d c h] f g + // i = 2, e1 = 4, e2 = 5 + else { + const s1 = i; // prev starting index + const s2 = i; // next starting index + // 5.1 build key:index map for newChildren + const keyToNewIndexMap = new Map(); + for (i = s2; i <= e2; i++) { + const nextChild = (c2[i] = optimized + ? cloneIfMounted(c2[i]) + : normalizeVNode(c2[i])); + if (nextChild.key != null) { + if (keyToNewIndexMap.has(nextChild.key)) { + warn$1(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`); + } + keyToNewIndexMap.set(nextChild.key, i); + } + } + // 5.2 loop through old children left to be patched and try to patch + // matching nodes & remove nodes that are no longer present + let j; + let patched = 0; + const toBePatched = e2 - s2 + 1; + let moved = false; + // used to track whether any node has moved + let maxNewIndexSoFar = 0; + // works as Map<newIndex, oldIndex> + // Note that oldIndex is offset by +1 + // and oldIndex = 0 is a special value indicating the new node has + // no corresponding old node. + // used for determining longest stable subsequence + const newIndexToOldIndexMap = new Array(toBePatched); + for (i = 0; i < toBePatched; i++) + newIndexToOldIndexMap[i] = 0; + for (i = s1; i <= e1; i++) { + const prevChild = c1[i]; + if (patched >= toBePatched) { + // all new children have been patched so this can only be a removal + unmount(prevChild, parentComponent, parentSuspense, true); + continue; + } + let newIndex; + if (prevChild.key != null) { + newIndex = keyToNewIndexMap.get(prevChild.key); + } + else { + // key-less node, try to locate a key-less node of the same type + for (j = s2; j <= e2; j++) { + if (newIndexToOldIndexMap[j - s2] === 0 && + isSameVNodeType(prevChild, c2[j])) { + newIndex = j; + break; + } + } + } + if (newIndex === undefined) { + unmount(prevChild, parentComponent, parentSuspense, true); + } + else { + newIndexToOldIndexMap[newIndex - s2] = i + 1; + if (newIndex >= maxNewIndexSoFar) { + maxNewIndexSoFar = newIndex; + } + else { + moved = true; + } + patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + patched++; + } + } + // 5.3 move and mount + // generate longest stable subsequence only when nodes have moved + const increasingNewIndexSequence = moved + ? getSequence(newIndexToOldIndexMap) + : EMPTY_ARR; + j = increasingNewIndexSequence.length - 1; + // looping backwards so that we can use last patched node as anchor + for (i = toBePatched - 1; i >= 0; i--) { + const nextIndex = s2 + i; + const nextChild = c2[nextIndex]; + const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor; + if (newIndexToOldIndexMap[i] === 0) { + // mount new + patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + else if (moved) { + // move if: + // There is no stable subsequence (e.g. a reverse) + // OR current node is not among the stable sequence + if (j < 0 || i !== increasingNewIndexSequence[j]) { + move(nextChild, container, anchor, 2 /* REORDER */); + } + else { + j--; + } + } + } + } + }; + const move = (vnode, container, anchor, moveType, parentSuspense = null) => { + const { el, type, transition, children, shapeFlag } = vnode; + if (shapeFlag & 6 /* COMPONENT */) { + move(vnode.component.subTree, container, anchor, moveType); + return; + } + if (shapeFlag & 128 /* SUSPENSE */) { + vnode.suspense.move(container, anchor, moveType); + return; + } + if (shapeFlag & 64 /* TELEPORT */) { + type.move(vnode, container, anchor, internals); + return; + } + if (type === Fragment) { + hostInsert(el, container, anchor); + for (let i = 0; i < children.length; i++) { + move(children[i], container, anchor, moveType); + } + hostInsert(vnode.anchor, container, anchor); + return; + } + if (type === Static) { + moveStaticNode(vnode, container, anchor); + return; + } + // single nodes + const needTransition = moveType !== 2 /* REORDER */ && + shapeFlag & 1 /* ELEMENT */ && + transition; + if (needTransition) { + if (moveType === 0 /* ENTER */) { + transition.beforeEnter(el); + hostInsert(el, container, anchor); + queuePostRenderEffect(() => transition.enter(el), parentSuspense); + } + else { + const { leave, delayLeave, afterLeave } = transition; + const remove = () => hostInsert(el, container, anchor); + const performLeave = () => { + leave(el, () => { + remove(); + afterLeave && afterLeave(); + }); + }; + if (delayLeave) { + delayLeave(el, remove, performLeave); + } + else { + performLeave(); + } + } + } + else { + hostInsert(el, container, anchor); + } + }; + const unmount = (vnode, parentComponent, parentSuspense, doRemove = false, optimized = false) => { + const { type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode; + // unset ref + if (ref != null) { + setRef(ref, null, parentSuspense, vnode, true); + } + if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) { + parentComponent.ctx.deactivate(vnode); + return; + } + const shouldInvokeDirs = shapeFlag & 1 /* ELEMENT */ && dirs; + const shouldInvokeVnodeHook = !isAsyncWrapper(vnode); + let vnodeHook; + if (shouldInvokeVnodeHook && + (vnodeHook = props && props.onVnodeBeforeUnmount)) { + invokeVNodeHook(vnodeHook, parentComponent, vnode); + } + if (shapeFlag & 6 /* COMPONENT */) { + unmountComponent(vnode.component, parentSuspense, doRemove); + } + else { + if (shapeFlag & 128 /* SUSPENSE */) { + vnode.suspense.unmount(parentSuspense, doRemove); + return; + } + if (shouldInvokeDirs) { + invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount'); + } + if (shapeFlag & 64 /* TELEPORT */) { + vnode.type.remove(vnode, parentComponent, parentSuspense, optimized, internals, doRemove); + } + else if (dynamicChildren && + // #1153: fast path should not be taken for non-stable (v-for) fragments + (type !== Fragment || + (patchFlag > 0 && patchFlag & 64 /* STABLE_FRAGMENT */))) { + // fast path for block nodes: only need to unmount dynamic children. + unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true); + } + else if ((type === Fragment && + patchFlag & + (128 /* KEYED_FRAGMENT */ | 256 /* UNKEYED_FRAGMENT */)) || + (!optimized && shapeFlag & 16 /* ARRAY_CHILDREN */)) { + unmountChildren(children, parentComponent, parentSuspense); + } + if (doRemove) { + remove(vnode); + } + } + if ((shouldInvokeVnodeHook && + (vnodeHook = props && props.onVnodeUnmounted)) || + shouldInvokeDirs) { + queuePostRenderEffect(() => { + vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode); + shouldInvokeDirs && + invokeDirectiveHook(vnode, null, parentComponent, 'unmounted'); + }, parentSuspense); + } + }; + const remove = vnode => { + const { type, el, anchor, transition } = vnode; + if (type === Fragment) { + if (vnode.patchFlag > 0 && + vnode.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */ && + transition && + !transition.persisted) { + vnode.children.forEach(child => { + if (child.type === Comment) { + hostRemove(child.el); + } + else { + remove(child); + } + }); + } + else { + removeFragment(el, anchor); + } + return; + } + if (type === Static) { + removeStaticNode(vnode); + return; + } + const performRemove = () => { + hostRemove(el); + if (transition && !transition.persisted && transition.afterLeave) { + transition.afterLeave(); + } + }; + if (vnode.shapeFlag & 1 /* ELEMENT */ && + transition && + !transition.persisted) { + const { leave, delayLeave } = transition; + const performLeave = () => leave(el, performRemove); + if (delayLeave) { + delayLeave(vnode.el, performRemove, performLeave); + } + else { + performLeave(); + } + } + else { + performRemove(); + } + }; + const removeFragment = (cur, end) => { + // For fragments, directly remove all contained DOM nodes. + // (fragment child nodes cannot have transition) + let next; + while (cur !== end) { + next = hostNextSibling(cur); + hostRemove(cur); + cur = next; + } + hostRemove(end); + }; + const unmountComponent = (instance, parentSuspense, doRemove) => { + if (instance.type.__hmrId) { + unregisterHMR(instance); + } + const { bum, scope, update, subTree, um } = instance; + // beforeUnmount hook + if (bum) { + invokeArrayFns(bum); + } + // stop effects in component scope + scope.stop(); + // update may be null if a component is unmounted before its async + // setup has resolved. + if (update) { + // so that scheduler will no longer invoke it + update.active = false; + unmount(subTree, instance, parentSuspense, doRemove); + } + // unmounted hook + if (um) { + queuePostRenderEffect(um, parentSuspense); + } + queuePostRenderEffect(() => { + instance.isUnmounted = true; + }, parentSuspense); + // A component with async dep inside a pending suspense is unmounted before + // its async dep resolves. This should remove the dep from the suspense, and + // cause the suspense to resolve immediately if that was the last dep. + if (parentSuspense && + parentSuspense.pendingBranch && + !parentSuspense.isUnmounted && + instance.asyncDep && + !instance.asyncResolved && + instance.suspenseId === parentSuspense.pendingId) { + parentSuspense.deps--; + if (parentSuspense.deps === 0) { + parentSuspense.resolve(); + } + } + { + devtoolsComponentRemoved(instance); + } + }; + const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, optimized = false, start = 0) => { + for (let i = start; i < children.length; i++) { + unmount(children[i], parentComponent, parentSuspense, doRemove, optimized); + } + }; + const getNextHostNode = vnode => { + if (vnode.shapeFlag & 6 /* COMPONENT */) { + return getNextHostNode(vnode.component.subTree); + } + if (vnode.shapeFlag & 128 /* SUSPENSE */) { + return vnode.suspense.next(); + } + return hostNextSibling((vnode.anchor || vnode.el)); + }; + const render = (vnode, container, isSVG) => { + if (vnode == null) { + if (container._vnode) { + unmount(container._vnode, null, null, true); + } + } + else { + patch(container._vnode || null, vnode, container, null, null, null, isSVG); + } + flushPostFlushCbs(); + container._vnode = vnode; + }; + const internals = { + p: patch, + um: unmount, + m: move, + r: remove, + mt: mountComponent, + mc: mountChildren, + pc: patchChildren, + pbc: patchBlockChildren, + n: getNextHostNode, + o: options + }; + let hydrate; + let hydrateNode; + if (createHydrationFns) { + [hydrate, hydrateNode] = createHydrationFns(internals); + } + return { + render, + hydrate, + createApp: createAppAPI(render, hydrate) + }; + } + function toggleRecurse({ effect, update }, allowed) { + effect.allowRecurse = update.allowRecurse = allowed; + } + /** + * #1156 + * When a component is HMR-enabled, we need to make sure that all static nodes + * inside a block also inherit the DOM element from the previous tree so that + * HMR updates (which are full updates) can retrieve the element for patching. + * + * #2080 + * Inside keyed `template` fragment static children, if a fragment is moved, + * the children will always be moved. Therefore, in order to ensure correct move + * position, el should be inherited from previous nodes. + */ + function traverseStaticChildren(n1, n2, shallow = false) { + const ch1 = n1.children; + const ch2 = n2.children; + if (isArray(ch1) && isArray(ch2)) { + for (let i = 0; i < ch1.length; i++) { + // this is only called in the optimized path so array children are + // guaranteed to be vnodes + const c1 = ch1[i]; + let c2 = ch2[i]; + if (c2.shapeFlag & 1 /* ELEMENT */ && !c2.dynamicChildren) { + if (c2.patchFlag <= 0 || c2.patchFlag === 32 /* HYDRATE_EVENTS */) { + c2 = ch2[i] = cloneIfMounted(ch2[i]); + c2.el = c1.el; + } + if (!shallow) + traverseStaticChildren(c1, c2); + } + // also inherit for comment nodes, but not placeholders (e.g. v-if which + // would have received .el during block patch) + if (c2.type === Comment && !c2.el) { + c2.el = c1.el; + } + } + } + } + // https://en.wikipedia.org/wiki/Longest_increasing_subsequence + function getSequence(arr) { + const p = arr.slice(); + const result = [0]; + let i, j, u, v, c; + const len = arr.length; + for (i = 0; i < len; i++) { + const arrI = arr[i]; + if (arrI !== 0) { + j = result[result.length - 1]; + if (arr[j] < arrI) { + p[i] = j; + result.push(i); + continue; + } + u = 0; + v = result.length - 1; + while (u < v) { + c = (u + v) >> 1; + if (arr[result[c]] < arrI) { + u = c + 1; + } + else { + v = c; + } + } + if (arrI < arr[result[u]]) { + if (u > 0) { + p[i] = result[u - 1]; + } + result[u] = i; + } + } + } + u = result.length; + v = result[u - 1]; + while (u-- > 0) { + result[u] = v; + v = p[v]; + } + return result; + } + + const isTeleport = (type) => type.__isTeleport; + const isTeleportDisabled = (props) => props && (props.disabled || props.disabled === ''); + const isTargetSVG = (target) => typeof SVGElement !== 'undefined' && target instanceof SVGElement; + const resolveTarget = (props, select) => { + const targetSelector = props && props.to; + if (isString(targetSelector)) { + if (!select) { + warn$1(`Current renderer does not support string target for Teleports. ` + + `(missing querySelector renderer option)`); + return null; + } + else { + const target = select(targetSelector); + if (!target) { + warn$1(`Failed to locate Teleport target with selector "${targetSelector}". ` + + `Note the target element must exist before the component is mounted - ` + + `i.e. the target cannot be rendered by the component itself, and ` + + `ideally should be outside of the entire Vue component tree.`); + } + return target; + } + } + else { + if (!targetSelector && !isTeleportDisabled(props)) { + warn$1(`Invalid Teleport target: ${targetSelector}`); + } + return targetSelector; + } + }; + const TeleportImpl = { + __isTeleport: true, + process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals) { + const { mc: mountChildren, pc: patchChildren, pbc: patchBlockChildren, o: { insert, querySelector, createText, createComment } } = internals; + const disabled = isTeleportDisabled(n2.props); + let { shapeFlag, children, dynamicChildren } = n2; + // #3302 + // HMR updated, force full diff + if (isHmrUpdating) { + optimized = false; + dynamicChildren = null; + } + if (n1 == null) { + // insert anchors in the main view + const placeholder = (n2.el = createComment('teleport start') + ); + const mainAnchor = (n2.anchor = createComment('teleport end') + ); + insert(placeholder, container, anchor); + insert(mainAnchor, container, anchor); + const target = (n2.target = resolveTarget(n2.props, querySelector)); + const targetAnchor = (n2.targetAnchor = createText('')); + if (target) { + insert(targetAnchor, target); + // #2652 we could be teleporting from a non-SVG tree into an SVG tree + isSVG = isSVG || isTargetSVG(target); + } + else if (!disabled) { + warn$1('Invalid Teleport target on mount:', target, `(${typeof target})`); + } + const mount = (container, anchor) => { + // Teleport *always* has Array children. This is enforced in both the + // compiler and vnode children normalization. + if (shapeFlag & 16 /* ARRAY_CHILDREN */) { + mountChildren(children, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); + } + }; + if (disabled) { + mount(container, mainAnchor); + } + else if (target) { + mount(target, targetAnchor); + } + } + else { + // update content + n2.el = n1.el; + const mainAnchor = (n2.anchor = n1.anchor); + const target = (n2.target = n1.target); + const targetAnchor = (n2.targetAnchor = n1.targetAnchor); + const wasDisabled = isTeleportDisabled(n1.props); + const currentContainer = wasDisabled ? container : target; + const currentAnchor = wasDisabled ? mainAnchor : targetAnchor; + isSVG = isSVG || isTargetSVG(target); + if (dynamicChildren) { + // fast path when the teleport happens to be a block root + patchBlockChildren(n1.dynamicChildren, dynamicChildren, currentContainer, parentComponent, parentSuspense, isSVG, slotScopeIds); + // even in block tree mode we need to make sure all root-level nodes + // in the teleport inherit previous DOM references so that they can + // be moved in future patches. + traverseStaticChildren(n1, n2, true); + } + else if (!optimized) { + patchChildren(n1, n2, currentContainer, currentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, false); + } + if (disabled) { + if (!wasDisabled) { + // enabled -> disabled + // move into main container + moveTeleport(n2, container, mainAnchor, internals, 1 /* TOGGLE */); + } + } + else { + // target changed + if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) { + const nextTarget = (n2.target = resolveTarget(n2.props, querySelector)); + if (nextTarget) { + moveTeleport(n2, nextTarget, null, internals, 0 /* TARGET_CHANGE */); + } + else { + warn$1('Invalid Teleport target on update:', target, `(${typeof target})`); + } + } + else if (wasDisabled) { + // disabled -> enabled + // move into teleport target + moveTeleport(n2, target, targetAnchor, internals, 1 /* TOGGLE */); + } + } + } + }, + remove(vnode, parentComponent, parentSuspense, optimized, { um: unmount, o: { remove: hostRemove } }, doRemove) { + const { shapeFlag, children, anchor, targetAnchor, target, props } = vnode; + if (target) { + hostRemove(targetAnchor); + } + // an unmounted teleport should always remove its children if not disabled + if (doRemove || !isTeleportDisabled(props)) { + hostRemove(anchor); + if (shapeFlag & 16 /* ARRAY_CHILDREN */) { + for (let i = 0; i < children.length; i++) { + const child = children[i]; + unmount(child, parentComponent, parentSuspense, true, !!child.dynamicChildren); + } + } + } + }, + move: moveTeleport, + hydrate: hydrateTeleport + }; + function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }, moveType = 2 /* REORDER */) { + // move target anchor if this is a target change. + if (moveType === 0 /* TARGET_CHANGE */) { + insert(vnode.targetAnchor, container, parentAnchor); + } + const { el, anchor, shapeFlag, children, props } = vnode; + const isReorder = moveType === 2 /* REORDER */; + // move main view anchor if this is a re-order. + if (isReorder) { + insert(el, container, parentAnchor); + } + // if this is a re-order and teleport is enabled (content is in target) + // do not move children. So the opposite is: only move children if this + // is not a reorder, or the teleport is disabled + if (!isReorder || isTeleportDisabled(props)) { + // Teleport has either Array children or no children. + if (shapeFlag & 16 /* ARRAY_CHILDREN */) { + for (let i = 0; i < children.length; i++) { + move(children[i], container, parentAnchor, 2 /* REORDER */); + } + } + } + // move main view anchor if this is a re-order. + if (isReorder) { + insert(anchor, container, parentAnchor); + } + } + function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, { o: { nextSibling, parentNode, querySelector } }, hydrateChildren) { + const target = (vnode.target = resolveTarget(vnode.props, querySelector)); + if (target) { + // if multiple teleports rendered to the same target element, we need to + // pick up from where the last teleport finished instead of the first node + const targetNode = target._lpa || target.firstChild; + if (vnode.shapeFlag & 16 /* ARRAY_CHILDREN */) { + if (isTeleportDisabled(vnode.props)) { + vnode.anchor = hydrateChildren(nextSibling(node), vnode, parentNode(node), parentComponent, parentSuspense, slotScopeIds, optimized); + vnode.targetAnchor = targetNode; + } + else { + vnode.anchor = nextSibling(node); + // lookahead until we find the target anchor + // we cannot rely on return value of hydrateChildren() because there + // could be nested teleports + let targetAnchor = targetNode; + while (targetAnchor) { + targetAnchor = nextSibling(targetAnchor); + if (targetAnchor && + targetAnchor.nodeType === 8 && + targetAnchor.data === 'teleport anchor') { + vnode.targetAnchor = targetAnchor; + target._lpa = + vnode.targetAnchor && nextSibling(vnode.targetAnchor); + break; + } + } + hydrateChildren(targetNode, vnode, target, parentComponent, parentSuspense, slotScopeIds, optimized); + } + } + } + return vnode.anchor && nextSibling(vnode.anchor); + } + // Force-casted public typing for h and TSX props inference + const Teleport = TeleportImpl; + + const Fragment = Symbol('Fragment' ); + const Text = Symbol('Text' ); + const Comment = Symbol('Comment' ); + const Static = Symbol('Static' ); + // Since v-if and v-for are the two possible ways node structure can dynamically + // change, once we consider v-if branches and each v-for fragment a block, we + // can divide a template into nested blocks, and within each block the node + // structure would be stable. This allows us to skip most children diffing + // and only worry about the dynamic nodes (indicated by patch flags). + const blockStack = []; + let currentBlock = null; + /** + * Open a block. + * This must be called before `createBlock`. It cannot be part of `createBlock` + * because the children of the block are evaluated before `createBlock` itself + * is called. The generated code typically looks like this: + * + * ```js + * function render() { + * return (openBlock(),createBlock('div', null, [...])) + * } + * ``` + * disableTracking is true when creating a v-for fragment block, since a v-for + * fragment always diffs its children. + * + * @private + */ + function openBlock(disableTracking = false) { + blockStack.push((currentBlock = disableTracking ? null : [])); + } + function closeBlock() { + blockStack.pop(); + currentBlock = blockStack[blockStack.length - 1] || null; + } + // Whether we should be tracking dynamic child nodes inside a block. + // Only tracks when this value is > 0 + // We are not using a simple boolean because this value may need to be + // incremented/decremented by nested usage of v-once (see below) + let isBlockTreeEnabled = 1; + /** + * Block tracking sometimes needs to be disabled, for example during the + * creation of a tree that needs to be cached by v-once. The compiler generates + * code like this: + * + * ``` js + * _cache[1] || ( + * setBlockTracking(-1), + * _cache[1] = createVNode(...), + * setBlockTracking(1), + * _cache[1] + * ) + * ``` + * + * @private + */ + function setBlockTracking(value) { + isBlockTreeEnabled += value; + } + function setupBlock(vnode) { + // save current block children on the block vnode + vnode.dynamicChildren = + isBlockTreeEnabled > 0 ? currentBlock || EMPTY_ARR : null; + // close block + closeBlock(); + // a block is always going to be patched, so track it as a child of its + // parent block + if (isBlockTreeEnabled > 0 && currentBlock) { + currentBlock.push(vnode); + } + return vnode; + } + /** + * @private + */ + function createElementBlock(type, props, children, patchFlag, dynamicProps, shapeFlag) { + return setupBlock(createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, true /* isBlock */)); + } + /** + * Create a block root vnode. Takes the same exact arguments as `createVNode`. + * A block root keeps track of dynamic nodes within the block in the + * `dynamicChildren` array. + * + * @private + */ + function createBlock(type, props, children, patchFlag, dynamicProps) { + return setupBlock(createVNode(type, props, children, patchFlag, dynamicProps, true /* isBlock: prevent a block from tracking itself */)); + } + function isVNode(value) { + return value ? value.__v_isVNode === true : false; + } + function isSameVNodeType(n1, n2) { + if (n2.shapeFlag & 6 /* COMPONENT */ && + hmrDirtyComponents.has(n2.type)) { + // HMR only: if the component has been hot-updated, force a reload. + return false; + } + return n1.type === n2.type && n1.key === n2.key; + } + let vnodeArgsTransformer; + /** + * Internal API for registering an arguments transform for createVNode + * used for creating stubs in the test-utils + * It is *internal* but needs to be exposed for test-utils to pick up proper + * typings + */ + function transformVNodeArgs(transformer) { + vnodeArgsTransformer = transformer; + } + const createVNodeWithArgsTransform = (...args) => { + return _createVNode(...(vnodeArgsTransformer + ? vnodeArgsTransformer(args, currentRenderingInstance) + : args)); + }; + const InternalObjectKey = `__vInternal`; + const normalizeKey = ({ key }) => key != null ? key : null; + const normalizeRef = ({ ref, ref_key, ref_for }) => { + return (ref != null + ? isString(ref) || isRef(ref) || isFunction(ref) + ? { i: currentRenderingInstance, r: ref, k: ref_key, f: !!ref_for } + : ref + : null); + }; + function createBaseVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, shapeFlag = type === Fragment ? 0 : 1 /* ELEMENT */, isBlockNode = false, needFullChildrenNormalization = false) { + const vnode = { + __v_isVNode: true, + __v_skip: true, + type, + props, + key: props && normalizeKey(props), + ref: props && normalizeRef(props), + scopeId: currentScopeId, + slotScopeIds: null, + children, + component: null, + suspense: null, + ssContent: null, + ssFallback: null, + dirs: null, + transition: null, + el: null, + anchor: null, + target: null, + targetAnchor: null, + staticCount: 0, + shapeFlag, + patchFlag, + dynamicProps, + dynamicChildren: null, + appContext: null + }; + if (needFullChildrenNormalization) { + normalizeChildren(vnode, children); + // normalize suspense children + if (shapeFlag & 128 /* SUSPENSE */) { + type.normalize(vnode); + } + } + else if (children) { + // compiled element vnode - if children is passed, only possible types are + // string or Array. + vnode.shapeFlag |= isString(children) + ? 8 /* TEXT_CHILDREN */ + : 16 /* ARRAY_CHILDREN */; + } + // validate key + if (vnode.key !== vnode.key) { + warn$1(`VNode created with invalid key (NaN). VNode type:`, vnode.type); + } + // track vnode for block tree + if (isBlockTreeEnabled > 0 && + // avoid a block node from tracking itself + !isBlockNode && + // has current parent block + currentBlock && + // presence of a patch flag indicates this node needs patching on updates. + // component nodes also should always be patched, because even if the + // component doesn't need to update, it needs to persist the instance on to + // the next vnode so that it can be properly unmounted later. + (vnode.patchFlag > 0 || shapeFlag & 6 /* COMPONENT */) && + // the EVENTS flag is only for hydration and if it is the only flag, the + // vnode should not be considered dynamic due to handler caching. + vnode.patchFlag !== 32 /* HYDRATE_EVENTS */) { + currentBlock.push(vnode); + } + return vnode; + } + const createVNode = (createVNodeWithArgsTransform ); + function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) { + if (!type || type === NULL_DYNAMIC_COMPONENT) { + if (!type) { + warn$1(`Invalid vnode type when creating vnode: ${type}.`); + } + type = Comment; + } + if (isVNode(type)) { + // createVNode receiving an existing vnode. This happens in cases like + // <component :is="vnode"/> + // #2078 make sure to merge refs during the clone instead of overwriting it + const cloned = cloneVNode(type, props, true /* mergeRef: true */); + if (children) { + normalizeChildren(cloned, children); + } + if (isBlockTreeEnabled > 0 && !isBlockNode && currentBlock) { + if (cloned.shapeFlag & 6 /* COMPONENT */) { + currentBlock[currentBlock.indexOf(type)] = cloned; + } + else { + currentBlock.push(cloned); + } + } + cloned.patchFlag |= -2 /* BAIL */; + return cloned; + } + // class component normalization. + if (isClassComponent(type)) { + type = type.__vccOpts; + } + // class & style normalization. + if (props) { + // for reactive or proxy objects, we need to clone it to enable mutation. + props = guardReactiveProps(props); + let { class: klass, style } = props; + if (klass && !isString(klass)) { + props.class = normalizeClass(klass); + } + if (isObject(style)) { + // reactive state objects need to be cloned since they are likely to be + // mutated + if (isProxy(style) && !isArray(style)) { + style = extend({}, style); + } + props.style = normalizeStyle(style); + } + } + // encode the vnode type information into a bitmap + const shapeFlag = isString(type) + ? 1 /* ELEMENT */ + : isSuspense(type) + ? 128 /* SUSPENSE */ + : isTeleport(type) + ? 64 /* TELEPORT */ + : isObject(type) + ? 4 /* STATEFUL_COMPONENT */ + : isFunction(type) + ? 2 /* FUNCTIONAL_COMPONENT */ + : 0; + if (shapeFlag & 4 /* STATEFUL_COMPONENT */ && isProxy(type)) { + type = toRaw(type); + warn$1(`Vue received a Component which was made a reactive object. This can ` + + `lead to unnecessary performance overhead, and should be avoided by ` + + `marking the component with \`markRaw\` or using \`shallowRef\` ` + + `instead of \`ref\`.`, `\nComponent that was made reactive: `, type); + } + return createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, isBlockNode, true); + } + function guardReactiveProps(props) { + if (!props) + return null; + return isProxy(props) || InternalObjectKey in props + ? extend({}, props) + : props; + } + function cloneVNode(vnode, extraProps, mergeRef = false) { + // This is intentionally NOT using spread or extend to avoid the runtime + // key enumeration cost. + const { props, ref, patchFlag, children } = vnode; + const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props; + const cloned = { + __v_isVNode: true, + __v_skip: true, + type: vnode.type, + props: mergedProps, + key: mergedProps && normalizeKey(mergedProps), + ref: extraProps && extraProps.ref + ? // #2078 in the case of <component :is="vnode" ref="extra"/> + // if the vnode itself already has a ref, cloneVNode will need to merge + // the refs so the single vnode can be set on multiple refs + mergeRef && ref + ? isArray(ref) + ? ref.concat(normalizeRef(extraProps)) + : [ref, normalizeRef(extraProps)] + : normalizeRef(extraProps) + : ref, + scopeId: vnode.scopeId, + slotScopeIds: vnode.slotScopeIds, + children: patchFlag === -1 /* HOISTED */ && isArray(children) + ? children.map(deepCloneVNode) + : children, + target: vnode.target, + targetAnchor: vnode.targetAnchor, + staticCount: vnode.staticCount, + shapeFlag: vnode.shapeFlag, + // if the vnode is cloned with extra props, we can no longer assume its + // existing patch flag to be reliable and need to add the FULL_PROPS flag. + // note: preserve flag for fragments since they use the flag for children + // fast paths only. + patchFlag: extraProps && vnode.type !== Fragment + ? patchFlag === -1 // hoisted node + ? 16 /* FULL_PROPS */ + : patchFlag | 16 /* FULL_PROPS */ + : patchFlag, + dynamicProps: vnode.dynamicProps, + dynamicChildren: vnode.dynamicChildren, + appContext: vnode.appContext, + dirs: vnode.dirs, + transition: vnode.transition, + // These should technically only be non-null on mounted VNodes. However, + // they *should* be copied for kept-alive vnodes. So we just always copy + // them since them being non-null during a mount doesn't affect the logic as + // they will simply be overwritten. + component: vnode.component, + suspense: vnode.suspense, + ssContent: vnode.ssContent && cloneVNode(vnode.ssContent), + ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback), + el: vnode.el, + anchor: vnode.anchor + }; + return cloned; + } + /** + * Dev only, for HMR of hoisted vnodes reused in v-for + * https://github.com/vitejs/vite/issues/2022 + */ + function deepCloneVNode(vnode) { + const cloned = cloneVNode(vnode); + if (isArray(vnode.children)) { + cloned.children = vnode.children.map(deepCloneVNode); + } + return cloned; + } + /** + * @private + */ + function createTextVNode(text = ' ', flag = 0) { + return createVNode(Text, null, text, flag); + } + /** + * @private + */ + function createStaticVNode(content, numberOfNodes) { + // A static vnode can contain multiple stringified elements, and the number + // of elements is necessary for hydration. + const vnode = createVNode(Static, null, content); + vnode.staticCount = numberOfNodes; + return vnode; + } + /** + * @private + */ + function createCommentVNode(text = '', + // when used as the v-else branch, the comment node must be created as a + // block to ensure correct updates. + asBlock = false) { + return asBlock + ? (openBlock(), createBlock(Comment, null, text)) + : createVNode(Comment, null, text); + } + function normalizeVNode(child) { + if (child == null || typeof child === 'boolean') { + // empty placeholder + return createVNode(Comment); + } + else if (isArray(child)) { + // fragment + return createVNode(Fragment, null, + // #3666, avoid reference pollution when reusing vnode + child.slice()); + } + else if (typeof child === 'object') { + // already vnode, this should be the most common since compiled templates + // always produce all-vnode children arrays + return cloneIfMounted(child); + } + else { + // strings and numbers + return createVNode(Text, null, String(child)); + } + } + // optimized normalization for template-compiled render fns + function cloneIfMounted(child) { + return child.el === null || child.memo ? child : cloneVNode(child); + } + function normalizeChildren(vnode, children) { + let type = 0; + const { shapeFlag } = vnode; + if (children == null) { + children = null; + } + else if (isArray(children)) { + type = 16 /* ARRAY_CHILDREN */; + } + else if (typeof children === 'object') { + if (shapeFlag & (1 /* ELEMENT */ | 64 /* TELEPORT */)) { + // Normalize slot to plain children for plain element and Teleport + const slot = children.default; + if (slot) { + // _c marker is added by withCtx() indicating this is a compiled slot + slot._c && (slot._d = false); + normalizeChildren(vnode, slot()); + slot._c && (slot._d = true); + } + return; + } + else { + type = 32 /* SLOTS_CHILDREN */; + const slotFlag = children._; + if (!slotFlag && !(InternalObjectKey in children)) { + children._ctx = currentRenderingInstance; + } + else if (slotFlag === 3 /* FORWARDED */ && currentRenderingInstance) { + // a child component receives forwarded slots from the parent. + // its slot type is determined by its parent's slot type. + if (currentRenderingInstance.slots._ === 1 /* STABLE */) { + children._ = 1 /* STABLE */; + } + else { + children._ = 2 /* DYNAMIC */; + vnode.patchFlag |= 1024 /* DYNAMIC_SLOTS */; + } + } + } + } + else if (isFunction(children)) { + children = { default: children, _ctx: currentRenderingInstance }; + type = 32 /* SLOTS_CHILDREN */; + } + else { + children = String(children); + // force teleport children to array so it can be moved around + if (shapeFlag & 64 /* TELEPORT */) { + type = 16 /* ARRAY_CHILDREN */; + children = [createTextVNode(children)]; + } + else { + type = 8 /* TEXT_CHILDREN */; + } + } + vnode.children = children; + vnode.shapeFlag |= type; + } + function mergeProps(...args) { + const ret = {}; + for (let i = 0; i < args.length; i++) { + const toMerge = args[i]; + for (const key in toMerge) { + if (key === 'class') { + if (ret.class !== toMerge.class) { + ret.class = normalizeClass([ret.class, toMerge.class]); + } + } + else if (key === 'style') { + ret.style = normalizeStyle([ret.style, toMerge.style]); + } + else if (isOn(key)) { + const existing = ret[key]; + const incoming = toMerge[key]; + if (incoming && + existing !== incoming && + !(isArray(existing) && existing.includes(incoming))) { + ret[key] = existing + ? [].concat(existing, incoming) + : incoming; + } + } + else if (key !== '') { + ret[key] = toMerge[key]; + } + } + } + return ret; + } + function invokeVNodeHook(hook, instance, vnode, prevVNode = null) { + callWithAsyncErrorHandling(hook, instance, 7 /* VNODE_HOOK */, [ + vnode, + prevVNode + ]); + } + + const emptyAppContext = createAppContext(); + let uid$1 = 0; + function createComponentInstance(vnode, parent, suspense) { + const type = vnode.type; + // inherit parent app context - or - if root, adopt from root vnode + const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext; + const instance = { + uid: uid$1++, + vnode, + type, + parent, + appContext, + root: null, + next: null, + subTree: null, + effect: null, + update: null, + scope: new EffectScope(true /* detached */), + render: null, + proxy: null, + exposed: null, + exposeProxy: null, + withProxy: null, + provides: parent ? parent.provides : Object.create(appContext.provides), + accessCache: null, + renderCache: [], + // local resolved assets + components: null, + directives: null, + // resolved props and emits options + propsOptions: normalizePropsOptions(type, appContext), + emitsOptions: normalizeEmitsOptions(type, appContext), + // emit + emit: null, + emitted: null, + // props default value + propsDefaults: EMPTY_OBJ, + // inheritAttrs + inheritAttrs: type.inheritAttrs, + // state + ctx: EMPTY_OBJ, + data: EMPTY_OBJ, + props: EMPTY_OBJ, + attrs: EMPTY_OBJ, + slots: EMPTY_OBJ, + refs: EMPTY_OBJ, + setupState: EMPTY_OBJ, + setupContext: null, + // suspense related + suspense, + suspenseId: suspense ? suspense.pendingId : 0, + asyncDep: null, + asyncResolved: false, + // lifecycle hooks + // not using enums here because it results in computed properties + isMounted: false, + isUnmounted: false, + isDeactivated: false, + bc: null, + c: null, + bm: null, + m: null, + bu: null, + u: null, + um: null, + bum: null, + da: null, + a: null, + rtg: null, + rtc: null, + ec: null, + sp: null + }; + { + instance.ctx = createDevRenderContext(instance); + } + instance.root = parent ? parent.root : instance; + instance.emit = emit$1.bind(null, instance); + // apply custom element special handling + if (vnode.ce) { + vnode.ce(instance); + } + return instance; + } + let currentInstance = null; + const getCurrentInstance = () => currentInstance || currentRenderingInstance; + const setCurrentInstance = (instance) => { + currentInstance = instance; + instance.scope.on(); + }; + const unsetCurrentInstance = () => { + currentInstance && currentInstance.scope.off(); + currentInstance = null; + }; + const isBuiltInTag = /*#__PURE__*/ makeMap('slot,component'); + function validateComponentName(name, config) { + const appIsNativeTag = config.isNativeTag || NO; + if (isBuiltInTag(name) || appIsNativeTag(name)) { + warn$1('Do not use built-in or reserved HTML elements as component id: ' + name); + } + } + function isStatefulComponent(instance) { + return instance.vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */; + } + let isInSSRComponentSetup = false; + function setupComponent(instance, isSSR = false) { + isInSSRComponentSetup = isSSR; + const { props, children } = instance.vnode; + const isStateful = isStatefulComponent(instance); + initProps(instance, props, isStateful, isSSR); + initSlots(instance, children); + const setupResult = isStateful + ? setupStatefulComponent(instance, isSSR) + : undefined; + isInSSRComponentSetup = false; + return setupResult; + } + function setupStatefulComponent(instance, isSSR) { + var _a; + const Component = instance.type; + { + if (Component.name) { + validateComponentName(Component.name, instance.appContext.config); + } + if (Component.components) { + const names = Object.keys(Component.components); + for (let i = 0; i < names.length; i++) { + validateComponentName(names[i], instance.appContext.config); + } + } + if (Component.directives) { + const names = Object.keys(Component.directives); + for (let i = 0; i < names.length; i++) { + validateDirectiveName(names[i]); + } + } + if (Component.compilerOptions && isRuntimeOnly()) { + warn$1(`"compilerOptions" is only supported when using a build of Vue that ` + + `includes the runtime compiler. Since you are using a runtime-only ` + + `build, the options should be passed via your build tool config instead.`); + } + } + // 0. create render proxy property access cache + instance.accessCache = Object.create(null); + // 1. create public instance / render proxy + // also mark it raw so it's never observed + instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers)); + { + exposePropsOnRenderContext(instance); + } + // 2. call setup() + const { setup } = Component; + if (setup) { + const setupContext = (instance.setupContext = + setup.length > 1 ? createSetupContext(instance) : null); + setCurrentInstance(instance); + pauseTracking(); + const setupResult = callWithErrorHandling(setup, instance, 0 /* SETUP_FUNCTION */, [shallowReadonly(instance.props) , setupContext]); + resetTracking(); + unsetCurrentInstance(); + if (isPromise(setupResult)) { + setupResult.then(unsetCurrentInstance, unsetCurrentInstance); + if (isSSR) { + // return the promise so server-renderer can wait on it + return setupResult + .then((resolvedResult) => { + handleSetupResult(instance, resolvedResult, isSSR); + }) + .catch(e => { + handleError(e, instance, 0 /* SETUP_FUNCTION */); + }); + } + else { + // async setup returned Promise. + // bail here and wait for re-entry. + instance.asyncDep = setupResult; + if (!instance.suspense) { + const name = (_a = Component.name) !== null && _a !== void 0 ? _a : 'Anonymous'; + warn$1(`Component <${name}>: setup function returned a promise, but no ` + + `<Suspense> boundary was found in the parent component tree. ` + + `A component with async setup() must be nested in a <Suspense> ` + + `in order to be rendered.`); + } + } + } + else { + handleSetupResult(instance, setupResult, isSSR); + } + } + else { + finishComponentSetup(instance, isSSR); + } + } + function handleSetupResult(instance, setupResult, isSSR) { + if (isFunction(setupResult)) { + // setup returned an inline render function + { + instance.render = setupResult; + } + } + else if (isObject(setupResult)) { + if (isVNode(setupResult)) { + warn$1(`setup() should not return VNodes directly - ` + + `return a render function instead.`); + } + // setup returned bindings. + // assuming a render function compiled from template is present. + { + instance.devtoolsRawSetupState = setupResult; + } + instance.setupState = proxyRefs(setupResult); + { + exposeSetupStateOnRenderContext(instance); + } + } + else if (setupResult !== undefined) { + warn$1(`setup() should return an object. Received: ${setupResult === null ? 'null' : typeof setupResult}`); + } + finishComponentSetup(instance, isSSR); + } + let compile; + let installWithProxy; + /** + * For runtime-dom to register the compiler. + * Note the exported method uses any to avoid d.ts relying on the compiler types. + */ + function registerRuntimeCompiler(_compile) { + compile = _compile; + installWithProxy = i => { + if (i.render._rc) { + i.withProxy = new Proxy(i.ctx, RuntimeCompiledPublicInstanceProxyHandlers); + } + }; + } + // dev only + const isRuntimeOnly = () => !compile; + function finishComponentSetup(instance, isSSR, skipOptions) { + const Component = instance.type; + // template / render function normalization + // could be already set when returned from setup() + if (!instance.render) { + // only do on-the-fly compile if not in SSR - SSR on-the-fly compilation + // is done by server-renderer + if (!isSSR && compile && !Component.render) { + const template = Component.template; + if (template) { + { + startMeasure(instance, `compile`); + } + const { isCustomElement, compilerOptions } = instance.appContext.config; + const { delimiters, compilerOptions: componentCompilerOptions } = Component; + const finalCompilerOptions = extend(extend({ + isCustomElement, + delimiters + }, compilerOptions), componentCompilerOptions); + Component.render = compile(template, finalCompilerOptions); + { + endMeasure(instance, `compile`); + } + } + } + instance.render = (Component.render || NOOP); + // for runtime-compiled render functions using `with` blocks, the render + // proxy used needs a different `has` handler which is more performant and + // also only allows a whitelist of globals to fallthrough. + if (installWithProxy) { + installWithProxy(instance); + } + } + // support for 2.x options + { + setCurrentInstance(instance); + pauseTracking(); + applyOptions(instance); + resetTracking(); + unsetCurrentInstance(); + } + // warn missing template/render + // the runtime compilation of template in SSR is done by server-render + if (!Component.render && instance.render === NOOP && !isSSR) { + /* istanbul ignore if */ + if (!compile && Component.template) { + warn$1(`Component provided template option but ` + + `runtime compilation is not supported in this build of Vue.` + + (` Use "vue.global.js" instead.` + ) /* should not happen */); + } + else { + warn$1(`Component is missing template or render function.`); + } + } + } + function createAttrsProxy(instance) { + return new Proxy(instance.attrs, { + get(target, key) { + markAttrsAccessed(); + track(instance, "get" /* GET */, '$attrs'); + return target[key]; + }, + set() { + warn$1(`setupContext.attrs is readonly.`); + return false; + }, + deleteProperty() { + warn$1(`setupContext.attrs is readonly.`); + return false; + } + } + ); + } + function createSetupContext(instance) { + const expose = exposed => { + if (instance.exposed) { + warn$1(`expose() should be called only once per setup().`); + } + instance.exposed = exposed || {}; + }; + let attrs; + { + // We use getters in dev in case libs like test-utils overwrite instance + // properties (overwrites should not be done in prod) + return Object.freeze({ + get attrs() { + return attrs || (attrs = createAttrsProxy(instance)); + }, + get slots() { + return shallowReadonly(instance.slots); + }, + get emit() { + return (event, ...args) => instance.emit(event, ...args); + }, + expose + }); + } + } + function getExposeProxy(instance) { + if (instance.exposed) { + return (instance.exposeProxy || + (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), { + get(target, key) { + if (key in target) { + return target[key]; + } + else if (key in publicPropertiesMap) { + return publicPropertiesMap[key](instance); + } + } + }))); + } + } + const classifyRE = /(?:^|[-_])(\w)/g; + const classify = (str) => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, ''); + function getComponentName(Component) { + return isFunction(Component) + ? Component.displayName || Component.name + : Component.name; + } + /* istanbul ignore next */ + function formatComponentName(instance, Component, isRoot = false) { + let name = getComponentName(Component); + if (!name && Component.__file) { + const match = Component.__file.match(/([^/\\]+)\.\w+$/); + if (match) { + name = match[1]; + } + } + if (!name && instance && instance.parent) { + // try to infer the name based on reverse resolution + const inferFromRegistry = (registry) => { + for (const key in registry) { + if (registry[key] === Component) { + return key; + } + } + }; + name = + inferFromRegistry(instance.components || + instance.parent.type.components) || inferFromRegistry(instance.appContext.components); + } + return name ? classify(name) : isRoot ? `App` : `Anonymous`; + } + function isClassComponent(value) { + return isFunction(value) && '__vccOpts' in value; + } + + const computed$1 = ((getterOrOptions, debugOptions) => { + // @ts-ignore + return computed(getterOrOptions, debugOptions, isInSSRComponentSetup); + }); + + // dev only + const warnRuntimeUsage = (method) => warn$1(`${method}() is a compiler-hint helper that is only usable inside ` + + `<script setup> of a single file component. Its arguments should be ` + + `compiled away and passing it at runtime has no effect.`); + // implementation + function defineProps() { + { + warnRuntimeUsage(`defineProps`); + } + return null; + } + // implementation + function defineEmits() { + { + warnRuntimeUsage(`defineEmits`); + } + return null; + } + /** + * Vue `<script setup>` compiler macro for declaring a component's exposed + * instance properties when it is accessed by a parent component via template + * refs. + * + * `<script setup>` components are closed by default - i.e. variables inside + * the `<script setup>` scope is not exposed to parent unless explicitly exposed + * via `defineExpose`. + * + * This is only usable inside `<script setup>`, is compiled away in the + * output and should **not** be actually called at runtime. + */ + function defineExpose(exposed) { + { + warnRuntimeUsage(`defineExpose`); + } + } + /** + * Vue `<script setup>` compiler macro for providing props default values when + * using type-based `defineProps` declaration. + * + * Example usage: + * ```ts + * withDefaults(defineProps<{ + * size?: number + * labels?: string[] + * }>(), { + * size: 3, + * labels: () => ['default label'] + * }) + * ``` + * + * This is only usable inside `<script setup>`, is compiled away in the output + * and should **not** be actually called at runtime. + */ + function withDefaults(props, defaults) { + { + warnRuntimeUsage(`withDefaults`); + } + return null; + } + function useSlots() { + return getContext().slots; + } + function useAttrs() { + return getContext().attrs; + } + function getContext() { + const i = getCurrentInstance(); + if (!i) { + warn$1(`useContext() called without active instance.`); + } + return i.setupContext || (i.setupContext = createSetupContext(i)); + } + /** + * Runtime helper for merging default declarations. Imported by compiled code + * only. + * @internal + */ + function mergeDefaults(raw, defaults) { + const props = isArray(raw) + ? raw.reduce((normalized, p) => ((normalized[p] = {}), normalized), {}) + : raw; + for (const key in defaults) { + const opt = props[key]; + if (opt) { + if (isArray(opt) || isFunction(opt)) { + props[key] = { type: opt, default: defaults[key] }; + } + else { + opt.default = defaults[key]; + } + } + else if (opt === null) { + props[key] = { default: defaults[key] }; + } + else { + warn$1(`props default key "${key}" has no corresponding declaration.`); + } + } + return props; + } + /** + * Used to create a proxy for the rest element when destructuring props with + * defineProps(). + * @internal + */ + function createPropsRestProxy(props, excludedKeys) { + const ret = {}; + for (const key in props) { + if (!excludedKeys.includes(key)) { + Object.defineProperty(ret, key, { + enumerable: true, + get: () => props[key] + }); + } + } + return ret; + } + /** + * `<script setup>` helper for persisting the current instance context over + * async/await flows. + * + * `@vue/compiler-sfc` converts the following: + * + * ```ts + * const x = await foo() + * ``` + * + * into: + * + * ```ts + * let __temp, __restore + * const x = (([__temp, __restore] = withAsyncContext(() => foo())),__temp=await __temp,__restore(),__temp) + * ``` + * @internal + */ + function withAsyncContext(getAwaitable) { + const ctx = getCurrentInstance(); + if (!ctx) { + warn$1(`withAsyncContext called without active current instance. ` + + `This is likely a bug.`); + } + let awaitable = getAwaitable(); + unsetCurrentInstance(); + if (isPromise(awaitable)) { + awaitable = awaitable.catch(e => { + setCurrentInstance(ctx); + throw e; + }); + } + return [awaitable, () => setCurrentInstance(ctx)]; + } + + // Actual implementation + function h(type, propsOrChildren, children) { + const l = arguments.length; + if (l === 2) { + if (isObject(propsOrChildren) && !isArray(propsOrChildren)) { + // single vnode without props + if (isVNode(propsOrChildren)) { + return createVNode(type, null, [propsOrChildren]); + } + // props without children + return createVNode(type, propsOrChildren); + } + else { + // omit props + return createVNode(type, null, propsOrChildren); + } + } + else { + if (l > 3) { + children = Array.prototype.slice.call(arguments, 2); + } + else if (l === 3 && isVNode(children)) { + children = [children]; + } + return createVNode(type, propsOrChildren, children); + } + } + + const ssrContextKey = Symbol(`ssrContext` ); + const useSSRContext = () => { + { + warn$1(`useSSRContext() is not supported in the global build.`); + } + }; + + function initCustomFormatter() { + /* eslint-disable no-restricted-globals */ + if (typeof window === 'undefined') { + return; + } + const vueStyle = { style: 'color:#3ba776' }; + const numberStyle = { style: 'color:#0b1bc9' }; + const stringStyle = { style: 'color:#b62e24' }; + const keywordStyle = { style: 'color:#9d288c' }; + // custom formatter for Chrome + // https://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html + const formatter = { + header(obj) { + // TODO also format ComponentPublicInstance & ctx.slots/attrs in setup + if (!isObject(obj)) { + return null; + } + if (obj.__isVue) { + return ['div', vueStyle, `VueInstance`]; + } + else if (isRef(obj)) { + return [ + 'div', + {}, + ['span', vueStyle, genRefFlag(obj)], + '<', + formatValue(obj.value), + `>` + ]; + } + else if (isReactive(obj)) { + return [ + 'div', + {}, + ['span', vueStyle, isShallow(obj) ? 'ShallowReactive' : 'Reactive'], + '<', + formatValue(obj), + `>${isReadonly(obj) ? ` (readonly)` : ``}` + ]; + } + else if (isReadonly(obj)) { + return [ + 'div', + {}, + ['span', vueStyle, isShallow(obj) ? 'ShallowReadonly' : 'Readonly'], + '<', + formatValue(obj), + '>' + ]; + } + return null; + }, + hasBody(obj) { + return obj && obj.__isVue; + }, + body(obj) { + if (obj && obj.__isVue) { + return [ + 'div', + {}, + ...formatInstance(obj.$) + ]; + } + } + }; + function formatInstance(instance) { + const blocks = []; + if (instance.type.props && instance.props) { + blocks.push(createInstanceBlock('props', toRaw(instance.props))); + } + if (instance.setupState !== EMPTY_OBJ) { + blocks.push(createInstanceBlock('setup', instance.setupState)); + } + if (instance.data !== EMPTY_OBJ) { + blocks.push(createInstanceBlock('data', toRaw(instance.data))); + } + const computed = extractKeys(instance, 'computed'); + if (computed) { + blocks.push(createInstanceBlock('computed', computed)); + } + const injected = extractKeys(instance, 'inject'); + if (injected) { + blocks.push(createInstanceBlock('injected', injected)); + } + blocks.push([ + 'div', + {}, + [ + 'span', + { + style: keywordStyle.style + ';opacity:0.66' + }, + '$ (internal): ' + ], + ['object', { object: instance }] + ]); + return blocks; + } + function createInstanceBlock(type, target) { + target = extend({}, target); + if (!Object.keys(target).length) { + return ['span', {}]; + } + return [ + 'div', + { style: 'line-height:1.25em;margin-bottom:0.6em' }, + [ + 'div', + { + style: 'color:#476582' + }, + type + ], + [ + 'div', + { + style: 'padding-left:1.25em' + }, + ...Object.keys(target).map(key => { + return [ + 'div', + {}, + ['span', keywordStyle, key + ': '], + formatValue(target[key], false) + ]; + }) + ] + ]; + } + function formatValue(v, asRaw = true) { + if (typeof v === 'number') { + return ['span', numberStyle, v]; + } + else if (typeof v === 'string') { + return ['span', stringStyle, JSON.stringify(v)]; + } + else if (typeof v === 'boolean') { + return ['span', keywordStyle, v]; + } + else if (isObject(v)) { + return ['object', { object: asRaw ? toRaw(v) : v }]; + } + else { + return ['span', stringStyle, String(v)]; + } + } + function extractKeys(instance, type) { + const Comp = instance.type; + if (isFunction(Comp)) { + return; + } + const extracted = {}; + for (const key in instance.ctx) { + if (isKeyOfType(Comp, key, type)) { + extracted[key] = instance.ctx[key]; + } + } + return extracted; + } + function isKeyOfType(Comp, key, type) { + const opts = Comp[type]; + if ((isArray(opts) && opts.includes(key)) || + (isObject(opts) && key in opts)) { + return true; + } + if (Comp.extends && isKeyOfType(Comp.extends, key, type)) { + return true; + } + if (Comp.mixins && Comp.mixins.some(m => isKeyOfType(m, key, type))) { + return true; + } + } + function genRefFlag(v) { + if (isShallow(v)) { + return `ShallowRef`; + } + if (v.effect) { + return `ComputedRef`; + } + return `Ref`; + } + if (window.devtoolsFormatters) { + window.devtoolsFormatters.push(formatter); + } + else { + window.devtoolsFormatters = [formatter]; + } + } + + function withMemo(memo, render, cache, index) { + const cached = cache[index]; + if (cached && isMemoSame(cached, memo)) { + return cached; + } + const ret = render(); + // shallow clone + ret.memo = memo.slice(); + return (cache[index] = ret); + } + function isMemoSame(cached, memo) { + const prev = cached.memo; + if (prev.length != memo.length) { + return false; + } + for (let i = 0; i < prev.length; i++) { + if (hasChanged(prev[i], memo[i])) { + return false; + } + } + // make sure to let parent block track it when returning cached + if (isBlockTreeEnabled > 0 && currentBlock) { + currentBlock.push(cached); + } + return true; + } + + // Core API ------------------------------------------------------------------ + const version = "3.2.36"; + /** + * SSR utils for \@vue/server-renderer. Only exposed in cjs builds. + * @internal + */ + const ssrUtils = (null); + /** + * @internal only exposed in compat builds + */ + const resolveFilter = null; + /** + * @internal only exposed in compat builds. + */ + const compatUtils = (null); + + const svgNS = 'http://www.w3.org/2000/svg'; + const doc = (typeof document !== 'undefined' ? document : null); + const templateContainer = doc && /*#__PURE__*/ doc.createElement('template'); + const nodeOps = { + insert: (child, parent, anchor) => { + parent.insertBefore(child, anchor || null); + }, + remove: child => { + const parent = child.parentNode; + if (parent) { + parent.removeChild(child); + } + }, + createElement: (tag, isSVG, is, props) => { + const el = isSVG + ? doc.createElementNS(svgNS, tag) + : doc.createElement(tag, is ? { is } : undefined); + if (tag === 'select' && props && props.multiple != null) { + el.setAttribute('multiple', props.multiple); + } + return el; + }, + createText: text => doc.createTextNode(text), + createComment: text => doc.createComment(text), + setText: (node, text) => { + node.nodeValue = text; + }, + setElementText: (el, text) => { + el.textContent = text; + }, + parentNode: node => node.parentNode, + nextSibling: node => node.nextSibling, + querySelector: selector => doc.querySelector(selector), + setScopeId(el, id) { + el.setAttribute(id, ''); + }, + cloneNode(el) { + const cloned = el.cloneNode(true); + // #3072 + // - in `patchDOMProp`, we store the actual value in the `el._value` property. + // - normally, elements using `:value` bindings will not be hoisted, but if + // the bound value is a constant, e.g. `:value="true"` - they do get + // hoisted. + // - in production, hoisted nodes are cloned when subsequent inserts, but + // cloneNode() does not copy the custom property we attached. + // - This may need to account for other custom DOM properties we attach to + // elements in addition to `_value` in the future. + if (`_value` in el) { + cloned._value = el._value; + } + return cloned; + }, + // __UNSAFE__ + // Reason: innerHTML. + // Static content here can only come from compiled templates. + // As long as the user only uses trusted templates, this is safe. + insertStaticContent(content, parent, anchor, isSVG, start, end) { + // <parent> before | first ... last | anchor </parent> + const before = anchor ? anchor.previousSibling : parent.lastChild; + // #5308 can only take cached path if: + // - has a single root node + // - nextSibling info is still available + if (start && (start === end || start.nextSibling)) { + // cached + while (true) { + parent.insertBefore(start.cloneNode(true), anchor); + if (start === end || !(start = start.nextSibling)) + break; + } + } + else { + // fresh insert + templateContainer.innerHTML = isSVG ? `<svg>${content}</svg>` : content; + const template = templateContainer.content; + if (isSVG) { + // remove outer svg wrapper + const wrapper = template.firstChild; + while (wrapper.firstChild) { + template.appendChild(wrapper.firstChild); + } + template.removeChild(wrapper); + } + parent.insertBefore(template, anchor); + } + return [ + // first + before ? before.nextSibling : parent.firstChild, + // last + anchor ? anchor.previousSibling : parent.lastChild + ]; + } + }; + + // compiler should normalize class + :class bindings on the same element + // into a single binding ['staticClass', dynamic] + function patchClass(el, value, isSVG) { + // directly setting className should be faster than setAttribute in theory + // if this is an element during a transition, take the temporary transition + // classes into account. + const transitionClasses = el._vtc; + if (transitionClasses) { + value = (value ? [value, ...transitionClasses] : [...transitionClasses]).join(' '); + } + if (value == null) { + el.removeAttribute('class'); + } + else if (isSVG) { + el.setAttribute('class', value); + } + else { + el.className = value; + } + } + + function patchStyle(el, prev, next) { + const style = el.style; + const isCssString = isString(next); + if (next && !isCssString) { + for (const key in next) { + setStyle(style, key, next[key]); + } + if (prev && !isString(prev)) { + for (const key in prev) { + if (next[key] == null) { + setStyle(style, key, ''); + } + } + } + } + else { + const currentDisplay = style.display; + if (isCssString) { + if (prev !== next) { + style.cssText = next; + } + } + else if (prev) { + el.removeAttribute('style'); + } + // indicates that the `display` of the element is controlled by `v-show`, + // so we always keep the current `display` value regardless of the `style` + // value, thus handing over control to `v-show`. + if ('_vod' in el) { + style.display = currentDisplay; + } + } + } + const importantRE = /\s*!important$/; + function setStyle(style, name, val) { + if (isArray(val)) { + val.forEach(v => setStyle(style, name, v)); + } + else { + if (val == null) + val = ''; + if (name.startsWith('--')) { + // custom property definition + style.setProperty(name, val); + } + else { + const prefixed = autoPrefix(style, name); + if (importantRE.test(val)) { + // !important + style.setProperty(hyphenate(prefixed), val.replace(importantRE, ''), 'important'); + } + else { + style[prefixed] = val; + } + } + } + } + const prefixes = ['Webkit', 'Moz', 'ms']; + const prefixCache = {}; + function autoPrefix(style, rawName) { + const cached = prefixCache[rawName]; + if (cached) { + return cached; + } + let name = camelize(rawName); + if (name !== 'filter' && name in style) { + return (prefixCache[rawName] = name); + } + name = capitalize(name); + for (let i = 0; i < prefixes.length; i++) { + const prefixed = prefixes[i] + name; + if (prefixed in style) { + return (prefixCache[rawName] = prefixed); + } + } + return rawName; + } + + const xlinkNS = 'http://www.w3.org/1999/xlink'; + function patchAttr(el, key, value, isSVG, instance) { + if (isSVG && key.startsWith('xlink:')) { + if (value == null) { + el.removeAttributeNS(xlinkNS, key.slice(6, key.length)); + } + else { + el.setAttributeNS(xlinkNS, key, value); + } + } + else { + // note we are only checking boolean attributes that don't have a + // corresponding dom prop of the same name here. + const isBoolean = isSpecialBooleanAttr(key); + if (value == null || (isBoolean && !includeBooleanAttr(value))) { + el.removeAttribute(key); + } + else { + el.setAttribute(key, isBoolean ? '' : value); + } + } + } + + // __UNSAFE__ + // functions. The user is responsible for using them with only trusted content. + function patchDOMProp(el, key, value, + // the following args are passed only due to potential innerHTML/textContent + // overriding existing VNodes, in which case the old tree must be properly + // unmounted. + prevChildren, parentComponent, parentSuspense, unmountChildren) { + if (key === 'innerHTML' || key === 'textContent') { + if (prevChildren) { + unmountChildren(prevChildren, parentComponent, parentSuspense); + } + el[key] = value == null ? '' : value; + return; + } + if (key === 'value' && + el.tagName !== 'PROGRESS' && + // custom elements may use _value internally + !el.tagName.includes('-')) { + // store value as _value as well since + // non-string values will be stringified. + el._value = value; + const newValue = value == null ? '' : value; + if (el.value !== newValue || + // #4956: always set for OPTION elements because its value falls back to + // textContent if no value attribute is present. And setting .value for + // OPTION has no side effect + el.tagName === 'OPTION') { + el.value = newValue; + } + if (value == null) { + el.removeAttribute(key); + } + return; + } + let needRemove = false; + if (value === '' || value == null) { + const type = typeof el[key]; + if (type === 'boolean') { + // e.g. <select multiple> compiles to { multiple: '' } + value = includeBooleanAttr(value); + } + else if (value == null && type === 'string') { + // e.g. <div :id="null"> + value = ''; + needRemove = true; + } + else if (type === 'number') { + // e.g. <img :width="null"> + // the value of some IDL attr must be greater than 0, e.g. input.size = 0 -> error + value = 0; + needRemove = true; + } + } + // some properties perform value validation and throw, + // some properties has getter, no setter, will error in 'use strict' + // eg. <select :type="null"></select> <select :willValidate="null"></select> + try { + el[key] = value; + } + catch (e) { + { + warn$1(`Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` + + `value ${value} is invalid.`, e); + } + } + needRemove && el.removeAttribute(key); + } + + // Async edge case fix requires storing an event listener's attach timestamp. + const [_getNow, skipTimestampCheck] = /*#__PURE__*/ (() => { + let _getNow = Date.now; + let skipTimestampCheck = false; + if (typeof window !== 'undefined') { + // Determine what event timestamp the browser is using. Annoyingly, the + // timestamp can either be hi-res (relative to page load) or low-res + // (relative to UNIX epoch), so in order to compare time we have to use the + // same timestamp type when saving the flush timestamp. + if (Date.now() > document.createEvent('Event').timeStamp) { + // if the low-res timestamp which is bigger than the event timestamp + // (which is evaluated AFTER) it means the event is using a hi-res timestamp, + // and we need to use the hi-res version for event listeners as well. + _getNow = performance.now.bind(performance); + } + // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation + // and does not fire microtasks in between event propagation, so safe to exclude. + const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i); + skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53); + } + return [_getNow, skipTimestampCheck]; + })(); + // To avoid the overhead of repeatedly calling performance.now(), we cache + // and use the same timestamp for all event listeners attached in the same tick. + let cachedNow = 0; + const p = /*#__PURE__*/ Promise.resolve(); + const reset = () => { + cachedNow = 0; + }; + const getNow = () => cachedNow || (p.then(reset), (cachedNow = _getNow())); + function addEventListener(el, event, handler, options) { + el.addEventListener(event, handler, options); + } + function removeEventListener(el, event, handler, options) { + el.removeEventListener(event, handler, options); + } + function patchEvent(el, rawName, prevValue, nextValue, instance = null) { + // vei = vue event invokers + const invokers = el._vei || (el._vei = {}); + const existingInvoker = invokers[rawName]; + if (nextValue && existingInvoker) { + // patch + existingInvoker.value = nextValue; + } + else { + const [name, options] = parseName(rawName); + if (nextValue) { + // add + const invoker = (invokers[rawName] = createInvoker(nextValue, instance)); + addEventListener(el, name, invoker, options); + } + else if (existingInvoker) { + // remove + removeEventListener(el, name, existingInvoker, options); + invokers[rawName] = undefined; + } + } + } + const optionsModifierRE = /(?:Once|Passive|Capture)$/; + function parseName(name) { + let options; + if (optionsModifierRE.test(name)) { + options = {}; + let m; + while ((m = name.match(optionsModifierRE))) { + name = name.slice(0, name.length - m[0].length); + options[m[0].toLowerCase()] = true; + } + } + return [hyphenate(name.slice(2)), options]; + } + function createInvoker(initialValue, instance) { + const invoker = (e) => { + // async edge case #6566: inner click event triggers patch, event handler + // attached to outer element during patch, and triggered again. This + // happens because browsers fire microtask ticks between event propagation. + // the solution is simple: we save the timestamp when a handler is attached, + // and the handler would only fire if the event passed to it was fired + // AFTER it was attached. + const timeStamp = e.timeStamp || _getNow(); + if (skipTimestampCheck || timeStamp >= invoker.attached - 1) { + callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* NATIVE_EVENT_HANDLER */, [e]); + } + }; + invoker.value = initialValue; + invoker.attached = getNow(); + return invoker; + } + function patchStopImmediatePropagation(e, value) { + if (isArray(value)) { + const originalStop = e.stopImmediatePropagation; + e.stopImmediatePropagation = () => { + originalStop.call(e); + e._stopped = true; + }; + return value.map(fn => (e) => !e._stopped && fn && fn(e)); + } + else { + return value; + } + } + + const nativeOnRE = /^on[a-z]/; + const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => { + if (key === 'class') { + patchClass(el, nextValue, isSVG); + } + else if (key === 'style') { + patchStyle(el, prevValue, nextValue); + } + else if (isOn(key)) { + // ignore v-model listeners + if (!isModelListener(key)) { + patchEvent(el, key, prevValue, nextValue, parentComponent); + } + } + else if (key[0] === '.' + ? ((key = key.slice(1)), true) + : key[0] === '^' + ? ((key = key.slice(1)), false) + : shouldSetAsProp(el, key, nextValue, isSVG)) { + patchDOMProp(el, key, nextValue, prevChildren, parentComponent, parentSuspense, unmountChildren); + } + else { + // special case for <input v-model type="checkbox"> with + // :true-value & :false-value + // store value as dom properties since non-string values will be + // stringified. + if (key === 'true-value') { + el._trueValue = nextValue; + } + else if (key === 'false-value') { + el._falseValue = nextValue; + } + patchAttr(el, key, nextValue, isSVG); + } + }; + function shouldSetAsProp(el, key, value, isSVG) { + if (isSVG) { + // most keys must be set as attribute on svg elements to work + // ...except innerHTML & textContent + if (key === 'innerHTML' || key === 'textContent') { + return true; + } + // or native onclick with function values + if (key in el && nativeOnRE.test(key) && isFunction(value)) { + return true; + } + return false; + } + // these are enumerated attrs, however their corresponding DOM properties + // are actually booleans - this leads to setting it with a string "false" + // value leading it to be coerced to `true`, so we need to always treat + // them as attributes. + // Note that `contentEditable` doesn't have this problem: its DOM + // property is also enumerated string values. + if (key === 'spellcheck' || key === 'draggable' || key === 'translate') { + return false; + } + // #1787, #2840 form property on form elements is readonly and must be set as + // attribute. + if (key === 'form') { + return false; + } + // #1526 <input list> must be set as attribute + if (key === 'list' && el.tagName === 'INPUT') { + return false; + } + // #2766 <textarea type> must be set as attribute + if (key === 'type' && el.tagName === 'TEXTAREA') { + return false; + } + // native onclick with string value, must be set as attribute + if (nativeOnRE.test(key) && isString(value)) { + return false; + } + return key in el; + } + + function defineCustomElement(options, hydrate) { + const Comp = defineComponent(options); + class VueCustomElement extends VueElement { + constructor(initialProps) { + super(Comp, initialProps, hydrate); + } + } + VueCustomElement.def = Comp; + return VueCustomElement; + } + const defineSSRCustomElement = ((options) => { + // @ts-ignore + return defineCustomElement(options, hydrate); + }); + const BaseClass = (typeof HTMLElement !== 'undefined' ? HTMLElement : class { + }); + class VueElement extends BaseClass { + constructor(_def, _props = {}, hydrate) { + super(); + this._def = _def; + this._props = _props; + /** + * @internal + */ + this._instance = null; + this._connected = false; + this._resolved = false; + this._numberProps = null; + if (this.shadowRoot && hydrate) { + hydrate(this._createVNode(), this.shadowRoot); + } + else { + if (this.shadowRoot) { + warn$1(`Custom element has pre-rendered declarative shadow root but is not ` + + `defined as hydratable. Use \`defineSSRCustomElement\`.`); + } + this.attachShadow({ mode: 'open' }); + } + } + connectedCallback() { + this._connected = true; + if (!this._instance) { + this._resolveDef(); + } + } + disconnectedCallback() { + this._connected = false; + nextTick(() => { + if (!this._connected) { + render(null, this.shadowRoot); + this._instance = null; + } + }); + } + /** + * resolve inner component definition (handle possible async component) + */ + _resolveDef() { + if (this._resolved) { + return; + } + this._resolved = true; + // set initial attrs + for (let i = 0; i < this.attributes.length; i++) { + this._setAttr(this.attributes[i].name); + } + // watch future attr changes + new MutationObserver(mutations => { + for (const m of mutations) { + this._setAttr(m.attributeName); + } + }).observe(this, { attributes: true }); + const resolve = (def) => { + const { props, styles } = def; + const hasOptions = !isArray(props); + const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : []; + // cast Number-type props set before resolve + let numberProps; + if (hasOptions) { + for (const key in this._props) { + const opt = props[key]; + if (opt === Number || (opt && opt.type === Number)) { + this._props[key] = toNumber(this._props[key]); + (numberProps || (numberProps = Object.create(null)))[key] = true; + } + } + } + this._numberProps = numberProps; + // check if there are props set pre-upgrade or connect + for (const key of Object.keys(this)) { + if (key[0] !== '_') { + this._setProp(key, this[key], true, false); + } + } + // defining getter/setters on prototype + for (const key of rawKeys.map(camelize)) { + Object.defineProperty(this, key, { + get() { + return this._getProp(key); + }, + set(val) { + this._setProp(key, val); + } + }); + } + // apply CSS + this._applyStyles(styles); + // initial render + this._update(); + }; + const asyncDef = this._def.__asyncLoader; + if (asyncDef) { + asyncDef().then(resolve); + } + else { + resolve(this._def); + } + } + _setAttr(key) { + let value = this.getAttribute(key); + if (this._numberProps && this._numberProps[key]) { + value = toNumber(value); + } + this._setProp(camelize(key), value, false); + } + /** + * @internal + */ + _getProp(key) { + return this._props[key]; + } + /** + * @internal + */ + _setProp(key, val, shouldReflect = true, shouldUpdate = true) { + if (val !== this._props[key]) { + this._props[key] = val; + if (shouldUpdate && this._instance) { + this._update(); + } + // reflect + if (shouldReflect) { + if (val === true) { + this.setAttribute(hyphenate(key), ''); + } + else if (typeof val === 'string' || typeof val === 'number') { + this.setAttribute(hyphenate(key), val + ''); + } + else if (!val) { + this.removeAttribute(hyphenate(key)); + } + } + } + } + _update() { + render(this._createVNode(), this.shadowRoot); + } + _createVNode() { + const vnode = createVNode(this._def, extend({}, this._props)); + if (!this._instance) { + vnode.ce = instance => { + this._instance = instance; + instance.isCE = true; + // HMR + { + instance.ceReload = newStyles => { + // always reset styles + if (this._styles) { + this._styles.forEach(s => this.shadowRoot.removeChild(s)); + this._styles.length = 0; + } + this._applyStyles(newStyles); + // if this is an async component, ceReload is called from the inner + // component so no need to reload the async wrapper + if (!this._def.__asyncLoader) { + // reload + this._instance = null; + this._update(); + } + }; + } + // intercept emit + instance.emit = (event, ...args) => { + this.dispatchEvent(new CustomEvent(event, { + detail: args + })); + }; + // locate nearest Vue custom element parent for provide/inject + let parent = this; + while ((parent = + parent && (parent.parentNode || parent.host))) { + if (parent instanceof VueElement) { + instance.parent = parent._instance; + break; + } + } + }; + } + return vnode; + } + _applyStyles(styles) { + if (styles) { + styles.forEach(css => { + const s = document.createElement('style'); + s.textContent = css; + this.shadowRoot.appendChild(s); + // record for HMR + { + (this._styles || (this._styles = [])).push(s); + } + }); + } + } + } + + function useCssModule(name = '$style') { + /* istanbul ignore else */ + { + { + warn$1(`useCssModule() is not supported in the global build.`); + } + return EMPTY_OBJ; + } + } + + /** + * Runtime helper for SFC's CSS variable injection feature. + * @private + */ + function useCssVars(getter) { + const instance = getCurrentInstance(); + /* istanbul ignore next */ + if (!instance) { + warn$1(`useCssVars is called without current active component instance.`); + return; + } + const setVars = () => setVarsOnVNode(instance.subTree, getter(instance.proxy)); + watchPostEffect(setVars); + onMounted(() => { + const ob = new MutationObserver(setVars); + ob.observe(instance.subTree.el.parentNode, { childList: true }); + onUnmounted(() => ob.disconnect()); + }); + } + function setVarsOnVNode(vnode, vars) { + if (vnode.shapeFlag & 128 /* SUSPENSE */) { + const suspense = vnode.suspense; + vnode = suspense.activeBranch; + if (suspense.pendingBranch && !suspense.isHydrating) { + suspense.effects.push(() => { + setVarsOnVNode(suspense.activeBranch, vars); + }); + } + } + // drill down HOCs until it's a non-component vnode + while (vnode.component) { + vnode = vnode.component.subTree; + } + if (vnode.shapeFlag & 1 /* ELEMENT */ && vnode.el) { + setVarsOnNode(vnode.el, vars); + } + else if (vnode.type === Fragment) { + vnode.children.forEach(c => setVarsOnVNode(c, vars)); + } + else if (vnode.type === Static) { + let { el, anchor } = vnode; + while (el) { + setVarsOnNode(el, vars); + if (el === anchor) + break; + el = el.nextSibling; + } + } + } + function setVarsOnNode(el, vars) { + if (el.nodeType === 1) { + const style = el.style; + for (const key in vars) { + style.setProperty(`--${key}`, vars[key]); + } + } + } + + const TRANSITION = 'transition'; + const ANIMATION = 'animation'; + // DOM Transition is a higher-order-component based on the platform-agnostic + // base Transition component, with DOM-specific logic. + const Transition = (props, { slots }) => h(BaseTransition, resolveTransitionProps(props), slots); + Transition.displayName = 'Transition'; + const DOMTransitionPropsValidators = { + name: String, + type: String, + css: { + type: Boolean, + default: true + }, + duration: [String, Number, Object], + enterFromClass: String, + enterActiveClass: String, + enterToClass: String, + appearFromClass: String, + appearActiveClass: String, + appearToClass: String, + leaveFromClass: String, + leaveActiveClass: String, + leaveToClass: String + }; + const TransitionPropsValidators = (Transition.props = + /*#__PURE__*/ extend({}, BaseTransition.props, DOMTransitionPropsValidators)); + /** + * #3227 Incoming hooks may be merged into arrays when wrapping Transition + * with custom HOCs. + */ + const callHook$1 = (hook, args = []) => { + if (isArray(hook)) { + hook.forEach(h => h(...args)); + } + else if (hook) { + hook(...args); + } + }; + /** + * Check if a hook expects a callback (2nd arg), which means the user + * intends to explicitly control the end of the transition. + */ + const hasExplicitCallback = (hook) => { + return hook + ? isArray(hook) + ? hook.some(h => h.length > 1) + : hook.length > 1 + : false; + }; + function resolveTransitionProps(rawProps) { + const baseProps = {}; + for (const key in rawProps) { + if (!(key in DOMTransitionPropsValidators)) { + baseProps[key] = rawProps[key]; + } + } + if (rawProps.css === false) { + return baseProps; + } + const { name = 'v', type, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to` } = rawProps; + const durations = normalizeDuration(duration); + const enterDuration = durations && durations[0]; + const leaveDuration = durations && durations[1]; + const { onBeforeEnter, onEnter, onEnterCancelled, onLeave, onLeaveCancelled, onBeforeAppear = onBeforeEnter, onAppear = onEnter, onAppearCancelled = onEnterCancelled } = baseProps; + const finishEnter = (el, isAppear, done) => { + removeTransitionClass(el, isAppear ? appearToClass : enterToClass); + removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass); + done && done(); + }; + const finishLeave = (el, done) => { + el._isLeaving = false; + removeTransitionClass(el, leaveFromClass); + removeTransitionClass(el, leaveToClass); + removeTransitionClass(el, leaveActiveClass); + done && done(); + }; + const makeEnterHook = (isAppear) => { + return (el, done) => { + const hook = isAppear ? onAppear : onEnter; + const resolve = () => finishEnter(el, isAppear, done); + callHook$1(hook, [el, resolve]); + nextFrame(() => { + removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass); + addTransitionClass(el, isAppear ? appearToClass : enterToClass); + if (!hasExplicitCallback(hook)) { + whenTransitionEnds(el, type, enterDuration, resolve); + } + }); + }; + }; + return extend(baseProps, { + onBeforeEnter(el) { + callHook$1(onBeforeEnter, [el]); + addTransitionClass(el, enterFromClass); + addTransitionClass(el, enterActiveClass); + }, + onBeforeAppear(el) { + callHook$1(onBeforeAppear, [el]); + addTransitionClass(el, appearFromClass); + addTransitionClass(el, appearActiveClass); + }, + onEnter: makeEnterHook(false), + onAppear: makeEnterHook(true), + onLeave(el, done) { + el._isLeaving = true; + const resolve = () => finishLeave(el, done); + addTransitionClass(el, leaveFromClass); + // force reflow so *-leave-from classes immediately take effect (#2593) + forceReflow(); + addTransitionClass(el, leaveActiveClass); + nextFrame(() => { + if (!el._isLeaving) { + // cancelled + return; + } + removeTransitionClass(el, leaveFromClass); + addTransitionClass(el, leaveToClass); + if (!hasExplicitCallback(onLeave)) { + whenTransitionEnds(el, type, leaveDuration, resolve); + } + }); + callHook$1(onLeave, [el, resolve]); + }, + onEnterCancelled(el) { + finishEnter(el, false); + callHook$1(onEnterCancelled, [el]); + }, + onAppearCancelled(el) { + finishEnter(el, true); + callHook$1(onAppearCancelled, [el]); + }, + onLeaveCancelled(el) { + finishLeave(el); + callHook$1(onLeaveCancelled, [el]); + } + }); + } + function normalizeDuration(duration) { + if (duration == null) { + return null; + } + else if (isObject(duration)) { + return [NumberOf(duration.enter), NumberOf(duration.leave)]; + } + else { + const n = NumberOf(duration); + return [n, n]; + } + } + function NumberOf(val) { + const res = toNumber(val); + validateDuration(res); + return res; + } + function validateDuration(val) { + if (typeof val !== 'number') { + warn$1(`<transition> explicit duration is not a valid number - ` + + `got ${JSON.stringify(val)}.`); + } + else if (isNaN(val)) { + warn$1(`<transition> explicit duration is NaN - ` + + 'the duration expression might be incorrect.'); + } + } + function addTransitionClass(el, cls) { + cls.split(/\s+/).forEach(c => c && el.classList.add(c)); + (el._vtc || + (el._vtc = new Set())).add(cls); + } + function removeTransitionClass(el, cls) { + cls.split(/\s+/).forEach(c => c && el.classList.remove(c)); + const { _vtc } = el; + if (_vtc) { + _vtc.delete(cls); + if (!_vtc.size) { + el._vtc = undefined; + } + } + } + function nextFrame(cb) { + requestAnimationFrame(() => { + requestAnimationFrame(cb); + }); + } + let endId = 0; + function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) { + const id = (el._endId = ++endId); + const resolveIfNotStale = () => { + if (id === el._endId) { + resolve(); + } + }; + if (explicitTimeout) { + return setTimeout(resolveIfNotStale, explicitTimeout); + } + const { type, timeout, propCount } = getTransitionInfo(el, expectedType); + if (!type) { + return resolve(); + } + const endEvent = type + 'end'; + let ended = 0; + const end = () => { + el.removeEventListener(endEvent, onEnd); + resolveIfNotStale(); + }; + const onEnd = (e) => { + if (e.target === el && ++ended >= propCount) { + end(); + } + }; + setTimeout(() => { + if (ended < propCount) { + end(); + } + }, timeout + 1); + el.addEventListener(endEvent, onEnd); + } + function getTransitionInfo(el, expectedType) { + const styles = window.getComputedStyle(el); + // JSDOM may return undefined for transition properties + const getStyleProperties = (key) => (styles[key] || '').split(', '); + const transitionDelays = getStyleProperties(TRANSITION + 'Delay'); + const transitionDurations = getStyleProperties(TRANSITION + 'Duration'); + const transitionTimeout = getTimeout(transitionDelays, transitionDurations); + const animationDelays = getStyleProperties(ANIMATION + 'Delay'); + const animationDurations = getStyleProperties(ANIMATION + 'Duration'); + const animationTimeout = getTimeout(animationDelays, animationDurations); + let type = null; + let timeout = 0; + let propCount = 0; + /* istanbul ignore if */ + if (expectedType === TRANSITION) { + if (transitionTimeout > 0) { + type = TRANSITION; + timeout = transitionTimeout; + propCount = transitionDurations.length; + } + } + else if (expectedType === ANIMATION) { + if (animationTimeout > 0) { + type = ANIMATION; + timeout = animationTimeout; + propCount = animationDurations.length; + } + } + else { + timeout = Math.max(transitionTimeout, animationTimeout); + type = + timeout > 0 + ? transitionTimeout > animationTimeout + ? TRANSITION + : ANIMATION + : null; + propCount = type + ? type === TRANSITION + ? transitionDurations.length + : animationDurations.length + : 0; + } + const hasTransform = type === TRANSITION && + /\b(transform|all)(,|$)/.test(styles[TRANSITION + 'Property']); + return { + type, + timeout, + propCount, + hasTransform + }; + } + function getTimeout(delays, durations) { + while (delays.length < durations.length) { + delays = delays.concat(delays); + } + return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i]))); + } + // Old versions of Chromium (below 61.0.3163.100) formats floating pointer + // numbers in a locale-dependent way, using a comma instead of a dot. + // If comma is not replaced with a dot, the input will be rounded down + // (i.e. acting as a floor function) causing unexpected behaviors + function toMs(s) { + return Number(s.slice(0, -1).replace(',', '.')) * 1000; + } + // synchronously force layout to put elements into a certain state + function forceReflow() { + return document.body.offsetHeight; + } + + const positionMap = new WeakMap(); + const newPositionMap = new WeakMap(); + const TransitionGroupImpl = { + name: 'TransitionGroup', + props: /*#__PURE__*/ extend({}, TransitionPropsValidators, { + tag: String, + moveClass: String + }), + setup(props, { slots }) { + const instance = getCurrentInstance(); + const state = useTransitionState(); + let prevChildren; + let children; + onUpdated(() => { + // children is guaranteed to exist after initial render + if (!prevChildren.length) { + return; + } + const moveClass = props.moveClass || `${props.name || 'v'}-move`; + if (!hasCSSTransform(prevChildren[0].el, instance.vnode.el, moveClass)) { + return; + } + // we divide the work into three loops to avoid mixing DOM reads and writes + // in each iteration - which helps prevent layout thrashing. + prevChildren.forEach(callPendingCbs); + prevChildren.forEach(recordPosition); + const movedChildren = prevChildren.filter(applyTranslation); + // force reflow to put everything in position + forceReflow(); + movedChildren.forEach(c => { + const el = c.el; + const style = el.style; + addTransitionClass(el, moveClass); + style.transform = style.webkitTransform = style.transitionDuration = ''; + const cb = (el._moveCb = (e) => { + if (e && e.target !== el) { + return; + } + if (!e || /transform$/.test(e.propertyName)) { + el.removeEventListener('transitionend', cb); + el._moveCb = null; + removeTransitionClass(el, moveClass); + } + }); + el.addEventListener('transitionend', cb); + }); + }); + return () => { + const rawProps = toRaw(props); + const cssTransitionProps = resolveTransitionProps(rawProps); + let tag = rawProps.tag || Fragment; + prevChildren = children; + children = slots.default ? getTransitionRawChildren(slots.default()) : []; + for (let i = 0; i < children.length; i++) { + const child = children[i]; + if (child.key != null) { + setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance)); + } + else { + warn$1(`<TransitionGroup> children must be keyed.`); + } + } + if (prevChildren) { + for (let i = 0; i < prevChildren.length; i++) { + const child = prevChildren[i]; + setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance)); + positionMap.set(child, child.el.getBoundingClientRect()); + } + } + return createVNode(tag, null, children); + }; + } + }; + const TransitionGroup = TransitionGroupImpl; + function callPendingCbs(c) { + const el = c.el; + if (el._moveCb) { + el._moveCb(); + } + if (el._enterCb) { + el._enterCb(); + } + } + function recordPosition(c) { + newPositionMap.set(c, c.el.getBoundingClientRect()); + } + function applyTranslation(c) { + const oldPos = positionMap.get(c); + const newPos = newPositionMap.get(c); + const dx = oldPos.left - newPos.left; + const dy = oldPos.top - newPos.top; + if (dx || dy) { + const s = c.el.style; + s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`; + s.transitionDuration = '0s'; + return c; + } + } + function hasCSSTransform(el, root, moveClass) { + // Detect whether an element with the move class applied has + // CSS transitions. Since the element may be inside an entering + // transition at this very moment, we make a clone of it and remove + // all other transition classes applied to ensure only the move class + // is applied. + const clone = el.cloneNode(); + if (el._vtc) { + el._vtc.forEach(cls => { + cls.split(/\s+/).forEach(c => c && clone.classList.remove(c)); + }); + } + moveClass.split(/\s+/).forEach(c => c && clone.classList.add(c)); + clone.style.display = 'none'; + const container = (root.nodeType === 1 ? root : root.parentNode); + container.appendChild(clone); + const { hasTransform } = getTransitionInfo(clone); + container.removeChild(clone); + return hasTransform; + } + + const getModelAssigner = (vnode) => { + const fn = vnode.props['onUpdate:modelValue'] || + (false ); + return isArray(fn) ? value => invokeArrayFns(fn, value) : fn; + }; + function onCompositionStart(e) { + e.target.composing = true; + } + function onCompositionEnd(e) { + const target = e.target; + if (target.composing) { + target.composing = false; + target.dispatchEvent(new Event('input')); + } + } + // We are exporting the v-model runtime directly as vnode hooks so that it can + // be tree-shaken in case v-model is never used. + const vModelText = { + created(el, { modifiers: { lazy, trim, number } }, vnode) { + el._assign = getModelAssigner(vnode); + const castToNumber = number || (vnode.props && vnode.props.type === 'number'); + addEventListener(el, lazy ? 'change' : 'input', e => { + if (e.target.composing) + return; + let domValue = el.value; + if (trim) { + domValue = domValue.trim(); + } + if (castToNumber) { + domValue = toNumber(domValue); + } + el._assign(domValue); + }); + if (trim) { + addEventListener(el, 'change', () => { + el.value = el.value.trim(); + }); + } + if (!lazy) { + addEventListener(el, 'compositionstart', onCompositionStart); + addEventListener(el, 'compositionend', onCompositionEnd); + // Safari < 10.2 & UIWebView doesn't fire compositionend when + // switching focus before confirming composition choice + // this also fixes the issue where some browsers e.g. iOS Chrome + // fires "change" instead of "input" on autocomplete. + addEventListener(el, 'change', onCompositionEnd); + } + }, + // set value on mounted so it's after min/max for type="range" + mounted(el, { value }) { + el.value = value == null ? '' : value; + }, + beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) { + el._assign = getModelAssigner(vnode); + // avoid clearing unresolved text. #2302 + if (el.composing) + return; + if (document.activeElement === el && el.type !== 'range') { + if (lazy) { + return; + } + if (trim && el.value.trim() === value) { + return; + } + if ((number || el.type === 'number') && toNumber(el.value) === value) { + return; + } + } + const newValue = value == null ? '' : value; + if (el.value !== newValue) { + el.value = newValue; + } + } + }; + const vModelCheckbox = { + // #4096 array checkboxes need to be deep traversed + deep: true, + created(el, _, vnode) { + el._assign = getModelAssigner(vnode); + addEventListener(el, 'change', () => { + const modelValue = el._modelValue; + const elementValue = getValue(el); + const checked = el.checked; + const assign = el._assign; + if (isArray(modelValue)) { + const index = looseIndexOf(modelValue, elementValue); + const found = index !== -1; + if (checked && !found) { + assign(modelValue.concat(elementValue)); + } + else if (!checked && found) { + const filtered = [...modelValue]; + filtered.splice(index, 1); + assign(filtered); + } + } + else if (isSet(modelValue)) { + const cloned = new Set(modelValue); + if (checked) { + cloned.add(elementValue); + } + else { + cloned.delete(elementValue); + } + assign(cloned); + } + else { + assign(getCheckboxValue(el, checked)); + } + }); + }, + // set initial checked on mount to wait for true-value/false-value + mounted: setChecked, + beforeUpdate(el, binding, vnode) { + el._assign = getModelAssigner(vnode); + setChecked(el, binding, vnode); + } + }; + function setChecked(el, { value, oldValue }, vnode) { + el._modelValue = value; + if (isArray(value)) { + el.checked = looseIndexOf(value, vnode.props.value) > -1; + } + else if (isSet(value)) { + el.checked = value.has(vnode.props.value); + } + else if (value !== oldValue) { + el.checked = looseEqual(value, getCheckboxValue(el, true)); + } + } + const vModelRadio = { + created(el, { value }, vnode) { + el.checked = looseEqual(value, vnode.props.value); + el._assign = getModelAssigner(vnode); + addEventListener(el, 'change', () => { + el._assign(getValue(el)); + }); + }, + beforeUpdate(el, { value, oldValue }, vnode) { + el._assign = getModelAssigner(vnode); + if (value !== oldValue) { + el.checked = looseEqual(value, vnode.props.value); + } + } + }; + const vModelSelect = { + // <select multiple> value need to be deep traversed + deep: true, + created(el, { value, modifiers: { number } }, vnode) { + const isSetModel = isSet(value); + addEventListener(el, 'change', () => { + const selectedVal = Array.prototype.filter + .call(el.options, (o) => o.selected) + .map((o) => number ? toNumber(getValue(o)) : getValue(o)); + el._assign(el.multiple + ? isSetModel + ? new Set(selectedVal) + : selectedVal + : selectedVal[0]); + }); + el._assign = getModelAssigner(vnode); + }, + // set value in mounted & updated because <select> relies on its children + // <option>s. + mounted(el, { value }) { + setSelected(el, value); + }, + beforeUpdate(el, _binding, vnode) { + el._assign = getModelAssigner(vnode); + }, + updated(el, { value }) { + setSelected(el, value); + } + }; + function setSelected(el, value) { + const isMultiple = el.multiple; + if (isMultiple && !isArray(value) && !isSet(value)) { + warn$1(`<select multiple v-model> expects an Array or Set value for its binding, ` + + `but got ${Object.prototype.toString.call(value).slice(8, -1)}.`); + return; + } + for (let i = 0, l = el.options.length; i < l; i++) { + const option = el.options[i]; + const optionValue = getValue(option); + if (isMultiple) { + if (isArray(value)) { + option.selected = looseIndexOf(value, optionValue) > -1; + } + else { + option.selected = value.has(optionValue); + } + } + else { + if (looseEqual(getValue(option), value)) { + if (el.selectedIndex !== i) + el.selectedIndex = i; + return; + } + } + } + if (!isMultiple && el.selectedIndex !== -1) { + el.selectedIndex = -1; + } + } + // retrieve raw value set via :value bindings + function getValue(el) { + return '_value' in el ? el._value : el.value; + } + // retrieve raw value for true-value and false-value set via :true-value or :false-value bindings + function getCheckboxValue(el, checked) { + const key = checked ? '_trueValue' : '_falseValue'; + return key in el ? el[key] : checked; + } + const vModelDynamic = { + created(el, binding, vnode) { + callModelHook(el, binding, vnode, null, 'created'); + }, + mounted(el, binding, vnode) { + callModelHook(el, binding, vnode, null, 'mounted'); + }, + beforeUpdate(el, binding, vnode, prevVNode) { + callModelHook(el, binding, vnode, prevVNode, 'beforeUpdate'); + }, + updated(el, binding, vnode, prevVNode) { + callModelHook(el, binding, vnode, prevVNode, 'updated'); + } + }; + function resolveDynamicModel(tagName, type) { + switch (tagName) { + case 'SELECT': + return vModelSelect; + case 'TEXTAREA': + return vModelText; + default: + switch (type) { + case 'checkbox': + return vModelCheckbox; + case 'radio': + return vModelRadio; + default: + return vModelText; + } + } + } + function callModelHook(el, binding, vnode, prevVNode, hook) { + const modelToUse = resolveDynamicModel(el.tagName, vnode.props && vnode.props.type); + const fn = modelToUse[hook]; + fn && fn(el, binding, vnode, prevVNode); + } + + const systemModifiers = ['ctrl', 'shift', 'alt', 'meta']; + const modifierGuards = { + stop: e => e.stopPropagation(), + prevent: e => e.preventDefault(), + self: e => e.target !== e.currentTarget, + ctrl: e => !e.ctrlKey, + shift: e => !e.shiftKey, + alt: e => !e.altKey, + meta: e => !e.metaKey, + left: e => 'button' in e && e.button !== 0, + middle: e => 'button' in e && e.button !== 1, + right: e => 'button' in e && e.button !== 2, + exact: (e, modifiers) => systemModifiers.some(m => e[`${m}Key`] && !modifiers.includes(m)) + }; + /** + * @private + */ + const withModifiers = (fn, modifiers) => { + return (event, ...args) => { + for (let i = 0; i < modifiers.length; i++) { + const guard = modifierGuards[modifiers[i]]; + if (guard && guard(event, modifiers)) + return; + } + return fn(event, ...args); + }; + }; + // Kept for 2.x compat. + // Note: IE11 compat for `spacebar` and `del` is removed for now. + const keyNames = { + esc: 'escape', + space: ' ', + up: 'arrow-up', + left: 'arrow-left', + right: 'arrow-right', + down: 'arrow-down', + delete: 'backspace' + }; + /** + * @private + */ + const withKeys = (fn, modifiers) => { + return (event) => { + if (!('key' in event)) { + return; + } + const eventKey = hyphenate(event.key); + if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) { + return fn(event); + } + }; + }; + + const vShow = { + beforeMount(el, { value }, { transition }) { + el._vod = el.style.display === 'none' ? '' : el.style.display; + if (transition && value) { + transition.beforeEnter(el); + } + else { + setDisplay(el, value); + } + }, + mounted(el, { value }, { transition }) { + if (transition && value) { + transition.enter(el); + } + }, + updated(el, { value, oldValue }, { transition }) { + if (!value === !oldValue) + return; + if (transition) { + if (value) { + transition.beforeEnter(el); + setDisplay(el, true); + transition.enter(el); + } + else { + transition.leave(el, () => { + setDisplay(el, false); + }); + } + } + else { + setDisplay(el, value); + } + }, + beforeUnmount(el, { value }) { + setDisplay(el, value); + } + }; + function setDisplay(el, value) { + el.style.display = value ? el._vod : 'none'; + } + + const rendererOptions = /*#__PURE__*/ extend({ patchProp }, nodeOps); + // lazy create the renderer - this makes core renderer logic tree-shakable + // in case the user only imports reactivity utilities from Vue. + let renderer; + let enabledHydration = false; + function ensureRenderer() { + return (renderer || + (renderer = createRenderer(rendererOptions))); + } + function ensureHydrationRenderer() { + renderer = enabledHydration + ? renderer + : createHydrationRenderer(rendererOptions); + enabledHydration = true; + return renderer; + } + // use explicit type casts here to avoid import() calls in rolled-up d.ts + const render = ((...args) => { + ensureRenderer().render(...args); + }); + const hydrate = ((...args) => { + ensureHydrationRenderer().hydrate(...args); + }); + const createApp = ((...args) => { + const app = ensureRenderer().createApp(...args); + { + injectNativeTagCheck(app); + injectCompilerOptionsCheck(app); + } + const { mount } = app; + app.mount = (containerOrSelector) => { + const container = normalizeContainer(containerOrSelector); + if (!container) + return; + const component = app._component; + if (!isFunction(component) && !component.render && !component.template) { + // __UNSAFE__ + // Reason: potential execution of JS expressions in in-DOM template. + // The user must make sure the in-DOM template is trusted. If it's + // rendered by the server, the template should not contain any user data. + component.template = container.innerHTML; + } + // clear content before mounting + container.innerHTML = ''; + const proxy = mount(container, false, container instanceof SVGElement); + if (container instanceof Element) { + container.removeAttribute('v-cloak'); + container.setAttribute('data-v-app', ''); + } + return proxy; + }; + return app; + }); + const createSSRApp = ((...args) => { + const app = ensureHydrationRenderer().createApp(...args); + { + injectNativeTagCheck(app); + injectCompilerOptionsCheck(app); + } + const { mount } = app; + app.mount = (containerOrSelector) => { + const container = normalizeContainer(containerOrSelector); + if (container) { + return mount(container, true, container instanceof SVGElement); + } + }; + return app; + }); + function injectNativeTagCheck(app) { + // Inject `isNativeTag` + // this is used for component name validation (dev only) + Object.defineProperty(app.config, 'isNativeTag', { + value: (tag) => isHTMLTag(tag) || isSVGTag(tag), + writable: false + }); + } + // dev only + function injectCompilerOptionsCheck(app) { + if (isRuntimeOnly()) { + const isCustomElement = app.config.isCustomElement; + Object.defineProperty(app.config, 'isCustomElement', { + get() { + return isCustomElement; + }, + set() { + warn$1(`The \`isCustomElement\` config option is deprecated. Use ` + + `\`compilerOptions.isCustomElement\` instead.`); + } + }); + const compilerOptions = app.config.compilerOptions; + const msg = `The \`compilerOptions\` config option is only respected when using ` + + `a build of Vue.js that includes the runtime compiler (aka "full build"). ` + + `Since you are using the runtime-only build, \`compilerOptions\` ` + + `must be passed to \`@vue/compiler-dom\` in the build setup instead.\n` + + `- For vue-loader: pass it via vue-loader's \`compilerOptions\` loader option.\n` + + `- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader\n` + + `- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-dom`; + Object.defineProperty(app.config, 'compilerOptions', { + get() { + warn$1(msg); + return compilerOptions; + }, + set() { + warn$1(msg); + } + }); + } + } + function normalizeContainer(container) { + if (isString(container)) { + const res = document.querySelector(container); + if (!res) { + warn$1(`Failed to mount app: mount target selector "${container}" returned null.`); + } + return res; + } + if (window.ShadowRoot && + container instanceof window.ShadowRoot && + container.mode === 'closed') { + warn$1(`mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`); + } + return container; + } + /** + * @internal + */ + const initDirectivesForSSR = NOOP; + + function initDev() { + { + { + console.info(`You are running a development build of Vue.\n` + + `Make sure to use the production build (*.prod.js) when deploying for production.`); + } + initCustomFormatter(); + } + } + + function defaultOnError(error) { + throw error; + } + function defaultOnWarn(msg) { + console.warn(`[Vue warn] ${msg.message}`); + } + function createCompilerError(code, loc, messages, additionalMessage) { + const msg = (messages || errorMessages)[code] + (additionalMessage || ``) + ; + const error = new SyntaxError(String(msg)); + error.code = code; + error.loc = loc; + return error; + } + const errorMessages = { + // parse errors + [0 /* ABRUPT_CLOSING_OF_EMPTY_COMMENT */]: 'Illegal comment.', + [1 /* CDATA_IN_HTML_CONTENT */]: 'CDATA section is allowed only in XML context.', + [2 /* DUPLICATE_ATTRIBUTE */]: 'Duplicate attribute.', + [3 /* END_TAG_WITH_ATTRIBUTES */]: 'End tag cannot have attributes.', + [4 /* END_TAG_WITH_TRAILING_SOLIDUS */]: "Illegal '/' in tags.", + [5 /* EOF_BEFORE_TAG_NAME */]: 'Unexpected EOF in tag.', + [6 /* EOF_IN_CDATA */]: 'Unexpected EOF in CDATA section.', + [7 /* EOF_IN_COMMENT */]: 'Unexpected EOF in comment.', + [8 /* EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT */]: 'Unexpected EOF in script.', + [9 /* EOF_IN_TAG */]: 'Unexpected EOF in tag.', + [10 /* INCORRECTLY_CLOSED_COMMENT */]: 'Incorrectly closed comment.', + [11 /* INCORRECTLY_OPENED_COMMENT */]: 'Incorrectly opened comment.', + [12 /* INVALID_FIRST_CHARACTER_OF_TAG_NAME */]: "Illegal tag name. Use '<' to print '<'.", + [13 /* MISSING_ATTRIBUTE_VALUE */]: 'Attribute value was expected.', + [14 /* MISSING_END_TAG_NAME */]: 'End tag name was expected.', + [15 /* MISSING_WHITESPACE_BETWEEN_ATTRIBUTES */]: 'Whitespace was expected.', + [16 /* NESTED_COMMENT */]: "Unexpected '<!--' in comment.", + [17 /* UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME */]: 'Attribute name cannot contain U+0022 ("), U+0027 (\'), and U+003C (<).', + [18 /* UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE */]: 'Unquoted attribute value cannot contain U+0022 ("), U+0027 (\'), U+003C (<), U+003D (=), and U+0060 (`).', + [19 /* UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME */]: "Attribute name cannot start with '='.", + [21 /* UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME */]: "'<?' is allowed only in XML context.", + [20 /* UNEXPECTED_NULL_CHARACTER */]: `Unexpected null character.`, + [22 /* UNEXPECTED_SOLIDUS_IN_TAG */]: "Illegal '/' in tags.", + // Vue-specific parse errors + [23 /* X_INVALID_END_TAG */]: 'Invalid end tag.', + [24 /* X_MISSING_END_TAG */]: 'Element is missing end tag.', + [25 /* X_MISSING_INTERPOLATION_END */]: 'Interpolation end sign was not found.', + [27 /* X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END */]: 'End bracket for dynamic directive argument was not found. ' + + 'Note that dynamic directive argument cannot contain spaces.', + [26 /* X_MISSING_DIRECTIVE_NAME */]: 'Legal directive name was expected.', + // transform errors + [28 /* X_V_IF_NO_EXPRESSION */]: `v-if/v-else-if is missing expression.`, + [29 /* X_V_IF_SAME_KEY */]: `v-if/else branches must use unique keys.`, + [30 /* X_V_ELSE_NO_ADJACENT_IF */]: `v-else/v-else-if has no adjacent v-if or v-else-if.`, + [31 /* X_V_FOR_NO_EXPRESSION */]: `v-for is missing expression.`, + [32 /* X_V_FOR_MALFORMED_EXPRESSION */]: `v-for has invalid expression.`, + [33 /* X_V_FOR_TEMPLATE_KEY_PLACEMENT */]: `<template v-for> key should be placed on the <template> tag.`, + [34 /* X_V_BIND_NO_EXPRESSION */]: `v-bind is missing expression.`, + [35 /* X_V_ON_NO_EXPRESSION */]: `v-on is missing expression.`, + [36 /* X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET */]: `Unexpected custom directive on <slot> outlet.`, + [37 /* X_V_SLOT_MIXED_SLOT_USAGE */]: `Mixed v-slot usage on both the component and nested <template>.` + + `When there are multiple named slots, all slots should use <template> ` + + `syntax to avoid scope ambiguity.`, + [38 /* X_V_SLOT_DUPLICATE_SLOT_NAMES */]: `Duplicate slot names found. `, + [39 /* X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN */]: `Extraneous children found when component already has explicitly named ` + + `default slot. These children will be ignored.`, + [40 /* X_V_SLOT_MISPLACED */]: `v-slot can only be used on components or <template> tags.`, + [41 /* X_V_MODEL_NO_EXPRESSION */]: `v-model is missing expression.`, + [42 /* X_V_MODEL_MALFORMED_EXPRESSION */]: `v-model value must be a valid JavaScript member expression.`, + [43 /* X_V_MODEL_ON_SCOPE_VARIABLE */]: `v-model cannot be used on v-for or v-slot scope variables because they are not writable.`, + [44 /* X_INVALID_EXPRESSION */]: `Error parsing JavaScript expression: `, + [45 /* X_KEEP_ALIVE_INVALID_CHILDREN */]: `<KeepAlive> expects exactly one child component.`, + // generic errors + [46 /* X_PREFIX_ID_NOT_SUPPORTED */]: `"prefixIdentifiers" option is not supported in this build of compiler.`, + [47 /* X_MODULE_MODE_NOT_SUPPORTED */]: `ES module mode is not supported in this build of compiler.`, + [48 /* X_CACHE_HANDLER_NOT_SUPPORTED */]: `"cacheHandlers" option is only supported when the "prefixIdentifiers" option is enabled.`, + [49 /* X_SCOPE_ID_NOT_SUPPORTED */]: `"scopeId" option is only supported in module mode.`, + // just to fulfill types + [50 /* __EXTEND_POINT__ */]: `` + }; + + const FRAGMENT = Symbol(`Fragment` ); + const TELEPORT = Symbol(`Teleport` ); + const SUSPENSE = Symbol(`Suspense` ); + const KEEP_ALIVE = Symbol(`KeepAlive` ); + const BASE_TRANSITION = Symbol(`BaseTransition` ); + const OPEN_BLOCK = Symbol(`openBlock` ); + const CREATE_BLOCK = Symbol(`createBlock` ); + const CREATE_ELEMENT_BLOCK = Symbol(`createElementBlock` ); + const CREATE_VNODE = Symbol(`createVNode` ); + const CREATE_ELEMENT_VNODE = Symbol(`createElementVNode` ); + const CREATE_COMMENT = Symbol(`createCommentVNode` ); + const CREATE_TEXT = Symbol(`createTextVNode` ); + const CREATE_STATIC = Symbol(`createStaticVNode` ); + const RESOLVE_COMPONENT = Symbol(`resolveComponent` ); + const RESOLVE_DYNAMIC_COMPONENT = Symbol(`resolveDynamicComponent` ); + const RESOLVE_DIRECTIVE = Symbol(`resolveDirective` ); + const RESOLVE_FILTER = Symbol(`resolveFilter` ); + const WITH_DIRECTIVES = Symbol(`withDirectives` ); + const RENDER_LIST = Symbol(`renderList` ); + const RENDER_SLOT = Symbol(`renderSlot` ); + const CREATE_SLOTS = Symbol(`createSlots` ); + const TO_DISPLAY_STRING = Symbol(`toDisplayString` ); + const MERGE_PROPS = Symbol(`mergeProps` ); + const NORMALIZE_CLASS = Symbol(`normalizeClass` ); + const NORMALIZE_STYLE = Symbol(`normalizeStyle` ); + const NORMALIZE_PROPS = Symbol(`normalizeProps` ); + const GUARD_REACTIVE_PROPS = Symbol(`guardReactiveProps` ); + const TO_HANDLERS = Symbol(`toHandlers` ); + const CAMELIZE = Symbol(`camelize` ); + const CAPITALIZE = Symbol(`capitalize` ); + const TO_HANDLER_KEY = Symbol(`toHandlerKey` ); + const SET_BLOCK_TRACKING = Symbol(`setBlockTracking` ); + const PUSH_SCOPE_ID = Symbol(`pushScopeId` ); + const POP_SCOPE_ID = Symbol(`popScopeId` ); + const WITH_CTX = Symbol(`withCtx` ); + const UNREF = Symbol(`unref` ); + const IS_REF = Symbol(`isRef` ); + const WITH_MEMO = Symbol(`withMemo` ); + const IS_MEMO_SAME = Symbol(`isMemoSame` ); + // Name mapping for runtime helpers that need to be imported from 'vue' in + // generated code. Make sure these are correctly exported in the runtime! + // Using `any` here because TS doesn't allow symbols as index type. + const helperNameMap = { + [FRAGMENT]: `Fragment`, + [TELEPORT]: `Teleport`, + [SUSPENSE]: `Suspense`, + [KEEP_ALIVE]: `KeepAlive`, + [BASE_TRANSITION]: `BaseTransition`, + [OPEN_BLOCK]: `openBlock`, + [CREATE_BLOCK]: `createBlock`, + [CREATE_ELEMENT_BLOCK]: `createElementBlock`, + [CREATE_VNODE]: `createVNode`, + [CREATE_ELEMENT_VNODE]: `createElementVNode`, + [CREATE_COMMENT]: `createCommentVNode`, + [CREATE_TEXT]: `createTextVNode`, + [CREATE_STATIC]: `createStaticVNode`, + [RESOLVE_COMPONENT]: `resolveComponent`, + [RESOLVE_DYNAMIC_COMPONENT]: `resolveDynamicComponent`, + [RESOLVE_DIRECTIVE]: `resolveDirective`, + [RESOLVE_FILTER]: `resolveFilter`, + [WITH_DIRECTIVES]: `withDirectives`, + [RENDER_LIST]: `renderList`, + [RENDER_SLOT]: `renderSlot`, + [CREATE_SLOTS]: `createSlots`, + [TO_DISPLAY_STRING]: `toDisplayString`, + [MERGE_PROPS]: `mergeProps`, + [NORMALIZE_CLASS]: `normalizeClass`, + [NORMALIZE_STYLE]: `normalizeStyle`, + [NORMALIZE_PROPS]: `normalizeProps`, + [GUARD_REACTIVE_PROPS]: `guardReactiveProps`, + [TO_HANDLERS]: `toHandlers`, + [CAMELIZE]: `camelize`, + [CAPITALIZE]: `capitalize`, + [TO_HANDLER_KEY]: `toHandlerKey`, + [SET_BLOCK_TRACKING]: `setBlockTracking`, + [PUSH_SCOPE_ID]: `pushScopeId`, + [POP_SCOPE_ID]: `popScopeId`, + [WITH_CTX]: `withCtx`, + [UNREF]: `unref`, + [IS_REF]: `isRef`, + [WITH_MEMO]: `withMemo`, + [IS_MEMO_SAME]: `isMemoSame` + }; + function registerRuntimeHelpers(helpers) { + Object.getOwnPropertySymbols(helpers).forEach(s => { + helperNameMap[s] = helpers[s]; + }); + } + + // AST Utilities --------------------------------------------------------------- + // Some expressions, e.g. sequence and conditional expressions, are never + // associated with template nodes, so their source locations are just a stub. + // Container types like CompoundExpression also don't need a real location. + const locStub = { + source: '', + start: { line: 1, column: 1, offset: 0 }, + end: { line: 1, column: 1, offset: 0 } + }; + function createRoot(children, loc = locStub) { + return { + type: 0 /* ROOT */, + children, + helpers: [], + components: [], + directives: [], + hoists: [], + imports: [], + cached: 0, + temps: 0, + codegenNode: undefined, + loc + }; + } + function createVNodeCall(context, tag, props, children, patchFlag, dynamicProps, directives, isBlock = false, disableTracking = false, isComponent = false, loc = locStub) { + if (context) { + if (isBlock) { + context.helper(OPEN_BLOCK); + context.helper(getVNodeBlockHelper(context.inSSR, isComponent)); + } + else { + context.helper(getVNodeHelper(context.inSSR, isComponent)); + } + if (directives) { + context.helper(WITH_DIRECTIVES); + } + } + return { + type: 13 /* VNODE_CALL */, + tag, + props, + children, + patchFlag, + dynamicProps, + directives, + isBlock, + disableTracking, + isComponent, + loc + }; + } + function createArrayExpression(elements, loc = locStub) { + return { + type: 17 /* JS_ARRAY_EXPRESSION */, + loc, + elements + }; + } + function createObjectExpression(properties, loc = locStub) { + return { + type: 15 /* JS_OBJECT_EXPRESSION */, + loc, + properties + }; + } + function createObjectProperty(key, value) { + return { + type: 16 /* JS_PROPERTY */, + loc: locStub, + key: isString(key) ? createSimpleExpression(key, true) : key, + value + }; + } + function createSimpleExpression(content, isStatic = false, loc = locStub, constType = 0 /* NOT_CONSTANT */) { + return { + type: 4 /* SIMPLE_EXPRESSION */, + loc, + content, + isStatic, + constType: isStatic ? 3 /* CAN_STRINGIFY */ : constType + }; + } + function createCompoundExpression(children, loc = locStub) { + return { + type: 8 /* COMPOUND_EXPRESSION */, + loc, + children + }; + } + function createCallExpression(callee, args = [], loc = locStub) { + return { + type: 14 /* JS_CALL_EXPRESSION */, + loc, + callee, + arguments: args + }; + } + function createFunctionExpression(params, returns = undefined, newline = false, isSlot = false, loc = locStub) { + return { + type: 18 /* JS_FUNCTION_EXPRESSION */, + params, + returns, + newline, + isSlot, + loc + }; + } + function createConditionalExpression(test, consequent, alternate, newline = true) { + return { + type: 19 /* JS_CONDITIONAL_EXPRESSION */, + test, + consequent, + alternate, + newline, + loc: locStub + }; + } + function createCacheExpression(index, value, isVNode = false) { + return { + type: 20 /* JS_CACHE_EXPRESSION */, + index, + value, + isVNode, + loc: locStub + }; + } + function createBlockStatement(body) { + return { + type: 21 /* JS_BLOCK_STATEMENT */, + body, + loc: locStub + }; + } + + const isStaticExp = (p) => p.type === 4 /* SIMPLE_EXPRESSION */ && p.isStatic; + const isBuiltInType = (tag, expected) => tag === expected || tag === hyphenate(expected); + function isCoreComponent(tag) { + if (isBuiltInType(tag, 'Teleport')) { + return TELEPORT; + } + else if (isBuiltInType(tag, 'Suspense')) { + return SUSPENSE; + } + else if (isBuiltInType(tag, 'KeepAlive')) { + return KEEP_ALIVE; + } + else if (isBuiltInType(tag, 'BaseTransition')) { + return BASE_TRANSITION; + } + } + const nonIdentifierRE = /^\d|[^\$\w]/; + const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name); + const validFirstIdentCharRE = /[A-Za-z_$\xA0-\uFFFF]/; + const validIdentCharRE = /[\.\?\w$\xA0-\uFFFF]/; + const whitespaceRE = /\s+[.[]\s*|\s*[.[]\s+/g; + /** + * Simple lexer to check if an expression is a member expression. This is + * lax and only checks validity at the root level (i.e. does not validate exps + * inside square brackets), but it's ok since these are only used on template + * expressions and false positives are invalid expressions in the first place. + */ + const isMemberExpressionBrowser = (path) => { + // remove whitespaces around . or [ first + path = path.trim().replace(whitespaceRE, s => s.trim()); + let state = 0 /* inMemberExp */; + let stateStack = []; + let currentOpenBracketCount = 0; + let currentOpenParensCount = 0; + let currentStringType = null; + for (let i = 0; i < path.length; i++) { + const char = path.charAt(i); + switch (state) { + case 0 /* inMemberExp */: + if (char === '[') { + stateStack.push(state); + state = 1 /* inBrackets */; + currentOpenBracketCount++; + } + else if (char === '(') { + stateStack.push(state); + state = 2 /* inParens */; + currentOpenParensCount++; + } + else if (!(i === 0 ? validFirstIdentCharRE : validIdentCharRE).test(char)) { + return false; + } + break; + case 1 /* inBrackets */: + if (char === `'` || char === `"` || char === '`') { + stateStack.push(state); + state = 3 /* inString */; + currentStringType = char; + } + else if (char === `[`) { + currentOpenBracketCount++; + } + else if (char === `]`) { + if (!--currentOpenBracketCount) { + state = stateStack.pop(); + } + } + break; + case 2 /* inParens */: + if (char === `'` || char === `"` || char === '`') { + stateStack.push(state); + state = 3 /* inString */; + currentStringType = char; + } + else if (char === `(`) { + currentOpenParensCount++; + } + else if (char === `)`) { + // if the exp ends as a call then it should not be considered valid + if (i === path.length - 1) { + return false; + } + if (!--currentOpenParensCount) { + state = stateStack.pop(); + } + } + break; + case 3 /* inString */: + if (char === currentStringType) { + state = stateStack.pop(); + currentStringType = null; + } + break; + } + } + return !currentOpenBracketCount && !currentOpenParensCount; + }; + const isMemberExpression = isMemberExpressionBrowser + ; + function getInnerRange(loc, offset, length) { + const source = loc.source.slice(offset, offset + length); + const newLoc = { + source, + start: advancePositionWithClone(loc.start, loc.source, offset), + end: loc.end + }; + if (length != null) { + newLoc.end = advancePositionWithClone(loc.start, loc.source, offset + length); + } + return newLoc; + } + function advancePositionWithClone(pos, source, numberOfCharacters = source.length) { + return advancePositionWithMutation(extend({}, pos), source, numberOfCharacters); + } + // advance by mutation without cloning (for performance reasons), since this + // gets called a lot in the parser + function advancePositionWithMutation(pos, source, numberOfCharacters = source.length) { + let linesCount = 0; + let lastNewLinePos = -1; + for (let i = 0; i < numberOfCharacters; i++) { + if (source.charCodeAt(i) === 10 /* newline char code */) { + linesCount++; + lastNewLinePos = i; + } + } + pos.offset += numberOfCharacters; + pos.line += linesCount; + pos.column = + lastNewLinePos === -1 + ? pos.column + numberOfCharacters + : numberOfCharacters - lastNewLinePos; + return pos; + } + function assert(condition, msg) { + /* istanbul ignore if */ + if (!condition) { + throw new Error(msg || `unexpected compiler condition`); + } + } + function findDir(node, name, allowEmpty = false) { + for (let i = 0; i < node.props.length; i++) { + const p = node.props[i]; + if (p.type === 7 /* DIRECTIVE */ && + (allowEmpty || p.exp) && + (isString(name) ? p.name === name : name.test(p.name))) { + return p; + } + } + } + function findProp(node, name, dynamicOnly = false, allowEmpty = false) { + for (let i = 0; i < node.props.length; i++) { + const p = node.props[i]; + if (p.type === 6 /* ATTRIBUTE */) { + if (dynamicOnly) + continue; + if (p.name === name && (p.value || allowEmpty)) { + return p; + } + } + else if (p.name === 'bind' && + (p.exp || allowEmpty) && + isStaticArgOf(p.arg, name)) { + return p; + } + } + } + function isStaticArgOf(arg, name) { + return !!(arg && isStaticExp(arg) && arg.content === name); + } + function hasDynamicKeyVBind(node) { + return node.props.some(p => p.type === 7 /* DIRECTIVE */ && + p.name === 'bind' && + (!p.arg || // v-bind="obj" + p.arg.type !== 4 /* SIMPLE_EXPRESSION */ || // v-bind:[_ctx.foo] + !p.arg.isStatic) // v-bind:[foo] + ); + } + function isText(node) { + return node.type === 5 /* INTERPOLATION */ || node.type === 2 /* TEXT */; + } + function isVSlot(p) { + return p.type === 7 /* DIRECTIVE */ && p.name === 'slot'; + } + function isTemplateNode(node) { + return (node.type === 1 /* ELEMENT */ && node.tagType === 3 /* TEMPLATE */); + } + function isSlotOutlet(node) { + return node.type === 1 /* ELEMENT */ && node.tagType === 2 /* SLOT */; + } + function getVNodeHelper(ssr, isComponent) { + return ssr || isComponent ? CREATE_VNODE : CREATE_ELEMENT_VNODE; + } + function getVNodeBlockHelper(ssr, isComponent) { + return ssr || isComponent ? CREATE_BLOCK : CREATE_ELEMENT_BLOCK; + } + const propsHelperSet = new Set([NORMALIZE_PROPS, GUARD_REACTIVE_PROPS]); + function getUnnormalizedProps(props, callPath = []) { + if (props && + !isString(props) && + props.type === 14 /* JS_CALL_EXPRESSION */) { + const callee = props.callee; + if (!isString(callee) && propsHelperSet.has(callee)) { + return getUnnormalizedProps(props.arguments[0], callPath.concat(props)); + } + } + return [props, callPath]; + } + function injectProp(node, prop, context) { + let propsWithInjection; + /** + * 1. mergeProps(...) + * 2. toHandlers(...) + * 3. normalizeProps(...) + * 4. normalizeProps(guardReactiveProps(...)) + * + * we need to get the real props before normalization + */ + let props = node.type === 13 /* VNODE_CALL */ ? node.props : node.arguments[2]; + let callPath = []; + let parentCall; + if (props && + !isString(props) && + props.type === 14 /* JS_CALL_EXPRESSION */) { + const ret = getUnnormalizedProps(props); + props = ret[0]; + callPath = ret[1]; + parentCall = callPath[callPath.length - 1]; + } + if (props == null || isString(props)) { + propsWithInjection = createObjectExpression([prop]); + } + else if (props.type === 14 /* JS_CALL_EXPRESSION */) { + // merged props... add ours + // only inject key to object literal if it's the first argument so that + // if doesn't override user provided keys + const first = props.arguments[0]; + if (!isString(first) && first.type === 15 /* JS_OBJECT_EXPRESSION */) { + first.properties.unshift(prop); + } + else { + if (props.callee === TO_HANDLERS) { + // #2366 + propsWithInjection = createCallExpression(context.helper(MERGE_PROPS), [ + createObjectExpression([prop]), + props + ]); + } + else { + props.arguments.unshift(createObjectExpression([prop])); + } + } + !propsWithInjection && (propsWithInjection = props); + } + else if (props.type === 15 /* JS_OBJECT_EXPRESSION */) { + let alreadyExists = false; + // check existing key to avoid overriding user provided keys + if (prop.key.type === 4 /* SIMPLE_EXPRESSION */) { + const propKeyName = prop.key.content; + alreadyExists = props.properties.some(p => p.key.type === 4 /* SIMPLE_EXPRESSION */ && + p.key.content === propKeyName); + } + if (!alreadyExists) { + props.properties.unshift(prop); + } + propsWithInjection = props; + } + else { + // single v-bind with expression, return a merged replacement + propsWithInjection = createCallExpression(context.helper(MERGE_PROPS), [ + createObjectExpression([prop]), + props + ]); + // in the case of nested helper call, e.g. `normalizeProps(guardReactiveProps(props))`, + // it will be rewritten as `normalizeProps(mergeProps({ key: 0 }, props))`, + // the `guardReactiveProps` will no longer be needed + if (parentCall && parentCall.callee === GUARD_REACTIVE_PROPS) { + parentCall = callPath[callPath.length - 2]; + } + } + if (node.type === 13 /* VNODE_CALL */) { + if (parentCall) { + parentCall.arguments[0] = propsWithInjection; + } + else { + node.props = propsWithInjection; + } + } + else { + if (parentCall) { + parentCall.arguments[0] = propsWithInjection; + } + else { + node.arguments[2] = propsWithInjection; + } + } + } + function toValidAssetId(name, type) { + // see issue#4422, we need adding identifier on validAssetId if variable `name` has specific character + return `_${type}_${name.replace(/[^\w]/g, (searchValue, replaceValue) => { + return searchValue === '-' ? '_' : name.charCodeAt(replaceValue).toString(); + })}`; + } + function getMemoedVNodeCall(node) { + if (node.type === 14 /* JS_CALL_EXPRESSION */ && node.callee === WITH_MEMO) { + return node.arguments[1].returns; + } + else { + return node; + } + } + function makeBlock(node, { helper, removeHelper, inSSR }) { + if (!node.isBlock) { + node.isBlock = true; + removeHelper(getVNodeHelper(inSSR, node.isComponent)); + helper(OPEN_BLOCK); + helper(getVNodeBlockHelper(inSSR, node.isComponent)); + } + } + + const deprecationData = { + ["COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */]: { + message: `Platform-native elements with "is" prop will no longer be ` + + `treated as components in Vue 3 unless the "is" value is explicitly ` + + `prefixed with "vue:".`, + link: `https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html` + }, + ["COMPILER_V_BIND_SYNC" /* COMPILER_V_BIND_SYNC */]: { + message: key => `.sync modifier for v-bind has been removed. Use v-model with ` + + `argument instead. \`v-bind:${key}.sync\` should be changed to ` + + `\`v-model:${key}\`.`, + link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html` + }, + ["COMPILER_V_BIND_PROP" /* COMPILER_V_BIND_PROP */]: { + message: `.prop modifier for v-bind has been removed and no longer necessary. ` + + `Vue 3 will automatically set a binding as DOM property when appropriate.` + }, + ["COMPILER_V_BIND_OBJECT_ORDER" /* COMPILER_V_BIND_OBJECT_ORDER */]: { + message: `v-bind="obj" usage is now order sensitive and behaves like JavaScript ` + + `object spread: it will now overwrite an existing non-mergeable attribute ` + + `that appears before v-bind in the case of conflict. ` + + `To retain 2.x behavior, move v-bind to make it the first attribute. ` + + `You can also suppress this warning if the usage is intended.`, + link: `https://v3-migration.vuejs.org/breaking-changes/v-bind.html` + }, + ["COMPILER_V_ON_NATIVE" /* COMPILER_V_ON_NATIVE */]: { + message: `.native modifier for v-on has been removed as is no longer necessary.`, + link: `https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html` + }, + ["COMPILER_V_IF_V_FOR_PRECEDENCE" /* COMPILER_V_IF_V_FOR_PRECEDENCE */]: { + message: `v-if / v-for precedence when used on the same element has changed ` + + `in Vue 3: v-if now takes higher precedence and will no longer have ` + + `access to v-for scope variables. It is best to avoid the ambiguity ` + + `with <template> tags or use a computed property that filters v-for ` + + `data source.`, + link: `https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html` + }, + ["COMPILER_NATIVE_TEMPLATE" /* COMPILER_NATIVE_TEMPLATE */]: { + message: `<template> with no special directives will render as a native template ` + + `element instead of its inner content in Vue 3.` + }, + ["COMPILER_INLINE_TEMPLATE" /* COMPILER_INLINE_TEMPLATE */]: { + message: `"inline-template" has been removed in Vue 3.`, + link: `https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html` + }, + ["COMPILER_FILTER" /* COMPILER_FILTERS */]: { + message: `filters have been removed in Vue 3. ` + + `The "|" symbol will be treated as native JavaScript bitwise OR operator. ` + + `Use method calls or computed properties instead.`, + link: `https://v3-migration.vuejs.org/breaking-changes/filters.html` + } + }; + function getCompatValue(key, context) { + const config = context.options + ? context.options.compatConfig + : context.compatConfig; + const value = config && config[key]; + if (key === 'MODE') { + return value || 3; // compiler defaults to v3 behavior + } + else { + return value; + } + } + function isCompatEnabled(key, context) { + const mode = getCompatValue('MODE', context); + const value = getCompatValue(key, context); + // in v3 mode, only enable if explicitly set to true + // otherwise enable for any non-false value + return mode === 3 ? value === true : value !== false; + } + function checkCompatEnabled(key, context, loc, ...args) { + const enabled = isCompatEnabled(key, context); + if (enabled) { + warnDeprecation(key, context, loc, ...args); + } + return enabled; + } + function warnDeprecation(key, context, loc, ...args) { + const val = getCompatValue(key, context); + if (val === 'suppress-warning') { + return; + } + const { message, link } = deprecationData[key]; + const msg = `(deprecation ${key}) ${typeof message === 'function' ? message(...args) : message}${link ? `\n Details: ${link}` : ``}`; + const err = new SyntaxError(msg); + err.code = key; + if (loc) + err.loc = loc; + context.onWarn(err); + } + + // The default decoder only provides escapes for characters reserved as part of + // the template syntax, and is only used if the custom renderer did not provide + // a platform-specific decoder. + const decodeRE = /&(gt|lt|amp|apos|quot);/g; + const decodeMap = { + gt: '>', + lt: '<', + amp: '&', + apos: "'", + quot: '"' + }; + const defaultParserOptions = { + delimiters: [`{{`, `}}`], + getNamespace: () => 0 /* HTML */, + getTextMode: () => 0 /* DATA */, + isVoidTag: NO, + isPreTag: NO, + isCustomElement: NO, + decodeEntities: (rawText) => rawText.replace(decodeRE, (_, p1) => decodeMap[p1]), + onError: defaultOnError, + onWarn: defaultOnWarn, + comments: true + }; + function baseParse(content, options = {}) { + const context = createParserContext(content, options); + const start = getCursor(context); + return createRoot(parseChildren(context, 0 /* DATA */, []), getSelection(context, start)); + } + function createParserContext(content, rawOptions) { + const options = extend({}, defaultParserOptions); + let key; + for (key in rawOptions) { + // @ts-ignore + options[key] = + rawOptions[key] === undefined + ? defaultParserOptions[key] + : rawOptions[key]; + } + return { + options, + column: 1, + line: 1, + offset: 0, + originalSource: content, + source: content, + inPre: false, + inVPre: false, + onWarn: options.onWarn + }; + } + function parseChildren(context, mode, ancestors) { + const parent = last(ancestors); + const ns = parent ? parent.ns : 0 /* HTML */; + const nodes = []; + while (!isEnd(context, mode, ancestors)) { + const s = context.source; + let node = undefined; + if (mode === 0 /* DATA */ || mode === 1 /* RCDATA */) { + if (!context.inVPre && startsWith(s, context.options.delimiters[0])) { + // '{{' + node = parseInterpolation(context, mode); + } + else if (mode === 0 /* DATA */ && s[0] === '<') { + // https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state + if (s.length === 1) { + emitError(context, 5 /* EOF_BEFORE_TAG_NAME */, 1); + } + else if (s[1] === '!') { + // https://html.spec.whatwg.org/multipage/parsing.html#markup-declaration-open-state + if (startsWith(s, '<!--')) { + node = parseComment(context); + } + else if (startsWith(s, '<!DOCTYPE')) { + // Ignore DOCTYPE by a limitation. + node = parseBogusComment(context); + } + else if (startsWith(s, '<![CDATA[')) { + if (ns !== 0 /* HTML */) { + node = parseCDATA(context, ancestors); + } + else { + emitError(context, 1 /* CDATA_IN_HTML_CONTENT */); + node = parseBogusComment(context); + } + } + else { + emitError(context, 11 /* INCORRECTLY_OPENED_COMMENT */); + node = parseBogusComment(context); + } + } + else if (s[1] === '/') { + // https://html.spec.whatwg.org/multipage/parsing.html#end-tag-open-state + if (s.length === 2) { + emitError(context, 5 /* EOF_BEFORE_TAG_NAME */, 2); + } + else if (s[2] === '>') { + emitError(context, 14 /* MISSING_END_TAG_NAME */, 2); + advanceBy(context, 3); + continue; + } + else if (/[a-z]/i.test(s[2])) { + emitError(context, 23 /* X_INVALID_END_TAG */); + parseTag(context, 1 /* End */, parent); + continue; + } + else { + emitError(context, 12 /* INVALID_FIRST_CHARACTER_OF_TAG_NAME */, 2); + node = parseBogusComment(context); + } + } + else if (/[a-z]/i.test(s[1])) { + node = parseElement(context, ancestors); + } + else if (s[1] === '?') { + emitError(context, 21 /* UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME */, 1); + node = parseBogusComment(context); + } + else { + emitError(context, 12 /* INVALID_FIRST_CHARACTER_OF_TAG_NAME */, 1); + } + } + } + if (!node) { + node = parseText(context, mode); + } + if (isArray(node)) { + for (let i = 0; i < node.length; i++) { + pushNode(nodes, node[i]); + } + } + else { + pushNode(nodes, node); + } + } + // Whitespace handling strategy like v2 + let removedWhitespace = false; + if (mode !== 2 /* RAWTEXT */ && mode !== 1 /* RCDATA */) { + const shouldCondense = context.options.whitespace !== 'preserve'; + for (let i = 0; i < nodes.length; i++) { + const node = nodes[i]; + if (!context.inPre && node.type === 2 /* TEXT */) { + if (!/[^\t\r\n\f ]/.test(node.content)) { + const prev = nodes[i - 1]; + const next = nodes[i + 1]; + // Remove if: + // - the whitespace is the first or last node, or: + // - (condense mode) the whitespace is adjacent to a comment, or: + // - (condense mode) the whitespace is between two elements AND contains newline + if (!prev || + !next || + (shouldCondense && + (prev.type === 3 /* COMMENT */ || + next.type === 3 /* COMMENT */ || + (prev.type === 1 /* ELEMENT */ && + next.type === 1 /* ELEMENT */ && + /[\r\n]/.test(node.content))))) { + removedWhitespace = true; + nodes[i] = null; + } + else { + // Otherwise, the whitespace is condensed into a single space + node.content = ' '; + } + } + else if (shouldCondense) { + // in condense mode, consecutive whitespaces in text are condensed + // down to a single space. + node.content = node.content.replace(/[\t\r\n\f ]+/g, ' '); + } + } + // Remove comment nodes if desired by configuration. + else if (node.type === 3 /* COMMENT */ && !context.options.comments) { + removedWhitespace = true; + nodes[i] = null; + } + } + if (context.inPre && parent && context.options.isPreTag(parent.tag)) { + // remove leading newline per html spec + // https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element + const first = nodes[0]; + if (first && first.type === 2 /* TEXT */) { + first.content = first.content.replace(/^\r?\n/, ''); + } + } + } + return removedWhitespace ? nodes.filter(Boolean) : nodes; + } + function pushNode(nodes, node) { + if (node.type === 2 /* TEXT */) { + const prev = last(nodes); + // Merge if both this and the previous node are text and those are + // consecutive. This happens for cases like "a < b". + if (prev && + prev.type === 2 /* TEXT */ && + prev.loc.end.offset === node.loc.start.offset) { + prev.content += node.content; + prev.loc.end = node.loc.end; + prev.loc.source += node.loc.source; + return; + } + } + nodes.push(node); + } + function parseCDATA(context, ancestors) { + advanceBy(context, 9); + const nodes = parseChildren(context, 3 /* CDATA */, ancestors); + if (context.source.length === 0) { + emitError(context, 6 /* EOF_IN_CDATA */); + } + else { + advanceBy(context, 3); + } + return nodes; + } + function parseComment(context) { + const start = getCursor(context); + let content; + // Regular comment. + const match = /--(\!)?>/.exec(context.source); + if (!match) { + content = context.source.slice(4); + advanceBy(context, context.source.length); + emitError(context, 7 /* EOF_IN_COMMENT */); + } + else { + if (match.index <= 3) { + emitError(context, 0 /* ABRUPT_CLOSING_OF_EMPTY_COMMENT */); + } + if (match[1]) { + emitError(context, 10 /* INCORRECTLY_CLOSED_COMMENT */); + } + content = context.source.slice(4, match.index); + // Advancing with reporting nested comments. + const s = context.source.slice(0, match.index); + let prevIndex = 1, nestedIndex = 0; + while ((nestedIndex = s.indexOf('<!--', prevIndex)) !== -1) { + advanceBy(context, nestedIndex - prevIndex + 1); + if (nestedIndex + 4 < s.length) { + emitError(context, 16 /* NESTED_COMMENT */); + } + prevIndex = nestedIndex + 1; + } + advanceBy(context, match.index + match[0].length - prevIndex + 1); + } + return { + type: 3 /* COMMENT */, + content, + loc: getSelection(context, start) + }; + } + function parseBogusComment(context) { + const start = getCursor(context); + const contentStart = context.source[1] === '?' ? 1 : 2; + let content; + const closeIndex = context.source.indexOf('>'); + if (closeIndex === -1) { + content = context.source.slice(contentStart); + advanceBy(context, context.source.length); + } + else { + content = context.source.slice(contentStart, closeIndex); + advanceBy(context, closeIndex + 1); + } + return { + type: 3 /* COMMENT */, + content, + loc: getSelection(context, start) + }; + } + function parseElement(context, ancestors) { + // Start tag. + const wasInPre = context.inPre; + const wasInVPre = context.inVPre; + const parent = last(ancestors); + const element = parseTag(context, 0 /* Start */, parent); + const isPreBoundary = context.inPre && !wasInPre; + const isVPreBoundary = context.inVPre && !wasInVPre; + if (element.isSelfClosing || context.options.isVoidTag(element.tag)) { + // #4030 self-closing <pre> tag + if (isPreBoundary) { + context.inPre = false; + } + if (isVPreBoundary) { + context.inVPre = false; + } + return element; + } + // Children. + ancestors.push(element); + const mode = context.options.getTextMode(element, parent); + const children = parseChildren(context, mode, ancestors); + ancestors.pop(); + element.children = children; + // End tag. + if (startsWithEndTagOpen(context.source, element.tag)) { + parseTag(context, 1 /* End */, parent); + } + else { + emitError(context, 24 /* X_MISSING_END_TAG */, 0, element.loc.start); + if (context.source.length === 0 && element.tag.toLowerCase() === 'script') { + const first = children[0]; + if (first && startsWith(first.loc.source, '<!--')) { + emitError(context, 8 /* EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT */); + } + } + } + element.loc = getSelection(context, element.loc.start); + if (isPreBoundary) { + context.inPre = false; + } + if (isVPreBoundary) { + context.inVPre = false; + } + return element; + } + const isSpecialTemplateDirective = /*#__PURE__*/ makeMap(`if,else,else-if,for,slot`); + function parseTag(context, type, parent) { + // Tag open. + const start = getCursor(context); + const match = /^<\/?([a-z][^\t\r\n\f />]*)/i.exec(context.source); + const tag = match[1]; + const ns = context.options.getNamespace(tag, parent); + advanceBy(context, match[0].length); + advanceSpaces(context); + // save current state in case we need to re-parse attributes with v-pre + const cursor = getCursor(context); + const currentSource = context.source; + // check <pre> tag + if (context.options.isPreTag(tag)) { + context.inPre = true; + } + // Attributes. + let props = parseAttributes(context, type); + // check v-pre + if (type === 0 /* Start */ && + !context.inVPre && + props.some(p => p.type === 7 /* DIRECTIVE */ && p.name === 'pre')) { + context.inVPre = true; + // reset context + extend(context, cursor); + context.source = currentSource; + // re-parse attrs and filter out v-pre itself + props = parseAttributes(context, type).filter(p => p.name !== 'v-pre'); + } + // Tag close. + let isSelfClosing = false; + if (context.source.length === 0) { + emitError(context, 9 /* EOF_IN_TAG */); + } + else { + isSelfClosing = startsWith(context.source, '/>'); + if (type === 1 /* End */ && isSelfClosing) { + emitError(context, 4 /* END_TAG_WITH_TRAILING_SOLIDUS */); + } + advanceBy(context, isSelfClosing ? 2 : 1); + } + if (type === 1 /* End */) { + return; + } + let tagType = 0 /* ELEMENT */; + if (!context.inVPre) { + if (tag === 'slot') { + tagType = 2 /* SLOT */; + } + else if (tag === 'template') { + if (props.some(p => p.type === 7 /* DIRECTIVE */ && isSpecialTemplateDirective(p.name))) { + tagType = 3 /* TEMPLATE */; + } + } + else if (isComponent(tag, props, context)) { + tagType = 1 /* COMPONENT */; + } + } + return { + type: 1 /* ELEMENT */, + ns, + tag, + tagType, + props, + isSelfClosing, + children: [], + loc: getSelection(context, start), + codegenNode: undefined // to be created during transform phase + }; + } + function isComponent(tag, props, context) { + const options = context.options; + if (options.isCustomElement(tag)) { + return false; + } + if (tag === 'component' || + /^[A-Z]/.test(tag) || + isCoreComponent(tag) || + (options.isBuiltInComponent && options.isBuiltInComponent(tag)) || + (options.isNativeTag && !options.isNativeTag(tag))) { + return true; + } + // at this point the tag should be a native tag, but check for potential "is" + // casting + for (let i = 0; i < props.length; i++) { + const p = props[i]; + if (p.type === 6 /* ATTRIBUTE */) { + if (p.name === 'is' && p.value) { + if (p.value.content.startsWith('vue:')) { + return true; + } + } + } + else { + // directive + // v-is (TODO Deprecate) + if (p.name === 'is') { + return true; + } + else if ( + // :is on plain element - only treat as component in compat mode + p.name === 'bind' && + isStaticArgOf(p.arg, 'is') && + false && + checkCompatEnabled("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context, p.loc)) { + return true; + } + } + } + } + function parseAttributes(context, type) { + const props = []; + const attributeNames = new Set(); + while (context.source.length > 0 && + !startsWith(context.source, '>') && + !startsWith(context.source, '/>')) { + if (startsWith(context.source, '/')) { + emitError(context, 22 /* UNEXPECTED_SOLIDUS_IN_TAG */); + advanceBy(context, 1); + advanceSpaces(context); + continue; + } + if (type === 1 /* End */) { + emitError(context, 3 /* END_TAG_WITH_ATTRIBUTES */); + } + const attr = parseAttribute(context, attributeNames); + // Trim whitespace between class + // https://github.com/vuejs/core/issues/4251 + if (attr.type === 6 /* ATTRIBUTE */ && + attr.value && + attr.name === 'class') { + attr.value.content = attr.value.content.replace(/\s+/g, ' ').trim(); + } + if (type === 0 /* Start */) { + props.push(attr); + } + if (/^[^\t\r\n\f />]/.test(context.source)) { + emitError(context, 15 /* MISSING_WHITESPACE_BETWEEN_ATTRIBUTES */); + } + advanceSpaces(context); + } + return props; + } + function parseAttribute(context, nameSet) { + // Name. + const start = getCursor(context); + const match = /^[^\t\r\n\f />][^\t\r\n\f />=]*/.exec(context.source); + const name = match[0]; + if (nameSet.has(name)) { + emitError(context, 2 /* DUPLICATE_ATTRIBUTE */); + } + nameSet.add(name); + if (name[0] === '=') { + emitError(context, 19 /* UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME */); + } + { + const pattern = /["'<]/g; + let m; + while ((m = pattern.exec(name))) { + emitError(context, 17 /* UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME */, m.index); + } + } + advanceBy(context, name.length); + // Value + let value = undefined; + if (/^[\t\r\n\f ]*=/.test(context.source)) { + advanceSpaces(context); + advanceBy(context, 1); + advanceSpaces(context); + value = parseAttributeValue(context); + if (!value) { + emitError(context, 13 /* MISSING_ATTRIBUTE_VALUE */); + } + } + const loc = getSelection(context, start); + if (!context.inVPre && /^(v-[A-Za-z0-9-]|:|\.|@|#)/.test(name)) { + const match = /(?:^v-([a-z0-9-]+))?(?:(?::|^\.|^@|^#)(\[[^\]]+\]|[^\.]+))?(.+)?$/i.exec(name); + let isPropShorthand = startsWith(name, '.'); + let dirName = match[1] || + (isPropShorthand || startsWith(name, ':') + ? 'bind' + : startsWith(name, '@') + ? 'on' + : 'slot'); + let arg; + if (match[2]) { + const isSlot = dirName === 'slot'; + const startOffset = name.lastIndexOf(match[2]); + const loc = getSelection(context, getNewPosition(context, start, startOffset), getNewPosition(context, start, startOffset + match[2].length + ((isSlot && match[3]) || '').length)); + let content = match[2]; + let isStatic = true; + if (content.startsWith('[')) { + isStatic = false; + if (!content.endsWith(']')) { + emitError(context, 27 /* X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END */); + content = content.slice(1); + } + else { + content = content.slice(1, content.length - 1); + } + } + else if (isSlot) { + // #1241 special case for v-slot: vuetify relies extensively on slot + // names containing dots. v-slot doesn't have any modifiers and Vue 2.x + // supports such usage so we are keeping it consistent with 2.x. + content += match[3] || ''; + } + arg = { + type: 4 /* SIMPLE_EXPRESSION */, + content, + isStatic, + constType: isStatic + ? 3 /* CAN_STRINGIFY */ + : 0 /* NOT_CONSTANT */, + loc + }; + } + if (value && value.isQuoted) { + const valueLoc = value.loc; + valueLoc.start.offset++; + valueLoc.start.column++; + valueLoc.end = advancePositionWithClone(valueLoc.start, value.content); + valueLoc.source = valueLoc.source.slice(1, -1); + } + const modifiers = match[3] ? match[3].slice(1).split('.') : []; + if (isPropShorthand) + modifiers.push('prop'); + return { + type: 7 /* DIRECTIVE */, + name: dirName, + exp: value && { + type: 4 /* SIMPLE_EXPRESSION */, + content: value.content, + isStatic: false, + // Treat as non-constant by default. This can be potentially set to + // other values by `transformExpression` to make it eligible for hoisting. + constType: 0 /* NOT_CONSTANT */, + loc: value.loc + }, + arg, + modifiers, + loc + }; + } + // missing directive name or illegal directive name + if (!context.inVPre && startsWith(name, 'v-')) { + emitError(context, 26 /* X_MISSING_DIRECTIVE_NAME */); + } + return { + type: 6 /* ATTRIBUTE */, + name, + value: value && { + type: 2 /* TEXT */, + content: value.content, + loc: value.loc + }, + loc + }; + } + function parseAttributeValue(context) { + const start = getCursor(context); + let content; + const quote = context.source[0]; + const isQuoted = quote === `"` || quote === `'`; + if (isQuoted) { + // Quoted value. + advanceBy(context, 1); + const endIndex = context.source.indexOf(quote); + if (endIndex === -1) { + content = parseTextData(context, context.source.length, 4 /* ATTRIBUTE_VALUE */); + } + else { + content = parseTextData(context, endIndex, 4 /* ATTRIBUTE_VALUE */); + advanceBy(context, 1); + } + } + else { + // Unquoted + const match = /^[^\t\r\n\f >]+/.exec(context.source); + if (!match) { + return undefined; + } + const unexpectedChars = /["'<=`]/g; + let m; + while ((m = unexpectedChars.exec(match[0]))) { + emitError(context, 18 /* UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE */, m.index); + } + content = parseTextData(context, match[0].length, 4 /* ATTRIBUTE_VALUE */); + } + return { content, isQuoted, loc: getSelection(context, start) }; + } + function parseInterpolation(context, mode) { + const [open, close] = context.options.delimiters; + const closeIndex = context.source.indexOf(close, open.length); + if (closeIndex === -1) { + emitError(context, 25 /* X_MISSING_INTERPOLATION_END */); + return undefined; + } + const start = getCursor(context); + advanceBy(context, open.length); + const innerStart = getCursor(context); + const innerEnd = getCursor(context); + const rawContentLength = closeIndex - open.length; + const rawContent = context.source.slice(0, rawContentLength); + const preTrimContent = parseTextData(context, rawContentLength, mode); + const content = preTrimContent.trim(); + const startOffset = preTrimContent.indexOf(content); + if (startOffset > 0) { + advancePositionWithMutation(innerStart, rawContent, startOffset); + } + const endOffset = rawContentLength - (preTrimContent.length - content.length - startOffset); + advancePositionWithMutation(innerEnd, rawContent, endOffset); + advanceBy(context, close.length); + return { + type: 5 /* INTERPOLATION */, + content: { + type: 4 /* SIMPLE_EXPRESSION */, + isStatic: false, + // Set `isConstant` to false by default and will decide in transformExpression + constType: 0 /* NOT_CONSTANT */, + content, + loc: getSelection(context, innerStart, innerEnd) + }, + loc: getSelection(context, start) + }; + } + function parseText(context, mode) { + const endTokens = mode === 3 /* CDATA */ ? [']]>'] : ['<', context.options.delimiters[0]]; + let endIndex = context.source.length; + for (let i = 0; i < endTokens.length; i++) { + const index = context.source.indexOf(endTokens[i], 1); + if (index !== -1 && endIndex > index) { + endIndex = index; + } + } + const start = getCursor(context); + const content = parseTextData(context, endIndex, mode); + return { + type: 2 /* TEXT */, + content, + loc: getSelection(context, start) + }; + } + /** + * Get text data with a given length from the current location. + * This translates HTML entities in the text data. + */ + function parseTextData(context, length, mode) { + const rawText = context.source.slice(0, length); + advanceBy(context, length); + if (mode === 2 /* RAWTEXT */ || + mode === 3 /* CDATA */ || + !rawText.includes('&')) { + return rawText; + } + else { + // DATA or RCDATA containing "&"". Entity decoding required. + return context.options.decodeEntities(rawText, mode === 4 /* ATTRIBUTE_VALUE */); + } + } + function getCursor(context) { + const { column, line, offset } = context; + return { column, line, offset }; + } + function getSelection(context, start, end) { + end = end || getCursor(context); + return { + start, + end, + source: context.originalSource.slice(start.offset, end.offset) + }; + } + function last(xs) { + return xs[xs.length - 1]; + } + function startsWith(source, searchString) { + return source.startsWith(searchString); + } + function advanceBy(context, numberOfCharacters) { + const { source } = context; + advancePositionWithMutation(context, source, numberOfCharacters); + context.source = source.slice(numberOfCharacters); + } + function advanceSpaces(context) { + const match = /^[\t\r\n\f ]+/.exec(context.source); + if (match) { + advanceBy(context, match[0].length); + } + } + function getNewPosition(context, start, numberOfCharacters) { + return advancePositionWithClone(start, context.originalSource.slice(start.offset, numberOfCharacters), numberOfCharacters); + } + function emitError(context, code, offset, loc = getCursor(context)) { + if (offset) { + loc.offset += offset; + loc.column += offset; + } + context.options.onError(createCompilerError(code, { + start: loc, + end: loc, + source: '' + })); + } + function isEnd(context, mode, ancestors) { + const s = context.source; + switch (mode) { + case 0 /* DATA */: + if (startsWith(s, '</')) { + // TODO: probably bad performance + for (let i = ancestors.length - 1; i >= 0; --i) { + if (startsWithEndTagOpen(s, ancestors[i].tag)) { + return true; + } + } + } + break; + case 1 /* RCDATA */: + case 2 /* RAWTEXT */: { + const parent = last(ancestors); + if (parent && startsWithEndTagOpen(s, parent.tag)) { + return true; + } + break; + } + case 3 /* CDATA */: + if (startsWith(s, ']]>')) { + return true; + } + break; + } + return !s; + } + function startsWithEndTagOpen(source, tag) { + return (startsWith(source, '</') && + source.slice(2, 2 + tag.length).toLowerCase() === tag.toLowerCase() && + /[\t\r\n\f />]/.test(source[2 + tag.length] || '>')); + } + + function hoistStatic(root, context) { + walk(root, context, + // Root node is unfortunately non-hoistable due to potential parent + // fallthrough attributes. + isSingleElementRoot(root, root.children[0])); + } + function isSingleElementRoot(root, child) { + const { children } = root; + return (children.length === 1 && + child.type === 1 /* ELEMENT */ && + !isSlotOutlet(child)); + } + function walk(node, context, doNotHoistNode = false) { + const { children } = node; + const originalCount = children.length; + let hoistedCount = 0; + for (let i = 0; i < children.length; i++) { + const child = children[i]; + // only plain elements & text calls are eligible for hoisting. + if (child.type === 1 /* ELEMENT */ && + child.tagType === 0 /* ELEMENT */) { + const constantType = doNotHoistNode + ? 0 /* NOT_CONSTANT */ + : getConstantType(child, context); + if (constantType > 0 /* NOT_CONSTANT */) { + if (constantType >= 2 /* CAN_HOIST */) { + child.codegenNode.patchFlag = + -1 /* HOISTED */ + (` /* HOISTED */` ); + child.codegenNode = context.hoist(child.codegenNode); + hoistedCount++; + continue; + } + } + else { + // node may contain dynamic children, but its props may be eligible for + // hoisting. + const codegenNode = child.codegenNode; + if (codegenNode.type === 13 /* VNODE_CALL */) { + const flag = getPatchFlag(codegenNode); + if ((!flag || + flag === 512 /* NEED_PATCH */ || + flag === 1 /* TEXT */) && + getGeneratedPropsConstantType(child, context) >= + 2 /* CAN_HOIST */) { + const props = getNodeProps(child); + if (props) { + codegenNode.props = context.hoist(props); + } + } + if (codegenNode.dynamicProps) { + codegenNode.dynamicProps = context.hoist(codegenNode.dynamicProps); + } + } + } + } + else if (child.type === 12 /* TEXT_CALL */ && + getConstantType(child.content, context) >= 2 /* CAN_HOIST */) { + child.codegenNode = context.hoist(child.codegenNode); + hoistedCount++; + } + // walk further + if (child.type === 1 /* ELEMENT */) { + const isComponent = child.tagType === 1 /* COMPONENT */; + if (isComponent) { + context.scopes.vSlot++; + } + walk(child, context); + if (isComponent) { + context.scopes.vSlot--; + } + } + else if (child.type === 11 /* FOR */) { + // Do not hoist v-for single child because it has to be a block + walk(child, context, child.children.length === 1); + } + else if (child.type === 9 /* IF */) { + for (let i = 0; i < child.branches.length; i++) { + // Do not hoist v-if single child because it has to be a block + walk(child.branches[i], context, child.branches[i].children.length === 1); + } + } + } + if (hoistedCount && context.transformHoist) { + context.transformHoist(children, context, node); + } + // all children were hoisted - the entire children array is hoistable. + if (hoistedCount && + hoistedCount === originalCount && + node.type === 1 /* ELEMENT */ && + node.tagType === 0 /* ELEMENT */ && + node.codegenNode && + node.codegenNode.type === 13 /* VNODE_CALL */ && + isArray(node.codegenNode.children)) { + node.codegenNode.children = context.hoist(createArrayExpression(node.codegenNode.children)); + } + } + function getConstantType(node, context) { + const { constantCache } = context; + switch (node.type) { + case 1 /* ELEMENT */: + if (node.tagType !== 0 /* ELEMENT */) { + return 0 /* NOT_CONSTANT */; + } + const cached = constantCache.get(node); + if (cached !== undefined) { + return cached; + } + const codegenNode = node.codegenNode; + if (codegenNode.type !== 13 /* VNODE_CALL */) { + return 0 /* NOT_CONSTANT */; + } + if (codegenNode.isBlock && + node.tag !== 'svg' && + node.tag !== 'foreignObject') { + return 0 /* NOT_CONSTANT */; + } + const flag = getPatchFlag(codegenNode); + if (!flag) { + let returnType = 3 /* CAN_STRINGIFY */; + // Element itself has no patch flag. However we still need to check: + // 1. Even for a node with no patch flag, it is possible for it to contain + // non-hoistable expressions that refers to scope variables, e.g. compiler + // injected keys or cached event handlers. Therefore we need to always + // check the codegenNode's props to be sure. + const generatedPropsType = getGeneratedPropsConstantType(node, context); + if (generatedPropsType === 0 /* NOT_CONSTANT */) { + constantCache.set(node, 0 /* NOT_CONSTANT */); + return 0 /* NOT_CONSTANT */; + } + if (generatedPropsType < returnType) { + returnType = generatedPropsType; + } + // 2. its children. + for (let i = 0; i < node.children.length; i++) { + const childType = getConstantType(node.children[i], context); + if (childType === 0 /* NOT_CONSTANT */) { + constantCache.set(node, 0 /* NOT_CONSTANT */); + return 0 /* NOT_CONSTANT */; + } + if (childType < returnType) { + returnType = childType; + } + } + // 3. if the type is not already CAN_SKIP_PATCH which is the lowest non-0 + // type, check if any of the props can cause the type to be lowered + // we can skip can_patch because it's guaranteed by the absence of a + // patchFlag. + if (returnType > 1 /* CAN_SKIP_PATCH */) { + for (let i = 0; i < node.props.length; i++) { + const p = node.props[i]; + if (p.type === 7 /* DIRECTIVE */ && p.name === 'bind' && p.exp) { + const expType = getConstantType(p.exp, context); + if (expType === 0 /* NOT_CONSTANT */) { + constantCache.set(node, 0 /* NOT_CONSTANT */); + return 0 /* NOT_CONSTANT */; + } + if (expType < returnType) { + returnType = expType; + } + } + } + } + // only svg/foreignObject could be block here, however if they are + // static then they don't need to be blocks since there will be no + // nested updates. + if (codegenNode.isBlock) { + // except set custom directives. + for (let i = 0; i < node.props.length; i++) { + const p = node.props[i]; + if (p.type === 7 /* DIRECTIVE */) { + constantCache.set(node, 0 /* NOT_CONSTANT */); + return 0 /* NOT_CONSTANT */; + } + } + context.removeHelper(OPEN_BLOCK); + context.removeHelper(getVNodeBlockHelper(context.inSSR, codegenNode.isComponent)); + codegenNode.isBlock = false; + context.helper(getVNodeHelper(context.inSSR, codegenNode.isComponent)); + } + constantCache.set(node, returnType); + return returnType; + } + else { + constantCache.set(node, 0 /* NOT_CONSTANT */); + return 0 /* NOT_CONSTANT */; + } + case 2 /* TEXT */: + case 3 /* COMMENT */: + return 3 /* CAN_STRINGIFY */; + case 9 /* IF */: + case 11 /* FOR */: + case 10 /* IF_BRANCH */: + return 0 /* NOT_CONSTANT */; + case 5 /* INTERPOLATION */: + case 12 /* TEXT_CALL */: + return getConstantType(node.content, context); + case 4 /* SIMPLE_EXPRESSION */: + return node.constType; + case 8 /* COMPOUND_EXPRESSION */: + let returnType = 3 /* CAN_STRINGIFY */; + for (let i = 0; i < node.children.length; i++) { + const child = node.children[i]; + if (isString(child) || isSymbol(child)) { + continue; + } + const childType = getConstantType(child, context); + if (childType === 0 /* NOT_CONSTANT */) { + return 0 /* NOT_CONSTANT */; + } + else if (childType < returnType) { + returnType = childType; + } + } + return returnType; + default: + return 0 /* NOT_CONSTANT */; + } + } + const allowHoistedHelperSet = new Set([ + NORMALIZE_CLASS, + NORMALIZE_STYLE, + NORMALIZE_PROPS, + GUARD_REACTIVE_PROPS + ]); + function getConstantTypeOfHelperCall(value, context) { + if (value.type === 14 /* JS_CALL_EXPRESSION */ && + !isString(value.callee) && + allowHoistedHelperSet.has(value.callee)) { + const arg = value.arguments[0]; + if (arg.type === 4 /* SIMPLE_EXPRESSION */) { + return getConstantType(arg, context); + } + else if (arg.type === 14 /* JS_CALL_EXPRESSION */) { + // in the case of nested helper call, e.g. `normalizeProps(guardReactiveProps(exp))` + return getConstantTypeOfHelperCall(arg, context); + } + } + return 0 /* NOT_CONSTANT */; + } + function getGeneratedPropsConstantType(node, context) { + let returnType = 3 /* CAN_STRINGIFY */; + const props = getNodeProps(node); + if (props && props.type === 15 /* JS_OBJECT_EXPRESSION */) { + const { properties } = props; + for (let i = 0; i < properties.length; i++) { + const { key, value } = properties[i]; + const keyType = getConstantType(key, context); + if (keyType === 0 /* NOT_CONSTANT */) { + return keyType; + } + if (keyType < returnType) { + returnType = keyType; + } + let valueType; + if (value.type === 4 /* SIMPLE_EXPRESSION */) { + valueType = getConstantType(value, context); + } + else if (value.type === 14 /* JS_CALL_EXPRESSION */) { + // some helper calls can be hoisted, + // such as the `normalizeProps` generated by the compiler for pre-normalize class, + // in this case we need to respect the ConstantType of the helper's arguments + valueType = getConstantTypeOfHelperCall(value, context); + } + else { + valueType = 0 /* NOT_CONSTANT */; + } + if (valueType === 0 /* NOT_CONSTANT */) { + return valueType; + } + if (valueType < returnType) { + returnType = valueType; + } + } + } + return returnType; + } + function getNodeProps(node) { + const codegenNode = node.codegenNode; + if (codegenNode.type === 13 /* VNODE_CALL */) { + return codegenNode.props; + } + } + function getPatchFlag(node) { + const flag = node.patchFlag; + return flag ? parseInt(flag, 10) : undefined; + } + + function createTransformContext(root, { filename = '', prefixIdentifiers = false, hoistStatic = false, cacheHandlers = false, nodeTransforms = [], directiveTransforms = {}, transformHoist = null, isBuiltInComponent = NOOP, isCustomElement = NOOP, expressionPlugins = [], scopeId = null, slotted = true, ssr = false, inSSR = false, ssrCssVars = ``, bindingMetadata = EMPTY_OBJ, inline = false, isTS = false, onError = defaultOnError, onWarn = defaultOnWarn, compatConfig }) { + const nameMatch = filename.replace(/\?.*$/, '').match(/([^/\\]+)\.\w+$/); + const context = { + // options + selfName: nameMatch && capitalize(camelize(nameMatch[1])), + prefixIdentifiers, + hoistStatic, + cacheHandlers, + nodeTransforms, + directiveTransforms, + transformHoist, + isBuiltInComponent, + isCustomElement, + expressionPlugins, + scopeId, + slotted, + ssr, + inSSR, + ssrCssVars, + bindingMetadata, + inline, + isTS, + onError, + onWarn, + compatConfig, + // state + root, + helpers: new Map(), + components: new Set(), + directives: new Set(), + hoists: [], + imports: [], + constantCache: new Map(), + temps: 0, + cached: 0, + identifiers: Object.create(null), + scopes: { + vFor: 0, + vSlot: 0, + vPre: 0, + vOnce: 0 + }, + parent: null, + currentNode: root, + childIndex: 0, + inVOnce: false, + // methods + helper(name) { + const count = context.helpers.get(name) || 0; + context.helpers.set(name, count + 1); + return name; + }, + removeHelper(name) { + const count = context.helpers.get(name); + if (count) { + const currentCount = count - 1; + if (!currentCount) { + context.helpers.delete(name); + } + else { + context.helpers.set(name, currentCount); + } + } + }, + helperString(name) { + return `_${helperNameMap[context.helper(name)]}`; + }, + replaceNode(node) { + /* istanbul ignore if */ + { + if (!context.currentNode) { + throw new Error(`Node being replaced is already removed.`); + } + if (!context.parent) { + throw new Error(`Cannot replace root node.`); + } + } + context.parent.children[context.childIndex] = context.currentNode = node; + }, + removeNode(node) { + if (!context.parent) { + throw new Error(`Cannot remove root node.`); + } + const list = context.parent.children; + const removalIndex = node + ? list.indexOf(node) + : context.currentNode + ? context.childIndex + : -1; + /* istanbul ignore if */ + if (removalIndex < 0) { + throw new Error(`node being removed is not a child of current parent`); + } + if (!node || node === context.currentNode) { + // current node removed + context.currentNode = null; + context.onNodeRemoved(); + } + else { + // sibling node removed + if (context.childIndex > removalIndex) { + context.childIndex--; + context.onNodeRemoved(); + } + } + context.parent.children.splice(removalIndex, 1); + }, + onNodeRemoved: () => { }, + addIdentifiers(exp) { + }, + removeIdentifiers(exp) { + }, + hoist(exp) { + if (isString(exp)) + exp = createSimpleExpression(exp); + context.hoists.push(exp); + const identifier = createSimpleExpression(`_hoisted_${context.hoists.length}`, false, exp.loc, 2 /* CAN_HOIST */); + identifier.hoisted = exp; + return identifier; + }, + cache(exp, isVNode = false) { + return createCacheExpression(context.cached++, exp, isVNode); + } + }; + return context; + } + function transform(root, options) { + const context = createTransformContext(root, options); + traverseNode(root, context); + if (options.hoistStatic) { + hoistStatic(root, context); + } + if (!options.ssr) { + createRootCodegen(root, context); + } + // finalize meta information + root.helpers = [...context.helpers.keys()]; + root.components = [...context.components]; + root.directives = [...context.directives]; + root.imports = context.imports; + root.hoists = context.hoists; + root.temps = context.temps; + root.cached = context.cached; + } + function createRootCodegen(root, context) { + const { helper } = context; + const { children } = root; + if (children.length === 1) { + const child = children[0]; + // if the single child is an element, turn it into a block. + if (isSingleElementRoot(root, child) && child.codegenNode) { + // single element root is never hoisted so codegenNode will never be + // SimpleExpressionNode + const codegenNode = child.codegenNode; + if (codegenNode.type === 13 /* VNODE_CALL */) { + makeBlock(codegenNode, context); + } + root.codegenNode = codegenNode; + } + else { + // - single <slot/>, IfNode, ForNode: already blocks. + // - single text node: always patched. + // root codegen falls through via genNode() + root.codegenNode = child; + } + } + else if (children.length > 1) { + // root has multiple nodes - return a fragment block. + let patchFlag = 64 /* STABLE_FRAGMENT */; + let patchFlagText = PatchFlagNames[64 /* STABLE_FRAGMENT */]; + // check if the fragment actually contains a single valid child with + // the rest being comments + if (children.filter(c => c.type !== 3 /* COMMENT */).length === 1) { + patchFlag |= 2048 /* DEV_ROOT_FRAGMENT */; + patchFlagText += `, ${PatchFlagNames[2048 /* DEV_ROOT_FRAGMENT */]}`; + } + root.codegenNode = createVNodeCall(context, helper(FRAGMENT), undefined, root.children, patchFlag + (` /* ${patchFlagText} */` ), undefined, undefined, true, undefined, false /* isComponent */); + } + else ; + } + function traverseChildren(parent, context) { + let i = 0; + const nodeRemoved = () => { + i--; + }; + for (; i < parent.children.length; i++) { + const child = parent.children[i]; + if (isString(child)) + continue; + context.parent = parent; + context.childIndex = i; + context.onNodeRemoved = nodeRemoved; + traverseNode(child, context); + } + } + function traverseNode(node, context) { + context.currentNode = node; + // apply transform plugins + const { nodeTransforms } = context; + const exitFns = []; + for (let i = 0; i < nodeTransforms.length; i++) { + const onExit = nodeTransforms[i](node, context); + if (onExit) { + if (isArray(onExit)) { + exitFns.push(...onExit); + } + else { + exitFns.push(onExit); + } + } + if (!context.currentNode) { + // node was removed + return; + } + else { + // node may have been replaced + node = context.currentNode; + } + } + switch (node.type) { + case 3 /* COMMENT */: + if (!context.ssr) { + // inject import for the Comment symbol, which is needed for creating + // comment nodes with `createVNode` + context.helper(CREATE_COMMENT); + } + break; + case 5 /* INTERPOLATION */: + // no need to traverse, but we need to inject toString helper + if (!context.ssr) { + context.helper(TO_DISPLAY_STRING); + } + break; + // for container types, further traverse downwards + case 9 /* IF */: + for (let i = 0; i < node.branches.length; i++) { + traverseNode(node.branches[i], context); + } + break; + case 10 /* IF_BRANCH */: + case 11 /* FOR */: + case 1 /* ELEMENT */: + case 0 /* ROOT */: + traverseChildren(node, context); + break; + } + // exit transforms + context.currentNode = node; + let i = exitFns.length; + while (i--) { + exitFns[i](); + } + } + function createStructuralDirectiveTransform(name, fn) { + const matches = isString(name) + ? (n) => n === name + : (n) => name.test(n); + return (node, context) => { + if (node.type === 1 /* ELEMENT */) { + const { props } = node; + // structural directive transforms are not concerned with slots + // as they are handled separately in vSlot.ts + if (node.tagType === 3 /* TEMPLATE */ && props.some(isVSlot)) { + return; + } + const exitFns = []; + for (let i = 0; i < props.length; i++) { + const prop = props[i]; + if (prop.type === 7 /* DIRECTIVE */ && matches(prop.name)) { + // structural directives are removed to avoid infinite recursion + // also we remove them *before* applying so that it can further + // traverse itself in case it moves the node around + props.splice(i, 1); + i--; + const onExit = fn(node, prop, context); + if (onExit) + exitFns.push(onExit); + } + } + return exitFns; + } + }; + } + + const PURE_ANNOTATION = `/*#__PURE__*/`; + const aliasHelper = (s) => `${helperNameMap[s]}: _${helperNameMap[s]}`; + function createCodegenContext(ast, { mode = 'function', prefixIdentifiers = mode === 'module', sourceMap = false, filename = `template.vue.html`, scopeId = null, optimizeImports = false, runtimeGlobalName = `Vue`, runtimeModuleName = `vue`, ssrRuntimeModuleName = 'vue/server-renderer', ssr = false, isTS = false, inSSR = false }) { + const context = { + mode, + prefixIdentifiers, + sourceMap, + filename, + scopeId, + optimizeImports, + runtimeGlobalName, + runtimeModuleName, + ssrRuntimeModuleName, + ssr, + isTS, + inSSR, + source: ast.loc.source, + code: ``, + column: 1, + line: 1, + offset: 0, + indentLevel: 0, + pure: false, + map: undefined, + helper(key) { + return `_${helperNameMap[key]}`; + }, + push(code, node) { + context.code += code; + }, + indent() { + newline(++context.indentLevel); + }, + deindent(withoutNewLine = false) { + if (withoutNewLine) { + --context.indentLevel; + } + else { + newline(--context.indentLevel); + } + }, + newline() { + newline(context.indentLevel); + } + }; + function newline(n) { + context.push('\n' + ` `.repeat(n)); + } + return context; + } + function generate(ast, options = {}) { + const context = createCodegenContext(ast, options); + if (options.onContextCreated) + options.onContextCreated(context); + const { mode, push, prefixIdentifiers, indent, deindent, newline, scopeId, ssr } = context; + const hasHelpers = ast.helpers.length > 0; + const useWithBlock = !prefixIdentifiers && mode !== 'module'; + // preambles + // in setup() inline mode, the preamble is generated in a sub context + // and returned separately. + const preambleContext = context; + { + genFunctionPreamble(ast, preambleContext); + } + // enter render function + const functionName = ssr ? `ssrRender` : `render`; + const args = ssr ? ['_ctx', '_push', '_parent', '_attrs'] : ['_ctx', '_cache']; + const signature = args.join(', '); + { + push(`function ${functionName}(${signature}) {`); + } + indent(); + if (useWithBlock) { + push(`with (_ctx) {`); + indent(); + // function mode const declarations should be inside with block + // also they should be renamed to avoid collision with user properties + if (hasHelpers) { + push(`const { ${ast.helpers.map(aliasHelper).join(', ')} } = _Vue`); + push(`\n`); + newline(); + } + } + // generate asset resolution statements + if (ast.components.length) { + genAssets(ast.components, 'component', context); + if (ast.directives.length || ast.temps > 0) { + newline(); + } + } + if (ast.directives.length) { + genAssets(ast.directives, 'directive', context); + if (ast.temps > 0) { + newline(); + } + } + if (ast.temps > 0) { + push(`let `); + for (let i = 0; i < ast.temps; i++) { + push(`${i > 0 ? `, ` : ``}_temp${i}`); + } + } + if (ast.components.length || ast.directives.length || ast.temps) { + push(`\n`); + newline(); + } + // generate the VNode tree expression + if (!ssr) { + push(`return `); + } + if (ast.codegenNode) { + genNode(ast.codegenNode, context); + } + else { + push(`null`); + } + if (useWithBlock) { + deindent(); + push(`}`); + } + deindent(); + push(`}`); + return { + ast, + code: context.code, + preamble: ``, + // SourceMapGenerator does have toJSON() method but it's not in the types + map: context.map ? context.map.toJSON() : undefined + }; + } + function genFunctionPreamble(ast, context) { + const { ssr, prefixIdentifiers, push, newline, runtimeModuleName, runtimeGlobalName, ssrRuntimeModuleName } = context; + const VueBinding = runtimeGlobalName; + // Generate const declaration for helpers + // In prefix mode, we place the const declaration at top so it's done + // only once; But if we not prefixing, we place the declaration inside the + // with block so it doesn't incur the `in` check cost for every helper access. + if (ast.helpers.length > 0) { + { + // "with" mode. + // save Vue in a separate variable to avoid collision + push(`const _Vue = ${VueBinding}\n`); + // in "with" mode, helpers are declared inside the with block to avoid + // has check cost, but hoists are lifted out of the function - we need + // to provide the helper here. + if (ast.hoists.length) { + const staticHelpers = [ + CREATE_VNODE, + CREATE_ELEMENT_VNODE, + CREATE_COMMENT, + CREATE_TEXT, + CREATE_STATIC + ] + .filter(helper => ast.helpers.includes(helper)) + .map(aliasHelper) + .join(', '); + push(`const { ${staticHelpers} } = _Vue\n`); + } + } + } + genHoists(ast.hoists, context); + newline(); + push(`return `); + } + function genAssets(assets, type, { helper, push, newline, isTS }) { + const resolver = helper(type === 'component' + ? RESOLVE_COMPONENT + : RESOLVE_DIRECTIVE); + for (let i = 0; i < assets.length; i++) { + let id = assets[i]; + // potential component implicit self-reference inferred from SFC filename + const maybeSelfReference = id.endsWith('__self'); + if (maybeSelfReference) { + id = id.slice(0, -6); + } + push(`const ${toValidAssetId(id, type)} = ${resolver}(${JSON.stringify(id)}${maybeSelfReference ? `, true` : ``})${isTS ? `!` : ``}`); + if (i < assets.length - 1) { + newline(); + } + } + } + function genHoists(hoists, context) { + if (!hoists.length) { + return; + } + context.pure = true; + const { push, newline, helper, scopeId, mode } = context; + newline(); + for (let i = 0; i < hoists.length; i++) { + const exp = hoists[i]; + if (exp) { + push(`const _hoisted_${i + 1} = ${``}`); + genNode(exp, context); + newline(); + } + } + context.pure = false; + } + function isText$1(n) { + return (isString(n) || + n.type === 4 /* SIMPLE_EXPRESSION */ || + n.type === 2 /* TEXT */ || + n.type === 5 /* INTERPOLATION */ || + n.type === 8 /* COMPOUND_EXPRESSION */); + } + function genNodeListAsArray(nodes, context) { + const multilines = nodes.length > 3 || + (nodes.some(n => isArray(n) || !isText$1(n))); + context.push(`[`); + multilines && context.indent(); + genNodeList(nodes, context, multilines); + multilines && context.deindent(); + context.push(`]`); + } + function genNodeList(nodes, context, multilines = false, comma = true) { + const { push, newline } = context; + for (let i = 0; i < nodes.length; i++) { + const node = nodes[i]; + if (isString(node)) { + push(node); + } + else if (isArray(node)) { + genNodeListAsArray(node, context); + } + else { + genNode(node, context); + } + if (i < nodes.length - 1) { + if (multilines) { + comma && push(','); + newline(); + } + else { + comma && push(', '); + } + } + } + } + function genNode(node, context) { + if (isString(node)) { + context.push(node); + return; + } + if (isSymbol(node)) { + context.push(context.helper(node)); + return; + } + switch (node.type) { + case 1 /* ELEMENT */: + case 9 /* IF */: + case 11 /* FOR */: + assert(node.codegenNode != null, `Codegen node is missing for element/if/for node. ` + + `Apply appropriate transforms first.`); + genNode(node.codegenNode, context); + break; + case 2 /* TEXT */: + genText(node, context); + break; + case 4 /* SIMPLE_EXPRESSION */: + genExpression(node, context); + break; + case 5 /* INTERPOLATION */: + genInterpolation(node, context); + break; + case 12 /* TEXT_CALL */: + genNode(node.codegenNode, context); + break; + case 8 /* COMPOUND_EXPRESSION */: + genCompoundExpression(node, context); + break; + case 3 /* COMMENT */: + genComment(node, context); + break; + case 13 /* VNODE_CALL */: + genVNodeCall(node, context); + break; + case 14 /* JS_CALL_EXPRESSION */: + genCallExpression(node, context); + break; + case 15 /* JS_OBJECT_EXPRESSION */: + genObjectExpression(node, context); + break; + case 17 /* JS_ARRAY_EXPRESSION */: + genArrayExpression(node, context); + break; + case 18 /* JS_FUNCTION_EXPRESSION */: + genFunctionExpression(node, context); + break; + case 19 /* JS_CONDITIONAL_EXPRESSION */: + genConditionalExpression(node, context); + break; + case 20 /* JS_CACHE_EXPRESSION */: + genCacheExpression(node, context); + break; + case 21 /* JS_BLOCK_STATEMENT */: + genNodeList(node.body, context, true, false); + break; + // SSR only types + case 22 /* JS_TEMPLATE_LITERAL */: + break; + case 23 /* JS_IF_STATEMENT */: + break; + case 24 /* JS_ASSIGNMENT_EXPRESSION */: + break; + case 25 /* JS_SEQUENCE_EXPRESSION */: + break; + case 26 /* JS_RETURN_STATEMENT */: + break; + /* istanbul ignore next */ + case 10 /* IF_BRANCH */: + // noop + break; + default: + { + assert(false, `unhandled codegen node type: ${node.type}`); + // make sure we exhaust all possible types + const exhaustiveCheck = node; + return exhaustiveCheck; + } + } + } + function genText(node, context) { + context.push(JSON.stringify(node.content), node); + } + function genExpression(node, context) { + const { content, isStatic } = node; + context.push(isStatic ? JSON.stringify(content) : content, node); + } + function genInterpolation(node, context) { + const { push, helper, pure } = context; + if (pure) + push(PURE_ANNOTATION); + push(`${helper(TO_DISPLAY_STRING)}(`); + genNode(node.content, context); + push(`)`); + } + function genCompoundExpression(node, context) { + for (let i = 0; i < node.children.length; i++) { + const child = node.children[i]; + if (isString(child)) { + context.push(child); + } + else { + genNode(child, context); + } + } + } + function genExpressionAsPropertyKey(node, context) { + const { push } = context; + if (node.type === 8 /* COMPOUND_EXPRESSION */) { + push(`[`); + genCompoundExpression(node, context); + push(`]`); + } + else if (node.isStatic) { + // only quote keys if necessary + const text = isSimpleIdentifier(node.content) + ? node.content + : JSON.stringify(node.content); + push(text, node); + } + else { + push(`[${node.content}]`, node); + } + } + function genComment(node, context) { + const { push, helper, pure } = context; + if (pure) { + push(PURE_ANNOTATION); + } + push(`${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`, node); + } + function genVNodeCall(node, context) { + const { push, helper, pure } = context; + const { tag, props, children, patchFlag, dynamicProps, directives, isBlock, disableTracking, isComponent } = node; + if (directives) { + push(helper(WITH_DIRECTIVES) + `(`); + } + if (isBlock) { + push(`(${helper(OPEN_BLOCK)}(${disableTracking ? `true` : ``}), `); + } + if (pure) { + push(PURE_ANNOTATION); + } + const callHelper = isBlock + ? getVNodeBlockHelper(context.inSSR, isComponent) + : getVNodeHelper(context.inSSR, isComponent); + push(helper(callHelper) + `(`, node); + genNodeList(genNullableArgs([tag, props, children, patchFlag, dynamicProps]), context); + push(`)`); + if (isBlock) { + push(`)`); + } + if (directives) { + push(`, `); + genNode(directives, context); + push(`)`); + } + } + function genNullableArgs(args) { + let i = args.length; + while (i--) { + if (args[i] != null) + break; + } + return args.slice(0, i + 1).map(arg => arg || `null`); + } + // JavaScript + function genCallExpression(node, context) { + const { push, helper, pure } = context; + const callee = isString(node.callee) ? node.callee : helper(node.callee); + if (pure) { + push(PURE_ANNOTATION); + } + push(callee + `(`, node); + genNodeList(node.arguments, context); + push(`)`); + } + function genObjectExpression(node, context) { + const { push, indent, deindent, newline } = context; + const { properties } = node; + if (!properties.length) { + push(`{}`, node); + return; + } + const multilines = properties.length > 1 || + (properties.some(p => p.value.type !== 4 /* SIMPLE_EXPRESSION */)); + push(multilines ? `{` : `{ `); + multilines && indent(); + for (let i = 0; i < properties.length; i++) { + const { key, value } = properties[i]; + // key + genExpressionAsPropertyKey(key, context); + push(`: `); + // value + genNode(value, context); + if (i < properties.length - 1) { + // will only reach this if it's multilines + push(`,`); + newline(); + } + } + multilines && deindent(); + push(multilines ? `}` : ` }`); + } + function genArrayExpression(node, context) { + genNodeListAsArray(node.elements, context); + } + function genFunctionExpression(node, context) { + const { push, indent, deindent } = context; + const { params, returns, body, newline, isSlot } = node; + if (isSlot) { + // wrap slot functions with owner context + push(`_${helperNameMap[WITH_CTX]}(`); + } + push(`(`, node); + if (isArray(params)) { + genNodeList(params, context); + } + else if (params) { + genNode(params, context); + } + push(`) => `); + if (newline || body) { + push(`{`); + indent(); + } + if (returns) { + if (newline) { + push(`return `); + } + if (isArray(returns)) { + genNodeListAsArray(returns, context); + } + else { + genNode(returns, context); + } + } + else if (body) { + genNode(body, context); + } + if (newline || body) { + deindent(); + push(`}`); + } + if (isSlot) { + push(`)`); + } + } + function genConditionalExpression(node, context) { + const { test, consequent, alternate, newline: needNewline } = node; + const { push, indent, deindent, newline } = context; + if (test.type === 4 /* SIMPLE_EXPRESSION */) { + const needsParens = !isSimpleIdentifier(test.content); + needsParens && push(`(`); + genExpression(test, context); + needsParens && push(`)`); + } + else { + push(`(`); + genNode(test, context); + push(`)`); + } + needNewline && indent(); + context.indentLevel++; + needNewline || push(` `); + push(`? `); + genNode(consequent, context); + context.indentLevel--; + needNewline && newline(); + needNewline || push(` `); + push(`: `); + const isNested = alternate.type === 19 /* JS_CONDITIONAL_EXPRESSION */; + if (!isNested) { + context.indentLevel++; + } + genNode(alternate, context); + if (!isNested) { + context.indentLevel--; + } + needNewline && deindent(true /* without newline */); + } + function genCacheExpression(node, context) { + const { push, helper, indent, deindent, newline } = context; + push(`_cache[${node.index}] || (`); + if (node.isVNode) { + indent(); + push(`${helper(SET_BLOCK_TRACKING)}(-1),`); + newline(); + } + push(`_cache[${node.index}] = `); + genNode(node.value, context); + if (node.isVNode) { + push(`,`); + newline(); + push(`${helper(SET_BLOCK_TRACKING)}(1),`); + newline(); + push(`_cache[${node.index}]`); + deindent(); + } + push(`)`); + } + + // these keywords should not appear inside expressions, but operators like + // typeof, instanceof and in are allowed + const prohibitedKeywordRE = new RegExp('\\b' + + ('do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,' + + 'super,throw,while,yield,delete,export,import,return,switch,default,' + + 'extends,finally,continue,debugger,function,arguments,typeof,void') + .split(',') + .join('\\b|\\b') + + '\\b'); + // strip strings in expressions + const stripStringRE = /'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`(?:[^`\\]|\\.)*\$\{|\}(?:[^`\\]|\\.)*`|`(?:[^`\\]|\\.)*`/g; + /** + * Validate a non-prefixed expression. + * This is only called when using the in-browser runtime compiler since it + * doesn't prefix expressions. + */ + function validateBrowserExpression(node, context, asParams = false, asRawStatements = false) { + const exp = node.content; + // empty expressions are validated per-directive since some directives + // do allow empty expressions. + if (!exp.trim()) { + return; + } + try { + new Function(asRawStatements + ? ` ${exp} ` + : `return ${asParams ? `(${exp}) => {}` : `(${exp})`}`); + } + catch (e) { + let message = e.message; + const keywordMatch = exp + .replace(stripStringRE, '') + .match(prohibitedKeywordRE); + if (keywordMatch) { + message = `avoid using JavaScript keyword as property name: "${keywordMatch[0]}"`; + } + context.onError(createCompilerError(44 /* X_INVALID_EXPRESSION */, node.loc, undefined, message)); + } + } + + const transformExpression = (node, context) => { + if (node.type === 5 /* INTERPOLATION */) { + node.content = processExpression(node.content, context); + } + else if (node.type === 1 /* ELEMENT */) { + // handle directives on element + for (let i = 0; i < node.props.length; i++) { + const dir = node.props[i]; + // do not process for v-on & v-for since they are special handled + if (dir.type === 7 /* DIRECTIVE */ && dir.name !== 'for') { + const exp = dir.exp; + const arg = dir.arg; + // do not process exp if this is v-on:arg - we need special handling + // for wrapping inline statements. + if (exp && + exp.type === 4 /* SIMPLE_EXPRESSION */ && + !(dir.name === 'on' && arg)) { + dir.exp = processExpression(exp, context, + // slot args must be processed as function params + dir.name === 'slot'); + } + if (arg && arg.type === 4 /* SIMPLE_EXPRESSION */ && !arg.isStatic) { + dir.arg = processExpression(arg, context); + } + } + } + } + }; + // Important: since this function uses Node.js only dependencies, it should + // always be used with a leading !true check so that it can be + // tree-shaken from the browser build. + function processExpression(node, context, + // some expressions like v-slot props & v-for aliases should be parsed as + // function params + asParams = false, + // v-on handler values may contain multiple statements + asRawStatements = false, localVars = Object.create(context.identifiers)) { + { + { + // simple in-browser validation (same logic in 2.x) + validateBrowserExpression(node, context, asParams, asRawStatements); + } + return node; + } + } + + const transformIf = createStructuralDirectiveTransform(/^(if|else|else-if)$/, (node, dir, context) => { + return processIf(node, dir, context, (ifNode, branch, isRoot) => { + // #1587: We need to dynamically increment the key based on the current + // node's sibling nodes, since chained v-if/else branches are + // rendered at the same depth + const siblings = context.parent.children; + let i = siblings.indexOf(ifNode); + let key = 0; + while (i-- >= 0) { + const sibling = siblings[i]; + if (sibling && sibling.type === 9 /* IF */) { + key += sibling.branches.length; + } + } + // Exit callback. Complete the codegenNode when all children have been + // transformed. + return () => { + if (isRoot) { + ifNode.codegenNode = createCodegenNodeForBranch(branch, key, context); + } + else { + // attach this branch's codegen node to the v-if root. + const parentCondition = getParentCondition(ifNode.codegenNode); + parentCondition.alternate = createCodegenNodeForBranch(branch, key + ifNode.branches.length - 1, context); + } + }; + }); + }); + // target-agnostic transform used for both Client and SSR + function processIf(node, dir, context, processCodegen) { + if (dir.name !== 'else' && + (!dir.exp || !dir.exp.content.trim())) { + const loc = dir.exp ? dir.exp.loc : node.loc; + context.onError(createCompilerError(28 /* X_V_IF_NO_EXPRESSION */, dir.loc)); + dir.exp = createSimpleExpression(`true`, false, loc); + } + if (dir.exp) { + validateBrowserExpression(dir.exp, context); + } + if (dir.name === 'if') { + const branch = createIfBranch(node, dir); + const ifNode = { + type: 9 /* IF */, + loc: node.loc, + branches: [branch] + }; + context.replaceNode(ifNode); + if (processCodegen) { + return processCodegen(ifNode, branch, true); + } + } + else { + // locate the adjacent v-if + const siblings = context.parent.children; + const comments = []; + let i = siblings.indexOf(node); + while (i-- >= -1) { + const sibling = siblings[i]; + if (sibling && sibling.type === 3 /* COMMENT */) { + context.removeNode(sibling); + comments.unshift(sibling); + continue; + } + if (sibling && + sibling.type === 2 /* TEXT */ && + !sibling.content.trim().length) { + context.removeNode(sibling); + continue; + } + if (sibling && sibling.type === 9 /* IF */) { + // Check if v-else was followed by v-else-if + if (dir.name === 'else-if' && + sibling.branches[sibling.branches.length - 1].condition === undefined) { + context.onError(createCompilerError(30 /* X_V_ELSE_NO_ADJACENT_IF */, node.loc)); + } + // move the node to the if node's branches + context.removeNode(); + const branch = createIfBranch(node, dir); + if (comments.length && + // #3619 ignore comments if the v-if is direct child of <transition> + !(context.parent && + context.parent.type === 1 /* ELEMENT */ && + isBuiltInType(context.parent.tag, 'transition'))) { + branch.children = [...comments, ...branch.children]; + } + // check if user is forcing same key on different branches + { + const key = branch.userKey; + if (key) { + sibling.branches.forEach(({ userKey }) => { + if (isSameKey(userKey, key)) { + context.onError(createCompilerError(29 /* X_V_IF_SAME_KEY */, branch.userKey.loc)); + } + }); + } + } + sibling.branches.push(branch); + const onExit = processCodegen && processCodegen(sibling, branch, false); + // since the branch was removed, it will not be traversed. + // make sure to traverse here. + traverseNode(branch, context); + // call on exit + if (onExit) + onExit(); + // make sure to reset currentNode after traversal to indicate this + // node has been removed. + context.currentNode = null; + } + else { + context.onError(createCompilerError(30 /* X_V_ELSE_NO_ADJACENT_IF */, node.loc)); + } + break; + } + } + } + function createIfBranch(node, dir) { + const isTemplateIf = node.tagType === 3 /* TEMPLATE */; + return { + type: 10 /* IF_BRANCH */, + loc: node.loc, + condition: dir.name === 'else' ? undefined : dir.exp, + children: isTemplateIf && !findDir(node, 'for') ? node.children : [node], + userKey: findProp(node, `key`), + isTemplateIf + }; + } + function createCodegenNodeForBranch(branch, keyIndex, context) { + if (branch.condition) { + return createConditionalExpression(branch.condition, createChildrenCodegenNode(branch, keyIndex, context), + // make sure to pass in asBlock: true so that the comment node call + // closes the current block. + createCallExpression(context.helper(CREATE_COMMENT), [ + '"v-if"' , + 'true' + ])); + } + else { + return createChildrenCodegenNode(branch, keyIndex, context); + } + } + function createChildrenCodegenNode(branch, keyIndex, context) { + const { helper } = context; + const keyProperty = createObjectProperty(`key`, createSimpleExpression(`${keyIndex}`, false, locStub, 2 /* CAN_HOIST */)); + const { children } = branch; + const firstChild = children[0]; + const needFragmentWrapper = children.length !== 1 || firstChild.type !== 1 /* ELEMENT */; + if (needFragmentWrapper) { + if (children.length === 1 && firstChild.type === 11 /* FOR */) { + // optimize away nested fragments when child is a ForNode + const vnodeCall = firstChild.codegenNode; + injectProp(vnodeCall, keyProperty, context); + return vnodeCall; + } + else { + let patchFlag = 64 /* STABLE_FRAGMENT */; + let patchFlagText = PatchFlagNames[64 /* STABLE_FRAGMENT */]; + // check if the fragment actually contains a single valid child with + // the rest being comments + if (!branch.isTemplateIf && + children.filter(c => c.type !== 3 /* COMMENT */).length === 1) { + patchFlag |= 2048 /* DEV_ROOT_FRAGMENT */; + patchFlagText += `, ${PatchFlagNames[2048 /* DEV_ROOT_FRAGMENT */]}`; + } + return createVNodeCall(context, helper(FRAGMENT), createObjectExpression([keyProperty]), children, patchFlag + (` /* ${patchFlagText} */` ), undefined, undefined, true, false, false /* isComponent */, branch.loc); + } + } + else { + const ret = firstChild.codegenNode; + const vnodeCall = getMemoedVNodeCall(ret); + // Change createVNode to createBlock. + if (vnodeCall.type === 13 /* VNODE_CALL */) { + makeBlock(vnodeCall, context); + } + // inject branch key + injectProp(vnodeCall, keyProperty, context); + return ret; + } + } + function isSameKey(a, b) { + if (!a || a.type !== b.type) { + return false; + } + if (a.type === 6 /* ATTRIBUTE */) { + if (a.value.content !== b.value.content) { + return false; + } + } + else { + // directive + const exp = a.exp; + const branchExp = b.exp; + if (exp.type !== branchExp.type) { + return false; + } + if (exp.type !== 4 /* SIMPLE_EXPRESSION */ || + exp.isStatic !== branchExp.isStatic || + exp.content !== branchExp.content) { + return false; + } + } + return true; + } + function getParentCondition(node) { + while (true) { + if (node.type === 19 /* JS_CONDITIONAL_EXPRESSION */) { + if (node.alternate.type === 19 /* JS_CONDITIONAL_EXPRESSION */) { + node = node.alternate; + } + else { + return node; + } + } + else if (node.type === 20 /* JS_CACHE_EXPRESSION */) { + node = node.value; + } + } + } + + const transformFor = createStructuralDirectiveTransform('for', (node, dir, context) => { + const { helper, removeHelper } = context; + return processFor(node, dir, context, forNode => { + // create the loop render function expression now, and add the + // iterator on exit after all children have been traversed + const renderExp = createCallExpression(helper(RENDER_LIST), [ + forNode.source + ]); + const isTemplate = isTemplateNode(node); + const memo = findDir(node, 'memo'); + const keyProp = findProp(node, `key`); + const keyExp = keyProp && + (keyProp.type === 6 /* ATTRIBUTE */ + ? createSimpleExpression(keyProp.value.content, true) + : keyProp.exp); + const keyProperty = keyProp ? createObjectProperty(`key`, keyExp) : null; + const isStableFragment = forNode.source.type === 4 /* SIMPLE_EXPRESSION */ && + forNode.source.constType > 0 /* NOT_CONSTANT */; + const fragmentFlag = isStableFragment + ? 64 /* STABLE_FRAGMENT */ + : keyProp + ? 128 /* KEYED_FRAGMENT */ + : 256 /* UNKEYED_FRAGMENT */; + forNode.codegenNode = createVNodeCall(context, helper(FRAGMENT), undefined, renderExp, fragmentFlag + + (` /* ${PatchFlagNames[fragmentFlag]} */` ), undefined, undefined, true /* isBlock */, !isStableFragment /* disableTracking */, false /* isComponent */, node.loc); + return () => { + // finish the codegen now that all children have been traversed + let childBlock; + const { children } = forNode; + // check <template v-for> key placement + if (isTemplate) { + node.children.some(c => { + if (c.type === 1 /* ELEMENT */) { + const key = findProp(c, 'key'); + if (key) { + context.onError(createCompilerError(33 /* X_V_FOR_TEMPLATE_KEY_PLACEMENT */, key.loc)); + return true; + } + } + }); + } + const needFragmentWrapper = children.length !== 1 || children[0].type !== 1 /* ELEMENT */; + const slotOutlet = isSlotOutlet(node) + ? node + : isTemplate && + node.children.length === 1 && + isSlotOutlet(node.children[0]) + ? node.children[0] // api-extractor somehow fails to infer this + : null; + if (slotOutlet) { + // <slot v-for="..."> or <template v-for="..."><slot/></template> + childBlock = slotOutlet.codegenNode; + if (isTemplate && keyProperty) { + // <template v-for="..." :key="..."><slot/></template> + // we need to inject the key to the renderSlot() call. + // the props for renderSlot is passed as the 3rd argument. + injectProp(childBlock, keyProperty, context); + } + } + else if (needFragmentWrapper) { + // <template v-for="..."> with text or multi-elements + // should generate a fragment block for each loop + childBlock = createVNodeCall(context, helper(FRAGMENT), keyProperty ? createObjectExpression([keyProperty]) : undefined, node.children, 64 /* STABLE_FRAGMENT */ + + (` /* ${PatchFlagNames[64 /* STABLE_FRAGMENT */]} */` + ), undefined, undefined, true, undefined, false /* isComponent */); + } + else { + // Normal element v-for. Directly use the child's codegenNode + // but mark it as a block. + childBlock = children[0] + .codegenNode; + if (isTemplate && keyProperty) { + injectProp(childBlock, keyProperty, context); + } + if (childBlock.isBlock !== !isStableFragment) { + if (childBlock.isBlock) { + // switch from block to vnode + removeHelper(OPEN_BLOCK); + removeHelper(getVNodeBlockHelper(context.inSSR, childBlock.isComponent)); + } + else { + // switch from vnode to block + removeHelper(getVNodeHelper(context.inSSR, childBlock.isComponent)); + } + } + childBlock.isBlock = !isStableFragment; + if (childBlock.isBlock) { + helper(OPEN_BLOCK); + helper(getVNodeBlockHelper(context.inSSR, childBlock.isComponent)); + } + else { + helper(getVNodeHelper(context.inSSR, childBlock.isComponent)); + } + } + if (memo) { + const loop = createFunctionExpression(createForLoopParams(forNode.parseResult, [ + createSimpleExpression(`_cached`) + ])); + loop.body = createBlockStatement([ + createCompoundExpression([`const _memo = (`, memo.exp, `)`]), + createCompoundExpression([ + `if (_cached`, + ...(keyExp ? [` && _cached.key === `, keyExp] : []), + ` && ${context.helperString(IS_MEMO_SAME)}(_cached, _memo)) return _cached` + ]), + createCompoundExpression([`const _item = `, childBlock]), + createSimpleExpression(`_item.memo = _memo`), + createSimpleExpression(`return _item`) + ]); + renderExp.arguments.push(loop, createSimpleExpression(`_cache`), createSimpleExpression(String(context.cached++))); + } + else { + renderExp.arguments.push(createFunctionExpression(createForLoopParams(forNode.parseResult), childBlock, true /* force newline */)); + } + }; + }); + }); + // target-agnostic transform used for both Client and SSR + function processFor(node, dir, context, processCodegen) { + if (!dir.exp) { + context.onError(createCompilerError(31 /* X_V_FOR_NO_EXPRESSION */, dir.loc)); + return; + } + const parseResult = parseForExpression( + // can only be simple expression because vFor transform is applied + // before expression transform. + dir.exp, context); + if (!parseResult) { + context.onError(createCompilerError(32 /* X_V_FOR_MALFORMED_EXPRESSION */, dir.loc)); + return; + } + const { addIdentifiers, removeIdentifiers, scopes } = context; + const { source, value, key, index } = parseResult; + const forNode = { + type: 11 /* FOR */, + loc: dir.loc, + source, + valueAlias: value, + keyAlias: key, + objectIndexAlias: index, + parseResult, + children: isTemplateNode(node) ? node.children : [node] + }; + context.replaceNode(forNode); + // bookkeeping + scopes.vFor++; + const onExit = processCodegen && processCodegen(forNode); + return () => { + scopes.vFor--; + if (onExit) + onExit(); + }; + } + const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/; + // This regex doesn't cover the case if key or index aliases have destructuring, + // but those do not make sense in the first place, so this works in practice. + const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/; + const stripParensRE = /^\(|\)$/g; + function parseForExpression(input, context) { + const loc = input.loc; + const exp = input.content; + const inMatch = exp.match(forAliasRE); + if (!inMatch) + return; + const [, LHS, RHS] = inMatch; + const result = { + source: createAliasExpression(loc, RHS.trim(), exp.indexOf(RHS, LHS.length)), + value: undefined, + key: undefined, + index: undefined + }; + { + validateBrowserExpression(result.source, context); + } + let valueContent = LHS.trim().replace(stripParensRE, '').trim(); + const trimmedOffset = LHS.indexOf(valueContent); + const iteratorMatch = valueContent.match(forIteratorRE); + if (iteratorMatch) { + valueContent = valueContent.replace(forIteratorRE, '').trim(); + const keyContent = iteratorMatch[1].trim(); + let keyOffset; + if (keyContent) { + keyOffset = exp.indexOf(keyContent, trimmedOffset + valueContent.length); + result.key = createAliasExpression(loc, keyContent, keyOffset); + { + validateBrowserExpression(result.key, context, true); + } + } + if (iteratorMatch[2]) { + const indexContent = iteratorMatch[2].trim(); + if (indexContent) { + result.index = createAliasExpression(loc, indexContent, exp.indexOf(indexContent, result.key + ? keyOffset + keyContent.length + : trimmedOffset + valueContent.length)); + { + validateBrowserExpression(result.index, context, true); + } + } + } + } + if (valueContent) { + result.value = createAliasExpression(loc, valueContent, trimmedOffset); + { + validateBrowserExpression(result.value, context, true); + } + } + return result; + } + function createAliasExpression(range, content, offset) { + return createSimpleExpression(content, false, getInnerRange(range, offset, content.length)); + } + function createForLoopParams({ value, key, index }, memoArgs = []) { + return createParamsList([value, key, index, ...memoArgs]); + } + function createParamsList(args) { + let i = args.length; + while (i--) { + if (args[i]) + break; + } + return args + .slice(0, i + 1) + .map((arg, i) => arg || createSimpleExpression(`_`.repeat(i + 1), false)); + } + + const defaultFallback = createSimpleExpression(`undefined`, false); + // A NodeTransform that: + // 1. Tracks scope identifiers for scoped slots so that they don't get prefixed + // by transformExpression. This is only applied in non-browser builds with + // { prefixIdentifiers: true }. + // 2. Track v-slot depths so that we know a slot is inside another slot. + // Note the exit callback is executed before buildSlots() on the same node, + // so only nested slots see positive numbers. + const trackSlotScopes = (node, context) => { + if (node.type === 1 /* ELEMENT */ && + (node.tagType === 1 /* COMPONENT */ || + node.tagType === 3 /* TEMPLATE */)) { + // We are only checking non-empty v-slot here + // since we only care about slots that introduce scope variables. + const vSlot = findDir(node, 'slot'); + if (vSlot) { + vSlot.exp; + context.scopes.vSlot++; + return () => { + context.scopes.vSlot--; + }; + } + } + }; + const buildClientSlotFn = (props, children, loc) => createFunctionExpression(props, children, false /* newline */, true /* isSlot */, children.length ? children[0].loc : loc); + // Instead of being a DirectiveTransform, v-slot processing is called during + // transformElement to build the slots object for a component. + function buildSlots(node, context, buildSlotFn = buildClientSlotFn) { + context.helper(WITH_CTX); + const { children, loc } = node; + const slotsProperties = []; + const dynamicSlots = []; + // If the slot is inside a v-for or another v-slot, force it to be dynamic + // since it likely uses a scope variable. + let hasDynamicSlots = context.scopes.vSlot > 0 || context.scopes.vFor > 0; + // 1. Check for slot with slotProps on component itself. + // <Comp v-slot="{ prop }"/> + const onComponentSlot = findDir(node, 'slot', true); + if (onComponentSlot) { + const { arg, exp } = onComponentSlot; + if (arg && !isStaticExp(arg)) { + hasDynamicSlots = true; + } + slotsProperties.push(createObjectProperty(arg || createSimpleExpression('default', true), buildSlotFn(exp, children, loc))); + } + // 2. Iterate through children and check for template slots + // <template v-slot:foo="{ prop }"> + let hasTemplateSlots = false; + let hasNamedDefaultSlot = false; + const implicitDefaultChildren = []; + const seenSlotNames = new Set(); + for (let i = 0; i < children.length; i++) { + const slotElement = children[i]; + let slotDir; + if (!isTemplateNode(slotElement) || + !(slotDir = findDir(slotElement, 'slot', true))) { + // not a <template v-slot>, skip. + if (slotElement.type !== 3 /* COMMENT */) { + implicitDefaultChildren.push(slotElement); + } + continue; + } + if (onComponentSlot) { + // already has on-component slot - this is incorrect usage. + context.onError(createCompilerError(37 /* X_V_SLOT_MIXED_SLOT_USAGE */, slotDir.loc)); + break; + } + hasTemplateSlots = true; + const { children: slotChildren, loc: slotLoc } = slotElement; + const { arg: slotName = createSimpleExpression(`default`, true), exp: slotProps, loc: dirLoc } = slotDir; + // check if name is dynamic. + let staticSlotName; + if (isStaticExp(slotName)) { + staticSlotName = slotName ? slotName.content : `default`; + } + else { + hasDynamicSlots = true; + } + const slotFunction = buildSlotFn(slotProps, slotChildren, slotLoc); + // check if this slot is conditional (v-if/v-for) + let vIf; + let vElse; + let vFor; + if ((vIf = findDir(slotElement, 'if'))) { + hasDynamicSlots = true; + dynamicSlots.push(createConditionalExpression(vIf.exp, buildDynamicSlot(slotName, slotFunction), defaultFallback)); + } + else if ((vElse = findDir(slotElement, /^else(-if)?$/, true /* allowEmpty */))) { + // find adjacent v-if + let j = i; + let prev; + while (j--) { + prev = children[j]; + if (prev.type !== 3 /* COMMENT */) { + break; + } + } + if (prev && isTemplateNode(prev) && findDir(prev, 'if')) { + // remove node + children.splice(i, 1); + i--; + // attach this slot to previous conditional + let conditional = dynamicSlots[dynamicSlots.length - 1]; + while (conditional.alternate.type === 19 /* JS_CONDITIONAL_EXPRESSION */) { + conditional = conditional.alternate; + } + conditional.alternate = vElse.exp + ? createConditionalExpression(vElse.exp, buildDynamicSlot(slotName, slotFunction), defaultFallback) + : buildDynamicSlot(slotName, slotFunction); + } + else { + context.onError(createCompilerError(30 /* X_V_ELSE_NO_ADJACENT_IF */, vElse.loc)); + } + } + else if ((vFor = findDir(slotElement, 'for'))) { + hasDynamicSlots = true; + const parseResult = vFor.parseResult || + parseForExpression(vFor.exp, context); + if (parseResult) { + // Render the dynamic slots as an array and add it to the createSlot() + // args. The runtime knows how to handle it appropriately. + dynamicSlots.push(createCallExpression(context.helper(RENDER_LIST), [ + parseResult.source, + createFunctionExpression(createForLoopParams(parseResult), buildDynamicSlot(slotName, slotFunction), true /* force newline */) + ])); + } + else { + context.onError(createCompilerError(32 /* X_V_FOR_MALFORMED_EXPRESSION */, vFor.loc)); + } + } + else { + // check duplicate static names + if (staticSlotName) { + if (seenSlotNames.has(staticSlotName)) { + context.onError(createCompilerError(38 /* X_V_SLOT_DUPLICATE_SLOT_NAMES */, dirLoc)); + continue; + } + seenSlotNames.add(staticSlotName); + if (staticSlotName === 'default') { + hasNamedDefaultSlot = true; + } + } + slotsProperties.push(createObjectProperty(slotName, slotFunction)); + } + } + if (!onComponentSlot) { + const buildDefaultSlotProperty = (props, children) => { + const fn = buildSlotFn(props, children, loc); + return createObjectProperty(`default`, fn); + }; + if (!hasTemplateSlots) { + // implicit default slot (on component) + slotsProperties.push(buildDefaultSlotProperty(undefined, children)); + } + else if (implicitDefaultChildren.length && + // #3766 + // with whitespace: 'preserve', whitespaces between slots will end up in + // implicitDefaultChildren. Ignore if all implicit children are whitespaces. + implicitDefaultChildren.some(node => isNonWhitespaceContent(node))) { + // implicit default slot (mixed with named slots) + if (hasNamedDefaultSlot) { + context.onError(createCompilerError(39 /* X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN */, implicitDefaultChildren[0].loc)); + } + else { + slotsProperties.push(buildDefaultSlotProperty(undefined, implicitDefaultChildren)); + } + } + } + const slotFlag = hasDynamicSlots + ? 2 /* DYNAMIC */ + : hasForwardedSlots(node.children) + ? 3 /* FORWARDED */ + : 1 /* STABLE */; + let slots = createObjectExpression(slotsProperties.concat(createObjectProperty(`_`, + // 2 = compiled but dynamic = can skip normalization, but must run diff + // 1 = compiled and static = can skip normalization AND diff as optimized + createSimpleExpression(slotFlag + (` /* ${slotFlagsText[slotFlag]} */` ), false))), loc); + if (dynamicSlots.length) { + slots = createCallExpression(context.helper(CREATE_SLOTS), [ + slots, + createArrayExpression(dynamicSlots) + ]); + } + return { + slots, + hasDynamicSlots + }; + } + function buildDynamicSlot(name, fn) { + return createObjectExpression([ + createObjectProperty(`name`, name), + createObjectProperty(`fn`, fn) + ]); + } + function hasForwardedSlots(children) { + for (let i = 0; i < children.length; i++) { + const child = children[i]; + switch (child.type) { + case 1 /* ELEMENT */: + if (child.tagType === 2 /* SLOT */ || + hasForwardedSlots(child.children)) { + return true; + } + break; + case 9 /* IF */: + if (hasForwardedSlots(child.branches)) + return true; + break; + case 10 /* IF_BRANCH */: + case 11 /* FOR */: + if (hasForwardedSlots(child.children)) + return true; + break; + } + } + return false; + } + function isNonWhitespaceContent(node) { + if (node.type !== 2 /* TEXT */ && node.type !== 12 /* TEXT_CALL */) + return true; + return node.type === 2 /* TEXT */ + ? !!node.content.trim() + : isNonWhitespaceContent(node.content); + } + + // some directive transforms (e.g. v-model) may return a symbol for runtime + // import, which should be used instead of a resolveDirective call. + const directiveImportMap = new WeakMap(); + // generate a JavaScript AST for this element's codegen + const transformElement = (node, context) => { + // perform the work on exit, after all child expressions have been + // processed and merged. + return function postTransformElement() { + node = context.currentNode; + if (!(node.type === 1 /* ELEMENT */ && + (node.tagType === 0 /* ELEMENT */ || + node.tagType === 1 /* COMPONENT */))) { + return; + } + const { tag, props } = node; + const isComponent = node.tagType === 1 /* COMPONENT */; + // The goal of the transform is to create a codegenNode implementing the + // VNodeCall interface. + let vnodeTag = isComponent + ? resolveComponentType(node, context) + : `"${tag}"`; + const isDynamicComponent = isObject(vnodeTag) && vnodeTag.callee === RESOLVE_DYNAMIC_COMPONENT; + let vnodeProps; + let vnodeChildren; + let vnodePatchFlag; + let patchFlag = 0; + let vnodeDynamicProps; + let dynamicPropNames; + let vnodeDirectives; + let shouldUseBlock = + // dynamic component may resolve to plain elements + isDynamicComponent || + vnodeTag === TELEPORT || + vnodeTag === SUSPENSE || + (!isComponent && + // <svg> and <foreignObject> must be forced into blocks so that block + // updates inside get proper isSVG flag at runtime. (#639, #643) + // This is technically web-specific, but splitting the logic out of core + // leads to too much unnecessary complexity. + (tag === 'svg' || tag === 'foreignObject')); + // props + if (props.length > 0) { + const propsBuildResult = buildProps(node, context, undefined, isComponent, isDynamicComponent); + vnodeProps = propsBuildResult.props; + patchFlag = propsBuildResult.patchFlag; + dynamicPropNames = propsBuildResult.dynamicPropNames; + const directives = propsBuildResult.directives; + vnodeDirectives = + directives && directives.length + ? createArrayExpression(directives.map(dir => buildDirectiveArgs(dir, context))) + : undefined; + if (propsBuildResult.shouldUseBlock) { + shouldUseBlock = true; + } + } + // children + if (node.children.length > 0) { + if (vnodeTag === KEEP_ALIVE) { + // Although a built-in component, we compile KeepAlive with raw children + // instead of slot functions so that it can be used inside Transition + // or other Transition-wrapping HOCs. + // To ensure correct updates with block optimizations, we need to: + // 1. Force keep-alive into a block. This avoids its children being + // collected by a parent block. + shouldUseBlock = true; + // 2. Force keep-alive to always be updated, since it uses raw children. + patchFlag |= 1024 /* DYNAMIC_SLOTS */; + if (node.children.length > 1) { + context.onError(createCompilerError(45 /* X_KEEP_ALIVE_INVALID_CHILDREN */, { + start: node.children[0].loc.start, + end: node.children[node.children.length - 1].loc.end, + source: '' + })); + } + } + const shouldBuildAsSlots = isComponent && + // Teleport is not a real component and has dedicated runtime handling + vnodeTag !== TELEPORT && + // explained above. + vnodeTag !== KEEP_ALIVE; + if (shouldBuildAsSlots) { + const { slots, hasDynamicSlots } = buildSlots(node, context); + vnodeChildren = slots; + if (hasDynamicSlots) { + patchFlag |= 1024 /* DYNAMIC_SLOTS */; + } + } + else if (node.children.length === 1 && vnodeTag !== TELEPORT) { + const child = node.children[0]; + const type = child.type; + // check for dynamic text children + const hasDynamicTextChild = type === 5 /* INTERPOLATION */ || + type === 8 /* COMPOUND_EXPRESSION */; + if (hasDynamicTextChild && + getConstantType(child, context) === 0 /* NOT_CONSTANT */) { + patchFlag |= 1 /* TEXT */; + } + // pass directly if the only child is a text node + // (plain / interpolation / expression) + if (hasDynamicTextChild || type === 2 /* TEXT */) { + vnodeChildren = child; + } + else { + vnodeChildren = node.children; + } + } + else { + vnodeChildren = node.children; + } + } + // patchFlag & dynamicPropNames + if (patchFlag !== 0) { + { + if (patchFlag < 0) { + // special flags (negative and mutually exclusive) + vnodePatchFlag = patchFlag + ` /* ${PatchFlagNames[patchFlag]} */`; + } + else { + // bitwise flags + const flagNames = Object.keys(PatchFlagNames) + .map(Number) + .filter(n => n > 0 && patchFlag & n) + .map(n => PatchFlagNames[n]) + .join(`, `); + vnodePatchFlag = patchFlag + ` /* ${flagNames} */`; + } + } + if (dynamicPropNames && dynamicPropNames.length) { + vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames); + } + } + node.codegenNode = createVNodeCall(context, vnodeTag, vnodeProps, vnodeChildren, vnodePatchFlag, vnodeDynamicProps, vnodeDirectives, !!shouldUseBlock, false /* disableTracking */, isComponent, node.loc); + }; + }; + function resolveComponentType(node, context, ssr = false) { + let { tag } = node; + // 1. dynamic component + const isExplicitDynamic = isComponentTag(tag); + const isProp = findProp(node, 'is'); + if (isProp) { + if (isExplicitDynamic || + (false )) { + const exp = isProp.type === 6 /* ATTRIBUTE */ + ? isProp.value && createSimpleExpression(isProp.value.content, true) + : isProp.exp; + if (exp) { + return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [ + exp + ]); + } + } + else if (isProp.type === 6 /* ATTRIBUTE */ && + isProp.value.content.startsWith('vue:')) { + // <button is="vue:xxx"> + // if not <component>, only is value that starts with "vue:" will be + // treated as component by the parse phase and reach here, unless it's + // compat mode where all is values are considered components + tag = isProp.value.content.slice(4); + } + } + // 1.5 v-is (TODO: Deprecate) + const isDir = !isExplicitDynamic && findDir(node, 'is'); + if (isDir && isDir.exp) { + return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [ + isDir.exp + ]); + } + // 2. built-in components (Teleport, Transition, KeepAlive, Suspense...) + const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag); + if (builtIn) { + // built-ins are simply fallthroughs / have special handling during ssr + // so we don't need to import their runtime equivalents + if (!ssr) + context.helper(builtIn); + return builtIn; + } + // 5. user component (resolve) + context.helper(RESOLVE_COMPONENT); + context.components.add(tag); + return toValidAssetId(tag, `component`); + } + function buildProps(node, context, props = node.props, isComponent, isDynamicComponent, ssr = false) { + const { tag, loc: elementLoc, children } = node; + let properties = []; + const mergeArgs = []; + const runtimeDirectives = []; + const hasChildren = children.length > 0; + let shouldUseBlock = false; + // patchFlag analysis + let patchFlag = 0; + let hasRef = false; + let hasClassBinding = false; + let hasStyleBinding = false; + let hasHydrationEventBinding = false; + let hasDynamicKeys = false; + let hasVnodeHook = false; + const dynamicPropNames = []; + const analyzePatchFlag = ({ key, value }) => { + if (isStaticExp(key)) { + const name = key.content; + const isEventHandler = isOn(name); + if (isEventHandler && + (!isComponent || isDynamicComponent) && + // omit the flag for click handlers because hydration gives click + // dedicated fast path. + name.toLowerCase() !== 'onclick' && + // omit v-model handlers + name !== 'onUpdate:modelValue' && + // omit onVnodeXXX hooks + !isReservedProp(name)) { + hasHydrationEventBinding = true; + } + if (isEventHandler && isReservedProp(name)) { + hasVnodeHook = true; + } + if (value.type === 20 /* JS_CACHE_EXPRESSION */ || + ((value.type === 4 /* SIMPLE_EXPRESSION */ || + value.type === 8 /* COMPOUND_EXPRESSION */) && + getConstantType(value, context) > 0)) { + // skip if the prop is a cached handler or has constant value + return; + } + if (name === 'ref') { + hasRef = true; + } + else if (name === 'class') { + hasClassBinding = true; + } + else if (name === 'style') { + hasStyleBinding = true; + } + else if (name !== 'key' && !dynamicPropNames.includes(name)) { + dynamicPropNames.push(name); + } + // treat the dynamic class and style binding of the component as dynamic props + if (isComponent && + (name === 'class' || name === 'style') && + !dynamicPropNames.includes(name)) { + dynamicPropNames.push(name); + } + } + else { + hasDynamicKeys = true; + } + }; + for (let i = 0; i < props.length; i++) { + // static attribute + const prop = props[i]; + if (prop.type === 6 /* ATTRIBUTE */) { + const { loc, name, value } = prop; + let isStatic = true; + if (name === 'ref') { + hasRef = true; + if (context.scopes.vFor > 0) { + properties.push(createObjectProperty(createSimpleExpression('ref_for', true), createSimpleExpression('true'))); + } + } + // skip is on <component>, or is="vue:xxx" + if (name === 'is' && + (isComponentTag(tag) || + (value && value.content.startsWith('vue:')) || + (false ))) { + continue; + } + properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), createSimpleExpression(value ? value.content : '', isStatic, value ? value.loc : loc))); + } + else { + // directives + const { name, arg, exp, loc } = prop; + const isVBind = name === 'bind'; + const isVOn = name === 'on'; + // skip v-slot - it is handled by its dedicated transform. + if (name === 'slot') { + if (!isComponent) { + context.onError(createCompilerError(40 /* X_V_SLOT_MISPLACED */, loc)); + } + continue; + } + // skip v-once/v-memo - they are handled by dedicated transforms. + if (name === 'once' || name === 'memo') { + continue; + } + // skip v-is and :is on <component> + if (name === 'is' || + (isVBind && + isStaticArgOf(arg, 'is') && + (isComponentTag(tag) || + (false )))) { + continue; + } + // skip v-on in SSR compilation + if (isVOn && ssr) { + continue; + } + if ( + // #938: elements with dynamic keys should be forced into blocks + (isVBind && isStaticArgOf(arg, 'key')) || + // inline before-update hooks need to force block so that it is invoked + // before children + (isVOn && hasChildren && isStaticArgOf(arg, 'vue:before-update'))) { + shouldUseBlock = true; + } + if (isVBind && isStaticArgOf(arg, 'ref') && context.scopes.vFor > 0) { + properties.push(createObjectProperty(createSimpleExpression('ref_for', true), createSimpleExpression('true'))); + } + // special case for v-bind and v-on with no argument + if (!arg && (isVBind || isVOn)) { + hasDynamicKeys = true; + if (exp) { + if (properties.length) { + mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc)); + properties = []; + } + if (isVBind) { + mergeArgs.push(exp); + } + else { + // v-on="obj" -> toHandlers(obj) + mergeArgs.push({ + type: 14 /* JS_CALL_EXPRESSION */, + loc, + callee: context.helper(TO_HANDLERS), + arguments: [exp] + }); + } + } + else { + context.onError(createCompilerError(isVBind + ? 34 /* X_V_BIND_NO_EXPRESSION */ + : 35 /* X_V_ON_NO_EXPRESSION */, loc)); + } + continue; + } + const directiveTransform = context.directiveTransforms[name]; + if (directiveTransform) { + // has built-in directive transform. + const { props, needRuntime } = directiveTransform(prop, node, context); + !ssr && props.forEach(analyzePatchFlag); + properties.push(...props); + if (needRuntime) { + runtimeDirectives.push(prop); + if (isSymbol(needRuntime)) { + directiveImportMap.set(prop, needRuntime); + } + } + } + else if (!isBuiltInDirective(name)) { + // no built-in transform, this is a user custom directive. + runtimeDirectives.push(prop); + // custom dirs may use beforeUpdate so they need to force blocks + // to ensure before-update gets called before children update + if (hasChildren) { + shouldUseBlock = true; + } + } + } + } + let propsExpression = undefined; + // has v-bind="object" or v-on="object", wrap with mergeProps + if (mergeArgs.length) { + if (properties.length) { + mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc)); + } + if (mergeArgs.length > 1) { + propsExpression = createCallExpression(context.helper(MERGE_PROPS), mergeArgs, elementLoc); + } + else { + // single v-bind with nothing else - no need for a mergeProps call + propsExpression = mergeArgs[0]; + } + } + else if (properties.length) { + propsExpression = createObjectExpression(dedupeProperties(properties), elementLoc); + } + // patchFlag analysis + if (hasDynamicKeys) { + patchFlag |= 16 /* FULL_PROPS */; + } + else { + if (hasClassBinding && !isComponent) { + patchFlag |= 2 /* CLASS */; + } + if (hasStyleBinding && !isComponent) { + patchFlag |= 4 /* STYLE */; + } + if (dynamicPropNames.length) { + patchFlag |= 8 /* PROPS */; + } + if (hasHydrationEventBinding) { + patchFlag |= 32 /* HYDRATE_EVENTS */; + } + } + if (!shouldUseBlock && + (patchFlag === 0 || patchFlag === 32 /* HYDRATE_EVENTS */) && + (hasRef || hasVnodeHook || runtimeDirectives.length > 0)) { + patchFlag |= 512 /* NEED_PATCH */; + } + // pre-normalize props, SSR is skipped for now + if (!context.inSSR && propsExpression) { + switch (propsExpression.type) { + case 15 /* JS_OBJECT_EXPRESSION */: + // means that there is no v-bind, + // but still need to deal with dynamic key binding + let classKeyIndex = -1; + let styleKeyIndex = -1; + let hasDynamicKey = false; + for (let i = 0; i < propsExpression.properties.length; i++) { + const key = propsExpression.properties[i].key; + if (isStaticExp(key)) { + if (key.content === 'class') { + classKeyIndex = i; + } + else if (key.content === 'style') { + styleKeyIndex = i; + } + } + else if (!key.isHandlerKey) { + hasDynamicKey = true; + } + } + const classProp = propsExpression.properties[classKeyIndex]; + const styleProp = propsExpression.properties[styleKeyIndex]; + // no dynamic key + if (!hasDynamicKey) { + if (classProp && !isStaticExp(classProp.value)) { + classProp.value = createCallExpression(context.helper(NORMALIZE_CLASS), [classProp.value]); + } + if (styleProp && + // the static style is compiled into an object, + // so use `hasStyleBinding` to ensure that it is a dynamic style binding + (hasStyleBinding || + (styleProp.value.type === 4 /* SIMPLE_EXPRESSION */ && + styleProp.value.content.trim()[0] === `[`) || + // v-bind:style and style both exist, + // v-bind:style with static literal object + styleProp.value.type === 17 /* JS_ARRAY_EXPRESSION */)) { + styleProp.value = createCallExpression(context.helper(NORMALIZE_STYLE), [styleProp.value]); + } + } + else { + // dynamic key binding, wrap with `normalizeProps` + propsExpression = createCallExpression(context.helper(NORMALIZE_PROPS), [propsExpression]); + } + break; + case 14 /* JS_CALL_EXPRESSION */: + // mergeProps call, do nothing + break; + default: + // single v-bind + propsExpression = createCallExpression(context.helper(NORMALIZE_PROPS), [ + createCallExpression(context.helper(GUARD_REACTIVE_PROPS), [ + propsExpression + ]) + ]); + break; + } + } + return { + props: propsExpression, + directives: runtimeDirectives, + patchFlag, + dynamicPropNames, + shouldUseBlock + }; + } + // Dedupe props in an object literal. + // Literal duplicated attributes would have been warned during the parse phase, + // however, it's possible to encounter duplicated `onXXX` handlers with different + // modifiers. We also need to merge static and dynamic class / style attributes. + // - onXXX handlers / style: merge into array + // - class: merge into single expression with concatenation + function dedupeProperties(properties) { + const knownProps = new Map(); + const deduped = []; + for (let i = 0; i < properties.length; i++) { + const prop = properties[i]; + // dynamic keys are always allowed + if (prop.key.type === 8 /* COMPOUND_EXPRESSION */ || !prop.key.isStatic) { + deduped.push(prop); + continue; + } + const name = prop.key.content; + const existing = knownProps.get(name); + if (existing) { + if (name === 'style' || name === 'class' || isOn(name)) { + mergeAsArray$1(existing, prop); + } + // unexpected duplicate, should have emitted error during parse + } + else { + knownProps.set(name, prop); + deduped.push(prop); + } + } + return deduped; + } + function mergeAsArray$1(existing, incoming) { + if (existing.value.type === 17 /* JS_ARRAY_EXPRESSION */) { + existing.value.elements.push(incoming.value); + } + else { + existing.value = createArrayExpression([existing.value, incoming.value], existing.loc); + } + } + function buildDirectiveArgs(dir, context) { + const dirArgs = []; + const runtime = directiveImportMap.get(dir); + if (runtime) { + // built-in directive with runtime + dirArgs.push(context.helperString(runtime)); + } + else { + { + // inject statement for resolving directive + context.helper(RESOLVE_DIRECTIVE); + context.directives.add(dir.name); + dirArgs.push(toValidAssetId(dir.name, `directive`)); + } + } + const { loc } = dir; + if (dir.exp) + dirArgs.push(dir.exp); + if (dir.arg) { + if (!dir.exp) { + dirArgs.push(`void 0`); + } + dirArgs.push(dir.arg); + } + if (Object.keys(dir.modifiers).length) { + if (!dir.arg) { + if (!dir.exp) { + dirArgs.push(`void 0`); + } + dirArgs.push(`void 0`); + } + const trueExpression = createSimpleExpression(`true`, false, loc); + dirArgs.push(createObjectExpression(dir.modifiers.map(modifier => createObjectProperty(modifier, trueExpression)), loc)); + } + return createArrayExpression(dirArgs, dir.loc); + } + function stringifyDynamicPropNames(props) { + let propsNamesString = `[`; + for (let i = 0, l = props.length; i < l; i++) { + propsNamesString += JSON.stringify(props[i]); + if (i < l - 1) + propsNamesString += ', '; + } + return propsNamesString + `]`; + } + function isComponentTag(tag) { + return tag === 'component' || tag === 'Component'; + } + + const transformSlotOutlet = (node, context) => { + if (isSlotOutlet(node)) { + const { children, loc } = node; + const { slotName, slotProps } = processSlotOutlet(node, context); + const slotArgs = [ + context.prefixIdentifiers ? `_ctx.$slots` : `$slots`, + slotName, + '{}', + 'undefined', + 'true' + ]; + let expectedLen = 2; + if (slotProps) { + slotArgs[2] = slotProps; + expectedLen = 3; + } + if (children.length) { + slotArgs[3] = createFunctionExpression([], children, false, false, loc); + expectedLen = 4; + } + if (context.scopeId && !context.slotted) { + expectedLen = 5; + } + slotArgs.splice(expectedLen); // remove unused arguments + node.codegenNode = createCallExpression(context.helper(RENDER_SLOT), slotArgs, loc); + } + }; + function processSlotOutlet(node, context) { + let slotName = `"default"`; + let slotProps = undefined; + const nonNameProps = []; + for (let i = 0; i < node.props.length; i++) { + const p = node.props[i]; + if (p.type === 6 /* ATTRIBUTE */) { + if (p.value) { + if (p.name === 'name') { + slotName = JSON.stringify(p.value.content); + } + else { + p.name = camelize(p.name); + nonNameProps.push(p); + } + } + } + else { + if (p.name === 'bind' && isStaticArgOf(p.arg, 'name')) { + if (p.exp) + slotName = p.exp; + } + else { + if (p.name === 'bind' && p.arg && isStaticExp(p.arg)) { + p.arg.content = camelize(p.arg.content); + } + nonNameProps.push(p); + } + } + } + if (nonNameProps.length > 0) { + const { props, directives } = buildProps(node, context, nonNameProps, false, false); + slotProps = props; + if (directives.length) { + context.onError(createCompilerError(36 /* X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET */, directives[0].loc)); + } + } + return { + slotName, + slotProps + }; + } + + const fnExpRE = /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/; + const transformOn = (dir, node, context, augmentor) => { + const { loc, modifiers, arg } = dir; + if (!dir.exp && !modifiers.length) { + context.onError(createCompilerError(35 /* X_V_ON_NO_EXPRESSION */, loc)); + } + let eventName; + if (arg.type === 4 /* SIMPLE_EXPRESSION */) { + if (arg.isStatic) { + let rawName = arg.content; + // TODO deprecate @vnodeXXX usage + if (rawName.startsWith('vue:')) { + rawName = `vnode-${rawName.slice(4)}`; + } + // for all event listeners, auto convert it to camelCase. See issue #2249 + eventName = createSimpleExpression(toHandlerKey(camelize(rawName)), true, arg.loc); + } + else { + // #2388 + eventName = createCompoundExpression([ + `${context.helperString(TO_HANDLER_KEY)}(`, + arg, + `)` + ]); + } + } + else { + // already a compound expression. + eventName = arg; + eventName.children.unshift(`${context.helperString(TO_HANDLER_KEY)}(`); + eventName.children.push(`)`); + } + // handler processing + let exp = dir.exp; + if (exp && !exp.content.trim()) { + exp = undefined; + } + let shouldCache = context.cacheHandlers && !exp && !context.inVOnce; + if (exp) { + const isMemberExp = isMemberExpression(exp.content); + const isInlineStatement = !(isMemberExp || fnExpRE.test(exp.content)); + const hasMultipleStatements = exp.content.includes(`;`); + { + validateBrowserExpression(exp, context, false, hasMultipleStatements); + } + if (isInlineStatement || (shouldCache && isMemberExp)) { + // wrap inline statement in a function expression + exp = createCompoundExpression([ + `${isInlineStatement + ? `$event` + : `${``}(...args)`} => ${hasMultipleStatements ? `{` : `(`}`, + exp, + hasMultipleStatements ? `}` : `)` + ]); + } + } + let ret = { + props: [ + createObjectProperty(eventName, exp || createSimpleExpression(`() => {}`, false, loc)) + ] + }; + // apply extended compiler augmentor + if (augmentor) { + ret = augmentor(ret); + } + if (shouldCache) { + // cache handlers so that it's always the same handler being passed down. + // this avoids unnecessary re-renders when users use inline handlers on + // components. + ret.props[0].value = context.cache(ret.props[0].value); + } + // mark the key as handler for props normalization check + ret.props.forEach(p => (p.key.isHandlerKey = true)); + return ret; + }; + + // v-bind without arg is handled directly in ./transformElements.ts due to it affecting + // codegen for the entire props object. This transform here is only for v-bind + // *with* args. + const transformBind = (dir, _node, context) => { + const { exp, modifiers, loc } = dir; + const arg = dir.arg; + if (arg.type !== 4 /* SIMPLE_EXPRESSION */) { + arg.children.unshift(`(`); + arg.children.push(`) || ""`); + } + else if (!arg.isStatic) { + arg.content = `${arg.content} || ""`; + } + // .sync is replaced by v-model:arg + if (modifiers.includes('camel')) { + if (arg.type === 4 /* SIMPLE_EXPRESSION */) { + if (arg.isStatic) { + arg.content = camelize(arg.content); + } + else { + arg.content = `${context.helperString(CAMELIZE)}(${arg.content})`; + } + } + else { + arg.children.unshift(`${context.helperString(CAMELIZE)}(`); + arg.children.push(`)`); + } + } + if (!context.inSSR) { + if (modifiers.includes('prop')) { + injectPrefix(arg, '.'); + } + if (modifiers.includes('attr')) { + injectPrefix(arg, '^'); + } + } + if (!exp || + (exp.type === 4 /* SIMPLE_EXPRESSION */ && !exp.content.trim())) { + context.onError(createCompilerError(34 /* X_V_BIND_NO_EXPRESSION */, loc)); + return { + props: [createObjectProperty(arg, createSimpleExpression('', true, loc))] + }; + } + return { + props: [createObjectProperty(arg, exp)] + }; + }; + const injectPrefix = (arg, prefix) => { + if (arg.type === 4 /* SIMPLE_EXPRESSION */) { + if (arg.isStatic) { + arg.content = prefix + arg.content; + } + else { + arg.content = `\`${prefix}\${${arg.content}}\``; + } + } + else { + arg.children.unshift(`'${prefix}' + (`); + arg.children.push(`)`); + } + }; + + // Merge adjacent text nodes and expressions into a single expression + // e.g. <div>abc {{ d }} {{ e }}</div> should have a single expression node as child. + const transformText = (node, context) => { + if (node.type === 0 /* ROOT */ || + node.type === 1 /* ELEMENT */ || + node.type === 11 /* FOR */ || + node.type === 10 /* IF_BRANCH */) { + // perform the transform on node exit so that all expressions have already + // been processed. + return () => { + const children = node.children; + let currentContainer = undefined; + let hasText = false; + for (let i = 0; i < children.length; i++) { + const child = children[i]; + if (isText(child)) { + hasText = true; + for (let j = i + 1; j < children.length; j++) { + const next = children[j]; + if (isText(next)) { + if (!currentContainer) { + currentContainer = children[i] = createCompoundExpression([child], child.loc); + } + // merge adjacent text node into current + currentContainer.children.push(` + `, next); + children.splice(j, 1); + j--; + } + else { + currentContainer = undefined; + break; + } + } + } + } + if (!hasText || + // if this is a plain element with a single text child, leave it + // as-is since the runtime has dedicated fast path for this by directly + // setting textContent of the element. + // for component root it's always normalized anyway. + (children.length === 1 && + (node.type === 0 /* ROOT */ || + (node.type === 1 /* ELEMENT */ && + node.tagType === 0 /* ELEMENT */ && + // #3756 + // custom directives can potentially add DOM elements arbitrarily, + // we need to avoid setting textContent of the element at runtime + // to avoid accidentally overwriting the DOM elements added + // by the user through custom directives. + !node.props.find(p => p.type === 7 /* DIRECTIVE */ && + !context.directiveTransforms[p.name]) && + // in compat mode, <template> tags with no special directives + // will be rendered as a fragment so its children must be + // converted into vnodes. + !(false ))))) { + return; + } + // pre-convert text nodes into createTextVNode(text) calls to avoid + // runtime normalization. + for (let i = 0; i < children.length; i++) { + const child = children[i]; + if (isText(child) || child.type === 8 /* COMPOUND_EXPRESSION */) { + const callArgs = []; + // createTextVNode defaults to single whitespace, so if it is a + // single space the code could be an empty call to save bytes. + if (child.type !== 2 /* TEXT */ || child.content !== ' ') { + callArgs.push(child); + } + // mark dynamic text with flag so it gets patched inside a block + if (!context.ssr && + getConstantType(child, context) === 0 /* NOT_CONSTANT */) { + callArgs.push(1 /* TEXT */ + + (` /* ${PatchFlagNames[1 /* TEXT */]} */` )); + } + children[i] = { + type: 12 /* TEXT_CALL */, + content: child, + loc: child.loc, + codegenNode: createCallExpression(context.helper(CREATE_TEXT), callArgs) + }; + } + } + }; + } + }; + + const seen = new WeakSet(); + const transformOnce = (node, context) => { + if (node.type === 1 /* ELEMENT */ && findDir(node, 'once', true)) { + if (seen.has(node) || context.inVOnce) { + return; + } + seen.add(node); + context.inVOnce = true; + context.helper(SET_BLOCK_TRACKING); + return () => { + context.inVOnce = false; + const cur = context.currentNode; + if (cur.codegenNode) { + cur.codegenNode = context.cache(cur.codegenNode, true /* isVNode */); + } + }; + } + }; + + const transformModel = (dir, node, context) => { + const { exp, arg } = dir; + if (!exp) { + context.onError(createCompilerError(41 /* X_V_MODEL_NO_EXPRESSION */, dir.loc)); + return createTransformProps(); + } + const rawExp = exp.loc.source; + const expString = exp.type === 4 /* SIMPLE_EXPRESSION */ ? exp.content : rawExp; + // im SFC <script setup> inline mode, the exp may have been transformed into + // _unref(exp) + context.bindingMetadata[rawExp]; + const maybeRef = !true /* SETUP_CONST */; + if (!expString.trim() || + (!isMemberExpression(expString) && !maybeRef)) { + context.onError(createCompilerError(42 /* X_V_MODEL_MALFORMED_EXPRESSION */, exp.loc)); + return createTransformProps(); + } + const propName = arg ? arg : createSimpleExpression('modelValue', true); + const eventName = arg + ? isStaticExp(arg) + ? `onUpdate:${arg.content}` + : createCompoundExpression(['"onUpdate:" + ', arg]) + : `onUpdate:modelValue`; + let assignmentExp; + const eventArg = context.isTS ? `($event: any)` : `$event`; + { + assignmentExp = createCompoundExpression([ + `${eventArg} => ((`, + exp, + `) = $event)` + ]); + } + const props = [ + // modelValue: foo + createObjectProperty(propName, dir.exp), + // "onUpdate:modelValue": $event => (foo = $event) + createObjectProperty(eventName, assignmentExp) + ]; + // modelModifiers: { foo: true, "bar-baz": true } + if (dir.modifiers.length && node.tagType === 1 /* COMPONENT */) { + const modifiers = dir.modifiers + .map(m => (isSimpleIdentifier(m) ? m : JSON.stringify(m)) + `: true`) + .join(`, `); + const modifiersKey = arg + ? isStaticExp(arg) + ? `${arg.content}Modifiers` + : createCompoundExpression([arg, ' + "Modifiers"']) + : `modelModifiers`; + props.push(createObjectProperty(modifiersKey, createSimpleExpression(`{ ${modifiers} }`, false, dir.loc, 2 /* CAN_HOIST */))); + } + return createTransformProps(props); + }; + function createTransformProps(props = []) { + return { props }; + } + + const seen$1 = new WeakSet(); + const transformMemo = (node, context) => { + if (node.type === 1 /* ELEMENT */) { + const dir = findDir(node, 'memo'); + if (!dir || seen$1.has(node)) { + return; + } + seen$1.add(node); + return () => { + const codegenNode = node.codegenNode || + context.currentNode.codegenNode; + if (codegenNode && codegenNode.type === 13 /* VNODE_CALL */) { + // non-component sub tree should be turned into a block + if (node.tagType !== 1 /* COMPONENT */) { + makeBlock(codegenNode, context); + } + node.codegenNode = createCallExpression(context.helper(WITH_MEMO), [ + dir.exp, + createFunctionExpression(undefined, codegenNode), + `_cache`, + String(context.cached++) + ]); + } + }; + } + }; + + function getBaseTransformPreset(prefixIdentifiers) { + return [ + [ + transformOnce, + transformIf, + transformMemo, + transformFor, + ...([]), + ...([transformExpression] + ), + transformSlotOutlet, + transformElement, + trackSlotScopes, + transformText + ], + { + on: transformOn, + bind: transformBind, + model: transformModel + } + ]; + } + // we name it `baseCompile` so that higher order compilers like + // @vue/compiler-dom can export `compile` while re-exporting everything else. + function baseCompile(template, options = {}) { + const onError = options.onError || defaultOnError; + const isModuleMode = options.mode === 'module'; + /* istanbul ignore if */ + { + if (options.prefixIdentifiers === true) { + onError(createCompilerError(46 /* X_PREFIX_ID_NOT_SUPPORTED */)); + } + else if (isModuleMode) { + onError(createCompilerError(47 /* X_MODULE_MODE_NOT_SUPPORTED */)); + } + } + const prefixIdentifiers = !true ; + if (options.cacheHandlers) { + onError(createCompilerError(48 /* X_CACHE_HANDLER_NOT_SUPPORTED */)); + } + if (options.scopeId && !isModuleMode) { + onError(createCompilerError(49 /* X_SCOPE_ID_NOT_SUPPORTED */)); + } + const ast = isString(template) ? baseParse(template, options) : template; + const [nodeTransforms, directiveTransforms] = getBaseTransformPreset(); + transform(ast, extend({}, options, { + prefixIdentifiers, + nodeTransforms: [ + ...nodeTransforms, + ...(options.nodeTransforms || []) // user transforms + ], + directiveTransforms: extend({}, directiveTransforms, options.directiveTransforms || {} // user transforms + ) + })); + return generate(ast, extend({}, options, { + prefixIdentifiers + })); + } + + const noopDirectiveTransform = () => ({ props: [] }); + + const V_MODEL_RADIO = Symbol(`vModelRadio` ); + const V_MODEL_CHECKBOX = Symbol(`vModelCheckbox` ); + const V_MODEL_TEXT = Symbol(`vModelText` ); + const V_MODEL_SELECT = Symbol(`vModelSelect` ); + const V_MODEL_DYNAMIC = Symbol(`vModelDynamic` ); + const V_ON_WITH_MODIFIERS = Symbol(`vOnModifiersGuard` ); + const V_ON_WITH_KEYS = Symbol(`vOnKeysGuard` ); + const V_SHOW = Symbol(`vShow` ); + const TRANSITION$1 = Symbol(`Transition` ); + const TRANSITION_GROUP = Symbol(`TransitionGroup` ); + registerRuntimeHelpers({ + [V_MODEL_RADIO]: `vModelRadio`, + [V_MODEL_CHECKBOX]: `vModelCheckbox`, + [V_MODEL_TEXT]: `vModelText`, + [V_MODEL_SELECT]: `vModelSelect`, + [V_MODEL_DYNAMIC]: `vModelDynamic`, + [V_ON_WITH_MODIFIERS]: `withModifiers`, + [V_ON_WITH_KEYS]: `withKeys`, + [V_SHOW]: `vShow`, + [TRANSITION$1]: `Transition`, + [TRANSITION_GROUP]: `TransitionGroup` + }); + + /* eslint-disable no-restricted-globals */ + let decoder; + function decodeHtmlBrowser(raw, asAttr = false) { + if (!decoder) { + decoder = document.createElement('div'); + } + if (asAttr) { + decoder.innerHTML = `<div foo="${raw.replace(/"/g, '"')}">`; + return decoder.children[0].getAttribute('foo'); + } + else { + decoder.innerHTML = raw; + return decoder.textContent; + } + } + + const isRawTextContainer = /*#__PURE__*/ makeMap('style,iframe,script,noscript', true); + const parserOptions = { + isVoidTag, + isNativeTag: tag => isHTMLTag(tag) || isSVGTag(tag), + isPreTag: tag => tag === 'pre', + decodeEntities: decodeHtmlBrowser , + isBuiltInComponent: (tag) => { + if (isBuiltInType(tag, `Transition`)) { + return TRANSITION$1; + } + else if (isBuiltInType(tag, `TransitionGroup`)) { + return TRANSITION_GROUP; + } + }, + // https://html.spec.whatwg.org/multipage/parsing.html#tree-construction-dispatcher + getNamespace(tag, parent) { + let ns = parent ? parent.ns : 0 /* HTML */; + if (parent && ns === 2 /* MATH_ML */) { + if (parent.tag === 'annotation-xml') { + if (tag === 'svg') { + return 1 /* SVG */; + } + if (parent.props.some(a => a.type === 6 /* ATTRIBUTE */ && + a.name === 'encoding' && + a.value != null && + (a.value.content === 'text/html' || + a.value.content === 'application/xhtml+xml'))) { + ns = 0 /* HTML */; + } + } + else if (/^m(?:[ions]|text)$/.test(parent.tag) && + tag !== 'mglyph' && + tag !== 'malignmark') { + ns = 0 /* HTML */; + } + } + else if (parent && ns === 1 /* SVG */) { + if (parent.tag === 'foreignObject' || + parent.tag === 'desc' || + parent.tag === 'title') { + ns = 0 /* HTML */; + } + } + if (ns === 0 /* HTML */) { + if (tag === 'svg') { + return 1 /* SVG */; + } + if (tag === 'math') { + return 2 /* MATH_ML */; + } + } + return ns; + }, + // https://html.spec.whatwg.org/multipage/parsing.html#parsing-html-fragments + getTextMode({ tag, ns }) { + if (ns === 0 /* HTML */) { + if (tag === 'textarea' || tag === 'title') { + return 1 /* RCDATA */; + } + if (isRawTextContainer(tag)) { + return 2 /* RAWTEXT */; + } + } + return 0 /* DATA */; + } + }; + + // Parse inline CSS strings for static style attributes into an object. + // This is a NodeTransform since it works on the static `style` attribute and + // converts it into a dynamic equivalent: + // style="color: red" -> :style='{ "color": "red" }' + // It is then processed by `transformElement` and included in the generated + // props. + const transformStyle = node => { + if (node.type === 1 /* ELEMENT */) { + node.props.forEach((p, i) => { + if (p.type === 6 /* ATTRIBUTE */ && p.name === 'style' && p.value) { + // replace p with an expression node + node.props[i] = { + type: 7 /* DIRECTIVE */, + name: `bind`, + arg: createSimpleExpression(`style`, true, p.loc), + exp: parseInlineCSS(p.value.content, p.loc), + modifiers: [], + loc: p.loc + }; + } + }); + } + }; + const parseInlineCSS = (cssText, loc) => { + const normalized = parseStringStyle(cssText); + return createSimpleExpression(JSON.stringify(normalized), false, loc, 3 /* CAN_STRINGIFY */); + }; + + function createDOMCompilerError(code, loc) { + return createCompilerError(code, loc, DOMErrorMessages ); + } + const DOMErrorMessages = { + [50 /* X_V_HTML_NO_EXPRESSION */]: `v-html is missing expression.`, + [51 /* X_V_HTML_WITH_CHILDREN */]: `v-html will override element children.`, + [52 /* X_V_TEXT_NO_EXPRESSION */]: `v-text is missing expression.`, + [53 /* X_V_TEXT_WITH_CHILDREN */]: `v-text will override element children.`, + [54 /* X_V_MODEL_ON_INVALID_ELEMENT */]: `v-model can only be used on <input>, <textarea> and <select> elements.`, + [55 /* X_V_MODEL_ARG_ON_ELEMENT */]: `v-model argument is not supported on plain elements.`, + [56 /* X_V_MODEL_ON_FILE_INPUT_ELEMENT */]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`, + [57 /* X_V_MODEL_UNNECESSARY_VALUE */]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`, + [58 /* X_V_SHOW_NO_EXPRESSION */]: `v-show is missing expression.`, + [59 /* X_TRANSITION_INVALID_CHILDREN */]: `<Transition> expects exactly one child element or component.`, + [60 /* X_IGNORED_SIDE_EFFECT_TAG */]: `Tags with side effect (<script> and <style>) are ignored in client component templates.` + }; + + const transformVHtml = (dir, node, context) => { + const { exp, loc } = dir; + if (!exp) { + context.onError(createDOMCompilerError(50 /* X_V_HTML_NO_EXPRESSION */, loc)); + } + if (node.children.length) { + context.onError(createDOMCompilerError(51 /* X_V_HTML_WITH_CHILDREN */, loc)); + node.children.length = 0; + } + return { + props: [ + createObjectProperty(createSimpleExpression(`innerHTML`, true, loc), exp || createSimpleExpression('', true)) + ] + }; + }; + + const transformVText = (dir, node, context) => { + const { exp, loc } = dir; + if (!exp) { + context.onError(createDOMCompilerError(52 /* X_V_TEXT_NO_EXPRESSION */, loc)); + } + if (node.children.length) { + context.onError(createDOMCompilerError(53 /* X_V_TEXT_WITH_CHILDREN */, loc)); + node.children.length = 0; + } + return { + props: [ + createObjectProperty(createSimpleExpression(`textContent`, true), exp + ? getConstantType(exp, context) > 0 + ? exp + : createCallExpression(context.helperString(TO_DISPLAY_STRING), [exp], loc) + : createSimpleExpression('', true)) + ] + }; + }; + + const transformModel$1 = (dir, node, context) => { + const baseResult = transformModel(dir, node, context); + // base transform has errors OR component v-model (only need props) + if (!baseResult.props.length || node.tagType === 1 /* COMPONENT */) { + return baseResult; + } + if (dir.arg) { + context.onError(createDOMCompilerError(55 /* X_V_MODEL_ARG_ON_ELEMENT */, dir.arg.loc)); + } + function checkDuplicatedValue() { + const value = findProp(node, 'value'); + if (value) { + context.onError(createDOMCompilerError(57 /* X_V_MODEL_UNNECESSARY_VALUE */, value.loc)); + } + } + const { tag } = node; + const isCustomElement = context.isCustomElement(tag); + if (tag === 'input' || + tag === 'textarea' || + tag === 'select' || + isCustomElement) { + let directiveToUse = V_MODEL_TEXT; + let isInvalidType = false; + if (tag === 'input' || isCustomElement) { + const type = findProp(node, `type`); + if (type) { + if (type.type === 7 /* DIRECTIVE */) { + // :type="foo" + directiveToUse = V_MODEL_DYNAMIC; + } + else if (type.value) { + switch (type.value.content) { + case 'radio': + directiveToUse = V_MODEL_RADIO; + break; + case 'checkbox': + directiveToUse = V_MODEL_CHECKBOX; + break; + case 'file': + isInvalidType = true; + context.onError(createDOMCompilerError(56 /* X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc)); + break; + default: + // text type + checkDuplicatedValue(); + break; + } + } + } + else if (hasDynamicKeyVBind(node)) { + // element has bindings with dynamic keys, which can possibly contain + // "type". + directiveToUse = V_MODEL_DYNAMIC; + } + else { + // text type + checkDuplicatedValue(); + } + } + else if (tag === 'select') { + directiveToUse = V_MODEL_SELECT; + } + else { + // textarea + checkDuplicatedValue(); + } + // inject runtime directive + // by returning the helper symbol via needRuntime + // the import will replaced a resolveDirective call. + if (!isInvalidType) { + baseResult.needRuntime = context.helper(directiveToUse); + } + } + else { + context.onError(createDOMCompilerError(54 /* X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc)); + } + // native vmodel doesn't need the `modelValue` props since they are also + // passed to the runtime as `binding.value`. removing it reduces code size. + baseResult.props = baseResult.props.filter(p => !(p.key.type === 4 /* SIMPLE_EXPRESSION */ && + p.key.content === 'modelValue')); + return baseResult; + }; + + const isEventOptionModifier = /*#__PURE__*/ makeMap(`passive,once,capture`); + const isNonKeyModifier = /*#__PURE__*/ makeMap( + // event propagation management +`stop,prevent,self,` + + // system modifiers + exact + `ctrl,shift,alt,meta,exact,` + + // mouse + `middle`); + // left & right could be mouse or key modifiers based on event type + const maybeKeyModifier = /*#__PURE__*/ makeMap('left,right'); + const isKeyboardEvent = /*#__PURE__*/ makeMap(`onkeyup,onkeydown,onkeypress`, true); + const resolveModifiers = (key, modifiers, context, loc) => { + const keyModifiers = []; + const nonKeyModifiers = []; + const eventOptionModifiers = []; + for (let i = 0; i < modifiers.length; i++) { + const modifier = modifiers[i]; + if (isEventOptionModifier(modifier)) { + // eventOptionModifiers: modifiers for addEventListener() options, + // e.g. .passive & .capture + eventOptionModifiers.push(modifier); + } + else { + // runtimeModifiers: modifiers that needs runtime guards + if (maybeKeyModifier(modifier)) { + if (isStaticExp(key)) { + if (isKeyboardEvent(key.content)) { + keyModifiers.push(modifier); + } + else { + nonKeyModifiers.push(modifier); + } + } + else { + keyModifiers.push(modifier); + nonKeyModifiers.push(modifier); + } + } + else { + if (isNonKeyModifier(modifier)) { + nonKeyModifiers.push(modifier); + } + else { + keyModifiers.push(modifier); + } + } + } + } + return { + keyModifiers, + nonKeyModifiers, + eventOptionModifiers + }; + }; + const transformClick = (key, event) => { + const isStaticClick = isStaticExp(key) && key.content.toLowerCase() === 'onclick'; + return isStaticClick + ? createSimpleExpression(event, true) + : key.type !== 4 /* SIMPLE_EXPRESSION */ + ? createCompoundExpression([ + `(`, + key, + `) === "onClick" ? "${event}" : (`, + key, + `)` + ]) + : key; + }; + const transformOn$1 = (dir, node, context) => { + return transformOn(dir, node, context, baseResult => { + const { modifiers } = dir; + if (!modifiers.length) + return baseResult; + let { key, value: handlerExp } = baseResult.props[0]; + const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(key, modifiers, context, dir.loc); + // normalize click.right and click.middle since they don't actually fire + if (nonKeyModifiers.includes('right')) { + key = transformClick(key, `onContextmenu`); + } + if (nonKeyModifiers.includes('middle')) { + key = transformClick(key, `onMouseup`); + } + if (nonKeyModifiers.length) { + handlerExp = createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [ + handlerExp, + JSON.stringify(nonKeyModifiers) + ]); + } + if (keyModifiers.length && + // if event name is dynamic, always wrap with keys guard + (!isStaticExp(key) || isKeyboardEvent(key.content))) { + handlerExp = createCallExpression(context.helper(V_ON_WITH_KEYS), [ + handlerExp, + JSON.stringify(keyModifiers) + ]); + } + if (eventOptionModifiers.length) { + const modifierPostfix = eventOptionModifiers.map(capitalize).join(''); + key = isStaticExp(key) + ? createSimpleExpression(`${key.content}${modifierPostfix}`, true) + : createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`]); + } + return { + props: [createObjectProperty(key, handlerExp)] + }; + }); + }; + + const transformShow = (dir, node, context) => { + const { exp, loc } = dir; + if (!exp) { + context.onError(createDOMCompilerError(58 /* X_V_SHOW_NO_EXPRESSION */, loc)); + } + return { + props: [], + needRuntime: context.helper(V_SHOW) + }; + }; + + const transformTransition = (node, context) => { + if (node.type === 1 /* ELEMENT */ && + node.tagType === 1 /* COMPONENT */) { + const component = context.isBuiltInComponent(node.tag); + if (component === TRANSITION$1) { + return () => { + if (!node.children.length) { + return; + } + // warn multiple transition children + if (hasMultipleChildren(node)) { + context.onError(createDOMCompilerError(59 /* X_TRANSITION_INVALID_CHILDREN */, { + start: node.children[0].loc.start, + end: node.children[node.children.length - 1].loc.end, + source: '' + })); + } + // check if it's s single child w/ v-show + // if yes, inject "persisted: true" to the transition props + const child = node.children[0]; + if (child.type === 1 /* ELEMENT */) { + for (const p of child.props) { + if (p.type === 7 /* DIRECTIVE */ && p.name === 'show') { + node.props.push({ + type: 6 /* ATTRIBUTE */, + name: 'persisted', + value: undefined, + loc: node.loc + }); + } + } + } + }; + } + } + }; + function hasMultipleChildren(node) { + // #1352 filter out potential comment nodes. + const children = (node.children = node.children.filter(c => c.type !== 3 /* COMMENT */ && + !(c.type === 2 /* TEXT */ && !c.content.trim()))); + const child = children[0]; + return (children.length !== 1 || + child.type === 11 /* FOR */ || + (child.type === 9 /* IF */ && child.branches.some(hasMultipleChildren))); + } + + const ignoreSideEffectTags = (node, context) => { + if (node.type === 1 /* ELEMENT */ && + node.tagType === 0 /* ELEMENT */ && + (node.tag === 'script' || node.tag === 'style')) { + context.onError(createDOMCompilerError(60 /* X_IGNORED_SIDE_EFFECT_TAG */, node.loc)); + context.removeNode(); + } + }; + + const DOMNodeTransforms = [ + transformStyle, + ...([transformTransition] ) + ]; + const DOMDirectiveTransforms = { + cloak: noopDirectiveTransform, + html: transformVHtml, + text: transformVText, + model: transformModel$1, + on: transformOn$1, + show: transformShow + }; + function compile$1(template, options = {}) { + return baseCompile(template, extend({}, parserOptions, options, { + nodeTransforms: [ + // ignore <script> and <tag> + // this is not put inside DOMNodeTransforms because that list is used + // by compiler-ssr to generate vnode fallback branches + ignoreSideEffectTags, + ...DOMNodeTransforms, + ...(options.nodeTransforms || []) + ], + directiveTransforms: extend({}, DOMDirectiveTransforms, options.directiveTransforms || {}), + transformHoist: null + })); + } + + // This entry is the "full-build" that includes both the runtime + { + initDev(); + } + const compileCache = Object.create(null); + function compileToFunction(template, options) { + if (!isString(template)) { + if (template.nodeType) { + template = template.innerHTML; + } + else { + warn$1(`invalid template option: `, template); + return NOOP; + } + } + const key = template; + const cached = compileCache[key]; + if (cached) { + return cached; + } + if (template[0] === '#') { + const el = document.querySelector(template); + if (!el) { + warn$1(`Template element not found or is empty: ${template}`); + } + // __UNSAFE__ + // Reason: potential execution of JS expressions in in-DOM template. + // The user must make sure the in-DOM template is trusted. If it's rendered + // by the server, the template should not contain any user data. + template = el ? el.innerHTML : ``; + } + const { code } = compile$1(template, extend({ + hoistStatic: true, + onError: onError , + onWarn: e => onError(e, true) + }, options)); + function onError(err, asWarning = false) { + const message = asWarning + ? err.message + : `Template compilation error: ${err.message}`; + const codeFrame = err.loc && + generateCodeFrame(template, err.loc.start.offset, err.loc.end.offset); + warn$1(codeFrame ? `${message}\n${codeFrame}` : message); + } + // The wildcard import results in a huge object with every export + // with keys that cannot be mangled, and can be quite heavy size-wise. + // In the global build we know `Vue` is available globally so we can avoid + // the wildcard object. + const render = (new Function(code)() ); + render._rc = true; + return (compileCache[key] = render); + } + registerRuntimeCompiler(compileToFunction); + + exports.BaseTransition = BaseTransition; + exports.Comment = Comment; + exports.EffectScope = EffectScope; + exports.Fragment = Fragment; + exports.KeepAlive = KeepAlive; + exports.ReactiveEffect = ReactiveEffect; + exports.Static = Static; + exports.Suspense = Suspense; + exports.Teleport = Teleport; + exports.Text = Text; + exports.Transition = Transition; + exports.TransitionGroup = TransitionGroup; + exports.VueElement = VueElement; + exports.callWithAsyncErrorHandling = callWithAsyncErrorHandling; + exports.callWithErrorHandling = callWithErrorHandling; + exports.camelize = camelize; + exports.capitalize = capitalize; + exports.cloneVNode = cloneVNode; + exports.compatUtils = compatUtils; + exports.compile = compileToFunction; + exports.computed = computed$1; + exports.createApp = createApp; + exports.createBlock = createBlock; + exports.createCommentVNode = createCommentVNode; + exports.createElementBlock = createElementBlock; + exports.createElementVNode = createBaseVNode; + exports.createHydrationRenderer = createHydrationRenderer; + exports.createPropsRestProxy = createPropsRestProxy; + exports.createRenderer = createRenderer; + exports.createSSRApp = createSSRApp; + exports.createSlots = createSlots; + exports.createStaticVNode = createStaticVNode; + exports.createTextVNode = createTextVNode; + exports.createVNode = createVNode; + exports.customRef = customRef; + exports.defineAsyncComponent = defineAsyncComponent; + exports.defineComponent = defineComponent; + exports.defineCustomElement = defineCustomElement; + exports.defineEmits = defineEmits; + exports.defineExpose = defineExpose; + exports.defineProps = defineProps; + exports.defineSSRCustomElement = defineSSRCustomElement; + exports.effect = effect; + exports.effectScope = effectScope; + exports.getCurrentInstance = getCurrentInstance; + exports.getCurrentScope = getCurrentScope; + exports.getTransitionRawChildren = getTransitionRawChildren; + exports.guardReactiveProps = guardReactiveProps; + exports.h = h; + exports.handleError = handleError; + exports.hydrate = hydrate; + exports.initCustomFormatter = initCustomFormatter; + exports.initDirectivesForSSR = initDirectivesForSSR; + exports.inject = inject; + exports.isMemoSame = isMemoSame; + exports.isProxy = isProxy; + exports.isReactive = isReactive; + exports.isReadonly = isReadonly; + exports.isRef = isRef; + exports.isRuntimeOnly = isRuntimeOnly; + exports.isShallow = isShallow; + exports.isVNode = isVNode; + exports.markRaw = markRaw; + exports.mergeDefaults = mergeDefaults; + exports.mergeProps = mergeProps; + exports.nextTick = nextTick; + exports.normalizeClass = normalizeClass; + exports.normalizeProps = normalizeProps; + exports.normalizeStyle = normalizeStyle; + exports.onActivated = onActivated; + exports.onBeforeMount = onBeforeMount; + exports.onBeforeUnmount = onBeforeUnmount; + exports.onBeforeUpdate = onBeforeUpdate; + exports.onDeactivated = onDeactivated; + exports.onErrorCaptured = onErrorCaptured; + exports.onMounted = onMounted; + exports.onRenderTracked = onRenderTracked; + exports.onRenderTriggered = onRenderTriggered; + exports.onScopeDispose = onScopeDispose; + exports.onServerPrefetch = onServerPrefetch; + exports.onUnmounted = onUnmounted; + exports.onUpdated = onUpdated; + exports.openBlock = openBlock; + exports.popScopeId = popScopeId; + exports.provide = provide; + exports.proxyRefs = proxyRefs; + exports.pushScopeId = pushScopeId; + exports.queuePostFlushCb = queuePostFlushCb; + exports.reactive = reactive; + exports.readonly = readonly; + exports.ref = ref; + exports.registerRuntimeCompiler = registerRuntimeCompiler; + exports.render = render; + exports.renderList = renderList; + exports.renderSlot = renderSlot; + exports.resolveComponent = resolveComponent; + exports.resolveDirective = resolveDirective; + exports.resolveDynamicComponent = resolveDynamicComponent; + exports.resolveFilter = resolveFilter; + exports.resolveTransitionHooks = resolveTransitionHooks; + exports.setBlockTracking = setBlockTracking; + exports.setDevtoolsHook = setDevtoolsHook; + exports.setTransitionHooks = setTransitionHooks; + exports.shallowReactive = shallowReactive; + exports.shallowReadonly = shallowReadonly; + exports.shallowRef = shallowRef; + exports.ssrContextKey = ssrContextKey; + exports.ssrUtils = ssrUtils; + exports.stop = stop; + exports.toDisplayString = toDisplayString; + exports.toHandlerKey = toHandlerKey; + exports.toHandlers = toHandlers; + exports.toRaw = toRaw; + exports.toRef = toRef; + exports.toRefs = toRefs; + exports.transformVNodeArgs = transformVNodeArgs; + exports.triggerRef = triggerRef; + exports.unref = unref; + exports.useAttrs = useAttrs; + exports.useCssModule = useCssModule; + exports.useCssVars = useCssVars; + exports.useSSRContext = useSSRContext; + exports.useSlots = useSlots; + exports.useTransitionState = useTransitionState; + exports.vModelCheckbox = vModelCheckbox; + exports.vModelDynamic = vModelDynamic; + exports.vModelRadio = vModelRadio; + exports.vModelSelect = vModelSelect; + exports.vModelText = vModelText; + exports.vShow = vShow; + exports.version = version; + exports.warn = warn$1; + exports.watch = watch; + exports.watchEffect = watchEffect; + exports.watchPostEffect = watchPostEffect; + exports.watchSyncEffect = watchSyncEffect; + exports.withAsyncContext = withAsyncContext; + exports.withCtx = withCtx; + exports.withDefaults = withDefaults; + exports.withDirectives = withDirectives; + exports.withKeys = withKeys; + exports.withMemo = withMemo; + exports.withModifiers = withModifiers; + exports.withScopeId = withScopeId; + + Object.defineProperty(exports, '__esModule', { value: true }); + + return exports; + +}({})); \ No newline at end of file diff --git a/public/~$anxian.docx b/public/~$anxian.docx new file mode 100644 index 0000000..36a694d --- /dev/null +++ b/public/~$anxian.docx Binary files differ diff --git a/public/~$db.docx b/public/~$db.docx new file mode 100644 index 0000000..36a694d --- /dev/null +++ b/public/~$db.docx Binary files differ diff --git a/public/~$iguan2.docx b/public/~$iguan2.docx new file mode 100644 index 0000000..36a694d --- /dev/null +++ b/public/~$iguan2.docx Binary files differ diff --git a/public/~$jiguan.docx b/public/~$jiguan.docx new file mode 100644 index 0000000..36a694d --- /dev/null +++ b/public/~$jiguan.docx Binary files differ diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..cd16f19 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,21 @@ +<template> + <el-config-provider :locale="locale"> + <router-view /> + </el-config-provider> +</template> +<script> +import zhCn from 'element-plus/lib/locale/lang/zh-cn' +export default { + name: "App", + setup() { + // 鍒囨崲涓轰腑鏂� + let locale = zhCn + return { + locale + } + } +} +</script> +<style lang="scss"> +#app{} +</style> \ No newline at end of file diff --git a/src/api/BXKapi.js b/src/api/BXKapi.js new file mode 100644 index 0000000..a2d4487 --- /dev/null +++ b/src/api/BXKapi.js @@ -0,0 +1,16 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function bainxkVoList(data = {}) { + return instance.request({ + method: "post", + url: "bianxk/last", + data, + }); +} +export function save(data) { + return instance.request({ + method: "post", + url: "bianxk1/edit", + data, + }); +} diff --git a/src/api/DBapi.js b/src/api/DBapi.js new file mode 100644 index 0000000..d02e0ec --- /dev/null +++ b/src/api/DBapi.js @@ -0,0 +1,16 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function dabaoVoLast(data = {}) { + return instance.request({ + method: "post", + url: "dabaoVo/last", + data, + }); +} +export function save(data) { + return instance.request({ + method: "post", + url: "dabaoVo/edit", + data, + }); +} diff --git a/src/api/FBapi.js b/src/api/FBapi.js new file mode 100644 index 0000000..62be8e8 --- /dev/null +++ b/src/api/FBapi.js @@ -0,0 +1,16 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function fanbianVoLast(data = {}) { + return instance.request({ + method: "post", + url: "fanbianVo/last", + data, + }); +} +export function save(data) { + return instance.request({ + method: "post", + url: "fanbianVo/edit", + data, + }); +} diff --git a/src/api/Guanxian.js b/src/api/Guanxian.js new file mode 100644 index 0000000..1c8d872 --- /dev/null +++ b/src/api/Guanxian.js @@ -0,0 +1,16 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function ShengchanVoList(data = {}) { + return instance.request({ + method: "post", + url: "ShengchanVo/last", + data, + }); +} +export function save(data) { + return instance.request({ + method: "post", + url: "ShengchanVo/edit", + data, + }); +} diff --git a/src/api/HJapi.js b/src/api/HJapi.js new file mode 100644 index 0000000..ca9af4a --- /dev/null +++ b/src/api/HJapi.js @@ -0,0 +1,16 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function hanjiVoLest(data = {}) { + return instance.request({ + method: "post", + url: "hanjiVo/last", + data, + }); +} +export function save(data) { + return instance.request({ + method: "post", + url: "hanjiVo/edit", + data, + }); +} diff --git a/src/api/JBapi.js b/src/api/JBapi.js new file mode 100644 index 0000000..9cd3d0a --- /dev/null +++ b/src/api/JBapi.js @@ -0,0 +1,16 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function jianbjVoLast(data) { + return instance.request({ + method: "post", + url: "jianbjVo/last", + data, + }); +} +export function save(data) { + return instance.request({ + method: "post", + url: "jianbjVo/edit", + data, + }); +} diff --git a/src/api/JiGuan.js b/src/api/JiGuan.js new file mode 100644 index 0000000..be272d4 --- /dev/null +++ b/src/api/JiGuan.js @@ -0,0 +1,16 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function jiguanVoLast(data = {}) { + return instance.request({ + method: "post", + url: "jiguanVo/last", + data, + }); +} +export function save(data) { + return instance.request({ + method: "post", + url: "jiguanVo/edit", + data, + }); +} diff --git a/src/api/JianGuan.js b/src/api/JianGuan.js new file mode 100644 index 0000000..0dc77fd --- /dev/null +++ b/src/api/JianGuan.js @@ -0,0 +1,16 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function jianguanVoLast(data = {}) { + return instance.request({ + method: "post", + url: "jianguanVo/last", + data, + }); +} +export function save(data) { + return instance.request({ + method: "post", + url: "jianguanVo/edit", + data, + }); +} diff --git a/src/api/SCTJapi.js b/src/api/SCTJapi.js new file mode 100644 index 0000000..32e45e2 --- /dev/null +++ b/src/api/SCTJapi.js @@ -0,0 +1,16 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function last(data = {}) { + return instance.request({ + method: "post", + url: "shengchan-tj/last", + data, + }); +} +export function save(data) { + return instance.request({ + method: "post", + url: "shengchan-tj/edit", + data, + }); +} diff --git a/src/api/account.js b/src/api/account.js new file mode 100644 index 0000000..1775da9 --- /dev/null +++ b/src/api/account.js @@ -0,0 +1,104 @@ +import instance from "@/utils/request"; // 寮曞叆鎷︽埅鍣� +// 鐢ㄦ埛鍒楄〃 +export function userList(data = {}) { + return instance.get("/sys/user/list", { params: data }) +} +//鏌ヨ瑙掕壊涓嬬殑user +export function userRoleList(data = {}) { + return instance.get("/sys/user/userRoleList", { params: data }) +} +//娣诲姞鐢ㄦ埛瑙掕壊 +export function addSysUserRole(data = {}) { + return instance.request({ + method: "post", + url: "/sys/user/addSysUserRole", + data, + }); +} +// 鍒犻櫎鐢ㄦ埛瑙掕壊 +export function deleteUserRole(params = {}) { + return instance.delete("/sys/user/deleteUserRole", { params: params }) +} +// 娣诲姞鐢ㄦ埛 +export function add(data = {}) { + return instance.request({ + method: "post", + url: "/sys/user/add", + data, + }); +} +// 楠岃瘉 +export function duplicateUser(data = {}) { + return instance.get("/sys/duplicate/check", { params: data }) +} +// 鍐荤粨 +export function frozenBatch(data = {}) { + return instance.request({ + method: "put", + url: "/sys/user/frozenBatch", + data, + }); +} +// 楠岃瘉鐢ㄦ埛鍚� +// export function selectByUserid(params) { +// return instance.get('/sys/user/checkOnlyUser', { params: params }); +// } + +export function edit(data = {}) { + return instance.request({ + method: "post", + url: "/sys/user/edit", + data, + }); +} +// 淇敼瀵嗙爜 +export function modifyPassword(data = {}) { + return instance.request({ + method: "put", + url: "/sys/user/changePassword", + data, + }); +} + +export function deleteUser(data = {}) { + return instance.request({ + method: "delete", + url: "/sys/user/delete?id=" + data, + }); +} +// +/** 鐧诲綍 */ +export function Login(data = {}) { + // console.log("login1 ...", data); + return instance.request({ + method: "post", + url: "/sys/login/", + data, + }); +} +// 楠岃瘉鐮� +export function yzm(data = {}) { + return instance.request({ + method: "get", + url: "/sys/randomImage/" + data, + + }); +} + +/** 鐧诲嚭 */ +export function Logout(data = {}) { + return instance.request({ + method: "post", + url: "/logout/", + data, + }); +} + +/** 璺敱鏉冮檺 */ +export function GetPermission(data = {}) { + return instance.request({ + method: "get", + url: "sys/permission/getUserPermissionByToken", + data, + }); +} diff --git a/src/api/b.js b/src/api/b.js new file mode 100644 index 0000000..51fd06c --- /dev/null +++ b/src/api/b.js @@ -0,0 +1,51 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function b1VoLast(data = {}) { + return instance.request({ + method: "post", + url: "/b/scjh/last", + data, + }); +} +export function b2VoLast(data = {}) { + return instance.request({ + method: "post", + url: "/b/sbjx/last", + data, + }); +} +export function b1Save(data) { + return instance.request({ + method: "post", + url: "/b/scjh/edit", + data, + }); +} + export function b3VoLast(data = {}) { + return instance.request({ + method: "get", + url: "/b/pplan/last", + data, + }); + } + export function b3Save(data) { + return instance.request({ + method: "post", + url: "b/pplan/add", + data, + }); +} +export function b4VoLast(data = {}) { + return instance.request({ + method: "post", + url: "/b/zhxx/last", + data, + }); +} +export function b4Save(data) { + return instance.request({ + method: "post", + url: "b/zhxx/add", + data, + }); +} \ No newline at end of file diff --git a/src/api/dep.js b/src/api/dep.js new file mode 100644 index 0000000..7b3c0b0 --- /dev/null +++ b/src/api/dep.js @@ -0,0 +1,49 @@ +import instance from "@/utils/request"; // 寮曞叆鎷︽埅鍣� +/** 鏂板閮ㄩ棬 */ +export function addDepart(data = {}) { + return instance.request({ + method: "post", + url: "/sys/sysDepart/add", + data + }) +} + +/** 閮ㄩ棬鑿滃崟鏉冮檺淇敼 */ +export function saveDepartPermission(data = {}) { + return instance.request({ + method: "post", + url: "/sys/permission/saveDepartPermission", + data + }) +} + +/** 閮ㄩ棬淇℃伅淇敼 */ +export function edit(data = {}) { + return instance.request({ + method: "post", + url: "/sys/sysDepart/edit", + data + }) +} + +// 鍒犻櫎閮ㄩ棬 +export function deleteBatch(params = {}) { + return instance.delete("/sys/sysDepart/deleteBatch", { params: params }) +} +/** 閮ㄩ棬鍒楄〃 */ +export function DepartListAll(params = {}) { + return instance.get("/sys/sysDepart/queryTreeList", { params: params }) +} +// 鎸囧畾ID鏌ヨ閮ㄩ棬 +export function queryUserDepart(params = {}) { + return instance.get("/sys/user/userDepartList", { params: params }) +} +// 鏌ヨ閮ㄩ棬鑿滃崟鏉冮檺 +export function queryDepartPermission(params = {}) { + return instance.get("/sys/permission/queryDepartPermission", { params: params }) +} + +// 鍏抽敭瀛楁煡璇㈤儴闂� +export function searchBy(params = {}) { + return instance.get("/sys/sysDepart/searchBy", { params: params }) +} diff --git a/src/api/gaixian.js b/src/api/gaixian.js new file mode 100644 index 0000000..8dfc1f4 --- /dev/null +++ b/src/api/gaixian.js @@ -0,0 +1,275 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function chongVoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/chongVoController/last", + data, + }); +} +export function chongVoSave(data) { + return instance.request({ + method: "post", + url: "g/chongVoController/edit", + data, + }); +} +//g02 +export function chong02VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/chongDayCheckVoController/last", + data, + }); +} +export function chong02VoSave(data) { + return instance.request({ + method: "post", + url: "g/chongDayCheckVoController/edit", + data, + }); +} +//g03 +export function chong03VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/chongWeekVoController/last", + data, + }); +} +export function chong03VoSave(data) { + return instance.request({ + method: "post", + url: "g/chongWeekVoController/edit", + data, + }); +} +//g04 +//g03 +export function chong04VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/chongCleanVoController/last", + data, + }); +} +export function chong04VoSave(data) { + return instance.request({ + method: "post", + url: "g/chongCleanVoController/edit", + data, + }); +} + +//g05 +export function chong05VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/zhujiaoVoController/last", + data, + }); +} +export function chong05VoSave(data) { + return instance.request({ + method: "post", + url: "g/zhujiaoVoController/edit", + data, + }); +} + +//g06 +export function chong06VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/zhujiaoDayCheckVoController/last", + data, + }); +} +export function chong06VoSave(data) { + return instance.request({ + method: "post", + url: "g/zhujiaoDayCheckVoController/edit", + data, + }); +} +//g07 +export function chong07VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/zhujiaoWeekVoController/last", + data, + }); +} +export function chong07VoSave(data) { + return instance.request({ + method: "post", + url: "g/zhujiaoWeekVoController/edit", + data, + }); +} +//g08 +export function chong08VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/zhujiaoWeekVoController/last", + data, + }); +} +export function chong08VoSave(data) { + return instance.request({ + method: "post", + url: "g/zhujiaoWeekVoController/edit", + data, + }); +} + +//g09 +export function chong09VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/jiGaiVoController/last", + data, + }); +} +export function chong09VoSave(data) { + return instance.request({ + method: "post", + url: "g/jiGaiVoController/edit", + data, + }); +} +//g10 +export function chong10VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/jg10XkVoController/last", + data, + }); +} +export function chong10VoSave(data) { + return instance.request({ + method: "post", + url: "g/jg10XkVoController/edit", + data, + }); +} +//g11 +export function chong11VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/jg11QjVoController/last", + data, + }); +} +export function chong11VoSave(data) { + return instance.request({ + method: "post", + url: "g/jg11QjVoController/edit", + data, + }); +} +//g12 +export function chong12VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/sm12SmVoController/last", + data, + }); +} +export function chong12VoSave(data) { + return instance.request({ + method: "post", + url: "g/sm12SmVoController/edit", + data, + }); +} +//g13 +export function chong13VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/c13CtsyVoController/last", + data, + }); +} +export function chong13VoSave(data) { + return instance.request({ + method: "post", + url: "g/c13CtsyVoController/edit", + data, + }); +} +//g14 +export function chong14VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/diGaiShengChanVoController/last", + data, + }); +} +export function chong14VoSave(data) { + return instance.request({ + method: "post", + url: "g/diGaiShengChanVoController/edit", + data, + }); +} +//g15 +export function chong15VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/gaiXianTJVoController/last", + data, + }); +} +export function chong15VoSave(data) { + return instance.request({ + method: "post", + url: "g/gaiXianTJVoController/edit", + data, + }); +} +//g16 +export function chong16VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/gyj16VoController/last", + data, + }); +} +export function chong16VoSave(data) { + return instance.request({ + method: "post", + url: "g/gyj16VoController/edit", + data, + }); +} +//g17 +export function chong17VoLast(data = {}) { + return instance.request({ + method: "post", + url: "g/c17FzjtVoController/last", + data, + }); +} +export function chong17VoSave(data) { + return instance.request({ + method: "post", + url: "g/c17FzjtVoController/edit", + data, + }); +} +//g18 +export function chong18VoLast(data = {}) { + return instance.request({ + method: "get", + url: "g/g18-chanliangtongji/last", + data, + }); +} +export function chong18VoSave(data) { + return instance.request({ + method: "post", + url: "g/g18-chanliangtongji/edit", + data, + }); +} \ No newline at end of file diff --git a/src/api/head.js b/src/api/head.js new file mode 100644 index 0000000..f0fb64c --- /dev/null +++ b/src/api/head.js @@ -0,0 +1,96 @@ +import instance from "@/utils/request"; +// 鍒楄〃鍐呭鑾峰彇 +export function headPage(data) { + return instance.request({ + method: "post", + url: "head/all", + data, + }); +} + +export function headAll(data) { + return instance.request({ + method: "post", + url: "head/all", + data, + }); +} +export function leixList() { + console.log(".......leixing"); + return instance.request({ + method: "get", + url: "sys/permission/getUserMenu", + }); +} +export function pageSearch(data) { + console.log(".......search", data); + return instance.request({ + method: "post", + url: "head/shijian", + data, + }); +} +export function getDate(data) { + return data.substr(0, 10); +} +export function getTime(data) { + return data.substr(11, 5); +} +export function headReport(data) { + console.log("report........", data.leixing); + let chanxian = { + A0: "bianxk/id?id=", + A1: "jianbjVo/id?id=", + A2: "hanjiVo/id?id=", + A3: "fanbianVo/id?id=", + A4: "jianguanVo/id?id=", + A5: "jiguanVo/id?id=", + A6: "dabaoVo/id?id=", + A7: "ShengchanVo/id?id=", + }; + let gaixian = { + g01: "g/chongVoController/id?id=", + g02: "g/chongDayCheckVoController/id?id=", + g03: "g/chongWeekVoController/id?id=", + g04: "g/chongCleanVoController/id?id=", + g05: "g/zhujiaoVoController/id?id=", + g06: "g/zhujiaoDayCheckVoController/id?id=", + g07: "g/zhujiaoWeekVoController/id?id=", + g08: "g/zhujiaoCleanVoController/id?id=", + g09: "g/jiGaiVoController/id?id=", + g10: "g/jg10XkVoController/id?id=", + g11: "jianbjVo/id?id=", + g12: "jianbjVo/id?id=", + g13: "g/c13CtsyVoController/id?id=", + g14: "g/diGaiShengChanVoController/id?id=", + g15: "g/gaiXianTJVoController/gid?id=", + g16: "g/gyj16VoController/id?id=", + g17: "g/c17FzjtVoController/id?id=", + g18: "g/g18-chanliangtongji/id?id=", + }; + if (data.leixing.indexOf("A") == 0) { + console.log("aaaaaaaaaaaaaa"); + return instance.request({ + method: "get", + url: chanxian[data.leixing] + data.head_id, + data, + }); + } else if (data.leixing.indexOf("g") == 0) { + console.log("bbbbbbbbbbbbbb"); + console.log( + data.leixing.length == 2 + ? data.leixing.substr(0, 1) + "0" + data.leixing.substr(1, 1) + : data.leixing + ); + return instance.request({ + method: "get", + url: + gaixian[ + data.leixing.length == 2 + ? data.leixing.substr(0, 1) + "0" + data.leixing.substr(1, 1) + : data.leixing + ] + data.head_id, + data, + }); + } +} diff --git a/src/api/menu.js b/src/api/menu.js new file mode 100644 index 0000000..a37032b --- /dev/null +++ b/src/api/menu.js @@ -0,0 +1,35 @@ +import instance from "@/utils/request"; // 寮曞叆鎷︽埅鍣� + +// 娣诲姞鑿滃崟 +export function MenuAdd(data = {}) { + return instance.request({ + method: "post", + url: "/sys/permission/add", + data + }) +} +/** 鑿滃崟缂栬緫 */ +export function MenuUpdate(data = {}) { + return instance.request({ + method: "post", + url: "/sys/permission/edit", + data + }) +} + +/** 鑿滃崟鍒楄〃鏍戠姸鏁版嵁 */ +export function MenuListTree(params = {}) { + return instance.get("/sys/permission/list", { params: params }) +} +//鐢ㄦ埛鑿滃崟 +export function getUserPermissionByToken(params = {}) { + return instance.get("/sys/permission/getUserPermissionByToken", { params: params }) +} +// 鏌ヨurl鏄惁鍙敤 +export function checkPermDuplication(params = {}) { + return instance.get("/sys/permission/checkPermDuplication", { params: params }) +} +// 鍒犻櫎鑿滃崟 +export function deleteMenu(params = {}) { + return instance.delete("/sys/permission/delete", { params: params }) +} diff --git a/src/api/role.js b/src/api/role.js new file mode 100644 index 0000000..f224a3a --- /dev/null +++ b/src/api/role.js @@ -0,0 +1,51 @@ +import instance from "@/utils/request"; // 寮曞叆鎷︽埅鍣� +/** 鍒涘缓瑙掕壊 */ +export function RoleCreate(data = {}) { + return instance.request({ + method: "post", + url: "/sys/role/add", + data + }) +} +/** 瑙掕壊璇︽儏 */ +export function RoleDetailed(data = {}) { + return instance.request({ + method: "post", + url: "/role/detailed", + data + }) +} +/** 瑙掕壊淇敼 */ +export function RoleUpdate(data = {}) { + return instance.request({ + method: "post", + url: "/sys/role/edit", + data + }) +} +// 鍒犻櫎瑙掕壊 +export function deleteRole(params = {}) { + return instance.delete("/sys/role/delete", { params: params }) +} +/** 瑙掕壊鍒楄〃 */ +export function RoleListAll(params = {}) { + return instance.get("/sys/role/list", { params: params }) +} +// 鏌ヨ鎸囧畾id瑙掕壊 +export function queryUserRole(params = {}) { + return instance.get("/sys/user/queryUserRole", { params: params }) +} +// 鏌ヨ瑙掕壊缂栫爜鏄惁鍗犵敤 +export function checkRoleCode(params = {}) { + return instance.get("/sys/role/checkRoleCode", { params: params }) +} +// +export function queryTreeList(params = {}) { + return instance.get("/sys/role/queryTreeList", { params: params }) +} +export function queryRolePermission(params = {}) { + return instance.get("/sys/permission/queryRolePermission", { params: params }) +} +export function saveRolePermission(params = {}) { + return instance.post("/sys/permission/saveRolePermission", params) +} \ No newline at end of file diff --git a/src/assets/images/login_bk.jpg b/src/assets/images/login_bk.jpg new file mode 100644 index 0000000..d893c5f --- /dev/null +++ b/src/assets/images/login_bk.jpg Binary files differ diff --git a/src/assets/images/logo-min.png b/src/assets/images/logo-min.png new file mode 100644 index 0000000..1aa5bce --- /dev/null +++ b/src/assets/images/logo-min.png Binary files differ diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000..ee013e4 --- /dev/null +++ b/src/assets/images/logo.png Binary files differ diff --git a/src/assets/print/index.js b/src/assets/print/index.js new file mode 100644 index 0000000..f5e0a6d --- /dev/null +++ b/src/assets/print/index.js @@ -0,0 +1,13 @@ +import Print from "./packages/print.js"; +Print.install = function (Vue) { + // Vue.directive("print", Print); + Vue.directive("print", { + // 褰撹缁戝畾鐨勫厓绱犳寕杞藉埌DOM涓椂 + mounted(el) { + // 鑱氱劍鍏冪礌 + // el.print(); + }, + }); +}; + +export default Print; diff --git a/src/assets/print/packages/css/print.css b/src/assets/print/packages/css/print.css new file mode 100644 index 0000000..f8e9695 --- /dev/null +++ b/src/assets/print/packages/css/print.css @@ -0,0 +1,3 @@ +div{ + +} \ No newline at end of file diff --git a/src/assets/print/packages/images/print-icon.png b/src/assets/print/packages/images/print-icon.png new file mode 100644 index 0000000..51275e5 --- /dev/null +++ b/src/assets/print/packages/images/print-icon.png Binary files differ diff --git a/src/assets/print/packages/print.js b/src/assets/print/packages/print.js new file mode 100644 index 0000000..f6ed7d8 --- /dev/null +++ b/src/assets/print/packages/print.js @@ -0,0 +1,95 @@ +/* + * @Author: lee + * @Date: 2021-05-10 11:45:50 + * @LastEditors: lee + * @LastEditTime: 2021-05-20 15:39:43 + * @Description: file content + */ +import Print from "./printarea.js"; +/** + * @file 鎵撳嵃 + * 鎸囦护`v-print`,榛樿鎵撳嵃鏁翠釜绐楀彛 + * 浼犲叆鍙傛暟`v-print="'#id'"` , 鍙傛暟涓洪渶瑕佹墦鍗板眬閮ㄧ殑鐩掑瓙鏍囪瘑. + */ +const addEvent = (element, type, callback) => { + if (element.addEventListener) { + element.addEventListener(type, callback, false); + } else if (element.attachEvent) { + element.attachEvent("on" + type, callback); + } else { + element["on" + type] = callback; + } +}; +export default { + directiveName: "print", + bind(el, binding, vnode) { + let vue = vnode.context; + let id = ""; + addEvent(el, "click", () => { + vue.$nextTick(() => { + if (binding?.value?.clickMounted) { + binding.value.clickMounted(vue); + } + if (typeof binding.value === "string") { + // 鍏ㄥ眬鎵撳嵃 + id = binding.value; + localPrint(); + } else if (typeof binding.value === "object" && !!binding.value.id) { + // 灞�閮ㄦ墦鍗� + id = binding.value.id; + let ids = id.replace(new RegExp("#", "g"), ""); + let elsdom = document.getElementById(ids); + if (!elsdom) console.log("id in Error"), (id = ""); + localPrint(); + } else if (binding?.value?.preview) { + localPrint(); + } else { + window.print(); + return; + } + }); + }); + + const localPrint = () => { + new Print({ + ids: id, // * 灞�閮ㄦ墦鍗板繀浼犲叆id + vue, + url: binding.value.url, // 鎵撳嵃鎸囧畾鐨勭綉鍧�锛岃繖閲屼笉鑳借窡id鍏卞瓨 濡傛灉鍏卞瓨id鐨勪紭鍏堢骇浼氭瘮杈冮珮 + standard: "", // 鏂囨。绫诲瀷锛岄粯璁ゆ槸html5锛屽彲閫� html5锛宭oose锛宻trict + extraHead: binding.value.extraHead, // 闄勫姞鍦╤ead鏍囩涓婄殑棰濆鏍囩,浣跨敤閫楀彿鍒嗛殧 + extraCss: binding.value.extraCss, // 棰濆鐨刢ss杩炴帴锛屽涓�楀彿鍒嗗紑 + previewTitle: binding.value.previewTitle || "鎵撳嵃棰勮", // 鎵撳嵃棰勮鐨勬爣棰� + zIndex: binding.value.zIndex || 20002, // 棰勮绐楀彛鐨剒-index + previewPrintBtnLabel: binding.value.previewPrintBtnLabel || "鎵撳嵃", // 鎵撳嵃棰勮鐨勬爣棰� + popTitle: binding.value.popTitle, // title鐨勬爣棰� + preview: binding.value.preview || false, // 鏄惁鍚姩棰勮妯″紡 + asyncUrl: binding.value.asyncUrl, + beforeEntryIframe() { + binding.value.beforeEntryIframe && + binding.value.beforeEntryIframe(vue); + }, + previewBeforeOpenCallback() { + // 棰勮绐楀彛鎵撳紑涔嬪墠鐨刢allback + binding.value.previewBeforeOpenCallback && + binding.value.previewBeforeOpenCallback(vue); + }, + previewOpenCallback() { + // 棰勮绐楀彛鎵撳紑涔嬪悗鐨刢allback + binding.value.previewOpenCallback && + binding.value.previewOpenCallback(vue); + }, + openCallback() { + // 璋冪敤鎵撳嵃涔嬪悗鐨勫洖璋冧簨浠� + binding.value.openCallback && binding.value.openCallback(vue); + }, + closeCallback() { + binding.value.closeCallback && binding.value.closeCallback(vue); + }, + beforeOpenCallback() { + binding.value.beforeOpenCallback && + binding.value.beforeOpenCallback(vue); + }, + }); + }; + }, +}; diff --git a/src/assets/print/packages/printarea.js b/src/assets/print/packages/printarea.js new file mode 100644 index 0000000..7faff43 --- /dev/null +++ b/src/assets/print/packages/printarea.js @@ -0,0 +1,461 @@ +const isIE = () => { + if (!!window.ActiveXobject || "ActiveXObject" in window) { + return true; + } else { + return false; + } +}; +/** + * 鍒ゆ柇鏄惁鏄疘E11 + * @returns boolean + */ +const isIE11 = () => { + if (/Trident\/7\./.test(navigator.userAgent)) { + return true; + } else { + return false; + } +}; +const isRemove = (dom) => { + if (isIE() || isIE11()) { + dom.removeNode(true); + } else { + dom.remove(); + } + return dom; +}; +export default class { + constructor(option) { + this.standards = { + strict: "strict", + loose: "loose", + html5: "html5", + }; + this.previewBody = null; + this.close = null; + this.previewBodyUtilPrintBtn = null; + this.selectArray = []; // 瀛樺偍select鐨� + this.counter = 0; + this.settings = { + standard: this.standards.html5, + }; + Object.assign(this.settings, option); + this.init(); + } + init() { + this.counter++; + this.settings.id = `printArea_${this.counter}`; + let url = ""; + if (this.settings.url && !this.settings.asyncUrl) { + url = this.settings.url; + } + let _this = this; + // 濡傛灉鏄紓姝ョ殑 + if (this.settings.asyncUrl) { + _this.settings.asyncUrl(function (url) { + let PrintAreaWindow = _this.getPrintWindow(url); // 鍒涘缓iframe + if (_this.settings.preview) { + // 鎵撳紑棰勮寮圭獥 + _this.previewIfrmaeLoad(); + } else { + // 鐩存帴鎵撳嵃 + _this.print(PrintAreaWindow); + } + }, _this.settings.vue); + return; + } + let PrintAreaWindow = this.getPrintWindow(url); // 鍒涘缓iframe + + if (!this.settings.url) { + this.write(PrintAreaWindow.doc); // 鍐欏叆鍐呭 + } + + if (this.settings.preview) { + // 鎵撳紑棰勮寮圭獥 + this.previewIfrmaeLoad(); + } else { + // 鐩存帴鎵撳嵃 + this.print(PrintAreaWindow); + } + } + addEvent(element, type, callback) { + if (element.addEventListener) { + element.addEventListener(type, callback, false); + } else if (element.attachEvent) { + element.attachEvent("on" + type, callback); + } else { + element["on" + type] = callback; + } + } + previewIfrmaeLoad() { + let box = document.getElementById("vue-pirnt-nb-previewBox"); + + if (box) { + let _this = this; + let iframe = box.querySelector("iframe"); + this.settings.previewBeforeOpenCallback(); + this.addEvent(iframe, "load", function () { + _this.previewBoxShow(); + _this.removeCanvasImg(); + _this.settings.previewOpenCallback(); + }); + + this.addEvent( + box.querySelector(".previewBodyUtilPrintBtn"), + "click", + function () { + _this.settings.beforeOpenCallback(); + _this.settings.openCallback(); + iframe.contentWindow.print(); + _this.settings.closeCallback(); + } + ); + } + } + // 鍒犻櫎鎵�鏈塩anva杞崲鐨勫浘鐗� + removeCanvasImg() { + let _this = this; + try { + if (_this.elsdom) { + // 鍒犻櫎canva杞彉鍥剧墖鐨刣om鑺傜偣 + let canvasList = _this.elsdom.querySelectorAll(".canvasImg"); + for (let i = 0; i < canvasList.length; i++) { + isRemove(canvasList[i]); + } + } + } catch (e) { + console.log(e); + } + } + print(ifrmae) { + var _this = this; + let iframe = document.getElementById(this.settings.id) || ifrmae.f; + let iframeWin = + document.getElementById(this.settings.id).contentWindow || + ifrmae.f.contentWindow; + var _loaded = function () { + iframeWin.focus(); + _this.settings.openCallback(); + iframeWin.print(); + isRemove(iframe); + _this.settings.closeCallback(); + _this.removeCanvasImg(); + }; + _this.settings.beforeOpenCallback(); + _this.addEvent(iframe, "load", function () { + _loaded(); + }); + } + write(PADocument) { + PADocument.open(); + PADocument.write( + `${this.docType()}<html>${this.getHead()}${this.getBody()}</html>` + ); + PADocument.close(); + } + docType() { + if (this.settings.standard === this.standards.html5) { + return "<!DOCTYPE html>"; + } + var transitional = + this.settings.standard === this.standards.loose ? " Transitional" : ""; + var dtd = + this.settings.standard === this.standards.loose ? "loose" : "strict"; + + return `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01${transitional}//EN" "http://www.w3.org/TR/html4/${dtd}.dtd">`; + } + getHead() { + let extraHead = ""; + let links = ""; + let style = ""; + if (this.settings.extraHead) { + this.settings.extraHead.replace(/([^,]+)/g, (m) => { + extraHead += m; + }); + } + // 澶嶅埗鎵�鏈塴ink鏍囩 + [].forEach.call(document.querySelectorAll("link"), function (item) { + if (item.href.indexOf(".css") >= 0) { + links += `<link type="text/css" rel="stylesheet" href="${item.href}" >`; + } + }); + // 寰幆鑾峰彇style鏍囩鐨勬牱寮� + let domStyle = document.styleSheets; + if (domStyle && domStyle.length > 0) { + for (let i = 0; i < domStyle.length; i++) { + try { + if (domStyle[i].cssRules || domStyle[i].rules) { + let rules = domStyle[i].cssRules || domStyle[i].rules; + for (let b = 0; b < rules.length; b++) { + style += rules[b].cssText; + } + } + } catch (e) { + console.log(domStyle[i].href + e); + } + } + } + + if (this.settings.extraCss) { + this.settings.extraCss.replace(/([^,\s]+)/g, (m) => { + links += `<link type="text/css" rel="stylesheet" href="${m}">`; + }); + } + + return `<head><title>${this.settings.popTitle}</title>${extraHead}${links}<style type="text/css">${style}</style></head>`; + } + + getBody() { + let ids = this.settings.ids; + ids = ids.replace(new RegExp("#", "g"), ""); + this.settings.beforeEntryIframe(); + this.elsdom = this.beforeHanler(document.getElementById(ids)); + let ele = this.getFormData(this.elsdom); + let htm = ele.outerHTML; + return "<body>" + htm + "</body>"; + } + // 澶勭悊canva杞垚鍥剧墖 + beforeHanler(elsdom) { + let canvasList = elsdom.querySelectorAll("canvas"); + // canvas杞崲png鍥剧墖 + for (let i = 0; i < canvasList.length; i++) { + if (!canvasList[i].style.display) { + let _parent = canvasList[i].parentNode; + let _canvasUrl = canvasList[i].toDataURL("image/png"); + let _img = new Image(); + _img.className = "canvasImg"; + _img.style.display = "none"; + _img.src = _canvasUrl; + _parent.appendChild(_img); + } + } + return elsdom; + } + // 鏍规嵁type鍘诲鐞唂orm琛ㄥ崟 + getFormData(ele) { + let copy = ele.cloneNode(true); + let copiedInputs = copy.querySelectorAll("input,select,textarea"); + let canvasImgList = copy.querySelectorAll(".canvasImg,canvas"); + let selectCount = -1; + // 澶勭悊鎵�鏈塩anvas + for (let i = 0; i < canvasImgList.length; i++) { + let _parent = canvasImgList[i].parentNode; + let item = canvasImgList[i]; + // 鍒犻櫎鍏嬮殕鍚庣殑canvas鑺傜偣 + if (item.tagName.toLowerCase() === "canvas") { + _parent.removeChild(item); + } else { + item.style.display = "block"; + } + } + // 澶勭悊鎵�鏈夎緭鍏ユ + for (let i = 0; i < copiedInputs.length; i++) { + let item = copiedInputs[i]; + let typeInput = item.getAttribute("type"); + let copiedInput = copiedInputs[i]; + // 鑾峰彇select鏍囩 + if (!typeInput) { + typeInput = + item.tagName === "SELECT" + ? "select" + : item.tagName === "TEXTAREA" + ? "textarea" + : ""; + } + // 澶勭悊input妗� + if (item.tagName === "INPUT") { + // 闄や簡鍗曢�夋 澶氶�夋姣旇緝鐗瑰埆 + if (typeInput === "radio" || typeInput === "checkbox") { + if (item.checked) { + copiedInput.setAttribute("checked", item.checked); + } + } else { + copiedInput.value = item.value; + copiedInput.setAttribute("value", item.value); + } + // 澶勭悊select + } else if (typeInput === "select") { + selectCount++; + for (let b = 0; b < ele.querySelectorAll("select").length; b++) { + let select = ele.querySelectorAll("select")[b]; // 鑾峰彇鍘熷灞傛瘡涓�涓猻elect + !select.getAttribute("newbs") && select.setAttribute("newbs", b); // 娣诲姞鏍囪瘑 + if (select.getAttribute("newbs") == selectCount) { + let opSelectedIndex = + ele.querySelectorAll("select")[selectCount].selectedIndex; + item.options[opSelectedIndex].setAttribute("selected", true); + } + } + // 澶勭悊textarea + } else { + copiedInput.innerHTML = item.value; + copiedInput.setAttribute("html", item.value); + } + } + + return copy; + } + getPrintWindow(url) { + var f = this.Iframe(url); + return { + f: f, + win: f.contentWindow || f, + doc: f.doc, + }; + } + previewBoxShow() { + let box = document.getElementById("vue-pirnt-nb-previewBox"); + if (box) { + document.querySelector("html").setAttribute("style", "overflow: hidden"); + box.style.display = "block"; + } + } + + previewBoxHide() { + let box = document.getElementById("vue-pirnt-nb-previewBox"); + if (box) { + document + .querySelector("html") + .setAttribute("style", "overflow: visible;"); + + box.querySelector("iframe") && isRemove(box.querySelector("iframe")); + box.style.display = "none"; + } + } + previewBox() { + let box = document.getElementById("vue-pirnt-nb-previewBox"); + let previewBodyClass = "previewBody"; + if (box) { + box.querySelector("iframe") && isRemove(box.querySelector("iframe")); + return { + close: box.querySelector(".previewClose"), + previewBody: box.querySelector(`.${previewBodyClass}`), + }; + } + let previewContent = document.createElement("div"); + previewContent.setAttribute("id", "vue-pirnt-nb-previewBox"); + previewContent.setAttribute( + "style", + "position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background: white;display:none" + ); + previewContent.style.zIndex = this.settings.zIndex; + // 鎵撳嵃棰勮寮圭獥鐨刪eader + let previewHeader = document.createElement("div"); + previewHeader.setAttribute("class", "previewHeader"); + previewHeader.setAttribute("style", "padding: 5px 20px;"); + previewHeader.innerHTML = this.settings.previewTitle; + previewContent.appendChild(previewHeader); + // close鍏抽棴鎸夐挳 + this.close = document.createElement("div"); + let close = this.close; + close.setAttribute("class", "previewClose"); + close.setAttribute( + "style", + "position: absolute;top: 5px;right: 20px;width: 25px;height: 20px;cursor: pointer;" + ); + let closeBefore = document.createElement("div"); + let closeAfter = document.createElement("div"); + closeBefore.setAttribute("class", "closeBefore"); + closeBefore.setAttribute( + "style", + "position: absolute;width: 3px;height: 100%;background: #040404;transform: rotate(45deg); top: 0px;left: 50%;" + ); + closeAfter.setAttribute("class", "closeAfter"); + closeAfter.setAttribute( + "style", + "position: absolute;width: 3px;height: 100%;background: #040404;transform: rotate(-45deg); top: 0px;left: 50%;" + ); + close.appendChild(closeBefore); + close.appendChild(closeAfter); + previewHeader.appendChild(close); + + // 鎵撳嵃棰勮寮圭獥鐨刡ody + this.previewBody = document.createElement("div"); + let previewBody = this.previewBody; + previewBody.setAttribute("class", previewBodyClass); + previewBody.setAttribute( + "style", + "display: flex;flex-direction: column; height: 100%;" + ); + previewContent.appendChild(previewBody); + // 鎵撳嵃棰勮寮圭獥鐨刡ody鐨勫伐鍏锋爮 + let previewBodyUtil = document.createElement("div"); + previewBodyUtil.setAttribute("class", "previewBodyUtil"); + previewBodyUtil.setAttribute( + "style", + "height: 32px;background: #474747;position: relative;" + ); + previewBody.appendChild(previewBodyUtil); + // 鎵撳嵃鐨勬寜閽� + this.previewBodyUtilPrintBtn = document.createElement("div"); + let previewBodyUtilPrintBtn = this.previewBodyUtilPrintBtn; + previewBodyUtilPrintBtn.setAttribute("class", "previewBodyUtilPrintBtn"); + previewBodyUtilPrintBtn.innerHTML = this.settings.previewPrintBtnLabel; + previewBodyUtilPrintBtn.setAttribute( + "style", + "position: absolute;padding: 2px 10px;margin-top: 3px;left: 24px;font-size: 14px;color: white;cursor: pointer;background-color: rgba(0,0,0,.12);background-image: linear-gradient(hsla(0,0%,100%,.05),hsla(0,0%,100%,0));background-clip: padding-box;border: 1px solid rgba(0,0,0,.35);border-color: rgba(0,0,0,.32) rgba(0,0,0,.38) rgba(0,0,0,.42);box-shadow: inset 0 1px 0 hsla(0,0%,100%,.05), inset 0 0 1px hsla(0,0%,100%,.15), 0 1px 0 hsla(0,0%,100%,.05);" + ); + previewBodyUtil.appendChild(previewBodyUtilPrintBtn); + + // 娣诲姞鏁翠釜棰勮鍒癰ody + document.body.appendChild(previewContent); + + return { + close: this.close, + previewBody: this.previewBody, + }; + } + iframeBox(frameId, url) { + let iframe = document.createElement("iframe"); + iframe.style.border = "0px"; + iframe.style.position = "absolute"; + iframe.style.width = "0px"; + iframe.style.height = "0px"; + iframe.style.right = "0px"; + iframe.style.top = "0px"; + iframe.setAttribute("id", frameId); + iframe.setAttribute("src", url); + + return iframe; + } + Iframe(url) { + let frameId = this.settings.id; + // 灞�閮ㄦ墦鍗� 鐢ㄥ綋鍓嶇殑鏃堕棿鍋歩frmae鐨剈rl + url = !url ? new Date().getTime() : url; + let _this = this; + + let iframe = this.iframeBox(frameId, url); + + // let that = this + try { + // 鐩存帴鎵撳嵃 涓嶉瑙� + if (!this.settings.preview) { + document.body.appendChild(iframe); + } else { + iframe.setAttribute("style", "border: 0px;flex: 1;"); + // 棰勮鎵撳嵃 + let previewBox = this.previewBox(); + let previewBody = previewBox.previewBody; + let close = previewBox.close; + // 娣诲姞ifrmae鍒伴瑙堝脊绐� + previewBody.appendChild(iframe); + this.addEvent(close, "click", function () { + _this.previewBoxHide(); + }); + } + + iframe.doc = null; + iframe.doc = iframe.contentDocument + ? iframe.contentDocument + : iframe.contentWindow + ? iframe.contentWindow.document + : iframe.document; + } catch (e) { + throw new Error(e + ". iframes may not be supported in this browser."); + } + if (iframe.doc == null) { + throw new Error("Cannot find document."); + } + + return iframe; + } +} diff --git a/src/assets/zhCn.js b/src/assets/zhCn.js new file mode 100644 index 0000000..c8f777b --- /dev/null +++ b/src/assets/zhCn.js @@ -0,0 +1,125 @@ +var zhCn = { + name: "zh-cn", + el: { + colorpicker: { + confirm: "\u786E\u5B9A", + clear: "\u6E05\u7A7A" + }, + datepicker: { + now: "\u6B64\u523B", + today: "\u4ECA\u5929", + cancel: "\u53D6\u6D88", + clear: "\u6E05\u7A7A", + confirm: "\u786E\u5B9A", + selectDate: "\u9009\u62E9\u65E5\u671F", + selectTime: "\u9009\u62E9\u65F6\u95F4", + startDate: "\u5F00\u59CB\u65E5\u671F", + startTime: "\u5F00\u59CB\u65F6\u95F4", + endDate: "\u7ED3\u675F\u65E5\u671F", + endTime: "\u7ED3\u675F\u65F6\u95F4", + prevYear: "\u524D\u4E00\u5E74", + nextYear: "\u540E\u4E00\u5E74", + prevMonth: "\u4E0A\u4E2A\u6708", + nextMonth: "\u4E0B\u4E2A\u6708", + year: "\u5E74", + month1: "1 \u6708", + month2: "2 \u6708", + month3: "3 \u6708", + month4: "4 \u6708", + month5: "5 \u6708", + month6: "6 \u6708", + month7: "7 \u6708", + month8: "8 \u6708", + month9: "9 \u6708", + month10: "10 \u6708", + month11: "11 \u6708", + month12: "12 \u6708", + weeks: { + sun: "\u65E5", + mon: "\u4E00", + tue: "\u4E8C", + wed: "\u4E09", + thu: "\u56DB", + fri: "\u4E94", + sat: "\u516D" + }, + months: { + jan: "\u4E00\u6708", + feb: "\u4E8C\u6708", + mar: "\u4E09\u6708", + apr: "\u56DB\u6708", + may: "\u4E94\u6708", + jun: "\u516D\u6708", + jul: "\u4E03\u6708", + aug: "\u516B\u6708", + sep: "\u4E5D\u6708", + oct: "\u5341\u6708", + nov: "\u5341\u4E00\u6708", + dec: "\u5341\u4E8C\u6708" + } + }, + select: { + loading: "\u52A0\u8F7D\u4E2D", + noMatch: "\u65E0\u5339\u914D\u6570\u636E", + noData: "\u65E0\u6570\u636E", + placeholder: "\u8BF7\u9009\u62E9" + }, + cascader: { + noMatch: "\u65E0\u5339\u914D\u6570\u636E", + loading: "\u52A0\u8F7D\u4E2D", + placeholder: "\u8BF7\u9009\u62E9", + noData: "\u6682\u65E0\u6570\u636E" + }, + pagination: { + goto: "\u524D\u5F80", + pagesize: "\u6761/\u9875", + total: "\u5171 {total} \u6761", + pageClassifier: "\u9875", + deprecationWarning: "\u4F60\u4F7F\u7528\u4E86\u4E00\u4E9B\u5DF2\u88AB\u5E9F\u5F03\u7684\u7528\u6CD5\uFF0C\u8BF7\u53C2\u8003 el-pagination \u7684\u5B98\u65B9\u6587\u6863" + }, + messagebox: { + title: "\u63D0\u793A", + confirm: "\u786E\u5B9A", + cancel: "\u53D6\u6D88", + error: "\u8F93\u5165\u7684\u6570\u636E\u4E0D\u5408\u6CD5!" + }, + upload: { + deleteTip: "\u6309 delete \u952E\u53EF\u5220\u9664", + delete: "\u5220\u9664", + preview: "\u67E5\u770B\u56FE\u7247", + continue: "\u7EE7\u7EED\u4E0A\u4F20" + }, + table: { + emptyText: "\u6682\u65E0\u6570\u636E", + confirmFilter: "\u7B5B\u9009", + resetFilter: "\u91CD\u7F6E", + clearFilter: "\u5168\u90E8", + sumText: "\u5408\u8BA1" + }, + tree: { + emptyText: "\u6682\u65E0\u6570\u636E" + }, + transfer: { + noMatch: "\u65E0\u5339\u914D\u6570\u636E", + noData: "\u65E0\u6570\u636E", + titles: ["\u5217\u8868 1", "\u5217\u8868 2"], + filterPlaceholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9", + noCheckedFormat: "\u5171 {total} \u9879", + hasCheckedFormat: "\u5DF2\u9009 {checked}/{total} \u9879" + }, + image: { + error: "\u52A0\u8F7D\u5931\u8D25" + }, + pageHeader: { + title: "\u8FD4\u56DE" + }, + popconfirm: { + confirmButtonText: "\u786E\u5B9A", + cancelButtonText: "\u53D6\u6D88" + } + } + }; + + export { zhCn as default }; + //# sourceMappingURL=zh-cn.mjs.map + \ No newline at end of file diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..e6ead77 --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,21 @@ +<template> + <div class="home"> + <h1>杩欓噷鏄祴璇曟枃瀛�</h1> + <ul> + <li>鏃犲簭鍒楄〃LI</li> + <li>鏃犲簭鍒楄〃LI</li> + </ul> + </div> +</template> + +<script> +export default { + name: "HelloWorld", + props: { + msg: String, + }, +}; +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped lang="scss"></style> diff --git a/src/components/arj/arj-table.vue b/src/components/arj/arj-table.vue new file mode 100644 index 0000000..e3eeda0 --- /dev/null +++ b/src/components/arj/arj-table.vue @@ -0,0 +1,50 @@ +<template> + <el-table + :data="SClist" + style="width: 100%" + :header-cell-style="{ + 'text-align': 'left', + + fontSize: '20px', + }" + > + <el-table-column :label="labelName"> + <!-- <el-table-column + :prop="item.prop" + :label="item.label" + :key="index" + v-if="item" + > --> + <template v-for="(item, index) in tableHeader"> + <el-table-column + :prop="item.prop" + :label="item.label" + :key="index" + v-if="item" + > + <template #default="scope"> + <div v-show="editable || scope.row.editable" class="editable-row"> + <template v-if="item.type === 'input' || item.type === 'text'"> + <el-input + size="small" + v-model="scope.row[item.prop]" + :placeholder="`璇疯緭鍏�${item.label}`" + /> + </template> + + + </div> + <div v-show="!editable && !scope.row.editable" class="editable-row"> + <span class="editable-row-span">{{ scope.row[item.prop] }}</span> + </div> + </template> + </el-table-column> + </template> + </el-table-column> + </el-table> +</template> +<script> +export default { + props: ["SClist", "tableHeader", "labelName", "editable"], +}; +</script> diff --git a/src/components/control/cascader/index.vue b/src/components/control/cascader/index.vue new file mode 100644 index 0000000..0b91b7f --- /dev/null +++ b/src/components/control/cascader/index.vue @@ -0,0 +1,96 @@ +<template> + <el-cascader + :style="{ width }" + :disabled="disabled" + v-model="data.value" + :options="data.options" + :props="data.props" + @change="handlerChange" + ></el-cascader> +</template> + +<script> +import { reactive, onBeforeMount, watch } from "vue"; +// API +// import { CommonApi } from "@/api/common"; +// requestUrl +// import ApiUrl from "@/api/requestUrl"; +export default { + name: "BasisCascader", + components: {}, + props: { + cascaderProps: { + type: Object, + default: () => ({}), + }, + url: { + type: String, + default: "", + }, + method: { + type: String, + default: "post", + }, + data: { + type: Object, + default: () => ({}), + }, + value: { + type: [String, Number], + default: 0, + }, + width: { + type: String, + default: "100%", + }, + disabled: { + type: Boolean, + default: false, + }, + }, + emits: ["update:value", "callback"], + setup(props, { emit }) { + const data = reactive({ + props: props.data.props, + options: [], + value: 0, + }); + const handlerChange = (value) => { + // 鑾峰彇鏈�鍚庝竴椤� + const val = value[value.length - 1]; + // 杩斿洖 + emit("update:value", val); + }; + /** 鑾峰彇鍒楄〃 */ + const getData = () => { + const url = ApiUrl?.cascader?.[props.url || props?.data?.url]?.url; + const method = ApiUrl?.cascader?.[props.url]?.method || "post"; + if (!url) { + throw new Error("url鍦板潃涓嶅瓨鍦�"); + } + // 鍙傛暟 + const request_data = { + url, + method, + data: props.data, + }; + // CommonApi(request_data).then((response) => { + // data.options = response.data; + // }); + }; + /** 鐢熷懡鍛ㄦ湡鎸傝浇涔嬪墠 */ + onBeforeMount(() => { + getData(); + }); + /** 鐩戝惉 */ + watch( + () => props.value, + (newValue) => { + data.value = newValue; + } + ); + + return { data, handlerChange }; + }, +}; +</script> diff --git a/src/components/control/checkbox/index.vue b/src/components/control/checkbox/index.vue new file mode 100644 index 0000000..00d71d9 --- /dev/null +++ b/src/components/control/checkbox/index.vue @@ -0,0 +1,43 @@ +<template> + <el-checkbox-group v-model="value" :disabled="form_disabled[data.prop]" @change="handlerChange"> + <el-checkbox v-for="checkbox in data.options" :label="checkbox.value" :key="checkbox.value">{{ checkbox.label }}</el-checkbox> + </el-checkbox-group> + +</template> + +<script> +import { reactive, toRefs } from 'vue'; +export default { + name: "CheckboxComponent", + props: { + data: { + type: Object, + default: () => ({}) + }, + value: { + type: Array, + default: () => ([]) + } + }, + emits: ['update:value', 'callback'], + setup(props, { emit }){ + const data = reactive({ + value: '', + data: props.data + }) + + const handlerChange = (val) => { + emit("update:value", val) + emit("callback", { + type: 'checkbox', + value: val, + data: props.data + }) + } + return { + ...toRefs(data), + handlerChange + } + } +} +</script> \ No newline at end of file diff --git a/src/components/control/date/index.vue b/src/components/control/date/index.vue new file mode 100644 index 0000000..af865c6 --- /dev/null +++ b/src/components/control/date/index.vue @@ -0,0 +1,52 @@ +<template> + <el-date-picker :style="`width: ${data.width}`" + v-model="value" + :disabled="disabled" + :type="data.date_type || 'datetime'" + :format="data.date_format || 'YYYY-MM-DD HH:mm:ss'" + :placeholder="data.placeholder || '閫夋嫨鏃ユ湡鏃堕棿'" + :start-placeholder="data.start_placeholder || '璇烽�夋嫨寮�濮嬫棩鏈�'" + :end-placeholder="data.end_placeholder || '璇烽�夋嫨缁撴潫鏃ユ湡'" + :range-separator="data.range_placeholder || '-'" + @change="handlerChange" + > + </el-date-picker> +</template> + +<script> +import { reactive, toRefs } from 'vue'; +export default { + name: "DateComponent", + props: { + data: { + type: Object, + default: () => ({}) + }, + value: { + type: [Array, String], + default: '' + }, + disabled: Boolean + }, + emits: ['update:value', 'callback'], + setup(props, { emit }){ + const data = reactive({ + value: '', + data: props.data + }) + + const handlerChange = (val) => { + emit("update:value", val) + emit("callback", { + type: 'date', + value: val, + data: props.data + }) + } + return { + ...toRefs(data), + handlerChange + } + } +} +</script> \ No newline at end of file diff --git a/src/components/control/input/index.vue b/src/components/control/input/index.vue new file mode 100644 index 0000000..2c02865 --- /dev/null +++ b/src/components/control/input/index.vue @@ -0,0 +1,49 @@ +<template> + <el-input + v-model="value" + :type="data.value_type || 'text'" + v-on:input="handlerEnter" + debounce + :placeholder="placeholder" + :maxlength="prop.maxlength" + :minlength="prop.minlength || 0" + /> +</template> + +<script> +import { reactive, toRefs, watchEffect } from 'vue'; +export default { + name: "InputComponent", + props: { + data: { + type: Object, + default: () => ({}) + }, + value: { + type: [Number, String], + default: '' + } + }, + emits: ['update:value', 'callback'], + setup(props, { emit }){ + const data = reactive({ + value: '', + prop: props.data, + placeholder: props.data.placeholder + }) + + const handlerEnter = (val) => { + emit("update:value", val) + } + + return { + ...toRefs(data), + handlerEnter + } + } +} +</script> + +<style> + +</style> \ No newline at end of file diff --git a/src/components/control/inputNumber/index.vue b/src/components/control/inputNumber/index.vue new file mode 100644 index 0000000..68865be --- /dev/null +++ b/src/components/control/inputNumber/index.vue @@ -0,0 +1,41 @@ +<template> + <el-input-number v-model="value" :min="data.min || 0" :max="data.max || 99999999" @change="handleChange" /> +</template> + +<script> +import { reactive, toRefs, watchEffect } from 'vue'; +export default { + name: "InputComponent", + props: { + data: { + type: Object, + default: () => ({}) + }, + value: { + type: [Number, String], + default: '' + } + }, + emits: ['update:value', 'callback'], + setup(props, { emit }){ + const data = reactive({ + value: '', + data: props.data + }) + + const handleChange = (val) => { + console.log(val) + emit("update:value", val) + } + + return { + ...toRefs(data), + handleChange + } + } +} +</script> + +<style> + +</style> \ No newline at end of file diff --git a/src/components/control/keyword/index.vue b/src/components/control/keyword/index.vue new file mode 100644 index 0000000..a9756c2 --- /dev/null +++ b/src/components/control/keyword/index.vue @@ -0,0 +1,74 @@ +<template> + <el-select v-model="key" placeholder="璇烽�夋嫨" class="key-word-select" @change="handlerChange"> + <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-option> + </el-select> + <el-input v-model="value" class="width-200" :placeholder="placeholder" v-on:input="callback"></el-input> +</template> + +<script> +import { reactive, toRefs, watch } from "vue"; +export default { + name: "KeyWord", + props: { + data: { + type: Object, + default: () => ({}) + }, + }, + emits: ["callback"], + setup(props, { emit }){ + const data = reactive({ + key: "", + value: "", + placeholder: "璇疯緭鍏ユ悳绱㈢殑鍏抽敭瀛�", + options: props.data.options + }) + + /** 涓嬫媺浜嬩欢 */ + const handlerChange = (value) => { + // 娓呴櫎input杈撳叆妗嗘枃鏈� + data.value = ""; + // 鏇存柊input杈撳叆妗嗗崰浣嶆枃鏈� + updatePlaceholder(); + // 鍥炶皟 + callback() + } + + /** 浜嬩欢鍥炶皟 */ + const callback = () => { + emit("callback", { + type: 'keyword', + value: { key: data.key, value: data.value }, + formItem: props.data + }) + } + + /** update Placeholder */ + const updatePlaceholder =() => { + const item = data.options.filter(item => item.value === data.key)[0]; + data.placeholder = `璇疯緭鍏�${item.label}`; + } + + /** 娓呴櫎 */ + const handlerClear = () => { + data.key = ""; + data.value = ""; + } + + return { + ...toRefs(data), + handlerChange, + handlerClear, + callback + } + } +} +</script> + +<style lang="scss" scoped> +.key-word-select { + width: 100px; + margin-right: 10px; +} +.width-200 { width: 200px; } +</style> \ No newline at end of file diff --git a/src/components/control/radio/index.vue b/src/components/control/radio/index.vue new file mode 100644 index 0000000..9a92a11 --- /dev/null +++ b/src/components/control/radio/index.vue @@ -0,0 +1,71 @@ +<template> + <template + v-if="!data.options && data.callback && data.callback(data)" + ></template> + <el-radio-group + v-else + v-model="value" + :disabled="disabled" + @change="handlerChange" + > + <el-radio + v-for="radio in data.options" + :key="radio[data.key_value] || radio.value" + :label="radio[data.key_value] || radio.value" + > + {{ radio[data.key_label] || radio.label }} + </el-radio> + </el-radio-group> +</template> + +<script> +import { reactive, toRefs, watch } from "vue"; +// API +// import { RoleListAll } from "@/api/role"; +export default { + name: "DateComponent", + props: { + data: { + type: Object, + default: () => ({}), + }, + value: { + type: [Number, String], + default: "", + }, + disabled: Boolean, + }, + emits: ["update:value", "callback"], + setup(props, { emit }) { + const dataa = reactive({ + value: "", + data: props.data, + }); + watch( + () => props.data, + () => { + RoleListAll().then( + (response) => { + console.log(111); + }, + { + deep: true, + immediate: true, + } + ); + } + ); + const handlerChange = (val) => { + emit("update:value", val); + emit("callback", { + type: "radio", + value: val, + formItem: props.data, + }); + }; + return { + handlerChange, + }; + }, +}; +</script> diff --git a/src/components/control/select/index.vue b/src/components/control/select/index.vue new file mode 100644 index 0000000..ac2ad30 --- /dev/null +++ b/src/components/control/select/index.vue @@ -0,0 +1,41 @@ +<template> + <el-select v-model="value" :disabled="disabled" :style="`width: ${data.width || '100%'}`" @change="handlerChange"> + <el-option v-for="select in data.options" :key="select.value" :label="select.label" :value="select.value"></el-option> + </el-select> +</template> + +<script> +import { reactive, toRefs } from 'vue'; +export default { + name: "SelectComponent", + props: { + data: { + type: Object, + default: () => ({}) + }, + disabled: { + type: Boolean, + default: false + }, + value: { + type: [Number, String], + default: '' + } + }, + emits: ['update:value', 'callback'], + setup(props, { emit }){ + const data = reactive({ + value: '', + data: props.data + }) + + const handlerChange = (val) => { + emit("update:value", val) + } + return { + ...toRefs(data), + handlerChange + } + } +} +</script> \ No newline at end of file diff --git a/src/components/control/switch/index.vue b/src/components/control/switch/index.vue new file mode 100644 index 0000000..4ce6ea5 --- /dev/null +++ b/src/components/control/switch/index.vue @@ -0,0 +1,89 @@ +<template> + <el-switch + v-model="init_data.value" + :loading="init_data.loading" + :before-change="handlerSwitch" + > + </el-switch> +</template> + +<script> +import { reactive, getCurrentInstance, watch } from "vue"; +// requestUrl +// import ApiUrl from "@/api/requestUrl"; +//API +// import { SwitchStatus } from "@/api/common"; +export default { + name: "SwitchComponent", + props: { + data: { + type: Object, + default: () => ({}), + }, + config: { + type: Object, + default: () => ({}), + }, + }, + emits: ["update:value", "callback"], + setup(props) { + // 閰嶇疆淇℃伅 + const config = reactive(props.config); + // 鏁版嵁 + const data = reactive(props.data); + // 鍒濆鍊� + const init_data = reactive({ + value: data[config.prop], + loading: false, + }); + // 鐩戝惉鏁版嵁 + watch( + () => props.data, + (newValue, oldValue) => { + init_data.value = newValue[config.prop]; + } + ); + // 鑾峰彇瀹炰緥涓婁笅鏂� + const { proxy } = getCurrentInstance(); + // 浜嬩欢 + const handlerSwitch = (value) => { + init_data.loading = true; + // 璇锋眰鍙傛暟 + const url = + config.api_url || ApiUrl?.[config.api_module]?.[config.api_key]?.url; + const method = + config.method || + ApiUrl?.[config.api_module]?.[config.api_key]?.method || + "post"; + if (!url) { + console.log("璇锋眰鎺ュ彛涓嶅瓨鍦�"); + return false; + } + // 璇锋眰鍙傛暟 + const key_id = config.key_id || "id"; + const request_data = { + url, + method, + data: { + [key_id]: data[key_id], // 绛変环浜嶽"id"]: data["id"] + [config.prop]: !init_data.value, // 绛変环浜嶽"status"]: value + }, + }; + return new Promise((resolve, reject) => { + // SwitchStatus(request_data) + // .then((response) => { + // proxy.$message.success(response.message); + // data.status = value; + // init_data.loading = false; + // resolve(true); + // }) + // .catch((error) => { + // init_data.loading = false; + // reject(false); + // }); + }); + }; + return { config, init_data, handlerSwitch }; + }, +}; +</script> diff --git a/src/components/control/textarea/index.vue b/src/components/control/textarea/index.vue new file mode 100644 index 0000000..556344d --- /dev/null +++ b/src/components/control/textarea/index.vue @@ -0,0 +1,44 @@ +<template> + <el-input + v-model="value" + type="textarea" + debounce + :rows="data.rows || 5" + :disabled="form_disabled[data.prop]" + :style="`width: ${data.width || '100%'}`" + :placeholder="data.placeholder" + @change="handlerChange" + /> +</template> + +<script> +import { reactive, toRefs } from 'vue'; +export default { + name: "TextareaComponent", + props: { + data: { + type: Object, + default: () => ({}) + }, + value: { + type: String, + default: '' + } + }, + emits: ['update:value', 'callback'], + setup(props, { emit }){ + const data = reactive({ + value: '', + data: props.data + }) + + const handlerChange = (val) => { + emit("update:value", val) + } + return { + ...toRefs(data), + handlerChange + } + } +} +</script> \ No newline at end of file diff --git a/src/components/control/upload/index.vue b/src/components/control/upload/index.vue new file mode 100644 index 0000000..a5b6277 --- /dev/null +++ b/src/components/control/upload/index.vue @@ -0,0 +1,88 @@ +<template> + <el-upload + class="avatar-uploader" + action="#" + :http-request="handlerUpload" + :before-upload="handlerBeforeOnUpload" + :on-error="handlerOnError" + :show-file-list="false" + :disabled="disabled" + > + <img v-if="data.image_url" :src="data.image_url" class="avatar" /> + <span v-else>+</span> + </el-upload> +</template> + +<script> +import { reactive, getCurrentInstance, watch } from "vue"; +// import { UploadFile } from "@/api/common"; +export default { + name: "BasisUpload", + components: {}, + props: { + value: { + type: String, + default: "", + }, + disabled: { + type: Boolean, + default: false, + }, + }, + emits: ["update:value", "callback"], + setup(props, { emit }) { + // 鑾峰彇瀹炰緥涓婁笅鏂� + const { proxy } = getCurrentInstance(); + const data = reactive({ + image_url: "", + }); + const handlerOnError = (res, file) => {}; + const handlerBeforeOnUpload = async (file) => { + const isLt2M = file.size / 1024 / 1024 < 2; // 闄愬埗鏂囦欢澶у皬涓嶈兘澶т簬 2M + if (!isLt2M) { + proxy.$message.error("涓婁紶鍥剧墖澶у皬涓嶈兘瓒呰繃 2MB!"); + return false; + } + return isJPG && isLt2M; + }; + const handlerUpload = async (params) => { + const file = params.file; + // 瀹炰緥鍖栬〃鍗曞璞� + const form = new FormData(); + // 琛ㄥ崟娣诲姞 files 瀛楁 + form.append("files", file); + // 涓婁紶鎺ュ彛 + try { + const url = await startUpload(form); + data.image_url = url; + emit("update:imageUrl", url); + } catch { + console.log("涓婁紶澶辫触"); + } + }; + /** + * 寮�濮嬫枃浠朵笂浼� + */ + const startUpload = (form) => { + return new Promise((resolve, reject) => { + // UploadFile(form).then(response => { + // resolve(response.data.files_path); + // }) + }); + }; + watch( + () => props.value, + (newValue, oldValue) => { + data.image_url = newValue; + } + ); + return { + data, + handlerUpload, + handlerOnError, + handlerBeforeOnUpload, + }; + }, +}; +</script> +<style lang="scss" scoped></style> diff --git a/src/components/control/wangeditor/index.vue b/src/components/control/wangeditor/index.vue new file mode 100644 index 0000000..d6443be --- /dev/null +++ b/src/components/control/wangeditor/index.vue @@ -0,0 +1,69 @@ +<template> + <div ref="editor"></div> +</template> + +<script> +import { ref, onMounted, watch, nextTick } from 'vue'; +import WangEditor from 'wangeditor'; +// cookies +import { getToken } from "@/utils/cookies"; // 杩欐槸灏佽濂界殑鏂规硶 +export default { + name: 'Wangeditor', + components: {}, + props: { + value: { + type: String, + default: "" + } + }, + emits: ["update:value", 'callback'], + setup(props, { emit }){ + let html = ref(null) + // 鍐呭 + let content = ref(''); + // 瀵屾枃鏈珼OM鍏冪礌 + const editor = ref(null); + // 瀵屾枃鏈璞� + let editor_instance = null; + // 鐢熷懡鍛ㄦ湡 + onMounted(() => { + nextTick(() => { + // 鍒涘缓瀵屾枃鏈璞� + editor_instance = new WangEditor(editor.value); + // 鍥剧墖涓婁紶閰嶇疆 + editor_instance.config.uploadImgServer = process.env.VUE_APP_DEV_TARGET + '/upload' // 涓婁紶鍥剧墖鐨勬帴鍙e湴鍧� + editor_instance.config.uploadFileName = 'files' // formdata涓殑name灞炴�� + editor_instance.config.uploadImgHeaders = { + Token: getToken() // 璁剧疆璇锋眰澶� + } + editor_instance.config.uploadImgHooks = { + // 鍥剧墖涓婁紶骞惰繑鍥炵粨鏋滐紝浣嗗浘鐗囨彃鍏ラ敊璇椂瑙﹀彂 + fail: function (xhr, editor, result) { + console.log(result) + }, + // 渚嬪鏈嶅姟鍣ㄧ杩斿洖鐨勪笉鏄� { errno: 0, data: [...] } 杩欑鏍煎紡锛屽彲浣跨敤 customInsert + customInsert: function(insertImgFn, result) { + // insertImgFn 鍙妸鍥剧墖鎻掑叆鍒扮紪杈戝櫒锛屼紶鍏ュ浘鐗� src 锛屾墽琛屽嚱鏁板嵆鍙� + insertImgFn(result.data.files_path) + } + } + // 閰嶇疆change浜嬩欢 + Object.assign(editor_instance.config, { + onchange(value) { + content.value = value; + emit("update:value", value); + }, + }); + // 鍒涘缓 + editor_instance.create(); + }) + }) + watch(() => props.value, (newContent, oldContent) => { + editor_instance.txt.html(newContent); + }) + return { editor } + } +} +</script> +<style lang='scss' scoped> +</style> \ No newline at end of file diff --git a/src/components/form/hook/relationHook.js b/src/components/form/hook/relationHook.js new file mode 100644 index 0000000..71ee3be --- /dev/null +++ b/src/components/form/hook/relationHook.js @@ -0,0 +1,34 @@ +export function relationHook(){ + /** + * @param { String } value 鎺у埗鏂圭殑閫夐」 value + * @param { Array } data 鍏宠仈鍏崇郴鐨勬暟鎹厤缃� relation_hidden + * @param { Object } props 鏄剧ず/闅愯棌瀵硅薄闆嗕繚 + */ + const HiddenItem = (value, data, props) => { + if(data && Array.isArray(data) && data.length > 0) { + data.forEach(item => { + const field = item[0]; + const objValue = item[1]; + props[field] = objValue[value] + // 閫夐」涓� 1 鏃� + // props["title"] = objValue["1"] => true + // props["iamge_url"] = objValue["1"] => true + // 閫夐」涓� 0 鏃� + // props["title"] = objValue["0"] => true + // props["iamge_url"] = objValue["0"] => undefined + }) + } + } + + const DisabledItem = (value, data, props) => { + if(data && Array.isArray(data) && data.length > 0) { + data.forEach(item => { + const field = item[0]; + const objValue = item[1]; + props[field] = objValue[value] + }) + } + } + + return { HiddenItem, DisabledItem }; +} \ No newline at end of file diff --git a/src/components/form/hook/rulesHook.js b/src/components/form/hook/rulesHook.js new file mode 100644 index 0000000..2b2b1de --- /dev/null +++ b/src/components/form/hook/rulesHook.js @@ -0,0 +1,88 @@ +import { reactive } from "vue"; +// 楠岃瘉 +import { validate_email, validate_password } from "@/utils/validate"; +/** + * @returns BasisForm缁勪欢鍒涘缓鏍¢獙瑙勫垯 + */ +export function rulesHook(){ + /** + * @param {*} data 閰嶇疆棰濆缁勪欢 + */ + const InitRules = (data = []) => { + if(data.length === 0) { return false; } + // 鍒ゆ柇鏄惁鏈塺equired灞炴�� + data.forEach(item => { + //鍒濆鍖栬鍒欐暟缁� + let rulesArr = []; + if(item.required) { + let json = { required: true, message: item.message || messageType(item), trigger: 'change' } + rulesArr.push(json) + } + // 鏄惁鏈夊叾浠栫殑鏍¢獙瑙勫垯 + const rule = item.rule; + if(rule && Array.isArray(rule) && rule.length > 0) { + rulesArr = rulesArr.concat(rule); + } + // 鐢ㄦ埛鍚� + if(item.value_type === 'username') { + const rule = { + validator(rule, value, callback, source, options) { + if(!value || value === ""){ + callback(new Error("璇疯緭鍏ョ敤鎴峰悕")); + }else if(!validate_email(value)) { + callback(new Error("閭鏍煎紡涓嶆纭�")); + } else { + callback(); + } + } + } + rulesArr = rulesArr.concat(rule); + } + // 瀵嗙爜 + if(item.value_type === 'password') { + const rule = { + validator(rule, value, callback, source, options) { + if(!value || value === ""){ + callback(new Error("璇疯緭鍏ョ敤瀵嗙爜")); + }else if(!validate_password(value)) { + callback(new Error("璇疯緭鍏�>=6骞朵笖<=20浣嶇殑瀵嗙爜锛屽寘鍚暟瀛椼�佸瓧姣�")); + } else { + callback(); + } + } + } + rulesArr = rulesArr.concat(rule); + } + // 瀹氫箟rules灞炴�ц祴鍊� + item.rules = rulesArr; + }); + return data; + } + /** + * + * @description 鎻愮ず鏂囨湰 + */ + const messageType = (data) => { + let msg = ""; + switch(data.type){ + case "input": + case "wangeditor": + msg = "璇疯緭鍏�"; + break; + case "upload": + msg = "璇蜂笂浼�"; + break; + case "radio": + case "checkbox": + case "select": + case "date": + case "cascader": + msg = "璇烽�夋嫨"; + break; + default: + msg = "鏈畾涔�"; + } + return `${msg}${data.label}`; + } + return { InitRules }; +} \ No newline at end of file diff --git a/src/components/form/index.vue b/src/components/form/index.vue new file mode 100644 index 0000000..d3c0291 --- /dev/null +++ b/src/components/form/index.vue @@ -0,0 +1,128 @@ +<template> + <el-form ref="formDom" v-loading="loading" element-loading-text="鍔犺浇涓紝璇风◢鍊�" :label-width="label_width" :model="field"> + <el-row> + <template v-for="item in form_item" :key="item.prop"> + <el-col v-if="!form_hidden[item.prop]" :span="item.col || 24"> + <el-form-item v-if="item.type !== 'slot'" :label="item.label" :prop="item.prop" :rules="item.rules"> + <component + v-model:value="field[item.prop]" + :is="item.type + 'Component'" + :data="item" + :disabled="disabled[item.prop]" + @callback="componentCallback" + /> + </el-form-item> + <el-form-item v-else :label="item.label" :prop="item.prop" :rules="item.rules"> + <slot :name="item.slot_name"></slot> + </el-form-item> + </el-col> + </template> + </el-row> + <!-- button --> + <el-form-item v-if="form_button && form_button.length > 0"> + <el-button + v-for="item in form_button" + :key="item.key" + :type="item.type" + @click="item.callback ? item.callback() : handlerFormActive(item)" + > + {{ item.label }} + </el-button> + </el-form-item> + </el-form> +</template> + +<script> +import { reactive, ref } from 'vue'; +// hook +import { rulesHook } from "./hook/rulesHook"; +import { relationHook } from "./hook/relationHook"; +// require import components +const files = require.context('@c/control', true, /\index.vue$/); +const modules = {} +files.keys().forEach(key => { + const name = key.split("/") + modules[name[1]+'Component'] = files(key).default || files(key) +}) +export default { + name: 'BasisForm', + components: modules, + props: { + item: { + type: Array, + default: () => ([]) + }, + button: { + type: Array, + default: () => ([]) + }, + labelWidth: { + type: [String, Number], + default: "100px" + }, + field: { + type: Object, + default: () => ({}) + }, + hidden: { + type: Object, + default: () => ({}) + }, + disabled: { + type: Object, + default: () => ({}) + }, + loading: { + type: Boolean, + default: false + }, + hidden: { + type: Object, + default: () => ({}) + }, + disabled: { + type: Object, + default: () => ({}) + } + }, + emits: ["callback"], + setup(props, { emit }){ + const { InitRules } = rulesHook(); + const { HiddenItem, DisabledItem } = relationHook(); + // 鏍¢獙瑙勫垯澶勭悊 + const form_item = reactive(InitRules(props.item)); + const label_width = ref(props.labelWidth); + const form_button = reactive(props.button); + const form_hidden = reactive(props.hidden); + const form_disabled = reactive(props.disabled); + // 琛ㄥ崟鎻愪氦楠岃瘉 + const formDom = ref(null); + // form琛ㄥ崟鍔ㄤ綔 + const handlerFormActive = (data) => { + // 鎻愪氦琛ㄥ崟浜嬩欢 + if(data.key === 'submit') { + formDom.value.validate((valid) => valid && emit("callback")); + } + // 閲嶇疆琛ㄥ崟浜嬩欢 + if(data.key === 'reset') { handlerFormReset(); } + } + /** + * 閲嶇疆琛ㄥ崟 + */ + const handlerFormReset = () => { + formDom.value.resetFields(); + } + // change 浜嬩欢 + const componentCallback = (params) => { + if(params.formItem.relation_hidden) { + HiddenItem(params.value, params.formItem.relation_hidden, form_hidden) + } + if(params.formItem.relation_disabled) { + DisabledItem(params.value, params.formItem.relation_hidden, form_disabled) + } + } + return { formDom, form_item, label_width, form_button, form_hidden, form_disabled, formDom, handlerFormActive, componentCallback, handlerFormReset } + } +} +</script> +<style lang="scss" scoped></style> \ No newline at end of file diff --git a/src/components/pagination/index.vue b/src/components/pagination/index.vue new file mode 100644 index 0000000..b72c81b --- /dev/null +++ b/src/components/pagination/index.vue @@ -0,0 +1,69 @@ +<template> + <el-pagination + class="pull-right" + sizs="small" + background + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + v-model:current-page="current_page" + :page-size="10" + :page-sizes="[10, 20, 50, 100]" + layout="total, sizes, prev, pager, next, jumper" + :total="total"> + </el-pagination> +</template> + +<script> +import { ref, watchEffect, watch } from 'vue'; +export default { + name: 'Pagination', + props: { + total: { + type: [Number, String], + default: 0 + }, + current: { + type: [Number, String], + default: 0 + }, + flag: { + type: Boolean, + default: false + }, + }, + emits: ["sizeChange", "currentChange", "update:flag"], + setup(props, { emit }){ + // 褰撳墠椤电爜 + const current_page = ref(1); + // 鎬绘潯鏁扮粺璁� + const total = ref(props.total); + const page_status = ref(false); + // 鐩戝惉props.total鍙戠敓鍙樺寲鏃舵洿鏂皌otal + watchEffect(() => { + total.value = props.total; + current_page.value = props.current; + }) + watch(() => props.flag, (newValue) => { + page_status.value = newValue + }) + // 椤电爜浜嬩欢 + const handleSizeChange = (val) => { + page_status.value = true + emit("update:flag", true) + const params = { + pageNumber: 1, + pageSize: val + } + emit("sizeChange", params, 'page') + } + const handleCurrentChange = (val) => { + if(page_status.value) { return false } + const params = { + pageNumber: val + } + emit("currentChange", params, 'page') + } + return { total, current_page, handleSizeChange, handleCurrentChange } + } +} +</script> \ No newline at end of file diff --git a/src/components/search/index.vue b/src/components/search/index.vue new file mode 100644 index 0000000..19146a6 --- /dev/null +++ b/src/components/search/index.vue @@ -0,0 +1,130 @@ +<template> + <div v-if="button_group.length > 0" class="form-search-button-group"> + <el-button v-for="item in button_group" :key="item.id" :type="item.type" @click="item.callback && item.callback()">{{ item.label }}</el-button> + </div> + <el-form ref="searchForm" inline :label-width="label_width" :model="field"> + <template v-if="form_item && form_item.length > 0"> + <el-form-item v-for="item in form_item" :key="item.prop" :label="item.label" :prop="item.prop" :label-width="item.label_width || label_width"> + <component :ref="componentDom" :key="item.type" v-model:value="field[item.prop]" :is="item.type + 'Component'" :data="item" @callback="componentCallback" /> + </el-form-item> + <!-- button --> + <el-form-item> + <div class="pull-right"> + <el-button type="danger" @click="handlerSearch">鎼滅储</el-button> + <el-button v-if="button.reset_button" @click="handlerReset">閲嶇疆</el-button> + </div> + </el-form-item> + </template> + </el-form> +</template> + +<script> +import { reactive, ref, inject, toRefs, nextTick } from 'vue'; +// require import components +const files = require.context('@c/control', true, /\index.vue$/); +const modules = {} +files.keys().forEach(key => { + const name = key.split("/") + modules[name[1]+'Component'] = files(key).default || files(key) +}) +export default { + name: 'BasisForm', + components: modules, + props: { + item: { + type: Array, + default: () => ([]) + }, + labelWidth: { + type: [String, Number], + default: "100px" + }, + field: { + type: Object, + default: () => ({}) + }, + button: { + type: Object, + default: () => ({}) + }, + button_group: { + type: Array, + default: () => ([]) + }, + button_col: { + type: Number, + default: 24 + } + }, + emits: ["callbackSearch"], + setup(props, { emit }){ + const data = reactive({ key: "", value: "" }); + // 鑾峰彇鐖剁粍浠秔rovide鏁版嵁 + const search_config = inject("search_config"); + // label鍗犱綅瀹藉害 + const label_width = ref(search_config?.label_width || props.labelWidth); + // 缁勪欢鍏冪礌閰嶇疆 + const form_item = reactive(search_config?.form_item || props.item); + // 瀛楁閰嶇疆 + const field = reactive(search_config?.form_data || props.field); + // 鎸夐挳閰嶇疆 + const button = reactive(search_config?.form_button || props.button); + // 鎸夐挳缁勯厤缃� + const button_group = reactive(search_config?.form_button_group || props.button_group); + // 鎸夐挳鍗犱綅 col + const button_col = reactive(search_config?.button_col || props.button_col); + /** + * 鑾峰彇鍔ㄦ�佺粍浠剁殑dom + */ + const keyword = ref(null) + const componentDom = el => { + console.log(el) + if(el && el.data.type === 'keyword') { + keyword.value = el + } + } + // 鎼滅储 + const handlerSearch = () => { + const data = formatRequest(); + // 鍥炶皟鐖剁粍浠舵柟娉� + emit("callbackSearch", data, "search"); + } + // 閲嶇疆 + const searchForm = ref(null); + const handlerReset = () => { + searchForm.value.resetFields(); + // 璋冪敤鍏抽敭瀛楃粍浠剁殑clear鏂规硶 + keyword.value && keyword.value.handlerClear() + emit("callbackSearch", {}, "search"); + } + /** 鍙傛暟鏍煎紡鍖� */ + const formatRequest = () => { + // 澹版槑绌虹殑JSON瀵硅薄涓存椂瀛樺偍鏁版嵁 + const request_data = {}; + // 杩囨护鍦ㄥ�煎瓨鍦ㄧ殑鏁版嵁 + for(let key in field) { + if(field[key] !== "") { request_data[key] = field[key]; } + } + // 鍒ゆ柇鍏抽敭瀛椾笅鎷夐�夋嫨鏄惁鏈夊�煎瓨鍦� + if(data.key && data.value) { request_data[data.key] = data.value; } + // 杩斿洖鍙傛暟 + return request_data; + } + // 鍥炶皟 + const componentCallback = (params) => { + if(params.type === 'keyword') { + data.key = params.value.key + data.value = params.value.value + } + } + return { + ...toRefs(data), + form_item, field, label_width, button, componentCallback, handlerSearch, handlerReset, componentDom, searchForm, button_group, button_col + } + + } +} +</script> +<style lang="scss" scoped> +.form-search-button-group { margin-bottom: 20px; } +</style> \ No newline at end of file diff --git a/src/components/svgIcon/Index.vue b/src/components/svgIcon/Index.vue new file mode 100644 index 0000000..87a113f --- /dev/null +++ b/src/components/svgIcon/Index.vue @@ -0,0 +1,38 @@ +<template> + <svg class="svg-class" :class="svgClassName"> + <use :href="svgIcon"></use> + </svg> +</template> +<script> +import { ref, computed } from "vue"; +export default { + name: "SvgIcon", + props: { + iconName: { + type: String, + default: "" + }, + className: { + type: String, + default: "" + } + }, + setup(props){ + // className + const svgClassName = ref(props.className); + // svg 鍥炬爣 + const svgIcon = computed(() => `#icon-${props.iconName}`); + return { + svgClassName, + svgIcon + } + } +} +</script> +<style lang="scss"> +.svg-class { + width: 1em; + height: 1em; + fill: currentColor; +} +</style> \ No newline at end of file diff --git a/src/components/svgIcon/icon/home.svg b/src/components/svgIcon/icon/home.svg new file mode 100644 index 0000000..4b352c9 --- /dev/null +++ b/src/components/svgIcon/icon/home.svg @@ -0,0 +1 @@ +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1608734152787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1160" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M959.390493 527.761985c0 23.127743-18.419512 41.87369-41.138956 41.87369-12.335956 0-23.276123-5.640464-30.817889-14.393825L541.089525 202.729238c-16.065907-16.353456-42.113143-16.353456-58.179051 0L237.802034 452.204126c2.877537 5.636371 4.653997 11.926634 4.653997 18.690688l0 165.475775c0 0.328481-0.089028 0.635473-0.097214 0.961908l0.297782 0 0 163.003468c0 23.125697 18.506493 41.871643 41.337477 41.871643l82.568531 0L366.562607 677.738765c0-22.850427 18.520819-41.3692 41.3692-41.3692L614.775758 636.369565c22.848381 0 41.3692 18.518772 41.3692 41.3692 0 22.846334-18.520819 41.3692-41.3692 41.3692L449.299983 719.107965l0 165.473729c0 22.427802-17.875113 40.583301-40.142256 41.246403l0 0.121773L263.148305 925.94987c-57.115835 0-103.418394-46.864354-103.418394-104.678084L159.729911 637.331473l0.084934 0c-0.00614-0.326435-0.097214-0.633427-0.097214-0.961908L159.717631 531.680225l-23.162536 23.575952c-7.541767 8.745175-18.475793 14.379499-30.807656 14.379499-22.719444 0-41.138956-18.745946-41.138956-41.87369 0-11.862165 4.895497-22.520923 12.687974-30.141484l-0.237407-0.2415 362.215602-368.668571c40.164768-40.881083 105.285928-40.881083 145.450696 0l361.569896 368.010585-0.299829 0.305969C954.175725 504.680291 959.390493 515.563152 959.390493 527.761985zM614.733802 842.206584c0.443092 0 0.854461 0.119727 1.294482 0.132006l0-0.132006 122.683157 0c22.828938 0 41.337477-18.745946 41.337477-41.871643L780.048919 637.331473l0.534166 0c-0.016373-0.496304-0.145309-0.961908-0.145309-1.464351 0-23.125697 18.417465-41.87369 41.138956-41.87369 22.719444 0 41.136909 18.747993 41.136909 41.87369 0 0.502443-0.125867 0.968048-0.145309 1.464351l0.405229 0 0 183.940312c0 57.812707-46.299489 104.678084-103.418394 104.678084l-143.528927 0 0-0.132006c-0.441045 0.014326-0.852414 0.132006-1.294482 0.132006-22.719444 0-41.138956-18.7439-41.138956-41.869596C573.594847 860.9556 592.014358 842.206584 614.733802 842.206584z" p-id="1161"></path></svg> \ No newline at end of file diff --git a/src/components/svgIcon/icon/information.svg b/src/components/svgIcon/icon/information.svg new file mode 100644 index 0000000..2d341dd --- /dev/null +++ b/src/components/svgIcon/icon/information.svg @@ -0,0 +1 @@ +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1608736466130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="791" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M782.27531852 936.77037037H241.72468148c-60.19602963 0-109.22666667-49.03063703-109.22666666-109.22666667V196.4562963c0-60.19602963 49.03063703-109.22666667 109.22666666-109.22666667h540.55063704c60.19602963 0 109.22666667 49.03063703 109.22666666 109.22666667v631.0874074c0 60.19602963-49.03063703 109.22666667-109.22666666 109.22666667zM241.72468148 160.04740741c-20.02488889 0-36.40888889 16.384-36.40888889 36.40888889v631.0874074c0 20.02488889 16.384 36.40888889 36.40888889 36.40888889h540.55063704c20.02488889 0 36.40888889-16.384 36.40888889-36.40888889V196.4562963c0-20.02488889-16.384-36.40888889-36.40888889-36.40888889H241.72468148z" p-id="792"></path><path d="M747.44414815 343.30548148H271.70133333c-20.14625185 0-36.40888889-16.26263703-36.40888888-36.40888889s16.26263703-36.40888889 36.40888888-36.40888889h475.74281482c20.14625185 0 36.40888889 16.26263703 36.40888888 36.40888889s-16.26263703 36.40888889-36.40888888 36.40888889zM747.44414815 497.43644445H271.70133333c-20.14625185 0-36.40888889-16.26263703-36.40888888-36.4088889s16.26263703-36.40888889 36.40888888-36.40888888h475.74281482c20.14625185 0 36.40888889 16.26263703 36.40888888 36.40888888s-16.26263703 36.40888889-36.40888888 36.4088889zM554.47703703 653.99466667H271.70133333c-20.14625185 0-36.40888889-16.26263703-36.40888888-36.40888889s16.26263703-36.40888889 36.40888888-36.40888889h282.7757037c20.14625185 0 36.40888889 16.26263703 36.40888889 36.40888889s-16.26263703 36.40888889-36.40888889 36.40888889z" p-id="793"></path></svg> \ No newline at end of file diff --git a/src/components/svgIcon/icon/logout.svg b/src/components/svgIcon/icon/logout.svg new file mode 100644 index 0000000..9639a08 --- /dev/null +++ b/src/components/svgIcon/icon/logout.svg @@ -0,0 +1 @@ +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621589152962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M706.432 195.136c-14.656-9.536-34.56-5.44-44.224 9.408-9.536 14.848-5.376 34.688 9.472 44.288C772.032 314.048 832 424.448 832 544.192c0 193.92-157.504 351.68-351.04 351.68s-351.04-157.76-351.04-351.68c0-119.68 60.032-230.144 160.448-295.296 14.848-9.6 19.072-29.504 9.472-44.352C290.112 189.632 270.336 185.408 255.552 195.072 136.768 272.192 65.856 402.688 65.856 544.192 65.856 773.504 252.032 960 480.96 960S896 773.504 896 544.192C896 402.624 825.152 272.128 706.432 195.136zM480.96 572.16c17.664 0 32-14.656 32-32.832l0-380.8c0-18.112-14.336-32.768-32-32.768s-32 14.656-32 32.768l0 380.8C448.96 557.504 463.232 572.16 480.96 572.16z" p-id="2858"></path></svg> \ No newline at end of file diff --git a/src/components/svgIcon/icon/menuBtn.svg b/src/components/svgIcon/icon/menuBtn.svg new file mode 100644 index 0000000..9c01309 --- /dev/null +++ b/src/components/svgIcon/icon/menuBtn.svg @@ -0,0 +1 @@ +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621586114074" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2473" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200"><defs><style type="text/css"></style></defs><path d="M980.8 468.8H43.2C17.6 468.8 0 486.4 0 512s17.6 43.2 43.2 43.2h939.2c25.6 0 43.2-17.6 43.2-43.2-1.6-25.6-19.2-43.2-44.8-43.2zM980.8 768H43.2C17.6 768 0 785.6 0 811.2s17.6 43.2 43.2 43.2h939.2c25.6 0 43.2-17.6 43.2-43.2-1.6-25.6-19.2-43.2-44.8-43.2zM43.2 256h939.2c25.6 0 43.2-17.6 43.2-43.2s-17.6-43.2-43.2-43.2H43.2c-25.6 0-43.2 17.6-43.2 43.2S17.6 256 43.2 256z" p-id="2474"></path></svg> \ No newline at end of file diff --git a/src/components/svgIcon/icon/system.svg b/src/components/svgIcon/icon/system.svg new file mode 100644 index 0000000..bb794a3 --- /dev/null +++ b/src/components/svgIcon/icon/system.svg @@ -0,0 +1,2 @@ +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627108347577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4935" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); } +</style></defs><path d="M660.750044 997.266537c-14.811783 0-29.804198-5.418945-40.461457-15.173046-15.714941-14.45052-69.181866-55.995766-107.114482-55.995767-38.293879 0-91.580173 41.545246-107.114482 55.995767-16.256835 15.173046-42.809667 19.688834-63.221027 10.657259l-3.070736-1.445052-153.898042-89.231964c-17.701887-13.1861-27.094726-38.47451-22.217675-59.969659 4.696419-20.772623 13.908626-87.786911-5.057682-120.661845-18.966308-32.874934-81.64544-58.343976-102.0568-64.846711-20.41136-6.322103-37.932616-26.191568-41.545246-47.325454-0.361263-2.167578-9.212207-54.370083-9.212207-92.663962 0-38.293879 8.850944-90.315752 9.212207-92.663962 3.61263-21.133886 21.133886-41.003352 41.545246-47.325454s83.090492-31.791145 102.0568-64.84671c19.146939-33.055565 9.934733-99.889222 5.057682-120.661845-4.877051-21.675781 4.335156-46.78356 22.217675-59.96966l2.890104-1.986946 153.898042-88.8707c20.41136-9.031575 46.964191-4.515788 63.221027 10.657258 15.714941 14.45052 69.181866 55.995766 107.114482 55.995767 38.293879 0 91.580173-41.545246 107.114483-55.995767 16.256835-15.173046 42.809667-19.688834 63.221026-10.657258l3.070736 1.445052 153.898042 89.231963c17.701887 13.1861 27.094726 38.47451 22.217675 59.969659-4.696419 20.772623-13.908626 87.786911 5.057682 120.661846 18.966308 32.874934 81.64544 58.343976 102.0568 64.84671 20.41136 6.322103 37.932616 26.191568 41.545246 47.325454 0.361263 2.167578 9.212207 54.370083 9.212207 92.663962 0 38.293879-8.850944 90.315752-9.212207 92.663962-3.61263 21.133886-21.133886 41.003352-41.545246 47.325454s-83.090492 31.791145-102.0568 64.84671c-19.146939 33.055565-9.934733 99.889222-5.057682 120.661845 4.877051 21.495149-4.335156 46.78356-22.217675 59.96966l-2.890104 1.986946-153.898042 88.870701c-7.22526 2.890104-14.992415 4.515788-22.75957 4.515787zM225.247486 852.580702l140.531311 81.284177c15.353678-13.727994 82.548598-70.626918 147.214676-70.626918s131.860998 56.718292 147.214677 70.626918l140.53131-81.284177c-4.154525-19.869466-19.869466-106.572588 12.644206-162.748986 33.416828-57.982713 120.661845-87.786911 136.376786-92.844593 1.445052-8.489681 8.128418-50.938084 8.128417-80.561651 0-29.623567-6.683366-72.07197-8.128417-80.561651-15.714941-5.057682-102.959958-34.86188-136.376786-92.844594-32.333039-56.176398-16.79873-142.87952-12.644206-162.748985l-140.53131-81.284177c-15.353678 13.727994-82.548598 70.626918-147.214677 70.626918-64.84671 0-131.860998-56.718292-147.214676-70.626918l-140.531311 81.284177c4.154525 19.869466 19.869466 106.572588-12.644205 162.748985-33.416828 57.982713-120.661845 87.786911-136.376786 92.844594-1.445052 8.489681-8.128418 50.938084-8.128418 80.561651 0 29.623567 6.683366 72.07197 8.128418 80.561651 15.714941 5.057682 102.959958 34.86188 136.376786 92.844593 32.333039 56.176398 16.79873 142.87952 12.644205 162.748986z" p-id="4936"></path><path d="M512.993473 729.751279c-117.59111 0-213.145176-95.734697-213.145175-213.325807s95.734697-213.325807 213.325807-213.325807 213.145176 95.734697 213.145175 213.325807S630.584583 729.751279 512.993473 729.751279z m0-363.972482c-83.090492 0-150.646675 67.556183-150.646675 150.646675s67.556183 150.646675 150.646675 150.646675c83.090492 0 150.646675-67.556183 150.646675-150.646675S596.083965 365.778797 512.993473 365.778797z" p-id="4937"></path></svg> \ No newline at end of file diff --git a/src/components/svgIcon/icon/user.svg b/src/components/svgIcon/icon/user.svg new file mode 100644 index 0000000..34aeec4 --- /dev/null +++ b/src/components/svgIcon/icon/user.svg @@ -0,0 +1 @@ +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1608814595533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="809" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 962C263.4875 962 62 760.5125 62 512S263.4875 62 512 62s450 201.4875 450 450-201.4875 450-450 450z m0-825.00000029C304.8875 136.99999971 136.99999971 304.8875 136.99999971 512s167.88750029 375.00000029 375.00000029 375.00000029 375.00000029-167.88750029 375.00000029-375.00000029S719.1125 136.99999971 512 136.99999971z m0 675a299.40000029 299.40000029 0 0 1-234-112.5A299.40000029 299.40000029 0 0 1 512 586.99999971a299.25 299.25 0 0 1 233.96249971 112.5A299.25 299.25 0 0 1 512 811.99999971z m0-262.49999942a150.00000029 150.00000029 0 1 1 0-300.00000058 150.00000029 150.00000029 0 0 1 0 300.00000058z" p-id="810"></path></svg> \ No newline at end of file diff --git a/src/components/svgIcon/svg.js b/src/components/svgIcon/svg.js new file mode 100644 index 0000000..d2a37c0 --- /dev/null +++ b/src/components/svgIcon/svg.js @@ -0,0 +1,7 @@ +//聽鑾峰彇褰撳墠svg鐩綍鎵�鏈変负.svg缁撳熬鐨勬枃浠� +const context =聽require.context('./icon', false,聽/\.svg$/); +//聽瑙f瀽鑾峰彇鐨�.svg鏂囦欢鐨勬枃浠跺悕绉帮紝骞惰繑鍥� +const聽requireAll聽=聽(requireContext)聽=>聽{ + return requireContext.keys().map(requireContext);聽聽 +}; +requireAll(context); \ No newline at end of file diff --git a/src/components/switch/index.vue b/src/components/switch/index.vue new file mode 100644 index 0000000..c9f249f --- /dev/null +++ b/src/components/switch/index.vue @@ -0,0 +1,71 @@ +<template> + <el-switch + v-model="init_data.value" + :loading="init_data.loading" + @change="handlerSwitch($event)" + > + </el-switch> +</template> + +<script> +import { reactive, getCurrentInstance } from "vue"; +// requestUrl +// import ApiUrl from "@/api/requestUrl"; +//API +// import { SwitchStatus } from "@/api/common"; +export default { + name: "SwitchComponent", + props: { + data: { + type: Object, + default: () => ({}), + }, + config: { + type: Object, + default: () => ({}), + }, + }, + setup(props) { + // 閰嶇疆淇℃伅 + const config = reactive(props.config); + // 鏁版嵁 + const data = reactive(props.data); + // 鍒濆鍊� + const init_data = reactive({ + value: data[config.prop], + loading: false, + }); + // 鑾峰彇瀹炰緥涓婁笅鏂� + const { proxy } = getCurrentInstance(); + // 浜嬩欢 + const handlerSwitch = (value) => { + // 璇锋眰鍙傛暟 + const key_id = config.key_id; + if (!key_id) { + return false; + } + init_data.loading = true; + // 鍙傛暟 + const request_data = { + url: config.api_url || ApiUrl[config.api_module][config.api_module_key], + method: config.method || "post", + data: { + [key_id]: data[key_id], // 绛変环浜嶽"id"]: data["id"] + [config.prop]: value, // 绛変环浜嶽"status"]: value + }, + }; + // 鎺ュ彛璇锋眰 + // SwitchStatus(request_data) + // .then((response) => { + // proxy.$message.success(response.message); + // init_data.value = value; + // init_data.loading = false; + // }) + // .catch((error) => { + // init_data.loading = false; + // }); + }; + return { config, init_data, handlerSwitch }; + }, +}; +</script> diff --git a/src/components/table/configHook.js b/src/components/table/configHook.js new file mode 100644 index 0000000..4d1d761 --- /dev/null +++ b/src/components/table/configHook.js @@ -0,0 +1,39 @@ +import { reactive } from "vue"; +/** + * BasisTable缁勪欢榛樿閰嶇疆 + * @param { Boolean } selection 澶氶�夐」閰嶇疆 + * @param { Boolean } batch_delete 鎸囬噺鍒犻櫎鎸夐挳 + * @param { Boolean } pagination 鍒嗛〉 + */ +export function configHook(){ + const config = reactive({ + selection: true, + batch_delete: true, + pagination: true, + request: true, + search: true, + action_request: false, + row_key: "id", + expand_all: true, + has_button_delete: "", + has_button_batch_delete: "" + }) + /** + * + * @param {*} data 閰嶇疆棰濆缁勪欢锛宼rue鏄剧ず锛宖alse涓嶆樉绀� + */ + const configInit = (data = {}) => { + // 鏃犳暟鎹椂涓嶆墽琛� + if(JSON.stringify(data) === "{}") { return false; } + // 鑾峰彇榛樿閰嶇疆椤圭殑鎵�鏈塳ey + const keys = Object.keys(config); + // 寰幆浼犲叆鐨勯厤缃」 + for(let key in data) { + // 杩囨护鍘熷瀷閾剧殑瀵硅薄 + if (!data.hasOwnProperty(key)) { continue; } + // ES6璇硶鍒ゆ柇浼犲叆鐨刱ey鍜岄粯璁ら厤缃殑key鐩稿悓鏃讹紝鍒欑洿鎺ユ洿鏂伴粯璁ら厤缃」鐨勫�� + if(keys.includes(key)) { config[key] = data[key]; } + } + } + return { config, configInit }; +} \ No newline at end of file diff --git a/src/components/table/index.vue b/src/components/table/index.vue new file mode 100644 index 0000000..fc07cc1 --- /dev/null +++ b/src/components/table/index.vue @@ -0,0 +1,121 @@ +<template> + <SearchForm v-if="config.search" @callbackSearch="getList" /> + <el-table :row-key="config.row_key" :default-expand-all="config.expand_all" :data="table_data.data" v-loading="table_data.loading" element-loading-text="鍔犺浇涓紝璇风◢鍊�" border style="width: 100%" @selection-change="handleSelectionChange"> + <el-table-column v-if="config.selection" type="selection" width="40"></el-table-column> + <template v-for="header in data.render_header" :key="header.prop"> + <!-- switch --> + <el-table-column v-if="header.type === 'switch'" :label="header.label" :width="header.width"> + <template #default="scope"> + <Switch :data="scope.row" :config="header" /> + </template> + </el-table-column> + <!-- function --> + <el-table-column v-else-if="header.type === 'function'" :label="header.label" :width="header.width"> + <template #default="scope"> + <div v-html="header.callback && header.callback(scope.row)"></div> + </template> + </el-table-column> + <!-- slot --> + <el-table-column v-else-if="header.type === 'slot'" :label="header.label" :width="header.width"> + <template #default="scope"> + <slot :name="header.slot_name" :data="scope.row"></slot> + <el-button v-if="header.delete_elem" @click="handlerDelete('delete', scope.row)" v-has-button="config.has_button_delete">鍒犻櫎</el-button> + </template> + </el-table-column> + <!-- text --> + <el-table-column v-else :prop="header.prop" :label="header.label" :width="header.width"></el-table-column> + </template> + </el-table> + <el-row class="margin-top-20"> + <el-col :span="6"> + <el-button v-if="config.batch_delete" :disabled="!table_data.data_id" @click="handlerDelete('batch')" v-has-button="config.has_button_batch_delete">鎵归噺鍒犻櫎</el-button> + </el-col> + <el-col :span="18"> + <Pagination + v-if="config.pagination" + @sizeChange="getList" + @currentChange="getList" + :total="table_data.total" + :current="table_data.current_page" /> + </el-col> + </el-row> +</template> + +<script> +import { reactive, getCurrentInstance, onBeforeMount, watch } from 'vue'; +// store +import { useStore } from "vuex"; +// components +import SearchForm from "@c/search"; +import Pagination from "@c/pagination"; +import Switch from "@c/control/switch"; +// hook +import { configHook } from "./configHook"; +import { requestHook } from "./requestHook"; +export default { + name: 'TableComponents', + components: { Pagination, Switch, SearchForm }, + props: { + columns: { + type: Array, + default: () => ([]) + }, + config: { + type: Object, + default: () => ({}) + }, + request: { + type: Object, + default: () => ({}) + }, + search: { + type: Boolean, + default: true + } + }, + emits: ["onload"], + setup(props, { emit }){ + // store + const store = useStore(); + // 鑾峰彇瀹炰緥涓婁笅鏂� + const { proxy } = getCurrentInstance(); + const { config, configInit } = configHook(); + const { requestData, table_data, handlerDeleteComfirm, saveDataId } = requestHook(); + const data = reactive({ + table_data: [], + render_header: props.columns, + row_data_id: [], + currentPage: 0, + total: 0 + }) + onBeforeMount(() => { + // 榛樿閰嶇疆椤瑰鐞� + configInit(props.config); + // 璇锋眰鏁版嵁 + getList(props.request) + }) + + const getList = (params, type) => { + requestData(params, type).then(response => { + emit("onload", table_data); + }); + } + /** 鍒犻櫎鍔ㄤ綔 */ + const handlerDelete = (type, val) => { + if(type === "delete") { saveDataId(val); } + handlerDeleteComfirm(); + } + /** 澶嶉�夋浜嬩欢 */ + const handleSelectionChange = (val) => { + saveDataId(val); + } + watch(() => store.state.app.table_action_request, () => { + config.action_request && getList(); + }) + return { data, config, table_data, requestData, getList, handlerDelete, handleSelectionChange } + } +} +</script> +<style lang='scss' scoped> +.margin-top-20 { margin-top: 20px; } +</style> \ No newline at end of file diff --git a/src/components/table/requestHook.js b/src/components/table/requestHook.js new file mode 100644 index 0000000..ba42b92 --- /dev/null +++ b/src/components/table/requestHook.js @@ -0,0 +1,174 @@ +import { reactive, getCurrentInstance } from "vue"; +// requestUrl +// import ApiUrl from "@/api/requestUrl"; +// API +// import { TableData, CommonApi } from "@/api/common"; +import { configHook } from "./configHook"; +import { ElMessage } from "element-plus"; +export function requestHook() { + const { config, configInit } = configHook(); + + // 鑾峰彇瀹炰緥涓婁笅鏂� + const { proxy } = getCurrentInstance(); + let request_config = { + has: true, // 鏄惁璇锋眰 + url: "", // 璇锋眰妯″潡 + method: "post", // 璇锋眰绫诲瀷 + data: {}, // 璇锋眰鍙傛暟 + delete_key: "", // 鍒犻櫎鎺ュ彛鐨凨EY + search_params: {}, + }; + const table_data = reactive({ + data: [], + data_id: "", + current_page: 0, + total: 0, + loading: false, + }); + /** + * @returns 鍒楄〃鏁版嵁璇锋眰 + */ + const loadData = () => { + // 鍒ゆ柇鏉′欢鏄惁璇锋眰鎺ュ彛 + if (!request_config.has) { + return false; + } + if (!request_config.url) { + return false; + } + // 鍙傛暟 + const url = ApiUrl[request_config.url]?.list?.url; + const method = ApiUrl[request_config.url]?.list?.method || "post"; + const data = { ...request_config.data, ...request_config.search_params }; + if (!url) { + console.log("璇锋眰鍦板潃涓嶅瓨鍦�"); + return Promise.reject(); + } + const request_data = { + url, + method, + data, + }; + // 鍔犺浇鐘舵�� + table_data.loading = true; + return new Promise((resolve, reject) => { + // TableData(request_data) + // .then((response) => { + // let response_data = response.data.data; + // // 鏄惁鏍煎紡鍖栨暟鎹� + // if ( + // request_config.format_data && + // Object.prototype.toString.call(request_config.format_data) === + // "[object Function]" + // ) { + // response_data = request_config.format_data(response.data.data); + // } + // console.log(response_data); + // table_data.data = response_data; + // table_data.total = response.data.total; + // table_data.current_page = response.data.current_page; + // // 鍙栨秷鍔犺浇鐘舵�� + // table_data.loading = false; + // resolve(response.data); + // }) + // .catch((error) => { + // reject(); + // // 鍙栨秷鍔犺浇鐘舵�� + // table_data.loading = false; + // }); + }); + }; + const requestData = (data = {}, type = "init") => { + // 鍒濆鍖栭�昏緫 + if (type === "init") { + request_config = { ...request_config, ...data }; + } + // 鍒嗛〉閫昏緫 + if (type === "page") { + request_config.data = { ...request_config.data, ...data }; + } + // 鎼滅储 + if (type === "search") { + request_config.data.pageNumber = 1; + request_config.data.pageSize = 10; + request_config.search_params = data; + } + // 璇锋眰鏁版嵁 + return loadData(); + }; + /** + * + * @param {Object} data + * @description 鎵嬪姩璇锋眰 + */ + const handlerRequestData = (data = {}) => { + table_data.params_data = data; + loadData(); + }; + /** + * + * @param { String銆丄rray } value + * @description 瀛樺偍鏁版嵁ID锛屼綔鐢ㄤ簬鍒犻櫎鎺ュ彛浣跨敤 + * 鍒犻櫎鎺ュ彛 + */ + const saveDataId = (value) => { + const isArray = Array.isArray(value); + if (!isArray) { + table_data.data_id = value[request_config.delete_key]; + } else { + table_data.data_id = + value.length > 0 + ? value.map((item) => item[request_config.delete_key]).join() + : ""; + } + console.log(table_data.data_id); + }; + /** + * + * @description 鍒犻櫎鍔ㄤ綔鐨勭‘璁ゅ脊绐� + */ + const handlerDeleteComfirm = () => { + proxy.deleteConfirm({ + title: "鍒犻櫎", + message: "纭鍒犻櫎褰撳墠鏁版嵁鍚楋紵", + thenFun: () => { + handlerDelete(); + }, + }); + }; + const handlerDelete = () => { + const url = ApiUrl?.[request_config.url]?.delete?.url; + const method = ApiUrl?.[request_config.url]?.delete?.method || "post"; + if (!url) { + console.log("鏈厤缃垹闄ゆ帴鍙e弬鏁�"); + return false; + } + // 鍙傛暟 + const request_data = { + url, + method: method, + data: { [request_config.delete_key]: table_data.data_id }, + }; + // CommonApi(request_data) + // .then((response) => { + // // 鎴愬姛鎻愮ず + // proxy.$message({ + // message: response.message, + // type: "success", + // }); + // loadData(); + // table_data.data_id = ""; + // proxy.deleteConfirmClose(); + // }) + // .catch((error) => { + // proxy.confirmButtonLoading(false); + // }); + }; + return { + table_data, + requestData, + handlerDelete, + saveDataId, + handlerDeleteComfirm, + }; +} diff --git a/src/components/wangeditor/index.vue b/src/components/wangeditor/index.vue new file mode 100644 index 0000000..2bf9308 --- /dev/null +++ b/src/components/wangeditor/index.vue @@ -0,0 +1,67 @@ +<template> + <div ref="editor"></div> +</template> + +<script> +import { ref, onMounted, watch } from 'vue'; +import WangEditor from 'wangeditor'; +// cookies +import { getToken } from "@/utils/cookies"; // 杩欐槸灏佽濂界殑鏂规硶 +export default { + name: 'Wangeditor', + components: {}, + props: { + content: { + type: String, + default: "" + } + }, + emits: ["update:content"], + setup(props, { emit }){ + let html = ref(null) + // 鍐呭 + let content = ref(); + // 瀵屾枃鏈珼OM鍏冪礌 + const editor = ref(); + // 瀵屾枃鏈璞� + let editor_instance = null; + // 鐢熷懡鍛ㄦ湡 + onMounted(() => { + // 鍒涘缓瀵屾枃鏈璞� + editor_instance = new WangEditor(editor.value); + // 鍥剧墖涓婁紶閰嶇疆 + editor_instance.config.uploadImgServer = process.env.VUE_APP_DEV_TARGET + '/upload' // 涓婁紶鍥剧墖鐨勬帴鍙e湴鍧� + editor_instance.config.uploadFileName = 'files' // formdata涓殑name灞炴�� + editor_instance.config.uploadImgHeaders = { + Token: getToken() // 璁剧疆璇锋眰澶� + } + editor_instance.config.uploadImgHooks = { + // 鍥剧墖涓婁紶骞惰繑鍥炵粨鏋滐紝浣嗗浘鐗囨彃鍏ラ敊璇椂瑙﹀彂 + fail: function (xhr, editor, result) { + console.log(result) + }, + // 渚嬪鏈嶅姟鍣ㄧ杩斿洖鐨勪笉鏄� { errno: 0, data: [...] } 杩欑鏍煎紡锛屽彲浣跨敤 customInsert + customInsert: function(insertImgFn, result) { + // insertImgFn 鍙妸鍥剧墖鎻掑叆鍒扮紪杈戝櫒锛屼紶鍏ュ浘鐗� src 锛屾墽琛屽嚱鏁板嵆鍙� + insertImgFn(result.data.files_path) + } + } + // 閰嶇疆change浜嬩欢 + Object.assign(editor_instance.config, { + onchange(value) { + content.value = value; + emit("update:content", value); + }, + }); + // 鍒涘缓 + editor_instance.create(); + }) + watch(() => props.content, (newContent, oldContent) => { + editor_instance.txt.html(newContent); + }) + return { editor } + } +} +</script> +<style lang='scss' scoped> +</style> \ No newline at end of file diff --git a/src/hook/dialogHook.js b/src/hook/dialogHook.js new file mode 100644 index 0000000..1a018a1 --- /dev/null +++ b/src/hook/dialogHook.js @@ -0,0 +1,27 @@ +/** props */ +export const propsType = { + flag: { + type: Boolean, + default: false + }, + width: { + type: String, + default: "30%" + }, + title: { + type: String, + default: "娑堟伅" + } +} +/** 鑷畾涔塰ook */ +export function dialogHook(emit){ + /** dialog鍏抽棴 */ + const close = (form) => { + emit("update:flag", false) + // 閲嶇疆琛ㄥ崟 + form && form.value.handlerFormReset(); + }; + return { + close + }; +} \ No newline at end of file diff --git a/src/hook/infoHook.js b/src/hook/infoHook.js new file mode 100644 index 0000000..f928496 --- /dev/null +++ b/src/hook/infoHook.js @@ -0,0 +1,19 @@ +// import { reactive } from "vue"; +// // import { GetCategory } from "@/api/info"; +// /** 鑷畾涔塰ook */ +// export function categoryHook() { +// const infoData = reactive({ +// category_options: [], +// }); +// /** 鑾峰彇鍒嗙被 */ +// const handlerGetCategory = () => { +// return GetCategory().then((response) => { +// // return response.data; +// infoData.category_options = response.data; +// }); +// }; +// return { +// infoData, +// handlerGetCategory, +// }; +// } diff --git a/src/hook/permissionHook.js b/src/hook/permissionHook.js new file mode 100644 index 0000000..b27c47d --- /dev/null +++ b/src/hook/permissionHook.js @@ -0,0 +1,17 @@ +// api +// import { GetPermission } from "@a/account"; +// // store +// import { useStore } from "vuex"; +// /** 鑷畾涔塰ook */ +// export function permissionHook(){ + +// console.log(store) +// /** 鑾峰彇鍒嗙被 */ +// const getPermission = () => { + +// GetPermission().then(response => { +// store.dispatch("permission/getPermissionAction") +// }) +// }; +// return { getPermission } +// } diff --git a/src/js/data.js b/src/js/data.js new file mode 100644 index 0000000..e23c0d3 --- /dev/null +++ b/src/js/data.js @@ -0,0 +1,7 @@ +const globalData = { + whether: [ + { value: "1", label: "鏄�" }, + { value: "0", label: "鍚�" }, + ] +} +export default globalData; \ No newline at end of file diff --git a/src/js/elemCode.js b/src/js/elemCode.js new file mode 100644 index 0000000..6e266a2 --- /dev/null +++ b/src/js/elemCode.js @@ -0,0 +1,15 @@ +const elemCode = { + // 淇℃伅妯″潡 + "init:add": 'M001F001E001', // 淇℃伅 - 娣诲姞鎸夐挳 + "init:edit": 'M001F001E002', // 淇℃伅 -缂栬緫鎸夐挳 + "init:del": 'M001F001E003', // 淇℃伅 -鍒犻櫎鎸夐挳 + // 鑿滃崟妯″潡 + "menu:add": 'M002F001E001', // 鑿滃崟 - 娣诲姞鎸夐挳 + "menu:edit": 'M002F001E002', // 鑿滃崟 -缂栬緫鎸夐挳 + "menu:del": 'M002F001E003', // 鑿滃崟 -鍒犻櫎鎸夐挳 + // 瑙掕壊妯″潡 + "role:add": 'M003F001E001', // 瑙掕壊 - 娣诲姞鎸夐挳 + "role:edit": 'M003F001E002', // 瑙掕壊 -缂栬緫鎸夐挳 + "role:del": 'M003F001E003', // 瑙掕壊 -鍒犻櫎鎸夐挳 +} +export default elemCode; diff --git a/src/layout/Index.vue b/src/layout/Index.vue new file mode 100644 index 0000000..a4ea785 --- /dev/null +++ b/src/layout/Index.vue @@ -0,0 +1,43 @@ +<template> + <el-container id="layout-container"> + <el-aside id="layout-aside" :width="collapse === true ? '60px' : '250px'"><layout-aside /></el-aside> + <el-container> + <el-header id="layout-header" height="75px"><layout-header /></el-header> + <el-main id="layout-main"><layout-main /></el-main> + </el-container> + </el-container> +</template> + +<script> +import LayoutAside from "./components/Aside"; +import LayoutHeader from "./components/Header"; +import LayoutMain from "./components/Main"; +import { useStore } from "vuex"; +import { computed } from "vue"; +export default { + name: "Layout", + components: { LayoutAside, LayoutHeader, LayoutMain }, + props: {}, + setup(props){ + const store = useStore(); + const collapse = computed(() => store.state.app.collapse); + return { + collapse + } + } +} +</script> +<style lang="scss" scpoed> +#layout-container { height: 100vh; } +#layout-aside { + background-color: #344a5f; + @include webkit(transition, all .3s ease 0s); +} +#layout-header { + position: relative; + z-index: 10; + background-color: $color_main; + @include webkit(box-shadow, 0 0 10px 0 rgba(0, 0, 0, .1)); +} +#layout-main { background-color: #f7f7f7; } +</style> diff --git a/src/layout/components/Aside.vue b/src/layout/components/Aside.vue new file mode 100644 index 0000000..8a6b633 --- /dev/null +++ b/src/layout/components/Aside.vue @@ -0,0 +1,120 @@ +<template> + <h1 class="logo">濂ョ憺閲� MESS 绠$悊骞冲彴</h1> + <el-menu + :collapse="collapse" + :default-active="currentPath" + background-color="#344a5f" + text-color="#fff" + active-text-color="#ffffff" + router + > + <template v-for="item in routers" :key="item.path"> + <template v-if="!item.hidden"> + <!-- 涓�绾ц彍鍗� --> + <template v-if="hasOnlyChild(item.children)"> + <el-menu-item :index="item.children[0].path"> + <!-- <img class="menu-icon" :src="item.meta.icon" alt="" /> --> + <template #title>{{ + item.children[0].meta && item.children[0].meta.title + }}</template> + </el-menu-item> + </template> + <!-- 瀛愮骇鑿滃崟 --> + <template v-else> + <el-sub-menu + v-if="item.children && item.children.length > 0" + :index="item.path" + > + <template #title> + <span>{{ item.meta && item.meta.title }}</span> + </template> + <template v-for="child in item.children" :key="child.path"> + <el-menu-item v-if="!child.hidden" :index="child.path">{{ + child.meta && child.meta.title + }}</el-menu-item> + </template> + </el-sub-menu> + </template> + </template> + </template> + </el-menu> +</template> + +<script> +import { useRouter, useRoute } from "vue-router"; +import { reactive, computed, toRefs } from "vue"; +import { useStore } from "vuex"; +export default { + name: "Aside", + components: {}, + props: {}, + setup() { + const { options } = useRouter(); + const { path } = useRoute(); + const store = useStore(); + const routers = options.routes; + console.log(routers); + /** + * 鏁版嵁 + */ + const data = reactive({ + logo: computed(() => { + return store.state.app.collapse + ? require("@/assets/images/logo-min.png") + : require("@/assets/images/logo.png"); + }), + collapse: computed(() => store.state.app.collapse), + }); + + /** + * 鍒ゆ柇鏄惁鍙湁涓�涓瓙绾ц彍鍗� + */ + const hasOnlyChild = (children) => { + if (!children) { + return false; + } + // 瀛樺偍璺敱 + if (!children) { + return false; + } + const childRouter = children.filter((item) => { + return item.hidden ? false : true; + }); + + // 鍙湁涓�涓瓙绾ц矾鐢� + if (childRouter.length === 1) { + return true; + } + // 鍚﹀垯 + return false; + }; + /** + * 鑾峰彇褰撳墠璺敱璺緞 + */ + const currentPath = computed(() => path); + // console.log(currentPath); + return { + ...toRefs(data), + routers, + hasOnlyChild, + currentPath, + }; + }, +}; +</script> +<style lang="scss" scoped> +.logo { + padding: 20px 0; + border-bottom: 1px solid #2d4153; + color: #fff; + font-size: 24px; + font-weight: 600; + text-align: center; +} +.menu-icon { + width: 18px; + height: 18px; + display: inline-block; + margin: 0 5px 0 0; +} +</style> diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue new file mode 100644 index 0000000..0fd5946 --- /dev/null +++ b/src/layout/components/Header.vue @@ -0,0 +1,107 @@ +<template> + <div class="header-wrap"> + <div class="wrap"> + <span class="menu-btn" @click="switchAside"> + <svg-icon iconName="menuBtn" className="icon-menu-svg"></svg-icon> + </span> + </div> + <div class="wrap"> + <div class="user-info"> + <div class="face-info"> + <!-- <img src="../../assets/images/logo-min.png" alt="409019683@qq.com" /> --> + <span class="name">{{ username }}</span> + </div> + <span class="logout" @click="handlerLogout"> + <svg-icon iconName="logout" className="icon-logout"></svg-icon> + </span> + </div> + </div> + </div> +</template> + +<script> +import { ref, getCurrentInstance } from "vue"; +import { useStore } from "vuex"; +import { useRouter } from "vue-router"; +export default { + name: "Header", + components: {}, + props: {}, + setup() { + // 鑾峰彇瀹炰緥涓婁笅鏂� + const { proxy } = getCurrentInstance(); + // Vuex + const store = useStore(); + // 寮曞叆router + const { replace } = useRouter(); + // 鑿滃崟鎸夐挳 + const switchAside = () => { + store.commit("app/SET_COLLAPSE"); + }; + // 鐢ㄦ埛鍚� + const username = ref(store.state.app.username); + // 鐧诲嚭 + const handlerLogout = () => { + proxy + .$confirm("纭閫�鍑虹鐞嗗悗鍙�", "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", + }) + .then(() => { + replace({ + name: "Login", + }); + }) + .catch((error) => {}); + }; + + return { + switchAside, + handlerLogout, + username, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header-wrap { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} +.user-info { + float: right; + display: flex; + align-items: center; +} +.face-info { + span, + img { + display: inline-block; + vertical-align: middle; + } + span { + margin-left: 15px; + } +} +.logout { + display: flex; + align-items: center; + justify-content: center; + width: 75px; + height: 75px; + cursor: pointer; +} +.menu-btn { + cursor: pointer; +} // 鎵嬪娍 +.icon-menu-svg { + font-size: 24px; +} +.icon-logout { + font-size: 24px; +} +</style> diff --git a/src/layout/components/Main.vue b/src/layout/components/Main.vue new file mode 100644 index 0000000..2c4917a --- /dev/null +++ b/src/layout/components/Main.vue @@ -0,0 +1,25 @@ +<template> + <div id="main-content"> + <router-view /> + </div> +</template> + +<script> +export default { + name: "Main", + components: {}, + props: {}, + setup(){ + return {} + } +}; +</script> +<style lang="scss" scoped> +#main-content { + background-color: #fff; // 鑳屾櫙鑹� + padding: 20px; // 鍐呰竟璺濓紙4涓竟閮戒负20px锛� + min-height: 100%; // 楂樺害 + @include webkit(box-sizing, border-box); // css3闃村奖 +} + +</style> \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..c51a779 --- /dev/null +++ b/src/main.js @@ -0,0 +1,36 @@ +import { createApp } from "vue"; +import App from "./App.vue"; +import router from "./router"; +import store from "./store"; +// 瀹堝崼璺敱 +import "./router/permit"; +// elementui +// import ElementUI from "./plugins/elementui"; +import ElementPlus from "element-plus"; +import "element-plus/dist/index.css"; +// 鎵归噺瀵煎叆svg鏂囦欢 +import "@/components/svgIcon/svg"; +// svgicon +import SvgIcon from "@/components/svgIcon/Index.vue"; +// 鍏ㄥ眬鏂规硶 +import Global from "@/utils/global"; +// 鑷畾涔夋寚浠� +import directive from "./plugins/directive"; +import VForm3 from "vform3-builds"; //寮曞叆VForm3搴� +import "vform3-builds/dist/designer.style.css"; //寮曞叆VForm3鏍峰紡 +import * as ElementPlusIconsVue from "@element-plus/icons-vue"; +const app = createApp(App); + +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component); +} + +app + .use(store) + .use(router) + .use(ElementPlus) + .use(VForm3) + .use(directive) + .use(Global) + .component("svg-icon", SvgIcon) + .mount("#app"); diff --git a/src/plugins/directive.js b/src/plugins/directive.js new file mode 100644 index 0000000..6196c0c --- /dev/null +++ b/src/plugins/directive.js @@ -0,0 +1,33 @@ +import store from "../store"; +// 鍏冪礌缂栫爜 +import elemCode from "../js/elemCode"; +// 瀵煎嚭 +export default (app) => { + app.directive('has-button', { + // 鍒涘缓瀹屾垚锛氬湪缁戝畾鍏冪礌鐨� attribute 鎴栦簨浠剁洃鍚櫒琚簲鐢ㄤ箣鍓嶈皟鐢� + created() {}, + // 鎸傝浇涔嬪墠锛氬湪缁戝畾鍏冪礌鐨勭埗缁勪欢鎸傝浇涔嬪墠璋冪敤 + beforeMount(el, binding, vnode, prevVnode) {}, + // 鎸傝浇瀹屾垚锛氱粦瀹氬厓绱犵殑鐖剁粍浠惰鎸傝浇鏃惰皟鐢� + mounted(el, binding, vnode, prevVnode) { + // 鑾峰彇鍏冪礌鏉冮檺 + const elem_data = store.getters["permission/elem"]; + const user_type = store.getters["permission/user_type"]; + // 鍚﹀垯鏄潪瓒呯 + if(!elem_data) { return false } + const elems = elem_data.split(",") + const code = elemCode[binding.value] // 绛変环浜巈lemCode['init:edit'] + if(!user_type && !elems.includes(code)) { + el.parentNode.removeChild(el); + } + }, + // 鏇存柊涔嬪墠锛氬湪鍖呭惈缁勪欢鐨� VNode 鏇存柊涔嬪墠璋冪敤 + beforeUpdate() {}, + // 鏇存柊瀹屾垚锛氬湪鍖呭惈缁勪欢鐨� VNode 鍙婂叾瀛愮粍浠剁殑 VNode 鏇存柊涔嬪悗璋冪敤 + updated() {}, + // 閿�姣佷箣鍓嶏細鍦ㄧ粦瀹氬厓绱犵殑鐖剁粍浠跺嵏杞戒箣鍓嶈皟鐢� + beforeUnmount() {}, + // 閿�姣佸畬鎴愶細鍗歌浇缁戝畾鍏冪礌鐨勭埗缁勪欢鏃惰皟鐢� + unmounted() {} + }) +} \ No newline at end of file diff --git a/src/plugins/elementui.js b/src/plugins/elementui.js new file mode 100644 index 0000000..0852aa9 --- /dev/null +++ b/src/plugins/elementui.js @@ -0,0 +1,35 @@ +import { ElConfigProvider, ElSlider, ElButton, ElSwitch, ElTree, ElForm, ElFormItem, ElInput, ElSelect, ElCol , ElRow, ElMessage, ElMessageBox, ElContainer, ElAside, ElHeader,ElMain, ElMenu, ElMenuItem, ElSubMenu, ElTable, ElPagination, ElUpload, ElDatePicker, ElCascader, ElRadio, ElLoading, ElTimePicker, ElCheckbox, ElDialog, ElInputNumber } from 'element-plus'; +// 瀵煎嚭 +export default (app) => { + app.use(ElConfigProvider); + app.use(ElButton); + app.use(ElSwitch); + app.use(ElForm); + app.use(ElFormItem); + app.use(ElInput); + app.use(ElCol); + app.use(ElRow); + app.use(ElMessage); + app.use(ElMessageBox); + app.use(ElContainer); + app.use(ElAside); + app.use(ElHeader); + app.use(ElMain); + app.use(ElMenu); + app.use(ElMenuItem); + app.use(ElSubMenu); + app.use(ElSlider); + app.use(ElSelect); + app.use(ElTable); + app.use(ElPagination); + app.use(ElTree); + app.use(ElUpload); + app.use(ElDatePicker); + app.use(ElRadio); + app.use(ElLoading); + app.use(ElTimePicker); + app.use(ElCascader); + app.use(ElCheckbox); + app.use(ElDialog); + app.use(ElInputNumber); +} \ No newline at end of file diff --git a/src/router/index copy.js b/src/router/index copy.js new file mode 100644 index 0000000..060aff5 --- /dev/null +++ b/src/router/index copy.js @@ -0,0 +1,218 @@ +import { + createRouter, + createWebHashHistory, + createWebHistory, +} from "vue-router"; +export const routes = [ + { + path: "/", + redirect: "HJtable", + hidden: true, + aaa: "", + bbb: "", + }, + // 鐧诲綍 + { + path: "/login", + name: "Login", + hidden: true, + component: () => import("../views/account/Login.vue"), + }, + // 鍚庡彴棣栭〉 + { + path: "/GXtable", + name: "GXtable", + meta: { + title: "缃愮嚎鐢熶骇鎯呭喌鎶ヨ〃", + icon: "GXtable", + }, + component: () => import("../layout/Index.vue"), + children: [ + { + path: "/GXtable", + name: "GXtable", + meta: { + title: "缃愮嚎鐢熶骇鎯呭喌鎶ヨ〃", + }, + component: () => import("../views/GXtable/Index.vue"), + }, + ], + }, + // { + // path: "/system", + // name: "System", + // meta: { + // title: "(鍒剁綈鍥涚嚎)鐢熶骇鍋滄満璁板綍琛�", + // icon: "system", + // }, + // component: () => import("../layout/Index.vue"), + // children: [ + // { + // path: "/SCTJtable", + // name: "SCTJtable", + // meta: { + // title: "(鍒剁綈鍥涚嚎)鐢熶骇鍋滄満璁板綍琛�", + // }, + // component: () => import("../views/SCTJtable/Index.vue"), + // }, + + // ], + // }, + // { + // path: "/ZJBGtable", + // name: "ZJBGtable", + // meta: { + // title: "缁堟鎶ュ憡", + // icon: "information", + // }, + // component: () => import("../layout/Index.vue"), + // children: [ + // { + // path: "/ZJBGtable", + // name: "ZJBGtable", + // meta: { + // title: "缁堟鎶ュ憡", + // }, + // component: () => import("../views/ZJBGtable/Index.vue"), + // }, + // // { + // // path: "/newsCategory", + // // name: "NewsCategory", + // // meta: { + // // title: "淇℃伅鍒嗙被", + // // }, + // // component: () => import("../views/info/Category.vue"), + // // }, + // // { + // // path: "/newsDetailed", + // // name: "NewsDetailed", + // // hidden: true, + // // meta: { + // // title: "淇℃伅璇︽儏", + // // }, + // // component: () => import("../views/info/Detailed.vue"), + // // }, + // ], + // }, + { + path: "/JBJtable", + name: "JBJtable", + meta: { + title: "鍓澘鏈哄伐搴忕敓浜ф姤琛�", + icon: "information", + }, + component: () => import("../layout/Index.vue"), + children: [ + { + path: "/JBJtable", + name: "JBJtable", + meta: { + title: "鍓澘鏈哄伐搴忕敓浜ф姤琛�", + }, + component: () => import("../views/JBJtable/Index.vue"), + }, + ], + }, + { + path: "/HJtable", + name: "HJtable", + meta: { + title: "鐒婃満/鍚庨亾宸ュ簭鐢熶骇鎶ヨ〃", + icon: "information", + }, + component: () => import("../layout/Index.vue"), + children: [ + { + path: "/HJtable", + name: "HJtable", + meta: { + title: "鐒婃満/鍚庨亾宸ュ簭鐢熶骇鎶ヨ〃", + }, + component: () => import("../views/HJtable/Index.vue"), + }, + ], + }, + { + path: "/FBtable", + name: "FBtable", + meta: { + title: "缈昏竟銆佹粴绛�/灏佸彛宸ュ簭鐢熶骇鎶ヨ〃", + icon: "information", + }, + component: () => import("../layout/Index.vue"), + children: [ + { + path: "/FBtable", + name: "FBtable", + meta: { + title: "缈昏竟銆佹粴绛�/灏佸彛宸ュ簭鐢熶骇鎶ヨ〃", + }, + component: () => import("../views/FBtable/Index.vue"), + }, + ], + }, + { + path: "/JGGXtable", + name: "JGGXtable", + meta: { + title: "妫�缃愬伐搴忕敓浜ф姤琛�", + icon: "information", + }, + component: () => import("../layout/Index.vue"), + children: [ + { + path: "/JGGXtable", + name: "JGGXtable", + meta: { + title: "妫�缃愬伐搴忕敓浜ф姤琛�", + }, + component: () => import("../views/JGGXtable/Index.vue"), + }, + ], + }, + { + path: "/JGJtable", + name: "JGJtable", + meta: { + title: "闆嗙綈鏈哄伐搴忕敓浜ф姤琛�", + icon: "information", + }, + component: () => import("../layout/Index.vue"), + children: [ + { + path: "/JGJtable", + name: "JGJtable", + meta: { + title: "闆嗙綈鏈哄伐搴忕敓浜ф姤琛�", + }, + component: () => import("../views/JGJtable/Index.vue"), + }, + ], + }, + { + path: "/DBtable", + name: "DBtable", + meta: { + title: "鎵撳寘宸ュ簭鐢熶骇鎶ヨ〃", + icon: "information", + }, + component: () => import("../layout/Index.vue"), + children: [ + { + path: "/DBtable", + name: "DBtable", + meta: { + title: "鎵撳寘宸ュ簭鐢熶骇鎶ヨ〃", + }, + component: () => import("../views/DBtable/Index.vue"), + }, + ], + }, +]; + +const router = createRouter({ + history: createWebHashHistory(), + routes, +}); + +export default router; diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..494240a --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,47 @@ +import { + createRouter, + createWebHashHistory, + createWebHistory, +} from "vue-router"; +export const routes = [ + // 鏍硅矾鐢� + { + path: "/", + redirect: "Login", + hidden: true, + }, + // 鐧诲綍 + { + path: "/login", + name: "Login", + hidden: true, + + component: () => import("../views/account/Login.vue"), + }, + // 璺敱涓浆 + { + path: "/history", + name: "history", + meta: { + title: "鏁版嵁绠$悊", + }, + component: () => import("../layout/Index.vue"), + children: [ + { + path: "/history", + name: "history", + meta: { + title: "鏁版嵁绠$悊", + }, + component: () => import("../views/history/Index.vue"), + }, + ], + }, +]; + +const router = createRouter({ + history: createWebHashHistory(), + routes, +}); + +export default router; diff --git a/src/router/index_back1.js b/src/router/index_back1.js new file mode 100644 index 0000000..3922dd4 --- /dev/null +++ b/src/router/index_back1.js @@ -0,0 +1,29 @@ +import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"; +export const routes = [ + // 鏍硅矾鐢� + { + path: "/", + redirect: "Login", + hidden: true + }, + // 鐧诲綍 + { + path: "/login", + name: "Login", + hidden: true, + component: () => import("../views/account/Login.vue") + }, + // 璺敱涓浆 + { + path: "/admin", + name: "Admin", + hidden: true + } +]; + +const router = createRouter({ + history: createWebHashHistory(), + routes +}); + +export default router; diff --git a/src/router/permit.js b/src/router/permit.js new file mode 100644 index 0000000..4bae866 --- /dev/null +++ b/src/router/permit.js @@ -0,0 +1,43 @@ +import router from "./index"; +import store from "../store"; +// cookie +import { getToken } from "@u/cookies"; +// 鍏ㄥ眬鍓嶇疆瀹堝崼 +router.beforeEach((to, from, next) => { + if (!getToken()) { + if (to.name !== "Login") { + next("Login"); + } else { + next(); + } + } else { + if (store.state.permission.async_router.length === 0) { + store.dispatch("permission/getRouterAction").then((response) => { + // 鑾峰彇鍔ㄦ�佽矾鐢� + const async_router_data = store.getters["permission/async_router"]; + console.log(async_router_data); + // 鑾峰彇闈欐�佽矾鐢� + const default_router_data = router.options.routes; + // 鏇存柊闈欐�佽矾鐢� + router.options.routes = default_router_data.concat(async_router_data); + // 鏇存柊鍔ㄦ�佽矾鐢� + async_router_data.forEach((item) => { + router.addRoute(item); + }); + + if (to.name === "dataManager") { + const first_router = + async_router_data[0]?.children[0] || async_router_data[0]; + next({ ...first_router, replace: true }); + } else { + // 纭杩涘叆涓嬩竴涓矾鐢� + next({ ...to, replace: true }); + } + }); + } else { + next(); + } + } +}); +// 鍏ㄥ眬鍚庣疆瀹堝崼 +router.afterEach((to, from) => { }); diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..466d735 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,14 @@ +import { createStore } from "vuex"; +// 寮曠敤妯″潡鏂囦欢 +import app from "./modules/app"; +// import info from "./modules/info"; +import permission from "./modules/permission"; +// 鍒涘缓Vuex +export default createStore({ + modules: { + // 妯″潡鍖� + app, // 杞藉叆 app 妯″潡 + // info, + permission, + }, +}); diff --git a/src/store/modules/app.js b/src/store/modules/app.js new file mode 100644 index 0000000..8be6931 --- /dev/null +++ b/src/store/modules/app.js @@ -0,0 +1,73 @@ +//cookies +import { + setToken, + setUsername, + getUsername, + getToken, + removeToken, + removeUsername, +} from "@u/cookies"; +// api +import { Login, Logout } from "@a/account"; +const state = { + collapse: JSON.parse(sessionStorage.getItem("collapse")) || false, + token: "" || getToken(), + username: "" || getUsername(), + table_action_request: false, +}; +const getters = {}; +const mutations = { + SET_COLLAPSE(state) { + state.collapse = !state.collapse; + sessionStorage.setItem("collapse", JSON.stringify(state.collapse)); + }, + SET_TOKEN(state, value) { + // 璁剧疆 token + state.token = value; + value && setToken(value); + }, + SET_USERNAME(state, value) { + // 璁剧疆鐢ㄦ埛鍚� + state.username = value; + value && setUsername(value); + }, + SET_TABLE_REQUEST(state) { + state.table_action_request = !state.table_action_request; + }, +}; +const actions = { + loginAction(context, repuestData) { + return new Promise((resolve, reject) => { + Login(repuestData) + .then((response) => { + let data = response.result; + console.log(data); + context.commit("SET_TOKEN", data.token); + // context.commit("SET_USERNAME", data.name); + resolve(response); + }) + .catch((error) => { + reject(error); + }); + }); + }, + // 鐧诲嚭 + logoutAction({ commit }) { + return new Promise((resolve, reject) => { + Logout().then((response) => { + commit("SET_TOKEN", ""); + removeUsername(); + commit("SET_USERNAME", ""); + removeToken(); + resolve(response); + }); + }); + }, +}; +export default { + namespaced: true, + state, + getters, + mutations, + actions, +}; diff --git a/src/store/modules/info.js b/src/store/modules/info.js new file mode 100644 index 0000000..4fbe08f --- /dev/null +++ b/src/store/modules/info.js @@ -0,0 +1,22 @@ +// api +// import { GetCategory } from "@/api/info";; +// const state = {}; +// const getters = {} +// const mutations = {} +// const actions = { +// categoryAction() { +// return new Promise((resolve, reject) => { +// GetCategory().then(response => { +// resolve(response.data) +// }) +// }) +// } +// } + +// export default { +// namespaced: true, +// state, +// getters, +// mutations, +// actions +// }; diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js new file mode 100644 index 0000000..c599011 --- /dev/null +++ b/src/store/modules/permission.js @@ -0,0 +1,123 @@ +import { shallowRef } from 'vue' +// API +import { GetPermission } from "@a/account"; +// utils +import { formatTree } from "@/utils/format"; +import axios from "axios"; +/** 鏍煎紡鍖栬彍鍗曟暟鎹敓鎴愯矾鐢� */ +const formatRouterMenu = (data) => { + // 妫�娴嬫暟鎹槸鍚﹀瓨鍦� + if (data && (!Array.isArray(data) || data.length === 0)) { + return false; + } + + data.map((item) => { + if (item.component) { + item.component = shallowRef(require(`@/views/${item.component}`).default) + } + + if (item.children) { + formatRouterMenu(item.children) + } + return item + }) + return data + // 鐩戝惉瀛樺偍鏁版嵁 + // const router = []; + // 閬嶅巻鑿滃崟 + // data.forEach((item) => { + // const router_obj = {}; + // // id + // router_obj.id = item.id; + + // // path + // router_obj.path = item.path; + // // name + // router_obj.name = item.router; + // // hidden + // if (item.hidden === "1") { + // router_obj.hidden = true; + // } + // // redirect + // if (item.redirect) { + // router_obj.redirect = item.redirect; + // } + // router_obj.parent_id = item.parent_id; + // if (item.children) { + // router_obj.children = item.children; + // } + + // // meta + // router_obj.meta = { + // // 鑿滃崟鍚嶇О + // title: item.name, + // // 鑿滃崟鍥炬爣 + // icon: item.icon, + // // 鏄惁缂撳瓨椤甸潰 + // keepAlive: item.keep === "1" ? true : false, + // }; + // // component + // router_obj.component = shallowRef(require(`@/${item.component}`).default); + + // 娣诲姞鑷硆outer鏁扮粍 + // router.push(router_obj); + // }); + // 鏍戠姸鏍煎紡鍖� + // const tree_data = formatTree(router, "id", "parent_id", "children", 0); + // 杩斿洖鏁版嵁 + // return tree_data; +}; + +const state = { + async_router: [], + elem: "", + user_type: "", +}; +const getters = { + async_router: (state) => state.async_router, + elem: (state) => state.elem, + user_type: (state) => state.user_type, +}; +const mutations = { + SET_ROUTER(state, value) { + state.async_router = value; + }, + SET_ELEM(state, value) { + state.elem = value; + }, + SET_USERTYPE(state, value) { + state.user_type = value; + }, +}; +const actions = { + getRouterAction(context) { + return new Promise((resolve, reject) => { + GetPermission() + .then((response) => { + const data = response.result.menu; + let menuData = data.filter(item => { + return item.route === '1' + }); + // 鏍煎紡鍖栬彍鍗曟暟鎹敓鎴愯矾鐢� + const menu = formatRouterMenu(menuData); + // 瀛樺偍璺敱 + context.commit("SET_ROUTER", menu); + // 瀛樺偍鍏冪礌鏉冮檺 + // context.commit("SET_ELEM", response.data.elem_data); + // 鏇存柊鐢ㄦ埛绫诲瀷 + // context.commit("SET_USERTYPE", response.data.user); + resolve(response); + }) + .catch((error) => { + reject(error); + }); + }); + }, +}; +export default { + namespaced: true, + state, + getters, + mutations, + actions, +}; diff --git a/src/styles/elementui.scss b/src/styles/elementui.scss new file mode 100644 index 0000000..e999205 --- /dev/null +++ b/src/styles/elementui.scss @@ -0,0 +1,34 @@ +.el-button-block { + display: block; + width: 100%; +} +#layout-aside .el-menu { + border-right: none; +} +/* 瀵艰埅鑿滃崟楂樹寒 */ +.is-active { background-color: rgba(254, 108, 108, .2) !important; } +.is-opened { + // .el-sub-menu__title { background-color: #f56c6c !important; } +} +.el-form-item__content { display: block; } +/*涓婁紶缁勪欢*/ +.avatar-uploader { + overflow: hidden; + img { width: 100%; } + .el-upload { + border: 1px dashed #d9d9d9; + border-radius: 6px; + cursor: pointer; + position: relative; + overflow: hidden; + width: 150px; + height: 150px; + display: flex; + align-items: center; + justify-content: center; + font-size: 30px; + } +} +/* 鏃ユ湡缁勪欢 z-index */ +.el-popper { z-index: 10002 !important; } +.va-top { vertical-align: top; } \ No newline at end of file diff --git a/src/styles/icon.scss b/src/styles/icon.scss new file mode 100644 index 0000000..9346428 --- /dev/null +++ b/src/styles/icon.scss @@ -0,0 +1,9 @@ +.aside-menu-svg { + margin-right: 5px; + margin-top: -2px; + font-size: 18px; +} + +.icon-logo { + background: url("~@/assets/images/logo.png") no-repeat; +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000..4895163 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,14 @@ +@import "./sassConfig.scss"; +@import "./normalize.scss"; +@import "./elementui.scss"; +@import "./icon.scss"; + +/* float */ +.pull-right { float: right; } + +/* margin */ +.margin-top-20 { margin-top: 20px; } +.margin-top-10 { margin-top: 10px; } +/* text-color */ +.text-white { color: white; } + diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss new file mode 100644 index 0000000..e9f7ff3 --- /dev/null +++ b/src/styles/normalize.scss @@ -0,0 +1,375 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + /* div鐨勯粯璁ゆ牱寮忎笉瀛樺湪padding鍜宮argin涓�0鐨勬儏鍐�*/ + html, body, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, + fieldset, form, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + font-family: 'Microsoft YaHei'; + font-size: 14px; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + text-decoration: none; + } + + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + display: block; + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } + + ul, li { list-style: none; } \ No newline at end of file diff --git a/src/styles/sassConfig.scss b/src/styles/sassConfig.scss new file mode 100644 index 0000000..9fcacd5 --- /dev/null +++ b/src/styles/sassConfig.scss @@ -0,0 +1,10 @@ +$color_main: white; // 瀹氫箟 + +@mixin webkit($attr, $value){ + -webkit-#{$attr}: $value; + -moz-#{$attr}: $value; + -o-#{$attr}: $value; + -ms-#{$attr}: $value; + #{$attr}: $value; +} + \ No newline at end of file diff --git a/src/utils/common.js b/src/utils/common.js new file mode 100644 index 0000000..c1241c4 --- /dev/null +++ b/src/utils/common.js @@ -0,0 +1,49 @@ +/** + * @param { String } value 鏃堕棿鐨勫�� + * @param { String } type + * @param { Boolean } br true鎹㈣銆乫alse榛樿 + * @param { String } conn 浠绘剰瀛楃 + * @returns 鏃ユ湡鏍煎紡鍖� + */ +export function getDate(params){ + const new_date = params.value ? new Date(params.value) : new Date(); + let year = new_date.getFullYear(); //骞� + let month = new_date.getMonth() + 1; //鏈� + let day = new_date.getDate(); //鏃� + let hh = new_date.getHours(); //鏃� + let mm = new_date.getMinutes(); //鍒� + let ss = new_date.getSeconds(); //鍒� + if(month < 10) { month = `0${month}`; } + if(day < 10) { day = `0${day}`; } + if(hh < 10) { hh = `0${hh}`; } + if(mm < 10) { mm = `0${mm}`; } + if(ss < 10) { ss = `0${ss}`; } + // 杩炴帴绗� + const conn = params.connDate || "-"; + // 鏍煎紡鍖� + const br = params.br ? "<br />" : " "; + const date = `${year}${conn}${month}${conn}${day}`; + const time = `${hh}:${mm}:${ss}`; + // 浠呮棩鏈� + if(params.type === "date") { return date; } + // 浠呮椂闂� + if(params.type === "time") { return time; } + // 鏁翠綋 + return `${date}${br}${time}`; +} + +/** + * @param { Function } fun 鎵ц鐨勫嚱鏁� + * @param { Number } time 寤舵椂鎵ц鏃堕棿锛岄粯璁�500姣 + * @returns 闃叉姈鍑芥暟 + */ + export function debounce(fun, time = 500) { + let timer; + return function() { + let args = arguments; + if (timer) clearTimeout(timer); + timer = setTimeout(() => { + fun.apply(this, args) + }, time) + } +} \ No newline at end of file diff --git a/src/utils/cookies.js b/src/utils/cookies.js new file mode 100644 index 0000000..7b5d511 --- /dev/null +++ b/src/utils/cookies.js @@ -0,0 +1,18 @@ +import Cookies from "js-cookie"; +// 鍙橀噺 +const tokenKey = "tokenAdmin"; +const userNameKey = "username"; + +// 鑾峰彇token +export function getToken(){ return Cookies.get(tokenKey); } +// 鍐欏叆token +export function setToken(value){ Cookies.set(tokenKey, value); } +// 鍒犻櫎token +export function removeToken(){ Cookies.remove(tokenKey); } + +// 鑾峰彇userName +export function getUsername(){ return Cookies.get(userNameKey); } +// 鍐欏叆userName +export function setUsername(value){ Cookies.set(userNameKey, value); } +// 鍒犻櫎userName +export function removeUsername(){ Cookies.remove(userNameKey); } diff --git a/src/utils/format.js b/src/utils/format.js new file mode 100644 index 0000000..e934aa1 --- /dev/null +++ b/src/utils/format.js @@ -0,0 +1,42 @@ +/** + * @param { responseData } Object 璇锋眰鍙傛暟鏁版嵁 + * @param { formData } Object Form琛ㄥ崟瀛楁 + * @returns 鏋氫妇鍖归厤key + */ +export function formatRequestData(responseData, formData){ + // 鍒ゆ柇鏄惁鏈夊�煎瓨鍦� + if(JSON.stringify(responseData) === "{}") { return false; } + // 鑾峰彇form琛ㄥ崟瀛楁鐨勬墍鏈塳ey + const keys = Object.keys(responseData); + // 绌篔SON瀵硅薄锛屽瓨鍌ㄨ繃婊ゅ嚭鏉ョ殑鏁版嵁 + const data_json = {}; + // 鎵ц瀛楁鍖归厤 + for(let key in formData) { + if(keys.includes(key) && formData.hasOwnProperty(key)) { + data_json[key]= responseData[key]; + } + } + // 杩斿洖澶勭悊鍚庣殑鏁版嵁 + return data_json; +} + +/** + * + * @returns 閫掑綊鍑芥暟鏍煎紡鍖栨爲鐘惰彍鍗� + */ + export function formatTree(data, id = "id", pid = "parent_id", child = "children", root){ + const tree = []; + if(data && data.length > 0) { + data.forEach(item => { + // 鑾峰彇椤跺眰鑿滃崟锛宲arent_id === 0 + if(item[pid] === root) { + const children = formatTree(data, id, pid, child, item[id]); + if(children) { + item[child] = children; + } + tree.push(item); + } + }) + } + return tree; +} \ No newline at end of file diff --git a/src/utils/global.js b/src/utils/global.js new file mode 100644 index 0000000..2ae6d71 --- /dev/null +++ b/src/utils/global.js @@ -0,0 +1,59 @@ +// Element Plus +import { ElMessageBox } from 'element-plus'; +// 鍛藉悕绌洪棿 +const globalFunction = {} +/** + * @param { message } String 鍐呭锛屽彲閫� + * @param { title } String 鏍囬锛屽彲閫� + * @param { thenFun } Function 鍥炶皟鍑芥暟锛屽彲閫� + * @description 纭寮圭獥 + */ +globalFunction.deleteConfirm = (params) => { + ElMessageBox.confirm(params.message || '纭鍒犻櫎褰撳墠鏁版嵁鍚楋紵鍒犻櫎鍚庡皢鏃犳硶鎭㈠', params.title || '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + showClose: false, // 鍙栨秷鍙充笂瑙掑叧闂寜閽� + closeOnClickModal: false, // 鍙栨秷鐐瑰嚮閬僵鍏抽棴 MessageBox + closeOnPressEscape: false, // 鍙栨秷鎸変笅ESC閿叧闂璏essageBox + type: 'warning', + beforeClose: (action, instance, done) => { + globalFunction.deleteConfirmObj = { instance, done }; + if(action === "confirm") { + // 鎸夐挳鍔犺浇鐘舵�� + globalFunction.confirmButtonLoading(true); + // 鍒ゆ柇thenFun瀛樺湪骞朵笖鏄疐unction绫诲瀷锛屾槸鍒欒嚜鍔ㄦ墽琛屽嚱鏁� + params.thenFun && Object.prototype.toString.call(params.thenFun) === "[object Function]" && params.thenFun(); + }else{ + globalFunction.deleteConfirmClose(); + } + } + }).then(()=>{}).catch(()=>{}) + +} +/** + * @param { bool } Boolean 鍔犺浇鐘舵�侊紝鍙�� + * @description 寮圭獥纭鎸夐挳鍔犺浇鐘舵�� + */ +globalFunction.confirmButtonLoading = (bool) => { + globalFunction.deleteConfirmObj.instance.confirmButtonLoading = bool; +} + /** + * @param {*} params + */ +globalFunction.deleteConfirmClose = () => { + globalFunction.deleteConfirmObj.done(); + globalFunction.deleteConfirmObj = null; +} +/** 鍑芥暟2 */ +globalFunction.message = (params) => { + console.log(params) +} + +export default { + install(app){ + app.config.globalProperties["deleteConfirm"] = globalFunction.deleteConfirm; + app.config.globalProperties["deleteConfirmClose"] = globalFunction.deleteConfirmClose; + app.config.globalProperties["confirmButtonLoading"] = globalFunction.confirmButtonLoading; + app.config.globalProperties["message"] = globalFunction.message; + } +} \ No newline at end of file diff --git a/src/utils/print.js b/src/utils/print.js new file mode 100644 index 0000000..cad6101 --- /dev/null +++ b/src/utils/print.js @@ -0,0 +1,35 @@ +//id 鏄綘瑕佹墦鍗扮殑鏌愪釜dom鍏冪礌鐨刬d鍚� +export function printExcel(id) { + // 绌洪〉闈� + let printStr = + "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>"; + // 瀹氫箟element-ui table缁勪欢鐨勬牱寮� + const tabStyle = `<style> + table{width:100%;display:table-cell!important;box-sizing:border-box;} + .el-table__header,.el-table__body,.el-table__footer{width:100%!important;border-collapse: collapse;text-align:center;} + table,table tr th, table tr td { border:1px solid #ddd;color:#606266;word-wrap:break-word} + table tr th,table tr td{padding:4mm 0mm;word-wrap:break-word } + .el-table__body, tr td .cell{width:100%!important} + .el-table th.gutter{display: none;} + .el-table colgroup.gutter{display: none;} + .CZtd{display: none;} + </style><body>`; + let content = ""; + // 鑾峰彇鍚嶄负浼犲叆id鐨� dom鍏冪礌鍐呯殑鍐呭 + let str = document.getElementById(id).innerHTML; + // 鎷兼帴绌洪〉闈�+style鏍峰紡+dom鍐呭 + content = content + str; + printStr = printStr + tabStyle + content + "</body></html>"; + // 鎵撳紑鏂伴〉闈� + let pwin = window.open("_blank"); + // 灏嗗唴瀹硅祴鍊煎埌鏂伴〉闈� + pwin.document.write(printStr); + pwin.document.close(); + // 鑱氱劍-涓嶅姞focuse锛屽湪鏌愪簺鎯呭喌涓嬶紝鎵撳嵃椤甸潰浼氭湁闂銆� + pwin.focus(); + // 浣跨敤setTimeout锛岀瓑椤甸潰dom鍏冪礌娓叉煋瀹屾垚鍚庡啀鎵撳嵃銆� + setTimeout(() => { + pwin.print(); // 鎵撳嵃鍔熻兘銆� 渚嬪 window.print() 鐩存帴鎵撳嵃褰撳墠鏁翠釜椤甸潰銆� + pwin.close(); // 鍏抽棴 鎵撳嵃鍒涘缓鐨勫綋鍓嶉〉闈� + }, 500); +} diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 0000000..86b16ca --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,76 @@ +import axios from "axios"; +// cookies +import { + getToken, + getUsername, + removeToken, + removeUsername, +} from "@/utils/cookies"; // 杩欐槸灏佽濂界殑鏂规硶 +// ElementUI 鍗曠嫭寮曞叆 +import { ElMessage } from "element-plus"; +// vue-router +import router from "@/router"; +// 鍒涘缓瀹炰緥 +const instance = axios.create({ + baseURL: process.env.VUE_APP_API, // 璇锋眰鍦板潃 + timeout: 5000, // 瓒呮椂 +}); + +// 鎷︽埅鍣� +// 娣诲姞璇锋眰鎷︽埅鍣� +instance.interceptors.request.use( + function (config) { + // 鍦ㄥ彂閫佽姹備箣鍓嶅仛浜涗粈涔� + // if (getToken()) { + config.headers["Authorization"] = getToken(); // 鎼哄甫token + config.headers["X-Access-Token"] = getToken(); // 鎼哄甫token + // } + // if (getUsername()) { + // config.headers["Username"] = getUsername(); // 鎼哄甫鐢ㄦ埛鍚� + // } + return config; + }, + function (error) { + // 瀵硅姹傞敊璇仛浜涗粈涔� + return Promise.reject(error); + } +); +// 娣诲姞鍝嶅簲鎷︽埅鍣� +instance.interceptors.response.use( + function (response) { + // 瀵瑰搷搴旀暟鎹仛鐐逛粈涔� + const data = response.data; + if (data.message == null && data.msg == null) data.message = "鎿嶄綔澶辫触"; + if (data.code !== 0 && data.code !== 200) { + ElMessage({ + message: data.message, + type: "error", + }); + return [];//Promise.reject(data); + } else { + return data; + } + }, + function (error) { + console.log("err response", error.request.response); + const errorData = error.request.response; + if (errorData.message) { + ElMessage({ + message: errorData.message, + type: "error", + }); + } + // token澶辨晥鑷姩閫�鍑� + if (error.request.status ==401) { + router.replace({ + name: "Login", + }); + removeToken(); + removeUsername(); + } + // 瀵瑰搷搴旈敊璇仛鐐逛粈涔� + return Promise.reject(errorData); + } +); +// 鏆撮湶instance +export default instance; diff --git a/src/utils/validate.js b/src/utils/validate.js new file mode 100644 index 0000000..9b55831 --- /dev/null +++ b/src/utils/validate.js @@ -0,0 +1,40 @@ +// 鏍¢獙閭 +export function validate_email(value){ + let regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; + return regEmail.test(value); +} + +// 鏍¢獙瀵嗙爜 +export function validate_password(value){ + let regPassword = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/; + return regPassword.test(value); +} + +// 鏍¢獙楠岃瘉鐮� +export function validate_code(value){ + let regCode = /^[a-z0-9]{6}$/; + return regCode.test(value); +} + + +// 瀵嗙爜鏍¢獙 +export function checkPassword(rule, value, callback, source, options) { + if(!value || value === ""){ + callback(new Error("璇疯緭鍏ョ敤瀵嗙爜")); + }else if(!validate_password(value)) { + callback(new Error("璇疯緭鍏�>=6骞朵笖<=20浣嶇殑瀵嗙爜锛屽寘鍚暟瀛椼�佸瓧姣�")); + } else { + callback(); + } +} + +// 鐢ㄦ埛鍚嶆牎楠� +export function checkUser(rule, value, callback, source, options) { + if(!value || value === ""){ + callback(new Error("璇疯緭鍏ョ敤鎴峰悕")); + }else if(!validate_email(value)) { + callback(new Error("閭鏍煎紡涓嶆纭�")); + } else { + callback(); + } +} \ No newline at end of file diff --git a/src/views/About.vue b/src/views/About.vue new file mode 100644 index 0000000..3fa2807 --- /dev/null +++ b/src/views/About.vue @@ -0,0 +1,5 @@ +<template> + <div class="about"> + <h1>This is an about page</h1> + </div> +</template> diff --git a/src/views/Bianxk/Index.vue b/src/views/Bianxk/Index.vue new file mode 100644 index 0000000..f0123f0 --- /dev/null +++ b/src/views/Bianxk/Index.vue @@ -0,0 +1,361 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button + type="primary" + circle + v-show="!editable" + @click="editable = !editable" + >缂栬緫</el-button + > + <el-button type="primary" v-show="editable" @click="saveData" + >纭畾</el-button + > + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>绾胯竟搴撹褰�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + + <!-- <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>鍥涚嚎</span> + </div> --> + </div> + <el-divider /> + + <el-table + :data="SClist" + style="width: 100%" + :header-cell-style="{ 'text-align': 'center', fontSize: '20px' }" + > + <el-table-column label="绾胯竟搴撹褰�"> + <!-- <el-table-column + :prop="item.prop" + :label="item.label" + :key="index" + v-if="item" + > --> + <template v-for="(item, index) in tableHeader"> + <el-table-column + :prop="item.prop" + :label="item.label" + :key="index" + v-if="item" + > + </el-table-column> + </template> + + <el-table-column label="鎿嶄綔" class-name="CZtd"> + <template #default="scope"> + <el-button + v-show="!scope.row.editable" + size="small" + @click="scope.row.editable = true" + >缂栬緫</el-button + > + <el-button + v-show="scope.row.editable" + size="small" + type="success" + @click="scope.row.editable = false" + >纭畾</el-button + > + <!-- <el-button + size="small" + type="danger" + @click="handleDelete(scope.$index)" + >鍒犻櫎</el-button + > --> + </template> + </el-table-column> + </el-table-column> + </el-table> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { bainxkVoList, save } from "@/api/BXKapi"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +export default { + name: "", + components: {}, + props: {}, + setup(props) { + const tableHeader = reactive([ + { + prop: "chanxian", + label: "浜х嚎", + editable: false, + type: "text", + }, + + { + prop: "chanxianName", + label: "浜х嚎鍚嶇О", + editable: false, + type: "input", + }, + { + prop: "pihao", + label: "鎵瑰彿", + editable: false, + type: "input", + }, + { + prop: "鏉愭枡", + label: "鏉愭枡", + editable: false, + type: "text", + }, + { + prop: "cailiaoNum", + label: "鏉愭枡鏁伴噺", + editable: false, + type: "input", + }, + { + prop: "cailiaoNum2", + label: "鏉愭枡鏁伴噺2", + editable: false, + type: "input", + }, + { + prop: "cailiaoNum3", + label: "鏉愭枡鏁伴噺3", + editable: false, + type: "input", + }, + ]); + + let tableData = reactive([]); + + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + let hanjiRdData = reactive({ + bainxkVoList: {}, + }); + let SClist = ref([]); + let hjData = ref({}); + let ssList = ref([]); + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await bainxkVoList(); + headData.head = data.data.head; + hanjiRdData.bainxkVoList = data.data.bainxkVoList; + + hjData.value = { + ...headData.head, + ...hanjiRdData.bainxkVoList, + }; + + // tableHeader.forEach(e=>{ + // // SClist.push({e.}) + // }) + + SClist.value = data.data.bainxkVoList; + + // console.log(SClist); + }; + + const saveData = async () => { + editable = false; + + let data = { + bainxkVoList: SClist.value, + + head: headData.head, + }; + // console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + // console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("hj.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + // table: hanjiRdData.hanjiRd, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + // console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + getListData(); + onMounted(() => {}); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + tableHeader, + getListData, + headData, + toImage, + imageWrapper, + SClist, + ssList, + exportWord, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/DBtable/Index.vue b/src/views/DBtable/Index.vue new file mode 100644 index 0000000..e18ffeb --- /dev/null +++ b/src/views/DBtable/Index.vue @@ -0,0 +1,439 @@ +<template> + <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button + type="primary" + circle + v-show="!editable" + @click="editable = !editable" + >缂栬緫</el-button + > + <el-button type="primary" v-show="editable" @click="saveData" + >纭畾</el-button + > + </div> + <div id="printContent" ref="imageWrapper"> + <h3>鎵撳寘宸ュ簭鐢熶骇璐ㄩ噺璁板綍</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime1 }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + + <!-- <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>鍥涚嚎</span> + </div> --> + </div> + <el-divider /> + <HJTABLE + :SClist="ssList" + :tableHeader="scHeader" + :labelName="labelName.b1" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="ssList" + :tableHeader="sc2Header" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="ssList" + :tableHeader="sc3Header" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="SClist" + :tableHeader="tableHeader" + :labelName="labelName.b2" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { dabaoVoLast, save } from "@/api/DBapi"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const tableHeader = reactive([ + { + prop: "rdTime1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "pihao", + label: "鎵瑰彿", + editable: false, + type: "input", + }, + { + prop: "baohao", + label: "鍖呭彿", + editable: false, + type: "input", + }, + { + prop: "waiguan", + label: "澶栬锛堝洓闈級", + editable: false, + type: "text", + }, + { + prop: "chanraomoSj", + label: "缂犵粫鑶滄澗绱у害", + editable: false, + type: "input", + }, + { + prop: "dabaoSj", + label: "鎵撳寘甯︽澗绱у害", + editable: false, + type: "input", + }, + ]); + const scHeader = reactive([ + { + prop: "kongqiYl", + label: "绌烘皵鍘嬪姏", + editable: false, + type: "text", + }, + { + prop: "dabaodai", + label: "鎵撳寘甯﹀巶瀹�", + editable: false, + type: "input", + }, + { + prop: "dabaodaiGg", + label: "瑙勬牸", + editable: false, + type: "input", + }, + { + prop: "dabaodaiNum", + label: "鏁伴噺", + editable: false, + type: "text", + }, + ]); + const sc2Header = reactive([ + { + prop: "chengpinBh", + label: "鎴愬搧鍖呮暟", + editable: false, + type: "text", + }, + { + prop: "chanraomo", + label: "鎵撳寘甯﹀巶瀹�", + editable: false, + type: "input", + }, + { + prop: "chanraomoGg", + label: "瑙勬牸", + editable: false, + type: "input", + }, + { + prop: "chanraomoNum", + label: "鏁伴噺", + editable: false, + type: "text", + }, + ]); + const sc3Header = reactive([ + { + prop: "feipinTj", + label: "搴熷搧缁熻", + editable: false, + type: "text", + }, + ]); + + let tableData = reactive([]); + + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + let hanjiRdData = reactive({ + dabaoZhiliangRdList: {}, + dabaoRd: {}, + }); + let SClist = ref([]); + let hjData = ref({}); + let ssList = ref([]); + let sc35 = []; + let sc70 = []; + let labelName = { + b1: "鐢熶骇璁板綍", + + b2: "璐ㄩ噺璁板綍", + b3: "搴熷搧缁熻", + }; + let editable = ref(false); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await dabaoVoLast(); + parse(data); + }; + function parse(data) { + headData.head = data.data.head; + headData.head.reportTime1 = headData.head.reportTime.substr(0, 10); + + SClist.value = data.data.dabaoZhiliangRdList; + + SClist.value.filter((item) => { + if (item != null && item.rdTime != null) + //杩欓噷鐢ㄤ复鏃跺悕绉帮紝涓嶄慨鏀瑰師濮嬪�硷紝閬垮厤鏇存柊鏃讹紝瀛楁寮傚父 + item.rdTime1 = item.rdTime.substr(11, 5); + + return item; + }); + + ssList.value = [data.data.dabaoRd]; + + hjData.value = { + ...headData.head, + ...data.data.dabaoRd, + t1: sc35.value, + t2: sc70.value, + }; + } + //鎴浘 + const saveData = async () => { + editable = false; + + let data = { + dabaoZhiliangRdList: SClist.value, + dabaoRd: ssList.value[0], + + head: headData.head, + }; + console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鎵撳寘宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("db.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + // table: hanjiRdData.hanjiRd, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鎵撳寘宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + getRouterData, + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + tableHeader, + scHeader, + sc2Header, + sc3Header, + getListData, + headData, + toImage, + imageWrapper, + SClist, + ssList, + exportWord, + labelName, + editable, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/FBtable/Index.vue b/src/views/FBtable/Index.vue new file mode 100644 index 0000000..ab1b8a3 --- /dev/null +++ b/src/views/FBtable/Index.vue @@ -0,0 +1,703 @@ +<template> + <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button + type="primary" + circle + v-show="!editable" + @click="editable = !editable" + >缂栬緫</el-button + > + <el-button type="primary" v-show="editable" @click="saveData" + >纭畾</el-button + > + </div> + <div id="printContent" ref="imageWrapper"> + <h3>缈昏竟銆佹粴绛�/灏佸彛宸ュ簭鐢熶骇璐ㄩ噺璁板綍</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime1 }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + + <!-- <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>鍥涚嚎</span> + </div> --> + </div> + <el-divider /> + + <HJTABLE + :SClist="SClist" + :tableHeader="tableHeader" + :labelName="labelName.b1" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="ytfpData" + :tableHeader="ytfpHeader" + :labelName="labelName.b2" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="fbfpData" + :tableHeader="fbfpHeader" + :labelName="labelName.b3" + :editable="editable" + ></HJTABLE> + + <div> + <el-row> + <el-col :span="8"> + <HJTABLE + :SClist="zlList" + :tableHeader="zlHeader" + :labelName="labelName.b4" + :editable="editable" + ></HJTABLE> + </el-col> + <el-col :span="8"> + <HJTABLE + :SClist="zl2List" + :tableHeader="zl2Header" + :labelName="labelName.b4" + :editable="editable" + ></HJTABLE> + </el-col> + <el-col :span="8"> + <HJTABLE + :SClist="zl2List" + :tableHeader="zl2Header" + :labelName="labelName.b4" + :editable="editable" + ></HJTABLE> + </el-col> + </el-row> + </div> + <HJTABLE + :SClist="clList" + :tableHeader="clHeader" + :labelName="labelName.b4" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { fanbianVoLast, save } from "@/api/FBapi"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport, getDate, getTime } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const clHeader = reactive([ + { + prop: "shijian1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "jitou", + label: "鏈哄ご", + editable: false, + type: "input", + }, + { + prop: "kuandu", + label: "缈昏竟瀹藉害", + editable: false, + type: "input", + }, + { + prop: "fengkouGg", + label: "灏佸彛鍚庣綈楂�", + editable: false, + type: "text", + }, + { + prop: "juanbianHd", + label: "鍗疯竟鍘氬害", + editable: false, + type: "input", + }, + { + prop: "juanbianKd", + label: "鍗疯竟瀹藉害", + editable: false, + type: "input", + }, + + { + prop: "guangouCd", + label: "缃愰挬闀垮害", + editable: false, + type: "input", + }, + { + prop: "gaigouCd", + label: "鐩栭挬闀垮害", + editable: false, + type: "input", + }, + { + prop: "jinmidu", + label: "绱у瘑搴︽爣鍑�", + editable: false, + type: "text", + }, + ]); + const zlHeader = reactive([ + { + prop: "jitouDate1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "jitou", + label: "婊氱瓔鏈哄ご", + editable: false, + type: "input", + }, + { + prop: "waiguan", + label: "澶栬", + editable: false, + type: "input", + }, + ]); + const zl2Header = reactive([ + { + prop: "jitouDate1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "jitou", + label: "灏佸彛鏈哄ご", + editable: false, + type: "input", + }, + { + prop: "waiguan", + label: "鍗峰皝澶栬璐ㄩ噺", + editable: false, + type: "input", + }, + ]); + const ytfpHeader = reactive([ + { + prop: "total", + label: "鍗伴搧搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + { + prop: "chongyingNum", + label: "閲嶅嵃", + editable: false, + type: "input", + }, + { + prop: "zazhidianNum", + label: "鏉傝川鐐�", + editable: false, + type: "input", + }, + { + prop: "moranNum", + label: "澧ㄦ煋", + editable: false, + type: "input", + }, + { + prop: "louyinNum", + label: "婕忓嵃", + editable: false, + type: "input", + }, + { + prop: "sechaNum", + label: "鑹插樊", + editable: false, + type: "input", + }, + { + prop: "neiyinseNum", + label: "鍐呭嵃鑹�", + editable: false, + type: "input", + }, + + { + prop: "waituzouweiNum", + label: "澶栨秱璧颁綅", + editable: false, + type: "input", + }, + + { + prop: "neiwaitucashangNum", + label: "鍐呭娑傛摝浼�", + editable: false, + type: "input", + }, + { + prop: "namePihaoValue", + label: "浜у搧鍚嶇О/鎵瑰彿", + editable: false, + type: "input", + }, + ]); + + const fbfpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + { + prop: "kaguanNum", + label: "鍗$綈", + editable: false, + type: "input", + }, + { + prop: "yahenNum", + label: "鍘嬬棔", + editable: false, + type: "input", + }, + { + prop: "huashangNum", + label: "鍒掍激", + editable: false, + type: "input", + }, + { + prop: "youguanNum", + label: "娌圭綈", + editable: false, + type: "input", + }, + { + prop: "shuanggaiNum", + label: "鍙岀洊", + editable: false, + type: "input", + }, + { + prop: "choujianNum", + label: "鎶芥", + editable: false, + type: "input", + }, + { + prop: "guanjinblNum", + label: "婊氱瓔涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "fengkoublNum", + label: "灏佸彛涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "namePihaoValue", + label: "浜у搧鍚嶇О/鎵瑰彿", + editable: false, + type: "input", + }, + ]); + const tableHeader = reactive([ + { + prop: "gaichang", + label: "鐩栧巶瀹�", + editable: false, + type: "input", + }, + { + prop: "riqi", + label: "鏃ユ湡", + editable: false, + type: "text", + }, + { + prop: "shengchanphBh", + label: "鐢熶骇鎵瑰彿-鏉垮彿", + editable: false, + type: "input", + }, + { + prop: "shuliang", + label: "鏁伴噺(鐗�/鏉�)", + editable: false, + type: "text", + }, + { + prop: "shijishuliang", + label: "瀹為檯浣跨敤鏁伴噺", + editable: false, + type: "input", + }, + { + prop: "chashu", + label: "宸暟", + editable: false, + type: "input", + }, + , + { + prop: "shiyong", + label: "浣跨敤鎯呭喌", + editable: false, + type: "input", + }, + ]); + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + let hanjiRdData = reactive({ + fanbianRdList: {}, + feipinYintie: {}, + feipinFanbian: {}, + fanbianZhiliangRdList: {}, + fanbianZhiliangRd2List: {}, + fanbianClList: {}, + fanbianClFw: {}, + }); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "搴熷搧缁熻", + b3: "鐢熶骇搴熷搧", + b4: "璐ㄩ噺璁板綍", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let ytfpData = ref([]); + let fbfpData = ref([]); + + let zlList = ref([]); + let zl2List = ref([]); + + let clList = ref([]); + let clfwData = ref([]); + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await fanbianVoLast(); + parse(data); + }; + function parse(data) { + headData.head = data.data.head; + headData.head.reportTime1 = getDate(headData.head.reportTime); + hanjiRdData.fanbianRdList = data.data.fanbianRdList; + + hjData.value = { ...headData.head, ...hanjiRdData.fanbianRdList }; + + SClist.value = data.data.fanbianRdList; + ytfpData.value = [data.data.feipinYintie]; + fbfpData.value = [data.data.feipinFanbian]; + + zlList.value = data.data.fanbianZhiliangRdList; + zl2List.value = data.data.fanbianZhiliangRd2List; + + clList.value = data.data.fanbianClList; + clfwData.value = [data.data.fanbianClFw]; + console.log("clfwData.....", clfwData); + + zlList.value.filter((item) => { + if (item != null) item.jitouDate1 = item.jitouDate.substr(11, 5); + + return item; + }); + zlList.value.filter((item) => { + if (item != null) { + if (item.waiguan == 1) { + item.good = "濂�"; + } else { + item.bad = "鍧�"; + } + } + + return item; + }); + zl2List.value.filter((item) => { + if (item != null) item.jitouDate1 = item.jitouDate.substr(11, 5); + + return item; + }); + zl2List.value.filter((item) => { + if (item != null) { + if (item.waiguan == 1) { + item.good = "濂�"; + } else { + item.bad = "鍧�"; + } + } + + return item; + }); + clList.value.filter((item) => { + if (item != null && item.shijian != null) + item.shijian1 = item.shijian.substr(11, 5); + + return item; + }); + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + fanbianRdList: SClist.value, + feipinYintie: ytfpData.value[0], + feipinFanbian: fbfpData.value[0], + + fanbianZhiliangRdList: zlList.value, + fanbianZhiliangRd2List: zl2List.value, + fanbianClList: clList.value, + fanbianClFw: clfwData.value[0], + }; + console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } else { + console.log("....error save", dt); + } + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "缈昏竟銆佹粴绛�/灏佸彛宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("fb.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + t1: SClist.value, + t2: ytfpData.value, + t3: fbfpData.value, + t4: zlList.value, + t5: zl2List.value, + t6: clfwData.value[0], + t7: clList.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "缈昏竟銆佹粴绛�/灏佸彛宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + tableHeader, + ytfpHeader, + fbfpHeader, + zlHeader, + zl2Header, + clHeader, + getListData, + headData, + toImage, + imageWrapper, + SClist, + ytfpData, + fbfpData, + zlList, + zl2List, + clList, + clfwData, + exportWord, + labelName, + editable, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/GXtable/Index.vue b/src/views/GXtable/Index.vue new file mode 100644 index 0000000..884cf19 --- /dev/null +++ b/src/views/GXtable/Index.vue @@ -0,0 +1,1079 @@ +<template> + <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button + type="primary" + circle + v-show="!editable" + @click="editable = !editable" + >缂栬緫</el-button + > + <el-button type="primary" v-show="editable" @click="saveData" + >纭畾</el-button + > + </div> + <div id="printContent" ref="imageWrapper"> + <h3>缃愮嚎鐢熶骇鎯呭喌鎶ヨ〃</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime1 }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + <HJTABLE + :SClist="chanliangtongjiListData" + :tableHeader="chaliangHeader" + :labelName="labelName.b1" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="feipinYintieData" + :tableHeader="ytfpHeader" + :labelName="labelName.b2" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="feipinJianbanData" + :tableHeader="jbfpHeader" + :labelName="labelName.b3" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="feipinHanjiData" + :tableHeader="hjfpHeader" + :labelName="labelName.b4" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="feipinFanbianData" + :tableHeader="fbfpHeader" + :labelName="labelName.b5" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="feipinFengkouData" + :tableHeader="fkzhfpHeader" + :labelName="labelName.b6" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="feipinJianguanData" + :tableHeader="jianguanfpHeader" + :labelName="labelName.b7" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="feipinJiguanData" + :tableHeader="jiguanfpHeader" + :labelName="labelName.b8" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="feipinZhijianData" + :tableHeader="zhijianfpHeader" + :labelName="labelName.b9" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="feipinGuanData" + :tableHeader="feipinfpHeader" + :labelName="labelName.b10" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { ShengchanVoList, save } from "@/api/Guanxian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const chaliangHeader = reactive([ + { + prop: "hjzs", + label: "鐒婃帴鎬绘暟", + editable: false, + type: "text", + }, + { + prop: "chengpin", + label: "鎴愬搧", + editable: false, + type: "input", + }, + { + prop: "zhuancp", + label: "杞垚鍝�", + editable: false, + type: "input", + }, + { + prop: "daijp", + label: "寰呮鍝�", + editable: false, + type: "input", + }, + { + prop: "jiebqsy", + label: "鎺ョ彮鍓嶅墿浣�", + editable: false, + type: "input", + }, + { + prop: "jiaobhsy", + label: "鎺ョ彮鍚庡墿浣�", + editable: false, + type: "input", + }, + { + prop: "yinfg", + label: "鍗板簾缃�", + editable: false, + type: "input", + }, + { + prop: "feipjbfp", + label: "搴熷搧+鍓澘搴熷搧", + editable: false, + type: "input", + }, + { + prop: "hegcp", + label: "鍚堟牸鎴愬搧", + editable: false, + type: "input", + }, + { + prop: "feipl", + label: "搴熷搧鐜�", + editable: false, + type: "input", + }, + { + prop: "caiytpc", + label: "褰╁嵃閾佹壒娆�", + editable: false, + type: "input", + }, + ]); + const hjfpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + { + prop: "touguanNum", + label: "澶寸綈", + editable: false, + type: "input", + }, + { + prop: "choujianNum", + label: "鎶芥", + editable: false, + type: "input", + }, + { + prop: "waitubuliangNum", + label: "澶栨秱涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "kaguanNum", + label: "鍗$綈", + editable: false, + type: "input", + }, + { + prop: "guhuabuliangNum", + label: "鍥哄寲涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "louyinNum", + label: "", + editable: false, + type: "input", + }, + { + prop: "hanjiebuliangNum", + label: "鐒婃帴涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "namePihaoValue", + label: "浜у搧鍚嶇О/鎵瑰彿", + editable: false, + type: "input", + }, + ]); + const ytfpHeader = reactive([ + { + prop: "total", + label: "鍗伴搧搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + { + prop: "chongyingNum", + label: "閲嶅嵃", + editable: false, + type: "input", + }, + { + prop: "zazhidianNum", + label: "鏉傝川鐐�", + editable: false, + type: "input", + }, + { + prop: "moranNum", + label: "澧ㄦ煋", + editable: false, + type: "input", + }, + { + prop: "louyinNum", + label: "婕忓嵃", + editable: false, + type: "input", + }, + { + prop: "sechaNum", + label: "鑹插樊", + editable: false, + type: "input", + }, + { + prop: "neiyinseNum", + label: "鍐呭嵃鑹�", + editable: false, + type: "input", + }, + + { + prop: "waituzouweiNum", + label: "澶栨秱璧颁綅", + editable: false, + type: "input", + }, + + { + prop: "neiwaitucashangNum", + label: "鍐呭娑傛摝浼�", + editable: false, + type: "input", + }, + { + prop: "sutiehexianNum", + label: "绱犻搧榛戠嚎", + editable: false, + type: "input", + }, + + { + prop: "loutuNum", + label: "婕忔秱", + editable: false, + type: "input", + }, + { + prop: "namePihaoValue", + label: "浜у搧鍚嶇О/鎵瑰彿", + editable: false, + type: "input", + }, + ]); + + const fbfpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + { + prop: "kaguanNum", + label: "鍗$綈", + editable: false, + type: "input", + }, + { + prop: "yahenNum", + label: "鍘嬬棔", + editable: false, + type: "input", + }, + { + prop: "huashangNum", + label: "鍒掍激", + editable: false, + type: "input", + }, + { + prop: "youguanNum", + label: "娌圭綈", + editable: false, + type: "input", + }, + { + prop: "shuanggaiNum", + label: "鍙岀洊", + editable: false, + type: "input", + }, + { + prop: "choujianNum", + label: "鎶芥", + editable: false, + type: "input", + }, + { + prop: "guanjinblNum", + label: "婊氱瓔涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "fengkoublNum", + label: "灏佸彛涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "namePihaoValue", + label: "浜у搧鍚嶇О/鎵瑰彿", + editable: false, + type: "input", + }, + ]); + const jbfpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + + { + prop: "jianxieNum", + label: "鍓枩", + editable: false, + type: "input", + }, + { + prop: "yahenNum", + label: "鍘嬬棔", + editable: false, + type: "input", + }, + { + prop: "huashangNum", + label: "鍒掍激", + editable: false, + type: "input", + }, + { + prop: "kabanNum", + label: "鍗℃澘", + editable: false, + type: "input", + }, + ]); + const fkzhfpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + + { + prop: "shaunggaiNum", + label: "鍙岀洊", + editable: false, + type: "input", + }, + { + prop: "yahenNum", + label: "鍘嬬棔", + editable: false, + type: "input", + }, + { + prop: "fengkouBlNum", + label: "灏佸彛涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "kaguanNum", + label: "鍗$綈", + editable: false, + type: "input", + }, + { + prop: "youguanNum", + label: "娌圭綈", + editable: false, + type: "input", + }, + { + prop: "choujianNum", + label: "鎶芥", + editable: false, + type: "input", + }, + ]); + const jianguanfpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + + { + prop: "louguanNum", + label: "婕忕綈", + editable: false, + type: "input", + }, + { + prop: "shuanggaiNum", + label: "鍙岀洊", + editable: false, + type: "input", + }, + { + prop: "lougaiNum", + label: "婕忕洊", + editable: false, + type: "input", + }, + { + prop: "bieguanNum", + label: "鐦綈", + editable: false, + type: "input", + }, + { + prop: "daoguanNum", + label: "鍊掔綈", + editable: false, + type: "input", + }, + ]); + const jiguanfpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + + { + prop: "youguanNum", + label: "娌圭綈", + editable: false, + type: "input", + }, + { + prop: "bieguanNum", + label: "鐦綈", + editable: false, + type: "input", + }, + { + prop: "hanjieBlNum", + label: "鐒婃帴涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "gunjinBlNum", + label: "婊氱瓔涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "zangguanNum", + label: "鑴忕綈", + editable: false, + type: "input", + }, + { + prop: "jianxieNum", + label: "鍓枩", + editable: false, + type: "input", + }, + { + prop: "fanbianBlNum", + label: "缈昏竟涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "suojinBlNum", + label: "缂╃瓔涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "zanggaiNum", + label: "鑴忕洊", + editable: false, + type: "input", + }, + { + prop: "waituBlNum", + label: "澶栨秱涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "huashangNum", + label: "褰╁嵃鍒掍激", + editable: false, + type: "input", + }, + { + prop: "fengkouBlNum", + label: "灏佸彛涓嶈壇", + editable: false, + type: "input", + }, + ]); + const zhijianfpHeader = reactive([ + { + prop: "total", + label: "璐ㄦ", + editable: false, + type: "text", + }, + { + prop: "sum", + label: "鍚堣", + editable: false, + type: "text", + }, + ]); + const feipinfpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + + { + prop: "chongyingNum", + label: "閲嶅嵃", + editable: false, + type: "input", + }, + { + prop: "louyinNum", + label: "婕忓嵃", + editable: false, + type: "input", + }, + { + prop: "zazhidianNum", + label: "鏉傝川鐐�", + editable: false, + type: "input", + }, + { + prop: "waituzouweiNum", + label: "澶栨秱璧颁綅", + editable: false, + type: "input", + }, + { + prop: "louyinNum", + label: "婕忓嵃", + editable: false, + type: "input", + }, + { + prop: "moranNum", + label: "澧ㄦ煋", + editable: false, + type: "input", + }, + { + prop: "fanbianBl", + label: "缈昏竟涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "sechaNum", + label: "鑹插樊", + editable: false, + type: "input", + }, + { + prop: "neiyinseNum", + label: "鍐呭嵃鑹�", + editable: false, + type: "input", + }, + { + prop: "neiwaitucashangNum", + label: "鍐呭娑傛摝浼�", + editable: false, + type: "input", + }, + { + prop: "guangyouBzNum", + label: "鍏夋补涓嶅噯", + editable: false, + type: "input", + }, + { + prop: "sutiehexianNum", + label: "绱犻搧榛戠嚎", + editable: false, + type: "input", + }, + { + prop: "taoyinBzNum", + label: "濂楀嵃涓嶅噯", + editable: false, + type: "input", + }, + { + prop: "hubanNum", + label: "绯婃澘", + editable: false, + type: "input", + }, + ]); + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "浜ч噺缁熻", + b2: "搴熷搧缁熻", + b3: "鍓澘搴熷搧", + b4: "鐒婃帴搴熷搧", + b5: "缈昏竟搴熷搧", + b6: "缁勫悎搴熷搧", + b7: "妫�缃愬簾鍝�", + b8: "闆嗙綈搴熷搧", + b9: "璐ㄦ", + b10: "鍗板簾缃�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let chanliangtongjiListData = ref([]); + let feipinGuanData = ref([]); + + let feipinHanjiData = ref([]); + let feipinJianbanData = ref([]); + + let feipinJiguanData = ref([]); + let feipinJianguanData = ref([]); + let feipinYintieData = ref([]); + let feipinFanbianData = ref([]); + + let feipinFengkouData = ref([]); + let feipinZhijianData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + function checkValue(obj) { + if (obj == null) return [{ total: 0 }]; + return [obj]; + } + function checkTotal(obj) { + if (obj == null) return null; + return obj.total; + } + const getListData = async () => { + const data = await ShengchanVoList(); + parse(data); + }; + function parse(data) { + headData.head = data.data.head; + headData.head.reportTime1 = headData.head.reportTime.substr(0, 10); + headData.head.jieban1 = headData.head.jieban.substr(11, 5); + headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + + let yt = { + cy: data.data.feipinYintie.chongyingNum, + mr: data.data.feipinYintie.moranNum, + zzd: data.data.feipinYintie.zazhidianNum, + wtzw: data.data.feipinYintie.waituzouweiNum, + st: data.data.feipinYintie.sutiehexianNum, + sc: data.data.feipinYintie.sechaNum, + ly: data.data.feipinYintie.louyinNum, + nys: data.data.feipinYintie.neiyinseNum, + nwtcs: data.data.feipinYintie.neiwaitucashangNum, + lt: data.data.feipinYintie.loutuNum, + }; + let jb = { + kb: + data.data.feipinJianban == null + ? 0 + : data.data.feipinJianban.kabanNum, + hs: + data.data.feipinJianban == null + ? 0 + : data.data.feipinJianban.huashangNum, + yh: + data.data.feipinJianban == null + ? 0 + : data.data.feipinJianban.yahenNum, + jx: + data.data.feipinJianban == null + ? 0 + : data.data.feipinJianban.jianxieNum.jianxieNum, + }; + let hj = { + hjyg: data.data.feipinHanji.youguanNum, + hjtg: data.data.feipinHanji.touguanNum, + hjcj: data.data.feipinHanji.choujianNum, + hjwt: data.data.feipinHanji.waitubuliangNum, + hjkg: data.data.feipinHanji.kaguanNum, + hjhj: data.data.feipinHanji.hanjiebuliangNum, + }; + + let fb = { + fbsj: data.data.feipinFengkou.suojinBlNum, + fbkg: data.data.feipinFengkou.kaguanNum, + fbyh: data.data.feipinFengkou.yahenNum, + fbhs: data.data.feipinFengkou.huashangNum, + fbwt: data.data.feipinFengkou.waituCsNum, + fbfb: data.data.feipinFengkou.fanbianBlNum, + }; + + let fk = { + fkfk: data.data.feipinFengkou.fengkouBlNum, + fkyh: data.data.feipinFengkou.yahenNum, + fkkg: data.data.feipinFengkou.kaguanNum, + fkyg: data.data.feipinFengkou.youguanNum, + fkcj: data.data.feipinFengkou.choujianNum, + fksg: data.data.feipinFengkou.shaunggaiNum, + }; + let jg = { + jgbg: data.data.feipinFengkou.bieguanNum, + jglg: data.data.feipinFengkou.louguanNum, + jgsg: data.data.feipinFengkou.shuanggaiNum, + jgdg: data.data.feipinFengkou.daoguanNum, + jglgai: data.data.feipinFengkou.lougaiNum, + jgjh: data.data.feipinFengkou.jiahanNum, + }; + let zj = { + total: checkTotal(data.data.feipinZhijian), + sum: + data.data.feipinZhijian == null ? null : data.data.feipinZhijian.sum, + t1: checkTotal(data.data.feipinYintie), + t2: checkTotal(data.data.feipinJianban), + t3: checkTotal(data.data.feipinHanji), + t4: checkTotal(data.data.feipinFanbian), + t5: checkTotal(data.data.feipinFengkou), + t6: checkTotal(data.data.feipinJianguan), + t7: checkTotal(data.data.feipinJiguan), + t8: checkTotal(data.data.feipinGuan), + }; + hjData.value = { + ...headData.head, + ...data.data.chanliangtongjiList, + ...yt, + ...jb, + ...hj, + ...fb, + ...fk, + ...jg, + ...zj, + }; + + chanliangtongjiListData.value = checkValue(data.data.chanliangtongjiList); + feipinGuanData.value = checkValue(data.data.feipinGuan); + feipinHanjiData.value = checkValue(data.data.feipinHanji); + feipinJianbanData.value = checkValue(data.data.feipinJianban); + feipinJiguanData.value = checkValue(data.data.feipinJiguan); + feipinJianguanData.value = checkValue(data.data.feipinJianguan); + feipinYintieData.value = checkValue(data.data.feipinYintie); + feipinFanbianData.value = checkValue(data.data.feipinFanbian); + feipinFengkouData.value = checkValue(data.data.feipinFengkou); + feipinZhijianData.value = checkValue(data.data.feipinZhijian); + } + const saveData = async () => { + editable = false; + let data = { + feipinGuan: feipinGuanData.value[0], + feipinHanji: feipinHanjiData.value[0], + feipinJianban: feipinJianbanData.value[0], + deipinJiguan: feipinJiguanData.value[0], + feipinJiangu: feipinJianguanData.value[0], + feipinYintie: feipinYintieData.value[0], + feipinFanbian: feipinFanbianData.value[0], + feipinFengkou: feipinFengkouData.value[0], + feipinZhijian: feipinZhijianData.value[0], + chanliangtongjiList: chanliangtongjiListData.value[0], + head: headData.head, + }; + console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "缃愮嚎鐢熶骇鎯呭喌鎶ヨ〃"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("guanxian.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "缃愮嚎鐢熶骇鎯呭喌鎶ヨ〃.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + + getListData, + headData, + toImage, + imageWrapper, + ytfpHeader, + feipinfpHeader, + chaliangHeader, + chanliangtongjiListData, + feipinGuanData, + feipinHanjiData, + feipinJianbanData, + feipinJiguanData, + feipinJianguanData, + feipinYintieData, + feipinFanbianData, + feipinFengkouData, + feipinZhijianData, + jbfpHeader, + hjfpHeader, + fbfpHeader, + fkzhfpHeader, + jianguanfpHeader, + jiguanfpHeader, + zhijianfpHeader, + feipinfpHeader, + exportWord, + labelName, + editable, + ShengchanVoList, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/HJtable/Index.vue b/src/views/HJtable/Index.vue new file mode 100644 index 0000000..e4d9462 --- /dev/null +++ b/src/views/HJtable/Index.vue @@ -0,0 +1,978 @@ +<template> + <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button + type="primary" + circle + v-show="!editable" + @click="editable = !editable" + >缂栬緫</el-button + > + <el-button type="primary" v-show="editable" @click="saveData" + >纭畾</el-button + > + </div> + <div id="printContent" ref="imageWrapper"> + <h3>鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + + <!-- <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>鍥涚嚎</span> + </div> --> + </div> + <el-divider /> + <HJTABLE + :SClist="SClist" + :tableHeader="tableHeader" + :labelName="labelName.scjl" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="ytfpData" + :tableHeader="ytfpHeader" + :labelName="labelName.fptj" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="hjfpData" + :tableHeader="hjfpHeader" + :editable="editable" + ></HJTABLE> + + <div> + <el-row> + <el-col :span="6"> + <HJTABLE + :SClist="wgList" + :tableHeader="wgHeader" + :labelName="labelName.wgzl" + :editable="editable" + ></HJTABLE> + </el-col> + <el-col :span="6"> + <HJTABLE + :SClist="wgList" + :tableHeader="wgHeader" + :labelName="labelName.wgzl" + :editable="editable" + ></HJTABLE> + </el-col> + <el-col :span="6"> + <HJTABLE + :SClist="wgList" + :tableHeader="wgHeader" + :labelName="labelName.wgzl" + :editable="editable" + ></HJTABLE> + </el-col> + <el-col :span="6"> + <HJTABLE + :SClist="djlList" + :tableHeader="djlHeader" + :labelName="labelName.djl" + :editable="editable" + ></HJTABLE> + </el-col> + </el-row> + </div> + <!-- <HJTABLE + :SClist="wgList" + :tableHeader="wgHeader" + :labelName="labelName.wgzl" + :editable="editable" + ></HJTABLE> --> + <div> + <el-row> + <el-col :span="12"> + <HJTABLE + :SClist="dqlsList" + :tableHeader="dqlsHeader" + :labelName="labelName.dqsl" + :editable="editable" + ></HJTABLE> + </el-col> + <el-col :span="12"> + <HJTABLE + :SClist="rdList" + :tableHeader="rdHeader" + :editable="editable" + ></HJTABLE> + </el-col> + </el-row> + </div> + + <HJTABLE + :SClist="hlList" + :tableHeader="hlHeader" + :labelName="labelName.hlgl" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { hanjiVoLest, save } from "@/api/HJapi"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const wgHeader = reactive([ + { + prop: "jdDate1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "waiguanzhiliang", + label: "澶栬璐ㄩ噺", + editable: false, + type: "input", + }, + ]); + + const dqlsHeader = reactive([ + { + prop: "jdDate1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "dingqiusila", + label: "椤剁悆鎾曟媺", + editable: false, + type: "input", + }, + { + prop: "liusaunqinpao", + label: "纭吀閾滀镜娉�", + editable: false, + type: "input", + }, + ]); + const djlHeader = reactive([ + { + prop: "jdDate1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "dajieliangTou", + label: "澶撮儴", + editable: false, + type: "input", + }, + { + prop: "dajieliangWei", + label: "灏鹃儴", + editable: false, + type: "input", + }, + ]); + + const rdHeader = reactive([ + { + prop: "jdDate1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "tuliaoniandu", + label: "娑傛枡绮樺害", + editable: false, + type: "input", + }, + { + prop: "hanjiehoudu", + label: "鐒婃帴鍘氬害", + editable: false, + type: "input", + }, + ]); + const tableHeader = reactive([ + { + prop: "JCXM", + label: "鐩戞祴椤圭洰", + editable: false, + type: "text", + }, + { + prop: "SJBZFW", + label: "鏁版嵁鏍囧噯鑼冨洿", + editable: false, + type: "input", + }, + { + prop: "CSZ", + label: "瀹炴祴鍊�", + editable: false, + type: "input", + }, + { + prop: "FLMC", + label: "杈呮枡鍚嶇О", + editable: false, + type: "text", + }, + { + prop: "CJ", + label: "鍘傚", + editable: false, + type: "input", + }, + { + prop: "XH", + label: "鍨嬪彿", + editable: false, + type: "input", + }, + ]); + + const hlHeader = reactive([ + { + prop: "hlDate1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "h1", + label: "1#鐐�", + editable: false, + type: "input", + }, + { + prop: "h2", + label: "2#鐐�", + editable: false, + type: "input", + }, + { + prop: "h3", + label: "2#鐐�", + editable: false, + type: "input", + }, + { + prop: "h4", + label: "4#鐐�", + editable: false, + type: "input", + }, + { + prop: "h5", + label: "5#鐐�", + editable: false, + type: "input", + }, + { + prop: "h6", + label: "6#鐐�", + editable: false, + type: "input", + }, + { + prop: "h7", + label: "7#鐐�", + editable: false, + type: "input", + }, + { + prop: "h8", + label: "8#鐐�", + editable: false, + type: "input", + }, + { + prop: "h9", + label: "9#鐐�", + editable: false, + type: "input", + }, + { + prop: "h10", + label: "10#鐐�", + editable: false, + type: "input", + }, + { + prop: "h11", + label: "11#鐐�", + editable: false, + type: "input", + }, + { + prop: "h12", + label: "12#鐐�", + editable: false, + type: "input", + }, + ]); + const ytfpHeader = reactive([ + { + prop: "total", + label: "鍗伴搧搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + { + prop: "chongyingNum", + label: "閲嶅嵃", + editable: false, + type: "input", + }, + { + prop: "zazhidianNum", + label: "鏉傝川鐐�", + editable: false, + type: "input", + }, + { + prop: "neiyinseNum", + label: "鍐呭嵃鑹�", + editable: false, + type: "input", + }, + { + prop: "moranNum", + label: "澧ㄦ煋", + editable: false, + type: "input", + }, + { + prop: "waituzouweiNum", + label: "澶栨秱璧颁綅", + editable: false, + type: "input", + }, + { + prop: "louyinNum", + label: "婕忓嵃", + editable: false, + type: "input", + }, + { + prop: "neiwaituYwNum", + label: "鍐呭娑傛补姹�", + editable: false, + type: "input", + }, + { + prop: "namePihaoValue", + label: "浜у搧鍚嶇О/鎵瑰彿", + editable: false, + type: "input", + }, + ]); + + const hjfpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + { + prop: "touguanNum", + label: "澶寸綈", + editable: false, + type: "input", + }, + { + prop: "choujianNum", + label: "鎶芥", + editable: false, + type: "input", + }, + { + prop: "waitubuliangNum", + label: "澶栨秱涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "kaguanNum", + label: "鍗$綈", + editable: false, + type: "input", + }, + { + prop: "guhuabuliangNum", + label: "鍥哄寲涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "louyinNum", + label: "", + editable: false, + type: "input", + }, + { + prop: "hanjiebuliangNum", + label: "鐒婃帴涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "namePihaoValue", + label: "浜у搧鍚嶇О/鎵瑰彿", + editable: false, + type: "input", + }, + ]); + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + let hanjiRdData = reactive({ + hanjiRd: {}, + hanjiHongluList: {}, + feipinYintie: {}, + feipinHanji: {}, + hanjiZhiliangRdList: {}, + hanjiZhiliangWgList: {}, + hanjiZhiliangDqlsList: {}, + hanjiZhiliangDjlList: {}, + }); + let SClist = ref([]); + let hjData = ref({}); + + let hlList = ref([]); + let ytfpData = ref([]); + let hjfpData = ref([]); + let wgList = ref([]); + let dqlsList = ref([]); + let djlList = ref([]); + let rdList = ref([]); + + let labelName = { + scjl: "鐢熶骇璁板綍", + fptj: "搴熷搧缁熻", + wgzl: "澶栬璐ㄩ噺", + djl: "鎼帴閲�", + dqsl: "椤剁悆鎾曟媺瀹為獙", + hlgl: "鐑樼倝鍔熺巼", + }; + let editable = ref(false); + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await hanjiVoLest(); + console.log("hjdata......", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + hanjiRdData.hanjiRd = data.data.hanjiRd; + hjData.value = { ...headData.head, ...hanjiRdData.hanjiRd }; + + hlList.value = data.data.hanjiHongluList; + + ytfpData.value = [data.data.feipinYintie]; + + hjfpData.value = + data.data.feipinHanji == null ? [] : [data.data.feipinHanji]; + + wgList.value = data.data.hanjiZhiliangWgList; + wgList.value.filter((item) => { + item.jdDate1 = item.jdDate.substr(11, 5); + + return item; + }); + djlList.value = data.data.hanjiZhiliangDjlList; + djlList.value.filter((item) => { + item.jdDate1 = item.jdDate.substr(11, 5); + + return item; + }); + dqlsList.value = data.data.hanjiZhiliangDqlsList; + dqlsList.value.filter((item) => { + item.jdDate1 = item.jdDate.substr(11, 5); + + return item; + }); + rdList.value = data.data.hanjiZhiliangRdList; + + let arr = [ + { + JCXM: hanjiRdData.hanjiRd.shengchannengli, + SJBZFW: hanjiRdData.hanjiRd.shengchannengliFw, + CSZ: hanjiRdData.hanjiRd.shengchannengliScz, + FLMC: hanjiRdData.hanjiRd.tongxian, + CJ: hanjiRdData.hanjiRd.tongxianCj, + XH: hanjiRdData.hanjiRd.tongxianXh, + }, + { + JCXM: hanjiRdData.hanjiRd.tongxiansudu, + SJBZFW: hanjiRdData.hanjiRd.tongxiansuduFw, + CSZ: hanjiRdData.hanjiRd.tongxiansuduScz, + FLMC: hanjiRdData.hanjiRd.tongxian, + CJ: hanjiRdData.hanjiRd.tongxianCj, + XH: hanjiRdData.hanjiRd.tongxianXh, + }, + { + JCXM: hanjiRdData.hanjiRd.hanjiedianliu, + SJBZFW: hanjiRdData.hanjiRd.hanjiedianliuFw, + CSZ: hanjiRdData.hanjiRd.hanjiedianliuScz, + FLMC: hanjiRdData.hanjiRd.hanfengtl, + CJ: hanjiRdData.hanjiRd.hanfengtlCj, + XH: hanjiRdData.hanjiRd.hanfengtlXh, + }, + { + JCXM: hanjiRdData.hanjiRd.shuiwenfanwei, + SJBZFW: hanjiRdData.hanjiRd.shuiwenfanweiFw, + CSZ: hanjiRdData.hanjiRd.shuiwenfanweiScz, + FLMC: hanjiRdData.hanjiRd.hanfengtl, + CJ: hanjiRdData.hanjiRd.hanfengtlCj, + XH: hanjiRdData.hanjiRd.hanfengtlXh, + }, + { + JCXM: hanjiRdData.hanjiRd.waituniandu, + SJBZFW: hanjiRdData.hanjiRd.waitunianduFw, + CSZ: hanjiRdData.hanjiRd.waitunianduScz, + FLMC: hanjiRdData.hanjiRd.xishiji, + CJ: hanjiRdData.hanjiRd.xishijiCj, + XH: hanjiRdData.hanjiRd.xishijiXh, + }, + { + JCXM: hanjiRdData.hanjiRd.diancilugonglv, + SJBZFW: hanjiRdData.hanjiRd.diancilugonglvFw, + CSZ: hanjiRdData.hanjiRd.diancilugonglvScz, + FLMC: hanjiRdData.hanjiRd.xishiji, + CJ: hanjiRdData.hanjiRd.xishijiCj, + XH: hanjiRdData.hanjiRd.xishijiXh, + }, + { + JCXM: hanjiRdData.hanjiRd.diancilusudu, + SJBZFW: hanjiRdData.hanjiRd.diancilusuduFw, + CSZ: hanjiRdData.hanjiRd.diancilusuduScz, + FLMC: "", + CJ: "", + XH: "", + }, + { + JCXM: hanjiRdData.hanjiRd.kongqiyali, + SJBZFW: hanjiRdData.hanjiRd.kongqiyaliFw, + CSZ: hanjiRdData.hanjiRd.kongqiyaliScz, + FLMC: "", + CJ: "", + XH: "", + }, + { + JCXM: hanjiRdData.hanjiRd.gongzuodianya, + SJBZFW: hanjiRdData.hanjiRd.gongzuodianyaFw, + CSZ: hanjiRdData.hanjiRd.gongzuodianyaScz, + FLMC: "", + CJ: "", + XH: "", + }, + { + JCXM: hanjiRdData.hanjiRd.tongxianzxkd, + SJBZFW: hanjiRdData.hanjiRd.tongxianzxkdFw, + CSZ: hanjiRdData.hanjiRd.tongxianzxkdScz, + FLMC: "", + CJ: "", + XH: "", + }, + { + JCXM: hanjiRdData.hanjiRd.chengyuan, + SJBZFW: hanjiRdData.hanjiRd.chengyuanFw, + CSZ: hanjiRdData.hanjiRd.chengyuanScz, + FLMC: "", + CJ: "", + XH: "", + }, + { + JCXM: hanjiRdData.hanjiRd.tanhuangyali, + SJBZFW: hanjiRdData.hanjiRd.tanhuangyaliFw, + CSZ: hanjiRdData.hanjiRd.tanhuangyaliScz, + FLMC: "", + CJ: "", + XH: "", + }, + { + JCXM: hanjiRdData.hanjiRd.z, + SJBZFW: hanjiRdData.hanjiRd.zfw, + CSZ: hanjiRdData.hanjiRd.zscz, + FLMC: "", + CJ: "", + XH: "", + }, + { + JCXM: hanjiRdData.hanjiRd.shanghanlun, + SJBZFW: hanjiRdData.hanjiRd.shanghanlunFw, + CSZ: hanjiRdData.hanjiRd.shanghanlunScz, + FLMC: "", + CJ: "", + XH: "", + }, + { + JCXM: hanjiRdData.hanjiRd.xiaghanlun, + SJBZFW: hanjiRdData.hanjiRd.xiaghanlunFw, + CSZ: hanjiRdData.hanjiRd.xiaghanlunScz, + FLMC: "", + CJ: "", + XH: "", + }, + { + JCXM: hanjiRdData.hanjiRd.hanjijishu, + SJBZFW: hanjiRdData.hanjiRd.hanjijishuFw, + CSZ: hanjiRdData.hanjiRd.hanjijishuScz, + FLMC: "", + CJ: "", + XH: "", + }, + ]; + SClist.value = arr; + } + const saveData = async () => { + editable = false; + SClist.value.filter((item) => { + if (item.JCXM == hanjiRdData.hanjiRd.shengchannengli) { + hanjiRdData.hanjiRd.shengchannengliFw = item.SJBZFW; + hanjiRdData.hanjiRd.shengchannengliScz = item.CSZ; + hanjiRdData.hanjiRd.xishiji = item.FLMC; + hanjiRdData.hanjiRd.xishijiCj = item.CJ; + hanjiRdData.hanjiRd.xishijiXh = item.XH; + } + if (item.JCXM == hanjiRdData.hanjiRd.tongxiansudu) { + hanjiRdData.hanjiRd.tongxiansuduFw = item.SJBZFW; + hanjiRdData.hanjiRd.tongxiansuduScz = item.CSZ; + hanjiRdData.hanjiRd.xishiji = item.FLMC; + hanjiRdData.hanjiRd.xishijiCj = item.CJ; + hanjiRdData.hanjiRd.xishijiXh = item.XH; + } + if (item.JCXM == hanjiRdData.hanjiRd.hanjiedianliu) { + hanjiRdData.hanjiRd.hanjiedianliuFw = item.SJBZFW; + hanjiRdData.hanjiRd.hanjiedianliuScz = item.CSZ; + hanjiRdData.hanjiRd.xishiji = item.FLMC; + hanjiRdData.hanjiRd.xishijiCj = item.CJ; + hanjiRdData.hanjiRd.xishijiXh = item.XH; + } + if (item.JCXM == hanjiRdData.hanjiRd.shuiwenfanwei) { + hanjiRdData.hanjiRd.shuiwenfanweiFw = item.SJBZFW; + hanjiRdData.hanjiRd.shuiwenfanweiScz = item.CSZ; + hanjiRdData.hanjiRd.xishiji = item.FLMC; + hanjiRdData.hanjiRd.xishijiCj = item.CJ; + hanjiRdData.hanjiRd.xishijiXh = item.XH; + } + if (item.JCXM == hanjiRdData.hanjiRd.waituniandu) { + hanjiRdData.hanjiRd.waitunianduFw = item.SJBZFW; + hanjiRdData.hanjiRd.waitunianduScz = item.CSZ; + hanjiRdData.hanjiRd.xishiji = item.FLMC; + hanjiRdData.hanjiRd.xishijiCj = item.CJ; + hanjiRdData.hanjiRd.xishijiXh = item.XH; + } + if (item.JCXM == hanjiRdData.hanjiRd.diancilugonglv) { + hanjiRdData.hanjiRd.diancilugonglvFw = item.SJBZFW; + hanjiRdData.hanjiRd.diancilugonglvScz = item.CSZ; + hanjiRdData.hanjiRd.xishiji = item.FLMC; + hanjiRdData.hanjiRd.xishijiCj = item.CJ; + hanjiRdData.hanjiRd.xishijiXh = item.XH; + } + if (item.JCXM == hanjiRdData.hanjiRd.diancilusudu) { + hanjiRdData.hanjiRd.diancilusuduFw = item.SJBZFW; + hanjiRdData.hanjiRd.diancilusuduScz = item.CSZ; + } + if (item.JCXM == hanjiRdData.hanjiRd.kongqiyali) { + hanjiRdData.hanjiRd.kongqiyaliFw = item.SJBZFW; + hanjiRdData.hanjiRd.kongqiyaliScz = item.CSZ; + } + if (item.JCXM == hanjiRdData.hanjiRd.gongzuodianya) { + hanjiRdData.hanjiRd.gongzuodianyaFw = item.SJBZFW; + hanjiRdData.hanjiRd.gongzuodianyaScz = item.CSZ; + } + if (item.JCXM == hanjiRdData.hanjiRd.tongxianzxkd) { + hanjiRdData.hanjiRd.tongxianzxkdFw = item.SJBZFW; + hanjiRdData.hanjiRd.tongxianzxkdScz = item.CSZ; + } + if (item.JCXM == hanjiRdData.hanjiRd.chengyuan) { + hanjiRdData.hanjiRd.chengyuanFw = item.SJBZFW; + hanjiRdData.hanjiRd.chengyuanScz = item.CSZ; + } + if (item.JCXM == hanjiRdData.hanjiRd.tanhuangyali) { + hanjiRdData.hanjiRd.tanhuangyaliFw = item.SJBZFW; + hanjiRdData.hanjiRd.tanhuangyaliScz = item.CSZ; + } + if (item.JCXM == hanjiRdData.hanjiRd.z) { + hanjiRdData.hanjiRd.zfw = item.SJBZFW; + hanjiRdData.hanjiRd.zscz = item.CSZ; + } + if (item.JCXM == hanjiRdData.hanjiRd.hanjijishu) { + hanjiRdData.hanjiRd.hanjijishuFw = item.SJBZFW; + hanjiRdData.hanjiRd.hanjijishuScz = item.CSZ; + } + if (item.JCXM == hanjiRdData.hanjiRd.xiaghanlun) { + hanjiRdData.hanjiRd.xiaghanlunFw = item.SJBZFW; + hanjiRdData.hanjiRd.xiaghanlunScz = item.CSZ; + } + if (item.JCXM == hanjiRdData.hanjiRd.shanghanlun) { + hanjiRdData.hanjiRd.shanghanlunFw = item.SJBZFW; + hanjiRdData.hanjiRd.shanghanlunScz = item.CSZ; + } + return item; + }); + let mydata = { + hanjiRd: hanjiRdData.hanjiRd, + hanjiHongluList: hlList.value, + feipinYintie: ytfpData.value[0], + feipinHanji: hjfpData.value[0], + + hanjiZhiliangWgList: wgList.value, + hanjiZhiliangRdList: rdList.value, + hanjiZhiliangDqlsList: dqlsList.value, + hanjiZhiliangDjlList: djlList.value, + head: headData.head, + }; + console.log("save data...", mydata); + const dt = await save(mydata); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("hj.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + + doc.setData({ + ...hjData.value, + t3: hlList.value, + t1: ytfpData.value, + t2: hjData.value, + t4: wgList.value, + t5: wgList.value, + t6: wgList.value, + t7: djlList.value, + t8: dqlsList.value, + rdList, + + // table: hanjiRdData.hanjiRd, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + tableHeader, + hlHeader, + hjfpHeader, + ytfpHeader, + wgHeader, + djlHeader, + dqlsHeader, + rdHeader, + getListData, + headData, + toImage, + imageWrapper, + SClist, + hlList, + hjData, + ytfpData, + hjfpData, + wgList, + djlList, + dqlsList, + rdList, + exportWord, + editable, + labelName, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..48f0545 --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,17 @@ +<template> + <div class="home"> + <HelloWorld msg="Welcome to Your Vue.js App" /> + </div> +</template> + +<script> +// @ is an alias to /src +import HelloWorld from "@/components/HelloWorld.vue"; + +export default { + name: "Home", + components: { + HelloWorld + } +}; +</script> diff --git a/src/views/JBJtable/Index.vue b/src/views/JBJtable/Index.vue new file mode 100644 index 0000000..acae765 --- /dev/null +++ b/src/views/JBJtable/Index.vue @@ -0,0 +1,751 @@ +<template> + <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button + type="primary" + circle + v-show="!editable" + @click="editable = !editable" + >缂栬緫</el-button + > + <el-button type="primary" v-show="editable" @click="saveData" + >纭畾</el-button + > + </div> + + <div id="printContent" ref="imageWrapper"> + <h3>鍓澘鏈哄伐搴忕敓浜ц川閲忚褰曡〃</h3> + + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + + <!-- <el-input + size="small" + v-model="headData.head.reportTime" + :placeholder="`璇疯緭鍏�${headData.head.reportTime}`" + /> --> + + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime1 }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + + <!-- <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>鍥涚嚎</span> + </div> --> + </div> + <el-divider /> + <HJTABLE + :SClist="SClist" + :tableHeader="tableHeader" + :labelName="labelName.b1" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="selfList" + :tableHeader="selfHeader" + :labelName="labelName.b2" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="checkList" + :tableHeader="checkHeader" + :labelName="labelName.b3" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="rdList" + :tableHeader="rdHeader" + :labelName="labelName.b4" + :editable="editable" + ></HJTABLE> + + <div id="divcss"><p>4.鎶芥璁板綍2锛�</p></div> + <div v-for="(ii, kk) in eloList" :key="kk"> + <el-row> + <el-col :span="6" v-for="(i, k) in ii" :key="k"> + <HJTABLE + :SClist="i.list" + :tableHeader="rd2Header" + :editable="editable" + ></HJTABLE> + </el-col> + </el-row> + </div> + <HJTABLE + :SClist="jFList" + :tableHeader="fpHeader" + :labelName="labelName.b6" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { jianbjVoLast, save } from "@/api/JBapi"; +import { headReport } from "@/api/head"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import { useRouter } from "vue-router"; +import HJTABLE from "@/components/arj/arj-table"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + methods: {}, + setup(props) { + const router = useRouter(); + + const fpHeader = reactive([ + { + prop: "pihao", + label: "鎵瑰彿", + editable: true, + type: "text", + }, + // { + // prop: "biaoshi", + // label: "鏍囪瘑", + // editable: false, + // type: "text", + // }, + { + prop: "scfpmc", + label: "鐢熶骇搴熷搧鍚嶇О", + editable: true, + type: "input", + }, + { + prop: "shengchanFp", + label: "鏁伴噺", + editable: true, + type: "input", + }, + { + prop: "ytfpmc", + label: "鍗伴搧搴熷搧鍚嶇О", + editable: true, + type: "input", + }, + { + prop: "yintieFp", + label: "鏁伴噺", + editable: true, + type: "input", + }, + ]); + const rd2Header = reactive([ + { + prop: "shijian3", + label: "鏃堕棿", + editable: false, + type: "text", + }, + // { + // prop: "biaoshi", + // label: "鏍囪瘑", + // editable: false, + // type: "text", + // }, + + { + prop: "changdu", + label: "闀垮害", + editable: false, + type: "input", + }, + { + prop: "kuandu", + label: "瀹藉害", + editable: false, + type: "input", + }, + { + prop: "zhijiaodu", + label: "鐩磋搴�", + editable: false, + type: "input", + }, + ]); + const tableHeader = reactive([ + { + prop: "ytphBh", + label: "鍘熼搧鎵瑰彿銆佺増鍙�", + editable: false, + type: "input", + }, + { + prop: "yscj", + label: "鍗板埛鍘傚", + editable: false, + type: "input", + }, + { + prop: "cjsj2", + label: "瑁佸壀鏃堕棿", + editable: false, + type: "input", + }, + { + prop: "ytsl", + label: "鍘熼搧鏁伴噺", + editable: false, + type: "input", + }, + { + prop: "scsl", + label: "瀹炲壀鏁伴噺", + editable: false, + type: "input", + }, + { + prop: "kuiying", + label: "浜忕泩", + editable: false, + type: "input", + }, + , + { + prop: "stcj", + label: "绱犻搧鍘傚", + editable: false, + type: "input", + }, + { + prop: "ttsl", + label: "閫�閾佹暟閲�", + editable: false, + type: "input", + }, + { + prop: "yuanyin", + label: "鍘熷洜", + editable: false, + type: "input", + }, + { + prop: "ttmc", + label: "閫�閾佸悕绉�", + editable: false, + type: "input", + }, + ]); + const selfHeader = reactive([ + { + prop: "cpml", + label: "浜у搧鍚嶇О", + editable: false, + type: "input", + }, + { + prop: "changdu", + label: "闀垮害", + editable: false, + type: "input", + }, + { + prop: "gaodu", + label: "楂樺害", + editable: false, + type: "input", + }, + { + prop: "zhijiaodu", + label: "鐩磋搴�", + editable: false, + type: "input", + }, + ]); + const checkHeader = reactive([ + { + prop: "cjffNum", + label: "鎶芥鏁伴噺", + editable: false, + type: "input", + }, + { + prop: "cjffFre", + label: "鎶芥棰戠巼", + editable: false, + type: "input", + }, + { + prop: "cjffCheckOne", + label: "妫�娴嬬偣1", + editable: false, + type: "input", + }, + { + prop: "cjffCheckTwo", + label: "妫�娴嬬偣2", + editable: false, + type: "input", + }, + { + prop: "cjffCheckThree", + label: "妫�娴嬬偣3", + editable: false, + type: "input", + }, + ]); + const rdHeader = reactive([ + { + prop: "shijian2", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "yszl", + label: "鍗板埛璐ㄩ噺", + editable: false, + type: "input", + }, + { + prop: "liukong", + label: "鐣欑┖", + editable: false, + type: "input", + }, + { + prop: "nwths", + label: "鍐呭娑傚垝浼�", + editable: false, + type: "input", + }, + ]); + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + let hanjiRdData = reactive({ + jianbjTrjl: {}, + jianbjSelf: {}, + jianbjCheck: {}, + jianbjRd: {}, + jianbjRd2List: {}, + jianbjFpList: {}, + }); + + let editable = ref(false); + let SClist = ref([]); + let hjData = ref({}); + + let selfList = ref([]); + let checkList = ref([]); + let rdList = ref([]); + //鍒嗚В鎴愪袱涓�12瀛恖ist锛屽洜涓烘墦鍗伴渶瑕� + let rdList1 = ref([]); + let rdList2 = ref([]); + + let rd2List = ref([]); + let jFList = ref([]); + + let rd2ListA1 = ref([]); + let rd2ListB1 = ref([]); + let rd2ListC1 = ref([]); + let rd2ListD1 = ref([]); + + let rd2ListA2 = ref([]); + let rd2ListB2 = ref([]); + let rd2ListC2 = ref([]); + let rd2ListD2 = ref([]); + + let rd2ListA3 = ref([]); + let rd2ListB3 = ref([]); + let rd2ListC3 = ref([]); + let rd2ListD3 = ref([]); + + let eloList = ref([]); + let eloName = ref(["A", "B", "C", "D"]); + + let labelName = { + b1: "鍘熸潗鏂欐姇鍏ヨ褰�", + b2: "1.宀椾綅鍚勪骇鍝佸昂瀵告爣鍑嗭細", + b3: "2.鎶芥鏂规硶锛�", + b4: "3.鎶芥璁板綍1锛氾紙30鍒嗛挓鎶芥1娆★紙姣忓寘閾佷笂銆佷腑銆佷笅鍚勪竴娆★級锛屸垰浠h〃璐ㄩ噺鑹ソ锛屽鏈夎川閲忕己闄风洿鎺ユ敞鏄�", + b5: "椤剁悆鎾曟媺瀹為獙", + b6: "搴熷搧璁板綍", + }; + + const submitForm = () => {}; + + const saveData = async () => { + editable = false; + let data = { + jianbjTrjl: SClist.value, + jianbjSelf: selfList.value, + jianbjCheck: checkList.value, + jianbjRd: rdList.value, + jianbjRd2List: rd2ListA1.value.concat( + rd2ListB1.value, + rd2ListC1.value, + rd2ListD1.value, + rd2ListA2.value, + rd2ListB2.value, + rd2ListC2.value, + rd2ListD2.value, + rd2ListA3.value, + rd2ListB3.value, + rd2ListC3.value, + rd2ListD3.value + ), + jianbjFpList: jFList.value, + head: headData.head, + }; + console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + const handleEdit = (row) => { + editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await jianbjVoLast(); + parse(data); + }; + + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + + function rd2Filter(biaoshi) { + var list = rd2List.value.filter((item) => { + return item.biaoshi === biaoshi; + }); + return list; + } + function parse(data) { + console.log('jbj...',data) + headData.head = data.data.head; + headData.head.reportTime1 = headData.head.reportTime.substr(0, 10); + + hanjiRdData.jianbjTrjl = data.data.jianbjTrjl; + + hjData.value = { ...headData.head, ...hanjiRdData.jianbjTrjl }; + + SClist.value = data.data.jianbjTrjl; + SClist.value.filter((item) => { + item.cjsj2 = item.cjsj.substr(11, 5); + + return item; + }); + selfList.value = data.data.jianbjSelf; + checkList.value = data.data.jianbjCheck; + rdList.value = data.data.jianbjRd; + rdList.value.filter((item) => { + item.shijian2 = item.shijian.substr(11, 5); + + return item; + }); + rd2List.value = data.data.jianbjRd2List; + rd2List.value.filter((item) => { + item.shijian3 = item.shijian.substr(11, 5); + + return item; + }); + jFList.value = data.data.jianbjFpList; + + if (rdList.value.length > 12) { + rdList1 = rdList.value.splice(0, 11); + rdList2 = rdList.value.splice(12); + } else { + rdList1 = rdList; + rdList2 = []; + } + + rd2ListA1.value = rd2Filter("A1"); + rd2ListA2.value = rd2Filter("A2"); + rd2ListA3.value = rd2Filter("A3"); + + rd2ListB1.value = rd2Filter("B1"); + rd2ListB2.value = rd2Filter("B2"); + rd2ListB3.value = rd2Filter("B3"); + + rd2ListC1.value = rd2Filter("C1"); + rd2ListC2.value = rd2Filter("C2"); + rd2ListC3.value = rd2Filter("C3"); + + rd2ListD1.value = rd2Filter("D1"); + rd2ListD2.value = rd2Filter("D2"); + rd2ListD3.value = rd2Filter("D3"); + eloList.value = [ + [ + { list: rd2ListA1.value, name: "A" }, + { list: rd2ListB1.value, name: "B" }, + { list: rd2ListC1.value, name: "C" }, + { list: rd2ListD1.value, name: "D" }, + ], + [ + { list: rd2ListA2.value, name: "A" }, + { list: rd2ListB2.value, name: "B" }, + { list: rd2ListC2.value, name: "C" }, + { list: rd2ListD2.value, name: "D" }, + ], + [ + { list: rd2ListA3.value, name: "A" }, + { list: rd2ListB3.value, name: "B" }, + { list: rd2ListC3.value, name: "C" }, + { list: rd2ListD3.value, name: "D" }, + ], + ]; + + console.log(rd2ListA1); + console.log(rd2ListB1); + } + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鍓澘鏈哄伐搴忕敓浜ц川閲忚褰曡〃"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("jbj.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + table: hanjiRdData.jianbjTrjl, + table2: selfList.value, + table3: rdList1.value, + table31: rdList2.value, + t4: rd2ListA1.value, + t5: rd2ListB1.value, + t6: rd2ListC1.value, + t7: rd2ListD1.value, + t8: rd2ListA2.value, + t9: rd2ListB2.value, + ta: rd2ListC2.value, + tb: rd2ListD2.value, + tc: rd2ListA3.value, + td: rd2ListB3.value, + te: rd2ListC3.value, + tf: rd2ListD3.value, + tt1: rd2ListA1.value.length == 0 ? "" : rd2ListA1.value[0].shijian, + tt2: rd2ListA2.value.length == 0 ? "" : rd2ListA2.value[0].shijian, + tt3: rd2ListA3.value.length == 0 ? "" : rd2ListA3.value[0].shijian, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鍓澘鏈哄伐搴忕敓浜ц川閲忚褰曡〃.docx"); + }); + } + + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + tableHeader, + selfHeader, + checkHeader, + rdHeader, + getListData, + headData, + toImage, + imageWrapper, + SClist, + selfList, + checkList, + rdList, + exportWord, + editable, + saveData, + headReport, + rd2Header, + rd2List, + rd2ListA1, + rd2ListC1, + rd2ListB1, + rd2ListD1, + jFList, + fpHeader, + rd2ListA2, + rd2ListB2, + rd2ListC2, + rd2ListD2, + rd2ListA3, + rd2ListB3, + rd2ListC3, + rd2ListD3, + eloList, + eloName, + labelName, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.header_nox2 { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +#divcss p { + font-size: 20px; + text-align: left; +} +</style> diff --git a/src/views/JGGXtable/Index.vue b/src/views/JGGXtable/Index.vue new file mode 100644 index 0000000..d256208 --- /dev/null +++ b/src/views/JGGXtable/Index.vue @@ -0,0 +1,419 @@ +<template> + <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button + type="primary" + circle + v-show="!editable" + @click="editable = !editable" + >缂栬緫</el-button + > + <el-button type="primary" v-show="editable" @click="saveData" + >纭畾</el-button + > + </div> + <div id="printContent" ref="imageWrapper"> + <h3>妫�缃愬伐搴忕敓浜ц川閲忚褰�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + + <!-- <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>鍥涚嚎</span> + </div> --> + </div> + <el-divider /> + + <HJTABLE + :SClist="fpData" + :tableHeader="fpHeader" + :labelName="labelName.b1" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="SClist" + :tableHeader="tableHeader" + :labelName="labelName.b2" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { jianguanVoLast, save } from "@/api/JianGuan"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const fpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧锛堝悎璁★級", + editable: false, + type: "text", + }, + { + prop: "lougaiNum", + label: "婕忕洊", + editable: false, + type: "input", + }, + { + prop: "louguanNum", + label: "婕忕綈", + editable: false, + type: "input", + }, + + { + prop: "baokouNum", + label: "鐖嗗彛", + editable: false, + type: "text", + }, + { + prop: "jiahanNum", + label: "鍋囩剨", + editable: false, + type: "input", + }, + + { + prop: "bieguanNum", + label: "鐦綈", + editable: false, + type: "input", + }, + ]); + const tableHeader = reactive([ + { + prop: "shijian1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "jitouhao", + label: "妫�娴嬫満澶村彿", + editable: false, + type: "input", + }, + { + prop: "zhuangtai", + label: "鏄惁姝e父", + editable: false, + type: "input", + }, + { + prop: "lougaiNum", + label: "婕忕洊", + editable: false, + type: "text", + }, + { + prop: "louguanNum", + label: "婕忕綈", + editable: false, + type: "input", + }, + { + prop: "baokouNum", + label: "鐖嗗彛", + editable: false, + type: "input", + }, + , + { + prop: "jiahanNum", + label: "鍋囩剨", + editable: false, + type: "input", + }, + { + prop: "bieguanNum", + label: "鐦綈", + editable: false, + type: "input", + }, + ]); + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + let hanjiRdData = reactive({ + jianguanZhiliangRdList: {}, + feipinJianguan: {}, + }); + + let SClist = ref([]); + let hjData = ref({}); + + let fpData = ref([]); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "妫�缃愯川閲忛獙璇佽褰�", + b3: "鐢熶骇搴熷搧", + b4: "璐ㄩ噺璁板綍", + }; + let editable = ref(false); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await jianguanVoLast(); + parse(data); + }; + function parse(data) { + headData.head = data.data.head; + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + headData.head.date = headData.head.reportTime; + hanjiRdData.jianguanZhiliangRdList = data.data.jianguanZhiliangRdList; + + hjData.value = { + ...headData.head, + ...data.data.feipinJianguan, + t1: SClist, + }; + // tableHeader.forEach(e=>{ + // // SClist.push({e.}) + // }) + + SClist.value = data.data.jianguanZhiliangRdList; + fpData.value = [data.data.feipinJianguan]; + // console.log(SClist); + + SClist.value.filter((item) => { + if (item != null) item.shijian1 = item.shijian.substr(11, 5); + + return item; + }); + } + const saveData = async () => { + editable = false; + let data = { + jianguanZhiliangRdList: SClist.value, + feipinJianguan: fpData.value[0], + + head: headData.head, + }; + console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "妫�缃愬伐搴忕敓浜ц川閲忚褰�"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("jg.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + // table: hanjiRdData.hanjiRd, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "妫�缃愬伐搴忕敓浜ц川閲忚褰�.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + fpHeader, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + tableHeader, + getListData, + headData, + toImage, + imageWrapper, + SClist, + fpData, + exportWord, + labelName, + editable, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/JGJtable/Index.vue b/src/views/JGJtable/Index.vue new file mode 100644 index 0000000..c2301c1 --- /dev/null +++ b/src/views/JGJtable/Index.vue @@ -0,0 +1,677 @@ +<template> + <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show="editable" @click="saveData">纭畾</el-button> + </div> + <div id="printContent" ref="imageWrapper"> + <h3>闆嗙綈鏈哄伐搴忕敓浜ц川閲忚褰�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + + <!-- <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>鍥涚嚎</span> + </div> --> + </div> + <el-divider /> + + <HJTABLE + :SClist="rdList" + :tableHeader="rdHeader" + :labelName="labelName.b1" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="SClist" + :tableHeader="tableHeader" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="ytfpData" + :tableHeader="ytfpHeader" + :labelName="labelName.b2" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="hjfpData" + :tableHeader="hjfpHeader" + :labelName="labelName.b2" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="zlList" + :tableHeader="zlHeader" + :labelName="labelName.b3" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="flList" + :tableHeader="flHeader" + :labelName="labelName.b4" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { jiguanVoLast, save } from "@/api/JiGuan"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const flHeader = reactive([ + { + prop: "name", + label: "鍚嶇О", + editable: false, + type: "text", + }, + { + prop: "num", + label: "鏁伴噺", + editable: false, + type: "input", + }, + { + prop: "fuliaoGood", + label: "鍚堟牸", + editable: false, + type: "input", + }, + { + prop: "fuliaoBad", + label: "涓嶅悎鏍�", + editable: false, + type: "text", + }, + { + prop: "fuliaoSm", + label: "涓嶅悎鏍艰鏄�", + editable: false, + type: "input", + }, + ]); + const zlHeader = reactive([ + { + prop: "rdTime1", + label: "鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "waiguanRy", + label: "澶栬浜哄憳", + editable: false, + type: "input", + }, + { + prop: "guanneiJyy", + label: "缃愬唴妫�楠屽憳", + editable: false, + type: "input", + }, + { + prop: "jiguanRy", + label: "闆嗙綈浜哄憳", + editable: false, + type: "text", + }, + { + prop: "choujianJg", + label: "鎶芥缁撴灉", + editable: false, + type: "input", + }, + { + prop: "choujianJgzt", + label: "鎶芥鐘舵��", + editable: false, + type: "input", + }, + { + prop: "wenti", + label: "涓昏璐ㄩ噺闂", + editable: false, + type: "input", + }, + ]); + const ytfpHeader = reactive([ + { + prop: "total", + label: "鍗伴搧搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + { + prop: "chongyingNum", + label: "閲嶅嵃", + editable: false, + type: "input", + }, + { + prop: "zazhidianNum", + label: "鏉傝川鐐�", + editable: false, + type: "input", + }, + { + prop: "neiyinseNum", + label: "鍐呭嵃鑹�", + editable: false, + type: "input", + }, + { + prop: "moranNum", + label: "澧ㄦ煋", + editable: false, + type: "input", + }, + { + prop: "sechaNum", + label: "鑹插樊", + editable: false, + type: "input", + }, + { + prop: "neiwaitucashangNum", + label: "鍐呭娑傛摝浼�", + editable: false, + type: "input", + }, + + { + prop: "neiwaituYwNum", + label: "鍐呭娑傛补姹�", + editable: false, + type: "input", + }, + { + prop: "louyinNum", + label: "婕忓嵃", + editable: false, + type: "input", + }, + { + prop: "gaiyahenNum", + label: "鐩栧帇鐥�", + editable: false, + type: "input", + }, + { + prop: "gaijianjiaoNum", + label: "鐩栨簠鐥�", + editable: false, + type: "input", + }, + + { + prop: "zanggaiNum", + label: "鑴忕洊", + editable: false, + type: "input", + }, + { + prop: "sutiehexianNum", + label: "绱犻搧榛戠嚎", + editable: false, + type: "input", + }, + ]); + + const hjfpHeader = reactive([ + { + prop: "total", + label: "鐢熶骇搴熷搧(鎬昏)", + editable: false, + type: "text", + }, + { + prop: "jianxieNum", + label: "鍓枩", + editable: false, + type: "input", + }, + { + prop: "hanjiebuliangNum", + label: "鐒婃帴涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "waitubuliangNum", + label: "澶栨秱涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "gunjinBlNum", + label: "婊氱瓔涓嶈壇", + editable: false, + type: "input", + }, + + { + prop: "fengkouBlNum", + label: "灏佸彛涓嶈壇", + editable: false, + type: "input", + }, + { + prop: "bieguanNum", + label: "鐦綈", + editable: false, + type: "input", + }, + { + prop: "youguanNum", + label: "娌圭綈", + editable: false, + type: "input", + }, + { + prop: "zangguanNum", + label: "鑴忕綈", + editable: false, + type: "input", + }, + { + prop: "shiyanFpNum", + label: "瀹為獙搴熷搧", + editable: false, + type: "input", + }, + { + prop: "huashangNum", + label: "鍒掍激", + editable: false, + type: "input", + }, + { + prop: "hongkaoBsNum", + label: "鐑樼儰鍙樿壊", + editable: false, + type: "input", + }, + { + prop: "suojinBlNum", + label: "缂╃瓔涓嶈壇", + editable: false, + type: "input", + }, + ]); + const tableHeader = reactive([ + { + prop: "shengchanTime1", + label: "鐢熶骇鏃堕棿", + editable: false, + type: "text", + }, + { + prop: "fuliaoCjTime", + label: "杈呮枡鍘傚/鏃ユ湡", + editable: false, + type: "input", + }, + { + prop: "shengchanPh", + label: "鐢熶骇鎵瑰彿/鍖呭彿", + editable: false, + type: "input", + }, + { + prop: "num", + label: "鏁伴噺", + editable: false, + type: "text", + }, + { + prop: "chanpinBh", + label: "鐢熶骇浜у搧鏉垮彿", + editable: false, + type: "input", + }, + { + prop: "shengchanBs", + label: "鐢熶骇鍖呮暟", + editable: false, + type: "input", + }, + ]); + const rdHeader = reactive([ + { + prop: "jiaobanFs", + label: "鍖呰鏂瑰紡", + editable: false, + type: "text", + }, + { + prop: "jiebanSy", + label: "鎺ョ彮鍓╀綑", + editable: false, + type: "input", + }, + { + prop: "jiaobanSy", + label: "浜ょ彮鍓╀綑", + editable: false, + type: "input", + }, + ]); + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + let hanjiRdData = reactive({ + jiguanRd2List: {}, + feipinYintieList: {}, + feipinJiguanList: {}, + jiguanZhiliangRdList: {}, + jiguanFuliaoRdList: {}, + jiguanRd: {}, + }); + + let SClist = ref([]); + let hjData = ref({}); + let ytfpData = ref([]); + let hjfpData = ref([]); + let zlList = ref([]); + let flList = ref([]); + let rdList = ref([]); + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "搴熷搧缁熻", + b3: "璐ㄩ噺璁板綍", + b4: "杈呮枡妫�鏌ヨ褰�", + }; + let editable = ref(false); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await jiguanVoLast(); + parse(data); + }; + function parse(data) { + headData.head = data.data.head; + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + hanjiRdData.jiguanRd2List = data.data.jiguanRd2List; + console.log("jiguan....", data); + hjData.value = { + ...headData.head, + + ...data.data.jiguanRd, + t1: SClist, + t2: ytfpData, + t3: hjfpData, + t4: zlList, + t5: flList, + }; + + // tableHeader.forEach(e=>{ + // // SClist.push({e.}) + // }) + + SClist.value = data.data.jiguanRd2List; + hjfpData.value = data.data.feipinJiguanList; + ytfpData.value = data.data.feipinYintieList; + zlList.value = data.data.jiguanZhiliangRdList; + flList.value = data.data.jiguanFuliaoRdList; + rdList.value = [data.data.jiguanRd]; + + SClist.value.filter((item) => { + if (item != null) + item.shengchanTime1 = item.shengchanTime.substr(11, 5); + + return item; + }); + + zlList.value.filter((item) => { + if (item != null && item.rdTime != null) + item.rdTime1 = item.rdTime.substr(11, 5); + + return item; + }); + } + const saveData = async () => { + editable = false; + let data = { + jiguanRd2List: SClist.value, + feipinYintieList: ytfpData.value, + feipinJiguanList: hjfpData.value, + jiguanZhiliangRdList: zlList.value, + jiguanFuliaoRdList: flList.value, + jiguanRd: rdList.value[0], + head: headData.head, + }; + console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "闆嗙綈鏈哄伐搴忕敓浜ц川閲忚褰�"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("jiguan2.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + // table: hanjiRdData.hanjiRd, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "闆嗙綈鏈哄伐搴忕敓浜ц川閲忚褰�.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + ytfpHeader, + hjfpHeader, + zlHeader, + flHeader, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + tableHeader, + getListData, + headData, + toImage, + imageWrapper, + SClist, + ytfpData, + hjfpData, + zlList, + flList, + rdList, + rdHeader, + exportWord, + labelName, + editable, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/SCTJtable/Index.vue b/src/views/SCTJtable/Index.vue new file mode 100644 index 0000000..b27893c --- /dev/null +++ b/src/views/SCTJtable/Index.vue @@ -0,0 +1,348 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button + type="primary" + circle + v-show="!editable" + @click="editable = !editable" + >缂栬緫</el-button + > + <el-button type="primary" v-show="editable" @click="saveData" + >纭畾</el-button + > + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>鐢熶骇鍋滄満璁板綍琛�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + + <!-- <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>鍥涚嚎</span> + </div> --> + </div> + <el-divider /> + + <HJTABLE + :SClist="SClist" + :tableHeader="flHeader" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { last, save } from "@/api/SCTJapi"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const flHeader = reactive([ + { + prop: "jitai", + label: "鏈哄彴", + editable: false, + type: "text", + }, + { + prop: "tingjiTime", + label: "鍋滄満鏃堕棿", + editable: false, + type: "input", + }, + { + prop: "guzhangYy", + label: "鏁呴殰鍘熷洜", + editable: false, + type: "input", + }, + { + prop: "tiaozhengFf", + label: "璋冩暣鏂规硶", + editable: false, + type: "text", + }, + { + prop: "jianceItem", + label: "妫�鏌ラ」鐩�", + editable: false, + type: "input", + }, + { + prop: "jianceNum", + label: "妫�鏌ユ暟閲�", + editable: false, + type: "text", + }, + { + prop: "kaijiTime", + label: "寮�鏈烘椂闂�", + editable: false, + type: "input", + }, + { + prop: "jianceJg", + label: "妫�鏌ョ粨鏋�", + editable: false, + type: "text", + }, + { + prop: "querenName", + label: "纭浜�", + editable: false, + type: "input", + }, + { + prop: "tiaozhengTime", + label: "璋冩暣鏃堕暱", + editable: false, + type: "text", + }, + { + prop: "chuliName", + label: "澶勭悊浜�", + editable: false, + type: "input", + }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let SClist = ref([]); + let hjData = ref({}); + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "搴熷搧缁熻", + b3: "璐ㄩ噺璁板綍", + b4: "杈呮枡妫�鏌ヨ褰�", + }; + let editable = ref(false); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await last(); + headData.head = data.data.head; + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + + console.log("jiguan....", data); + hjData.value = { + ...headData.head, + }; + + // tableHeader.forEach(e=>{ + // // SClist.push({e.}) + // }) + + SClist.value = data.data.shengchanTjList; + }; + + const saveData = async () => { + editable = false; + let data = { + shengchanTjList: SClist.value, + head: headData.head, + }; + console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "闆嗙綈鏈哄伐搴忕敓浜ц川閲忚褰�"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("jiguan2.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + // table: hanjiRdData.hanjiRd, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "闆嗙綈鏈哄伐搴忕敓浜ц川閲忚褰�.docx"); + }); + } + getListData(); + onMounted(() => {}); + return { + flHeader, + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + getListData, + headData, + toImage, + imageWrapper, + SClist, + exportWord, + labelName, + editable, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/ZJBGtable/Index.vue b/src/views/ZJBGtable/Index.vue new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/views/ZJBGtable/Index.vue diff --git a/src/views/account/Login.vue b/src/views/account/Login.vue new file mode 100644 index 0000000..fe9c7c9 --- /dev/null +++ b/src/views/account/Login.vue @@ -0,0 +1,450 @@ +<template> + <div id="login" :style="bg"> + <div class="form-wrap"> + <ul class="menu-tab"> + <li> + <h2> + {{ "濂ョ憺閲� MESS 绠$悊骞冲彴" }} + </h2> + </li> + </ul> + <el-form ref="account_form" :model="data.form" class="login-form"> + <el-form-item prop="username"> + <label class="form-label">鐢ㄦ埛鍚�</label> + <el-input ref="usernameRef" v-model="data.form.username"></el-input> + </el-form-item> + <el-form-item prop="password"> + <label class="form-label">瀵嗙爜</label> + <el-input type="password" v-model="data.form.password"></el-input> + </el-form-item> + <!-- <el-form-item prop="yzm"> + <label class="form-label">楠岃瘉鐮�</label> + <el-input v-model="data.form.yzm"></el-input> + </el-form-item> + <el-form-item prop="yzm"> + <img + style="margin-top: 2px; max-width: initial" + :src="randCodeData.randCodeImage" + /> + </el-form-item> --> + + <el-form-item> + <el-button + type="primary" + @click="submitForm" + :loading="data.submit_button_loading" + class="el-button-block" + > + {{ "鐧诲綍" }} + </el-button> + </el-form-item> + </el-form> + </div> + </div> +</template> + +<script> +import { + reactive, + ref, + onBeforeUnmount, + getCurrentInstance, + onMounted, +} from "vue"; +import { useStore } from "vuex"; +import { useRouter } from "vue-router"; + +import { + validate_email, + validate_password, + validate_code, +} from "../../utils/validate"; +// sha1 +import sha1 from "js-sha1"; +// API +// import { GetCode } from "../../api/common"; +import { Register, Login, yzm } from "../../api/account"; +export default { + mounted() { + // 椤甸潰娓叉煋瀹屾垚鏃惰嚜鍔ㄨ仛鐒﹀埌鐢ㄦ埛鍚嶈緭鍏ユ锛宺ef="unameInput" + this.$nextTick(() => { + this.$refs.usernameRef.focus(); + }); + }, + data() { + return { + bg: { + backgroundImage: + "url(" + require("../../assets/images/login_bk.jpg") + ")", + backgroundRepeat: "no-repeat", + // backgroundSize: "cover", + }, + }; + }, + name: "Login", + components: {}, + props: {}, + setup(props) { + const randCodeData = reactive({ + randCodeImage: "", + requestCodeSuccess: false, + checkKey: null, + }); + onMounted(() => { + let getnowTime = new Date().getTime(); + randCodeData.checkKey = getnowTime; + yzm(getnowTime).then((res) => { + randCodeData.randCodeImage = res.result; + }); + }); + const usernameRef = ref(); + const instance = getCurrentInstance(); + // 鑾峰彇瀹炰緥涓婁笅鏂� + const { proxy } = getCurrentInstance(); + // store + const store = useStore(); + // router + const rotuer = useRouter(); + // 鐢ㄦ埛鍚嶆牎楠� + const validate_name_rules = (rule, value, callback) => { + let regEmail = validate_email(value); + if (value === "") { + callback(new Error("璇疯緭鍏ラ偖绠�")); + } else if (!regEmail) { + callback(new Error("閭鏍煎紡涓嶆纭�")); + } else { + callback(); + } + }; + const validate_password_rules = (rule, value, callback) => { + let regPassword = true; //validate_password(value); + // 鑾峰彇鈥滅‘璁ゅ瘑鐮佲�� + const passwordsValue = data.form.passwords; + if (value === "") { + callback(new Error("璇疯緭鍏ュ瘑鐮�")); + } else if (!regPassword) { + callback(new Error("璇疯緭鍏�>=6骞朵笖<=20浣嶇殑瀵嗙爜锛屽寘鍚暟瀛椼�佸瓧姣�")); + } else { + callback(); + } + }; + // 鏍¢獙纭瀵嗙爜 + const validate_passwords_rules = (rule, value, callback) => { + // 濡傛灉鏄櫥褰曪紝涓嶉渶瑕佹牎楠岀‘璁ゅ瘑鐮侊紝榛樿閫氳繃 + if (data.current_menu === "login") { + callback(); + } + let regPassword = validate_password(value); + // 鑾峰彇鈥滃瘑鐮佲�� + const passwordValue = data.form.password; + if (value === "") { + callback(new Error("璇疯緭鍏ュ瘑鐮�")); + } else if (!regPassword) { + callback(new Error("璇疯緭鍏�>=6骞朵笖<=20浣嶇殑瀵嗙爜锛屽寘鍚暟瀛椼�佸瓧姣�")); + } else if (passwordValue && passwordValue !== value) { + callback(new Error("涓ゆ瀵嗙爜涓嶄竴鑷�")); + } else { + callback(); + } + }; + const validate_code_rules = (rule, value, callback) => { + let regCode = validate_code(value); + if (value === "") { + callback(new Error("璇疯緭鍏ラ獙璇佺爜")); + } else if (!regCode) { + callback(new Error("璇疯緭鍏�6浣嶇殑楠岃瘉鐮�")); + } else { + callback(); + } + }; + + const data = reactive({ + form: { + username: "", // 鐢ㄦ埛鍚� + password: "", // 瀵嗙爜 + passwords: "", // 纭瀵嗙爜 + code: "", // 楠岃瘉鐮� + }, + form_rules: { + // username: [{ validator: validate_name_rules, trigger: "change" }], + password: [{ validator: validate_password_rules, trigger: "change" }], + passwords: [{ validator: validate_passwords_rules, trigger: "change" }], + code: [{ validator: validate_code_rules, trigger: "change" }], + }, + tab_menu: [ + { type: "login", label: "鐧诲綍" }, + { type: "register", label: "娉ㄥ唽" }, + ], + current_menu: "login", + /** + * 鑾峰彇楠岃瘉鐮佹寜閽氦浜� + */ + code_button_disabled: false, + code_button_loading: false, + code_button_text: "鑾峰彇楠岃瘉鐮�", + code_button_timer: null, + // 鎻愪氦鎸夐挳 + submit_button_disabled: true, + loading: false, + }); + + // 鑾峰彇楠岃瘉鐮� + const handlerGetCode = () => { + const username = data.form.username; + const password = data.form.password; + const passwords = data.form.passwords; + // 鏍¢獙鐢ㄦ埛鍚� + if (username === null) { + proxy.$message.error({ + message: "鐢ㄦ埛鍚嶄笉鑳戒负绌� 鎴� 鏍煎紡涓嶆纭�", + type: "error", + }); + return false; + } + // 鏍¢獙瀵嗙爜 + if (!validate_password(password)) { + proxy.$message({ + message: "瀵嗙爜涓嶈兘涓虹┖ 鎴� 鏍煎紡涓嶆纭�", + type: "error", + }); + return false; + } + // 鍒ゆ柇闈� 鐧诲綍 鏃讹紝鏍¢獙涓ゆ瀵嗙爜 + if (data.current_menu === "register" && password !== passwords) { + proxy.$message({ + message: "涓ゆ瀵嗙爜涓嶄竴鑷�", + type: "error", + }); + return false; + } + + // 鑾峰彇楠岃瘉鐮佹帴鍙� + const requestData = { + username: data.form.username, + module: data.current_menu, + }; + data.code_button_loading = true; + data.code_button_text = "鍙戦�佷腑"; + // GetCode(requestData) + // .then((response) => { + // const resData = response; + // // 婵�娲绘彁浜ゆ寜閽� + // data.submit_button_disabled = false; + // // 鐢ㄦ埛鍚嶅瓨鍦� + // if (resData.resCode === 1024) { + // proxy.$message.error(resData.message); + // return false; + // } + // // 鎴愬姛 Elementui 鎻愮ず + // proxy.$message({ + // message: resData.message, + // type: "success", + // }); + // // 鎵ц鍊掕鏃� + // countdown(); + // }) + // .catch((error) => { + // data.code_button_loading = false; + // data.code_button_text = "鑾峰彇楠岃瘉鐮�"; + // }); + }; + + /** 鍊掕鏃� */ + const countdown = (time) => { + if (time && typeof time !== "number") { + return false; + } + let second = time || 60; // 榛樿鏃堕棿 + data.code_button_loading = false; // 鍙栨秷鍔犺浇 + data.code_button_disabled = true; // 绂佺敤鎸夐挳 + data.code_button_text = `鍊掕杩�${second}绉抈; // 鎸夐挳鏂囨湰 + // 鍒ゆ柇鏄惁瀛樺湪瀹氭椂鍣紝瀛樺湪鍒欏厛娓呴櫎 + if (data.code_button_timer) { + clearInterval(data.code_button_timer); + } + // 寮�鍚畾鏃跺櫒 + data.code_button_timer = setInterval(() => { + second--; + data.code_button_text = `鍊掕杩�${second}绉抈; // 鎸夐挳鏂囨湰 + if (second <= 0) { + data.code_button_text = `閲嶆柊鑾峰彇`; // 鎸夐挳鏂囨湰 + data.code_button_disabled = false; // 鍚敤鎸夐挳 + clearInterval(data.code_button_timer); // 娓呴櫎鍊掕鏃� + } + }, 1000); + }; + /** 琛ㄥ崟鎻愪氦 */ + const account_form = ref(null); + const submitForm = (formName) => { + account_form.value.validate((valid) => { + login(); + }); + }; + /** 娉ㄥ唽 */ + const register = () => { + const requestData = { + username: data.form.username, + password: sha1(data.form.password), + code: data.form.code, + create: 1, + }; + data.submit_button_loading = true; + Register(requestData) + .then((response) => { + proxy.$message({ + message: response.message, + type: "success", + }); + // reset(); + }) + .catch((error) => { + data.submit_button_loading = false; + }); + }; + /** 鐧诲綍 */ + const login = () => { + // reset(); + const requestData = { + username: data.form.username, + password: data.form.password, + checkKey: randCodeData.checkKey, + captcha: data.form.yzm, + }; + data.submit_button_loading = true; + store + .dispatch("app/loginAction", requestData) + .then((response) => { + data.submit_button_loading = false; + proxy.$message({ + message: "鐧诲綍鎴愬姛", + type: "success", + }); + + //璺敱璺宠浆 + rotuer.push({ path: "/history" }); + reset(); + }) + .catch((error) => { + // proxy.$message({ + // message: "鐧诲綍澶辫触", + // type: "error", + // }); + data.submit_button_loading = false; + console.log("澶辫触"); + }); + }; + + /** 閲嶇疆 */ + const reset = () => { + // 閲嶇疆琛ㄥ崟 + proxy.$refs.form.resetFields(); + // 鍒囧洖鐧诲綍妯″紡 + data.current_menu = "login"; + // 娓呴櫎瀹氭椂鍣� + data.code_button_timer && clearInterval(data.code_button_timer); + // 鑾峰彇楠岃瘉鐮侀噸缃枃鏈� + data.code_button_text = "鑾峰彇楠岃瘉鐮�"; + // 鑾峰彇楠岃瘉鐮佹縺娲� + data.code_button_disabled = false; + // 绂佺敤鎻愪氦鎸夐挳 + data.submit_button_disabled = true; + // 鍙栨秷鎻愪氦鎸夐挳鍔犺浇 + data.submit_button_loading = false; + }; + // 缁勪欢閿�姣佷箣鍓� - 鐢熷懡鍛ㄦ湡 + onBeforeUnmount(() => { + clearInterval(data.code_button_timer); // 娓呴櫎鍊掕鏃� + }); + return { + data, + handlerGetCode, + submitForm, + randCodeData, + account_form, + }; + }, +}; +</script> +<style lang="scss" scoped> +$bg: #2d3a4b; +$dark_gray: #889aa4; +$light_gray: #eee; +$cursor: #fff; +#login { + //height: 200vh; // 璁剧疆楂樺害锛屽眳浜庢祻瑙堝櫒鍙鍖洪珮搴� + background-color: #344a5f; // 璁剧疆鑳屾櫙棰滆壊 + width: 100vw; //澶у皬璁剧疆涓�100% + height: 100vh; //澶у皬璁剧疆涓�100% + position: relative; + background-size: 100% 100%; +} + +.form-wrap { + width: 320px; + position: absolute; + left: 50%; + top: 30%; + transform: translateX(-50%); + background-color: rgba(0, 0, 0, 0.3); + border-radius: 20px; + padding: 40px; + // padding-top: 200px; //涓婂唴杈硅窛 + // margin: auto; // 鍧楀厓绱犳按骞冲眳涓� +} +.menu-tab { + text-align: center; + li { + display: inline-block; + padding: 10px 24px; + margin: 0 10px; + color: #fff; + font-size: 24px; + border-radius: 5px; + cursor: pointer; + &.current { + background-color: rgba(0, 0, 0, 0.1); + } + } +} +.form-label { + display: block; // 杞负鍧楀厓绱� + color: #fff; // 璁剧疆瀛椾綋棰滆壊 + font-size: 14px; // 璁剧疆瀛椾綋澶у皬 +} +.login-form { + // position: relative; + // width: 520px; + // max-width: 100%; + + :deep(.el-form-item) { + // border: 1px solid rgba(255, 255, 255, 0.1); + + // border-radius: 5px; + color: #454545; + } + + :deep(.el-input) { + // display: inline-block; + // height: 47px; + // width: 85%; + background: rgba(0, 0, 0, 0.1); + .el-input__wrapper { + background: transparent; + box-shadow: 0 0 0 0; + border: 0px; + -webkit-appearance: none; + + color: $light_gray; + // height: 47px; + caret-color: $cursor; + input { + color: $light_gray; + } + } + } + // .login-button { + // width: 100%; + // box-sizing: border-box; + // } +} +</style> diff --git a/src/views/b/jihua.vue b/src/views/b/jihua.vue new file mode 100644 index 0000000..e45ce5b --- /dev/null +++ b/src/views/b/jihua.vue @@ -0,0 +1,310 @@ +<!-- <template> + <div id="printContent" ref="imageWrapper"> + <h3>鐢熶骇璁″垝鎵ц鍗�</h3> + + <HJTABLE :SClist="pplan" :tableHeader="pplanHeader" :labelName="labelName.b1" :editable="editable"></HJTABLE> + <HJTABLE :SClist="pplan" :tableHeader="pplanHeader2" :labelName="labelName.b1" :editable="editable"></HJTABLE> + <HJTABLE :SClist="pplan" :tableHeader="pplanHeader3" :labelName="labelName.b1" :editable="editable"></HJTABLE> + <HJTABLE :SClist="pplan" :tableHeader="pplanHeader4" :labelName="labelName.b1" :editable="editable"></HJTABLE> + <HJTABLE :SClist="pplan2" :tableHeader="pplan2Header" :labelName="labelName.b1" :editable="editable"></HJTABLE> + </div> +</template> --> +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button + type="primary" + circle + v-show="!editable" + @click="editable = !editable" + >缂栬緫</el-button + > + <el-button type="primary" v-show="editable" @click="saveData" + >纭畾</el-button + > + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>鐢熶骇璁″垝鎵ц鍗�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime1 }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + + <!-- <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>鍥涚嚎</span> + </div> --> + </div> + <el-divider /> + <HJTABLE :SClist="pplan" :tableHeader="pplanHeader" :editable="editable"></HJTABLE> + <HJTABLE :SClist="pplan" :tableHeader="pplanHeader2" :editable="editable"></HJTABLE> + <HJTABLE :SClist="pplan" :tableHeader="pplanHeader3" :editable="editable"></HJTABLE> + <HJTABLE :SClist="pplan" :tableHeader="pplanHeader4" :editable="editable"></HJTABLE> + <HJTABLE :SClist="pplan2" :tableHeader="pplan2Header" :editable="editable"></HJTABLE> + </div> +</template> +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: "false", + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { b3VoLast, b3save } from "@/api/b"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + + setup(props) { + const router = useRouter(); + const pplanHeader = reactive([{ prop: "shengcx", label: "绾垮埆", editable: "false", type: "text" }, { prop: "cpmc", label: "浜у搧鍚嶇О", editable: "false", type: "text" }, { prop: "cpmc_Model", label: "浜у搧缃愬瀷", editable: "false", type: "text" }, { prop: "gsbh", label: "缃愯韩鐗堝彿", editable: "false", type: "text" }, { prop: "scddh", label: "鐢熶骇璁㈠崟", editable: "false", type: "text" }, { prop: "ddsl", label: "璁㈠崟鏁伴噺", editable: "false", type: "text" }, { prop: "bzfs", label: "鍖呰鏂瑰紡", editable: "false", type: "text" }]); + const pplanHeader2 = reactive([{ prop: "zfg", label: "鑷皝鐩�", editable: "false", type: "text" }, { prop: "phg", label: "閰嶈揣鐩�", editable: "false", type: "text" }, { prop: "bz", label: "澶囨敞", editable: "false", type: "text" }, { prop: "xsdd", label: "閿�鍞鍗�", editable: "false", type: "text" }, { prop: "kh", label: "瀹㈡埛", editable: "false", type: "text" }, { prop: "jhdd", label: "浜よ揣鍦扮偣", editable: "false", type: "text" }]); + const pplanHeader3 = reactive([{ prop: "clgg", label: "鏉愭枡瑙勬牸", editable: "false", type: "text" }, { prop: "kl", label: "寮�鏂�", editable: "false", type: "text" }, { prop: "jypbh", label: "妫�楠屾壒缂栧彿", editable: "false", type: "text" }, { prop: "tzrq", label: "閫氱煡鏃ユ湡", editable: "false", type: "text" }, { prop: "scrq", label: "鐢熶骇鏃ユ湡", editable: "false", type: "text" }, { prop: "wcrq", label: "瀹屾垚鏃ユ湡", editable: "false", type: "text" }, { prop: "zzgy", label: "鍒堕�犲伐鑹�", editable: "false", type: "text" }, { prop: "gydh", label: "宸ヨ壓鍗曞彿", editable: "false", type: "text" }, { prop: "slkz", label: "鏁伴噺鎺у埗", editable: "false", type: "text" }, { prop: "mbrcl", label: "鐩爣鏃ヤ骇閲�", editable: "false", type: "text" }, { prop: "bh", label: "鐗堝彿", editable: "false", type: "text" }]); + const pplanHeader4 = reactive([{ prop: "wlms", label: "鐗╂枡鎻忚堪", editable: "false", type: "text" }, { prop: "cpgg", label: "浜у搧瑙勬牸", editable: "false", type: "text" }, { prop: "gjnj", label: "閽㈠嵎鍐呭緞", editable: "false", type: "text" }, { prop: "bmtl", label: "琛ㄩ潰娑傛枡", editable: "false", type: "text" }, { prop: "kjfs", label: "寮�鍗锋柟寮�", editable: "false", type: "text" }, { prop: "dbzs", label: "鍗曞寘寮犳暟", editable: "false", type: "text" }, { prop: "pcgg", label: "鐗囨潗瑙勬牸", editable: "false", type: "text" }, { prop: "bsxs", label: "鏍囩ず褰㈠紡", editable: "false", type: "text" }, { prop: "sfys", label: "鏄惁鍗板埛", editable: "false", type: "text" }, { prop: "yt", label: "鐢ㄩ��", editable: "false", type: "text" }, { prop: "bianzhi", label: "缂栧埗", editable: "false", type: "text" }]); + + const pplan2Header = reactive([{ prop: "xh", label: "搴忓彿", editable: "false", type: "text" }, { prop: "zjwlbh", label: "缁勪欢鐗╂枡缂栫爜", editable: "false", type: "text" }, { prop: "zjwlms", label: "缁勪欢鐗╂枡鎻忚堪", editable: "false", type: "text" }, { prop: "xqsl", label: "闇�姹傛暟閲�", editable: "false", type: "text" }, { prop: "dw", label: "鍗曚綅", editable: "false", type: "text" }, { prop: "gys", label: "渚涘簲鍟�", editable: "false", type: "text" }]); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "搴熷搧缁熻", + b3: "鐢熶骇搴熷搧", + b4: "璐ㄩ噺璁板綍", + }; + let tableData = reactive([]); + + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + let hanjiRdData = reactive({ + scjhList: {}, + }); + let SClist = ref([]); + let hjData = ref({}); + let ssList = ref([]); + let pplan = ref([]); + let pplan2 = ref([]); + const submitForm = () => { }; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await b3VoLast(); + console.log("鐢熶骇璁″垝銆傘�傘��", data.data); + + headData.head = data.data.head; + pplan.value = [data.data.pplan]; + pplan2.value = data.data.pplan2List + console.log('...pplan',pplan) + // hjData.value = { + // ...headData.head, + // ...hanjiRdData.scjhList, + // }; + + SClist.value = data.data.pplan2List; + + }; + + const saveData = async () => { + editable = false; + + let data = { + scjhList: SClist.value, + head: headData.head, + }; + // console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + // console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: "false", + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("hj.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + // table: hanjiRdData.hanjiRd, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + // console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + getListData(); + onMounted(() => { }); + return { + pplan, + pplan2, + labelName, + b3VoLast, + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + pplanHeader, + pplanHeader2, + pplanHeader3, + pplanHeader4, + pplan2Header, + getListData, + headData, + toImage, + imageWrapper, + SClist, + ssList, + exportWord, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/b/shengchan.vue b/src/views/b/shengchan.vue new file mode 100644 index 0000000..0dbfdf9 --- /dev/null +++ b/src/views/b/shengchan.vue @@ -0,0 +1,351 @@ +<template> + <div id="printContent" ref="imageWrapper"> + <h3>鐢熶骇璁″垝琛�</h3> + + <el-table + :data="SClist" + style="width: 100%" + :header-cell-style="{ 'text-align': 'center', fontSize: '20px' }" + > + <el-table-column label="鐢熶骇璁″垝琛�"> + <!-- <el-table-column + :prop="item.prop" + :label="item.label" + :key="index" + v-if="item" + > --> + <template v-for="(item, index) in tableHeader"> + <el-table-column + :prop="item.prop" + :label="item.label" + :key="index" + v-if="item" + > + </el-table-column> + </template> + </el-table-column> + </el-table> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { b1VoLast, b2VoLast } from "@/api/b"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +export default { + name: "", + components: {}, + props: {}, + + setup(props) { + const tableHeader = reactive([ + { + prop: "xianbie", + label: "绾垮埆", + editable: false, + type: "text", + }, + + { + prop: "dd_shijian", + label: "涓嬭鍗曟棩鏈�", + editable: false, + type: "input", + }, + { + prop: "shijian", + label: "鏃ユ湡", + editable: false, + type: "input", + }, + { + prop: "gx", + label: "缃愬瀷", + editable: false, + type: "text", + }, + { + prop: "cp", + label: "浜у搧鍚嶇О", + editable: false, + type: "input", + }, + { + prop: "jhcl", + label: "璁″垝浜ч噺", + editable: false, + type: "input", + }, + { + prop: "wcl", + label: "瀹屾垚閲�", + editable: false, + type: "input", + }, + { + prop: "dd_cy", + label: "璁㈠崟宸紓", + editable: false, + type: "input", + }, + { + prop: "fhhl", + label: "椋為工璐ч噺", + editable: false, + type: "input", + }, + { + prop: "jhrq", + label: "浜よ揣鏃ユ湡", + editable: false, + type: "input", + }, + { + prop: "fhrq", + label: "鍙戣揣鏃ユ湡", + editable: false, + type: "input", + }, + { + prop: "bh", + label: "鐗堝彿", + editable: false, + type: "input", + }, + { + prop: "gz", + label: "鐩栧瓙", + editable: false, + type: "input", + }, + { + prop: "state", + label: "鐘舵��", + editable: false, + type: "input", + }, + { + prop: "bz", + label: "澶囨敞", + editable: false, + type: "input", + }, + ]); + + let tableData = reactive([]); + + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + let hanjiRdData = reactive({ + scjhList: {}, + }); + let SClist = ref([]); + let hjData = ref({}); + let ssList = ref([]); + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await b1VoLast(); + console.log("鐢熶骇璁″垝銆傘�傘��", data); + headData.head = data.data.head; + hanjiRdData.scjhList = data.data.scjhList; + + hjData.value = { + ...headData.head, + ...hanjiRdData.scjhList, + }; + + // tableHeader.forEach(e=>{ + // // SClist.push({e.}) + // }) + + SClist.value = data.data.scjhList; + + // console.log(SClist); + }; + + const saveData = async () => { + editable = false; + + let data = { + scjhList: SClist.value, + + head: headData.head, + }; + // console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + // console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("hj.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + // table: hanjiRdData.hanjiRd, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + // console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + getListData(); + onMounted(() => {}); + return { + b1VoLast, + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + tableHeader, + getListData, + headData, + toImage, + imageWrapper, + SClist, + ssList, + exportWord, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/b/weixiu.vue b/src/views/b/weixiu.vue new file mode 100644 index 0000000..2160c03 --- /dev/null +++ b/src/views/b/weixiu.vue @@ -0,0 +1,311 @@ +<template> + <div id="printContent" ref="imageWrapper"> + <h3>璁惧妫�淇繚鍏昏鍒掕〃</h3> + + <el-divider /> + + <el-table + :data="SClist" + style="width: 100%" + :header-cell-style="{ 'text-align': 'center', fontSize: '20px' }" + > + <el-table-column label="璁惧妫�淇繚鍏昏鍒掕〃"> + <!-- <el-table-column + :prop="item.prop" + :label="item.label" + :key="index" + v-if="item" + > --> + <template v-for="(item, index) in tableHeader"> + <el-table-column + :prop="item.prop" + :label="item.label" + :key="index" + v-if="item" + > + </el-table-column> + </template> + </el-table-column> + </el-table> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { b1VoLast, b2VoLast } from "@/api/b"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +export default { + name: "", + components: {}, + props: {}, + + setup(props) { + const tableHeader = reactive([ + { + prop: "shebei", + label: "璁惧", + editable: false, + type: "text", + }, + + { + prop: "shijian", + label: "鏃堕棿", + editable: false, + type: "input", + }, + { + prop: "jxnr", + label: "涓昏妫�淇唴瀹�", + editable: false, + type: "input", + }, + { + prop: "jxxs", + label: "妫�淇皬鏃�", + editable: false, + type: "text", + }, + { + prop: "jxry", + label: "妫�淇汉鍛�", + editable: false, + type: "input", + }, + { + prop: "zgqr", + label: "涓荤纭", + editable: false, + type: "input", + }, + { + prop: "state", + label: "鐘舵��", + editable: false, + type: "input", + }, + { + prop: "bz", + label: "澶囨敞", + editable: false, + type: "input", + }, + ]); + + let tableData = reactive([]); + + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + let hanjiRdData = reactive({ + sbjxList: {}, + }); + let SClist = ref([]); + let hjData = ref({}); + let ssList = ref([]); + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await b2VoLast(); + console.log("缁翠慨銆傘�傘��", data); + headData.head = data.data.head; + hanjiRdData.sbjxList = data.data.sbjxList; + + hjData.value = { + ...headData.head, + ...hanjiRdData.sbjxList, + }; + + // tableHeader.forEach(e=>{ + // // SClist.push({e.}) + // }) + + SClist.value = data.data.sbjxList; + + // console.log(SClist); + }; + + const saveData = async () => { + editable = false; + + let data = { + sbjxList: SClist.value, + + head: headData.head, + }; + // console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + // console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("hj.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + // table: hanjiRdData.hanjiRd, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + // console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + getListData(); + onMounted(() => {}); + return { + b2VoLast, + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + tableHeader, + getListData, + headData, + toImage, + imageWrapper, + SClist, + ssList, + exportWord, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/b/zonghe.vue b/src/views/b/zonghe.vue new file mode 100644 index 0000000..537fa54 --- /dev/null +++ b/src/views/b/zonghe.vue @@ -0,0 +1,382 @@ +<template> + <div id="printContent" ref="imageWrapper"> + <h3>缁煎悎淇℃伅</h3> + + + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="zhxxBase" + :tableHeader="tableHeader" + + :editable="editable" + > </HJTABLE> + <HJTABLE + :SClist="zhxxDj1" + :tableHeader="zhxxDj1Header" + + :editable="editable" + > </HJTABLE> + <HJTABLE + :SClist="zhxxDj2" + :tableHeader="zhxxDj2Header" + + :editable="editable" + > + </HJTABLE> + <HJTABLE + :SClist="zhxxFl" + :tableHeader="zhxxFlHeader" + + :editable="editable" + > + </HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { b4VoLast, b4Sava } from "@/api/b"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +export default { + name: "", + + components: { HJTABLE }, + props: {}, + + setup(props) { + const zhxxDj1Header = reactive([ + { prop: "bcp", label: "鍗婃垚鍝�", editable: false, type: "text" }, + { prop: "clrq", label: "澶勭悊鏃ユ湡", editable: false, type: "text" }, + { prop: "clrqz", label: "澶勭悊绛惧瓧", editable: false, type: "text" }, + { prop: "djbh", label: "寰呮缂栧彿", editable: false, type: "text" }, + { prop: "djsl", label: "寰呮鏁伴噺", editable: false, type: "text" }, + { prop: "fjjl", label: "澶嶆璁板綍", editable: false, type: "text" }, + { prop: "fpsl", label: "澶嶆鏁伴噺", editable: false, type: "text" }, + { prop: "gxx", label: "鐩栦俊鎭�", editable: false, type: "text" }, + { prop: "jgpd", label: "缁撴灉鍒ゅ畾", editable: false, type: "text" }, + + + ]); + const zhxxDj2Header = reactive([ + + { prop: "mcgg", label: "鍚嶇О瑙勬牸", editable: false, type: "text" }, + { prop: "qxyy", label: "缂洪櫡鍘熷洜", editable: false, type: "text" }, + { prop: "scpc", label: "鐢熶骇鎵规", editable: false, type: "text" }, + { prop: "txx", label: "閾佷俊鎭�", editable: false, type: "text" }, + { prop: "zhijian", label: "璐ㄦ", editable: false, type: "text" }, + { prop: "zjy", label: "璐ㄦ鍛�", editable: false, type: "text" }, + { prop: "shengcx", label: "鐢熶骇绾�", editable: false, type: "text" }, + { prop: "ycl", label: "鍘熸潗鏂�", editable: false, type: "text" }, + + ]); + const zhxxFlHeader = reactive([ + + { prop: "name", label: "杈呮枡鍚嶇О", editable: false, type: "text" }, + { prop: "num", label: "杈呮枡鏁伴噺", editable: false, type: "text" }, + { prop: "shengcx", label: "鐢熶骇绾�", editable: false, type: "text" }, + { prop: "txx", label: "閾佷俊鎭�", editable: false, type: "text" }, + { prop: "zhijian", label: "璐ㄦ", editable: false, type: "text" }, + { prop: "zjy", label: "璐ㄦ鍛�", editable: false, type: "text" }, + { prop: "shegncx", label: "鐢熶骇绾�", editable: false, type: "text" }, + { prop: "ycl", label: "鍘熸潗鏂�", editable: false, type: "text" }, + + ]); + const tableHeader = reactive([ + { + prop: "cxzt", + label: "浜х嚎鐘舵��", + editable: false, + type: "text", + }, + + { + prop: "dbfp", + label: "褰撶彮搴熷搧鐜�", + editable: false, + type: "input", + }, + { + prop: "kdvHg", + label: "鍚堟牸鍝佺巼", + editable: false, + type: "input", + }, + { + prop: "kdvSj", + label: "鏃堕棿寮�鍔ㄧ巼", + editable: false, + type: "text", + }, + { + prop: "kdvSj", + label: "鎬ц兘寮�鍔ㄧ巼", + editable: false, + type: "input", + }, + { + prop: "yueTotal", + label: "鏈堢粺璁�", + editable: false, + type: "input", + }, + + ]); + + let tableData = reactive([]); + + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let SClist = ref([]); + let hjData = ref({}); + let zhxxBase = ref([]); + let zhxxDj1 = ref([]) + let zhxxDj2 = ref([]) + let zhxxFl = ref([]) + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + const getListData = async () => { + const data = await b4VoLast(); + console.log("鐢熶骇璁″垝銆傘�傘��", data); + headData.head = data.data.head; + zhxxBase.value = [data.data.zhxxBase]; + zhxxDj1.value = [data.data.zhxxDj]; + zhxxDj2.value = [data.data.zhxxDj]; + zhxxFl.value = data.data.zhxxFlList; + hjData.value = { + ...headData.head, + + }; + + // tableHeader.forEach(e=>{ + // // SClist.push({e.}) + // }) + + SClist.value = data.data.scjhList; + + // console.log(SClist); + }; + + const saveData = async () => { + editable = false; + + let data = { + scjhList: SClist.value, + + head: headData.head, + }; + // console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + // console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("hj.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + let doc = new docxtemplater().loadZip(zip); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + + // table: hanjiRdData.hanjiRd, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + // console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鐒婃満/鍚庨亾宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + getListData(); + onMounted(() => {}); + return { + b4VoLast, + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + tableHeader, + zhxxFlHeader, + getListData, + headData, + toImage, + imageWrapper, + SClist, + zhxxBase, + zhxxDj1, + zhxxDj2, + zhxxFl, + exportWord, + zhxxDj1Header, + zhxxDj2Header, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/console/Index.vue b/src/views/console/Index.vue new file mode 100644 index 0000000..3a6a97c --- /dev/null +++ b/src/views/console/Index.vue @@ -0,0 +1,18 @@ +<template> + <div class="">鎺у埗鍙�</div> +</template> + +<script> +import { useStore } from 'vuex' +export default { + name: 'NewsIndex', + components: {}, + props: {}, + setup(props){ + const store = useStore(); + store.dispatch("app/update_count"); + } +} +</script> +<style lang="scss" scoped> +</style> \ No newline at end of file diff --git a/src/views/datamanager/Index.vue b/src/views/datamanager/Index.vue new file mode 100644 index 0000000..7db468e --- /dev/null +++ b/src/views/datamanager/Index.vue @@ -0,0 +1,253 @@ +<template> + <!-- <div class="block"> + <span class="leixing">绫诲瀷</span> + <el-select v-model="value" class="m-2" placeholder="Select" size="large"> + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> + <span class="demonstration">鏃堕棿</span> + <el-date-picker v-model="value" type="date" placeholder="Pick a day" + :shortcuts="shortcuts" :size="size" value-format="YYYY-MM-DD HH:mm:ss"/> + <el-button type="primary" icon="el-icon-search" @click="getListData()">鎼滅储</el-button> + </div> --> + <el-form :inline="true" :model="formInline" class="demo-form-inline"> + <el-form-item label="绫诲瀷"> + <el-select v-model="item" class="m-2" clearable placeholder="Select"> + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> + </el-form-item> + <el-form-item label="鏃堕棿"> + <el-date-picker + v-model="value" + type="date" + placeholder="Pick a day" + :shortcuts="shortcuts" + value-format="YYYY-MM-DD HH:mm:ss" + /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="getListData">Query</el-button> + </el-form-item> + </el-form> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="reportTime1" label="鏃堕棿"> </el-table-column> + <el-table-column prop="chanpin" label="浜у搧" /> + <el-table-column prop="leixing1" label="绫诲瀷" /> + <el-table-column prop="shengcx" label="浜х嚎" /> + <el-table-column prop="banci" label="鐝" /> + <el-table-column prop="id" label="缂栧彿" /> + <el-table-column prop="createDate" label="鏈�鏂版椂闂�" /> + <el-table-column prop="createdby" label="涓婁紶浜�" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-button + size="small" + type="primary" + @click="handleEdit(scope.$index, scope.row)" + >璇︽儏</el-button + > + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> +</template> + +<script> +import { ref, reactive, onMounted } from "vue"; +import { headPage, leixList } from "@/api/head"; +import { useRouter } from "vue-router"; +export default { + name: "NewsIndex", + components: {}, + props: {}, + setup() { + const router = useRouter(); + const value = ref(""); + const item = ref(""); + let tableData = ref([]); + const formLabelWidth = "140px"; + let options = ref([]); + let leixingMap = new Map(); + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 10, + }, + total: 0, + }); + let value2 = ""; + + const shortcuts = [ + { + text: "浠婂ぉ", + value: new Date(), + }, + { + text: "鏄ㄥぉ", + value: () => { + const date = new Date(); + date.setTime(date.getTime() - 3600 * 1000 * 24); + return date; + }, + }, + { + text: "涓�鍛ㄥ墠", + value: () => { + const date = new Date(); + date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); + return date; + }, + }, + ]; + const search = async () => { + pageData.ListData.shijian = value.value; + console.log("data manager....", value.value); + const data = await getListData(pageData.ListData); + + parse(data); + }; + + const getOptions = async () => { + const data = await leixList(); + console.log(".....leixing..", data); + options.value = data.result.map((node) => { + leixingMap.set(node.split("@")[1], node); + return { + value: node.split("@")[1], + label: node.split("@")[0], + }; + }); + console.log(".....leixing..", leixingMap); + }; + getOptions(); + + function handleEdit(index, row) { + // console.log("xxxxxxxxxxxxxxx", index); + console.log( + "xxxxxxxxxxxxxxx", + row.leixing.substr(0, 1) + "0" + row.leixing.substr(1, 1) + ); + // console.log("oooooooooooooooo"); + if (row.leixing.indexOf("g") == 0 && row.leixing.length == 2) { + router.push({ + path: "/" + row.leixing.substr(0, 1) + "0" + row.leixing.substr(1, 1), + query: { + id: row.id, + leixing: row.leixing, + }, + }); + } else + router.push({ + path: "/" + row.leixing, + query: { + id: row.id, + leixing: row.leixing, + }, + }); + + return handleEdit; + } + const formInline = reactive({ + region: "", + }); + const dialogFormVisible = ref(false); + //纭畾鎼滅储鍔ㄤ綔 + const onSubmit = () => {}; + //璇锋眰鍒楄〃鏂规硶leixList + const getListData = async () => { + pageData.ListData.shijian = value.value; + pageData.ListData.leixing = item.value; + const data = await headPage(pageData.ListData); + // console.log("data manager....", data); + + parse(data); + }; + function parse(e) { + console.log(".....search 2", e); + pageData.total = Math.ceil(e.data.total / pageData.ListData.pageSize); + tableData.value = e.data.records; + tableData.value.filter((item) => { + if (item.reportTime != null && item.reportTime.length > 0) { + options.value; + item.reportTime1 = item.reportTime.substr(0, 10); + item.leixing1 = leixingMap.get(item.leixing); + } + + return item; + }); + } + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + + getListData(); + }; + //鍒犻櫎鐢ㄦ埛 + const handleDelete = (val) => { + // console.log(val); + }; + //鏂板鐢ㄦ埛 + const addUser = () => {}; + + getListData(); + + function showState(row, column, cellValue, index) { + // console.log("row", row); + // console.log("col", column); + // console.log("cel", cellValue); + // console.log("index", index); + if (cellValue === 0) return "姝e父"; + else return "寮傚父"; + } + return { + item, + value, + getListData, + pageData, + options, + onSubmit, + formInline, + tableData, + handleCurrentChange, + handleDelete, + showState, + dialogFormVisible, + formLabelWidth, + addUser, + handleEdit, + + shortcuts, + search, + leixingMap, + }; + }, +}; +</script> +<style lang="scss" scoped> +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} + +.header_nox { + text-align: right; +} +</style> diff --git a/src/views/datamanager/screenTable.vue b/src/views/datamanager/screenTable.vue new file mode 100644 index 0000000..0b583ca --- /dev/null +++ b/src/views/datamanager/screenTable.vue @@ -0,0 +1,115 @@ +<template> + <el-form :inline="true" :model="formInline" class="demo-form-inline"> + <el-form-item label="閫夋嫨鍒楄〃"> + <el-select v-model="formInline.region" class="m-2" placeholder="Select"> + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="onSubmit">Query</el-button> + </el-form-item> + </el-form> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="date" label="Date" /> + <el-table-column prop="name" label="Name" /> + <el-table-column prop="address" label="Address" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-button size="small" @click="details(scope.$index)" + >鏌ョ湅璇︽儏</el-button + > + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> +</template> + +<script> +import { ref, reactive, onMounted } from "vue"; +export default { + name: "NewsIndex", + components: {}, + props: {}, + setup(props) { + const value = ref(""); + const tableData = reactive([]); + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 10, + }, + total: 0, + }); + const options = [ + { + value: "Option1", + label: "Option1", + }, + { + value: "Option2", + label: "Option2", + }, + { + value: "Option3", + label: "Option3", + }, + { + value: "Option4", + label: "Option4", + }, + { + value: "Option5", + label: "Option5", + }, + ]; + const formInline = reactive({ + region: "", + }); + //纭畾鎼滅储鍔ㄤ綔 + const onSubmit = () => {}; + //璇锋眰鍒楄〃鏂规硶 + const getlistData = () => { + //璁$畻鍒嗛〉鏁伴噺 + // pageData.total = Math.ceil(data.data.total / pageData.ListData.pageSize) + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + + getlistData(); + }; + //鏌ョ湅璇︽儏鎸夐挳 + const details = (val) => {}; + return { + value, + pageData, + options, + onSubmit, + formInline, + tableData, + handleCurrentChange, + details, + }; + }, +}; +</script> +<style lang="scss" scoped> +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} +</style> diff --git a/src/views/gaixian/Index.vue b/src/views/gaixian/Index.vue new file mode 100644 index 0000000..49da340 --- /dev/null +++ b/src/views/gaixian/Index.vue @@ -0,0 +1,231 @@ +<template> + <div class="block"> + <span class="demonstration">鏃堕棿</span> + <el-date-picker v-model="value2" type="date" placeholder="Pick a day" :disabled-date="disabledDate" + :shortcuts="shortcuts" :size="size" /> + </div> + + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="chanpin" label="浜у搧" /> + <el-table-column prop="leixing" label="绫诲瀷" /> + <el-table-column prop="reportTime" label="鏃堕棿"> + + </el-table-column> + <el-table-column prop="banci" label="鐝" /> + <el-table-column prop="id" label="缂栧彿" /> + <el-table-column prop="createDate" label="鏈�鏂版椂闂�" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">璇︽儏</el-button> + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination background layout="prev, pager, next" :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" @current-change="handleCurrentChange" /> + </div> +</template> + +<script> +import { ref, reactive } from "vue"; +import { headPage } from "@/api/head"; +import { useRouter } from "vue-router"; +export default { + name: "NewsIndex", + components: {}, + props: {}, + setup() { + const router = useRouter(); + const value = ref(""); + let tableData = ref([]); + const formLabelWidth = "140px"; + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 15, + }, + total: 0, + }); + let value2 = ''; + const shortcuts = [ + { + text: '浠婂ぉ', + value: new Date(), + }, + { + text: '鏄ㄥぉ', + value: () => { + const date = new Date() + date.setTime(date.getTime() - 3600 * 1000 * 24) + return date + }, + }, + { + text: '涓�鍛ㄥ墠', + value: () => { + const date = new Date() + date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) + return date + }, + }, + ] + + const disabledDate = (time) => { + return time.getTime() > Date.now(); + } + const options = [ + { + value: "Option1", + label: "Option1", + }, + { + value: "Option2", + label: "Option2", + }, + { + value: "Option3", + label: "Option3", + }, + { + value: "Option4", + label: "Option4", + }, + { + value: "Option5", + label: "Option5", + }, + ]; + function handleEdit(index, row) { + // console.log("xxxxxxxxxxxxxxx", index); + // console.log("xxxxxxxxxxxxxxx", row); + // console.log("oooooooooooooooo"); + if (row.leixing == "A0") + router.push({ + path: "/Bianxk", + query: { + id: row.id, + leixing: row.leixing, + }, + }); + if (row.leixing == "A1") + router.push({ + path: "/JBJtable", + query: { + id: row.id, + leixing: row.leixing, + }, + }); + if (row.leixing == "A6") + router.push({ + path: "/DBtable", + query: { + id: row.id, + leixing: row.leixing, + }, + }); + if (row.leixing == "A2") + router.push({ + path: "/HJtable", + query: { + id: row.id, + leixing: row.leixing, + }, + }); + if (row.leixing == "A3") + router.push({ + path: "/FBtable", + query: { + id: row.id, + leixing: row.leixing, + }, + }); + if (row.leixing == "A4") + router.push({ + path: "/JGGXtable", + query: { + id: row.id, + leixing: row.leixing, + }, + }); + if (row.leixing == "A5") + router.push({ + path: "/JGJtable", + query: { + id: row.id, + leixing: row.leixing, + }, + }); + if (row.leixing == "A7") + router.push({ + path: "/GXtable", + query: { + id: row.id, + leixing: row.leixing, + }, + }); + return handleEdit; + } + const formInline = reactive({ + region: "", + }); + const dialogFormVisible = ref(false); + //纭畾鎼滅储鍔ㄤ綔 + const onSubmit = () => { }; + //璇锋眰鍒楄〃鏂规硶 + const getListData = async () => { + const data = await headPage(pageData.ListData); + // console.log("data manager....", data); + pageData.total = Math.ceil(data.data.total / pageData.ListData.pageSize); + tableData.value = data.data.records; + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + getListData(); + }; + //鍒犻櫎鐢ㄦ埛 + const handleDelete = (val) => { + // console.log(val); + }; + //鏂板鐢ㄦ埛 + const addUser = () => { }; + getListData(); + function showState(row, column, cellValue, index) { + // console.log("row", row); + // console.log("col", column); + // console.log("cel", cellValue); + // console.log("index", index); + if (cellValue === 0) return "姝e父"; + else return "寮傚父"; + } + return { + value, + pageData, + options, + onSubmit, + formInline, + tableData, + handleCurrentChange, + handleDelete, + showState, + dialogFormVisible, + formLabelWidth, + addUser, + handleEdit, + disabledDate, + shortcuts + }; + }, +}; +</script> +<style lang="scss" scoped> +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} + +.header_nox { + text-align: right; +} +</style> diff --git a/src/views/gaixian/g01.vue b/src/views/gaixian/g01.vue new file mode 100644 index 0000000..a1ed205 --- /dev/null +++ b/src/views/gaixian/g01.vue @@ -0,0 +1,405 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>502#搴曠洊鍐插簥宸ュ簭鐢熶骇璐ㄩ噺璁板綍</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="c_tieqkHeaderData" + :tableHeader="c_tieqkHeader" + :labelName="labelName.b1" + :editable="editable" + > + </HJTABLE> + <HJTABLE + :SClist="c_spHeaderData" + :tableHeader="c_spHeader" + :labelName="labelName.b2" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="c_baseHeaderData" + :tableHeader="c_baseHeader" + :labelName="labelName.b3" + :editable="editable" + > + </HJTABLE> + + <HJTABLE + :SClist="c_wgHeaderData" + :tableHeader="c_wgHeader" + :labelName="labelName.b4" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chongVoLast, chongVoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + + const c_spHeader = reactive([ + { prop: "shijian11", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "sudu", label: "閫熷害", editable: "false", type: "text" }, + { prop: "yali", label: "鍘嬪姏", editable: "false", type: "text" }, + ]); + + const c_baseHeader = reactive([ + { prop: "shijian11", label: "鏃堕棿", editable: false, type: "text" }, + { prop: "xm", label: "妫�娴嬮」鐩�", editable: false, type: "text" }, + { prop: "bzz", label: "鏍囧噯鍊�", editable: false, type: "text" }, + { prop: "no1", label: "1#妯�", editable: false, type: "text" }, + { prop: "no2", label: "2#妯�", editable: false, type: "text" }, + { prop: "no3", label: "3#妯�", editable: false, type: "text" }, + ]); + const c_tieqkHeader = reactive([ + { prop: "jiebtsy", label: "鎺ョ彮閾佸墿浣�", editable: false, type: "text" }, + { prop: "jiaobtsy", label: "浜ょ彮閾佸墿浣�", editable: false, type: "text" }, + { prop: "ctzl", label: "鍐查搧鎬婚噺", editable: false, type: "text" }, + { prop: "kgs", label: "浜忕洊鏁�", editable: false, type: "text" }, + { prop: "yf", label: "鍗板簾", editable: false, type: "text" }, + { prop: "fp", label: "搴熷搧", editable: false, type: "text" }, + ]); + const c_wgHeader = reactive([ + { prop: "shijian11", label: "鏃堕棿", editable: false, type: "text" }, + { prop: "wgjc", label: "澶栬妫�娴�", editable: false, type: "text" }, + { prop: "qxyy", label: "缂洪櫡鍘熷洜", editable: false, type: "text" }, + { prop: "cstz", label: "鎺柦璋冩暣", editable: false, type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "閾佷娇鐢ㄦ儏鍐�", + b2: "鐢熶骇閫熷害涓庡帇鍔�", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let c_baseHeaderData = ref([]); + let c_tieqkHeaderData = ref([]); + let c_tieqkHeaderDataMap = ref({}); + let c_wgHeaderData = ref([]); + let c_spHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + function splitList(start, end) { + var tlist; + if (c_baseHeaderData.value.length >= end) { + tlist = c_baseHeaderData.value.splice(start, end); + } else { + tlist = []; + } + console.log("tlist.....", tlist); + return tlist; + } + + const getListData = async () => { + const data = await chongVoLast(); + parse(data); + }; + function parse(data) { + console.log(".........", data); + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + c_baseHeaderData.value = data.data.cbaseList; + c_tieqkHeaderData.value = [data.data.ctieqk]; + c_tieqkHeaderDataMap = data.data.ctieqk; + + c_wgHeaderData.value = data.data.cwgList; + c_spHeaderData.value = data.data.cSpList; + c_baseHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); + + return item; + }); + c_wgHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); + + return item; + }); + c_spHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); + + return item; + }); + + hjData.value = { + ...headData.head, + ...c_tieqkHeaderDataMap, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + cbaseList: c_baseHeaderData.value, + ctieqk: c_tieqkHeaderData.value[0], + cwgList: c_wgHeaderData.value, + cSpList: c_spHeaderData.value, + }; + console.log("save data...", data); + const dt = await chongVoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "搴曠洊鍐插簥宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g01.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + t1: c_spHeaderData.value, + t2: c_baseHeaderData.value, + t3: c_wgHeaderData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "502搴曠洊鍐插簥宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + c_baseHeaderData, + c_tieqkHeaderData, + c_wgHeaderData, + c_baseHeader, + c_tieqkHeader, + c_wgHeader, + c_spHeaderData, + c_spHeader, + chongVoLast, + chongVoSave, + c_tieqkHeaderDataMap, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g02.vue b/src/views/gaixian/g02.vue new file mode 100644 index 0000000..7a4b01e --- /dev/null +++ b/src/views/gaixian/g02.vue @@ -0,0 +1,348 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>鍐插簥鏃ュ父鐐规琛�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="c2_checkHeaderData" + :tableHeader="c2_checkHeader" + :editable="editable" + > + </HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong02VoLast, chong02VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const c2_checkHeader = reactive([ + { prop: "no", label: "搴忓彿", editable: "false", type: "text" }, + { prop: "sbbw", label: "璁惧閮ㄤ綅", editable: "false", type: "text" }, + { prop: "gj", label: "宸ュ叿", editable: "false", type: "text" }, + { prop: "banci", label: "鐝", editable: "false", type: "text" }, + { prop: "pdbz", label: "鍒ゆ柇鏍囧噯", editable: "false", type: "text" }, + { prop: "shijian", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "t1", label: "1", editable: "false", type: "text" }, + { prop: "t2", label: "2", editable: "false", type: "text" }, + { prop: "t3", label: "3", editable: "false", type: "text" }, + { prop: "t4", label: "4", editable: "false", type: "text" }, + { prop: "t5", label: "5", editable: "false", type: "text" }, + { prop: "t6", label: "6", editable: "false", type: "text" }, + { prop: "t7", label: "7", editable: "false", type: "text" }, + { prop: "t8", label: "8", editable: "false", type: "text" }, + { prop: "t9", label: "9", editable: "false", type: "text" }, + { prop: "t10", label: "10", editable: "false", type: "text" }, + { prop: "t11", label: "11", editable: "false", type: "text" }, + { prop: "t12", label: "12", editable: "false", type: "text" }, + { prop: "t13", label: "13", editable: "false", type: "text" }, + { prop: "t14", label: "14", editable: "false", type: "text" }, + { prop: "t15", label: "15", editable: "false", type: "text" }, + { prop: "t16", label: "16", editable: "false", type: "text" }, + { prop: "t17", label: "17", editable: "false", type: "text" }, + { prop: "t18", label: "18", editable: "false", type: "text" }, + { prop: "t19", label: "19", editable: "false", type: "text" }, + { prop: "t20", label: "20", editable: "false", type: "text" }, + { prop: "t21", label: "21", editable: "false", type: "text" }, + { prop: "t22", label: "22", editable: "false", type: "text" }, + { prop: "t23", label: "23", editable: "false", type: "text" }, + { prop: "t24", label: "24", editable: "false", type: "text" }, + { prop: "t25", label: "25", editable: "false", type: "text" }, + { prop: "t26", label: "26", editable: "false", type: "text" }, + { prop: "t27", label: "27", editable: "false", type: "text" }, + { prop: "t28", label: "28", editable: "false", type: "text" }, + { prop: "t29", label: "29", editable: "false", type: "text" }, + { prop: "t30", label: "30", editable: "false", type: "text" }, + { prop: "t31", label: "31", editable: "false", type: "text" }, + ]); + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "閾佷娇鐢ㄦ儏鍐�", + b2: "鐢熶骇閫熷害涓庡帇鍔�", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let c2_checkHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong02VoLast(); + + parse(data); + }; + function parse(data) { + console.log(".........", data); + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + c2_checkHeaderData.value = data.data.c2CheckList; + + hjData.value = { + ...headData.head, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + c2CheckList: c2_checkHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong02VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "缃愮嚎鐢熶骇鎯呭喌鎶ヨ〃"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g02.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + t1: c2_checkHeaderData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鍐插簥鏃ュ父鐐规琛�.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + c2_checkHeaderData, + c2_checkHeader, + chong02VoLast, + chong02VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g03.vue b/src/views/gaixian/g03.vue new file mode 100644 index 0000000..e27bf1c --- /dev/null +++ b/src/views/gaixian/g03.vue @@ -0,0 +1,307 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>鍐插簥鍛ㄦ鼎婊戣褰�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="c3_weekHeaderData" + :tableHeader="c3_weekHeader" + :editable="editable" + > + </HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong03VoLast, chong03VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const c3_weekHeader = reactive([ + { prop: "no", label: "搴忓彿", editable: "false", type: "text" }, + { prop: "zq", label: "鍛ㄦ湡", editable: "false", type: "text" }, + { prop: "rhbw", label: "娑︽粦閮ㄤ綅", editable: "false", type: "text" }, + { prop: "ffgj", label: "鏂规硶宸ュ叿", editable: "false", type: "text" }, + { prop: "gj", label: "宸ュ叿", editable: "false", type: "text" }, + { prop: "zyl", label: "娉ㄦ补閲�", editable: "false", type: "text" }, + { prop: "pdbz", label: "鍒ゆ柇鏍囧噯", editable: "false", type: "text" }, + { prop: "banci", label: "鐝", editable: "false", type: "text" }, + { prop: "week1", label: "绗竴鍛�", editable: "false", type: "text" }, + { prop: "week2", label: "绗簩鍛�", editable: "false", type: "text" }, + { prop: "week3", label: "绗笁鍛�", editable: "false", type: "text" }, + { prop: "week4", label: "绗洓鍛�", editable: "false", type: "text" }, + { prop: "oper1", label: "鎿嶄綔鍛�1", editable: "false", type: "text" }, + { prop: "oper2", label: "鎿嶄綔鍛�2", editable: "false", type: "text" }, + { prop: "lingb1", label: "棰嗙彮1", editable: "false", type: "text" }, + { prop: "lingb2", label: "棰嗙彮2", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "閾佷娇鐢ㄦ儏鍐�", + + b2: "鐢熶骇閫熷害涓庡帇鍔�", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let c3_weekHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong03VoLast(); + console.log(".........", data); + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + c3_weekHeaderData.value = data.data.c3WeekList; + + hjData.value = { + ...headData.head, + t1: c3_weekHeaderData.value, + }; + }; + + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + c3WeekList: c3_weekHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong03VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鍐插簥鍛ㄦ鼎婊戣褰�"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g03.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鍐插簥鍛ㄦ鼎婊戣褰�.docx"); + }); + } + getListData(); + onMounted(() => {}); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + c3_weekHeader, + c3_weekHeaderData, + chong03VoLast, + chong03VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g04.vue b/src/views/gaixian/g04.vue new file mode 100644 index 0000000..278c0c8 --- /dev/null +++ b/src/views/gaixian/g04.vue @@ -0,0 +1,322 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>鍐插簥娓呮磥璁板綍</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="c4_cleanHeaderData" + :tableHeader="c4_cleanHeader" + :editable="editable" + > + </HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong04VoLast, chong04VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const c4_cleanHeader = reactive([ + { prop: "qjbw", label: "娓呮磥閮ㄤ綅", editable: "false", type: "text" }, + { prop: "qjbz", label: "娓呮磥鏍囧噯", editable: "false", type: "text" }, + { prop: "shijian11", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "zeren", label: "璐d换浜�", editable: "false", type: "text" }, + { prop: "jcr", label: "妫�鏌ヤ汉", editable: "false", type: "text" }, + { prop: "xg", label: "娓呮磥鍚庡崼鐢熸晥鏋�", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "閾佷娇鐢ㄦ儏鍐�", + b2: "鐢熶骇閫熷害涓庡帇鍔�", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let c4_cleanHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong04VoLast(); + console.log(".........", data); + + parse(data); + }; + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + c4_cleanHeaderData.value = data.data.c4CleanList; + c4_cleanHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); + + return item; + }); + hjData.value = { + ...headData.head, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + c4CleanList: c4_cleanHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong04VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鍐插簥娓呮磥璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g04.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + t1: c4_cleanHeaderData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鍐插簥娓呮磥璁板綍.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + c4_cleanHeader, + c4_cleanHeaderData, + chong04VoLast, + chong04VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g05.vue b/src/views/gaixian/g05.vue new file mode 100644 index 0000000..86f8c97 --- /dev/null +++ b/src/views/gaixian/g05.vue @@ -0,0 +1,396 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>502#搴曠洊娉ㄨ兌宸ュ簭鐢熶骇璐ㄩ噺璁板綍5</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime1 }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="zj5_mfjHeaderData" + :tableHeader="zj5_mfjHeader" + :labelName="labelName.b1" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="zj5_spHeaderData" + :tableHeader="zj5_spHeader" + :labelName="labelName.b2" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="zj5_baseHeaderData" + :tableHeader="zj5_baseHeader" + :labelName="labelName.b3" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="zj5_wgHeaderData" + :tableHeader="zj5_wgHeader" + :labelName="labelName.b4" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong05VoLast, chong05VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const zj5_baseHeader = reactive([ + { prop: "shijian33", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "no1", label: "1#妯�", editable: "false", type: "text" }, + { prop: "no2", label: "2#妯�", editable: "false", type: "text" }, + { prop: "no3", label: "3#妯�", editable: "false", type: "text" }, + { prop: "no4", label: "4#妯�", editable: "false", type: "text" }, + { prop: "hxw", label: "鐑樼娓�", editable: "false", type: "text" }, + { prop: "ycw", label: "寮傚父娓�", editable: "false", type: "text" }, + { prop: "tzcs", label: "璋冩暣鎺柦", editable: "false", type: "text" }, + { prop: "tzr", label: "璋冩暣浜虹瀛�", editable: "false", type: "text" }, + ]); + const zj5_mfjHeader = reactive([ + { prop: "mfjcj", label: "瀵嗗皝鑳跺巶瀹�", editable: "false", type: "text" }, + { + prop: "mfjxh_ph", + label: "瀵嗗皝鑳跺瀷鍙�/鎵瑰彿", + editable: "false", + type: "text", + }, + { prop: "yjl", label: "鐢ㄨ兌閲�", editable: "false", type: "text" }, + { prop: "fp", label: "搴熷搧", editable: "false", type: "text" }, + ]); + const zj5_spHeader = reactive([ + { prop: "shijian11", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "sudu", label: "閫熷害", editable: "false", type: "text" }, + { prop: "yali", label: "鍘嬪姏", editable: "false", type: "text" }, + ]); + const zj5_wgHeader = reactive([ + { prop: "shijian22", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "wgjc", label: "澶栬妫�娴�", editable: "false", type: "text" }, + { prop: "qxyy", label: "缂洪櫡鍘熷洜", editable: "false", type: "text" }, + { prop: "cstz", label: "鎺柦璋冩暣", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "瀵嗗皝鑳朵娇鐢ㄨ褰�", + b2: "娉ㄨ兌鏈洪�熷害璁板綍", + b3: "浜у搧璐ㄩ噺璁板綍", + b4: "澶栬璐ㄩ噺妫�楠�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let zj5_baseHeaderData = ref([]); + let zj5_mfjHeaderData = ref([]); + let zj5_mfjHeaderDataMap = ref({}); + let zj5_spHeaderData = ref([]); + let zj5_wgHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong05VoLast(); + console.log(".........", data); + parse(data); + }; + function parse(data) { + headData.head = data.data.head; + headData.head.reportTime1 = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + zj5_baseHeaderData.value = data.data.zj5BaseList; + (zj5_mfjHeaderData.value = [ + data.data.zj5Mfj == null ? "" : data.data.zj5Mfj, + ]), + (zj5_mfjHeaderDataMap = + data.data.zj5Mfj == null ? "" : data.data.zj5Mfj), + (zj5_spHeaderData.value = data.data.zj5SpList), + (zj5_wgHeaderData.value = data.data.zj5WgList), + zj5_spHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); + + return item; + }); + zj5_wgHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian22 = item.shijian.substr(11, 5); + + return item; + }); + zj5_baseHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian33 = item.shijian.substr(11, 5); + + return item; + }); + hjData.value = { + ...headData.head, + ...zj5_mfjHeaderDataMap, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + zj5BaseList: zj5_baseHeaderData.value, + zj5Mfj: zj5_mfjHeaderData.value[0], + zj5SpList: zj5_spHeaderData.value, + zj5WgList: zj5_wgHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong05VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "搴曠洊娉ㄨ兌宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g05.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + t1: zj5_spHeaderData.value, + t2: zj5_baseHeaderData.value, + t3: zj5_wgHeaderData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "搴曠洊娉ㄨ兌宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + zj5_baseHeaderData, + zj5_mfjHeaderData, + zj5_spHeaderData, + zj5_wgHeaderData, + zj5_baseHeader, + zj5_mfjHeader, + zj5_spHeader, + zj5_wgHeader, + chong05VoLast, + chong05VoSave, + zj5_mfjHeaderDataMap, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g06.vue b/src/views/gaixian/g06.vue new file mode 100644 index 0000000..3ca99ed --- /dev/null +++ b/src/views/gaixian/g06.vue @@ -0,0 +1,345 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>娉ㄨ兌鏈烘棩甯哥淮鎶ょ偣妫�琛�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="zj6_checkHeaderData" + :tableHeader="zj6_checkHeader" + :editable="editable" + > + </HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong06VoLast, chong06VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const zj6_checkHeader = reactive([ + { prop: "no", label: "搴忓彿", editable: "false", type: "text" }, + { prop: "sbbw", label: "璁惧閮ㄤ綅", editable: "false", type: "text" }, + { prop: "gj", label: "宸ュ叿", editable: "false", type: "text" }, + { prop: "banci", label: "鐝", editable: "false", type: "text" }, + { prop: "pdbz", label: "鍒ゆ柇鏍囧噯", editable: "false", type: "text" }, + { prop: "shijian", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "t1", label: "1", editable: "false", type: "text" }, + { prop: "t2", label: "2", editable: "false", type: "text" }, + { prop: "t3", label: "3", editable: "false", type: "text" }, + { prop: "t4", label: "4", editable: "false", type: "text" }, + { prop: "t5", label: "5", editable: "false", type: "text" }, + { prop: "t6", label: "6", editable: "false", type: "text" }, + { prop: "t7", label: "7", editable: "false", type: "text" }, + { prop: "t8", label: "8", editable: "false", type: "text" }, + { prop: "t9", label: "9", editable: "false", type: "text" }, + { prop: "t10", label: "10", editable: "false", type: "text" }, + { prop: "t11", label: "11", editable: "false", type: "text" }, + { prop: "t12", label: "12", editable: "false", type: "text" }, + { prop: "t13", label: "13", editable: "false", type: "text" }, + { prop: "t14", label: "14", editable: "false", type: "text" }, + { prop: "t15", label: "15", editable: "false", type: "text" }, + { prop: "t16", label: "16", editable: "false", type: "text" }, + { prop: "t17", label: "17", editable: "false", type: "text" }, + { prop: "t18", label: "18", editable: "false", type: "text" }, + { prop: "t19", label: "19", editable: "false", type: "text" }, + { prop: "t20", label: "20", editable: "false", type: "text" }, + { prop: "t21", label: "21", editable: "false", type: "text" }, + { prop: "t22", label: "22", editable: "false", type: "text" }, + { prop: "t23", label: "23", editable: "false", type: "text" }, + { prop: "t24", label: "24", editable: "false", type: "text" }, + { prop: "t25", label: "25", editable: "false", type: "text" }, + { prop: "t26", label: "26", editable: "false", type: "text" }, + { prop: "t27", label: "27", editable: "false", type: "text" }, + { prop: "t28", label: "28", editable: "false", type: "text" }, + { prop: "t29", label: "29", editable: "false", type: "text" }, + { prop: "t30", label: "30", editable: "false", type: "text" }, + { prop: "t31", label: "31", editable: "false", type: "text" }, + ]); + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "閾佷娇鐢ㄦ儏鍐�", + b2: "鐢熶骇閫熷害涓庡帇鍔�", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let zj6_checkHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong06VoLast(); + console.log(".........", data); + parse(data); + }; + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + zj6_checkHeaderData.value = data.data.c2CheckList; + hjData.value = { + ...headData.head, + x1: zj6_checkHeaderData.value, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + c2CheckList: zj6_checkHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong06VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "娉ㄨ兌鏈烘棩甯哥淮鎶ょ偣妫�琛�"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g06.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "娉ㄨ兌鏈烘棩甯哥淮鎶ょ偣妫�琛�.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + zj6_checkHeader, + zj6_checkHeaderData, + chong06VoLast, + chong06VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g07.vue b/src/views/gaixian/g07.vue new file mode 100644 index 0000000..b488f5b --- /dev/null +++ b/src/views/gaixian/g07.vue @@ -0,0 +1,337 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>娉ㄨ兌鏈哄懆娑︽粦璁板綍</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="zj7_weekHeaderData" + :tableHeader="zj7_weekHeader" + :editable="editable" + > + </HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong07VoLast, chong07VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const zj7_weekHeader = reactive([ + { prop: "no", label: "搴忓彿", editable: "false", type: "text" }, + { prop: "zq", label: "鍛ㄦ湡", editable: "false", type: "text" }, + { prop: "whbw", label: "缁存姢閮ㄤ綅", editable: "false", type: "text" }, + { prop: "ffgj", label: "鏂规硶宸ュ叿", editable: "false", type: "text" }, + { prop: "zyl", label: "娉ㄦ补閲�", editable: "false", type: "text" }, + { prop: "pdbz", label: "鍒ゆ柇鏍囧噯", editable: "false", type: "text" }, + { prop: "banci", label: "鐝", editable: "false", type: "text" }, + { prop: "week1", label: "绗竴鍛�", editable: "false", type: "text" }, + { prop: "week2", label: "绗簩鍛�", editable: "false", type: "text" }, + { prop: "week3", label: "绗笁鍛�", editable: "false", type: "text" }, + { prop: "week4", label: "绗洓鍛�", editable: "false", type: "text" }, + { prop: "TENANT_ID", label: "绉熸埛鍙�", editable: "false", type: "text" }, + { prop: "REVISION", label: "涔愯閿�", editable: "false", type: "text" }, + { prop: "CREATED_BY", label: "鍒涘缓浜�", editable: "false", type: "text" }, + { + prop: "CREATED_TIME", + label: "鍒涘缓鏃堕棿", + editable: "false", + type: "text", + }, + { prop: "UPDATED_BY", label: "鏇存柊浜�", editable: "false", type: "text" }, + { + prop: "UPDATED_TIME", + label: "鏇存柊鏃堕棿", + editable: "false", + type: "text", + }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "閾佷娇鐢ㄦ儏鍐�", + b2: "鐢熶骇閫熷害涓庡帇鍔�", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let zj7_weekHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong07VoLast(); + console.log(".........g07", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + zj7_weekHeaderData.value = data.data.c2CheckList; + hjData.value = { + ...headData.head, + x1: zj7_weekHeaderData.value, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + c2CheckList: zj7_weekHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong07VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "娉ㄨ兌鏈哄懆娑︽粦璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g07.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "娉ㄨ兌鏈哄懆娑︽粦璁板綍.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + zj7_weekHeader, + zj7_weekHeaderData, + chong07VoLast, + chong07VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g08.vue b/src/views/gaixian/g08.vue new file mode 100644 index 0000000..de7c182 --- /dev/null +++ b/src/views/gaixian/g08.vue @@ -0,0 +1,322 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>娉ㄨ兌鏈烘竻娲佽褰�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="zj8_cleanHeaderData" + :tableHeader="zj8_cleanHeader" + :editable="editable" + > + </HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong08VoLast, chong08VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const zj8_cleanHeader = reactive([ + { prop: "qjbw", label: "娓呮磥閮ㄤ綅", editable: "false", type: "text" }, + { prop: "qjbz", label: "娓呮磥鏍囧噯", editable: "false", type: "text" }, + { prop: "shijian11", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "zeren", label: "璐d换浜�", editable: "false", type: "text" }, + { prop: "jcr", label: "妫�鏌ヤ汉", editable: "false", type: "text" }, + { prop: "xg", label: "娉ㄨ兌鏈烘竻娲佽褰�", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "閾佷娇鐢ㄦ儏鍐�", + b2: "鐢熶骇閫熷害涓庡帇鍔�", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let zj8_cleanHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong08VoLast(); + + console.log(".........g08", data); + parse(data); + }; + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + zj8_cleanHeaderData.value = data.data.zj8CleanList; + zj8_cleanHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); + + return item; + }); + hjData.value = { + ...headData.head, + }; + } + + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + zj8CleanList: zj8_cleanHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong08VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "娉ㄨ兌鏈烘竻娲佽褰�"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g08.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + t1: zj8_cleanHeaderData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "娉ㄨ兌鏈烘竻娲佽褰�.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + zj8_cleanHeader, + zj8_cleanHeaderData, + chong08VoLast, + chong08VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g09.vue b/src/views/gaixian/g09.vue new file mode 100644 index 0000000..13638fb --- /dev/null +++ b/src/views/gaixian/g09.vue @@ -0,0 +1,391 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>闆嗙洊宸ュ簭鐢熶骇璐ㄩ噺璁板綍</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="jg9_scjlHeaderData" + :tableHeader="jg9_scjlHeader" + :labelName="labelName.b1" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="jg9_cpzlHeaderData" + :tableHeader="jg9_cpzlHeader" + :labelName="labelName.b2" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong09VoLast, chong09VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const jg9_cpzlHeader = reactive([ + { prop: "shijian11", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "wgjc", label: "澶栬妫�楠�", editable: "false", type: "text" }, + { prop: "shijian22", label: "鏃堕棿2", editable: "false", type: "text" }, + { + prop: "mtsljj", + label: "姣忔潯鏁伴噺妫�楠�", + editable: "false", + type: "text", + }, + ]); + const jg9_scjlHeader = reactive([ + { + prop: "jbscpl", + label: "鎺ョ彮鏃舵垚鍝侀噺", + editable: "false", + type: "text", + }, + { + prop: "syzbsl", + label: "浣跨敤绾告澘鏁伴噺", + editable: "false", + type: "text", + }, + { + prop: "jbssy", + label: "浜ょ彮鏃跺墿浣欐垚鍝侀噺", + editable: "false", + type: "text", + }, + { + prop: "rsdsl", + label: "浣跨敤鐑缉琚嬫暟閲�", + editable: "false", + type: "text", + }, + { prop: "cpbs", label: "鎴愬搧鍖呮暟", editable: "false", type: "text" }, + { + prop: "dbdsl", + label: "浣跨敤鎵撳寘甯︽暟閲�", + editable: "false", + type: "text", + }, + { + prop: "crmsl", + label: "浣跨敤缂犵粫鑶滄暟閲�", + editable: "false", + type: "text", + }, + { + prop: "sxmsl", + label: "浣跨敤铔囧舰鑶滄暟閲�", + editable: "false", + type: "text", + }, + { prop: "tpsl", label: "浣跨敤鎵樼洏鏁伴噺", editable: "false", type: "text" }, + { prop: "fpsl", label: "搴熷搧鏁伴噺", editable: "false", type: "text" }, + { prop: "bz", label: "澶囨敞", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "浜у搧璐ㄩ噺璁板綍", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let jg9_cpzlHeaderData = ref([]); + + let jg9_scjlHeaderData = ref([]); + let jg9_scjlHeaderDataMap = ref({}); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong09VoLast(); + + console.log(".........", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + jg9_cpzlHeaderData.value = data.data.jg9CpzlList; + jg9_scjlHeaderData.value = [data.data.jg9Scjl]; + jg9_scjlHeaderDataMap = data.data.jg9Scjl; + + jg9_cpzlHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); + if (item.shijian2 != null) item.shijian22 = item.shijian2.substr(11, 5); + return item; + }); + hjData.value = { + ...headData.head, + ...jg9_scjlHeaderDataMap, + t1: jg9_cpzlHeaderData.value, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + jg9CpzlList: jg9_cpzlHeader.value, + jg9Scjl: jg9_scjlHeaderData.value[0], + }; + console.log("save data...", data); + const dt = await chong09VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "闆嗙洊宸ュ簭鐢熶骇璐ㄩ噺璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g09.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "闆嗙洊宸ュ簭鐢熶骇璐ㄩ噺璁板綍.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + jg9_scjlHeader, + jg9_scjlHeaderData, + jg9_cpzlHeader, + jg9_cpzlHeaderData, + chong09VoLast, + chong09VoSave, + jg9_scjlHeaderDataMap, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g10.vue b/src/views/gaixian/g10.vue new file mode 100644 index 0000000..98930b9 --- /dev/null +++ b/src/views/gaixian/g10.vue @@ -0,0 +1,326 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>娉ㄨ兌鏈烘竻娲佽褰�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="jg10_xkHeaderData" + :tableHeader="jg10_xkHeader" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong10VoLast, chong10VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const jg10_xkHeader = reactive([ + { prop: "riqi11", label: "鏃ユ湡", editable: "false", type: "text" }, + { prop: "shijian22", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "ry1", label: "浜哄憳", editable: "false", type: "text" }, + { prop: "ry1_state", label: "鐘舵��", editable: "false", type: "text" }, + { prop: "ry2", label: "浜哄憳", editable: "false", type: "text" }, + { prop: "ry2_state", label: "鐘舵��", editable: "false", type: "text" }, + { prop: "ry3", label: "浜哄憳", editable: "false", type: "text" }, + { prop: "ry3_state", label: "鐘舵��", editable: "false", type: "text" }, + { prop: "ry4", label: "浜哄憳", editable: "false", type: "text" }, + { prop: "ry4_state", label: "鐘舵��", editable: "false", type: "text" }, + { prop: "bz", label: "澶囨敞", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "浜у搧璐ㄩ噺璁板綍", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let jg10_xkHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong10VoLast(); + + console.log(".........g10", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + jg10_xkHeaderData.value = data.data.jg10XkList; + jg10_xkHeaderData.value.filter((item) => { + if (item.riqi != null) item.riqi11 = item.riqi.substr(0, 10); + if (item.shijian != null) item.shijian22 = item.shijian.substr(11, 5); + return item; + }); + hjData.value = { + ...headData.head, + t1: jg10_xkHeaderData.value, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + }; + console.log("save data...", data); + const dt = await save(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "闆嗙洊浜哄憳涓夊皬鏃舵墜娑堟瘨璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g10.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "闆嗙洊浜哄憳涓夊皬鏃舵墜娑堟瘨璁板綍.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + jg10_xkHeader, + jg10_xkHeaderData, + chong10VoLast, + chong10VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g11.vue b/src/views/gaixian/g11.vue new file mode 100644 index 0000000..4de9040 --- /dev/null +++ b/src/views/gaixian/g11.vue @@ -0,0 +1,328 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>502#闆嗙洊鏈烘竻娲佽褰�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="jg11_qjHeaderData" + :tableHeader="jg11_qjHeader" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong11VoLast, chong11VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const jg11_qjHeader = reactive([ + { prop: "riqi11", label: "鏃ユ湡", editable: "false", type: "text" }, + { prop: "qjbw", label: "娓呮磥閮ㄤ綅", editable: "false", type: "text" }, + { prop: "qjbz", label: "娓呮磥鏍囧噯", editable: "false", type: "text" }, + { prop: "qjsj11", label: "娓呮磥鏃堕棿", editable: "false", type: "text" }, + { prop: "zrr", label: "璐d换浜�", editable: "false", type: "text" }, + { prop: "jcr", label: "妫�鏌ヤ汉纭", editable: "false", type: "text" }, + { + prop: "wsxg", + label: "娓呮磥鍚庡崼鐢熸晥鏋�", + editable: "false", + type: "text", + }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "浜у搧璐ㄩ噺璁板綍", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let jg11_qjHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong11VoLast(); + + console.log(".........g11", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + jg11_qjHeaderData.value = data.data.jg11QjList; + jg11_qjHeaderData.value.filter((item) => { + if (item.riqi != null) item.riqi11 = item.riqi.substr(0, 10); + if (item.qjsj != null) item.qjsj11 = item.qjsj.substr(11, 5); + return item; + }); + hjData.value = { + ...headData.head, + t1: jg11_qjHeaderData.value, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + jg11QjList: jg11_qjHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong11VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "502#闆嗙洊鏈烘竻娲佽褰�"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g11.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "502#闆嗙洊鏈烘竻娲佽褰�.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + jg11_qjHeader, + jg11_qjHeaderData, + chong11VoLast, + chong11VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g12.vue b/src/views/gaixian/g12.vue new file mode 100644 index 0000000..d0a1ab5 --- /dev/null +++ b/src/views/gaixian/g12.vue @@ -0,0 +1,333 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>502#搴曠洊缂╄啘璁板綍</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="sm12_smHeaderData" + :tableHeader="sm12_smHeader" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong12VoLast, chong12VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const sm12_smHeader = reactive([ + { prop: "rq", label: "鏃ユ湡", editable: "false", type: "text" }, + { prop: "banci", label: "鐝", editable: "false", type: "text" }, + { prop: "xhgz", label: "灏忓悎鏍艰瘉", editable: "false", type: "text" }, + { + prop: "mtsysl", + label: "姣忔墭浣跨敤鏁伴噺", + editable: "false", + type: "text", + }, + { prop: "ccpph", label: "浜ф垚鍝佹壒鍙�", editable: "false", type: "text" }, + { prop: "smry", label: "缂╄啘浜哄憳", editable: "false", type: "text" }, + { + prop: "rsmyysl", + label: "鐑缉鑶滀娇鐢ㄦ暟閲�", + editable: "false", + type: "text", + }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "浜у搧璐ㄩ噺璁板綍", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let sm12_smHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong12VoLast(); + + console.log(".........g12", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + sm12_smHeaderData.value = data.data.sm12SmList; + // sm12_smHeaderData.value.filter((item) => { + // if (item.rq != null) item.rq11 = item.rq.substr(0, 10); + + // return item; + // }); + hjData.value = { + ...headData.head, + t1: sm12_smHeaderData.value, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + sm12SmList: sm12_smHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong12VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "502#搴曠洊缂╄啘璁板綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g12.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "502#搴曠洊缂╄啘璁板綍.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + sm12_smHeader, + sm12_smHeaderData, + chong12VoLast, + chong12VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g13.vue b/src/views/gaixian/g13.vue new file mode 100644 index 0000000..eb66c72 --- /dev/null +++ b/src/views/gaixian/g13.vue @@ -0,0 +1,329 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>鏁村紶鍐查搧浣跨敤鐧昏琛ㄥ綍</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="c13_ctsyHeaderData" + :tableHeader="c13_ctsyHeader" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong13VoLast, chong13VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const c13_ctsyHeader = reactive([ + { prop: "shijian", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "banci", label: "鐝", editable: "false", type: "text" }, + { prop: "name", label: "鍚嶇О", editable: "false", type: "text" }, + { prop: "pc", label: "鍗板埛鎵规", editable: "false", type: "text" }, + { prop: "bh", label: "鍖呭彿", editable: "false", type: "text" }, + { prop: "ytzs", label: "鍘熼搧寮犳暟", editable: "false", type: "text" }, + { prop: "yczs", label: "宸插啿寮犳暟", editable: "false", type: "text" }, + { prop: "jieb", label: "鎺ョ彮寮犳暟", editable: "false", type: "text" }, + { prop: "jbsy", label: "浜ょ彮鍓╀綑", editable: "false", type: "text" }, + { prop: "ktzs", label: "浜忛搧寮犳暟", editable: "false", type: "text" }, + { prop: "yfzs", label: "鍗板簾寮犳暟", editable: "false", type: "text" }, + { prop: "ytcj", label: "鍗伴搧鍘傚", editable: "false", type: "text" }, + { prop: "bz", label: "澶囨敞", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "浜у搧璐ㄩ噺璁板綍", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let c13_ctsyHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong13VoLast(); + + console.log(".........g13", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + c13_ctsyHeaderData.value = data.data.c13CtsyList; + c13_ctsyHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian11 = item.shijian.substr(0, 10); + + return item; + }); + hjData.value = { + ...headData.head, + t1: c13_ctsyHeaderData.value, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + c13CtsyList: c13_ctsyHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong13VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鏁村紶鍐查搧浣跨敤鐧昏琛ㄥ綍"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g13.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鏁村紶鍐查搧浣跨敤鐧昏琛ㄥ綍.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + c13_ctsyHeader, + c13_ctsyHeaderData, + chong13VoLast, + chong13VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g14.vue b/src/views/gaixian/g14.vue new file mode 100644 index 0000000..86ee0c2 --- /dev/null +++ b/src/views/gaixian/g14.vue @@ -0,0 +1,588 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>502搴曠洊鐢熶骇鎯呭喌鎶ュ憡</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="chanliangHeaderData" + :tableHeader="chanliangHeader" + :labelName="labelName.b8" + :editable="editable" + > + </HJTABLE> + <HJTABLE + :SClist="sh14_yt_fpHeaderData" + :tableHeader="sh14_yt_fpHeader" + :labelName="labelName.b1" + :editable="editable" + > + </HJTABLE> + <HJTABLE + :SClist="sh14_cc_fpHeaderData" + :tableHeader="sh14_cc_fpHeader" + :labelName="labelName.b2" + :editable="editable" + > + </HJTABLE> + <HJTABLE + :SClist="sh14_zj_fpHeaderData" + :tableHeader="sh14_zj_fpHeader" + :labelName="labelName.b3" + :editable="editable" + > + </HJTABLE> + <HJTABLE + :SClist="sh14_gjj_fpHeaderData" + :tableHeader="sh14_gjj_fpHeader" + :labelName="labelName.b4" + :editable="editable" + ></HJTABLE> + <HJTABLE + :SClist="sh14_jg_fpHeaderData" + :tableHeader="sh14_jg_fpHeader" + :labelName="labelName.b5" + :editable="editable" + > + </HJTABLE> + <HJTABLE + :SClist="sh14_zjHeaderData" + :tableHeader="sh14_zjHeader" + :labelName="labelName.b6" + :editable="editable" + > + </HJTABLE> + + <HJTABLE + :SClist="feipinfpHeaderData" + :tableHeader="feipinfpHeader" + :labelName="labelName.b9" + :editable="editable" + > + </HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong14VoLast, chong14VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const feipinfpHeader = reactive([ + { prop: "total", label: "鐢熶骇搴熷搧(鎬昏)", editable: false, type: "text" }, + { prop: "chongyingNum", label: "閲嶅嵃", editable: false, type: "input" }, + { prop: "louyinNum", label: "婕忓嵃", editable: false, type: "input" }, + { prop: "zazhidianNum", label: "鏉傝川鐐�", editable: false, type: "input" }, + { + prop: "waituzouweiNum", + label: "澶栨秱璧颁綅", + editable: false, + type: "input", + }, + { prop: "louyinNum", label: "婕忓嵃", editable: false, type: "input" }, + { prop: "moranNum", label: "澧ㄦ煋", editable: false, type: "input" }, + { prop: "fanbianBl", label: "缈昏竟涓嶈壇", editable: false, type: "input" }, + { prop: "sechaNum", label: "鑹插樊", editable: false, type: "input" }, + { prop: "neiyinseNum", label: "鍐呭嵃鑹�", editable: false, type: "input" }, + { + prop: "neiwaitucashangNum", + label: "鍐呭娑傛摝浼�", + editable: false, + type: "input", + }, + { + prop: "guangyouBzNum", + label: "鍏夋补涓嶅噯", + editable: false, + type: "input", + }, + { + prop: "sutiehexianNum", + label: "绱犻搧榛戠嚎", + editable: false, + type: "input", + }, + { + prop: "taoyinBzNum", + label: "濂楀嵃涓嶅噯", + editable: false, + type: "input", + }, + { prop: "hubanNum", label: "绯婃澘", editable: false, type: "input" }, + ]); + const chanliangHeader = reactive([ + { prop: "hjzs", label: "鍐查搧鎬绘暟", editable: false, type: "text" }, + { prop: "chengpin", label: "鎴愬搧", editable: false, type: "input" }, + { prop: "zhuancp", label: "杞垚鍝�", editable: false, type: "input" }, + { prop: "daijp", label: "寰呮鍝�", editable: false, type: "input" }, + { prop: "jiebqsy", label: "鎺ョ彮鍓嶅墿浣�", editable: false, type: "input" }, + { prop: "jiaobhsy", label: "鎺ョ彮鍚庡墿浣�", editable: false, type: "input" }, + { prop: "yinfg", label: "鍗板簾鐩�", editable: false, type: "input" }, + { prop: "feipjbfp", label: "搴熷搧", editable: false, type: "input" }, + { prop: "hegcp", label: "鍚堟牸鎴愬搧", editable: false, type: "input" }, + { prop: "feipl", label: "搴熷搧鐜�", editable: false, type: "input" }, + { prop: "caiytpc", label: "褰╁嵃閾佹壒娆�", editable: false, type: "input" }, + ]); + const sh14_cc_fpHeader = reactive([ + { prop: "cq", label: "鍐茬己", editable: "false", type: "text" }, + { prop: "kg", label: "鍗$洊", editable: "false", type: "text" }, + { prop: "yh", label: "鍘嬬棔", editable: "false", type: "text" }, + { prop: "cj", label: "鎶芥", editable: "false", type: "text" }, + { prop: "bx", label: "鍙樺舰", editable: "false", type: "text" }, + { prop: "gmwr", label: "鐩栭潰姹℃煋", editable: "false", type: "text" }, + { prop: "sg", label: "鍙岀洊", editable: "false", type: "text" }, + { prop: "jyzz", label: "鍗风紭鐨辫ざ", editable: "false", type: "text" }, + { prop: "ldpy", label: "钃濈偣鍋忕Щ", editable: "false", type: "text" }, + { prop: "gmyh", label: "鐩栭潰鍘嬬棔", editable: "false", type: "text" }, + ]); + const sh14_gjj_fpHeader = reactive([ + { prop: "bx", label: "鍙樺舰", editable: "false", type: "text" }, + { prop: "wj", label: "鏃犺兌", editable: "false", type: "text" }, + { prop: "dj", label: "鐩栭潰姹℃煋", editable: "false", type: "text" }, + { prop: "jj", label: "鏂兌", editable: "false", type: "text" }, + { prop: "hs", label: "婧呰兌", editable: "false", type: "text" }, + { prop: "cq", label: "鍒掍激", editable: "false", type: "text" }, + { prop: "gmwr", label: "鍐茬己", editable: "false", type: "text" }, + { prop: "sg", label: "鍙岀洊", editable: "false", type: "text" }, + { prop: "jyzz", label: "鍗风紭鐨辫ざ", editable: "false", type: "text" }, + { prop: "ldpy", label: "钃濈偣鍋忕Щ", editable: "false", type: "text" }, + { prop: "gmyh", label: "鐩栭潰鍘嬬棔", editable: "false", type: "text" }, + { prop: "gmbd", label: "鐩栭潰鐧界偣", editable: "false", type: "text" }, + ]); + const sh14_jg_fpHeader = reactive([ + { prop: "bx", label: "鍙樺舰", editable: "false", type: "text" }, + { prop: "wj", label: "鏃犺兌", editable: "false", type: "text" }, + { prop: "dj", label: "鐩栭潰姹℃煋", editable: "false", type: "text" }, + { prop: "jj", label: "鏂兌", editable: "false", type: "text" }, + { prop: "hs", label: "婧呰兌", editable: "false", type: "text" }, + { prop: "cq", label: "鍒掍激", editable: "false", type: "text" }, + { prop: "gmwr", label: "鍐茬己", editable: "false", type: "text" }, + { prop: "sg", label: "鍙岀洊", editable: "false", type: "text" }, + { prop: "jyzz", label: "鍗风紭鐨辫ざ", editable: "false", type: "text" }, + { prop: "ldpy", label: "钃濈偣鍋忕Щ", editable: "false", type: "text" }, + { prop: "gmyh", label: "鐩栭潰鍘嬬棔", editable: "false", type: "text" }, + { prop: "gmbd", label: "鐩栭潰鐧界偣", editable: "false", type: "text" }, + ]); + const sh14_yt_fpHeader = reactive([ + { prop: "cy", label: "閲嶅奖", editable: "false", type: "text" }, + { prop: "sc", label: "鑹插樊", editable: "false", type: "text" }, + { prop: "mr", label: "澧ㄦ煋", editable: "false", type: "text" }, + { prop: "ly", label: "婕忓嵃", editable: "false", type: "text" }, + { prop: "zzd", label: "鏉傝川鐐�", editable: "false", type: "text" }, + { prop: "nys", label: "鍐呭嵃鑹�", editable: "false", type: "text" }, + { prop: "ldwy", label: "钃濈偣澶栫Щ", editable: "false", type: "text" }, + { prop: "nwtcs", label: "鍐呭娑傛摝浼�", editable: "false", type: "text" }, + { prop: "lt", label: "婕忔秱", editable: "false", type: "text" }, + ]); + const sh14_zjHeader = reactive([ + { prop: "jy", label: "妫�楠�", editable: "false", type: "text" }, + { prop: "sy", label: "璇曢獙", editable: "false", type: "text" }, + { prop: "hj", label: "", editable: "false", type: "text" }, + ]); + const sh14_zj_fpHeader = reactive([ + { prop: "kg", label: "鍗$洊", editable: "false", type: "text" }, + { prop: "bx", label: "鍙樺舰", editable: "false", type: "text" }, + { prop: "wj", label: "鏃犺兌", editable: "false", type: "text" }, + { prop: "gmwr", label: "鐩栭潰姹℃煋", editable: "false", type: "text" }, + { prop: "dj", label: "鏂兌", editable: "false", type: "text" }, + { prop: "jj", label: "婧呰兌", editable: "false", type: "text" }, + { prop: "hs", label: "鍒掍激", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "鍗伴搧搴熷搧", + b2: "鍐插簥搴熷搧", + b3: "娉ㄨ兌鏈哄簾鍝�", + b4: "鍏夐獙鏈哄簾鍝�", + b5: "闆嗙洊搴熷搧", + b6: "璐ㄦ", + b7: "鍗板簾鐩�", + b8: "浜ч噺缁熻", + b9: "鍗板簾鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let sh14_cc_fpHeaderData = ref([]); + let sh14_gjj_fpHeaderData = ref([]); + let sh14_jg_fpHeaderData = ref([]); + let sh14_yt_fpHeaderData = ref([]); + let sh14_zjHeaderData = ref([]); + let sh14_zj_fpHeaderData = ref([]); + let chanliangHeaderData = ref([]); + let feipinfpHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + function checkValue(obj) { + if (obj == null) return [{ total: 0 }]; + return [obj]; + } + function checkTotal(obj) { + if (obj == null) return null; + return obj.total; + } + const getListData = async () => { + const data = await chong14VoLast(); + + console.log(".........g14", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + + sh14_cc_fpHeaderData.value = [data.data.sh14CcFp]; + + sh14_gjj_fpHeaderData.value = [data.data.sh14GjjFp]; + sh14_jg_fpHeaderData.value = [data.data.sh14JgFp]; + sh14_yt_fpHeaderData.value = [ + data.data.ytFp == null ? [] : data.data.ytFp, + ]; + + sh14_zjHeaderData.value = [data.data.sh14Zj]; + sh14_zj_fpHeaderData.value = [data.data.sh14ZjFp]; + + chanliangHeaderData.value = [data.data.lineChanliangtongji]; + feipinfpHeaderData.value = [data.data.feipinGuan]; + + let zhujiao = { + zjkg: data.data.sh14ZjFp.kg, + zjbx: data.data.sh14ZjFp.bx, + zjwj: data.data.sh14ZjFp.wj, + zjjj: data.data.sh14ZjFp.jj, + zjdj: data.data.sh14ZjFp.dj, + zjhs: data.data.sh14ZjFp.hj, + }; + + let gjj = { + gjjsg: data.data.sh14GjjFp.sg, + gjjdj: data.data.sh14GjjFp.dj, + gjjcq: data.data.sh14GjjFp.cq, + gjjjyzz: data.data.sh14GjjFp.gmzz, + gjjgmwr: data.data.sh14GjjFp.gmwr, + gjjldpy: data.data.sh14GjjFp.ldpy, + gjjbx: data.data.sh14GjjFp.bx, + gjjgmyh: data.data.sh14GjjFp.gmyh, + gjjgmbd: data.data.sh14GjjFp.gmbd, + gjjhs: data.data.sh14GjjFp.hs, + gjjwj: data.data.sh14GjjFp.wj, + gjjjj: data.data.sh14GjjFp.jj, + }; + + let jg = { + jgsg: data.data.sh14JgFp.sg, + jgdj: data.data.sh14JgFp.dj, + jgcq: data.data.sh14JgFp.cq, + jgjyzz: data.data.sh14JgFp.gmzz, + jggmwr: data.data.sh14JgFp.gmwr, + jgldpy: data.data.sh14JgFp.ldpy, + jgbx: data.data.sh14JgFp.bx, + jggmyh: data.data.sh14JgFp.gmyh, + jggmbd: data.data.sh14JgFp.gmbd, + jghs: data.data.sh14JgFp.hs, + jgwj: data.data.sh14JgFp.wj, + jgjj: data.data.sh14JgFp.jj, + }; + let zj = { + t1: checkTotal(data.data.feipinYintie), + t2: checkTotal(data.data.sh14CcFp), + t3: checkTotal(data.data.sh14ZjFp), + t4: checkTotal(data.data.sh14GjjFp), + t5: checkTotal(data.data.sh14JgFp), + + t6: checkTotal(data.data.feipinGuan), + }; + hjData.value = { + ...headData.head, + ...data.data.ytFp, + ...data.data.sh14CcFp, + ...zhujiao, + ...gjj, + ...jg, + ...data.data.sh14Zj, + ...data.data.feipinGuan, + ...zj, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + sh14CcFp: sh14_cc_fpHeaderData.value[0], + sh14GjjFp: sh14_gjj_fpHeaderData.value[0], + sh14JgFp: sh14_jg_fpHeaderData.value[0], + ytFp: sh14_yt_fpHeaderData.value[0], + sh14Zj: sh14_zjHeaderData.value[0], + sh14ZjFp: sh14_zj_fpHeaderData.value[0], + lineChanliangtongji: chanliangHeaderData.value[0], + feipinGuan: feipinfpHeaderData.value[0], + }; + console.log("save data...", data); + const dt = await chong14VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "502搴曠洊鐢熶骇鎯呭喌鎶ュ憡"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g14.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "502搴曠洊鐢熶骇鎯呭喌鎶ュ憡.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + sh14_cc_fpHeaderData, + sh14_gjj_fpHeaderData, + sh14_jg_fpHeaderData, + sh14_yt_fpHeaderData, + sh14_zjHeaderData, + sh14_zj_fpHeaderData, + sh14_cc_fpHeader, + sh14_gjj_fpHeader, + sh14_jg_fpHeader, + sh14_yt_fpHeader, + sh14_zjHeader, + sh14_zj_fpHeader, + chanliangHeaderData, + chanliangHeader, + feipinfpHeaderData, + feipinfpHeader, + chong14VoLast, + chong14VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g15.vue b/src/views/gaixian/g15.vue new file mode 100644 index 0000000..ea20568 --- /dev/null +++ b/src/views/gaixian/g15.vue @@ -0,0 +1,358 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>鍒剁洊涓�绾跨敓浜у仠鏈鸿褰曡〃</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="shengchan_tjHeaderData" + :tableHeader="shengchan_tjHeader" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong15VoLast, chong15VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const shengchan_tjHeader = reactive([ + { prop: "jitai", label: "鏈哄彴", editable: "false", type: "text" }, + { + prop: "tingjiTime", + label: "鍋滄満鏃堕棿", + editable: "false", + type: "text", + }, + { + prop: "guzhangYy", + label: "鏁呴殰鍘熷洜", + editable: "false", + type: "text", + }, + { + prop: "tiaozhengFf", + label: "璋冩暣鏂规硶", + editable: "false", + type: "text", + }, + { + prop: "jianceItem", + label: "妫�娴嬮」鐩�", + editable: "false", + type: "text", + }, + { + prop: "kaijiTime", + label: "寮�鏈烘椂闂�", + editable: "false", + type: "text", + }, + { prop: "jianceJg", label: "妫�娴嬬粨鏋�", editable: "false", type: "text" }, + { prop: "queren_name", label: "纭浜�", editable: "false", type: "text" }, + { + prop: "tiaozhengTime", + label: "璋冩暣鏃堕暱", + editable: "false", + type: "text", + }, + + { prop: "chuliName", label: "澶勭悊浜�", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "浜у搧璐ㄩ噺璁板綍", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let shengchan_tjHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong15VoLast(); + + console.log(".........g15", data); + parse(data); + }; + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + shengchan_tjHeaderData.value = data.data.shengchanTjList; + // shengchan_tjHeaderData.value.filter((item) => { + // if( item.shijian != null ) + // item.shijian11 = item.shijian.substr(0, 10); + + // return item; + // }); + hjData.value = { + ...headData.head, + t1: shengchan_tjHeaderData.value, + }; + } + + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + shengchanTjList: shengchan_tjHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong15VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "鍒剁洊涓�绾跨敓浜у仠鏈鸿褰曡〃"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g15.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "鍒剁洊涓�绾跨敓浜у仠鏈鸿褰曡〃.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + shengchan_tjHeader, + shengchan_tjHeaderData, + chong15VoLast, + chong15VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g16.vue b/src/views/gaixian/g16.vue new file mode 100644 index 0000000..e2c8525 --- /dev/null +++ b/src/views/gaixian/g16.vue @@ -0,0 +1,333 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>502搴曠洊鍏夋鏈鸿褰曡〃</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="g_gyjHeaderData" + :tableHeader="g_gyjHeader" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong16VoLast, chong16VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const g_gyjHeader = reactive([ + { prop: "shijian11", label: "鏃堕棿", editable: "false", type: "text" }, + { prop: "csr", label: "娴嬭瘯浜�", editable: "false", type: "text" }, + { prop: "wj", label: "鏃犺兌", editable: "false", type: "text" }, + { prop: "dj", label: "鏂兌", editable: "false", type: "text" }, + { prop: "hs", label: "鍒掍激", editable: "false", type: "text" }, + { prop: "bx", label: "鍙樺舰", editable: "false", type: "text" }, + { prop: "sg", label: "鍙岀洊", editable: "false", type: "text" }, + { prop: "cq", label: "鍐茬己", editable: "false", type: "text" }, + { prop: "gmwr", label: "鐩栭潰姹℃煋", editable: "false", type: "text" }, + { prop: "xctl", label: "閿″眰鑴辫惤", editable: "false", type: "text" }, + { prop: "ldpy", label: "钃濈偣鍋忕Щ", editable: "false", type: "text" }, + { prop: "jyzz", label: "鍗风紭鐨辫ざ", editable: "false", type: "text" }, + { prop: "gmyh", label: "鐩栭潰鍘嬬棔", editable: "false", type: "text" }, + { prop: "gmbd", label: "鐩栭潰鐧界偣", editable: "false", type: "text" }, + { prop: "ycqk", label: "寮傚父鎯呭喌", editable: "false", type: "text" }, + { prop: "zjqr", label: "璐ㄦ纭", editable: "false", type: "text" }, + { prop: "lbqr", label: "棰嗙彮纭", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "浜у搧璐ㄩ噺璁板綍", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let g_gyjHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong16VoLast(); + + console.log(".........g16", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + g_gyjHeaderData.value = data.data.gyj16List; + g_gyjHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); + + return item; + }); + hjData.value = { + ...headData.head, + t1: g_gyjHeaderData.value, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + gyj16List: g_gyjHeaderData.value, + }; + console.log("save data...", data); + const dt = await chong16VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "502搴曠洊鍏夋鏈鸿褰曡〃"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g16.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "502搴曠洊鍏夋鏈鸿褰曡〃.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + g_gyjHeader, + g_gyjHeaderData, + chong16VoLast, + chong16VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g17.vue b/src/views/gaixian/g17.vue new file mode 100644 index 0000000..ab8d3f3 --- /dev/null +++ b/src/views/gaixian/g17.vue @@ -0,0 +1,332 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>闃叉挒鑳舵潯鐐规琛�17</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="c17_fzjtHeaderData" + :tableHeader="c17_fzjtHeader" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong17VoLast, chong17VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const c17_fzjtHeader = reactive([ + { prop: "shijian11", label: "鏃堕棿", editable: "false", type: "text" }, + { + prop: "ybj", + label: "鍦嗚竟鏈轰笌娉ㄨ兌鏈鸿緭閫佸甫鐩磋杩炴帴澶�", + editable: "false", + type: "text", + }, + { prop: "ybjCheck", label: "妫�鏌ョ粨鏋�", editable: "false", type: "text" }, + { prop: "ybjRenA", label: "妫�鏌ヤ汉", editable: "false", type: "text" }, + { prop: "ybjRenB", label: "妫�鏌ヤ汉", editable: "false", type: "text" }, + { prop: "gjj", label: "鍏夋鏈哄墧闄ら�氶亾", editable: "false", type: "text" }, + { prop: "gjjCheck", label: "妫�鏌ョ粨鏋�", editable: "false", type: "text" }, + { prop: "gjjRenA", label: "妫�鏌ヤ汉", editable: "false", type: "text" }, + { prop: "gjjRenB", label: "妫�鏌ヤ汉", editable: "false", type: "text" }, + { prop: "linbA", label: "妫�鏌ヤ汉", editable: "false", type: "text" }, + { prop: "linbB", label: "妫�鏌ヤ汉", editable: "false", type: "text" }, + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "浜у搧璐ㄩ噺璁板綍", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let c17_fzjtHeaderData = ref([]); + + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong17VoLast(); + + console.log(".........g17", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.reportTime = headData.head.reportTime.substr(0, 10); + // headData.head.jieban1 = headData.head.jieban.substr(11, 5); + // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); + c17_fzjtHeaderData.value = data.data.c17FzjtList; + c17_fzjtHeaderData.value.filter((item) => { + if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); + + return item; + }); + hjData.value = { + ...headData.head, + t1: c17_fzjtHeaderData.value, + }; + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + }; + console.log("save data...", data); + const dt = await chong17VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "闃叉挒鑳舵潯鐐规琛�"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g17.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "闃叉挒鑳舵潯鐐规琛�.docx"); + }); + } + const getRouterData = async (req) => { + console.log("req....", req); + const data = await headReport(req); + console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + c17_fzjtHeader, + c17_fzjtHeaderData, + chong17VoLast, + chong17VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/g18.vue b/src/views/gaixian/g18.vue new file mode 100644 index 0000000..35c4fd9 --- /dev/null +++ b/src/views/gaixian/g18.vue @@ -0,0 +1,346 @@ +<template> + <!-- <div class="header_nox"> + <el-button type="warning" circle @click="exportWord">涓嬭浇</el-button> + <el-button type="primary" circle v-show="!editable" @click="editable = !editable">缂栬緫</el-button> + <el-button type="primary" v-show=editable @click="saveData">纭畾</el-button> + </div> --> + <div id="printContent" ref="imageWrapper"> + <h3>鐩栫嚎缁熻琛�</h3> + <div class="title_form"> + <div class="title_form_input"> + <span>鐢熶骇绾匡細</span> + <span>{{ headData.head.shengcx }}</span> + </div> + <div class="title_form_input"> + <span>浜у搧锛�</span> + <span>{{ headData.head.chanpin }}</span> + </div> + <div class="title_form_input"> + <span>鏃ユ湡锛�</span> + <span>{{ headData.head.reportTime }}</span> + </div> + <div class="title_form_input"> + <span>鐝锛�</span> + <span>{{ headData.head.banci }}</span> + </div> + <div class="title_form_input"> + <span>璁板綍鍛橈細</span> + <span>{{ headData.head.jiluyuan }}</span> + </div> + <div class="title_form_input"> + <span>鎺ョ彮鏃堕棿锛�</span> + <span>{{ headData.head.jieban1 }}</span> + </div> + <div class="title_form_input"> + <span>浜ょ彮鏃堕棿锛�</span> + <span>{{ headData.head.jiaoban1 }}</span> + </div> + </div> + <el-divider /> + + <HJTABLE + :SClist="g18ChanTotalHeaderData" + :tableHeader="g18ChanTotalHeader" + :editable="editable" + ></HJTABLE> + + <HJTABLE + :SClist="g18ChanListHeaderData" + :tableHeader="g18ChanListHeader" + :editable="editable" + ></HJTABLE> + </div> +</template> + +<script> +const item = { + name: "", + birth: "", + province: "", + city: "", + address: "", + phone: "", +}; +const header = { + prop: "key", + label: "鑷畾涔�", + editable: false, + type: "input", +}; +import { ref, reactive, onMounted } from "vue"; +import { ElMessage } from "element-plus"; +import { chong18VoLast, chong18VoSave } from "@/api/gaixian"; +import html2canvas from "html2canvas"; +import docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import JSZipUtils from "jszip-utils"; +import { saveAs } from "file-saver"; +import HJTABLE from "@/components/arj/arj-table"; +import { useRouter } from "vue-router"; +import { headReport } from "@/api/head"; +export default { + name: "", + components: { HJTABLE }, + props: {}, + setup(props) { + const router = useRouter(); + const g18ChanListHeader = reactive([ + { prop: "chanliang", label: "浜ч噺", editable: "false", type: "text" }, + { + prop: "createdTime", + label: "鍒涘缓鏃堕棿", + editable: "false", + type: "text", + }, + { prop: "pinming", label: "鍝佸悕", editable: "false", type: "text" }, + { prop: "cytpc", label: "褰╁嵃閾佹壒娆�", editable: "false", type: "text" }, + { prop: "daijfpl", label: "寰呮搴熷搧閲�", editable: "false", type: "text" }, + { prop: "daijp", label: "寰呮鍘熷洜鏁伴噺", editable: "false", type: "text" }, + { prop: "feipl", label: "搴熷搧鐜�", editable: "false", type: "text" }, + { prop: "shengcfp", label: "鐢熶骇搴熷搧", editable: "false", type: "text" }, + { prop: "yinfl", label: "鍗板簾鐜�", editable: "false", type: "text" }, + { prop: "yinsfp", label: "鍗板埛搴熷搧", editable: "false", type: "text" }, + + ]); + const g18ChanTotalHeader= reactive([ + { prop: "chanliangTotal", label: "浜ч噺", editable: "false", type: "text" }, + { + prop: "createdTime", + label: "鍒涘缓鏃堕棿", + editable: "false", + type: "text", + }, + { prop: "cytpcTotal", label: "褰╁嵃閾佹壒娆�", editable: "false", type: "text" }, + { prop: "daijfplTotal", label: "寰呮搴熷搧閲�", editable: "false", type: "text" }, + { prop: "daijpTotal", label: "寰呮鍘熷洜鏁伴噺", editable: "false", type: "text" }, + { prop: "feiplTotal", label: "搴熷搧鐜�", editable: "false", type: "text" }, + { prop: "shengcfpTotal", label: "鐢熶骇搴熷搧", editable: "false", type: "text" }, + { prop: "yinflTotal", label: "鍗板簾鐜�", editable: "false", type: "text" }, + { prop: "yinsfpTotal", label: "鍗板埛搴熷搧", editable: "false", type: "text" }, + + ]); + + let tableData = reactive([]); + const formInline = reactive({ + user: "", + region: "", + }); + const imageWrapper = ref(null); + + let headData = reactive({ + head: {}, + }); + + let labelName = { + b1: "鐢熶骇璁板綍", + b2: "浜у搧璐ㄩ噺璁板綍", + b3: "鍩烘湰灏哄", + b4: "澶栬妫�娴嬮」鐩�", + }; + let editable = ref(false); + + let SClist = ref([]); + let hjData = ref({}); + + let g18ChanTotalHeaderData = ref([]); + let g18ChanListHeaderData = ref([]); + const submitForm = () => {}; + + const handleEdit = (row) => { + row.editable = true; + }; + const handleDelete = (index) => { + this.tableData.splice(index, 1); + }; + const prepend = (index) => { + item.editable = true; + this.tableData.splice(index, 0, item); + }; + const append = (index) => { + item.editable = true; + this.tableData.splice(index + 1, 0, item); + }; + const deleteCurrentColumn = (index) => { + this.tableHeader.splice(index, 1); + }; + const insertBefore = (index) => { + header.editable = true; + this.tableHeader.splice(index, 0, header); + }; + + const getListData = async () => { + const data = await chong18VoLast(); + + console.log(".........g18", data); + parse(data); + }; + + function parse(data) { + headData.head = data.data.head; + if (headData.head.reportTime != null) + headData.head.reportTime = headData.head.reportTime.substr(0, 10); + g18ChanTotalHeaderData.value = [data.data.g18ChanTotal] + g18ChanListHeaderData = data.data.g18ChanliangtongjiList + } + const saveData = async () => { + editable = false; + let data = { + head: headData.head, + }; + console.log("save data...", data); + const dt = await chong18VoSave(data); + if (dt.code == 0) { + ElMessage({ + message: "淇敼鎴愬姛", + type: "success", + }); + } + console.log(dt); + }; + //鎴浘 + const toImage = () => { + html2canvas(imageWrapper.value, { + logging: false, + allowTaint: true, + scale: window.devicePixelRatio, + // width: shareContent.clientWidth, //dom 鍘熷瀹藉害 + // height: shareContent.clientHeight, + scrollY: 0, + scrollX: 0, + useCORS: true, + backgroundColor: "#ffffff", + }).then(function (canvas) { + // console.log(canvas); + let imgUrl = canvas.toDataURL("image/png"); + var tempLink = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩 + tempLink.style.display = "none"; + tempLink.href = imgUrl; + tempLink.setAttribute("download", "闃叉挒鑳舵潯鐐规琛�"); // 缁檃鏍囩娣诲姞涓嬭浇灞炴�� + + if (typeof tempLink.download === "undefined") { + tempLink.setAttribute("target", "_blank"); + } + document.body.appendChild(tempLink); // 灏哸鏍囩娣诲姞鍒癰ody褰撲腑 + tempLink.click(); // 鍚姩涓嬭浇 + document.body.removeChild(tempLink); // 涓嬭浇瀹屾瘯鍒犻櫎a鏍囩 + window.URL.revokeObjectURL(imgUrl); + }); + }; + // 鐐瑰嚮瀵煎嚭word + function exportWord() { + // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹� + JSZipUtils.getBinaryContent("g17.docx", function (error, content) { + // input.docx鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁 + // 鎶涘嚭寮傚父 + if (error) { + throw error; + } + + // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹� + let zip = new PizZip(content); + // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄 + + let doc = new docxtemplater().loadZip(zip).setOptions({ + nullGetter: function () { + return ""; + }, + }); + // 璁剧疆妯℃澘鍙橀噺鐨勫�� + doc.setData({ + ...hjData.value, + }); + + try { + // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲� + doc.render(); + } catch (error) { + // 鎶涘嚭寮傚父 + let e = { + message: error.message, + name: error.name, + stack: error.stack, + properties: error.properties, + }; + console.log(JSON.stringify({ error: e })); + throw error; + } + + // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級 + let out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + }); + // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚� + saveAs(out, "闃叉挒鑳舵潯鐐规琛�.docx"); + }); + } + const getRouterData = async (req) => { + // console.log("req....", req); + const data = await headReport(req); + //console.log("jbj router data.....", data); + + parse(data); + }; + onMounted(() => { + //console.log("rrrrrrrrrrr", router.currentRoute.value.query); + let head_id = router.currentRoute.value.query.id; + let leixing = router.currentRoute.value.query.leixing; + // console.log("vue recv....", head_id, leixing); + if (head_id == null) { + getListData(); + } else { + getRouterData({ head_id: head_id, leixing: leixing }); + } + }); + return { + saveData, + submitForm, + formInline, + tableData, + insertBefore, + deleteCurrentColumn, + append, + prepend, + handleDelete, + handleEdit, + editable, + getListData, + headData, + toImage, + imageWrapper, + labelName, + exportWord, + g18ChanTotalHeader, + g18ChanTotalHeaderData, + g18ChanListHeaderData, + g18ChanListHeader, + chong18VoLast, + chong18VoSave, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header_nox { + text-align: right; +} + +#printContent h3 { + text-align: center; + margin-bottom: 40px; + font-size: 26px; + font-weight: bold; +} + +.title_form { + display: flex; + justify-content: space-around; + align-items: center; + // margin-bottom: 20px; +} + +.title_form_input { + font-size: 16px; +} +</style> diff --git a/src/views/gaixian/header.vue b/src/views/gaixian/header.vue new file mode 100644 index 0000000..da947b3 --- /dev/null +++ b/src/views/gaixian/header.vue @@ -0,0 +1,27 @@ +const c13_ctsyHeader = reactive([[{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"banci","label":"鐝","editable":"false","type":"text"},{"prop":"name","label":"鍚嶇О","editable":"false","type":"text"},{"prop":"pc","label":"鍗板埛鎵规","editable":"false","type":"text"},{"prop":"bh","label":"鍖呭彿","editable":"false","type":"text"},{"prop":"ytzs","label":"鍘熼搧寮犳暟","editable":"false","type":"text"},{"prop":"yczs","label":"宸插啿寮犳暟","editable":"false","type":"text"},{"prop":"jieb","label":"鎺ョ彮寮犳暟","editable":"false","type":"text"},{"prop":"jbsy","label":"浜ょ彮鍓╀綑","editable":"false","type":"text"},{"prop":"ktzs","label":"浜忛搧寮犳暟","editable":"false","type":"text"},{"prop":"yfzs","label":"鍗板簾寮犳暟","editable":"false","type":"text"},{"prop":"ytcj","label":"鍗伴搧鍘傚","editable":"false","type":"text"},{"prop":"bz","label":"澶囨敞","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const c17_fzjtHeader = reactive([[{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"ybj","label":"鍦嗚竟鏈轰笌娉ㄨ兌鏈鸿緭閫佸甫鐩磋杩炴帴澶�","editable":"false","type":"text"},{"prop":"ybj_check","label":"妫�鏌ョ粨鏋�","editable":"false","type":"text"},{"prop":"ybj_ren_a","label":"妫�鏌ヤ汉","editable":"false","type":"text"},{"prop":"ybj_ren_b","label":"妫�鏌ヤ汉","editable":"false","type":"text"},{"prop":"gjj","label":"鍏夋鏈哄墧闄ら�氶亾","editable":"false","type":"text"},{"prop":"gjj_check","label":"妫�鏌ョ粨鏋�","editable":"false","type":"text"},{"prop":"gjj_ren_a","label":"妫�鏌ヤ汉","editable":"false","type":"text"},{"prop":"gjj_ren_b","label":"妫�鏌ヤ汉","editable":"false","type":"text"},{"prop":"linb_a","label":"妫�鏌ヤ汉","editable":"false","type":"text"},{"prop":"linb_b","label":"妫�鏌ヤ汉","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const c2_checkHeader = reactive([[{"prop":"no","label":"搴忓彿","editable":"false","type":"text"},{"prop":"sbbw","label":"璁惧閮ㄤ綅","editable":"false","type":"text"},{"prop":"gj","label":"宸ュ叿","editable":"false","type":"text"},{"prop":"banci","label":"鐝","editable":"false","type":"text"},{"prop":"pdbz","label":"鍒ゆ柇鏍囧噯;缁撴灉纭锛氣憼璁惧姝e父鈥溾垰鈥濓紝鈶¤澶囨棤娉曚娇鐢ㄢ�溍椻�濓紝鈶㈣澶囨湁闂鈥溾柍鈥濓紝鈶h澶囦笉浣跨敤鈥溾垥鈥�","editable":"false","type":"text"},{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const c3_weekHeader = reactive([[{"prop":"no","label":"搴忓彿","editable":"false","type":"text"},{"prop":"zq","label":"鍛ㄦ湡","editable":"false","type":"text"},{"prop":"rhbw","label":"娑︽粦閮ㄤ綅","editable":"false","type":"text"},{"prop":"ffgj","label":"鏂规硶宸ュ叿","editable":"false","type":"text"},{"prop":"gj","label":"宸ュ叿","editable":"false","type":"text"},{"prop":"zyl","label":"娉ㄦ补閲�","editable":"false","type":"text"},{"prop":"pdbz","label":"鍒ゆ柇鏍囧噯","editable":"false","type":"text"},{"prop":"banci","label":"鐝","editable":"false","type":"text"},{"prop":"week1","label":"绗竴鍛�","editable":"false","type":"text"},{"prop":"week2","label":"绗簩鍛�","editable":"false","type":"text"},{"prop":"week3","label":"绗笁鍛�","editable":"false","type":"text"},{"prop":"week4","label":"绗洓鍛�","editable":"false","type":"text"},{"prop":"oper1","label":"鎿嶄綔鍛�1","editable":"false","type":"text"},{"prop":"oper2","label":"鎿嶄綔鍛�2","editable":"false","type":"text"},{"prop":"lingb1","label":"棰嗙彮1","editable":"false","type":"text"},{"prop":"lingb2","label":"棰嗙彮2","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const c4_cleanHeader = reactive([[{"prop":"qjbw","label":"娓呮磥閮ㄤ綅","editable":"false","type":"text"},{"prop":"qjbz","label":"娓呮磥鏍囧噯","editable":"false","type":"text"},{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"zeren","label":"璐d换浜�","editable":"false","type":"text"},{"prop":"jcr","label":"妫�鏌ヤ汉","editable":"false","type":"text"},{"prop":"xg","label":"娉ㄨ兌鏈烘竻娲佽褰�","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const c_baseHeader = reactive([[{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"xm","label":"妫�娴嬮」鐩�","editable":"false","type":"text"},{"prop":"bzz","label":"鏍囧噯鍊�","editable":"false","type":"text"},{"prop":"no1","label":"1#妯�","editable":"false","type":"text"},{"prop":"no2","label":"2#妯�","editable":"false","type":"text"},{"prop":"no3","label":"3#妯�","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const c_tieqkHeader = reactive([[{"prop":"jiebtsy","label":"鎺ョ彮閾佸墿浣�","editable":"false","type":"text"},{"prop":"jiaobtsy","label":"浜ょ彮閾佸墿浣�","editable":"false","type":"text"},{"prop":"ctzl","label":"鍐查搧鎬婚噺","editable":"false","type":"text"},{"prop":"kgs","label":"浜忕洊鏁�","editable":"false","type":"text"},{"prop":"yf","label":"鍗板簾","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const c_wgHeader = reactive([[{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"wgjc","label":"澶栬妫�娴�","editable":"false","type":"text"},{"prop":"qxyy","label":"缂洪櫡鍘熷洜","editable":"false","type":"text"},{"prop":"cstz","label":"鎺柦璋冩暣","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const g_gyjHeader = reactive([[{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"csr","label":"娴嬭瘯浜�","editable":"false","type":"text"},{"prop":"wj","label":"鏃犺兌","editable":"false","type":"text"},{"prop":"dj","label":"鏂兌","editable":"false","type":"text"},{"prop":"hs","label":"鍒掍激","editable":"false","type":"text"},{"prop":"bx","label":"鍙樺舰","editable":"false","type":"text"},{"prop":"sg","label":"鍙岀洊","editable":"false","type":"text"},{"prop":"cq","label":"鍐茬己","editable":"false","type":"text"},{"prop":"gmwr","label":"鐩栭潰姹℃煋","editable":"false","type":"text"},{"prop":"xctl","label":"閿″眰鑴辫惤","editable":"false","type":"text"},{"prop":"ldpy","label":"钃濈偣鍋忕Щ","editable":"false","type":"text"},{"prop":"jyzz","label":"鍗风紭鐨辫ざ","editable":"false","type":"text"},{"prop":"gmyh","label":"鐩栭潰鍘嬬棔","editable":"false","type":"text"},{"prop":"gmbd","label":"鐩栭潰鐧界偣","editable":"false","type":"text"},{"prop":"ycqk","label":"寮傚父鎯呭喌","editable":"false","type":"text"},{"prop":"zjqr","label":"璐ㄦ纭","editable":"false","type":"text"},{"prop":"lbqr","label":"棰嗙彮纭","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const jg10_xkHeader = reactive([[{"prop":"riqi","label":"鏃ユ湡","editable":"false","type":"text"},{"prop":"ry","label":"浜哄憳","editable":"false","type":"text"},{"prop":"bz","label":"澶囨敞","editable":"false","type":"text"},{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const jg11_qjHeader = reactive([[{"prop":"riqi","label":"鏃ユ湡","editable":"false","type":"text"},{"prop":"qjbw","label":"娓呮磥閮ㄤ綅","editable":"false","type":"text"},{"prop":"qjbz","label":"娓呮磥鏍囧噯","editable":"false","type":"text"},{"prop":"qjsj","label":"娓呮磥鏃堕棿","editable":"false","type":"text"},{"prop":"zrr","label":"璐d换浜�","editable":"false","type":"text"},{"prop":"jcr","label":"妫�鏌ヤ汉纭","editable":"false","type":"text"},{"prop":"wsxg","label":"娓呮磥鍚庡崼鐢熸晥鏋�","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const jg9_cpzlHeader = reactive([[{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"wgjc","label":"澶栬妫�楠�","editable":"false","type":"text"},{"prop":"shijian2","label":"鏃堕棿2","editable":"false","type":"text"},{"prop":"mtsljj","label":"姣忔潯鏁伴噺妫�楠�","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const jg9_scjlHeader = reactive([[{"prop":"jbscpl","label":"鎺ョ彮鏃舵垚鍝侀噺","editable":"false","type":"text"},{"prop":"syzbsl","label":"浣跨敤绾告澘鏁伴噺","editable":"false","type":"text"},{"prop":"jbssy","label":"浜ょ彮鏃跺墿浣欐垚鍝侀噺","editable":"false","type":"text"},{"prop":"rsdsl","label":"浣跨敤鐑缉琚嬫暟閲�","editable":"false","type":"text"},{"prop":"cpbs","label":"鎴愬搧鍖呮暟","editable":"false","type":"text"},{"prop":"dbdsl","label":"浣跨敤鎵撳寘甯︽暟閲�","editable":"false","type":"text"},{"prop":"crmsl","label":"浣跨敤缂犵粫鑶滄暟閲�","editable":"false","type":"text"},{"prop":"sxmsl","label":"浣跨敤铔囧舰鑶滄暟閲�","editable":"false","type":"text"},{"prop":"tpsl","label":"浣跨敤鎵樼洏鏁伴噺","editable":"false","type":"text"},{"prop":"fpsl","label":"搴熷搧鏁伴噺","editable":"false","type":"text"},{"prop":"bz","label":"澶囨敞","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const sh14_cc_fpHeader = reactive([[{"prop":"cq","label":"鍐茬己","editable":"false","type":"text"},{"prop":"kg","label":"鍗$洊","editable":"false","type":"text"},{"prop":"yh","label":"鍘嬬棔","editable":"false","type":"text"},{"prop":"cj","label":"鎶芥","editable":"false","type":"text"},{"prop":"bx","label":"鍙樺舰","editable":"false","type":"text"},{"prop":"gmwr","label":"鐩栭潰姹℃煋","editable":"false","type":"text"},{"prop":"sg","label":"鍙岀洊","editable":"false","type":"text"},{"prop":"jyzz","label":"鍗风紭鐨辫ざ","editable":"false","type":"text"},{"prop":"ldpy","label":"钃濈偣鍋忕Щ","editable":"false","type":"text"},{"prop":"gmyh","label":"鐩栭潰鍘嬬棔","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const sh14_gjj_fpHeader = reactive([[{"prop":"bx","label":"鍙樺舰","editable":"false","type":"text"},{"prop":"wj","label":"鏃犺兌","editable":"false","type":"text"},{"prop":"dj","label":"鐩栭潰姹℃煋","editable":"false","type":"text"},{"prop":"jj","label":"鏂兌","editable":"false","type":"text"},{"prop":"hs","label":"婧呰兌","editable":"false","type":"text"},{"prop":"cq","label":"鍒掍激","editable":"false","type":"text"},{"prop":"gmwr","label":"鍐茬己","editable":"false","type":"text"},{"prop":"sg","label":"鍙岀洊","editable":"false","type":"text"},{"prop":"jyzz","label":"鍗风紭鐨辫ざ","editable":"false","type":"text"},{"prop":"ldpy","label":"钃濈偣鍋忕Щ","editable":"false","type":"text"},{"prop":"gmyh","label":"鐩栭潰鍘嬬棔","editable":"false","type":"text"},{"prop":"gmbd","label":"鐩栭潰鐧界偣","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const sh14_jg_fpHeader = reactive([[{"prop":"bx","label":"鍙樺舰","editable":"false","type":"text"},{"prop":"wj","label":"鏃犺兌","editable":"false","type":"text"},{"prop":"dj","label":"鐩栭潰姹℃煋","editable":"false","type":"text"},{"prop":"jj","label":"鏂兌","editable":"false","type":"text"},{"prop":"hs","label":"婧呰兌","editable":"false","type":"text"},{"prop":"cq","label":"鍒掍激","editable":"false","type":"text"},{"prop":"gmwr","label":"鍐茬己","editable":"false","type":"text"},{"prop":"sg","label":"鍙岀洊","editable":"false","type":"text"},{"prop":"jyzz","label":"鍗风紭鐨辫ざ","editable":"false","type":"text"},{"prop":"ldpy","label":"钃濈偣鍋忕Щ","editable":"false","type":"text"},{"prop":"gmyh","label":"鐩栭潰鍘嬬棔","editable":"false","type":"text"},{"prop":"gmbd","label":"鐩栭潰鐧界偣","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const sh14_yt_fpHeader = reactive([[{"prop":"cy","label":"閲嶅奖","editable":"false","type":"text"},{"prop":"sc","label":"鑹插樊","editable":"false","type":"text"},{"prop":"mr","label":"澧ㄦ煋","editable":"false","type":"text"},{"prop":"ly","label":"婕忓嵃","editable":"false","type":"text"},{"prop":"zzd","label":"鏉傝川鐐�","editable":"false","type":"text"},{"prop":"nys","label":"鍐呭嵃鑹�","editable":"false","type":"text"},{"prop":"ldwy","label":"钃濈偣澶栫Щ","editable":"false","type":"text"},{"prop":"nwtcs","label":"鍐呭娑傛摝浼�","editable":"false","type":"text"},{"prop":"lt","label":"婕忔秱","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const sh14_zjHeader = reactive([[{"prop":"jy","label":"","editable":"false","type":"text"},{"prop":"sy","label":"","editable":"false","type":"text"},{"prop":"hj","label":"","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"","editable":"false","type":"text"},{"prop":"REVISION","label":"","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"","editable":"false","type":"text"}]]); +const sh14_zj_fpHeader = reactive([[{"prop":"kg","label":"鍗$洊","editable":"false","type":"text"},{"prop":"bx","label":"鍙樺舰","editable":"false","type":"text"},{"prop":"wj","label":"鏃犺兌","editable":"false","type":"text"},{"prop":"gmwr","label":"鐩栭潰姹℃煋","editable":"false","type":"text"},{"prop":"dj","label":"鏂兌","editable":"false","type":"text"},{"prop":"jj","label":"婧呰兌","editable":"false","type":"text"},{"prop":"hs","label":"鍒掍激","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const sm12_smHeader = reactive([[{"prop":"rq","label":"鏃ユ湡","editable":"false","type":"text"},{"prop":"banci","label":"鐝","editable":"false","type":"text"},{"prop":"xhgz","label":"灏忓悎鏍艰瘉","editable":"false","type":"text"},{"prop":"mtsysl","label":"姣忔墭浣跨敤鏁伴噺","editable":"false","type":"text"},{"prop":"ccpph","label":"浜ф垚鍝佹壒鍙�","editable":"false","type":"text"},{"prop":"smry","label":"缂╄啘浜哄憳","editable":"false","type":"text"},{"prop":"rsmyysl","label":"鐑缉鑶滀娇鐢ㄦ暟閲�","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const zj5_baseHeader = reactive([[{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"no1","label":"1#妯�","editable":"false","type":"text"},{"prop":"no2","label":"2#妯�","editable":"false","type":"text"},{"prop":"no3","label":"3#妯�","editable":"false","type":"text"},{"prop":"no4","label":"4#妯�","editable":"false","type":"text"},{"prop":"hxw","label":"鐑樼娓�","editable":"false","type":"text"},{"prop":"ycw","label":"寮傚父娓�","editable":"false","type":"text"},{"prop":"tzcs","label":"璋冩暣鎺柦","editable":"false","type":"text"},{"prop":"tzr","label":"璋冩暣浜虹瀛�","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const zj5_mfjHeader = reactive([[{"prop":"mfjcj","label":"瀵嗗皝鑳跺巶瀹�","editable":"false","type":"text"},{"prop":"mfjxh_ph","label":"瀵嗗皝鑳跺瀷鍙�/鎵瑰彿","editable":"false","type":"text"},{"prop":"yjl","label":"鐢ㄨ兌閲�","editable":"false","type":"text"},{"prop":"fp","label":"搴熷搧","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const zj5_spHeader = reactive([[{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"sudu","label":"閫熷害","editable":"false","type":"text"},{"prop":"yali","label":"鍘嬪姏","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const zj5_wgHeader = reactive([[{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"wgjc","label":"澶栬妫�娴�","editable":"false","type":"text"},{"prop":"qxyy","label":"缂洪櫡鍘熷洜","editable":"false","type":"text"},{"prop":"cstz","label":"鎺柦璋冩暣","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const zj6_checkHeader = reactive([[{"prop":"no","label":"搴忓彿","editable":"false","type":"text"},{"prop":"sbbw","label":"璁惧閮ㄤ綅","editable":"false","type":"text"},{"prop":"gj","label":"宸ュ叿","editable":"false","type":"text"},{"prop":"banci","label":"鐝","editable":"false","type":"text"},{"prop":"pdbz","label":"鍒ゆ柇鏍囧噯;缁撴灉纭锛氣憼璁惧姝e父鈥溾垰鈥濓紝鈶¤澶囨棤娉曚娇鐢ㄢ�溍椻�濓紝鈶㈣澶囨湁闂鈥溾柍鈥濓紝鈶h澶囦笉浣跨敤鈥溾垥鈥�","editable":"false","type":"text"},{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const zj7_weekHeader = reactive([[{"prop":"no","label":"搴忓彿","editable":"false","type":"text"},{"prop":"zq","label":"鍛ㄦ湡","editable":"false","type":"text"},{"prop":"whbw","label":"缁存姢閮ㄤ綅","editable":"false","type":"text"},{"prop":"ffgj","label":"鏂规硶宸ュ叿","editable":"false","type":"text"},{"prop":"zyl","label":"娉ㄦ补閲�","editable":"false","type":"text"},{"prop":"pdbz","label":"鍒ゆ柇鏍囧噯","editable":"false","type":"text"},{"prop":"banci","label":"鐝","editable":"false","type":"text"},{"prop":"week1","label":"绗竴鍛�","editable":"false","type":"text"},{"prop":"week2","label":"绗簩鍛�","editable":"false","type":"text"},{"prop":"week3","label":"绗笁鍛�","editable":"false","type":"text"},{"prop":"week4","label":"绗洓鍛�","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); +const zj8_cleanHeader = reactive([[{"prop":"qjbw","label":"娓呮磥閮ㄤ綅","editable":"false","type":"text"},{"prop":"qjbz","label":"娓呮磥鏍囧噯","editable":"false","type":"text"},{"prop":"shijian","label":"鏃堕棿","editable":"false","type":"text"},{"prop":"zeren","label":"璐d换浜�","editable":"false","type":"text"},{"prop":"jcr","label":"妫�鏌ヤ汉","editable":"false","type":"text"},{"prop":"xg","label":"娓呮磥鍚庡崼鐢熸晥鏋�","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"绉熸埛鍙�","editable":"false","type":"text"},{"prop":"REVISION","label":"涔愯閿�","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"鍒涘缓浜�","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"鍒涘缓鏃堕棿","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"鏇存柊浜�","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"鏇存柊鏃堕棿","editable":"false","type":"text"}]]); diff --git a/src/views/gaixian/screenTable.vue b/src/views/gaixian/screenTable.vue new file mode 100644 index 0000000..0b583ca --- /dev/null +++ b/src/views/gaixian/screenTable.vue @@ -0,0 +1,115 @@ +<template> + <el-form :inline="true" :model="formInline" class="demo-form-inline"> + <el-form-item label="閫夋嫨鍒楄〃"> + <el-select v-model="formInline.region" class="m-2" placeholder="Select"> + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="onSubmit">Query</el-button> + </el-form-item> + </el-form> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="date" label="Date" /> + <el-table-column prop="name" label="Name" /> + <el-table-column prop="address" label="Address" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-button size="small" @click="details(scope.$index)" + >鏌ョ湅璇︽儏</el-button + > + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> +</template> + +<script> +import { ref, reactive, onMounted } from "vue"; +export default { + name: "NewsIndex", + components: {}, + props: {}, + setup(props) { + const value = ref(""); + const tableData = reactive([]); + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 10, + }, + total: 0, + }); + const options = [ + { + value: "Option1", + label: "Option1", + }, + { + value: "Option2", + label: "Option2", + }, + { + value: "Option3", + label: "Option3", + }, + { + value: "Option4", + label: "Option4", + }, + { + value: "Option5", + label: "Option5", + }, + ]; + const formInline = reactive({ + region: "", + }); + //纭畾鎼滅储鍔ㄤ綔 + const onSubmit = () => {}; + //璇锋眰鍒楄〃鏂规硶 + const getlistData = () => { + //璁$畻鍒嗛〉鏁伴噺 + // pageData.total = Math.ceil(data.data.total / pageData.ListData.pageSize) + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + + getlistData(); + }; + //鏌ョ湅璇︽儏鎸夐挳 + const details = (val) => {}; + return { + value, + pageData, + options, + onSubmit, + formInline, + tableData, + handleCurrentChange, + details, + }; + }, +}; +</script> +<style lang="scss" scoped> +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} +</style> diff --git a/src/views/history/Index.vue b/src/views/history/Index.vue new file mode 100644 index 0000000..6e4556f --- /dev/null +++ b/src/views/history/Index.vue @@ -0,0 +1,253 @@ +<template> + <!-- <div class="block"> + <span class="leixing">绫诲瀷</span> + <el-select v-model="value" class="m-2" placeholder="Select" size="large"> + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> + <span class="demonstration">鏃堕棿</span> + <el-date-picker v-model="value" type="date" placeholder="Pick a day" + :shortcuts="shortcuts" :size="size" value-format="YYYY-MM-DD HH:mm:ss"/> + <el-button type="primary" icon="el-icon-search" @click="getListData()">鎼滅储</el-button> + </div> --> + <el-form :inline="true" :model="formInline" class="demo-form-inline"> + <el-form-item label="绫诲瀷"> + <el-select v-model="item" class="m-2" clearable placeholder="Select"> + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> + </el-form-item> + <el-form-item label="鏃堕棿"> + <el-date-picker + v-model="value" + type="date" + placeholder="Pick a day" + :shortcuts="shortcuts" + value-format="YYYY-MM-DD HH:mm:ss" + /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="getListData">Query</el-button> + </el-form-item> + </el-form> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="reportTime1" label="鏃堕棿"> </el-table-column> + <el-table-column prop="chanpin" label="浜у搧" /> + <el-table-column prop="leixing1" label="绫诲瀷" /> + <el-table-column prop="shengcx" label="浜х嚎" /> + <el-table-column prop="banci" label="鐝" /> + <el-table-column prop="id" label="缂栧彿" /> + <!-- <el-table-column prop="createDate" label="鏈�鏂版椂闂�" /> --> + <el-table-column prop="createdby" label="涓婁紶浜�" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-button + size="small" + type="primary" + @click="handleEdit(scope.$index, scope.row)" + >璇︽儏</el-button + > + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> +</template> + +<script> +import { ref, reactive, onMounted } from "vue"; +import { headPage, leixList, headAll } from "@/api/head"; +import { useRouter } from "vue-router"; +export default { + name: "NewsIndex", + components: {}, + props: {}, + setup() { + const router = useRouter(); + const value = ref(""); + const item = ref(""); + let tableData = ref([]); + const formLabelWidth = "140px"; + let options = ref([]); + let leixingMap = new Map(); + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 10, + }, + total: 0, + }); + let value2 = ""; + + const shortcuts = [ + { + text: "浠婂ぉ", + value: new Date(), + }, + { + text: "鏄ㄥぉ", + value: () => { + const date = new Date(); + date.setTime(date.getTime() - 3600 * 1000 * 24); + return date; + }, + }, + { + text: "涓�鍛ㄥ墠", + value: () => { + const date = new Date(); + date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); + return date; + }, + }, + ]; + const search = async () => { + pageData.ListData.shijian = value.value; + console.log("data manager....", value.value); + const data = await getListData(pageData.ListData); + + parse(data); + }; + + const getOptions = async () => { + const data = await leixList(); + console.log(".....leixing..", data); + options.value = data.result.map((node) => { + leixingMap.set(node.split("@")[1], node); + return { + value: node.split("@")[1], + label: node.split("@")[0], + }; + }); + console.log(".....leixing..", leixingMap); + }; + getOptions(); + + function handleEdit(index, row) { + // console.log("xxxxxxxxxxxxxxx", index); + console.log( + "xxxxxxxxxxxxxxx", + row.leixing.substr(0, 1) + "0" + row.leixing.substr(1, 1) + ); + // console.log("oooooooooooooooo"); + if (row.leixing.indexOf("g") == 0 && row.leixing.length == 2) { + router.push({ + path: "/" + row.leixing.substr(0, 1) + "0" + row.leixing.substr(1, 1), + query: { + id: row.id, + leixing: row.leixing, + }, + }); + } else + router.push({ + path: "/" + row.leixing, + query: { + id: row.id, + leixing: row.leixing, + }, + }); + + return handleEdit; + } + const formInline = reactive({ + region: "", + }); + const dialogFormVisible = ref(false); + //纭畾鎼滅储鍔ㄤ綔 + const onSubmit = () => {}; + //璇锋眰鍒楄〃鏂规硶leixList + const getListData = async () => { + pageData.ListData.shijian = value.value; + pageData.ListData.leixing = item.value; + const data = await headAll(pageData.ListData); + // console.log("data manager....", data); + + parse(data); + }; + function parse(e) { + console.log(".....search 2", e); + pageData.total = Math.ceil(e.data.total / pageData.ListData.pageSize); + tableData.value = e.data.records; + tableData.value.filter((item) => { + if (item.reportTime != null && item.reportTime.length > 0) { + options.value; + item.reportTime1 = item.reportTime.substr(0, 10); + item.leixing1 = leixingMap.get(item.leixing); + } + + return item; + }); + } + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + + getListData(); + }; + //鍒犻櫎鐢ㄦ埛 + const handleDelete = (val) => { + // console.log(val); + }; + //鏂板鐢ㄦ埛 + const addUser = () => {}; + + getListData(); + + function showState(row, column, cellValue, index) { + // console.log("row", row); + // console.log("col", column); + // console.log("cel", cellValue); + // console.log("index", index); + if (cellValue === 0) return "姝e父"; + else return "寮傚父"; + } + return { + item, + value, + getListData, + pageData, + options, + onSubmit, + formInline, + tableData, + handleCurrentChange, + handleDelete, + showState, + dialogFormVisible, + formLabelWidth, + addUser, + handleEdit, + + shortcuts, + search, + leixingMap, + }; + }, +}; +</script> +<style lang="scss" scoped> +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} + +.header_nox { + text-align: right; +} +</style> diff --git a/src/views/history/screenTable.vue b/src/views/history/screenTable.vue new file mode 100644 index 0000000..0b583ca --- /dev/null +++ b/src/views/history/screenTable.vue @@ -0,0 +1,115 @@ +<template> + <el-form :inline="true" :model="formInline" class="demo-form-inline"> + <el-form-item label="閫夋嫨鍒楄〃"> + <el-select v-model="formInline.region" class="m-2" placeholder="Select"> + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="onSubmit">Query</el-button> + </el-form-item> + </el-form> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="date" label="Date" /> + <el-table-column prop="name" label="Name" /> + <el-table-column prop="address" label="Address" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-button size="small" @click="details(scope.$index)" + >鏌ョ湅璇︽儏</el-button + > + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> +</template> + +<script> +import { ref, reactive, onMounted } from "vue"; +export default { + name: "NewsIndex", + components: {}, + props: {}, + setup(props) { + const value = ref(""); + const tableData = reactive([]); + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 10, + }, + total: 0, + }); + const options = [ + { + value: "Option1", + label: "Option1", + }, + { + value: "Option2", + label: "Option2", + }, + { + value: "Option3", + label: "Option3", + }, + { + value: "Option4", + label: "Option4", + }, + { + value: "Option5", + label: "Option5", + }, + ]; + const formInline = reactive({ + region: "", + }); + //纭畾鎼滅储鍔ㄤ綔 + const onSubmit = () => {}; + //璇锋眰鍒楄〃鏂规硶 + const getlistData = () => { + //璁$畻鍒嗛〉鏁伴噺 + // pageData.total = Math.ceil(data.data.total / pageData.ListData.pageSize) + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + + getlistData(); + }; + //鏌ョ湅璇︽儏鎸夐挳 + const details = (val) => {}; + return { + value, + pageData, + options, + onSubmit, + formInline, + tableData, + handleCurrentChange, + details, + }; + }, +}; +</script> +<style lang="scss" scoped> +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} +</style> diff --git a/src/views/layout/Index.vue b/src/views/layout/Index.vue new file mode 100644 index 0000000..a4ea785 --- /dev/null +++ b/src/views/layout/Index.vue @@ -0,0 +1,43 @@ +<template> + <el-container id="layout-container"> + <el-aside id="layout-aside" :width="collapse === true ? '60px' : '250px'"><layout-aside /></el-aside> + <el-container> + <el-header id="layout-header" height="75px"><layout-header /></el-header> + <el-main id="layout-main"><layout-main /></el-main> + </el-container> + </el-container> +</template> + +<script> +import LayoutAside from "./components/Aside"; +import LayoutHeader from "./components/Header"; +import LayoutMain from "./components/Main"; +import { useStore } from "vuex"; +import { computed } from "vue"; +export default { + name: "Layout", + components: { LayoutAside, LayoutHeader, LayoutMain }, + props: {}, + setup(props){ + const store = useStore(); + const collapse = computed(() => store.state.app.collapse); + return { + collapse + } + } +} +</script> +<style lang="scss" scpoed> +#layout-container { height: 100vh; } +#layout-aside { + background-color: #344a5f; + @include webkit(transition, all .3s ease 0s); +} +#layout-header { + position: relative; + z-index: 10; + background-color: $color_main; + @include webkit(box-shadow, 0 0 10px 0 rgba(0, 0, 0, .1)); +} +#layout-main { background-color: #f7f7f7; } +</style> diff --git a/src/views/layout/components/Aside.vue b/src/views/layout/components/Aside.vue new file mode 100644 index 0000000..2f61527 --- /dev/null +++ b/src/views/layout/components/Aside.vue @@ -0,0 +1,142 @@ +<template> + <h1 class="logo">濂ョ憺閲慚ESS绠$悊骞冲彴</h1> + <el-menu + :collapse="collapse" + :default-active="currentPath" + background-color="#344a5f" + text-color="#fff" + active-text-color="#ffffff" + router + > + <template v-for="item in routers" :key="item.path"> + <template v-if="!item.hidden"> + <!-- 涓�绾ц彍鍗� --> + <template v-if="hasOnlyChild(item.children)"> + <el-menu-item :index="item.children[0].path"> + <!-- <img class="menu-icon" :src="item.meta.icon" alt="" /> --> + <template #title>{{ + item.children[0].meta && item.children[0].meta.title + }}</template> + </el-menu-item> + </template> + <!-- 瀛愮骇鑿滃崟 --> + <template v-else> + <el-sub-menu + v-if="item.children && item.children.length > 0" + :index="item.path" + > + <template #title> + <span>{{ item.meta && item.meta.title }}</span> + </template> + <template v-for="child in item.children" :key="child.path"> + <template v-if="!item.hidden"> + <el-menu-item v-if="!child.children" :index="child.path"> + {{ child.meta && child.meta.title }} + </el-menu-item> + <el-sub-menu v-else> + <template #title> + <span> {{ child.meta && child.meta.title }}</span> + </template> + <template v-for="child in child.children" :key="child.path"> + <el-menu-item v-if="!child.hidden" :index="child.path">{{ + child.meta && child.meta.title + }}</el-menu-item> + </template> + </el-sub-menu> + </template> + <!-- <template v-if="!child.hidden"> + <el-menu-item v-if="!child.hidden" :index="child.path">{{ + child.meta && child.meta.title + }}</el-menu-item> + </template> --> + </template> + </el-sub-menu> + </template> + </template> + </template> + </el-menu> +</template> + +<script> +import { useRouter, useRoute } from "vue-router"; +import { reactive, computed, toRefs,onMounted ,nextTick} from "vue"; +import { useStore } from "vuex"; +export default { + name: "Aside", + components: {}, + props: {}, + setup() { + const { options } = useRouter(); + const { path } = useRoute(); + const store = useStore(); + const routers = options.routes; + // console.log(routers); + /** + * 鏁版嵁 + */ + const data = reactive({ + logo: computed(() => { + return store.state.app.collapse + ? require("@/assets/images/logo-min.png") + : require("@/assets/images/logo.png"); + }), + collapse: computed(() => store.state.app.collapse), + }); + + /** + * 鍒ゆ柇鏄惁鍙湁涓�涓瓙绾ц彍鍗� + */ + const hasOnlyChild = (children) => { + if (!children) { + return false; + } + // 瀛樺偍璺敱 + if (!children) { + return false; + } + const childRouter = children.filter((item) => { + return item.hidden ? false : true; + }); + + // 鍙湁涓�涓瓙绾ц矾鐢� + if (childRouter.length === 1) { + return true; + } + // 鍚﹀垯 + return false; + }; + /** + * 鑾峰彇褰撳墠璺敱璺緞 + */ + const currentPath = computed(() => path); + // console.log(currentPath); + + onMounted(()=>{ + + + }) + return { + ...toRefs(data), + routers, + hasOnlyChild, + currentPath, + }; + }, +}; +</script> +<style lang="scss" scoped> +.logo { + padding: 20px 0; + border-bottom: 1px solid #2d4153; + color: #fff; + font-size: 24px; + font-weight: 600; + text-align: center; +} +.menu-icon { + width: 18px; + height: 18px; + display: inline-block; + margin: 0 5px 0 0; +} +</style> diff --git a/src/views/layout/components/Header.vue b/src/views/layout/components/Header.vue new file mode 100644 index 0000000..0fd5946 --- /dev/null +++ b/src/views/layout/components/Header.vue @@ -0,0 +1,107 @@ +<template> + <div class="header-wrap"> + <div class="wrap"> + <span class="menu-btn" @click="switchAside"> + <svg-icon iconName="menuBtn" className="icon-menu-svg"></svg-icon> + </span> + </div> + <div class="wrap"> + <div class="user-info"> + <div class="face-info"> + <!-- <img src="../../assets/images/logo-min.png" alt="409019683@qq.com" /> --> + <span class="name">{{ username }}</span> + </div> + <span class="logout" @click="handlerLogout"> + <svg-icon iconName="logout" className="icon-logout"></svg-icon> + </span> + </div> + </div> + </div> +</template> + +<script> +import { ref, getCurrentInstance } from "vue"; +import { useStore } from "vuex"; +import { useRouter } from "vue-router"; +export default { + name: "Header", + components: {}, + props: {}, + setup() { + // 鑾峰彇瀹炰緥涓婁笅鏂� + const { proxy } = getCurrentInstance(); + // Vuex + const store = useStore(); + // 寮曞叆router + const { replace } = useRouter(); + // 鑿滃崟鎸夐挳 + const switchAside = () => { + store.commit("app/SET_COLLAPSE"); + }; + // 鐢ㄦ埛鍚� + const username = ref(store.state.app.username); + // 鐧诲嚭 + const handlerLogout = () => { + proxy + .$confirm("纭閫�鍑虹鐞嗗悗鍙�", "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", + }) + .then(() => { + replace({ + name: "Login", + }); + }) + .catch((error) => {}); + }; + + return { + switchAside, + handlerLogout, + username, + }; + }, +}; +</script> +<style lang="scss" scoped> +.header-wrap { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} +.user-info { + float: right; + display: flex; + align-items: center; +} +.face-info { + span, + img { + display: inline-block; + vertical-align: middle; + } + span { + margin-left: 15px; + } +} +.logout { + display: flex; + align-items: center; + justify-content: center; + width: 75px; + height: 75px; + cursor: pointer; +} +.menu-btn { + cursor: pointer; +} // 鎵嬪娍 +.icon-menu-svg { + font-size: 24px; +} +.icon-logout { + font-size: 24px; +} +</style> diff --git a/src/views/layout/components/Main.vue b/src/views/layout/components/Main.vue new file mode 100644 index 0000000..2c4917a --- /dev/null +++ b/src/views/layout/components/Main.vue @@ -0,0 +1,25 @@ +<template> + <div id="main-content"> + <router-view /> + </div> +</template> + +<script> +export default { + name: "Main", + components: {}, + props: {}, + setup(){ + return {} + } +}; +</script> +<style lang="scss" scoped> +#main-content { + background-color: #fff; // 鑳屾櫙鑹� + padding: 20px; // 鍐呰竟璺濓紙4涓竟閮戒负20px锛� + min-height: 100%; // 楂樺害 + @include webkit(box-sizing, border-box); // css3闃村奖 +} + +</style> \ No newline at end of file diff --git a/src/views/system/Depart.vue b/src/views/system/Depart.vue new file mode 100644 index 0000000..f2ad76a --- /dev/null +++ b/src/views/system/Depart.vue @@ -0,0 +1,676 @@ +<template> + <div class="contentBox"> + <div class="content"> + <div class="addBtnBox"> + <el-button type="success" @click="openDialog('1')" + >鏂板椤剁骇鐩綍 + </el-button> + <el-button type="success" @click="openDialog('2')" + >娣诲姞瀛愮骇鐩綍 + </el-button> + <el-button type="danger" @click="deleteDep()">鍒犻櫎閫変腑鐩綍 </el-button> + </div> + <div class="inquire"> + <el-form :model="queryFormdata" :inline="true"> + <el-form-item label="閮ㄩ棬鍚嶇О"> + <el-input v-model="queryFormdata.name" /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="queryInfo()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + </el-form> + </div> + <div class="treeBox leftTree"> + <el-tree + :expand-on-click-node="false" + ref="deptreeRef" + :data="depTreeData" + show-checkbox + default-expand-all + node-key="value" + check-strictly + :props="defaultProps" + @node-click="handleNodeClick" + /> + </div> + </div> + <div class="content"> + <el-tabs v-model="activeName" class="demo-tabs"> + <el-tab-pane label="鍩烘湰淇℃伅" name="first"> + <el-form + style="width: 85%; margin: 0 auto" + :model="depForm" + ref="depFormRef" + :rules="rules" + > + <el-form-item + label="鏈烘瀯鍚嶇О" + :label-width="formLabelWidth" + prop="departName" + > + <el-input v-model="depForm.departName" /> + </el-form-item> + <el-form-item label="涓婄骇閮ㄩ棬" :label-width="formLabelWidth"> + <el-tree-select + placeholder="鏃�" + v-model="depForm.parentId" + :props="defaultProps" + disabled + :data="depTreeData" + node-key="value" + :render-after-expand="false" + /> + </el-form-item> + <el-form-item label="鏈烘瀯缂栫爜" :label-width="formLabelWidth"> + <el-input :disabled="true" v-model="depForm.orgCode" /> + </el-form-item> + <el-form-item + label="鏈烘瀯绫诲瀷" + :label-width="formLabelWidth" + prop="orgCategory" + > + <el-radio-group v-model="depForm.orgCategory"> + <div + v-if=" + depForm.parentId == '' || + depForm.parentId == null || + depForm.parentId == undefined + " + > + <el-radio-button :label="1">鍏徃</el-radio-button> + </div> + <div v-else> + <el-radio-button :label="2">閮ㄩ棬</el-radio-button> + <el-radio-button :label="3">宀椾綅</el-radio-button> + </div> + </el-radio-group> + </el-form-item> + <el-form-item label="鎺掑簭" :label-width="formLabelWidth"> + <el-input-number + v-model="depForm.departOrder" + :min="0" + :max="100" + controls-position="right" + @change="handleChange" + /> + </el-form-item> + <el-form-item label="鐢佃瘽" :label-width="formLabelWidth"> + <el-input v-model="depForm.mobile" placeholder="" /> + </el-form-item> + <el-form-item label="浼犵湡" :label-width="formLabelWidth"> + <el-input v-model="depForm.fax" autocomplete="off" /> + </el-form-item> + <el-form-item label="鍦板潃" :label-width="formLabelWidth"> + <el-input v-model="depForm.address" autocomplete="off" /> + </el-form-item> + <el-form-item label="澶囨敞" :label-width="formLabelWidth"> + <el-input + :rows="2" + type="textarea" + v-model="depForm.memo" + autocomplete="off" + /> + </el-form-item> + <el-form-item> + <div class="dialog-footer"> + <el-button @click="resetDepForm(depFormRef)">閲嶇疆</el-button> + <el-button type="primary" @click="editDep(depFormRef)" + >淇濆瓨</el-button + > + </div> + </el-form-item> + </el-form> + </el-tab-pane> + <el-tab-pane label="閮ㄩ棬鏉冮檺" name="second"> + <div class="treeBox"> + <el-tree + ref="menutreeRef" + :data="menuOptions" + show-checkbox + default-expand-all + node-key="value" + check-strictly + highlight-current + check-on-click-node + :props="menuProps" + /> + </div> + <div class="tab-footer"> + <div> + <el-button @click="selectAll(false)">閲嶇疆</el-button> + <el-button type="primary" @click="selectAll(true)" + >鍏ㄩ��</el-button + > + </div> + <div> + <el-button type="primary" @click="saveDepPerm()"> + 淇濆瓨 + </el-button> + </div> + + <!-- <el-button type="primary" @click="handleCheckedTreeExpand(true)" + >灞曞紑</el-button + > + <el-button type="primary" @click="handleCheckedTreeExpand(false)" + >鎶樺彔</el-button + > --> + </div> + </el-tab-pane> + </el-tabs> + </div> + </div> + <el-dialog + destroy-on-close + :before-close="DialogClose" + v-model="dialogTableVisible" + title="鏂板" + width="800px" + > + <el-form + style="width: 85%; margin: 0 auto" + :model="addForm" + ref="addFormRef" + :rules="rules" + > + <el-form-item + label="鏈烘瀯鍚嶇О" + :label-width="formLabelWidth" + prop="departName" + > + <el-input v-model="addForm.departName" /> + </el-form-item> + <el-form-item + v-if="addType == '2'" + label="涓婄骇閮ㄩ棬" + :label-width="formLabelWidth" + > + <el-tree-select + v-model="addForm.parentId" + :props="defaultProps" + disabled + :data="depTreeData" + node-key="value" + :render-after-expand="false" + /> + </el-form-item> + + <el-form-item + label="鏈烘瀯绫诲瀷" + :label-width="formLabelWidth" + prop="orgCategory" + > + <el-radio-group v-model="addForm.orgCategory"> + <div v-if="addType == '1'"> + <el-radio-button :label="1">鍏徃</el-radio-button> + </div> + <div v-if="addType == '2'"> + <el-radio-button :label="2">閮ㄩ棬</el-radio-button> + <el-radio-button :label="3">宀椾綅</el-radio-button> + </div> + </el-radio-group> + </el-form-item> + <el-form-item label="鎺掑簭" :label-width="formLabelWidth"> + <el-input-number + v-model="addForm.departOrder" + :min="0" + :max="100" + controls-position="right" + @change="handleChange" + /> + </el-form-item> + <el-form-item label="鐢佃瘽" :label-width="formLabelWidth"> + <el-input v-model="addForm.mobile" placeholder="" /> + </el-form-item> + <el-form-item label="浼犵湡" :label-width="formLabelWidth"> + <el-input v-model="addForm.fax" autocomplete="off" /> + </el-form-item> + <el-form-item label="鍦板潃" :label-width="formLabelWidth"> + <el-input v-model="addForm.address" autocomplete="off" /> + </el-form-item> + <el-form-item label="澶囨敞" :label-width="formLabelWidth"> + <el-input + :rows="2" + type="textarea" + v-model="addForm.memo" + autocomplete="off" + /> + </el-form-item> + <el-form-item> + <div class="dialog-footer" v-if="addType == '1'"> + <el-button @click="DialogClose(addFormRef)">鍙栨秷</el-button> + <el-button @click="addCo(addFormRef)" type="primary">纭畾</el-button> + </div> + <div class="dialog-footer" v-if="addType == '2'"> + <el-button @click="DialogClose(addFormRef)">鍙栨秷</el-button> + <el-button @click="addCo(addFormRef)" type="primary">纭畾</el-button> + </div> + </el-form-item> + </el-form> + </el-dialog> +</template> + +<script> +import { queryTreeList } from "@/api/role"; +import { ref, reactive, getCurrentInstance, nextTick } from "vue"; +import { ElMessageBox } from "element-plus"; +import { + DepartListAll, + searchBy, + queryDepartPermission, + edit, + saveDepartPermission, + deleteBatch, + addDepart, +} from "@/api/dep"; + +export default { + name: "Depart", + setup() { + const menuProps = { + children: "children", + label: "slotTitle", + }; + const depFormRef = ref(); + const addFormRef = ref(); + + const formLabelWidth = "80px"; + const deptreeRef = ref(); + const menutreeRef = ref(); + const activeName = ref("first"); + const menuOptions = ref([]); + const depTreeData = ref([]); + const defaultProps = { + children: "children", + label: "title", + }; + const { proxy } = getCurrentInstance(); + const queryFormdata = reactive({ + name: "", + }); + const rules = ref({ + departName: [ + { + required: true, + message: "璇疯緭鍏ユ満鏋勫悕绉�", + trigger: "blur", + }, + ], + }); + const oldNodedata = ref(""); + const addType = ref(""); + const addForm = reactive({ + departName: "", + orgCategory: "", //缁勭粐绫诲埆 + departOrder: 0, + mobile: "", + fax: "", + address: "", + memo: "", + parentId: "", + }); + const depPerArr = ref([]); + const depForm = reactive({ + key: "", + value: "", + title: "", + isLeaf: false, + id: "", + parentId: "", + departName: "", + departNameEn: null, + departNameAbbr: null, + departOrder: 0, //鎺掑簭 + description: null, + orgCategory: "", //鏈烘瀯绫诲瀷 + orgType: "", + orgCode: "", //鏈烘瀯缂栫爜 + mobile: null, //鐢佃瘽 + fax: null, //浼犵湡 + address: null, //鍦板潃 + memo: null, //澶囨敞 + status: null, + delFlag: "", + qywxIdentifier: null, + createBy: "", + createTime: "", + updateBy: "", + updateTime: "", + directorUserIds: null, + children: [], + }); + const dialogTableVisible = ref(false); + + const openDialog = (val) => { + addType.value = val; + if (val == "1") { + addForm.orgCategory = "1"; + } else if (val == "2") { + addForm.orgCategory = ""; + addForm.parentId = depForm.id; + } + dialogTableVisible.value = true; + }; + const addCo = () => { + let addInfo = JSON.parse(JSON.stringify(addForm)); + if (addInfo.parentId == "") { + delete addInfo.parentId; + } + addDepart(addInfo).then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + addInfo = {}; + DialogClose(); + getDepList(); + } + }); + }; + + const DialogClose = () => { + dialogTableVisible.value = false; + addForm.departName = ""; + addForm.orgCategory = ""; + addForm.departOrder = 0; + addForm.mobile = ""; + addForm.fax = ""; + addForm.address = ""; + addForm.memo = ""; + addForm.parentId = ""; + }; + const deleteDep = (done) => { + if (deptreeRef.value.getCheckedKeys().length == 0) { + return proxy.$message({ + message: "璇峰厛閫変腑鐩綍", + type: "error", + }); + } + ElMessageBox.confirm("纭畾瑕佸垹闄ゅ悧锛�") + .then(() => { + let ids = deptreeRef.value.getCheckedKeys().join(","); + deleteBatch({ ids: ids }) + .then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + getDepList(); + } + }) + .catch((err) => { + proxy.$message({ + message: JSON.parse(err).message, + type: "error", + }); + }); + done(); + }) + .catch(() => {}); + }; + const queryInfo = async () => { + let name = queryFormdata.name.trim(); + if (name != "") { + let searchData = { + keyWord: queryFormdata.name.trim(), + _t: new Date().getTime(), + }; + const depData = await searchBy(searchData); + depTreeData.value = depData.result; + nextTick().then(() => { + const firstNode = document.querySelector(".el-tree-node"); + firstNode.click(); + }); + } else { + getDepList(); + } + }; + // 璇锋眰閮ㄩ棬鍒楄〃 + const getDepList = async () => { + const depData = await DepartListAll(); + depTreeData.value = depData.result; + nextTick().then(() => { + const firstNode = document.querySelector(".el-tree-node"); + firstNode.click(); + }); + }; + const handleNodeClick = (row, node) => { + depForm.key = row.key; + depForm.value = row.value; + depForm.title = row.title; + depForm.isLeaf = false; + depForm.id = row.id; + depForm.parentId = node.parent.data.id ? node.parent.data.id : ""; + depForm.departName = row.departName; + depForm.departNameEn = row.departNameEn; + depForm.departNameAbbr = row.departNameAbbr; + depForm.description = row.description; + depForm.departOrder = row.departOrder; + depForm.orgCategory = row.orgCategory; + depForm.orgType = row.orgType; + depForm.orgCode = row.orgCode; + depForm.mobile = row.mobile; + depForm.fax = row.fax; + depForm.address = row.address; + depForm.memo = row.memo; + depForm.status = row.status; + depForm.delFlag = row.delFlag; + depForm.qywxIdentifier = row.qywxIdentifier; + depForm.createBy = row.createBy; + depForm.createTime = row.createTime; + depForm.updateBy = row.updateBy; + depForm.updateTime = row.updateTime; + depForm.children = row.children; + depForm.updateBy = row.updateBy; + depForm.children = row.children; + oldNodedata.value = JSON.stringify(depForm); + queryTreeList({ + _t: new Date().getTime(), + }).then((res) => { + if (res.result && res.result.treeList.length != 0) { + menuOptions.value = res.result.treeList; + } + }); + queryDepartPermission({ + departId: row.id, + _t: new Date().getTime(), + }).then((res) => { + if (res.result) { + depPerArr.value = res.result; + menutreeRef.value.setCheckedKeys(res.result, false); + } + }); + }; + const editDep = async (formEl) => { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + edit(depForm).then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + getDepList(); + } + }); + } else { + proxy.$message({ + message: "璇锋鏌ュ悗鏃犺鍚庝繚瀛�", + type: "error", + }); + } + }); + }; + const resetDepForm = (formEl) => { + if (!formEl) return; + formEl.resetFields(); + let resetData = JSON.parse(oldNodedata.value); + depForm.key = resetData.key; + depForm.value = resetData.value; + depForm.title = resetData.title; + depForm.isLeaf = false; + depForm.id = resetData.id; + depForm.parentId = resetData.parentId; + depForm.departName = resetData.departName; + depForm.departNameEn = resetData.departNameEn; + depForm.departNameAbbr = resetData.departNameAbbr; + depForm.description = resetData.description; + depForm.departOrder = resetData.departOrder; + depForm.orgCategory = resetData.orgCategory; + depForm.orgType = resetData.orgType; + depForm.orgCode = resetData.orgCode; + depForm.mobile = resetData.mobile; + depForm.fax = resetData.fax; + depForm.address = resetData.address; + depForm.memo = resetData.memo; + depForm.status = resetData.status; + depForm.delFlag = resetData.delFlag; + depForm.qywxIdentifier = resetData.qywxIdentifier; + depForm.createBy = resetData.createBy; + depForm.createTime = resetData.createTime; + depForm.updateBy = resetData.updateBy; + depForm.updateTime = resetData.updateTime; + depForm.children = resetData.children; + depForm.updateBy = resetData.updateBy; + depForm.children = resetData.children; + }; + + const selectAll = (val) => { + if (val) { + let selectData = jsonToArray(menuOptions.value).map((item) => { + return item.value; + }); + menutreeRef.value.setCheckedKeys(selectData, false); + } else { + menutreeRef.value.setCheckedKeys([], false); + } + }; + const saveDepPerm = async () => { + let obj = { + departId: depForm.id, + permissionIds: menutreeRef.value.getCheckedKeys(false).join(","), + lastpermissionIds: depPerArr.value.join(","), + }; + const data = await saveDepartPermission(obj); + proxy.$message({ + message: data.message, + type: "success", + }); + queryDepartPermission({ + departId: depForm.id, + _t: new Date().getTime(), + }).then((res) => { + if (res.result) { + depPerArr.value = res.result; + menutreeRef.value.setCheckedKeys(res.result, false); + } + }); + }; + // const handleCheckedTreeExpand = (value) => { + // console.log(menutreeRef.value); + // let selectData = jsonToArray(menuOptions.value); + // // console.log(selectData); + // for (let i = 0; i < menuOptions.value.length; i++) { + // // console.log( + // // menutreeRef.value.store.nodesMap[selectData[i].value].expanded + // // ); + // menutreeRef.value.store.nodesMap[selectData[i].value].expanded = value; + // } + // }; + // tree 缁撴瀯杞寲鎴愪竴缁存暟缁� + const jsonToArray = (nodes) => { + let r = []; + if (Array.isArray(nodes)) { + for (let i = 0, l = nodes.length; i < l; i++) { + r.push(nodes[i]); // 鍙栨瘡椤规暟鎹斁鍏ヤ竴涓柊鏁扮粍 + if ( + Array.isArray(nodes[i]["children"]) && + nodes[i]["children"].length > 0 + ) + // 鑻ュ瓨鍦╟hildren鍒欓�掑綊璋冪敤锛屾妸鏁版嵁鎷兼帴鍒版柊鏁扮粍涓紝骞朵笖鍒犻櫎璇hildren + r = r.concat(jsonToArray(nodes[i]["children"])); + // delete nodes[i]["children"] //姝ら」浼氭洿鏀瑰師鏁扮粍 + } + } + return r; + }; + + const handleChange = () => {}; + getDepList(); + + return { + addType, + openDialog, + addCo, + deleteDep, + rules, + queryFormdata, + queryInfo, + getDepList, + defaultProps, + menuOptions, + menuProps, + depTreeData, + handleNodeClick, + handleChange, + + activeName, + deptreeRef, + menutreeRef, + depForm, + addForm, + formLabelWidth, + depFormRef, + addFormRef, + editDep, + resetDepForm, + selectAll, + dialogTableVisible, + DialogClose, + // handleCheckedTreeExpand, + saveDepPerm, + }; + }, +}; +</script> + +<style scoped> +.treeBox { + height: 500px; + overflow: auto; + width: 100%; + color: #000; +} +.addBtnBox { + height: 100%; + margin-bottom: 20px; +} +.contentBox { + width: 100%; + display: flex; + justify-content: space-between; +} +.content { + height: 100%; + width: 48%; +} +.demo-tabs >>> .is-active { + background-color: transparent !important; +} +.dialog-footer { + display: flex; + justify-content: flex-end; +} +.tab-footer { + margin-top: 30px; + display: flex; + justify-content: space-between; +} +.leftTree >>> .is-current > .el-tree-node__content > .el-tree-node__label { + background-color: #bce6fd; +} +</style> \ No newline at end of file diff --git a/src/views/system/Menu.vue b/src/views/system/Menu.vue new file mode 100644 index 0000000..21966a6 --- /dev/null +++ b/src/views/system/Menu.vue @@ -0,0 +1,122 @@ +<template> + <div class="inquire"> + <el-form :model="queryFormdata" :inline="true"> + <el-form-item label="鑿滃崟鍚嶇О"> + <el-input v-model="queryFormdata.name" /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="queryInfo()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <div> + <el-table + :data="menuTable" + style="width: 100%" + row-key="id" + border + height="75vh" + stripe + fixed + fit + > + <el-table-column prop="name" label="鑿滃崟鍚嶇О" /> + <el-table-column + prop="menuType" + :formatter="stateFormat" + label="鑿滃崟绫诲瀷" + /> + <el-table-column prop="component" label="缁勪欢" /> + <el-table-column prop="url" label="璺緞" /> + <el-table-column prop="sortNo" label="椤哄簭" /> + <el-table-column prop="hidden" label="鏄惁鏄剧ず" align="center"> + <template #default="scope"> + <el-switch + v-model="scope.row.hidden" + :active-value="false" + :inactive-value="true" + active-text="鏄剧ず" + inactive-text="闅愯棌" + @change="handleStatusChange(scope.row)" + ></el-switch> + </template> + </el-table-column> + </el-table> + </div> +</template> + +<script> +import { ref, reactive, getCurrentInstance } from "vue"; +import { MenuListTree, MenuUpdate } from "@/api/menu"; + +export default { + name: "Menu", + setup() { + const { proxy } = getCurrentInstance(); + const handleStatusChange = async (row) => { + MenuUpdate(row) + .then((data) => { + proxy.$message({ + message: data.message, + type: "success", + }); + queryInfo(); + }) + .catch((err) => { + proxy.$message({ + message: err.status, + type: "error", + }); + }); + }; + const menuTable = ref([]); + const queryFormdata = reactive({ + name: "", + }); + const queryInfo = async () => { + let name = queryFormdata.name.trim(); + let searchData = reactive({}); + if (name != "") { + searchData = { + column: "createTime", + order: "desc", + name: queryFormdata.name.trim(), + _t: new Date().getTime(), + }; + } else { + searchData = { + column: "createTime", + order: "desc", + _t: new Date().getTime(), + }; + } + const data = await MenuListTree(searchData); + menuTable.value = data.result; + }; + const stateFormat = (row) => { + if (row.menuType == 0) { + return "涓�绾ц彍鍗�"; + } else { + return "瀛愯彍鍗�"; + } + }; + queryInfo(); + return { + queryFormdata, + queryInfo, + menuTable, + stateFormat, + handleStatusChange, + }; + }, +}; +</script> + +<style scoped> +.el-switch /deep/ .is-active { + background-color: transparent !important; +} +</style> \ No newline at end of file diff --git a/src/views/system/Role.vue b/src/views/system/Role.vue new file mode 100644 index 0000000..1cc79b4 --- /dev/null +++ b/src/views/system/Role.vue @@ -0,0 +1,790 @@ +<template> + <div class="inquire"> + <el-form ref="queryForm" :model="queryFormdata" :inline="true"> + <el-form-item label="瑙掕壊鍚嶇О"> + <el-input + v-model="queryFormdata.roleName" + placeholder="璇疯緭鍏ヨ鑹插悕绉�" + /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="queryInfo()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <div class="header_nox"> + <el-button type="primary" @click="handleAdd()">鏂板</el-button> + </div> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="roleName" label="瑙掕壊鍚嶇О" /> + <el-table-column prop="roleCode" label="瑙掕壊缂栫爜" /> + <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-link type="primary" @click="userFunc(scope.row)">鐢ㄦ埛</el-link> + <el-divider direction="vertical" /> + + <el-popconfirm + width="160px" + confirm-button-text="纭" + cancel-button-text="鍙栨秷" + :icon="InfoFilled" + icon-color="#eebe59" + title="纭鏄惁鍒犻櫎" + @confirm="confirmDelete(scope.row)" + @cancel="cancelEvent(scope.row)" + > + <template #reference> + <el-link type="primary">鍒犻櫎</el-link> + </template> + </el-popconfirm> + <el-divider direction="vertical" /> + <el-dropdown> + <span class="el-dropdown-link"> + 鏇村 + <el-icon class="el-icon--right"> + <arrow-down /> + </el-icon> + </span> + <template #dropdown> + <el-dropdown-menu> + <el-dropdown-item @click="editFunc(scope.row)" + >缂栬緫</el-dropdown-item + > + <el-dropdown-item @click="detailFunc(scope.row)" + >璇︽儏</el-dropdown-item + > + <el-dropdown-item @click="authFunc(scope.row)" + >鎺堟潈</el-dropdown-item + > + </el-dropdown-menu> + </template> + </el-dropdown> + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> + <el-drawer + ref="drawerRef" + v-model="dialog" + :title="drawertitle" + :before-close="handleClose" + direction="rtl" + class="demo-drawer" + :destroy-on-close="true" + > + <div v-if="drawertitle == '鐢ㄦ埛璇︽儏'"> + <el-descriptions title="鐢ㄦ埛璇︽儏" :column="1" border> + <el-descriptions-item label="瑙掕壊鍚嶇О">{{ + roleForm.roleName + }}</el-descriptions-item> + <el-descriptions-item label="瑙掕壊缂栫爜">{{ + roleForm.roleCode + }}</el-descriptions-item> + <el-descriptions-item label="澶囨敞">{{ + roleForm.description + }}</el-descriptions-item> + </el-descriptions> + </div> + <div v-else class="demo-drawer__content"> + <el-form :model="roleForm" :rules="rules" ref="ruleFormRef"> + <el-form-item + prop="roleName" + label="瑙掕壊鍚嶇О" + :label-width="formLabelWidth" + > + <el-input v-model="roleForm.roleName" autocomplete="off" /> + </el-form-item> + <el-form-item + prop="roleCode" + label="瑙掕壊缂栫爜" + :label-width="formLabelWidth" + > + <el-input + :disabled="drawertitle == '鐢ㄦ埛缂栬緫' ? true : false" + v-model="roleForm.roleCode" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="澶囨敞" :label-width="formLabelWidth"> + <el-input + :rows="2" + type="textarea" + v-model="roleForm.description" + autocomplete="off" + /> + </el-form-item> + </el-form> + <div class="dialog-footer" v-if="drawertitle == '鏂板鐢ㄦ埛'"> + <el-button @click="handleClose">鍙栨秷</el-button> + <el-button type="primary" @click="addRole(ruleFormRef)">娣诲姞</el-button> + </div> + <div class="dialog-footer" v-if="drawertitle == '鐢ㄦ埛缂栬緫'"> + <el-button @click="handleClose">鍙栨秷</el-button> + <el-button type="primary" @click="editRole(ruleFormRef)" + >纭畾</el-button + > + </div> + </div> + </el-drawer> + <el-drawer + ref="addRoleRef" + v-model="roleTable" + :title="secondTitle" + :before-close="secondClose" + direction="rtl" + class="demo-drawer" + destroy-on-close + > + <div class="inquire"> + <el-form ref="queryForm" :model="queryUserRoledata" :inline="true"> + <el-form-item label="鐢ㄦ埛璐﹀彿"> + <el-input v-model="queryUserRoledata.username" /> + </el-form-item> + <el-form-item> + <el-button + type="primary" + @click="queryUserInfo()" + icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <div> + <el-button type="primary" @click="bindUser">缁戝畾鐢ㄦ埛 </el-button> + </div> + <el-table + stripe + style="width: 100%" + :data="gridData" + table-layout="auto" + fit + > + <el-table-column property="username" label="鐢ㄦ埛璐﹀彿" /> + <el-table-column property="realname" label="鐢ㄦ埛濮撳悕" /> + <el-table-column property="status_dictText" label="鐘舵��" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-popconfirm + width="160px" + confirm-button-text="纭" + cancel-button-text="鍙栨秷" + :icon="InfoFilled" + icon-color="#eebe59" + title="鏄惁纭鍙栨秷鍏宠仈" + @confirm="confirmEvent(scope.row)" + @cancel="cancelEvent()" + > + <template #reference> + <el-link type="primary">鍙栨秷鍏宠仈</el-link> + </template> + </el-popconfirm> + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData2.total" + :current-page="pageData2.ListData.pageNo" + @current-change="handleCurrentChange2" + /> + </div> + </el-drawer> + <!-- 鎺堟潈 --> + <el-drawer + v-model="authDrawer" + title="瑙掕壊鏉冮檺閰嶇疆" + :before-close="authDrawerClose" + direction="rtl" + class="authDrawerBox" + :destroy-on-close="true" + > + <template #default> + <div class="treeBox"> + <el-tree + ref="treeRef" + :data="menuOptions" + show-checkbox + default-expand-all + node-key="value" + check-strictly + highlight-current + check-on-click-node + :props="defaultProps" + /> + </div> + </template> + <template #footer> + <div style="flex: auto"> + <el-button @click="authDrawerClose()">鍙栨秷</el-button> + <el-button type="primary" @click="saveRolePerm()"> 淇濆瓨 </el-button> + </div> + </template> + </el-drawer> + + <el-dialog + destroy-on-close + :before-close="thirdClose" + v-model="dialogTableVisible" + title="鐢ㄦ埛閫夋嫨鍒楄〃" + width="900px" + > + <div class="inquire"> + <el-form ref="queryForm" :model="queryUserList" :inline="true"> + <el-form-item label="鐢ㄦ埛璐﹀彿"> + <el-input v-model="queryUserList.username" /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="searchUser()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <el-table + stripe + table-layout="auto" + fit + @selection-change="handleSelectionChange" + :data="userTable" + style="width: 100%" + > + <el-table-column type="selection" width="50px" /> + <el-table-column prop="username" label="鐢ㄦ埛璐﹀彿" /> + <el-table-column prop="realname" label="鐢ㄦ埛濮撳悕" /> + <el-table-column prop="status_dictText" label="鐘舵��" /> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData3.total" + :current-page="pageData3.ListData.pageNo" + @current-change="handleCurrentChange3" + /> + </div> + <div class="dialog-footer"> + <el-button @click="thirdClose()">鍙栨秷</el-button> + <el-button type="primary" @click="sendBind()"> 纭畾 </el-button> + </div> + </el-dialog> +</template> + +<script> +import { ref, reactive, onMounted, getCurrentInstance } from "vue"; +import { + RoleListAll, + checkRoleCode, + RoleCreate, + queryTreeList, + queryRolePermission, + saveRolePermission, + RoleUpdate, + deleteRole, +} from "@/api/role"; +import { + userList, + userRoleList, + addSysUserRole, + deleteUserRole, +} from "@/api/account"; +import { InfoFilled } from "@element-plus/icons-vue"; +export default { + name: "Role", + props: {}, + setup(props) { + let tableData = ref([]); + const multipleSelection = ref([]); + const { proxy } = getCurrentInstance(); + const menuOptions = ref([]); + const defaultProps = { + children: "children", + label: "slotTitle", + }; + const treeRef = ref(); + const roleID = ref(""); + const rolePerArr = ref([]); + // 鏌ヨ妯″潡 + let queryFormdata = reactive({ + roleName: "", + }); + + let pageData = reactive({ + ListData: { + roleName: "", + column: "id", + order: "desc", + pageNo: 1, + pageSize: 10, + _t: new Date().getTime(), + }, + total: 0, + }); + const dialogTableVisible = ref(false); + + // 鏌ヨ鐢ㄦ埛 + const queryInfo = async () => { + pageData.ListData.roleName = queryFormdata.roleName.trim(); + getListData(); + }; + const validateRoleCode = (rule, value, callback) => { + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ヨ鑹茬紪鐮�")); + } else { + if (roleForm.id == "") { + checkRoleCode({ + roleCode: value, + _t: new Date().getTime(), + }).then((res) => { + if (res.success) { + callback(); + } else { + callback(new Error(res.message)); + } + }); + } else { + checkRoleCode({ + id: roleForm.id, + roleCode: value, + _t: new Date().getTime(), + }).then((res) => { + if (res.success) { + callback(); + } else { + callback(new Error(res.message)); + } + }); + } + } + }; + const rules = reactive({ + roleName: [ + { required: true, message: "璇疯緭鍏ヨ鑹插悕绉�", trigger: "blur" }, + ], + roleCode: [ + { required: true, validator: validateRoleCode, trigger: "change" }, + ], + }); + const dialog = ref(false); + const authDrawer = ref(false); + const drawertitle = ref(""); + + const ruleFormRef = ref(); + + const formLabelWidth = "80px"; + const roleForm = reactive({ + id: "", + roleName: "", + roleCode: "", + description: "", + }); + const drawerRef = ref(); + const addRoleRef = ref(); + + const handleClose = (done) => { + drawertitle.value = ""; + roleForm.id = ""; + roleForm.roleName = ""; + roleForm.roleCode = ""; + roleForm.description = ""; + dialog.value = false; + }; + //鏂板鐢ㄦ埛 + const handleAdd = () => { + dialog.value = true; + drawertitle.value = "鏂板鐢ㄦ埛"; + }; + const addRole = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let roleInfo = { + roleName: roleForm.roleName, + roleCode: roleForm.roleCode, + description: roleForm.description, + }; + RoleCreate(roleInfo).then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + handleClose(); + getListData(); + }); + } else { + return false; + } + }); + }; + // 鍙栨秷鍏宠仈 + const confirmEvent = (val) => { + let obj = { + userId: val.id, + roleId: pageData2.ListData.roleId, + }; + deleteUserRole(obj) + .then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + getListData2(); + }) + .catch((res) => { + proxy.$message({ + message: res.message, + type: "error", + }); + getListData2(); + }); + }; + const cancelEvent = (val) => {}; + + const gridData = ref([]); + const userTable = ref([]); + const secondTitle = ref(""); + const roleTable = ref(false); + let pageData2 = reactive({ + ListData: { + username: "", + roleId: "", + _t: new Date().getTime(), + pageNo: 1, + pageSize: 10, + }, + total: 0, + }); + let pageData3 = reactive({ + ListData: { + username: "", + pageNo: 1, + pageSize: 5, + _t: new Date().getTime(), + }, + total: 0, + }); + let queryUserList = reactive({ + username: "", + }); + let queryUserRoledata = reactive({ + username: "", + }); + + // 灞曞紑鐢ㄦ埛璇︽儏锛屾煡璇㈠綋鍓嶈鑹蹭笅鐨勭敤鎴� + const userFunc = async (val) => { + pageData2.ListData.roleId = val.id; + secondTitle.value = "鐢ㄦ埛璇︽儏"; + roleTable.value = true; + getListData2(); + }; + // 鏌ヨ鎵�鏈夌敤鎴峰垪琛� + const queryUserInfo = async () => { + pageData2.ListData.username = queryUserRoledata.username.trim(); + getListData2(); + }; + // 鏌ヨ鎸囧畾椤电爜 + const getListData2 = async () => { + const data = await userRoleList(pageData2.ListData); + gridData.value = data.result.records; + pageData2.total = Math.ceil( + data.result.total / pageData2.ListData.pageSize + ); + }; + // 鍒嗛〉鍣� + const handleCurrentChange2 = async (val) => { + pageData2.ListData.pageNo = val; + getListData2(); + }; + // 缁戝畾鐢ㄦ埛 + const bindUser = () => { + dialogTableVisible.value = true; + searchUser(); + }; + const searchUser = async () => { + pageData3.ListData.username = queryUserList.username.trim(); + const data = await userList(pageData3.ListData); + userTable.value = data.result.records; + pageData3.total = Math.ceil( + data.result.total / pageData3.ListData.pageSize + ); + }; + // 鍒嗛〉鍣� + const handleCurrentChange3 = async (val) => { + pageData3.ListData.pageNo = val; + searchUser(); + }; + // 澶氶�� + const handleSelectionChange = (val) => { + multipleSelection.value = val; + }; + //纭缁戝畾 + const sendBind = () => { + let obj = multipleSelection.value.map((item) => { + return item.id; + }); + let bindData = { + roleId: pageData2.ListData.roleId, + userIdList: obj, + }; + addSysUserRole(bindData) + .then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + dialogTableVisible.value = false; + getListData2(); + } + }) + .catch((err) => { + proxy.$message({ + message: res.message, + type: "error", + }); + dialogTableVisible.value = false; + getListData2(); + }); + multipleSelection.value = []; //娓呯┖澶氶�� + }; + const thirdClose = () => { + queryUserList.username = ""; + pageData3.ListData.username = ""; + pageData3.ListData.pageNo = 1; + pageData3.ListData.pageSize = 10; + pageData3.total = 0; + dialogTableVisible.value = false; + }; + // 鍏抽棴鐢ㄦ埛椤� + const secondClose = () => { + queryUserRoledata.username = ""; + pageData2.ListData.roleId = ""; + pageData2.ListData.pageNo = 1; + pageData2.ListData.pageSize = 10; + pageData2.total = 0; + roleTable.value = false; + }; + + const authFunc = async (val) => { + roleID.value = val.id; + queryTreeList({ + _t: new Date().getTime(), + }).then((res) => { + if (res.result.treeList && res.result.treeList.length != 0) { + menuOptions.value = res.result.treeList; + } + }); + + queryRolePermission({ + roleId: val.id, + _t: new Date().getTime(), + }).then((res) => { + rolePerArr.value = res.result; + treeRef.value.setCheckedKeys(res.result, false); + }); + + authDrawer.value = true; + }; + const saveRolePerm = async () => { + let obj = { + roleId: roleID.value, + permissionIds: treeRef.value.getCheckedKeys(false).join(","), + lastpermissionIds: rolePerArr.value.join(","), + }; + const data = await saveRolePermission(obj); + proxy.$message({ + message: data.message, + type: "success", + }); + queryRolePermission({ + roleId: roleID.value, + _t: new Date().getTime(), + }).then((res) => { + rolePerArr.value = res.result; + treeRef.value.setCheckedKeys(res.result, false); + }); + }; + const authDrawerClose = () => { + roleID.value = ""; + rolePerArr.value = []; + treeRef.value.setCheckedKeys([], false); + authDrawer.value = false; + }; + const editFunc = async (val) => { + drawertitle.value = "鐢ㄦ埛缂栬緫"; + dialog.value = true; + roleForm.id = val.id; + roleForm.roleName = val.roleName; + roleForm.roleCode = val.roleCode; + roleForm.description = val.description; + }; + const editRole = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + RoleUpdate(roleForm).then((res) => { + // console.log(res); + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + handleClose(); + getListData(); + }); + } else { + return false; + } + }); + }; + + const detailFunc = (val) => { + drawertitle.value = "鐢ㄦ埛璇︽儏"; + dialog.value = true; + roleForm.id = val.id; + roleForm.roleName = val.roleName; + roleForm.roleCode = val.roleCode; + roleForm.description = val.description; + }; + const deleteFunc = async (val) => {}; + const confirmDelete = (val) => { + deleteRole({ + id: val.id, + }) + .then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + getListData(); + }) + .catch((res) => { + proxy.$message({ + message: res.message, + type: "error", + }); + getListData(); + }); + }; + //璇锋眰鍒楄〃鏂规硶 + const getListData = async () => { + const data = await RoleListAll(pageData.ListData); + tableData.value = data.result.records; + pageData.total = Math.ceil( + data.result.total / pageData.ListData.pageSize + ); + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + getListData(); + }; + + //杩涘叆椤甸潰锛屽氨浼氳璋冪敤 + getListData(); + + return { + bindUser, + sendBind, + handleSelectionChange, + dialogTableVisible, + queryUserList, + secondTitle, + drawerRef, + addRoleRef, + roleTable, + queryFormdata, + queryUserRoledata, + searchUser, + userTable, + secondClose, + queryInfo, + thirdClose, + pageData, + pageData2, + pageData3, + tableData, + gridData, + handleCurrentChange, + handleCurrentChange2, + handleCurrentChange3, + confirmEvent, + cancelEvent, + handleAdd, + addRole, + getListData2, + InfoFilled, + rules, + roleForm, + formLabelWidth, + dialog, + handleClose, + userFunc, + authFunc, + editFunc, + editRole, + detailFunc, + deleteFunc, + confirmDelete, + drawertitle, + ruleFormRef, + queryUserInfo, + authDrawer, + authDrawerClose, + menuOptions, + defaultProps, + treeRef, + saveRolePerm, + }; + }, +}; +</script> +<style lang="scss" scoped> +.page { + display: flex; + justify-content: center; + margin-top: 20px; +} +.header_nox { + // text-align: right; +} +.el-dropdown-link { + margin-top: 4px; + cursor: pointer; + color: var(--el-color-primary); + display: flex; + align-items: center; +} +.dialog-footer { + display: flex; + justify-content: flex-end; +} + +.authDrawerBox .demo-drawer__content .treeBox { + height: 88vh; + overflow: auto; +} +</style> diff --git a/src/views/system/User.vue b/src/views/system/User.vue new file mode 100644 index 0000000..0385bfb --- /dev/null +++ b/src/views/system/User.vue @@ -0,0 +1,748 @@ +<template> + <div class="inquire"> + <el-form :model="queryFormdata" :inline="true"> + <el-form-item label="鐢ㄦ埛璐﹀彿"> + <el-input v-model="queryFormdata.username" /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="queryInfo()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <div class="header_nox"> + <el-button type="primary" @click="handleAdd()">鏂板鐢ㄦ埛</el-button> + </div> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="username" label="鐢ㄦ埛璐﹀彿" /> + <el-table-column prop="realname" label="鐢ㄦ埛濮撳悕" /> + <el-table-column prop="phone" label="鎵嬫満鍙�" /> + <el-table-column prop="orgCodeTxt" label="閮ㄩ棬" /> + <el-table-column prop="workNo" label="宸ュ彿" /> + <el-table-column prop="status_dictText" label="鐘舵��" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-link type="primary" @click="handleEdit(scope.row, 'edit')" + >缂栬緫</el-link + > + <el-divider direction="vertical" /> + <el-dropdown> + <span class="el-dropdown-link"> + 鏇村 + <el-icon class="el-icon--right"> + <arrow-down /> + </el-icon> + </span> + <template #dropdown> + <el-dropdown-menu> + <el-dropdown-item @click="handleEdit(scope.row, 'info')" + >璇︽儏</el-dropdown-item + > + <el-dropdown-item @click="changePass(scope.row)" + >瀵嗙爜</el-dropdown-item + > + <el-dropdown-item + @click="frozen(scope.row)" + v-if="scope.row.status == 1" + >鍐荤粨</el-dropdown-item + > + <el-dropdown-item + @click="thaw(scope.row)" + v-if="scope.row.status == 2" + >瑙e喕</el-dropdown-item + > + </el-dropdown-menu> + </template> + </el-dropdown> + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> + + <el-drawer + ref="drawerRef" + v-model="dialog" + :title="drawertitle" + :before-close="handleClose" + direction="rtl" + class="demo-drawer" + :destroy-on-close="true" + > + <div class="demo-drawer__content"> + <el-form + ref="ruleFormRef" + :model="ruleForm" + status-icon + :rules="rules" + label-width="120px" + class="demo-ruleForm" + :disabled="isDisabled" + > + <el-form-item label="鐢ㄦ埛璐﹀彿" :prop="isAdd ? 'username' : 'realname'"> + <el-input + placeholder="璇疯緭鍏ョ敤鎴疯处鍙�" + :disabled="isEdit ? true : false" + v-model="ruleForm.username" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐧诲綍瀵嗙爜" prop="password" v-if="isAdd"> + <el-input + show-password + placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�" + v-model="ruleForm.password" + type="password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="纭瀵嗙爜" prop="confirmPassword" v-if="isAdd"> + <el-input + show-password + placeholder="璇疯緭鍏ョ‘璁ゅ瘑鐮�" + v-model="ruleForm.confirmPassword" + type="password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐢ㄦ埛濮撳悕" prop="realname"> + <el-input + placeholder="璇疯緭鍏ョ敤鎴峰鍚�" + v-model="ruleForm.realname" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="宸ュ彿" prop="workNo"> + <el-input + placeholder="璇疯緭鍏ュ伐鍙�" + v-model="ruleForm.workNo" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="瑙掕壊"> + <el-select + v-model="ruleForm.selectedroles" + clearable + placeholder="璇烽�夋嫨瑙掕壊" + > + <el-option + v-for="item in RoleOptions" + :key="item.id" + :label="item.roleName" + :value="item.id" + /> + </el-select> + </el-form-item> + <el-form-item label="鎵�灞為儴闂�"> + <el-tree-select + placeholder="璇烽�夋嫨鎵�灞為儴闂�" + v-model="ruleForm.selecteddeparts" + :props="{ value: 'value', label: 'title' }" + :data="depOptions" + multiple + node-key="value" + :render-after-expand="false" + show-checkbox + check-strictly + check-on-click-node + :default-checked-keys="selectedDep" + /> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜" prop="phone"> + <el-input v-model="ruleForm.phone" autocomplete="off" /> + </el-form-item> + <el-form-item label="寮曟搸"> + <el-radio-group v-model="ruleForm.activitiSync"> + <el-radio :label="1">鍚屾</el-radio> + <el-radio :label="2">涓嶅悓姝�</el-radio> + </el-radio-group> + </el-form-item> + </el-form> + <div class="demo-drawer__footer" v-if="isAdd"> + <el-button @click="handleClose()">鍙栨秷</el-button> + <el-button type="primary" @click="addUser(ruleFormRef)">鏂板</el-button> + </div> + <div class="demo-drawer__footer" v-if="isEdit"> + <el-button @click="handleClose()">鍙栨秷</el-button> + <el-button type="primary" @click="editUser(ruleFormRef)"> + 缂栬緫 + </el-button> + </div> + </div> + </el-drawer> + <el-dialog + destroy-on-close + v-model="editFormVisible" + title="淇敼瀵嗙爜" + customClass="addWidth" + width="20%" + > + <el-form + ref="editForm" + :model="ruleForm" + :rules="rules" + label-width="120px" + class="demo-ruleForm" + > + <el-form-item label="鐢ㄦ埛鍚�"> + <el-input + :disabled="true" + v-model="ruleForm.username" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐧诲綍瀵嗙爜" prop="password"> + <el-input + type="password" + v-model="ruleForm.password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="纭瀵嗙爜" prop="confirmPassword"> + <el-input + type="password" + v-model="ruleForm.confirmPassword" + autocomplete="off" + /> + </el-form-item> + <el-form-item> + <el-button @click="handleClose()">鍏抽棴</el-button> + <el-button type="primary" @click="changePassword(editForm)" + >鎻愪氦</el-button + > + </el-form-item> + </el-form> + </el-dialog> +</template> + +<script> +import { ref, reactive, onMounted, getCurrentInstance } from "vue"; +import { + userList, + add, + deleteUser, + edit, + modifyPassword, + duplicateUser, + frozenBatch, +} from "@/api/account"; +import { DepartListAll, queryUserDepart } from "@/api/dep"; +import { RoleListAll, queryUserRole } from "@/api/role"; + +export default { + name: "User", + components: {}, + props: {}, + setup(props) { + // 楠岃瘉瑙勫垯 + const username = (rule, value, callback) => { + var reg = new RegExp(/^[a-zA-Z0-9_]{0,15}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ョ敤鎴峰悕")); + } else { + if (!reg.test(value)) { + callback(new Error("璐﹀彿蹇呴』鐢卞瓧姣嶏紝鏁板瓧鎴栦笅鍒掔嚎,闀垮害涓嶅緱瓒呰繃16浣�")); + } else { + if (isAdd.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "username", + fieldVal: value, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("璐﹀彿宸插瓨鍦�")); + }); + } else if (isEdit.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "username", + fieldVal: value, + dataId: ruleForm.id, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("璐﹀彿宸插瓨鍦�")); + }); + } + } + } + }; + const workNo = (rule, value, callback) => { + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ュ伐鍙�")); + } else { + if (isAdd.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "work_no", + fieldVal: value, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("宸ュ彿宸插瓨鍦�")); + }); + } else if (isEdit.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "work_no", + fieldVal: value, + dataId: ruleForm.id, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("宸ュ彿宸插瓨鍦�")); + }); + } + } + }; + const phone = (rule, value, callback) => { + var reg = new RegExp(/^[1][3,4,5,7,8][0-9]{9}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ユ墜鏈哄彿")); + } else { + if (!reg.test(value)) { + callback(new Error("鎵嬫満鍙锋牸寮忛敊璇�")); + } else { + if (isAdd.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "phone", + fieldVal: value, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("鎵嬫満鍙峰凡瀛樺湪")); + }); + } else if (isEdit.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "phone", + fieldVal: value, + dataId: ruleForm.id, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("鎵嬫満鍙峰凡瀛樺湪")); + }); + } + } + } + }; + const validatePass = (rule, value, callback) => { + var reg = new RegExp(/^[a-zA-Z0-9]{0,15}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "") { + callback(new Error("璇疯緭鍏ュ瘑鐮�")); + } else { + if (!reg.test(value)) { + callback(new Error("瀵嗙爜蹇呴』鐢卞瓧姣嶆垨鏁板瓧缁勬垚,闀垮害涓嶅緱瓒呰繃16浣�")); + } else { + callback(); + } + } + }; + const validatePass2 = (rule, value, callback) => { + if (value === "") { + callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")); + } else if (value !== ruleForm.password) { + callback(new Error("涓ゆ瀵嗙爜涓嶄竴鑷达紒")); + } else { + callback(); + } + }; + const rules = reactive({ + realname: [ + { + required: true, + message: "璇峰~鍐欑敤鎴峰鍚�", + trigger: "blur", + }, + ], + username: [{ required: true, validator: username, trigger: "change" }], + password: [{ required: true, validator: validatePass, trigger: "blur" }], + confirmPassword: [ + { required: true, validator: validatePass2, trigger: "blur" }, + ], + + workNo: [{ required: true, validator: workNo, trigger: "change" }], + phone: [{ required: true, validator: phone, trigger: "change" }], + }); + + const ruleFormRef = ref(); + const editForm = ref(); + const drawertitle = ref(""); + const ruleForm = reactive({ + id: "", + username: "", + password: "", + confirmPassword: "", + realname: "", + workNo: "", //宸ュ彿 + selectedroles: "", //瑙掕壊 + selecteddeparts: [], //鎵�灞為儴闂� + userIdentity: 1, //韬唤 + phone: "", //鎵嬫満 + activitiSync: 1, //宸ヤ綔娴� + }); + + let tableData = ref([]); + const { proxy } = getCurrentInstance(); + // 鏌ヨ妯″潡 + let queryFormdata = reactive({ + username: "", + }); + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 10, + _t: new Date().getTime(), + }, + total: 0, + }); + // 鏌ヨ鐢ㄦ埛 + const queryInfo = async () => { + let searchData = { + username: queryFormdata.username.trim(), + _t: new Date().getTime(), + }; + const data = await userList(searchData); + tableData.value = data.result.records; + pageData.total = Math.ceil( + data.result.total / pageData.ListData.pageSize + ); + }; + + // 瀹氫箟寮规 + const dialog = ref(false); + const isEdit = ref(false); + const isAdd = ref(false); + const isDisabled = ref(false); + const drawerRef = ref(); + + // 鍏抽棴寮规锛堝垵濮嬪寲锛� + const handleClose = () => { + drawertitle.value = ""; + ruleForm.id = ""; + ruleForm.username = ""; + ruleForm.password = ""; + ruleForm.confirmPassword = ""; + ruleForm.realname = ""; + ruleForm.workNo = ""; //宸ュ彿 + ruleForm.selectedroles = ""; //瑙掕壊 + ruleForm.selecteddeparts = []; //鎵�灞為儴闂� + ruleForm.userIdentity = 1; //韬唤 + ruleForm.phone = ""; //鎵嬫満 + ruleForm.activitiSync = 1; //宸ヤ綔娴� + + dialog.value = false; + editFormVisible.value = false; + }; + const selectOptionWidth = ref(""); + const selectheight = ref("auto"); + const setOptionWidth = (event) => { + // 涓嬫媺妗嗚仛鐒︼紝璁剧疆寮规鐨勫搴� + this.$nextTick(() => { + selectOptionWidth = event.srcElement.offsetWidth + "px"; + }); + }; + //鏂板鐢ㄦ埛 + const handleAdd = () => { + getRoleList(); //璇锋眰瑙掕壊鍒楄〃 + getDepList(); //璇锋眰閮ㄩ棬鍒楄〃 + drawertitle.value = "鏂板鐢ㄦ埛"; + isDisabled.value = false; + isEdit.value = false; + isAdd.value = true; + dialog.value = true; + }; + const addUser = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let user = { + selectedroles: ruleForm.selectedroles, //瑙掕壊 + selecteddeparts: ruleForm.selecteddeparts.join(","), //鎵�灞為儴闂� + username: ruleForm.username, + password: ruleForm.password, + confirmPassword: ruleForm.confirmPassword, + realname: ruleForm.realname, + workNo: ruleForm.workNo, + userIdentity: ruleForm.userIdentity, + phone: ruleForm.phone, + activitiSync: ruleForm.activitiSync, + }; + add(user).then((res) => { + if (res.success) { + proxy.$message({ + message: "娉ㄥ唽鎴愬姛", + type: "success", + }); + } + }); + + getListData(); + } else { + return false; + } + }); + }; + + //鍒犻櫎鐢ㄦ埛 + // const handleDelete = async (val) => { + // const data = await deleteUser(val.id); + // proxy.$message({ + // message: "鍒犻櫎", + // type: "success", + // }); + // getListData(); + // }; + + // 缂栬緫鐢ㄦ埛 + const selectedDep = ref([]); + const handleEdit = async (val, type) => { + if (type == "edit") { + drawertitle.value = "缂栬緫鐢ㄦ埛"; + isDisabled.value = false; + isAdd.value = false; + isEdit.value = true; + } else if (type == "info") { + drawertitle.value = "鐢ㄦ埛璇︽儏"; + isEdit.value = false; + isAdd.value = false; + isDisabled.value = true; + } + ruleForm.id = val.id; + ruleForm.username = val.username; + ruleForm.realname = val.realname; + ruleForm.workNo = val.workNo; + ruleForm.userIdentity = val.userIdentity; + ruleForm.phone = val.phone; + ruleForm.activitiSync = val.activitiSync; + dialog.value = true; + getRoleList(); //璇锋眰瑙掕壊鍒楄〃 + getDepList(); //璇锋眰閮ㄩ棬鍒楄〃 + try { + const userRole = await queryUserRole({ + userid: val.id, + _T: new Date().getTime(), + }); + ruleForm.selectedroles = userRole.result[0]; //瑙掕壊 + } catch (error) {} + try { + const userDep = await queryUserDepart({ + userId: val.id, + _T: new Date().getTime(), + }); + let newArr = userDep.result.map((item) => { + return item.value; + }); + ruleForm.selecteddeparts = newArr; + newArr = []; + } catch {} + }; + const editUser = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let user = { + id: ruleForm.id, + username: ruleForm.username, + realname: ruleForm.realname, + workNo: ruleForm.workNo, + selecteddeparts: ruleForm.selecteddeparts.join(","), + selectedroles: ruleForm.selectedroles, + userIdentity: ruleForm.userIdentity, + phone: ruleForm.phone, + activitiSync: ruleForm.activitiSync, + departIds: "", + }; + edit(user).then((res) => { + if (res.success) { + proxy.$message({ + message: "淇敼鎴愬姛", + type: "success", + }); + dialog.value = true; + } + }); + getListData(); + } else { + return false; + } + }); + }; + + // 鍐荤粨 + const frozen = async (val) => { + const data = await frozenBatch({ ids: val.id, status: 2 }); + proxy.$message({ + message: "璐﹀彿鍐荤粨鎴愬姛", + type: "success", + }); + getListData(); + }; + // 瑙e喕 + const thaw = async (val) => { + const data = await frozenBatch({ ids: val.id, status: 1 }); + proxy.$message({ + message: "璐﹀彿瑙e喕鎴愬姛", + type: "success", + }); + getListData(); + }; + + // 淇敼瀵嗙爜 + const editFormVisible = ref(false); + + const changePass = (val) => { + ruleForm.username = val.username; + editFormVisible.value = true; + }; + const changePassword = async (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let user = { + username: ruleForm.username, + password: ruleForm.password, + confirmPassword: ruleForm.confirmPassword, + }; + modifyPassword(user).then((res) => { + if (res.code == 200) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + }); + getListData(); + } else { + return false; + } + }); + }; + + // 璇锋眰閮ㄩ棬鍒楄〃 + const depOptions = ref([]); + const getDepList = async () => { + const depData = await DepartListAll(); + depOptions.value = depData.result; + }; + //璇锋眰鐢ㄦ埛鍒楄〃鏂规硶 + const getListData = async () => { + const data = await userList(pageData.ListData); + tableData.value = data.result.records; + pageData.total = Math.ceil( + data.result.total / pageData.ListData.pageSize + ); + }; + // 璇锋眰瑙掕壊鍒楄〃 + const RoleOptions = ref([]); + const getRoleList = async () => { + const data = await RoleListAll({ + PageNo: 1, + pageSize: 100, + _t: new Date().getTime(), + }); + RoleOptions.value = data.result.records; + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + getListData(); + }; + //杩涘叆椤甸潰锛屽氨浼氳璋冪敤 + getListData(); + + return { + selectedDep, + RoleOptions, + depOptions, + selectheight, + selectOptionWidth, + setOptionWidth, + isEdit, + isAdd, + isDisabled, + queryFormdata, + queryInfo, + pageData, + handleAdd, + tableData, + handleEdit, + dialog, + drawerRef, + handleClose, + ruleFormRef, + editForm, + rules, + ruleForm, + handleCurrentChange, + // handleDelete, + frozen, + thaw, + addUser, + deleteUser, + modifyPassword, + editUser, + changePass, + changePassword, + drawertitle, + editFormVisible, + }; + }, +}; +</script> +<style lang="scss" scoped> +.addWidth { + width: 20% !important; + min-width: 100px !important; +} +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} +.header_nox { + // text-align: right; +} + +.el-dropdown-link { + margin-top: 4px; + cursor: pointer; + color: var(--el-color-primary); + display: flex; + align-items: center; +} +.demo-drawer__footer { + display: flex; + justify-content: flex-end; +} +</style> diff --git a/src/views/system/depart/index.vue b/src/views/system/depart/index.vue new file mode 100644 index 0000000..42192e6 --- /dev/null +++ b/src/views/system/depart/index.vue @@ -0,0 +1,672 @@ +<template> + <div class="contentBox"> + <div class="content"> + <div class="addBtnBox"> + <el-button type="success" @click="openDialog('1')" + >鏂板椤剁骇鐩綍 + </el-button> + <el-button type="success" @click="openDialog('2')" + >娣诲姞瀛愮骇鐩綍 + </el-button> + <el-button type="danger" @click="deleteDep()">鍒犻櫎閫変腑鐩綍 </el-button> + </div> + <div class="inquire"> + <el-form :model="queryFormdata" :inline="true"> + <el-form-item label="閮ㄩ棬鍚嶇О"> + <el-input v-model="queryFormdata.name" /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="queryInfo()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + </el-form> + </div> + <div class="treeBox leftTree"> + <el-tree + :expand-on-click-node="false" + ref="deptreeRef" + :data="depTreeData" + show-checkbox + default-expand-all + node-key="value" + check-strictly + :props="defaultProps" + @node-click="handleNodeClick" + /> + </div> + </div> + <div class="content"> + <el-tabs v-model="activeName" class="demo-tabs"> + <el-tab-pane label="鍩烘湰淇℃伅" name="first"> + <el-form + style="width: 85%; margin: 0 auto" + :model="depForm" + ref="depFormRef" + :rules="rules" + > + <el-form-item + label="鏈烘瀯鍚嶇О" + :label-width="formLabelWidth" + prop="departName" + > + <el-input v-model="depForm.departName" /> + </el-form-item> + <el-form-item label="涓婄骇閮ㄩ棬" :label-width="formLabelWidth"> + <el-tree-select + placeholder="鏃�" + v-model="depForm.parentId" + :props="defaultProps" + disabled + :data="depTreeData" + node-key="value" + :render-after-expand="false" + /> + </el-form-item> + <el-form-item label="鏈烘瀯缂栫爜" :label-width="formLabelWidth"> + <el-input :disabled="true" v-model="depForm.orgCode" /> + </el-form-item> + <el-form-item + label="鏈烘瀯绫诲瀷" + :label-width="formLabelWidth" + prop="orgCategory" + > + <el-radio-group v-model="depForm.orgCategory"> + <div + v-if=" + depForm.parentId == '' || + depForm.parentId == null || + depForm.parentId == undefined + " + > + <el-radio-button :label="1">鍏徃</el-radio-button> + </div> + <div v-else> + <el-radio-button :label="2">閮ㄩ棬</el-radio-button> + <el-radio-button :label="3">宀椾綅</el-radio-button> + </div> + </el-radio-group> + </el-form-item> + <el-form-item label="鎺掑簭" :label-width="formLabelWidth"> + <el-input-number + v-model="depForm.departOrder" + :min="0" + :max="100" + controls-position="right" + /> + </el-form-item> + <el-form-item label="鐢佃瘽" :label-width="formLabelWidth"> + <el-input v-model="depForm.mobile" placeholder="" /> + </el-form-item> + <el-form-item label="浼犵湡" :label-width="formLabelWidth"> + <el-input v-model="depForm.fax" autocomplete="off" /> + </el-form-item> + <el-form-item label="鍦板潃" :label-width="formLabelWidth"> + <el-input v-model="depForm.address" autocomplete="off" /> + </el-form-item> + <el-form-item label="澶囨敞" :label-width="formLabelWidth"> + <el-input + :rows="2" + type="textarea" + v-model="depForm.memo" + autocomplete="off" + /> + </el-form-item> + <el-form-item> + <div class="dialog-footer"> + <el-button @click="resetDepForm(depFormRef)">閲嶇疆</el-button> + <el-button type="primary" @click="editDep(depFormRef)" + >淇濆瓨</el-button + > + </div> + </el-form-item> + </el-form> + </el-tab-pane> + <el-tab-pane label="閮ㄩ棬鏉冮檺" name="second"> + <div class="treeBox"> + <el-tree + ref="menutreeRef" + :data="menuOptions" + show-checkbox + default-expand-all + node-key="value" + check-strictly + highlight-current + check-on-click-node + :props="menuProps" + /> + </div> + <div class="tab-footer"> + <div> + <el-button @click="selectAll(false)">閲嶇疆</el-button> + <el-button type="primary" @click="selectAll(true)" + >鍏ㄩ��</el-button + > + </div> + <div> + <el-button type="primary" @click="saveDepPerm()"> + 淇濆瓨 + </el-button> + </div> + + <!-- <el-button type="primary" @click="handleCheckedTreeExpand(true)" + >灞曞紑</el-button + > + <el-button type="primary" @click="handleCheckedTreeExpand(false)" + >鎶樺彔</el-button + > --> + </div> + </el-tab-pane> + </el-tabs> + </div> + </div> + <el-dialog + destroy-on-close + :before-close="DialogClose" + v-model="dialogTableVisible" + title="鏂板" + width="800px" + > + <el-form + style="width: 85%; margin: 0 auto" + :model="addForm" + ref="addFormRef" + :rules="rules" + > + <el-form-item + label="鏈烘瀯鍚嶇О" + :label-width="formLabelWidth" + prop="departName" + > + <el-input v-model="addForm.departName" /> + </el-form-item> + <el-form-item + v-if="addType == '2'" + label="涓婄骇閮ㄩ棬" + :label-width="formLabelWidth" + > + <el-tree-select + v-model="addForm.parentId" + :props="defaultProps" + disabled + :data="depTreeData" + node-key="value" + :render-after-expand="false" + /> + </el-form-item> + + <el-form-item + label="鏈烘瀯绫诲瀷" + :label-width="formLabelWidth" + prop="orgCategory" + > + <el-radio-group v-model="addForm.orgCategory"> + <div v-if="addType == '1'"> + <el-radio-button :label="1">鍏徃</el-radio-button> + </div> + <div v-if="addType == '2'"> + <el-radio-button :label="2">閮ㄩ棬</el-radio-button> + <el-radio-button :label="3">宀椾綅</el-radio-button> + </div> + </el-radio-group> + </el-form-item> + <el-form-item label="鎺掑簭" :label-width="formLabelWidth"> + <el-input-number + v-model="addForm.departOrder" + :min="0" + :max="100" + controls-position="right" + /> + </el-form-item> + <el-form-item label="鐢佃瘽" :label-width="formLabelWidth"> + <el-input v-model="addForm.mobile" placeholder="" /> + </el-form-item> + <el-form-item label="浼犵湡" :label-width="formLabelWidth"> + <el-input v-model="addForm.fax" autocomplete="off" /> + </el-form-item> + <el-form-item label="鍦板潃" :label-width="formLabelWidth"> + <el-input v-model="addForm.address" autocomplete="off" /> + </el-form-item> + <el-form-item label="澶囨敞" :label-width="formLabelWidth"> + <el-input + :rows="2" + type="textarea" + v-model="addForm.memo" + autocomplete="off" + /> + </el-form-item> + <el-form-item> + <div class="dialog-footer" v-if="addType == '1'"> + <el-button @click="DialogClose(addFormRef)">鍙栨秷</el-button> + <el-button @click="addCo(addFormRef)" type="primary">纭畾</el-button> + </div> + <div class="dialog-footer" v-if="addType == '2'"> + <el-button @click="DialogClose(addFormRef)">鍙栨秷</el-button> + <el-button @click="addCo(addFormRef)" type="primary">纭畾</el-button> + </div> + </el-form-item> + </el-form> + </el-dialog> +</template> + +<script> +import { queryTreeList } from "@/api/role"; +import { ref, reactive, getCurrentInstance, nextTick } from "vue"; +import { ElMessageBox } from "element-plus"; +import { + DepartListAll, + searchBy, + queryDepartPermission, + edit, + saveDepartPermission, + deleteBatch, + addDepart, +} from "@/api/dep"; + +export default { + name: "Depart", + setup() { + const menuProps = { + children: "children", + label: "slotTitle", + }; + const depFormRef = ref(); + const addFormRef = ref(); + + const formLabelWidth = "80px"; + const deptreeRef = ref(); + const menutreeRef = ref(); + const activeName = ref("first"); + const menuOptions = ref([]); + const depTreeData = ref([]); + const defaultProps = { + children: "children", + label: "title", + }; + const { proxy } = getCurrentInstance(); + const queryFormdata = reactive({ + name: "", + }); + const rules = ref({ + departName: [ + { + required: true, + message: "璇疯緭鍏ユ満鏋勫悕绉�", + trigger: "blur", + }, + ], + }); + const oldNodedata = ref(""); + const addType = ref(""); + const addForm = reactive({ + departName: "", + orgCategory: "", //缁勭粐绫诲埆 + departOrder: 0, + mobile: "", + fax: "", + address: "", + memo: "", + parentId: "", + }); + const depPerArr = ref([]); + const depForm = reactive({ + key: "", + value: "", + title: "", + isLeaf: false, + id: "", + parentId: "", + departName: "", + departNameEn: null, + departNameAbbr: null, + departOrder: 0, //鎺掑簭 + description: null, + orgCategory: "", //鏈烘瀯绫诲瀷 + orgType: "", + orgCode: "", //鏈烘瀯缂栫爜 + mobile: null, //鐢佃瘽 + fax: null, //浼犵湡 + address: null, //鍦板潃 + memo: null, //澶囨敞 + status: null, + delFlag: "", + qywxIdentifier: null, + createBy: "", + createTime: "", + updateBy: "", + updateTime: "", + directorUserIds: null, + children: [], + }); + const dialogTableVisible = ref(false); + + const openDialog = (val) => { + addType.value = val; + if (val == "1") { + addForm.orgCategory = "1"; + } else if (val == "2") { + addForm.orgCategory = ""; + addForm.parentId = depForm.id; + } + dialogTableVisible.value = true; + }; + const addCo = () => { + let addInfo = JSON.parse(JSON.stringify(addForm)); + if (addInfo.parentId == "") { + delete addInfo.parentId; + } + addDepart(addInfo).then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + addInfo = {}; + DialogClose(); + getDepList(); + } + }); + }; + + const DialogClose = () => { + dialogTableVisible.value = false; + addForm.departName = ""; + addForm.orgCategory = ""; + addForm.departOrder = 0; + addForm.mobile = ""; + addForm.fax = ""; + addForm.address = ""; + addForm.memo = ""; + addForm.parentId = ""; + }; + const deleteDep = (done) => { + if (deptreeRef.value.getCheckedKeys().length == 0) { + return proxy.$message({ + message: "璇峰厛閫変腑鐩綍", + type: "error", + }); + } + ElMessageBox.confirm("纭畾瑕佸垹闄ゅ悧锛�") + .then(() => { + let ids = deptreeRef.value.getCheckedKeys().join(","); + deleteBatch({ ids: ids }) + .then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + getDepList(); + } + }) + .catch((err) => { + proxy.$message({ + message: JSON.parse(err).message, + type: "error", + }); + }); + done(); + }) + .catch(() => {}); + }; + const queryInfo = async () => { + let name = queryFormdata.name.trim(); + if (name != "") { + let searchData = { + keyWord: queryFormdata.name.trim(), + _t: new Date().getTime(), + }; + const depData = await searchBy(searchData); + depTreeData.value = depData.result; + nextTick().then(() => { + const firstNode = document.querySelector(".el-tree-node"); + firstNode.click(); + }); + } else { + getDepList(); + } + }; + // 璇锋眰閮ㄩ棬鍒楄〃 + const getDepList = async () => { + const depData = await DepartListAll(); + depTreeData.value = depData.result; + nextTick().then(() => { + const firstNode = document.querySelector(".el-tree-node"); + firstNode.click(); + }); + }; + const handleNodeClick = (row, node) => { + depForm.key = row.key; + depForm.value = row.value; + depForm.title = row.title; + depForm.isLeaf = false; + depForm.id = row.id; + depForm.parentId = node.parent.data.id ? node.parent.data.id : ""; + depForm.departName = row.departName; + depForm.departNameEn = row.departNameEn; + depForm.departNameAbbr = row.departNameAbbr; + depForm.description = row.description; + depForm.departOrder = row.departOrder; + depForm.orgCategory = row.orgCategory; + depForm.orgType = row.orgType; + depForm.orgCode = row.orgCode; + depForm.mobile = row.mobile; + depForm.fax = row.fax; + depForm.address = row.address; + depForm.memo = row.memo; + depForm.status = row.status; + depForm.delFlag = row.delFlag; + depForm.qywxIdentifier = row.qywxIdentifier; + depForm.createBy = row.createBy; + depForm.createTime = row.createTime; + depForm.updateBy = row.updateBy; + depForm.updateTime = row.updateTime; + depForm.children = row.children; + depForm.updateBy = row.updateBy; + depForm.children = row.children; + oldNodedata.value = JSON.stringify(depForm); + queryTreeList({ + _t: new Date().getTime(), + }).then((res) => { + if (res.result && res.result.treeList.length != 0) { + menuOptions.value = res.result.treeList; + } + }); + queryDepartPermission({ + departId: row.id, + _t: new Date().getTime(), + }).then((res) => { + if (res.result) { + depPerArr.value = res.result; + menutreeRef.value.setCheckedKeys(res.result, false); + } + }); + }; + const editDep = async (formEl) => { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + edit(depForm).then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + getDepList(); + } + }); + } else { + proxy.$message({ + message: "璇锋鏌ュ悗鏃犺鍚庝繚瀛�", + type: "error", + }); + } + }); + }; + const resetDepForm = (formEl) => { + if (!formEl) return; + formEl.resetFields(); + let resetData = JSON.parse(oldNodedata.value); + depForm.key = resetData.key; + depForm.value = resetData.value; + depForm.title = resetData.title; + depForm.isLeaf = false; + depForm.id = resetData.id; + depForm.parentId = resetData.parentId; + depForm.departName = resetData.departName; + depForm.departNameEn = resetData.departNameEn; + depForm.departNameAbbr = resetData.departNameAbbr; + depForm.description = resetData.description; + depForm.departOrder = resetData.departOrder; + depForm.orgCategory = resetData.orgCategory; + depForm.orgType = resetData.orgType; + depForm.orgCode = resetData.orgCode; + depForm.mobile = resetData.mobile; + depForm.fax = resetData.fax; + depForm.address = resetData.address; + depForm.memo = resetData.memo; + depForm.status = resetData.status; + depForm.delFlag = resetData.delFlag; + depForm.qywxIdentifier = resetData.qywxIdentifier; + depForm.createBy = resetData.createBy; + depForm.createTime = resetData.createTime; + depForm.updateBy = resetData.updateBy; + depForm.updateTime = resetData.updateTime; + depForm.children = resetData.children; + depForm.updateBy = resetData.updateBy; + depForm.children = resetData.children; + }; + + const selectAll = (val) => { + if (val) { + let selectData = jsonToArray(menuOptions.value).map((item) => { + return item.value; + }); + menutreeRef.value.setCheckedKeys(selectData, false); + } else { + menutreeRef.value.setCheckedKeys([], false); + } + }; + const saveDepPerm = async () => { + let obj = { + departId: depForm.id, + permissionIds: menutreeRef.value.getCheckedKeys(false).join(","), + lastpermissionIds: depPerArr.value.join(","), + }; + const data = await saveDepartPermission(obj); + proxy.$message({ + message: data.message, + type: "success", + }); + queryDepartPermission({ + departId: depForm.id, + _t: new Date().getTime(), + }).then((res) => { + if (res.result) { + depPerArr.value = res.result; + menutreeRef.value.setCheckedKeys(res.result, false); + } + }); + }; + // const handleCheckedTreeExpand = (value) => { + // console.log(menutreeRef.value); + // let selectData = jsonToArray(menuOptions.value); + // // console.log(selectData); + // for (let i = 0; i < menuOptions.value.length; i++) { + // // console.log( + // // menutreeRef.value.store.nodesMap[selectData[i].value].expanded + // // ); + // menutreeRef.value.store.nodesMap[selectData[i].value].expanded = value; + // } + // }; + // tree 缁撴瀯杞寲鎴愪竴缁存暟缁� + const jsonToArray = (nodes) => { + let r = []; + if (Array.isArray(nodes)) { + for (let i = 0, l = nodes.length; i < l; i++) { + r.push(nodes[i]); // 鍙栨瘡椤规暟鎹斁鍏ヤ竴涓柊鏁扮粍 + if ( + Array.isArray(nodes[i]["children"]) && + nodes[i]["children"].length > 0 + ) + // 鑻ュ瓨鍦╟hildren鍒欓�掑綊璋冪敤锛屾妸鏁版嵁鎷兼帴鍒版柊鏁扮粍涓紝骞朵笖鍒犻櫎璇hildren + r = r.concat(jsonToArray(nodes[i]["children"])); + // delete nodes[i]["children"] //姝ら」浼氭洿鏀瑰師鏁扮粍 + } + } + return r; + }; + + getDepList(); + + return { + addType, + openDialog, + addCo, + deleteDep, + rules, + queryFormdata, + queryInfo, + getDepList, + defaultProps, + menuOptions, + menuProps, + depTreeData, + handleNodeClick, + + activeName, + deptreeRef, + menutreeRef, + depForm, + addForm, + formLabelWidth, + depFormRef, + addFormRef, + editDep, + resetDepForm, + selectAll, + dialogTableVisible, + DialogClose, + // handleCheckedTreeExpand, + saveDepPerm, + }; + }, +}; +</script> + +<style scoped> +.treeBox { + height: 500px; + overflow: auto; + width: 100%; + color: #000; +} +.addBtnBox { + height: 100%; + margin-bottom: 20px; +} +.contentBox { + width: 100%; + display: flex; + justify-content: space-between; +} +.content { + height: 100%; + width: 48%; +} +.demo-tabs >>> .is-active { + background-color: transparent !important; +} +.dialog-footer { + display: flex; + justify-content: flex-end; +} +.tab-footer { + margin-top: 30px; + display: flex; + justify-content: space-between; +} +.leftTree >>> .is-current > .el-tree-node__content > .el-tree-node__label { + background-color: #bce6fd; +} +</style> \ No newline at end of file diff --git a/src/views/system/departUser/index.vue b/src/views/system/departUser/index.vue new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/views/system/departUser/index.vue diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue new file mode 100644 index 0000000..f15e843 --- /dev/null +++ b/src/views/system/menu/index.vue @@ -0,0 +1,663 @@ +<template> + <div class="inquire"> + <el-form :model="queryFormdata" :inline="true"> + <el-form-item label="鑿滃崟鍚嶇О"> + <el-input v-model="queryFormdata.name" /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="queryInfo()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <div class="header_nox"> + <el-button type="primary" @click="handleAdd('all', 1)">鏂板鑿滃崟</el-button> + </div> + <div> + <el-table + :data="menuTable" + style="width: 100%" + row-key="id" + border + height="75vh" + stripe + fixed + fit + > + <el-table-column prop="name" label="鑿滃崟鍚嶇О" /> + <el-table-column + prop="menuType" + :formatter="stateFormat" + label="鑿滃崟绫诲瀷" + /> + <el-table-column prop="component" label="缁勪欢" /> + <el-table-column prop="url" label="璺緞" /> + <el-table-column prop="sortNo" label="椤哄簭" /> + <el-table-column prop="hidden" label="鏄惁鏄剧ず" align="center"> + <template #default="scope"> + <el-switch + v-model="scope.row.hidden" + :active-value="false" + :inactive-value="true" + active-text="鏄剧ず" + inactive-text="闅愯棌" + @change="handleStatusChange(scope.row)" + ></el-switch> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-link type="primary" @click="handleEdit(scope.row)">缂栬緫</el-link> + <el-divider direction="vertical" /> + <el-link type="primary" @click="handleAdd(scope.row, 2)" + >娣诲姞涓嬬骇</el-link + > + <el-divider direction="vertical" /> + <el-popconfirm + width="160px" + confirm-button-text="纭" + cancel-button-text="鍙栨秷" + :icon="InfoFilled" + icon-color="#eebe59" + title="纭鏄惁鍒犻櫎" + @confirm="confirmDelete(scope.row)" + > + <template #reference> + <el-link type="primary">鍒犻櫎</el-link> + </template> + </el-popconfirm> + </template> + </el-table-column> + </el-table> + </div> + <el-drawer + ref="drawerRef" + v-model="dialog" + :title="drawertitle" + :before-close="handleClose" + direction="rtl" + class="demo-drawer" + :destroy-on-close="true" + > + <div class="demo-drawer__content"> + <el-form + ref="ruleFormRef" + :model="ruleForm.FormInfo" + status-icon + label-width="120px" + class="demo-ruleForm" + :rules="rules" + > + <el-form-item label="鑿滃崟绫诲瀷" prop="orgCategory"> + <el-radio-group v-model="ruleForm.FormInfo.menuType"> + <el-radio-button :label="0">涓�绾ц彍鍗�</el-radio-button> + <el-radio-button :label="1">瀛愯彍鍗�</el-radio-button> + <el-radio-button :label="2">鎸夐挳/鏉冮檺</el-radio-button> + </el-radio-group> + </el-form-item> + <div v-if="ruleForm.FormInfo.menuType == '2'"> + <el-form-item label="鎸夐挳/鏉冮檺" prop="name"> + <el-input + placeholder="璇疯緭鍏ユ寜閽�/鏉冮檺" + v-model="ruleForm.FormInfo.name" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="涓婄骇鑿滃崟" prop="parentId"> + <el-tree-select + placeholder="璇烽�夋嫨涓婄骇鑿滃崟" + v-model="ruleForm.FormInfo.parentId" + :props="{ value: 'id', label: 'title' }" + :data="menuOptions" + node-key="id" + :render-after-expand="false" + check-strictly + check-on-click-node + /> + </el-form-item> + <el-form-item label="鎺堟潈鏍囪瘑"> + <el-input + placeholder="璇疯緭鍏ユ巿鏉冩爣璇�" + v-model="ruleForm.FormInfo.perms" + autocomplete="off" + /> + </el-form-item> + <el-form-item> + <template #label> + <span + >鎺堟潈绛栫暐 + <el-tooltip placement="top"> + <template #content> + 鍙/鍙闂�(鎺堟潈鍚庡彲瑙�/鍙闂�)<br /> + 鍙紪杈�(鏈巿鏉冩椂绂佺敤) + </template> + <el-icon><Warning /></el-icon> + </el-tooltip> + </span> + </template> + <el-radio-group v-model="ruleForm.FormInfo.permsType"> + <el-radio label="1">鍙/鍙闂�</el-radio> + <el-radio label="2">鍙紪杈�</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="鐘舵��"> + <el-radio-group v-model="ruleForm.FormInfo.status"> + <el-radio label="1">鏈夋晥 </el-radio> + <el-radio label="2">鏃犳晥</el-radio> + </el-radio-group> + </el-form-item> + </div> + <div v-else> + <el-form-item label="鑿滃崟鍚嶇О" prop="name"> + <el-input + placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�" + v-model="ruleForm.FormInfo.name" + autocomplete="off" + /> + </el-form-item> + + <el-form-item label="璁块棶璺緞" prop="url"> + <el-input + placeholder="璇疯緭鍏ヨ闂矾寰�" + v-model="ruleForm.FormInfo.url" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鍓嶇缁勪欢" prop="component"> + <el-input + placeholder="璇疯緭鍏ュ墠绔粍浠�" + v-model="ruleForm.FormInfo.component" + autocomplete="off" + /> + </el-form-item> + <el-form-item> + <template #label> + <span + >缁勪欢鍚嶇О + <el-tooltip placement="top"> + <template #content> + 姝ゅ鍚嶇О搴斿拰vue缁勪欢鐨刵ame灞炴�т繚鎸佷竴鑷淬��<br /> + 缁勪欢鍚嶇О涓嶈兘閲嶅锛屼富瑕佺敤浜庤矾鐢辩紦瀛樺姛鑳姐��<br /> + 濡傛灉缁勪欢鍚嶇О鍜寁ue缁勪欢鐨刵ame灞炴�т笉涓�鑷达紝鍒欎細瀵艰嚧璺敱缂撳瓨澶辨晥銆�<br /> + 闈炲繀濉紝鐣欑┖鍒欎細鏍规嵁璁块棶璺緞鑷姩鐢熸垚銆� + </template> + <el-icon><Warning /></el-icon> + </el-tooltip> + </span> + </template> + <el-input + :placeholder=" + ruleForm.FormInfo.url == '' + ? '璇疯緭鍏ョ粍浠跺悕绉�' + : ruleForm.FormInfo.url + " + v-model="ruleForm.FormInfo.componentName" + autocomplete="off" + /> + </el-form-item> + <el-form-item + label="榛樿璺宠浆鍦板潃" + v-if="ruleForm.FormInfo.menuType == '0'" + > + <el-input + placeholder="璁块棶璺緞" + v-model="ruleForm.FormInfo.redirect" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鎺掑簭"> + <el-input-number + v-model="ruleForm.FormInfo.sortNo" + :min="0" + :max="100" + controls-position="right" + /> + </el-form-item> + <el-form-item label="鏄惁鏄矾鐢辫彍鍗�"> + <el-switch + v-model="ruleForm.FormInfo.route" + inline-prompt + active-text="鏄�" + inactive-text="鍚�" + /> + </el-form-item> + <el-form-item label="闅愯棌璺敱"> + <el-switch + v-model="ruleForm.FormInfo.hidden" + inline-prompt + active-text="鏄�" + inactive-text="鍚�" + :active-value="1" + :inactive-value="0" + /> + </el-form-item> + <el-form-item label="闅愯棌Tab"> + <el-switch + v-model="ruleForm.FormInfo.hideTab" + inline-prompt + active-text="鏄�" + inactive-text="鍚�" + :active-value="1" + :inactive-value="0" + /> + </el-form-item> + <el-form-item label="鏄惁缂撳瓨璺敱"> + <el-switch + v-model="ruleForm.FormInfo.keepAlive" + inline-prompt + active-text="鏄�" + inactive-text="鍚�" + /> + </el-form-item> + <el-form-item label="鑱氬悎璺敱"> + <el-switch + v-model="ruleForm.FormInfo.alwaysShow" + inline-prompt + active-text="鏄�" + inactive-text="鍚�" + /> + </el-form-item> + <el-form-item label="鎵撳紑鏂瑰紡"> + <el-switch + v-model="ruleForm.FormInfo.internalOrExternal" + inline-prompt + active-text="澶栭儴" + inactive-text="鍐呴儴" + /> + </el-form-item> + </div> + </el-form> + <div class="demo-drawer__footer" v-if="isAdd"> + <el-button @click="handleClose()">鍙栨秷</el-button> + <el-button type="primary" @click="addMenu(ruleFormRef)">鏂板</el-button> + </div> + <div class="demo-drawer__footer" v-if="isEdit"> + <el-button @click="handleClose()">鍙栨秷</el-button> + <el-button type="primary" @click="editRole(ruleFormRef)"> + 缂栬緫 + </el-button> + </div> + </div> + </el-drawer> +</template> + +<script> +import { ref, reactive, getCurrentInstance } from "vue"; +import { + MenuListTree, + MenuUpdate, + MenuAdd, + checkPermDuplication, + deleteMenu, +} from "@/api/menu"; +import { InfoFilled } from "@element-plus/icons-vue"; + +export default { + name: "Menu", + setup() { + const { proxy } = getCurrentInstance(); + //鎺у埗鏄鹃殣 + const handleStatusChange = async (row) => { + MenuUpdate(row) + .then((data) => { + proxy.$message({ + message: data.message, + type: "success", + }); + queryInfo(); + }) + .catch((err) => { + proxy.$message({ + message: err.status, + type: "error", + }); + }); + }; + const menuTable = ref([]); + const queryFormdata = reactive({ + name: "", + }); + const queryInfo = async () => { + let name = queryFormdata.name.trim(); + let searchData = reactive({}); + if (name != "") { + searchData = { + column: "createTime", + order: "desc", + name: queryFormdata.name.trim(), + _t: new Date().getTime(), + }; + } else { + searchData = { + column: "createTime", + order: "desc", + _t: new Date().getTime(), + }; + } + const data = await MenuListTree(searchData); + menuTable.value = data.result; + }; + const stateFormat = (row) => { + if (row.menuType == 0) { + return "涓�绾ц彍鍗�"; + } else { + return "瀛愯彍鍗�"; + } + }; + // 瀹氫箟寮规 + const dialog = ref(false); + const isEdit = ref(false); + const isAdd = ref(false); + const drawerRef = ref(); + const url = (rule, value, callback) => { + if (value === "" || value === null || value === undefined) { + callback(new Error("璇疯緭鍏ヨ闂矾寰�")); + } else { + if (isAdd.value) { + checkPermDuplication({ + url: value, + alwaysShow: ruleForm.FormInfo.alwaysShow, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("璇ュ�间笉鍙敤锛岀郴缁熶腑宸插瓨鍦紒")); + }); + } else if (isEdit.value) { + checkPermDuplication({ + id: ruleForm.FormInfo.id, + url: value, + alwaysShow: ruleForm.FormInfo.alwaysShow, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("璇ュ�间笉鍙敤锛岀郴缁熶腑宸插瓨鍦紒")); + }); + } + } + }; + const rules = ref({ + name: [ + { + required: true, + message: "璇疯緭鍏ヨ彍鍗曞悕绉�", + trigger: "blur", + }, + ], + parentId: [ + { + required: true, + message: "璇烽�夋嫨涓婄骇鑿滃崟", + trigger: "change", + }, + ], + url: [ + { + required: true, + validator: url, + trigger: "change", + }, + ], + component: [ + { + required: true, + message: "璇疯緭鍏ュ墠绔粍浠�", + trigger: "blur", + }, + ], + }); + const ruleFormRef = ref(); + const editForm = ref(); + const drawertitle = ref(""); + const ruleForm = reactive({ + FormInfo: { + menuType: 0, + name: "", + url: "", + component: "", + componentName: "", + redirect: "", + sortNo: 1, + route: true, + hidden: 0, + hideTab: 0, + keepAlive: false, + alwaysShow: false, + internalOrExternal: false, + id: "", + parentId: "", + icon: "", + perms: "", + permsType: "1", + status: "1", + }, + }); + // 璇锋眰鑿滃崟鍒楄〃 + const menuOptions = ref([]); + const getMenuList = async () => { + const menuData = await MenuListTree({ _t: new Date().getTime() }); + menuOptions.value = menuData.result; + }; + //鏂板鑿滃崟 + const handleAdd = (val, index) => { + ruleForm.FormInfo.parentId = ""; + ruleForm.FormInfo.menuType = 0; + // 娣诲姞涓嬬骇 + if (index == 2) { + ruleForm.FormInfo.parentId = val.id; + ruleForm.FormInfo.menuType = 1; + } + getMenuList(); //璇锋眰鑿滃崟鍒楄〃 + drawertitle.value = "鏂板鑿滃崟"; + isEdit.value = false; + isAdd.value = true; + dialog.value = true; + }; + + const addMenu = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let newMenuData = JSON.parse(JSON.stringify(ruleForm.FormInfo)); + delete newMenuData.id; + delete newMenuData.icon; + if (newMenuData.menuType == 0) { + delete newMenuData.parentId; + delete newMenuData.perms; + delete newMenuData.permsType; + delete newMenuData.status; + } else if (newMenuData.menuType == 1) { + delete newMenuData.permsType; + delete newMenuData.perms; + delete newMenuData.status; + } else { + delete newMenuData.url; + delete newMenuData.component; + delete newMenuData.componentName; + delete newMenuData.redirect; + delete newMenuData.sortNo; + delete newMenuData.route; + delete newMenuData.hidden; + delete newMenuData.hideTab; + delete newMenuData.keepAlive; + delete newMenuData.alwaysShow; + delete newMenuData.internalOrExternal; + } + // console.log(newMenuData); + MenuAdd(newMenuData).then((res) => { + if (res.success) { + proxy.$message({ + message: "娉ㄥ唽鎴愬姛", + type: "success", + }); + } + queryInfo(); + handleClose(); + }); + } else { + return false; + } + }); + }; + //缂栬緫 + const handleEdit = async (val) => { + getMenuList(); //璇锋眰鑿滃崟鍒楄〃 + drawertitle.value = "缂栬緫鐢ㄦ埛"; + isAdd.value = false; + isEdit.value = true; + ruleForm.FormInfo.menuType = val.menuType; + ruleForm.FormInfo.name = val.name; + ruleForm.FormInfo.url = val.url; + ruleForm.FormInfo.component = val.component; + ruleForm.FormInfo.componentName = val.componentName; + ruleForm.FormInfo.redirect = val.redirect; + ruleForm.FormInfo.sortNo = val.sortNo; + ruleForm.FormInfo.route = val.route; + ruleForm.FormInfo.hidden = val.hidden; + ruleForm.FormInfo.hideTab = val.hideTab; + ruleForm.FormInfo.keepAlive = val.keepAlive; + ruleForm.FormInfo.alwaysShow = val.alwaysShow; + ruleForm.FormInfo.internalOrExternal = val.internalOrExternal; + ruleForm.FormInfo.id = val.id; + ruleForm.FormInfo.parentId = val.parentId; + ruleForm.FormInfo.icon = val.icon; + ruleForm.FormInfo.perms = val.perms; + ruleForm.FormInfo.permsType = val.permsType; + ruleForm.FormInfo.status = val.status; + dialog.value = true; + }; + const editRole = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + if (ruleForm.FormInfo.menuType == 0) { + delete ruleForm.FormInfo.parentId; + delete ruleForm.FormInfo.perms; + delete ruleForm.FormInfo.permsType; + delete ruleForm.FormInfo.status; + } else if (ruleForm.FormInfo.menuType == 1) { + delete ruleForm.FormInfo.permsType; + delete ruleForm.FormInfo.perms; + delete ruleForm.FormInfo.status; + } else { + delete ruleForm.FormInfo.url; + delete ruleForm.FormInfo.component; + delete ruleForm.FormInfo.componentName; + delete ruleForm.FormInfo.redirect; + delete ruleForm.FormInfo.sortNo; + delete ruleForm.FormInfo.route; + delete ruleForm.FormInfo.hidden; + delete ruleForm.FormInfo.hideTab; + delete ruleForm.FormInfo.keepAlive; + delete ruleForm.FormInfo.alwaysShow; + delete ruleForm.FormInfo.internalOrExternal; + } + // console.log(ruleForm.FormInfo); + MenuUpdate(ruleForm.FormInfo).then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + handleClose(); + queryInfo(); + }); + } else { + return false; + } + }); + }; + // 鍒犻櫎 + const confirmDelete = (val) => { + deleteMenu({ + id: val.id, + }) + .then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + queryInfo(); + }) + .catch((res) => { + proxy.$message({ + message: res.message, + type: "error", + }); + queryInfo(); + }); + }; + + //鍏抽棴寮规 + const handleClose = () => { + dialog.value = false; + drawertitle.value = ""; + ruleForm.FormInfo = { + id: "", + menuType: 0, + name: "", + url: "", + component: "", + componentName: "", + redirect: "", + sortNo: 1, + route: true, + hidden: false, + hideTab: false, + keepAlive: false, + alwaysShow: false, + internalOrExternal: false, + parentId: "", + icon: null, + }; + }; + + queryInfo(); + return { + queryFormdata, + queryInfo, + menuTable, + stateFormat, + handleStatusChange, + rules, + addMenu, + dialog, + isEdit, + isAdd, + drawerRef, + ruleFormRef, + editForm, + drawertitle, + ruleForm, + handleEdit, + handleClose, + handleAdd, + menuOptions, + InfoFilled, + confirmDelete, + editRole, + }; + }, +}; +</script> + +<style scoped> +.el-switch /deep/ .is-active { + background-color: transparent !important; +} + +.demo-drawer__footer { + display: flex; + justify-content: flex-end; +} +</style> \ No newline at end of file diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue new file mode 100644 index 0000000..ad8cc72 --- /dev/null +++ b/src/views/system/role/index.vue @@ -0,0 +1,784 @@ +<template> + <div class="inquire"> + <el-form ref="queryForm" :model="queryFormdata" :inline="true"> + <el-form-item label="瑙掕壊鍚嶇О"> + <el-input + v-model="queryFormdata.roleName" + placeholder="璇疯緭鍏ヨ鑹插悕绉�" + /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="queryInfo()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <div class="header_nox"> + <el-button type="primary" @click="handleAdd()">鏂板</el-button> + </div> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="roleName" label="瑙掕壊鍚嶇О" /> + <el-table-column prop="roleCode" label="瑙掕壊缂栫爜" /> + <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-link type="primary" @click="userFunc(scope.row)">鐢ㄦ埛</el-link> + <el-divider direction="vertical" /> + + <el-popconfirm + width="160px" + confirm-button-text="纭" + cancel-button-text="鍙栨秷" + :icon="InfoFilled" + icon-color="#eebe59" + title="纭鏄惁鍒犻櫎" + @confirm="confirmDelete(scope.row)" + > + <template #reference> + <el-link type="primary">鍒犻櫎</el-link> + </template> + </el-popconfirm> + <el-divider direction="vertical" /> + <el-dropdown> + <span class="el-dropdown-link"> + 鏇村 + <el-icon class="el-icon--right"> + <arrow-down /> + </el-icon> + </span> + <template #dropdown> + <el-dropdown-menu> + <el-dropdown-item @click="editFunc(scope.row)" + >缂栬緫</el-dropdown-item + > + <el-dropdown-item @click="detailFunc(scope.row)" + >璇︽儏</el-dropdown-item + > + <el-dropdown-item @click="authFunc(scope.row)" + >鎺堟潈</el-dropdown-item + > + </el-dropdown-menu> + </template> + </el-dropdown> + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> + <el-drawer + ref="drawerRef" + v-model="dialog" + :title="drawertitle" + :before-close="handleClose" + direction="rtl" + class="demo-drawer" + :destroy-on-close="true" + > + <div v-if="drawertitle == '鐢ㄦ埛璇︽儏'"> + <el-descriptions title="鐢ㄦ埛璇︽儏" :column="1" border> + <el-descriptions-item label="瑙掕壊鍚嶇О">{{ + roleForm.roleName + }}</el-descriptions-item> + <el-descriptions-item label="瑙掕壊缂栫爜">{{ + roleForm.roleCode + }}</el-descriptions-item> + <el-descriptions-item label="澶囨敞">{{ + roleForm.description + }}</el-descriptions-item> + </el-descriptions> + </div> + <div v-else class="demo-drawer__content"> + <el-form :model="roleForm" :rules="rules" ref="ruleFormRef"> + <el-form-item + prop="roleName" + label="瑙掕壊鍚嶇О" + :label-width="formLabelWidth" + > + <el-input v-model="roleForm.roleName" autocomplete="off" /> + </el-form-item> + <el-form-item + prop="roleCode" + label="瑙掕壊缂栫爜" + :label-width="formLabelWidth" + > + <el-input + :disabled="drawertitle == '鐢ㄦ埛缂栬緫' ? true : false" + v-model="roleForm.roleCode" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="澶囨敞" :label-width="formLabelWidth"> + <el-input + :rows="2" + type="textarea" + v-model="roleForm.description" + autocomplete="off" + /> + </el-form-item> + </el-form> + <div class="dialog-footer" v-if="drawertitle == '鏂板鐢ㄦ埛'"> + <el-button @click="handleClose">鍙栨秷</el-button> + <el-button type="primary" @click="addRole(ruleFormRef)">娣诲姞</el-button> + </div> + <div class="dialog-footer" v-if="drawertitle == '鐢ㄦ埛缂栬緫'"> + <el-button @click="handleClose">鍙栨秷</el-button> + <el-button type="primary" @click="editRole(ruleFormRef)" + >纭畾</el-button + > + </div> + </div> + </el-drawer> + <el-drawer + ref="addRoleRef" + v-model="roleTable" + :title="secondTitle" + :before-close="secondClose" + direction="rtl" + class="demo-drawer" + destroy-on-close + > + <div class="inquire"> + <el-form ref="queryForm" :model="queryUserRoledata" :inline="true"> + <el-form-item label="鐢ㄦ埛璐﹀彿"> + <el-input v-model="queryUserRoledata.username" /> + </el-form-item> + <el-form-item> + <el-button + type="primary" + @click="queryUserInfo()" + icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <div> + <el-button type="primary" @click="bindUser">缁戝畾鐢ㄦ埛 </el-button> + </div> + <el-table + stripe + style="width: 100%" + :data="gridData" + table-layout="auto" + fit + > + <el-table-column property="username" label="鐢ㄦ埛璐﹀彿" /> + <el-table-column property="realname" label="鐢ㄦ埛濮撳悕" /> + <el-table-column property="status_dictText" label="鐘舵��" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-popconfirm + width="160px" + confirm-button-text="纭" + cancel-button-text="鍙栨秷" + :icon="InfoFilled" + icon-color="#eebe59" + title="鏄惁纭鍙栨秷鍏宠仈" + @confirm="confirmEvent(scope.row)" + > + <template #reference> + <el-link type="primary">鍙栨秷鍏宠仈</el-link> + </template> + </el-popconfirm> + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData2.total" + :current-page="pageData2.ListData.pageNo" + @current-change="handleCurrentChange2" + /> + </div> + </el-drawer> + <!-- 鎺堟潈 --> + <el-drawer + v-model="authDrawer" + title="瑙掕壊鏉冮檺閰嶇疆" + :before-close="authDrawerClose" + direction="rtl" + class="authDrawerBox" + :destroy-on-close="true" + > + <template #default> + <div class="treeBox"> + <el-tree + ref="treeRef" + :data="menuOptions" + show-checkbox + default-expand-all + node-key="value" + check-strictly + highlight-current + check-on-click-node + :props="defaultProps" + /> + </div> + </template> + <template #footer> + <div style="flex: auto"> + <el-button @click="authDrawerClose()">鍙栨秷</el-button> + <el-button type="primary" @click="saveRolePerm()"> 淇濆瓨 </el-button> + </div> + </template> + </el-drawer> + + <el-dialog + destroy-on-close + :before-close="thirdClose" + v-model="dialogTableVisible" + title="鐢ㄦ埛閫夋嫨鍒楄〃" + width="900px" + > + <div class="inquire"> + <el-form ref="queryForm" :model="queryUserList" :inline="true"> + <el-form-item label="鐢ㄦ埛璐﹀彿"> + <el-input v-model="queryUserList.username" /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="searchUser()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <el-table + stripe + table-layout="auto" + fit + @selection-change="handleSelectionChange" + :data="userTable" + style="width: 100%" + > + <el-table-column type="selection" width="50px" /> + <el-table-column prop="username" label="鐢ㄦ埛璐﹀彿" /> + <el-table-column prop="realname" label="鐢ㄦ埛濮撳悕" /> + <el-table-column prop="status_dictText" label="鐘舵��" /> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData3.total" + :current-page="pageData3.ListData.pageNo" + @current-change="handleCurrentChange3" + /> + </div> + <div class="dialog-footer"> + <el-button @click="thirdClose()">鍙栨秷</el-button> + <el-button type="primary" @click="sendBind()"> 纭畾 </el-button> + </div> + </el-dialog> +</template> + +<script> +import { ref, reactive, onMounted, getCurrentInstance } from "vue"; +import { + RoleListAll, + checkRoleCode, + RoleCreate, + queryTreeList, + queryRolePermission, + saveRolePermission, + RoleUpdate, + deleteRole, +} from "@/api/role"; +import { + userList, + userRoleList, + addSysUserRole, + deleteUserRole, +} from "@/api/account"; +import { InfoFilled } from "@element-plus/icons-vue"; +export default { + name: "Role", + props: {}, + setup(props) { + let tableData = ref([]); + const multipleSelection = ref([]); + const { proxy } = getCurrentInstance(); + const menuOptions = ref([]); + const defaultProps = { + children: "children", + label: "slotTitle", + }; + const treeRef = ref(); + const roleID = ref(""); + const rolePerArr = ref([]); + // 鏌ヨ妯″潡 + let queryFormdata = reactive({ + roleName: "", + }); + + let pageData = reactive({ + ListData: { + roleName: "", + column: "id", + order: "desc", + pageNo: 1, + pageSize: 10, + _t: new Date().getTime(), + }, + total: 0, + }); + const dialogTableVisible = ref(false); + + // 鏌ヨ鐢ㄦ埛 + const queryInfo = async () => { + pageData.ListData.roleName = queryFormdata.roleName.trim(); + getListData(); + }; + const validateRoleCode = (rule, value, callback) => { + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ヨ鑹茬紪鐮�")); + } else { + if (roleForm.id == "") { + checkRoleCode({ + roleCode: value, + _t: new Date().getTime(), + }).then((res) => { + if (res.success) { + callback(); + } else { + callback(new Error(res.message)); + } + }); + } else { + checkRoleCode({ + id: roleForm.id, + roleCode: value, + _t: new Date().getTime(), + }).then((res) => { + if (res.success) { + callback(); + } else { + callback(new Error(res.message)); + } + }); + } + } + }; + const rules = reactive({ + roleName: [ + { required: true, message: "璇疯緭鍏ヨ鑹插悕绉�", trigger: "blur" }, + ], + roleCode: [ + { required: true, validator: validateRoleCode, trigger: "change" }, + ], + }); + const dialog = ref(false); + const authDrawer = ref(false); + const drawertitle = ref(""); + + const ruleFormRef = ref(); + + const formLabelWidth = "80px"; + const roleForm = reactive({ + id: "", + roleName: "", + roleCode: "", + description: "", + }); + const drawerRef = ref(); + const addRoleRef = ref(); + + const handleClose = (done) => { + drawertitle.value = ""; + roleForm.id = ""; + roleForm.roleName = ""; + roleForm.roleCode = ""; + roleForm.description = ""; + dialog.value = false; + }; + //鏂板鐢ㄦ埛 + const handleAdd = () => { + dialog.value = true; + drawertitle.value = "鏂板鐢ㄦ埛"; + }; + const addRole = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let roleInfo = { + roleName: roleForm.roleName, + roleCode: roleForm.roleCode, + description: roleForm.description, + }; + RoleCreate(roleInfo).then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + handleClose(); + getListData(); + }); + } else { + return false; + } + }); + }; + // 鍙栨秷鍏宠仈 + const confirmEvent = (val) => { + let obj = { + userId: val.id, + roleId: pageData2.ListData.roleId, + }; + deleteUserRole(obj) + .then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + getListData2(); + }) + .catch((res) => { + proxy.$message({ + message: res.message, + type: "error", + }); + getListData2(); + }); + }; + + const gridData = ref([]); + const userTable = ref([]); + const secondTitle = ref(""); + const roleTable = ref(false); + let pageData2 = reactive({ + ListData: { + username: "", + roleId: "", + _t: new Date().getTime(), + pageNo: 1, + pageSize: 10, + }, + total: 0, + }); + let pageData3 = reactive({ + ListData: { + username: "", + pageNo: 1, + pageSize: 5, + _t: new Date().getTime(), + }, + total: 0, + }); + let queryUserList = reactive({ + username: "", + }); + let queryUserRoledata = reactive({ + username: "", + }); + + // 灞曞紑鐢ㄦ埛璇︽儏锛屾煡璇㈠綋鍓嶈鑹蹭笅鐨勭敤鎴� + const userFunc = async (val) => { + pageData2.ListData.roleId = val.id; + secondTitle.value = "鐢ㄦ埛璇︽儏"; + roleTable.value = true; + getListData2(); + }; + // 鏌ヨ鎵�鏈夌敤鎴峰垪琛� + const queryUserInfo = async () => { + pageData2.ListData.username = queryUserRoledata.username.trim(); + getListData2(); + }; + // 鏌ヨ鎸囧畾椤电爜 + const getListData2 = async () => { + const data = await userRoleList(pageData2.ListData); + gridData.value = data.result.records; + pageData2.total = Math.ceil( + data.result.total / pageData2.ListData.pageSize + ); + }; + // 鍒嗛〉鍣� + const handleCurrentChange2 = async (val) => { + pageData2.ListData.pageNo = val; + getListData2(); + }; + // 缁戝畾鐢ㄦ埛 + const bindUser = () => { + dialogTableVisible.value = true; + searchUser(); + }; + const searchUser = async () => { + pageData3.ListData.username = queryUserList.username.trim(); + const data = await userList(pageData3.ListData); + userTable.value = data.result.records; + pageData3.total = Math.ceil( + data.result.total / pageData3.ListData.pageSize + ); + }; + // 鍒嗛〉鍣� + const handleCurrentChange3 = async (val) => { + pageData3.ListData.pageNo = val; + searchUser(); + }; + // 澶氶�� + const handleSelectionChange = (val) => { + multipleSelection.value = val; + }; + //纭缁戝畾 + const sendBind = () => { + let obj = multipleSelection.value.map((item) => { + return item.id; + }); + let bindData = { + roleId: pageData2.ListData.roleId, + userIdList: obj, + }; + addSysUserRole(bindData) + .then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + dialogTableVisible.value = false; + getListData2(); + } + }) + .catch((err) => { + proxy.$message({ + message: res.message, + type: "error", + }); + dialogTableVisible.value = false; + getListData2(); + }); + multipleSelection.value = []; //娓呯┖澶氶�� + }; + const thirdClose = () => { + queryUserList.username = ""; + pageData3.ListData.username = ""; + pageData3.ListData.pageNo = 1; + pageData3.ListData.pageSize = 10; + pageData3.total = 0; + dialogTableVisible.value = false; + }; + // 鍏抽棴鐢ㄦ埛椤� + const secondClose = () => { + queryUserRoledata.username = ""; + pageData2.ListData.roleId = ""; + pageData2.ListData.pageNo = 1; + pageData2.ListData.pageSize = 10; + pageData2.total = 0; + roleTable.value = false; + }; + + const authFunc = async (val) => { + roleID.value = val.id; + queryTreeList({ + _t: new Date().getTime(), + }).then((res) => { + if (res.result.treeList && res.result.treeList.length != 0) { + menuOptions.value = res.result.treeList; + } + }); + + queryRolePermission({ + roleId: val.id, + _t: new Date().getTime(), + }).then((res) => { + rolePerArr.value = res.result; + treeRef.value.setCheckedKeys(res.result, false); + }); + + authDrawer.value = true; + }; + const saveRolePerm = async () => { + let obj = { + roleId: roleID.value, + permissionIds: treeRef.value.getCheckedKeys(false).join(","), + lastpermissionIds: rolePerArr.value.join(","), + }; + const data = await saveRolePermission(obj); + proxy.$message({ + message: data.message, + type: "success", + }); + queryRolePermission({ + roleId: roleID.value, + _t: new Date().getTime(), + }).then((res) => { + rolePerArr.value = res.result; + treeRef.value.setCheckedKeys(res.result, false); + }); + }; + const authDrawerClose = () => { + roleID.value = ""; + rolePerArr.value = []; + treeRef.value.setCheckedKeys([], false); + authDrawer.value = false; + }; + const editFunc = async (val) => { + drawertitle.value = "鐢ㄦ埛缂栬緫"; + dialog.value = true; + roleForm.id = val.id; + roleForm.roleName = val.roleName; + roleForm.roleCode = val.roleCode; + roleForm.description = val.description; + }; + const editRole = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + RoleUpdate(roleForm).then((res) => { + // console.log(res); + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + handleClose(); + getListData(); + }); + } else { + return false; + } + }); + }; + + const detailFunc = (val) => { + drawertitle.value = "鐢ㄦ埛璇︽儏"; + dialog.value = true; + roleForm.id = val.id; + roleForm.roleName = val.roleName; + roleForm.roleCode = val.roleCode; + roleForm.description = val.description; + }; + const confirmDelete = (val) => { + deleteRole({ + id: val.id, + }) + .then((res) => { + if (res.success) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + getListData(); + }) + .catch((res) => { + proxy.$message({ + message: res.message, + type: "error", + }); + getListData(); + }); + }; + //璇锋眰鍒楄〃鏂规硶 + const getListData = async () => { + const data = await RoleListAll(pageData.ListData); + tableData.value = data.result.records; + pageData.total = Math.ceil( + data.result.total / pageData.ListData.pageSize + ); + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + getListData(); + }; + + //杩涘叆椤甸潰锛屽氨浼氳璋冪敤 + getListData(); + + return { + bindUser, + sendBind, + handleSelectionChange, + dialogTableVisible, + queryUserList, + secondTitle, + drawerRef, + addRoleRef, + roleTable, + queryFormdata, + queryUserRoledata, + searchUser, + userTable, + secondClose, + queryInfo, + thirdClose, + pageData, + pageData2, + pageData3, + tableData, + gridData, + handleCurrentChange, + handleCurrentChange2, + handleCurrentChange3, + confirmEvent, + handleAdd, + addRole, + getListData2, + InfoFilled, + rules, + roleForm, + formLabelWidth, + dialog, + handleClose, + userFunc, + authFunc, + editFunc, + editRole, + detailFunc, + confirmDelete, + drawertitle, + ruleFormRef, + queryUserInfo, + authDrawer, + authDrawerClose, + menuOptions, + defaultProps, + treeRef, + saveRolePerm, + }; + }, +}; +</script> +<style lang="scss" scoped> +.page { + display: flex; + justify-content: center; + margin-top: 20px; +} +.header_nox { + // text-align: right; +} +.el-dropdown-link { + margin-top: 4px; + cursor: pointer; + color: var(--el-color-primary); + display: flex; + align-items: center; +} +.dialog-footer { + display: flex; + justify-content: flex-end; +} + +.authDrawerBox .demo-drawer__content .treeBox { + height: 88vh; + overflow: auto; +} +</style> diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue new file mode 100644 index 0000000..e69450b --- /dev/null +++ b/src/views/system/user/index.vue @@ -0,0 +1,748 @@ +<template> + <div class="inquire"> + <el-form :model="queryFormdata" :inline="true"> + <el-form-item label="鐢ㄦ埛璐﹀彿"> + <el-input v-model="queryFormdata.username" /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="queryInfo()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <div class="header_nox"> + <el-button type="primary" @click="handleAdd()">鏂板鐢ㄦ埛</el-button> + </div> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="username" label="鐢ㄦ埛璐﹀彿" /> + <el-table-column prop="realname" label="鐢ㄦ埛濮撳悕" /> + <el-table-column prop="phone" label="鎵嬫満鍙�" /> + <el-table-column prop="orgCodeTxt" label="閮ㄩ棬" /> + <el-table-column prop="workNo" label="宸ュ彿" /> + <el-table-column prop="status_dictText" label="鐘舵��" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-link type="primary" @click="handleEdit(scope.row, 'edit')" + >缂栬緫</el-link + > + <el-divider direction="vertical" /> + <el-dropdown> + <span class="el-dropdown-link"> + 鏇村 + <el-icon class="el-icon--right"> + <arrow-down /> + </el-icon> + </span> + <template #dropdown> + <el-dropdown-menu> + <el-dropdown-item @click="handleEdit(scope.row, 'info')" + >璇︽儏</el-dropdown-item + > + <el-dropdown-item @click="changePass(scope.row)" + >瀵嗙爜</el-dropdown-item + > + <el-dropdown-item + @click="frozen(scope.row)" + v-if="scope.row.status == 1" + >鍐荤粨</el-dropdown-item + > + <el-dropdown-item + @click="thaw(scope.row)" + v-if="scope.row.status == 2" + >瑙e喕</el-dropdown-item + > + </el-dropdown-menu> + </template> + </el-dropdown> + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> + + <el-drawer + ref="drawerRef" + v-model="dialog" + :title="drawertitle" + :before-close="handleClose" + direction="rtl" + class="demo-drawer" + :destroy-on-close="true" + > + <div class="demo-drawer__content"> + <el-form + ref="ruleFormRef" + :model="ruleForm" + status-icon + :rules="rules" + label-width="120px" + class="demo-ruleForm" + :disabled="isDisabled" + > + <el-form-item label="鐢ㄦ埛璐﹀彿" :prop="isAdd ? 'username' : 'realname'"> + <el-input + placeholder="璇疯緭鍏ョ敤鎴疯处鍙�" + :disabled="isEdit ? true : false" + v-model="ruleForm.username" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐧诲綍瀵嗙爜" prop="password" v-if="isAdd"> + <el-input + show-password + placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�" + v-model="ruleForm.password" + type="password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="纭瀵嗙爜" prop="confirmPassword" v-if="isAdd"> + <el-input + show-password + placeholder="璇疯緭鍏ョ‘璁ゅ瘑鐮�" + v-model="ruleForm.confirmPassword" + type="password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐢ㄦ埛濮撳悕" prop="realname"> + <el-input + placeholder="璇疯緭鍏ョ敤鎴峰鍚�" + v-model="ruleForm.realname" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="宸ュ彿" prop="workNo"> + <el-input + placeholder="璇疯緭鍏ュ伐鍙�" + v-model="ruleForm.workNo" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="瑙掕壊"> + <el-select + v-model="ruleForm.selectedroles" + clearable + placeholder="璇烽�夋嫨瑙掕壊" + > + <el-option + v-for="item in RoleOptions" + :key="item.id" + :label="item.roleName" + :value="item.id" + /> + </el-select> + </el-form-item> + <el-form-item label="鎵�灞為儴闂�"> + <el-tree-select + placeholder="璇烽�夋嫨鎵�灞為儴闂�" + v-model="ruleForm.selecteddeparts" + :props="{ value: 'value', label: 'title' }" + :data="depOptions" + multiple + node-key="value" + :render-after-expand="false" + show-checkbox + check-strictly + check-on-click-node + :default-checked-keys="selectedDep" + /> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜" prop="phone"> + <el-input v-model="ruleForm.phone" autocomplete="off" /> + </el-form-item> + <!-- <el-form-item label="宸ヤ綔娴佸紩鎿�"> + <el-radio-group v-model="ruleForm.activitiSync"> + <el-radio :label="1">鍚屾</el-radio> + <el-radio :label="2">涓嶅悓姝�</el-radio> + </el-radio-group> + </el-form-item> --> + </el-form> + <div class="demo-drawer__footer" v-if="isAdd"> + <el-button @click="handleClose()">鍙栨秷</el-button> + <el-button type="primary" @click="addUser(ruleFormRef)">鏂板</el-button> + </div> + <div class="demo-drawer__footer" v-if="isEdit"> + <el-button @click="handleClose()">鍙栨秷</el-button> + <el-button type="primary" @click="editUser(ruleFormRef)"> + 缂栬緫 + </el-button> + </div> + </div> + </el-drawer> + <el-dialog + destroy-on-close + v-model="editFormVisible" + title="淇敼瀵嗙爜" + customClass="addWidth" + width="20%" + > + <el-form + ref="editForm" + :model="ruleForm" + :rules="rules" + label-width="120px" + class="demo-ruleForm" + > + <el-form-item label="鐢ㄦ埛鍚�"> + <el-input + :disabled="true" + v-model="ruleForm.username" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐧诲綍瀵嗙爜" prop="password"> + <el-input + type="password" + v-model="ruleForm.password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="纭瀵嗙爜" prop="confirmPassword"> + <el-input + type="password" + v-model="ruleForm.confirmPassword" + autocomplete="off" + /> + </el-form-item> + <el-form-item> + <el-button @click="handleClose()">鍏抽棴</el-button> + <el-button type="primary" @click="changePassword(editForm)" + >鎻愪氦</el-button + > + </el-form-item> + </el-form> + </el-dialog> +</template> + +<script> +import { ref, reactive, onMounted, getCurrentInstance } from "vue"; +import { + userList, + add, + deleteUser, + edit, + modifyPassword, + duplicateUser, + frozenBatch, +} from "@/api/account"; +import { DepartListAll, queryUserDepart } from "@/api/dep"; +import { RoleListAll, queryUserRole } from "@/api/role"; + +export default { + name: "User", + components: {}, + props: {}, + setup(props) { + // 楠岃瘉瑙勫垯 + const username = (rule, value, callback) => { + var reg = new RegExp(/^[a-zA-Z0-9_]{0,15}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ョ敤鎴峰悕")); + } else { + if (!reg.test(value)) { + callback(new Error("璐﹀彿蹇呴』鐢卞瓧姣嶏紝鏁板瓧鎴栦笅鍒掔嚎,闀垮害涓嶅緱瓒呰繃16浣�")); + } else { + if (isAdd.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "username", + fieldVal: value, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("璐﹀彿宸插瓨鍦�")); + }); + } else if (isEdit.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "username", + fieldVal: value, + dataId: ruleForm.id, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("璐﹀彿宸插瓨鍦�")); + }); + } + } + } + }; + const workNo = (rule, value, callback) => { + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ュ伐鍙�")); + } else { + if (isAdd.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "work_no", + fieldVal: value, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("宸ュ彿宸插瓨鍦�")); + }); + } else if (isEdit.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "work_no", + fieldVal: value, + dataId: ruleForm.id, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("宸ュ彿宸插瓨鍦�")); + }); + } + } + }; + const phone = (rule, value, callback) => { + var reg = new RegExp(/^[1][3,4,5,7,8][0-9]{9}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ユ墜鏈哄彿")); + } else { + if (!reg.test(value)) { + callback(new Error("鎵嬫満鍙锋牸寮忛敊璇�")); + } else { + if (isAdd.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "phone", + fieldVal: value, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("鎵嬫満鍙峰凡瀛樺湪")); + }); + } else if (isEdit.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "phone", + fieldVal: value, + dataId: ruleForm.id, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("鎵嬫満鍙峰凡瀛樺湪")); + }); + } + } + } + }; + const validatePass = (rule, value, callback) => { + var reg = new RegExp(/^[a-zA-Z0-9]{0,15}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "") { + callback(new Error("璇疯緭鍏ュ瘑鐮�")); + } else { + if (!reg.test(value)) { + callback(new Error("瀵嗙爜蹇呴』鐢卞瓧姣嶆垨鏁板瓧缁勬垚,闀垮害涓嶅緱瓒呰繃16浣�")); + } else { + callback(); + } + } + }; + const validatePass2 = (rule, value, callback) => { + if (value === "") { + callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")); + } else if (value !== ruleForm.password) { + callback(new Error("涓ゆ瀵嗙爜涓嶄竴鑷达紒")); + } else { + callback(); + } + }; + const rules = reactive({ + realname: [ + { + required: true, + message: "璇峰~鍐欑敤鎴峰鍚�", + trigger: "blur", + }, + ], + username: [{ required: true, validator: username, trigger: "change" }], + password: [{ required: true, validator: validatePass, trigger: "blur" }], + confirmPassword: [ + { required: true, validator: validatePass2, trigger: "blur" }, + ], + + workNo: [{ required: true, validator: workNo, trigger: "change" }], + phone: [{ required: true, validator: phone, trigger: "change" }], + }); + + const ruleFormRef = ref(); + const editForm = ref(); + const drawertitle = ref(""); + const ruleForm = reactive({ + id: "", + username: "", + password: "", + confirmPassword: "", + realname: "", + workNo: "", //宸ュ彿 + selectedroles: "", //瑙掕壊 + selecteddeparts: [], //鎵�灞為儴闂� + userIdentity: 1, //韬唤 + phone: "", //鎵嬫満 + activitiSync: 1, //宸ヤ綔娴� + }); + + let tableData = ref([]); + const { proxy } = getCurrentInstance(); + // 鏌ヨ妯″潡 + let queryFormdata = reactive({ + username: "", + }); + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 10, + _t: new Date().getTime(), + }, + total: 0, + }); + // 鏌ヨ鐢ㄦ埛 + const queryInfo = async () => { + let searchData = { + username: queryFormdata.username.trim(), + _t: new Date().getTime(), + }; + const data = await userList(searchData); + tableData.value = data.result.records; + pageData.total = Math.ceil( + data.result.total / pageData.ListData.pageSize + ); + }; + + // 瀹氫箟寮规 + const dialog = ref(false); + const isEdit = ref(false); + const isAdd = ref(false); + const isDisabled = ref(false); + const drawerRef = ref(); + + // 鍏抽棴寮规锛堝垵濮嬪寲锛� + const handleClose = () => { + drawertitle.value = ""; + ruleForm.id = ""; + ruleForm.username = ""; + ruleForm.password = ""; + ruleForm.confirmPassword = ""; + ruleForm.realname = ""; + ruleForm.workNo = ""; //宸ュ彿 + ruleForm.selectedroles = ""; //瑙掕壊 + ruleForm.selecteddeparts = []; //鎵�灞為儴闂� + ruleForm.userIdentity = 1; //韬唤 + ruleForm.phone = ""; //鎵嬫満 + ruleForm.activitiSync = 1; //宸ヤ綔娴� + + dialog.value = false; + editFormVisible.value = false; + }; + const selectOptionWidth = ref(""); + const selectheight = ref("auto"); + const setOptionWidth = (event) => { + // 涓嬫媺妗嗚仛鐒︼紝璁剧疆寮规鐨勫搴� + this.$nextTick(() => { + selectOptionWidth = event.srcElement.offsetWidth + "px"; + }); + }; + //鏂板鐢ㄦ埛 + const handleAdd = () => { + getRoleList(); //璇锋眰瑙掕壊鍒楄〃 + getDepList(); //璇锋眰閮ㄩ棬鍒楄〃 + drawertitle.value = "鏂板鐢ㄦ埛"; + isDisabled.value = false; + isEdit.value = false; + isAdd.value = true; + dialog.value = true; + }; + const addUser = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let user = { + selectedroles: ruleForm.selectedroles, //瑙掕壊 + selecteddeparts: ruleForm.selecteddeparts.join(","), //鎵�灞為儴闂� + username: ruleForm.username, + password: ruleForm.password, + confirmPassword: ruleForm.confirmPassword, + realname: ruleForm.realname, + workNo: ruleForm.workNo, + userIdentity: ruleForm.userIdentity, + phone: ruleForm.phone, + activitiSync: ruleForm.activitiSync, + }; + add(user).then((res) => { + if (res.success) { + proxy.$message({ + message: "娉ㄥ唽鎴愬姛", + type: "success", + }); + } + }); + + getListData(); + } else { + return false; + } + }); + }; + + //鍒犻櫎鐢ㄦ埛 + // const handleDelete = async (val) => { + // const data = await deleteUser(val.id); + // proxy.$message({ + // message: "鍒犻櫎", + // type: "success", + // }); + // getListData(); + // }; + + // 缂栬緫鐢ㄦ埛 + const selectedDep = ref([]); + const handleEdit = async (val, type) => { + if (type == "edit") { + drawertitle.value = "缂栬緫鐢ㄦ埛"; + isDisabled.value = false; + isAdd.value = false; + isEdit.value = true; + } else if (type == "info") { + drawertitle.value = "鐢ㄦ埛璇︽儏"; + isEdit.value = false; + isAdd.value = false; + isDisabled.value = true; + } + ruleForm.id = val.id; + ruleForm.username = val.username; + ruleForm.realname = val.realname; + ruleForm.workNo = val.workNo; + ruleForm.userIdentity = val.userIdentity; + ruleForm.phone = val.phone; + ruleForm.activitiSync = val.activitiSync; + dialog.value = true; + getRoleList(); //璇锋眰瑙掕壊鍒楄〃 + getDepList(); //璇锋眰閮ㄩ棬鍒楄〃 + try { + const userRole = await queryUserRole({ + userid: val.id, + _T: new Date().getTime(), + }); + ruleForm.selectedroles = userRole.result[0]; //瑙掕壊 + } catch (error) {} + try { + const userDep = await queryUserDepart({ + userId: val.id, + _T: new Date().getTime(), + }); + let newArr = userDep.result.map((item) => { + return item.value; + }); + ruleForm.selecteddeparts = newArr; + newArr = []; + } catch {} + }; + const editUser = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let user = { + id: ruleForm.id, + username: ruleForm.username, + realname: ruleForm.realname, + workNo: ruleForm.workNo, + selecteddeparts: ruleForm.selecteddeparts.join(","), + selectedroles: ruleForm.selectedroles, + userIdentity: ruleForm.userIdentity, + phone: ruleForm.phone, + activitiSync: ruleForm.activitiSync, + departIds: "", + }; + edit(user).then((res) => { + if (res.success) { + proxy.$message({ + message: "淇敼鎴愬姛", + type: "success", + }); + dialog.value = true; + } + }); + getListData(); + } else { + return false; + } + }); + }; + + // 鍐荤粨 + const frozen = async (val) => { + const data = await frozenBatch({ ids: val.id, status: 2 }); + proxy.$message({ + message: "璐﹀彿鍐荤粨鎴愬姛", + type: "success", + }); + getListData(); + }; + // 瑙e喕 + const thaw = async (val) => { + const data = await frozenBatch({ ids: val.id, status: 1 }); + proxy.$message({ + message: "璐﹀彿瑙e喕鎴愬姛", + type: "success", + }); + getListData(); + }; + + // 淇敼瀵嗙爜 + const editFormVisible = ref(false); + + const changePass = (val) => { + ruleForm.username = val.username; + editFormVisible.value = true; + }; + const changePassword = async (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let user = { + username: ruleForm.username, + password: ruleForm.password, + confirmPassword: ruleForm.confirmPassword, + }; + modifyPassword(user).then((res) => { + if (res.code == 200) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + }); + getListData(); + } else { + return false; + } + }); + }; + + // 璇锋眰閮ㄩ棬鍒楄〃 + const depOptions = ref([]); + const getDepList = async () => { + const depData = await DepartListAll(); + depOptions.value = depData.result; + }; + //璇锋眰鐢ㄦ埛鍒楄〃鏂规硶 + const getListData = async () => { + const data = await userList(pageData.ListData); + tableData.value = data.result.records; + pageData.total = Math.ceil( + data.result.total / pageData.ListData.pageSize + ); + }; + // 璇锋眰瑙掕壊鍒楄〃 + const RoleOptions = ref([]); + const getRoleList = async () => { + const data = await RoleListAll({ + PageNo: 1, + pageSize: 100, + _t: new Date().getTime(), + }); + RoleOptions.value = data.result.records; + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + getListData(); + }; + //杩涘叆椤甸潰锛屽氨浼氳璋冪敤 + getListData(); + + return { + selectedDep, + RoleOptions, + depOptions, + selectheight, + selectOptionWidth, + setOptionWidth, + isEdit, + isAdd, + isDisabled, + queryFormdata, + queryInfo, + pageData, + handleAdd, + tableData, + handleEdit, + dialog, + drawerRef, + handleClose, + ruleFormRef, + editForm, + rules, + ruleForm, + handleCurrentChange, + // handleDelete, + frozen, + thaw, + addUser, + deleteUser, + modifyPassword, + editUser, + changePass, + changePassword, + drawertitle, + editFormVisible, + }; + }, +}; +</script> +<style lang="scss" scoped> +.addWidth { + width: 20% !important; + min-width: 100px !important; +} +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} +.header_nox { + // text-align: right; +} + +.el-dropdown-link { + margin-top: 4px; + cursor: pointer; + color: var(--el-color-primary); + display: flex; + align-items: center; +} +.demo-drawer__footer { + display: flex; + justify-content: flex-end; +} +</style> diff --git a/src/views/user/Index copy.vue b/src/views/user/Index copy.vue new file mode 100644 index 0000000..5544b35 --- /dev/null +++ b/src/views/user/Index copy.vue @@ -0,0 +1,598 @@ +<template> + <div class="inquire"> + <el-form ref="queryForm" :model="queryFormdata" :inline="true"> + <el-form-item label="鐢ㄦ埛鍚�"> + <el-input v-model="queryFormdata.username" /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="queryInfo()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <div class="header_nox"> + <!-- <el-button type="warning" @click="dialogFormVisible = true" --> + <el-button type="warning" @click="handleAdd()">鏂板鐢ㄦ埛</el-button> + </div> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="username" label="鐢ㄦ埛鍚�" /> + <el-table-column prop="realname" label="濮撳悕" /> + <!-- <el-table-column prop="orgCode" label="閮ㄩ棬" /> --> + <!-- <el-table-column prop="status_dictText" label="鐘舵��" /> --> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-button size="small" type="primary" @click="handleEdit(scope.row)" + >缂栬緫</el-button + > + <el-button size="small" type="primary" @click="showInfo(scope.row)" + >璇︽儏</el-button + > + <el-button + size="small" + type="danger" + @click="frozen(scope.row)" + v-if="scope.row.status == 1" + >鍐荤粨</el-button + > + <el-button + size="small" + type="info" + @click="thaw(scope.row)" + v-if="scope.row.status == 2" + >瑙e喕</el-button + > + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> + <!-- <el-dialog + v-model="dialogFormVisible" + title="鏂板鐢ㄦ埛" + customClass="addWidth" + width="20%" + > + <el-form + ref="ruleFormRef" + :model="ruleForm" + status-icon + :rules="rules" + label-width="120px" + class="demo-ruleForm" + > + <el-form-item label="鐢ㄦ埛鍚�" prop="username"> + <el-input v-model="ruleForm.username" autocomplete="off" /> + </el-form-item> + <el-form-item label="鐧诲綍瀵嗙爜" prop="password"> + <el-input v-model="ruleForm.password" autocomplete="off" /> + </el-form-item> + <el-form-item label="纭瀵嗙爜" prop="confirmPassword"> + <el-input + v-model="ruleForm.confirmPassword" + type="password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐢ㄦ埛濮撳悕"> + <el-input v-model="ruleForm.realname" autocomplete="off" /> + </el-form-item> + <el-form-item label="宸ュ彿" prop="workNo"> + <el-input v-model="ruleForm.workNo" autocomplete="off" /> + </el-form-item> + <el-form-item label="韬唤"> + <el-radio-group v-model="ruleForm.userIdentity"> + <el-radio :label="1"></el-radio> + <el-radio :label="2"></el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜" prop="phone"> + <el-input v-model="ruleForm.phone" autocomplete="off" /> + </el-form-item> + <el-form-item label="宸ヤ綔娴佸紩鎿�"> + <el-radio-group v-model="ruleForm.activitiSync"> + <el-radio :label="1">鍚屾</el-radio> + <el-radio :label="2">涓嶅悓姝�</el-radio> + </el-radio-group> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="resetForm(ruleFormRef)">閲嶇疆</el-button> + <el-button type="primary" @click="addUser(ruleFormRef)">纭</el-button> + </span> + </template> + </el-dialog> + + <el-dialog + v-model="editFormVisible" + title="缂栬緫鐢ㄦ埛" + customClass="addWidth" + width="20%" + > + <el-form :model="formEdit"> + <el-form-item label="鐢ㄦ埛鍚�"> + <el-input v-model="formEdit.name" autocomplete="off" /> + </el-form-item> + <el-form-item label="骞撮緞"> + <el-input v-model="formEdit.age" autocomplete="off" /> + </el-form-item> + <el-form-item label="鐢佃瘽"> + <el-input v-model="formEdit.phone" autocomplete="off" /> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="editFormVisible = false">鍏抽棴</el-button> + <el-button type="primary" @click="editUser"> 纭淇敼 </el-button> + </span> + </template> + </el-dialog> --> + + <el-drawer + ref="drawerRef" + v-model="dialog" + title="鐢ㄦ埛璇︽儏" + :before-close="handleClose" + direction="ltr" + class="demo-drawer" + > + <div class="demo-drawer__content"> + <el-form + ref="ruleFormRef" + :model="ruleForm" + status-icon + :rules="rules" + label-width="120px" + class="demo-ruleForm" + :disabled="!isEdit" + > + <el-form-item label="鐢ㄦ埛鍚�" prop="username"> + <el-input v-model="ruleForm.username" autocomplete="off" /> + </el-form-item> + <el-form-item label="鐧诲綍瀵嗙爜" prop="password"> + <el-input v-model="ruleForm.password" autocomplete="off" /> + </el-form-item> + <el-form-item label="纭瀵嗙爜" prop="confirmPassword"> + <el-input + v-model="ruleForm.confirmPassword" + type="password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐢ㄦ埛濮撳悕"> + <el-input v-model="ruleForm.realname" autocomplete="off" /> + </el-form-item> + <el-form-item label="宸ュ彿" prop="workNo"> + <el-input v-model="ruleForm.workNo" autocomplete="off" /> + </el-form-item> + <el-form-item label="韬唤"> + <el-radio-group v-model="ruleForm.userIdentity"> + <el-radio :label="1"></el-radio> + <el-radio :label="2"></el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜" prop="phone"> + <el-input v-model="ruleForm.phone" autocomplete="off" /> + </el-form-item> + <el-form-item label="宸ヤ綔娴佸紩鎿�"> + <el-radio-group v-model="ruleForm.activitiSync"> + <el-radio :label="1">鍚屾</el-radio> + <el-radio :label="2">涓嶅悓姝�</el-radio> + </el-radio-group> + </el-form-item> + </el-form> + <div class="demo-drawer__footer" v-if="isEdit"> + <el-button @click="cancelForm">閲嶇疆</el-button> + <el-button type="primary" :loading="loading" @click="onClick">{{ + loading ? "姝e湪鏇存柊 ..." : "缂栬緫" + }}</el-button> + </div> + <div class="demo-drawer__footer" v-if="isAdd"> + <el-button @click="cancelForm">閲嶇疆</el-button> + <el-button type="primary" :loading="loading" @click="onClick">{{ + loading ? "姝e湪鏇存柊 ..." : "鏂板" + }}</el-button> + </div> + </div> + </el-drawer> +</template> + +<script> +import { ref, reactive, onMounted, getCurrentInstance } from "vue"; +import { + userList, + add, + deleteUser, + edit, + modifyPassword, + duplicateUser, + frozenBatch, +} from "@/api/account"; +import { FormInstance, FormRules, ElMessageBox, ElDrawer } from "element-plus"; + +export default { + name: "NewsIndex", + components: {}, + props: {}, + setup(props) { + const ruleFormRef = ref(); + const ruleForm = reactive({ + username: "", + password: "", + realname: "", + workNo: "", + userIdentity: 1, + phone: "", + activitiSync: 1, + confirmPassword: "", + departIds: "", + }); + const username = (rule, value, callback) => { + var reg = new RegExp(/^[a-zA-Z0-9_]{0,15}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ョ敤鎴峰悕")); + } else { + if (!reg.test(value)) { + callback(new Error("璐﹀彿蹇呴』鐢卞瓧姣嶏紝鏁板瓧鎴栦笅鍒掔嚎,闀垮害涓嶅緱瓒呰繃16浣�")); + } else { + duplicateUser({ + tableName: "sys_user", + fieldName: "username", + fieldVal: value, + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("璐﹀彿宸插瓨鍦�")); + }); + } + } + }; + const workNo = (rule, value, callback) => { + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ュ伐鍙�")); + } else { + duplicateUser({ + tableName: "sys_user", + fieldName: "work_no", + fieldVal: value, + }) + .then(() => { + callback(); + }) + .catch((err) => { + callback(new Error("宸ュ彿宸插瓨鍦�")); + }); + } + }; + const phone = (rule, value, callback) => { + var reg = new RegExp(/^[1][3,4,5,7,8][0-9]{9}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ユ墜鏈哄彿")); + } else { + if (!reg.test(value)) { + callback(new Error("鎵嬫満鍙锋牸寮忛敊璇�")); + } else { + duplicateUser({ + tableName: "sys_user", + fieldName: "phone", + fieldVal: value, + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("鎵嬫満鍙峰凡瀛樺湪")); + }); + } + } + }; + const validatePass = (rule, value, callback) => { + var reg = new RegExp(/^[a-zA-Z0-9]{0,15}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "") { + callback(new Error("璇疯緭鍏ュ瘑鐮�")); + } else { + if (!reg.test(value)) { + callback(new Error("瀵嗙爜蹇呴』鐢卞瓧姣嶆垨鏁板瓧缁勬垚,闀垮害涓嶅緱瓒呰繃16浣�")); + } else { + callback(); + } + } + }; + const validatePass2 = (rule, value, callback) => { + if (value === "") { + callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")); + } else if (value !== ruleForm.password) { + callback(new Error("涓ゆ瀵嗙爜涓嶄竴鑷达紒")); + } else { + callback(); + } + }; + const rules = reactive({ + password: [{ validator: validatePass, trigger: "blur" }], + confirmPassword: [{ validator: validatePass2, trigger: "blur" }], + username: [{ validator: username, trigger: "blur" }], + workNo: [{ validator: workNo, trigger: "blur" }], + phone: [{ validator: phone, trigger: "blur" }], + }); + + const resetForm = (formEl) => { + if (!formEl) return; + formEl.resetFields(); + }; + + const value = ref(""); + let tableData = ref([]); + const formLabelWidth = "40px"; + + const { proxy } = getCurrentInstance(); + + let queryFormdata = reactive({ + username: "", + }); + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 10, + }, + total: 0, + }); + // 璇︽儏 + const dialog = ref(false); + const isEdit = ref(false); + const loading = ref(false); + const form = reactive({ + username: "", + password: "", + realname: "", + workNo: "", + userIdentity: 1, + phone: "", + activitiSync: 1, + confirmPassword: "", + departIds: "", + }); + const drawerRef = ref(); + const onClick = () => { + console.log(form); + drawerRef.value.close(); + }; + + const handleClose = (done) => { + if (loading.value) { + return; + } + ElMessageBox.confirm("鏄惁鍏抽棴") + .then(() => { + loading.value = true; + done(); + loading.value = false; + }) + .catch(() => { + // catch error + }); + }; + + const cancelForm = () => { + loading.value = false; + dialog.value = false; + }; + const formEdit = reactive({}); + const dialogFormVisible = ref(false); + const editFormVisible = ref(false); + + //璇锋眰鍒楄〃鏂规硶 + const getListData = async () => { + const data = await userList(pageData.ListData); + tableData.value = data.result.records; + pageData.total = Math.ceil( + data.result.total / pageData.ListData.pageSize + ); + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + + getListData(); + }; + // 鍐荤粨 + const frozen = async (val) => { + const data = await frozenBatch({ ids: val.id, status: 2 }); + console.log(data); + proxy.$message({ + message: "璐﹀彿鍐荤粨鎴愬姛", + type: "success", + }); + getListData(); + }; + // 瑙e喕 + const thaw = async (val) => { + const data = await frozenBatch({ ids: val.id, status: 1 }); + console.log(data); + proxy.$message({ + message: "璐﹀彿瑙e喕鎴愬姛", + type: "success", + }); + getListData(); + }; + // 鏌ョ湅璇︽儏 + const showInfo = async (val) => { + isEdit.value = false; + console.log(isEdit.value); + dialog.value = true; + ruleForm.id = val.id; + ruleForm.username = val.username; + ruleForm.password = val.password; + ruleForm.realname = val.realname; + ruleForm.workNo = val.workNo; + ruleForm.userIdentit = val.userIdentit; + ruleForm.phone = val.phone; + ruleForm.activitiSyn = val.activitiSyn; + ruleForm.confirmPassword = val.confirmPassword; + ruleForm.departIds = val.departIds; + }; + //鍒犻櫎鐢ㄦ埛 + // const handleDelete = async (val) => { + // const data = await deleteUser(val.id); + // console.log(data); + // proxy.$message({ + // message: "鍒犻櫎", + // type: "success", + // }); + // getListData(); + // }; + // 缂栬緫鐢ㄦ埛 + const handleEdit = async (val) => { + isEdit.value = true; + console.log(isEdit.value); + dialog.value = true; + ruleForm.id = val.id; + ruleForm.username = val.username; + ruleForm.password = val.password; + ruleForm.realname = val.realname; + ruleForm.workNo = val.workNo; + ruleForm.userIdentit = val.userIdentit; + ruleForm.phone = val.phone; + ruleForm.activitiSyn = val.activitiSyn; + ruleForm.confirmPassword = val.confirmPassword; + ruleForm.departIds = val.departIds; + // editFormVisible.value = true; + // formEdit.password = val.password; + // formEdit.id = val.id; + // formEdit.name = val.name; + // formEdit.age = val.age; + // formEdit.phone = val.phone; + }; + const editUser = async (val) => { + let user = { + id: formEdit.id, + name: formEdit.name, + password: formEdit.password, + age: formEdit.age, + phone: formEdit.phone, + }; + + const data = await edit(user); + if (data.code == 200) { + getListData(); + editFormVisible.value = false; + } else { + } + }; + //鏂板鐢ㄦ埛 + const handleAdd = () => {}; + const addUser = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let user = { + username: ruleForm.username, + password: ruleForm.password, + confirmPassword: ruleForm.confirmPassword, + realname: ruleForm.realname, + workNo: ruleForm.workNo, + userIdentity: ruleForm.userIdentity, + phone: ruleForm.phone, + activitiSync: ruleForm.activitiSync, + departIds: "", + }; + add(user).then((res) => { + console.log(res); + if (res.success) { + proxy.$message({ + message: "娉ㄥ唽鎴愬姛", + type: "success", + }); + } + }); + + dialogFormVisible.value = false; + getListData(); + } else { + return false; + } + }); + }; + // 鏌ヨ鐢ㄦ埛 + const queryInfo = async () => { + let searchData = { + username: queryFormdata.username.trim(), + }; + const data = await userList(searchData); + tableData.value = data.result.records; + pageData.total = Math.ceil( + data.result.total / pageData.ListData.pageSize + ); + }; + + //杩涘叆椤甸潰锛屽氨浼氳璋冪敤 + getListData(); + + function showState(row, column, cellValue, index) { + if (cellValue === 0) return "姝e父"; + else return "寮傚父"; + } + + return { + isEdit, + queryFormdata, + + loading, + dialog, + form, + drawerRef, + onClick, + handleClose, + cancelForm, + handleAdd, + queryInfo, + ruleFormRef, + value, + pageData, + rules, + resetForm, + ruleForm, + tableData, + handleCurrentChange, + // handleDelete, + frozen, + thaw, + showState, + dialogFormVisible, + formLabelWidth, + addUser, + deleteUser, + modifyPassword, + editFormVisible, + handleEdit, + showInfo, + editUser, + formEdit, + }; + }, +}; +</script> +<style lang="scss" scoped> +.addWidth { + width: 20% !important; + min-width: 100px !important; +} +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} +.header_nox { + text-align: right; +} +</style> diff --git a/src/views/user/Index.vue b/src/views/user/Index.vue new file mode 100644 index 0000000..aae83a6 --- /dev/null +++ b/src/views/user/Index.vue @@ -0,0 +1,748 @@ +<template> + <div class="inquire"> + <el-form :model="queryFormdata" :inline="true"> + <el-form-item label="鐢ㄦ埛璐﹀彿"> + <el-input v-model="queryFormdata.username" /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="queryInfo()" icon="el-icon-search" + >鏌ヨ + </el-button> + </el-form-item> + <br /> + </el-form> + </div> + <div class="header_nox"> + <el-button type="primary" @click="handleAdd()">鏂板鐢ㄦ埛</el-button> + </div> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="username" label="鐢ㄦ埛璐﹀彿" /> + <el-table-column prop="realname" label="鐢ㄦ埛濮撳悕" /> + <el-table-column prop="phone" label="鎵嬫満鍙�" /> + <el-table-column prop="orgCodeTxt" label="閮ㄩ棬" /> + <el-table-column prop="workNo" label="宸ュ彿" /> + <el-table-column prop="status_dictText" label="鐘舵��" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-link type="primary" @click="handleEdit(scope.row, 'edit')" + >缂栬緫</el-link + > + <el-divider direction="vertical" /> + <el-dropdown> + <span class="el-dropdown-link"> + 鏇村 + <el-icon class="el-icon--right"> + <arrow-down /> + </el-icon> + </span> + <template #dropdown> + <el-dropdown-menu> + <el-dropdown-item @click="handleEdit(scope.row, 'info')" + >璇︽儏</el-dropdown-item + > + <el-dropdown-item @click="changePass(scope.row)" + >瀵嗙爜</el-dropdown-item + > + <el-dropdown-item + @click="frozen(scope.row)" + v-if="scope.row.status == 1" + >鍐荤粨</el-dropdown-item + > + <el-dropdown-item + @click="thaw(scope.row)" + v-if="scope.row.status == 2" + >瑙e喕</el-dropdown-item + > + </el-dropdown-menu> + </template> + </el-dropdown> + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> + + <el-drawer + ref="drawerRef" + v-model="dialog" + :title="drawertitle" + :before-close="handleClose" + direction="rtl" + class="demo-drawer" + :destroy-on-close="true" + > + <div class="demo-drawer__content"> + <el-form + ref="ruleFormRef" + :model="ruleForm" + status-icon + :rules="rules" + label-width="120px" + class="demo-ruleForm" + :disabled="isDisabled" + > + <el-form-item label="鐢ㄦ埛璐﹀彿" :prop="isAdd ? 'username' : 'realname'"> + <el-input + placeholder="璇疯緭鍏ョ敤鎴疯处鍙�" + :disabled="isEdit ? true : false" + v-model="ruleForm.username" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐧诲綍瀵嗙爜" prop="password" v-if="isAdd"> + <el-input + show-password + placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�" + v-model="ruleForm.password" + type="password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="纭瀵嗙爜" prop="confirmPassword" v-if="isAdd"> + <el-input + show-password + placeholder="璇疯緭鍏ョ‘璁ゅ瘑鐮�" + v-model="ruleForm.confirmPassword" + type="password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐢ㄦ埛濮撳悕" prop="realname"> + <el-input + placeholder="璇疯緭鍏ョ敤鎴峰鍚�" + v-model="ruleForm.realname" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="宸ュ彿" prop="workNo"> + <el-input + placeholder="璇疯緭鍏ュ伐鍙�" + v-model="ruleForm.workNo" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="瑙掕壊"> + <el-select + v-model="ruleForm.selectedroles" + clearable + placeholder="璇烽�夋嫨瑙掕壊" + > + <el-option + v-for="item in RoleOptions" + :key="item.id" + :label="item.roleName" + :value="item.id" + /> + </el-select> + </el-form-item> + <el-form-item label="鎵�灞為儴闂�"> + <el-tree-select + placeholder="璇烽�夋嫨鎵�灞為儴闂�" + v-model="ruleForm.selecteddeparts" + :props="{ value: 'value', label: 'title' }" + :data="depOptions" + multiple + node-key="value" + :render-after-expand="false" + show-checkbox + check-strictly + check-on-click-node + :default-checked-keys="selectedDep" + /> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜" prop="phone"> + <el-input v-model="ruleForm.phone" autocomplete="off" /> + </el-form-item> + <el-form-item label="宸ヤ綔娴佸紩鎿�"> + <el-radio-group v-model="ruleForm.activitiSync"> + <el-radio :label="1">鍚屾</el-radio> + <el-radio :label="2">涓嶅悓姝�</el-radio> + </el-radio-group> + </el-form-item> + </el-form> + <div class="demo-drawer__footer" v-if="isAdd"> + <el-button @click="handleClose()">鍙栨秷</el-button> + <el-button type="primary" @click="addUser(ruleFormRef)">鏂板</el-button> + </div> + <div class="demo-drawer__footer" v-if="isEdit"> + <el-button @click="handleClose()">鍙栨秷</el-button> + <el-button type="primary" @click="editUser(ruleFormRef)"> + 缂栬緫 + </el-button> + </div> + </div> + </el-drawer> + <el-dialog + destroy-on-close + v-model="editFormVisible" + title="淇敼瀵嗙爜" + customClass="addWidth" + width="20%" + > + <el-form + ref="editForm" + :model="ruleForm" + :rules="rules" + label-width="120px" + class="demo-ruleForm" + > + <el-form-item label="鐢ㄦ埛鍚�"> + <el-input + :disabled="true" + v-model="ruleForm.username" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="鐧诲綍瀵嗙爜" prop="password"> + <el-input + type="password" + v-model="ruleForm.password" + autocomplete="off" + /> + </el-form-item> + <el-form-item label="纭瀵嗙爜" prop="confirmPassword"> + <el-input + type="password" + v-model="ruleForm.confirmPassword" + autocomplete="off" + /> + </el-form-item> + <el-form-item> + <el-button @click="handleClose()">鍏抽棴</el-button> + <el-button type="primary" @click="changePassword(editForm)" + >鎻愪氦</el-button + > + </el-form-item> + </el-form> + </el-dialog> +</template> + +<script> +import { ref, reactive, onMounted, getCurrentInstance } from "vue"; +import { + userList, + add, + deleteUser, + edit, + modifyPassword, + duplicateUser, + frozenBatch, +} from "@/api/account"; +import { DepartListAll, queryUserDepart } from "@/api/dep"; +import { RoleListAll, queryUserRole } from "@/api/role"; + +export default { + name: "User", + components: {}, + props: {}, + setup(props) { + // 楠岃瘉瑙勫垯 + const username = (rule, value, callback) => { + var reg = new RegExp(/^[a-zA-Z0-9_]{0,15}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ョ敤鎴峰悕")); + } else { + if (!reg.test(value)) { + callback(new Error("璐﹀彿蹇呴』鐢卞瓧姣嶏紝鏁板瓧鎴栦笅鍒掔嚎,闀垮害涓嶅緱瓒呰繃16浣�")); + } else { + if (isAdd.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "username", + fieldVal: value, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("璐﹀彿宸插瓨鍦�")); + }); + } else if (isEdit.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "username", + fieldVal: value, + dataId: ruleForm.id, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("璐﹀彿宸插瓨鍦�")); + }); + } + } + } + }; + const workNo = (rule, value, callback) => { + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ュ伐鍙�")); + } else { + if (isAdd.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "work_no", + fieldVal: value, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("宸ュ彿宸插瓨鍦�")); + }); + } else if (isEdit.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "work_no", + fieldVal: value, + dataId: ruleForm.id, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("宸ュ彿宸插瓨鍦�")); + }); + } + } + }; + const phone = (rule, value, callback) => { + var reg = new RegExp(/^[1][3,4,5,7,8][0-9]{9}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "" || value === null || value === undefined) { + return callback(new Error("璇疯緭鍏ユ墜鏈哄彿")); + } else { + if (!reg.test(value)) { + callback(new Error("鎵嬫満鍙锋牸寮忛敊璇�")); + } else { + if (isAdd.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "phone", + fieldVal: value, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("鎵嬫満鍙峰凡瀛樺湪")); + }); + } else if (isEdit.value) { + duplicateUser({ + tableName: "sys_user", + fieldName: "phone", + fieldVal: value, + dataId: ruleForm.id, + _t: new Date().getTime(), + }) + .then((res) => { + callback(); + }) + .catch((err) => { + callback(new Error("鎵嬫満鍙峰凡瀛樺湪")); + }); + } + } + } + }; + const validatePass = (rule, value, callback) => { + var reg = new RegExp(/^[a-zA-Z0-9]{0,15}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛� + if (value === "") { + callback(new Error("璇疯緭鍏ュ瘑鐮�")); + } else { + if (!reg.test(value)) { + callback(new Error("瀵嗙爜蹇呴』鐢卞瓧姣嶆垨鏁板瓧缁勬垚,闀垮害涓嶅緱瓒呰繃16浣�")); + } else { + callback(); + } + } + }; + const validatePass2 = (rule, value, callback) => { + if (value === "") { + callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")); + } else if (value !== ruleForm.password) { + callback(new Error("涓ゆ瀵嗙爜涓嶄竴鑷达紒")); + } else { + callback(); + } + }; + const rules = reactive({ + realname: [ + { + required: true, + message: "璇峰~鍐欑敤鎴峰鍚�", + trigger: "blur", + }, + ], + username: [{ required: true, validator: username, trigger: "change" }], + password: [{ required: true, validator: validatePass, trigger: "blur" }], + confirmPassword: [ + { required: true, validator: validatePass2, trigger: "blur" }, + ], + + workNo: [{ required: true, validator: workNo, trigger: "change" }], + phone: [{ required: true, validator: phone, trigger: "change" }], + }); + + const ruleFormRef = ref(); + const editForm = ref(); + const drawertitle = ref(""); + const ruleForm = reactive({ + id: "", + username: "", + password: "", + confirmPassword: "", + realname: "", + workNo: "", //宸ュ彿 + selectedroles: "", //瑙掕壊 + selecteddeparts: [], //鎵�灞為儴闂� + userIdentity: 1, //韬唤 + phone: "", //鎵嬫満 + activitiSync: 1, //宸ヤ綔娴� + }); + + let tableData = ref([]); + const { proxy } = getCurrentInstance(); + // 鏌ヨ妯″潡 + let queryFormdata = reactive({ + username: "", + }); + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 10, + _t: new Date().getTime(), + }, + total: 0, + }); + // 鏌ヨ鐢ㄦ埛 + const queryInfo = async () => { + let searchData = { + username: queryFormdata.username.trim(), + _t: new Date().getTime(), + }; + const data = await userList(searchData); + tableData.value = data.result.records; + pageData.total = Math.ceil( + data.result.total / pageData.ListData.pageSize + ); + }; + + // 瀹氫箟寮规 + const dialog = ref(false); + const isEdit = ref(false); + const isAdd = ref(false); + const isDisabled = ref(false); + const drawerRef = ref(); + + // 鍏抽棴寮规锛堝垵濮嬪寲锛� + const handleClose = () => { + drawertitle.value = ""; + ruleForm.id = ""; + ruleForm.username = ""; + ruleForm.password = ""; + ruleForm.confirmPassword = ""; + ruleForm.realname = ""; + ruleForm.workNo = ""; //宸ュ彿 + ruleForm.selectedroles = ""; //瑙掕壊 + ruleForm.selecteddeparts = []; //鎵�灞為儴闂� + ruleForm.userIdentity = 1; //韬唤 + ruleForm.phone = ""; //鎵嬫満 + ruleForm.activitiSync = 1; //宸ヤ綔娴� + + dialog.value = false; + editFormVisible.value = false; + }; + const selectOptionWidth = ref(""); + const selectheight = ref("auto"); + const setOptionWidth = (event) => { + // 涓嬫媺妗嗚仛鐒︼紝璁剧疆寮规鐨勫搴� + this.$nextTick(() => { + selectOptionWidth = event.srcElement.offsetWidth + "px"; + }); + }; + //鏂板鐢ㄦ埛 + const handleAdd = () => { + getRoleList(); //璇锋眰瑙掕壊鍒楄〃 + getDepList(); //璇锋眰閮ㄩ棬鍒楄〃 + drawertitle.value = "鏂板鐢ㄦ埛"; + isDisabled.value = false; + isEdit.value = false; + isAdd.value = true; + dialog.value = true; + }; + const addUser = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let user = { + selectedroles: ruleForm.selectedroles, //瑙掕壊 + selecteddeparts: ruleForm.selecteddeparts.join(","), //鎵�灞為儴闂� + username: ruleForm.username, + password: ruleForm.password, + confirmPassword: ruleForm.confirmPassword, + realname: ruleForm.realname, + workNo: ruleForm.workNo, + userIdentity: ruleForm.userIdentity, + phone: ruleForm.phone, + activitiSync: ruleForm.activitiSync, + }; + add(user).then((res) => { + if (res.success) { + proxy.$message({ + message: "娉ㄥ唽鎴愬姛", + type: "success", + }); + } + }); + + getListData(); + } else { + return false; + } + }); + }; + + //鍒犻櫎鐢ㄦ埛 + // const handleDelete = async (val) => { + // const data = await deleteUser(val.id); + // proxy.$message({ + // message: "鍒犻櫎", + // type: "success", + // }); + // getListData(); + // }; + + // 缂栬緫鐢ㄦ埛 + const selectedDep = ref([]); + const handleEdit = async (val, type) => { + if (type == "edit") { + drawertitle.value = "缂栬緫鐢ㄦ埛"; + isDisabled.value = false; + isAdd.value = false; + isEdit.value = true; + } else if (type == "info") { + drawertitle.value = "鐢ㄦ埛璇︽儏"; + isEdit.value = false; + isAdd.value = false; + isDisabled.value = true; + } + ruleForm.id = val.id; + ruleForm.username = val.username; + ruleForm.realname = val.realname; + ruleForm.workNo = val.workNo; + ruleForm.userIdentity = val.userIdentity; + ruleForm.phone = val.phone; + ruleForm.activitiSync = val.activitiSync; + dialog.value = true; + getRoleList(); //璇锋眰瑙掕壊鍒楄〃 + getDepList(); //璇锋眰閮ㄩ棬鍒楄〃 + try { + const userRole = await queryUserRole({ + userid: val.id, + _T: new Date().getTime(), + }); + ruleForm.selectedroles = userRole.result[0]; //瑙掕壊 + } catch (error) {} + try { + const userDep = await queryUserDepart({ + userId: val.id, + _T: new Date().getTime(), + }); + let newArr = userDep.result.map((item) => { + return item.value; + }); + ruleForm.selecteddeparts = newArr; + newArr = []; + } catch {} + }; + const editUser = (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let user = { + id: ruleForm.id, + username: ruleForm.username, + realname: ruleForm.realname, + workNo: ruleForm.workNo, + selecteddeparts: ruleForm.selecteddeparts.join(","), + selectedroles: ruleForm.selectedroles, + userIdentity: ruleForm.userIdentity, + phone: ruleForm.phone, + activitiSync: ruleForm.activitiSync, + departIds: "", + }; + edit(user).then((res) => { + if (res.success) { + proxy.$message({ + message: "淇敼鎴愬姛", + type: "success", + }); + dialog.value = true; + } + }); + getListData(); + } else { + return false; + } + }); + }; + + // 鍐荤粨 + const frozen = async (val) => { + const data = await frozenBatch({ ids: val.id, status: 2 }); + proxy.$message({ + message: "璐﹀彿鍐荤粨鎴愬姛", + type: "success", + }); + getListData(); + }; + // 瑙e喕 + const thaw = async (val) => { + const data = await frozenBatch({ ids: val.id, status: 1 }); + proxy.$message({ + message: "璐﹀彿瑙e喕鎴愬姛", + type: "success", + }); + getListData(); + }; + + // 淇敼瀵嗙爜 + const editFormVisible = ref(false); + + const changePass = (val) => { + ruleForm.username = val.username; + editFormVisible.value = true; + }; + const changePassword = async (formEl) => { + if (!formEl) return; + formEl.validate((valid) => { + if (valid) { + let user = { + username: ruleForm.username, + password: ruleForm.password, + confirmPassword: ruleForm.confirmPassword, + }; + modifyPassword(user).then((res) => { + if (res.code == 200) { + proxy.$message({ + message: res.message, + type: "success", + }); + } + }); + getListData(); + } else { + return false; + } + }); + }; + + // 璇锋眰閮ㄩ棬鍒楄〃 + const depOptions = ref([]); + const getDepList = async () => { + const depData = await DepartListAll(); + depOptions.value = depData.result; + }; + //璇锋眰鐢ㄦ埛鍒楄〃鏂规硶 + const getListData = async () => { + const data = await userList(pageData.ListData); + tableData.value = data.result.records; + pageData.total = Math.ceil( + data.result.total / pageData.ListData.pageSize + ); + }; + // 璇锋眰瑙掕壊鍒楄〃 + const RoleOptions = ref([]); + const getRoleList = async () => { + const data = await RoleListAll({ + PageNo: 1, + pageSize: 100, + _t: new Date().getTime(), + }); + RoleOptions.value = data.result.records; + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + getListData(); + }; + //杩涘叆椤甸潰锛屽氨浼氳璋冪敤 + getListData(); + + return { + selectedDep, + RoleOptions, + depOptions, + selectheight, + selectOptionWidth, + setOptionWidth, + isEdit, + isAdd, + isDisabled, + queryFormdata, + queryInfo, + pageData, + handleAdd, + tableData, + handleEdit, + dialog, + drawerRef, + handleClose, + ruleFormRef, + editForm, + rules, + ruleForm, + handleCurrentChange, + // handleDelete, + frozen, + thaw, + addUser, + deleteUser, + modifyPassword, + editUser, + changePass, + changePassword, + drawertitle, + editFormVisible, + }; + }, +}; +</script> +<style lang="scss" scoped> +.addWidth { + width: 20% !important; + min-width: 100px !important; +} +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} +.header_nox { + // text-align: right; +} + +.el-dropdown-link { + margin-top: 4px; + cursor: pointer; + color: var(--el-color-primary); + display: flex; + align-items: center; +} +.demo-drawer__footer { + display: flex; + justify-content: flex-end; +} +</style> diff --git a/src/views/user/screenTable.vue b/src/views/user/screenTable.vue new file mode 100644 index 0000000..0b583ca --- /dev/null +++ b/src/views/user/screenTable.vue @@ -0,0 +1,115 @@ +<template> + <el-form :inline="true" :model="formInline" class="demo-form-inline"> + <el-form-item label="閫夋嫨鍒楄〃"> + <el-select v-model="formInline.region" class="m-2" placeholder="Select"> + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="onSubmit">Query</el-button> + </el-form-item> + </el-form> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="date" label="Date" /> + <el-table-column prop="name" label="Name" /> + <el-table-column prop="address" label="Address" /> + <el-table-column label="鎿嶄綔"> + <template #default="scope"> + <el-button size="small" @click="details(scope.$index)" + >鏌ョ湅璇︽儏</el-button + > + </template> + </el-table-column> + </el-table> + <div class="page"> + <el-pagination + background + layout="prev, pager, next" + :page-count="pageData.total" + :current-page="pageData.ListData.pageNo" + @current-change="handleCurrentChange" + /> + </div> +</template> + +<script> +import { ref, reactive, onMounted } from "vue"; +export default { + name: "NewsIndex", + components: {}, + props: {}, + setup(props) { + const value = ref(""); + const tableData = reactive([]); + let pageData = reactive({ + ListData: { + pageNo: 1, + pageSize: 10, + }, + total: 0, + }); + const options = [ + { + value: "Option1", + label: "Option1", + }, + { + value: "Option2", + label: "Option2", + }, + { + value: "Option3", + label: "Option3", + }, + { + value: "Option4", + label: "Option4", + }, + { + value: "Option5", + label: "Option5", + }, + ]; + const formInline = reactive({ + region: "", + }); + //纭畾鎼滅储鍔ㄤ綔 + const onSubmit = () => {}; + //璇锋眰鍒楄〃鏂规硶 + const getlistData = () => { + //璁$畻鍒嗛〉鏁伴噺 + // pageData.total = Math.ceil(data.data.total / pageData.ListData.pageSize) + }; + // 鍒嗛〉鍣� + const handleCurrentChange = (val) => { + pageData.ListData.pageNo = val; + + getlistData(); + }; + //鏌ョ湅璇︽儏鎸夐挳 + const details = (val) => {}; + return { + value, + pageData, + options, + onSubmit, + formInline, + tableData, + handleCurrentChange, + details, + }; + }, +}; +</script> +<style lang="scss" scoped> +.page { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} +</style> -- Gitblit v1.9.3