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

package/style/filter-panel.scss

@@ -0,0 +1,199 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@include b(filterpanel) {
+  font-size: 14px;
+  line-height: 22px;
+  color: getCssVar('text-color', 'primary');
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: -15px;
+
+  @include e(search) {
+    width: 144px;
+    margin: 15px 8px 0 0;
+
+    .el-input__wrapper {
+      padding: 3px 7px;
+      border-radius: 4px;
+    }
+  }
+
+  @include e(options) {
+    font-weight: 500;
+  }
+
+  @include e(reset) {
+    --el-button-size: 28px;
+    margin-top: 15px;
+  }
+}
+
+@include b(filterpanel-item) {
+  display: inline-block;
+  position: relative;
+  margin-right: 20px;
+  margin-top: 15px;
+
+  @include e(close) {
+    position: absolute;
+    left: 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 b(filterpanel-filter) {
+  @include e(plus) {
+    position: relative;
+    width: 10px;
+    height: 10px;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 2px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      background-color: getCssVar('text-color', 'primary');
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotate(90deg);
+    }
+  }
+
+  @include e(label) {
+    margin-left: 4px;
+  }
+
+  @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: 12px;
+    line-height: 20px;
+    color: getCssVar('text-color', 'regular');
+  }
+}
+
+// .#{$namespace}-filterpanel {
+//   font-size: 14px;
+//   line-height: 22px;
+//   color: $black-1;
+//   display: flex;
+//   align-items: center;
+//   flex-wrap: wrap;
+//   margin-top: -15px;
+
+//   &-item {
+//     display: inline-block;
+//     position: relative;
+//     margin-right: 20px;
+//     margin-top: 15px;
+
+//     &__close {
+//       position: absolute;
+//       left: 0;
+//       top: 0;
+//       display: none;
+//       font-size: 16px;
+//       opacity: 0.6;
+//       transform: translate(-50%, -50%);
+//       cursor: pointer;
+//       &:hover {
+//         opacity: 1;
+//       }
+//     }
+
+//     &:hover &__close {
+//       display: inline;
+//     }
+//   }
+
+//   &-filter {
+//     &__label {
+//       margin-left: 4px;
+//     }
+
+//     &__option {
+//       .bwa-advance-option__content {
+//         display: flex;
+//         align-items: center;
+//         justify-content: space-between;
+//       }
+//     }
+
+//     &__checkbox {
+//       display: inline-flex;
+//       height: auto;
+//       flex: 1;
+//       width: 0;
+
+//       .el-checkbox__label {
+//         flex: 1;
+//         overflow: hidden;
+//         white-space: nowrap;
+//         text-overflow: ellipsis;
+//       }
+//     }
+
+//     &__title {
+//       font-size: 12px;
+//       line-height: 20px;
+//       color: $black-3;
+//     }
+//   }
+
+//   &__search {
+//     width: 144px;
+//     margin: 15px 8px 0 0;
+
+//     .el-input__wrapper {
+//       padding: 3px 7px;
+//       border-radius: 4px;
+//     }
+//   }
+
+//   &__reset {
+//     --el-button-size: 28px;
+//     margin-top: 15px;
+//   }
+// }

package/style/index.scss

@@ -0,0 +1,22 @@
+@use './var.scss';
+@use './common.scss';
+@use './theme/theme.scss';
+@use './data-form.scss';
+@use './data-table.scss';
+@use './filter-panel.scss';
+@use './input-condition.scss';
+@use './advance-select.scss';
+@use './date-range.scss';
+@use './layout.scss';
+@use './menu.scss';
+@use './panel.scss';
+@use './panel-tabs.scss';
+@use './contextmenu.scss';
+@use './breadcrumb-select.scss';
+@use './datatable-settings.scss';
+@use './drag-list.scss';
+@use './dragable.scss';
+@use './progress.scss';
+@use './rich-text.scss';
+@use './department-condition.scss';
+@use './pct-filter-panel.scss';

package/style/input-condition.scss

