@sdata/web-vue 1.6.0 → 1.7.0

package/es/modal/style/index.scss

@@ -0,0 +1,276 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/modal/style/token.scss' as *;
+
+$modal-prefix-cls: string.unquote('#{theme.$prefix}-modal');
+
+@function resolve-header-justify-content() {
+  @if $modal-default-align-header == left {
+    @return flex-start;
+  }
+
+  @if $modal-default-align-header == right {
+    @return flex-end;
+  }
+
+  @return center;
+}
+
+.#{$modal-prefix-cls}-container {
+  position: fixed;
+  inset: 0;
+}
+
+.#{$modal-prefix-cls}-mask {
+  position: absolute;
+  inset: 0;
+  background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-mask-bg'));
+}
+
+.#{$modal-prefix-cls}-wrapper {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  text-align: center;
+
+  &#{&}-align-center {
+    white-space: nowrap;
+
+    &::after {
+      display: inline-block;
+      width: 0;
+      height: 100%;
+      vertical-align: middle;
+      content: '';
+    }
+
+    .#{$modal-prefix-cls} {
+      top: 0;
+      vertical-align: middle;
+    }
+  }
+
+  &#{&}-moved {
+    text-align: left;
+
+    .#{$modal-prefix-cls} {
+      top: 0;
+      vertical-align: top;
+    }
+  }
+}
+
+.#{$modal-prefix-cls} {
+  position: relative;
+  top: $modal-margin-top;
+  display: inline-block;
+  width: $modal-default-size-width;
+  margin: 0 auto;
+  line-height: theme.$line-height-base;
+  white-space: initial;
+  text-align: left;
+  background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-3'));
+  border-radius: $modal-border-radius;
+
+  &-draggable {
+    .#{$modal-prefix-cls}-header {
+      cursor: move;
+    }
+  }
+
+  &-header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: $modal-default-size-header-height;
+    padding: 0 $modal-default-padding-horizontal;
+    border-bottom: global.$border-1 solid $modal-color-border;
+
+    .#{$modal-prefix-cls}-title {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: resolve-header-justify-content();
+
+      &-align-start {
+        justify-content: flex-start;
+      }
+
+      &-align-center {
+        justify-content: center;
+      }
+    }
+  }
+
+  &-body {
+    position: relative;
+    padding: $modal-default-padding-content-vertical $modal-default-padding-horizontal;
+    overflow: auto;
+    color: $modal-color-content-text;
+    font-size: $modal-font-content-size;
+  }
+
+  &-footer {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: $modal-default-padding-footer-vertical $modal-default-padding-horizontal;
+    text-align: right;
+    border-top: global.$border-1 solid $modal-color-border;
+
+    > .#{theme.$prefix}-btn:not(:nth-child(1)) {
+      margin-left: $modal-margin-footer-button-left;
+    }
+  }
+
+  &-close-btn {
+    margin-left: -$modal-font-size-close-icon;
+    color: $modal-color-header-text;
+    font-size: $modal-font-size-close-icon;
+    cursor: pointer;
+  }
+
+  &-title {
+    color: $modal-color-header-text;
+    font-weight: global.$font-weight-500;
+    font-size: $modal-font-header-size;
+
+    &-icon {
+      margin-right: $modal-margin-tip-icon-right;
+      font-size: $modal-size-tip-icon;
+      vertical-align: -0.15em;
+
+      .#{theme.$prefix}-icon-info-circle-fill {
+        color: global.$color-primary-6;
+      }
+
+      .#{theme.$prefix}-icon-check-circle-fill {
+        color: global.$color-success-6;
+      }
+
+      .#{theme.$prefix}-icon-exclamation-circle-fill {
+        color: global.$color-warning-6;
+      }
+
+      .#{theme.$prefix}-icon-close-circle-fill {
+        color: global.$color-danger-6;
+      }
+    }
+  }
+}
+
+// 简洁模式
+.#{$modal-prefix-cls}-simple {
+  width: $modal-simple-size-width;
+  padding: $modal-simple-padding-top $modal-simple-padding-horizontal $modal-simple-padding-bottom;
+
+  .#{$modal-prefix-cls}-header,
+  .#{$modal-prefix-cls}-footer {
+    height: unset;
+    padding: 0;
+    border: none;
+  }
+
+  .#{$modal-prefix-cls}-header {
+    margin-bottom: $modal-simple-margin-content-top;
+  }
+
+  .#{$modal-prefix-cls}-title {
+    justify-content: resolve-header-justify-content();
+
+    &-align-start {
+      justify-content: flex-start;
+    }
+
+    &-align-center {
+      justify-content: center;
+    }
+  }
+
+  .#{$modal-prefix-cls}-footer {
+    margin-top: $modal-simple-margin-footer-top;
+    text-align: center;
+  }
+
+  .#{$modal-prefix-cls}-body {
+    padding: 0;
+  }
+}
+
+.#{$modal-prefix-cls}-fullscreen {
+  top: 0;
+  display: inline-flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  .#{$modal-prefix-cls}-footer {
+    margin-top: auto;
+  }
+}
+
+.zoom-modal-enter-from,
+.zoom-modal-appear-from {
+  transform: scale(0.5, 0.5);
+  opacity: 0;
+}
+
+.zoom-modal-enter-to,
+.zoom-modal-appear-to {
+  transform: scale(1, 1);
+  opacity: 1;
+}
+
+.zoom-modal-enter-active,
+.zoom-modal-appear-active {
+  transition:
+    opacity theme.$transition-duration-4 theme.$transition-timing-function-overshoot,
+    transform theme.$transition-duration-4 theme.$transition-timing-function-overshoot;
+}
+
+.zoom-modal-leave-from {
+  transform: scale(1, 1);
+  opacity: 1;
+}
+
+.zoom-modal-leave-to {
+  transform: scale(0.5, 0.5);
+  opacity: 0;
+}
+
+.zoom-modal-leave-active {
+  transition:
+    opacity theme.$transition-duration-4 theme.$transition-timing-function-overshoot,
+    transform theme.$transition-duration-4 theme.$transition-timing-function-overshoot;
+}
+
+.fade-modal-enter-from,
+.fade-modal-appear-from {
+  opacity: 0;
+}
+
+.fade-modal-enter-to,
+.fade-modal-appear-to {
+  opacity: 1;
+}
+
+.fade-modal-enter-active,
+.fade-modal-appear-active {
+  transition: opacity theme.$transition-duration-4 theme.$transition-timing-function-overshoot;
+}
+
+.fade-modal-leave-from {
+  opacity: 1;
+}
+
+.fade-modal-leave-to {
+  opacity: 0;
+}
+
+.fade-modal-leave-active {
+  transition: opacity theme.$transition-duration-4 theme.$transition-timing-function-overshoot;
+}

