@jiaozhiye/qm-design-react 1.0.0-beta.2 → 1.0.0-beta.20

package/lib/_utils/dom.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, Nullable } from './types';
+import type { CSSProperties, Nullable } from './types';
 export declare const on: (element: Element | HTMLElement | Document | Window, event: string, handler: EventListenerOrEventListenerObject) => void;
 export declare const off: (element: Element | HTMLElement | Document | Window, event: string, handler: EventListenerOrEventListenerObject) => void;
 export declare const once: (el: HTMLElement, event: string, fn: EventListener) => void;
@@ -66,3 +66,10 @@ export declare const getParentNode: (el: HTMLElement, selector: string) => Nulla
  * @returns boolean
  */
 export declare const contains: (el: HTMLElement, container: HTMLElement) => boolean;
+/**
+ * @description 滚动到指定位置，动画效果
+ * @param {HTMLNode} el 带滚动条元素
+ * @param {number} t 滚动条上边距
+ * @returns
+ */
+export declare const scrollToY: (el: HTMLElement, t: number) => void;

package/lib/_utils/util.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { isNumber, isString, isUndefined, isFunction, isArray, isPlainObject as isObject, debounce, throttle, get } from 'lodash-es';
-import { AnyFunction, AnyObject } from './types';
+import type { AnyFunction, AnyObject } from './types';
 export { isNumber, isString, isArray, isUndefined, isFunction, isObject, debounce, throttle, get };
 export declare const isIE: () => boolean;
 export declare const isEdge: () => boolean;

