@bobbykim/manguito-cms-admin 0.1.1 → 0.3.0

package/src/components/layout/Sidebar.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useSchemaStore } from '../../stores/schema'
+import { useAuthStore } from '../../stores/auth'
+import { useUiStore } from '../../stores/ui'
+import { usePermission } from '../../composables/usePermission'
+import { useApiClient } from '../../composables/useApiClient'
+
+const schema = useSchemaStore()
+const authStore = useAuthStore()
+const uiStore = useUiStore()
+const { can } = usePermission()
+const router = useRouter()
+const api = useApiClient()
+
+const contentTypeList = computed(() => Object.values(schema.contentTypes))
+const taxonomyTypeList = computed(() => Object.values(schema.taxonomyTypes))
+
+const roleLabel = computed(() => {
+  if (!authStore.role) return null
+  return schema.getRoleByName(authStore.role)?.label ?? authStore.role
+})
+
+const contentOpen = ref(true)
+const taxonomyOpen = ref(true)
+
+// On mobile the rail is always rendered at full width inside the drawer.
+const collapsed = computed(() => !uiStore.isMobile && uiStore.sidebarCollapsed)
+
+const adminPrefix = __ADMIN_PREFIX__
+
+async function logout() {
+  await api.post('/auth/logout', {})
+  authStore.clear()
+  router.push(`${adminPrefix}/login`)
+}
+
+function userInitial(): string {
+  return authStore.email ? authStore.email.charAt(0).toUpperCase() : '?'
+}
+</script>
+
+<template>
+  <aside
+    :class="[
+      'flex h-full flex-col border-r border-card-border bg-white transition-[width] duration-300',
+      uiStore.isMobile
+        ? 'fixed inset-y-0 left-0 z-50 w-[258px] shadow-2xl transition-transform duration-300'
+        : 'relative shrink-0 overflow-hidden',
+      uiStore.isMobile && !uiStore.mobileNavOpen ? '-translate-x-full' : 'translate-x-0',
+      !uiStore.isMobile && (collapsed ? 'w-[74px]' : 'w-[258px]'),
+    ]"
+    aria-label="Main navigation"
+  >
+    <!-- Brand -->
+    <div class="flex items-center gap-[11px] px-[17px] pb-[14px] pt-[18px]">
+      <div
+        class="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[11px] bg-gradient-to-br from-[#6D5EF0] to-[#5B57E8] shadow-[0_4px_12px_rgba(91,87,232,0.36)]"
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.1" stroke-linecap="round">
+          <path d="M4 7h16" /><path d="M4 12h10" /><path d="M4 17h13" />
+        </svg>
+      </div>
+      <div v-if="!collapsed" class="overflow-hidden">
+        <div class="whitespace-nowrap text-[15px] font-bold tracking-tight text-ink">
+          {{ uiStore.cmsName }}
+        </div>
+        <div class="whitespace-nowrap text-[11px] font-medium text-faint">Admin panel</div>
+      </div>
+    </div>
+
+    <!-- Scrollable nav -->
+    <div class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-3 pb-2.5 pt-1">
+      <!-- Content group -->
+      <div>
+        <button
+          v-if="!collapsed"
+          type="button"
+          class="mb-1 mt-4 flex w-full items-center justify-between px-2 text-[11px] font-bold uppercase tracking-[.09em] text-faint hover:text-muted"
+          :aria-expanded="contentOpen"
+          @click="contentOpen = !contentOpen"
+        >
+          <span>Content</span>
+          <svg
+            class="h-3 w-3 text-[#C2C2D0] transition-transform"
+            :class="contentOpen ? '' : '-rotate-90'"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2.5"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+        <div
+          class="grid transition-[grid-template-rows] duration-300 ease-in-out"
+          :style="{ gridTemplateRows: (collapsed || contentOpen) ? '1fr' : '0fr' }"
+        >
+          <div class="min-h-0 overflow-hidden">
+            <RouterLink
+              v-for="type in contentTypeList"
+              :key="type.name"
+              :to="`${adminPrefix}/content/${type.name}`"
+              :class="[
+                'my-0.5 flex items-center rounded-[10px] text-sm font-medium text-[#4A4A60] transition-colors hover:bg-[#F3F2F8]',
+                collapsed ? 'justify-center px-0 py-[11px]' : 'gap-3 px-3 py-2.5',
+              ]"
+              active-class="!bg-indigo-50 !text-indigo-600 !font-semibold"
+            >
+              <span class="flex shrink-0">
+                <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M14 3v4a2 2 0 0 0 2 2h4" /><path d="M5 3h9l5 5v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" /><path d="M9 13h6" /><path d="M9 17h5" />
+                </svg>
+              </span>
+              <span v-if="!collapsed" class="overflow-hidden whitespace-nowrap">{{ type.label }}</span>
+            </RouterLink>
+          </div>
+        </div>
+      </div>
+
+      <!-- Taxonomy group -->
+      <div v-if="taxonomyTypeList.length > 0">
+        <button
+          v-if="!collapsed"
+          type="button"
+          class="mb-1 mt-4 flex w-full items-center justify-between px-2 text-[11px] font-bold uppercase tracking-[.09em] text-faint hover:text-muted"
+          :aria-expanded="taxonomyOpen"
+          @click="taxonomyOpen = !taxonomyOpen"
+        >
+          <span>Taxonomy</span>
+          <svg
+            class="h-3 w-3 text-[#C2C2D0] transition-transform"
+            :class="taxonomyOpen ? '' : '-rotate-90'"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2.5"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+        <div
+          class="grid transition-[grid-template-rows] duration-300 ease-in-out"
+          :style="{ gridTemplateRows: (collapsed || taxonomyOpen) ? '1fr' : '0fr' }"
+        >
+          <div class="min-h-0 overflow-hidden">
+            <RouterLink
+              v-for="type in taxonomyTypeList"
+              :key="type.name"
+              :to="`${adminPrefix}/taxonomy/${type.name}`"
+              :class="[
+                'my-0.5 flex items-center rounded-[10px] text-sm font-medium text-[#4A4A60] transition-colors hover:bg-[#F3F2F8]',
+                collapsed ? 'justify-center px-0 py-[11px]' : 'gap-3 px-3 py-2.5',
+              ]"
+              active-class="!bg-indigo-50 !text-indigo-600 !font-semibold"
+            >
+              <span class="flex shrink-0">
+                <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z" /><path d="M7 7h.01" />
+                </svg>
+              </span>
+              <span v-if="!collapsed" class="overflow-hidden whitespace-nowrap">{{ type.label }}</span>
+            </RouterLink>
+          </div>
+        </div>
+      </div>
+
+      <div class="my-3.5 mx-2.5 h-px bg-divider" />
+
+      <!-- Solo items -->
+      <RouterLink
+        v-if="can('media:read')"
+        :to="`${adminPrefix}/media`"
+        :class="[
+          'my-0.5 flex items-center rounded-[10px] text-sm font-medium text-[#4A4A60] transition-colors hover:bg-[#F3F2F8]',
+          collapsed ? 'justify-center px-0 py-[11px]' : 'gap-3 px-3 py-2.5',
+        ]"
+        active-class="!bg-indigo-50 !text-indigo-600 !font-semibold"
+      >
+        <span class="flex shrink-0">
+          <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" /><path d="M8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" /><path d="M21 15l-5-5L5 21" />
+          </svg>
+        </span>
+        <span v-if="!collapsed" class="overflow-hidden whitespace-nowrap">Media</span>
+      </RouterLink>
+
+      <RouterLink
+        v-if="can('users:read')"
+        :to="`${adminPrefix}/users`"
+        :class="[
+          'my-0.5 flex items-center rounded-[10px] text-sm font-medium text-[#4A4A60] transition-colors hover:bg-[#F3F2F8]',
+          collapsed ? 'justify-center px-0 py-[11px]' : 'gap-3 px-3 py-2.5',
+        ]"
+        active-class="!bg-indigo-50 !text-indigo-600 !font-semibold"
+      >
+        <span class="flex shrink-0">
+          <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" /><path d="M22 21v-2a4 4 0 0 0-3-3.9" /><path d="M16 3.1a4 4 0 0 1 0 7.8" />
+          </svg>
+        </span>
+        <span v-if="!collapsed" class="overflow-hidden whitespace-nowrap">Users</span>
+      </RouterLink>
+
+      <RouterLink
+        v-if="can('roles:read')"
+        :to="`${adminPrefix}/roles`"
+        :class="[
+          'my-0.5 flex items-center rounded-[10px] text-sm font-medium text-[#4A4A60] transition-colors hover:bg-[#F3F2F8]',
+          collapsed ? 'justify-center px-0 py-[11px]' : 'gap-3 px-3 py-2.5',
+        ]"
+        active-class="!bg-indigo-50 !text-indigo-600 !font-semibold"
+      >
+        <span class="flex shrink-0">
+          <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+          </svg>
+        </span>
+        <span v-if="!collapsed" class="overflow-hidden whitespace-nowrap">Roles</span>
+      </RouterLink>
+    </div>
+
+    <!-- Footer: user + logout -->
+    <div class="border-t border-divider p-3">
+      <div class="flex items-center gap-2.5 p-1.5">
+        <div
+          class="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[10px] bg-gradient-to-br from-[#6D5EF0] to-[#A06BF0] text-[14px] font-bold text-white"
+        >
+          {{ userInitial() }}
+        </div>
+        <div v-if="!collapsed" class="overflow-hidden">
+          <div class="whitespace-nowrap text-[13px] font-semibold text-[#2C2C44]">{{ authStore.email }}</div>
+          <div v-if="roleLabel" class="whitespace-nowrap text-[11.5px] text-[#9A9AB0]">{{ roleLabel }}</div>
+        </div>
+      </div>
+      <button
+        type="button"
+        :class="[
+          'mt-1 flex w-full items-center rounded-[10px] py-[9px] text-left text-[13.5px] font-medium text-[#74748C] transition-colors hover:bg-[#FDF2F4] hover:text-[#E1495B]',
+          collapsed ? 'justify-center px-0' : 'gap-[11px] px-2',
+        ]"
+        @click="logout"
+      >
+        <span class="flex shrink-0">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="M16 17l5-5-5-5" /><path d="M21 12H9" />
+          </svg>
+        </span>
+        <span v-if="!collapsed" class="whitespace-nowrap">Log out</span>
+      </button>
+    </div>
+  </aside>
+</template>

