amis-rev-ui 6.13.0

package/scss/components/_mobile-dev-tool.scss

@@ -0,0 +1,175 @@
+.ae-MobileDevTool {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  background-color: #fff;
+  z-index: 1001;
+  border-bottom: 1px solid #dee2e6;
+  height: 20px;
+  &-dimensions {
+    width: 40%;
+    display: flex;
+    justify-content: end;
+  }
+
+  &-select {
+    font-size: 12px;
+    padding: 0;
+    border: none !important;
+    min-height: initial;
+    margin-left: 10px;
+    vertical-align: initial;
+    span {
+      font-size: 12px !important;
+    }
+    .cxd-PopOver {
+      width: 180px !important;
+      z-index: 10000;
+    }
+  }
+  &-dimension {
+    span {
+      margin-right: 5px;
+      padding: 0 2px;
+    }
+    &-input {
+      width: 32px;
+      height: 16px;
+      border: none;
+      border-radius: 0.125rem;
+      padding: 0 2px;
+      font-size: 12px;
+      text-align: center;
+      margin-right: 5px;
+      &:focus,
+      &:hover {
+        outline: none;
+        border: 1px solid #2468f2;
+      }
+    }
+  }
+  &-right {
+    width: 40%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: 20px;
+    &-scale {
+      margin-right: 10px;
+      display: flex;
+      position: relative;
+      &-auto-value {
+        position: absolute;
+        background-color: #fff;
+        width: 40px;
+        left: 10px;
+      }
+      &-auto {
+        cursor: pointer;
+        margin-left: 10px;
+        &:hover {
+          color: #2468f2;
+        }
+      }
+    }
+    &-rotate-screen {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      position: absolute;
+      top: 1px;
+      &:hover {
+        color: #2468f2;
+      }
+    }
+  }
+}
+.ae-PreviewIFrameBody {
+  * {
+    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAAFAAAAACy3fD9AAABQ0lEQVQ4EaWVsWrDMBCGI4mCMxRMxgxZvKTQyWvmDn0AQx/Aj+U38NbVXTMUitd4SrZAIARDZ+P+v/EZ46pJKgmEpP90n2Wf7qxmlpYkiQnDcN00zdoYs2zb9pHblFLf0I7QqrquqzzPm6m7mgppmj5Be0FfTG2T9QXrIsuy3Vg3o4UCjKBX9PlI/2vKPc9xHD+UZXmQTQOwh23E8I9x1UP39OmA/WvyZK6N0BNOejYMQBAEbyDd85rXHriMouhLM5rYdSsA10BiW5CleTVE8R3J0rxnviDxJ0vLpRXRZyRL+wBsvprpZDO4aGQxKEcXZ5sPWQxKZTO6aGRpVg04M9F924Us3ZegwpcG/4KsLpeZg0xwiCtH8BZl7JO+Q7VhCXKEEvYhBxmAFADds2pgyuy5VSz43d/lZJh37VfFpurzC/gBw0WEc6PyhBMAAAAASUVORK5CYII='),
+      auto !important;
+  }
+}
+
+.ae-MobileDevTool-rightHandle {
+  cursor: ew-resize;
+  position: absolute;
+  right: -6px;
+  top: 40%;
+  width: 10px;
+  height: 22px;
+  z-index: 1000;
+  border: 1px solid #dee2e6;
+  background-color: #fff;
+  border-radius: 0.125rem;
+  color: #666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    color: #000;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  }
+  &::before {
+    content: '···';
+    display: block;
+    transform: rotate(90deg);
+  }
+}
+.ae-MobileDevTool-bottomHandle {
+  cursor: ns-resize;
+  position: absolute;
+  bottom: -6px;
+  left: calc(50% - 11px);
+  width: 22px;
+  height: 10px;
+  z-index: 1000;
+  border: 1px solid #dee2e6;
+  background-color: #fff;
+  border-radius: 0.125rem;
+  color: #666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    color: #000;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  }
+  &::before {
+    content: '···';
+    display: block;
+  }
+}
+
+.height-move {
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000000;
+    cursor: ns-resize;
+  }
+  * {
+    user-select: none;
+  }
+}
+
+.width-move {
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000000;
+    cursor: ew-resize;
+  }
+  * {
+    user-select: none;
+  }
+}

