@fjyueke/arco-mcp 1.0.1 → 1.0.3

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

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

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

@@ -0,0 +1,103 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-image-preview,
+.image-preview-lock-modal {
+    .full-screen();
+    z-index: @full-screen-z-index;
+}
+
+.image-preview-lock-modal {
+    transform: translateZ(2PX);
+}
+
+.@{prefix}-image-preview {
+    .use-var(background, image-preview-mask-background);
+
+    &.noselect {
+        -webkit-touch-callout: none;
+        .noselect();
+    }
+
+    .preview-image-wrap-container, .preview-image-wrap {
+        width: 100%;
+        height: 100%;
+    }
+    .@{prefix}-carousel-wrap,
+    .@{prefix}-carousel,
+    .@{prefix}-carousel-inner {
+        height: 100%;
+    }
+
+    .carousel-item {
+        overflow: hidden;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .preview-image {
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+
+        .image-container {
+            overflow: visible;
+        }
+
+        &.preview-hidden {
+            pointer-events: none;
+
+            .image-container {
+                visibility: hidden;
+            }
+        }
+
+        .image-bottom-overlap {
+            overflow: visible;
+        }
+    }
+}
+
+.image-preview-indicator {
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    z-index: @full-screen-z-index + 3;
+    position: fixed;
+    box-sizing: border-box;
+    .use-var(font-size, image-preview-indicator-font-size);
+    .use-var(color, mask-content-color);
+    .use-var(padding, image-preview-indicator-padding);
+    .use-var(background, image-preview-indicator-background);
+}
+
+.image-preview-fake-rect {
+    .full-screen();
+    opacity: 0;
+}
+
+.@{prefix}-image-preview .image-container img.closing-animation,
+.image-preview-fake-trans-image {
+    position: fixed;
+    left: 0;
+    top: 0;
+    object-fit: cover;
+    .use-var(transition, image-preview-thumb-transition);
+    will-change: transform;
+    pointer-events: none;
+    height: auto !important;
+}
+
+.image-preview-loading-area {
+    .full-screen();
+    z-index: @full-screen-z-index + 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+
+    .loading-icon {
+        .set-loading-color-var(mask-content-color);
+    }
+}

package/metaData/components/index-bar/css-variables.md

@@ -0,0 +1,20 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-indexbar-group-left-spacing | getRem(16) | 索引栏索引标题高度 |
+| --arco-indexbar-group-title-height | getRem(24) | 索引栏标题背景颜色 |
+| --arco-indexbar-group-title-font-size | getRem(14) | 索引栏内容子项高度 |
+| --arco-indexbar-group-item-height | getRem(54) | 索引栏内容子项字号大小 |
+| --arco-indexbar-group-item-font-size | getRem(16) | 索引栏侧边栏激活索引颜色 |
+| --arco-indexbar-sidebar-item-font-size | getRem(10) | 索引栏侧边栏子项字号行高 |
+| --arco-indexbar-sidebar-item-line-height | getRem(14) | 索引栏侧边栏子项高度 |
+| --arco-indexbar-sidebar-item-width | getRem(10) | 索引栏侧边栏水滴提示气泡的内边距 |
+| --arco-indexbar-sidebar-sweat-right | getRem(36) | 索引栏侧边栏水滴字号大小 |
+| --arco-indexbar-sidebar-sweat-font-size | getRem(24) | 索引栏侧边栏水滴直径 |
+| --arco-indexbar-sidebar-sweat-radius | getRem(50) | 索引栏侧边栏三角气泡位置 |
+| --arco-indexbar-sidebar-sweat-triangle-position | getRem(-28) | 索引栏侧边栏三角气泡的border |

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

@@ -0,0 +1,20 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-input-height | getRem(54) | 输入框 禁用状态文字色 |
+| --arco-input-label-gutter | getRem(24) | 输入框 外包层水平内边距 |
+| --arco-input-horizontal-padding | getRem(16) | 输入框 外包层垂直内边距 |
+| --arco-input-vertical-padding | getRem(12) | 输入框 光标颜色 |
+| --arco-input-label-min-width | getRem(64) | 输入框 文字字体大小 |
+| --arco-input-text-font-size | getRem(16) | 输入框 文字行高 |
+| --arco-input-text-line-height | getRem(22) | 多行文本框 字号 |
+| --arco-input-search-bar-input-wrapper-height | getRem(36) | 搜索输入框容器内边距大小 |
+| --arco-input-search-bar-input-wrapper-font-size | getRem(14) | 搜索输入框高度 |
+| --arco-input-search-bar-input-height | getRem(20) | 搜索输入框光标颜色 |
+| --arco-input-stepper-input-width | getRem(40) | 步进器输入框长度 |
+| --arco-input-stepper-input-height | getRem(28) | 步进器输入框外边距 |

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

@@ -0,0 +1,16 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-keyboard-content-padding | getRem(8) | 键盘统一边距 |
+| --arco-keyboard-unified-margin | getRem(8) | 键盘右边一列确认键背景色 |
+| --arco-keyboard-confirm-key-font-size | getRem(18) | 键盘按钮字重 |
+| --arco-keyboard-key-font-size | getRem(22) | 键盘按钮中的图标大小 |
+| --arco-keyboard-key-icon-size | getRem(26) | 键盘按钮字体行高 |
+| --arco-keyboard-key-line-height | getRem(30) | 键盘按钮背景色 |
+| --arco-keyboard-key-border-radius | getRem(4) | 键盘按钮高度 |
+| --arco-keyboard-key-height | getRem(48) | 键盘按钮字体颜色 |

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

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

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

@@ -0,0 +1,10 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-loading-toast-loading-inner-font-size | getRem(12) | toast 距屏幕边缘的安全距离 |
+| --arco-loading-dot-gutter | getRem(6) | 选择器选项字体大小 |

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

package/metaData/components/masking/style.md

@@ -0,0 +1,30 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-masking {
+    &-mask,
+    &-content {
+        &.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
+        &[class*="-exit-done"] {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+    &-mask {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: @full-screen-z-index;
+        .use-var(background, mask-background);
+    }
+    &-content {
+        position: fixed;
+        z-index: @full-screen-z-index + 1;
+        &.at-center {
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}

package/metaData/components/nav-bar/css-variables.md

@@ -0,0 +1,13 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-navbar-height | getRem(44) | navBar 下边框颜色 |
+| --arco-navbar-two-sides-font-size | getRem(16) | navBar 左右两侧内边距 |
+| --arco-navbar-title-font-size | getRem(17) | navBar 标题区域文字字体大小 |
+| --arco-navbar-title-text-font-size | getRem(17) | navBar 标题区域左右内边距 |
+| --arco-navbar-back-icon-height | getRem(16) | 图片 placeholder 背景色 |