@sdata/web-vue 1.6.0 → 1.7.0

package/es/date-picker/style/date.scss

@@ -0,0 +1,133 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/date-picker/style/token.scss' as *;
+$picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
+
+@use '@components/time-picker/style/token.scss' as *;
+
+$date-panel-prefix-cls: string.unquote('#{theme.$prefix}-panel-date');
+$time-picker-prefix-cls: string.unquote('#{theme.$prefix}-timepicker');
+
+$datepicker-timepicker-height: 276px;
+
+.#{$date-panel-prefix-cls} {
+  display: flex;
+  box-sizing: border-box;
+
+  &-inner {
+    width: $picker-panel-date-width;
+  }
+
+  &-inner .#{theme.$prefix}-picker-body {
+    padding-top: 0;
+  }
+
+  &-timepicker {
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid $picker-panel-color-border;
+
+    &-title {
+      width: 100%;
+      height: 40px;
+      color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 40px;
+      text-align: center;
+      border-bottom: 1px solid $picker-panel-color-border;
+    }
+
+    .#{$time-picker-prefix-cls} {
+      height: $datepicker-timepicker-height;
+      padding: 0 6px;
+      overflow: hidden;
+
+      &-column {
+        box-sizing: border-box;
+        width: auto;
+        height: 100%;
+        padding: 0 4px;
+
+        &::-webkit-scrollbar {
+          width: 0;
+        }
+      }
+
+      &-column:not(:last-child) {
+        border-right: 0;
+      }
+
+      ul::after {
+        height: $datepicker-timepicker-height - $timepicker-cell-height - $timepicker-cell-spacing *
+          2;
+      }
+
+      &-cell {
+        width: 36px;
+
+        &-inner {
+          padding-left: 10px;
+        }
+      }
+    }
+  }
+
+  &-footer {
+    border-right: 1px solid $picker-panel-color-border;
+  }
+
+  &-with-view-tabs {
+    flex-direction: column;
+    min-width: 265px;
+
+    .#{$date-panel-prefix-cls}-timepicker {
+      .#{$time-picker-prefix-cls} {
+        &-column {
+          flex: 1;
+
+          &::-webkit-scrollbar {
+            width: 0;
+          }
+        }
+
+        &-cell {
+          width: 100%;
+          text-align: center;
+
+          &-inner {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+  }
+
+  &-view-tabs {
+    display: flex;
+    border-top: 1px solid $picker-panel-color-border;
+  }
+
+  &-view-tab-pane {
+    flex: 1;
+    height: $datepicker-view-tabs-height;
+    color: $datepicker-view-tab-pane-color-text_unactive;
+    font-size: $datepicker-view-tab-pane-font-size;
+    line-height: $datepicker-view-tabs-height;
+    text-align: center;
+    border-right: 1px solid $picker-panel-color-border;
+    cursor: pointer;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &-text {
+      margin-left: $datepicker-view-tab-pane-spacing-text-icon;
+    }
+
+    &-active {
+      color: $datepicker-view-tab-pane-color-text_active;
+    }
+  }
+}

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

@@ -1,3 +1,21 @@
+@charset "UTF-8";
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 /******** 基础配置项 end *******/
 /******** 基础配置项 end *******/
 /******** 高级配置项 *******/
@@ -103,8 +121,7 @@
 .sd-picker-focused {
   box-shadow: 0 0 0 0 var(--color-primary-light-2);
 }
-.sd-picker-focused,
-.sd-picker-focused:hover {
+.sd-picker-focused, .sd-picker-focused:hover {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--primary-6));
 }
@@ -112,24 +129,20 @@
   border-color: rgb(var(--danger-6));
   box-shadow: 0 0 0 0 var(--color-danger-light-2);
 }
