pixelfed/resources/assets/components/admin/partial/AdminSettingsInput.vue
2024-03-14 05:07:49 -06:00

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>