@fjyueke/arco-mcp 1.0.1 → 1.0.3

package/metaData/components/rate/style.md

@@ -0,0 +1,63 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-rate {
+    display: inline-flex;
+
+    &.disabled {
+        cursor: not-allowed;
+    }
+
+    &-icon-wrap {
+        .use-var(padding, rate-icon-offset);
+        .use-var(font-size, rate-icon-size);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    &-icon-wrap,
+    &-icon {
+
+        &.active,
+        &.half-active {
+            .use-var(color, rate-icon-active-color);
+
+            &.disabled {
+                .use-var(color, rate-icon-disabled-active-color);
+            }
+        }
+
+        &.normal {
+            .use-var(color, rate-icon-normal-color);
+        }
+    }
+
+    &-icon {
+
+        &.half-active {
+            position: absolute;
+            z-index: 1;
+
+            .style-with-rtl({
+                transform: scaleX(-1);
+            });
+        }
+    }
+
+    &-icon-click-half {
+        width: 50%;
+        height: 100%;
+        display: inline-block;
+        position: absolute;
+        z-index: 2;
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: 0;
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-searchbar-padding | getRem(16) | 搜索栏背景颜色 |
+| --arco-searchbar-square-shape-border-radius | getRem(2) | 圆形搜索栏的圆角大小 |
+| --arco-searchbar-round-shape-border-radius | getRem(9999) | 搜索输入框容器高度 |
+| --arco-searchbar-clear-icon-padding-left | getRem(16) | 搜索栏搜索按钮的颜色 |
+| --arco-searchbar-search-icon-font-size | getRem(16) | 搜索栏右侧取消按钮颜色 |
+| --arco-searchbar-cancel-btn-font-size | getRem(15) | 搜索栏右侧取消按钮的左边距 |
+| --arco-searchbar-cancel-btn-margin-left | getRem(16) | 搜索联想框背景颜色 |
+| --arco-searchbar-association-item-height | getRem(52) | 搜索联想框候选项内边距 |
+| --arco-searchbar-association-item-padding | getRem(16) | 搜索联想框候选项字体大小 |
+| --arco-searchbar-association-item-font-size | getRem(15) | 搜索联想框候选项普通文字颜色 |

package/metaData/components/search-bar/style.md

@@ -0,0 +1,115 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-search-bar {
+    &-container {
+        display: flex;
+        align-items: center;
+        position: relative;
+        .use-var(padding, search-bar-padding);
+        .use-var(background-color, search-bar-background-color);
+    }
+    &-square {
+        .@{prefix}-search-bar-wrap {
+            .use-var(border-radius, search-bar-square-shape-border-radius);
+        }
+    }
+    &-round {
+        .@{prefix}-search-bar-wrap {
+            .use-var(border-radius, search-bar-round-shape-border-radius);
+        }
+    }
+    &-wrap {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        .use-var(height, search-bar-input-wrapper-height);
+        .use-var(font-size, search-bar-input-wrapper-font-size);
+        .use-var(padding, search-bar-input-wrapper-padding);
+        .use-var(background-color, search-bar-input-wrapper-background-color);
+    }
+    &-input {
+        flex: 1;
+        background-color: transparent;
+        .use-var(color, font-color);
+        .use-var(height, search-bar-input-height);
+        .use-var(caret-color, search-bar-input-caret-color);
+        &-left {
+            .set-value-with-rtl(text-align, left);
+        }
+        &-right {
+            .set-value-with-rtl(text-align, right);
+        }
+        &-center {
+            text-align: center;
+        }
+
+        &::placeholder {
+            .use-var(color, search-bar-input-placeholder-color);
+        }
+
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
+
+    &-prefix,
+    &-suffix,
+    &-clear {
+        align-items: center;
+        justify-content: center;
+        display: flex;
+    }
+
+    &-prefix {
+        .use-var-with-rtl(margin-right, search-bar-prefix-margin-right);
+    }
+
+    &-clear {
+        .use-var(color, search-bar-clear-icon-color);
+        .use-var(font-size, search-bar-clear-icon-font-size);
+        .use-var-with-rtl(padding-left, search-bar-clear-icon-padding-left);
+    }
+
+    &-search-icon {
+        .use-var(color, search-bar-search-icon-color);
+        .use-var(font-size, search-bar-search-icon-font-size);
+    }
+
+    &-cancel-btn {
+        .use-var-with-rtl(margin-left, search-bar-cancel-btn-margin-left);
+        .use-var(color, search-bar-cancel-btn-color);
+        .use-var(font-size, search-bar-cancel-btn-font-size);
+    }
+
+    &-association {
+        position: absolute;
+        left: 0;
+        right: 0;
+        .use-var(background-color, search-bar-association-background-color);
+        top: 100%;
+        display: none;
+
+        &-visible {
+            display: block;
+        }
+
+        &-item {
+            .use-var(height, search-bar-association-item-height);
+            display: flex;
+            align-items: center;
+            position: relative;
+            .use-var(color, search-bar-association-item-color);
+            .use-var(padding, search-bar-association-item-padding);
+            .use-var(font-size, search-bar-association-item-font-size);
+
+            &:not(:last-child) {
+                .onepx-border-var(bottom, line-color);
+            }
+
+            &-highlight {
+                .use-var(color, search-bar-association-item-highlight-color)
+            }
+        }
+    }
+}

package/metaData/components/show-monitor/css-variables.md

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

package/metaData/components/show-monitor/style.md

@@ -0,0 +1 @@
+// 这里啥也没有，但是为了兼容 babel-plugin-import的统一引用，还是需要创建下文件

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

@@ -0,0 +1,15 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-skeleton-border-radius | getRem(0) | 骨架屏元素背景色 |
+| --arco-skeleton-title-height | getRem(16) | 骨架屏段落行高度 |
+| --arco-skeleton-paragraph-height | getRem(16) | 骨架屏各段落行间距 |
+| --arco-skeleton-paragraph-margin-top | getRem(12) | 骨架屏头像大小 |
+| --arco-skeleton-grid-icon-size | getRem(32) | 骨架屏金刚位文字区宽度 |
+| --arco-skeleton-grid-text-width | getRem(64) | 骨架屏金刚位文字区高度 |
+| --arco-skeleton-large-gutter | getRem(20) | 文件上传组件上传列表高度 |

package/metaData/components/skeleton/style.md

@@ -0,0 +1,147 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-skeleton {
+    position: relative;
+    .use-var(color, skeleton-gradient-animation-color);
+}
+
+.@{prefix}-skeleton-title {
+    .use-var(height, skeleton-title-height);
+}
+
+.@{prefix}-skeleton-paragraph {
+    &-line {
+        width: 100%;
+        .use-var(height, skeleton-paragraph-height);
+    }
+
+    &-line + &-line {
+        .use-var(margin-top, skeleton-paragraph-margin-top);
+    }
+}
+
+.@{prefix}-skeleton-avatar.@{prefix}-skeleton-item {
+    .use-var(width, skeleton-avatar-size);
+    .use-var(height, skeleton-avatar-size);
+    border-radius: 100%;
+    transform: translateZ(0);
+}
+
+.@{prefix}-skeleton-content {
+    width: 100%;
+
+    .@{prefix}-skeleton-title + .@{prefix}-skeleton-paragraph {
+        .use-var(margin-top, skeleton-large-gutter);
+    }
+}
+
+.@{prefix}-skeleton-with-avatar {
+    display: flex;
+    align-items: flex-start;
+
+    .@{prefix}-skeleton-avatar {
+        flex: none;
+    }
+
+    .@{prefix}-skeleton-content {
+        .@{prefix}-skeleton-title {
+            .use-var(margin-top, skeleton-medium-gutter);
+        }
+    }
+
+    .@{prefix}-skeleton-avatar + .@{prefix}-skeleton-content {
+        .use-var-with-rtl(margin-left, skeleton-medium-gutter);
+    }
+}
+
+.@{prefix}-skeleton-grid {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    &-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    &-icon {
+        .use-var(width, skeleton-grid-icon-size);
+        .use-var(height, skeleton-grid-icon-size);
+    }
+    &-text {
+        .use-var(margin-top, skeleton-medium-gutter);
+        .use-var(width, skeleton-grid-text-width);
+        .use-var(height, skeleton-grid-text-height);
+    }
+}
+
+.@{prefix}-skeleton-node {
+    display: inline-block;
+}
+
+.@{prefix}-skeleton-item {
+    position: relative;
+    overflow: hidden;
+    .use-var(border-radius, skeleton-border-radius);
+    .use-var(background-color, skeleton-background-color);
+}
+
+.@{prefix}-skeleton-animation-item {
+    position: absolute;
+    width: 100vw;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 35%,
+        currentColor 50%,
+        rgba(255, 255, 255, 0) 65%
+    );
+    transform-origin: top left;
+    animation-name: skeleton-gradient;
+    animation-iteration-count: infinite;
+    .use-var(animation-timing-function, skeleton-gradient-animation-timing-function);
+    .use-var(animation-duration, skeleton-gradient-animation-duration);
+    .style-with-rtl({
+        animation-name: skeleton-gradient-reverse;
+    });
+}
+.@{prefix}-skeleton-animation-breath {
+    animation: skeleton-breath linear infinite;
+    .use-var(animation-duration, skeleton-breath-animation-duration);
+}
+
+@keyframes skeleton-gradient {
+    0% {
+        transform: translateX(-65%) skewX(-45deg);
+    }
+
+    100% {
+        transform: translateX(135%) skewX(-45deg);
+    }
+}
+
+@keyframes skeleton-gradient-reverse {
+    0% {
+        transform: translateX(65%) skewX(45deg);
+    }
+
+    100% {
+        transform: translateX(-135%) skewX(45deg);
+    }
+}
+
+@keyframes skeleton-breath {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        .use-var(opacity, skeleton-breath-opacity);
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

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

@@ -0,0 +1,22 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-slider-mask-padding | getRem(15) | slider 有标记时的底部内边距 |
+| --arco-slider-has-mark-padding-bottom | getRem(35) | slider 两侧标注文字大小 |
+| --arco-slider-label-font-size | getRem(16) | slider 两侧标注与滑动条的间距 |
+| --arco-slider-label-gutter | getRem(12) | slider 标记文案的字体颜色 |
+| --arco-slider-line-border-radius | getRem(4) | slider 被选中时的线条颜色 |
+| --arco-slider-thumb-width | getRem(24) | slider 滑块的高度 |
+| --arco-slider-thumb-height | getRem(24) | slider 滑块的边框半径 |
+| --arco-slider-popover-font-size | getRem(12) | slider 气泡内容字体行高 |
+| --arco-slider-popover-line-height | getRem(17) | slider 气泡底部的外边距（垂直时是左外边距） |
+| --arco-slider-popover-gutter | getRem(14) | slider 滑动条节点的宽度 |
+| --arco-slider-mark-label-font-size | getRem(14) | slider 滑动条节点文案的字体行高 |
+| --arco-slider-mark-label-line-height | getRem(20) | slider 横向滑动条节点文案距离节点的顶部距离 |
+| --arco-slider-horizontal-mark-label-top | getRem(19) | slider 纵向滑动条节点文案距离节点的右距离 |
+| --arco-slider-vertical-mark-label-right | getRem(13) | swipeLoad 滑动区域的背景色 |