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

package/style/contextmenu.scss

@@ -0,0 +1,58 @@
+@use './mixins/mixins' as *;
+@use './common/var' as *;
+
+@include b(contextmenu) {
+  position: relative;
+  padding: 5px 0;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base);
+  background: #ffffff;
+  box-shadow: var(--el-box-shadow-light);
+  cursor: pointer;
+
+  &-item {
+    font-size: 14px;
+    line-height: 22px;
+    padding: 5px 16px;
+
+    @include pseudo(hover) {
+      color: getCssVar('color-primary');
+      background: var(--el-color-primary-light-9);
+    }
+  }
+
+  @at-root {
+    @include e(wrapper) {
+      position: absolute;
+      z-index: 2000;
+      outline: none;
+    }
+  }
+}
+
+// .#{$namespace}-contextmenu {
+//   position: relative;
+//   padding: 5px 0;
+//   border: 1px solid var(--el-border-color-light);
+//   border-radius: var(--el-border-radius-base);
+//   background: #ffffff;
+//   box-shadow: var(--el-box-shadow-light);
+//   cursor: pointer;
+
+//   &-item {
+//     font-size: 14px;
+//     line-height: 22px;
+//     padding: 5px 16px;
+
+//     &:hover {
+//       color: var.$primaryColor;
+//       background: var(--el-color-primary-light-9);
+//     }
+//   }
+
+//   @at-root &__wrapper {
+//     position: absolute;
+//     z-index: 2000;
+//     outline: none;
+//   }
+// }

package/style/data-form.scss

