Refactor Popover & Menu Items (#18)

* Refactor Popover & Menu Items

* Remove reduntant console

Author: kadiryazici

src/components/AppSidebar.vue

@@ -9,7 +9,7 @@ import { AppStorage } from '../storage'
 import { Icons } from './Icons'
 import SidebarButton from './SidebarButton.vue'
 import Popover from './Popover.vue'
-import MenuItemsVue, { menuItem } from './MenuItems.vue'
+import MenuItems, { menuItem } from './MenuItems.vue'
 
 const store = useStore()
 
@@ -20,7 +20,7 @@ function openCurrentReleaseChangelog() {
 const moreItems = computed(() => [
   menuItem({
     key: 'changelog',
-    meta: { text: 'Changelog', icon: Icons.BellSlash },
+    meta: { text: 'Changelog', icon: Icons.Info16 },
     onSelect: openCurrentReleaseChangelog,
   }),
   menuItem({
@@ -82,7 +82,7 @@ const moreItems = computed(() => [
       </SidebarButton> -->
 
       <Popover
-        :wowerlay-options="{
+        :wowerlayOptions="{
           position: 'right-end',
           noBackground: true,
           style: 'display: flex; flex-direction: column: flex-wrap: nowrap: gap: 5px; padding: 5px;',
@@ -95,7 +95,7 @@ const moreItems = computed(() => [
         </template>
 
         <template #content>
-          <MenuItemsVue :items="moreItems" />
+          <MenuItems :items="moreItems" />
         </template>
       </Popover>
     </div>

src/components/Icons.ts

@@ -21,6 +21,7 @@ import IssueOpenedIcon from 'virtual:icons/octicon/issue-opened-24'
 import TagIcon from 'virtual:icons/octicon/tag-24'
 import AlertIcon from 'virtual:icons/octicon/alert-24'
 import QuestionIcon from 'virtual:icons/octicon/question-24'
+import InfoIcon16 from 'virtual:icons/octicon/info-16'
 import MailIcon from 'virtual:icons/octicon/mail-24'
 import SignOutIcon16 from 'virtual:icons/octicon/sign-out-16'
 import ChevronLeftIcon from 'virtual:icons/octicon/chevron-left'
@@ -59,4 +60,5 @@ export const Icons = {
   Download16: markRaw(DownloadIcon16),
   Command: markRaw(CommandIcon),
   BellSlash: markRaw(BellSlashIcon),
+  Info16: markRaw(InfoIcon16),
 }

src/components/MenuItems.vue

@@ -30,8 +30,6 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const popoverContext = usePopoverContext()
-
 const setupHandle = (ctx: Context) => {
   useKey('up,shift+tab', () => ctx.focusPrevious(), { input: true, repeat: true, prevent: true })
   useKey('down,tab', () => ctx.focusNext(), { input: true, repeat: true, prevent: true })
@@ -46,6 +44,8 @@ const setupHandle = (ctx: Context) => {
     el?.focus()
   })
 
+  const popoverContext = usePopoverContext()
+
   ctx.onSelect((meta, item) => {
     popoverContext.visible.value = false
   })
@@ -54,10 +54,10 @@ const setupHandle = (ctx: Context) => {
 
 <template>
   <SelectableItems
-    :item-defaults="itemDefaults"
+    :itemDefaults="itemDefaults"
     :setup="setupHandle"
     :items="items"
-    no-wrapper-element
+    noWrapperElement
   >
     <template #render="{ meta }: Item<ItemMeta>">
       <div class="item-icon">
@@ -81,7 +81,7 @@ const setupHandle = (ctx: Context) => {
     padding: 5px 10px;
     outline: none;
     height: 32px;
-    border-radius: 8px;
+    border-radius: 4px; // 8px parent border radius - 4px parent padding
     color: var(--white-faded);
 
     &,

src/components/Popover.vue

@@ -33,7 +33,6 @@ interface Props {
   wowerlayOptions?: Partial<Omit<InstanceType<typeof Wowerlay>['$props'], 'visible' | 'target'>>
 }
 
-const { renderSlot, element: target } = useSlotWithRef()
 const visible = ref(false)
 
 provide(popoverContextKey, { visible })
@@ -80,6 +79,10 @@ watch(visible, (value) => {
     setTimeout(() => lastFocusedElement instanceof HTMLElement && lastFocusedElement.focus())
   }
 })
+
+const { renderSlot, element: target } = useSlotWithRef('default', {
+  slotPropsGetter: () => ({ visible: visible.value }),
+})
 </script>
 
 <template>

src/composables/useSlotWithRef.ts

@@ -1,22 +1,26 @@
 import { ref, useSlots, withDirectives } from 'vue'
 import { type Directive, type Ref } from 'vue'
 
+export interface SlotWithRefOptions {
+  slotPropsGetter: () => Record<string, any>
+}
+
 const vRef: Directive<HTMLElement, (el: HTMLElement) => void> = (el, { value }) => value(el)
 
 /**
  * @param slotName Target slot default value: "default"
  */
-export function useSlotWithRef<T = HTMLElement>(slotName = 'default') {
+export function useSlotWithRef<T = HTMLElement>(slotName = 'default', options?: SlotWithRefOptions) {
   const slots = useSlots()
   const element: Ref<T | null> = ref(null)
 
   function handleRef(el: T) {
     element.value = el
   }
 
-  function renderSlot(props: any) {
+  function renderSlot() {
     if (slotName in slots) {
-      const [slot] = slots[slotName]!(props)
+      const [slot] = slots[slotName]!(options?.slotPropsGetter?.())
       return withDirectives(slot, [[vRef, handleRef]])
     }