@sdata/web-vue 1.6.0 → 1.7.1

package/es/cascader/style/index.css

@@ -1,3 +1,20 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 /**********************************************
  * Popup Box
  **********************************************/
@@ -65,8 +82,7 @@
   font-weight: 500;
   background-color: var(--color-bg-popup);
 }
-.sd-select-dropdown .sd-select-option-active,
-.sd-select-dropdown .sd-select-option:not(.sd-select-dropdown .sd-select-option-disabled):hover {
+.sd-select-dropdown .sd-select-option-active, .sd-select-dropdown .sd-select-option:not(.sd-select-dropdown .sd-select-option-disabled):hover {
   color: var(--color-text-1);
   background-color: var(--color-fill-2);
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
@@ -111,23 +127,7 @@
 .sd-select-dropdown-footer {
   border-top: 1px solid var(--color-fill-3);
 }
-/******** borderSize *******/
-/******** borderStyle *******/
-/******** radius *******/
-/******** shadow distance *******/
-/******** size *******/
-/******** spacing *******/
-/******** shadow *******/
-/******** opacity *******/
-/******** fontSize *******/
-/******** fontWeight ********/
-/******** Primary *******/
-/******** success *******/
-/******** warning *******/
-/******** danger *******/
-/******** link *******/
-/******** radius *******/
-/********* icon hover *********/
+
 .sd-cascader-panel {
   display: inline-flex;
   box-sizing: border-box;
@@ -197,17 +197,14 @@
   padding: 0;
   list-style: none;
 }
-.sd-cascader-list-multiple .sd-cascader-option-label,
-.sd-cascader-list-strictly .sd-cascader-option-label {
+.sd-cascader-list-multiple .sd-cascader-option-label, .sd-cascader-list-strictly .sd-cascader-option-label {
   padding-left: 0;
 }
-.sd-cascader-list-multiple .sd-cascader-option,
-.sd-cascader-list-strictly .sd-cascader-option {
+.sd-cascader-list-multiple .sd-cascader-option, .sd-cascader-list-strictly .sd-cascader-option {
   padding-left: 12px;
 }
 .sd-cascader-list-multiple .sd-cascader-option .sd-checkbox,
-.sd-cascader-list-strictly .sd-cascader-option .sd-checkbox,
-.sd-cascader-list-multiple .sd-cascader-option .sd-radio,
+.sd-cascader-list-multiple .sd-cascader-option .sd-radio, .sd-cascader-list-strictly .sd-cascader-option .sd-checkbox,
 .sd-cascader-list-strictly .sd-cascader-option .sd-radio {
   margin-right: 8px;
   padding-left: 0;
@@ -222,8 +219,7 @@
   line-height: 36px;
   border-top: 1px solid var(--color-fill-3);
 }
-.sd-cascader-option,
-.sd-cascader-search-option {
+.sd-cascader-option, .sd-cascader-search-option {
   position: relative;
   display: flex;
   box-sizing: border-box;
@@ -235,15 +231,13 @@
   background-color: transparent;
   cursor: pointer;
 }
-.sd-cascader-option-label,
-.sd-cascader-search-option-label {
+.sd-cascader-option-label, .sd-cascader-search-option-label {
   flex-grow: 1;
   padding-right: 34px;
   padding-left: 12px;
 }
 .sd-cascader-option .sd-icon-right,
-.sd-cascader-search-option .sd-icon-right,
-.sd-cascader-option .sd-icon-check,
+.sd-cascader-option .sd-icon-check, .sd-cascader-search-option .sd-icon-right,
 .sd-cascader-search-option .sd-icon-check {
   position: absolute;
   top: 50%;
@@ -252,12 +246,10 @@
   font-size: 12px;
   transform: translateY(-50%);
 }
-.sd-cascader-option .sd-icon-check,
-.sd-cascader-search-option .sd-icon-check {
+.sd-cascader-option .sd-icon-check, .sd-cascader-search-option .sd-icon-check {
   color: rgb(var(--primary-6));
 }
-.sd-cascader-option .sd-icon-loading,
-.sd-cascader-search-option .sd-icon-loading {
+.sd-cascader-option .sd-icon-loading, .sd-cascader-search-option .sd-icon-loading {
   position: absolute;
   top: 50%;
   right: 10px;
@@ -265,37 +257,25 @@
   color: rgb(var(--primary-6));
   font-size: 12px;
 }
-.sd-cascader-option:hover,
-.sd-cascader-search-option-hover {
+.sd-cascader-option:hover, .sd-cascader-search-option-hover {
   color: var(--color-text-1);
   background-color: var(--color-fill-2);
 }
-.sd-cascader-option:hover .sd-checkbox:not(.sd-checkbox-disabled):not(.sd-checkbox-checked):hover .sd-checkbox-icon-hover::before,
-.sd-cascader-search-option-hover .sd-checkbox:not(.sd-checkbox-disabled):not(.sd-checkbox-checked):hover .sd-checkbox-icon-hover::before {
+.sd-cascader-option:hover .sd-checkbox:not(.sd-checkbox-disabled):not(.sd-checkbox-checked):hover .sd-checkbox-icon-hover::before, .sd-cascader-search-option-hover .sd-checkbox:not(.sd-checkbox-disabled):not(.sd-checkbox-checked):hover .sd-checkbox-icon-hover::before {
   background-color: var(--color-fill-3);
 }
-.sd-cascader-option:hover .sd-radio:not(.sd-radio-disabled):not(.sd-radio-checked):hover .sd-radio-icon-hover::before,
-.sd-cascader-search-option-hover .sd-radio:not(.sd-radio-disabled):not(.sd-radio-checked):hover .sd-radio-icon-hover::before {
+.sd-cascader-option:hover .sd-radio:not(.sd-radio-disabled):not(.sd-radio-checked):hover .sd-radio-icon-hover::before, .sd-cascader-search-option-hover .sd-radio:not(.sd-radio-disabled):not(.sd-radio-checked):hover .sd-radio-icon-hover::before {
   background-color: var(--color-fill-3);
 }
-.sd-cascader-option-disabled,
-.sd-cascader-search-option-disabled,
-.sd-cascader-option-disabled:hover,
-.sd-cascader-search-option-disabled:hover {
+.sd-cascader-option-disabled, .sd-cascader-option-disabled:hover, .sd-cascader-search-option-disabled, .sd-cascader-search-option-disabled:hover {
   color: var(--color-text-4);
   background-color: transparent;
   cursor: not-allowed;
 }
-.sd-cascader-option-disabled .sd-icon-right,
-.sd-cascader-search-option-disabled .sd-icon-right,
-.sd-cascader-option-disabled:hover .sd-icon-right,
-.sd-cascader-search-option-disabled:hover .sd-icon-right {
+.sd-cascader-option-disabled .sd-icon-right, .sd-cascader-option-disabled:hover .sd-icon-right, .sd-cascader-search-option-disabled .sd-icon-right, .sd-cascader-search-option-disabled:hover .sd-icon-right {
   color: inherit;
 }
-.sd-cascader-option-disabled .sd-icon-check,
-.sd-cascader-search-option-disabled .sd-icon-check,
-.sd-cascader-option-disabled:hover .sd-icon-check,
-.sd-cascader-search-option-disabled:hover .sd-icon-check {
+.sd-cascader-option-disabled .sd-icon-check, .sd-cascader-option-disabled:hover .sd-icon-check, .sd-cascader-search-option-disabled .sd-icon-check, .sd-cascader-search-option-disabled:hover .sd-icon-check {
   color: var(--color-primary-light-3);
 }
 .sd-cascader-option-active {
@@ -307,20 +287,22 @@
   color: var(--color-text-1);
   background-color: var(--color-fill-2);
 }
-.sd-cascader-option-active.sd-cascader-option-disabled,
-.sd-cascader-option-active.sd-cascader-option-disabled:hover {
+.sd-cascader-option-active.sd-cascader-option-disabled, .sd-cascader-option-active.sd-cascader-option-disabled:hover {
   color: var(--color-text-4);
   background-color: var(--color-fill-2);
 }
+
 .cascader-slide-enter-active,
 .cascader-slide-leave-active {
   transition: margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .cascader-slide-enter-from,
 .cascader-slide-leave-to {
   margin-left: -120px;
 }
+
 .cascader-slide-enter-to,
 .cascader-slide-leave-from {
   margin-left: 0;
-}
+}

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

@@ -1,8 +1,8 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../_components/select-view/style';
 import '../../trigger/style';
 import '../../empty/style';
 import '../../checkbox/style';
 import '../../radio/style';
 import '../../scrollbar/style';
-import './index.less';
+import './index.scss';

package/es/cascader/style/index.js

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

package/es/cascader/style/index.scss

@@ -0,0 +1,242 @@
+@use '@components/select/style/token.scss' as selectToken;
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/select/style/index.scss' as *;
+@use '@components/cascader/style/token.scss' as *;
+
+$cascader-prefix-cls: string.unquote('#{theme.$prefix}-cascader');
+
+//.select-view($cascader-prefix-cls);
+
+.#{$cascader-prefix-cls} {
+  &-panel {
+    display: inline-flex;
+    box-sizing: border-box;
+    height: selectToken.$select-popup-max-height;
+    overflow: hidden;
+    white-space: nowrap;
+    list-style: none;
+    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-popup'));
+    border: 1px solid selectToken.$select-popup-color-border;
+    border-radius: selectToken.$select-popup-border-radius;
+    box-shadow: selectToken.$select-popup-box-shadow;
+  }
+
+  &-search-panel {
+    justify-content: flex-start;
+    width: 100%;
+    overflow: auto;
+  }
+
+  &-popup-trigger-hover {
+    .#{$cascader-prefix-cls}-list-item {
+      transition: fontweight 0s;
+    }
+  }
+
+  &-highlight {
+    font-weight: global.$font-weight-500;
+  }
+
+  &-panel-column {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    min-width: 120px;
+    height: 100%;
+    max-height: 200px;
+    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-popup'));
+
+    &-loading {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &:not(:last-of-type) {
+      border-right: 1px solid selectToken.$select-popup-color-border;
+    }
+  }
+
+  &-column-content {
+    flex: 1;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  &-list-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    padding: selectToken.$select-popup-padding-vertical 0;
+
+    &-with-footer {
+      padding-bottom: 0;
+    }
+  }
+
+  &-list-empty {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-list {
+    flex: 1;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &-multiple,
+    &-strictly {
+      .#{$cascader-prefix-cls}-option-label {
+        padding-left: 0;
+      }
+
+      .#{$cascader-prefix-cls}-option {
+        padding-left: $cascader-padding-item-left;
+
+        .#{theme.$prefix}-checkbox,
+        .#{theme.$prefix}-radio {
+          margin-right: $cascader-margin-checkbox-right;
+          padding-left: 0;
+        }
+      }
+    }
+  }
+
+  &-search-list#{&}-list-multiple {
+    .#{$cascader-prefix-cls}-option-label {
+      padding-right: $cascader-padding-item-left;
+    }
+  }
+
+  &-list-footer {
+    box-sizing: border-box;
+    height: $cascader-size-item-height;
+    padding-left: $cascader-padding-item-left;
+    line-height: $cascader-size-item-height;
+    border-top: 1px solid selectToken.$select-popup-color-border;
+  }
+
+  &-option,
+  &-search-option {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    min-width: 100px;
+    height: $cascader-size-item-height;
+    color: $cascader-color-item-text;
+    font-size: $cascader-font-item-size;
+    line-height: $cascader-size-item-height;
+    background-color: transparent;
+    cursor: pointer;
+
+    &-label {
+      flex-grow: 1;
+      padding-right: $cascader-padding-item-right + $cascader-size-item-icon +
+        $cascader-margin-item-icon-left;
+      padding-left: $cascader-padding-item-left;
+    }
+
+    .#{theme.$prefix}-icon-right,
+    .#{theme.$prefix}-icon-check {
+      position: absolute;
+      top: 50%;
+      right: $cascader-padding-item-right;
+      color: $cascader-color-item-icon;
+      font-size: $cascader-size-item-icon;
+      transform: translateY(-50%);
+    }
+
+    .#{theme.$prefix}-icon-check {
+      color: global.$color-primary-6;
+    }
+
+    .#{theme.$prefix}-icon-loading {
+      position: absolute;
+      top: 50%;
+      right: $cascader-padding-item-right;
+      margin-top: -($cascader-size-item-icon * 0.5);
+      color: global.$color-primary-6;
+      font-size: $cascader-size-item-icon;
+    }
+  }
+
+  &-option:hover,
+  &-search-option-hover {
+    color: $cascader-color-item-text_hover;
+    background-color: $cascader-color-item-bg_hover;
+
+    .#{theme.$prefix}-checkbox:not(.#{theme.$prefix}-checkbox-disabled):not(
+        .#{theme.$prefix}-checkbox-checked
+      ):hover
+      .#{theme.$prefix}-checkbox-icon-hover::before {
+      background-color: $cascader-color-checkbox-bg_hover;
+    }
+
+    .#{theme.$prefix}-radio:not(.#{theme.$prefix}-radio-disabled):not(
+        .#{theme.$prefix}-radio-checked
+      ):hover
+      .#{theme.$prefix}-radio-icon-hover::before {
+      background-color: $cascader-color-checkbox-bg_hover;
+    }
+  }
+
+  &-option,
+  &-search-option {
+    &-disabled,
+    &-disabled:hover {
+      color: $cascader-color-item-text_disabled;
+      background-color: $cascader-color-item-bg_disabled;
+      cursor: not-allowed;
+
+      .#{theme.$prefix}-icon-right {
+        color: inherit;
+      }
+
+      .#{theme.$prefix}-icon-check {
+        color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-primary-light-3'));
+      }
+    }
+  }
+
+  &-option {
+    &-active {
+      color: $cascader-color-item-text_active;
+      background-color: $cascader-color-item-bg_active;
+      transition: all theme.$transition-duration-2 theme.$transition-timing-function-linear;
+
+      &:hover {
+        color: $cascader-color-item-text_active;
+        background-color: $cascader-color-item-bg_active;
+      }
+    }
+
+    &-active#{&}-disabled,
+    &-active#{&}-disabled:hover {
+      color: $cascader-color-item-text_disabled_active;
+      background-color: $cascader-color-item-bg_disabled_active;
+    }
+  }
+}
+
+.cascader-slide-enter-active,
+.cascader-slide-leave-active {
+  transition: margin theme.$transition-duration-3 theme.$transition-timing-function-standard;
+}
+
+.cascader-slide-enter-from,
+.cascader-slide-leave-to {
+  margin-left: -120px;
+}
+
+.cascader-slide-enter-to,
+.cascader-slide-leave-from {
+  margin-left: 0;
+}

