Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[6.x] Make array and table fieldtypes more similar #13174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackmcdade merged 9 commits into from
Dec 1, 2025
Merged

[6.x] Make array and table fieldtypes more similar #13174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
de1d401
Use some of the newer components for the array fieldtype
JayGeorge Nov 25, 2025
81b4fd3
Array fieldtype - Change "delete value" to "delete row"
JayGeorge Nov 25, 2025
e66beaf
Array fieldtype - Remove focus override
JayGeorge Nov 25, 2025
da83fed
Add data-ui-control attributes to the table fieldtype too
JayGeorge Nov 25, 2025
d641eb3
Remove stray classes
JayGeorge Nov 25, 2025
049536b
Table field - update input to ui-input
JayGeorge Nov 25, 2025
0989e1a
Correct list fieldtype button
JayGeorge Dec 1, 2025
e2d3892
Correct property name
JayGeorge Dec 1, 2025
c48453b
Add delete action to array fieldtype
JayGeorge Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions resources/css/components/fieldtypes/table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ Table Fieldtype
========================================================================== */

.table-contained {
@apply relative mb-4 w-full rounded-lg border text-gray shadow-ui-sm outline-hidden dark:border-gray-700 dark:text-dark-150 text-start;
@apply relative mb-4 w-full rounded-lg border shadow-ui-sm outline-hidden dark:border-gray-700 text-start;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
Expand Down Expand Up @@ -119,10 +119,7 @@ Table Fieldtype

[data-ui-control] {
@apply block w-full max-w-full rounded-none appearance-none border p-2;
@apply border-none bg-white dark:bg-gray-900 text-sm shadow-none outline-hidden;
&:focus {
@apply bg-gray-100 inset-shadow-xs ring-0 dark:bg-gray-800;
}
@apply border-none bg-white dark:bg-gray-900 text-sm shadow-none;
}

.row-controls {
Expand Down
17 changes: 6 additions & 11 deletions resources/js/components/fieldtypes/ArrayFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,26 +80,21 @@
/>
</td>
<td class="row-controls" v-if="!isReadOnly">
<button
@click="deleteOrConfirm(index)"
class="inline text-lg antialiased opacity-25 hover:opacity-75 cursor-pointer"
>
&times;
</button>
<ui-button icon="x" variant="subtle" size="xs" round delete-action @click="deleteOrConfirm(index)" :aria-label="__('Delete Row')" v-tooltip="__('Delete Row')" />
</td>
</tr>
</tbody>
</sortable-list>
</table>

<Button @click="addValue" icon="plus" size="sm" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed">
{{ addButton }}
</Button>
<div class="flex gap-2">
<ui-button @click="addValue" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" />
</div>

<confirmation-modal
v-if="deleting !== false"
:title="__('Delete Value')"
:bodyText="__('Are you sure you want to delete this value?')"
:title="__('Delete Row')"
:bodyText="__('Are you sure you want to delete this row?')"
:buttonText="__('Delete')"
:danger="true"
@confirm="deleteValue(deleting)"
Expand Down
14 changes: 9 additions & 5 deletions resources/js/components/fieldtypes/ListFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,16 @@
/>
</td>
<td class="row-controls" v-if="!isReadOnly">
<button
<ui-button
icon="x"
variant="subtle"
size="xs"
round
delete-action
@click="deleteValue(index)"
class="inline text-lg antialiased opacity-25 hover:opacity-75 cursor-pointer"
>
&times;
</button>
:aria-label="__('Delete Item')"
v-tooltip="__('Delete Item')"
/>
</td>
</tr>
</tbody>
Expand Down
6 changes: 1 addition & 5 deletions resources/js/components/fieldtypes/TableFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,9 @@
<tr class="sortable-row" v-for="(row, rowIndex) in data" :key="row._id">
<td class="table-drag-handle" v-if="!isReadOnly"></td>
<td v-for="(cell, cellIndex) in row.value.cells">
<input
type="text"
<ui-input
v-model="row.value.cells[cellIndex]"
class="input-text"
:readonly="isReadOnly"
@focus="$emit('focus')"
@blur="$emit('blur')"
/>
</td>
<td class="row-controls" v-if="canDeleteRows">
Expand Down