feat(new tool): IPv4/6 CIDR to IP Range

IPv4/6 CIDR to IP Range
Reverse fof #802

src/tools/index.ts

@@ -77,6 +77,7 @@ import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
 import { tool as yamlViewer } from './yaml-viewer';
+import { tool as ipCidrToRange } from './ip-cidr-to-range';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -147,7 +148,15 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      ipCidrToRange,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+    ],
   },
   {
     name: 'Math',

src/tools/ip-cidr-to-range/index.ts

@@ -0,0 +1,12 @@
+import { Binary } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Ipv4/6 CIDR to IP Range Calculator',
+  path: '/ip-cidr-to-range',
+  description: 'Calculate IP Range from a CIDR (IPv4/6)',
+  keywords: ['ipv4', 'ipv6', 'cidr'],
+  component: () => import('./ip-cidr-to-range.vue'),
+  icon: Binary,
+  createdAt: new Date('2024-01-10'),
+});

src/tools/ip-cidr-to-range/ip-cidr-to-range.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import isCidr from 'is-cidr';
+import { expand } from 'cidr-tools';
+import { useValidation } from '@/composable/validation';
+
+const rawCIDR = useStorage('ip-cidr-to-range:cidr', '192.168.1.0/24');
+
+const result = computed(() => {
+  const ips = expand(rawCIDR.value);
+  if (!ips || !ips.length) {
+    return undefined;
+  }
+
+  return { startIpAddress: ips.slice(0, 1)[0], endIpAddress: ips.slice(-1)[0] };
+});
+
+const cidrValidation = useValidation({
+  source: rawCIDR,
+  rules: [{ message: 'Invalid ipv4/6 CIDR', validator: cidr => isCidr(cidr) }],
+});
+
+const showResult = computed(() => cidrValidation.isValid && result.value !== undefined);
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="rawCIDR"
+      label="IPv4/6 CIDR (ie, 1.0.0.0/23)"
+      placeholder="IPv4/6 CIDR (ie, 1.0.0.0/23)"
+      :validation="cidrValidation"
+      clearable
+    />
+
+    <c-card v-if="showResult" title="IPv4/6 range" mt-4>
+      <input-copyable
+        label="Start IP Address"
+        label-position="left"
+        label-width="150px"
+        label-align="right"
+
+        :value="result?.startIpAddress"
+        disabled mb-2
+      />
+      <input-copyable
+        label="End IP Address"
+        label-position="left"
+        label-width="150px"
+        label-align="right"
+
+        :value="result?.endIpAddress"
+        disabled mb-2
+      />
+    </c-card>
+  </div>
+</template>