bfg-common 1.4.375 → 1.4.377

package/assets/localization/local_be.json

@@ -2243,7 +2243,8 @@
     "tagsPerObject": "Тэгі для кожнага Аб'екта",
     "multipleTagsSelectedAlert": "Выбар некалькіх тэгаў можа прывесці да ўжывання звязаных вылічальных палітык.",
     "removeAttributeDialog": "Вы ўпэўненыя, што хочаце выдаліць карыстацкі атрыбут “{attributeName}” з “{selectedItemName}”?",
-    "showMore": "Паказаць больш"
+    "showMore": "Паказаць больш",
+    "failureReason": "Прычына адмовы"
   },
   "auth": {
     "welcomeTo": "Сардэчна запрашаем у",

package/assets/localization/local_en.json

@@ -2247,7 +2247,8 @@
     "tagsPerObject": "Tags Per Object",
     "multipleTagsSelectedAlert": "Selecting multiple tags may result in the application of associated compute policies.",
     "removeAttributeDialog": "Are you sure you want to delete custom attribute “{attributeName}” from “{selectedItemName}”?",
-    "showMore": "Show More"
+    "showMore": "Show More",
+    "failureReason": "Failure Reason"
   },
   "auth": {
     "welcomeTo": "Welcome to",

package/assets/localization/local_hy.json

@@ -2247,7 +2247,8 @@
     "tagsPerObject": "Պիտակներ յուրաքանչյուր օբյեկտի համար",
     "multipleTagsSelectedAlert": "Բազմաթիվ պիտակների ընտրությունը կարող է հանգեցնել հարակից հաշվարկային քաղաքականության կիրառմանը:",
     "removeAttributeDialog": "Համոզված եք, որ ցանկանում եք հեռացնել “{attributeName}” հատուկ հատկանիշը “{selectedItemName}” - ից:",
-    "showMore": "Ցույց տալ ավելին"
+    "showMore": "Ցույց տալ ավելին",
+    "failureReason": "Ձախողման պատճառ"
   },
   "auth": {
     "welcomeTo": "Բարի գալուստ",

package/assets/localization/local_kk.json

@@ -2246,7 +2246,8 @@
     "tagsPerObject": "Бір Нысанға Тегтер",
     "multipleTagsSelectedAlert": "Бірнеше тегтерді таңдау байланысты есептеу саясаттарын қолдануға әкелуі мүмкін.",
     "removeAttributeDialog": "“{AttributeName}” теңшелетін төлсипатын “{selectedItemName}”ішінен жойғыңыз келетініне сенімдісіз бе?",
-    "showMore": "Көбірек көрсету"
+    "showMore": "Көбірек көрсету",
+    "failureReason": "Сәтсіздік себебі"
   },
   "auth": {
     "welcomeTo": "Қош келдіңіз",

package/assets/localization/local_ru.json

@@ -2248,7 +2248,8 @@
     "tagsPerObject": "Теги для каждого Объекта",
     "multipleTagsSelectedAlert": "Выбор нескольких тегов может привести к применению связанных вычислительных политик.",
     "removeAttributeDialog": "Вы уверены, что хотите удалить пользовательский атрибут “{attributeName}” из “{selectedItemName}”?",
-    "showMore": "Показать больше"
+    "showMore": "Показать больше",
+    "failureReason": "Причина отказа"
   },
   "auth": {
     "welcomeTo": "Добро пожаловать в",

package/assets/localization/local_zh.json

@@ -2245,7 +2245,8 @@
     "tagsPerObject": "每个对象的标签",
     "multipleTagsSelectedAlert": "选择多个标签可能会导致应用相关的计算策略。",
     "removeAttributeDialog": "您确定要从“{selectedItemName}”中删除自定义属性“{attributeName}”吗？",
-    "showMore": "显示更多"
+    "showMore": "显示更多",
+    "failureReason": "失败原因"
   },
   "auth": {
     "welcomeTo": "欢迎来到",

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

@@ -499,18 +499,18 @@
 
 <script setup lang="ts">
 import type { UI_I_HTMLSelectElement } from '~/lib/models/interfaces'
-import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
-import {
+import type {
   UI_I_HeadItem,
   UI_I_BodyItem,
   UI_I_ColumnKey,
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import {
+import type {
   UI_T_ColumnKeys,
   UI_T_DataGridType,
   UI_T_SelectedRow,
 } from '~/components/atoms/table/dataGrid/lib/models/types'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
 
 const props = withDefaults(
   defineProps<{

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

@@ -1,216 +1,220 @@
-<template>
-  <div class="column-switch-wrap flex-align-center relative" @click.stop>
-    <button
-      :id="columnSwitchId"
-      :data-id="`${props.testId}-toggle-button`"
-      class="column-switch-btn"
-      @click.stop="toggle"
-    >
-      <atoms-the-icon
-        name="column-switch"
-        width="16px"
-        height="16px"
-        class="toggle-icon"
-      />
-    </button>
-
-    <div v-show="open" :style="dropdownStyles" class="dropdown-menu">
-      <div class="column-switch">
-        <div class="switch-header">
-          {{ localization.common.showColumns }}
-        </div>
-        <ul class="switch-content list-unstyled">
-          <li
-            v-for="(item, key) in columnKeysPresent"
-            :key="`${item.key}_${key}`"
-          >
-            <div class="clr-checkbox-wrapper">
-              <input
-                :id="`${props.testId}-${item.id}`"
-                v-model="item.show"
-                :data-id="item.testId"
-                :disabled="isLast && item.show"
-                type="checkbox"
-                @change="change($event, key)"
-              />
-              <label
-                :for="`${props.testId}-${item.id}`"
-                class="clr-control-label"
-                >{{ item.text }}</label
-              >
-            </div>
-          </li>
-        </ul>
-        <div class="switch-footer">
-          <button
-            :id="`${props.testId}-select-all-button`"
-            :data-id="`${props.testId}-select-all-button`"
-            class="btn btn-sm btn-link switch-button export-link"
-            @click="selectAll"
-          >
-            {{ localization.common.selectAll }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_HTMLSelectElement,
-  UI_I_Localization,
-} from '~/lib/models/interfaces'
-import type { UI_I_ColumnKey } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    columnKeys: UI_I_ColumnKey[]
-    testId?: string
-  }>(),
-  { testId: 'ui-data-grid-column-switch' }
-)
-const emits = defineEmits<{
-  (event: 'update:column-keys', value: UI_I_ColumnKey[]): void
-}>()
-
-const columnKeysPresent = computed<UI_I_ColumnKey[]>(() => {
-  return props.columnKeys.map((item): UI_I_ColumnKey => {
-    return { ...item, id: useUniqueId() }
-  })
-})
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const columnSwitchId = ref<string>('')
-
-const isLast = computed<boolean>(
-  () => props.columnKeys.filter((columnKey) => columnKey.show).length === 1
-)
-
-const change = (e: UI_I_HTMLSelectElement, key: number): void => {
-  const newColumnKeys = props.columnKeys.map((columnKey, i) => {
-    if (i !== key) {
-      return columnKey
-    }
-
-    columnKey.show = e.target.checked
-    return columnKey
-  })
-  emits('update:column-keys', newColumnKeys)
-}
-const selectAll = (): void => {
-  const newColumnKeys = props.columnKeys.map((columnKey) => {
-    columnKey.show = true
-    return columnKey
-  })
-  emits('update:column-keys', newColumnKeys)
-}
-
-const windowClick = (): void => {
-  hide()
-}
-onMounted(() => {
-  window.addEventListener('click', windowClick)
-  columnSwitchId.value = `column-switch-${useUniqueId()}`
-  setDropdownStyle()
-})
-onUnmounted(() => {
-  window.removeEventListener('click', windowClick)
-})
-
-const open = ref<boolean>(false)
-const hide = (): void => {
-  open.value = false
-}
-const toggle = (): void => {
-  open.value = !open.value
-  if (!open.value) {
-    return
-  }
-
-  setDropdownStyle()
-}
-
-const dropdownStyles = ref({})
-const setDropdownStyle = (): void => {
-  const elem = document.getElementById(columnSwitchId.value)
-  if (!elem) {
-    setTimeout(() => setDropdownStyle(), 0)
-    return
-  }
-  const { x, y } = elem.getBoundingClientRect()
-
-  dropdownStyles.value = {
-    top: `${y - 10}px`,
-    left: `${x}px`,
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.column-switch-wrap {
-  .column-switch-btn {
-    cursor: pointer;
-    padding: 0;
-    border: 0;
-    display: flex;
-    background-color: transparent;
-
-    .toggle-icon {
-      fill: #575757;
-    }
-    &:hover {
-      .toggle-icon {
-        fill: #0079b8;
-      }
-    }
-  }
-
-  .dropdown-menu {
-    position: fixed;
-    z-index: 1000;
-    visibility: unset;
-    transform: translateY(-100%);
-    background-color: var(--block-view-bg-color);
-    border-color: var(--global-border-color);
-
-    .column-switch {
-      border-style: none;
-      box-shadow: none;
-      height: 85%;
-      max-height: calc(15rem + 100px);
-      padding: 18px;
-      width: 250px;
-      display: flex;
-      flex-direction: column;
-
-      .switch-header {
-        font-size: 16px;
-        color: var(--global-font-color4);
-        padding-bottom: 12px;
-      }
-
-      .switch-content {
-        overflow-y: auto;
-        .clr-control-label {
-          white-space: normal;
-        }
-      }
-
-      .switch-footer {
-        button {
-          padding: 0;
-          margin: 0;
-          font-size: 12px;
-          letter-spacing: 1px;
-          color: #0079b8;
-          text-transform: uppercase;
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="column-switch-wrap flex-align-center relative" @click.stop>
+    <button
+      :id="columnSwitchId"
+      :data-id="`${props.testId}-toggle-button`"
+      class="column-switch-btn"
+      @click.stop="toggle"
+    >
+      <atoms-the-icon
+        name="column-switch"
+        width="16px"
+        height="16px"
+        class="toggle-icon"
+      />
+    </button>
+
+    <div v-show="open" :style="dropdownStyles" class="dropdown-menu">
+      <div class="column-switch">
+        <div class="switch-header">
+          {{ localization.common.showColumns }}
+        </div>
+        <ul class="switch-content list-unstyled">
+          <li
+            v-for="(item, key) in columnKeysPresent"
+            :key="`${item.key}_${key}`"
+          >
+            <div class="clr-checkbox-wrapper">
+              <input
+                :id="`${props.testId}-${item.id}`"
+                v-model="item.show"
+                :data-id="item.testId"
+                :disabled="isLast && item.show"
+                type="checkbox"
+                @change="change($event, key)"
+              />
+              <label
+                :for="`${props.testId}-${item.id}`"
+                class="clr-control-label"
+                >{{ item.text }}</label
+              >
+            </div>
+          </li>
+        </ul>
+        <div class="switch-footer">
+          <button
+            :id="`${props.testId}-select-all-button`"
+            :data-id="`${props.testId}-select-all-button`"
+            class="btn btn-sm btn-link switch-button export-link"
+            @click="selectAll"
+          >
+            {{ localization.common.selectAll }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_HTMLSelectElement,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type { UI_I_ColumnKey } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    columnKeys: UI_I_ColumnKey[]
+    testId?: string
+  }>(),
+  { testId: 'ui-data-grid-column-switch' }
+)
+const emits = defineEmits<{
+  (event: 'update:column-keys', value: UI_I_ColumnKey[]): void
+}>()
+
+const columnKeysPresent = computed<UI_I_ColumnKey[]>(() => {
+  return props.columnKeys.map((item): UI_I_ColumnKey => {
+    const testId = item.text
+      .toLowerCase()
+      .replace(/\s/g, '_')
+      .replace(/[^a-zA-Z_]/g, '')
+    return { ...item, id: useUniqueId(), testId: `show-column-${testId}` }
+  })
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const columnSwitchId = ref<string>('')
+
+const isLast = computed<boolean>(
+  () => props.columnKeys.filter((columnKey) => columnKey.show).length === 1
+)
+
+const change = (e: UI_I_HTMLSelectElement, key: number): void => {
+  const newColumnKeys = props.columnKeys.map((columnKey, i) => {
+    if (i !== key) {
+      return columnKey
+    }
+
+    columnKey.show = e.target.checked
+    return columnKey
+  })
+  emits('update:column-keys', newColumnKeys)
+}
+const selectAll = (): void => {
+  const newColumnKeys = props.columnKeys.map((columnKey) => {
+    columnKey.show = true
+    return columnKey
+  })
+  emits('update:column-keys', newColumnKeys)
+}
+
+const windowClick = (): void => {
+  hide()
+}
+onMounted(() => {
+  window.addEventListener('click', windowClick)
+  columnSwitchId.value = `column-switch-${useUniqueId()}`
+  setDropdownStyle()
+})
+onUnmounted(() => {
+  window.removeEventListener('click', windowClick)
+})
+
+const open = ref<boolean>(false)
+const hide = (): void => {
+  open.value = false
+}
+const toggle = (): void => {
+  open.value = !open.value
+  if (!open.value) {
+    return
+  }
+
+  setDropdownStyle()
+}
+
+const dropdownStyles = ref({})
+const setDropdownStyle = (): void => {
+  const elem = document.getElementById(columnSwitchId.value)
+  if (!elem) {
+    setTimeout(() => setDropdownStyle(), 0)
+    return
+  }
+  const { x, y } = elem.getBoundingClientRect()
+
+  dropdownStyles.value = {
+    top: `${y - 10}px`,
+    left: `${x}px`,
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.column-switch-wrap {
+  .column-switch-btn {
+    cursor: pointer;
+    padding: 0;
+    border: 0;
+    display: flex;
+    background-color: transparent;
+
+    .toggle-icon {
+      fill: #575757;
+    }
+    &:hover {
+      .toggle-icon {
+        fill: #0079b8;
+      }
+    }
+  }
+
+  .dropdown-menu {
+    position: fixed;
+    z-index: 1000;
+    visibility: unset;
+    transform: translateY(-100%);
+    background-color: var(--block-view-bg-color);
+    border-color: var(--global-border-color);
+
+    .column-switch {
+      border-style: none;
+      box-shadow: none;
+      height: 85%;
+      max-height: calc(15rem + 100px);
+      padding: 18px;
+      width: 250px;
+      display: flex;
+      flex-direction: column;
+
+      .switch-header {
+        font-size: 16px;
+        color: var(--global-font-color4);
+        padding-bottom: 12px;
+      }
+
+      .switch-content {
+        overflow-y: auto;
+        .clr-control-label {
+          white-space: normal;
+        }
+      }
+
+      .switch-footer {
+        button {
+          padding: 0;
+          margin: 0;
+          font-size: 12px;
+          letter-spacing: 1px;
+          color: #0079b8;
+          text-transform: uppercase;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.375",
+  "version": "1.4.377",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",