github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Feat: allow ctrl click to open new tab on tabular (#9115)

Browse Source 
* feat: allow ctrl click to open new tab on tabular

* support metaKey + click
This commit is contained in:
José Varela
2021-10-25 16:22:48 +01:00
committed by GitHub
parent 06dcd5f7f7
commit a7c16ca975
7 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/v-table/table-row/table-row.vue
View File

@@ -6,7 +6,7 @@
'--table-row-height': height + 2 + 'px',
'--table-row-line-height': 1,
}"
@click="$emit('click')"
@click="$emit('click', $event)"
>
<td v-if="showManualSort" class="manual cell" @click.stop>
<v-icon name="drag_handle" class="drag-handle" :class="{ 'sorted-manually': sortedManually }" />

2
app/src/components/v-table/v-table.vue
View File

@@ -61,7 +61,7 @@
:sorted-manually="internalSort.by === manualSortKey"
:has-click-listener="!disabled && clickable"
:height="rowHeight"
@click="clickable ? $emit('click:row', element) : null"
@click="clickable ? $emit('click:row', { item: element, event: $event }) : null"
@item-selected="
onItemSelected({
item: element,

7
app/src/layouts/tabular/index.ts
View File

@@ -259,7 +259,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
getFieldDisplay,
};
function onRowClick(item: Item) {
function onRowClick({ item, event }: { item: Item; event: PointerEvent }) {
if (props.readonly === true || !primaryKeyField.value) return;
const primaryKey = item[primaryKeyField.value.field];
@@ -271,7 +271,10 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
selection.value = selection.value.filter((item) => item !== primaryKey);
}
} else {
router.push(`/collections/${collection.value}/${encodeURIComponent(primaryKey)}`);
const next = router.resolve(`/collections/${collection.value}/${encodeURIComponent(primaryKey)}`);
if (event.ctrlKey || event.metaKey) window.open(next.href, '_blank');
else router.push(next);
}
}

2
app/src/modules/insights/routes/overview.vue
View File

@@ -166,7 +166,7 @@ export default defineComponent({
md,
};
function navigateToDashboard(dashboard: Dashboard) {
function navigateToDashboard({ item: dashboard }: { item: Dashboard }) {
router.push(`/insights/${dashboard.id}`);
}

2
app/src/modules/settings/routes/presets/collection/collection.vue
View File

@@ -252,7 +252,7 @@ export default defineComponent({
return { headers };
}
function onRowClick(item: Preset) {
function onRowClick({ item }: { item: Preset }) {
if (selection.value.length === 0) {
router.push(`/settings/presets/${item.id}`);
} else {

2
app/src/modules/settings/routes/roles/collection.vue
View File

@@ -155,7 +155,7 @@ export default defineComponent({
}
}
function navigateToRole(item: Role) {
function navigateToRole({ item }: { item: Role }) {
router.push(`/settings/roles/${item.id}`);
}
},

18
docs/reference/app/components/v-table.md
View File

@@ -136,15 +136,15 @@ export default defineComponent({
#### Events
| Event | Description | Value |
| ---------------- | --------------------------------------------------- | ------------------------------- |
| `update:sort` | `v-model` event for `sort` prop | `{ by: string, desc: boolean }` |
| `click:row` | When a row has been clicked | |
| `update:items` | When changes to the items where made | |
| `manual-sort` | When a user manually sorts the items | |
| `update:headers` | `v-model` event for `headers` prop or `HeaderRaw[]` | |
| `item-selected` | Emitted when an item is selected or deselected | `{ item: any, value: boolean }` |
| `select` | Emitted when selected items change | `any[]` |
| Event | Description | Value |
| ---------------- | --------------------------------------------------- | ----------------------------------- |
| `update:sort` | `v-model` event for `sort` prop | `{ by: string, desc: boolean }` |
| `click:row` | When a row has been clicked | `{item: any, event: PointerEvent }` |
| `update:items` | When changes to the items where made | |
| `manual-sort` | When a user manually sorts the items | |
| `update:headers` | `v-model` event for `headers` prop or `HeaderRaw[]` | |
| `item-selected` | Emitted when an item is selected or deselected | `{ item: any, value: boolean }` |
| `select` | Emitted when selected items change | `any[]` |
#### Slots