Skip to content

Commit

Permalink
fix: typing issues
Browse files Browse the repository at this point in the history
  • Loading branch information
Rohan Bansal committed Jan 14, 2025
1 parent 1110d0a commit 906ab22
Show file tree
Hide file tree
Showing 9 changed files with 43 additions and 44 deletions.
5 changes: 3 additions & 2 deletions atable/src/components/ACell.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,11 @@ const showModal = () => {
state.modal.visible = true
state.modal.colIndex = colIndex
state.modal.rowIndex = rowIndex
// TODO: typing refs somehow resolves to unref'd value; probably a bug in API Extractor?
state.modal.left = left
state.modal.bottom = bottom
state.modal.width = width.value
state.modal.height = height.value
state.modal.width = width
state.modal.height = height
if (typeof column.modalComponent === 'function') {
state.modal.component = column.modalComponent({ table: state.table, row, column })
Expand Down
12 changes: 4 additions & 8 deletions atable/src/components/ATable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,7 @@

<slot name="footer" :data="store" />
<slot name="modal" :data="store">
<ATableModal
v-show="store.modal.visible"
:colIndex="store.modal.colIndex"
:rowIndex="store.modal.rowIndex"
:store="store">
<ATableModal v-show="store.modal.visible" :store="store">
<template #default>
<component
:key="`${store.modal.rowIndex}:${store.modal.colIndex}`"
Expand Down Expand Up @@ -125,8 +121,8 @@ const assignStickyCellWidths = () => {
const table = tableRef.value
// set header cell width to match sticky cells' width
const headerRow = table.rows[0]
const firstDataRow = table.rows[1]
const headerRow = table?.rows[0]
const firstDataRow = table?.rows[1]
const headerCells = headerRow ? Array.from(headerRow.cells) : []
for (const [index, headerCell] of headerCells.entries()) {
const rowCell = firstDataRow?.cells[index]
Expand All @@ -136,7 +132,7 @@ const assignStickyCellWidths = () => {
}
// pin cells in row that are sticky
for (const row of table.rows) {
for (const row of table?.rows || []) {
let totalWidth = 0
const columns: HTMLTableCellElement[] = []
Expand Down
11 changes: 5 additions & 6 deletions atable/src/components/ATableModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,15 @@ import { useTemplateRef, computed } from 'vue'
import { createTableStore } from '../stores/table'
const { store } = defineProps<{
colIndex?: number
rowIndex?: number
store?: ReturnType<typeof createTableStore>
}>()
const { store } = defineProps<{ store: ReturnType<typeof createTableStore> }>()
const amodalRef = useTemplateRef('amodal')
const { width, height } = useElementBounding(amodalRef)
const scrollY = useWindowScroll().y
const { y: scrollY } = useWindowScroll()
const amodalStyles = computed(() => {
if (!(store.modal.height && store.modal.width && store.modal.left && store.modal.bottom)) return
const body = document.body
const html = document.documentElement
Expand All @@ -37,6 +35,7 @@ const amodalStyles = computed(() => {
store.modal.bottom + height.value + scrollY.value <= maxHeight
? store.modal.bottom
: store.modal.bottom - height.value - store.modal.height
const modalX =
store.modal.left + width.value <= maxWidth ? store.modal.left : store.modal.left - (width.value - store.modal.width)
Expand Down
12 changes: 7 additions & 5 deletions atable/src/types/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { useElementBounding } from '@vueuse/core'

import { createTableStore } from '../stores/table'

/**
Expand Down Expand Up @@ -93,22 +95,22 @@ export type TableRow = {
* @public
*/
export type TableModal = {
bottom?: ReturnType<typeof useElementBounding>['bottom']
colIndex?: number
event?: string
height?: number
left?: number
height?: ReturnType<typeof useElementBounding>['height']
left?: ReturnType<typeof useElementBounding>['left']
parent?: HTMLElement
rowIndex?: number
top?: number
visible?: boolean
width?: number
width?: ReturnType<typeof useElementBounding>['width']

component?: string
componentProps?: Record<string, any>
}

/**
* Table modal props definition.
* Table modal component props definition.
* @public
*/
export type TableModalProps = {
Expand Down
21 changes: 11 additions & 10 deletions common/reviews/api/atable.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { ComputedRef } from 'vue';
import { CSSProperties } from 'vue';
import { Ref } from 'vue';
import { Store } from 'pinia';
import { useElementBounding } from '@vueuse/core';

export { ACell }

Expand Down Expand Up @@ -105,25 +106,25 @@ parent?: number | undefined;
rowModified?: boolean | undefined;
}[]>;
modal: Ref< {
bottom?: number | undefined;
colIndex?: number | undefined;
event?: string | undefined;
height?: number | undefined;
left?: number | undefined;
parent?: HTMLElement | undefined;
rowIndex?: number | undefined;
top?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
component?: string | undefined;
componentProps?: Record<string, any> | undefined;
}, TableModal | {
bottom?: number | undefined;
colIndex?: number | undefined;
event?: string | undefined;
height?: number | undefined;
left?: number | undefined;
parent?: HTMLElement | undefined;
rowIndex?: number | undefined;
top?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
component?: string | undefined;
Expand Down Expand Up @@ -211,25 +212,25 @@ parent?: number | undefined;
rowModified?: boolean | undefined;
}[]>;
modal: Ref< {
bottom?: number | undefined;
colIndex?: number | undefined;
event?: string | undefined;
height?: number | undefined;
left?: number | undefined;
parent?: HTMLElement | undefined;
rowIndex?: number | undefined;
top?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
component?: string | undefined;
componentProps?: Record<string, any> | undefined;
}, TableModal | {
bottom?: number | undefined;
colIndex?: number | undefined;
event?: string | undefined;
height?: number | undefined;
left?: number | undefined;
parent?: HTMLElement | undefined;
rowIndex?: number | undefined;
top?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
component?: string | undefined;
Expand Down Expand Up @@ -317,25 +318,25 @@ parent?: number | undefined;
rowModified?: boolean | undefined;
}[]>;
modal: Ref< {
bottom?: number | undefined;
colIndex?: number | undefined;
event?: string | undefined;
height?: number | undefined;
left?: number | undefined;
parent?: HTMLElement | undefined;
rowIndex?: number | undefined;
top?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
component?: string | undefined;
componentProps?: Record<string, any> | undefined;
}, TableModal | {
bottom?: number | undefined;
colIndex?: number | undefined;
event?: string | undefined;
height?: number | undefined;
left?: number | undefined;
parent?: HTMLElement | undefined;
rowIndex?: number | undefined;
top?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
component?: string | undefined;
Expand Down Expand Up @@ -408,15 +409,15 @@ export type TableDisplay = {

// @public
export type TableModal = {
bottom?: ReturnType<typeof useElementBounding>['bottom'];
colIndex?: number;
event?: string;
height?: number;
left?: number;
height?: ReturnType<typeof useElementBounding>['height'];
left?: ReturnType<typeof useElementBounding>['left'];
parent?: HTMLElement;
rowIndex?: number;
top?: number;
visible?: boolean;
width?: number;
width?: ReturnType<typeof useElementBounding>['width'];
component?: string;
componentProps?: Record<string, any>;
};
Expand Down
14 changes: 7 additions & 7 deletions docs/atable/atable.createtablestore.md
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/atable/atable.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ Table modal definition.

</td><td>

Table modal props definition.
Table modal component props definition.


</td></tr>
Expand Down
8 changes: 4 additions & 4 deletions docs/atable/atable.tablemodal.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ Table modal definition.

```typescript
export type TableModal = {
bottom?: ReturnType<typeof useElementBounding>['bottom'];
colIndex?: number;
event?: string;
height?: number;
left?: number;
height?: ReturnType<typeof useElementBounding>['height'];
left?: ReturnType<typeof useElementBounding>['left'];
parent?: HTMLElement;
rowIndex?: number;
top?: number;
visible?: boolean;
width?: number;
width?: ReturnType<typeof useElementBounding>['width'];
component?: string;
componentProps?: Record<string, any>;
};
Expand Down
2 changes: 1 addition & 1 deletion docs/atable/atable.tablemodalprops.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## TableModalProps type

Table modal props definition.
Table modal component props definition.

**Signature:**

Expand Down

0 comments on commit 906ab22

Please sign in to comment.