fix: panelStyle not work in runtime

fi3ework · Jul 8, 2023 · ab70e33 · ab70e33
1 parent d88aca6
commit ab70e33
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/.changeset/light-olives-act.md b/.changeset/light-olives-act.md
@@ -0,0 +1,5 @@
+---
+'vite-plugin-checker': patch
+---
+
+fix config.overlay.panelStyle not be applied at runtime
diff --git a/packages/runtime/src/App.ce.vue b/packages/runtime/src/App.ce.vue
@@ -22,6 +22,7 @@ const shouldRender = computed(() => {
 })
 
 const collapsed = ref<boolean>(!(props?.overlayConfig?.initialIsOpen ?? true))
+
 const toggle = () => {
   collapsed.value = !collapsed.value
 }
@@ -39,7 +40,7 @@ const toggle = () => {
     </Badge>
     <main
       :class="['window', `${collapsed ? 'window-collapsed' : ''}`]"
-      style="{overlayConfig?.panelStyle}"
+      :style="overlayConfig?.panelStyle"
     >
       <div class="list-scroll">
         <List :checkerResults="checkerResults" :base="base" ulStyle="margin-bottom: 36px;" />

diff --git a/playground/config-overlay-position-style/__tests__/test.spec.ts b/playground/config-overlay-position-style/__tests__/test.spec.ts
@@ -3,10 +3,11 @@ import { describe, expect, it } from 'vitest'
 
 describe('config-overlay-position-style', () => {
   describe.runIf(isServe)('serve', () => {
-    it('find badge in right top corner', async () => {
+    it('find badge in right top corner and customized by badgeStyle', async () => {
       await sleepForServerReady()
       const shadowRoot = await getHmrOverlay()
       const badge = await shadowRoot!.$('.badge-base')
+
       const { bgColor, top, right } = await badge!.evaluate((el) => {
         const bgColor = window.getComputedStyle(el).getPropertyValue('background-color')
         const top = window.getComputedStyle(el).getPropertyValue('top')
@@ -18,5 +19,18 @@ describe('config-overlay-position-style', () => {
       expect(top).toBe('0px')
       expect(right).toBe('0px')
     })
+
+    it('panel be customized by panelStyle', async () => {
+      await sleepForServerReady()
+      const shadowRoot = await getHmrOverlay()
+      const panel = await shadowRoot!.$('.window')
+
+      const { bgColor } = await panel!.evaluate((el) => {
+        const bgColor = window.getComputedStyle(el).getPropertyValue('background-color')
+        return { bgColor }
+      })
+
+      expect(bgColor).toBe('rgb(164, 193, 255)')
+    })
   })
 })
diff --git a/playground/config-overlay-position-style/vite.config.js b/playground/config-overlay-position-style/vite.config.js
@@ -4,7 +4,11 @@ import checker from 'vite-plugin-checker'
 export default defineConfig({
   plugins: [
     checker({
-      overlay: { position: 'tr', badgeStyle: 'background-color: #E799B0' },
+      overlay: {
+        position: 'tr',
+        badgeStyle: 'background-color: #E799B0',
+        panelStyle: 'background-color: #A4C1FF;',
+      },
       eslint: {
         lintCommand: 'eslint ./src --ext .ts',
       },