bfg-common 1.2.20 → 1.2.21

package/components/atoms/table/dataGrid/utils/constructDataTable.ts

@@ -1,32 +1,32 @@
-import {
-  UI_I_ColumnKey,
-  UI_I_HeadItem,
-} from '~/components/atoms/table/dataGrid/models/interfaces'
-
-export const constructColumnKey = (
-  key: string,
-  text: string,
-  show: boolean
-): UI_I_ColumnKey => ({
-  key,
-  text,
-  show,
-})
-
-export const constructHeadItem = (
-  key: string,
-  text: string,
-  sortColumn: string,
-  hasFilter: boolean,
-  width: string,
-  iconName?: string
-): UI_I_HeadItem => ({
-  key,
-  text,
-  sortColumn,
-  showFilter: false,
-  hasFilter,
-  filter: '',
-  width,
-  iconName,
-})
+import {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+
+export const constructColumnKey = (
+  key: string,
+  text: string,
+  show: boolean
+): UI_I_ColumnKey => ({
+  key,
+  text,
+  show,
+})
+
+export const constructHeadItem = (
+  key: string,
+  text: string,
+  sortColumn: string,
+  hasFilter: boolean,
+  width: string,
+  iconName?: string
+): UI_I_HeadItem => ({
+  key,
+  text,
+  sortColumn,
+  showFilter: false,
+  hasFilter,
+  filter: '',
+  width,
+  iconName,
+})

package/components/atoms/table/info/Info.vue

@@ -1,60 +1,60 @@
-<template>
-  <table class="table table-vertical">
-    <tbody>
-      <tr v-for="item in list" :key="item.id">
-        <th
-          scope="row"
-          :class="['vm-name-label', item.isProperty && 'hard-disk-properties']"
-        >
-          {{ item.label }}
-        </th>
-        <td class="vm-name">
-          <slot :name="item.key">
-            {{ item.value }}
-          </slot>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script lang="ts" setup>
-import { UI_I_TableInfoItem } from '~/components/atoms/table/info/models/interfaces'
-
-const props = defineProps<{
-  items: UI_I_TableInfoItem[]
-}>()
-
-const list = computed<UI_I_TableInfoItem[]>(() => {
-  return props.items.map((item) => {
-    return {
-      ...item,
-      id: Symbol(''),
-    }
-  })
-})
-</script>
-
-<style lang="scss" scoped>
-.dark-theme {
-  table {
-    border-color: #495865;
-
-    &.table-vertical th:first-child,
-    &.table-vertical td {
-      background-color: #29414e;
-      border-color: #495865;
-    }
-  }
-}
-
-table {
-  .vm-name-label {
-    width: 20%;
-
-    &.hard-disk-properties {
-      padding-left: 25px;
-    }
-  }
-}
-</style>
+<template>
+  <table class="table table-vertical">
+    <tbody>
+      <tr v-for="item in list" :key="item.id">
+        <th
+          scope="row"
+          :class="['vm-name-label', item.isProperty && 'hard-disk-properties']"
+        >
+          {{ item.label }}
+        </th>
+        <td class="vm-name">
+          <slot :name="item.key">
+            {{ item.value }}
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_TableInfoItem } from '~/components/atoms/table/info/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_TableInfoItem[]
+}>()
+
+const list = computed<UI_I_TableInfoItem[]>(() => {
+  return props.items.map((item) => {
+    return {
+      ...item,
+      id: Symbol(''),
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.dark-theme {
+  table {
+    border-color: #495865;
+
+    &.table-vertical th:first-child,
+    &.table-vertical td {
+      background-color: #29414e;
+      border-color: #495865;
+    }
+  }
+}
+
+table {
+  .vm-name-label {
+    width: 20%;
+
+    &.hard-disk-properties {
+      padding-left: 25px;
+    }
+  }
+}
+</style>

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

@@ -1,9 +1,9 @@
-export interface UI_I_TableInfoItem {
-  label: string
-  value: any
-  isProperty?: boolean
-  key?: string
-  localization?: string
-  localizationTemplate?: string
-  isCapital?: boolean
-}
+export interface UI_I_TableInfoItem {
+  label: string
+  value: any
+  isProperty?: boolean
+  key?: string
+  localization?: string
+  localizationTemplate?: string
+  isCapital?: boolean
+}

package/components/atoms/table/simpleEvent/SimpleEvent.vue

@@ -1,98 +1,98 @@
-<template>
-  <div class="table-wrap">
-    <table ref="table">
-      <thead>
-        <tr>
-          <th
-            v-for="item in headItems"
-            :key="item.text"
-            :style="{ width: `${100 / headItems.length}%` }"
-          >
-            {{ item.text }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, key) in presentBodyItems" :key="key" :class="''">
-          <td>{{ item.text }}</td>
-          <td>{{ item.value }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_TableHeadItem,
-  UI_I_TableBodyItem,
-} from '~/components/atoms/table/simpleEvent/models/interfaces'
-
-const props = defineProps<{
-  headItems: UI_I_TableHeadItem
-  bodyItems: UI_I_TableBodyItem[][]
-}>()
-
-const presentBodyItems = ref([])
-watch(
-  () => props.bodyItems,
-  (val) => {
-    presentBodyItems.value = useDeepCopy(val)
-  },
-  { immediate: true, deep: true }
-)
-</script>
-
-<style scoped lang="scss">
-.table-wrap {
-  border: 1px solid var(--global-border-color);
-  border-radius: 3px;
-  overflow-x: auto;
-
-  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);
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        color: var(--global-font-color4);
-        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);
-        }
-      }
-    }
-  }
-}
-</style>
-
-<style>
-:root {
-  --thead-bg-color: #{$light-grey};
-}
-:root.dark-theme {
-  --thead-bg-color: #{$--blue-700};
-}
-</style>
+<template>
+  <div class="table-wrap">
+    <table ref="table">
+      <thead>
+        <tr>
+          <th
+            v-for="item in headItems"
+            :key="item.text"
+            :style="{ width: `${100 / headItems.length}%` }"
+          >
+            {{ item.text }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, key) in presentBodyItems" :key="key" :class="''">
+          <td>{{ item.text }}</td>
+          <td>{{ item.value }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_TableHeadItem,
+  UI_I_TableBodyItem,
+} from '~/components/atoms/table/simpleEvent/models/interfaces'
+
+const props = defineProps<{
+  headItems: UI_I_TableHeadItem
+  bodyItems: UI_I_TableBodyItem[][]
+}>()
+
+const presentBodyItems = ref([])
+watch(
+  () => props.bodyItems,
+  (val) => {
+    presentBodyItems.value = useDeepCopy(val)
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.table-wrap {
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  overflow-x: auto;
+
+  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);
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        color: var(--global-font-color4);
+        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);
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style>
+:root {
+  --thead-bg-color: #{$light-grey};
+}
+:root.dark-theme {
+  --thead-bg-color: #{$--blue-700};
+}
+</style>

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

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

package/components/atoms/table/simpleInfo/SimpleInfo.vue

@@ -1,68 +1,68 @@
-<template>
-  <div class="table-wrap">
-    <table ref="table">
-      <tbody>
-        <tr>
-          <td v-for="item in props.headItems" :key="item.text" class="row">
-            <span> {{ item.text }}</span>
-            <span class="underlined" @click="selectNode(item.value)">
-              {{ item.value }}
-            </span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_TableInfo } from '~/components/atoms/table/simpleInfo/models/interfaces'
-
-const props = defineProps<{
-  headItems: UI_I_TableInfo
-}>()
-const emits = defineEmits(['select-node'])
-
-const selectNode = (node: string | number): void => {
-  emits('select-node', node)
-}
-</script>
-
-<style scoped lang="scss">
-.row {
-  display: inline-block;
-  width: 100%;
-  span {
-    width: 35%;
-    line-height: 30px;
-  }
-  .underlined {
-    color: #0072a3;
-    text-decoration: underline;
-  }
-}
-.table-wrap {
-  border: 1px solid #ddd;
-  border-radius: 3px;
-
-  table {
-    width: 100%;
-
-    tbody {
-      tr {
-        color: #565656;
-        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 #ddd;
-          background-color: #fafafa;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="table-wrap">
+    <table ref="table">
+      <tbody>
+        <tr>
+          <td v-for="item in props.headItems" :key="item.text" class="row">
+            <span> {{ item.text }}</span>
+            <span class="underlined" @click="selectNode(item.value)">
+              {{ item.value }}
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_TableInfo } from '~/components/atoms/table/simpleInfo/models/interfaces'
+
+const props = defineProps<{
+  headItems: UI_I_TableInfo
+}>()
+const emits = defineEmits(['select-node'])
+
+const selectNode = (node: string | number): void => {
+  emits('select-node', node)
+}
+</script>
+
+<style scoped lang="scss">
+.row {
+  display: inline-block;
+  width: 100%;
+  span {
+    width: 35%;
+    line-height: 30px;
+  }
+  .underlined {
+    color: #0072a3;
+    text-decoration: underline;
+  }
+}
+.table-wrap {
+  border: 1px solid #ddd;
+  border-radius: 3px;
+
+  table {
+    width: 100%;
+
+    tbody {
+      tr {
+        color: #565656;
+        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 #ddd;
+          background-color: #fafafa;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -1,4 +1,4 @@
-export interface UI_I_TableInfo {
-  text: string
-  value: string | number
-}
+export interface UI_I_TableInfo {
+  text: string
+  value: string | number
+}