bfg-common 1.5.773 → 1.5.775

package/components/atoms/collapse/CollapseNav.vue

@@ -1,170 +1,170 @@
-<template>
-  <div class="tabs-overflow bottom-right">
-    <button
-      :id="collapsedBtnId"
-      :class="[
-        'btn btn-link nav-link dropdown-toggle',
-        { active: collapsedBtnActive },
-      ]"
-      :data-id="`${props.testId}-toggle-button`"
-      @mouseenter="hover = true"
-      @mouseleave="hover = false"
-      @mousedown="showMenu"
-    >
-      <atoms-the-icon
-        :class="['collapse-icon', { active: open }]"
-        name="ellipsis-horizontal"
-        width="16px"
-        height="16px"
-      />
-    </button>
-
-    <Teleport to="body">
-      <ul
-        v-show="open"
-        :class="['navbar-dropdown-menu', props.popupClass]"
-        :style="dropdownMenuStyles"
-      >
-        <li
-          v-for="(item, key) in props.items"
-          :key="key"
-          v-permission="item.permission"
-          :title="item.title"
-          class="navbar-dropdown-menu-item"
-          @mousedown.stop
-        >
-          <div
-            v-if="item.separate"
-            class="navbar-dropdown-menu-separator"
-          ></div>
-          <atoms-collapse-nav-item
-            v-else
-            :is-link="props.isLink"
-            :item="item"
-            :value="value"
-            btn-class="btn"
-            @change="change"
-            @select-file="onSelectFile($event, key)"
-          />
-        </li>
-      </ul>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_CollapseNavItem[]
-    isLink?: boolean
-    value?: number | string
-    popupClass?: string
-    closeAfterClick?: boolean
-    testId?: string
-  }>(),
-  {
-    isLink: undefined,
-    value: undefined,
-    popupClass: undefined,
-    closeAfterClick: undefined,
-    testId: '',
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-  (event: 'select-file', value1: Event, value2: string, value3: number): void
-}>()
-
-const change = (value: number): void => {
-  emits('change', value)
-  props.closeAfterClick && (open.value = false)
-}
-const onSelectFile = (event: Event, type: string, key: number): void => {
-  emits('select-file', event, type, key)
-}
-
-const collapsedBtnId = ref<string>('')
-
-const route = useRoute()
-const collapsedBtnActive = computed<boolean>(() => {
-  if (props.isLink)
-    return props.items.some((item) => route.path.includes(item.path || ''))
-
-  return props.items.some((item) => item.value === props.value)
-})
-
-const open = ref<boolean>(false)
-const hover = ref<boolean>(false)
-const dropdownMenuStyles = ref<any>({})
-const showMenu = (): void => {
-  if (open.value) {
-    hideMenu(true)
-    return
-  }
-
-  open.value = true
-
-  const btn = document.querySelector(`#${collapsedBtnId.value}`)
-  const { top, height, right } = btn!.getBoundingClientRect()
-  dropdownMenuStyles.value = {
-    top: `${top + height}px`,
-    left: `${right}px`,
-  }
-}
-const hideMenu = (force?: boolean): void => {
-  if (hover.value && !force) return
-
-  open.value = false
-}
-
-const windowClick = (): void => {
-  hideMenu()
-}
-const windowResize = (): void => {
-  hideMenu(true)
-}
-onMounted(() => {
-  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
-  window.addEventListener('mousedown', windowClick)
-  window.addEventListener('resize', windowResize)
-})
-onUnmounted(() => {
-  window.removeEventListener('mousedown', windowClick)
-  window.removeEventListener('resize', windowResize)
-})
-</script>
-
-<style scoped lang="scss">
-.tabs-overflow {
-  position: absolute;
-  top: 0;
-  right: 24px;
-
-  .dropdown-toggle {
-    .collapse-icon {
-      fill: var(--main-color-mode);
-
-      &.active {
-        fill: #0077b8;
-      }
-    }
-  }
-}
-
-.navbar-dropdown-menu {
-  position: fixed;
-  z-index: var(--z-dropdown);
-  transform: translateX(-100%);
-  border: 1px solid var(--global-border-color);
-  border-radius: 3px;
-  margin-top: 2px;
-  background-color: var(--global-bg-color);
-  padding: 12px 0;
-}
-.navbar-dropdown-menu-separator {
-  margin: 6px 0;
-  border-bottom: 0.8px solid #e8e8e8;
-}
-</style>
+<template>
+  <div class="tabs-overflow bottom-right">
+    <button
+      :id="collapsedBtnId"
+      :class="[
+        'btn btn-link nav-link dropdown-toggle',
+        { active: collapsedBtnActive },
+      ]"
+      :data-id="`${props.testId}-toggle-button`"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+      @mousedown="showMenu"
+    >
+      <atoms-the-icon
+        :class="['collapse-icon', { active: open }]"
+        name="ellipsis-horizontal"
+        width="16px"
+        height="16px"
+      />
+    </button>
+
+    <Teleport to="body">
+      <ul
+        v-show="open"
+        :class="['navbar-dropdown-menu', props.popupClass]"
+        :style="dropdownMenuStyles"
+      >
+        <li
+          v-for="(item, key) in props.items"
+          :key="key"
+          v-permission="item.permission"
+          :title="item.title"
+          class="navbar-dropdown-menu-item"
+          @mousedown.stop
+        >
+          <div
+            v-if="item.separate"
+            class="navbar-dropdown-menu-separator"
+          ></div>
+          <atoms-collapse-nav-item
+            v-else
+            :is-link="props.isLink"
+            :item="item"
+            :value="value"
+            btn-class="btn"
+            @change="change"
+            @select-file="onSelectFile($event, key)"
+          />
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_CollapseNavItem[]
+    isLink?: boolean
+    value?: number | string
+    popupClass?: string
+    closeAfterClick?: boolean
+    testId?: string
+  }>(),
+  {
+    isLink: undefined,
+    value: undefined,
+    popupClass: undefined,
+    closeAfterClick: undefined,
+    testId: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+  (event: 'select-file', value1: Event, value2: string, value3: number): void
+}>()
+
+const change = (value: number): void => {
+  emits('change', value)
+  props.closeAfterClick && (open.value = false)
+}
+const onSelectFile = (event: Event, type: string, key: number): void => {
+  emits('select-file', event, type, key)
+}
+
+const collapsedBtnId = ref<string>('')
+
+const route = useRoute()
+const collapsedBtnActive = computed<boolean>(() => {
+  if (props.isLink)
+    return props.items.some((item) => route.path.includes(item.path || ''))
+
+  return props.items.some((item) => item.value === props.value)
+})
+
+const open = ref<boolean>(false)
+const hover = ref<boolean>(false)
+const dropdownMenuStyles = ref<any>({})
+const showMenu = (): void => {
+  if (open.value) {
+    hideMenu(true)
+    return
+  }
+
+  open.value = true
+
+  const btn = document.querySelector(`#${collapsedBtnId.value}`)
+  const { top, height, right } = btn!.getBoundingClientRect()
+  dropdownMenuStyles.value = {
+    top: `${top + height}px`,
+    left: `${right}px`,
+  }
+}
+const hideMenu = (force?: boolean): void => {
+  if (hover.value && !force) return
+
+  open.value = false
+}
+
+const windowClick = (): void => {
+  hideMenu()
+}
+const windowResize = (): void => {
+  hideMenu(true)
+}
+onMounted(() => {
+  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
+  window.addEventListener('mousedown', windowClick)
+  window.addEventListener('resize', windowResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('mousedown', windowClick)
+  window.removeEventListener('resize', windowResize)
+})
+</script>
+
+<style scoped lang="scss">
+.tabs-overflow {
+  position: absolute;
+  top: 0;
+  right: 24px;
+
+  .dropdown-toggle {
+    .collapse-icon {
+      fill: var(--main-color-mode);
+
+      &.active {
+        fill: #0077b8;
+      }
+    }
+  }
+}
+
+.navbar-dropdown-menu {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  transform: translateX(-100%);
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  margin-top: 2px;
+  background-color: var(--global-bg-color);
+  padding: 12px 0;
+}
+.navbar-dropdown-menu-separator {
+  margin: 6px 0;
+  border-bottom: 0.8px solid #e8e8e8;
+}
+</style>

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

@@ -119,7 +119,6 @@ onUnmounted(() => {
   .dropdown-menu {
     position: fixed;
     transform: translateX(-100%);
-    background-color: var(--dropdown-bg-color);
 
     h4 {
       font-size: 12px;
@@ -131,7 +130,6 @@ onUnmounted(() => {
     button {
       &:hover {
         border-bottom: 1px solid #666;
-        color: #565656;
       }
     }
   }

package/components/atoms/nav/NavBar.vue

@@ -22,7 +22,6 @@
         :items="collapsedItems"
         :is-link="props.isLink"
         :value="props.modelValue"
-        :close-after-click="!props.isLink"
         @change="change"
       />
     </ul>

package/components/atoms/perPage/PerPage.vue

@@ -1,58 +1,58 @@
-<template>
-  <div class="page-size">
-    {{ selectLabel }}
-
-    <div class="clr-select-wrapper">
-      <select
-        :id="`${props.testId}-select`"
-        v-development="props.development"
-        :data-id="`${props.testId}-select`"
-        :value="props.pageSize"
-        class="clr-page-size-select"
-        @change="change"
-      >
-        <option
-          v-for="(item, key) in props.options"
-          :key="key"
-          :value="item.value"
-        >
-          {{ item.text }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    pageSize: number
-    options: UI_I_OptionItem[]
-    label?: string
-    testId?: string
-    development?: boolean
-  }>(),
-  {
-    testId: 'ui-per-page',
-    label: 'itemsPerPage',
-    development: false,
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const selectLabel = computed<string>(
-  () => localization.value.common[props.label]
-)
-
-const change = (event: InputEvent): void => {
-  emits('change', +(event.target as HTMLInputElement).value)
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="page-size">
+    {{ selectLabel }}
+
+    <div class="clr-select-wrapper">
+      <select
+        :id="`${props.testId}-select`"
+        v-development="props.development"
+        :data-id="`${props.testId}-select`"
+        :value="props.pageSize"
+        class="clr-page-size-select"
+        @change="change"
+      >
+        <option
+          v-for="(item, key) in props.options"
+          :key="key"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    pageSize: number
+    options: UI_I_OptionItem[]
+    label?: string
+    testId?: string
+    development?: boolean
+  }>(),
+  {
+    testId: 'ui-per-page',
+    label: 'itemsPerPage',
+    development: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const selectLabel = computed<string>(
+  () => localization.value.common[props.label]
+)
+
+const change = (event: InputEvent): void => {
+  emits('change', +(event.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped></style>

package/components/atoms/switch/Switch.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="flex-align-center">
     <div class="switch-body">
-      <input
-        :id="props.testId"
-        v-model="value"
-        type="checkbox"
-        @change="emits('change', value)"
-      />
+      <input :id="props.testId" v-model="value" type="checkbox" />
       <label :for="props.testId" class="switch-label"></label>
     </div>
     <label :for="props.testId"><slot></slot></label>
@@ -24,7 +19,6 @@ const props = withDefaults(
 
 const emits = defineEmits<{
   (event: 'update:model-value', value: boolean): void
-  (event: 'change', value: boolean): void
 }>()
 
 const value = computed<boolean>({

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

@@ -85,8 +85,8 @@
                         v-for="(item, key) in headItemsPresent"
                         :key="key"
                         :style="{
-                          width: columnsWidth?.[key]?.[0],
-                          minWidth: columnsWidth?.[key]?.[1],
+                          width: columnsWidth[key][0],
+                          minWidth: columnsWidth[key][1],
                         }"
                         class="datagrid-column datagrid-fixed-width"
                       >
@@ -108,7 +108,7 @@
                                 :title="item.text"
                                 :style="{
                                   width:
-                                    columnsWidth?.[key]?.[0]?.slice?.(0, -2) -
+                                    columnsWidth[key][0]?.slice(0, -2) -
                                     (item.hasFilter ? 65 : 40) +
                                     'px',
                                 }"
@@ -328,8 +328,8 @@
                             "
                             :key="key2"
                             :style="{
-                              width: columnsWidth?.[key2]?.[0],
-                              minWidth: columnsWidth?.[key2]?.[1],
+                              width: columnsWidth[key2][0],
+                              minWidth: columnsWidth[key2][1],
                             }"
                             :class="[
                               'datagrid-cell datagrid-fixed-width',
@@ -649,7 +649,7 @@ const changeAll = (event: UI_I_HTMLSelectElement): void => {
 const selectedRowLocal = ref<UI_T_SelectedRow>([])
 const isShowHiddenInfo = ref<boolean>(false)
 const tableWrapperId = `table-wrapper-${useUniqueId()}`
-const memoryWidth = ref<[string, string][]>([])
+let memoryWidth = '0'
 
 const showedInfoRow = ref<UI_I_BodyItem | null>(null)
 const showedInfoCol = ref<UI_I_BodyItem[] | null>(null)
@@ -926,7 +926,7 @@ let setColumnWidth = (): void => {
     columnsWidth.value = []
     headItemsPresent.value.forEach((item) => {
       columnsWidth.value.push([
-        Number(item.width.slice(0, -2)) + 8 + 'px', // width
+        item.width, // width
         item.width, // min-width
       ])
     })
@@ -950,7 +950,7 @@ let setColumnWidth = (): void => {
   headItemsPresent.value.forEach((item) => {
     columnsWidth.value.push([
       // `${columnWidth}px`, // width
-      Number(item.width.slice(0, -2)) + 8 + 'px', // width
+      item.width, // width
       item.width, // min-width
     ])
   })
@@ -965,7 +965,6 @@ watch(
       toggedItems.value.push(false)
     })
     setColumnWidth()
-    isShowHiddenInfo.value = false
   },
   {
     immediate: true,
@@ -992,7 +991,7 @@ const setGrab = (key: number, event: MouseEvent): void => {
 
   if (!isShowHiddenInfo.value) {
     grabColumn.value = key
-    const currentWidth = parseInt(columnsWidth.value?.[grabColumn.value]?.[0])
+    const currentWidth = parseInt(columnsWidth.value[grabColumn.value][0])
     grabStartX.value = event.clientX - currentWidth
     if (isRtl.value) {
       grabStartX.value = event.clientX + currentWidth
@@ -1019,7 +1018,7 @@ let mousemove = (event: MouseEvent): void => {
   isDrag.value = true
   resizeObserve.disconnect()
 
-  const minWidth = parseInt(columnsWidth.value?.[grabColumn.value]?.[1])
+  const minWidth = parseInt(columnsWidth.value[grabColumn.value][1])
   let changeX = Math.max(event.clientX - grabStartX.value, minWidth)
   if (isRtl.value) {
     changeX = Math.max(grabStartX.value - event.clientX, minWidth)
@@ -1045,10 +1044,10 @@ let resizeObserveWithInfo: ResizeObserver
 
 const setColumnWidthWithInfo = (ent: ResizeObserverEntry[]): void => {
   if (isShowHiddenInfo.value) {
-    memoryWidth.value = useDeepCopy(columnsWidth.value)
-    columnsWidth.value[1][0] = `${ent[0].contentBoxSize[0].inlineSize - 84}px`
+    memoryWidth = columnsWidth.value[1][0]
+    columnsWidth.value[1][0] = `${ent[0].contentBoxSize[0].inlineSize - 86}px`
   } else {
-    columnsWidth.value = useDeepCopy(memoryWidth.value)
+    columnsWidth.value[1][0] = memoryWidth
   }
 }
 
@@ -1429,7 +1428,7 @@ onUnmounted(() => {
                   border-bottom: 15px solid transparent;
                   border-right: 15px solid var(--global-bg-color);
                   bottom: 26%;
-                  right: -5px;
+                  right: -16px;
                   z-index: calc(var(--z-sticky) + 1);
                 }
 
@@ -1440,7 +1439,7 @@ onUnmounted(() => {
                   border-bottom: 16px solid transparent;
                   border-right: 16px solid var(--global-border-color);
                   bottom: 23%;
-                  right: -6px;
+                  right: -17px;
                   z-index: calc(var(--z-sticky) + 1);
                 }
               }
@@ -1675,7 +1674,7 @@ onUnmounted(() => {
   //    color: var(--global-font-color2) !important;
   //    line-height: 1.7rem;
   //  }
-  .close {
+  button {
     position: absolute;
     top: 24px;
     right: 24px;