amis-ui 1.0.0-beta.0

package/scss/components/_array-input.scss

@@ -0,0 +1,101 @@
+.#{$ns}ArrayInput {
+  &-placeholder {
+    color: var(--text--muted-color);
+    padding-top: var(--Form-label-paddingTop);
+  }
+
+  &-addBtn {
+    > svg {
+      width: var(--Combo-addBtn-fontSize);
+      height: var(--Combo-addBtn-fontSize);
+    }
+
+    font-size: var(--Combo-addBtn-fontSize);
+
+    @include button-size(
+      var(--Combo-addBtn-paddingY),
+      var(--Combo-addBtn-paddingX),
+      var(--Combo-addBtn-fontSize),
+      var(--Combo-addBtn-lineHeight),
+      var(--Combo-addBtn-borderRadius),
+      var(--Combo-addBtn-height)
+    );
+
+    @include button-variant(
+      var(--Combo-addBtn-bg),
+      var(--Combo-addBtn-border),
+      var(--Combo-addBtn-color),
+      var(--Combo-addBtn-onHover-bg),
+      var(--Combo-addBtn-onHover-border),
+      var(--Combo-addBtn-onHover-color),
+      var(--Combo-addBtn-onActive-bg),
+      var(--Combo-addBtn-onActive-border),
+      var(--Combo-addBtn-onActive-color)
+    );
+
+    &.is-disabled {
+      pointer-events: none;
+      opacity: var(--Button-onDisabled-opacity);
+    }
+  }
+
+  &-toolbar {
+    margin-top: var(--gap-sm);
+
+    &--dnd {
+      padding-left: 29px;
+    }
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  &-sortTip {
+    color: var(--text--muted-color);
+  }
+
+  &-item {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: var(--gap-xs);
+
+    > div {
+      flex-grow: 1;
+      width: 0;
+      min-width: 120px;
+      margin-right: var(--gap-xs);
+
+      &:not(:first-child) {
+        margin-left: var(--gap-xs);
+      }
+    }
+
+    &--dragging {
+      position: relative;
+      opacity: 0.4;
+    }
+  }
+
+  &-itemRemove,
+  &-itemDrager {
+    margin: 0;
+    flex-grow: unset;
+    display: inline-block;
+    padding: var(--Form-label-paddingTop) var(--gap-xs);
+    cursor: pointer;
+
+    > svg {
+      color: var(--icon-color);
+    }
+
+    &:hover > svg {
+      color: var(--icon-onHover-color);
+    }
+  }
+
+  &-itemDrager {
+    cursor: move;
+  }
+}

package/scss/components/_audio.scss

