114 lines
3.8 KiB
Vue
114 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import FormCheckRadio from '@/Components/FormCheckRadio.vue';
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
|
import FormControl from '@/Components/FormControl.vue';
|
|
import { mdiPlusCircle } from '@mdi/js';
|
|
const props = defineProps({
|
|
options: {
|
|
type: Object,
|
|
default: () => { },
|
|
},
|
|
allowManualAdding: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
manualAddingPlaceholder: {
|
|
type: String,
|
|
default: 'Add manually',
|
|
required: false,
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'checkbox',
|
|
validator: (value: string) => ['checkbox', 'radio', 'switch'].includes(value),
|
|
},
|
|
componentClass: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
isColumn: Boolean,
|
|
modelValue: {
|
|
type: [Array, String, Number, Boolean, Object],
|
|
default: null,
|
|
},
|
|
});
|
|
const emit = defineEmits(['update:modelValue']);
|
|
const computedValue = computed({
|
|
// get: () => props.modelValue,
|
|
get: () => {
|
|
// const ids = props.modelValue.map((obj) => obj.id);
|
|
// return ids;
|
|
if (Array.isArray(props.modelValue)) {
|
|
if (props.modelValue.every((item) => typeof item === 'number')) {
|
|
return props.modelValue;
|
|
} else if (props.modelValue.every((item) => hasIdAttribute(item))) {
|
|
const ids = props.modelValue.map((obj) => obj.id.toString());
|
|
return ids;
|
|
}
|
|
return props.modelValue;
|
|
}
|
|
// return props.modelValue;
|
|
},
|
|
set: (value) => {
|
|
emit('update:modelValue', value);
|
|
},
|
|
});
|
|
|
|
// Define a type guard to check if an object has an 'id' attribute
|
|
// function hasIdAttribute(obj: any): obj is { id: any } {
|
|
// return typeof obj === 'object' && 'id' in obj;
|
|
// }
|
|
|
|
const hasIdAttribute = (obj: any): obj is { id: any } => {
|
|
return typeof obj === 'object' && 'id' in obj;
|
|
};
|
|
|
|
const newOption = ref<string>('');
|
|
const addOption = () => {
|
|
if (newOption.value && !props.options[newOption.value]) {
|
|
props.options[newOption.value] = newOption.value;
|
|
newOption.value = '';
|
|
}
|
|
};
|
|
|
|
const inputElClass = computed(() => {
|
|
const base = [
|
|
'px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full',
|
|
'dark:placeholder-gray-400',
|
|
'h-12',
|
|
'border',
|
|
'bg-transparent'
|
|
// props.isReadOnly ? 'bg-gray-50 dark:bg-slate-600' : 'bg-white dark:bg-slate-800',
|
|
];
|
|
// if (props.icon) {
|
|
// base.push('pl-10');
|
|
// }
|
|
return base;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-start flex-wrap -mb-3" :class="{ 'flex-col': isColumn }">
|
|
<!-- :input-value="key" -->
|
|
<!-- :label="value" -->
|
|
<!-- :input-value="value.id"
|
|
:label="value.name" -->
|
|
<div v-if="allowManualAdding && type === 'checkbox'" class="flex items-center mt-2 mb-2 relative">
|
|
<input v-model="newOption" :placeholder="manualAddingPlaceholder" :class="inputElClass"
|
|
@keydown.prevent.enter="addOption" />
|
|
<svg v-show="newOption.length >= 2" @click.prevent="addOption" xmlns="http://www.w3.org/2000/svg"
|
|
class="w-6 h-6 absolute right-2 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500"
|
|
viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-6H5v-2h6V5h2v6h6v2h-6v6z" />
|
|
</svg>
|
|
</div>
|
|
<FormCheckRadio v-for="(value, key) in options" :key="key" v-model="computedValue" :type="type" :name="name"
|
|
:input-value="key" :label="value" :class="componentClass" />
|
|
</div>
|
|
</template>
|