@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/textarea/style.md

@@ -0,0 +1,37 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-textarea {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    resize: none;
+    .use-var(font-size, textarea-font-size);
+    .use-var(line-height, textarea-line-height);
+    .use-var(caret-color, input-caret-color);
+
+    &::placeholder {
+        .use-var(color, input-placeholder-color);
+    }
+
+    &.fake-textarea {
+        position: fixed;
+        bottom: 100%;
+        left: 0;
+        visibility: hidden;
+    }
+}
+
+.@{prefix}-input-container {
+
+    .statistic-text {
+        position: absolute;
+        .rem(bottom, 16);
+        .rem(right, 16);
+        .use-var(font-size, textarea-statistic-font-size);
+        .use-var(color, textarea-statistic-color);
+
+        &.exceed {
+            .use-var(color, danger-color);
+        }
+    }
+}

package/metaData/components/toast/api.md

@@ -0,0 +1,82 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|content|提示内容|ReactNode|-|
+|duration|自动关闭的延时（单位: ms），设置为0则不会自动关闭|number|3000|
+|icon|自定义图标|ReactNode|-|
+|layout|内容排列布局|"vertical" \| "horizontal"|"vertical"|
+|transitionDuration|打开关闭动画执行时长（单位: ms）|number|300|
+|close|关闭函数|() =\> void|-|
+|onClose|关闭后的回调函数|() =\> void|-|
+|loading|是否为加载态|boolean|-|
+|loadingIcon|加载图标，传入Icon组件type属性或node|ReactNode|-|
+|loadingInner|加载图标内部元素，仅在 loading 为 true 时生效|string|-|
+|disableBodyTouch|是否禁止toast以外区域的交互|boolean|false|
+|visible|是否显示toast|boolean|false|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|type|toast展示信息类型，不同类型对应不同图标，info表示纯文字信息无图标|"info" \| "success" \| "error" \| "warn"|"info"|
+|direction|toast出现位置|"center" \| "top" \| "bottom"|"center"|
+|typeIconMap|自定义不同类型对应的不同图标|Partial\<Record\<ToastType, ReactNode\>\>|-|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭toast时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> 方法/Methods
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|toast|展示常规提示框|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+|info|展示常规提示框，同 Toast\.toast|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+|success|展示成功提示框(含成功icon)|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+|error|展示错误提示框(含错误icon)|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+|loading|展示加载中提示框(含加载中icon)|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+|warn|展示警告提示框(含警告icon)|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+
+> ToastType
+
+```
+"success" | "error" | "warn"
+```
+
+> GlobalContextParams
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "pc" \| "android" \| "ios"|""|
+|useDarkMode|是否监听系统原生的暗黑模式变化(prefers\-color\-scheme: dark)以判断是否切为暗黑模式|boolean|false|
+|isDarkMode|是否处于暗黑模式，指定后以指定的值为准|boolean|false|
+|darkModeSelector|当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名|string|"arco-theme-dark"|
+|theme|主题变量，传入后将在线替换css变量，需设置less变量 @use\-css\-vars: 1|Record\<string, string\>|-|
+|locale|国际化语言包配置|ILocale|-|
+|useRtl|是否使用Rtl模式|boolean|false|
+|onDarkModeChange|当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效|(isDark: boolean) =\> void|-|
+|createRoot|React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法|CreateRootFnType|-|
+
+> ILocale
+
+|参数|描述|类型|
+|----------|-------------|------|
+|locale|语言类型|string|
+|LoadMore|-|\{ loadMoreText: string; loadingText: string; noDataText: string; failLoadText: string; prepareScrollText: string; prepareClickText: string; \}|
+|Picker|-|\{ okText: string; cancelText: string; \}|
+|Tag|-|\{ addTag: string; \}|
+|Dialog|-|\{ okText: string; cancelText: string; \}|
+|SwipeLoad|-|\{ normalText: string; activeText: string; \}|
+|PullRefresh|-|\{ loadingText: string; pullingText: string; finishText: string; loosingText: string; \}|
+|DropdownMenu|-|\{ select: string; \}|
+|Pagination|-|\{ previousPage: string; nextPage: string; \}|
+|Image|-|\{ loadError: string; \}|
+|ImagePicker|-|\{ loadError: string; \}|
+|SearchBar|-|\{ placeholder: string; cancelBtn: string; \}|
+|Stepper|-|\{ minusButtonName: string; addButtonName: string; \}|
+|Keyboard|-|\{ confirm: string; \}|
+|Form|-|\{ required: string; type: \{ email: string; url: string; string: string; number: string; array: string; object: string; boolean: string; \}; number: \{ min: string; max: string; equal: string; range: string; positive: string; negative: string; \}; \.\.\. 4 more \.\.\.; pickerDefaultHint: string; \}|
+|NavBar|-|\{ backBtnAriaLabel: string; \}|
+|Uploader|-|\{ uploadBtn: string; retryUpload: string; \}|

