@zykj2024/much-library 1.1.7-beta.3 → 1.1.7-beta.5

package/dist/McThemeConfig/themeToken.json

@@ -0,0 +1,152 @@
+{
+  "token": {
+    "colorPrimary": "#325cf7",
+    "colorInfo": "#325cf7",
+    "colorSuccess": "#3aaf00",
+    "colorTextBase": "#262626",
+    "borderRadius": 4,
+    "colorText": "#262626",
+    "colorTextSecondary": "#595959",
+    "colorTextTertiary": "#8c8c8c",
+    "colorTextQuaternary": "#8c8c8c",
+    "controlHeightSM": 26,
+    "fontFamily": "'SourceHanSansCN', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'"
+  },
+  "components": {
+    "Button": {
+      "defaultActiveBg": "rgb(228, 230, 232)",
+      "defaultActiveBorderColor": "rgb(228, 230, 232)",
+      "defaultActiveColor": "rgb(50, 92, 247)",
+      "defaultHoverBg": "rgb(240, 242, 245)",
+      "defaultColor": "rgb(38, 38, 38)",
+      "defaultBg": "rgb(240, 242, 245)",
+      "defaultBorderColor": "rgb(240, 242, 245)",
+      "defaultHoverBorderColor": "rgb(240, 242, 245)",
+      "defaultHoverColor": "rgb(50, 92, 247)",
+      "groupBorderColor": "rgb(50, 92, 247)",
+      "textHoverBg": "rgb(245, 245, 245)",
+      "colorTextDisabled": "rgb(183, 179, 179)",
+      "contentFontSizeSM": 12,
+      "paddingInline": 16,
+      "paddingInlineLG": 16,
+      "paddingInlineSM": 12,
+      "colorText": "rgb(38, 38, 38)",
+      "borderColorDisabled": "rgb(245, 245, 245)",
+      "dangerShadow": "",
+      "defaultShadow": "",
+      "primaryShadow": ""
+    },
+    "Divider": {
+      "colorText": "rgb(38, 38, 38)",
+      "colorTextHeading": "rgb(38, 38, 38)",
+      "colorSplit": "rgb(235, 235, 235)"
+    },
+    "Anchor": {
+      "colorSplit": "rgb(235, 235, 235)",
+      "colorText": "rgb(38, 38, 38)"
+    },
+    "Breadcrumb": {
+      "lastItemColor": "rgb(0, 0, 0)",
+      "itemColor": "rgb(140, 140, 140)"
+    },
+    "Form": {
+      "labelColor": "rgb(38, 38, 38)"
+    },
+    "Input": {
+      "activeBg": "rgb(240, 242, 245)",
+      "hoverBg": "rgb(240, 242, 245)",
+      "colorBgContainer": "rgb(240, 242, 245)",
+      "hoverBorderColor": "rgb(50, 92, 247)",
+      "colorBgContainerDisabled": "rgba(240, 242, 245, 0.5)",
+      "colorBorder": "rgba(240, 242, 245, 0)",
+      "paddingBlockLG": 8,
+      "paddingInlineSM": 8,
+      "addonBg": "rgb(240, 242, 245)",
+      "colorTextPlaceholder": "rgb(140, 140, 140)",
+      "colorTextQuaternary": "rgb(179, 179, 179)"
+    },
+    "InputNumber": {
+      "activeBg": "rgb(240, 242, 245)",
+      "activeBorderColor": "rgb(50, 92, 247)",
+      "addonBg": "rgb(240, 242, 245)",
+      "filledHandleBg": "rgb(240, 242, 245)",
+      "handleBorderColor": "rgb(240, 242, 245)",
+      "hoverBg": "rgb(240, 242, 245)",
+      "hoverBorderColor": "rgb(50, 92, 247)",
+      "handleHoverColor": "rgb(50, 92, 247)",
+      "colorBgContainer": "rgb(240, 242, 245)",
+      "colorBorder": "rgba(240, 242, 245, 0)",
+      "colorBgContainerDisabled": "rgba(240, 242, 245, 0.5)",
+      "colorTextDisabled": "rgb(179, 179, 179)"
+    },
+    "Mentions": {
+      "activeBg": "rgb(240, 242, 245)",
+      "addonBg": "rgb(240, 242, 245)",
+      "hoverBg": "rgb(240, 242, 245)",
+      "colorBgContainer": "rgb(240, 242, 245)",
+      "colorBorder": "rgb(240, 242, 245)",
+      "hoverBorderColor": "rgb(50, 92, 247)",
+      "activeBorderColor": "rgb(50, 92, 247)"
+    },
+    "Radio": {
+      "buttonBg": "rgba(240, 242, 245)",
+      "buttonColor": "rgb(38, 38, 38)",
+      "buttonCheckedBg": "rgba(255, 255, 255, 0.1)",
+      "buttonCheckedBgDisabled": "rgba(255, 255, 255, 0.1)",
+      "buttonCheckedBorderColorDisabled": "#B3B3B3",
+      "colorBgContainerDisabled": "#F0F2F5"
+    },
+    "Select": {
+      "selectorBg": "rgb(240, 242, 245)",
+      "colorBgContainer": "rgb(240, 242, 245)",
+      "colorBorder": "rgba(240, 242, 245, 0)",
+      "multipleItemBg": "rgb(255, 255, 255)",
+      "multipleSelectorBgDisabled": "rgb(255, 255, 255)",
+      "optionActiveBg": "rgb(240, 242, 245)",
+      "colorTextPlaceholder": "rgb(140, 140, 140)",
+      "colorTextDisabled": "rgb(179, 179, 179)",
+      "multipleItemColorDisabled": "rgb(179, 179, 179)",
+      "optionSelectedColor": "rgb(38, 38, 38)",
+      "colorBgContainerDisabled": "rgba(240, 242, 245, 0.5)"
+    },
+    "DatePicker": {
+      "cellHoverBg": "rgb(240, 242, 245)",
+      "hoverBg": "rgb(240, 242, 245)",
+      "activeBg": "rgb(240, 242, 245)",
+      "colorBgContainer": "rgb(240, 242, 245)",
+      "colorBorder": "rgba(240, 242, 245, 0)",
+      "hoverBorderColor": "rgb(50, 92, 247)",
+      "cellBgDisabled": "rgba(240, 242, 245, 0.5)",
+      "multipleItemColorDisabled": "rgb(179, 179, 179)",
+      "colorBgContainerDisabled": "rgba(240, 242, 245, 0.5)",
+      "colorTextPlaceholder": "rgb(140, 140, 140)"
+    },
+    "Cascader": {
+      "colorBgContainerDisabled": "rgba(240, 242, 245, 0.5)",
+      "colorSplit": "rgba(5, 5, 5, 0)",
+      "colorBorder": "rgba(217, 217, 217)"
+    },
+    "Switch": {
+      "handleShadow": "-1px 0px 2px 0px rgba(0, 0, 0, 0.1)",
+      "trackPadding": 3,
+      "trackHeight": 24,
+      "trackHeightSM": 20,
+      "handleSizeSM": 14,
+      "innerMaxMargin": 25,
+      "innerMinMargin": 9,
+      "trackMinWidthSM": 36
+    },
+    "Tabs": {
+      "horizontalItemGutter": 24,
+      "horizontalItemPadding": "5px 16px 9px",
+      "cardBg": "#F0F4F9",
+      "cardGutter": 0,
+      "cardHeight": 44,
+      "cardPadding": "12px 32px"
+    },
+    "Pagination": {
+      "itemActiveBg": "#325CF7",
+      "itemSizeSM": 22
+    }
+  }
+}

