Float-ui (#848)

* fix: check if element exists * fix: copy update * fix: copy change * fix: make nf fields optional * fix: info url checkbox value * fix: error message position * fix: leftover
radixdlt · Nov 28, 2023 · 219eb62 · 219eb62
1 parent a35e729
commit 219eb62
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 26 deletions.
diff --git a/apps/console/src/components/Form.svelte b/apps/console/src/components/Form.svelte
@@ -82,12 +82,14 @@
         />
       {:else if item.formItemType === 'inputWithCheckbox'}
         <div class="with-checkbox">
-          <Input
-            {disabled}
-            placeholder={item.placeholder}
-            bind:value={$state[item.key]}
-            schema={item.schema}
-          />
+          <div class="input">
+            <Input
+              {disabled}
+              placeholder={item.placeholder}
+              bind:value={$state[item.key]}
+              schema={item.schema}
+            />
+          </div>
           <Checkbox
             checked={checkboxValue(item.checkboxKey)}
             {disabled}
@@ -144,4 +146,8 @@
     align-items: center;
     gap: var(--spacing-lg);
   }
+
+  .input {
+    width: 100%;
+  }
 </style>
diff --git a/apps/console/src/pages/navbar-pages/create-token/CreateToken.svelte b/apps/console/src/pages/navbar-pages/create-token/CreateToken.svelte
@@ -211,7 +211,7 @@
       label: 'Info URL',
       placeholder: 'Enter info URL',
       formItemType: 'inputWithCheckbox',
-      checkboxKey: 'iconUrlLocked',
+      checkboxKey: 'infoUrlLocked',
       checkboxLabel: 'Lock',
       schema: z.string().startsWith('https://', {
         message: 'Must provide URL that starts with https://'
@@ -385,15 +385,15 @@
     },
     {
       key: 'nft_data_setter',
-      label: 'nft_data_setter',
+      label: 'non_fungible_data_updater',
       placeholder: 'Select auth rule',
       formItemType: 'select',
       items: authRuleSelectItems,
       showCondition: nonFungibleOnlyConditionFn
     },
     {
       key: 'nft_data_setter_updater',
-      label: 'nft_data_setter_updater',
+      label: 'non_fungible_data_updater_updater',
       placeholder: 'Select auth rule',
       formItemType: 'select',
       items: authRuleSelectItems,

diff --git a/apps/console/src/pages/navbar-pages/create-token/Nft.svelte b/apps/console/src/pages/navbar-pages/create-token/Nft.svelte
@@ -46,27 +46,23 @@
       label: 'Description',
       placeholder: 'Enter NFT description (truncated after 256 characters)',
       formItemType: 'textarea',
-      rows: 2,
-      schema: string().min(1, { message: 'description required' })
+      rows: 2
     },
     {
       key: 'key_image_url',
       label: 'Key image URL',
       placeholder: 'Enter key image URL',
-      formItemType: 'input',
-      schema: string()
-        .min(1, { message: 'image key URL required' })
-        .startsWith('https://', {
-          message: 'URL must start with https://'
-        })
+      formItemType: 'input'
     }
   ]
 
   $: {
     const values = $state
     const isInvalid = formItems.some((item) => {
       const value = values[item.key as keyof NftData]
-      const invalid = item.schema!.safeParse(value).success === false
+      const invalid = item.schema
+        ? item.schema.safeParse(value).success === false
+        : false
       return invalid
     })
     dispatch('change', {

diff --git a/packages/ui/src/dev-console/form/Input.svelte b/packages/ui/src/dev-console/form/Input.svelte
@@ -40,9 +40,7 @@
 </script>
 
 <div class="content">
-  <slot name="before" />
   <input {placeholder} class:disabled class:error on:input bind:value />
-  <slot name="after" />
 </div>
 
 {#if schema}
@@ -62,6 +60,7 @@
     width: 100%;
     line-height: 1.5rem;
     display: flex;
+    flex-direction: column;
   }
 
   input {

diff --git a/packages/ui/src/dev-console/form/Select.svelte b/packages/ui/src/dev-console/form/Select.svelte
@@ -50,12 +50,13 @@
   let selectItemsYCoord = 0
 
   $: {
-    computePosition(element!, dropdownElement, {
-      placement: 'bottom',
-      middleware: [flip()]
-    }).then(({ y }) => {
-      selectItemsYCoord = y
-    })
+    if (element && dropdownElement)
+      computePosition(element!, dropdownElement, {
+        placement: 'bottom',
+        middleware: [flip()]
+      }).then(({ y }) => {
+        selectItemsYCoord = y
+      })
   }
 </script>