chore(characters): positions and transitions

Novout · Sep 24, 2022 · 810b161 · 810b161
1 parent cf2caac
commit 810b161
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 10 deletions.
diff --git a/...er-write-app/src/components/page/editor/project/characters/EditorProjectCharactersAdd.vue b/...er-write-app/src/components/page/editor/project/characters/EditorProjectCharactersAdd.vue
@@ -1,5 +1,11 @@
 <template>
   <div
+    v-motion
+    :initial="{ opacity: 0, y: 30 }"
+    :enter="{
+      opacity: 1,
+      y: 0,
+    }"
     class="flex flex-col p-10 bg-theme-background-opacity-1 shadow-lg gap-5 items-start w-full my-5"
   >
     <h2 class="text-xl font-bold">
@@ -67,19 +73,22 @@
       'editor.characters.item.nameCaseStrict'
     ) as ProjectStateCharacterNameCase,
     color: '#FFFFFF',
-    colorAlpha: 0.1,
+    colorAlpha: 0.2,
     important: false,
   })
 
   const onAdd = async () => {
-    if (!state.name) {
+    if (
+      !state.name ||
+      PROJECT.characters.list.find((n) => n.name === state.name)
+    ) {
       return
     }
 
     PROJECT.characters.list.unshift({
       id: utils.id().uuidv4(),
       name: state.name,
-      nameCase: transformer.characters().nameCase(state.nameCase, 'getter'),
+      nameCase: state.nameCase,
       color: state.color,
       colorAlpha: state.colorAlpha,
       important: state.important,
@@ -90,7 +99,7 @@
     state.name = ''
     state.nameCase = t('editor.characters.item.nameCaseStrict')
     state.color = '#FFFFFF'
-    state.colorAlpha = 0.1
+    state.colorAlpha = 0.2
     state.important = false
 
     characters.handler()

diff --git a/...c/components/page/editor/project/characters/list/EditorProjectCharactersListContainer.vue b/...c/components/page/editor/project/characters/list/EditorProjectCharactersListContainer.vue
@@ -1,5 +1,11 @@
 <template>
   <div
+    v-motion
+    :initial="{ opacity: 0, y: 30 }"
+    :enter="{
+      opacity: 1,
+      y: 0,
+    }"
     class="flex bg-theme-background-opacity-1 gap-5 flex-col w-full p-10 border hover:border-2 rounded-xl shadow-xl"
     :style="{ borderColor: character.color }"
   >
@@ -11,6 +17,12 @@
       <div class="flex flex-wrap gap-4 items-center">
         <div
           v-if="value"
+          v-motion
+          :initial="{ opacity: 0, x: 30 }"
+          :enter="{
+            opacity: 1,
+            x: 0,
+          }"
           class="flex flex-wrap gap-5 items-center bg-theme-background-2 rounded-lg p-2 shadow-xl"
         >
           <div class="flex flex-col">
@@ -22,8 +34,9 @@
           </div>
           <div class="flex flex-col">
             <p>{{ t('editor.characters.item.nameCase') }}</p>
-            <InputText
+            <InputSelect
               v-model="character.nameCase"
+              :arr="defines.characters().nameCase()"
               class="bg-theme-background-opacity-1"
             />
           </div>
@@ -82,12 +95,14 @@
   import { useCharacters } from '@/use/characters'
   import { useI18n } from 'vue-i18n'
   import { useToggle } from '@vueuse/core'
+  import { useDefines } from '@/use/defines'
 
   defineProps<{
     character: ProjectStateCharacter
   }>()
 
   const characters = useCharacters()
+  const defines = useDefines()
   const { t } = useI18n()
   const [value, toggle] = useToggle()
 </script>
diff --git a/packages/better-write-app/src/use/characters.ts b/packages/better-write-app/src/use/characters.ts
@@ -4,13 +4,15 @@ import { ASTUtils } from 'better-write-contenteditable-ast'
 import { Entities, Entity, ID, ProjectStateCharacter } from 'better-write-types'
 import { useProject } from './project'
 import { useUtils } from './utils'
+import { useTransformer } from './generator/transformer'
 
 export const useCharacters = () => {
   const CONTEXT = useContextStore()
   const PROJECT = useProjectStore()
 
   const utils = useUtils()
   const project = useProject()
+  const transformer = useTransformer()
 
   const handler = (index?: ID<number>, inner?: string) => {
     const getEntities = (index?: ID<number>): Entities => {
@@ -27,21 +29,30 @@ export const useCharacters = () => {
       const text = utils.text().defaultWhitespace(str)
       const color = utils.convert().hexToRgbA(c.color, c.colorAlpha)
 
-      switch (c.nameCase) {
+      const isValidImportant =
+        !entity.visual.custom || (entity.visual.custom && c.important)
+
+      const nameCase = transformer.characters().nameCase(c.nameCase, 'setter')
+
+      switch (nameCase) {
         case 'strict':
-          if (text.split(' ').find((t) => t === c.name))
+          if (text.split(' ').find((t) => t === c.name) && isValidImportant)
             entity.visual.custom = color
           break
         case 'default':
           if (
             text
               .split(' ')
-              .find((t) => t.toLowerCase().includes(c.name.toLowerCase()))
+              .find((t) => t.toLowerCase().includes(c.name.toLowerCase())) &&
+            isValidImportant
           )
             entity.visual.custom = color
           break
         case 'all':
-          if (text.toLowerCase().includes(c.name.toLowerCase()))
+          if (
+            text.toLowerCase().includes(c.name.toLowerCase()) &&
+            isValidImportant
+          )
             entity.visual.custom = color
           break
         default:

diff --git a/packages/better-write-types/src/types/project.ts b/packages/better-write-types/src/types/project.ts
@@ -65,7 +65,7 @@ export interface ProjectStateCharacters {
   list: ProjectStateCharacter[]
 }
 
-type ProjectStateCharacterNameCase = 'strict' | 'default' | 'all'
+export type ProjectStateCharacterNameCase = 'strict' | 'default' | 'all'
 
 export interface ProjectStateCharacter {
   id: ID<string>