@@ -0,0 +1,146 @@
+@mixin input-range {
+  -webkit-appearance: none;
+  outline: none;
+  border: none;
+  padding: 0;
+  background: none;
+
+  &::-webkit-slider-runnable-track {
+    background: var(--Audio-track-bg);
+    height: var(--Audio-track-height);
+    border-radius: var(--Audio-track-borderRadius);
+    border: var(--Audio-track-border);
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    border-radius: 100%;
+    cursor: pointer;
+    background: var(--Audio-thumb-bg);
+    width: var(--Audio-thumb-width);
+    height: var(--Audio-thumb-height);
+    margin-top: var(--Audio-thumb-marginTop);
+  }
+}
+
+@mixin svg {
+  width: var(--Audio-svg-width);
+  height: var(--Audio-svg-height);
+  position: relative;
+  top: var(--Audio-svg-top);
+}
+
+.#{$ns}Audio-original {
+  display: none;
+}
+
+.#{$ns}Audio--inline {
+  display: inline-block;
+}
+
+.#{$ns}Audio {
+  box-sizing: border-box;
+  height: var(--Audio-height);
+  line-height: var(--Audio-lineHeight);
+  border: var(--Audio-border);
+  padding-left: var(--Audio-item-margin);
+  overflow: hidden;
+
+  &-controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &-rates {
+    width: var(--Audio-rate-width);
+    height: var(--Audio-rate-height);
+    text-align: center;
+    background: var(--Audio-rate-bg);
+    cursor: pointer;
+    margin-right: var(--Audio-item-margin);
+  }
+
+  &-rateControl {
+    margin-right: var(--Audio-item-margin);
+
+    &::after {
+      clear: both;
+      content: '';
+    }
+
+    .#{$ns}Audio-rateControlItem {
+      width: var(--Audio-rate-width);
+      height: var(--Audio-rate-height);
+      background: var(--Audio-rate-bg);
+      cursor: pointer;
+      text-align: center;
+      float: left;
+      box-sizing: border-box;
+      border-right: var(--Audio-rateControlItem-borderRight);
+    }
+  }
+
+  &-play {
+    width: var(--Audio-play-width);
+    cursor: pointer;
+    margin-right: var(--Audio-item-margin);
+
+    svg {
+      @include svg();
+    }
+  }
+
+  &-times {
+    min-width: var(--Audio-times-width);
+    margin-right: var(--Audio-item-margin);
+    cursor: default;
+    flex-shrink: 0;
+  }
+
+  &-process {
+    flex: auto;
+    cursor: pointer;
+    min-width: var(--Audio-process-minWidth);
+    margin-right: var(--Audio-item-margin);
+
+    input[type='range'] {
+      @include input-range();
+    }
+  }
+
+  &-volume {
+    width: var(--Audio-volume-width);
+    height: var(--Audio-volume-height);
+    line-height: var(--Audio-volume-lineHeight);
+    cursor: pointer;
+    margin-right: var(--Audio-item-margin);
+
+    svg {
+      @include svg();
+    }
+  }
+
+  &-volumeControl {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: var(--Audio-volumeControl-width);
+    height: var(--Audio-volume-height);
+    line-height: var(--Audio-volume-lineHeight);
+    margin-right: var(--Audio-item-margin);
+
+    input[type='range'] {
+      @include input-range();
+    }
+
+    .#{$ns}Audio-volumeControlIcon {
+      margin-right: var(--Audio-item-margin);
+      cursor: pointer;
+    }
+
+    svg {
+      @include svg();
+    }
+  }
+}

package/scss/components/_avatar.scss

@@ -0,0 +1,55 @@
+@mixin avatar-size($size, $fontSize) {
+  width: $size;
+  height: $size;
+  line-height: $size;
+
+  i {
+    font-size: $fontSize;
+  }
+}
+
+.#{$ns}Avatar {
+  background: var(--Avatar-bg);
+  @include avatar-size(var(--Avatar-size-default), var(--Avatar-icon-size-default));
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  flex-shrink: 0;
+  border-radius: 50%;
+  text-align: center;
+
+  &--lg {
+    @include avatar-size(var(--Avatar-size-large), var(--Avatar-icon-size-large));
+  }
+
+  &--sm {
+    @include avatar-size(var(--Avatar-size-small), var(--Avatar-icon-size-small));
+  }
+
+  &--text {
+    position: absolute;
+    left: 50%;
+    transform-origin: 0 center;
+  }
+
+  &--square {
+    border-radius: 0%;
+  }
+
+  &--rounded {
+    border-radius: 10%;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:hover {
+
+    img,
+    i {
+      transform: scale(1.1);
+    }
+  }
+}

package/scss/components/_badge.scss

