fix: add __ method in options api or converted into composition api

src/components/Autocomplete.vue

@@ -281,6 +281,9 @@ export default {
     },
   },
   methods: {
+    __(message) {
+      return __(message)
+    },
     rootRef() {
       return this.$refs['rootRef']
     },

src/components/Card.vue

@@ -25,24 +25,19 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import { __ } from '../utils/translation'
 import LoadingText from './LoadingText.vue'
-export default {
-  name: 'Card',
-  props: {
-    title: {
-      type: String,
-    },
-    subtitle: {
-      type: String,
-    },
-    loading: {
-      type: Boolean,
-    },
+
+const props = defineProps({
+  title: {
+    type: String,
   },
-  components: {
-    LoadingText,
+  subtitle: {
+    type: String,
   },
-}
+  loading: {
+    type: Boolean,
+  },
+})
 </script>

src/components/ConfirmDialog.vue

@@ -2,7 +2,11 @@
   <Dialog v-model="showDialog" :options="{ title: __(title) }">
     <template #body-content>
       <div class="space-y-4">
-        <p class="text-p-base text-gray-800" v-if="message" v-html="__(message)" />
+        <p
+          class="text-p-base text-gray-800"
+          v-if="message"
+          v-html="__(message)"
+        />
       </div>
     </template>
     <template #actions>
@@ -11,7 +15,7 @@
   </Dialog>
 </template>
 <script>
-import { __ } from '../utils/translation';
+import { __ } from '../utils/translation'
 import { Button } from './Button'
 import Dialog from './Dialog.vue'
 
@@ -41,6 +45,9 @@ export default {
     }
   },
   methods: {
+    __(message) {
+      return __(message)
+    },
     handleConfirmation() {
       try {
         this.onConfirm?.({

src/components/ErrorMessage.vue

@@ -7,19 +7,22 @@
   ></div>
 </template>
 
-<script>
+<script setup>
 import { __ } from '../utils/translation'
-export default {
-  name: 'ErrorMessage',
-  props: ['message'],
-  computed: {
-    errorMessage() {
-      if (!this.message) return ''
-      if (this.message instanceof Error) {
-        return this.message.messages || this.message.message
-      }
-      return __(this.message)
-    },
+import { computed } from 'vue'
+
+const props = defineProps({
+  message: {
+    type: [String, Error],
+    required: true,
   },
-}
+})
+
+const errorMessage = computed(() => {
+  if (!props.message) return ''
+  if (props.message instanceof Error) {
+    return props.message.messages || props.message.message
+  }
+  return __(props.message)
+})
 </script>

src/components/Input.vue

@@ -141,6 +141,9 @@ export default {
   },
   emits: ['input', 'change', 'update:modelValue'],
   methods: {
+    __(message) {
+      return __(message)
+    },
     focus() {
       this.$refs.input.focus()
     },

src/components/ListItem.vue

@@ -14,16 +14,23 @@
     <slot name="actions"></slot>
   </div>
 </template>
-<script>
+<script setup>
 import { __ } from '../utils/translation'
-export default {
-  name: 'ListItem',
-  props: ['title', 'subtitle'],
-  computed: {
-    secondaryText() {
-      let text = __(this.subtitle) || ''
-      return text.replace('\n', '<br>')
-    },
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
   },
-}
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+
+const secondaryText = computed(() => {
+  let text = __(props.subtitle) || ''
+  return text.replace('\n', '<br>')
+})
 </script>

src/components/LoadingText.vue

@@ -3,20 +3,14 @@
     <LoadingIndicator class="-ml-1 mr-2 h-3 w-3" /> {{ __(text) }}
   </div>
 </template>
-<script>
+<script setup>
 import { __ } from '../utils/translation'
 import LoadingIndicator from './LoadingIndicator.vue'
 
-export default {
-  name: 'Loading',
-  props: {
-    text: {
-      type: String,
-      default: 'Loading...',
-    },
+const props = defineProps({
+  text: {
+    type: String,
+    default: 'Loading...',
   },
-  components: {
-    LoadingIndicator,
-  },
-}
+})
 </script>

src/components/TabButtons.vue

@@ -36,38 +36,27 @@
     </div>
   </RadioGroup>
 </template>
-<script>
+<script setup>
 import { __ } from '../utils/translation'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
 import FeatherIcon from './FeatherIcon.vue'
+import { computed } from 'vue'
 
-export default {
-  name: 'TabButtons',
-  props: {
-    buttons: {
-      type: Array,
-      required: true,
-    },
-    modelValue: {
-      type: [String, Boolean, Number],
-    },
+const props = defineProps({
+  buttons: {
+    type: Array,
+    required: true,
   },
-  emits: ['update:modelValue'],
-  components: {
-    FeatherIcon,
-    RadioGroup,
-    RadioGroupOption,
-    RadioGroupLabel,
+  modelValue: {
+    type: [String, Boolean, Number],
+    default: null,
   },
-  computed: {
-    value: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.$emit('update:modelValue', value)
-      },
-    },
-  },
-}
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
 </script>

src/components/TextEditor/TextEditorFloatingMenu.vue

@@ -24,37 +24,39 @@
     </button>
   </FloatingMenu>
 </template>
-<script>
+<script setup>
 import { __ } from '../../utils/translation'
 import { FloatingMenu } from '@tiptap/vue-3'
 import { createEditorButton } from './utils'
+import { computed, inject } from 'vue'
 
-export default {
-  name: 'TextEditorFloatingMenu',
-  props: ['buttons'],
-  components: { FloatingMenu },
-  inject: ['editor'],
-  computed: {
-    floatingMenuButtons() {
-      if (!this.buttons) return false
-
-      let buttons
-      if (Array.isArray(this.buttons)) {
-        buttons = this.buttons
-      } else {
-        buttons = [
-          'Paragraph',
-          'Heading 2',
-          'Heading 3',
-          'Bullet List',
-          'Numbered List',
-          'Blockquote',
-          'Code',
-          'Horizontal Rule',
-        ]
-      }
-      return buttons.map(createEditorButton)
-    },
+const props = defineProps({
+  buttons: {
+    type: Array,
+    default: null,
   },
-}
+})
+
+const editor = inject('editor')
+
+const floatingMenuButtons = computed(() => {
+  if (!props.buttons) return false
+
+  let buttons
+  if (Array.isArray(props.buttons)) {
+    buttons = props.buttons
+  } else {
+    buttons = [
+      'Paragraph',
+      'Heading 2',
+      'Heading 3',
+      'Bullet List',
+      'Numbered List',
+      'Blockquote',
+      'Code',
+      'Horizontal Rule',
+    ]
+  }
+  return buttons.map(createEditorButton)
+})
 </script>