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

package/dist/TabBar/index.scss

@@ -1,36 +1,37 @@
-@use "../style/variable" as *;
-
-$trionesTabBarActiveColor: $trionesColorPrimary !default;
-
-$tabBarCls: 'triones-tab-bar';
-.#{$tabBarCls} {
-  box-sizing: border-box;
-  padding-top: 4Px;
-  &-wrap {
-    display: flex;
-    background-color: #ffffff;
-    width: 100%;
-    justify-content: space-around;
-  }
-
-  &-item {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: 4Px;
-    cursor: default;
-    flex: 1 auto;
-
-    &-active {
-      color: $trionesTabBarActiveColor;
-    }
-
-    &-icon {
-      flex-grow: 1;
-    }
-
-    &-label {
-      font-size: 12Px;
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$trionesTabBarActiveColor: variable.$trionesColorPrimary !default;
+
+$tabBarCls: 'triones-tab-bar';
+.#{$tabBarCls} {
+  box-sizing: border-box;
+  padding-top: 4Px;
+  &-wrap {
+    display: flex;
+    background-color: #ffffff;
+    width: 100%;
+    justify-content: space-around;
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 4Px;
+    cursor: default;
+    flex: 1 auto;
+    padding: 4Px;
+
+    &-active {
+      color: $trionesTabBarActiveColor;
+    }
+
+    &-icon {
+      flex-grow: 1;
+    }
+
+    &-label {
+      font-size: 12Px;
+    }
+  }
+}

package/dist/Tabs/style.scss

@@ -1,108 +1,108 @@
-@use "../style/variable" as *;
-$tabsCls: 'triones-antm-tabs';
-
-.#{$tabsCls} {
-  display: flex;
-  flex-direction: column;
-  &-nav {
-    position: relative;
-    display: flex;
-    flex: none;
-    align-items: center;
-
-    &::before {
-      bottom: 0;
-      position: absolute;
-      right: 0;
-      left: 0;
-      border-bottom: 1Px solid #f0f0f0;
-      content: ' ';
-    }
-
-    &-wrap {
-      //position: relative;
-      //display: flex;
-      //flex: auto;
-      //align-self: stretch;
-      //overflow: hidden;
-      //white-space: nowrap;
-      //transform: translate(0);
-      width: 100%;
-    }
-
-    &-list {
-      position: relative;
-      display: flex;
-      flex: auto;
-      overflow-y: auto;
-      scrollbar-width: none;
-    }
-  }
-
-  &-ink-bar {
-    position: absolute;
-    bottom: 0;
-    background-color: $trionesColorPrimary;
-    height: 2px;
-    //width: 100px;
-    &-animated {
-
-    }
-  }
-
-  &-tab {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10Px 10Px;
-    font-size: 14Px;
-    background: transparent;
-    border: 0;
-    outline: none;
-    cursor: pointer;
-    color: rgba(0, 0, 0, 0.88);
-    white-space: nowrap;
-
-    &-stretch {
-      flex: auto;
-    }
-
-    &-active {
-      color: $trionesColorPrimary;
-      &::after{
-        content: ' ';
-        position: absolute;
-        bottom: 0;
-        width: calc(100% - 0.24rem * 2);
-        height: 0.04rem;
-        overflow: hidden;
-        font-size: 0;
-        border-radius: 50vh;
-        box-sizing: border-box;
-        background-color: $trionesColorPrimary;
-      }
-    }
-
-  }
-
-  &-content-holder {
-    flex: auto;
-    overflow: hidden;
-    .#{$tabsCls} {
-      &-content {
-        height: 100%;
-      }
-    }
-  }
-
-  &-tab-pane {
-    height: 100%;
-    display: none;
-
-    &-active {
-      display: block;
-    }
-  }
-}
-
+@use "../style/variable" as variable;
+$tabsCls: 'triones-antm-tabs';
+
+.#{$tabsCls} {
+  display: flex;
+  flex-direction: column;
+  &-nav {
+    position: relative;
+    display: flex;
+    flex: none;
+    align-items: center;
+
+    &::before {
+      bottom: 0;
+      position: absolute;
+      right: 0;
+      left: 0;
+      border-bottom: 1Px solid #f0f0f0;
+      content: ' ';
+    }
+
+    &-wrap {
+      //position: relative;
+      //display: flex;
+      //flex: auto;
+      //align-self: stretch;
+      //overflow: hidden;
+      //white-space: nowrap;
+      //transform: translate(0);
+      width: 100%;
+    }
+
+    &-list {
+      position: relative;
+      display: flex;
+      flex: auto;
+      overflow-y: auto;
+      scrollbar-width: none;
+    }
+  }
+
+  &-ink-bar {
+    position: absolute;
+    bottom: 0;
+    background-color: variable.$trionesColorPrimary;
+    height: 2px;
+    //width: 100px;
+    &-animated {
+
+    }
+  }
+
+  &-tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10Px 10Px;
+    font-size: 14Px;
+    background: transparent;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.88);
+    white-space: nowrap;
+
+    &-stretch {
+      flex: auto;
+    }
+
+    &-active {
+      color: variable.$trionesColorPrimary;
+      &::after{
+        content: ' ';
+        position: absolute;
+        bottom: 0;
+        width: calc(100% - 0.24rem * 2);
+        height: 2Px;
+        overflow: hidden;
+        font-size: 0;
+        border-radius: 50vh;
+        box-sizing: border-box;
+        background-color: variable.$trionesColorPrimary;
+      }
+    }
+
+  }
+
+  &-content-holder {
+    flex: auto;
+    overflow: hidden;
+    .#{$tabsCls} {
+      &-content {
+        height: 100%;
+      }
+    }
+  }
+
+  &-tab-pane {
+    height: 100%;
+    display: none;
+
+    &-active {
+      display: block;
+    }
+  }
+}
+

