@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/checkbox/constants.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.numbers = exports.checkboxGroupClasses = exports.checkboxClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const checkboxClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox"),
+  INNER: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-inner"),
+  TEXT: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-text"),
+  INPUT: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-input"),
+  CHECKED: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-checked"),
+  DISABLED: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-disabled"),
+  BUTTON: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-button"),
+  WRAPPER: ''
+};
+exports.checkboxClasses = checkboxClasses;
+const checkboxGroupClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup"),
+  INNER: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup-inner"),
+  TEXT: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup-text"),
+  INPUT: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup-input"),
+  CHECKED: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup-checked"),
+  DISABLED: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup-disabled")
+};
+exports.checkboxGroupClasses = checkboxGroupClasses;
+const strings = {
+  DIRECTION_SET: ['horizontal', 'vertical'],
+  TYPE_DEFAULT: 'default',
+  TYPE_CARD: 'card',
+  TYPE_PURECARD: 'pureCard',
+  DEFAULT_DIRECTION: 'vertical'
+};
+exports.strings = strings;
+const numbers = {};
+exports.numbers = numbers;

package/lib/cjs/checkbox/mixin.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/checkbox/rtl.scss

@@ -0,0 +1,54 @@
+$module: #{$prefix}-checkbox;
+$inner-width: $width-icon-medium;
+
+.#{$prefix}-rtl, 
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        input[type="checkbox"] {
+            left: auto;
+            right: 0;
+        }
+
+        &-addon {
+            padding-left: 0;
+            padding-right: $spacing-checkbox_label-paddingLeft;
+        }
+
+        &-extra {
+            padding-left: 0;
+            padding-right: $spacing-checkbox_extra-paddingLeft;
+        }
+
+        &-cardType {
+            .#{$module}-inner {
+                margin-right: 0;
+                margin-left: $spacing-checkbox_cardType_inner-marginRight;
+            }
+    
+            .#{$module}-addon {
+                margin-right: 0;
+                padding-right: 0;
+            }
+
+            .#{$module}-extra {
+                padding-right: 0;
+            }
+        }
+    }
+
+    .#{$module}Group {
+        direction: rtl;
+
+        &-horizontal {
+            .#{$module} {
+                margin-right: 0;
+                margin-left: $spacing-checkbox_group_horizontal-marginRight;
+                &:last-of-type {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+}

package/lib/cjs/checkbox/variables.scss

@@ -0,0 +1,67 @@
+$spacing-checkbox_label-paddingLeft: $spacing-tight; // 文字与选框间距
+$color-checkbox_label-text-default: var(--semi-color-text-0); // 文字颜色
+$color-checkbox_default-bg-hover: var(--semi-color-fill-0); // 选框背景颜色 - 悬浮
+$color-checkbox_default-bg-default: transparent; // 选框背景颜色 - 默认
+
+$color-checkbox_default-border-hover: var(--semi-color-focus-border); // 选框描边颜色 - 悬浮
+$color-checkbox_default-border-default: var(--semi-color-text-3); // 选框描边颜色 - 默认
+$color-checkbox_default-bg-active: var(--semi-color-fill-1); // 选框未选中态背景颜色 - 按下
+$font-checkbox_label-lineHeight: 20px; // 文字行高
+$color-checkbox_label-text-disabled: var(--semi-color-disabled-text); // 禁用文字颜色
+
+$color-checkbox_checked-bg-default: var(--semi-color-primary); // 选框选中态背景颜色 - 默认
+$color-checkbox_checked-bg-hover: var(--semi-color-primary-hover); // 选框选中态背景颜色 - 悬浮
+$color-checkbox_checked-bg-active: var(--semi-color-primary-active); // 选框选中态背景颜色 - 按下
+$color-checkbox_checked-icon-default: var(--semi-color-white); // 选框选中态对勾颜色 - 默认
+$color-checkbox_checked-icon-hover: var(--semi-color-white); // 选框选中态对勾颜色 - 悬浮
+$color-checkbox_checked-icon-active: var(--semi-color-white); // 选框选中态对勾颜色 - 按下
+$color-checkbox_checked-border-default: var(--semi-color-primary); // 选框选中态描边颜色 - 默认
+$color-checkbox_checked-border-hover: var(--semi-color-primary-hover); // 选框选中态描边颜色 - 悬浮
+$color-checkbox_checked-border-active: var(--semi-color-primary-active); // 选框选中态描边颜色 - 按下
+$color-checkbox_cardType_checked-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中时的背景颜色 - 默认
+$color-checkbox_cardType_checked_disabled-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中且禁用时的背景颜色 - 默认
+$color-checkbox_cardType-bg-hover: var(--semi-color-fill-0); // 卡片类型复选框选中时的背景颜色 - 悬浮
+$color-checkbox_cardType-bg-active: var(--semi-color-fill-1); // 卡片类型复选框选中时的背景颜色 - 按下
+$color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
+$color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
+$color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
+$color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
+$color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
+$color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
+$color-checkbox_cardType_inner-bg-active: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 按下
+$color-checkbox_cardType_inner-bg-default: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 -默认
+
+$color-checkbox_disabled-bg-default: var(--semi-color-disabled-fill); // 选框禁用态背景颜色 - 默认
+$color-checkbox_disabled-border-default: var(--semi-color-border); // 选框禁用态描边颜色 - 默认
+$color-checkbox_checked-bg-disabled: var(--semi-color-primary-disabled); // 选框选中 + 禁用态背景颜色
+$color-checkbox_checked-icon-disabled: var(--semi-color-white); // 选框禁用态对勾颜色
+
+$size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
+$width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
+$height-checkbox_inner: 20px; // 选框对勾 icon 高度
+$width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
+$width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
+
+$radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
+$radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角
+$spacing-checkbox_extra-paddingLeft: $width-icon-medium + $spacing-tight; // extra 副标题左侧内边距
+$spacing-checkbox_extra-marginTop: $spacing-extra-tight; // extra 副标题顶部内边距
+$spacing-checkbox_cardType-paddingX: $spacing-base; // 卡片类型复选框的水平内间距
+$spacing-checkbox_cardType-paddingY: $spacing-base-tight; // 卡片类型复选框的垂直内间距
+$spacing-checkbox_cardType_inner-marginRight: $spacing-tight; // 卡片类型复选框 inner 的右外边距
+$spacing-checkbox_card_group_vertical-marginBottom: $spacing-base; // 卡片类型复选框的垂直向下外边距
+
+$color-checkbox_extra-text-default: var(--semi-color-text-2); // extra 副标题文字颜色
+
+$spacing-checkbox_group_vertical-marginBottom: $spacing-base; 
+$spacing-checkbox_group_vertical_item-marginBottom: $spacing-base-tight; // 垂直复选框组底部外边距
+
+$spacing-checkbox_group_horizontal-marginRight: $spacing-base; // 水平复选框组右侧外边距
+
+$font-checkbox_cardType_addon-size: $font-size-regular; // 卡片类型复选框的 addon 的文字大小
+$font-checkbox_cardType_addon-fontWeight: $font-weight-bold; // 卡片类型复选框的 addon 的 fontWeight
+$font-checkbox_cardType_addon-lineHeight: 20px; // 卡片类型复选框的 addon 的文字行高
+$font-checkbox_cardType_extra-size: $font-size-regular; // 卡片类型复选框的 extra 的文字大小
+$font-checkbox_cardType_extra-fontWeight: normal; // 卡片类型复选框的 extra 的 fontWeight
+$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的 extra 的文字行高

package/lib/cjs/collapse/collapse.css

@@ -0,0 +1,78 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-collapse-item {
+  border-bottom: 1px solid var(--semi-color-border);
+}
+.semi-collapse-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 4px 8px;
+  padding: 8px;
+  border-radius: var(--semi-border-radius-small);
+  outline: none;
+  cursor: pointer;
+  color: var(--semi-color-text-0);
+  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;
+}
+.semi-collapse-header-right {
+  display: flex;
+  align-items: center;
+}
+.semi-collapse-header-right span {
+  display: flex;
+  padding-right: 8px;
+}
+.semi-collapse-header-right span:last-child {
+  padding-right: 0;
+}
+.semi-collapse-header-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--semi-color-text-2);
+}
+.semi-collapse-header-iconLeft {
+  justify-content: flex-start;
+}
+.semi-collapse-header-iconLeft .semi-collapse-header-icon {
+  margin-right: 8px;
+}
+.semi-collapse-header-iconDisabled {
+  color: var(--semi-color-disabled-text);
+}
+.semi-collapse-header:hover {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-collapse-header:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-collapse-content {
+  padding: 4px 16px 8px 16px;
+  color: var(--semi-color-text-1);
+  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;
+}
+.semi-collapse-content p {
+  margin: 0;
+}
+
+.semi-rtl .semi-collapse,
+.semi-portal-rtl .semi-collapse {
+  direction: rtl;
+}
+.semi-rtl .semi-collapse-header-right span,
+.semi-portal-rtl .semi-collapse-header-right span {
+  display: flex;
+  padding-right: 0;
+  padding-left: 8px;
+}
+.semi-rtl .semi-collapse-header-right span:last-child,
+.semi-portal-rtl .semi-collapse-header-right span:last-child {
+  padding-right: 0;
+  padding-left: 0;
+}

package/lib/cjs/collapse/collapse.scss

@@ -0,0 +1,77 @@
+@import './variables.scss';
+
+$module: #{$prefix}-collapse;
+
+
+
+.#{$module} {
+    &-item {
+        border-bottom: $width-collapse_item-border solid $color-collapse_item-border-default;
+    }
+
+    &-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: $spacing-collapse_header-marginY $spacing-collapse_header-marginX;
+        padding: $spacing-collapse_header-padding;
+        border-radius: $radius-collapse_header;
+        outline: none;
+        cursor: pointer;
+        color: $color-collapse_header-text-default;
+        font-weight: $font-collapse_header-fontWeight;
+        @include font-size-regular;
+
+        &-right {
+            display: flex;
+            align-items: center;
+
+            span {
+                display: flex;
+                padding-right: $spacing-collapse_right-paddingRight;
+
+                &:last-child {
+                    padding-right: 0;
+                }
+            }
+        }
+
+        &-icon {
+            width: $size-collapse_icon-default;
+            height: $size-collapse_icon-default;
+            color: $color-collapse_header-icon-default;
+        }
+
+        &-iconLeft {
+            justify-content: flex-start;
+            .#{$module}-header-icon {
+                margin-right: $spacing-collapse_header_iconLeft-marginRight;
+            }
+        }
+
+        &-iconDisabled {
+            color: var(--semi-color-disabled-text);
+        }
+
+        &:hover {
+            background-color: $color-collapse_header-bg-hover;
+        }
+
+        &:active {
+            background-color: $color-collapse_header-bg-active;
+        }
+
+    }
+
+    &-content {
+        padding: $spacing-collapse_content-paddingTop $spacing-collapse_content-paddingRight $spacing-collapse_content-paddingBottom $spacing-collapse_content-paddingLeft;
+        color: $color-collapse_content-text-default;
+        @include font-size-regular;
+
+        p {
+            margin: 0;
+        }
+    }
+}
+
+@import './rtl.scss';

