diff --git a/packages/nc-gui/components/api-client/Headers.vue b/packages/nc-gui/components/api-client/Headers.vue
index 4047eb8652..d6e08efc38 100644
--- a/packages/nc-gui/components/api-client/Headers.vue
+++ b/packages/nc-gui/components/api-client/Headers.vue
@@ -87,7 +87,13 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
-
-
+
{{ type }}
diff --git a/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue b/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue
index c4bda123c6..f4a89a3b7e 100644
--- a/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue
@@ -78,7 +78,7 @@ watch(
-
+
{{ currencyLocale.text }}
@@ -98,6 +99,7 @@ vModel.value.meta = {
show-search
:filter-option="filterOption"
:disabled="isMoney && isPg"
+ dropdown-class-name="nc-dropdown-currency-cell-code"
>
{{ currencyCode }}
diff --git a/packages/nc-gui/components/smartsheet-column/DateOptions.vue b/packages/nc-gui/components/smartsheet-column/DateOptions.vue
index 84585a07d9..6e181a4693 100644
--- a/packages/nc-gui/components/smartsheet-column/DateOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/DateOptions.vue
@@ -17,7 +17,7 @@ if (!vModel.value.meta?.date_format) {
-
+
diff --git a/packages/nc-gui/components/smartsheet-column/DurationOptions.vue b/packages/nc-gui/components/smartsheet-column/DurationOptions.vue
index 770ddccb99..373e0fb75c 100644
--- a/packages/nc-gui/components/smartsheet-column/DurationOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/DurationOptions.vue
@@ -30,7 +30,7 @@ vModel.value.meta = {
-
+
{{ duration.title }}
diff --git a/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
index 8a85b54a49..42aa582b2a 100644
--- a/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
@@ -111,7 +111,13 @@ onMounted(() => {
v-if="!(isEdit && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))"
:label="$t('labels.columnType')"
>
-
+
diff --git a/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
index 411192378b..288691f1f0 100644
--- a/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
@@ -66,6 +66,7 @@ const refTables = $computed(() => {
v-model:value="vModel.childId"
show-search
:filter-option="(value, option) => option.key.toLowerCase().includes(value.toLowerCase())"
+ dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onDataTypeChange"
>
@@ -86,14 +87,26 @@ const refTables = $computed(() => {
-
+
{{ option }}
-
+
{{ option }}
diff --git a/packages/nc-gui/components/smartsheet-column/LookupOptions.vue b/packages/nc-gui/components/smartsheet-column/LookupOptions.vue
index 310375da15..df3e4ff484 100644
--- a/packages/nc-gui/components/smartsheet-column/LookupOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/LookupOptions.vue
@@ -62,7 +62,11 @@ const columns = $computed(() => {
-
+
{{ table.column.title }}
@@ -74,7 +78,12 @@ const columns = $computed(() => {
-
+
{{ column.title }}
diff --git a/packages/nc-gui/components/smartsheet-column/PercentOptions.vue b/packages/nc-gui/components/smartsheet-column/PercentOptions.vue
index 9d163c7fe7..bf136ba6bd 100644
--- a/packages/nc-gui/components/smartsheet-column/PercentOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/PercentOptions.vue
@@ -21,7 +21,7 @@ if (!vModel.value.meta?.precision) vModel.value.meta.precision = precisions[0].i
-
+
diff --git a/packages/nc-gui/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui/components/smartsheet-column/RatingOptions.vue
index 992a2511c6..704601a47d 100644
--- a/packages/nc-gui/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/RatingOptions.vue
@@ -72,7 +72,7 @@ watch(
-
+
-
+
{{ v }}
diff --git a/packages/nc-gui/components/smartsheet-column/RollupOptions.vue b/packages/nc-gui/components/smartsheet-column/RollupOptions.vue
index 0d4a11ec76..7fa7a643d3 100644
--- a/packages/nc-gui/components/smartsheet-column/RollupOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/RollupOptions.vue
@@ -75,7 +75,11 @@ const columns = $computed(() => {
-
+
{{ table.column.title }}
@@ -87,7 +91,12 @@ const columns = $computed(() => {
-
+
{{ column.title }}
@@ -95,7 +104,11 @@ const columns = $computed(() => {
-
+
{{ func.text }}
diff --git a/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index e35e9c4cc3..26093e5c08 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -57,6 +57,7 @@ const filterOption = (input: string, option: any) => {
show-search
:placeholder="$t('placeholder.selectField')"
:filter-option="filterOption"
+ dropdown-class-name="nc-dropdown-toolbar-field-list"
>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
index af6da2fa96..ae04476d9a 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
@@ -135,7 +135,13 @@ const getIcon = (c: ColumnType) =>
@click.stop
>
-
+
diff --git a/packages/nc-gui/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet-toolbar/SearchData.vue
index ce4763075e..b27d82bb9d 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/SearchData.vue
@@ -41,7 +41,7 @@ function onPressEnter() {
size="small"
:dropdown-match-select-width="false"
:options="columns"
- dropdown-class-name="!py-0 !rounded"
+ dropdown-class-name="!py-0 !rounded nc-dropdown-toolbar-search-field-option"
class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
/>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
index aefe7baa16..5f4eb2a010 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
@@ -71,7 +71,7 @@ watch(
v-model:value="sort.direction"
class="shrink grow-0 nc-sort-dir-select !text-xs"
:label="$t('labels.operation')"
- dropdown-class-name="sort-dir-dropdown"
+ dropdown-class-name="sort-dir-dropdown nc-dropdown-sort-dir"
@click.stop
@select="saveOrUpdate(sort, i)"
>
diff --git a/packages/nc-gui/components/smartsheet/ApiSnippet.vue b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
index 57813ab3fb..195ab4ef44 100644
--- a/packages/nc-gui/components/smartsheet/ApiSnippet.vue
+++ b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
@@ -171,7 +171,12 @@ watch($$(activeLang), (newLang) => {
hide-minimap
/>
-
+
{{ client }}
diff --git a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
index 4417ebe2ce..345807b076 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
@@ -210,7 +210,12 @@ onMounted(() => {
-
+
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index ce559cb338..c7845d362d 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -221,7 +221,7 @@ const clickInviteMore = () => {
{{ $t('labels.selectUserRole') }}
-
+
-
+
@@ -687,6 +693,7 @@ function handleEditableTnChange(idx: number) {
show-search
:options="uiTypeOptions"
:filter-option="filterOption"
+ dropdown-class-name="nc-dropdown-template-uidt"
/>
diff --git a/packages/nc-gui/components/webhook/ChannelMultiSelect.vue b/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
index 1bc2b2c064..ad2f39c92a 100644
--- a/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
+++ b/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
@@ -58,7 +58,13 @@ onMounted(() => {
-
+
{{ channel.channel }}
diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index ec7ba57b89..72f277cf9f 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -453,6 +453,7 @@ onMounted(async () => {
size="large"
:placeholder="$t('general.event')"
class="nc-text-field-hook-event"
+ dropdown-class-name="nc-dropdown-webhook-event"
>
{{ event.text.join(' ') }}
@@ -467,6 +468,7 @@ onMounted(async () => {
size="large"
class="nc-select-hook-notification-type"
:placeholder="$t('general.notification')"
+ dropdown-class-name="nc-dropdown-webhook-notification"
@change="onNotTypeChange(true)"
>
@@ -497,7 +499,12 @@ onMounted(async () => {
-
+
{{ method.title }}
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index 104f9f82df..1a34237689 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -359,7 +359,12 @@ onMounted(() => {
-
+
{{ client.text }}
@@ -433,7 +438,7 @@ onMounted(() => {
-
+
{{ opt }}
@@ -505,13 +510,19 @@ onMounted(() => {
-
+
{{ type }}
-
+
{{ type }}
diff --git a/scripts/cypress/integration/common/1b_table_column_operations.js b/scripts/cypress/integration/common/1b_table_column_operations.js
index b53436a7aa..a7c0c00494 100644
--- a/scripts/cypress/integration/common/1b_table_column_operations.js
+++ b/scripts/cypress/integration/common/1b_table_column_operations.js
@@ -70,7 +70,7 @@ export const genTest = (apiType, dbType) => {
// change column type and verify
cy.get(".nc-column-type-input").last().click();
- cy.getActiveSelection().find('.ant-select-item-option').contains("LongText").click();
+ cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains("LongText").click();
cy.get(".ant-btn-primary:visible").contains("Save").click();
cy.toastWait("Column updated");
diff --git a/scripts/cypress/integration/common/3b_formula_column.js b/scripts/cypress/integration/common/3b_formula_column.js
index a4ef1ae69f..9d6e0a6171 100644
--- a/scripts/cypress/integration/common/3b_formula_column.js
+++ b/scripts/cypress/integration/common/3b_formula_column.js
@@ -58,7 +58,7 @@ export const genTest = (apiType, dbType) => {
.clear()
.type(columnName);
cy.get(".nc-column-type-input").last().click().type("Formula");
- cy.getActiveSelection().find('.ant-select-item-option').contains("Formula").click();
+ cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains("Formula").click();
cy.get('textarea.nc-formula-input').click().type(formula, { parseSpecialCharSequences: false });
cy.get(".ant-btn-primary").contains("Save").should('exist').click();
diff --git a/scripts/cypress/integration/common/3c_lookup_column.js b/scripts/cypress/integration/common/3c_lookup_column.js
index 543c5e53ce..fc1bd6ab66 100644
--- a/scripts/cypress/integration/common/3c_lookup_column.js
+++ b/scripts/cypress/integration/common/3c_lookup_column.js
@@ -53,14 +53,14 @@ export const genTest = (apiType, dbType) => {
.clear()
.type(childCol);
cy.get(".nc-column-type-input").last().click().type("Lookup");
- cy.getActiveSelection().find('.ant-select-item-option').contains("Lookup").click();
+ cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains("Lookup").click();
// Configure Child table & column names
fetchParentFromLabel("Child table");
- cy.getActiveSelection().find('.ant-select-item-option').contains(childTable).click();
+ cy.getActiveSelection('.nc-dropdown-relation-table').find('.ant-select-item-option').contains(childTable).click();
fetchParentFromLabel("Child column");
- cy.getActiveSelection().find('.ant-select-item-option').contains(childCol).click();
+ cy.getActiveSelection('nc-dropdown-relation-column').find('.ant-select-item-option').contains(childCol).click();
cy.get(".ant-btn-primary").contains("Save").should('exist').click();
cy.toastWait(`Column created`);
diff --git a/scripts/cypress/integration/common/3d_rollup_column.js b/scripts/cypress/integration/common/3d_rollup_column.js
index d386d585b7..a3867b008d 100644
--- a/scripts/cypress/integration/common/3d_rollup_column.js
+++ b/scripts/cypress/integration/common/3d_rollup_column.js
@@ -59,17 +59,17 @@ export const genTest = (apiType, dbType) => {
.clear()
.type(columnName);
cy.get(".nc-column-type-input").last().click().type("RollUp");
- cy.getActiveSelection().find('.ant-select-item-option').contains("Rollup").click();
+ cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains("Rollup").click();
// Configure Child table & column names
fetchParentFromLabel("Child table");
- cy.getActiveSelection().find('.ant-select-item-option').contains(childTable).click();
+ cy.getActiveSelection('.nc-dropdown-relation-table').find('.ant-select-item-option').contains(childTable).click();
fetchParentFromLabel("Child column");
- cy.getActiveSelection().find('.ant-select-item-option').contains(childCol).click();
+ cy.getActiveSelection('.nc-dropdown-relation-column').find('.ant-select-item-option').contains(childCol).click();
fetchParentFromLabel("Aggregate function");
- cy.getActiveSelection().find('.ant-select-item-option').contains(aggregateFunc).click();
+ cy.getActiveSelection('.nc-dropdown-rollup-function').find('.ant-select-item-option').contains(aggregateFunc).click();
cy.get(".ant-btn-primary").contains("Save").should('exist').click();
cy.toastWait(`Column created`);
diff --git a/scripts/cypress/integration/common/3e_duration_column.js b/scripts/cypress/integration/common/3e_duration_column.js
index 4f8ef941b2..7aae994389 100644
--- a/scripts/cypress/integration/common/3e_duration_column.js
+++ b/scripts/cypress/integration/common/3e_duration_column.js
@@ -49,11 +49,11 @@ export const genTest = (apiType, dbType) => {
.clear()
.type(columnName);
cy.get(".nc-column-type-input").last().click().type("Duration");
- cy.getActiveSelection().find('.ant-select-item-option').contains("Duration").click();
+ cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains("Duration").click();
// Configure Duration format
fetchParentFromLabel("Duration Format");
- cy.getActiveSelection().find('.ant-select-item-option').contains(durationFormat).click();
+ cy.getActiveSelection('.nc-dropdown-duration-option').find('.ant-select-item-option').contains(durationFormat).click();
cy.get(".ant-btn-primary").contains("Save").should('exist').click();
cy.toastWait(`Column created`);
@@ -85,7 +85,7 @@ export const genTest = (apiType, dbType) => {
.type(newName);
// Configure Duration format
fetchParentFromLabel("Duration Format");
- cy.getActiveSelection().find('.ant-select-item-option').contains(newDurationFormat).click();
+ cy.getActiveSelection('.nc-dropdown-duration-option').find('.ant-select-item-option').contains(newDurationFormat).click();
cy.get(".ant-btn-primary:visible").contains("Save").click();
diff --git a/scripts/cypress/integration/common/3f_link_to_another_record.js b/scripts/cypress/integration/common/3f_link_to_another_record.js
index c19c074b55..dc25b2c8e2 100644
--- a/scripts/cypress/integration/common/3f_link_to_another_record.js
+++ b/scripts/cypress/integration/common/3f_link_to_another_record.js
@@ -40,7 +40,7 @@ export const genTest = (apiType, dbType) => {
cy.get(".nc-column-type-input").last()
.click()
.type("Link");
- cy.getActiveSelection()
+ cy.getActiveSelection('.nc-dropdown-column-type')
.find('.ant-select-item-option')
.contains("LinkToAnotherRecord").click();
@@ -56,7 +56,7 @@ export const genTest = (apiType, dbType) => {
.last()
.click()
.type(foreignTable);
- cy.getActiveSelection()
+ cy.getActiveSelection('.nc-dropdown-ltar-child-table')
.find('.ant-select-item-option')
.contains(foreignTable)
.click();
diff --git a/scripts/cypress/integration/common/6g_base_share.js b/scripts/cypress/integration/common/6g_base_share.js
index 2c481e7db6..2644c940d9 100644
--- a/scripts/cypress/integration/common/6g_base_share.js
+++ b/scripts/cypress/integration/common/6g_base_share.js
@@ -85,7 +85,7 @@ export const genTest = (apiType, dbType) => {
cy.getActiveModal().find(".nc-shared-base-role").click();
- cy.getActiveSelection()
+ cy.getActiveSelection('.nc-dropdown-share-base-role')
.find('.ant-select-item')
.eq(1)
.click();
@@ -134,7 +134,7 @@ style="background: transparent; ">
cy.getActiveModal().find(".nc-shared-base-role").click();
- cy.getActiveSelection()
+ cy.getActiveSelection('.nc-dropdown-share-base-role')
.find('.ant-select-item')
.eq(0)
.click();
diff --git a/scripts/cypress/integration/common/8a_webhook.js b/scripts/cypress/integration/common/8a_webhook.js
index 224a801e8b..101565d973 100644
--- a/scripts/cypress/integration/common/8a_webhook.js
+++ b/scripts/cypress/integration/common/8a_webhook.js
@@ -36,7 +36,7 @@ function createWebhook(hook, test) {
.type('{downarrow}')
.type('{downarrow}')
- cy.getActiveSelection().find('.ant-select-item-option-content').contains('Content-Type').should('exist').click();
+ cy.getActiveSelection('.nc-dropdown-webhook-header').find('.ant-select-item-option-content').contains('Content-Type').should('exist').click();
cy.get("input.nc-input-hook-header-value")
.should("exist")
@@ -78,7 +78,7 @@ function configureWebhook(hook, test) {
if (hook?.event) {
cy.get(".nc-text-field-hook-event").should("exist").click();
- cy.getActiveSelection()
+ cy.getActiveSelection('.nc-dropdown-webhook-event')
.find(`.ant-select-item`)
.contains(hook.event)
.should("exist")
diff --git a/scripts/cypress/support/page_objects/mainPage.js b/scripts/cypress/support/page_objects/mainPage.js
index ce21a90e7a..1771009ab8 100644
--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@@ -119,7 +119,7 @@ export class _mainPage {
// opt-in requested role & submit
// cy.getActiveSelection().contains(roleType).click({force: true});
- cy.getActiveSelection().find('.nc-role-option').eq(roleIndex).should('exist').click()
+ cy.getActiveSelection('.nc-dropdown-user-role').find('.nc-role-option').eq(roleIndex).should('exist').click()
cy.getActiveModal(".nc-modal-invite-user-and-share-base").find("button.ant-btn-primary").click();
cy.toastWait("Successfully updated the user details");
@@ -204,7 +204,7 @@ export class _mainPage {
// change column type and verify
cy.get(".nc-column-type-input").last().click();
- cy.getActiveSelection().find('.ant-select-item-option').contains(colType).click();
+ cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains(colType).click();
cy.get(".ant-btn-primary:visible").contains("Save").click();
cy.toastWait(`Column created`);
diff --git a/scripts/cypress/support/page_objects/navigation.js b/scripts/cypress/support/page_objects/navigation.js
index 6f906ecc1c..50c4bcbf51 100644
--- a/scripts/cypress/support/page_objects/navigation.js
+++ b/scripts/cypress/support/page_objects/navigation.js
@@ -187,7 +187,7 @@ export class _projectsPage {
if (cred.databaseType === 1) {
cy.get('.nc-extdb-db-type').should('exist').click();
- cy.getActiveSelection().find('.ant-select-item-option').contains("PostgreSQL").click();
+ cy.getActiveSelection('.nc-dropdown-ext-db-type').find('.ant-select-item-option').contains("PostgreSQL").click();
}
if (cred.databaseName !== "") {
|