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

package/dist/Switch/style.scss

@@ -1,4 +1,4 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
 
 $class-prefix-switch: 'triones-antm-switch';
 
@@ -18,7 +18,6 @@ $class-prefix-switch: 'triones-antm-switch';
   vertical-align: middle;
   box-sizing: border-box;
   position: relative;
-  align-self: center;
   cursor: pointer;
 
   input {
@@ -30,7 +29,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 +57,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 +68,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 +95,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 +108,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/Switch/switch.d.ts

@@ -14,6 +14,8 @@ export type SwitchProps = {
     checkedColor?: string;
     width?: number;
     height?: number;
+    value?: boolean;
+    defaultValue?: boolean;
 };
 export declare function createSvgStr(props: {
     stroke: string;

package/dist/Switch/switch.js

@@ -23,27 +23,28 @@ import Base64 from "crypto-js/enc-base64";
 import Utf8 from "crypto-js/enc-utf8";
 var classPrefix = "triones-antm-switch";
 var defaultProps = {
-  defaultChecked: false
+  defaultChecked: false,
+  defaultValue: false
 };
 export function createSvgStr(props) {
   return "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"width:100%;height:100%\" viewBox=\"0 0 20 20\">\n            <circle r=\"9\" cx=\"10\" cy=\"10\"\n                stroke-width=\"1\"\n                stroke=\"".concat(props.stroke, "\"\n                fill=\"transparent\"\n                stroke-linecap=\"round\"\n                stroke-dasharray=\"").concat(10 * 3.14159265358979 * 2, "\"\n                stroke-dashoffset=\"").concat(10 * 3.14159265358979 * 0.5, "\"></circle>\n        </svg>");
 }
 export var Switch = function Switch(p) {
-  var _props$checked;
+  var _ref, _ref2, _ref3, _props$checked;
   var props = mergeProps(defaultProps, p);
   var disabled = props.disabled || props.loading || false;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     changing = _useState2[0],
     setChanging = _useState2[1];
-  var _useState3 = useState((_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : props.defaultChecked),
+  var _useState3 = useState((_ref = (_ref2 = (_ref3 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : props.value) !== null && _ref3 !== void 0 ? _ref3 : props.defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : props.defaultValue) !== null && _ref !== void 0 ? _ref : false),
     _useState4 = _slicedToArray(_useState3, 2),
     checked = _useState4[0],
     setChecked = _useState4[1];
   var _ConfigProvider$useCo = ConfigProvider.useConfig(),
     locale = _ConfigProvider$useCo.locale;
   var handleClick = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -55,7 +56,7 @@ export var Switch = function Switch(p) {
       }, _callee);
     }));
     return function handleClick() {
-      return _ref.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var completedStyle = React.useMemo(function () {

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,18 +69,18 @@ $tabsCls: 'triones-antm-tabs';
     }
 
     &-active {
-      color: $trionesColorPrimary;
+      color: variable.$trionesColorPrimary;
       &::after{
         content: ' ';
         position: absolute;
         bottom: 0;
         width: calc(100% - 0.24rem * 2);
-        height: 0.04rem;
+        height: 2Px;
         overflow: hidden;
         font-size: 0;
         border-radius: 50vh;
         box-sizing: border-box;
-        background-color: $trionesColorPrimary;
+        background-color: variable.$trionesColorPrimary;
       }
     }
 

package/dist/Tag/style.scss

@@ -1,13 +1,14 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
+
 $tagCls: 'triones-antm-tag';
 
 .#{$tagCls} {
-  display: inline-block;
+  display: inline-flex;
   align-items: center;
   padding: 2Px 8Px;
-  font-size: 11Px;
-  line-height: 1.2;
-  border-radius: $trionesBorderRadius;
+  font-size: variable.$trionesFontSizeSm;
+  line-height: 1;
+  border-radius: variable.$trionesBorderRadiusXs;
   box-sizing: border-box;
   white-space: nowrap;
 
@@ -16,7 +17,8 @@ $tagCls: 'triones-antm-tag';
   }
 
   &-round {
-    border-radius: 12px;
+    padding: 2Px 8Px;
+    border-radius: 12Px;
   }
 
   // Default variant styles
@@ -25,6 +27,7 @@ $tagCls: 'triones-antm-tag';
       background: #666;
       color: #fff;
     }
+
     &.#{$tagCls}-outline {
       color: #666;
       border: 1px solid #666;
@@ -32,15 +35,16 @@ $tagCls: 'triones-antm-tag';
     }
   }
 
-  // Primary variant styles
-  &-primary {
+  // processing variant styles
+  &-processing {
     &.#{$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 +52,13 @@ $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,26 +66,45 @@ $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;
     }
   }
 
   // Danger variant styles
-  &-danger {
+  &-error {
     &.#{$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;
     }
   }
+
+  &-icon {
+    margin-inline-end: 4Px;
+
+    .triones-antm-icon {
+      font-size: 10Px;
+    }
+  }
+
+  &-close {
+    margin-inline-start: 4Px;
+    display: flex;
+
+    .triones-antm-icon {
+      font-size: 10Px;
+    }
+  }
 }

