@zykj2024/much-library 1.1.7-beta.4 → 1.1.7-beta.6

package/dist/McSelect/demo/optionRender.js

@@ -0,0 +1,51 @@
+/**
+ * title: 自定义下拉选项
+ * description: 使用 `optionRender` 自定义渲染下拉选项。
+ */
+import { Space } from 'antd';
+import { McSelect } from "../..";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var options = [{
+  label: 'China',
+  value: 'china',
+  emoji: '🇨🇳',
+  desc: 'China (中国)'
+}, {
+  label: 'USA',
+  value: 'usa',
+  emoji: '🇺🇸',
+  desc: 'USA (美国)'
+}, {
+  label: 'Japan',
+  value: 'japan',
+  emoji: '🇯🇵',
+  desc: 'Japan (日本)'
+}, {
+  label: 'Korea',
+  value: 'korea',
+  emoji: '🇰🇷',
+  desc: 'Korea (韩国)'
+}];
+var App = function App() {
+  return /*#__PURE__*/_jsx(McSelect, {
+    multiple: true,
+    style: {
+      width: '100%'
+    },
+    placeholder: "select one country",
+    defaultValue: ['china'],
+    options: options,
+    optionRender: function optionRender(option) {
+      return /*#__PURE__*/_jsxs(Space, {
+        children: [/*#__PURE__*/_jsx("span", {
+          role: "img",
+          "aria-label": option.data.label,
+          children: option.data.emoji
+        }), option.data.desc]
+      });
+    }
+  });
+};
+export default App;

package/dist/McSelect/demo/panelInSearch.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McSelect/demo/panelInSearch.js

@@ -0,0 +1,47 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 搜索框下移+已选中的优先展示
+ * description: 默认都为false，仅支持多选
+ */
+import { Space } from 'antd';
+import { McSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var options = [{
+  value: 'jack',
+  label: 'Jack'
+}, {
+  value: 'lucy',
+  label: 'Lucy'
+}, {
+  value: 'Yiminghe',
+  label: 'yiminghe'
+}, {
+  value: 'disabled',
+  label: 'Disabled',
+  disabled: true
+}];
+export default (function () {
+  var _useState = useState(options),
+    _useState2 = _slicedToArray(_useState, 2),
+    finalOptions = _useState2[0],
+    setFinalOptions = _useState2[1];
+  return /*#__PURE__*/_jsx(Space, {
+    wrap: true,
+    children: /*#__PURE__*/_jsx(McSelect, {
+      style: {
+        width: 240
+      },
+      searchInPanel: true,
+      pinSelectedOptions: true,
+      searchInPanelPlaceholder: "\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u63D0\u793A\u6587\u5B57",
+      options: finalOptions,
+      onSearch: function onSearch(v) {
+        return setFinalOptions(options.filter(function (item) {
+          return item.value.includes(v);
+        }));
+      },
+      multiple: true
+    })
+  });
+});

package/dist/McSelect/demo/tagRender.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/dist/McSelect/demo/tagRender.js

@@ -0,0 +1,51 @@
+/**
+ * title: 自定义选择标签
+ * description: 允许自定义选择标签的样式。
+ */
+
+import { Tag } from 'antd';
+import { McSelect } from "../..";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var options = [{
+  value: 'gold'
+}, {
+  value: 'lime'
+}, {
+  value: 'green'
+}, {
+  value: 'cyan'
+}];
+var tagRender = function tagRender(props) {
+  var label = props.label,
+    value = props.value,
+    closable = props.closable,
+    onClose = props.onClose;
+  var onPreventMouseDown = function onPreventMouseDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return /*#__PURE__*/_jsx(Tag, {
+    color: value,
+    onMouseDown: onPreventMouseDown,
+    closable: closable,
+    onClose: onClose,
+    style: {
+      marginInlineEnd: 4
+    },
+    children: label
+  });
+};
+var App = function App() {
+  return /*#__PURE__*/_jsx(McSelect, {
+    multiple: true,
+    maxTagCount: undefined,
+    tagRender: tagRender,
+    defaultValue: ['gold', 'cyan'],
+    style: {
+      width: '100%'
+    },
+    options: options
+  });
+};
+export default App;

package/dist/McSelect/index.css

@@ -0,0 +1,60 @@
+.mc-select__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-select__label::after {
+  content: '\FF1A';
+  margin-left: 2px;
+}
+.mc-select__label.mc-select--disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: no-drop;
+}
+.mc-select__content {
+  width: 100%;
+  height: 100%;
+}
+.mc-select__content.ant-select .ant-select-selector {
+  padding-left: var(--selector-pl);
+}
+.mc-select__content.ant-select .ant-select-selector .ant-select-selection-overflow-item-rest .ant-select-selection-item {
+  color: #fff;
+  background: #325cf7;
+  padding-left: 4px;
+}
+.mc-select__content.ant-select .ant-select-selector .ant-select-selection-overflow-item-rest .ant-select-selection-item .ant-select-selection-item-content {
+  margin-right: 0;
+}
+.mc-select__content.ant-select .ant-select-selector .ant-select-selection-item[title*='「'][title$='」'] {
+  color: var(--inexistent-color);
+}
+.mc-select__content.ant-select.ant-select-single .ant-select-selector .ant-select-selection-search {
+  left: var(--selector-pl);
+}
+.mc-select__content.ant-select.ant-select-multiple .ant-select-selector .ant-select-selection-placeholder {
+  left: var(--selector-pl);
+}
+.mc-select__content.ant-select.ant-select-multiple .ant-select-selector .ant-select-selection-search {
+  margin-left: 0;
+}
+.mc-select.mc-select--inline .ant-select-selection-overflow-item:not(
+      .ant-select-selection-overflow-item-rest,
+      .ant-select-selection-overflow-item-suffix
+    ) {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  min-width: 0;
+  margin-right: 4px;
+}

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

