@web-utils/component 2.9.7 → 2.9.9

package/base.css

@@ -1 +1 @@
-.border-bottom{border-bottom:1px solid #d7dae0}.clear-fix:after{display:block;clear:both;height:0;visibility:hidden;content:" "}.flex-row{display:flex;flex-direction:row;flex-shrink:0}.flex-row.vertical-center{align-items:center}.flex-row.vertical-start{align-items:flex-start}.flex-row.horizon-center{justify-content:center}.text-center{text-align:center}.flex-column{display:flex;flex-direction:column}.flex-column.vertical-center{justify-content:center}.flex-column.horizon-center{align-items:center}.flex-item,.flex-item-relative{flex:1 1 auto}.flex-item-relative{position:relative}.flex-item-relative .flex-content{position:absolute;inset:0}.flex-not-shrink{flex-shrink:0}body{font-family:Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol}*{outline:none}.avue-canvas{display:none}.avue-ghost{background:#c8ebfb;opacity:.5}.avue--disabled{color:#ccc}.avue--detail .hover-row td{background-color:#fff!important}.avue--detail .avue-group__header{padding-left:10px;border-bottom:1px solid #eee}.avue--detail .el-collapse-item__header{margin-bottom:0}.avue--detail .el-input.is-disabled .el-input__inner,.avue--detail .el-textarea.is-disabled .el-textarea__inner,.avue--detail .el-range-editor.is-disabled,.avue--detail .el-range-editor.is-disabled input{padding-left:0;color:#606266;background-color:#fff}.avue--detail .el-input-number__decrease,.avue--detail .el-input-number__increase{display:none}.avue--detail .el-input-group__append,.avue--detail .el-input-group__prepend{background-color:transparent;border:none}.avue--detail .el-input__suffix,.avue--detail .el-input__prefix{display:none}.avue--detail .el-input__inner,.avue--detail .el-textarea__inner{border:none}.avue--detail .el-input__inner::placeholder,.avue--detail .el-textarea__inner::placeholder{color:transparent!important}.avue--detail .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#409eff;border-color:#409eff}.avue--detail .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{border-color:#fff}.avue--detail .el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:#409eff;border-color:#409eff}.avue--detail .el-radio__input.is-disabled.is-checked .el-radio__inner:after{background-color:#fff}.avue--detail .el-checkbox__input.is-disabled+span.el-checkbox__label,.avue--detail .el-radio__input.is-disabled+span.el-radio__label{color:#606266}.avue--detail .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,.avue--detail .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{display:none}.avue--detail .el-row{border-top:1px solid #ebeef5;border-left:1px solid #ebeef5}.avue--detail .el-col{margin:0!important;padding:0!important;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.avue--detail .el-form-item--medium.el-form-item,.avue--detail .el-form-item--mini.el-form-item,.avue--detail .el-form-item--small.el-form-item{margin:0;background:#fafafa}.avue--detail .el-form-item__label,.avue--detail .el-form-item__content{padding:2px 0}.avue--detail .el-form-item__label{box-sizing:border-box;padding-right:20px;color:#909399}.avue--detail .el-tag{margin-right:6px!important;margin-left:0!important}.avue--detail .avue-crud .el-form-item__content{border:none}.avue--detail .el-form-item__content{box-sizing:border-box;padding-left:20px;background-color:#fff;border-left:1px solid #ebeef5}.avue--detail__column .el-form-item{background-color:#fff}.avue--detail__column .el-form-item__label{padding-right:12px}.avue--detail__column .el-form-item__content{padding-left:0;border-left:none}.avue-grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(0,0,0,.1) 1px,transparent 0),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 0);background-size:20px 20px,20px 20px}.avue-mask{position:fixed;inset:0;z-index:1000;height:100%;background-color:#37373799}.avue--card{border-radius:5px;box-shadow:2px 1px 8px #00000026}.avue-dialog{overflow:visible}.avue-dialog .el-dialog{position:absolute;top:0;left:50%;display:flex;flex-direction:column;max-width:calc(100% - 100px);min-height:180px;max-height:calc(100% - 200px);border-radius:2px;transform:translate(-50%)}.avue-dialog .el-dialog__header{min-height:20px;padding:16px 24px;border-bottom:1px solid #f0f0f0}.avue-dialog .el-dialog__title,.avue-dialog .el-drawer__header{color:#000000d9;font-weight:500;word-wrap:break-word}.avue-dialog .el-dialog__body{margin-bottom:50px;padding:30px 20px 20px}.avue-dialog .el-dialog .el-dialog__body{flex:1;overflow:hidden;overflow-y:auto}.avue-dialog .el-drawer{position:absolute;top:0;right:0;display:flex;flex-direction:column}.avue-dialog .el-drawer__header{min-height:20px;margin:0;padding:16px 10px 16px 24px;border-bottom:1px solid #f0f0f0}.avue-dialog .el-drawer,.avue-dialog .el-drawer__body{flex:1;overflow:auto}.avue-dialog__footer{position:absolute;bottom:0;left:0;display:block;box-sizing:border-box;width:100%;padding:10px 16px;text-align:right;background-color:#fff;border-top:1px solid #f0f0f0}.avue-dialog__footer--left{text-align:left}.avue-dialog__footer--center{text-align:center}.avue-dialog--fullscreen .el-dialog{top:0;left:0;width:100%!important;max-width:100%;height:100%;max-height:100%;transform:translate(0)}.avue-dialog--top .el-dialog{top:15%}.avue-dialog--none .el-dialog__body{margin-bottom:0}.avue-opacity{opacity:0}.avue-opacity--active{opacity:1}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}.avue-crud .el-select,.avue-crud .el-date-editor.el-input,.avue-crud .el-date-editor.el-input__inner,.avue-crud .el-cascader,.avue-crud .avue-input-number,.avue-form .el-select,.avue-form .el-date-editor.el-input,.avue-form .el-date-editor.el-input__inner,.avue-form .el-cascader,.avue-form .avue-input-number{width:100%!important}.avue-crud .el-form-item.el-form-item--small .el-input-group--append .el-input__inner,.avue-form .el-form-item.el-form-item--small .el-input-group--append .el-input__inner{height:33px;line-height:33px}.avue-crud .el-input-number .el-input__inner,.avue-form .el-input-number .el-input__inner{text-align:left}.avue-crud .avue-crud__left .el-button+.el-button,.avue-crud .avue-crud__right .el-button+.el-button,.avue-form .avue-crud__left .el-button+.el-button,.avue-form .avue-crud__right .el-button+.el-button{margin-left:0}.avue-crud .avue-crud__left .el-button,.avue-crud .avue-crud__right .el-button,.avue-form .avue-crud__left .el-button,.avue-form .avue-crud__right .el-button{margin-right:5px;margin-bottom:0}.avue-crud .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,.avue-form .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:#409eff}.avue-crud .el-tree-node__label,.avue-form .el-tree-node__label{margin-left:8px}.avue-crud .el-input__inner,.avue-form .el-input__inner{height:38px;line-height:38px}.avue-crud .el-range-editor--small,.avue-form .el-range-editor--small{height:32px;line-height:32px}.avue-crud .el-range-editor--mini,.avue-form .el-range-editor--mini{height:28px;line-height:28px}.avue-crud .el-input--small input,.avue-form .el-input--small input{height:32px;line-height:32px}.avue-crud .el-input--mini input,.avue-form .el-input--mini input{height:28px;line-height:28px}.avue-crud .el-table--medium td,.avue-form .el-table--medium td{padding:7px 0!important}.avue-crud .el-tooltip__popper,.avue-form .el-tooltip__popper{max-width:60%}.avue-crud .el-dropdown-menu__item,.avue-form .el-dropdown-menu__item{line-height:25px}.avue-crud .el-table-filter__list,.avue-form .el-table-filter__list{width:100%;height:300px;overflow-y:auto}@media screen and (max-width: 992px){.el-dialog__footer{display:flex;justify-content:center}.el-button+.el-button{margin-left:0}.el-upload-list--picture-card .el-upload-list__item,.avue-upload__avatar,.el-upload--picture-card,.avue-upload__icon{width:100px;height:100px;line-height:100px}.avue-tip{display:none}.avue-crud__menu{display:block!important}.avue-crud .el-form-item{width:100%}.avue-crud .el-form-item__label{flex:1}.avue-crud .el-form-item__content{flex:5}.avue-crud__searchMenu{text-align:center}.avue-crud__title{display:block!important}.avue-crud__title p{margin-bottom:20px}.avue-crud__title .avue-date__group{justify-content:center}.avue-crud__title .avue-date__date{display:none}.avue-crud__title .avue-date__radio{width:100%}.avue-crud__title .avue-date__radio .el-radio-group{display:flex}.avue-crud__title .avue-date__radio .el-radio-group label,.avue-crud__title .avue-date__radio .el-radio-group .el-radio-button__inner{width:100%}.avue-crud__title .avue-date__radio .el-radio-button:last-child .el-radio-button__inner{border-right:1px solid #dcdfe6;border-radius:0 4px 4px 0}}
+.border-bottom{border-bottom:1px solid #d7dae0}.clear-fix:after{display:block;clear:both;height:0;visibility:hidden;content:" "}.flex-row{display:flex;flex-direction:row;flex-shrink:0}.flex-row.vertical-center{align-items:center}.flex-row.vertical-start{align-items:flex-start}.flex-row.horizon-center{justify-content:center}.text-center{text-align:center}.flex-column{display:flex;flex-direction:column}.flex-column.vertical-center{justify-content:center}.flex-column.horizon-center{align-items:center}.flex-item,.flex-item-relative{flex:1 1 auto}.flex-item-relative{position:relative}.flex-item-relative .flex-content{position:absolute;inset:0}.flex-not-shrink{flex-shrink:0}body{font-family:Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol}*{outline:none}.avue-canvas{display:none}.avue-ghost{background:#c8ebfb;opacity:.5}.avue--disabled{color:#ccc}.avue--detail .hover-row td{background-color:#fff!important}.avue--detail .avue-group__header{padding-left:10px;border-bottom:1px solid #eee}.avue--detail .el-collapse-item__header{margin-bottom:0}.avue--detail .el-input.is-disabled .el-input__inner,.avue--detail .el-textarea.is-disabled .el-textarea__inner,.avue--detail .el-range-editor.is-disabled,.avue--detail .el-range-editor.is-disabled input{padding-left:0;color:#606266;background-color:#fff}.avue--detail .el-input-number__decrease,.avue--detail .el-input-number__increase{display:none}.avue--detail .el-input-group__append,.avue--detail .el-input-group__prepend{background-color:transparent;border:none}.avue--detail .el-input__suffix,.avue--detail .el-input__prefix{display:none}.avue--detail .el-input__inner,.avue--detail .el-textarea__inner{border:none}.avue--detail .el-input__inner::placeholder,.avue--detail .el-textarea__inner::placeholder{color:transparent!important}.avue--detail .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#409eff;border-color:#409eff}.avue--detail .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{border-color:#fff}.avue--detail .el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:#409eff;border-color:#409eff}.avue--detail .el-radio__input.is-disabled.is-checked .el-radio__inner:after{background-color:#fff}.avue--detail .el-checkbox__input.is-disabled+span.el-checkbox__label,.avue--detail .el-radio__input.is-disabled+span.el-radio__label{color:#606266}.avue--detail .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,.avue--detail .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{display:none}.avue--detail .el-row{border-top:1px solid #ebeef5;border-left:1px solid #ebeef5}.avue--detail .el-col{margin:0!important;padding:0!important;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.avue--detail .el-form-item--medium.el-form-item,.avue--detail .el-form-item--mini.el-form-item,.avue--detail .el-form-item--small.el-form-item{margin:0;background:#fafafa}.avue--detail .el-form-item__label,.avue--detail .el-form-item__content{padding:2px 0}.avue--detail .el-form-item__label{box-sizing:border-box;padding-right:20px;color:#909399}.avue--detail .el-tag{margin-right:6px!important;margin-left:0!important}.avue--detail .avue-crud .el-form-item__content{border:none}.avue--detail .el-form-item__content{box-sizing:border-box;padding-left:20px;background-color:#fff;border-left:1px solid #ebeef5}.avue--detail__column .el-form-item{background-color:#fff}.avue--detail__column .el-form-item__label{padding-right:12px}.avue--detail__column .el-form-item__content{padding-left:0;border-left:none}.avue-grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(0,0,0,.1) 1px,transparent 0),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 0);background-size:20px 20px,20px 20px}.avue-mask{position:fixed;inset:0;z-index:1000;height:100%;background-color:#37373799}.avue--card{border-radius:5px;box-shadow:2px 1px 8px #00000026}.avue-dialog{overflow:visible}.avue-dialog .el-dialog{position:absolute;top:0;left:50%;display:flex;flex-direction:column;max-width:calc(100% - 100px);min-height:180px;max-height:calc(100% - 200px);border-radius:2px;transform:translate(-50%)}.avue-dialog .el-dialog__header{min-height:20px;padding:16px 24px;border-bottom:1px solid #f0f0f0}.avue-dialog .el-dialog__title,.avue-dialog .el-drawer__header{color:#000000d9;font-weight:500;word-wrap:break-word}.avue-dialog .el-dialog__body{margin-bottom:50px;padding:30px 20px 20px}.avue-dialog .el-dialog .el-dialog__body{flex:1;overflow:hidden;overflow-y:auto}.avue-dialog .el-drawer{position:absolute;top:0;right:0;display:flex;flex-direction:column}.avue-dialog .el-drawer__header{min-height:20px;margin:0;padding:16px 10px 16px 24px;border-bottom:1px solid #f0f0f0}.avue-dialog .el-drawer,.avue-dialog .el-drawer__body{flex:1;overflow:auto}.avue-dialog__footer{position:absolute;bottom:0;left:0;display:block;box-sizing:border-box;width:100%;padding:10px 16px;text-align:right;background-color:#fff;border-top:1px solid #f0f0f0}.avue-dialog__footer--left{text-align:left}.avue-dialog__footer--center{text-align:center}.avue-dialog--fullscreen .el-dialog{top:0;left:0;width:100%!important;max-width:100%;height:100%;max-height:100%;transform:translate(0)}.avue-dialog--top .el-dialog{top:15%}.avue-dialog--none .el-dialog__body{margin-bottom:0}.avue-opacity{opacity:0}.avue-opacity--active{opacity:1}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}.flow-background-image{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+) repeat}.avue-crud .el-select,.avue-crud .el-date-editor.el-input,.avue-crud .el-date-editor.el-input__inner,.avue-crud .el-cascader,.avue-crud .avue-input-number,.avue-form .el-select,.avue-form .el-date-editor.el-input,.avue-form .el-date-editor.el-input__inner,.avue-form .el-cascader,.avue-form .avue-input-number{width:100%!important}.avue-crud .el-form-item.el-form-item--small .el-input-group--append .el-input__inner,.avue-form .el-form-item.el-form-item--small .el-input-group--append .el-input__inner{height:33px;line-height:33px}.avue-crud .el-input-number .el-input__inner,.avue-form .el-input-number .el-input__inner{text-align:left}.avue-crud .avue-crud__left .el-button+.el-button,.avue-crud .avue-crud__right .el-button+.el-button,.avue-form .avue-crud__left .el-button+.el-button,.avue-form .avue-crud__right .el-button+.el-button{margin-left:0}.avue-crud .avue-crud__left .el-button,.avue-crud .avue-crud__right .el-button,.avue-form .avue-crud__left .el-button,.avue-form .avue-crud__right .el-button{margin-right:5px;margin-bottom:0}.avue-crud .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,.avue-form .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:#409eff}.avue-crud .el-tree-node__label,.avue-form .el-tree-node__label{margin-left:8px}.avue-crud .el-input__inner,.avue-form .el-input__inner{height:38px;line-height:38px}.avue-crud .el-range-editor--small,.avue-form .el-range-editor--small{height:32px;line-height:32px}.avue-crud .el-range-editor--mini,.avue-form .el-range-editor--mini{height:28px;line-height:28px}.avue-crud .el-input--small input,.avue-form .el-input--small input{height:32px;line-height:32px}.avue-crud .el-input--mini input,.avue-form .el-input--mini input{height:28px;line-height:28px}.avue-crud .el-table--medium td,.avue-form .el-table--medium td{padding:7px 0!important}.avue-crud .el-tooltip__popper,.avue-form .el-tooltip__popper{max-width:60%}.avue-crud .el-dropdown-menu__item,.avue-form .el-dropdown-menu__item{line-height:25px}.avue-crud .el-table-filter__list,.avue-form .el-table-filter__list{width:100%;height:300px;overflow-y:auto}@media screen and (max-width: 992px){.el-dialog__footer{display:flex;justify-content:center}.el-button+.el-button{margin-left:0}.el-upload-list--picture-card .el-upload-list__item,.avue-upload__avatar,.el-upload--picture-card,.avue-upload__icon{width:100px;height:100px;line-height:100px}.avue-tip{display:none}.avue-crud__menu{display:block!important}.avue-crud .el-form-item{width:100%}.avue-crud .el-form-item__label{flex:1}.avue-crud .el-form-item__content{flex:5}.avue-crud__searchMenu{text-align:center}.avue-crud__title{display:block!important}.avue-crud__title p{margin-bottom:20px}.avue-crud__title .avue-date__group{justify-content:center}.avue-crud__title .avue-date__date{display:none}.avue-crud__title .avue-date__radio{width:100%}.avue-crud__title .avue-date__radio .el-radio-group{display:flex}.avue-crud__title .avue-date__radio .el-radio-group label,.avue-crud__title .avue-date__radio .el-radio-group .el-radio-button__inner{width:100%}.avue-crud__title .avue-date__radio .el-radio-button:last-child .el-radio-button__inner{border-right:1px solid #dcdfe6;border-radius:0 4px 4px 0}}

package/flow-designer/index.mjs

@@ -9744,7 +9744,7 @@ var Mi = function() {
     staticClass: "my-process-designer__container"
   }, [t("div", {
     ref: "bpmn-canvas",
-    staticClass: "my-process-designer__canvas"
+    staticClass: "my-process-designer__canvas flow-background-image"
   })]), t("ElementDialog", {
     attrs: {
       title: "预览",

package/flow-designer/style.css

@@ -1 +1 @@
-.process-panel__container{box-sizing:border-box;max-height:100%;padding:0 8px;overflow-y:auto;overflow-x:hidden;border-left:1px solid #eee;box-shadow:0 0 8px #ccc;transition:width .25s ease-in}.process-panel__container.hide:hover{background-color:#e8f4ff}.process-panel__container.show{overflow-x:auto}.process-panel__container .open-properties-handel{font-size:20px;cursor:pointer;text-align:center;color:#606266}.process-panel__container .open-properties-handel:hover{color:#1682e6}.process-panel__container .element-property{display:flex;align-items:flex-start;width:100%;margin:8px 0}.process-panel__container .element-property .element-property__label{display:block;box-sizing:border-box;width:90px;padding-right:12px;overflow:hidden;font-size:14px;line-height:32px;text-align:right}.process-panel__container .element-property .element-property__value{flex:1;line-height:32px}.process-panel__container .element-property .el-form-item{width:100%;margin-bottom:0;padding-bottom:18px}.process-panel__container .list-property{flex-direction:column}.process-panel__container .list-property .element-listener-item{display:inline-grid;grid-column-gap:8px;grid-template-columns:16px auto 32px 32px;width:100%}.process-panel__container .list-property .element-listener-item+.element-listener-item{margin-top:8px}.process-panel__container .el-collapse-item__content{padding-bottom:0}.process-panel__container .el-input.is-disabled .el-input__inner{color:#999}.process-panel__container .el-form-item.el-form-item--mini{margin-bottom:0}.process-panel__container .el-form-item.el-form-item--mini+.el-form-item{margin-top:16px}.panel-tab__title{padding:0 8px;font-weight:600;font-size:1.1em;line-height:1.2em}.panel-tab__title i{margin-right:8px;font-size:1.2em}.panel-tab__content{box-sizing:border-box;width:100%;padding:8px 16px;border-top:1px solid #eee}.panel-tab__content .panel-tab__content--title{display:flex;justify-content:space-between;padding-bottom:8px}.panel-tab__content .panel-tab__content--title span{flex:1;text-align:left}.listener-filed__title{display:inline-flex;align-items:center;justify-content:space-between;width:100%;margin-top:0}.listener-filed__title span{width:200px;font-size:14px;text-align:left}.listener-filed__title i{margin-right:8px}.element-drawer__button{display:inline-flex;justify-content:space-around;width:100%;margin-top:8px}.element-drawer__button>.el-button{width:100%}.flow-drawer .el-drawer__body{padding:10px}.my-process-designer{display:flex;flex:1;flex-direction:column;box-sizing:border-box;width:100%;height:100%}.my-process-designer .bts-toggle-mode{display:none}.my-process-designer .djs-palette.open .djs-palette-entries div[class^=bpmn-icon-]:before,.my-process-designer .djs-palette.open .djs-palette-entries div[class*=bpmn-icon-]:before{line-height:unset}.my-process-designer .djs-palette.open .djs-palette-entries div.entry{position:relative}.my-process-designer .djs-palette.open .djs-palette-entries div.entry:hover:after{position:absolute;top:0;right:-10px;bottom:0;z-index:100;display:inline-block;box-sizing:border-box;width:max-content;padding:0 16px;overflow:hidden;font-size:.5em;font-variant:normal;text-transform:none;text-decoration:inherit;vertical-align:text-bottom;background:#fafafa;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 6px #eee;transform:translate(100%);content:attr(title)}.my-process-designer .my-process-designer__header{width:100%;min-height:36px}.my-process-designer .my-process-designer__header .el-button{text-align:center}.my-process-designer .my-process-designer__header .el-button-group{margin:4px}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button{width:100%;padding-right:8px;padding-left:8px;text-align:left}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button:hover{color:#fff;background:rgba(64,158,255,.8)}.my-process-designer .my-process-designer__header .align{position:relative}.my-process-designer .my-process-designer__header .align i:after{position:absolute;transform:rotate(90deg) translate(200%,60%);content:"|"}.my-process-designer .my-process-designer__header .align.align-left i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-right i{transform:rotate(-90deg)}.my-process-designer .my-process-designer__header .align.align-top i{transform:rotate(180deg)}.my-process-designer .my-process-designer__header .align.align-bottom i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-center i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-center i:after{transform:rotate(90deg) translateY(60%)}.my-process-designer .my-process-designer__header .align.align-middle i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-middle i:after{transform:rotate(90deg) translateY(60%)}.my-process-designer .my-process-designer__container{display:inline-flex;flex:1;width:100%}.my-process-designer .my-process-designer__container .my-process-designer__canvas{position:relative;flex:1;height:100%;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+) repeat!important}.my-process-designer .my-process-designer__container .my-process-designer__canvas div.toggle-mode{display:none}.my-process-designer .my-process-designer__container .my-process-designer__property-panel{z-index:10;height:100%;overflow:scroll;overflow-y:auto}.my-process-designer .my-process-designer__container .my-process-designer__property-panel *{box-sizing:border-box}.flow-designer{display:flex;width:100%;height:100%;background-color:#fff}
+.process-panel__container{box-sizing:border-box;max-height:100%;padding:0 8px;overflow-y:auto;overflow-x:hidden;border-left:1px solid #eee;box-shadow:0 0 8px #ccc;transition:width .25s ease-in}.process-panel__container.hide:hover{background-color:#e8f4ff}.process-panel__container.show{overflow-x:auto}.process-panel__container .open-properties-handel{font-size:20px;cursor:pointer;text-align:center;color:#606266}.process-panel__container .open-properties-handel:hover{color:#1682e6}.process-panel__container .element-property{display:flex;align-items:flex-start;width:100%;margin:8px 0}.process-panel__container .element-property .element-property__label{display:block;box-sizing:border-box;width:90px;padding-right:12px;overflow:hidden;font-size:14px;line-height:32px;text-align:right}.process-panel__container .element-property .element-property__value{flex:1;line-height:32px}.process-panel__container .element-property .el-form-item{width:100%;margin-bottom:0;padding-bottom:18px}.process-panel__container .list-property{flex-direction:column}.process-panel__container .list-property .element-listener-item{display:inline-grid;grid-column-gap:8px;grid-template-columns:16px auto 32px 32px;width:100%}.process-panel__container .list-property .element-listener-item+.element-listener-item{margin-top:8px}.process-panel__container .el-collapse-item__content{padding-bottom:0}.process-panel__container .el-input.is-disabled .el-input__inner{color:#999}.process-panel__container .el-form-item.el-form-item--mini{margin-bottom:0}.process-panel__container .el-form-item.el-form-item--mini+.el-form-item{margin-top:16px}.panel-tab__title{padding:0 8px;font-weight:600;font-size:1.1em;line-height:1.2em}.panel-tab__title i{margin-right:8px;font-size:1.2em}.panel-tab__content{box-sizing:border-box;width:100%;padding:8px 16px;border-top:1px solid #eee}.panel-tab__content .panel-tab__content--title{display:flex;justify-content:space-between;padding-bottom:8px}.panel-tab__content .panel-tab__content--title span{flex:1;text-align:left}.listener-filed__title{display:inline-flex;align-items:center;justify-content:space-between;width:100%;margin-top:0}.listener-filed__title span{width:200px;font-size:14px;text-align:left}.listener-filed__title i{margin-right:8px}.element-drawer__button{display:inline-flex;justify-content:space-around;width:100%;margin-top:8px}.element-drawer__button>.el-button{width:100%}.flow-drawer .el-drawer__body{padding:10px}.my-process-designer{display:flex;flex:1;flex-direction:column;box-sizing:border-box;width:100%;height:100%}.my-process-designer .bts-toggle-mode{display:none}.my-process-designer .djs-palette.open .djs-palette-entries div[class^=bpmn-icon-]:before,.my-process-designer .djs-palette.open .djs-palette-entries div[class*=bpmn-icon-]:before{line-height:unset}.my-process-designer .djs-palette.open .djs-palette-entries div.entry{position:relative}.my-process-designer .djs-palette.open .djs-palette-entries div.entry:hover:after{position:absolute;top:0;right:-10px;bottom:0;z-index:100;display:inline-block;box-sizing:border-box;width:max-content;padding:0 16px;overflow:hidden;font-size:.5em;font-variant:normal;text-transform:none;text-decoration:inherit;vertical-align:text-bottom;background:#fafafa;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 6px #eee;transform:translate(100%);content:attr(title)}.my-process-designer .my-process-designer__header{width:100%;min-height:36px}.my-process-designer .my-process-designer__header .el-button{text-align:center}.my-process-designer .my-process-designer__header .el-button-group{margin:4px}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button{width:100%;padding-right:8px;padding-left:8px;text-align:left}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button:hover{color:#fff;background:rgba(64,158,255,.8)}.my-process-designer .my-process-designer__header .align{position:relative}.my-process-designer .my-process-designer__header .align i:after{position:absolute;transform:rotate(90deg) translate(200%,60%);content:"|"}.my-process-designer .my-process-designer__header .align.align-left i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-right i{transform:rotate(-90deg)}.my-process-designer .my-process-designer__header .align.align-top i{transform:rotate(180deg)}.my-process-designer .my-process-designer__header .align.align-bottom i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-center i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-center i:after{transform:rotate(90deg) translateY(60%)}.my-process-designer .my-process-designer__header .align.align-middle i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-middle i:after{transform:rotate(90deg) translateY(60%)}.my-process-designer .my-process-designer__container{display:inline-flex;flex:1;width:100%}.my-process-designer .my-process-designer__container .my-process-designer__canvas{position:relative;flex:1;height:100%}.my-process-designer .my-process-designer__container .my-process-designer__canvas div.toggle-mode{display:none}.my-process-designer .my-process-designer__container .my-process-designer__property-panel{z-index:10;height:100%;overflow:scroll;overflow-y:auto}.my-process-designer .my-process-designer__container .my-process-designer__property-panel *{box-sizing:border-box}.flow-designer{display:flex;width:100%;height:100%;background-color:#fff}

package/flow-viewer/index.mjs

@@ -1,72 +1,61 @@
-var _ = Object.defineProperty, d = Object.defineProperties;
-var v = Object.getOwnPropertyDescriptors;
-var p = Object.getOwnPropertySymbols;
-var y = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
-var c = (e, t, i) => t in e ? _(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, u = (e, t) => {
-  for (var i in t || (t = {}))
-    y.call(t, i) && c(e, i, t[i]);
-  if (p)
-    for (var i of p(t))
-      b.call(t, i) && c(e, i, t[i]);
-  return e;
-}, g = (e, t) => d(e, v(t));
-var f = (e, t, i) => new Promise((n, o) => {
-  var s = (r) => {
+var k = Object.defineProperty, b = Object.defineProperties;
+var M = Object.getOwnPropertyDescriptors;
+var f = Object.getOwnPropertySymbols;
+var x = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
+var u = (t, i, e) => i in t ? k(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e, w = (t, i) => {
+  for (var e in i || (i = {}))
+    x.call(i, e) && u(t, e, i[e]);
+  if (f)
+    for (var e of f(i))
+      V.call(i, e) && u(t, e, i[e]);
+  return t;
+}, y = (t, i) => b(t, M(i));
+var v = (t, i, e) => new Promise((s, n) => {
+  var r = (o) => {
     try {
-      h(i.next(r));
-    } catch (m) {
-      o(m);
+      a(e.next(o));
+    } catch (h) {
+      n(h);
     }
-  }, l = (r) => {
+  }, l = (o) => {
     try {
-      h(i.throw(r));
-    } catch (m) {
-      o(m);
+      a(e.throw(o));
+    } catch (h) {
+      n(h);
     }
-  }, h = (r) => r.done ? n(r.value) : Promise.resolve(r.value).then(s, l);
-  h((i = i.apply(e, t)).next());
+  }, a = (o) => o.done ? s(o.value) : Promise.resolve(o.value).then(r, l);
+  a((e = e.apply(t, i)).next());
 });
-import V from "bpmn-js/lib/NavigatedViewer";
-import a from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
-import x from "@web-utils/component/easy-popup";
+import E from "bpmn-js/lib/NavigatedViewer";
+import d from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
+import { create as c, attr as m, append as p } from "tiny-svg";
+import { query as S } from "min-dom";
+import $ from "@web-utils/component/easy-popup";
 import "@web-utils/component/easy-popup/style.css";
 import { n as F } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
-var M = function() {
-  var e = this, t = e.$createElement, i = e._self._c || t;
-  return i("div", {
+var B = function() {
+  var t = this, i = t.$createElement, e = t._self._c || i;
+  return e("div", {
     ref: "container",
-    staticClass: "flow-viewer"
-  }, [i("EasyPopup", {
+    staticClass: "flow-viewer flow-background-image",
+    style: {
+      "--highlight-color": t.highlightColor
+    }
+  }, [e("EasyPopup", {
     ref: "popup"
-  }, [e._t("default", function() {
-    return [e._v(" " + e._s(e.element) + " ")];
+  }, [t._t("default", function() {
+    return [t._v(" " + t._s(t.element) + " ")];
   }, {
-    element: e.element
+    element: t.element
   })], 2)], 1);
-}, $ = [];
-const S = a.prototype._handleWheel;
-a.prototype._handleWheel = function(e) {
-  const { target: t, deltaMode: i, clientX: n, clientY: o, deltaX: s, deltaY: l } = e;
-  S.call(this, {
-    target: t,
-    deltaMode: i,
-    clientX: n,
-    clientY: o,
-    deltaX: s,
-    deltaY: l,
-    preventDefault() {
-      e.preventDefault();
-    },
-    ctrlKey: !0
-  });
-};
-const A = {
+}, W = [];
+const g = d.prototype._handleWheel, X = {
   __init__: ["zoomScroll"],
-  zoomScroll: ["type", a]
-}, k = {
+  zoomScroll: ["type", d]
+}, C = {
   name: "FlowViewer",
   components: {
-    EasyPopup: x
+    EasyPopup: $
   },
   props: {
     xml: {
@@ -83,7 +72,12 @@ const A = {
     flows: {
       type: Array,
       default: () => []
-    }
+    },
+    highlightColor: {
+      type: String,
+      default: "rgb(0 190 0 / 100%)"
+    },
+    ctrlKey: Boolean
   },
   data() {
     return {
@@ -91,63 +85,111 @@ const A = {
     };
   },
   watch: {
-    xml(e) {
-      var t;
-      (t = this.bpmnViewer) == null || t.importXML(e);
-    },
-    activities: "highlightActivity",
-    flows: "highlightFlow"
+    xml(t) {
+      var i;
+      (i = this.bpmnViewer) == null || i.importXML(t);
+    }
   },
   mounted() {
-    this.bpmnViewer = new V(g(u({}, this.options), {
+    d.prototype._handleWheel = this.ctrlKey ? g : function(t) {
+      const { target: i, deltaMode: e, clientX: s, clientY: n, deltaX: r, deltaY: l } = t;
+      g.call(this, {
+        target: i,
+        deltaMode: e,
+        clientX: s,
+        clientY: n,
+        deltaX: r,
+        deltaY: l,
+        preventDefault() {
+          t.preventDefault();
+        },
+        ctrlKey: !0
+      });
+    }, this.bpmnViewer = new E(y(w({}, this.options), {
       container: this.$refs.container,
-      additionalModules: [A]
-    })), this.bpmnViewer.on("import.done", (e) => {
-      const t = e.error, i = e.warnings;
-      t ? this.$emit("error", t) : this.$emit("shown", i), this.bpmnViewer.get("canvas").zoom("fit-viewport", "center"), this.canvas = this.bpmnViewer.get("canvas"), this.elementRegistry = this.bpmnViewer.get("elementRegistry");
-      const n = this.bpmnViewer.get("eventBus");
-      n.on("element.mousemove", (o) => f(this, null, function* () {
-        o.element.type === "bpmn:UserTask" && (this.$emit("node-mousemove", o.element), this.element = o.element, yield this.$nextTick(), this.$refs.popup.show(o.originalEvent));
-      })), n.on("element.out", () => {
+      additionalModules: [X]
+    })), this.bpmnViewer.on("import.done", (t) => {
+      const i = t.error, e = t.warnings;
+      i ? this.$emit("error", i) : this.$emit("shown", e), this.bpmnViewer.get("canvas").zoom("fit-viewport", "center"), this.canvas = this.bpmnViewer.get("canvas"), this.elementRegistry = this.bpmnViewer.get("elementRegistry");
+      const s = this.bpmnViewer.get("eventBus");
+      s.on("element.mousemove", (h) => v(this, null, function* () {
+        h.element.type === "bpmn:UserTask" && (this.$emit("node-mousemove", h.element), this.element = h.element, yield this.$nextTick(), this.$refs.popup.show(h.originalEvent));
+      })), s.on("element.out", () => {
         this.$refs.popup.hide(), this.element = {};
-      }), this.highlightFlow(this.flows), this.highlightActivity(this.activities);
-    }), this.bpmnViewer.importXML(this.xml);
+      }), this.highlightFlow(this.flows, this.activities);
+      const n = c("marker");
+      m(n, {
+        id: "sequenceflow-arrow-green",
+        viewBox: "0 0 20 20",
+        refX: "11",
+        refY: "10",
+        markerWidth: "10",
+        markerHeight: "10",
+        orient: "auto"
+      });
+      const r = c("path");
+      m(r, {
+        d: "M 1 5 L 11 10 L 1 15 Z",
+        style: "stroke-linecap: round; stroke-linejoin: round; stroke: var(--highlight-color); stroke-width: 1px; fill: var(--highlight-color);"
+      }), p(n, r);
+      const l = c("marker");
+      m(l, {
+        id: "conditional-default-flow-marker-green",
+        viewBox: "0 0 20 20",
+        refX: "0",
+        refY: "10",
+        markerWidth: "10",
+        markerHeight: "10",
+        orient: "auto"
+      });
+      const a = c("path");
+      m(a, {
+        d: "M 6 4 L 10 16",
+        style: "stroke-linecap: round; stroke-linejoin: round; stroke: var(--highlight-color); stroke-width: 2px; fill: var(--highlight-color);"
+      }), p(l, a);
+      const o = S("defs", this.$el);
+      p(o, n), p(o, l);
+    }), this.bpmnViewer.importXML(this.xml), this.$watch(() => ({
+      activities: this.activities,
+      flows: this.flows
+    }), ({ activities: t, flows: i }) => {
+      this.highlightFlow(i, t);
+    });
   },
   beforeDestroy() {
-    var e;
-    (e = this.bpmnViewer) == null || e.destroy();
+    var t;
+    d.prototype._handleWheel = g, (t = this.bpmnViewer) == null || t.destroy();
   },
   methods: {
-    highlight(e, t, i) {
-      this.elementRegistry.getAll().forEach((n) => {
-        n.type === t && (e.includes(n.id) ? this.canvas.addMarker(n, i) : this.canvas.removeMarker(n, i));
+    highlightFlow(t, i) {
+      this.elementRegistry.getAll().forEach((e) => {
+        if (["bpmn:StartEvent", "bpmn:UserTask", "bpmn:ExclusiveGateway", "bpmn:ParallelGateway ", "bpmn:EndEvent"].includes(e.type)) {
+          this.canvas.removeMarker(e, "highlight");
+          const s = e.incoming.map((r) => r.id), n = e.outgoing.map((r) => r.id);
+          e.type === "bpmn:StartEvent" && n.some((r) => t.includes(r)) && this.canvas.addMarker(e, "highlight"), e.type === "bpmn:EndEvent" && s.some((r) => t.includes(r)) && this.canvas.addMarker(e, "highlight"), !this.activities.includes(e.id) && s.some((r) => t.includes(r)) && n.some((r) => t.includes(r)) && this.canvas.addMarker(e, "highlight");
+        }
+        e.type === "bpmn:SequenceFlow" && (t.includes(e.id) ? this.canvas.addMarker(e, "highlight-line") : this.canvas.removeMarker(e, "highlight-line")), e.type === "bpmn:UserTask" && (i.includes(e.id) ? this.canvas.addMarker(e, "highlight-current") : this.canvas.removeMarker(e, "highlight-current"));
       });
-    },
-    highlightFlow(e) {
-      this.highlight(e, "bpmn:SequenceFlow", "highlight-line");
-    },
-    highlightActivity(e) {
-      this.highlight(e, "bpmn:UserTask", "highlight");
     }
   }
-}, w = {};
-var E = /* @__PURE__ */ F(
-  k,
-  M,
-  $,
+}, _ = {};
+var L = /* @__PURE__ */ F(
+  C,
+  B,
+  W,
   !1,
-  R,
+  j,
   null,
   null,
   null
 );
-function R(e) {
-  for (let t in w)
-    this[t] = w[t];
+function j(t) {
+  for (let i in _)
+    this[i] = _[i];
 }
-const q = /* @__PURE__ */ function() {
-  return E.exports;
+const P = /* @__PURE__ */ function() {
+  return L.exports;
 }();
 export {
-  q as default
+  P as default
 };

package/flow-viewer/style.css

@@ -1 +1 @@
-.flow-viewer{width:100%;height:400px}.flow-viewer .highlight:not(.djs-connection) .djs-visual>:nth-child(1){fill:#fbe9d1!important}.flow-viewer .highlight g.djs-visual>:nth-child(1){stroke:#d67e7d!important}.flow-viewer .highlight-line g.djs-visual>:nth-child(1){stroke:#00be00!important}
+.flow-viewer{width:100%;height:400px}.flow-viewer .highlight g.djs-visual rect,.flow-viewer .highlight g.djs-visual circle,.flow-viewer .highlight g.djs-visual polygon,.flow-viewer .highlight g.djs-visual path{stroke:var(--highlight-color)!important}.flow-viewer .highlight g.djs-visual polygon+path{fill:var(--highlight-color)!important}@keyframes dashoffset{to{stroke-dashoffset:0}}.flow-viewer .highlight-current g.djs-visual rect{fill:#fbe9d1!important;stroke:#d67e7d!important;animation:dashoffset 2s linear infinite;stroke-dashoffset:80;stroke-dasharray:8}.flow-viewer .highlight-line g.djs-visual path{stroke:var(--highlight-color)!important;stroke-width:2px!important;marker-end:url(#sequenceflow-arrow-green)!important}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-utils/component",
   "description": "Web Components",
-  "version": "2.9.7",
+  "version": "2.9.9",
   "author": "Simple",
   "license": "MIT",
   "type": "module",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@web-utils/component",
-  "version": "2.9.7",
+  "version": "2.9.9",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2611,6 +2611,22 @@
                 "type": "array"
               },
               "default": "[]"
+            },
+            {
+              "name": "highlightColor",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'rgb(0 190 0 / 100%)'"
+            },
+            {
+              "name": "ctrlKey",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": ""
             }
           ],
           "events": [