@trionesdev/antd-mobile-react 0.0.2-beta.15 → 0.0.2-beta.17

package/dist/Form/style.scss

@@ -1,67 +1,106 @@
-@use "../style/variable" as variable;
-$cls-prefix-form: 'triones-antm-form';
-$cls-prefix-form-item: 'triones-antm-form-item';
-
-.#{$cls-prefix-form} {}
-
-.#{$cls-prefix-form-item} {
-
-  &-label {
-    font-size: variable.$trionesFontSize;
-    padding-block: 4Px;
-    color: #6F6F6F;
-
-
-    &-wrapper {
-      // height: 1.47059em;
-      line-height: 1.47059;
-      display: flex;
-      align-items: center;
-    }
-
-    &-left {}
-
-    &-right {
-      text-align: right;
-    }
-
-    &-required-mark {
-      display: inline-block;
-      color: red;
-      margin-right: 4Px;
-    }
-
-  }
-
-  &-input {
-
-    .#{$cls-prefix-form-item} {
-      &-error {
-        font-size: variable.$trionesFontSizeSm;
-        color: red;
-      }
-    }
-  }
-
-  &-horizontal {
-    display: flex;
-    flex-direction: row;
-
-    .#{$cls-prefix-form-item} {
-      &-label {
-        flex-shrink: 1;
-        min-width: 0;
-      }
-
-      &-input {
-        flex: auto 1;
-        flex-shrink: 1;
-        min-width: 0;
-      }
-    }
-  }
-
-  &-hidden {
-    display: none;
-  }
-}
+@use "../style/variable" as variable;
+
+$cls-prefix-form: 'triones-antm-form';
+$cls-prefix-form-item: 'triones-antm-form-item';
+
+.#{$cls-prefix-form} {
+}
+
+.#{$cls-prefix-form-item} {
+  line-height: 1.5;
+
+  &-label {
+    font-size: variable.$trionesFontSize;
+    color: #6F6F6F;
+
+
+    &-wrapper {
+      height: 100%;
+      // height: 1.47059em;
+
+      //display: flex;
+      //align-items: center;
+    }
+    &-required-mark {
+      display: inline-block;
+      color: variable.$trionesColorError;
+      width: 8Px;
+      margin-left: -8Px;
+    }
+    &-left {
+    }
+
+    &-right {
+      text-align: right;
+    }
+
+    //&-required {
+    //  display: inline-block;
+    //  color: red;
+    //  width: 8Px;
+    //  margin-left: -8Px;
+    //}
+
+  }
+
+  &-content {
+    padding-block: 12Px;
+
+    &-right {
+      text-align: right;
+    }
+
+    .#{$cls-prefix-form-item} {
+      &-error {
+        font-size: variable.$trionesFontSizeSm;
+        color: variable.$trionesColorError;
+      }
+    }
+  }
+
+  &-horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+
+    .#{$cls-prefix-form-item} {
+      &-label {
+        padding-block: 12Px;
+        flex-shrink: 1;
+        min-width: 0;
+      }
+
+      &-content {
+        flex: auto 1;
+        flex-shrink: 1;
+        min-width: 0;
+      }
+    }
+
+    &.#{$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: 12Px;
+      }
+    }
+
+  }
+
+  &-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/Grid/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import React from 'react';
 import { DemoBlock } from "../../DemoBlock";

package/dist/Grid/demo/base.scss

@@ -1,7 +1,7 @@
-.grid-demo-item-block {
-  border: solid 1px #999;
-  background: #f5f5f5;
-  text-align: center;
-  color: #999;
-  height: 100%;
-}
+.grid-demo-item-block {
+  border: solid 1px #999;
+  background: #f5f5f5;
+  text-align: center;
+  color: #999;
+  height: 100%;
+}

package/dist/Icon/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import React from "react";
 import * as icons from "../../../../antd-mobile-icons-react";

package/dist/Image/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import { DemoBlock } from "../../DemoBlock";
 import React from 'react';

package/dist/Image/demo/base.scss

@@ -1,4 +1,4 @@
-.imagesContainer {
-  --triones-antm-image-width: 90px;
-  --triones-antm-image-height: 60px;
-}
+.imagesContainer {
+  --triones-antm-image-width: 90px;
+  --triones-antm-image-height: 60px;
+}

package/dist/Image/style.scss

@@ -1,30 +1,30 @@
-$class-prefix-image: 'triones-antm-image';
-
-.#{$class-prefix-image} {
-  overflow: hidden;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  position: relative;
-  &-img {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-  }
-  &-tip {
-    position: relative;
-    background-color: var(--triones-antm-color-fill-content);
-    height: 100%;
-    min-height: 24px;
-    min-width: 24px;
-    > svg {
-      width: 24px;
-      height: 24px;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      color: var(--triones-antm-color-weak);
-    }
-  }
-}
+$class-prefix-image: 'triones-antm-image';
+
+.#{$class-prefix-image} {
+  overflow: hidden;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  &-img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+  &-tip {
+    position: relative;
+    background-color: var(--triones-antm-color-fill-content);
+    height: 100%;
+    min-height: 24px;
+    min-width: 24px;
+    > svg {
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      color: var(--triones-antm-color-weak);
+    }
+  }
+}

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/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/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import { DemoBlock } from "../../DemoBlock";
 import React from 'react';
@@ -20,6 +20,32 @@ export default (function () {
   }, /*#__PURE__*/React.createElement(Input, {
     placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9"
   }))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u7528\u6CD5\uFF08\u5927\u5C0F\uFF09",
+    styles: {
+      body: {
+        backgroundColor: '#D5D5D5'
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: '#FFFFFF'
+    }
+  }, /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical",
+    block: true
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Large Size",
+    size: "large",
+    variant: "outlined"
+  }), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Middle Size",
+    size: "medium",
+    variant: 'outlined'
+  }), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Small Size",
+    size: "small",
+    variant: "outlined"
+  })))), /*#__PURE__*/React.createElement(DemoBlock, {
     title: "\u5E26\u6E05\u9664\u6309\u94AE",
     styles: {
       body: {