package/src/components/layout/Topbar.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useUiStore } from '../../stores/ui'
+
+const uiStore = useUiStore()
+</script>
+
+<template>
+  <header
+    class="flex h-[60px] shrink-0 items-center gap-[13px] border-b border-card-border bg-white/85 px-4 backdrop-blur-md"
+  >
+    <button
+      type="button"
+      class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px] text-[#4A4A60] transition-colors hover:bg-[#F1F0F7]"
+      aria-label="Toggle sidebar"
+      @click="uiStore.toggleSidebar()"
+    >
+      <!-- Hamburger on mobile (opens drawer), panel-collapse icon on desktop -->
+      <svg
+        v-if="uiStore.isMobile"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.9"
+        stroke-linecap="round"
+      >
+        <path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" />
+      </svg>
+      <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" /><path d="M9 3v18" />
+      </svg>
+    </button>
+
+    <div class="flex min-w-0 items-center gap-[9px]">
+      <span class="shrink-0 rounded-[7px] bg-indigo-50 px-[9px] py-[3px] text-[10.5px] font-bold tracking-[.05em] text-indigo-600">
+        ADMIN
+      </span>
+      <span class="overflow-hidden truncate whitespace-nowrap text-[14.5px] font-semibold text-[#2C2C44]">
+        {{ uiStore.cmsName }}
+      </span>
+    </div>
+
+    <div class="flex-1" />
+  </header>
+</template>

package/src/components/shared/ConfirmDialog.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+  message: string
+  onConfirm: () => void
+  onCancel: () => void
+}>()
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="mx-4 w-full max-w-sm rounded-lg bg-white p-6 shadow-xl">
+        <p class="text-sm text-gray-700">{{ message }}</p>
+
+        <div class="mt-6 flex justify-end gap-3">
+          <button
+            type="button"
+            class="rounded-md px-4 py-2 text-sm font-medium text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            @click="onCancel"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700"
+            @click="onConfirm"
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/components/shared/MediaSelectModal.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import type { MediaItem } from '@bobbykim/manguito-cms-core'
+import { useApiClient } from '../../composables/useApiClient'
+
+type MediaType = 'image' | 'video' | 'file'
+
+const props = defineProps<{
+  // When set, the filter tab is locked to this type.
+  acceptedType?: MediaType
+}>()
+
+const emit = defineEmits<{
+  select: [item: MediaItem]
+  close: []
+}>()
+
+const api = useApiClient()
+
+// ── Filter tabs ───────────────────────────────────────────────────────────────
+
+type Tab = { label: string; value: MediaType | 'all' }
+
+const ALL_TABS: Tab[] = [
+  { label: 'Images', value: 'image' },
+  { label: 'Videos', value: 'video' },
+  { label: 'PDFs', value: 'file' },
+]
+
+const activeTab = ref<MediaType | 'all'>(props.acceptedType ?? 'all')
+const tabsVisible = computed(() => !props.acceptedType)
+
+// When acceptedType changes (unlikely at runtime, but defensive), sync.
+watch(
+  () => props.acceptedType,
+  (t) => { if (t) activeTab.value = t }
+)
+
+// ── Data ──────────────────────────────────────────────────────────────────────
+
+const items = ref<MediaItem[]>([])
+const loading = ref(false)
+const page = ref(1)
+const totalPages = ref(1)
+const selectedItem = ref<MediaItem | null>(null)
+
+function buildPath(tab: MediaType | 'all', p: number): string {
+  const params = new URLSearchParams({ page: String(p), per_page: '20' })
+  if (tab !== 'all') params.set('type', tab)
+  return `/media?${params.toString()}`
+}
+
+async function fetchMedia() {
+  loading.value = true
+  const res = await api.get<MediaItem[]>(buildPath(activeTab.value, page.value))
+  loading.value = false
+
+  if (res.ok) {
+    items.value = res.data
+
+    // The server also returns meta — access it via type assertion since
+    // ApiResult<T> doesn't model the extra fields.
+    const raw = res as unknown as { meta?: { total_pages: number } }
+    totalPages.value = raw.meta?.total_pages ?? 1
+  }
+}
+
+watch(activeTab, () => {
+  page.value = 1
+  selectedItem.value = null
+  void fetchMedia()
+})
+
+watch(page, () => {
+  void fetchMedia()
+})
+
+onMounted(() => { void fetchMedia() })
+
+// ── Actions ───────────────────────────────────────────────────────────────────
+
+function confirm() {
+  if (!selectedItem.value) return
+  emit('select', selectedItem.value)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Select media"
+      @click.self="$emit('close')"
+    >
+      <div class="flex h-full max-h-144 w-full max-w-3xl flex-col overflow-hidden rounded-lg bg-white shadow-xl">
+
+        <!-- Header -->
+        <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
+          <h2 class="text-base font-semibold text-gray-900">Select Media</h2>
+          <button
+            type="button"
+            class="text-xl leading-none text-gray-400 hover:text-gray-600"
+            aria-label="Close"
+            @click="$emit('close')"
+          >
+            &times;
+          </button>
+        </div>
+
+        <!-- Filter tabs — hidden when type is locked -->
+        <div
+          v-if="tabsVisible"
+          class="flex gap-1 border-b border-gray-200 px-5 pt-3"
+        >
+          <button
+            type="button"
+            :class="[
+              'rounded-t-md px-3 py-1.5 text-sm font-medium transition-colors',
+              activeTab === 'all'
+                ? 'border-b-2 border-indigo-600 text-indigo-600'
+                : 'text-gray-500 hover:text-gray-800',
+            ]"
+            @click="activeTab = 'all'"
+          >
+            All
+          </button>
+          <button
+            v-for="tab in ALL_TABS"
+            :key="tab.value"
+            type="button"
+            :class="[
+              'rounded-t-md px-3 py-1.5 text-sm font-medium transition-colors',
+              activeTab === tab.value
+                ? 'border-b-2 border-indigo-600 text-indigo-600'
+                : 'text-gray-500 hover:text-gray-800',
+            ]"
+            @click="activeTab = tab.value"
+          >
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <!-- Locked tab label -->
+        <div
+          v-else
+          class="border-b border-gray-200 px-5 py-2 text-sm text-gray-500"
+        >
+          Showing:
+          <span class="font-medium text-gray-700">
+            {{ ALL_TABS.find(t => t.value === acceptedType)?.label ?? acceptedType }}
+          </span>
+        </div>
+
+        <!-- Grid -->
+        <div class="flex-1 overflow-y-auto p-5">
+          <!-- Loading -->
+          <div v-if="loading" class="flex items-center justify-center py-16">
+            <span
+              class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-indigo-600 border-t-transparent"
+              aria-hidden="true"
+            />
+          </div>
+
+          <!-- Empty state -->
+          <div
+            v-else-if="items.length === 0"
+            class="flex flex-col items-center justify-center py-16 text-gray-400"
+          >
+            <span class="text-4xl" aria-hidden="true">🖼</span>
+            <p class="mt-2 text-sm">No media found</p>
+          </div>
+
+          <!-- Media grid -->
+          <div
+            v-else
+            class="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5"
+          >
+            <button
+              v-for="item in items"
+              :key="item.id"
+              type="button"
+              :class="[
+                'group relative aspect-square overflow-hidden rounded-md border-2 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1',
+                selectedItem?.id === item.id
+                  ? 'border-indigo-500'
+                  : 'border-transparent hover:border-gray-300',
+              ]"
+              :aria-pressed="selectedItem?.id === item.id"
+              :aria-label="`Select ${item.alt ?? item.url.split('/').pop()}`"
+              @click="selectedItem = item"
+            >
+              <!-- Image thumbnail -->
+              <img
+                v-if="item.type === 'image'"
+                :src="item.url"
+                :alt="item.alt ?? ''"
+                class="h-full w-full object-cover"
+                loading="lazy"
+              />
+
+              <!-- Video / file icon -->
+              <div
+                v-else
+                class="flex h-full w-full flex-col items-center justify-center gap-1 bg-gray-50 text-gray-400"
+                aria-hidden="true"
+              >
+                <span class="text-3xl">{{ item.type === 'video' ? '▶' : '📄' }}</span>
+                <span class="max-w-full truncate px-1 text-xs">
+                  {{ item.url.split('/').pop() }}
+                </span>
+              </div>
+
+              <!-- Selection overlay tick -->
+              <div
+                v-if="selectedItem?.id === item.id"
+                class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-indigo-600 text-xs text-white"
+                aria-hidden="true"
+              >
+                ✓
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <!-- Pagination -->
+        <div
+          v-if="totalPages > 1"
+          class="flex items-center justify-center gap-3 border-t border-gray-100 px-5 py-2"
+        >
+          <button
+            type="button"
+            :disabled="page === 1"
+            class="rounded px-2 py-1 text-sm text-gray-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+            @click="page--"
+          >
+            ← Prev
+          </button>
+          <span class="text-xs text-gray-500">{{ page }} / {{ totalPages }}</span>
+          <button
+            type="button"
+            :disabled="page === totalPages"
+            class="rounded px-2 py-1 text-sm text-gray-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+            @click="page++"
+          >
+            Next →
+          </button>
+        </div>
+
+        <!-- Footer -->
+        <div class="flex justify-end gap-3 border-t border-gray-200 px-5 py-4">
+          <button
+            type="button"
+            class="rounded-md px-4 py-2 text-sm font-medium text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            @click="$emit('close')"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            :disabled="!selectedItem"
+            class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+            @click="confirm"
+          >
+            Select
+          </button>
+        </div>
+
+      </div>
+    </div>
+  </Teleport>
+</template>