package/scss/components/_modal.scss

@@ -0,0 +1,282 @@
+.is-modalOpened {
+  overflow: hidden;
+
+  .#{$ns}Modal {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+
+@keyframes modalIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -300px, 0) scale(0.2);
+  }
+}
+
+@keyframes modalOut {
+  to {
+    opacity: 0;
+    transform: translate3d(0, -300px, 0) scale(0.2);
+  }
+}
+
+.#{$ns}Modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-modal;
+  overflow: hidden;
+  outline: 0;
+
+  &-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
+    pointer-events: auto;
+    background: var(--Modal-bg);
+    background-clip: padding-box;
+    outline: 0;
+    z-index: 2;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: var(--Modal-content-startMarginTop);
+    margin-bottom: var(--gap-md);
+    padding: var(--dialog-default-padding-y) var(--Modal-body-paddingX);
+    border: var(--Modal-content-borderWidth) solid
+      var(--Modal-content-borderColor);
+    border-radius: var(--dialog-default-border-radius);
+
+    &.in,
+    &.out {
+      animation-duration: var(--animation-duration);
+      animation-fill-mode: both;
+    }
+
+    &.in {
+      animation-name: modalIn;
+    }
+
+    &.out {
+      animation-name: modalOut;
+    }
+  }
+  &-fullScreen {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    margin: auto;
+  }
+
+  &-draggable > &-header {
+    cursor: move;
+  }
+
+  &-overlay {
+    transition: ease-in-out opacity var(--animation-duration);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    background: var(--Modal-overlay-bg);
+    pointer-events: none; // 很重要，如果不设置，弹框虽然滚轮可滚，但是鼠标没办法操作滚动条。
+    opacity: 0;
+
+    &.in {
+      opacity: 1;
+    }
+
+    &.out {
+      opacity: 0;
+    }
+  }
+
+  &-header {
+    padding: var(--Modal-header-paddingY) #{px2rem(24px)};
+    background: var(--Modal-header-bg);
+    @include clearfix();
+    border-bottom: var(--Modal-body-borderTop);
+    border-top-left-radius: var(--Modal-content-borderRadius);
+    border-top-right-radius: var(--Modal-content-borderRadius);
+    &-icons {
+      position: absolute;
+      right: 24px;
+    }
+  }
+
+  &-title {
+    font-size: var(--dialog-header-fontSize);
+    color: var(--dialog-header-color);
+    font-weight: var(--dialog-header-fontWeight);
+    height: var(--dialog-header-height);
+  }
+
+  &-close {
+    float: right;
+    color: var(--Modal-close-color);
+    line-height: inherit;
+    text-decoration: none;
+    vertical-align: middle;
+    z-index: calc(#{$zindex-spinner-overlay} + 1);
+
+    .Dialog-close {
+      content: var(--dialog-icon-icon);
+    }
+
+    svg {
+      width: var(--dialog-icon-size);
+      height: var(--dialog-icon-size);
+      fill: var(--Modal-close-color);
+      color: var(--dialog-icon-color);
+    }
+
+    &:not(.is-disabled) {
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: none;
+        color: var(--Model-close-onHover-color);
+
+        svg {
+          fill: var(--Model-close-onHover-color);
+        }
+      }
+    }
+  }
+  &-screen {
+    margin-right: #{px2rem(16px)};
+  }
+
+  &-content > &-close {
+    position: absolute;
+    right: var(--gap-md);
+    top: var(--gap-sm);
+    z-index: 10;
+  }
+
+  &-body {
+    margin: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
+    flex-grow: 1;
+    height: auto;
+    // overflow-y: auto;
+    padding: 0 #{px2rem(24px)};
+    font-size: var(--dialog-content-fontSize);
+    color: var(--dialog-content-color);
+  }
+
+  &-footer {
+    // @include clearfix();
+
+    height: var(--dialog-footer-height);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--Modal-footer-padding) #{px2rem(24px)};
+    border-top: var(--Modal-body-borderBottom);
+    margin: var(--Modal-footer-marginY) var(--Modal-footer-marginX);
+    border-bottom-left-radius: var(--Modal-content-borderRadius);
+    border-bottom-right-radius: var(--Modal-content-borderRadius);
+
+    .#{$ns}Button {
+      min-width: var(--Modal-footer-button-width);
+      margin-left: var(--dialog-footer-margin-left);
+    }
+  }
+}
+
+@for $i from (2) through 10 {
+  .#{$ns}Modal--#{$i}th {
+    .#{$ns}Modal-content {
+      margin-top: calc(
+        var(--Modal-content-startMarginTop) +
+          #{($i - 1)} *
+          var(--Modal-content-stepMarginTop)
+      );
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .#{$ns}Modal-content:not(.#{$ns}Modal-content-custom) {
+    max-width: var(--dialog-size-normal-width);
+  }
+
+  .#{$ns}Modal--sm .#{$ns}Modal-content {
+    max-width: var(--dialog-size-sm-width);
+  }
+
+  .#{$ns}Modal--base .#{$ns}Modal-content {
+    max-width: var(--Modal-widthBase);
+  }
+
+  .#{$ns}Modal--md .#{$ns}Modal-content {
+    max-width: var(--Modal-widthMd);
+  }
+
+  .#{$ns}Modal--lg .#{$ns}Modal-content {
+    max-width: var(--dialog-size-lg-width);
+  }
+
+  .#{$ns}Modal--xl .#{$ns}Modal-content {
+    max-width: var(--dialog-size-xl-width);
+  }
+}
+
+.#{$ns}Dialog-info {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: left;
+}
+
+.#{$ns}Dialog-error {
+  color: var(--danger);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.#{$ns}Modal--full {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  > .#{$ns}Modal-content {
+    flex-basis: 0;
+    flex-grow: 1;
+    margin: 30px;
+    width: calc(100% - 60px);
+    max-width: unset;
+
+    > .#{$ns}Modal-body {
+      height: 0;
+      overflow: auto;
+    }
+  }
+}
+
+/* 移动端样式调整 */
+@include media-breakpoint-down(sm) {
+  .#{$ns}Modal {
+    .#{$ns}Modal-footer {
+      display: flex;
+
+      > .#{$ns}Button {
+        min-width: 0;
+        min-height: 0;
+        flex: 1;
+        height: px2rem(44px);
+        font-size: var(--fontSizeMd);
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/_multiline-text.scss

@@ -0,0 +1,20 @@
+.#{$ns}MultilineText {
+  position: relative;
+  &-counter,
+  &-display {
+    white-space: pre-line;
+    overflow: hidden;
+  }
+
+  &-counter {
+    visibility: hidden;
+    position: absolute;
+    width: 100%;
+    z-index: -99;
+  }
+
+  &-button-wrapper {
+    margin-top: --(gap-xs);
+    text-align: right;
+  }
+}

