[QTable] Fix sticky and status border in Safari (#109)

altai-ui · Jul 1, 2021 · 15c3a17 · 15c3a17
1 parent 9646a0c
commit 15c3a17
Show file tree

Hide file tree

Showing 10 changed files with 388 additions and 402 deletions.
diff --git a/.husky/.gitignore b/.husky/.gitignore
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   "dependencies": {
     "@popperjs/core": "^2.9.2",
     "async-validator": "^3.5.2",
-    "colord": "^2.0.1",
+    "colord": "^2.1.0",
     "date-fns": "^2.22.1",
     "focus-visible": "^5.2.0",
     "lodash-es": "^4.17.21"
@@ -35,15 +35,15 @@
     "@babel/core": "^7.14.6",
     "@qvant/prettier-config": "^0.0.1",
     "@qvant/stylelint-config": "^0.0.1",
-    "@storybook/addon-actions": "^6.3.1",
-    "@storybook/addon-essentials": "^6.3.1",
-    "@storybook/addon-links": "^6.3.1",
-    "@storybook/addon-storysource": "^6.3.1",
-    "@storybook/builder-webpack5": "^6.3.1",
-    "@storybook/manager-webpack5": "^6.3.1",
+    "@storybook/addon-actions": "^6.3.2",
+    "@storybook/addon-essentials": "^6.3.2",
+    "@storybook/addon-links": "^6.3.2",
+    "@storybook/addon-storysource": "^6.3.2",
+    "@storybook/builder-webpack5": "^6.3.2",
+    "@storybook/manager-webpack5": "^6.3.2",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/storybook-deployer": "^2.8.10",
-    "@storybook/vue3": "^6.3.1",
+    "@storybook/vue3": "^6.3.2",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.5",
     "@types/sass": "^1.16.0",
@@ -61,7 +61,7 @@
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.12.1",
-    "husky": "^6.0.0",
+    "husky": "^7.0.0",
     "lint-staged": "^11.0.0",
     "prettier": "^2.3.2",
     "rollup-plugin-copy": "^3.4.0",
@@ -73,9 +73,9 @@
     "sass-loader": "^12.1.0",
     "style-loader": "^3.0.0",
     "stylelint": "^13.13.1",
-    "typescript": "^4.3.4",
+    "typescript": "^4.3.5",
     "vite": "^2.3.8",
-    "vite-plugin-dts": "^0.5.1",
+    "vite-plugin-dts": "^0.5.2",
     "vue": "^3.1.2",
     "vue-loader": "^16.3.0"
   },

diff --git a/src/qComponents/QTable/src/QTableContainer/QTableContainer.vue b/src/qComponents/QTable/src/QTableContainer/QTableContainer.vue
@@ -4,13 +4,20 @@
       ref="scrollbar"
       theme="secondary"
     >
-      <q-table-t />
+      <div
+        class="q-table-container__wrapper"
+        :style="wrapperStyles"
+      >
+        <q-table-t @change-width="handleWidthChange" />
+      </div>
     </q-scrollbar>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, provide, inject } from 'vue';
+import { defineComponent, computed, ref, provide, inject } from 'vue';
+
+import type { Nullable } from '#/helpers';
 
 import QTableT from '../QTableT/QTableT.vue';
 import type { QTableProvider } from '../types';
@@ -47,12 +54,26 @@ export default defineComponent({
       Boolean(qTable.selectionColumn.value?.enabled)
     );
 
+    const tableWidth = ref<Nullable<number>>(null);
+
+    const wrapperStyles = computed<{ width: Nullable<string> }>(() => ({
+      width: tableWidth.value ? `${tableWidth.value}px` : null
+    }));
+
+    const handleWidthChange = (width: Nullable<number>): void => {
+      tableWidth.value = width;
+    };
+
     provide<QTableContainerProvider>('qTableContainer', {
       columnList,
       isSelectable
     });
 
-    return { columnList };
+    return {
+      columnList,
+      wrapperStyles,
+      handleWidthChange
+    };
   }
 });
 </script>
diff --git a/src/qComponents/QTable/src/QTableContainer/q-table-container.scss b/src/qComponents/QTable/src/QTableContainer/q-table-container.scss
@@ -5,4 +5,9 @@
       left: 32px;
     }
   }
+
+  &__wrapper {
+    box-sizing: content-box;
+    padding: 8px 32px 16px;
+  }
 }
diff --git a/src/qComponents/QTable/src/QTableContainer/types.ts b/src/qComponents/QTable/src/QTableContainer/types.ts
@@ -1,5 +1,7 @@
 import type { ComputedRef } from 'vue';
 
