bfg-common 1.3.232 → 1.3.233

package/components/atoms/combobox/Combobox.vue

@@ -7,11 +7,13 @@
       v-show="!isOpen"
       class="angle-icon clr-icon"
       name="angle"
+      :data-id="`${props.testId}-open-icon`"
       @click="onFocusInput"
     />
     <input
       :id="id"
       v-model="modelValueLocal"
+      :data-id="`${props.testId}-search-input`"
       type="text"
       tabindex="-1"
       :disabled="props.disabled"
@@ -20,6 +22,7 @@
     />
     <atoms-the-icon
       v-show="isOpen"
+      :data-id="`${props.testId}-close-icon`"
       class="close-icon clr-icon"
       name="close-circle"
       @mousedown="clear"
@@ -31,6 +34,7 @@
           v-for="(item, key) in props.items"
           :key="key"
           :id="`${id}-${key}`"
+          :data-id="item.testId"
           class="btn btn-link dropdown-item"
           @mousedown="select(item.value)"
         >
@@ -48,6 +52,7 @@ const props = defineProps<{
   items: UI_I_OptionItem[]
   modelValue?: string | number
   disabled?: boolean
+  testId?: string
 }>()
 const emits = defineEmits<{
   (event: 'update:model-value', value: string | number): void

package/components/atoms/datepicker/Datepicker.vue

@@ -3,6 +3,7 @@
     <atoms-the-icon
       name="calendar"
       :class="[`btn-show-calendar  calendar-id-${uniqueId}`]"
+      :data-id="`${props.testId}-toggle-icon`"
       @click.stop="showHideCalendar"
     />
     <div
@@ -17,6 +18,7 @@
             v-for="(item, key) in allMonths"
             :key="key"
             :class="['calendar-btn', item.class]"
+            :data-id="item.testId"
             @click="selectMonth(key)"
           >
             {{ item.text }}
@@ -29,6 +31,7 @@
             :id="`${props.testId}-prev-button`"
             class="calendar-btn"
             title="Previous decade"
+            :data-id="`${props.testId}-select-prev-year`"
             @click="prevYear"
           >
             <atoms-the-icon
@@ -41,6 +44,7 @@
             :id="`${props.testId}-current-year-button`"
             class="calendar-btn set-current-data"
             title="Current decade"
+            :data-id="`${props.testId}-select-current-year`"
             @click="setCurrentYear"
           >
             <atoms-the-icon name="calendar-current-date" class="current-btn" />
@@ -49,6 +53,7 @@
             :id="`${props.testId}-next-button`"
             class="calendar-btn"
             title="Next decade"
+            :data-id="`${props.testId}-select-next-year`"
             @click="nextYear"
           >
             <atoms-the-icon
@@ -63,6 +68,7 @@
             v-for="(item, key) in allYears"
             :key="key"
             :class="['calendar-btn', item.class]"
+            :data-id="item.testId"
             @click="selectYear(item.text)"
           >
             {{ item.text }}
@@ -76,6 +82,7 @@
               :id="`${props.testId}-current-month-button`"
               class="calendar-btn show-all-months"
               title="Select Month"
+              :data-id="`${props.testId}-show-all-months`"
               @click="showAllMonths = true"
             >
               {{ currentMonth }}
@@ -84,6 +91,7 @@
               :id="`${props.testId}-current-year-button`"
               class="calendar-btn current-year"
               title="Select Year"
+              :data-id="`${props.testId}-select-all-years`"
               @click="showAllYears = true"
             >
               {{ currentYear }}
@@ -94,6 +102,7 @@
               :id="`${props.testId}-prev-month-button`"
               class="calendar-btn"
               title="Previous Month"
+              :data-id="`${props.testId}-select-prev-month`"
               @click="prevMonth"
             >
               <atoms-the-icon
@@ -106,6 +115,7 @@
               :id="`${props.testId}-current-date-button`"
               class="calendar-btn set-current-data"
               title="Current Month"
+              :data-id="`${props.testId}-set-current-date`"
               @click="setCurrentDate"
             >
               <atoms-the-icon
@@ -117,6 +127,7 @@
               :id="`${props.testId}-next-month-icon`"
               class="calendar-btn"
               title="Next Month"
+              :data-id="`${props.testId}-select-next-month`"
               @click="nextMonth"
             >
               <atoms-the-icon
@@ -136,6 +147,7 @@
               v-for="(item, key) in days"
               :key="key"
               :class="['item-day', item.class]"
+              :data-id="item.testId"
               @click="selectDay(item.text, item.class)"
             >
               {{ item.text }}
@@ -238,6 +250,7 @@ const renderCalendar = (): void => {
     days.value.push({
       text: result,
       class: 'prev-date',
+      testId: `day-${result}`,
     })
   }
   const indexCurrentMonth = shortMonths.findIndex(
@@ -253,6 +266,7 @@ const renderCalendar = (): void => {
       days.value.push({
         text: i,
         class: 'active',
+        testId: `day-${i}`,
       })
     } else if (
       i === new Date().getDate() &&
@@ -262,9 +276,10 @@ const renderCalendar = (): void => {
       days.value.push({
         text: i,
         class: 'today',
+        testId: `day-${i}`,
       })
     } else {
-      days.value.push({ text: i, class: '' })
+      days.value.push({ text: i, class: '', testId: `day-${i}` })
     }
   }
 
@@ -273,6 +288,7 @@ const renderCalendar = (): void => {
     days.value.push({
       text: j,
       class: 'next-date',
+      testId: `day-${j}`,
     })
   }
 }
@@ -284,6 +300,7 @@ const allMonths = computed<UI_I_Items[]>(() => {
     result.push({
       text: months.value[i],
       class: active,
+      testId: `month-${i}`,
     })
   }
   return result
@@ -299,6 +316,7 @@ const allYears = computed<UI_I_Items[]>(() => {
     result.push({
       text: i,
       class: active,
+      testId: `year-${i}`,
     })
   }
   return result

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

@@ -1,6 +1,7 @@
 export interface UI_I_Items {
   text: number | string
   class: string
+  testId: string
 }
 
 export interface UI_I_AllShortMonths {

package/components/atoms/dropdown/Portlet.vue

@@ -3,6 +3,7 @@
     <div
       class="portlet-titlebar"
       :class="{ disabled }"
+      :data-id="`${props.testId}-toggle-portlet`"
       @click="togglePortlet"
     >
       <atoms-the-icon
@@ -24,14 +25,17 @@
 
 <script setup lang="ts">
 const props = defineProps<{
-  title: string,
+  title: string
   disabled?: boolean
+  testId?: string
 }>()
 
 const isOpen = ref<boolean>(false)
 
 const portletCollapsed = computed<boolean>(() => {
-  if (props.disabled) { return true }
+  if (props.disabled) {
+    return true
+  }
   return isOpen.value
 })
 
@@ -68,12 +72,12 @@ const togglePortlet = (): boolean => (isOpen.value = !isOpen.value)
 
     .titlebar-text {
       flex: 1 1 100%;
-      display: inline-flex!important;
+      display: inline-flex !important;
       white-space: nowrap;
-      overflow: hidden!important;
-      padding: 0!important;
+      overflow: hidden !important;
+      padding: 0 !important;
       box-sizing: border-box;
-      max-width: none!important;
+      max-width: none !important;
       font-size: 14px;
     }
 
@@ -90,7 +94,6 @@ const togglePortlet = (): boolean => (isOpen.value = !isOpen.value)
         fill: #004a70;
       }
     }
-
   }
 
   .portlet-content {

package/components/atoms/dropdown/dropdown/Dropdown.vue

@@ -3,6 +3,7 @@
     <div
       v-on-click-outside="onClickOutsideHandler"
       class="dropdown-toggle-container"
+      :data-id="`${props.testId}-show-dropdown-menu`"
       @click="showDropMenu"
     >
       <span class="nav-link">
@@ -22,12 +23,19 @@
     >
       <div v-for="(item, key) in dropMenu" :key="key">
         <button
-            :id="`${props.testId}-item`"
+          :id="`${props.testId}-item`"
           class="dropdown-item"
           :class="item.disabled && 'disabled'"
+          :data-id="item.testId"
           @click="onSelect(key)"
         >
-          <a v-if="item.href" :id="`${props.testId}-link`" :href="item.href">{{ item.text }}</a>
+          <a
+            v-if="item.href"
+            :id="`${props.testId}-link`"
+            :href="item.href"
+            :data-id="`${item.testId}-link`"
+            >{{ item.text }}</a
+          >
           <a v-else>{{ item.text }} </a>
         </button>
         <div v-if="item.divider" class="dropdown-divider" />

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

@@ -5,4 +5,5 @@ export interface UI_I_DropMenu<Action> {
   disabled?: boolean
   divider?: boolean
   closeAfterClick?: boolean
+  testId?: string
 }

package/components/atoms/dropdown/tree/Tree.vue

@@ -3,6 +3,7 @@
     <button
       :id="`${props.testId}`"
       class="btn btn-outline-primary dropdown-toggle"
+      :data-id="`${props.testId}-toggle-tree`"
       @click.stop="toggle"
     >
       <span class="title">{{ props.title }}</span>
@@ -17,6 +18,7 @@
           :key="key2"
           :disabled="item2.disabled"
           class="btn dropdown-item"
+          :data-id="item2.testId"
           @click="select(item2)"
         >
           {{ item2.text }}

package/components/atoms/dropdown/tree/lib/models/interfaces.ts

@@ -2,6 +2,7 @@ export interface UI_I_DropdownTreeItemChild {
   text: string
   value: number
   disabled?: boolean
+  testId?: boolean
 }
 
 export interface UI_I_DropdownTreeItem {

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

@@ -3,10 +3,12 @@ export interface UI_I_VerticalStepItem {
   disabled: boolean
   complete: boolean
   description?: string
+  testId?: string
 }
 
 export interface UI_I_OptionItem {
   text: string
   value: any
   disabled?: boolean
+  testId?: string
 }

package/components/atoms/list/SelectList.vue

@@ -2,6 +2,7 @@
   <select
     :id="`${props.testId}-select`"
     v-model="selectedItem"
+    :data-id="props.testId"
     size="15"
     class="list"
   >

package/components/atoms/modal/Modal.vue

@@ -27,6 +27,7 @@
             <button
               v-if="!props.isHideCloseIcon"
               :id="`${props.testId}-close-icon`"
+              :data-id="`${props.testId}-close-button`"
               class="close"
               @click="hide"
             >
@@ -41,6 +42,7 @@
           <slot name="modalFooter">
             <button
               :id="`${props.testId}-cancel-button`"
+              :data-id="`${props.testId}-cancel-button`"
               class="btn btn-outline"
               @click="hide"
             >
@@ -48,6 +50,7 @@
             </button>
             <button
               :id="`${props.testId}-apply-button`"
+              :data-id="`${props.testId}-apply-button`"
               class="btn btn-primary"
               :class="props.loading && 'modal-dialog__loader'"
               :disabled="props.disabledSubmit"

package/components/atoms/modal/bySteps/BySteps.vue

@@ -7,10 +7,10 @@
             {{ props.title }}
           </h1>
           <atoms-step-vertical-step
-              :test-id="props.testId"
-              :items="props.stepItems"
-              :step-position="props.stepPosition"
-              @change="changeStep"
+            :test-id="props.testId"
+            :items="props.stepItems"
+            :step-position="props.stepPosition"
+            @change="changeStep"
           />
         </nav>
         <div class="modal-content">
@@ -23,51 +23,56 @@
               </div>
             </slot>
             <button
-                :id="`${props.testId}-close-icon`"
-                class="close"
-                @click="hide"
+              :id="`${props.testId}-close-icon`"
+              class="close"
+              :data-id="`${props.testId}-close-button`"
+              @click="hide"
             >
               <atoms-the-icon class="close-icon" name="close" />
             </button>
           </div>
           <div class="modal-body">
             <slot
-                name="modalBody"
-                :title="heading"
-                :description="stepDescription"
+              name="modalBody"
+              :title="heading"
+              :description="stepDescription"
             />
           </div>
           <div class="modal-footer">
             <slot name="modalFooter">
               <button
-                  :id="`${props.testId}-cancel-button`"
-                  class="btn btn-link"
-                  @click="hide"
+                :id="`${props.testId}-cancel-button`"
+                class="btn btn-link"
+                :data-id="`${props.testId}-cancel-button`"
+                @click="hide"
               >
                 {{ localization.cancel }}
               </button>
               <button
-                  v-show="props.stepPosition > 0"
-                  :id="`${props.testId}-back-button`"
-                  class="btn btn-outline"
-                  @click="back"
+                v-show="props.stepPosition > 0"
+                :id="`${props.testId}-back-button`"
+                class="btn btn-outline"
+                :data-id="`${props.testId}-back-button`"
+                @click="back"
               >
                 {{ localization.back }}
               </button>
               <button
-                  v-if="props.stepPosition === props.stepItems.length - 1"
-                  :id="`${props.testId}-finish-button`"
-                  class="btn btn-success"
-                  @click="finish"
+                v-if="props.stepPosition === props.stepItems.length - 1"
+                :id="`${props.testId}-finish-button`"
+                class="btn btn-success"
+                :data-id="`${props.testId}-finish-button`"
+                @click="finish"
               >
                 {{ localization.finish }}
               </button>
               <button
-                  v-else
-                  :id="`${props.testId}-next-button`"
-                  :disabled="props.disabledNext"
-                  class="btn btn-primary"
-                  @click="next"
+                v-else
+                :id="`${props.testId}-next-button`"
+                :disabled="props.disabledNext"
+                class="btn btn-primary"
+                :data-id="`${props.testId}-next-button`"
+                @click="next"
               >
                 {{ localization.next }}
               </button>
@@ -88,20 +93,20 @@
 import type { UI_I_VerticalStepItem } from '~/components/atoms/lib/models/interfaces'
 
 const props = withDefaults(
-    defineProps<{
-      show: boolean
-      title: string
-      stepItems: UI_I_VerticalStepItem[]
-      stepPosition: number
-      secondTitle?: string
-      testId?: string
-      loading?: boolean
-      disabledNext?: boolean
-    }>(),
-    {
-      testId: 'ui-modal-by-steps',
-      disabledNext: false,
-    }
+  defineProps<{
+    show: boolean
+    title: string
+    stepItems: UI_I_VerticalStepItem[]
+    stepPosition: number
+    secondTitle?: string
+    testId?: string
+    loading?: boolean
+    disabledNext?: boolean
+  }>(),
+  {
+    testId: 'ui-modal-by-steps',
+    disabledNext: false,
+  }
 )
 const emits = defineEmits<{
   (event: 'finish'): void
@@ -133,18 +138,18 @@ const changeStep = (key: number): void => {
 }
 
 watch(
-    () => props.stepPosition,
-    (value) => {
-      const { stepItems, secondTitle } = props
-      if (secondTitle) {
-        heading.value = secondTitle
-        return
-      }
+  () => props.stepPosition,
+  (value) => {
+    const { stepItems, secondTitle } = props
+    if (secondTitle) {
+      heading.value = secondTitle
+      return
+    }
 
-      heading.value = stepItems[value].text
-      stepDescription.value = stepItems[value]?.description || ''
-    },
-    { immediate: true }
+    heading.value = stepItems[value].text
+    stepDescription.value = stepItems[value]?.description || ''
+  },
+  { immediate: true }
 )
 </script>
 

package/components/atoms/modal/byStepsSecond/ByStepsSecond.vue

@@ -3,7 +3,12 @@
     <div class="modal-dialog modal-xl">
       <div class="wizard-modal-titlebar ui-draggable-handle">
         <h3>{{ props.title }}</h3>
-        <button :id="`${props.testId}-close-icon`" class="close" @click="hide">
+        <button
+          :id="`${props.testId}-close-icon`"
+          :data-id="`${props.testId}-close-button`"
+          class="close"
+          @click="hide"
+        >
           <atoms-the-icon class="close-icon" name="close" />
         </button>
       </div>
@@ -25,6 +30,7 @@
             <slot name="modalFooter">
               <button
                 :id="`${props.testId}-cancel-button`"
+                :data-id="`${props.testId}-cancel-button`"
                 class="btn btn-link"
                 @click="hide"
               >
@@ -33,6 +39,7 @@
               <button
                 v-show="props.stepPosition > 0"
                 :id="`${props.testId}-back-button`"
+                :data-id="`${props.testId}-back-button`"
                 class="btn btn-outline"
                 @click="back"
               >
@@ -41,6 +48,7 @@
               <button
                 v-if="props.stepPosition === props.stepItems.length - 1"
                 :id="`${props.testId}-finish-button`"
+                :data-id="`${props.testId}-finish-button`"
                 class="btn btn-success"
                 @click="finish"
               >
@@ -49,6 +57,7 @@
               <button
                 v-else
                 :id="`${props.testId}-next-button`"
+                :data-id="`${props.testId}-next-button`"
                 class="btn btn-primary"
                 @click="next"
               >

package/components/atoms/nav/VerticalNavBar.vue

@@ -4,6 +4,7 @@
       v-for="(item, key) in props.items"
       :id="`${props.testId}-link-${key}`"
       :key="key"
+      :data-id="item.testId"
       class="clr-treenode-link"
       :to="item.path"
       active-class="active"

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

@@ -2,4 +2,5 @@ export interface UI_I_NavItem {
   text: string,
   path: string
   iconClassName: string
+  testId?: string
 }

package/components/atoms/notificationBar/NotificationBar.vue

@@ -6,6 +6,7 @@
           <div class="alerts-page-down">
             <button
               :id="`${props.testId}-prev-button`"
+              :data-id="`${props.testId}-prev-button`"
               class="alerts-pager-button"
               @click="onPrev"
             >
@@ -20,6 +21,7 @@
           <div class="alerts-page-up">
             <button
               :id="`${props.testId}-next-button`"
+              :data-id="`${props.testId}-next-button`"
               class="alerts-pager-button"
               @click="onNext"
             >
@@ -44,7 +46,12 @@
 
               <span class="alert-text">{{ message }}</span>
 
-              <div v-if="isShowAction" class="alert-actions" @click="onAction">
+              <div
+                v-if="isShowAction"
+                :data-id="`${props.testId}-alert-actions`"
+                class="alert-actions"
+                @click="onAction"
+              >
                 <button
                   :id="`${props.testId}-action-button`"
                   class="btn alert-action"
@@ -57,6 +64,7 @@
 
           <button
             :id="`${props.testId}-remove-button`"
+            :data-id="`${props.testId}-remove-button`"
             class="close"
             @click="removeCurrentNotification"
           >

package/components/atoms/perPage/PerPage.vue

@@ -5,6 +5,7 @@
     <div class="clr-select-wrapper">
       <select
         :id="`${props.testId}-select`"
+        :data-id="`${props.testId}-select`"
         :value="props.pageSize"
         class="clr-page-size-select"
         @change="change"

package/components/atoms/popover/Popover.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="popover">
-    <div :id="id" @click="handleClick">
+    <div
+      :id="id"
+      :data-id="`${props.testId}-click-handler`"
+      @click="handleClick"
+    >
       <slot name="elem" />
     </div>
 

package/components/atoms/popup/SimplePopup.vue

@@ -8,6 +8,7 @@
     <div class="close-wrapper">
       <button
         :id="`${props.testId}-close-icon`"
+        :data-id="`${props.testId}-close-button`"
         class="close clr-smart-close-button"
         @click="hide"
       >

package/components/atoms/select/TheSelect.vue

@@ -2,6 +2,7 @@
   <div class="select">
     <button
       :id="props.testId"
+      :data-id="`${props.testId}-button`"
       class="btn btn-link nav-link select-toggle text-ellipsis"
       @mouseenter="hover = true"
       @mouseleave="hover = false"
@@ -20,6 +21,7 @@
           v-for="item in props.options"
           :id="`${props.testId}-item`"
           :key="item.value"
+          :data-id="item.testId"
           class="select-item"
           @mousedown.stop
           @click="select(item.value)"

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

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