@@ -10,7 +10,7 @@ import { Empty, Popover, Select, Spin } from 'antd';
 import { debounce } from "../Utils";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import PanelSearchInput from "./components/PanelSearchInput";
-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";

package/dist/McTag/demo/demo1.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McTag/demo/demo1.js

@@ -0,0 +1,18 @@
+/**
+ * title: 设置本身宽度以支持ellipsis
+ * description: 在McTag上设置宽度，以支持ellipsis。同时支持复制
+ */
+import McTag from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var uri = '/recommend/page/123/page/123/page/123';
+  return /*#__PURE__*/_jsx(McTag, {
+    style: {
+      maxWidth: 150
+    },
+    ellipsis: true,
+    color: "blue",
+    copyable: true,
+    children: uri
+  });
+});

package/dist/McTag/demo/demo2.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McTag/demo/demo2.js

@@ -0,0 +1,20 @@
+/**
+ * title: 设置父组件宽度以支持ellipsis
+ * description: 在McTag上设置宽度，以支持ellipsis。同时支持复制
+ */
+import McTag from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var uri = '/recommend/page/123/page/123/page/123';
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: 200
+    },
+    children: /*#__PURE__*/_jsx(McTag, {
+      color: "blue",
+      copyable: true,
+      ellipsis: true,
+      children: uri
+    })
+  });
+});

package/dist/McTag/demo/demo3.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McTag/demo/demo3.js

@@ -0,0 +1,19 @@
+/**
+ * title: 支持复制
+ * description: 普通McTag模式也支持复制
+ */
+import { ExclamationCircleOutlined } from 'much-icons';
+import McTag from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(McTag, {
+    style: {
+      maxWidth: 150
+    },
+    ellipsis: true,
+    color: "warning",
+    icon: /*#__PURE__*/_jsx(ExclamationCircleOutlined, {}),
+    copyable: true,
+    children: "click me to copy"
+  });
+});

package/dist/McTag/demo/demo4.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McTag/demo/demo4.js

@@ -0,0 +1,22 @@
+/**
+ * title: 自定义ellipsis属性
+ */
+import McTag from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var uri = '/recommend/page/123/page/123/page/123';
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: 200
+    },
+    children: /*#__PURE__*/_jsx(McTag, {
+      color: "blue",
+      copyable: true,
+      ellipsis: {
+        tooltip: true,
+        suffix: '等'
+      },
+      children: uri
+    })
+  });
+});

package/dist/McThemeConfig/demo/button.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McThemeConfig/demo/button.js

