@zykj2024/much-library 1.1.6 → 1.1.7-beta.10

package/dist/esm/McListSelect/index.less

@@ -0,0 +1,257 @@
+.mcListSelectOptionMixin(@hoverBackground: #F5F5F5) {
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: 0 12px;
+
+  &:hover {
+    background: @hoverBackground;
+  }
+
+  .ant-checkbox + span {
+    width: calc(100% - 16px);
+    padding-right: 0;
+  }
+}
+
+.mc-list-select {
+  width: 100%;
+
+  &__label {
+    position: absolute;
+    top: 0;
+    left: 11px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: #262626;
+    font-size: 14px;
+
+    &::after {
+      margin-left: 2px;
+      content: '\FF1A';
+    }
+
+    &.mc-list-select--disabled {
+      color: rgba(0, 0, 0, 25%);
+      cursor: no-drop;
+    }
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+
+    &.ant-select {
+      .ant-select-selector {
+        padding-left: var(--selector-pl);
+
+        .ant-select-selection-overflow-item-rest .ant-select-selection-item {
+          padding-left: 4px;
+          color: #fff;
+          background: #325cf7;
+
+          .ant-select-selection-item-content {
+            margin-right: 0;
+          }
+        }
+
+        .ant-select-selection-item[title*='「'][title$='」'] {
+          color: var(--inexistent-color);
+        }
+      }
+
+      &.ant-select-single .ant-select-selector .ant-select-selection-search {
+        left: var(--selector-pl);
+      }
+
+      &.ant-select-multiple .ant-select-selector {
+        .ant-select-selection-placeholder {
+          left: var(--selector-pl);
+        }
+
+        .ant-select-selection-search {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &.mc-list-select--inline
+    .ant-select-selection-overflow-item:not(
+      .ant-select-selection-overflow-item-rest,
+      .ant-select-selection-overflow-item-suffix
+    ) {
+    flex: 1;
+    min-width: 0;
+    margin-right: 4px;
+  }
+
+  &__dropdown-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 48px;
+    column-gap: 8px;
+  }
+
+  &-panel {
+    width: 560px;
+    display: flex;
+    height: 400px;
+    column-gap: 8px;
+    position: relative;
+
+    &__title {
+      font-weight: 500;
+    }
+
+    &__card {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+
+      &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 0 12px;
+        background: #fafafa;
+      }
+
+      &__search {
+        padding: 8px 12px;
+
+        .mc-search {
+          width: 100%;
+        }
+      }
+
+      &__checkall {
+        height: 40px;
+
+        &__inner {
+          .mcListSelectOptionMixin(#EAEEFE);
+        }
+      }
+
+      &__footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        height: 40px;
+        padding: 0 7px 0 12px;
+
+        .ant-pagination {
+          width: 100%;
+
+          .ant-pagination-total-text {
+            margin-right: auto;
+          }
+
+          .ant-pagination-item-link {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          .ant-pagination-simple-pager input {
+            background: #f0f2f5;
+
+            &:not(:hover, :focus) {
+              border-color: #f0f2f5;
+            }
+          }
+        }
+      }
+
+      &__left {
+        width: 312px;
+
+        .mc-list-select-panel__card__empty {
+          margin-top: 60px;
+        }
+      }
+
+      &__right {
+        width: 240px;
+
+        .mc-list-select-panel__card__empty {
+          margin-top: 148px;
+        }
+      }
+    }
+
+    &__options {
+      flex: 1;
+      overflow: auto;
+    }
+
+    &__option {
+      .mcListSelectOptionMixin();
+    }
+
+    &__selected-list-wrapper {
+      flex: 1;
+      padding: 8px;
+      overflow: auto;
+    }
+
+    &__selected-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    &__selected-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 40px;
+      padding: 0 8px;
+      overflow: hidden;
+      background: #f5f5f5;
+      border-radius: 4px;
+
+      &__drag {
+        flex-shrink: 0;
+        margin-left: -4px;
+        color: #8c8c8c;
+
+        &:hover {
+          background: rgba(38, 38, 38, 15%) !important;
+          cursor: move;
+        }
+      }
+
+      &__remove {
+        flex-shrink: 0;
+        margin-left: 8px;
+        color: #8c8c8c;
+
+        &:hover {
+          color: #262626;
+          cursor: pointer;
+        }
+      }
+    }
+
+    &--disabled {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 9;
+      background: rgba(228, 228, 228, 30%);
+      border-radius: 4px;
+      cursor: no-drop;
+    }
+  }
+}

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

@@ -64,7 +64,7 @@ export declare const McModalContext: React.Context<McModalStore>;
 declare let dispatch: React.Dispatch<McModalAction>;
 export declare const reducer: (state: McModalStore | undefined, action: McModalAction) => McModalStore;
 declare function getModal(modalId: string): React.FC<any> | undefined;
-export declare const register: <T extends React.FC<any>>(id: string, comp: T, props?: Partial<McModalArgs<T>> | undefined) => void;
+export declare const register: <T extends React.FC<any>>(id: string, comp: T, props?: Partial<McModalArgs<T>>) => void;
 type McModalArgs<T> = T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any> ? React.ComponentProps<T> : Record<string, unknown>;
 export declare function show<T extends any, C extends any, P extends Partial<McModalArgs<React.FC<C>>>>(modal: React.FC<C>, args?: P): Promise<T>;
 export declare function show<T extends any>(modal: string, args?: Record<string, unknown>): Promise<T>;
@@ -152,7 +152,7 @@ declare const McModal: {
     }) => import("react/jsx-runtime").JSX.Element;
     McModalContext: React.Context<McModalStore>;
     create: <P extends {}>(Comp: React.ComponentType<P>) => React.FC<P & McModalHocProps>;
-    register: <T extends React.FC<any>>(id: string, comp: T, props?: Partial<McModalArgs<T>> | undefined) => void;
+    register: <T extends React.FC<any>>(id: string, comp: T, props?: Partial<McModalArgs<T>>) => void;
     getModal: typeof getModal;
     show: typeof show;
     hide: typeof hide;

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

@@ -3,10 +3,10 @@ import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Button } from 'antd';
 import { McIconFont } from "./..";
