@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/index-bar/api.md

@@ -0,0 +1,75 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|defaultIndex|默认要激活的索引|ReactText|-|
+|disableSidebar|是否开启侧边栏功能|boolean|false|
+|sticky|是否开启索引的自动吸顶效果|boolean|true|
+|groups|索引栏内容|IndexBarGroupItem\<IndexBarBaseData\>\[\]|-|
+|children|自定义内容的渲染，内容必须是IndexBar\.Group组件|ReactNode|-|
+|tipType|侧边栏索引提示的样式类型 \- sweat 水滴形 \- toast 轻提示 \- none 关闭提示|"none" \| "sweat" \| "toast"|"toast"|
+|scrollDuration|手动调用scrollToIndex时，滚动动画的执行时间|number|0|
+|scrollBezier|手动调用scrollToIndex时，滚动的动画曲线|\[number, number, number, number\]|-|
+|onChange|激活的索引改变时的回调，第一个参数是新的索引，第二个参数是改变方式：\- swipe 手动滑动页面触发变化 \- sidebar 侧边栏点击触发变化 \- manual 手动调用scrollToIndex触发|(index: ReactText, trigger: IndexBarChangeTrigger) =\> void|-|
+|onGroupItemClick|IndexBar\.Group中某个子项被点击时的回调，使用JSX的写法时该回调不会生效，请在IndexBar\.Group上绑定对应属性|(index: ReactText, itemData: IndexBarBaseData, itemIndex: number) =\> void|-|
+|renderSideBarItem|自定义侧边栏每个子项的内容渲染|(index: ReactText) =\> ReactNode|-|
+|renderSideBar|自定义侧边栏渲染|(Content: ReactNode) =\> ReactElement\<any, string \| ((props: any) =\> ReactElement\<any, any\>) \| (new (props: any) =\> Component\<any, any, any\>)\>|-|
+|renderTip|自定义使用侧边栏改变索引时，渲染提示的内容|(index: ReactText) =\> ReactNode|-|
+|renderStickyItem|自定义IndexBar\.Group的索引标题内容渲染，使用JSX的写法时该回调不会生效，请在IndexBar\.Group上绑定对应属性|(index: ReactText) =\> ReactNode|-|
+|renderGroupItem|自定义IndexBar\.Group的子项内容渲染，使用JSX的写法时该回调不会生效，请在IndexBar\.Group上绑定对应属性|(index: ReactText, itemData: IndexBarBaseData, itemIndex: number) =\> ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层 DOM 元素|HTMLDivElement|
+|scrollToIndex|手动滚动到指定的索引位置|(index?: ReactText, rightNow?: boolean) =\> void|
+|recalculatePosition|局部滚动模式下，如果容器外部还有嵌套滚动，可主动调用此方法，让 sticky 的元素主动更新 fixed 位置|(index?: ReactText) =\> void|
+
+> IndexBar.Group
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|children|自定义内容的渲染，有自定义内容优先渲染自定义内容，否则渲染list传递的数据|ReactNode|-|
+|listKey|自定义提取List的key作为列表渲染的key，默认选取listItem的所在数组位置|(data: IndexBarBaseData, listItemIndex: number) =\> ReactText|-|
+|onGroupItemClick|IndexBar\.Group中某个子项被点击时的回调|(index: ReactText, itemData: IndexBarBaseData, itemIndex: number) =\> void|-|
+|renderStickyItem|自定义IndexBar\.Group的索引标题内容渲染|(index: ReactText) =\> ReactNode|-|
+|renderGroupItem|自定义IndexBar\.Group的子项内容渲染|(index: ReactText, itemData: IndexBarBaseData, itemIndex: number) =\> ReactNode|-|
+|index|IndexBarGroup对应的索引|ReactText|必填|
+|list|IndexBarGroup中要渲染的列表数据，如果已经传递了children这个属性，则list这个属性不会生效|IndexBarBaseData\[\]|-|
+
+> IndexBarGroupItem
+
+|参数|描述|类型|
+|----------|-------------|------|
+|Data|-|any|
+|index|IndexBarGroup对应的索引|ReactText|
+|list|IndexBarGroup中要渲染的列表数据，如果已经传递了children这个属性，则list这个属性不会生效|IndexBarBaseData\[\]|
+
+> IndexBarBaseData
+
+|参数|描述|类型|
+|----------|-------------|------|
+|content|内容|ReactNode|
+
+> IndexBarTipType
+
+```
+"none" | "sweat" | "toast"
+```
+
+> IndexBarChangeTrigger
+
+```
+"swipe" | "manual" | "sidebar"
+```
+
+> IndexBarGroupRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件外层dom元素|HTMLDivElement|

