Skip to content

Commit dea22bb

Browse files
webJosewebJose
authored
Merge pull request #55 from WJSoftware:JP/fix
feat: Export controlColumn type and make text an optional property
2 parents d2bc445 + 29a293f commit dea22bb

File tree

1 file changed

+85
-79
lines changed

1 file changed

+85
-79
lines changed

‎src/lib/WjDataView.svelte‎

Lines changed: 85 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,35 @@
8686
get?: (row: WjDvRow<TRow>) => any;
8787
};
8888
89+
/**
90+
* Defines the control column's definition information and snippets.
91+
*/
92+
export type ControlColumn<TRow extends Record<string, any> = Record<string, any>, TCol extends Record<string, any> = Record<string, any>> = {
93+
/**
94+
* Defines the control column.
95+
*
96+
* Defining the control column is done the same as regular columns, with the following differences:
97+
*
98+
* + No `key` property.
99+
* + No `pinned` property, as the control column is always pinned.
100+
* + No `get` function.
101+
* + No `hidden` property.
102+
* + The `width` property is required.
103+
* + The `text` property is optional.
104+
*/
105+
definition: Omit<WjDvColumn<TRow, TCol>, 'key' | 'pinned' | 'get' | 'hidden'> & { width: number; text?: string; };
106+
/**
107+
* Renders the contents of the control column's header cell.
108+
*/
109+
headerCell?: Snippet;
110+
/**
111+
* Renders the contents of the control column's data cells.
112+
* @param row The row being rendered.
113+
* @param rowIndex The index of the row being rendered.
114+
*/
115+
dataCell?: Snippet<[WjDvRow<TRow>, number]>;
116+
};
117+
89118
/**
90119
* Defines the possible grid line options for the `WjDataView` component.
91120
*/
@@ -218,30 +247,7 @@
218247
*
219248
* If not provided, the control column is omitted.
220249
*/
221-
controlColumn?: {
222-
/**
223-
* Defines the control column.
224-
*
225-
* Defining the control column is done the same as regular columns, with the following differences:
226-
*
227-
* + No `key` property.
228-
* + No `pinned` property, as the control column is always pinned.
229-
* + No `get` function.
230-
* + No `hidden` property.
231-
* + The `width` property is required.
232-
*/
233-
definition: Omit<WjDvColumn<TRow, TCol>, 'key' | 'pinned' | 'get' | 'hidden'> & { width: number; };
234-
/**
235-
* Renders the contents of the control column's header cell.
236-
*/
237-
headerCell?: Snippet;
238-
/**
239-
* Renders the contents of the control column's data cells.
240-
* @param row The row being rendered.
241-
* @param rowIndex The index of the row being rendered.
242-
*/
243-
dataCell?: Snippet<[WjDvRow<TRow>, number]>;
244-
}
250+
controlColumn?: ControlColumn<TRow, TCol>;
245251
};
246252
247253
let {
@@ -315,69 +321,69 @@
315321

316322
{#snippet colHeaders(cols: ColumnInfo[])}
317323
{#each cols as ci, index (ci.column.key)}
318-
<div
319-
class={combineClasses('col-header', {
320-
'sticky-header': !!ci.column.pinned,
321-
'sticky-divider': pinnedDivider && index + 1 === cols.length,
322-
'col-grid-line': !!(gridLines & GridLines.Column)
323-
})}
324-
role="columnheader"
325-
style:width={`${columnWidth(ci.column)}em`}
326-
style:left={ci.left !== undefined && !!ci.column.pinned ? `${ci.left}em` : undefined}
327-
style:z-index={!!ci.column.pinned ? cols.length - index : undefined}
328-
>
329-
<div>
330-
{#if ci.column.key === controlColKey && controlColumn?.headerCell}
331-
{@render controlColumn.headerCell()}
332-
{:else if headerCell && ci.column.key !== controlColKey}
333-
{@render headerCell(ci.column)}
334-
{:else}
335-
<div class="default-header-content">
336-
{ci.column.text}
337-
</div>
338-
{/if}
339-
{#if ci.column.resizable ?? true}
340-
<Resizer minSize={ci.column.minWidth} resize={newSize => ci.column.width = newSize} />
341-
{:else}
342-
<div></div>
343-
{/if}
324+
<div
325+
class={combineClasses('col-header', {
326+
'sticky-header': !!ci.column.pinned,
327+
'sticky-divider': pinnedDivider && index + 1 === cols.length,
328+
'col-grid-line': !!(gridLines & GridLines.Column)
329+
})}
330+
role="columnheader"
331+
style:width={`${columnWidth(ci.column)}em`}
332+
style:left={ci.left !== undefined && !!ci.column.pinned ? `${ci.left}em` : undefined}
333+
style:z-index={!!ci.column.pinned ? cols.length - index : undefined}
334+
>
335+
<div>
336+
{#if ci.column.key === controlColKey && controlColumn?.headerCell}
337+
{@render controlColumn.headerCell()}
338+
{:else if headerCell && ci.column.key !== controlColKey}
339+
{@render headerCell(ci.column)}
340+
{:else}
341+
<div class="default-header-content">
342+
{ci.column.text}
343+
</div>
344+
{/if}
345+
{#if ci.column.resizable ?? true}
346+
<Resizer minSize={ci.column.minWidth} resize={newSize => ci.column.width = newSize} />
347+
{:else}
348+
<div></div>
349+
{/if}
350+
</div>
344351
</div>
345-
</div>
346352
{/each}
347353
{/snippet}
348354

349355
{#snippet colData(row: WjDvRow<TRow>, rowIndex: number, cols: ColumnInfo[])}
350356
{#each cols as ci, index (ci.column.key)}
351-
{@const getFn = ci.column.get ?? (r => get(r, ci.column.key))}
352-
<div
353-
class={combineClasses('dataview-cell-bg', {
354-
'sticky-data': !!ci.column.pinned,
355-
'sticky-divider': pinnedDivider && index + 1 === cols.length,
356-
'col-grid-line': !!(gridLines & GridLines.Column)
357-
})}
358-
role="cell"
359-
style:width={`${ci.column.width ?? defaultWidth}em`}
360-
style:left={ci.left !== undefined ? `${ci.left}em` : undefined}
361-
>
362-
<div class="dataview-cell-s">
363-
<div class={combineClasses("dataview-cell-d", {
364-
'align-start': ci.column.alignment === 'start',
365-
'align-center': ci.column.alignment === 'center',
366-
'align-end': ci.column.alignment === 'end',
367-
'no-wrap': ci.column.noTextWrap ?? false,
368-
})}>
369-
{#if ci.column.key === controlColKey && controlColumn?.dataCell}
370-
{@render controlColumn.dataCell(row, rowIndex)}
371-
{:else if dataCell && ci.column.key !== controlColKey}
372-
{@render dataCell(ci.column, row)}
373-
{:else}
374-
<div class="default-content">
375-
{getFn(row)}
376-
</div>
377-
{/if}
357+
{@const getFn = ci.column.get ?? (r => get(r, ci.column.key))}
358+
<div
359+
class={combineClasses('dataview-cell-bg', {
360+
'sticky-data': !!ci.column.pinned,
361+
'sticky-divider': pinnedDivider && index + 1 === cols.length,
362+
'col-grid-line': !!(gridLines & GridLines.Column)
363+
})}
364+
role="cell"
365+
style:width={`${ci.column.width ?? defaultWidth}em`}
366+
style:left={ci.left !== undefined ? `${ci.left}em` : undefined}
367+
>
368+
<div class="dataview-cell-s">
369+
<div class={combineClasses("dataview-cell-d", {
370+
'align-start': ci.column.alignment === 'start',
371+
'align-center': ci.column.alignment === 'center',
372+
'align-end': ci.column.alignment === 'end',
373+
'no-wrap': ci.column.noTextWrap ?? false,
374+
})}>
375+
{#if ci.column.key === controlColKey && controlColumn?.dataCell}
376+
{@render controlColumn.dataCell(row, rowIndex)}
377+
{:else if dataCell && ci.column.key !== controlColKey}
378+
{@render dataCell(ci.column, row)}
379+
{:else}
380+
<div class="default-content">
381+
{getFn(row)}
382+
</div>
383+
{/if}
384+
</div>
378385
</div>
379386
</div>
380-
</div>
381387
{/each}
382388
{/snippet}
383389

0 commit comments

Comments
 (0)