+import type { Nullable } from '#/helpers';
+
 import type { Column } from '../types';
 
 export interface ExtendedColumn extends Column {
@@ -18,4 +20,8 @@ export interface QTableContainerProvider {
 
 export interface QTableContainerInstance {
   columnList: ComputedRef<ExtendedColumn[]>;
+  wrapperStyles: ComputedRef<{
+    width: Nullable<string>;
+  }>;
+  handleWidthChange: (width: Nullable<number>) => void;
 }
diff --git a/src/qComponents/QTable/src/QTableT/QTableT.vue b/src/qComponents/QTable/src/QTableT/QTableT.vue
@@ -28,7 +28,7 @@ import { defineComponent, inject, ref, computed, provide, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { useResizeListener } from '@/qComponents/hooks';
-import type { Nullable, Optional, UnwrappedInstance } from '#/helpers';
+import type { Nullable, UnwrappedInstance } from '#/helpers';
 
 import QTableTBody from '../QTableTBody/QTableTBody.vue';
 import QTableTColgroup from '../QTableTColgroup/QTableTColgroup.vue';
@@ -43,6 +43,8 @@ import type {
 
 import type { QTableTProvider, QTableTInstance } from './types';
 
+const CHANGE_WIDTH_EVENT = 'change-width';
+
 export default defineComponent({
   name: 'QTableT',
   componentName: ' QTableT',
@@ -55,7 +57,9 @@ export default defineComponent({
     QTableTTotal
   },
 
-  setup(): QTableTInstance {
+  emits: [CHANGE_WIDTH_EVENT],
+
+  setup(_, ctx): QTableTInstance {
     const qTable = inject<QTableProvider>('qTable', {} as QTableProvider);
 
     const isColgroupShown = computed<boolean>(() =>
@@ -90,17 +94,9 @@ export default defineComponent({
       tableHeight
     });
 
-    const setTableHeight = (el: HTMLElement): void => {
-      const computedStyle = getComputedStyle(el);
-      tableHeight.value =
-        el.clientHeight -
-        parseFloat(computedStyle.paddingTop) -
-        parseFloat(computedStyle.paddingBottom);
-    };
-
     watch(rootResize.observedEntry, value => {
-      const el = value?.target as Optional<HTMLElement>;
-      if (el) setTableHeight(el);
+      tableHeight.value = value?.contentRect?.height ?? null;
+      ctx.emit(CHANGE_WIDTH_EVENT, value?.contentRect.width ?? null);
     });
 
     return {

diff --git a/src/qComponents/QTable/src/QTableT/q-table-t.scss b/src/qComponents/QTable/src/QTableT/q-table-t.scss
@@ -10,7 +10,6 @@
 
 .q-table-t {
   width: 100%;
-  padding: 8px 32px 16px;
 
   &_fixed {
     width: max-content;

diff --git a/src/qComponents/QTable/src/QTableTBody/QTableTBodyRow/q-table-t-body-row.scss b/src/qComponents/QTable/src/QTableTBody/QTableTBodyRow/q-table-t-body-row.scss
@@ -3,7 +3,7 @@
   overflow: hidden;
   box-shadow: var(--table-box-shadow-base);
 
-  &::after {
+  .q-table-t-body-cell:first-child::after {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -15,15 +15,11 @@
     background-color: var(--row-custom-border-color, transparent);
   }
 
-  &:not(:first-child)::after {
-    top: 1px;
-  }
-
   &:last-child {
     border-bottom-right-radius: var(--border-radius-base);
 
     &,
-    &::after {
+    .q-table-t-body-cell:first-child::after {
       border-bottom-left-radius: var(--border-radius-base);
     }
   }
@@ -32,7 +28,7 @@
     border-top-right-radius: var(--border-radius-base);
 
     &,
-    &::after {
+    .q-table-t-body-cell:first-child::after {
       border-top-left-radius: var(--border-radius-base);
     }
   }

diff --git a/src/qComponents/QTable/src/QTableTSticky/QTableTSticky.vue b/src/qComponents/QTable/src/QTableTSticky/QTableTSticky.vue
@@ -35,6 +35,8 @@ import type { QTableContainerProvider } from '../QTableContainer/types';
 
 import type { StickyGlobalConfig, QTableTStickyInstance } from './types';
 
+const WRAPPER_PADDING_LEFT = 32;
+
 export default defineComponent({
   name: 'QTableTSticky',
   componentName: ' QTableTSticky',
@@ -172,7 +174,7 @@ export default defineComponent({
     watch(
       [qScrollbar.moveXInPx, qScrollbar.sizeWidth, offsetsList],
       ([value]) => {
-        nextTick(() => checkSticky(value ?? 0));
+        nextTick(() => checkSticky(value - WRAPPER_PADDING_LEFT ?? 0));
       }
     );