@fjyueke/arco-mcp 1.0.0 → 1.0.2

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

@@ -0,0 +1,38 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|inputStyle|input样式|CSSProperties|-|
+|inputClass|input类名|string|-|
+|value|绑定值，传入即受控|number|-|
+|defaultValue|默认值|number|1|
+|allowEmpty|是否允许内容为空|boolean|false|
+|digits|格式化到小数点后固定位数，设置为 0 表示格式化到整数|number|0|
+|disabled|是否禁用步进器|boolean|false|
+|inputReadonly|输入框只读状态|boolean|false|
+|max|最大值|number|Infinity|
+|min|最小值|number|1|
+|equalLimitDisabled|是否允许操作大于/小于极限值时，操作结果等于极限值|boolean|-|
+|step|递增/减值|number|1|
+|theme|边框风格|"square" \| "round" \| "default"|"default"|
+|formatter|格式化内部值（优先级最高）|(innerValue: number) =\> number \| Promise\<number\>|-|
+|addButton|增加按钮|ReactNode|-|
+|minusButton|删除按钮|ReactNode|-|
+|renderContent|自定义输入框函数|(innerValue: number) =\> ReactNode|-|
+|onBlur|输入框失去焦点时触发|(e: FocusEvent\<HTMLInputElement, Element\>) =\> void|-|
+|onChange|数据变化时的触发|(value: number) =\> void|-|
+|onFocus|输入框获得焦点时触发|(e: FocusEvent\<HTMLInputElement, Element\>) =\> void|-|
+|onAddButtonClick|点击增加按钮时触发|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|onMinusButtonClick|点击减少按钮时触发|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|onClick|点击最外侧dom时触发|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|onInput|输入框输入时触发|(e: ChangeEvent\<Element\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|input|输入框 DOM|HTMLInputElement|
+|changeValue|改变内部值的方法|(newValue: number) =\> void|

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

package/metaData/components/steps/api.md

@@ -0,0 +1,49 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|reverseOrder|顺序反转，设置为true后，顺序将从右到左，从下到上|boolean|-|
+|style|自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '\.set\-steps\-color(@color)'|CSSProperties|-|
+|direction|步骤条方向|"vertical" \| "horizontal"|horizontal|
+|align|步骤条对齐方式|"center" \| "start"|direction="horizontal" 时默认为 "center"，direction="vertical" 时默认为 "start"|
+|current|指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态，传入则受控|number|-|
+|iconType|步骤图标类型。在子 Step 元素中，可以通过 icon 属性覆盖图标|"number" \| "dot"|number|
+|status|当前步骤的节点状态|"finish" \| "error" \| "wait" \| "process"|process|
+|defaultIndex|初始 step index|number|0|
+|items|步骤条自定义数据，优先级高于 Children Step 子元素|StepProps\[\]|-|
+|onClick|点击步骤触事件|(current: number) =\> void|-|
+|onChange|step 变化回调|(index: number) =\> void|-|
+|children|子元素，优先级低于 items|ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> Steps.Step
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|title|步骤标题|ReactNode|-|
+|description|步骤说明文字|ReactNode|-|
+|icon|自定义步骤图标|ReactNode|-|
+|status|指定步骤状态，不配置该项时，会根据 Steps 的 current 属性自动指定状态|"finish" \| "error" \| "wait" \| "process"|-|
+|align|指定对齐方式，不配置该项时，会跟随 Steps 的 align 属性值|"center" \| "start"|-|
+
+> StepProps
+
+|参数|描述|类型|
+|----------|-------------|------|
+|title|步骤标题|ReactNode|
+|description|步骤说明文字|ReactNode|
+|icon|自定义步骤图标|ReactNode|
+|status|指定步骤状态，不配置该项时，会根据 Steps 的 current 属性自动指定状态|"finish" \| "error" \| "wait" \| "process"|
+|align|指定对齐方式，不配置该项时，会跟随 Steps 的 align 属性值|"center" \| "start"|
+
+> StepRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|Step 最外层元素 DOM|HTMLDivElement|