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

package/dist/Radio/style.scss

@@ -1,138 +1,154 @@
-@use "../style/variable" as *;
-
-$checkboxDisabledColor: rgba(0, 0, 0, 0.25) !default;
-
-$class-prefix-radio: 'triones-antm-radio';
-
-.#{$class-prefix-radio}-wrapper {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8Px;
-
-  .#{$class-prefix-radio} {
-    &-fake {
-      width: 22PX;
-      height: 22PX;
-
-      .triones-antm-icon {
-        //position: absolute;
-      }
-
-      &-checked {
-        height: 100%;
-        width: 100%;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        background-color: $trionesColorPrimary;
-        color: white;
-        border-radius: 50vh;
-        box-sizing: border-box;
-        overflow: hidden;
-
-      }
-
-      &-unchecked {
-        height: 100%;
-        width: 100%;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 50vh;
-        border: 1PX solid $trionesBorderColor;
-        box-sizing: border-box;
-      }
-
-    }
-
-
-
-    &-label {
-      flex: 1 auto;
-    }
-  }
-
-  &.#{$class-prefix-radio} {
-    &-disabled {
-      color: $checkboxDisabledColor;
-      pointer-events: none;
-
-      .#{$class-prefix-radio}-fake-checked {
-        background-color: $checkboxDisabledColor;
-      }
-    }
-    &-block {
-      width: 100%;
-    }
-  }
-
-}
-
-
-.#{$class-prefix-radio}-group {
-  display: flex;
-  gap: 8Px;
-  &-horizontal{
-    flex-direction: row;
-  }
-  &-vertical{
-    flex-direction: column;
-  }
-}
-
-.#{$class-prefix-radio}-button-group {
-  display: flex;
-}
-
-.#{$class-prefix-radio}-button-wrapper {
-  display: inline-flex;
-  position: relative;
-  border-top: 1PX solid $trionesBorderColor;
-  border-bottom: 1PX solid $trionesBorderColor;
-  border-right: 1PX solid $trionesBorderColor;
-
-  &:first-child {
-    border-left: 1PX solid $trionesBorderColor;
-    border-top-left-radius: $trionesBorderRadius;
-    border-bottom-left-radius: $trionesBorderRadius;
-  }
-
-  &:last-child {
-    border-right: 1PX solid $trionesBorderColor;
-    border-top-right-radius: $trionesBorderRadius;
-    border-bottom-right-radius: $trionesBorderRadius;
-  }
-
-  &-checked {
-    border-top: 1PX solid $trionesColorPrimary;
-    border-bottom: 1PX solid $trionesColorPrimary;
-    color: $trionesColorPrimary;
-
-    &:first-child {
-      border: 1PX solid $trionesColorPrimary;
-    }
-
-    &:not(:first-child) {
-      &::before {
-        content: " ";
-        width: 1PX;
-        background-color: $trionesColorPrimary;
-        position: absolute;
-        inset-block-start: -1Px;
-        inset-inline-start: -1Px;
-        height: 100%;
-        padding-block: 1Px;
-      }
-
-      border-right: 1PX solid $trionesColorPrimary;
-    }
-  }
-
-  .#{$class-prefix-radio}-button {
-    cursor: pointer;
-    display: inline-flex;
-    padding: 8Px 12Px;
-
-  }
-}
+@use "../style/variable" as variable;
+
+$checkboxDisabledColor: rgba(0, 0, 0, 0.25) !default;
+
+$class-prefix-radio: 'triones-antm-radio';
+
+.#{$class-prefix-radio}-wrapper {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8Px;
+
+  .#{$class-prefix-radio} {
+    flex-shrink: 0;
+    &-fake {
+      width: 20PX;
+      height: 20PX;
+      line-height: 0;
+      box-sizing: border-box;
+      overflow: hidden;
+
+      .triones-antm-icon {
+        //position: absolute;
+        font-size: variable.$trionesFontSize;
+      }
+
+      &-checked {
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        background-color: variable.$trionesColorPrimary;
+        color: white;
+        border-radius: 50vh;
+        box-sizing: border-box;
+        overflow: hidden;
+
+        .triones-antm-icon {
+          font-size: 14Px;
+          line-height: 1;
+          display: block;
+        }
+      }
+
+      &-unchecked {
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50vh;
+        border: 1PX solid variable.$trionesBorderColor;
+        box-sizing: border-box;
+      }
+
+    }
+
+
+    &-label {
+      flex: 1 auto;
+    }
+  }
+
+  &.#{$class-prefix-radio} {
+    &-disabled {
+      color: $checkboxDisabledColor;
+      pointer-events: none;
+
+      .#{$class-prefix-radio}-fake-checked {
+        background-color: $checkboxDisabledColor;
+      }
+    }
+
+    &-block {
+      width: 100%;
+    }
+  }
+
+}
+
+
+.#{$class-prefix-radio}-group {
+
+  gap: 8Px;
+
+  &-horizontal {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  &-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.#{$class-prefix-radio}-button-group {
+  display: flex;
+}
+
+.#{$class-prefix-radio}-button-wrapper {
+  display: inline-flex;
+  position: relative;
+  border-top: 1PX solid variable.$trionesBorderColor;
+  border-bottom: 1PX solid variable.$trionesBorderColor;
+  border-right: 1PX solid variable.$trionesBorderColor;
+
+  &:first-child {
+    border-left: 1PX solid variable.$trionesBorderColor;
+    border-top-left-radius: variable.$trionesBorderRadius;
+    border-bottom-left-radius: variable.$trionesBorderRadius;
+  }
+
+  &:last-child {
+    border-right: 1PX solid variable.$trionesBorderColor;
+    border-top-right-radius: variable.$trionesBorderRadius;
+    border-bottom-right-radius: variable.$trionesBorderRadius;
+  }
+
+  &-checked {
+    border-top: 1PX solid variable.$trionesColorPrimary;
+    border-bottom: 1PX solid variable.$trionesColorPrimary;
+    color: variable.$trionesColorPrimary;
+
+    &:first-child {
+      border: 1PX solid variable.$trionesColorPrimary;
+    }
+
+    &:not(:first-child) {
+      &::before {
+        content: " ";
+        width: 1PX;
+        background-color: variable.$trionesColorPrimary;
+        position: absolute;
+        inset-block-start: -1Px;
+        inset-inline-start: -1Px;
+        height: 100%;
+        padding-block: 1Px;
+      }
+
+      border-right: 1PX solid variable.$trionesColorPrimary;
+    }
+  }
+
+  .#{$class-prefix-radio}-button {
+    cursor: pointer;
+    display: inline-flex;
+    padding: 8Px 12Px;
+
+  }
+}

