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

package/dist/Form/style.scss

@@ -0,0 +1,100 @@
+@use "../style/variable" as variable;
+
+
+$cls-prefix-form-item: 'triones-antm-form-item';
+
+
+.#{$cls-prefix-form-item} {
+  &.h5 {
+    @include variable.h5-line-height;
+  }
+
+  &.wx {
+    @include variable.wx-input-size;
+  }
+
+  &-label {
+    font-size: variable.$trionesFontSize;
+    color: #6F6F6F;
+
+
+    &-wrapper {
+      //display: flex;
+      //align-items: center;
+      height: 100%;
+    }
+
+    &-required-mark {
+      display: inline-block;
+      color: variable.$trionesColorError;
+      width: 8Px;
+      margin-left: -8Px;
+    }
+
+  }
+
+  &-content {
+
+    &-end {
+      text-align: end;
+    }
+
+    .#{$cls-prefix-form-item} {
+      &-error {
+        font-size: variable.$trionesFontSizeSm;
+        color: variable.$trionesColorError;
+        line-height: normal;
+      }
+    }
+  }
+
+  &-horizontal {
+    display: flex;
+
+    .#{$cls-prefix-form-item} {
+      &-label {
+        padding-block: 12Px;
+        flex-shrink: 1;
+        min-width: 0;
+      }
+
+      &-content {
+        padding-block: 12Px;
+        flex: 1;
+        flex-shrink: 1;
+        min-width: 0;
+
+        &-end {
+          text-align: end;
+        }
+      }
+    }
+
+    &.#{$cls-prefix-form-item} {
+      &-start {
+        align-items: flex-start;
+      }
+
+      &-center {
+        //align-items: center;
+      }
+    }
+  }
+
+  &-vertical {
+    .#{$cls-prefix-form-item} {
+      &-label {
+        margin-bottom: 4Px;
+      }
+
+      &-content {
+        padding-block-end: 8Px;
+      }
+    }
+
+  }
+
+  &-hidden {
+    display: none;
+  }
+}

package/dist/FormCell/index.d.ts

@@ -0,0 +1,3 @@
+import { FormCell, FormCellProps } from '@trionesdev/antd-mobile-base-react';
+export type { FormCellProps };
+export default FormCell;

package/dist/FormCell/index.js

@@ -0,0 +1,2 @@
+import { FormCell } from '@trionesdev/antd-mobile-base-react';
+export default FormCell;

package/dist/ImagesPreview/ImagesPreview.js

@@ -5,11 +5,11 @@ 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 React, { useEffect } from "react";
-import Mask from "../Mask";
 import classNames from "classnames";
 import "./style.scss";
 import Swiper from "../Swiper";
 import Image from "../Image";
+import Overlay from "../Overlay";
 var cls = 'triones-antm-image-preview';
 export var ImagesPreview = function ImagesPreview(_ref) {
   var className = _ref.className,
@@ -46,7 +46,7 @@ export var ImagesPreview = function ImagesPreview(_ref) {
     }
     setInnerActiveIndex(activeIndex);
   }, [activeIndex]);
