@sdata/web-vue 1.6.0 → 1.7.0

package/es/trigger/style/{index.less → index.scss}

@@ -1,15 +1,17 @@
-@import url('./token.less');
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/trigger/style/token.scss' as *;
 
-@trigger-prefix-cls: ~'@{prefix}-trigger';
+$trigger-prefix-cls: string.unquote('#{theme.$prefix}-trigger');
 
-.@{trigger-prefix-cls} {
+.#{$trigger-prefix-cls} {
   &-wrapper {
     display: inline-block;
   }
 
   &-popup {
     position: absolute;
-    z-index: @z-index-popup;
+    z-index: theme.$z-index-popup;
   }
 
   &-arrow {
@@ -17,9 +19,9 @@
     z-index: -1;
     display: block;
     box-sizing: border-box;
-    width: @trigger-size-arrow-width;
-    height: @trigger-size-arrow-width;
-    background-color: @trigger-color-arrow-bg;
+    width: $trigger-size-arrow-width;
+    height: $trigger-size-arrow-width;
+    background-color: $trigger-color-arrow-bg;
     content: '';
   }
 
@@ -28,7 +30,7 @@
   &-popup[trigger-placement='tr'] &-arrow {
     border-top: none;
     border-left: none;
-    border-bottom-right-radius: @trigger-border-arrow-radius;
+    border-bottom-right-radius: $trigger-border-arrow-radius;
   }
 
   &-popup[trigger-placement='bottom'] &-arrow,
@@ -36,7 +38,7 @@
   &-popup[trigger-placement='br'] &-arrow {
     border-right: none;
     border-bottom: none;
-    border-top-left-radius: @trigger-border-arrow-radius;
+    border-top-left-radius: $trigger-border-arrow-radius;
   }
 
   &-popup[trigger-placement='left'] &-arrow,
@@ -44,7 +46,7 @@
   &-popup[trigger-placement='lb'] &-arrow {
     border-bottom: none;
     border-left: none;
-    border-top-right-radius: @trigger-border-arrow-radius;
+    border-top-right-radius: $trigger-border-arrow-radius;
   }
 
   &-popup[trigger-placement='right'] &-arrow,
@@ -52,6 +54,6 @@
   &-popup[trigger-placement='rb'] &-arrow {
     border-top: none;
     border-right: none;
-    border-bottom-left-radius: @trigger-border-arrow-radius;
+    border-bottom-left-radius: $trigger-border-arrow-radius;
   }
 }

package/es/trigger/style/token.scss

@@ -0,0 +1,13 @@
+@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 *;
+
+$trigger-color-arrow-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-5'));
+
+$trigger-size-arrow-width: global.$size-2;
+
+$trigger-border-arrow-radius: global.$radius-small;

package/es/typography/style/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -25,42 +26,42 @@
   white-space: normal;
   overflow-wrap: anywhere;
 }
