@sdata/web-vue 1.6.0 → 1.7.0

package/es/descriptions/style/index.js

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

package/es/descriptions/style/index.scss

@@ -0,0 +1,217 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@components/descriptions/style/token.scss' as *;
+
+$descriptions-prefix-cls: string.unquote('#{theme.$prefix}-descriptions');
+
+$__less-vars: (
+  'descriptions-border-color-bg-label': $descriptions-border-color-bg-label,
+  'descriptions-border-item-size-mini-padding-horizontal':
+    $descriptions-border-item-size-mini-padding-horizontal,
+  'descriptions-border-item-size-mini-padding-vertical':
+    $descriptions-border-item-size-mini-padding-vertical,
+  'descriptions-border-item-size-small-padding-horizontal':
+    $descriptions-border-item-size-small-padding-horizontal,
+  'descriptions-border-item-size-small-padding-vertical':
+    $descriptions-border-item-size-small-padding-vertical,
+  'descriptions-border-item-size-medium-padding-horizontal':
+    $descriptions-border-item-size-medium-padding-horizontal,
+  'descriptions-border-item-size-medium-padding-vertical':
+    $descriptions-border-item-size-medium-padding-vertical,
+  'descriptions-border-item-size-default-padding-horizontal':
+    $descriptions-border-item-size-default-padding-horizontal,
+  'descriptions-border-item-size-default-padding-vertical':
+    $descriptions-border-item-size-default-padding-vertical,
+  'descriptions-border-item-size-large-padding-horizontal':
+    $descriptions-border-item-size-large-padding-horizontal,
+  'descriptions-border-item-size-large-padding-vertical':
+    $descriptions-border-item-size-large-padding-vertical,
+  'descriptions-border-radius': $descriptions-border-radius,
+  'descriptions-border-style': $descriptions-border-style,
+  'descriptions-border-width': $descriptions-border-width,
+  'descriptions-color-border': $descriptions-color-border,
+  'descriptions-color-text-label': $descriptions-color-text-label,
+  'descriptions-color-text-value': $descriptions-color-text-value,
+  'descriptions-color-title': $descriptions-color-title,
+  'descriptions-font-size-title': $descriptions-font-size-title,
+  'descriptions-font-weight-text-label': $descriptions-font-weight-text-label,
+  'descriptions-font-weight-text-value': $descriptions-font-weight-text-value,
+  'descriptions-font-weight-title': $descriptions-font-weight-title,
+  'descriptions-item-size-mini-spacing-bottom': $descriptions-item-size-mini-spacing-bottom,
+  'descriptions-item-size-small-spacing-bottom': $descriptions-item-size-small-spacing-bottom,
+  'descriptions-item-size-medium-spacing-bottom': $descriptions-item-size-medium-spacing-bottom,
+  'descriptions-item-size-default-spacing-bottom': $descriptions-item-size-default-spacing-bottom,
+  'descriptions-item-size-large-spacing-bottom': $descriptions-item-size-large-spacing-bottom,
+  'descriptions-size-mini-font-size-text': $descriptions-size-mini-font-size-text,
+  'descriptions-size-mini-title-margin-bottom': $descriptions-size-mini-title-margin-bottom,
+  'descriptions-size-small-font-size-text': $descriptions-size-small-font-size-text,
+  'descriptions-size-small-title-margin-bottom': $descriptions-size-small-title-margin-bottom,
+  'descriptions-size-medium-font-size-text': $descriptions-size-medium-font-size-text,
+  'descriptions-size-medium-title-margin-bottom': $descriptions-size-medium-title-margin-bottom,
+  'descriptions-size-default-font-size-text': $descriptions-size-default-font-size-text,
+  'descriptions-size-default-title-margin-bottom': $descriptions-size-default-title-margin-bottom,
+  'descriptions-size-large-font-size-text': $descriptions-size-large-font-size-text,
+  'descriptions-size-large-title-margin-bottom': $descriptions-size-large-title-margin-bottom,
+  'line-height-base': theme.$line-height-base,
+  'prefix': theme.$prefix,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+@mixin descriptions-size($size) {
+  &-size-#{$size} &-title {
+    margin-bottom: less-var('descriptions-size-#{$size}-title-margin-bottom');
+  }
+
+  &-size-#{$size} &-item-label-block,
+  &-size-#{$size} &-item-value-block {
+    padding-right: less-var('descriptions-border-item-size-#{$size}-padding-horizontal');
+    padding-bottom: less-var('descriptions-item-size-#{$size}-spacing-bottom');
+    font-size: less-var('descriptions-size-#{$size}-font-size-text');
+  }
+
+  &-size-#{$size}#{&}-border &-item-label-block,
+  &-size-#{$size}#{&}-border &-item-value-block {
+    padding: less-var('descriptions-border-item-size-#{$size}-padding-vertical')
+      less-var('descriptions-border-item-size-#{$size}-padding-horizontal');
+  }
+
+  &-size-#{$size}#{&}-border#{&}-layout-inline-vertical &-item {
+    $_descriptions-padding-vertical: string.unquote(
+      'descriptions-border-item-size-#{$size}-padding-vertical'
+    );
+
+    padding: less-var($_descriptions-padding-vertical) + 5px
+      less-var('descriptions-border-item-size-#{$size}-padding-horizontal');
+  }
+}
+
+.#{$descriptions-prefix-cls} {
+  &-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  &-table-layout-fixed table {
+    table-layout: fixed;
+  }
+
+  &-title {
+    margin-bottom: $descriptions-size-default-title-margin-bottom;
+    color: $descriptions-color-title;
+    font-weight: $descriptions-font-weight-title;
+    font-size: $descriptions-font-size-title;
+    line-height: theme.$line-height-base;
+  }
+
+  &-item,
+  &-item-label,
+  &-item-value {
+    box-sizing: border-box;
+    font-size: $descriptions-size-default-font-size-text;
+    line-height: theme.$line-height-base;
+    text-align: left;
+  }
+
+  &-table-layout-fixed &-item-label {
+    width: auto;
+  }
+
+  &-item-label-block {
+    width: 1px;
+    padding: 0 4px $descriptions-item-size-default-spacing-bottom 0;
+    color: $descriptions-color-text-label;
+    font-weight: $descriptions-font-weight-text-label;
+    white-space: nowrap;
+  }
+
+  &-item-value-block {
+    padding: 0 4px $descriptions-item-size-default-spacing-bottom 0;
+    color: $descriptions-color-text-value;
+    font-weight: $descriptions-font-weight-text-value;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  &-item-label-inline,
+  &-item-value-inline {
+    box-sizing: border-box;
+    font-size: $descriptions-size-default-font-size-text;
+    line-height: theme.$line-height-base;
+    text-align: left;
+  }
+
+  &-item-label-inline {
+    margin-bottom: 2px;
+    color: $descriptions-color-text-label;
+    font-weight: $descriptions-font-weight-text-label;
+  }
+
+  &-item-value-inline {
+    color: $descriptions-color-text-value;
+    font-weight: $descriptions-font-weight-text-value;
+  }
+
+  &-layout-inline-horizontal &-item-label-inline {
+    margin-right: 4px;
+  }
+
+  &-layout-inline-horizontal &-item-label-inline,
+  &-layout-inline-horizontal &-item-value-inline {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+
+  &-border#{&}-layout-inline-vertical &-item {
+    padding: $descriptions-border-item-size-default-padding-vertical + 5px
+      $descriptions-border-item-size-default-padding-horizontal;
+  }
+
+  &-border &-body {
+    overflow: hidden;
+    border: $descriptions-border-width $descriptions-border-style $descriptions-color-border;
+    border-radius: $descriptions-border-radius;
+  }
+
+  &-border &-row:not(:last-child) {
+    border-bottom: $descriptions-border-width $descriptions-border-style $descriptions-color-border;
+  }
+
+  &-border &-item,
+  &-border &-item-label-block,
+  &-border &-item-value-block {
+    padding: $descriptions-border-item-size-default-padding-vertical
+      $descriptions-border-item-size-default-padding-horizontal;
+    border-right: $descriptions-border-width $descriptions-border-style $descriptions-color-border;
+  }
+
+  &-border &-item-label-block {
+    background-color: $descriptions-border-color-bg-label;
+  }
+
+  &-border &-item-value-block:last-child {
+    border-right: none;
+  }
+
+  &-border &-item:last-child {
+    border-right: none;
+  }
+
+  &-border#{&}-layout-vertical &-item-label-block:last-child {
+    border-right: none;
+  }
+
+  &-layout-vertical:not(#{&}-border) &-item-value-block:first-child {
+    padding-left: 0;
+  }
+
+  // Size
+  @include descriptions-size(mini);
+  @include descriptions-size(small);
+  @include descriptions-size(medium);
+  @include descriptions-size(large);
+}

