98 lines
3.5 KiB
Vue
98 lines
3.5 KiB
Vue
<template>
|
|
<form class="space-y-4" @submit.prevent="onSubmit">
|
|
<div>
|
|
<label class="block text-sm text-gray-600 mb-1">کلمه</label>
|
|
<input v-model="form.word" type="text" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring focus:border-primary" required />
|
|
</div>
|
|
<div class="flex items-center space-x-2 rtl:space-x-reverse">
|
|
<input id="is_correct" v-model="form.is_correct" type="checkbox" class="h-4 w-4 text-primary" />
|
|
<label for="is_correct" class="text-sm text-gray-700">درست است</label>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm text-gray-600 mb-1">ریشه</label>
|
|
<input v-model="form.stem" type="text" class="w-full border rounded px-3 py-2" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm text-gray-600 mb-1">اصل</label>
|
|
<input v-model="form.origin" type="text" class="w-full border rounded px-3 py-2" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm text-gray-600 mb-1">کلاس واژه</label>
|
|
<input v-model="wordClass" type="text" placeholder="مثال: noun, plural_noun" class="w-full border rounded px-3 py-2" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm text-gray-600 mb-1">برچسبها</label>
|
|
<input v-model="tagsString" type="text" placeholder="مثال: formal, literary" class="w-full border rounded px-3 py-2" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm text-gray-600 mb-1">زبان</label>
|
|
<input v-model="langString" type="text" placeholder="مثال: persian, arabic" class="w-full border rounded px-3 py-2" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm text-gray-600 mb-1">دامنه</label>
|
|
<input v-model="scopeString" type="text" placeholder="مثال: ادبیات, آموزش" class="w-full border rounded px-3 py-2" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm text-gray-600 mb-1">توضیح مدیر</label>
|
|
<textarea v-model="form.admin_description" rows="3" class="w-full border rounded px-3 py-2"></textarea>
|
|
</div>
|
|
<div class="pt-2">
|
|
<button type="submit" class="px-4 py-2 rounded bg-primary text-white hover:opacity-90">ذخیره</button>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'WordForm',
|
|
props: {
|
|
value: { type: Object, required: true }
|
|
},
|
|
data() {
|
|
return {
|
|
form: { ...this.value },
|
|
tagsStringLocal: (this.value.tags || []).join(', '),
|
|
langStringLocal: (this.value.lang || []).join(', '),
|
|
scopeStringLocal: (this.value.scope || []).join(', '),
|
|
wordClassLocal: (this.value.word_class || []).join(', ')
|
|
};
|
|
},
|
|
computed: {
|
|
tagsString: {
|
|
get() { return this.tagsStringLocal; },
|
|
set(v) { this.tagsStringLocal = v; this.form.tags = this.csvToArray(v); }
|
|
},
|
|
langString: {
|
|
get() { return this.langStringLocal; },
|
|
set(v) { this.langStringLocal = v; this.form.lang = this.csvToArray(v); }
|
|
},
|
|
scopeString: {
|
|
get() { return this.scopeStringLocal; },
|
|
set(v) { this.scopeStringLocal = v; this.form.scope = this.csvToArray(v); }
|
|
},
|
|
wordClass: {
|
|
get() { return this.wordClassLocal; },
|
|
set(v) { this.wordClassLocal = v; this.form.word_class = this.csvToArray(v); }
|
|
}
|
|
},
|
|
methods: {
|
|
csvToArray(v) {
|
|
return (v || '')
|
|
.split(',')
|
|
.map(s => s.trim())
|
|
.filter(Boolean);
|
|
},
|
|
onSubmit() {
|
|
this.$emit('submit', this.form);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|
|
|
|
|