From 04e095961d500885ad6d8a3ec3a50192e26b0717 Mon Sep 17 00:00:00 2001
From: fi3ework <fi3ework@gmail.com>
Date: Tue, 5 Jul 2022 00:12:29 +0800
Subject: [PATCH] feat: add panel style config (resolve #148)

---
 docs/configuration/config.md              | 23 ++++++++++++++++++-----
 packages/runtime/src/App.svelte           |  6 +++++-
 packages/vite-plugin-checker/src/types.ts | 21 +++++++++++++++++----
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/docs/configuration/config.md b/docs/configuration/config.md
index 4beb40eb..18755858 100644
--- a/docs/configuration/config.md
+++ b/docs/configuration/config.md
@@ -1,6 +1,6 @@
 # Configurations
 
-Below is the shared configuration to control the behaviors of the plugin.
+Shared configuration to control the behaviors of the plugin.
 
 ```ts
 {
@@ -16,20 +16,33 @@ Below is the shared configuration to control the behaviors of the plugin.
     | boolean
     | {
         /**
-         * Set this true if you want the overlay to default to being open if errors/warnings are found
+         * Set this true if you want the overlay to default to being open if
+         * errors/warnings are found
          * @defaultValue `true`
          */
         initialIsOpen?: boolean
         /**
-         * The position of the vite-plugin-checker badge to open and close the diagnostics panel
+         * The position of the vite-plugin-checker badge to open and close
+         * the diagnostics panel
          * @default `bl`
          */
         position?: 'tl' | 'tr' | 'bl' | 'br'
         /**
-         * Use this to add extra style to the badge button, see details of [Svelte style](https://svelte.dev/docs#template-syntax-element-directives-style-property)
-         * For example, if you want to hide the badge, you can pass `display: none;` to the badgeStyle property
+         * Use this to add extra style string to the badge button, the string format is
+         * [Svelte style](https://svelte.dev/docs#template-syntax-element-directives-style-property)
+         * For example, if you want to hide the badge,
+         * you can pass `display: none;` to the badgeStyle property
+         * @default no default value
          */
         badgeStyle?: string
+        /**
+         * Use this to add extra style string to the diagnostic panel, the string format is
+         * [Svelte style](https://svelte.dev/docs#template-syntax-element-directives-style-property)
+         * For example, if you want to change the opacity of the panel,
+         * you can pass `opacity: 0.8;` to the panelStyle property
+         * @default no default value
+         */
+        panelStyle?: string
       }
   /**
    * stdout in terminal which starts the Vite server in dev mode.
diff --git a/packages/runtime/src/App.svelte b/packages/runtime/src/App.svelte
index adb4d951..622fa5c6 100644
--- a/packages/runtime/src/App.svelte
+++ b/packages/runtime/src/App.svelte
@@ -19,7 +19,11 @@
   badgeStyle={overlayConfig.badgeStyle}
   onClick={toggle}
 />
-<main class={`window ${collapsed ? 'window-collapsed' : ''}`} on:click|stopPropagation>
+<main
+  class={`window ${collapsed ? 'window-collapsed' : ''}`}
+  on:click|stopPropagation
+  style={overlayConfig.panelStyle}
+>
   <div class="list-scroll">
     <List {checkerResults} {base} ulStyle="margin-bottom: 36px;" />
   </div>
diff --git a/packages/vite-plugin-checker/src/types.ts b/packages/vite-plugin-checker/src/types.ts
index 79e16148..4e2504fe 100644
--- a/packages/vite-plugin-checker/src/types.ts
+++ b/packages/vite-plugin-checker/src/types.ts
@@ -86,20 +86,33 @@ export interface SharedConfig {
     | boolean
     | {
         /**
-         * Set this true if you want the overlay to default to being open if errors/warnings are found
+         * Set this true if you want the overlay to default to being open if
+         * errors/warnings are found
          * @defaultValue `true`
          */
         initialIsOpen?: boolean
         /**
-         * The position of the vite-plugin-checker badge to open and close the diagnostics panel
+         * The position of the vite-plugin-checker badge to open and close
+         * the diagnostics panel
          * @default `bl`
          */
         position?: 'tl' | 'tr' | 'bl' | 'br'
         /**
-         * Use this to add extra style to the badge button
-         * For example, if you want to want with react-query devtool, you can pass 'margin-left: 100px;' to avoid the badge overlap with the react-query's
+         * Use this to add extra style string to the badge button, the string format is
+         * [Svelte style](https://svelte.dev/docs#template-syntax-element-directives-style-property)
+         * For example, if you want to hide the badge,
+         * you can pass `display: none;` to the badgeStyle property
+         * @default no default value
          */
         badgeStyle?: string
+        /**
+         * Use this to add extra style string to the diagnostic panel, the string format is
+         * [Svelte style](https://svelte.dev/docs#template-syntax-element-directives-style-property)
+         * For example, if you want to change the opacity of the panel,
+         * you can pass `opacity: 0.8;` to the panelStyle property
+         * @default no default value
+         */
+        panelStyle?: string
       }
   /**
    * stdout in terminal which starts the Vite server in dev mode.