feat(i18n): add i18n support, add support for project properties panel and element properties panel

src/components/Panels/PropertiesPanel/ModuleProperty/ElementProperty/ElementProperty.vue

@@ -1,7 +1,7 @@
 <template>
     <InputGroups
         v-if="!obj.fixedBitWidth"
-        property-name="BitWidth:"
+        :property-name="$t('simulator.panel_body.element_property.bit_width')"
         :property-value="obj.bitWidth"
         property-value-type="number"
         value-min="1"
@@ -11,7 +11,7 @@
     />
     <InputGroups
         v-if="obj.changeInputSize"
-        property-name="Input Size:"
+        :property-name="$t('simulator.panel_body.element_property.input_size')"
         :property-value="obj.inputSize"
         property-value-type="number"
         value-min="2"
@@ -21,7 +21,7 @@
     />
     <InputGroups
         v-if="!obj.propagationDelayFixed"
-        property-name="Delay:"
+        :property-name="$t('simulator.panel_body.element_property.delay')"
         :property-value="obj.propagationDelay"
         property-value-type="number"
         value-min="0"
@@ -30,7 +30,9 @@
         property-input-id="delayValue"
     />
     <p v-if="!obj.disableLabel">
-        <span>Label:</span>
+        <span>
+            {{ $t('simulator.panel_body.element_property.label') }}
+        </span>
         <input
             class="objectPropertyAttribute"
             type="text"
@@ -44,23 +46,29 @@
         :dropdown-array="labelDirections"
         property-name="newLabelDirection"
         :property-value="obj.labelDirection"
-        property-input-name="Label Direction:"
+        :property-input-name="
+            $t('simulator.panel_body.element_property.label_direction')
+        "
         property-select-id="labelDirectionValue"
     />
     <DropdownSelect
         v-if="!obj.directionFixed"
         :dropdown-array="labelDirections"
         property-name="newDirection"
         :property-value="obj.direction"
-        property-input-name="Direction:"
+        :property-input-name="
+            $t('simulator.panel_body.element_property.direction')
+        "
         property-select-id="directionValue"
     />
     <DropdownSelect
         v-if="!obj.orientationFixed"
         :dropdown-array="labelDirections"
         property-name="newDirection"
         :property-value="obj.direction"
-        property-input-name="Orientation:"
+        :property-input-name="
+            $t('simulator.panel_body.element_property.orientation')
+        "
         property-select-id="orientationValue"
     />
 

src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue

@@ -1,7 +1,6 @@
 <template>
     <p>
-        <span>Project:</span>
-        <!-- class="objectPropertyAttribute" -->
+        <span>{{ $t('simulator.panel_body.project_property.project') }}</span>
         <input
             id="projname"
             type="text"
@@ -13,7 +12,7 @@
     </p>
 
     <p>
-        <span>Circuit:</span>
+        <span>{{ $t('simulator.panel_body.project_property.circuit') }}</span>
         <input
             id="circname"
             :key="SimulatorState.activeCircuit.id"
@@ -26,7 +25,7 @@
     </p>
 
     <InputGroups
-        property-name="Clock Time (ms):"
+        :property-name="$t('simulator.panel_body.project_property.clock_time')"
         :property-value="(simulationArea as any).timePeriod"
         property-value-type="number"
         value-min="50"
@@ -36,7 +35,9 @@
     />
 
     <p>
-        <span>Clock Enabled:</span>
+        <span>{{
+            $t('simulator.panel_body.project_property.clock_enabled')
+        }}</span>
         <label class="switch">
             <input
                 type="checkbox"
@@ -47,7 +48,7 @@
     </p>
 
     <p>
-        <span>Lite Mode:</span>
+        <span>{{ $t('simulator.panel_body.project_property.lite_mode') }}</span>
         <label class="switch">
             <input
                 type="checkbox"
@@ -64,14 +65,14 @@
             class="panelButton btn btn-xs custom-btn--primary"
             @click="toggleLayoutMode"
         >
-            Edit Layout
+            {{ $t('simulator.panel_body.project_property.edit_layout') }}
         </button>
         <button
             type="button"
             class="panelButton btn btn-xs custom-btn--tertiary"
             @click.stop="closeCircuit(SimulatorState.activeCircuit)"
         >
-            Delete Circuit
+            {{ $t('simulator.panel_body.project_property.delete_circuit') }}
         </button>
     </p>
     <!-- <MessageBox

src/locales/en.json

@@ -94,6 +94,30 @@
                 "apply_themes": "Apply Themes",
                 "select_theme": "Select a theme:"
             },
+            "project_property": {
+                "project": "Project:",
+                "circuit": "Circuit:",
+                "clock_time": "Clock Time (ms):",
+                "clock_enabled": "Clock Enabled:",
+                "lite_mode": "Lite Mode:",
+                "edit_layout": "Edit Layout",
+                "delete_circuit": "Delete Circuit"
+            },
+            "element_property": {
+                "bit_width": "Bit-width:",
+                "input_size": "Input Size:",
+                "delay": "Delay:",
+                "label": "Label:",
+                "label_direction": "Label Direction:",
+                "direction": "Direction:",
+                "orientation": "Orientation:",
+                "label_directions": {
+                    "up": "UP",
+                    "down": "DOWN",
+                    "left": "LEFT",
+                    "right": "RIGHT"
+                }
+            },
             "layout": {
                 "width": "Width",
                 "height": "Height",

src/locales/hi.json

@@ -94,6 +94,30 @@
                 "apply_themes": "थीम लागू करें",
                 "select_theme": "थीम चुनें:"
             },
+            "project_property": {
+                "project": "परियोजना:",
+                "circuit": "सर्किट:",
+                "clock_time": "घड़ी का समय (मिलीसेकंड):",
+                "clock_enabled": "घड़ी इनेबल किया गया:",
+                "lite_mode": "लाइट मोड:",
+                "edit_layout": "लेआउट संपादित करें",
+                "delete_circuit": "सर्किट हटाएं"
+            },
+            "element_property": {
+                "bit_width": "बिट-चौड़ाई:",
+                "input_size": "इनपुट आकार:",
+                "delay": "विलंब (सेकंड):",
+                "label": "लेबल:",
+                "label_direction": "लेबल दिशा:",
+                "direction": "दिशा:",
+                "orientation": "ओरिएंटेशन:",
+                "label_directions": {
+                    "up": "ऊपर",
+                    "down": "नीचे",
+                    "left": "बाएं",
+                    "right": "दाएं"
+                }
+            },
             "layout": {
                 "width": "चौड़ाई",
                 "height": "ऊंचाई",