@trionesdev/antd-taro-react 0.0.1-beta.3

package/dist/Badge/demo/base.js

@@ -0,0 +1,167 @@
+/**
+ * compact: true
+ */
+
+import React from 'react';
+import "./base.scss";
+import { DemoBlock } from "../../DemoBlock";
+import Badge from "../index";
+import Avatar from "../../Avatar";
+import { UserOutline } from '@trionesdev/antd-taro-icons-react';
+export default (function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u7528\u6CD5"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: 8
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  })), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: 76
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  })), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: "NEW"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  })), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    dot: true,
+    top: "2",
+    right: "4"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  }))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u6700\u5927\u503C"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: 200,
+    max: 9
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  })), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: 200,
+    max: 20
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  })), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: 200,
+    max: 99
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  }))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u72EC\u7ACB\u4F7F\u7528"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: 8
+  }), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: 76
+  }), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: "NEW"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u81EA\u5B9A\u4E49\u80CC\u666F\u8272"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: 8,
+    color: "linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  })), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: 76,
+    color: "linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  })), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: "NEW",
+    color: "linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  })), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    top: "2",
+    right: "4",
+    dot: true,
+    color: "linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  }))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u81EA\u5B9A\u4E49\u4F4D\u7F6E"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    dot: true,
+    top: 4,
+    right: 4
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  })), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: 8,
+    top: 7,
+    right: 7
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  })), /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      marginInlineEnd: '40px'
+    },
+    value: "\u5185\u5BB9",
+    top: 7,
+    right: 10
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    icon: /*#__PURE__*/React.createElement(UserOutline, null),
+    shape: "square"
+  }))));
+});

package/dist/Badge/demo/base.scss

@@ -0,0 +1,6 @@
+.badge-demo {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20Px;
+}

package/dist/Badge/index.d.ts

@@ -0,0 +1,3 @@
+import { Badge } from './badge';
+export type { BadgeFill, BadgeProps } from './badge';
+export default Badge;

package/dist/Badge/index.js

@@ -0,0 +1,2 @@
+import { Badge } from "./badge";
+export default Badge;

package/dist/Badge/style.scss

@@ -0,0 +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%);
+  }
+}

package/dist/Button/button.d.ts

