mirrors/n8n
2
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-11-20 17:46:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

replace ElSelect

Browse Source
This commit is contained in:
r00gm 2025-11-18 14:26:28 +01:00
parent 5319bc8659
commit 2290ab39a9
No known key found for this signature in database
2 changed files with 22 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.test.ts
View File

@ -8,9 +8,14 @@ import N8nDataTableServer, { type TableHeader } from './N8nDataTableServer.vue';
const renderComponent = createComponentRenderer(N8nDataTableServer);
const getRenderedOptions = async () => {
const dropdown = await waitFor(() => screen.getByRole('listbox'));
const dropdown = await waitFor(() => screen.getByTestId('page-size-select'));
expect(dropdown).toBeInTheDocument();
return dropdown.querySelectorAll('.el-select-dropdown__item');
const popoverId = dropdown.getAttribute('aria-controls') as string;
const popover = document.getElementById(popoverId) as HTMLElement;
expect(popover).toBeVisible();
return popover.querySelectorAll('[role="option"]');
};
const itemFactory = () => ({

51
packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue
View File

@ -39,10 +39,11 @@ import type {
} from '@tanstack/vue-table';
import { createColumnHelper, FlexRender, getCoreRowModel, useVueTable } from '@tanstack/vue-table';
import { useThrottleFn } from '@vueuse/core';
import { ElCheckbox, ElOption, ElSelect, ElSkeletonItem } from 'element-plus';
import { ElCheckbox, ElSkeletonItem } from 'element-plus';
import get from 'lodash/get';
import { computed, h, ref, shallowRef, useSlots, watch } from 'vue';
import Select from '../../v2/components/Select/Select.vue';
import N8nPagination from '../N8nPagination';
type VueClass = string | string[] | Record<string, boolean> | undefined;
@ -509,18 +510,13 @@ const table = useVueTable({
@update:current-page="page = $event - 1"
>
</N8nPagination>
<div class="table-pagination__sizes">
<div class="table-pagination__sizes__label">Page size</div>
<ElSelect
v-model.number="itemsPerPage"
class="table-pagination__sizes__select"
size="small"
:teleported="false"
@update:model-value="handlePageSizeChange"
>
<ElOption v-for="item in pageSizes" :key="item" :label="item" :value="item" />
</ElSelect>
</div>
<Select
v-model="itemsPerPage"
:class="$style.pagination"
:items="pageSizes"
data-test-id="page-size-select"
@update:model-value="handlePageSizeChange"
/>
</div>
</div>
</template>
@ -665,29 +661,6 @@ th.loading-row {
display: flex;
justify-content: flex-end;
align-items: center;
&__sizes {
display: flex;
&__label {
color: var(--color--text);
background-color: var(--color--background--light-2);
border: 1px solid var(--color--foreground);
border-right: 0;
font-size: 12px;
display: flex;
align-items: center;
padding: 0 8px;
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
}
&__select {
--input--radius--top-left: 0;
--input--radius--bottom-left: 0;
width: 70px;
}
}
}
.resizer {
@ -729,3 +702,9 @@ th:hover:not(:last-child) > .resizer {
}
}
</style>
<style module>
.pagination {
width: 65px;
}
</style>