Move to composition API

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -1,45 +1,36 @@
-<script>
+<script setup>
 import HeaderActions from './HeaderActions.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
+import { computed } from 'vue';
 
-export default {
-  name: 'ChatHeaderExpanded',
-  components: {
-    HeaderActions,
+const props = defineProps({
+  avatarUrl: {
+    type: String,
+    default: '',
   },
-  props: {
-    avatarUrl: {
-      type: String,
-      default: '',
-    },
-    introHeading: {
-      type: String,
-      default: '',
-    },
-    introBody: {
-      type: String,
-      default: '',
-    },
-    showPopoutButton: {
-      type: Boolean,
-      default: false,
-    },
+  introHeading: {
+    type: String,
+    default: '',
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
+  introBody: {
+    type: String,
+    default: '',
   },
-};
+  showPopoutButton: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const containerClasses = computed(() => [
+  props.avatarUrl ? 'justify-between' : 'justify-end',
+]);
 </script>
 
 <template>
   <header
     class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
   >
-    <div
-      class="flex items-start"
-      :class="[avatarUrl ? 'justify-between' : 'justify-end']"
-    >
+    <div class="flex items-start" :class="containerClasses">
       <img
         v-if="avatarUrl"
         class="h-12 rounded-full"
@@ -53,13 +44,11 @@ export default {
     </div>
     <h2
       v-dompurify-html="introHeading"
-      class="mt-4 text-2xl mb-1.5 font-medium"
-      :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
+      class="mt-4 text-2xl mb-1.5 font-medium text-slate-900 dark:text-slate-50"
     />
     <p
       v-dompurify-html="introBody"
-      class="text-base leading-normal"
-      :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
+      class="text-base leading-normal text-slate-700 dark:text-slate-200"
     />
   </header>
 </template>