Convert EnvironmentIndicator component to Composition API (#125)

lib/components/base/EnvironmentIndicator.vue

@@ -47,9 +47,10 @@
     </template>
   </span>
 </template>
-<script setup>
+<script setup lang="ts">
 import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon } from '@'
 import { useVIntl, defineMessages } from '@vintl/vintl'
+
 const messages = defineMessages({
   clientLabel: {
     id: 'omorphia.component.environment-indicator.label.client',
@@ -77,50 +78,27 @@ const messages = defineMessages({
   },
 })
 const { formatMessage } = useVIntl()
-</script>
-<script>
-import { defineComponent } from 'vue'
 
-export default defineComponent({
+withDefaults(
-  props: {
+  defineProps<{
-    type: {
+    type: string
-      type: String,
+    serverSide?: string
-      default: 'mod',
+    clientSide?: string
-    },
+    typeOnly?: boolean
-    serverSide: {
+    alwaysShow?: boolean
-      type: String,
+    search?: boolean
-      required: false,
+    categories?: string[]
-      default: '',
+  }>(),
-    },
+  {
-    clientSide: {
+    type: 'mod',
-      type: String,
+    serverSide: '',
-      required: false,
+    clientSide: '',
-      default: '',
+    typeOnly: false,
-    },
+    alwaysShow: false,
-    typeOnly: {
+    search: false,
-      type: Boolean,
+    categories: () => [],
-      required: false,
+  }
-      default: false,
+)
-    },
-    alwaysShow: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    search: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    categories: {
-      type: Array,
-      required: false,
-      default() {
-        return []
-      },
-    },
-  },
-})
 </script>
 <style lang="scss" scoped>
 .environment {