yc-pro-components 0.0.1

package/theme-chalk/src/mixins/function.scss

@@ -0,0 +1,73 @@
+//  fork from element-plus  and rewrite
+@use 'sass:meta';
+@use 'sass:string';
+
+@use './config' as config;
+
+// BEM support Func
+@function selectorToString($selector) {
+  $selector: meta.inspect($selector);
+  $selector: string.slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, config.$plus-modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, '.' + config.$plus-state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, ':') {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}
+
+// join var name
+// joinVarName(('button', 'text-color')) => '--el-button-text-color'
+@function joinVarName($list) {
+  $name: '--' + config.$el-namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--el-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+// getCssVar('button', 'text-color') => var(--el-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}
+
+// getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red)
+@function getCssVarWithDefault($args, $default) {
+  @return var(#{joinVarName($args)}, #{$default});
+}

package/theme-chalk/src/mixins/mixins.scss

@@ -0,0 +1,79 @@
+//  fork from element-plus  and rewrite
+
+@use './config' as *;
+@use './function' as *;
+
+// BEM
+@mixin b($block) {
+  $B: $plus-namespace + $plus-common-separator + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+@mixin elb($block) {
+  $B: $el-namespace + $plus-common-separator + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element, $nest: false) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + '.' + $B + $plus-element-separator + $unit + ','};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @if $nest {
+      @at-root {
+        #{$selector} {
+          #{$currentSelector} {
+            @content;
+          }
+        }
+      }
+    } @else {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @if $nest {
+      @at-root {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    } @else {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier, $nest: false) {
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + $selector + $plus-modifier-separator + $unit + ','};
+  }
+
+  @if $nest {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  } @else {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}

package/theme-chalk/src/page.scss

@@ -0,0 +1,7 @@
+@use 'mixins/mixins' as *;
+
+@include b(page) {
+  @include e(table_wrapper) {
+    margin-top: 20px;
+  }
+}

package/theme-chalk/src/pagination.scss

@@ -0,0 +1,16 @@
+@use 'mixins/mixins' as *;
+
+@include b(pagination) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+
+  &--center {
+    justify-content: space-between;
+    
+    .el-pagination {
+      margin: 0 auto;
+    }
+  }
+}

package/theme-chalk/src/plus-yc-tabs-with-filter.scss

@@ -0,0 +1,65 @@
+/**
+ * YcTabsWithFilter - 带筛选按钮的标签页组件样式
+ */
+
+.yc-tabs-with-filter-wrapper {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+}
+
+.yc-tabs-header {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  .yc-tabs-with-filter {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+
+    .el-tabs__header {
+      margin-bottom: 16px;
+    }
+
+    .el-tabs__content {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .el-tab-pane {
+      height: 100%;
+    }
+  }
+
+  .yc-filter-button-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    padding: 8px 0;
+
+    .yc-filter-button {
+      height: 28px;
+      line-height: 28px;
+      color: var(--el-color-primary);
+      background-color: var(--el-bg-color);
+      border: 1px solid var(--el-color-primary);
+      border-radius: 4px;
+      transition: all 0.3s;
+    }
+
+    .yc-filter-button--active {
+      color: var(--el-color-primary);
+      background-color: var(--el-bg-color);
+    }
+
+    .yc-filter-button:hover {
+      color: var(--el-color-primary);
+    }
+  }
+}
+

package/theme-chalk/src/popover.scss

@@ -0,0 +1 @@
+ 

package/theme-chalk/src/radio.scss

@@ -0,0 +1 @@
+ 

package/theme-chalk/src/search.scss

@@ -0,0 +1,49 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/config' as *;
+
+@include b(search) {
+  .#{$plus-namespace + -form__row} {
+    row-gap: 18px;
+    width: 100%;
+  }
+
+  &.#{$el-namespace + -form--inline} {
+    .#{$el-namespace + -form-item} {
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+  }
+  &.#{$el-namespace + -form--label-top} {
+    .#{$plus-namespace + -search__button__wrapper} {
+      .#{$el-namespace + -form-item__label} {
+        visibility: hidden;
+        opacity: 0;
+      }
+      .#{$el-namespace + -form-item__content} {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  @include e(unfold) {
+    margin-left: 12px;
+  }
+
+  @include e(button__wrapper) {
+    flex: auto;
+    max-width: 100%;
+    margin-bottom: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+
+    &.#{$el-namespace + -form-item} {
+      margin-right: 10px;
+    }
+
+    @include elb(form-item__content) {
+      flex-wrap: nowrap;
+      flex: none;
+    }
+  }
+}