package/metaData/components/toast/style.md

@@ -0,0 +1,93 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-toast {
+
+    &-wrapper {
+        .full-screen();
+        z-index: @full-screen-z-index + 1;
+        display: flex;
+        justify-content: center;
+        .use-var(padding, toast-safe-padding);
+
+        &.no-event {
+            pointer-events: none;
+        }
+
+        &.from-center {
+            align-items: center;
+        }
+
+        &.from-top {
+            align-items: flex-start;
+            .use-var(padding-top, toast-from-top-position);
+        }
+
+        &.from-bottom {
+            align-items: flex-end;
+            .use-var(padding-bottom, toast-from-bottom-position);
+        }
+    }
+
+    &-inner {
+        .use-var(background, toast-background);
+        .use-var(color, toast-text-color);
+        .use-var(font-size, toast-font-size);
+        .use-var(line-height, toast-line-height);
+        .use-var(border-radius, toast-border-radius);
+        flex-direction: column;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: initial;
+
+        &.horizontal {
+            flex-direction: row;
+            .use-var(padding, toast-horizontal-padding);
+            .@{prefix}-icon {
+                flex: 0 0 auto;
+                .use-var(font-size, toast-horizontal-icon-size);
+            }
+            .@{prefix}-toast-loading-wrapper + .@{prefix}-toast-content,
+            .@{prefix}-icon + .@{prefix}-toast-content {
+                .use-var(margin-left, toast-horizontal-icon-content-gutter);
+            }
+        }
+
+        &.vertical {
+            .use-var(padding, toast-vertical-padding);
+            .@{prefix}-icon {
+                .use-var(font-size, toast-vertical-icon-size);
+            }
+            .@{prefix}-toast-loading-wrapper + .@{prefix}-toast-content,
+            .@{prefix}-icon + .@{prefix}-toast-content {
+                .use-var(margin-top, toast-vertical-icon-content-gutter);
+            }
+        }
+        .@{prefix}-loading {
+            .set-loading-color-var(mask-content-color);
+
+            &.arc .arc-bg {
+                .use-var(stroke, toast-loading-arc-background-color);
+            }
+        }
+    }
+
+    &-loading-wrapper {
+        display: flex;
+        position: relative;
+    }
+
+    &-loading-inner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        .use-var(font-size, toast-loading-inner-font-size);
+    }
+
+    &-content {
+        width: 100%;
+        text-align: center;
+        white-space: pre-line;
+    }
+}

package/metaData/components/transition/api.md

@@ -0,0 +1,11 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|children|待执行动画内容|ReactNode|-|
+|type|待执行动画css类名|string|必填|
+|in|内容是否可见|boolean|必填|
+|timeout|执行动画时间|number \| \{ appear?: number; enter?: number; exit?: number; \}|必填|
+|mountOnEnter|是否在打开时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|transitionVarType|动画时长变量标识|string|type 属性值|

package/metaData/components/transition/style.md

@@ -0,0 +1,28 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-fade {
+
+    &-enter {
+        opacity: 0;
+    }
+
+    &-enter-active {
+        opacity: 1;
+        transition-property: opacity;
+        .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+    }
+
+    &-exit {
+        opacity: 1;
+    }
+
+    &-exit-active {
+        opacity: 0;
+        transition-property: opacity;
+        .use-transition-var(builtin-transition-fade-exit-duration, transition-fade-duration);
+    }
+
+    &-exit-done {
+        display: none;
+    }
+}

package/metaData/components/uploader/api.md

