@power-xa/m-ui 0.0.1

package/dist/ProList/index.less

@@ -0,0 +1,318 @@
+@import "@power-xa/m-ui/dist/assets/less/mixins.less";
+
+.p-pro-list-container,
+.p-pro-list-view-container {
+
+    .p-pro-list-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .p-pro-list-card-skeleton,
+        .p-pro-list-card-container {
+            background: #fff;
+            border-radius: 28px;
+            padding: 42px 24px 30px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 28px;
+            position: relative;
+        }
+
+        .p-pro-list-card-skeleton {
+            .p-pro-list-card-tag {
+                position: absolute;
+                top: 0;
+                right: 0;
+                border-radius: 0 28px 0 28px;
+                width: 100px;
+                height: 32px;
+            }
+
+            .p-pro-list-card-title {
+                display: flex;
+                align-items: flex-start;
+                gap: 24px;
+
+                .p-pro-list-card-title-swiper {
+                    width: 200px;
+                    height: 150px;
+                    border-radius: 24px;
+                }
+
+                .p-pro-list-card-title-text {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 4px;
+
+                    .p-pro-list-card-title-text-skeleton {
+                        width: 100%;
+                        height: 40px;
+                    }
+                }
+            }
+
+            .p-pro-list-card-sub-title {
+                height: 34px;
+                width: 100%;
+            }
+
+            .p-pro-list-card-description {
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+
+                .p-pro-list-card-description-row {
+                    display: flex;
+                    align-items: center;
+                    gap: 28px;
+
+                    .p-pro-list-card-description-label {
+                        flex: 1;
+                        height: 34px;
+                    }
+
+                    .p-pro-list-card-description-value {
+                        flex: 4;
+                        height: 34px;
+                    }
+                }
+            }
+
+            .p-pro-list-card-image-list {
+                display: flex;
+                align-items: center;
+                gap: 20px;
+
+                .p-pro-list-card-image {
+                    width: 92px;
+                    height: 92px;
+                    border-radius: 20px;
+                }
+            }
+
+            .p-pro-list-card-footer {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding-top: 24px;
+                box-sizing: border-box;
+                border-top: 1px solid rgba(51, 52, 55, 0.10);
+                gap: 28px;
+
+                .p-pro-list-card-footer-creator {
+                    display: flex;
+                    align-items: center;
+                    gap: 20px;
+
+                    .p-pro-list-card-footer-creator-avatar {
+                        width: 46px;
+                        height: 46px;
+                        border-radius: 12px;
+                    }
+
+                    .p-pro-list-card-footer-creator-name {
+                        width: 100px;
+                        height: 34px;
+                    }
+                }
+
+                .p-pro-list-card-footer-extra-content {
+                    width: 180px;
+                    height: 34px;
+                }
+            }
+        }
+
+        .p-pro-list-card-container {
+            .p-pro-list-card-tag {
+                position: absolute;
+                top: 0;
+                right: 0;
+                border-radius: 0 28px 0 28px;
+                padding: 4px 22px;
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+
+                .p-pro-list-card-tag-text {
+                    .font(24)
+                }
+            }
+
+            .p-pro-list-card-title {
+                display: flex;
+                align-items: flex-start;
+                gap: 24px;
+
+                .p-pro-list-card-title-swiper {
+                    width: 200px;
+                    height: 150px;
+                    flex-shrink: 0;
+
+                    .p-pro-list-card-title-swiper-content {
+                        .p-pro-list-card-title-swiper-image {
+                            width: 200px;
+                            height: 150px;
+                            border-radius: 24px;
+                        }
+                    }
+                }
+
+                .p-pro-list-card-title-text {
+                    .font(28, #333437, Regular, 500);
+                    overflow: hidden;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 2; // 控制显示的行数
+                    text-overflow: ellipsis;
+
+                    &.p-pro-list-card-title-swiper-text {
+                        -webkit-line-clamp: 4;
+                    }
+                }
+            }
+
+            .p-pro-list-card-sub-title {
+                .font(24, #333437)
+            }
+
+            .p-pro-list-card-description {
+                display: flex;
+                align-items: center;
+                gap: 28px;
+
+                .p-pro-list-card-description-label,
+                .p-pro-list-card-description-value {
+                    .font(24, #888B94)
+                }
+
+                .label-column,
+                .value-column {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 20px;
+                    flex-shrink: 0;
+                }
+
+                .label-column {
+                    width: max-content;
+                }
+
+                .value-column {
+                    flex: 1;
+                    width: 0;
+
+                    .p-pro-list-card-description-value {
+                        width: 100%;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+
+            .p-pro-list-card-image-list {
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                gap: 20px;
+
+                .p-pro-list-card-image {
+                    width: 92px;
+                    height: 92px;
+                    border-radius: 20px;
+                }
+            }
+
+            .p-pro-list-card-file-list {
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+
+                .p-pro-list-card-file {
+                    display: flex;
+                    align-items: center;
+                    padding: 20px 22px;
+                    box-sizing: border-box;
+                    background: #F5F6F7;
+                    gap: 16px;
+                    border-radius: 16px;
+
+                    .p-pro-list-card-file-image {
+                        width: 40px;
+                        height: 44px;
+                    }
+
+                    .p-pro-list-card-file-name {
+                        flex: 1;
+                        width: 0;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        .font(24, #666)
+                    }
+                }
+            }
+
+            .p-pro-list-card-footer {
+                display: flex;
+                align-items: center;
+                padding-top: 24px;
+                box-sizing: border-box;
+                border-top: 1px solid rgba(51, 52, 55, 0.10);
+                gap: 28px;
+
+                .p-pro-list-card-footer-creator {
+                    display: flex;
+                    align-items: center;
+                    gap: 20px;
+
+                    .p-pro-list-card-footer-creator-avatar {
+                        width: 46px;
+                        height: 46px;
+                        border-radius: 12px;
+                    }
+
+                    .p-pro-list-card-footer-creator-name {
+                        .font(24, #888B94)
+                    }
+                }
+
+                .p-pro-list-card-footer-extra-content {
+                    flex: 1;
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+
+                    .p-pro-list-card-footer-extra-text {
+                        .font(24, #888B94)
+                    }
+                }
+            }
+        }
+
+        .p-pro-list-error-view {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .text {
+                .font(24, #999)
+            }
+        }
+    }
+
+    &.p-pro-list-container {
+        width: 100%;
+        height: 100%;
+        padding: 28px 32px;
+        background: #F6F7F9;
+        box-sizing: border-box;
+    }
+}

package/dist/RefreshList/index.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+import "./index.less";
+type RefreshListProps = {
+    loading?: boolean;
+    skeleton?: ReactNode;
+    dataSource: {
+        [key: string]: any;
+    }[];
+    getList?: (current: number) => void;
+    total?: number;
+    size?: number;
+    renderItem: (data: {
+        [key: string]: any;
+    }) => ReactNode;
+};
+declare const RefreshList: FC<RefreshListProps>;
+export default RefreshList;

package/dist/RefreshList/index.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { ScrollView, Text, View } from "@tarojs/components";
+import "./index.less";
+var RefreshList = function RefreshList(_ref) {
+  var _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    skeleton = _ref.skeleton,
+    _ref$dataSource = _ref.dataSource,
+    dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+    getList = _ref.getList,
+    total = _ref.total,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 0 : _ref$size,
+    renderItem = _ref.renderItem;
+  return /*#__PURE__*/React.createElement(ScrollView, {
+    scrollY: true,
+    showScrollbar: false,
+    enableBackToTop: true,
+    enableFlex: true,
+    refresherEnabled: true,
+    refresherBackground: "#F6F7F9",
+    enhanced: true,
+    pagingEnabled: true,
+    enablePassive: true,
+    type: "custom",
+    onRefresherRefresh: function onRefresherRefresh() {
+      return getList === null || getList === void 0 ? void 0 : getList(1);
+    },
+    onScrollToLower: function onScrollToLower() {
+      return total && total > dataSource.length && (getList === null || getList === void 0 ? void 0 : getList(dataSource.length / size + 1));
+    },
+    className: "p-refresh-list-container"
+  }, loading ? Array(10).fill(null).map(function () {
+    return skeleton;
+  }) : dataSource.length ? dataSource.map(function (item) {
+    return renderItem(item);
+  }) : /*#__PURE__*/React.createElement(View, {
+    className: "error-view"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "text"
+  }, "\u6682\u65E0\u6570\u636E")));
+};
+export default RefreshList;

package/dist/RefreshList/index.less

@@ -0,0 +1,19 @@
+@import "@power-xa/m-ui/dist/assets/less/mixins.less";
+
+.p-refresh-list-container {
+    box-sizing: border-box;
+    height: 100%;
+
+    .error-view {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .text {
+            .font(24, #999)
+        }
+    }
+}

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { ViewProps } from "@tarojs/components";
+import "./index.less";
+declare const Skeleton: FC<ViewProps>;
+export default Skeleton;

package/dist/Skeleton/index.js

@@ -0,0 +1,37 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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, { useEffect, useState } from "react";
+import { View } from "@tarojs/components";
+import "./index.less";
+var Skeleton = function Skeleton(props) {
+  var className = props.className;
+  var timer;
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    opacity = _useState2[0],
+    setOpacity = _useState2[1];
+  useEffect(function () {
+    timer = setTimeout(function () {
+      setOpacity(.3);
+    }, 300);
+    return function () {
+      clearTimeout(timer);
+      timer = null;
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
+    className: "".concat(className, " p-skeleton"),
+    onTransitionEnd: function onTransitionEnd() {
+      return setOpacity(opacity === 1 ? .3 : 1);
+    },
+    style: {
+      opacity: opacity
+    }
+  }));
+};
+export default Skeleton;

package/dist/Skeleton/index.less

@@ -0,0 +1,7 @@
+.p-skeleton {
+    transition-timing-function: linear;
+    transition-property: opacity;
+    transition-duration: 900ms;
+    background-color: #e4e4e4;
+    border-radius: 12px;
+}

package/dist/Tabbar/index.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react";
+import "./index.less";
+type TabItemProps = {
+    label: string;
+    icon: string;
+    key: string;
+    children: ReactNode;
+};
+type TabbarProps = {
+    items: TabItemProps[];
+};
+declare const Tabbar: FC<TabbarProps>;
+export default Tabbar;

package/dist/Tabbar/index.js

@@ -0,0 +1,77 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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, { useEffect, useState } from "react";
+import { getWindowInfo } from "@tarojs/taro";
+import { Text, View } from "@tarojs/components";
+import "./index.less";
+var Tabbar = function Tabbar(_ref) {
+  var items = _ref.items;
+  var _getWindowInfo = getWindowInfo(),
+    safeArea = _getWindowInfo.safeArea;
+  var _ref2 = safeArea,
+    height = _ref2.height,
+    bottom = _ref2.bottom;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    tab = _useState2[0],
+    setTab = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tabbarList = _useState4[0],
+    setTabbarList = _useState4[1];
+  useEffect(function () {
+    if (items.length) {
+      setTab(items[0].key);
+      setTabbarList(items.map(function (item, index) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          init: index === 0 ? true : false
+        });
+      }));
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(View, {
+    className: "p-tabbar-page-container"
+  }, tabbarList.map(function (item) {
+    return item.init && /*#__PURE__*/React.createElement(View, {
+      key: 'content-' + item.key,
+      style: {
+        display: tab === item.key ? "block" : "none"
+      },
+      className: "p-tabbar-page-content"
+    }, item.children);
+  }), /*#__PURE__*/React.createElement(View, {
+    className: "p-tabbar-page-footer",
+    style: {
+      paddingBottom: "".concat(bottom - height > 32 ? bottom - height : 32, "rpx")
+    }
+  }, tabbarList.map(function (item) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "p-tabbar-content ".concat(tab === item.key ? 'selected' : ''),
+      key: 'tabbar-' + item.key,
+      onTap: function onTap() {
+        item.init = true;
+        setTabbarList(_toConsumableArray(tabbarList));
+        setTab(item.key);
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "iconfont ".concat(item.icon)
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: "text"
+    }, item.label));
+  })));
+};
+export default Tabbar;

package/dist/Tabbar/index.less

@@ -0,0 +1,44 @@
+@import "@power-xa/m-ui/dist/assets/less/mixins.less";
+
+.p-tabbar-page-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .p-tabbar-page-content {
+        flex: 1;
+        height: 0;
+    }
+
+    .p-tabbar-page-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        padding: 32px 16px;
+
+        .p-tabbar-content {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            align-items: center;
+            gap: 8px;
+
+            .iconfont {
+                font-size: 36px;
+                color: #3B3A3A;
+            }
+
+            .text {
+                .font(24, #737476)
+            }
+
+            &.selected {
+                .text {
+                    color: #3B3A3A;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+}

package/dist/Tabs/index.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode, ReactElement } from "react";
+import "./index.less";
+type TabItemProps = {
+    label: string;
+    icon?: string;
+    key: string;
+    children?: ReactElement;
+    init?: boolean;
+};
+type TabsProps = {
+    items: TabItemProps[];
+    onChange?: (current: string) => void;
+    activeKey?: string;
+    extra?: {
+        right?: ReactNode;
+        left?: ReactNode;
+    };
+    swipeable?: boolean;
+    segmented?: boolean;
+    lazy?: boolean;
+    className?: string;
+    isCardList?: boolean;
+    centered?: boolean;
+};
+declare const Tabs: FC<TabsProps>;
+export default Tabs;