@lingxiteam/ebe-utils 0.5.6 → 0.5.7

package/lib/public/src/components/pcfactory/src/styles/components/DynamicTabs.less

@@ -0,0 +1,254 @@
+@import (reference) '../theme/variables/antdVariables.less';
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
+
+
+.ued-dynamic-tabs-wrap {
+  height: 100%;
+
+  .@{tab-prefix-cls} {
+    height: 100%;
+
+    display: flex;
+
+    // ========================== Navigation ==========================
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      position: relative;
+      display: flex;
+      flex: none;
+      align-items: center;
+  
+      .@{tab-prefix-cls}-nav-wrap {
+        position: relative;
+        display: inline-block;
+        display: flex;
+        flex: auto;
+        align-self: stretch;
+        overflow: hidden;
+        white-space: nowrap;
+        transform: translate(0); // Fix chrome render bug
+  
+        // >>>>> Ping shadow
+        &::before,
+        &::after {
+          position: absolute;
+          z-index: 1;
+          opacity: 0;
+          transition: opacity @animation-duration-slow;
+          content: '';
+          pointer-events: none;
+        }
+      }
+  
+      .@{tab-prefix-cls}-nav-list {
+        position: relative;
+        display: flex;
+        transition: transform @animation-duration-slow;
+      }
+  
+      // >>>>>>>> Operations
+      .@{tab-prefix-cls}-nav-operations {
+        display: flex;
+        align-self: stretch;
+  
+        &-hidden {
+          position: absolute;
+          visibility: hidden;
+          pointer-events: none;
+        }
+      }
+  
+      .@{tab-prefix-cls}-nav-more {
+        position: relative;
+        padding: @tabs-card-horizontal-padding;
+        background: transparent;
+        border: 0;
+  
+        &::after {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          height: 5px;
+          transform: translateY(100%);
+          content: '';
+        }
+      }
+  
+      .@{tab-prefix-cls}-nav-add {
+        min-width: @tabs-card-height;
+        margin-left: @tabs-card-gutter;
+        padding: 0 @padding-xs;
+        background: @tabs-card-head-background;
+        border: @border-width-base @border-style-base @border-color-split;
+        border-radius: @border-radius-base @border-radius-base 0 0;
+        outline: none;
+        cursor: pointer;
+        transition: all @animation-duration-slow @ease-in-out;
+  
+        &:hover {
+          color: @tabs-hover-color;
+        }
+  
+        &:active,
+        &:focus {
+          color: @tabs-active-color;
+        }
+      }
+    }
+  
+    &-extra-content {
+      flex: none;
+    }
+  
+    &-centered {
+      > .@{tab-prefix-cls}-nav,
+      > div > .@{tab-prefix-cls}-nav {
+        .@{tab-prefix-cls}-nav-wrap {
+          &:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
+            justify-content: center;
+          }
+        }
+      }
+    }
+  
+    // ============================ InkBar ============================
+    &-ink-bar {
+      position: absolute;
+      background: @tabs-ink-bar-color;
+      pointer-events: none;
+    }
+  
+    // ============================= Tabs =============================
+    &-tab {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      padding: @tabs-horizontal-padding;
+      font-size: @tabs-title-font-size;
+      background: transparent;
+      border: 0;
+      outline: none;
+      cursor: pointer;
+  
+      &-btn,
+      &-remove {
+        &:focus,
+        &:active {
+          color: @tabs-active-color;
+        }
+      }
+  
+      &-btn {
+        outline: none;
+        transition: all 0.3s;
+      }
+  
+      &-remove {
+        flex: none;
+        margin-right: -@margin-xss;
+        margin-left: @margin-xs;
+        color: @text-color-secondary;
+        font-size: @font-size-sm;
+        background: transparent;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        transition: all @animation-duration-slow;
+  
+        &:hover {
+          color: @heading-color;
+        }
+      }
+  
+      &:hover {
+        color: @tabs-hover-color;
+      }
+  
+      &&-active &-btn {
+        color: @tabs-highlight-color;
+        text-shadow: 0 0 0.25px currentcolor;
+      }
+  
+      &&-disabled {
+        color: @disabled-color;
+        cursor: not-allowed;
+      }
+  
+      &&-disabled &-btn,
+      &&-disabled &-remove {
+        &:focus,
+        &:active {
+          color: @disabled-color;
+        }
+      }
+  
+      & &-remove .@{iconfont-css-prefix} {
+        margin: 0;
+      }
+  
+      .@{iconfont-css-prefix} {
+        margin-right: @margin-sm;
+      }
+    }
+  
+    &-tab + &-tab {
+      margin: @tabs-horizontal-margin;
+    }
+  
+    // =========================== TabPanes ===========================
+    &-content {
+      &-holder {
+        flex: auto;
+        min-width: 0;
+        min-height: 0;
+      }
+  
+      position: relative;
+      width: 100%;
+    }
+  
+    &-tabpane {
+      outline: none;
+  
+      &-hidden {
+        display: none;
+      }
+    }
+  
+    // Motion
+    &-switch {
+      &-appear,
+      &-enter {
+        transition: none;
+  
+        &-start {
+          opacity: 0;
+        }
+  
+        &-active {
+          opacity: 1;
+          transition: opacity @animation-duration-slow;
+        }
+      }
+  
+      &-leave {
+        position: absolute;
+        transition: none;
+        inset: 0;
+  
+        &-start {
+          opacity: 1;
+        }
+  
+        &-active {
+          opacity: 0;
+          transition: opacity @animation-duration-slow;
+        }
+      }
+    }
+
+  }
+
+}
+

