Sort Overlay Messages by their Gravity

Add possibility to order overlay messages by their gravity:
1. Errors;
2. Warnings;
3. Suggestions;
4. Messages.

docs/configuration/config.md

@@ -45,6 +45,13 @@ Shared configuration to control the checker behaviors of the plugin.
          * @default no default value
          */
         panelStyle?: string
+        /**
+         * The sort order of the messages in overlay:
+         * - Set `gravity` to sort by message gravity (errors first, warnings second, suggestions third & messages fourth).
+         * - Set nothing to keep default sort order.
+         * @default no default value
+         */
+        messageOrder?: 'gravity'
       }
   /**
    * stdout in terminal which starts the Vite server in dev mode.

packages/runtime/src/App.ce.vue

@@ -51,6 +51,8 @@ const toggle = () => {
 }
 
 const collapsed = computed<boolean>(() => userCollapsed.value ?? initialCollapsed.value)
+
+const orderedByMessageGravity = computed<boolean>(() => props?.overlayConfig?.messageOrder === 'gravity')
 </script>
 
 <template>
@@ -68,7 +70,7 @@ const collapsed = computed<boolean>(() => userCollapsed.value ?? initialCollapse
       :style="overlayConfig?.panelStyle"
     >
       <div class="list-scroll">
-        <List :checkerResults="checkerResults" :base="base" ulStyle="margin-bottom: 36px;" />
+        <List :checkerResults="checkerResults" :base="base" :order="orderedByMessageGravity" ulStyle="margin-bottom: 36px;" />
       </div>
     </main>
   </template>

packages/runtime/src/components/Checker.ce.vue

@@ -4,6 +4,7 @@ import Diagnostic from './Diagnostic.ce.vue'
 defineProps<{
   diagnostics?: any[]
   base: string
+  order: boolean
 }>()
 
 const key = (diagnostic: any): string => {
@@ -17,13 +18,15 @@ const key = (diagnostic: any): string => {
 
 <template>
   <ul>
-    <Diagnostic v-for="d in diagnostics" :diagnostic="d" :base="base" :key="key(d)" />
+    <Diagnostic v-for="d in diagnostics" :diagnostic="d" :base="base" :order="order" :key="key(d)" />
   </ul>
 </template>
 
 <style>
 ul {
   list-style: none;
+  display: flex;
+  flex-direction: column;
 }
 
 ul {

packages/runtime/src/components/Diagnostic.ce.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-const { diagnostic, base } = defineProps<{
+const { diagnostic, base, order } = defineProps<{
   diagnostic: any
   base: string
+  order: boolean
 }>()
 
 interface Link {
@@ -65,7 +66,7 @@ const errorSource = computed(() => {
 </script>
 
 <template>
-  <li class="message-item">
+  <li :class="`${order ? 'ordered-' : ''}message-item`">
     <pre class="message">
     <!-- @vue-ignore -->
     <span class="plugin" :style="{ color: checkerColorMap[diagnostic.checkerId] }"
@@ -85,11 +86,27 @@ li {
   list-style: none;
 }
 
-.message-item {
+.message-item, .ordered-message-item {
   border-bottom: 1px dotted #666;
   padding: 12px 0 0 0;
 }
 
+.ordered-message-item:has(.message-body-0) {
+    order: 1;
+}
+
+.ordered-message-item:has(.message-body-1) {
+    order: 0;
+}
+
+.ordered-message-item:has(.message-body-2) {
+    order: 2;
+}
+
+.ordered-message-item:has(.message-body-3) {
+    order: 3;
+}
+
 .message {
   white-space: initial;
   font-weight: 600;

packages/runtime/src/components/List.ce.vue

@@ -6,6 +6,7 @@ withDefaults(
     ulStyle?: string
     base: string
     checkerResults: any[]
+    order: boolean
   }>(),
   {
     ulStyle: '',
@@ -16,7 +17,7 @@ withDefaults(
 <template>
   <ul :style="ulStyle">
     <li v-for="(checkerResult, index) in checkerResults" :key="index">
-      <Checker :diagnostics="checkerResult.diagnostics" :base="base" :index="index" />
+      <Checker :diagnostics="checkerResult.diagnostics" :base="base" :order="order" :index="index" />
     </li>
   </ul>
 </template>