+import { Button } from 'antd';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import "./index.css";
+import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var getHours = function getHours() {

package/dist/esm/McPeriodSelect/index.less

@@ -0,0 +1,187 @@
+.mc-period-select {
+  width: 960px;
+  background: #fff;
+  border: 1px solid #ebebeb;
+  border-radius: 4px;
+
+  &__header {
+    display: flex;
+    height: 68px;
+    color: rgba(0, 0, 0, 84.7%);
+    font-weight: bold;
+    font-size: 14px;
+    border-bottom: 1px solid #ebebeb;
+  }
+
+  &__title {
+    flex-shrink: 0;
+    width: 95px;
+    line-height: 68px;
+    text-align: center;
+    border-right: 1px solid #ebebeb;
+  }
+
+  &__subtitle-box {
+    flex: 1;
+  }
+
+  &__time-bar {
+    display: flex;
+    border-bottom: 1px solid #ebebeb;
+
+    div {
+      flex: 1;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+
+      &:last-child {
+        border-left: 1px solid #ebebeb;
+      }
+    }
+  }
+
+  &__hour-bar {
+    display: flex;
+
+    div {
+      width: 36px;
+      height: 27px;
+      color: rgba(0, 0, 0, 65%);
+      font-weight: normal;
+      font-size: 12px;
+      line-height: 27px;
+      text-align: center;
+    }
+  }
+
+  &__body {
+    display: flex;
+  }
+
+  &__side-bar {
+    width: 95px;
+    border-right: 1px solid #ebebeb;
+
+    div {
+      height: 52px;
+      color: rgba(0, 0, 0, 65%);
+      line-height: 52px;
+      text-align: center;
+      background: #f9f9f9;
+      border-bottom: 1px solid #ebebeb;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  &__wrapper {
+    flex: 1;
+  }
+
+  &__day {
+    display: flex;
+
+    &:last-child .mc-period-select__item {
+      border-bottom: 0;
+    }
+  }
+
+  &__item {
+    position: relative;
+    flex: 1;
+    height: 52px;
+    background: #f9f9f9;
+    border-right: 1px solid #ebebeb;
+    border-bottom: 1px solid #ebebeb;
+
+    &__mask {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: none;
+      background: #91caff;
+      opacity: 0.5;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    &.mc-period-select__item--selected {
+      background: #325cf7;
+    }
+
+    &.mc-period-select__item--active .mc-period-select__item__mask {
+      display: block;
+    }
+  }
+
+  &__footer {
+    padding: 24px;
+    border-top: 1px solid #ebebeb;
+  }
+
+  &__action-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: rgba(0, 0, 0, 42.8%);
+  }
+
+  &__selected-item {
+    display: flex;
+    margin-top: 16px;
+    padding: 5px 8px;
+    color: rgba(0, 0, 0, 85%);
+    line-height: 22px;
+    background: #f5f5f5;
+    border-radius: 4px;
+
+    &__title {
+      flex-shrink: 0;
+      margin-right: 8px;
+    }
+
+    &__content {
+      flex: 1;
+      margin-right: 16px;
+    }
+
+    &__remove {
+      height: 22px;
+      margin-left: auto;
+      color: #8c8c8c;
+
+      &:hover {
+        color: #262626;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.mc-period-select.mc-period-select--disabled {
+  position: relative;
+  user-select: none;
+  // pointer-events: none;
+}
+
+.mc-period-select.mc-period-select--disabled::before {
+  position: absolute;
+  display: block;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 4%);
+  cursor: not-allowed;
+  content: '';
+  // pointer-events: none;
+}

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

@@ -1,8 +1,8 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["title", "description", "btnText", "btnProps", "children", "placement", "disabled", "onConfirm"];
+import { WarningFilled } from '@zykj2024/much-icons';
 import { Button, Popconfirm } from 'antd';
-import { WarningFilled } from 'much-icons';
 import React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var McPopoverButton = function McPopoverButton(_ref) {

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

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useMemo } from 'react';
 import { DEFAULT_MAP } from "./default";
 import Icon from "./icon";
-import "./index.css";
+import "./index.less";
 
 // UI设计稿：https://mastergo.com/file/124592686063679?fileOpenFrom=project
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/esm/McResult/index.less

@@ -0,0 +1,18 @@
+.mc-result {
+  display: flex;
+  justify-content: center;
+  column-gap: 20px;
+
+  .mc-result-main {
+    .status {
+      margin-bottom: 8px;
+    }
+
+    .title {
+      margin-bottom: 16px;
+      color: #262626;
+      font-weight: bold;
+      font-size: 20px;
+    }
+  }
+}

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

@@ -1,7 +1,7 @@
-import { SearchOutlined } from 'much-icons';
+import { SearchOutlined } from '@zykj2024/much-icons';
 import { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
 import McInput from "../../../McInput";
-import "./index.css";
+import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 var PanelSearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var placeholder = _ref.placeholder,

package/dist/{McSelect/components/PanelSearchInput/index.css → esm/McSelect/components/PanelSearchInput/index.less}

@@ -1,6 +1,7 @@
 .mc-search-input__container {
   margin: 8px;
 }
+
 .mc-search-input {
   width: '100%';
 }

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

@@ -1,6 +1,15 @@
 import { SelectProps } from 'antd';
 import { CSSProperties, FC, ReactNode } from 'react';
 import './index.less';
+export type FetchOptions = (params: {
+    current: number;
+    pageSize: number;
+    keyword?: string;
+    extra?: any;
+}) => Promise<{
+    data: Option[];
+    total: number;
+}>;
 export interface Option {
     value: string | number;
     label?: React.ReactNode;
@@ -9,34 +18,39 @@ export interface Option {
     [key: string]: any;
 }
 type Inexistent = {
+    /** 不存在值的文字描述，默认'不存在' */
     inexistentText?: string;
+    /** 不存在值的文字颜色，默认'#ff4d4f' */
     inexistentColor?: string;
+    /** 是否保留原值，默认false（若为true，则在执行不存在值的判断逻辑时，不向外抛出undefined） */
     reserveOriginalValue?: boolean;
 };
-export type FetchOptions = (params: {
-    current: number;
-    pageSize: number;
-    keyword?: string;
-    extra?: any;
-}) => Promise<{
-    data: Option[];
-    total: number;
-}>;
-export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames'> & {
+export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames' | 'prefix'> & {
     style?: CSSProperties;
     className?: string;
     /** 外部控制展示的options */
     toFilterOptions?: (options: Option[]) => Option[];
+    /** 查询项的字段名（配合McContainer组件的查询功能使用） */
     name?: string;
+    /** 查询项的标签文字（若未设置，样式为表单项形态） */
     label?: ReactNode;
+    /** label是否显示冒号，默认true显示 */
+    colon?: boolean;
+    /** 是否多选，默认false */
     multiple?: boolean;
+    /** 下拉列表隐藏时触发onChange事件，默认false（多选时生效） */
     changeOnHidden?: boolean;
+    /** 是否执行不存在值的判断逻辑，默认false */
     inexistent?: boolean | Inexistent;
+    /** 异步分页查询备选项的方法（设置了该项，则原options无效，且不执行不存在值的判断逻辑） */
     fetchOptions?: FetchOptions;
+    /** 分页大小，默认20 */
     pageSize?: number;
+    /** 分页查询的的额外参数（当额外参数变化时会触发重置查询） */
     extra?: any;
+    /** 备选项 */
     options?: Option[];
-    /** 仅多选生效。默认为false，在下拉框中展示搜索框，会影响回车生成新标签等功能 */
+    /** 仅多选生效。默认为false，在下拉框中展示搜索框，会影响回车生成新标签等功能  */
     searchInPanel?: boolean;
     /** 搜索框提示文字 */
     searchInPanelPlaceholder?: string;