package/dist/Radio/types.d.ts

@@ -41,6 +41,11 @@ export type RadioProps = {
      */
     onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
 };
+export type RadioOptionProps = {
+    label?: React.ReactNode;
+    value?: any;
+    [key: string]: any;
+};
 export interface RadioGroupProps {
     children?: ReactNode;
     className?: string;
@@ -51,8 +56,5 @@ export interface RadioGroupProps {
     shape?: 'button' | 'round';
     labelPosition?: 'left' | 'right';
     direction?: 'vertical' | 'horizontal';
-    items?: {
-        label: React.ReactNode;
-        value: any;
-    }[];
+    options?: RadioOptionProps[];
 }

package/dist/Rate/rate.js

@@ -12,7 +12,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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 { StarFill } from "../../../antd-mobile-icons-react";
+import { StarFill } from '@trionesdev/antd-mobile-icons-react';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 import { withNativeProps } from "../utils/native-props";

package/dist/Rate/style.scss

@@ -1,37 +1,37 @@
-$rateCls: 'triones-antm-rate';
-
-.#{$rateCls} {
-  display: inline-flex;
-  align-items: center;
-
-  &-star-wrapper {
-    position: relative;
-    padding: 0 2px;
-    cursor: pointer;
-  }
-
-  &-star {
-    font-size: 20px;
-    color: var(--inactive-color, #e8e8e8);
-    transition: color 0.3s;
-
-    &-active {
-      color: var(--active-color, #ffb400);
-    }
-  }
-
-  &-star-half-item {
-    position: absolute;
-    left: 2px;
-    top: 0;
-    width: 42%;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  &-readonly {
-    .#{$rateCls}-star-wrapper {
-      cursor: default;
-    }
-  }
-}
+$rateCls: 'triones-antm-rate';
+
+.#{$rateCls} {
+  display: inline-flex;
+  align-items: center;
+
+  &-star-wrapper {
+    position: relative;
+    padding: 0 2px;
+    cursor: pointer;
+  }
+
+  &-star {
+    font-size: 20px;
+    color: var(--inactive-color, #e8e8e8);
+    transition: color 0.3s;
+
+    &-active {
+      color: var(--active-color, #ffb400);
+    }
+  }
+
+  &-star-half-item {
+    position: absolute;
+    left: 2px;
+    top: 0;
+    width: 42%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &-readonly {
+    .#{$rateCls}-star-wrapper {
+      cursor: default;
+    }
+  }
+}

package/dist/Result/demo/base.js

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

package/dist/Result/style.scss

@@ -1,73 +1,73 @@
-$class-prefix-result: 'triones-antm-result';
-/* prettier-ignore */
-.#{$class-prefix-result} {
-  padding: 32PX 12PX;
-  background-color: var(--triones-antm-color-background);
-
-  &-icon {
-    box-sizing: border-box;
-    width: 64PX;
-    height: 64PX;
-    margin: 0 auto 20PX auto;
-    padding: 6PX;
-
-    .antd-mobile-icon {
-      font-size: 52PX;
-    }
-  }
-
-  &-title {
-    color: var(--triones-antm-color-text);
-    font-size: var(--triones-antm-font-size-10);
-    line-height: 1.4;
-    text-align: center;
-  }
-
-  &-description {
-    margin-top: 8PX;
-    color: var(--triones-antm-color-weak);
-    font-size: var(--triones-antm-font-size-main);
-    line-height: 1.4;
-    text-align: center;
-  }
-}
-
-.#{$class-prefix-result}-success {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-primary);
-    }
-  }
-}
-
-.#{$class-prefix-result}-error {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-danger);
-    }
-  }
-}
-
-.#{$class-prefix-result}-info {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-primary);
-    }
-  }
-}
-
-.#{$class-prefix-result}-waiting {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-success);
-    }
-  }
-}
-
-.#{$class-prefix-result}-warning {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-warning);
-    }
-  }
-}
+$class-prefix-result: 'triones-antm-result';
+/* prettier-ignore */
+.#{$class-prefix-result} {
+  padding: 32PX 12PX;
+  background-color: var(--triones-antm-color-background);
+
+  &-icon {
+    box-sizing: border-box;
+    width: 64PX;
+    height: 64PX;
+    margin: 0 auto 20PX auto;
+    padding: 6PX;
+
+    .antd-mobile-icon {
+      font-size: 52PX;
+    }
+  }
+
+  &-title {
+    color: var(--triones-antm-color-text);
+    font-size: var(--triones-antm-font-size-10);
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  &-description {
+    margin-top: 8PX;
+    color: var(--triones-antm-color-weak);
+    font-size: var(--triones-antm-font-size-main);
+    line-height: 1.4;
+    text-align: center;
+  }
+}
+
+.#{$class-prefix-result}-success {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-error {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-danger);
+    }
+  }
+}
+
+.#{$class-prefix-result}-info {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-waiting {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-success);
+    }
+  }
+}
+
+.#{$class-prefix-result}-warning {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-warning);
+    }
+  }
+}

