refactor: improvements and fixes

components/Project/Create/Categories/BasicInfo.vue

@@ -68,35 +68,33 @@ defineExpose({
 
 <template>
   <div mt-24px>
-    <ClientOnly>
-      <ProjectCreateComponentsSelectChips
-        v-model="categories"
-        label="Categories"
-        required
-        :options="categoriesData?.map(cat => ({ label: cat.name, value: cat.id }))"
-        placeholder="Add category"
-        hint="Choose categories that fits your project"
-        :error="categoriesError"
-      />
-      <ProjectCreateComponentsSelectChips
-        v-model="usecases"
-        label="Use-cases"
-        required
-        :options="usecasesData?.map(uc => ({ label: uc.name, value: uc.id }))"
-        placeholder="Add use-case"
-        hint="What can be your project used for?"
-        :error="usecasesError"
-      />
-      <ProjectCreateComponentsSelectChips
-        v-model="ecosystems"
-        label="Ecosystems"
-        required
-        :options="ecosystemsData?.map(ec => ({ label: ec.name, value: ec.id }))"
-        placeholder="Add ecosystem"
-        hint="Choose ecosystems that is your project part of"
-        :error="ecosystemsError"
-      />
-    </ClientOnly>
+    <ProjectCreateComponentsSelectChips
+      v-model="categories"
+      label="Categories"
+      required
+      :options="categoriesData?.map(cat => ({ label: cat.name, value: cat.id }))"
+      placeholder="Add category"
+      hint="Choose categories that fits your project"
+      :error="categoriesError"
+    />
+    <ProjectCreateComponentsSelectChips
+      v-model="usecases"
+      label="Use-cases"
+      required
+      :options="usecasesData?.map(uc => ({ label: uc.name, value: uc.id }))"
+      placeholder="Add use-case"
+      hint="What can be your project used for?"
+      :error="usecasesError"
+    />
+    <ProjectCreateComponentsSelectChips
+      v-model="ecosystems"
+      label="Ecosystems"
+      required
+      :options="ecosystemsData?.map(ec => ({ label: ec.name, value: ec.id }))"
+      placeholder="Add ecosystem"
+      hint="Choose ecosystems that is your project part of"
+      :error="ecosystemsError"
+    />
     <ProjectCreateComponentsInput
       v-model="description"
       lg="w-1/2"

pages/project/[id]/edit.vue

@@ -31,15 +31,15 @@ if (!project.value) {
 }
 
 const tabs = reactive([
-  { label: 'Basic Info', value: 'basic_info', component: ProjectCreateCategoriesBasicInfo },
-  { label: 'Assets', value: 'assets', component: ProjectCreateCategoriesAssets },
-  { label: 'Links', value: 'links', component: ProjectCreateCategoriesLinks },
-  { label: 'Technology', value: 'technology', component: ProjectCreateCategoriesTechnology },
-  { label: 'Privacy', value: 'privacy', component: ProjectCreateCategoriesPrivacy },
-  { label: 'Security', value: 'security', component: ProjectCreateCategoriesSecurity },
-  { label: 'Team', value: 'team', component: ProjectCreateCategoriesTeam },
-  { label: 'Funding', value: 'funding', component: ProjectCreateCategoriesFunding },
-  { label: 'History', value: 'history', component: ProjectCreateCategoriesHistory },
+  { label: 'Basic Info', value: 'basic_info', component: markRaw(ProjectCreateCategoriesBasicInfo) },
+  { label: 'Assets', value: 'assets', component: markRaw(ProjectCreateCategoriesAssets) },
+  { label: 'Links', value: 'links', component: markRaw(ProjectCreateCategoriesLinks) },
+  { label: 'Technology', value: 'technology', component: markRaw(ProjectCreateCategoriesTechnology) },
+  { label: 'Privacy', value: 'privacy', component: markRaw(ProjectCreateCategoriesPrivacy) },
+  { label: 'Security', value: 'security', component: markRaw(ProjectCreateCategoriesSecurity) },
+  { label: 'Team', value: 'team', component: markRaw(ProjectCreateCategoriesTeam) },
+  { label: 'Funding', value: 'funding', component: markRaw(ProjectCreateCategoriesFunding) },
+  { label: 'History', value: 'history', component: markRaw(ProjectCreateCategoriesHistory) },
 ])
 
 const selectedTab = ref(tabs[0].value)
@@ -73,7 +73,7 @@ const projectNameInput = ref<HTMLInputElement | null>(null)
 function useProjectName() {
   const isEditing = ref(false)
   // const name = ref('Untitled')
-  const { value: name, errorMessage: nameError } = useField<string>('name', yup.string().required().notOneOf(['Untitled', 'Undefined']))
+  const { value: name, errorMessage: nameError } = useField<string>('name', yup.string().required().notOneOf(['Untitled', 'Undefined', 'Create', 'create']))
   name.value = project.value?.name || 'Untitled'
 
   function toggleEdit() {
@@ -143,6 +143,7 @@ function jumpTo(tab: string) {
 
   selectedTab.value = tab
 }
+const transitionDone = ref(false)
 </script>
 
 <template>
@@ -306,26 +307,44 @@ function jumpTo(tab: string) {
         mb-170px
         lg="mb-55px"
       >
-        <component
-          :is="getCurrentComponent()"
-          v-if="project"
-          ref="currentComponent"
-          :project="project"
-          w-full
-          flex
-          flex-col
-          gap-24px
-        />
-        <Button
-          v-if="selectedTab !== tabs[tabs.length - 1].value"
-          class="hidden!"
-          mt-48px
-          lg="w-fit flex!"
-          border
-          @click="next()"
-        >
-          <span px-24px>NEXT SECTION</span>
-        </Button>
+        <ClientOnly>
+          <Transition
+            v-if="!transitionDone"
+            name="fade"
+            mode="out-in"
+            appear
+            @after-enter="transitionDone = true"
+          >
+            <component
+              :is="getCurrentComponent()"
+              ref="currentComponent"
+              :project="project"
+              w-full
+              flex
+              flex-col
+              gap-24px
+            />
+          </Transition>
+          <component
+            :is="getCurrentComponent()"
+            ref="currentComponent"
+            :project="project"
+            w-full
+            flex
+            flex-col
+            gap-24px
+          />
+          <Button
+            v-if="selectedTab !== tabs[tabs.length - 1].value"
+            class="hidden!"
+            mt-48px
+            lg="w-fit flex!"
+            border
+            @click="next()"
+          >
+            <span px-24px>NEXT SECTION</span>
+          </Button>
+        </ClientOnly>
       </div>
     </div>
     <div
@@ -388,3 +407,15 @@ function jumpTo(tab: string) {
     </div>
   </div>
 </template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

pages/project/create.vue

@@ -18,15 +18,15 @@ const { saveProject, publishProject, saveProjectImage } = useProject()
 const { project, isPublishing } = storeToRefs(useProject())
 
 const tabs = reactive([
-  { label: 'Basic Info', value: 'basic_info', component: ProjectCreateCategoriesBasicInfo },
-  { label: 'Assets', value: 'assets', component: ProjectCreateCategoriesAssets },
-  { label: 'Links', value: 'links', component: ProjectCreateCategoriesLinks },
-  { label: 'Technology', value: 'technology', component: ProjectCreateCategoriesTechnology },
-  { label: 'Privacy', value: 'privacy', component: ProjectCreateCategoriesPrivacy },
-  { label: 'Security', value: 'security', component: ProjectCreateCategoriesSecurity },
-  { label: 'Team', value: 'team', component: ProjectCreateCategoriesTeam },
-  { label: 'Funding', value: 'funding', component: ProjectCreateCategoriesFunding },
-  { label: 'History', value: 'history', component: ProjectCreateCategoriesHistory },
+  { label: 'Basic Info', value: 'basic_info', component: markRaw(ProjectCreateCategoriesBasicInfo) },
+  { label: 'Assets', value: 'assets', component: markRaw(ProjectCreateCategoriesAssets) },
+  { label: 'Links', value: 'links', component: markRaw(ProjectCreateCategoriesLinks) },
+  { label: 'Technology', value: 'technology', component: markRaw(ProjectCreateCategoriesTechnology) },
+  { label: 'Privacy', value: 'privacy', component: markRaw(ProjectCreateCategoriesPrivacy) },
+  { label: 'Security', value: 'security', component: markRaw(ProjectCreateCategoriesSecurity) },
+  { label: 'Team', value: 'team', component: markRaw(ProjectCreateCategoriesTeam) },
+  { label: 'Funding', value: 'funding', component: markRaw(ProjectCreateCategoriesFunding) },
+  { label: 'History', value: 'history', component: markRaw(ProjectCreateCategoriesHistory) },
 ])
 
 const selectedTab = ref(tabs[0].value)
@@ -60,7 +60,7 @@ const projectNameInput = ref<HTMLInputElement | null>(null)
 function useProjectName() {
   const isEditing = ref(false)
   // const name = ref('Untitled')
-  const { value: name, errorMessage: nameError } = useField<string>('name', yup.string().required().notOneOf(['Untitled', 'Undefined']))
+  const { value: name, errorMessage: nameError } = useField<string>('name', yup.string().required().notOneOf(['Untitled', 'Undefined', 'Create', 'create']))
   name.value = project.value?.name || 'Untitled'
 
   function toggleEdit() {
@@ -127,6 +127,7 @@ function jumpTo(tab: string) {
 
   selectedTab.value = tab
 }
+const transitionDone = ref(false)
 </script>
 
 <template>
@@ -196,6 +197,7 @@ function jumpTo(tab: string) {
               flex
               items-center
               gap-12px
+              relative
             >
               <input
                 v-if="isEditing"
@@ -234,6 +236,16 @@ function jumpTo(tab: string) {
                   i-heroicons-solid-pencil
                 />
               </button>
+              <span
+                v-if="nameError"
+                text-nowrap
+                text-app-danger
+                text-12px
+                absolute
+                lg:bottom--24px
+                bottom--16px
+                select-none
+              >Invalid project name</span>
             </div>
           </div>
         </div>
@@ -266,16 +278,6 @@ function jumpTo(tab: string) {
           >
             {{ tab.label }}
           </button>
-          <span
-            v-if="nameError"
-            text-nowrap
-            text-app-danger
-            text-12px
-            absolute
-            lg:bottom--24px
-            bottom--16px
-            select-none
-          >Invalid project name</span>
         </div>
       </div>
     </div>
@@ -290,24 +292,45 @@ function jumpTo(tab: string) {
         mb-170px
         lg="mb-55px"
       >
-        <component
-          :is="getCurrentComponent()"
-          ref="currentComponent"
-          w-full
-          flex
-          flex-col
-          gap-24px
-        />
-        <Button
-          v-if="selectedTab !== tabs[tabs.length - 1].value"
-          class="hidden!"
-          mt-48px
-          lg="w-fit flex!"
-          border
-          @click="next()"
-        >
-          <span px-24px>NEXT SECTION</span>
-        </Button>
+        <ClientOnly>
+          <Transition
+            v-if="!transitionDone"
+            name="fade"
+            mode="out-in"
+            appear
+            @after-enter="transitionDone = true"
+          >
+            <component
+              :is="getCurrentComponent()"
+              ref="currentComponent"
+              :project="project"
+              w-full
+              flex
+              flex-col
+              gap-24px
+            />
+          </Transition>
+          <component
+            :is="getCurrentComponent()"
+            v-else
+            ref="currentComponent"
+            :project="project"
+            w-full
+            flex
+            flex-col
+            gap-24px
+          />
+          <Button
+            v-if="selectedTab !== tabs[tabs.length - 1].value"
+            class="hidden!"
+            mt-48px
+            lg="w-fit flex!"
+            border
+            @click="next()"
+          >
+            <span px-24px>NEXT SECTION</span>
+          </Button>
+        </ClientOnly>
       </div>
     </div>
     <div
@@ -370,3 +393,15 @@ function jumpTo(tab: string) {
     </div>
   </div>
 </template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>