-
Notifications
You must be signed in to change notification settings - Fork 27
/
FormField.vue
96 lines (83 loc) · 2.55 KB
/
FormField.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<template>
<default-field :field="field">
<template slot="field">
<input :id="field.name" type="text"
class="w-full form-control form-input form-input-bordered"
:class="errorClasses"
:placeholder="field.name"
v-bind="extraAttributes"
v-model="value"
/>
<p v-if="hasError" class="my-2 text-danger">
{{ firstError }}
</p>
</template>
</default-field>
</template>
<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova'
const slugify = require('speakingurl');
export default {
mixins: [FormField, HandlesValidationErrors],
props: ['resourceName', 'resourceId', 'field'],
/**
* Mount the component.
*/
mounted() {
Nova.$on('field-update-' + this.field.name, ({value}) => {
this.value = slugify(value);
})
},
computed: {
defaultAttributes() {
return {
type: this.field.type || 'text',
min: this.field.min,
max: this.field.max,
step: this.field.step,
pattern: this.field.pattern,
placeholder: this.field.placeholder || this.field.name,
class: this.errorClasses,
}
},
extraAttributes() {
const attrs = this.field.extraAttributes
return {
// Leave the default attributes even though we can now specify
// whatever attributes we like because the old number field still
// uses the old field attributes
...this.defaultAttributes,
...attrs,
}
},
},
methods: {
/*
* Generate the slug
*/
generateSlug(value) {
Nova.request().get('/nova-vendor/novaslugfield/slugify?str=' + encodeURI(value)).then(response => {
this.value = response.data.slug;
});
},
/*
* Set the initial, internal value for the field.
*/
setInitialValue() {
this.value = this.field.value || ''
},
/**
* Fill the given FormData object with the field's internal value.
*/
fill(formData) {
formData.append(this.field.attribute, this.value || '')
},
/**
* Update the field's internal value.
*/
handleChange(value) {
this.value = value
}
}
}
</script>