@sdata/web-vue 1.5.0 → 1.7.0

package/es/checkbox/style/index.scss

@@ -0,0 +1,186 @@
+@use '@style/mixins/icon-hover.scss' as icon-hover;
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/component.scss' as component;
+@use '@style/theme/index.scss' as global;
+@use '@style/mixins/index.scss' as *;
+@use '@components/checkbox/style/token.scss' as *;
+
+@include icon-hover.icon-hover(
+  $checkbox-prefix-cls,
+  $checkbox-mask-height,
+  $checkbox-mask-bg-height
+);
+
+.#{$checkbox-prefix-cls} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: ($checkbox-mask-bg-height * 0.5) - ($checkbox-mask-height * 0.5);
+  font-size: $checkbox-text-font-size;
+  line-height: unset;
+  cursor: pointer;
+
+  > input[type='checkbox'] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    opacity: 0;
+
+    &:focus-visible + .#{$checkbox-prefix-cls}-icon-hover::before {
+      background-color: component.$icon-hover-color-bg;
+    }
+  }
+
+  &:hover {
+    .#{$checkbox-prefix-cls}-icon-hover::before {
+      background-color: $checkbox-mask-bg-color-bg;
+    }
+  }
+
+  &-label {
+    margin-left: $checkbox-text-mask-spacing;
+    color: $checkbox-color-text;
+  }
+
+  &-icon {
+    position: relative;
+    box-sizing: border-box;
+    width: $checkbox-mask-height;
+    height: $checkbox-mask-height;
+    background-color: $checkbox-mask-color-bg;
+    border: $checkbox-mask-border-width $checkbox-mask-border-style $checkbox-mask-color-border;
+    border-radius: $checkbox-mask-border-radius;
+    user-select: none;
+
+    // 半选
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: block;
+      width: $checkbox-color-indeterminate-icon-width;
+      height: $checkbox-color-indeterminate-icon-height;
+      background: $checkbox-color-indeterminate-icon;
+      border-radius: 0.5px;
+      transform: translateX(-50%) translateY(-50%) scale(0);
+      content: '';
+    }
+
+    &-check {
+      position: relative;
+      display: block;
+      width: $checkbox-size-check-icon;
+      height: 100%;
+      margin: 0 auto;
+      color: $checkbox-color-check-icon;
+      transform: scale(0);
+      transform-origin: center 75%;
+    }
+  }
+
+  &:hover &-icon {
+    border-color: $checkbox-mask-color-border_hover;
+    transition:
+      border-color theme.$transition-duration-1 theme.$transition-timing-function-linear,
+      transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+  }
+
+  &-checked:hover &-icon,
+  &-indeterminate:hover &-icon {
+    transition: transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+  }
+
+  &-checked &-icon {
+    background-color: $checkbox-mask-color-bg_checked;
+    border-color: $checkbox-mask-color-border_checked;
+
+    &-check {
+      transform: scale(1);
+      transition: transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+    }
+  }
+
+  &-indeterminate &-icon {
+    background-color: $checkbox-mask-color-bg_checked;
+    border-color: $checkbox-mask-color-border_checked;
+
+    svg {
+      transform: scale(0);
+    }
+
+    &::after {
+      transform: translateX(-50%) translateY(-50%) scale(1);
+      transition: transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+    }
+  }
+
+  &#{&}-disabled {
+    cursor: not-allowed;
+
+    .#{$checkbox-prefix-cls}-icon-hover {
+      cursor: not-allowed;
+    }
+
+    &:hover .#{$checkbox-prefix-cls}-mask {
+      border-color: $checkbox-mask-color-border_disabled;
+    }
+  }
+
+  &-checked:hover &-icon,
+  &-indeterminate:hover &-icon {
+    border-color: $checkbox-mask-color-border_checked;
+  }
+
+  &-disabled &-icon {
+    background-color: $checkbox-mask-color-bg_disabled;
+    border-color: $checkbox-mask-color-border_disabled;
+  }
+
+  &-disabled#{&}-checked &-icon,
+  &-disabled#{&}-checked:hover &-icon {
+    background-color: $checkbox-mask-color-bg_checked_disabled;
+    border-color: $checkbox-mask-color-border_checked_disabled;
+  }
+
+  &-disabled:hover,
+  &-checked:hover,
+  &-indeterminate:hover {
+    .#{$checkbox-prefix-cls}-icon-hover::before {
+      background-color: global.$color-transparent;
+    }
+  }
+
+  &-disabled:hover &-icon {
+    border-color: $checkbox-mask-color-border;
+  }
+
+  &-disabled &-label {
+    color: $checkbox-color-text_disabled;
+  }
+
+  &-disabled &-icon-check {
+    color: $checkbox-color-check-icon_disabled;
+  }
+}
+
+// checkbox group
+.#{$checkbox-prefix-cls}-group {
+  display: inline-block;
+
+  .#{$checkbox-prefix-cls} {
+    margin-right: $checkbox-group-spacing;
+  }
+}
+
+// vertical direction
+
+.#{$checkbox-prefix-cls}-group-direction-vertical {
+  .#{$checkbox-prefix-cls} {
+    display: flex;
+    margin-right: 0;
+    line-height: $checkbox-group-size-line-height_vertical;
+  }
+}

