refactor(ui): removed all n-space

CorentinTh · May 27, 2023 · 4d2b037 · 4d2b037 · vercel · May 27, 2023
1 parent 34d8e5c
commit 4d2b037
Show file tree

Hide file tree

Showing 40 changed files with 222 additions and 246 deletions.
diff --git a/src/components/ColoredCard.vue b/src/components/ColoredCard.vue
@@ -1,8 +1,6 @@
 <template>
   <c-card class="colored-card">
-    <n-space justify="space-between" align="center">
-      <n-icon class="icon" size="40" :component="icon" />
-    </n-space>
+    <n-icon class="icon" size="40" :component="icon" />
     <n-h3 class="title">
       <n-ellipsis>{{ title }}</n-ellipsis>
     </n-h3>

diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue
@@ -21,9 +21,9 @@
         <span>{{ tooltipText }}</span>
       </n-tooltip>
     </c-card>
-    <n-space v-if="copyPlacement === 'outside'" justify="center" mt-4>
+    <div v-if="copyPlacement === 'outside'" mt-4 flex justify-center>
       <c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
-    </n-space>
+    </div>
   </div>
 </template>
 

diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue
@@ -1,9 +1,9 @@
 <template>
   <router-link :to="tool.path">
     <c-card class="tool-card">
-      <n-space justify="space-between" align="center">
+      <div flex items-center justify-between>
         <n-icon class="icon" size="40" :component="tool.icon" />
-        <n-space align="center">
+        <div flex items-center gap-8px>
           <n-tag
             v-if="tool.isNew"
             size="small"
@@ -17,8 +17,8 @@
           </n-tag>
 
           <favorite-button :tool="tool" />
-        </n-space>
-      </n-space>
+        </div>
+      </div>
       <n-h3 class="title">
         <n-ellipsis>{{ tool.name }}</n-ellipsis>
       </n-h3>

diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
@@ -43,9 +43,9 @@ const tools = computed<ToolCategory[]>(() => [
       </router-link>
 
       <div class="sider-content">
-        <n-space v-if="styleStore.isSmallScreen" justify="center">
+        <div v-if="styleStore.isSmallScreen" flex justify-center>
           <navbar-buttons />
-        </n-space>
+        </div>
 
         <collapsible-tool-menu :tools-by-category="tools" />
 

diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue
@@ -29,15 +29,15 @@ useHead(head);
   <base-layout>
     <div class="tool-layout">
       <div class="tool-header">
-        <n-space align="center" justify="space-between" :wrap="false">
+        <div flex flex-nowrap items-center justify-between>
           <n-h1>
             {{ route.meta.name }}
           </n-h1>
 
           <div>
             <favorite-button :tool="{name: route.meta.name} as Tool" />
           </div>
-        </n-space>
+        </div>
 
         <div class="separator" />
 

diff --git a/src/tools/basic-auth-generator/basic-auth-generator.vue b/src/tools/basic-auth-generator/basic-auth-generator.vue
@@ -18,9 +18,9 @@
         </n-scrollbar>
       </n-statistic>
     </c-card>
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
       <c-button @click="copy">Copy header</c-button>
-    </n-space>
+    </div>
   </div>
 </template>
 

diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue
@@ -15,9 +15,9 @@
 
     <c-input-text :value="hashed" readonly text-center />
 
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
       <c-button @click="copy"> Copy hash </c-button>
-    </n-space>
+    </div>
   </c-card>
 
   <c-card title="Compare string with hash">

diff --git a/src/tools/benchmark-builder/benchmark-builder.vue b/src/tools/benchmark-builder/benchmark-builder.vue
@@ -1,6 +1,6 @@
 <template>
   <n-scrollbar style="flex: 1" x-scrollable>
-    <n-space :wrap="false" style="flex: 1" justify="center" :size="12" mb-5>
+    <div mb-5 flex flex-1 flex-nowrap justify-center gap-12px>
       <div v-for="(suite, index) of suites" :key="index">
         <c-card style="width: 294px">
           <c-input-text
@@ -17,7 +17,7 @@
           </n-form-item>
         </c-card>
 
-        <n-space justify="center">
+        <div flex justify-center>
           <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
             <n-icon :component="Trash" depth="3" mr-2 size="18" />
             Delete suite
@@ -29,14 +29,14 @@
             <n-icon :component="Plus" depth="3" mr-2 size="18" />
             Add suite
           </c-button>
-        </n-space>
+        </div>
       </div>
-    </n-space>
+    </div>
   </n-scrollbar>
 
   <div style="flex: 0 0 100%">
     <div style="max-width: 600px; margin: 0 auto">
-      <n-space justify="center">
+      <div mx-auto max-w-sm flex justify-center gap-3>
         <c-input-text v-model:value="unit" placeholder="Unit (eg: ms)" label="Unit" label-position="left" mb-4 />
 
         <c-button
@@ -48,7 +48,7 @@
           "
           >Reset suites</c-button
         >
-      </n-space>
+      </div>
 
       <n-table>
         <thead>
@@ -70,10 +70,10 @@
           </tr>
         </tbody>
       </n-table>
-      <n-space justify="center" mt-5>
+      <div mt-5 flex justify-center gap-3>
         <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
         <c-button @click="copyAsBulletList">Copy as bullet list</c-button>
-      </n-space>
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/tools/benchmark-builder/dynamic-values.vue b/src/tools/benchmark-builder/dynamic-values.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-space v-for="(value, index) of values" :key="index" :wrap="false" style="margin-bottom: 5px" :size="5">
+    <div v-for="(value, index) of values" :key="index" mb-2 flex flex-nowrap gap-2>
       <n-input-number
         :ref="refs.set"
         v-model:value="values[index]"
@@ -17,7 +17,7 @@
         </template>
         Delete value
       </n-tooltip>
-    </n-space>
+    </div>
 
     <c-button @click="addValue">
       <n-icon :component="Plus" depth="3" mr-2 size="18" />

diff --git a/src/tools/chronometer/chronometer.vue b/src/tools/chronometer/chronometer.vue
@@ -3,12 +3,12 @@
     <c-card>
       <div class="duration">{{ formatMs(counter) }}</div>
     </c-card>
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center gap-3>
       <c-button v-if="!isRunning" type="primary" @click="resume">Start</c-button>
       <c-button v-else type="warning" @click="pause">Stop</c-button>
 
       <c-button @click="counter = 0">Reset</c-button>
-    </n-space>
+    </div>
   </div>
 </template>
 

diff --git a/src/tools/crontab-generator/crontab-generator.vue b/src/tools/crontab-generator/crontab-generator.vue
@@ -16,7 +16,7 @@
 
     <n-divider />
 
-    <n-space justify="center">
+    <div flex justify-center>
       <n-form :show-feedback="false" label-width="170" label-placement="left">
         <n-form-item label="Verbose">
           <n-switch v-model:value="cronstrueConfig.verbose" />
@@ -28,7 +28,7 @@
           <n-switch v-model:value="cronstrueConfig.dayOfWeekStartIndexZero" />
         </n-form-item>
       </n-form>
-    </n-space>
+    </div>
   </c-card>
   <c-card>
     <pre>
@@ -42,8 +42,8 @@
 * * * * * * command</pre
     >
 
-    <n-space v-if="styleStore.isSmallScreen" vertical>
-      <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" important:border-none>
+    <div v-if="styleStore.isSmallScreen">
+      <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" mb-3 important:border-none>
         <div>
           Symbol: <strong>{{ symbol }}</strong>
         </div>
@@ -60,7 +60,7 @@
           Equivalent: <strong>{{ equivalent }}</strong>
         </div>
       </c-card>
-    </n-space>
+    </div>
     <n-table v-else size="small">
       <thead>
         <tr>

diff --git a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
@@ -14,9 +14,9 @@
 
     <textarea-copyable :value="dockerCompose" language="yaml" />
 
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
       <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
-    </n-space>
+    </div>
 
     <div v-if="notComposable.length > 0">
       <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>

diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
@@ -1,7 +1,7 @@
 <template>
   <c-card title="Encrypt">
-    <n-space item-style="flex: 1 1 0">
-      <n-form-item label="Your text:" :show-feedback="false">
+    <div flex gap-3>
+      <n-form-item label="Your text:" :show-feedback="false" flex-1>
         <n-input
           v-model:value="cypherInput"
           type="textarea"
@@ -13,7 +13,7 @@
           spellcheck="false"
         />
       </n-form-item>
-      <n-space vertical>
+      <div flex flex-1 flex-col gap-2>
         <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text />
 
         <n-form-item label="Encryption algorithm:" :show-feedback="false">
@@ -22,8 +22,8 @@
             :options="Object.keys(algos).map((label) => ({ label, value: label }))"
           />
         </n-form-item>
-      </n-space>
-    </n-space>
+      </div>
+    </div>
     <n-form-item label="Your text encrypted:" :show-feedback="false" mt-5>
       <n-input
         :value="cypherOutput"
@@ -39,8 +39,8 @@
     </n-form-item>
   </c-card>
   <c-card title="Decrypt">
-    <n-space item-style="flex: 1 1 0">
-      <n-form-item label="Your encrypted text:" :show-feedback="false">
+    <div flex gap-3>
+      <n-form-item label="Your encrypted text:" :show-feedback="false" flex-1>
         <n-input
           v-model:value="decryptInput"
           type="textarea"
@@ -52,7 +52,7 @@
           spellcheck="false"
         />
       </n-form-item>
-      <n-space vertical>
+      <div flex flex-1 flex-col gap-2>
         <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text />
 
         <n-form-item label="Encryption algorithm:" :show-feedback="false">
@@ -61,8 +61,8 @@
             :options="Object.keys(algos).map((label) => ({ label, value: label }))"
           />
         </n-form-item>
-      </n-space>
-    </n-space>
+      </div>
+    </div>
     <n-form-item label="Your decrypted text:" :show-feedback="false" mt-5>
       <n-input
         :value="decryptOutput"

diff --git a/src/tools/eta-calculator/eta-calculator.vue b/src/tools/eta-calculator/eta-calculator.vue
@@ -6,46 +6,40 @@
       {{ endAt }}.
     </n-text>
     <n-divider />
-    <n-space item-style="flex:1 1 0">
-      <div>
-        <n-space item-style="flex:1 1 0">
-          <n-form-item label="Amount of element to consume">
-            <n-input-number v-model:value="unitCount" :min="1" />
-          </n-form-item>
-          <n-form-item label="The consumption started at">
-            <n-date-picker v-model:value="startedAt" type="datetime" />
-          </n-form-item>
-        </n-space>
+    <div flex gap-2>
+      <n-form-item label="Amount of element to consume" flex-1>
+        <n-input-number v-model:value="unitCount" :min="1" />
+      </n-form-item>
+      <n-form-item label="The consumption started at" flex-1>
+        <n-date-picker v-model:value="startedAt" type="datetime" />
+      </n-form-item>
+    </div>
 
-        <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
-          <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
-          <span style="margin: 0 10px">in</span>
-          <n-input-group>
-            <n-input-number v-model:value="timeSpan" :min="1" />
-            <n-select
-              v-model:value="timeSpanUnitMultiplier"
-              :options="[
-                { label: 'milliseconds', value: 1 },
-                { label: 'seconds', value: 1000 },
-                { label: 'minutes', value: 1000 * 60 },
-                { label: 'hours', value: 1000 * 60 * 60 },
-                { label: 'days', value: 1000 * 60 * 60 * 24 },
-              ]"
-            ></n-select>
-          </n-input-group>
-        </n-form-item>
+    <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
+      <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
+      <span mx-3>in</span>
+      <n-input-group>
+        <n-input-number v-model:value="timeSpan" :min="1" />
+        <n-select
+          v-model:value="timeSpanUnitMultiplier"
+          :options="[
+            { label: 'milliseconds', value: 1 },
+            { label: 'seconds', value: 1000 },
+            { label: 'minutes', value: 1000 * 60 },
+            { label: 'hours', value: 1000 * 60 * 60 },
+            { label: 'days', value: 1000 * 60 * 60 * 24 },
+          ]"
+        ></n-select>
+      </n-input-group>
+    </n-form-item>
 
-        <n-divider />
-        <n-space vertical>
-          <c-card>
-            <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
-          </c-card>
-          <c-card>
-            <n-statistic label="It will end ">{{ endAt }}</n-statistic>
-          </c-card>
-        </n-space>
-      </div>
-    </n-space>
+    <n-divider />
+    <c-card mb-2>
+      <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
+    </c-card>
+    <c-card>
+      <n-statistic label="It will end ">{{ endAt }}</n-statistic>
+    </c-card>
   </div>
 </template>