@zykj2024/much-library 1.1.7-beta.8 → 1.1.7

package/dist/McContainer/index.css

@@ -0,0 +1,123 @@
+.mc-container {
+  position: relative;
+}
+.mc-container__ceiling {
+  width: calc(100% - 40px);
+  height: 24px;
+  position: absolute;
+  left: 16px;
+  z-index: 9;
+}
+.mc-container__wrapper {
+  height: 100%;
+  padding: 24px 24px 50px 16px;
+  overflow-y: auto;
+  border-top-right-radius: 12px;
+}
+.mc-container__query {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.mc-container__query .mc-input,
+.mc-container__query .mc-search,
+.mc-container__query .mc-select,
+.mc-container__query .mc-cascader,
+.mc-container__query .mc-input-number {
+  width: 270px;
+}
+.mc-container__query .mc-date-range {
+  width: 330px;
+}
+.mc-container__divider {
+  height: 1px;
+  margin: 24px 0;
+  background: #ebebeb;
+}
+.mc-container__action-bar {
+  position: sticky;
+  top: -24px;
+  z-index: 9;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 16px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 24px 0 16px;
+  margin-top: -24px;
+  overflow: hidden;
+}
+.mc-container__batch-bar {
+  position: sticky;
+  z-index: 9;
+  padding-bottom: 8px;
+}
+.mc-container__batch-bar__inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  background: #325cf7;
+  border-radius: 4px;
+}
+.mc-container__batch-bar__inner button.ant-btn {
+  background: transparent;
+  color: #fff;
+  border-color: transparent;
+  padding: 4px;
+  margin-left: 16px;
+}
+.mc-container__batch-bar__inner button.ant-btn:hover {
+  background-color: transparent !important;
+  color: #fff !important;
+  border-color: transparent !important;
+}
+.mc-container__batch-num {
+  color: #fff;
+  font-size: 14px;
+  opacity: 0.8;
+}
+.mc-container__batch-btns {
+  position: relative;
+  margin-left: 16px;
+}
+.mc-container__batch-btns::before {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: 0;
+  display: block;
+  width: 1px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.3);
+  content: '';
+}
+.mc-container__table .ant-spin-nested-loading {
+  position: static;
+}
+.mc-container__table .ant-spin-nested-loading .ant-spin-container {
+  position: static;
+}
+.mc-container__table__expand-icon > svg {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.mc-container__pagination {
+  padding: 8px 0 16px;
+  margin: 0 !important;
+  width: calc(100% - 40px);
+  position: absolute;
+  left: 16px;
+  bottom: 0;
+  z-index: 9;
+}

package/dist/McContainer/index.d.ts

@@ -0,0 +1,153 @@
+import { ButtonProps, TableProps } from 'antd';
+import { CSSProperties, FC, ReactElement, ReactNode } from 'react';
+import './index.less';
+export type McContainerPropsType = {
+    style?: CSSProperties;
+    className?: string;
+    /** 页面容器的高度（默认'calc(100vh - 88px)'，即视口高度-菜单header高度56px-页面上下内边距16px*2） */
+    height?: string;
+    /** 页面容器的背景色（默认'#ffffff'） */
+    backgroundColor?: string;
+    /**
+     * 是否展示头部遮罩，默认显示
+     */
+    showCell?: boolean;
+    /**
+     * 是否触发首次查询（默认true）
+      若使用场景为需自定义默认查询参数，可将该属性设置为false，并手动调用setDefaultQueryParams方法重新设置默认查询参数，而后调用query方法触发查询
+    */
+    immediateQuery?: boolean;
+    /** 加载中（已覆盖table组件的loading） */
+    loading?: boolean;
+    /** 加载loading下方的文案，默认为测试中 */
+    loadingText?: string;
+    /**
+     * 查询项（不受展开、收起按钮控制显示隐藏的查询项）
+      结合以下组件使用为最佳实现方式：McSelect、McCascader、McDateRange、McInput、McInput.Search、McInput.TextArea
+      已设置默认样式，可直接如下使用：
+      <>
+        <McSelect
+          label="下拉选择器"
+          name="name1"
+        />
+        <McCascader
+          label="级联选择器"
+          name="name2"
+        />
+        <McDateRange
+          label="日期范围选择器"
+          name="name3"
+        />
+        <McInput.Search
+          name="name4"
+          onSearch={() => mcContainerRef.current?.query({ current: 1 })}
+        />
+      </>
+    */
+    queryItems?: ReactElement;
+    /** 是否显示查询按钮（默认显示 true） */
+    showQuery?: boolean;
+    /** 是否显示重置按钮（默认显示 true） */
+    showReset?: boolean;
+    /** 是否显示展开、收起按钮（默认不显示 false） */
+    showCollapse?: boolean;
+    /** 可折叠的查询项（可通过展开、收起按钮控制显示隐藏的查询项，使用建议同queryItems） */
+    collapsibleQueryItems?: ReactElement;
+    /** 查询（点击查询按钮、点击重置按钮、表格分页、排序、筛选变化）回调事件 */
+    onQuery?: (params: {
+        current?: number;
+        pageSize?: number;
+        [key: string]: any;
+    }, filters?: any, sorter?: any, extra?: any) => void;
+    /** 重置按钮回调事件（若设置该属性，则在点击重置按钮时不再触发onQuery事件） */
+    onReset?: (params?: {
+        current?: number;
+        pageSize?: number;
+        [key: string]: any;
+    }) => void;
+    /** 查询区自定义渲染（若设置为null，则不显示查询区） */
+    queryRender?: ReactNode;
+    /**
+     * 操作栏（若未设置该项，则不显示）
+      已设置默认样式，可直接如下使用：
+      <>
+        <Button type="primary">操作1</Button>
+        <Button>操作2</Button>
+      </>
+    */
+    actionBar?: ReactElement;
+    /**
+     * @description 操作栏自定义渲染
+     * @param batchEl - 批量操作按钮实例
+     * @returns 操作栏元素
+     */
+    actionBarRender?: (batchEl: ReactNode) => ReactNode;
+    /** 批量操作已选项数量（当数量大于0时，显示批量操作栏） */
+    batchNum?: number;
+    /**
+     * 批量操作按钮区（若未设置该项，则不显示）
+      已设置默认样式，可直接如下使用：
+      <>
+        <Button>批量操作1</Button>
+        <Button>批量操作2</Button>
+      </>
+    */
+    batchBtns?: ReactNode;
+    /**
+     * @description 批量操作按钮配置
+     * @param show - 是否显示批量操作按钮（默认不显示 false）
+     * @param buttonText - 批量操作按钮文字
+     * @param buttonProps - 批量操作按钮属性
+     * @param order - 批量操作按钮在操作栏中的位置（默认为最后一个）
+     */
+    batch?: {
+        show?: boolean;
+        buttonText?: string;
+        buttonProps?: ButtonProps;
+        order?: number;
+    };
+    /** 批量操作取消按钮回调事件 */
+    onCancel?: () => void;
+    /** 表格组件属性 */
+    tableProps?: TableProps<any>;
+    /** 数据表格区自定义渲染（若设置为null，则不显示数据表格区 */
+    tableRender?: ReactNode;
+    /** 当前分页数据为空且非第一页时，是否自动会退到上一个分页（默认false） */
+    autoBackPagination?: boolean;
+    /** 折叠事件的回调 */
+    onCollapse?: (v: boolean) => void;
+    [key: string]: any;
+};
+export type McContainerRef = {
+    /**
+     * 调用查询的方法
+      可通过传参（params）更新查询参数的状态后触发查询，所设置的属性仅会覆盖原查询参数对应的属性，如：query({current: 1})，仅会覆盖原查询参数的current属性；
+      仅对设置过name属性的查询项（和current、pageSize）有效，查询项自身已绑定value属性的除外，需自行编写相关业务逻辑代码进行状态管理；
+      若不传参则按当前查询参数触发查询
+    */
+    query: (params?: {
+        [key: string]: any;
+    }) => void;
+    /** 调用重置的方法 */
+    reset: () => void;
+    /**
+     * 设置默认查询参数
+      默认查询参数，用于重置使用，仅对设置过name属性的查询项（和current、pageSize）有效，查询项自身已绑定value属性的除外，需自行编写相关业务逻辑代码进行状态管理；
+      可通过该方法配置默认查询的分页参数；
+      设置的查询参数将覆盖原有默认值，如：setDefaultQueryParams({pageSize: 10, status: 1})，设置后的默认查询参数为{current: 1, pageSize: 10, status: 1}
+      原有默认值 {current: 1, pageSize: 20}（若未开启分页功能，默认值为{}）
+    */
+    setDefaultQueryParams: (params: {
+        [key: string]: any;
+    }) => void;
+    /** 设置单个查询项的参数（仅支持设置过name属性的查询项和current、pageSize） */
+    setQueryParam: (name: string, value: any) => void;
+    /** 获取单个查询项的参数（仅支持设置过name属性的查询项和current、pageSize） */
+    getQueryParam: (name: string) => any;
+    /** 获取所有查询项的参数 */
+    getQueryParams: () => any;
+    /** 重置查询参数（重置为默认查询参数） */
+    resetQueryParams: () => void;
+};
+declare const McContainer: FC<McContainerPropsType>;
+export default McContainer;

package/dist/{esm/McContainer → McContainer}/index.js

@@ -4,25 +4,13 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useUpdateEffect } from '@zykj2024/much-hooks';
 import { Button, Spin, Table } from 'antd';
 import { isNumber } from 'lodash';