package/scss/components/_nav.scss

@@ -0,0 +1,45 @@
+.#{$ns}Nav {
+  position: relative;
+  cursor: pointer;
+  background-color: var(--Layout-light-backgroundColor);
+  font-size: var(--Nav-item-fontSize);
+  line-height: var(--Nav-Item-height);
+  min-height: px2rem(10px);
+  color: var(--colors-neutral-text-2);
+
+  &-horizontal {
+    line-height: var(--Nav-Item-height--horizontal);
+  }
+
+  .#{$ns}Nav-dropIndicator {
+    position: absolute;
+    background: var(--Nav-item-onActive-color);
+    height: px2rem(2px);
+  }
+
+  &--searchable {
+    display: flex;
+
+    &:not(.#{$ns}Nav-horizontal) {
+      flex-flow: column nowrap;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .#{$ns}Nav-SearchBox {
+        &.is-active {
+          width: 100%;
+        }
+      }
+    }
+
+    &.#{$ns}Nav-horizontal {
+      flex-flow: column nowrap;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .#{$ns}Nav-SearchBox {
+        margin-left: px2rem(16px);
+      }
+    }
+  }
+}

package/scss/components/_overflow-tpl.scss

@@ -0,0 +1,5 @@
+.#{$ns}OverflowTpl {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

package/scss/components/_page.scss

