@fjyueke/arco-mcp 1.0.1 → 1.0.2

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/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/style.md

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

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/style.md

@@ -0,0 +1,292 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-slider {
+    position: relative;
+    display: flex;
+    .use-var(padding, slider-padding);
+
+    &.is-vertical {
+        flex-direction: column;
+    }
+
+    &.is-horizontal.show-marks {
+        .use-var(padding-bottom, slider-has-mark-padding-bottom);
+    }
+
+    &-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex: 1;
+
+        .is-vertical & {
+            flex-direction: column;
+        }
+    }
+
+    &-label {
+        display: flex;
+        align-items: center;
+        .use-var(font-size, slider-label-font-size);
+        .use-var(color, slider-text-color);
+
+        .is-horizontal & {
+            .use-var-with-rtl(margin-right, slider-label-gutter);
+        }
+
+        .is-vertical & {
+            flex-direction: column;
+            .use-var(margin-bottom, slider-label-gutter);
+        }
+    }
+
+    &-wrapper + &-label {
+
+        .is-horizontal & {
+            margin-right: 0;
+            .use-var-with-rtl(margin-left, slider-label-gutter);
+        }
+
+        .is-vertical & {
+            margin-bottom: 0;
+            .use-var(margin-top, slider-label-gutter);
+        }
+    }
+
+    &-line {
+        position: relative;
+        display: flex;
+        flex: 1;
+        .use-var(border-radius, slider-line-border-radius);
+        .use-var(background, slider-line-color);
+
+        &:not(.is-activated)::before {
+            position: absolute;
+            content: "";
+            width: 100%;
+            height: 100%;
+
+            .is-horizontal & {
+                top: -50%;
+                transform: translateY(-50%);
+                .use-var(padding, slider-mask-padding, "", 0);
+            }
+
+            .is-vertical & {
+                left: -50%;
+                transform: translateX(-50%);
+                .use-var(padding, slider-mask-padding, 0);
+            }
+        }
+
+        &.is-activated {
+            position: absolute;
+            .use-var(background, slider-line-activated-color);
+
+            .is-disabled & {
+                .use-var(background, slider-line-disabled-color);
+            }
+        }
+    }
+
+    &-thumb {
+        .use-var(width, slider-thumb-width);
+        .use-var(height, slider-thumb-height);
+        .use-var(background, slider-thumb-background);
+        .use-var(box-shadow, slider-thumb-box-shadow);
+        .use-var(border-radius, slider-thumb-border-radius);
+
+        &-wrapper {
+            position: absolute;
+            display: flex;
+            width: fit-content;
+            height: fit-content;
+            margin: auto;
+            align-items: center;
+
+            .is-vertical & {
+                left: 1PX;
+                right: 0;
+
+                &.is-end {
+                    top: 0;
+                    transform: translate(-50%, -50%);
+                }
+
+                &.is-start {
+                    bottom: 0;
+                    transform: translate(-50%, 50%);
+                }
+            }
+
+            .is-horizontal & {
+                top: 0;
+                bottom: 0;
+
+                &.is-end {
+                    .set-prop-with-rtl(right, 0);
+                    transform: translateX(50%);
+                    .style-with-rtl({
+                        transform: translateX(-50%);
+                    });
+                }
+
+                &.is-start {
+                    .set-prop-with-rtl(left, 0);
+                    transform: translateX(-50%);
+                    .style-with-rtl({
+                        transform: translateX(50%);
+                    });
+                }
+            }
+        }
+    }
+
+    &-popover-wrapper &-thumb {
+        position: relative;
+    }
+
+    &-popover {
+        position: absolute;
+        width: max-content;
+        .use-var(color, popover-content-color);
+        .use-var(font-size, slider-popover-font-size);
+        .use-var(line-height, slider-popover-line-height);
+
+        .is-horizontal & {
+            bottom: 100%;
+            .use-var(margin-bottom, slider-popover-gutter);
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .is-vertical & {
+            left: 100%;
+            .use-var(margin-left, slider-popover-gutter);
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        &.no-content {
+            display: none;
+        }
+
+        &-wrapper {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        &-content {
+            position: relative;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            .use-var(border-radius, popover-inner-border-radius);
+            .use-var(padding, popover-content-padding);
+            z-index: 2;
+            .use-var(background-color, popover-background-color);
+
+            .android & {
+                .use-var(padding, popover-content-android-padding);
+            }
+
+            p {
+                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);
+            }
+        }
+
+        &-arrow {
+            position: absolute;
+            margin: auto;
+            width: 0;
+            height: 0;
+            .use-var(border-width, slider-popover-arrow-size);
+            border-style: solid;
+            border-color: transparent;
+
+            .is-horizontal & {
+                transform: translateY(100%);
+                bottom: 0;
+                left: 0;
+                right: 0;
+                .use-var(border-top-color, popover-background-color);
+            }
+
+            .is-vertical & {
+                .use-var(border-right-color, popover-background-color);
+                transform: translateX(-100%);
+                left: 0;
+                top: 0;
+                bottom: 0;
+            }
+        }
+    }
+
+    &-marks {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        flex: 1;
+
+        &-item {
+            position: absolute;
+            margin: auto;
+            .use-var(width, slider-mark-width);
+            .use-var(height, slider-mark-height);
+            .use-var(border-radius, slider-mark-border-radius);
+            .use-var(background, slider-line-color);
+            transform: translateX(-50%);
+            .style-with-rtl({
+                transform: translateX(50%);
+            });
+
+            &.is-activated {
+                .use-var(background, slider-line-activated-color);
+            }
+
+            .is-vertical & {
+                left: 0;
+                right: 0;
+            }
+
+            .is-horizontal & {
+                top: 0;
+                bottom: 0;
+            }
+
+            &-label {
+                position: absolute;
+                .use-var(font-size, slider-mark-label-font-size);
+                .use-var(line-height, slider-mark-label-line-height);
+                .use-var(color, slider-text-color);
+
+                .is-horizontal & {
+                    left: 50%;
+                    .use-var(top, slider-horizontal-mark-label-top);
+                    transform: translateX(-50%);
+                }
+
+                .is-vertical & {
+                    top: 50%;
+                    .use-var(right, slider-vertical-mark-label-right);
+                    transform: translateY(-50%);
+                }
+            }
+        }
+    }
+
+    .is-transferable {
+        transition: all .3s;
+    }
+
+    .@{prefix}-fade-enter-active,
+    .@{prefix}-fade-enter-done {
+        .use-var(opacity, popover-inner-opacity);
+    }
+}

package/metaData/components/stepper/style.md

@@ -0,0 +1,85 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-stepper {
+    display: inline-flex;
+    .use-var(font-size, stepper-font-size);
+
+    &.@{prefix}-square {
+        border-width: 1PX;
+        border-style: solid;
+        .use-var(border-color, stepper-square-border-color);
+        .use-var(border-radius, stepper-square-border-radius);
+
+        .@{prefix}-stepper {
+            &-add-button,
+            &-minus-button,
+            &-input {
+                .use-var(background, stepper-square-background-color);
+            }
+            &-input {
+                border-left-width: 1PX;
+                border-right-width: 1PX;
+                border-style: solid;
+                .use-var(border-left-color, stepper-square-border-color);
+                .use-var(border-right-color, stepper-square-border-color);
+            }
+        }
+    }
+
+    &.@{prefix}-round {
+        .@{prefix}-stepper {
+            &-minus-button,
+            &-add-button {
+                .use-var(border-radius, stepper-round-button-border-radius);
+            }
+            &-input {
+                .use-var(background, stepper-round-input-background-color);
+            }
+        }
+    }
+
+    &-minus-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(font-size, stepper-button-icon-size);
+        .use-var(width, stepper-button-size);
+        .use-var(height, stepper-button-size);
+        .use-var(background, stepper-default-background-color);
+
+        &-icon {
+            .use-var(color, stepper-content-color);
+
+            &.disabled {
+                .use-var(color, stepper-disable-color);
+            }
+        }
+    }
+
+    &-input {
+        text-align: center;
+        .use-var(width, stepper-input-width);
+        .use-var(height, stepper-input-height);
+        .use-var(background, stepper-default-background-color);
+        .use-var(color, stepper-content-color);
+        .use-var(margin, stepper-input-margin);
+    }
+
+    &-add-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(font-size, stepper-button-icon-size);
+        .use-var(width, stepper-button-size);
+        .use-var(height, stepper-button-size);
+        .use-var(background, stepper-default-background-color);
+
+        &-icon {
+            .use-var(color, stepper-content-color);
+
+            &.disabled {
+                .use-var(color, stepper-disable-color);
+            }
+        }
+    }
+}