-import { CaretDownFilled, DoubleLeftOutlined } from '@zykj2024/much-icons';
+import { CaretDownFilled, DoubleLeftOutlined } from 'much-icons';
 import { Children, cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import "./index.less";
-
-/** 请求参数 */
-
-/** 批量操作配置接口 */
-
-/** McContainer 组件 Props 类型定义 */
-
-/** McContainer 组件 Ref 类型定义 */
+import "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * McContainer 组件
- * @description 一个通用的容器组件，支持查询、表格、批量操作等功能
- */
-var ContainerPanel = function ContainerPanel(props, ref) {
+var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   var _tableProps$dataSourc;
   var style = props.style,
     className = props.className,
@@ -183,13 +171,15 @@ var ContainerPanel = function ContainerPanel(props, ref) {
   };
 
   // 格式化查询参数（返回当前可见的查询项的参数集）
-  var formatQueryParams = function formatQueryParams(params) {
+  var formatQueryParams = function formatQueryParams() {
     var _tableProps$paginatio;
+    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var _params = tableRender || tableRender === null || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) === false || tableProps !== null && tableProps !== void 0 && (_tableProps$paginatio = tableProps.pagination) !== null && _tableProps$paginatio !== void 0 && _tableProps$paginatio.hasOwnProperty('onChange') || tableProps !== null && tableProps !== void 0 && tableProps.hasOwnProperty('onChange') ? {} : {
       current: params.current,
       pageSize: params.pageSize
     };
     var fn = function fn(items) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       items && Children.map(items.props.children ? items.props.children : items, function (item) {
         if (item !== null && item !== void 0 && item.props) {
           var _item$props2;
@@ -209,6 +199,7 @@ var ContainerPanel = function ContainerPanel(props, ref) {
   var query = function query(params) {
     if (params) {
       var _params = _objectSpread({}, queryParamsRef.current);
+      // 仅支持设置过name属性的查询项（和current、pageSize）
       Object.entries(params).forEach(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
           key = _ref3[0],
@@ -264,6 +255,7 @@ var ContainerPanel = function ContainerPanel(props, ref) {
     Object.keys(_params).forEach(function (k) {
       return !allNamesRef.current.includes(k) && allNamesRef.current.push(k);
     });
+    // 仅支持设置过name属性的查询项（和current、pageSize）
     Object.entries(params).forEach(function (_ref4) {
       var _ref5 = _slicedToArray(_ref4, 2),
         key = _ref5[0],
@@ -517,6 +509,5 @@ var ContainerPanel = function ContainerPanel(props, ref) {
       })]
     })
   });
-};
-var McContainer = /*#__PURE__*/forwardRef(ContainerPanel);
+});
 export default McContainer;

package/dist/McContainer/mock/index.d.ts

@@ -0,0 +1,21 @@
+export type I_ListItem = {
+    id: number;
+    name?: string;
+    age?: number;
+    city?: string;
+    date?: string;
+    funny?: string;
+    address?: string;
+    phone?: string;
+    email?: string;
+    desc?: string;
+};
+/** 列表数据源 */
+export declare const tableData: I_ListItem[];
+/** 获取列表数据 */
+export declare const fetchMockRequest: (values?: any) => Promise<{
+    data: any;
+    total: number;
+}>;
+/** 删除某条列表数据 */
+export declare const deleteMockRequest: (id: number) => Promise<void>;

package/dist/McContainer/mock/index.js

@@ -0,0 +1,50 @@
+/** 列表数据源 */
+export var tableData = Array.from({
+  length: 21
+}, function (_, index) {
+  return {
+    id: index + 1,
+    name: "\u59D3\u540D".concat(index + 1),
+    age: 18 + index,
+    city: "\u57CE\u5E02".concat(index + 1),
+    date: "2025-01-0".concat(index + 1, " 12:00:00"),
+    funny: "\u7231\u597D".concat(index + 1),
+    address: "\u5730\u5740".concat(index + 1),
+    phone: "\u7535\u8BDD".concat(index + 1),
+    email: "\u90AE\u7BB1".concat(index + 1),
+    desc: "\u63CF\u8FF0".concat(index + 1)
+  };
+});
+
+/** 获取列表数据 */
+export var fetchMockRequest = function fetchMockRequest(values) {
+  var _ref = values !== null && values !== void 0 ? values : {},
+    current = _ref.current,
+    pageSize = _ref.pageSize;
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      var data = tableData;
+      if (current && pageSize) {
+        var startIndex = (values.current - 1) * values.pageSize;
+        var endIndex = startIndex + values.pageSize;
+        data = tableData.slice(startIndex, endIndex);
+      }
+      resolve({
+        data: data,
+        total: tableData === null || tableData === void 0 ? void 0 : tableData.length
+      });
+    }, 1000);
+  });
+};
+
+/** 删除某条列表数据 */
+export var deleteMockRequest = function deleteMockRequest(id) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      tableData.splice(tableData.findIndex(function (item) {
+        return item.id === id;
+      }), 1);
+      resolve();
+    }, 1000);
+  });
+};