@@ -0,0 +1,35 @@
+.bwa-upload {
+  width: 100%;
+
+  &-item {
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    &__info {
+      width: 0;
+      flex: 1;
+      margin-right: 10px;
+    }
+
+    &__file-name {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &__tools {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+
+      &-item {
+        cursor: pointer;
+
+        & + .bwa-upload-item__tools-item {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+}

package/style/data-table.scss

@@ -0,0 +1,81 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@include b(datatable) {
+  @include set-component-css-var('datatable', $datatable);
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
+  @include e(pagination) {
+    display: flex;
+    line-height: getCssVar('datatable', 'pagination-line-height');
+
+    &::before {
+      content: '';
+      position: relative;
+      flex: 1;
+    }
+
+    @include e(pagination) {
+      padding-top: getCssVar('datatable', 'pagination-padding-top');
+    }
+
+    @include e(pagination-info) {
+      margin-right: getCssVar('datatable', 'pagination-info-margin-right');
+      font-size: getCssVar('datatable', 'pagination-info-font-size');
+      color: getCssVar('datatable', 'pagination-info-text-color');
+      white-space: nowrap;
+    }
+  }
+
+  > .el-table {
+    flex: 1;
+    height: 0;
+  }
+
+  @include e(drag) {
+    text-align: center;
+    cursor: grab;
+  }
+
+  @include e(dragbar) {
+    position: fixed;
+    background-color: getCssVar('color', 'primary');
+    z-index: 99;
+  }
+}
+
+@include b(column-view) {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+// .#{$namespace}-datatable {
+//   height: 100%;
+//   width: 100%;
+
+//   &__pagination {
+//     display: flex;
+//     line-height: 36px;
+//     &-info {
+//       margin-right: 16px;
+//       font-size: 12px;
+//       color: #547781;
+//       white-space: nowrap;
+//     }
+
+//     &::before {
+//       content: '';
+//       position: relative;
+//       flex: 1;
+//     }
+//   }
+// }
+
+// .#{$namespace}-column-view {
+//   text-overflow: ellipsis;
+//   overflow: hidden;
+// }

package/style/datatable-settings.scss

@@ -0,0 +1,125 @@
+@use './mixins/mixins' as *;
+@use './common/var' as *;
+
+@include b(datatable-settings) {
+  @include set-component-css-var('datatable-settings', $datatable-settings);
+  padding: getCssVar('datatable-settings', 'padding');
+  width: getCssVar('datatable-settings', 'width');
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: getCssVar('datatable-settings', 'header-height');
+    margin: getCssVar('datatable-settings', 'header-margin');
+    font-size: 16px;
+    color: getCssVar('datatable-settings', 'header-text-color');
+    border-bottom: 1px solid getCssVar('datatable-settings', 'border-color');
+  }
+
+  @include e(tools) {
+    &-item {
+      font-size: 18px;
+      cursor: pointer;
+      color: getCssVar('datatable-settings', 'tools-text-color');
+    }
+  }
+
+  @include e(search) {
+    padding: getCssVar('datatable-settings', 'search-padding');
+    margin: getCssVar('datatable-settings', 'search-margin');
+    .el-input__wrapper {
+      border-radius: 4px;
+    }
+  }
+
+  @include e(main) {
+    margin: 0 11px;
+  }
+
+  @include e(field-item) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: getCssVar('datatable-settings', 'field-item-height');
+    color: getCssVar('datatable-settings', 'field-item-text-color');
+  }
+}
+
+@include b(datatable-settings-section) {
+  font-size: 14px;
+
+  @include e(header) {
+    color: getCssVar('datatable-settings', 'section-header-text-color');
+    margin: getCssVar('datatable-settings', 'section-header-margin');
+  }
+
+  @include e(empty) {
+    color: getCssVar('datatable-settings', 'section-header-empty-text-color');
+  }
+
+  & + .#{getCssVarName('datatable-settings', 'selection')} {
+    margin-top: getCssVar('datatable-settings', 'selection-spacing');
+  }
+}
+
+// .#{$namespace}-datatable-settings {
+//   padding: 5px 0;
+//   width: 220px;
+
+//   &__header {
+//     display: flex;
+//     justify-content: space-between;
+//     align-items: center;
+//     height: 40px;
+//     margin: 0 11px;
+//     font-size: 16px;
+//     color: var.$black-1;
+//     border-bottom: 1px solid #e6e6e6;
+//   }
+
+//   &__tools {
+//     &-item {
+//       font-size: 18px;
+//       cursor: pointer;
+//       color: var.$black-4;
+//     }
+//   }
+
+//   &__search {
+//     padding: 12px 0 8px;
+//     margin: 0 11px;
+
+//     .el-input__wrapper {
+//       border-radius: 4px;
+//     }
+//   }
+
+//   &__main {
+//     margin: 0 11px;
+//   }
+
+//   &-section {
+//     font-size: 14px;
+//     &__header {
+//       color: var.$black-3;
+//       margin: 8px 0;
+//     }
+
+//     &__empty {
+//       color: var.$black-3;
+//     }
+
+//     & + .#{$namespace}-datatable-settings-section {
+//       margin-top: 16px;
+//     }
+//   }
+
+//   &__field-item {
+//     display: flex;
+//     justify-content: space-between;
+//     align-items: center;
+//     height: 36px;
+//     color: var.$black-1;
+//   }
+// }

package/style/date-range.scss

@@ -0,0 +1,136 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@mixin daterange-active {
+  background-color: #f2f4f6;
+}
+
+@include b(daterange) {
+  display: inline-block;
+  padding: 3px 6px;
+  border-radius: 4px;
+  transition: 0.2s ease-out;
+  cursor: pointer;
+
+  @include when(active) {
+    @include daterange-active();
+
+    // .#{$namespace}-daterange__caret {
+    //   opacity: 1;
+    // }
+  }
+
+  @include pseudo(hover) {
+    @include daterange-active();
+  }
+
+  @include e(time) {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+
+    @include when(empty) {
+    //   color: getCssVar('text-color', 'placeholder');
+    }
+
+    @include pseudo(hover) {
+      .#{$namespace}-daterange__caret {
+        opacity: 1;
+      }
+    }
+  }
+  //   #e8f8ff
+  @include e(label) {
+    // opacity: 0.7;
+    margin-right: 6px;
+  }
+
+  @include e(content) {
+    margin-right: 4px;
+    font-weight: 500;
+  }
+
+  @include e(caret) {
+    color: getCssVar('text-color', 'primary');
+    // opacity: 0.2;
+    transition: 0.2s ease-out;
+  }
+
+  @include e(separator) {
+    display: inline-block;
+    margin: 0 6px;
+  }
+}
+
+@include b(datepicker) {
+  .el-picker-panel {
+    width: 322px;
+  }
+
+  @include e(sidebar) {
+    display: flex;
+    justify-content: flex-end;
+    padding: 6px 12px;
+  }
+}
+
+// .#{$namespace}-daterange {
+//   display: inline-block;
+//   padding: 3px 6px;
+//   border-radius: 4px;
+//   transition: 0.2s ease-out;
+
+//   &.is-active,
+//   &:hover {
+//     background-color: #f2f4f6;
+//   }
+
+//   &__time {
+//     display: inline-flex;
+//     align-items: center;
+//     cursor: pointer;
+
+//     &.is-empty {
+//       color: $black-4;
+//     }
+
+//     &:hover {
+//       .#{$namespace}-daterange__caret {
+//         opacity: 1;
+//       }
+//     }
+//   }
+
+//   &__label {
+//     opacity: 0.7;
+//     margin-right: 6px;
+//   }
+//   &__content {
+//     margin-right: 4px;
+//   }
+
+//   &__caret {
+//     color: $black-1;
+//     opacity: 0.2;
+//     transition: 0.2s ease-out;
+//     &.is-active {
+//       opacity: 1;
+//     }
+//   }
+
+//   &__separator {
+//     display: inline-block;
+//     margin: 0 6px;
+//   }
+// }
+
+// .#{$namespace}-datepicker {
+//   .el-picker-panel {
+//     width: 322px;
+//   }
+//   &__sidebar {
+//     display: flex;
+//     justify-content: flex-end;
+//     padding: 6px 12px;
+//   }
+// }

package/style/department-condition.scss

@@ -0,0 +1,39 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@include b(department-condition) {
+}
+
+@include b(department-node) {
+  &__content {
+    position: relative;
+    display: flex;
+  }
+
+  .bwa-advance-option {
+    padding-left: 22px;
+    flex: 1;
+  }
+
+  &__arrow-wrapper {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    left: 11px;
+    top: 50%;
+    padding: 5px;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+  }
+
+  &__arrow {
+    transform: rotate(0deg);
+    transform-origin: 50% 50%;
+    transition: transform 0.2s;
+
+    &.is-collpase {
+      transform: rotate(-90deg);
+    }
+  }
+}

package/style/drag-list.scss

@@ -0,0 +1,68 @@
+@use './mixins/mixins' as *;
+@use './common/var' as *;
+
+@include b(draglist) {
+  @include when(dragging) {
+    .#{$namespace}-dragitem {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+@include b(dragitem) {
+  display: flex;
+  align-items: center;
+  cursor: grab;
+
+  &[draggable-context-id='']:hover,
+  &[draggable-context-id='1'] {
+    background-color: #cde9f5;
+  }
+
+  &__drag-icon {
+    margin: 0 4px;
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &[draggable-context-id='0'] {
+    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
+  }
+}
+
+// .#{$namespace}-draglist {
+//   &.is-dragging {
+//     .#{$namespace}-dragitem {
+//       &:hover {
+//         background-color: transparent;
+//       }
+//     }
+//   }
+
+//   .#{$namespace}-dragitem {
+//     display: flex;
+//     align-items: center;
+//     cursor: grab;
+
+//     &[draggable-context-id='']:hover,
+//     &[draggable-context-id='1'] {
+//       background-color: #cde9f5;
+//     }
+
+//     &__drag-icon {
+//       margin: 0 4px;
+//     }
+
+//     &__content {
+//       flex: 1;
+//     }
+
+//     &[draggable-context-id='0'] {
+//       transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
+//     }
+//   }
+// }

package/style/dragable.scss

@@ -0,0 +1,8 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@include b(dragable-item) {
+  &[dragable-relative='true'] {
+    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
+  }
+}