@power-xa/m-ui 0.0.6 → 0.0.8

package/README.md

@@ -1,5 +1,41 @@
 # m-ui
 
+# 0.0.8 2026-01-14
+1.增加VaildCodePopup，用户身份验证
+2.移除RefreshList组件
+3.开放ProTabs属性及Instance(ProTabItemProps, ProTabsInstance, ProTabsProps)
+4.开放ProList属性及Instance(ProListInstance, ProListProps)
+5.开放useConfig，无需从dist引入
+6.增加日历统计组件，使用见项目打卡
+7.增加UserView组件，CreateEdit升级版，同时CreateEdit做废弃准备
+8.优化ProForm系列组件，并开放ProForm一系列属性及ProFormInstance，可设置及获取指定字段
+9.增加Hooks(usePageParams,useDelayGoBack,useNavigateTo)
+10.开放部分公共Controller
+
+# 0.0.7 2025-12-05
+1.ConfigProvider 增加 env 参数，用于判断当前环境
+2.Popup/Drawer 组件Bug修改
+3.Filter默认值场景增加
+4.ProFormList组件优化
+5.ProFormGroup子组件赋值操作修改
+6.Tabs修改非swiperable下children无法更新
+
+# 0.0.6
+1.CreatorEdit 增加 companyUserId 参数
+2.Popup 组件增加默认头部，可自定义头部内容
+3.ProFormField 组件暴露
+4.ProFormList组件优化
+5.ProFormSelect 内部Popup增加扩展内容
+6.Tabs组件增加ref属性，可通过ref刷新指定Tab
+
+# 0.0.5
+ProFormUpload/ProList 增加文件预览
+
+# 0.0.4
+1.Tabs修改（子组件内容更新后未重新渲染）
+2.PageContainer增加footer属性，可自定义底部内容
+3.Filter Children属性修改
+
 # 0.0.1
 1.增加request方法
 2.增加组件：
@@ -18,20 +54,4 @@
   - ConfigProvider
   - CreatorEdit
   - Empty
-  - ActionSheet 
-
-# 0.0.4
-1.Tabs修改（子组件内容更新后未重新渲染）
-2.PageContainer增加footer属性，可自定义底部内容
-3.Filter Children属性修改
-
-# 0.0.5
-ProFormUpload/ProList 增加文件预览
-
-# 0.0.6
-1.CreatorEdit 增加 companyUserId 参数
-2.Popup 组件增加默认头部，可自定义头部内容
-3.ProFormField 组件暴露
-4.ProFormList组件优化
-5.ProFormSelect 内部Popup增加扩展内容
-6.Tabs组件增加ref属性，可通过ref刷新指定Tab
+  - ActionSheet 

package/dist/ActionSheet/index.js

