@trionesdev/antd-mobile-base-react 0.0.2-beta.0 → 0.0.2-beta.10

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

@@ -1,69 +1,69 @@
-@import "../style/variable";
-
-$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,12 +1,15 @@
 import React from 'react';
 import './style.scss';
+import { SizeType } from '../types';
 export type AvatarProps = {
     alt?: string;
     icon?: React.ReactNode;
     shape?: 'circle' | 'square';
-    size?: number;
+    size?: SizeType | number;
     src?: string | React.ReactNode;
     srcSet?: string;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    className?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;
 };

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,19 +13,32 @@ 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,
+    onClick = _ref.onClick,
+    className = _ref.className,
     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)),
+    className: classNames(clsPrefix, _defineProperty({}, "".concat(clsPrefix, "-").concat(shape !== 'square' ? 'circle' : 'square'), true), className),
     style: _objectSpread({
-      width: size,
-      height: size,
+      width: avatarSize,
+      height: avatarSize,
       backgroundColor: src ? undefined : '#ccc'
-    }, style)
+    }, style),
+    onClick: onClick
   }, src ? typeof src === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: src,
     srcSet: srcSet,

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/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%);
+  }
+}

package/dist/Card/style.scss

@@ -1,35 +1,35 @@
-@import "../style/variable";
-$class-prefix-card: 'triones-antm-card';
-
-.#{$class-prefix-card} {
-  background: $trionesColorBgBase;
-  border-radius: $trionesBorderRadius;
-  //padding: $trionesPadding $trionesPadding;
-  &-header {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 8Px;
-    box-sizing: border-box;
-    padding: $trionesPaddingXs $trionesPaddingXs;
-    &:not(:last-child) {
-      border-bottom: solid 0.5Px $trionesBorderColor;
-    }
-    &-title {
-      font-size: $trionesFontSize;
-      line-height: 1.4;
-      font-weight: 500;
-    }
-  }
-  &-body {
-    padding: $trionesPaddingXs $trionesPaddingXs;
-  }
-  &-footer {
-    padding: $trionesPaddingXs $trionesPaddingXs;
-  }
-  &-footer {
-    border-top: solid 0.5Px $trionesBorderColor;
-    padding: $trionesPaddingXs $trionesPaddingXs;
-  }
-}
+@use "../style/variable" as variable;
+$class-prefix-card: 'triones-antm-card';
+
+.#{$class-prefix-card} {
+  background: variable.$trionesColorBgBase;
+  border-radius: variable.$trionesBorderRadius;
+  //padding: variable.$trionesPadding variable.$trionesPadding;
+  &-header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8Px;
+    box-sizing: border-box;
+    padding: variable.$trionesPaddingXs variable.$trionesPaddingXs;
+    &:not(:last-child) {
+      border-bottom: solid 0.5Px variable.$trionesBorderColor;
+    }
+    &-title {
+      font-size: variable.$trionesFontSize;
+      line-height: 1.4;
+      font-weight: 500;
+    }
+  }
+  &-body {
+    padding: variable.$trionesPaddingXs variable.$trionesPaddingXs;
+  }
+  &-footer {
+    padding: variable.$trionesPaddingXs variable.$trionesPaddingXs;
+  }
+  &-footer {
+    border-top: solid 0.5Px variable.$trionesBorderColor;
+    padding: variable.$trionesPaddingXs variable.$trionesPaddingXs;
+  }
+}

package/dist/CascaderView/cascader-view.js

@@ -9,7 +9,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
-import { find, isArray, isEmpty, isEqual } from 'lodash';
+import { find, isArray, isEmpty, isEqual } from 'lodash-es';
 import React, { memo, useEffect, useState } from 'react';
 import Tabs from "../Tabs";
 import { CascaderColumn } from "./cascader-column";

package/dist/CascaderView/style.scss

@@ -1,22 +1,22 @@
-@import "../style/variable";
-
-$cascaderViewCls: 'triones-antm-cascader-view';
-.#{$cascaderViewCls} {
-  &-column {
-    height: 100%;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    &-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 34Px;
-      cursor: default;
-      padding: 0Px 8Px;
-
-      &-selected {
-        color: $trionesColorPrimary;
-      }
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$cascaderViewCls: 'triones-antm-cascader-view';
+.#{$cascaderViewCls} {
+  &-column {
+    height: 100%;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 34Px;
+      cursor: default;
+      padding: 0Px 8Px;
+
+      &-selected {
+        color: variable.$trionesColorPrimary;
+      }
+    }
+  }
+}