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

package/dist/InputNumber/style.scss

@@ -1,43 +1,63 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 $trionesInputNumberCls: 'triones-antm-input-number';
 
+$inputNumberBg: #EEEEEE;
+$inputSm: 24Px;
+$inputLg: 40Px;
+
 .#{$trionesInputNumberCls} {
   display: inline-flex;
   align-items: center;
   gap: 4Px;
-  border-radius: $trionesBorderRadius;
-  background-color: $trionesColorTextQuaternary;
+  border-radius: variable.$trionesBorderRadius;
+  background-color: $inputNumberBg;
 
   input {
+
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
     }
 
+    background-color: transparent;
     border: 0;
-    text-align: center;
-    width: 30Px;
+    text-align: center ;
+    width: 32Px;
+
 
     &:focus {
       outline: none;
     }
   }
 
+
   &-button {
     cursor: pointer;
     display: flex;
     font-size: 10Px;
-    height: 20Px;
-    width: 20Px;
+    height: 32Px;
+    width: 32Px;
     justify-content: center;
     align-items: center;
-    &-disabled{
+
+    &-sm {
+      width: $inputSm;
+      height: $inputSm;
+    }
+
+    &-lg {
+      width: $inputLg;
+      height: $inputLg;
+    }
+
+    &-disabled {
       cursor: not-allowed;
-      color: $trionesColorTextDisabled;
+      color: variable.$trionesColorTextDisabled;
     }
-    .triones-antm-icon{
-      font-size: 10Px!important;
+
+    .triones-antm-icon {
+      font-size: 10Px !important;
     }
   }
-}
+}

package/dist/NavBar/nav-bar.d.ts

@@ -26,6 +26,7 @@ export type NavBarProps = {
      * @description 标题
      */
     children?: ReactNode;
+    className?: string;
     style?: CSSProperties;
 };
 export declare const NavBar: FC<NavBarProps>;

package/dist/NavBar/nav-bar.js

@@ -17,7 +17,8 @@ export var NavBar = function NavBar(props) {
   var mergedDefaultBackIcon = componentConfig.backIcon || defaultBackIcon;
   var mergedBackIcon = mergeProp(defaultBackIcon, componentConfig.backIcon, backIcon === true ? mergedDefaultBackIcon : backIcon);
   return withNativeProps(mergedProps, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix)
+    className: classNames(classPrefix, mergedProps.className),
+    style: mergedProps.style
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-left"),
     role: "button"

package/dist/NavBar/style.scss

@@ -1,6 +1,7 @@
-@use "../style/variable" as *;
-$trionesNavBarColorBg:$trionesColorBorderBg !default;
-$trionesNavBarColorText:$trionesColorTextBase !default;
+@use "../style/variable" as variable;
+
+$trionesNavBarColorBg: variable.$trionesColorBorderBg !default;
+$trionesNavBarColorText: variable.$trionesColorTextBase !default;
 
 $class-prefix-nav-bar: 'triones-antm-nav-bar';
 /* prettier-ignore */
@@ -20,6 +21,7 @@ $class-prefix-nav-bar: 'triones-antm-nav-bar';
   &-right {
     flex: 1;
   }
+
   &-title {
     flex: auto;
     text-align: center;
@@ -33,6 +35,7 @@ $class-prefix-nav-bar: 'triones-antm-nav-bar';
     margin-right: 16PX;
     padding: 6PX 0;
     cursor: pointer;
+
     &-arrow {
       font-size: 20PX;
       margin-right: 5PX;

package/dist/Picker/style.scss

@@ -1,4 +1,4 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 $pickerCls: 'triones-antm-picker';
 
 .#{$pickerCls} {
@@ -20,7 +20,7 @@ $pickerCls: 'triones-antm-picker';
       padding: 8Px;
       font-size: 12Px;
       &-ok{
-        color: $trionesColorPrimary;
+        color: variable.$trionesColorPrimary;
       }
     }
 

package/dist/Popup/index.d.ts

@@ -1,3 +1,5 @@
 import { Popup, PopupProps } from "./popup";
+import { PopupModal } from "./popup-modal";
 export type { PopupProps };
+export { PopupModal };
 export default Popup;

package/dist/Popup/index.js

@@ -1,2 +1,4 @@
 import { Popup } from "./popup";
+import { PopupModal } from "./popup-modal";
+export { PopupModal };
 export default Popup;

package/dist/Popup/style.scss

@@ -1,4 +1,4 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 $popupCls: 'triones-antm-popup';
 
 .#{$popupCls} {
@@ -23,8 +23,8 @@ $popupCls: 'triones-antm-popup';
   &-body {
     background-color: white;
     position: fixed;
-    border-top-left-radius: $trionesBorderRadius;
-    border-top-right-radius: $trionesBorderRadius;
+    border-top-left-radius: variable.$trionesBorderRadius;
+    border-top-right-radius: variable.$trionesBorderRadius;
   }
 
   &-top {

package/dist/Radio/RadioGroup.js

@@ -20,7 +20,7 @@ export var RadioGroup = function RadioGroup(_ref) {
     labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
-    items = _ref.items;
+    options = _ref.options;
   var _useState = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : value),
     _useState2 = _slicedToArray(_useState, 2),
     internalValue = _useState2[0],
@@ -44,14 +44,14 @@ export var RadioGroup = function RadioGroup(_ref) {
     }
   }, shape === 'button' ? /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(classPrefix, "-button-group"))
-  }, children || (items === null || items === void 0 ? void 0 : items.map(function (item) {
+  }, children || (options === null || options === void 0 ? void 0 : options.map(function (item) {
     return /*#__PURE__*/React.createElement(RadioButton, {
       key: item.value,
       value: item.value
     }, item.label);
   }))) : /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(classPrefix, "-group"), "".concat(classPrefix, "-group-").concat(direction))