package/dist/McDateRange/demo/base.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 基础用法
+ * description: 除值传递方式为字符串数组外，基本使用方法和antd的<a href='https://ant-design.antgroup.com/components/date-picker-cn#components-date-picker-demo-preset-ranges' target='_blank'>DatePicker.RangePicker</a>组件使用方法一致。
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McDateRange/demo/base.js

@@ -0,0 +1,22 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 基础用法
+ * description: 除值传递方式为字符串数组外，基本使用方法和antd的<a href='https://ant-design.antgroup.com/components/date-picker-cn#components-date-picker-demo-preset-ranges' target='_blank'>DatePicker.RangePicker</a>组件使用方法一致。
+ */
+
+import { McDateRange } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(McDateRange, {
+    value: value,
+    style: {
+      width: '330px'
+    },
+    onChange: setValue
+  });
+});

package/dist/McDateRange/demo/cancelPresets.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 取消当前快捷设置
+ * description: 通过手动取消当前组件内部自定义的时间段预设可以将组件变为为一个值传递格式为字符串数组的普通时间段选择器。
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McDateRange/demo/cancelPresets.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 取消当前快捷设置
+ * description: 通过手动取消当前组件内部自定义的时间段预设可以将组件变为为一个值传递格式为字符串数组的普通时间段选择器。
+ */
+
+import { McDateRange } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(McDateRange, {
+    value: value,
+    onChange: setValue,
+    style: {
+      width: '330px'
+    },
+    presets: false
+  });
+});