-h1.sd-typography,
-h2.sd-typography,
-h3.sd-typography,
-h4.sd-typography,
-h5.sd-typography,
-h6.sd-typography {
+.sd-typography h1.sd-typography,
+.sd-typography h2.sd-typography,
+.sd-typography h3.sd-typography,
+.sd-typography h4.sd-typography,
+.sd-typography h5.sd-typography,
+.sd-typography h6.sd-typography {
   margin-top: 1em;
   margin-bottom: 0.5em;
   font-weight: 500;
 }
-h1.sd-typography {
+.sd-typography h1.sd-typography {
   font-size: 36px;
   line-height: 1.23;
 }
-h2.sd-typography {
+.sd-typography h2.sd-typography {
   font-size: 32px;
   line-height: 1.25;
 }
-h3.sd-typography {
+.sd-typography h3.sd-typography {
   font-size: 28px;
   line-height: 1.29;
 }
-h4.sd-typography {
+.sd-typography h4.sd-typography {
   font-size: 24px;
   line-height: 1.33;
 }
-h5.sd-typography {
+.sd-typography h5.sd-typography {
   font-size: 20px;
   line-height: 1.4;
 }
-h6.sd-typography {
+.sd-typography h6.sd-typography {
   font-size: 16px;
   line-height: 1.5;
 }
-div.sd-typography,
-p.sd-typography {
+.sd-typography div.sd-typography,
+.sd-typography p.sd-typography {
   margin-top: 0;
   margin-bottom: 1em;
 }
@@ -111,13 +112,11 @@ p.sd-typography {
   background-color: var(--color-bg-2);
   border-left: 2px solid var(--color-neutral-6);
 }
-.sd-typography ol,
-.sd-typography ul {
+.sd-typography ol, .sd-typography ul {
   margin: 0;
   padding: 0;
 }
-.sd-typography ul li,
-.sd-typography ol li {
+.sd-typography ul li, .sd-typography ol li {
   margin-left: 20px;
 }
 .sd-typography ul {
@@ -126,8 +125,7 @@ p.sd-typography {
 .sd-typography-spacing-close {
   line-height: 1.3;
 }
-.sd-typography-operation-copy,
-.sd-typography-operation-copied {
+.sd-typography-operation-copy, .sd-typography-operation-copied {
   margin-left: 2px;
   padding: 2px;
 }
@@ -177,4 +175,4 @@ p.sd-typography {
   margin-top: -1em;
   margin-bottom: 1em;
   text-align: right;
-}
+}

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

@@ -1,5 +1,5 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../input/style';
 import '../../popover/style';
 import '../../tooltip/style';
-import './index.less';
+import './index.scss';

package/es/typography/style/index.js

@@ -1,3 +1,3 @@
 import "../../popover/style/index.js";
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/typography/style/index.scss

@@ -0,0 +1,208 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/typography/style/token.scss' as *;
+@use '@components/input/style/token.scss' as *;
+
+$typography-prefix-cls: string.unquote('#{theme.$prefix}-typography');
+
+.#{$typography-prefix-cls} {
+  color: $typography-color-text;
+  line-height: $typography-paragraph-line-height;
+  white-space: normal;
+  overflow-wrap: anywhere;
+
+  // Title
+  h1#{#{&}},
+  h2#{#{&}},
+  h3#{#{&}},
+  h4#{#{&}},
+  h5#{#{&}},
+  h6#{#{&}} {
+    margin-top: $typography-heading-margin-top;
+    margin-bottom: $typography-heading-margin-bottom;
+    font-weight: $typography-heading-font-weight;
+  }
+
+  h1#{#{&}} {
+    font-size: $typography-font-size-h1;
+    line-height: 1.23;
+  }
+
+  h2#{#{&}} {
+    font-size: $typography-font-size-h2;
+    line-height: 1.25;
+  }
+
+  h3#{#{&}} {
+    font-size: $typography-font-size-h3;
+    line-height: 1.29;
+  }
+
+  h4#{#{&}} {
+    font-size: $typography-font-size-h4;
+    line-height: 1.33;
+  }
+
+  h5#{#{&}} {
+    font-size: $typography-font-size-h5;
+    line-height: 1.4;
+  }
+
+  h6#{#{&}} {
+    font-size: $typography-font-size-h6;
+    line-height: 1.5;
+  }
+
+  div#{#{&}},
+  p#{#{&}} {
+    margin-top: 0;
+    margin-bottom: 1em;
+  }
+
+  // Text
+  &-primary {
+    color: $typography-text-color-text-primary;
+  }
+
+  &-secondary {
+    color: $typography-text-color-text-secondary;
+  }
+
+  &-success {
+    color: $typography-text-color-text-success;
+  }
+
+  &-warning {
+    color: $typography-text-color-text-warning;
+  }
+
+  &-danger {
+    color: $typography-text-color-text-error;
+  }
+
+  &-disabled {
+    color: $typography-text-color-text_disabled;
+    cursor: not-allowed;
+  }
+
+  & mark {
+    background-color: $typography-text-color-bg-mark;
+  }
+
+  & u {
+    text-decoration: underline;
+  }
+
+  & del {
+    text-decoration: line-through;
+  }
+
+  & b {
+    font-weight: $typography-text-font-weight-bold;
+  }
+
+  & code {
+    margin: 0 $typography-text-margin-code-horizontal;
+    padding: $typography-text-padding-code-vertical $typography-text-padding-code-horizontal;
+    color: $typography-text-color-code;
+    font-size: 85%;
+    background-color: $typography-text-color-code-bg;
+    border: 1px solid $typography-text-color-code-border;
+    border-radius: 2px;
+  }
+
+  & blockquote {
+    margin: 0;
+    margin-bottom: 1em;
+    padding-left: 8px;
+    background-color: $typography-color-blockquote-bg;
+    border-left: $typography-color-blockquote-border-width solid
+      $typography-color-blockquote-border-left;
+  }
+
+  & ol,
+  & ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  & ul li,
+  & ol li {
+    margin-left: 20px;
+  }
+
+  & ul {
+    list-style: circle;
+  }
+
+  &-spacing-close {
+    line-height: $typography-paragraph-line-height-close;
+  }
+
+  // Operations
+  &-operation-copy,
+  &-operation-copied {
+    margin-left: $typography-operation-margin-left;
+    padding: 2px;
+  }
+
+  &-operation-copy {
+    color: $typography-color-icon-copy;
+    background-color: $typography-color-bg-icon-copy;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: background-color theme.$transition-duration-1
+      theme.$transition-timing-function-linear;
+
+    &:hover {
+      color: $typography-color-icon-copy_hover;
+      background-color: $typography-color-bg-icon-copy_hover;
+    }
+  }
+
+  &-operation-copied {
+    color: $typography-color-icon-copy_copied;
+  }
+
+  &-operation-edit {
+    margin-left: $typography-operation-margin-left;
+    padding: 2px;
+    color: $typography-color-icon-edit;
+    background-color: $typography-color-bg-icon-edit;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: background-color theme.$transition-duration-1
+      theme.$transition-timing-function-linear;
+
+    &:hover {
+      color: $typography-color-icon-edit_hover;
+      background-color: $typography-color-bg-icon-edit_hover;
+    }
+  }
+
+  &-operation-expand {
+    margin: 0 4px;
+    color: $typography-color-expand-text;
+    cursor: pointer;
+
+    &:hover {
+      color: $typography-color-expand-text_hover;
+    }
+  }
+
+  // edit content
+  &-edit-content {
+    position: relative;
+    left: -($textarea-padding-horizontal + $input-border-width);
+    margin-top: -($textarea-padding-vertical + $input-border-width);
+    margin-right: -($textarea-padding-horizontal + $input-border-width);
+    margin-bottom: calc(1em - $textarea-padding-vertical - $input-border-width);
+  }
+
+  // css
+  &-css-operation {
+    margin-top: -1em;
+    margin-bottom: 1em;
+    text-align: right;
+  }
+}

package/es/typography/style/token.scss

@@ -0,0 +1,73 @@
+@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 *;
+
+$typography-font-size-h1: 36px;
+$typography-font-size-h2: 32px;
+$typography-font-size-h3: 28px;
+$typography-font-size-h4: 24px;
+$typography-font-size-h5: 20px;
+$typography-font-size-h6: 16px;
+
+$typography-heading-font-weight: global.$font-weight-500;
+
+$typography-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$typography-text-color-text-primary: global.$color-primary-6;
+$typography-text-color-text-secondary: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+$typography-text-color-text-success: global.$color-success-6;
+$typography-text-color-text-warning: global.$color-warning-6;
+$typography-text-color-text-error: global.$color-danger-6;
+$typography-text-color-text_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$typography-text-color-bg-mark: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-yellow-4')));
+$typography-text-font-weight-bold: global.$font-weight-500;
+
+$typography-text-color-code: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$typography-text-color-code-border: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+$typography-text-color-code-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-2'));
+$typography-text-padding-code-vertical: 2px;
+$typography-text-padding-code-horizontal: 8px;
+$typography-text-margin-code-horizontal: 2px;
+
+$typography-paragraph-line-height: $line-height-base;
+$typography-paragraph-line-height-close: 1.3;
+
+// Operations
+$typography-operation-margin-left: global.$spacing-1;
+$typography-color-icon-copy: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$typography-color-bg-icon-copy: global.$color-transparent;
+$typography-color-icon-copy_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$typography-color-bg-icon-copy_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+$typography-color-icon-copy_copied: global.$color-success-6;
+
+$typography-color-icon-edit: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$typography-color-bg-icon-edit: global.$color-transparent;
+$typography-color-icon-edit_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$typography-color-bg-icon-edit_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+
+$typography-color-expand-text: global.$color-primary-6;
+$typography-color-expand-text_hover: global.$color-primary-5;
+
+$typography-color-blockquote-border-width: 2px;
+$typography-color-blockquote-border-left: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-6')
+);
+$typography-color-blockquote-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$typography-heading-margin-top: 1em;
+$typography-heading-margin-bottom: 0.5em;

package/es/upload/style/index.css

@@ -20,7 +20,7 @@
   max-width: 100%;
   cursor: pointer;
 }
-.sd-upload.sd-upload-draggable {
+.sd-upload .sd-upload.sd-upload-draggable {
   width: 100%;
 }
 .sd-upload-tip {
@@ -98,7 +98,7 @@
 .sd-upload-wrapper {
   width: 100%;
 }
-.sd-upload-wrapper.sd-upload-wrapper-type-picture-card {
+.sd-upload-wrapper .sd-upload-wrapper.sd-upload-wrapper-type-picture-card {
   display: flex;
   justify-content: flex-start;
 }
@@ -122,14 +122,15 @@
   cursor: not-allowed;
 }
 .sd-upload-disabled .sd-upload-drag .sd-icon-plus,
-.sd-upload-disabled .sd-upload-drag:hover .sd-icon-plus,
 .sd-upload-disabled .sd-upload-drag .sd-upload-drag-text,
+.sd-upload-disabled .sd-upload-drag:hover .sd-icon-plus,
 .sd-upload-disabled .sd-upload-drag:hover .sd-upload-drag-text {
   color: var(--color-text-4);
 }
 .sd-upload-disabled .sd-upload-tip {
   color: var(--color-text-4);
 }
+
 .sd-upload-icon {
   cursor: pointer;
 }
@@ -146,8 +147,7 @@
   position: relative;
   font-size: 14px;
 }
-.sd-upload-icon-start,
-.sd-upload-icon-cancel {
+.sd-upload-icon-start, .sd-upload-icon-cancel {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -161,25 +161,26 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.sd-upload-icon-upload:active,
-.sd-upload-icon-upload:hover {
+.sd-upload-icon-upload:active, .sd-upload-icon-upload:hover {
   color: rgb(var(--primary-7));
 }
+
 .sd-upload-list {
   margin: 0;
   padding: 0;
   list-style: none;
-  /*** listtype is text ****/
-  /*** end ****/
 }
-.sd-upload-list.sd-upload-list-type-text,
-.sd-upload-list.sd-upload-list-type-picture {
+.sd-upload-list .sd-upload-list.sd-upload-list-type-text,
+.sd-upload-list .sd-upload-list.sd-upload-list-type-picture {
   width: 100%;
 }
-.sd-upload-list.sd-upload-list-type-text .sd-upload-list-item:first-of-type,
-.sd-upload-list.sd-upload-list-type-picture .sd-upload-list-item:first-of-type {
+.sd-upload-list .sd-upload-list.sd-upload-list-type-text .sd-upload-list-item:first-of-type,
+.sd-upload-list .sd-upload-list.sd-upload-list-type-picture .sd-upload-list-item:first-of-type {
   margin-top: 24px;
 }
+.sd-upload-list {
+  /*** listtype is text ****/
+}
 .sd-upload-list-item-done .sd-upload-list-item-file-icon {
   color: rgb(var(--primary-6));
 }
@@ -252,7 +253,7 @@
   line-height: 12px;
 }
 .sd-upload-list-item .sd-upload-progress:hover .sd-progress-circle-bg {
-  stroke: rgba(var(--gray-10), 0.2);
+  stroke: rgb(var(--gray-10), 0.2);
 }
 .sd-upload-list-item .sd-upload-progress:hover .sd-progress-circle-bar {
   stroke: rgb(var(--primary-7));
@@ -265,20 +266,22 @@
 .sd-upload-list-item-operation .sd-upload-icon-remove {
   font-size: inherit;
 }
-.sd-upload-list-item-error .sd-upload-list-status,
-.sd-upload-list-item-done .sd-upload-list-status {
+.sd-upload-list-item-error .sd-upload-list-status, .sd-upload-list-item-done .sd-upload-list-status {
   display: none;
 }
 .sd-upload-list-type-text .sd-upload-list-item-error .sd-upload-list-item-name-link,
 .sd-upload-list-type-text .sd-upload-list-item-error .sd-upload-list-item-name {
   color: rgb(var(--danger-6));
 }
-.sd-upload-list.sd-upload-list-type-picture-card {
+.sd-upload-list {
+  /*** end ****/
+}
+.sd-upload-list .sd-upload-list.sd-upload-list-type-picture-card {
   display: flex;
   flex-wrap: wrap;
   vertical-align: top;
 }
-.sd-upload-list.sd-upload-list-type-picture-card .sd-upload-list-status {
+.sd-upload-list .sd-upload-list.sd-upload-list-type-picture-card .sd-upload-list-status {
   top: 50%;
   margin-left: 0;
   transform: translateY(-50%);
@@ -355,25 +358,31 @@
 .sd-upload-list-type-picture .sd-upload-list-item-error .sd-upload-list-item-name {
   color: rgb(var(--danger-6));
 }
+
 .sd-upload-hide + .sd-upload-list .sd-upload-list-item:first-of-type {
   margin-top: 0;
 }
+
 .sd-upload-slide-up-enter {
   opacity: 0;
 }
+
 .sd-upload-slide-up-enter-active {
   opacity: 1;
   transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .sd-upload-slide-up-exit {
   opacity: 1;
 }
+
 .sd-upload-slide-up-exit-active {
   margin: 0;
   overflow: hidden;
   opacity: 0;
   transition: opacity 0.1s cubic-bezier(0, 0, 1, 1), height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s, margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s;
 }
+
 .sd-upload-list-item.sd-upload-slide-inline-enter {
   opacity: 0;
 }
@@ -389,4 +398,4 @@
   overflow: hidden;
   opacity: 0;
   transition: opacity 0.1s cubic-bezier(0, 0, 1, 1), width 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s, margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s;
-}
+}

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

@@ -1,6 +1,6 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../button/style';
 import '../../trigger/style';
 import '../../progress/style';
 import '../../image/style';
-import './index.less';
+import './index.scss';

package/es/upload/style/index.js

@@ -1,4 +1,4 @@
 import "../../progress/style/index.js";
 import "../../image/style/index.js";
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";