@fjyueke/arco-mcp 1.0.1 → 1.0.3

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/css-variables.md

@@ -0,0 +1,15 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-carousel-indicator-position | getRem(12) | 轮播图指示器不居中时，距离两侧的安全距离 |
+| --arco-carousel-indicator-safe-padding | getRem(16) | 轮播图圆点形指示器之间的间距 |
+| --arco-carousel-circle-indicator-gutter | getRem(8) | 轮播图方形指示器之间的间距 |
+| --arco-carousel-square-indicator-gutter | getRem(8) | 轮播图圆点形指示器大小 |
+| --arco-carousel-square-indicator-width | getRem(12) | 轮播图方形指示器高度 |
+| --arco-carousel-item-text-height | getRem(32) | 轮播图滑块文字内边距 |
+| --arco-carousel-item-text-font-size | getRem(16) | 输入框 高度 |

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/css-variables.md

@@ -0,0 +1,32 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-cell-load-more-font-size | getRem(14) | 加载更多文字颜色 |
+| --arco-cell-desc-font-size | getRem(14) | 单元格标题文字大小 |
+| --arco-cell-title-font-size | getRem(15) | 单元格标题文字字重 |
+| --arco-cell-desc-margin-top | getRem(2) | 单元格内容文字大小 |
+| --arco-cell-content-font-size | getRem(14) | 单元格右箭头图标颜色 |
+| --arco-cell-arrow-gutter | getRem(8) | 单元格右箭头自定义图标大小 |
+| --arco-cell-arrow-font-size | getRem(12) | 单元格背景色 |
+| --arco-cell-font-size | getRem(16) | 单元格两侧横向间距 |
+| --arco-cell-horizontal-padding | getRem(16) | 单元格基础样式高度 |
+| --arco-cell-item-height | getRem(54) | 单元格有描述文字时的高度 |
+| --arco-cell-item-has-desc-height | getRem(74) | 单元格标签文字右侧间距 |
+| --arco-cell-label-gutter | getRem(24) | 单元格标签图标右侧间距 |
+| --arco-cell-label-icon-gutter | getRem(12) | 单元格标签图标大小 |
+| --arco-cell-label-icon-font-size | getRem(20) | 单元格头部和尾部说明文字大小 |
+| --arco-cell-extra-font-size | getRem(14) | 单元格头部和尾部说明文字行高 |
+| --arco-cell-extra-line-height | getRem(20) | 单元格头部和尾部说明内边距 |
+| --arco-cell-count-down-font-size | getRem(16) | 倒计时默认字体行高 |
+| --arco-cell-count-down-line-height | getRem(22) | 倒计时默认字体颜色 |
+| --arco-cell-action-sheet-item-height | getRem(54) | 动作面板选项字体大小 |
+| --arco-cell-action-sheet-item-font-size | getRem(16) | 动作面板顶部圆角值 |
+| --arco-cell-action-sheet-border-radius | getRem(8) | 动作面板取消按钮顶线颜色 |
+| --arco-cell-action-sheet-header-padding | getRem(16) | 动作面板头部标题字体大小 |
+| --arco-cell-action-sheet-title-font-size | getRem(16) | 动作面板头部描述字体大小 |
+| --arco-cell-action-sheet-sub-title-font-size | getRem(14) | 搜索栏内边距大小 |

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);
+        }
+    }
+}

package/metaData/components/checkbox/css-variables.md

@@ -0,0 +1,11 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-checkbox-icon-margin-right | getRem(8) | checkbox图标被选中时的颜色 |
+| --arco-checkbox-text-font-size | getRem(16) | checkbox文字禁用态透明度 |
+| --arco-checkbox-group-gutter | getRem(24) | tabs tabbar 字体大小 |

package/metaData/components/checkbox/style.md

