mohadese namavar
122 lines
3.7 KiB
Vue
122 lines
3.7 KiB
Vue
<template>
|
|
<section class="seller-second-step">
|
|
<ul>
|
|
<li v-for="(_, key) in form.specs" :key="key">
|
|
<IconField iconPosition="left">
|
|
<InputText :id="key" placeholder v-model="form.specs[key]" />
|
|
<InputIcon class="isax isax-close-circle" @click="delete form.specs[key]" />
|
|
</IconField>
|
|
<label :for="key"> {{ key }} </label>
|
|
<small v-if="errors[key]">{{ errors[key] }}</small>
|
|
</li>
|
|
<li @click="handleClick()" v-ripple>
|
|
<span>{{ $t('addSpec') }}</span>
|
|
<i class="isax isax-box-add" />
|
|
</li>
|
|
</ul>
|
|
<div>
|
|
<Button v-bind="btns.prev.props" @click="step--" />
|
|
<Button v-bind="btns.next.props" :disabled="disabled" @click="next()" />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { dialog, t } = inject('service')
|
|
const { btns } = inject('init')
|
|
|
|
const form = inject('form')
|
|
const step = inject('step')
|
|
const disabled = computed(() => form.specs.length > 0)
|
|
const errors = ref({})
|
|
|
|
const next = () => {
|
|
errors.value = {}
|
|
Object.entries(form.specs).forEach(([key, value]) => {
|
|
if ([undefined, null, ''].includes(value))
|
|
errors.value[key] = t('required')
|
|
})
|
|
|
|
if (Object.keys(errors.value).length < 1)
|
|
step.value++;
|
|
}
|
|
|
|
const handleClick = () => {
|
|
dialog.show(resolveComponent('PanelSellerDialogAddSpec'), form)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.seller-second-step {
|
|
@apply w-full flex flex-col gap-8 lg:gap-[3.8rem];
|
|
|
|
ul {
|
|
@apply grid lg:grid-cols-3 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;
|
|
|
|
label {
|
|
@apply w-max absolute right-3 max-lg:translate-y-0.5 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 {
|
|
@apply w-full rounded-[0.6rem] border shadow-none border-[#CCCCCC] text-zinc-800 font-vazir rtl;
|
|
}
|
|
|
|
.p-input-icon {
|
|
@apply text-lg lg:text-xl h-max -translate-y-[20%] cursor-pointer;
|
|
}
|
|
|
|
&:has(input:focus),
|
|
&:has(input:not(:placeholder-shown)) {
|
|
label {
|
|
@apply -top-2 h-4;
|
|
@apply text-zinc-800 text-xs font-normal;
|
|
}
|
|
}
|
|
|
|
.p-inputnumber {
|
|
@apply w-full;
|
|
}
|
|
|
|
&:last-child {
|
|
@apply cursor-pointer border border-[#CCCCCC] rounded-[0.6rem] px-4 pointer-events-auto;
|
|
@apply flex justify-between items-center overflow-hidden relative;
|
|
|
|
span {
|
|
@apply text-neutral-400 text-sm lg:text-base font-medium font-vazir;
|
|
}
|
|
|
|
i {
|
|
@apply text-[#47B556] text-2xl;
|
|
}
|
|
}
|
|
|
|
small {
|
|
@apply text-red-500 font-vazir;
|
|
}
|
|
|
|
&:has(small) * {
|
|
@apply border-red-500 #{!important};
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
&>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> |