@@ -0,0 +1,136 @@
+.#{$ns}Badge {
+  display: inline-block;
+  position: relative;
+
+  &-text,
+  &-dot,
+  &-ribbon {
+    background: var(--danger);
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+    z-index: auto;
+    border-radius: calc(var(--Badge-size) / 2);
+  }
+
+  &--top-left {
+    top: 0;
+    left: 0;
+    right: auto;
+    transform: translate(-50%, -50%);
+  }
+
+  &--bottom-left {
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: auto;
+    transform: translate(-50%, 50%);
+  }
+
+  &--bottom-right {
+    top: auto;
+    bottom: 0;
+    left: auto;
+    right: 0;
+    transform: translate(50%, 50%);
+  }
+
+  &--danger {
+    background: var(--Badge--danger-bg);
+  }
+
+  &--info {
+    background: var(--Badge--info-bg);
+  }
+
+  &--success {
+    background: var(--Badge--success-bg);
+  }
+
+  &--warning {
+    background: var(--Badge--warning-bg);
+  }
+  // 显示文字
+  &-text {
+    color: var(--Badge-color);
+    height: var(--Badge-size);
+    line-height: var(--Badge-size);
+    white-space: nowrap;
+    text-align: center;
+    padding: 0 6px;
+  }
+
+  // 只显示小红点
+  &-dot {
+    z-index: auto;
+    width: var(--Badge-size);
+    height: var(--Badge-size);
+    border-radius: 50%;
+  }
+
+  // 横幅
+  &-ribbon-out {
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0
+  }
+
+  &-ribbon {
+    color: var(--Badge-color);
+    height: var(--Badge-size);
+    line-height: var(--Badge-size);
+    transform: translateX(calc(50% - 5px)) rotate(45deg) scale(.7);
+    transform-origin: 50% 0;
+    border-radius: 0;
+    text-align: center;
+    width: px2rem(1000px);
+    top: 5px;
+  }
+
+  &-ribbon-out--top-left, &-ribbon-out--bottom-left {
+    left: 0;
+    right: auto
+  }
+
+  &-ribbon--top-left {
+    transform: translateX(calc(-50% + 5px)) rotate(-45deg) scale(.7);
+    left: 0;
+    right: auto;
+  }
+
+  &-ribbon--bottom-left {
+    transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(.7);
+    transform-origin: 50% 100%;
+    left: 0;
+    right: auto;
+    bottom: 5px;
+    top: auto;
+  }
+
+  &-ribbon--bottom-right {
+    transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(.7);
+    transform-origin: 50% 100%;
+    left: auto;
+    right: 0;
+    bottom: 5px;
+    top: auto;
+  }
+
+  // 小红点的动画
+  @keyframes badgeDotAnimation {
+    0% {
+      transform: scale(0.8);
+      opacity: 0.4;
+    }
+
+    to {
+      transform: scale(3.2);
+      opacity: 0;
+    }
+  }
+}

package/scss/components/_barcode.scss

@@ -0,0 +1,6 @@
+.#{$ns}BarCode {
+  > img {
+    display: block;
+    margin: 0 auto;
+  }
+}

package/scss/components/_breadcrumb.scss

@@ -0,0 +1,98 @@
+.#{$ns}Breadcrumb {
+  font-size: var(--Breadcrumb-item-fontSize);
+  font-weight: var(--fontWeightBase);
+  color: var(--Breadcrumb-item-default-color);
+
+  &-icon {
+    margin-right: px2rem(2px);
+    min-width: var(--gap-xs);
+  }
+
+  &-item {
+    position: relative;
+
+    &-default {
+      cursor: pointer;
+      color: var(--Breadcrumb-item-default-color);
+    }
+    &-dropdown {
+      cursor: pointer;
+      color: var(--BreadcrumbDropdown-item-default-color);
+    }
+    a:hover {
+      color: var(--Breadcrumb-item-hover-color);
+    }
+    a:active {
+      color: var(--Breadcrumb-item-active-color);
+    }
+
+    &-last &-default {
+      font-weight: var(--fontWeightMd);
+      color: var(--Breadcrumb-item-last-color);
+    }
+
+    &-caret {
+      margin-left: var(--gap-sm);
+      cursor: pointer;
+      display: inline-block;
+      transition: transform var(--animation-duration) ease;
+  
+      > svg {
+        width: px2rem(10px);
+        height: px2rem(10px);
+        top: px2rem(1px);
+      }
+    }
+
+    &.is-opened &-caret {
+      transform: translateY(px2rem(2px)) rotate(180deg);
+      color: var(--Breadcrumb-item-hover-color);
+    }
+
+    &.is-opened &-default{
+      color: var(--Breadcrumb-item-hover-color);
+    }
+  }
+
+  &-separator {
+    user-select: none;
+    margin: 0 var(--gap-sm);
+    text-align: center;
+    min-width: var(--gap-xs);
+  }
+
+  &-dropdown {
+    position: absolute;
+    z-index: $zindex-dropdown;
+    top: 100%;
+    left: 0;
+    margin: px2rem(1px) 0;
+    background: var(--DropDown-menu-bg);
+    list-style: none;
+    padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
+    border: var(--DropDown-menu-borderWidth) solid var(--DropDown-menu-borderColor);
+    border-radius: var(--DropDown-menu-borderRadius);
+    box-shadow: var(--DropDown-menu-boxShadow);
+    min-width: 100%;
+    text-align: left;
+    font-size: var(--BreadcrumbDropdown-item-fontSize);
+  }
+
+  &-dropdown > li {
+    padding: var(--BreadcrumbDropdown-item-paddingX) var(--BreadcrumbDropdown-item-paddingY);
+    white-space: nowrap;
+    box-sizing: border-box;
+    padding-left: px2rem(12px);
+    vertical-align: middle;
+    user-select: none;
+    color: var(--BreadcrumbDropdown-item-default-color);
+    background-color: var(--BreadcrumbDropdown-item-default-bg);
+
+    &:hover {
+      background: var(--BreadcrumbDropdown-item-hover-bg);
+      a {
+        color: var(--Breadcrumb-item-hover-color);
+      }
+    }
+  }
+}

