refactor

vuejs · Sep 8, 2024 · cfe947b · cfe947b
1 parent 3fe9e1e
commit cfe947b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 26 deletions.
diff --git a/src/editor/EditorContainer.vue b/src/editor/EditorContainer.vue
@@ -31,6 +31,8 @@ function getItem() {
 watch(showMessage, () => {
   setItem()
 })
+
+const { editorOptions } = inject(injectKeyProps)!
 </script>
 
 <template>
@@ -42,8 +44,14 @@ watch(showMessage, () => {
       @change="onChange"
     />
     <Message v-show="showMessage" :err="store.errors[0]" />
-    <ToggleButton v-model="showMessage" />
-    <ToggleButton v-model="autoSave" text="Auto Save" bottom="48px" />
+
+    <div class="editor-floating">
+      <ToggleButton
+        v-model="showMessage"
+        :text="editorOptions?.showErrorText || 'Show Error'"
+      />
+      <ToggleButton v-model="autoSave" text="Auto Save" bottom="48px" />
+    </div>
   </div>
 </template>
 
@@ -53,4 +61,18 @@ watch(showMessage, () => {
   overflow: hidden;
   position: relative;
 }
+
+.editor-floating {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  gap: 8px;
+  background-color: var(--bg);
+  color: var(--text-light);
+  padding: 8px;
+}
 </style>
diff --git a/src/editor/ToggleButton.vue b/src/editor/ToggleButton.vue
@@ -1,25 +1,11 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectKeyProps } from '../../src/types'
-
-withDefaults(
-  defineProps<{
-    text?: string
-    bottom?: string
-  }>(),
-  {
-    text: 'Show Error',
-    bottom: '18px',
-  },
-)
-
-const { editorOptions } = inject(injectKeyProps)!
+defineProps<{ text: string }>()
 const active = defineModel<boolean>()
 </script>
 
 <template>
   <div class="wrapper" @click="active = !active">
-    <span>{{ editorOptions?.showErrorText || text }}</span>
+    <span>{{ text }}</span>
     <div class="toggle" :class="[{ active: modelValue }]">
       <div class="indicator" />
     </div>
@@ -28,19 +14,12 @@ const active = defineModel<boolean>()
 
 <style scoped>
 .wrapper {
-  position: absolute;
-  bottom: v-bind(bottom);
-  right: 15px;
-  z-index: 11;
   display: flex;
   align-items: center;
-  background-color: var(--bg);
-  color: var(--text-light);
   cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 2px;
   user-select: none;
 }
+
 .toggle {
   display: inline-block;
   margin-left: 4px;