@@ -0,0 +1,62 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-checkbox {
+    display: inline-flex;
+    align-items: center;
+
+    .checkbox-icon {
+        display: inline-flex;
+        align-items: center;
+        .use-var(font-size, checkbox-icon-font-size);
+        .use-var(color, checkbox-icon-color);
+
+        &.checked {
+            .use-var(color, checkbox-icon-checked-color);
+        }
+
+        &.disabled {
+            .use-var(color, checkbox-icon-disabled-color);
+        }
+
+        &.checked.disabled {
+            .use-var(color, checkbox-icon-checked-disabled-color);
+        }
+
+        .@{prefix}-icon-circle-disabled path {
+            .use-var(stroke, line-color);
+        }
+    }
+
+    .checkbox-text {
+        .use-var(font-size, checkbox-text-font-size);
+        .use-var(color, font-color);
+    }
+
+    .checkbox-icon + .checkbox-text {
+        .use-var-with-rtl(margin-left, checkbox-icon-margin-right);
+    }
+
+    &.disabled .checkbox-text {
+        .use-var(opacity, checkbox-text-disabled-opacity);
+    }
+
+    &.block {
+        width: 100%;
+    }
+
+    &.justify {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
+
+.@{prefix}-checkbox-group {
+    .@{prefix}-checkbox:not(:last-child) {
+        .use-var-with-rtl(margin-right, checkbox-group-gutter);
+
+        &.block,
+        &.justify {
+            .set-prop-with-rtl(margin-right, 0);
+        }
+    }
+}

package/metaData/components/circle-progress/css-variables.md

@@ -0,0 +1,15 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-circleprogress-font-size | getRem(14) | 环形进度条 进度条颜色 |
+| --arco-circleprogress-progress-text-gutter | getRem(8) | 进度条 文字大小 |
+| --arco-circleprogress-progress-text-font-size | getRem(14) | 进度条 跟随进度样式的文字大小 |
+| --arco-circleprogress-progress-text-follow-font-size | getRem(13) | 进度条 跟随进度样式的文字圆角值 |
+| --arco-circleprogress-progress-text-follow-border-radius | getRem(20) | 进度条 跟随进度样式的文字宽度 |
+| --arco-circleprogress-progress-text-follow-width | getRem(36) | 进度条 跟随进度样式的文字高度 |
+| --arco-circleprogress-progress-text-follow-height | getRem(20) | 渐隐过渡效果持续时长 |

package/metaData/components/circle-progress/style.md

@@ -0,0 +1,52 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-circle-progress {
+    position: relative;
+
+    &-text {
+        position: absolute;
+        .use-var(font-size, circle-progress-font-size);
+    }
+
+    &-text-center {
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &-text-bottom {
+        .rem(bottom, -20);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .track-color {
+        .use-var(stroke, circle-progress-track-color);
+    }
+
+    .color {
+        .use-var(stroke, circle-progress-primary-color);
+        .use-var(color, circle-progress-primary-color);
+    }
+
+    .mini {
+        .use-var(stroke, circle-progress-mini-track-color);
+    }
+
+    .disabled {
+        .use-var(color, circle-progress-disabled-color);
+        .use-var(stroke, circle-progress-disabled-color);
+    }
+
+    .linear-gradient-start {
+        .use-var(stop-color, circle-progress-linear-gradient-start-color);
+    }
+
+    .linear-gradient-text {
+        .use-var(color, circle-progress-linear-gradient-text-color);
+    }
+
+    .linear-gradient-end {
+        .use-var(stop-color, circle-progress-linear-gradient-end-color);
+    }
+}

package/metaData/components/collapse/css-variables.md

@@ -0,0 +1,14 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-collapse-header-height | getRem(54) | collapse header的字体大小 |
+| --arco-collapse-header-font-size | getRem(16) | collapse header的左侧的margin |
+| --arco-collapse-header-margin-left | getRem(16) | collapse header的内边距 |
+| --arco-collapse-header-line-height | getRem(22) | collapse header的图标的颜色 |
+| --arco-collapse-content-font-size | getRem(14) | collapse content（面板）的字体颜色 |
+| --arco-collapse-content-line-height | getRem(22) | 下拉刷新组件状态文案内容区背景色 |