feat: add label for units

components.d.ts

@@ -133,15 +133,18 @@ declare module '@vue/runtime-core' {
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']

src/tools/data-storage-unit-converter/data-storage-unit-converter.vue

@@ -6,9 +6,34 @@ const input = ref<{ size: string; unit: string }>({ size: '0', unit: 'KB' });
 const output = ref<{ unit: string; precision: number; appendUnit: boolean }>({ unit: 'MB', precision: 3, appendUnit: false });
 
 const allUnits = [
-  'iB', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB',
+  { value: 'B', label: 'Bytes (B)' },
-  'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB',
+  { value: 'b', label: 'Bits (bit)' },
-  'b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'];
+  { value: 'iB', label: 'Bibytes (iB)' },
+  { value: 'KB', label: 'Kilobytes (KB)' },
+  { value: 'Kb', label: 'Kilobits (Kbit)' },
+  { value: 'KiB', label: 'Kibibytes (KiB)' },
+  { value: 'MB', label: 'Megabytes (MB)' },
+  { value: 'Mb', label: 'Megabits (Mbit)' },
+  { value: 'MiB', label: 'Mebibytes (MiB)' },
+  { value: 'GB', label: 'Gigabytes (GB)' },
+  { value: 'Gb', label: 'Gigabits (Gbit)' },
+  { value: 'GiB', label: 'Gibibytes (GiB)' },
+  { value: 'TB', label: 'Terabytes (TB)' },
+  { value: 'Tb', label: 'Terabits (Tbit)' },
+  { value: 'TiB', label: 'Tebibytes (TiB)' },
+  { value: 'PB', label: 'Petabytes (PB)' },
+  { value: 'Pb', label: 'Petabits (Pbit)' },
+  { value: 'PiB', label: 'Pebibytes (PiB)' },
+  { value: 'EB', label: 'Exabytes (EB)' },
+  { value: 'Eb', label: 'Exabits (Ebit)' },
+  { value: 'EiB', label: 'Exbibytes (EiB)' },
+  { value: 'ZB', label: 'Zettabytes (ZB)' },
+  { value: 'Zb', label: 'Zettabits (Zbit)' },
+  { value: 'ZiB', label: 'Zebibytes (ZiB)' },
+  { value: 'YB', label: 'Yottabytes (YB)' },
+  { value: 'Yb', label: 'Yottabits (Ybit)' },
+  { value: 'YiB', label: 'Yobibytes (YiB)' },
+];
 
 const convertedValue = computed(() => {
   try {
@@ -51,7 +76,7 @@ const convertedValue = computed(() => {
         />
 
         <n-form-item label="Precision:" label-placement="left">
-          <n-input-number v-model:value="output.precision" placeholder="Precision..." :max="10" :min="0" />
+          <n-input-number v-model:value="output.precision" style="width:100px" placeholder="Precision..." :max="10" :min="0" />
         </n-form-item>
 
         <n-checkbox v-model:checked="output.appendUnit">

src/tools/data-transfer-rate-converter/data-transfer-rate-converter.vue

@@ -4,9 +4,36 @@ import { type AllSupportedUnits, type BitsUnits, displayStorageAndRateUnits } fr
 import { amountTransferable, neededRate, transferTimeSeconds } from './data-transfer-rate-converter.service';
 
 const allStorateUnits = [
-  'iB', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB',
+  { value: 'B', label: 'Bytes (B)' },
-  'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  { value: 'iB', label: 'Bibytes (iB)' },
-const allBitsUnits = ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'];
+  { value: 'KB', label: 'Kilobytes (KB)' },
+  { value: 'KiB', label: 'Kibibytes (KiB)' },
+  { value: 'MB', label: 'Megabytes (MB)' },
+  { value: 'MiB', label: 'Mebibytes (MiB)' },
+  { value: 'GB', label: 'Gigabytes (GB)' },
+  { value: 'GiB', label: 'Gibibytes (GiB)' },
+  { value: 'TB', label: 'Terabytes (TB)' },
+  { value: 'TiB', label: 'Tebibytes (TiB)' },
+  { value: 'PB', label: 'Petabytes (PB)' },
+  { value: 'PiB', label: 'Pebibytes (PiB)' },
+  { value: 'EB', label: 'Exabytes (EB)' },
+  { value: 'EiB', label: 'Exbibytes (EiB)' },
+  { value: 'ZB', label: 'Zettabytes (ZB)' },
+  { value: 'ZiB', label: 'Zebibytes (ZiB)' },
+  { value: 'YB', label: 'Yottabytes (YB)' },
+  { value: 'YiB', label: 'Yobibytes (YiB)' },
+];
+const allBitsUnits = [
+  { value: 'b', label: 'Bits (bit)' },
+  { value: 'Kb', label: 'Kilobits (Kbit)' },
+  { value: 'Mb', label: 'Megabits (Mbit)' },
+  { value: 'Gb', label: 'Gigabits (Gbit)' },
+  { value: 'Tb', label: 'Terabits (Tbit)' },
+  { value: 'Pb', label: 'Petabits (Pbit)' },
+  { value: 'Eb', label: 'Exabits (Ebit)' },
+  { value: 'Zb', label: 'Zettabits (Zbit)' },
+  { value: 'Yb', label: 'Yottabits (Ybit)' },
+];
 
 function convertToTimeDisplay(seconds: number) {
   if (seconds === 0) {