package/lib/public/src/components/pcfactory/src/styles/components/Form.less

@@ -0,0 +1,265 @@
+@import (reference) '../theme/variables/antdVariables.less';
+@form-prefix-cls: ~'@{ant-prefix}-form';
+@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
+
+.ued-legacy-form-wrap {
+  background-color: white;
+
+  .form-tips .@{form-prefix-cls}-item-with-help {
+    margin-bottom: 14px;
+  }
+  
+  .@{form-prefix-cls}-item {
+    // height: 100%;
+    margin-bottom: 0;
+    div.@{form-prefix-cls}-item {
+      height: auto;
+    }
+    &-label {
+      line-height: 32px;
+
+      & > .@{form-prefix-cls}-item-required::before {
+        margin-right: 2px;
+        font-size: @font-size-sm;
+      }
+    }
+
+    &-control {
+      display: block;
+      // height: 100%;
+      line-height: 0;
+
+      &-wrapper:first-child {
+        height: 100%;
+      }
+
+      &.has-error {
+        .@{form-prefix-cls}-explain {
+          position: absolute;
+          height: @form-explain-height;
+          margin-top: 0;
+          font-size: @form-explain-font-size;
+          line-height: @form-explain-height;
+        }
+
+        .@{ant-prefix}-picker {
+          border-color: @error-color;
+        }
+      }
+
+      .ued-rateContainer {
+        line-height: 22px;
+      }
+    }
+  }
+
+  &.@{form-prefix-cls}-vertical {
+    .@{form-prefix-cls}-item {
+      // fix：在垂直布局时，渲染效果并没有更改，原因是表单上一直都有 labelCol和wrapperCol，导致垂直布局失效
+      // 强制改为 column
+      display: block;
+      padding-bottom: 0;
+      // 用于当表单内是布局容器，布局容器内表单控件的隐藏（因为存量数据有个block !important ）
+      .@{form-prefix-cls}-item-hidden {
+        display: none !important;
+      }
+      .@{form-prefix-cls}-item-visibility {
+        visibility: hidden;
+        transform: opacity 0.3s ease;
+        opacity: 0;
+      }
+      &-label {
+        flex: 1;
+        padding: 0;
+      }
+
+      &-control-wrapper {
+        flex: 1;
+      }
+    }
+  }
+
+  .@{ant-prefix}-form-item-noLabel {
+    & > .@{ant-prefix}-col-16 {
+      max-width: initial;
+    }
+  }
+}
+
+// ================================================================
+// =                             Item                             =
+// ================================================================
+.@{form-item-prefix-cls} {
+  .reset-component();
+
+  // margin-bottom: @form-item-margin-bottom;
+  vertical-align: top;
+  // We delay one frame (0.017s) here to let CSSMotion goes
+  transition: margin-bottom @animation-duration-slow 0.017s linear;
+
+  &-with-help {
+    margin-bottom: 0;
+    transition: none;
+  }
+
+  &-hidden,
+  &-hidden.@{ant-prefix}-row {
+    // https://github.com/ant-design/ant-design/issues/26141
+    display: none;
+  }
+
+  // ==============================================================
+  // =                            Label                           =
+  // ==============================================================
+  &-label {
+    display: inline-block;
+    flex-grow: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: right;
+    vertical-align: middle;
+
+    &-left {
+      text-align: left;
+    }
+
+    &-wrap {
+      overflow: visible;
+      line-height: (@line-height-base - 0.25em);
+      white-space: normal;
+    }
+
+    > label {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      max-width: 100%;
+      height: @form-item-label-height;
+      color: @label-color;
+      font-size: @form-item-label-font-size;
+
+      > .@{iconfont-css-prefix} {
+        font-size: @form-item-label-font-size;
+        vertical-align: top;
+      }
+
+      // Required mark
+      &.@{form-item-prefix-cls}-required:not(.@{form-item-prefix-cls}-required-mark-optional)::before {
+        display: inline-block;
+        margin-right: 4px;
+        color: @label-required-color;
+        font-size: @form-item-label-font-size;
+        font-family: SimSun, sans-serif;
+        line-height: 1;
+        content: '*';
+
+        .@{form-prefix-cls}-hide-required-mark & {
+          display: none;
+        }
+      }
+
+      // Optional mark
+      .@{form-item-prefix-cls}-optional {
+        display: inline-block;
+        margin-left: @margin-xss;
+        color: @text-color-secondary;
+
+        .@{form-prefix-cls}-hide-required-mark & {
+          display: none;
+        }
+      }
+
+      // Optional mark
+      .@{form-item-prefix-cls}-tooltip {
+        color: @text-color-secondary;
+        cursor: help;
+        writing-mode: horizontal-tb;
+        margin-inline-start: @margin-xss;
+      }
+
+      &::after {
+        & when (@form-item-trailing-colon=true) {
+          content: ':';
+        }
+        & when not (@form-item-trailing-colon=true) {
+          content: ' ';
+        }
+
+        position: relative;
+        top: -0.5px;
+        margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left;
+      }
+
+      &.@{form-item-prefix-cls}-no-colon::after {
+        content: ' ';
+      }
+    }
+  }
+
+  // ==============================================================
+  // =                            Input                           =
+  // ==============================================================
+  &-control {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    &:first-child:not([class^=~"'@{ant-prefix}-col-'"]):not([class*=~"' @{ant-prefix}-col-'"]) {
+      width: 100%;
+    }
+
+    &.has-error {
+      .@{ant-prefix}-select-selector {
+        background-color: #fff;
+        border-color: @error-color;
+      }
+    }
+  }
+
+  &-control-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: @input-height-base;
+
+    &-content {
+      flex: auto;
+      max-width: 100%;
+    }
+  }
+
+  // ==============================================================
+  // =                           Explain                          =
+  // ==============================================================
+  &-explain,
+  &-extra {
+    clear: both;
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    transition: color 0.3s @ease-out; // sync input color transition
+    .explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2);
+  }
+
+  &-explain-connected {
+    height: 0;
+    min-height: 0;
+    opacity: 0;
+  }
+
+  &-extra {
+    min-height: @form-item-margin-bottom;
+  }
+
+  .@{ant-prefix}-input-textarea-show-count {
+    &::after {
+      margin-bottom: -22px;
+    }
+  }
+
+  &-with-help &-explain {
+    height: auto;
+    min-height: @form-item-margin-bottom;
+    opacity: 1;
+  }
+}