-  }, children || (items === null || items === void 0 ? void 0 : items.map(function (item) {
+  }, children || (options === null || options === void 0 ? void 0 : options.map(function (item) {
     return /*#__PURE__*/React.createElement(Radio, {
       key: item.value,
       value: item.value

package/dist/Radio/style.scss

@@ -1,4 +1,4 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 
 $checkboxDisabledColor: rgba(0, 0, 0, 0.25) !default;
 
@@ -12,11 +12,12 @@ $class-prefix-radio: 'triones-antm-radio';
 
   .#{$class-prefix-radio} {
     &-fake {
-      width: 22PX;
-      height: 22PX;
+      width: 20PX;
+      height: 20PX;
 
       .triones-antm-icon {
         //position: absolute;
+        font-size: variable.$trionesFontSize;
       }
 
       &-checked {
@@ -25,12 +26,14 @@ $class-prefix-radio: 'triones-antm-radio';
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        background-color: $trionesColorPrimary;
+        background-color: variable.$trionesColorPrimary;
         color: white;
         border-radius: 50vh;
         box-sizing: border-box;
         overflow: hidden;
-
+        .triones-antm-icon{
+          font-size: 14Px;
+        }
       }
 
       &-unchecked {
@@ -40,7 +43,7 @@ $class-prefix-radio: 'triones-antm-radio';
         justify-content: center;
         align-items: center;
         border-radius: 50vh;
-        border: 1PX solid $trionesBorderColor;
+        border: 1PX solid variable.$trionesBorderColor;
         box-sizing: border-box;
       }
 
@@ -88,36 +91,36 @@ $class-prefix-radio: 'triones-antm-radio';
 .#{$class-prefix-radio}-button-wrapper {
   display: inline-flex;
   position: relative;
-  border-top: 1PX solid $trionesBorderColor;
-  border-bottom: 1PX solid $trionesBorderColor;
-  border-right: 1PX solid $trionesBorderColor;
+  border-top: 1PX solid variable.$trionesBorderColor;
+  border-bottom: 1PX solid variable.$trionesBorderColor;
+  border-right: 1PX solid variable.$trionesBorderColor;
 
   &:first-child {
-    border-left: 1PX solid $trionesBorderColor;
-    border-top-left-radius: $trionesBorderRadius;
-    border-bottom-left-radius: $trionesBorderRadius;
+    border-left: 1PX solid variable.$trionesBorderColor;
+    border-top-left-radius: variable.$trionesBorderRadius;
+    border-bottom-left-radius: variable.$trionesBorderRadius;
   }
 
   &:last-child {
-    border-right: 1PX solid $trionesBorderColor;
-    border-top-right-radius: $trionesBorderRadius;
-    border-bottom-right-radius: $trionesBorderRadius;
+    border-right: 1PX solid variable.$trionesBorderColor;
+    border-top-right-radius: variable.$trionesBorderRadius;
+    border-bottom-right-radius: variable.$trionesBorderRadius;
   }
 
   &-checked {
-    border-top: 1PX solid $trionesColorPrimary;
-    border-bottom: 1PX solid $trionesColorPrimary;
-    color: $trionesColorPrimary;
+    border-top: 1PX solid variable.$trionesColorPrimary;
+    border-bottom: 1PX solid variable.$trionesColorPrimary;
+    color: variable.$trionesColorPrimary;
 
     &:first-child {
-      border: 1PX solid $trionesColorPrimary;
+      border: 1PX solid variable.$trionesColorPrimary;
     }
 
     &:not(:first-child) {
       &::before {
         content: " ";
         width: 1PX;
-        background-color: $trionesColorPrimary;
+        background-color: variable.$trionesColorPrimary;
         position: absolute;
         inset-block-start: -1Px;
         inset-inline-start: -1Px;
@@ -125,7 +128,7 @@ $class-prefix-radio: 'triones-antm-radio';
         padding-block: 1Px;
       }
 
-      border-right: 1PX solid $trionesColorPrimary;
+      border-right: 1PX solid variable.$trionesColorPrimary;
     }
   }
 

package/dist/Radio/types.d.ts

@@ -41,6 +41,11 @@ export type RadioProps = {
      */
     onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
 };
+export type RadioOptionProps = {
+    label?: React.ReactNode;
+    value?: any;
+    [key: string]: any;
+};
 export interface RadioGroupProps {
     children?: ReactNode;
     className?: string;
@@ -51,8 +56,5 @@ export interface RadioGroupProps {
     shape?: 'button' | 'round';
     labelPosition?: 'left' | 'right';
     direction?: 'vertical' | 'horizontal';
-    items?: {
-        label: React.ReactNode;
-        value: any;
-    }[];
+    options?: RadioOptionProps[];
 }

package/dist/SafeArea/style.scss

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

package/dist/Scaffold/style.scss

@@ -1,4 +1,4 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 
 
 $trionesScaffoldCls: 'triones-antm-scaffold';
@@ -8,6 +8,7 @@ $trionesScaffoldCls: 'triones-antm-scaffold';
   width: 100%;
   display: flex;
   flex-direction: column;
+  background-color: variable.$trionesColorBgScaffold;
 
   &-body {
     flex: 1 auto;

package/dist/SideBar/style.scss

@@ -1,4 +1,4 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 
 $trionesSideBarCls: 'triones-antm-sidebar';
 
@@ -9,7 +9,7 @@ $trionesSideBarCls: 'triones-antm-sidebar';
 
   &-tabs {
     min-width: 0;
-    background-color: $trionesColorFill;
+    background-color: variable.$trionesColorFill;
     overflow: auto;
     scrollbar-width: thin;
     flex-shrink: 0;
@@ -17,12 +17,12 @@ $trionesSideBarCls: 'triones-antm-sidebar';
 
   &-tab {
     cursor: pointer;
-    padding: $trionesPadding $trionesPadding;
-    color: $trionesColorTextSecondary;
+    padding: variable.$trionesPadding variable.$trionesPadding;
+    color: variable.$trionesColorTextSecondary;
 
     &-active {
-      color: $trionesColorPrimaryText;
-      background-color: $trionesColorBgBase;
+      color: variable.$trionesColorPrimaryText;
+      background-color: variable.$trionesColorBgBase;
     }
 
   }

package/dist/Space/space.d.ts

@@ -34,5 +34,6 @@ export type SpaceProps = {
      */
     size?: Size | Size[];
     style?: CSSProperties;
+    separator?: ReactNode;
 };
 export declare const Space: FC<SpaceProps>;

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

@@ -3,10 +3,13 @@ $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 {

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/style.scss

@@ -8,6 +8,9 @@ $clsPrefixStep: 'triones-antm-step';
 
     .#{$clsPrefixStep} {
       //flex: 1 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 4Px;
       &-indicator {
         display: flex;
         flex-direction: row;
@@ -46,6 +49,10 @@ $clsPrefixStep: 'triones-antm-step';
 
       &-content {
         text-align: center;
+        &-title{
+
+        }
+        &-desc{}
       }
 
       &:first-child {

package/dist/Switch/style.scss

@@ -1,4 +1,4 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 
 $class-prefix-switch: 'triones-antm-switch';
 
@@ -30,7 +30,7 @@ $class-prefix-switch: 'triones-antm-switch';
     height: var(--height);
     box-sizing: border-box;
     border-radius: 31PX;
-    background: $trionesBorderColor;
+    background: variable.$trionesBorderColor;
     z-index: 0;
     overflow: hidden;
     line-height: var(--height);
@@ -58,7 +58,7 @@ $class-prefix-switch: 'triones-antm-switch';
     width: calc(var(--height) - 2 * var(--border-width));
     height: calc(var(--height) - 2 * var(--border-width));
     border-radius: calc(var(--height) - 2 * var(--border-width));
-    background: $trionesColorTextLightSolid;
+    background: variable.$trionesColorTextLightSolid;
     position: absolute;
     z-index: 2;
     top: var(--border-width);
@@ -69,7 +69,7 @@ $class-prefix-switch: 'triones-antm-switch';
     -1PX 2PX 2PX 0 rgba(0, 0, 0, 0.1);
 
     &-loading {
-      color: var(--color,$trionesColorPrimary);
+      color: var(--color,variable.$trionesColorPrimary);
       display: inline-block;
       height: 100%;
       width: 100%;
@@ -96,7 +96,7 @@ $class-prefix-switch: 'triones-antm-switch';
   /* 选中状态 */
   &.#{$class-prefix-switch}-checked {
     .#{$class-prefix-switch}-checkbox {
-      background: var(--checked-color, $trionesColorPrimary);
+      background: var(--checked-color, variable.$trionesColorPrimary);
 
       &:before {
         transform: scale(0);
@@ -109,7 +109,7 @@ $class-prefix-switch: 'triones-antm-switch';
 
     .#{$class-prefix-switch}-inner {
       margin: 0 calc(var(--height) - var(--border-width) + 5PX) 0 8PX;
-      color: $trionesColorTextLightSolid;
+      color: variable.$trionesColorTextLightSolid;
     }
   }
 

package/dist/TabBar/index.js

@@ -1,3 +1,4 @@
-import { TabBar as InternalTabBar } from "./tab-bar";
+import { TabBar as InternalTabBar, TabBarItem } from "./tab-bar";
 var TabBar = InternalTabBar;
+TabBar.Item = TabBarItem;
 export default TabBar;

package/dist/TabBar/index.scss

@@ -1,6 +1,6 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 
-$trionesTabBarActiveColor: $trionesColorPrimary !default;
+$trionesTabBarActiveColor: variable.$trionesColorPrimary !default;
 
 $tabBarCls: 'triones-tab-bar';
 .#{$tabBarCls} {
@@ -20,6 +20,7 @@ $tabBarCls: 'triones-tab-bar';
     gap: 4Px;
     cursor: default;
     flex: 1 auto;
+    padding: 4Px;
 
     &-active {
       color: $trionesTabBarActiveColor;

package/dist/Tabs/style.scss

@@ -1,4 +1,4 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 $tabsCls: 'triones-antm-tabs';
 
 .#{$tabsCls} {
@@ -42,7 +42,7 @@ $tabsCls: 'triones-antm-tabs';
   &-ink-bar {
     position: absolute;
     bottom: 0;
-    background-color: $trionesColorPrimary;
+    background-color: variable.$trionesColorPrimary;
     height: 2px;
     //width: 100px;
     &-animated {
@@ -69,7 +69,7 @@ $tabsCls: 'triones-antm-tabs';
     }
 
     &-active {
-      color: $trionesColorPrimary;
+      color: variable.$trionesColorPrimary;
       &::after{
         content: ' ';
         position: absolute;
@@ -80,7 +80,7 @@ $tabsCls: 'triones-antm-tabs';
         font-size: 0;
         border-radius: 50vh;
         box-sizing: border-box;
-        background-color: $trionesColorPrimary;
+        background-color: variable.$trionesColorPrimary;
       }
     }
 

package/dist/Tag/style.scss

@@ -1,4 +1,4 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 $tagCls: 'triones-antm-tag';
 
 .#{$tagCls} {
@@ -7,7 +7,7 @@ $tagCls: 'triones-antm-tag';
   padding: 2Px 8Px;
   font-size: 11Px;
   line-height: 1.2;
-  border-radius: $trionesBorderRadius;
+  border-radius: variable.$trionesBorderRadius;
   box-sizing: border-box;
   white-space: nowrap;
 
@@ -35,12 +35,12 @@ $tagCls: 'triones-antm-tag';
   // Primary variant styles
   &-primary {
     &.#{$tagCls}-solid {
-      background: $trionesColorPrimary;
+      background: variable.$trionesColorPrimary;
       color: #fff;
     }
     &.#{$tagCls}-outline {
-      color: $trionesColorPrimary;
-      border: 1px solid $trionesColorPrimary;
+      color: variable.$trionesColorPrimary;
+      border: 1px solid variable.$trionesColorPrimary;
       background: transparent;
     }
   }
@@ -48,12 +48,12 @@ $tagCls: 'triones-antm-tag';
   // Success variant styles
   &-success {
     &.#{$tagCls}-solid {
-      background: $trionesColorSuccess;
+      background: variable.$trionesColorSuccess;
       color: #fff;
     }
     &.#{$tagCls}-outline {
-      color: $trionesColorSuccess;
-      border: 1px solid $trionesColorSuccess;
+      color: variable.$trionesColorSuccess;
+      border: 1px solid variable.$trionesColorSuccess;
       background: transparent;
     }
   }
@@ -61,12 +61,12 @@ $tagCls: 'triones-antm-tag';
   // Warning variant styles
   &-warning {
     &.#{$tagCls}-solid {
-      background: $trionesColorWarning;
+      background: variable.$trionesColorWarning;
       color: #fff;
     }
     &.#{$tagCls}-outline {
-      color: $trionesColorWarning;
-      border: 1px solid $trionesColorWarning;
+      color: variable.$trionesColorWarning;
+      border: 1px solid variable.$trionesColorWarning;
       background: transparent;
     }
   }
@@ -74,12 +74,12 @@ $tagCls: 'triones-antm-tag';
   // Danger variant styles
   &-danger {
     &.#{$tagCls}-solid {
-      background: $trionesColorError;
+      background: variable.$trionesColorError;
       color: #fff;
     }
     &.#{$tagCls}-outline {
-      color: $trionesColorError;
-      border: 1px solid $trionesColorError;
+      color: variable.$trionesColorError;
+      border: 1px solid variable.$trionesColorError;
       background: transparent;
     }
   }