package/dist/Tag/style.scss

@@ -1,86 +1,110 @@
-@use "../style/variable" as *;
-$tagCls: 'triones-antm-tag';
-
-.#{$tagCls} {
-  display: inline-block;
-  align-items: center;
-  padding: 2Px 8Px;
-  font-size: 11Px;
-  line-height: 1.2;
-  border-radius: $trionesBorderRadius;
-  box-sizing: border-box;
-  white-space: nowrap;
-
-  &-square {
-    border-radius: 0;
-  }
-
-  &-round {
-    border-radius: 12px;
-  }
-
-  // Default variant styles
-  &-default {
-    &.#{$tagCls}-solid {
-      background: #666;
-      color: #fff;
-    }
-    &.#{$tagCls}-outline {
-      color: #666;
-      border: 1px solid #666;
-      background: transparent;
-    }
-  }
-
-  // Primary variant styles
-  &-primary {
-    &.#{$tagCls}-solid {
-      background: $trionesColorPrimary;
-      color: #fff;
-    }
-    &.#{$tagCls}-outline {
-      color: $trionesColorPrimary;
-      border: 1px solid $trionesColorPrimary;
-      background: transparent;
-    }
-  }
-
-  // Success variant styles
-  &-success {
-    &.#{$tagCls}-solid {
-      background: $trionesColorSuccess;
-      color: #fff;
-    }
-    &.#{$tagCls}-outline {
-      color: $trionesColorSuccess;
-      border: 1px solid $trionesColorSuccess;
-      background: transparent;
-    }
-  }
-
-  // Warning variant styles
-  &-warning {
-    &.#{$tagCls}-solid {
-      background: $trionesColorWarning;
-      color: #fff;
-    }
-    &.#{$tagCls}-outline {
-      color: $trionesColorWarning;
-      border: 1px solid $trionesColorWarning;
-      background: transparent;
-    }
-  }
-
-  // Danger variant styles
-  &-danger {
-    &.#{$tagCls}-solid {
-      background: $trionesColorError;
-      color: #fff;
-    }
-    &.#{$tagCls}-outline {
-      color: $trionesColorError;
-      border: 1px solid $trionesColorError;
-      background: transparent;
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$tagCls: 'triones-antm-tag';
+
+.#{$tagCls} {
+  display: inline-flex;
+  align-items: center;
+  padding: 2Px 8Px;
+  font-size: variable.$trionesFontSizeSm;
+  line-height: 1;
+  border-radius: variable.$trionesBorderRadiusXs;
+  box-sizing: border-box;
+  white-space: nowrap;
+
+  &-square {
+    border-radius: 0;
+  }
+
+  &-round {
+    padding: 2Px 8Px;
+    border-radius: 12Px;
+  }
+
+  // Default variant styles
+  &-default {
+    &.#{$tagCls}-solid {
+      background: #666;
+      color: #fff;
+    }
+
+    &.#{$tagCls}-outline {
+      color: #666;
+      border: 1px solid #666;
+      background: transparent;
+    }
+  }
+
+  // processing variant styles
+  &-processing {
+    &.#{$tagCls}-solid {
+      background: variable.$trionesColorPrimary;
+      color: #fff;
+    }
+
+    &.#{$tagCls}-outline {
+      color: variable.$trionesColorPrimary;
+      border: 1px solid variable.$trionesColorPrimary;
+      background: transparent;
+    }
+  }
+
+  // Success variant styles
+  &-success {
+    &.#{$tagCls}-solid {
+      background: variable.$trionesColorSuccess;
+      color: #fff;
+    }
+
+    &.#{$tagCls}-outline {
+      color: variable.$trionesColorSuccess;
+      border: 1px solid variable.$trionesColorSuccess;
+      background: transparent;
+    }
+  }
+
+  // Warning variant styles
+  &-warning {
+    &.#{$tagCls}-solid {
+      background: variable.$trionesColorWarning;
+      color: #fff;
+    }
+
+    &.#{$tagCls}-outline {
+      color: variable.$trionesColorWarning;
+      border: 1px solid variable.$trionesColorWarning;
+      background: transparent;
+    }
+  }
+
+  // Danger variant styles
+  &-error {
+    &.#{$tagCls}-solid {
+      background: variable.$trionesColorError;
+      color: #fff;
+    }
+
+    &.#{$tagCls}-outline {
+      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/WaterMark/style.scss

@@ -1,17 +1,17 @@
-$class-prefix-water-mark: 'triones-antm-water-mark';
-/* prettier-ignore */
-.#{$class-prefix-water-mark} {
-  --z-index: var(--triones-antm-water-mark-z-index, 2000);
-
-  position: absolute;
-  z-index: var(--z-index);
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-  background-repeat: repeat;
-  &-full-page {
-    position: fixed;
-  }
-}
+$class-prefix-water-mark: 'triones-antm-water-mark';
+/* prettier-ignore */
+.#{$class-prefix-water-mark} {
+  --z-index: var(--triones-antm-water-mark-z-index, 2000);
+
+  position: absolute;
+  z-index: var(--z-index);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background-repeat: repeat;
+  &-full-page {
+    position: fixed;
+  }
+}

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';