package/metaData/components/index-bar/style.md

@@ -0,0 +1,122 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-index-bar {
+    position: relative;
+    .use-var(background, index-bar-background);
+    overflow: hidden;
+    &-container {
+        height: 100%;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    &-group {
+        &-active {
+            .use-var(color, index-bar-group-active-color);
+        }
+        &-title {
+            .use-var-with-rtl(padding-left, index-bar-group-left-spacing);
+            .use-var(height, index-bar-group-title-height);
+            .use-var(background, index-bar-group-title-background);
+            .use-var(font-size, index-bar-group-title-font-size);
+            .use-var(color, index-bar-group-title-font-color);
+            display: flex;
+            align-items: center;
+        }
+        &-item {
+            .use-var(height, index-bar-group-item-height);
+            display: flex;
+            align-items: center;
+            .use-var-with-rtl(margin-left, index-bar-group-left-spacing);
+            .use-var(font-size, index-bar-group-item-font-size);
+
+            &:not(:last-child) {
+                .onepx-border-var(bottom, line-color);
+            }
+        }
+    }
+
+    &-sidebar {
+        position: absolute;
+        z-index: 2;
+        .set-prop-with-rtl(right, 0);
+        top: 50%;
+        transform: translateY(-50%) translateZ(0);
+        user-select: none;
+
+        &-touching {
+            width: 100%;
+        }
+
+        &-item {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            position: relative;
+            .use-var(padding, index-bar-sidebar-item-padding);
+            cursor: pointer;
+
+            &-wrapper {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                .use-var(width, index-bar-sidebar-item-width);
+                .use-var(font-size, index-bar-sidebar-item-font-size);
+                .use-var(line-height, index-bar-sidebar-item-line-height);
+            }
+
+            &:last-child {
+                padding-bottom: 0px;
+            }
+        }
+        &-active {
+            .use-var(color, index-bar-sidebar-active-color);
+        }
+
+        &-sweat {
+            position: absolute;
+            .use-var(height, index-bar-sidebar-sweat-radius);
+            .use-var(min-width, index-bar-sidebar-sweat-radius);
+            .use-var(line-height, index-bar-sidebar-sweat-radius);
+            border-radius: 9999px;
+            text-align: center;
+            .use-var(padding, index-bar-sidebar-sweat-padding);
+            .use-var(background, index-bar-sidebar-sweat-background);
+            .use-var-with-rtl(right, index-bar-sidebar-sweat-right);
+            .use-var(font-size, index-bar-sidebar-sweat-font-size);
+            .use-var(color, index-bar-sidebar-sweat-color);
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                .use-var-with-rtl(right, index-bar-sidebar-sweat-triangle-position);
+                width: 0;
+                height: 0;
+                .use-var(border, index-bar-sidebar-sweat-triangle-border);
+                .use-var-with-rtl(border-left-color, index-bar-sidebar-sweat-background);
+                border-radius: 4px;
+            }
+        }
+
+        &-toast {
+            position: absolute;
+            .use-var(background, index-bar-sidebar-toast-background);
+            .use-var(color, index-bar-sidebar-toast-color);
+            left: 50%;
+            top: 50%;
+            .use-var(min-width, index-bar-sidebar-toast-height);
+            .use-var(height, index-bar-sidebar-toast-height);
+            .use-var(line-height, index-bar-sidebar-toast-height);
+            transform: translate(-50%, -50%);
+            text-align: center;
+            .use-var(padding, index-bar-sidebar-toast-padding);
+            .use-var(font-size, index-bar-sidebar-toast-font-size);
+            .use-var(border-radius, index-bar-sidebar-toast-radius);
+        }
+    }
+}

