feat: add panel style config (resolve #148)

fi3ework · Jul 4, 2022 · 04e0959 · 04e0959
1 parent 4bcdc5c
commit 04e0959
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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.