package/lib/cjs/collapse/constants.d.ts

@@ -0,0 +1,7 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    iconPosition: string[];
+};
+export { cssClasses, strings };

package/lib/cjs/collapse/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-collapse")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  iconPosition: ['left', 'right']
+};
+exports.strings = strings;

package/lib/cjs/collapse/foundation.d.ts

@@ -0,0 +1,28 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { Motion } from '../utils/type';
+export declare type ArgsType<T> = T extends (...args: infer A) => any ? A : never;
+export interface CollapseProps {
+    activeKey?: string | string[];
+    defaultActiveKey?: string | string[];
+    accordion?: boolean;
+    onChange?: (activeKey: CollapseProps['activeKey'], e: any) => void;
+    expandIcon?: any;
+    collapseIcon?: any;
+    style?: any;
+    className?: string;
+    keepDOM?: boolean;
+    motion?: Motion;
+    expandIconPosition?: 'left' | 'right';
+}
+export interface CollapseState {
+    activeSet: Set<string>;
+}
+export interface CollapseAdapter extends DefaultAdapter<CollapseProps, CollapseState> {
+    handleChange: (activeKey: CollapseProps['activeKey'], e: any) => void;
+    addActiveKey: (newSet: CollapseState['activeSet']) => void;
+}
+export default class CollapseFoundation extends BaseFoundation<CollapseAdapter> {
+    constructor(adapter: CollapseAdapter);
+    initActiveKey(): any;
+    handleChange(newKey: string, e: any): void;
+}