package/es/modal/style/token.scss

@@ -0,0 +1,57 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$modal-border-radius: global.$radius-medium;
+
+$modal-size-tip-icon: 18px;
+
+$modal-margin-top: 100px;
+
+$modal-margin-tip-icon-right: global.$spacing-5;
+
+$modal-margin-footer-button-left: global.$spacing-6;
+
+$modal-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$modal-color-header-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$modal-color-content-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$modal-font-header-size: global.$font-size-title-1;
+
+$modal-default-padding-horizontal: global.$spacing-8;
+
+$modal-default-size-header-height: global.$size-12;
+
+$modal-default-padding-content-vertical: global.$spacing-9;
+
+$modal-default-padding-footer-vertical: global.$spacing-7;
+
+$modal-default-size-width: 520px;
+
+$modal-font-content-size: global.$font-size-body-3;
+
+$modal-default-align-header: center;
+
+$modal-simple-align-header: center;
+
+$modal-simple-size-width: 400px;
+
+$modal-simple-padding-horizontal: global.$spacing-10;
+
+$modal-simple-padding-top: global.$spacing-9;
+
+$modal-simple-padding-bottom: global.$spacing-10;
+
+$modal-simple-margin-footer-top: global.$spacing-10;
+
+$modal-simple-margin-content-top: global.$spacing-9;
+
+$modal-position-close-icon-right: 16px;
+
+$modal-font-size-close-icon: 12px;

