bfg-common 1.3.21 → 1.3.23

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

@@ -1,206 +1,206 @@
-<template>
-  <div class="column-switch-wrap flex-align-center relative" @click.stop>
-    <button :id="columnSwitchId" 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.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"
-                :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`"
-            class="btn btn-sm btn-link switch-button export-link"
-            @click="selectAll"
-          >
-            {{ localization.selectAll }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_HTMLSelectElement, UI_I_Localization } from '~/lib/models/interfaces'
-import { 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" 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.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"
+                :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`"
+            class="btn btn-sm btn-link switch-button export-link"
+            @click="selectAll"
+          >
+            {{ localization.selectAll }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_HTMLSelectElement, UI_I_Localization } from '~/lib/models/interfaces'
+import { 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>