|
@@ -1,34 +1,59 @@ |
|
|
<!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ --> |
|
|
<!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ --> |
|
|
<template> |
|
|
<template> |
|
|
<div v-if="field" class="form-group"> |
|
|
|
|
|
|
|
|
<div v-if="field" class="form-group"> |
|
|
|
|
|
<label :htmlFor="field.name"> |
|
|
|
|
|
{{ messages[messagePrefix + field.name] }}: |
|
|
|
|
|
</label> |
|
|
|
|
|
|
|
|
<label :htmlFor="field">{{messages[messagePrefix+field.name]}}:</label> |
|
|
|
|
|
|
|
|
|
|
|
<span v-if="field.mode === 'readOnly' && field.control === 'flag'"><b>{{messages['message_'+thing[field.name]]}}</b></span> |
|
|
|
|
|
<span v-else-if="field.mode === 'readOnly'"><b>{{thing[field.name]}}</b></span> |
|
|
|
|
|
<textarea v-else-if="field.control === 'textarea' || (textLimit != null && (''+thing[field.name]).length > textLimit)" v-model="thing[field.name]" class="form-control"></textarea> |
|
|
|
|
|
<input v-else-if="field.control === 'flag'" type="checkbox" v-model="thing[field.name]" :name="field" class="form-control" /> |
|
|
|
|
|
<input v-else type="text" v-model="thing[field.name]" :name="field" class="form-control" /> |
|
|
|
|
|
|
|
|
|
|
|
<small v-if="messages['!'+messagePrefix+field.name+'_description']">{{messages[messagePrefix+field.name+'_description']}}</small> |
|
|
|
|
|
<!-- <div v-if="errors.has(field)" class="invalid-feedback d-block">{{ errors.first(field) }}</div>--> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<span v-if="field.mode === 'readOnly' && field.control === 'flag'"> |
|
|
|
|
|
<b>{{ messages["message_" + thing[field.name]] }}</b> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span v-else-if="field.mode === 'readOnly'"> |
|
|
|
|
|
<b>{{ thing[field.name] }}</b> |
|
|
|
|
|
</span> |
|
|
|
|
|
<textarea |
|
|
|
|
|
v-else-if=" |
|
|
|
|
|
field.control === 'textarea' || |
|
|
|
|
|
(textLimit != null && ('' + thing[field.name]).length > textLimit) |
|
|
|
|
|
" |
|
|
|
|
|
v-model="thing[field.name]" |
|
|
|
|
|
class="form-control" |
|
|
|
|
|
></textarea> |
|
|
|
|
|
<input |
|
|
|
|
|
v-else-if="field.control === 'flag'" |
|
|
|
|
|
type="checkbox" |
|
|
|
|
|
v-model="thing[field.name]" |
|
|
|
|
|
:name="field.name" |
|
|
|
|
|
class="form-control" |
|
|
|
|
|
/> |
|
|
|
|
|
<input |
|
|
|
|
|
v-else |
|
|
|
|
|
type="text" |
|
|
|
|
|
v-model="thing[field.name]" |
|
|
|
|
|
:name="field.name" |
|
|
|
|
|
class="form-control" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<small v-if="messages['!' + messagePrefix + field.name + '_description']">{{ |
|
|
|
|
|
messages[messagePrefix + field.name + "_description"] |
|
|
|
|
|
}}</small> |
|
|
|
|
|
<!-- <div v-if="errors.has(field)" class="invalid-feedback d-block">{{ errors.first(field) }}</div>--> |
|
|
|
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { mapState, mapActions } from 'vuex'; |
|
|
|
|
|
import { util } from '~/_helpers' |
|
|
|
|
|
|
|
|
import { mapState, mapActions } from "vuex"; |
|
|
|
|
|
import { util } from "~/_helpers"; |
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
|
props: { |
|
|
|
|
|
messagePrefix: String, |
|
|
|
|
|
field: Object, |
|
|
|
|
|
thing: Object, |
|
|
|
|
|
textLimit: Number |
|
|
|
|
|
}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
...mapState('system', ['messages']) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
|
props: { |
|
|
|
|
|
messagePrefix: String, |
|
|
|
|
|
field: Object, |
|
|
|
|
|
thing: Object, |
|
|
|
|
|
textLimit: Number, |
|
|
|
|
|
}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
...mapState("system", ["messages"]), |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
|
|
|
</script> |