package/es/notification/style/index.css

@@ -43,6 +43,7 @@
 .sd-notification-list-bottom-right .sd-notification {
   margin-left: auto;
 }
+
 .sd-notification {
   position: relative;
   display: flex;
@@ -155,21 +156,26 @@
   width: 20px;
   height: 20px;
 }
+
 .slide-left-notification-enter-from,
 .slide-left-notification-appear-from {
   transform: translateX(-100%);
 }
+
 .slide-left-notification-enter-to,
 .slide-left-notification-appear-to {
   transform: translateX(0);
 }
+
 .slide-left-notification-enter-active,
 .slide-left-notification-appear-active {
   transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
+
 .slide-left-notification-leave-from {
   opacity: 1;
 }
+
 .slide-left-notification-leave-to {
   height: 0;
   margin-top: 0;
@@ -178,24 +184,30 @@
   padding-bottom: 0;
   opacity: 0;
 }
+
 .slide-left-notification-leave-active {
   transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .slide-right-notification-enter-from,
 .slide-right-notification-appear-from {
   transform: translateX(100%);
 }
+
 .slide-right-notification-enter-to,
 .slide-right-notification-appear-to {
   transform: translateX(0);
 }
+
 .slide-right-notification-enter-active,
 .slide-right-notification-appear-active {
   transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
+
 .slide-right-notification-leave-from {
   opacity: 1;
 }
+
 .slide-right-notification-leave-to {
   height: 0;
   margin-top: 0;
@@ -204,6 +216,7 @@
   padding-bottom: 0;
   opacity: 0;
 }
+
 .slide-right-notification-leave-active {
   transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
-}
+}

package/es/notification/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.scss';
+import './index.scss';

package/es/notification/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/notification/style/index.scss

@@ -0,0 +1,249 @@
+@use '@style/mixins/icon-hover.scss' as icon-hover;
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@style/mixins/index.scss' as *;
+@use '@components/notification/style/token.scss' as *;
+
+$notification-prefix-cls: string.unquote('#{theme.$prefix}-notification');
+
+.#{$notification-prefix-cls}-list {
+  position: fixed;
+  z-index: theme.$z-index-notification;
+  margin: 0;
+  padding-left: 0;
+
+  &-top-left {
+    top: $notification-wrapper-margin-top;
+    left: $notification-wrapper-margin-left;
+  }
+
+  &-top-right {
+    top: $notification-wrapper-margin-top;
+    right: $notification-wrapper-margin-right;
+
+    .#{$notification-prefix-cls} {
+      margin-left: auto;
+    }
+  }
+
+  &-bottom-left {
+    bottom: $notification-wrapper-margin-bottom;
+    left: $notification-wrapper-margin-left;
+  }
+
+  &-bottom-right {
+    right: $notification-wrapper-margin-right;
+    bottom: $notification-wrapper-margin-bottom;
+
+    .#{$notification-prefix-cls} {
+      margin-left: auto;
+    }
+  }
+}
+
+.#{$notification-prefix-cls} {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: $notification-width + $notification-padding-right + $notification-padding-left;
+  padding: $notification-padding-top $notification-padding-right $notification-padding-bottom
+    $notification-padding-left;
+  overflow: hidden;
+  background-color: $notification-normal-color-bg;
+  border: $notification-border-width $notification-border-style $notification-normal-color-border;
+  border-radius: $notification-border-radius;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  opacity: 1;
+  transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-linear;
+
+  &:not(:last-child) {
+    margin-bottom: $notification-margin-bottom;
+  }
+
+  &-icon {
+    display: flex;
+    align-items: center;
+    font-size: $notification-font-size-icon;
+  }
+
+  &-info {
+    background-color: $notification-info-color-bg;
+    border-color: $notification-info-color-border;
+  }
+
+  &-info &-icon {
+    color: $notification-info-color-icon;
+  }
+
+  &-success {
+    background-color: $notification-success-color-bg;
+    border-color: $notification-success-color-border;
+  }
+
+  &-success &-icon {
+    color: $notification-success-color-icon;
+  }
+
+  &-warning {
+    background-color: $notification-warning-color-bg;
+    border-color: $notification-warning-color-border;
+  }
+
+  &-warning &-icon {
+    color: $notification-warning-color-icon;
+  }
+
+  &-error {
+    background-color: $notification-error-color-bg;
+    border-color: $notification-error-color-border;
+  }
+
+  &-error &-icon {
+    color: $notification-error-color-icon;
+  }
+
+  &-left {
+    padding-right: $notification-icon-margin-right;
+  }
+
+  &-right {
+    flex: 1;
+    word-break: break-word;
+  }
+
+  &-title {
+    color: $notification-normal-color-text-title;
+    font-weight: global.$font-weight-500;
+    font-size: $notification-font-size-title;
+  }
+
+  &-title + &-content {
+    margin-top: $notification-title-margin-bottom;
+  }
+
+  &-content {
+    color: $notification-normal-color-text-content;
+    font-size: $notification-font-size-content;
+  }
+
+  &-info &-title {
+    color: $notification-info-color-text-title;
+  }
+
+  &-info &-content {
+    color: $notification-info-color-text-content;
+  }
+
+  &-success &-title {
+    color: $notification-success-color-text-title;
+  }
+
+  &-success &-content {
+    color: $notification-success-color-text-content;
+  }
+
+  &-warning &-title {
+    color: $notification-warning-color-text-title;
+  }
+
+  &-warning &-content {
+    color: $notification-warning-color-text-content;
+  }
+
+  &-error &-title {
+    color: $notification-error-color-text-title;
+  }
+
+  &-error &-content {
+    color: $notification-error-color-text-content;
+  }
+
+  &-footer {
+    margin-top: $notification-btn-wrapper-margin-top;
+    text-align: right;
+  }
+
+  &-close-btn {
+    position: absolute;
+    top: $notification-close-icon-top;
+    right: $notification-close-icon-right;
+    color: $notification-color-close-icon;
+    font-size: $notification-close-icon-font-size;
+    cursor: pointer;
+
+    > svg {
+      position: relative;
+    }
+  }
+
+  @include icon-hover.icon-hover(
+    $notification-prefix-cls,
+    $notification-close-icon-font-size,
+    $notification-close-icon-font-size + 8px
+  );
+}
+
+.slide-left-notification-enter-from,
+.slide-left-notification-appear-from {
+  transform: translateX(-100%);
+}
+
+.slide-left-notification-enter-to,
+.slide-left-notification-appear-to {
+  transform: translateX(0);
+}
+
+.slide-left-notification-enter-active,
+.slide-left-notification-appear-active {
+  transition: transform theme.$transition-duration-4 theme.$transition-timing-function-overshoot;
+}
+
+.slide-left-notification-leave-from {
+  opacity: 1;
+}
+
+.slide-left-notification-leave-to {
+  height: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 0;
+}
+
+.slide-left-notification-leave-active {
+  transition: all theme.$transition-duration-3 theme.$transition-timing-function-standard;
+}
+
+.slide-right-notification-enter-from,
+.slide-right-notification-appear-from {
+  transform: translateX(100%);
+}
+
+.slide-right-notification-enter-to,
+.slide-right-notification-appear-to {
+  transform: translateX(0);
+}
+
+.slide-right-notification-enter-active,
+.slide-right-notification-appear-active {
+  transition: transform theme.$transition-duration-4 theme.$transition-timing-function-overshoot;
+}
+
+.slide-right-notification-leave-from {
+  opacity: 1;
+}
+
+.slide-right-notification-leave-to {
+  height: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 0;
+}
+
+.slide-right-notification-leave-active {
+  transition: all theme.$transition-duration-3 theme.$transition-timing-function-standard;
+}