package/theme-chalk/src/sidebar.scss

@@ -0,0 +1,93 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+@use 'mixins/config' as *;
+@use 'var/index';
+
+@include b(sidebar) {
+  height: 100%;
+
+  &.is-vertical {
+    min-height: 400px;
+
+    &:not(.#{$el-namespace + -menu--collapse}) {
+      width: var(--plus-sidebar-width);
+      flex-shrink: 0;
+    }
+
+    &.#{$el-namespace + -menu--collapse} {
+      .#{$el-namespace + -menu-item} {
+        width: calc(var(--plus-sidebar-min-width) - 2px);
+      }
+    }
+
+    .#{$el-namespace + -scrollbar__wrap} {
+      overflow-x: hidden;
+    }
+
+    &.#{$el-namespace + -menu--collapse} {
+      .#{$plus-namespace + -sidebar__item-title} {
+        height: 0;
+        width: 0;
+        overflow: hidden;
+        visibility: hidden;
+        display: inline-block;
+      }
+      .#{$el-namespace + -sub-menu__icon-arrow} {
+        display: none;
+      }
+    }
+
+    .#{$el-namespace + -scrollbar} {
+      height: calc(100% - var(--plus-sidebar-collapse-height));
+    }
+
+    .#{$plus-namespace + -sidebar__collapse} {
+      width: calc(var(--plus-sidebar-width) - 2px);
+      background-color: getCssVar('menu-bg-color');
+      height: var(--plus-sidebar-collapse-height);
+      box-sizing: border-box;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      align-items: flex-start;
+
+      &.is-collapse {
+        width: calc(var(--plus-sidebar-min-width) - 2px);
+      }
+
+      &.is-active {
+        background-color: getCssVar('menu-bg-color');
+      }
+
+      [class*='-icon'] {
+        margin-top: 10px;
+        font-size: 20px;
+        user-select: none;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &.is-horizontal {
+    width: 100%;
+
+    .#{$el-namespace + -scrollbar} {
+      width: 100%;
+    }
+
+    .#{$el-namespace + -scrollbar__wrap} {
+      width: 100%;
+    }
+
+    .#{$el-namespace + -scrollbar__view} {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+    }
+  }
+
+  @include e(item-title) {
+    user-select: none;
+  }
+}

package/theme-chalk/src/steps-form.scss

@@ -0,0 +1,18 @@
+@use 'mixins/mixins' as *;
+
+@include b(steps-form) {
+  @include elb(steps) {
+    margin-bottom: 20px;
+  }
+}
+
+@include b(steps-form-vertical) {
+  display: flex;
+  @include elb(steps--vertical) {
+    margin-right: 20px;
+  }
+
+  @include b(form) {
+    flex: 1;
+  }
+}

package/theme-chalk/src/table.scss

@@ -0,0 +1,171 @@
+@use 'mixins/config' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+@include b(table) {
+  /* 自定义列栏 */
+  @include b(table-column) {
+    @include e(header) {
+      @include e(header__icon) {
+        margin-top: -2px;
+        margin-left: 2px;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  /* 操作栏 */
+  @include b(table-action-bar) {
+    &.is-center {
+      .cell {
+        justify-content: center;
+      }
+    }
+    &.is-right {
+      .cell {
+        justify-content: flex-end;
+      }
+    }
+
+    &.#{$el-namespace + -table-fixed-column--right} {
+      background-color: getCssVar('bg-color');
+    }
+
+    .cell {
+      display: flex;
+      align-items: center;
+    }
+
+    @include e(dropdown__link) {
+      display: inline-flex;
+      cursor: pointer;
+      user-select: none;
+      color: getCssVar('color-primary');
+    }
+    @include e(more-text) {
+      margin-right: 2px;
+    }
+    @include e(column__link) {
+      margin-right: 10px;
+    }
+    @include e(dropdown) {
+      vertical-align: baseline;
+      cursor: pointer;
+      margin-left: 12px;
+    }
+    @include elb(link) {
+      & + .#{$el-namespace + -link} {
+        margin-left: 12px;
+      }
+    }
+    @include elb(icon) {
+      cursor: pointer;
+
+      & + .#{$el-namespace + -icon} {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  /* 排序 */
+  @include b(table-column-drag-sort) {
+    @include b(table-column-drag-icon) {
+      cursor: move;
+      padding: 4px;
+      box-sizing: border-box;
+      font-size: 18px;
+    }
+  }
+
+  /* 序号栏 */
+  @include b(table-column-index) {
+    @include b(table-index-column) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      word-break: keep-all;
+      white-space: nowrap;
+      width: 20px;
+      height: 20px;
+    }
+
+    .cell {
+      @include b(table-column-index__content) {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        overflow: hidden;
+      }
+    }
+  }
+
+  /*工具栏*/
+  @include b(table-title-bar) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  @include e(toolbar) {
+    display: flex;
+    align-items: center;
+  }
+
+  @include elb(popper) {
+    max-width: 200px;
+  }
+}
+
+/* 密度设置 */
+@include b(table-title-bar__toolbar__density) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include elb(button) {
+    margin-top: 10px;
+    width: 80px;
+
+    & + .#{$el-namespace + -button} {
+      margin-left: 0;
+    }
+  }
+}
+
+@include b(table-title-bar__toolbar__icon) {
+  margin-left: 10px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: getCssVar('text-color-regular');
+}
+/* 列设置 */
+@include b(table-title-bar__toolbar__checkbox__item) {
+  margin-left: 6px;
+}
+/* 列设置 拖拽 item */
+@include b(table-checkbox-item) {
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+}
+/* 列设置 拖拽handle  */
+@include b(table-checkbox-handle) {
+  font-size: 18px;
+  cursor: move;
+}
+
+@include b(table-ghost-class) {
+  padding: 0 5px;
+  border: 1px dashed getCssVar('color-primary');
+  background-color: #fff;
+}
+
+@include b(table-column__edit) {
+  cursor: pointer;
+}
+
+@include b(table-checkbox-checkAll) {
+  display: flex;
+  justify-content: space-between;
+}

