@fjyueke/arco-mcp 1.0.1 → 1.0.3

package/metaData/components/dropdown-menu/style.md

@@ -0,0 +1,60 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-dropdown-menu {
+    .@{prefix}-select{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .onepx-border-var(bottom, line-color);
+        &-item {
+            position: relative;
+            .use-var(padding, dropdown-menu-padding);
+            .use-var(font-size, dropdown-menu-font-size);
+            .use-var(line-height, dropdown-menu-line-height);
+            flex: 1;
+            display:flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: center;
+            .use-var(color, dropdown-menu-color);
+            &.is-disabled {
+                .use-var(color, dropdown-menu-disabled-color);
+            }
+            &.is-selected {
+                .use-var(color, dropdown-menu-selected-color);
+            }
+            &-tip {
+                display: inline-block;
+                white-space: nowrap;
+                .use-var(color, dropdown-menu-tip-color);
+                .use-var-with-rtl(padding-right, dropdown-menu-tip-padding-right);
+            }
+            &-label {
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: center;
+                &-text {
+                    flex: auto;
+                    display: inline-block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    .use-var(max-width, dropdown-menu-label-max-width);
+                    text-overflow: ellipsis;
+                }
+            }
+            &-icon {
+                flex: none;
+                .use-var(color, dropdown-menu-icon-color);
+                .use-var(width, dropdown-menu-icon-size);
+                .use-var(height, dropdown-menu-icon-size);
+                .use-var-with-rtl(margin-left, dropdown-menu-icon-margin-left);
+                transform: rotate(0deg);
+                transition: transform .2s cubic-bezier(.34, .69, .1, 1);
+                &.is-show {
+                    .use-var(color, dropdown-menu-icon-selected-color);
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,9 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-ellipsis-default-text-size | getRem(16) | 文字缩略组件浮动模式下的缩略符背景色 |

package/metaData/components/ellipsis/style.md

@@ -0,0 +1,31 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-ellipsis {
+    .use-var(font-size, ellipsis-default-text-size);
+
+    &-native.ellipsis,
+    &-js-content-initial {
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        -webkit-box-orient: vertical;
+        position: relative;
+    }
+
+    &-native-ellipsis-node {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        .use-var(background, ellipsis-float-ellipsis-node-background);
+        .use-var(padding-left, ellipsis-float-ellipsis-node-padding-left);
+    }
+
+    &-js-content-text-pre {
+        white-space: pre-line;
+    }
+    
+    &-js-content-ellipsis {
+        display: none;
+    }
+}

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

@@ -0,0 +1,12 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-form-item-label-item-font-size | getRem(16) | 表单项标签行高 |
+| --arco-form-item-label-item-line-height | getRem(54) | 表单项标签颜色 |
+| --arco-form-item-label-item-gutter | getRem(16) | 表单项标签宽度 |
+| --arco-form-item-label-item-width | getRem(96) | 表单项分割线颜色 |

package/metaData/components/form/style.md

@@ -0,0 +1,105 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-form {
+    &-item {
+        display: flex;
+        align-items: flex-start;
+        border-top-width: 1px;
+        border-top-style: solid;
+        .use-var(border-top-color, form-item-border-divider-color);
+
+        &:first-child {
+            border: none;
+        }
+    }
+
+    &-label-item {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: flex-start;
+        .use-var(font-size, form-item-label-item-font-size);
+        .use-var(line-height, form-item-label-item-line-height);
+        .use-var(color, form-item-label-item-color);
+        .use-var-with-rtl(padding-right, form-item-label-item-gutter);
+        .use-var(width, form-item-label-item-width);
+
+        &-required-asterisk {
+            position: absolute;
+            .set-prop-with-rtl(left, -0.6em);
+            top: 0;
+
+            .use-var(font-size, form-item-label-item-font-size);
+            .use-var(line-height, form-item-label-item-line-height);
+            .use-var(color, form-item-label-item-required-asterisk-color);
+        }
+        .disabled & {
+            .use-var(color, input-disabled-color);
+        }
+    }
+    &-item-control {
+        padding: 16px 0;
+        .@{prefix}-input-wrap, .@{prefix}-input {
+            padding: 0;
+        }
+
+        .@{prefix}-input-wrap.textarea {
+            padding: 0;
+        }
+
+        &-wrapper {
+            width: 100%;
+            flex: 1;
+            position: relative;
+            .@{prefix}-input-wrap.single-line {
+                .use-var(height, input-text-line-height);
+            }
+        }
+    }
+    &-item-message {
+        .rem(font-size, 12);
+        .use-var(color, form-item-label-item-required-asterisk-color);
+        .rem(margin-top, -5);
+        svg,
+        span {
+            vertical-align: middle;
+        }
+
+        svg {
+            .rem-with-rtl(margin-right, 4);
+        }
+        margin-bottom: 16px;
+    }
+    &-item-error-message {
+        .use-var(color, form-item-error-message-color);
+    }
+
+    &-item-warning-message {
+        .use-var(color, form-item-warning-message-color);
+    }
+
+    &-item.@{prefix}-form-item-vertical {
+        display: block;
+        .@{prefix}-input-wrap {
+            .set-prop-with-rtl(padding-left, 0);
+        }
+        .@{prefix}-form-label-item {
+            width: auto;
+            margin-top: 16px;
+            .use-var(height, form-item-label-item-font-size);
+            .use-var( line-height, form-item-label-item-font-size);
+            &-required-asterisk {
+                .use-var(height, form-item-label-item-font-size);
+                .use-var( line-height, form-item-label-item-font-size);
+            }
+        }
+    }
+
+    &-picker-link-container {
+        .rem(font-size, 16);
+        .use-var(color, font-color);
+        &-placeholder {
+            .use-var(color, input-placeholder-color);
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-grid-icon-width | getRem(32) | 宫格组件每个单元格图标的高度 |
+| --arco-grid-icon-height | getRem(32) | 宫格组件垂直布局中文字区域顶部间距 |
+| --arco-grid-vertical-text-margin-top | getRem(8) | 宫格组件垂直布局中标题字体大小 |
+| --arco-grid-vertical-title-font-size | getRem(16) | 宫格组件垂直布局中标题字体行高 |
+| --arco-grid-vertical-title-line-height | getRem(20) | 宫格组件垂直布局中描述内容顶部间距 |
+| --arco-grid-vertical-content-margin-top | getRem(2) | 宫格组件垂直布局中描述内容字体大小 |
+| --arco-grid-vertical-content-font-size | getRem(12) | 宫格组件垂直布局中描述内容字体行高 |
+| --arco-grid-vertical-content-line-height | getRem(16) | 宫格组件水平布局中文字区域左侧间距 |
+| --arco-grid-horizontal-text-margin-left | getRem(12) | 宫格组件水平布局中描述内容顶部间距 |
+| --arco-grid-horizontal-content-margin-top | getRem(0) | 宫格组件分割线颜色 |

package/metaData/components/grid/style.md

@@ -0,0 +1,109 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-grid {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &-rows {
+        display: flex;
+
+        &-item {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+
+            &-icon {
+                .use-var(width, grid-icon-width);
+                .use-var(height, grid-icon-height);
+            }
+
+            &-icon.circle {
+                border-radius: 50%;
+            }
+
+            &-text {
+                display: flex;
+                flex-direction: column;
+                .use-var(margin-top, grid-vertical-text-margin-top);
+                text-align: center;
+            }
+
+            &-title {
+                .use-var(font-size, grid-vertical-title-font-size);
+                .use-var(line-height, grid-vertical-title-line-height);
+            }
+
+            &-content {
+                .use-var(font-size, grid-vertical-content-font-size);
+                .use-var(line-height, grid-vertical-content-line-height);
+                .use-var(margin-top, grid-vertical-content-margin-top);
+                .use-var(color, sub-info-font-color);
+            }
+
+        }
+
+        &-item.horizontal {
+            flex-direction: row;
+
+            .@{prefix}-grid-rows-item {
+
+                &-text {
+                    .use-var-with-rtl(margin-left, grid-horizontal-text-margin-left);
+                    margin-top: 0;
+                    .set-value-with-rtl(text-align, left);
+                }
+
+                &-content {
+                    .use-var(margin-top, grid-horizontal-content-margin-top);
+                }
+
+            }
+        }
+
+        &-item.border {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .vertical-border:after {
+                content: "";
+                width: 1px;
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: scaleX(.5) translateY(-50%);
+                .use-var(height, grid-border-size);
+                .use-var(background-color, grid-border-color);
+            }
+
+            .horizontal-border:after {
+                content: "";
+                height: 1px;
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                transform: scaleY(.5) translateX(-50%);
+                .use-var(width, grid-border-size);
+                .use-var(background-color, grid-border-color);
+            }
+        }
+    }
+}
+.@{prefix}-grid.sliding {
+    display: inline-block;
+    overflow-x: auto;
+}
+
+.@{prefix}-grid.sliding::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+}
+
+.@{prefix}-grid {
+    .@{prefix}-image-picker {
+        width: 100%; /* 兼容grid和image-picker组合使用 */
+    }
+}

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

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

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

@@ -0,0 +1,18 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-image-inner-font-size | getRem(16) | 图片重试时字体大小 |
+| --arco-image-retry-font-size | getRem(16) | switch 文字颜色 |
+| --arco-image-preview-indicator-font-size | getRem(14) | 图片预览指示器内边距 |
+| --arco-image-picker-font-size | getRem(14) | 图片选择器禁用状态下的透明度 |
+| --arco-image-picker-border-radius | getRem(2) | 图片选择器添加图片按钮的背景色 |
+| --arco-image-picker-add-icon-font-size | getRem(30) | 图片选择器添加图片按钮的图标颜色 |
+| --arco-image-picker-add-text-font-size | getRem(12) | 图片选择器添加图片按钮的字体颜色 |
+| --arco-image-picker-close-font-size | getRem(12) | 图片选择器关闭按钮宽度 |
+| --arco-image-picker-close-width | getRem(18) | 图片选择器关闭按钮高度 |
+| --arco-image-picker-close-height | getRem(18) | 图片选择器关闭按钮背景色 |

package/metaData/components/image/style.md

@@ -0,0 +1,144 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-image {
+    display: inline-block;
+    position: relative;
+
+    &.preview {
+        transition: all 0.3s ease-in-out;
+
+        .image-container,
+        .image-loading-container .image-loading,
+        .image-error-container .image-retry-load {
+            background-color: transparent;
+        }
+
+        .image-container::after {
+            border-color: transparent;
+        }
+    }
+
+    .image-bottom-overlap,
+    .image-top-overlap {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .image-bottom-overlap {
+        z-index: 0;
+        overflow: hidden;
+    }
+
+    .image-placeholder {
+        .use-var(background-color, image-placeholder-background);
+        width: 100%;
+        height: 100%;
+    }
+
+    .image-top-overlap {
+        z-index: 10;
+    }
+
+    .image-loading-container,
+    .image-error-container {
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        .use-var(font-size, image-inner-font-size);
+    }
+
+    .image-container {
+        position: relative;
+        font-size: 0;
+        opacity: 0;
+        z-index: 1;
+        overflow: hidden;
+
+        &.static-label,
+        &.loaded,
+        &.error,
+        &.has-loaded {
+            opacity: 1;
+        }
+
+        &.animate {
+            transition-property: opacity;
+            .use-var(transition-timing-function, image-transition-function);
+        }
+
+        .bordered {
+            .hairline-var(line-color);
+        }
+
+        &,
+        & img {
+            width: inherit;
+            height: inherit;
+            min-width: inherit;
+            min-height: inherit;
+            max-width: inherit;
+            max-height: inherit;
+        }
+
+        .preview-fit-contain-y {
+            width: 100%;
+            height: auto;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .preview-fit-contain-x {
+            height: 100%;
+            width: auto;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+    .image-error-container {
+        .image-retry-load {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .use-var(background-color, image-mask-background);
+            .use-var(font-size, image-retry-font-size);
+            .use-var(color, image-retry-icon-color);
+        }
+    }
+
+    .image-loading-container {
+        .image-loading {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .use-var(color, image-loading-icon-color);
+            .use-var(background-color, image-mask-background);
+            .set-loading-color-var(image-loading-icon-color);
+        }
+    }
+}

package/metaData/components/image-picker/css-variables.md

@@ -0,0 +1,18 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-imagepicker-uploader-item-height | getRem(36) | 文件上传组件上传列表上边距 |
+| --arco-imagepicker-uploader-item-margin-top | getRem(16) | 文件上传组件上传列表内边距 |
+| --arco-imagepicker-uploader-file-icon-font-size | getRem(16) | 文件上传组件上传列表文件图标右边距 |
+| --arco-imagepicker-uploader-file-icon-margin-right | getRem(12) | 文件上传组件上传列表文件图标颜色 |
+| --arco-imagepicker-uploader-item-text-font-size | getRem(14) | 文件上传组件上传列表外边框圆角 |
+| --arco-imagepicker-uploader-item-border-radius | getRem(2) | 文件上传组件上传列表文字颜色 |
+| --arco-imagepicker-uploader-loaded-icon-font-size | getRem(16) | 文件上传组件上传列表加载成功图标颜色 |
+| --arco-imagepicker-uploader-error-text-font-size | getRem(12) | 文件上传组件上传列表错误文字颜色 |
+| --arco-imagepicker-uploader-delete-icon-font-size | getRem(12) | 文件上传组件上传列表删除图标左内边距 |
+| --arco-imagepicker-uploader-delete-icon-padding-left | getRem(12) | 文件上传组件上传列表删除图标颜色 |

package/metaData/components/image-picker/style.md

@@ -0,0 +1,116 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-image-picker {
+    .use-var(font-size, image-picker-font-size);
+    &-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .container() {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        left: 0;
+    }
+    &-image {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: 100%;
+        .use-var(border-radius, image-picker-border-radius);
+        overflow: hidden;
+        &-container {
+            .container()
+        }
+        .@{prefix}-image {
+            height: 100%;
+            width: 100%;
+        }
+        &-mask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+        }
+    }
+    &-add {
+        .use-var(background-color, image-picker-add-background);
+        .use-var(border-radius, image-picker-border-radius);
+        position: relative;
+        width: 100%;
+        height: 100%;
+        padding-top: 100%;
+        &-container {
+            .container();
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            .use-var(font-size, image-picker-add-text-font-size);
+            .use-var(color, image-picker-add-text-color);
+        }
+        &-icon {
+            .use-var(font-size, image-picker-add-icon-font-size);
+            .use-var(color, image-picker-add-icon-color);
+            svg {
+                display: block;
+            }
+        }
+        &-disabled {
+            pointer-events: none;
+        }
+        &-disabled &-icon {
+            .use-var(opacity, image-picker-disabled-opacity);
+        }
+        input {
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+        }
+    }
+    &-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+        &-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .use-var(font-size, image-picker-close-font-size);
+            .use-var(width, image-picker-close-width);
+            .use-var(height, image-picker-close-height);
+            .use-var(color, image-picker-close-color);
+            .use-var(background, image-picker-close-background);
+            .use-var(border-radius, image-picker-close-border-radius);
+        }
+    }
+    &-error {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .use-var(background, image-picker-error-background);
+        .use-var(color, image-picker-error-color);
+        .use-var(font-size, image-picker-font-size);
+    }
+}
+
+.@{prefix}-image-picker-disabled {
+    pointer-events: none;
+}