1 files changed, 42 insertions, 40 deletions
diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue
index 17f90e2..2381856 100644
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@@ -1,32 +1,3 @@
-<template>
-  <div style="overflow-x: hidden; width: 100%">
-    <c-card class="result-card">
-      <n-scrollbar
-        x-scrollable
-        trigger="none"
-        :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
-      >
-        <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
-        </n-config-provider>
-      </n-scrollbar>
-      <n-tooltip v-if="value" trigger="hover">
-        <template #trigger>
-          <div class="copy-button" :class="[copyPlacement]">
-            <c-button circle important:h-10 important:w-10 @click="onCopyClicked">
-              <n-icon size="22" :component="Copy" />
-            </c-button>
-          </div>
-        </template>
-        <span>{{ tooltipText }}</span>
-      </n-tooltip>
-    </c-card>
-    <div v-if="copyPlacement === 'outside'" mt-4 flex justify-center>
-      <c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { Copy } from '@vicons/tabler';
 import { useClipboard, useElementSize } from '@vueuse/core';
@@ -37,18 +8,13 @@ import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import { ref, toRefs } from 'vue';
 
-hljs.registerLanguage('sql', sqlHljs);
-hljs.registerLanguage('json', jsonHljs);
-hljs.registerLanguage('html', xmlHljs);
-hljs.registerLanguage('yaml', yamlHljs);
-
 const props = withDefaults(
   defineProps<{
-    value: string;
-    followHeightOf?: HTMLElement | null;
-    language?: string;
-    copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none';
-    copyMessage?: string;
+    value: string
+    followHeightOf?: HTMLElement | null
+    language?: string
+    copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
+    copyMessage?: string
   }>(),
   {
     followHeightOf: null,
@@ -57,8 +23,13 @@ const props = withDefaults(
     copyMessage: 'Copy to clipboard',
   },
 );
+hljs.registerLanguage('sql', sqlHljs);
+hljs.registerLanguage('json', jsonHljs);
+hljs.registerLanguage('html', xmlHljs);
+hljs.registerLanguage('yaml', yamlHljs);
+
 const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
-const { height } = followHeightOf ? useElementSize(followHeightOf) : { height: ref(null) };
+const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
 
 const { copy } = useClipboard({ source: value });
 const tooltipText = ref(copyMessage.value);
@@ -73,6 +44,37 @@ function onCopyClicked() {
 }
 </script>
 
+<template>
+  <div style="overflow-x: hidden; width: 100%">
+    <c-card class="result-card">
+      <n-scrollbar
+        x-scrollable
+        trigger="none"
+        :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
+      >
+        <n-config-provider :hljs="hljs">
+          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
+        </n-config-provider>
+      </n-scrollbar>
+      <n-tooltip v-if="value" trigger="hover">
+        <template #trigger>
+          <div class="copy-button" :class="[copyPlacement]">
+            <c-button circle important:h-10 important:w-10 @click="onCopyClicked">
+              <n-icon size="22" :component="Copy" />
+            </c-button>
+          </div>
+        </template>
+        <span>{{ tooltipText }}</span>
+      </n-tooltip>
+    </c-card>
+    <div v-if="copyPlacement === 'outside'" mt-4 flex justify-center>
+      <c-button @click="onCopyClicked">
+        {{ tooltipText }}
+      </c-button>
+    </div>
+  </div>
+</template>
+
 <style lang="less" scoped>
 ::v-deep(.n-scrollbar) {
   padding-bottom: 10px;