@ctzy-web-client/plugin-component-vue 1.0.0

package/style/panel-tabs.scss

@@ -0,0 +1,60 @@
+@use './common/var' as *;
+@use './mixins/mixins' as *;
+
+@include b(panel-tabs) {
+  @include set-component-css-var('panel-tabs', $panel-tabs);
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .el-tabs__header {
+    height: auto;
+    margin-bottom: 0;
+    border-bottom: none;
+    font-size: 16px;
+
+    .el-tabs__nav {
+      border: none;
+
+      .el-tabs__item {
+        position: relative;
+        $item-spacing: getCssVar('panel-tabs', 'item-spacing');
+
+        margin-bottom: $item-spacing;
+        border: none;
+        background-color: getCssVar('fill-color', 'blank');
+        border-radius: getCssVar('border-radius', 'base');
+        min-width: 120px;
+        text-align: center;;
+
+        + .el-tabs__item {
+          margin-left: $item-spacing;
+        }
+
+        &.is-active {
+          border-bottom-left-radius: 0%;
+          border-bottom-right-radius: 0%;
+
+          &::after {
+            content: '';
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            height: $item-spacing;
+            background: getCssVar('fill-color', 'blank');
+          }
+        }
+      }
+    }
+  }
+  .el-tabs__content {
+    flex: 1;
+    height: 0;
+  }
+}
+
+@include b(panel-tabs-item) {
+  height: 100%;
+}

package/style/panel.scss

@@ -0,0 +1,110 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@include b(panel) {
+  @include set-component-css-var('panel', $panel);
+  $border-color: getCssVar('panel', 'border-color');
+
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: getCssVar('panel', 'bg-color');
+  border-radius: getCssVar('border-radius-base');
+
+  @include e(header) {
+    $header-line-height: getCssVar('panel', 'header-line-height');
+
+    height: getCssVar('panel', 'header-height');
+    line-height: $header-line-height;
+    padding: getCssVar('panel', 'header-padding');
+    border-bottom: 1px solid $border-color;
+
+    .el-breadcrumb {
+      line-height: $header-line-height;
+      font-size: 16px;
+
+      &__inner {
+        color: getCssVar('text-color', 'regular');
+
+        a,
+        &.is-link {
+          font-weight: 400;
+        }
+      }
+
+      &__item:last-child {
+        .el-breadcrumb__inner {
+          color: getCssVar('text-color', 'primary');
+        }
+      }
+    }
+  }
+
+  @include e(tools) {
+      border-bottom: 1px solid $border-color;
+      padding: getCssVar('panel', 'tools-padding') 0px getCssVar('panel', 'tools-padding') getCssVar('panel', 'tools-padding');
+  }
+
+  @include e(body) {
+    flex: 1;
+    height: 0;
+    padding: getCssVar('panel', 'body-padding');
+    box-sizing: border-box;
+  }
+
+  @include e(footer) {
+    padding: getCssVar('panel', 'footer-padding');
+    border-top: 1px solid $border-color;
+  }
+}
+
+// .#{$namespace}-panel {
+//   height: 100%;
+//   display: flex;
+//   flex-direction: column;
+//   background: white;
+//   border-radius: 4px;
+
+//   &__header {
+//     height: 48px;
+//     line-height: 48px;
+//     border-bottom: 1px solid rgba(234, 238, 239, 1);
+//     padding: 0 20px;
+
+//     .el-button {
+//       border-radius: 4px;
+//     }
+
+//     .el-breadcrumb {
+//       line-height: 48px;
+//       font-size: 16px;
+
+//       &__inner {
+//         color: $black-3;
+//       }
+
+//       &__item:last-child {
+//         .el-breadcrumb__inner {
+//           color: $black-1;
+//         }
+//       }
+//     }
+//   }
+
+//   &__body {
+//     flex: 1;
+//     height: 0;
+//     padding: 20px;
+//     box-sizing: border-box;
+//   }
+
+//   &__tools {
+//     padding: 20px;
+//     border-bottom: 1px solid rgba(234, 238, 239, 1);
+//   }
+
+//   &__footer {
+//     padding: 20px;
+//     border-top: 1px solid rgba(234, 238, 239, 1);
+//   }
+// }

package/style/pct-filter-panel.scss

