bfg-common 1.2.20 → 1.2.21

package/components/atoms/table/simpleTable/SimpleTable.vue

@@ -1,291 +1,291 @@
-<template>
-  <div class="table-wrap">
-    <table ref="table">
-      <thead>
-        <tr>
-          <th
-            v-for="(item, index) in headItems"
-            :key="item.text"
-            :style="{ width: `${100 / headItems.length}%` }"
-            @click="sortByIndex(index)"
-          >
-            <span class="sort-arrow-wrap">
-              <span>
-                {{ item.text }}
-              </span>
-              <atoms-the-icon
-                v-show="sorting[0] === index"
-                :class="['sort-arrow', { down: sorting[1] }]"
-                width="14px"
-                height="14px"
-                name="sort-arrow"
-              />
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="(item, key) in presentBodyItems"
-          :key="key"
-          :class="{ selected: selectedRowKey === key }"
-          @click="selectRow(key, item)"
-        >
-          <td
-            v-for="(item2, key2) in item"
-            :key="key2"
-            @click="changeItemEditStatus(item2)"
-          >
-            <span v-if="!item2.isEdit">{{ item2.text }}</span>
-            <input
-              v-else
-              :id="`${props.testId}-edit-input-${key}-${key2}`"
-              v-model="item2.text"
-              type="text"
-              @blur="resetEditStatus"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="space"></div>
-    <div class="table-footer">
-      <span v-if="presentBodyItems.length"
-        >{{ presentBodyItems.length }} {{ localization.items }}</span
-      >
-      <span v-else>{{ localization.noItemsDisplay }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_TableHeadItem,
-  UI_I_TableBodyItem,
-} from '~/components/atoms/table/simpleTable/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    editable?: boolean
-    headItems: UI_I_TableHeadItem
-    bodyItems: UI_I_TableBodyItem[][]
-    testId?: string
-  }>(),
-  { testId: 'ui-simple-table' }
-)
-const emits = defineEmits<{
-  (event: 'select', value1: number, value2: UI_I_TableBodyItem[]): void
-  (event: 'change', value: UI_I_TableBodyItem[][]): void
-}>()
-const localization = computed(() => useLocal())
-
-let sorting = ref<[number, boolean]>([0, true])
-const sortByIndex = (index: number): void => {
-  const sortDown = sorting.value[0] === index ? !sorting.value[1] : true
-  sorting.value = [index, sortDown]
-
-  presentBodyItems.value = presentBodyItems.value.sort((row1, row2) => {
-    return sortDown
-      ? row2[index].text.localeCompare(row1[index].text)
-      : row1[index].text.localeCompare(row2[index].text)
-  })
-}
-
-const presentBodyItems = ref<UI_I_TableBodyItem[][]>([])
-
-watch(
-  () => props.bodyItems,
-  (newValue) => {
-    presentBodyItems.value = useDeepCopy(newValue)
-
-    if (!props.editable) return
-
-    presentBodyItems.value = presentBodyItems.value.map((arr) => {
-      return arr.map((item) => {
-        return {
-          ...item,
-          isEdit: false,
-        }
-      })
-    })
-
-    sortByIndex(0)
-  },
-  { immediate: true, deep: true }
-)
-
-const selectedRowKey = ref<number>(-1)
-const selectRow = (key: number, item: UI_I_TableBodyItem[]): void => {
-  if (!props.editable) {
-    return
-  }
-
-  selectedRowKey.value = key
-  emits('select', key, item)
-}
-
-const table = ref<Element | null>(null)
-let pauseChangeEmit = false
-const changeItemEditStatus = (editItem: UI_I_TableBodyItem): void => {
-  if (!props.editable || !editItem.editable) {
-    return
-  }
-
-  pauseChangeEmit = true
-  presentBodyItems.value = presentBodyItems.value.map((arr) => {
-    return arr.map((item) => {
-      item.isEdit = item === editItem
-      return item
-    })
-  })
-  setTimeout(() => {
-    const input = table.value?.querySelector('input')
-    input?.focus()
-    pauseChangeEmit = false
-  }, 0)
-}
-const resetEditStatus = (): void => {
-  if (!props.editable) {
-    return
-  }
-
-  presentBodyItems.value = presentBodyItems.value.map((arr) => {
-    return arr.map((item) => {
-      item.isEdit = false
-      return item
-    })
-  })
-}
-watch(presentBodyItems, (val) => {
-  if (pauseChangeEmit) return
-  emits('change', val)
-})
-</script>
-
-<style scoped lang="scss">
-.table-wrap {
-  border: 1px solid var(--global-border-color);
-  border-radius: 3px;
-  overflow-x: auto;
-  display: flex;
-  flex-direction: column;
-  height: 150px;
-
-  table {
-    width: 100%;
-
-    thead {
-      background-color: var(--thead-bg-color);
-      tr {
-        th {
-          color: var(--global-font-color4);
-          background-color: var(--thead-bg-color);
-          font-size: 11px;
-          font-weight: 600;
-          height: 24px;
-          vertical-align: middle;
-          padding: 0 0 0 12px;
-          border-bottom: none;
-          text-align: left;
-          border-bottom: 2px solid var(--global-border-color);
-
-          &:not(:first-child) {
-            border-left: 1px solid var(--global-border-color);
-          }
-
-          .sort-arrow-wrap {
-            margin-left: auto;
-            height: 14px;
-            width: 14px;
-            vertical-align: middle;
-
-            .sort-arrow {
-              &.down {
-                transform: rotate(180deg);
-              }
-            }
-          }
-        }
-      }
-    }
-
-    tbody {
-      //height: 150px;
-      //overflow-y: auto;
-      //background-color: var(--modal-other-bg-color);
-      tr {
-        color: var(--global-font-color4);
-        &:hover {
-          background-color: var(--row-hover-bg-color);
-          color: #454545;
-
-          td {
-            border-bottom-color: var(--row-hover-border-color);
-          }
-        }
-
-        &.selected {
-          background-color: var(--row-selected-bg-color);
-          color: var(--row-selected-text-color);
-          border-bottom: 1px solid;
-          border-bottom-color: transparent;
-
-          td > span {
-            color: var(--row-selected-text-color);
-          }
-
-          input {
-            color: var(--row-selected-input-color);
-            border: 1px solid #ffffff;
-            border-bottom: none;
-            &:focus {
-              border-bottom: 1px solid #0095d3;
-              background-size: 100% 100%;
-            }
-          }
-        }
-
-        td {
-          border-width: 0 0 1px;
-          border-color: #ddd;
-          font-size: 13px;
-          font-weight: 400;
-          line-height: 24px;
-          padding: 0 12px;
-          border-bottom: 1px solid var(--global-border-color);
-        }
-      }
-    }
-  }
-  .space {
-    flex: 1;
-  }
-  .table-footer {
-    text-align: end;
-    color: #565656;
-    line-height: normal;
-    box-sizing: border-box;
-    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
-    padding: 3px 0 3px 3px;
-    border-top: 2px solid #ddd;
-
-    span {
-      color: var(--global-font-color4);
-      font-size: 12px;
-      padding: 0 16px;
-    }
-  }
-}
-</style>
-
-<style>
-/* если где нибудь еще в другом блоке будет этот цвет повторяться то сделать глобално  */
-:root {
-  --thead-bg-color: #{$light-grey};
-  --row-selected-input-color: #{$white};
-}
-:root.dark-theme {
-  --thead-bg-color: #{$--blue-700};
-  --row-selected-input-color: #000;
-}
-</style>
+<template>
+  <div class="table-wrap">
+    <table ref="table">
+      <thead>
+        <tr>
+          <th
+            v-for="(item, index) in headItems"
+            :key="item.text"
+            :style="{ width: `${100 / headItems.length}%` }"
+            @click="sortByIndex(index)"
+          >
+            <span class="sort-arrow-wrap">
+              <span>
+                {{ item.text }}
+              </span>
+              <atoms-the-icon
+                v-show="sorting[0] === index"
+                :class="['sort-arrow', { down: sorting[1] }]"
+                width="14px"
+                height="14px"
+                name="sort-arrow"
+              />
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(item, key) in presentBodyItems"
+          :key="key"
+          :class="{ selected: selectedRowKey === key }"
+          @click="selectRow(key, item)"
+        >
+          <td
+            v-for="(item2, key2) in item"
+            :key="key2"
+            @click="changeItemEditStatus(item2)"
+          >
+            <span v-if="!item2.isEdit">{{ item2.text }}</span>
+            <input
+              v-else
+              :id="`${props.testId}-edit-input-${key}-${key2}`"
+              v-model="item2.text"
+              type="text"
+              @blur="resetEditStatus"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="space"></div>
+    <div class="table-footer">
+      <span v-if="presentBodyItems.length"
+        >{{ presentBodyItems.length }} {{ localization.items }}</span
+      >
+      <span v-else>{{ localization.noItemsDisplay }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_TableHeadItem,
+  UI_I_TableBodyItem,
+} from '~/components/atoms/table/simpleTable/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    editable?: boolean
+    headItems: UI_I_TableHeadItem
+    bodyItems: UI_I_TableBodyItem[][]
+    testId?: string
+  }>(),
+  { testId: 'ui-simple-table' }
+)
+const emits = defineEmits<{
+  (event: 'select', value1: number, value2: UI_I_TableBodyItem[]): void
+  (event: 'change', value: UI_I_TableBodyItem[][]): void
+}>()
+const localization = computed(() => useLocal())
+
+let sorting = ref<[number, boolean]>([0, true])
+const sortByIndex = (index: number): void => {
+  const sortDown = sorting.value[0] === index ? !sorting.value[1] : true
+  sorting.value = [index, sortDown]
+
+  presentBodyItems.value = presentBodyItems.value.sort((row1, row2) => {
+    return sortDown
+      ? row2[index].text.localeCompare(row1[index].text)
+      : row1[index].text.localeCompare(row2[index].text)
+  })
+}
+
+const presentBodyItems = ref<UI_I_TableBodyItem[][]>([])
+
+watch(
+  () => props.bodyItems,
+  (newValue) => {
+    presentBodyItems.value = useDeepCopy(newValue)
+
+    if (!props.editable) return
+
+    presentBodyItems.value = presentBodyItems.value.map((arr) => {
+      return arr.map((item) => {
+        return {
+          ...item,
+          isEdit: false,
+        }
+      })
+    })
+
+    sortByIndex(0)
+  },
+  { immediate: true, deep: true }
+)
+
+const selectedRowKey = ref<number>(-1)
+const selectRow = (key: number, item: UI_I_TableBodyItem[]): void => {
+  if (!props.editable) {
+    return
+  }
+
+  selectedRowKey.value = key
+  emits('select', key, item)
+}
+
+const table = ref<Element | null>(null)
+let pauseChangeEmit = false
+const changeItemEditStatus = (editItem: UI_I_TableBodyItem): void => {
+  if (!props.editable || !editItem.editable) {
+    return
+  }
+
+  pauseChangeEmit = true
+  presentBodyItems.value = presentBodyItems.value.map((arr) => {
+    return arr.map((item) => {
+      item.isEdit = item === editItem
+      return item
+    })
+  })
+  setTimeout(() => {
+    const input = table.value?.querySelector('input')
+    input?.focus()
+    pauseChangeEmit = false
+  }, 0)
+}
+const resetEditStatus = (): void => {
+  if (!props.editable) {
+    return
+  }
+
+  presentBodyItems.value = presentBodyItems.value.map((arr) => {
+    return arr.map((item) => {
+      item.isEdit = false
+      return item
+    })
+  })
+}
+watch(presentBodyItems, (val) => {
+  if (pauseChangeEmit) return
+  emits('change', val)
+})
+</script>
+
+<style scoped lang="scss">
+.table-wrap {
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  height: 150px;
+
+  table {
+    width: 100%;
+
+    thead {
+      background-color: var(--thead-bg-color);
+      tr {
+        th {
+          color: var(--global-font-color4);
+          background-color: var(--thead-bg-color);
+          font-size: 11px;
+          font-weight: 600;
+          height: 24px;
+          vertical-align: middle;
+          padding: 0 0 0 12px;
+          border-bottom: none;
+          text-align: left;
+          border-bottom: 2px solid var(--global-border-color);
+
+          &:not(:first-child) {
+            border-left: 1px solid var(--global-border-color);
+          }
+
+          .sort-arrow-wrap {
+            margin-left: auto;
+            height: 14px;
+            width: 14px;
+            vertical-align: middle;
+
+            .sort-arrow {
+              &.down {
+                transform: rotate(180deg);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    tbody {
+      //height: 150px;
+      //overflow-y: auto;
+      //background-color: var(--modal-other-bg-color);
+      tr {
+        color: var(--global-font-color4);
+        &:hover {
+          background-color: var(--row-hover-bg-color);
+          color: #454545;
+
+          td {
+            border-bottom-color: var(--row-hover-border-color);
+          }
+        }
+
+        &.selected {
+          background-color: var(--row-selected-bg-color);
+          color: var(--row-selected-text-color);
+          border-bottom: 1px solid;
+          border-bottom-color: transparent;
+
+          td > span {
+            color: var(--row-selected-text-color);
+          }
+
+          input {
+            color: var(--row-selected-input-color);
+            border: 1px solid #ffffff;
+            border-bottom: none;
+            &:focus {
+              border-bottom: 1px solid #0095d3;
+              background-size: 100% 100%;
+            }
+          }
+        }
+
+        td {
+          border-width: 0 0 1px;
+          border-color: #ddd;
+          font-size: 13px;
+          font-weight: 400;
+          line-height: 24px;
+          padding: 0 12px;
+          border-bottom: 1px solid var(--global-border-color);
+        }
+      }
+    }
+  }
+  .space {
+    flex: 1;
+  }
+  .table-footer {
+    text-align: end;
+    color: #565656;
+    line-height: normal;
+    box-sizing: border-box;
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
+    padding: 3px 0 3px 3px;
+    border-top: 2px solid #ddd;
+
+    span {
+      color: var(--global-font-color4);
+      font-size: 12px;
+      padding: 0 16px;
+    }
+  }
+}
+</style>
+
+<style>
+/* если где нибудь еще в другом блоке будет этот цвет повторяться то сделать глобално  */
+:root {
+  --thead-bg-color: #{$light-grey};
+  --row-selected-input-color: #{$white};
+}
+:root.dark-theme {
+  --thead-bg-color: #{$--blue-700};
+  --row-selected-input-color: #000;
+}
+</style>

package/components/atoms/table/simpleTable/models/interfaces.ts

@@ -1,10 +1,10 @@
-export interface UI_I_TableBodyItem {
-  text: string
-  editable: boolean
-  isEdit?: boolean
-  id?: string
-}
-
-export interface UI_I_TableHeadItem {
-  text: string
-}
+export interface UI_I_TableBodyItem {
+  text: string
+  editable: boolean
+  isEdit?: boolean
+  id?: string
+}
+
+export interface UI_I_TableHeadItem {
+  text: string
+}