@trionesdev/antd-mobile-base-react 0.0.2-beta.1 → 0.0.2-beta.3

package/dist/Space/space.js

@@ -20,7 +20,8 @@ export var Space = function Space(_ref) {
     onClick = _ref.onClick,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'small' : _ref$size,
-    style = _ref.style;
+    style = _ref.style,
+    separator = _ref.separator;
   var sizeValue = function sizeValue(size) {
     if (typeof size === 'number') {
       return "".concat(size, "Px");
@@ -53,9 +54,19 @@ export var Space = function Space(_ref) {
       rowGap: rowGapValue
     }),
     onClick: onClick
-  }, React.Children.map(children, function (child) {
-    return child !== null && child !== undefined && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(classPrefix, "-item")
-    }, child);
-  }));
+  }, function () {
+    var items = [];
+    React.Children.map(children, function (child, index) {
+      if (child !== null && child !== undefined) {
+        items.push( /*#__PURE__*/React.createElement("div", {
+          key: "space-item-".concat(index),
+          className: "".concat(classPrefix, "-item")
+        }, child));
+        if (separator && index < React.Children.count(children) - 1) {
+          items.push(separator);
+        }
+      }
+    });
+    return items;
+  }());
 };

package/dist/Space/style.scss

@@ -1,77 +1,80 @@
-$class-prefix-space: 'triones-antm-space';
-
-.#{$class-prefix-space}-item {
-  flex: none;
-  display: inline-flex;
-}
-/* prettier-ignore */
-.#{$class-prefix-space} {
-  display: inline-flex;
-  &-vertical {
-    flex-direction: column;
-    > .#{$class-prefix-space}-item {
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  &-horizontal {
-    flex-direction: row;
-    > .#{$class-prefix-space}-item {
-      &:last-child {
-
-      }
-    }
-    &.#{$class-prefix-space}-wrap {
-      flex-wrap: wrap;
-      > .#{$class-prefix-space}-item {
-
-      }
-    }
-  }
-  &.#{$class-prefix-space}-block {
-    display: flex;
-    width: 100%;
-    .#{$class-prefix-space}-item{
-      display: flex;
-    }
-
-  }
-  &-align {
-    &-center {
-      align-items: center;
-    }
-    &-start {
-      align-items: flex-start;
-    }
-    &-end {
-      align-items: flex-end;
-    }
-    &-baseline {
-      align-items: baseline;
-    }
-  }
-  &-justify {
-    &-center {
-      justify-content: center;
-    }
-    &-start {
-      justify-content: flex-start;
-    }
-    &-end {
-      justify-content: flex-end;
-    }
-    &-between {
-      justify-content: space-between;
-    }
-    &-around {
-      justify-content: space-around;
-    }
-    &-evenly {
-      justify-content: space-evenly;
-    }
-    &-stretch {
-      justify-content: stretch;
-    }
-  }
-}
+$class-prefix-space: 'triones-antm-space';
+
+.#{$class-prefix-space}-item {
+  flex: none;
+  display: inline-flex;
+  flex-shrink: 1;
+  min-width: 0;
+}
+/* prettier-ignore */
+.#{$class-prefix-space} {
+  display: inline-flex;
+  vertical-align: middle;
+  &-vertical {
+    flex-direction: column;
+    > .#{$class-prefix-space}-item {
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &-horizontal {
+    flex-direction: row;
+    > .#{$class-prefix-space}-item {
+      &:last-child {
+
+      }
+    }
+    &.#{$class-prefix-space}-wrap {
+      flex-wrap: wrap;
+      > .#{$class-prefix-space}-item {
+
+      }
+    }
+  }
+  &.#{$class-prefix-space}-block {
+    display: flex;
+    width: 100%;
+    .#{$class-prefix-space}-item{
+      display: flex;
+    }
+
+  }
+  &-align {
+    &-center {
+      align-items: center;
+    }
+    &-start {
+      align-items: flex-start;
+    }
+    &-end {
+      align-items: flex-end;
+    }
+    &-baseline {
+      align-items: baseline;
+    }
+  }
+  &-justify {
+    &-center {
+      justify-content: center;
+    }
+    &-start {
+      justify-content: flex-start;
+    }
+    &-end {
+      justify-content: flex-end;
+    }
+    &-between {
+      justify-content: space-between;
+    }
+    &-around {
+      justify-content: space-around;
+    }
+    &-evenly {
+      justify-content: space-evenly;
+    }
+    &-stretch {
+      justify-content: stretch;
+    }
+  }
+}

package/dist/SpinLoading/demo/base.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
 declare const _default: () => React.JSX.Element;
 export default _default;
-//# sourceMappingURL=base.d.ts.map

package/dist/SpinLoading/index.d.ts

