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

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) fengxiaotx@163.com
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) fengxiaotx@163.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,23 +1,23 @@
-# @trionesdev/antd-mobile-base-react
-
-[![NPM version](https://img.shields.io/npm/v/@trionesdev/antd-mobile-base-react.svg?style=flat)](https://npmjs.com/package/@trionesdev/antd-mobile-base-react)
-[![NPM downloads](http://img.shields.io/npm/dm/@trionesdev/antd-mobile-base-react.svg?style=flat)](https://npmjs.com/package/@trionesdev/antd-mobile-base-react)
-
-## Install
-
-```bash
-$ pnpm install
-```
-
-```bash
-$ npm run dev
-$ npm run build
-```
-
-## Options
-
-TODO
-
-## LICENSE
-
-MIT
+# @trionesdev/antd-mobile-base-react
+
+[![NPM version](https://img.shields.io/npm/v/@trionesdev/antd-mobile-base-react.svg?style=flat)](https://npmjs.com/package/@trionesdev/antd-mobile-base-react)
+[![NPM downloads](http://img.shields.io/npm/dm/@trionesdev/antd-mobile-base-react.svg?style=flat)](https://npmjs.com/package/@trionesdev/antd-mobile-base-react)
+
+## Install
+
+```bash
+$ pnpm install
+```
+
+```bash
+$ npm run dev
+$ npm run build
+```
+
+## Options
+
+TODO
+
+## LICENSE
+
+MIT

package/dist/ActionSheet/ActionSheet.d.ts

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

package/dist/ActionSheet/index.d.ts

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

package/dist/ActionSheet/style.scss

@@ -1,51 +1,52 @@
-@use "../style/variable" as *;
-$actionSheetCls: 'triones-antm-action-sheet';
-
-.#{$actionSheetCls} {
-  display: flex;
-  flex-direction: column;
-  background-color: $trionesColorFill;
-  border-top-left-radius: $trionesBorderRadius;
-  border-top-right-radius: $trionesBorderRadius;
-  overflow: hidden;
-  gap: 2Px;
-  &-body{
-
-  }
-  &-title{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 48Px;
-    background-color: white;
-    font-size: 18Px;
-    border-bottom: 1Px solid $trionesBorderColor;
-  }
-  &-actions{
-    &-item{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 48Px;
-      background-color: white;
-      cursor: default;
-      position: relative;
-      font-size: 18Px;
-      &:hover{
-        opacity: 0.8;
-      }
-    }
-  }
-  &-cancel{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 48Px;
-    font-size: 18Px;
-    background-color: white;
-    cursor: default;
-    &:hover{
-      opacity: 0.8;
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$actionSheetCls: 'triones-antm-action-sheet';
+
+.#{$actionSheetCls} {
+  display: flex;
+  flex-direction: column;
+  background-color: variable.$trionesColorFill;
+  border-top-left-radius: variable.$trionesBorderRadius;
+  border-top-right-radius: variable.$trionesBorderRadius;
+  overflow: hidden;
+  gap: 2Px;
+  &-body{
+
+  }
+  &-title{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 48Px;
+    background-color: white;
+    font-size: 18Px;
+    border-bottom: 1Px solid variable.$trionesBorderColor;
+  }
+  &-actions{
+    &-item{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 48Px;
+      background-color: white;
+      cursor: default;
+      position: relative;
+      font-size: 18Px;
+      &:hover{
+        opacity: 0.8;
+      }
+    }
+  }
+  &-cancel{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 48Px;
+    font-size: 18Px;
+    background-color: white;
+    cursor: default;
+    &:hover{
+      opacity: 0.8;
+    }
+  }
+}

package/dist/Alert/alert.d.ts

@@ -30,4 +30,3 @@ export type AlertProps = {
     afterClose?: () => void;
 };
 export declare const Alert: FC<AlertProps>;
-//# sourceMappingURL=alert.d.ts.map

package/dist/Alert/index.d.ts

@@ -1,4 +1,3 @@
 import { Alert, AlertProps } from "./alert";
 export type { AlertProps };
 export default Alert;
-//# sourceMappingURL=index.d.ts.map

package/dist/Alert/style.scss

@@ -1,69 +1,69 @@
-@use "../style/variable" as *;
-
-$trionesAlertCls: 'triones-antm-alert';
-
-$trionesAlertDefaultPadding: 8Px 12Px;
-
-.#{$trionesAlertCls} {
-  padding: $trionesAlertDefaultPadding;
-  border-radius: $trionesBorderRadius;
-  display: flex;
-  flex: 1 auto;
-  border: 1Px solid;
-  align-items: center;
-  justify-content: center;
-  gap: 4Px;
-
-  &-success {
-    border-color: $trionesColorSuccessBorder;
-    background-color: $trionesColorSuccessBg;
-
-    .#{$trionesAlertCls}-icon {
-      color: $trionesColorSuccess;
-    }
-  }
-
-  &-info {
-    border-color: $trionesColorInfoBorder;
-    background-color: $trionesColorInfoBg;
-
-    .#{$trionesAlertCls}-icon {
-      color: $trionesColorInfo;
-    }
-  }
-
-  &-warning {
-    border-color: $trionesColorWarningBorder;
-    background-color: $trionesColorWarningBg;
-
-    .#{$trionesAlertCls}-icon {
-      color: $trionesColorWarning;
-    }
-  }
-
-  &-error {
-    border-color: $trionesColorErrorBorder;
-    background-color: $trionesColorErrorBg;
-
-    .#{$trionesAlertCls}-icon {
-      color: $trionesColorError;
-    }
-  }
-
-  &-icon {
-  }
-
-  &-content {
-    flex: 1 auto;
-  }
-
-  &-close-icon {
-    color: $trionesColorIcon;
-    font-size: $trionesFontSizeIcon;
-    cursor: pointer;
-
-    .triones-antm-icon {
-      font-size: $trionesFontSizeIcon;
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$trionesAlertCls: 'triones-antm-alert';
+
+$trionesAlertDefaultPadding: 8Px 12Px;
+
+.#{$trionesAlertCls} {
+  padding: $trionesAlertDefaultPadding;
+  border-radius: variable.$trionesBorderRadius;
+  display: flex;
+  flex: 1 auto;
+  border: 1Px solid;
+  align-items: center;
+  justify-content: center;
+  gap: 4Px;
+
+  &-success {
+    border-color: variable.$trionesColorSuccessBorder;
+    background-color: variable.$trionesColorSuccessBg;
+
+    .#{$trionesAlertCls}-icon {
+      color: variable.$trionesColorSuccess;
+    }
+  }
+
+  &-info {
+    border-color: variable.$trionesColorInfoBorder;
+    background-color: variable.$trionesColorInfoBg;
+
+    .#{$trionesAlertCls}-icon {
+      color: variable.$trionesColorInfo;
+    }
+  }
+
+  &-warning {
+    border-color: variable.$trionesColorWarningBorder;
+    background-color: variable.$trionesColorWarningBg;
+
+    .#{$trionesAlertCls}-icon {
+      color: variable.$trionesColorWarning;
+    }
+  }
+
+  &-error {
+    border-color: variable.$trionesColorErrorBorder;
+    background-color: variable.$trionesColorErrorBg;
+
+    .#{$trionesAlertCls}-icon {
+      color: variable.$trionesColorError;
+    }
+  }
+
+  &-icon {
+  }
+
+  &-content {
+    flex: 1 auto;
+  }
+
+  &-close-icon {
+    color: variable.$trionesColorIcon;
+    font-size: variable.$trionesFontSizeIcon;
+    cursor: pointer;
+
+    .triones-antm-icon {
+      font-size: variable.$trionesFontSizeIcon;
+    }
+  }
+}

package/dist/Avatar/avatar.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import './style.scss';
+import { SizeType } from 'src/types';
 export type AvatarProps = {
     alt?: string;
     icon?: React.ReactNode;
     shape?: 'circle' | 'square';
-    size?: number;
+    size?: SizeType | number;
     src?: string | React.ReactNode;
     srcSet?: string;
     style?: React.CSSProperties;
@@ -12,4 +13,3 @@ export type AvatarProps = {
 };
 export declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;
-//# sourceMappingURL=avatar.d.ts.map

package/dist/Avatar/avatar.js

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import classNames from 'classnames';
-import React from 'react';
+import React, { useMemo } from 'react';
 import "./style.scss";
 export var Avatar = function Avatar(_ref) {
   var alt = _ref.alt,
@@ -13,17 +13,27 @@ export var Avatar = function Avatar(_ref) {
     _ref$shape = _ref.shape,
     shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 40 : _ref$size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
     src = _ref.src,
     srcSet = _ref.srcSet,
     style = _ref.style,
     children = _ref.children;
   var clsPrefix = 'triones-antm-avatar';
+  var avatarSize = useMemo(function () {
+    if (typeof size === 'number') {
+      return size;
+    }
+    return {
+      small: 24,
+      middle: 32,
+      large: 40
+    }[size];
+  }, [size]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(clsPrefix, _defineProperty({}, "".concat(clsPrefix, "-").concat(shape !== 'square' ? 'circle' : 'square'), true)),
     style: _objectSpread({
-      width: size,
-      height: size,
+      width: avatarSize,
+      height: avatarSize,
       backgroundColor: src ? undefined : '#ccc'
     }, style)
   }, src ? typeof src === 'string' ? /*#__PURE__*/React.createElement("img", {

package/dist/Avatar/index.d.ts

@@ -1,4 +1,3 @@
 import { Avatar, AvatarProps } from "./avatar";
 export type { AvatarProps };
 export default Avatar;
-//# sourceMappingURL=index.d.ts.map

package/dist/Avatar/style.scss

@@ -1,16 +1,17 @@
-$avatarCls: 'triones-antm-avatar';
-
-.#{$avatarCls} {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-
-  &-circle {
-    border-radius: 50%;
-  }
-
-  &-shape-square {
-    border-radius: 6Px;
-  }
-}
+@use "../style/variable" as variable;
+$avatarCls: 'triones-antm-avatar';
+
+.#{$avatarCls} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  &-circle {
+    border-radius: 50%;
+  }
+
+  &-square {
+    border-radius: variable.$trionesBorderRadius;
+  }
+}

package/dist/Badge/badge.d.ts

@@ -12,4 +12,3 @@ export interface BadgeProps extends BasicComponent {
     fill: BadgeFill;
 }
 export declare const Badge: FunctionComponent<Partial<BadgeProps>>;
-//# sourceMappingURL=badge.d.ts.map

package/dist/Badge/index.d.ts

@@ -1,4 +1,3 @@
 import { Badge } from './badge';
 export type { BadgeFill, BadgeProps } from './badge';
 export default Badge;
-//# sourceMappingURL=index.d.ts.map

package/dist/Badge/style.scss

@@ -1,100 +1,100 @@
-/* prettier-ignore */
-$color-primary: #fa2c19;
-$color-primary-text: #fff;
-$badge-height: 14PX;
-$badge-background-color: linear-gradient(135deg, #f53d4d 0%, #fa2c19 100%);
-$badge-color: #fff;
-$badge-font-size: 10PX;
-$badge-border: 0PX solid #fff;
-$badge-border-radius: $badge-height;
-$badge-min-width: 5PX;
-$badge-padding: 0 4PX;
-$badge-icon-padding: 3PX;
-$badge-icon-size: 12PX;
-$badge-content-transform: translateY(-50%) translateX(100%);
-$badge-z-index: 1;
-$badge-dot-width: 7PX;
-$badge-dot-border: 0PX solid #fff;
-
-.triones-antm-badge {
-  position: relative;
-  display: inline-block;
-
-  &-icon {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: $badge-background-color;
-    top: -10%;
-    right: -15%;
-    padding: $badge-icon-padding;
-    text-align: center;
-    border: $badge-border;
-    border-radius: $badge-border-radius;
-    z-index: $badge-z-index;
-
-    .triones-antm-icon {
-      width: $badge-icon-size;
-      height: $badge-icon-size;
-      font-size: $badge-icon-size;
-    }
-  }
-
-  &-sup {
-    height: $badge-height;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: $badge-background-color;
-    color: $badge-color;
-    padding: $badge-padding;
-    font-size: $badge-font-size;
-    font-weight: normal;
-    text-align: center;
-    border: $badge-border;
-    border-radius: $badge-border-radius;
-    min-width: $badge-min-width;
-    white-space: nowrap;
-    z-index: 1;
-  }
-
-  &-one {
-    height: $badge-height;
-    width: $badge-height;
-    padding: 0;
-  }
-
-  &-content {
-    transform: $badge-content-transform;
-  }
-
-  &-dot {
-    width: $badge-dot-width;
-    height: $badge-dot-width;
-    border: $badge-dot-border;
-    border-radius: $badge-dot-width;
-    padding: 0;
-  }
-
-  &-outline {
-    .triones-antm-badge-content {
-      background: $color-primary-text;
-      border: 1PX solid $color-primary;
-      color: $color-primary;
-    }
-  }
-}
-
-[dir='rtl'] .triones-antm-badge,
-.triones-antm-rtl .triones-antm-badge {
-  &-icon {
-    right: auto;
-    left: -15%;
-  }
-
-  &-content {
-    transform: translateY(-50%) translateX(-100%);
-  }
-}
+/* prettier-ignore */
+$color-primary: #fa2c19;
+$color-primary-text: #fff;
+$badge-height: 14PX;
+$badge-background-color: linear-gradient(135deg, #f53d4d 0%, #fa2c19 100%);
+$badge-color: #fff;
+$badge-font-size: 10PX;
+$badge-border: 0PX solid #fff;
+$badge-border-radius: $badge-height;
+$badge-min-width: 5PX;
+$badge-padding: 0 4PX;
+$badge-icon-padding: 3PX;
+$badge-icon-size: 12PX;
+$badge-content-transform: translateY(-50%) translateX(100%);
+$badge-z-index: 1;
+$badge-dot-width: 7PX;
+$badge-dot-border: 0PX solid #fff;
+
+.triones-antm-badge {
+  position: relative;
+  display: inline-block;
+
+  &-icon {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: $badge-background-color;
+    top: -10%;
+    right: -15%;
+    padding: $badge-icon-padding;
+    text-align: center;
+    border: $badge-border;
+    border-radius: $badge-border-radius;
+    z-index: $badge-z-index;
+
+    .triones-antm-icon {
+      width: $badge-icon-size;
+      height: $badge-icon-size;
+      font-size: $badge-icon-size;
+    }
+  }
+
+  &-sup {
+    height: $badge-height;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: $badge-background-color;
+    color: $badge-color;
+    padding: $badge-padding;
+    font-size: $badge-font-size;
+    font-weight: normal;
+    text-align: center;
+    border: $badge-border;
+    border-radius: $badge-border-radius;
+    min-width: $badge-min-width;
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  &-one {
+    height: $badge-height;
+    width: $badge-height;
+    padding: 0;
+  }
+
+  &-content {
+    transform: $badge-content-transform;
+  }
+
+  &-dot {
+    width: $badge-dot-width;
+    height: $badge-dot-width;
+    border: $badge-dot-border;
+    border-radius: $badge-dot-width;
+    padding: 0;
+  }
+
+  &-outline {
+    .triones-antm-badge-content {
+      background: $color-primary-text;
+      border: 1PX solid $color-primary;
+      color: $color-primary;
+    }
+  }
+}
+
+[dir='rtl'] .triones-antm-badge,
+.triones-antm-rtl .triones-antm-badge {
+  &-icon {
+    right: auto;
+    left: -15%;
+  }
+
+  &-content {
+    transform: translateY(-50%) translateX(-100%);
+  }
+}