@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/cjs/datePicker/constants.js

@@ -4,41 +4,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.numbers = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 var _constants2 = require("../popover/constants");
-
 const dayItemClasses = {
-  DAY_TODAY: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-today"),
-  DAY_IN_RANGE: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-inrange"),
-  DAY_HOVER: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-inhover"),
-  DAY_SELECTED: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-selected"),
-  DAY_SELECTED_START: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-selected-start"),
-  DAY_SELECTED_END: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-selected-end"),
-  DAY_DISABLED: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-disabled"),
-  DAY_HOVER_DAY: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-hoverday"),
-  DAY_HOVER_DAY_OFFSET: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-hoverday-offset"),
-  DAY_IN_OFFSET_RANGE: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-inoffsetrange"),
-  DAY_SELECTED_RANGE_HOVER: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-selectedrange-hover"),
-  DAY_OFFSET_RANGE_START: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-offsetrange-start"),
-  DAY_OFFSET_RANGE_END: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-offsetrange-end"),
-  DAY_SELECTED_START_AFTER_HOVER: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-selected-start-afterhover"),
-  DAY_SELECTED_END_BEFORE_HOVER: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-selected-end-beforehover"),
-  DAY_HOVER_DAY_BEFORE_RANGE: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-hoverday-beforerange"),
-  DAY_HOVER_DAY_AFTER_RANGE: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-hoverday-afterrange"),
-  DAY_HOVER_DAY_IN_RANGE: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-hoverday-inrange"),
-  DAY_HOVER_DAY_AROUND_SINGLE_SELECTED: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day-hoverday-around-singleselected")
+  DAY_TODAY: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-today`,
+  DAY_IN_RANGE: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-inrange`,
+  DAY_HOVER: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-inhover`,
+  DAY_SELECTED: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-selected`,
+  DAY_SELECTED_START: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-selected-start`,
+  DAY_SELECTED_END: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-selected-end`,
+  DAY_DISABLED: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-disabled`,
+  DAY_HOVER_DAY: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-hoverday`,
+  DAY_HOVER_DAY_OFFSET: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-hoverday-offset`,
+  DAY_IN_OFFSET_RANGE: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-inoffsetrange`,
+  DAY_SELECTED_RANGE_HOVER: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-selectedrange-hover`,
+  DAY_OFFSET_RANGE_START: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-offsetrange-start`,
+  DAY_OFFSET_RANGE_END: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-offsetrange-end`,
+  DAY_SELECTED_START_AFTER_HOVER: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-selected-start-afterhover`,
+  DAY_SELECTED_END_BEFORE_HOVER: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-selected-end-beforehover`,
+  DAY_HOVER_DAY_BEFORE_RANGE: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-hoverday-beforerange`,
+  DAY_HOVER_DAY_AFTER_RANGE: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-hoverday-afterrange`,
+  DAY_HOVER_DAY_IN_RANGE: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-hoverday-inrange`,
+  DAY_HOVER_DAY_AROUND_SINGLE_SELECTED: `${_constants.BASE_CLASS_PREFIX}-datepicker-day-hoverday-around-singleselected`
 };
 const cssClasses = Object.assign({
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker"),
-  NAVIGATION: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-navigation"),
-  PANEL_YAM: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-panel-yam"),
-  MONTH: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-month"),
-  WEEKDAY: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-weekday"),
-  WEEKS: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-weeks"),
-  WEEK: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-week"),
-  DAY: "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker-day")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-datepicker`,
+  NAVIGATION: `${_constants.BASE_CLASS_PREFIX}-datepicker-navigation`,
+  PANEL_YAM: `${_constants.BASE_CLASS_PREFIX}-datepicker-panel-yam`,
+  MONTH: `${_constants.BASE_CLASS_PREFIX}-datepicker-month`,
+  WEEKDAY: `${_constants.BASE_CLASS_PREFIX}-datepicker-weekday`,
+  WEEKS: `${_constants.BASE_CLASS_PREFIX}-datepicker-weeks`,
+  WEEK: `${_constants.BASE_CLASS_PREFIX}-datepicker-week`,
+  DAY: `${_constants.BASE_CLASS_PREFIX}-datepicker-day`
 }, dayItemClasses);
 exports.cssClasses = cssClasses;
 const formatToken = {
@@ -51,7 +48,7 @@ const strings = Object.assign({
   DEFAULT_SEPARATOR_MULTIPLE: ',',
   DEFAULT_SEPARATOR_RANGE: ' ~ ',
   SIZE_SET: ['small', 'default', 'large'],
-  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'dateTime', 'dateTimeRange'],
+  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'monthRange', 'dateTime', 'dateTimeRange'],
   PRESET_POSITION_SET: ['left', 'right', 'top', 'bottom'],
   DENSITY_SET: ['default', 'compact'],
   PANEL_TYPE_LEFT: 'left',

package/lib/cjs/datePicker/datePicker.css

@@ -4,7 +4,6 @@
 .semi-datepicker {
   box-sizing: border-box;
   display: inline-block;
-  vertical-align: top;
 }
 .semi-datepicker .semi-scrolllist-body .semi-scrolllist-item {
   -ms-overflow-style: none; /* Internet Explorer 10+ */
@@ -118,6 +117,15 @@
 .semi-datepicker-panel-yam {
   max-width: 484px;
 }
+.semi-datepicker-panel-yam[x-type=monthRange] {
+  max-width: 584px;
+}
+.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body {
+  display: flex;
+}
+.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) {
+  border-left: 1px solid var(--semi-color-border);
+}
 .semi-datepicker-panel-yam .semi-scrolllist {
   box-shadow: none;
   height: 266px;
@@ -132,10 +140,7 @@
   padding: 0;
   overflow: hidden;
 }
-.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel {
-  border: none;
-}
-.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item {
+.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel:not(#neverExistElement) {
   border: none;
 }
 .semi-datepicker-footer {
@@ -456,16 +461,16 @@
 .semi-datepicker-quick-control-top-month-content, .semi-datepicker-quick-control-bottom-month-content {
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: repeat(2, minmax(65.5px, 73px));
+  grid-template-columns: repeat(2, minmax(51px, 58.5px));
   grid-gap: 8px;
   align-content: flex-start;
   padding: 8px 20px;
 }
 .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-quick-control-bottom-month-content-item {
-  max-width: 73px;
+  max-width: 58.5px;
 }
 .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
-  max-width: 57px;
+  max-width: 42.5px;
   color: var(--semi-color-primary);
 }
 .semi-datepicker-quick-control-month {
@@ -555,7 +560,10 @@
   width: 568px;
 }
 .semi-datepicker-inset-input-wrapper[x-type=month] {
-  width: 204px;
+  width: 165px;
+}
+.semi-datepicker-inset-input-wrapper[x-type=monthRange] {
+  width: 331px;
 }
 .semi-datepicker-inset-input-wrapper .semi-input-wrapper {
   flex: 1;
@@ -577,6 +585,19 @@
   height: 32px;
   color: var(--semi-color-text-2);
   background-color: var(--semi-color-fill-0);
+  border: 0px solid transparent;
+}
+.semi-datepicker-range-input:hover {
+  border-color: transparent;
+}
+.semi-datepicker-range-input:active {
+  border-color: transparent;
+}
+.semi-datepicker-range-input:focus-within {
+  border-color: transparent;
+}
+.semi-datepicker-range-input .semi-datepicker-monthRange-input {
+  background-color: transparent;
 }
 .semi-datepicker-range-input-wrapper {
   box-sizing: border-box;
@@ -646,12 +667,14 @@
 }
 .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn {
   display: flex;
-  color: var(--semi-color-primary-hover);
   cursor: pointer;
 }
 .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix {
   display: none;
 }
+.semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn:hover {
+  color: var(--semi-color-primary-hover);
+}
 .semi-datepicker-range-input-disabled {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
@@ -698,6 +721,7 @@
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   white-space: nowrap;
   color: var(--semi-color-text-2);
 }
@@ -747,6 +771,12 @@
   height: 48px;
   padding: 12px;
 }
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body {
+  display: flex;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) {
+  border: 1px solid var(--semi-color-border);
+}
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist {
   font-size: 12px;
   line-height: 16px;
@@ -948,16 +978,16 @@
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content {
   display: grid;
-  grid-template-columns: repeat(2, minmax(75.5px, 83px));
+  grid-template-columns: repeat(2, minmax(61px, 68.5px));
   grid-gap: 8px;
   align-content: flex-start;
   padding: 8px 10px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item {
-  max-width: 83px;
+  max-width: 68.5px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
-  max-width: 67px;
+  max-width: 52.5px;
   font-size: 12px;
   color: var(--semi-color-primary);
 }
@@ -1060,6 +1090,51 @@
   min-height: 168px;
 }
 
+.semi-datepicker-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-input-suffix, .semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-datepicker-range-input-suffix {
+  opacity: 0;
+}
+.semi-datepicker-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active {
+  border-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:hover {
+  background-color: var(--semi-color-danger-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
+  background-color: var(--semi-color-danger-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:not(:focus-within) {
+  border-width: 1px;
+  border-color: var(--semi-color-danger);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
+  border-width: 1px;
+  border-color: var(--semi-color-danger);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active {
+  border-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:hover {
+  background-color: var(--semi-color-warning-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
+  background-color: var(--semi-color-warning-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:not(:focus-within) {
+  border-width: 1px;
+  border-color: var(--semi-color-warning);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
+  border-width: 1px;
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl,
 .semi-portal-rtl {
   /*