yuang-framework-ui-pc 1.0.20 → 1.2.1

package/es/ele-app/style/overwrite/tag/index.scss

@@ -0,0 +1,346 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-tag-var($ele);
+
+/* Tag */
+span.el-tag {
+  line-height: inherit;
+  height: eleVar('tag', 'height');
+  font-size: eleVar('tag', 'size');
+  border-radius: eleVar('tag', 'radius');
+  padding: eleVar('tag', 'padding');
+
+  .el-icon {
+    width: auto;
+    height: auto;
+    font-size: inherit;
+    border-radius: 0;
+    cursor: inherit;
+  }
+}
+
+span.el-tag,
+span.el-tag.is-closable {
+  padding: eleVar('tag', 'padding');
+}
+
+/* 关闭按钮 */
+.el-tag.is-closable .el-tag__close {
+  width: auto;
+  height: auto;
+  font-size: eleVar('tag', 'close-size');
+  margin: eleVar('tag', 'close-margin');
+  padding: eleVar('tag', 'close-padding');
+  border-radius: eleVar('tag', 'close-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+/* 亮色风格 */
+.el-tag.el-tag--light {
+  color: eleVar('tag', 'color');
+  background: eleVar('tag', 'bg');
+  border-color: eleVar('tag', 'border-color');
+
+  .el-tag__close {
+    color: eleVar('tag', 'close-color');
+
+    &:hover {
+      color: eleVar('tag', 'close-hover-color');
+      background: eleVar('tag', 'close-hover-bg');
+    }
+  }
+}
+
+.el-tag--light {
+  &.el-tag--info {
+    color: eleVar('tag', 'info-color');
+    background: eleVar('tag', 'info-bg');
+    border-color: eleVar('tag', 'info-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'info-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'info-close-hover-color');
+        background: eleVar('tag', 'info-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--success {
+    color: eleVar('tag', 'success-color');
+    background: eleVar('tag', 'success-bg');
+    border-color: eleVar('tag', 'success-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'success-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'success-close-hover-color');
+        background: eleVar('tag', 'success-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--warning {
+    color: eleVar('tag', 'warning-color');
+    background: eleVar('tag', 'warning-bg');
+    border-color: eleVar('tag', 'warning-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'warning-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'warning-close-hover-color');
+        background: eleVar('tag', 'warning-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--danger {
+    color: eleVar('tag', 'danger-color');
+    background: eleVar('tag', 'danger-bg');
+    border-color: eleVar('tag', 'danger-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'danger-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'danger-close-hover-color');
+        background: eleVar('tag', 'danger-close-hover-bg');
+      }
+    }
+  }
+}
+
+/* 暗色风格 */
+.el-tag.el-tag--dark {
+  color: eleVar('tag', 'dark-color');
+  background: eleVar('tag', 'dark-bg');
+  border: none;
+
+  .el-tag__close {
+    color: eleVar('tag', 'dark-close-color');
+
+    &:hover {
+      color: eleVar('tag', 'dark-close-hover-color');
+      background: eleVar('tag', 'dark-close-hover-bg');
+    }
+  }
+}
+
+.el-tag--dark {
+  &.el-tag--info {
+    color: eleVar('tag', 'dark-info-color');
+    background: eleVar('tag', 'dark-info-bg');
+
+    .el-tag__close {
+      color: eleVar('tag', 'dark-info-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'dark-info-close-hover-color');
+        background: eleVar('tag', 'dark-info-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--success {
+    color: eleVar('tag', 'dark-success-color');
+    background: eleVar('tag', 'dark-success-bg');
+
+    .el-tag__close {
+      color: eleVar('tag', 'dark-success-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'dark-success-close-hover-color');
+        background: eleVar('tag', 'dark-success-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--warning {
+    color: eleVar('tag', 'dark-warning-color');
+    background: eleVar('tag', 'dark-warning-bg');
+
+    .el-tag__close {
+      color: eleVar('tag', 'dark-warning-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'dark-warning-close-hover-color');
+        background: eleVar('tag', 'dark-warning-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--danger {
+    color: eleVar('tag', 'dark-danger-color');
+    background: eleVar('tag', 'dark-danger-bg');
+
+    .el-tag__close {
+      color: eleVar('tag', 'dark-danger-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'dark-danger-close-hover-color');
+        background: eleVar('tag', 'dark-danger-close-hover-bg');
+      }
+    }
+  }
+}
+
+/* 朴素风格 */
+.el-tag.el-tag--plain {
+  color: eleVar('tag', 'plain-color');
+  border-color: eleVar('tag', 'plain-border-color');
+  background: none;
+
+  .el-tag__close {
+    color: eleVar('tag', 'plain-close-color');
+
+    &:hover {
+      color: eleVar('tag', 'plain-close-hover-color');
+      background: eleVar('tag', 'plain-close-hover-bg');
+    }
+  }
+}
+
+.el-tag--plain {
+  &.el-tag--info {
+    color: eleVar('tag', 'plain-info-color');
+    border-color: eleVar('tag', 'plain-info-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'plain-info-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'plain-info-close-hover-color');
+        background: eleVar('tag', 'plain-info-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--success {
+    color: eleVar('tag', 'plain-success-color');
+    border-color: eleVar('tag', 'plain-success-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'plain-success-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'plain-success-close-hover-color');
+        background: eleVar('tag', 'plain-success-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--warning {
+    color: eleVar('tag', 'plain-warning-color');
+    border-color: eleVar('tag', 'plain-warning-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'plain-warning-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'plain-warning-close-hover-color');
+        background: eleVar('tag', 'plain-warning-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--danger {
+    color: eleVar('tag', 'plain-danger-color');
+    border-color: eleVar('tag', 'plain-danger-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'plain-danger-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'plain-danger-close-hover-color');
+        background: eleVar('tag', 'plain-danger-close-hover-bg');
+      }
+    }
+  }
+}
+
+/* 加深边框 */
+span.el-tag.is-hit {
+  &.el-tag--primary {
+    border-color: eleVar('tag', 'hit-border-color');
+  }
+
+  &.el-tag--info {
+    border-color: eleVar('tag', 'hit-info-border-color');
+  }
+
+  &.el-tag--success {
+    border-color: eleVar('tag', 'hit-success-border-color');
+  }
+
+  &.el-tag--warning {
+    border-color: eleVar('tag', 'hit-warning-border-color');
+  }
+
+  &.el-tag--danger {
+    border-color: eleVar('tag', 'hit-danger-border-color');
+  }
+}
+
+/* 椭圆风格 */
+span.el-tag.is-round {
+  padding: eleVar('tag', 'round-padding');
+  border-radius: eleVar('tag', 'round-radius');
+}
+
+/* 小尺寸 */
+.el-tag.el-tag--small {
+  height: eleVar('tag', 'sm-height');
+  font-size: eleVar('tag', 'sm-size');
+  border-radius: eleVar('tag', 'sm-radius');
+
+  .el-tag__close {
+    font-size: eleVar('tag', 'sm-close-size');
+    margin: eleVar('tag', 'sm-close-margin');
+    padding: eleVar('tag', 'sm-close-padding');
+    border-radius: eleVar('tag', 'sm-close-radius');
+  }
+}
+
+span.el-tag.el-tag--small {
+  padding: eleVar('tag', 'sm-padding');
+}
+
+.el-tag.el-tag--small.is-round {
+  padding: eleVar('tag', 'sm-round-padding');
+  border-radius: eleVar('tag', 'sm-round-radius');
+}
+
+/* 大尺寸 */
+.el-tag.el-tag--large {
+  height: eleVar('tag', 'lg-height');
+  font-size: eleVar('tag', 'lg-size');
+  border-radius: eleVar('tag', 'lg-radius');
+
+  .el-tag__close {
+    font-size: eleVar('tag', 'lg-close-size');
+    margin: eleVar('tag', 'lg-close-margin');
+    padding: eleVar('tag', 'lg-close-padding');
+    border-radius: eleVar('tag', 'lg-close-radius');
+  }
+}
+
+span.el-tag.el-tag--large {
+  padding: eleVar('tag', 'lg-padding');
+}
+
+.el-tag.el-tag--large.is-round {
+  padding: eleVar('tag', 'lg-round-padding');
+  border-radius: eleVar('tag', 'lg-round-radius');
+}
+
+/* 椭圆风格关闭按钮圆角 */
+.el-tag.is-round .el-tag__close {
+  border-radius: 50%;
+}

package/es/ele-app/style/overwrite/tree/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../../../style/util.scss' as *;
+
+/* ElTree 主题变量 */
+@mixin set-el-tree-var($var) {
+  .el-tree {
+    @include set-ele-var('tree', $var);
+  }
+}

package/es/ele-app/style/overwrite/tree/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/tree/index.js

@@ -0,0 +1 @@
+import "./index.scss";

package/es/ele-app/style/overwrite/tree/index.scss

@@ -0,0 +1,106 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-tree-var($ele);
+
+/* Tree */
+body .el-tree {
+  background: none;
+}
+
+.el-tree {
+  .el-tree-node {
+    padding-top: eleVar('tree', 'item-margin');
+    box-sizing: border-box;
+  }
+
+  & > .el-tree-node:first-child {
+    padding-top: 0;
+  }
+
+  .el-tree-node__content {
+    height: eleVar('tree', 'item-height');
+    padding: eleVar('tree', 'item-padding');
+    border-radius: eleVar('tree', 'item-radius');
+    transition: (color $transition-base, background-color $transition-base);
+    box-sizing: border-box;
+
+    & > .el-tree-node__expand-icon {
+      flex-shrink: 0;
+      width: auto;
+      height: auto;
+      transform: none;
+      box-sizing: border-box;
+      margin: eleVar('tree', 'expand-margin');
+      padding: eleVar('tree', 'expand-padding');
+      border-radius: eleVar('tree', 'expand-radius');
+      font-size: eleVar('tree', 'expand-size');
+      transition: background-color $transition-base;
+      z-index: 4;
+
+      & > svg {
+        transition: transform 0.3s;
+      }
+
+      &.expanded > svg {
+        transform: rotate(90deg);
+      }
+
+      &:hover {
+        background: eleVar('tree', 'expand-hover-bg');
+      }
+
+      &.is-leaf {
+        pointer-events: none;
+      }
+    }
+
+    & > .el-checkbox {
+      flex-shrink: 0;
+    }
+
+    & > .el-tree-node__label {
+      flex: 1;
+      line-height: eleVar('tree', 'item-line-height');
+      transition: color $transition-base;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  &.el-tree--highlight-current {
+    .el-tree-node.is-current > .el-tree-node__content {
+      background: eleVar('tree', 'item-active-bg');
+
+      .el-tree-node__label {
+        color: eleVar('tree', 'item-active-color');
+        font-weight: eleVar('tree', 'item-active-weight');
+      }
+
+      &:hover {
+        background: eleVar('tree', 'item-active-hover-bg');
+      }
+    }
+  }
+
+  /* TreeV2 */
+  .el-vl__wrapper {
+    box-sizing: border-box;
+
+    & > .el-virtual-scrollbar {
+      margin: auto 0;
+    }
+
+    .el-tree-node {
+      padding-top: 0;
+      padding-bottom: eleVar('tree', 'item-margin');
+    }
+
+    .el-tree-node__content {
+      height: 100% !important;
+    }
+  }
+}

package/es/ele-app/style/overwrite/tree-select/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../../../style/util.scss' as *;
+
+/* ElTreeSelect 主题变量 */
+@mixin set-el-tree-select-var($var) {
+  .el-tree-select__popper {
+    @include set-ele-var('tree-select', $var);
+  }
+}

package/es/ele-app/style/overwrite/tree-select/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/tree-select/index.js

@@ -0,0 +1 @@
+import "./index.scss";

package/es/ele-app/style/overwrite/tree-select/index.scss

@@ -0,0 +1,108 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-tree-select-var($ele);
+
+/* TreeSelect */
+.el-tree-select__popper {
+  .el-select-dropdown__wrap .el-select-dropdown__list {
+    margin: 0 !important;
+    padding: eleVar('tree-select', 'padding') !important;
+  }
+
+  .el-tree {
+    background: none;
+  }
+
+  .el-tree-node__content {
+    position: relative;
+    z-index: 0;
+
+    .el-select-dropdown__item {
+      height: auto;
+      line-height: eleVar('tree', 'item-line-height');
+      padding: 0;
+      border-radius: 0;
+      position: static;
+
+      &::before {
+        content: '';
+        border-radius: eleVar('tree', 'item-radius');
+        transition: background-color $transition-base;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+      }
+    }
+
+    & > .el-checkbox,
+    & > .el-checkbox + .el-tree-node__loading-icon {
+      & + .el-select-dropdown__item::before {
+        display: none;
+      }
+    }
+
+    &:has(> .el-select-dropdown__item.is-disabled) {
+      cursor: not-allowed;
+    }
+  }
+
+  .el-tree .el-tree-node > .el-tree-node__content .el-select-dropdown__item {
+    color: inherit;
+    font-weight: normal;
+  }
+
+  /* 选中 */
+  .el-tree-node > .el-tree-node__content {
+    .el-select-dropdown__item.selected,
+    .el-select-dropdown__item.is-selected {
+      color: eleVar('tree', 'item-active-color');
+      font-weight: eleVar('tree', 'item-active-weight');
+
+      &::before {
+        background: eleVar('tree', 'item-active-bg');
+      }
+    }
+
+    &:hover .el-select-dropdown__item.selected::before,
+    &:hover .el-select-dropdown__item.is-selected::before {
+      background: eleVar('tree', 'item-active-hover-bg');
+    }
+  }
+
+  /* 有复选框时去掉文本选中效果 */
+  .el-tree-node > .el-tree-node__content > .el-checkbox,
+  .el-tree-node__content > .el-checkbox + .el-tree-node__loading-icon {
+    & + .el-select-dropdown__item {
+      color: inherit;
+      font-weight: normal;
+    }
+  }
+
+  /* 有复选框时去掉右侧选中图标 */
+  .el-tree-node.is-checked > .el-tree-node__content {
+    & > .el-select-dropdown__item.is-selected::after {
+      display: none;
+    }
+  }
+
+  /* 禁用 */
+  .el-tree-node > .el-tree-node__content .el-select-dropdown__item.is-disabled {
+    color: eleVar('tree-select', 'item-disabled-color');
+
+    &::before {
+      display: none;
+    }
+  }
+
+  /* 行点击高亮时去掉模拟背景的伪元素 */
+  .el-tree--highlight-current .el-tree-node.is-current {
+    & > .el-tree-node__content .el-select-dropdown__item::before {
+      display: none;
+    }
+  }
+}

package/es/ele-app/style/scrollbar/css-var.scss

@@ -0,0 +1,71 @@
+@use '../../../style/util.scss' as *;
+// 美化滚动条样式针对谷歌选择器
+$scrollbar-webkit-selector: 'html.is-webkit' !default;
+
+/* 滚动条主题变量 */
+@mixin set-scrollbar-var($var) {
+  @include set-ele-var('scrollbar', $var);
+}
+
+/* 滚动条样式 */
+@mixin scrollbar-style($selector: '') {
+  #{if($selector == '', '*', $selector)} {
+    scrollbar-width: thin;
+    scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
+  }
+
+  #{$selector}::-webkit-scrollbar {
+    width: eleVar('scrollbar', 'size');
+    height: eleVar('scrollbar', 'size');
+  }
+
+  #{$selector}::-webkit-scrollbar-thumb {
+    border: eleVar('scrollbar', 'padding') solid transparent;
+    border-radius: eleVar('scrollbar', 'radius');
+    background-color: eleVar('scrollbar', 'color');
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: eleVar('scrollbar', 'hover-color');
+    }
+  }
+
+  #{$selector}::-webkit-scrollbar-track {
+    background: eleVar('scrollbar', 'bg');
+  }
+
+  #{$selector}::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+/* 美化滚动条样式 */
+@mixin set-scrollbar-style($selector) {
+  @if $selector == '' {
+    @include scrollbar-style();
+
+    #{$scrollbar-webkit-selector},
+    #{$scrollbar-webkit-selector} * {
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+  } @else if $selector == 'pc' {
+    @media (hover: hover) and (pointer: fine) {
+      @include scrollbar-style();
+
+      #{$scrollbar-webkit-selector},
+      #{$scrollbar-webkit-selector} * {
+        scrollbar-width: auto;
+        scrollbar-color: auto;
+      }
+    }
+  } @else if $selector != 'never' {
+    @include scrollbar-style($selector);
+
+    #{$scrollbar-webkit-selector}#{$selector},
+    #{$scrollbar-webkit-selector} #{$selector} {
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+  }
+}

package/es/ele-app/style/scrollbar/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/scrollbar/index.js

@@ -0,0 +1 @@
+import "./index.scss";

package/es/ele-app/style/scrollbar/index.scss

@@ -0,0 +1,9 @@
+@use '../../../style/themes/default.scss' as *;
+@use '../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+:root {
+  @include set-scrollbar-var($ele);
+}
+
+@include set-scrollbar-style($scrollbar-selector);