@@ -0,0 +1,74 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|accept|可以选择的文件类型|string|undefined|
+|multiple|是否支持多选|boolean|-|
+|capture|文件选取模式 File selection mode \[capture MDN\](https://developer\.mozilla\.org/en\-US/docs/Web/HTML/Attributes/capture)|string \| boolean|-|
+|hideStatus|是否隐藏文件上传状态|boolean|false|
+|alwaysShowSelect|是否总是展示选择Icon，默认情况下当文件数量超出limit值时会自动隐藏选择Icon|boolean|false|
+|disabled|禁用选择和删除图片|boolean|-|
+|renderDeleteArea|自定义删除区域|(fileItem: FileItem, index: number) =\> ReactNode|-|
+|renderLoadedArea|自定义上传成功区域|(fileItem: FileItem, index: number) =\> ReactNode|-|
+|renderLoadingArea|自定义上传中区域|(fileItem: FileItem, index: number) =\> ReactNode|-|
+|renderErrorArea|自定义上传失败区域|(fileItem: FileItem, index: number) =\> ReactNode|-|
+|renderFileIndexArea|自定义文件索引区域|(fileItem: FileItem, index: number) =\> ReactNode|-|
+|renderUploadArea|自定义上传按钮区域|() =\> ReactNode|-|
+|renderFileList|自定义上传文件列表展示|(methods: FileListMethods) =\> ReactNode|-|
+|upload|上传方法|(file: CommonFileItem) =\> Promise\<CommonFileItem\>|-|
+|onChange|已选文件列表发生变化|(fileList: CommonFileItem\[\]) =\> void|-|
+|maxSize|文件大小限制，单位为K|number|-|
+|onMaxSizeExceed|文件超过限制大小|(file: File) =\> void|-|
+|limit|最多选择文件数，超出数量自动隐藏上传按钮，0表示不做限制|number|0|
+|onLimitExceed|选择文件数超过限制|(files: File\[\]) =\> void|-|
+|files|已选择文件列表|CommonFileItem\[\]|必填|
+|onDeleteClick|删除点击事件|(index: number) =\> void|-|
+|onUploadClick|上传文件点击事件|() =\> void|-|
+|selectAdapter|文件选择适配器|() =\> Promise\<SelectCallback\>|-|
+|onClick|文件点击|(e: MouseEvent\<HTMLElement, MouseEvent\>, file: CommonFileItem, index: number) =\> void|-|
+|onLongPress|文件长按事件|(e: TouchEvent\<HTMLElement\>, file: CommonFileItem, index: number) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层 DOM 元素|HTMLDivElement|
+
+> FileItem
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|file|文件|File|必填|
+|url|文件地址|string|-|
+|status|文件状态|"loaded" \| "loading" \| "error"|以文件自身加载状态而定|
+
+> FileListMethods
+
+|参数|描述|类型|
+|----------|-------------|------|
+|retryUpload|重新上传|(index: number) =\> void|
+|deleteFile|删除文件|(index: number) =\> void|
+
+> CommonFileItem
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|url|文件地址|string|-|
+|file|文件|File|-|
+|status|文件状态|"loaded" \| "loading" \| "error"|以文件自身加载状态而定|
+
+> SelectCallback
+
+|参数|描述|类型|
+|----------|-------------|------|
+|files|文件列表|AdapterFile\[\]|
+
+> AdapterFile
+
+|参数|描述|类型|
+|----------|-------------|------|
+|url|文件 url|string|
+|size|文件大小|number|
+|name|文件名|string|

package/metaData/components/uploader/style.md

@@ -0,0 +1,86 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-uploader {
+    &-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    &-add {
+        position: relative;
+        input {
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+        }
+    }
+    &-list {
+        width: 100%;
+        &-item {
+            display: flex;
+            align-items: center;
+            .use-var(height, uploader-item-height);
+            .use-var(margin-top, uploader-item-margin-top);
+            &-container {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                height: 100%;
+                .use-var(border-radius, uploader-item-border-radius);
+                .use-var(background-color, uploader-item-background-color);
+                .use-var(padding, uploader-item-padding);
+            }
+            &-wrapper {
+                display: flex;
+                flex: 1;
+                align-items: center;
+            }
+            &-file {
+                display: flex;
+                .use-var(font-size, uploader-file-icon-font-size);
+                .use-var-with-rtl(margin-right, uploader-file-icon-margin-right);
+                &-icon {
+                    .use-var(color, uploader-file-icon-color);
+                }
+            }
+            &-text {
+                font-weight: 400;
+                .use-var(font-size, uploader-item-text-font-size);
+                .use-var(color, uploader-item-text-color);
+                &-error {
+                    .use-var(color, uploader-item-text-error-color);
+                }
+            }
+            &-loaded {
+                display: flex;
+                .use-var(font-size, uploader-loaded-icon-font-size);
+                .use-var(color, uploader-loaded-icon-color);
+            }
+            &-error {
+                font-weight: 400;
+                .use-var(font-size, uploader-error-text-font-size);
+                .use-var(color, uploader-error-text-color);
+            }
+            &-delete {
+                display: flex;
+                height: 100%;
+                align-items: center;
+                .use-var-with-rtl(padding-left, uploader-delete-icon-padding-left);
+                .use-var(font-size, uploader-delete-icon-font-size);
+                &-icon {
+                    .use-var(color, uploader-delete-icon-color);
+                    &-disabled {
+                        .use-var(color, uploader-disabled-delete-icon-color);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.@{prefix}-uploader-disabled {
+    pointer-events: none;
+}