package/lib/cjs/collapse/foundation.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+class CollapseFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+  }
+
+  initActiveKey() {
+    const {
+      defaultActiveKey,
+      activeKey,
+      accordion
+    } = this.getProps();
+    let activeKeyList = activeKey ? activeKey : defaultActiveKey;
+
+    if (accordion) {
+      activeKeyList = (0, _isArray.default)(activeKeyList) ? activeKeyList[0] : activeKeyList;
+    }
+
+    if (activeKeyList && activeKeyList.length) {
+      activeKeyList = (0, _isArray.default)(activeKeyList) ? activeKeyList : [activeKeyList];
+      return activeKeyList;
+    }
+
+    return []; // this._adapter.initActiveSet(activeKeyList);
+  }
+
+  handleChange(newKey, e) {
+    const {
+      activeKey,
+      accordion
+    } = this.getProps();
+    const {
+      activeSet
+    } = this.getStates();
+    let newSet = new _set.default(activeSet);
+
+    if (newSet.has(newKey)) {
+      newSet.delete(newKey);
+    } else {
+      if (accordion) {
+        newSet = new _set.default([newKey]);
+      } else {
+        newSet.add(newKey);
+      }
+    }
+
+    this._adapter.handleChange([...(0, _values.default)(newSet).call(newSet)], e);
+
+    if (typeof activeKey === 'undefined') {
+      this._adapter.addActiveKey(newSet);
+    }
+  }
+
+}
+
+exports.default = CollapseFoundation;