package/dist/Tag/tag.d.ts

@@ -5,7 +5,7 @@ export type TagProps = {
     /**
      * 标签色
      */
-    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | string;
+    color?: 'default' | 'processing' | 'success' | 'warning' | 'error' | string;
     /**
      * 填充模式
      */
@@ -14,6 +14,8 @@ export type TagProps = {
      * 点击时的回调
      */
     onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    closeIcon?: boolean | React.ReactNode | null;
+    icon?: React.ReactNode;
     /**
      * 是否圆角
      */
@@ -26,5 +28,6 @@ export type TagProps = {
      * 自定义样式
      */
     style?: React.CSSProperties;
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
 };
 export declare const Tag: FC<TagProps>;

package/dist/Tag/tag.js

@@ -11,6 +11,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import classNames from 'classnames';
 import React from 'react';
 import "./style.scss";
+import { CloseOutline } from "@trionesdev/antd-mobile-icons-react";
 export var Tag = function Tag(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
@@ -26,7 +27,7 @@ export var Tag = function Tag(_ref) {
   var clsPrefix = 'triones-antm-tag';
 
   // 是否是预设颜色
-  var isPresetColor = ['default', 'primary', 'success', 'warning', 'danger'].includes(color);
+  var isPresetColor = ['default', 'processing', 'success', 'warning', 'error'].includes(color);
   var customStyle = !isPresetColor ? _objectSpread(_objectSpread({}, fill === 'solid' ? {
     backgroundColor: color,
     color: '#fff'
@@ -40,5 +41,10 @@ export var Tag = function Tag(_ref) {
     style: customStyle
   }, props, {
     onClick: onClick
-  }), children);
+  }), props.icon && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(clsPrefix, "-icon")
+  }, props.icon), children, props.closeIcon && /*#__PURE__*/React.createElement("div", {
+    onClick: props.onClose,
+    className: "".concat(clsPrefix, "-close")
+  }, /*#__PURE__*/React.isValidElement(props.closeIcon) ? props.closeIcon : /*#__PURE__*/React.createElement(CloseOutline, null), " "));
 };

package/dist/index.d.ts

@@ -1,6 +1,4 @@
 import './style';
-export { default as ActionSheet } from "./ActionSheet";
-export type { ActionSheetProps } from './ActionSheet';
 export { default as Alert } from './Alert';
 export type { AlertProps } from './Alert';
 export { default as Avatar } from './Avatar';
@@ -9,8 +7,6 @@ export { default as Badge } from './Badge';
 export type { BadgeFill, BadgeProps } from './Badge';
 export { default as Card } from './Card';
 export type { CardProps } from './Card';
-export { default as CascaderPicker } from './CascaderPicker';
-export type { CascaderPickerProps } from './CascaderPicker';
 export { default as CascaderView } from './CascaderView';
 export type { CascaderViewProps } from './CascaderView';
 export { default as Cell } from './Cell';
@@ -31,28 +27,25 @@ export { default as ErrorBlock, createErrorBlock } from './ErrorBlock';
 export type { ErrorBlockStatus, ErrorBlockProps } from './ErrorBlock';
 export { default as Footer } from './Footer';
 export type { FooterProps, ChipItem, LinkItem } from './Footer';
-export { default as Form } from './Form';
-export type { FormItemProps, FormProps } from './Form';
+export { default as Form, useFormContext, Field } from './Form';
+export type { FormInstance } from "./Form/interface";
+export type { FormProps, FormLayout, FormHorizontalAlign, FormItemVerticalAlign, FormItemLayout } from './Form';
+export { default as FormCell } from "./FormCell";
+export type { FormCellProps } from "./FormCell";
 export { default as Grid } from './Grid';
 export type { GridProps, GridItemProps } from './Grid';
-export { default as Input } from './Input';
-export type { InputOPTProps, InputPasswordProps, InputProps, InputTextareaProps } from './Input';
+export { default as IndexedStack } from './IndexedStack';
+export type { IndexedStackProps } from './IndexedStack';
 export { default as InputNumber } from './InputNumber';
 export type { InputNumberProps } from './InputNumber';
-export { default as Mask } from "./Mask";
-export type { MaskProps } from "./Mask";
 export { default as NavBar } from './NavBar';
 export type { NavBarProps } from './NavBar';
 export { default as NoticeBar } from './NoticeBar';
 export type { NoticeBarProps } from './NoticeBar';
 export { default as PageIndicator } from './PageIndicator';
 export type { PageIndicatorProps } from './PageIndicator';
-export { default as Picker } from './Picker';
-export type { PickerProps } from './Picker';
-export { default as PickerView } from './PickerView';
-export type { PickerViewProps, PickerColumnOption } from './PickerView';
-export { default as Popup } from './Popup';
-export type { PopupProps } from './Popup';
+export { default as Progress } from './Progress';
+export type { ProgressProps } from './Progress';
 export { default as Radio } from './Radio';
 export type { RadioGroupProps, RadioProps } from './Radio';
 export { default as Rate } from './Rate';
