antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.92d6290f7

package/es/components/text-area/text-area.css

@@ -1,5 +1,5 @@
 .adm-text-area {
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -26,10 +26,15 @@
   background: transparent;
   border: 0;
   outline: none;
-  appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
   min-height: 1.5em;
   text-align: var(--text-align);
 }
+.adm-text-area-element::-webkit-input-placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+}
 .adm-text-area-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
@@ -58,6 +63,6 @@
 .adm-text-area-count {
   text-align: var(--count-text-align);
   color: var(--adm-color-weak);
-  font-size: 17px;
+  font-size: var(--adm-font-size-9);
   padding-top: 8px;
 }

package/es/components/text-area/text-area.d.ts

@@ -19,6 +19,7 @@ export declare type TextAreaRef = {
     clear: () => void;
     focus: () => void;
     blur: () => void;
+    nativeElement: HTMLTextAreaElement | null;
 };
 export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
@@ -33,4 +34,8 @@ export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.Detail
         maxRows?: number | undefined;
     } | undefined;
     id?: string | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align"> & React.RefAttributes<TextAreaRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<TextAreaRef>>;

package/es/components/text-area/text-area.js

@@ -40,7 +40,12 @@ export const TextArea = forwardRef((p, ref) => {
       var _a;
 
       (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    },
+
+    get nativeElement() {
+      return nativeTextAreaRef.current;
     }
+
   }));
   useIsomorphicLayoutEffect(() => {
     if (!autoSize) return;
@@ -106,7 +111,8 @@ export const TextArea = forwardRef((p, ref) => {
       compositingRef.current = false;
 
       if (maxLength) {
-        setValue([...value].slice(0, maxLength).join(''));
+        const v = e.target.value;
+        setValue([...v].slice(0, maxLength).join(''));
       }
 
       (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);

package/es/components/toast/methods.js

@@ -1,86 +1,48 @@
-import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { resolveContainer } from '../../utils/get-container';
+import React from 'react';
 import { InternalToast } from './toast';
 import { mergeProps } from '../../utils/with-default-props';
-import { render, unmount as reactUnmount } from '../../utils/render';
-const containers = [];
-
-function unmount(container) {
-  const unmountResult = reactUnmount(container);
-
-  if (unmountResult && container.parentNode) {
-    container.parentNode.removeChild(container);
-  }
-}
-
+import { renderImperatively } from '../../utils/render-imperatively';
+let currentHandler = null;
+let currentTimeout = null;
 const defaultProps = {
   duration: 2000,
   position: 'center',
   maskClickable: true
 };
+
+const ToastInner = props => React.createElement(InternalToast, Object.assign({}, props));
+
 export function show(p) {
   const props = mergeProps(defaultProps, typeof p === 'string' ? {
     content: p
   } : p);
-  let timer = 0;
-  const {
-    getContainer = () => document.body
-  } = props;
-  const container = document.createElement('div');
-  const bodyContainer = resolveContainer(getContainer);
-  bodyContainer.appendChild(container);
-  clear();
-  containers.push(container);
-  const TempToast = forwardRef((_, ref) => {
-    const [visible, setVisible] = useState(true);
-    useEffect(() => {
-      return () => {
-        var _a;
+  const element = React.createElement(ToastInner, Object.assign({}, props, {
+    onClose: () => {
+      currentHandler = null;
+    }
+  }));
 
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      };
-    }, []);
-    useEffect(() => {
-      if (props.duration === 0) {
-        return;
-      }
+  if (currentHandler) {
+    currentHandler.replace(element);
+  } else {
+    currentHandler = renderImperatively(element);
+  }
 
-      timer = window.setTimeout(() => {
-        setVisible(false);
-      }, props.duration);
-      return () => {
-        window.clearTimeout(timer);
-      };
-    }, []);
-    useImperativeHandle(ref, () => ({
-      close: () => setVisible(false)
-    }));
-    return React.createElement(InternalToast, Object.assign({}, props, {
-      getContainer: () => container,
-      visible: visible,
-      afterClose: () => {
-        unmount(container);
-      }
-    }));
-  });
-  const ref = createRef();
-  render(React.createElement(TempToast, {
-    ref: ref
-  }), container);
-  return {
-    close: () => {
-      var _a;
+  if (currentTimeout) {
+    window.clearTimeout(currentTimeout);
+  }
 
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
-  };
+  if (props.duration !== 0) {
+    currentTimeout = window.setTimeout(() => {
+      clear();
+    }, props.duration);
+  }
+
+  return currentHandler;
 }
 export function clear() {
-  while (true) {
-    const container = containers.pop();
-    if (!container) break;
-    unmount(container);
-  }
+  currentHandler === null || currentHandler === void 0 ? void 0 : currentHandler.close();
+  currentHandler = null;
 }
 export function config(val) {
   if (val.duration !== undefined) {

package/es/components/toast/toast.css

@@ -12,8 +12,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   width: auto;
-  min-width: 96px;
-  max-width: 70%;
+  max-width: 204px;
   max-height: 70%;
   overflow: auto;
   color: white;
@@ -21,15 +20,17 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 8px;
   pointer-events: all;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.5;
   box-sizing: border-box;
 }
 .adm-toast-mask .adm-toast-main-text {
   padding: 12px;
+  min-width: 0px;
 }
 .adm-toast-mask .adm-toast-main-icon {
-  padding: 35px 40px;
+  padding: 35px 12px;
+  min-width: 150px;
 }
 .adm-toast-mask .adm-toast-main-icon .adm-toast-icon {
   text-align: center;

package/es/components/toast/toast.d.ts

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
+import type { MaskProps } from '../mask';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { GetContainer } from '../../utils/render-to-container';
 export interface ToastProps {
     afterClose?: () => void;
-    maskStyle?: React.CSSProperties;
+    maskStyle?: MaskProps['style'];
     maskClassName?: string;
     maskClickable?: boolean;
     content?: ReactNode;

package/es/components/toast/toast.js

@@ -23,10 +23,14 @@ export const InternalToast = p => {
 
     switch (icon) {
       case 'success':
-        return React.createElement(CheckOutline, null);
+        return React.createElement(CheckOutline, {
+          className: `${classPrefix}-icon-success`
+        });
 
       case 'fail':
-        return React.createElement(CloseOutline, null);
+        return React.createElement(CloseOutline, {
+          className: `${classPrefix}-icon-fail`
+        });
 
       case 'loading':
         return React.createElement(SpinLoading, {

package/es/components/toast/toast.patch.css

@@ -0,0 +1,11 @@
+.adm-toast-mask .adm-toast-main {
+  font-size: 15px;
+}
+.adm-toast-loading.adm-toast-loading {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 8px;
+}
+.adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {
+  stroke: #ffffff;
+}

package/es/components/tree-select/tree-select.css

@@ -13,7 +13,7 @@
 }
 .adm-tree-select-column:first-child,
 .adm-tree-select-multiple-column:first-child {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-tree-select-column:nth-child(2),
 .adm-tree-select-multiple-column:nth-child(2) {

package/es/components/virtual-input/virtual-input.css

@@ -1,5 +1,5 @@
 .adm-virtual-input {
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -94,5 +94,5 @@
 }
 .adm-virtual-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }

package/es/components/virtual-input/virtual-input.d.ts

@@ -21,4 +21,8 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
-} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;
+} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<VirtualInputRef>>;

package/es/components/water-mark/water-mark.js

@@ -44,13 +44,14 @@ export const WaterMark = p => {
         const img = new Image();
         img.crossOrigin = 'anonymous';
         img.referrerPolicy = 'no-referrer';
-        img.src = image;
 
         img.onload = () => {
           ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
           ctx.restore();
           setBase64Url(canvas.toDataURL());
         };
+
+        img.src = image;
       } else if (content) {
         ctx.textBaseline = 'middle';
         ctx.textAlign = 'center'; // 文字绕中间旋转
@@ -65,7 +66,7 @@ export const WaterMark = p => {
         setBase64Url(canvas.toDataURL());
       }
     } else {
-      throw new Error('当前环境不支持Canvas');
+      throw new Error('Canvas is not supported in the current environment');
     }
   }, [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
   return withNativeProps(props, React.createElement("div", {

package/es/global/css-vars-patch.css

@@ -0,0 +1,312 @@
+@supports not (color: var(--adm-color-text)) {
+  .adm-button {
+    color: #333333;
+    background-color: #ffffff;
+    font-size: 17px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #eeeeee;
+    border-radius: 4px;
+  }
+  .adm-button::before {
+    transform: translate(-1px, -1px);
+    border: 1px solid #000;
+    border-radius: 4px;
+  }
+  .adm-button-default.adm-button-fill-outline {
+    background-color: transparent;
+    border-color: #333333;
+  }
+  .adm-button-default.adm-button-fill-none {
+    background-color: transparent;
+    border-width: 0;
+  }
+  .adm-button:not(.adm-button-default) {
+    color: #ffffff;
+  }
+  .adm-button:not(.adm-button-default).adm-button-fill-outline {
+    background-color: transparent;
+  }
+  .adm-button:not(.adm-button-default).adm-button-fill-none {
+    background-color: transparent;
+    border-width: 0;
+  }
+  .adm-button-primary {
+    background-color: #1677ff;
+    border-color: #1677ff;
+  }
+  .adm-button-primary.adm-button-fill-outline,
+  .adm-button-primary.adm-button-fill-none {
+    color: #1677ff;
+  }
+  .adm-button-success {
+    background-color: #00b578;
+    border-color: #00b578;
+  }
+  .adm-button-success.adm-button-fill-outline,
+  .adm-button-success.adm-button-fill-none {
+    color: #00b578;
+  }
+  .adm-button-danger {
+    background-color: #00b578;
+    border-color: #00b578;
+  }
+  .adm-button-danger.adm-button-fill-outline,
+  .adm-button-danger.adm-button-fill-none {
+    color: #00b578;
+  }
+  .adm-button-warning {
+    background-color: #ff8f1f;
+    border-color: #ff8f1f;
+  }
+  .adm-button-warning.adm-button-fill-outline,
+  .adm-button-warning.adm-button-fill-none {
+    color: #ff8f1f;
+  }
+  .adm-button.adm-button-mini {
+    font-size: 13px;
+  }
+  .adm-button.adm-button-small {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    font-size: 15px;
+  }
+  .adm-button.adm-button-large {
+    padding-top: 11px;
+    padding-bottom: 11px;
+    font-size: 18px;
+  }
+  .adm-button.adm-button-shape-rounded {
+    border-radius: 1000px;
+  }
+  .adm-button.adm-button-shape-rounded::before {
+    border-radius: 1000px;
+  }
+  .adm-button.adm-button-shape-rectangular {
+    border-radius: 0;
+  }
+  .adm-center-popup {
+    z-index: 1000;
+  }
+  .adm-center-popup-wrap {
+    min-width: 280px;
+    max-width: 75vw;
+  }
+  .adm-center-popup-body {
+    background-color: #ffffff;
+    border-radius: 8px;
+  }
+  .adm-error-block-image {
+    height: 100px;
+    width: auto;
+  }
+  .adm-error-block-description {
+    font-size: var(--adm-font-size-4);
+  }
+  .adm-error-block-description-title {
+    font-size: var(--adm-font-size-7);
+  }
+  .adm-error-block-full-page {
+    padding-top: calc(50vh - 200px);
+  }
+  .adm-error-block-full-page .adm-error-block-image {
+    height: 200px;
+    width: auto;
+  }
+  .adm-error-block-full-page .adm-error-block-description {
+    font-size: var(--adm-font-size-main);
+  }
+  .adm-error-block-full-page .adm-error-block-description-title {
+    color: #333333;
+  }
+  .adm-image {
+    width: auto;
+    height: auto;
+  }
+  .adm-image-tip {
+    background-color: #f5f5f5;
+  }
+  .adm-image-tip > svg {
+    color: #999999;
+  }
+  .adm-mask {
+    z-index: 1000;
+  }
+  .adm-modal-body {
+    font-size: 14px;
+  }
+  .adm-modal-title {
+    font-size: 18px;
+  }
+  .adm-modal-content {
+    font-size: 15px;
+    color: #333333;
+  }
+  .adm-modal-close {
+    color: #999999;
+    font-size: 18px;
+  }
+  .adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item {
+    margin-bottom: 20px;
+  }
+  .adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item:last-child {
+    margin-bottom: 0;
+  }
+  .adm-modal-footer .adm-modal-button {
+    font-size: 18px;
+  }
+  .adm-page-indicator-dot {
+    width: 3px;
+    height: 3px;
+    border-radius: 1px;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  .adm-page-indicator-dot-active {
+    border-radius: 1px;
+    background: #1677ff;
+  }
+  .adm-page-indicator-color-white .adm-page-indicator-dot-active.adm-page-indicator-dot-active {
+    background: #ffffff;
+  }
+  .adm-page-indicator-horizontal .adm-page-indicator-dot {
+    margin-right: 3px;
+  }
+  .adm-page-indicator-horizontal .adm-page-indicator-dot-active {
+    width: 13px;
+  }
+  .adm-page-indicator-vertical .adm-page-indicator-dot {
+    margin-bottom: 3px;
+  }
+  .adm-page-indicator-vertical .adm-page-indicator-dot-active {
+    height: 13px;
+  }
+  .adm-popover-menu.adm-popover .adm-popover-inner-content {
+    padding: 0 !important;
+  }
+  .adm-popover-menu-item-text {
+    border-top: solid 1px #eeeeee;
+  }
+  .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+    background-color: #eeeeee;
+  }
+  .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+    border-bottom: solid 1px #eeeeee;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item-text {
+    border-color: #333333;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+    background-color: #333333;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+    border-color: #333333;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-inner.adm-popover-inner.adm-popover-inner {
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+  .adm-popover {
+    z-index: 1030;
+  }
+  .adm-popover.adm-popover-dark {
+    color: #ffffff;
+  }
+  .adm-popover.adm-popover-dark .adm-popover-inner {
+    background-color: rgba(0, 0, 0, 0.75);
+  }
+  .adm-popover-inner {
+    background-color: #ffffff;
+    font-size: 15px;
+  }
+  .adm-popover-inner-content {
+    padding: 8px 12px;
+  }
+  .adm-popover-arrow {
+    display: none !important;
+  }
+  .adm-scroll-mask-left {
+    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-scroll-mask-right {
+    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-space-vertical > .adm-space-item {
+    margin-bottom: 8px;
+  }
+  .adm-space-horizontal > .adm-space-item {
+    margin-right: 8px;
+  }
+  .adm-space-horizontal.adm-space-wrap {
+    flex-wrap: wrap;
+    margin-bottom: -8px;
+  }
+  .adm-space-horizontal.adm-space-wrap > .adm-space-item {
+    padding-bottom: 8px;
+  }
+  .adm-spin-loading {
+    width: 32px;
+    height: 32px;
+  }
+  .adm-spin-loading-svg {
+    width: 100%;
+    height: 100%;
+    animation: adm-spin-loading-rotate 0.8s infinite linear;
+  }
+  .adm-spin-loading-svg > .adm-spin-loading-fill {
+    stroke: #999999;
+  }
+  .adm-swiper {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 0;
+  }
+  .adm-swiper-track {
+    padding: 0;
+  }
+  .adm-swiper-horizontal .adm-swiper-track {
+    transform: translateX(0%);
+  }
+  .adm-swiper-horizontal .adm-swiper-track-inner {
+    width: 100%;
+  }
+  .adm-swiper-vertical .adm-swiper-track {
+    transform: translateY(0%);
+  }
+  .adm-swiper-vertical .adm-swiper-track-inner {
+    height: 100%;
+  }
+  .adm-tabs-header {
+    border-bottom: solid 1px #eeeeee;
+  }
+  .adm-tabs-tab {
+    font-size: 17px;
+  }
+  .adm-tabs-tab-active {
+    color: #1677ff;
+  }
+  .adm-tabs-tab-line {
+    height: 2px;
+    background: #1677ff;
+    border-radius: 2px;
+  }
+  .adm-tabs-content {
+    padding: 12px;
+  }
+  .adm-tabs-header-mask-left {
+    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-tabs-header-mask-right {
+    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-toast-mask .adm-toast-main {
+    font-size: 15px;
+  }
+  .adm-toast-loading.adm-toast-loading {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 8px;
+  }
+  .adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {
+    stroke: #ffffff;
+  }
+}

package/es/global/global.css

@@ -1,18 +1,48 @@
 :root {
+  --adm-radius-s: 4px;
+  --adm-radius-m: 8px;
+  --adm-radius-l: 12px;
+  --adm-font-size-1: 9px;
+  --adm-font-size-2: 10px;
+  --adm-font-size-3: 11px;
+  --adm-font-size-4: 12px;
+  --adm-font-size-5: 13px;
+  --adm-font-size-6: 14px;
+  --adm-font-size-7: 15px;
+  --adm-font-size-8: 16px;
+  --adm-font-size-9: 17px;
+  --adm-font-size-10: 18px;
   --adm-color-primary: #1677ff;
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
   --adm-color-white: #ffffff;
+  --adm-color-text: #333333;
+  --adm-color-text-secondary: #666666;
   --adm-color-weak: #999999;
   --adm-color-light: #cccccc;
-  --adm-border-color: #eeeeee;
-  --adm-font-size-main: 13px;
-  --adm-color-text: #333333;
-  --adm-hd: 1;
+  --adm-color-border: #eeeeee;
+  --adm-color-box: #f5f5f5;
+  --adm-color-background: #ffffff;
+  --adm-font-size-main: var(--adm-font-size-5);
   --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
     helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
     'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --adm-border-color: var(--adm-color-border);
+}
+html[data-prefers-color-scheme='dark'] {
+  --adm-color-primary: #3086ff;
+  --adm-color-success: #34b368;
+  --adm-color-warning: #ffa930;
+  --adm-color-danger: #ff4a58;
+  --adm-color-text: #e6e6e6;
+  --adm-color-text-secondary: #b3b3b3;
+  --adm-color-weak: #808080;
+  --adm-color-light: #4d4d4d;
+  --adm-color-border: #2b2b2b;
+  --adm-color-box: #0a0a0a;
+  --adm-color-background: #1a1a1a;
+  --adm-border-color: var(--adm-color-border);
 }
 :root {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -50,6 +80,7 @@ div.adm-px-tester {
   position: fixed;
   right: -100vw;
   bottom: -100vh;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   pointer-events: none;
 }