@@ -1,4 +1,3 @@
 import { SpinLoading, SpinLoadingProps } from "./spin-loading";
 export type { SpinLoadingProps };
 export default SpinLoading;
-//# sourceMappingURL=index.d.ts.map

package/dist/SpinLoading/spin-loading.d.ts

@@ -8,4 +8,3 @@ export declare function createSvgStr(props: {
     stroke: string;
 }): string;
 export declare const SpinLoading: FC<SpinLoadingProps>;
-//# sourceMappingURL=spin-loading.d.ts.map

package/dist/SpinLoading/spin-loading.scss

@@ -1,40 +1,40 @@
-$spinLoadingCls: triones-antm-spin-loading;
-
-.#{$spinLoadingCls} {
-  --size: 32Px;
-  --color: #1677ff;
-  width: var(--size);
-  height: var(--size);
-
-  &-svg {
-    width: 100%;
-    height: 100%;
-    //animation: adm-spin-loading-rotate 0.8s infinite linear;
-
-    > .#{$spinLoadingCls}-circle {
-      //stroke: #1677ff;
-      stroke: var(--color);
-    }
-  }
-
-  &-loading {
-    color: var(--color);
-    display: inline-block;
-    height: 100%;
-    width: 100%;
-    background: currentColor;
-    mask-image: var(--maskImage);
-    -webkit-mask-image: var(--maskImage);
-    animation: adm-spin-loading-rotate 2s infinite linear;
-  }
-
-}
-
-@keyframes adm-spin-loading-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+$spinLoadingCls: triones-antm-spin-loading;
+
+.#{$spinLoadingCls} {
+  --size: 32Px;
+  --color: #1677ff;
+  width: var(--size);
+  height: var(--size);
+
+  &-svg {
+    width: 100%;
+    height: 100%;
+    //animation: adm-spin-loading-rotate 0.8s infinite linear;
+
+    > .#{$spinLoadingCls}-circle {
+      //stroke: #1677ff;
+      stroke: var(--color);
+    }
+  }
+
+  &-loading {
+    color: var(--color);
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    background: currentColor;
+    mask-image: var(--maskImage);
+    -webkit-mask-image: var(--maskImage);
+    animation: adm-spin-loading-rotate 2s infinite linear;
+  }
+
+}
+
+@keyframes adm-spin-loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/Steps/HorizontalSteps.d.ts

@@ -1,4 +1,3 @@
 import { FC } from "react";
 import { HorizontalStepsProps } from "./types";
 export declare const HorizontalSteps: FC<HorizontalStepsProps>;
-//# sourceMappingURL=HorizontalSteps.d.ts.map

package/dist/Steps/HorizontalSteps.js

@@ -64,7 +64,11 @@ var HorizontalStepItem = function HorizontalStepItem(_ref) {
     }
   }))), /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(clsPrefixStep, "-content"))