@@ -63,14 +56,16 @@ export { default as SafeArea } from './SafeArea';
 export type { SafeAreaProps } from './SafeArea';
 export { default as Scaffold } from './Scaffold';
 export type { ScaffoldProps } from './Scaffold';
-export { default as ScrollView } from './ScrollView';
-export type { ScrollViewProps } from './ScrollView';
-export { default as SideBar } from './SideBar';
-export type { SideBarProps } from './SideBar';
+export { Segmented } from './Segmented';
+export type { SegmentedProps } from './Segmented';
+export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonAvatarProps, SkeletonTitleProps, SkeletonParagraphProps, SkeletonInputProps, SkeletonButtonProps, SkeletonBlockType, SkeletonAvatarShape, SkeletonAvatarSize, SkeletonButtonShape, } from './Skeleton';
 export { default as Space } from './Space';
 export type { SpaceProps } from './Space';
-export { default as SpinLoading } from './SpinLoading';
-export type { SpinLoadingProps } from './SpinLoading';
+export { DotLoading, SpinLoading } from './Loading';
+export type { DotLoadingProps, SpinLoadingProps } from './Loading';
+export { default as Stepper } from './Stepper';
+export type { StepperProps } from './Stepper';
 export { default as Steps } from './Steps';
 export type { StepsProps, StepsItemProps } from './Steps';
 export { default as Switch } from './Switch';
@@ -79,12 +74,8 @@ export { default as TabBar } from './TabBar';
 export type { TabBarProps } from './TabBar';
 export { default as Tag } from './Tag';
 export type { TagProps } from './Tag';
-export { default as Toast } from './Toast';
-export type { ToastProps } from './Toast';
 export { default as Tabs } from './Tabs';
 export type { TabsProps } from './Tabs';
-export { default as VerificationCodeInput } from './VerificationCodeInput';
-export type { ValidationCodeInputProps } from './VerificationCodeInput';
 export { default as WaterMark } from './WaterMark';
 export type { WaterMarkProps } from './WaterMark';
 export * from './types';

package/dist/index.js

@@ -1,10 +1,8 @@
 import "./style";
-export { default as ActionSheet } from "./ActionSheet";
 export { default as Alert } from "./Alert";
 export { default as Avatar } from "./Avatar";
 export { default as Badge } from "./Badge";
 export { default as Card } from "./Card";
-export { default as CascaderPicker } from "./CascaderPicker";
 export { default as CascaderView } from "./CascaderView";
 export { default as Cell } from "./Cell";
 export { default as Checkbox } from "./Checkbox";
@@ -15,32 +13,29 @@ export { default as Ellipsis } from "./Ellipsis";
 export { default as Empty } from "./Empty";
 export { default as ErrorBlock, createErrorBlock } from "./ErrorBlock";
 export { default as Footer } from "./Footer";
-export { default as Form } from "./Form";
+export { default as Form, useFormContext, Field } from "./Form";
+export { default as FormCell } from "./FormCell";
 export { default as Grid } from "./Grid";
-export { default as Input } from "./Input";
+export { default as IndexedStack } from "./IndexedStack";
 export { default as InputNumber } from "./InputNumber";
-export { default as Mask } from "./Mask";
 export { default as NavBar } from "./NavBar";
 export { default as NoticeBar } from "./NoticeBar";
 export { default as PageIndicator } from "./PageIndicator";
-export { default as Picker } from "./Picker";
-export { default as PickerView } from "./PickerView";
-export { default as Popup } from "./Popup";
+export { default as Progress } from "./Progress";
 export { default as Radio } from "./Radio";
 export { default as Rate } from "./Rate";
 export { default as Result } from "./Result";
 export { default as SafeArea } from "./SafeArea";
 export { default as Scaffold } from "./Scaffold";
-export { default as ScrollView } from "./ScrollView";
-export { default as SideBar } from "./SideBar";
+export { Segmented } from "./Segmented";
+export { default as Skeleton } from "./Skeleton";
 export { default as Space } from "./Space";
-export { default as SpinLoading } from "./SpinLoading";
+export { DotLoading, SpinLoading } from "./Loading";
+export { default as Stepper } from "./Stepper";
 export { default as Steps } from "./Steps";
 export { default as Switch } from "./Switch";
 export { default as TabBar } from "./TabBar";
 export { default as Tag } from "./Tag";
-export { default as Toast } from "./Toast";
 export { default as Tabs } from "./Tabs";
-export { default as VerificationCodeInput } from "./VerificationCodeInput";
 export { default as WaterMark } from "./WaterMark";
 export * from "./types";

package/dist/style/css-variable.scss

@@ -0,0 +1,6 @@
+:root,page {
+  //--triones-blue: #1677FF;
+  //--trioens-color-primary: #1677FF;
+
+  --triones-safe-area-multiple:1;
+}

package/dist/style/style.scss

@@ -1,5 +1,5 @@
-@use './theme-default.scss' as *;
-@use './theme-dark.scss' as *;
+@use './theme-default.scss' as default;
+@use './theme-dark.scss' as dark;
 
 :root {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);