package/dist/McTreePanel/SelectedItem.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.less';
+declare const _default: import("react").MemoExoticComponent<({ sortable, itemMap, inexistent, text, color, reserved, inexistentItemMap, value, onRemove, }: any) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/McTreePanel/SelectedItem.js

@@ -0,0 +1,75 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useSortable } from '@dnd-kit/sortable';
+import { Button, Typography } from 'antd';
+import { MenuOutlined } from 'much-icons';
+import { McIconFont } from "./..";
+import { memo, useMemo } from 'react';
+import "./index.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SelectedItem = function SelectedItem(_ref) {
+  var sortable = _ref.sortable,
+    itemMap = _ref.itemMap,
+    inexistent = _ref.inexistent,
+    text = _ref.text,
+    color = _ref.color,
+    reserved = _ref.reserved,
+    inexistentItemMap = _ref.inexistentItemMap,
+    value = _ref.value,
+    onRemove = _ref.onRemove;
+  var _label = useMemo(function () {
+    var _itemMap$value, _inexistentItemMap$va;
+    var label = ((_itemMap$value = itemMap[value]) === null || _itemMap$value === void 0 ? void 0 : _itemMap$value.title) || "".concat((_inexistentItemMap$va = inexistentItemMap[value]) === null || _inexistentItemMap$va === void 0 ? void 0 : _inexistentItemMap$va.title).concat(inexistent && !reserved ? "\u300C".concat(text, "\u300D") : '');
+    var fn = function fn() {
+      var isTooltip = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          color: !itemMap[value] && inexistent && !reserved ? color : isTooltip ? '#ffffff' : '#262626'
+        },
+        children: label
+      });
+    };
+    return fn;
+  }, [itemMap, inexistent, text, color, reserved, inexistentItemMap, value]);
+  var _useSortable = useSortable({
+      id: value
+    }),
+    setNodeRef = _useSortable.setNodeRef,
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging;
+  var style = transform ? {
+    transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0)"),
+    transition: isDragging ? 'unset' : transition
+  } : {
+    transition: 'unset'
+  };
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    ref: setNodeRef,
+    style: style
+  }, attributes), {}, {
+    className: "mc-tree-panel__selected-item",
+    children: [sortable && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, listeners), {}, {
+      className: "mc-tree-panel__selected-item__drag",
+      type: "text",
+      icon: /*#__PURE__*/_jsx(MenuOutlined, {})
+    })), /*#__PURE__*/_jsx(Typography.Paragraph, {
+      style: {
+        margin: '0 auto 0 4px'
+      },
+      ellipsis: {
+        tooltip: _label(true)
+      },
+      children: _label()
+    }), /*#__PURE__*/_jsx(McIconFont, {
+      className: "mc-tree-panel__selected-item__remove",
+      type: "icon-CloseOutlined",
+      onClick: onRemove
+    }), !itemMap[value] && reserved && /*#__PURE__*/_jsx("div", {
+      className: "mc-group-panel__selected-item--disabled"
+    })]
+  }));
+};
+export default /*#__PURE__*/memo(SelectedItem);

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