package/metaData/components/input/api.md

@@ -0,0 +1,52 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|type|输入框类型|string|"text"|
+|pattern|检查控件值的正则表达式|string|-|
+|inputClass|输入框dom自定义类名|string|-|
+|inputStyle|输入框dom自定义样式|CSSProperties|-|
+|nativeProps|其他未列出的原生属性，优先级低于已列出的组件属性|InputHTMLAttributes\<HTMLInputElement\>|-|
+|ariaLabel|无障碍label|string|-|
+|id|输入框的id|string|-|
+|name|输入框的name|string|-|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|value|绑定值，传入即受控|string|-|
+|defaultValue|默认值|string|-|
+|maxLength|最大输入长度|number|-|
+|border|边框展示类型|"all" \| "half" \| "bottom" \| "none"|"half"|
+|placeholder|占位文本|string|-|
+|disabled|输入框是否禁用|boolean|-|
+|readOnly|是否只读|boolean|-|
+|autoFocus|是否自动获取焦点，开启后会触发一次onClick事件|boolean|-|
+|blockChangeWhenCompositing|当 ios 输入中文时，输拼音的过程不触发onChange，仅确认选择后触发|boolean|false|
+|label|输入框左侧文本|ReactNode|-|
+|required|是否必填项|boolean|-|
+|validator|正则验证，不符合验证的不允许输入|RegExp \| ((value: string) =\> boolean)|-|
+|prepend|输入框头部内容，在输入框外部|ReactNode \| ((focusing: boolean, inputValue: string) =\> ReactNode)|-|
+|append|输入框尾部内容，在输入框外部|ReactNode \| ((focusing: boolean, inputValue: string) =\> ReactNode)|-|
+|blurBeforeFocus|在聚焦之前blur掉，即切换不同input时会重新弹起键盘，常用于input type切换时重新加载键盘，安卓上有效|boolean|-|
+|clearable|是否有清除按钮|boolean|-|
+|clearShowType|清除按钮展示时机：focus \- 聚焦时展示 value \- 有值则展示 always \- 始终展示|"focus" \| "value" \| "always"|"focus"|
+|preventEventWhenClearing|在聚焦模式下点击清除按钮时，是否要屏蔽对应产生的onBlur和onFocus事件|boolean|true|
+|clearIcon|清除按钮类型，也可自定义|ReactNode|\<IconClear className="clear-icon" /\>|
+|onClear|按下清除按钮回调|(e: TouchEvent\<HTMLElement\>) =\> void|-|
+|prefix|输入框前置内容，在输入框内部，也可自定义|ReactNode|-|
+|suffix|输入框后置内容，在输入框内部，也可自定义|ReactNode|-|
+|onChange|数据改变时触发（失去焦点时）|(e: ChangeEvent\<HTMLInputElement\>, value: string) =\> void|-|
+|onInput|数据改变时触发|(e: ChangeEvent\<HTMLInputElement\>, value: string) =\> void|-|
+|onFocus|输入框聚焦时触发|(e: FocusEvent\<HTMLInputElement, Element\>) =\> void|-|
+|onBlur|输入框失去焦点时触发|(e: FocusEvent\<HTMLInputElement, Element\>) =\> void|-|
+|onClick|点击输入框事件|(e: MouseEvent\<HTMLInputElement, MouseEvent\>) =\> void|-|
+|onKeyUp|原生的keyup事件|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+|onKeyDown|原生的keydown事件|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+|onKeyPress|原生的keypress事件|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+|onPressEnter|按下回车键时触发|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|input|原生输入框 DOM|HTMLInputElement|

package/metaData/components/input/style.md