@@ -0,0 +1,30 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@include b(input-condition) {
+  display: inline-block;
+  padding: 3px 6px;
+  border-radius: 4px;
+  transition: 0.2s ease-out;
+  cursor: pointer;
+
+  @include pseudo(hover) {
+    background-color: #f2f4f6;
+  }
+
+  @include when(active) {
+    background-color: #f2f4f6;
+  }
+
+  @include e(content) {
+    padding: 8px;
+  }
+
+  @include e(input) {
+    width: 150px;
+  }
+
+  @include e(label) {
+    color: getCssVar('text-color', 'primary');
+  }
+}

package/style/layout.scss

@@ -0,0 +1,70 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@include b(layout) {
+  @include set-component-css-var('layout', $layout);
+  $spacing-size: getCssVar('layout', 'spacing-size');
+
+  width: 100%;
+  height: 100%;
+  align-items: flex-start;
+
+  @include e(menu-wrapper) {
+    // width: getCssVar('layout', 'menu-wrapper-width');
+    .el-scrollbar__view {
+      padding: $spacing-size 0;
+    }
+
+    @include e(menu) {
+      width: 100%;
+    }
+  }
+
+  @include e(main) {
+    flex: 1;
+    width: 0;
+    height: 100%;
+    padding: $spacing-size 0 $spacing-size $spacing-size;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+}
+
+// .#{$namespace}-layout {
+//   width: 100%;
+//   height: 100%;
+//   align-items: flex-start;
+
+//   &__menu-wrapper {
+//     .el-scrollbar__view {
+//       padding-top: 24px;
+//     }
+//   }
+
+//   &__menu {
+//     width: $leftPanelWidth;
+//   }
+
+//   &__main-wrapper {
+//     flex: 1;
+//     width: 0;
+//     height: 100%;
+//     padding: 0 map-get($gap, 'module');
+//     overflow: auto;
+//     box-sizing: border-box;
+
+//     > .el-scrollbar__wrap > .el-scrollbar__view {
+//       min-height: 100%;
+//     }
+//   }
+
+//   &__main {
+//     $moduleGap: map-get($gap, 'module');
+//     flex: 1;
+//     width: 0;
+//     height: 100%;
+//     padding: $moduleGap 0 $moduleGap $moduleGap;
+//     box-sizing: border-box;
+//     overflow: hidden;
+//   }
+// }

package/style/menu.scss

@@ -0,0 +1,184 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@mixin normalClass() {
+  .el-sub-menu > .el-sub-menu__title,
+  .el-menu-item {
+    height: getCssVar('menu', 'item-height');
+    color: getCssVar('menu', 'item-text-color');
+  }
+
+  .el-sub-menu.is-active {
+    .el-sub-menu__title {
+      .ptp-icon,
+      .bwa-menu-item__content {
+        color: getCssVar('menu', 'active-text-color');
+      }
+    }
+  }
+}
+
+@include b(menu) {
+  @include set-component-css-var('menu', $menu);
+
+  --el-menu-bg-color: none;
+  border: none;
+  width: getCssVar('layout', 'left-panel-width');
+
+  @include m(collapsed) {
+    width: auto;
+  }
+
+  .el-menu-item {
+    &:hover {
+      background-color: getCssVar('menu', 'item-hover-bg-color');
+    }
+    &.is-active {
+      background-color: getCssVar('menu', 'item-active-bg-color');
+      color: getCssVar('menu', 'active-text-color');
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: getCssVar('menu', 'bar-width');
+        background-color: getCssVar('menu', 'active-text-color');
+      }
+    }
+  }
+
+  @include normalClass();
+
+  .el-sub-menu > .el-sub-menu__title {
+    padding-right: 0;
+  }
+
+  .el-menu-item {
+    .ptp-icon {
+      color: getCssVar('menu', 'icon-color');
+    }
+
+    &.is-active {
+      .ptp-icon {
+        color: getCssVar('menu', 'active-text-color');
+      }
+    }
+  }
+
+  .el-sub-menu,
+  .el-menu-item {
+    + .el-menu-item,
+    + .el-sub-menu,
+    .el-menu-item,
+    .el-sub-menu {
+      margin-top: getCssVar('menu', 'item-spacing');
+    }
+  }
+
+  .ptp-icon {
+    position: absolute;
+    top: 50%;
+    left: getCssVar('menu', 'icon-left');
+    transform: translate(0, -50%);
+  }
+}
+
+@include b(menu-item) {
+  .ptp-icon {
+    font-size: getCssVar('menu', 'icon-size');
+  }
+
+  @include e(content) {
+    padding-left: getCssVar('menu', 'content-padding-left');
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@include b(menu-sub) {
+  @include set-component-css-var('menu', $menu);
+  --bwa-menu-content-padding-left: 10px;
+  @include normalClass();
+
+  .el-sub-menu,
+  .el-menu-item {
+    + .el-menu-item,
+    + .el-sub-menu {
+      margin-top: getCssVar('menu', 'item-spacing');
+    }
+  }
+}
+
+// .#{$namespace}-menu {
+//   --el-menu-bg-color: none;
+//   border: none;
+
+//   &-item {
+//     .ptp-icon {
+//       font-size: 14px;
+//     }
+
+//     &__content {
+//       padding-left: 40px;
+//       box-sizing: border-box;
+//       overflow: hidden;
+//       text-overflow: ellipsis;
+//     }
+//   }
+
+//   .el-menu-item {
+//     .ptp-icon {
+//       color: #547781;
+//     }
+
+//     &.is-active {
+//       .ptp-icon {
+//         color: #19bbff;
+//       }
+//     }
+//   }
+
+//   .el-sub-menu,
+//   .el-menu-item {
+//     + .el-sub-menu,
+//     + .el-menu-item {
+//       margin-top: 8px;
+//     }
+//   }
+
+//   .el-sub-menu__title + .el-menu {
+//     margin-top: 8px;
+//   }
+
+//   .el-sub-menu > .el-sub-menu__title,
+//   .el-menu-item {
+//     height: 40px;
+//     color: #24515d;
+
+//     &:hover {
+//       background-color: rgba(176, 192, 197, 0.15);
+//     }
+//     &.is-active {
+//       background-color: #cde9f5;
+//       color: #19bbff;
+//       &::before {
+//         content: '';
+//         position: absolute;
+//         left: 0;
+//         top: 0;
+//         bottom: 0;
+//         width: 4px;
+//         background-color: $primaryColor;
+//       }
+//     }
+
+//     .ptp-icon {
+//       position: absolute;
+//       top: 50%;
+//       left: 32px;
+//       transform: translate(0, -50%);
+//     }
+//   }
+// }

package/style/mixins/_var.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use 'function' as *;
+
+// 设置css变量值
+@mixin set-css-var-value($name, $value) {
+  #{joinVarName($name)}: #{$value};
+}
+
+@mixin set-css-color-type($colors, $type) {
+  @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
+}
+
+@mixin set-component-css-var($name, $variables) {
+  @each $attribute, $value in $variables {
+    @if $attribute == 'default' {
+      #{getCssVarName($name)}: $value;
+    } @else {
+      #{getCssVarName($name, $attribute)}: $value;
+    }
+  }
+}

package/style/mixins/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'bwa' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;

package/style/mixins/function.scss

@@ -0,0 +1,62 @@
+@use 'config';
+
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, config.$modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + config.$state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+  @return containModifier($selector) or containWhenFlag($selector) or
+    containPseudoClass($selector);
+}
+
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+
+  @return $name;
+}
+
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}

package/style/mixins/mixins.scss

@@ -0,0 +1,88 @@
+@forward 'config';
+@forward 'function';
+@forward 'var';
+@use 'config' as *;
+@use 'function' as *;
+
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+
+  @each $unit in $element {
+    $selectorItem: '.' + $B + $element-separator + $unit;
+    $currentSelector: $currentSelector + $selectorItem + ',';
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    // 如果有特殊的嵌套规则就需要保证父子关系
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: '';
+
+  @each $unit in $modifier {
+    $selectorItem: $selector + $modifier-separator + $unit;
+    $currentSelector: $currentSelector + $selectorItem + ',';
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin meb($modifer: false, $element: $E, $block: $B) {
+  $selector: &;
+  $modiferCombo: '';
+
+  @if $modifer {
+    $modiferCombo: $modifier-separator + $modifer;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$block + $element-separator + $element + $modiferCombo} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content;
+  }
+}