-  }, title && /*#__PURE__*/React.createElement("div", null, title), description && /*#__PURE__*/React.createElement("div", null, description)));
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-content-title"))
+  }, title), description && /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-content-desc"))
+  }, description)));
 };
 export var HorizontalSteps = function HorizontalSteps(_ref2) {
   var _ref2$stretch = _ref2.stretch,

package/dist/Steps/Point.d.ts

@@ -4,4 +4,3 @@ type PointProps = {
 };
 export declare const Point: FC<PointProps>;
 export {};
-//# sourceMappingURL=Point.d.ts.map

package/dist/Steps/Steps.d.ts

@@ -2,4 +2,3 @@ import { FC } from "react";
 import { StepsProps } from "./types";
 import "./style.scss";
 export declare const Steps: FC<StepsProps>;
-//# sourceMappingURL=Steps.d.ts.map

package/dist/Steps/VerticalSteps.d.ts

@@ -1,4 +1,3 @@
 import { FC } from "react";
 import { VerticalStepsProps } from "./types";
 export declare const VerticalSteps: FC<VerticalStepsProps>;
-//# sourceMappingURL=VerticalSteps.d.ts.map

package/dist/Steps/context.d.ts

@@ -6,4 +6,3 @@ type StepsContextType = {
 };
 export declare const StepsContext: import("react").Context<StepsContextType>;
 export {};
-//# sourceMappingURL=context.d.ts.map

package/dist/Steps/index.d.ts

@@ -2,4 +2,3 @@ import { Steps } from "./Steps";
 import { StepsProps, StepsItemProps } from "./types";
 export type { StepsProps, StepsItemProps };
 export default Steps;
-//# sourceMappingURL=index.d.ts.map

package/dist/Steps/style.scss

@@ -1,146 +1,153 @@
-$clsPrefixSteps: 'triones-antm-steps';
-$clsPrefixStep: 'triones-antm-step';
-
-.#{$clsPrefixSteps} {
-  &-horizontal {
-    display: flex;
-    flex-direction: row;
-
-    .#{$clsPrefixStep} {
-      //flex: 1 auto;
-      &-indicator {
-        display: flex;
-        flex-direction: row;
-
-        &-icon-before {
-          flex: 1 auto;
-          display: flex;
-          align-items: center;
-          min-width: 16Px;
-
-          &-line {
-            height: 1Px;
-            width: 100%;
-          }
-        }
-
-        &-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          min-height: 24Px;
-        }
-
-        &-icon-after {
-          flex: 1 auto;
-          display: flex;
-          align-items: center;
-          min-width: 16Px;
-
-          &-line {
-            height: 1Px;
-            width: 100%;
-          }
-        }
-      }
-
-      &-content {
-        text-align: center;
-      }
-
-      &:first-child {
-        .#{$clsPrefixStep} {
-          &-indicator {
-            &-icon-before {
-              &-line {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-
-      &:last-child {
-        .#{$clsPrefixStep} {
-          &-indicator {
-            &-icon-after {
-              &-line {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &-vertical {
-    .#{$clsPrefixStep} {
-      display: flex;
-      flex-direction: row;
-
-      &-indicator {
-        display: flex;
-        flex-direction: column;
-        padding-inline: 4Px;
-
-        &-icon-before {
-          display: flex;
-          justify-content: center;
-          min-height: 8Px;
-
-          &-line {
-            width: 1Px;
-            height: 100%;
-          }
-        }
-
-        &-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          min-width: 24Px;
-        }
-
-        &-icon-after {
-          flex: 1 auto;
-          display: flex;
-          justify-content: center;
-
-          &-line {
-            width: 1Px;
-            height: 100%;
-          }
-        }
-      }
-
-      &-content {
-        padding: 4Px;
-      }
-
-      &:first-child {
-        .#{$clsPrefixStep} {
-          &-indicator {
-            &-icon-before {
-              &-line {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-
-      &:last-child {
-        .#{$clsPrefixStep} {
-          &-indicator {
-            &-icon-after {
-              &-line {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+$clsPrefixSteps: 'triones-antm-steps';
+$clsPrefixStep: 'triones-antm-step';
+
+.#{$clsPrefixSteps} {
+  &-horizontal {
+    display: flex;
+    flex-direction: row;
+
+    .#{$clsPrefixStep} {
+      //flex: 1 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 4Px;
+      &-indicator {
+        display: flex;
+        flex-direction: row;
+
+        &-icon-before {
+          flex: 1 auto;
+          display: flex;
+          align-items: center;
+          min-width: 16Px;
+
+          &-line {
+            height: 1Px;
+            width: 100%;
+          }
+        }
+
+        &-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-height: 24Px;
+        }
+
+        &-icon-after {
+          flex: 1 auto;
+          display: flex;
+          align-items: center;
+          min-width: 16Px;
+
+          &-line {
+            height: 1Px;
+            width: 100%;
+          }
+        }
+      }
+
+      &-content {
+        text-align: center;
+        &-title{
+
+        }
+        &-desc{}
+      }
+
+      &:first-child {
+        .#{$clsPrefixStep} {
+          &-indicator {
+            &-icon-before {
+              &-line {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        .#{$clsPrefixStep} {
+          &-indicator {
+            &-icon-after {
+              &-line {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &-vertical {
+    .#{$clsPrefixStep} {
+      display: flex;
+      flex-direction: row;
+
+      &-indicator {
+        display: flex;
+        flex-direction: column;
+        padding-inline: 4Px;
+
+        &-icon-before {
+          display: flex;
+          justify-content: center;
+          min-height: 8Px;
+
+          &-line {
+            width: 1Px;
+            height: 100%;
+          }
+        }
+
+        &-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 24Px;
+        }
+
+        &-icon-after {
+          flex: 1 auto;
+          display: flex;
+          justify-content: center;
+
+          &-line {
+            width: 1Px;
+            height: 100%;
+          }
+        }
+      }
+
+      &-content {
+        padding: 4Px;
+      }
+
+      &:first-child {
+        .#{$clsPrefixStep} {
+          &-indicator {
+            &-icon-before {
+              &-line {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        .#{$clsPrefixStep} {
+          &-indicator {
+            &-icon-after {
+              &-line {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/Steps/types.d.ts

@@ -21,4 +21,3 @@ export declare const clsPrefixSteps = "triones-antm-steps";
 export declare const clsPrefixStep = "triones-antm-step";
 export declare const activeColor = "#1777FF";
 export declare const waitColor = "#EEEEEE";
-//# sourceMappingURL=types.d.ts.map

package/dist/Switch/index.d.ts

@@ -1,4 +1,3 @@
 import { Switch } from './switch';
 export type { SwitchProps } from './switch';
 export default Switch;
-//# sourceMappingURL=index.d.ts.map