|
| 1 | +<!-- |
| 2 | + - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors |
| 3 | + - SPDX-License-Identifier: AGPL-3.0-or-later |
| 4 | +--> |
| 5 | + |
| 6 | +<script setup lang="ts"> |
| 7 | +import type { IAppstoreApp, IAppstoreExApp } from '../apps.ts' |
| 8 | +
|
| 9 | +import { mdiInformationOutline } from '@mdi/js' |
| 10 | +import { t } from '@nextcloud/l10n' |
| 11 | +import { useRoute } from 'vue-router' |
| 12 | +import { computed } from 'vue' |
| 13 | +import NcActionButton from '@nextcloud/vue/components/NcActionButton' |
| 14 | +import NcActionRouter from '@nextcloud/vue/components/NcActionRouter' |
| 15 | +import NcActions from '@nextcloud/vue/components/NcActions' |
| 16 | +import NcButton from '@nextcloud/vue/components/NcButton' |
| 17 | +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' |
| 18 | +import AppIcon from './AppIcon.vue' |
| 19 | +import AppLevelBadge from './AppLevelBadge.vue' |
| 20 | +import AppDaemonBadge from './AppDaemonBadge.vue' |
| 21 | +import { useActions } from '../composables/useActions.ts' |
| 22 | +
|
| 23 | +const { app, isNarrow } = defineProps<{ |
| 24 | + app: IAppstoreApp | IAppstoreExApp, |
| 25 | + isNarrow?: boolean |
| 26 | +}>() |
| 27 | +
|
| 28 | +const actions = useActions(() => app) |
| 29 | +const inlineActions = computed(() => !isNarrow || actions.value.length === 1 |
| 30 | + ? actions.value.slice(0, 1) |
| 31 | + : []) |
| 32 | +const menuActions = computed(() => actions.value.slice(inlineActions.value.length)) |
| 33 | +
|
| 34 | +const route = useRoute() |
| 35 | +const detailsRoute = computed(() => ({ |
| 36 | + name: route.name!, |
| 37 | + params: { |
| 38 | + ...route.params, |
| 39 | + id: app.id, |
| 40 | + }, |
| 41 | +})) |
| 42 | +</script> |
| 43 | + |
| 44 | +<template> |
| 45 | + <tr :class="$style.appTableRow"> |
| 46 | + <td> |
| 47 | + <NcButton |
| 48 | + alignment="start" |
| 49 | + :title="t('appstore', 'Show details')" |
| 50 | + :to="detailsRoute" |
| 51 | + variant="tertiary-no-background" |
| 52 | + wide> |
| 53 | + <template #icon> |
| 54 | + <AppIcon :app :size="24" /> |
| 55 | + </template> |
| 56 | + {{ app.name }} |
| 57 | + <span class="hidden-visually">({{ t('appstore', 'Show details') }})</span> |
| 58 | + </NcButton> |
| 59 | + </td> |
| 60 | + <td> |
| 61 | + <span :class="$style.appTableRow__versionCell">{{ app.version }}</span> |
| 62 | + </td> |
| 63 | + <td v-if="!isNarrow"> |
| 64 | + <div :class="$style.appTableRow__levelCell"> |
| 65 | + <AppLevelBadge v-if="app.level" :level="app.level" /> |
| 66 | + <AppDaemonBadge v-if="'daemon' in app && app.daemon" :daemon="app.daemon" /> |
| 67 | + </div> |
| 68 | + </td> |
| 69 | + <td> |
| 70 | + <div :class="$style.appTableRow__actionsCell"> |
| 71 | + <NcButton v-for="action in inlineActions" |
| 72 | + :key="action.id" |
| 73 | + :variant="action.variant" |
| 74 | + @click="action.callback(app)"> |
| 75 | + {{ action.label(app) }} |
| 76 | + </NcButton> |
| 77 | + <NcActions force-menu> |
| 78 | + <NcActionButton |
| 79 | + v-for="action in menuActions" |
| 80 | + :key="action.id" |
| 81 | + closeAfterClick |
| 82 | + @click="action.callback(app)"> |
| 83 | + <template #icon> |
| 84 | + <NcIconSvgWrapper :path="action.icon" /> |
| 85 | + </template> |
| 86 | + {{ action.label(app) }} |
| 87 | + </NcActionButton> |
| 88 | + <NcActionRouter closeAfterClick :to="detailsRoute"> |
| 89 | + <template #icon> |
| 90 | + <NcIconSvgWrapper :path="mdiInformationOutline" /> |
| 91 | + </template> |
| 92 | + {{ t('appstore', 'Show details') }} |
| 93 | + </NcActionRouter> |
| 94 | + </NcActions> |
| 95 | + </div> |
| 96 | + </td> |
| 97 | + </tr> |
| 98 | +</template> |
| 99 | + |
| 100 | +<style module> |
| 101 | +.appTableRow { |
| 102 | + height: calc(var(--default-clickable-area) + var(--default-grid-baseline)); |
| 103 | +} |
| 104 | +
|
| 105 | +.appTableRow td { |
| 106 | + padding-block: calc(var(--default-grid-baseline) / 2); |
| 107 | + vertical-align: middle; |
| 108 | +} |
| 109 | +
|
| 110 | +.appTableRow__nameCell { |
| 111 | + display: flex; |
| 112 | + align-items: center; |
| 113 | + gap: var(--default-grid-baseline) |
| 114 | +} |
| 115 | +
|
| 116 | +.appTableRow__levelCell { |
| 117 | + display: flex; |
| 118 | + align-items: center; |
| 119 | + gap: var(--default-grid-baseline) |
| 120 | +} |
| 121 | +
|
| 122 | +.appTableRow__versionCell { |
| 123 | + color: var(--color-text-maxcontrast); |
| 124 | +} |
| 125 | +
|
| 126 | +.appTableRow__actionsCell { |
| 127 | + display: flex; |
| 128 | + gap: var(--default-grid-baseline); |
| 129 | + justify-content: end; |
| 130 | +} |
| 131 | +</style> |
0 commit comments