@@ -0,0 +1,6 @@
+/**
+ * title: 基本使用
+ * description: 设置 `disabled` 为 `true` 则禁止编辑
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McTreePanel/demo/base.js

@@ -0,0 +1,45 @@
+/**
+ * title: 基本使用
+ * description: 设置 `disabled` 为 `true` 则禁止编辑
+ */
+
+import { Space } from 'antd';
+import { McTreePanel } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  var options = [{
+    title: '部门1',
+    key: 1,
+    children: [{
+      title: '部门1-1',
+      key: 11
+    }, {
+      title: '部门1-2',
+      key: 12
+    }]
+  }, {
+    title: '部门2',
+    key: 2,
+    children: [{
+      title: '部门2-1',
+      key: 21
+    }, {
+      title: '部门2-2',
+      key: 22
+    }]
+  }];
+  return /*#__PURE__*/_jsxs(Space, {
+    direction: "vertical",
+    size: 16,
+    style: {
+      width: '100%'
+    },
+    children: [/*#__PURE__*/_jsx(McTreePanel, {
+      treeData: options
+    }), /*#__PURE__*/_jsx(McTreePanel, {
+      disabled: true,
+      treeData: options
+    })]
+  });
+});

package/dist/McTreePanel/demo/fieldNames.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 使用 fieldNames
+ * description: 设置 `fieldNames` 来自定义节点 title、key、children 的字段
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McTreePanel/demo/fieldNames.js