-  return /*#__PURE__*/React.createElement(Mask, {
+  return /*#__PURE__*/React.createElement(Overlay, {
     open: innerOpen
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(cls, className),
@@ -62,8 +62,9 @@ export var ImagesPreview = function ImagesPreview(_ref) {
       width: '100%',
       height: '100%'
     }
-  }, items === null || items === void 0 ? void 0 : items.map(function (item) {
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Swiper.Item, {
+      key: index,
       style: {
         width: '100%',
         height: '100%',

package/dist/ImagesPreview/style.scss

@@ -1,34 +1,34 @@
-$imagePreviewCls: 'triones-antm-image-preview';
-
-.#{$imagePreviewCls} {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background-color: rgba(0, 0, 0, 0.8);
-
-  &-head {
-    position: fixed;
-    top: 50Px;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: white;
-    font-size: 14Px;
-    z-index: 1000;
-  }
-
-  &-content {
-    height: 100%;
-    width: 100%;
-    :global{
-      .triones-antm-image-img{
-        height: auto!important;
-      }
-    }
-  }
-
-  &-foot {
-  }
-}
+$imagePreviewCls: 'triones-antm-image-preview';
+
+.#{$imagePreviewCls} {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.8);
+
+  &-head {
+    position: fixed;
+    top: 50Px;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: 14Px;
+    z-index: 1000;
+  }
+
+  &-content {
+    height: 100%;
+    width: 100%;
+    :global{
+      .triones-antm-image-img{
+        height: auto!important;
+      }
+    }
+  }
+
+  &-foot {
+  }
+}

package/dist/ImagesWall/ImagesWall.js

@@ -82,7 +82,7 @@ export var ImagesWall = function ImagesWall(_ref2) {
     }
     setImages(newImages || []);
   }, [value]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImagesPreview, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, preview && /*#__PURE__*/React.createElement(ImagesPreview, {
     open: imagePreviewOpen,
     afterOpenChange: setImagePreviewOpen,
     items: images.map(function (item) {

package/dist/ImagesWall/style.scss

@@ -1,70 +1,70 @@
-@use "../style/variable" as variable;
-
-$imagesWallCls: 'triones-antm-images-wall';
-
-.#{$imagesWallCls} {
-  display: grid;
-  grid-gap: 4PX;
-  width: 100%;
-
-  &-item {
-    aspect-ratio: 1;
-    border-radius: variable.$trionesBorderRadius;
-    overflow: hidden;
-    position: relative;
-
-    &-inner {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-close {
-      position: absolute;
-      top: 0;
-      right: 0;
-      background-color: rgb(0 0 0 / 63%);
-      width: 20Px;
-      height: 20Px;
-      border-bottom-left-radius: variable.$trionesBorderRadius;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .triones-antm-icon {
-        color: white;
-        font-size: 12Px;
-      }
-    }
-
-    &-input {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      margin: 0;
-      padding: 0;
-      z-index: 1;
-      opacity: 0;
-    }
-
-    &-image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  &-upload {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: variable.$trionesColorBgTextActive;
-  }
-
-  &-action-sheet {
-
-  }
-}
-
-
+@use "../style/variable" as variable;
+
+$imagesWallCls: 'triones-antm-images-wall';
+
+.#{$imagesWallCls} {
+  display: grid;
+  grid-gap: 4PX;
+  width: 100%;
+
+  &-item {
+    aspect-ratio: 1;
+    border-radius: variable.$trionesBorderRadius;
+    overflow: hidden;
+    position: relative;
+
+    &-inner {
+      width: 100%;
+      height: 100%;
+    }
+
+    &-close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background-color: rgb(0 0 0 / 63%);
+      width: 20Px;
+      height: 20Px;
+      border-bottom-left-radius: variable.$trionesBorderRadius;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .triones-antm-icon {
+        color: white;
+        font-size: 12Px;
+      }
+    }
+
+    &-input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      margin: 0;
+      padding: 0;
+      z-index: 1;
+      opacity: 0;
+    }
+
+    &-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &-upload {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: variable.$trionesColorBgTextActive;
+  }
+
+  &-action-sheet {
+
+  }
+}
+
+

package/dist/Input/index.d.ts

@@ -1,3 +1,18 @@
-import { Input, InputProps, InputOPTProps, InputPasswordProps, InputTextareaProps } from "@trionesdev/antd-mobile-base-react";
-export type { InputOPTProps, InputPasswordProps, InputProps, InputTextareaProps, };
+import { Input as InternalInput } from "./input";
+import { InputDigit, InputDigitProps } from "./input-digit";
+import { InputNumber, InputNumberProps } from "./input-number";
+import { InputPassword, InputPasswordProps } from "./input-password";
+import { Textarea, InputTextareaProps } from "./textarea";
+import "./index.scss";
+import { InputOPT, InputOPTProps } from "./input-opt";
+import { InputProps } from "./types";
+type CompoundedComponent = typeof InternalInput & {
+    Password: typeof InputPassword;
+    OPT: typeof InputOPT;
+    Digit: typeof InputDigit;
+    Number: typeof InputNumber;
+    Textarea: typeof Textarea;
+};
+declare const Input: CompoundedComponent;
+export type { InputOPTProps, InputPasswordProps, InputProps, InputTextareaProps, InputDigitProps, InputNumberProps };
 export default Input;

package/dist/Input/index.js

@@ -1,2 +1,14 @@
-import { Input } from "@trionesdev/antd-mobile-base-react";
+import { Input as InternalInput } from "./input";
+import { InputDigit } from "./input-digit";
+import { InputNumber } from "./input-number";
+import { InputPassword } from "./input-password";
+import { Textarea } from "./textarea";
+import "./index.scss";
+import { InputOPT } from "./input-opt";
+var Input = InternalInput;
+Input.Password = InputPassword;
+Input.OPT = InputOPT;
+Input.Digit = InputDigit;
+Input.Number = InputNumber;
+Input.Textarea = Textarea;
 export default Input;

package/dist/Input/index.scss

@@ -0,0 +1,282 @@
+@use "../style/variable" as variable;
+
+$inputCls: 'triones-antm-input';
+$inputAffixWrapperCls: 'triones-antm-input-affix-wrapper';
+$inputGroupWrapperCls: 'triones-antm-input-group-wrapper';
+$inputPotCls: 'triones-antm-pot';
+
+$inputSm: 24Px;
+$inputMd: 32Px;
+$inputLg: 40Px;
+
+$placeholderColor: variable.$trionesColorTextPlaceholder;
+
+input {
+  height: auto;
+  font-size: variable.$trionesInputInputFontSize;
+
+
+  &::placeholder {
+    font-size: variable.$trionesInputInputFontSize;
+    color: $placeholderColor
+  }
+}
+
+wx-input {
+  &::placeholder {
+    font-size: variable.$trionesInputInputFontSize;
+    color: $placeholderColor
+  }
+}
+
+.#{$inputCls} {
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  transition: all .2s;
+  outline: none;
+  box-shadow: none;
+  border: none;
+  border-radius: variable.$trionesBorderRadius;
+  font-size: variable.$trionesInputInputFontSize;
+
+  &-small {
+    padding: variable.$trionesInputPaddingBlockSm 0;
+    font-size: variable.$trionesInputInputFontSizeSm;
+  }
+
+  &-large {
+    padding: variable.$trionesInputPaddingBlockLg 0;
+    font-size: variable.$trionesInputInputFontSizeLg;
+  }
+
+  &::placeholder {
+    font-size: variable.$trionesInputInputFontSize;
+    color: $placeholderColor
+  }
+
+  .weui-input {
+    &::placeholder {
+      font-size: variable.$trionesInputInputFontSize;
+      color: $placeholderColor
+    }
+  }
+}
+
+
+.#{$inputAffixWrapperCls} {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  flex-shrink: 1;
+  //line-height: variable.$trionesLineHeight;
+  //padding: variable.$trionesInputPaddingBlock 0;
+  gap: 4Px;
+
+
+  &-small {
+    padding: variable.$trionesInputPaddingBlockSm 0;
+    font-size: variable.$trionesInputInputFontSizeSm;
+  }
+
+  &-large {
+    padding: variable.$trionesInputPaddingBlockLg 0;
+    font-size: variable.$trionesInputInputFontSizeLg;
+  }
+
+
+
+  .#{$inputCls} {
+    padding: 0;
+    background-color: transparent;
+    height: 100%;
+
+
+    &-prifix {}
+
+    &-suffix {
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      flex-shrink: 0;
+      row-gap: 4Px;
+      // padding-inline: 4Px;
+      line-height: normal;
+
+      .clear-icon {
+        color: rgba(0, 0, 0, 0.25);
+
+
+        &:hover {
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
+
+      .triones-antm-icon {
+        cursor: pointer;
+        padding-inline: 4Px;
+      }
+    }
+  }
+
+  taro-input-core {
+    &::placeholder {
+      font-size: variable.$trionesInputInputFontSize;
+      color: $placeholderColor
+    }
+
+
+    .weui-input {
+      &::placeholder {
+        font-size: variable.$trionesInputInputFontSize;
+        color: $placeholderColor
+      }
+    }
+  }
+
+
+  .triones-antm-icon {
+    font-size: 14Px;
+  }
+
+}
+
+.#{$inputCls} {
+  &-outlined {
+    border-radius: variable.$trionesBorderRadius;
+    border: 1Px solid variable.$trionesBorderColor;
+    padding-block: variable.$trionesInputPaddingBlock;
+    padding-inline: variable.$trionesInputPaddingBlock;
+  }
+
+  &-filled {
+    border-radius: variable.$trionesBorderRadius;
+    background-color: variable.$trionesColorFillTertiary;
+    padding-block: variable.$trionesInputPaddingBlock;
+    padding-inline: variable.$trionesInputPaddingBlock;
+  }
+
+  &-underlined {
+    border-bottom: 1Px solid variable.$trionesBorderColor;
+    padding-block: variable.$trionesInputPaddingBlock;
+  }
+}
+
+.#{$inputGroupWrapperCls} {}
+
+
+.#{$inputPotCls} {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  &-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    column-gap: 8Px;
+  }
+
+  &-input {
+    position: absolute;
+    background-color: transparent;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  &-item {
+    text-align: center;
+    font-size: variable.$trionesInputInputFontSize;
+    height: variable.$trionesControlHeight;
+    width: variable.$trionesControlHeight;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &-sm {
+      width: variable.$trionesControlHeightSm;
+      height: variable.$trionesControlHeightSm;
+    }
+
+    &-lg {
+      width: variable.$trionesControlHeightLg;
+      height: variable.$trionesControlHeightLg;
+    }
+
+    &::placeholder {
+      font-size: variable.$trionesInputInputFontSize;
+      color: $placeholderColor
+    }
+
+    &-focus {
+      &::after {
+        content: ' ';
+        height: 100%;
+        width: 0.5Px;
+        background-color: #0a0a0a;
+        transition: transform 0.1s ease;
+        animation: blink 1s step-end infinite;
+      }
+    }
+
+  }
+
+  .#{$inputCls}-outlined {
+    font-size: variable.$trionesInputInputFontSize;
+    color: rgba(0, 0, 0, 0.88);
+    background: #ffffff;
+    border-width: 1Px;
+    border-style: solid;
+    border-color: #d9d9d9;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+}
+
+
+.#{$inputCls}-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  outline: 0;
+  font-size: variable.$trionesInputInputFontSize;
+
+  taro-textarea-core {
+    width: 100%;
+  }
+  .taro-textarea{
+    background-color: transparent;
+  }
+  textarea {
+    padding-block: 2Px;
+    background-color: transparent;
+    &::placeholder {
+      font-size: variable.$trionesInputInputFontSize;
+      color: $placeholderColor
+    }
+  }
+
+}
+
+@keyframes blink {
+  50% {
+    background-color: transparent;
+  }
+}

package/dist/Input/input-affix-wrapper.d.ts

@@ -0,0 +1,13 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { variantType } from "./types";
+export type InputAffixWrapperProps = {
+    style?: React.CSSProperties;
+    className?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    variant?: variantType;
+    allowClear?: boolean;
+    value?: any;
+    onClear?: () => void;
+};
+export declare const InputAffixWrapper: FC<PropsWithChildren<InputAffixWrapperProps>>;