@sdata/web-vue 1.5.0 → 1.7.0

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

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

package/es/grid/style/index.js

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

package/es/grid/style/index.scss

@@ -0,0 +1,3 @@
+@use '@components/grid/style/row.scss' as *;
+@use '@components/grid/style/col.scss' as *;
+@use '@components/grid/style/grid.scss' as *;

package/es/grid/style/{row.less → row.scss}

@@ -1,8 +1,9 @@
-@import url('../../style/theme/index.less');
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
 
-@row-prefix-cls: ~'@{prefix}-row';
+$row-prefix-cls: string.unquote('#{$prefix}-row');
 
-.@{row-prefix-cls} {
+.#{$row-prefix-cls} {
   display: flex;
   flex-flow: row wrap;
 

package/es/image/style/image.scss

@@ -0,0 +1,161 @@
+@use '@style/theme/index.scss' as *;
+@use 'sass:string';
+@use '@components/image/style/token.scss' as *;
+
+$image-prefix-cls: string.unquote('#{$prefix}-image');
+
+.#{$image-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  border-radius: $image-radius;
+
+  &-img {
+    vertical-align: middle;
+    border-radius: inherit;
+  }
+
+  &-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-footer {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+
+    &-caption {
+      flex: 1 1 auto;
+
+      &-title {
+        font-weight: $image-font-weight-title;
+        font-size: $image-font-size-title;
+      }
+
+      &-description {
+        font-size: $image-font-size-description;
+      }
+    }
+
+    &-extra {
+      flex: 0 0 auto;
+      padding-left: $image-spacing-actions-left;
+    }
+  }
+
+  &-with-footer-inner {
+    .#{$image-prefix-cls}-footer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      align-items: center;
+      box-sizing: border-box;
+      padding: $image-padding-footer_inner_vertical $image-padding-footer_inner_horizontal;
+      color: $image-color-footer_inner-text;
+      background: $image-color-footer_inner-bg;
+      border-bottom-right-radius: $image-radius;
+      border-bottom-left-radius: $image-radius;
+    }
+
+    .#{$image-prefix-cls}-footer-caption {
+      &-title {
+        color: $image-color-title_footer_inner-text;
+      }
+
+      &-description {
+        color: $image-color-description_footer_inner-text;
+      }
+    }
+  }
+
+  &-with-footer-outer {
+    .#{$image-prefix-cls}-footer {
+      margin-top: $image-spacing-footer-top;
+      color: $image-color-footer_outer-text;
+    }
+
+    .#{$image-prefix-cls}-footer-caption {
+      &-title {
+        color: $image-color-title_footer_outer-text;
+      }
+
+      &-description {
+        color: $image-color-description_footer_outer-text;
+      }
+    }
+  }
+
+  &-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    color: $image-color-error-text;
+    background-color: $image-color-error-bg;
+
+    &-icon {
+      width: $image-font-size-error-icon;
+      max-width: 100%;
+      height: $image-font-size-error-icon;
+      max-height: 100%;
+
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &-alt {
+      padding: ($image-spacing-error-padding * 0.5) $image-spacing-error-padding;
+      font-size: $image-font-size-error-text;
+      line-height: $image-line-height-error-text;
+      text-align: center;
+    }
+  }
+
+  &-loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $image-color-loader-bg;
+
+    &-spin {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      color: $image-color-loader-spin-text;
+      font-size: $image-font-size-loader-spin;
+      text-align: center;
+      transform: translate(-50%, -50%);
+
+      &-text {
+        color: $image-color-loader-spin-text-text;
+        font-size: $image-font-size-loader-spin-text;
+      }
+    }
+  }
+
+  &-simple {
+    &.#{$image-prefix-cls}-with-footer-inner {
+      .#{$image-prefix-cls}-footer {
+        padding: $image-spacing-footer_inner_simple-vertical
+          $image-spacing-footer_inner_simple-horizontal;
+      }
+    }
+  }
+
+  &-loading,
+  &-loading-error {
+    .#{$image-prefix-cls}-img {
+      visibility: hidden;
+    }
+  }
+}

