175 lines
4 KiB
Vue
175 lines
4 KiB
Vue
<template>
|
|
<div class="form chat-bubble agent">
|
|
<form @submit.prevent="onSubmit">
|
|
<div v-for="item in items" :key="item.key" class="form-block">
|
|
<label>{{ item.label }}</label>
|
|
<input
|
|
v-if="item.type === 'email' || item.type === 'text'"
|
|
v-model="formValues[item.name]"
|
|
:type="item.type"
|
|
:name="item.name"
|
|
:placeholder="item.placeholder"
|
|
:disabled="!!submittedValues.length"
|
|
/>
|
|
<textarea
|
|
v-else-if="item.type === 'text_area'"
|
|
v-model="formValues[item.name]"
|
|
:name="item.name"
|
|
:placeholder="item.placeholder"
|
|
:disabled="!!submittedValues.length"
|
|
/>
|
|
<select
|
|
v-else-if="item.type === 'select'"
|
|
v-model="formValues[item.name]"
|
|
>
|
|
<option
|
|
v-for="option in item.options"
|
|
:key="option.key"
|
|
:value="option.value"
|
|
>
|
|
{{ option.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<button
|
|
v-if="!submittedValues.length"
|
|
class="button block"
|
|
type="submit"
|
|
:disabled="!isFormValid"
|
|
:style="{ background: widgetColor, borderColor: widgetColor }"
|
|
>
|
|
{{ buttonLabel || $t('COMPONENTS.FORM_BUBBLE.SUBMIT') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
export default {
|
|
props: {
|
|
buttonLabel: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
submittedValues: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
formValues: {},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
widgetColor: 'appConfig/getWidgetColor',
|
|
}),
|
|
isFormValid() {
|
|
return this.items.reduce((acc, { name }) => {
|
|
return !!this.formValues[name] && acc;
|
|
}, true);
|
|
},
|
|
},
|
|
mounted() {
|
|
if (this.submittedValues.length) {
|
|
this.updateFormValues();
|
|
} else {
|
|
this.setFormDefaults();
|
|
}
|
|
},
|
|
methods: {
|
|
onSubmit() {
|
|
if (!this.isFormValid) {
|
|
return;
|
|
}
|
|
this.$emit('submit', this.formValues);
|
|
},
|
|
buildFormObject(formObjectArray) {
|
|
return formObjectArray.reduce((acc, obj) => {
|
|
return {
|
|
...acc,
|
|
[obj.name]: obj.value || obj.default,
|
|
};
|
|
}, {});
|
|
},
|
|
updateFormValues() {
|
|
this.formValues = this.buildFormObject(this.submittedValues);
|
|
},
|
|
setFormDefaults() {
|
|
this.formValues = this.buildFormObject(this.items);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~widget/assets/scss/variables.scss';
|
|
|
|
.form {
|
|
padding: $space-normal;
|
|
width: 80%;
|
|
|
|
.form-block {
|
|
width: 90%;
|
|
padding-bottom: $space-small;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-weight: $font-weight-medium;
|
|
padding: $space-smaller 0;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
border-radius: $space-smaller;
|
|
border: 1px solid $color-border;
|
|
display: block;
|
|
font-family: inherit;
|
|
font-size: $font-size-default;
|
|
line-height: 1.5;
|
|
padding: $space-one;
|
|
width: 100%;
|
|
|
|
&:disabled {
|
|
background: $color-background-light;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
}
|
|
|
|
select {
|
|
width: 110%;
|
|
padding: $space-smaller;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
border: 1px solid $color-border;
|
|
border-radius: $space-smaller;
|
|
background-color: $color-white;
|
|
font-family: inherit;
|
|
font-size: $space-normal;
|
|
font-weight: normal;
|
|
line-height: 1.5;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
|
|
background-origin: content-box;
|
|
background-position: right -1.6rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 9px 6px;
|
|
padding-right: 2.4rem;
|
|
}
|
|
|
|
.button {
|
|
font-size: $font-size-default;
|
|
}
|
|
}
|
|
</style>
|