bfg-common 1.5.408 → 1.5.410

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

@@ -1,277 +1,277 @@
-<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"
-      :id="`${columnSwitchId}-dropdown-menu`"
-      :style="dropdownStyles"
-      class="dropdown-menu"
-    >
-      <div class="column-switch">
-        <div class="switch-header" data-id="switch-header-show-cols-title">
-          {{ localization.common.showColumns }}
-        </div>
-        <ul class="switch-content list-unstyled">
-          <li
-            v-for="(item, key) in columnKeysPresent"
-            :key="`${item.key}_${key}`"
-            :data-id="`switch-content-${item.id}`"
-          >
-            <div class="clr-checkbox-wrapper">
-              <input
-                :id="`${props.testId}-${item.id}`"
-                v-model="item.show"
-                :data-id="`${props.testId}-${item.testId}`"
-                :disabled="isLast && item.show"
-                type="checkbox"
-                @change="change($event, key)"
-              />
-              <label
-                :for="`${props.testId}-${item.id}`"
-                class="clr-control-label"
-                :data-id="`${props.testId || 'data-grid'}-${item.id}-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 type {
-  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(/[^\p{L}_]/gu, '') // разрешает буквы любых языков
-      .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 = (event: UI_I_HTMLSelectElement, key: number): void => {
-  const newColumnKeys = props.columnKeys.map((columnKey, item) => {
-    if (item !== key) {
-      return columnKey
-    }
-
-    columnKey.show = event.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()}`
-})
-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
-  }
-
-  setTimeout(() => {
-    setDropdownStyle()
-  }, 0)
-}
-
-const dropdownStyles = ref<any>({})
-const setDropdownStyle = (): void => {
-  dropdownStyles.value = {}
-
-  const elem = document.getElementById(columnSwitchId.value)
-  if (!elem) {
-    setTimeout(() => setDropdownStyle(), 0)
-    return
-  }
-  const { x, y, height } = elem.getBoundingClientRect()
-
-  const dropdownMenu = document.getElementById(
-    `${columnSwitchId.value}-dropdown-menu`
-  )
-
-  if (!dropdownMenu) return
-
-  dropdownStyles.value.maxHeight = 'max-content'
-
-  const windowH = window.innerHeight
-
-  const dropdownMenuH = dropdownMenu.getBoundingClientRect().height
-
-  if (y + dropdownMenuH >= windowH) {
-    if (y - dropdownMenuH <= 0) {
-      dropdownStyles.value.top = 'auto'
-      dropdownStyles.value.bottom = '0'
-      dropdownStyles.value.overflowY = 'auto'
-      dropdownStyles.value.maxHeight = '100vh'
-
-      const columnWwitch = document.querySelector(
-        `#${columnSwitchId.value}-dropdown-menu .column-switch`
-      )
-
-      if (!columnWwitch) return
-
-      columnWwitch.style.overflowY = 'hidden'
-    } else {
-      dropdownStyles.value.top = `${y - dropdownMenuH}px`
-    }
-  } else {
-    dropdownStyles.value.top = `${y + height}px`
-  }
-
-  dropdownStyles.value.left = `${x}px`
-}
-const windowResize = (): void => {
-  hide()
-}
-watch(
-  () => dropdownStyles.value.top,
-  (newValue: number) => {
-    if (!newValue) return
-
-    if (parseInt(newValue) < 0) {
-      window.removeEventListener('resize', windowResize)
-    } else {
-      window.addEventListener('resize', windowResize)
-    }
-  }
-)
-</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: var(--z-fixed);
-    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"
+      :id="`${columnSwitchId}-dropdown-menu`"
+      :style="dropdownStyles"
+      class="dropdown-menu"
+    >
+      <div class="column-switch">
+        <div class="switch-header" data-id="switch-header-show-cols-title">
+          {{ localization.common.showColumns }}
+        </div>
+        <ul class="switch-content list-unstyled">
+          <li
+            v-for="(item, key) in columnKeysPresent"
+            :key="`${item.key}_${key}`"
+            :data-id="`switch-content-${item.id}`"
+          >
+            <div class="clr-checkbox-wrapper">
+              <input
+                :id="`${props.testId}-${item.id}`"
+                v-model="item.show"
+                :data-id="`${props.testId}-${item.testId}`"
+                :disabled="isLast && item.show"
+                type="checkbox"
+                @change="change($event, key)"
+              />
+              <label
+                :for="`${props.testId}-${item.id}`"
+                class="clr-control-label"
+                :data-id="`${props.testId || 'data-grid'}-${item.id}-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 type {
+  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(/[^\p{L}_]/gu, '') // разрешает буквы любых языков
+      .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 = (event: UI_I_HTMLSelectElement, key: number): void => {
+  const newColumnKeys = props.columnKeys.map((columnKey, item) => {
+    if (item !== key) {
+      return columnKey
+    }
+
+    columnKey.show = event.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()}`
+})
+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
+  }
+
+  setTimeout(() => {
+    setDropdownStyle()
+  }, 0)
+}
+
+const dropdownStyles = ref<any>({})
+const setDropdownStyle = (): void => {
+  dropdownStyles.value = {}
+
+  const elem = document.getElementById(columnSwitchId.value)
+  if (!elem) {
+    setTimeout(() => setDropdownStyle(), 0)
+    return
+  }
+  const { x, y, height } = elem.getBoundingClientRect()
+
+  const dropdownMenu = document.getElementById(
+    `${columnSwitchId.value}-dropdown-menu`
+  )
+
+  if (!dropdownMenu) return
+
+  dropdownStyles.value.maxHeight = 'max-content'
+
+  const windowH = window.innerHeight
+
+  const dropdownMenuH = dropdownMenu.getBoundingClientRect().height
+
+  if (y + dropdownMenuH >= windowH) {
+    if (y - dropdownMenuH <= 0) {
+      dropdownStyles.value.top = 'auto'
+      dropdownStyles.value.bottom = '0'
+      dropdownStyles.value.overflowY = 'auto'
+      dropdownStyles.value.maxHeight = '100vh'
+
+      const columnWwitch = document.querySelector(
+        `#${columnSwitchId.value}-dropdown-menu .column-switch`
+      )
+
+      if (!columnWwitch) return
+
+      columnWwitch.style.overflowY = 'hidden'
+    } else {
+      dropdownStyles.value.top = `${y - dropdownMenuH}px`
+    }
+  } else {
+    dropdownStyles.value.top = `${y + height}px`
+  }
+
+  dropdownStyles.value.left = `${x}px`
+}
+const windowResize = (): void => {
+  hide()
+}
+watch(
+  () => dropdownStyles.value.top,
+  (newValue: number) => {
+    if (!newValue) return
+
+    if (parseInt(newValue) < 0) {
+      window.removeEventListener('resize', windowResize)
+    } else {
+      window.addEventListener('resize', windowResize)
+    }
+  }
+)
+</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: var(--z-fixed);
+    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>