package/es/cascader/style/token.scss

@@ -0,0 +1,51 @@
+@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 *;
+
+$cascader-size-item-height: global.$size-9;
+
+$cascader-font-item-size: global.$font-size-body-3;
+
+$cascader-margin-item-icon-left: global.$spacing-6;
+
+$cascader-color-item-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$cascader-color-item-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$cascader-padding-item-left: global.$spacing-6;
+
+$cascader-padding-item-right: global.$spacing-5;
+
+$cascader-size-item-icon: global.$size-3;
+
+$cascader-color-item-text_hover: $cascader-color-item-text;
+
+$cascader-color-item-text_active: $cascader-color-item-text;
+
+$cascader-color-item-text_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$cascader-color-item-text_disabled_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$cascader-font-item-weight_active: global.$font-weight-500;
+
+$cascader-color-item-bg_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$cascader-color-item-bg_hover: $cascader-color-item-bg_active;
+
+$cascader-color-item-bg_disabled: global.$color-transparent;
+
+$cascader-color-item-bg_disabled_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+
+$cascader-color-checkbox-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$cascader-margin-checkbox-right: global.$spacing-4;

package/es/checkbox/style/index.css

@@ -19,6 +19,7 @@
   width: 24px;
   height: 24px;
 }
+
 .sd-checkbox {
   position: relative;
   display: inline-flex;
@@ -29,7 +30,7 @@
   line-height: unset;
   cursor: pointer;
 }