@@ -31,8 +31,9 @@ var ActionSheet = function ActionSheet(_ref) {
   }, [show]);
   return /*#__PURE__*/React.createElement(Fragment, null, typeof open !== "boolean" && /*#__PURE__*/React.createElement(View, {
     className: "p-action-sheet-target-container",
-    onTap: function onTap() {
-      return setShow(true);
+    onTap: function onTap(e) {
+      e.stopPropagation();
+      setShow(true);
     }
   }, children), /*#__PURE__*/React.createElement(Popup, {
     open: show,
@@ -49,8 +50,9 @@ var ActionSheet = function ActionSheet(_ref) {
       return /*#__PURE__*/React.createElement(View, {
         className: "p-action-sheet-option",
         key: item.key,
-        onTap: function onTap() {
+        onTap: function onTap(e) {
           var _item$onTap;
+          e.stopPropagation();
           if (!item.onTap) return false;
           onOpenChange === null || onOpenChange === void 0 || onOpenChange();
           (_item$onTap = item.onTap) === null || _item$onTap === void 0 || _item$onTap.call(item, item.key);

package/dist/Breadcrumb/index.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from "react";
 import { ScrollView, Text, View } from "@tarojs/components";
+import { getUUID } from "../utils/tools";
 import "./index.less";
 var Breadcrumb = function Breadcrumb(_ref) {
   var items = _ref.items,
@@ -14,9 +15,10 @@ var Breadcrumb = function Breadcrumb(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     className: "p-breadcrumb-content"
   }, items.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: item.key || getUUID()
+    }, /*#__PURE__*/React.createElement(View, {
       className: "p-breadcrumb-item",
-      key: item.key,
       onTap: function onTap() {
         var _item$onTap;
         return (_item$onTap = item.onTap) === null || _item$onTap === void 0 ? void 0 : _item$onTap.call(item, item.key);

package/dist/Calendar/Date/index.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from "react";
+import "./index.less";
+type CalendarDateProps = {
+    renderContent?: (date: string) => ReactNode;
+    onChange?: (date: string) => void;
+};
+declare const CalendarDate: FC<CalendarDateProps>;
+export default CalendarDate;

package/dist/Calendar/Date/index.js

@@ -0,0 +1,246 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useCallback, useEffect, useState } from "react";
+import { createSelectorQuery } from "@tarojs/taro";
+import { Text, View } from "@tarojs/components";
+import dayjs from "dayjs";
+import "./index.less";
+var CalendarDate = function CalendarDate(_ref) {
+  var onChange = _ref.onChange,
+    renderContent = _ref.renderContent;
+  var today = dayjs();
+  var _useState = useState(dayjs()),
+    _useState2 = _slicedToArray(_useState, 2),
+    current = _useState2[0],
+    setCurrent = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dateList = _useState4[0],
+    setDateList = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rect = _useState6[0],
+    setRect = _useState6[1];
+  var _useState7 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    position = _useState8[0],
+    setPosition = _useState8[1];
+  var _useState9 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    startPosition = _useState10[0],
+    setStartPosition = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    touching = _useState12[0],
+    setTouching = _useState12[1];
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    index = _useState14[0],
+    setIndex = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    expand = _useState16[0],
+    setExpand = _useState16[1];
+  useEffect(function () {
+    var query = createSelectorQuery();
+    query.select("#p-calendar-date-content").boundingClientRect(function (rect) {
+      if (!(rect instanceof Array)) {
+        setRect(rect);
+      }
+    }).exec();
+  }, []);
+  useEffect(function () {
+    if (expand) {
+      setDateList(formatMonthList(current));
+    } else {
+      setDateList(formatWeekList(current));
+    }
+  }, [expand]);
+  useEffect(function () {
+    if (current) onChange === null || onChange === void 0 || onChange(current.format("YYYY-MM-DD"));
+  }, [current]);
+  var returnToday = useCallback(function () {
+    setCurrent(today);
+    setIndex(0);
+    if (expand) {
+      setDateList(formatMonthList(today));
+    } else {
+      setDateList(formatWeekList(today));
+    }
+  }, [expand]);
+  var _onTouchStart = useCallback(function (e) {
+    e.stopPropagation();
+    var x = e.touches[0].clientX;
+    var y = e.touches[0].clientY;
+    /* 判断是左右滑动还是上下滑动 */
+    setStartPosition({
+      x: x,
+      y: y
+    });
+    setTouching(true);
+  }, []);
+  var _onTouchMove = useCallback(function (e) {
+    e.stopPropagation();
+    var x = e.touches[0].clientX - startPosition.x;
+    var y = e.touches[0].clientY - startPosition.y;
+    /* 判断是左右滑动还是上下滑动 */
+    if (Math.abs(x) > Math.abs(y)) {
+      setPosition({
+        x: x / rect.width,
+        y: 0
+      });
+    }
+  }, [startPosition, rect]);
+  var _onTouchEnd = useCallback(function (e) {
+    e.stopPropagation();
+    setTouching(false);
+    var x = Math.abs(position.x);
+    var y = Math.abs(position.y);
+    if (x > y) {
+      var currentIndex = position.x > 0 ? index + 1 : index - 1;
+      setIndex(currentIndex);
+      if (expand) {
+        var _date = current[position.x > 0 ? "subtract" : "add"](1, "month").startOf("month");
+        setDateList(formatMonthList(_date));
+        setCurrent(_date);
+      } else {
+        var _date2 = current[position.x > 0 ? "subtract" : "add"](1, "week").startOf("week");
+        setDateList(formatWeekList(_date2));
+        setCurrent(_date2);
+      }
+    }
+    setPosition({
+      x: 0,
+      y: 0
+    });
+  }, [position, index, current, expand]);
+  return /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-date-container"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-date-header"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "current-date"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "sub-text"
+  }, current.format("YYYY年")), /*#__PURE__*/React.createElement(Text, {
+    className: "text"
+  }, current.format("MM月DD日"))), !current.isSame(today, 'date') && /*#__PURE__*/React.createElement(View, {
+    className: "button",
+    onTap: returnToday
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "text"
+  }, "\u56DE\u5230\u4ECA\u5929"))), /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-date-table-header"
+  }, ["日", "一", "二", "三", "四", "五", "六"].map(function (t, i) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "p-calendar-date-table-header-column",
+      key: 'p-calendar-date-table-header-' + i
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: "text"
+    }, t));
+  })), /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-date-content",
+    id: "p-calendar-date-content",
+    onTouchStart: function onTouchStart(e) {
+      return _onTouchStart(e);
+    },
+    onTouchMove: function onTouchMove(e) {
+      return _onTouchMove(e);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      return _onTouchEnd(e);
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-date-content-body ".concat(expand ? 'expand' : ''),
+    style: {
+      transform: "translateX(".concat(-index * 100, "%)")
+    }
+  }, dateList.map(function (list, i) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "p-calendar-date-cell",
+      key: 'calendar-cell-' + i,
+      style: {
+        transform: "translateX(".concat((i - 1 + index + (touching ? position.x : 0)) * 100, "%)"),
+        transitionDuration: "".concat(touching ? 0 : .3, "s")
+      }
+    }, list.map(function (d, di) {
+      var selected = d.isSame(current, "date");
+      var isToday = d.isSame(today, "date");
+      var grey = !d.startOf("month").isSame(current.startOf("month"));
+      var disabled = d.isAfter(today);
+      return /*#__PURE__*/React.createElement(View, {
+        className: "p-calendar-date-view ".concat(isToday ? 'today' : '', " ").concat(selected ? 'selected' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(grey ? 'grey' : ''),
+        key: 'calendar-view-' + di,
+        onTap: function onTap() {
+          if (disabled) return false;
+          setCurrent(d);
+          setDateList(expand ? formatMonthList(d) : formatWeekList(d));
+        }
+      }, /*#__PURE__*/React.createElement(Text, {
+        className: "p-calendar-date-view-text"
+      }, d.format("DD")), !disabled && (renderContent === null || renderContent === void 0 ? void 0 : renderContent(d.format("YYYY-MM-DD"))));
+    }));
+  }))), /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-date-footer",
+    onTap: function onTap() {
+      return setExpand(!expand);
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "border"
+  }), /*#__PURE__*/React.createElement(View, {
+    className: "iconfont icon-icon-xiala",
+    style: expand ? {
+      transform: "rotate(180deg)"
+    } : {}
+  }), /*#__PURE__*/React.createElement(View, {
+    className: "border"
+  })));
+};
+export default CalendarDate;
+var formatWeekList = function formatWeekList(date) {
+  var current = date.startOf("week");
+  var prev = current.subtract(1, "week");
+  var next = current.add(1, "week");
+  return [Array.from({
+    length: 7
+  }, function (_, i) {
+    return prev.add(i, "day");
+  }), Array.from({
+    length: 7
+  }, function (_, i) {
+    return current.add(i, "day");
+  }), Array.from({
+    length: 7
+  }, function (_, i) {
+    return next.add(i, "day");
+  })];
+};
+var formatMonthList = function formatMonthList(date) {
+  var start = date.startOf("month");
+  var startWeek = start.startOf("week").subtract(1, "day");
+  var prev = start.subtract(1, "month").startOf("week").subtract(1, "day");
+  var next = start.add(1, "month").startOf("week").subtract(1, "day");
+  return [Array.from({
+    length: 42
+  }, function (_, i) {
+    return prev.add(i, "day");
+  }), Array.from({
+    length: 42
+  }, function (_, i) {
+    return startWeek.add(i, "day");
+  }), Array.from({
+    length: 42
+  }, function (_, i) {
+    return next.add(i, "day");
+  })];
+};

