bfg-common 1.5.93 → 1.5.95

package/assets/scss/common/normalize.scss

@@ -26,7 +26,7 @@ html:not(.is-new-view) {
   }
 }
 
-[dir="rtl"] {
+[dir='rtl'] {
   .tree-node-text {
     text-align: right;
   }
@@ -69,6 +69,10 @@ b {
   font-weight: 700;
 }
 
+.d-none {
+  display: none;
+}
+
 .flex {
   display: flex;
 }
@@ -86,6 +90,10 @@ b {
   flex: 1;
 }
 
+.h-auto {
+  height: auto;
+}
+
 .flex-align-center {
   @include flex($align: center);
 }

package/components/atoms/alert/Notification.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="notification">
     <div
-      class="notification-container-wrap animation"
-      :class="{ active: isActive }"
+      :class="['notification-container-wrap animation', { active: isActive }]"
     >
       <div class="notification-container">
         <div v-show="props.show" class="toast">
           <atoms-the-icon
-            class="toast-icon"
-            :class="iconName !== 'info' && 'with'"
             :name="iconName"
+            :class="['toast-icon', iconName !== 'info' && 'with']"
           />
           <div class="toast-content">
             <div class="flex-align-center flex-space-between">

package/components/atoms/autocomplete/Autocomplete.vue

@@ -5,8 +5,8 @@
         <atoms-loader-pre-loader
           id="loader"
           :test-id="`${props.testId}-pre-loader`"
-          class="content-area__loading"
           :show="true"
+          class="content-area__loading"
         />
       </div>
       <div class="search-icon">
@@ -23,11 +23,10 @@
             :id="`${props.testId}-search-input`"
             v-model.trim="searchLocal"
             :data-id="`${props.testId}-search-input`"
+            :class="['search-input', fieldErrorText && 'clr-input']"
+            :placeholder="props.placeholder"
             type="text"
-            class="search-input"
-            :class="fieldErrorText && 'clr-input'"
             autocomplete="off"
-            :placeholder="props.placeholder"
             @blur="onInitValidation"
             @input="onSearch"
           />
@@ -69,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
+// import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = withDefaults(
   defineProps<{
@@ -94,7 +93,7 @@ const emits = defineEmits<{
   (event: 'select', value: string): void
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+// const localization = computed<UI_I_Localization>(() => useLocal())
 
 const searchLocal = defineModel<string>()
 

package/components/atoms/collapse/CollapseNav.vue

@@ -12,8 +12,8 @@
       @mousedown="showMenu"
     >
       <atoms-the-icon
-        name="ellipsis-horizontal"
         :class="['collapse-icon', { active: open }]"
+        name="ellipsis-horizontal"
         width="16px"
         height="16px"
       />
@@ -28,8 +28,8 @@
         <li
           v-for="(item, key) in props.items"
           :key="key"
-          class="navbar-dropdown-menu-item"
           :title="item.title"
+          class="navbar-dropdown-menu-item"
           @mousedown.stop
         >
           <div
@@ -64,6 +64,10 @@ const props = withDefaults(
     testId?: string
   }>(),
   {
+    isLink: undefined,
+    value: undefined,
+    popupClass: undefined,
+    closeAfterClick: undefined,
     testId: '',
   }
 )
@@ -92,7 +96,7 @@ const collapsedBtnActive = computed<boolean>(() => {
 
 const open = ref<boolean>(false)
 const hover = ref<boolean>(false)
-const dropdownMenuStyles = ref({})
+const dropdownMenuStyles = ref<any>({})
 const showMenu = (): void => {
   if (open.value) {
     hideMenu(true)

package/components/atoms/collapse/CollapseNavItem.vue

@@ -35,9 +35,9 @@
       <input
         :id="`select-file-button-${props.item.type}`"
         :data-id="`${item.testId}-button`"
-        type="file"
         :disabled="props.item.disabled"
         :multiple="false"
+        type="file"
         class="input-file"
         @change="(event) => onSelectFiles(event)"
       />

package/components/atoms/comboDropdownMenu/ComboDropdownMenu.vue

@@ -22,11 +22,11 @@
               id="search-input"
               v-model="search"
               :data-id="`${props.testId}-search-field`"
+              :placeholder="localization.common.search"
               type="search"
               autocomplete="off"
               maxlength="300"
               class="form-control dropdown-search-box"
-              :placeholder="localization.common.search"
               @input="onInputSearch"
             />
             <div class="dropdown-result-holder">

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}%` }"