bfg-common 1.5.92 → 1.5.94

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

@@ -1,529 +1,529 @@
-<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) in item"
-                            :key="item2"
-                            :style="{
-                              width: `${columnsWidth[key2]}`,
-                            }"
-                            class="datagrid-cell datagrid-fixed-width"
-                          >
-                            <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 type { UI_I_HeadItem } from '~/components/atoms/table/compact/lib/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)
-
-  dataGridWidth = document.getElementById(outerWrapper)?.clientWidth || 0
-
-  if (!el || !dataGridWidth) {
-    setTimeout(setDataGridWidth, 0)
-    return
-  }
-
-  const emptyWidthCount = props.headItems.filter((item) => !item.width).length
-  const existWidthsSum = props.headItems.reduce(
-    (acum, item) => (acum += item.width),
-    0
-  )
-  const equalGridWidth = (dataGridWidth - existWidthsSum) / emptyWidthCount
-  props.headItems.forEach((item) => {
-    const elementMax = Math.max(equalGridWidth, item.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: var(--z-sticky);
-            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: calc(var(--z-sticky) + 1);
-                }
-                &.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: calc(var(--z-sticky) + 1);
-                }
-              }
-
-              .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: var(--z-sticky);
-            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: var(--z-fixed);
-
-      .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>
+<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) in item"
+                            :key="item2"
+                            :style="{
+                              width: `${columnsWidth[key2]}`,
+                            }"
+                            class="datagrid-cell datagrid-fixed-width"
+                          >
+                            <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 type { UI_I_HeadItem } from '~/components/atoms/table/compact/lib/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)
+
+  dataGridWidth = document.getElementById(outerWrapper)?.clientWidth || 0
+
+  if (!el || !dataGridWidth) {
+    setTimeout(setDataGridWidth, 0)
+    return
+  }
+
+  const emptyWidthCount = props.headItems.filter((item) => !item.width).length
+  const existWidthsSum = props.headItems.reduce(
+    (acum, item) => (acum += item.width),
+    0
+  )
+  const equalGridWidth = (dataGridWidth - existWidthsSum) / emptyWidthCount
+  props.headItems.forEach((item) => {
+    const elementMax = Math.max(equalGridWidth, item.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: var(--z-sticky);
+            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: calc(var(--z-sticky) + 1);
+                }
+                &.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: calc(var(--z-sticky) + 1);
+                }
+              }
+
+              .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: var(--z-sticky);
+            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: var(--z-fixed);
+
+      .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>