package/es/checkbox/style/token.scss

@@ -0,0 +1,70 @@
+@use '@style/theme/component.scss' as component;
+@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 *;
+
+$checkbox-prefix-cls: string.unquote('#{$prefix}-checkbox');
+
+$checkbox-mask-border-width: global.$border-2;
+
+$checkbox-mask-border-style: global.$border-solid;
+
+$checkbox-mask-border-radius: global.$radius-small;
+
+$checkbox-mask-height: 14px;
+
+$checkbox-mask-bg-height: global.$size-6;
+
+$checkbox-mask-bg-color-bg: component.$icon-hover-color-bg;
+
+$checkbox-mask-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$checkbox-mask-color-bg_checked: global.$color-primary-6;
+
+$checkbox-mask-color-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$checkbox-mask-color-bg_checked_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+
+$checkbox-mask-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$checkbox-mask-color-border_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
+
+$checkbox-mask-color-border_checked: global.$color-transparent;
+
+$checkbox-mask-color-border_checked_disabled: global.$color-transparent;
+
+$checkbox-mask-color-border_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);
+
+$checkbox-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$checkbox-color-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$checkbox-group-spacing: global.$spacing-7;
+
+$checkbox-text-mask-spacing: global.$spacing-4;
+
+$checkbox-text-font-size: global.$font-size-body-3;
+
+$checkbox-group-size-line-height_vertical: global.$size-8;
+
+$checkbox-size-check-icon: global.$size-2;
+
+$checkbox-color-check-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+
+$checkbox-color-check-icon_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);
+
+$checkbox-color-indeterminate-icon-width: 6px;
+
+$checkbox-color-indeterminate-icon-height: 2px;
+
+$checkbox-color-indeterminate-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));

package/es/collapse/style/index.css

@@ -19,9 +19,11 @@
   width: 16px;
   height: 16px;
 }
+
 .sd-icon-hover.sd-collapse-item-icon-hover:hover::before {
   background-color: var(--color-fill-2);
 }
+
 .sd-collapse {
   overflow: hidden;
   line-height: 1.5715;
@@ -142,13 +144,15 @@
 .sd-collapse::after {
   display: table;
   clear: both;
-  content: '';
+  content: "";
 }
+
 .collapse-slider-enter-from,
 .collapse-slider-leave-to {
   height: 0;
 }
+
 .collapse-slider-enter-active,
 .collapse-slider-leave-active {
   transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
-}
+}

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

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

package/es/collapse/style/index.js

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

package/es/collapse/style/index.scss

