amis-ui 1.0.0-beta.0

package/scss/components/form/_text.scss

@@ -0,0 +1,307 @@
+.#{$ns}TextControl {
+  @include input-text();
+
+  &-placeholder {
+    color: var(--Form-input-placeholderColor);
+    user-select: none;
+    position: absolute;
+    left: var(--Form-input-paddingX);
+    top: var(--Form-input-paddingY);
+    margin-top: calc(2 * var(--Form-input-borderWidth));
+    line-height: var(--Form-input-lineHeight);
+  }
+
+  // &-valueWrap {
+  //   flex-grow: 1;
+  //   line-height: 1;
+  //   flex-wrap: wrap;
+  //   display: flex;
+
+  //   > input {
+  //     display: inline-block;
+  //     width: auto;
+  //     vertical-align: middle;
+  //   }
+  // }
+
+  &--withAddOn {
+    display: flex;
+    flex-wrap: nowrap;
+
+    @include media-breakpoint-up(sm) {
+      &.#{$ns}Form-control--sizeXs,
+      &.#{$ns}Form-control--sizeSm,
+      &.#{$ns}Form-control--sizeMd,
+      &.#{$ns}Form-control--sizeLg {
+        display: inline-flex;
+
+        > .#{$ns}TextControl-input {
+          min-width: unset;
+        }
+      }
+    }
+  }
+
+  &--withAddOn > &-input {
+    flex-basis: 1;
+    flex-grow: 1;
+    min-width: 0;
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--Form-input-borderRadius);
+      border-bottom-left-radius: var(--Form-input-borderRadius);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--Form-input-borderRadius);
+      border-bottom-right-radius: var(--Form-input-borderRadius);
+    }
+
+    @if var(--Form-input-addOnDividerBorderWidth) ==0 {
+      &:not(:last-child) {
+        border-right-width: 0;
+      }
+    }
+  }
+
+  &-addOn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: px2rem(10px);
+    padding-right: px2rem(10px);
+    background: var(--Form-input-addOnBg);
+    color: var(--Form-input-addOnColor);
+    border-color: var(--Form-input-borderColor);
+    border-style: solid;
+    border-width: px2rem(1px) 0;
+
+    &:first-child {
+      border-left-width: px2rem(1px);
+    }
+
+    &:last-child {
+      border-right-width: px2rem(1px);
+      border-top-right-radius: var(--Form-input-borderRadius);
+      border-bottom-right-radius: var(--Form-input-borderRadius);
+    }
+  }
+
+  &--withAddOn > &-button {
+    > .#{$ns}Button {
+      position: relative;
+      border-radius: 0;
+      margin-left: px2rem(-1px);
+      border: var(--InputGroup-button-borderWidth) solid
+        var(--InputGroup-button-borderColor);
+    }
+
+    &:not(:last-child) .#{$ns}Button {
+      border-right: 0;
+    }
+
+    &:first-child .#{$ns}Button {
+      @if var(--InputGroup-addOn-borderRadius) {
+        border-top-left-radius: var(--InputGroup-addOn-borderRadius);
+        border-bottom-left-radius: var(--InputGroup-addOn-borderRadius);
+      }
+    }
+
+    &:last-child .#{$ns}Button {
+      @if var(--InputGroup-addOn-borderRadius) {
+        border-top-right-radius: var(--InputGroup-addOn-borderRadius);
+        border-bottom-right-radius: var(--InputGroup-addOn-borderRadius);
+      }
+    }
+  }
+
+  &--withAddOn.is-focused > &-button .#{$ns}Button {
+    border-color: var(--Form-input-onFocused-borderColor);
+  }
+
+  &--withAddOn.is-error > &-addOn {
+    border-color: var(--Form-input-onError-borderColor);
+  }
+
+  &--withAddOn.is-focused > &-addOn {
+    border-color: var(--Form-input-onFocused-borderColor);
+    color: var(--Form-input-onFocus-addOnColor);
+    box-shadow: var(--Form-input-boxShadow);
+  }
+
+  &--withAddOn.is-disabled > &-addOn {
+    color: var(--text--muted-color);
+  }
+
+  &--withAddOn.is-inline {
+    display: inline-block;
+
+    @include media-breakpoint-up(sm) {
+      &.#{$ns}Form-control--sizeXs,
+      &.#{$ns}Form-control--sizeSm,
+      &.#{$ns}Form-control--sizeMd,
+      &.#{$ns}Form-control--sizeLg {
+        > .#{$ns}TextControl-input {
+          min-width: 100%;
+        }
+      }
+    }
+  }
+
+  &-input--withAC {
+    position: relative;
+    flex-wrap: wrap;
+
+    input {
+      width: auto;
+      // color: var(--Form-input-placeholderColor);
+    }
+  }
+
+  &-sugs {
+    position: absolute;
+    background: var(--Form-select-menu-bg);
+    color: var(--Form-select-menu-color);
+    border: var(--Form-input-borderWidth) solid
+      var(--Form-input-onFocused-borderColor);
+    left: px2rem(-1px);
+    right: px2rem(-1px);
+    top: calc(100% + #{px2rem(4px)});
+    z-index: 10;
+    max-height: px2rem(300px);
+    overflow: auto;
+  }
+
+  &-sugItem {
+    padding: calc(
+        (
+            var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize) - #{px2rem(2px)}
+          ) / 2
+      )
+      px2rem(12px);
+
+    svg {
+      width: px2rem(16px);
+      margin-top: px2rem(4px);
+      float: right;
+      fill: var(--Form-input-onHover-iconColor);
+    }
+
+    &:not(.is-disabled) {
+      cursor: pointer;
+    }
+
+    &.is-highlight {
+      color: var(--Form-select-menu-onHover-color);
+      background: var(--Form-select-menu-onHover-bg);
+    }
+
+    .is-matched {
+      color: var(--Form-select-menu-onActive-color);
+    }
+  }
+
+  &-value {
+    user-select: none;
+    line-height: calc(
+      var(--Form-input-lineHeight) * var(--Form-input-fontSize)
+    );
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  &-input--multiple {
+    height: auto;
+    min-height: var(--Form-input-height);
+    padding: calc(var(--Form-input-paddingY) - #{px2rem(2px)})
+      calc(var(--Form-input-paddingX) - #{px2rem(3px)});
+  }
+
+  &-input--multiple &-placeholder {
+    margin-top: 0;
+  }
+
+  &-input--multiple > input {
+    margin-top: 2px;
+  }
+
+  &-input--multiple &-valueWrap {
+    white-space: normal;
+
+    margin-bottom: calc(var(--gap-xs) * -1);
+
+    > input {
+      margin-bottom: var(--gap-xs);
+    }
+  }
+
+  &-input--multiple &-value {
+    white-space: nowrap;
+    line-height: calc(
+      var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
+    );
+    font-size: var(--Form-selectValue-fontSize);
+    background: var(--Form-select-multiple-bgColor);
+    border-radius: px2rem(2px);
+    margin: 2px 3px;
+
+    display: flex;
+    align-items: center;
+    padding: 0 var(--gap-sm);
+  }
+
+  &-valueIcon.icon-close {
+    top: 0;
+    cursor: pointer;
+    margin-left: var(--gap-sm);
+    width: px2rem(10px);
+    color: var(--default-icon-color);
+  }
+
+  &-input--multiple &-valueLabel {
+    line-height: var(--gap-xl);
+    max-width: px2rem(60px);
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-counter {
+    color: var(--text--muted-color);
+  }
+
+  .has-error--maxLength &-counter {
+    color: var(--danger);
+  }
+
+  // yunshe4.0
+  &-input {
+    &:hover {
+      border-color: var(--Form-input-onHover-borderColor);
+    }
+  }
+
+  &-revealPassword {
+    font-size: 0;
+
+    .icon {
+      width: var(--Form-input-password-icon-size);
+      height: var(--Form-input-password-icon-size);
+      color: var(--Form-input-password-icon-color);
+      cursor: pointer;
+    }
+  }
+}
+
+// 特殊处理 input-password。否则 form 内联模式，icon 会换行
+input.#{$ns}TextControl-input-password {
+  flex-basis: 0;
+}
+
+.#{$ns}TextControl.is-disabled {
+  &-input input {
+    color: var(--Form-input-onDisabled-color);
+  }
+}

package/scss/components/form/_textarea.scss

@@ -0,0 +1,62 @@
+.#{$ns}TextareaControl {
+  @include input-text();
+  --Form-input-clearBtn-padding: #{px2rem(2px)};
+
+  position: relative;
+
+  > textarea {
+    @include input-border();
+
+    border: 1px solid var(--Form-input-borderColor);
+    border-radius: var(--Form-input-borderRadius);
+    background: var(--Form-input-bg);
+    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+    font-size: var(--Form-input-fontSize);
+    display: block;
+    width: 100%;
+    line-height: var(--Form-input-lineHeight);
+    outline: none;
+    resize: vertical;
+
+    &::placeholder {
+      color: var(--Form-input-placeholderColor);
+    }
+
+    // yunshe4.0
+    &:hover {
+      border-color: var(--Form-input-onHover-borderColor);
+    }
+  }
+
+  &-counter {
+    position: absolute;
+    right: var(--Form-input-paddingX);
+    bottom: var(--Form-input-paddingY);
+    font-size: var(--fontSizeSm);
+    padding: 0 5px;
+    border-radius: 3px;
+    color: #84868c;
+
+    &.is-empty {
+      color: #84868c;
+    }
+
+    &.is-clearable {
+      right: calc(
+        var(--Form-input-paddingX) + var(--Form-input-clearBtn-size) +
+          var(--Form-input-clearBtn-padding) * 2 + #{px2rem(5px)}
+      );
+    }
+  }
+
+  .has-error--maxLength &-counter {
+    background: var(--danger);
+  }
+
+  &-clear {
+    @include input-clear();
+    position: absolute;
+    right: var(--Form-input-paddingX);
+    bottom: var(--Form-input-paddingY);
+  }
+}