package/es/image/style/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -25,6 +26,7 @@
   background-color: var(--color-bg-5);
   border: 1px solid var(--color-neutral-3);
 }
+
 .sd-image {
   position: relative;
   display: inline-block;
@@ -139,10 +141,10 @@
 .sd-image-simple.sd-image-with-footer-inner .sd-image-footer {
   padding: 12px 16px;
 }
-.sd-image-loading .sd-image-img,
-.sd-image-loading-error .sd-image-img {
+.sd-image-loading .sd-image-img, .sd-image-loading-error .sd-image-img {
   visibility: hidden;
 }
+
 .sd-image-preview {
   position: fixed;
   top: 0;
@@ -154,8 +156,7 @@
 .sd-image-preview-hide {
   display: none;
 }
-.sd-image-preview-mask,
-.sd-image-preview-wrapper {
+.sd-image-preview-mask, .sd-image-preview-wrapper {
   position: absolute;
   top: 0;
   left: 0;
@@ -175,7 +176,7 @@
   width: 0;
   height: 100%;
   vertical-align: middle;
-  content: '';
+  content: "";
 }
 .sd-image-preview-img-container .sd-image-preview-img {
   display: inline-block;
@@ -227,8 +228,7 @@
   color: rgb(var(--primary-6));
   background-color: var(--color-neutral-2);
 }
-.sd-image-preview-toolbar-action-disabled,
-.sd-image-preview-toolbar-action-disabled:hover {
+.sd-image-preview-toolbar-action-disabled, .sd-image-preview-toolbar-action-disabled:hover {
   color: var(--color-text-4);
   background-color: transparent;
   cursor: not-allowed;
@@ -275,8 +275,7 @@
   border-radius: 50%;
   cursor: pointer;
 }
-.sd-image-preview-arrow-left,
-.sd-image-preview-arrow-right {
+.sd-image-preview-arrow-left, .sd-image-preview-arrow-right {
   position: absolute;
   z-index: 2;
   display: flex;
@@ -289,13 +288,11 @@
   border-radius: 50%;
   cursor: pointer;
 }
-.sd-image-preview-arrow-left > svg,
-.sd-image-preview-arrow-right > svg {
+.sd-image-preview-arrow-left > svg, .sd-image-preview-arrow-right > svg {
   color: var(--color-white);
   font-size: 16px;
 }
-.sd-image-preview-arrow-left:hover,
-.sd-image-preview-arrow-right:hover {
+.sd-image-preview-arrow-left:hover, .sd-image-preview-arrow-right:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .sd-image-preview-arrow-left {
@@ -319,18 +316,22 @@
 .sd-image-preview-arrow-disabled:hover {
   background-color: rgba(255, 255, 255, 0.2);
 }
+
 /** mask 动效 */
 .image-fade-enter-from,
 .image-fade-leave-to {
   opacity: 0;
 }
+
 .image-fade-enter-to,
 .image-fade-leave-from {
   opacity: 1;
 }
+
 .image-fade-enter-active {
   transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
+
 .image-fade-leave-active {
   transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
-}
+}

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

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

package/es/image/style/index.js

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

package/es/image/style/index.scss

@@ -0,0 +1,5 @@
+@use '@style/theme/index.scss' as *;
+@use '@components/image/style/token.scss' as *;
+@use '@components/image/style/trigger.scss' as *;
+@use '@components/image/style/image.scss' as *;
+@use '@components/image/style/preview.scss' as *;

package/es/image/style/preview.scss

@@ -0,0 +1,231 @@
+@use '@style/theme/index.scss' as *;
+@use 'sass:string';
+@use '@components/image/style/token.scss' as *;
+
+$image-prefix-cls: string.unquote('#{$prefix}-image');
+$preview-prefix-cls: string.unquote('#{$prefix}-image-preview');
+
+@mixin center() {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.#{$preview-prefix-cls} {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-image-preview;
+  width: 100%;
+  height: 100%;
+
+  &-hide {
+    display: none;
+  }
+
+  &-mask,
+  &-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-mask {
+    background-color: $image-preview-color-mask-bg;
+  }
+
+  &-img-container {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+    &::before {
+      display: inline-block;
+      width: 0;
+      height: 100%;
+      vertical-align: middle;
+      content: '';
+    }
+
+    .#{$preview-prefix-cls}-img {
+      display: inline-block;
+      max-width: 100%;
+      max-height: 100%;
+      vertical-align: middle;
+      cursor: grab;
+      user-select: none;
+
+      &.#{$image-prefix-cls}-preview-img-moving {
+        cursor: grabbing;
+      }
+    }
+  }
+
+  &-scale-value {
+    box-sizing: border-box;
+    padding: $image-preview-spacing-scale-value-vertical
+      $image-preview-spacing-scale-value-horizontal;
+    color: $image-preview-color-scale-value-text;
+    font-size: $image-preview-font-size-scale-value;
+    line-height: initial;
+    background-color: $image-preview-color-scale-value-bg;
+
+    @include center();
+  }
+
+  &-toolbar {
+    position: absolute;
+    bottom: $image-preview-position-toolbar-bottom;
+    left: 50%;
+    display: flex;
+    align-items: flex-start;
+    padding: $image-preview-spacing-toolbar-vertical $image-preview-spacing-toolbar-horizontal;
+    background-color: $image-preview-color-toolbar-bg;
+    border-radius: $image-preview-radius-toolbar;
+    transform: translateX(-50%);
+
+    &-action {
+      display: flex;
+      align-items: center;
+      color: $image-preview-color-action-text;
+      font-size: $image-preview-font-size-action;
+      background-color: $image-preview-color-action-bg;
+      border-radius: $image-preview-radius-action;
+      cursor: pointer;
+
+      &:not(:last-of-type) {
+        margin-right: $image-preview-margin-action-right;
+      }
+
+      &:hover {
+        color: $image-preview-color-action_hover-text;
+        background-color: $image-preview-color-action_hover-bg;
+      }
+
+      &-disabled,
+      &-disabled:hover {
+        color: $image-preview-color-action_disabled-text;
+        background-color: $image-preview-color-action_disabled-bg;
+        cursor: not-allowed;
+      }
+
+      &-name {
+        padding-right: $image-preview-spacing-action-name-right;
+        font-size: $image-preview-font-size-action-name;
+      }
+
+      &-content {
+        padding: $image-preview-padding-action-content;
+        line-height: 1;
+      }
+    }
+  }
+
+  &-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: $image-preview-size-loading-width;
+    height: $image-preview-size-loading-height;
+    padding: $image-preview-spacing-loading-padding;
+    color: $image-preview-color-loading-text;
+    font-size: $image-preview-font-size-loading;
+    background-color: $image-preview-color-loading-bg;
+    border-radius: $image-preview-radius-loading;
+
+    @include center();
+  }
+
+  &-close-btn {
+    position: absolute;
+    top: $image-preview-position-close-btn-top;
+    right: $image-preview-position-close-btn-right;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $image-preview-size-close-btn-width;
+    height: $image-preview-size-close-btn-width;
+    color: $image-preview-color-close-btn-text;
+    font-size: $image-preview-size-close-icon;
+    line-height: $image-preview-size-close-btn-width;
+    text-align: center;
+    background: $image-preview-color-close-btn-bg;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  &-arrow {
+    &-left,
+    &-right {
+      position: absolute;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $image-preview-arrow-size;
+      height: $image-preview-arrow-size;
+      color: $image-preview-arrow-color-icon;
+      background-color: $image-preview-arrow-color-bg;
+      border-radius: 50%;
+      cursor: pointer;
+
+      > svg {
+        color: $image-preview-arrow-color-icon;
+        font-size: $image-preview-arrow-font-size;
+      }
+
+      &:hover {
+        background-color: $image-preview-arrow-color-bg_hover;
+      }
+    }
+
+    &-left {
+      top: 50%;
+      left: $image-preview-arrow-position;
+      transform: translateY(-50%);
+    }
+
+    &-right {
+      top: 50%;
+      right: $image-preview-arrow-position;
+      transform: translateY(-50%);
+    }
+
+    &-disabled {
+      color: $image-preview-arrow-color-icon_disabled;
+      background-color: $image-preview-arrow-color-bg_disabled;
+      cursor: not-allowed;
+
+      > svg {
+        color: $image-preview-arrow-color-icon_disabled;
+      }
+
+      &:hover {
+        background-color: $image-preview-arrow-color-bg_disabled;
+      }
+    }
+  }
+}
+
+/** mask 动效 */
+.image-fade-enter-from,
+.image-fade-leave-to {
+  opacity: 0;
+}
+
+.image-fade-enter-to,
+.image-fade-leave-from {
+  opacity: 1;
+}
+
+.image-fade-enter-active {
+  transition: opacity $transition-duration-4 $transition-timing-function-overshoot;
+}
+
+.image-fade-leave-active {
+  transition: opacity $transition-duration-4 $transition-timing-function-overshoot;
+}

package/es/image/style/token.scss

@@ -0,0 +1,139 @@
+@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 *;
+
+$image-radius: $radius-small;
+// title
+$image-font-size-title: $font-size-title-1;
+$image-font-weight-title: $font-weight-500;
+// description
+$image-font-size-description: $font-size-body-3;
+$image-color-title_footer_outer-text: var(string.unquote('#{$sd-cssvars-prefix}-color-text-1'));
+$image-color-title_footer_inner-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
+$image-color-description_footer_inner-text: var(
+  string.unquote('#{$sd-cssvars-prefix}-color-white')
+);
+$image-color-description_footer_outer-text: var(
+  string.unquote('#{$sd-cssvars-prefix}-color-neutral-6')
+);
+// actions
+$image-spacing-actions-left: $spacing-6;
+// actions item
+$image-font-size-actions-item: 14px;
+$image-padding-actions-item-vertical: $spacing-none;
+$image-padding-actions-item-horizontal: $spacing-none;
+$image-spacing-actions-item-left: $spacing-6;
+$image-radius-actions-item: $radius-small;
+$image-color-actions-item_footer_inner_hover-bg: rgb(0 0 0 / 50%);
+$image-color-actions-item_footer_outer_hover-bg: var(
+  string.unquote('#{$sd-cssvars-prefix}-color-neutral-2')
+);
+$image-color-actions-item_trigger-text: var(
+  string.unquote('#{$sd-cssvars-prefix}-color-neutral-8')
+);
+$image-color-actions-item_trigger_hover-bg: var(
+  string.unquote('#{$sd-cssvars-prefix}-color-neutral-2')
+);
+$image-spacing-actions-trigger-item-vertical: 5px;
+$image-spacing-actions-trigger-item-horizontal: 4px;
+// footer
+$image-color-footer_inner-bg: linear-gradient(360deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 0%) 100%);
+$image-color-footer_inner-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
+$image-padding-footer_inner_vertical: 9px;
+$image-padding-footer_inner_horizontal: 16px;
+
+$image-spacing-footer_inner_simple-vertical: $spacing-6;
+$image-spacing-footer_inner_simple-horizontal: $spacing-7;
+$image-color-footer_outer-text: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-8'));
+$image-spacing-footer-top: $spacing-2;
+// error
+$image-color-error-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-1'));
+$image-color-error-text: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-4'));
+$image-font-size-error-icon: 60px;
+$image-font-size-error-text: $font-size-body-1;
+$image-line-height-error-text: 1.6667;
+$image-size-error-min-height: 100px;
+$image-spacing-error-padding: $spacing-7;
+// loader
+$image-color-loader-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-1'));
+$image-size-loader-min-height: 100px;
+// loader spin
+$image-font-size-loader-spin: 32px;
+$image-color-loader-spin-text: $color-primary-6;
+$image-color-loader-spin-text-text: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-6'));
+$image-font-size-loader-spin-text: $font-size-title-1;
+
+// preview mask
+$image-preview-color-mask-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-mask-bg'));
+// preview scale value
+$image-preview-size-scale-value-height: 32px;
+$image-preview-spacing-scale-value-vertical: 7px;
+$image-preview-spacing-scale-value-horizontal: 10px;
+$image-preview-font-size-scale-value: $font-size-body-1;
+$image-preview-color-scale-value-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
+$image-preview-color-scale-value-bg: rgb(255 255 255 / 8%);
+// preview toolbar
+$image-preview-color-toolbar-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-2'));
+$image-preview-radius-toolbar: $radius-medium;
+$image-preview-spacing-toolbar-vertical: $spacing-2;
+$image-preview-spacing-toolbar-horizontal: $spacing-7;
+$image-preview-spacing-toolbar-horizontal_simple: $spacing-2;
+$image-preview-spacing-toolbar-vertical_simple: $spacing-2;
+
+$image-preview-position-toolbar-bottom: 46px;
+// preview toolbar action
+$image-preview-font-size-action: 14px;
+$image-preview-color-action-text: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-8'));
+$image-preview-radius-action: $radius-small;
+$image-preview-color-action-bg: $color-transparent;
+$image-preview-color-action_hover-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-2'));
+$image-preview-color-action_hover-text: $color-primary-6;
+$image-preview-color-action_disabled-bg: transparent;
+$image-preview-color-action_disabled-text: var(
+  string.unquote('#{$sd-cssvars-prefix}-color-text-4')
+);
+$image-preview-font-size-action-name: $font-size-body-1;
+$image-preview-spacing-action-name-right: $spacing-6;
+$image-preview-padding-action-content: 13px;
+$image-preview-margin-action-right: $spacing-none;
+// preview trigger
+$image-preview-spacing-trigger-padding-vertical: $spacing-6;
+$image-preview-spacing-trigger-padding-horizontal: $spacing-7;
+$image-preview-margin-action-bottom: $spacing-none;
+
+// preview loading
+$image-preview-color-loading-text: $color-primary-6;
+$image-preview-color-loading-bg: #232324;
+$image-preview-font-size-loading: 18px;
+$image-preview-spacing-loading-padding: $spacing-5;
+$image-preview-size-loading-width: 48px;
+$image-preview-size-loading-height: 48px;
+$image-preview-radius-loading: $radius-medium;
+// preview close-btn
+$image-preview-size-close-btn-width: 32px;
+$image-preview-size-close-icon: 14px;
+$image-preview-color-close-btn-bg: rgb(0 0 0 / 50%);
+$image-preview-color-close-btn-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
+$image-preview-position-close-btn-right: 36px;
+$image-preview-position-close-btn-top: 36px;
+// preview arrow
+$image-preview-arrow-position: $spacing-8;
+$image-preview-arrow-size: $size-8;
+$image-preview-arrow-font-size: $size-4;
+$image-preview-arrow-color-icon: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
+$image-preview-arrow-color-icon_disabled: rgb(255 355 255 / 30%);
+$image-preview-arrow-color-bg: rgb(255 355 255 / 30%);
+$image-preview-arrow-color-bg_hover: rgb(255 355 255 / 50%);
+$image-preview-arrow-color-bg_disabled: rgb(255 355 255 / 20%);
+
+// image trigger
+$image-trigger-spacing-padding-vertical: 6px;
+$image-trigger-spacing-padding-horizontal: 4px;
+$image-trigger-color-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-5'));
+$image-trigger-color-border: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-3'));
+$image-trigger-size-border: 1px;
+$image-trigger-radius: 4px;

package/es/image/style/trigger.scss

@@ -0,0 +1,17 @@
+@use '@style/theme/index.scss' as *;
+@use 'sass:string';
+@use '@components/image/style/token.scss' as *;
+
+$image-trigger-prefix-cls: string.unquote('#{$prefix}-image-trigger');
+
+.#{$image-trigger-prefix-cls} {
+  padding: $image-trigger-spacing-padding-vertical $image-trigger-spacing-padding-horizontal;
+  background: $image-trigger-color-bg;
+  border: $image-trigger-size-border solid $image-trigger-color-border;
+  border-radius: $image-trigger-radius;
+
+  .#{$prefix}-trigger-arrow {
+    background-color: $image-trigger-color-bg;
+    border: $image-trigger-size-border solid $image-trigger-color-border;
+  }
+}