@@ -0,0 +1,183 @@
+@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/collapse/style/token.scss' as *;
+
+$collapse-prefix-cls: string.unquote('#{theme.$prefix}-collapse');
+
+@include icon-hover.icon-hover(
+  string.unquote('#{$collapse-prefix-cls}-item'),
+  $collapse-expand-icon-size,
+  $collapse-expand-icon-size-bg
+);
+@include icon-hover.icon-hover-bg(
+  string.unquote('#{$collapse-prefix-cls}-item'),
+  $collapse-expand-icon-color-bg
+);
+
+.#{$collapse-prefix-cls} {
+  overflow: hidden;
+  line-height: $collapse-line-height;
+  border: $collapse-border-width solid $collapse-color-border;
+  border-radius: $collapse-border-radius;
+
+  &-item {
+    box-sizing: border-box;
+    border-bottom: $collapse-title-border-width solid $collapse-item-color-border;
+
+    &-active {
+      > .#{$collapse-prefix-cls}-item-header {
+        background-color: $collapse-title-color-bg_active;
+        border-color: $collapse-title-color-border;
+        transition: border-color 0s ease 0s;
+
+        .#{$collapse-prefix-cls}-item-header-title {
+          font-weight: $collapse-title-font-weight_active;
+        }
+
+        .#{$collapse-prefix-cls}-item-expand-icon {
+          transform: rotate(90deg);
+        }
+
+        .#{$collapse-prefix-cls}-item-icon-right .#{$collapse-prefix-cls}-item-expand-icon {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    &-header {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding-top: $collapse-title-padding-vertical;
+      padding-bottom: $collapse-title-padding-vertical;
+      overflow: hidden;
+      color: $collapse-title-color-text;
+      font-size: $collapse-title-font-size;
+      line-height: $collapse-title-line-height;
+      background-color: $collapse-title-color-bg;
+      border-bottom: 1px solid global.$color-transparent;
+      cursor: pointer;
+      // Ensure that the border is hidden when the collapse animation is complete
+      transition: border-color 0s ease 0.19s;
+
+      &-left {
+        padding-right: $collapse-title-padding-horizontal;
+        padding-left: $collapse-title-padding-horizontal + $collapse-expand-icon-size-bg +
+          $collapse-expand-icon-spacing-text;
+      }
+
+      &-right {
+        padding-right: $collapse-title-padding-horizontal + $collapse-expand-icon-size-bg +
+          $collapse-expand-icon-spacing-text;
+        padding-left: $collapse-title-padding-horizontal;
+
+        + .#{$collapse-prefix-cls}-item-content {
+          padding-left: $collapse-title-padding-horizontal;
+        }
+      }
+
+      &-disabled {
+        color: $collapse-title-color-text_disabled;
+        background-color: $collapse-title-color-bg_disabled;
+        cursor: not-allowed;
+
+        .#{$collapse-prefix-cls}-item-header-icon {
+          color: $collapse-title-color-text_disabled;
+        }
+      }
+
+      &-title {
+        display: inline;
+      }
+
+      &-extra {
+        float: right;
+      }
+    }
+
+    // expand icon style
+    & &-icon-hover {
+      position: absolute;
+      top: 50%;
+      left: $collapse-title-padding-horizontal;
+      text-align: center;
+      transform: translateY(-50%);
+    }
+
+    & &-icon-right {
+      right: $collapse-title-padding-horizontal;
+      left: unset;
+
+      > .#{$collapse-prefix-cls}-item-header-icon-down {
+        transform: rotate(-90deg);
+      }
+    }
+
+    & &-expand-icon {
+      position: relative;
+      display: block;
+      color: $collapse-color-expand-icon;
+      font-size: $collapse-expand-icon-size;
+      vertical-align: middle;
+      transition: transform theme.$transition-duration-2 theme.$transition-timing-function-standard;
+    }
+
+    &-content {
+      position: relative;
+      padding-right: $collapse-title-padding-horizontal;
+      padding-left: $collapse-title-padding-horizontal + $collapse-expand-icon-size-bg +
+        $collapse-expand-icon-spacing-text;
+      overflow: hidden;
+      color: $collapse-content-color-text;
+      font-size: $collapse-content-font-size;
+      background-color: $collapse-content-color-bg;
+
+      &-expanded {
+        display: block;
+        height: auto;
+      }
+
+      &-box {
+        padding: $collapse-content-padding-vertical 0;
+      }
+    }
+
+    &#{&}-disabled > &-content {
+      color: $collapse-content-color-text_disabled;
+    }
+
+    &-no-icon > &-header {
+      padding-right: $collapse-title-padding-horizontal;
+      padding-left: $collapse-title-padding-horizontal;
+    }
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+
+  &.#{$collapse-prefix-cls}-borderless {
+    border: none;
+  }
+
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}
+
+.collapse-slider-enter-from,
+.collapse-slider-leave-to {
+  height: 0;
+}
+
+.collapse-slider-enter-active,
+.collapse-slider-leave-active {
+  transition: height theme.$transition-duration-2 theme.$transition-timing-function-standard;
+}

