Convert many components to Composition API

lib/components/base/Checkbox.vue

@@ -25,43 +25,38 @@
 </template>
 <script setup>
 import { CheckIcon, DropdownIcon } from '@'
-</script>
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    description: {
-      type: String,
-      default: '',
-    },
-    modelValue: Boolean,
-    clickEvent: {
-      type: Function,
-      default: () => {},
-    },
-    collapsingToggleStyle: {
-      type: Boolean,
-      default: false,
-    },
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
   },
-  emits: ['update:modelValue'],
-  methods: {
-    toggle() {
-      if (!this.disabled) {
-        this.$emit('update:modelValue', !this.modelValue)
-      }
-    },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  modelValue: Boolean,
+  clickEvent: {
+    type: Function,
+    default: () => {},
+  },
+  collapsingToggleStyle: {
+    type: Boolean,
+    default: false,
   },
 })
+
+function toggle() {
+  if (!props.disabled) {
+    emit('update:modelValue', !props.modelValue)
+  }
+}
 </script>
 
 <style lang="scss" scoped>

lib/components/base/CopyCode.vue

@@ -6,29 +6,17 @@
   </button>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { ref } from 'vue'
 import { CheckIcon, ClipboardCopyIcon } from '@'
-</script>
 
-<script>
-export default {
-  props: {
-    text: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      copied: false,
-    }
-  },
-  methods: {
-    async copyText() {
-      await navigator.clipboard.writeText(this.text)
-      this.copied = true
-    },
-  },
+const props = defineProps<{ text: string }>()
+
+const copied = ref(false)
+
+async function copyText() {
+  await navigator.clipboard.writeText(props.text)
+  copied.value = true
 }
 </script>
 

lib/components/base/EnvironmentIndicator.vue

@@ -49,47 +49,42 @@
 </template>
 <script setup>
 import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon } from '@'
-</script>
-<script>
-import { defineComponent } from 'vue'
 
-export default defineComponent({
-  props: {
-    type: {
-      type: String,
-      default: 'mod',
-    },
-    serverSide: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    clientSide: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    typeOnly: {
-      type: Boolean,
-      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 []
-      },
+defineProps({
+  type: {
+    type: String,
+    default: 'mod',
+  },
+  serverSide: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  clientSide: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  typeOnly: {
+    type: Boolean,
+    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 []
     },
   },
 })

lib/components/base/Pagination.vue

@@ -15,7 +15,7 @@
       :key="'page-' + item + '-' + index"
       :class="{
         'page-number': page !== item,
         shrink: item > 99,
       }"
       class="page-number-container"
     >
@@ -26,7 +26,7 @@
         v-else
         :class="{
           'page-number current': page === item,
           shrink: item > 99,
         }"
         :href="linkFunction(item)"
         @click.prevent="page !== item ? switchPage(item) : null"
@@ -49,66 +49,63 @@
     </a>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
+import { computed } from 'vue'
 import { GapIcon, LeftArrowIcon, RightArrowIcon } from '@'
-</script>
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  props: {
-    page: {
-      type: Number,
-      default: 1,
-    },
-    count: {
-      type: Number,
-      default: 1,
-    },
-    linkFunction: {
-      type: Function,
-      default() {
-        return null
-      },
-    },
+
+const emit = defineEmits<{
+  'switch-page': [page: number]
+}>()
+
+const props = defineProps({
+  page: {
+    type: Number,
+    default: 1,
   },
-  emits: ['switch-page'],
-  computed: {
-    pages() {
-      let pages = []
-
-      if (this.count > 7) {
-        if (this.page + 3 >= this.count) {
-          pages = [
-            1,
-            '-',
-            this.count - 4,
-            this.count - 3,
-            this.count - 2,
-            this.count - 1,
-            this.count,
-          ]
-        } else if (this.page > 5) {
-          pages = [1, '-', this.page - 1, this.page, this.page + 1, '-', this.count]
-        } else {
-          pages = [1, 2, 3, 4, 5, '-', this.count]
-        }
-      } else {
-        pages = Array.from({ length: this.count }, (_, i) => i + 1)
-      }
-
-      return pages
-    },
+  count: {
+    type: Number,
+    default: 1,
   },
-  methods: {
-    switchPage(newPage) {
-      this.$emit('switch-page', newPage)
-      if (newPage !== null && newPage !== '' && !isNaN(newPage)) {
-        this.$emit('switch-page', Math.min(Math.max(newPage, 1), this.count))
-      }
+  linkFunction: {
+    type: Function,
+    default() {
+      return null
     },
   },
 })
+
+const pages = computed(() => {
+  let pages = []
+
+  if (props.count > 7) {
+    if (props.page + 3 >= props.count) {
+      pages = [
+        1,
+        '-',
+        props.count - 4,
+        props.count - 3,
+        props.count - 2,
+        props.count - 1,
+        props.count,
+      ]
+    } else if (props.page > 5) {
+      pages = [1, '-', props.page - 1, props.page, props.page + 1, '-', props.count]
+    } else {
+      pages = [1, 2, 3, 4, 5, '-', props.count]
+    }
+  } else {
+    pages = Array.from({ length: props.count }, (_, i) => i + 1)
+  }
+
+  return pages
+})
+
+function switchPage(newPage) {
+  emit('switch-page', newPage)
+  if (newPage !== null && newPage !== '' && !isNaN(newPage)) {
+    emit('switch-page', Math.min(Math.max(newPage, 1), props.count))
+  }
+}
 </script>
 
 <style scoped lang="scss">