@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/button/style.md

@@ -0,0 +1,151 @@
+@import '../../../style/mixin.less';
+
+@size-map: huge, large, medium, small, mini;
+
+.button-has-border(@color) {
+    .use-var(border, @color, 1PX solid);
+    &.half-border {
+        border-width: 0;
+        .hairline-var(@color);
+    }
+}
+
+.button-has-border-value(@value) {
+    border: 1PX solid @value;
+    &.half-border {
+        border-width: 0;
+        .hairline(@value);
+    }
+}
+
+.button-no-border() {
+    border-width: 0;
+    box-shadow: none;
+}
+
+.button-text-size(@font-size) {
+    .@{prefix}-button-icon,
+    i,
+    .@{prefix}-button-text,
+    svg {
+        .use-var(font-size, @font-size);
+    }
+}
+
+.button-size-height(@height) {
+    .use-var(height, @height);
+    &-is-round {
+        .use-var(border-radius, @height);
+    }
+    &-is-square {
+        .rem(border-radius, 0);
+    }
+}
+
+.@{prefix}-button {
+    cursor: pointer;
+    text-align: center;
+    line-height: 1.2;
+    font-size: 0;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    .use-var(line-height, button-line-height);
+    .use-var(border-radius, button-radius);
+    .noselect();
+
+    &&-inline {
+        width: auto;
+        display: inline-block;
+    }
+
+    &&-type-primary {
+        .use-var(background, button-primary-background);
+        .use-var(color, button-primary-text-color);
+        &-disabled {
+            .use-var(background, button-primary-disabled-background);
+            .use-var(color, button-primary-disabled-text-color)
+        }
+        &-active {
+            .use-var(background, button-primary-clicked-background);
+        }
+    }
+    &-type-primary {
+        .set-loading-color-var(button-primary-text-color);
+    }
+
+    &&-type-default {
+        .use-var(background, button-default-background);
+        .use-var(color, button-default-text-color);
+        &-disabled {
+            .use-var(background, button-default-disabled-background);
+            .use-var(color, button-default-disabled-text-color)
+        }
+        &-active {
+            .use-var(background, button-default-clicked-background);
+        }
+    }
+    &-type-default {
+        .set-loading-color-var(button-default-text-color);
+    }
+
+    &&-type-ghost {
+        .use-var(background, button-ghost-background);
+        .use-var(color, button-ghost-text-color);
+        &-disabled {
+            .use-var(background, button-ghost-disabled-background);
+            .use-var(color, button-ghost-disabled-text-color)
+        }
+        &-active {
+            .use-var(background, button-ghost-clicked-background);
+        }
+    }
+    &-type-ghost {
+        .set-loading-color-var(button-ghost-text-color);
+    }
+
+    &&-type-ghost {
+        .button-has-border-value(currentColor);
+    }
+
+    .set-button-size(length(@size-map));
+
+    &-text-android {
+        .rem(padding-top, 2);
+    }
+
+    &-icon {
+        vertical-align: middle;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    &-text {
+        display: inline-block;
+        vertical-align: middle;
+    }
+    &-text-has-icon {
+        .use-var-with-rtl(margin-left, button-icon-text-gutter);
+    }
+
+    &-loading-icon {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    &.has-custom-border {
+        border: 1PX solid;
+    }
+}
+
+.set-button-size(@index) when (@index > 0) {
+    @size: extract(@size-map, @index);
+
+    &&-size-@{size} {
+        .use-var(padding, "button-@{size}-padding");
+        .button-size-height("button-@{size}-height");
+        .button-text-size("button-@{size}-text-size");
+    }
+
+    .set-button-size(@index - 1);
+}

package/metaData/components/carousel/api.md

@@ -0,0 +1,81 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|样式类名|string|-|
+|wrapStyle|最外层容器自定义样式|CSSProperties|-|
+|style|内层轮播容器自定义样式|CSSProperties|-|
+|children|轮播内部内容|ReactNode|-|
+|list|轮播图片列表，省略子元素的简写，传入图片url数组，也可通过\`text\`指定图片底部的蒙层文字内容|CarouselListItem\[\]|-|
+|animateDuration|自动切换轮播滑块时，动画的执行时间(ms)|number|500|
+|animateDurationSlide|手动切换轮播滑块时，当手指释放后，动画的执行时间(ms)|number|300|
+|loop|是否开启循环轮播，当指定轮播滑块宽度时该属性不生效|boolean|true|
+|autoPlay|是否开启自动播放|boolean|true|
+|autoPlayDirection|自动播放方向|"normal" \| "reverse"|"normal"|
+|swipeable|是否响应手势滑动|boolean|true|
+|stayDuration|开启自动播放时，每一个滑块的停留时间(ms)|number|4000|
+|boxWidth|指定容器宽度，默认为基于父容器100%|ReactText|-|
+|boxHeight|指定容器高度，默认为自适应高度；当设置\`vertical=true\`时，该属性为必填|ReactText|-|
+|baseBoxWidth|指定初始容器宽度，常用于ssr首屏初始化，水平轮播时可用|number|-|
+|baseBoxHeight|指定初始容器宽度，常用于ssr首屏初始化，垂直轮播时可用|number|-|
+|width|指定轮播滑块宽度，为0或不传时为默认的父容器宽度|number|0|
+|height|指定轮播滑块高度，如不指定则为自适应高度|number|-|
+|initialIndex|默认选中的滑块索引|number|0|
+|renderIndicator|自定义轮播索引|(currentIndex: number, total: number, lastIndex: number) =\> ReactNode|-|
+|indicatorPos|轮播索引位置|"start" \| "center" \| "end"|"center"|
+|indicatorVerticalPos|垂直轮播索引横向位置|"left" \| "right"|"left"|
+|indicatorOutside|轮播索引是否放轮播图外面|boolean|-|
+|showIndicator|是否展示轮播索引|boolean|true|
+|hideSingleIndicator|children 只有一个时隐藏轮播索引|boolean|true|
+|indicatorType|轮播索引样式类型|"square" \| "circle"|"square"|
+|indicatorClass|轮播索引类名|string|-|
+|indicatorInverse|轮播索引是否反色，默认根据索引是否放在外面决定|boolean|-|
+|spaceBetween|子元素间距|number|0|
+|offsetBetween|前后两端露出距离，设置值时不能循环轮播|number \| \{ left?: number; right?: number; \}|0|
+|currentIndex|手动控制当前展示元素|number|-|
+|autoHeight|容器高度自适应|boolean|false|
+|percentToChange|滑动切换距离阈值(宽度比例)，范围为\[0, 1\]，如果该属性和\`distanceToChange\`属性均设置，则实际计算结果更大的生效|number|0.3|
+|distanceToChange|滑动切换距离阈值(固定px宽度)，如果该属性和\`percentToChange\`属性均设置，则实际计算结果更大的生效|number|10|
+|speedToChange|滑动切换速度阈值(手指从按下到抬起之间的滑动速度，单位为px/s)，与滑动切换距离阈值同时设置时，满足其中一个即生效|number|200|
+|vertical|是否垂直轮播，设置后\`boxHeight\`属性必填|boolean|-|
+|lazyloadCount|只加载当前页相邻的n个内容，为0时会销毁所有相邻内容，不传则加载所有内容|number|-|
+|stopTouchThreshold|触发onTouchStopped的最小阈值|number|0|
+|bounceWhenNoLoop|当不可循环时，是否开启滑动到最前或最后时的回弹效果|boolean|false|
+|bounceDampRate|当开启最前或最后时的回弹效果时的阻尼系数|number|3|
+|inactiveScale|非active的滑块的大小比例，\[0, 1\]的小数，设置后切换时将有放大效果|number|-|
+|stopPropagation|触摸事件是否需要 stopPropagation|boolean|true|
+|fakeItem|是否需要fake首尾item，用于offsetBetween不等于0时循环轮播的衔接|boolean|false|
+|allowEndBlank|滑动到最后时是否允许留白，仅在loop=false且设置了width时有效|boolean|false|
+|iOSVisibleOptimize|在iOS下是否需要在切屏时做DOM强刷优化，用于修复iOS息屏时自动播放的蜜汁渲染问题|boolean|true|
+|renderExtra|在轮播图内部渲染额外元素，该元素不随轮播滑动，但处于手指可交互热区|(currentIndex: number) =\> ReactNode|-|
+|distanceProcessor|自定义手指滑动跟手的距离计算方式，posDis表示touchmove的距离，wrapSize表示容器在滑动方向的尺寸，childSize表示滑块在滑动方向的尺寸|(posDis: number, wrapSize: number, childSize: number) =\> number|(posDis, wrapSize, childSize) => childSize * (posDis / wrapSize)|
+|getInnerScrollContainer|组件内部的滚动容器，用于豁免滑动事件响应|() =\> HTMLElement \| HTMLElement\[\]|-|
+|onTouchStopped|当轮播不支持循环且滑到最前面或最后面，还想再滑动时触发|(direction: 1 \| \-1) =\> void|-|
+|onChange|轮播滑块切换时触发|(index: number) =\> void|-|
+|onAfterChange|轮播滑块切换，动画完成后触发|(index: number, oldIndex: number) =\> void|-|
+|onTouchStart|轮播内容touchstart事件|(e: TouchEvent, total: number, index: number) =\> boolean \| void|-|
+|onTouchMove|轮播内容touchmove事件|(e: TouchEvent, total: number, index: number) =\> boolean \| void|-|
+|onTouchEnd|轮播内容touchend / touchcancel事件|(e: TouchEvent, total: number, index: number) =\> boolean \| void|-|
+|onTransitionStart|轮播切换动画开始时回调|() =\> void|-|
+|onTransitionEnd|轮播切换动画结束时回调|() =\> void|-|
+|onDistanceChange|轮播左右滑动时回调，用于监听滑动距离以做滑动同步交互|(distance: number, wrapSize: number, activeIndex: number) =\> void|-|
+|onPageVisibleChange|自定义页面展示隐藏监听，默认在document监听visibilitychange事件，返回function用于在组件卸载时移除监听|(updateWhenVisible: () =\> void, updateWhenInvisible: () =\> void) =\> () =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|wrap|轮播图子项包裹容器 DOM，承载了 touch 相关事件|HTMLDivElement|
+|items|轮播图每个子项的 DOM|HTMLDivElement\[\]|
+|noLoop|在某些条件下内部会禁用循环轮播，这里表示循环是否被禁用|boolean|
+|updateData|手动重新计算布局|() =\> void|
+|changeIndex|手动更新当前选中索引，rightNow 表示是否立刻跳转到目标索引，否则执行过渡动画到目标索引|(newIndex: number, rightNow?: boolean, direction?: "left" \| "right") =\> void|
+
+> CarouselListItem
+
+|参数|描述|类型|
+|----------|-------------|------|
+|src|图片链接|string|
+|text|图片底部固定的文字|ReactNode|
+|onClick|点击图片回调|(e: MouseEvent\<HTMLImageElement, MouseEvent\>) =\> void|

package/metaData/components/carousel/style.md

@@ -0,0 +1,208 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-carousel {
+
+    &-wrap {
+        position: relative;
+        font-size: 0;
+        width: 100%;
+    }
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    transition: height .3s;
+    box-sizing: content-box;
+
+    &.wrap-placeholder {
+        display: none;
+    }
+
+    &-inner {
+        overflow: visible;
+
+        &:not(.vertical) {
+            white-space: nowrap;
+        }
+
+        &.auto,
+        &.auto &-item-inner {
+            .use-var(transition-timing-function, carousel-auto-transition);
+        }
+
+        &.slide,
+        &.slide &-item-inner {
+            .use-var(transition-timing-function, carousel-slide-transition);
+        }
+    }
+
+    &-item {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        vertical-align: top;
+        white-space: normal;
+        position: relative;
+
+        &.ssr-float {
+            max-height: 0;
+            overflow: visible;
+        }
+
+        &.vertical > *,
+        &.vertical &-inner > * {
+            height: 100%;
+        }
+
+        & > img,
+        &-inner > img,
+        .carousel-item-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        .carousel-item-text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            box-sizing: border-box;
+            .use-var(padding, carousel-item-text-padding);
+            .use-var(font-size, carousel-item-text-font-size);
+            .use-var(height, carousel-item-text-height);
+            .use-var(color, carousel-item-text-color);
+            .use-var(background, carousel-item-text-background);
+        }
+
+        &-inner {
+            width: 100%;
+            height: 100%;
+        }
+
+        &-inner {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &-indicator {
+        position: absolute;
+        .use-var(bottom, carousel-indicator-position);
+        z-index: 1;
+        will-change: transform;
+        box-sizing: border-box;
+
+        &.pos-start {
+            .use-var-with-rtl(left, carousel-indicator-safe-padding);
+            .set-value-with-rtl(text-align, left);
+        }
+
+        &.pos-center {
+            left: 50%;
+            transform: translate3d(-50%, 0, 0);
+            text-align: center;
+        }
+
+        &.pos-end {
+            .use-var-with-rtl(right, carousel-indicator-safe-padding);
+            .set-value-with-rtl(text-align, right);
+        }
+
+        &-vertical {
+
+            .indicator {
+                display: block;
+                box-sizing: border-box;
+                .use-var(height, carousel-square-indicator-width);
+                .use-var(width, carousel-square-indicator-height);
+
+                &:not(:last-of-type) {
+                    margin: 0;
+                    .use-var(margin-bottom, carousel-square-indicator-gutter);
+                }
+
+                &.type-circle:not(:last-of-type) {
+                    margin: 0;
+                    .use-var(margin-bottom, carousel-circle-indicator-gutter);
+                }
+            }
+
+            &.pos-start {
+                .use-var(top, carousel-indicator-safe-padding);
+            }
+
+            &.pos-center {
+                bottom: 50%;
+                transform: translate3d(0, 50%, 0);
+            }
+
+            &.pos-end {
+                .use-var(bottom, carousel-indicator-safe-padding);
+            }
+
+            &.ver-pos-left {
+                left: auto;
+                right: auto;
+                .use-var-with-rtl(left, carousel-indicator-position);
+            }
+
+            &.ver-pos-right {
+                left: auto;
+                right: auto;
+                .use-var-with-rtl(right, carousel-indicator-position);
+            }
+        }
+
+        &.inverse {
+
+            .indicator {
+                .use-var(background-color, carousel-indicator-inverse-background);
+
+                &.active {
+                    .use-var(background-color, carousel-indicator-active-inverse-background);
+                }
+            }
+        }
+
+        &.outside {
+            position: relative;
+            left: 0;
+            transform: none;
+            bottom: 0;
+            .use-var(padding, carousel-indicator-outside-padding);
+        }
+
+        .indicator {
+            transition: all .2s;
+            .use-var(background-color, carousel-indicator-background);
+
+            &.active {
+                .use-var(background-color, carousel-indicator-active-background);
+            }
+        }
+
+        &-horizontal .indicator {
+            display: inline-block;
+            .use-var(width, carousel-square-indicator-width);
+            .use-var(height, carousel-square-indicator-height);
+
+            &:not(:last-of-type) {
+                .use-var-with-rtl(margin-right, carousel-square-indicator-gutter);
+            }
+        }
+
+        .circle-indicator,
+        .indicator.type-circle {
+            .use-var(width, carousel-circle-indicator-size);
+            .use-var(height, carousel-circle-indicator-size);
+            border-radius: 50%;
+
+            &:not(:last-of-type) {
+                .use-var-with-rtl(margin-right, carousel-circle-indicator-gutter);
+            }
+        }
+    }
+}

package/metaData/components/cell/api.md

@@ -0,0 +1,60 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|icon|单元格左侧图标|ReactNode|-|
+|label|标签名|ReactNode|-|
+|desc|描述|ReactNode|-|
+|text|主体文字，如果有标签名则靠右，否则靠左|string|-|
+|children|主体内容，如果有标签名则靠右，否则靠左|ReactNode|-|
+|showArrow|是否展示右侧箭头|boolean|-|
+|arrow|右侧箭头内容|ReactNode|-|
+|prepend|单元格前缀内容，在单元格上方|ReactNode|-|
+|append|单元格后缀内容，在单元格下方|ReactNode|-|
+|bordered|是否有外边框|boolean|true|
+|onClick|点击单元格事件回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> Cell.Group
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|header|自定义头部内容|ReactNode|-|
+|footer|自定义尾部内容|ReactNode|-|
+|bordered|是否有外边框|boolean|true|
+|options|单元格配置，优先级高于children|(CellProps & RefAttributes\<CellRef\>)\[\]|-|
+|children|内部单元格|ReactNode|-|
+|onClick|点击单元格组回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> CellProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|icon|单元格左侧图标|ReactNode|-|
+|label|标签名|ReactNode|-|
+|desc|描述|ReactNode|-|
+|text|主体文字，如果有标签名则靠右，否则靠左|string|-|
+|children|主体内容，如果有标签名则靠右，否则靠左|ReactNode|-|
+|showArrow|是否展示右侧箭头|boolean|-|
+|arrow|右侧箭头内容|ReactNode|-|
+|prepend|单元格前缀内容，在单元格上方|ReactNode|-|
+|append|单元格后缀内容，在单元格下方|ReactNode|-|
+|bordered|是否有外边框|boolean|true|
+|onClick|点击单元格事件回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> CellGroupRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

package/metaData/components/cell/style.md

@@ -0,0 +1,123 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-cell {
+    .use-var(color, cell-text-color);
+    .use-var(font-size, cell-font-size);
+    .use-var(margin-left, cell-horizontal-padding);
+    .use-var(padding-right, cell-horizontal-padding);
+
+    &:not(:first-of-type).bordered {
+        .onepx-border-var(top, line-color);
+    }
+
+    &.without-group {
+        .use-var(background-color, cell-background-color);
+        .use-var(padding-left, cell-horizontal-padding);
+        margin-left: 0;
+
+        &.bordered {
+            .onepx-border-var(top, line-color);
+            .onepx-border-var(bottom, line-color);
+        }
+    }
+
+    &-inner {
+        display: flex;
+        align-items: center;
+        .use-var(height, cell-item-height);
+
+        &.has-desc {
+            .use-var(height, cell-item-has-desc-height);
+        }
+    }
+
+    .cell-label {
+        .use-var(color, cell-label-color);
+        .use-var-with-rtl(margin-right, cell-label-gutter);
+
+        .cell-title {
+            .use-var(font-size, cell-title-font-size);
+            .use-var(font-weight, cell-title-font-weight);
+        }
+    }
+
+    .cell-desc {
+        .use-var(color, cell-desc-color);
+        .use-var(font-size, cell-desc-font-size);
+        .use-var(margin-top, cell-desc-margin-top);
+    }
+
+    .cell-content {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        &.has-label {
+            justify-content: flex-end;
+        }
+
+        .cell-text {
+            width: 100%;
+            .set-value-with-rtl(text-align, right);
+            .use-var(font-size, cell-content-font-size);
+            .text-overflow(2);
+        }
+    }
+
+    .cell-label-icon {
+        .use-var-with-rtl(margin-right, cell-label-icon-gutter);
+        font-size: 0;
+        .@{prefix}-icon {
+            line-height: initial;
+            .use-var(font-size, cell-label-icon-font-size);
+            .use-var(color, cell-label-icon-color);
+        }
+    }
+
+    .cell-arrow-icon {
+        .style-with-rtl({
+            transform: scale(-1);
+        });
+        .use-var-with-rtl(margin-left, cell-arrow-gutter);
+        font-size: 0;
+        .@{prefix}-icon {
+            .use-var(font-size, cell-arrow-font-size);
+            .use-var(color, cell-arrow-color);
+        }
+
+        .arrow-icon-svg {
+            .rem(width, 8);
+
+            path {
+                .use-var(fill, cell-arrow-color);
+            }
+        }
+    }
+
+    .@{prefix}-input-wrap {
+        .set-prop-with-rtl(padding-left, 0, {
+            .use-var(padding-left, input-horizontal-padding);
+        });
+    }
+}
+
+.@{prefix}-cell-group {
+
+    .cell-group-header,
+    .cell-group-footer {
+        .use-var(color, cell-text-color);
+        .use-var(font-size, cell-extra-font-size);
+        .use-var(line-height, cell-extra-line-height);
+        .use-var(padding, cell-extra-padding);
+    }
+
+    .cell-group-body {
+        .use-var(background-color, cell-background-color);
+
+        &.bordered {
+            .onepx-border-var(top, line-color);
+            .onepx-border-var(bottom, line-color);
+        }
+    }
+}