@trionesdev/antd-mobile-base-react 0.0.2-beta.18 → 0.0.2-beta.19

package/dist/Grid/style.scss

@@ -1,17 +1,17 @@
-$class-prefix-grid: 'triones-antm-grid';
-/* prettier-ignore */
-.#{$class-prefix-grid} {
-  --gap: 0;
-  --gap-horizontal: var(--gap);
-  --gap-vertical: var(--gap);
-
-  display: grid;
-  grid-gap: 10PX;
-  column-gap: var(--gap-horizontal);
-  row-gap: var(--gap-vertical);
-  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
-  align-items: stretch;
-  &-item {
-    grid-column-end: span var(--item-span);
-  }
-}
+$class-prefix-grid: 'triones-antm-grid';
+/* prettier-ignore */
+.#{$class-prefix-grid} {
+  --gap: 0;
+  --gap-horizontal: var(--gap);
+  --gap-vertical: var(--gap);
+
+  display: grid;
+  grid-gap: 10PX;
+  column-gap: var(--gap-horizontal);
+  row-gap: var(--gap-vertical);
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  align-items: stretch;
+  &-item {
+    grid-column-end: span var(--item-span);
+  }
+}

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

@@ -1,100 +1,100 @@
-@use "../style/variable" as variable;
-
-$trionesInputNumberCls: 'triones-antm-input-number';
-
-$inputNumberBg: #F5F5F5;
-$inputSm: 24Px;
-$inputLg: 40Px;
-$inputNumberControlHeight: 28Px;
-
-.#{$trionesInputNumberCls} {
-  display: inline-flex;
-  align-items: stretch;
-  gap: 2Px;
-  border-radius: variable.$trionesBorderRadiusXs;
-  overflow: hidden;
-
-  &--block {
-    display: flex;
-    width: 100%;
-
-    .#{$trionesInputNumberCls}-input {
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-  }
-
-  &-input {
-    display: flex;
-    align-items: stretch;
-    flex: 0 1 auto;
-    min-width: 36Px;
-    min-height: $inputNumberControlHeight;
-
-    input {
-      width: 100%;
-      min-width: 0;
-      height: 100%;
-      min-height: $inputNumberControlHeight;
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0 8Px;
-      border: 0;
-      border-radius: variable.$trionesBorderRadiusXs;
-      background-color: $inputNumberBg;
-      color: variable.$trionesColorText;
-      font-size: 14Px;
-      line-height: $inputNumberControlHeight;
-      text-align: center;
-      -moz-appearance: textfield;
-      appearance: textfield;
-
-      &::-webkit-outer-spin-button,
-      &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      &:focus {
-        outline: none;
-      }
-
-      &:disabled {
-        color: variable.$trionesColorTextDisabled;
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &-button {
-    cursor: pointer;
-    display: flex;
-    flex-shrink: 0;
-    font-size: 10Px;
-    height: $inputNumberControlHeight;
-    width: $inputNumberControlHeight;
-    justify-content: center;
-    align-items: center;
-    background-color: $inputNumberBg;
-    border-radius: variable.$trionesBorderRadiusXs;
-
-    &-sm {
-      width: $inputSm;
-      height: $inputSm;
-    }
-
-    &-lg {
-      width: $inputLg;
-      height: $inputLg;
-    }
-
-    &-disabled {
-      cursor: not-allowed;
-      color: variable.$trionesColorTextDisabled;
-    }
-
-    .triones-antm-icon {
-      font-size: 10Px !important;
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$trionesInputNumberCls: 'triones-antm-input-number';
+
+$inputNumberBg: #F5F5F5;
+$inputSm: 24Px;
+$inputLg: 40Px;
+$inputNumberControlHeight: 28Px;
+
+.#{$trionesInputNumberCls} {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 2Px;
+  border-radius: variable.$trionesBorderRadiusXs;
+  overflow: hidden;
+
+  &--block {
+    display: flex;
+    width: 100%;
+
+    .#{$trionesInputNumberCls}-input {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+  }
+
+  &-input {
+    display: flex;
+    align-items: stretch;
+    flex: 0 1 auto;
+    min-width: 36Px;
+    min-height: $inputNumberControlHeight;
+
+    input {
+      width: 100%;
+      min-width: 0;
+      height: 100%;
+      min-height: $inputNumberControlHeight;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0 8Px;
+      border: 0;
+      border-radius: variable.$trionesBorderRadiusXs;
+      background-color: $inputNumberBg;
+      color: variable.$trionesColorText;
+      font-size: 14Px;
+      line-height: $inputNumberControlHeight;
+      text-align: center;
+      -moz-appearance: textfield;
+      appearance: textfield;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:disabled {
+        color: variable.$trionesColorTextDisabled;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-button {
+    cursor: pointer;
+    display: flex;
+    flex-shrink: 0;
+    font-size: 10Px;
+    height: $inputNumberControlHeight;
+    width: $inputNumberControlHeight;
+    justify-content: center;
+    align-items: center;
+    background-color: $inputNumberBg;
+    border-radius: variable.$trionesBorderRadiusXs;
+
+    &-sm {
+      width: $inputSm;
+      height: $inputSm;
+    }
+
+    &-lg {
+      width: $inputLg;
+      height: $inputLg;
+    }
+
+    &-disabled {
+      cursor: not-allowed;
+      color: variable.$trionesColorTextDisabled;
+    }
+
+    .triones-antm-icon {
+      font-size: 10Px !important;
+    }
+  }
+}

package/dist/Loading/DotLoading.d.ts

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import './dot-loading.scss';
 export type DotLoadingProps = {
     className?: string;
     style?: React.CSSProperties;

package/dist/Loading/DotLoading.js

@@ -6,7 +6,6 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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, { memo, useMemo } from 'react';
-import "./dot-loading.scss";
 var dotLoadingCls = 'triones-antm-dot-loading';
 export var DotLoading = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,

package/dist/Loading/SpinLoading.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import './spin-loading.scss';
 export type SpinLoadingProps = {
     size?: 'small' | 'middle' | 'large' | number;
     color?: 'default' | 'primary' | 'white' | string;

package/dist/Loading/SpinLoading.js

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 import Base64 from 'crypto-js/enc-base64';
 import Utf8 from 'crypto-js/enc-utf8';
 import React from 'react';
-import "./spin-loading.scss";
 var spinLoadingCls = 'triones-antm-spin-loading';
 export function createSvgStr(props) {
   return "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"width:100%;height:100%\" viewBox=\"0 0 32 32\">\n            <circle r=\"15\" cx=\"16\" cy=\"16\"\n                stroke-width=\"2\"\n                stroke=\"".concat(props.stroke, "\"\n                fill=\"transparent\"\n                stroke-linecap=\"round\"\n                stroke-dasharray=\"").concat(15 * 3.14159265358979 * 2, "\"\n                stroke-dashoffset=\"").concat(15 * 3.14159265358979 * 0.5, "\"></circle>\n        </svg>");

package/dist/Loading/index.d.ts

@@ -1,4 +1,5 @@
 import { SpinLoading, SpinLoadingProps } from './SpinLoading';
+import "./style.scss";
 export { DotLoading } from './DotLoading';
 export type { DotLoadingProps } from './DotLoading';
 export type { SpinLoadingProps };

package/dist/Loading/index.js

@@ -1,3 +1,4 @@
 import { SpinLoading } from "./SpinLoading";
+import "./style.scss";
 export { DotLoading } from "./DotLoading";
 export { SpinLoading };

package/dist/Loading/{dot-loading.scss → style.scss}

@@ -1,72 +1,113 @@
-@use "../style/variable" as variable;
-
-$dotLoadingCls: triones-antm-dot-loading;
-
-.#{$dotLoadingCls} {
-  display: inline-flex;
-  align-items: center;
-  height: 1em;
-  vertical-align: -0.125em;
-  /* 18 / 40 * 1em — horizontal gap between dots in antd-mobile viewBox */
-  gap: 0.45em;
-
-  &-default {
-    color: #9D9D9D;
-  }
-
-  &-primary {
-    color: variable.$trionesColorPrimary;
-  }
-
-  &-white {
-    color: white;
-  }
-
-  &-dot {
-    display: block;
-    flex-shrink: 0;
-    /* 8×8 in a 40-unit-tall viewBox, height = 1em */
-    width: 0.2em;
-    height: 0.2em;
-    background: currentColor;
-    //mask-image: var(--dotLoadingMask);
-    //-webkit-mask-image: var(--dotLoadingMask);
-    mask-repeat: no-repeat;
-    -webkit-mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-    -webkit-mask-size: 100% 100%;
-    mask-position: center;
-    -webkit-mask-position: center;
-    animation: triones-antm-dot-loading-bounce 2s infinite linear;
-    animation-fill-mode: backwards;
-  }
-
-  &-dot-0 {
-    animation-delay: 0s;
-  }
-
-  &-dot-1 {
-    animation-delay: 0.2s;
-  }
-
-  &-dot-2 {
-    animation-delay: 0.4s;
-  }
-}
-
-/* Mirrors antd-mobile SMIL: values 16;6;26;16;16, keyTimes 0;0.1;0.3;0.4;1, viewBox height 40 */
-@keyframes triones-antm-dot-loading-bounce {
-  0%,
-  40%,
-  100% {
-    transform: translateY(0);
-  }
-
-  10% {
-    transform: translateY(-0.25em);
-  }
-
-  30% {
-    transform: translateY(0.25em);
-  }
-}
+@use "../style/variable";
+
+$dotLoadingCls: triones-antm-dot-loading;
+$spinLoadingCls: triones-antm-spin-loading;
+
+.#{$dotLoadingCls} {
+  display: inline-flex;
+  align-items: center;
+  height: 1em;
+  vertical-align: -0.125em;
+  /* 18 / 40 * 1em — horizontal gap between dots in antd-mobile viewBox */
+  gap: 0.45em;
+
+  &-default {
+    color: #9D9D9D;
+  }
+
+  &-primary {
+    color: variable.$trionesColorPrimary;
+  }
+
+  &-white {
+    color: white;
+  }
+
+  &-dot {
+    display: block;
+    flex-shrink: 0;
+    /* 8×8 in a 40-unit-tall viewBox, height = 1em */
+    width: 0.2em;
+    height: 0.2em;
+    background: currentColor;
+    //mask-image: var(--dotLoadingMask);
+    //-webkit-mask-image: var(--dotLoadingMask);
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    -webkit-mask-size: 100% 100%;
+    mask-position: center;
+    -webkit-mask-position: center;
+    animation: triones-antm-dot-loading-bounce 2s infinite linear;
+    animation-fill-mode: backwards;
+  }
+
+  &-dot-0 {
+    animation-delay: 0s;
+  }
+
+  &-dot-1 {
+    animation-delay: 0.2s;
+  }
+
+  &-dot-2 {
+    animation-delay: 0.4s;
+  }
+}
+
+/* Mirrors antd-mobile SMIL: values 16;6;26;16;16, keyTimes 0;0.1;0.3;0.4;1, viewBox height 40 */
+@keyframes triones-antm-dot-loading-bounce {
+  0%,
+  40%,
+  100% {
+    transform: translateY(0);
+  }
+
+  10% {
+    transform: translateY(-0.25em);
+  }
+
+  30% {
+    transform: translateY(0.25em);
+  }
+}
+
+
+
+
+.#{$spinLoadingCls} {
+  --size: 32Px;
+  width: var(--size);
+  height: var(--size);
+
+  &-default{
+    color: #9D9D9D;
+  }
+  &-primary{
+    color: variable.$trionesColorPrimary;
+  }
+  &-white{
+    color: #ffffff;
+  }
+
+  &-spin {
+    //color: var(--color);
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    background: currentColor;
+    mask-image: var(--maskImage);
+    -webkit-mask-image: var(--maskImage);
+    animation: adm-spin-loading-rotate 2s infinite linear;
+  }
+
+}
+
+@keyframes adm-spin-loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/NavBar/style.scss

@@ -1,64 +1,65 @@
-@use "../style/variable" as variable;
-
-$trionesNavBarColorBg: variable.$trionesColorBorderBg !default;
-$trionesNavBarColorText: variable.$trionesColorTextBase !default;
-
-$class-prefix-nav-bar: 'triones-antm-nav-bar';
-/* prettier-ignore */
-.#{$class-prefix-nav-bar} {
-  --height: 45PX;
-  --border-bottom: none;
-  display: flex;
-  align-items: center;
-  height: var(--height);
-  border-bottom: var(--border-bottom);
-  padding: 0 12PX;
-  white-space: nowrap;
-  color: $trionesNavBarColorText;
-  background-color: $trionesNavBarColorBg;
-
-  &-left,
-  &-right {
-    flex: 1;
-  }
-
-  &-title {
-    flex: auto;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &-back {
-    display: flex;
-    align-items: center;
-    margin-right: 16PX;
-    padding: 6PX 0;
-    cursor: pointer;
-
-    &-arrow {
-      font-size: 20PX;
-      margin-right: 5PX;
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  &-left {
-    font-size: var(--triones-antm-font-size-7);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  &-title {
-    justify-content: center;
-    white-space: nowrap;
-    font-size: var(--triones-antm-font-size-10);
-    padding: 0 12PX;
-  }
-
-  &-right {
-    text-align: right;
-  }
-}
+@use "../style/variable" as variable;
+
+$trionesNavBarColorBg: variable.$trionesColorBorderBg !default;
+$trionesNavBarColorText: variable.$trionesColorTextBase !default;
+
+$class-prefix-nav-bar: 'triones-antm-nav-bar';
+/* prettier-ignore */
+.#{$class-prefix-nav-bar} {
+  --height: 45PX;
+  --border-bottom: none;
+  display: flex;
+  flex: none;
+  align-items: center;
+  height: var(--height);
+  border-bottom: var(--border-bottom);
+  padding: 0 12PX;
+  white-space: nowrap;
+  color: $trionesNavBarColorText;
+  background-color: $trionesNavBarColorBg;
+
+  &-left,
+  &-right {
+    flex: 1;
+  }
+
+  &-title {
+    flex: auto;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-back {
+    display: flex;
+    align-items: center;
+    margin-right: 16PX;
+    padding: 6PX 0;
+    cursor: pointer;
+
+    &-arrow {
+      font-size: 20PX;
+      margin-right: 5PX;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &-left {
+    font-size: var(--triones-antm-font-size-7);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  &-title {
+    justify-content: center;
+    white-space: nowrap;
+    font-size: var(--triones-antm-font-size-10);
+    padding: 0 12PX;
+  }
+
+  &-right {
+    text-align: right;
+  }
+}