@fjyueke/arco-mcp 1.0.1 → 1.0.2

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

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