package/dist/McDateRange/demo/overlap.js

@@ -0,0 +1,32 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 覆盖默认预设
+ * description: 因为组件本质上就是提供了常用的时间段预设，所以可以使用自定义的时间段预设对其进行覆盖。
+ */
+import dayjs from 'dayjs';
+import { McDateRange } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(McDateRange, {
+    value: value,
+    onChange: setValue,
+    style: {
+      width: '330px'
+    },
+    presets: [{
+      label: 'Yesterday',
+      value: [dayjs().add(-1, 'd'), dayjs()]
+    }, {
+      label: 'Last Week',
+      value: [dayjs().add(-7, 'd'), dayjs()]
+    }, {
+      label: 'Last Month',
+      value: [dayjs().add(-1, 'month'), dayjs()]
+    }]
+  });
+});

package/dist/McDateRange/index.css

@@ -0,0 +1,31 @@
+.mc-date-range__label {
+  color: #262626;
+  font-size: 14px;
+  position: absolute;
+  top: 0;
+  left: 11px;
+  z-index: 2;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.mc-date-range__label::after {
+  content: '\FF1A';
+  margin-left: 2px;
+}
+.mc-date-range__label.mc-date-range--disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: no-drop;
+}
+.mc-date-range__content {
+  width: 100%;
+  height: 100%;
+}
+.mc-date-range__preset-label {
+  margin: -1px -8px;
+  padding: 1px 8px;
+}

package/dist/{esm/McDateRange → McDateRange}/index.d.ts