@@ -0,0 +1,37 @@
+/**
+ * title: 使用 fieldNames
+ * description: 设置 `fieldNames` 来自定义节点 title、key、children 的字段
+ */
+
+import { McTreePanel } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var options = [{
+    label: '部门1',
+    value: 1,
+    children: [{
+      label: '部门1-1',
+      value: 11
+    }, {
+      label: '部门1-2',
+      value: 12
+    }]
+  }, {
+    label: '部门2',
+    value: 2,
+    children: [{
+      label: '部门2-1',
+      value: 21
+    }, {
+      label: '部门2-2',
+      value: 22
+    }]
+  }];
+  return /*#__PURE__*/_jsx(McTreePanel, {
+    treeData: options,
+    fieldNames: {
+      title: 'label',
+      key: 'value'
+    }
+  });
+});

package/dist/McTreePanel/demo/inexistent.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 不存在值的回显
+ * description: 设置 `inexistent` 为 `true` 处理不存在值的回显
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McTreePanel/demo/inexistent.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 不存在值的回显
+ * description: 设置 `inexistent` 为 `true` 处理不存在值的回显
+ */
+
+import { Col, Space } from 'antd';
+import { McTreePanel } from "../..";
+import { useState } from 'react';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState([100]),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var options = [{
+    title: '部门1',
+    key: 1,
+    children: [{
+      title: '部门1-1',
+      key: 11
+    }, {
+      title: '部门1-2',
+      key: 12
+    }]
+  }, {
+    title: '部门2',
+    key: 2,
+    children: [{
+      title: '部门2-1',
+      key: 21
+    }, {
+      title: '部门2-2',
+      key: 22
+    }]
+  }];
+  var handelChange = function handelChange(v) {
+    setValue(v);
+  };
+  return /*#__PURE__*/_jsxs(Space, {
+    direction: "vertical",
+    size: 16,
+    style: {
+      width: '100%'
+    },
+    children: [/*#__PURE__*/_jsxs(Col, {
+      children: ["\u5F53\u524D\u503C\uFF1A", JSON.stringify(value !== null && value !== void 0 ? value : [])]
+    }), /*#__PURE__*/_jsx(McTreePanel, {
+      treeData: options,
+      value: value,
+      inexistent: true,
+      onChange: handelChange
+    })]
+  });
+});

package/dist/McTreePanel/demo/labelInValue.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 使用 labelInValue
+ * description: 设置 `labelInValue` 为 `true` 把每个选项的title等信息包装到value中
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McTreePanel/demo/labelInValue.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 使用 labelInValue
+ * description: 设置 `labelInValue` 为 `true` 把每个选项的title等信息包装到value中
+ */
+
+import { Col, Space } from 'antd';
+import { McTreePanel } from "../..";
+import { useState } from 'react';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var options = [{
+    title: '部门1',
+    key: 1,
+    children: [{
+      title: '部门1-1',
+      key: 11
+    }, {
+      title: '部门1-2',
+      key: 12
+    }]
+  }, {
+    title: '部门2',
+    key: 2,
+    children: [{
+      title: '部门2-1',
+      key: 21
+    }, {
+      title: '部门2-2',
+      key: 22
+    }]
+  }];
+  var handelChange = function handelChange(v) {
+    setValue(v);
+  };
+  return /*#__PURE__*/_jsxs(Space, {
+    direction: "vertical",
+    size: 16,
+    style: {
+      width: '100%'
+    },
+    children: [/*#__PURE__*/_jsxs(Col, {
+      children: ["\u5F53\u524D\u503C\uFF1A", JSON.stringify(value !== null && value !== void 0 ? value : [])]
+    }), /*#__PURE__*/_jsx(McTreePanel, {
+      treeData: options,
+      labelInValue: true,
+      value: value,
+      onChange: handelChange
+    })]
+  });
+});

