@vtj/ui 0.5.2 → 0.6.0

package/lib/style.css

@@ -1 +1 @@
-body::-webkit-scrollbar,div::-webkit-scrollbar{z-index:11;width:6px}body::-webkit-scrollbar:horizontal,div::-webkit-scrollbar:horizontal{height:6px}body::-webkit-scrollbar-thumb,div::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:var(--el-text-color-disabled)}body::-webkit-scrollbar-corner,div::-webkit-scrollbar-corner{background:var(--el-fill-color-blank)}body::-webkit-scrollbar-track,div::-webkit-scrollbar-track{background:var(--el-fill-color-blank)}body::-webkit-scrollbar-track-piece,div::-webkit-scrollbar-track-piece{background:var(--el-fill-color-blank);width:6px}body.is-dragging,body.is-resizing{user-select:none}body.is-dragging iframe,body.is-resizing iframe{user-select:none;pointer-events:none}.x-icon{line-height:1}.x-icon.is-pointer{cursor:pointer}.x-icon.is-pointer:hover{opacity:.7}.x-icon img{width:100%;height:100%;transform:translateY(1px)}.x-icon+.x-icon{margin-left:10px}.x-menu{border-right:none!important}.x-menu .x-icon{font-size:inherit;width:14px}.x-simple-mask{height:100%;background-color:#fff}.x-simple-mask__header{border-bottom:1px solid #dcdfe6;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.x-simple-mask__aside{border-right:1px solid #dcdfe6}.x-simple-mask__footer{border-top:1px solid #dcdfe6;display:flex;flex-direction:row;justify-content:center;align-items:center}.x-simple-mask__logo{font-size:20px;color:#337ecc;font-weight:700;cursor:pointer}.x-simple-mask__logo:hover{opacity:.7}.x-startup{font-size:100px;height:100%;font-weight:700;color:#337ecc;background-color:#ecf5ff;display:flex;justify-content:center;align-items:center;text-shadow:0 0 5px rgba(0,0,0,.3)}
+@charset "UTF-8";body{padding:0;margin:0;font-family:var(--el-font-family);background-color:var(--el-bg-color)}body.user-select-none{user-select:none;overflow:hidden!important}body.user-select-none iframe{pointer-events:none}body::-webkit-scrollbar,div::-webkit-scrollbar{z-index:11;width:6px}body::-webkit-scrollbar:horizontal,div::-webkit-scrollbar:horizontal{height:6px}body::-webkit-scrollbar-thumb,div::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:rgba(0,0,0,.1)}body::-webkit-scrollbar-corner,div::-webkit-scrollbar-corner{background:transparent}body::-webkit-scrollbar-track,div::-webkit-scrollbar-track{background:transparent}body::-webkit-scrollbar-track-piece,div::-webkit-scrollbar-track-piece{background:transparent;width:6px}body.is-dragging,body.is-resizing{user-select:none}body.is-dragging iframe,body.is-resizing iframe{user-select:none;pointer-events:none}.x-icon{line-height:1;display:inline-block;vertical-align:middle;font-size:inherit;width:1em;height:1em;overflow:hidden}.x-icon>svg{width:1em;height:1em}.x-icon.is-pointer{cursor:pointer}.x-icon.is-pointer:hover{opacity:.7}.x-icon img{width:100%;height:100%;transform:translateY(1px)}.x-icon+.x-icon{margin-left:10px}.x-menu{border-right:none!important}.x-menu .x-icon{font-size:inherit;width:14px}.x-menu__wrapper{display:inline-flex;justify-content:flex-start;align-items:center}.x-menu__badge{font-size:12px;zoom:.9;margin-left:14px}.x-menu.el-menu--collapse .x-menu__wrapper{position:relative}.x-menu.el-menu--collapse .x-menu__badge{position:absolute;right:20px;top:5px}.x-simple-mask{height:100%;background-color:#fff}.x-simple-mask__header{border-bottom:1px solid #dcdfe6;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.x-simple-mask__aside{border-right:1px solid #dcdfe6}.x-simple-mask__footer{border-top:1px solid #dcdfe6;display:flex;flex-direction:row;justify-content:center;align-items:center}.x-simple-mask__logo{font-size:20px;color:#337ecc;font-weight:700;cursor:pointer}.x-simple-mask__logo:hover{opacity:.7}.x-action{display:inline-flex;vertical-align:middle}.x-action+.x-action{margin-left:10px}.x-action .el-dropdown,.x-action .el-tooltip__trigger,.x-action .el-badge{outline:none}.x-action .el-badge__content{zoom:.9}.x-action--icon+.x-action--icon{margin-left:5px}.x-action__inner{cursor:pointer;color:var(--el-text-color-regular);display:inline-flex;justify-content:center;align-items:center;line-height:1;white-space:nowrap;font-size:14px}.x-action__inner>.x-icon+span{margin-left:.2em}.x-action__inner>span{display:inline-flex;align-items:center}.x-action__inner:hover{opacity:.7}.x-action__inner.is-disabled{cursor:not-allowed;opacity:.6}.x-action__inner.is-primary{color:var(--el-color-primary)}.x-action__inner.is-warning{color:var(--el-color-warning)}.x-action__inner.is-success{color:var(--el-color-success)}.x-action__inner.is-danger{color:var(--el-color-danger)}.x-action__inner.is-info{color:var(--el-text-color-regular)}.x-action__inner.is-icon{padding:5px;border-radius:3px}.x-action__inner.is-icon.is-background-hover{color:var(--el-text-color-regular)}.x-action__inner.is-icon.is-background-hover:hover.is-primary{background-color:var(--el-color-primary-light-8);color:var(--el-color-primary)}.x-action__inner.is-icon.is-background-hover:hover.is-success{background-color:var(--el-color-success-light-8);color:var(--el-color-success)}.x-action__inner.is-icon.is-background-hover:hover.is-warning{background-color:var(--el-color-warning-light-8);color:var(--el-color-warning)}.x-action__inner.is-icon.is-background-hover:hover.is-danger{background-color:var(--el-color-danger-light-8);color:var(--el-color-danger)}.x-action__inner.is-icon.is-background-hover:hover.is-info{background-color:var(--el-color-info-light-8);color:var(--el-text-color-regular)}.x-action__inner.is-icon.is-background-always.is-primary{background-color:var(--el-color-primary-light-9)}.x-action__inner.is-icon.is-background-always.is-success{background-color:var(--el-color-success-light-9)}.x-action__inner.is-icon.is-background-always.is-warning{background-color:var(--el-color-warning-light-9)}.x-action__inner.is-icon.is-background-always.is-danger{background-color:var(--el-color-danger-light-9)}.x-action__inner.is-icon.is-background-always.is-info{background-color:var(--el-color-info-light-9)}.x-action__inner.is-icon.is-circle{border-radius:50%}.x-action__inner.is-icon.is-large{font-size:16px;padding:6px}.x-action__inner.is-icon.is-small{font-size:12px;padding:4px}.x-action__inner.is-text.is-large{font-size:16px}.x-action__inner.is-text.is-small{font-size:12px}.x-action-bar{white-space:nowrap}.x-action-bar__divider{margin:0 1em!important}.x-container{flex-shrink:0;box-sizing:border-box}.x-container.is-fit{width:100%;height:100%}.x-container.is-flex{display:flex}.x-container.is-inline-flex{display:inline-flex}.x-container.is-direction-column{flex-direction:column}.x-container.is-direction-row-reverse{flex-direction:row-reverse}.x-container.is-direction-column-reverse{flex-direction:column-reverse}.x-container.is-justify-flex-end{justify-content:flex-end}.x-container.is-justify-center{justify-content:center}.x-container.is-justify-space-between{justify-content:space-between}.x-container.is-justify-space-around{justify-content:space-around}.x-container.is-align-center{align-items:center}.x-container.is-flex-end{align-items:flex-end}.x-container.is-baseline{align-items:baseline}.x-container.is-stretch{align-items:stretch}.x-container.is-align-content-flex-start{align-content:flex-start}.x-container.is-align-content-flex-end{align-content:flex-end}.x-container.is-align-content-enter{align-content:center}.x-container.is-align-content-space-between{align-content:space-between}.x-container.is-align-content-space-around{align-content:space-around}.x-container.is-align-content-stretch{align-content:stretch}.x-container.is-wrap-wrap{flex-wrap:wrap}.x-container.is-wrap-wrap-reverse{flex-wrap:wrap-reverse}.x-container.is-grow{flex-grow:1}.x-container.is-shrink{flex-shrink:1}.x-container.is-align-self-flex-start{align-self:flex-start}.x-container.is-align-self-flex-end{align-self:flex-end}.x-container.is-align-self-center{align-self:center}.x-container.is-align-self-baseline{align-self:baseline}.x-container.is-align-self-stretch{align-self:stretch}.x-container.is-overflow-hidden{overflow:hidden}.x-container.is-overflow-visible{overflow:visible}.x-container.is-overflow-auto{overflow:auto}.x-container.is-padding{padding:10px}.x-header{height:32px}.x-header.is-size-large{height:40px}.x-header.is-size-small{height:28px}.x-header.is-border{border-bottom:1px solid var(--el-border-color-light)}.x-header__wrapper{line-height:1;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:1px}.x-header__wrapper.is-size-large{font-size:16px}.x-header__wrapper.is-size-large .x-header__subtitle,.x-header__wrapper.is-size-large .x-header__more{font-size:14px}.x-header__wrapper.is-size-small,.x-header__wrapper.is-size-small .x-header__subtitle,.x-header__wrapper.is-size-small .x-header__more{font-size:12px}.x-header__wrapper.is-pointer .x-header__content{cursor:pointer}.x-header__wrapper.is-pointer .x-header__content:hover{opacity:.7}.x-header__icon{margin-right:5px;flex-shrink:0}.x-header__content{color:var(--el-text-color-primary);font-weight:700}.x-header__more{color:var(--el-text-color-secondary)!important;margin-left:3px}.x-header__subtitle{margin-left:.5em;font-size:12px;color:var(--el-text-color-secondary)}.x-header__actions{white-space:nowrap}.x-panel--default.is-radius{border-radius:var(--el-border-radius-base)}.x-panel--default .x-panel__header{margin-bottom:4px}.x-panel--default.is-border .x-panel__body{border:1px solid var(--el-border-color-light)}.x-panel--default.is-radius .x-panel__body{border-radius:var(--el-border-radius-base)}.x-panel--default.is-shadow-always .x-panel__body,.x-panel--default.is-shadow-hover .x-panel__body:hover{box-shadow:var(--el-box-shadow-lighter)}.x-panel--card.is-border{border:1px solid var(--el-border-color-light)}.x-panel--card.is-radius{border-radius:var(--el-border-radius-base)}.x-panel--card .x-panel__header{padding:0 5px 0 10px;background-color:var(--el-fill-color-lighter)}.x-panel--card.is-shadow-always,.x-panel--card.is-shadow-hover:hover{box-shadow:var(--el-box-shadow-lighter)}.x-panel__body.is-grow.is-overflow-auto{height:1px}.x-dialog{background-color:var(--el-bg-color);position:absolute;pointer-events:initial}.x-dialog.is-draggable>.x-panel__header{cursor:move}.x-dialog.is-maximized{width:100%!important;height:100%!important;left:0!important;top:0!important}.x-dialog.is-minimized{display:none}.x-dialog__wrapper{position:absolute;inset:0;pointer-events:none;overflow:hidden}.x-dialog__wrapper.is-minimized{display:none}.x-dialog__wrapper.is-dragging{user-select:none}.x-dialog__wrapper.is-dragging iframe{user-select:none;pointer-events:none}.x-dialog__modal{position:absolute;inset:0;background-color:var(--el-mask-color-extra-light);pointer-events:initial}.x-dialog__frame{width:100%;height:100%;display:block;border:none}.x-dialog.is-primary{border:2px solid var(--el-color-primary);border-top:none}.x-dialog.is-primary>.x-panel__header{background-color:var(--el-color-primary);color:var(--el-color-white)}.x-dialog.is-primary>.x-panel__header .x-header__content{color:var(--el-color-white)}.x-dialog.is-primary>.x-panel__header .x-action__inner.is-icon.is-background-hover{color:var(--el-color-white)}.x-dialog.is-primary>.x-panel__header .x-action__inner.is-icon.is-background-hover:hover.is-primary{background-color:#ffffff4d;opacity:1}.x-dialog.is-primary>.x-panel__header .x-action__inner.is-icon.is-background-hover:hover.is-danger{background-color:var(--el-color-danger);opacity:1}.x-dialog.is-primary>.x-panel__header .x-action__inner.is-icon.is-background-hover:hover.is-warning{background-color:var(--el-color-warning);opacity:1}.x-mask{--el-mask-brand-color: #0157fe;--el-mask-content-bg-color: var(--el-bg-color);--el-mask-topbar-bg-color: var(--el-fill-color-lighter);--el-mask-sidebar-bg-color: var(--el-fill-color-lighter);--el-mask-sidebar-border-color: var(--el-border-color-lighter);width:100%;height:100%;background-color:var(--el-mask-content-bg-color);overflow:hidden}.x-mask-brand{height:40px;overflow:hidden}.x-mask-brand__logo{height:26px;width:60px;text-align:center;cursor:pointer}.x-mask-brand__logo:hover{opacity:.7}.x-mask-brand__logo>img{height:100%}.x-mask-brand__title{font-size:16px;font-weight:700;color:var(--el-mask-brand-color);font-family:Microsoft YaHei,微软雅黑,Arial,sans-serif}.x-mask-brand__title>span{position:relative;transform:translate(-10px)}.x-mask-brand.is-collapsed .x-mask-brand__title{display:none}.x-mask-topbar{height:40px;background-color:var(--el-mask-topbar-bg-color);border-bottom:1px solid var(--el-mask-sidebar-border-color)}.x-mask-menu{--el-menu-bg-color: transparent;--el-menu-item-height: 36px;--el-menu-sub-item-height: 34px;--el-font-size-base: 14px;--el-menu-item-font-size: 14px;--el-menu-icon-width: 20px;--el-menu-base-level-padding: 10px;--el-menu-level-padding: 25px;width:100%;height:1px;overflow-x:hidden!important}.x-mask-menu::-webkit-scrollbar{width:2px!important}.x-mask-menu::-webkit-scrollbar-thumb{background:transparent!important}.x-mask-menu:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1)!important}.x-mask-menu .el-menu .el-menu-item [class^=el-icon],.x-mask-menu .el-menu .el-sub-menu .el-icon{font-size:16px}.x-mask-menu .el-menu .el-sub-menu .el-sub-menu__icon-arrow{font-size:12px;color:var(--el-text-color-secondary)}.x-mask-menu .el-menu .el-menu-item.is-active{background-color:var(--el-menu-hover-bg-color)}.x-mask-menu .el-menu .el-sub-menu.is-active>.el-sub-menu__title{color:var(--el-color-primary)}.x-mask-menu .el-menu--collapse{--el-menu-item-height: 50px;width:100%}.x-mask-menu .el-menu--collapse>.el-menu-item{flex-wrap:wrap;justify-content:center;position:relative;margin:5px;border-radius:var(--el-border-radius-base);align-items:center;text-align:center}.x-mask-menu .el-menu--collapse>.el-menu-item .x-menu__title{height:auto;width:auto;visibility:visible;font-size:12px;line-height:1;zoom:.9;position:absolute;left:0;bottom:10px;width:100%;text-align:center;color:var(--el-text-color-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-mask-menu .el-menu--collapse>.el-menu-item .el-menu-tooltip__trigger{width:100%;height:100%;display:block}.x-mask-menu .el-menu--collapse>.el-menu-item.is-active{background-color:var(--el-menu-hover-bg-color)}.x-mask-menu .el-menu--collapse>.el-menu-item.is-active .x-menu__title{color:var(--el-color-primary)}.x-mask-menu .el-menu--collapse>.el-sub-menu{margin:5px}.x-mask-menu .el-menu--collapse>.el-sub-menu>.el-sub-menu__title{width:100%;display:flex;border-radius:var(--el-border-radius-base);line-height:1;padding-left:0;padding-right:0}.x-mask-menu .el-menu--collapse>.el-sub-menu>.el-sub-menu__title>.x-menu__wrapper{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;height:100%;width:100%}.x-mask-menu .el-menu--collapse>.el-sub-menu>.el-sub-menu__title>.x-menu__wrapper .x-menu__title{font-size:12px;zoom:.9;left:0;bottom:10px;width:100%;text-align:center;display:block;position:relative;top:-5px;color:var(--el-text-color-secondary);overflow:hidden}.x-mask-menu .el-menu--collapse>.el-sub-menu.is-active{background-color:var(--el-menu-hover-bg-color)}.x-mask-menu .el-menu--collapse>.el-sub-menu.is-active .x-menu__wrapper{color:var(--el-color-primary)}.x-mask-menu .el-menu--collapse>.el-sub-menu.is-active .x-menu__wrapper .x-menu__title{color:var(--el-color-primary)}.x-mask-menu .el-menu--collapse>.el-sub-menu.is-opened{background-color:var(--el-menu-hover-bg-color)}.x-mask-menu .el-menu--collapse .el-menu-item [class^=el-icon],.x-mask-menu .el-menu--collapse .el-sub-menu .el-icon{font-size:20px;margin-right:0}.x-mask-menu__favorites .el-sub-menu__title .x-icon{color:var(--el-color-warning)}.x-mask-menu__search .el-sub-menu__title .x-icon{color:var(--el-color-success)}.x-mask-menu-popper{--el-menu-item-height: 36px;--el-menu-sub-item-height: 34px;--el-font-size-base: 12px;--el-menu-item-font-size: 12px;--el-menu-icon-width: 20px;--el-menu-base-level-padding: 14px;max-height:calc(100% - 10px);overflow:auto}.x-mask-menu-popper .el-menu-item [class^=el-icon],.x-mask-menu-popper .el-sub-menu .el-icon{font-size:14px;margin-right:0}.x-mask-menu-popper .el-sub-menu .el-sub-menu__icon-arrow{font-size:12px;color:var(--el-text-color-secondary)}.x-mask-menu-popper .el-menu-item.is-active{background-color:var(--el-menu-hover-bg-color)}.x-mask-menu-popper .el-sub-menu.is-active>.el-sub-menu__title{color:var(--el-color-primary)}.x-mask-menu-popper::-webkit-scrollbar{width:2px!important}.x-mask-menu-popper::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1)!important}.x-mask-sidebar{width:200px;background-color:var(--el-mask-sidebar-bg-color)}.x-mask-sidebar:not(.is-resizing){transition:width .2s}.x-mask-sidebar__wrapper{position:relative;border-right:1px solid var(--el-mask-sidebar-border-color)}.x-mask-sidebar__wrapper>.el-divider{margin:0}.x-mask-sidebar__expander{padding:5px 0;width:100%;background-color:var(--el-mask-sidebar-border-color);text-align:center;cursor:pointer}.x-mask-sidebar__expander:hover{opacity:.7}.x-mask-sidebar__helper{position:absolute;width:8px;font-size:0;right:0;top:0;bottom:0;border-right:2px solid transparent}.x-mask-sidebar.is-resizing .x-mask-sidebar__helper{border-right:2px solid var(--el-color-primary)}.x-mask-sidebar.is-collapsed{width:60px}.x-mask-sidebar.is-collapsed .x-mask-avatar__wrapper{overflow:hidden;height:0;width:0;visibility:hidden}.x-mask-topbar{height:40px}.x-mask-tabs{width:1px}.x-mask-tabs .el-tabs{--el-tabs-header-height: 30px;--el-font-size-base: 12px;position:relative;left:-1px}.x-mask-tabs .el-tabs__header{margin:0;border-bottom:none!important}.x-mask-tabs .el-tabs__header .el-tabs__item.is-active{background-color:var(--el-bg-color)}.x-mask-tabs .el-tabs__header .x-icon{pointer-events:none}.x-mask-tabs .el-tabs__content{display:none}.x-mask-tabs__trigger{height:100%;display:flex;align-items:center}.x-mask-tabs__trigger>.x-icon+span{margin-left:5px}.x-mask-toolbar{padding-right:10px}.x-mask-toolbar>.x-action{margin:0 5px}.x-mask-toolbar__menu-item{position:relative;display:inline-block;padding-right:20px;width:100%}.x-mask-toolbar__menu-item .x-icon{position:absolute;right:-10px;top:50%;transform:translateY(-50%)}.x-mask-switch-bar{width:100%;height:40px;padding:10px 5px 10px 10px;border-top:1px solid var(--el-mask-sidebar-border-color);position:relative;top:-1px;box-sizing:border-box}.x-mask-switch-bar__left{width:1px;padding-right:5px}.x-mask-switch-bar__right.is-collasped{width:100%;padding-right:5px}.x-mask-switch-bar__switch{height:28px!important;line-height:1!important;width:60px!important;position:relative;display:block!important}.x-mask-switch-bar__switch .el-switch__core{--el-switch-off-color: var(--el-mask-content-bg-color);--el-switch-on-color: var(--el-mask-content-bg-color);border:1px solid var(--el-mask-sidebar-border-color)!important;height:28px;width:60px;border-radius:14px}.x-mask-switch-bar__switch .el-switch__core .el-switch__action{width:28px;height:24px;border-radius:14px;background-color:var(--el-color-primary-light-8)}.x-mask-switch-bar__switch .el-switch__label--left{position:absolute;top:6px;left:9px;z-index:1;margin-right:0;height:14px;color:var(--el-text-color-regular)}.x-mask-switch-bar__switch .el-switch__label--right{position:absolute;top:6px;right:9px;z-index:1;margin-right:0;height:14px;color:var(--el-text-color-regular)}.x-mask-switch-bar__switch .el-switch__label.is-active{color:var(--el-color-primary)}.x-mask-switch-bar__switch.is-checked .el-switch__core .el-switch__action{left:calc(100% - 29px)!important}.x-mask-switch-bar__input .el-input__wrapper{padding:0!important;border-radius:12px}.x-mask-switch-bar__input .el-input__prefix-inner>:last-child{margin-right:0;width:20px}.x-mask-switch-bar__input .el-input__suffix{cursor:pointer;transition:color .1s}.x-mask-switch-bar__input .el-input__suffix:hover{color:var(--el-color-warning)}.x-mask-switch-bar__input .el-input__suffix .x-icon{width:20px;margin-left:0!important}.x-mask-switch-bar__input .el-input__inner{height:28px!important}.x-mask-avatar{margin-left:5px}.x-mask-theme-switch.el-switch{--el-switch-on-color: var(--el-fill-color-dark);--el-switch-off-color: var(--el-fill-color-dark)}.x-mask-theme-switch .el-switch__core .el-switch__action{color:var(--el-text-color-regular)!important;background-color:var(--el-bg-color)!important}.x-startup{height:100%;background-color:#ecf5ff;display:flex;justify-content:center;align-items:center;flex-direction:column;position:relative}.x-startup .brand{display:flex;justify-content:center;align-items:center}.x-startup .brand img{width:100px;height:100px;margin-right:20px}.x-startup h1{font-size:110px;font-weight:700;color:#0157fe;text-shadow:0 0 6px rgba(0,0,0,.3);margin:0;text-align:center;line-height:1}.x-startup h3{font-size:28px;color:#666;text-align:center}.x-startup .ba{position:absolute;height:30px;line-height:30px;text-align:center;bottom:0;width:100%;left:0}.x-startup .ba a{color:#b1b3b8}.x-startup .btn{text-align:center;padding-top:20px}.x-startup .btn button{width:200px}

package/package.json

@@ -1,27 +1,27 @@
 {
   "name": "@vtj/ui",
   "private": false,
-  "version": "0.5.2",
+  "version": "0.6.0",
   "type": "module",
   "scripts": {
     "setup": "pnpm install --registry=https://registry.npmmirror.com",
-    "dev": "cross-env ENV_TYPE=dev vite",
     "build": "vue-tsc --noEmit && vite build && pnpm run build:cdn",
-    "build:cdn": "vue-tsc --noEmit && cross-env CDN=true vite build",
-    "build:dts": "rimraf ./types && vue-tsc --declaration --emitDeclarationOnly",
-    "test:unit": "vitest --environment jsdom",
-    "coverage": "vitest run --coverage --environment jsdom"
+    "build:cdn": "vue-tsc --noEmit && cross-env CDN=true vite build"
   },
   "engines": {
     "node": ">=16.0.0"
   },
   "dependencies": {
-    "@vtj/deps": "^0.5.2",
-    "@vtj/icons": "^0.5.2",
-    "@vtj/utils": "^0.5.2"
+    "@element-plus/icons-vue": "~2.1.0",
+    "@vtj/icons": "^0.6.0",
+    "@vtj/utils": "^0.6.0",
+    "@vueuse/core": "~10.4.1",
+    "element-plus": "~2.3.14"
   },
   "devDependencies": {
-    "@vtj/cli": "^0.5.2"
+    "@vtj/cli": "^0.6.0",
+    "vue": "~3.3.4",
+    "vue-router": "~4.2.4"
   },
   "files": [
     "lib",
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c87d950274aeda770c2e38b485a4bcd23f39c5f7"
+  "gitHead": "a565aefeb62ea6b2c0df0312fc26788bc180388a"
 }

package/types/components/action/Action.d.ts

@@ -0,0 +1,363 @@
+import { EpPropFinalized, Arrayable, EpPropMergeType } from 'element-plus/es/utils';
+import { ElTooltipProps, BadgeProps, TooltipTriggerType, Placement, Options, ButtonProps } from 'element-plus';
+import { ActionMode, ActionMenuItem } from './types';
+import { IconParam, BaseSize, BaseType } from '..';
+import { DefineComponent, PropType, ExtractPropTypes, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps } from 'vue';
+declare const _default: DefineComponent<{
+    name: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    value: {
+        type: PropType<unknown>;
+    };
+    icon: {
+        type: PropType<IconParam>;
+    };
+    mode: {
+        type: PropType<ActionMode>;
+        default: string;
+    };
+    menus: {
+        type: PropType<ActionMenuItem[]>;
+    };
+    tooltip: {
+        type: PropType<string | Partial<ElTooltipProps>>;
+    };
+    badge: {
+        type: PropType<string | number | Partial<BadgeProps>>;
+    };
+    dropdown: {
+        type: PropType<Partial<ExtractPropTypes<{
+            readonly trigger: EpPropFinalized<(new (...args: any[]) => "click" | "hover" | "focus" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | ((new (...args: any[]) => "click" | "hover" | "focus" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>))[], unknown, unknown, "hover", boolean>;
+            readonly effect: {
+                readonly default: "light";
+                readonly type: PropType<string>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                readonly __epPropKey: true;
+            };
+            readonly type: {
+                readonly type: PropType<EpPropMergeType<(new (...args: any[]) => "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text") | (() => EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text", unknown>) | ((new (...args: any[]) => "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text") | (() => EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text", unknown>))[], unknown, unknown>>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+            readonly placement: EpPropFinalized<(new (...args: any[]) => "right" | "left" | "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | ((new (...args: any[]) => "right" | "left" | "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement))[], unknown, unknown, "bottom", boolean>;
+            readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | ((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>))[], unknown, unknown, () => {}, boolean>;
+            readonly id: StringConstructor;
+            readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+            readonly splitButton: BooleanConstructor;
+            readonly hideOnClick: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+            readonly loop: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+            readonly showTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
+            readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
+            readonly tabindex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, 0, boolean>;
+            readonly maxHeight: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, "", boolean>;
+            readonly popperClass: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+            readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+            readonly role: EpPropFinalized<StringConstructor, unknown, unknown, "menu", boolean>;
+            readonly buttonProps: {
+                readonly type: PropType<ButtonProps>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+            readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+        }>>>;
+    };
+    button: {
+        type: PropType<Partial<ButtonProps>>;
+    };
+    disabled: {
+        type: PropType<boolean | (() => boolean)>;
+    };
+    size: {
+        type: PropType<BaseSize>;
+        default: string;
+    };
+    type: {
+        type: PropType<BaseType>;
+        default: string;
+    };
+    background: {
+        type: PropType<"hover" | "always">;
+        default: string;
+    };
+    circle: {
+        type: BooleanConstructor;
+    };
+}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    click: (props: Readonly<Partial<ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        value: {
+            type: PropType<unknown>;
+        };
+        icon: {
+            type: PropType<IconParam>;
+        };
+        mode: {
+            type: PropType<ActionMode>;
+            default: string;
+        };
+        menus: {
+            type: PropType<ActionMenuItem[]>;
+        };
+        tooltip: {
+            type: PropType<string | Partial<ElTooltipProps>>;
+        };
+        badge: {
+            type: PropType<string | number | Partial<BadgeProps>>;
+        };
+        dropdown: {
+            type: PropType<Partial<ExtractPropTypes<{
+                readonly trigger: EpPropFinalized<(new (...args: any[]) => "click" | "hover" | "focus" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | ((new (...args: any[]) => "click" | "hover" | "focus" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>))[], unknown, unknown, "hover", boolean>;
+                readonly effect: {
+                    readonly default: "light";
+                    readonly type: PropType<string>;
+                    readonly required: false;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    readonly __epPropKey: true;
+                };
+                readonly type: {
+                    readonly type: PropType<EpPropMergeType<(new (...args: any[]) => "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text") | (() => EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text", unknown>) | ((new (...args: any[]) => "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text") | (() => EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text", unknown>))[], unknown, unknown>>;
+                    readonly required: false;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    __epPropKey: true;
+                };
+                readonly placement: EpPropFinalized<(new (...args: any[]) => "right" | "left" | "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | ((new (...args: any[]) => "right" | "left" | "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement))[], unknown, unknown, "bottom", boolean>;
+                readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | ((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>))[], unknown, unknown, () => {}, boolean>;
+                readonly id: StringConstructor;
+                readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+                readonly splitButton: BooleanConstructor;
+                readonly hideOnClick: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                readonly loop: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                readonly showTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
+                readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
+                readonly tabindex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, 0, boolean>;
+                readonly maxHeight: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, "", boolean>;
+                readonly popperClass: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+                readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+                readonly role: EpPropFinalized<StringConstructor, unknown, unknown, "menu", boolean>;
+                readonly buttonProps: {
+                    readonly type: PropType<ButtonProps>;
+                    readonly required: false;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    __epPropKey: true;
+                };
+                readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+            }>>>;
+        };
+        button: {
+            type: PropType<Partial<ButtonProps>>;
+        };
+        disabled: {
+            type: PropType<boolean | (() => boolean)>;
+        };
+        size: {
+            type: PropType<BaseSize>;
+            default: string;
+        };
+        type: {
+            type: PropType<BaseType>;
+            default: string;
+        };
+        background: {
+            type: PropType<"hover" | "always">;
+            default: string;
+        };
+        circle: {
+            type: BooleanConstructor;
+        };
+    }>>>) => void;
+    command: (item: ActionMenuItem) => void;
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    value: {
+        type: PropType<unknown>;
+    };
+    icon: {
+        type: PropType<IconParam>;
+    };
+    mode: {
+        type: PropType<ActionMode>;
+        default: string;
+    };
+    menus: {
+        type: PropType<ActionMenuItem[]>;
+    };
+    tooltip: {
+        type: PropType<string | Partial<ElTooltipProps>>;
+    };
+    badge: {
+        type: PropType<string | number | Partial<BadgeProps>>;
+    };
+    dropdown: {
+        type: PropType<Partial<ExtractPropTypes<{
+            readonly trigger: EpPropFinalized<(new (...args: any[]) => "click" | "hover" | "focus" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | ((new (...args: any[]) => "click" | "hover" | "focus" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>))[], unknown, unknown, "hover", boolean>;
+            readonly effect: {
+                readonly default: "light";
+                readonly type: PropType<string>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                readonly __epPropKey: true;
+            };
+            readonly type: {
+                readonly type: PropType<EpPropMergeType<(new (...args: any[]) => "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text") | (() => EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text", unknown>) | ((new (...args: any[]) => "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text") | (() => EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text", unknown>))[], unknown, unknown>>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+            readonly placement: EpPropFinalized<(new (...args: any[]) => "right" | "left" | "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | ((new (...args: any[]) => "right" | "left" | "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement))[], unknown, unknown, "bottom", boolean>;
+            readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | ((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>))[], unknown, unknown, () => {}, boolean>;
+            readonly id: StringConstructor;
+            readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+            readonly splitButton: BooleanConstructor;
+            readonly hideOnClick: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+            readonly loop: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+            readonly showTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
+            readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
+            readonly tabindex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, 0, boolean>;
+            readonly maxHeight: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, "", boolean>;
+            readonly popperClass: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+            readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+            readonly role: EpPropFinalized<StringConstructor, unknown, unknown, "menu", boolean>;
+            readonly buttonProps: {
+                readonly type: PropType<ButtonProps>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+            readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+        }>>>;
+    };
+    button: {
+        type: PropType<Partial<ButtonProps>>;
+    };
+    disabled: {
+        type: PropType<boolean | (() => boolean)>;
+    };
+    size: {
+        type: PropType<BaseSize>;
+        default: string;
+    };
+    type: {
+        type: PropType<BaseType>;
+        default: string;
+    };
+    background: {
+        type: PropType<"hover" | "always">;
+        default: string;
+    };
+    circle: {
+        type: BooleanConstructor;
+    };
+}>> & {
+    onClick?: ((props: Readonly<Partial<ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        value: {
+            type: PropType<unknown>;
+        };
+        icon: {
+            type: PropType<IconParam>;
+        };
+        mode: {
+            type: PropType<ActionMode>;
+            default: string;
+        };
+        menus: {
+            type: PropType<ActionMenuItem[]>;
+        };
+        tooltip: {
+            type: PropType<string | Partial<ElTooltipProps>>;
+        };
+        badge: {
+            type: PropType<string | number | Partial<BadgeProps>>;
+        };
+        dropdown: {
+            type: PropType<Partial<ExtractPropTypes<{
+                readonly trigger: EpPropFinalized<(new (...args: any[]) => "click" | "hover" | "focus" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | ((new (...args: any[]) => "click" | "hover" | "focus" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>))[], unknown, unknown, "hover", boolean>;
+                readonly effect: {
+                    readonly default: "light";
+                    readonly type: PropType<string>;
+                    readonly required: false;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    readonly __epPropKey: true;
+                };
+                readonly type: {
+                    readonly type: PropType<EpPropMergeType<(new (...args: any[]) => "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text") | (() => EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text", unknown>) | ((new (...args: any[]) => "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text") | (() => EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "primary" | "danger" | "default" | "text", unknown>))[], unknown, unknown>>;
+                    readonly required: false;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    __epPropKey: true;
+                };
+                readonly placement: EpPropFinalized<(new (...args: any[]) => "right" | "left" | "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | ((new (...args: any[]) => "right" | "left" | "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement))[], unknown, unknown, "bottom", boolean>;
+                readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | ((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>))[], unknown, unknown, () => {}, boolean>;
+                readonly id: StringConstructor;
+                readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+                readonly splitButton: BooleanConstructor;
+                readonly hideOnClick: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                readonly loop: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                readonly showTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
+                readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
+                readonly tabindex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, 0, boolean>;
+                readonly maxHeight: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, "", boolean>;
+                readonly popperClass: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+                readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+                readonly role: EpPropFinalized<StringConstructor, unknown, unknown, "menu", boolean>;
+                readonly buttonProps: {
+                    readonly type: PropType<ButtonProps>;
+                    readonly required: false;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    __epPropKey: true;
+                };
+                readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+            }>>>;
+        };
+        button: {
+            type: PropType<Partial<ButtonProps>>;
+        };
+        disabled: {
+            type: PropType<boolean | (() => boolean)>;
+        };
+        size: {
+            type: PropType<BaseSize>;
+            default: string;
+        };
+        type: {
+            type: PropType<BaseType>;
+            default: string;
+        };
+        background: {
+            type: PropType<"hover" | "always">;
+            default: string;
+        };
+        circle: {
+            type: BooleanConstructor;
+        };
+    }>>>) => any) | undefined;
+    onCommand?: ((item: ActionMenuItem) => any) | undefined;
+}, {
+    type: BaseType;
+    size: BaseSize;
+    circle: boolean;
+    mode: ActionMode;
+    background: "hover" | "always";
+}, {}>;
+export default _default;