bfg-common 1.4.778 → 1.4.780

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

@@ -1,222 +1,222 @@
-<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, '')
-      .replace(/__+/g, '_')
-      .replace(/_$/, '')
-    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>
+<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, '')
+      .replace(/__+/g, '_')
+      .replace(/_$/, '')
+    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/components/atoms/table/dataGrid/lib/config/settingsTable.ts

@@ -1,91 +1,91 @@
-import type { UI_ColumnSettingsStrategy } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type {
-  UI_I_ColumnKey,
-  UI_I_HeadItem,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_DropdownButtonItem } from '~/components/common/select/button/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import {
-  constructColumnKey,
-  constructHeadItem,
-} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
-
-export const defaultColumnKeys = (
-  items: [string, boolean, string, string][],
-  strategy?: UI_ColumnSettingsStrategy
-): UI_I_ColumnKey[] => {
-  const result: UI_I_ColumnKey[] = []
-  items.forEach((item, i) => {
-    let col: string = `col${i}` // Стандартное значение по умолчанию
-
-    if (strategy) {
-      // Проходим по ключам объекта и ищем соответствие индекса i в значениях
-      for (const key in strategy) {
-        if (strategy[key].includes(i)) {
-          col = key
-          break
-        }
-      }
-    }
-
-    result.push(
-      constructColumnKey(col, item[0], item[1], `show-column-${item[3]}`)
-    )
-  })
-  return result
-}
-
-export const defaultHeadItems = (
-  items: [string, boolean, string, string][],
-  strategy?: UI_ColumnSettingsStrategy
-): UI_I_HeadItem[] => {
-  const result: UI_I_HeadItem[] = []
-  items.forEach((item, i) => {
-    let col: string = `col${i}` // Стандартное значение по умолчанию
-
-    if (strategy) {
-      // Проходим по ключам объекта и ищем соответствие индекса i в значениях
-      for (const key in strategy) {
-        if (strategy[key].includes(i)) {
-          col = key
-          break
-        }
-      }
-    }
-
-    result.push(
-      constructHeadItem(
-        col,
-        item[0],
-        item[3],
-        false,
-        item[2],
-        undefined,
-        item[3]
-      )
-    )
-  })
-  return result
-}
-
-export const exportItemsFunc = (
-  localization: UI_I_Localization,
-  rows: number,
-  selectedRows: number
-): UI_I_DropdownButtonItem[] => {
-  return [
-    {
-      text: localization.common.allRowsCount.replace('{0}', '' + rows),
-      type: '0',
-      disabled: false,
-    },
-    {
-      text: localization.common.selectedRowsCount.replace(
-        '{0}',
-        '' + selectedRows
-      ),
-      type: '1',
-      disabled: false,
-    },
-  ]
-}
+import type { UI_ColumnSettingsStrategy } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_DropdownButtonItem } from '~/components/common/select/button/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+
+export const defaultColumnKeys = (
+  items: [string, boolean, string, string][],
+  strategy?: UI_ColumnSettingsStrategy
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  items.forEach((item, i) => {
+    let col: string = `col${i}` // Стандартное значение по умолчанию
+
+    if (strategy) {
+      // Проходим по ключам объекта и ищем соответствие индекса i в значениях
+      for (const key in strategy) {
+        if (strategy[key].includes(i)) {
+          col = key
+          break
+        }
+      }
+    }
+
+    result.push(
+      constructColumnKey(col, item[0], item[1], `show-column-${item[3]}`)
+    )
+  })
+  return result
+}
+
+export const defaultHeadItems = (
+  items: [string, boolean, string, string][],
+  strategy?: UI_ColumnSettingsStrategy
+): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  items.forEach((item, i) => {
+    let col: string = `col${i}` // Стандартное значение по умолчанию
+
+    if (strategy) {
+      // Проходим по ключам объекта и ищем соответствие индекса i в значениях
+      for (const key in strategy) {
+        if (strategy[key].includes(i)) {
+          col = key
+          break
+        }
+      }
+    }
+
+    result.push(
+      constructHeadItem(
+        col,
+        item[0],
+        item[3],
+        false,
+        item[2],
+        undefined,
+        item[3]
+      )
+    )
+  })
+  return result
+}
+
+export const exportItemsFunc = (
+  localization: UI_I_Localization,
+  rows: number,
+  selectedRows: number
+): UI_I_DropdownButtonItem[] => {
+  return [
+    {
+      text: localization.common.allRowsCount.replace('{0}', '' + rows),
+      type: '0',
+      disabled: false,
+    },
+    {
+      text: localization.common.selectedRowsCount.replace(
+        '{0}',
+        '' + selectedRows
+      ),
+      type: '1',
+      disabled: false,
+    },
+  ]
+}