package/scss/components/form/_tinymce.scss

@@ -0,0 +1,6 @@
+.tox-tinymce-aux {
+  z-index: $zindex-top;
+}
+.tox-fullscreen .tox.tox-tinymce-aux {
+  z-index: $zindex-top;
+}

package/scss/components/form/_transfer.scss

@@ -0,0 +1,320 @@
+.#{$ns}Transfer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  min-height: px2rem(300px);
+  position: relative;
+
+  &-searchbox {
+    width: 100%;
+  }
+
+  &--inline {
+    display: inline-flex;
+    flex-wrap: nowrap;
+  }
+
+  &-title {
+    display: flex;
+    align-items: center;
+    background: var(--Transfer-title-bg);
+    height: px2rem(30px);
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--Form-input-fontSize);
+    padding: calc(
+        (
+            #{px2rem(30px)} - var(--Form-input-lineHeight) * var(--Form-input-fontSize)
+          ) / 2
+      )
+      var(--gap-sm);
+    flex-direction: row;
+    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
+
+    &--light {
+      background: transparent;
+    }
+
+    > span {
+      flex-grow: 1;
+    }
+  }
+
+  &-select {
+    overflow: hidden;
+  }
+
+  &-select,
+  &-result {
+    width: 0;
+    min-width: px2rem(200px);
+    max-height: px2rem(400px);
+    flex-grow: 1;
+    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--borderRadius);
+  }
+
+  &-select > &-selection,
+  &-result > &-value {
+    flex-grow: 1;
+    max-height: 100%;
+    overflow: auto;
+    position: relative; // 貌似不加 relative 会有 bug。
+  }
+
+  &-select > .#{$ns}ChainedSelection {
+    min-height: unset;
+    overflow: hidden;
+    
+    .#{$ns}ChainedSelection-col {
+      height: 100%;
+      overflow: auto;
+      min-width: px2rem(130px);
+    }
+  }
+
+  .#{$ns}-ResultTreeList {
+    border-top: 1px solid var(--borderColor);
+  }
+
+  .#{$ns}AssociatedSelection {
+    overflow: hidden;
+
+    &-left,
+    &-right {
+      min-height: unset;
+    }
+  }
+
+  &-select {
+    overflow: hidden;
+  }
+
+  &-search + &-selection {
+    border-top: 1px solid var(--borderColor);
+  }
+
+  &-selection .#{$ns}ListSelection-placeholder {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+  }
+
+  &-search {
+    padding: var(--gap-sm);
+  }
+
+  &-mid {
+    min-width: px2rem(10px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &-arrow {
+    width: 40px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--borderColor);
+    margin: 0 10px;
+    color: var(--icon-color);
+
+    > svg {
+      top: 0;
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &-checkAll,
+  &-clearAll {
+    user-select: none;
+    cursor: pointer;
+
+    &.is-disabled {
+      pointer-events: none;
+      color: var(--text--muted-color);
+    }
+  }
+
+  .#{$ns}Tree {
+    padding: px2rem(2px) px2rem(10px);
+
+    &-itemLabel:hover::after {
+      left: 0;
+    }
+  }
+}
+
+.#{$ns}TabsTransfer {
+  .#{$ns}Transfer-title {
+    height: 40px;
+  }
+  &-tabs {
+    .#{$ns}Tabs-linksContainer {
+      padding-left: px2rem(20px);
+      padding-top: px2rem(8px);
+      background-color: var(--TabsTransfer-title-bg);
+    }
+  }
+
+  &-search {
+    margin: var(--gap-sm) var(--gap-sm);
+    .#{$ns}InputBox {
+      border: 1px solid var(--TabsTransfer-border-color);
+    }
+  }
+
+  .#{$ns}Transfer-result {
+    .#{$ns}Transfer-title {
+      height: px2rem(40px);
+      line-height: px2rem(40px);
+    }
+  }
+
+  // .#{$ns}Transfer-result {
+  //   flex-grow: unset;
+  // }
+
+  &-placeholder {
+    @include checkboxes-placeholder();
+  }
+
+  &-tab {
+    padding: 0;
+    overflow: auto;
+  }
+
+  &-tabs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    > .#{$ns}Tabs-links {
+      border-top: 0 none;
+      padding: 5px 0 0 5px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+
+      > .#{$ns}Tabs-link > a:first-child {
+        font-size: 12px;
+        padding: 7px 8px;
+      }
+
+      .#{$ns}TabsTransfer-tabsMid {
+        flex-grow: 1;
+      }
+
+      > .#{$ns}SearchBox {
+        margin: -5px 5px 0 10px;
+
+        &.is-active {
+          width: 150px;
+          margin-right: 10px;
+          padding-left: 10px;
+        }
+      }
+    }
+
+    > .#{$ns}Tabs-content {
+      flex-grow: 1;
+      min-height: 0;
+      position: relative;
+      padding: 5px 0 0;
+
+      > .#{$ns}Tabs-pane {
+        position: relative;
+        height: 100%;
+
+        &.is-active {
+          display: flex;
+          flex-direction: column;
+
+          > .#{$ns}Transfer-selection {
+            flex-grow: 1;
+            max-height: 100%;
+            overflow: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+.#{$ns}TransferControl {
+  position: relative;
+  overflow: hidden;
+
+  &.is-inline {
+    display: inline-block;
+  }
+}
+
+.#{$ns}TransferPicker {
+  &-icon {
+    transition: transform var(--animation-duration) ease-out;
+    margin: 5px 5px 5px auto;
+    display: flex;
+    color: var(--Form-select-caret-iconColor);
+    &:hover {
+      color: var(--Form-select-caret-onHover-iconColor);
+    }
+
+    > svg {
+      width: px2rem(12px);
+      height: px2rem(12px);
+      top: 0;
+    }
+  }
+}
+
+.#{$ns}TransferDropDown {
+  &:hover {
+    border: px2rem(1px) solid ver(--menu-active-color);
+  }
+  &-icon {
+    transform: rotate(90deg);
+    transition: transform var(--animation-duration) ease-out;
+    margin: px2rem(5px) 0 px2rem(5px) auto;
+    display: flex;
+    color: var(--Form-select-caret-iconColor);
+    &:hover {
+      color: var(--Form-select-caret-onHover-iconColor);
+    }
+
+    > svg {
+      width: px2rem(10px);
+      height: px2rem(10px);
+      top: 0;
+    }
+  }
+
+  &.is-active &-icon {
+    transform: rotate(-90deg);
+  }
+}
+.#{$ns}TransferDropDown-content {
+  min-height: px2rem(200px);
+  min-width: px2rem(400px);
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-xs) 0;
+
+  &.is-mobile {
+    width: 100%;
+  }
+  & > .#{$ns}Transfer-selection {
+    flex-grow: 1;
+    max-height: var(--Transfer-selection-maxHeight);
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative; // 貌似不加 relative 会有 bug。
+  }
+}

package/scss/components/form/_tree-select.scss

@@ -0,0 +1,39 @@
+.#{$ns}TreeSelectControl {
+  position: relative;
+
+  > .#{$ns}TreeSelect-popover {
+    width: 100%;
+  }
+}
+
+.#{$ns}TreeSelect {
+  @include input-text();
+  outline: none;
+
+  &.is-opened {
+    border-color: var(--Form-input-onFocused-borderColor);
+    box-shadow: var(--Form-input-boxShadow);
+    background: var(--Form-input-onFocused-bg);
+  }
+
+  &-popup {
+    height: px2rem(400px);
+  }
+}
+
+.#{$ns}TreeSelect-popover {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+
+  > .#{$ns}Tree {
+    background: var(--TreeSelect-popover-bg);
+    border: var(--Form-input-borderWidth) solid
+      var(--Form-input-onFocused-borderColor);
+    padding: var(--gap-xs) var(--Form-input-paddingX);
+    border-radius: 0;
+    margin-top: -1px;
+    max-height: 400px;
+    overflow: auto;
+  }
+}