package/theme-chalk/src/var/index.scss

@@ -0,0 +1,6 @@
+:root {
+  --plus-header-height: 60px;
+  --plus-sidebar-collapse-height: 60px;
+  --plus-sidebar-width: 200px;
+  --plus-sidebar-min-width: 64px;
+}

package/theme-chalk/src/yc-dialog.scss

@@ -0,0 +1,59 @@
+/**
+ * YcDialog 对话框组件样式
+ */
+.yc-dialog {
+  --scrollbar-size: 6px;
+  --scrollbar-radius: 3px;
+  --scrollbar-thumb-light: rgb(0 0 0 / 20%);
+  --scrollbar-thumb-light-hover: rgb(0 0 0 / 30%);
+  --scrollbar-thumb-dark: rgb(255 255 255 / 20%);
+  --scrollbar-thumb-dark-hover: rgb(255 255 255 / 30%);
+
+  .el-dialog {
+    display: flex;
+    flex-direction: column;
+    max-height: 90vh;
+    margin: 6vh auto 50px;
+  }
+
+  .el-dialog__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  &__content {
+    flex: 1;
+    padding: 0;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: var(--scrollbar-size);
+      height: var(--scrollbar-size);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-thumb-light);
+      border-radius: var(--scrollbar-radius);
+
+      &:hover {
+        background-color: var(--scrollbar-thumb-light-hover);
+      }
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  }
+
+  .dark &__content::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-dark);
+
+    &:hover {
+      background-color: var(--scrollbar-thumb-dark-hover);
+    }
+  }
+}
+

package/theme-chalk/src/yc-drawer.scss

@@ -0,0 +1,64 @@
+/**
+ * YcDrawer 抽屉组件样式
+ */
+.yc-drawer {
+  .el-drawer__header {
+    padding: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .el-drawer__footer {
+    padding-top: 12px !important;
+    padding-right: 24px !important;
+    padding-bottom: 12px !important;
+  }
+
+  .custom-drawer-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100%;
+    height: 56px;
+    border-radius: 4px 4px 0 0;
+
+    .header-content {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      width: calc(100% - 48px);
+      height: 24px;
+      margin: 16px 0 0 24px;
+
+      .header-title {
+        height: 24px;
+        font-family: NotoSansSC, PingFangSC, sans-serif;
+        font-size: 16px;
+        font-weight: normal;
+        line-height: 24px;
+        color: rgb(0 0 0 / 100%);
+        text-align: left;
+        overflow-wrap: break-word;
+        white-space: nowrap;
+      }
+
+      .header-close-icon {
+        color: rgb(0 0 0 / 60%);
+        cursor: pointer;
+        transition: color 0.3s;
+
+        &:hover {
+          color: rgb(0 0 0 / 90%);
+        }
+      }
+    }
+
+    .header-divider {
+      width: 100%;
+      height: 1px;
+      margin-top: 15px;
+      background-color: rgb(245 247 249 / 100%);
+    }
+  }
+}
+