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

View file

@ -31,15 +31,15 @@ if (!project.value) {
} }
const tabs = reactive([ const tabs = reactive([
{ label: 'Basic Info', value: 'basic_info', component: ProjectCreateCategoriesBasicInfo }, { label: 'Basic Info', value: 'basic_info', component: markRaw(ProjectCreateCategoriesBasicInfo) },
{ label: 'Assets', value: 'assets', component: ProjectCreateCategoriesAssets }, { label: 'Assets', value: 'assets', component: markRaw(ProjectCreateCategoriesAssets) },
{ label: 'Links', value: 'links', component: ProjectCreateCategoriesLinks }, { label: 'Links', value: 'links', component: markRaw(ProjectCreateCategoriesLinks) },
{ label: 'Technology', value: 'technology', component: ProjectCreateCategoriesTechnology }, { label: 'Technology', value: 'technology', component: markRaw(ProjectCreateCategoriesTechnology) },
{ label: 'Privacy', value: 'privacy', component: ProjectCreateCategoriesPrivacy }, { label: 'Privacy', value: 'privacy', component: markRaw(ProjectCreateCategoriesPrivacy) },
{ label: 'Security', value: 'security', component: ProjectCreateCategoriesSecurity }, { label: 'Security', value: 'security', component: markRaw(ProjectCreateCategoriesSecurity) },
{ label: 'Team', value: 'team', component: ProjectCreateCategoriesTeam }, { label: 'Team', value: 'team', component: markRaw(ProjectCreateCategoriesTeam) },
{ label: 'Funding', value: 'funding', component: ProjectCreateCategoriesFunding }, { label: 'Funding', value: 'funding', component: markRaw(ProjectCreateCategoriesFunding) },
{ label: 'History', value: 'history', component: ProjectCreateCategoriesHistory }, { label: 'History', value: 'history', component: markRaw(ProjectCreateCategoriesHistory) },
]) ])
const selectedTab = ref(tabs[0].value) const selectedTab = ref(tabs[0].value)
@ -73,7 +73,7 @@ const projectNameInput = ref<HTMLInputElement | null>(null)
function useProjectName() { function useProjectName() {
const isEditing = ref(false) const isEditing = ref(false)
// const name = ref('Untitled') // 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' name.value = project.value?.name || 'Untitled'
function toggleEdit() { function toggleEdit() {
@ -143,6 +143,7 @@ function jumpTo(tab: string) {
selectedTab.value = tab selectedTab.value = tab
} }
const transitionDone = ref(false)
</script> </script>
<template> <template>
@ -305,10 +306,27 @@ function jumpTo(tab: string) {
app-container app-container
mb-170px mb-170px
lg="mb-55px" lg="mb-55px"
>
<ClientOnly>
<Transition
v-if="!transitionDone"
name="fade"
mode="out-in"
appear
@after-enter="transitionDone = true"
> >
<component <component
:is="getCurrentComponent()" :is="getCurrentComponent()"
v-if="project" ref="currentComponent"
:project="project"
w-full
flex
flex-col
gap-24px
/>
</Transition>
<component
:is="getCurrentComponent()"
ref="currentComponent" ref="currentComponent"
:project="project" :project="project"
w-full w-full
@ -326,6 +344,7 @@ function jumpTo(tab: string) {
> >
<span px-24px>NEXT SECTION</span> <span px-24px>NEXT SECTION</span>
</Button> </Button>
</ClientOnly>
</div> </div>
</div> </div>
<div <div
@ -388,3 +407,15 @@ function jumpTo(tab: string) {
</div> </div>
</div> </div>
</template> </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 { project, isPublishing } = storeToRefs(useProject())
const tabs = reactive([ const tabs = reactive([
{ label: 'Basic Info', value: 'basic_info', component: ProjectCreateCategoriesBasicInfo }, { label: 'Basic Info', value: 'basic_info', component: markRaw(ProjectCreateCategoriesBasicInfo) },
{ label: 'Assets', value: 'assets', component: ProjectCreateCategoriesAssets }, { label: 'Assets', value: 'assets', component: markRaw(ProjectCreateCategoriesAssets) },
{ label: 'Links', value: 'links', component: ProjectCreateCategoriesLinks }, { label: 'Links', value: 'links', component: markRaw(ProjectCreateCategoriesLinks) },
{ label: 'Technology', value: 'technology', component: ProjectCreateCategoriesTechnology }, { label: 'Technology', value: 'technology', component: markRaw(ProjectCreateCategoriesTechnology) },
{ label: 'Privacy', value: 'privacy', component: ProjectCreateCategoriesPrivacy }, { label: 'Privacy', value: 'privacy', component: markRaw(ProjectCreateCategoriesPrivacy) },
{ label: 'Security', value: 'security', component: ProjectCreateCategoriesSecurity }, { label: 'Security', value: 'security', component: markRaw(ProjectCreateCategoriesSecurity) },
{ label: 'Team', value: 'team', component: ProjectCreateCategoriesTeam }, { label: 'Team', value: 'team', component: markRaw(ProjectCreateCategoriesTeam) },
{ label: 'Funding', value: 'funding', component: ProjectCreateCategoriesFunding }, { label: 'Funding', value: 'funding', component: markRaw(ProjectCreateCategoriesFunding) },
{ label: 'History', value: 'history', component: ProjectCreateCategoriesHistory }, { label: 'History', value: 'history', component: markRaw(ProjectCreateCategoriesHistory) },
]) ])
const selectedTab = ref(tabs[0].value) const selectedTab = ref(tabs[0].value)
@ -60,7 +60,7 @@ const projectNameInput = ref<HTMLInputElement | null>(null)
function useProjectName() { function useProjectName() {
const isEditing = ref(false) const isEditing = ref(false)
// const name = ref('Untitled') // 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' name.value = project.value?.name || 'Untitled'
function toggleEdit() { function toggleEdit() {
@ -127,6 +127,7 @@ function jumpTo(tab: string) {
selectedTab.value = tab selectedTab.value = tab
} }
const transitionDone = ref(false)
</script> </script>
<template> <template>
@ -196,6 +197,7 @@ function jumpTo(tab: string) {
flex flex
items-center items-center
gap-12px gap-12px
relative
> >
<input <input
v-if="isEditing" v-if="isEditing"
@ -234,6 +236,16 @@ function jumpTo(tab: string) {
i-heroicons-solid-pencil i-heroicons-solid-pencil
/> />
</button> </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> </div>
</div> </div>
@ -266,16 +278,6 @@ function jumpTo(tab: string) {
> >
{{ tab.label }} {{ tab.label }}
</button> </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> </div>
</div> </div>
@ -289,10 +291,30 @@ function jumpTo(tab: string) {
app-container app-container
mb-170px mb-170px
lg="mb-55px" lg="mb-55px"
>
<ClientOnly>
<Transition
v-if="!transitionDone"
name="fade"
mode="out-in"
appear
@after-enter="transitionDone = true"
> >
<component <component
:is="getCurrentComponent()" :is="getCurrentComponent()"
ref="currentComponent" ref="currentComponent"
:project="project"
w-full
flex
flex-col
gap-24px
/>
</Transition>
<component
:is="getCurrentComponent()"
v-else
ref="currentComponent"
:project="project"
w-full w-full
flex flex
flex-col flex-col
@ -308,6 +330,7 @@ function jumpTo(tab: string) {
> >
<span px-24px>NEXT SECTION</span> <span px-24px>NEXT SECTION</span>
</Button> </Button>
</ClientOnly>
</div> </div>
</div> </div>
<div <div
@ -370,3 +393,15 @@ function jumpTo(tab: string) {
</div> </div>
</div> </div>
</template> </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>