package/es/descriptions/style/token.scss

@@ -0,0 +1,83 @@
+@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 *;
+
+$descriptions-border-width: 1px;
+
+$descriptions-border-style: solid;
+
+$descriptions-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$descriptions-border-radius: global.$radius-medium;
+
+$descriptions-font-size-title: global.$font-size-title-1;
+
+$descriptions-size-mini-title-margin-bottom: 6px;
+
+$descriptions-size-small-title-margin-bottom: 8px;
+
+$descriptions-size-medium-title-margin-bottom: 12px;
+
+$descriptions-size-default-title-margin-bottom: 16px;
+
+$descriptions-size-large-title-margin-bottom: 20px;
+
+$descriptions-size-mini-font-size-text: global.$font-size-body-1;
+
+$descriptions-size-small-font-size-text: global.$font-size-body-3;
+
+$descriptions-size-medium-font-size-text: global.$font-size-body-3;
+
+$descriptions-size-default-font-size-text: global.$font-size-body-3;
+
+$descriptions-size-large-font-size-text: global.$font-size-body-3;
+
+$descriptions-color-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$descriptions-color-text-label: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+$descriptions-color-text-value: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$descriptions-font-weight-title: global.$font-weight-500;
+
+$descriptions-font-weight-text-label: global.$font-weight-500;
+
+$descriptions-font-weight-text-value: global.$font-weight-400;
+
+$descriptions-border-color-bg-label: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1')
+);
+
+$descriptions-item-size-mini-spacing-bottom: 2px;
+
+$descriptions-item-size-small-spacing-bottom: 4px;
+
+$descriptions-item-size-medium-spacing-bottom: 8px;
+
+$descriptions-item-size-default-spacing-bottom: 12px;
+
+$descriptions-item-size-large-spacing-bottom: 16px;
+
+$descriptions-border-item-size-mini-padding-horizontal: global.$spacing-8;
+
+$descriptions-border-item-size-mini-padding-vertical: 3px;
+
+$descriptions-border-item-size-small-padding-horizontal: global.$spacing-8;
+
+$descriptions-border-item-size-small-padding-vertical: 3px;
+
+$descriptions-border-item-size-medium-padding-horizontal: global.$spacing-8;
+
+$descriptions-border-item-size-medium-padding-vertical: 5px;
+
+$descriptions-border-item-size-default-padding-horizontal: global.$spacing-8;
+
+$descriptions-border-item-size-default-padding-vertical: 7px;
+
+$descriptions-border-item-size-large-padding-horizontal: global.$spacing-8;
+
+$descriptions-border-item-size-large-padding-vertical: 9px;

