bfg-common 1.0.0

package/components/atoms/table/compact/Compact.vue

@@ -0,0 +1,526 @@
+<template>
+  <div class="relative">
+    <div :id="outerWrapper" class="datagrid-outer-wrapper">
+      <div class="datagrid-inner-wrapper">
+        <div class="datagrid">
+          <div class="datagrid-table-wrapper">
+            <div class="datagrid-table">
+              <div class="datagrid-header">
+                <div class="datagrid-row">
+                  <div class="datagrid-row-master datagrid-row-flex">
+                    <div class="datagrid-row-scrollable">
+                      <div
+                        v-for="(item, key) in props.headItems"
+                        :key="key"
+                        :style="{
+                          width: columnsWidth[key],
+                        }"
+                        class="datagrid-column datagrid-fixed-width"
+                      >
+                        <div class="datagrid-column-flex">
+                          <div class="datagrid-column-title">
+                            <slot name="th" :item="item">
+
+                              <span class="title-column">
+                                {{ item.text }}
+                              </span>
+                            </slot>
+                          </div>
+                          <div class="relative"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <template v-if="props.bodyItems.length">
+                <div
+                  v-for="(item, key) in props.bodyItems"
+                  :key="key"
+                  :class="['datagrid-body-row datagrid-row animation']"
+                >
+                  <div>
+                    <div class="datagrid-row-master datagrid-row-flex">
+                      <div class="datagrid-row-scrollable">
+                        <div class="datagrid-scrolling-cells">
+                          <div
+                            v-for="(item2, key2, index) in item"
+                            :key="item2"
+                            class="datagrid-cell datagrid-fixed-width"
+                            :style="{
+                              width: `${columnsWidth[index]}`,
+                            }"
+                          >
+                            <div class="flex-align-center h-100">
+                              <slot :name="item2.key" :item="item2">
+                                <span>{{ item2 }}</span>
+                              </slot>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div class="datagrid-placeholder-container">
+                  <div class="datagrid-placeholder datagrid-empty">
+                    <div class="datagrid-placeholder-image"></div>
+
+                    <span>No items found</span>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+
+        <div v-show="props.loading" class="datagrid-spinner">
+          <div class="spinner"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_HeadItem } from '~/components/atoms/table/compact/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    headItems: UI_I_HeadItem[]
+    bodyItems: any // don't know what array fields will be
+    loading?: boolean
+  }>(),
+  {
+    loading: false,
+  }
+)
+
+const columnsWidth = ref<string[]>([])
+const outerWrapper = `datagrid-outer-wrapper${useUniqueId()}`
+let dataGridWidth = 0
+const setDataGridWidth = (): void => {
+  const el = document.getElementById(outerWrapper)
+
+  if (!el) {
+    setTimeout(setDataGridWidth, 0)
+    return
+  }
+
+  dataGridWidth = document.getElementById(outerWrapper)?.clientWidth || 0
+
+  props.headItems.forEach((element) => {
+    const equalGridWidth =
+      dataGridWidth / Object.keys(props.headItems).length - 1
+    const elementMax = Math.max(equalGridWidth, element.width)
+    columnsWidth.value.push(`${elementMax}px`)
+  })
+}
+setDataGridWidth()
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins';
+.datagrid-outer-wrapper {
+  @include flex($dir: row);
+  padding-top: 12px;
+  flex-grow: 1;
+  overflow: auto;
+
+  & * {
+    box-sizing: border-box;
+  }
+
+  & svg {
+    fill: var(--table-color);
+  }
+
+  .datagrid-inner-wrapper {
+    @include flex($dir: column);
+    flex-grow: 1;
+    overflow: auto;
+
+    .datagrid {
+      overflow: auto;
+      flex: 1 1 auto;
+      border-radius: 0.125rem 0.125rem 0 0;
+      background-color: var(--block-view-bg-color);
+      border-color: var(--global-border-color);
+
+      .datagrid-table-wrapper {
+        display: flex;
+        flex: 1 1 auto;
+        min-height: 100%;
+
+        .datagrid-table {
+          @include flex($dir: column);
+          flex: 1 1 auto;
+          align-content: flex-start;
+          position: relative;
+
+          .datagrid-header {
+            position: sticky;
+            top: 0;
+            z-index: 501;
+            width: auto;
+
+            .datagrid-row-scrollable {
+              flex-direction: row;
+
+              .datagrid-column-separator {
+                user-select: none;
+
+                &::after {
+                  cursor: col-resize;
+                }
+              }
+            }
+
+            .datagrid-row {
+              color: var(--table-color);
+              background-color: var(--block-view-bg-color);
+
+              &.datagrid-selected {
+                background-color: var(--row-selected-bg-color);
+                border-bottom: 1px solid var(--global-border-color);
+
+                & :deep(*) {
+                  color: var(--table-active-color);
+                }
+              }
+
+              .datagrid-column {
+                background-color: var(--block-view-bg-color);
+                border-bottom: 1px solid var(--global-border-color);
+                padding: 6px 12px 5px;
+                //flex: 1 1 auto;
+
+                &:last-child {
+                  flex: 1 1 auto;
+                }
+
+                &.datagrid-toggle-block {
+                  width: 38px;
+                  min-width: 38px;
+
+                  .datagrid-column-separator {
+                    cursor: default;
+
+                    &::after {
+                      cursor: default;
+                    }
+                  }
+                }
+              }
+
+              .datagrid-column-title {
+                align-self: auto;
+                color: var(--table-color);
+                background-color: var(--block-view-bg-color);
+                border-bottom-color: var(--global-border-color);
+                font-size: 11px;
+                @include flex($align: center);
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+                //line-height: 24px;
+                line-height: normal;
+
+                .title-column {
+                  font-weight: bold;
+                  font-size: 11px;
+                }
+
+                .sort-arrow-wrap {
+                  margin-left: auto;
+                  height: 14px;
+                  width: 14px;
+                  vertical-align: middle;
+
+                  .sort-arrow {
+                    &.down {
+                      transform: rotate(180deg);
+                    }
+                  }
+                }
+                .title-icon {
+                  width: 24px;
+                  height: 24px;
+                }
+              }
+
+              .datagrid-filter-toggle {
+                background: unset;
+
+                .filter-icon {
+                  width: 16px;
+                  height: 16px;
+                }
+              }
+            }
+          }
+
+          .datagrid-placeholder-container {
+            span {
+              font-size: 16px;
+              color: var(--global-font-color4);
+            }
+          }
+
+          .datagrid-row {
+            width: 100%;
+            min-width: max-content;
+            border-top: none;
+            color: var(--table-color);
+            background-color: var(--block-view-bg-color);
+            border-bottom: 1px solid var(--global-border-color);
+
+            &.datagrid-selected {
+              & :deep(*) {
+                color: var(--table-active-color);
+              }
+
+              .datagrid-cell {
+                // background-color: var(--row-selected-bg-color);
+                // border-bottom: 1px solid var(--global-border-color);
+                position: relative;
+                line-height: 1rem;
+
+                &.hidden-text-triangle::after {
+                  content: '';
+                  margin-right: -5%;
+                  position: absolute;
+                  transform: rotate(225deg);
+                  border-bottom: 21px solid transparent;
+                  border-right: 21px solid var(--global-bg-color);
+                  bottom: 4%;
+                  right: 0;
+                  z-index: 1000003;
+                }
+                &.hidden-text-triangle::before {
+                  content: '';
+                  margin-right: -5%;
+                  transform: rotate(-135deg);
+                  position: absolute;
+                  border-bottom: 22px solid transparent;
+                  border-right: 22px solid var(--global-border-color);
+                  bottom: 3%;
+                  right: 0%;
+                  z-index: 1000002;
+                }
+              }
+
+              .datagrid-row-detail {
+                background-color: var(--row-selected-bg-color);
+                border-bottom: 1px solid var(--global-border-color);
+              }
+            }
+
+            .datagrid-cell {
+              min-width: 38px;
+              min-height: 28px;
+              padding: 2px 4px 3px 4px;
+
+              &:last-child {
+                flex: 1 1 auto;
+              }
+
+              button {
+                height: 0.9rem;
+                width: 0.9rem;
+
+                .arrow-icon {
+                  width: 16px;
+                  height: 16px;
+                  transform: rotate(90deg);
+                }
+              }
+
+              .datagrid-cell-icon {
+                display: inline-block;
+                width: 16px;
+                height: 16px;
+              }
+
+              .datagrid-expandable-caret-button {
+                cursor: pointer;
+                width: 100%;
+
+                .datagrid-expandable-caret-icon {
+                  width: 16px;
+                  height: 16px;
+                  transform: rotate(90deg);
+                  fill: var(--table-caret-color);
+
+                  &.toggle {
+                    transform: rotate(180deg);
+                  }
+                }
+              }
+            }
+          }
+
+          .datagrid-row-sticky {
+            @include flex($w: nowrap);
+            position: sticky;
+            left: 0;
+            z-index: 500;
+            background-color: var(--block-view-bg-color);
+
+            .datagrid-column {
+              color: var(--table-color);
+              background-color: var(--block-view-bg-color);
+              border-bottom-color: var(--global-border-color);
+              text-align: left;
+              display: flex;
+              flex: 1 1 auto;
+              vertical-align: top;
+              border: none;
+
+              &.datagrid-expandable-caret {
+                .datagrid-column-separator {
+                  display: block;
+
+                  &::after {
+                    top: 0;
+                    height: 18px;
+                  }
+                }
+
+                .radio-btn {
+                  width: 16px;
+                  height: 16px;
+                }
+              }
+
+              .datagrid-column-separator {
+                position: relative;
+                //left: 0.6rem;
+                flex: 0 0 auto;
+                width: 0.05rem;
+                order: 100;
+                margin-left: auto;
+                height: 100%;
+              }
+            }
+
+            .datagrid-fixed-column {
+              background-color: var(--block-view-bg-color);
+
+              &::after {
+                content: '';
+                width: 0.05rem;
+                height: calc(100% - 0.5rem);
+                position: absolute;
+                right: 0;
+                top: 0.25rem;
+                background-color: var(--global-border-color);
+              }
+            }
+          }
+
+          .datagrid-row-scrollable {
+            @include flex($ff: row nowrap);
+            flex: 1 1 auto;
+
+            .datagrid-scrolling-cells {
+              @include flex($ff: row nowrap);
+              flex: 1 1 auto;
+            }
+          }
+          .datagrid-body-row {
+            .datagrid-row-scrollable {
+              @include flex($ff: column nowrap);
+
+              .datagrid-row-detail {
+                flex: 1;
+              }
+            }
+
+            &:not(.datagrid-selected):hover {
+              // border-bottom: 1px solid var(--table-hover-row-border-color);
+              // background-color: var(--table-hover-row-background-color);
+              color: var(--table-hover-row-color);
+
+              .datagrid-fixed-column {
+                background-color: var(--table-hover-row-background-color);
+              }
+              .datagrid-cell {
+                // background-color: var(--table-hover-row-background-color);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .datagrid-spinner {
+      position: absolute;
+      @include flex($just: center, $align: center);
+      width: 100%;
+      top: 0.6rem;
+      height: calc(100% - 0.6rem);
+      background-color: #ffffff99;
+      z-index: 590;
+
+      .spinner {
+        width: 40px;
+        height: 40px;
+        min-width: 40px;
+        min-height: 40px;
+      }
+    }
+
+    .datagrid-footer-description {
+      flex: 1 1 auto;
+
+      :deep(svg) {
+        fill: var(--table-switch-color);
+      }
+    }
+
+    .clr-radio-wrapper,
+    .clr-checkbox-wrapper {
+      height: 18px;
+    }
+
+    .clr-radio-wrapper label,
+    .clr-checkbox-wrapper label {
+      padding-left: 16px;
+    }
+  }
+}
+.vertical-divider {
+  width: 1px;
+  height: 22px;
+  background: #bbb;
+  margin: 2px 7px 0 -10px;
+}
+</style>
+
+<style>
+:root {
+  --table-color: #565656;
+  --table-active-color: #fff;
+  --table-checkbox-color: #454545;
+  --table-caret-color: #454545;
+  --table-switch-color: #575757;
+  --table-hover-row-border-color: #666;
+  --table-hover-row-background-color: #e8e8e8;
+  --table-hover-row-color: #454545;
+}
+
+:root.dark-theme {
+  --table-color: #fff;
+  --table-active-color: #565656;
+  --table-checkbox-color: #49aeda;
+  --table-caret-color: #ffffff;
+  --table-switch-color: #b3b3b3;
+  --table-hover-row-border-color: #fff;
+  --table-hover-row-background-color: #324f61;
+  --table-hover-row-color: #e9ecef;
+}
+</style>

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

@@ -0,0 +1,11 @@
+export interface UI_I_HeadItem {
+  key: string
+  text: string
+  width: number
+} 
+
+export interface UI_I_BodyItem {
+  key: string
+  text: string | number
+  data?: any
+}

package/components/atoms/table/dataGrid/DataGrid.spec.ts

@@ -0,0 +1,61 @@
+// import { describe, test, expect, vi } from 'vitest'
+// import { mount } from '@vue/test-utils'
+// import DataGrid from './DataGrid.vue'
+// import HeadItem from '~/components/atoms/table/dataGrid/models/headItem'
+// import BodyItem from '~/components/atoms/table/dataGrid/models/bodyItem'
+//
+// vi.stubGlobal('useLocal', () => {
+//   return {}
+// })
+// vi.stubGlobal('window.structuredClone', (a) => a)
+//
+// const headItems: HeadItem[] = [
+//   {
+//     key: 'col1',
+//     text: 'head 1',
+//     filter: '',
+//     showFilter: false,
+//     hasFilter: true,
+//     sortColumn: '',
+//     width: '200px',
+//   },
+//   {
+//     key: 'col2',
+//     text: 'head 2',
+//     filter: '',
+//     showFilter: false,
+//     hasFilter: true,
+//     sortColumn: '',
+//     width: '300px',
+//   },
+// ]
+//
+// const bodyItems: BodyItem[][] = [
+//   [
+//     { key: 'col1', text: 'item 1' },
+//     { key: 'col2', text: 'item 2' },
+//   ],
+// ]
+//
+// const factory = () => {
+//   return mount(DataGrid, {
+//     props: {
+//       headItems,
+//       bodyItems,
+//     },
+//   })
+// }
+//
+// describe('DataGrid.vue', () => {
+//   test('test render', async () => {
+//     const wrapper = await factory()
+//
+//     const th = wrapper.findAll('.datagrid-column-title')
+//     expect(th.at(0).text()).toBe('head 1')
+//     expect(th.at(1).text()).toBe('head 2')
+//
+//     const td = wrapper.findAll('.add-hosts-summary-table-cell')
+//     expect(td.at(0).text()).toBe('item 1')
+//     expect(td.at(1).text()).toBe('item 2')
+//   })
+// })