amis-rev-ui 6.13.0

package/scss/components/form/_picker.scss

@@ -0,0 +1,237 @@
+.#{$ns}Picker {
+  outline: none;
+  @include input-text();
+
+  &-input:hover {
+    background: var(--Pick-status-hover-bgColor);
+    border-width: var(--Pick-status-hover-top-border-width)
+      var(--Pick-status-hover-right-border-width)
+      var(--Pick-status-hover-bottom-border-width)
+      var(--Pick-status-hover-left-border-width);
+    border-style: var(--Pick-status-hover-top-border-style)
+      var(--Pick-status-hover-right-border-style)
+      var(--Pick-status-hover-bottom-border-style)
+      var(--Pick-status-hover-left-border-style);
+    border-color: var(--Pick-status-hover-top-border-color)
+      var(--Pick-status-hover-right-border-color)
+      var(--Pick-status-hover-bottom-border-color)
+      var(--Pick-status-hover-left-border-color);
+  }
+
+  &.is-focused {
+    & > .#{$ns}Picker-input {
+      box-shadow: var(--Form-input-boxShadow);
+      background-color: var(--Pick-status-focus-bgColor);
+      border-width: var(--Pick-status-focus-top-border-width)
+        var(--Pick-status-focus-right-border-width)
+        var(--Pick-status-focus-bottom-border-width)
+        var(--Pick-status-focus-left-border-width);
+      border-style: var(--Pick-status-focus-top-border-style)
+        var(--Pick-status-focus-right-border-style)
+        var(--Pick-status-focus-bottom-border-style)
+        var(--Pick-status-focus-left-border-style);
+      border-color: var(--Pick-status-focus-top-border-color)
+        var(--Pick-status-focus-right-border-color)
+        var(--Pick-status-focus-bottom-border-color)
+        var(--Pick-status-focus-left-border-color);
+    }
+  }
+
+  &.is-disabled {
+    pointer-events: none;
+
+    .#{$ns}Picker-placeholder {
+      color: var(--Pick-status-disabled-color);
+      font-size: var(--Pick-status-disabled-fontSize);
+      font-weight: var(--Pick-status-disabled-fontWeight);
+    }
+    & > .#{$ns}Picker-input {
+      color: var(--Pick-status-disabled-color);
+      font-size: var(--Pick-status-disabled-fontSize);
+      font-weight: var(--Pick-status-disabled-fontWeight);
+      background-color: var(--Pick-status-disabled-bgColor);
+      border-width: var(--Pick-status-disabled-top-border-width)
+        var(--Pick-status-disabled-right-border-width)
+        var(--Pick-status-disabled-bottom-border-width)
+        var(--Pick-status-disabled-left-border-width);
+      border-style: var(--Pick-status-disabled-top-border-style)
+        var(--Pick-status-disabled-right-border-style)
+        var(--Pick-status-disabled-bottom-border-style)
+        var(--Pick-status-disabled-left-border-style);
+      border-color: var(--Pick-status-disabled-top-border-color)
+        var(--Pick-status-disabled-right-border-color)
+        var(--Pick-status-disabled-bottom-border-color)
+        var(--Pick-status-disabled-left-border-color);
+    }
+  }
+
+  &-placeholder {
+    color: var(--Pick-base-placeholder-color);
+    font-size: var(--Pick-base-placeholder-fontSize);
+    font-weight: var(--Pick-base-placeholder-fontWeight);
+    user-select: none;
+    flex: 1;
+    min-width: 0;
+    // margin-top: 2 * var(--Form-input-borderWidth);
+    line-height: var(--Form-input-lineHeight);
+    padding: var(--Pick-base-paddingTop) var(--Pick-base-paddingRight)
+      var(--Pick-base-paddingBottom) var(--Pick-base-paddingLeft);
+  }
+
+  &-input {
+    min-height: var(--Form-input-height);
+    height: auto;
+    padding: 0;
+    flex-wrap: nowrap;
+    background-color: var(--Pick-base-bgColor);
+    border-width: var(--Pick-base-top-border-width)
+      var(--Pick-base-right-border-width) var(--Pick-base-bottom-border-width)
+      var(--Pick-base-left-border-width);
+    border-style: var(--Pick-base-top-border-style)
+      var(--Pick-base-right-border-style) var(--Pick-base-bottom-border-style)
+      var(--Pick-base-left-border-style);
+    border-color: var(--Pick-base-top-border-color)
+      var(--Pick-base-right-border-color) var(--Pick-base-bottom-border-color)
+      var(--Pick-base-left-border-color);
+  }
+
+  // .#{$ns}Picker-values {
+  //   display: inline;
+
+  //   .#{$ns}OverflowTpl {
+  //     .#{$ns}Picker-valueLabel {
+  //       pointer-events: auto;
+  //     }
+  //   }
+  // }
+
+  &-valueWrap {
+    flex-grow: 1;
+    min-width: 0;
+    position: relative;
+    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+
+    > input {
+      width: px2rem(16px);
+      display: inline-block;
+    }
+
+    > .#{$ns}AutoFoldedList-more > span {
+      line-height: calc(
+        var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
+            2px
+          )}
+      );
+      font-size: var(--Pick-base-value-fontSize);
+      color: var(--Pick-base-value-color);
+      font-weight: var(--Pick-base-value-fontWeight);
+      background: var(--Pick-base-value-bgColor);
+      border-width: var(--Pick-base-value-top-border-width)
+        var(--Pick-base-value-right-border-width)
+        var(--Pick-base-value-bottom-border-width)
+        var(--Pick-base-value-left-border-width);
+      border-style: var(--Pick-base-value-top-border-style)
+        var(--Pick-base-value-right-border-style)
+        var(--Pick-base-value-bottom-border-style)
+        var(--Pick-base-value-left-border-style);
+      border-color: var(--Pick-base-value-top-border-color)
+        var(--Pick-base-value-right-border-color)
+        var(--Pick-base-value-bottom-border-color)
+        var(--Pick-base-value-left-border-color);
+      border-radius: var(--Pick-base-top-left-border-radius)
+        var(--Pick-base-top-right-border-radius)
+        var(--Pick-base-bottom-right-border-radius)
+        var(--Pick-base-bottom-left-border-radius);
+
+      &:hover {
+        background: var(--Form-selectValue-onHover-bg);
+      }
+    }
+  }
+
+  .#{$ns}Picker-valueWrap {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
+  }
+
+  /* tag 样式 */
+  @include tag-item(Picker);
+
+  &-btn {
+    cursor: pointer;
+    color: var(--Pick-base-icon-color);
+    flex: 30px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    svg {
+      top: 0;
+    }
+
+    svg {
+      width: var(--Pick-base-icon-size);
+      height: var(--Pick-base-icon-size);
+    }
+
+    &:hover {
+      color: var(--Picker-onHover-iconColor);
+    }
+  }
+
+  .Picker-icon {
+    width: var(--Pick-base-icon-size);
+    height: var(--Pick-base-icon-size);
+    content: var(--Pick-base-icon);
+    display: flex;
+  }
+
+  &-clear {
+    @include input-clear();
+    line-height: 1;
+    margin-right: var(--gap-xs);
+    svg {
+      top: 0;
+    }
+  }
+
+  &-overflow {
+    &-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: flex-start;
+      overflow-x: hidden;
+      overflow-y: auto;
+      height: calc(
+        (var(--Picker-tag-height) + var(--Picker-tag-marginBottom) * 4) * 3
+      );
+      max-height: calc(
+        (var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5
+      );
+
+      gap: var(--gap-xs);
+      @include tag-item(Picker);
+    }
+  }
+}
+
+.#{$ns}PickerControl.is-inline,
+.#{$ns}Form-item--inline {
+  .#{$ns}Picker {
+    display: inline-block;
+    min-width: px2rem(150px);
+  }
+}
+
+.#{$ns}PickerControl.is-mobile {
+  width: 100%;
+
+  .#{$ns}Form-item {
+    padding: 0;
+  }
+
+  .#{$ns}Picker-input {
+    border: none;
+  }
+}

