style: non-functional buttons and menu

Author: DrJKL

src/components/button/IconGroup.vue

@@ -1,17 +1,15 @@
 <template>
-  <div :class="iconGroupClasses">
+  <div
+    :class="
+      cn(
+        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg bg-secondary-background shadow-sm transition-all duration-200 cursor-pointer'
+      )
+    "
+  >
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
 import { cn } from '@/utils/tailwindUtil'
-
-const iconGroupClasses = cn(
-  'flex justify-center items-center shrink-0',
-  'outline-hidden border-none p-0 rounded-lg',
-  'bg-secondary-background shadow-sm',
-  'transition-all duration-200',
-  'cursor-pointer'
-)
 </script>

src/components/button/MoreButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative inline-flex items-center">
-    <IconButton :size="size" :type="type" @click="toggle">
+    <IconButton :size="size" :type="type" @click="popover?.toggle">
       <i v-if="!isVertical" class="icon-[lucide--ellipsis] text-sm" />
       <i v-else class="icon-[lucide--more-vertical] text-sm" />
     </IconButton>
@@ -25,8 +25,18 @@
           )
         }
       }"
-      @show="$emit('menuOpened')"
-      @hide="$emit('menuClosed')"
+      @show="
+        () => {
+          isOpen = true
+          $emit('menuOpened')
+        }
+      "
+      @hide="
+        () => {
+          isOpen = false
+          $emit('menuClosed')
+        }
+      "
     >
       <div class="flex min-w-40 flex-col gap-2 p-2">
         <slot :close="hide" />
@@ -48,8 +58,6 @@ interface MoreButtonProps extends BaseButtonProps {
   isVertical?: boolean
 }
 
-const popover = ref<InstanceType<typeof Popover>>()
-
 const {
   size = 'md',
   type = 'secondary',
@@ -61,15 +69,15 @@ defineEmits<{
   menuClosed: []
 }>()
 
-const toggle = (event: Event) => {
-  popover.value?.toggle(event)
-}
+const isOpen = ref(false)
+const popover = ref<InstanceType<typeof Popover>>()
 
-const hide = () => {
+function hide() {
   popover.value?.hide()
 }
 
 defineExpose({
-  hide
+  hide,
+  isOpen
 })
 </script>

src/platform/assets/components/AssetCard.vue

@@ -1,30 +1,62 @@
 <template>
-  <component
-    :is="interactive ? 'button' : 'div'"
+  <div
     data-component-id="AssetCard"
     :data-asset-id="asset.id"
-    v-bind="elementProps"
+    :aria-labelledby="titleId"
+    :aria-describedby="descId"
+    tabindex="1"
     :class="
       cn(
         'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2',
         interactive &&
-          'group appearance-none bg-transparent m-0 outline-none cursor-pointer text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
+          'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
       )
     "
-    @click="interactive && $emit('select', asset)"
     @keydown.enter="interactive && $emit('select', asset)"
   >
     <div class="relative aspect-square w-full overflow-hidden rounded-xl">
+      <div
+        v-if="isLoading || error"
+        class="flex size-full cursor-pointer items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
+        role="button"
+        @click="interactive && $emit('select', asset)"
+      />
       <img
-        v-if="shouldShowImage"
+        v-else
         :src="asset.preview_url"
-        class="size-full object-contain"
+        class="size-full object-contain cursor-pointer"
+        role="button"
+        @click="interactive && $emit('select', asset)"
       />
-      <div
-        v-else
-        class="flex size-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
-      ></div>
+
       <AssetBadgeGroup :badges="asset.badges" />
+      <IconGroup
+        ref="card-buttons"
+        :class="
+          cn(
+            'absolute top-2 right-2 invisible group-hover:visible',
+            dropdownMenuButton?.isOpen && 'visible'
+          )
+        "
+      >
+        <IconButton>
+          <i class="icon-[lucide--file-text]" />
+        </IconButton>
+        <MoreButton ref="dropdown-menu-button" size="sm">
+          <template #default="{}">
+            <IconTextButton :label="$t('g.rename')" type="secondary" size="md">
+              <template #icon>
+                <i class="icon-[lucide--pencil]" />
+              </template>
+            </IconTextButton>
+            <IconTextButton :label="$t('g.delete')" type="secondary" size="md">
+              <template #icon>
+                <i class="icon-[lucide--trash-2]" />
+              </template>
+            </IconTextButton>
+          </template>
+        </MoreButton>
+      </IconGroup>
     </div>
     <div :class="cn('p-4 h-32 flex flex-col justify-between')">
       <div>
@@ -68,13 +100,17 @@
         </span>
       </div>
     </div>
-  </component>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useImage } from '@vueuse/core'
-import { computed, useId } from 'vue'
+import { computed, useId, useTemplateRef } from 'vue'
 
+import IconButton from '@/components/button/IconButton.vue'
+import IconGroup from '@/components/button/IconGroup.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import MoreButton from '@/components/button/MoreButton.vue'
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -91,30 +127,19 @@ defineEmits<{
 
 const settingStore = useSettingStore()
 
+const dropdownMenuButton = useTemplateRef<typeof MoreButton>(
+  'dropdown-menu-button'
+)
+
 const titleId = useId()
 const descId = useId()
 
 const tooltipDelay = computed<number>(() =>
   settingStore.get('LiteGraph.Node.TooltipDelay')
 )
 
-const { error } = useImage({
+const { isLoading, error } = useImage({
   src: asset.preview_url ?? '',
   alt: asset.name
 })
-
-const shouldShowImage = computed(() => asset.preview_url && !error.value)
-
-const elementProps = computed(() =>
-  interactive
-    ? {
-        type: 'button',
-        'aria-labelledby': titleId,
-        'aria-describedby': descId
-      }
-    : {
-        'aria-labelledby': titleId,
-        'aria-describedby': descId
-      }
-)
 </script>