@@ -0,0 +1,198 @@
+.#{$ns}Page {
+  width: 100%;
+  background: var(--Page-main-bg);
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+
+  &-header {
+    padding: var(--Page-header-paddingY) var(--Page-header-paddingX);
+  }
+
+  &-main {
+    // background: var(--Page-main-bg);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-content {
+    padding: var(--Page-content-paddingY) var(--Page-content-paddingX);
+    position: relative;
+    height: auto;
+    width: 100%;
+  }
+
+  &-main > &-header {
+    border-bottom: var(--borderWidth) solid var(--borderColor);
+    // background: var(--Page-header-bg);
+  }
+
+  &-headerRow {
+    // background: var(--Page-header-bg);
+    border-bottom: var(--borderWidth) solid var(--borderColor);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .#{$ns}Page-header,
+    .#{$ns}Page-toolbar {
+      flex-grow: 1;
+      min-height: 100%;
+    }
+
+    .#{$ns}Page-toolbar {
+      text-align: right;
+      padding-right: var(--gap-base);
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  }
+
+  &-title {
+    margin: 0;
+    padding: 0;
+    color: var(--Page-title-color);
+    line-height: var(--Page-title-lineHeight);
+    font-size: var(--Page-title-fontSize);
+    font-weight: var(--Page-title-fontWeight);
+  }
+
+  &-body {
+    padding: var(--Page-body-padding);
+    flex: 1 auto;
+  }
+
+  &-asideTplWrapper {
+    padding: var(--gap-xs);
+  }
+
+  &-asideResizor {
+    position: absolute;
+    right: px2rem(-6px);
+    top: 50%;
+    cursor: ew-resize;
+    writing-mode: vertical-lr;
+    width: px2rem(12px);
+    height: px2rem(24px);
+    margin-top: px2rem(-12px);
+    border: 0.0625rem solid #dee2e6;
+    background-color: #fff;
+    border-radius: px2rem(2px);
+    font-size: 12px;
+    line-height: px2rem(10px);
+    text-align: center;
+    user-select: none;
+    color: #666;
+
+    &:hover {
+      color: #000;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12),
+        0 2px 4px 0 rgba(0, 0, 0, 0.08);
+    }
+
+    &:after {
+      content: '···';
+    }
+  }
+}
+
+.#{$ns}Page-toolbar {
+  > * + * {
+    margin-left: var(--gap-xs);
+  }
+}
+
+.#{$ns}Page-aside {
+  // background: var(--Page-aside-bg);
+}
+
+@include media-breakpoint-down(sm) {
+  .#{$ns}Page {
+    flex-direction: column;
+  }
+
+  .#{$ns}Page-aside {
+    flex-shrink: 0;
+  }
+
+  .#{$ns}Page-content {
+    flex-grow: 1;
+    min-height: 0;
+    display: flex;
+    align-items: stretch;
+    flex-direction: row;
+  }
+
+  .#{$ns}Page-main {
+    height: auto;
+    width: 100%;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .#{$ns}Page-aside {
+    &::before {
+      content: '';
+      position: absolute;
+      width: inherit;
+      top: 0;
+      bottom: 0;
+      z-index: -1;
+      background: inherit;
+      border: inherit;
+    }
+
+    flex-shrink: 0;
+    width: var(--Page-aside-width);
+    border-right: var(--borderWidth) solid var(--borderColor);
+
+    &--withWidth {
+      min-width: var(--Page-aside-width);
+      max-width: var(--Page-aside-maxWidth);
+    }
+  }
+
+  .#{$ns}Page--withSidebar {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+
+    > .#{$ns}Page-content,
+    > .#{$ns}PullRefresh {
+      width: 0;
+      flex-grow: 1;
+    }
+  }
+
+  // 右侧侧边栏时，调整侧边栏相关的样式
+  .#{$ns}Page--rightAside {
+    flex-direction: row-reverse;
+
+    > .#{$ns}Page-aside {
+      border-left: var(--borderWidth) solid var(--borderColor);
+      border-right: unset;
+
+      > .#{$ns}Page-asideResizor {
+        left: px2rem(-6px);
+        right: unset;
+      }
+    }
+  }
+
+  .#{$ns}Page--asideSticky {
+    > .#{$ns}Page-aside {
+      position: sticky;
+      top: var(--affix-offset-top);
+      max-height: calc(
+        100vh - var(--affix-offset-top) - var(--affix-offset-bottom)
+      );
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+}