bfg-common 1.3.231 → 1.3.233

package/components/atoms/table/dataGrid/DataGrid.vue

@@ -16,8 +16,9 @@
         >
           <atoms-the-icon class="filter-icon" name="filter" />
           <input
-            v-model.trim="mainFilter"
             :id="`${props.testId}-main-filter-input`"
+            v-model.trim="mainFilter"
+            :data-id="`${props.testId}-main-filter-input`"
             :placeholder="props.mainFilterPlaceholder"
             type="text"
             @input="emits('main-filter', mainFilter)"
@@ -52,6 +53,7 @@
                             <input
                               :id="`${props.testId}-${inputId}-all`"
                               v-model="selectedAll"
+                              :data-id="`${props.testId}-filter-all`"
                               type="checkbox"
                               class="checkbox-btn"
                               :value="-1"
@@ -90,6 +92,7 @@
                         <div class="datagrid-column-flex">
                           <button
                             :id="`${props.testId}-sort-column-${key}`"
+                            :data-id="`${item.testId}-sort-column`"
                             :class="[
                               'datagrid-column-title',
                               {
@@ -127,6 +130,7 @@
                           <button
                             v-if="item.hasFilter"
                             :id="`${props.testId}-filter-icon-${key}`"
+                            :data-id="`${item.testId}-filter-icon`"
                             class="datagrid-filter-toggle clr-anchor clr-smart-open-close"
                             @click="filterShow[key] = !filterShow[key]"
                           >
@@ -152,6 +156,7 @@
                             <input
                               :id="`${props.testId}-filter-input-${key}`"
                               v-model="filterTerm[key]"
+                              :data-id="`${item.testId}-filter-input`"
                               type="text"
                               @input="filtering"
                             />
@@ -203,6 +208,7 @@
                 >
                   <div>
                     <div
+                      :data-id="`${item.testId}-select-row`"
                       class="datagrid-row-master datagrid-row-flex"
                       @click.stop="selectRowById(item[0])"
                     >
@@ -233,6 +239,7 @@
                             >
                               <button
                                 :id="`${props.testId}-toggle-icon-${key}`"
+                                :data-id="`${item.testId}-toggle-button`"
                                 class="datagrid-expandable-caret-button reset-btn"
                                 @click="toggle(key)"
                               >
@@ -264,6 +271,7 @@
                                   :id="`${props.testId}-${inputId}-${item[0].id}`"
                                   :key="item[0].id"
                                   v-model="selectedRowLocal"
+                                  :data-id="`${item.testId}-row-selection-input`"
                                   :type="props.type"
                                   :class="`${props.type}-btn`"
                                   :value="item[0].id"
@@ -289,6 +297,7 @@
                           <div class="flex-align-center">
                             <button
                               :id="`${props.testId}-toggle-icon-${key}`"
+                              :date-id="`${item.testId}-toggle-row-button`"
                               class="datagrid-expandable-caret-button reset-btn"
                               @click="toggle(key)"
                             >
@@ -338,6 +347,7 @@
                               <div
                                 v-if="item2.data?.name === 'doubleArrows'"
                                 :id="`show-info-${item[0].data.id}`"
+                                :data-id="`${item[0].testId}-double-arrow`"
                                 :class="[
                                   'double-arrow-wrap',
                                   {
@@ -415,6 +425,7 @@
             <div class="clr-checkbox-wrapper">
               <input
                 :id="`${props.testId}-check-all`"
+                :data-id="`${props.testId}-check-all`"
                 type="checkbox"
                 checked
               />
@@ -470,6 +481,7 @@
         <slot name="hiddenInfoHeader" :item="showedInfoCol" />
         <button
           :id="`${props.testId}-hidden-info-toggle-icon-${showedInfoRow?.key}-${showedInfoRow?.data.name}`"
+          :data-id="`${props.testId}-hidden-info-toggle-icon`"
           class="signpost-action close"
           @click="isShowHiddenInfo = false"
         >

package/components/atoms/table/dataGrid/DataGridColumnSwitch.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="column-switch-wrap flex-align-center relative" @click.stop>
-    <button :id="columnSwitchId" class="column-switch-btn" @click.stop="toggle">
+    <button
+      :id="columnSwitchId"
+      :data-id="`${props.testId}-toggle-button`"
+      class="column-switch-btn"
+      @click.stop="toggle"
+    >
       <atoms-the-icon
         name="column-switch"
         width="16px"
@@ -50,7 +55,10 @@
 </template>
 
 <script setup lang="ts">
-import { UI_I_HTMLSelectElement, UI_I_Localization } from '~/lib/models/interfaces'
+import {
+  UI_I_HTMLSelectElement,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
 import { UI_I_ColumnKey } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
 
 const props = withDefaults(

package/components/atoms/table/dataGrid/DataGridPage.vue

@@ -2,6 +2,7 @@
   <div v-show="props.totalPages > 1" class="pagination-list">
     <button
       :id="`${props.testId}-first-button`"
+      :data-id="`${props.testId}-first-button`"
       class="pagination-first"
       :disabled="currentPage === 1"
       @click="changeCurrentPage(1)"
@@ -15,6 +16,7 @@
     </button>
     <button
       :id="`${props.testId}-prev-button`"
+      :data-id="`${props.testId}-prev-button`"
       class="pagination-previous"
       :disabled="currentPage === 1"
       @click="changeCurrentPage(currentPage - 1)"
@@ -30,6 +32,7 @@
     <input
       :id="`${props.testId}-page-input`"
       v-model="currentPageLazy"
+      :data-id="`${props.testId}-page-input`"
       type="text"
       class="pagination-current clr-input"
       @blur="changeCurrentPageManual"
@@ -39,6 +42,7 @@
 
     <button
       :id="`${props.testId}-next-button`"
+      :data-id="`${props.testId}-next-button`"
       class="pagination-next"
       :disabled="currentPage === props.totalPages"
       @click="changeCurrentPage(currentPage + 1)"
@@ -52,6 +56,7 @@
     </button>
     <button
       :id="`${props.testId}-last-button`"
+      :data-id="`${props.testId}-last-button`"
       class="pagination-last"
       :disabled="currentPage === props.totalPages"
       @click="changeCurrentPage(props.totalPages)"

package/components/atoms/table/dataGrid/lib/models/interfaces.ts

@@ -13,6 +13,7 @@ export interface UI_I_BodyItem {
   data?: any
   dataId?: string
   disabled?: boolean
+  testId?: string
 }
 export interface UI_I_HeadItem {
   key: string
@@ -23,6 +24,7 @@ export interface UI_I_HeadItem {
   filter: string
   width: string
   iconName?: string
+  testId?: string
 }
 
 export interface UI_I_ColumnKey {

package/components/atoms/table/simpleInfo/SimpleInfo.vue

@@ -5,7 +5,11 @@
         <tr>
           <td v-for="item in props.headItems" :key="item.text" class="row">
             <span> {{ item.text }}</span>
-            <span class="underlined" @click="selectNode(item.value)">
+            <span
+              class="underlined"
+              :data-id="`${item.testId}-select-node`"
+              @click="selectNode(item.value)"
+            >
               {{ item.value }}
             </span>
           </td>
@@ -19,7 +23,8 @@
 import { UI_I_TableInfo } from '~/components/atoms/table/simpleInfo/lib/models/interfaces'
 
 const props = defineProps<{
-  headItems: UI_I_TableInfo
+  headItems: UI_I_TableInfo[]
+  testId?: string
 }>()
 const emits = defineEmits(['select-node'])
 

package/components/atoms/table/simpleInfo/lib/models/interfaces.ts

@@ -1,4 +1,5 @@
 export interface UI_I_TableInfo {
   text: string
   value: string | number
+  testId?: string
 }

package/components/atoms/table/simpleTable/SimpleTable.vue

@@ -7,6 +7,7 @@
             v-for="(item, index) in headItems"
             :key="item.text"
             :style="{ width: `${100 / headItems.length}%` }"
+            :data-id="item.testId"
             @click="sortByIndex(index)"
           >
             <span class="sort-arrow-wrap">
@@ -31,11 +32,13 @@
           :class="{
             selected: props.selectedRowKey === key || selectedRowKey === key,
           }"
+          :data-id="`${props.testId}-row-${key}`"
           @click="selectRow(key, item)"
         >
           <td
             v-for="(item2, key2) in item"
             :key="key2"
+            :data-id="item2.testId"
             @click="changeItemEditStatus(item2)"
           >
             <span v-if="!item2.isEdit">{{ item2.text }}</span>
@@ -43,6 +46,7 @@
               v-else
               :id="`${props.testId}-edit-input-${key}-${key2}`"
               v-model="item2.text"
+              :data-id="`${item2.testId}-edit-input`"
               type="text"
               @blur="resetEditStatus"
             />
@@ -69,7 +73,7 @@ import type {
 
 const props = withDefaults(
   defineProps<{
-    headItems: UI_I_TableHeadItem
+    headItems: UI_I_TableHeadItem[]
     bodyItems: UI_I_TableBodyItem[][]
     editable?: boolean
     testId?: string

package/components/atoms/table/simpleTable/lib/models/interfaces.ts

@@ -3,8 +3,10 @@ export interface UI_I_TableBodyItem {
   editable: boolean
   isEdit?: boolean
   id?: string
+  testId?: string
 }
 
 export interface UI_I_TableHeadItem {
   text: string
+  testId?: string
 }

package/components/atoms/tabs/VerticalTabs.vue

@@ -4,6 +4,7 @@
       <li
         v-for="(item, key) in props.items"
         :id="`${props.testId}-item-${key}`"
+        :data-id="item.testId"
         :key="item.value"
         :class="[
           'vertical-nav-link group-nav-link',

package/components/atoms/tabs/lib/models/interfaces.ts

@@ -1,4 +1,5 @@
 export interface UI_I_VerticalTabs {
-    text: string
-    value: string | number
+  text: string
+  value: string | number
+  testId?: string
 }