package/lib/cjs/collapse/rtl.scss

@@ -0,0 +1,26 @@
+$module: #{$prefix}-collapse;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+
+    .#{$module} {
+        direction: rtl;
+
+        &-header {
+
+            &-right {
+
+                span {
+                    display: flex;
+                    padding-right: 0;
+                    padding-left: $spacing-collapse_right-paddingRight;
+
+                    &:last-child {
+                        padding-right: 0;
+                        padding-left: 0;
+                    }
+                }
+            }
+        }
+    }
+}

package/lib/cjs/collapse/variables.scss

@@ -0,0 +1,22 @@
+$color-collapse_item-border-default: var(--semi-color-border); // 分割线颜色
+$color-collapse_header-text-default: var(--semi-color-text-0); // 标题文字颜色
+$color-collapse_header-icon-default: var(--semi-color-text-2); // 展开箭头图标颜色
+$color-collapse_header-bg-hover: var(--semi-color-fill-0); // 菜单项背景颜色 - 悬浮
+$color-collapse_header-bg-active: var(--semi-color-fill-1); // 菜单项背景颜色 - 按下
+$color-collapse_content-text-default: var(--semi-color-text-1); // 内容文字颜色
+
+$font-collapse_header-fontWeight: $font-weight-bold; // 标题字重
+$spacing-collapse_header-marginX: $spacing-tight; // 标题水平外边距
+$spacing-collapse_header-marginY: $spacing-extra-tight; // 标题垂直外边距
+$spacing-collapse_header-padding: $spacing-tight; // 标题内边距
+$spacing-collapse_right-paddingRight: $spacing-tight; // 图标右侧内边距
+$spacing-collapse_header_iconLeft-marginRight: 8px;
+$spacing-collapse_content-paddingTop: $spacing-extra-tight; // 内容顶部内边距
+$spacing-collapse_content-paddingRight: $spacing-base; // 内容右侧内边距
+$spacing-collapse_content-paddingBottom: $spacing-tight; // 内容底部内边距
+$spacing-collapse_content-paddingLeft: $spacing-base; // 内容左侧内边距
+
+$radius-collapse_header: var(--semi-border-radius-small); // 内容圆角大小
+
+$width-collapse_item-border: 1px; // 分割线宽度
+$size-collapse_icon-default: $width-icon-medium; // 图标尺寸