@@ -13,15 +13,13 @@ declare const shortcutValueMap: {
 export declare const SHORTCUT_VALUE_MAP: typeof shortcutValueMap & {
     [key: string]: any;
 };
-export type McDateRangeProps = Omit<RangePickerProps, 'value' | 'onChange' | 'prefix'> & {
+export type McDateRangeProps = Omit<RangePickerProps, 'value' | 'onChange'> & {
     style?: CSSProperties;
     className?: string;
     name?: string;
     label?: ReactNode;
     valueFormat?: string;
     value?: string[];
-    /** label是否显示冒号，默认true显示 */
-    colon?: boolean;
     onChange?: (value?: string[] | null, dayjsValue?: [dayjs.Dayjs, dayjs.Dayjs] | null) => void;
     onShortcut?: (value?: 'today' | 'yesterday' | 'last7days' | 'last30days' | 'last60days' | 'last90days') => void;
     [key: string]: any;

package/dist/{esm/McDateRange → McDateRange}/index.js

@@ -1,15 +1,14 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "className", "label", "colon", "valueFormat", "value", "onChange", "onShortcut", "disabled"];
+var _excluded = ["style", "className", "label", "valueFormat", "value", "onChange", "onShortcut", "disabled"];
 import { DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import "./index.less";
+import "./index.css";
 
 /* 快捷选择日期对应值的映射集合 */
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var shortcutValueMap = {
   today: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
@@ -24,8 +23,6 @@ var McDateRange = /*#__PURE__*/forwardRef(function (props, ref) {
   var style = props.style,
     className = props.className,
     label = props.label,
-    _props$colon = props.colon,
-    colon = _props$colon === void 0 ? true : _props$colon,
     _props$valueFormat = props.valueFormat,
     valueFormat = _props$valueFormat === void 0 ? 'YYYY-MM-DD' : _props$valueFormat,
     value = props.value,
@@ -33,10 +30,28 @@ var McDateRange = /*#__PURE__*/forwardRef(function (props, ref) {
     onShortcut = props.onShortcut,
     disabled = props.disabled,
     rest = _objectWithoutProperties(props, _excluded);
-  var _useState = useState(),
+
+  /* 获取label宽度 */
+  var labelRef = useRef();
+  var _useState = useState(11),
     _useState2 = _slicedToArray(_useState, 2),
-    privateValue = _useState2[0],
-    setPrivateValue = _useState2[1];
+    paddingLeft = _useState2[0],
+    setPaddingLeft = _useState2[1];
+  var labelResizeObserver = new ResizeObserver(function (entries) {
+    setPaddingLeft(entries[0].contentRect.width + 11);
+  });
+  useEffect(function () {
+    if (labelRef.current) {
+      labelResizeObserver.observe(labelRef.current);
+    }
+    return function () {
+      return labelResizeObserver.disconnect();
+    };
+  }, []);
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    privateValue = _useState4[0],
+    setPrivateValue = _useState4[1];
   var currentRef = useRef();
   var oldRef = useRef();
   var isShortcutRef = useRef(false);
@@ -83,21 +98,21 @@ var McDateRange = /*#__PURE__*/forwardRef(function (props, ref) {
     isShortcutRef.current = true;
     onShortcut === null || onShortcut === void 0 || onShortcut(type);
   };
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     style: _objectSpread({
+      position: label ? 'relative' : 'static',
       height: 32
     }, style),
     className: "mc-date-range ".concat(className || ''),
-    children: /*#__PURE__*/_jsx(DatePicker.RangePicker, _objectSpread({
+    children: [label && /*#__PURE__*/_jsx("span", {
+      ref: labelRef,
+      className: "mc-date-range__label ".concat(disabled ? 'mc-date-range--disabled' : ''),
+      children: label
+    }), /*#__PURE__*/_jsx(DatePicker.RangePicker, _objectSpread({
       ref: ref,
-      prefix: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [label, label && colon && /*#__PURE__*/_jsx("span", {
-          style: {
-            marginLeft: 2
-          },
-          children: "\uFF1A"
-        })]
-      }),
+      style: {
+        paddingLeft: paddingLeft
+      },
       className: "mc-date-range__content",
       value: privateValue,
       onChange: change,
@@ -146,7 +161,7 @@ var McDateRange = /*#__PURE__*/forwardRef(function (props, ref) {
         }),
         value: [dayjs().add(-89, 'd'), dayjs()]
       }]
-    }, rest))
+    }, rest))]
   });
 });
 export default McDateRange;

package/dist/McEllipsis/demo/base.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 基本使用
+ * description: 单行末尾省略<br>设置 `rows` 多行末尾省略
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;