@@ -0,0 +1,53 @@
+import "./style.scss";
+import React, { FC, MouseEventHandler } from "react";
+export type ButtonProps = {
+    children?: React.ReactNode;
+    /**
+     * @description block 按钮宽高自适应
+     */
+    block?: boolean;
+    /**
+     * @description 颜色
+     */
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    /**
+     * @description 是否危险按钮，会使用 danger 的颜色
+     */
+    danger?: boolean;
+    /**
+     * @description 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * @description 幽灵按钮
+     */
+    ghost?: boolean;
+    /**
+     * @description 按钮类型
+     */
+    type?: 'primary' | 'dashed' | 'link' | 'text' | 'default';
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * @description 图标
+     */
+    icon?: React.ReactNode;
+    /**
+     * @description 图标位置
+     */
+    iconPosition?: 'start' | 'end';
+    /**
+     * @description 加载中
+     */
+    loading?: boolean;
+    /**
+     * @description 按钮样式
+     */
+    variant?: 'outlined' | 'dashed' | 'solid' | 'filled' | 'text' | 'link';
+    /**
+     * @description 点击事件
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    [key: string]: any;
+};
+export declare const Button: FC<ButtonProps>;

package/dist/Button/button.js

@@ -0,0 +1,59 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children", "block", "type", "color", "danger", "disabled", "className", "style", "icon", "iconPosition", "loading", "variant", "onClick"];
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import "./style.scss";
+import React from "react";
+import classNames from "classnames";
+export var Button = function Button(_ref) {
+  var children = _ref.children,
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    color = _ref.color,
+    _ref$danger = _ref.danger,
+    danger = _ref$danger === void 0 ? false : _ref$danger,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    style = _ref.style,
+    icon = _ref.icon,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? 'start' : _ref$iconPosition,
+    loading = _ref.loading,
+    variant = _ref.variant,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var clsPrefix = "triones-antm-button";
+  var finalColor = color;
+  var finalVariant = variant;
+  if (type) {
+    if (!color) {
+      if (type === 'primary' || type === 'link') {
+        finalColor = 'primary';
+      } else if (type === 'default') {
+        finalColor = 'default';
+      }
+    }
+    if (!variant) {
+      if (type === 'primary') {
+        finalVariant = 'solid';
+      } else if (type === 'default') {
+        finalVariant = 'outlined';
+      } else if (type === 'dashed' || type === 'link' || type === 'text') {
+        finalVariant = type;
+      }
+    }
+  }
+  if (danger) {
+    finalColor = 'danger';
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: onClick,
+    className: classNames(clsPrefix, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(clsPrefix, "-block"), block), "".concat(clsPrefix, "-type-").concat(type), type), "".concat(clsPrefix, "-color-").concat(finalColor), finalColor), "".concat(clsPrefix, "-variant-").concat(finalVariant), finalVariant)),
+    disabled: disabled
+  }, iconPosition == 'start' && icon, children, iconPosition == 'end' && icon);
+};

package/dist/Button/demo/base.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Button/demo/base.js

@@ -0,0 +1,163 @@
+/**
+ * compact: true
+ */
+import { DemoBlock } from "../../DemoBlock";
+import React from "react";
+import { Button } from "../..";
+export default (function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u6309\u94AE\u7C7B\u578B"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      gap: '8px',
+      rowGap: '8px',
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary"
+  }, "Primary"), /*#__PURE__*/React.createElement(Button, {
+    type: "default"
+  }, "Default"), /*#__PURE__*/React.createElement(Button, {
+    type: "dashed"
+  }, "Dashed"), /*#__PURE__*/React.createElement(Button, {
+    type: "text"
+  }, "Text"), /*#__PURE__*/React.createElement(Button, {
+    type: "link"
+  }, "Link"))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u989C\u8272\u4E0E\u53D8\u4F53"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      gap: '8px',
+      rowGap: '8px',
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      gap: '8px',
+      rowGap: '8px',
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    color: "default",
+    variant: "solid"
+  }, "Solid"), /*#__PURE__*/React.createElement(Button, {
+    color: "default",
+    variant: "outlined"
+  }, "Outlined"), /*#__PURE__*/React.createElement(Button, {
+    color: "default",
+    variant: "dashed"
+  }, "Dashed"), /*#__PURE__*/React.createElement(Button, {
+    color: "default",
+    variant: "filled"
+  }, "Filled"), /*#__PURE__*/React.createElement(Button, {
+    color: "default",
+    variant: "text"
+  }, "Text"), /*#__PURE__*/React.createElement(Button, {
+    color: "default",
+    variant: "link"
+  }, "Link")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      gap: '8px',
+      rowGap: '8px',
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    variant: "solid"
+  }, "Solid"), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    variant: "outlined"
+  }, "Outlined"), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    variant: "dashed"
+  }, "Dashed"), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    variant: "filled"
+  }, "Filled"), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    variant: "text"
+  }, "Text"), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    variant: "link"
+  }, "Link")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      gap: '8px',
+      rowGap: '8px',
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    color: "danger",
+    variant: "solid"
+  }, "Solid"), /*#__PURE__*/React.createElement(Button, {
+    color: "danger",
+    variant: "outlined"
+  }, "Outlined"), /*#__PURE__*/React.createElement(Button, {
+    color: "danger",
+    variant: "dashed"
+  }, "Dashed"), /*#__PURE__*/React.createElement(Button, {
+    color: "danger",
+    variant: "filled"
+  }, "Filled"), /*#__PURE__*/React.createElement(Button, {
+    color: "danger",
+    variant: "text"
+  }, "Text"), /*#__PURE__*/React.createElement(Button, {
+    color: "danger",
+    variant: "link"
+  }, "Link")))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u5757\u7EA7\u6309\u94AE"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      gap: '8px',
+      rowGap: '8px',
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    block: true,
+    type: "primary"
+  }, "\u6309\u94AE"), /*#__PURE__*/React.createElement(Button, {
+    block: true,
+    color: "primary"
+  }, "\u6309\u94AE"))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u7981\u7528"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      gap: '8px',
+      rowGap: '8px',
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    disabled: true
+  }, "\u4E3B\u8981\u6309\u94AE"), /*#__PURE__*/React.createElement(Button, {
+    type: "default",
+    disabled: true
+  }, "\u6B21\u8981\u6309\u94AE"), /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    disabled: true
+  }, "\u6587\u672C\u6309\u94AE"))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u5371\u9669"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      gap: '8px',
+      rowGap: '8px',
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    danger: true
+  }, "\u4E3B\u8981\u6309\u94AE"), /*#__PURE__*/React.createElement(Button, {
+    type: "default",
+    danger: true
+  }, "\u6B21\u8981\u6309\u94AE"), /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    danger: true
+  }, "\u6587\u672C\u6309\u94AE"))));
+});

package/dist/Button/index.d.ts

@@ -0,0 +1,3 @@
+import { Button, ButtonProps } from "./button";
+export type { ButtonProps };
+export default Button;

package/dist/Button/index.js

@@ -0,0 +1,2 @@
+import { Button } from "./button";
+export default Button;