package/es/divider/style/index.css

@@ -57,4 +57,4 @@
 }
 .sd-divider-text-right {
   right: 24px;
-}
+}

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

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

package/es/divider/style/index.js

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

package/es/divider/style/index.scss

@@ -0,0 +1,58 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/divider/style/token.scss' as *;
+
+$divider-prefix-cls: string.unquote('#{theme.$prefix}-divider');
+
+.#{$divider-prefix-cls} {
+  &-horizontal {
+    position: relative;
+    clear: both;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    margin: $divider-margin-vertical 0;
+    border-bottom: $divider-size $divider-line-style $divider-color-bg;
+
+    &.#{$divider-prefix-cls}-with-text {
+      margin: $divider-margin-vertical_text 0;
+    }
+  }
+
+  &-vertical {
+    display: inline-block;
+    min-width: 1px;
+    max-width: 1px;
+    min-height: 1em;
+    margin: 0 $divider-margin-horizontal;
+    vertical-align: middle;
+    border-left: $divider-size $divider-line-style $divider-color-bg;
+  }
+
+  // Only the horizontal dividing line supports text, and only the horizontal situation is considered
+  &-text {
+    position: absolute;
+    top: 50%;
+    box-sizing: border-box;
+    padding: 0 $divider-margin-text;
+    color: $divider-color-text;
+    font-weight: $divider-font-weight;
+    font-size: $divider-font-size;
+    line-height: 2;
+    background: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
+    transform: translateY(-50%);
+
+    &-center {
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &-left {
+      left: $divider-position-text-left;
+    }
+
+    &-right {
+      right: $divider-position-text-right;
+    }
+  }
+}

