refactor: improvements and fixes

This commit is contained in:
DomWane 2024-09-18 09:42:26 +02:00
parent c59bc96187
commit e3d81fe567
3 changed files with 161 additions and 97 deletions

View file

@ -68,7 +68,6 @@ defineExpose({
<template>
<div mt-24px>
<ClientOnly>
<ProjectCreateComponentsSelectChips
v-model="categories"
label="Categories"
@ -96,7 +95,6 @@ defineExpose({
hint="Choose ecosystems that is your project part of"
:error="ecosystemsError"
/>
</ClientOnly>
<ProjectCreateComponentsInput
v-model="description"
lg="w-1/2"

View file

@ -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>
@ -305,10 +306,27 @@ function jumpTo(tab: string) {
app-container
mb-170px
lg="mb-55px"
>
<ClientOnly>
<Transition
v-if="!transitionDone"
name="fade"
mode="out-in"
appear
@after-enter="transitionDone = true"
>
<component
:is="getCurrentComponent()"
v-if="project"
ref="currentComponent"
:project="project"
w-full
flex
flex-col
gap-24px
/>
</Transition>
<component
:is="getCurrentComponent()"
ref="currentComponent"
:project="project"
w-full
@ -326,6 +344,7 @@ function jumpTo(tab: string) {
>
<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>

View file

@ -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>
@ -289,10 +291,30 @@ function jumpTo(tab: string) {
app-container
mb-170px
lg="mb-55px"
>
<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
@ -308,6 +330,7 @@ function jumpTo(tab: string) {
>
<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>