@fjyueke/arco-mcp 1.0.1 → 1.0.3

package/metaData/components/popover/style.md

@@ -0,0 +1,226 @@
+@import "../../../style/mixin.less";
+@import "./menu.less";
+
+.full() {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.@{prefix}-popover {
+    position: relative;
+    display: inline-flex;
+
+    .popover-child-inner {
+        font-size: 0;
+        line-height: 1;
+    }
+}
+
+.@{prefix}-popover-mask {
+    .full-screen();
+    .use-var(background, popover-mask-background);
+    z-index: @full-screen-z-index;
+}
+
+.@{prefix}-popover-inner {
+    box-sizing: border-box;
+    position: absolute;
+    width: max-content;
+    z-index: @full-screen-z-index + 10;
+    background-color: transparent;
+    visibility: hidden;
+    will-change: transform;
+    .use-var(transition, popover-inner-transition);
+    .use-var(color, popover-content-color);
+
+    &.with-shadow {
+        .popover-bg {
+            .use-var(box-shadow, popover-inner-background-shadow);
+        }
+
+        .popover-arrow {
+            &.topRight,
+            &.topCenter,
+            &.topLeft {
+                .use-var(box-shadow, popover-inner-top-arrow-shadow);
+            }
+
+            &.bottomRight,
+            &.bottomCenter,
+            &.bottomLeft {
+                .use-var(box-shadow, popover-inner-bottom-arrow-shadow);
+            }
+        }
+    }
+
+    &.show {
+        visibility: visible;
+    }
+
+    .popover-content {
+        position: relative;
+        z-index: 1;
+        .full();
+        .use-var(border-radius, popover-inner-border-radius);
+    }
+
+    .popover-bg {
+        position: absolute;
+        .full();
+        .use-var(border-radius, popover-inner-border-radius);
+        .use-var(background-color, popover-background-color);
+        .use-var(opacity, popover-inner-opacity);
+    }
+
+    .content-text {
+        white-space: normal;
+        word-break: break-all;
+        text-align: left;
+        .use-var(font-size, popover-content-font-size);
+        .use-var(line-height, popover-content-line-height);
+        .use-var(padding, popover-content-padding);
+    }
+
+    &.with-suffix {
+        .popover-content {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .icon-divider {
+        width: 1PX;
+        .use-var(height, popover-icon-divider-height);
+        .hairline-var(popover-icon-divider-color, left);
+    }
+
+    .text-close-icon {
+        display: inline-flex;
+        .use-var(font-size, popover-icon-size);
+        .use-var(padding, popover-icon-padding);
+    }
+
+    .text-suffix {
+        .use-var-with-rtl(padding-right, popover-text-suffix-edge);
+        flex: 0 0 auto;
+    }
+
+    .popover-arrow {
+        position: absolute;
+        transform: rotate(45deg);
+        .use-var(width, popover-arrow-size);
+        .use-var(height, popover-arrow-size);
+        .use-var(background-color, popover-background-color);
+
+        &.topRight,
+        &.topCenter,
+        &.topLeft {
+            &,
+            .popover-arrow-content {
+                .use-var(border-bottom-right-radius, popover-arrow-border-radius);
+            }
+        }
+
+        &.bottomRight,
+        &.bottomCenter,
+        &.bottomLeft {
+            &,
+            .popover-arrow-content {
+                .use-var(border-top-left-radius, popover-arrow-border-radius);
+            }
+        }
+
+        &.topRight,
+        &.topCenter,
+        &.topLeft {
+            transform: translateY(50%) rotate(45deg);
+        }
+
+        &.topRight {
+            bottom: 0;
+            right: 0;
+        }
+
+        &.topCenter,
+        &.topLeft {
+            bottom: 0;
+            left: 0;
+        }
+
+        &.bottomRight,
+        &.bottomCenter,
+        &.bottomLeft {
+            transform: translateY(-50%) rotate(45deg);
+        }
+
+        &.bottomRight {
+            top: 0;
+            right: 0;
+        }
+
+        &.bottomCenter,
+        &.bottomLeft {
+            top: 0;
+            left: 0;
+        }
+    }
+
+    // 白色主题
+
+    &.white-theme {
+        .use-var(color, popover-content-white-theme-color);
+
+        .popover-bg {
+            .use-var(background-color, popover-white-theme-background-color);
+            .use-var(opacity, popover-inner-white-theme-opacity);
+        }
+
+        .popover-arrow {
+            .use-var(background-color, popover-white-theme-background-color);
+        }
+
+        .popover-arrow-content {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background-color: inherit;
+        }
+    }
+
+    // 带border的白色主题
+
+    &.white-theme.bordered {
+        .popover-bg {
+            .hairline-var(popover-content-white-theme-border-color);
+        }
+
+        .popover-arrow-content {
+            .use-var(border-color, popover-content-white-theme-border-color);
+        }
+
+        .popover-arrow {
+            &.topRight,
+            &.topCenter,
+            &.topLeft {
+                .popover-arrow-content {
+                    .hairline-bottom-right-var(popover-content-white-theme-border-color);
+                }
+            }
+
+            &.bottomRight,
+            &.bottomCenter,
+            &.bottomLeft {
+                .popover-arrow-content {
+                    .hairline-top-left-var(popover-content-white-theme-border-color);
+                }
+            }
+        }
+    }
+}
+
+// 全局模式
+.global-mode.@{prefix}-popover-inner {
+    position: fixed;
+}

package/metaData/components/popup/style.md

@@ -0,0 +1,115 @@
+@import '../../../style/mixin.less';
+
+.set-popup-transform(@transform) {
+
+    &-enter,
+    &-exit-active,
+    &-exit-done {
+        transform: @transform;
+
+        &.translateZ {
+            transform: @transform translateZ(2PX);
+        }
+    }
+}
+
+.@{prefix}-popup {
+    .@{prefix}-slide-from {
+        &-left {
+            .set-popup-transform(translate(-100%, 0));
+        }
+
+        &-right {
+            .set-popup-transform(translate(100%, 0));
+        }
+
+        &-top {
+            .set-popup-transform(translate(0, -100%));
+        }
+
+        &-bottom {
+            .set-popup-transform(translate(0, 100%));
+        }
+    }
+
+    &-content,
+    &-mask {
+        &[class*="-enter-active"] {
+            &.translateZ {
+                transform: translateZ(2PX);
+            }
+
+            transform: translate(0, 0);
+            .use-var(transition, popup-enter-transition);
+        }
+    }
+
+    [class*="-exit-active"] {
+        .use-var(transition, popup-exit-transition);
+    }
+
+    &-content {
+        &[class*="-enter-active"] {
+            transition-duration: var(--builtin-transition-popup-slide-enter-duration, 450ms);
+        }
+        &[class*="-exit-active"] {
+            transition-duration: var(--builtin-transition-popup-slide-exit-duration, 240ms);
+        }
+        &.need-bottom-offset {
+            padding-bottom: constant(safe-area-inset-bottom);
+            padding-bottom: env(safe-area-inset-bottom);
+        }
+
+        &.left {
+            left: 0;
+            top: 0;
+            height: 100%;
+        }
+
+        &.top {
+            left: 0;
+            top: 0;
+            width: 100%;
+        }
+
+        &.right {
+            right: 0;
+            top: 0;
+            height: 100%;
+        }
+
+        &.bottom {
+            left: 0;
+            bottom: 0;
+            width: 100%;
+        }
+
+        &.translateZ {
+            transform: translateZ(2PX);
+        }
+
+        .use-var(background, popup-content-background);
+        position: fixed;
+        z-index: @full-screen-z-index+1;
+    }
+
+    &-mask {
+        &[class*="-enter-active"] {
+            transition-duration: var(--builtin-transition-fade-enter-duration, 450ms);
+        }
+        &[class*="-exit-active"] {
+            transition-duration: var(--builtin-transition-fade-exit-duration, 240ms);
+        }
+        &.translateZ {
+            transform: translateZ(1PX);
+        }
+
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: @full-screen-z-index;
+        .use-var(background, popup-mask-background);
+    }
+}

package/metaData/components/popup-swiper/style.md

@@ -0,0 +1,10 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-popup-swiper {
+    &.has-trans .@{prefix}-popup {
+        &-mask,
+        &-content {
+            .use-var(transition, popup-exit-transition);
+        }
+    }
+}

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

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

package/metaData/components/portal/style.md

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

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

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

package/metaData/components/progress/style.md

@@ -0,0 +1,114 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-progress {
+
+    &.progress-fixed {
+        position: fixed;
+        width: 100%;
+        .set-prop-with-rtl(left, 0);
+        z-index: @full-screen-z-index + 1;;
+    }
+
+    .progress-wrapper {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        .progress-track {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            .use-var(background-color, progress-track-color);
+            .use-var(height, progress-track-height);
+
+            &.position-innerLeft {
+                .use-var(height, progress-inner-track-height);
+            }
+
+            &.nav-mode {
+                .use-var(background-color, progress-nav-track-color);
+                .use-var(height, progress-nav-track-height);
+            }
+        }
+
+        .progress-bar {
+            height: 100%;
+            position: relative;
+            .use-var(background-color, progress-primary-color);
+
+            .wrapper {
+                position: absolute;
+                .set-prop-with-rtl(right, 0);
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+
+        .filleted {
+            border-radius: 100PX;
+        }
+
+        .text {
+            .use-var(font-size, progress-text-font-size);
+            .use-var-with-rtl(margin-left, progress-text-gutter);
+            .use-var(color, progress-primary-color);
+        }
+
+        .text-left {
+            .set-prop-with-rtl(margin-left, 0);
+            .use-var-with-rtl(margin-right, progress-text-gutter);
+        }
+
+        .text-innerLeft {
+            position: absolute;
+            z-index: 1;
+            .use-var(color, progress-text-inner-color);
+        }
+
+        .text-center {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            z-index: 1;
+            transform: translate(-50%, -50%);
+            .use-var(color, progress-text-inner-color);
+        }
+
+        .text-follow {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .use-var(width, progress-text-follow-width);
+            .use-var(height, progress-text-follow-height);
+            .use-var(border-radius, progress-text-follow-border-radius);
+            .use-var(font-size, progress-text-follow-font-size);
+            .use-var(color, progress-text-inner-color);
+            .use-var(background-color, progress-primary-color);
+        }
+
+        .track-color {
+            .use-var(background-color, progress-track-color); }
+
+        .color {
+            .use-var(stroke, progress-primary-color);
+            .use-var(color, progress-primary-color);
+        }
+
+        .bar-disabled {
+            .use-var(background-color, progress-disabled-color);
+        }
+
+        .text-disabled {
+            .use-var(color, progress-disabled-text-color);
+        }
+
+        .inner-disabled {
+            .use-var(color, progress-text-inner-color);
+
+            &.inner-block-disabled {
+                .use-var(background-color, progress-disabled-color);
+            }
+        }
+    }
+}

package/metaData/components/pull-refresh/css-variables.md

@@ -0,0 +1,9 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-pullrefresh-label-font-size | getRem(12) | 下拉刷新组件容器背景色 |

package/metaData/components/pull-refresh/style.md

@@ -0,0 +1,86 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-pull-refresh {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    &.is-disabled,
+    &-content,
+    &-content-wrapper {
+        .use-var(background, pull-refresh-content-background-color);
+    }
+
+    &-content {
+        min-height: 100%;
+    }
+
+    &.is-ios &-content-wrapper {
+        list-style-type: none;
+        padding: 0;
+        padding-bottom: 1PX;
+        margin: 0;
+        min-height: 100%;
+        box-sizing: content-box;
+        transform: translateZ(0);
+    }
+
+    &-label {
+        position: absolute;
+        display: flex;
+        width: 100%;
+        height: fit-content;
+        justify-content: center;
+        align-items: center;
+        z-index: -1;
+        .use-var(font-size, pull-refresh-label-font-size);
+        .use-var(background, pull-refresh-label-background-color);
+    }
+
+    &-label-wrapper {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        overflow-y: auto;
+    }
+
+    &-place {
+        position: relative;
+        height: 100%;
+    }
+
+    &-label-text {
+        display: flex;
+        .rem(font-size, 14);
+        .rem(line-height, 44);
+        .use-var(color, pull-refresh-label-text-color);
+        .set-loading-color-var(pull-refresh-label-loading-color);
+        align-items: center;
+        .@{prefix}-loading + span {
+            .rem-with-rtl(margin-left, 10);
+        }
+    }
+
+    &.is-android &-label {
+        top: 0;
+        transform: translateY(-100%);
+    }
+
+    &.is-ios &-label {
+        position: absolute;
+        bottom: 0;
+        overflow-y: auto;
+        .rem(font-size, 14);
+
+        &-wrapper {
+            will-change: height;
+            z-index: -1;
+        }
+    }
+}

package/metaData/components/radio/style.md

@@ -0,0 +1,57 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-radio {
+    display: inline-flex;
+    align-items: center;
+
+    .radio-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);
+        }
+    }
+
+    .radio-text {
+        .use-var(font-size, checkbox-text-font-size);
+        .use-var(color, font-color);
+    }
+
+    .radio-icon + .radio-text {
+        .use-var-with-rtl(margin-left, checkbox-icon-margin-right);
+    }
+
+    &.disabled .radio-text {
+        .use-var(opacity, checkbox-text-disabled-opacity);
+    }
+
+    &.block {
+        width: 100%;
+    }
+
+    &.justify {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
+
+.@{prefix}-radio-group {
+    .@{prefix}-radio:not(:last-child, .block) {
+        .use-var-with-rtl(margin-right, checkbox-group-gutter);
+    }
+}