package/dist/Result/use-result-icon.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ConfigProvider from "../ConfigProvider";
-import { CheckCircleOutline, CloseCircleOutline, InformationCircleOutline, ClockCircleOutline, ExclamationTriangleOutline } from "../../../antd-mobile-icons-react";
+import { CheckCircleOutline, CloseCircleOutline, InformationCircleOutline, ClockCircleOutline, ExclamationTriangleOutline } from '@trionesdev/antd-mobile-icons-react';
 export var useResultIcon = function useResultIcon(status) {
   var _ConfigProvider$useCo = ConfigProvider.useConfig(),
     _ConfigProvider$useCo2 = _ConfigProvider$useCo.result,

package/dist/SafeArea/style.scss

@@ -1,18 +1,20 @@
-@use "../style/variable" as *;
-
-$class-prefix-safe-area: 'triones-antm-safe-area';
-
-.#{$class-prefix-safe-area} {
-  height: 100%;
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-
-  &-position-top {
-    padding-top: calc(env(safe-area-inset-top) * $trionesSafeAreaMultiple);
-  }
-
-  &-position-bottom {
-    padding-bottom: calc(env(safe-area-inset-bottom) * $trionesSafeAreaMultiple);
-  }
-}
+@use "../style/variable" as variable;
+
+$class-prefix-safe-area: 'triones-antm-safe-area';
+
+$safeAreaMultiple : variable.$trionesSafeAreaMultiple;
+
+.#{$class-prefix-safe-area} {
+  height: 100%;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+
+  &-position-top {
+    padding-top: calc(env(safe-area-inset-top) * $safeAreaMultiple);
+  }
+
+  &-position-bottom {
+    padding-bottom: calc(env(safe-area-inset-bottom) * $safeAreaMultiple);
+  }
+}

package/dist/Scaffold/style.scss

@@ -1,16 +1,17 @@
-@use "../style/variable" as *;
-
-
-$trionesScaffoldCls: 'triones-antm-scaffold';
-
-.#{$trionesScaffoldCls} {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  &-body {
-    flex: 1 auto;
-    overflow: hidden;
-  }
-}
+@use "../style/variable" as variable;
+
+
+$trionesScaffoldCls: 'triones-antm-scaffold';
+
+.#{$trionesScaffoldCls} {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: variable.$trionesColorBgScaffold;
+
+  &-body {
+    flex: 1 auto;
+    overflow: hidden;
+  }
+}