<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps<{
  modelValue?: string,
  affix?: string,
  default?: string[]
}>()
const AFFIX = props.affix ?? ';'
const emits = defineEmits(["update:modelValue"])

const value = ref<string[] | null>((!props.modelValue) ? (props.default ?? []) : props.modelValue.split(AFFIX))
// console.log('value.value :>> ', value.value);

const change = (val?: string[]) => {
  value.value = val === undefined ? null : val
  emits("update:modelValue", val?.join(AFFIX) ?? null)
}

</script>

<template>
  <slot :value="value" :change="change"></slot>
</template>