-.sd-picker-focused .sd-picker-input-active input,
-.sd-picker-focused:hover .sd-picker-input-active input {
+.sd-picker-focused .sd-picker-input-active input, .sd-picker-focused:hover .sd-picker-input-active input {
   background: var(--color-fill-2);
 }
-.sd-picker-disabled,
-.sd-picker-disabled:hover {
+.sd-picker-disabled, .sd-picker-disabled:hover {
   color: var(--color-text-4);
   background-color: var(--color-fill-2);
   border-color: transparent;
   cursor: not-allowed;
 }
-.sd-picker-disabled input[disabled],
-.sd-picker-disabled:hover input[disabled] {
+.sd-picker-disabled input[disabled], .sd-picker-disabled:hover input[disabled] {
   color: var(--color-text-4);
   cursor: not-allowed;
 }
-.sd-picker-disabled input[disabled]::placeholder,
-.sd-picker-disabled:hover input[disabled]::placeholder {
+.sd-picker-disabled input[disabled]::placeholder, .sd-picker-disabled:hover input[disabled]::placeholder {
   color: var(--color-text-4);
 }
 .sd-picker-separator {
@@ -167,23 +180,7 @@
 .sd-picker-size-large input {
   font-size: 14px;
 }
-/******** borderSize *******/
-/******** borderStyle *******/
-/******** radius *******/
-/******** shadow distance *******/
-/******** size *******/
-/******** spacing *******/
-/******** shadow *******/
-/******** opacity *******/
-/******** fontSize *******/
-/******** fontWeight ********/
-/******** Primary *******/
-/******** success *******/
-/******** warning *******/
-/******** danger *******/
-/******** link *******/
-/******** radius *******/
-/********* icon hover *********/
+
 .sd-picker-container,
 .sd-picker-range-container {
   box-sizing: border-box;
@@ -194,16 +191,14 @@
   border-radius: var(--border-radius-medium);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
-.sd-picker-container-shortcuts-placement-left,
+.sd-picker-container-shortcuts-placement-left, .sd-picker-container-shortcuts-placement-right,
 .sd-picker-range-container-shortcuts-placement-left,
-.sd-picker-container-shortcuts-placement-right,
 .sd-picker-range-container-shortcuts-placement-right {
   display: flex;
   align-items: flex-start;
 }
-.sd-picker-container-shortcuts-placement-left > .sd-picker-shortcuts,
+.sd-picker-container-shortcuts-placement-left > .sd-picker-shortcuts, .sd-picker-container-shortcuts-placement-right > .sd-picker-shortcuts,
 .sd-picker-range-container-shortcuts-placement-left > .sd-picker-shortcuts,
-.sd-picker-container-shortcuts-placement-right > .sd-picker-shortcuts,
 .sd-picker-range-container-shortcuts-placement-right > .sd-picker-shortcuts {
   display: flex;
   flex-direction: column;
@@ -211,35 +206,38 @@
   padding: 5px 8px;
   overflow: hidden auto;
 }
-.sd-picker-container-shortcuts-placement-left > .sd-picker-shortcuts > *,
+.sd-picker-container-shortcuts-placement-left > .sd-picker-shortcuts > *, .sd-picker-container-shortcuts-placement-right > .sd-picker-shortcuts > *,
 .sd-picker-range-container-shortcuts-placement-left > .sd-picker-shortcuts > *,
-.sd-picker-container-shortcuts-placement-right > .sd-picker-shortcuts > *,
 .sd-picker-range-container-shortcuts-placement-right > .sd-picker-shortcuts > * {
   margin: 5px 0;
 }
 .sd-picker-container-shortcuts-placement-left .sd-picker-panel-wrapper,
-.sd-picker-range-container-shortcuts-placement-left .sd-picker-panel-wrapper,
 .sd-picker-container-shortcuts-placement-left .sd-picker-range-panel-wrapper,
+.sd-picker-range-container-shortcuts-placement-left .sd-picker-panel-wrapper,
 .sd-picker-range-container-shortcuts-placement-left .sd-picker-range-panel-wrapper {
   border-left: 1px solid var(--color-neutral-3);
 }
 .sd-picker-container-shortcuts-placement-right .sd-picker-panel-wrapper,
-.sd-picker-range-container-shortcuts-placement-right .sd-picker-panel-wrapper,
 .sd-picker-container-shortcuts-placement-right .sd-picker-range-panel-wrapper,
+.sd-picker-range-container-shortcuts-placement-right .sd-picker-panel-wrapper,
 .sd-picker-range-container-shortcuts-placement-right .sd-picker-range-panel-wrapper {
   border-right: 1px solid var(--color-neutral-3);
 }
+
 .sd-picker-container-panel-only,
 .sd-picker-range-container-panel-only {
   box-shadow: none;
 }
+
 .sd-picker-container-panel-only .sd-panel-date-inner,
 .sd-picker-range-container-panel-only .sd-panel-date-inner {
   width: 100%;
 }
+
 .sd-picker-range-container-panel-only .sd-panel-date {
   width: 100%;
 }
+
 .sd-picker-header {
   display: flex;
   padding: 8px 16px;
@@ -334,7 +332,7 @@
   background-color: rgb(var(--primary-6));
   transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
 }
-.sd-picker-cell-in-view:not( .sd-picker-cell-selected, .sd-picker-cell-range-start, .sd-picker-cell-range-end, .sd-picker-cell-disabled, .sd-picker-cell-week) .sd-picker-date-value:hover {
+.sd-picker-cell-in-view:not(.sd-picker-cell-selected, .sd-picker-cell-range-start, .sd-picker-cell-range-end, .sd-picker-cell-disabled, .sd-picker-cell-week) .sd-picker-date-value:hover {
   color: var(--color-text-1);
   background-color: var(--color-fill-3);
 }
@@ -351,7 +349,7 @@
   margin-left: -2px;
   background-color: rgb(var(--primary-6));
   border-radius: 50%;
-  content: '';
+  content: "";
 }
 .sd-picker-cell-in-range .sd-picker-date {
   background-color: var(--color-primary-light-1);
@@ -367,8 +365,7 @@
 .sd-picker-cell-in-range-near-hover .sd-picker-date {
   border-radius: 0;
 }
-.sd-picker-cell-range-start .sd-picker-date-value,
-.sd-picker-cell-range-end .sd-picker-date-value {
+.sd-picker-cell-range-start .sd-picker-date-value, .sd-picker-cell-range-end .sd-picker-date-value {
   color: var(--color-white);
   background-color: rgb(var(--primary-6));
   border-radius: var(--border-radius-circle);
@@ -382,8 +379,7 @@
 .sd-picker-cell-hover-range-end .sd-picker-date {
   border-radius: 0 24px 24px 0;
 }
-.sd-picker-cell-hover-range-start .sd-picker-date-value,
-.sd-picker-cell-hover-range-end .sd-picker-date-value {
+.sd-picker-cell-hover-range-start .sd-picker-date-value, .sd-picker-cell-hover-range-end .sd-picker-date-value {
   color: var(--color-text-1);
   background-color: var(--color-primary-light-2);
   border-radius: 50%;
@@ -435,21 +431,43 @@
 .sd-picker-shortcuts > * {
   margin: 5px 10px 5px 0;
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 .sd-panel-date {
   display: flex;
   box-sizing: border-box;
 }
+
 .sd-panel-date-inner {
   width: 265px;
 }
+
 .sd-panel-date-inner .sd-picker-body {
   padding-top: 0;
 }
+
 .sd-panel-date-timepicker {
   display: flex;
   flex-direction: column;
   border-left: 1px solid var(--color-neutral-3);
 }
+
 .sd-panel-date-timepicker-title {
   width: 100%;
   height: 40px;
@@ -460,56 +478,71 @@
   text-align: center;
   border-bottom: 1px solid var(--color-neutral-3);
 }
+
 .sd-panel-date-timepicker .sd-timepicker {
   height: 276px;
   padding: 0 6px;
   overflow: hidden;
 }
+
 .sd-panel-date-timepicker .sd-timepicker-column {
   box-sizing: border-box;
   width: auto;
   height: 100%;
   padding: 0 4px;
 }
+
 .sd-panel-date-timepicker .sd-timepicker-column::-webkit-scrollbar {
   width: 0;
 }
+
 .sd-panel-date-timepicker .sd-timepicker-column:not(:last-child) {
   border-right: 0;
 }
+
 .sd-panel-date-timepicker .sd-timepicker ul::after {
   height: 244px;
 }
+
 .sd-panel-date-timepicker .sd-timepicker-cell {
   width: 36px;
 }
+
 .sd-panel-date-timepicker .sd-timepicker-cell-inner {
   padding-left: 10px;
 }
+
 .sd-panel-date-footer {
   border-right: 1px solid var(--color-neutral-3);
 }
+
 .sd-panel-date-with-view-tabs {
   flex-direction: column;
   min-width: 265px;
 }
+
 .sd-panel-date-with-view-tabs .sd-panel-date-timepicker .sd-timepicker-column {
   flex: 1;
 }
+
 .sd-panel-date-with-view-tabs .sd-panel-date-timepicker .sd-timepicker-column::-webkit-scrollbar {
   width: 0;
 }
+
 .sd-panel-date-with-view-tabs .sd-panel-date-timepicker .sd-timepicker-cell {
   width: 100%;
   text-align: center;
 }
+
 .sd-panel-date-with-view-tabs .sd-panel-date-timepicker .sd-timepicker-cell-inner {
   padding-left: 0;
 }
+
 .sd-panel-date-view-tabs {
   display: flex;
   border-top: 1px solid var(--color-neutral-3);
 }
+
 .sd-panel-date-view-tab-pane {
   flex: 1;
   height: 50px;
@@ -520,91 +553,216 @@
   border-right: 1px solid var(--color-neutral-3);
   cursor: pointer;
 }
+
 .sd-panel-date-view-tab-pane:last-child {
   border-right: none;
 }
+
 .sd-panel-date-view-tab-pane-text {
   margin-left: 8px;
 }
+
 .sd-panel-date-view-tab-pane-active {
   color: var(--color-text-1);
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 .sd-panel-month,
 .sd-panel-quarter,
 .sd-panel-year {
   box-sizing: border-box;
   width: 265px;
 }
+
 .sd-panel-month .sd-picker-date,
 .sd-panel-quarter .sd-picker-date,
 .sd-panel-year .sd-picker-date {
   padding: 4px;
 }
+
 .sd-panel-month .sd-picker-date-value,
 .sd-panel-quarter .sd-picker-date-value,
 .sd-panel-year .sd-picker-date-value {
   width: 100%;
   border-radius: 24px;
 }
-.sd-panel-month .sd-picker-cell:not(.sd-picker-cell-selected):not( .sd-picker-cell-range-start):not(.sd-picker-cell-range-end):not(.sd-picker-cell-disabled):not( .sd-picker-cell-week) .sd-picker-date-value:hover,
-.sd-panel-quarter .sd-picker-cell:not(.sd-picker-cell-selected):not( .sd-picker-cell-range-start):not(.sd-picker-cell-range-end):not(.sd-picker-cell-disabled):not( .sd-picker-cell-week) .sd-picker-date-value:hover,
-.sd-panel-year .sd-picker-cell:not(.sd-picker-cell-selected):not( .sd-picker-cell-range-start):not(.sd-picker-cell-range-end):not(.sd-picker-cell-disabled):not( .sd-picker-cell-week) .sd-picker-date-value:hover {
+
+.sd-panel-month .sd-picker-cell:not(.sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end):not(.sd-picker-cell-disabled):not(.sd-picker-cell-week) .sd-picker-date-value:hover,
+.sd-panel-quarter .sd-picker-cell:not(.sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end):not(.sd-picker-cell-disabled):not(.sd-picker-cell-week) .sd-picker-date-value:hover,
+.sd-panel-year .sd-picker-cell:not(.sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end):not(.sd-picker-cell-disabled):not(.sd-picker-cell-week) .sd-picker-date-value:hover {
   border-radius: 24px;
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 .sd-panel-year {
   box-sizing: border-box;
   width: 265px;
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 .sd-panel-week {
   box-sizing: border-box;
 }
+
 .sd-panel-week-wrapper {
   display: flex;
 }
+
 .sd-panel-week-inner {
   width: 298px;
 }
+
 .sd-panel-week-inner .sd-picker-body {
   padding-top: 0;
 }
+
 .sd-panel-week .sd-picker-row-week {
   cursor: pointer;
 }
+
 .sd-panel-week .sd-picker-row-week .sd-picker-date-value {
   width: 100%;
   border-radius: 0;
 }
+
 .sd-panel-week .sd-picker-cell .sd-picker-date {
   border-radius: 0;
 }
+
 .sd-panel-week .sd-picker-cell:nth-child(2) .sd-picker-date {
   padding-left: 4px;
   border-top-left-radius: 24px;
   border-bottom-left-radius: 24px;
 }
+
 .sd-panel-week .sd-picker-cell:nth-child(2) .sd-picker-date .sd-picker-date-value {
   border-top-left-radius: 24px;
   border-bottom-left-radius: 24px;
 }
+
 .sd-panel-week .sd-picker-cell:nth-child(8) .sd-picker-date {
   padding-right: 4px;
   border-top-right-radius: 24px;
   border-bottom-right-radius: 24px;
 }
+
 .sd-panel-week .sd-picker-cell:nth-child(8) .sd-picker-date .sd-picker-date-value {
   border-top-right-radius: 24px;
   border-bottom-right-radius: 24px;
 }
-.sd-panel-week .sd-picker-row-week:hover .sd-picker-cell:not(.sd-picker-cell-week):not( .sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end) .sd-picker-date-value {
+
+.sd-panel-week .sd-picker-row-week:hover .sd-picker-cell:not(.sd-picker-cell-week):not(.sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end) .sd-picker-date-value {
   background-color: var(--color-fill-3);
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 .sd-panel-quarter {
   box-sizing: border-box;
   width: 265px;
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 .sd-picker-range-wrapper {
   display: flex;
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 .sd-datepicker-shortcuts-wrapper {
   box-sizing: border-box;
   width: 106px;
@@ -615,12 +773,14 @@
   overflow-y: auto;
   list-style: none;
 }
+
 .sd-datepicker-shortcuts-wrapper > li {
   box-sizing: border-box;
   width: 100%;
   padding: 6px 16px;
   cursor: pointer;
 }
+
 .sd-datepicker-shortcuts-wrapper > li:hover {
   color: rgb(var(--primary-6));
-}
+}

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

@@ -1,7 +1,7 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../time-picker/style';
 import '../../trigger/style';
 import '../../button/style';
 import '../../link/style';
-import '../../_components/picker/style/index.less';
-import './index.less';
+import '../../_components/picker/style/index.scss';
+import './index.scss';

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

@@ -1,5 +1,5 @@
 import "../../time-picker/style/index.js";
 import "../../link/style/index.js";
-import "../../style/index.less";
-import "../../_components/picker/style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "../../_components/picker/style/index.scss";
+import "./index.scss";