package/lib/public/src/components/pcfactory/src/styles/components/FormGroup.less

@@ -0,0 +1,111 @@
+@import (reference) '../theme/variables/antdVariables.less';
+.ued-form-group {
+   .@{ant-prefix}-collapse {
+    border: none;
+    background-color: transparent;
+    border-radius: 0;
+    & > .@{ant-prefix}-collapse-item {
+      border: none;
+      &:last-child {
+        border-radius: 0;
+        & > .@{ant-prefix}-collapse-header {
+          border-radius: 0;
+        }
+      }
+      & > .@{ant-prefix}-collapse-header {
+        border-radius: 0;
+        padding: @padding-xs 0;
+        background-color: transparent;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        padding-right: @padding-sm;
+      }
+    }
+    .@{ant-prefix}-collapse-expand-icon {
+      display: flex;
+      align-items: center;
+    }
+    &.@{ant-prefix}-collapse-icon-position-end > .@{ant-prefix}-collapse-item > .@{ant-prefix}-collapse-header .@{ant-prefix}-collapse-arrow {
+      position: static;
+      transform: none;
+    }
+  }
+  &-head-wrap {
+    display: flex;
+    align-items: center;
+    .@{ant-prefix}-btn {
+      margin-left: @padding-xs;
+    }
+  }
+  &-title-box {
+    flex: 1;
+  }
+  &-title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 @padding-xs;
+    &-icon-line {
+      &::before {
+        content: '';
+        background-color: @primary-color;
+        border-radius: 2px;
+        width: 4px;
+        height: 12px;
+        margin: 0 @padding-xs 0 4px;
+      }
+    }
+    &-circle {
+      position: relative;
+      padding-left: 20px;
+      &::before {
+        content: '';
+        left: 0;
+        width: @padding-sm;
+        height: @padding-sm;
+        display: block;
+        position: absolute;
+        background-color: @primary-color;
+        border-radius: 0 (@padding-sm / 2) (@padding-sm / 2) 0;
+      }
+    }
+    &-icon-auto {
+      &::before {
+        content: none;
+      }
+
+      > i,
+      span {
+        margin-right: @padding-xxs;
+        color: @primary-color;
+      }
+    }
+  }
+  
+  &-fold {
+    font-size: 12px;
+    color: rgba(100, 103, 122, 1);
+  }
+  &-body-wrap {
+    border: none;
+    & > .@{ant-prefix}-collapse-content {
+      border: none;
+      border-radius: 0;
+      background-color: transparent;
+      & > .@{ant-prefix}-collapse-content-box {
+        padding: 0;
+      }
+    }
+    &-divider {
+      & > .@{ant-prefix}-collapse-content {
+        border-top: 1px solid @border-color-base;
+      }
+    }
+  }
+  &-extend-btn {
+    &:last-child {
+      margin-right: @padding-sm;
+    }
+  }
+}