mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-24 14:03:16 +00:00
75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div :class="[ isCard ? 'card shadow-none border card-body' : '' ]">
|
||
|
|
<div
|
||
|
|
class="form-group"
|
||
|
|
:class="[ isInline ? 'd-flex align-items-center gap-1' : 'mb-1' ]">
|
||
|
|
<label :for="elementId" class="font-weight-bold mb-0">{{ name }}</label>
|
||
|
|
<input
|
||
|
|
:id="elementId"
|
||
|
|
class="form-control form-control-muted mb-0"
|
||
|
|
:placeholder="placeholder"
|
||
|
|
:value="value"
|
||
|
|
@input="$emit('change', $event.target.value)"
|
||
|
|
:disabled="isDisabled" />
|
||
|
|
</div>
|
||
|
|
<p v-if="description && description.length" class="help-text small text-muted mb-0" v-html="description">
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
name: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
|
||
|
|
value: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
|
||
|
|
placeholder: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
|
||
|
|
description: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
|
||
|
|
isCard: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
|
||
|
|
isInline: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
|
||
|
|
isDisabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
elementId: {
|
||
|
|
get() {
|
||
|
|
let name = this.name;
|
||
|
|
name = name.toLowerCase();
|
||
|
|
name = name.replace(/[^a-z0-9 -]/g, ' ');
|
||
|
|
name = name.replace(/\s+/g, '-');
|
||
|
|
name = name.replace(/^-+|-+$/g, '');
|
||
|
|
return 'fec_' + name;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped="true">
|
||
|
|
.gap-1 {
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
</style>
|