refactor: dropdown and promo store

store/dropdown.ts

@@ -0,0 +1,30 @@
+import { useToggle } from '@vueuse/core';
+import { defineStore, createPinia, setActivePinia } from "pinia";
+import { usePromoStore } from './promo';
+/**
+ * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
+ * @see https://github.com/vuejs/pinia/discussions/1085
+ */
+setActivePinia(createPinia());
+
+export const useDropdownStore = defineStore('dropdown', () => {
+  const promoStore = usePromoStore();
+
+  const dropdownVisible = ref<boolean>(false);
+
+  const dropdownHide = () => dropdownVisible.value = false;
+  const dropdownShow = () => dropdownVisible.value = true;
+  const dropdownToggle = useToggle(dropdownVisible);
+
+  watch(dropdownVisible, (newVal, _oldVal) => {
+    console.debug('[dropdownVisible]', newVal, _oldVal);
+    if (!newVal) promoStore.promoHide();
+  });
+
+  return {
+    dropdownVisible,
+    dropdownHide,
+    dropdownShow,
+    dropdownToggle,
+  };
+});

store/promo.ts

@@ -1,5 +1,7 @@
 import { useToggle } from '@vueuse/core';
 import { defineStore, createPinia, setActivePinia } from "pinia";
+import { useDropdownStore } from './dropdown';
+
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
@@ -7,20 +9,22 @@ import { defineStore, createPinia, setActivePinia } from "pinia";
 setActivePinia(createPinia());
 
 export const usePromoStore = defineStore('promo', () => {
-  const visible = ref<boolean>(false);
-
-  const hide = () => visible.value = false;
-  const show = () => visible.value = true;
-  const toggle = useToggle(visible);
-
-  watch(visible, () => {
-    console.debug('[visible]', visible.value);
+  const dropdownStore = useDropdownStore();
+  const promoVisible = ref<boolean>(false);
+  
+  const promoHide = () => promoVisible.value = false;
+  const promoShow = () => promoVisible.value = true;
+  const promoToggle = useToggle(promoVisible);
+  
+  watch(promoVisible, (newVal, _oldVal) => {
+    console.debug('[promoVisible]', newVal, _oldVal);
+    if (!newVal) dropdownStore.dropdownHide();
   });
 
   return {
-    visible,
-    hide,
-    show,
-    toggle,
+    promoVisible,
+    promoHide,
+    promoShow,
+    promoToggle,
   };
 });