Untitled

<template>
    <div class="flex justify-between">
        <label v-if="label" class="block text-sm font-medium text-gray-700 mb-1" :for="getSlug(label)">{{ label }}</label>
        <span v-if="optional" class="text-xs text-gray-500">Optional</span>
    </div>

    <template v-if="type === 'text' && !editor">
        <input
            v-bind="$attrs"
            :id="getSlug(label)"
            class="focus:ring-yellow-400 focus:border-secondary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
            :type="type"
            v-model="value1"
            :placeholder="placeholder"
            :autocomplete="autocomplete"
            :disabled="disabled"
            @input="updateValue($event.target.value)"
        />
    </template>

    <template v-if="type === 'text' && editor">
        <textarea
            v-bind="$attrs"
            :id="getSlug(label)"
            v-model="value1"
            class="shadow-sm block w-full focus:ring-yellow-400 focus:border-secondary sm:text-sm border-gray-300 rounded-md"
            :rows="rows"
            :placeholder="placeholder"
            :autocomplete="autocomplete"
            :disabled="disabled"
            @input="updateValue($event.target.value)"
        ></textarea>
    </template>

    <template v-if="type === 'select'">
        <select
            :id="getSlug(label)"
            :value="value"
            class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-yellow-400 focus:border-secondary sm:text-sm rounded-md"
            :disabled="disabled"
            @input="updateValue($event.target.value)">
            <option v-for="(option, optionKey) in options" :value="getOption(option, 'value', optionKey)">
                {{ getOption(option, 'label') }}
            </option>
        </select>
    </template>

    <template v-if="type === 'datepicker'">
        <div :id="getSlug(label)">
            <ADatePicker v-bind="$attrs" v-model="value1" :placeholder="placeholder !== '' ? placeholder : null" @update:modelValue="updateValue"/>
        </div>
    </template>

    <template v-if="type === 'dropdown'">
        <!-- <ADropdown :id="getSlug(label)" v-bind="$attrs" v-model="value1" @update:modelValue="updateValue" /> -->
    </template>

    <template v-if="type === 'filepicker'">
        <AFilePicker v-model="value1" @update:modelValue="updateValue" v-bind="$attrs" />
    </template>

    <template v-if="type === 'toggle'">
        <Toggle :id="getSlug(label)" v-bind="$attrs" v-model="value1" :label="$attrs.toggleLabel" :value="value" @update:value="updateValue"/>
    </template>

    <template v-if="type === 'autocomplete' && $attrs?.multiple">
        <AutocompleteMulti v-bind="$attrs" :options="options" :placeholder="placeholder" v-model="value1" :defaultLabel="$attrs.defaultLabel" @update:modelValue="updateSelectValue" :query1="query" :filter1="filter1" />
    </template>

    <template v-if="type === 'autocomplete' && !$attrs?.multiple">
        <Autocomplete v-bind="$attrs" :options="options" :placeholder="placeholder" v-model="value1" :defaultLabel="$attrs.defaultLabel" @update:modelValue="updateSelectValue" />
    </template>

    <div v-if="error" class="mt-2 text-sm text-red-600">{{ error }}</div>
</template>

<script>
import uniqueId from "lodash/uniqueId";
import isEmpty from "lodash/isEmpty";
import ADatePicker from "@/Components/ADatePicker.vue";
import AFilePicker from "@/Components/AFilePicker.vue";
import Toggle from "@/Components/Toggle.vue";
import Autocomplete from "@/Components/Autocomplete.vue";
import AutocompleteMulti from "@/Components/AutocompleteMulti.vue";

export default {
    components: {
        ADatePicker,
        AFilePicker,
        Toggle,
        Autocomplete,
        AutocompleteMulti,
    },
    props: {
        query: {
            type: Object,
        },
        filter1: {
            type: Object
        },
        value: [String, Number, Boolean, Array],
        label: {
            type: String,
            default: '',
            required: false
        },
        type: {
            type: String,
            default: 'text',
            required: false
        },
        options: {
            type: [Array, Object],
            default: [],
            required: false
        },
        rows: {
            type: String,
            default: "2",
            required: false
        },
        error: {
            type: [String, Boolean],
            default: false,
            required: false
        },
        autocomplete: {
            type: String,
            default: 'none',
            required: false
        },
        placeholder: {
            type: String,
            default: '',
            required: false
        },
        disabled: {
            type: Boolean,
            default: false,
            required: false
        },
        optional: {
            type: Boolean,
            default: false,
            required: false
        },
        editor: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    emits: ['update:value'],
    data() {
        return {
            nonInputFields: ['select', 'textarea', 'datepicker', 'dropdown', 'toggle', 'filepicker', 'message', 'autocomplete', 'address'],
            value1: this.value
        }
    },
    mounted() {
        if (this.type === 'select' && !this.value && !isEmpty(this.options)) {
            if (Array.isArray(this.options)) {
                this.$emit('update:value', this.getOption(this.options[0], 'value'));
            } else {
                this.$emit('update:value', Object.keys(this.options)[0]);
            }
        }
    },
    methods: {
        updateValue1: function () {
            this.$emit('update:value', this.value1)
        },
        updateValue: function (value) {
            this.$emit('update:value', value)
        },
        updateSelectValue: function (option) {
            if (Array.isArray(option)) {
                const values = option.map(item => item.value !== null ? item.value : null).filter(value => value !== null);
                this.$emit('update:value', values)
            } else
                this.$emit('update:value', option.value);
        },
        getSlug(value) {
            if (!value) {
                value = uniqueId('ff_label_');
            }
            return value.replace(/\s+/g, '-').toLowerCase();
        },
        getOption(data, key, optionKey = null) {
            if (typeof data === 'object' && data !== null) {
                return data[key];
            }

            if (optionKey) return optionKey;

            return data;
        }
    }
}
</script>