package/es/divider/style/token.scss

@@ -0,0 +1,31 @@
+@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 *;
+
+$divider-margin-horizontal: global.$spacing-6;
+
+$divider-margin-vertical: global.$spacing-8;
+
+$divider-margin-vertical_text: global.$spacing-8;
+
+$divider-margin-text: global.$spacing-7;
+
+$divider-position-text-left: global.$spacing-9;
+
+$divider-position-text-right: global.$spacing-9;
+
+$divider-font-size: global.$font-size-body-3;
+
+$divider-font-weight: global.$font-weight-500;
+
+$divider-size: 1px;
+
+$divider-line-style: global.$border-solid;
+
+$divider-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$divider-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));

package/es/drawer/style/index.css

@@ -20,11 +20,13 @@
   inset: 0;
   z-index: 1001;
 }
+
 .sd-drawer-mask {
   position: absolute;
   inset: 0;
   background-color: var(--color-mask-bg);
 }
+
 .sd-drawer {
   position: absolute;
   display: flex;
@@ -77,118 +79,150 @@
   overflow: auto;
   color: var(--color-text-1);
 }
+
 .sd-drawer-penetrable {
   pointer-events: none;
 }
 .sd-drawer-penetrable .sd-drawer {
   pointer-events: auto;
 }
+
 .fade-drawer-enter-from,
 .fade-drawer-appear-from {
   opacity: 0;
 }
+
 .fade-drawer-enter-to,
 .fade-drawer-appear-to {
   opacity: 1;
 }
+
 .fade-drawer-enter-active,
 .fade-drawer-appear-active {
   transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .fade-drawer-leave-from {
   opacity: 1;
 }
+
 .fade-drawer-leave-to {
   opacity: 0;
 }
+
 .fade-drawer-leave-active {
   transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .slide-left-drawer-enter-from,
 .slide-left-drawer-appear-from {
   transform: translateX(-100%);
 }
+
 .slide-left-drawer-enter-to,
 .slide-left-drawer-appear-to {
   transform: translateX(0);
 }
+
 .slide-left-drawer-enter-active,
 .slide-left-drawer-appear-active {
   transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .slide-left-drawer-leave-from {
   transform: translateX(0);
 }
+
 .slide-left-drawer-leave-to {
   transform: translateX(-100%);
 }
+
 .slide-left-drawer-leave-active {
   transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .slide-right-drawer-enter-from,
 .slide-right-drawer-appear-from {
   transform: translateX(100%);
 }
+
 .slide-right-drawer-enter-to,
 .slide-right-drawer-appear-to {
   transform: translateX(0);
 }
+
 .slide-right-drawer-enter-active,
 .slide-right-drawer-appear-active {
   transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .slide-right-drawer-leave-from {
   transform: translateX(0);
 }
+
 .slide-right-drawer-leave-to {
   transform: translateX(100%);
 }
+
 .slide-right-drawer-leave-active {
   transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .slide-top-drawer-enter,
 .slide-top-drawer-appear {
   transform: translateY(-100%);
 }
+
 .slide-top-drawer-enter-from,
 .slide-top-drawer-appear-from {
   transform: translateY(-100%);
 }
+
 .slide-top-drawer-enter-to,
 .slide-top-drawer-appear-to {
   transform: translateY(0);
 }
+
 .slide-top-drawer-enter-active,
 .slide-top-drawer-appear-active {
   transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .slide-top-drawer-leave-from {
   transform: translateY(0);
 }
+
 .slide-top-drawer-leave-to {
   transform: translateY(-100%);
 }
+
 .slide-top-drawer-leave-active {
   transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .slide-bottom-drawer-enter-from,
 .slide-bottom-drawer-appear-from {
   transform: translateY(100%);
 }
+
 .slide-bottom-drawer-enter-to,
 .slide-bottom-drawer-appear-to {
   transform: translateY(0);
 }
+
 .slide-bottom-drawer-enter-active,
 .slide-bottom-drawer-appear-active {
   transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .slide-bottom-drawer-leave-from {
   transform: translateY(0);
 }
+
 .slide-bottom-drawer-leave-to {
   transform: translateY(100%);
 }
+
 .slide-bottom-drawer-leave-active {
   transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
-}
+}

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

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

package/es/drawer/style/index.js

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