package/lib/anchor/src/anchor-item.d.ts

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CSSProperties } from '../../_utils/types';
+import type { CSSProperties } from '../../_utils/types';
 declare type IProps = {
     label: string;
     showDivider?: boolean;

package/lib/anchor/src/anchor-nav.d.ts

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { AnyFunction } from '../../_utils/types';
+import type { AnyFunction } from '../../_utils/types';
 declare type IProps = {
     activeKey: number;
     labels: string[];

package/lib/anchor/src/anchor.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { ComponentSize, CSSProperties } from '../../_utils/types';
+import type { ComponentSize, CSSProperties } from '../../_utils/types';
 declare type ILabelItem = {
     id: string;
     label: string;

package/lib/countup/src/countup.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { CountUpProps } from 'react-countup/build/CountUp';
-import { ComponentSize, CSSProperties } from '../../_utils/types';
+import type { ComponentSize, CSSProperties } from '../../_utils/types';
 declare type IProps = CountUpProps & {
     size?: ComponentSize;
     className?: string;

package/lib/cropper/src/cropper.d.ts

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CSSProperties, AnyObject, AnyFunction } from '../../_utils/types';
+import type { CSSProperties, AnyObject, AnyFunction } from '../../_utils/types';
 declare type IProps = {
     src: string;
     alt?: string;

package/lib/divider/src/divider.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { ComponentSize, CSSProperties, JSXElement } from '../../_utils/types';
+import type { ComponentSize, CSSProperties, JSXElement } from '../../_utils/types';
 declare type IProps = {
     label: string;
     size?: ComponentSize;

package/lib/download/src/download.d.ts

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import type { AnyFunction, AnyObject } from '../../_utils/types';
 import type { ButtonProps } from '../../antd';
-import { AnyFunction, AnyObject } from '../../_utils/types';
 declare type HttpRequestHeader = {
     [key: string]: string;
 };

package/lib/drawer/src/drawer.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { ComponentSize } from '../../_utils/types';
+import type { ComponentSize } from '../../_utils/types';
 import type { DrawerProps } from '../../antd';
 declare type IProps = DrawerProps & {
     size?: ComponentSize;

package/lib/drawer/style/index.less

@@ -1,77 +1,79 @@
-/*
- * @Author: 焦质晔
- * @Date: 2021-07-23 19:05:57
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2021-08-05 15:57:45
- */
-@import '../../style/common';
-
-@prefix-drawer: ~'@{qm-prefix}-drawer';
-
-.@{prefix-drawer} {
-  .ant-drawer-header {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    height: 44px;
-    padding: 0 15px;
-    border-bottom: 1px solid @--border-color-secondary;
-    .ant-drawer-title {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      justify-content: space-between;
-      padding-right: 20px;
-      .full-screen {
-        padding: @--padding-md 5px @--padding-md @--padding-md;
-        color: @--text-color-secondary;
-        transition: all 0.3s ease;
-        &:hover {
-          color: @--text-color;
-        }
-      }
-    }
-    .ant-drawer-close {
-      top: auto;
-      font-size: 17px;
-      padding: @--padding-md 15px @--padding-md 5px;
-    }
-  }
-  .ant-drawer-body {
-    padding: @--padding-md;
-  }
-  &-spin {
-    position: absolute;
-    top: 44px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(255, 255, 255, 0.65);
-    z-index: 9999;
-    .ant-spin-text {
-      margin-top: 4px;
-    }
-  }
-  // ------ size ------
-  // 52  48  44
-  &--lg {
-    .ant-drawer-header {
-      height: 48px;
-    }
-    .qm-drawer-spin {
-      top: 48px;
-    }
-  }
-  &--sm {
-    .ant-drawer-header {
-      height: 40px;
-    }
-    .qm-drawer-spin {
-      top: 40px;
-    }
-  }
-}
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-08-05 15:57:45
+ */
+@import '../../style/common';
+
+@prefix-drawer: ~'@{qm-prefix}-drawer';
+
+.@{prefix-drawer} {
+  .ant-drawer-header {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    height: 44px;
+    padding: 0 15px;
+    border-bottom: 1px solid @--border-color-secondary;
+    .ant-drawer-title {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: 20px;
+      .full-screen {
+        padding: @--padding-md 5px @--padding-md @--padding-md;
+        color: @--text-color-secondary;
+        line-height: 1;
+        transition: all 0.3s ease;
+        &:hover {
+          color: @--text-color;
+        }
+      }
+    }
+    .ant-drawer-close {
+      position: absolute;
+      right: -8px;
+      font-size: 17px;
+      padding: @--padding-md;
+    }
+  }
+  .ant-drawer-body {
+    padding: @--padding-md;
+  }
+  &-spin {
+    position: absolute;
+    top: 44px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.65);
+    z-index: 9999;
+    .ant-spin-text {
+      margin-top: 4px;
+    }
+  }
+  // ------ size ------
+  // 52  48  44
+  &--lg {
+    .ant-drawer-header {
+      height: 48px;
+    }
+    .qm-drawer-spin {
+      top: 48px;
+    }
+  }
+  &--sm {
+    .ant-drawer-header {
+      height: 40px;
+    }
+    .qm-drawer-spin {
+      top: 40px;
+    }
+  }
+}

package/lib/empty/src/empty.d.ts

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { ComponentSize } from '../../_utils/types';
+import type { ComponentSize } from '../../_utils/types';
 import type { EmptyProps } from '../../antd';
 declare type IProps = EmptyProps & {
     size?: ComponentSize;

package/lib/form/src/form-cascader.d.ts

@@ -14,7 +14,7 @@ declare class FormCascader extends Component<IProps, IState> {
     state: IState;
     componentDidMount(): void;
     componentDidUpdate(prevProps: IProps): void;
-    createViewText(val: string | undefined, items: IDict[]): string;
+    createViewText(val: string | string[], items: IDict[]): string;
     getItemList(): Promise<void>;
     render(): React.ReactElement;
 }

package/lib/form/src/form-input-number.d.ts

@@ -5,6 +5,7 @@ declare type IProps = {
 };
 declare class FormInputNumber extends Component<IProps> {
     static contextType: React.Context<import("./context").IFormContext | undefined>;
+    focus: () => void;
     render(): React.ReactElement;
 }
 export default FormInputNumber;

package/lib/form/src/form-input.d.ts

@@ -3,8 +3,20 @@ import type { IFormItem } from './types';
 declare type IProps = {
     option: IFormItem;
 };
+declare type IInputProps<T = string> = IProps & {
+    value?: T;
+    onChange?: (value: T) => void;
+    onValuesChange: (value: T) => void;
+};
+declare class VInput extends Component<IInputProps> {
+    static contextType: React.Context<import("./context").IFormContext | undefined>;
+    triggerChange: (value: string) => void;
+    render(): JSX.Element;
+}
 declare class FormInput extends Component<IProps> {
     static contextType: React.Context<import("./context").IFormContext | undefined>;
+    inputRef: React.RefObject<VInput>;
+    focus: () => void;
     render(): React.ReactElement;
 }
 export default FormInput;

package/lib/form/src/form-multiple-search-helper.d.ts

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import type { IFormItem } from './types';
+declare type IProps = {
+    option: IFormItem;
+};
+declare class FormMultipleSearchHelper extends Component<IProps> {
+    static contextType: React.Context<import("./context").IFormContext | undefined>;
+    render(): React.ReactElement;
+}
+export default FormMultipleSearchHelper;

package/lib/form/src/form.d.ts

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { IFieldData } from './types';
 import type { IFormProps, IFormData, IFormItem, IExtraData, IViewData, IExpandData } from './types';
-import { JSXElement, ValueOf } from '../../_utils/types';
+import type { JSXElement, ValueOf } from '../../_utils/types';
 import type { FormProps } from '../../antd';
 declare type IProps = FormProps & IFormProps;
 declare type IState = {
@@ -26,6 +26,7 @@ declare class QmForm extends Component<IProps, IState> {
         initialExtras: import("prop-types").Requireable<object>;
         size: (props: any, propName: any, componentName: any) => void;
         cols: import("prop-types").Requireable<number>;
+        customClass: import("prop-types").Requireable<string>;
         labelWidth: import("prop-types").Requireable<string | number>;
         labelAlign: import("prop-types").Requireable<string>;
         formType: import("prop-types").Requireable<string>;
@@ -59,7 +60,6 @@ declare class QmForm extends Component<IProps, IState> {
         defaultRows: number;
         isAutoFocus: boolean;
         isCollapse: boolean;
-        isFieldsDefine: boolean;
         isSearchBtn: boolean;
         onValuesChange: () => void;
         onFieldsChange: () => void;
@@ -111,11 +111,13 @@ declare class QmForm extends Component<IProps, IState> {
         type: any;
         fieldName: any;
     }): boolean;
+    getFormAuth(): Promise<void>;
     INPUT(option: IFormItem): JSXElement;
     RANGE_INPUT(option: IFormItem): JSXElement;
     INPUT_NUMBER(option: IFormItem): JSXElement;
     RANGE_INPUT_NUMBER(option: IFormItem): JSXElement;
     SEARCH_HELPER(option: IFormItem): JSXElement;
+    MULTIPLE_SEARCH_HELPER(option: IFormItem): JSXElement;
     CHECKBOX(option: IFormItem): JSXElement;
     MULTIPLE_CHECKBOX(option: IFormItem): JSXElement;
     RADIO(option: IFormItem): JSXElement;
@@ -132,6 +134,7 @@ declare class QmForm extends Component<IProps, IState> {
     TREE_SELECT(option: IFormItem): JSXElement;
     MULTIPLE_TREE_SELECT(option: IFormItem): JSXElement;
     CASCADER(option: IFormItem): JSXElement;
+    MULTIPLE_CASCADER(option: IFormItem): JSXElement;
     CITY_SELECT(option: IFormItem): JSXElement;
     REGION_SELECT(option: IFormItem): JSXElement;
     UPLOAD_FILE(option: IFormItem): JSXElement;
@@ -146,6 +149,7 @@ declare class QmForm extends Component<IProps, IState> {
     createFormLayout(): (JSX.Element | null)[];
     createSearchButtonLayout(lastCols?: number): JSX.Element | null;
     createFormButtonLayout(): JSX.Element | null;
+    createFieldsDefine: () => JSX.Element;
     setExpandHandle: (collapse: boolean) => void;
     valuesChangeHandle: (changedValues: IFormData, allValues: IFormData) => void;
     fieldsChangeHandle: (changedFields: IFieldData[], allFields: IFieldData[]) => void;

package/lib/form/src/types.d.ts

@@ -11,9 +11,10 @@ export declare const DEFAULT_TRUE_VALUE = "1";
 export declare const DEFAULT_FALSE_VALUE = "0";
 export declare type ILabelAlign = 'left' | 'right';
 export declare type IFormType = 'default' | 'search' | 'onlyShow';
-export declare type IFormItemType = 'DIVIDER' | 'INPUT' | 'TEXT_AREA' | 'RANGE_INPUT' | 'INPUT_NUMBER' | 'RANGE_INPUT_NUMBER' | 'CHECKBOX' | 'MULTIPLE_CHECKBOX' | 'RADIO' | 'SWITCH' | 'DATE' | 'RANGE_DATE' | 'TIME' | 'RANGE_TIME' | 'SELECT' | 'MULTIPLE_SELECT' | 'IMMEDIATE' | 'SEARCH_HELPER' | 'TREE_SELECT' | 'MULTIPLE_TREE_SELECT' | 'CASCADER' | 'CITY_SELECT' | 'REGION_SELECT' | 'UPLOAD_FILE' | 'UPLOAD_IMG' | 'TINYMCE';
+export declare type IFormItemType = 'DIVIDER' | 'INPUT' | 'TEXT_AREA' | 'RANGE_INPUT' | 'INPUT_NUMBER' | 'RANGE_INPUT_NUMBER' | 'CHECKBOX' | 'MULTIPLE_CHECKBOX' | 'RADIO' | 'SWITCH' | 'DATE' | 'RANGE_DATE' | 'TIME' | 'RANGE_TIME' | 'SELECT' | 'MULTIPLE_SELECT' | 'IMMEDIATE' | 'SEARCH_HELPER' | 'MULTIPLE_SEARCH_HELPER' | 'TREE_SELECT' | 'MULTIPLE_TREE_SELECT' | 'CASCADER' | 'MULTIPLE_CASCADER' | 'CITY_SELECT' | 'REGION_SELECT' | 'UPLOAD_FILE' | 'UPLOAD_IMG' | 'TINYMCE';
 export declare const ARRAY_TYPE: IFormItemType[];
 export declare const BUILT_IN_PLACEMENTS: BuildInPlacements;
+export declare type ISecretType = 'name' | 'phone' | 'IDnumber' | 'bankCard';
 export declare type IDateType = 'date' | 'datetime' | 'exactdate' | 'week' | 'month' | 'quarter' | 'year';
 export declare enum EDateType {
     'date' = "date",
@@ -33,11 +34,7 @@ export declare enum EDateFormat {
     'quarter' = "YYYY-[Q]Q",
     'year' = "YYYY"
 }
-export declare enum ETimeType {
-    'hour' = "hour",
-    'hour-minute' = "hour-minute",
-    'hour-minute-second' = "hour-minute-second"
-}
+export declare type ITimeType = 'hour' | 'hour-minute' | 'hour-minute-second';
 export declare enum ETimeFormat {
     'hour' = "HH",
     'hour-minute' = "HH:mm",
@@ -61,9 +58,7 @@ export declare type IAuthConfig = {
     fetch: {
         api: IFetchFn;
         params?: IFetchParams;
-        columnDataKey?: string;
-        exportDataKey?: string;
-        printDataKey?: string;
+        dataKey?: string;
     };
 };
 export declare type IFormItem = {
@@ -91,9 +86,12 @@ export declare type IFormItem = {
         prefix?: React.ReactNode;
         suffix?: React.ReactNode;
         maxLength?: number;
+        toUpper?: boolean;
+        secretType?: ISecretType;
         step?: number;
         min?: number;
         max?: number;
+        controls?: boolean;
         precision?: number;
         formatter?: (value: number | string) => string;
         parser?: (value: string) => string | number;
@@ -108,23 +106,27 @@ export declare type IFormItem = {
         minDateTime?: string;
         maxDateTime?: string;
         disableds?: [boolean, boolean];
-        timeType?: ETimeType;
+        timeType?: ITimeType;
         hourStep?: number;
         minuteStep?: number;
         secondStep?: number;
         filterable?: boolean;
         collapseTags?: boolean;
+        maxTagTextLength?: number;
         openPyt?: boolean;
+        hideHeader?: boolean;
         onlySelect?: boolean;
         columns?: IColumn[];
         fieldAliasMap?: (() => Record<string, string>) | Record<string, string>;
         extraAliasMap?: (() => Record<string, string>) | Record<string, string>;
         multiple?: boolean;
         maxCount?: number;
+        fileTypes?: string[];
+        fileSize?: number;
         onRemove?: (file: any) => void;
         fixedSize?: [number, number] | undefined;
         quality?: number;
-        height?: number | string;
+        tinymceHeight?: number | string;
     };
     searchHelper?: {
         filters?: IFormItem[];
@@ -134,6 +136,7 @@ export declare type IFormItem = {
             rowKey?: ((row: IRecord, index: number) => IRowKey) | IRowKey;
             webPagination?: boolean;
         };
+        width?: number | string;
         initialValue?: IFormData;
         closeRemoteMatch?: boolean;
         fieldAliasMap?: (() => Record<string, string>) | Record<string, string>;
@@ -168,6 +171,7 @@ export declare type IFormItem = {
             fieldName: string;
             showLabel?: boolean;
         }>;
+        onCollapse?: (collapse: boolean) => void;
     };
     render?: (options: IFormItem, instance: any) => JSXElement;
     onChange?: (value: ValueOf<IFormData> | boolean, others?: string | Nullable<IFormData>) => void;
@@ -180,6 +184,7 @@ export declare type IFormProps = {
     initialExtras?: IExtraData;
     size?: ComponentSize;
     cols?: number;
+    customClass?: string;
     labelWidth?: number | string;
     labelAlign?: ILabelAlign;
     formType?: IFormType;
@@ -207,6 +212,7 @@ export declare const propTypes: {
     initialExtras: PropTypes.Requireable<object>;
     size: (props: any, propName: any, componentName: any) => void;
     cols: PropTypes.Requireable<number>;
+    customClass: PropTypes.Requireable<string>;
     labelWidth: PropTypes.Requireable<string | number>;
     labelAlign: PropTypes.Requireable<string>;
     formType: PropTypes.Requireable<string>;
@@ -240,7 +246,6 @@ export declare const defaultProps: {
     defaultRows: number;
     isAutoFocus: boolean;
     isCollapse: boolean;
-    isFieldsDefine: boolean;
     isSearchBtn: boolean;
     onValuesChange: () => void;
     onFieldsChange: () => void;

package/lib/form/src/utils.d.ts

@@ -5,3 +5,6 @@ export declare const deepMapList: (list: any[], valueKey: string, textKey: strin
 export declare const deepFind: (arr: any[], mark: string) => any;
 export declare const deepFindValues: <T>(arr: T[], str: string, depth?: number) => T[];
 export declare const deepGetPath: (arr: any[], value: string) => string[] | undefined;
+export declare const formatNumber: (value: string | number) => string;
+export declare const parserNumber: (value: string) => string;
+export declare const secretFormat: (value: string | undefined, type: string) => string;

package/lib/form/style/index.less

@@ -2,7 +2,7 @@
  * @Author: 焦质晔
  * @Date: 2021-07-23 19:05:57
  * @Last Modified by: 焦质晔
- * @Last Modified time: 2022-01-10 10:05:49
+ * @Last Modified time: 2022-02-28 13:36:58
  */
 @import '../../style/common';
 
@@ -14,12 +14,6 @@
     &.ant-form-item-with-help {
       margin-bottom: 0;
     }
-    // label
-    .ant-form-item-label {
-      label[title=''] {
-        width: 100%;
-      }
-    }
     // valigator
     .ant-form-item-explain {
       .text-overflow-cut();
@@ -30,6 +24,10 @@
       font-size: @--font-size-sm;
       line-height: 1;
     }
+    // search
+    .ant-input-search > .ant-input-group > .ant-input-group-addon {
+      line-height: 1;
+    }
     // textarea
     .ant-input-textarea-show-count {
       position: relative;
@@ -47,7 +45,9 @@
       transform: scale(1.2);
     }
     .extra-text {
-      vertical-align: -0.3em;
+      height: 100%;
+      display: flex;
+      align-items: center;
     }
     .extra-overflow-cut {
       .text-overflow-cut();
@@ -71,12 +71,24 @@
     .site-input-right:focus {
       border-left-width: 1px;
     }
+    // select group
+    .ant-input-group > .ant-select:first-child {
+      z-index: 1;
+      .ant-select-selector {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
   }
   // ------ size ------
   // 40  32  24
   &--lg {
   }
   &--sm {
+    .ant-form-item-label > label,
+    .ant-form-item-label .ant-form-item-tooltip {
+      font-size: @--font-size-sm;
+    }
   }
 }
 
@@ -234,10 +246,17 @@
         line-height: 1.75;
         .text-overflow-cut();
         .handle {
-          margin: 0 5px;
+          padding: 2px;
+          color: @--text-color-secondary;
           cursor: s-resize;
+          transform: scale(0.9);
         }
       }
     }
   }
+  &--lg {
+  }
+  &--sm {
+    font-size: @--font-size-sm;
+  }
 }

package/lib/index.d.ts

@@ -38,5 +38,7 @@ export type { QmTableProps, QmTableColumn } from './table';
 export { default as QmTable } from './table';
 export type { QmSearchHelperProps } from './search-helper';
 export { default as QmSearchHelper } from './search-helper';
+export type { QmPrintProps } from './print';
+export { default as QmPrint } from './print';
 export { default as version } from './version';
 export * from './antd';