Copy

<script setup lang="ts">
import CommaSeparatedFilter from "components/Filter/CommaSeparatedFilter.vue";
import { icons } from "utils/icons";

const props = defineProps<{
  modelValue: string[];
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: string[]): void;
  (e: "change"): void;
}>();

// host or net in CIDR notation or !host or !net in CIDR notation
const validateRegex =
  /^(!)?(?:(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|(?:[0-9a-fA-F]{1,4}:){1,7}[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,7}:|:(:[0-9a-fA-F]{1,4}){1,7}|::)(?:\/\d+)?$/;
</script>

<template>
  <CommaSeparatedFilter
    label="Source"
    :icon="icons.address"
    :model-value="props.modelValue"
    @update:model-value="emit('update:modelValue', $event)"
    @change="emit('change')"
    placeholder="192.168.1.0/24"
    inputClass="w-32"
    :validate-regex="validateRegex"
  />
</template>