@@ -0,0 +1,108 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-input-container {
+    width: 100%;
+    .use-var(color, font-color);
+    position: relative;
+    .@{prefix}-input-label {
+        .use-var(min-width, input-label-min-width);
+    }
+}
+
+.@{prefix}-input-label {
+
+    &.required::before {
+        content: "* ";
+        .use-var(color, danger-color);
+    }
+    padding-top: 1PX;
+
+    .disabled & {
+        .use-var(color, input-disabled-color);
+    }
+}
+
+.@{prefix}-input-wrap {
+    position: relative;
+    .use-var(height, input-height);
+    .use-var(padding, input-horizontal-padding, 0);
+    display: flex;
+    align-items: center;
+
+    textarea,
+    input {
+        flex: 1;
+        background: transparent;
+
+        &:disabled {
+            .use-var(color, input-disabled-color);
+            // reset for ios
+            .use-var(-webkit-text-fill-color, input-disabled-color);
+            opacity: 1;
+        }
+    }
+
+    &.textarea {
+        height: auto;
+        align-items: flex-start;
+        .use-var(padding, textarea-padding);
+
+        &.has-stat {
+            .use-var(padding, textarea-has-stat-padding);
+        }
+    }
+
+    &.border {
+
+        &-all {
+            .hairline-var(line-color);
+        }
+
+        &-half {
+            .hairline-var(line-color, top);
+            .hairline-var(line-color, bottom);
+        }
+
+        &-bottom {
+            .hairline-var(line-color, bottom);
+        }
+    }
+}
+
+.@{prefix}-input-prefix, .@{prefix}-input-suffix, .@{prefix}-input-clear {
+    .use-var(font-size, input-text-font-size);
+    .use-var(line-height, input-text-line-height);
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+.@{prefix}-input-prefix {
+    .use-var-with-rtl(padding-right, input-label-gutter);
+}
+.@{prefix}-input-clear,
+.@{prefix}-input-suffix {
+    .use-var-with-rtl(padding-left, input-horizontal-padding);
+}
+.@{prefix}-input-clear {
+    .use-var(color, input-clear-icon-color);
+    .use-var(font-size, input-clear-icon-font-size);
+}
+
+.@{prefix}-input {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    .use-var(font-size, input-text-font-size);
+    .use-var(line-height, input-text-line-height);
+    .use-var(caret-color, input-caret-color);
+    .use-var(padding, input-vertical-padding, "", 0);
+    .use-var(color, font-color);
+
+    &::placeholder {
+        .use-var(color, input-placeholder-color);
+    }
+
+    &::-webkit-search-cancel-button {
+        display: none;
+    }
+}

package/metaData/components/keyboard/api.md

@@ -0,0 +1,65 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|normalKeyClass|常规键位自定义类名|string|-|
+|normalKeyStyle|常规键位自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|type|键盘展示类型，不同类型有不同布局。number \- 纯数字常规键盘，confirm \- 带确认按钮的键盘，tool \- 带运算符的键盘|"number" \| "confirm" \| "tool"|"number"|
+|randomOrder|是否打乱键盘中的数字展示位置|boolean|必填|
+|title|键盘顶部展示标题内容，样式纯自定义|ReactNode|-|
+|rightColumns|自定义渲染数字右侧（第四列）的内容|ReactNode|-|
+|confirmClosable|点击确认后是否自动关闭键盘|boolean|false|
+|confirmButton|自定义渲染确认按钮内部内容|ReactNode|-|
+|deleteButton|自定义渲染删除按钮内部内容|ReactNode|-|
+|keyboardButton|自定义渲染收起键盘按钮内部内容|ReactNode|-|
+|close|收起键盘回调|(e?: MouseEvent\<HTMLElement, MouseEvent\>) =\> \{\}|必填|
+|onConfirm|点击确认按钮回调|() =\> \{\}|-|
+|onDelete|点击删除按钮回调|() =\> \{\}|-|
+|onChange|点击常规按钮回调|(data: ReactText) =\> \{\}|-|
+|direction|菜单滑出方向|"left" \| "right" \| "top" \| "bottom"|"bottom"|
+|needBottomOffset|从底部滑出的菜单内容是否适配ipx底部|boolean|false|
+|translateZ|\[即将废弃\] 开启translateZ强制提升|boolean|false|
+|maskTransitionTimeout|菜单蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionTimeout|菜单内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionType|内容过渡动画类名|string|\`slide-from-${props.direction}\`|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|visible|是否展示菜单（受控）|boolean|必填|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"left" \| "right" \| "top" \| "bottom"|"top"|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|keyboard|最外层 DOM 元素|HTMLDivElement|
+|dom|最外层元素 DOM|HTMLDivElement|
+|mask|蒙层 DOM|HTMLDivElement|
+|content|内容 DOM|HTMLDivElement|
+|setCloseScene|在关闭弹窗前修改 onClose 的 scene 参数值|(scene: string) =\> void|
+
+> DirectionType
+
+```
+"left" | "right" | "top" | "bottom"
+```

package/metaData/components/keyboard/style.md

@@ -0,0 +1,80 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-keyboard {
+    .use-var(background, keyboard-background);
+    .use-var(padding, keyboard-content-padding);
+    .noselect();
+
+    &-wrapper {
+        display: flex;
+    }
+
+    &-key-wrapper {
+        flex: 2 0 auto;
+    }
+
+    &-row {
+        display: flex;
+        &:not(&:nth-last-child(1)) {
+            .use-var(margin-bottom, keyboard-unified-margin);
+        }
+
+        .@{prefix}-keyboard-key {
+            &:not(&:nth-child(1)) {
+                .use-var(margin-left, keyboard-unified-margin);
+            }
+
+            &-special {
+                flex: 2.1 0 auto;
+            }
+        }
+    }
+
+    &-col {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .use-var(margin-left, keyboard-unified-margin);
+
+        .@{prefix}-keyboard-key {
+            &:not(&:nth-child(1)) {
+                .use-var(margin-top, keyboard-unified-margin);
+            }
+
+            &-confirm {
+                flex: 2.5 0 auto;
+                .use-var(background, keyboard-confirm-key-background);
+                .use-var(color, keyboard-confirm-key-color);
+                .use-var(font-size, keyboard-confirm-key-font-size);
+            }
+        }
+    }
+
+    &-key {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+
+        .use-var(font-weight, keyboard-key-font-weight);
+        .use-var(font-size, keyboard-key-font-size);
+        .use-var(line-height, keyboard-key-line-height);
+        .use-var(background, keyboard-key-background);
+        .use-var(border-radius, keyboard-key-border-radius);
+        .use-var(height, keyboard-key-height);
+        .use-var(border-radius, keyboard-key-border-radius);
+        .use-var(color, keyboard-key-color);
+
+        &:active {
+            .use-var(background, keyboard-key-active-background);
+        }
+
+        .@{prefix}-icon {
+            .use-var(font-size, keyboard-key-icon-size);
+        }
+    }
+
+    &-popup {
+      display: none;
+    }
+}

package/metaData/components/load-more/api.md

@@ -0,0 +1,40 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|disabled|是否禁用加载能力|boolean|-|
+|beforeReadyArea|组件加载但尚未启用状态下的内容|ReactNode|null|
+|loadingArea|加载中状态下的内容|ReactNode|"正在努力加载中..."|
+|noMoreArea|无更多数据状态下的内容|ReactNode|"没有更多数据了"|
+|prepareArea|准备加载状态下的内容|ReactNode|"上拉/点击加载更多"|
+|retryArea|加载重试状态下的内容|ReactNode|"加载失败，点击重试"|
+|defaultStatus|组件加载初始状态，传入 "before\-ready" 则先加载组件但不请求数据|"before\-ready" \| "prepare"|"prepare"|
+|status|当前状态，传入则受控|"before\-ready" \| "prepare" \| "loading" \| "nomore" \| "retry"|-|
+|getScrollContainer|待计算滚动容器|() =\> HTMLElement \| Window|() => window|
+|getOffsetNode|当多个 loadmore 在同一页面时，通过传入节点的 offsetHeight \+ offsetTop 代替 scrollHeight|() =\> HTMLElement \| Window|-|
+|trigger|触发loading的时机，当为click时，点击后将触发getData|"scroll" \| "click"|"scroll"|
+|threshold|滚动到离列表底部多远的位置触发getData，触发状态时机为'scroll'时有效|number|200|
+|getData|请求数据方法，可在异步任务结束后根据任务结果调用callback修改loadmore内部状态|(callback: (status: LoadMoreStatus) =\> void) =\> void|-|
+|throttle|节流粒度|number|0|
+|blockWhenLoading|是否在loading状态下不触发getData|boolean|true|
+|getDataAtFirst|刚加载好组件时是否自动先请求一次，trigger=scroll时有效|boolean|true|
+|getDataWhenNoScrollAtFirst|当 getDataAtFirst 值为 false 且数据不满一屏时是否触发一次请求，trigger=scroll时有效|boolean|false|
+|onStatusChange|状态改变时回调|(status: LoadMoreStatus, scene?: string) =\> void|-|
+|onClick|组件被点击时回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|onEndReached|滚动到(底部 \- threshold)距离时触发|() =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|changeStatus|手动更改组件状态|(status: LoadMoreStatus, scene?: string) =\> void|
+|getDataWithEndReachCheck|判断是否滚动到底部并手动触发数据获取|() =\> void|
+
+> LoadMoreStatus
+
+```
+"before-ready" | "prepare" | "loading" | "nomore" | "retry"
+```

package/metaData/components/load-more/style.md

@@ -0,0 +1,7 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-load-more {
+    text-align: center;
+    .use-var(font-size, load-more-font-size);
+    .use-var(color, load-more-text-color);
+}

package/metaData/components/loading/api.md

@@ -0,0 +1,26 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|color|主颜色，如果想使用 css 控制主颜色，可使用公共 mixin \`\.set\-loading\-color(@color)\`|string|-|
+|type|loading类型|"spin" \| "circle" \| "arc" \| "dot"|"dot"|
+|list|当类型为\`dot\`或\`spin\`时有效，定义内部各元素的透明度|number\[\]|-|
+|duration|一次loading周期的毫秒数|number|1000|
+|svgKey|区分不同loading组件间的\`\<def\>\`内容|string|-|
+|radius|圆圈半径，类型为\`circle\`或\`arc\`时可用|number|9|
+|stroke|圆圈描边宽度，类型为\`circle\`或\`arc\`或\`spin\`时可用|number|2|
+|filleted|边缘是否为圆角|boolean|true|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> LoadingType
+
+```
+"spin" | "circle" | "arc" | "dot"
+```

package/metaData/components/loading/style.md

@@ -0,0 +1,102 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-loading {
+    .set-loading-color-var(loading-color);
+    display: inline-block;
+    font-size: 0;
+    line-height: 0;
+    position: relative;
+    @keyframes changDeg {
+
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    &.circle,
+    &.arc,
+    &.spin {
+        animation: changDeg 1s infinite linear;
+    }
+
+    &.circle {
+
+        .loading-circle-middle {
+            stop-opacity: .5;
+        }
+
+        .loading-circle-end {
+            stop-opacity: 0;
+        }
+    }
+
+    &.dot {
+
+        .dot-cell {
+            display: inline-block;
+            .use-var(width, loading-dot-size);
+            .use-var(height, loading-dot-size);
+            .use-var(margin-left, loading-dot-gutter);
+
+            &:first-of-type {
+                margin-left: 0;
+            }
+
+            &.filleted {
+                border-radius: 50%;
+            }
+        }
+    }
+
+    &.spin {
+        .rem(height, 22);
+        .rem(width, 22);
+        position: relative;
+
+        .spin-cell {
+            position: absolute;
+            .rem(left, 10);
+            .rem(top, 1);
+            display: inline-block;
+            .rem(height, 10);
+            .rem(padding-bottom, 4);
+            overflow: hidden;
+            transform-origin: 50% bottom;
+
+            &-inner {
+                display: inline-block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 200%;
+                transform: scale(.5);
+                transform-origin: top left;
+                .rem(height, 12);
+            }
+        }
+    }
+
+    &.arc {
+
+        .arc-bg {
+            .use-var(stroke, loading-arc-background-color);
+        }
+    }
+
+    &.line {
+        width: 100%;
+
+        .loading-line-start,
+        .loading-line-end {
+            .use-var(stop-color, loading-color);
+        }
+
+        .loading-line-start {
+            stop-opacity: 0;
+        }
+    }
+}