@@ -0,0 +1,306 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@include b(pctfilterpanel) {
+  font-size: 14px;
+  line-height: 22px;
+  color: getCssVar('text-color', 'primary');
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: -15px;
+
+    @include e(input) {
+        flex: auto;
+        .el-input__wrapper {
+            padding: 3px 7px;
+            border-radius: 4px;
+        }
+    }
+  @include e(search) {
+      flex: 1;
+      height: 32px;
+      font-size: 14px;
+    margin: 16px 0px 0 0;
+    .el-input__wrapper {
+      padding: 3px 7px;
+      border-radius: 4px;
+    }
+  }
+
+  @include e(options) {
+    font-weight: 500;
+  }
+
+  @include e(reset) {
+      width: 60px;
+      height: 32px;
+    --el-button-size: 28px;
+    margin-top: 16px;
+      margin-right: 16px;
+      margin-left: 0px !important;
+      font-size: 14px;
+      line-height: 32px;
+  }
+    @include e(filterBut) {
+        height: 32px;
+        --el-button-size: 28px;
+        &:hover {
+            .bwa-pctfilterpanel-filter__plus::after, .bwa-pctfilterpanel-filter__plus::before {
+                background-color: #38C4FF;
+            }
+        }
+    }
+    @include e(title) {
+        color: #24515D;
+        font-size: 14px;
+        padding-right: 8px;
+        padding-top: 16px;
+        width: 86px;
+        text-align: left;
+    }
+}
+
+@include b(pctfilterpanel-item) {
+  display: inline-block;
+  position: relative;
+  padding-right: 20px;
+  margin-top: 16px;
+    box-sizing: border-box;
+
+  @include e(close) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: none;
+    font-size: 16px;
+    opacity: 0.6;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+
+    @include pseudo(hover) {
+      opacity: 1;
+    }
+  }
+
+  @include pseudo(hover) {
+    @include e(close) {
+      display: inline;
+    }
+  }
+
+    @include e(conditbox) {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+    @include e(title) {
+        color: #24515D;
+        font-size: 14px;
+        padding-right: 8px;
+        width: 86px;
+        text-align: left;
+    }
+
+    @include e(multiple) {
+        .el-input__wrapper {
+            padding: 3px 7px;
+            border-radius: 4px;
+        }
+    }
+    @include e(content) {
+        flex: auto;
+        height: 32px;
+        border: 1px solid #dcdcdc;
+        border-radius: 4px;
+        font-size: 14px;
+        line-height: 26px;
+        padding: 0 6px;
+        box-sizing: border-box;
+        color: #a8abb2;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    @include e(contentTop) {
+        margin: 4px 2px;
+    }
+    @include e(select) {
+        .el-input__wrapper {
+            border-radius: 4px;
+        }
+    }
+    @include e(clear) {
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        font-size: 14px;
+        color: #38C4FF;
+        border: 1px solid #EAEEEF;
+        border-radius: 4px;
+        margin: 0 2px;
+        cursor: pointer;
+    }
+
+    @include e(tag) {
+        margin-right: 6px;
+        height: 20px;
+        max-width: 80px;
+        .el-tag__content{
+            max-width: 100px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+    @include e(tag_box) {
+        max-width: 600px;
+        padding-top: 6px;
+    }
+    @include e(tag_details) {
+        margin-right: 6px;
+        height: 20px;
+        margin-bottom: 6px;
+    }
+
+    @include e(contentBox) {
+        flex: auto;
+        width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    @include e(options) {
+        flex: auto;
+    }
+    @include e(contentBox_placeholder) {
+        color: #b0c0c5;
+    }
+    @include e(contentBox_label) {
+        color: #547781;
+    }
+}
+
+@include b(pctfilterpanel-filter) {
+  @include e(plus) {
+    position: relative;
+    width: 10px;
+    height: 10px;
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      background-color: #24515D;
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotate(90deg);
+    }
+  }
+
+  @include e(label) {
+    margin-left: 4px;
+      font-size: 14px;
+      line-height: 32px;
+  }
+
+  @include e(option) {
+    .bwa-advance-option__content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  @include e(checkbox) {
+    display: inline-flex;
+    height: auto;
+    flex: 1;
+    width: 0;
+
+    .el-checkbox__label {
+      flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  @include e(title) {
+    font-size: 14px;
+    line-height: 20px;
+    color: getCssVar('text-color', 'regular');
+      width: 86px;
+      text-align: left;
+  }
+}
+
+
+@include b(pct-input) {
+    @include e(inputCon) {
+        display: flex;
+        align-items: center;
+    }
+    @include e(title) {
+        color: #24515D;
+        width: 86px;
+        text-align: left;
+        font-size: 14px;
+        padding-right: 8px;
+    }
+    @include e(search) {
+        flex: 1;
+        height: 32px;
+        font-size: 14px;
+        .el-input__wrapper {
+            padding: 3px 7px;
+            border-radius: 4px;
+        }
+    }
+}
+
+@include b(pct-daterange) {
+    @include e(cont) {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+    }
+    @include e(label) {
+        color: #24515D;
+        padding-right: 8px;
+        width: 86px;
+        text-align: left;
+    }
+
+    @include e(cont-r) {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        height: 32px;
+        border: 1px solid #dcdcdc;
+        border-radius: 4px;
+        font-size: 14px;
+        line-height: 26px;
+        padding: 0 6px;
+        box-sizing: border-box;
+        color: #a8abb2;
+        display: flex;
+        justify-content: space-between;
+    }
+    @include e(SortDown) {
+        transform: rotate(-90deg);
+    }
+    @include e(content) {
+        flex: auto;
+        width: 50px;
+        //text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

package/style/progress.scss

@@ -0,0 +1,122 @@
+@use 'sass:math';
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+// $height: 8px;
+
+@include b(progress) {
+  @include set-component-css-var('progress', $progress);
+  display: flex;
+  align-items: center;
+
+  @include e(inner) {
+    $height: getCssVar('progress', 'height');
+    height: $height;
+    display: flex;
+    flex: 1;
+    border-radius: calc($height / 2);
+    background-color: var(
+      #{getCssVarName('progress', 'color')},
+      getCssVar('progress', 'default-color')
+    );
+  }
+
+  @include e(percent) {
+    margin-left: getCssVarName('progress', 'percent-margin-left');
+    color: getCssVar('progress', 'percent-color');
+    width: var(
+      #{getCssVarName('progress', 'color')},
+      getCssVar('progress', 'default-percent-width')
+    );
+    text-align: center;
+  }
+}
+
+@include b(progress-info__wrapper) {
+  @include set-component-css-var('progress', $progress);
+  min-width: 100px;
+}
+@include b(progress-item) {
+  @include e(info) {
+    display: flex;
+    justify-content: space-between;
+    color: getCssVar('progress-info', 'item', 'text-color');
+    margin: getCssVar('progress-info', 'item', 'margin');
+  }
+
+  @include e(label) {
+    display: flex;
+    align-items: center;
+    &::before {
+      $size: getCssVar('progress-info-item', 'dot', 'size');
+      content: '';
+      display: inline-block;
+      margin-right: getCssVar('progress-info-item', 'dot', 'margin-right');
+      width: $size;
+      height: $size;
+      background-color: var(#{getCssVarName('progress-item', 'dot-color')});
+      border-radius: getCssVar('progress-info-item', 'dot', 'border-radius');
+    }
+  }
+}
+
+@include b('progress-item') {
+  border-radius: calc(getCssVar('progress', 'height') / 2);
+  background-color: var(#{getCssVarName('progress-item', 'color')});
+}
+
+// .#{$namespace}-progress {
+//   display: flex;
+//   align-items: center;
+
+//   &__inner {
+//     height: $height;
+//     display: flex;
+//     flex: 1;
+//     border-radius: math.div($height, 2);
+//     background-color: var(--bwa-progress-color, #eaeeef);
+
+//     @at-root {
+//       .#{$namespace}-progress-info__wrapper {
+//         min-width: 100px;
+//       }
+//     }
+//   }
+
+//   &__percent {
+//     margin-left: 8px;
+//     color: var.$black-3;
+//     width: var(--bwa-progress-label-width, 'auto');
+//     text-align: center;
+//   }
+// }
+
+// .#{$namespace}-progress-item {
+//   border-radius: math.div($height, 2);
+//   background-color: var(--bwa-progress-item-color);
+
+//   @at-root {
+//     &__info {
+//       display: flex;
+//       justify-content: space-between;
+
+//       color: var.$black-1;
+
+//       margin: 3px 0;
+//     }
+
+//     &__label {
+//       display: flex;
+//       align-items: center;
+//       &::before {
+//         content: '';
+//         display: inline-block;
+//         margin-right: 4px;
+//         width: 6px;
+//         height: 6px;
+//         background-color: var(--bwa-progress-item-dot-color);
+//         border-radius: 50%;
+//       }
+//     }
+//   }
+// }

package/style/rich-text.scss

@@ -0,0 +1,30 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@include b(rich-text) {
+  line-height: normal;
+
+  button.ql-at::after {
+    content: '@';
+  }
+
+  @include e(editor) {
+    min-height: 300px;
+
+    // .bwa-at-person {
+    //   color: var(--bwa-color-primary);
+    //   font-weight: bold;
+    // }
+  }
+
+  //   @at-root {
+  //     @include e(at-list) {
+  //       position: fixed;
+  //       left: var(--left);
+  //       top: var(--top);
+  //       width: 190px;
+  //       max-height: 240px;
+  //       background: red;
+  //     }
+  //   }
+}