package/lib/cjs/collapsible/constants.d.ts

@@ -0,0 +1,4 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+export { cssClasses };

package/lib/cjs/collapsible/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-collapsible")
+};
+exports.cssClasses = cssClasses;

package/lib/cjs/datePicker/_utils/formatter.d.ts

@@ -0,0 +1,14 @@
+import { BaseValueType } from '../foundation';
+/**
+ * Formats the displayed date text
+ * @param {string[]|Date[]} values
+ * @param {string} formatToken
+ * @param {Object} groupOptions
+ * @param {Object} locale
+ * @returns {string}
+ */
+export declare function formatDateValues(values: BaseValueType[], formatToken: string, { groupInnerSeparator, groupSize, groupSeparator, }: {
+    groupInnerSeparator?: " ~ ";
+    groupSize?: number;
+    groupSeparator?: ",";
+}, locale: any): string;

package/lib/cjs/datePicker/_utils/formatter.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.formatDateValues = formatDateValues;
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _dateFns = require("date-fns");
+
+var _constants = require("../constants");
+
+/**
+ * @file
+ * Date-related formatting display method
+ */
+
+/**
+ * Formats the displayed date text
+ * @param {string[]|Date[]} values
+ * @param {string} formatToken
+ * @param {Object} groupOptions
+ * @param {Object} locale
+ * @returns {string}
+ */
+function formatDateValues(values, formatToken) {
+  let {
+    groupInnerSeparator = _constants.strings.DEFAULT_SEPARATOR_RANGE,
+    groupSize = 1,
+    groupSeparator = _constants.strings.DEFAULT_SEPARATOR_MULTIPLE
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let locale = arguments.length > 3 ? arguments[3] : undefined;
+  let text = '';
+  (groupSize <= 0 || typeof groupSize !== 'number') && (groupSize = 1); // console.log(values, formatToken, groupInnerSeparator, groupSize, groupSeparator);
+
+  if ((0, _isArray.default)(values) && values.length) {
+    const groups = [];
+    const {
+      length
+    } = values; // chunk
+
+    for (let i = 0; i < length; i++) {
+      if (i % groupSize === 0) {
+        groups.push([]);
+      }
+
+      const curArrIdx = Math.floor(i / groupSize);
+      groups[curArrIdx].push(values[i]);
+    }
+
+    text = (0, _map.default)(groups).call(groups, arr => (0, _map.default)(arr).call(arr, v => {
+      if (v) {
+        // console.log(`formatDateValues() -> formatDateValues: ${v}`);
+        return (0, _dateFns.format)(v, formatToken, {
+          locale
+        });
+      } else {
+        return '';
+      }
+    }).join(groupInnerSeparator)).join(groupSeparator);
+  }
+
+  return text;
+}

package/lib/cjs/datePicker/_utils/getDayOfWeek.d.ts

@@ -0,0 +1,11 @@
+/**
+ *
+ * @param {number} weekStartsOn
+ * the index of the first day of the week （0-Sunday，1-Monday, etc）
+ *
+ */
+declare type WeekStartNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+declare const getDayofWeek: ({ weekStartsOn }: {
+    weekStartsOn: WeekStartNumber;
+}) => string[];
+export default getDayofWeek;

package/lib/cjs/datePicker/_utils/getDayOfWeek.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+/**
+ *
+ * @param {number} weekStartsOn
+ * the index of the first day of the week （0-Sunday，1-Monday, etc）
+ *
+ */
+const getDayofWeek = _ref => {
+  let {
+    weekStartsOn = 0
+  } = _ref;
+  const weekDay = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  for (let index = 0; index < weekStartsOn; index++) {
+    weekDay.push(weekDay.shift());
+  }
+
+  return weekDay;
+};
+
+var _default = getDayofWeek;
+exports.default = _default;