Skip to content

Commit

Permalink
Support buttons columns for tbale items layout
Browse files Browse the repository at this point in the history
  • Loading branch information
distantnative committed Dec 19, 2024
1 parent 9a27714 commit a54a139
Show file tree
Hide file tree
Showing 7 changed files with 36 additions and 87 deletions.
9 changes: 0 additions & 9 deletions config/sections/mixins/layout.php
Original file line number Diff line number Diff line change
Expand Up @@ -94,15 +94,6 @@
];
}

if ($this->type === 'pages') {
$columns['flag'] = [
'label' => ' ',
'mobile' => true,
'type' => 'flag',
'width' => 'var(--table-row-height)',
];
}

return $columns;
},
],
Expand Down
5 changes: 0 additions & 5 deletions panel/lab/components/fieldpreviews/flag/index.php

This file was deleted.

35 changes: 0 additions & 35 deletions panel/lab/components/fieldpreviews/flag/index.vue

This file was deleted.

32 changes: 32 additions & 0 deletions panel/src/components/Collection/Items.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,27 @@
>
<slot name="options" v-bind="{ item, index }" />
</template>

<template #extra-columns-headers>
<th
v-for="(button, buttonIndex) in table.rows[0].buttons"
:key="'button-' + buttonIndex"
:data-column-id="'buttons-' + buttonIndex"
:style="{ width: 'var(--table-row-height)' }"
data-mobile="true"
class="k-items-table-layout-buttons-column"
/>
</template>

<template #extra-columns="{ row: item, rowIndex: index }">

Check failure on line 30 in panel/src/components/Collection/Items.vue

View workflow job for this annotation

GitHub Actions / Coding Style

'index' is defined but never used
<td
v-for="(button, buttonIndex) in item.buttons"
:key="'button-' + buttonIndex"
class="k-items-table-layout-buttons-column"
>
<k-button v-bind="button" />
</td>
</template>
</k-table>

<!-- Layout: cards, cardlets, list -->
Expand Down Expand Up @@ -235,4 +256,15 @@ export default {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
}
.k-table .k-items-table-layout-buttons-column {
padding: 0;
width: var(--table-row-height);
text-align: center;
}
.k-table .k-items-table-layout-buttons-column .k-button {
--button-width: 100%;
--button-height: 100%;
outline-offset: -2px;
}
</style>
36 changes: 0 additions & 36 deletions panel/src/components/Forms/Previews/FlagFieldPreview.vue

This file was deleted.

2 changes: 0 additions & 2 deletions panel/src/components/Forms/Previews/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import ColorFieldPreview from "./ColorFieldPreview.vue";
import DateFieldPreview from "./DateFieldPreview.vue";
import EmailFieldPreview from "./EmailFieldPreview.vue";
import FilesFieldPreview from "./FilesFieldPreview.vue";
import FlagFieldPreview from "./FlagFieldPreview.vue";
import HtmlFieldPreview from "./HtmlFieldPreview.vue";
import ImageFieldPreview from "./ImageFieldPreview.vue";
import LinkFieldPreview from "./LinkFieldPreview.vue";
Expand All @@ -25,7 +24,6 @@ export default {
app.component("k-date-field-preview", DateFieldPreview);
app.component("k-email-field-preview", EmailFieldPreview);
app.component("k-files-field-preview", FilesFieldPreview);
app.component("k-flag-field-preview", FlagFieldPreview);
app.component("k-html-field-preview", HtmlFieldPreview);
app.component("k-image-field-preview", ImageFieldPreview);
app.component("k-link-field-preview", LinkFieldPreview);
Expand Down
4 changes: 4 additions & 0 deletions panel/src/components/Layout/Table.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@
</slot>
</th>

<slot name="extra-columns-headers" />

<th
v-if="hasOptions"
data-mobile="true"
Expand Down Expand Up @@ -126,6 +128,8 @@
"
/>

<slot name="extra-columns" v-bind="{ row, rowIndex }" />

<!-- Options -->
<td
v-if="hasOptions"
Expand Down

0 comments on commit a54a139

Please sign in to comment.