package/scss/components/_button-group.scss

@@ -0,0 +1,131 @@
+.#{$ns}ButtonGroup {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  > .#{$ns}Button {
+    position: relative;
+    flex: 0 1 auto;
+    max-width: px2rem(140px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  > .#{$ns}Button {
+    @include hover {
+      z-index: 1;
+    }
+
+    &:focus,
+    &:active,
+    &.active,
+    &.is-active {
+      z-index: 1;
+    }
+  }
+
+  .#{$ns}Button + .#{$ns}Button,
+  .#{$ns}Button + .#{$ns}ButtonGroup,
+  .#{$ns}ButtonGroup + .#{$ns}Button,
+  .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
+    margin-left: calc(var(--Button-borderWidth) * -1);
+  }
+
+  &--block {
+    display: block;
+  }
+}
+
+.#{$ns}ButtonToolbar {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  .#{$ns}ButtonGroup {
+    margin-left: var(--gap-xs);
+    margin-top: var(--gap-xs);
+    width: auto;
+  }
+}
+
+.#{$ns}ButtonGroup {
+  > .#{$ns}Button:first-child {
+    margin-left: 0;
+  }
+
+  // cxd的ButtonGroup的is-active和:active样式不一样，这里做个兼容
+  .#{$ns}Button--primary.is-active {
+    color: var(--ButtonGroup--primary-isActive-color);
+    background: var(--ButtonGroup--primary-isActive-bg);
+  }
+
+  > .#{$ns}Button:not(:last-child),
+  > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > .#{$ns}Button:not(:first-child),
+  > .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  > .#{$ns}ButtonGroup:last-child > .#{$ns}Button:not(:last-child) {
+    border-top-right-radius: 0;
+  }
+}
+
+.#{$ns}ButtonGroup--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  .#{$ns}Button,
+  .#{$ns}ButtonGroup {
+    width: 100%;
+  }
+
+  > .#{$ns}Button + .#{$ns}Button,
+  > .#{$ns}Button + .#{$ns}ButtonGroup,
+  > .#{$ns}ButtonGroup + .#{$ns}Button,
+  > .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
+    margin-top: calc(var(--Button-borderWidth) * -1);
+    margin-left: 0;
+  }
+
+  > .#{$ns}Button:not(:last-child),
+  > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > .#{$ns}Button:not(:first-child),
+  > .#{$ns}ButtonGroup:not(:first-child) > .btn {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  /* 修正头尾的圆角 */
+  > .#{$ns}Button:first-child,
+  > .#{$ns}ButtonGroup:first-child > .#{$ns}Button:first-child {
+    border-top-right-radius: var(--Button-borderRadius);
+  }
+
+  > .#{$ns}Button:last-child,
+  > .#{$ns}ButtonGroup:last-child > .#{$ns}Button:last-child {
+    border-bottom-left-radius: var(--Button-borderRadius);
+  }
+}
+
+.#{$ns}ButtonGroup--tiled {
+  display: flex;
+
+  .#{$ns}Button,
+  .#{$ns}ButtonGroup {
+    flex-grow: 1;
+    text-align: center;
+  }
+}