@trionesdev/antd-mobile-base-react 0.0.2-beta.16 → 0.0.2-beta.17

package/dist/Result/style.scss

@@ -1,73 +1,73 @@
-$class-prefix-result: 'triones-antm-result';
-/* prettier-ignore */
-.#{$class-prefix-result} {
-  padding: 32PX 12PX;
-  background-color: var(--triones-antm-color-background);
-
-  &-icon {
-    box-sizing: border-box;
-    width: 64PX;
-    height: 64PX;
-    margin: 0 auto 20PX auto;
-    padding: 6PX;
-
-    .antd-mobile-icon {
-      font-size: 52PX;
-    }
-  }
-
-  &-title {
-    color: var(--triones-antm-color-text);
-    font-size: var(--triones-antm-font-size-10);
-    line-height: 1.4;
-    text-align: center;
-  }
-
-  &-description {
-    margin-top: 8PX;
-    color: var(--triones-antm-color-weak);
-    font-size: var(--triones-antm-font-size-main);
-    line-height: 1.4;
-    text-align: center;
-  }
-}
-
-.#{$class-prefix-result}-success {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-primary);
-    }
-  }
-}
-
-.#{$class-prefix-result}-error {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-danger);
-    }
-  }
-}
-
-.#{$class-prefix-result}-info {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-primary);
-    }
-  }
-}
-
-.#{$class-prefix-result}-waiting {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-success);
-    }
-  }
-}
-
-.#{$class-prefix-result}-warning {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-warning);
-    }
-  }
-}
+$class-prefix-result: 'triones-antm-result';
+/* prettier-ignore */
+.#{$class-prefix-result} {
+  padding: 32PX 12PX;
+  background-color: var(--triones-antm-color-background);
+
+  &-icon {
+    box-sizing: border-box;
+    width: 64PX;
+    height: 64PX;
+    margin: 0 auto 20PX auto;
+    padding: 6PX;
+
+    .antd-mobile-icon {
+      font-size: 52PX;
+    }
+  }
+
+  &-title {
+    color: var(--triones-antm-color-text);
+    font-size: var(--triones-antm-font-size-10);
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  &-description {
+    margin-top: 8PX;
+    color: var(--triones-antm-color-weak);
+    font-size: var(--triones-antm-font-size-main);
+    line-height: 1.4;
+    text-align: center;
+  }
+}
+
+.#{$class-prefix-result}-success {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-error {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-danger);
+    }
+  }
+}
+
+.#{$class-prefix-result}-info {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-waiting {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-success);
+    }
+  }
+}
+
+.#{$class-prefix-result}-warning {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-warning);
+    }
+  }
+}

package/dist/SafeArea/style.scss

@@ -1,20 +1,20 @@
-@use "../style/variable" as variable;
-
-$class-prefix-safe-area: 'triones-antm-safe-area';
-
-$safeAreaMultiple : variable.$trionesSafeAreaMultiple;
-
-.#{$class-prefix-safe-area} {
-  height: 100%;
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-
-  &-position-top {
-    padding-top: calc(env(safe-area-inset-top) * $safeAreaMultiple);
-  }
-
-  &-position-bottom {
-    padding-bottom: calc(env(safe-area-inset-bottom) * $safeAreaMultiple);
-  }
-}
+@use "../style/variable" as variable;
+
+$class-prefix-safe-area: 'triones-antm-safe-area';
+
+$safeAreaMultiple : variable.$trionesSafeAreaMultiple;
+
+.#{$class-prefix-safe-area} {
+  height: 100%;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+
+  &-position-top {
+    padding-top: calc(env(safe-area-inset-top) * $safeAreaMultiple);
+  }
+
+  &-position-bottom {
+    padding-bottom: calc(env(safe-area-inset-bottom) * $safeAreaMultiple);
+  }
+}

package/dist/Scaffold/style.scss

@@ -1,17 +1,17 @@
-@use "../style/variable" as variable;
-
-
-$trionesScaffoldCls: 'triones-antm-scaffold';
-
-.#{$trionesScaffoldCls} {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: variable.$trionesColorBgScaffold;
-
-  &-body {
-    flex: 1 auto;
-    overflow: hidden;
-  }
-}
+@use "../style/variable" as variable;
+
+
+$trionesScaffoldCls: 'triones-antm-scaffold';
+
+.#{$trionesScaffoldCls} {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: variable.$trionesColorBgScaffold;
+
+  &-body {
+    flex: 1 auto;
+    overflow: hidden;
+  }
+}

