From 9572f2cb10f1dfd02a7afb5652ba20ceb51e71f4 Mon Sep 17 00:00:00 2001 From: Ahmad Kholid Date: Wed, 4 Sep 2024 08:37:18 +0800 Subject: [PATCH 1/6] fix: grid does not disappear when closing app (#69) --- package.json | 1 - src/pages/content/ui/App.vue | 6 +- src/pages/content/ui/app-plugin.ts | 18 +- .../content/ui/app/detail/DetailHeader.vue | 4 +- yarn.lock | 6319 ----------------- 5 files changed, 19 insertions(+), 6329 deletions(-) delete mode 100644 yarn.lock diff --git a/package.json b/package.json index e5731a7..9d6c49c 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,6 @@ "specificity": "^1.0.0", "type-fest": "^4.10.2", "vue": "^3.4.10", - "vue-prism-editor": "^1.3.0", "webextension-polyfill": "0.10.0" }, "devDependencies": { diff --git a/src/pages/content/ui/App.vue b/src/pages/content/ui/App.vue index caaf1db..9a6f897 100644 --- a/src/pages/content/ui/App.vue +++ b/src/pages/content/ui/App.vue @@ -17,7 +17,7 @@ import { useAppProvider } from './app-plugin'; import AppElementDetail from './app/AppElementDetail.vue'; import AppElementScanner from './app/AppElementScanner.vue'; import AppToolbar from './app/AppToolbar.vue'; -import { watch } from 'vue'; +import { watch, onUnmounted } from 'vue'; import { TooltipProvider } from 'radix-vue'; const { state } = useAppProvider(); @@ -29,4 +29,8 @@ watch( else document.body.removeAttribute(EL_ATTR_NAME.showGrid); }, ); + +onUnmounted(() => { + document.body.removeAttribute(EL_ATTR_NAME.showGrid); +}); diff --git a/src/pages/content/ui/app-plugin.ts b/src/pages/content/ui/app-plugin.ts index 27dc2e3..6fd51a0 100644 --- a/src/pages/content/ui/app-plugin.ts +++ b/src/pages/content/ui/app-plugin.ts @@ -55,15 +55,17 @@ export function useAppProvider() { // To-do: use pinia? +const defaultState: AppState = { + paused: false, + tempHide: false, + showGrid: false, + interactive: true, + hasGlobalCSS: false, +}; + export const appPlugin: Plugin = { install(app, shadowRoot: ShadowRoot) { - const appState = shallowReactive({ - paused: false, - tempHide: false, - showGrid: false, - interactive: true, - hasGlobalCSS: false, - }); + const appState = shallowReactive({ ...defaultState }); settingsStorage.get().then((settings) => { Object.assign(appState, settings); @@ -110,6 +112,8 @@ export const appPlugin: Plugin = { } function destroy() { + Object.assign(appState, defaultState); + app.unmount(); shadowRoot.host.remove(); diff --git a/src/pages/content/ui/app/detail/DetailHeader.vue b/src/pages/content/ui/app/detail/DetailHeader.vue index 276859b..9280059 100644 --- a/src/pages/content/ui/app/detail/DetailHeader.vue +++ b/src/pages/content/ui/app/detail/DetailHeader.vue @@ -3,7 +3,9 @@ class="text-center py-1 bg-muted/25 gap-2 cursor-move text-muted-foreground px-4 flex items-center transition-colors w-full rounded-t-lg border-b" @pointerdown.self="startDragging" > - +