package/scss/components/form/_qr-code.scss

@@ -0,0 +1,4 @@
+.#{$ns}QrCode {
+  min-height: var(--Form-input-height);
+  padding: px2rem(7px) 0;
+}

package/scss/components/form/_range.scss

@@ -0,0 +1,438 @@
+.#{$ns}InputRange {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  &.#{$ns}Form-control--sizeXs,
+  &.#{$ns}Form-control--sizeSm,
+  &.#{$ns}Form-control--sizeMd,
+  &.#{$ns}Form-control--sizeLg {
+    display: flex;
+  }
+
+  &-wrap {
+    position: relative;
+    flex: auto;
+    padding: var(--InputRange-padding) 0;
+  }
+
+  &-input {
+    width: var(--InputRange-input-width);
+    margin: var(--InputRange-input-marginTop)
+      var(--InputRange-input-marginRight) var(--InputRange-input-marginBottom)
+      var(--InputRange-input-marginLeft);
+
+    .#{$ns}Number {
+      overflow: hidden;
+    }
+
+    .#{$ns}Number-handler {
+      transition: 0.3s opacity;
+      color: var(--Number-handler-color);
+
+      &-up-inner,
+      &-down-inner {
+        cursor: pointer;
+        &:hover {
+          color: var(--Number-handler-onHover-color);
+        }
+      }
+    }
+  }
+
+  &-input-with-unit {
+    display: flex;
+    width: auto;
+
+    &:hover {
+      .#{$ns}Number,
+      .#{$ns}InputRange-unit {
+        border-width: var(--inputNumber-base-hover-top-border-width)
+          var(--inputNumber-base-hover-right-border-width)
+          var(--inputNumber-base-hover-bottom-border-width)
+          var(--inputNumber-base-hover-left-border-width);
+        border-style: var(--inputNumber-base-hover-top-border-style)
+          var(--inputNumber-base-hover-right-border-style)
+          var(--inputNumber-base-hover-bottom-border-style)
+          var(--inputNumber-base-hover-left-border-style);
+        border-color: var(--inputNumber-base-hover-top-border-color)
+          var(--inputNumber-base-hover-right-border-color)
+          var(--inputNumber-base-hover-bottom-border-color)
+          var(--inputNumber-base-hover-left-border-color);
+        border-radius: var(--inputNumber-base-hover-top-left-border-radius)
+          var(--inputNumber-base-hover-top-right-border-radius)
+          var(--inputNumber-base-hover-bottom-right-border-radius)
+          var(--inputNumber-base-hover-bottom-left-border-radius);
+      }
+    }
+
+    .#{$ns}Number-focused + .#{$ns}InputRange-unit {
+      border-width: var(--inputNumber-base-active-top-border-width)
+        var(--inputNumber-base-active-right-border-width)
+        var(--inputNumber-base-active-bottom-border-width)
+        var(--inputNumber-base-active-left-border-width);
+      border-style: var(--inputNumber-base-active-top-border-style)
+        var(--inputNumber-base-active-right-border-style)
+        var(--inputNumber-base-active-bottom-border-style)
+        var(--inputNumber-base-active-left-border-style);
+      border-color: var(--inputNumber-base-active-top-border-color)
+        var(--inputNumber-base-active-right-border-color)
+        var(--inputNumber-base-active-bottom-border-color)
+        var(--inputNumber-base-active-left-border-color);
+      border-radius: var(--inputNumber-base-active-top-left-border-radius)
+        var(--inputNumber-base-active-top-right-border-radius)
+        var(--inputNumber-base-active-bottom-right-border-radius)
+        var(--inputNumber-base-active-bottom-left-border-radius);
+    }
+    
+    .#{$ns}Number {
+      width: px2rem(80px);
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+      border-right: none !important;
+    }
+
+    .#{$ns}InputRange-unit {
+      cursor: default;
+      text-align: center;
+      min-width: unset;
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+      background-color: var(--inputNumber-base-unit-bg-color);
+    }
+  }
+
+  &.is-mobile {
+    .#{$ns}InputRange-input {
+      width: var(--InputRange-input-mobile-width);
+      // margin-left: 0;
+
+      .#{$ns}Number-handler-wrap {
+        display: none !important;
+      }
+
+      input {
+        padding: 0 !important;
+        text-align: center;
+      }
+    }
+  }
+
+  &-clear {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    svg {
+      height: var(--InputRange-clearIcon-height);
+      width: var(--InputRange-clearIcon-width);
+      fill: var(--InputRange-clearIcon-color);
+    }
+    &:hover svg {
+      fill: var(--InputRange-clearIcon-hoverColor);
+    }
+  }
+
+  // disabled
+  &.is-disabled {
+    .#{$ns}InputRange-track {
+      cursor: not-allowed;
+    }
+
+    .#{$ns}InputRange-track-active {
+      background-color: var(--InputRange-track-onActive-onDisabled-bg);
+      cursor: not-allowed;
+    }
+
+    .#{$ns}InputRange-handle-icon {
+      border-color: var(--InputRange-handle-onDisabled-border-color);
+      background-color: var(--InputRange-handle-onDisabled-bg);
+      cursor: not-allowed;
+
+      &:hover {
+        transform: none;
+      }
+
+      .icon-slider-handle {
+        g path {
+          fill: var(--InputRange-handle-icon-onDisabled-color);
+        }
+      }
+    }
+
+    .#{$ns}Number-handler {
+      cursor: not-allowed;
+
+      &-up-inner,
+      &-down-inner {
+        cursor: not-allowed;
+        &:hover {
+          color: var(--text--muted-color);
+        }
+      }
+    }
+  }
+
+  // hander
+  &-handle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0 auto calc(var(--InputRange-handle-width) / -2);
+    width: var(--InputRange-handle-width);
+    height: var(--InputRange-handle-height);
+
+    &.is-mobile {
+      width: var(--InputRange-handle-mobile-width);
+      height: var(--InputRange-handle-mobile-height);
+    }
+
+    &-icon,
+    &-drage {
+      width: 100%;
+      height: 100%;
+      appearance: none;
+      background-color: var(--InputRange-handle-bg);
+      border: var(--InputRange-handle-border);
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      outline: none;
+      border-radius: var(--InputRange-handle-border-radius);
+      transition: var(--InputRange-handle-transition);
+
+      &:hover {
+        transform: var(--InputRange-handle-onActive-transform);
+        box-shadow: var(--InputRange-handle-onFocus-boxShadow);
+      }
+
+      &:active {
+        transform: var(--InputRange-handle-onActive-transform);
+      }
+
+      &:focus {
+        box-shadow: var(--InputRange-handle-onFocus-boxShadow);
+      }
+    }
+
+    &:not(.is-mobile) {
+      .#{$ns}InputRange-handle-drage {
+        transform: var(--InputRange-handle-onActive-transform);
+        box-shadow: var(--InputRange-handle-onFocus-boxShadow);
+        border-width: var(--InputRange-handle-onDrage-border-width);
+      }
+    }
+
+    .input-range--disabled & {
+      background: var(--InputRange-slider-onDisabled-bg);
+      border: var(--InputRange-slider-onDisabled-border);
+      box-shadow: none;
+      transform: none;
+    }
+
+    .icon-slider-handle {
+      width: var(--InputRange-handle-icon-width);
+      height: var(--InputRange-handle-icon-height);
+      top: 0;
+
+      g path {
+        fill: var(--InputRange-handle-icon-color);
+      }
+    }
+  }
+
+  // track
+  &-track {
+    background: var(--InputRange-track-bg);
+    border-radius: var(--InputRange-track-border-radius);
+    cursor: pointer;
+    display: block;
+    height: var(--InputRange-track-height);
+    position: relative;
+    transition: var(--InputRange-track-transition);
+
+    &.is-active {
+      background: var(--InputRange-track-onActive-bg);
+      transition: 0.3s all;
+    }
+
+    &-dot {
+      width: var(--InputRange-track-dot-width);
+      height: var(--InputRange-track-dot-height);
+      border-radius: 50%;
+      background-color: var(--InputRange-track-dot-bg);
+      position: absolute;
+      transform: translateX(-50%);
+    }
+  }
+
+  &-track--background {
+    left: px2rem(8px);
+    margin-top: calc(-0.5 * var(--InputRange-track-height));
+    position: absolute;
+    right: px2rem(8px);
+    top: 50%;
+  }
+
+  &-track-active {
+    background: var(--InputRange-track-onActive-bg);
+    border-radius: var(--InputRange-track-border-radius);
+    position: absolute;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  // label
+  &-label {
+    position: absolute;
+    padding: var(--InputRange-label-padding);
+    background-color: var(--InputRange-label-bg);
+    color: var(--InputRange-label-color);
+    font-size: var(--InputRange-label-font-size);
+    font-weight: var(--InputRange-label-fontWeight);
+    line-height: var(--InputRange-label-lineHeight);
+    border-radius: var(--InputRange-label-border-radius);
+    visibility: hidden;
+
+    span {
+      word-break: keep-all;
+    }
+
+    &-visible {
+      visibility: visible;
+    }
+
+    &.pos-top {
+      left: 50%;
+      bottom: var(--InputRange-label-position-bottom);
+      transform: translateX(-50%);
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -4px;
+        border-width: 4px 4px 0 4px;
+        border-style: solid;
+        border-color: var(--InputRange-label-bg) transparent transparent
+          transparent;
+      }
+    }
+
+    &.pos-bottom {
+      top: var(--InputRange-label-position-bottom);
+      left: 50%;
+      transform: translateX(-50%);
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: -4px;
+        border-width: 0 4px 4px 4px;
+        border-style: solid;
+        border-color: transparent transparent var(--InputRange-label-bg)
+          transparent;
+      }
+    }
+
+    &.pos-left {
+      top: 50%;
+      transform: translateY(-50%) translateX(-100%) translateX(-12px);
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: -4px;
+        border-width: 4px 0 4px 4px;
+        border-style: solid;
+        border-color: transparent transparent transparent
+          var(--InputRange-label-bg);
+      }
+    }
+
+    &.pos-right {
+      top: 50%;
+      transform: translateY(-50%) translateX(26px);
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: -4px;
+        border-width: 4px 4px 4px 0;
+        border-style: solid;
+        border-color: transparent var(--InputRange-label-bg) transparent
+          transparent;
+      }
+    }
+  }
+
+  &.is-mobile {
+    .#{$ns}InputRange-label {
+      display: block;
+      white-space: nowrap;
+    }
+  }
+
+  // marks
+  &-marks {
+    position: relative;
+    top: 8px;
+    color: var(--InputRange-marks-color);
+    font-size: var(--InputRange-marks-fontSize);
+    font-weight: var(--InputRange-marks-fontWeight);
+    line-height: var(--InputRange-marks-lineHeight);
+    margin-top: var(--InputRange-marks-marginTop);
+    div {
+      position: absolute;
+      top: 0;
+      transform: translateX(-50%);
+
+      &:first-child {
+        transform: translateX(-10%);
+        span {
+          left: 0;
+          transform: translateX(0%);
+        }
+      }
+
+      &:last-child {
+        transform: translateX(-90%);
+        span {
+          left: 100%;
+          transform: translateX(-100%);
+        }
+      }
+
+      span {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        white-space: nowrap;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  &.is-mobile {
+    .#{$ns}InputRange-marks {
+      div {
+        top: 0;
+
+        &:nth-child(2n) {
+          top: px2rem(-30px);
+        }
+      }
+    }
+  }
+}