Move many things over from Knossos (and other rearrangements) (#102)

lib/components/search/Categories.vue

@@ -9,23 +9,16 @@
   </div>
 </template>
 <script setup>
-import { formatCategory } from '@/helpers/utils.js'
-</script>
-<script>
-export default {
-  name: 'Categories',
-  props: {
-    categories: {
-      type: Array,
-      default() {
-        return []
-      },
+import { formatCategory } from '@'
+
+defineProps({
+  categories: {
+    type: Array,
+    default() {
+      return []
     },
   },
-  methods: {
-    formatCategory,
-  },
-}
+})
 </script>
 
 <style lang="scss" scoped>

lib/components/search/SearchDropdown.vue

@@ -67,7 +67,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Avatar, Button, XIcon, SearchIcon } from '@/components'
+import { Avatar, Button, XIcon, SearchIcon } from '@'
 
 const props = defineProps({
   options: {

lib/components/search/SearchFilter.vue

@@ -15,50 +15,48 @@
   </Checkbox>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
-import Checkbox from '@/components/base/Checkbox.vue'
-export default defineComponent({
-  components: {
-    Checkbox,
+<script setup>
+import { Checkbox } from '@'
+
+defineProps({
+  facetName: {
+    type: String,
+    default: '',
   },
-  props: {
-    facetName: {
-      type: String,
-      default: '',
-    },
-    displayName: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    activeFilters: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
+  displayName: {
+    type: String,
+    default: '',
   },
-  emits: ['toggle'],
-  methods: {
-    toggle() {
-      this.$emit('toggle', this.facetName)
+  icon: {
+    type: String,
+    default: '',
+  },
+  activeFilters: {
+    type: Array,
+    default() {
+      return []
     },
   },
 })
+
+const emit = defineEmits(['toggle'])
+
+function toggle() {
+  emit('toggle', this.facetName)
+}
 </script>
 
 <style lang="scss" scoped>
 .filter {
   margin-bottom: 0.5rem;
+
   :deep(.filter-text) {
     display: flex;
     align-items: center;
+
     .icon {
       height: 1rem;
+
       svg {
         margin-right: 0.25rem;
         width: 1rem;
@@ -66,6 +64,7 @@ export default defineComponent({
       }
     }
   }
+
   span {
     user-select: none;
   }