feat: Translation plugin

src/components/Alert.vue

@@ -22,7 +22,7 @@
       <div class="ml-2 w-full">
         <div class="flex flex-col md:flex-row md:items-baseline">
           <h3 class="text-lg font-medium text-ink-gray-9" v-if="title">
-            {{ title }}
+            {{ __(title) }}
           </h3>
           <div class="mt-1 md:ml-2 md:mt-0">
             <slot></slot>
@@ -37,6 +37,7 @@
 </template>
 
 <script setup lang="ts">
+import { __ } from '../utils/translation'
 import { computed } from 'vue'
 
 interface AlertProps {

src/components/Autocomplete.vue

@@ -23,7 +23,7 @@
                   {{ displayValue(selectedValue) }}
                 </span>
                 <span class="text-base leading-5 text-ink-gray-4" v-else>
-                  {{ placeholder || '' }}
+                  {{ __(placeholder) || '' }}
                 </span>
               </div>
               <FeatherIcon
@@ -62,7 +62,7 @@
                     "
                     :value="query"
                     autocomplete="off"
-                    placeholder="Search"
+                    :placeholder="__('Search')"
                   />
                   <button
                     class="absolute right-0 inline-flex h-7 w-7 items-center justify-center"
@@ -81,7 +81,7 @@
                   v-if="group.group && !group.hideLabel"
                   class="sticky top-10 truncate bg-surface-modal px-2.5 py-1.5 text-sm font-medium text-ink-gray-5"
                 >
-                  {{ group.group }}
+                  {{ __(group.group) }}
                 </div>
                 <ComboboxOption
                   as="template"
@@ -130,7 +130,7 @@
                           v-if="option?.description"
                           class="text-sm text-ink-gray-5"
                         >
-                          {{ option.description }}
+                          {{ __(option.description) }}
                         </div>
                       </slot>
                     </div>
@@ -141,7 +141,7 @@
                 v-if="groups.length == 0"
                 class="rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
               >
-                No results found
+                {{ __('No results found') }}
               </li>
             </ComboboxOptions>
 
@@ -175,6 +175,7 @@ import {
   ComboboxOption,
   ComboboxOptions,
 } from '@headlessui/vue'
+import { __ } from '../utils/translation'
 import { nextTick } from 'vue'
 import Popover from './Popover.vue'
 import { Button } from './Button'
@@ -280,6 +281,9 @@ export default {
     },
   },
   methods: {
+    __(message) {
+      return __(message)
+    },
     rootRef() {
       return this.$refs['rootRef']
     },
@@ -317,15 +321,15 @@ export default {
     },
     getLabel(option) {
       if (isOptionOrValue(option) === 'value') return option
-      return option?.label || option?.value || 'No label'
+      return __(option?.label || option?.value || 'No label')
     },
     sanitizeOptions(options) {
       if (!options) return []
       // in case the options are just values, convert them to objects
       return options.map((option) => {
         return isOptionOrValue(option) === 'option'
           ? option
-          : { label: option, value: option }
+          : { label: __(option), value: option }
       })
     },
     isOptionSelected(option) {

src/components/Avatar.vue

@@ -19,7 +19,7 @@
         <slot></slot>
       </div>
       <template v-else>
-        {{ label && label[0] }}
+        {{ label && __(label[0]) }}
       </template>
     </div>
     <div
@@ -37,6 +37,7 @@
 </template>
 
 <script setup lang="ts">
+import { __ } from '../utils/translation'
 import { ref, computed } from 'vue'
 
 const imgFetchError = ref(false)

src/components/Badge.vue

@@ -9,7 +9,7 @@
     >
       <slot name="prefix"></slot>
     </div>
-    <slot>{{ props.label?.toString() }}</slot>
+    <slot>{{ __(props.label?.toString() || '') }}</slot>
     <div
       :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
       v-if="$slots.suffix"
@@ -20,6 +20,7 @@
 </template>
 
 <script lang="ts" setup>
+import { __ } from '../utils/translation'
 import { computed } from 'vue'
 
 interface Label {

src/components/Billing/TrialBanner.vue

@@ -23,6 +23,7 @@
 import LightningIcon from './LightningIcon.vue'
 import FeatherIcon from '../FeatherIcon.vue'
 import { Button } from '../Button'
+import { __ } from '../../utils/translation'
 import { createResource } from '../../resources'
 import { ref, computed } from 'vue'
 
@@ -38,11 +39,11 @@ const showBanner = ref(false)
 
 const trialTitle = computed(() => {
   return trialEndDays.value > 1
-    ? 'Trial ends in ' + trialEndDays.value + ' days'
-    : 'Trial will end tomorrow'
+    ? __('Trial ends in {0} days', [trialEndDays.value])
+    : __('Trial will end tomorrow')
 })
 
-const trialMessage = 'Upgrade to a paid plan for uninterrupted services'
+const trialMessage = __('Upgrade to a paid plan for uninterrupted services')
 
 createResource({
   url: 'frappe.integrations.frappe_providers.frappecloud_billing.current_site_info',

src/components/Breadcrumbs.vue

@@ -43,7 +43,7 @@
         >
           <slot name="prefix" :item="item" />
           <span>
-            {{ item.label }}
+            {{ __(item.label) }}
           </span>
           <slot name="suffix" :item="item" />
         </router-link>
@@ -59,7 +59,7 @@
         >
           <slot name="prefix" :item="item" />
           <span>
-            {{ item.label }}
+            {{ __(item.label) }}
           </span>
           <slot name="suffix" :item="item" />
         </button>
@@ -75,6 +75,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { __ } from '../utils/translation'
 import { useWindowSize } from '@vueuse/core'
 import { computed } from 'vue'
 import { RouterLinkProps, useRouter } from 'vue-router'

src/components/Button/Button.vue

@@ -37,7 +37,7 @@
       <slot name="icon" v-else-if="$slots.icon" />
     </template>
     <span v-else :class="{ 'sr-only': isIconButton }">
-      <slot>{{ label }}</slot>
+      <slot>{{ __(label || '') }}</slot>
     </span>
 
     <slot name="suffix">
@@ -53,6 +53,7 @@
 </template>
 <script lang="ts" setup>
 import { computed, useSlots, type Component } from 'vue'
+import { __ } from '../../utils/translation'
 import FeatherIcon from '../FeatherIcon.vue'
 import LoadingIndicator from '../LoadingIndicator.vue'
 import { useRouter, type RouteLocation } from 'vue-router'

src/components/Calendar/Calendar.vue

@@ -14,7 +14,7 @@
       <div class="mb-2 flex justify-between">
         <!-- left side  -->
         <!-- Year, Month -->
-        <span class="text-xl font-medium"> {{ currentMonthYear }}</span>
+        <span class="text-xl font-medium"> {{ __(currentMonthYear) }}</span>
         <!-- right side -->
         <!-- actions buttons for calendar -->
         <div class="flex gap-x-1">
@@ -88,6 +88,7 @@ import CalendarWeekly from './CalendarWeekly.vue'
 import CalendarDaily from './CalendarDaily.vue'
 import NewEventModal from './NewEventModal.vue'
 import useEventModal from './composables/useEventModal'
+import { __ } from '../../utils/translation'
 
 const props = defineProps({
   events: {

src/components/Calendar/CalendarEvent.vue

@@ -37,7 +37,7 @@
 
       <div class="flex w-fit flex-col overflow-hidden whitespace-nowrap">
         <p class="text-ellipsis text-sm font-medium text-gray-800">
-          {{ props.event.title || 'New Event' }}
+          {{ __(props.event.title || 'New Event') }}
         </p>
         <p
           class="text-ellipsis text-xs font-normal text-gray-800"
@@ -85,7 +85,7 @@
 
       <div class="flex w-fit flex-col overflow-hidden whitespace-nowrap">
         <p class="text-ellipsis text-sm font-medium text-gray-800">
-          {{ props.event.title || 'New Event' }}
+          {{ __(props.event.title || 'New Event') }}
         </p>
         <p
           class="text-ellipsis text-xs font-normal text-gray-800"
@@ -117,6 +117,7 @@
 </template>
 
 <script setup>
+import { __ } from '../../utils/translation'
 import FeatherIcon from '../FeatherIcon.vue'
 import EventModalContent from './EventModalContent.vue'
 import NewEventModal from './NewEventModal.vue'

src/components/Calendar/CalendarMonthly.vue

@@ -5,8 +5,9 @@
       <span
         v-for="day in daysList"
         class="text-center text-sm font-normal text-gray-600"
-        >{{ day }}</span
       >
+        {{ __(day) }}
+      </span>
     </div>
 
     <!-- Date Grid -->
@@ -34,7 +35,7 @@
                 date.toDateString() === new Date().toDateString() && 'font-bold'
               "
             >
-              {{ date.getDate() }}
+              {{ __(date.getDate().toString()) }}
             </span>
             <span v-else class="z-10 w-full bg-white py-1 text-center">
               {{ parseDateEventPopupFormat(date, (showDay = false)) }}
@@ -80,6 +81,7 @@
 </template>
 
 <script setup>
+import { __ } from '../../utils/translation'
 import { parseDateEventPopupFormat, daysList, parseDate } from './calendarUtils'
 import { inject } from 'vue'
 import CalendarEvent from './CalendarEvent.vue'

src/components/Calendar/EventModalContent.vue

@@ -13,7 +13,7 @@
     </div>
     <div class="flex flex-col gap-5">
       <div class="flex justify-between text-xl font-semibold">
-        <span>{{ calendarEvent.title || 'New Event' }}</span>
+        <span>{{ __(calendarEvent.title || 'New Event') }}</span>
       </div>
       <div class="flex flex-col gap-4">
         <div class="flex items-center gap-2">
@@ -25,7 +25,7 @@
         <div class="flex items-center gap-2" v-if="calendarEvent.participant">
           <FeatherIcon name="user" class="h-4 w-4" />
           <span class="text-sm font-normal">
-            {{ calendarEvent.participant }}
+            {{ __(calendarEvent.participant) }}
           </span>
         </div>
         <div
@@ -40,14 +40,15 @@
         <div class="flex items-center gap-2" v-if="calendarEvent.venue">
           <FeatherIcon name="map-pin" class="h-4 w-4" />
           <span class="text-sm font-normal">
-            {{ calendarEvent.venue }}
+            {{ __(calendarEvent.venue) }}
           </span>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
+import { __ } from '../../utils/translation'
 import FeatherIcon from '../FeatherIcon.vue'
 
 import { parseDateEventPopupFormat } from './calendarUtils'

src/components/Calendar/ShowMoreCalendarEvent.vue

@@ -11,10 +11,11 @@
     class="w-fit self-center rounded-sm p-[1px] text-sm font-bold text-gray-600 hover:cursor-pointer hover:bg-gray-200"
     @click="emit('showMoreEvents')"
   >
-    +{{ totalEventsCount - 1 }} more
+    {{ __('+{0} more', [totalEventsCount - 1]) }}
   </span>
 </template>
 <script setup>
+import { __ } from '../../utils/translation'
 import CalendarEvent from './CalendarEvent.vue'
 
 const props = defineProps({

src/components/Card.vue

@@ -5,14 +5,14 @@
         <div class="flex items-center space-x-2" v-if="$slots['actions-left']">
           <slot name="actions-left"></slot>
         </div>
-        <h2 class="text-xl font-semibold">{{ title }}</h2>
+        <h2 class="text-xl font-semibold">{{ __(title) }}</h2>
       </div>
       <div class="flex items-center space-x-2" v-if="$slots['actions']">
         <slot name="actions"></slot>
       </div>
     </div>
     <p class="mt-1.5 text-base text-gray-600" v-if="subtitle">
-      {{ subtitle }}
+      {{ __(subtitle) }}
     </p>
     <div
       v-if="loading"
@@ -25,23 +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/Checkbox.vue

@@ -22,11 +22,12 @@
       v-bind="attrs"
     />
     <label class="block" :class="labelClasses" v-if="label" :for="htmlId">
-      {{ label }}
+      {{ __(label) }}
     </label>
   </div>
 </template>
 <script lang="ts" setup>
+import { __ } from '../utils/translation'
 import { computed, useAttrs } from 'vue'
 import { useId } from '../utils/useId'