-.sd-checkbox > input[type='checkbox'] {
+.sd-checkbox > input[type=checkbox] {
   position: absolute;
   top: 0;
   left: 0;
@@ -37,11 +38,11 @@
   height: 0;
   opacity: 0;
 }
-.sd-checkbox > input[type='checkbox']:focus-visible + .sd-checkbox-icon-hover::before {
-  background-color: var(--color-fill-2);
+.sd-checkbox > input[type=checkbox]:focus-visible + .sd-checkbox-icon-hover::before {
+  background-color: var(--color-neutral-2);
 }
 .sd-checkbox:hover .sd-checkbox-icon-hover::before {
-  background-color: var(--color-fill-2);
+  background-color: var(--color-neutral-2);
 }
 .sd-checkbox-label {
   margin-left: 8px;
@@ -67,7 +68,7 @@
   background: var(--color-white);
   border-radius: 0.5px;
   transform: translateX(-50%) translateY(-50%) scale(0);
-  content: '';
+  content: "";
 }
 .sd-checkbox-icon-check {
   position: relative;
@@ -83,8 +84,7 @@
   border-color: var(--color-fill-4);
   transition: border-color 0.1s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
-.sd-checkbox-checked:hover .sd-checkbox-icon,
-.sd-checkbox-indeterminate:hover .sd-checkbox-icon {
+.sd-checkbox-checked:hover .sd-checkbox-icon, .sd-checkbox-indeterminate:hover .sd-checkbox-icon {
   transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
 .sd-checkbox-checked .sd-checkbox-icon {
@@ -115,22 +115,18 @@
 .sd-checkbox.sd-checkbox-disabled:hover .sd-checkbox-mask {
   border-color: var(--color-fill-3);
 }
-.sd-checkbox-checked:hover .sd-checkbox-icon,
-.sd-checkbox-indeterminate:hover .sd-checkbox-icon {
+.sd-checkbox-checked:hover .sd-checkbox-icon, .sd-checkbox-indeterminate:hover .sd-checkbox-icon {
   border-color: transparent;
 }
 .sd-checkbox-disabled .sd-checkbox-icon {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-3);
 }
-.sd-checkbox-disabled.sd-checkbox-checked .sd-checkbox-icon,
-.sd-checkbox-disabled.sd-checkbox-checked:hover .sd-checkbox-icon {
+.sd-checkbox-disabled.sd-checkbox-checked .sd-checkbox-icon, .sd-checkbox-disabled.sd-checkbox-checked:hover .sd-checkbox-icon {
   background-color: var(--color-primary-light-3);
   border-color: transparent;
 }
-.sd-checkbox-disabled:hover .sd-checkbox-icon-hover::before,
-.sd-checkbox-checked:hover .sd-checkbox-icon-hover::before,
-.sd-checkbox-indeterminate:hover .sd-checkbox-icon-hover::before {
+.sd-checkbox-disabled:hover .sd-checkbox-icon-hover::before, .sd-checkbox-checked:hover .sd-checkbox-icon-hover::before, .sd-checkbox-indeterminate:hover .sd-checkbox-icon-hover::before {
   background-color: transparent;
 }
 .sd-checkbox-disabled:hover .sd-checkbox-icon {
@@ -142,14 +138,16 @@
 .sd-checkbox-disabled .sd-checkbox-icon-check {
   color: var(--color-fill-3);
 }
+
 .sd-checkbox-group {
   display: inline-block;
 }
 .sd-checkbox-group .sd-checkbox {
   margin-right: 16px;
 }
+
 .sd-checkbox-group-direction-vertical .sd-checkbox {
   display: flex;
   margin-right: 0;
   line-height: 32px;
-}
+}

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

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

package/es/checkbox/style/index.js

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