package/es/collapse/style/token.scss

@@ -0,0 +1,67 @@
+@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 *;
+
+$collapse-border-width: global.$border-1;
+
+$collapse-border-radius: global.$radius-medium;
+
+$collapse-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$collapse-line-height: 1.5715;
+
+$collapse-title-line-height: 24px;
+
+$collapse-title-border-width: global.$border-1;
+
+$collapse-title-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$collapse-title-font-size: global.$font-size-body-3;
+
+$collapse-title-padding-horizontal: 13px;
+
+$collapse-title-padding-vertical: global.$spacing-4;
+
+$collapse-title-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$collapse-title-color-bg_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$collapse-title-color-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$collapse-title-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$collapse-title-color-text_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$collapse-title-font-weight_active: global.$font-weight-500;
+
+$collapse-content-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$collapse-content-color-text_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$collapse-content-font-size: global.$font-size-body-3;
+
+$collapse-content-padding-vertical: global.$spacing-4;
+
+$collapse-content-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+
+$collapse-expand-icon-size: 14px;
+
+$collapse-expand-icon-size-bg: global.$size-4;
+
+$collapse-expand-icon-spacing-text: 5px;
+
+$collapse-color-expand-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-7'));
+
+$collapse-item-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));
+
+$collapse-item-border-width: global.$border-1;
+
+$collapse-expand-icon-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));

package/es/color-picker/style/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -93,6 +94,7 @@
 .sd-color-picker.sd-color-picker-disabled .sd-color-picker-value {
   color: var(--color-text-4);
 }
+
 .sd-color-picker-panel {
   width: 260px;
   background-color: var(--color-bg-1);
@@ -105,7 +107,7 @@
   width: 100%;
   height: 178px;
   overflow: hidden;
-  background-image: linear-gradient(0deg, #000000, transparent), linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0));
+  background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0));
   border-top: 1px solid var(--color-border-2);
   border-right: 1px solid var(--color-border-2);
   border-left: 1px solid var(--color-border-2);
@@ -238,7 +240,7 @@
   height: 100%;
   background: var(--color-bg-white);
   border-radius: 50%;
-  content: '';
+  content: "";
 }
 .sd-color-picker-panel .sd-color-picker-control-bar .sd-color-picker-handler::after {
   position: absolute;
@@ -249,7 +251,7 @@
   background: currentcolor;
   border-radius: 50%;
   transform: translate(-50%, -50%);
-  content: '';
+  content: "";
 }
 .sd-color-picker-panel .sd-color-picker-control-bar-hue {
   background: linear-gradient(90deg, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
@@ -271,7 +273,8 @@
   cursor: not-allowed;
   opacity: 0.8;
 }
+
 .sd-color-picker-select-popup .sd-select-option {
   font-size: 12px !important;
   line-height: 24px !important;
-}
+}

package/es/color-picker/style/index.d.ts

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

package/es/color-picker/style/index.js

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