@@ -0,0 +1,226 @@
+import { Button, Col, Row } from 'antd';
+import { createStyles } from 'antd-style';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function () {
+  return {
+    container: {
+      '.ant-row': {
+        marginBottom: 10
+      },
+      '.ant-col': {
+        textAlign: 'center',
+        fontWeight: 'bold'
+      }
+    }
+  };
+});
+export default (function () {
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.container,
+    children: [/*#__PURE__*/_jsxs(Row, {
+      style: {
+        marginBottom: 20
+      },
+      children: [/*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Primary "
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Default "
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Add "
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Secondary "
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Dashed "
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Ghost "
+      })]
+    }), /*#__PURE__*/_jsxs(Row, {
+      children: [/*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          "data-default": true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          "data-add": true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          "data-secondary": true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "dashed",
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          ghost: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Row, {
+      style: {
+        marginBottom: 30
+      },
+      children: [/*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          disabled: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          "data-default": true,
+          disabled: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          "data-add": true,
+          disabled: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          "data-secondary": true,
+          disabled: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "dashed",
+          disabled: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          ghost: true,
+          disabled: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Row, {
+      style: {
+        marginBottom: 20
+      },
+      children: [/*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Text "
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Link "
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Danger "
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Link Danger "
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: " Dashed Danger "
+      })]
+    }), /*#__PURE__*/_jsxs(Row, {
+      children: [/*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "text",
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "link",
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          danger: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "link",
+          danger: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "dashed",
+          danger: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Row, {
+      children: [/*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "text",
+          disabled: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "link",
+          disabled: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          danger: true,
+          disabled: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "link",
+          disabled: true,
+          danger: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 4,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "dashed",
+          disabled: true,
+          danger: true,
+          children: "\u4E3B\u8981\u6309\u94AE"
+        })
+      })]
+    })]
+  });
+});

package/dist/McThemeConfig/demo/card.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McThemeConfig/demo/card.js

@@ -0,0 +1,60 @@
+import { Card, Space } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          backgroundColor: 'rgb(240, 242, 245)',
+          padding: 24
+        },
+        children: /*#__PURE__*/_jsxs(Card, {
+          size: "small",
+          title: "\u65E0\u8FB9\u6846\u5361\u7247, \u5728\u7070\u8272\u80CC\u666F\u4F7F\u7528",
+          bordered: false,
+          style: {
+            width: 300
+          },
+          children: [/*#__PURE__*/_jsx("p", {
+            children: "Card content"
+          }), /*#__PURE__*/_jsx("p", {
+            children: "Card content"
+          }), /*#__PURE__*/_jsx("p", {
+            children: "Card content"
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(Card, {
+        size: "small",
+        title: "\u6709\u8FB9\u6846\u5361\u7247",
+        style: {
+          width: 300
+        },
+        children: [/*#__PURE__*/_jsx("p", {
+          children: "Card content"
+        }), /*#__PURE__*/_jsx("p", {
+          children: "Card content"
+        }), /*#__PURE__*/_jsx("p", {
+          children: "Card content"
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Space, {
+      children: /*#__PURE__*/_jsxs(Card, {
+        size: "small",
+        type: "inner",
+        title: "\u5185\u90E8\u5361\u7247",
+        style: {
+          width: 300
+        },
+        children: [/*#__PURE__*/_jsx("p", {
+          children: "Card content"
+        }), /*#__PURE__*/_jsx("p", {
+          children: "Card content"
+        }), /*#__PURE__*/_jsx("p", {
+          children: "Card content"
+        })]
+      })
+    })]
+  });
+});

package/dist/McThemeConfig/demo/drawer.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McThemeConfig/demo/drawer.js

@@ -0,0 +1,59 @@
+import { Button, Col, Drawer, Form, Input, Row } from 'antd';
+import { McModalProvider } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useModal = McModalProvider.useModal;
+var demoDrawer = McModalProvider.create(function (_ref) {
+  var title = _ref.title,
+    record = _ref.record;
+  var modal = useModal();
+  return /*#__PURE__*/_jsx(Drawer, {
+    title: title,
+    open: modal.visible,
+    onClose: function onClose() {
+      modal.hide();
+    },
+    footer: /*#__PURE__*/_jsxs(Row, {
+      justify: "end",
+      children: [/*#__PURE__*/_jsx(Button, {
+        style: {
+          marginRight: 10
+        },
+        onClick: function onClick() {
+          modal.hide();
+        },
+        children: "\u53D6\u6D88"
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        onClick: function onClick() {
+          modal.hide();
+        },
+        children: "\u786E\u8BA4"
+      })]
+    }),
+    children: /*#__PURE__*/_jsx(Form.Item, {
+      label: "drawer",
+      children: /*#__PURE__*/_jsx(Input, {
+        value: record === null || record === void 0 ? void 0 : record.id
+      })
+    })
+  });
+});
+export default (function () {
+  return /*#__PURE__*/_jsx(Row, {
+    gutter: [16, 20],
+    children: /*#__PURE__*/_jsx(Col, {
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: function onClick() {
+          McModalProvider.show(demoDrawer, {
+            title: '编辑抽屉',
+            record: {
+              id: 123
+            }
+          });
+        },
+        children: "Drawer"
+      })
+    })
+  });
+});