anahita-front/components/panel/seller/step/First.vue

<template>
    <section class="seller-first-step">
        <ul>
            <li v-for="({ is, props, label }, key) in fields.first" :key="key">
                <Editor v-if="key == 'description'" v-bind="props" v-model="form[key]"/>
                <component v-else :is="is" v-bind="props" v-model="form[key]" />
                <label :for="key"> {{ label }} </label>
                <small v-if="errors[key]">{{ errors[key] }}</small>
            </li>
        </ul>
        <div>
            <Button v-bind="btns.next.props" @click="next()" />
        </div>
    </section>
</template>

<script setup>
import Editor from 'primevue/editor';

const { t } = inject('service')
const { fields, btns } = inject('init')
const form = inject('form')
const step = inject('step')
const { brands } = inject('data')
const errors = ref({})

fields.first.brandID.props.options = brands
const categories = useCategoriesStore()

fields.first.subCategory.props.options = computed(() => {
    let items = []
    categories.items.forEach((item) => {
        if (item.sub) {
            item.sub.forEach((item2) => {
                if (item2._id == form.category) {
                    items = item2.sub ?? [item2]
                }
            })
        }
    })
    return items;
})

fields.first.minBuy.props.disabled = computed(() => !form.boxSeller)
fields.first.maxBuy.props.disabled = computed(() => !form.boxSeller)
fields.first.itemInBox.props.disabled = computed(() => !form.boxSeller)

if (form.boxSeller) {
    const { min = 1, max = 20 } = form?.orderRange
    form.minBuy = min
    form.maxBuy = max
}

watch(
    computed(() => Object.assign({}, form)),
    (value, old) => {
        Object.keys(errors.value).forEach((key) => {
            if (value[key] != old[key])
                delete errors.value[key]
        })
    },
    { deep: true })

const next = () => {
    errors.value = {}
    Object.keys(fields.first).forEach((key) => {
        if (!['localSend', 'boxSeller', 'warranty'].includes(key) && !fields.first[key].props.disabled) {
            if ([undefined, null, ''].includes(form[key])) {
                errors.value[key] = t('required')
            }
        }
    })
    if (Object.keys(errors.value).length < 1)
        step.value++;
}
</script>

<style lang="scss">
.seller-first-step {
    @apply w-full flex flex-col pb-20 gap-8 lg:gap-[3.8rem];

    &>ul {
        @apply grid grid-cols-2 lg:grid-cols-4 gap-x-3 gap-y-6 lg:gap-x-6 lg:gap-y-10 w-full max-w-full;

        li {
            @apply w-full h-14 relative max-xl:col-span-2;

            label {
                @apply w-max absolute right-3 top-4 px-1 bg-white transition-['top'] select-none;
                @apply text-neutral-400 text-sm lg:text-base font-medium font-vazir cursor-text pointer-events-none;
            }

            input,
            textarea {
                @apply rtl w-full rounded-[0.6rem] border shadow-none border-[#CCCCCC] text-zinc-800 font-vazir;
            }

            &:has(input:focus),
            &:has(textarea:focus),
            &:has(.p-inputwrapper-filled),
            &:has(input:not(:placeholder-shown)),
            &:has(textarea:not(:placeholder-shown)) {
                label {
                    @apply -top-2 h-4;
                    @apply text-zinc-800 text-xs font-normal;
                }
            }

            .p-dropdown,
            .p-inputnumber {
                @apply w-full;

                input {
                    @apply ltr text-left;
                }

            }

            .p-dropdown-label {
                @apply font-vazir pt-4;
            }

            &:nth-of-type(2) {
                label {
                    @apply left-3 right-auto;
                }
            }

            &:nth-of-type(1),
            &:nth-of-type(2) {
                @apply col-span-2;
            }

            &:nth-of-type(11) {
                @apply col-span-2 lg:col-span-3 row-span-3 h-full max-lg:order-last;

                textarea {
                    @apply grow h-full;
                }
            }

            &:has(.p-checkbox) {
                @apply border border-[#CCCCCC] rounded-[0.6rem] flex flex-row-reverse justify-between items-center px-4;

                label {
                    @apply static text-sm lg:text-base text-neutral-400 h-max pointer-events-auto cursor-pointer #{!important};
                }

                .p-checkbox {
                    @apply w-[1.1rem] lg:w-5 shrink-0;
                }
            }

            &:nth-of-type(9),
            &:nth-of-type(10),
            &:nth-of-type(12),
            &:nth-of-type(13) {
                @apply max-lg:col-span-1;
            }

            small {
                @apply text-red-500 font-vazir;
            }

            &:has(small) * {
                @apply border-red-500 #{!important};
            }

            &:has(.p-overlay-open)::after {
                @apply content-['_'] inset-0 fixed bg-black/20 z-[1];
            }

            &:has(.p-disabled),
            &:has([disabled]) {
                @apply max-lg:hidden lg:invisible;
            }

            

            .p-editor-content{
                @apply rtl text-right;
            }
        }
    }

    &>div {
        @apply inset-x-0 bottom-0 flex gap-3 w-full lg:w-max self-end;
        @apply max-lg:fixed max-lg:border-t max-lg:shadow-[0_-2px_5px_#0000000a];
        @apply h-[4.8rem] px-6 pt-3 lg:p-0 lg:h-max bg-white;

        &>button {
            @apply w-full h-[2.9rem] lg:w-[11.4rem] lg:h-14 #{!important};

            .p-button-label {
                @apply text-sm lg:text-xl font-medium font-vazir;
            }
        }
    }

}
</style>