bfg-common 1.5.106 → 1.5.107

package/components/atoms/combobox/Combobox.vue

@@ -5,18 +5,18 @@
   >
     <atoms-the-icon
       v-show="!isOpen"
+      :data-id="`${props.testId}-open-icon`"
       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`"
+      :disabled="props.disabled"
       type="text"
       tabindex="-1"
-      :disabled="props.disabled"
       @focus="showMenu"
       @blur="hideMenu"
     />
@@ -29,7 +29,7 @@
     />
 
     <Teleport to="body">
-      <div v-show="isOpen" class="dropdown-menu" :style="dropdownMenuStyles">
+      <div v-show="isOpen" :style="dropdownMenuStyles" class="dropdown-menu">
         <button
           v-for="(item, key) in props.items"
           :key="key"
@@ -71,7 +71,7 @@ const modelValueLocal = computed<string | number | undefined>({
 
 const id = `combobox${useUniqueId()}`
 
-const dropdownMenuStyles = ref({})
+const dropdownMenuStyles = ref<any>({})
 const showMenu = (): void => {
   isOpen.value = true
 

package/components/atoms/datepicker/Datepicker.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="container-datepicker">
     <atoms-the-icon
-      name="calendar"
       :class="[`btn-show-calendar  calendar-id-${uniqueId}`]"
       :data-id="`${props.testId}-toggle-icon`"
+      name="calendar"
       @click.stop="showHideCalendar"
     />
     <div
       v-show="isShowCalendar"
-      class="the-datepicer"
       :style="[{ top: calendarTop + 'px' }, { left: calendarLeft + 'px' }]"
+      class="the-datepicer"
       @click.stop
     >
       <div v-show="showAllMonths" class="content-month">
@@ -29,9 +29,9 @@
         <div class="content-buttons-arrow">
           <button
             :id="`${props.testId}-prev-button`"
+            :data-id="`${props.testId}-select-prev-year`"
             class="calendar-btn"
             title="Previous decade"
-            :data-id="`${props.testId}-select-prev-year`"
             @click="prevYear"
           >
             <atoms-the-icon
@@ -42,18 +42,18 @@
           </button>
           <button
             :id="`${props.testId}-current-year-button`"
+            :data-id="`${props.testId}-select-current-year`"
             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" />
           </button>
           <button
             :id="`${props.testId}-next-button`"
+            :data-id="`${props.testId}-select-next-year`"
             class="calendar-btn"
             title="Next decade"
-            :data-id="`${props.testId}-select-next-year`"
             @click="nextYear"
           >
             <atoms-the-icon
@@ -80,18 +80,18 @@
           <div class="date top-menu">
             <button
               :id="`${props.testId}-current-month-button`"
+              :data-id="`${props.testId}-show-all-months`"
               class="calendar-btn show-all-months"
               title="Select Month"
-              :data-id="`${props.testId}-show-all-months`"
               @click="showAllMonths = true"
             >
               {{ currentMonth }}
             </button>
             <button
               :id="`${props.testId}-current-year-button`"
+              :data-id="`${props.testId}-select-all-years`"
               class="calendar-btn current-year"
               title="Select Year"
-              :data-id="`${props.testId}-select-all-years`"
               @click="showAllYears = true"
             >
               {{ currentYear }}
@@ -100,9 +100,9 @@
           <div class="content-buttons-arrow">
             <button
               :id="`${props.testId}-prev-month-button`"
+              :data-id="`${props.testId}-select-prev-month`"
               class="calendar-btn"
               title="Previous Month"
-              :data-id="`${props.testId}-select-prev-month`"
               @click="prevMonth"
             >
               <atoms-the-icon
@@ -113,9 +113,9 @@
             </button>
             <button
               :id="`${props.testId}-current-date-button`"
+              :data-id="`${props.testId}-set-current-date`"
               class="calendar-btn set-current-data"
               title="Current Month"
-              :data-id="`${props.testId}-set-current-date`"
               @click="setCurrentDate"
             >
               <atoms-the-icon
@@ -125,9 +125,9 @@
             </button>
             <button
               :id="`${props.testId}-next-month-icon`"
+              :data-id="`${props.testId}-select-next-month`"
               class="calendar-btn"
               title="Next Month"
-              :data-id="`${props.testId}-select-next-month`"
               @click="nextMonth"
             >
               <atoms-the-icon

package/components/atoms/dropdown/Portlet.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="portlet">
     <div
-      class="portlet-titlebar"
-      :class="{ disabled }"
       :data-id="`${props.testId}-toggle-portlet`"
+      :class="['portlet-titlebar', { disabled }]"
       @click="togglePortlet"
     >
       <atoms-the-icon

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

@@ -2,8 +2,8 @@
   <div :class="['dropdown', { open }]">
     <div
       v-on-click-outside="onClickOutsideHandler"
-      class="dropdown-toggle-container"
       :data-id="`${props.testId}-show-dropdown-menu`"
+      class="dropdown-toggle-container"
       @click="showDropMenu"
     >
       <span class="nav-link">
@@ -24,9 +24,9 @@
       <div v-for="(item, key) in dropMenu" :key="key">
         <button
           :id="`${props.testId}-item`"
-          class="dropdown-item"
           :class="item.disabled && 'disabled'"
           :data-id="item.testId"
+          class="dropdown-item"
           @click="onSelect(key)"
         >
           <a
@@ -48,7 +48,6 @@
 import { vOnClickOutside } from '@vueuse/components'
 import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
 
-const emits = defineEmits(['select'])
 const props = withDefaults(
   defineProps<{
     dropMenu: UI_I_DropMenu<string>[]
@@ -57,6 +56,7 @@ const props = withDefaults(
   }>(),
   { testId: 'ui-dropdown' }
 )
+const emits = defineEmits(['select'])
 
 const open = ref<boolean>(false)
 const showDropMenu = (): void => {

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

@@ -2,8 +2,8 @@
   <div :class="['dropdown-tree dropdown', { open }]">
     <button
       :id="`${props.testId}`"
-      class="btn btn-outline-primary dropdown-toggle"
       :data-id="`${props.testId}-toggle-tree`"
+      class="btn btn-outline-primary dropdown-toggle"
       @click.stop="toggle"
     >
       <span class="title">{{ props.title }}</span>
@@ -17,8 +17,8 @@
           :id="`${props.testId}-item-${key}-${key2}`"
           :key="key2"
           :disabled="item2.disabled"
-          class="btn dropdown-item"
           :data-id="item2.testId"
+          class="btn dropdown-item"
           @click="select(item2)"
         >
           {{ item2.text }}
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import {
+import type {
   UI_I_DropdownTreeItem,
   UI_I_DropdownTreeItemChild,
 } from '~/components/atoms/dropdown/tree/lib/models/interfaces'

package/components/atoms/list/SelectList.vue

@@ -10,8 +10,8 @@
       v-for="(item, key) in props.items"
       :key="key"
       :disabled="item.disabled"
-      class="item"
       :value="item.value"
+      class="item"
     >
       <slot :name="`item${key}`">
         {{ item.text }}

package/components/atoms/list/dragDropList/DragDropList.vue

@@ -34,17 +34,19 @@ const props = defineProps<{
   grabItemKey: string
 }>()
 const emits = defineEmits<{
-  ( event: 'drop', value: UI_I_DropEvent ): void
+  (event: 'drop', value: UI_I_DropEvent): void
 }>()
 
-const presentItems = computed(() => props.items)
+const presentItems = computed<any>(() => props.items)
 
-const dragDropItemGrab = computed(() => grabItem.value?.[props.grabItemKey])
+const dragDropItemGrab = computed<any>(
+  () => grabItem.value?.[props.grabItemKey]
+)
 let dragDropItemGrabElem: HTMLElement
 
 const hoveredItemPosition = ref<number>(-1)
 const isGrab = ref<boolean>(false)
-const grabItem = ref(null)
+const grabItem = ref<any>(null)
 const grab = (item: any, event: Event): void => {
   isGrab.value = true
   grabItem.value = item
@@ -61,22 +63,29 @@ let setDragDropItemGrabElemPosition = (event: any): void => {
 setDragDropItemGrabElemPosition = useThrottle(setDragDropItemGrabElemPosition)
 
 const windowMousemove = (event: Event): void => {
-  if (!isGrab.value) { return }
+  if (!isGrab.value) {
+    return
+  }
 
   setDragDropItemGrabElemPosition(event)
 }
 const windowMouseup = (): void => {
-  if (!isGrab.value) { return }
+  if (!isGrab.value) {
+    return
+  }
   isGrab.value = false
-  if (hoveredItemPosition.value === -1) { return }
+  if (hoveredItemPosition.value === -1) {
+    return
+  }
 
   emits('drop', {
     target: grabItem.value,
-    toPosition: hoveredItemPosition.value
+    toPosition: hoveredItemPosition.value,
   })
 }
 onMounted(() => {
-  dragDropItemGrabElem = document.getElementById('drag-drop-item-grab') as HTMLDivElement || null
+  dragDropItemGrabElem =
+    (document.getElementById('drag-drop-item-grab') as HTMLDivElement) || null
   window.addEventListener('mousemove', windowMousemove)
   window.addEventListener('mouseup', windowMouseup)
 })

package/components/atoms/modal/Modal.vue

@@ -51,17 +51,19 @@
             <button
               :id="`${props.testId}-apply-button`"
               :data-id="`${props.testId}-apply-button`"
-              class="btn btn-primary"
-              :class="props.loading && 'modal-dialog__loader'"
+              :class="[
+                'btn btn-primary',
+                props.loading && 'modal-dialog__loader',
+              ]"
               :disabled="props.disabledSubmit"
               @click="submit"
             >
               <atoms-loader-pre-loader
                 v-if="props.loading"
                 id="loader"
-                class="absolute-center button__loading"
                 :test-id="`${props.testId}-button-loader`"
                 :show="props.loading"
+                class="absolute-center button__loading"
               />
               <span v-else>
                 {{ localization.common.ok }}

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

@@ -1,6 +1,6 @@
 <template>
   <div v-if="props.show" class="modal clr-wizard wizard-xl">
-    <div class="modal-dialog modal-xl relative" :data-id="props.testId">
+    <div :data-id="props.testId" class="modal-dialog modal-xl relative">
       <div class="modal-content-wrapper">
         <nav class="modal-nav clr-wizard-stepnav-wrapper">
           <h1 class="clr-wizard-title">
@@ -24,8 +24,8 @@
             </slot>
             <button
               :id="`${props.testId}-close-icon`"
-              class="close"
               :data-id="`${props.testId}-close-button`"
+              class="close"
               @click="hide"
             >
               <atoms-the-icon class="close-icon" name="close" />
@@ -33,17 +33,17 @@
           </div>
           <div class="modal-body">
             <slot
-              name="modalBody"
               :title="heading"
               :description="stepDescription"
+              name="modalBody"
             />
           </div>
           <div class="modal-footer">
             <slot name="modalFooter">
               <button
                 :id="`${props.testId}-cancel-button`"
-                class="btn btn-link"
                 :data-id="`${props.testId}-cancel-button`"
+                class="btn btn-link"
                 @click="hide"
               >
                 {{ localization.common.cancel }}
@@ -51,8 +51,8 @@
               <button
                 v-show="props.stepPosition > 0"
                 :id="`${props.testId}-back-button`"
-                class="btn btn-outline"
                 :data-id="`${props.testId}-back-button`"
+                class="btn btn-outline"
                 @click="back"
               >
                 {{ localization.common.back }}
@@ -60,8 +60,8 @@
               <button
                 v-if="props.stepPosition === props.stepItems.length - 1"
                 :id="`${props.testId}-finish-button`"
-                class="btn btn-success"
                 :data-id="`${props.testId}-finish-button`"
+                class="btn btn-success"
                 @click="finish"
               >
                 {{ localization.common.finish }}
@@ -70,8 +70,8 @@
                 v-else
                 :id="`${props.testId}-next-button`"
                 :disabled="props.disabledNext"
-                class="btn btn-primary"
                 :data-id="`${props.testId}-next-button`"
+                class="btn btn-primary"
                 @click="next"
               >
                 {{ localization.common.next }}
@@ -114,7 +114,7 @@ const emits = defineEmits<{
   (event: 'next'): void
   (event: 'back'): void
   (event: 'hide'): void
-  (event: 'change-step', num: number): void
+  (event: 'change-step', value: number): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/atoms/nav/NavBar.vue

@@ -6,8 +6,8 @@
           :is-link="props.isLink"
           :item="item"
           :value="props.modelValue"
-          btn-class="btn btn-link nav-link"
           :title="item.title"
+          btn-class="btn btn-link nav-link"
           @change="change"
         />
       </li>

package/components/atoms/nav/VerticalNavBar.vue

@@ -5,8 +5,8 @@
       :id="`${props.testId}-link-${key}`"
       :key="key"
       :data-id="item.testId"
-      class="clr-treenode-link"
       :to="item.path"
+      class="clr-treenode-link"
       active-class="active"
       @contextmenu="showContextMenu($event, item)"
     >

package/components/atoms/notificationBar/NotificationBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="notification-bar">
-    <div class="alerts" :style="{ 'background-color': color }">
+    <div :style="{ 'background-color': color }" class="alerts">
       <div v-if="props.items.length > 1" class="alerts-pager ng-star-inserted">
         <div class="alerts-pager-control page-control">
           <div class="alerts-page-down">
@@ -32,7 +32,7 @@
       </div>
 
       <div class="alert-text-truncate">
-        <div class="alert alert-app-level" :class="currentNotification.status">
+        <div :class="['alert alert-app-level', currentNotification.status]">
           <div class="alert-items">
             <div class="alert-item">
               <div class="alert-icon-wrapper">

package/components/atoms/popover/Popover.vue

@@ -8,7 +8,7 @@
       <slot name="elem" />
     </div>
     <Teleport to="body">
-      <div class="popover__content" :style="popoverPosition">
+      <div :style="popoverPosition" class="popover__content">
         <slot name="content" />
       </div>
     </Teleport>
@@ -16,6 +16,8 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_I_PositionEl } from '~/components/atoms/popover/lib/models/interfaces'
+
 const props = withDefaults(
   defineProps<{
     testId?: string | number
@@ -29,10 +31,6 @@ const emits = defineEmits<{
   (event: 'click'): void
 }>()
 
-interface UI_I_PositionEl {
-  top: string
-  left: string
-}
 const popoverPosition = ref<UI_I_PositionEl | null>(null)
 
 const id = ref<string>(`popover${useUniqueId()}`)

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

@@ -0,0 +1,4 @@
+export interface UI_I_PositionEl {
+  top: string
+  left: string
+}

package/components/atoms/select/TheSelect.vue

@@ -18,10 +18,10 @@
     <Teleport to="body">
       <ul
         v-show="open"
-        @mouseenter="hover = true"
-        @mouseleave="hover = false"
-        class="select-menu"
         :style="selectMenuStyles"
+        class="select-menu"
+        @mouseleave="hover = false"
+        @mouseenter="hover = true"
       >
         <li
           v-for="item in props.options"
@@ -41,6 +41,7 @@
 
 <script setup lang="ts">
 import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
+
 const props = withDefaults(
   defineProps<{
     modelValue: number | string
@@ -56,7 +57,7 @@ const emits = defineEmits<{
 
 const open = ref<boolean>(false)
 const hover = ref<boolean>(false)
-const selectMenuStyles = ref({})
+const selectMenuStyles = ref<any>({})
 
 const selectedItem = computed<UI_I_Option | undefined>(() => {
   return props.options.find((option) => option.value === props.modelValue)

package/components/atoms/stack/StackBlock.vue

@@ -23,8 +23,8 @@
 
       <span
         v-if="props.removable && props.isRollBack"
-        class="icon-roll-back"
         :data-id="`${props.testId}-roll-back`"
+        class="icon-roll-back"
         @mousedown="onRollBack"
         @click.stop
       />

package/components/atoms/stack/StackContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vertical-resource-meter" :title="`${props.value}%`">
+  <div :title="`${props.value}%`" class="vertical-resource-meter">
     <div class="meter-gauge">
       <span
         :style="{ width: `${props.value}%` }"

package/components/atoms/step/VerticalStep.vue

@@ -21,9 +21,9 @@
         <button
           :id="`${props.testId}-step-button-${key}`"
           :data-id="`${item.testId}-step-button`"
-          class="btn btn-link clr-wizard-stepnav-link"
           :style="{ 'margin-left': '8px' }"
           :disabled="item.disabled"
+          class="btn btn-link clr-wizard-stepnav-link"
           @click="changeStep(key)"
         >
           <span class="clr-wizard-stepnav-link-title">{{ item.text }}</span>

package/components/atoms/step/lib/models/verticalStepItem.ts

@@ -1,7 +1,5 @@
-interface UI_I_VerticalStepItem {
+export interface UI_I_VerticalStepItem {
   text: string
   disabled: boolean
   complete: boolean
 }
-
-export default UI_I_VerticalStepItem

package/components/atoms/switch/Switch.vue

@@ -2,7 +2,7 @@
   <div class="flex-align-center">
     <div class="switch-body">
       <input :id="props.testId" v-model="value" type="checkbox" />
-      <label class="switch-label" :for="props.testId"></label>
+      <label :for="props.testId" class="switch-label"></label>
     </div>
     <label :for="props.testId"><slot></slot></label>
   </div>
@@ -10,11 +10,11 @@
 
 <script setup lang="ts">
 const props = withDefaults(
-    defineProps<{
-      modelValue: boolean
-      testId?: string
-    }>(),
-    { testId: 'ui-switch' }
+  defineProps<{
+    modelValue: boolean
+    testId?: string
+  }>(),
+  { testId: 'ui-switch' }
 )
 
 const emits = defineEmits<{

package/components/atoms/table/compact/Compact.vue

@@ -10,12 +10,12 @@
                   <div class="datagrid-row-master datagrid-row-flex">
                     <div class="datagrid-row-scrollable">
                       <div
-                          v-for="(item, key) in props.headItems"
-                          :key="key"
-                          :style="{
+                        v-for="(item, key) in props.headItems"
+                        :key="key"
+                        :style="{
                           width: columnsWidth[key],
                         }"
-                          class="datagrid-column datagrid-fixed-width"
+                        class="datagrid-column datagrid-fixed-width"
                       >
                         <div class="datagrid-column-flex">
                           <div class="datagrid-column-title">
@@ -34,21 +34,21 @@
               </div>
               <template v-if="props.bodyItems.length">
                 <div
-                    v-for="(item, key) in props.bodyItems"
-                    :key="key"
-                    :class="['datagrid-body-row datagrid-row animation']"
+                  v-for="(item, key) in props.bodyItems"
+                  :key="key"
+                  :class="['datagrid-body-row datagrid-row animation']"
                 >
                   <div>
                     <div class="datagrid-row-master datagrid-row-flex">
                       <div class="datagrid-row-scrollable">
                         <div class="datagrid-scrolling-cells">
                           <div
-                              v-for="(item2, key2) in item"
-                              :key="item2"
-                              class="datagrid-cell datagrid-fixed-width"
-                              :style="{
+                            v-for="(item2, key2) in item"
+                            :key="item2"
+                            :style="{
                               width: `${columnsWidth[key2]}`,
                             }"
+                            class="datagrid-cell datagrid-fixed-width"
                           >
                             <div class="flex-align-center h-100">
                               <slot :name="item2.key" :item="item2">
@@ -87,14 +87,14 @@
 import type { UI_I_HeadItem } from '~/components/atoms/table/compact/lib/models/interfaces'
 
 const props = withDefaults(
-    defineProps<{
-      headItems: UI_I_HeadItem[]
-      bodyItems: any // don't know what array fields will be
-      loading?: boolean
-    }>(),
-    {
-      loading: false,
-    }
+  defineProps<{
+    headItems: UI_I_HeadItem[]
+    bodyItems: any // don't know what array fields will be
+    loading?: boolean
+  }>(),
+  {
+    loading: false,
+  }
 )
 
 const columnsWidth = ref<string[]>([])
@@ -111,7 +111,10 @@ const setDataGridWidth = (): void => {
   }
 
   const emptyWidthCount = props.headItems.filter((item) => !item.width).length
-  const existWidthsSum = props.headItems.reduce((acum, item) => acum += item.width, 0)
+  const existWidthsSum = props.headItems.reduce(
+    (acum, item) => (acum += item.width),
+    0
+  )
   const equalGridWidth = (dataGridWidth - existWidthsSum) / emptyWidthCount
   props.headItems.forEach((item) => {
     const elementMax = Math.max(equalGridWidth, item.width)