From 77c8d5edfe352c63dfb46000a7687275ff4bcab9 Mon Sep 17 00:00:00 2001
From: divisey <18656007202@163.com>
Date: Wed, 28 Jun 2023 14:47:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20update=20ui=20(#73)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FAssetAmountInput.stories.ts              | 32 +++++++++++++++++++
 .../FAssetAmountInput/FAssetAmountInput.tsx   |  5 +++
 .../src/components/FAssetLogo/FAssetLogo.tsx  | 10 +++---
 .../components/FAssetSelect/FAssetSelect.tsx  | 11 ++++++-
 .../FAssetSelect/FAssetSelectField.scss       |  5 +--
 .../FAssetSelect/FAssetSelectField.tsx        |  2 +-
 .../FInfiniteLoad/FInfiniteLoad.stories.ts    |  2 +-
 .../FLoading/FFullscreenLoading.tsx           |  4 +--
 .../components/FLoading/FLoading.stories.ts   |  4 +--
 .../uikit/src/components/FLoading/index.ts    |  2 +-
 10 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/packages/uikit/src/components/FAssetAmountInput/FAssetAmountInput.stories.ts b/packages/uikit/src/components/FAssetAmountInput/FAssetAmountInput.stories.ts
index cffd3090..e00a4e95 100644
--- a/packages/uikit/src/components/FAssetAmountInput/FAssetAmountInput.stories.ts
+++ b/packages/uikit/src/components/FAssetAmountInput/FAssetAmountInput.stories.ts
@@ -111,3 +111,35 @@ export const WithRecords = Template3.bind({});
 WithRecords.args = {
   showRecords: true,
 };
+
+const Template4: StoryFn<typeof FAssetAmountInput> = (args) => ({
+  components: { FAssetAmountInput },
+  setup() {
+    const asset = ref({
+      asset_id: "02a39171-dfc1-36d1-94c3-9e9725d59bbb",
+      provider: "mixin",
+      chain_id: "43d61dcd-e413-450d-80b8-101d5e903357",
+      symbol: "ZIL",
+      name: "Zilliqa",
+      logo: "https://mixin-images.zeromesh.net/prUxZ_5EC6UYufpA3lYn7Sjiq8HeTCiZ7VsIFtso0sjZrck7T8oCHyaSKNwsrKAE82h1oxqAJM_hZsnRm-ZAIMc=s128",
+      confirmations: 16,
+      price_usd: "0.02306898",
+      change_usd: "0.047327018826841996",
+      balance: "0.00000001",
+      destination: "0x4cC777dFb649b9Ebc524E78e7DA89f0916Dd0f24",
+      tag: "",
+    });
+    const amount = ref("");
+
+    return {
+      args,
+      asset,
+      amount,
+      assets: assets.map((asset) => convertMixinAsset(asset)),
+    };
+  },
+  template: `<FAssetAmountInput v-model:asset="asset" v-model:amount="amount" v-bind="args" :assets="assets"></FAssetAmountInput>`,
+});
+
+export const NotSelectable = Template4.bind({});
+NotSelectable.args = {};
diff --git a/packages/uikit/src/components/FAssetAmountInput/FAssetAmountInput.tsx b/packages/uikit/src/components/FAssetAmountInput/FAssetAmountInput.tsx
index 492a8fa0..96d5f053 100644
--- a/packages/uikit/src/components/FAssetAmountInput/FAssetAmountInput.tsx
+++ b/packages/uikit/src/components/FAssetAmountInput/FAssetAmountInput.tsx
@@ -38,6 +38,10 @@ export const FAssetAmountInput = defineComponent({
       type: Object as PropType<string[]>,
       default: () => [],
     },
+    selectable: {
+      type: Boolean,
+      deafult: true,
+    },
   },
 
   emits: {
@@ -81,6 +85,7 @@ export const FAssetAmountInput = defineComponent({
               records={props.records}
               themeColor={props.themeColor}
               showRecords={props.showRecords}
+              selectable={props.selectable}
               onUpdate:asset={(v) => emit("update:asset", v)}
               onUpdate:records={(v) => emit("update:records", v)}
               onClear:records={() => emit("clear:records")}
diff --git a/packages/uikit/src/components/FAssetLogo/FAssetLogo.tsx b/packages/uikit/src/components/FAssetLogo/FAssetLogo.tsx
index c7624674..ca83187d 100644
--- a/packages/uikit/src/components/FAssetLogo/FAssetLogo.tsx
+++ b/packages/uikit/src/components/FAssetLogo/FAssetLogo.tsx
@@ -1,5 +1,4 @@
 import { defineComponent, PropType } from "vue";
-import { VImg } from "vuetify/components";
 
 import "./FAssetLogo.scss";
 
@@ -25,10 +24,13 @@ export const FAssetLogo = defineComponent({
 
   setup(props) {
     return () => (
-      <div class="f-asset-logo">
-        <VImg width={props.size} src={props.asset?.logo}></VImg>
+      <div
+        class="f-asset-logo"
+        style={{ width: props.size + "px", height: props.size + "px" }}
+      >
+        <img width={props.size} src={props.asset?.logo}></img>
         {props.asset?.chainLogo && (
-          <VImg
+          <img
             class="f-asset-logo__chain"
             width={props.chainSize}
             src={props.asset?.chainLogo}
diff --git a/packages/uikit/src/components/FAssetSelect/FAssetSelect.tsx b/packages/uikit/src/components/FAssetSelect/FAssetSelect.tsx
index 86e22da4..2a3e7b18 100644
--- a/packages/uikit/src/components/FAssetSelect/FAssetSelect.tsx
+++ b/packages/uikit/src/components/FAssetSelect/FAssetSelect.tsx
@@ -47,6 +47,10 @@ export const FAssetSelect = defineComponent({
       type: Object as PropType<string[]>,
       default: () => [],
     },
+    selectable: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: {
@@ -97,7 +101,12 @@ export const FAssetSelect = defineComponent({
         {{
           activator: ({ isActive, props: { onClick } }) => (
             <FAssetSelectField
-              class={[{ "f-asset-field--active": isActive }]}
+              class={[
+                {
+                  "f-asset-field--active": isActive,
+                },
+              ]}
+              selectable={props.selectable}
               asset={props.asset}
               onClick={withModifiers(onClick, ["stop"])}
               onMousedown={withModifiers(() => {}, ["stop"])}
diff --git a/packages/uikit/src/components/FAssetSelect/FAssetSelectField.scss b/packages/uikit/src/components/FAssetSelect/FAssetSelectField.scss
index 9d042c11..3a66c424 100644
--- a/packages/uikit/src/components/FAssetSelect/FAssetSelectField.scss
+++ b/packages/uikit/src/components/FAssetSelect/FAssetSelectField.scss
@@ -4,13 +4,14 @@
   padding: 4px 16px;
   border-radius: 8px;
   min-height: 52px;
+  cursor: pointer;
 
   &--outlined {
     border: 1px solid rgb(var(--v-theme-greyscale_5));
   }
 
-  &--selectable {
-    cursor: pointer;
+  &--no-selectable {
+    pointer-events: none;
   }
 
   &__placeholder {
diff --git a/packages/uikit/src/components/FAssetSelect/FAssetSelectField.tsx b/packages/uikit/src/components/FAssetSelect/FAssetSelectField.tsx
index 85fb15a4..ee3389a4 100644
--- a/packages/uikit/src/components/FAssetSelect/FAssetSelectField.tsx
+++ b/packages/uikit/src/components/FAssetSelect/FAssetSelectField.tsx
@@ -36,7 +36,7 @@ export const FAssetSelectField = defineComponent({
     const classes = computed(() => {
       return {
         "f-asset-field": true,
-        "f-asset-field--selectable": props.selectable,
+        "f-asset-field--no-selectable": !props.selectable,
         "f-asset-field--outlined": props.outlined,
       };
     });
diff --git a/packages/uikit/src/components/FInfiniteLoad/FInfiniteLoad.stories.ts b/packages/uikit/src/components/FInfiniteLoad/FInfiniteLoad.stories.ts
index 18478318..4bfbb43b 100644
--- a/packages/uikit/src/components/FInfiniteLoad/FInfiniteLoad.stories.ts
+++ b/packages/uikit/src/components/FInfiniteLoad/FInfiniteLoad.stories.ts
@@ -20,7 +20,7 @@ const Template: StoryFn<typeof FInfiniteLoad> = (args) => ({
           if (items.value.length > 20) {
             state.complete();
             reject();
-          } else if (Math.random() < 0.5) {
+          } else if (Math.random() < 0.1) {
             state.error();
             reject();
           } else {
diff --git a/packages/uikit/src/components/FLoading/FFullscreenLoading.tsx b/packages/uikit/src/components/FLoading/FFullscreenLoading.tsx
index 9c591d11..0133271f 100644
--- a/packages/uikit/src/components/FLoading/FFullscreenLoading.tsx
+++ b/packages/uikit/src/components/FLoading/FFullscreenLoading.tsx
@@ -2,8 +2,8 @@ import { defineComponent } from "vue";
 import { FLoading } from "./FLoading";
 import { VOverlay } from "vuetify/components";
 
-export const FFullscreenLoading = defineComponent({
-  name: "FFullscreenLoading",
+export const FFullScreenLoading = defineComponent({
+  name: "FFullScreenLoading",
 
   setup(props, { attrs }) {
     return () => (
diff --git a/packages/uikit/src/components/FLoading/FLoading.stories.ts b/packages/uikit/src/components/FLoading/FLoading.stories.ts
index 7dfc4512..24ea7eec 100644
--- a/packages/uikit/src/components/FLoading/FLoading.stories.ts
+++ b/packages/uikit/src/components/FLoading/FLoading.stories.ts
@@ -1,6 +1,6 @@
 import { ref } from "vue";
 import { FLoading } from "./FLoading";
-import { FFullscreenLoading } from "./FFullscreenLoading";
+import { FFullScreenLoading } from "./FFullscreenLoading";
 import { FButton } from "../FButton";
 import { Meta, StoryFn } from "@storybook/vue3";
 
@@ -31,7 +31,7 @@ ProcessProps.args = {
 };
 
 const Template2: StoryFn<typeof FLoading> = (args) => ({
-  components: { FFullscreenLoading, FButton },
+  components: { FFullScreenLoading, FButton },
   setup() {
     const loading = ref(false);
     const show = () => {
diff --git a/packages/uikit/src/components/FLoading/index.ts b/packages/uikit/src/components/FLoading/index.ts
index 3e46eec6..03659f39 100644
--- a/packages/uikit/src/components/FLoading/index.ts
+++ b/packages/uikit/src/components/FLoading/index.ts
@@ -1,2 +1,2 @@
 export { FLoading } from "./FLoading";
-export { FFullscreenLoading } from "./FFullscreenLoading";
+export { FFullScreenLoading } from "./FFullscreenLoading";