package/dist/Segmented/style.scss

@@ -1,75 +1,75 @@
-@use "../style/variable" as variable;
-
-$class-prefix-segmented: 'triones-antm-segmented';
-
-.#{$class-prefix-segmented} {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: stretch;
-  box-sizing: border-box;
-  padding: 2Px;
-  border-radius: variable.$trionesBorderRadius;
-  background: variable.$trionesColorFillTertiary;
-  gap: 0;
-
-  &-block {
-    display: flex;
-    width: 100%;
-  }
-
-  &-disabled {
-    opacity: 0.45;
-    pointer-events: none;
-  }
-
-  &-item {
-    position: relative;
-    z-index: 0;
-    display: inline-flex;
-    flex: 0 1 auto;
-    align-items: center;
-    justify-content: center;
-    min-height: 10Px;
-    padding: 0Px 11Px;
-    font-size: variable.$trionesFontSize;
-    line-height: variable.$trionesLineHeightSm;
-    color: variable.$trionesColorTextSecondary;
-    border-radius: variable.$trionesBorderRadiusXs;
-    cursor: pointer;
-    user-select: none;
-    transition:
-      color 0.2s,
-      background-color 0.2s,
-      box-shadow 0.2s;
-
-    &-icon {
-      display: inline-flex;
-      margin-inline-end: 4Px;
-      font-size: variable.$trionesFontSizeIcon;
-      line-height: 1;
-    }
-
-    &-label {
-      display: inline-flex;
-      align-items: center;
-      line-height: 28Px;
-    }
-
-    &-active {
-      z-index: 1;
-      color: variable.$trionesColorTextHeading;
-      background: variable.$trionesColorBgBase;
-      box-shadow: 0 1Px 2Px rgba(0, 0, 0, 0.06);
-    }
-
-    &-disabled {
-      cursor: not-allowed;
-      color: variable.$trionesColorTextDisabled;
-    }
-  }
-
-  &-block &-item {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-}
+@use "../style/variable" as variable;
+
+$class-prefix-segmented: 'triones-antm-segmented';
+
+.#{$class-prefix-segmented} {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: stretch;
+  box-sizing: border-box;
+  padding: 2Px;
+  border-radius: variable.$trionesBorderRadius;
+  background: variable.$trionesColorFillTertiary;
+  gap: 0;
+
+  &-block {
+    display: flex;
+    width: 100%;
+  }
+
+  &-disabled {
+    opacity: 0.45;
+    pointer-events: none;
+  }
+
+  &-item {
+    position: relative;
+    z-index: 0;
+    display: inline-flex;
+    flex: 0 1 auto;
+    align-items: center;
+    justify-content: center;
+    min-height: 10Px;
+    padding: 0Px 11Px;
+    font-size: variable.$trionesFontSize;
+    line-height: variable.$trionesLineHeightSm;
+    color: variable.$trionesColorTextSecondary;
+    border-radius: variable.$trionesBorderRadiusXs;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      color 0.2s,
+      background-color 0.2s,
+      box-shadow 0.2s;
+
+    &-icon {
+      display: inline-flex;
+      margin-inline-end: 4Px;
+      font-size: variable.$trionesFontSizeIcon;
+      line-height: 1;
+    }
+
+    &-label {
+      display: inline-flex;
+      align-items: center;
+      line-height: 28Px;
+    }
+
+    &-active {
+      z-index: 1;
+      color: variable.$trionesColorTextHeading;
+      background: variable.$trionesColorBgBase;
+      box-shadow: 0 1Px 2Px rgba(0, 0, 0, 0.06);
+    }
+
+    &-disabled {
+      cursor: not-allowed;
+      color: variable.$trionesColorTextDisabled;
+    }
+  }
+
+  &-block &-item {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}

package/dist/Skeleton/Skeleton.d.ts

