@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/steps/style.md

@@ -0,0 +1,304 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-steps {
+    display: flex;
+    .use-var(padding, steps-padding);
+
+    &.reverse-order {
+        flex-direction: row-reverse;
+    }
+
+    &-item {
+        position: relative;
+        display: flex;
+        flex: 1;
+
+        &.horizontal {
+            flex-direction: column;
+        }
+
+        &-align-center {
+            align-items: center;
+        }
+
+        &-align-start {
+            align-items: flex-start;
+        }
+
+        &-align-center.vertical {
+            .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            visibility: hidden;
+        }
+
+        &:first-child &-tail::after,
+        &:last-child &-tail::before {
+            .reverse-order & {
+                visibility: hidden;
+            }
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            .reverse-order & {
+                visibility: visible;
+            }
+        }
+
+        &-tail {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .horizontal & {
+                width: 100%;
+                .use-var(height, steps-icon-height);
+
+                &::before,
+                &::after {
+                    .use-var(height, steps-tail-standard-size);
+                }
+
+                &-align-start {
+                    .use-var-with-rtl(left, steps-tail-horizontal-left);
+                    .use-var(padding, steps-tail-horizontal-padding);
+
+                    &::after {
+                        content: '';
+                        width: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: '';
+                        width: 50%;
+                    }
+                    &::before {
+                        .use-var-with-rtl(margin-right, steps-tail-horizontal-gutter);
+                        .use-var-with-rtl(border-top-right-radius, steps-tail-border-radius);
+                        .use-var-with-rtl(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var-with-rtl(margin-left, steps-tail-horizontal-gutter);
+                        .use-var-with-rtl(border-top-left-radius, steps-tail-border-radius);
+                        .use-var-with-rtl(border-bottom-left-radius, steps-tail-border-radius);
+                    }
+                }
+            }
+
+            .vertical & {
+                height: 100%;
+                .use-var(width, steps-icon-width);
+                flex-direction: column;
+
+                &::before,
+                &::after {
+                    .use-var(width, steps-tail-standard-size);
+                }
+
+                &-align-start {
+                    .use-var(top, steps-tail-vertical-top);
+                    .use-var(padding, steps-tail-vertical-padding);
+
+                    &::after {
+                        content: '';
+                        height: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: '';
+                        height: 50%;
+                    }
+                    &::before {
+                        .use-var(margin-bottom, steps-tail-vertical-gutter);
+                        .use-var(border-bottom-left-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var(margin-top, steps-tail-vertical-gutter);
+                        .use-var(border-top-left-radius, steps-tail-border-radius);
+                        .use-var(border-top-right-radius, steps-tail-border-radius);
+                    }
+                }
+            }
+
+            &::after,
+            &::before {
+                display: inline-block;
+                .use-var(background, steps-tail-standard-background);
+            }
+
+            &-status-finish::before,
+            &-status-finish::after,
+            &-align-center&-status-process::before,
+            &-align-center&-status-error::before {
+                .use-var(background, steps-tail-finish-background);
+            }
+
+            &-status-finish::before,
+            &-status-process::after,
+            &-align-center&-status-error::after {
+                .reverse-order & {
+                    .use-var(background, steps-tail-finish-background);
+                }
+            }
+            &-status-process::before,
+            &-align-center&-status-error::before {
+                .reverse-order & {
+                    .use-var(background, steps-tail-standard-background);
+                }
+            }
+        }
+
+        &-custom-icon,
+        &-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            .use-var(width, steps-icon-width);
+            .use-var(height, steps-icon-height);
+        }
+
+        &-icon {
+            border-radius: 50%;
+
+            .number.finish & {
+                .use-var(background, steps-finish-icon-num-background);
+            }
+
+            .number.process & {
+                .use-var(background, steps-process-icon-num-background);
+            }
+
+            .number.wait & {
+                .use-var(background, steps-wait-icon-num-background);
+            }
+
+            .number.error & {
+                .use-var(background, steps-error-icon-num-background);
+            }
+
+            svg {
+                .use-var(font-size, steps-icon-svg-standard-font-size);
+
+                .finish & {
+                    .use-var(color, steps-finish-icon-svg-color);
+                }
+
+                .error & {
+                    .use-var(color, steps-error-icon-svg-color);
+                    .use-var(font-size, steps-error-icon-svg-font-size);
+                }
+            }
+
+            &-num {
+                .use-var(font-size, steps-icon-num-font-size);
+                .use-var(line-height, steps-icon-num-line-height);
+                .use-var(color, steps-icon-num-color);
+                .text-medium();
+
+                .process & {
+                    .use-var(color, steps-process-icon-num-color);
+                }
+            }
+
+            &-dot {
+                position: relative;
+                display: inline-block;
+                .use-var(width, steps-dot-width);
+                .use-var(height, steps-dot-height);
+                border-radius: 50%;
+                .use-var(border-width, steps-dot-border-width);
+                border-style: solid;
+
+                .finish & {
+                    .use-var(border-color, steps-finish-dot-border-color);
+                }
+
+                .wait & {
+                    .use-var(border-color, steps-wait-dot-border-color);
+                }
+
+                .process & {
+                    border: none;
+                    .use-var(background, steps-process-dot-background);
+                }
+            }
+        }
+
+        &-content {
+            .horizontal & {
+                .use-var(margin-top, steps-horizontal-content-margin-top);
+                &-align-center {
+                    text-align: center;
+                }
+            }
+
+            .vertical & {
+                .use-var-with-rtl(margin-left, steps-vertical-content-margin-left);
+                flex: 1;
+
+                &-align-start {
+                    .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+                }
+            }
+        }
+
+        &-title {
+            .use-var(font-size, steps-title-font-size);
+            .use-var(line-height, steps-title-line-height);
+
+            .finish & {
+                .use-var(color, steps-finish-title-color);
+            }
+
+            .error & {
+                .use-var(color, steps-error-title-color);
+            }
+
+            .process & {
+                .use-var(color, steps-process-title-color);
+                font-weight: 500;
+            }
+
+            .wait & {
+                .use-var(color, steps-wait-title-color);
+            }
+        }
+
+        &-description {
+            .use-var(font-size, steps-description-font-size);
+            .use-var(line-height, steps-description-line-height);
+            .use-var(color, steps-description-color);
+
+            .wait & {
+                .use-var(color, steps-wait-description-color);
+            }
+
+            .vertical & {
+                .use-var(margin-top, steps-description-margin-top);
+            }
+        }
+    }
+
+    &.vertical {
+        &.reverse-order {
+            flex-direction: column-reverse;
+        }
+
+        flex-direction: column;
+        .use-var(padding-bottom, steps-vertical-padding-bottom);
+        .use-var-with-rtl(padding-left, steps-vertical-padding-left);
+    }
+}

package/metaData/components/sticky/api.md

@@ -0,0 +1,37 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|position|吸附位置，top 表示吸顶，bottom 表示吸底，both 表示既吸顶又吸底|"top" \| "bottom" \| "both"|"top"|
+|topOffset|当距离容器顶部距离为该值时吸顶|number|0|
+|bottomOffset|当距离容器底部距离为该值时吸底|number|0|
+|followOffset|当sticky元素需要跟随依附容器离开视口时距离依附容器边缘的距离|number|0|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|children|组件内部内容|ReactNode|-|
+|zIndex|层级指数，z\-index的值|number|100|
+|portalWhenSticky|在处于sticky状态时是否portal|boolean|false|
+|stickyStyle|处于sticky状态时，元素固定样式。推荐用fixed，如果为absolute则需自行为滚动容器的父容器设置 position: relative|"fixed" \| "absolute"|"fixed"|
+|stickyCssStyle|处于sticky状态时的自定义样式|CSSProperties|-|
+|getPortalContainer|被portal时挂载的容器|() =\> HTMLElement|() => document.body|
+|onStickyStateChange|吸顶状态切换时触发 payload\.isSticky: 当前是否为吸顶/吸底状态 payload\.wasSticky: 前一个状态是否为吸顶/吸底状态|(payload: StickyEventPayload) =\> void|-|
+|onTopChange|滚动时top变化回调，参数为元素距离容器顶部减去topOffset的距离|(top: number) =\> void|-|
+|getContainer|指定sticky元素的依附容器，sticky元素不会超出容器，在容器离开视口时会跟随 如果返回string则使用querySelector选取容器|() =\> string \| HTMLElement|-|
+|getScrollContainer|指定滚动容器；如果返回string则使用querySelector选取容器|() =\> string \| HTMLElement \| Window|() => window|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|recalculatePosition|局部滚动模式下，如果容器外部还有嵌套滚动，可主动调用此方法，让 sticky 的元素主动更新 fixed 位置|() =\> void|
+|updatePlaceholderLayout|手动更新占位模块的高度|() =\> void|
+
+> StickyEventPayload
+
+|参数|描述|类型|
+|----------|-------------|------|
+|isSticky|当前是否为吸顶/吸底状态|boolean|
+|wasSticky|前一个状态是否为吸顶/吸底状态|boolean|
+|isTopSticky|当前是否为吸顶状态|boolean|
+|isBottomSticky|当前是否为吸底状态|boolean|

package/metaData/components/sticky/style.md

@@ -0,0 +1,5 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-sticky {
+
+}

package/metaData/components/swipe-action/api.md

@@ -0,0 +1,36 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|children|子元素|ReactNode|必填|
+|rightActions|右侧菜单|Action\[\]|-|
+|leftActions|左侧菜单|Action\[\]|-|
+|closeOnTouchOutside|点击外部是否自动归位|boolean|false|
+|threshold|菜单滑出多少距离后自动滑出/关闭的系数 范围 0\-1|number|0.15|
+|disabled|是否禁用|boolean|false|
+|transitionDuration|动画的执行时间 (单位ms)|number|300|
+|dampRate|阻尼系数|number|15|
+|openStyleType|菜单滑入时的样式类型，layer \- 分层堆叠进入，push \- 直接依次推入|"layer" \| "push"|"layer"|
+|onOpen|滑出动画结束后触发|(direction: "left" \| "right") =\> void|-|
+|onClose|滑入动画结束后触发|(direction: "left" \| "right") =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|close|使滑动条归位|() =\> void|
+|open|打开滑动条，默认打开右边|(direction: "left" \| "right") =\> void|
+
+> Action
+
+|参数|描述|类型|
+|----------|-------------|------|
+|text|自定义内容|ReactNode|
+|icon|自定义图标|ReactNode|
+|style|自定义样式|CSSProperties|
+|className|自定义类名|string|
+|onClick|点击事件 返回true可以阻止菜单的关闭|() =\> boolean \| void \| Promise\<boolean \| void\>|
+|children|子元素没有text或者icon的传递children|ReactNode|

package/metaData/components/swipe-action/style.md

@@ -0,0 +1,89 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-swipe-action {
+    position: relative;
+    transition: transform 0s;
+    .use-var(font-size,swipe-action-text-font-size);
+
+    &, &-menu {
+        &.action-open {
+            .use-var(transition-timing-function, swipe-action-open-transition);
+        }
+        &.action-close {
+            .use-var(transition-timing-function, swipe-action-close-transition);
+        }
+    }
+
+    &-content {
+        width: 100%;
+    }
+
+    &-menu {
+        display: flex;
+        position: absolute;
+        height: 100%;
+        overflow: visible;
+        flex-wrap: nowrap;
+        top: 0;
+        transition: width 0s;
+
+        &-left {
+            right: 100%;
+        }
+
+        &-right {
+            left: 100%;
+        }
+        &-action {
+            &-left {
+                &::after {
+                    right: 100%;
+                    margin-right: -1PX;
+                }
+            }
+            &-right {
+                &::after {
+                    left: 100%;
+                    margin-left: -1PX;
+                }
+            }
+            &-info {
+                height: 100%;
+                .use-var(padding, swipe-action-info-padding);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                &-container {
+                    position: relative;
+                    &.open-style-layer {
+                        position: absolute;
+                        height: 100%;
+                    }
+                    &::after {
+                        content: " ";
+                        position: absolute;
+                        top: 0;
+                        height: 100%;
+                        .use-var(width, swipe-action-info-bounce-buffer);
+                        background: inherit;
+                    }
+                }
+
+                &-text {
+                    white-space: nowrap;
+                    .use-var(font-size,swipe-action-text-font-size);
+                    .use-var(line-height,swipe-action-text-line-height);
+                    .use-var(color, swipe-action-text-color);
+                }
+
+                &-icon {
+                    .use-var(margin-right,swipe-action-icon-margin-right);
+                    .use-var(height, swipe-action-icon-height);
+                    .use-var(width, swipe-action-icon-width);
+                    .use-var(color, swipe-action-text-color);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|disabled|是否禁用组件|boolean|false|
+|maxElementOffset|页面元素允许划动的最大距离|number|56|
+|maxLabelOffset|label移动的最大距离|number|40|
+|minConfirmOffset|页面允许触发的临界值(通常小于maxLabelOffset)|number|30|
+|onConfirm|释放触发的函数(跳转，加载等)|() =\> void|必填|
+|circleSize|圆形的直径|number|80|
+|labelAnimationDuration|恢复动效时长(ms)|number|250|
+|labelAnimationFunction|恢复动效函数|string|"cubic-bezier(0.14, 1, 0.34, 1)"|
+|damping|阻尼动效参数，使用函数x = X/(aX\+b)，其中X代表当前滑动距离，传入的值代表\[a, b\]|\[number, number\]|[0.013312, 1.636345]|
+|getScrollContainer|得到滚动容器|() =\> HTMLElement|-|
+|normalText|标签初始文案|string|"更多"|
+|activeText|触发跳转文案|string|"释放查看"|
+|bounceWhenBumpBoundary|触碰左侧边界时是否需要回弹效果|boolean|false|
+|bounceDampRate|当开启回弹效果时的阻尼系数|number|3|
+|bounceAnimateDuration|当开启回弹效果时的动画毫秒时间|number|300|
+|getBounceContainer|回弹效果开启时需要回弹的容器，默认为 getScrollContainer 返回的容器或容器的一个子元素|() =\> HTMLElement|-|
+|bounceDistanceProcessor|当开启回弹效果时自定义手指滑动跟手的距离计算方式，dis表示touchmove的距离|(dis: number) =\> number|(dis) => Math.min(dis, bounceScrollContainer.offsetWidth) / bounceDampRate|
+|onTouchStart|抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突|(e?: TouchEvent) =\> void|-|
+|onTouchMove|抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突|(e?: TouchEvent) =\> void|-|
+|onTouchEnd|抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突|(e?: TouchEvent) =\> void|-|
+|onTouchCancel|抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突|(e?: TouchEvent) =\> void|-|
+|renderLabel|用户自定义标签样式|(offset?: number) =\> ReactNode|-|
+|initPos|标签的初始位置 自定义必传|number|0|
+|children|子元素|ReactNode|必填|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

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

@@ -0,0 +1,29 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-swipe-load {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+
+    .@{prefix}-list-area {
+        position: relative;
+        width: 100%;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .@{prefix}-loading-area {
+        .use-var(background-color, swipe-load-label-background);
+        margin-top: 0;
+        .use-var(border-radius, swipe-load-label-border-radius);
+
+        .@{prefix}-loading-label {
+            .use-var-with-rtl(margin-left, swipe-load-label-text-margin-left);
+            .use-var(width, swipe-load-label-text-width);
+            .use-var(color, swipe-load-label-text-color);
+            .use-var(font-size, swipe-load-label-text-font-size);
+        }
+    }
+}

package/metaData/components/switch/api.md

@@ -0,0 +1,30 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|platform|组件的平台特有样式, 可选值为 android, ios|string|跟随当前所在系统|
+|checked|是否设置为打开状态 有checked时defaultChecked不会使用|boolean|-|
+|defaultChecked|默认的初始状态|boolean|false|
+|text|开关文案|SwitchText|-|
+|shape|圆角样式， fully \- 全圆角，semi \- 直角|"fully" \| "semi"|"fully"|
+|innerArea|内部区域元素|ReactNode|-|
+|disabled|是否设置为禁用状态|boolean|false|
+|onChange|状态改变时触发的回调函数|(checked: boolean) =\> void|-|
+|onTouchStart|touchStart事件回调|(e: TouchEvent\<HTMLDivElement\>) =\> void|-|
+|onTouchEnd|touchEnd事件回调|(e: TouchEvent\<HTMLDivElement\>) =\> void|-|
+|onClick|click事件回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> SwitchText
+
+|参数|描述|类型|
+|----------|-------------|------|
+|on|打开时的展示文案|string|
+|off|关闭时的展示文案|string|