package/dist/McTreePanel/demo/sortable.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 已选项拖拽排序
+ * description: 设置 `sortable` 为 `true` 实现已选项可拖拽排序
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McTreePanel/demo/sortable.js

@@ -0,0 +1,34 @@
+/**
+ * title: 已选项拖拽排序
+ * description: 设置 `sortable` 为 `true` 实现已选项可拖拽排序
+ */
+
+import { McTreePanel } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var options = [{
+    title: '部门1',
+    key: 1,
+    children: [{
+      title: '部门1-1',
+      key: 11
+    }, {
+      title: '部门1-2',
+      key: 12
+    }]
+  }, {
+    title: '部门2',
+    key: 2,
+    children: [{
+      title: '部门2-1',
+      key: 21
+    }, {
+      title: '部门2-2',
+      key: 22
+    }]
+  }];
+  return /*#__PURE__*/_jsx(McTreePanel, {
+    treeData: options,
+    sortable: true
+  });
+});

package/dist/McTreePanel/index.css

@@ -0,0 +1,110 @@
+.mc-tree-panel {
+  width: 100%;
+  height: 382px;
+}
+.mc-tree-panel__wrapper {
+  height: calc(100% - 40px);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 8px;
+  -moz-column-gap: 8px;
+  column-gap: 8px;
+}
+.mc-tree-panel__card-header {
+  height: 40px;
+  background: #fafafa;
+  padding: 0 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+.mc-tree-panel__card-title {
+  color: rgba(0, 0, 0, 0.847);
+  font-weight: 600;
+}
+.mc-tree-panel__card-body {
+  height: calc(100% - 40px);
+  overflow: auto;
+  padding: 8px;
+}
+.mc-tree-panel__options {
+  border-radius: 4px;
+  border: 1px solid #ebebeb;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.mc-tree-panel__selected {
+  border-radius: 4px;
+  border: 1px solid #ebebeb;
+  overflow: hidden;
+  width: 240px;
+  position: relative;
+}
+.mc-tree-panel__selected-item {
+  width: 208px;
+  height: 40px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 8px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.mc-tree-panel__selected-item:not(:first-child) {
+  margin-top: 8px;
+}
+.mc-tree-panel__selected-item__drag {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  color: #8c8c8c;
+  padding: 5px 0 3px;
+}
+.mc-tree-panel__selected-item__drag:hover {
+  background: rgba(38, 38, 38, 0.15) !important;
+  cursor: move;
+}
+.mc-tree-panel__selected-item__remove {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  color: #8c8c8c;
+  margin-left: 8px;
+}
+.mc-tree-panel__selected-item__remove:hover {
+  cursor: pointer;
+  color: #262626;
+}
+.mc-tree-panel__selected-item--disabled {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9;
+  border-radius: 4px;
+  background: rgba(246, 246, 246, 0.66);
+  cursor: no-drop;
+}
+.mc-tree-panel__selected--disabled {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9;
+  border-radius: 4px;
+  background: rgba(228, 228, 228, 0.3);
+  cursor: no-drop;
+}

package/dist/McTreePanel/index.d.ts

@@ -0,0 +1,27 @@
+import { TreeDataNode } from 'antd';
+import { CSSProperties, FC } from 'react';
+import './index.less';
+type Inexistent = {
+    text?: string;
+    color?: string;
+    reserved?: boolean;
+};
+type PropsType = {
+    style?: CSSProperties;
+    className?: string;
+    treeData?: TreeDataNode[];
+    fieldNames?: {
+        key?: string;
+        title?: string;
+        children?: string;
+    };
+    disabled?: boolean;
+    labelInValue?: boolean;
+    inexistent?: boolean | Inexistent;
+    sortable?: boolean;
+    value?: any[];
+    onChange?: (value?: any[]) => void;
+    [key: string]: any;
+};
+declare const McTreePanel: FC<PropsType>;
+export default McTreePanel;