pixelfed/resources/assets/components/admin/partial/AdminSettingsInput.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>