@@ -1,27 +1,86 @@
-import React from 'react';
+import type { CSSProperties, FC, ReactNode } from 'react';
 import './style.scss';
-export interface SkeletonProps {
-    /** 是否显示骨架屏 */
+export type SkeletonAvatarShape = 'circle' | 'square';
+export type SkeletonAvatarSize = 'small' | 'medium' | 'large';
+export interface SkeletonAvatarProps {
+    className?: string;
+    style?: CSSProperties;
+    shape?: SkeletonAvatarShape;
+    size?: SkeletonAvatarSize | number;
+    active?: boolean;
+}
+export interface SkeletonTitleProps {
+    className?: string;
+    style?: CSSProperties;
+    width?: number | string;
+    active?: boolean;
+}
+export interface SkeletonParagraphProps {
+    className?: string;
+    style?: CSSProperties;
+    rows?: number;
+    /** 单行宽度；数组时为每行宽度，与 antd 一致 */
+    width?: number | string | Array<number | string>;
+    active?: boolean;
+}
+export interface SkeletonInputProps {
+    className?: string;
+    style?: CSSProperties;
+    size?: 'small' | 'medium' | 'large';
+    active?: boolean;
+}
+export type SkeletonButtonShape = 'default' | 'square' | 'round' | 'circle';
+export interface SkeletonButtonProps {
+    className?: string;
+    style?: CSSProperties;
+    size?: 'small' | 'medium' | 'large';
+    shape?: SkeletonButtonShape;
+    block?: boolean;
+    active?: boolean;
+}
+/** 简单块模式：与历史 API 兼容 */
+export type SkeletonBlockType = 'text' | 'circle' | 'rect';
+export type SkeletonProps = {
+    /** 为 true 时显示骨架，为 false 时渲染子节点 */
     loading?: boolean;
-    /** 骨架屏类型：text, circle, rect */
-    type?: 'text' | 'circle' | 'rect';
-    /** 宽度 */
+    /** 是否展示扫光动画，对应 antd `active` */
+    active?: boolean;
+    /** 同 `active`，兼容旧属性 */
+    animated?: boolean;
+    /** 标题占位 */
+    title?: boolean | SkeletonTitleProps;
+    /** 段落占位 */
+    paragraph?: boolean | SkeletonParagraphProps;
+    /** 左侧头像占位 */
+    avatar?: boolean | SkeletonAvatarProps;
+    /** 标题与段落是否使用大圆角 */
+    round?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    /**
+     * `composed`：标题+段落组合（默认，对齐 [antd Skeleton](https://ant.design/components/skeleton-cn)）；可配合 `avatar`
+     * `block`：单行/单块占位（兼容历史 `type` + `rows`）
+     */
+    mode?: 'composed' | 'block';
+    /** 仅在 mode=block 时生效 */
+    type?: SkeletonBlockType;
     width?: string | number;
-    /** 高度 */
     height?: string | number;
-    /** 圆角大小，仅在type为circle时生效 */
     radius?: string | number;
-    /** 显示多行文本骨架，仅在type为text时生效 */
     rows?: number;
-    /** 是否显示动画效果 */
-    animated?: boolean;
-    /** 自定义样式类名 */
-    className?: string;
-    /** 自定义内联样式 */
-    style?: React.CSSProperties;
-    /** 子元素 */
-    children?: React.ReactNode;
-    /** 是否是圆角矩形 */
-    round?: boolean;
-}
-export declare const Skeleton: React.FC<SkeletonProps>;
+};
+export declare const SkeletonAvatar: FC<SkeletonAvatarProps>;
+export declare const SkeletonTitle: FC<SkeletonTitleProps>;
+export declare const SkeletonParagraph: FC<SkeletonParagraphProps>;
+export declare const SkeletonInput: FC<SkeletonInputProps>;
+export declare const SkeletonButton: FC<SkeletonButtonProps>;
+type CompoundedSkeleton = FC<SkeletonProps> & {
+    Avatar: typeof SkeletonAvatar;
+    Title: typeof SkeletonTitle;
+    Paragraph: typeof SkeletonParagraph;
+    Input: typeof SkeletonInput;
+    Button: typeof SkeletonButton;
+};
+export declare const Skeleton: CompoundedSkeleton;
+export {};