package/dist/Calendar/Date/index.less

@@ -0,0 +1,146 @@
+@import "@power-xa/m-ui/dist/assets/less/mixins.less";
+
+.p-calendar-date-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .p-calendar-date-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .current-date {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+
+            .sub-text {
+                .font(28, #999);
+                position: relative;
+
+                &::after {
+                    position: absolute;
+                    content: "";
+                    width: 1px;
+                    height: 20px;
+                    background: #999;
+                    top: 50%;
+                    margin-top: -10px;
+                    right: -12px;
+                }
+            }
+
+            .text {
+                .font(28)
+            }
+        }
+
+        .button {
+            display: flex;
+            align-items: center;
+
+            .text {
+                .font(28, #999)
+            }
+        }
+    }
+
+    .p-calendar-date-table-header {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+
+        .p-calendar-date-table-header-column {
+            flex: 1;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .text {
+                .font(24, #999)
+            }
+        }
+    }
+
+    .p-calendar-date-content {
+        overflow: hidden;
+
+        .p-calendar-date-content-body {
+            display: flex;
+            align-items: center;
+            flex-wrap: nowrap;
+            height: 50px;
+            transition: .3s height;
+
+            .p-calendar-date-cell {
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+                flex-wrap: wrap;
+                gap: 24px;
+                width: 100%;
+                flex-shrink: 0;
+                will-change: transform;
+                position: absolute;
+
+                .p-calendar-date-view {
+                    width: 10%;
+                    flex-shrink: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 25px;
+                    padding: 8px 0;
+                    position: relative;
+
+                    .p-calendar-date-view-text {
+                        .font(24);
+                    }
+
+                    &.today {
+                        background: #F6F7F9;
+                    }
+
+                    &.selected {
+                        background: #333437;
+
+                        .p-calendar-date-view-text {
+                            color: #fff;
+                        }
+                    }
+
+                    &.disabled,
+                    &.grey {
+                        .p-calendar-date-view-text {
+                            color: #999;
+                        }
+                    }
+                }
+            }
+
+            &.expand {
+                height: 420px;
+            }
+        }
+    }
+
+    .p-calendar-date-footer {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+
+        .border {
+            flex: 1;
+            height: 1px;
+            width: 0;
+            background: #F6F7F9;
+        }
+
+        .iconfont {
+            font-size: 24px;
+            color: #999;
+        }
+    }
+}

package/dist/Calendar/Month/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./index.less";
+type CalendarMonthProps = {
+    onChange?: (start: string, end: string) => void;
+};
+declare const CalendarMonth: FC<CalendarMonthProps>;
+export default CalendarMonth;